[
  {
    "path": ".claude/skills/vibe-breaking-change/SKILL.md",
    "content": "---\nname: vibe-breaking-change\ndescription: Implements Vibe Design System breaking changes with full workflow automation including component updates, migration guide updates, codemod generation, testing, and PR creation. Use when implementing breaking changes to Vibe components that require coordinated updates across the design system.\n---\n\n# Vibe Breaking Change Implementation\n\n## Overview\n\nImplements breaking changes to Vibe Design System components following the established workflow with automated validation, documentation updates, and codemod generation where applicable.\n\n## When to Use\n\n**Use this skill when:**\n- Implementing breaking API changes to Vibe components\n- Deprecating component props or methods\n- Changing component behavior that affects dependent components\n- Updating component interfaces that require migration documentation\n- Making changes that need coordinated updates across the design system\n\n**Do NOT use for:**\n- Non-breaking enhancements or bug fixes\n- Internal refactoring that doesn't affect public APIs\n- Style-only changes without behavioral impact\n- Emergency hotfixes that bypass normal workflow\n\n## Quick Reference\n\n| Phase | Actions | Validation |\n|-------|---------|------------|\n| 1. Analysis | Identify affected components, dependencies | Component mapping complete |\n| 2. Implementation | Apply breaking change, update dependents | Tests pass locally |\n| 3. Testing | Run full test suite, update failing tests | All tests green |\n| 4. Documentation | Update migration guide, add codemod if deterministic | Documentation complete |\n| 5. Cleanup & Delivery | lint:fix, lint, build, test → commit, push, PR with task link | All checks pass, PR ready for review |\n\n## Core Workflow\n\n### Phase 1: Analysis and Planning\n\n**🔍 Comprehensive Dependency Analysis:**\n\n```bash\n# 1. Find all imports and usage across packages\ngrep -r \"import.*ComponentName\" packages/\ngrep -r \"ComponentName\" packages/ --include=\"*.tsx\" --include=\"*.ts\" --include=\"*.jsx\" --include=\"*.js\"\n\n# 2. Find specific prop usage being changed (comprehensive search)\ngrep -r \"oldProp=\" packages/ --include=\"*.tsx\" --include=\"*.ts\" --include=\"*.jsx\" --include=\"*.js\"\nfind packages -name \"*.tsx\" -o -name \"*.ts\" -o -name \"*.jsx\" -o -name \"*.js\" | xargs grep -l \"oldProp\\|deprecatedMethod\"\n\n# 3. Analyze by package structure\nfind packages/components -name \"*.tsx\" | xargs grep -l \"ComponentName\"  # Standalone packages\nfind packages/core/src -name \"*.tsx\" | xargs grep -l \"ComponentName\"    # Core package\nfind packages/docs -name \"*.tsx\" | xargs grep -l \"ComponentName\"        # Documentation\nfind packages/mcp -name \"*.ts\" | xargs grep -l \"ComponentName\"          # MCP examples\n```\n\n**📋 Analysis Checklist:**\n1. **Map Dependencies:**\n   - [ ] Components that import the target component\n   - [ ] Components that use the target component inline\n   - [ ] Hook or utility functions that reference the component\n   - [ ] Documentation and example files\n\n2. **Assess Impact Scope:**\n   - [ ] Standalone component packages (packages/components/*)\n   - [ ] Core package components (packages/core/src/components/*)\n   - [ ] Supporting packages (docs, mcp, testkit)\n   - [ ] Test files and stories\n\n3. **Plan Migration Strategy:**\n   - [ ] Order of updates (component first, then dependents)\n   - [ ] TypeScript interface changes needed\n   - [ ] Codemod feasibility (deterministic vs manual)\n   - [ ] Documentation updates required\n\nSee `references/dependency-analysis.md` for advanced dependency mapping techniques.\n\n**📊 Expected Findings:**\n- **20-40 component files** typically need updates for major component changes\n- **Multiple package types** - standalone, core, docs, examples\n- **Mixed file types** - .tsx, .ts, .jsx, .js all may need updates\n- **Hidden dependencies** - MCP tools, test utilities, etc.\n\n### Phase 2: Implementation\n\n**🏗️ Systematic Update Approach:**\n\n**Step 1: Source Component Updates**\n```typescript\n// 1. Update component interface\ninterface ComponentProps {\n  // ❌ Remove deprecated props\n  // oldProp?: string;\n  // deprecatedMethod?: () => void;\n\n  // ✅ Add new props with better API\n  newProp?: string;\n  improvedMethod?: () => void;\n}\n\n// 2. Update component implementation\nconst Component = ({ newProp, ...props }: ComponentProps) => {\n  // Implementation with new API\n};\n```\n\n**Step 2: Internal Dependencies (same package)**\n```typescript\n// Update hooks, utilities, and helpers in the same package\n// Example: Icon component's useIconProps hook\nexport default function useIconProps({\n  label,        // ✅ Updated from iconLabel\n  // iconLabel, // ❌ Removed\n}) {\n  // Implementation\n}\n```\n\n**Step 3: Cross-Package Updates (systematic)**\n```bash\n# Process 20-40 files systematically\n# Group by package for efficient updates:\n\n# A. Standalone component packages\npackages/components/tooltip/src/Tooltip/Tooltip.tsx\npackages/components/button/src/Button/Button.tsx\n\n# B. Core package components (bulk of changes)\npackages/core/src/components/AttentionBox/AttentionBox.tsx\npackages/core/src/components/Checkbox/Checkbox.tsx\n# ... (typically 20-30 files)\n\n# C. Supporting files\npackages/mcp/src/server/tools/list-vibe-icons.ts\npackages/docs/src/pages/components/ComponentName/ComponentName.stories.tsx\n```\n\n**🔄 Implementation Order:**\n1. **Component Package** - Update source component and internal dependencies\n2. **Individual Packages** - Update standalone packages that use the component\n3. **Core Package** - Systematically update all core components (largest effort)\n4. **Build Fix** - Address any TypeScript errors revealed by changes\n5. **Supporting Files** - Update docs, examples, MCP tools\n\n**✅ Implementation Checklist:**\n- [ ] Source component interface updated\n- [ ] Internal component dependencies updated (hooks, utilities)\n- [ ] Standalone packages updated (5-10 files typically)\n- [ ] Core package components updated (20-30 files typically)\n- [ ] TypeScript build errors resolved\n- [ ] Documentation and examples updated\n- [ ] All updates maintain semantic consistency\n\n### Phase 3: Testing and Validation\n\n```bash\n# Run comprehensive tests\nyarn workspace @vibe/core test\nlerna run test\n\n# Run specific component tests\nyarn workspace @vibe/core test -- Component\n\n# Update snapshots if needed\nyarn workspace @vibe/core test -- --updateSnapshot\n```\n\nSee `references/testing-validation.md` for detailed testing patterns and examples.\n\n**Testing requirements:**\n- All existing tests pass or are updated appropriately\n- New tests cover breaking change scenarios\n- Integration tests verify dependent components work\n- No TypeScript errors across the monorepo\n\n### Phase 4: Documentation Updates\n\n#### Migration Guide Update (VIBE4_MIGRATION_GUIDE.md)\n\n```markdown\n## ComponentName API Changes\n\n### Breaking Changes\n\n**Removed `oldProp` prop**\n- **Before:** `<ComponentName oldProp=\"value\" />`\n- **After:** `<ComponentName newProp=\"value\" />`\n- **Reason:** Better API consistency and performance\n\n### Migration Path\n\n1. Replace `oldProp` with `newProp` in all usages\n2. Update prop value format if needed\n3. Test component behavior matches expected outcome\n\n### Codemod Available\n```bash\nnpx @vibe/codemod componentname-old-prop-to-new-prop\n```\n```\n\n#### Codemod Generation (if deterministic)\n\n⚠️ **CRITICAL**: Follow established Vibe codemod patterns to avoid common pitfalls.\nSee `references/codemod-best-practices.md` and `references/codemod-examples.md` for detailed patterns and real examples.\n\n```typescript\n// packages/codemod/transformations/core/v3-to-v4/ComponentName-component-migration.ts\nimport {\n  wrap,\n  getImports,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { NEW_CORE_IMPORT_PATH } from \"../../../src/consts\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * ComponentName migration for v3 to v4:\n * 1. Rename oldProp1 to newProp1\n * 2. Rename oldProp2 to newProp2\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  // ✅ Use correct import path detection\n  const imports = getImports(root, NEW_CORE_IMPORT_PATH);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"ComponentName\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  // ✅ Single efficient call handles all prop renames\n  elements.forEach(elementPath => {\n    migratePropsNames(j, elementPath, filePath, componentName, {\n      oldProp1: \"newProp1\",\n      oldProp2: \"newProp2\",\n      oldProp3: \"newProp3\"\n    });\n  });\n}\n\nexport default wrap(transform);\n```\n\n**Key Pattern Elements:**\n- ✅ Use `getImports(root, NEW_CORE_IMPORT_PATH)` not `getCoreImportsForFile()`\n- ✅ Use `migratePropsNames()` not non-existent `renameProp()`\n- ✅ Single loop with batch prop updates\n- ✅ Include `filePath` parameter for error reporting\n- ✅ Use established utility imports\n\n### Phase 5: Cleanup, Validation, and PR Creation\n\n**⚠️ ABSOLUTE REQUIREMENT: Do NOT commit, push, or create a PR until every validation step below passes with zero errors. A PR with failing CI is not acceptable.**\n\n**Step 1: Validation gate — run each command, fix failures, repeat until all pass**\n\nRun these commands **sequentially**. If ANY command fails, fix the issue and **restart from that command**. Do NOT skip ahead.\n\n```bash\n# 1. Fix lint issues across all packages\nyarn lint:fix\n\n# 2. Verify lint passes with zero errors\nyarn lint\n\n# 3. Build all packages — must exit 0\nyarn build\n\n# 4. Run full test suite — must exit 0\nyarn test\n```\n\n**If a step fails:**\n1. Read the error output carefully\n2. Fix the root cause (do not suppress or skip)\n3. Re-run **from that step** through the remaining steps\n4. Repeat until all 4 steps pass cleanly in sequence\n\n**Only proceed to Step 2 when lint, build, AND tests all pass with zero errors.**\n\n**Step 2: Create branch and commit only after all checks pass**\n\nSee `references/pr-templates.md` for PR description, commit message, and migration guide templates.\nSee `references/workflow-checklist.md` for a comprehensive checklist of all phases.\n\n**📋 Monday.com Task Link:**\nExtract the Monday.com task link from the user's original prompt if provided.\nThe link format is: `https://monday.monday.com/boards/<BOARD_ID>/pulses/<PULSE_ID>`\nInclude this link in the PR description under the \"Task Link\" section.\nIf no task link was provided in the original prompt, ask the user for it before creating the PR.\n\n**Commit and PR titles MUST follow [Conventional Commits](https://www.conventionalcommits.org/).**\n\nUse the appropriate type based on the nature of the change:\n- `feat:` — new feature or capability change\n- `fix:` — bug fix\n- `refactor:` — refactor without behavior change\n\nAlways include a `BREAKING CHANGE:` footer in the commit body.\n\n```bash\n# Create feature branch from vibe4\ngit checkout vibe4\ngit pull origin vibe4\ngit checkout -b breaking-change/component-name-api-update\n\n# Commit changes (only after all checks above pass)\ngit add .\ngit commit -m \"feat(ComponentName): remove oldProp in favor of newProp\n\n- Remove deprecated oldProp in favor of newProp\n- Update all dependent components\n- Add migration guide and codemod\n- Update tests for new API\n\nBREAKING CHANGE: ComponentName.oldProp has been removed.\nUse ComponentName.newProp instead.\n\nCo-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>\"\n\n# Push and create PR\ngit push -u origin breaking-change/component-name-api-update\ngh pr create \\\n  --title \"feat(ComponentName): remove oldProp in favor of newProp\" \\\n  --body \"## Summary\n• Remove deprecated \\`oldProp\\` from ComponentName\n• Update all dependent components to use \\`newProp\\`\n• Add comprehensive migration guide\n• Include codemod for automated migration\n\n## Breaking Changes\n- \\`ComponentName.oldProp\\` → \\`ComponentName.newProp\\`\n\n## Task Link\n[Monday.com Task](https://monday.monday.com/boards/<BOARD_ID>/pulses/<PULSE_ID>)\n\n## Test Plan\n- [ ] All component tests pass\n- [ ] Dependent components work correctly\n- [ ] Codemod transforms existing usage\n- [ ] Migration guide tested\n- [ ] Build and lint checks pass\n\n🤖 Generated with [Claude Code](https://claude.com/claude-code)\"\n```\n\n## Common Patterns\n\n### Comprehensive Component Updates\n\n**Pattern: Systematic Cross-Package Updates**\n```bash\n# Real example from Icon migration (28 files updated):\n\n# 1. Component package (source)\npackages/components/icon/src/Icon/Icon.tsx                    # Main component\npackages/components/icon/src/Icon/hooks/useIconProps.tsx      # Internal hooks\n\n# 2. Related component packages\npackages/components/tooltip/src/Tooltip/Tooltip.tsx          # Uses Icon\npackages/components/icon-button/src/IconButton/IconButton.tsx # Uses Icon internally\n\n# 3. Core package components (bulk updates)\npackages/core/src/components/AttentionBox/AttentionBox.tsx   # 2 Icon instances\npackages/core/src/components/Checkbox/Checkbox.tsx          # 2 Icon instances\npackages/core/src/components/Chips/Chips.tsx                # 2 Icon instances\n# ... 20+ more core components\n\n# 4. Supporting updates\npackages/mcp/src/server/tools/list-vibe-icons.ts           # Documentation examples\npackages/core/src/components/DatePicker/DatePickerHeader.tsx # Related component fixes\n```\n\n**🔧 Batch Update Strategy:**\n1. Use `replace_all=true` for simple prop renames across files\n2. Use `replace_all=false` for context-specific updates\n3. Group similar changes together for efficiency\n4. Verify build after each logical group of changes\n\n### Deterministic Changes (Add Codemod)\n- Simple prop renames (`iconSize` → `size`)\n- Enum value updates\n- Import path changes\n- Method signature changes with clear mapping\n\n### Non-Deterministic Changes (No Codemod)\n- Complex behavioral changes requiring human judgment\n- Context-dependent prop usage\n- Changes requiring business logic updates\n- Multi-step migration requiring staged approach\n\n### Mixed Changes (Partial Codemod + Manual)\n- Prop renames (codemod) + related component fixes (manual)\n- API changes (codemod) + TypeScript error fixes (manual)\n- Interface updates (codemod) + documentation updates (manual)\n\n### Error Recovery\n- If tests fail: Fix broken components, don't skip tests\n- If build fails: Check import/export consistency\n- If codemod fails: Validate transform logic with test cases\n- If PR blocked: Address review feedback before merging\n\n## ⚠️ Common Pitfalls & Lessons Learned\n\n### Codemod Implementation Issues\n\n**❌ Wrong Function Usage:**\n```typescript\n// WRONG - this function doesn't exist\nrenameProp(j, elementPath, \"oldProp\", \"newProp\");\n\n// CORRECT - use established utility\nmigratePropsNames(j, elementPath, filePath, componentName, {\n  oldProp: \"newProp\"\n});\n```\n\n**❌ Wrong Import Path:**\n```typescript\n// WRONG - looks for old package name\nconst imports = getCoreImportsForFile(root);\n\n// CORRECT - specify the right import path\nconst imports = getImports(root, NEW_CORE_IMPORT_PATH); // \"@vibe/core\"\n```\n\n**❌ Inefficient Multiple Loops:**\n```typescript\n// WRONG - separate loops for each prop\nif (isPropExists(j, elementPath, \"prop1\")) {\n  // handle prop1\n}\nif (isPropExists(j, elementPath, \"prop2\")) {\n  // handle prop2\n}\n\n// CORRECT - single efficient call\nmigratePropsNames(j, elementPath, filePath, componentName, {\n  prop1: \"newProp1\",\n  prop2: \"newProp2\",\n  prop3: \"newProp3\"\n});\n```\n\n### JSCodeshift Formatting Artifacts\n\n**⚠️ Problem:** jscodeshift adds unnecessary parentheses around JSX elements in files that don't even use the target component.\n\n**Example Artifacts:**\n```jsx\n// Before codemod\n<div className=\"wrapper\">\n\n// After codemod (WRONG!)\n(<div className=\"wrapper\">\n```\n\n**🔧 Prevention:**\n1. **Target specific files** instead of entire directories\n2. **Use `--dry` run first** to verify only expected files change\n3. **Review all diffs carefully** before committing\n4. **Create cleanup commits** if formatting issues slip through\n\n**🔧 Cleanup Pattern:**\n```typescript\n// Find files with formatting artifacts\ngit diff HEAD~1 HEAD --name-only | grep -v \"target-component\"\n\n// Manual cleanup needed for unintended changes\n```\n\n### Documentation Reversion Issues\n\n**⚠️ Problem:** Linters, formatters, or branch switches can revert documentation changes.\n\n**🔧 Prevention:**\n- **Commit documentation separately** from code changes\n- **Verify documentation persists** after all code changes\n- **Check git status** before final PR creation\n- **Re-add documentation** if reverted by automation\n\n### Component Package Dependencies\n\n**⚠️ Problem:** Components in different packages need different import handling.\n\n```typescript\n// Icon is in @vibe/icon but also re-exported from @vibe/core\n// Both need to be handled correctly\n```\n\n**🔧 Solution:**\n- Check component package structure first\n- Handle both direct imports and re-exports\n- Test codemod on actual usage patterns\n\n### Build System Validation\n\n**⚠️ Problem:** Not all components build even before changes, causing false positives.\n\n**🔧 Approach:**\n- **Test individual packages** first (`yarn workspace @vibe/icon build`)\n- **Focus on changed packages** rather than full monorepo build\n- **Separate build issues** from breaking change issues\n\n### Cross-Package Component Updates\n\n**⚠️ Problem:** Breaking changes often affect components across multiple packages, not just the main @vibe/core package.\n\n**Real Example - Icon Migration:**\nIcon component is in `@vibe/icon` but used throughout:\n- `packages/components/tooltip/` - standalone package using Icon\n- `packages/core/src/components/` - 25+ core components using Icon\n- `packages/components/icon-button/` - IconButton using Icon internally\n- `packages/mcp/` - documentation and examples\n\n**🔧 Comprehensive Search Strategy:**\n\n```bash\n# 1. Find ALL files with old prop usage across entire monorepo\ngrep -r \"iconType\\|iconSize\\|iconLabel\" packages/ --include=\"*.tsx\" --include=\"*.ts\" --include=\"*.jsx\" --include=\"*.js\"\n\n# 2. Identify usage by package type\nfind packages/components -name \"*.tsx\" -o -name \"*.ts\" | xargs grep -l \"iconType=\"\nfind packages/core/src -name \"*.tsx\" -o -name \"*.ts\" | xargs grep -l \"iconSize=\"\n\n# 3. Check supporting files (docs, examples, tests)\ngrep -r \"iconLabel=\" packages/mcp packages/docs\n```\n\n**🔧 Update Strategy:**\n1. **Component Package First** - Update the source component and its internal hooks\n2. **Core Package Components** - Systematically update all core components (20-30 files typical)\n3. **Standalone Packages** - Update components that depend on the changed component\n4. **Supporting Files** - Update documentation, examples, and MCP tools\n5. **Build Verification** - Test each package individually before full build\n\n### TypeScript Build Errors in Related Components\n\n**⚠️ Problem:** Breaking changes can reveal existing TypeScript errors in related components.\n\n**Real Example - IconButton Props:**\n```typescript\n// DatePickerHeader was using deprecated Button static properties\n<IconButton\n  kind={Button.kinds.TERTIARY}  // ❌ Error: Property 'kind' does not exist\n  size={Button.sizes.SMALL}     // ❌ Error: Property 'size' does not exist\n/>\n\n// Fixed to use string literals\n<IconButton\n  kind=\"tertiary\"     // ✅ Correct\n  size=\"small\"        // ✅ Correct\n/>\n```\n\n**🔧 Resolution Approach:**\n1. **Isolate the error** - determine if it's related to your breaking change or pre-existing\n2. **Check component API** - verify correct prop values for the component\n3. **Use string literals** instead of deprecated static enum properties\n4. **Test build** after each fix to catch additional issues\n\n### Documentation and Example Updates\n\n**⚠️ Problem:** Code examples in documentation and MCP tools need updating with new API.\n\n**🔧 Required Updates:**\n- **MCP Documentation** - Update usage examples with new props\n- **Component Stories** - Storybook examples using the component\n- **README files** - Any inline code examples\n- **Test files** - Update snapshot tests and component tests\n\n## Quality Gates\n\n**⚠️ These are hard gates, not suggestions. Do NOT proceed past a gate until every item passes.**\n\n**Before committing (all must pass with exit code 0):**\n- [ ] `yarn lint` — zero errors\n- [ ] `yarn build` — zero errors\n- [ ] `yarn test` — zero failures\n- [ ] Migration guide entry complete\n\n**Before creating PR:**\n- [ ] All of the above still pass after final commit\n- [ ] Codemod tested (if applicable)\n- [ ] Documentation updated\n\n## Integration Points\n\n- **Package Dependencies:** Update `package.json` files as needed\n- **TypeScript:** Ensure type consistency across packages\n- **Build System:** Verify Rollup configurations handle changes\n- **Storybook:** Update stories to reflect new API\n- **Documentation:** Sync with component documentation site\n\n"
  },
  {
    "path": ".claude/skills/vibe-breaking-change/references/codemod-best-practices.md",
    "content": "# Codemod Best Practices for Vibe Breaking Changes\n\n## Lessons Learned from Real Implementation\n\nThis guide covers critical lessons learned from implementing the Icon component prop renames codemod, including major pitfalls to avoid.\n\n## ❌ Common Mistakes to Avoid\n\n### 1. Using Non-Existent Functions\n\n**WRONG:**\n```typescript\nimport { renameProp } from \"../../../src/utils\"; // ❌ Doesn't exist\n\nelements.forEach(elementPath => {\n  if (isPropExists(j, elementPath, \"oldProp\")) {\n    renameProp(j, elementPath, \"oldProp\", \"newProp\"); // ❌ Function doesn't exist\n  }\n});\n```\n\n**CORRECT:**\n```typescript\nimport { migratePropsNames } from \"../../../src/utils\"; // ✅ Real function\n\nelements.forEach(elementPath => {\n  migratePropsNames(j, elementPath, filePath, componentName, {\n    oldProp: \"newProp\",\n    anotherOld: \"anotherNew\"\n  }); // ✅ Handles all props in one efficient call\n});\n```\n\n### 2. Wrong Import Path Detection\n\n**WRONG:**\n```typescript\n// This only finds \"monday-ui-react-core\" imports, not \"@vibe/core\"\nconst imports = getCoreImportsForFile(root);\n```\n\n**CORRECT:**\n```typescript\nimport { NEW_CORE_IMPORT_PATH } from \"../../../src/consts\";\n\n// This finds \"@vibe/core\" imports correctly\nconst imports = getImports(root, NEW_CORE_IMPORT_PATH);\n```\n\n### 3. Inefficient Multiple Loops\n\n**WRONG:**\n```typescript\nelements.forEach(elementPath => {\n  // Separate check for each prop - inefficient!\n  if (isPropExists(j, elementPath, \"iconLabel\")) {\n    renameProp(j, elementPath, \"iconLabel\", \"label\");\n  }\n  if (isPropExists(j, elementPath, \"iconType\")) {\n    renameProp(j, elementPath, \"iconType\", \"type\");\n  }\n  if (isPropExists(j, elementPath, \"iconSize\")) {\n    renameProp(j, elementPath, \"iconSize\", \"size\");\n  }\n});\n```\n\n**CORRECT:**\n```typescript\nelements.forEach(elementPath => {\n  // Single call handles all prop renames efficiently\n  migratePropsNames(j, elementPath, filePath, componentName, {\n    iconLabel: \"label\",\n    iconType: \"type\",\n    iconSize: \"size\"\n  });\n});\n```\n\n## 🔧 Proven Codemod Pattern\n\nBased on successful v2-v3 codemods, use this proven pattern:\n\n```typescript\nimport {\n  wrap,\n  getImports,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { NEW_CORE_IMPORT_PATH } from \"../../../src/consts\";\nimport { TransformationContext } from \"../../../types\";\n\nfunction transform({ j, root, filePath }: TransformationContext) {\n  // 1. Find imports from correct package\n  const imports = getImports(root, NEW_CORE_IMPORT_PATH);\n\n  // 2. Check if component is imported\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"ComponentName\");\n  if (!componentName) return;\n\n  // 3. Find all component elements\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  // 4. Migrate props efficiently\n  elements.forEach(elementPath => {\n    migratePropsNames(j, elementPath, filePath, componentName, {\n      oldProp1: \"newProp1\",\n      oldProp2: \"newProp2\",\n      oldProp3: \"newProp3\"\n    });\n  });\n}\n\nexport default wrap(transform);\n```\n\n## ⚠️ JSCodeshift Formatting Artifacts\n\n### The Problem\n\nJSCodeshift can add unnecessary parentheses around JSX elements, even in files that **don't use the target component**.\n\n**Example:**\n```jsx\n// Original code\n<div className=\"wrapper\">\n  <span>Content</span>\n</div>\n\n// After codemod (WRONG!)\n(<div className=\"wrapper\">\n  <span>Content</span>\n</div>)\n```\n\n### Root Cause\n\nJSCodeshift parses and rebuilds the AST, which can introduce formatting changes even when no transforms are applied.\n\n### Prevention Strategies\n\n#### 1. Target Specific Files\n```bash\n# WRONG - transforms entire directory\nnpx jscodeshift -t transform.js packages/core/src/components/\n\n# BETTER - target specific files known to use the component\nnpx jscodeshift -t transform.js packages/core/src/components/Button/Button.tsx packages/core/src/components/IconButton/IconButton.tsx\n```\n\n#### 2. Use Dry Run First\n```bash\n# Always run dry first to see what changes\nnpx jscodeshift -t transform.js packages/ --dry\n\n# Review the output carefully\n# Only proceed if changes look correct\nnpx jscodeshift -t transform.js packages/\n```\n\n#### 3. Filter by Import Detection\n```typescript\nfunction transform({ j, root, filePath }: TransformationContext) {\n  // Only proceed if file actually imports the component\n  const imports = getImports(root, NEW_CORE_IMPORT_PATH);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"ComponentName\");\n  if (!componentName) return; // ✅ Exit early, no changes\n\n  // ... rest of transform\n}\n```\n\n### Cleanup Process\n\nIf formatting artifacts slip through:\n\n```bash\n# 1. Identify files with unintended changes\ngit diff HEAD~1 HEAD --name-only | grep -E \"(Checkbox|AvatarGroup|Dropdown)\"\n\n# 2. Review each file\ngit diff HEAD~1 HEAD -- path/to/file.tsx\n\n# 3. Manual cleanup\n# Remove extra parentheses: (<div> → <div>\n# Fix indentation as needed\n\n# 4. Commit cleanup\ngit add .\ngit commit -m \"fix: remove codemod formatting artifacts\"\n```\n\n## 🧪 Testing Best Practices\n\n### Test Development\n```typescript\n// Cover edge cases in tests\ndefineInlineTest(\n  transform,\n  {},\n  prependImport('const element = <Icon icon={Home} iconLabel=\"Home\" iconType=\"svg\" iconSize={24} />;'),\n  prependImport('const element = <Icon icon={Home} label=\"Home\" type=\"svg\" size={24} />;'),\n  \"should rename all three props\"\n);\n\n// Test aliased imports\ndefineInlineTest(\n  transform,\n  {},\n  `import { Icon as VibeIcon } from \"@vibe/core\";\n   const element = <VibeIcon icon={Home} iconLabel=\"Home\" />;`,\n  `import { Icon as VibeIcon } from \"@vibe/core\";\n   const element = <VibeIcon icon={Home} label=\"Home\" />;`,\n  \"should work with aliased imports\"\n);\n```\n\n### Expected Results\n- **7-8 out of 8 tests pass** - indicates working codemod\n- **1 formatting test failure** - expected jscodeshift artifact (acceptable)\n- **0 tests pass** - indicates broken codemod logic\n\n## 📝 Documentation Integration\n\n### Migration Guide Entry\n```markdown\n## ComponentName API Changes\n\n### Breaking Changes\n**Props Renamed:**\n- `oldProp` → `newProp`\n- `anotherOld` → `anotherNew`\n\n### Automated Migration\n```bash\nnpx @vibe/codemod component-name-props-update src/\n```\n\n### Manual Migration\n[Include before/after examples]\n```\n\n### Changelog Entry\n```markdown\n#### ComponentName v2.0.0\n- **BREAKING**: Renamed props for better consistency\n- **Migration**: Use `npx @vibe/codemod component-name-props-update`\n- **Task**: Monday.com #[task-id]\n```\n\n## 🚀 Success Criteria\n\nA successful codemod implementation should:\n\n1. **✅ Follow established patterns** from v2-v3 codemods\n2. **✅ Use correct utility functions** (migratePropsNames, getImports)\n3. **✅ Handle import paths correctly** (NEW_CORE_IMPORT_PATH)\n4. **✅ Be efficient** (single loop, batch prop updates)\n5. **✅ Have comprehensive tests** (7+ passing test cases)\n6. **✅ Minimize formatting artifacts** (targeted file updates)\n7. **✅ Include cleanup process** (for any artifacts that slip through)\n\n## 🔄 Iteration Process\n\n1. **RED**: Write failing tests first\n2. **GREEN**: Implement minimal working codemod\n3. **REFACTOR**: Fix issues, improve efficiency\n4. **CLEANUP**: Remove formatting artifacts\n5. **DOCUMENT**: Update migration guide and changelog\n6. **VALIDATE**: Test on real codebase examples"
  },
  {
    "path": ".claude/skills/vibe-breaking-change/references/codemod-examples.md",
    "content": "# Codemod Examples for Vibe Breaking Changes\n\n## Simple Prop Rename\n\n```typescript\n// Transform: oldProp → newProp\nimport type { Transform } from 'jscodeshift';\n\nconst transform: Transform = (file, api) => {\n  const j = api.jscodeshift;\n  const root = j(file.source);\n\n  // Transform JSX prop usage\n  root\n    .find(j.JSXElement)\n    .filter(path => {\n      const name = path.value.openingElement?.name;\n      return name && name.type === 'JSXIdentifier' && name.name === 'ComponentName';\n    })\n    .forEach(path => {\n      const attributes = path.value.openingElement?.attributes || [];\n      attributes.forEach(attr => {\n        if (\n          attr.type === 'JSXAttribute' &&\n          attr.name?.type === 'JSXIdentifier' &&\n          attr.name.name === 'oldProp'\n        ) {\n          attr.name.name = 'newProp';\n        }\n      });\n    });\n\n  return root.toSource();\n};\n\nexport default transform;\n```\n\n## Enum to String Union Migration\n\n```typescript\n// Transform: ComponentName.SIZE.LARGE → \"large\"\nimport type { Transform } from 'jscodeshift';\n\nconst transform: Transform = (file, api) => {\n  const j = api.jscodeshift;\n  const root = j(file.source);\n\n  // Replace enum member access with string literal\n  root\n    .find(j.MemberExpression, {\n      object: {\n        type: 'MemberExpression',\n        object: { name: 'ComponentName' },\n        property: { name: 'SIZE' }\n      }\n    })\n    .forEach(path => {\n      const property = path.value.property;\n      if (property.type === 'Identifier') {\n        const stringValue = property.name.toLowerCase();\n        j(path).replaceWith(j.literal(stringValue));\n      }\n    });\n\n  return root.toSource();\n};\n\nexport default transform;\n```\n\n## Complex Import Path Update\n\n```typescript\n// Transform: from old package to new package structure\nimport type { Transform } from 'jscodeshift';\n\nconst transform: Transform = (file, api) => {\n  const j = api.jscodeshift;\n  const root = j(file.source);\n\n  // Update import declarations\n  root\n    .find(j.ImportDeclaration)\n    .filter(path => {\n      return path.value.source.value?.includes('@vibe/core/components/ComponentName');\n    })\n    .forEach(path => {\n      if (path.value.source.type === 'Literal') {\n        path.value.source.value = '@vibe/component-name';\n      }\n    });\n\n  return root.toSource();\n};\n\nexport default transform;\n```\n\n## Testing Codemod Changes\n\n```bash\n# Test codemod on specific file\nnpx jscodeshift -t packages/codemod/src/transforms/component-prop-rename.ts packages/core/src/components/Button/__tests__/Button.test.tsx --dry\n\n# Test on directory\nnpx jscodeshift -t packages/codemod/src/transforms/component-prop-rename.ts packages/core/src/components/ --dry\n\n# Apply transformation\nnpx jscodeshift -t packages/codemod/src/transforms/component-prop-rename.ts packages/core/src/components/\n\n# Add to codemod CLI\n# Edit packages/codemod/src/index.ts to include new transform\n```\n\n## Codemod Integration Checklist\n\n- [ ] Transform handles JSX usage\n- [ ] Transform handles TypeScript interfaces\n- [ ] Transform handles prop destructuring\n- [ ] Transform handles spread props appropriately\n- [ ] Test cases cover edge cases\n- [ ] Dry run shows expected changes\n- [ ] Added to codemod CLI interface\n- [ ] Documentation includes usage example"
  },
  {
    "path": ".claude/skills/vibe-breaking-change/references/dependency-analysis.md",
    "content": "# Dependency Analysis for Breaking Changes\n\n## Component Dependency Mapping\n\n### Finding Direct Dependencies\n\n```bash\n# Find components importing the target component\ngrep -r \"import.*ComponentName\" packages/core/src/components/\ngrep -r \"import.*ComponentName\" packages/components/\n\n# Find usage in TypeScript files\ngrep -r \"ComponentName\" packages/*/src/**/*.tsx\ngrep -r \"ComponentName\" packages/*/src/**/*.ts\n\n# Find usage in test files\ngrep -r \"ComponentName\" packages/*/src/**/__tests__/*.tsx\ngrep -r \"ComponentName\" packages/*/src/**/__stories__/*.tsx\n```\n\n### Finding Indirect Dependencies\n\n```bash\n# Check for components that extend or compose target component\ngrep -r \"extends.*ComponentNameProps\" packages/\ngrep -r \"ComponentName.*Props\" packages/\n\n# Find re-exports\ngrep -r \"export.*ComponentName\" packages/*/src/index.ts\ngrep -r \"export.*from.*ComponentName\" packages/\n```\n\n### Analyzing Package Dependencies\n\n```bash\n# Check package.json dependencies\nfind packages/ -name \"package.json\" -exec grep -l \"@vibe/component-name\\|ComponentName\" {} \\;\n\n# Check workspace dependencies\nyarn workspace @vibe/core info\nyarn workspaces info\n```\n\n## Impact Assessment Matrix\n\n| Component | Import Type | Usage Pattern | Breaking Impact | Update Required |\n|-----------|-------------|---------------|-----------------|-----------------|\n| ButtonGroup | Direct | Props passed through | High | Yes - API change |\n| Dialog | Indirect | Used in composition | Medium | Yes - prop update |\n| Form | Test only | Test utilities | Low | Maybe - test update |\n\n## Component Relationship Types\n\n### Direct Usage\n- Component imports and uses target component\n- Props passed directly to target component\n- **Impact:** High - requires immediate update\n\n### Composed Usage\n- Component wraps or extends target component\n- May add additional props or behavior\n- **Impact:** Medium - requires careful testing\n\n### Re-export Usage\n- Package re-exports target component\n- May not use component directly\n- **Impact:** Low - update exports only\n\n### Test/Story Usage\n- Only used in test files or Storybook\n- No runtime impact on users\n- **Impact:** Minimal - update tests/stories\n\n## Dependency Update Strategy\n\n### Phase 1: Core Component Update\n1. Update target component with breaking change\n2. Update component types and interfaces\n3. Ensure component builds and basic tests pass\n\n### Phase 2: Direct Dependencies\n1. Update components with direct imports\n2. Update prop passing and usage patterns\n3. Fix compilation errors\n\n### Phase 3: Indirect Dependencies\n1. Update composed components\n2. Update complex usage patterns\n3. Verify behavioral consistency\n\n### Phase 4: Package Dependencies\n1. Update package.json versions if needed\n2. Update workspace dependencies\n3. Verify cross-package compatibility\n\n## Validation Commands\n\n```bash\n# Check TypeScript compilation across all packages\nlerna run type-check\n\n# Check for remaining references to old API\ngrep -r \"oldProp\" packages/ --include=\"*.ts\" --include=\"*.tsx\"\n\n# Verify no broken imports\nyarn workspace @vibe/core build\nlerna run build\n\n# Check for usage in Storybook\ngrep -r \"oldProp\" packages/**/__stories__/\n```\n\n## Common Dependency Patterns\n\n### Button Dependencies\n- ButtonGroup, IconButton, SplitButton\n- Form components (FieldButton, FormButton)\n- Dialog components (DialogButton)\n\n### Icon Dependencies\n- All components using icons\n- IconButton, Button with icons\n- Menu items, navigation components\n\n### Layout Dependencies\n- Grid system components\n- Container components\n- Responsive utilities\n\n### Hook Dependencies\n- Components using shared hooks\n- Custom hook implementations\n- Test utilities using hooks\n\n## Risk Mitigation\n\n### High-Risk Changes\n- Core utility changes (hooks, constants)\n- Base component changes (Button, Icon)\n- Type system changes (VibeComponentProps)\n\n### Medium-Risk Changes\n- Layout component changes\n- Form component changes\n- Complex composite components\n\n### Low-Risk Changes\n- Leaf components (no dependencies)\n- Style-only changes\n- Test utility changes"
  },
  {
    "path": ".claude/skills/vibe-breaking-change/references/pr-templates.md",
    "content": "# PR and Documentation Templates\n\n## PR Template for Breaking Changes\n\n### PR Title Format\n\nFollow [Conventional Commits](https://www.conventionalcommits.org/). Use the appropriate type (`feat`, `fix`, `refactor`, etc.):\n\n```\n<type>(<scope>): brief description\n\nExamples:\nfeat(Button): remove deprecated size prop\nrefactor(Dialog): update API for better accessibility\nfix(Form): replace onSubmit with onFormSubmit\n```\n\n### PR Description Template\n\n```markdown\n## Summary\n• Brief description of the breaking change\n• Why this change was necessary\n• Impact on existing users\n\n## Breaking Changes\n**[ComponentName] API Changes:**\n- ❌ Removed: `oldProp` prop\n- ✅ Added: `newProp` prop with enhanced functionality\n- 🔄 Changed: `existingProp` now requires different value format\n\n## Migration Path\n\n### Automated Migration (Codemod Available)\n```bash\nnpx @vibe/codemod component-name-api-update\n```\n\n### Manual Migration\n**Before:**\n```jsx\n<ComponentName\n  oldProp=\"value\"\n  existingProp={oldFormat}\n/>\n```\n\n**After:**\n```jsx\n<ComponentName\n  newProp=\"value\"\n  existingProp={newFormat}\n/>\n```\n\n## Task Link\n[Monday.com Task](https://monday.monday.com/boards/<BOARD_ID>/pulses/<PULSE_ID>)\n\n## Testing\n- [ ] All component tests pass\n- [ ] Integration tests updated and passing\n- [ ] Dependent components tested\n- [ ] Storybook stories render correctly\n- [ ] Codemod tested on real codebase examples\n- [ ] Performance impact assessed\n\n## Documentation\n- [ ] Migration guide updated\n- [ ] API documentation updated\n- [ ] Changelog entry added\n- [ ] Codemod documentation added\n\n## Validation\n- [ ] Full monorepo build passes\n- [ ] All linting checks pass\n- [ ] TypeScript compilation successful\n- [ ] No broken imports or exports\n- [ ] Manual testing completed\n\n## Reviewer Notes\n- Focus on [specific areas of concern]\n- Pay attention to [migration complexity/edge cases]\n- Verify [specific functionality still works]\n\n---\n🤖 Generated with [Claude Code](https://claude.com/claude-code)\n```\n\n## Commit Message Template\n\nFollow [Conventional Commits](https://www.conventionalcommits.org/). Use the appropriate type (`feat`, `fix`, `refactor`, etc.):\n\n```\n<type>(<scope>): brief description\n\nDetailed explanation of what changed and why.\nInclude context about the problem being solved.\n\nBREAKING CHANGE: Specific description of what breaks.\nExplain the old behavior vs new behavior.\n\nMigration:\n- Old usage: ComponentName.oldProp\n- New usage: ComponentName.newProp\n- Codemod: npx @vibe/codemod component-migration\n\nAffects:\n- ComponentName API\n- Dependent components: ButtonGroup, Dialog\n- Documentation: Migration guide updated\n\nCo-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>\n```\n\n## Migration Guide Entry Template\n\n```markdown\n## [ComponentName] API Changes\n\n### Overview\nBrief explanation of what changed and why the breaking change was necessary.\n\n### Breaking Changes\n\n#### Removed `oldProp` prop\n- **Impact**: High - affects all usage\n- **Reason**: Simplifies API and improves performance\n- **Migration**: Replace with `newProp`\n\n#### Changed `existingProp` format\n- **Impact**: Medium - affects complex usage\n- **Reason**: Better type safety and validation\n- **Migration**: Convert values using utility function\n\n### Before and After\n\n#### Basic Usage\n```jsx\n// Before\n<ComponentName\n  oldProp=\"value\"\n  existingProp={complexOldFormat}\n  size=\"large\"\n/>\n\n// After\n<ComponentName\n  newProp=\"value\"\n  existingProp={simpleNewFormat}\n  size=\"large\"\n/>\n```\n\n#### Advanced Usage\n```jsx\n// Before\n<ComponentName\n  oldProp={dynamicValue}\n  onOldEvent={(data) => handleOldWay(data)}\n/>\n\n// After\n<ComponentName\n  newProp={transformValue(dynamicValue)}\n  onNewEvent={(data) => handleNewWay(data)}\n/>\n```\n\n### Migration Strategies\n\n#### Automated Migration\nUse the provided codemod for straightforward cases:\n```bash\nnpx @vibe/codemod componentname-api-update src/\n```\n\nThe codemod handles:\n- Simple prop renames\n- Basic value transformations\n- Import statement updates\n\n#### Manual Migration\nFor complex cases requiring human judgment:\n\n1. **Dynamic prop values**: Review logic and update calculations\n2. **Event handlers**: Update to match new event signature\n3. **Conditional usage**: Verify new API handles all conditions\n4. **Tests**: Update test assertions and mocks\n\n#### Gradual Migration\nFor large codebases, consider a phased approach:\n\n1. **Phase 1**: Update critical components first\n2. **Phase 2**: Update high-traffic components\n3. **Phase 3**: Update remaining components\n4. **Phase 4**: Remove any compatibility shims\n\n### Common Issues\n\n#### TypeScript Errors\n```typescript\n// Error: Property 'oldProp' does not exist\n<ComponentName oldProp=\"value\" />\n\n// Solution: Use new prop name\n<ComponentName newProp=\"value\" />\n```\n\n#### Runtime Errors\n```javascript\n// Error: onOldEvent is not a function\nprops.onOldEvent?.(data);\n\n// Solution: Use new event name\nprops.onNewEvent?.(data);\n```\n\n### Validation\nAfter migration, verify:\n- [ ] No TypeScript compilation errors\n- [ ] Component renders as expected\n- [ ] Event handlers work correctly\n- [ ] Tests pass\n- [ ] No console warnings\n```\n\n## Changelog Entry Template\n\n```markdown\n### BREAKING CHANGES\n\n#### ComponentName v2.0.0\n- **BREAKING**: Removed `oldProp` in favor of `newProp` for better API consistency\n- **BREAKING**: Changed `existingProp` format from object to string for improved performance\n- **Migration**: Use `npx @vibe/codemod componentname-api-update` for automated migration\n- **Affects**: All ComponentName usage, ButtonGroup, Dialog components\n\n##### Migration Example\n```jsx\n// Before\n<ComponentName oldProp=\"value\" existingProp={{key: \"value\"}} />\n\n// After\n<ComponentName newProp=\"value\" existingProp=\"value\" />\n```\n\nSee [Migration Guide](./VIBE4_MIGRATION_GUIDE.md#componentname-api-changes) for detailed instructions.\n```\n\n## Code Review Checklist Template\n\n```markdown\n## Breaking Change Review Checklist\n\n### API Design\n- [ ] Breaking change is necessary and well-justified\n- [ ] New API is more intuitive than old API\n- [ ] API follows Vibe design system conventions\n- [ ] TypeScript types are accurate and helpful\n\n### Implementation\n- [ ] Target component updated correctly\n- [ ] All dependent components updated\n- [ ] No lingering references to old API\n- [ ] Error handling updated appropriately\n\n### Testing\n- [ ] Component tests updated and comprehensive\n- [ ] Integration tests cover dependent components\n- [ ] Edge cases tested\n- [ ] Performance impact assessed\n\n### Documentation\n- [ ] Migration guide entry is clear and complete\n- [ ] Code examples work correctly\n- [ ] Codemod documented and tested\n- [ ] Breaking change clearly flagged\n\n### Developer Experience\n- [ ] TypeScript errors are helpful\n- [ ] Runtime errors (if any) are clear\n- [ ] Migration path is straightforward\n- [ ] Documentation is discoverable\n\n### Build System\n- [ ] All packages build successfully\n- [ ] No circular dependencies introduced\n- [ ] Import/export structure clean\n- [ ] Version bumps appropriate\n```"
  },
  {
    "path": ".claude/skills/vibe-breaking-change/references/testing-validation.md",
    "content": "# Testing and Validation for Breaking Changes\n\n## Testing Strategy\n\n### 1. Unit Tests\nTest individual component behavior with new API\n\n```typescript\n// Before: Test with old API\nit('should handle oldProp correctly', () => {\n  render(<ComponentName oldProp=\"value\" />);\n  expect(screen.getByRole('button')).toHaveAttribute('data-old', 'value');\n});\n\n// After: Test with new API\nit('should handle newProp correctly', () => {\n  render(<ComponentName newProp=\"value\" />);\n  expect(screen.getByRole('button')).toHaveAttribute('data-new', 'value');\n});\n\n// Migration test: Ensure old API no longer works\nit('should not accept oldProp', () => {\n  // TypeScript should prevent this at compile time\n  // @ts-expect-error - oldProp no longer exists\n  render(<ComponentName oldProp=\"value\" />);\n});\n```\n\n### 2. Integration Tests\nTest dependent components work with changes\n\n```typescript\n// Test component that uses the changed component\nit('should work with updated ComponentName API', () => {\n  render(\n    <ParentComponent>\n      <ComponentName newProp=\"value\" />\n    </ParentComponent>\n  );\n\n  // Verify integration works\n  expect(screen.getByTestId('parent-wrapper')).toBeInTheDocument();\n  expect(screen.getByRole('button')).toHaveAttribute('data-new', 'value');\n});\n```\n\n### 3. Snapshot Testing\nUpdate snapshots for visual regression testing\n\n```bash\n# Update component snapshots\nyarn workspace @vibe/core test -- ComponentName --updateSnapshot\n\n# Update all affected snapshots\nyarn workspace @vibe/core test -- --updateSnapshot\n\n# Check snapshot diffs are intentional\ngit diff packages/core/src/components/ComponentName/__tests__/__snapshots__/\n```\n\n## Validation Checklist\n\n### Pre-Implementation Validation\n- [ ] Impact analysis complete\n- [ ] Dependent components identified\n- [ ] Migration strategy defined\n- [ ] Breaking change justified and approved\n\n### Implementation Validation\n- [ ] Target component updated correctly\n- [ ] TypeScript compilation passes\n- [ ] Component tests updated and passing\n- [ ] No console errors in development\n\n### Dependency Validation\n- [ ] All dependent components updated\n- [ ] Integration tests passing\n- [ ] No broken imports or exports\n- [ ] Cross-package dependencies resolved\n\n### Build Validation\n```bash\n# Full monorepo build\nlerna run build\n\n# Individual package builds\nyarn workspace @vibe/core build\nyarn workspace @vibe/components build\n\n# TypeScript validation\nlerna run type-check\n\n# Lint validation\nlerna run lint\n```\n\n### Runtime Validation\n```bash\n# Storybook validation\nyarn storybook\n# Manually verify affected stories render correctly\n\n# Test app validation (if available)\nyarn start\n# Test breaking changes in demo application\n```\n\n### Documentation Validation\n- [ ] Migration guide updated with clear examples\n- [ ] Breaking change documented with before/after\n- [ ] Codemod usage documented (if applicable)\n- [ ] API documentation updated\n\n## Test Update Patterns\n\n### Props Interface Changes\n```typescript\n// Old interface\ninterface OldComponentProps {\n  oldProp?: string;\n  size?: 'small' | 'medium' | 'large';\n}\n\n// New interface\ninterface NewComponentProps {\n  newProp?: string;\n  size?: ComponentSize; // enum to string union\n}\n\n// Test updates needed:\n// 1. Update prop names in test cases\n// 2. Update enum values to string literals\n// 3. Add tests for new API behavior\n// 4. Remove tests for deprecated functionality\n```\n\n### Behavior Changes\n```typescript\n// Test behavioral changes\ndescribe('ComponentName behavior changes', () => {\n  it('should trigger callback on new event', () => {\n    const mockCallback = jest.fn();\n    render(<ComponentName onNewEvent={mockCallback} />);\n\n    // Trigger new behavior\n    fireEvent.click(screen.getByRole('button'));\n    expect(mockCallback).toHaveBeenCalledWith(/* new signature */);\n  });\n\n  it('should not trigger old callback', () => {\n    // Ensure old behavior is removed\n    const mockOldCallback = jest.fn();\n    // @ts-expect-error - old callback should not exist\n    render(<ComponentName onOldEvent={mockOldCallback} />);\n  });\n});\n```\n\n## Common Testing Pitfalls\n\n### 1. Incomplete Test Updates\n- **Problem:** Tests still use old API but pass due to lenient typing\n- **Solution:** Enable strict TypeScript checking in tests\n- **Validation:** `yarn workspace @vibe/core test --typecheck`\n\n### 2. Missing Integration Tests\n- **Problem:** Individual components work but integration breaks\n- **Solution:** Test component composition scenarios\n- **Validation:** Create test cases for typical usage patterns\n\n### 3. Snapshot Pollution\n- **Problem:** Snapshots updated but changes not reviewed\n- **Solution:** Review snapshot diffs before committing\n- **Validation:** `git diff --no-index old-snapshot new-snapshot`\n\n### 4. Performance Regressions\n- **Problem:** New API performs worse than old API\n- **Solution:** Add performance benchmarks for critical components\n- **Validation:** Use React DevTools Profiler\n\n## Automated Validation Scripts\n\n### Pre-commit Validation\n```bash\n#!/bin/bash\n# scripts/validate-breaking-change.sh\n\necho \"🔍 Validating breaking change implementation...\"\n\n# 1. Check TypeScript compilation\necho \"Checking TypeScript...\"\nlerna run type-check || exit 1\n\n# 2. Run tests\necho \"Running tests...\"\nlerna run test || exit 1\n\n# 3. Check for old API usage\necho \"Checking for old API usage...\"\nif grep -r \"oldProp\" packages/ --include=\"*.ts\" --include=\"*.tsx\"; then\n  echo \"❌ Found old API usage\"\n  exit 1\nfi\n\n# 4. Build validation\necho \"Validating build...\"\nlerna run build || exit 1\n\necho \"✅ Breaking change validation passed\"\n```\n\n"
  },
  {
    "path": ".claude/skills/vibe-breaking-change/references/workflow-checklist.md",
    "content": "# Complete Breaking Change Workflow Checklist\n\n## Pre-Implementation Phase\n\n### Planning and Analysis\n- [ ] Breaking change request approved by team\n- [ ] Impact analysis completed\n- [ ] Alternative solutions considered and ruled out\n- [ ] Migration strategy defined\n- [ ] Timeline established\n\n### Dependency Mapping\n- [ ] Direct dependencies identified\n- [ ] Indirect dependencies mapped\n- [ ] Cross-package impacts assessed\n- [ ] Test dependencies catalogued\n- [ ] Documentation dependencies noted\n\n## Implementation Phase\n\n### Code Changes\n- [ ] Target component updated with breaking change\n- [ ] TypeScript interfaces updated\n- [ ] Component logic implements new API\n- [ ] Old API removed or deprecated appropriately\n- [ ] Component constants updated\n\n### Dependent Components\n- [ ] Direct dependents updated\n- [ ] Prop passing updated\n- [ ] Event handling updated\n- [ ] Composition patterns maintained\n- [ ] Integration points verified\n\n### Type System\n- [ ] Component props interfaces updated\n- [ ] Export types updated\n- [ ] Enum to string union conversions (if applicable)\n- [ ] Generic constraints updated\n- [ ] Utility type helpers updated\n\n## Testing Phase\n\n### Unit Testing\n- [ ] Component tests updated for new API\n- [ ] Old API tests removed\n- [ ] Edge cases covered\n- [ ] Error conditions tested\n- [ ] Accessibility tests updated\n\n### Integration Testing\n- [ ] Dependent component tests updated\n- [ ] Cross-package integration tested\n- [ ] Composition scenarios tested\n- [ ] Event flow tested\n- [ ] State management tested\n\n### Build and Compilation\n- [ ] TypeScript compilation passes\n- [ ] All packages build successfully\n- [ ] No circular dependencies\n- [ ] Import/export consistency verified\n- [ ] Bundle size impact assessed\n\n### Quality Assurance\n- [ ] Linting passes\n- [ ] Style linting passes\n- [ ] Prettier formatting applied\n- [ ] No console errors/warnings\n- [ ] Performance benchmarks within acceptable range\n\n## Documentation Phase\n\n### Migration Guide\n- [ ] Clear before/after examples\n- [ ] Migration strategies documented\n- [ ] Common issues addressed\n- [ ] Validation steps provided\n- [ ] Timeline for migration suggested\n\n### API Documentation\n- [ ] Component API docs updated\n- [ ] Props documentation current\n- [ ] Examples reflect new API\n- [ ] TypeScript signatures accurate\n- [ ] Deprecation notices removed\n\n### Changelog\n- [ ] Breaking change clearly flagged\n- [ ] Version bump appropriate\n- [ ] Impact description clear\n- [ ] Migration instructions included\n- [ ] Related issues referenced\n\n## Codemod Phase (If Applicable)\n\n### Codemod Development\n- [ ] Transform logic implements correctly\n- [ ] Edge cases handled\n- [ ] TypeScript compatibility maintained\n- [ ] JSX patterns covered\n- [ ] Test cases comprehensive\n\n### Codemod Testing\n- [ ] Dry run on real examples\n- [ ] Before/after comparison reviewed\n- [ ] Complex scenarios tested\n- [ ] Error handling validated\n- [ ] Performance acceptable\n\n### Codemod Integration\n- [ ] Added to codemod CLI\n- [ ] Documentation written\n- [ ] Usage examples provided\n- [ ] Integration tests added\n- [ ] Release notes updated\n\n## Validation Phase\n\n### Comprehensive Testing\n- [ ] Full test suite passes\n- [ ] Storybook stories render correctly\n- [ ] Example applications work\n- [ ] Performance tests pass\n- [ ] Accessibility tests pass\n\n### Build Verification\n- [ ] All packages build\n- [ ] Linting checks pass\n- [ ] Type checking passes\n- [ ] Bundle analysis clean\n- [ ] No build warnings\n\n### Manual Testing\n- [ ] Component behavior verified in browser\n- [ ] Responsive behavior tested\n- [ ] Keyboard navigation tested\n- [ ] Screen reader compatibility verified\n- [ ] Cross-browser testing completed\n\n## Release Phase\n\n### Branch and Commit\n- [ ] Feature branch created from vibe4\n- [ ] Meaningful commit messages\n- [ ] Breaking change flagged in commit\n- [ ] Co-authored appropriately\n- [ ] Commit history clean\n\n### Pull Request\n- [ ] PR title follows convention\n- [ ] Description comprehensive and clear\n- [ ] Breaking changes highlighted\n- [ ] Migration instructions included\n- [ ] Task/issue linked\n- [ ] Reviewers assigned\n\n### Code Review\n- [ ] API design reviewed\n- [ ] Implementation reviewed\n- [ ] Test coverage reviewed\n- [ ] Documentation reviewed\n- [ ] Migration path validated\n\n### CI/CD Pipeline\n- [ ] All automated tests pass\n- [ ] Build artifacts generated\n- [ ] Quality gates passed\n- [ ] Security scans clean\n- [ ] Performance benchmarks acceptable\n\n## Post-Implementation Phase\n\n### Merge and Deploy\n- [ ] PR approved and merged\n- [ ] Branch cleaned up\n- [ ] Version tagged appropriately\n- [ ] Release notes published\n- [ ] Team notified of changes\n\n### Monitoring\n- [ ] Error rates monitored\n- [ ] Performance impact tracked\n- [ ] User feedback collected\n- [ ] Migration adoption tracked\n- [ ] Support requests handled\n\n### Follow-up Actions\n- [ ] Migration deadline set and communicated\n- [ ] Deprecated API removal scheduled\n- [ ] Backward compatibility plan finalized\n- [ ] Success metrics defined\n- [ ] Lessons learned documented\n\n"
  },
  {
    "path": ".cursor/rules/accessibility-guidelines.mdc",
    "content": "---\ndescription: Provides general web accessibility guidelines for developing components in the `@vibe/core` library (under `packages/core/`). This rule covers adherence to WCAG, use of semantic HTML, correct ARIA attribute application, ensuring keyboard navigability, proper focus management, and context-appropriate labeling for form inputs within components.\nglobs: \nalwaysApply: false\n---\n\n# Web Accessibility Guidelines\n\nThis document outlines general web accessibility guidelines to ensure our components are usable by everyone, including people with disabilities. Adherence to these guidelines is crucial for creating inclusive digital experiences. This document is only relevant for the \"@vibe/core\" library, which is at \"packages/core\" directory.\n\n## 1. WCAG Compliance\n\n- **Follow WCAG:** Always strive to meet the Web Content Accessibility Guidelines (WCAG) at the AA level. Refer to the latest official WCAG documentation known to you for specific success criteria and techniques.\n\n## 2. Semantic HTML\n\n- **Use HTML Semantically:** Utilize HTML elements according to their intended purpose. For example, use `<nav>` for navigation links, `<button>` for interactive buttons, `<article>` for self-contained content, etc.\n- **Structure Content Logically:** Ensure a logical document structure using lists (`<ul>`, `<ol>`, `<dl>`), and other structural elements. This aids screen reader users in understanding the page layout and navigating content.\n\n## 3. ARIA (Accessible Rich Internet Applications)\n\n- **Use ARIA When Necessary:** Employ ARIA attributes to enhance the accessibility of custom components or dynamic content where semantic HTML alone is insufficient.\n- **Don't Abuse ARIA:** Avoid redundant or incorrect ARIA attributes. Remember the first rule of ARIA use: \"No ARIA is better than bad ARIA.\" If an HTML element inherently provides the necessary semantics (e.g., `<button>`), do not add an ARIA role like `role=\"button\"`.\n- **Valid ARIA:** Ensure all ARIA attributes and roles are used according to their specifications. Incorrect ARIA can create more barriers than it solves.\n\n## 4. Keyboard Navigation\n\n- **Ensure Keyboard Accessibility:** All interactive elements (links, buttons, form controls, custom components) **must** be operable via a keyboard.\n- **Logical Tab Order:** The tab order should be logical and intuitive, typically following the visual flow of the page.\n- **Visible Focus Indicators:** Ensure that keyboard focus is clearly visible on all focusable elements.\n- **Custom Component Navigation:** For custom components (e.g., carousels, tabs, menus), implement standard keyboard interaction patterns (e.g., arrow keys for navigating within a component, Enter/Space to activate). Use Vibe's custom hooks for navigation where applicable.\n\n## 5. Focus Management\n\n- **Manage Focus Appropriately:** For dynamic content changes, such as opening modals, pop-ups, or expanding sections, manage focus programmatically.\n  - When a modal dialog opens, focus should move to an element within the dialog.\n  - When the dialog closes, focus should return to the element that triggered its opening.\n- **Avoid Focus Traps:** Ensure that keyboard users cannot get trapped within a component or section of the page, unless it is a component like the modal component which needs to trap focus according to WCAG.\n\n## 6. Form Input Labeling (Component Library Context)\n\n- **Associate Labels with Inputs:** All form inputs (`<input>`, `<textarea>`, `<select>`) should generally have associated labels to describe their purpose.\n- **Component Flexibility:** Since these are guidelines for a component library (`@vibe/core`):\n  - **Provide Mechanisms for Labeling:** Components that act as form inputs (e.g., `TextField`, `Checkbox`, `Select`) **must** provide a clear and accessible way to associate a label. This can be achieved through:\n    - A dedicated `label` prop that renders a visible `<label>` element correctly associated with the input.\n    - Props like `aria-label` or `aria-labelledby` to allow consumers to provide accessible names if a visible label is not desired or managed externally.\n  - **Guidance for Consumers:** Component documentation should guide users on how to provide accessible names for inputs, emphasizing the importance of labels.\n  - **Internal Labels:** If a component's design intrinsically includes a visible textual label (e.g., a button with text), ensure this text serves as its accessible name.\n- **No Implicit Labels Without Clear Association:** Avoid situations where an input is visually next to text that _looks_ like a label but isn't programmatically associated.\n"
  },
  {
    "path": ".cursor/rules/base-components.mdc",
    "content": "---\ndescription: \"Comprehensive guide for base components in `@vibe/core` library (BaseInput, BaseList, BaseListItem, InfoText, FieldLabel). Documents their usage patterns, accessibility requirements, form integration patterns, and what consumers need to provide for optimal accessibility and UX. These components serve as foundational building blocks for complex UI components like dropdowns, text fields, and other form controls. Those components are internal, for developing components in Vibe, and are not intended to be exported from the `@vibe/core` library.\"\nglobs:\nalwaysApply: false\n---\n\n# Base Components Guide\n\nThis document outlines the usage patterns, accessibility requirements, and integration guidelines for the foundational base components in the `@vibe/core` library: `BaseInput`, `BaseList`, `BaseListItem`, `InfoText`, and `FieldLabel`.\n\n## Component Overview\n\n### BaseInput\n\n**Purpose**: Low-level input wrapper that provides consistent styling, accessibility, and extensibility for form inputs.\n\n**What it provides out of the box**:\n\n- Consistent visual states (success, error, disabled, readonly)\n- Size variants (small, medium, large)\n- Left/right element rendering slots\n- Basic accessibility attributes (`aria-invalid`, roles)\n- Input focus management and styling\n\n**What consumers must provide for optimal experience**:\n\n- Proper `aria-label` or associated `<label>` element\n- Error handling and validation feedback\n- Appropriate `wrapperRole`/`inputRole` for complex components\n- Clear placeholder text when appropriate\n\n### BaseList\n\n**Purpose**: Generic list component for dropdown menus, autocomplete results, and other option lists.\n\n**What it provides out of the box**:\n\n- Grouped options with optional dividers\n- Selection and highlighting states\n- Scrollable container with max height\n- RTL support\n- Sticky group titles\n- Custom renderers for items and menu content\n- \"No results\" message handling\n\n**What consumers must provide for optimal experience**:\n\n- Proper `menuAriaLabel` for screen readers\n- Keyboard navigation handling (via parent component)\n- Focus management integration\n\n### BaseListItem\n\n**Purpose**: Individual items within lists with consistent styling and interaction patterns.\n\n**What it provides out of the box**:\n\n- Selection and highlighting visual states\n- Disabled and readonly states\n- Start/end element slots for icons, avatars, etc.\n- Tooltip integration\n- Size variants consistent with parent list\n- RTL support\n\n**What consumers must provide for optimal experience**:\n\n- Proper `role` attribute (usually \"option\" or \"menuitem\")\n- Click handlers and keyboard event management\n- Meaningful `tooltipProps` when needed\n\n### InfoText\n\n**Purpose**: Helper text component for forms that provides contextual information and validation feedback.\n\n**What it provides out of the box**:\n\n- Consistent styling for helper text\n- Error, success, disabled, and readonly states\n- Conditional rendering (null when no text provided)\n- Proper text sizing and color variants\n\n**What consumers must provide for optimal experience**:\n\n- Proper `id` for `aria-describedby` association with an input\n\n### FieldLabel\n\n**Purpose**: Form label component with consistent styling and accessibility features.\n\n**What it provides out of the box**:\n\n- Icon support with proper positioning\n- Required field indicator (asterisk)\n- Proper `htmlFor`/`labelFor` association\n- Consistent typography and spacing\n\n**What consumers must provide for optimal experience**:\n\n- Proper `htmlFor` or `labelFor` matching input `id`\n- Clear, descriptive label text\n- Appropriate `required` flag for form validation\n\n## Accessibility Requirements\n\n### BaseInput Accessibility\n\n**MUST implement**:\n\n- `aria-label` or associated `<label>` element\n- `aria-invalid` for error states (automatically provided)\n- `aria-describedby` linking to helper text\n- `aria-labelledby` when using external labels\n\n**SHOULD implement**:\n\n- `aria-required` for required fields\n- `wrapperRole` for complex widgets (e.g., \"search\", \"combobox\")\n- `inputRole` for specialized inputs (e.g., \"spinbutton\", \"combobox\")\n\n**Example Integration**:\n\n```typescript\n<FieldLabel\n  id=\"email-label\"\n  labelText=\"Email Address\"\n  required={true}\n  labelFor=\"email-input\"\n/>\n<BaseInput\n  id=\"email-input\"\n  type=\"email\"\n  required={true}\n  aria-labelledby=\"email-label\"\n  aria-describedby=\"email-info\"\n  error={hasError}\n  placeholder=\"Enter your email\"\n/>\n<InfoText\n  id=\"email-info\"\n  text={errorText || \"We'll never share your email\"}\n  error={hasError}\n/>\n```\n\n### BaseList Accessibility\n\n**SHOULD implement**:\n\n- `aria-activedescendant` for keyboard navigation\n- `aria-multiselectable` for multi-select lists\n- Proper focus management with parent component\n\n**Example Integration**:\n\n```typescript\nconst { getMenuProps, getItemProps } = useCombobox({\n  // ... combobox configuration\n});\n\n<BaseList\n  options={filteredOptions}\n  selectedItems={selectedItems}\n  highlightedIndex={highlightedIndex}\n  menuAriaLabel=\"Available options\"\n  getMenuProps={getMenuProps}\n  getItemProps={getItemProps}\n  size=\"medium\"\n/>;\n```\n\n### BaseListItem Accessibility\n\n**MUST implement**:\n\n- Proper `role` attribute (\"option\" for listbox, \"menuitem\" for menu)\n- `itemProps` with selection and navigation handlers\n- `aria-selected` state\n\n**SHOULD implement**:\n\n- `aria-disabled` for disabled items\n- Meaningful tooltip content for complex items\n- Proper focus management\n\n## Form Integration Patterns\n\n### Complete Form Field Pattern\n\nThe base components work together to create accessible, complete form fields:\n\n```typescript\nconst FormField = ({ label, value, onChange, error, helperText, required, id }) => {\n  const labelId = `${id}-label`;\n  const infoId = `${id}-info`;\n\n  return (\n    <div>\n      <FieldLabel id={labelId} labelText={label} required={required} labelFor={id} />\n      <BaseInput\n        id={id}\n        value={value}\n        onChange={onChange}\n        error={!!error}\n        required={required}\n        aria-labelledby={labelId}\n        aria-describedby={infoId}\n      />\n      <InfoText id={infoId} text={error || helperText} error={!!error} />\n    </div>\n  );\n};\n```\n\n## UI Features and Capabilities\n\n### Visual States\n\nAll base components support consistent visual states:\n\n- **Normal**: Default appearance\n- **Disabled**: Reduced opacity, no pointer events\n- **Readonly**: Subdued appearance, no user interaction\n\nThe BaseInput base component support the following visual states:\n\n- **Error**: Red border/text for validation errors\n- **Success**: Green border/text for successful validation\n\n### Size Variants\n\nComponents support various size variants.\n\n### Theming Support\n\nComponents use CSS custom properties for theming:\n\n- Design tokens from Vibe's styling library (`@vibe/style`)\n- Automatic dark/light mode support\n- Consistent spacing and typography scales\n\n## Common Patterns and Best Practices\n\n### 1. Use className Prop for Styling Base Components\n\nWhen styling base components from other components, always use their `className` prop instead of targeting them with CSS selectors like `[data-vibe]` or `[data-testid]`, element selectors, or other attribute selectors. This maintains clear component boundaries and prevents styling conflicts.\n\n```typescript\n// ✅ Good - Use className prop\n<BaseInput className={styles.myCustomInput} />\n\n// ❌ Bad - Don't target with element or attribute selectors\n// In CSS: button { ... } or [data-testid] { ... }\n```\n\n### 2. Always Provide Labels\n\n```typescript\n// ✅ Good\n<FieldLabel labelText=\"Username\" labelFor=\"username\" />\n<BaseInput id=\"username\" aria-labelledby=\"username-label\" />\n\n// ❌ Bad\n<BaseInput placeholder=\"Username\" /> // Placeholder is not a label\n```\n\n### 2. Use InfoText for Contextual Information\n\n```typescript\n// ✅ Good\n<BaseInput\n  id=\"password\"\n  type=\"password\"\n  aria-describedby=\"password-info\"\n/>\n<InfoText\n  id=\"password-info\"\n  text=\"Must be at least 8 characters\"\n/>\n\n// ❌ Bad - no contextual information provided\n<BaseInput type=\"password\" />\n```\n\n### 3. Implement Proper Error Handling\n\n```typescript\n// ✅ Good\n<BaseInput\n  error={!!validationError}\n  aria-describedby=\"field-error\"\n/>\n<InfoText\n  id=\"field-error\"\n  text={validationError}\n  error={!!validationError}\n/>\n\n// ❌ Bad - error state not properly communicated\n<BaseInput style={{ borderColor: 'red' }} />\n```\n\n## Testing Accessibility\n\n1. **Screen Reader**: Ensure proper label associations\n2. **Keyboard Navigation**: Test tab order and key handlers\n3. **Focus Management**: Verify focus states and trapping\n4. **ARIA Attributes**: Check for proper roles and states\n"
  },
  {
    "path": ".cursor/rules/ci-cd-workflows.mdc",
    "content": "---\ndescription: This rule provides guidance on the CI/CD pipeline, GitHub Actions workflows (defined in .github/workflows/), custom actions (in .github/actions/), versioning strategies, and release processes. Use this rule if the query involves CI/CD, build/test issues, release procedures, versioning questions, or if it references files within the .github/workflows or .github/actions directories.\nglobs:\n  - \".github/workflows/**\"\n  - \".github/actions/**\"\nalwaysApply: false\n---\n\n# CI/CD Workflows (GitHub Actions)\n\nThis project uses GitHub Actions for its Continuous Integration (CI) and Continuous Deployment (CD) pipelines.\n\n## Workflow Definitions\n\nThe main workflow definitions are located in the `.github/workflows/` directory. Key workflows include:\n\n- `pr.yml`: Runs checks on every Pull Request.\n- `test.yml`: A reusable workflow to run unit tests, e2e, bundle size checks, linting, etc. Gets called on PRs and Release.\n- `build-and-upload.yml`: Probably handles building artifacts and uploading them.\n- `release.yml`: Manages the release process of Vibe v3 (@vibe/core@3) for new versions.\n- `release-v2.yml`: Manages the release process of Vibe v2 (monday-ui-react-core@2) for critical bug fixes.\n- `prerelease.yml`: Handles pre-release versions.\n- `publish-storybook.yml`: Publishes new versions of Storybook. Gets called automatically after release or by calling it manually.\n- `chromatic.yml`: Creates a Chromatic build to check for visual regression testing of the library's UI components.\n\n## Custom Actions\n\nThe workflows may utilize custom reusable GitHub Actions defined in the `.github/actions/` directory. These custom actions encapsulate specific steps or logic. Notable custom actions include:\n\n- `setup/`: Setting up the environment, installing dependencies.\n- `determine-lerna-since-flag/`: Calculates whether we're running on master or on a branch, to determine the \"--since\" flag value for lerna.\n- `check-changed-packages/`: Identifies which packages were modified in a PR to run targeted tests or builds only if changes were found.\n- `download-builds/`: Downloads build artifacts. Used in workflows that uses `build-and-upload.yml` to download the uploaded build artifact.\n- `git-creds/`: Handles Git credentials setup.\n\nWhen trying to understand the CI/CD process, refer to these directories and files. The YAML files in `.github/workflows/` define the triggers and jobs and reusable workflows, while the subdirectories in `.github/actions/` contain the logic for custom actions (reusable actions).\n"
  },
  {
    "path": ".cursor/rules/component-internal-structure.mdc",
    "content": "---\ndescription: \"This rule defines conventions for the internal structure of React components within the `@vibe/core` library (located in \"packages/core\" directory). Adhering to these conventions ensures consistency, readability, and maintainability across the codebase.\"\nglobs:\n    - packages/core/src/components/**/*.tsx\nalwaysApply: false\n---\n\n# Components Internal Structure\n\n## General Guidelines\n\n1. **Functional Components**: Always use functional components with React Hooks.\n2. **TypeScript**: All components must be written in TypeScript.\n3. **`forwardRef`**: Prefer using `React.forwardRef` for all components that might need to expose their underlying DOM element or instance to parent components. The `ref` should be typed directly on the function's second argument.\n4. **Props Typing and Destructuring**: Props must be destructured in the component function's first argument, and this argument must be explicitly typed with the component's props type.\n\n## File Structure (within the `.tsx` file)\n\n### 1. Import Order\n\nImports should be ordered as follows:\n\n1. **React Import**: `import React, { ... } from \"react\";`.\n2. **Third-party Libraries**: e.g., `import cx from \"classnames\";`.\n3. **Vibe Libraries (@vibe)**: e.g., `import { MyIcon } from \"@vibe/icons\";`.\n4. **Internal Components/Hooks/Utils from the library**: e.g., `import useMergeRef from \"../../hooks/useMergeRef\";`.\n5. **Type Imports**: e.g., `import { MyComponentProps } from \"./MyComponent.types\";`.\n6. **Rest of the imports**: e.g., everything other than styles should be here.\n7. **Style Imports**: Should always be the last import. e.g., `import styles from \"./MyComponent.module.scss\";`.\n\n### 2. Component Definition\n\n1. **`const` Declaration**: Define components using a `const` assignment with an arrow function.\n\n   ```typescript\n   const MyComponent = React.forwardRef(...)\n   ```\n\n2. **Props**:\n\n- Props interface/type must be defined in a separate `ComponentName.types.ts` file and imported.\n- Destructure props directly in the function component's signature.\n- The destructured props object should be typed with the imported props type. Example:\n\n```typescript\nimport { MyComponentProps } from \"./MyComponent.types\";\n\nconst MyComponent = React.forwardRef(\n  ({ prop1, prop2, ...rest }: MyComponentProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n    // Component logic\n  }\n);\n```\n\n#### Dismissible Component Props Pattern\n\n**If your component can be dismissed/closed**, follow this established pattern to avoid redundant props:\n\n- **Use `onClose` prop as both handler and boolean indicator** - don't add separate `dismissible` or `closable` props\n- **Conditional rendering based on `onClose` presence**: `{onClose && <CloseButton onClick={onClose} />}`\n\n**Implementation Example**:\n\n```typescript\nconst MyComponent = ({ onClose, closeButtonAriaLabel = \"Close\", ...otherProps }: MyComponentProps) => {\n  return (\n    <div>\n      {/* ...Component content */}\n      {onClose && <IconButton ariaLabel={closeButtonAriaLabel} icon={CloseIcon} onClick={onClose} />}\n    </div>\n  );\n};\n```\n\n**Why This Pattern**:\n\n- **Simplifies API**: No need for separate boolean props like `dismissible={true}`\n- **Clear Intent**: If user wants dismissible behavior, they pass `onClose`\n\n### 3. State and Hooks\n\n- **`useState`**: Use `useState` for simple local state.\n- **`useCallback` and `useMemo`**: Use `useCallback` for memoizing functions passed as props or dependencies to other hooks. Use `useMemo` for memoizing computationally expensive values.\n- **`useRef`**: Use `useRef` for accessing DOM elements or storing mutable values that don't trigger re-renders.\n\n### 4. Styling\n\n- **CSS Modules**: Import styles from `ComponentName.module.scss` as a named import. The named import should be `styles`.\n\n  ```typescript\n  import styles from \"./MyComponent.module.scss\";\n  ```\n\n- **`classnames` (cx)**: Use the `classnames` utility (imported as `cx`) for conditionally applying or merging CSS classes.\n\n  ```typescript\n  <div className={cx(styles.myClass, { [styles.active]: isActive }, classNameFromProps)} />\n  ```\n\n### 5. Sub-components\n\n- For complex components, it is highly encouraged to break down the UI into smaller, manageable sub-components. This improves readability, maintainability, and can also lead to performance benefits.\n- Performance can be improved by encapsulating logic, including custom hooks, within sub-components that are conditionally rendered. This avoids unnecessary hook initialization and execution in the parent component. For example, different controller sub-components with their own specific hooks are rendered based on props, preventing the parent from initializing all possible hooks.\n- Sub-components must always be defined in separate files within a `components` or feature-specific directory (e.g., `Modal/ModalHeader/ModalHeader.tsx`). Never define two components in the same `.tsx` file.\n\n### 6. Context\n\n- Utilize React Context for sharing state that needs to be accessed by many components at different levels in the component tree.\n- Define context in a `context` directory (e.g., `Modal/context/ModalContext.ts`). The file itself should typically be named `ComponentNameContext.ts` or `ComponentNameContext.tsx`.\n- Provide context value using `Provider` that is exported from `ComponentNameContext.ts` or `ComponentName.tsx`.\n\nThis structure ensures that context logic is well-organized, type-safe, and easy to consume.\n\n### 7. Default Export\n\n- Export the component as a default export at the bottom of the file.\n\n  ```typescript\n  export default MyComponent;\n  ```\n\n## Boilerplate for a New Component\n\nUse this boilerplate as a starting point for creating new components:\n\n```typescript\nimport React, { forwardRef, useState, useCallback, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\n\n// import OtherInternalComponents from \"...\";\n// import useMyCustomHook from \"../../hooks/useMyCustomHook\";\n\nimport { MyComponentProps } from \"./MyComponent.types\";\nimport styles from \"./MyComponent.module.scss\";\n\nconst MyComponent = forwardRef(\n  (\n    {\n      // Destructure props here\n      id,\n      className,\n      \"data-testid\": dataTestId\n    }: // ...other props\n    MyComponentProps,\n    ref: React.ForwardedRef<HTMLDivElement> // Adjust HTML element type\n  ) => {\n    // const internalRef = useRef<HTMLDivElement>(null); // Adjust HTML element type\n    // const mergedRef = useMergeRef(ref, internalRef); // If using useMergeRef (if internalRef is required)\n\n    // const [myState, setMyState] = useState<StateType>();\n\n    // const memoizedValue = useMemo(() => {\n    //   // ...\n    // }, [/* dependencies */]);\n\n    // const handleClick = useCallback(() => {\n    //   // ...\n    // }, [/* dependencies */]);\n\n    // useEffect(() => {\n    //   // ...\n    //   return () => {\n    //     // cleanup\n    //   };\n    // }, [/* dependencies */]);\n\n    return (\n      <div\n        ref={ref} // or mergedRef\n        id={id}\n        className={cx(styles.myComponentBaseClass, className)}\n        data-testid={dataTestId}\n      >\n        {/* Component JSX */}\n      </div>\n    );\n  }\n);\n\nexport default MyComponent;\n```\n\nRemember to consult specific component files or other relevant rules like `styling-conventions.mdc` or `naming-conventions.mdc` for more detailed guidance.\n"
  },
  {
    "path": ".cursor/rules/dependency-management.mdc",
    "content": "---\ndescription: Provides guidelines for managing dependencies in this monorepo. Use this rule when you are considering adding a new dependency, choosing between different packages, or need to understand constraints on package versions. It emphasizes minimizing new dependencies and checking for existing solutions first.\nglobs:\n  - \"**/package.json\"\n  - \"package.json\"\nalwaysApply: false\n---\n\n# Dependency Management Guidelines\n\nWhen managing dependencies for this monorepo, please adhere to the following principles to keep the library lean and efficient:\n\n## 1. Minimize New Dependencies\n\nOur primary goal is to avoid adding new dependencies unless they are absolutely essential. The component library should remain as lightweight as possible.\n\n## 2. Prioritize Existing Dependencies\n\nBefore considering adding a new package, **always** check the relevant `package.json` file(s) within the library to see if an existing dependency can fulfill the requirement.\n\n## 3. React Version Constraints\n\nWe must use latest **React 16** and latest **React DOM 16** for @vibe/core library (\"packages/core\") and other packages in our monorepo. Do not use or suggest versions newer than 16.x.x for these packages.\n\n## 4. Criteria for Adding New Dependencies\n\nOnly suggest installing a new package if:\n\n- It is an absolute must for the functionality.\n- It would significantly simplify development or reduce a considerable amount of overhead compared to using existing tools or custom solutions.\n- The benefits clearly outweigh the cost of adding another dependency.\n- It is a very popular library and considered the best practice for the requested use case.\n\nAlways justify the need for any new dependency by explaining why existing solutions are not adequate.\n"
  },
  {
    "path": ".cursor/rules/file-structures.mdc",
    "content": "---\ndescription: \"Outlines file and directory structure conventions within the `@vibe/core` package (located in `packages/core/`), including top-level \"src/\" and component-specific organization (tests, stories, sub-components, hooks).\"\nglobs: \nalwaysApply: false\n---\n\n# File Structure Conventions for @vibe/core\n\nThis document outlines the typical file and directory structure within the `packages/core` library. Adhering to these conventions helps maintain consistency and predictability across the codebase.\n\n## Top-Level Structure within `packages/core/src`\n\nThe `packages/core/src` directory generally contains the following:\n\n- **`components/`**: Houses all UI components. Each component resides in its own subdirectory.\n- **`hooks/`**: Contains custom React hooks that are reusable across multiple components.\n- **`utils/`**: Includes utility functions that are not specific to any single component or hook.\n- **`types/`**: Defines shared TypeScript types and interfaces used throughout the `@vibe/core` library.\n- **`constants/`**: Stores constant values used across the library.\n- **`styles/`**: Can include global styles or theme-related style files, although most component-specific styling is co-located with the component. It is preferred to not add new code to this directory.\n- **`index.ts`**: The main export file for the `@vibe/core` library, re-exporting key modules and components.\n\n## Component-Specific Structure (`packages/core/src/components/ComponentName/`)\n\nEach component within `packages/core/src/components/` should follow a consistent structure:\n\n### Core Files\n\n- **`ComponentName.tsx`**: The main React component file.\n- **`ComponentName.types.ts`**: TypeScript type definitions and interfaces specific to the component.\n- **`ComponentName.module.scss`**: SCSS module for styling the component.\n- **`index.ts`**: Exports the component and related types/interfaces.\n\n### Subdirectories\n\n- **`__tests__/`**: Contains unit and integration tests **only for the main component files** in the root directory.\n  - Files within this directory follow the pattern `ComponentName.test.ts`.\n  - **DO NOT** place tests for subcomponents, hooks, utils, or context in this directory.\n- **`components/`**: For more complex components, this directory can house sub-components that are only used by `ComponentName`.\n  - **Each subcomponent should have its own `__tests__/` directory** if tests are needed.\n  - Structure: `ComponentName/components/SubComponent/__tests__/SubComponent.test.tsx`\n- **`hooks/`**: Custom React hooks that are specific to `ComponentName` and not intended for reuse elsewhere.\n  - **Should contain a `__tests__/` subdirectory** if hook tests are needed.\n  - Structure: `ComponentName/hooks/__tests__/useHookName.test.ts`\n- **`utils/`**: Utility functions specific to `ComponentName`.\n  - **Should contain a `__tests__/` subdirectory** if utility tests are needed.\n  - Structure: `ComponentName/utils/__tests__/utilityName.test.ts`\n- **`context/`**: If a component uses React Context, the context definition, provider, and consumer hook should be placed in this subdirectory (e.g., `ComponentName/context/ComponentNameContext.ts`).\n  - **Should contain a `__tests__/` subdirectory** if context tests are needed.\n  - Structure: `ComponentName/context/__tests__/ComponentNameContext.test.ts`\n- **`consts/`**: Component-specific constant values that are not intended for reuse elsewhere.\n  - **DO NOT** place constants files at the root of the component directory.\n  - **Use meaningful file names** that describe the purpose, not generic names like `MyComponentConstants.ts` or `consts.ts`.\n  - Examples: `ComponentName/consts/variants.ts`, `ComponentName/consts/validate-colors.ts`, `ComponentName/consts/sizes.ts`\n  - **Should contain a `__tests__/` subdirectory** if constants tests are needed.\n  - Structure: `ComponentName/consts/__tests__/sizes.test.ts`\n\n### General Guidelines\n\n- **Simpler Components**: For simpler components, not all subdirectories (`hooks/`, `utils/`, `components/`, `context/`, `consts/`) are necessary. Files like `ComponentName.tsx`, `ComponentName.types.ts`, `ComponentName.module.scss`, `index.ts`, and directories for tests (`__tests__/`) and stories (`__stories__/`) are sufficient in most of the cases.\n- **Reusability**: If a hook, utility, or constant is reusable across multiple components (not potentially reusable, but actually reused in more than one component), it should be placed in the top-level `packages/core/src/hooks/`, `packages/core/src/utils/`, or `packages/core/src/constants/` directories, respectively.\n- **Exports**: The `index.ts` file in each component directory should be the primary point of export for that component and its related parts. The main `packages/core/src/index.ts` should then re-export these components.\n"
  },
  {
    "path": ".cursor/rules/layout-components.mdc",
    "content": "---\ndescription: Guidelines for using Box and Flex layout components in the @vibe/core library instead of custom CSS for spacing, borders, and flexbox layouts.\nglobs: *.tsx,*.ts\n---\n\n# Layout Components Guidelines\n\nThis rule provides comprehensive guidelines for using [Box](mdc:packages/core/src/components/Box/Box.tsx) and [Flex](mdc:packages/core/src/components/Flex/Flex.tsx) components from `@vibe/core` instead of custom CSS for layout, spacing, borders, and containers.\n\n## Core Principle: Props Over CSS\n\n**Always prefer component props over custom CSS** for layout properties that Box and Flex provide. This ensures:\n\n- Consistent design token usage\n- Better maintainability\n- Type safety\n- Reduced CSS bundle size\n- Design system compliance\n\n## Box Component Usage\n\n### When to Use Box\n\n- **Container styling**: Backgrounds, borders, shadows, padding, margins\n- **Scrollable containers**: Use `scrollable` prop instead of `overflow: auto` in CSS\n- **Bordered containers**: Use `border` props instead of CSS border\n- **Spacing containers**: Use margin/padding props instead of CSS spacing\n- **Styled wrappers**: Any div that needs visual styling\n\n### Box Props Reference\n\n#### Spacing Props\n\n```tsx\n// ❌ Avoid CSS\n<div className={styles.container}>\n  <Content />\n</div>\n// .container { padding: var(--space-16); margin-bottom: var(--space-24); }\n\n// ✅ Prefer Box props\n<Box padding=\"medium\" marginBottom=\"large\">\n  <Content />\n</Box>\n```\n\n**Available spacing values**: `xs`, `small`, `medium`, `large`, `xl`, `xxl`, `xxxl`.\n\nIf needing for a size that does not exist on `Box` (like `var(--space-12)`), you can use css for this value instead of using a prop.\n\n- Margin props also support: `auto`, `none`\n- Directional props: `marginX`, `marginY`, `marginTop`, `marginEnd`, `marginBottom`, `marginStart`\n- Directional props: `paddingX`, `paddingY`, `paddingTop`, `paddingEnd`, `paddingBottom`, `paddingStart`\n\n#### Border & Visual Props\n\n```tsx\n// ❌ Avoid CSS\n<div className={styles.bordered}>\n  <Content />\n</div>\n// .bordered { border: 1px solid var(--border-color); border-radius: 8px; }\n\n// ✅ Prefer Box props\n<Box border borderColor=\"uiBorderColor\" rounded=\"medium\">\n  <Content />\n</Box>\n```\n\n**Border colors**: `uiBorderColor`, `layoutBorderColor`\n**Rounded values**: `small`, `medium`, `big`\n**Shadow values**: `xs`, `small`, `medium`, `large`\n\n#### Scrollable Containers\n\n```tsx\n// ❌ Avoid CSS\n<div className={styles.scrollableContainer}>\n  <Content />\n</div>\n// .scrollableContainer { overflow: auto; }\n\n// ✅ Prefer Box scrollable prop\n<Box scrollable>\n  <Content />\n</Box>\n```\n\n#### Background & Text Colors\n\n```tsx\n// ❌ Avoid CSS\n<div className={styles.cardContainer}>\n  <Content />\n</div>\n// .cardContainer { background-color: var(--secondary-background-color); }\n\n// ✅ Prefer Box props\n<Box backgroundColor=\"secondaryBackgroundColor\" textColor=\"primaryTextColor\">\n  <Content />\n</Box>\n```\n\n**Background colors**: `primaryBackgroundColor`, `secondaryBackgroundColor`, `greyBackgroundColor`, `allgreyBackgroundColor`, `invertedColorBackground`\n**Text colors**: `primaryTextColor`, `textColorOnInverted`, `secondaryTextColor`\n\n## Flex Component Usage\n\n### When to Use Flex\n\n- **Layout positioning**: Arrange elements horizontally or vertically\n- **Gap spacing**: Space between flex items\n- **Alignment**: Justify and align flex items\n- **Responsive layouts**: Wrapping flex containers\n- **Toolbar/header layouts**: Horizontal arrangements with spacing\n\n### Flex Props Reference\n\n#### Basic Layout\n\n```tsx\n// ❌ Avoid CSS\n<div className={styles.flexContainer}>\n  <Item1 />\n  <Item2 />\n  <Item3 />\n</div>\n// .flexContainer { display: flex; gap: 16px; justify-content: space-between; }\n\n// ✅ Prefer Flex props\n<Flex gap=\"medium\" justify=\"space-between\">\n  <Item1 />\n  <Item2 />\n  <Item3 />\n</Flex>\n```\n\n**Direction values**: `row` (default), `column`\n**Gap values**: `xs` (4px), `small` (8px), `medium` (16px), `large` (24px), or custom number in px\n**Justify values**: `start`, `center`, `end`, `stretch`, `space-around`, `space-between`, `initial`\n**Align values**: `start`, `center`, `end`, `stretch`, `baseline`, `initial`\n\n#### Common Patterns\n\n```tsx\n// Horizontal toolbar\n<Flex gap=\"small\" justify=\"space-between\" align=\"center\">\n  <Button>Action 1</Button>\n  <Button>Action 2</Button>\n</Flex>\n\n// Vertical stack\n<Flex direction=\"column\" gap=\"medium\">\n  <Item1 />\n  <Item2 />\n  <Item3 />\n</Flex>\n\n// Centered content\n<Flex justify=\"center\" align=\"center\">\n  <Content />\n</Flex>\n\n// With custom gap (px value)\n<Flex gap={32} direction=\"column\">\n  <Item1 />\n  <Item2 />\n</Flex>\n```\n\n#### Clickable Flex\n\nWhen providing `onClick`, Flex automatically wraps with Clickable component:\n\n```tsx\n<Flex gap=\"small\" onClick={handleClick} ariaLabel=\"Clickable toolbar\" tabIndex={0}>\n  <Item1 />\n  <Item2 />\n</Flex>\n```\n\n## Component Combination Patterns\n\n### Box + Flex for Complex Layouts\n\n```tsx\n// Container with border and internal flex layout\n<Box border rounded=\"medium\" padding=\"medium\">\n  <Flex gap=\"small\" justify=\"space-between\" align=\"center\">\n    <Text>Title</Text>\n    <Button>Action</Button>\n  </Flex>\n</Box>\n\n// Scrollable flex container\n<Box scrollable>\n  <Flex direction=\"column\" gap=\"small\">\n    {items.map(item => <Item key={item.id} {...item} />)}\n  </Flex>\n</Box>\n```\n\n### Nested Layout Structure\n\n```tsx\n// Page layout example\n<Box padding=\"large\">\n  <Flex direction=\"column\" gap=\"large\">\n    {/* Header */}\n    <Flex justify=\"space-between\" align=\"center\">\n      <Heading>Page Title</Heading>\n      <Button>Action</Button>\n    </Flex>\n\n    {/* Content cards */}\n    <Flex gap=\"medium\" wrap>\n      {cards.map(card => (\n        <Box key={card.id} border rounded=\"medium\" padding=\"medium\" backgroundColor=\"secondaryBackgroundColor\">\n          <Card {...card} />\n        </Box>\n      ))}\n    </Flex>\n  </Flex>\n</Box>\n```\n\n## Migration Guidelines\n\n### From CSS to Box\n\n1. **Replace border CSS**: `border: 1px solid var(--border-color)` → `border` prop\n2. **Replace padding/margin CSS**: `padding: var(--spacing-medium)` → `padding=\"medium\"`\n3. **Replace overflow CSS**: `overflow: auto` → `scrollable` prop\n4. **Replace background CSS**: `background-color: var(--secondary-bg)` → `backgroundColor=\"secondaryBackgroundColor\"`\n\n### From CSS to Flex\n\n1. **Replace display flex**: `display: flex` → `<Flex>`\n2. **Replace gap CSS**: `gap: 16px` → `gap=\"medium\"` or `gap={16}`\n3. **Replace justify-content**: `justify-content: space-between` → `justify=\"space-between\"`\n4. **Replace align-items**: `align-items: center` → `align=\"center\"`\n5. **Replace flex-direction**: `flex-direction: column` → `direction=\"column\"`\n\n## Anti-Patterns to Avoid\n\n### ❌ Don't Use CSS When Props Are Available\n\n```tsx\n// ❌ Bad\n<div className={styles.container}>\n  <Content />\n</div>\n// .container {\n//   display: flex;\n//   gap: 16px;\n//   padding: 24px;\n//   border: 1px solid var(--border-color);\n// }\n\n// ✅ Good\n<Box border padding=\"large\">\n  <Flex gap=\"medium\">\n    <Content />\n  </Flex>\n</Box>\n```\n\n### ❌ Don't Mix CSS Layout with Component Props\n\n```tsx\n// ❌ Bad - mixing CSS flex with Flex props\n<Flex className={styles.customFlex} gap=\"medium\">\n  <Content />\n</Flex>\n// .customFlex { justify-content: space-between; } // Use justify prop instead\n\n// ✅ Good\n<Flex gap=\"medium\" justify=\"space-between\">\n  <Content />\n</Flex>\n```\n\n### ❌ Don't Use Plain Divs for Styled Containers\n\n```tsx\n// ❌ Bad\n<div className={styles.card}>\n  <div className={styles.scrollableContent}>\n    <Content />\n  </div>\n</div>\n\n// ✅ Good\n<Box border rounded=\"medium\" padding=\"medium\">\n  <Box scrollable>\n    <Content />\n  </Box>\n</Box>\n```\n\n## Element Types\n\nBoth Box and Flex support `elementType` prop to render as different HTML elements:\n\n```tsx\n<Box elementType=\"section\" padding=\"large\">\n  <Content />\n</Box>\n\n<Flex elementType=\"header\" justify=\"space-between\">\n  <Logo />\n  <Navigation />\n</Flex>\n```\n\n## Accessibility\n\n- Use `ariaLabel` and `ariaLabelledby` props on Flex when it's a meaningful container\n- Box and Flex support all standard HTML accessibility attributes\n- When using `onClick` on Flex, proper accessibility attributes are automatically handled\n\n## Examples from Codebase\n\nSee usage examples in:\n\n- [Box Stories](mdc:packages/core/src/components/Box/__stories__/Box.stories.tsx)\n- [Flex Stories](mdc:packages/core/src/components/Flex/__stories__/Flex.stories.tsx)\n"
  },
  {
    "path": ".cursor/rules/monorepo-structure.mdc",
    "content": "---\ndescription: This rule explains the monorepo's structure, including package locations, file organization conventions, creating new packages, details on scripts (both global and package-specific), shared configurations, and the use of tools like Lerna and Yarn Workspaces. Activate this rule when your query involves creating new packages, understanding where packages are located, navigating the file structure, or inquiring about monorepo-level configurations and tooling.\nglobs:\n  - \"lerna.json\"\n  - \"package.json\"\nalwaysApply: false\n---\n\n# Monorepo Navigation & Structure\n\nThis project is a Lerna monorepo that utilizes Yarn Workspaces for managing packages.\n\n- **Package Location**: All individual packages are located within the `packages/` directory. When looking for specific package code, navigate to `packages/` and find the relevant sub-directory for that package.\n- **Yarn Workspaces**:\n  - Dependencies between packages in this monorepo are managed by Yarn Workspaces. Running `yarn install` at the root of the project will install all dependencies for all packages and link them together.\n  - To add a dependency to a specific package: `yarn workspace <package-name> add <dependency-name>`\n  - To add a dev dependency to a specific package: `yarn workspace <package-name> add -D <dependency-name>`\n  - To add a dependency to the root (for global tools like Lerna): `yarn add -W <dependency-name>`\n- **Running Scripts**:\n  - Scripts defined in the root `package.json` (like `build`, `lint`, `test`) often use Lerna to run corresponding scripts in each package (e.g., `lerna run build`).\n  - You can run a script for all packages using: `yarn workspaces run <script-name>` or `lerna run <script-name>`.\n  - To run a script in a specific package: `yarn workspace <package-name> run <script-name>`.\n- **Lerna**: Lerna is used for tasks like versioning, publishing, and running commands across multiple packages. Key commands you might encounter:\n  - `lerna run <script>`: Runs an npm script in each package that contains that script.\n  - `lerna exec -- <command>`: Executes an arbitrary command in each package.\n- **Shared Configuration**: Look for shared development configurations (e.g., ESLint, Prettier, Stylelint, TypeScript `tsconfig.json`) in the root directory. These often provide a base configuration for all packages, though individual packages might extend or override them.\n"
  },
  {
    "path": ".cursor/rules/naming-conventions.mdc",
    "content": "---\ndescription: \"Defines naming conventions for files, directories, components, props, variables, types, and CSS classes within the `@vibe/core` package (located in `packages/core/`). Ensures consistency and readability across the codebase for React components and related TypeScript/SCSS files.\"\nglobs:\nalwaysApply: false\n---\n\n# Naming Conventions for @vibe/core\n\nThis document outlines the naming conventions to be followed when developing within the `@vibe/core` library, located under `packages/core/`. Adhering to these conventions ensures consistency, readability, and maintainability across the codebase.\n\n## General Principles\n\n- **Clarity and Predictability**: Names should be clear, unambiguous, and predictable.\n- **Consistency**: Follow established patterns consistently across all files and components.\n\n## File and Directory Naming\n\n### Component Folders\n\n- Each component resides in its own directory within `packages/core/src/components/`.\n- Component directory names MUST use `PascalCase`.\n  - Example: `packages/core/src/components/MyNewComponent/`\n\n### Component Files\n\n- **Main Component File**: The main React component file MUST be named `ComponentName.tsx`, where `ComponentName` matches the directory name (`PascalCase`).\n  - Example: `packages/core/src/components/MyNewComponent/MyNewComponent.tsx`\n- **Style Files**: SCSS module files for components MUST be named `ComponentName.module.scss`.\n  - Example: `packages/core/src/components/MyNewComponent/MyNewComponent.module.scss`\n  - Refer to the styling-conventions.mdc file in the monorepo for CSS/SCSS specific conventions.\n- **Type Definitions**: TypeScript type definitions for a component MUST be placed in a separate file named `ComponentName.types.ts` and not within the main component file.\n  - Example: `packages/core/src/components/MyNewComponent/MyNewComponent.types.ts`\n- **Constants**: Files exporting constants specific to a component SHOULD be named `ComponentNameConstants.ts`.\n  - Example: `packages/core/src/components/MyNewComponent/MyNewComponentConstants.ts`\n- **Index File**: Each component directory MUST have an `index.ts` file that exports the main component and any other relevant modules (types, constants, etc.).\n  - Example: `packages/core/src/components/MyNewComponent/index.ts`\n\n### Sub-directories (within a component folder)\n\n- **Tests**: Test files SHOULD be co-located with the code they test in respective `__tests__` subdirectories.\n  - **Main Component Tests**: Place in `ComponentName/__tests__/ComponentName.test.tsx`\n  - **Subcomponent Tests**: Place in `ComponentName/components/SubComponent/__tests__/SubComponent.test.tsx`\n  - **Hook Tests**: Place in `ComponentName/hooks/__tests__/useHookName.test.ts`\n  - **Utility Tests**: Place in `ComponentName/utils/__tests__/utilityName.test.ts`\n  - **Context Tests**: Place in `ComponentName/context/__tests__/ComponentNameContext.test.ts`\n  - **DO NOT** centralize all tests in the component root `__tests__` directory.\n- **Stories**: Storybook files SHOULD be placed in a `packages/docs` subdirectory.\n  - Story files typically follow the pattern `ComponentName.stories.tsx`.\n  - Refer to the storybook-stories.mdc file in the monorepo for Storybook specific conventions.\n- **Helper/Utility Files**: Utility functions or helper components specific to a single component can be placed in a `helper` or `utils` subdirectory, or directly within the component folder if small and highly specific.\n  - File names SHOULD be `camelCase.ts` for utils/helpers or `PascalCase.ts` if they export React components.\n- **Custom Hooks**: Component-specific custom hooks SHOULD be placed in a `hooks` subdirectory.\n  - Hook files SHOULD follow the pattern `useHookName.ts` and use camelCase.\n  - If there's only one hook that's tightly coupled to the component, it can be placed directly in the component folder as `useHookName.ts`.\n\n### General File Naming\n\n- For general TypeScript files (e.g., hooks, utils) not specific to a single component, use `camelCase.ts` or `PascalCase.ts` if the file exports a React component.\n- Directory names for common utilities or hooks (e.g., `packages/core/src/hooks/`, `packages/core/src/utils/`) SHOULD be `camelCase`.\n\n## Code Naming Conventions\n\n### Component Names\n\n- React component names MUST use `PascalCase`.\n  - Example: `const MyNewComponent = (props) => { /* ... */ }`.\n\n### Prop Names\n\n- Prop names for React components MUST use `camelCase`.\n  - Example: `<MyNewComponent isLoading={true} userName=\\\"DefaultUser\\\" />`.\n  - For boolean props, the name SHOULD clearly indicate the positive case.\n    - Prefer prefixes like `is` or `has` for clarity (e.g., `isEnabled` or `isVisible` rather than just `enabled`).\n    - Common, unambiguous adjective props like `loading`, `active`, `open`, `checked`, or `required` are also acceptable.\n    - However, if the HTML attribute is `disabled`, using `disabled` is acceptable for consistency.\n\n#### Prop Values\n\n- **String Literals**: Component prop values should use string literals rather than static properties\n  - Example: `<Button size=\"small\" />` instead of `<Button size={Button.sizes.SMALL} />`\n\n### Variable and Function Names\n\n- Local variables and function names SHOULD use `camelCase`.\n  - Example: `const itemCount = 5;`.\n  - Example: `function calculateTotal() { /* ... */ }`.\n- Constants (values that do not change) SHOULD be named in `UPPER_SNAKE_CASE`.\n  - Example: `const MAX_USERS = 100;`.\n\n### Enum Names\n\n- Enum names SHOULD use `PascalCase`.\n- Enum members SHOULD use `PascalCase` or `UPPER_SNAKE_CASE` depending on the context.\n\n### Type and Interface Names\n\n- TypeScript type aliases and interface names MUST use `PascalCase`.\n  - Example: `type UserProfile = { /* ... */ };`.\n  - Example: `interface ComponentProps { /* ... */ }`.\n\n### Vibe Standard Types\n\nWhen working with Vibe components, always use the established standard types for common prop patterns:\n\n- **Icon Props**: Always use `SubIcon` type for any prop that accept icons.\n  - Example: `icon?: SubIcon;` instead of generic types like `ReactNode` or custom icon types.\n- **Component Props**: Extend `VibeComponentProps` for component props (to get `className`, `id`, `data-testid`).\n- **Consistent Typing**: Always check existing similar components to see what Vibe standard types they use before creating custom types.\n\n### CSS Class Names\n\n- CSS class names within `.module.scss` files MUST use `camelCase`.\n- Refer to the styling-conventions.mdc file in the monorepo for more details.\n\n### Context Naming\n\nContext-related files and variables should follow these naming conventions to maintain clarity and consistency, typically residing within a `context/` subdirectory of a component (e.g., `packages/core/src/components/MyComponent/context/`).\n\n- **Context File**: The file containing the context definition, provider, and consumer hook SHOULD be named `ComponentNameContext.ts` or `ComponentNameContext.tsx` (e.g., `ModalContext.tsx`).\n- **Context Object**: The context object created by `React.createContext` SHOULD be named `ComponentNameContext` (e.g., `const ModalContext = createContext(...)`).\n- **Provider Component**: The React component that provides the context value SHOULD be named `ComponentNameProvider` (e.g., `export const ModalProvider = (...)`).\n- **Consumer Hook**: The custom hook for consuming the context SHOULD be named `useComponentName` (e.g., `export const useModal = () => ...`).\n- **Context Props Type/Interface**: The type or interface defining the shape of the context value SHOULD be named `ComponentNameContextProps` (e.g., `interface ModalContextProps { ... }`).\n- **Provider Props Type/Interface**: The type or interface for the Provider component's props SHOULD be named `ComponentNameProviderProps` (e.g., `interface ModalProviderProps { ... }`).\n"
  },
  {
    "path": ".cursor/rules/new-component-implementation.mdc",
    "content": "---\ndescription: \"Provides a systematic, research-driven workflow for implementing new Vibe components - for the @vibe/core library (located in \"packages/core\") - from initial research through final validation. Emphasizes studying existing patterns, following established conventions, and systematic progression through types, component implementation, styling, testing, and documentation to ensure consistency and quality.\"\nglobs:\nalwaysApply: false\n---\n\n# New Component Implementation Workflow\n\n**Purpose**: Provides a systematic approach to implementing new Vibe components, ensuring consistency, efficiency, and adherence to project standards.\n\n## Pre-Implementation Research Phase\n\n### Study Similar Components\n\nBefore writing any code, examine 2-3 existing components that share similar functionality or patterns. For example:\n\n- For informational components: [AttentionBox.tsx](mdc:packages/core/src/components/next/AttentionBox/AttentionBox.tsx), [AlertBanner.tsx](mdc:packages/core/src/components/AlertBanner/AlertBanner.tsx)\n- For action-oriented components: [Button.tsx](mdc:packages/core/src/components/Button/Button.tsx), [SplitButton.tsx](mdc:packages/core/src/components/SplitButton/SplitButton.tsx)\n- For layout components: [Flex.tsx](mdc:packages/core/src/components/Flex/Flex.tsx), [Box.tsx](mdc:packages/core/src/components/Box/Box.tsx)\n\n**Reference**: [component-internal-structure](mdc:.cursor/rules/component-internal-structure.mdc) for detailed component structure patterns and conventions.\n\n### Identify Dependencies\n\nResearch the exact APIs of Vibe components you'll integrate with:\n\n- **Typography**: [Text.tsx](mdc:packages/core/src/components/Text/Text.tsx), [Heading.tsx](mdc:packages/core/src/components/Heading/Heading.tsx)\n- **Actions**: [Button.tsx](mdc:packages/core/src/components/Button/Button.tsx), [Link.tsx](mdc:packages/core/src/components/Link/Link.tsx)\n- **Layout**: [Flex.tsx](mdc:packages/core/src/components/Flex/Flex.tsx)\n- Check component types files (e.g., [Button.types.ts](mdc:packages/core/src/components/Button/Button.types.ts)) for available props\n\n**Reference**: [dependency-management](mdc:.cursor/rules/dependency-management.mdc) for guidelines on choosing and managing dependencies.\n\n### Understand Project Structure\n\n- Base types: [VibeComponentProps.ts](mdc:packages/core/src/types/VibeComponentProps.ts)\n- Test utilities: [test-ids-utils.ts](mdc:packages/core/src/tests/test-ids-utils.ts)\n- Constants: [constants.ts](mdc:packages/core/src/tests/constants.ts)\n- Design tokens: Check existing SCSS files for available CSS custom properties\n\n**Reference**: [monorepo-structure](mdc:.cursor/rules/monorepo-structure.mdc) for understanding the overall project organization and [file-structures](mdc:.cursor/rules/file-structures.mdc) for specific file organization patterns.\n\n## Implementation Order\n\n### 1. Types First (`ComponentName.types.ts`)\n\n- Extend [VibeComponentProps.ts](mdc:packages/core/src/types/VibeComponentProps.ts)\n- Define clear interfaces before implementation\n- Use `ReactNode` for flexible content props\n- Follow existing patterns from similar components\n\n**Reference**: [naming-conventions](mdc:.cursor/rules/naming-conventions.mdc) for proper naming patterns for types and interfaces.\n\n### 2. Core Component (`ComponentName.tsx`)\n\n- Use `forwardRef` pattern. For example following [Button.tsx](mdc:packages/core/src/components/Button/Button.tsx)\n- Import from established Vibe components\n- Follow existing test ID patterns from [constants.ts](mdc:packages/core/src/tests/constants.ts)\n- Use CSS Modules for styling\n- **MANDATORY**: Add `[data-vibe]` attribute for component identification\n\n#### Essential `[data-vibe]` Attribute Implementation\n\n**CRITICAL**: Every new component MUST include the `[data-vibe]` attribute on its root element for component identification in the DOM.\n\n**Import Pattern**:\n\n```tsx\nimport { ComponentVibeId } from \"../../tests/constants\";\n```\n\n**Usage Pattern**:\nAdd to the root element's props:\n\n```tsx\ndata-vibe={ComponentVibeId.ATTENTION_BOX}\n```\n\n**Implementation Examples**:\n\n**Enum Naming Pattern**:\nThe `ComponentVibeId` enum follows SCREAMING_SNAKE_CASE format. For example:\n\n- `Button` → `ComponentVibeId.BUTTON`\n- `AttentionBox` → `ComponentVibeId.ATTENTION_BOX`\n- `MenuButton` → `ComponentVibeId.MENU_BUTTON`\n- `LinearProgressBar` → `ComponentVibeId.LINEAR_PROGRESS_BAR`\n\n**References**:\n\n- [component-internal-structure](mdc:.cursor/rules/component-internal-structure.mdc) for detailed component structure conventions\n- [accessibility-guidelines](mdc:.cursor/rules/accessibility-guidelines.mdc) for ensuring proper accessibility implementation\n- [react-context](mdc:.cursor/rules/react-context.mdc) if your component needs to use or provide React Context\n- [naming-conventions](mdc:.cursor/rules/naming-conventions.mdc) for component and prop naming patterns\n\n### 3. Component Constants (Optional: `consts/` directory)\n\n**If your component needs constant values**, organize them properly:\n\n- **MANDATORY**: Place constants files inside a `consts/` folder, never at the component root\n- **MANDATORY**: Use meaningful file names that describe purpose, not generic names like `MyComponentConstants.ts` or `consts.ts`\n- **Examples of good names**: `variants.ts`, `validate-colors.ts`, `events.ts`, `sizes.ts`\n\n**Reusability Rule**: If constants are used across multiple components, place them in the top-level `packages/core/src/constants/` directory instead.\n\n**Reference**: [file-structures](mdc:.cursor/rules/file-structures.mdc) for detailed constants organization patterns.\n\n### 4. Styles (`ComponentName.module.scss`)\n\n- NEVER Import anything inside the module scss file\n- Use established design tokens and spacing variables\n\n**Reference**: [styling-conventions](mdc:.cursor/rules/styling-conventions.mdc) for comprehensive CSS Modules guidelines, design token usage, and styling best practices.\n\n### 5. Index Exports (`index.ts`)\n\n- On the same root directory of the component (e.g., `packages/core/src/components/MyComponent/index.ts`)\n- Export both component and types\n- Follow pattern: `export { default as ComponentName } from \"./ComponentName\"`\n\n**Reference**: [file-structures](mdc:.cursor/rules/file-structures.mdc) for export patterns and file organization conventions.\n\n### 6. Add to Global Exports\n\n- Update [components/index.ts](mdc:packages/core/src/components/index.ts) in alphabetical order\n- Add test IDs to [constants.ts](mdc:packages/core/src/tests/constants.ts) enum\n- **MANDATORY**: Add your component to the `ComponentVibeId` enum in [constants.ts](mdc:packages/core/src/tests/constants.ts)\n\n#### Adding ComponentVibeId Enum Value\n\n**CRITICAL**: Every new component MUST have a corresponding entry in the `ComponentVibeId` enum.\n\n**Steps**:\n\n1. Find the `ComponentVibeId` enum\n2. Add your component in alphabetical order using SCREAMING_SNAKE_CASE format\n\n**Naming Convention**: Use the exact component name as the enum value, but the key should be in SCREAMING_SNAKE_CASE:\n\n- `Button` → `BUTTON = \"Button\"`\n- `MenuButton` → `MENU_BUTTON = \"MenuButton\"`  \n- `LinearProgressBar` → `LINEAR_PROGRESS_BAR = \"LinearProgressBar\"`\n\n**References**:\n\n- [file-structures](mdc:.cursor/rules/file-structures.mdc) for global export patterns\n- [monorepo-structure](mdc:.cursor/rules/monorepo-structure.mdc) for understanding where and how to add global exports\n\n### 7. Tests (`__tests__/ComponentName.test.tsx`)\n\n- Follow testing patterns from similar components\n- Test actual component behavior, not assumptions\n- Check for proper test ID assignments\n- Verify accessibility attributes (e.g., `aria-hidden`, `aria-disabled`)\n\n**Reference**:\n\n- [accessibility-guidelines](mdc:.cursor/rules/accessibility-guidelines.mdc) for comprehensive accessibility testing requirements and patterns.\n- [file-structures](mdc:.cursor/rules/file-structures.mdc) for detailed test organization patterns.\n\n### 8. Stories (`__stories__/ComponentName.stories.tsx`)\n\n- Create comprehensive examples covering all variants\n\n**Reference**: [storybook-stories](mdc:.cursor/rules/storybook-stories.mdc) for detailed Storybook conventions, story structure, and MDX documentation requirements.\n\n## Validation and Quality Phase\n\n### Development Validation\n\n1. **TypeScript Check**\n2. **Test Suite**: `yarn test src/components/ComponentName/` (will recursively run all tests in subdirectories)\n3. **Lint and Format**: `yarn prettier --write src/components/ComponentName/` then `yarn lint src/components/ComponentName/ --fix`\n\n### Integration Verification\n\n- Verify component exports work by importing in test file\n- Check that all test IDs are properly defined in [constants.ts](mdc:packages/core/src/tests/constants.ts)\n- Ensure component follows established Vibe patterns\n\n## Key Principles\n\n### Research-Driven Development\n\n- **Don't Guess APIs**: Always check actual component implementations\n- **Study Patterns**: Look at how similar components handle similar problems\n- **Understand Context**: Review existing test patterns and story structures\n\n### Modern Prop Patterns\n\n- **Use String Literals**: Define prop values as string literals instead of static properties\n  - ✅ Prefer: `<MyComponent size=\"large\" variant=\"primary\" />`\n  - ❌ Avoid: `<MyComponent size={MyComponent.sizes.LARGE} variant={MyComponent.variants.PRIMARY} />`\n- **Backward Compatibility**: While legacy static properties may exist in the codebase, new components should not include them\n\n### Systematic Progression\n\n- **Follow Order**: Complete each phase before moving to next\n- **Validate Early**: Run TypeScript and tests frequently\n- **Defer Formatting**: Focus on functionality first, format as final step\n\n### Quality Standards\n\n- **Test Real Behavior**: Verify actual DOM output and accessibility attributes\n- **Follow Conventions**: Use established patterns for file structure and naming\n- **Integrate Properly**: Ensure component works within the existing Vibe ecosystem\n\n## Common Pitfalls to Avoid\n\n1. **API Assumptions**: Don't assume component APIs (e.g., Link uses `text` prop, not children)\n2. **Premature Formatting**: Don't interrupt development flow with linting - batch it at the end\n3. **Test Assumptions**: Test actual behavior (disabled buttons may use `aria-disabled` vs `disabled`)\n4. **Missing Integration**: Forgetting to add exports to main index files or test constants\n5. **Design Token Guessing**: Check existing SCSS files for available CSS custom properties\n6. **Missing `[data-vibe]` Attribute**: Forgetting to add the mandatory `[data-vibe]` attribute or missing the corresponding `ComponentVibeId` enum entry\n\nThis workflow ensures consistent, high-quality component implementation that integrates seamlessly with the Vibe design system.\n"
  },
  {
    "path": ".cursor/rules/package-separation.mdc",
    "content": "# Package Separation Guide\n\nThis rule provides a systematic approach for separating components from the `@vibe/core` package into standalone packages in the monorepo (e.g., `@vibe/tooltip`, `@vibe/dialog`). Following this pattern ensures consistency, proper enum handling, and maintainability.\n\n## When to Use This Rule\n\nUse this rule when:\n\n- Separating a component from `packages/core/src/components/` into a new package under `packages/components/`\n- The component has deprecated enums that need special export handling\n- You need to maintain backward compatibility while avoiding enum exposure\n\n## How AI Assistants Should Use This Rule\n\nWhen a user asks to separate a component:\n\n1. **Gather Information:**\n\n   - Component name (e.g., `Badge`)\n   - Package name (typically kebab-case of component name, e.g., `badge`)\n   - Check if component has enums (look for `ComponentNameConstants.ts`)\n   - Identify dependencies (check imports in the component)\n\n2. **Use Templates:**\n\n   - Copy files from `.cursor/templates/package-separation/`\n   - Replace all placeholders (see Template Files section below)\n   - Create the necessary directory structure\n\n3. **Follow the Step-by-Step Process:**\n\n   - Create directories\n   - Move component files\n   - Set up exports (this is CRITICAL - see section 4)\n   - Update core package\n   - Update imports\n   - Build and verify\n\n4. **Verify:**\n   - Run build commands\n   - Check for TypeScript errors\n   - Confirm enum imports are correct (no renaming in consumer code)\n\n## Package Structure Pattern\n\nAll separated packages should follow this structure (using Tooltip as the reference example):\n\n```\npackages/components/tooltip/\n├── src/\n│   ├── Tooltip/\n│   │   ├── Tooltip.tsx          # Main component\n│   │   ├── Tooltip.types.ts     # Type definitions (string unions)\n│   │   ├── TooltipConstants.ts  # Deprecated enums\n│   │   ├── Tooltip.module.scss  # Styles\n│   │   ├── __tests__/           # Tests\n│   │   └── index.ts             # Subdirectory exports (CRITICAL)\n│   ├── index.ts                 # Main package exports\n│   └── types/\n│       └── files.d.ts           # Module declarations\n├── package.json\n├── tsconfig.json\n├── rollup.config.mjs\n└── vitest.config.mjs\n```\n\n## Template Files\n\nTemplate files are available in `.cursor/templates/package-separation/`:\n\n- `package.json` - Package configuration with placeholders\n- `tsconfig.json` - TypeScript configuration\n- `rollup.config.mjs` - Rollup bundler configuration\n- `vitest.config.mjs` - Test configuration\n- `vitest.setup.mjs` - Test setup file\n- `subdirectory-index.ts` - Template for component subdirectory exports\n- `main-index.ts` - Template for main package exports\n- `files.d.ts` - TypeScript module declarations\n\n**Placeholders to replace:**\n\n- `{{PACKAGE_NAME}}` - kebab-case package name (e.g., `my-component`)\n- `{{ComponentName}}` - PascalCase component name (e.g., `MyComponent`)\n- `{{EnumName1}}`, `{{EnumName2}}` - Enum names if component has deprecated enums\n\n## Step-by-Step Separation Process\n\n### 1. Create Package Directory Structure\n\nCreate the new package under `packages/components/[component-name]/`:\n\n```bash\n# Create directories\nmkdir -p packages/components/[component-name]/src/[ComponentName]\nmkdir -p packages/components/[component-name]/src/types\n\n# Copy template files and replace placeholders\ncp .cursor/templates/package-separation/package.json packages/components/[component-name]/\ncp .cursor/templates/package-separation/tsconfig.json packages/components/[component-name]/\ncp .cursor/templates/package-separation/rollup.config.mjs packages/components/[component-name]/\ncp .cursor/templates/package-separation/vitest.config.mjs packages/components/[component-name]/\ncp .cursor/templates/package-separation/vitest.setup.mjs packages/components/[component-name]/\ncp .cursor/templates/package-separation/files.d.ts packages/components/[component-name]/src/types/\n\n# Then replace {{PACKAGE_NAME}} and {{ComponentName}} in these files\n```\n\n**AI Assistant Instructions:**\nWhen helping with package separation:\n\n1. Copy the template files from `.cursor/templates/package-separation/`\n2. Replace all `{{PACKAGE_NAME}}` with the actual package name (kebab-case)\n3. Replace all `{{ComponentName}}` with the actual component name (PascalCase)\n4. Replace enum placeholders with actual enum names from the component\n5. Update dependencies in `package.json` based on what the component imports\n\n### 2. Move Component Files\n\nMove these files from `packages/core/src/components/[ComponentName]/` to the new package:\n\n- Component source files (`.tsx`, `.ts`)\n- Types files (`.types.ts`)\n- Constants files (with enums)\n- Styles (`.module.scss`)\n- Tests (`__tests__/`)\n- Stories (`__stories__/`) if applicable\n\n**Important:** Do **NOT** create `CHANGELOG.md` files for new packages. The changelog is managed automatically by the build/release system (Lerna).\n\n### 3. Set Up Package Configuration\n\n#### package.json\n\nFollow the pattern from existing separated packages. Key fields:\n\n```json\n{\n  \"name\": \"@vibe/[component-name]\",\n  \"version\": \"3.0.0\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.js\",\n  \"types\": \"dist/index.d.ts\",\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \".\": {\n      \"types\": \"./dist/index.d.ts\",\n      \"import\": \"./dist/index.js\",\n      \"default\": \"./dist/index.js\"\n    }\n  }\n}\n```\n\n#### tsconfig.json, rollup.config.mjs, vitest.config.mjs\n\nCopy these from an existing separated package (e.g., `@vibe/tooltip` or `@vibe/dialog`) and adjust as needed.\n\n### 4. Configure Exports (CRITICAL)\n\nThis is the most important step to avoid enum/type naming conflicts.\n\n#### Component Subdirectory Index (`src/ComponentName/index.ts`)\n\n**Pattern:**\n\n```typescript\n// Export the component (as named export, NOT default)\nexport { default as ComponentName, type ComponentNameProps } from \"./ComponentName\";\n\n// Export enums with \"Enum\" suffix to avoid conflicts with types\nexport { EnumName1 as EnumName1Enum, EnumName2 as EnumName2Enum } from \"./ComponentNameConstants\";\n\n// Export types (string unions)\nexport * from \"./ComponentName.types\";\n```\n\n**Real Example (Tooltip):**\n\n```typescript\nexport { default as Tooltip, type TooltipProps } from \"./Tooltip\";\nexport { TooltipPositions as TooltipPositionsEnum, TooltipTheme as TooltipThemeEnum } from \"./TooltipConstants\";\nexport * from \"./Tooltip.types\";\n```\n\n**Real Example (Dialog):**\n\n```typescript\nexport { default as Dialog, type DialogProps } from \"./Dialog\";\nexport {\n  HideShowEvent as DialogTriggerEventEnum,\n  AnimationType as DialogAnimationTypeEnum,\n  DialogPosition as DialogPositionEnum,\n  DialogSize as DialogSizeEnum\n} from \"./DialogConstants\";\nexport * from \"./Dialog.types\";\n```\n\n#### Main Package Index (`src/index.ts`)\n\n**Pattern:**\n\n```typescript\nexport * from \"./ComponentName\";\n```\n\nThis simple wildcard re-export works because the subdirectory index already handles the enum naming.\n\n### 5. Update Core Package Exports\n\nEdit `packages/core/src/components/index.ts`:\n\n**Pattern:**\n\n```typescript\n// TODO: export * after removing enums\nexport {\n  ComponentName,\n  type ComponentNameProps,\n  type TypeName1,\n  type TypeName2\n  // ... other types, but NOT enums\n} from \"@vibe/component-name\";\n```\n\n**Why:** This prevents deprecated enums from being exposed in the core package's public API while still exporting the types that consumers need.\n\n**Real Example (Dialog):**\n\n```typescript\n// TODO: export * after removing enums\nexport {\n  Dialog,\n  DialogContentContainer,\n  type DialogProps,\n  type DialogContentContainerProps,\n  type DialogType,\n  type DialogSize,\n  type DialogPosition,\n  type DialogTriggerEvent,\n  type DialogAnimationType,\n  type DialogOffset,\n  type DialogEvent\n} from \"@vibe/dialog\";\n```\n\n### 6. Update Consumer Imports in Core Package\n\nFind all files in `packages/core/src/` that import from the component and update them:\n\n#### Component Import\n\n**Before:**\n\n```typescript\nimport ComponentName from \"../ComponentName/ComponentName\";\n```\n\n**After:**\n\n```typescript\nimport { ComponentName } from \"@vibe/component-name\";\n```\n\n#### Enum Import\n\n**CRITICAL:** Import enums with their \"Enum\" suffix directly, do NOT rename them.\n\n**Wrong ❌:**\n\n```typescript\nimport { EnumName as EnumNameEnum } from \"@vibe/component-name\";\n```\n\n**Correct ✅:**\n\n```typescript\nimport { EnumNameEnum } from \"@vibe/component-name\";\n```\n\n**Real Example (Dialog):**\n\n```typescript\nimport { DialogPositionEnum, DialogTriggerEventEnum, DialogSizeEnum } from \"@vibe/dialog\";\n```\n\n### 7. Link Workspace Packages\n\nRun `yarn install` at the root to create symlinks automatically:\n\n```bash\n# From anywhere in the monorepo\ncd $(git rev-parse --show-toplevel)\nyarn install\n```\n\nThis will automatically create symlinks in `node_modules/@vibe/` for all packages defined in the `workspaces` field of the root `package.json`. You'll see:\n\n```\nnode_modules/@vibe/component-name -> ../../packages/components/component-name\n```\n\n**Note:** The monorepo uses Yarn Workspaces, which automatically links all packages in `packages/*` and `packages/components/*`. Manual symlink creation with `ln -s` is NOT needed.\n\n### 8. Update Dependencies\n\n#### In the new package's package.json\n\nAdd dependencies for any Vibe packages it uses:\n\n```json\n{\n  \"dependencies\": {\n    \"@vibe/shared\": \"3.0.x\",\n    \"@vibe/icon\": \"3.0.x\"\n    // ... other dependencies\n  }\n}\n```\n\n#### In core package's package.json\n\nAdd the new package as a dependency:\n\n```json\n{\n  \"dependencies\": {\n    \"@vibe/component-name\": \"3.0.0\"\n  }\n}\n```\n\n### 9. Build and Test\n\n```bash\n# Build the new package\ncd packages/components/component-name\nyarn build\n\n# Build core package\ncd packages/core\nrm -rf .rpt2_cache  # Clear TypeScript cache\nyarn build\n\n# Run tests\nyarn test\n```\n\n## Common Patterns and Gotchas\n\n### Pattern: Type and Enum with Same Name\n\nWhen you have a type and enum with the same name (e.g., `DialogSize` type and `DialogSize` enum):\n\n1. **In Types file:** Define as string union\n\n   ```typescript\n   export type DialogSize = \"none\" | \"small\" | \"medium\" | \"large\";\n   ```\n\n2. **In Constants file:** Define as deprecated enum\n\n   ```typescript\n   /** @deprecated */\n   export enum DialogSize {\n     NONE = \"none\",\n     SMALL = \"small\",\n     MEDIUM = \"medium\",\n     LARGE = \"large\"\n   }\n   ```\n\n3. **In Subdirectory index:** Export enum with \"Enum\" suffix\n\n   ```typescript\n   export { DialogSize as DialogSizeEnum } from \"./DialogConstants\";\n   export * from \"./Dialog.types\"; // Exports DialogSize type\n   ```\n\n4. **In Consumer code:** Import both explicitly\n   ```typescript\n   import { type DialogSize, DialogSizeEnum } from \"@vibe/dialog\";\n   ```\n\n### Gotcha: Default vs Named Exports\n\n**Always use named exports** for components in separated packages, not default exports at the package level.\n\n**Why:** This maintains consistency with other separated packages and allows for cleaner import patterns.\n\n### Gotcha: Wildcard Exports and Enums\n\n**Never** use `export * from \"./ComponentConstants\"` in the subdirectory index if you need to rename enums. Always use explicit named exports with aliases.\n\n### Gotcha: TypeScript Cache\n\nAfter making export changes, always clear the TypeScript cache:\n\n```bash\nrm -rf .rpt2_cache\nrm -rf node_modules/.cache\n```\n\n### Gotcha: Module Resolution\n\nIf TypeScript can't find the new package, check:\n\n1. Is the package built? (`dist/` folder exists)\n2. Did you run `yarn install` at the root? (creates workspace symlinks)\n3. Is the symlink created? Check with `ls -la node_modules/@vibe/component-name`\n4. Is `package.json` configured with correct `main` and `types` fields?\n5. Did you clear the TypeScript cache?\n\n**Why symlinks are needed:** Yarn Workspaces creates symlinks so that `import { Component } from \"@vibe/component-name\"` resolves to `packages/components/component-name/dist/` instead of looking for a published npm package.\n\n## Checklist for Package Separation\n\nUse this checklist when separating a component:\n\n- [ ] Created package directory structure under `packages/components/`\n- [ ] Moved all component files (source, types, constants, styles, tests)\n- [ ] Created `package.json` with correct exports configuration (DO NOT create CHANGELOG.md)\n- [ ] Copied/configured `tsconfig.json`, `rollup.config.mjs`, `vitest.config.mjs`\n- [ ] Set up subdirectory index with enum renaming (`src/ComponentName/index.ts`)\n- [ ] Set up main package index (`src/index.ts`)\n- [ ] Updated core package's `components/index.ts` with explicit exports\n- [ ] Updated all consumer imports in core package (component and enums)\n- [ ] Added dependencies to both packages' `package.json`\n- [ ] Ran `yarn install` at root to create workspace symlinks\n- [ ] Built the new package successfully\n- [ ] Cleared TypeScript cache and built core package successfully\n- [ ] Verified no TypeScript errors related to the component\n- [ ] Updated or verified tests pass\n- [ ] Verified Storybook stories work (if applicable)\n\n## Example Command Sequence\n\n```bash\n# 1. Create package structure\nmkdir -p packages/components/my-component/src/MyComponent\n\n# 2. Move files (adjust paths as needed)\nmv packages/core/src/components/MyComponent/* packages/components/my-component/src/MyComponent/\n\n# 3. Copy config files from templates\ncp .cursor/templates/package-separation/package.json packages/components/my-component/\ncp .cursor/templates/package-separation/tsconfig.json packages/components/my-component/\ncp .cursor/templates/package-separation/rollup.config.mjs packages/components/my-component/\n# ... edit package.json to replace {{PACKAGE_NAME}} and {{COMPONENT_NAME}}\n\n# 4. Link workspace packages (creates symlinks automatically)\ncd <VIBE_ROOT>  # Root of the monorepo\nyarn install\n\n# 5. Build and test\ncd packages/components/my-component\nyarn build\n\ncd ../../core\nrm -rf .rpt2_cache\nyarn build\n```\n\n## Related Rules\n\n- See `naming-conventions.mdc` for component naming standards\n- See `file-structures.mdc` for component file organization\n- See `monorepo-structure.mdc` for overall monorepo architecture\n\n## References\n\nExisting separated packages to use as examples:\n\n- `packages/components/tooltip/` - Simple component with enums\n- `packages/components/dialog/` - Complex component with multiple enums\n- `packages/components/button/` - Simple component\n- `packages/components/icon/` - Component with special considerations\n"
  },
  {
    "path": ".cursor/rules/playground-reproduce.mdc",
    "content": "---\ndescription: Use when creating interactive examples for Vibe's Storybook Playground (vibe.monday.com/playground) - including bug reproductions, component demonstrations, feasibility testing, or consumer examples. Triggered by keywords like \"playground\", \"reproduce bug\", \"interactive example\", \"user reported an issue\" or \"demonstrate\".\nalwaysApply: false\n---\n\n# Playground Reproduce\n\n## Overview\n\nVibe supports a Playground in its Storybook, accessible at `vibe.monday.com/playground`.\n\nYour goal is to output a working playground code *directly in the chat* (do not write it to a file).\n\nBehind the scenes, this playground uses:\n\n- **CodeMirror** for the editor interface (via `storybook-addon-playground` addon)\n- **React Live** for rendering the code in real-time\n\n## When to Use the Playground\n\nThe Playground is for **one-time usage scenarios**:\n\n- Creating bug reproductions for issue reports\n- Testing component combinations and integrations\n- Validating if a feature is feasible with current or updated code\n- Demonstrating to consumers how to achieve specific behaviors\n- Helping consumers understand usage patterns\n\n**Important**: Playground examples are NOT for documentation or long-term storage. They are ephemeral demonstrations.\n\n## React Live Constraints\n\nReact Live has strict requirements for the code format:\n\n### ✅ MUST: Single Anonymous Component\n\nThe code MUST be wrapped in a single anonymous arrow function component:\n\n```javascript\n() => {\n  const [timesClicked, setTimesClicked] = useState(0);\n\n  function onButtonClick() {\n    setTimesClicked(prev => prev + 1);\n  }\n\n  return (\n    <Flex direction=\"column\" gap=\"medium\">\n      <Button onClick={onButtonClick}>\n        Clicked {timesClicked} time{timesClicked === 1 ? \"\" : \"s\"}\n      </Button>\n    </Flex>\n  );\n};\n```\n\n### ❌ CANNOT: Multiple Root Components\n\nReact Live cannot render multiple components at the root level. This will NOT work:\n\n```javascript\n// ❌ Bad - Multiple root components\nconst ComponentA = () => <div>A</div>;\nconst ComponentB = () => <div>B</div>;\n```\n\n### ✅ WORKAROUND: Define Components Inside\n\nFor multi-component bugs (e.g., re-render issues), define child components INSIDE the root anonymous component:\n\n```javascript\n() => {\n  const ChildComponent = ({ value }) => {\n    console.log(\"ChildComponent rendered\");\n    return <div>{value}</div>;\n  };\n\n  const AnotherComponent = () => {\n    return <Text>Another component</Text>;\n  };\n\n  return (\n    <Flex direction=\"column\" gap=\"small\">\n      <ChildComponent value=\"test\" />\n      <AnotherComponent />\n    </Flex>\n  );\n};\n```\n\n## Available Components\n\n### Default Components (Vibe 3.0 / Next)\n\nAll Vibe components are available by their standard names and default to the \"next\" versions:\n\n```javascript\n<Button />\n<Dropdown />\n<Modal />\n<TextField />\n```\n\n### Icons\n\nAccess all Vibe icons via the `VibeIcons` prefix:\n\n```javascript\n<VibeIcons.RemoveRound />\n<VibeIcons.Check />\n<VibeIcons.Close />\n```\n\n### Legacy Components (Vibe 2.0)\n\nTo use older versions of components, use the `VibeLegacy` prefix:\n\n```javascript\n<VibeLegacy.Modal />\n<VibeLegacy.Dropdown />\n```\n\n### React Hooks\n\nAll standard React hooks are available (`useState`, `useEffect`, `useCallback`, etc.).\n\n## Editor Tabs\n\nThe Playground has two tabs:\n\n### JSX Tab\n\nWrite your component code here using the anonymous component format.\n\n### CSS Tab\n\nWrite CSS styles here. Reference these styles in the JSX tab using `className`:\n\n```javascript\n// JSX tab\n() => {\n  return <div className=\"my-custom-class\">Styled content</div>;\n}\n\n// CSS tab\n.my-custom-class {\n  background: red;\n  padding: 16px;\n}\n```\n\n**Note**: CSS Modules are NOT supported. Use plain class names as strings.\n\n## Best Practices\n\n### Keep It Simple\n\nFocus ONLY on reproducing the specific issue. Don't add unrelated complexity.\n\n```javascript\n// ❌ Bad - Bug about Menu text, but adding unnecessary icons\n() => {\n  return (\n    <Menu>\n      <MenuItem icon={<VibeIcons.Check />}>Item with icon</MenuItem>\n      <MenuItem icon={<VibeIcons.Star />}>Another with icon</MenuItem>\n    </Menu>\n  );\n};\n\n// ✅ Good - Focus on the Menu text issue\n() => {\n  return (\n    <Menu>\n      <MenuItem>Simple menu item text</MenuItem>\n      <MenuItem>Another menu item</MenuItem>\n    </Menu>\n  );\n};\n```\n\n### Ask Questions\n\nBefore generating playground code, ask human:\n\n- What is the specific behavior they're trying to reproduce?\n- Which components are involved?\n- What should the expected vs. actual behavior be?\n- Are there any specific props or states that trigger the issue?\n- More related questions you think are worth asking.\n- Do not bug human with too many questions if you think you already understood most of the issue and what human wants.\n\n### Use JavaScript, Not TypeScript\n\nTypeScript types are valid code but add no value in the Playground. Keep code simple by using Javascript only.\n\n### Minimal Reproduction\n\nStrip away everything not essential to demonstrating the issue:\n\n```javascript\n// ❌ Too complex for a simple button bug\n() => {\n  const [state, setState] = useState({ count: 0, enabled: true, label: \"Click\" });\n  const handleClick = useCallback(() => {\n    setState(prev => ({ ...prev, count: prev.count + 1 }));\n  }, []);\n\n  return (\n    <Flex direction=\"column\" gap=\"large\" padding=\"large\">\n      <Heading>Button Test</Heading>\n      <Button onClick={handleClick}>\n        {state.label} {state.count}\n      </Button>\n    </Flex>\n  );\n};\n\n// ✅ Minimal reproduction\n() => {\n  return <Button>Test button label</Button>;\n};\n```\n\n## Accessing the Playground\n\nUsers can access the playground directly at: **vibe.monday.com/playground**\n\nOr navigate through Storybook UI to the \"Playground\" story.\n\nPress `D` on the keyboard to toggle the editor visibility in Storybook.\n"
  },
  {
    "path": ".cursor/rules/react-context.mdc",
    "content": "---\ndescription: \"This rule outlines the standard practices for creating, structuring, and utilizing React Context, primarily within the `packages/core/` components. It covers the recommended file structure (placing context files in a `context/` subdirectory), established naming conventions for context objects, provider components, and custom consumer hooks, as well as implementation best practices and common patterns to ensure consistency and maintainability. Use this rule when creating new React Contexts or when looking to understand how existing contexts are structured and used.\"\nglobs:\n  - packages/core/src/components/**/context/*Context.ts\n  - packages/core/src/components/**/context/*Context.tsx\nalwaysApply: false\n---\n\n# Context File Structure and Usage\n\nA typical context setup involves creating a dedicated file (e.g., `ComponentNameContext.ts` or `ComponentNameContext.tsx`) within the component's `context/` sub-directory. This file should:\n\n1. **Define Types**: Define interfaces for the context props/state and the provider component's props.\n2. **Create the Context**: Use `React.createContext` to initialize the context. Provide a sensible default value (often `undefined` initially, with proper typing) that matches the context props interface.\n3. **Create a Provider Component**: This component will wrap the parts of your application that need access to the context. It takes `children` and the `value` (or props to construct the value) to be provided. It's good practice to memoize the context value using `useMemo` if it's an object, to prevent unnecessary re-renders of consumers.\n4. **Create a Custom Consumer Hook**: A custom hook (e.g., `useComponentName`) should be exported to provide easy and type-safe access to the context value. This hook typically calls `useContext` and includes a check to ensure it's used within the corresponding Provider, throwing an error if not.\n\n**Example: `MyComponentContext.ts`**\n\n```typescript\nimport React, { createContext, useContext, useState, useMemo, ReactNode } from \"react\";\n\n// 1. Define the shape of your context data and Provider props\ninterface MyComponentContextProps {\n  someValue: string;\n  updateValue: (value: string) => void;\n  // Add other states or functions you want to share\n}\n\ninterface MyComponentProviderProps {\n  children: ReactNode;\n  initialValue?: string; // Example: if you want to pass initial state to provider\n}\n\n// 2. Create the context with a default value (often undefined, handle null case in hook)\nconst MyComponentContext = createContext<MyComponentContextProps | undefined>(undefined);\n\n// 3. Create the Provider component\nexport const MyComponentProvider = ({ children, initialValue = \"default\" }: MyComponentProviderProps) => {\n  const [someValue, setSomeValue] = useState<string>(initialValue);\n  const updateValue = useCallback(setSomeValue, []);\n\n  // Memoize the context value to prevent unnecessary re-renders\n  // This is crucial if the context value is an object or array\n  const contextValue = useMemo(\n    () => ({\n      someValue,\n      updateValue\n    }),\n    [someValue]\n  );\n\n  return <MyComponentContext.Provider value={contextValue}>{children}</MyComponentContext.Provider>;\n};\n\n// 4. Create the custom hook for consuming the context\nexport const useMyComponent = (): MyComponentContextProps => {\n  const context = useContext(MyComponentContext);\n  if (context === undefined) {\n    // This error message helps developers realize they've used the hook outside the provider\n    throw new Error(\"useMyComponent must be used within a MyComponentProvider\");\n  }\n  return context;\n};\n```\n\n**Using the Context in `MyComponent.tsx`:**\n\nThe Provider should wrap all components that need to access its context.\n\n```typescript\n// ... imports\n// Assuming your context file is in a 'context' subdirectory\nimport { MyComponentProvider, useMyComponent } from \"./context/MyComponentContext\";\n\n// Example of a child component that consumes the context\nconst DisplayValueComponent = () => {\n  const { someValue } = useMyComponent(); // Use the custom hook\n  return <p>The current context value is: {someValue}</p>;\n};\n\n// Example of a child component that updates the context\nconst UpdateValueComponent = () => {\n  const { updateValue } = useMyComponent();\n  return <button onClick={() => updateValue(\"new value \" + Math.random().toFixed(2))}>Update Value</button>;\n};\n\nconst MyComponent = forwardRef(({}: /* ...props... */ MyComponentProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  return (\n    // Wrap the part of the component tree that needs access to this context\n    // The Provider can be here or at a higher level in the tree if needed by other components.\n    <MyComponentProvider initialValue=\"hello from MyComponent\">\n      <div ref={ref} className={styles.myComponentBaseClass}>\n        {/* ... other component content ... */}\n        <DisplayValueComponent />\n        <UpdateValueComponent />\n        {/* <SubComponentNeedsContext /> */}\n      </div>\n    </MyComponentProvider>\n  );\n});\n\nexport default MyComponent;\n```\n"
  },
  {
    "path": ".cursor/rules/storybook-stories.mdc",
    "content": "---\ndescription: \"Guides the creation and modification of Storybook files specifically within the 'packages/docs' package. It covers conventions, best practices, and helps answer questions about existing story implementations within 'packages/core'.\"\nglobs:\n  - \"packages/docs/**/*.stories.tsx\"\n  - \"packages/docs/**/*.mdx\"\nalwaysApply: false\n---\n\n# Storybook Stories for @vibe/docs library\n\nThis document outlines the rules and best practices for creating and maintaining Storybook stories for the `@vibe/docs` library.\n\n## 1. File Structure and Naming Conventions\n\n- **Location:** Component stories are located in the `@vibe/docs` package, organized by component type in `packages/docs/src/pages/`.\n  - Example for components: `packages/docs/src/pages/components/ComponentName/`\n  - Example for hooks: `packages/docs/src/pages/hooks/hookName/`\n- **Story File:** The main story file **must** be named after the component, using PascalCase, followed by the `.stories.tsx` extension.\n  - Example: `packages/docs/src/pages/components/ComponentName/ComponentName.stories.tsx`\n- **MDX File:** An accompanying MDX documentation file **must** also be created in the same directory, named after the component.\n  - Example: `packages/docs/src/pages/components/ComponentName/ComponentName.mdx`\n\n## 2. `.stories.tsx` File Structure and Content\n\nAll `.stories.tsx` files **must** adhere to Component Story Format (CSF) 3.0 and utilize TypeScript strictly.\n\n### 2.1. Imports\n\n- Import `React`.\n- Import the Component itself.\n- Import `Meta` and `StoryObj` from `@storybook/react`.\n- Import any other necessary Vibe components or primitive types.\n- **DO NOT** import story-specific helper utilities from other files. If a simple helper is absolutely needed for a complex story setup, define it within the `.stories.tsx` file itself.\n\n### 2.2. Meta Configuration (Default Export)\n\nThe default export defines the component's metadata for Storybook.\n\n```typescript\nimport React from \"react\";\nimport { Meta, StoryObj } from \"@storybook/react\";\nimport { ComponentName } from \"@vibe/core\";\n// Import other Vibe components or types if needed for stories\n\nexport default {\n  title: \"Components/ComponentName\", // Or \"Components/ComponentGroup/ComponentName\" for grouped components\n  component: ComponentName\n  // args: { prop1: \"initialValueForControls\" }, // Optional: Define default args for controls panel here\n  // Decorators are defined in section 2.5\n  // subcomponents: { ComponentSubComponent, ComponentHeader } // etc. subcomponents can be listed here if applicable - only if needed\n} satisfies Meta<typeof ComponentName>;\n```\n\n- **`title`**: A string that determines the component's path in the Storybook navigation sidebar (e.g., \"Components/Button\", \"Components/Input/TextField\").\n- **`component`**: The component itself. This is used by Storybook for automatic documentation generation (props table) and linking stories.\n- **`satisfies Meta<typeof ComponentName>`**: This TypeScript construct ensures the meta object conforms to the expected shape for the component.\n\n### 2.3. Story Definition\n\nEach named export in the file represents a single story.\n\n```typescript\n// Define the `Story` type for convenience and strict typing at the top of the file, right before the default exported metadata\ntype Story = StoryObj<typeof ComponentName>;\n\nexport const Overview: Story = {\n  // All stories, including Overview, MUST have a render function.\n  // The Overview story's render function should pass the args from controls directly to the component\n  // to make it fully interactive with the Storybook Controls panel.\n  render: args => <ComponentName {...args} />\n  // DO NOT define story-specific args here. Props are set in the render function.\n};\n\nexport const ComplexExample: Story = {\n  // Props for this story are set directly within the render function.\n  render: () => (\n    <div>\n      {/* args from controls can be used if needed, or overridden/ignored */}\n      <ComponentName specificProp=\"fixedValueForThisStory\" anotherProp={anotherPropFromControls || \"default\"} />\n      {/* Other components or elements to showcase a specific scenario */}\n    </div>\n  )\n  // DO NOT define story-specific args.\n};\n```\n\n- **`type Story = StoryObj<typeof ComponentName>;`**: This type alias **must** be used for all story objects to ensure they are correctly typed against the component's props.\n- **Story Naming:** Story exports should be in PascalCase (e.g., `PrimaryButton`, `WithIcon`).\n- **NO `args` in individual stories:** Stories **must not** use the `args` property at the story level. All props for a story are defined and passed within its `render` function. The `Overview` story uses the `args` passed into its render function to be interactive.\n- **Always provide an `Overview` story.** This story should be the primary, most common use case of the component and **must** be interactive with the Storybook Controls panel (via its `render: (args) => <ComponentName {...args} />` implementation).\n\n### 2.4. Render Function\n\n- **All stories MUST define an explicit `render` function.** This ensures consistency and clarity in how components are presented.\n- **DO NOT USE `createComponentTemplate` or any other template/utility function for generating render functions.**\n- The `render` function receives an `args` object as its first parameter. This object is populated by Storybook based on the component's props and any default `args` defined in the meta configuration. The `args` object is to be used only by the `Overview` story.\n- **`Overview` Story Render:** The `Overview` story's `render` function **must** be `(args) => <ComponentName {...args} />` (or similar if simple wrapping is needed, or initial props required to start with) to ensure it directly reflects changes from the Storybook Controls panel.\n- **Other Stories Render:** For other stories that showcase specific states or compositions:\n  - They define their specific props directly when rendering the component within the `render` function.\n  - They can choose to use some of the `args` from the controls (e.g., for base styling or less critical props) or completely ignore/override them with hardcoded values to ensure the story accurately depicts the intended specific state.\n- Keep render functions as simple as possible, focusing on the component being storied.\n\n#### Prop Value Best Practices\n\nWhen writing stories, always use string literal prop values instead of static properties:\n\n```typescript\n// ✅ Preferred approach\nexport const PrimaryButton: Story = {\n  render: () => (\n    <Button kind=\"primary\" size=\"small\">\n      Click me\n    </Button>\n  )\n};\n\n// ❌ Avoid (legacy pattern)\nexport const PrimaryButton: Story = {\n  render: () => (\n    <Button kind={Button.kinds.PRIMARY} size={Button.sizes.SMALL}>\n      Click me\n    </Button>\n  )\n};\n```\n\nThis approach provides better IntelliSense, type safety, and follows modern Vibe conventions.\n\nExample of an `Overview` story's render function:\n\n```typescript\nexport const Overview: Story = {\n  render: args => <ComponentName {...args} />\n};\n```\n\nExample of a specific state story's render function:\n\n```typescript\nexport const DisabledState: Story = {\n  render: () => <ComponentName disabled label=\"Cannot proceed\" />\n};\n```\n\n### 2.5. Decorators\n\nDecorators are functions that wrap a story to provide additional context, styling, or behavior.\n\n- Define decorators as an array in the `decorators` property of the `default` meta export (for global decorators) or on individual story objects.\n- Each decorator is a function that takes the `Story` component (as a function) and the `context` object as arguments and **must render the `Story()` component**.\n- Use decorators to provide wrapping UI (e.g., a fixed width container) but ensure they do not obscure the story's core purpose or make it hard to understand the component's usage through its `render`.\n\nExample of a simple decorator:\n\n```typescript\n// In default export:\ndecorators: [\n  (Story) => (\n    <div style={{ margin: \"1em\", padding: \"1em\", border: \"1px dashed #ccc\" }}>\n      <Story />\n    </div>\n  ),\n  // Other decorators\n],\n```\n\n#### Applying Decorators to Specific Stories\n\nYou can also apply decorators to individual stories if they are only relevant to that specific case. This is done by adding a `decorators` array directly to the story object.\n\n**Example:**\n\nFirst, define your decorator function (this could be in the same file or imported if it's a shared, non-story-specific utility decorator that conforms to Storybook's decorator signature):\n\n```typescript\nimport { Decorator } from \"@storybook/react\";\n\nconst withGridDisplay: Decorator = Story => (\n  <div\n    style={{\n      display: \"grid\",\n      gridTemplateColumns: \"repeat(auto-fill, minmax(150px, 1fr))\", // Example grid styling\n      gap: \"20px\",\n      padding: \"20px\",\n      border: \"1px dashed lightgray\"\n    }}\n  >\n    <Story />\n  </div>\n);\n```\n\nThen, apply it to a specific story:\n\n```typescript\nexport const Sizes: Story = {\n  render: () => (\n    <>\n      <Label text=\"Regular Size Label\" />\n      <Label text=\"Small Size Label\" size=\"small\" />\n      {/* Add more Label instances to demonstrate different sizes */}\n    </>\n  ),\n  decorators: [withGridDisplay] // Decorator applied only to this 'Sizes' story\n};\n```\n\nThis approach allows for targeted enhancements or layouts for specific stories without affecting others. You would usually prefer a decorator for all the stories within a specific stories file.\n\n## 3. Styling in Stories\n\n- **Prefer inline styles:** For story-specific styling, use the `style` prop on elements within the story's `render` function or in decorators. This makes the styles immediately visible to users who copy the story code.\n\n  ```typescript\n  export const Highlighted: Story = {\n    render: () => (\n      <div style={{ backgroundColor: \"yellow\", padding: \"8px\" }}>\n        <ComponentName style={{ marginBottom: 4 }} disabled withAnimation />\n      </div>\n    ),\n    args: {\n      /* ... */\n    }\n  };\n  ```\n\n- **NO external CSS files (`.scss`, `.css`, `.module.scss`) for individual stories.** The goal is for story code to be self-contained and easily copyable.\n- **Exceptions for CSS files:**\n  1. If styling is for a **decorator** and helps provide a consistent story environment without being part of the component's direct example shown to user.\n  2. If a component **does not support the `style` prop** for the required modifications - and it is a must to add styling to it.\n  3. If very **complex or deep CSS modifications** are absolutely necessary that cannot be achieved with inline styles (e.g., targeting pseudo-elements of a child Vibe component for demonstration purposes).\n  - If an exception is made, the SCSS/CSS Module file should be placed in the `__stories__` directory alongside the `ComponentName.stories.tsx` file. It should ideally be named similarly to the story file or component it primarily affects, for example, `ComponentName.stories.module.scss` (if generally applicable to stories in that file and primarily for decorators).\n\n## 4. Story Content and Best Practices\n\n- **Self-Contained Examples:** Stories **must** be as self-contained as possible. Users should be able to copy the code from a story's `render` function (or the story definition if no render function) and have it work in their application with minimal changes (assuming Vibe components are installed and imported).\n- **NO external utility functions specific to stories:** Avoid referencing helper functions or helper components defined outside the story file (e.g., `TableAvatar` component or a `defineButtonGroup` util from an external helper). Even if a very simple helper is needed to reduce repetition for a complex story setup, define it a few times for each story within the `.stories.tsx` file. But always remember that you prefer not to use helpers at all, unless you must.\n- **Focus on one feature/state per story:** Each story should clearly demonstrate a specific aspect, prop, feature, or state of the component.\n- **Clarity over brevity (if complex):** While stories should be concise, ensure they are clear and easy to understand.\n- **Interactive states:** For components with interactive states (e.g., loading, success, disabled), provide stories that demonstrate these states, potentially using `useState` within the story's `render` function if necessary, or other React hooks.\n\n## 5. MDX Documentation (`ComponentName.mdx`)\n\nAn MDX file **must** accompany each `ComponentName.stories.tsx` file to provide rich, narrative documentation. It should be located at `packages/core/src/components/ComponentName/__stories__/ComponentName.mdx`.\n\n### 5.1. MDX File Structure Template\n\nThe following is a template for `ComponentName.mdx`:\n\n````mdx\nimport { Meta } from \"@storybook/blocks\";\nimport * as ComponentStories from \"./ComponentName.stories\"; // Import the stories\nimport { ComponentName } from \"@vibe/core\";\n\n<Meta of={ComponentStories} />\n\n# ComponentName\n\nBrief overview of the component, its purpose, and when to use it. This can be multi-line.\n\n## Import path\n\n```tsx\nimport { ComponentName } from \"@vibe/core\"; // Or the correct export path for the component\n```\n\n## Overview\n\n<Canvas of={ComponentStories.Overview} />\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Guideline 1: Describe a primary use case or when to use this component.\",\n    \"Guideline 2: Mention another important scenario or condition for its use.\",\n    \"Guideline 3: Add a specific 'do' or 'don't' related to its application.\",\n    \"...\"\n  ]}\n/>\n\n## Accessibility\n\n{/_\nInclude an Accessibility section when the component has significant accessibility features.\nUse the <UsageGuidelines /> component with accessibility-specific guidelines.\nFocus on ARIA attributes, keyboard navigation, focus management, and screen reader support.\nWrite guidelines as JSX elements when code examples are needed.\n_/}\n\n<UsageGuidelines\n  guidelines={[\n    // example for optional accessibility usage guidelines\n    <>\n      Provide an <code>id</code> for the component to enable proper accessibility associations and unique\n      identification.\n    </>,\n    <>\n      Always provide an accessible name using either <code>ariaLabel</code> or <code>aria-labelledby</code> props.\n    </>,\n    <>\n      Use <code>ariaLabel</code> prop when you need to provide a custom accessible name for the component.\n    </>,\n    <>\n      Use <code>aria-labelledby</code> prop when an external element provides the accessible name. Pass the{\" \"}\n      <code>id</code> of that external element.\n    </>\n    // Add more accessibility guidelines specific to the component\n  ]}\n/>\n\n## Variants\n\n{/_\nShowcase various important stories using <Canvas>.\nProvide a brief description for each use case.\nFocus on distinct functionalities or appearances.\n_/}\n\n### Specific Use Case 1 Title\n\n{/_ Description of this use case. _/}\n\n<Canvas of={ComponentStories.SpecificUseCaseStoryName} />\n\n### Specific Use Case 2 Title\n\n{/_ Description of this use case. _/}\n\n<Canvas of={ComponentStories.AnotherUseCaseStoryName} />\n\n## Do's and Don'ts\n\n{/*\n  ALWAYS use the <ComponentRules /> component for this section.\n  DO NOT import `ComponentRules`, as it is globally available, but do import any necessary assets (like images for visuals) at the top of the MDX file.\n  Each rule object within the `rules` array should have a `positive` and a `negative` aspect.\n  - For each aspect (`positive`/`negative`):\n    - The `component` prop is for the visual example (e.g., <img src={...} /> or a React component).\n    - If you do not have a visual for a specific 'do' or 'don't', use an example JSX element for the `component` (e.g., `<div>Do</div>`).\n    - The `description` prop (string) is mandatory and should clearly explain the point.\n*/}\n\n<ComponentRules\n  rules={[\n    {\n      componentContainerClassName: styles.largeComponentRule,\n      positive: {\n        component: (\n          // Example with a visual component. Replace with your actual component or img tag.\n          // <img src={exampleDoImage} alt=\"Visual example of what to do\" />\n        ),\n        description: \"Example Do: Clearly explain why this is a good practice. Be specific.\"\n      },\n      negative: {\n        component: (\n          // Example with an empty component when no visual is available.\n          <></>\n        ),\n        description: \"Example Don't: Clearly explain this pitfall or misuse. Be specific.\"\n      }\n    },\n    {\n      positive: {\n        component: (\n          // Another example\n          <></>\n        ),\n        description: \"Another Do: Focus on accessibility or a key integration point.\"\n      },\n      negative: {\n        component: (\n          // <img src={exampleDontImage} alt=\"Visual example of what not to do\" />\n        ),\n        description: \"Another Don't: Warn about potential issues or anti-patterns.\"\n      }\n    }\n  ]}\n/>\n````\n\n### 5.2. MDX Content Requirements\n\n- **Imports**:\n  - The following components are globally available in MDX and **must not** be imported explicitly: `Canvas`, `Controls`, `PropsTable`, `ComponentRules`, `UsageGuidelines`, `RelatedComponent`, `RelatedComponents`, `StorybookLink`. They are automatically provided by the Storybook setup.\n  - `import * as ComponentStories from \"./ComponentName.stories\";`: Import all stories from the corresponding `.stories.tsx` file.\n  - `import ComponentName from \"../ComponentName\";`: Import the component itself (adjust path as necessary). This is often implicitly used by `<Controls />` or `<PropsTable />` via `<Meta of={ComponentStories} />` if `ComponentStories.default.component` is set, but explicit import can be useful for clarity or direct use.\n- **`<Meta of={ComponentStories} />`**: Links the MDX file to the stories file. This is crucial for `<Controls />`, `<PropsTable />` and other features to correctly associate with the component and its stories.\n- **Main Title (`# ComponentName`)**: The component's name.\n- **Description**: A brief overview of the component. Use a simple string in the markdown.\n- **Import Path**: Show users how to import the component from `@vibe/core`.\n- **Overview Story**: **Must** display the `Overview` story from `ComponentName.stories.tsx` using `<Canvas of={ComponentStories.Overview}/>`. Add a brief contextual description.\n- **Props Table**: **Must include an interactive props table using `<PropsTable />`** (globally available). Storybook will generate this based on the component's props when linked via `<Meta of={ComponentStories} />`.\n- **Usage Section**: **Must** include a section titled \"Usage\" that utilizes the globally available `<UsageGuidelines />` component. This component takes a `guidelines` prop, which is an array of strings, as shown in the template.\n- **Accessibility Section**: **Should** include an \"Accessibility\" section immediately after the \"Usage\" section when the component has significant accessibility features (ARIA attributes, focus management, keyboard interaction, etc.). This section uses the same `<UsageGuidelines />` component format and focuses on accessibility best practices for the component.\n- **Variants**: Showcase other important stories using the globally available `<Canvas of={ComponentStories.StoryName} />` component. Each example should have a descriptive sub-heading (`###`) and a brief explanation of the use case.\n- **Do's and Don'ts**: This section **must** use the globally available `<ComponentRules />` component. Refer to the template in section 5.1 for the required structure. This involves providing a `rules` array, where each rule object has `positive` and `negative` aspects. Each aspect requires a `description` (string) and a `component` (JSX element). If a visual example for the `component` is not available, use an empty JSX element (e.g., `<></>`) or a simple textual placeholder (e.g., `<div>Do this</div>`).\n\n  - This section is crucial for communicating best practices to **designers and product managers**, not just developers. When writing the descriptions, follow these principles:\n\n    - **Focus on the Why, Not the How:** Explain the user experience principle or design best practice. Avoid implementation details.\n    - **Speak in Plain Language:** Use clear, non-technical language. Avoid jargon and prop names.\n    - **Be Specific and Actionable:** Provide clear, actionable advice that a designer can use when creating mockups or specifications.\n\n    **Bad Example (Developer-Focused):**\n\n    > \"Use the `infoText` prop to add helpful context.\"\n\n    **Good Example (Designer-Focused):**\n\n    > \"Provide supplementary helper text to guide the user on the expected input and its format.\"\n\nBy following these rules, we can ensure that the Storybook for `@vibe/core` is consistent, maintainable, and provides maximum value to its consumers.\n"
  },
  {
    "path": ".cursor/rules/styling-conventions.mdc",
    "content": "---\ndescription: \"Provides comprehensive guidelines for writing CSS Modules specifically for UI components within the `@vibe/core` library (under `packages/core/src/components/`). This rule covers file naming conventions (e.g., `ComponentName.module.scss`), CSS nesting, mandatory browser compatibility, strategies for adopting newer CSS APIs with fallbacks, the exclusive use of design tokens from `@vibe/style` (via CSS custom properties like `var(--primary-text-color)`), discouraging mixin usage from `@vibe/style`, typography best practices (using `Text`/`Heading` components instead of direct font tokens), `camelCase` class naming, and common anti-patterns like avoiding theme-specific styles directly in component SCSS, never using `:global`, and never using `!important`. Activate this rule when working with `.module.scss` files in `packages/core/src/components/` or when styling Vibe core components.\"\nglobs:\n  - \"packages/core/src/components/**/*.module.scss\"\nalwaysApply: false\n---\n\n# Styling Conventions for @vibe/core\n\nThis document outlines the rules and best practices for writing styles using SCSS Modules within the `@vibe/core` library (components located in `packages/core/src/components/`).\n\n## 1. SCSS Modules Exclusivity\n\n- **Only SCSS Modules:** All component-specific styling **must** be done using SCSS Modules. Do not use global CSS files (`.css`) or plain SCSS files (`.scss`) for component styles.\n- **File Naming Convention:** SCSS Module files **must** be named after the component they style, using PascalCase, followed by the `.module.scss` extension.\n  - Example: For a component named `MyComponent`, the style file will be `MyComponent.module.scss`.\n  - This file should be co-located with its respective component (e.g., `packages/core/src/components/MyComponent/MyComponent.module.scss`).\n\n## 2. CSS Best Practices & Browser Support\n\n- **Nested CSS:** Prefer using nested CSS selectors for better readability and to scope styles effectively under the parent component class.\n\n  - Example:\n\n    ```scss\n    .myComponent {\n      // styles for the component root\n      .childElement {\n        // styles for a child\n      }\n\n      &.modifierClass {\n        // styles for a modified state\n      }\n    }\n    ```\n\n- **Always Use Logical CSS Properties:** Use logical CSS properties instead of physical properties to ensure proper RTL support and internationalization. Logical properties are direction-agnostic and automatically adapt to different writing modes.\n\n- **Chrome 85+ Compatibility:** All styling **must** be compatible with Chrome version 85 and newer. Avoid using CSS features not supported by this baseline.\n- **Handling Newer CSS APIs:**\n\n  - If a modern CSS API (not supported in Chrome 85) offers a simpler or more efficient way to achieve a style, you may propose a dual implementation.\n  - The goal is to provide the modern styling for newer browsers while ensuring an equivalent fallback for older browsers (like Chrome 85).\n  - **The visual appearance must remain consistent across all supported browsers.**\n  - Clearly comment such implementations, indicating the modern API and the fallback.\n  - Example:\n\n    ```scss\n    .myElement {\n      // Fallback for older browsers\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      // Modern API for newer browsers\n      @supports (display: grid) {\n        display: grid;\n        grid-template-rows: auto 1fr auto; // Example modern styling\n      }\n    }\n    ```\n\n## 3. Design Tokens\n\n- **Utilize Design Tokens:** Always prefer design tokens over hardcoded values (e.g., pixel values for spacing, specific hex codes for colors).\n- **Source of Tokens:** Design tokens are provided by the `@vibe/style` package, located in the `packages/style` directory. The available tokens are defined as CSS custom properties within the theme classes (e.g., `.default-app-theme`, `.dark-app-theme`, `.black-app-theme`) in the `packages/style/dist/index.css` file. This file serves as the source of truth for all available tokens.\n  - Tokens are typically used as CSS custom properties: `var(--token-name)`.\n  - Example: `color: var(--primary-text-color);`, `margin-bottom: var(--space-8);`\n- **Semantic Usage:** Use tokens semantically. For instance, use a background color token for backgrounds, a text color token for text, and spacing tokens for margins/paddings, according to their intended purpose.\n- **Pixel Units for Non-Token Values:** When a design token is not available or suitable for a specific dimension (e.g., a unique border width, a specific icon size not covered by spacing tokens), always use pixel (`px`) units. Do not use `em`, `rem`, percentages, or other relative units for these cases unless explicitly part of a design token's definition or a well-justified, specific requirement.\n- **Prefer New Spacing System:** For layout spacing (margins, paddings, gaps, etc.), prioritize the new numeric spacing tokens (e.g., `var(--space-2)`, `var(--space-4)`, `var(--space-8)`). These should be used instead of the legacy named spacing tokens (e.g., `var(--spacing-xs)`, `var(--spacing-small)`, `var(--spacing-medium)`). Strive to use the new system in all new code or in any css code you're asked to refactor.\n\n## 4. Mixins from `@vibe/style`\n\n- **Discourage Use of Mixins:** While some existing components might use mixins imported from `@vibe/style` (e.g., `@import \"~@vibe/style/dist/mixins\";` and usages like `@include focus-style();`), the preference is to **avoid using these mixins for new development or when refactoring existing components.**\n\n## 5. Typography\n\n- **Use Vibe Components for Typography:** Do not directly use font family, font size, font weight, or line height tokens from `@vibe/style` within your `.module.scss` files.\n- Instead, leverage the `Text` and `Heading` components from `@vibe/core` (`packages/core/src/components/Typography/Text` and `packages/core/src/components/Typography/Heading`). These components are already configured to apply the correct typography design tokens according to supplied props.\n\n## 6. Class Naming Conventions\n\n- **camelCase for Classes:** Class names defined within SCSS Modules **must** use camelCase.\n  - Example: `.myButton`, `.tabActiveState`, `.loaderWrapper`.\n- **Clarity and Specificity:** Choose class names that are descriptive and clearly indicate the element's purpose or state. While SCSS Modules scope classes locally, clear naming aids in understanding the component's internal structure.\n\n## 7. Anti-Patterns and Considerations\n\n- **No Theme-Specific Styles in Component SCSS:** Avoid embedding theme-specific rules (e.g., using `:global(.dark-app-theme) &`) directly within a component's `.module.scss` file. This is considered an anti-pattern as components should be theme-agnostic by default, adapting to themes via design tokens.\n- **Never Use :global:** The use of `:global()` in SCSS Modules is strictly prohibited. SCSS Modules are designed to provide scoped styles, and using `:global()` defeats this purpose and can lead to unintended side effects and style conflicts.\n- **Never Use !important:** The use of `!important` in CSS is strictly prohibited. Instead of using `!important`, resolve specificity issues other way.\n- **ALWAYS Use className Prop for Components:** When styling internal reusable components/base components, always use their `className` prop instead of targeting them in the scss file with other selectors such as `[data-vibe]`, element selectors like `button`, or other attribute selectors. This maintains clear component boundaries and prevents unintended styling conflicts.\n- **Responsiveness:** Do not implement responsive styles (e.g., using media queries, container queries) unless explicitly requested by the user or task.\n- **Focus on Maintainability:** Write styles that are maintainable. Avoid overly specific selectors that might break easily with small markup changes.\n"
  },
  {
    "path": ".cursor/templates/package-separation/QUICK_REFERENCE.md",
    "content": "# Package Separation Quick Reference\n\n## For AI: Prompt to Use\n\n```\n@.cursor/rules/package-separation.mdc Separate the [ComponentName] component into @vibe/[package-name]\n```\n\n## Full Example: Separating Badge Component\n\n### 1. Inspect the Component\n\n```bash\n# Check what files exist\nls -la packages/core/src/components/Badge/\n\n# Check for enums\ncat packages/core/src/components/Badge/BadgeConstants.ts\n\n# Check dependencies (look at imports)\nhead -20 packages/core/src/components/Badge/Badge.tsx\n```\n\n**Found:**\n- Component: `Badge.tsx`\n- Types: `Badge.types.ts`\n- Constants: `BadgeConstants.ts` (has `BadgeColor`, `BadgeSize` enums)\n- Styles: `Badge.module.scss`\n- Tests: `__tests__/`\n\n### 2. Create Package Structure\n\n```bash\n# Set variables\nCOMPONENT=\"Badge\"\nPACKAGE=\"badge\"\n\n# Create directories\nmkdir -p packages/components/$PACKAGE/src/$COMPONENT\nmkdir -p packages/components/$PACKAGE/src/types\n\n# Copy templates\ncd packages/components/$PACKAGE\ncp ../../../.cursor/templates/package-separation/package.json .\ncp ../../../.cursor/templates/package-separation/tsconfig.json .\ncp ../../../.cursor/templates/package-separation/rollup.config.mjs .\ncp ../../../.cursor/templates/package-separation/vitest.config.mjs .\ncp ../../../.cursor/templates/package-separation/vitest.setup.mjs .\ncp ../../../.cursor/templates/package-separation/files.d.ts src/types/\n```\n\n### 3. Update package.json\n\nReplace placeholders:\n- `{{PACKAGE_NAME}}` → `badge`\n- `{{ComponentName}}` → `Badge`\n\nAdd dependencies (based on imports found):\n```json\n{\n  \"dependencies\": {\n    \"@vibe/shared\": \"3.0.8\",\n    \"@vibe/icon\": \"3.0.9\",\n    \"classnames\": \"^2.5.1\",\n    \"es-toolkit\": \"^1.39.10\"\n  }\n}\n```\n\n### 4. Move Component Files\n\n```bash\ncd packages/core/src/components/Badge\nmv * ../../../../components/badge/src/Badge/\n# (keep the directory, we'll delete it later)\n```\n\n### 5. Create src/Badge/index.ts\n\nUsing `subdirectory-index.ts` template:\n\n```typescript\nexport { default as Badge, type BadgeProps } from \"./Badge\";\nexport {\n  BadgeColor as BadgeColorEnum,\n  BadgeSize as BadgeSizeEnum\n} from \"./BadgeConstants\";\nexport * from \"./Badge.types\";\n```\n\n### 6. Create src/index.ts\n\nUsing `main-index.ts` template:\n\n```typescript\nexport * from \"./Badge\";\n```\n\n### 7. Update Core Package\n\n#### packages/core/package.json\nAdd dependency:\n```json\n{\n  \"dependencies\": {\n    \"@vibe/badge\": \"3.0.0\"\n  }\n}\n```\n\n#### packages/core/src/components/index.ts\nReplace the line `export * from \"./Badge\";` with:\n```typescript\n// TODO: export * after removing enums\nexport {\n  Badge,\n  type BadgeProps,\n  type BadgeColor,\n  type BadgeSize\n} from \"@vibe/badge\";\n```\n\n### 8. Find and Update All Imports\n\n```bash\n# Find all files importing Badge\ngrep -r \"from.*Badge\" packages/core/src/components/\n\n# Update imports:\n# Before: import Badge from \"../Badge/Badge\";\n# After:  import { Badge } from \"@vibe/badge\";\n\n# Before: import { BadgeColor as BadgeColorEnum } from \"../Badge/BadgeConstants\";\n# After:  import { BadgeColorEnum } from \"@vibe/badge\";\n```\n\n### 9. Link Workspace Packages\n\n```bash\n# Run at root - Yarn Workspaces creates symlinks automatically\ncd <VIBE_ROOT>  # Root of the monorepo\nyarn install\n```\n\nThis creates: `node_modules/@vibe/badge -> ../../packages/components/badge`\n\n### 10. Build\n\n```bash\n# Build badge package\ncd packages/components/badge\nyarn build\n\n# Build core package\ncd ../../../packages/core\nrm -rf .rpt2_cache\nyarn build\n```\n\n### 11. Verify\n\n```bash\n# Check no errors related to Badge\nyarn build 2>&1 | grep -i badge\n\n# Check tests still pass\nyarn test Badge\n```\n\n## Common Commands\n\n### Check what enums a component has\n```bash\ngrep \"export enum\" packages/core/src/components/[ComponentName]/[ComponentName]Constants.ts\n```\n\n### Check dependencies\n```bash\ngrep \"^import.*from\" packages/core/src/components/[ComponentName]/[ComponentName].tsx | grep \"@vibe\"\n```\n\n### Find all imports to update\n```bash\ngrep -r \"from.*[ComponentName]\" packages/core/src/ --include=\"*.tsx\" --include=\"*.ts\"\n```\n\n### Verify symlink (should be created automatically by yarn install)\n```bash\nls -la node_modules/@vibe/[package-name]\n# Should show: lrwxr-xr-x ... [package-name] -> ../../packages/components/[package-name]\n```\n\n### Check build output\n```bash\ncat packages/components/[package-name]/dist/index.d.ts\n```\n\n## Validation Checklist\n\nAfter separation, verify:\n\n- [ ] Package builds successfully (`yarn build` in package dir)\n- [ ] Core builds successfully (`yarn build` in core dir)\n- [ ] No TypeScript errors mentioning the component\n- [ ] Tests pass\n- [ ] Ran `yarn install` at root (creates symlinks)\n- [ ] Symlink exists in `node_modules/@vibe/`\n- [ ] Component exports correctly (check `dist/index.d.ts`)\n- [ ] Enums have \"Enum\" suffix in exports\n- [ ] Consumer code imports enums directly (no renaming)\n- [ ] Core package explicitly exports types (not enums)\n- [ ] Stories/docs still work (if applicable)\n\n## Rollback\n\nIf something goes wrong:\n\n```bash\n# Move files back\nmv packages/components/[package-name]/src/[ComponentName]/* \\\n   packages/core/src/components/[ComponentName]/\n\n# Remove package directory\nrm -rf packages/components/[package-name]\n\n# Revert changes to core package\ngit checkout packages/core/package.json\ngit checkout packages/core/src/components/index.ts\n\n# Revert import changes\ngit checkout packages/core/src/components/\n```\n\n"
  },
  {
    "path": ".cursor/templates/package-separation/README.md",
    "content": "# Package Separation Templates\n\nThese templates are used when separating a component from `@vibe/core` into its own package.\n\n## Template Files\n\n### Configuration Files (Copy as-is, then replace placeholders)\n\n- **package.json** - Package configuration\n- **tsconfig.json** - TypeScript configuration\n- **rollup.config.mjs** - Build configuration\n- **vitest.config.mjs** - Test runner configuration\n- **vitest.setup.mjs** - Test setup\n- **files.d.ts** - Module type declarations\n\n### Code Templates (Use as reference, replace placeholders)\n\n- **subdirectory-index.ts** - Component subdirectory export pattern\n- **main-index.ts** - Main package export pattern\n\n## Placeholders to Replace\n\n| Placeholder | Example | Description |\n|------------|---------|-------------|\n| `{{PACKAGE_NAME}}` | `badge` | Kebab-case package name |\n| `{{ComponentName}}` | `Badge` | PascalCase component name |\n| `{{EnumName1}}` | `BadgeColor` | First enum name (if exists) |\n| `{{EnumName2}}` | `BadgeSize` | Second enum name (if exists) |\n\n## Quick Start\n\n### For AI Assistants\n\nWhen separating a component named \"Badge\":\n\n```typescript\n// 1. Gather info\nconst componentName = \"Badge\";      // PascalCase\nconst packageName = \"badge\";        // kebab-case\nconst enums = [\"BadgeColor\", \"BadgeSize\"];  // if component has enums\n\n// 2. Create directories\npackages/components/badge/\n  src/\n    Badge/\n      Badge.tsx\n      Badge.types.ts\n      BadgeConstants.ts  // if has enums\n      Badge.module.scss\n      __tests__/\n      index.ts  ← use subdirectory-index.ts template\n    types/\n      files.d.ts  ← copy from template\n    index.ts  ← use main-index.ts template\n  package.json  ← copy and replace placeholders\n  tsconfig.json  ← copy as-is\n  rollup.config.mjs  ← copy as-is\n  vitest.config.mjs  ← copy as-is\n  vitest.setup.mjs  ← copy as-is\n\n// 3. Replace in subdirectory-index.ts:\n{{ComponentName}} → Badge\n{{EnumName1}} → BadgeColor\n{{EnumName2}} → BadgeSize\n\n// 4. Replace in main-index.ts:\n{{ComponentName}} → Badge\n\n// 5. Replace in package.json:\n{{PACKAGE_NAME}} → badge\n{{ComponentName}} → Badge\n```\n\n### For Developers\n\n```bash\n# 1. Create structure\nCOMPONENT_NAME=\"Badge\"\nPACKAGE_NAME=\"badge\"\n\nmkdir -p packages/components/$PACKAGE_NAME/src/$COMPONENT_NAME\nmkdir -p packages/components/$PACKAGE_NAME/src/types\n\n# 2. Copy templates\ncp .cursor/templates/package-separation/{package.json,tsconfig.json,rollup.config.mjs,vitest.config.mjs,vitest.setup.mjs} \\\n   packages/components/$PACKAGE_NAME/\n\ncp .cursor/templates/package-separation/files.d.ts \\\n   packages/components/$PACKAGE_NAME/src/types/\n\n# 3. Replace placeholders (macOS)\nsed -i '' \"s/{{PACKAGE_NAME}}/$PACKAGE_NAME/g\" packages/components/$PACKAGE_NAME/package.json\nsed -i '' \"s/{{ComponentName}}/$COMPONENT_NAME/g\" packages/components/$PACKAGE_NAME/package.json\n\n# 4. Move component files\nmv packages/core/src/components/$COMPONENT_NAME/* \\\n   packages/components/$PACKAGE_NAME/src/$COMPONENT_NAME/\n\n# 5. Link workspace packages\ncd <VIBE_ROOT>  # Root of the monorepo\nyarn install\n\n# 6. Continue with rule file instructions...\n```\n\n## Dependencies to Add\n\nCommon dependencies to add to `package.json`:\n\n```json\n{\n  \"dependencies\": {\n    \"@vibe/shared\": \"3.0.8\",         // Almost always needed\n    \"@vibe/icon\": \"3.0.x\",            // If component uses icons\n    \"@vibe/dialog\": \"3.0.x\",          // If uses Dialog/Popover\n    \"@vibe/layout\": \"3.0.x\",          // If uses Box/Flex\n    \"classnames\": \"^2.5.1\",           // Usually needed\n    \"es-toolkit\": \"^1.39.10\"          // For utilities\n  }\n}\n```\n\nCheck the component's imports to determine which dependencies are needed.\n\n## Reference Examples\n\nReal packages to reference:\n- **Simple component:** `packages/components/button/`\n- **Component with enums:** `packages/components/tooltip/`\n- **Complex component:** `packages/components/dialog/`\n\n## Common Issues\n\n### Issue: TypeScript can't find the package\n\n**Solution:**\n```bash\n# Run yarn install at root - Yarn Workspaces creates symlinks automatically\ncd <VIBE_ROOT>  # Root of the monorepo\nyarn install\n```\n\nThis automatically creates symlinks for all packages in `packages/components/*`. You should see:\n```\nnode_modules/@vibe/[package-name] -> ../../packages/components/[package-name]\n```\n\n**Note:** Manual symlink creation with `ln -s` is NOT needed - Yarn Workspaces handles this automatically.\n\n### Issue: Build fails with enum errors\n\n**Solution:** Check that:\n1. Subdirectory `index.ts` exports enums with \"Enum\" suffix\n2. Consumer code imports enums directly (not renaming them)\n3. Types and enums don't have conflicting names\n\n### Issue: Component import fails\n\n**Solution:** Make sure component is exported as **named export**, not default:\n```typescript\n// ✅ Correct\nexport { default as Component, ... } from \"./Component\";\n\n// ❌ Wrong\nexport { default } from \"./Component\";\n```\n\n## See Also\n\n- Main guide: `.cursor/rules/package-separation.mdc`\n- Monorepo structure: `.cursor/rules/monorepo-structure.mdc`\n- Naming conventions: `.cursor/rules/naming-conventions.mdc`\n\n"
  },
  {
    "path": ".cursor/templates/package-separation/files.d.ts",
    "content": "// SCSS\ndeclare module \"*.module.scss\" {\n  const classes: { [key: string]: string };\n  export default classes;\n}\n\n// SVG\ndeclare module \"*.svg\" {\n  const content: string;\n  export default content;\n}\n\ndeclare module \"*.png\";\ndeclare module \"*.mp4\";\ndeclare module \"*.pdf\";\n"
  },
  {
    "path": ".cursor/templates/package-separation/main-index.ts",
    "content": "// Template for src/index.ts\n// This file simply re-exports everything from the component subdirectory\n\nexport * from \"./{{ComponentName}}\";\n\n"
  },
  {
    "path": ".cursor/templates/package-separation/package.json",
    "content": "{\n  \"name\": \"@vibe/{{PACKAGE_NAME}}\",\n  \"version\": \"3.0.0\",\n  \"description\": \"Vibe sub-package for {{COMPONENT_NAME}} component\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/mondaycom/vibe.git\",\n    \"directory\": \"packages/components/{{PACKAGE_NAME}}\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/mondaycom/vibe/issues\"\n  },\n  \"homepage\": \"https://github.com/mondaycom/vibe#readme\",\n  \"author\": \"monday.com\",\n  \"license\": \"MIT\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.js\",\n  \"types\": \"dist/index.d.ts\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \".\": {\n      \"types\": \"./dist/index.d.ts\",\n      \"import\": \"./dist/index.js\",\n      \"default\": \"./dist/index.js\"\n    },\n    \"./mockedClassNames\": {\n      \"import\": \"./dist/mocked_classnames/index.js\",\n      \"default\": \"./dist/mocked_classnames/index.js\"\n    }\n  },\n  \"scripts\": {\n    \"build\": \"rollup -c && mock_classnames=on rollup -c\",\n    \"test\": \"vitest run\",\n    \"lint\": \"eslint \\\"./src/**/*.{js,jsx,ts,tsx}\\\"\"\n  },\n  \"dependencies\": {\n    \"@vibe/shared\": \"3.0.8\",\n    \"classnames\": \"^2.5.1\",\n    \"es-toolkit\": \"^1.39.10\"\n  },\n  \"devDependencies\": {\n    \"@testing-library/react\": \"^12.1.2\",\n    \"@vibe/config\": \"3.0.5\",\n    \"@vibe/icons\": \"1.15.0\",\n    \"react\": \"^16.13.0\",\n    \"react-dom\": \"^16.13.0\",\n    \"react-test-renderer\": \"16\",\n    \"typescript\": \"^5.9.3\",\n    \"vitest\": \"^1.6.0\"\n  },\n  \"peerDependencies\": {\n    \"react\": \">=16.9.0\",\n    \"react-dom\": \">=16.9.0\"\n  },\n  \"sideEffects\": [\n    \"*.scss\",\n    \"*.css\",\n    \"*.scss.js\",\n    \"*.css.js\"\n  ],\n  \"eslintConfig\": {\n    \"extends\": [\n      \"../../../node_modules/@vibe/config/.eslintrc.cjs\"\n    ]\n  }\n}\n"
  },
  {
    "path": ".cursor/templates/package-separation/rollup.config.mjs",
    "content": "import config from \"@vibe/config/rollup.config\";\n\nexport default config;\n"
  },
  {
    "path": ".cursor/templates/package-separation/subdirectory-index.ts",
    "content": "// Template for src/{{ComponentName}}/index.ts\n// Replace {{ComponentName}}, {{EnumName1}}, {{EnumName2}}, etc. with actual names\n\nexport { default as {{ComponentName}}, type {{ComponentName}}Props } from \"./{{ComponentName}}\";\n\n// If component has deprecated enums, export them with \"Enum\" suffix\n// Example: TooltipPositions -> TooltipPositionsEnum\nexport {\n  {{EnumName1}} as {{EnumName1}}Enum,\n  {{EnumName2}} as {{EnumName2}}Enum\n} from \"./{{ComponentName}}Constants\";\n\n// Export all types (string unions)\nexport * from \"./{{ComponentName}}.types\";\n\n"
  },
  {
    "path": ".cursor/templates/package-separation/tsconfig.json",
    "content": "{\n  \"extends\": \"@vibe/config/tsconfig\",\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"rootDir\": \"src\"\n  },\n  \"include\": [\"src/**/*\"]\n}\n"
  },
  {
    "path": ".cursor/templates/package-separation/vitest.config.mjs",
    "content": "import config from \"@vibe/config/vitest.config\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n  ...config\n});\n"
  },
  {
    "path": ".cursor/templates/package-separation/vitest.setup.mjs",
    "content": "import { vi } from \"vitest\";\nimport \"@testing-library/jest-dom\";\nimport React from \"react\";\n\n// Mock ResizeObserver\nclass ResizeObserver {\n  observe() {}\n  unobserve() {}\n  disconnect() {}\n}\nglobal.ResizeObserver = ResizeObserver;\n\n// Mock react-inlinesvg\nvi.mock(\"react-inlinesvg\", () => ({\n  default: ({ src, ...props }) =>\n    React.createElement(\"div\", {\n      \"data-testid\": \"mock-svg\",\n      \"data-src\": src,\n      ...props\n    })\n}));\n"
  },
  {
    "path": ".github/CODEOWNERS",
    "content": "# Default codeowners for all files\n* @mondaycom/vibe\n\n# Testkit package - testing utilities and Playwright configuration\npackages/testkit/ @hanan-monday\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/bug_report.yml",
    "content": "name: \"\\U0001F41E Bug report\"\ndescription: Create a bug report\ntitle: \"[Bug]: \"\nlabels: [\"bug\"]\nbody:\n  - type: markdown\n    attributes:\n      value: |\n        **Before You Start...**\n\n        Thank you for taking the time to report a bug!\n        Please make sure to fill as much details as possible to help us better understand the bug.\n        If you have a question, suggestion, feature request, or need for help, please ask on [GitHub Discussions](https://github.com/mondaycom/vibe/discussions).\n        Thanks!\n  - type: input\n    id: version\n    attributes:\n      label: Vibe version\n      placeholder: e.g. 2.84.0\n    validations:\n      required: true\n  - type: textarea\n    id: description\n    attributes:\n      label: Describe the bug\n      description: A clear and concise description of what the bug is\n    validations:\n      required: true\n  - type: textarea\n    id: expected-behavior\n    attributes:\n      label: Expected behavior\n      description: A clear description of what you expect to happen\n    validations:\n      required: true\n  - type: textarea\n    id: steps-to-reproduce\n    attributes:\n      label: Steps to reproduce\n      placeholder: |\n        e.g. \n        1. Go to '...'\n        2. Click on '....'\n        3. Scroll down to '....'\n        4. See '....'\n    validations:\n      required: true\n  - type: input\n    id: reproduction-example-link\n    attributes:\n      label: Reproduction example link\n      description: |\n        Please provide a simple minimal example that reproduces the bug. Use this [StackBlitz](https://stackblitz.com/edit/vibe-bug-report) or anything similar\n  - type: textarea\n    id: system-info\n    attributes:\n      label: System Info\n      description: Please run and copy the output of `npx envinfo --system --npmPackages monday-ui-react-core,@vibe/core,react --binaries --browsers`\n      render: shell\n      placeholder: Operating System, Browsers, React version\n  - type: textarea\n    id: additional-context\n    attributes:\n      label: Additional context, Screenshots\n      description: Add any other context. If applicable, add screenshots or a video to further explain the bug\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/config.yml",
    "content": "blank_issues_enabled: false\ncontact_links:\n  - name: Feature Request\n    url: https://github.com/mondaycom/vibe/discussions\n    about: Suggest new features\n  - name: Questions & Discussions\n    url: https://github.com/mondaycom/vibe/discussions\n    about: Use GitHub discussions for questions and suggestions\n"
  },
  {
    "path": ".github/PULL_REQUEST_TEMPLATE.md",
    "content": "<!-- Thank you for contributing!\nBefore we can review your submission, please fill the information below:\n\nPlease describe the changes you're making. Include the motivation for these changes, any additional context, and the impact on the project. If your changes are related to any open issues, please link to them here. -->\n\n- [ ] I have read the [Contribution Guide](../CONTRIBUTING.md) for this project.\n\n<!-- Please add the issue number that this PR closes: -->\n\nResolves #\n"
  },
  {
    "path": ".github/actions/check-changed-packages/action.yml",
    "content": "name: Check Changed Packages\ndescription: Check if there are any changed packages in the monorepo\n\ninputs:\n  exit_on_no_changes:\n    description: Whether to exit with a non-zero code if there are no changes.\n    required: false\n    default: \"false\"\noutputs:\n  has_changes:\n    description: Whether there are any changes in the monorepo.\n    value: ${{ steps.check-changed-packages.outputs.has_changes }}\n\nruns:\n  using: \"composite\"\n  steps:\n    - id: determine-since-flag\n      uses: ./.github/actions/determine-lerna-since-flag\n    - id: check-changed-packages\n      shell: bash\n      env:\n        SINCE_FLAG: ${{ steps.determine-since-flag.outputs.since_flag }}\n      run: |\n        changed_packages=$(yarn -s lerna ls $SINCE_FLAG --json --loglevel=error)\n\n        if [[ $changed_packages = \"[]\" ]]; then\n          echo \"has_changes=false\" >> $GITHUB_OUTPUT\n          echo \"No packages to process as Lerna didn't detect any changes.\"\n          if [[ \"${{ inputs.exit_on_no_changes }}\" == \"true\" ]]; then\n            exit 1\n          else\n            echo \"Continuing because exit_on_no_changes is not used.\"\n          fi\n        else\n          echo \"has_changes=true\" >> $GITHUB_OUTPUT\n          echo \"Change detected:\"\n          echo \"$changed_packages\"\n        fi\n"
  },
  {
    "path": ".github/actions/determine-lerna-since-flag/action.yml",
    "content": "name: Determine Lerna since flag\ndescription: Determine the --since flag value for Lerna commands based on the branch. Should be used for workflows/actions that can be used on both default branch and other branches.\n\noutputs:\n  since_flag:\n    description: The --since flag value to use with Lerna commands.\n    value: ${{ steps.get-since-flag.outputs.since_flag }}\n\nruns:\n  using: \"composite\"\n  steps:\n    - id: get-since-flag\n      shell: bash\n      run: |\n        if [[ \"$GITHUB_REF\" == \"refs/heads/master\" ]]; then\n          since_flag=\"--since\"\n          echo \"Running on master branch, checking for all changes.\"\n        else\n          since_flag=\"--since=origin/master...HEAD\"\n          echo \"Not running on master branch, checking for changes since origin/master.\"\n        fi\n\n        echo \"since_flag=$since_flag\" >> $GITHUB_OUTPUT\n"
  },
  {
    "path": ".github/actions/download-builds/action.yml",
    "content": "name: Download and Extract Build Artifacts\ndescription: Download build artifacts for all the packages and extract them to the correct location\n\nruns:\n  using: \"composite\"\n  steps:\n    - name: Download and Extract\n      uses: actions/download-artifact@v4\n      with:\n        name: ci-builds-${{ github.run_id }}-${{ github.run_attempt }}\n"
  },
  {
    "path": ".github/actions/git-creds/action.yml",
    "content": "name: \"Git credentials setup\"\ndescription: \"Set up git credentials\"\n\nruns:\n  using: \"composite\"\n  steps:\n    - name: Set up git credentials\n      shell: bash\n      run: |\n        git config --global user.name 'vibe-bot'\n        git config --global user.email 'vibe@monday.com'\n"
  },
  {
    "path": ".github/actions/setup/action.yml",
    "content": "name: \"CI/CD setup\"\ndescription: \"Setup the CI/CD environment\"\n\ninputs:\n  npm_token:\n    description: \"NPM token secret\"\n    required: true\n\nruns:\n  using: \"composite\"\n  steps:\n    - uses: actions/setup-node@v4\n      with:\n        node-version-file: \".nvmrc\"\n        registry-url: https://registry.npmjs.org/\n        cache: \"yarn\"\n    - name: Install\n      run: yarn\n      shell: bash\n      env:\n        NODE_AUTH_TOKEN: ${{ inputs.npm_token }}\n\n    - name: Check for uncommitted changes in yarn.lock\n      shell: bash\n      run: |\n        if [[ -n \"$(git status --porcelain yarn.lock)\" ]]; then\n          echo \"Error: yarn.lock has uncommitted changes. Please commit it.\"\n          exit 1\n        fi\n"
  },
  {
    "path": ".github/workflows/build-and-upload.yml",
    "content": "name: Build and Upload Artifacts\n\non:\n  workflow_call:\n    inputs:\n      skip_release_artifacts:\n        description: Whether to skip release-only build artifacts (mocked classnames, metadata) to speed up CI checks.\n        type: boolean\n        default: false\n    secrets:\n      npm_token:\n        required: true\n    outputs:\n      has_changes:\n        description: Whether there are any changes in the monorepo.\n        value: ${{ jobs.build-and-upload.outputs.has_changes }}\n\njobs:\n  build-and-upload:\n    name: Build and Upload\n    runs-on: ubuntu-latest\n    outputs:\n      has_changes: ${{ steps.check-changed-packages.outputs.has_changes }}\n\n    steps:\n      - uses: actions/checkout@v4\n        with:\n          fetch-depth: 0\n      - name: Run Setup\n        uses: ./.github/actions/setup\n        with:\n          npm_token: ${{ secrets.npm_token }}\n      - id: check-changed-packages\n        uses: ./.github/actions/check-changed-packages\n      - id: determine-since-flag\n        if: ${{ steps.check-changed-packages.outputs.has_changes == 'true' }}\n        uses: ./.github/actions/determine-lerna-since-flag\n      - name: Build\n        if: ${{ steps.check-changed-packages.outputs.has_changes == 'true' }}\n        shell: bash\n        env:\n          SINCE_FLAG: ${{ steps.determine-since-flag.outputs.since_flag }}\n          SKIP_RELEASE_ARTIFACTS: ${{ inputs.skip_release_artifacts }}\n        run: yarn lerna run build $SINCE_FLAG --include-dependencies\n      - name: Upload\n        if: ${{ steps.check-changed-packages.outputs.has_changes == 'true' }}\n        uses: actions/upload-artifact@v4\n        with:\n          name: ci-builds-${{ github.run_id }}-${{ github.run_attempt }}\n          path: |\n            ./packages/*/dist/\n            ./packages/components/*/dist/\n            ./package.json\n          if-no-files-found: ignore\n"
  },
  {
    "path": ".github/workflows/bundle-size.yml",
    "content": "name: Bundle Size Analysis\n\non:\n  pull_request:\n    paths:\n      - \"packages/core/src/components/**\"\n      - \"packages/core/package.json\"\n      - \"packages/components/**\"\n\npermissions:\n  pull-requests: write\n\njobs:\n  build:\n    name: Build\n    uses: ./.github/workflows/build-and-upload.yml\n    with:\n      skip_release_artifacts: true\n    secrets:\n      npm_token: ${{ secrets.npm_token }}\n\n  bundle-size:\n    runs-on: ubuntu-latest\n    needs: build\n\n    steps:\n      - uses: actions/checkout@v4\n        with:\n          fetch-depth: 0\n\n      - name: Run Setup\n        uses: ./.github/actions/setup\n\n      - name: Download build artifacts\n        uses: ./.github/actions/download-builds\n\n      - name: Run size-limit on PR\n        run: |\n          node scripts/bundle-check/generate-size-limit-config.js\n          mkdir -p scripts/bundle-check/reports\n          ./node_modules/.bin/size-limit --json > \"scripts/bundle-check/reports/pr.json\"\n\n      - name: Run size-limit on base commit\n        run: |\n          PR_HEAD_SHA=$(git rev-parse HEAD)\n          trap \"echo 'Checking out back to PR commit'; git checkout --force $PR_HEAD_SHA\" EXIT\n\n          BASE=$(git merge-base origin/master HEAD)\n          echo \"Base commit: $BASE\"\n          git checkout $BASE\n          yarn install --frozen-lockfile\n          yarn build\n          yarn add --dev -W size-limit @size-limit/preset-small-lib\n          ./node_modules/.bin/size-limit --json > scripts/bundle-check/reports/base.json\n        continue-on-error: true\n\n      - name: Compare sizes\n        run: node scripts/bundle-check/compare-bundles.js\n\n      - name: Post comment\n        uses: marocchino/sticky-pull-request-comment@v2\n        with:\n          header: bundle-size\n          path: scripts/bundle-check/reports/bundle-sizes.md\n\n      - name: Upload artifacts\n        uses: actions/upload-artifact@v4\n        if: always()\n        with:\n          name: bundle-analysis\n          path: |\n            scripts/bundle-check/reports/base.json\n            scripts/bundle-check/reports/pr.json\n            scripts/bundle-check/reports/bundle-sizes.md\n          retention-days: 7\n"
  },
  {
    "path": ".github/workflows/chromatic.yml",
    "content": "name: Chromatic\n\non:\n  pull_request:\n    types: [opened, synchronize]\n  push:\n    branches:\n      - master\n\njobs:\n  build:\n    name: Build\n    uses: ./.github/workflows/build-and-upload.yml\n    with:\n      skip_release_artifacts: true\n    secrets:\n      npm_token: ${{ secrets.npm_token }}\n\n  publish-chromatic:\n    name: Publish Chromatic\n    needs: build\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v4\n        with:\n          fetch-depth: 0\n      - name: Run Setup\n        uses: ./.github/actions/setup\n        with:\n          npm_token: ${{ secrets.npm_token }}\n      - uses: ./.github/actions/download-builds\n        if: ${{ needs.build.outputs.has_changes == 'true' }}\n      - name: Publish to Chromatic\n        uses: chromaui/action@v11\n        with:\n          token: ${{ secrets.GITHUB_TOKEN }}\n          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}\n          workingDir: packages/docs\n          exitOnceUploaded: true\n          onlyChanged: false\n          skip: ${{ needs.build.outputs.has_changes == 'false' }}\n"
  },
  {
    "path": ".github/workflows/merge-queue.yml",
    "content": "name: Merge Queue Checks\n\non:\n  merge_group:\n    types:\n      - checks_requested\n\njobs:\n  commitlint:\n    name: Commit Lint\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v4\n        with:\n          ref: ${{ github.sha }}\n\n      - uses: YossiSaadi/commitlint-github-action@vibe-fork/support-merge_group-event\n"
  },
  {
    "path": ".github/workflows/performance.yml",
    "content": "name: Performance Testing\n\non:\n  workflow_dispatch:\n  # pull_request:\n  #   paths:\n  #     - \"packages/core/src/components/**\"\n  #     - \"packages/components/**\"\n\npermissions:\n  pull-requests: write\n\njobs:\n  build:\n    name: Build\n    uses: ./.github/workflows/build-and-upload.yml\n    with:\n      skip_release_artifacts: true\n    secrets:\n      npm_token: ${{ secrets.npm_token }}\n\n  performance:\n    runs-on: ubuntu-latest\n    needs: build\n    timeout-minutes: 30\n\n    steps:\n      - uses: actions/checkout@v4\n        with:\n          fetch-depth: 0\n\n      - name: Run Setup\n        uses: ./.github/actions/setup\n        with:\n          npm_token: ${{ secrets.npm_token }}\n\n      - name: Download build artifacts\n        uses: ./.github/actions/download-builds\n        if: ${{ needs.build.outputs.has_changes == 'true' }}\n\n      - name: Install Playwright\n        # Use root playwright directly (not npx) due to version mismatch with @playwright/test\n        run: ./node_modules/playwright/cli.js install --with-deps chromium\n\n      - name: Test PR branch\n        run: |\n          mkdir -p scripts/performance/reports\n          cd packages/docs\n          yarn storybook &\n          STORYBOOK_PID=$!\n          trap 'kill $STORYBOOK_PID 2>/dev/null || true' EXIT\n          npx wait-on http://localhost:7008 --timeout 120000 || exit 1\n          PERFORMANCE_TEST=true ./node_modules/.bin/test-storybook --url http://localhost:7008 --maxWorkers=4 || true\n        continue-on-error: true\n\n      - name: Save PR metrics\n        run: |\n          node scripts/performance/aggregate-metrics.js\n          cp scripts/performance/reports/metrics.json scripts/performance/reports/pr.json 2>/dev/null || \\\n            echo '{\"timestamp\":\"'$(date -u +%Y-%m-%dT%H:%M:%SZ)'\",\"components\":{}}' > scripts/performance/reports/pr.json\n\n      - name: Test base branch\n        run: |\n          rm -f scripts/performance/reports/.metrics-temp.jsonl\n          PR_SHA=$(git rev-parse HEAD)\n          BASE=$(git merge-base origin/master HEAD)\n          echo \"Testing base commit: $BASE\"\n\n          git checkout $BASE\n          yarn install --frozen-lockfile\n          yarn build\n          ./node_modules/playwright/cli.js install --with-deps chromium\n\n          cd packages/docs\n          yarn storybook &\n          STORYBOOK_PID=$!\n          trap 'kill $STORYBOOK_PID 2>/dev/null || true' EXIT\n          npx wait-on http://localhost:7008 --timeout 120000 || exit 1\n          PERFORMANCE_TEST=true ./node_modules/.bin/test-storybook --url http://localhost:7008 --maxWorkers=4 || true\n          cd ../..\n\n          node scripts/performance/aggregate-metrics.js\n          cp scripts/performance/reports/metrics.json scripts/performance/reports/base.json 2>/dev/null || \\\n            echo '{\"timestamp\":\"'$(date -u +%Y-%m-%dT%H:%M:%SZ)'\",\"components\":{}}' > scripts/performance/reports/base.json\n\n          git checkout $PR_SHA\n        continue-on-error: true\n\n      - name: Generate report\n        run: node scripts/performance/compare-metrics.js\n        continue-on-error: true\n\n      - name: Post PR comment\n        uses: marocchino/sticky-pull-request-comment@v2\n        if: hashFiles('scripts/performance/reports/comparison.md') != ''\n        with:\n          header: performance\n          path: scripts/performance/reports/comparison.md\n\n      - name: Upload artifacts\n        uses: actions/upload-artifact@v4\n        if: always()\n        with:\n          name: performance-reports\n          path: scripts/performance/reports/*.json\n          retention-days: 7\n"
  },
  {
    "path": ".github/workflows/pr.yml",
    "content": "name: PR Checks\n\non:\n  pull_request:\n    types: [opened, synchronize]\n\njobs:\n  build:\n    name: Build\n    uses: ./.github/workflows/build-and-upload.yml\n    secrets:\n      npm_token: ${{ secrets.npm_token }}\n\n  test:\n    name: Test\n    needs: build\n    uses: ./.github/workflows/test.yml\n    with:\n      has_changes: ${{ needs.build.outputs.has_changes }}\n    secrets:\n      npm_token: ${{ secrets.npm_token }}\n\n  commitlint:\n    name: Commit Lint\n    needs: build\n    if: false\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v4\n        with:\n          ref: ${{ github.sha }}\n"
  },
  {
    "path": ".github/workflows/prerelease.yml",
    "content": "name: Prerelease\n\non:\n  push:\n    branches-ignore:\n      - \"master\"\n\njobs:\n  build:\n    name: Build\n    if: contains(github.event.head_commit.message, '[prerelease]')\n    uses: ./.github/workflows/build-and-upload.yml\n    secrets:\n      npm_token: ${{ secrets.npm_token }}\n\n  prerelease:\n    name: Prerelease\n    needs: build\n    if: ${{ needs.build.outputs.has_changes == 'true' }}\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v4\n        with:\n          fetch-depth: 0\n      - name: Set variables\n        run: |\n          echo \"COMMIT_SHA=${GITHUB_SHA}\" >> $GITHUB_ENV\n      - name: Run Setup\n        uses: ./.github/actions/setup\n        with:\n          npm_token: ${{ secrets.npm_token }}\n      - uses: ./.github/actions/git-creds\n      - uses: ./.github/actions/download-builds\n      - name: Generate new versions\n        id: generate-versions\n        run: |\n          commit_sha=$COMMIT_SHA\n          preid=\"alpha-${commit_sha:0:5}\"\n\n          full_output=$(yarn lerna version --exact --conventional-commits --conventional-prerelease --json --no-changelog --no-push --preid \"$preid\" -y)\n\n          # extract only the JSON portion from the full output, excluding yarn logs\n          json_output=$(echo \"$full_output\" | awk '/^\\[/{p=1} p; /\\]/{p=0}' )\n\n          echo 'new_versions<<EOF' >> $GITHUB_OUTPUT\n          echo \"$json_output\" >> $GITHUB_OUTPUT\n          echo 'EOF' >> $GITHUB_OUTPUT\n      - run: yarn config set registry https://registry.npmjs.org/\n      - name: Setup .npmrc for publish\n        run: npm set \"//registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN\"\n        env:\n          NODE_AUTH_TOKEN: ${{ secrets.npm_token }}\n      - name: Publish new versions\n        run: yarn lerna publish from-package --dist-tag prerelease -y\n      - name: Get current PR id\n        uses: 8BitJonny/gh-get-current-pr@3.0.0\n        id: PR\n      - name: Prepare PR comment\n        if: steps.PR.outputs.pr_found == 'true'\n        id: prepare-comment\n        env:\n          json_data: ${{ steps.generate-versions.outputs.new_versions }}\n        run: |\n          echo 'comment_body<<EOF' >> $GITHUB_OUTPUT\n\n          echo \"A new prerelease version of this PR has been published! 🎉\" >> $GITHUB_OUTPUT\n          echo \"To use this prerelease version, install the needed packages in your project:\" >> $GITHUB_OUTPUT\n\n          echo \"$json_data\" | jq -r '.[] | \"\\n```\\n\\(.name)@\\(.newVersion)\\n```\\n\"' >> $GITHUB_OUTPUT\n\n          echo 'EOF' >> $GITHUB_OUTPUT\n      - name: Create comment with prerelease version details\n        if: steps.PR.outputs.pr_found == 'true'\n        uses: peter-evans/create-or-update-comment@v4\n        with:\n          issue-number: ${{ steps.PR.outputs.number }}\n          body: ${{ steps.prepare-comment.outputs.comment_body }}\n"
  },
  {
    "path": ".github/workflows/publish-storybook.yml",
    "content": "name: Publish Storybooks\n\non:\n  workflow_run:\n    workflows: [\"Release new version\"]\n    types:\n      - completed\n  workflow_dispatch:\n\njobs:\n  build-and-deploy:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v2\n        with:\n          fetch-depth: 0\n      - name: Run Setup\n        uses: ./.github/actions/setup\n        with:\n          npm_token: ${{ secrets.npm_token }}\n      - name: Build & deploy Storybooks to GitHub Pages\n        run: |\n          yarn lerna run build --include-dependencies\n          yarn lerna run --scope @vibe/docs build-storybook\n          cd packages/docs/static_storybook\n          echo \"vibe.monday.com\" > ./CNAME\n        env:\n          NODE_AUTH_TOKEN: ${{ secrets.npm_token }}\n      - name: Push core Storybook to Github Pages\n        uses: JamesIves/github-pages-deploy-action@v4.5.0\n        with:\n          clean-exclude: |\n            v2/*\n            v3/*\n            playground/*\n          folder: packages/docs/static_storybook\n          branch: gh-pages\n        env:\n          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n"
  },
  {
    "path": ".github/workflows/release-v2.yml",
    "content": "name: Release v2 version\n\non: workflow_dispatch\n\njobs:\n  notify-release-start:\n    name: Notify Slack - Release Started\n    runs-on: ubuntu-latest\n    continue-on-error: true\n    steps:\n      - name: Send Slack notification\n        uses: fjogeleit/http-request-action@v1\n        with:\n          url: ${{ secrets.SLACK_DEV_TEAM_WEBHOOK_URL }}\n          method: \"POST\"\n          contentType: \"application/json\"\n          data: |\n            {\n              \"event\": \"v2_release_started\",\n              \"actor\": \"${{ github.actor }}\",\n              \"commit_id\": \"${{ github.sha }}\",\n              \"workflow\": \"${{ github.workflow }}\",\n              \"run_url\": \"${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}\",\n              \"commit_url\": \"${{ github.server_url }}/${{ github.repository }}/commit/${{ github.sha }}\"\n            }\n\n  release:\n    if: github.ref_name == 'version2'\n    runs-on: ubuntu-latest\n    defaults:\n      run:\n        working-directory: ./packages/core\n    env:\n      NODE_AUTH_TOKEN: ${{ secrets.npm_token }}\n    steps:\n      - uses: actions/checkout@v4\n        with:\n          fetch-depth: 0\n      - name: Run Setup\n        uses: ./.github/actions/setup\n        with:\n          npm_token: ${{ secrets.npm_token }}\n      - uses: ./.github/actions/git-creds\n      - name: Build\n        run: yarn build\n      - name: Lint\n        run: yarn lint\n      - name: Test\n        run: yarn test\n      - name: Stylelint\n        run: yarn stylelint\n      - name: Generate new core version\n        run: |\n          npm version patch -m \"chore(release): bump core package version to %s\"\n      - run: yarn config set registry https://registry.npmjs.org/\n      - name: Setup .npmrc for publish\n        id: setup-npmrc\n        run: echo \"//registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN\" > .npmrc\n      - name: Publish core to npm\n        run: npm publish --dry-run\n      - name: Remove .npmrc\n        if: steps.setup-npmrc.outcome == 'success'\n        run: rm .npmrc\n"
  },
  {
    "path": ".github/workflows/release.yml",
    "content": "name: Release new version\n\non: workflow_dispatch\n\njobs:\n  validate-branch:\n    name: Validate Branch\n    runs-on: ubuntu-latest\n    steps:\n      - name: Ensure running on master\n        if: github.ref != 'refs/heads/master'\n        run: |\n          echo \"::error::Release workflow must be triggered from master branch. Current branch: ${{ github.ref }}\"\n          exit 1\n\n  notify-release-start:\n    name: Notify Slack - Release Started\n    needs: validate-branch\n    runs-on: ubuntu-latest\n    continue-on-error: true\n    steps:\n      - name: Send Slack notification\n        uses: fjogeleit/http-request-action@v1\n        with:\n          url: ${{ secrets.SLACK_DEV_TEAM_WEBHOOK_URL }}\n          method: \"POST\"\n          contentType: \"application/json\"\n          data: |\n            {\n              \"event\": \"release_started\",\n              \"actor\": \"${{ github.actor }}\",\n              \"commit_id\": \"${{ github.sha }}\",\n              \"workflow\": \"${{ github.workflow }}\",\n              \"run_url\": \"${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}\",\n              \"commit_url\": \"${{ github.server_url }}/${{ github.repository }}/commit/${{ github.sha }}\"\n            }\n\n  build:\n    name: Build\n    needs: validate-branch\n    uses: ./.github/workflows/build-and-upload.yml\n    secrets:\n      npm_token: ${{ secrets.npm_token }}\n\n  test:\n    name: Test\n    needs: build\n    uses: ./.github/workflows/test.yml\n    with:\n      has_changes: ${{ needs.build.outputs.has_changes }}\n    secrets:\n      npm_token: ${{ secrets.npm_token }}\n\n  release:\n    name: Release\n    needs: [build, test]\n    if: ${{ needs.build.outputs.has_changes == 'true' }}\n    runs-on: ubuntu-latest\n    env:\n      NODE_AUTH_TOKEN: ${{ secrets.npm_token }}\n    steps:\n      - uses: actions/checkout@v4\n        with:\n          token: ${{ secrets.VIBE_GITHUB_TOKEN }}\n          fetch-depth: 0\n      - name: Run Setup\n        uses: ./.github/actions/setup\n        with:\n          npm_token: ${{ secrets.npm_token }}\n      - uses: ./.github/actions/git-creds\n      - uses: ./.github/actions/download-builds\n      - name: Generate new versions\n        run: yarn lerna version --exact --conventional-commits --conventional-graduate --message \"Publish [skip ci]\" -y --create-release github\n        env:\n          GH_TOKEN: ${{ secrets.VIBE_GITHUB_TOKEN }}\n      - run: yarn config set registry https://registry.npmjs.org/\n      - name: Setup .npmrc for publish\n        id: setup-npmrc\n        run: echo \"//registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN\" > .npmrc\n      - name: Publish to npm\n        run: yarn lerna publish from-package -y\n      - name: Remove .npmrc\n        if: steps.setup-npmrc.outcome == 'success'\n        run: rm .npmrc\n"
  },
  {
    "path": ".github/workflows/test.yml",
    "content": "# Notice that for this workflow to run properly, you need to first run the build-and-upload workflow.\n# This is because the test workflow depends on the build-and-upload workflow to download the builds from a previous job in the same workflow run.\n\nname: Test & Lint\n\non:\n  workflow_call:\n    inputs:\n      has_changes:\n        description: Whether there are any changes in the monorepo.\n        type: string\n        required: true\n    secrets:\n      npm_token:\n        required: true\n\njobs:\n  checks:\n    name: ${{ matrix.name }}\n    runs-on: ubuntu-latest\n    strategy:\n      fail-fast: false\n      matrix:\n        include:\n          - name: \"Test\"\n            command: \"test\"\n          - name: \"Lint\"\n            command: \"lint\"\n          - name: \"Stylelint\"\n            command: \"stylelint\"\n    steps:\n      - uses: actions/checkout@v4\n        with:\n          fetch-depth: 0\n      - name: Run Setup\n        uses: ./.github/actions/setup\n        with:\n          npm_token: ${{ secrets.npm_token }}\n      - id: determine-since-flag\n        uses: ./.github/actions/determine-lerna-since-flag\n      - uses: ./.github/actions/download-builds\n        if: ${{ inputs.has_changes == 'true' }}\n      - name: Run ${{ matrix.name }}\n        if: ${{ inputs.has_changes == 'true' }}\n        shell: bash\n        env:\n          SINCE_FLAG: ${{ steps.determine-since-flag.outputs.since_flag }}\n        run: yarn lerna run ${{ matrix.command }} $SINCE_FLAG\n\n  testkit-tests:\n    name: Testkit Unit Tests\n    if: ${{ inputs.has_changes == 'true' }}\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v4\n        with:\n          fetch-depth: 0\n      - name: Run Setup\n        uses: ./.github/actions/setup\n        with:\n          npm_token: ${{ secrets.npm_token }}\n      - id: determine-since-flag\n        uses: ./.github/actions/determine-lerna-since-flag\n      - uses: ./.github/actions/download-builds\n      - name: Install playwright browsers\n        run: npx playwright install --with-deps\n      - name: Run Unit Tests\n        env:\n          SINCE_FLAG: ${{ steps.determine-since-flag.outputs.since_flag }}\n          CI: true\n          WORKERS: \"50%\"\n        shell: bash\n        run: yarn lerna run test:changed $SINCE_FLAG --scope \"@vibe/testkit\"\n      - uses: actions/upload-artifact@v4\n        if: ${{ always() }}\n        with:\n          name: test-results\n          path: |\n            packages/testkit/reports\n            packages/testkit/test-results\n"
  },
  {
    "path": ".gitignore",
    "content": "node_modules\n.vscode\n.idea\nnpm-debug.log\nbuild-storybook.log\n./build-storybook.log\nchromatic.log\nstorybook-static\nstatic_storybook\ndist\n*/build\ncoverage\n.scannerwork\n*.env\n.DS_Store\npackages/testkit/test-results\npackages/testkit/reports\nscripts/bundle-check/reports\nscripts/performance/reports/*.json\nscripts/performance/reports/*.md\n.size-limit.js"
  },
  {
    "path": ".nvmrc",
    "content": "v20.12\n"
  },
  {
    "path": ".prettierrc",
    "content": "{\n  \"printWidth\": 120,\n  \"trailingComma\": \"none\",\n  \"arrowParens\": \"avoid\"\n}\n"
  },
  {
    "path": "CLAUDE.md",
    "content": "# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## Project Overview\n\nThe **Vibe Design System** is monday.com's official React component library, managed as a Lerna monorepo with Yarn Workspaces. The main package `@vibe/core` provides the primary component library, while specialized packages handle icons, testing utilities, codemods, and more.\n\n## Development Commands\n\n### Building and Testing\n```bash\n# Build all packages\nyarn build\n\n# Build with dependencies for specific package\nsh scripts/build-dependencies.sh @vibe/core\n\n# Run tests\nyarn test\nlerna run test                    # All packages\nyarn workspace @vibe/core test   # Specific package\n\n# Watch mode for testing\nyarn workspace @vibe/core test:watch\n```\n\n### Linting and Formatting\n```bash\n# Lint all packages\nyarn lint\nlerna run lint\n\n# Fix lint issues\nyarn workspace @vibe/core lint:fix\n\n# Style linting\nyarn workspace @vibe/core stylelint\n```\n\n### Package Management\n```bash\n# Install dependencies (creates workspace symlinks)\nyarn install\n\n# Add dependency to specific package\nyarn workspace @vibe/core add <dependency>\nyarn workspace @vibe/core add -D <dev-dependency>\n\n# Add dependency to root (for global tools)\nyarn add -W <dependency>\n```\n\n### Storybook\n```bash\n# Run Storybook for all packages\nyarn storybook\n```\n\n## Architecture Overview\n\n### Monorepo Structure\n- **`packages/`** - Core packages (core, icons, testkit, style, etc.)\n- **`packages/components/`** - Standalone component packages (button, tooltip, dialog, etc.)\n- **`components/`** - Legacy component structure (deprecated)\n\n### Key Packages\n- **`@vibe/core`** - Main component library, depends on standalone component packages\n- **`@vibe/icons`** - SVG icon library\n- **`@vibe/testkit`** - Playwright testing utilities\n- **`@vibe/codemod`** - Code transformation tools\n- **`@vibe/hooks`** - Shared React hooks\n- **`@vibe/shared`** - Shared utilities and types\n\n### Component Architecture\nComponents follow a systematic structure:\n```\nComponent/\n├── Component.tsx           # Main implementation\n├── Component.types.ts      # TypeScript interfaces\n├── Component.module.scss   # CSS Modules styles\n├── ComponentConstants.ts   # Deprecated enums (if needed)\n├── consts/                # Component-specific constants (organized by purpose)\n├── __tests__/             # Vitest tests\n├── __stories__/           # Storybook stories\n└── index.ts              # Exports\n```\n\n### Package Separation Pattern\nComponents are extracted from `@vibe/core` into standalone packages under `packages/components/`. This follows a specific workflow:\n\n1. **Enum Handling**: Deprecated enums are exported with \"Enum\" suffix to avoid conflicts with string union types\n2. **Export Strategy**: Core package imports from standalone packages and re-exports selectively\n3. **Workspace Linking**: Yarn Workspaces automatically creates symlinks for local package dependencies\n\n## Development Patterns\n\n### Component Creation Process\n1. **Types first** - Define interfaces in `*.types.ts` extending `VibeComponentProps`\n2. **Core component** - Use `forwardRef` pattern, mandatory `[data-vibe]` attribute\n3. **Styles** - CSS Modules, use design tokens, no imports in SCSS files\n4. **Tests** - Test actual behavior, verify accessibility attributes\n5. **Stories** - Comprehensive Storybook examples\n6. **Integration** - Add to global exports and `ComponentVibeId` enum\n\n### Critical Requirements\n- **`[data-vibe]` attribute**: Every component must include this on the root element\n- **ComponentVibeId enum**: Add entry to `packages/core/src/tests/constants.ts`\n- **No static properties**: Use string literals for prop values, not static properties\n- **CSS Modules**: No imports allowed in `.module.scss` files\n\n### Testing Strategy\n- **Vitest** for unit tests with Testing Library\n- **Playwright** for E2E tests (via `@vibe/testkit`)\n- Test actual DOM behavior and accessibility attributes\n- Use established test ID patterns from constants\n\n## Specialized Workflows\n\n### Package Separation\nWhen extracting components from `@vibe/core`:\n- Use templates from `.cursor/templates/package-separation/`\n- Handle enum exports carefully (rename with \"Enum\" suffix)\n- Update dependencies in both packages\n- Run `yarn install` to create workspace symlinks\n- Clear TypeScript cache (`rm -rf .rpt2_cache`)\n\n### MCP Integration\nThe repository includes an MCP (Model Context Protocol) server (`@vibe/mcp`) that provides intelligent assistance for working with Vibe components. Reference the MCP documentation for API discovery and usage examples.\n\n### Build System\n- **Rollup** for bundling with TypeScript support\n- **Independent versioning** via Lerna\n- **Metadata generation** for component documentation\n- **CSS token handling** via `@vibe/style` package\n\n## Important Files and Conventions\n\n### Configuration Files\n- **`lerna.json`** - Lerna configuration with independent versioning\n- **`.cursor/rules/`** - Comprehensive development guidelines and patterns\n- **`scripts/build-dependencies.sh`** - Build specific package with dependencies\n\n### Key Source Locations\n- **`packages/core/src/components/index.ts`** - Main component exports\n- **`packages/core/src/tests/constants.ts`** - Test IDs and component identifiers\n- **`packages/core/src/types/VibeComponentProps.ts`** - Base component props interface\n\n## Migration and Legacy\n- **Vibe 2 → 3**: Migration guide available in documentation\n- **Legacy package**: `monday-ui-react-core` (deprecated)\n- **String unions preferred** over enum constants in new components\n- **Modern React patterns** - hooks, forwardRef, functional components"
  },
  {
    "path": "CNAME",
    "content": "https://vibe.monday.com\n"
  },
  {
    "path": "CONTRIBUTING.md",
    "content": "# Contribution Guide\n\nHi there! We're really excited that you're interested in contributing to Vibe. Before submitting your contribution, please make sure to take a moment and read through the following guidelines:\n\n## Issue reporting\n\nFor new features, suggestions, or general questions, please make sure to create a [discussion](https://github.com/mondaycom/vibe/discussions) first.\n\nIf you found a bug, please [create an issue](https://github.com/mondaycom/vibe/issues/new).\n\n## Development Setup\n\nStorybook is used as the project's development environment. You can use it to preview your changes and test components in isolation. To start working locally, run the following command in the root directory:\n\n```bash\nyarn install\nyarn storybook\n```\n\n### Testing\n\nThere are several layers of testing, such as unit/component tests, integration, a11y, and end-to-end tests. Every new feature or bug fix should be covered by tests, depending on the type of change.\n\nPlease make sure to run tests before submitting your PR:\n\n```bash\nyarn test\n```\n\nIf snapshot tests fail, and you are sure that the changes are intentional, update them by running:\n\n```bash\nyarn test:update\n```\n\n### Linting and formatting\n\nWe use [Prettier](https://prettier.io/) for code formatting. Please, make sure to use it in your editor to keep the codebase consistent.\n\nPlease make sure to run linting and formatting before submitting your PR:\n\n```bash\nyarn lint\n```\n\n### Commits\n\nThe project is using [Conventional Commits](https://www.conventionalcommits.org/) to standardize the commit messages, and release new versions automatically according to [Semantic Versioning](https://semver.org/).\n\nPlease make sure to follow the convention for creating Pull Requests and commits.\n\n## Creating a Pull Request\n\nWhen creating a PR, please make sure to:\n\n- Create a PR title based on the [Conventional Commits](https://www.conventionalcommits.org/) format\n- Add a description of the changes you're making, including the motivation for these changes, and any additional context\n- Link to any related issues or discussions\n- Make sure that all checks are passed\n\nAfter submitting your PR, the maintainers will review your changes and provide feedback. If everything is good, your PR will be merged.\n\n**We really appreciate your contribution to Vibe! 🚀**\n"
  },
  {
    "path": "README.md",
    "content": "<p align=\"center\">\n  <img src=\"https://user-images.githubusercontent.com/60314759/147566893-63c5209a-8b83-4f32-af61-8b4c350ec770.png\" width=\"300px\" alt=\"Vibe Design System, by monday.com\">\n  <h1 align=\"center\">Vibe Design System</h1>\n</p>\n\n<p align=\"center\">\nOfficial <a href=\"https://monday.com\">monday.com</a> UI resources for application development in React.js\n</p>\n\n<p align=\"center\">\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@vibe/core\">\n  <a href=\"https://bundlephobia.com/package/@vibe/core\"><img alt=\"npm bundle size\" src=\"https://img.shields.io/bundlephobia/minzip/@vibe/core\"></a>\n  <a href=\"https://www.npmjs.com/package/@vibe/core\"><img alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/@vibe/core?label=@vibe/core\"></a>\n  <a href=\"https://github.com/mondaycom/vibe/stargazers\"><img alt=\"GitHub Repo stars\" src=\"https://img.shields.io/github/stars/mondaycom/vibe\"></a>\n</p>\n\n<p align=\"center\">\n  <a href=\"https://vibe.monday.com\">Documentation</a> •\n  <a href=\"https://vibe.monday.com/?path=/docs/catalog--docs\">Catalog</a> •\n  <a href=\"https://vibe.monday.com/?path=/story/playground--playground\">Playground</a>\n</p>\n\n## Overview\n\nVibe Design System is a collection of packages designed to streamline your development process and enhance the user experience, by providing a set of components, styles, and guidelines for building applications in React.js.\n\n## Installation\n\n```bash\nnpm install @vibe/core\n# or\nyarn add @vibe/core\n```\n\nTo load all the relevant CSS tokens, import the tokens file in your root application file:\n\n```javascript\nimport \"@vibe/core/tokens\";\n```\n\n## Usage\n\nComponents are imported from the library's root entry:\n\n```javascript\nimport { Button } from \"@vibe/core\";\n```\n\n### MCP\n\nVibe includes an MCP (Model Context Protocol) server that provides intelligent assistance for working with Vibe components. The MCP server can help you discover component APIs, get usage examples, find appropriate icons, and follow best practices.\n\nTo get started, follow the installation instructions in the [@vibe/mcp](https://github.com/mondaycom/vibe/blob/master/packages/mcp/README.md) docs to integrate it in your preferred AI development tools.\n\n## Ecosystem\n\n- [@vibe/core](https://github.com/mondaycom/vibe/blob/master/packages/core/README.md): Core component library\n- [@vibe/icons](https://github.com/mondaycom/vibe/blob/master/packages/icons/README.md): Icons library\n- [@vibe/testkit](https://github.com/mondaycom/vibe/blob/master/packages/testkit/README.md): Testing utilities for Playwright\n- [@vibe/codemod](https://github.com/mondaycom/vibe/blob/master/packages/codemod/README.md): Codemods and CLI tools\n- [@vibe/style](https://github.com/mondaycom/vibe/blob/master/packages/style/README.md): Styling foundations (included in @vibe/core)\n- [vibe-storybook-components](https://github.com/mondaycom/vibe/blob/master/packages/storybook-blocks/README.md): Vibe Storybook Blocks\n- [storybook-addon-playground](https://github.com/mondaycom/storybook-addon-playground/): A Component Playground Addon for Storybook\n- [@vibe/mcp](https://github.com/mondaycom/vibe/blob/master/packages/mcp/README.md): MCP server for Vibe Design System\n\n## Older Versions\n\nVibe 3 ([`@vibe/core` v3](https://www.npmjs.com/package/@vibe/core)) will no longer receive new features or enhancements but will continue to receive critical bug fixes as needed. We highly recommend following the [migration guide](http://vibe.monday.com/?path=/docs/migration-guide--docs) to upgrade to the actively maintained Vibe 4, which includes the latest improvements, new components, and ongoing support.For version 3 documentation, see [vibe.monday.com/v3](https://vibe.monday.com/v3).\n\nVibe 2 ([`monday-ui-react-core`](https://www.npmjs.com/package/monday-ui-react-core)) is no longer maintained. For version 2 documentation, see [vibe.monday.com/v2](https://vibe.monday.com/v2).\n\n## Contributing\n\nWe welcome and encourage every contributor! Please read our [Contribution Guide](http://vibe.monday.com/?path=/docs/contributing--docs).\n\n## Suggestions\n\nIf you have any questions or suggestions, please feel free to open a [discussion](https://github.com/mondaycom/vibe/discussions).\n\nFound a bug? Please [open an issue](https://github.com/mondaycom/vibe/issues/new/choose).\n"
  },
  {
    "path": "lerna.json",
    "content": "{\n  \"$schema\": \"node_modules/lerna/schemas/lerna-schema.json\",\n  \"version\": \"independent\"\n}\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"version\": \"0.0.0\",\n  \"private\": true,\n  \"description\": \"Vibe monorepo\",\n  \"scripts\": {\n    \"build\": \"lerna run build\",\n    \"build:package\": \"sh scripts/build-dependencies.sh\",\n    \"lint\": \"lerna run lint\",\n    \"test\": \"lerna run test\",\n    \"storybook\": \"lerna run storybook --parallel --stream\",\n    \"postinstall\": \"lerna run build --scope={vibe-storybook-components,@vibe/shared,@vibe/icons,@vibe/hooks}\"\n  },\n  \"devDependencies\": {\n    \"@size-limit/preset-small-lib\": \"^11.2.0\",\n    \"bytes\": \"^3.1.2\",\n    \"lerna\": \"^8.1.2\",\n    \"size-limit\": \"^11.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"workspaces\": [\n    \"packages/*\",\n    \"packages/components/*\"\n  ],\n  \"dependencies\": {}\n}\n"
  },
  {
    "path": "packages/base/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [4.0.1](https://github.com/mondaycom/vibe/compare/@vibe/base@4.0.0...@vibe/base@4.0.1) (2026-04-16)\n\n**Note:** Version bump only for package @vibe/base\n\n\n\n\n\n## [3.0.5](https://github.com/mondaycom/vibe/compare/@vibe/base@3.0.4...@vibe/base@3.0.5) (2026-01-04)\n\n**Note:** Version bump only for package @vibe/base\n\n\n\n\n\n## [3.0.4](https://github.com/mondaycom/vibe/compare/@vibe/base@3.0.3...@vibe/base@3.0.4) (2025-12-17)\n\n**Note:** Version bump only for package @vibe/base\n\n\n\n\n\n## [3.0.3](https://github.com/mondaycom/vibe/compare/@vibe/base@3.0.2...@vibe/base@3.0.3) (2025-11-26)\n\n**Note:** Version bump only for package @vibe/base\n\n\n\n\n\n## [3.0.2](https://github.com/mondaycom/vibe/compare/@vibe/base@3.0.1...@vibe/base@3.0.2) (2025-11-25)\n\n**Note:** Version bump only for package @vibe/base\n\n\n\n\n\n## 3.0.1 (2025-11-19)\n\n**Note:** Version bump only for package @vibe/base\n"
  },
  {
    "path": "packages/base/package.json",
    "content": "{\n  \"name\": \"@vibe/base\",\n  \"version\": \"4.0.1\",\n  \"description\": \"Vibe sub-package for base components\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/mondaycom/vibe.git\",\n    \"directory\": \"packages/base\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/mondaycom/vibe/issues\"\n  },\n  \"homepage\": \"https://github.com/mondaycom/vibe#readme\",\n  \"author\": \"monday.com\",\n  \"license\": \"MIT\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.js\",\n  \"types\": \"dist/index.d.ts\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \".\": {\n      \"types\": \"./dist/index.d.ts\",\n      \"import\": \"./dist/index.js\",\n      \"default\": \"./dist/index.js\"\n    },\n    \"./mockedClassNames\": {\n      \"import\": \"./dist/mocked_classnames/index.js\",\n      \"default\": \"./dist/mocked_classnames/index.js\"\n    }\n  },\n  \"scripts\": {\n    \"build\": \"rollup -c && yarn build:mocked-classnames\",\n    \"build:mocked-classnames\": \"[ \\\"$SKIP_RELEASE_ARTIFACTS\\\" = \\\"true\\\" ] || mock_classnames=on rollup -c\",\n    \"test\": \"vitest run\",\n    \"lint\": \"eslint \\\"./src/**/*.{js,jsx,ts,tsx}\\\"\"\n  },\n  \"dependencies\": {\n    \"@vibe/shared\": \"4.0.1\",\n    \"@vibe/style\": \"4.0.0\",\n    \"classnames\": \"^2.5.1\"\n  },\n  \"devDependencies\": {\n    \"@testing-library/react\": \"^12.1.2\",\n    \"@testing-library/user-event\": \"^13.5.0\",\n    \"@vibe/config\": \"4.0.0\",\n    \"react\": \"^16.13.0\",\n    \"react-dom\": \"^16.13.0\",\n    \"react-test-renderer\": \"16\",\n    \"typescript\": \"^5.9.3\",\n    \"vitest\": \"^1.6.0\"\n  },\n  \"peerDependencies\": {\n    \"react\": \">=16.9.0\",\n    \"react-dom\": \">=16.9.0\"\n  },\n  \"sideEffects\": [\n    \"*.scss\",\n    \"*.css\",\n    \"*.scss.js\",\n    \"*.css.js\"\n  ],\n  \"eslintConfig\": {\n    \"extends\": [\n      \"../../node_modules/@vibe/config/.eslintrc.cjs\"\n    ]\n  }\n}\n"
  },
  {
    "path": "packages/base/rollup.config.mjs",
    "content": "import config from \"@vibe/config/rollup.config\";\n\nexport default config;\n"
  },
  {
    "path": "packages/base/src/BaseInput/BaseInput.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n.wrapper {\n  width: 100%;\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\n  padding-block: var(--space-8);\n  padding-inline: var(--space-12) var(--space-4);\n\n  @include vibe-text(text1, normal);\n  @include smoothing-text;\n\n  outline: none;\n  border: 1px solid var(--ui-border-color);\n  border-radius: var(--border-radius-small);\n  color: var(--primary-text-color);\n  background-color: var(--secondary-background-color);\n  transition: border-color var(--motion-productive-medium) ease-in;\n\n  &.small {\n    min-height: 32px;\n    height: 32px;\n    padding-inline-start: var(--space-8);\n    gap: var(--space-4);\n    @include vibe-text(text2, normal);\n  }\n\n  &.medium {\n    min-height: 40px;\n    height: 40px;\n  }\n\n  &.large {\n    min-height: 48px;\n    height: 48px;\n    padding-block: var(--space-8);\n  }\n\n  &.rightThinnerPadding {\n    padding-inline-end: var(--space-16);\n  }\n\n  &:hover {\n    border-color: var(--primary-text-color);\n  }\n\n  @supports selector(:has(*)) {\n    &:has(.input:active, .input:focus) {\n      border-color: var(--primary-color);\n    }\n\n    &:has(.input:read-only) {\n      background-color: var(--allgrey-background-color);\n      border: none;\n\n      .input {\n        background-color: var(--allgrey-background-color);\n      }\n    }\n\n    &:has(.input:disabled) {\n      cursor: not-allowed;\n      user-select: none;\n      border: none;\n      pointer-events: none;\n      background-color: var(--disabled-background-color);\n      color: var(--disabled-text-color);\n\n      .input {\n        background-color: var(--disabled-background-color);\n      }\n    }\n\n    &.success {\n      border-color: var(--positive-color);\n\n      &:hover {\n        border-color: var(--positive-color);\n      }\n\n      &:has(.input:active, .input:focus) {\n        border-color: var(--positive-color);\n      }\n    }\n\n    &:has(.input[aria-invalid=\"true\"]) {\n      border-color: var(--negative-color);\n\n      &:hover {\n        border-color: var(--negative-color);\n      }\n\n      &:has(.input:active, .input:focus) {\n        border-color: var(--negative-color);\n      }\n    }\n  }\n\n  @supports not selector(:has(*)) {\n    &:focus-within {\n      border-color: var(--primary-color);\n    }\n\n    &.readOnly {\n      background-color: var(--allgrey-background-color);\n      border: none;\n\n      .input {\n        background-color: var(--allgrey-background-color);\n      }\n    }\n\n    &.disabled {\n      cursor: not-allowed;\n      user-select: none;\n      border: none;\n      pointer-events: none;\n      background-color: var(--disabled-background-color);\n\n      .input {\n        background-color: var(--disabled-background-color);\n      }\n    }\n\n    &.success {\n      border-color: var(--positive-color);\n\n      &:hover {\n        border-color: var(--positive-color);\n      }\n\n      &:focus-within {\n        border-color: var(--positive-color);\n      }\n    }\n\n    &.error {\n      border-color: var(--negative-color);\n\n      &:hover {\n        border-color: var(--negative-color);\n      }\n\n      &:focus-within {\n        border-color: var(--negative-color);\n      }\n    }\n  }\n\n  .input {\n    all: unset;\n\n    flex: 1;\n    width: 100%;\n    height: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    border: none;\n    outline: none;\n\n    &::placeholder {\n      color: var(--placeholder-color);\n      font-weight: 400;\n    }\n\n    &:disabled::placeholder {\n      color: var(--disabled-text-color);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/base/src/BaseInput/BaseInput.tsx",
    "content": "import React, { forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./BaseInput.module.scss\";\nimport { type BaseInputProps } from \"./BaseInput.types\";\nimport { getStyle } from \"@vibe/shared\";\n\nconst BaseInput = forwardRef(\n  (\n    {\n      size = \"medium\",\n      renderLeft,\n      renderRight,\n      success,\n      error,\n      wrapperRole,\n      inputRole,\n      className,\n      inputClassName,\n      ...props\n    }: BaseInputProps,\n    ref: React.ForwardedRef<HTMLInputElement>\n  ) => {\n    const wrapperClassNames = cx(\n      styles.wrapper,\n      {\n        [styles.rightThinnerPadding]: !renderRight,\n        [styles.error]: error,\n        [styles.success]: success,\n        [styles.readOnly]: props.readOnly,\n        [styles.disabled]: props.disabled\n      },\n      getStyle(styles, size),\n      className\n    );\n\n    return (\n      <div className={wrapperClassNames} role={wrapperRole}>\n        {renderLeft}\n        <input\n          {...props}\n          ref={ref}\n          className={cx(styles.input, inputClassName)}\n          aria-invalid={error}\n          role={inputRole}\n        />\n        {renderRight}\n      </div>\n    );\n  }\n);\n\nexport default BaseInput;\n"
  },
  {
    "path": "packages/base/src/BaseInput/BaseInput.types.ts",
    "content": "import { type AriaRole, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport { type VibeComponentProps, type BASE_SIZES } from \"@vibe/shared\";\n\nexport type InputSize = (typeof BASE_SIZES)[keyof typeof BASE_SIZES];\ntype BaseInputNativeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"size\" | \"role\">;\ntype Renderer = ReactNode | ReactNode[];\n\nexport interface BaseInputProps extends BaseInputNativeInputProps, VibeComponentProps {\n  /**\n   * The size of the input.\n   */\n  size?: InputSize;\n  /**\n   * Element or component rendered on the left side of the input.\n   */\n  renderLeft?: Renderer;\n  /**\n   * Element or component rendered on the right side of the input.\n   */\n  renderRight?: Renderer;\n  /**\n   * If true, applies success styling to the input.\n   */\n  success?: boolean;\n  /**\n   * If true, applies error styling to the input.\n   */\n  error?: boolean;\n  /**\n   * The ARIA role of the input wrapper.\n   */\n  wrapperRole?: AriaRole;\n  /**\n   * The ARIA role of the input element.\n   */\n  inputRole?: AriaRole;\n  /**\n   * Class name applied to the input element.\n   */\n  inputClassName?: string;\n}\n"
  },
  {
    "path": "packages/base/src/BaseInput/__tests__/BaseInput.test.tsx",
    "content": "import { vi, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { render } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport BaseInput from \"../BaseInput\";\nimport { type BaseInputProps } from \"../BaseInput.types\";\n\nfunction renderBaseInput(props?: Partial<BaseInputProps>) {\n  return render(<BaseInput aria-label=\"base-input\" {...props} />);\n}\n\ndescribe(\"BaseInput\", () => {\n  it(\"should render correctly\", () => {\n    const { getByLabelText } = renderBaseInput();\n    expect(getByLabelText(\"base-input\")).toBeInTheDocument();\n  });\n\n  describe(\"with declared props\", () => {\n    it(\"should apply the size class\", () => {\n      const { getByLabelText } = renderBaseInput({ size: \"large\" });\n      expect(getByLabelText(\"base-input\").parentNode).toHaveClass(\"large\");\n    });\n\n    it(\"should show left and right elements when provided\", () => {\n      const renderLeft = <div>Left</div>;\n      const renderRight = <div>Right</div>;\n      const { getByText } = renderBaseInput({ renderLeft, renderRight });\n\n      expect(getByText(\"Left\")).toBeInTheDocument();\n      expect(getByText(\"Right\")).toBeInTheDocument();\n    });\n\n    it(\"should apply the success class\", () => {\n      const { getByLabelText } = renderBaseInput({ success: true });\n      expect(getByLabelText(\"base-input\").parentNode).toHaveClass(\"success\");\n    });\n\n    it(\"should apply wrapper and input role correctly\", () => {\n      const { getByRole } = renderBaseInput({ wrapperRole: \"search\", inputRole: \"combobox\" });\n      expect(getByRole(\"search\")).toBeInTheDocument();\n      expect(getByRole(\"combobox\")).toBeInTheDocument();\n    });\n\n    it(\"should apply the className for input and wrapperClassName for wrapper\", () => {\n      const { getByLabelText } = renderBaseInput({ className: \"customWrapper\", inputClassName: \"inputClass\" });\n      expect(getByLabelText(\"base-input\")).toHaveClass(\"inputClass\");\n      expect(getByLabelText(\"base-input\").parentNode).toHaveClass(\"customWrapper\");\n    });\n\n    it(\"should forward ref to the input element\", () => {\n      const ref = React.createRef<HTMLInputElement>();\n      const { getByLabelText } = render(<BaseInput aria-label=\"input-base\" ref={ref} />);\n      expect(ref.current).toBe(getByLabelText(\"input-base\"));\n    });\n  });\n\n  describe(\"a11y\", () => {\n    it(\"should not apply aria-invalid when error prop is not supplied\", () => {\n      const { getByLabelText } = renderBaseInput();\n      expect(getByLabelText(\"base-input\")).not.toHaveAttribute(\"aria-invalid\");\n    });\n\n    it(\"should apply aria-invalid when error prop is supplied\", () => {\n      const { getByLabelText } = renderBaseInput({ error: true });\n      expect(getByLabelText(\"base-input\")).toHaveAttribute(\"aria-invalid\", \"true\");\n    });\n  });\n\n  describe(\"interactions\", () => {\n    it(\"should capture user input correctly\", () => {\n      const expectedValue = \"Hello, World!\";\n      const { getByLabelText } = renderBaseInput();\n      const input = getByLabelText(\"base-input\");\n      userEvent.type(input, expectedValue);\n      expect(input).toHaveValue(expectedValue);\n    });\n\n    it(\"should call onChange on every input\", () => {\n      const expectedValue = \"Hello, World!\";\n      const onChange = vi.fn();\n      const { getByLabelText } = renderBaseInput({ onChange });\n      const input = getByLabelText(\"base-input\");\n      userEvent.type(input, expectedValue);\n      expect(onChange).toHaveBeenCalledTimes(expectedValue.length);\n    });\n\n    it(\"should handle focus and blur events\", () => {\n      const onFocus = vi.fn();\n      const onBlur = vi.fn();\n      const { getByLabelText } = renderBaseInput({ onFocus, onBlur });\n      const input = getByLabelText(\"base-input\");\n      userEvent.click(input);\n      expect(onFocus).toHaveBeenCalled();\n      userEvent.tab();\n      expect(onBlur).toHaveBeenCalled();\n    });\n\n    it(\"should handle key down and up\", () => {\n      const onEnterDown = vi.fn();\n      const onKeyDown = (e: React.KeyboardEvent) => e.key === \"Enter\" && onEnterDown();\n      const onEnterUp = vi.fn();\n      const onKeyUp = (e: React.KeyboardEvent) => e.key === \"Enter\" && onEnterUp();\n      const { getByLabelText } = renderBaseInput({ onKeyDown, onKeyUp });\n\n      const input = getByLabelText(\"base-input\");\n      userEvent.type(input, \"{enter}\");\n      expect(onEnterDown).toHaveBeenCalled();\n      expect(onEnterUp).toHaveBeenCalled();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/base/src/BaseInput/index.ts",
    "content": "export { default as BaseInput } from \"./BaseInput\";\nexport * from \"./BaseInput.types\";\n"
  },
  {
    "path": "packages/base/src/index.ts",
    "content": "export * from \"./BaseInput\";\n"
  },
  {
    "path": "packages/base/src/types/files.d.ts",
    "content": "// SCSS\ndeclare module \"*.module.scss\" {\n  const classes: { [key: string]: string };\n  export default classes;\n}\n\n// SVG\ndeclare module \"*.svg\" {\n  const content: string;\n  export default content;\n}\n\ndeclare module \"*.png\";\ndeclare module \"*.mp4\";\ndeclare module \"*.pdf\";\n"
  },
  {
    "path": "packages/base/tsconfig.json",
    "content": "{\n  \"extends\": \"@vibe/config/tsconfig\",\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"rootDir\": \"src\"\n  },\n  \"include\": [\"src/**/*\"]\n}\n"
  },
  {
    "path": "packages/base/vitest.config.mjs",
    "content": "import config from \"@vibe/config/vitest.config\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n  ...config\n});\n"
  },
  {
    "path": "packages/base/vitest.setup.mjs",
    "content": "import { vi } from \"vitest\";\nimport \"@testing-library/jest-dom\";\nimport React from \"react\";\n\n// Mock ResizeObserver\nclass ResizeObserver {\n  observe() {}\n  unobserve() {}\n  disconnect() {}\n}\nglobal.ResizeObserver = ResizeObserver;\n\n// Mock react-inlinesvg\nvi.mock(\"react-inlinesvg\", () => ({\n  default: ({ src, ...props }) =>\n    React.createElement(\"div\", {\n      \"data-testid\": \"mock-svg\",\n      \"data-src\": src,\n      ...props\n    })\n}));\n"
  },
  {
    "path": "packages/codemod/.eslintrc.json",
    "content": "{\n  \"parser\": \"@typescript-eslint/parser\",\n  \"extends\": [\"eslint:recommended\", \"plugin:@typescript-eslint/recommended\", \"plugin:prettier/recommended\"],\n  \"ignorePatterns\": [\"dist\", \".eslintrc.json\"],\n  \"plugins\": [\"@typescript-eslint\", \"prettier\"],\n  \"rules\": {\n    \"no-unused-vars\": \"off\",\n    \"@typescript-eslint/no-unused-vars\": [\n      \"warn\",\n      {\n        \"argsIgnorePattern\": \"^_\",\n        \"varsIgnorePattern\": \"^_\",\n        \"caughtErrorsIgnorePattern\": \"^_\"\n      }\n    ],\n    \"no-empty-function\": \"off\",\n    \"@typescript-eslint/no-empty-function\": [\"error\", { \"allow\": [\"arrowFunctions\"] }],\n    \"prettier/prettier\": \"error\"\n  },\n  \"env\": {\n    \"node\": true\n  }\n}\n"
  },
  {
    "path": "packages/codemod/.prettierignore",
    "content": "plop/**/*.hbs\n"
  },
  {
    "path": "packages/codemod/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n# [1.1.0](https://github.com/mondaycom/vibe/compare/@vibe/codemod@1.0.1...@vibe/codemod@1.1.0) (2025-05-29)\n\n\n### Features\n\n* **codemod:** add --yes option to skip confirmation prompts ([#2912](https://github.com/mondaycom/vibe/issues/2912)) ([277d1c7](https://github.com/mondaycom/vibe/commit/277d1c706702447b7b8507d7bda4cabb279bce41))\n\n\n\n\n\n## [1.0.1](https://github.com/mondaycom/vibe/compare/@vibe/codemod@1.0.0...@vibe/codemod@1.0.1) (2025-01-20)\n\n\n### Bug Fixes\n\n* **MenuButton:** return closeDialogOnContentClick prop ([#2725](https://github.com/mondaycom/vibe/issues/2725)) ([515a648](https://github.com/mondaycom/vibe/commit/515a648527a44a30f4142a0b47c8cf4d53043ab3))\n\n\n\n\n\n# [1.0.0](https://github.com/mondaycom/vibe/compare/@vibe/codemod@0.1.0...@vibe/codemod@1.0.0) (2024-11-24)\n\n\n### Features\n\n* **codmods:** add /next codemod ([#2587](https://github.com/mondaycom/vibe/issues/2587)) ([dedaa3a](https://github.com/mondaycom/vibe/commit/dedaa3a68a2d3e233e0d4e7d9c72d38c20d4e601))\n"
  },
  {
    "path": "packages/codemod/README.md",
    "content": "# @vibe/codemod\n\n> Vibe Design System's Codemods and CLI tools for automating migrations and transformations\n\nThe @vibe/codemod package is designed to automate the migration to the latest version of the Vibe design system. It applies specific transformations to your codebase based on the migration type you choose. The tool can be run interactively or via command-line arguments.\n\n## Usage\n\nTo run, use the following command:\n\n```bash\nnpx @vibe/codemod [options]\n```\n\n## Options\n\n### `--migration` (alias: `-m`)\n\n- **Description**: Specifies which migration type to run (e.g., `v3`, `v4`).\n- **Choices**: `v3`, `v4`\n- **Required**: Yes\n- **Example**:\n\n  ```bash\n  npx @vibe/codemod --migration v4\n  ```\n\n### `--target` (alias: `-t`)\n\n- **Description**: Specifies the target directory where the transformations will be applied.\n- **Default**: Current working directory (`process.cwd()`)\n- **Required**: No\n- **Example**:\n\n  ```bash\n  npx @vibe/codemod --target /path/to/your/project\n  ```\n\n### `--extensions` (alias: `-x`)\n\n- **Description**: Specifies which file extensions to include for the migration.\n- **Choices**: `jsx`, `tsx`, `js`, `ts`\n- **Default**: `jsx`, `tsx`\n- **Required**: No\n- **Example**:\n\n  ```bash\n  npx @vibe/codemod --extensions jsx tsx\n  ```\n\n### `--verbose` (alias: `-v`)\n\n- **Description**: Enables verbose mode. When enabled, detailed logs of the transformation process will be printed.\n- **Default**: `false`\n- **Example**:\n\n  ```bash\n  npx @vibe/codemod --verbose\n  ```\n\n### `--yes` (alias: `-y`)\n\n- **Description**: Skip confirmation prompts and auto-proceed when Git working directory is not clean.\n- **Default**: `false`\n- **Example**:\n\n  ```bash\n  npx @vibe/codemod --yes\n  ```\n\n## Included Migrations\n\nThe following migrations are included in this CLI:\n\n### `v3` Migration\n\n- **Migration Type**: `v3` (`--migration v3`)\n- **Description**: This migration transforms components and files to comply with version 3 of @vibe/code.\n\n### `v4` Migration\n\n- **Migration Type**: `v4` (`--migration v4`)\n- **Description**: This migration transforms components and files to comply with version 4 of @vibe/core. Handles breaking changes including component API updates, type changes, and package structure modifications.\n\n### `enums` Migration\n\n- **Migration Type**: `enums` (`--migration enums`)\n- **Description**: This migration transforms enums to TS types with version 3 of @vibe/code.\n"
  },
  {
    "path": "packages/codemod/bin/vibe-codemod.ts",
    "content": "#!/usr/bin/env node\nimport { join, resolve } from \"path\";\nimport { spawn, spawnSync } from \"child_process\";\nimport * as globby from \"globby\";\nimport * as fs from \"fs\";\nimport * as path from \"path\";\nimport inquirer from \"inquirer\";\nimport ora from \"ora\";\nimport chalk from \"chalk\";\nimport readlineSync from \"readline-sync\";\nimport yargs from \"yargs\";\nimport { hideBin } from \"yargs/helpers\";\n\nconst mapMigrationType: { [key: string]: string } = {\n  v3: \"v2-to-v3\",\n  enums: \"v2-to-v3/enums\",\n  v4: \"v3-to-v4\"\n};\n\nconst migrations = Object.keys(mapMigrationType);\n\nconst argv = yargs(hideBin(process.argv))\n  .option(\"migration\", {\n    alias: \"m\",\n    type: \"string\",\n    description: \"Migration type to run (e.g., v3, v4, enums)\",\n    choices: migrations\n  })\n  .option(\"target\", {\n    alias: \"t\",\n    type: \"string\",\n    description: \"Target directory to apply transformations\",\n    default: process.cwd()\n  })\n  .option(\"extensions\", {\n    alias: \"x\",\n    type: \"array\",\n    description: \"File extensions to include (e.g., jsx, tsx, js, ts)\",\n    choices: [\"jsx\", \"tsx\", \"js\", \"ts\"]\n  })\n  .option(\"verbose\", {\n    alias: \"v\",\n    type: \"boolean\",\n    description: \"Enable verbose mode (logs to a file)\",\n    default: false\n  })\n  .option(\"yes\", {\n    alias: \"y\",\n    type: \"boolean\",\n    description: \"Skip confirmation prompts (auto-proceed with dirty git)\",\n    default: false\n  })\n  .help().argv;\n\nasync function runWizard() {\n  const answers = await inquirer.prompt([\n    {\n      type: \"list\",\n      name: \"migration\",\n      message: \"Which migration would you like to run?\",\n      choices: migrations,\n      default: argv.migration || \"v3\",\n      when: !argv.migration\n    },\n    {\n      type: \"checkbox\",\n      name: \"extensions\",\n      message: \"Which file extensions would you like to include?\",\n      choices: [{ name: \"jsx\", checked: true }, { name: \"tsx\", checked: true }, { name: \"js\" }, { name: \"ts\" }],\n      default: argv.extensions || [\"jsx\", \"tsx\"],\n      when: !argv.extensions\n    }\n  ]);\n\n  return {\n    migration: answers.migration || argv.migration,\n    extensions: answers.extensions || argv.extensions\n  };\n}\n\nfunction printReport(successCount: number, failureCount: number, errorsCount: number, duration: string) {\n  if (failureCount) {\n    console.log(\n      `${chalk.dim(`\\nTransformations  `)}${chalk.bold.red(`${failureCount} failed`)} | ${chalk.bold.green(\n        `${successCount} succeeded`\n      )}`\n    );\n    console.log(`${chalk.dim(`         Errors  `)}${chalk.bold.red(errorsCount)}`);\n  } else {\n    console.log(`${chalk.dim(`\\nTransformations  `)}${chalk.bold.green(`${successCount} succeeded`)}`);\n  }\n  console.log(`${chalk.dim(`       Duration  `)}${duration}`);\n  console.log(chalk.blue(`\\nAutomatic migration finished. Follow the migration guide to continue:`));\n  console.log(`${chalk.underline.blue(\"https://vibe.monday.com/?path=/docs/migration-guide--docs\")}\\n`);\n}\n\nasync function main() {\n  const answers = await runWizard();\n\n  const migrationType = answers.migration;\n  const transformationsDir = join(__dirname, \"..\", \"transformations\", \"core\", mapMigrationType[migrationType]);\n  const extensions = answers.extensions;\n  const targetDir = argv.target;\n  const verbose = argv.verbose;\n\n  const logFile = resolve(targetDir, \"codemod.log\");\n\n  if (!fs.existsSync(transformationsDir)) {\n    console.error(chalk.red(`Error: Transformations directory does not exist: ${transformationsDir}`));\n    process.exit(1);\n  }\n\n  function isGitClean() {\n    try {\n      const status = spawnSync(\"git\", [\"status\", \"--porcelain\"], { encoding: \"utf-8\" }).stdout.trim();\n      return status === \"\";\n    } catch (error) {\n      console.error(chalk.red(\"Error checking Git status:\"));\n      process.exit(1);\n    }\n  }\n\n  const isVibeCoreInstalled = checkIfPackageExists(\"@vibe/core\");\n  if (migrationType === \"v3\" && !isVibeCoreInstalled) {\n    console.log(chalk.yellow(\"Warning: You need to install @vibe/core package to fully apply the v3 migration.\"));\n  }\n  if (migrationType === \"v4\" && !isVibeCoreInstalled) {\n    console.log(chalk.yellow(\"Warning: You need to install @vibe/core package to fully apply the v4 migration.\"));\n  }\n  if (migrationType === \"enums\" && !isVibeCoreInstalled) {\n    console.log(chalk.red(\"Error: Please install @vibe/core to run the enum migration.\"));\n    process.exit(1);\n  }\n\n  if (!isGitClean()) {\n    console.warn(\n      chalk.yellow(\n        \"Warning: Your Git working directory is not clean. It is recommended to only run this script with a clean working directory.\"\n      )\n    );\n\n    if (argv.yes) {\n      console.log(chalk.blue(\"Auto-proceeding due to --yes flag...\"));\n    } else {\n      const proceed = readlineSync.question(\"Do you want to proceed anyway? (y/N) \");\n      if (proceed.toLowerCase() !== \"y\") {\n        console.log(\"Operation cancelled.\");\n        process.exit(1);\n      }\n    }\n  }\n\n  async function processTransformations(transformationFiles: string[], type = \"Transformation\") {\n    for (let index = 0; index < transformationFiles.length; index++) {\n      const transform = transformationFiles[index];\n      const transformName = path.basename(transform, path.extname(transform));\n\n      spinner.text = `Processing ${type.toLowerCase()} (${index + 1}/${transformationFiles.length}): ${transformName}`;\n\n      try {\n        const result = await runSingleTransformation(transform);\n\n        if (result) {\n          successCount++;\n          spinner.succeed(chalk.green(`${type} completed: ${transformName}`));\n        } else {\n          failureCount++;\n          spinner.fail(chalk.red(`${type} finished with errors: ${transformName}`));\n        }\n      } catch (error) {\n        failureCount++;\n        spinner.fail(chalk.red(`${type} failed: ${transformName}`));\n      }\n\n      if (index < transformationFiles.length - 1) {\n        spinner.start();\n      }\n    }\n  }\n\n  const verbosityLevel: number = verbose ? 2 : 0;\n  const outputTarget: string = verbose ? `>> \"${logFile}\"` : \"\";\n\n  let successCount = 0;\n  let failureCount = 0;\n  let errorsCount = 0;\n  const startTime = Date.now();\n\n  console.log(chalk.green(`Running transformations for migration: ${migrationType} in directory: ${targetDir}`));\n\n  const spinner = ora(`Running transformations...`).start();\n\n  async function runSingleTransformation(transform: string) {\n    return new Promise(resolve => {\n      const child = spawn(\n        \"node\",\n        [\n          require.resolve(\"jscodeshift/bin/jscodeshift\"),\n          `--extensions=${extensions.join(\",\")}`,\n          \"--ignore-pattern=node_modules\",\n          \"--ignore-pattern=**/*.d.ts\",\n          `--verbose=${verbosityLevel}`,\n          \"--max-workers=8\",\n          \"--no-babel\",\n          \"-t\",\n          transform,\n          targetDir,\n          outputTarget\n        ],\n        {\n          stdio: verbose ? \"inherit\" : [\"inherit\", \"pipe\", \"pipe\"],\n          shell: true,\n          env: { ...process.env, FORCE_COLOR: \"1\" }\n        }\n      );\n\n      let hasError = false;\n\n      if (child.stderr) {\n        child.stderr.on(\"data\", data => {\n          const errorOutput = data.toString();\n          process.stderr.write(errorOutput);\n          if (errorOutput.includes(\"ERROR\")) {\n            hasError = true;\n            errorsCount++;\n          }\n        });\n      }\n\n      if (child.stdout) {\n        child.stdout.on(\"data\", data => {\n          const output = data.toString();\n          if (output.includes(\"ERROR\")) {\n            hasError = true;\n            errorsCount++;\n          }\n        });\n      }\n\n      child.on(\"exit\", code => {\n        if (code !== 0 || hasError) {\n          resolve(false);\n        } else {\n          resolve(true);\n        }\n      });\n    });\n  }\n\n  const transformationFiles: string[] = globby.sync(`${transformationsDir}/*.js`, {\n    ignore: [\"node_modules/**\", \"**/*.d.ts\"]\n  });\n\n  if (transformationFiles.length === 0) {\n    console.error(chalk.red(\"No transformation files found. Please check the migration name supplied.\"));\n    process.exit(1);\n  }\n\n  const filesToProcessLast =\n    migrationType === \"v3\"\n      ? [\n          resolve(transformationsDir, \"next-imports-migration.js\"),\n          resolve(transformationsDir, \"type-imports-migration.js\"),\n          resolve(transformationsDir, \"packages-rename-migration.js\")\n        ]\n      : migrationType === \"v4\"\n        ? [\n            resolve(transformationsDir, \"next-imports-migration.js\"),\n            resolve(transformationsDir, \"packages-rename-migration.js\")\n          ]\n        : [];\n  const orderedTransformationFiles = [\n    ...transformationFiles.filter(file => !filesToProcessLast.includes(file)),\n    ...filesToProcessLast\n  ];\n\n  await processTransformations(orderedTransformationFiles);\n\n  spinner.stop();\n\n  const duration = ((Date.now() - startTime) / 1000).toFixed(2) + \"s\";\n\n  printReport(successCount, failureCount, errorsCount, duration);\n\n  if (verbose) {\n    console.log(chalk.green(`Transformation logs written to ${logFile}`));\n  }\n}\n\nfunction checkIfPackageExists(packageName: string): boolean {\n  const packageJsonPath = path.resolve(process.cwd(), \"package.json\");\n  if (!fs.existsSync(packageJsonPath)) {\n    console.error(chalk.red(`Error: package.json not found at ${packageJsonPath}`));\n    process.exit(1);\n  }\n  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, \"utf-8\"));\n  const dependencies = packageJson.dependencies || {};\n  const version = dependencies[packageName];\n  return !!version;\n}\n\nmain();\n"
  },
  {
    "path": "packages/codemod/package.json",
    "content": "{\n  \"name\": \"@vibe/codemod\",\n  \"version\": \"4.0.0\",\n  \"description\": \"Vibe's component library migration tool\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/mondaycom/vibe.git\",\n    \"directory\": \"packages/codemod\"\n  },\n  \"author\": \"monday.com\",\n  \"license\": \"MIT\",\n  \"bin\": \"./dist/bin/vibe-codemod.js\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"scripts\": {\n    \"test\": \"vitest\",\n    \"plop\": \"plop\",\n    \"build\": \"tsc\",\n    \"lint\": \"eslint . --max-warnings 0\",\n    \"lint:fix\": \"yarn lint -- --fix\"\n  },\n  \"dependencies\": {\n    \"chalk\": \"^4.1.2\",\n    \"globby\": \"^11.1.0\",\n    \"inquirer\": \"^8.1.0\",\n    \"jscodeshift\": \"^0.16.0\",\n    \"readline-sync\": \"^1.4.10\",\n    \"yargs\": \"^17.2.1\"\n  },\n  \"devDependencies\": {\n    \"@types/jscodeshift\": \"^0.11.11\",\n    \"@types/readline-sync\": \"^1.4.8\",\n    \"@typescript-eslint/eslint-plugin\": \"^6.21.0\",\n    \"@typescript-eslint/parser\": \"^6.21.0\",\n    \"eslint\": \"^8.57.0\",\n    \"eslint-plugin-prettier\": \"^5.1.3\",\n    \"plop\": \"^4.0.1\",\n    \"prettier\": \"^3.3.2\",\n    \"vitest\": \"^1.6.0\"\n  }\n}\n"
  },
  {
    "path": "packages/codemod/plop/component/test.hbs",
    "content": "import transform from \"../{{kebabCase componentName}}-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { {{pascalCase componentName}} } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"{{pascalCase componentName}} component migration\", () => {\n  defineInlineTest(\n    transform,\n    {}, // jscodeshift test options\n    \"input\",\n    \"output\",\n    \"should update 'propNameX' to 'propNameY'\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/plop/component/transform-remove-props.hbs",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  removeProp\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. TODO: What does this codemod do?\n */\nfunction transform({ j, root }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"{{pascalCase componentName}}\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    removeProp(j, elementPath, {{#each propsToRemove}}\"{{this}}\"{{#unless @last}}, {{/unless}}{{/each}});\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/plop/component/transform-update-prop-values.hbs",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  updatePropValues\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. TODO: What does this codemod do?\n */\nfunction transform({ j, root }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"{{pascalCase componentName}}\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    updatePropValues(j, elementPath, \"{{propName}}\", {\n    {{#each valuesMapping}}\n      \"{{@key}}\": {\n        value: \"{{value}}\",\n        type: j.{{type}}\n      }{{#unless @last}},{{/unless}}\n    {{/each}}\n    });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/plop/component/transform-update-props.hbs",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. TODO: What does this codemod do?\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"{{pascalCase componentName}}\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    migratePropsNames(j, elementPath, filePath, componentName, { {{#each propsMapping}}{{@key}}: \"{{this}}\"{{#unless @last}}, {{/unless}}{{/each}} });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/plop/component/transform-update-static-prop-key.hbs",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  updateStaticPropKeys\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. TODO: What does this codemod do?\n */\nfunction transform({ j, root }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"{{pascalCase componentName}}\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    updateStaticPropKeys(j, elementPath, \"{{propName}}\", { {{#each keysMapping}}{{@key}}: \"{{this}}\"{{#unless @last}}, {{/unless}}{{/each}} });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/plop/component/transform.hbs",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  isPropExists,\n  updatePropName,\n  removeProp,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. TODO: What does this codemod do?\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"{{pascalCase componentName}}\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    // TODO: add your logic here\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/plopfile.js",
    "content": "module.exports = function (plop) {\n  plop.setGenerator(\"component\", {\n    description: \"Generate a codemod template and a test file for a component migration\",\n    prompts: async function (inquirer) {\n      const prompts = [\n        {\n          type: \"input\",\n          name: \"componentName\",\n          message: \"What's the name of the component you want to write codemod for?\"\n        },\n        {\n          type: \"list\",\n          name: \"selectedOption\",\n          message: \"Select the type of codemod:\",\n          choices: [\n            { name: \"Empty template\", value: \"emptyTemplate\" },\n            { name: \"Update prop names\", value: \"updatePropNames\" },\n            { name: \"Remove prop\", value: \"removeProp\" },\n            { name: \"Update prop values\", value: \"updatePropValues\" },\n            { name: \"Update static prop keys\", value: \"updateStaticPropKeys\" }\n          ]\n        },\n        {\n          type: \"input\",\n          name: \"propsMapping\",\n          message: \"Enter the old-to-new prop mappings as JSON\",\n          when: answers => answers.selectedOption === \"updatePropNames\",\n          default: `{ \"propAOld\": \"propANew\", \"propBOld\": \"propBNew\" }`,\n          validate: function (value) {\n            try {\n              JSON.parse(value);\n              return true;\n            } catch (e) {\n              return \"Please enter a valid JSON string.\";\n            }\n          }\n        },\n        {\n          type: \"input\",\n          name: \"propsToRemove\",\n          message: \"Enter the names of the props to remove, separated by commas:\",\n          when: answers => answers.selectedOption === \"removeProp\",\n          filter: function (value) {\n            return value\n              .split(\",\")\n              .map(prop => prop.trim())\n              .filter(Boolean);\n          }\n        },\n        {\n          type: \"input\",\n          name: \"propName\",\n          message: \"Enter the prop name that you would like to change its value\",\n          when: answers =>\n            answers.selectedOption === \"updatePropValues\" || answers.selectedOption === \"updateStaticPropKeys\"\n        },\n        {\n          type: \"input\",\n          name: \"keysMapping\",\n          message: \"Enter the old-to-new static key mappings as JSON\",\n          when: answers => answers.selectedOption === \"updateStaticPropKeys\",\n          default: `{ \"keyAOld\": \"keyANew\", \"keyBOld\": \"keyBNew\" }`,\n          validate: function (value) {\n            try {\n              JSON.parse(value);\n              return true;\n            } catch (e) {\n              return \"Please enter a valid JSON string.\";\n            }\n          }\n        },\n        {\n          type: \"input\",\n          name: \"propsToRemove\",\n          message: \"Enter the names of the props to remove, separated by commas:\",\n          when: answers => answers.selectedOption === \"removeProp\",\n          filter: function (value) {\n            return value\n              .split(\",\")\n              .map(prop => prop.trim())\n              .filter(Boolean);\n          }\n        },\n        {\n          type: \"input\",\n          name: \"propName\",\n          message: \"Enter the prop name that you would like to change its value\",\n          when: answers => answers.selectedOption === \"updatePropValues\"\n        }\n      ];\n      const answers = await inquirer.prompt(prompts);\n      if (answers.selectedOption === \"updatePropValues\") {\n        answers.valuesMapping = {};\n        let addAnother = true;\n        while (addAnother) {\n          const valueAnswers = await inquirer.prompt([\n            {\n              type: \"input\",\n              name: \"key\",\n              message: \"Enter the value you want to change\"\n            },\n            {\n              type: \"input\",\n              name: \"value\",\n              message: \"Enter the new value\"\n            },\n            {\n              type: \"list\",\n              name: \"type\",\n              message: \"Select the type:\",\n              choices: [\"memberExpression\", \"literal\"]\n            },\n            {\n              type: \"confirm\",\n              name: \"addAnother\",\n              message: \"Do you want to add another mapping?\",\n              default: true\n            }\n          ]);\n\n          answers.valuesMapping[valueAnswers.key] = {\n            value: valueAnswers.value,\n            type: valueAnswers.type\n          };\n          addAnother = valueAnswers.addAnother;\n        }\n        answers.valuesMapping = JSON.stringify(answers.valuesMapping);\n      }\n      return answers;\n    },\n    actions: function (data) {\n      let templateFile = \"plop/component/transform.hbs\";\n\n      switch (data.selectedOption) {\n        case \"updatePropNames\":\n          templateFile = \"plop/component/transform-update-props.hbs\";\n          data.propsMapping = JSON.parse(data.propsMapping);\n          break;\n        case \"updatePropValues\":\n          templateFile = \"plop/component/transform-update-prop-values.hbs\";\n          data.valuesMapping = JSON.parse(data.valuesMapping);\n          break;\n        case \"removeProp\":\n          templateFile = \"plop/component/transform-remove-props.hbs\";\n          break;\n        case \"updateStaticPropKeys\":\n          templateFile = \"plop/component/transform-update-static-prop-key.hbs\";\n          data.keysMapping = JSON.parse(data.keysMapping);\n          break;\n        default:\n          break;\n      }\n\n      return [\n        {\n          type: \"add\",\n          path: \"transformations/core/v2-to-v3/{{kebabCase componentName}}-component-migration.ts\",\n          templateFile: templateFile\n        },\n        {\n          type: \"add\",\n          path: \"transformations/core/v2-to-v3/__tests__/{{kebabCase componentName}}-component-migration.test.ts\",\n          templateFile: \"plop/component/test.hbs\"\n        }\n      ];\n    }\n  });\n};\n"
  },
  {
    "path": "packages/codemod/src/consts/index.ts",
    "content": "export * from \"./vibe-import-paths\";\n"
  },
  {
    "path": "packages/codemod/src/consts/vibe-import-paths.ts",
    "content": "export const CORE_IMPORT_PATH = \"monday-ui-react-core\";\nexport const CORE_NEXT_IMPORT_PATH = \"monday-ui-react-core/next\";\n\nexport const NEW_CORE_IMPORT_PATH = \"@vibe/core\";\nexport const NEW_ICONS_IMPORT_PATH = \"@vibe/icons\";\n"
  },
  {
    "path": "packages/codemod/src/utils/__tests__/import-utils.test.ts",
    "content": "import jscodeshift from \"jscodeshift\";\nimport {\n  findImportsThatIncludesSpecifier,\n  getComponentNameOrAliasFromImports,\n  getCoreImportsForFile,\n  removeSpecifierFromImport,\n  updateImportSpecifierName\n} from \"../import-utils\";\n\nconst j = jscodeshift.withParser(\"tsx\");\n\ndescribe(\"Import Utils\", () => {\n  describe(\"findImportsThatIncludesSpecifier\", () => {\n    const testCases = [\n      {\n        description: \"should find imports that include the specified specifier\",\n        source: `\n        import { Button } from \"monday-ui-react-core\";\n        import { Input } from \"monday-ui-react-core\";\n      `,\n        specifierName: \"Button\",\n        expectedImports: [`import { Button } from \"monday-ui-react-core\";`]\n      },\n      {\n        description: \"should return an empty collection if no import includes the specified specifier\",\n        source: `\n        import { Input } from \"monday-ui-react-core\";\n        import { Card } from \"monday-ui-react-core\";\n      `,\n        specifierName: \"Button\",\n        expectedImports: []\n      },\n      {\n        description: \"should find multiple imports that include the specified specifier\",\n        source: `\n        import { Button } from \"monday-ui-react-core\";\n        import { Button as Btn, Input } from \"monday-ui-react-core\";\n      `,\n        specifierName: \"Button\",\n        expectedImports: [\n          `import { Button } from \"monday-ui-react-core\";`,\n          `import { Button as Btn, Input } from \"monday-ui-react-core\";`\n        ]\n      },\n      {\n        description: \"should find imports with aliased specifiers\",\n        source: `\n        import { Button as Btn } from \"monday-ui-react-core\";\n        import { Input } from \"monday-ui-react-core\";\n      `,\n        specifierName: \"Button\",\n        expectedImports: [`import { Button as Btn } from \"monday-ui-react-core\";`]\n      },\n      {\n        description: \"should ignore specifiers that are not the target\",\n        source: `\n        import { Input } from \"monday-ui-react-core\";\n        import { Button } from \"another-library\";\n      `,\n        specifierName: \"Button\",\n        expectedImports: []\n      }\n    ];\n\n    testCases.forEach(({ description, source, specifierName, expectedImports }) => {\n      it(description, () => {\n        const root = j(source);\n        const coreImportDeclarations = getCoreImportsForFile(root);\n        const result = findImportsThatIncludesSpecifier(j, coreImportDeclarations, specifierName);\n        const output = result.nodes().map(node => j(node).toSource());\n        expect(output).toEqual(expectedImports);\n      });\n    });\n  });\n\n  describe(\"updateImportSpecifierName\", () => {\n    const testCases = [\n      {\n        description: \"should update the import specifier name\",\n        source: `import { OldName } from \"monday-ui-react-core\";`,\n        oldName: \"OldName\",\n        newName: \"NewName\",\n        expected: `import { NewName } from \"monday-ui-react-core\";`\n      },\n      {\n        description: \"should update the import specifier name and keep the alias\",\n        source: `import { OldName as AliasName } from \"monday-ui-react-core\";`,\n        oldName: \"OldName\",\n        newName: \"NewName\",\n        expected: `import { NewName as AliasName } from \"monday-ui-react-core\";`\n      },\n      {\n        description: \"should not change anything if the specifier name does not match\",\n        source: `import { AnotherName } from \"monday-ui-react-core\";`,\n        oldName: \"OldName\",\n        newName: \"NewName\",\n        expected: `import { AnotherName } from \"monday-ui-react-core\";`\n      }\n    ];\n\n    testCases.forEach(({ description, source, oldName, newName, expected }) => {\n      it(description, () => {\n        const root = j(source);\n        const coreImports = getCoreImportsForFile(root);\n        const coreImportDeclarationsPath = coreImports.paths()[0];\n        updateImportSpecifierName(j, coreImportDeclarationsPath, oldName, newName);\n        const output = j(coreImportDeclarationsPath).toSource();\n        expect(output).toBe(expected);\n      });\n    });\n  });\n\n  describe(\"removeSpecifierFromImport\", () => {\n    const testCases = [\n      {\n        description: \"should remove the specified import specifier\",\n        source: `import { Button, Input } from \"monday-ui-react-core\";`,\n        specifierName: \"Button\",\n        expected: `import { Input } from \"monday-ui-react-core\";`\n      },\n      {\n        description: \"should remove the entire import declaration if it was the last specifier\",\n        source: `import { Button } from \"monday-ui-react-core\";`,\n        specifierName: \"Button\",\n        expected: ``\n      },\n      {\n        description: \"should do nothing if the specifier is not found\",\n        source: `import { Button, Input } from \"monday-ui-react-core\";`,\n        specifierName: \"Card\",\n        expected: `import { Button, Input } from \"monday-ui-react-core\";`\n      },\n      {\n        description: \"should remove only the matching specifier and leave others intact\",\n        source: `import { Button, Input, Card } from \"monday-ui-react-core\";`,\n        specifierName: \"Input\",\n        expected: `import { Button, Card } from \"monday-ui-react-core\";`\n      },\n      {\n        description: \"should handle multiple imports and remove the specified one\",\n        source: `\n        import { Button, Input } from \"monday-ui-react-core\";\n        import { Card } from \"monday-ui-react-core\";\n      `,\n        specifierName: \"Input\",\n        expected: `\n        import { Button } from \"monday-ui-react-core\";\n        import { Card } from \"monday-ui-react-core\";\n      `\n      }\n    ];\n\n    testCases.forEach(({ description, source, specifierName, expected }) => {\n      it(description, () => {\n        const root = j(source);\n        const importDeclarationPath = root.find(j.ImportDeclaration).paths()[0];\n        removeSpecifierFromImport(j, importDeclarationPath, specifierName);\n        const output = root.toSource();\n        expect(output).toBe(expected);\n      });\n    });\n  });\n\n  describe(\"getComponentNameOrAliasFromImports\", () => {\n    const testCases = [\n      {\n        description: \"should return the original name if the component is imported without an alias\",\n        source: `import { Button } from \"monday-ui-react-core\";`,\n        componentName: \"Button\",\n        expected: \"Button\"\n      },\n      {\n        description: \"should return the alias if the component is imported with an alias\",\n        source: `import { Button as Btn } from \"monday-ui-react-core\";`,\n        componentName: \"Button\",\n        expected: \"Btn\"\n      },\n      {\n        description: \"should return null if the component is not imported\",\n        source: `import { Input } from \"monday-ui-react-core\";`,\n        componentName: \"Button\",\n        expected: null\n      },\n      {\n        description: \"should handle multiple imports and return the correct alias\",\n        source: `\n        import { Input } from \"monday-ui-react-core\";\n        import { Button as Btn } from \"another-library\";\n      `,\n        componentName: \"Button\",\n        expected: \"Btn\"\n      },\n      {\n        description: \"should return the original name if there are multiple specifiers\",\n        source: `import { Button, Card } from \"monday-ui-react-core\";`,\n        componentName: \"Button\",\n        expected: \"Button\"\n      }\n    ];\n\n    testCases.forEach(({ description, source, componentName, expected }) => {\n      it(description, () => {\n        const root = j(source);\n        const importDeclarations = root.find(j.ImportDeclaration);\n        const result = getComponentNameOrAliasFromImports(j, importDeclarations, componentName);\n        expect(result).toBe(expected);\n      });\n    });\n  });\n});\n"
  },
  {
    "path": "packages/codemod/src/utils/__tests__/prop-utils.test.ts",
    "content": "import {\n  isPropExists,\n  migratePropsNames,\n  removeProp,\n  updateComponentNamespaceProps,\n  updatePropValues,\n  updateStaticPropKeys\n} from \"../prop-utils\";\nimport jscodeshift, { ASTPath, JSXElement } from \"jscodeshift\";\n\nfunction getElementPath(source: string): ASTPath<JSXElement> {\n  const j = jscodeshift.withParser(\"tsx\");\n  const root = j(source);\n  return root.find(j.JSXElement).paths()[0];\n}\n\ndescribe(\"Prop Utils\", () => {\n  describe(\"isPropExists\", () => {\n    const testCases = [\n      {\n        source: `<Component existingProp=\"value\" />`,\n        propName: \"existingProp\",\n        expected: true,\n        description: \"should return true if prop exists\"\n      },\n      {\n        source: `<Component someOtherProp=\"value\" />`,\n        propName: \"nonExistentProp\",\n        expected: false,\n        description: \"should return false if prop does not exist\"\n      },\n      {\n        source: `<Component someProp=\"value\"><div someOtherProp=\"value\"></div></Component>`,\n        propName: \"someOtherProp\",\n        expected: false,\n        description: \"should return false if prop doesn't exist on parent element\"\n      },\n      {\n        source: `<Component someOtherProp=\"value\"><div someOtherProp=\"value\"></div></Component>`,\n        propName: \"someOtherProp\",\n        expected: true,\n        description: \"should return true if prop exists on parent element\"\n      },\n      {\n        source: `<Component someProp=\"value\"><div someOtherProp=\"value\"></div></Component>`,\n        propName: \"someProp\",\n        expected: true,\n        description: \"should return true if prop exists on parent element\"\n      }\n    ];\n\n    testCases.forEach(({ source, propName, expected, description }) => {\n      it(description, () => {\n        const elementPath = getElementPath(source);\n        const result = isPropExists(jscodeshift, elementPath, propName);\n        expect(result).toBe(expected);\n      });\n    });\n  });\n\n  describe(\"removeProp\", () => {\n    const testCases = [\n      {\n        description: \"should remove the specified prop\",\n        source: `<Component existingProp=\"value\" otherProp=\"value\" />`,\n        propName: \"existingProp\",\n        expected: `<Component otherProp=\"value\" />`\n      },\n      {\n        description: \"should do nothing if the prop does not exist\",\n        source: `<Component existingProp=\"value\" otherProp=\"value\" />`,\n        propName: \"nonExistentProp\",\n        expected: `<Component existingProp=\"value\" otherProp=\"value\" />`\n      }\n    ];\n\n    testCases.forEach(({ description, source, propName, expected }) => {\n      it(description, () => {\n        const elementPath = getElementPath(source);\n        removeProp(jscodeshift, elementPath, propName);\n        const output = jscodeshift(elementPath).toSource();\n        expect(output).toBe(expected);\n      });\n    });\n  });\n\n  describe(\"migratePropsNames\", () => {\n    const testCases = [\n      {\n        description: \"should rename old prop to new prop when the new prop is not found\",\n        source: `<Component oldProp=\"value\" />`,\n        expected: `<Component newProp=\"value\" />`,\n        propsNamesMappingOldToNew: { oldProp: \"newProp\" }\n      },\n      {\n        description: \"should remove the old prop if both props are found and their values match\",\n        source: `<Component oldProp=\"sameValue\" newProp=\"sameValue\" />`,\n        expected: `<Component newProp=\"sameValue\" />`,\n        propsNamesMappingOldToNew: { oldProp: \"newProp\" }\n      },\n      {\n        description: \"should log an error if both props are found and their values do not match\",\n        source: `<Component oldProp=\"value1\" newProp=\"value2\" />`,\n        expected: `<Component oldProp=\"value1\" newProp=\"value2\" />`,\n        propsNamesMappingOldToNew: { oldProp: \"newProp\" }\n      },\n      {\n        description: \"should do nothing if neither prop is found\",\n        source: `<Component anotherProp=\"value\" />`,\n        expected: `<Component anotherProp=\"value\" />`,\n        propsNamesMappingOldToNew: { oldProp: \"newProp\" }\n      }\n    ];\n\n    testCases.forEach(({ description, source, expected, propsNamesMappingOldToNew }) => {\n      it(description, () => {\n        const elementPath = getElementPath(source);\n        migratePropsNames(jscodeshift, elementPath, \"filePath.tsx\", \"Component\", propsNamesMappingOldToNew);\n        const output = jscodeshift(elementPath).toSource();\n        expect(output).toBe(expected);\n      });\n    });\n  });\n\n  describe(\"updatePropValues\", () => {\n    const testCases = [\n      {\n        description: \"should update string prop value based on the mapping\",\n        source: `<Component someProp=\"oldValue\" />`,\n        valuesMapping: {\n          oldValue: { value: \"newValue\", type: \"Literal\" }\n        },\n        expected: `<Component someProp=\"newValue\" />`\n      },\n      {\n        description: \"should update number prop value based on the mapping\",\n        source: `<Component someProp={1} />`,\n        valuesMapping: {\n          \"1\": { value: 42, type: \"Literal\" }\n        },\n        expected: `<Component someProp={42} />`\n      },\n      {\n        description: \"should update boolean prop value based on the mapping\",\n        source: `<Component someProp={true} />`,\n        valuesMapping: {\n          true: { value: false, type: \"Literal\" }\n        },\n        expected: `<Component someProp={false} />`\n      },\n      {\n        description: \"should update member expression prop value based on the mapping\",\n        source: `<Component someProp={OldNamespace.value} />`,\n        valuesMapping: {\n          \"OldNamespace.value\": { value: \"NewNamespace.value\", type: \"MemberExpression\" }\n        },\n        expected: `<Component someProp={NewNamespace.value} />`\n      },\n      {\n        description: \"should leave the prop unchanged if the value is not in the mapping\",\n        source: `<Component someProp=\"unchangedValue\" />`,\n        valuesMapping: {\n          oldValue: { value: \"newValue\", type: \"Literal\" }\n        },\n        expected: `<Component someProp=\"unchangedValue\" />`\n      },\n      {\n        description: \"should change value to enum\",\n        source: `<Component someProp />`,\n        valuesMapping: {\n          true: { value: \"Dialog.sizes.SMALL\", type: \"MemberExpression\" }\n        },\n        expected: `<Component someProp={Dialog.sizes.SMALL} />`\n      },\n      {\n        description: \"should change value to null if setting to true\",\n        source: `<Component someProp={false} />`,\n        valuesMapping: {\n          false: { value: true, type: \"MemberExpression\" }\n        },\n        expected: `<Component someProp />`\n      }\n    ];\n\n    testCases.forEach(({ description, source, valuesMapping, expected }) => {\n      it(description, () => {\n        const elementPath = getElementPath(source);\n        updatePropValues(jscodeshift, elementPath, \"someProp\", valuesMapping);\n        const output = jscodeshift(elementPath).toSource();\n        expect(output).toBe(expected);\n      });\n    });\n  });\n\n  describe(\"updateStaticPropKeys\", () => {\n    const testCases = [\n      {\n        description: \"should update the static key from Dialog.size.SMALL to Dialog.sizes.SMALL\",\n        source: `<Component size={Dialog.size.SMALL} />`,\n        propName: \"size\",\n        keysMapping: { size: \"sizes\" },\n        expected: `<Component size={Dialog.sizes.SMALL} />`\n      },\n      {\n        description: \"should leave the prop unchanged if the key is not in the mapping\",\n        source: `<Component size={Dialog.otherKey.SMALL} />`,\n        propName: \"size\",\n        keysMapping: { size: \"sizes\" },\n        expected: `<Component size={Dialog.otherKey.SMALL} />`\n      }\n    ];\n\n    testCases.forEach(({ description, source, propName, keysMapping, expected }) => {\n      it(description, () => {\n        const elementPath = getElementPath(source);\n        updateStaticPropKeys(jscodeshift, elementPath, propName, keysMapping);\n        const output = jscodeshift(elementPath).toSource();\n        expect(output).toBe(expected);\n      });\n    });\n  });\n\n  describe(\"updateComponentNamespaceProps\", () => {\n    const testCases = [\n      {\n        description: \"should update the namespace from OldNamespace to NewNamespace\",\n        source: `<Component size={OldNamespace.size.SMALL} />`,\n        oldNamespace: \"OldNamespace\",\n        newNamespace: \"NewNamespace\",\n        expected: `<Component size={NewNamespace.size.SMALL} />`\n      },\n      {\n        description: \"should not change anything if the namespace does not match\",\n        source: `<Component size={DifferentNamespace.size.SMALL} />`,\n        oldNamespace: \"OldNamespace\",\n        newNamespace: \"NewNamespace\",\n        expected: `<Component size={DifferentNamespace.size.SMALL} />`\n      },\n      {\n        description: \"should handle multiple occurrences of the namespace\",\n        source: `<Component size={OldNamespace.size.SMALL} weight={OldNamespace.weight.HEAVY} />`,\n        oldNamespace: \"OldNamespace\",\n        newNamespace: \"NewNamespace\",\n        expected: `<Component size={NewNamespace.size.SMALL} weight={NewNamespace.weight.HEAVY} />`\n      }\n    ];\n\n    testCases.forEach(({ description, source, oldNamespace, newNamespace, expected }) => {\n      it(description, () => {\n        const elementPath = getElementPath(source);\n        updateComponentNamespaceProps(jscodeshift, elementPath, oldNamespace, newNamespace);\n        const output = jscodeshift(elementPath).toSource();\n        expect(output).toBe(expected);\n      });\n    });\n  });\n});\n"
  },
  {
    "path": "packages/codemod/src/utils/component-jsx-utils.ts",
    "content": "import { ASTPath, Collection, JSCodeshift, JSXElement } from \"jscodeshift\";\n\n/**\n * Finds all JSX elements that match a component name.\n */\nexport function findComponentElements(root: Collection, componentName: string): Collection<JSXElement> {\n  return root.findJSXElements(componentName);\n}\n\n/**\n * Updates the name of a JSX element.\n */\nexport function updateComponentName(j: JSCodeshift, elementPath: ASTPath<JSXElement>, newName: string) {\n  const elements = [elementPath.node.openingElement, elementPath.node.closingElement];\n  elements.forEach(element => {\n    if (!element?.name) return;\n    element.name = j.jsxIdentifier(newName);\n  });\n}\n"
  },
  {
    "path": "packages/codemod/src/utils/import-utils.ts",
    "content": "import { ASTPath, Collection, ImportDeclaration, ImportSpecifier, JSCodeshift } from \"jscodeshift\";\nimport { CORE_IMPORT_PATH, CORE_NEXT_IMPORT_PATH } from \"../consts\";\n\n/**\n * Retrieves all import declarations that matches a path for a root (file).\n */\nexport function getImports(root: Collection, path: string): Collection<ImportDeclaration> {\n  return root.find(ImportDeclaration, {\n    source: {\n      value: path\n    }\n  });\n}\n\n/**\n * Retrieves all \"monday-ui-react-core\" import declarations for a root.\n */\nexport function getCoreImportsForFile(root: Collection, path = CORE_IMPORT_PATH): Collection<ImportDeclaration> {\n  return getImports(root, path);\n}\n\n/**\n * Retrieves all \"monday-ui-react-core/next\" import declarations for a root.\n */\nexport function getCoreNextImportsForFile(root: Collection): Collection<ImportDeclaration> {\n  return getImports(root, CORE_NEXT_IMPORT_PATH);\n}\n\nexport function findImportsThatIncludesSpecifier(\n  j: JSCodeshift,\n  paths: Collection<ImportDeclaration>,\n  specifierName: string\n): Collection<ImportDeclaration> {\n  return paths.filter(path => {\n    const specifiers = extractSpecifiersFromImport(j, path);\n    return specifiers.some(spec => spec.imported.name === specifierName);\n  });\n}\n\n/**\n * Updates the name of an import specifier (named import) in an import declaration.\n */\nexport function updateImportSpecifierName(\n  j: JSCodeshift,\n  importDeclarationPath: ASTPath<ImportDeclaration>,\n  oldName: string,\n  newName: string,\n  alias?: string\n) {\n  j(importDeclarationPath)\n    .find(ImportSpecifier, { imported: { name: oldName } })\n    .replaceWith(path => {\n      // override alias, or use current alias if exists, or use newName if no alias is provided\n      const oldAlias = path.node.local?.name;\n      const hasAlias = oldAlias && oldAlias !== oldName;\n      const newAlias = alias || newName;\n      return j.importSpecifier(j.identifier(newName), j.identifier(hasAlias ? oldAlias : newAlias));\n    });\n}\n\n/**\n * Removes a specific import specifier (named import) from an import declaration.\n * If the import declaration does not have any other specifiers, the whole import declaration is removed afterward.\n */\nexport function removeSpecifierFromImport(j: JSCodeshift, path: ASTPath<ImportDeclaration>, specifierName: string) {\n  j(path)\n    .find(ImportSpecifier, { imported: { name: specifierName } })\n    .remove();\n  const specifiers = path.node.specifiers;\n  if (!specifiers?.length) {\n    j(path).remove();\n  }\n}\n\n/**\n * Retrieves all import specifiers (named imports) from a given import declaration.\n */\nfunction extractSpecifiersFromImport(j: JSCodeshift, path: ASTPath<ImportDeclaration>): ImportSpecifier[] {\n  const specifiers: ImportSpecifier[] = [];\n  j(path)\n    .find(ImportSpecifier)\n    .forEach(namedImport => {\n      specifiers.push(namedImport.node);\n    });\n  return specifiers;\n}\n\n/**\n * Checks a collection of import declarations for if a specific component is imported.\n * It returns the name used in the import, either the original name or an alias.\n * Returns null if all import declarations does not include the component.\n */\nexport function getComponentNameOrAliasFromImports(\n  j: JSCodeshift,\n  paths: Collection<ImportDeclaration>,\n  componentName: string\n): string | null {\n  let componentNameOrAlias = null;\n  paths.forEach(path => {\n    const componentImportSpecifier = j(extractSpecifiersFromImport(j, path))\n      .filter(spec => spec.node.imported.name === componentName)\n      .at(0);\n    if (componentImportSpecifier.length) {\n      componentNameOrAlias = componentImportSpecifier.get().node.local.name;\n    }\n  });\n  return componentNameOrAlias;\n}\n\nexport function renameImportPath(path: ASTPath<ImportDeclaration>, newPathName: string) {\n  path.get().node.source.value = newPathName;\n}\n"
  },
  {
    "path": "packages/codemod/src/utils/index.ts",
    "content": "export { default as wrap } from \"./wrap-transformation\";\nexport * from \"./import-utils\";\nexport * from \"./component-jsx-utils\";\nexport * from \"./prop-utils\";\nexport * from \"./report-utils\";\n"
  },
  {
    "path": "packages/codemod/src/utils/prop-utils.ts",
    "content": "import {\n  ASTPath,\n  Collection,\n  JSCodeshift,\n  JSXAttribute,\n  JSXElement,\n  JSXExpressionContainer,\n  JSXOpeningElement,\n  MemberExpression\n} from \"jscodeshift\";\nimport { logPropMigrationError } from \"./report-utils\";\n\n/**\n * Updates a prop name in a JSX element\n */\nexport function updatePropName(\n  propCollection: Collection<JSXAttribute>,\n  propsNamesMappingOldToNew: Record<string, string>\n): void {\n  propCollection.forEach(attr => {\n    const propName = attr.node.name.name;\n    if (typeof propName !== \"string\") return;\n    const newPropName = propsNamesMappingOldToNew[propName];\n    if (newPropName) {\n      attr.node.name.name = newPropName;\n    }\n  });\n}\n\n/**\n * Checks for whether a prop is used in a JSX element\n */\nexport function isPropExists(j: JSCodeshift, elementPath: ASTPath<JSXElement>, propName: string): boolean {\n  const attributes = elementPath.node.openingElement.attributes;\n  if (!attributes) return false;\n  return attributes.some(path => path.type === \"JSXAttribute\" && path.name.name === propName);\n}\n\n/**\n * Finds props on a JSX element\n */\nexport function findProps(j: JSCodeshift, elementPath: ASTPath<JSXElement>, ...propNames: string[]) {\n  return j(elementPath)\n    .find(JSXOpeningElement)\n    .find(JSXAttribute)\n    .filter(attr => {\n      if (\n        elementPath.node.openingElement.name.type === \"JSXIdentifier\" &&\n        attr.parentPath.node.name.name !== elementPath.node.openingElement.name.name\n      ) {\n        return false;\n      }\n      const attrName = attr.node.name.type === \"JSXIdentifier\" ? attr.node.name.name : \"\";\n      return propNames.includes(attrName);\n    });\n}\n/**\n * Removes props from a JSX element\n */\nexport function removeProp(j: JSCodeshift, elementPath: ASTPath<JSXElement>, ...propsNames: string[]): void {\n  findProps(j, elementPath, ...propsNames).remove();\n}\n\n/**\n * Gets the computed value of a prop\n */\nexport function getPropValue(j: JSCodeshift, prop: JSXAttribute) {\n  const value = prop.value;\n\n  // boolean flag value (e.g. <Button disabled />)\n  if (value === null) {\n    return true;\n  }\n\n  // string value (e.g. <Button text=\"Click me\" />)\n  if (value?.type === \"StringLiteral\") {\n    return value.value;\n  }\n\n  // expression value (e.g. <Button text={...} />).\n  if (value?.type === \"JSXExpressionContainer\") {\n    if (\n      value.expression?.type === \"StringLiteral\" ||\n      value.expression?.type === \"NumericLiteral\" ||\n      value.expression?.type === \"BooleanLiteral\"\n    ) {\n      // e.g. <Button text={true} /> or <Button text={\"text\"} or <Button text={20} />\n      return value.expression.value;\n    }\n\n    if (value.expression.type === \"MemberExpression\") {\n      // e.g. <Button border={Box.borders.DEFAULT} />\n      return j(value.expression).toSource();\n    }\n  }\n  // can be very complex, we'll have to compare strings\n  return value ? j(value).toSource() : undefined;\n}\n\nexport function setPropValue(\n  j: JSCodeshift,\n  attributePath: ASTPath<JSXAttribute>,\n  newValue: {\n    value: string | number | boolean;\n    type: \"MemberExpression\" | \"Literal\";\n  }\n): void {\n  if (typeof newValue.value !== \"string\") {\n    const newValueIsTrue = typeof newValue.value === \"boolean\" && newValue.value;\n    attributePath.node.value = newValueIsTrue ? null : j.jsxExpressionContainer(j.literal(newValue.value));\n  } else {\n    if (newValue.type === \"MemberExpression\") {\n      const objectValue = j(`${newValue.value}`).find(j.ExpressionStatement).get()?.node?.expression;\n      if (!objectValue) return;\n      attributePath.node.value = j.jsxExpressionContainer(objectValue);\n    } else if (newValue.type === \"Literal\") {\n      attributePath.node.value = j.literal(newValue.value);\n    }\n  }\n}\n\nexport function addNewProp(\n  j: JSCodeshift,\n  elementPath: ASTPath<JSXElement>,\n  propName: string,\n  propValue: string,\n  propValueType: \"MemberExpression\" | \"Literal\"\n): void {\n  if (isPropExists(j, elementPath, propName)) return;\n  const propValueNode =\n    propValueType === \"MemberExpression\" ? j.jsxExpressionContainer(j.identifier(propValue)) : j.literal(propValue);\n  const newProp = j.jsxAttribute(j.jsxIdentifier(propName), propValueNode);\n  elementPath.node.openingElement.attributes?.push(newProp);\n}\n\n/**\n * Checks if a Collection of props have the same value\n */\nexport function propsValueMatch(j: JSCodeshift, propsCollection: Collection<JSXAttribute>): boolean {\n  const values = propsCollection.nodes().map(prop => getPropValue(j, prop));\n  return values.every(value => value === values[0]);\n}\n\n/**\n * Perform a regular prop migration on a JSX element, and logs an error if conditions are not met\n * 1. If new prop is not found, update the prop name\n * 2. If both props are found, check if the values match\n *   - If they do, remove the old prop\n *   - If they don't, log an error\n */\nexport function migratePropsNames(\n  j: JSCodeshift,\n  elementPath: ASTPath<JSXElement>,\n  filePath: string,\n  componentName: string,\n  propsNamesMappingOldToNew: Record<string, string>\n): void {\n  Object.entries(propsNamesMappingOldToNew).forEach(([deprecatedPropName, newPropName]) => {\n    const props = findProps(j, elementPath, deprecatedPropName, newPropName);\n    if (!props.length) {\n      return;\n    }\n\n    if (props.length === 1) {\n      updatePropName(props, { [deprecatedPropName]: newPropName });\n      return;\n    }\n\n    if (propsValueMatch(j, props)) {\n      removeProp(j, elementPath, deprecatedPropName);\n    } else {\n      logPropMigrationError(filePath, componentName, deprecatedPropName, newPropName);\n    }\n  });\n}\n\nexport function updatePropValues(\n  j: JSCodeshift,\n  elementPath: ASTPath<JSXElement>,\n  propName: string,\n  valuesMapping: Record<\n    string,\n    {\n      value: string | number | boolean;\n      type: \"MemberExpression\" | \"Literal\";\n    }\n  >\n): void {\n  findProps(j, elementPath, propName).forEach(attributePath => {\n    const currentPropValue = getPropValue(j, attributePath.node);\n    if (currentPropValue !== undefined) {\n      const newValue = valuesMapping[String(currentPropValue)];\n      if (newValue !== undefined) {\n        setPropValue(j, attributePath, newValue);\n      }\n    }\n  });\n}\n\nexport function updateStaticPropKeys(\n  j: JSCodeshift,\n  elementPath: ASTPath<JSXElement>,\n  propName: string,\n  keysMapping: Record<string, string>\n) {\n  findProps(j, elementPath, propName)\n    .find(JSXExpressionContainer, { expression: { type: \"MemberExpression\" } })\n    .find(MemberExpression)\n    .find(MemberExpression)\n    .forEach(attributePath => {\n      const currentPropValue = attributePath.value;\n      const currentProperty = currentPropValue?.property;\n      if (currentProperty?.type !== \"Identifier\") return;\n      const newValue = keysMapping[currentProperty.name];\n      if (newValue === undefined) return;\n      currentProperty.name = newValue;\n    });\n}\n\n/**\n * Updates props that are using the component namespace to use the new namespace\n * e.g. <OldName size={OldName.sizes.XXL}> -> <NewName size={NewName.sizes.XXL}>\n * Should be used when updating specifiers and component jsx names\n */\nexport function updateComponentNamespaceProps(\n  j: JSCodeshift,\n  elementPath: ASTPath<JSXElement>,\n  oldNamespace: string,\n  newNamespace: string\n) {\n  j(elementPath)\n    .find(JSXAttribute)\n    .find(JSXExpressionContainer)\n    .forEach(exprContainerPath => {\n      j(exprContainerPath)\n        .find(MemberExpression)\n        .forEach(memberExprPath => {\n          // Only update the base of the MemberExpression chain\n          // e.g. <OldName size={OldName.attr.other.OldName.XXL}> would only update the first 'OldName'\n          let base = memberExprPath.node.object;\n          while (base.type === \"MemberExpression\") {\n            base = base.object;\n          }\n\n          if (base.type === \"Identifier\" && base.name === oldNamespace) {\n            base.name = newNamespace;\n          }\n        });\n    });\n}\n"
  },
  {
    "path": "packages/codemod/src/utils/report-utils.ts",
    "content": "import chalk from \"chalk\";\n/**\n * Logs an error message about the usage of both deprecated and new props in same component with different values.\n */\nexport function logPropMigrationError(\n  filePath: string,\n  componentName: string,\n  deprecatedPropName: string,\n  newPropName: string\n): void {\n  const message =\n    `\\n\\n${error()} ${componentNameStyle(componentName)} ${filePathStyle(filePath)}:` +\n    `\\n\\tComponent uses both ${deprecatedPropNameStyle(deprecatedPropName)} and ${newPropNameStyle(newPropName)}. \\n`;\n\n  console.error(message);\n}\n\n// chalk styling\nconst error = () => chalk.red(\" ERROR \");\nconst componentNameStyle = (name: string) => chalk.bold.bgYellow.black(` ${name} `);\nconst filePathStyle = (path: string) => chalk.bold(path);\nconst deprecatedPropNameStyle = (name: string) => chalk.italic.red(`\"${name}\" (deprecated)`);\nconst newPropNameStyle = (name: string) => chalk.italic.green(`\"${name}\"`);\n"
  },
  {
    "path": "packages/codemod/src/utils/wrap-transformation.ts",
    "content": "import { Transform } from \"jscodeshift\";\nimport { TransformationContext } from \"../../types\";\n\nexport default function wrapTransformation(transform: (context: TransformationContext) => void): Transform {\n  return (file, api) => {\n    const j = api.jscodeshift.withParser(\"tsx\");\n    const root = j(file.source);\n    const filePath = file.path;\n\n    transform({ j, root, filePath });\n\n    return root.toSource();\n  };\n}\n"
  },
  {
    "path": "packages/codemod/test/setup.ts",
    "content": ""
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/AttentionBox-component-migration.ts",
    "content": "import {\n  findComponentElements,\n  getComponentNameOrAliasFromImports,\n  getCoreImportsForFile,\n  migratePropsNames,\n  wrap\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Update the 'componentClassName' prop to 'className'\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"AttentionBox\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    migratePropsNames(j, elementPath, filePath, componentName, { componentClassName: \"className\" });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/Avatar-component-migration.ts",
    "content": "import {\n  findComponentElements,\n  getComponentNameOrAliasFromImports,\n  getCoreImportsForFile,\n  migratePropsNames,\n  wrap\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Update the 'isSquare' prop to 'square'\n * 2. Update the 'isDisabled' prop to 'disabled'\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"Avatar\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    migratePropsNames(j, elementPath, filePath, componentName, { isSquare: \"square\", isDisabled: \"disabled\" });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/AvatarGroup-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  removeProp\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Remove the 'removePadding' prop\n */\nfunction transform({ j, root }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"AvatarGroup\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    removeProp(j, elementPath, \"removePadding\");\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/Box-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  updatePropValues\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. \"Border\" prop update 'Box.borders.DEFAULT' to true\n */\nfunction transform({ j, root }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"Box\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    updatePropValues(j, elementPath, \"border\", {\n      \"Box.borders.DEFAULT\": {\n        value: true,\n        type: \"MemberExpression\"\n      }\n    });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/BreadcrumbItem-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Update the 'isDisabled' prop to 'disabled'\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"BreadcrumbItem\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    migratePropsNames(j, elementPath, filePath, componentName, { isDisabled: \"disabled\" });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/Button-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Update the 'dataTestId' prop to 'data-testid'\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"Button\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    migratePropsNames(j, elementPath, filePath, componentName, { dataTestId: \"data-testid\" });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/ButtonGroup-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Update the 'componentClassName' prop to 'className'\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"ButtonGroup\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    migratePropsNames(j, elementPath, filePath, componentName, { componentClassName: \"className\" });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/Checkbox-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Update the 'componentClassName' prop to 'className'\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"Checkbox\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    migratePropsNames(j, elementPath, filePath, componentName, { componentClassName: \"className\" });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/Chips-component-migration.ts",
    "content": "import {\n  findComponentElements,\n  getCoreImportsForFile,\n  removeProp,\n  isPropExists,\n  wrap,\n  getComponentNameOrAliasFromImports,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Remove the 'clickable' prop when 'onClick' prop exists\n * 2. Remove the 'isClickable' prop when 'onClick' prop exists\n * 3. Update the 'dataTestId' prop to 'data-testid'\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"Chips\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    if (isPropExists(j, elementPath, \"onClick\")) {\n      removeProp(j, elementPath, \"clickable\", \"isClickable\");\n    }\n\n    migratePropsNames(j, elementPath, filePath, componentName, { dataTestId: \"data-testid\" });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/Clickable-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Update the 'dataTestId' prop to 'data-testid'\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"Clickable\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    migratePropsNames(j, elementPath, filePath, componentName, { dataTestId: \"data-testid\" });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/ColorPicker-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  updateStaticPropKeys\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Update the 'colorStyle' prop static prop from 'COLOR_STYLES' to 'colorStyles'\n */\nfunction transform({ j, root }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"ColorPicker\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    updateStaticPropKeys(j, elementPath, \"colorStyle\", { COLOR_STYLES: \"colorStyles\" });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/ColorPickerContent-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  updateStaticPropKeys\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Update the 'colorStyle' prop static prop from 'COLOR_STYLES' to 'colorStyles'\n */\nfunction transform({ j, root }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"ColorPickerContent\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    updateStaticPropKeys(j, elementPath, \"colorStyle\", { COLOR_STYLES: \"colorStyles\" });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/Counter-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Update the 'wrapperClassName' prop to 'className'\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"Counter\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    migratePropsNames(j, elementPath, filePath, componentName, { wrapperClassName: \"className\" });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/Dialog-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Update the 'shoudlCallbackOnMount' prop to 'shouldCallbackOnMount'\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"Dialog\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    migratePropsNames(j, elementPath, filePath, componentName, { shoudlCallbackOnMount: \"shouldCallbackOnMount\" });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/DialogContent-container-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  updatePropValues\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. \"size\" prop update 'Dialog.DialogSize.MEDIUM' to 'Dialog.DialogSize.SMALL'\n */\nfunction transform({ j, root }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"DialogContentContainer\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    updatePropValues(j, elementPath, \"size\", {\n      \"DialogContentContainer.sizes.MEDIUM\": {\n        value: \"DialogContentContainer.sizes.SMALL\",\n        type: \"MemberExpression\"\n      }\n    });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/Divider-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Update the 'classname' prop to 'className'\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"Divider\");\n  if (!componentName) return;\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    migratePropsNames(j, elementPath, filePath, componentName, { classname: \"className\" });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/Dropdown-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  updateStaticPropKeys,\n  removeProp\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Update the 'size' prop static prop from 'size' to 'sizes'\n * 2. Removes 'withReadOnlyStyle' prop if it exists\n */\nfunction transform({ j, root }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"Dropdown\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    updateStaticPropKeys(j, elementPath, \"size\", { size: \"sizes\" });\n    removeProp(j, elementPath, \"withReadOnlyStyle\");\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/Icon-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  removeProp,\n  isPropExists,\n  getPropValue,\n  findProps\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Remove clickable prop if it exists and it is false\n */\nfunction transform({ j, root }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"Icon\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    if (!isPropExists(j, elementPath, \"clickable\")) return;\n    const prop = findProps(j, elementPath, \"clickable\").get(0);\n    const clickableValue = getPropValue(j, prop.node);\n    if (clickableValue === false) {\n      removeProp(j, elementPath, \"clickable\");\n    }\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/IconButton-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Update the 'dataTestId' prop to 'data-testid'\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"IconButton\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    migratePropsNames(j, elementPath, filePath, componentName, { dataTestId: \"data-testid\" });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/InputField-component-import-migration.ts",
    "content": "import { ImportDeclaration } from \"jscodeshift\";\nimport {\n  getCoreImportsForFile,\n  wrap,\n  getComponentNameOrAliasFromImports,\n  updateImportSpecifierName,\n  findComponentElements,\n  findImportsThatIncludesSpecifier,\n  removeSpecifierFromImport,\n  updateComponentName,\n  updateComponentNamespaceProps\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Remove the 'InputField' import if 'TextField' is already imported from 'monday-ui-react-core'\n * 2. Update the 'InputField' import to 'TextField' (or 'TextField as InputField' if 'TextField' is already imported from other source)\n * 3. Update the component name jsx usage from 'InputField' to 'TextField'\n */\nfunction transform({ j, root }: TransformationContext) {\n  const coreImports = getCoreImportsForFile(root);\n  if (!coreImports.length) return;\n\n  const coreOldInputFieldComponentImports = findImportsThatIncludesSpecifier(j, coreImports, \"InputField\");\n  if (!coreOldInputFieldComponentImports.length) return;\n\n  const allImports = root.find(ImportDeclaration);\n\n  // This finds all imports that has 'TextField' as imported specifier\n  const rootTextFieldImports = findImportsThatIncludesSpecifier(j, allImports, \"TextField\");\n\n  // Check in addition if the import of 'TextField' that was found is from Vibe\n  const isTextFieldAlreadyImportedFromCore = rootTextFieldImports.some(\n    path => path.node.source?.value === \"monday-ui-react-core\"\n  );\n\n  // Keep the original alias if it exists\n  const componentName = getComponentNameOrAliasFromImports(j, coreOldInputFieldComponentImports.at(0), \"InputField\");\n  const hasAlias = !!componentName && componentName !== \"InputField\";\n\n  // if 'TextField' specifier already exists in file (not from Vibe!) alias should be added to the new import\n  const newAlias = rootTextFieldImports.length ? \"InputField\" : \"\";\n  const alias = hasAlias ? componentName : newAlias;\n\n  if (isTextFieldAlreadyImportedFromCore) {\n    removeSpecifierFromImport(j, coreOldInputFieldComponentImports.at(0).get(), \"InputField\");\n  } else {\n    updateImportSpecifierName(j, coreOldInputFieldComponentImports.at(0).get(), \"InputField\", \"TextField\", alias);\n  }\n\n  const elements = findComponentElements(root, componentName || \"InputField\");\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    updateComponentName(j, elementPath, alias || \"TextField\");\n    updateComponentNamespaceProps(j, elementPath, \"InputField\", alias || \"TextField\");\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/Label-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  migratePropsNames,\n  removeProp\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Update the 'wrapperClassName' prop to 'className'\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"Label\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    migratePropsNames(j, elementPath, filePath, componentName, { wrapperClassName: \"className\" });\n    removeProp(j, elementPath, \"isAnimationDisabled\");\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/Link-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  updateStaticPropKeys,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Update the 'target' prop static prop from 'target' to 'targets'\n * 2. Update the 'componentClassName' prop to 'className'\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"Link\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    updateStaticPropKeys(j, elementPath, \"target\", { target: \"targets\" });\n    migratePropsNames(j, elementPath, filePath, componentName, { componentClassName: \"className\" });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/Loader-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Update the 'svgClassName' prop to 'className'\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"Loader\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    migratePropsNames(j, elementPath, filePath, componentName, { svgClassName: \"className\" });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/Menu-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Update the 'classname' prop to 'className'\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"Menu\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    migratePropsNames(j, elementPath, filePath, componentName, { classname: \"className\" });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/MenuButton-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Update the 'classname' prop to 'className'\n * 2. Update the 'disabledReason' prop to 'tooltipContent'\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"MenuButton\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    migratePropsNames(j, elementPath, filePath, componentName, {\n      componentClassName: \"className\",\n      disabledReason: \"tooltipContent\"\n    });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/MenuDivider-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Update the 'classname' prop to 'className'\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"MenuDivider\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    migratePropsNames(j, elementPath, filePath, componentName, { classname: \"className\" });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/MenuItem-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Update the 'classname' prop to 'className'\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"MenuItem\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    migratePropsNames(j, elementPath, filePath, componentName, { classname: \"className\" });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/MenuItemButton-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Update the 'classname' prop to 'className'\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"MenuItemButton\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    migratePropsNames(j, elementPath, filePath, componentName, { classname: \"className\" });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/MenuTitle-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Update the 'classname' prop to 'className'\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"MenuTitle\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    migratePropsNames(j, elementPath, filePath, componentName, { classname: \"className\" });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/Modal-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  removeProp\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Remove the 'hideCloseButton' prop\n */\nfunction transform({ j, root }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"Modal\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    removeProp(j, elementPath, \"hideCloseButton\");\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/ModalHeader-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  removeProp\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Remove the 'hideCloseButton' prop\n */\nfunction transform({ j, root }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"ModalHeader\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    removeProp(j, elementPath, \"hideCloseButton\");\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/RadioButton-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Update the 'componentClassName' prop to 'className'\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"RadioButton\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    migratePropsNames(j, elementPath, filePath, componentName, { componentClassName: \"className\" });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/Search-component-import-migration.ts",
    "content": "import { ImportDeclaration } from \"jscodeshift\";\nimport {\n  getCoreImportsForFile,\n  wrap,\n  getComponentNameOrAliasFromImports,\n  updateImportSpecifierName,\n  findComponentElements,\n  findImportsThatIncludesSpecifier,\n  removeSpecifierFromImport,\n  updateComponentName,\n  updateComponentNamespaceProps\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Remove the 'SearchComponent' import if 'Search' is already imported from 'monday-ui-react-core'\n * 2. Update the 'SearchComponent' import to 'Search' (or 'Search as SearchComponent' if 'Search' is already imported from other source)\n * 3. Update the component name jsx usage from 'SearchComponent' to 'Search'\n */\nfunction transform({ j, root }: TransformationContext) {\n  const coreImports = getCoreImportsForFile(root);\n  if (!coreImports.length) return;\n\n  const coreOldSearchComponentImports = findImportsThatIncludesSpecifier(j, coreImports, \"SearchComponent\");\n  if (!coreOldSearchComponentImports.length) return;\n\n  const allImports = root.find(ImportDeclaration);\n\n  // This finds all imports that has 'Search' as imported specifier\n  const rootSearchImports = findImportsThatIncludesSpecifier(j, allImports, \"Search\");\n\n  // Check in addition if the import of 'Search' that was found is from Vibe\n  const isSearchAlreadyImportedFromCore = rootSearchImports.some(\n    path => path.node.source?.value === \"monday-ui-react-core\"\n  );\n\n  // Keep the original alias if it exists\n  const componentName = getComponentNameOrAliasFromImports(j, coreOldSearchComponentImports.at(0), \"SearchComponent\");\n  const hasAlias = !!componentName && componentName !== \"SearchComponent\";\n\n  // if 'Search' specifier already exists in file (not from Vibe!) alias should be added to the new import\n  const newAlias = rootSearchImports.length ? \"SearchComponent\" : \"\";\n  const alias = hasAlias ? componentName : newAlias;\n\n  if (isSearchAlreadyImportedFromCore) {\n    removeSpecifierFromImport(j, coreOldSearchComponentImports.at(0).get(), \"SearchComponent\");\n  } else {\n    updateImportSpecifierName(j, coreOldSearchComponentImports.at(0).get(), \"SearchComponent\", \"Search\", alias);\n  }\n\n  const elements = findComponentElements(root, componentName || \"SearchComponent\");\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    updateComponentName(j, elementPath, alias || \"Search\");\n    updateComponentNamespaceProps(j, elementPath, \"SearchComponent\", alias || \"Search\");\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/Steps-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  removeProp,\n  isPropExists,\n  addNewProp,\n  getPropValue,\n  findProps\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. remove 'isOnPrimary' prop if exists and is true and add color={Steps.colors.PRIMARY}\n */\nfunction transform({ j, root }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"Steps\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    if (isPropExists(j, elementPath, \"isOnPrimary\")) {\n      const prop = findProps(j, elementPath, \"isOnPrimary\").get(0);\n      const propValue = getPropValue(j, prop.node);\n      if (propValue === true) {\n        removeProp(j, elementPath, \"isOnPrimary\");\n        addNewProp(j, elementPath, \"color\", \"Steps.colors.PRIMARY\", \"MemberExpression\");\n      }\n    }\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/TabList-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  removeProp\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Remove the 'noPadding' prop\n */\nfunction transform({ j, root }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"TabList\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    removeProp(j, elementPath, \"noPadding\");\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/TabPanels-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  removeProp\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Remove the 'renderOnlyActiveTab' prop\n */\nfunction transform({ j, root }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"TabPanels\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    removeProp(j, elementPath, \"renderOnlyActiveTab\");\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/TextField-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  migratePropsNames,\n  removeProp,\n  isPropExists\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Change the 'dataTestId' prop to 'data-testid'\n * 2. Remove 'withReadOnlyStyle' prop\n * 3. Remove 'requiredAsterisk' prop if 'required' prop exists\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"TextField\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    migratePropsNames(j, elementPath, filePath, componentName, { dataTestId: \"data-testid\" });\n    removeProp(j, elementPath, \"withReadOnlyStyle\");\n    if (isPropExists(j, elementPath, \"required\")) {\n      removeProp(j, elementPath, \"requiredAsterisk\");\n    }\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/ThemeProvider-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Update the 'theme' prop to 'themeConfig'\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"ThemeProvider\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    migratePropsNames(j, elementPath, filePath, componentName, { theme: \"themeConfig\" });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/Tipseen-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Update the 'isCloseButtonHidden' prop to 'hideCloseButton'\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"Tipseen\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    migratePropsNames(j, elementPath, filePath, componentName, { isCloseButtonHidden: \"hideCloseButton\" });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/TipseenContent-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Update the 'isDismissHidden' prop to 'hideDismiss'\n * 2. Update the 'isSubmitHidden' prop to 'hideSubmit'\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"TipseenContent\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    migratePropsNames(j, elementPath, filePath, componentName, {\n      isDismissHidden: \"hideDismiss\",\n      isSubmitHidden: \"hideSubmit\"\n    });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/Toggle-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Update the 'componentClassName' prop to 'className'\n * 2. Update the 'isDisabled' prop to 'disabled'\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"Toggle\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    migratePropsNames(j, elementPath, filePath, componentName, {\n      componentClassName: \"className\",\n      isDisabled: \"disabled\"\n    });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/Tooltip-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  removeProp\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Remove the 'withMaxWidth' prop\n */\nfunction transform({ j, root }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"Tooltip\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    removeProp(j, elementPath, \"withMaxWidth\");\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/AttentionBox-component-migration.test.ts",
    "content": "import transform from \"../AttentionBox-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { AttentionBox } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"AttentionBox component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<AttentionBox componentClassName=\"old-class\" />`),\n    prependImport(`<AttentionBox className=\"old-class\" />`),\n    \"should update 'componentClassName' to 'className'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<div><AttentionBox componentClassName=\"old-class\" /></div>`),\n    prependImport(`<div><AttentionBox className=\"old-class\" /></div>`),\n    \"should update 'componentClassName' to 'className' in a nested structure\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<AttentionBox componentClassName=\"old-class\" type=\"info\" />`),\n    prependImport(`<AttentionBox className=\"old-class\" type=\"info\" />`),\n    \"should update 'componentClassName' to 'className' while maintaining other props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `\n      <>\n        <AttentionBox componentClassName=\"old-class\" />\n        <AttentionBox componentClassName=\"another-class\" />\n      </>`\n    ),\n    prependImport(`\n      <>\n        <AttentionBox className=\"old-class\" />\n        <AttentionBox className=\"another-class\" />\n      </>`),\n    \"should handle multiple instances of AttentionBox each with 'componentClassName'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<AttentionBox componentClassName=\"class-one\" className=\"class-two\" />`),\n    prependImport(`<AttentionBox componentClassName=\"class-one\" className=\"class-two\" />`),\n    \"should not change when when both 'componentClassName' and 'className' props exist with different literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<AttentionBox componentClassName={styles.something} className=\"class-two\" />`),\n    prependImport(`<AttentionBox componentClassName={styles.something} className=\"class-two\" />`),\n    \"should not change when when both 'componentClassName' and 'className' props exist with different complex and literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<AttentionBox componentClassName={styles.classOne} className={styles.classTwo} />`),\n    prependImport(`<AttentionBox componentClassName={styles.classOne} className={styles.classTwo} />`),\n    \"should not change when when both 'componentClassName' and 'className' props exist with different complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<AttentionBox componentClassName={styles.classOne} className={styles.classOne} />`),\n    prependImport(`<AttentionBox className={styles.classOne} />`),\n    \"should remove 'componentClassName' when when both 'componentClassName' and 'className' props exist with same complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<AttentionBox componentClassName=\"class-one\" className=\"class-one\" />`),\n    prependImport(`<AttentionBox className=\"class-one\" />`),\n    \"should remove 'componentClassName' when when both 'componentClassName' and 'className' props exist with same literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<AttentionBox componentClassName={\"class-one\"} className=\"class-one\" />`),\n    prependImport(`<AttentionBox className=\"class-one\" />`),\n    \"should remove 'componentClassName' when when both 'componentClassName' and 'className' props exist with same literal values while one is inside an expression\"\n  );\n\n  it.todo(\"nested identical components\", () => {\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(\n        `<AttentionBox componentClassName=\"old-class\"><AttentionBox className=\"new class\" /></AttentionBox>`\n      ),\n      prependImport(`<AttentionBox className=\"old-class\"><AttentionBox className=\"new class\" /></AttentionBox>`),\n      \"should update 'componentClassName' to 'className' only on parent element\"\n    );\n  });\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<AttentionBox componentClassName=\"old-class\"><div className=\"new class\" /></AttentionBox>`),\n    prependImport(`<AttentionBox className=\"old-class\"><div className=\"new class\" /></AttentionBox>`),\n    \"should update 'componentClassName' to 'className' when exists in child component with different value\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `<AttentionBox componentClassName=\"old-class\"><div><AttentionBoxItem className=\"new class\"></AttentionBoxItem></div></AttentionBox>`\n    ),\n    prependImport(\n      `<AttentionBox className=\"old-class\"><div><AttentionBoxItem className=\"new class\"></AttentionBoxItem></div></AttentionBox>`\n    ),\n    \"should update 'componentClassName' to 'className' with inner nested children\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<AttentionBox componentClassName=\"old-class\"><div componentClassName=\"new class\" /></AttentionBox>`),\n    prependImport(`<AttentionBox className=\"old-class\"><div componentClassName=\"new class\" /></AttentionBox>`),\n    \"should update 'componentClassName' to 'className' only on parent element and not on child\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<AttentionBox componentClassName=\"old-class\" nestedElement={<div className=\"other-class\" />} />`),\n    prependImport(`<AttentionBox className=\"old-class\" nestedElement={<div className=\"other-class\" />} />`),\n    \"should update 'componentClassName' to 'className2'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<AttentionBox componentClassName=\"old-class\" />`,\n    `<AttentionBox componentClassName=\"old-class\" />`,\n    \"should not change when no import even if 'componentClassName' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent componentClassName=\"old-class\" />`),\n    prependImport(`<OtherComponent componentClassName=\"old-class\" />`),\n    \"should not affect other components with 'componentClassName'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent } from \"monday-ui-react-core\";\n      <AttentionBox componentClassName=\"old-class\" />\n    `,\n    `\n      import { OtherComponent } from \"monday-ui-react-core\";\n      <AttentionBox componentClassName=\"old-class\" />\n    `,\n    \"should not change when 'AttentionBox' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as AttentionBox } from \"monday-ui-react-core\";\n      <AttentionBox componentClassName=\"old-class\" />\n    `,\n    `\n      import { OtherComponent as AttentionBox } from \"monday-ui-react-core\";\n      <AttentionBox componentClassName=\"old-class\" />\n    `,\n    \"should not change when 'AttentionBox' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { AttentionBox as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent componentClassName=\"old-class\" />\n    `,\n    `\n      import { AttentionBox as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent className=\"old-class\" />\n    `,\n    \"should change when 'AttentionBox' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Avatar-component-migration.test.ts",
    "content": "import transform from \"../Avatar-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { Avatar } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"Avatar component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Avatar isSquare />`),\n    prependImport(`<Avatar square />`),\n    \"should update 'isSquare' to 'square'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Avatar isDisabled />`),\n    prependImport(`<Avatar disabled />`),\n    \"should update 'isDisabled' to 'disabled'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Avatar isSquare isDisabled />`),\n    prependImport(`<Avatar square disabled />`),\n    \"should update both 'isSquare' and 'isDisabled' when both are present\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Avatar square isDisabled />`),\n    prependImport(`<Avatar square disabled />`),\n    \"should update 'isDisabled' even if encountered another new prop from same migration before that\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Avatar isSquare square />`),\n    prependImport(`<Avatar square />`),\n    \"should remove 'isSquare' if both 'isSquare' and 'square' are present\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Avatar disabled />`),\n    prependImport(`<Avatar disabled />`),\n    \"should not change if Avatar already uses new prop 'disabled'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Avatar square />`),\n    prependImport(`<Avatar square />`),\n    \"should not change if Avatar already uses new prop 'square'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Avatar isDisabled disabled />`),\n    prependImport(`<Avatar disabled />`),\n    \"should remove 'isDisabled' if both 'isDisabled' and 'disabled' are present\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`\n        <div>\n          <Avatar isSquare />\n          <Avatar isDisabled />\n        </div>\n      `),\n    prependImport(`\n        <div>\n          <Avatar square />\n          <Avatar disabled />\n        </div>\n      `),\n    \"should handle multiple Avatar instances each with props to update\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent isSquare isDisabled />`),\n    prependImport(`<OtherComponent isSquare isDisabled />`),\n    \"should not change other components even if they have similar props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Avatar isSquare={true} isDisabled={true} text=\"avatar\" />`),\n    prependImport(`<Avatar square={true} disabled={true} text=\"avatar\" />`),\n    \"should correctly update props when mixed with other attributes\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Avatar isSquare={false} isDisabled={false} />`),\n    prependImport(`<Avatar square={false} disabled={false} />`),\n    \"should correctly update props when set to false\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent } from \"monday-ui-react-core\";\n      <Avatar isSquare />\n    `,\n    `\n      import { OtherComponent } from \"monday-ui-react-core\";\n      <Avatar isSquare />\n    `,\n    \"should not change when 'Avatar' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as Avatar } from \"monday-ui-react-core\";\n      <Avatar isSquare />\n    `,\n    `\n      import { OtherComponent as Avatar } from \"monday-ui-react-core\";\n      <Avatar isSquare />\n    `,\n    \"should not change when 'Avatar' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Avatar as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent isSquare />\n    `,\n    `\n      import { Avatar as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent square />\n    `,\n    \"should change when 'Avatar' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/AvatarGroup-component-migration.test.ts",
    "content": "import transform from \"../AvatarGroup-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { AvatarGroup } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"AvatarGroup component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<AvatarGroup removePadding />`),\n    prependImport(`<AvatarGroup />`),\n    \"should remove 'removePadding' prop\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<AvatarGroup removePadding={true} />`),\n    prependImport(`<AvatarGroup />`),\n    \"should remove 'removePadding' prop\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `\n      <>\n        <AvatarGroup removePadding data-testid=\"tab1\" />\n        <AvatarGroup removePadding data-testid=\"tab2\" />\n      </>`\n    ),\n    prependImport(`\n      <>\n        <AvatarGroup data-testid=\"tab1\" />\n        <AvatarGroup data-testid=\"tab2\" />\n      </>`),\n    \"should handle multiple instances of AvatarGroup each with 'removePadding'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<AvatarGroup removePadding />`,\n    `<AvatarGroup removePadding />`,\n    \"should not change when no import even if 'removePadding' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent removePadding />`),\n    prependImport(`<OtherComponent removePadding />`),\n    \"should not affect other components with 'removePadding'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { AvatarGroup } from \"other-library\";\n      <AvatarGroup removePadding />\n    `,\n    `\n      import { AvatarGroup } from \"other-library\";\n      <AvatarGroup removePadding />\n    `,\n    \"should not change when 'AvatarGroup' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as AvatarGroup } from \"other-library\";\n      <AvatarGroup removePadding />\n    `,\n    `\n      import { OtherComponent as AvatarGroup } from \"other-library\";\n      <AvatarGroup removePadding />\n    `,\n    \"should not change when 'AvatarGroup' is an alias for another component that is not from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as AvatarGroup } from \"monday-ui-react-core\";\n      <AvatarGroup removePadding />\n    `,\n    `\n      import { OtherComponent as AvatarGroup } from \"monday-ui-react-core\";\n      <AvatarGroup removePadding />\n    `,\n    \"should not change when 'AvatarGroup' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { AvatarGroup as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent removePadding />\n    `,\n    `\n      import { AvatarGroup as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent />\n    `,\n    \"should change when 'AvatarGroup' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Box-component-migration.test.ts",
    "content": "import transform from \"../Box-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { Box } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"Box component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Box border={Box.borders.DEFAULT} />`),\n    prependImport(`<Box border />`),\n    \"should update 'Box.borders.DEFAULT' to 'true'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<div><Box border={Box.borders.DEFAULT} /></div>`),\n    prependImport(`<div><Box border /></div>`),\n    \"should update 'Box.borders.DEFAULT' to 'true' in a nested structure\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Box border={Box.borders.DEFAULT} disabled />`),\n    prependImport(`<Box border disabled />`),\n    \"should update 'Box.borders.DEFAULT' to 'true' while maintaining other props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `\n      <>\n        <Box border={Box.borders.DEFAULT} />\n        <Box />\n      </>`\n    ),\n    prependImport(`\n      <>\n        <Box border />\n        <Box />\n      </>`),\n    \"should handle multiple instances of Box\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<Box border={Box.borders.DEFAULT} />`,\n    `<Box border={Box.borders.DEFAULT} />`,\n    \"should not change when no import even if 'border' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent border={Box.borders.DEFAULT} />`),\n    prependImport(`<OtherComponent border={Box.borders.DEFAULT} />`),\n    \"should not affect other components with border={Box.borders.DEFAULT}\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Counter } from \"other-library\";\n      <Box border={Box.borders.DEFAULT} />\n    `,\n    `\n      import { Counter } from \"other-library\";\n      <Box border={Box.borders.DEFAULT} />\n    `,\n    \"should not change when 'Box' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as Box } from \"other-library\";\n       <Box border={Box.borders.DEFAULT} />\n    `,\n    `\n      import { OtherComponent as Box } from \"other-library\";\n       <Box border={Box.borders.DEFAULT} />\n    `,\n    \"should not change when 'Box' is an alias for another component that is not from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as Box } from \"monday-ui-react-core\";\n      <Box border={Box.borders.DEFAULT} />\n    `,\n    `\n      import { OtherComponent as Box } from \"monday-ui-react-core\";\n      <Box border={Box.borders.DEFAULT} />\n    `,\n    \"should not change when 'Box' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Box as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent border={Box.borders.DEFAULT} />\n    `,\n    `\n      import { Box as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent border />\n    `,\n    \"should change when 'Box' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/BreadcrumbItem-component-migration.test.ts",
    "content": "import transform from \"../BreadcrumbItem-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { BreadcrumbItem } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"BreadcrumbItem component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<BreadcrumbItem isDisabled/>`),\n    prependImport(`<BreadcrumbItem disabled/>`),\n    \"should update 'isDisabled' to 'disabled'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<BreadcrumbItem disabled />`),\n    prependImport(`<BreadcrumbItem disabled />`),\n    \"should not change if BreadcrumbItem already uses new prop 'disabled'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<BreadcrumbItem isDisabled disabled />`),\n    prependImport(`<BreadcrumbItem disabled />`),\n    \"should remove 'isDisabled' if both 'isDisabled' and 'disabled' are present\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent isDisabled />`),\n    prependImport(`<OtherComponent isDisabled />`),\n    \"should not change other components even if they have similar props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<BreadcrumbItem isDisabled={true} text=\"test\" />`),\n    prependImport(`<BreadcrumbItem disabled={true} text=\"test\" />`),\n    \"should correctly update props when mixed with other attributes\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<BreadcrumbItem isDisabled={false} />`),\n    prependImport(`<BreadcrumbItem disabled={false} />`),\n    \"should correctly update props when set to false\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { BreadcrumbItem } from \"other-library\";\n      <BreadcrumbItem isDisabled />\n    `,\n    `\n      import { BreadcrumbItem } from \"other-library\";\n      <BreadcrumbItem isDisabled />\n    `,\n    \"should not change when 'BreadcrumbItem' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as BreadcrumbItem } from \"monday-ui-react-core\";\n      <BreadcrumbItem isDisabled />\n    `,\n    `\n      import { OtherComponent as BreadcrumbItem } from \"monday-ui-react-core\";\n      <BreadcrumbItem isDisabled />\n    `,\n    \"should not change when 'BreadcrumbItem' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { BreadcrumbItem as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent isDisabled />\n    `,\n    `\n      import { BreadcrumbItem as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent disabled />\n    `,\n    \"should change when 'BreadcrumbItem' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Button-component-migration.test.ts",
    "content": "import transform from \"../Button-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { Button } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"Button component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Button dataTestId=\"unique-id\">test</Button>`),\n    prependImport(`<Button data-testid=\"unique-id\">test</Button>`),\n    \"should update 'dataTestId' to 'data-testid'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<div><Button dataTestId=\"unique-id\">test</Button></div>`),\n    prependImport(`<div><Button data-testid=\"unique-id\">test</Button></div>`),\n    \"should update 'dataTestId' to 'data-testid' in a nested structure\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Button dataTestId=\"unique-id\" name=\"Test Button\">test</Button>`),\n    prependImport(`<Button data-testid=\"unique-id\" name=\"Test Button\">test</Button>`),\n    \"should update 'dataTestId' to 'data-testid' while maintaining other props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `\n      <>\n        <Button dataTestId=\"first-unique-id\">test</Button>\n        <Button dataTestId=\"second-unique-id\">test</Button>\n      </>`\n    ),\n    prependImport(`\n      <>\n        <Button data-testid=\"first-unique-id\">test</Button>\n        <Button data-testid=\"second-unique-id\">test</Button>\n      </>`),\n    \"should handle multiple instances of Button each with 'dataTestId'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Button dataTestId=\"test-id\" data-testid=\"other-test-id\">test</Button>`),\n    prependImport(`<Button dataTestId=\"test-id\" data-testid=\"other-test-id\">test</Button>`),\n    \"should not change when when both 'dataTestId' and 'data-testid' props exist with different literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Button dataTestId=\"test-id\" data-testid=\"test-id\">test</Button>`),\n    prependImport(`<Button data-testid=\"test-id\">test</Button>`),\n    \"should remove 'dataTestId' when both 'dataTestId' and 'data-testid' props exist and have same values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Button dataTestId=\"testId\" data-testid={testId}>test</Button>`),\n    prependImport(`<Button dataTestId=\"testId\" data-testid={testId}>test</Button>`),\n    \"should not change when when both 'dataTestId' and 'data-testid' props exist and have different complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Button dataTestId={\"testId\"} data-testid=\"testId\">test</Button>`),\n    prependImport(`<Button data-testid=\"testId\">test</Button>`),\n    \"should remove 'dataTestId' when when both 'dataTestId' and 'data-testid' props exist with same literal values while one is inside an expression\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<Button dataTestId=\"unique-id\">test</Button>`,\n    `<Button dataTestId=\"unique-id\">test</Button>`,\n    \"should not change when no import even if 'dataTestId' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent dataTestId=\"unique-id\">test</OtherComponent>`),\n    prependImport(`<OtherComponent dataTestId=\"unique-id\">test</OtherComponent>`),\n    \"should not affect other components with 'dataTestId'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Button } from \"other-library\";\n      <Button dataTestId=\"unique-id\">test</Button>\n    `,\n    `\n      import { Button } from \"other-library\";\n      <Button dataTestId=\"unique-id\">test</Button>\n    `,\n    \"should not change when 'Button' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as Button } from \"other-library\";\n      <Button dataTestId=\"unique-id\">test</Button>\n    `,\n    `\n      import { OtherComponent as Button } from \"other-library\";\n      <Button dataTestId=\"unique-id\">test</Button>\n    `,\n    \"should not change when 'Button' is an alias for another component that is not from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as Button } from \"monday-ui-react-core\";\n      <Button dataTestId=\"unique-id\">test</Button>\n    `,\n    `\n      import { OtherComponent as Button } from \"monday-ui-react-core\";\n      <Button dataTestId=\"unique-id\">test</Button>\n    `,\n    \"should not change when 'Button' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Button as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent dataTestId=\"unique-id\">test</VibeComponent>\n    `,\n    `\n      import { Button as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent data-testid=\"unique-id\">test</VibeComponent>\n    `,\n    \"should change when 'Button' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/ButtonGroup-component-migration.test.ts",
    "content": "import transform from \"../ButtonGroup-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { ButtonGroup } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"ButtonGroup component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<ButtonGroup componentClassName=\"old-class\" />`),\n    prependImport(`<ButtonGroup className=\"old-class\" />`),\n    \"should update 'componentClassName' to 'className'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<div><ButtonGroup componentClassName=\"old-class\" /></div>`),\n    prependImport(`<div><ButtonGroup className=\"old-class\" /></div>`),\n    \"should update 'componentClassName' to 'className' in a nested structure\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<ButtonGroup componentClassName=\"old-class\" type=\"info\" />`),\n    prependImport(`<ButtonGroup className=\"old-class\" type=\"info\" />`),\n    \"should update 'componentClassName' to 'className' while maintaining other props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `\n      <>\n        <ButtonGroup componentClassName=\"old-class\" />\n        <ButtonGroup componentClassName=\"another-class\" />\n      </>`\n    ),\n    prependImport(`\n      <>\n        <ButtonGroup className=\"old-class\" />\n        <ButtonGroup className=\"another-class\" />\n      </>`),\n    \"should handle multiple instances of ButtonGroup each with 'componentClassName'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<ButtonGroup componentClassName=\"class-one\" className=\"class-two\" />`),\n    prependImport(`<ButtonGroup componentClassName=\"class-one\" className=\"class-two\" />`),\n    \"should not change when when both 'componentClassName' and 'className' props exist with different literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<ButtonGroup componentClassName={styles.something} className=\"class-two\" />`),\n    prependImport(`<ButtonGroup componentClassName={styles.something} className=\"class-two\" />`),\n    \"should not change when when both 'componentClassName' and 'className' props exist with different complex and literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<ButtonGroup componentClassName={styles.classOne} className={styles.classTwo} />`),\n    prependImport(`<ButtonGroup componentClassName={styles.classOne} className={styles.classTwo} />`),\n    \"should not change when when both 'componentClassName' and 'className' props exist with different complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<ButtonGroup componentClassName={styles.classOne} className={styles.classOne} />`),\n    prependImport(`<ButtonGroup className={styles.classOne} />`),\n    \"should remove 'componentClassName' when when both 'componentClassName' and 'className' props exist with same complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<ButtonGroup componentClassName=\"class-one\" className=\"class-one\" />`),\n    prependImport(`<ButtonGroup className=\"class-one\" />`),\n    \"should remove 'componentClassName' when when both 'componentClassName' and 'className' props exist with same literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<ButtonGroup componentClassName={\"class-one\"} className=\"class-one\" />`),\n    prependImport(`<ButtonGroup className=\"class-one\" />`),\n    \"should remove 'componentClassName' when when both 'componentClassName' and 'className' props exist with same literal values while one is inside an expression\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<ButtonGroup componentClassName=\"old-class\" />`,\n    `<ButtonGroup componentClassName=\"old-class\" />`,\n    \"should not change when no import even if 'componentClassName' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent componentClassName=\"old-class\" />`),\n    prependImport(`<OtherComponent componentClassName=\"old-class\" />`),\n    \"should not affect other components with 'componentClassName'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { ButtonGroup } from \"other-library\";\n      <ButtonGroup componentClassName=\"old-class\" />\n    `,\n    `\n      import { ButtonGroup } from \"other-library\";\n      <ButtonGroup componentClassName=\"old-class\" />\n    `,\n    \"should not change when 'ButtonGroup' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as ButtonGroup } from \"other-library\";\n      <ButtonGroup wrapperClassName=\"old-class\" />\n    `,\n    `\n      import { OtherComponent as ButtonGroup } from \"other-library\";\n      <ButtonGroup wrapperClassName=\"old-class\" />\n    `,\n    \"should not change when 'ButtonGroup' is an alias for another component that is not from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as ButtonGroup } from \"monday-ui-react-core\";\n      <ButtonGroup componentClassName=\"old-class\" />\n    `,\n    `\n      import { OtherComponent as ButtonGroup } from \"monday-ui-react-core\";\n      <ButtonGroup componentClassName=\"old-class\" />\n    `,\n    \"should not change when 'ButtonGroup' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { ButtonGroup as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent componentClassName=\"old-class\" />\n    `,\n    `\n      import { ButtonGroup as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent className=\"old-class\" />\n    `,\n    \"should change when 'ButtonGroup' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Checkbox-component-migration.test.ts",
    "content": "import transform from \"../Checkbox-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { Checkbox } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"Checkbox component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Checkbox componentClassName=\"old-class\" />`),\n    prependImport(`<Checkbox className=\"old-class\" />`),\n    \"should update 'componentClassName' to 'className'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<div><Checkbox componentClassName=\"old-class\" /></div>`),\n    prependImport(`<div><Checkbox className=\"old-class\" /></div>`),\n    \"should update 'componentClassName' to 'className' in a nested structure\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Checkbox componentClassName=\"old-class\" CheckboxColor=\"dark\" />`),\n    prependImport(`<Checkbox className=\"old-class\" CheckboxColor=\"dark\" />`),\n    \"should update 'componentClassName' to 'className' while maintaining other props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `\n      <>\n        <Checkbox componentClassName=\"old-class\" />\n        <Checkbox componentClassName=\"another-class\" />\n      </>`\n    ),\n    prependImport(`\n      <>\n        <Checkbox className=\"old-class\" />\n        <Checkbox className=\"another-class\" />\n      </>`),\n    \"should handle multiple instances of Checkbox each with 'componentClassName'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Checkbox componentClassName=\"class-one\" className=\"class-two\" />`),\n    prependImport(`<Checkbox componentClassName=\"class-one\" className=\"class-two\" />`),\n    \"should not change when when both 'componentClassName' and 'className' props exist with different literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Checkbox componentClassName={styles.something} className=\"class-two\" />`),\n    prependImport(`<Checkbox componentClassName={styles.something} className=\"class-two\" />`),\n    \"should not change when when both 'componentClassName' and 'className' props exist with different complex and literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Checkbox componentClassName={styles.classOne} className={styles.classTwo} />`),\n    prependImport(`<Checkbox componentClassName={styles.classOne} className={styles.classTwo} />`),\n    \"should not change when when both 'componentClassName' and 'className' props exist with different complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Checkbox componentClassName={styles.classOne} className={styles.classOne} />`),\n    prependImport(`<Checkbox className={styles.classOne} />`),\n    \"should remove 'componentClassName' when when both 'componentClassName' and 'className' props exist with same complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Checkbox componentClassName=\"class-one\" className=\"class-one\" />`),\n    prependImport(`<Checkbox className=\"class-one\" />`),\n    \"should remove 'componentClassName' when when both 'componentClassName' and 'className' props exist with same literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Checkbox componentClassName={\"class-one\"} className=\"class-one\" />`),\n    prependImport(`<Checkbox className=\"class-one\" />`),\n    \"should remove 'componentClassName' when when both 'componentClassName' and 'className' props exist with same literal values while one is inside an expression\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<Checkbox componentClassName=\"old-class\" />`,\n    `<Checkbox componentClassName=\"old-class\" />`,\n    \"should not change when no import even if 'componentClassName' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent componentClassName=\"old-class\" />`),\n    prependImport(`<OtherComponent componentClassName=\"old-class\" />`),\n    \"should not affect other components with 'componentClassName'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Checkbox } from \"other-library\";\n      <Checkbox componentClassName=\"old-class\" />\n    `,\n    `\n      import { Checkbox } from \"other-library\";\n      <Checkbox componentClassName=\"old-class\" />\n    `,\n    \"should not change when 'Checkbox' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as Checkbox } from \"other-library\";\n      <Checkbox componentClassName=\"old-class\" />\n    `,\n    `\n      import { OtherComponent as Checkbox } from \"other-library\";\n      <Checkbox componentClassName=\"old-class\" />\n    `,\n    \"should not change when 'Checkbox' is an alias for another component that is not from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as Checkbox } from \"monday-ui-react-core\";\n      <Checkbox componentClassName=\"old-class\" />\n    `,\n    `\n      import { OtherComponent as Checkbox } from \"monday-ui-react-core\";\n      <Checkbox componentClassName=\"old-class\" />\n    `,\n    \"should not change when 'Checkbox' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Checkbox as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent componentClassName=\"old-class\" />\n    `,\n    `\n      import { Checkbox as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent className=\"old-class\" />\n    `,\n    \"should change when 'Checkbox' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Chips-component-migration.test.ts",
    "content": "import transform from \"../Chips-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\nimport { describe } from \"vitest\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { Chips } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"Chips component migration\", () => {\n  describe(\"clickable and isClickable removal\", () => {\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<Chips clickable onClick={handleClick} />`),\n      prependImport(`<Chips onClick={handleClick} />`),\n      \"should remove 'clickable' prop when 'onClick' prop exists\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<Chips isClickable onClick={handleClick} />`),\n      prependImport(`<Chips onClick={handleClick} />`),\n      \"should remove 'isClickable' prop when 'onClick' prop exists\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<Chips clickable isClickable onClick={handleClick} />`),\n      prependImport(`<Chips onClick={handleClick} />`),\n      \"should remove both 'clickable' and 'isClickable' when both are present with 'onClick'\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`\n        <>\n          <Chips clickable />\n          <Chips isClickable />\n        </>\n      `),\n      prependImport(`\n        <>\n          <Chips clickable />\n          <Chips isClickable />\n        </>\n      `),\n      \"should not remove 'clickable' or 'isClickable' when 'onClick' prop does not exist\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      `<Chips clickable onClick={handleClick} />`,\n      `<Chips clickable onClick={handleClick} />`,\n      \"should not remove when no import even if 'onClick' prop exists\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<Chips clickable onClick={handleClick} disabled iconSize={10} />`),\n      prependImport(`<Chips onClick={handleClick} disabled iconSize={10} />`),\n      \"should remove 'clickable' when 'onClick' exists with multiple other props\"\n    );\n  });\n\n  describe(\"dataTestId update\", () => {\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<Chips dataTestId=\"unique-id\" />`),\n      prependImport(`<Chips data-testid=\"unique-id\" />`),\n      \"should change 'dataTestId' to 'data-testid'\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`\n        <div>\n          <Chips dataTestId=\"first-id\" />\n          <Chips dataTestId=\"second-id\" />\n        </div>\n      `),\n      prependImport(`\n        <div>\n          <Chips data-testid=\"first-id\" />\n          <Chips data-testid=\"second-id\" />\n        </div>\n      `),\n      \"should handle multiple Chips instances each with a 'dataTestId'\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<OtherComponent dataTestId=\"other-id\" />`),\n      prependImport(`<OtherComponent dataTestId=\"other-id\" />`),\n      \"should not change other components with 'dataTestId'\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<Chips dataTestId=\"test-id\" data-testid=\"other-test-id\" />`),\n      prependImport(`<Chips dataTestId=\"test-id\" data-testid=\"other-test-id\" />`),\n      \"should not change when when both 'dataTestId' and 'data-testid' props exist and have different values\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<Chips dataTestId=\"test-id\" data-testid=\"test-id\" />`),\n      prependImport(`<Chips data-testid=\"test-id\" />`),\n      \"should remove 'dataTestId' when both 'dataTestId' and 'data-testid' props exist and have same values\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<Chips dataTestId=\"testId\" data-testid={testId} />`),\n      prependImport(`<Chips dataTestId=\"testId\" data-testid={testId} />`),\n      \"should not change when when both 'dataTestId' and 'data-testid' props exist and have different complex values\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<Chips dataTestId=\"mixed-id\" disabled />`),\n      prependImport(`<Chips data-testid=\"mixed-id\" disabled />`),\n      \"should correctly update 'dataTestId' when mixed with other props\"\n    );\n  });\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Clickable-component-migration.test.ts",
    "content": "import transform from \"../Clickable-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { Clickable } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"Clickable component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Clickable dataTestId=\"unique-id\" />`),\n    prependImport(`<Clickable data-testid=\"unique-id\" />`),\n    \"should update 'dataTestId' to 'data-testid'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<div><Clickable dataTestId=\"unique-id\" /></div>`),\n    prependImport(`<div><Clickable data-testid=\"unique-id\" /></div>`),\n    \"should update 'dataTestId' to 'data-testid' in a nested structure\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Clickable dataTestId=\"unique-id\" name=\"Test Clickable\" />`),\n    prependImport(`<Clickable data-testid=\"unique-id\" name=\"Test Clickable\" />`),\n    \"should update 'dataTestId' to 'data-testid' while maintaining other props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `\n      <>\n        <Clickable dataTestId=\"first-unique-id\" />\n        <Clickable dataTestId=\"second-unique-id\" />\n      </>`\n    ),\n    prependImport(`\n      <>\n        <Clickable data-testid=\"first-unique-id\" />\n        <Clickable data-testid=\"second-unique-id\" />\n      </>`),\n    \"should handle multiple instances of Clickable each with 'dataTestId'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Clickable dataTestId=\"test-id\" data-testid=\"other-test-id\" />`),\n    prependImport(`<Clickable dataTestId=\"test-id\" data-testid=\"other-test-id\" />`),\n    \"should not change when when both 'dataTestId' and 'data-testid' props exist with different literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Clickable dataTestId=\"test-id\" data-testid=\"test-id\" />`),\n    prependImport(`<Clickable data-testid=\"test-id\" />`),\n    \"should remove 'dataTestId' when both 'dataTestId' and 'data-testid' props exist and have same values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Clickable dataTestId=\"testId\" data-testid={testId} />`),\n    prependImport(`<Clickable dataTestId=\"testId\" data-testid={testId} />`),\n    \"should not change when when both 'dataTestId' and 'data-testid' props exist and have different complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Clickable dataTestId={\"testId\"} data-testid=\"testId\" />`),\n    prependImport(`<Clickable data-testid=\"testId\" />`),\n    \"should remove 'dataTestId' when when both 'dataTestId' and 'data-testid' props exist with same literal values while one is inside an expression\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<Clickable dataTestId=\"unique-id\" />`,\n    `<Clickable dataTestId=\"unique-id\" />`,\n    \"should not change when no import even if 'dataTestId' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent dataTestId=\"unique-id\" />`),\n    prependImport(`<OtherComponent dataTestId=\"unique-id\" />`),\n    \"should not affect other components with 'dataTestId'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Clickable } from \"other-library\";\n      <Clickable dataTestId=\"unique-id\" />\n    `,\n    `\n      import { Clickable } from \"other-library\";\n      <Clickable dataTestId=\"unique-id\" />\n    `,\n    \"should not change when 'Clickable' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as Clickable } from \"other-library\";\n      <Clickable dataTestId=\"unique-id\" />\n    `,\n    `\n      import { OtherComponent as Clickable } from \"other-library\";\n      <Clickable dataTestId=\"unique-id\" />\n    `,\n    \"should not change when 'Clickable' is an alias for another component that is not from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as Clickable } from \"monday-ui-react-core\";\n      <Clickable dataTestId=\"unique-id\" />\n    `,\n    `\n      import { OtherComponent as Clickable } from \"monday-ui-react-core\";\n      <Clickable dataTestId=\"unique-id\" />\n    `,\n    \"should not change when 'Clickable' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Clickable as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent dataTestId=\"unique-id\" />\n    `,\n    `\n      import { Clickable as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent data-testid=\"unique-id\" />\n    `,\n    \"should change when 'Clickable' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/ColorPicker-component-migration.test.ts",
    "content": "import transform from \"../ColorPicker-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { ColorPicker } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"ColorPicker component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<ColorPicker colorStyle={ColorPicker.COLOR_STYLES.MEDIUM} />`),\n    prependImport(`<ColorPicker colorStyle={ColorPicker.colorStyles.MEDIUM} />`),\n    \"should update 'COLOR_STYLES' to 'colorStyle'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<div><ColorPicker colorStyle={ColorPicker.COLOR_STYLES.MEDIUM} /></div>`),\n    prependImport(`<div><ColorPicker colorStyle={ColorPicker.colorStyles.MEDIUM} /></div>`),\n    \"should update 'COLOR_STYLES' to 'colorStyles' in a nested structure\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<ColorPicker colorStyle={ColorPicker.COLOR_STYLES.MEDIUM} placeholder=\"test\" />`),\n    prependImport(`<ColorPicker colorStyle={ColorPicker.colorStyles.MEDIUM} placeholder=\"test\" />`),\n    \"should update 'COLOR_STYLES' to 'colorStyles' while maintaining other props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `\n      <>\n        <ColorPicker colorStyle={ColorPicker.COLOR_STYLES.MEDIUM} />\n        <ColorPicker colorStyle={ColorPicker.COLOR_STYLES.LARGE} />\n      </>`\n    ),\n    prependImport(`\n      <>\n        <ColorPicker colorStyle={ColorPicker.colorStyles.MEDIUM} />\n        <ColorPicker colorStyle={ColorPicker.colorStyles.LARGE} />\n      </>`),\n    \"should handle multiple instances of ColorPicker each with 'COLOR_STYLES'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<ColorPicker colorStyle={ColorPicker.COLOR_STYLES.MEDIUM} />`,\n    `<ColorPicker colorStyle={ColorPicker.COLOR_STYLES.MEDIUM} />`,\n    \"should not change when no import even if 'COLOR_STYLES' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent colorStyle={ColorPicker.COLOR_STYLES.MEDIUM} />`),\n    prependImport(`<OtherComponent colorStyle={ColorPicker.COLOR_STYLES.MEDIUM} />`),\n    \"should not affect other components with 'COLOR_STYLES'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { ColorPicker } from \"other-library\";\n      <ColorPicker colorStyle={ColorPicker.COLOR_STYLES.MEDIUM} />\n    `,\n    `\n      import { ColorPicker } from \"other-library\";\n      <ColorPicker colorStyle={ColorPicker.COLOR_STYLES.MEDIUM} />\n    `,\n    \"should not change when 'ColorPicker' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as ColorPicker } from \"other-library\";\n      <ColorPicker colorStyle={ColorPicker.COLOR_STYLES.MEDIUM} />\n    `,\n    `\n      import { OtherComponent as ColorPicker } from \"other-library\";\n      <ColorPicker colorStyle={ColorPicker.COLOR_STYLES.MEDIUM} />\n    `,\n    \"should not change when 'ColorPicker' is an alias for another component that is not from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as ColorPicker } from \"monday-ui-react-core\";\n      <ColorPicker colorStyle={ColorPicker.COLOR_STYLES.MEDIUM} />\n    `,\n    `\n      import { OtherComponent as ColorPicker } from \"monday-ui-react-core\";\n      <ColorPicker colorStyle={ColorPicker.COLOR_STYLES.MEDIUM} />\n    `,\n    \"should not change when 'ColorPicker' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { ColorPicker as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent colorStyle={ColorPicker.COLOR_STYLES.MEDIUM} />\n    `,\n    `\n      import { ColorPicker as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent colorStyle={ColorPicker.colorStyles.MEDIUM} />\n    `,\n    \"should change when 'ColorPicker' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/ColorPickerContent-component-migration.test.ts",
    "content": "import transform from \"../ColorPickerContent-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { ColorPickerContent } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"ColorPickerContent component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<ColorPickerContent colorStyle={ColorPickerContent.COLOR_STYLES.MEDIUM} />`),\n    prependImport(`<ColorPickerContent colorStyle={ColorPickerContent.colorStyles.MEDIUM} />`),\n    \"should update 'COLOR_STYLES' to 'colorStyle'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<div><ColorPickerContent colorStyle={ColorPickerContent.COLOR_STYLES.MEDIUM} /></div>`),\n    prependImport(`<div><ColorPickerContent colorStyle={ColorPickerContent.colorStyles.MEDIUM} /></div>`),\n    \"should update 'COLOR_STYLES' to 'colorStyles' in a nested structure\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<ColorPickerContent colorStyle={ColorPickerContent.COLOR_STYLES.MEDIUM} placeholder=\"test\" />`),\n    prependImport(`<ColorPickerContent colorStyle={ColorPickerContent.colorStyles.MEDIUM} placeholder=\"test\" />`),\n    \"should update 'COLOR_STYLES' to 'colorStyles' while maintaining other props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `\n      <>\n        <ColorPickerContent colorStyle={ColorPickerContent.COLOR_STYLES.MEDIUM} />\n        <ColorPickerContent colorStyle={ColorPickerContent.COLOR_STYLES.LARGE} />\n      </>`\n    ),\n    prependImport(`\n      <>\n        <ColorPickerContent colorStyle={ColorPickerContent.colorStyles.MEDIUM} />\n        <ColorPickerContent colorStyle={ColorPickerContent.colorStyles.LARGE} />\n      </>`),\n    \"should handle multiple instances of ColorPickerContent each with 'COLOR_STYLES'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<ColorPickerContent colorStyle={ColorPickerContent.COLOR_STYLES.MEDIUM} />`,\n    `<ColorPickerContent colorStyle={ColorPickerContent.COLOR_STYLES.MEDIUM} />`,\n    \"should not change when no import even if 'COLOR_STYLES' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent colorStyle={ColorPickerContent.COLOR_STYLES.MEDIUM} />`),\n    prependImport(`<OtherComponent colorStyle={ColorPickerContent.COLOR_STYLES.MEDIUM} />`),\n    \"should not affect other components with 'COLOR_STYLES'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { ColorPickerContent } from \"other-library\";\n      <ColorPickerContent colorStyle={ColorPickerContent.COLOR_STYLES.MEDIUM} />\n    `,\n    `\n      import { ColorPickerContent } from \"other-library\";\n      <ColorPickerContent colorStyle={ColorPickerContent.COLOR_STYLES.MEDIUM} />\n    `,\n    \"should not change when 'ColorPickerContent' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as ColorPickerContent } from \"other-library\";\n      <ColorPickerContent colorStyle={ColorPickerContent.COLOR_STYLES.MEDIUM} />\n    `,\n    `\n      import { OtherComponent as ColorPickerContent } from \"other-library\";\n      <ColorPickerContent colorStyle={ColorPickerContent.COLOR_STYLES.MEDIUM} />\n    `,\n    \"should not change when 'ColorPickerContent' is an alias for another component that is not from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as ColorPickerContent } from \"monday-ui-react-core\";\n      <ColorPickerContent colorStyle={ColorPickerContent.COLOR_STYLES.MEDIUM} />\n    `,\n    `\n      import { OtherComponent as ColorPickerContent } from \"monday-ui-react-core\";\n      <ColorPickerContent colorStyle={ColorPickerContent.COLOR_STYLES.MEDIUM} />\n    `,\n    \"should not change when 'ColorPickerContent' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { ColorPickerContent as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent colorStyle={ColorPickerContent.COLOR_STYLES.MEDIUM} />\n    `,\n    `\n      import { ColorPickerContent as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent colorStyle={ColorPickerContent.colorStyles.MEDIUM} />\n    `,\n    \"should change when 'ColorPickerContent' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Counter-component-migration.test.ts",
    "content": "import transform from \"../Counter-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { Counter } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"Counter component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Counter wrapperClassName=\"old-class\" />`),\n    prependImport(`<Counter className=\"old-class\" />`),\n    \"should update 'wrapperClassName' to 'className'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<div><Counter wrapperClassName=\"old-class\" /></div>`),\n    prependImport(`<div><Counter className=\"old-class\" /></div>`),\n    \"should update 'wrapperClassName' to 'className' in a nested structure\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Counter wrapperClassName=\"old-class\" CounterColor=\"dark\" />`),\n    prependImport(`<Counter className=\"old-class\" CounterColor=\"dark\" />`),\n    \"should update 'wrapperClassName' to 'className' while maintaining other props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `\n      <>\n        <Counter wrapperClassName=\"old-class\" />\n        <Counter wrapperClassName=\"another-class\" />\n      </>`\n    ),\n    prependImport(`\n      <>\n        <Counter className=\"old-class\" />\n        <Counter className=\"another-class\" />\n      </>`),\n    \"should handle multiple instances of Counter each with 'wrapperClassName'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Counter wrapperClassName=\"class-one\" className=\"class-two\" />`),\n    prependImport(`<Counter wrapperClassName=\"class-one\" className=\"class-two\" />`),\n    \"should not change when when both 'wrapperClassName' and 'className' props exist with different literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Counter wrapperClassName={styles.something} className=\"class-two\" />`),\n    prependImport(`<Counter wrapperClassName={styles.something} className=\"class-two\" />`),\n    \"should not change when when both 'wrapperClassName' and 'className' props exist with different complex and literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Counter wrapperClassName={styles.classOne} className={styles.classTwo} />`),\n    prependImport(`<Counter wrapperClassName={styles.classOne} className={styles.classTwo} />`),\n    \"should not change when when both 'wrapperClassName' and 'className' props exist with different complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Counter wrapperClassName={styles.classOne} className={styles.classOne} />`),\n    prependImport(`<Counter className={styles.classOne} />`),\n    \"should remove 'wrapperClassName' when when both 'wrapperClassName' and 'className' props exist with same complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Counter wrapperClassName=\"class-one\" className=\"class-one\" />`),\n    prependImport(`<Counter className=\"class-one\" />`),\n    \"should remove 'wrapperClassName' when when both 'wrapperClassName' and 'className' props exist with same literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Counter wrapperClassName={\"class-one\"} className=\"class-one\" />`),\n    prependImport(`<Counter className=\"class-one\" />`),\n    \"should remove 'wrapperClassName' when when both 'wrapperClassName' and 'className' props exist with same literal values while one is inside an expression\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<Counter wrapperClassName=\"old-class\" />`,\n    `<Counter wrapperClassName=\"old-class\" />`,\n    \"should not change when no import even if 'wrapperClassName' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent wrapperClassName=\"old-class\" />`),\n    prependImport(`<OtherComponent wrapperClassName=\"old-class\" />`),\n    \"should not affect other components with 'wrapperClassName'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Counter } from \"other-library\";\n      <Counter wrapperClassName=\"old-class\" />\n    `,\n    `\n      import { Counter } from \"other-library\";\n      <Counter wrapperClassName=\"old-class\" />\n    `,\n    \"should not change when 'Counter' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as Counter } from \"other-library\";\n      <Counter wrapperClassName=\"old-class\" />\n    `,\n    `\n      import { OtherComponent as Counter } from \"other-library\";\n      <Counter wrapperClassName=\"old-class\" />\n    `,\n    \"should not change when 'Counter' is an alias for another component that is not from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as Counter } from \"monday-ui-react-core\";\n      <Counter wrapperClassName=\"old-class\" />\n    `,\n    `\n      import { OtherComponent as Counter } from \"monday-ui-react-core\";\n      <Counter wrapperClassName=\"old-class\" />\n    `,\n    \"should not change when 'Counter' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Counter as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent wrapperClassName=\"old-class\" />\n    `,\n    `\n      import { Counter as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent className=\"old-class\" />\n    `,\n    \"should change when 'Counter' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Dialog-component-migration.test.ts",
    "content": "import transform from \"../Dialog-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { Dialog } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"Dialog component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Dialog shoudlCallbackOnMount />`),\n    prependImport(`<Dialog shouldCallbackOnMount />`),\n    \"should update 'shoudlCallbackOnMount' to 'shouldCallbackOnMount'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<div><Dialog shoudlCallbackOnMount /></div>`),\n    prependImport(`<div><Dialog shouldCallbackOnMount /></div>`),\n    \"should update 'shoudlCallbackOnMount' to 'shouldCallbackOnMount' in a nested structure\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Dialog shoudlCallbackOnMount  isOpen />`),\n    prependImport(`<Dialog shouldCallbackOnMount  isOpen />`),\n    \"should update new props while maintaining other props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `\n      <>\n        <Dialog shoudlCallbackOnMount />\n        <Dialog shoudlCallbackOnMount  />\n      </>`\n    ),\n    prependImport(`\n      <>\n        <Dialog shouldCallbackOnMount />\n        <Dialog shouldCallbackOnMount  />\n      </>`),\n    \"should handle multiple instances of Dialog each with 'shoudlCallbackOnMount'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<Dialog shoudlCallbackOnMount />`,\n    `<Dialog shoudlCallbackOnMount />`,\n    \"should not change when no import even if 'shoudlCallbackOnMount' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent shoudlCallbackOnMount />`),\n    prependImport(`<OtherComponent shoudlCallbackOnMount />`),\n    \"should not affect other components with 'shoudlCallbackOnMount'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Dialog } from \"other-library\";\n      <Dialog shoudlCallbackOnMount />\n    `,\n    `\n      import { Dialog } from \"other-library\";\n      <Dialog shoudlCallbackOnMount />\n    `,\n    \"should not change when 'Dialog' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as Dialog } from \"other-library\";\n      <Dialog shoudlCallbackOnMount  />\n    `,\n    `\n      import { OtherComponent as Dialog } from \"other-library\";\n      <Dialog shoudlCallbackOnMount  />\n    `,\n    \"should not change when 'Dialog' is an alias for another component that is not from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as Dialog } from \"monday-ui-react-core\";\n      <Dialog shoudlCallbackOnMount  />\n    `,\n    `\n      import { OtherComponent as Dialog } from \"monday-ui-react-core\";\n      <Dialog shoudlCallbackOnMount  />\n    `,\n    \"should not change when 'Dialog' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Dialog as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent shoudlCallbackOnMount  />\n    `,\n    `\n      import { Dialog as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent shouldCallbackOnMount  />\n    `,\n    \"should change when 'Dialog' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/DialogContent-container-component-migration.test.ts",
    "content": "import transform from \"../DialogContent-container-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { DialogContentContainer } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"DialogContentContainer component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<DialogContentContainer size={DialogContentContainer.sizes.MEDIUM} />`),\n    prependImport(`<DialogContentContainer size={DialogContentContainer.sizes.SMALL} />`),\n    \"should update medium to small\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<div><DialogContentContainer size={DialogContentContainer.sizes.MEDIUM} /></div>`),\n    prependImport(`<div><DialogContentContainer size={DialogContentContainer.sizes.SMALL} /></div>`),\n    \"should update medium' to small in a nested structure\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<DialogContentContainer size={DialogContentContainer.sizes.MEDIUM} id=\"test\" />`),\n    prependImport(`<DialogContentContainer size={DialogContentContainer.sizes.SMALL} id=\"test\" />`),\n    \"should update medium' to small' while maintaining other props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `\n      <>\n        <DialogContentContainer size={DialogContentContainer.sizes.MEDIUM} />\n        <DialogContentContainer size={DialogContentContainer.sizes.LARGE}/>\n      </>`\n    ),\n    prependImport(`\n      <>\n        <DialogContentContainer size={DialogContentContainer.sizes.SMALL} />\n        <DialogContentContainer size={DialogContentContainer.sizes.LARGE}/>\n      </>`),\n    \"should handle multiple instances of DialogContentContainer\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<DialogContentContainer size={DialogContentContainer.sizes.MEDIUM} />`,\n    `<DialogContentContainer size={DialogContentContainer.sizes.MEDIUM} />`,\n    \"should not change when no import even if 'border' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent size={DialogContentContainer.sizes.MEDIUM} />`),\n    prependImport(`<OtherComponent size={DialogContentContainer.sizes.MEDIUM} />`),\n    \"should not affect other components with border={DialogContentContainer.borders.DEFAULT}\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { DialogContentContainer } from \"other-library\";\n      <DialogContentContainer size={DialogContentContainer.sizes.MEDIUM} />\n    `,\n    `\n      import { DialogContentContainer } from \"other-library\";\n      <DialogContentContainer size={DialogContentContainer.sizes.MEDIUM} />\n    `,\n    \"should not change when 'DialogContentContainer' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as DialogContentContainer } from \"other-library\";\n       <DialogContentContainer size={DialogContentContainer.sizes.MEDIUM} />\n    `,\n    `\n      import { OtherComponent as DialogContentContainer } from \"other-library\";\n       <DialogContentContainer size={DialogContentContainer.sizes.MEDIUM} />\n    `,\n    \"should not change when 'DialogContentContainer' is an alias for another component that is not from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as DialogContentContainer } from \"monday-ui-react-core\";\n      <DialogContentContainer size={DialogContentContainer.sizes.MEDIUM} />\n    `,\n    `\n      import { OtherComponent as DialogContentContainer } from \"monday-ui-react-core\";\n      <DialogContentContainer size={DialogContentContainer.sizes.MEDIUM} />\n    `,\n    \"should not change when 'DialogContentContainer' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { DialogContentContainer as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent size={DialogContentContainer.sizes.MEDIUM} />\n    `,\n    `\n      import { DialogContentContainer as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent size={DialogContentContainer.sizes.SMALL} />\n    `,\n    \"should change when 'DialogContentContainer' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Divider-component-migration.test.ts",
    "content": "import transform from \"../Divider-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { Divider } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"Divider component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Divider classname=\"old-class\" />`),\n    prependImport(`<Divider className=\"old-class\" />`),\n    \"should update 'classname' to 'className'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<div><Divider classname=\"old-class\" /></div>`),\n    prependImport(`<div><Divider className=\"old-class\" /></div>`),\n    \"should update 'classname' to 'className' in a nested structure\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Divider classname=\"old-class\" direction=\"vertical\" />`),\n    prependImport(`<Divider className=\"old-class\" direction=\"vertical\" />`),\n    \"should update 'classname' to 'className' while maintaining other props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `\n      <>\n        <Divider classname=\"old-class\" />\n        <Divider classname=\"another-class\" />\n      </>`\n    ),\n    prependImport(`\n      <>\n        <Divider className=\"old-class\" />\n        <Divider className=\"another-class\" />\n      </>`),\n    \"should handle multiple instances of Divider each with 'classname'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Divider classname=\"class-one\" className=\"class-two\" />`),\n    prependImport(`<Divider classname=\"class-one\" className=\"class-two\" />`),\n    \"should not change when when both 'classname' and 'className' props exist with different literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Divider classname={styles.something} className=\"class-two\" />`),\n    prependImport(`<Divider classname={styles.something} className=\"class-two\" />`),\n    \"should not change when when both 'classname' and 'className' props exist with different complex and literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Divider classname={styles.classOne} className={styles.classTwo} />`),\n    prependImport(`<Divider classname={styles.classOne} className={styles.classTwo} />`),\n    \"should not change when when both 'classname' and 'className' props exist with different complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Divider classname={styles.classOne} className={styles.classOne} />`),\n    prependImport(`<Divider className={styles.classOne} />`),\n    \"should remove 'classname' when when both 'classname' and 'className' props exist with same complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Divider classname=\"class-one\" className=\"class-one\" />`),\n    prependImport(`<Divider className=\"class-one\" />`),\n    \"should remove 'classname' when when both 'classname' and 'className' props exist with same literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Divider classname={\"class-one\"} className=\"class-one\" />`),\n    prependImport(`<Divider className=\"class-one\" />`),\n    \"should remove 'classname' when when both 'classname' and 'className' props exist with same literal values while one is inside an expression\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<Divider classname=\"old-class\" />`,\n    `<Divider classname=\"old-class\" />`,\n    \"should not change when no import even if 'classname' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent classname=\"old-class\" />`),\n    prependImport(`<OtherComponent classname=\"old-class\" />`),\n    \"should not affect other components with 'classname'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Divider } from \"other-library\";\n      <Divider classname=\"old-class\" />\n    `,\n    `\n      import { Divider } from \"other-library\";\n      <Divider classname=\"old-class\" />\n    `,\n    \"should not change when 'Divider' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as Divider } from \"other-library\";\n      <Divider classname=\"old-class\" />\n    `,\n    `\n      import { OtherComponent as Divider } from \"other-library\";\n      <Divider classname=\"old-class\" />\n    `,\n    \"should not change when 'Divider' is an alias for another component that is not from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as Divider } from \"monday-ui-react-core\";\n      <Divider classname=\"old-class\" />\n    `,\n    `\n      import { OtherComponent as Divider } from \"monday-ui-react-core\";\n      <Divider classname=\"old-class\" />\n    `,\n    \"should not change when 'Divider' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Divider as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent classname=\"old-class\" />\n    `,\n    `\n      import { Divider as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent className=\"old-class\" />\n    `,\n    \"should change when 'Divider' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Dropdown-component-migration.test.ts",
    "content": "import transform from \"../Dropdown-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { Dropdown } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"Dropdown component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Dropdown size={Dropdown.size.MEDIUM} withReadOnlyStyle />`),\n    prependImport(`<Dropdown size={Dropdown.sizes.MEDIUM} />`),\n    \"should update 'size' to 'sizes' and remove 'withReadOnlyStyle'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<div><Dropdown size={Dropdown.size.MEDIUM} withReadOnlyStyle/></div>`),\n    prependImport(`<div><Dropdown size={Dropdown.sizes.MEDIUM} /></div>`),\n    \"should update 'size' to 'sizes' in a nested structure\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Dropdown size={Dropdown.size.MEDIUM} placeholder=\"test\" />`),\n    prependImport(`<Dropdown size={Dropdown.sizes.MEDIUM} placeholder=\"test\" />`),\n    \"should update 'size' to 'sizes' while maintaining other props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `\n      <>\n        <Dropdown size={Dropdown.size.MEDIUM} withReadOnlyStyle/>\n        <Dropdown size={Dropdown.size.LARGE} />\n      </>`\n    ),\n    prependImport(`\n      <>\n        <Dropdown size={Dropdown.sizes.MEDIUM} />\n        <Dropdown size={Dropdown.sizes.LARGE} />\n      </>`),\n    \"should handle multiple instances of Dropdown each with 'size'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<Dropdown size={Dropdown.size.MEDIUM} />`,\n    `<Dropdown size={Dropdown.size.MEDIUM} />`,\n    \"should not change when no import even if 'size' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent size={Dropdown.size.MEDIUM} withReadOnlyStyle/>`),\n    prependImport(`<OtherComponent size={Dropdown.size.MEDIUM} withReadOnlyStyle/>`),\n    \"should not affect other components with 'size'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Dropdown } from \"other-library\";\n      <Dropdown size={Dropdown.size.MEDIUM} />\n    `,\n    `\n      import { Dropdown } from \"other-library\";\n      <Dropdown size={Dropdown.size.MEDIUM} />\n    `,\n    \"should not change when 'Dropdown' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as Dropdown } from \"other-library\";\n      <Dropdown size={Dropdown.size.MEDIUM} />\n    `,\n    `\n      import { OtherComponent as Dropdown } from \"other-library\";\n      <Dropdown size={Dropdown.size.MEDIUM} />\n    `,\n    \"should not change when 'Dropdown' is an alias for another component that is not from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as Dropdown } from \"monday-ui-react-core\";\n      <Dropdown size={Dropdown.size.MEDIUM} />\n    `,\n    `\n      import { OtherComponent as Dropdown } from \"monday-ui-react-core\";\n      <Dropdown size={Dropdown.size.MEDIUM} />\n    `,\n    \"should not change when 'Dropdown' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Dropdown as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent size={Dropdown.size.MEDIUM} withReadOnlyStyle/>\n    `,\n    `\n      import { Dropdown as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent size={Dropdown.sizes.MEDIUM} />\n    `,\n    \"should change when 'Dropdown' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Icon-component-migration.test.ts",
    "content": "import transform from \"../Icon-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\nimport { describe } from \"vitest\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { Icon } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"Icon component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Icon clickable={false} />`),\n    prependImport(`<Icon />`),\n    \"should remove 'clickable' if exists and is false\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Icon clickable={true} />`),\n    prependImport(`<Icon clickable={true} />`),\n    \"should not remove 'clickable' if exists and is true\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Icon clickable />`),\n    prependImport(`<Icon clickable />`),\n    \"should not remove 'clickable' if exists and is true\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`\n        <>\n          <Icon clickable={false} />\n          <Icon clickable={true} />\n        </>\n      `),\n    prependImport(`\n        <>\n          <Icon />\n          <Icon clickable={true} />\n        </>\n      `),\n    \"with multiple elements\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<Icon clickable={false} />`,\n    `<Icon clickable={false} />`,\n    \"should not remove when no import even if 'clickable={false}' exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Icon icon={Email} clickable={false} />`),\n    prependImport(`<Icon icon={Email} />`),\n    \"should remove 'clickable={false}' when exists with multiple other props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent clickable={false} />`),\n    prependImport(`<OtherComponent clickable={false} />`),\n    \"should not change other components with 'clickable={false}'\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/IconButton-component-migration.test.ts",
    "content": "import transform from \"../IconButton-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { IconButton } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"IconButton component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<IconButton dataTestId=\"unique-id\" />`),\n    prependImport(`<IconButton data-testid=\"unique-id\" />`),\n    \"should update 'dataTestId' to 'data-testid'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<div><IconButton dataTestId=\"unique-id\" /></div>`),\n    prependImport(`<div><IconButton data-testid=\"unique-id\" /></div>`),\n    \"should update 'dataTestId' to 'data-testid' in a nested structure\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<IconButton dataTestId=\"unique-id\" name=\"Test IconButton\" />`),\n    prependImport(`<IconButton data-testid=\"unique-id\" name=\"Test IconButton\" />`),\n    \"should update 'dataTestId' to 'data-testid' while maintaining other props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `\n      <>\n        <IconButton dataTestId=\"first-unique-id\" />\n        <IconButton dataTestId=\"second-unique-id\" />\n      </>`\n    ),\n    prependImport(`\n      <>\n        <IconButton data-testid=\"first-unique-id\" />\n        <IconButton data-testid=\"second-unique-id\" />\n      </>`),\n    \"should handle multiple instances of IconButton each with 'dataTestId'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<IconButton dataTestId=\"test-id\" data-testid=\"other-test-id\" />`),\n    prependImport(`<IconButton dataTestId=\"test-id\" data-testid=\"other-test-id\" />`),\n    \"should not change when when both 'dataTestId' and 'data-testid' props exist with different literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<IconButton dataTestId=\"test-id\" data-testid=\"test-id\" />`),\n    prependImport(`<IconButton data-testid=\"test-id\" />`),\n    \"should remove 'dataTestId' when both 'dataTestId' and 'data-testid' props exist and have same values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<IconButton dataTestId=\"testId\" data-testid={testId} />`),\n    prependImport(`<IconButton dataTestId=\"testId\" data-testid={testId} />`),\n    \"should not change when when both 'dataTestId' and 'data-testid' props exist and have different complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<IconButton dataTestId={\"testId\"} data-testid=\"testId\" />`),\n    prependImport(`<IconButton data-testid=\"testId\" />`),\n    \"should remove 'dataTestId' when when both 'dataTestId' and 'data-testid' props exist with same literal values while one is inside an expression\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<IconButton dataTestId=\"unique-id\" />`,\n    `<IconButton dataTestId=\"unique-id\" />`,\n    \"should not change when no import even if 'dataTestId' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent dataTestId=\"unique-id\" />`),\n    prependImport(`<OtherComponent dataTestId=\"unique-id\" />`),\n    \"should not affect other components with 'dataTestId'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { IconButton } from \"other-library\";\n      <IconButton dataTestId=\"unique-id\" />\n    `,\n    `\n      import { IconButton } from \"other-library\";\n      <IconButton dataTestId=\"unique-id\" />\n    `,\n    \"should not change when 'IconButton' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as IconButton } from \"other-library\";\n      <IconButton dataTestId=\"unique-id\" />\n    `,\n    `\n      import { OtherComponent as IconButton } from \"other-library\";\n      <IconButton dataTestId=\"unique-id\" />\n    `,\n    \"should not change when 'IconButton' is an alias for another component that is not from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as IconButton } from \"monday-ui-react-core\";\n      <IconButton dataTestId=\"unique-id\" />\n    `,\n    `\n      import { OtherComponent as IconButton } from \"monday-ui-react-core\";\n      <IconButton dataTestId=\"unique-id\" />\n    `,\n    \"should not change when 'IconButton' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { IconButton as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent dataTestId=\"unique-id\" />\n    `,\n    `\n      import { IconButton as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent data-testid=\"unique-id\" />\n    `,\n    \"should change when 'IconButton' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/InputField-component-import-migration.test.ts",
    "content": "import { defineInlineTest } from \"jscodeshift/src/testUtils\";\nimport transform from \"../InputField-component-import-migration\";\n\ndescribe(\"InputField component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    `\n        import { InputField } from \"monday-ui-react-core\";\n        <InputField autoFocus placeholder=\"TextField imported regular\" />\n      `,\n    `\n        import { TextField } from \"monday-ui-react-core\";\n        <TextField autoFocus placeholder=\"TextField imported regular\" />\n      `,\n    \"should update import and update self-closing jsx accordingly\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    ` \n        import { InputField } from \"monday-ui-react-core\";\n        <InputField autoFocus placeholder=\"TextField imported regular\"></InputField>\n      `,\n    `\n        import { TextField } from \"monday-ui-react-core\";\n        <TextField autoFocus placeholder=\"TextField imported regular\"></TextField>\n      `,\n    \"should update import and update jsx accordingly\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n        import { InputField } from \"monday-ui-react-core\";\n        <>\n          <InputField autoFocus placeholder=\"TextField imported regular\" />\n          <InputField />\n          <InputField debounceRate={300} />\n        </>\n      `,\n    `\n        import { TextField } from \"monday-ui-react-core\";\n        <>\n          <TextField autoFocus placeholder=\"TextField imported regular\" />\n          <TextField />\n          <TextField debounceRate={300} />\n        </>\n      `,\n    \"should update import and update multiple jsx usages\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n        import { InputField as SC } from \"monday-ui-react-core\";\n        <SC autoFocus placeholder=\"TextField as alias\" />\n      `,\n    `\n        import { TextField as SC } from \"monday-ui-react-core\";\n        <SC autoFocus placeholder=\"TextField as alias\" />\n      `,\n    \"should update import but not update jsx when component is imported with an alias\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n        import { InputField as SC } from \"monday-ui-react-core\";\n        <>\n          <SC autoFocus placeholder=\"TextField as alias\" />\n          <SC />\n          <SC debounceRate={300} />\n        </>\n      `,\n    `\n        import { TextField as SC } from \"monday-ui-react-core\";\n        <>\n          <SC autoFocus placeholder=\"TextField as alias\" />\n          <SC />\n          <SC debounceRate={300} />\n        </>\n      `,\n    \"should update import but not update any jsx usage when component is imported with an alias\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n        import { TextField, InputField } from \"monday-ui-react-core\";\n        <InputField autoFocus placeholder=\"TextField imported regular\" />\n      `,\n    `\n        import { TextField } from \"monday-ui-react-core\";\n        <InputField autoFocus placeholder=\"TextField imported regular\" />\n      `,\n    \"should remove 'InputField' when both 'TextField' and 'InputField' are imported from core\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n        import { TextField } from \"other-component-library\";\n        import { InputField } from \"monday-ui-react-core\";\n        <InputField autoFocus placeholder=\"TextField imported regular\" />\n      `,\n    `\n        import { TextField } from \"other-component-library\";\n        import { TextField as InputField } from \"monday-ui-react-core\";\n        <InputField autoFocus placeholder=\"TextField imported regular\" />\n      `,\n    \"should update 'InputField' with alias when both 'TextField' and 'InputField' are imported, and 'TextField' is not imported from core\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n        import { OtherComponent } from \"monday-ui-react-core\";\n        <OtherComponent autoFocus placeholder=\"I'm not TextField\" />\n      `,\n    `\n        import { OtherComponent } from \"monday-ui-react-core\";\n        <OtherComponent autoFocus placeholder=\"I'm not TextField\" />\n      `,\n    \"should not change unrelated imports\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n        import { OtherComponent as InputField } from \"monday-ui-react-core\";\n        <InputField autoFocus placeholder=\"I'm not TextField\" />\n      `,\n    `\n        import { OtherComponent as InputField } from \"monday-ui-react-core\";\n        <InputField autoFocus placeholder=\"I'm not TextField\" />\n      `,\n    \"should not change unrelated imports that are aliased as InputField\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n        import { TextField as InputField } from \"monday-ui-react-core/next\";\n        <InputField autoFocus placeholder=\"I'm TextField\" />\n      `,\n    `\n        import { TextField as InputField } from \"monday-ui-react-core/next\";\n        <InputField autoFocus placeholder=\"I'm TextField\" />\n      `,\n    \"should not change TextField from core/next import that is aliased as InputField\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n        import { InputField } from \"monday-ui-react-core\";\n        <InputField autoFocus placeholder=\"I'm InputField\" size={InputField.sizes.SMALL} />\n      `,\n    `\n        import { TextField } from \"monday-ui-react-core\";\n        <TextField autoFocus placeholder=\"I'm InputField\" size={TextField.sizes.SMALL} />\n      `,\n    \"should change props that uses the namespace of 'InputField' to 'TextField'\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Label-component-migration.test.ts",
    "content": "import transform from \"../Label-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { Label } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"Label component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Label wrapperClassName=\"old-class\" isAnimationDisabled/>`),\n    prependImport(`<Label className=\"old-class\" />`),\n    \"should update 'wrapperClassName' to 'className' and remove 'isAnimationDisabled'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<div><Label wrapperClassName=\"old-class\" isAnimationDisabled/></div>`),\n    prependImport(`<div><Label className=\"old-class\" /></div>`),\n    \"should update 'wrapperClassName' to 'className' in a nested structure\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Label wrapperClassName=\"old-class\" color=\"dark\" />`),\n    prependImport(`<Label className=\"old-class\" color=\"dark\" />`),\n    \"should update 'wrapperClassName' to 'className' while maintaining other props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `\n      <>\n        <Label wrapperClassName=\"old-class\" isAnimationDisabled/>\n        <Label wrapperClassName=\"another-class\" />\n      </>`\n    ),\n    prependImport(`\n      <>\n        <Label className=\"old-class\" />\n        <Label className=\"another-class\" />\n      </>`),\n    \"should handle multiple instances of Label each with 'wrapperClassName'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Label wrapperClassName=\"class-one\" className=\"class-two\" />`),\n    prependImport(`<Label wrapperClassName=\"class-one\" className=\"class-two\" />`),\n    \"should not change when when both 'wrapperClassName' and 'className' props exist with different literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Label wrapperClassName={styles.something} className=\"class-two\" />`),\n    prependImport(`<Label wrapperClassName={styles.something} className=\"class-two\" />`),\n    \"should not change when when both 'wrapperClassName' and 'className' props exist with different complex and literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Label wrapperClassName={styles.classOne} className={styles.classTwo} />`),\n    prependImport(`<Label wrapperClassName={styles.classOne} className={styles.classTwo} />`),\n    \"should not change when when both 'wrapperClassName' and 'className' props exist with different complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Label wrapperClassName={styles.classOne} className={styles.classOne} />`),\n    prependImport(`<Label className={styles.classOne} />`),\n    \"should remove 'wrapperClassName' when when both 'wrapperClassName' and 'className' props exist with same complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Label wrapperClassName=\"class-one\" className=\"class-one\" />`),\n    prependImport(`<Label className=\"class-one\" />`),\n    \"should remove 'wrapperClassName' when when both 'wrapperClassName' and 'className' props exist with same literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Label wrapperClassName={\"class-one\"} className=\"class-one\" />`),\n    prependImport(`<Label className=\"class-one\" />`),\n    \"should remove 'wrapperClassName' when when both 'wrapperClassName' and 'className' props exist with same literal values while one is inside an expression\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<Label wrapperClassName=\"old-class\" />`,\n    `<Label wrapperClassName=\"old-class\" />`,\n    \"should not change when no import even if 'wrapperClassName' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent wrapperClassName=\"old-class\" isAnimationDisabled/>`),\n    prependImport(`<OtherComponent wrapperClassName=\"old-class\" isAnimationDisabled/>`),\n    \"should not affect other components with 'wrapperClassName'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Label } from \"other-library\";\n      <Label wrapperClassName=\"old-class\" />\n    `,\n    `\n      import { Label } from \"other-library\";\n      <Label wrapperClassName=\"old-class\" />\n    `,\n    \"should not change when 'Label' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as Label } from \"other-library\";\n      <Label wrapperClassName=\"old-class\" />\n    `,\n    `\n      import { OtherComponent as Label } from \"other-library\";\n      <Label wrapperClassName=\"old-class\" />\n    `,\n    \"should not change when 'Label' is an alias for another component that is not from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as Label } from \"monday-ui-react-core\";\n      <Label wrapperClassName=\"old-class\" />\n    `,\n    `\n      import { OtherComponent as Label } from \"monday-ui-react-core\";\n      <Label wrapperClassName=\"old-class\" />\n    `,\n    \"should not change when 'Label' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Label as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent wrapperClassName=\"old-class\" isAnimationDisabled/>\n    `,\n    `\n      import { Label as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent className=\"old-class\" />\n    `,\n    \"should change when 'Label' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Link-component-migration.test.ts",
    "content": "import transform from \"../Link-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { Link } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"Link component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Link target={Link.target.SELF} componentClassName=\"class\" />`),\n    prependImport(`<Link target={Link.targets.SELF} className=\"class\" />`),\n    \"should update 'target' to 'targets' and 'componentClassName' to 'className'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<div><Link target={Link.target.SELF} componentClassName=\"old-class\" /></div>`),\n    prependImport(`<div><Link target={Link.targets.SELF} className=\"old-class\" /></div>`),\n    \"should update 'target' to 'targets' and 'componentClassName' to 'className' in a nested structure\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Link target={Link.target.SELF} componentClassName=\"old-class\" text=\"test\" />`),\n    prependImport(`<Link target={Link.targets.SELF} className=\"old-class\" text=\"test\" />`),\n    \"should update 'target' to 'targets' and 'componentClassName' to 'className' while maintaining other props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `\n      <>\n        <Link target={Link.target.SELF} componentClassName=\"old-class\" />\n        <Link componentClassName=\"another-class\" />\n      </>`\n    ),\n    prependImport(`\n      <>\n        <Link target={Link.targets.SELF} className=\"old-class\" />\n        <Link className=\"another-class\" />\n      </>`),\n    \"should handle multiple instances of Link each with 'componentClassName'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Link componentClassName=\"class-one\" className=\"class-two\" />`),\n    prependImport(`<Link componentClassName=\"class-one\" className=\"class-two\" />`),\n    \"should not change when when both 'componentClassName' and 'className' props exist with different literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Link componentClassName={styles.something} className=\"class-two\" />`),\n    prependImport(`<Link componentClassName={styles.something} className=\"class-two\" />`),\n    \"should not change when when both 'componentClassName' and 'className' props exist with different complex and literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Link componentClassName={styles.classOne} className={styles.classTwo} />`),\n    prependImport(`<Link componentClassName={styles.classOne} className={styles.classTwo} />`),\n    \"should not change when when both 'componentClassName' and 'className' props exist with different complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Link componentClassName={styles.classOne} className={styles.classOne} />`),\n    prependImport(`<Link className={styles.classOne} />`),\n    \"should remove 'componentClassName' when when both 'componentClassName' and 'className' props exist with same complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Link componentClassName=\"class-one\" className=\"class-one\" />`),\n    prependImport(`<Link className=\"class-one\" />`),\n    \"should remove 'componentClassName' when when both 'componentClassName' and 'className' props exist with same literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Link componentClassName={\"class-one\"} className=\"class-one\" />`),\n    prependImport(`<Link className=\"class-one\" />`),\n    \"should remove 'componentClassName' when when both 'componentClassName' and 'className' props exist with same literal values while one is inside an expression\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<Link componentClassName=\"old-class\" />`,\n    `<Link componentClassName=\"old-class\" />`,\n    \"should not change when no import even if 'componentClassName' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent componentClassName=\"old-class\" />`),\n    prependImport(`<OtherComponent componentClassName=\"old-class\" />`),\n    \"should not affect other components with 'componentClassName'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Link } from \"other-library\";\n      <Link componentClassName=\"old-class\" />\n    `,\n    `\n      import { Link } from \"other-library\";\n      <Link componentClassName=\"old-class\" />\n    `,\n    \"should not change when 'Link' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as Link } from \"other-library\";\n      <Link componentClassName=\"old-class\" />\n    `,\n    `\n      import { OtherComponent as Link } from \"other-library\";\n      <Link componentClassName=\"old-class\" />\n    `,\n    \"should not change when 'Link' is an alias for another component that is not from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as Link } from \"monday-ui-react-core\";\n      <Link componentClassName=\"old-class\" />\n    `,\n    `\n      import { OtherComponent as Link } from \"monday-ui-react-core\";\n      <Link componentClassName=\"old-class\" />\n    `,\n    \"should not change when 'Link' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Link as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent componentClassName=\"old-class\" />\n    `,\n    `\n      import { Link as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent className=\"old-class\" />\n    `,\n    \"should change when 'Link' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Loader-component-migration.test.ts",
    "content": "import transform from \"../Loader-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { Loader } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"Loader component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Loader svgClassName=\"old-class\" />`),\n    prependImport(`<Loader className=\"old-class\" />`),\n    \"should update 'svgClassName' to 'className'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<div><Loader svgClassName=\"old-class\" /></div>`),\n    prependImport(`<div><Loader className=\"old-class\" /></div>`),\n    \"should update 'svgClassName' to 'className' in a nested structure\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Loader svgClassName=\"old-class\" LoaderColor=\"dark\" />`),\n    prependImport(`<Loader className=\"old-class\" LoaderColor=\"dark\" />`),\n    \"should update 'svgClassName' to 'className' while maintaining other props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `\n      <>\n        <Loader svgClassName=\"old-class\" />\n        <Loader svgClassName=\"another-class\" />\n      </>`\n    ),\n    prependImport(`\n      <>\n        <Loader className=\"old-class\" />\n        <Loader className=\"another-class\" />\n      </>`),\n    \"should handle multiple instances of Loader each with 'svgClassName'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Loader svgClassName=\"class-one\" className=\"class-two\" />`),\n    prependImport(`<Loader svgClassName=\"class-one\" className=\"class-two\" />`),\n    \"should not change when when both 'svgClassName' and 'className' props exist with different literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Loader svgClassName={styles.something} className=\"class-two\" />`),\n    prependImport(`<Loader svgClassName={styles.something} className=\"class-two\" />`),\n    \"should not change when when both 'svgClassName' and 'className' props exist with different complex and literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Loader svgClassName={styles.classOne} className={styles.classTwo} />`),\n    prependImport(`<Loader svgClassName={styles.classOne} className={styles.classTwo} />`),\n    \"should not change when when both 'svgClassName' and 'className' props exist with different complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Loader svgClassName={styles.classOne} className={styles.classOne} />`),\n    prependImport(`<Loader className={styles.classOne} />`),\n    \"should remove 'svgClassName' when when both 'svgClassName' and 'className' props exist with same complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Loader svgClassName=\"class-one\" className=\"class-one\" />`),\n    prependImport(`<Loader className=\"class-one\" />`),\n    \"should remove 'svgClassName' when when both 'svgClassName' and 'className' props exist with same literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Loader svgClassName={\"class-one\"} className=\"class-one\" />`),\n    prependImport(`<Loader className=\"class-one\" />`),\n    \"should remove 'svgClassName' when when both 'svgClassName' and 'className' props exist with same literal values while one is inside an expression\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<Loader svgClassName=\"old-class\" />`,\n    `<Loader svgClassName=\"old-class\" />`,\n    \"should not change when no import even if 'svgClassName' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent svgClassName=\"old-class\" />`),\n    prependImport(`<OtherComponent svgClassName=\"old-class\" />`),\n    \"should not affect other components with 'svgClassName'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Loader } from \"other-library\";\n      <Loader svgClassName=\"old-class\" />\n    `,\n    `\n      import { Loader } from \"other-library\";\n      <Loader svgClassName=\"old-class\" />\n    `,\n    \"should not change when 'Loader' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as Loader } from \"other-library\";\n      <Loader svgClassName=\"old-class\" />\n    `,\n    `\n      import { OtherComponent as Loader } from \"other-library\";\n      <Loader svgClassName=\"old-class\" />\n    `,\n    \"should not change when 'Loader' is an alias for another component that is not from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as Loader } from \"monday-ui-react-core\";\n      <Loader svgClassName=\"old-class\" />\n    `,\n    `\n      import { OtherComponent as Loader } from \"monday-ui-react-core\";\n      <Loader svgClassName=\"old-class\" />\n    `,\n    \"should not change when 'Loader' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Loader as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent svgClassName=\"old-class\" />\n    `,\n    `\n      import { Loader as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent className=\"old-class\" />\n    `,\n    \"should change when 'Loader' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Menu-component-migration.test.ts",
    "content": "import transform from \"../Menu-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { Menu } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"Menu component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Menu classname=\"old-class\" />`),\n    prependImport(`<Menu className=\"old-class\" />`),\n    \"should update 'classname' to 'className'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<div><Menu classname=\"old-class\" /></div>`),\n    prependImport(`<div><Menu className=\"old-class\" /></div>`),\n    \"should update 'classname' to 'className' in a nested structure\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Menu classname=\"old-class\" ariaLabel=\"Menu\" />`),\n    prependImport(`<Menu className=\"old-class\" ariaLabel=\"Menu\" />`),\n    \"should update 'classname' to 'className' while maintaining other props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Menu classname=\"class\"><MenuTile></MenuTile><MenuItem classname=\"class\"></MenuItem></Menu>`),\n    prependImport(`<Menu className=\"class\"><MenuTile></MenuTile><MenuItem classname=\"class\"></MenuItem></Menu>`),\n    \"should update 'classname' to 'className' on Menu and not on MenuItem\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Menu><MenuTile></MenuTile><MenuItem classname=\"class\"></MenuItem></Menu>`),\n    prependImport(`<Menu><MenuTile></MenuTile><MenuItem classname=\"class\"></MenuItem></Menu>`),\n    \"should not update 'classname' to 'className' on Menu when exists on MenuItem\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `\n      <>\n        <Menu classname=\"old-class\" />\n        <Menu classname=\"another-class\" />\n      </>`\n    ),\n    prependImport(`\n      <>\n        <Menu className=\"old-class\" />\n        <Menu className=\"another-class\" />\n      </>`),\n    \"should handle multiple instances of Menu each with 'classname'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Menu classname=\"class-one\" className=\"class-two\" />`),\n    prependImport(`<Menu classname=\"class-one\" className=\"class-two\" />`),\n    \"should not change when when both 'classname' and 'className' props exist with different literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Menu classname={styles.something} className=\"class-two\" />`),\n    prependImport(`<Menu classname={styles.something} className=\"class-two\" />`),\n    \"should not change when when both 'classname' and 'className' props exist with different complex and literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Menu classname={styles.classOne} className={styles.classTwo} />`),\n    prependImport(`<Menu classname={styles.classOne} className={styles.classTwo} />`),\n    \"should not change when when both 'classname' and 'className' props exist with different complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Menu classname={styles.classOne} className={styles.classOne} />`),\n    prependImport(`<Menu className={styles.classOne} />`),\n    \"should remove 'classname' when when both 'classname' and 'className' props exist with same complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Menu classname=\"class-one\" className=\"class-one\" />`),\n    prependImport(`<Menu className=\"class-one\" />`),\n    \"should remove 'classname' when when both 'classname' and 'className' props exist with same literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Menu classname={\"class-one\"} className=\"class-one\" />`),\n    prependImport(`<Menu className=\"class-one\" />`),\n    \"should remove 'classname' when when both 'classname' and 'className' props exist with same literal values while one is inside an expression\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<Menu classname=\"old-class\" />`,\n    `<Menu classname=\"old-class\" />`,\n    \"should not change when no import even if 'classname' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent classname=\"old-class\" />`),\n    prependImport(`<OtherComponent classname=\"old-class\" />`),\n    \"should not affect other components with 'classname'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Menu } from \"other-library\";\n      <Menu classname=\"old-class\" />\n    `,\n    `\n      import { Menu } from \"other-library\";\n      <Menu classname=\"old-class\" />\n    `,\n    \"should not change when 'Menu' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as Menu } from \"other-library\";\n      <Menu classname=\"old-class\" />\n    `,\n    `\n      import { OtherComponent as Menu } from \"other-library\";\n      <Menu classname=\"old-class\" />\n    `,\n    \"should not change when 'Menu' is an alias for another component that is not from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as Menu } from \"monday-ui-react-core\";\n      <Menu classname=\"old-class\" />\n    `,\n    `\n      import { OtherComponent as Menu } from \"monday-ui-react-core\";\n      <Menu classname=\"old-class\" />\n    `,\n    \"should not change when 'Menu' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Menu as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent classname=\"old-class\" />\n    `,\n    `\n      import { Menu as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent className=\"old-class\" />\n    `,\n    \"should change when 'Menu' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/MenuButton-component-migration.test.ts",
    "content": "import transform from \"../MenuButton-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { MenuButton } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"MenuButton component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuButton componentClassName=\"old-class\" disabledReason=\"Reason Text\"/>`),\n    prependImport(`<MenuButton className=\"old-class\" tooltipContent=\"Reason Text\"/>`),\n    \"should update 'componentClassName' to 'className' to & 'disabledReason' to 'tooltipContent'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuButton disabledReason=\"reason\" />`),\n    prependImport(`<MenuButton tooltipContent=\"reason\" />`),\n    \"should update 'disabledReason' to 'tooltipContent\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<div><MenuButton componentClassName=\"old-class\" /></div>`),\n    prependImport(`<div><MenuButton className=\"old-class\" /></div>`),\n    \"should update 'componentClassName' to 'className' in a nested structure\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuButton componentClassName=\"old-class\" disabledReason=\"Reason Text\" ariaLabel=\"Menu Button\" />`),\n    prependImport(`<MenuButton className=\"old-class\" tooltipContent=\"Reason Text\" ariaLabel=\"Menu Button\" />`),\n    \"should update new props while maintaining other props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `\n      <>\n        <MenuButton componentClassName=\"old-class\" />\n        <MenuButton componentClassName=\"another-class\" />\n      </>`\n    ),\n    prependImport(`\n      <>\n        <MenuButton className=\"old-class\" />\n        <MenuButton className=\"another-class\" />\n      </>`),\n    \"should handle multiple instances of MenuButton each with 'componentClassName'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuButton componentClassName=\"class-one\" className=\"class-two\" />`),\n    prependImport(`<MenuButton componentClassName=\"class-one\" className=\"class-two\" />`),\n    \"should not change when when both 'componentClassName' and 'className' props exist with different literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuButton componentClassName={styles.something} className=\"class-two\" />`),\n    prependImport(`<MenuButton componentClassName={styles.something} className=\"class-two\" />`),\n    \"should not change when when both 'componentClassName' and 'className' props exist with different complex and literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuButton componentClassName={styles.classOne} className={styles.classTwo} />`),\n    prependImport(`<MenuButton componentClassName={styles.classOne} className={styles.classTwo} />`),\n    \"should not change when when both 'componentClassName' and 'className' props exist with different complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuButton componentClassName={styles.classOne} className={styles.classOne} />`),\n    prependImport(`<MenuButton className={styles.classOne} />`),\n    \"should remove 'componentClassName' when when both 'componentClassName' and 'className' props exist with same complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuButton componentClassName=\"class-one\" className=\"class-one\" />`),\n    prependImport(`<MenuButton className=\"class-one\" />`),\n    \"should remove 'componentClassName' when when both 'componentClassName' and 'className' props exist with same literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuButton componentClassName={\"class-one\"} className=\"class-one\" />`),\n    prependImport(`<MenuButton className=\"class-one\" />`),\n    \"should remove 'componentClassName' when when both 'componentClassName' and 'className' props exist with same literal values while one is inside an expression\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<MenuButton componentClassName=\"old-class\" />`,\n    `<MenuButton componentClassName=\"old-class\" />`,\n    \"should not change when no import even if 'componentClassName' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent componentClassName=\"old-class\" />`),\n    prependImport(`<OtherComponent componentClassName=\"old-class\" />`),\n    \"should not affect other components with 'componentClassName'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { MenuButton } from \"other-library\";\n      <MenuButton componentClassName=\"old-class\" />\n    `,\n    `\n      import { MenuButton } from \"other-library\";\n      <MenuButton componentClassName=\"old-class\" />\n    `,\n    \"should not change when 'MenuButton' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as MenuButton } from \"other-library\";\n      <MenuButton componentClassName=\"old-class\" disabledReason=\"Reason Text\"/>\n    `,\n    `\n      import { OtherComponent as MenuButton } from \"other-library\";\n      <MenuButton componentClassName=\"old-class\" disabledReason=\"Reason Text\"/>\n    `,\n    \"should not change when 'MenuButton' is an alias for another component that is not from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as MenuButton } from \"monday-ui-react-core\";\n      <MenuButton componentClassName=\"old-class\" disabledReason=\"Reason Text\"/>\n    `,\n    `\n      import { OtherComponent as MenuButton } from \"monday-ui-react-core\";\n      <MenuButton componentClassName=\"old-class\" disabledReason=\"Reason Text\"/>\n    `,\n    \"should not change when 'MenuButton' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { MenuButton as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent componentClassName=\"old-class\" disabledReason=\"Reason Text\"/>\n    `,\n    `\n      import { MenuButton as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent className=\"old-class\" tooltipContent=\"Reason Text\"/>\n    `,\n    \"should change when 'MenuButton' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/MenuDivider-component-migration.test.ts",
    "content": "import transform from \"../MenuDivider-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { MenuDivider } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"MenuDivider component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuDivider classname=\"old-class\" />`),\n    prependImport(`<MenuDivider className=\"old-class\" />`),\n    \"should update 'classname' to 'className'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<div><MenuDivider classname=\"old-class\" /></div>`),\n    prependImport(`<div><MenuDivider className=\"old-class\" /></div>`),\n    \"should update 'classname' to 'className' in a nested structure\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuDivider classname=\"old-class\" data-testid=\"menu\" />`),\n    prependImport(`<MenuDivider className=\"old-class\" data-testid=\"menu\" />`),\n    \"should update 'classname' to 'className' while maintaining other props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `\n      <>\n        <MenuDivider classname=\"old-class\" />\n        <MenuDivider classname=\"another-class\" />\n      </>`\n    ),\n    prependImport(`\n      <>\n        <MenuDivider className=\"old-class\" />\n        <MenuDivider className=\"another-class\" />\n      </>`),\n    \"should handle multiple instances of MenuDivider each with 'classname'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuDivider classname=\"class-one\" className=\"class-two\" />`),\n    prependImport(`<MenuDivider classname=\"class-one\" className=\"class-two\" />`),\n    \"should not change when when both 'classname' and 'className' props exist with different literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuDivider classname={styles.something} className=\"class-two\" />`),\n    prependImport(`<MenuDivider classname={styles.something} className=\"class-two\" />`),\n    \"should not change when when both 'classname' and 'className' props exist with different complex and literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuDivider classname={styles.classOne} className={styles.classTwo} />`),\n    prependImport(`<MenuDivider classname={styles.classOne} className={styles.classTwo} />`),\n    \"should not change when when both 'classname' and 'className' props exist with different complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuDivider classname={styles.classOne} className={styles.classOne} />`),\n    prependImport(`<MenuDivider className={styles.classOne} />`),\n    \"should remove 'classname' when when both 'classname' and 'className' props exist with same complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuDivider classname=\"class-one\" className=\"class-one\" />`),\n    prependImport(`<MenuDivider className=\"class-one\" />`),\n    \"should remove 'classname' when when both 'classname' and 'className' props exist with same literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuDivider classname={\"class-one\"} className=\"class-one\" />`),\n    prependImport(`<MenuDivider className=\"class-one\" />`),\n    \"should remove 'classname' when when both 'classname' and 'className' props exist with same literal values while one is inside an expression\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<MenuDivider classname=\"old-class\" />`,\n    `<MenuDivider classname=\"old-class\" />`,\n    \"should not change when no import even if 'classname' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent classname=\"old-class\" />`),\n    prependImport(`<OtherComponent classname=\"old-class\" />`),\n    \"should not affect other components with 'classname'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { MenuDivider } from \"other-library\";\n      <MenuDivider classname=\"old-class\" />\n    `,\n    `\n      import { MenuDivider } from \"other-library\";\n      <MenuDivider classname=\"old-class\" />\n    `,\n    \"should not change when 'MenuDivider' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as MenuDivider } from \"other-library\";\n      <MenuDivider classname=\"old-class\" />\n    `,\n    `\n      import { OtherComponent as MenuDivider } from \"other-library\";\n      <MenuDivider classname=\"old-class\" />\n    `,\n    \"should not change when 'MenuDivider' is an alias for another component that is not from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as MenuDivider } from \"monday-ui-react-core\";\n      <MenuDivider classname=\"old-class\" />\n    `,\n    `\n      import { OtherComponent as MenuDivider } from \"monday-ui-react-core\";\n      <MenuDivider classname=\"old-class\" />\n    `,\n    \"should not change when 'MenuDivider' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { MenuDivider as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent classname=\"old-class\" />\n    `,\n    `\n      import { MenuDivider as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent className=\"old-class\" />\n    `,\n    \"should change when 'MenuDivider' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/MenuItem-component-migration.test.ts",
    "content": "import transform from \"../MenuItem-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { MenuItem } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"MenuItem component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuItem classname=\"old-class\" />`),\n    prependImport(`<MenuItem className=\"old-class\" />`),\n    \"should update 'classname' to 'className'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<div><MenuItem classname=\"old-class\" /></div>`),\n    prependImport(`<div><MenuItem className=\"old-class\" /></div>`),\n    \"should update 'classname' to 'className' in a nested structure\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuItem classname=\"old-class\" data-testid=\"menu\" />`),\n    prependImport(`<MenuItem className=\"old-class\" data-testid=\"menu\" />`),\n    \"should update 'classname' to 'className' while maintaining other props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `\n      <>\n        <MenuItem classname=\"old-class\" />\n        <MenuItem classname=\"another-class\" />\n      </>`\n    ),\n    prependImport(`\n      <>\n        <MenuItem className=\"old-class\" />\n        <MenuItem className=\"another-class\" />\n      </>`),\n    \"should handle multiple instances of MenuItem each with 'classname'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuItem classname=\"class-one\" className=\"class-two\" />`),\n    prependImport(`<MenuItem classname=\"class-one\" className=\"class-two\" />`),\n    \"should not change when when both 'classname' and 'className' props exist with different literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuItem classname={styles.something} className=\"class-two\" />`),\n    prependImport(`<MenuItem classname={styles.something} className=\"class-two\" />`),\n    \"should not change when when both 'classname' and 'className' props exist with different complex and literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuItem classname={styles.classOne} className={styles.classTwo} />`),\n    prependImport(`<MenuItem classname={styles.classOne} className={styles.classTwo} />`),\n    \"should not change when when both 'classname' and 'className' props exist with different complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuItem classname={styles.classOne} className={styles.classOne} />`),\n    prependImport(`<MenuItem className={styles.classOne} />`),\n    \"should remove 'classname' when when both 'classname' and 'className' props exist with same complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuItem classname=\"class-one\" className=\"class-one\" />`),\n    prependImport(`<MenuItem className=\"class-one\" />`),\n    \"should remove 'classname' when when both 'classname' and 'className' props exist with same literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuItem classname={\"class-one\"} className=\"class-one\" />`),\n    prependImport(`<MenuItem className=\"class-one\" />`),\n    \"should remove 'classname' when when both 'classname' and 'className' props exist with same literal values while one is inside an expression\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<MenuItem classname=\"old-class\" />`,\n    `<MenuItem classname=\"old-class\" />`,\n    \"should not change when no import even if 'classname' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent classname=\"old-class\" />`),\n    prependImport(`<OtherComponent classname=\"old-class\" />`),\n    \"should not affect other components with 'classname'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { MenuItem } from \"other-library\";\n      <MenuItem classname=\"old-class\" />\n    `,\n    `\n      import { MenuItem } from \"other-library\";\n      <MenuItem classname=\"old-class\" />\n    `,\n    \"should not change when 'MenuItem' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as MenuItem } from \"other-library\";\n      <MenuItem classname=\"old-class\" />\n    `,\n    `\n      import { OtherComponent as MenuItem } from \"other-library\";\n      <MenuItem classname=\"old-class\" />\n    `,\n    \"should not change when 'MenuItem' is an alias for another component that is not from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as MenuItem } from \"monday-ui-react-core\";\n      <MenuItem classname=\"old-class\" />\n    `,\n    `\n      import { OtherComponent as MenuItem } from \"monday-ui-react-core\";\n      <MenuItem classname=\"old-class\" />\n    `,\n    \"should not change when 'MenuItem' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { MenuItem as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent classname=\"old-class\" />\n    `,\n    `\n      import { MenuItem as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent className=\"old-class\" />\n    `,\n    \"should change when 'MenuItem' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/MenuItemButton-component-migration.test.ts",
    "content": "import transform from \"../MenuItemButton-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { MenuItemButton } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"MenuItemButton component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuItemButton classname=\"old-class\" />`),\n    prependImport(`<MenuItemButton className=\"old-class\" />`),\n    \"should update 'classname' to 'className'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<div><MenuItemButton classname=\"old-class\" /></div>`),\n    prependImport(`<div><MenuItemButton className=\"old-class\" /></div>`),\n    \"should update 'classname' to 'className' in a nested structure\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuItemButton classname=\"old-class\" data-testid=\"menu\" />`),\n    prependImport(`<MenuItemButton className=\"old-class\" data-testid=\"menu\" />`),\n    \"should update 'classname' to 'className' while maintaining other props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `\n      <>\n        <MenuItemButton classname=\"old-class\" />\n        <MenuItemButton classname=\"another-class\" />\n      </>`\n    ),\n    prependImport(`\n      <>\n        <MenuItemButton className=\"old-class\" />\n        <MenuItemButton className=\"another-class\" />\n      </>`),\n    \"should handle multiple instances of MenuItemButton each with 'classname'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuItemButton classname=\"class-one\" className=\"class-two\" />`),\n    prependImport(`<MenuItemButton classname=\"class-one\" className=\"class-two\" />`),\n    \"should not change when when both 'classname' and 'className' props exist with different literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuItemButton classname={styles.something} className=\"class-two\" />`),\n    prependImport(`<MenuItemButton classname={styles.something} className=\"class-two\" />`),\n    \"should not change when when both 'classname' and 'className' props exist with different complex and literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuItemButton classname={styles.classOne} className={styles.classTwo} />`),\n    prependImport(`<MenuItemButton classname={styles.classOne} className={styles.classTwo} />`),\n    \"should not change when when both 'classname' and 'className' props exist with different complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuItemButton classname={styles.classOne} className={styles.classOne} />`),\n    prependImport(`<MenuItemButton className={styles.classOne} />`),\n    \"should remove 'classname' when when both 'classname' and 'className' props exist with same complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuItemButton classname=\"class-one\" className=\"class-one\" />`),\n    prependImport(`<MenuItemButton className=\"class-one\" />`),\n    \"should remove 'classname' when when both 'classname' and 'className' props exist with same literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuItemButton classname={\"class-one\"} className=\"class-one\" />`),\n    prependImport(`<MenuItemButton className=\"class-one\" />`),\n    \"should remove 'classname' when when both 'classname' and 'className' props exist with same literal values while one is inside an expression\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<MenuItemButton classname=\"old-class\" />`,\n    `<MenuItemButton classname=\"old-class\" />`,\n    \"should not change when no import even if 'classname' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent classname=\"old-class\" />`),\n    prependImport(`<OtherComponent classname=\"old-class\" />`),\n    \"should not affect other components with 'classname'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { MenuItemButton } from \"other-library\";\n      <MenuItemButton classname=\"old-class\" />\n    `,\n    `\n      import { MenuItemButton } from \"other-library\";\n      <MenuItemButton classname=\"old-class\" />\n    `,\n    \"should not change when 'MenuItemButton' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as MenuItemButton } from \"other-library\";\n      <MenuItemButton classname=\"old-class\" />\n    `,\n    `\n      import { OtherComponent as MenuItemButton } from \"other-library\";\n      <MenuItemButton classname=\"old-class\" />\n    `,\n    \"should not change when 'MenuItemButton' is an alias for another component that is not from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as MenuItemButton } from \"monday-ui-react-core\";\n      <MenuItemButton classname=\"old-class\" />\n    `,\n    `\n      import { OtherComponent as MenuItemButton } from \"monday-ui-react-core\";\n      <MenuItemButton classname=\"old-class\" />\n    `,\n    \"should not change when 'MenuItemButton' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { MenuItemButton as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent classname=\"old-class\" />\n    `,\n    `\n      import { MenuItemButton as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent className=\"old-class\" />\n    `,\n    \"should change when 'MenuItemButton' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/MenuTitle-component-migration.test.ts",
    "content": "import transform from \"../MenuTitle-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { MenuTitle } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"MenuTitle component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuTitle classname=\"old-class\" />`),\n    prependImport(`<MenuTitle className=\"old-class\" />`),\n    \"should update 'classname' to 'className'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<div><MenuTitle classname=\"old-class\" /></div>`),\n    prependImport(`<div><MenuTitle className=\"old-class\" /></div>`),\n    \"should update 'classname' to 'className' in a nested structure\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuTitle classname=\"old-class\" data-testid=\"menu\" />`),\n    prependImport(`<MenuTitle className=\"old-class\" data-testid=\"menu\" />`),\n    \"should update 'classname' to 'className' while maintaining other props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `\n      <>\n        <MenuTitle classname=\"old-class\" />\n        <MenuTitle classname=\"another-class\" />\n      </>`\n    ),\n    prependImport(`\n      <>\n        <MenuTitle className=\"old-class\" />\n        <MenuTitle className=\"another-class\" />\n      </>`),\n    \"should handle multiple instances of MenuTitle each with 'classname'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuTitle classname=\"class-one\" className=\"class-two\" />`),\n    prependImport(`<MenuTitle classname=\"class-one\" className=\"class-two\" />`),\n    \"should not change when when both 'classname' and 'className' props exist with different literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuTitle classname={styles.something} className=\"class-two\" />`),\n    prependImport(`<MenuTitle classname={styles.something} className=\"class-two\" />`),\n    \"should not change when when both 'classname' and 'className' props exist with different complex and literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuTitle classname={styles.classOne} className={styles.classTwo} />`),\n    prependImport(`<MenuTitle classname={styles.classOne} className={styles.classTwo} />`),\n    \"should not change when when both 'classname' and 'className' props exist with different complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuTitle classname={styles.classOne} className={styles.classOne} />`),\n    prependImport(`<MenuTitle className={styles.classOne} />`),\n    \"should remove 'classname' when when both 'classname' and 'className' props exist with same complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuTitle classname=\"class-one\" className=\"class-one\" />`),\n    prependImport(`<MenuTitle className=\"class-one\" />`),\n    \"should remove 'classname' when when both 'classname' and 'className' props exist with same literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<MenuTitle classname={\"class-one\"} className=\"class-one\" />`),\n    prependImport(`<MenuTitle className=\"class-one\" />`),\n    \"should remove 'classname' when when both 'classname' and 'className' props exist with same literal values while one is inside an expression\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<MenuTitle classname=\"old-class\" />`,\n    `<MenuTitle classname=\"old-class\" />`,\n    \"should not change when no import even if 'classname' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent classname=\"old-class\" />`),\n    prependImport(`<OtherComponent classname=\"old-class\" />`),\n    \"should not affect other components with 'classname'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { MenuTitle } from \"other-library\";\n      <MenuTitle classname=\"old-class\" />\n    `,\n    `\n      import { MenuTitle } from \"other-library\";\n      <MenuTitle classname=\"old-class\" />\n    `,\n    \"should not change when 'MenuTitle' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as MenuTitle } from \"other-library\";\n      <MenuTitle classname=\"old-class\" />\n    `,\n    `\n      import { OtherComponent as MenuTitle } from \"other-library\";\n      <MenuTitle classname=\"old-class\" />\n    `,\n    \"should not change when 'MenuTitle' is an alias for another component that is not from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as MenuTitle } from \"monday-ui-react-core\";\n      <MenuTitle classname=\"old-class\" />\n    `,\n    `\n      import { OtherComponent as MenuTitle } from \"monday-ui-react-core\";\n      <MenuTitle classname=\"old-class\" />\n    `,\n    \"should not change when 'MenuTitle' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { MenuTitle as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent classname=\"old-class\" />\n    `,\n    `\n      import { MenuTitle as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent className=\"old-class\" />\n    `,\n    \"should change when 'MenuTitle' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Modal-component-migration.test.ts",
    "content": "import transform from \"../Modal-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\nimport { describe } from \"vitest\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { Modal } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"Modal component migration\", () => {\n  describe(\"hideCloseButton removal\", () => {\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<Modal hideCloseButton={true} />`),\n      prependImport(`<Modal />`),\n      \"should remove 'hideCloseButton' prop when set to true\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<Modal hideCloseButton={false} />`),\n      prependImport(`<Modal />`),\n      \"should remove 'hideCloseButton' prop when set to false\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<Modal hideCloseButton />`),\n      prependImport(`<Modal />`),\n      \"should remove 'hideCloseButton' prop when it is a shorthand boolean\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`\n        <>\n          <Modal hideCloseButton />\n          <Modal />\n        </>\n      `),\n      prependImport(`\n        <>\n          <Modal />\n          <Modal />\n        </>\n      `),\n      \"should remove 'hideCloseButton' prop from multiple Modal instances\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      `<Modal hideCloseButton={true} />`,\n      `<Modal hideCloseButton={true} />`,\n      \"should not remove when no import exists even if 'hideCloseButton' prop is present\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<Modal hideCloseButton={true} size=\"large\" />`),\n      prependImport(`<Modal size=\"large\" />`),\n      \"should remove 'hideCloseButton' when it exists with other props\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      `\n        import { Modal } from \"some-other-library\";\n        <Modal hideCloseButton={true} />\n      `,\n      `\n        import { Modal } from \"some-other-library\";\n        <Modal hideCloseButton={true} />\n      `,\n      \"should not remove 'hideCloseButton' if Modal is imported from a different library\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<Modal />`),\n      prependImport(`<Modal />`),\n      \"should not change the component if 'hideCloseButton' prop isn't provided\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      `\n        import { SomeOtherComponent } from \"monday-ui-react-core\";\n        <SomeOtherComponent hideCloseButton={true} />\n      `,\n      `\n        import { SomeOtherComponent } from \"monday-ui-react-core\";\n        <SomeOtherComponent hideCloseButton={true} />\n      `,\n      \"should not change the component if it's not a Modal even when 'hideCloseButton' prop is provided\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      `\n        import { Modal as VibeComponent } from \"monday-ui-react-core\";\n        <VibeComponent hideCloseButton />\n      `,\n      `\n        import { Modal as VibeComponent } from \"monday-ui-react-core\";\n        <VibeComponent />\n      `,\n      \"should remove 'hideCloseButton' if imported with alias from vibe\"\n    );\n  });\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/ModalHeader-component-migration.test.ts",
    "content": "import transform from \"../ModalHeader-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\nimport { describe } from \"vitest\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { ModalHeader } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"ModalHeader component migration\", () => {\n  describe(\"hideCloseButton removal\", () => {\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<ModalHeader hideCloseButton={true} />`),\n      prependImport(`<ModalHeader />`),\n      \"should remove 'hideCloseButton' prop when set to true\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<ModalHeader hideCloseButton={false} />`),\n      prependImport(`<ModalHeader />`),\n      \"should remove 'hideCloseButton' prop when set to false\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<ModalHeader hideCloseButton />`),\n      prependImport(`<ModalHeader />`),\n      \"should remove 'hideCloseButton' prop when it is a shorthand boolean\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`\n        <>\n          <ModalHeader hideCloseButton />\n          <ModalHeader />\n        </>\n      `),\n      prependImport(`\n        <>\n          <ModalHeader />\n          <ModalHeader />\n        </>\n      `),\n      \"should remove 'hideCloseButton' prop from multiple ModalHeader instances\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      `<ModalHeader hideCloseButton={true} />`,\n      `<ModalHeader hideCloseButton={true} />`,\n      \"should not remove when no import exists even if 'hideCloseButton' prop is present\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<ModalHeader hideCloseButton={true} size=\"large\" />`),\n      prependImport(`<ModalHeader size=\"large\" />`),\n      \"should remove 'hideCloseButton' when it exists with other props\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      `\n        import { ModalHeader } from \"some-other-library\";\n        <ModalHeader hideCloseButton={true} />\n      `,\n      `\n        import { ModalHeader } from \"some-other-library\";\n        <ModalHeader hideCloseButton={true} />\n      `,\n      \"should not remove 'hideCloseButton' if ModalHeader is imported from a different library\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<ModalHeader />`),\n      prependImport(`<ModalHeader />`),\n      \"should not change the component if 'hideCloseButton' prop isn't provided\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      `\n        import { SomeOtherComponent } from \"monday-ui-react-core\";\n        <SomeOtherComponent hideCloseButton={true} />\n      `,\n      `\n        import { SomeOtherComponent } from \"monday-ui-react-core\";\n        <SomeOtherComponent hideCloseButton={true} />\n      `,\n      \"should not change the component if it's not a ModalHeader even when 'hideCloseButton' prop is provided\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      `\n        import { ModalHeader as VibeComponent } from \"monday-ui-react-core\";\n        <VibeComponent hideCloseButton />\n      `,\n      `\n        import { ModalHeader as VibeComponent } from \"monday-ui-react-core\";\n        <VibeComponent />\n      `,\n      \"should remove 'hideCloseButton' if imported with alias from vibe\"\n    );\n  });\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/RadioButton-component-migration.test.ts",
    "content": "import transform from \"../RadioButton-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { RadioButton } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"RadioButton component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<RadioButton componentClassName=\"old-class\" />`),\n    prependImport(`<RadioButton className=\"old-class\" />`),\n    \"should update 'componentClassName' to 'className'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<div><RadioButton componentClassName=\"old-class\" /></div>`),\n    prependImport(`<div><RadioButton className=\"old-class\" /></div>`),\n    \"should update 'componentClassName' to 'className' in a nested structure\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<RadioButton componentClassName=\"old-class\" type=\"info\" />`),\n    prependImport(`<RadioButton className=\"old-class\" type=\"info\" />`),\n    \"should update 'componentClassName' to 'className' while maintaining other props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `\n      <>\n        <RadioButton componentClassName=\"old-class\" />\n        <RadioButton componentClassName=\"another-class\" />\n      </>`\n    ),\n    prependImport(`\n      <>\n        <RadioButton className=\"old-class\" />\n        <RadioButton className=\"another-class\" />\n      </>`),\n    \"should handle multiple instances of RadioButton each with 'componentClassName'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<RadioButton componentClassName=\"class-one\" className=\"class-two\" />`),\n    prependImport(`<RadioButton componentClassName=\"class-one\" className=\"class-two\" />`),\n    \"should not change when when both 'componentClassName' and 'className' props exist with different literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<RadioButton componentClassName={styles.something} className=\"class-two\" />`),\n    prependImport(`<RadioButton componentClassName={styles.something} className=\"class-two\" />`),\n    \"should not change when when both 'componentClassName' and 'className' props exist with different complex and literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<RadioButton componentClassName={styles.classOne} className={styles.classTwo} />`),\n    prependImport(`<RadioButton componentClassName={styles.classOne} className={styles.classTwo} />`),\n    \"should not change when when both 'componentClassName' and 'className' props exist with different complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<RadioButton componentClassName={styles.classOne} className={styles.classOne} />`),\n    prependImport(`<RadioButton className={styles.classOne} />`),\n    \"should remove 'componentClassName' when when both 'componentClassName' and 'className' props exist with same complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<RadioButton componentClassName=\"class-one\" className=\"class-one\" />`),\n    prependImport(`<RadioButton className=\"class-one\" />`),\n    \"should remove 'componentClassName' when when both 'componentClassName' and 'className' props exist with same literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<RadioButton componentClassName={\"class-one\"} className=\"class-one\" />`),\n    prependImport(`<RadioButton className=\"class-one\" />`),\n    \"should remove 'componentClassName' when when both 'componentClassName' and 'className' props exist with same literal values while one is inside an expression\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<RadioButton componentClassName=\"old-class\" />`,\n    `<RadioButton componentClassName=\"old-class\" />`,\n    \"should not change when no import even if 'componentClassName' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent componentClassName=\"old-class\" />`),\n    prependImport(`<OtherComponent componentClassName=\"old-class\" />`),\n    \"should not affect other components with 'componentClassName'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { RadioButton } from \"other-library\";\n      <RadioButton componentClassName=\"old-class\" />\n    `,\n    `\n      import { RadioButton } from \"other-library\";\n      <RadioButton componentClassName=\"old-class\" />\n    `,\n    \"should not change when 'RadioButton' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as RadioButton } from \"other-library\";\n      <RadioButton wrapperClassName=\"old-class\" />\n    `,\n    `\n      import { OtherComponent as RadioButton } from \"other-library\";\n      <RadioButton wrapperClassName=\"old-class\" />\n    `,\n    \"should not change when 'RadioButton' is an alias for another component that is not from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as RadioButton } from \"monday-ui-react-core\";\n      <RadioButton componentClassName=\"old-class\" />\n    `,\n    `\n      import { OtherComponent as RadioButton } from \"monday-ui-react-core\";\n      <RadioButton componentClassName=\"old-class\" />\n    `,\n    \"should not change when 'RadioButton' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { RadioButton as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent componentClassName=\"old-class\" />\n    `,\n    `\n      import { RadioButton as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent className=\"old-class\" />\n    `,\n    \"should change when 'RadioButton' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Search-component-import-migration.test.ts",
    "content": "import { defineInlineTest } from \"jscodeshift/src/testUtils\";\nimport transform from \"../Search-component-import-migration\";\n\ndescribe(\"SearchComponent component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    `\n        import { SearchComponent } from \"monday-ui-react-core\";\n        <SearchComponent autoFocus placeholder=\"Search imported regular\" />\n      `,\n    `\n        import { Search } from \"monday-ui-react-core\";\n        <Search autoFocus placeholder=\"Search imported regular\" />\n      `,\n    \"should update import and update self-closing jsx accordingly\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n        import { SearchComponent } from \"monday-ui-react-core\";\n        <SearchComponent autoFocus placeholder=\"Search imported regular\"></SearchComponent>\n      `,\n    `\n        import { Search } from \"monday-ui-react-core\";\n        <Search autoFocus placeholder=\"Search imported regular\"></Search>\n      `,\n    \"should update import and update jsx accordingly\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n        import { SearchComponent } from \"monday-ui-react-core\";\n        <>\n          <SearchComponent autoFocus placeholder=\"Search imported regular\" />\n          <SearchComponent />\n          <SearchComponent debounceRate={300} />\n        </>\n      `,\n    `\n        import { Search } from \"monday-ui-react-core\";\n        <>\n          <Search autoFocus placeholder=\"Search imported regular\" />\n          <Search />\n          <Search debounceRate={300} />\n        </>\n      `,\n    \"should update import and update multiple jsx usages\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n        import { SearchComponent as SC } from \"monday-ui-react-core\";\n        <SC autoFocus placeholder=\"Search as alias\" />\n      `,\n    `\n        import { Search as SC } from \"monday-ui-react-core\";\n        <SC autoFocus placeholder=\"Search as alias\" />\n      `,\n    \"should update import but not update jsx when component is imported with an alias\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n        import { SearchComponent as SC } from \"monday-ui-react-core\";\n        <>\n          <SC autoFocus placeholder=\"Search as alias\" />\n          <SC />\n          <SC debounceRate={300} />\n        </>\n      `,\n    `\n        import { Search as SC } from \"monday-ui-react-core\";\n        <>\n          <SC autoFocus placeholder=\"Search as alias\" />\n          <SC />\n          <SC debounceRate={300} />\n        </>\n      `,\n    \"should update import but not update any jsx usage when component is imported with an alias\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n        import { Search, SearchComponent } from \"monday-ui-react-core\";\n        <SearchComponent autoFocus placeholder=\"Search imported regular\" />\n      `,\n    `\n        import { Search } from \"monday-ui-react-core\";\n        <SearchComponent autoFocus placeholder=\"Search imported regular\" />\n      `,\n    \"should remove 'SearchComponent' when both 'Search' and 'SearchComponent' are imported from core\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n        import { Search } from \"other-component-library\";\n        import { SearchComponent } from \"monday-ui-react-core\";\n        <SearchComponent autoFocus placeholder=\"Search imported regular\" />\n      `,\n    `\n        import { Search } from \"other-component-library\";\n        import { Search as SearchComponent } from \"monday-ui-react-core\";\n        <SearchComponent autoFocus placeholder=\"Search imported regular\" />\n      `,\n    \"should update 'SearchComponent' with alias when both 'Search' and 'SearchComponent' are imported, and 'Search' is not imported from core\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n        import { OtherComponent } from \"monday-ui-react-core\";\n        <OtherComponent autoFocus placeholder=\"I'm not Search\" />\n      `,\n    `\n        import { OtherComponent } from \"monday-ui-react-core\";\n        <OtherComponent autoFocus placeholder=\"I'm not Search\" />\n      `,\n    \"should not change unrelated imports\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n        import { OtherComponent as SearchComponent } from \"monday-ui-react-core\";\n        <SearchComponent autoFocus placeholder=\"I'm not Search\" />\n      `,\n    `\n        import { OtherComponent as SearchComponent } from \"monday-ui-react-core\";\n        <SearchComponent autoFocus placeholder=\"I'm not Search\" />\n      `,\n    \"should not change unrelated imports that are aliased as SearchComponent\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n        import { Search as SearchComponent } from \"monday-ui-react-core/next\";\n        <SearchComponent autoFocus placeholder=\"I'm Search\" />\n      `,\n    `\n        import { Search as SearchComponent } from \"monday-ui-react-core/next\";\n        <SearchComponent autoFocus placeholder=\"I'm Search\" />\n      `,\n    \"should not change Search from core/next import that is aliased as SearchComponent\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n        import { SearchComponent } from \"monday-ui-react-core\";\n        <SearchComponent autoFocus placeholder=\"I'm SearchComponent\" size={SearchComponent.sizes.other.SMALL} />\n      `,\n    `\n        import { Search } from \"monday-ui-react-core\";\n        <Search autoFocus placeholder=\"I'm SearchComponent\" size={Search.sizes.other.SMALL} />\n      `,\n    \"should change props that uses the namespace of 'SearchComponent' to 'Search'\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Steps-component-migration.test.ts",
    "content": "import transform from \"../Steps-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\nimport { describe } from \"vitest\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { Steps } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"Steps component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Steps isOnPrimary />`),\n    prependImport(`<Steps color={Steps.colors.PRIMARY} />`),\n    \"should remove 'isOnPrimary' if exists and add color={Steps.colors.PRIMARY}\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Steps isOnPrimary color={Steps.colors.ON_PRIMARY_COLOR}/>`),\n    prependImport(`<Steps color={Steps.colors.ON_PRIMARY_COLOR} />`),\n    \"should remove 'isOnPrimary' if exists and not add color={Steps.colors.PRIMARY} since color already exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Steps isOnPrimary={false} />`),\n    prependImport(`<Steps isOnPrimary={false} />`),\n    \"should not remove 'isOnPrimary' if exists and is false\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Steps color={Steps.colors.ON_PRIMARY_COLOR} />`),\n    prependImport(`<Steps color={Steps.colors.ON_PRIMARY_COLOR} />`),\n    \"should not change if 'isOnPrimary' doesn't exist\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`\n        <>\n          <Steps isOnPrimary />\n          <Steps color={Steps.colors.ON_PRIMARY_COLOR} />\n        </>\n      `),\n    prependImport(`\n        <>\n          <Steps color={Steps.colors.PRIMARY} />\n          <Steps color={Steps.colors.ON_PRIMARY_COLOR} />\n        </>\n      `),\n    \"with multiple elements\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<Steps isOnPrimary />`,\n    `<Steps isOnPrimary />`,\n    \"should not remove when no import even if 'isOnPrimary' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Steps activeStepIndex={10} isOnPrimary />`),\n    prependImport(`<Steps activeStepIndex={10} color={Steps.colors.PRIMARY} />`),\n    \"should remove 'isOnPrimary' when exists with multiple other props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent isOnPrimary />`),\n    prependImport(`<OtherComponent isOnPrimary />`),\n    \"should not change other components with 'isOnPrimary'\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/TabList-component-migration.test.ts",
    "content": "import transform from \"../TabList-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { TabList } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"TabList component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<TabList noPadding />`),\n    prependImport(`<TabList />`),\n    \"should remove 'noPadding' prop\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<TabList noPadding={true} />`),\n    prependImport(`<TabList />`),\n    \"should remove 'noPadding' prop\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `\n      <>\n        <TabList noPadding data-testid=\"tab1\" />\n        <TabList noPadding data-testid=\"tab2\" />\n      </>`\n    ),\n    prependImport(`\n      <>\n        <TabList data-testid=\"tab1\" />\n        <TabList data-testid=\"tab2\" />\n      </>`),\n    \"should handle multiple instances of TabList each with 'noPadding'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<TabList noPadding />`,\n    `<TabList noPadding />`,\n    \"should not change when no import even if 'noPadding' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent noPadding />`),\n    prependImport(`<OtherComponent noPadding />`),\n    \"should not affect other components with 'noPadding'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { TabList } from \"other-library\";\n      <TabList noPadding />\n    `,\n    `\n      import { TabList } from \"other-library\";\n      <TabList noPadding />\n    `,\n    \"should not change when 'TabList' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as TabList } from \"other-library\";\n      <TabList noPadding />\n    `,\n    `\n      import { OtherComponent as TabList } from \"other-library\";\n      <TabList noPadding />\n    `,\n    \"should not change when 'TabList' is an alias for another component that is not from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as TabList } from \"monday-ui-react-core\";\n      <TabList noPadding />\n    `,\n    `\n      import { OtherComponent as TabList } from \"monday-ui-react-core\";\n      <TabList noPadding />\n    `,\n    \"should not change when 'TabList' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { TabList as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent noPadding />\n    `,\n    `\n      import { TabList as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent />\n    `,\n    \"should change when 'TabList' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/TabPanels-component-migration.test.ts",
    "content": "import transform from \"../TabPanels-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { TabPanels } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"TabPanels component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<TabPanels renderOnlyActiveTab />`),\n    prependImport(`<TabPanels />`),\n    \"should remove 'renderOnlyActiveTab' prop\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<TabPanels renderOnlyActiveTab={true} />`),\n    prependImport(`<TabPanels />`),\n    \"should remove 'renderOnlyActiveTab' prop\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `\n      <>\n        <TabPanels renderOnlyActiveTab data-testid=\"tab1\" />\n        <TabPanels renderOnlyActiveTab data-testid=\"tab2\" />\n      </>`\n    ),\n    prependImport(`\n      <>\n        <TabPanels data-testid=\"tab1\" />\n        <TabPanels data-testid=\"tab2\" />\n      </>`),\n    \"should handle multiple instances of TabPanels each with 'renderOnlyActiveTab'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<TabPanels renderOnlyActiveTab />`,\n    `<TabPanels renderOnlyActiveTab />`,\n    \"should not change when no import even if 'renderOnlyActiveTab' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent renderOnlyActiveTab />`),\n    prependImport(`<OtherComponent renderOnlyActiveTab />`),\n    \"should not affect other components with 'renderOnlyActiveTab'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { TabPanels } from \"other-library\";\n      <TabPanels renderOnlyActiveTab />\n    `,\n    `\n      import { TabPanels } from \"other-library\";\n      <TabPanels renderOnlyActiveTab />\n    `,\n    \"should not change when 'TabPanels' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as TabPanels } from \"other-library\";\n      <TabPanels renderOnlyActiveTab />\n    `,\n    `\n      import { OtherComponent as TabPanels } from \"other-library\";\n      <TabPanels renderOnlyActiveTab />\n    `,\n    \"should not change when 'TabPanels' is an alias for another component that is not from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as TabPanels } from \"monday-ui-react-core\";\n      <TabPanels renderOnlyActiveTab />\n    `,\n    `\n      import { OtherComponent as TabPanels } from \"monday-ui-react-core\";\n      <TabPanels renderOnlyActiveTab />\n    `,\n    \"should not change when 'TabPanels' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { TabPanels as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent renderOnlyActiveTab />\n    `,\n    `\n      import { TabPanels as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent />\n    `,\n    \"should change when 'TabPanels' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/TextField-component-migration.test.ts",
    "content": "import transform from \"../TextField-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { TextField } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"TextField component migration\", () => {\n  describe(\"dataTestId to data-testId\", () => {\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<TextField dataTestId=\"unique-id\" />`),\n      prependImport(`<TextField data-testid=\"unique-id\" />`),\n      \"should update 'dataTestId' to 'data-testid'\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<div><TextField dataTestId=\"unique-id\" /></div>`),\n      prependImport(`<div><TextField data-testid=\"unique-id\" /></div>`),\n      \"should update 'dataTestId' to 'data-testid' in a nested structure\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<TextField dataTestId=\"unique-id\" name=\"Test TextField\" />`),\n      prependImport(`<TextField data-testid=\"unique-id\" name=\"Test TextField\" />`),\n      \"should update 'dataTestId' to 'data-testid' while maintaining other props\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(\n        `\n        <>\n          <TextField dataTestId=\"first-unique-id\" />\n          <TextField dataTestId=\"second-unique-id\" />\n        </>`\n      ),\n      prependImport(`\n        <>\n          <TextField data-testid=\"first-unique-id\" />\n          <TextField data-testid=\"second-unique-id\" />\n        </>`),\n      \"should handle multiple instances of TextField each with 'dataTestId'\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<TextField dataTestId=\"test-id\" data-testid=\"other-test-id\" />`),\n      prependImport(`<TextField dataTestId=\"test-id\" data-testid=\"other-test-id\" />`),\n      \"should not change when when both 'dataTestId' and 'data-testid' props exist with different literal values\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<TextField dataTestId=\"test-id\" data-testid=\"test-id\" />`),\n      prependImport(`<TextField data-testid=\"test-id\" />`),\n      \"should remove 'dataTestId' when both 'dataTestId' and 'data-testid' props exist and have same values\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<TextField dataTestId=\"testId\" data-testid={testId} />`),\n      prependImport(`<TextField dataTestId=\"testId\" data-testid={testId} />`),\n      \"should not change when when both 'dataTestId' and 'data-testid' props exist and have different complex values\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<TextField dataTestId={\"testId\"} data-testid=\"testId\" />`),\n      prependImport(`<TextField data-testid=\"testId\" />`),\n      \"should remove 'dataTestId' when when both 'dataTestId' and 'data-testid' props exist with same literal values while one is inside an expression\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      `<TextField dataTestId=\"unique-id\" />`,\n      `<TextField dataTestId=\"unique-id\" />`,\n      \"should not change when no import even if 'dataTestId' prop exists\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<OtherComponent dataTestId=\"unique-id\" />`),\n      prependImport(`<OtherComponent dataTestId=\"unique-id\" />`),\n      \"should not affect other components with 'dataTestId'\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      `\n        import { TextField } from \"other-library\";\n        <TextField dataTestId=\"unique-id\" />\n      `,\n      `\n        import { TextField } from \"other-library\";\n        <TextField dataTestId=\"unique-id\" />\n      `,\n      \"should not change when 'TextField' is not imported from vibe\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      `\n        import { OtherComponent as TextField } from \"other-library\";\n        <TextField dataTestId=\"unique-id\" />\n      `,\n      `\n        import { OtherComponent as TextField } from \"other-library\";\n        <TextField dataTestId=\"unique-id\" />\n      `,\n      \"should not change when 'TextField' is an alias for another component that is not from vibe\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      `\n        import { OtherComponent as TextField } from \"monday-ui-react-core\";\n        <TextField dataTestId=\"unique-id\" />\n      `,\n      `\n        import { OtherComponent as TextField } from \"monday-ui-react-core\";\n        <TextField dataTestId=\"unique-id\" />\n      `,\n      \"should not change when 'TextField' is an alias for another component from vibe\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      `\n        import { TextField as VibeComponent } from \"monday-ui-react-core\";\n        <VibeComponent dataTestId=\"unique-id\" />\n      `,\n      `\n        import { TextField as VibeComponent } from \"monday-ui-react-core\";\n        <VibeComponent data-testid=\"unique-id\" />\n      `,\n      \"should change when 'TextField' is imported with alias from vibe\"\n    );\n  });\n\n  describe('remove \"withReadOnlyStyle\" prop', () => {\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<TextField withReadOnlyStyle />`),\n      prependImport(`<TextField />`),\n      \"should remove 'withReadOnlyStyle' prop\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<TextField withReadOnlyStyle={true} />`),\n      prependImport(`<TextField />`),\n      \"should remove 'withReadOnlyStyle' prop if given with a value\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(\n        `\n        <>\n          <TextField withReadOnlyStyle data-testid=\"t1\" />\n          <TextField withReadOnlyStyle data-testid=\"t2\" />\n        </>`\n      ),\n      prependImport(`\n        <>\n          <TextField data-testid=\"t1\" />\n          <TextField data-testid=\"t2\" />\n        </>`),\n      \"should handle multiple instances of TextField each with 'withReadOnlyStyle'\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      `<TextField withReadOnlyStyle />`,\n      `<TextField withReadOnlyStyle />`,\n      \"should not change when no import even if 'withReadOnlyStyle' prop exists\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<OtherComponent withReadOnlyStyle />`),\n      prependImport(`<OtherComponent withReadOnlyStyle />`),\n      \"should not affect other components with 'withReadOnlyStyle'\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      `\n        import { TextField } from \"other-library\";\n        <TextField withReadOnlyStyle />\n      `,\n      `\n        import { TextField } from \"other-library\";\n        <TextField withReadOnlyStyle />\n      `,\n      \"should not change when 'TextField' is not imported from vibe\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      `\n        import { OtherComponent as TextField } from \"other-library\";\n        <TextField withReadOnlyStyle />\n      `,\n      `\n        import { OtherComponent as TextField } from \"other-library\";\n        <TextField withReadOnlyStyle />\n      `,\n      \"should not change when 'TextField' is an alias for another component that is not from vibe\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      `\n        import { OtherComponent as TextField } from \"monday-ui-react-core\";\n        <TextField withReadOnlyStyle />\n      `,\n      `\n        import { OtherComponent as TextField } from \"monday-ui-react-core\";\n        <TextField withReadOnlyStyle />\n      `,\n      \"should not change when 'TextField' is an alias for another component from vibe\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      `\n        import { TextField as VibeComponent } from \"monday-ui-react-core\";\n        <VibeComponent withReadOnlyStyle />\n      `,\n      `\n        import { TextField as VibeComponent } from \"monday-ui-react-core\";\n        <VibeComponent />\n      `,\n      \"should change when 'TextField' is imported with alias from vibe\"\n    );\n  });\n\n  describe('remove \"requiredAsterisk\" if \"required\" prop is given', () => {\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<TextField required requiredAsterisk />`),\n      prependImport(`<TextField required />`),\n      \"should remove 'requiredAsterisk' prop when 'required' prop exists\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<TextField requiredAsterisk />`),\n      prependImport(`<TextField requiredAsterisk />`),\n      \"should not remove 'requiredAsterisk' when 'required' prop does not exist\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`\n          <>\n            <TextField required />\n            <TextField requiredAsterisk />\n          </>\n        `),\n      prependImport(`\n          <>\n            <TextField required />\n            <TextField requiredAsterisk />\n          </>\n        `),\n      \"should not remove 'requiredAsterisk' when 'required' prop is not present in the same component\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<TextField required requiredAsterisk label=\"Name\" />`),\n      prependImport(`<TextField required label=\"Name\" />`),\n      \"should remove 'requiredAsterisk' when 'required' exists with multiple other props\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      `<TextField requiredAsterisk />`,\n      `<TextField requiredAsterisk />`,\n      \"should not remove 'requiredAsterisk' when no import even if 'required' prop exists\"\n    );\n  });\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/ThemeProvider-component-migration.test.ts",
    "content": "import transform from \"../ThemeProvider-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { ThemeProvider } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"ThemeProvider component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<ThemeProvider theme={context.themeConfig} systemTheme={context.theme}><div /></ThemeProvider>`),\n    prependImport(\n      `<ThemeProvider themeConfig={context.themeConfig} systemTheme={context.theme}><div /></ThemeProvider>`\n    ),\n    \"should update 'theme' to 'themeConfig'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<div><ThemeProvider theme={context.themeConfig} /></div>`),\n    prependImport(`<div><ThemeProvider themeConfig={context.themeConfig} /></div>`),\n    \"should update 'theme' to 'themeConfig' in a nested structure\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<ThemeProvider theme={context.themeConfig} ThemeProviderColor=\"dark\" />`),\n    prependImport(`<ThemeProvider themeConfig={context.themeConfig} ThemeProviderColor=\"dark\" />`),\n    \"should update 'theme' to 'themeConfig' while maintaining other props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `\n      <>\n        <ThemeProvider theme={context.themeConfig} />\n        <ThemeProvider theme=\"another-class\" />\n      </>`\n    ),\n    prependImport(`\n      <>\n        <ThemeProvider themeConfig={context.themeConfig} />\n        <ThemeProvider themeConfig=\"another-class\" />\n      </>`),\n    \"should handle multiple instances of ThemeProvider each with 'theme'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<ThemeProvider theme=\"class-one\" themeConfig=\"class-two\" />`),\n    prependImport(`<ThemeProvider theme=\"class-one\" themeConfig=\"class-two\" />`),\n    \"should not change when when both 'theme' and 'themeConfig' props exist with different literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<ThemeProvider theme={styles.something} themeConfig=\"class-two\" />`),\n    prependImport(`<ThemeProvider theme={styles.something} themeConfig=\"class-two\" />`),\n    \"should not change when when both 'theme' and 'themeConfig' props exist with different complex and literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<ThemeProvider theme={styles.classOne} themeConfig={styles.classTwo} />`),\n    prependImport(`<ThemeProvider theme={styles.classOne} themeConfig={styles.classTwo} />`),\n    \"should not change when when both 'theme' and 'themeConfig' props exist with different complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<ThemeProvider theme={styles.classOne} themeConfig={styles.classOne} />`),\n    prependImport(`<ThemeProvider themeConfig={styles.classOne} />`),\n    \"should remove 'theme' when when both 'theme' and 'themeConfig' props exist with same complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<ThemeProvider theme=\"class-one\" themeConfig=\"class-one\" />`),\n    prependImport(`<ThemeProvider themeConfig=\"class-one\" />`),\n    \"should remove 'theme' when when both 'theme' and 'themeConfig' props exist with same literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<ThemeProvider theme={\"class-one\"} themeConfig=\"class-one\" />`),\n    prependImport(`<ThemeProvider themeConfig=\"class-one\" />`),\n    \"should remove 'theme' when when both 'theme' and 'themeConfig' props exist with same literal values while one is inside an expression\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<ThemeProvider theme={context.themeConfig} />`,\n    `<ThemeProvider theme={context.themeConfig} />`,\n    \"should not change when no import even if 'theme' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent theme={context.themeConfig} />`),\n    prependImport(`<OtherComponent theme={context.themeConfig} />`),\n    \"should not affect other components with 'theme'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { ThemeProvider } from \"other-library\";\n      <ThemeProvider theme={context.themeConfig} />\n    `,\n    `\n      import { ThemeProvider } from \"other-library\";\n      <ThemeProvider theme={context.themeConfig} />\n    `,\n    \"should not change when 'ThemeProvider' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as ThemeProvider } from \"other-library\";\n      <ThemeProvider theme={context.themeConfig} />\n    `,\n    `\n      import { OtherComponent as ThemeProvider } from \"other-library\";\n      <ThemeProvider theme={context.themeConfig} />\n    `,\n    \"should not change when 'ThemeProvider' is an alias for another component that is not from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as ThemeProvider } from \"monday-ui-react-core\";\n      <ThemeProvider theme={context.themeConfig} />\n    `,\n    `\n      import { OtherComponent as ThemeProvider } from \"monday-ui-react-core\";\n      <ThemeProvider theme={context.themeConfig} />\n    `,\n    \"should not change when 'ThemeProvider' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { ThemeProvider as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent theme={context.themeConfig} />\n    `,\n    `\n      import { ThemeProvider as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent themeConfig={context.themeConfig} />\n    `,\n    \"should change when 'ThemeProvider' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Tipseen-component-migration.test.ts",
    "content": "import transform from \"../Tipseen-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { Tipseen } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"Tipseen component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Tipseen isCloseButtonHidden/>`),\n    prependImport(`<Tipseen hideCloseButton/>`),\n    \"should update 'isCloseButtonHidden' to 'hideCloseButton'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Tipseen hideCloseButton />`),\n    prependImport(`<Tipseen hideCloseButton />`),\n    \"should not change if Tipseen already uses new prop 'hideCloseButton'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Tipseen isCloseButtonHidden hideCloseButton />`),\n    prependImport(`<Tipseen hideCloseButton />`),\n    \"should remove 'isCloseButtonHidden' if both 'isCloseButtonHidden' and 'hideCloseButton' are present\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent isCloseButtonHidden />`),\n    prependImport(`<OtherComponent isCloseButtonHidden />`),\n    \"should not change other components even if they have similar props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Tipseen isCloseButtonHidden={true} text=\"test\" />`),\n    prependImport(`<Tipseen hideCloseButton={true} text=\"test\" />`),\n    \"should correctly update props when mixed with other attributes\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Tipseen isCloseButtonHidden={false} />`),\n    prependImport(`<Tipseen hideCloseButton={false} />`),\n    \"should correctly update props when set to false\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Tipseen } from \"other-library\";\n      <Tipseen isCloseButtonHidden />\n    `,\n    `\n      import { Tipseen } from \"other-library\";\n      <Tipseen isCloseButtonHidden />\n    `,\n    \"should not change when 'Tipseen' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as Tipseen } from \"monday-ui-react-core\";\n      <Tipseen isCloseButtonHidden />\n    `,\n    `\n      import { OtherComponent as Tipseen } from \"monday-ui-react-core\";\n      <Tipseen isCloseButtonHidden />\n    `,\n    \"should not change when 'Tipseen' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Tipseen as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent isCloseButtonHidden />\n    `,\n    `\n      import { Tipseen as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent hideCloseButton />\n    `,\n    \"should change when 'Tipseen' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/TipseenContent-component-migration.test.ts",
    "content": "import transform from \"../TipseenContent-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { TipseenContent } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"TipseenContent component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<TipseenContent isDismissHidden isSubmitHidden/>`),\n    prependImport(`<TipseenContent hideDismiss hideSubmit/>`),\n    \"should update 'isDismissHidden' to 'hideDismiss' & 'isSubmitHidden' to 'hideSubmit'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<div><TipseenContent isDismissHidden /></div>`),\n    prependImport(`<div><TipseenContent hideDismiss /></div>`),\n    \"should update 'isDismissHidden' to 'hideDismiss' in a nested structure\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<TipseenContent isDismissHidden isSubmitHidden title=\"Content\" />`),\n    prependImport(`<TipseenContent hideDismiss hideSubmit title=\"Content\" />`),\n    \"should update new props while maintaining other props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `\n      <>\n        <TipseenContent isDismissHidden />\n        <TipseenContent isDismissHidden isSubmitHidden />\n      </>`\n    ),\n    prependImport(`\n      <>\n        <TipseenContent hideDismiss />\n        <TipseenContent hideDismiss hideSubmit />\n      </>`),\n    \"should handle multiple instances of TipseenContent each with 'isDismissHidden'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<TipseenContent isDismissHidden />`,\n    `<TipseenContent isDismissHidden />`,\n    \"should not change when no import even if 'isDismissHidden' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent isDismissHidden />`),\n    prependImport(`<OtherComponent isDismissHidden />`),\n    \"should not affect other components with 'isDismissHidden'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { TipseenContent } from \"other-library\";\n      <TipseenContent isDismissHidden />\n    `,\n    `\n      import { TipseenContent } from \"other-library\";\n      <TipseenContent isDismissHidden />\n    `,\n    \"should not change when 'TipseenContent' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as TipseenContent } from \"other-library\";\n      <TipseenContent isDismissHidden isSubmitHidden />\n    `,\n    `\n      import { OtherComponent as TipseenContent } from \"other-library\";\n      <TipseenContent isDismissHidden isSubmitHidden />\n    `,\n    \"should not change when 'TipseenContent' is an alias for another component that is not from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as TipseenContent } from \"monday-ui-react-core\";\n      <TipseenContent isDismissHidden isSubmitHidden />\n    `,\n    `\n      import { OtherComponent as TipseenContent } from \"monday-ui-react-core\";\n      <TipseenContent isDismissHidden isSubmitHidden />\n    `,\n    \"should not change when 'TipseenContent' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { TipseenContent as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent isDismissHidden isSubmitHidden />\n    `,\n    `\n      import { TipseenContent as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent hideDismiss hideSubmit />\n    `,\n    \"should change when 'TipseenContent' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Toggle-component-migration.test.ts",
    "content": "import transform from \"../Toggle-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { Toggle } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"Toggle component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Toggle componentClassName=\"old-class\" isDisabled />`),\n    prependImport(`<Toggle className=\"old-class\" disabled />`),\n    \"should update 'componentClassName' to 'className' and 'isDisabled' to 'disabled'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<div><Toggle componentClassName=\"old-class\" isDisabled /></div>`),\n    prependImport(`<div><Toggle className=\"old-class\" disabled /></div>`),\n    \"should update 'componentClassName' to 'className' and 'isDisabled' to 'disabled' in a nested structure\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Toggle componentClassName=\"old-class\" type=\"info\" />`),\n    prependImport(`<Toggle className=\"old-class\" type=\"info\" />`),\n    \"should update 'componentClassName' to 'className' while maintaining other props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `\n      <>\n        <Toggle componentClassName=\"old-class\" isDisabled />\n        <Toggle componentClassName=\"another-class\" />\n      </>`\n    ),\n    prependImport(`\n      <>\n        <Toggle className=\"old-class\" disabled />\n        <Toggle className=\"another-class\" />\n      </>`),\n    \"should handle multiple instances of Toggle each with 'componentClassName'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Toggle componentClassName=\"class-one\" className=\"class-two\" />`),\n    prependImport(`<Toggle componentClassName=\"class-one\" className=\"class-two\" />`),\n    \"should not change when when both 'componentClassName' and 'className' props exist with different literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Toggle componentClassName={styles.something} className=\"class-two\" />`),\n    prependImport(`<Toggle componentClassName={styles.something} className=\"class-two\" />`),\n    \"should not change when when both 'componentClassName' and 'className' props exist with different complex and literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Toggle componentClassName={styles.classOne} className={styles.classTwo} />`),\n    prependImport(`<Toggle componentClassName={styles.classOne} className={styles.classTwo} />`),\n    \"should not change when when both 'componentClassName' and 'className' props exist with different complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Toggle componentClassName={styles.classOne} className={styles.classOne} />`),\n    prependImport(`<Toggle className={styles.classOne} />`),\n    \"should remove 'componentClassName' when when both 'componentClassName' and 'className' props exist with same complex values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Toggle componentClassName=\"class-one\" className=\"class-one\" />`),\n    prependImport(`<Toggle className=\"class-one\" />`),\n    \"should remove 'componentClassName' when when both 'componentClassName' and 'className' props exist with same literal values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Toggle componentClassName={\"class-one\"} className=\"class-one\" />`),\n    prependImport(`<Toggle className=\"class-one\" />`),\n    \"should remove 'componentClassName' when when both 'componentClassName' and 'className' props exist with same literal values while one is inside an expression\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<Toggle componentClassName=\"old-class\" />`,\n    `<Toggle componentClassName=\"old-class\" />`,\n    \"should not change when no import even if 'componentClassName' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent componentClassName=\"old-class\" />`),\n    prependImport(`<OtherComponent componentClassName=\"old-class\" />`),\n    \"should not affect other components with 'componentClassName'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Toggle } from \"other-library\";\n      <Toggle componentClassName=\"old-class\" />\n    `,\n    `\n      import { Toggle } from \"other-library\";\n      <Toggle componentClassName=\"old-class\" />\n    `,\n    \"should not change when 'Toggle' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as Toggle } from \"other-library\";\n      <Toggle wrapperClassName=\"old-class\" isDisabled />\n    `,\n    `\n      import { OtherComponent as Toggle } from \"other-library\";\n      <Toggle wrapperClassName=\"old-class\" isDisabled />\n    `,\n    \"should not change when 'Toggle' is an alias for another component that is not from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as Toggle } from \"monday-ui-react-core\";\n      <Toggle componentClassName=\"old-class\" isDisabled />\n    `,\n    `\n      import { OtherComponent as Toggle } from \"monday-ui-react-core\";\n      <Toggle componentClassName=\"old-class\" isDisabled />\n    `,\n    \"should not change when 'Toggle' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Toggle as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent componentClassName=\"old-class\" isDisabled/>\n    `,\n    `\n      import { Toggle as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent className=\"old-class\" disabled/>\n    `,\n    \"should change when 'Toggle' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Tooltip-component-migration.test.ts",
    "content": "import transform from \"../Tooltip-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { Tooltip } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"Tooltip component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Tooltip withMaxWidth />`),\n    prependImport(`<Tooltip />`),\n    \"should remove 'withMaxWidth' prop\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Tooltip withMaxWidth={true} />`),\n    prependImport(`<Tooltip />`),\n    \"should remove 'withMaxWidth' prop\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      `\n      <>\n        <Tooltip withMaxWidth data-testid=\"tab1\" />\n        <Tooltip withMaxWidth data-testid=\"tab2\" />\n      </>`\n    ),\n    prependImport(`\n      <>\n        <Tooltip data-testid=\"tab1\" />\n        <Tooltip data-testid=\"tab2\" />\n      </>`),\n    \"should handle multiple instances of Tooltip each with 'withMaxWidth'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `<Tooltip withMaxWidth />`,\n    `<Tooltip withMaxWidth />`,\n    \"should not change when no import even if 'withMaxWidth' prop exists\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<OtherComponent withMaxWidth />`),\n    prependImport(`<OtherComponent withMaxWidth />`),\n    \"should not affect other components with 'withMaxWidth'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Tooltip } from \"other-library\";\n      <Tooltip withMaxWidth />\n    `,\n    `\n      import { Tooltip } from \"other-library\";\n      <Tooltip withMaxWidth />\n    `,\n    \"should not change when 'Tooltip' is not imported from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as Tooltip } from \"other-library\";\n      <Tooltip withMaxWidth />\n    `,\n    `\n      import { OtherComponent as Tooltip } from \"other-library\";\n      <Tooltip withMaxWidth />\n    `,\n    \"should not change when 'Tooltip' is an alias for another component that is not from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { OtherComponent as Tooltip } from \"monday-ui-react-core\";\n      <Tooltip withMaxWidth />\n    `,\n    `\n      import { OtherComponent as Tooltip } from \"monday-ui-react-core\";\n      <Tooltip withMaxWidth />\n    `,\n    \"should not change when 'Tooltip' is an alias for another component from vibe\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Tooltip as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent withMaxWidth />\n    `,\n    `\n      import { Tooltip as VibeComponent } from \"monday-ui-react-core\";\n      <VibeComponent />\n    `,\n    \"should change when 'Tooltip' is imported with alias from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/next-imports-migration.test.ts",
    "content": "import transform from \"../next-imports-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\ndescribe(\"Rename type imports migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    `import { VibeComponentProps } from \"monday-ui-react-core/next\";`,\n    `import { VibeComponentProps } from \"monday-ui-react-core\";`,\n    \"should rename 'monday-ui-react-core/next' to 'monday-ui-react-core'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { VibeComponentProps } from \"monday-ui-react-core\";`,\n    `import { VibeComponentProps } from \"monday-ui-react-core\";`,\n    \"should not modify the import path if it's already 'monday-ui-react-core'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { SomeOtherType } from \"another-library\";`,\n    `import { SomeOtherType } from \"another-library\";`,\n    \"should not change unrelated imports\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { VibeComponentProps } from \"monday-ui-react-core/next\";\n     import { AnotherType } from \"monday-ui-react-core/next\";`,\n    `import { VibeComponentProps } from \"monday-ui-react-core\";\n     import { AnotherType } from \"monday-ui-react-core\";`,\n    \"should change multiple imports from 'monday-ui-react-core/next' to 'monday-ui-react-core'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { VibeComponentProps } from \"monday-ui-react-core/next\";\n     import { AnotherType } from \"another-library\";`,\n    `import { VibeComponentProps } from \"monday-ui-react-core\";\n     import { AnotherType } from \"another-library\";`,\n    \"should change the 'monday-ui-react-core/next' import and leave other imports unchanged\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { VibeComponentProps, Search } from \"monday-ui-react-core/next\";`,\n    `import { VibeComponentProps, Search } from \"monday-ui-react-core\";`,\n    \"should change the 'monday-ui-react-core/next' for multiple components imported\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/packages-rename-migration.test.ts",
    "content": "import transform from \"../packages-rename-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\ndescribe(\"Packages rename migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    `import { Button, Label } from \"monday-ui-react-core\";`,\n    `import { Button, Label } from \"@vibe/core\";`,\n    \"should rename 'monday-ui-react-core' to '@vibe/core'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { BUTTON_TEST_ID } from \"monday-ui-react-core/testIds\";`,\n    `import { BUTTON_TEST_ID } from \"@vibe/core/testIds\";`,\n    \"should rename 'monday-ui-react-core/testIds' to '@vibe/core/testIds'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { getWithin } from \"monday-ui-react-core/interactionsTests\";`,\n    `import { getWithin } from \"@vibe/core/interactionsTests\";`,\n    \"should rename 'monday-ui-react-core/interactionsTests' to '@vibe/core/interactionsTests'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import \"monday-ui-react-core/tokens\";`,\n    `import \"@vibe/core/tokens\";`,\n    \"should rename 'monday-ui-react-core/tokens' to '@vibe/core/tokens'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { Button } from \"monday-ui-react-core\";\n    import { Heart } from \"monday-ui-react-core/icons\";`,\n    `import { Button } from \"@vibe/core\";\n    import { Heart } from \"@vibe/icons\";`,\n    \"should rename both 'monday-ui-react-core' and /icons to '@vibe/core' and '@vibe/icons'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { getByLabelText } from \"another-library\";`,\n    `import { getByLabelText } from \"another-library\";`,\n    \"should not change unrelated imports\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { Button, Label } from \"monday-ui-react-core\";\n     import { getByLabelText } from \"another-library\";`,\n    `import { Button, Label } from \"@vibe/core\";\n     import { getByLabelText } from \"another-library\";`,\n    \"should rename 'monday-ui-react-core' to '@vibe/core' but leave unrelated imports unchanged\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { Button } from \"monday-ui-react-core\";\n     import { Heart } from \"monday-ui-react-core/icons\";\n     import { BUTTON_TEST_ID } from \"monday-ui-react-core/testIds\";`,\n    `import { Button } from \"@vibe/core\";\n     import { Heart } from \"@vibe/icons\";\n     import { BUTTON_TEST_ID } from \"@vibe/core/testIds\";`,\n    \"should rename all imports from 'monday-ui-react-core' and related paths correctly\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { Button } from \"monday-ui-react-core\";`,\n    `import { Button } from \"@vibe/core\";`,\n    \"should only change the import path from 'monday-ui-react-core' to '@vibe/core' if no other paths are present\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { Button } from \"monday-ui-react-core\";\n     import { SomeOtherComponent } from \"another-library\";\n     import { Icon } from \"monday-ui-react-core/icons\";`,\n    `import { Button } from \"@vibe/core\";\n     import { SomeOtherComponent } from \"another-library\";\n     import { Icon } from \"@vibe/icons\";`,\n    \"should only rename 'monday-ui-react-core' and 'monday-ui-react-core/icons' while leaving other imports unchanged\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/type-imports-migration.test.ts",
    "content": "import transform from \"../type-imports-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\ndescribe(\"Rename type imports migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    `import { VibeComponentProps } from \"monday-ui-react-core/types\";`,\n    `import { VibeComponentProps } from \"monday-ui-react-core\";`,\n    \"should rename 'monday-ui-react-core/types' to 'monday-ui-react-core'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { VibeComponentProps } from \"monday-ui-react-core\";`,\n    `import { VibeComponentProps } from \"monday-ui-react-core\";`,\n    \"should not modify the import path if it's already 'monday-ui-react-core'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { SomeOtherType } from \"another-library\";`,\n    `import { SomeOtherType } from \"another-library\";`,\n    \"should not change unrelated imports\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { VibeComponentProps } from \"monday-ui-react-core/types\";\n     import { AnotherType } from \"monday-ui-react-core/types\";`,\n    `import { VibeComponentProps } from \"monday-ui-react-core\";\n     import { AnotherType } from \"monday-ui-react-core\";`,\n    \"should change multiple imports from 'monday-ui-react-core/types' to 'monday-ui-react-core'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { VibeComponentProps } from \"monday-ui-react-core/types\";\n     import { AnotherType } from \"another-library\";`,\n    `import { VibeComponentProps } from \"monday-ui-react-core\";\n     import { AnotherType } from \"another-library\";`,\n    \"should change the 'monday-ui-react-core/types' import and leave other imports unchanged\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/__tests__/useClickableProps-hook-migration.test.ts",
    "content": "import transform from \"../useClickableProps-hook-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { useClickableProps } from \"monday-ui-react-core\";\n    ${source}\n  `;\n}\n\ndescribe(\"useClickableProps prop migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`\n      useClickableProps({\n        onClick: onClickCallback,\n        onMouseDown,\n        disabled,\n        id,\n        dataTestId: componentDataTestId,\n        ariaLabel: overrideAriaLabel,\n        ariaHidden: false,\n        ariaHasPopup: false,\n        ariaExpanded: false\n      });\n    `),\n    prependImport(`\n      useClickableProps({\n        onClick: onClickCallback,\n        onMouseDown,\n        disabled,\n        id,\n        \"data-testid\": componentDataTestId,\n        ariaLabel: overrideAriaLabel,\n        ariaHidden: false,\n        ariaHasPopup: false,\n        ariaExpanded: false\n      });\n    `),\n    \"should rename 'dataTestId' to 'data-testid'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`\n      useClickableProps({\n        dataTestId: componentDataTestId,\n        onClick: onClickCallback\n      });\n    `),\n    prependImport(`\n      useClickableProps({\n        \"data-testid\": componentDataTestId,\n        onClick: onClickCallback\n      });\n    `),\n    \"should rename 'dataTestId' to 'data-testid' when it's the first property\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`\n      useClickableProps({\n        dataTestId: componentDataTestId,\n        onClick: onClickCallback\n      });\n    `),\n    prependImport(`\n      useClickableProps({\n        \"data-testid\": componentDataTestId,\n        onClick: onClickCallback\n      });\n    `),\n    \"should rename 'dataTestId' to 'data-testid' when it's the first property\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`\n      useClickableProps({\n        onClick: onClickCallback\n      });\n    `),\n    prependImport(`\n      useClickableProps({\n        onClick: onClickCallback\n      });\n    `),\n    \"should not change anything when 'dataTestId' is not present\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { useClickableProps } from \"other-library\";\n      useClickableProps({\n        dataTestId: componentDataTestId,\n        onClick: onClickCallback\n      });\n    `,\n    `\n      import { useClickableProps } from \"other-library\";\n      useClickableProps({\n        dataTestId: componentDataTestId,\n        onClick: onClickCallback\n      });\n    `,\n    \"should not rename 'dataTestId' to 'data-testid' when not a vibe component\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/enums/Enums-migration.ts",
    "content": "import { TransformationContext } from \"../../../../types\";\nimport { getCoreImportsForFile, getPropValue, setPropValue, wrap } from \"../../../../src/utils\";\nimport enumToStringMapping from \"./enumMappings.json\";\nimport { NEW_CORE_IMPORT_PATH } from \"../../../../src/consts\";\n\nconst enumToString: Record<string, string> = enumToStringMapping;\n\n/**\n * Replace enums with string equivalent\n */\nfunction transform({ j, root }: TransformationContext) {\n  // Since it runs after the imports are updated need to get the new import path\n  const coreImports = getCoreImportsForFile(root, NEW_CORE_IMPORT_PATH);\n\n  const importedComponents = coreImports\n    .find(j.ImportSpecifier)\n    .nodes()\n    .map(importSpecifier => {\n      if (importSpecifier.local && importSpecifier.local.name) {\n        return importSpecifier.local.name;\n      }\n      return null;\n    })\n    .filter(Boolean);\n\n  const allElements = root.find(j.JSXElement).nodes();\n\n  const elements = allElements.filter(path => {\n    const openingElement = path.openingElement;\n    const elementName = openingElement.name.type === \"JSXIdentifier\" ? openingElement.name.name : null;\n    return elementName && importedComponents.includes(elementName);\n  });\n\n  if (!elements.length) return;\n  elements.forEach(elementPath => {\n    const props = j(elementPath).find(j.JSXOpeningElement).find(j.JSXAttribute);\n    props.forEach(prop => {\n      const propValue = getPropValue(j, prop.node) as string;\n      if (enumToString[propValue]) {\n        setPropValue(j, prop, {\n          value: enumToString[propValue],\n          type: \"Literal\"\n        });\n      }\n    });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/enums/__tests__/Enums-migration.test.ts",
    "content": "import transform from \"../Enums-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { Button } from \"@vibe/core\";\n    ${source}\n  `;\n}\n\ndescribe(\"Enums migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Button kind={Button.kinds.PRIMARY}/>`),\n    prependImport(`<Button kind=\"primary\"/>`),\n    \"should update enum\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Button kind={Button.kinds.SECONDARY} size={Button.sizes.SMALL} />`),\n    prependImport(`<Button kind=\"secondary\" size=\"small\" />`),\n    \"should update enum\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Button } from \"another-library\";\n      <Button size={Button.sizes.SMALL} />\n    `,\n    `\n      import { Button } from \"another-library\";\n      <Button size={Button.sizes.SMALL} />\n    `,\n    \"should not change component is not imported from vibe\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/enums/enumMappings.json",
    "content": "{\n  \"TabPanels.animationDirections.RTL\": \"rtl\",\n  \"TabPanels.animationDirections.LTR\": \"ltr\",\n  \"Dropdown.sizes.SMALL\": \"small\",\n  \"Dropdown.sizes.MEDIUM\": \"medium\",\n  \"Dropdown.sizes.LARGE\": \"large\",\n  \"Dropdown.chipColors.PRIMARY\": \"primary\",\n  \"Dropdown.chipColors.NEGATIVE\": \"negative\",\n  \"Dropdown.chipColors.POSITIVE\": \"positive\",\n  \"Dropdown.menuPlacements.TOP\": \"top\",\n  \"Dropdown.menuPlacements.BOTTOM\": \"bottom\",\n  \"Dropdown.menuPlacements.AUTO\": \"auto\",\n  \"Dropdown.menuPositions.ABSOLUTE\": \"absolute\",\n  \"Dropdown.menuPositions.FIXED\": \"fixed\",\n  \"Tipseen.closeButtonThemes.LIGHT\": \"light\",\n  \"Tipseen.closeButtonThemes.DARK\": \"dark\",\n  \"Tipseen.closeButtonThemes.FIXED_LIGHT\": \"fixed-light\",\n  \"Tipseen.closeButtonThemes.FIXED_DARK\": \"fixed-dark\",\n  \"Tipseen.animationTypes.OPACITY_AND_SLIDE\": \"opacity-and-slide\",\n  \"Tipseen.animationTypes.EXPAND\": \"expand\",\n  \"Tipseen.hideShowTriggers.CLICK\": \"click\",\n  \"Tipseen.hideShowTriggers.CLICK_OUTSIDE\": \"clickoutside\",\n  \"Tipseen.hideShowTriggers.ESCAPE_KEY\": \"esckey\",\n  \"Tipseen.hideShowTriggers.TAB_KEY\": \"tab\",\n  \"Tipseen.hideShowTriggers.MOUSE_ENTER\": \"mouseenter\",\n  \"Tipseen.hideShowTriggers.MOUSE_LEAVE\": \"mouseleave\",\n  \"Tipseen.hideShowTriggers.ENTER\": \"enter\",\n  \"Tipseen.hideShowTriggers.MOUSE_DOWN\": \"mousedown\",\n  \"Tipseen.hideShowTriggers.FOCUS\": \"focus\",\n  \"Tipseen.hideShowTriggers.BLUR\": \"blur\",\n  \"Tipseen.hideShowTriggers.CONTENT_CLICK\": \"onContentClick\",\n  \"Tipseen.hideShowTriggers.CONTEXT_MENU\": \"contextmenu\",\n  \"Tipseen.colors.PRIMARY\": \"primary\",\n  \"Tipseen.colors.INVERTED\": \"inverted\",\n  \"Tipseen.positions.TOP\": \"top\",\n  \"Tipseen.positions.RIGHT\": \"right\",\n  \"Tipseen.positions.BOTTOM\": \"bottom\",\n  \"Tipseen.positions.LEFT\": \"left\",\n  \"Box.borderColors.UI_BORDER_COLOR\": \"uiBorderColor\",\n  \"Box.borderColors.LAYOUT_BORDER_COLOR\": \"layoutBorderColor\",\n  \"Box.roundeds.SMALL\": \"roundedSmall\",\n  \"Box.roundeds.MEDIUM\": \"roundedMedium\",\n  \"Box.roundeds.BIG\": \"roundedBig\",\n  \"Box.shadows.XS\": \"shadowXs\",\n  \"Box.shadows.SMALL\": \"shadowSmall\",\n  \"Box.shadows.MEDIUM\": \"shadowMedium\",\n  \"Box.shadows.LARGE\": \"shadowLarge\",\n  \"Box.margins.AUTO\": \"mAuto\",\n  \"Box.margins.XS\": \"mXs\",\n  \"Box.margins.SMALL\": \"mSmall\",\n  \"Box.margins.MEDIUM\": \"mMedium\",\n  \"Box.margins.LARGE\": \"mLarge\",\n  \"Box.margins.XL\": \"mXl\",\n  \"Box.margins.XXL\": \"mXxl\",\n  \"Box.margins.XXXL\": \"mXxxl\",\n  \"Box.marginXs.AUTO\": \"mxAuto\",\n  \"Box.marginXs.XS\": \"mxXs\",\n  \"Box.marginXs.SMALL\": \"mxSmall\",\n  \"Box.marginXs.MEDIUM\": \"mxMedium\",\n  \"Box.marginXs.LARGE\": \"mxLarge\",\n  \"Box.marginXs.XL\": \"mxXl\",\n  \"Box.marginXs.XXL\": \"mxXxl\",\n  \"Box.marginXs.XXXL\": \"mxXxxl\",\n  \"Box.marginYs.AUTO\": \"myAuto\",\n  \"Box.marginYs.XS\": \"myXs\",\n  \"Box.marginYs.SMALL\": \"mySmall\",\n  \"Box.marginYs.MEDIUM\": \"myMedium\",\n  \"Box.marginYs.LARGE\": \"myLarge\",\n  \"Box.marginYs.XL\": \"myXl\",\n  \"Box.marginYs.XXL\": \"myXxl\",\n  \"Box.marginYs.XXXL\": \"myXxxl\",\n  \"Box.marginTops.AUTO\": \"mtAuto\",\n  \"Box.marginTops.XS\": \"mtXs\",\n  \"Box.marginTops.SMALL\": \"mtSmall\",\n  \"Box.marginTops.MEDIUM\": \"mtMedium\",\n  \"Box.marginTops.LARGE\": \"mtLarge\",\n  \"Box.marginTops.XL\": \"mtXl\",\n  \"Box.marginTops.XXL\": \"mtXxl\",\n  \"Box.marginTops.XXXL\": \"mtXxxl\",\n  \"Box.marginEnds.AUTO\": \"meAuto\",\n  \"Box.marginEnds.XS\": \"meXs\",\n  \"Box.marginEnds.SMALL\": \"meSmall\",\n  \"Box.marginEnds.MEDIUM\": \"meMedium\",\n  \"Box.marginEnds.LARGE\": \"meLarge\",\n  \"Box.marginEnds.XL\": \"meXl\",\n  \"Box.marginEnds.XXL\": \"meXxl\",\n  \"Box.marginEnds.XXXL\": \"meXxxl\",\n  \"Box.marginBottoms.AUTO\": \"mbAuto\",\n  \"Box.marginBottoms.XS\": \"mbXs\",\n  \"Box.marginBottoms.SMALL\": \"mbSmall\",\n  \"Box.marginBottoms.MEDIUM\": \"mbMedium\",\n  \"Box.marginBottoms.LARGE\": \"mbLarge\",\n  \"Box.marginBottoms.XL\": \"mbXl\",\n  \"Box.marginBottoms.XXL\": \"mbXxl\",\n  \"Box.marginBottoms.XXXL\": \"mbXxxl\",\n  \"Box.marginStarts.AUTO\": \"msAuto\",\n  \"Box.marginStarts.XS\": \"msXs\",\n  \"Box.marginStarts.SMALL\": \"msSmall\",\n  \"Box.marginStarts.MEDIUM\": \"msMedium\",\n  \"Box.marginStarts.LARGE\": \"msLarge\",\n  \"Box.marginStarts.XL\": \"msXl\",\n  \"Box.marginStarts.XXL\": \"msXxl\",\n  \"Box.marginStarts.XXXL\": \"msXxxl\",\n  \"Box.paddings.XS\": \"pXs\",\n  \"Box.paddings.SMALL\": \"pSmall\",\n  \"Box.paddings.MEDIUM\": \"pMedium\",\n  \"Box.paddings.LARGE\": \"pLarge\",\n  \"Box.paddings.XL\": \"pXl\",\n  \"Box.paddings.XXL\": \"pXxl\",\n  \"Box.paddings.XXXL\": \"pXxxl\",\n  \"Box.paddingXs.XS\": \"pxXs\",\n  \"Box.paddingXs.SMALL\": \"pxSmall\",\n  \"Box.paddingXs.MEDIUM\": \"pxMedium\",\n  \"Box.paddingXs.LARGE\": \"pxLarge\",\n  \"Box.paddingXs.XL\": \"pxXl\",\n  \"Box.paddingXs.XXL\": \"pxXxl\",\n  \"Box.paddingXs.XXXL\": \"pxXxxl\",\n  \"Box.paddingYs.XS\": \"pyXs\",\n  \"Box.paddingYs.SMALL\": \"pySmall\",\n  \"Box.paddingYs.MEDIUM\": \"pyMedium\",\n  \"Box.paddingYs.LARGE\": \"pyLarge\",\n  \"Box.paddingYs.XL\": \"pyXl\",\n  \"Box.paddingYs.XXL\": \"pyXxl\",\n  \"Box.paddingYs.XXXL\": \"pyXxxl\",\n  \"Box.paddingTops.XS\": \"ptXs\",\n  \"Box.paddingTops.SMALL\": \"ptSmall\",\n  \"Box.paddingTops.MEDIUM\": \"ptMedium\",\n  \"Box.paddingTops.LARGE\": \"ptLarge\",\n  \"Box.paddingTops.XL\": \"ptXl\",\n  \"Box.paddingTops.XXL\": \"ptXxl\",\n  \"Box.paddingTops.XXXL\": \"ptXxxl\",\n  \"Box.paddingEnds.XS\": \"peXs\",\n  \"Box.paddingEnds.SMALL\": \"peSmall\",\n  \"Box.paddingEnds.MEDIUM\": \"peMedium\",\n  \"Box.paddingEnds.LARGE\": \"peLarge\",\n  \"Box.paddingEnds.XL\": \"peXl\",\n  \"Box.paddingEnds.XXL\": \"peXxl\",\n  \"Box.paddingEnds.XXXL\": \"peXxxl\",\n  \"Box.paddingBottoms.XS\": \"pbXs\",\n  \"Box.paddingBottoms.SMALL\": \"pbSmall\",\n  \"Box.paddingBottoms.MEDIUM\": \"pbMedium\",\n  \"Box.paddingBottoms.LARGE\": \"pbLarge\",\n  \"Box.paddingBottoms.XL\": \"pbXl\",\n  \"Box.paddingBottoms.XXL\": \"pbXxl\",\n  \"Box.paddingBottoms.XXXL\": \"pbXxxl\",\n  \"Box.paddingStarts.XS\": \"psXs\",\n  \"Box.paddingStarts.SMALL\": \"psSmall\",\n  \"Box.paddingStarts.MEDIUM\": \"psMedium\",\n  \"Box.paddingStarts.LARGE\": \"psLarge\",\n  \"Box.paddingStarts.XL\": \"psXl\",\n  \"Box.paddingStarts.XXL\": \"psXxl\",\n  \"Box.paddingStarts.XXXL\": \"psXxxl\",\n  \"Box.backgroundColors\": \"BackgroundColor\",\n  \"Box.textColors\": \"BoxTextColor\",\n  \"MenuButton.sizes.XXS\": \"xxs\",\n  \"MenuButton.sizes.XS\": \"xs\",\n  \"MenuButton.sizes.SMALL\": \"small\",\n  \"MenuButton.sizes.MEDIUM\": \"medium\",\n  \"MenuButton.sizes.LARGE\": \"large\",\n  \"MenuButton.paddingSizes.NONE\": \"none\",\n  \"MenuButton.paddingSizes.SMALL\": \"small\",\n  \"MenuButton.paddingSizes.MEDIUM\": \"medium\",\n  \"MenuButton.paddingSizes.LARGE\": \"large\",\n  \"MenuButton.dialogPositions.LEFT\": \"left\",\n  \"MenuButton.dialogPositions.LEFT_START\": \"left-start\",\n  \"MenuButton.dialogPositions.LEFT_END\": \"left-end\",\n  \"MenuButton.dialogPositions.RIGHT\": \"right\",\n  \"MenuButton.dialogPositions.RIGHT_START\": \"right-start\",\n  \"MenuButton.dialogPositions.RIGHT_END\": \"right-end\",\n  \"MenuButton.dialogPositions.TOP\": \"top\",\n  \"MenuButton.dialogPositions.TOP_START\": \"top-start\",\n  \"MenuButton.dialogPositions.TOP_END\": \"top-end\",\n  \"MenuButton.dialogPositions.BOTTOM\": \"bottom\",\n  \"MenuButton.dialogPositions.BOTTOM_START\": \"bottom-start\",\n  \"MenuButton.dialogPositions.BOTTOM_END\": \"bottom-end\",\n  \"MenuButton.hideTriggers.CLICK\": \"click\",\n  \"MenuButton.hideTriggers.CLICK_OUTSIDE\": \"clickoutside\",\n  \"MenuButton.hideTriggers.ESCAPE_KEY\": \"esckey\",\n  \"MenuButton.hideTriggers.TAB_KEY\": \"tab\",\n  \"MenuButton.hideTriggers.MOUSE_ENTER\": \"mouseenter\",\n  \"MenuButton.hideTriggers.MOUSE_LEAVE\": \"mouseleave\",\n  \"MenuButton.hideTriggers.ENTER\": \"enter\",\n  \"MenuButton.hideTriggers.MOUSE_DOWN\": \"mousedown\",\n  \"MenuButton.hideTriggers.FOCUS\": \"focus\",\n  \"MenuButton.hideTriggers.BLUR\": \"blur\",\n  \"MenuButton.hideTriggers.CONTENT_CLICK\": \"onContentClick\",\n  \"MenuButton.hideTriggers.CONTEXT_MENU\": \"contextmenu\",\n  \"MenuButton.componentPositions.START\": \"start\",\n  \"MenuButton.componentPositions.END\": \"end\",\n  \"ThemeProvider.systemThemes.LIGHT\": \"light\",\n  \"ThemeProvider.systemThemes.DARK\": \"dark\",\n  \"ThemeProvider.systemThemes.BLACK\": \"black\",\n  \"ThemeProvider.colors.primaryColor\": \"primary-color\",\n  \"ThemeProvider.colors.primaryHoverColor\": \"primary-hover-color\",\n  \"ThemeProvider.colors.primarySelectedColor\": \"primary-selected-color\",\n  \"ThemeProvider.colors.primarySelectedHoverColor\": \"primary-selected-hover-color\",\n  \"ThemeProvider.colors.primarySelectedOnSecondaryColor\": \"primary-selected-on-secondary-color\",\n  \"ThemeProvider.colors.textColorOnPrimary\": \"text-color-on-primary\",\n  \"ThemeProvider.colors.brandColor\": \"brand-color\",\n  \"ThemeProvider.colors.brandHoverColor\": \"brand-hover-color\",\n  \"ThemeProvider.colors.brandSelectedColor\": \"brand-selected-color\",\n  \"ThemeProvider.colors.brandSelectedHoverColor\": \"brand-selected-hover-color\",\n  \"ThemeProvider.colors.textColorOnBrand\": \"text-color-on-brand\",\n  \"ButtonGroup.sizes.XXS\": \"xxs\",\n  \"ButtonGroup.sizes.XS\": \"xs\",\n  \"ButtonGroup.sizes.SMALL\": \"small\",\n  \"ButtonGroup.sizes.MEDIUM\": \"medium\",\n  \"ButtonGroup.sizes.LARGE\": \"large\",\n  \"ButtonGroup.kinds.PRIMARY\": \"primary\",\n  \"ButtonGroup.kinds.SECONDARY\": \"secondary\",\n  \"ButtonGroup.kinds.TERTIARY\": \"tertiary\",\n  \"EditableHeading.types.H1\": \"h1\",\n  \"EditableHeading.types.H2\": \"h2\",\n  \"EditableHeading.types.H3\": \"h3\",\n  \"EditableHeading.weights.BOLD\": \"bold\",\n  \"EditableHeading.weights.MEDIUM\": \"medium\",\n  \"EditableHeading.weights.NORMAL\": \"normal\",\n  \"EditableHeading.weights.LIGHT\": \"light\",\n  \"Chips.colors.GRASS_GREEN\": \"grass_green\",\n  \"Chips.colors.DONE_GREEN\": \"done-green\",\n  \"Chips.colors.BRIGHT_GREEN\": \"bright-green\",\n  \"Chips.colors.SALADISH\": \"saladish\",\n  \"Chips.colors.EGG_YOLK\": \"egg_yolk\",\n  \"Chips.colors.WORKING_ORANGE\": \"working_orange\",\n  \"Chips.colors.DARK_ORANGE\": \"dark-orange\",\n  \"Chips.colors.PEACH\": \"peach\",\n  \"Chips.colors.SUNSET\": \"sunset\",\n  \"Chips.colors.STUCK_RED\": \"stuck-red\",\n  \"Chips.colors.DARK_RED\": \"dark-red\",\n  \"Chips.colors.SOFIA_PINK\": \"sofia_pink\",\n  \"Chips.colors.LIPSTICK\": \"lipstick\",\n  \"Chips.colors.BUBBLE\": \"bubble\",\n  \"Chips.colors.PURPLE\": \"purple\",\n  \"Chips.colors.DARK_PURPLE\": \"dark_purple\",\n  \"Chips.colors.BERRY\": \"berry\",\n  \"Chips.colors.DARK_INDIGO\": \"dark_indigo\",\n  \"Chips.colors.INDIGO\": \"indigo\",\n  \"Chips.colors.NAVY\": \"navy\",\n  \"Chips.colors.BRIGHT_BLUE\": \"bright-blue\",\n  \"Chips.colors.DARK_BLUE\": \"dark-blue\",\n  \"Chips.colors.AQUAMARINE\": \"aquamarine\",\n  \"Chips.colors.CHILI_BLUE\": \"chili-blue\",\n  \"Chips.colors.RIVER\": \"river\",\n  \"Chips.colors.WINTER\": \"winter\",\n  \"Chips.colors.EXPLOSIVE\": \"explosive\",\n  \"Chips.colors.AMERICAN_GRAY\": \"american_gray\",\n  \"Chips.colors.BLACKISH\": \"blackish\",\n  \"Chips.colors.BROWN\": \"brown\",\n  \"Chips.colors.ORCHID\": \"orchid\",\n  \"Chips.colors.TAN\": \"tan\",\n  \"Chips.colors.SKY\": \"sky\",\n  \"Chips.colors.COFFEE\": \"coffee\",\n  \"Chips.colors.ROYAL\": \"royal\",\n  \"Chips.colors.TEAL\": \"teal\",\n  \"Chips.colors.LAVENDER\": \"lavender\",\n  \"Chips.colors.STEEL\": \"steel\",\n  \"Chips.colors.LILAC\": \"lilac\",\n  \"Chips.colors.PECAN\": \"pecan\",\n  \"Chips.colors.POSITIVE\": \"positive\",\n  \"Chips.colors.NEGATIVE\": \"negative\",\n  \"Chips.colors.PRIMARY\": \"primary\",\n  \"Chips.colors.WARNING\": \"warning\",\n  \"Chips.avatarTypes.IMG\": \"img\",\n  \"Chips.avatarTypes.ICON\": \"icon\",\n  \"Chips.avatarTypes.TEXT\": \"text\",\n  \"BreadcrumbsBar.types.NAVIGATION\": \"navigation\",\n  \"BreadcrumbsBar.types.INDICATION\": \"indication\",\n  \"Skeleton.types.CIRCLE\": \"circle\",\n  \"Skeleton.types.RECTANGLE\": \"rectangle\",\n  \"Skeleton.types.TEXT\": \"text\",\n  \"Skeleton.sizes.CUSTOM\": \"custom\",\n  \"Heading.types.H1\": \"h1\",\n  \"Heading.types.H2\": \"h2\",\n  \"Heading.types.H3\": \"h3\",\n  \"Heading.weights.BOLD\": \"bold\",\n  \"Heading.weights.MEDIUM\": \"medium\",\n  \"Heading.weights.NORMAL\": \"normal\",\n  \"Heading.weights.LIGHT\": \"light\",\n  \"Heading.align.START\": \"start\",\n  \"Heading.align.CENTER\": \"center\",\n  \"Heading.align.END\": \"end\",\n  \"Heading.colors.PRIMARY\": \"primary\",\n  \"Heading.colors.SECONDARY\": \"secondary\",\n  \"Heading.colors.ON_PRIMARY\": \"onPrimary\",\n  \"Heading.colors.ON_INVERTED\": \"onInverted\",\n  \"Heading.colors.FIXED_LIGHT\": \"fixedLight\",\n  \"Heading.colors.FIXED_DARK\": \"fixedDark\",\n  \"Heading.colors.INHERIT\": \"inherit\",\n  \"Toast.types.NORMAL\": \"normal\",\n  \"Toast.types.POSITIVE\": \"positive\",\n  \"Toast.types.NEGATIVE\": \"negative\",\n  \"Toast.types.WARNING\": \"warning\",\n  \"Toast.types.DARK\": \"dark\",\n  \"Toast.actionTypes.LINK\": \"link\",\n  \"Toast.actionTypes.BUTTON\": \"button\",\n  \"AttentionBox.types.PRIMARY\": \"primary\",\n  \"AttentionBox.types.SUCCESS\": \"success\",\n  \"AttentionBox.types.DANGER\": \"danger\",\n  \"AttentionBox.types.DARK\": \"dark\",\n  \"AttentionBox.types.WARNING\": \"warning\",\n  \"AttentionBox.iconTypes.SVG\": \"svg\",\n  \"AttentionBox.iconTypes.ICON_FONT\": \"font\",\n  \"AttentionBox.iconTypes.SRC\": \"src\",\n  \"MultiStepIndicator.types.PRIMARY\": \"primary\",\n  \"MultiStepIndicator.types.SUCCESS\": \"success\",\n  \"MultiStepIndicator.types.DANGER\": \"danger\",\n  \"MultiStepIndicator.types.DARK\": \"dark\",\n  \"MultiStepIndicator.stepStatuses.PENDING\": \"pending\",\n  \"MultiStepIndicator.stepStatuses.ACTIVE\": \"active\",\n  \"MultiStepIndicator.stepStatuses.FULFILLED\": \"fulfilled\",\n  \"MultiStepIndicator.textPlacements.HORIZONTAL\": \"horizontal\",\n  \"MultiStepIndicator.textPlacements.VERTICAL\": \"vertical\",\n  \"MultiStepIndicator.sizes.SMALL\": \"small\",\n  \"MultiStepIndicator.sizes.MEDIUM\": \"medium\",\n  \"MultiStepIndicator.sizes.LARGE\": \"large\",\n  \"ListItemIcon.margin.START\": \"start\",\n  \"ListItemIcon.margin.END\": \"end\",\n  \"ListItemIcon.components.DIV\": \"div\",\n  \"ListItemIcon.components.LI\": \"li\",\n  \"ListItemIcon.components.A\": \"a\",\n  \"Label.colors.PRIMARY\": \"primary\",\n  \"Label.colors.DARK\": \"dark\",\n  \"Label.colors.NEGATIVE\": \"negative\",\n  \"Label.colors.POSITIVE\": \"positive\",\n  \"Label.kinds.FILL\": \"fill\",\n  \"Label.kinds.LINE\": \"line\",\n  \"TextField.sizes.SMALL\": \"small\",\n  \"TextField.sizes.MEDIUM\": \"medium\",\n  \"TextField.sizes.LARGE\": \"large\",\n  \"TextField.feedbacks.ERROR\": \"error\",\n  \"TextField.feedbacks.SUCCESS\": \"success\",\n  \"TextField.types.TEXT\": \"text\",\n  \"TextField.types.PASSWORD\": \"password\",\n  \"TextField.types.SEARCH\": \"search\",\n  \"TextField.types.DATE\": \"date\",\n  \"TextField.types.DATE_TIME\": \"datetime-local\",\n  \"TextField.types.NUMBER\": \"number\",\n  \"TextField.types.TEL\": \"tel\",\n  \"TextField.types.URL\": \"url\",\n  \"TextField.types.EMAIL\": \"email\",\n  \"Slider.sizes.SMALL\": \"small\",\n  \"Slider.sizes.MEDIUM\": \"medium\",\n  \"Slider.sizes.LARGE\": \"large\",\n  \"Slider.colors.PRIMARY\": \"primary\",\n  \"Slider.colors.NEGATIVE\": \"negative\",\n  \"Slider.colors.POSITIVE\": \"positive\",\n  \"SliderInfix.kinds.PREFIX\": \"prefix\",\n  \"SliderInfix.kinds.POSTFIX\": \"postfix\",\n  \"Combobox.sizes.SMALL\": \"small\",\n  \"Combobox.sizes.MEDIUM\": \"medium\",\n  \"Combobox.sizes.LARGE\": \"large\",\n  \"Combobox.iconTypes.DEFAULT\": \"default\",\n  \"Combobox.iconTypes.RENDERER\": \"renderer\",\n  \"ComboboxOption.iconTypes.DEFAULT\": \"default\",\n  \"ComboboxOption.iconTypes.RENDERER\": \"renderer\",\n  \"AlertBanner.backgroundColors.PRIMARY\": \"primary\",\n  \"AlertBanner.backgroundColors.POSITIVE\": \"positive\",\n  \"AlertBanner.backgroundColors.NEGATIVE\": \"negative\",\n  \"AlertBanner.backgroundColors.DARK\": \"dark\",\n  \"AlertBanner.backgroundColors.WARNING\": \"warning\",\n  \"ListItem.sizes.XXS\": \"xxs\",\n  \"ListItem.sizes.XS\": \"xs\",\n  \"ListItem.sizes.SMALL\": \"small\",\n  \"ListItem.sizes.MEDIUM\": \"medium\",\n  \"ListItem.sizes.LARGE\": \"large\",\n  \"ListItem.components.DIV\": \"div\",\n  \"ListItem.components.LI\": \"li\",\n  \"ListItem.components.A\": \"a\",\n  \"Button.sizes.XXS\": \"xxs\",\n  \"Button.sizes.XS\": \"xs\",\n  \"Button.sizes.SMALL\": \"small\",\n  \"Button.sizes.MEDIUM\": \"medium\",\n  \"Button.sizes.LARGE\": \"large\",\n  \"Button.colors.PRIMARY\": \"primary\",\n  \"Button.colors.POSITIVE\": \"positive\",\n  \"Button.colors.NEGATIVE\": \"negative\",\n  \"Button.colors.INVERTED\": \"inverted\",\n  \"Button.colors.ON_PRIMARY_COLOR\": \"on-primary-color\",\n  \"Button.colors.ON_INVERTED_BACKGROUND\": \"on-inverted-background\",\n  \"Button.colors.BRAND\": \"brand\",\n  \"Button.colors.FIXED_LIGHT\": \"fixed-light\",\n  \"Button.kinds.PRIMARY\": \"primary\",\n  \"Button.kinds.SECONDARY\": \"secondary\",\n  \"Button.kinds.TERTIARY\": \"tertiary\",\n  \"Button.types.BUTTON\": \"button\",\n  \"Button.types.SUBMIT\": \"submit\",\n  \"Button.types.RESET\": \"reset\",\n  \"Button.inputTags.BUTTON\": \"button\",\n  \"Button.inputTags.SUBMIT\": \"submit\",\n  \"Button.inputTags.RESET\": \"reset\",\n  \"Steps.types.NUMBERS\": \"numbers\",\n  \"Steps.types.GALLERY\": \"gallery\",\n  \"Steps.colors.PRIMARY\": \"primary\",\n  \"Steps.colors.ON_PRIMARY_COLOR\": \"on-primary-color\",\n  \"Steps.colors.ON_INVERTED_BACKGROUND\": \"on-inverted-background\",\n  \"Link.position.START\": \"start\",\n  \"Link.position.END\": \"end\",\n  \"Link.iconPositions.START\": \"start\",\n  \"Link.iconPositions.END\": \"end\",\n  \"Link.targets.NEW_WINDOW\": \"_blank\",\n  \"Link.targets.SELF\": \"_self\",\n  \"Link.targets.PARENT\": \"_parent\",\n  \"Link.targets.TOP\": \"_top\",\n  \"Table.sizes.SMALL\": \"small\",\n  \"Table.sizes.MEDIUM\": \"medium\",\n  \"Table.sizes.LARGE\": \"large\",\n  \"Loader.sizes.XS\": \"xs\",\n  \"Loader.sizes.SMALL\": \"small\",\n  \"Loader.sizes.MEDIUM\": \"medium\",\n  \"Loader.sizes.LARGE\": \"large\",\n  \"Loader.colors.PRIMARY\": \"primary\",\n  \"Loader.colors.SECONDARY\": \"secondary\",\n  \"Loader.colors.ON_PRIMARY\": \"onPrimary\",\n  \"Loader.colors.DARK\": \"dark\",\n  \"List.components.DIV\": \"div\",\n  \"List.components.NAV\": \"nav\",\n  \"List.components.UL\": \"ul\",\n  \"List.components.OL\": \"ol\",\n  \"Divider.directions.VERTICAL\": \"vertical\",\n  \"Divider.directions.HORIZONTAL\": \"horizontal\",\n  \"MenuItemButton.kinds\": \"Button\",\n  \"MenuItemButton.tooltipPositions.TOP\": \"top\",\n  \"MenuItemButton.tooltipPositions.RIGHT\": \"right\",\n  \"MenuItemButton.tooltipPositions.BOTTOM\": \"bottom\",\n  \"MenuItemButton.tooltipPositions.LEFT\": \"left\",\n  \"MenuTitle.positions.TOP\": \"top\",\n  \"MenuTitle.positions.BOTTOM\": \"bottom\",\n  \"MenuTitle.positions.CENTER\": \"center\",\n  \"MenuTitle.captionPositions.TOP\": \"top\",\n  \"MenuTitle.captionPositions.BOTTOM\": \"bottom\",\n  \"MenuTitle.captionPositions.CENTER\": \"center\",\n  \"MenuItem.iconType.SVG\": \"svg\",\n  \"MenuItem.iconType.ICON_FONT\": \"font\",\n  \"MenuItem.iconType.SRC\": \"src\",\n  \"MenuItem.tooltipPositions.TOP\": \"top\",\n  \"MenuItem.tooltipPositions.RIGHT\": \"right\",\n  \"MenuItem.tooltipPositions.BOTTOM\": \"bottom\",\n  \"MenuItem.tooltipPositions.LEFT\": \"left\",\n  \"Menu.sizes.XXS\": \"xxs\",\n  \"Menu.sizes.XS\": \"xs\",\n  \"Menu.sizes.SMALL\": \"small\",\n  \"Menu.sizes.MEDIUM\": \"medium\",\n  \"Menu.sizes.LARGE\": \"large\",\n  \"Avatar.types.IMG\": \"img\",\n  \"Avatar.types.ICON\": \"icon\",\n  \"Avatar.types.TEXT\": \"text\",\n  \"Avatar.sizes.SMALL\": \"small\",\n  \"Avatar.sizes.MEDIUM\": \"medium\",\n  \"Avatar.sizes.LARGE\": \"large\",\n  \"Avatar.colors.GRASS_GREEN\": \"grass_green\",\n  \"Avatar.colors.DONE_GREEN\": \"done-green\",\n  \"Avatar.colors.BRIGHT_GREEN\": \"bright-green\",\n  \"Avatar.colors.SALADISH\": \"saladish\",\n  \"Avatar.colors.EGG_YOLK\": \"egg_yolk\",\n  \"Avatar.colors.WORKING_ORANGE\": \"working_orange\",\n  \"Avatar.colors.DARK_ORANGE\": \"dark-orange\",\n  \"Avatar.colors.PEACH\": \"peach\",\n  \"Avatar.colors.SUNSET\": \"sunset\",\n  \"Avatar.colors.STUCK_RED\": \"stuck-red\",\n  \"Avatar.colors.DARK_RED\": \"dark-red\",\n  \"Avatar.colors.SOFIA_PINK\": \"sofia_pink\",\n  \"Avatar.colors.LIPSTICK\": \"lipstick\",\n  \"Avatar.colors.BUBBLE\": \"bubble\",\n  \"Avatar.colors.PURPLE\": \"purple\",\n  \"Avatar.colors.DARK_PURPLE\": \"dark_purple\",\n  \"Avatar.colors.BERRY\": \"berry\",\n  \"Avatar.colors.DARK_INDIGO\": \"dark_indigo\",\n  \"Avatar.colors.INDIGO\": \"indigo\",\n  \"Avatar.colors.NAVY\": \"navy\",\n  \"Avatar.colors.BRIGHT_BLUE\": \"bright-blue\",\n  \"Avatar.colors.DARK_BLUE\": \"dark-blue\",\n  \"Avatar.colors.AQUAMARINE\": \"aquamarine\",\n  \"Avatar.colors.CHILI_BLUE\": \"chili-blue\",\n  \"Avatar.colors.RIVER\": \"river\",\n  \"Avatar.colors.WINTER\": \"winter\",\n  \"Avatar.colors.EXPLOSIVE\": \"explosive\",\n  \"Avatar.colors.AMERICAN_GRAY\": \"american_gray\",\n  \"Avatar.colors.BLACKISH\": \"blackish\",\n  \"Avatar.colors.BROWN\": \"brown\",\n  \"Avatar.colors.ORCHID\": \"orchid\",\n  \"Avatar.colors.TAN\": \"tan\",\n  \"Avatar.colors.SKY\": \"sky\",\n  \"Avatar.colors.COFFEE\": \"coffee\",\n  \"Avatar.colors.ROYAL\": \"royal\",\n  \"Avatar.colors.TEAL\": \"teal\",\n  \"Avatar.colors.LAVENDER\": \"lavender\",\n  \"Avatar.colors.STEEL\": \"steel\",\n  \"Avatar.colors.LILAC\": \"lilac\",\n  \"Avatar.colors.PECAN\": \"pecan\",\n  \"Avatar.colors.POSITIVE\": \"positive\",\n  \"Avatar.colors.NEGATIVE\": \"negative\",\n  \"Avatar.colors.PRIMARY\": \"primary\",\n  \"Avatar.colors.WARNING\": \"warning\",\n  \"Avatar.backgroundColors.GRASS_GREEN\": \"grass_green\",\n  \"Avatar.backgroundColors.DONE_GREEN\": \"done-green\",\n  \"Avatar.backgroundColors.BRIGHT_GREEN\": \"bright-green\",\n  \"Avatar.backgroundColors.SALADISH\": \"saladish\",\n  \"Avatar.backgroundColors.EGG_YOLK\": \"egg_yolk\",\n  \"Avatar.backgroundColors.WORKING_ORANGE\": \"working_orange\",\n  \"Avatar.backgroundColors.DARK_ORANGE\": \"dark-orange\",\n  \"Avatar.backgroundColors.PEACH\": \"peach\",\n  \"Avatar.backgroundColors.SUNSET\": \"sunset\",\n  \"Avatar.backgroundColors.STUCK_RED\": \"stuck-red\",\n  \"Avatar.backgroundColors.DARK_RED\": \"dark-red\",\n  \"Avatar.backgroundColors.SOFIA_PINK\": \"sofia_pink\",\n  \"Avatar.backgroundColors.LIPSTICK\": \"lipstick\",\n  \"Avatar.backgroundColors.BUBBLE\": \"bubble\",\n  \"Avatar.backgroundColors.PURPLE\": \"purple\",\n  \"Avatar.backgroundColors.DARK_PURPLE\": \"dark_purple\",\n  \"Avatar.backgroundColors.BERRY\": \"berry\",\n  \"Avatar.backgroundColors.DARK_INDIGO\": \"dark_indigo\",\n  \"Avatar.backgroundColors.INDIGO\": \"indigo\",\n  \"Avatar.backgroundColors.NAVY\": \"navy\",\n  \"Avatar.backgroundColors.BRIGHT_BLUE\": \"bright-blue\",\n  \"Avatar.backgroundColors.DARK_BLUE\": \"dark-blue\",\n  \"Avatar.backgroundColors.AQUAMARINE\": \"aquamarine\",\n  \"Avatar.backgroundColors.CHILI_BLUE\": \"chili-blue\",\n  \"Avatar.backgroundColors.RIVER\": \"river\",\n  \"Avatar.backgroundColors.WINTER\": \"winter\",\n  \"Avatar.backgroundColors.EXPLOSIVE\": \"explosive\",\n  \"Avatar.backgroundColors.AMERICAN_GRAY\": \"american_gray\",\n  \"Avatar.backgroundColors.BLACKISH\": \"blackish\",\n  \"Avatar.backgroundColors.BROWN\": \"brown\",\n  \"Avatar.backgroundColors.ORCHID\": \"orchid\",\n  \"Avatar.backgroundColors.TAN\": \"tan\",\n  \"Avatar.backgroundColors.SKY\": \"sky\",\n  \"Avatar.backgroundColors.COFFEE\": \"coffee\",\n  \"Avatar.backgroundColors.ROYAL\": \"royal\",\n  \"Avatar.backgroundColors.TEAL\": \"teal\",\n  \"Avatar.backgroundColors.LAVENDER\": \"lavender\",\n  \"Avatar.backgroundColors.STEEL\": \"steel\",\n  \"Avatar.backgroundColors.LILAC\": \"lilac\",\n  \"Avatar.backgroundColors.PECAN\": \"pecan\",\n  \"Avatar.backgroundColors.POSITIVE\": \"positive\",\n  \"Avatar.backgroundColors.NEGATIVE\": \"negative\",\n  \"Avatar.backgroundColors.PRIMARY\": \"primary\",\n  \"Avatar.backgroundColors.WARNING\": \"warning\",\n  \"ColorPicker.sizes.SMALL\": \"small\",\n  \"ColorPicker.sizes.MEDIUM\": \"medium\",\n  \"ColorPicker.sizes.LARGE\": \"large\",\n  \"ColorPicker.colorStyles.REGULAR\": \"regular\",\n  \"ColorPicker.colorStyles.HOVER\": \"hover\",\n  \"ColorPicker.colorStyles.SELECTED\": \"selected\",\n  \"ColorPicker.colorSizes.SMALL\": \"small\",\n  \"ColorPicker.colorSizes.MEDIUM\": \"medium\",\n  \"ColorPicker.colorSizes.LARGE\": \"large\",\n  \"ColorPicker.colorShapes.SQUARE\": \"square\",\n  \"ColorPicker.colorShapes.CIRCLE\": \"circle\",\n  \"ColorPickerContent.sizes.SMALL\": \"small\",\n  \"ColorPickerContent.sizes.MEDIUM\": \"medium\",\n  \"ColorPickerContent.sizes.LARGE\": \"large\",\n  \"ColorPickerContent.colorStyles.REGULAR\": \"regular\",\n  \"ColorPickerContent.colorStyles.HOVER\": \"hover\",\n  \"ColorPickerContent.colorStyles.SELECTED\": \"selected\",\n  \"ColorPickerContent.colorSizes.SMALL\": \"small\",\n  \"ColorPickerContent.colorSizes.MEDIUM\": \"medium\",\n  \"ColorPickerContent.colorSizes.LARGE\": \"large\",\n  \"ColorPickerContent.colorShapes.SQUARE\": \"square\",\n  \"ColorPickerContent.colorShapes.CIRCLE\": \"circle\",\n  \"SplitButton.secondaryPositions.BOTTOM_START\": \"bottom-start\",\n  \"SplitButton.secondaryPositions.BOTTOM_MIDDLE\": \"bottom\",\n  \"SplitButton.secondaryPositions.BOTTOM_END\": \"bottom-end\",\n  \"SplitButton.secondaryDialogPositions.BOTTOM_START\": \"bottom-start\",\n  \"SplitButton.secondaryDialogPositions.BOTTOM_MIDDLE\": \"bottom\",\n  \"SplitButton.secondaryDialogPositions.BOTTOM_END\": \"bottom-end\",\n  \"SplitButton.sizes.XXS\": \"xxs\",\n  \"SplitButton.sizes.XS\": \"xs\",\n  \"SplitButton.sizes.SMALL\": \"small\",\n  \"SplitButton.sizes.MEDIUM\": \"medium\",\n  \"SplitButton.sizes.LARGE\": \"large\",\n  \"SplitButton.colors.PRIMARY\": \"primary\",\n  \"SplitButton.colors.POSITIVE\": \"positive\",\n  \"SplitButton.colors.NEGATIVE\": \"negative\",\n  \"SplitButton.colors.INVERTED\": \"inverted\",\n  \"SplitButton.colors.ON_PRIMARY_COLOR\": \"on-primary-color\",\n  \"SplitButton.colors.ON_INVERTED_BACKGROUND\": \"on-inverted-background\",\n  \"SplitButton.colors.BRAND\": \"brand\",\n  \"SplitButton.colors.FIXED_LIGHT\": \"fixed-light\",\n  \"SplitButton.kinds.PRIMARY\": \"primary\",\n  \"SplitButton.kinds.SECONDARY\": \"secondary\",\n  \"SplitButton.kinds.TERTIARY\": \"tertiary\",\n  \"SplitButton.types.BUTTON\": \"button\",\n  \"SplitButton.types.SUBMIT\": \"submit\",\n  \"SplitButton.types.RESET\": \"reset\",\n  \"SplitButton.inputTags.BUTTON\": \"button\",\n  \"SplitButton.inputTags.SUBMIT\": \"submit\",\n  \"SplitButton.inputTags.RESET\": \"reset\",\n  \"SplitButton.dialogPaddingSizes.NONE\": \"none\",\n  \"SplitButton.dialogPaddingSizes.SMALL\": \"small\",\n  \"SplitButton.dialogPaddingSizes.MEDIUM\": \"medium\",\n  \"SplitButton.dialogPaddingSizes.LARGE\": \"large\",\n  \"EditableText.types.TEXT1\": \"text1\",\n  \"EditableText.types.TEXT2\": \"text2\",\n  \"EditableText.types.TEXT3\": \"text3\",\n  \"EditableText.weights.BOLD\": \"bold\",\n  \"EditableText.weights.MEDIUM\": \"medium\",\n  \"EditableText.weights.NORMAL\": \"normal\",\n  \"DialogContentContainer.types.MODAL\": \"modal\",\n  \"DialogContentContainer.types.POPOVER\": \"popover\",\n  \"DialogContentContainer.sizes.NONE\": \"none\",\n  \"DialogContentContainer.sizes.SMALL\": \"small\",\n  \"DialogContentContainer.sizes.MEDIUM\": \"medium\",\n  \"DialogContentContainer.sizes.LARGE\": \"large\",\n  \"LinearProgressBar.styles.PRIMARY\": \"primary\",\n  \"LinearProgressBar.styles.SECONDARY\": \"secondary\",\n  \"LinearProgressBar.styles.POSITIVE\": \"positive\",\n  \"LinearProgressBar.styles.NEGATIVE\": \"negative\",\n  \"LinearProgressBar.styles.WARNING\": \"warning\",\n  \"LinearProgressBar.styles.NONE\": \"none\",\n  \"LinearProgressBar.barStyles.PRIMARY\": \"primary\",\n  \"LinearProgressBar.barStyles.SECONDARY\": \"secondary\",\n  \"LinearProgressBar.barStyles.POSITIVE\": \"positive\",\n  \"LinearProgressBar.barStyles.NEGATIVE\": \"negative\",\n  \"LinearProgressBar.barStyles.WARNING\": \"warning\",\n  \"LinearProgressBar.barStyles.NONE\": \"none\",\n  \"LinearProgressBar.types.PRIMARY\": \"primary\",\n  \"LinearProgressBar.types.SECONDARY\": \"secondary\",\n  \"LinearProgressBar.barTypes.PRIMARY\": \"primary\",\n  \"LinearProgressBar.barTypes.SECONDARY\": \"secondary\",\n  \"LinearProgressBar.sizes.XXS\": \"xxs\",\n  \"LinearProgressBar.sizes.XS\": \"xs\",\n  \"LinearProgressBar.sizes.SMALL\": \"small\",\n  \"LinearProgressBar.sizes.MEDIUM\": \"medium\",\n  \"LinearProgressBar.sizes.LARGE\": \"large\",\n  \"IconButton.sizes.XXS\": \"xxs\",\n  \"IconButton.sizes.XS\": \"xs\",\n  \"IconButton.sizes.SMALL\": \"small\",\n  \"IconButton.sizes.MEDIUM\": \"medium\",\n  \"IconButton.sizes.LARGE\": \"large\",\n  \"IconButton.colors.PRIMARY\": \"primary\",\n  \"IconButton.colors.POSITIVE\": \"positive\",\n  \"IconButton.colors.NEGATIVE\": \"negative\",\n  \"IconButton.colors.INVERTED\": \"inverted\",\n  \"IconButton.colors.ON_PRIMARY_COLOR\": \"on-primary-color\",\n  \"IconButton.colors.ON_INVERTED_BACKGROUND\": \"on-inverted-background\",\n  \"IconButton.colors.BRAND\": \"brand\",\n  \"IconButton.colors.FIXED_LIGHT\": \"fixed-light\",\n  \"IconButton.kinds.PRIMARY\": \"primary\",\n  \"IconButton.kinds.SECONDARY\": \"secondary\",\n  \"IconButton.kinds.TERTIARY\": \"tertiary\",\n  \"Text.types.TEXT1\": \"text1\",\n  \"Text.types.TEXT2\": \"text2\",\n  \"Text.types.TEXT3\": \"text3\",\n  \"Text.weights.BOLD\": \"bold\",\n  \"Text.weights.MEDIUM\": \"medium\",\n  \"Text.weights.NORMAL\": \"normal\",\n  \"Text.colors.PRIMARY\": \"primary\",\n  \"Text.colors.SECONDARY\": \"secondary\",\n  \"Text.colors.ON_PRIMARY\": \"onPrimary\",\n  \"Text.colors.ON_INVERTED\": \"onInverted\",\n  \"Text.colors.FIXED_LIGHT\": \"fixedLight\",\n  \"Text.colors.FIXED_DARK\": \"fixedDark\",\n  \"Text.colors.INHERIT\": \"inherit\",\n  \"Text.align.START\": \"start\",\n  \"Text.align.CENTER\": \"center\",\n  \"Text.align.END\": \"end\",\n  \"Counter.sizes.SMALL\": \"small\",\n  \"Counter.sizes.LARGE\": \"large\",\n  \"Counter.colors.PRIMARY\": \"primary\",\n  \"Counter.colors.DARK\": \"dark\",\n  \"Counter.colors.NEGATIVE\": \"negative\",\n  \"Counter.colors.LIGHT\": \"light\",\n  \"Counter.kinds.FILL\": \"fill\",\n  \"Counter.kinds.LINE\": \"line\",\n  \"Icon.type.SVG\": \"svg\",\n  \"Icon.type.ICON_FONT\": \"font\",\n  \"Icon.type.SRC\": \"src\",\n  \"ListItemAvatar.components.DIV\": \"div\",\n  \"ListItemAvatar.components.LI\": \"li\",\n  \"ListItemAvatar.components.A\": \"a\",\n  \"Modal.width.DEFAULT\": \"default\",\n  \"Modal.width.FULL_WIDTH\": \"full-width\",\n  \"Flex.justify.START\": \"start\",\n  \"Flex.justify.CENTER\": \"center\",\n  \"Flex.justify.END\": \"end\",\n  \"Flex.justify.STRETCH\": \"stretch\",\n  \"Flex.justify.SPACE_AROUND\": \"space-around\",\n  \"Flex.justify.SPACE_BETWEEN\": \"space-between\",\n  \"Flex.justify.INITIAL\": \"initial\",\n  \"Flex.align.START\": \"start\",\n  \"Flex.align.CENTER\": \"center\",\n  \"Flex.align.END\": \"end\",\n  \"Flex.align.STRETCH\": \"stretch\",\n  \"Flex.align.BASELINE\": \"baseline\",\n  \"Flex.align.INITIAL\": \"initial\",\n  \"Flex.gaps.XS\": \"xs\",\n  \"Flex.gaps.SMALL\": \"small\",\n  \"Flex.gaps.MEDIUM\": \"medium\",\n  \"Flex.gaps.LARGE\": \"large\",\n  \"Flex.directions.ROW\": \"row\",\n  \"Flex.directions.COLUMN\": \"column\"\n}\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/next-imports-migration.ts",
    "content": "import { CORE_IMPORT_PATH } from \"../../../src/consts\";\nimport { wrap, renameImportPath, getCoreNextImportsForFile } from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Changes imports from 'monday-ui-react-core/next' to 'monday-ui-react-core'\n */\nfunction transform({ root }: TransformationContext) {\n  const imports = getCoreNextImportsForFile(root);\n\n  imports.forEach(importPath => {\n    renameImportPath(importPath, CORE_IMPORT_PATH);\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/packages-rename-migration.ts",
    "content": "import { CORE_IMPORT_PATH, NEW_CORE_IMPORT_PATH, NEW_ICONS_IMPORT_PATH } from \"../../../src/consts\";\nimport { wrap, renameImportPath, getImports } from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Changes imports from 'monday-ui-react-core' to '@vibe/core'\n * 2. Changes imports from 'monday-ui-react-core/icons' to '@vibe/icons'\n * 3. Changes imports from 'monday-ui-react-core/interactionsTests' to '@vibe/core/interactionsTests'\n * 4. Changes imports from 'monday-ui-react-core/testIds' to '@vibe/core/testIds'\n * 5. Changes imports from 'monday-ui-react-core/tokens' to '@vibe/core/tokens'\n \n */\nfunction transform({ root }: TransformationContext) {\n  const coreImports = getImports(root, CORE_IMPORT_PATH);\n\n  coreImports.forEach(importPath => {\n    renameImportPath(importPath, NEW_CORE_IMPORT_PATH);\n  });\n\n  const iconImports = getImports(root, `${CORE_IMPORT_PATH}/icons`);\n\n  iconImports.forEach(importPath => {\n    renameImportPath(importPath, NEW_ICONS_IMPORT_PATH);\n  });\n\n  const interactionsImports = getImports(root, `${CORE_IMPORT_PATH}/interactionsTests`);\n\n  interactionsImports.forEach(importPath => {\n    renameImportPath(importPath, `${NEW_CORE_IMPORT_PATH}/interactionsTests`);\n  });\n\n  const testIdsImports = getImports(root, `${CORE_IMPORT_PATH}/testIds`);\n\n  testIdsImports.forEach(importPath => {\n    renameImportPath(importPath, `${NEW_CORE_IMPORT_PATH}/testIds`);\n  });\n\n  const tokensImports = getImports(root, `${CORE_IMPORT_PATH}/tokens`);\n\n  tokensImports.forEach(importPath => {\n    renameImportPath(importPath, `${NEW_CORE_IMPORT_PATH}/tokens`);\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/type-imports-migration.ts",
    "content": "import { CORE_IMPORT_PATH } from \"../../../src/consts\";\nimport { wrap, renameImportPath, getImports } from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Changes imports from 'monday-ui-react-core/types' to 'monday-ui-react-core'\n */\nfunction transform({ root }: TransformationContext) {\n  const imports = getImports(root, `${CORE_IMPORT_PATH}/types`);\n\n  imports.forEach(importPath => {\n    renameImportPath(importPath, CORE_IMPORT_PATH);\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v2-to-v3/useClickableProps-hook-migration.ts",
    "content": "import { getComponentNameOrAliasFromImports, getCoreImportsForFile, wrap } from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * 1. Update the 'dataTestId' prop to 'data-testid'\n */\nfunction transform({ j, root }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const hookName = getComponentNameOrAliasFromImports(j, imports, \"useClickableProps\");\n  if (!hookName) return;\n\n  root\n    .find(j.CallExpression, {\n      callee: {\n        type: \"Identifier\",\n        name: hookName\n      }\n    })\n    .find(j.ObjectExpression)\n    .find(j.ObjectProperty, {\n      key: {\n        type: \"Identifier\",\n        name: \"dataTestId\"\n      }\n    })\n    .forEach(propPath => {\n      propPath.node.key = j.literal(\"data-testid\");\n    });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v3-to-v4/Chips-component-migration.ts",
    "content": "import {\n  wrap,\n  getImports,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  removeProp\n} from \"../../../src/utils\";\nimport { NEW_CORE_IMPORT_PATH } from \"../../../src/consts\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * Chips migration for v3 to v4:\n * Remove the deprecated `disableClickableBehavior` prop\n */\nfunction transform({ j, root }: TransformationContext) {\n  const imports = getImports(root, NEW_CORE_IMPORT_PATH);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"Chips\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    removeProp(j, elementPath, \"disableClickableBehavior\");\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v3-to-v4/Dialog-component-migration.ts",
    "content": "import {\n  wrap,\n  getImports,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  removeProp\n} from \"../../../src/utils\";\nimport { NEW_CORE_IMPORT_PATH } from \"../../../src/consts\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * Dialog migration for v3 to v4:\n * Remove the deprecated `enableNestedDialogLayer` prop.\n * Dialog now always wraps content with LayerProvider.\n */\nfunction transform({ j, root }: TransformationContext) {\n  const imports = getImports(root, NEW_CORE_IMPORT_PATH);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"Dialog\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    removeProp(j, elementPath, \"enableNestedDialogLayer\");\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v3-to-v4/Flex-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  isPropExists,\n  findProps,\n  getPropValue,\n  removeProp\n} from \"../../../src/utils\";\nimport { NEW_CORE_IMPORT_PATH } from \"../../../src/consts\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * Flex component migration for v3 to v4:\n * 1. Remove `justify=\"stretch\"` — \"stretch\" is not a valid value for justify-content in flexbox\n *    and had no CSS implementation. The prop is removed entirely.\n * 2. Remove `justify={FlexJustify.STRETCH}` — same reason, enum value removed.\n */\nfunction transform({ j, root }: TransformationContext) {\n  const imports = getCoreImportsForFile(root, NEW_CORE_IMPORT_PATH);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"Flex\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    if (!isPropExists(j, elementPath, \"justify\")) return;\n    const prop = findProps(j, elementPath, \"justify\").get(0);\n    const justifyValue = getPropValue(j, prop.node);\n    if (justifyValue === \"stretch\" || justifyValue === \"FlexJustify.STRETCH\") {\n      removeProp(j, elementPath, \"justify\");\n    }\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v3-to-v4/Icon-component-migration.ts",
    "content": "import {\n  wrap,\n  getImports,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { NEW_CORE_IMPORT_PATH } from \"../../../src/consts\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * Icon component migration for v3 to v4:\n * 1. Rename iconLabel prop to label\n * 2. Rename iconType prop to type\n * 3. Rename iconSize prop to size\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getImports(root, NEW_CORE_IMPORT_PATH);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"Icon\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    migratePropsNames(j, elementPath, filePath, componentName, {\n      iconLabel: \"label\",\n      iconType: \"type\",\n      iconSize: \"size\"\n    });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v3-to-v4/LinearProgressBar-component-migration.ts",
    "content": "import { wrap, getImports } from \"../../../src/utils\";\nimport { NEW_CORE_IMPORT_PATH } from \"../../../src/consts\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * LinearProgressBar migration for v3 to v4:\n * 1. Rename LinearProgressBar import to ProgressBar\n * 2. Rename LinearProgressBarProps type import to ProgressBarProps\n * 3. Rename JSX usage from <LinearProgressBar> to <ProgressBar>\n */\nfunction transform({ j, root }: TransformationContext) {\n  const imports = getImports(root, NEW_CORE_IMPORT_PATH);\n\n  // Rename the component import specifier\n  imports.find(j.ImportSpecifier).forEach(specifier => {\n    const imported = specifier.node.imported;\n    if (imported.type === \"Identifier\") {\n      if (imported.name === \"LinearProgressBar\") {\n        // If no local alias, rename both imported and local\n        if (!specifier.node.local || specifier.node.local.name === \"LinearProgressBar\") {\n          imported.name = \"ProgressBar\";\n          specifier.node.local = j.identifier(\"ProgressBar\");\n        } else {\n          // Has an alias — only rename the imported name\n          imported.name = \"ProgressBar\";\n        }\n      }\n      if (imported.name === \"LinearProgressBarProps\") {\n        if (!specifier.node.local || specifier.node.local.name === \"LinearProgressBarProps\") {\n          imported.name = \"ProgressBarProps\";\n          specifier.node.local = j.identifier(\"ProgressBarProps\");\n        } else {\n          imported.name = \"ProgressBarProps\";\n        }\n      }\n    }\n  });\n\n  // Find all JSX elements named LinearProgressBar and rename them\n  root.find(j.JSXIdentifier, { name: \"LinearProgressBar\" }).forEach(path => {\n    path.node.name = \"ProgressBar\";\n  });\n\n  // Rename any remaining references (e.g. in type annotations)\n  root.find(j.Identifier, { name: \"LinearProgressBarProps\" }).forEach(path => {\n    // Don't rename import specifiers (already handled above)\n    if (path.parent.node.type !== \"ImportSpecifier\") {\n      path.node.name = \"ProgressBarProps\";\n    }\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v3-to-v4/README.md",
    "content": "# Vibe v3 to v4 Migration Transformations\n\nThis directory contains all transformation files for migrating from Vibe v3 to v4.\n\n## Structure\n\n```\nv3-to-v4/\n├── README.md                           # This file\n├── {Component}-component-migration.ts  # Component-specific migrations\n├── enums/                             # Enum-related migrations\n│   ├── Enums-migration.ts\n│   ├── enumMappings.json\n│   └── __tests__/\n└── __tests__/                         # Test files for migrations\n    └── {Component}-component-migration.test.ts\n```\n\n## Adding New Transformations\n\n### 1. Component Migration\n\nFor component-specific breaking changes, create a file named `{ComponentName}-component-migration.ts`:\n\n```typescript\nimport {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * Migration description:\n * 1. Change description\n * 2. Another change\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"ComponentName\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    // Apply transformations here\n    migratePropsNames(j, elementPath, filePath, componentName, {\n      oldPropName: \"newPropName\"\n    });\n  });\n}\n\nexport default wrap(transform);\n```\n\n### 2. Add Tests\n\nCreate a corresponding test file in `__tests__/{ComponentName}-component-migration.test.ts`:\n\n```typescript\nimport { defineInlineTest } from \"jscodeshift/dist/testUtils\";\nimport transform from \"../{ComponentName}-component-migration\";\n\ndescribe(\"{ComponentName} Migration\", () => {\n  defineInlineTest(\n    { default: transform, parser: \"tsx\" },\n    {},\n    `\nimport { ComponentName } from \"@vibe/core\";\n<ComponentName oldPropName=\"value\" />\n    `,\n    `\nimport { ComponentName } from \"@vibe/core\";\n<ComponentName newPropName=\"value\" />\n    `,\n    \"should migrate oldPropName to newPropName\"\n  );\n});\n```\n\n### 3. Update CLI Support\n\nThe CLI will automatically pick up new transformation files. No additional registration needed.\n\n## Migration Types\n\n### Component Props\n\n- Renaming props\n- Changing prop types\n- Removing deprecated props\n- Adding required props with defaults\n\n### Component Names\n\n- Renaming components\n- Moving components between packages\n\n### Imports\n\n- Changing import paths\n- Updating package names\n\n### Enums\n\n- Converting enums to string literals\n- Renaming enum values\n\n## Testing\n\nRun tests for all v3-to-v4 transformations:\n\n```bash\nyarn workspace @vibe/codemod test v3-to-v4\n```\n\nRun a specific transformation test:\n\n```bash\nyarn workspace @vibe/codemod test ComponentName-component-migration\n```\n\n## Running Transformations\n\nOnce implemented, users can run the v4 migration:\n\n```bash\nnpx @vibe/codemod --migration v4\n```\n\n## Notes\n\n- All transformations should be idempotent (safe to run multiple times)\n- Consider edge cases and provide helpful error messages\n- Document the reasoning for each breaking change\n- Update the main VIBE4_CHANGELOG.md when adding new transformations\n"
  },
  {
    "path": "packages/codemod/transformations/core/v3-to-v4/TextField-component-migration.ts",
    "content": "import {\n  wrap,\n  getImports,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  isPropExists,\n  findProps,\n  removeProp,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { NEW_CORE_IMPORT_PATH } from \"../../../src/consts\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * TextField migration for v3 to v4:\n * - Replace object prop `iconsNames={{ primary, secondary }}` with flat props `iconLabel` and `secondaryIconLabel`\n * - Rename `iconName` prop to `icon`\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getImports(root, NEW_CORE_IMPORT_PATH);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"TextField\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    // Rename `iconName` prop to `icon`\n    migratePropsNames(j, elementPath, filePath, componentName, { iconName: \"icon\" });\n\n    if (!isPropExists(j, elementPath, \"iconsNames\")) return;\n\n    const iconsNamesProp = findProps(j, elementPath, \"iconsNames\");\n    if (!iconsNamesProp.length) return;\n\n    const propNode = iconsNamesProp.at(0).get().node;\n    const value = propNode.value;\n\n    // Handle object expression: iconsNames={{ primary: \"X\", secondary: \"Y\" }}\n    if (value?.type === \"JSXExpressionContainer\" && value.expression.type === \"ObjectExpression\") {\n      const properties = value.expression.properties;\n\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      properties.forEach((prop: any) => {\n        if (prop.type !== \"ObjectProperty\" && prop.type !== \"Property\") return;\n\n        const key = prop.key;\n        const keyName = key.type === \"Identifier\" ? key.name : key.type === \"StringLiteral\" ? key.value : null;\n\n        if (!keyName) return;\n\n        let newPropName: string | null = null;\n        if (keyName === \"primary\") {\n          newPropName = \"iconLabel\";\n        } else if (keyName === \"secondary\") {\n          newPropName = \"secondaryIconLabel\";\n        }\n\n        if (!newPropName) return;\n\n        // Skip if the new prop already exists\n        if (isPropExists(j, elementPath, newPropName)) return;\n\n        const propValue = prop.value;\n\n        let newAttr;\n        if (propValue.type === \"StringLiteral\") {\n          // Static string: primary: \"Search\" -> iconLabel=\"Search\"\n          newAttr = j.jsxAttribute(j.jsxIdentifier(newPropName), j.literal(propValue.value));\n        } else {\n          // Dynamic expression: primary: dynamicLabel -> iconLabel={dynamicLabel}\n          newAttr = j.jsxAttribute(j.jsxIdentifier(newPropName), j.jsxExpressionContainer(propValue));\n        }\n\n        elementPath.node.openingElement.attributes?.push(newAttr);\n      });\n\n      // Remove the old iconsNames prop\n      removeProp(j, elementPath, \"iconsNames\");\n    }\n    // For non-object expressions (e.g. iconsNames={someVariable}), we can't safely transform\n    // Leave as-is and let the developer handle manually\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v3-to-v4/TextWithHighlight-component-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  removeProp,\n  isPropExists,\n  findProps,\n  getPropValue\n} from \"../../../src/utils\";\nimport { NEW_CORE_IMPORT_PATH } from \"../../../src/consts\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * TextWithHighlight migration for v3 to v4:\n * 1. Migrate tooltipPosition prop to tooltipProps={{ position: \"...\" }}\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root, NEW_CORE_IMPORT_PATH);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"TextWithHighlight\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    if (isPropExists(j, elementPath, \"tooltipPosition\")) {\n      // Get the tooltipPosition value\n      const tooltipPositionProps = findProps(j, elementPath, \"tooltipPosition\");\n      if (!tooltipPositionProps.length) return;\n\n      const tooltipPositionValue = getPropValue(j, tooltipPositionProps.get().node);\n\n      // Check if tooltipProps already exists\n      const hasTooltipProps = isPropExists(j, elementPath, \"tooltipProps\");\n\n      // Handle different value types: string literals, expressions, etc.\n      const tooltipPositionAttr = tooltipPositionProps.get().node;\n\n      let positionValue;\n      if (tooltipPositionAttr.value?.type === \"JSXExpressionContainer\") {\n        // Use the expression directly (e.g., {pos} becomes pos)\n        positionValue = tooltipPositionAttr.value.expression;\n      } else {\n        // Use literal value (e.g., \"top\" stays \"top\")\n        positionValue = j.literal(String(tooltipPositionValue));\n      }\n\n      if (hasTooltipProps) {\n        // Merge position into existing tooltipProps\n        const existingTooltipProps = findProps(j, elementPath, \"tooltipProps\");\n        const existingTooltipPropsAttr = existingTooltipProps.get().node;\n\n        if (\n          existingTooltipPropsAttr.value?.type === \"JSXExpressionContainer\" &&\n          existingTooltipPropsAttr.value.expression?.type === \"ObjectExpression\"\n        ) {\n          // Add position property to existing object\n          const existingObject = existingTooltipPropsAttr.value.expression;\n          const positionProperty = j.property(\"init\", j.identifier(\"position\"), positionValue);\n          existingObject.properties.push(positionProperty);\n        } else {\n          console.warn(\n            `[MANUAL] ${filePath}: ${componentName} has both tooltipPosition and tooltipProps with complex structure. ` +\n              `Please manually merge tooltipPosition=\"${tooltipPositionValue}\" into existing tooltipProps.`\n          );\n        }\n      } else {\n        // Create new tooltipProps={{ position: value }}\n        const tooltipPropsValue = j.jsxExpressionContainer(\n          j.objectExpression([j.property(\"init\", j.identifier(\"position\"), positionValue)])\n        );\n\n        const tooltipPropAttr = j.jsxAttribute(j.jsxIdentifier(\"tooltipProps\"), tooltipPropsValue);\n        elementPath.node.openingElement.attributes?.push(tooltipPropAttr);\n      }\n\n      // Remove the old tooltipPosition prop\n      removeProp(j, elementPath, \"tooltipPosition\");\n    }\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v3-to-v4/TipseenImage-component-migration.ts",
    "content": "import {\n  wrap,\n  getImports,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  findProps,\n  removeSpecifierFromImport,\n  findImportsThatIncludesSpecifier\n} from \"../../../src/utils\";\nimport { NEW_CORE_IMPORT_PATH } from \"../../../src/consts\";\nimport { TransformationContext } from \"../../../types\";\nimport { JSXAttribute } from \"jscodeshift\";\n\n/**\n * TipseenImage migration for v3 to v4:\n * 1. Replace <TipseenImage src={..} alt={..} className={..} tipseenMediaClassName={..} />\n *    with <TipseenMedia className={..}><img src={..} alt={..} className={..} style={{ objectFit: \"cover\", width: \"100%\" }} /></TipseenMedia>\n * 2. Update imports: remove TipseenImage, add TipseenMedia if not already imported\n */\nfunction transform({ j, root }: TransformationContext) {\n  const imports = getImports(root, NEW_CORE_IMPORT_PATH);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"TipseenImage\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    // Extract prop values from TipseenImage\n    const srcProps = findProps(j, elementPath, \"src\");\n    const altProps = findProps(j, elementPath, \"alt\");\n    const classNameProps = findProps(j, elementPath, \"className\");\n    const tipseenMediaClassNameProps = findProps(j, elementPath, \"tipseenMediaClassName\");\n\n    // Build img attributes\n    const imgAttrs: JSXAttribute[] = [];\n\n    if (srcProps.length) {\n      const srcAttr = srcProps.get().node;\n      imgAttrs.push(j.jsxAttribute(j.jsxIdentifier(\"src\"), srcAttr.value));\n    }\n\n    if (altProps.length) {\n      const altAttr = altProps.get().node;\n      imgAttrs.push(j.jsxAttribute(j.jsxIdentifier(\"alt\"), altAttr.value));\n    }\n\n    if (classNameProps.length) {\n      const classNameAttr = classNameProps.get().node;\n      imgAttrs.push(j.jsxAttribute(j.jsxIdentifier(\"className\"), classNameAttr.value));\n    }\n\n    // Add style={{ objectFit: \"cover\", width: \"100%\" }}\n    imgAttrs.push(\n      j.jsxAttribute(\n        j.jsxIdentifier(\"style\"),\n        j.jsxExpressionContainer(\n          j.objectExpression([\n            j.property(\"init\", j.identifier(\"objectFit\"), j.literal(\"cover\")),\n            j.property(\"init\", j.identifier(\"width\"), j.literal(\"100%\"))\n          ])\n        )\n      )\n    );\n\n    // Create <img ... /> element\n    const imgElement = j.jsxElement(j.jsxOpeningElement(j.jsxIdentifier(\"img\"), imgAttrs, true), null, []);\n\n    // Build TipseenMedia attributes\n    const mediaAttrs: JSXAttribute[] = [];\n\n    if (tipseenMediaClassNameProps.length) {\n      const mediaClassNameAttr = tipseenMediaClassNameProps.get().node;\n      mediaAttrs.push(j.jsxAttribute(j.jsxIdentifier(\"className\"), mediaClassNameAttr.value));\n    }\n\n    // Determine the TipseenMedia component name to use\n    const tipseenMediaName = getComponentNameOrAliasFromImports(j, imports, \"TipseenMedia\") || \"TipseenMedia\";\n\n    // Create <TipseenMedia>{img}</TipseenMedia>\n    const mediaElement = j.jsxElement(\n      j.jsxOpeningElement(j.jsxIdentifier(tipseenMediaName), mediaAttrs, false),\n      j.jsxClosingElement(j.jsxIdentifier(tipseenMediaName)),\n      [j.jsxText(\"\\n  \"), imgElement, j.jsxText(\"\\n\")]\n    );\n\n    // Replace TipseenImage with TipseenMedia wrapping img\n    j(elementPath).replaceWith(mediaElement);\n  });\n\n  // Update imports: remove TipseenImage, add TipseenMedia if not present\n  const tipseenImageImports = findImportsThatIncludesSpecifier(j, imports, \"TipseenImage\");\n  if (tipseenImageImports.length) {\n    const hasTipseenMedia = getComponentNameOrAliasFromImports(j, imports, \"TipseenMedia\") !== null;\n\n    tipseenImageImports.forEach(importPath => {\n      if (!hasTipseenMedia) {\n        // Add TipseenMedia specifier before removing TipseenImage\n        const newSpecifier = j.importSpecifier(j.identifier(\"TipseenMedia\"), j.identifier(\"TipseenMedia\"));\n        importPath.node.specifiers?.push(newSpecifier);\n      }\n\n      removeSpecifierFromImport(j, importPath, \"TipseenImage\");\n    });\n  }\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v3-to-v4/Toggle-component-migration.ts",
    "content": "import {\n  wrap,\n  getImports,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  removeProp\n} from \"../../../src/utils\";\nimport { NEW_CORE_IMPORT_PATH } from \"../../../src/consts\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * Toggle migration for v3 to v4:\n * Remove the deprecated `noSpacing` prop — the toggle now automatically\n * removes its margin when `areLabelsHidden` is true.\n */\nfunction transform({ j, root }: TransformationContext) {\n  const imports = getImports(root, NEW_CORE_IMPORT_PATH);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"Toggle\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    removeProp(j, elementPath, \"noSpacing\");\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v3-to-v4/VirtualizedList-component-migration.ts",
    "content": "import {\n  wrap,\n  getImports,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { NEW_CORE_IMPORT_PATH } from \"../../../src/consts\";\nimport { TransformationContext } from \"../../../types\";\n\n/**\n * VirtualizedList component migration for v3 to v4:\n * 1. Rename getItemHeight prop to getItemSize\n * 2. Rename onVerticalScrollbarVisiblityChange prop to onLayoutDirectionScrollbarVisibilityChange\n */\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getImports(root, NEW_CORE_IMPORT_PATH);\n  const componentName = getComponentNameOrAliasFromImports(j, imports, \"VirtualizedList\");\n  if (!componentName) return;\n\n  const elements = findComponentElements(root, componentName);\n  if (!elements.length) return;\n\n  elements.forEach(elementPath => {\n    migratePropsNames(j, elementPath, filePath, componentName, {\n      getItemHeight: \"getItemSize\",\n      onVerticalScrollbarVisiblityChange: \"onLayoutDirectionScrollbarVisibilityChange\"\n    });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v3-to-v4/__tests__/Chips-component-migration.test.ts",
    "content": "import transform from \"../Chips-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `import { Chips } from \"@vibe/core\";\\n${source}`;\n}\n\ndescribe(\"Chips component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport('const element = <Chips label=\"Tag\" disableClickableBehavior />;'),\n    prependImport('const element = <Chips label=\"Tag\" />;'),\n    \"should remove disableClickableBehavior boolean prop\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport('const element = <Chips label=\"Tag\" disableClickableBehavior={true} />;'),\n    prependImport('const element = <Chips label=\"Tag\" />;'),\n    \"should remove disableClickableBehavior with explicit true value\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport('const element = <Chips label=\"Tag\" disableClickableBehavior={false} onClick={fn} />;'),\n    prependImport('const element = <Chips label=\"Tag\" onClick={fn} />;'),\n    \"should remove disableClickableBehavior with false value\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport('const element = <Chips label=\"Tag\" onClick={fn} />;'),\n    prependImport('const element = <Chips label=\"Tag\" onClick={fn} />;'),\n    \"should not modify Chips without disableClickableBehavior prop\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v3-to-v4/__tests__/Dialog-component-migration.test.ts",
    "content": "import transform from \"../Dialog-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `import { Dialog } from \"@vibe/core\";\\n${source}`;\n}\n\ndescribe(\"Dialog component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\"const element = <Dialog enableNestedDialogLayer content={<div />}><button>Ref</button></Dialog>;\"),\n    prependImport(\"const element = <Dialog content={<div />}><button>Ref</button></Dialog>;\"),\n    \"should remove enableNestedDialogLayer boolean prop\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      \"const element = <Dialog enableNestedDialogLayer={true} content={<div />}><button>Ref</button></Dialog>;\"\n    ),\n    prependImport(\"const element = <Dialog content={<div />}><button>Ref</button></Dialog>;\"),\n    \"should remove enableNestedDialogLayer with explicit true value\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      \"const element = <Dialog enableNestedDialogLayer={false} content={<div />}><button>Ref</button></Dialog>;\"\n    ),\n    prependImport(\"const element = <Dialog content={<div />}><button>Ref</button></Dialog>;\"),\n    \"should remove enableNestedDialogLayer with false value\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\"const element = <Dialog content={<div />}><button>Ref</button></Dialog>;\"),\n    prependImport(\"const element = <Dialog content={<div />}><button>Ref</button></Dialog>;\"),\n    \"should not modify Dialog without enableNestedDialogLayer prop\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v3-to-v4/__tests__/Flex-component-migration.test.ts",
    "content": "import transform from \"../Flex-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\ndescribe(\"Flex component migration\", () => {\n  defineInlineTest(\n    { default: transform, parser: \"tsx\" },\n    {},\n    `\nimport { Flex } from \"@vibe/core\";\n<Flex justify=\"stretch\" />\n    `,\n    `\nimport { Flex } from \"@vibe/core\";\n<Flex />\n    `,\n    \"should remove justify prop when value is stretch\"\n  );\n\n  defineInlineTest(\n    { default: transform, parser: \"tsx\" },\n    {},\n    `\nimport { Flex, FlexJustify } from \"@vibe/core\";\n<Flex justify={FlexJustify.STRETCH} />\n    `,\n    `\nimport { Flex, FlexJustify } from \"@vibe/core\";\n<Flex />\n    `,\n    \"should remove justify prop when value is FlexJustify.STRETCH\"\n  );\n\n  defineInlineTest(\n    { default: transform, parser: \"tsx\" },\n    {},\n    `\nimport { Flex } from \"@vibe/core\";\n<Flex justify=\"start\" />\n    `,\n    `\nimport { Flex } from \"@vibe/core\";\n<Flex justify=\"start\" />\n    `,\n    \"should not change justify prop for valid values\"\n  );\n\n  defineInlineTest(\n    { default: transform, parser: \"tsx\" },\n    {},\n    `\nimport { Flex } from \"@vibe/core\";\n<Flex justify=\"stretch\" gap=\"medium\" />\n    `,\n    `\nimport { Flex } from \"@vibe/core\";\n<Flex gap=\"medium\" />\n    `,\n    \"should remove only the justify prop when value is stretch, leaving other props intact\"\n  );\n\n  defineInlineTest(\n    { default: transform, parser: \"tsx\" },\n    {},\n    `\nimport { Flex } from \"another-library\";\n<Flex justify=\"stretch\" />\n    `,\n    `\nimport { Flex } from \"another-library\";\n<Flex justify=\"stretch\" />\n    `,\n    \"should not change Flex not imported from @vibe/core\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v3-to-v4/__tests__/Icon-component-migration.test.ts",
    "content": "import transform from \"../Icon-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `import { Icon } from \"@vibe/core\";\\n${source}`;\n}\n\ndescribe(\"Icon component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport('const element = <Icon icon={Home} iconLabel=\"Home\" iconType=\"svg\" iconSize={24} />;'),\n    prependImport('const element = <Icon icon={Home} label=\"Home\" type=\"svg\" size={24} />;'),\n    \"should rename iconLabel, iconType, and iconSize props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport('const element = <Icon icon={Search} iconLabel=\"Search\" />;'),\n    prependImport('const element = <Icon icon={Search} label=\"Search\" />;'),\n    \"should rename only iconLabel prop when other props are not present\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport('const element = <Icon icon={Close} iconType=\"font\" iconSize=\"16px\" />;'),\n    prependImport('const element = <Icon icon={Close} type=\"font\" size=\"16px\" />;'),\n    \"should rename iconType and iconSize props when iconLabel is not present\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\"const element = <Icon icon={MyIcon} />;\"),\n    prependImport(\"const element = <Icon icon={MyIcon} />;\"),\n    \"should not change Icon without deprecated props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`\n      const element = (\n        <Icon\n          icon={StarFilled}\n          iconLabel={dynamicLabel}\n          iconType=\"svg\"\n          iconSize={size === \"small\" ? 16 : 24}\n          className=\"my-icon\"\n        />\n      );\n    `),\n    prependImport(`\n      const element = (\n        <Icon\n          icon={StarFilled}\n          label={dynamicLabel}\n          type=\"svg\"\n          size={size === \"small\" ? 16 : 24}\n          className=\"my-icon\"\n        />\n      );\n    `),\n    \"should handle complex prop expressions\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`\n      function MyComponent() {\n        return (\n          <div>\n            <Icon icon={Home} iconLabel=\"Home\" />\n            <Icon icon={Settings} iconType=\"font\" iconSize={20} />\n          </div>\n        );\n      }\n    `),\n    prependImport(`\n      function MyComponent() {\n        return (\n          (<div>\n            <Icon icon={Home} label=\"Home\" />\n            <Icon icon={Settings} type=\"font\" size={20} />\n          </div>)\n        );\n      }\n    `),\n    \"should handle multiple Icon components\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { Icon as VibeIcon } from \"@vibe/core\";\n     const element = <VibeIcon icon={Home} iconLabel=\"Home\" iconType=\"svg\" />;`,\n    `import { Icon as VibeIcon } from \"@vibe/core\";\n     const element = <VibeIcon icon={Home} label=\"Home\" type=\"svg\" />;`,\n    \"should work with aliased imports\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    'const element = <Icon icon={Home} iconLabel=\"Home\" />;',\n    'const element = <Icon icon={Home} iconLabel=\"Home\" />;',\n    \"should not transform Icon without import from @vibe/core\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v3-to-v4/__tests__/LinearProgressBar-component-migration.test.ts",
    "content": "import transform from \"../LinearProgressBar-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string, importName = \"LinearProgressBar\"): string {\n  return `import { ${importName} } from \"@vibe/core\";\\n${source}`;\n}\n\ndescribe(\"LinearProgressBar component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`const element = <LinearProgressBar value={50} />;`),\n    `import { ProgressBar } from \"@vibe/core\";\\nconst element = <ProgressBar value={50} />;`,\n    \"should rename LinearProgressBar to ProgressBar in import and JSX\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`const element = <LinearProgressBar value={50} max={100} />;`),\n    `import { ProgressBar } from \"@vibe/core\";\\nconst element = <ProgressBar value={50} max={100} />;`,\n    \"should rename LinearProgressBar with multiple props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { LinearProgressBar, LinearProgressBarProps } from \"@vibe/core\";\nconst props: LinearProgressBarProps = { value: 50 };\nconst element = <LinearProgressBar value={50} />;`,\n    `import { ProgressBar, ProgressBarProps } from \"@vibe/core\";\nconst props: ProgressBarProps = { value: 50 };\nconst element = <ProgressBar value={50} />;`,\n    \"should rename both LinearProgressBar and LinearProgressBarProps\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { Button } from \"@vibe/core\";\\nconst element = <Button />;`,\n    `import { Button } from \"@vibe/core\";\\nconst element = <Button />;`,\n    \"should not modify other components\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { Button } from \"another-library\";\\nconst element = <Button />;`,\n    `import { Button } from \"another-library\";\\nconst element = <Button />;`,\n    \"should not modify components from another library\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v3-to-v4/__tests__/TextField-component-migration.test.ts",
    "content": "import transform from \"../TextField-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `import { TextField } from \"@vibe/core\";\\n${source}`;\n}\n\ndescribe(\"TextField iconName migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport('const element = <TextField iconName={Search} placeholder=\"Search\" />;'),\n    prependImport('const element = <TextField icon={Search} placeholder=\"Search\" />;'),\n    \"should rename iconName to icon\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport('const element = <TextField placeholder=\"Search\" />;'),\n    prependImport('const element = <TextField placeholder=\"Search\" />;'),\n    \"should not modify TextField without iconName prop\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { TextField as MyField } from \"@vibe/core\";\nconst element = <MyField iconName={Search} />;`,\n    `import { TextField as MyField } from \"@vibe/core\";\nconst element = <MyField icon={Search} />;`,\n    \"should work with aliased imports\"\n  );\n});\n\ndescribe(\"TextField component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport('const element = <TextField iconsNames={{ primary: \"Search\", secondary: \"Clear\" }} />;'),\n    prependImport('const element = <TextField iconLabel=\"Search\" secondaryIconLabel=\"Clear\" />;'),\n    \"should replace iconsNames with both iconLabel and secondaryIconLabel\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport('const element = <TextField iconsNames={{ primary: \"Search\" }} />;'),\n    prependImport('const element = <TextField iconLabel=\"Search\" />;'),\n    \"should replace iconsNames with only iconLabel when secondary is not present\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport('const element = <TextField iconsNames={{ secondary: \"Clear\" }} />;'),\n    prependImport('const element = <TextField secondaryIconLabel=\"Clear\" />;'),\n    \"should replace iconsNames with only secondaryIconLabel when primary is not present\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\"const element = <TextField iconsNames={{ primary: dynamicLabel, secondary: tooltipText }} />;\"),\n    prependImport(\"const element = <TextField iconLabel={dynamicLabel} secondaryIconLabel={tooltipText} />;\"),\n    \"should handle dynamic expression values\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { TextField as MyTextField } from \"@vibe/core\";\nconst element = <MyTextField iconsNames={{ primary: \"Search\" }} />;`,\n    `import { TextField as MyTextField } from \"@vibe/core\";\nconst element = <MyTextField iconLabel=\"Search\" />;`,\n    \"should work with aliased imports\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport('const element = <TextField placeholder=\"Search...\" />;'),\n    prependImport('const element = <TextField placeholder=\"Search...\" />;'),\n    \"should not modify TextField without iconsNames prop\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v3-to-v4/__tests__/TextWithHighlight-component-migration.test.ts",
    "content": "import { defineInlineTest } from \"jscodeshift/dist/testUtils\";\nimport transform from \"../TextWithHighlight-component-migration\";\n\ndescribe(\"TextWithHighlight component migration\", () => {\n  defineInlineTest(\n    { default: transform, parser: \"tsx\" },\n    {},\n    `\nimport { TextWithHighlight } from \"@vibe/core\";\n<TextWithHighlight tooltipPosition=\"top\" text=\"hello\" highlightTerm=\"he\" />\n    `,\n    `\nimport { TextWithHighlight } from \"@vibe/core\";\n<TextWithHighlight text=\"hello\" highlightTerm=\"he\" tooltipProps={{\n  position: \"top\"\n}} />\n    `,\n    \"should migrate tooltipPosition to tooltipProps\"\n  );\n\n  defineInlineTest(\n    { default: transform, parser: \"tsx\" },\n    {},\n    `\nimport { TextWithHighlight } from \"@vibe/core\";\n<TextWithHighlight text=\"hello\" highlightTerm=\"he\" tooltipProps={{ position: \"top\" }} />\n    `,\n    `\nimport { TextWithHighlight } from \"@vibe/core\";\n<TextWithHighlight text=\"hello\" highlightTerm=\"he\" tooltipProps={{ position: \"top\" }} />\n    `,\n    \"should not change TextWithHighlight without tooltipPosition prop\"\n  );\n\n  defineInlineTest(\n    { default: transform, parser: \"tsx\" },\n    {},\n    `\nimport { TextWithHighlight as TWH } from \"@vibe/core\";\n<TWH tooltipPosition=\"bottom\" text=\"hello\" highlightTerm=\"he\" />\n    `,\n    `\nimport { TextWithHighlight as TWH } from \"@vibe/core\";\n<TWH text=\"hello\" highlightTerm=\"he\" tooltipProps={{\n  position: \"bottom\"\n}} />\n    `,\n    \"should handle aliased imports\"\n  );\n\n  defineInlineTest(\n    { default: transform, parser: \"tsx\" },\n    {},\n    `\nimport { Button } from \"@vibe/core\";\n<Button tooltipPosition=\"top\">Click</Button>\n    `,\n    `\nimport { Button } from \"@vibe/core\";\n<Button tooltipPosition=\"top\">Click</Button>\n    `,\n    \"should not affect non-TextWithHighlight components\"\n  );\n\n  defineInlineTest(\n    { default: transform, parser: \"tsx\" },\n    {},\n    `\nimport { TextWithHighlight } from \"@vibe/core\";\n<TextWithHighlight tooltipPosition=\"left\" text=\"hello\" />\n    `,\n    `\nimport { TextWithHighlight } from \"@vibe/core\";\n<TextWithHighlight text=\"hello\" tooltipProps={{\n  position: \"left\"\n}} />\n    `,\n    \"should handle different position values\"\n  );\n\n  defineInlineTest(\n    { default: transform, parser: \"tsx\" },\n    {},\n    `\nimport { TextWithHighlight } from \"@vibe/core\";\nconst pos = \"right\";\n<TextWithHighlight tooltipPosition={pos} text=\"hello\" />\n    `,\n    `\nimport { TextWithHighlight } from \"@vibe/core\";\nconst pos = \"right\";\n<TextWithHighlight text=\"hello\" tooltipProps={{\n  position: pos\n}} />\n    `,\n    \"should handle expression values\"\n  );\n\n  defineInlineTest(\n    { default: transform, parser: \"tsx\" },\n    {},\n    `\nimport { TextWithHighlight } from \"@vibe/core\";\n<TextWithHighlight tooltipPosition=\"top\" tooltipProps={{content: \"test\"}} text=\"hello\" />\n    `,\n    `\nimport { TextWithHighlight } from \"@vibe/core\";\n<TextWithHighlight\n  tooltipProps={{\n    content: \"test\",\n    position: \"top\"\n  }}\n  text=\"hello\" />\n    `,\n    \"should merge tooltipPosition into existing tooltipProps\"\n  );\n\n  defineInlineTest(\n    { default: transform, parser: \"tsx\" },\n    {},\n    `\nimport { TextWithHighlight } from \"@vibe/core\";\n<TextWithHighlight tooltipPosition=\"bottom\" tooltipProps={{content: \"test\", showDelay: 100}} text=\"hello\" />\n    `,\n    `\nimport { TextWithHighlight } from \"@vibe/core\";\n<TextWithHighlight\n  tooltipProps={{\n    content: \"test\",\n    showDelay: 100,\n    position: \"bottom\"\n  }}\n  text=\"hello\" />\n    `,\n    \"should merge tooltipPosition into existing tooltipProps with multiple properties\"\n  );\n\n  defineInlineTest(\n    { default: transform, parser: \"tsx\" },\n    {},\n    `\nimport { TextWithHighlight } from \"@vibe/core\";\nconst pos = \"left\";\n<TextWithHighlight tooltipPosition={pos} tooltipProps={{content: \"dynamic\"}} text=\"hello\" />\n    `,\n    `\nimport { TextWithHighlight } from \"@vibe/core\";\nconst pos = \"left\";\n<TextWithHighlight\n  tooltipProps={{\n    content: \"dynamic\",\n    position: pos\n  }}\n  text=\"hello\" />\n    `,\n    \"should merge expression tooltipPosition into existing tooltipProps\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v3-to-v4/__tests__/TipseenImage-component-migration.test.ts",
    "content": "import { defineInlineTest } from \"jscodeshift/dist/testUtils\";\nimport transform from \"../TipseenImage-component-migration\";\n\ndescribe(\"TipseenImage component migration\", () => {\n  defineInlineTest(\n    { default: transform, parser: \"tsx\" },\n    {},\n    `\nimport { TipseenImage } from \"@vibe/core\";\n<TipseenImage src=\"image.png\" alt=\"description\" />\n    `,\n    `\nimport { TipseenMedia } from \"@vibe/core\";\n<TipseenMedia>\n  <img\n    src=\"image.png\"\n    alt=\"description\"\n    style={{\n      objectFit: \"cover\",\n      width: \"100%\"\n    }} />\n</TipseenMedia>\n    `,\n    \"should migrate basic TipseenImage to TipseenMedia with img\"\n  );\n\n  defineInlineTest(\n    { default: transform, parser: \"tsx\" },\n    {},\n    `\nimport { TipseenImage } from \"@vibe/core\";\n<TipseenImage src={picture} alt=\"description\" className=\"custom\" tipseenMediaClassName=\"mediaClass\" />\n    `,\n    `\nimport { TipseenMedia } from \"@vibe/core\";\n<TipseenMedia className=\"mediaClass\">\n  <img\n    src={picture}\n    alt=\"description\"\n    className=\"custom\"\n    style={{\n      objectFit: \"cover\",\n      width: \"100%\"\n    }} />\n</TipseenMedia>\n    `,\n    \"should handle all props including tipseenMediaClassName\"\n  );\n\n  defineInlineTest(\n    { default: transform, parser: \"tsx\" },\n    {},\n    `\nimport { TipseenImage, TipseenMedia } from \"@vibe/core\";\n<TipseenImage src=\"image.png\" />\n    `,\n    `\nimport { TipseenMedia } from \"@vibe/core\";\n<TipseenMedia>\n  <img\n    src=\"image.png\"\n    style={{\n      objectFit: \"cover\",\n      width: \"100%\"\n    }} />\n</TipseenMedia>\n    `,\n    \"should not duplicate TipseenMedia import when already imported\"\n  );\n\n  defineInlineTest(\n    { default: transform, parser: \"tsx\" },\n    {},\n    `\nimport { TipseenImage as MyImage } from \"@vibe/core\";\n<MyImage src=\"image.png\" alt=\"test\" />\n    `,\n    `\nimport { TipseenMedia } from \"@vibe/core\";\n<TipseenMedia>\n  <img\n    src=\"image.png\"\n    alt=\"test\"\n    style={{\n      objectFit: \"cover\",\n      width: \"100%\"\n    }} />\n</TipseenMedia>\n    `,\n    \"should handle aliased imports\"\n  );\n\n  defineInlineTest(\n    { default: transform, parser: \"tsx\" },\n    {},\n    `\nimport { Button } from \"@vibe/core\";\n<Button>Click</Button>\n    `,\n    `\nimport { Button } from \"@vibe/core\";\n<Button>Click</Button>\n    `,\n    \"should not affect files without TipseenImage\"\n  );\n\n  defineInlineTest(\n    { default: transform, parser: \"tsx\" },\n    {},\n    `\nimport { TipseenImage } from \"@vibe/core\";\n<TipseenImage src={picture} />\n    `,\n    `\nimport { TipseenMedia } from \"@vibe/core\";\n<TipseenMedia>\n  <img\n    src={picture}\n    style={{\n      objectFit: \"cover\",\n      width: \"100%\"\n    }} />\n</TipseenMedia>\n    `,\n    \"should handle expression values for src\"\n  );\n\n  defineInlineTest(\n    { default: transform, parser: \"tsx\" },\n    {},\n    `\nimport { Tipseen, TipseenImage, TipseenContent } from \"@vibe/core\";\n<Tipseen content={<><TipseenImage src={picture} /><TipseenContent title=\"Title\">Text</TipseenContent></>}>\n  <div />\n</Tipseen>\n    `,\n    `\nimport { Tipseen, TipseenContent, TipseenMedia } from \"@vibe/core\";\n<Tipseen content={<><TipseenMedia>\n  <img\n    src={picture}\n    style={{\n      objectFit: \"cover\",\n      width: \"100%\"\n    }} />\n</TipseenMedia><TipseenContent title=\"Title\">Text</TipseenContent></>}>\n  <div />\n</Tipseen>\n    `,\n    \"should work within Tipseen content prop and update imports\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v3-to-v4/__tests__/Toggle-component-migration.test.ts",
    "content": "import transform from \"../Toggle-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `import { Toggle } from \"@vibe/core\";\\n${source}`;\n}\n\ndescribe(\"Toggle component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport('const element = <Toggle ariaLabel=\"My Toggle\" noSpacing />;'),\n    prependImport('const element = <Toggle ariaLabel=\"My Toggle\" />;'),\n    \"should remove noSpacing boolean prop\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport('const element = <Toggle ariaLabel=\"My Toggle\" noSpacing={true} />;'),\n    prependImport('const element = <Toggle ariaLabel=\"My Toggle\" />;'),\n    \"should remove noSpacing with explicit true value\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport('const element = <Toggle ariaLabel=\"My Toggle\" noSpacing={false} areLabelsHidden />;'),\n    prependImport('const element = <Toggle ariaLabel=\"My Toggle\" areLabelsHidden />;'),\n    \"should remove noSpacing with false value\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport('const element = <Toggle ariaLabel=\"My Toggle\" areLabelsHidden />;'),\n    prependImport('const element = <Toggle ariaLabel=\"My Toggle\" areLabelsHidden />;'),\n    \"should not modify Toggle without noSpacing prop\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v3-to-v4/__tests__/VirtualizedList-component-migration.test.ts",
    "content": "import transform from \"../VirtualizedList-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `import { VirtualizedList } from \"@vibe/core\";\\n${source}`;\n}\n\ndescribe(\"VirtualizedList component migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\"<VirtualizedList items={items} getItemHeight={item => item.height} itemRenderer={renderer} />\"),\n    prependImport(\"<VirtualizedList items={items} getItemSize={item => item.height} itemRenderer={renderer} />\"),\n    \"should rename getItemHeight prop to getItemSize\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      \"<VirtualizedList items={items} getItemSize={item => item.height} onVerticalScrollbarVisiblityChange={cb} itemRenderer={renderer} />\"\n    ),\n    prependImport(\n      \"<VirtualizedList items={items} getItemSize={item => item.height} onLayoutDirectionScrollbarVisibilityChange={cb} itemRenderer={renderer} />\"\n    ),\n    \"should rename onVerticalScrollbarVisiblityChange prop to onLayoutDirectionScrollbarVisibilityChange\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\n      \"<VirtualizedList items={items} getItemHeight={item => item.height} onVerticalScrollbarVisiblityChange={cb} itemRenderer={renderer} />\"\n    ),\n    prependImport(\n      \"<VirtualizedList items={items} getItemSize={item => item.height} onLayoutDirectionScrollbarVisibilityChange={cb} itemRenderer={renderer} />\"\n    ),\n    \"should rename both deprecated props at once\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(\"<VirtualizedList items={items} getItemSize={item => item.height} itemRenderer={renderer} />\"),\n    prependImport(\"<VirtualizedList items={items} getItemSize={item => item.height} itemRenderer={renderer} />\"),\n    \"should not change VirtualizedList without deprecated props\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { VirtualizedList as VList } from \"@vibe/core\";\n<VList items={items} getItemHeight={item => item.height} itemRenderer={renderer} />`,\n    `import { VirtualizedList as VList } from \"@vibe/core\";\n<VList items={items} getItemSize={item => item.height} itemRenderer={renderer} />`,\n    \"should work with aliased imports\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    \"<VirtualizedList items={items} getItemHeight={item => item.height} itemRenderer={renderer} />\",\n    \"<VirtualizedList items={items} getItemHeight={item => item.height} itemRenderer={renderer} />\",\n    \"should not transform VirtualizedList without import from @vibe/core\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v3-to-v4/__tests__/aria-props-migration.test.ts",
    "content": "import transform from \"../aria-props-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { Button } from \"@vibe/core\";\n    ${source}\n  `;\n}\n\nfunction prependLinkImport(source: string): string {\n  return `\n    import { Link } from \"@vibe/core\";\n    ${source}\n  `;\n}\n\nfunction prependMultiImport(source: string): string {\n  return `\n    import { Button, IconButton, Search } from \"@vibe/core\";\n    ${source}\n  `;\n}\n\ndescribe(\"Aria props migration\", () => {\n  describe(\"ariaLabel\", () => {\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<Button ariaLabel=\"Click me\">test</Button>`),\n      prependImport(`<Button aria-label=\"Click me\">test</Button>`),\n      \"should update 'ariaLabel' to 'aria-label'\"\n    );\n\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<Button ariaLabel={label}>test</Button>`),\n      prependImport(`<Button aria-label={label}>test</Button>`),\n      \"should update 'ariaLabel' to 'aria-label' with expression value\"\n    );\n  });\n\n  describe(\"ariaHidden\", () => {\n    defineInlineTest(\n      transform,\n      {},\n      `\n        import { Icon } from \"@vibe/core\";\n        <Icon ariaHidden={true} />\n      `,\n      `\n        import { Icon } from \"@vibe/core\";\n        <Icon aria-hidden={true} />\n      `,\n      \"should update 'ariaHidden' to 'aria-hidden'\"\n    );\n  });\n\n  describe(\"ariaExpanded\", () => {\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<Button ariaExpanded={isOpen}>test</Button>`),\n      prependImport(`<Button aria-expanded={isOpen}>test</Button>`),\n      \"should update 'ariaExpanded' to 'aria-expanded'\"\n    );\n  });\n\n  describe(\"ariaControls\", () => {\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<Button ariaControls=\"panel-1\">test</Button>`),\n      prependImport(`<Button aria-controls=\"panel-1\">test</Button>`),\n      \"should update 'ariaControls' to 'aria-controls'\"\n    );\n  });\n\n  describe(\"ariaHasPopup\", () => {\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<Button ariaHasPopup={true}>test</Button>`),\n      prependImport(`<Button aria-haspopup={true}>test</Button>`),\n      \"should update 'ariaHasPopup' to 'aria-haspopup'\"\n    );\n  });\n\n  describe(\"ariaLabeledBy (misspelled)\", () => {\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<Button ariaLabeledBy=\"label-id\">test</Button>`),\n      prependImport(`<Button aria-labelledby=\"label-id\">test</Button>`),\n      \"should update 'ariaLabeledBy' to 'aria-labelledby' (fixing spelling)\"\n    );\n  });\n\n  describe(\"ariaLabelledBy\", () => {\n    defineInlineTest(\n      transform,\n      {},\n      `\n        import { Checkbox } from \"@vibe/core\";\n        <Checkbox ariaLabelledBy=\"label-id\" />\n      `,\n      `\n        import { Checkbox } from \"@vibe/core\";\n        <Checkbox aria-labelledby=\"label-id\" />\n      `,\n      \"should update 'ariaLabelledBy' to 'aria-labelledby'\"\n    );\n  });\n\n  describe(\"ariaDescribedBy\", () => {\n    defineInlineTest(\n      transform,\n      {},\n      `\n        import { List } from \"@vibe/core\";\n        <List ariaDescribedBy=\"desc-id\" />\n      `,\n      `\n        import { List } from \"@vibe/core\";\n        <List aria-describedby=\"desc-id\" />\n      `,\n      \"should update 'ariaDescribedBy' to 'aria-describedby'\"\n    );\n  });\n\n  describe(\"Link ariaLabelDescription\", () => {\n    defineInlineTest(\n      transform,\n      {},\n      prependLinkImport(`<Link ariaLabelDescription=\"Go to page\" href=\"/page\" />`),\n      prependLinkImport(`<Link aria-label=\"Go to page\" href=\"/page\" />`),\n      \"should update Link 'ariaLabelDescription' to 'aria-label'\"\n    );\n  });\n\n  describe(\"multiple props on same element\", () => {\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<Button ariaLabel=\"Click\" ariaExpanded={isOpen} ariaControls=\"panel\">test</Button>`),\n      prependImport(`<Button aria-label=\"Click\" aria-expanded={isOpen} aria-controls=\"panel\">test</Button>`),\n      \"should update multiple aria props on the same element\"\n    );\n  });\n\n  describe(\"multiple components\", () => {\n    defineInlineTest(\n      transform,\n      {},\n      prependMultiImport(`\n        <div>\n          <Button ariaLabel=\"Click\">test</Button>\n          <IconButton ariaLabel=\"Icon\" ariaHasPopup={true} />\n          <Search ariaExpanded={true} ariaHasPopup=\"listbox\" />\n        </div>\n      `),\n      prependMultiImport(`\n        <div>\n          <Button aria-label=\"Click\">test</Button>\n          <IconButton aria-label=\"Icon\" aria-haspopup={true} />\n          <Search aria-expanded={true} aria-haspopup=\"listbox\" />\n        </div>\n      `),\n      \"should update aria props across multiple different components\"\n    );\n  });\n\n  describe(\"no import - no change\", () => {\n    defineInlineTest(\n      transform,\n      {},\n      `<Button ariaLabel=\"Click\">test</Button>`,\n      `<Button ariaLabel=\"Click\">test</Button>`,\n      \"should not change when no vibe import exists\"\n    );\n  });\n\n  describe(\"other library - no change\", () => {\n    defineInlineTest(\n      transform,\n      {},\n      `\n        import { Button } from \"other-library\";\n        <Button ariaLabel=\"Click\">test</Button>\n      `,\n      `\n        import { Button } from \"other-library\";\n        <Button ariaLabel=\"Click\">test</Button>\n      `,\n      \"should not change when component is imported from another library\"\n    );\n  });\n\n  describe(\"aliased import\", () => {\n    defineInlineTest(\n      transform,\n      {},\n      `\n        import { Button as MyButton } from \"@vibe/core\";\n        <MyButton ariaLabel=\"Click\">test</MyButton>\n      `,\n      `\n        import { Button as MyButton } from \"@vibe/core\";\n        <MyButton aria-label=\"Click\">test</MyButton>\n      `,\n      \"should handle aliased imports\"\n    );\n  });\n\n  describe(\"legacy import path\", () => {\n    defineInlineTest(\n      transform,\n      {},\n      `\n        import { Button } from \"monday-ui-react-core\";\n        <Button ariaLabel=\"Click\">test</Button>\n      `,\n      `\n        import { Button } from \"monday-ui-react-core\";\n        <Button aria-label=\"Click\">test</Button>\n      `,\n      \"should handle legacy import path\"\n    );\n  });\n\n  describe(\"both old and new props with same value\", () => {\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<Button ariaLabel=\"Click\" aria-label=\"Click\">test</Button>`),\n      prependImport(`<Button aria-label=\"Click\">test</Button>`),\n      \"should remove old prop when both exist with same value\"\n    );\n  });\n\n  describe(\"both old and new props with different values\", () => {\n    defineInlineTest(\n      transform,\n      {},\n      prependImport(`<Button ariaLabel=\"Old\" aria-label=\"New\">test</Button>`),\n      prependImport(`<Button ariaLabel=\"Old\" aria-label=\"New\">test</Button>`),\n      \"should not change when both old and new props exist with different values\"\n    );\n  });\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v3-to-v4/__tests__/enums-migration.test.ts",
    "content": "import transform from \"../enums-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prependImport(source: string): string {\n  return `\n    import { Button } from \"@vibe/core\";\n    ${source}\n  `;\n}\n\ndescribe(\"Enums migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Button kind={Button.kinds.PRIMARY}/>`),\n    prependImport(`<Button kind=\"primary\"/>`),\n    \"should replace enum value with string literal\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Button kind={Button.kinds.SECONDARY} size={Button.sizes.SMALL} />`),\n    prependImport(`<Button kind=\"secondary\" size=\"small\" />`),\n    \"should replace multiple enum values on the same element\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Button } from \"another-library\";\n      <Button size={Button.sizes.SMALL} />\n    `,\n    `\n      import { Button } from \"another-library\";\n      <Button size={Button.sizes.SMALL} />\n    `,\n    \"should not change components not imported from @vibe/core\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    prependImport(`<Button kind=\"primary\" />`),\n    prependImport(`<Button kind=\"primary\" />`),\n    \"should not modify props that are already string literals\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `\n      import { Dropdown } from \"@vibe/core\";\n      <Dropdown size={Dropdown.sizes.SMALL} />\n    `,\n    `\n      import { Dropdown } from \"@vibe/core\";\n      <Dropdown size=\"small\" />\n    `,\n    \"should replace enum values on other components\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v3-to-v4/__tests__/next-imports-migration.test.ts",
    "content": "import transform from \"../next-imports-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\ndescribe(\"Next imports migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    `import { AttentionBox } from \"@vibe/core/next\";`,\n    `import { AttentionBox } from \"@vibe/core\";`,\n    \"should rename '@vibe/core/next' to '@vibe/core'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { Dropdown, Modal } from \"@vibe/core/next\";`,\n    `import { Dropdown, Modal } from \"@vibe/core\";`,\n    \"should rename '@vibe/core/next' with multiple imports\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { Button } from \"@vibe/core\";`,\n    `import { Button } from \"@vibe/core\";`,\n    \"should not modify imports already from '@vibe/core'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { SomeComponent } from \"another-library\";`,\n    `import { SomeComponent } from \"another-library\";`,\n    \"should not change unrelated imports\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { AttentionBox } from \"@vibe/core/next\";\n     import { Button } from \"@vibe/core\";`,\n    `import { AttentionBox } from \"@vibe/core\";\n     import { Button } from \"@vibe/core\";`,\n    \"should rename '@vibe/core/next' and leave '@vibe/core' unchanged\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { DatePicker } from \"@vibe/core/next\";\n     import { SomeOther } from \"another-library\";`,\n    `import { DatePicker } from \"@vibe/core\";\n     import { SomeOther } from \"another-library\";`,\n    \"should rename '@vibe/core/next' and leave other imports unchanged\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { List } from \"@vibe/core/next\";`,\n    `import { List } from \"@vibe/core/next\";`,\n    \"should not move List — it remains in @vibe/core/next\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { AttentionBox, List } from \"@vibe/core/next\";`,\n    `import { AttentionBox } from \"@vibe/core\";\nimport { List } from \"@vibe/core/next\";`,\n    \"should split mixed imports — move promoted components, keep List in /next\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { Dropdown, Modal, DatePicker } from \"@vibe/core/next\";`,\n    `import { Dropdown, Modal, DatePicker } from \"@vibe/core\";`,\n    \"should move multiple promoted components together\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v3-to-v4/__tests__/packages-rename-migration.test.ts",
    "content": "import transform from \"../packages-rename-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\ndescribe(\"Packages rename migration\", () => {\n  defineInlineTest(\n    transform,\n    {},\n    `import \"monday-ui-style\";`,\n    `import \"@vibe/style\";`,\n    \"should rename 'monday-ui-style' to '@vibe/style'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import \"monday-ui-style/tokens\";`,\n    `import \"@vibe/style/tokens\";`,\n    \"should rename 'monday-ui-style/tokens' to '@vibe/style/tokens'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { spacingVar } from \"monday-ui-style/dist/utils\";`,\n    `import { spacingVar } from \"@vibe/style/dist/utils\";`,\n    \"should rename deep import paths from 'monday-ui-style'\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import { Button } from \"@vibe/core\";`,\n    `import { Button } from \"@vibe/core\";`,\n    \"should not change unrelated imports\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import \"monday-ui-style\";\n     import { Button } from \"@vibe/core\";`,\n    `import \"@vibe/style\";\n     import { Button } from \"@vibe/core\";`,\n    \"should rename 'monday-ui-style' and leave other imports unchanged\"\n  );\n\n  defineInlineTest(\n    transform,\n    {},\n    `import \"monday-ui-style/tokens\";\n     import \"monday-ui-style/dist/mixins\";`,\n    `import \"@vibe/style/tokens\";\n     import \"@vibe/style/dist/mixins\";`,\n    \"should rename multiple 'monday-ui-style' imports\"\n  );\n});\n"
  },
  {
    "path": "packages/codemod/transformations/core/v3-to-v4/aria-props-migration.ts",
    "content": "import {\n  wrap,\n  getCoreImportsForFile,\n  getComponentNameOrAliasFromImports,\n  findComponentElements,\n  migratePropsNames\n} from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\nimport { NEW_CORE_IMPORT_PATH } from \"../../../src/consts/vibe-import-paths\";\n\nconst ARIA_PROPS_MAPPING: Record<string, string> = {\n  ariaLabel: \"aria-label\",\n  ariaHidden: \"aria-hidden\",\n  ariaExpanded: \"aria-expanded\",\n  ariaControls: \"aria-controls\",\n  ariaHasPopup: \"aria-haspopup\",\n  ariaLabeledBy: \"aria-labelledby\",\n  ariaLabelledBy: \"aria-labelledby\",\n  ariaLabelledby: \"aria-labelledby\",\n  ariaDescribedBy: \"aria-describedby\",\n  ariaDescribedby: \"aria-describedby\"\n};\n\nconst LINK_ARIA_PROPS_MAPPING: Record<string, string> = {\n  ...ARIA_PROPS_MAPPING,\n  ariaLabelDescription: \"aria-label\"\n};\n\nconst COMPONENTS_WITH_ARIA_PROPS = [\n  \"Avatar\",\n  \"AlertBanner\",\n  \"Button\",\n  \"ButtonGroup\",\n  \"Checkbox\",\n  \"Clickable\",\n  \"Counter\",\n  \"DatePickerHeader\",\n  \"DialogContentContainer\",\n  \"Dropdown\",\n  \"EditableHeading\",\n  \"EditableText\",\n  \"Flex\",\n  \"Icon\",\n  \"IconButton\",\n  \"LinearProgressBar\",\n  \"Link\",\n  \"List\",\n  \"Menu\",\n  \"MenuButton\",\n  \"RadioButton\",\n  \"Search\",\n  \"Slider\",\n  \"Switch\",\n  \"Toggle\",\n  \"VirtualizedList\"\n];\n\nfunction transform({ j, root, filePath }: TransformationContext) {\n  const imports = getCoreImportsForFile(root);\n  const newImports = getCoreImportsForFile(root, NEW_CORE_IMPORT_PATH);\n\n  for (const componentName of COMPONENTS_WITH_ARIA_PROPS) {\n    const name =\n      getComponentNameOrAliasFromImports(j, imports, componentName) ||\n      getComponentNameOrAliasFromImports(j, newImports, componentName);\n    if (!name) continue;\n\n    const elements = findComponentElements(root, name);\n    if (!elements.length) continue;\n\n    const mapping = componentName === \"Link\" ? LINK_ARIA_PROPS_MAPPING : ARIA_PROPS_MAPPING;\n\n    elements.forEach(elementPath => {\n      migratePropsNames(j, elementPath, filePath, name, mapping);\n    });\n  }\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v3-to-v4/enums/enumMappings.json",
    "content": "{\n  \"TabPanels.animationDirections.RTL\": \"rtl\",\n  \"TabPanels.animationDirections.LTR\": \"ltr\",\n  \"Dropdown.sizes.SMALL\": \"small\",\n  \"Dropdown.sizes.MEDIUM\": \"medium\",\n  \"Dropdown.sizes.LARGE\": \"large\",\n  \"Dropdown.chipColors.PRIMARY\": \"primary\",\n  \"Dropdown.chipColors.NEGATIVE\": \"negative\",\n  \"Dropdown.chipColors.POSITIVE\": \"positive\",\n  \"Dropdown.menuPlacements.TOP\": \"top\",\n  \"Dropdown.menuPlacements.BOTTOM\": \"bottom\",\n  \"Dropdown.menuPlacements.AUTO\": \"auto\",\n  \"Dropdown.menuPositions.ABSOLUTE\": \"absolute\",\n  \"Dropdown.menuPositions.FIXED\": \"fixed\",\n  \"Tipseen.closeButtonThemes.LIGHT\": \"light\",\n  \"Tipseen.closeButtonThemes.DARK\": \"dark\",\n  \"Tipseen.closeButtonThemes.FIXED_LIGHT\": \"fixed-light\",\n  \"Tipseen.closeButtonThemes.FIXED_DARK\": \"fixed-dark\",\n  \"Tipseen.animationTypes.OPACITY_AND_SLIDE\": \"opacity-and-slide\",\n  \"Tipseen.animationTypes.EXPAND\": \"expand\",\n  \"Tipseen.hideShowTriggers.CLICK\": \"click\",\n  \"Tipseen.hideShowTriggers.CLICK_OUTSIDE\": \"clickoutside\",\n  \"Tipseen.hideShowTriggers.ESCAPE_KEY\": \"esckey\",\n  \"Tipseen.hideShowTriggers.TAB_KEY\": \"tab\",\n  \"Tipseen.hideShowTriggers.MOUSE_ENTER\": \"mouseenter\",\n  \"Tipseen.hideShowTriggers.MOUSE_LEAVE\": \"mouseleave\",\n  \"Tipseen.hideShowTriggers.ENTER\": \"enter\",\n  \"Tipseen.hideShowTriggers.MOUSE_DOWN\": \"mousedown\",\n  \"Tipseen.hideShowTriggers.FOCUS\": \"focus\",\n  \"Tipseen.hideShowTriggers.BLUR\": \"blur\",\n  \"Tipseen.hideShowTriggers.CONTENT_CLICK\": \"onContentClick\",\n  \"Tipseen.hideShowTriggers.CONTEXT_MENU\": \"contextmenu\",\n  \"Tipseen.colors.PRIMARY\": \"primary\",\n  \"Tipseen.colors.INVERTED\": \"inverted\",\n  \"Tipseen.positions.TOP\": \"top\",\n  \"Tipseen.positions.RIGHT\": \"right\",\n  \"Tipseen.positions.BOTTOM\": \"bottom\",\n  \"Tipseen.positions.LEFT\": \"left\",\n  \"Box.borderColors.UI_BORDER_COLOR\": \"uiBorderColor\",\n  \"Box.borderColors.LAYOUT_BORDER_COLOR\": \"layoutBorderColor\",\n  \"Box.roundeds.SMALL\": \"roundedSmall\",\n  \"Box.roundeds.MEDIUM\": \"roundedMedium\",\n  \"Box.roundeds.BIG\": \"roundedBig\",\n  \"Box.shadows.XS\": \"shadowXs\",\n  \"Box.shadows.SMALL\": \"shadowSmall\",\n  \"Box.shadows.MEDIUM\": \"shadowMedium\",\n  \"Box.shadows.LARGE\": \"shadowLarge\",\n  \"Box.margins.AUTO\": \"mAuto\",\n  \"Box.margins.XS\": \"mXs\",\n  \"Box.margins.SMALL\": \"mSmall\",\n  \"Box.margins.MEDIUM\": \"mMedium\",\n  \"Box.margins.LARGE\": \"mLarge\",\n  \"Box.margins.XL\": \"mXl\",\n  \"Box.margins.XXL\": \"mXxl\",\n  \"Box.margins.XXXL\": \"mXxxl\",\n  \"Box.marginXs.AUTO\": \"mxAuto\",\n  \"Box.marginXs.XS\": \"mxXs\",\n  \"Box.marginXs.SMALL\": \"mxSmall\",\n  \"Box.marginXs.MEDIUM\": \"mxMedium\",\n  \"Box.marginXs.LARGE\": \"mxLarge\",\n  \"Box.marginXs.XL\": \"mxXl\",\n  \"Box.marginXs.XXL\": \"mxXxl\",\n  \"Box.marginXs.XXXL\": \"mxXxxl\",\n  \"Box.marginYs.AUTO\": \"myAuto\",\n  \"Box.marginYs.XS\": \"myXs\",\n  \"Box.marginYs.SMALL\": \"mySmall\",\n  \"Box.marginYs.MEDIUM\": \"myMedium\",\n  \"Box.marginYs.LARGE\": \"myLarge\",\n  \"Box.marginYs.XL\": \"myXl\",\n  \"Box.marginYs.XXL\": \"myXxl\",\n  \"Box.marginYs.XXXL\": \"myXxxl\",\n  \"Box.marginTops.AUTO\": \"mtAuto\",\n  \"Box.marginTops.XS\": \"mtXs\",\n  \"Box.marginTops.SMALL\": \"mtSmall\",\n  \"Box.marginTops.MEDIUM\": \"mtMedium\",\n  \"Box.marginTops.LARGE\": \"mtLarge\",\n  \"Box.marginTops.XL\": \"mtXl\",\n  \"Box.marginTops.XXL\": \"mtXxl\",\n  \"Box.marginTops.XXXL\": \"mtXxxl\",\n  \"Box.marginEnds.AUTO\": \"meAuto\",\n  \"Box.marginEnds.XS\": \"meXs\",\n  \"Box.marginEnds.SMALL\": \"meSmall\",\n  \"Box.marginEnds.MEDIUM\": \"meMedium\",\n  \"Box.marginEnds.LARGE\": \"meLarge\",\n  \"Box.marginEnds.XL\": \"meXl\",\n  \"Box.marginEnds.XXL\": \"meXxl\",\n  \"Box.marginEnds.XXXL\": \"meXxxl\",\n  \"Box.marginBottoms.AUTO\": \"mbAuto\",\n  \"Box.marginBottoms.XS\": \"mbXs\",\n  \"Box.marginBottoms.SMALL\": \"mbSmall\",\n  \"Box.marginBottoms.MEDIUM\": \"mbMedium\",\n  \"Box.marginBottoms.LARGE\": \"mbLarge\",\n  \"Box.marginBottoms.XL\": \"mbXl\",\n  \"Box.marginBottoms.XXL\": \"mbXxl\",\n  \"Box.marginBottoms.XXXL\": \"mbXxxl\",\n  \"Box.marginStarts.AUTO\": \"msAuto\",\n  \"Box.marginStarts.XS\": \"msXs\",\n  \"Box.marginStarts.SMALL\": \"msSmall\",\n  \"Box.marginStarts.MEDIUM\": \"msMedium\",\n  \"Box.marginStarts.LARGE\": \"msLarge\",\n  \"Box.marginStarts.XL\": \"msXl\",\n  \"Box.marginStarts.XXL\": \"msXxl\",\n  \"Box.marginStarts.XXXL\": \"msXxxl\",\n  \"Box.paddings.XS\": \"pXs\",\n  \"Box.paddings.SMALL\": \"pSmall\",\n  \"Box.paddings.MEDIUM\": \"pMedium\",\n  \"Box.paddings.LARGE\": \"pLarge\",\n  \"Box.paddings.XL\": \"pXl\",\n  \"Box.paddings.XXL\": \"pXxl\",\n  \"Box.paddings.XXXL\": \"pXxxl\",\n  \"Box.paddingXs.XS\": \"pxXs\",\n  \"Box.paddingXs.SMALL\": \"pxSmall\",\n  \"Box.paddingXs.MEDIUM\": \"pxMedium\",\n  \"Box.paddingXs.LARGE\": \"pxLarge\",\n  \"Box.paddingXs.XL\": \"pxXl\",\n  \"Box.paddingXs.XXL\": \"pxXxl\",\n  \"Box.paddingXs.XXXL\": \"pxXxxl\",\n  \"Box.paddingYs.XS\": \"pyXs\",\n  \"Box.paddingYs.SMALL\": \"pySmall\",\n  \"Box.paddingYs.MEDIUM\": \"pyMedium\",\n  \"Box.paddingYs.LARGE\": \"pyLarge\",\n  \"Box.paddingYs.XL\": \"pyXl\",\n  \"Box.paddingYs.XXL\": \"pyXxl\",\n  \"Box.paddingYs.XXXL\": \"pyXxxl\",\n  \"Box.paddingTops.XS\": \"ptXs\",\n  \"Box.paddingTops.SMALL\": \"ptSmall\",\n  \"Box.paddingTops.MEDIUM\": \"ptMedium\",\n  \"Box.paddingTops.LARGE\": \"ptLarge\",\n  \"Box.paddingTops.XL\": \"ptXl\",\n  \"Box.paddingTops.XXL\": \"ptXxl\",\n  \"Box.paddingTops.XXXL\": \"ptXxxl\",\n  \"Box.paddingEnds.XS\": \"peXs\",\n  \"Box.paddingEnds.SMALL\": \"peSmall\",\n  \"Box.paddingEnds.MEDIUM\": \"peMedium\",\n  \"Box.paddingEnds.LARGE\": \"peLarge\",\n  \"Box.paddingEnds.XL\": \"peXl\",\n  \"Box.paddingEnds.XXL\": \"peXxl\",\n  \"Box.paddingEnds.XXXL\": \"peXxxl\",\n  \"Box.paddingBottoms.XS\": \"pbXs\",\n  \"Box.paddingBottoms.SMALL\": \"pbSmall\",\n  \"Box.paddingBottoms.MEDIUM\": \"pbMedium\",\n  \"Box.paddingBottoms.LARGE\": \"pbLarge\",\n  \"Box.paddingBottoms.XL\": \"pbXl\",\n  \"Box.paddingBottoms.XXL\": \"pbXxl\",\n  \"Box.paddingBottoms.XXXL\": \"pbXxxl\",\n  \"Box.paddingStarts.XS\": \"psXs\",\n  \"Box.paddingStarts.SMALL\": \"psSmall\",\n  \"Box.paddingStarts.MEDIUM\": \"psMedium\",\n  \"Box.paddingStarts.LARGE\": \"psLarge\",\n  \"Box.paddingStarts.XL\": \"psXl\",\n  \"Box.paddingStarts.XXL\": \"psXxl\",\n  \"Box.paddingStarts.XXXL\": \"psXxxl\",\n  \"Box.backgroundColors\": \"BackgroundColor\",\n  \"Box.textColors\": \"BoxTextColor\",\n  \"MenuButton.sizes.XXS\": \"xxs\",\n  \"MenuButton.sizes.XS\": \"xs\",\n  \"MenuButton.sizes.SMALL\": \"small\",\n  \"MenuButton.sizes.MEDIUM\": \"medium\",\n  \"MenuButton.sizes.LARGE\": \"large\",\n  \"MenuButton.paddingSizes.NONE\": \"none\",\n  \"MenuButton.paddingSizes.SMALL\": \"small\",\n  \"MenuButton.paddingSizes.MEDIUM\": \"medium\",\n  \"MenuButton.paddingSizes.LARGE\": \"large\",\n  \"MenuButton.dialogPositions.LEFT\": \"left\",\n  \"MenuButton.dialogPositions.LEFT_START\": \"left-start\",\n  \"MenuButton.dialogPositions.LEFT_END\": \"left-end\",\n  \"MenuButton.dialogPositions.RIGHT\": \"right\",\n  \"MenuButton.dialogPositions.RIGHT_START\": \"right-start\",\n  \"MenuButton.dialogPositions.RIGHT_END\": \"right-end\",\n  \"MenuButton.dialogPositions.TOP\": \"top\",\n  \"MenuButton.dialogPositions.TOP_START\": \"top-start\",\n  \"MenuButton.dialogPositions.TOP_END\": \"top-end\",\n  \"MenuButton.dialogPositions.BOTTOM\": \"bottom\",\n  \"MenuButton.dialogPositions.BOTTOM_START\": \"bottom-start\",\n  \"MenuButton.dialogPositions.BOTTOM_END\": \"bottom-end\",\n  \"MenuButton.hideTriggers.CLICK\": \"click\",\n  \"MenuButton.hideTriggers.CLICK_OUTSIDE\": \"clickoutside\",\n  \"MenuButton.hideTriggers.ESCAPE_KEY\": \"esckey\",\n  \"MenuButton.hideTriggers.TAB_KEY\": \"tab\",\n  \"MenuButton.hideTriggers.MOUSE_ENTER\": \"mouseenter\",\n  \"MenuButton.hideTriggers.MOUSE_LEAVE\": \"mouseleave\",\n  \"MenuButton.hideTriggers.ENTER\": \"enter\",\n  \"MenuButton.hideTriggers.MOUSE_DOWN\": \"mousedown\",\n  \"MenuButton.hideTriggers.FOCUS\": \"focus\",\n  \"MenuButton.hideTriggers.BLUR\": \"blur\",\n  \"MenuButton.hideTriggers.CONTENT_CLICK\": \"onContentClick\",\n  \"MenuButton.hideTriggers.CONTEXT_MENU\": \"contextmenu\",\n  \"MenuButton.componentPositions.START\": \"start\",\n  \"MenuButton.componentPositions.END\": \"end\",\n  \"ThemeProvider.systemThemes.LIGHT\": \"light\",\n  \"ThemeProvider.systemThemes.DARK\": \"dark\",\n  \"ThemeProvider.systemThemes.BLACK\": \"black\",\n  \"ThemeProvider.colors.primaryColor\": \"primary-color\",\n  \"ThemeProvider.colors.primaryHoverColor\": \"primary-hover-color\",\n  \"ThemeProvider.colors.primarySelectedColor\": \"primary-selected-color\",\n  \"ThemeProvider.colors.primarySelectedHoverColor\": \"primary-selected-hover-color\",\n  \"ThemeProvider.colors.primarySelectedOnSecondaryColor\": \"primary-selected-on-secondary-color\",\n  \"ThemeProvider.colors.textColorOnPrimary\": \"text-color-on-primary\",\n  \"ThemeProvider.colors.brandColor\": \"brand-color\",\n  \"ThemeProvider.colors.brandHoverColor\": \"brand-hover-color\",\n  \"ThemeProvider.colors.brandSelectedColor\": \"brand-selected-color\",\n  \"ThemeProvider.colors.brandSelectedHoverColor\": \"brand-selected-hover-color\",\n  \"ThemeProvider.colors.textColorOnBrand\": \"text-color-on-brand\",\n  \"ButtonGroup.sizes.XXS\": \"xxs\",\n  \"ButtonGroup.sizes.XS\": \"xs\",\n  \"ButtonGroup.sizes.SMALL\": \"small\",\n  \"ButtonGroup.sizes.MEDIUM\": \"medium\",\n  \"ButtonGroup.sizes.LARGE\": \"large\",\n  \"ButtonGroup.kinds.PRIMARY\": \"primary\",\n  \"ButtonGroup.kinds.SECONDARY\": \"secondary\",\n  \"ButtonGroup.kinds.TERTIARY\": \"tertiary\",\n  \"EditableHeading.types.H1\": \"h1\",\n  \"EditableHeading.types.H2\": \"h2\",\n  \"EditableHeading.types.H3\": \"h3\",\n  \"EditableHeading.weights.BOLD\": \"bold\",\n  \"EditableHeading.weights.MEDIUM\": \"medium\",\n  \"EditableHeading.weights.NORMAL\": \"normal\",\n  \"EditableHeading.weights.LIGHT\": \"light\",\n  \"Chips.colors.GRASS_GREEN\": \"grass_green\",\n  \"Chips.colors.DONE_GREEN\": \"done-green\",\n  \"Chips.colors.BRIGHT_GREEN\": \"bright-green\",\n  \"Chips.colors.SALADISH\": \"saladish\",\n  \"Chips.colors.EGG_YOLK\": \"egg_yolk\",\n  \"Chips.colors.WORKING_ORANGE\": \"working_orange\",\n  \"Chips.colors.DARK_ORANGE\": \"dark-orange\",\n  \"Chips.colors.PEACH\": \"peach\",\n  \"Chips.colors.SUNSET\": \"sunset\",\n  \"Chips.colors.STUCK_RED\": \"stuck-red\",\n  \"Chips.colors.DARK_RED\": \"dark-red\",\n  \"Chips.colors.SOFIA_PINK\": \"sofia_pink\",\n  \"Chips.colors.LIPSTICK\": \"lipstick\",\n  \"Chips.colors.BUBBLE\": \"bubble\",\n  \"Chips.colors.PURPLE\": \"purple\",\n  \"Chips.colors.DARK_PURPLE\": \"dark_purple\",\n  \"Chips.colors.BERRY\": \"berry\",\n  \"Chips.colors.DARK_INDIGO\": \"dark_indigo\",\n  \"Chips.colors.INDIGO\": \"indigo\",\n  \"Chips.colors.NAVY\": \"navy\",\n  \"Chips.colors.BRIGHT_BLUE\": \"bright-blue\",\n  \"Chips.colors.DARK_BLUE\": \"dark-blue\",\n  \"Chips.colors.AQUAMARINE\": \"aquamarine\",\n  \"Chips.colors.CHILI_BLUE\": \"chili-blue\",\n  \"Chips.colors.RIVER\": \"river\",\n  \"Chips.colors.WINTER\": \"winter\",\n  \"Chips.colors.EXPLOSIVE\": \"explosive\",\n  \"Chips.colors.AMERICAN_GRAY\": \"american_gray\",\n  \"Chips.colors.BLACKISH\": \"blackish\",\n  \"Chips.colors.BROWN\": \"brown\",\n  \"Chips.colors.ORCHID\": \"orchid\",\n  \"Chips.colors.TAN\": \"tan\",\n  \"Chips.colors.SKY\": \"sky\",\n  \"Chips.colors.COFFEE\": \"coffee\",\n  \"Chips.colors.ROYAL\": \"royal\",\n  \"Chips.colors.TEAL\": \"teal\",\n  \"Chips.colors.LAVENDER\": \"lavender\",\n  \"Chips.colors.STEEL\": \"steel\",\n  \"Chips.colors.LILAC\": \"lilac\",\n  \"Chips.colors.PECAN\": \"pecan\",\n  \"Chips.colors.POSITIVE\": \"positive\",\n  \"Chips.colors.NEGATIVE\": \"negative\",\n  \"Chips.colors.PRIMARY\": \"primary\",\n  \"Chips.colors.WARNING\": \"warning\",\n  \"Chips.avatarTypes.IMG\": \"img\",\n  \"Chips.avatarTypes.ICON\": \"icon\",\n  \"Chips.avatarTypes.TEXT\": \"text\",\n  \"BreadcrumbsBar.types.NAVIGATION\": \"navigation\",\n  \"BreadcrumbsBar.types.INDICATION\": \"indication\",\n  \"Skeleton.types.CIRCLE\": \"circle\",\n  \"Skeleton.types.RECTANGLE\": \"rectangle\",\n  \"Skeleton.types.TEXT\": \"text\",\n  \"Skeleton.sizes.CUSTOM\": \"custom\",\n  \"Heading.types.H1\": \"h1\",\n  \"Heading.types.H2\": \"h2\",\n  \"Heading.types.H3\": \"h3\",\n  \"Heading.weights.BOLD\": \"bold\",\n  \"Heading.weights.MEDIUM\": \"medium\",\n  \"Heading.weights.NORMAL\": \"normal\",\n  \"Heading.weights.LIGHT\": \"light\",\n  \"Heading.align.START\": \"start\",\n  \"Heading.align.CENTER\": \"center\",\n  \"Heading.align.END\": \"end\",\n  \"Heading.colors.PRIMARY\": \"primary\",\n  \"Heading.colors.SECONDARY\": \"secondary\",\n  \"Heading.colors.ON_PRIMARY\": \"onPrimary\",\n  \"Heading.colors.ON_INVERTED\": \"onInverted\",\n  \"Heading.colors.FIXED_LIGHT\": \"fixedLight\",\n  \"Heading.colors.FIXED_DARK\": \"fixedDark\",\n  \"Heading.colors.INHERIT\": \"inherit\",\n  \"Toast.types.NORMAL\": \"normal\",\n  \"Toast.types.POSITIVE\": \"positive\",\n  \"Toast.types.NEGATIVE\": \"negative\",\n  \"Toast.types.WARNING\": \"warning\",\n  \"Toast.types.DARK\": \"dark\",\n  \"Toast.actionTypes.LINK\": \"link\",\n  \"Toast.actionTypes.BUTTON\": \"button\",\n  \"AttentionBox.types.PRIMARY\": \"primary\",\n  \"AttentionBox.types.SUCCESS\": \"success\",\n  \"AttentionBox.types.DANGER\": \"danger\",\n  \"AttentionBox.types.DARK\": \"dark\",\n  \"AttentionBox.types.WARNING\": \"warning\",\n  \"AttentionBox.iconTypes.SVG\": \"svg\",\n  \"AttentionBox.iconTypes.ICON_FONT\": \"font\",\n  \"AttentionBox.iconTypes.SRC\": \"src\",\n  \"MultiStepIndicator.types.PRIMARY\": \"primary\",\n  \"MultiStepIndicator.types.SUCCESS\": \"success\",\n  \"MultiStepIndicator.types.DANGER\": \"danger\",\n  \"MultiStepIndicator.types.DARK\": \"dark\",\n  \"MultiStepIndicator.stepStatuses.PENDING\": \"pending\",\n  \"MultiStepIndicator.stepStatuses.ACTIVE\": \"active\",\n  \"MultiStepIndicator.stepStatuses.FULFILLED\": \"fulfilled\",\n  \"MultiStepIndicator.textPlacements.HORIZONTAL\": \"horizontal\",\n  \"MultiStepIndicator.textPlacements.VERTICAL\": \"vertical\",\n  \"MultiStepIndicator.sizes.SMALL\": \"small\",\n  \"MultiStepIndicator.sizes.MEDIUM\": \"medium\",\n  \"MultiStepIndicator.sizes.LARGE\": \"large\",\n  \"ListItemIcon.margin.START\": \"start\",\n  \"ListItemIcon.margin.END\": \"end\",\n  \"ListItemIcon.components.DIV\": \"div\",\n  \"ListItemIcon.components.LI\": \"li\",\n  \"ListItemIcon.components.A\": \"a\",\n  \"Label.colors.PRIMARY\": \"primary\",\n  \"Label.colors.DARK\": \"dark\",\n  \"Label.colors.NEGATIVE\": \"negative\",\n  \"Label.colors.POSITIVE\": \"positive\",\n  \"Label.kinds.FILL\": \"fill\",\n  \"Label.kinds.LINE\": \"line\",\n  \"TextField.sizes.SMALL\": \"small\",\n  \"TextField.sizes.MEDIUM\": \"medium\",\n  \"TextField.sizes.LARGE\": \"large\",\n  \"TextField.feedbacks.ERROR\": \"error\",\n  \"TextField.feedbacks.SUCCESS\": \"success\",\n  \"TextField.types.TEXT\": \"text\",\n  \"TextField.types.PASSWORD\": \"password\",\n  \"TextField.types.SEARCH\": \"search\",\n  \"TextField.types.DATE\": \"date\",\n  \"TextField.types.DATE_TIME\": \"datetime-local\",\n  \"TextField.types.NUMBER\": \"number\",\n  \"TextField.types.TEL\": \"tel\",\n  \"TextField.types.URL\": \"url\",\n  \"TextField.types.EMAIL\": \"email\",\n  \"Slider.sizes.SMALL\": \"small\",\n  \"Slider.sizes.MEDIUM\": \"medium\",\n  \"Slider.sizes.LARGE\": \"large\",\n  \"Slider.colors.PRIMARY\": \"primary\",\n  \"Slider.colors.NEGATIVE\": \"negative\",\n  \"Slider.colors.POSITIVE\": \"positive\",\n  \"SliderInfix.kinds.PREFIX\": \"prefix\",\n  \"SliderInfix.kinds.POSTFIX\": \"postfix\",\n  \"Combobox.sizes.SMALL\": \"small\",\n  \"Combobox.sizes.MEDIUM\": \"medium\",\n  \"Combobox.sizes.LARGE\": \"large\",\n  \"Combobox.iconTypes.DEFAULT\": \"default\",\n  \"Combobox.iconTypes.RENDERER\": \"renderer\",\n  \"ComboboxOption.iconTypes.DEFAULT\": \"default\",\n  \"ComboboxOption.iconTypes.RENDERER\": \"renderer\",\n  \"AlertBanner.backgroundColors.PRIMARY\": \"primary\",\n  \"AlertBanner.backgroundColors.POSITIVE\": \"positive\",\n  \"AlertBanner.backgroundColors.NEGATIVE\": \"negative\",\n  \"AlertBanner.backgroundColors.DARK\": \"dark\",\n  \"AlertBanner.backgroundColors.WARNING\": \"warning\",\n  \"ListItem.sizes.XXS\": \"xxs\",\n  \"ListItem.sizes.XS\": \"xs\",\n  \"ListItem.sizes.SMALL\": \"small\",\n  \"ListItem.sizes.MEDIUM\": \"medium\",\n  \"ListItem.sizes.LARGE\": \"large\",\n  \"ListItem.components.DIV\": \"div\",\n  \"ListItem.components.LI\": \"li\",\n  \"ListItem.components.A\": \"a\",\n  \"Button.sizes.XXS\": \"xxs\",\n  \"Button.sizes.XS\": \"xs\",\n  \"Button.sizes.SMALL\": \"small\",\n  \"Button.sizes.MEDIUM\": \"medium\",\n  \"Button.sizes.LARGE\": \"large\",\n  \"Button.colors.PRIMARY\": \"primary\",\n  \"Button.colors.POSITIVE\": \"positive\",\n  \"Button.colors.NEGATIVE\": \"negative\",\n  \"Button.colors.INVERTED\": \"inverted\",\n  \"Button.colors.ON_PRIMARY_COLOR\": \"on-primary-color\",\n  \"Button.colors.ON_INVERTED_BACKGROUND\": \"on-inverted-background\",\n  \"Button.colors.BRAND\": \"brand\",\n  \"Button.colors.FIXED_LIGHT\": \"fixed-light\",\n  \"Button.kinds.PRIMARY\": \"primary\",\n  \"Button.kinds.SECONDARY\": \"secondary\",\n  \"Button.kinds.TERTIARY\": \"tertiary\",\n  \"Button.types.BUTTON\": \"button\",\n  \"Button.types.SUBMIT\": \"submit\",\n  \"Button.types.RESET\": \"reset\",\n  \"Button.inputTags.BUTTON\": \"button\",\n  \"Button.inputTags.SUBMIT\": \"submit\",\n  \"Button.inputTags.RESET\": \"reset\",\n  \"Steps.types.NUMBERS\": \"numbers\",\n  \"Steps.types.GALLERY\": \"gallery\",\n  \"Steps.colors.PRIMARY\": \"primary\",\n  \"Steps.colors.ON_PRIMARY_COLOR\": \"on-primary-color\",\n  \"Steps.colors.ON_INVERTED_BACKGROUND\": \"on-inverted-background\",\n  \"Link.position.START\": \"start\",\n  \"Link.position.END\": \"end\",\n  \"Link.iconPositions.START\": \"start\",\n  \"Link.iconPositions.END\": \"end\",\n  \"Link.targets.NEW_WINDOW\": \"_blank\",\n  \"Link.targets.SELF\": \"_self\",\n  \"Link.targets.PARENT\": \"_parent\",\n  \"Link.targets.TOP\": \"_top\",\n  \"Table.sizes.SMALL\": \"small\",\n  \"Table.sizes.MEDIUM\": \"medium\",\n  \"Table.sizes.LARGE\": \"large\",\n  \"Loader.sizes.XS\": \"xs\",\n  \"Loader.sizes.SMALL\": \"small\",\n  \"Loader.sizes.MEDIUM\": \"medium\",\n  \"Loader.sizes.LARGE\": \"large\",\n  \"Loader.colors.PRIMARY\": \"primary\",\n  \"Loader.colors.SECONDARY\": \"secondary\",\n  \"Loader.colors.ON_PRIMARY\": \"onPrimary\",\n  \"Loader.colors.DARK\": \"dark\",\n  \"List.components.DIV\": \"div\",\n  \"List.components.NAV\": \"nav\",\n  \"List.components.UL\": \"ul\",\n  \"List.components.OL\": \"ol\",\n  \"Divider.directions.VERTICAL\": \"vertical\",\n  \"Divider.directions.HORIZONTAL\": \"horizontal\",\n  \"MenuItemButton.kinds\": \"Button\",\n  \"MenuItemButton.tooltipPositions.TOP\": \"top\",\n  \"MenuItemButton.tooltipPositions.RIGHT\": \"right\",\n  \"MenuItemButton.tooltipPositions.BOTTOM\": \"bottom\",\n  \"MenuItemButton.tooltipPositions.LEFT\": \"left\",\n  \"MenuTitle.positions.TOP\": \"top\",\n  \"MenuTitle.positions.BOTTOM\": \"bottom\",\n  \"MenuTitle.positions.CENTER\": \"center\",\n  \"MenuTitle.captionPositions.TOP\": \"top\",\n  \"MenuTitle.captionPositions.BOTTOM\": \"bottom\",\n  \"MenuTitle.captionPositions.CENTER\": \"center\",\n  \"MenuItem.iconType.SVG\": \"svg\",\n  \"MenuItem.iconType.ICON_FONT\": \"font\",\n  \"MenuItem.iconType.SRC\": \"src\",\n  \"MenuItem.tooltipPositions.TOP\": \"top\",\n  \"MenuItem.tooltipPositions.RIGHT\": \"right\",\n  \"MenuItem.tooltipPositions.BOTTOM\": \"bottom\",\n  \"MenuItem.tooltipPositions.LEFT\": \"left\",\n  \"Menu.sizes.XXS\": \"xxs\",\n  \"Menu.sizes.XS\": \"xs\",\n  \"Menu.sizes.SMALL\": \"small\",\n  \"Menu.sizes.MEDIUM\": \"medium\",\n  \"Menu.sizes.LARGE\": \"large\",\n  \"Avatar.types.IMG\": \"img\",\n  \"Avatar.types.ICON\": \"icon\",\n  \"Avatar.types.TEXT\": \"text\",\n  \"Avatar.sizes.SMALL\": \"small\",\n  \"Avatar.sizes.MEDIUM\": \"medium\",\n  \"Avatar.sizes.LARGE\": \"large\",\n  \"Avatar.colors.GRASS_GREEN\": \"grass_green\",\n  \"Avatar.colors.DONE_GREEN\": \"done-green\",\n  \"Avatar.colors.BRIGHT_GREEN\": \"bright-green\",\n  \"Avatar.colors.SALADISH\": \"saladish\",\n  \"Avatar.colors.EGG_YOLK\": \"egg_yolk\",\n  \"Avatar.colors.WORKING_ORANGE\": \"working_orange\",\n  \"Avatar.colors.DARK_ORANGE\": \"dark-orange\",\n  \"Avatar.colors.PEACH\": \"peach\",\n  \"Avatar.colors.SUNSET\": \"sunset\",\n  \"Avatar.colors.STUCK_RED\": \"stuck-red\",\n  \"Avatar.colors.DARK_RED\": \"dark-red\",\n  \"Avatar.colors.SOFIA_PINK\": \"sofia_pink\",\n  \"Avatar.colors.LIPSTICK\": \"lipstick\",\n  \"Avatar.colors.BUBBLE\": \"bubble\",\n  \"Avatar.colors.PURPLE\": \"purple\",\n  \"Avatar.colors.DARK_PURPLE\": \"dark_purple\",\n  \"Avatar.colors.BERRY\": \"berry\",\n  \"Avatar.colors.DARK_INDIGO\": \"dark_indigo\",\n  \"Avatar.colors.INDIGO\": \"indigo\",\n  \"Avatar.colors.NAVY\": \"navy\",\n  \"Avatar.colors.BRIGHT_BLUE\": \"bright-blue\",\n  \"Avatar.colors.DARK_BLUE\": \"dark-blue\",\n  \"Avatar.colors.AQUAMARINE\": \"aquamarine\",\n  \"Avatar.colors.CHILI_BLUE\": \"chili-blue\",\n  \"Avatar.colors.RIVER\": \"river\",\n  \"Avatar.colors.WINTER\": \"winter\",\n  \"Avatar.colors.EXPLOSIVE\": \"explosive\",\n  \"Avatar.colors.AMERICAN_GRAY\": \"american_gray\",\n  \"Avatar.colors.BLACKISH\": \"blackish\",\n  \"Avatar.colors.BROWN\": \"brown\",\n  \"Avatar.colors.ORCHID\": \"orchid\",\n  \"Avatar.colors.TAN\": \"tan\",\n  \"Avatar.colors.SKY\": \"sky\",\n  \"Avatar.colors.COFFEE\": \"coffee\",\n  \"Avatar.colors.ROYAL\": \"royal\",\n  \"Avatar.colors.TEAL\": \"teal\",\n  \"Avatar.colors.LAVENDER\": \"lavender\",\n  \"Avatar.colors.STEEL\": \"steel\",\n  \"Avatar.colors.LILAC\": \"lilac\",\n  \"Avatar.colors.PECAN\": \"pecan\",\n  \"Avatar.colors.POSITIVE\": \"positive\",\n  \"Avatar.colors.NEGATIVE\": \"negative\",\n  \"Avatar.colors.PRIMARY\": \"primary\",\n  \"Avatar.colors.WARNING\": \"warning\",\n  \"Avatar.backgroundColors.GRASS_GREEN\": \"grass_green\",\n  \"Avatar.backgroundColors.DONE_GREEN\": \"done-green\",\n  \"Avatar.backgroundColors.BRIGHT_GREEN\": \"bright-green\",\n  \"Avatar.backgroundColors.SALADISH\": \"saladish\",\n  \"Avatar.backgroundColors.EGG_YOLK\": \"egg_yolk\",\n  \"Avatar.backgroundColors.WORKING_ORANGE\": \"working_orange\",\n  \"Avatar.backgroundColors.DARK_ORANGE\": \"dark-orange\",\n  \"Avatar.backgroundColors.PEACH\": \"peach\",\n  \"Avatar.backgroundColors.SUNSET\": \"sunset\",\n  \"Avatar.backgroundColors.STUCK_RED\": \"stuck-red\",\n  \"Avatar.backgroundColors.DARK_RED\": \"dark-red\",\n  \"Avatar.backgroundColors.SOFIA_PINK\": \"sofia_pink\",\n  \"Avatar.backgroundColors.LIPSTICK\": \"lipstick\",\n  \"Avatar.backgroundColors.BUBBLE\": \"bubble\",\n  \"Avatar.backgroundColors.PURPLE\": \"purple\",\n  \"Avatar.backgroundColors.DARK_PURPLE\": \"dark_purple\",\n  \"Avatar.backgroundColors.BERRY\": \"berry\",\n  \"Avatar.backgroundColors.DARK_INDIGO\": \"dark_indigo\",\n  \"Avatar.backgroundColors.INDIGO\": \"indigo\",\n  \"Avatar.backgroundColors.NAVY\": \"navy\",\n  \"Avatar.backgroundColors.BRIGHT_BLUE\": \"bright-blue\",\n  \"Avatar.backgroundColors.DARK_BLUE\": \"dark-blue\",\n  \"Avatar.backgroundColors.AQUAMARINE\": \"aquamarine\",\n  \"Avatar.backgroundColors.CHILI_BLUE\": \"chili-blue\",\n  \"Avatar.backgroundColors.RIVER\": \"river\",\n  \"Avatar.backgroundColors.WINTER\": \"winter\",\n  \"Avatar.backgroundColors.EXPLOSIVE\": \"explosive\",\n  \"Avatar.backgroundColors.AMERICAN_GRAY\": \"american_gray\",\n  \"Avatar.backgroundColors.BLACKISH\": \"blackish\",\n  \"Avatar.backgroundColors.BROWN\": \"brown\",\n  \"Avatar.backgroundColors.ORCHID\": \"orchid\",\n  \"Avatar.backgroundColors.TAN\": \"tan\",\n  \"Avatar.backgroundColors.SKY\": \"sky\",\n  \"Avatar.backgroundColors.COFFEE\": \"coffee\",\n  \"Avatar.backgroundColors.ROYAL\": \"royal\",\n  \"Avatar.backgroundColors.TEAL\": \"teal\",\n  \"Avatar.backgroundColors.LAVENDER\": \"lavender\",\n  \"Avatar.backgroundColors.STEEL\": \"steel\",\n  \"Avatar.backgroundColors.LILAC\": \"lilac\",\n  \"Avatar.backgroundColors.PECAN\": \"pecan\",\n  \"Avatar.backgroundColors.POSITIVE\": \"positive\",\n  \"Avatar.backgroundColors.NEGATIVE\": \"negative\",\n  \"Avatar.backgroundColors.PRIMARY\": \"primary\",\n  \"Avatar.backgroundColors.WARNING\": \"warning\",\n  \"ColorPicker.sizes.SMALL\": \"small\",\n  \"ColorPicker.sizes.MEDIUM\": \"medium\",\n  \"ColorPicker.sizes.LARGE\": \"large\",\n  \"ColorPicker.colorStyles.REGULAR\": \"regular\",\n  \"ColorPicker.colorStyles.HOVER\": \"hover\",\n  \"ColorPicker.colorStyles.SELECTED\": \"selected\",\n  \"ColorPicker.colorSizes.SMALL\": \"small\",\n  \"ColorPicker.colorSizes.MEDIUM\": \"medium\",\n  \"ColorPicker.colorSizes.LARGE\": \"large\",\n  \"ColorPicker.colorShapes.SQUARE\": \"square\",\n  \"ColorPicker.colorShapes.CIRCLE\": \"circle\",\n  \"ColorPickerContent.sizes.SMALL\": \"small\",\n  \"ColorPickerContent.sizes.MEDIUM\": \"medium\",\n  \"ColorPickerContent.sizes.LARGE\": \"large\",\n  \"ColorPickerContent.colorStyles.REGULAR\": \"regular\",\n  \"ColorPickerContent.colorStyles.HOVER\": \"hover\",\n  \"ColorPickerContent.colorStyles.SELECTED\": \"selected\",\n  \"ColorPickerContent.colorSizes.SMALL\": \"small\",\n  \"ColorPickerContent.colorSizes.MEDIUM\": \"medium\",\n  \"ColorPickerContent.colorSizes.LARGE\": \"large\",\n  \"ColorPickerContent.colorShapes.SQUARE\": \"square\",\n  \"ColorPickerContent.colorShapes.CIRCLE\": \"circle\",\n  \"SplitButton.secondaryPositions.BOTTOM_START\": \"bottom-start\",\n  \"SplitButton.secondaryPositions.BOTTOM_MIDDLE\": \"bottom\",\n  \"SplitButton.secondaryPositions.BOTTOM_END\": \"bottom-end\",\n  \"SplitButton.secondaryDialogPositions.BOTTOM_START\": \"bottom-start\",\n  \"SplitButton.secondaryDialogPositions.BOTTOM_MIDDLE\": \"bottom\",\n  \"SplitButton.secondaryDialogPositions.BOTTOM_END\": \"bottom-end\",\n  \"SplitButton.sizes.XXS\": \"xxs\",\n  \"SplitButton.sizes.XS\": \"xs\",\n  \"SplitButton.sizes.SMALL\": \"small\",\n  \"SplitButton.sizes.MEDIUM\": \"medium\",\n  \"SplitButton.sizes.LARGE\": \"large\",\n  \"SplitButton.colors.PRIMARY\": \"primary\",\n  \"SplitButton.colors.POSITIVE\": \"positive\",\n  \"SplitButton.colors.NEGATIVE\": \"negative\",\n  \"SplitButton.colors.INVERTED\": \"inverted\",\n  \"SplitButton.colors.ON_PRIMARY_COLOR\": \"on-primary-color\",\n  \"SplitButton.colors.ON_INVERTED_BACKGROUND\": \"on-inverted-background\",\n  \"SplitButton.colors.BRAND\": \"brand\",\n  \"SplitButton.colors.FIXED_LIGHT\": \"fixed-light\",\n  \"SplitButton.kinds.PRIMARY\": \"primary\",\n  \"SplitButton.kinds.SECONDARY\": \"secondary\",\n  \"SplitButton.kinds.TERTIARY\": \"tertiary\",\n  \"SplitButton.types.BUTTON\": \"button\",\n  \"SplitButton.types.SUBMIT\": \"submit\",\n  \"SplitButton.types.RESET\": \"reset\",\n  \"SplitButton.inputTags.BUTTON\": \"button\",\n  \"SplitButton.inputTags.SUBMIT\": \"submit\",\n  \"SplitButton.inputTags.RESET\": \"reset\",\n  \"SplitButton.dialogPaddingSizes.NONE\": \"none\",\n  \"SplitButton.dialogPaddingSizes.SMALL\": \"small\",\n  \"SplitButton.dialogPaddingSizes.MEDIUM\": \"medium\",\n  \"SplitButton.dialogPaddingSizes.LARGE\": \"large\",\n  \"EditableText.types.TEXT1\": \"text1\",\n  \"EditableText.types.TEXT2\": \"text2\",\n  \"EditableText.types.TEXT3\": \"text3\",\n  \"EditableText.weights.BOLD\": \"bold\",\n  \"EditableText.weights.MEDIUM\": \"medium\",\n  \"EditableText.weights.NORMAL\": \"normal\",\n  \"DialogContentContainer.types.MODAL\": \"modal\",\n  \"DialogContentContainer.types.POPOVER\": \"popover\",\n  \"DialogContentContainer.sizes.NONE\": \"none\",\n  \"DialogContentContainer.sizes.SMALL\": \"small\",\n  \"DialogContentContainer.sizes.MEDIUM\": \"medium\",\n  \"DialogContentContainer.sizes.LARGE\": \"large\",\n  \"LinearProgressBar.styles.PRIMARY\": \"primary\",\n  \"LinearProgressBar.styles.SECONDARY\": \"secondary\",\n  \"LinearProgressBar.styles.POSITIVE\": \"positive\",\n  \"LinearProgressBar.styles.NEGATIVE\": \"negative\",\n  \"LinearProgressBar.styles.WARNING\": \"warning\",\n  \"LinearProgressBar.styles.NONE\": \"none\",\n  \"LinearProgressBar.barStyles.PRIMARY\": \"primary\",\n  \"LinearProgressBar.barStyles.SECONDARY\": \"secondary\",\n  \"LinearProgressBar.barStyles.POSITIVE\": \"positive\",\n  \"LinearProgressBar.barStyles.NEGATIVE\": \"negative\",\n  \"LinearProgressBar.barStyles.WARNING\": \"warning\",\n  \"LinearProgressBar.barStyles.NONE\": \"none\",\n  \"LinearProgressBar.types.PRIMARY\": \"primary\",\n  \"LinearProgressBar.types.SECONDARY\": \"secondary\",\n  \"LinearProgressBar.barTypes.PRIMARY\": \"primary\",\n  \"LinearProgressBar.barTypes.SECONDARY\": \"secondary\",\n  \"LinearProgressBar.sizes.XXS\": \"xxs\",\n  \"LinearProgressBar.sizes.XS\": \"xs\",\n  \"LinearProgressBar.sizes.SMALL\": \"small\",\n  \"LinearProgressBar.sizes.MEDIUM\": \"medium\",\n  \"LinearProgressBar.sizes.LARGE\": \"large\",\n  \"IconButton.sizes.XXS\": \"xxs\",\n  \"IconButton.sizes.XS\": \"xs\",\n  \"IconButton.sizes.SMALL\": \"small\",\n  \"IconButton.sizes.MEDIUM\": \"medium\",\n  \"IconButton.sizes.LARGE\": \"large\",\n  \"IconButton.colors.PRIMARY\": \"primary\",\n  \"IconButton.colors.POSITIVE\": \"positive\",\n  \"IconButton.colors.NEGATIVE\": \"negative\",\n  \"IconButton.colors.INVERTED\": \"inverted\",\n  \"IconButton.colors.ON_PRIMARY_COLOR\": \"on-primary-color\",\n  \"IconButton.colors.ON_INVERTED_BACKGROUND\": \"on-inverted-background\",\n  \"IconButton.colors.BRAND\": \"brand\",\n  \"IconButton.colors.FIXED_LIGHT\": \"fixed-light\",\n  \"IconButton.kinds.PRIMARY\": \"primary\",\n  \"IconButton.kinds.SECONDARY\": \"secondary\",\n  \"IconButton.kinds.TERTIARY\": \"tertiary\",\n  \"Text.types.TEXT1\": \"text1\",\n  \"Text.types.TEXT2\": \"text2\",\n  \"Text.types.TEXT3\": \"text3\",\n  \"Text.weights.BOLD\": \"bold\",\n  \"Text.weights.MEDIUM\": \"medium\",\n  \"Text.weights.NORMAL\": \"normal\",\n  \"Text.colors.PRIMARY\": \"primary\",\n  \"Text.colors.SECONDARY\": \"secondary\",\n  \"Text.colors.ON_PRIMARY\": \"onPrimary\",\n  \"Text.colors.ON_INVERTED\": \"onInverted\",\n  \"Text.colors.FIXED_LIGHT\": \"fixedLight\",\n  \"Text.colors.FIXED_DARK\": \"fixedDark\",\n  \"Text.colors.INHERIT\": \"inherit\",\n  \"Text.align.START\": \"start\",\n  \"Text.align.CENTER\": \"center\",\n  \"Text.align.END\": \"end\",\n  \"Counter.sizes.SMALL\": \"small\",\n  \"Counter.sizes.LARGE\": \"large\",\n  \"Counter.colors.PRIMARY\": \"primary\",\n  \"Counter.colors.DARK\": \"dark\",\n  \"Counter.colors.NEGATIVE\": \"negative\",\n  \"Counter.colors.LIGHT\": \"light\",\n  \"Counter.kinds.FILL\": \"fill\",\n  \"Counter.kinds.LINE\": \"line\",\n  \"Icon.type.SVG\": \"svg\",\n  \"Icon.type.ICON_FONT\": \"font\",\n  \"Icon.type.SRC\": \"src\",\n  \"ListItemAvatar.components.DIV\": \"div\",\n  \"ListItemAvatar.components.LI\": \"li\",\n  \"ListItemAvatar.components.A\": \"a\",\n  \"Modal.width.DEFAULT\": \"default\",\n  \"Modal.width.FULL_WIDTH\": \"full-width\",\n  \"Flex.justify.START\": \"start\",\n  \"Flex.justify.CENTER\": \"center\",\n  \"Flex.justify.END\": \"end\",\n  \"Flex.justify.STRETCH\": \"stretch\",\n  \"Flex.justify.SPACE_AROUND\": \"space-around\",\n  \"Flex.justify.SPACE_BETWEEN\": \"space-between\",\n  \"Flex.justify.INITIAL\": \"initial\",\n  \"Flex.align.START\": \"start\",\n  \"Flex.align.CENTER\": \"center\",\n  \"Flex.align.END\": \"end\",\n  \"Flex.align.STRETCH\": \"stretch\",\n  \"Flex.align.BASELINE\": \"baseline\",\n  \"Flex.align.INITIAL\": \"initial\",\n  \"Flex.gaps.XS\": \"xs\",\n  \"Flex.gaps.SMALL\": \"small\",\n  \"Flex.gaps.MEDIUM\": \"medium\",\n  \"Flex.gaps.LARGE\": \"large\",\n  \"Flex.directions.ROW\": \"row\",\n  \"Flex.directions.COLUMN\": \"column\"\n}\n"
  },
  {
    "path": "packages/codemod/transformations/core/v3-to-v4/enums-migration.ts",
    "content": "import { TransformationContext } from \"../../../types\";\nimport { getCoreImportsForFile, getPropValue, setPropValue, wrap } from \"../../../src/utils\";\nimport enumToStringMapping from \"./enums/enumMappings.json\";\nimport { NEW_CORE_IMPORT_PATH } from \"../../../src/consts\";\n\nconst enumToString: Record<string, string> = enumToStringMapping;\n\n/**\n * Replace enums with string equivalent\n */\nfunction transform({ j, root }: TransformationContext) {\n  // Since it runs after the imports are updated need to get the new import path\n  const coreImports = getCoreImportsForFile(root, NEW_CORE_IMPORT_PATH);\n\n  const importedComponents = coreImports\n    .find(j.ImportSpecifier)\n    .nodes()\n    .map(importSpecifier => {\n      if (importSpecifier.local && importSpecifier.local.name) {\n        return importSpecifier.local.name;\n      }\n      return null;\n    })\n    .filter(Boolean);\n\n  const allElements = root.find(j.JSXElement).nodes();\n\n  const elements = allElements.filter(path => {\n    const openingElement = path.openingElement;\n    const elementName = openingElement.name.type === \"JSXIdentifier\" ? openingElement.name.name : null;\n    return elementName && importedComponents.includes(elementName);\n  });\n\n  if (!elements.length) return;\n  elements.forEach(elementPath => {\n    const props = j(elementPath).find(j.JSXOpeningElement).find(j.JSXAttribute);\n    props.forEach(prop => {\n      const propValue = getPropValue(j, prop.node) as string;\n      if (enumToString[propValue]) {\n        setPropValue(j, prop, {\n          value: enumToString[propValue],\n          type: \"Literal\"\n        });\n      }\n    });\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v3-to-v4/next-imports-migration.ts",
    "content": "import { NEW_CORE_IMPORT_PATH } from \"../../../src/consts\";\nimport { wrap, renameImportPath, getImports } from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\n\n// Components that remain in @vibe/core/next and should NOT be moved\nconst NEXT_ONLY_COMPONENTS = [\"List\"];\n\n/**\n * Changes imports from '@vibe/core/next' to '@vibe/core'\n * In v4, AttentionBox, Dropdown, DatePicker, Dialog, and Modal\n * have been promoted from @vibe/core/next to @vibe/core.\n * List remains in @vibe/core/next and is left unchanged.\n */\nfunction transform({ j, root }: TransformationContext) {\n  const nextImports = getImports(root, `${NEW_CORE_IMPORT_PATH}/next`);\n\n  nextImports.forEach(importPath => {\n    const specifiers = importPath.node.specifiers;\n    if (!specifiers || specifiers.length === 0) {\n      // Bare import (import \"@vibe/core/next\") — move it\n      renameImportPath(importPath, NEW_CORE_IMPORT_PATH);\n      return;\n    }\n\n    // Split specifiers into promoted (move to @vibe/core) and remaining (stay in /next)\n    const promoted = specifiers.filter(s => {\n      if (s.type === \"ImportSpecifier\" && s.imported.type === \"Identifier\") {\n        return !NEXT_ONLY_COMPONENTS.includes(s.imported.name);\n      }\n      return true;\n    });\n    const remaining = specifiers.filter(s => !promoted.includes(s));\n\n    if (remaining.length === 0) {\n      // All specifiers are promoted — just rename the path\n      renameImportPath(importPath, NEW_CORE_IMPORT_PATH);\n    } else if (promoted.length === 0) {\n      // All specifiers stay in /next — do nothing\n    } else {\n      // Mixed: split into two import declarations\n      importPath.node.specifiers = remaining;\n      const newImport = j.importDeclaration(promoted, j.literal(NEW_CORE_IMPORT_PATH));\n      j(importPath).insertBefore(newImport);\n    }\n  });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/transformations/core/v3-to-v4/packages-rename-migration.ts",
    "content": "import { wrap, renameImportPath } from \"../../../src/utils\";\nimport { TransformationContext } from \"../../../types\";\nimport { ImportDeclaration } from \"jscodeshift\";\n\nconst OLD_STYLE_IMPORT_PATH = \"monday-ui-style\";\nconst NEW_STYLE_IMPORT_PATH = \"@vibe/style\";\n\n/**\n * Changes imports from 'monday-ui-style' (and subpaths) to '@vibe/style'\n */\nfunction transform({ root }: TransformationContext) {\n  root\n    .find(ImportDeclaration)\n    .filter(path => {\n      const source = path.node.source.value as string;\n      return source === OLD_STYLE_IMPORT_PATH || source.startsWith(`${OLD_STYLE_IMPORT_PATH}/`);\n    })\n    .forEach(importPath => {\n      const currentPath = importPath.node.source.value as string;\n      const newPath = currentPath.replace(OLD_STYLE_IMPORT_PATH, NEW_STYLE_IMPORT_PATH);\n      renameImportPath(importPath, newPath);\n    });\n}\n\nexport default wrap(transform);\n"
  },
  {
    "path": "packages/codemod/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"rootDir\": \".\",\n    \"target\": \"ES6\",\n    \"module\": \"commonjs\",\n    \"lib\": [\"ES6\"],\n    \"outDir\": \"dist\",\n    \"strict\": true,\n    \"resolveJsonModule\": true,\n    \"esModuleInterop\": true,\n    \"moduleResolution\": \"node\",\n    \"noImplicitAny\": true,\n    \"declaration\": true,\n    \"sourceMap\": false,\n    \"types\": [\"node\", \"jscodeshift\"],\n    \"skipLibCheck\": true\n  },\n  \"include\": [\"src/**/*\", \"transformations/**/*\", \"types/**/*\", \"bin/**/*\"],\n  \"exclude\": [\"node_modules\", \"dist\", \"**/*.test.ts\"]\n}\n"
  },
  {
    "path": "packages/codemod/tsconfig.test.json",
    "content": "{\n  \"extends\": \"./tsconfig.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"./dist-test\",\n    \"noEmit\": false,\n    \"types\": [\"vitest/globals\"]\n  },\n  \"include\": [\"vitest.config.ts\", \"test/**/setup.ts\", \"**/*.test.ts\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/codemod/types/index.ts",
    "content": "export * from \"./transformation-context.types\";\n"
  },
  {
    "path": "packages/codemod/types/transformation-context.types.ts",
    "content": "import { Core, JSCodeshift } from \"jscodeshift\";\n\nexport type TransformationContext = {\n  j: JSCodeshift;\n  root: ReturnType<Core>;\n  filePath: string;\n};\n"
  },
  {
    "path": "packages/codemod/vitest.config.ts",
    "content": "import { defineConfig } from \"vitest/config\";\n\nexport default defineConfig({\n  test: {\n    globals: true,\n    environment: \"node\",\n    setupFiles: [\"test/setup.ts\"],\n    include: [\"**/__tests__/**/*.test.ts\"],\n    clearMocks: true,\n    typecheck: {\n      enabled: true\n    },\n    onConsoleLog(log) {\n      if (log.includes(\"Component uses both\")) return false;\n    }\n  }\n});\n"
  },
  {
    "path": "packages/components/button/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [4.0.1](https://github.com/mondaycom/vibe/compare/@vibe/button@4.0.0...@vibe/button@4.0.1) (2026-04-16)\n\n**Note:** Version bump only for package @vibe/button\n\n\n\n\n\n## [3.0.16](https://github.com/mondaycom/vibe/compare/@vibe/button@3.0.15...@vibe/button@3.0.16) (2026-01-18)\n\n**Note:** Version bump only for package @vibe/button\n\n\n\n\n\n## [3.0.15](https://github.com/mondaycom/vibe/compare/@vibe/button@3.0.14...@vibe/button@3.0.15) (2026-01-04)\n\n**Note:** Version bump only for package @vibe/button\n\n\n\n\n\n## [3.0.14](https://github.com/mondaycom/vibe/compare/@vibe/button@3.0.13...@vibe/button@3.0.14) (2026-01-04)\n\n**Note:** Version bump only for package @vibe/button\n\n\n\n\n\n## [3.0.13](https://github.com/mondaycom/vibe/compare/@vibe/button@3.0.12...@vibe/button@3.0.13) (2025-12-28)\n\n\n### Bug Fixes\n\n* **Button:** update tabIndex handling to support disabled buttons with tooltips ([#3213](https://github.com/mondaycom/vibe/issues/3213)) ([8e7e914](https://github.com/mondaycom/vibe/commit/8e7e91436ff2e8ef10f522265d248ccbf0dce3eb))\n\n\n\n\n\n## [3.0.12](https://github.com/mondaycom/vibe/compare/@vibe/button@3.0.11...@vibe/button@3.0.12) (2025-12-25)\n\n**Note:** Version bump only for package @vibe/button\n\n\n\n\n\n## [3.0.11](https://github.com/mondaycom/vibe/compare/@vibe/button@3.0.10...@vibe/button@3.0.11) (2025-12-22)\n\n**Note:** Version bump only for package @vibe/button\n\n\n\n\n\n## [3.0.10](https://github.com/mondaycom/vibe/compare/@vibe/button@3.0.9...@vibe/button@3.0.10) (2025-12-17)\n\n**Note:** Version bump only for package @vibe/button\n\n\n\n\n\n## [3.0.9](https://github.com/mondaycom/vibe/compare/@vibe/button@3.0.8...@vibe/button@3.0.9) (2025-12-17)\n\n**Note:** Version bump only for package @vibe/button\n\n\n\n\n\n## [3.0.8](https://github.com/mondaycom/vibe/compare/@vibe/button@3.0.7...@vibe/button@3.0.8) (2025-11-26)\n\n**Note:** Version bump only for package @vibe/button\n\n\n\n\n\n## [3.0.7](https://github.com/mondaycom/vibe/compare/@vibe/button@3.0.6...@vibe/button@3.0.7) (2025-11-25)\n\n**Note:** Version bump only for package @vibe/button\n\n\n\n\n\n## [3.0.6](https://github.com/mondaycom/vibe/compare/@vibe/button@3.0.5...@vibe/button@3.0.6) (2025-11-19)\n\n**Note:** Version bump only for package @vibe/button\n\n\n\n\n\n## [3.0.5](https://github.com/mondaycom/vibe/compare/@vibe/button@3.0.4...@vibe/button@3.0.5) (2025-11-06)\n\n**Note:** Version bump only for package @vibe/button\n\n\n\n\n\n## [3.0.4](https://github.com/mondaycom/vibe/compare/@vibe/button@3.0.3...@vibe/button@3.0.4) (2025-10-30)\n\n**Note:** Version bump only for package @vibe/button\n\n\n\n\n\n## [3.0.3](https://github.com/mondaycom/vibe/compare/@vibe/button@3.0.2...@vibe/button@3.0.3) (2025-10-26)\n\n**Note:** Version bump only for package @vibe/button\n\n\n\n\n\n## [3.0.2](https://github.com/mondaycom/vibe/compare/@vibe/button@3.0.1...@vibe/button@3.0.2) (2025-10-26)\n\n\n### Bug Fixes\n\n* remove unneeded dev dependencies ([#3157](https://github.com/mondaycom/vibe/issues/3157)) ([eec1792](https://github.com/mondaycom/vibe/commit/eec17924422cb0478bb713290919d80a516cd436))\n\n\n\n\n\n## 3.0.1 (2025-10-25)\n\n**Note:** Version bump only for package @vibe/button\n"
  },
  {
    "path": "packages/components/button/package.json",
    "content": "{\n  \"name\": \"@vibe/button\",\n  \"version\": \"4.0.1\",\n  \"description\": \"Vibe sub-package for button components\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/mondaycom/vibe.git\",\n    \"directory\": \"packages/components/button\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/mondaycom/vibe/issues\"\n  },\n  \"homepage\": \"https://github.com/mondaycom/vibe#readme\",\n  \"author\": \"monday.com\",\n  \"license\": \"MIT\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.js\",\n  \"types\": \"dist/index.d.ts\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \".\": {\n      \"types\": \"./dist/index.d.ts\",\n      \"import\": \"./dist/index.js\",\n      \"default\": \"./dist/index.js\"\n    },\n    \"./mockedClassNames\": {\n      \"import\": \"./dist/mocked_classnames/index.js\",\n      \"default\": \"./dist/mocked_classnames/index.js\"\n    }\n  },\n  \"scripts\": {\n    \"build\": \"rollup -c && yarn build:mocked-classnames\",\n    \"build:mocked-classnames\": \"[ \\\"$SKIP_RELEASE_ARTIFACTS\\\" = \\\"true\\\" ] || mock_classnames=on rollup -c\",\n    \"test\": \"vitest run\",\n    \"lint\": \"eslint \\\"./src/**/*.{js,jsx,ts,tsx}\\\"\"\n  },\n  \"dependencies\": {\n    \"@vibe/icon\": \"4.0.1\",\n    \"@vibe/loader\": \"4.0.1\",\n    \"@vibe/shared\": \"4.0.1\",\n    \"@vibe/style\": \"4.0.0\",\n    \"classnames\": \"^2.5.1\",\n    \"es-toolkit\": \"^1.39.10\"\n  },\n  \"devDependencies\": {\n    \"@testing-library/react\": \"^12.1.2\",\n    \"@vibe/config\": \"4.0.0\",\n    \"@vibe/icons\": \"4.0.0\",\n    \"react\": \"^16.13.0\",\n    \"react-dom\": \"^16.13.0\",\n    \"react-test-renderer\": \"16\",\n    \"typescript\": \"^5.9.3\",\n    \"vitest\": \"^1.6.0\"\n  },\n  \"peerDependencies\": {\n    \"react\": \">=16.9.0\",\n    \"react-dom\": \">=16.9.0\"\n  },\n  \"sideEffects\": [\n    \"*.scss\",\n    \"*.css\",\n    \"*.scss.js\",\n    \"*.css.js\"\n  ],\n  \"eslintConfig\": {\n    \"extends\": [\n      \"../../../node_modules/@vibe/config/.eslintrc.cjs\"\n    ]\n  }\n}\n"
  },
  {
    "path": "packages/components/button/rollup.config.mjs",
    "content": "import config from \"@vibe/config/rollup.config\";\n\nexport default config;\n"
  },
  {
    "path": "packages/components/button/src/Button/Button.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n$disabled-on-primary-color-opacity: 0.5;\n\n.button {\n  --loader-padding: 8px;\n  outline: none;\n  border: none;\n  height: auto;\n  border-radius: var(--border-radius-small);\n  cursor: pointer;\n  white-space: nowrap;\n  transition: var(--motion-productive-short) transform,\n    var(--motion-productive-medium) var(--motion-timing-transition) min-width;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  @include focus-style();\n  /* Prevent text selection */\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  min-width: auto;\n\n  .loader {\n    height: 100%;\n\n    .loaderSvg {\n      position: static;\n      height: 100%;\n      margin: 0;\n    }\n  }\n\n  .textPlaceholder {\n    display: inline-block;\n    opacity: 0;\n    height: 0;\n    visibility: hidden;\n    white-space: pre;\n  }\n\n  &.success {\n    display: inline-flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n\n    .successContent {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    }\n  }\n}\n\n.marginRight {\n  margin-inline-end: var(--space-8);\n}\n\n.marginLeft {\n  margin-inline-start: var(--space-8);\n}\n\n.rightFlat {\n  border-start-end-radius: 0;\n  border-end-end-radius: 0;\n}\n\n.leftFlat {\n  border-start-start-radius: 0;\n  border-end-start-radius: 0;\n}\n\n.button:active:not(.preventClickAnimation) {\n  transform: scale(0.95) translate3d(0, 0, 0);\n}\n\n.button .leftIcon {\n  margin-inline-end: var(--space-8);\n}\n\n.button .rightIcon {\n  margin-inline-start: var(--space-8);\n}\n\n.sizeXxs {\n  @include smoothing-text;\n  @include vibe-text(text2, normal);\n  padding: 2px var(--space-4);\n  height: 16px;\n  line-height: 16px;\n}\n\n.sizeXs {\n  @include smoothing-text;\n  @include vibe-text(text2, normal);\n  padding: var(--space-4) var(--space-8);\n  height: 24px;\n  line-height: 21px;\n}\n\n.sizeSmall {\n  @include smoothing-text;\n  @include vibe-text(text2, normal);\n  padding: var(--space-4) var(--space-8);\n  height: 32px;\n  line-height: 24px;\n}\n\n.sizeSmall .loader {\n  top: 7px;\n}\n\n.sizeMedium {\n  @include smoothing-text;\n  @include vibe-text(text1, normal);\n  padding: var(--space-8) var(--space-16);\n  height: 40px;\n}\n\n.sizeLarge {\n  @include smoothing-text;\n  @include vibe-text(text1, normal);\n  padding: 12px var(--space-24);\n  height: 48px;\n}\n\n.kindPrimary {\n  color: var(--text-color-on-primary);\n}\n\n.kindPrimary.colorPrimary {\n  background: var(--primary-color);\n}\n\n.kindPrimary.colorBrand {\n  background: var(--brand-color);\n  color: var(--text-color-on-brand);\n}\n\n.kindPrimary.colorPrimaryActive,\n.kindPrimary.colorPrimary:hover,\n.kindPrimary.colorPrimary:focus {\n  background: var(--primary-hover-color);\n}\n\n.kindPrimary.colorBrandActive,\n.kindPrimary.colorBrand:hover,\n.kindPrimary.colorBrand:focus {\n  background: var(--brand-hover-color);\n}\n\n.kindPrimary.colorPositive {\n  background: var(--positive-color);\n}\n\n.kindPrimary.colorPositiveActive,\n.kindPrimary.colorPositive:hover,\n.kindPrimary.colorPositive:focus {\n  background: var(--positive-color-hover);\n}\n\n.kindPrimary.colorNegative {\n  background: var(--negative-color);\n}\n\n.kindPrimary.colorNegativeActive,\n.kindPrimary.colorNegative:hover,\n.kindPrimary.colorNegative:focus {\n  background: var(--negative-color-hover);\n}\n\n.kindPrimary.colorInverted {\n  background: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n\n.kindPrimary.colorInvertedActive,\n.kindPrimary.colorInverted:hover,\n.kindPrimary.colorInverted:focus {\n  background: var(--placeholder-color);\n}\n\n.kindPrimary.button.colorInverted.disabled {\n  background: var(--disabled-text-color);\n  color: var(--disabled-background-color);\n}\n\n.kindPrimary.colorOnPrimaryColor {\n  background: var(--text-color-on-primary);\n}\n\n.kindPrimary.colorOnPrimaryColorActive,\n.kindPrimary.colorOnPrimaryColor:hover,\n.kindPrimary.colorOnPrimaryColor:focus {\n  background-color: #e6e9ef;\n  backdrop-filter: brightness(85%);\n  @include focus-style-on-primary();\n}\n\n.kindPrimary.colorOnPrimaryColor.disabled {\n  opacity: $disabled-on-primary-color-opacity;\n  color: var(--text-color-on-primary);\n}\n\n.kindPrimary.colorFixedLight {\n  background: var(--fixed-light-color);\n}\n\n.kindPrimary.colorFixedLightActive,\n.kindPrimary.colorFixedLight:hover,\n.kindPrimary.colorFixedLight:focus {\n  background-color: #e6e9ef;\n  backdrop-filter: brightness(85%);\n  @include focus-style-on-primary();\n}\n\n.kindPrimary.colorFixedLight.disabled {\n  opacity: $disabled-on-primary-color-opacity;\n  color: var(--fixed-light-color);\n}\n\n.kindPrimary.colorFixedDark {\n  background: var(--fixed-dark-color);\n  color: var(--fixed-light-color);\n}\n\n.kindPrimary.colorFixedDarkActive,\n.kindPrimary.colorFixedDark:hover,\n.kindPrimary.colorFixedDark:focus {\n  filter: brightness(125%);\n  @include focus-style-on-primary();\n}\n\n.kindPrimary.colorFixedDark.disabled {\n  opacity: $disabled-on-primary-color-opacity;\n  color: var(--fixed-dark-color);\n}\n\n.kindPrimary.colorOnInvertedBackground {\n  background: var(--primary-background-color);\n  color: var(--primary-text-color);\n}\n\n.kindPrimary.colorOnInvertedBackgroundActive,\n.kindPrimary.colorOnInvertedBackground:hover,\n.kindPrimary.colorOnInvertedBackground:focus {\n  background: var(--ui-background-color);\n}\n\n.kindPrimary.button.colorOnInvertedBackground.disabled {\n  background: var(--ui-background-color);\n  color: var(--primary-text-color);\n  opacity: $disabled-on-primary-color-opacity;\n}\n\n.kindPrimary.button.disabled {\n  background: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.kindSecondary {\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n\n.kindSecondary.sizeSmall {\n  line-height: 22px;\n}\n\n.kindSecondary.sizeMedium {\n  line-height: 22px;\n}\n\n.kindSecondary.sizeLarge {\n  line-height: 22px;\n}\n\n.kindSecondary.colorPrimaryActive {\n  background-color: var(--primary-selected-color);\n  border-color: var(--primary-color);\n}\n\n.kindSecondary.colorPrimaryActive:hover {\n  background-color: var(--primary-selected-hover-color);\n  border-color: var(--primary-color);\n}\n\n.kindSecondary.colorBrandActive {\n  color: var(--text-color-on-brand);\n}\n\n.kindSecondary.colorBrandActive,\n.kindSecondary.colorBrandActive:hover {\n  background-color: var(--brand-selected-color);\n  border-color: var(--brand-color);\n}\n\n.kindSecondary.colorPrimary:hover:not(.colorPrimaryActive),\n.kindSecondary.colorPrimary:focus:not(.colorPrimaryActive) {\n  background: var(--primary-background-hover-color);\n}\n\n.kindSecondary.colorBrand:hover:not(.colorBrandActive),\n.kindSecondary.colorBrand:focus:not(.colorBrandActive) {\n  background: var(--primary-background-hover-color);\n}\n\n.kindSecondary.colorPositive {\n  color: var(--positive-color);\n  border-color: var(--positive-color);\n}\n\n.kindSecondary.colorPositiveActive,\n.kindSecondary.colorPositive:hover,\n.kindSecondary.colorPositive:focus {\n  background: var(--positive-color-selected);\n}\n\n.kindSecondary.colorNegative {\n  color: var(--negative-color);\n  border-color: var(--negative-color);\n}\n\n.kindSecondary.colorNegativeActive,\n.kindSecondary.colorNegative:hover,\n.kindSecondary.colorNegative:focus {\n  background: var(--negative-color-selected);\n}\n\n.kindSecondary.colorInverted {\n  color: var(--primary-text-color);\n  border-color: var(--primary-text-color);\n}\n\n.kindSecondary.colorInvertedActive,\n.kindSecondary.colorInverted:hover,\n.kindSecondary.colorInverted:focus {\n  background: var(--primary-background-hover-color);\n}\n\n.kindSecondary.colorInverted.disabled {\n  border-color: var(--disabled-text-color);\n  color: var(--disabled-text-color);\n}\n\n.kindSecondary.colorOnPrimaryColor {\n  color: var(--text-color-on-primary);\n  border-color: var(--text-color-on-primary);\n}\n\n.kindSecondary.colorOnPrimaryColorActive,\n.kindSecondary.colorOnPrimaryColor:hover,\n.kindSecondary.colorOnPrimaryColor:focus {\n  backdrop-filter: brightness(85%);\n  @include focus-style-on-primary();\n}\n\n.kindSecondary.colorOnPrimaryColor.disabled {\n  opacity: $disabled-on-primary-color-opacity;\n  color: var(--text-color-on-primary);\n}\n\n.kindSecondary.colorFixedLight {\n  border-color: var(--fixed-light-color);\n  color: var(--fixed-light-color);\n}\n\n.kindSecondary.colorFixedLightActive,\n.kindSecondary.colorFixedLight:hover,\n.kindSecondary.colorFixedLight:focus {\n  backdrop-filter: brightness(85%);\n  @include focus-style-on-primary();\n}\n\n.kindSecondary.colorFixedDark {\n  border-color: var(--fixed-dark-color);\n  color: var(--fixed-dark-color);\n}\n\n.kindSecondary.colorFixedDarkActive,\n.kindSecondary.colorFixedDark:hover,\n.kindSecondary.colorFixedDark:focus {\n  background-color: var(--primary-background-hover-color);\n  @include focus-style-on-primary();\n}\n\n.kindSecondary.colorOnInvertedBackground {\n  border-color: var(--text-color-on-inverted);\n  color: var(--text-color-on-inverted);\n}\n\n.kindSecondary.colorOnInvertedBackgroundActive,\n.kindSecondary.colorOnInvertedBackground:hover,\n.kindSecondary.colorOnInvertedBackground:focus {\n  background: var(--icon-color);\n}\n\n.kindSecondary.colorOnInvertedBackground.disabled {\n  border-color: var(--text-color-on-inverted);\n  color: var(--text-color-on-inverted);\n  opacity: $disabled-on-primary-color-opacity;\n}\n\n.kindSecondary.colorFixedLight.disabled {\n  opacity: $disabled-on-primary-color-opacity;\n  color: var(--fixed-light-color);\n}\n\n.kindSecondary.colorFixedDark.disabled {\n  opacity: $disabled-on-primary-color-opacity;\n  color: var(--fixed-dark-color);\n}\n\n.kindSecondary.disabled {\n  border-color: var(--disabled-text-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.kindSecondary.disabled:hover {\n  background-color: transparent;\n}\n\n.kindTertiary {\n  color: var(--primary-text-color);\n  background-color: transparent;\n}\n\n.kindTertiary.colorPrimaryActive {\n  background-color: var(--primary-selected-color);\n}\n\n.kindTertiary.colorPrimaryActive:hover {\n  background-color: var(--primary-selected-hover-color);\n}\n\n.kindTertiary.colorBrandActive {\n  color: var(--text-color-on-brand);\n}\n\n.kindTertiary.colorBrandActive,\n.kindTertiary.colorBrandActive:hover {\n  background-color: var(--brand-selected-color);\n}\n\n.kindTertiary.colorPrimary:hover:not(.colorPrimaryActive),\n.kindTertiary.colorPrimary:focus:not(.colorPrimaryActive) {\n  background: var(--primary-background-hover-color);\n}\n\n.kindTertiary.colorBrand:hover:not(.colorBrandActive),\n.kindTertiary.colorBrand:focus:not(.colorBrandActive) {\n  background: var(--primary-background-hover-color);\n}\n\n.kindTertiary.colorPositive {\n  color: var(--positive-color);\n}\n\n.kindTertiary.colorPositiveActive,\n.kindTertiary.colorPositive:hover,\n.kindTertiary.colorPositive:focus {\n  background: var(--positive-color-selected);\n}\n\n.kindTertiary.colorNegative {\n  color: var(--negative-color);\n}\n\n.kindTertiary.colorNegativeActive,\n.kindTertiary.colorNegative:hover,\n.kindTertiary.colorNegative:focus {\n  background: var(--negative-color-selected);\n}\n\n.kindTertiary.colorInverted {\n  color: var(--primary-text-color);\n}\n\n.kindTertiary.colorInvertedActive,\n.kindTertiary.colorInverted:hover,\n.kindTertiary.colorInverted:focus {\n  background: var(--primary-background-hover-color);\n}\n\n.kindTertiary.colorInverted.disabled {\n  color: var(--disabled-text-color);\n}\n\n.kindTertiary.colorOnPrimaryColor {\n  color: var(--text-color-on-primary);\n}\n\n.kindTertiary.colorOnPrimaryColorActive,\n.kindTertiary.colorOnPrimaryColor:hover,\n.kindTertiary.colorOnPrimaryColor:focus {\n  backdrop-filter: brightness(85%);\n  @include focus-style-on-primary();\n}\n\n.kindTertiary.colorOnPrimaryColor.disabled {\n  opacity: $disabled-on-primary-color-opacity;\n  color: var(--text-color-on-primary);\n}\n\n.kindTertiary.colorFixedLight {\n  color: var(--fixed-light-color);\n}\n\n.kindTertiary.colorFixedLightActive,\n.kindTertiary.colorFixedLight:hover,\n.kindTertiary.colorFixedLight:focus {\n  backdrop-filter: brightness(85%);\n  @include focus-style-on-primary();\n}\n\n.kindTertiary.colorFixedLight.disabled {\n  opacity: $disabled-on-primary-color-opacity;\n  color: var(--fixed-light-color);\n}\n\n.kindTertiary.colorFixedDark {\n  color: var(--fixed-dark-color);\n}\n\n.kindTertiary.colorFixedDarkActive,\n.kindTertiary.colorFixedDark:hover,\n.kindTertiary.colorFixedDark:focus {\n  background-color: var(--primary-background-hover-color);\n  @include focus-style-on-primary();\n}\n\n.kindTertiary.colorFixedDark.disabled {\n  opacity: $disabled-on-primary-color-opacity;\n  color: var(--fixed-dark-color);\n}\n\n.kindTertiary.colorOnInvertedBackground {\n  color: var(--text-color-on-inverted);\n}\n\n.kindTertiary.colorOnInvertedBackgroundActive,\n.kindTertiary.colorOnInvertedBackground:hover,\n.kindTertiary.colorOnInvertedBackground:focus {\n  background: var(--icon-color);\n}\n\n.kindTertiary.colorOnInvertedBackground.disabled {\n  background: var(--icon-color);\n  opacity: $disabled-on-primary-color-opacity;\n  color: var(--text-color-on-inverted);\n}\n\n.kindTertiary.disabled {\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.kindTertiary.disabled:hover {\n  background-color: transparent;\n}\n\n.noSidePadding {\n  padding-inline: 0;\n}\n\n.button.insetFocusStyle {\n  @include focus-style-inset();\n}\n"
  },
  {
    "path": "packages/components/button/src/Button/Button.tsx",
    "content": "/* eslint-disable react/button-has-type */\nimport React, { type AriaAttributes, forwardRef, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { camelCase } from \"es-toolkit\";\nimport cx from \"classnames\";\nimport { useMergeRef, NOOP } from \"@vibe/shared\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { Loader } from \"@vibe/loader\";\nimport { type ButtonColor, type ButtonInputType, type ButtonType, type ButtonSize } from \"./Button.types\";\nimport { getParentBackgroundColorNotTransparent, TRANSPARENT_COLOR } from \"./helper/dom-helpers\";\nimport { getTestId, type VibeComponentProps, ComponentDefaultTestId, ComponentVibeId } from \"@vibe/shared\";\nimport { getStyle } from \"@vibe/shared\";\nimport styles from \"./Button.module.scss\";\nimport { useButtonLoading } from \"./helper/useButtonLoading\";\n\nexport interface ButtonProps extends VibeComponentProps {\n  children: React.ReactNode;\n  /** Custom class names to pass to the component */\n  className?: string;\n  activeButtonClassName?: string;\n  /** The button's kind */\n  kind?: ButtonType;\n  /** Callback function to run when the button is clicked */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onMouseDown?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Blur on button click */\n  blurOnMouseUp?: boolean;\n  /** Name of the button - for form submit usages  */\n  name?: string;\n  /** The button's size */\n  size?: ButtonSize;\n  /** The button's color */\n  color?: ButtonColor;\n  /** The button's type */\n  type?: ButtonInputType;\n  /** Whether the button should be disabled or not */\n  disabled?: boolean;\n  /** Icon to place on the right */\n  rightIcon?: SubIcon;\n  /** Icon to place on the left */\n  leftIcon?: SubIcon;\n  /** the success props are used when you have async action and wants to display a success message */\n  success?: boolean;\n  /** Success icon name */\n  successIcon?: SubIcon;\n  /** Success text */\n  successText?: string;\n  /** loading boolean which switches the text to a loader */\n  loading?: boolean;\n  /** className which is applied to loader container **/\n  loaderClassName?: string;\n  style?: React.CSSProperties;\n  /** displays the active state */\n  active?: boolean;\n  /** id to pass to the button */\n  id?: string;\n  /** adds 8px margin to the right */\n  marginRight?: boolean;\n  /** adds 8px margin to the left */\n  marginLeft?: boolean;\n  /** element id to describe the button accordingly */\n  \"aria-labelledby\"?: string;\n  /** aria label to provide important when providing only Icon */\n  \"aria-label\"?: string;\n  /** aria for a button popup */\n  \"aria-haspopup\"?: React.HTMLProps<HTMLButtonElement>[\"aria-haspopup\"];\n  /** aria to be set if the popup is open */\n  \"aria-expanded\"?: boolean;\n  /** aria controls - receives id for the controlled region */\n  \"aria-controls\"?: string;\n  \"aria-describedby\"?: AriaAttributes[\"aria-describedby\"];\n  /**\n   * aria to be used for screen reader to know if the button is hidden\n   */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n  /**\n   * Indicates the current \"pressed\" state of toggle buttons\n   */\n  \"aria-pressed\"?: AriaAttributes[\"aria-pressed\"];\n  /** On Button Focus callback */\n  onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n  /** On Button Blur callback */\n  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n  rightFlat?: boolean;\n  leftFlat?: boolean;\n  preventClickAnimation?: boolean;\n  noSidePadding?: boolean;\n  /** default color for text color in ON_PRIMARY_COLOR kind (should be any type of css color (rbg, var, hex...) */\n  defaultTextColorOnPrimaryColor?: string;\n  \"data-testid\"?: string;\n  /** Change the focus indicator from around the button to within it */\n  insetFocus?: boolean;\n  /** Specifies the tab order of an element */\n  tabIndex?: number;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      children,\n      kind = \"primary\",\n      onClick = NOOP,\n      name,\n      size = \"medium\",\n      color = \"primary\",\n      disabled = false,\n      rightIcon = null,\n      leftIcon = null,\n      success = false,\n      successText = \"\",\n      successIcon = null,\n      style,\n      loading: isLoading = false,\n      loaderClassName,\n      active = false,\n      activeButtonClassName,\n      id,\n      marginRight = false,\n      marginLeft = false,\n      type = \"button\",\n      onMouseDown = NOOP,\n      \"aria-label\": ariaLabel,\n      rightFlat = false,\n      leftFlat = false,\n      preventClickAnimation = false,\n      noSidePadding = false,\n      onFocus = NOOP,\n      onBlur = NOOP,\n      \"aria-labelledby\": ariaLabelledBy,\n      defaultTextColorOnPrimaryColor = TRANSPARENT_COLOR,\n      \"aria-expanded\": ariaExpanded,\n      \"aria-haspopup\": ariaHasPopup,\n      \"aria-controls\": ariaControls,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-hidden\": ariaHidden,\n      \"aria-pressed\": ariaPressed,\n      blurOnMouseUp = true,\n      \"data-testid\": dataTestId,\n      insetFocus = false,\n      tabIndex\n    }: ButtonProps,\n    ref\n  ) => {\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const mergedRef = useMergeRef(ref, buttonRef);\n\n    const { loading } = useButtonLoading({ isLoading });\n\n    useEffect(() => {\n      if (color !== \"on-primary-color\" && color !== \"fixed-light\") return;\n      if (kind !== \"primary\") return;\n      if (!buttonRef.current) return;\n\n      const buttonElement = buttonRef.current;\n      buttonElement.style.color = getParentBackgroundColorNotTransparent(buttonElement, defaultTextColorOnPrimaryColor);\n    }, [kind, buttonRef, color, defaultTextColorOnPrimaryColor]);\n\n    const onMouseUp = useCallback(() => {\n      const button = buttonRef.current;\n      if (disabled || !button) {\n        return;\n      }\n      if (blurOnMouseUp) {\n        button.blur();\n      }\n    }, [disabled, buttonRef, blurOnMouseUp]);\n\n    const onButtonClicked = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n        if (disabled || loading || success) {\n          event.preventDefault();\n          return;\n        }\n\n        if (onClick) {\n          onClick(event);\n        }\n      },\n      [onClick, disabled, loading, success]\n    );\n\n    const onMouseDownClicked = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n        if (disabled || loading || success) {\n          event.preventDefault();\n          return;\n        }\n\n        if (onMouseDown) {\n          onMouseDown(event);\n        }\n      },\n      [onMouseDown, disabled, loading, success]\n    );\n\n    const classNames = useMemo(() => {\n      const calculatedColor = success ? \"positive\" : color;\n      return cx(\n        className,\n        styles.button,\n        getStyle(styles, camelCase(\"size-\" + size)),\n        getStyle(styles, camelCase(\"kind-\" + kind)),\n        getStyle(styles, camelCase(\"color-\" + calculatedColor)),\n        {\n          [styles.success]: success,\n          [getStyle(styles, camelCase(\"color-\" + calculatedColor + \"-active\"))]: active,\n          [activeButtonClassName]: active,\n          [styles.marginRight]: marginRight,\n          [styles.marginLeft]: marginLeft,\n          [styles.rightFlat]: rightFlat,\n          [styles.leftFlat]: leftFlat,\n          [styles.preventClickAnimation]: preventClickAnimation,\n          [styles.noSidePadding]: noSidePadding,\n          [styles.disabled]: disabled,\n          [styles.insetFocusStyle]: insetFocus\n        }\n      );\n    }, [\n      success,\n      color,\n      className,\n      size,\n      kind,\n      active,\n      activeButtonClassName,\n      marginRight,\n      marginLeft,\n      rightFlat,\n      leftFlat,\n      preventClickAnimation,\n      noSidePadding,\n      disabled,\n      insetFocus\n    ]);\n\n    const buttonProps = useMemo(() => {\n      const props: Record<string, unknown> = {\n        ref: mergedRef,\n        type,\n        className: classNames,\n        name,\n        onMouseUp,\n        style,\n        onClick: onButtonClicked,\n        id,\n        onFocus,\n        onBlur,\n        tabIndex: tabIndex ?? (disabled || ariaHidden ? -1 : undefined),\n        \"data-testid\": dataTestId || getTestId(ComponentDefaultTestId.BUTTON, id),\n        \"data-vibe\": ComponentVibeId.BUTTON,\n        onMouseDown: onMouseDownClicked,\n        \"aria-disabled\": disabled,\n        \"aria-busy\": loading,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-label\": ariaLabel,\n        \"aria-haspopup\": ariaHasPopup,\n        \"aria-expanded\": ariaExpanded,\n        \"aria-controls\": ariaControls,\n        \"aria-describedby\": ariaDescribedBy,\n        \"aria-hidden\": ariaHidden,\n        \"aria-pressed\": ariaPressed\n      };\n      return props;\n    }, [\n      mergedRef,\n      type,\n      classNames,\n      name,\n      onMouseUp,\n      style,\n      onButtonClicked,\n      id,\n      onFocus,\n      onBlur,\n      tabIndex,\n      dataTestId,\n      onMouseDownClicked,\n      disabled,\n      loading,\n      ariaLabelledBy,\n      ariaLabel,\n      ariaHasPopup,\n      ariaExpanded,\n      ariaControls,\n      ariaDescribedBy,\n      ariaHidden,\n      ariaPressed\n    ]);\n\n    const iconSize = useCallback(\n      (icon: SubIcon) => {\n        if (typeof icon !== \"function\") return;\n        switch (size) {\n          case \"xxs\":\n          case \"xs\":\n            return 16;\n          default:\n            return 20;\n        }\n      },\n      [size]\n    );\n\n    const hasRenderableChildren = useMemo(() => React.Children.toArray(children).some(Boolean), [children]);\n\n    const buttonContent = useMemo(\n      () => (\n        <>\n          {leftIcon ? (\n            <Icon\n              type=\"font\"\n              icon={leftIcon}\n              size={iconSize(leftIcon)}\n              className={cx({\n                [styles.leftIcon]: hasRenderableChildren\n              })}\n              ignoreFocusStyle\n            />\n          ) : null}\n          {children}\n          {rightIcon ? (\n            <Icon\n              type=\"font\"\n              icon={rightIcon}\n              size={iconSize(rightIcon)}\n              className={cx({\n                [styles.rightIcon]: hasRenderableChildren\n              })}\n              ignoreFocusStyle\n            />\n          ) : null}\n        </>\n      ),\n      [children, hasRenderableChildren, iconSize, leftIcon, rightIcon]\n    );\n\n    if (loading) {\n      return (\n        <button {...buttonProps} key={`${id}-loading`}>\n          <span className={cx(styles.loader, loaderClassName)}>\n            <Loader className={styles.loaderSvg} />\n            <span aria-hidden className={styles.textPlaceholder}>\n              {buttonContent}\n            </span>\n          </span>\n        </button>\n      );\n    }\n\n    if (success) {\n      return (\n        <button {...buttonProps} key={`${id}-success`}>\n          <span className={styles.successContent}>\n            {successIcon ? (\n              <Icon\n                type=\"font\"\n                icon={successIcon}\n                size={iconSize(successIcon)}\n                className={cx({\n                  [styles.leftIcon]: !!successText\n                })}\n                ignoreFocusStyle\n              />\n            ) : null}\n            {successText}\n          </span>\n          <span aria-hidden=\"true\" className={styles.textPlaceholder}>\n            {buttonContent}\n          </span>\n        </button>\n      );\n    }\n\n    return (\n      <button {...buttonProps} key={`${id}-button`}>\n        {buttonContent}\n      </button>\n    );\n  }\n);\n\nexport default Button;\n"
  },
  {
    "path": "packages/components/button/src/Button/Button.types.ts",
    "content": "export type ButtonType = \"primary\" | \"secondary\" | \"tertiary\";\n\nexport type ButtonInputType = \"button\" | \"submit\" | \"reset\";\n\nexport type ButtonColor =\n  | \"primary\"\n  | \"positive\"\n  | \"negative\"\n  | \"inverted\"\n  | \"on-primary-color\"\n  | \"on-inverted-background\"\n  | \"brand\"\n  | \"fixed-light\"\n  | \"fixed-dark\";\n\nexport type ButtonSize = \"xxs\" | \"xs\" | \"small\" | \"medium\" | \"large\";\n"
  },
  {
    "path": "packages/components/button/src/Button/__tests__/Button.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport { noop as NOOP } from \"es-toolkit\";\nimport Button from \"../Button\";\nimport { WhatsNew } from \"@vibe/icons\";\nimport { type ButtonSize, type ButtonColor, type ButtonType } from \"../Button.types\";\n\nconst BUTTON_COLORS: ButtonColor[] = [\n  \"primary\",\n  \"positive\",\n  \"negative\",\n  \"inverted\",\n  \"on-primary-color\",\n  \"on-inverted-background\",\n  \"brand\",\n  \"fixed-light\",\n  \"fixed-dark\"\n];\n\nconst BUTTON_KINDS: ButtonType[] = [\"primary\", \"secondary\", \"tertiary\"];\n\ndescribe(\"Button renders correctly\", () => {\n  it(\"renders correctly with empty props\", () => {\n    const tree = renderer.create(<Button>Button</Button>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with className\", () => {\n    const tree = renderer.create(<Button className=\"test\">Button</Button>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with id\", () => {\n    const tree = renderer.create(<Button id=\"test\">Button</Button>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with callbacks\", () => {\n    const tree = renderer\n      .create(\n        <Button onMouseDown={NOOP} onClick={NOOP} onBlur={NOOP} onFocus={NOOP} className=\"test\">\n          Button\n        </Button>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  ([\"small\", \"medium\", \"large\"] as ButtonSize[]).forEach(size => {\n    it(`renders Button size- ${size}`, () => {\n      const tree = renderer.create(<Button size={size}>Button</Button>).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n  });\n\n  BUTTON_COLORS.forEach(color => {\n    it(`renders Button color- ${color}`, () => {\n      const tree = renderer.create(<Button color={color}>Button</Button>).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n  });\n\n  BUTTON_KINDS.forEach(kind => {\n    it(`renders Button kind- ${kind}`, () => {\n      const tree = renderer.create(<Button kind={kind}>Button</Button>).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n  });\n  it(\"renders correctly with leftIcon\", () => {\n    const tree = renderer.create(<Button leftIcon={WhatsNew}>Button</Button>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with rightIcon\", () => {\n    const tree = renderer.create(<Button rightIcon={WhatsNew}>Button</Button>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with props change ui\", () => {\n    const tree = renderer\n      .create(\n        <Button noSidePadding rightFlat leftFlat marginLeft marginRight active>\n          Button\n        </Button>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  describe(\"a11y\", () => {\n    it(\"renders correctly with a11y props (false)\", () => {\n      const tree = renderer\n        .create(\n          <Button\n            aria-label=\"text\"\n            aria-controls=\"area\"\n            aria-expanded={false}\n            aria-labelledby=\"id\"\n            aria-haspopup={false}\n          >\n            Button\n          </Button>\n        )\n        .toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"renders correctly with a11y props (true)\", () => {\n      const tree = renderer\n        .create(\n          <Button aria-label=\"text\" aria-controls=\"area\" aria-expanded={true} aria-labelledby=\"id\" aria-haspopup={true}>\n            Button\n          </Button>\n        )\n        .toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/components/button/src/Button/__tests__/Button.test.tsx",
    "content": "import { vi, beforeEach, afterEach, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { render, fireEvent, cleanup, waitFor } from \"@testing-library/react\";\nimport Button from \"../Button\";\n\nconst text = \"Click Me!\";\n\ndescribe(\"<Button />\", () => {\n  afterEach(() => {\n    cleanup();\n  });\n\n  describe(\"children\", () => {\n    it(\"should render a single child correctly\", () => {\n      const { getByText } = render(<Button>Renderable Child</Button>);\n      const button = getByText(\"Renderable Child\");\n      expect(button).toBeInTheDocument();\n    });\n\n    it(\"should not render a single child if it is not applicable\", () => {\n      const { container } = render(<Button>{null}</Button>);\n      expect(container.firstChild).toBeEmptyDOMElement();\n    });\n\n    it(\"should render multiple children correctly\", () => {\n      const { getByText } = render(\n        <Button>\n          <span>Child 1</span>\n          <span>Child 2</span>\n        </Button>\n      );\n      expect(getByText(\"Child 1\")).toBeInTheDocument();\n      expect(getByText(\"Child 2\")).toBeInTheDocument();\n    });\n\n    it(\"should not render children if all are non-renderable\", () => {\n      const { container } = render(\n        <Button>\n          {false}\n          {null}\n          {undefined}\n        </Button>\n      );\n      expect(container.firstChild).toBeEmptyDOMElement();\n    });\n\n    it(\"should add leftIcon className when children are renderable\", () => {\n      const { getByTestId } = render(<Button leftIcon=\"icon\">Child</Button>);\n      expect(getByTestId(\"icon\")).toHaveClass(\"leftIcon\");\n    });\n\n    it(\"should not add leftIcon className when children are non-renderable\", () => {\n      const { getByTestId } = render(\n        <Button leftIcon=\"icon\">\n          {false}\n          {null}\n          {undefined}\n        </Button>\n      );\n      expect(getByTestId(\"icon\")).not.toHaveClass(\"leftIcon\");\n    });\n  });\n\n  describe(\"click\", () => {\n    let clickActionStub;\n    let onMouseDownStub;\n    let buttonComponent;\n\n    beforeEach(() => {\n      clickActionStub = vi.fn();\n      onMouseDownStub = vi.fn();\n      buttonComponent = render(\n        <Button onClick={clickActionStub} onMouseDown={onMouseDownStub}>\n          {text}\n        </Button>\n      );\n    });\n\n    it(\"should call the click callback when clicked\", () => {\n      const { getByText } = buttonComponent;\n      fireEvent.click(getByText(text));\n      expect(clickActionStub.mock.calls.length).toEqual(1);\n    });\n\n    describe(\"disabled click\", () => {\n      it(\"should be disabled in the dom\", () => {\n        const { rerender, getByText } = buttonComponent;\n        rerender(\n          <Button onClick={clickActionStub} disabled>\n            {text}\n          </Button>\n        );\n        expect(getByText(text)).toHaveAttribute(\"aria-disabled\", \"true\");\n      });\n\n      it(\"should not call the callback if disabled\", () => {\n        const { rerender, getByText } = buttonComponent;\n        rerender(\n          <Button onClick={clickActionStub} disabled>\n            {text}\n          </Button>\n        );\n        fireEvent.click(getByText(text));\n        expect(clickActionStub.mock.calls.length).toEqual(0);\n      });\n\n      it(\"should not call the callback on loading\", () => {\n        const { rerender, getByRole } = buttonComponent;\n        rerender(\n          <Button onClick={clickActionStub} loading>\n            {text}\n          </Button>\n        );\n        waitFor(() => {\n          fireEvent.click(getByRole(\"alert\"));\n          expect(clickActionStub.mock.calls.length).toEqual(0);\n        });\n      });\n\n      describe(\"Success\", () => {\n        it(\"should not display the successText if not success\", () => {\n          const { rerender, queryByText } = buttonComponent;\n          const successText = \"Done!\";\n          rerender(\n            <Button onClick={clickActionStub} successText={successText}>\n              {text}\n            </Button>\n          );\n          const element = queryByText(successText);\n          expect(element).toEqual(null);\n        });\n\n        it(\"should not call the callback if success\", () => {\n          const { rerender, getByText } = buttonComponent;\n          const successText = \"Done!\";\n          rerender(\n            <Button onClick={clickActionStub} success successText={successText}>\n              {text}\n            </Button>\n          );\n          fireEvent.click(getByText(successText));\n          expect(clickActionStub.mock.calls.length).toEqual(0);\n        });\n      });\n    });\n  });\n\n  it(\"should call on blur\", () => {\n    const onBlur = vi.fn();\n    const { getByText } = render(<Button onBlur={onBlur}>{text}</Button>);\n    const button = getByText(text);\n    fireEvent.blur(button);\n    expect(onBlur.mock.calls.length).toEqual(1);\n  });\n\n  it(\"should call do blur on mouseup\", () => {\n    const onBlur = vi.fn();\n    const { getByText } = render(\n      <Button onBlur={onBlur} blurOnMouseUp={false}>\n        {text}\n      </Button>\n    );\n    const button = getByText(text);\n    fireEvent.focus(button);\n    fireEvent.mouseUp(button);\n    expect(button).not.toHaveFocus();\n  });\n\n  it(\"should call on focus\", () => {\n    const onFocus = vi.fn();\n    const { getByText } = render(<Button onFocus={onFocus}>{text}</Button>);\n    const button = getByText(text);\n    fireEvent.focus(button);\n    expect(onFocus.mock.calls.length).toEqual(1);\n  });\n\n  describe(\"mouse down\", () => {\n    const onClick = vi.fn();\n    it(\"should call the click callback when clicked\", () => {\n      const { getByText } = render(<Button onClick={onClick}>{text}</Button>);\n      fireEvent.mouseDown(getByText(text));\n      expect(onClick).not.toBeCalled();\n    });\n\n    it(\"should call mouse down callback\", () => {\n      const onMouseDown = vi.fn();\n      const { getByText } = render(\n        <Button onClick={onClick} onMouseDown={onMouseDown}>\n          {text}\n        </Button>\n      );\n      fireEvent.mouseDown(getByText(text));\n      expect(onMouseDown.mock.calls.length).toEqual(1);\n    });\n  });\n\n  describe(\"a11y\", () => {\n    it(\"Aria label should be connected to the button\", () => {\n      const ariaLabel = \"Icon Name\";\n      const onClick = vi.fn();\n      const { getByLabelText } = render(\n        <Button aria-label={ariaLabel} onClick={onClick}>\n          {text}\n        </Button>\n      );\n      const buttonElement = getByLabelText(ariaLabel);\n      fireEvent.click(buttonElement);\n      expect(onClick.mock.calls.length).toEqual(1);\n    });\n\n    it(\"should apply aria-hidden attribute to button\", () => {\n      const { getByRole } = render(<Button aria-hidden>{text}</Button>);\n      const buttonElement = getByRole(\"button\", { hidden: true });\n      expect(buttonElement).toHaveAttribute(\"aria-hidden\", \"true\");\n    });\n\n    it(\"should not apply aria-hidden attribute to button\", () => {\n      const { getByRole } = render(<Button>{text}</Button>);\n      const buttonElement = getByRole(\"button\");\n      expect(buttonElement).not.toHaveAttribute(\"aria-hidden\");\n    });\n  });\n});\n"
  },
  {
    "path": "packages/components/button/src/Button/__tests__/__snapshots__/Button.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`Button renders correctly > a11y > renders correctly with a11y props (false) 1`] = `\n<button\n  aria-busy={false}\n  aria-controls=\"area\"\n  aria-disabled={false}\n  aria-expanded={false}\n  aria-haspopup={false}\n  aria-label=\"text\"\n  aria-labelledby=\"id\"\n  className=\"button sizeMedium kindPrimary colorPrimary\"\n  data-testid=\"button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  type=\"button\"\n>\n  Button\n</button>\n`;\n\nexports[`Button renders correctly > a11y > renders correctly with a11y props (true) 1`] = `\n<button\n  aria-busy={false}\n  aria-controls=\"area\"\n  aria-disabled={false}\n  aria-expanded={true}\n  aria-haspopup={true}\n  aria-label=\"text\"\n  aria-labelledby=\"id\"\n  className=\"button sizeMedium kindPrimary colorPrimary\"\n  data-testid=\"button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  type=\"button\"\n>\n  Button\n</button>\n`;\n\nexports[`Button renders correctly > renders Button color- brand 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"button sizeMedium kindPrimary colorBrand\"\n  data-testid=\"button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  type=\"button\"\n>\n  Button\n</button>\n`;\n\nexports[`Button renders correctly > renders Button color- fixed-dark 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"button sizeMedium kindPrimary colorFixedDark\"\n  data-testid=\"button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  type=\"button\"\n>\n  Button\n</button>\n`;\n\nexports[`Button renders correctly > renders Button color- fixed-light 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"button sizeMedium kindPrimary colorFixedLight\"\n  data-testid=\"button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  type=\"button\"\n>\n  Button\n</button>\n`;\n\nexports[`Button renders correctly > renders Button color- inverted 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"button sizeMedium kindPrimary colorInverted\"\n  data-testid=\"button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  type=\"button\"\n>\n  Button\n</button>\n`;\n\nexports[`Button renders correctly > renders Button color- negative 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"button sizeMedium kindPrimary colorNegative\"\n  data-testid=\"button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  type=\"button\"\n>\n  Button\n</button>\n`;\n\nexports[`Button renders correctly > renders Button color- on-inverted-background 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"button sizeMedium kindPrimary colorOnInvertedBackground\"\n  data-testid=\"button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  type=\"button\"\n>\n  Button\n</button>\n`;\n\nexports[`Button renders correctly > renders Button color- on-primary-color 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"button sizeMedium kindPrimary colorOnPrimaryColor\"\n  data-testid=\"button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  type=\"button\"\n>\n  Button\n</button>\n`;\n\nexports[`Button renders correctly > renders Button color- positive 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"button sizeMedium kindPrimary colorPositive\"\n  data-testid=\"button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  type=\"button\"\n>\n  Button\n</button>\n`;\n\nexports[`Button renders correctly > renders Button color- primary 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"button sizeMedium kindPrimary colorPrimary\"\n  data-testid=\"button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  type=\"button\"\n>\n  Button\n</button>\n`;\n\nexports[`Button renders correctly > renders Button kind- primary 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"button sizeMedium kindPrimary colorPrimary\"\n  data-testid=\"button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  type=\"button\"\n>\n  Button\n</button>\n`;\n\nexports[`Button renders correctly > renders Button kind- secondary 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"button sizeMedium kindSecondary colorPrimary\"\n  data-testid=\"button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  type=\"button\"\n>\n  Button\n</button>\n`;\n\nexports[`Button renders correctly > renders Button kind- tertiary 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"button sizeMedium kindTertiary colorPrimary\"\n  data-testid=\"button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  type=\"button\"\n>\n  Button\n</button>\n`;\n\nexports[`Button renders correctly > renders Button size- large 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"button sizeLarge kindPrimary colorPrimary\"\n  data-testid=\"button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  type=\"button\"\n>\n  Button\n</button>\n`;\n\nexports[`Button renders correctly > renders Button size- medium 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"button sizeMedium kindPrimary colorPrimary\"\n  data-testid=\"button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  type=\"button\"\n>\n  Button\n</button>\n`;\n\nexports[`Button renders correctly > renders Button size- small 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"button sizeSmall kindPrimary colorPrimary\"\n  data-testid=\"button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  type=\"button\"\n>\n  Button\n</button>\n`;\n\nexports[`Button renders correctly > renders correctly with callbacks 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"test button sizeMedium kindPrimary colorPrimary\"\n  data-testid=\"button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  type=\"button\"\n>\n  Button\n</button>\n`;\n\nexports[`Button renders correctly > renders correctly with className 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"test button sizeMedium kindPrimary colorPrimary\"\n  data-testid=\"button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  type=\"button\"\n>\n  Button\n</button>\n`;\n\nexports[`Button renders correctly > renders correctly with empty props 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"button sizeMedium kindPrimary colorPrimary\"\n  data-testid=\"button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  type=\"button\"\n>\n  Button\n</button>\n`;\n\nexports[`Button renders correctly > renders correctly with id 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"button sizeMedium kindPrimary colorPrimary\"\n  data-testid=\"button_test\"\n  data-vibe=\"Button\"\n  id=\"test\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  type=\"button\"\n>\n  Button\n</button>\n`;\n\nexports[`Button renders correctly > renders correctly with leftIcon 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"button sizeMedium kindPrimary colorPrimary\"\n  data-testid=\"button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  type=\"button\"\n>\n  <svg\n    aria-hidden={true}\n    className=\"icon leftIcon noFocusStyle\"\n    data-testid=\"icon\"\n    data-vibe=\"Icon\"\n    fill=\"currentColor\"\n    height=\"20\"\n    viewBox=\"0 0 20 20\"\n    width=\"20\"\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M10.778 2.657c.972-.928 2.576-.86 3.544-.027a2.482 2.482 0 0 1 .78 2.59h1.039c.966 0 1.75.783 1.75 1.75v1.677a1.75 1.75 0 0 1-1.75 1.75h-.124V16a1.75 1.75 0 0 1-1.75 1.75H5.7A1.75 1.75 0 0 1 3.951 16v-5.603h-.12a1.75 1.75 0 0 1-1.75-1.75V6.97c0-.967.783-1.75 1.75-1.75h.911a2.483 2.483 0 0 1 .78-2.586c.97-.833 2.573-.9 3.546.027.381.365.65.782.848 1.09l.005.008.009-.013c.197-.307.466-.725.848-1.089Zm2.566 1.11c-.449-.386-1.176-.363-1.53-.025-.25.238-.431.519-.646.852l-.038.059c-.102.158-.231.359-.396.549h2.325l.042.002c.29.016.488-.14.57-.435a.983.983 0 0 0-.327-1.002Zm-6.843.004c.45-.386 1.177-.363 1.531-.024.25.237.43.518.646.851l.037.06c.102.157.232.358.396.548H6.786l-.042.002c-.29.016-.488-.139-.57-.435a.983.983 0 0 1 .327-1.002Zm2.733 5.126H3.83a.25.25 0 0 1-.25-.25V6.97a.25.25 0 0 1 .25-.25h5.404v2.177Zm1.502 0V6.72h5.405a.25.25 0 0 1 .25.25v1.677a.25.25 0 0 1-.25.25h-5.405ZM5.451 16v-5.603h3.781v5.853h-3.53a.25.25 0 0 1-.25-.25Zm5.284.25v-5.853h3.782V16a.25.25 0 0 1-.25.25h-3.532Z\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n  Button\n</button>\n`;\n\nexports[`Button renders correctly > renders correctly with props change ui 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"button sizeMedium kindPrimary colorPrimary colorPrimaryActive undefined marginRight marginLeft rightFlat leftFlat noSidePadding\"\n  data-testid=\"button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  type=\"button\"\n>\n  Button\n</button>\n`;\n\nexports[`Button renders correctly > renders correctly with rightIcon 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"button sizeMedium kindPrimary colorPrimary\"\n  data-testid=\"button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  type=\"button\"\n>\n  Button\n  <svg\n    aria-hidden={true}\n    className=\"icon rightIcon noFocusStyle\"\n    data-testid=\"icon\"\n    data-vibe=\"Icon\"\n    fill=\"currentColor\"\n    height=\"20\"\n    viewBox=\"0 0 20 20\"\n    width=\"20\"\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M10.778 2.657c.972-.928 2.576-.86 3.544-.027a2.482 2.482 0 0 1 .78 2.59h1.039c.966 0 1.75.783 1.75 1.75v1.677a1.75 1.75 0 0 1-1.75 1.75h-.124V16a1.75 1.75 0 0 1-1.75 1.75H5.7A1.75 1.75 0 0 1 3.951 16v-5.603h-.12a1.75 1.75 0 0 1-1.75-1.75V6.97c0-.967.783-1.75 1.75-1.75h.911a2.483 2.483 0 0 1 .78-2.586c.97-.833 2.573-.9 3.546.027.381.365.65.782.848 1.09l.005.008.009-.013c.197-.307.466-.725.848-1.089Zm2.566 1.11c-.449-.386-1.176-.363-1.53-.025-.25.238-.431.519-.646.852l-.038.059c-.102.158-.231.359-.396.549h2.325l.042.002c.29.016.488-.14.57-.435a.983.983 0 0 0-.327-1.002Zm-6.843.004c.45-.386 1.177-.363 1.531-.024.25.237.43.518.646.851l.037.06c.102.157.232.358.396.548H6.786l-.042.002c-.29.016-.488-.139-.57-.435a.983.983 0 0 1 .327-1.002Zm2.733 5.126H3.83a.25.25 0 0 1-.25-.25V6.97a.25.25 0 0 1 .25-.25h5.404v2.177Zm1.502 0V6.72h5.405a.25.25 0 0 1 .25.25v1.677a.25.25 0 0 1-.25.25h-5.405ZM5.451 16v-5.603h3.781v5.853h-3.53a.25.25 0 0 1-.25-.25Zm5.284.25v-5.853h3.782V16a.25.25 0 0 1-.25.25h-3.532Z\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n</button>\n`;\n"
  },
  {
    "path": "packages/components/button/src/Button/helper/dom-helpers.ts",
    "content": "export const TRANSPARENT_COLOR = \"rgba(0, 0, 0, 0)\";\n\nexport function getParentBackgroundColorNotTransparent(element: HTMLElement, defaultColor: string): string {\n  const parentElement = element.parentElement;\n  if (element === element.parentElement) {\n    if (!element) {\n      return defaultColor;\n    }\n\n    return window.getComputedStyle(element).backgroundColor;\n  }\n\n  if (!parentElement) {\n    return defaultColor;\n  }\n\n  const backgroundColor = window.getComputedStyle(parentElement).backgroundColor;\n  if (!backgroundColor || backgroundColor === defaultColor) {\n    return getParentBackgroundColorNotTransparent(parentElement, defaultColor);\n  }\n\n  return backgroundColor === TRANSPARENT_COLOR ? defaultColor : backgroundColor;\n}\n"
  },
  {
    "path": "packages/components/button/src/Button/helper/useButtonLoading.ts",
    "content": "import { useEffect, useState } from \"react\";\n\nexport function useButtonLoading({ isLoading }: { isLoading: boolean }): { loading: boolean } {\n  const [loading, setLoading] = useState(isLoading);\n\n  useEffect(() => {\n    const frameId = window.requestAnimationFrame(() => {\n      setLoading(isLoading);\n    });\n    return () => {\n      window.cancelAnimationFrame(frameId);\n    };\n  }, [isLoading]);\n\n  return { loading };\n}\n"
  },
  {
    "path": "packages/components/button/src/Button/index.ts",
    "content": "export { default as Button, type ButtonProps } from \"./Button\";\n\nexport * from \"./Button.types\";\n"
  },
  {
    "path": "packages/components/button/src/index.ts",
    "content": "export * from \"./Button\";\n"
  },
  {
    "path": "packages/components/button/src/types/files.d.ts",
    "content": "// SCSS\ndeclare module \"*.module.scss\" {\n  const classes: { [key: string]: string };\n  export default classes;\n}\n\n// SVG\ndeclare module \"*.svg\" {\n  const content: string;\n  export default content;\n}\n\ndeclare module \"*.png\";\ndeclare module \"*.mp4\";\ndeclare module \"*.pdf\";\n"
  },
  {
    "path": "packages/components/button/tsconfig.json",
    "content": "{\n  \"extends\": \"@vibe/config/tsconfig\",\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"rootDir\": \"src\"\n  },\n  \"include\": [\"src/**/*\"]\n}\n"
  },
  {
    "path": "packages/components/button/vitest.config.mjs",
    "content": "import config from \"@vibe/config/vitest.config\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n  ...config\n});\n"
  },
  {
    "path": "packages/components/button/vitest.setup.mjs",
    "content": "import { vi } from \"vitest\";\nimport \"@testing-library/jest-dom\";\nimport React from \"react\";\n\n// Mock ResizeObserver\nclass ResizeObserver {\n  observe() {}\n  unobserve() {}\n  disconnect() {}\n}\nglobal.ResizeObserver = ResizeObserver;\n\n// Mock react-inlinesvg\nvi.mock(\"react-inlinesvg\", () => ({\n  default: ({ src, ...props }) =>\n    React.createElement(\"div\", {\n      \"data-testid\": \"mock-svg\",\n      \"data-src\": src,\n      ...props\n    })\n}));\n"
  },
  {
    "path": "packages/components/clickable/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [4.0.1](https://github.com/mondaycom/vibe/compare/@vibe/clickable@4.0.0...@vibe/clickable@4.0.1) (2026-04-16)\n\n**Note:** Version bump only for package @vibe/clickable\n\n\n\n\n\n## [3.0.3](https://github.com/mondaycom/vibe/compare/@vibe/clickable@3.0.2...@vibe/clickable@3.0.3) (2026-01-04)\n\n**Note:** Version bump only for package @vibe/clickable\n\n\n\n\n\n## [3.0.2](https://github.com/mondaycom/vibe/compare/@vibe/clickable@3.0.1...@vibe/clickable@3.0.2) (2025-12-17)\n\n**Note:** Version bump only for package @vibe/clickable\n\n\n\n\n\n## 3.0.1 (2025-11-26)\n\n**Note:** Version bump only for package @vibe/clickable\n"
  },
  {
    "path": "packages/components/clickable/package.json",
    "content": "{\n  \"name\": \"@vibe/clickable\",\n  \"version\": \"4.0.1\",\n  \"description\": \"Vibe sub-package for Clickable component\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/mondaycom/vibe.git\",\n    \"directory\": \"packages/components/clickable\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/mondaycom/vibe/issues\"\n  },\n  \"homepage\": \"https://github.com/mondaycom/vibe#readme\",\n  \"author\": \"monday.com\",\n  \"license\": \"MIT\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.js\",\n  \"types\": \"dist/index.d.ts\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \".\": {\n      \"types\": \"./dist/index.d.ts\",\n      \"import\": \"./dist/index.js\",\n      \"default\": \"./dist/index.js\"\n    },\n    \"./mockedClassNames\": {\n      \"import\": \"./dist/mocked_classnames/index.js\",\n      \"default\": \"./dist/mocked_classnames/index.js\"\n    }\n  },\n  \"scripts\": {\n    \"build\": \"rollup -c && yarn build:mocked-classnames\",\n    \"build:mocked-classnames\": \"[ \\\"$SKIP_RELEASE_ARTIFACTS\\\" = \\\"true\\\" ] || mock_classnames=on rollup -c\",\n    \"test\": \"vitest run\",\n    \"lint\": \"eslint \\\"./src/**/*.{js,jsx,ts,tsx}\\\"\"\n  },\n  \"dependencies\": {\n    \"@vibe/shared\": \"4.0.1\",\n    \"@vibe/style\": \"4.0.0\",\n    \"classnames\": \"^2.5.1\",\n    \"es-toolkit\": \"^1.39.10\"\n  },\n  \"devDependencies\": {\n    \"@testing-library/react\": \"^12.1.2\",\n    \"@testing-library/user-event\": \"^13.5.0\",\n    \"@vibe/config\": \"4.0.0\",\n    \"react\": \"^16.13.0\",\n    \"react-dom\": \"^16.13.0\",\n    \"react-test-renderer\": \"16\",\n    \"typescript\": \"^5.9.3\",\n    \"vitest\": \"^1.6.0\"\n  },\n  \"peerDependencies\": {\n    \"react\": \">=16.9.0\",\n    \"react-dom\": \">=16.9.0\"\n  },\n  \"sideEffects\": [\n    \"*.scss\",\n    \"*.css\",\n    \"*.scss.js\",\n    \"*.css.js\"\n  ],\n  \"eslintConfig\": {\n    \"extends\": [\n      \"../../../node_modules/@vibe/config/.eslintrc.cjs\"\n    ]\n  }\n}\n"
  },
  {
    "path": "packages/components/clickable/rollup.config.mjs",
    "content": "import config from \"@vibe/config/rollup.config\";\n\nexport default config;\n"
  },
  {
    "path": "packages/components/clickable/src/Clickable/Clickable.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins/typography\";\n@import \"~@vibe/style/dist/mixins/states\";\n\n.clickable {\n  @include clickable;\n}\n\n.clickable.disabled {\n  @include clickable-disabled;\n}\n\n.disableTextSelection {\n  @include clickable-disable-text-selection;\n}\n"
  },
  {
    "path": "packages/components/clickable/src/Clickable/Clickable.tsx",
    "content": "import cx from \"classnames\";\nimport React, { type AriaRole, forwardRef } from \"react\";\nimport { noop as NOOP } from \"es-toolkit\";\nimport { type VibeComponentProps } from \"@vibe/shared\";\nimport useClickableProps from \"../useClickableProps/useClickableProps\";\nimport styles from \"./Clickable.module.scss\";\n\nexport interface ClickableProps extends VibeComponentProps {\n  /**\n   * The HTML element or custom component used as the root.\n   */\n  elementType?: keyof JSX.IntrinsicElements | string;\n  /**\n   * The content inside the clickable element.\n   */\n  children?: React.ReactNode;\n  /**\n   * The ARIA role of the element.\n   */\n  role?: AriaRole;\n  /**\n   * Callback fired when the element is clicked.\n   */\n  onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;\n  /**\n   * If true, allows text selection inside the element.\n   */\n  enableTextSelection?: boolean;\n  /**\n   * Callback fired when the mouse button is pressed down on the element.\n   */\n  onMouseDown?: (event: React.MouseEvent) => void;\n  /**\n   * Callback fired when the mouse enters the element.\n   */\n  onMouseEnter?: (event: React.MouseEvent) => void;\n  /**\n   * Callback fired when the mouse leaves the element.\n   */\n  onMouseLeave?: (event: React.MouseEvent) => void;\n  /**\n   * The label of the element for accessibility.\n   */\n  \"aria-label\"?: string;\n  /**\n   * If true, hides the element from assistive technologies.\n   */\n  \"aria-hidden\"?: boolean;\n  /**\n   * Indicates the presence of a popup associated with the element.\n   */\n  \"aria-haspopup\"?: boolean;\n  /**\n   * If true, indicates that the associated popup is open.\n   */\n  \"aria-expanded\"?: boolean;\n  /**\n   * The tab order of the element.\n   */\n  tabIndex?: number;\n  /**\n   * If true, the element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Inline styles applied to the element.\n   */\n  style?: React.CSSProperties;\n}\n\nconst Clickable = forwardRef(\n  (\n    {\n      elementType = \"div\",\n      className = \"\",\n      id,\n      children,\n      role = \"button\",\n      onClick = NOOP,\n      enableTextSelection = false,\n      onMouseDown = NOOP,\n      onMouseEnter = NOOP,\n      onMouseLeave = NOOP,\n      \"aria-label\": ariaLabel,\n      \"aria-hidden\": ariaHidden,\n      \"aria-haspopup\": ariaHasPopup,\n      \"aria-expanded\": ariaExpanded,\n      tabIndex = 0,\n      disabled = false,\n      style,\n      \"data-testid\": dataTestId\n    }: ClickableProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const clickableProps = useClickableProps(\n      {\n        onClick,\n        onMouseDown,\n        onMouseEnter,\n        onMouseLeave,\n        disabled,\n        id,\n        \"data-testid\": dataTestId,\n        role,\n        tabIndex,\n        \"aria-label\": ariaLabel,\n        \"aria-hidden\": ariaHidden,\n        \"aria-haspopup\": ariaHasPopup,\n        \"aria-expanded\": ariaExpanded\n      },\n      ref\n    );\n    const overrideClassName = cx(styles.clickable, className, {\n      [styles.disabled]: disabled,\n      [styles.disableTextSelection]: !enableTextSelection\n    });\n\n    return React.createElement(\n      elementType,\n      {\n        ...clickableProps,\n        className: overrideClassName,\n        style: style\n      },\n      children\n    );\n  }\n);\n\nexport default Clickable;\n"
  },
  {
    "path": "packages/components/clickable/src/Clickable/ClickableWrapper.tsx",
    "content": "import React, { forwardRef } from \"react\";\nimport Clickable from \"./Clickable\";\nimport { type VibeComponentProps } from \"@vibe/shared\";\nimport { type ClickableProps } from \"./Clickable\";\n\nexport interface ClickableWrapperProps extends VibeComponentProps {\n  /**\n   * The content inside the wrapper.\n   */\n  children: React.ReactNode;\n  /**\n   * If true, wraps the content in a `Clickable` component.\n   */\n  isClickable: boolean;\n  /**\n   * Props passed to the `Clickable` component.\n   */\n  clickableProps: ClickableProps;\n}\n\nconst ClickableWrapper = forwardRef(\n  (\n    { children, isClickable = true, clickableProps = {} }: ClickableWrapperProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    if (!isClickable) {\n      return <>{children}</>;\n    }\n\n    return (\n      <Clickable {...clickableProps} ref={ref}>\n        {children}\n      </Clickable>\n    );\n  }\n);\n\nexport default ClickableWrapper;\n"
  },
  {
    "path": "packages/components/clickable/src/Clickable/__tests__/Clickable.snapshot.test.tsx",
    "content": "import { it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport Clickable from \"../Clickable\";\n\nit(\"renders correctly with empty props\", () => {\n  const tree = renderer.create(<Clickable />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n\nit(\"renders correctly with props\", () => {\n  const tree = renderer\n    .create(\n      <Clickable\n        onClick={() => console.log(\"test\")}\n        className=\"monday-style_tests-class\"\n        role=\"banner\"\n        enableTextSelection\n      >\n        Children text\n      </Clickable>\n    )\n    .toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "packages/components/clickable/src/Clickable/__tests__/Clickable.test.tsx",
    "content": "import { vi, afterEach, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { cleanup, fireEvent, render } from \"@testing-library/react\";\nimport Clickable, { type ClickableProps } from \"../Clickable\";\nimport userEvent from \"@testing-library/user-event\";\nimport { getTestId, ComponentDefaultTestId } from \"@vibe/shared\";\n\nconst renderComponent = (props: ClickableProps) => {\n  return render(<Clickable {...props} />);\n};\n\ndescribe(\"Clickable tests\", () => {\n  const defaultTestId = getTestId(ComponentDefaultTestId.CLICKABLE);\n  afterEach(() => {\n    cleanup();\n  });\n\n  it(\"should call the onClick callback when clicked\", () => {\n    const onClick = vi.fn();\n    const { getByTestId } = renderComponent({ onClick });\n    const component = getByTestId(defaultTestId);\n    fireEvent.click(component);\n    expect(onClick.mock.calls.length).toBe(1);\n  });\n\n  it(\"should call the onClick callback when focused and enter pressed\", () => {\n    const onClick = vi.fn();\n    const { getByTestId } = renderComponent({ onClick });\n    const component = getByTestId(defaultTestId);\n    component.focus();\n    userEvent.keyboard(\"{enter}\");\n    expect(onClick.mock.calls.length).toBe(1);\n  });\n\n  it(\"should call the onClick callback when focused and space pressed\", () => {\n    const onClick = vi.fn();\n    const { getByTestId } = renderComponent({ onClick });\n    const component = getByTestId(defaultTestId);\n    component.focus();\n    userEvent.keyboard(\"{space}\");\n    expect(onClick.mock.calls.length).toBe(1);\n  });\n\n  describe(\"a11y\", () => {\n    it(\"should add the label\", () => {\n      const ariaLabel = \"Lable Name\";\n      const { getByLabelText } = renderComponent({ \"aria-label\": ariaLabel });\n      const element = getByLabelText(ariaLabel);\n      expect(element).toBeTruthy();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/components/clickable/src/Clickable/__tests__/__snapshots__/Clickable.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`renders correctly with empty props 1`] = `\n<div\n  className=\"clickable disableTextSelection\"\n  data-testid=\"clickable\"\n  onClick={[Function]}\n  onKeyDown={[Function]}\n  onMouseDown={[Function]}\n  onMouseEnter={[Function]}\n  onMouseLeave={[Function]}\n  role=\"button\"\n  tabIndex={0}\n/>\n`;\n\nexports[`renders correctly with props 1`] = `\n<div\n  className=\"clickable monday-style_tests-class\"\n  data-testid=\"clickable\"\n  onClick={[Function]}\n  onKeyDown={[Function]}\n  onMouseDown={[Function]}\n  onMouseEnter={[Function]}\n  onMouseLeave={[Function]}\n  role=\"banner\"\n  tabIndex={0}\n>\n  Children text\n</div>\n`;\n"
  },
  {
    "path": "packages/components/clickable/src/Clickable/index.ts",
    "content": "export { default as Clickable, type ClickableProps } from \"./Clickable\";\nexport { default as ClickableWrapper, type ClickableWrapperProps } from \"./ClickableWrapper\";\n"
  },
  {
    "path": "packages/components/clickable/src/index.ts",
    "content": "export * from \"./Clickable\";\nexport { default as useClickableProps } from \"./useClickableProps/useClickableProps\";\n"
  },
  {
    "path": "packages/components/clickable/src/types/files.d.ts",
    "content": "// SCSS\ndeclare module \"*.module.scss\" {\n  const classes: { [key: string]: string };\n  export default classes;\n}\n\n// SVG\ndeclare module \"*.svg\" {\n  const content: string;\n  export default content;\n}\n\ndeclare module \"*.png\";\ndeclare module \"*.mp4\";\ndeclare module \"*.pdf\";\n"
  },
  {
    "path": "packages/components/clickable/src/useClickableProps/useClickableProps.ts",
    "content": "import type React from \"react\";\nimport { useRef } from \"react\";\nimport { getTestId, useMergeRef, NOOP, ComponentDefaultTestId, useKeyboardButtonPressedFunc } from \"@vibe/shared\";\nimport { type ClickableProps } from \"../Clickable/Clickable\";\n\n/**\n * Return props for adding clickable functionality to the element except for the styles and classNames\n */\nexport default function useClickableProps(\n  {\n    onClick = NOOP,\n    onMouseDown = NOOP,\n    onMouseEnter = NOOP,\n    onMouseLeave = NOOP,\n    disabled = false,\n    id,\n    \"data-testid\": dataTestId,\n    role = \"button\",\n    tabIndex = 0,\n    \"aria-label\": ariaLabel,\n    \"aria-hidden\": ariaHidden,\n    \"aria-haspopup\": ariaHasPopup,\n    \"aria-expanded\": ariaExpanded\n  }: ClickableProps,\n  ref: React.ForwardedRef<HTMLElement>\n) {\n  const onKeyDown = useKeyboardButtonPressedFunc(onClick);\n  const componentRef = useRef<HTMLElement | null>(null);\n  const mergedRef = useMergeRef(ref, componentRef);\n  return {\n    ref: mergedRef,\n    id,\n    \"data-testid\": dataTestId || getTestId(ComponentDefaultTestId.CLICKABLE, id),\n    onClick: disabled ? undefined : onClick,\n    onKeyDown: disabled ? undefined : onKeyDown,\n    onMouseDown,\n    onMouseEnter,\n    onMouseLeave,\n    tabIndex: disabled ? -1 : tabIndex,\n    role,\n    \"aria-label\": ariaLabel,\n    \"aria-hidden\": ariaHidden,\n    \"aria-haspopup\": ariaHasPopup,\n    \"aria-expanded\": ariaExpanded\n  };\n}\n"
  },
  {
    "path": "packages/components/clickable/tsconfig.json",
    "content": "{\n  \"extends\": \"@vibe/config/tsconfig\",\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"rootDir\": \"src\"\n  },\n  \"include\": [\"src/**/*\"]\n}\n"
  },
  {
    "path": "packages/components/clickable/vitest.config.mjs",
    "content": "import config from \"@vibe/config/vitest.config\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n  ...config\n});\n"
  },
  {
    "path": "packages/components/clickable/vitest.setup.mjs",
    "content": "import { vi } from \"vitest\";\nimport \"@testing-library/jest-dom\";\nimport React from \"react\";\n\n// Mock ResizeObserver\nclass ResizeObserver {\n  observe() {}\n  unobserve() {}\n  disconnect() {}\n}\nglobal.ResizeObserver = ResizeObserver;\n\n// Mock react-inlinesvg\nvi.mock(\"react-inlinesvg\", () => ({\n  default: ({ src, ...props }) =>\n    React.createElement(\"div\", {\n      \"data-testid\": \"mock-svg\",\n      \"data-src\": src,\n      ...props\n    })\n}));\n"
  },
  {
    "path": "packages/components/dialog/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [4.0.1](https://github.com/mondaycom/vibe/compare/@vibe/dialog@4.0.0...@vibe/dialog@4.0.1) (2026-04-16)\n\n**Note:** Version bump only for package @vibe/dialog\n\n\n\n\n\n## [3.0.12](https://github.com/mondaycom/vibe/compare/@vibe/dialog@3.0.11...@vibe/dialog@3.0.12) (2026-02-27)\n\n**Note:** Version bump only for package @vibe/dialog\n\n\n\n\n\n## [3.0.11](https://github.com/mondaycom/vibe/compare/@vibe/dialog@3.0.10...@vibe/dialog@3.0.11) (2026-01-28)\n\n\n### Bug Fixes\n\n* **usePopover:** fix offset when false ([#3243](https://github.com/mondaycom/vibe/issues/3243)) ([f879780](https://github.com/mondaycom/vibe/commit/f8797804acdc7fe573618098931523566a28de89))\n\n\n\n\n\n## [3.0.10](https://github.com/mondaycom/vibe/compare/@vibe/dialog@3.0.9...@vibe/dialog@3.0.10) (2026-01-18)\n\n**Note:** Version bump only for package @vibe/dialog\n\n\n\n\n\n## [3.0.9](https://github.com/mondaycom/vibe/compare/@vibe/dialog@3.0.8...@vibe/dialog@3.0.9) (2026-01-04)\n\n**Note:** Version bump only for package @vibe/dialog\n\n\n\n\n\n## [3.0.8](https://github.com/mondaycom/vibe/compare/@vibe/dialog@3.0.7...@vibe/dialog@3.0.8) (2026-01-04)\n\n**Note:** Version bump only for package @vibe/dialog\n\n\n\n\n\n## [3.0.7](https://github.com/mondaycom/vibe/compare/@vibe/dialog@3.0.6...@vibe/dialog@3.0.7) (2025-12-25)\n\n**Note:** Version bump only for package @vibe/dialog\n\n\n\n\n\n## [3.0.6](https://github.com/mondaycom/vibe/compare/@vibe/dialog@3.0.5...@vibe/dialog@3.0.6) (2025-12-22)\n\n**Note:** Version bump only for package @vibe/dialog\n\n\n\n\n\n## [3.0.5](https://github.com/mondaycom/vibe/compare/@vibe/dialog@3.0.4...@vibe/dialog@3.0.5) (2025-12-17)\n\n**Note:** Version bump only for package @vibe/dialog\n\n\n\n\n\n## [3.0.4](https://github.com/mondaycom/vibe/compare/@vibe/dialog@3.0.3...@vibe/dialog@3.0.4) (2025-12-17)\n\n**Note:** Version bump only for package @vibe/dialog\n\n\n\n\n\n## [3.0.3](https://github.com/mondaycom/vibe/compare/@vibe/dialog@3.0.2...@vibe/dialog@3.0.3) (2025-12-04)\n\n**Note:** Version bump only for package @vibe/dialog\n\n\n\n\n\n## [3.0.2](https://github.com/mondaycom/vibe/compare/@vibe/dialog@3.0.1...@vibe/dialog@3.0.2) (2025-11-26)\n\n**Note:** Version bump only for package @vibe/dialog\n\n\n\n\n\n## 3.0.1 (2025-11-25)\n\n**Note:** Version bump only for package @vibe/dialog\n"
  },
  {
    "path": "packages/components/dialog/package.json",
    "content": "{\n  \"name\": \"@vibe/dialog\",\n  \"version\": \"4.0.1\",\n  \"description\": \"Vibe sub-package for dialog components\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/mondaycom/vibe.git\",\n    \"directory\": \"packages/components/dialog\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/mondaycom/vibe/issues\"\n  },\n  \"homepage\": \"https://github.com/mondaycom/vibe#readme\",\n  \"author\": \"monday.com\",\n  \"license\": \"MIT\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.js\",\n  \"types\": \"dist/index.d.ts\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \".\": {\n      \"types\": \"./dist/index.d.ts\",\n      \"import\": \"./dist/index.js\",\n      \"default\": \"./dist/index.js\"\n    },\n    \"./mockedClassNames\": {\n      \"import\": \"./dist/mocked_classnames/index.js\",\n      \"default\": \"./dist/mocked_classnames/index.js\"\n    }\n  },\n  \"scripts\": {\n    \"build\": \"rollup -c && yarn build:mocked-classnames\",\n    \"build:mocked-classnames\": \"[ \\\"$SKIP_RELEASE_ARTIFACTS\\\" = \\\"true\\\" ] || mock_classnames=on rollup -c\",\n    \"test\": \"vitest run\",\n    \"lint\": \"eslint \\\"./src/**/*.{js,jsx,ts,tsx}\\\"\"\n  },\n  \"dependencies\": {\n    \"@floating-ui/react-dom\": \"^2.1.2\",\n    \"@vibe/hooks\": \"4.0.1\",\n    \"@vibe/layer\": \"4.0.1\",\n    \"@vibe/shared\": \"4.0.1\",\n    \"@vibe/style\": \"4.0.0\",\n    \"classnames\": \"^2.5.1\",\n    \"es-toolkit\": \"^1.39.10\",\n    \"react-transition-group\": \"^4.4.5\"\n  },\n  \"devDependencies\": {\n    \"@testing-library/react\": \"^12.1.2\",\n    \"@testing-library/react-hooks\": \"^7.0.2\",\n    \"@testing-library/user-event\": \"^13.5.0\",\n    \"@types/react-transition-group\": \"^4.4.5\",\n    \"@vibe/config\": \"4.0.0\",\n    \"react\": \"^16.13.0\",\n    \"react-dom\": \"^16.13.0\",\n    \"react-test-renderer\": \"16\",\n    \"typescript\": \"^5.9.3\",\n    \"vitest\": \"^1.6.0\"\n  },\n  \"peerDependencies\": {\n    \"react\": \">=16.9.0\",\n    \"react-dom\": \">=16.9.0\"\n  },\n  \"sideEffects\": [\n    \"*.scss\",\n    \"*.css\",\n    \"*.scss.js\",\n    \"*.css.js\"\n  ],\n  \"eslintConfig\": {\n    \"extends\": [\n      \"../../../node_modules/@vibe/config/.eslintrc.cjs\"\n    ]\n  }\n}\n"
  },
  {
    "path": "packages/components/dialog/rollup.config.mjs",
    "content": "import config from \"@vibe/config/rollup.config\";\n\nexport default config;\n"
  },
  {
    "path": "packages/components/dialog/src/Dialog/Dialog.module.scss",
    "content": "$arrow-size: 12px;\n\n.arrow {\n  width: $arrow-size;\n  height: $arrow-size;\n  position: absolute;\n  border-radius: 2px;\n  background-color: var(--secondary-background-color);\n\n  :global(.dark-app-theme) &,\n  :global(.black-app-theme) &,\n  :global(.hacker-app-theme) & {\n    &[data-placement*=\"right\"] {\n      box-shadow: -1px 1px 0px 0px var(--layout-border-color);\n    }\n    &[data-placement*=\"left\"] {\n      box-shadow: 1px -1px 0px 0px var(--layout-border-color);\n    }\n    &[data-placement*=\"bottom\"] {\n      box-shadow: -1px -1px 0px 0px var(--layout-border-color);\n    }\n    &[data-placement*=\"top\"] {\n      box-shadow: 1px 1px 0px 0px var(--layout-border-color);\n    }\n  }\n}\n\n.arrow[data-placement*=\"bottom\"] {\n  top: 1px;\n}\n\n.arrow[data-placement*=\"top\"] {\n  bottom: 1px;\n}\n\n.arrow[data-placement*=\"left\"] {\n  right: 1px;\n}\n\n.arrow[data-placement*=\"right\"] {\n  left: 1px;\n}\n"
  },
  {
    "path": "packages/components/dialog/src/Dialog/Dialog.tsx",
    "content": "import cx from \"classnames\";\nimport React, { useState, useEffect, useRef, useContext, useCallback, useMemo } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n  useFloating,\n  offset,\n  flip,\n  shift,\n  hide,\n  arrow as arrowMiddleware,\n  autoUpdate,\n  type Placement,\n  type Middleware\n} from \"@floating-ui/react-dom\";\nimport { isFunction } from \"es-toolkit\";\nimport {\n  chainFunctions,\n  chainRefFunctions,\n  convertToArray,\n  NOOP,\n  isInsideClass,\n  ComponentDefaultTestId,\n  getTestId,\n  isClient\n} from \"@vibe/shared\";\nimport DialogContent from \"./components/DialogContent/DialogContent\";\nimport { Refable } from \"./components/Refable/Refable\";\nimport styles from \"./Dialog.module.scss\";\nimport { type DialogTriggerEvent, type DialogEvent, type DialogProps } from \"./Dialog.types\";\nimport { LayerContext, LayerProvider } from \"@vibe/layer\";\n\nfunction Dialog({\n  // Core props\n  id,\n  \"data-testid\": dataTestId,\n  children,\n  content,\n  position = \"top\",\n  moveBy = { main: 0, secondary: 0 },\n  middleware: middlewareProp = [],\n  startingEdge,\n  showDelay = 100,\n  hideDelay = 100,\n  instantShowAndHide = false,\n  getDynamicShowDelay,\n  showTrigger = \"mouseenter\",\n  hideTrigger = \"mouseleave\",\n  showOnDialogEnter = false,\n  showTriggerIgnoreClass,\n  hideTriggerIgnoreClass,\n  addKeyboardHideShowTriggersByDefault = true,\n  shouldShowOnMount = false,\n  disable = false,\n  open = false,\n  isOpen: isOpenProp,\n  useDerivedStateFromProps = false,\n  animationType = \"expand\",\n  preventAnimationOnMount = false,\n  tooltip = false,\n  tooltipClassName,\n  containerSelector,\n  disableContainerScroll,\n  zIndex,\n  wrapperClassName,\n  referenceWrapperClassName,\n  referenceWrapperElement,\n  onBlur: onBlurProp,\n  onKeyDown: onKeyDownProp,\n  onClick: onClickProp,\n  onFocus: onFocusProp,\n  onMouseDown: onMouseDownProp,\n  onMouseEnter: onMouseEnterProp,\n  onMouseLeave: onMouseLeaveProp,\n  onContextMenu: onContextMenuProp,\n  onDialogDidShow = NOOP,\n  onDialogDidHide = NOOP,\n  onClickOutside: onClickOutsideProp = NOOP,\n  onContentClick: onContentClickProp = NOOP,\n  hideWhenReferenceHidden = false,\n  shouldCallbackOnMount = false,\n  observeContentResize = false,\n  enableNestedDialogLayer = true\n}: DialogProps) {\n  const [isOpenState, setIsOpenState] = useState(shouldShowOnMount);\n  const [preventAnimation, setPreventAnimation] = useState(false);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n\n  const showTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const arrowRef = useRef<HTMLDivElement>(null);\n\n  // Check if children are valid React elements (Refable returns null for non-elements)\n  const hasValidChildren = React.Children.toArray(children).some(child => React.isValidElement(child));\n\n  const { layerRef } = useContext(LayerContext);\n\n  // Derived state\n  const isOpenInternal = useDerivedStateFromProps ? isOpenProp : isOpenState;\n  const isShown = isOpenInternal || open;\n\n  // Build middleware array for Floating UI\n  const floatingMiddleware = useMemo<Middleware[]>(() => {\n    const middlewareList: Middleware[] = [];\n\n    // Get user-provided middleware (filter out invalid ones)\n    const validMiddleware = middlewareProp.filter(\n      (m): m is Middleware => m != null && typeof m === \"object\" && typeof m.fn === \"function\"\n    );\n\n    // Check if user provided their own middleware to override defaults\n    const hasCustomOffset = validMiddleware.some(m => m.name === \"offset\");\n    const hasCustomFlip = validMiddleware.some(m => m.name === \"flip\");\n    const hasCustomShift = validMiddleware.some(m => m.name === \"shift\");\n\n    // Offset middleware - skip if user provided their own\n    if (!hasCustomOffset && (moveBy.main !== 0 || moveBy.secondary !== 0)) {\n      middlewareList.push(offset({ mainAxis: moveBy.main || 0, crossAxis: moveBy.secondary || 0 }));\n    }\n\n    // Core positioning middleware - skip if user provided their own\n    if (!hasCustomFlip) {\n      middlewareList.push(flip());\n    }\n    if (!hasCustomShift) {\n      middlewareList.push(shift());\n    }\n\n    // Add user-provided middleware\n    middlewareList.push(...validMiddleware);\n\n    // Arrow middleware - pass ref directly, Floating UI handles null refs\n    if (tooltip) {\n      middlewareList.push(arrowMiddleware({ element: arrowRef }));\n    }\n\n    // Hide middleware for detecting when reference is hidden\n    if (hideWhenReferenceHidden) {\n      middlewareList.push(hide());\n    }\n\n    return middlewareList;\n  }, [moveBy.main, moveBy.secondary, tooltip, hideWhenReferenceHidden, middlewareProp]);\n\n  // Configure autoUpdate for position tracking\n  const whileElementsMounted = useCallback(\n    (reference: HTMLElement, floating: HTMLElement, update: () => void) => {\n      return autoUpdate(reference, floating, update, {\n        elementResize: observeContentResize,\n        layoutShift: false\n      });\n    },\n    [observeContentResize]\n  );\n\n  // Use Floating UI hook\n  const { refs, floatingStyles, placement, middlewareData } = useFloating({\n    placement: position as Placement,\n    middleware: floatingMiddleware,\n    whileElementsMounted,\n    elements: {\n      reference: referenceElement\n    }\n  });\n\n  // Check if reference is hidden (from hide middleware)\n  const isReferenceHidden = middlewareData.hide?.referenceHidden ?? false;\n\n  const isShowTrigger = useCallback(\n    (eventName: DialogTriggerEvent) => {\n      const showTriggersArray = convertToArray(showTrigger);\n      if (addKeyboardHideShowTriggersByDefault && eventName === \"focus\" && showTriggersArray.includes(\"mouseenter\")) {\n        return true;\n      }\n      return showTriggersArray.includes(eventName);\n    },\n    [showTrigger, addKeyboardHideShowTriggersByDefault]\n  );\n\n  const isHideTrigger = useCallback(\n    (eventName: DialogTriggerEvent) => {\n      const hideTriggersArray = convertToArray(hideTrigger);\n      if (addKeyboardHideShowTriggersByDefault && eventName === \"blur\" && hideTriggersArray.includes(\"mouseleave\")) {\n        return true;\n      }\n      return hideTriggersArray.includes(eventName);\n    },\n    [hideTrigger, addKeyboardHideShowTriggersByDefault]\n  );\n\n  const showDialog = useCallback(\n    (event: DialogEvent, eventName: DialogTriggerEvent | string, options: { preventAnimation?: boolean } = {}) => {\n      let finalShowDelay = showDelay;\n      let preventAnimationValue = options.preventAnimation;\n      if (getDynamicShowDelay) {\n        const dynamicDelayObj = getDynamicShowDelay();\n        finalShowDelay = dynamicDelayObj.showDelay || 0;\n        preventAnimationValue = preventAnimationValue ?? dynamicDelayObj.preventAnimation;\n      }\n\n      if (instantShowAndHide) {\n        onDialogDidShow(event, eventName);\n        setIsOpenState(true);\n        setPreventAnimation(!!preventAnimationValue);\n        showTimeoutRef.current = null;\n      } else {\n        showTimeoutRef.current = setTimeout(() => {\n          onDialogDidShow(event, eventName);\n          showTimeoutRef.current = null;\n          setIsOpenState(true);\n          setPreventAnimation(!!preventAnimationValue);\n        }, finalShowDelay);\n      }\n    },\n    [showDelay, getDynamicShowDelay, instantShowAndHide, onDialogDidShow]\n  );\n\n  const hideDialog = useCallback(\n    (event: DialogEvent, eventName: DialogTriggerEvent | string) => {\n      if (instantShowAndHide) {\n        onDialogDidHide(event, eventName);\n        setIsOpenState(false);\n        hideTimeoutRef.current = null;\n      } else {\n        hideTimeoutRef.current = setTimeout(() => {\n          onDialogDidHide(event, eventName);\n          setIsOpenState(false);\n          hideTimeoutRef.current = null;\n        }, hideDelay);\n      }\n    },\n    [hideDelay, instantShowAndHide, onDialogDidHide]\n  );\n\n  const showDialogIfNeeded = useCallback(\n    (event: DialogEvent, eventName: DialogTriggerEvent | string, options = {}) => {\n      if (disable) {\n        return;\n      }\n\n      if (hideTimeoutRef.current) {\n        clearTimeout(hideTimeoutRef.current);\n        hideTimeoutRef.current = null;\n      }\n\n      if (!showTimeoutRef.current) {\n        showDialog(event, eventName, options);\n      }\n    },\n    [disable, showDialog]\n  );\n\n  const hideDialogIfNeeded = useCallback(\n    (event: DialogEvent, eventName: DialogTriggerEvent | string) => {\n      if (showTimeoutRef.current) {\n        clearTimeout(showTimeoutRef.current);\n        showTimeoutRef.current = null;\n      }\n\n      if (!hideTimeoutRef.current) {\n        hideDialog(event, eventName);\n      }\n    },\n    [hideDialog]\n  );\n\n  // Event handling\n  const handleEvent = useCallback(\n    (eventName: DialogTriggerEvent, target: EventTarget | null, event: DialogEvent) => {\n      if (!target) return; // Guard against null targets (e.g., when focus leaves the document)\n      if (isShowTrigger(eventName) && !isShown && !isInsideClass(target as HTMLElement, showTriggerIgnoreClass)) {\n        return showDialogIfNeeded(event, eventName);\n      }\n\n      if (isHideTrigger(eventName) && !isInsideClass(target as HTMLElement, hideTriggerIgnoreClass)) {\n        return hideDialogIfNeeded(event, eventName);\n      }\n    },\n    [\n      isShowTrigger,\n      isHideTrigger,\n      isShown,\n      showTriggerIgnoreClass,\n      hideTriggerIgnoreClass,\n      showDialogIfNeeded,\n      hideDialogIfNeeded\n    ]\n  );\n\n  const getContainer = useCallback(() => {\n    if (containerSelector) {\n      const containerElement = document.querySelector(containerSelector);\n      if (containerElement instanceof Element) {\n        return containerElement;\n      }\n    }\n    return layerRef?.current || document.body;\n  }, [containerSelector, layerRef]);\n\n  // Memoized event handlers to prevent unnecessary re-renders\n  const onMouseEnter = useCallback((e: React.MouseEvent) => handleEvent(\"mouseenter\", e.target, e), [handleEvent]);\n  const onMouseLeave = useCallback((e: React.MouseEvent) => handleEvent(\"mouseleave\", e.target, e), [handleEvent]);\n  const onClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.button) return;\n      handleEvent(\"click\", e.target, e);\n    },\n    [handleEvent]\n  );\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      // Handle element-level keyboard events for triggers\n      if (event.key === \"Enter\") handleEvent(\"enter\", event.target, event);\n      if (event.key === \"Tab\") handleEvent(\"tab\", event.target, event);\n    },\n    [handleEvent]\n  );\n\n  const onMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.button) return;\n      handleEvent(\"mousedown\", e.target, e);\n    },\n    [handleEvent]\n  );\n  const onFocus = useCallback((e: React.FocusEvent) => handleEvent(\"focus\", e.target, e), [handleEvent]);\n  const onBlur = useCallback(\n    (e: React.FocusEvent) => {\n      const target = e.relatedTarget || e.target;\n      handleEvent(\"blur\", target, e);\n    },\n    [handleEvent]\n  );\n  const onEsc = useCallback((e: React.KeyboardEvent) => handleEvent(\"esckey\", e.target, e), [handleEvent]);\n  const onContextMenu = useCallback(\n    (e: React.MouseEvent) => {\n      if ((isShowTrigger(\"contextmenu\") && !isShown) || (isHideTrigger(\"contextmenu\") && isShown)) {\n        e.preventDefault();\n      }\n      handleEvent(\"contextmenu\", e.target, e);\n    },\n    [isShown, isShowTrigger, isHideTrigger, handleEvent]\n  );\n\n  const onClickOutside = useCallback(\n    (event: React.MouseEvent) => {\n      handleEvent(\"clickoutside\", event.target, event);\n      onClickOutsideProp(event);\n    },\n    [handleEvent, onClickOutsideProp]\n  );\n\n  const onDialogEnter = useCallback(\n    (event: React.MouseEvent) => {\n      if (showOnDialogEnter) showDialogIfNeeded(event, \"DialogEnter\");\n    },\n    [showOnDialogEnter, showDialogIfNeeded]\n  );\n\n  const onDialogLeave = useCallback(\n    (event: React.MouseEvent) => {\n      if (showOnDialogEnter) hideDialogIfNeeded(event, \"DialogLeave\");\n    },\n    [showOnDialogEnter, hideDialogIfNeeded]\n  );\n\n  const onContentClick = useCallback(\n    (e: React.MouseEvent) => {\n      handleEvent(\"onContentClick\", e.target, e);\n      onContentClickProp(e);\n    },\n    [handleEvent, onContentClickProp]\n  );\n\n  // Memoized chained event handlers to prevent Refable children re-renders\n  const chainedOnBlur = useMemo(() => chainFunctions([onBlurProp, onBlur], true), [onBlurProp, onBlur]);\n  const chainedOnKeyDown = useMemo(() => chainFunctions([onKeyDownProp, onKeyDown], true), [onKeyDownProp, onKeyDown]);\n  const chainedOnClick = useMemo(() => chainFunctions([onClickProp, onClick], true), [onClickProp, onClick]);\n  const chainedOnFocus = useMemo(() => chainFunctions([onFocusProp, onFocus], true), [onFocusProp, onFocus]);\n  const chainedOnMouseDown = useMemo(\n    () => chainFunctions([onMouseDownProp, onMouseDown], true),\n    [onMouseDownProp, onMouseDown]\n  );\n  const chainedOnMouseEnter = useMemo(\n    () => chainFunctions([onMouseEnterProp, onMouseEnter], true),\n    [onMouseEnterProp, onMouseEnter]\n  );\n  const chainedOnMouseLeave = useMemo(\n    () => chainFunctions([onMouseLeaveProp, onMouseLeave], true),\n    [onMouseLeaveProp, onMouseLeave]\n  );\n  const chainedOnContextMenu = useMemo(\n    () => chainFunctions([onContextMenuProp, onContextMenu], true),\n    [onContextMenuProp, onContextMenu]\n  );\n\n  // Document-level keyboard handler using stable ref pattern\n  // Must handle Escape, Tab, and Enter at document level to match old behavior\n  const closeDialogOnEscapeRef = useRef<(event: KeyboardEvent) => void>();\n  closeDialogOnEscapeRef.current = (event: KeyboardEvent) => {\n    if (!isShown) return;\n\n    switch (event.key) {\n      case \"Escape\":\n        hideDialogIfNeeded(event, \"esckey\");\n        break;\n      case \"Tab\":\n        handleEvent(\"tab\", event.target, event);\n        break;\n      case \"Enter\":\n        handleEvent(\"enter\", event.target, event);\n        break;\n    }\n  };\n\n  // Effects\n\n  // Callback on mount\n  useEffect(() => {\n    if (shouldCallbackOnMount && shouldShowOnMount) {\n      onDialogDidShow();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // Cleanup timeouts on unmount\n  useEffect(() => {\n    return () => {\n      if (showTimeoutRef.current) clearTimeout(showTimeoutRef.current);\n      if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);\n    };\n  }, []);\n\n  // Document keyboard listener (stable reference via ref)\n  useEffect(() => {\n    if (!isClient()) return;\n\n    const handler = (event: KeyboardEvent) => closeDialogOnEscapeRef.current?.(event);\n    document.addEventListener(\"keyup\", handler);\n    return () => document.removeEventListener(\"keyup\", handler);\n  }, []);\n\n  // Handle reference hidden state\n  useEffect(() => {\n    if (hideWhenReferenceHidden && isReferenceHidden && isShown) {\n      const event = new CustomEvent(\"onReferenceHidden\");\n      hideDialog(event, \"onReferenceHidden\");\n    }\n  }, [hideWhenReferenceHidden, isReferenceHidden, isShown, hideDialog]);\n\n  // Computed values\n  const overrideDataTestId = dataTestId || getTestId(ComponentDefaultTestId.DIALOG, id);\n\n  const arrowStyles = useMemo<React.CSSProperties>(() => {\n    if (!middlewareData.arrow) return {};\n    const { x, y } = middlewareData.arrow;\n    return {\n      left: x != null ? `${x}px` : \"\",\n      top: y != null ? `${y}px` : \"\",\n      transform: \"rotate(45deg)\"\n    };\n  }, [middlewareData.arrow]);\n\n  // Skip Floating UI positioning when no children (e.g. floating Tipseen) — let CSS handle it\n  const finalFloatingStyles = useMemo<React.CSSProperties>(\n    () =>\n      hasValidChildren\n        ? { ...floatingStyles, ...(zIndex !== undefined && { zIndex }) }\n        : { ...(zIndex !== undefined && { zIndex }) },\n    [floatingStyles, zIndex, hasValidChildren]\n  );\n\n  const animationTypeCalculated = preventAnimationOnMount || preventAnimation ? undefined : animationType;\n  const contentRendered = isFunction(content) ? content() : content;\n\n  // Early return if no content - wrap in fragment for type safety\n  if (!contentRendered) {\n    return <>{children}</>;\n  }\n\n  const mergedFloatingRef = chainRefFunctions([refs.setFloating, containerRef]);\n\n  const dialogContent = (\n    <DialogContent\n      data-testid={overrideDataTestId}\n      isReferenceHidden={hideWhenReferenceHidden && isReferenceHidden}\n      onMouseEnter={onDialogEnter}\n      onMouseLeave={onDialogLeave}\n      onClickOutside={onClickOutside}\n      onContextMenu={onContextMenu}\n      onEsc={onEsc}\n      animationType={animationTypeCalculated}\n      position={placement}\n      wrapperClassName={wrapperClassName}\n      startingEdge={startingEdge}\n      isOpen={isShown}\n      showDelay={showDelay}\n      styleObject={finalFloatingStyles}\n      ref={mergedFloatingRef}\n      onClick={onContentClick}\n      hasTooltip={!!tooltip}\n      containerSelector={containerSelector}\n      disableContainerScroll={disableContainerScroll}\n    >\n      {contentRendered}\n      {tooltip && (\n        <div\n          style={arrowStyles}\n          ref={arrowRef}\n          className={cx(styles.arrow, tooltipClassName)}\n          data-placement={placement}\n        />\n      )}\n    </DialogContent>\n  );\n\n  return (\n    <>\n      <Refable\n        className={cx(referenceWrapperClassName)}\n        wrapperElement={referenceWrapperElement}\n        ref={setReferenceElement}\n        onBlur={chainedOnBlur}\n        onKeyDown={chainedOnKeyDown}\n        onClick={chainedOnClick}\n        onFocus={chainedOnFocus}\n        onMouseDown={chainedOnMouseDown}\n        onMouseEnter={chainedOnMouseEnter}\n        onMouseLeave={chainedOnMouseLeave}\n        onContextMenu={chainedOnContextMenu}\n      >\n        {children}\n      </Refable>\n      {isClient() &&\n        isShown &&\n        createPortal(\n          enableNestedDialogLayer ? (\n            <LayerProvider layerRef={containerRef}>{dialogContent}</LayerProvider>\n          ) : (\n            dialogContent\n          ),\n          getContainer()\n        )}\n    </>\n  );\n}\n\nexport default Dialog;\n"
  },
  {
    "path": "packages/components/dialog/src/Dialog/Dialog.types.ts",
    "content": "import type React from \"react\";\nimport type { ReactElement } from \"react\";\nimport type { VibeComponentProps } from \"@vibe/shared\";\nimport type { Middleware, Placement } from \"@floating-ui/react-dom\";\n\nexport type DialogType = \"modal\" | \"popover\";\n\nexport type DialogSize = \"none\" | \"small\" | \"medium\" | \"large\";\n\nexport type DialogPosition =\n  | \"left\"\n  | \"left-start\"\n  | \"left-end\"\n  | \"right\"\n  | \"right-start\"\n  | \"right-end\"\n  | \"top\"\n  | \"top-start\"\n  | \"top-end\"\n  | \"bottom\"\n  | \"bottom-start\"\n  | \"bottom-end\";\n\nexport type DialogTriggerEvent =\n  | \"click\"\n  | \"clickoutside\"\n  | \"esckey\"\n  | \"tab\"\n  | \"mouseenter\"\n  | \"mouseleave\"\n  | \"enter\"\n  | \"mousedown\"\n  | \"focus\"\n  | \"blur\"\n  | \"onContentClick\"\n  | \"contextmenu\";\n\nexport type DialogAnimationType = \"opacity-and-slide\" | \"expand\";\n\nexport type DialogStartingEdge = \"top\" | \"bottom\";\n\nexport type DialogOffset = {\n  main?: number;\n  secondary?: number;\n};\n\nexport type DialogEvent = React.MouseEvent | React.KeyboardEvent | KeyboardEvent | React.FocusEvent | CustomEvent;\n\nexport type DialogMiddleware = Middleware;\n\nexport type DialogPlacement = Placement;\n\nexport interface DialogProps extends VibeComponentProps {\n  /**\n   * Event handler for blur events on the reference element.\n   */\n  onBlur?: (e: React.FocusEvent) => void;\n  /**\n   * Event handler for keydown events on the reference element.\n   */\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  /**\n   * Event handler for click events on the reference element.\n   */\n  onClick?: (e: React.MouseEvent) => void;\n  /**\n   * Event handler for focus events on the reference element.\n   */\n  onFocus?: (e: React.FocusEvent) => void;\n  /**\n   * Event handler for mousedown events on the reference element.\n   */\n  onMouseDown?: (e: React.MouseEvent) => void;\n  /**\n   * Event handler for mouseenter events on the reference element.\n   */\n  onMouseEnter?: (e: React.MouseEvent) => void;\n  /**\n   * Event handler for mouseleave events on the reference element.\n   */\n  onMouseLeave?: (e: React.MouseEvent) => void;\n  /**\n   * Event handler for contextmenu events on the reference element.\n   */\n  onContextMenu?: (e: React.MouseEvent) => void;\n  /**\n   * Class name applied to the reference wrapper element.\n   */\n  referenceWrapperClassName?: string;\n  /**\n   * The wrapper element type to use for React components. Defaults to \"span\".\n   */\n  referenceWrapperElement?: \"span\" | \"div\";\n  /**\n   * The placement of the dialog relative to the reference element.\n   */\n  position?: DialogPosition;\n  /**\n   * Custom Floating UI middleware for positioning logic.\n   * If you provide `offset`, `flip`, or `shift` middleware, the defaults will be skipped.\n   * Other middleware (like `size`, `inline`, `autoPlacement`) are added to the chain.\n   * @see https://floating-ui.com/docs/middleware\n   */\n  middleware?: DialogMiddleware[];\n  /**\n   * The starting edge of the dialog animation.\n   */\n  startingEdge?: DialogStartingEdge;\n  /**\n   * Offset values for positioning adjustments.\n   * `main` - distance from reference element\n   * `secondary` - cross-axis offset (skidding)\n   */\n  moveBy?: { main?: number; secondary?: number };\n  /**\n   * Delay in milliseconds before showing the dialog.\n   */\n  showDelay?: number;\n  /**\n   * Delay in milliseconds before hiding the dialog.\n   */\n  hideDelay?: number;\n  /**\n   * Events that trigger showing the dialog.\n   */\n  showTrigger?: DialogTriggerEvent | DialogTriggerEvent[];\n  /**\n   * Events that trigger hiding the dialog.\n   */\n  hideTrigger?: DialogTriggerEvent | DialogTriggerEvent[];\n  /**\n   * If true, keeps the dialog open when mouse enters it.\n   */\n  showOnDialogEnter?: boolean;\n  /**\n   * If true, shows the dialog when the component mounts.\n   */\n  shouldShowOnMount?: boolean;\n  /**\n   * If true, disables opening the dialog.\n   */\n  disable?: boolean;\n  /**\n   * Controls the open state of the dialog (controlled mode).\n   */\n  open?: boolean;\n  /**\n   * Controlled open state for derived state pattern.\n   */\n  isOpen?: boolean;\n  /**\n   * CSS class names that, when present on target, prevent showing the dialog.\n   */\n  showTriggerIgnoreClass?: string | string[];\n  /**\n   * CSS class names that, when present on target, prevent hiding the dialog.\n   */\n  hideTriggerIgnoreClass?: string | string[];\n  /**\n   * The animation type used for the dialog.\n   */\n  animationType?: DialogAnimationType;\n  /**\n   * Class name applied to the dialog content wrapper.\n   */\n  wrapperClassName?: string;\n  /**\n   * If true, prevents animation when mounting.\n   */\n  preventAnimationOnMount?: boolean;\n  /**\n   * CSS selector of the container where the dialog is portaled.\n   */\n  containerSelector?: string;\n  /**\n   * If true, renders with tooltip arrow styling.\n   */\n  tooltip?: boolean;\n  /**\n   * Class name applied to the tooltip arrow element.\n   */\n  tooltipClassName?: string;\n  /**\n   * Callback fired when the dialog is shown.\n   */\n  onDialogDidShow?: (event?: DialogEvent, eventName?: DialogTriggerEvent | string) => void;\n  /**\n   * Callback fired when the dialog is hidden.\n   */\n  onDialogDidHide?: (event: DialogEvent, eventName: DialogTriggerEvent | string) => void;\n  /**\n   * Callback fired when clicking outside the dialog.\n   */\n  onClickOutside?: (event: React.MouseEvent) => void;\n  /**\n   * Callback fired when clicking inside the dialog content.\n   */\n  onContentClick?: (event: React.MouseEvent) => void;\n  /**\n   * The z-index applied to the dialog.\n   */\n  zIndex?: number;\n  /**\n   * If true, uses derived state from props pattern.\n   */\n  useDerivedStateFromProps?: boolean;\n  /**\n   * If true, hides the dialog when the reference element scrolls out of view.\n   */\n  hideWhenReferenceHidden?: boolean;\n  /**\n   * If true, fires onDialogDidShow callback on mount.\n   */\n  shouldCallbackOnMount?: boolean;\n  /**\n   * If true, shows and hides the dialog without delay.\n   */\n  instantShowAndHide?: boolean;\n  /**\n   * Callback to dynamically adjust show delay and animation behavior.\n   */\n  getDynamicShowDelay?: () => { showDelay: number; preventAnimation: boolean };\n  /**\n   * The content displayed inside the dialog. Can be a render function.\n   */\n  content?: (() => JSX.Element) | JSX.Element;\n  /**\n   * The reference element(s) that the dialog is positioned relative to.\n   */\n  children?: ReactElement | ReactElement[] | string;\n  /**\n   * If true, keyboard focus/blur events behave like mouse enter/leave.\n   */\n  addKeyboardHideShowTriggersByDefault?: boolean;\n  /**\n   * If true or a selector string, disables scrolling in the container when open.\n   */\n  disableContainerScroll?: boolean | string;\n  /**\n   * If true, automatically updates position when content resizes.\n   */\n  observeContentResize?: boolean;\n  /**\n   * If true, provides a LayerProvider context for nested dialogs to render correctly.\n   * This is useful when you have components that use Dialog internally (like Dropdown)\n   * inside another Dialog, ensuring proper z-index stacking and click-outside behavior.\n   */\n  enableNestedDialogLayer?: boolean;\n}\n"
  },
  {
    "path": "packages/components/dialog/src/Dialog/DialogConstants.ts",
    "content": "export enum DialogPlacement {\n  RIGHT = \"right\",\n  RIGHT_START = \"right-start\",\n  RIGHT_END = \"right-end\",\n  LEFT = \"left\",\n  LEFT_START = \"left-start\",\n  LEFT_END = \"left-end\"\n}\n"
  },
  {
    "path": "packages/components/dialog/src/Dialog/__tests__/Dialog.test.tsx",
    "content": "import { vi, describe, it, expect, beforeEach, afterEach } from \"vitest\";\nimport React from \"react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { render, screen, waitFor, within } from \"@testing-library/react\";\nimport Dialog, { type DialogProps } from \"../Dialog\";\n\nfunction renderVisibleDialogOnMount(dialogProps: DialogProps) {\n  return renderDialogOnMount({ ...dialogProps, shouldShowOnMount: true });\n}\n\nfunction renderDialogOnMount(dialogProps: DialogProps) {\n  return render(<Dialog {...dialogProps} />);\n}\n\ndescribe(\"Dialog tests\", () => {\n  beforeEach(() => {\n    vi.useFakeTimers();\n  });\n\n  afterEach(() => {\n    vi.restoreAllMocks();\n    vi.useRealTimers();\n  });\n\n  describe(\"Callbacks\", () => {\n    it(\"should call onClickOutside callback when click outside\", async () => {\n      const onClickOutsideMock = vi.fn();\n      renderVisibleDialogOnMount({ onClickOutside: onClickOutsideMock, content: <div>Dialog</div> });\n      userEvent.click(document.body);\n      expect(onClickOutsideMock).toBeCalled();\n    });\n\n    it(\"should not call onClickOutside callback when clicking inside the dialog\", async () => {\n      const onClickOutsideMock = vi.fn();\n      renderVisibleDialogOnMount({ onClickOutside: onClickOutsideMock, content: <div>Dialog</div> });\n      const dialog = await screen.findByText(\"Dialog\");\n      userEvent.click(dialog);\n      expect(onClickOutsideMock).not.toBeCalled();\n    });\n\n    it(\"should call onDialogDidShow callback when dialog is shown\", async () => {\n      const onDialogDidShowMock = vi.fn();\n      renderVisibleDialogOnMount({\n        onDialogDidShow: onDialogDidShowMock,\n        content: <div>Dialog</div>,\n        shouldCallbackOnMount: true\n      });\n      vi.runAllTimers();\n      expect(onDialogDidShowMock).toBeCalled();\n    });\n\n    it(\"should call onDialogDidHide callback when dialog is hidden\", async () => {\n      const onDialogDidHideMock = vi.fn();\n      const { container } = render(\n        <Dialog\n          shouldShowOnMount\n          onDialogDidHide={onDialogDidHideMock}\n          content={<div>Dialog</div>}\n          showTrigger={[\"click\"]}\n          hideTrigger={[\"click\"]}\n        >\n          <button type=\"button\">Toggle</button>\n        </Dialog>\n      );\n      vi.runAllTimers();\n\n      const button = within(container).getByText(\"Toggle\");\n      await userEvent.click(button);\n      vi.runAllTimers();\n      await waitFor(() => expect(onDialogDidHideMock).toBeCalled());\n    });\n\n    it(\"should call onContentClick callback when clicking inside dialog\", async () => {\n      const onContentClickMock = vi.fn();\n      renderVisibleDialogOnMount({ onContentClick: onContentClickMock, content: <div>Dialog Content</div> });\n      const dialog = await screen.findByText(\"Dialog Content\");\n      await userEvent.click(dialog);\n      expect(onContentClickMock).toBeCalled();\n    });\n  });\n\n  describe(\"Show/Hide Triggers\", () => {\n    it(\"should show dialog on click when showTrigger is click\", async () => {\n      const { container } = render(\n        <Dialog showTrigger={[\"click\"]} content={<div>Dialog Content</div>}>\n          <button type=\"button\">Click Me</button>\n        </Dialog>\n      );\n\n      expect(screen.queryByText(\"Dialog Content\")).not.toBeInTheDocument();\n\n      const button = within(container).getByText(\"Click Me\");\n      await userEvent.click(button);\n      vi.runAllTimers();\n\n      await waitFor(() => expect(screen.getByText(\"Dialog Content\")).toBeInTheDocument());\n    });\n\n    it(\"should show dialog on mouseenter when showTrigger is mouseenter\", async () => {\n      const { container } = render(\n        <Dialog showTrigger={[\"mouseenter\"]} hideTrigger={[\"mouseleave\"]} content={<div>Hover Content</div>}>\n          <div>Hover Me</div>\n        </Dialog>\n      );\n\n      expect(screen.queryByText(\"Hover Content\")).not.toBeInTheDocument();\n\n      const trigger = within(container).getByText(\"Hover Me\");\n      await userEvent.hover(trigger);\n      vi.runAllTimers();\n\n      await waitFor(() => expect(screen.getByText(\"Hover Content\")).toBeInTheDocument());\n    });\n\n    it(\"should show dialog on focus when showTrigger is focus\", async () => {\n      const { container } = render(\n        <Dialog showTrigger={[\"focus\"]} hideTrigger={[\"blur\"]} content={<div>Focus Content</div>}>\n          <input placeholder=\"Focus Me\" />\n        </Dialog>\n      );\n\n      expect(screen.queryByText(\"Focus Content\")).not.toBeInTheDocument();\n\n      const input = within(container).getByPlaceholderText(\"Focus Me\");\n      input.focus();\n      vi.runAllTimers();\n\n      await waitFor(() => expect(screen.getByText(\"Focus Content\")).toBeInTheDocument());\n    });\n\n    it(\"should hide dialog on mouseleave when hideTrigger is mouseleave\", async () => {\n      const { container } = render(\n        <Dialog\n          shouldShowOnMount\n          showTrigger={[\"mouseenter\"]}\n          hideTrigger={[\"mouseleave\"]}\n          content={<div>Hover Content</div>}\n        >\n          <div>Hover Me</div>\n        </Dialog>\n      );\n      vi.runAllTimers();\n\n      await waitFor(() => expect(screen.getByText(\"Hover Content\")).toBeInTheDocument());\n\n      const trigger = within(container).getByText(\"Hover Me\");\n      await userEvent.unhover(trigger);\n      vi.runAllTimers();\n\n      await waitFor(() => expect(screen.queryByText(\"Hover Content\")).not.toBeInTheDocument());\n    });\n\n    it(\"should hide dialog on blur when hideTrigger is blur\", async () => {\n      const onDialogDidHideMock = vi.fn();\n      const { container } = render(\n        <Dialog\n          shouldShowOnMount\n          showTrigger={[\"focus\"]}\n          hideTrigger={[\"blur\"]}\n          onDialogDidHide={onDialogDidHideMock}\n          instantShowAndHide={true}\n          content={<div>Focus Content</div>}\n        >\n          <input placeholder=\"Focus Me\" />\n        </Dialog>\n      );\n\n      await waitFor(() => expect(screen.getByText(\"Focus Content\")).toBeInTheDocument());\n\n      const input = within(container).getByPlaceholderText(\"Focus Me\");\n      input.focus();\n\n      // Trigger blur by focusing something else\n      await userEvent.tab();\n\n      await waitFor(() => expect(onDialogDidHideMock).toBeCalled());\n    });\n  });\n\n  describe(\"Keyboard Interactions\", () => {\n    it(\"should hide dialog on Escape key when hideTrigger includes esckey\", async () => {\n      render(\n        <Dialog shouldShowOnMount showTrigger={[\"click\"]} hideTrigger={[\"esckey\"]} content={<div>Press Escape</div>}>\n          <button type=\"button\">Toggle</button>\n        </Dialog>\n      );\n      vi.runAllTimers();\n\n      await waitFor(() => expect(screen.getByText(\"Press Escape\")).toBeInTheDocument());\n\n      await userEvent.keyboard(\"{Escape}\");\n      vi.runAllTimers();\n\n      await waitFor(() => expect(screen.queryByText(\"Press Escape\")).not.toBeInTheDocument());\n    });\n\n    it(\"should trigger enter event on Enter key\", async () => {\n      const onDialogDidHideMock = vi.fn();\n      const { container } = render(\n        <Dialog\n          shouldShowOnMount\n          showTrigger={[\"click\"]}\n          hideTrigger={[\"enter\"]}\n          onDialogDidHide={onDialogDidHideMock}\n          content={<div>Press Enter</div>}\n        >\n          <button type=\"button\">Toggle</button>\n        </Dialog>\n      );\n      vi.runAllTimers();\n\n      await waitFor(() => expect(screen.getByText(\"Press Enter\")).toBeInTheDocument());\n\n      const button = within(container).getByText(\"Toggle\");\n      button.focus();\n      await userEvent.keyboard(\"{Enter}\");\n      vi.runAllTimers();\n\n      await waitFor(() => expect(onDialogDidHideMock).toBeCalled());\n    });\n  });\n\n  describe(\"Delay Behavior\", () => {\n    it(\"should respect showDelay when showing dialog\", async () => {\n      const onDialogDidShowMock = vi.fn();\n      const { container } = render(\n        <Dialog\n          showDelay={500}\n          showTrigger={[\"click\"]}\n          onDialogDidShow={onDialogDidShowMock}\n          content={<div>Delayed</div>}\n        >\n          <button type=\"button\">Click</button>\n        </Dialog>\n      );\n\n      const button = within(container).getByText(\"Click\");\n      await userEvent.click(button);\n\n      // Should not show immediately\n      expect(onDialogDidShowMock).not.toBeCalled();\n\n      // Advance timers by 500ms\n      vi.advanceTimersByTime(500);\n\n      await waitFor(() => expect(onDialogDidShowMock).toBeCalled());\n    });\n\n    it(\"should respect hideDelay when hiding dialog\", async () => {\n      const onDialogDidHideMock = vi.fn();\n      const { container } = render(\n        <Dialog\n          shouldShowOnMount\n          hideDelay={300}\n          showTrigger={[\"click\"]}\n          hideTrigger={[\"click\"]}\n          onDialogDidHide={onDialogDidHideMock}\n          content={<div>Delayed Hide</div>}\n        >\n          <button type=\"button\">Click</button>\n        </Dialog>\n      );\n      vi.runAllTimers();\n\n      const button = within(container).getByText(\"Click\");\n      await userEvent.click(button);\n\n      // Should not hide immediately\n      expect(onDialogDidHideMock).not.toBeCalled();\n\n      // Advance timers by 300ms\n      vi.advanceTimersByTime(300);\n\n      await waitFor(() => expect(onDialogDidHideMock).toBeCalled());\n    });\n\n    it(\"should cancel show timeout when hiding is triggered\", async () => {\n      const onDialogDidShowMock = vi.fn();\n      const { container } = render(\n        <Dialog\n          showDelay={500}\n          showTrigger={[\"mouseenter\"]}\n          hideTrigger={[\"mouseleave\"]}\n          onDialogDidShow={onDialogDidShowMock}\n          content={<div>Hover</div>}\n        >\n          <div>Hover Me</div>\n        </Dialog>\n      );\n\n      const trigger = within(container).getByText(\"Hover Me\");\n\n      // Start hovering\n      await userEvent.hover(trigger);\n      vi.advanceTimersByTime(200);\n\n      // Stop hovering before showDelay completes\n      await userEvent.unhover(trigger);\n      vi.runAllTimers();\n\n      // Should not have shown\n      expect(onDialogDidShowMock).not.toBeCalled();\n    });\n  });\n\n  describe(\"Controlled Mode\", () => {\n    it(\"should show dialog when open prop is true\", async () => {\n      render(\n        <Dialog open={true} content={<div>Controlled Open</div>}>\n          <button type=\"button\">Reference</button>\n        </Dialog>\n      );\n\n      await waitFor(() => expect(screen.getByText(\"Controlled Open\")).toBeInTheDocument());\n    });\n\n    it(\"should hide dialog when open prop is false\", async () => {\n      const { rerender } = render(\n        <Dialog open={true} content={<div>Controlled</div>}>\n          <button type=\"button\">Reference</button>\n        </Dialog>\n      );\n\n      await waitFor(() => expect(screen.getByText(\"Controlled\")).toBeInTheDocument());\n\n      rerender(\n        <Dialog open={false} content={<div>Controlled</div>}>\n          <button type=\"button\">Reference</button>\n        </Dialog>\n      );\n\n      expect(screen.queryByText(\"Controlled\")).not.toBeInTheDocument();\n    });\n  });\n\n  describe(\"Positioning\", () => {\n    it(\"should render dialog with top position\", async () => {\n      renderVisibleDialogOnMount({\n        position: \"top\",\n        content: <div data-testid=\"dialog-content\">Top Dialog</div>\n      });\n\n      const dialogContent = await screen.findByTestId(\"dialog-content\");\n      expect(dialogContent).toBeInTheDocument();\n    });\n\n    it(\"should render dialog with bottom position\", async () => {\n      renderVisibleDialogOnMount({ position: \"bottom\", content: <div>Bottom Dialog</div> });\n\n      await waitFor(() => expect(screen.getByText(\"Bottom Dialog\")).toBeInTheDocument());\n    });\n\n    it(\"should render dialog with left position\", async () => {\n      renderVisibleDialogOnMount({ position: \"left\", content: <div>Left Dialog</div> });\n\n      await waitFor(() => expect(screen.getByText(\"Left Dialog\")).toBeInTheDocument());\n    });\n\n    it(\"should render dialog with right position\", async () => {\n      renderVisibleDialogOnMount({ position: \"right\", content: <div>Right Dialog</div> });\n\n      await waitFor(() => expect(screen.getByText(\"Right Dialog\")).toBeInTheDocument());\n    });\n  });\n\n  describe(\"Disable Prop\", () => {\n    it(\"should not show dialog when disable is true\", async () => {\n      const { container } = render(\n        <Dialog disable={true} showTrigger={[\"click\"]} content={<div>Disabled Dialog</div>}>\n          <button type=\"button\">Click</button>\n        </Dialog>\n      );\n\n      const button = within(container).getByText(\"Click\");\n      await userEvent.click(button);\n      vi.runAllTimers();\n\n      expect(screen.queryByText(\"Disabled Dialog\")).not.toBeInTheDocument();\n    });\n  });\n\n  describe(\"Animation\", () => {\n    it(\"should apply expand animation by default\", async () => {\n      renderVisibleDialogOnMount({ content: <div>Animated</div> });\n      vi.runAllTimers();\n\n      await waitFor(() => expect(screen.getByText(\"Animated\")).toBeInTheDocument());\n    });\n\n    it(\"should apply opacity-and-slide animation when specified\", async () => {\n      renderVisibleDialogOnMount({ animationType: \"opacity-and-slide\", content: <div>Slide Animated</div> });\n      vi.runAllTimers();\n\n      await waitFor(() => expect(screen.getByText(\"Slide Animated\")).toBeInTheDocument());\n    });\n\n    it(\"should prevent animation on mount when preventAnimationOnMount is true\", async () => {\n      renderVisibleDialogOnMount({ preventAnimationOnMount: true, content: <div>No Animation</div> });\n      vi.runAllTimers();\n\n      await waitFor(() => expect(screen.getByText(\"No Animation\")).toBeInTheDocument());\n    });\n  });\n\n  describe(\"Event Handler Chaining\", () => {\n    it(\"should chain onClick handlers\", async () => {\n      const dialogOnClickMock = vi.fn();\n      const childOnClickMock = vi.fn();\n\n      const { container } = render(\n        <Dialog showTrigger={[\"click\"]} onClick={dialogOnClickMock} content={<div>Content</div>}>\n          <button type=\"button\" onClick={childOnClickMock}>\n            Click Both\n          </button>\n        </Dialog>\n      );\n\n      const button = within(container).getByText(\"Click Both\");\n      await userEvent.click(button);\n\n      expect(dialogOnClickMock).toBeCalled();\n      expect(childOnClickMock).toBeCalled();\n    });\n\n    it(\"should chain onMouseEnter handlers\", async () => {\n      const dialogOnMouseEnterMock = vi.fn();\n      const childOnMouseEnterMock = vi.fn();\n\n      const { container } = render(\n        <Dialog showTrigger={[\"mouseenter\"]} onMouseEnter={dialogOnMouseEnterMock} content={<div>Content</div>}>\n          <div onMouseEnter={childOnMouseEnterMock}>Hover</div>\n        </Dialog>\n      );\n\n      const trigger = within(container).getByText(\"Hover\");\n      await userEvent.hover(trigger);\n\n      expect(dialogOnMouseEnterMock).toBeCalled();\n      expect(childOnMouseEnterMock).toBeCalled();\n    });\n  });\n\n  describe(\"Instant Show and Hide\", () => {\n    it(\"should show and hide instantly when instantShowAndHide is true\", async () => {\n      const onDialogDidShowMock = vi.fn();\n      const onDialogDidHideMock = vi.fn();\n\n      const { container } = render(\n        <Dialog\n          instantShowAndHide\n          showTrigger={[\"click\"]}\n          hideTrigger={[\"click\"]}\n          onDialogDidShow={onDialogDidShowMock}\n          onDialogDidHide={onDialogDidHideMock}\n          content={<div>Instant</div>}\n        >\n          <button type=\"button\">Toggle</button>\n        </Dialog>\n      );\n\n      const button = within(container).getByText(\"Toggle\");\n\n      // Show\n      await userEvent.click(button);\n      expect(onDialogDidShowMock).toBeCalled();\n\n      // Hide\n      await userEvent.click(button);\n      expect(onDialogDidHideMock).toBeCalled();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/components/dialog/src/Dialog/__tests__/useDisableScroll.test.ts",
    "content": "import { vi, beforeEach, afterEach, describe, expect, type MockInstance } from \"vitest\";\nimport { renderHook } from \"@testing-library/react-hooks\";\nimport useDisableScroll from \"../hooks/useDisableScroll\";\n\ndescribe(\"useDisableScroll\", () => {\n  let addEventListenerSpy: MockInstance;\n  let removeEventListenerSpy: MockInstance;\n\n  beforeEach(() => {\n    addEventListenerSpy = vi.spyOn(document.body, \"addEventListener\");\n    removeEventListenerSpy = vi.spyOn(document.body, \"removeEventListener\");\n  });\n\n  afterEach(() => {\n    addEventListenerSpy.mockRestore();\n    removeEventListenerSpy.mockRestore();\n  });\n\n  test(\"should add event listeners when disableScroll is called\", () => {\n    const { result } = renderHook(() => useDisableScroll(\"body\"));\n\n    result.current.disableScroll();\n\n    expect(addEventListenerSpy).toHaveBeenCalledTimes(1);\n    expect(addEventListenerSpy).toHaveBeenCalledWith(\"wheel\", expect.any(Function), { passive: false });\n  });\n\n  test(\"should remove event listeners when disableScroll is called\", () => {\n    const { result } = renderHook(() => useDisableScroll(\"body\"));\n\n    result.current.enableScroll();\n\n    expect(removeEventListenerSpy).toHaveBeenCalledTimes(1);\n    expect(removeEventListenerSpy).toHaveBeenCalledWith(\"wheel\", expect.any(Function));\n  });\n\n  test(\"should not throw an error when disableScroll is called after unmounting\", () => {\n    const { result, unmount } = renderHook(() => useDisableScroll(\"body\"));\n\n    unmount();\n\n    expect(() => {\n      result.current.disableScroll();\n    }).not.toThrow();\n  });\n\n  test(\"should not throw an error when disableScroll is called after unmounting when selector empty\", () => {\n    const { result, unmount } = renderHook(() => useDisableScroll(\"\"));\n\n    unmount();\n\n    expect(() => {\n      result.current.disableScroll();\n    }).not.toThrow();\n  });\n\n  test(\"should not throw an error when disableScroll is called after unmounting when selector undefined\", () => {\n    // @ts-ignore\n    const { result, unmount } = renderHook(() => useDisableScroll());\n\n    unmount();\n\n    expect(() => {\n      result.current.disableScroll();\n    }).not.toThrow();\n  });\n});\n"
  },
  {
    "path": "packages/components/dialog/src/Dialog/components/DialogContent/DialogContent.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n.contentWrapper {\n  outline: 0;\n\n  &.top,\n  &.right,\n  &.left,\n  &.bottom {\n    padding: var(--space-4);\n  }\n  &.bottomStart,\n  &.topStart,\n  &.bottomEnd,\n  &.topEnd {\n    padding-block: var(--space-4);\n  }\n  &.bottomStart,\n  &.topStart {\n    padding-inline-end: var(--space-4);\n  }\n  &.bottomEnd,\n  &.topEnd {\n    padding-inline-start: var(--space-4);\n  }\n  &.leftStart,\n  &.rightStart,\n  &.leftEnd,\n  &.rightEnd {\n    padding-inline: var(--space-4);\n  }\n  &.leftStart,\n  &.rightStart {\n    padding-block-end: var(--space-4);\n  }\n  &.leftEnd,\n  &.rightEnd {\n    padding-block-start: var(--space-4);\n  }\n}\n\n.contentWrapper[data-dialog-reference-hidden=\"true\"] {\n  visibility: hidden;\n  pointer-events: none;\n}\n\n.contentComponent:focus {\n  outline: none;\n}\n\n.contentComponent.hasTooltip {\n  padding: 6px;\n}\n\n// Animations\n\n$translate-minus-px: calc(var(--space-16) * -1);\n\n.opacitySlideAppear {\n  opacity: 0;\n\n  &.top {\n    transform: translateY(var(--space-16));\n  }\n\n  &.right {\n    transform: translateX($translate-minus-px);\n  }\n\n  &.bottom {\n    transform: translateY($translate-minus-px);\n  }\n\n  &.left {\n    transform: translateX(var(--space-16));\n  }\n}\n\n.opacitySlideAppearActive {\n  transition: opacity 0.2s ease, transform 0.2s ease-out;\n  opacity: 1;\n  pointer-events: none;\n\n  &.top,\n  &.bottom {\n    transform: translateY(0);\n  }\n\n  &.right,\n  &.left {\n    transform: translateX(0);\n  }\n}\n\n.expandAppear,\n.expandExit {\n  transition: transform 0.1s $expand-animation-timing;\n  &.top,\n  &.topStart,\n  &.topEnd {\n    transform-origin: bottom center;\n    transform: scale(0.8);\n    &.edgeBottom {\n      transform-origin: bottom left;\n    }\n    &.edgeTop {\n      transform-origin: bottom right;\n    }\n  }\n\n  &.right,\n  &.rightStart,\n  &.rightEnd {\n    transform-origin: left;\n    transform: scale(0.8);\n    &.edgeBottom {\n      transform-origin: top left;\n    }\n    &.edgeTop {\n      transform-origin: bottom left;\n    }\n  }\n\n  &.bottom,\n  &.bottomStart,\n  &.bottomEnd {\n    transform-origin: top;\n    transform: scale(0.8);\n    &.edgeBottom {\n      transform-origin: top left;\n    }\n    &.edgeTop {\n      transform-origin: top right;\n    }\n  }\n\n  &.left,\n  &.leftStart,\n  &.leftEnd {\n    transform-origin: right;\n    transform: scale(0.8);\n    &.edgeBottom {\n      transform-origin: top right;\n    }\n    &.edgeTop {\n      transform-origin: bottom right;\n    }\n  }\n}\n\n.expandExit {\n  transition: transform 0.1s $expand-animation-timing;\n}\n\n.expandAppearActive {\n  transition: transform 0.1s $expand-animation-timing;\n  pointer-events: none;\n\n  &.top,\n  &.topStart,\n  &.topEnd,\n  &.bottom,\n  &.bottomStart,\n  &.bottomEnd,\n  &.right,\n  &.rightStart,\n  &.rightEnd,\n  &.left,\n  &.leftStart,\n  &.leftEnd {\n    transform: scale(1);\n  }\n}\n"
  },
  {
    "path": "packages/components/dialog/src/Dialog/components/DialogContent/DialogContent.tsx",
    "content": "import React, {\n  cloneElement,\n  type CSSProperties,\n  forwardRef,\n  type ReactElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef\n} from \"react\";\nimport cx from \"classnames\";\nimport { camelCase } from \"es-toolkit\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { type CSSTransitionProps } from \"react-transition-group/CSSTransition\";\nimport { useClickOutside } from \"@vibe/hooks\";\nimport {\n  chainFunctions,\n  NOOP,\n  useKeyEvent,\n  type VibeComponentProps,\n  keyCodes,\n  getStyle,\n  useMergeRef\n} from \"@vibe/shared\";\nimport {\n  type DialogAnimationType,\n  type DialogTriggerEvent,\n  type DialogStartingEdge,\n  type DialogPlacement\n} from \"../../Dialog.types\";\nimport styles from \"./DialogContent.module.scss\";\nimport useDisableScroll from \"../../hooks/useDisableScroll\";\n\nconst EMPTY_OBJECT: CSSProperties = {};\nconst ESCAPE_KEYS = [keyCodes.ESCAPE];\n\nexport interface DialogContentProps extends VibeComponentProps {\n  /**\n   * The content inside the dialog.\n   */\n  children?: ReactElement | ReactElement[];\n  /**\n   * The placement of the dialog relative to the reference element.\n   */\n  position?: DialogPlacement;\n  /**\n   * Class name applied to the dialog wrapper.\n   */\n  wrapperClassName?: string;\n  /**\n   * If true, the dialog is open.\n   */\n  isOpen?: boolean;\n  /**\n   * The starting edge for animation direction.\n   */\n  startingEdge?: DialogStartingEdge;\n  /**\n   * The animation type used for showing/hiding the dialog.\n   */\n  animationType?: DialogAnimationType;\n  /**\n   * Callback fired when the Escape key is pressed.\n   */\n  onEsc?: (event: React.KeyboardEvent) => void;\n  /**\n   * Callback fired when the mouse enters the dialog.\n   */\n  onMouseEnter?: (event: React.MouseEvent) => void;\n  /**\n   * Callback fired when the mouse leaves the dialog.\n   */\n  onMouseLeave?: (event: React.MouseEvent) => void;\n  /**\n   * Callback fired when clicking outside the dialog.\n   */\n  onClickOutside?: (event: React.MouseEvent, hideShowEvent: DialogTriggerEvent) => void;\n  /**\n   * Callback fired when clicking inside the dialog.\n   */\n  onClick?: (event: React.MouseEvent) => void;\n  /**\n   * Delay before showing the dialog (used for animation timing).\n   */\n  showDelay?: number;\n  /**\n   * Inline styles applied to the dialog wrapper.\n   */\n  styleObject?: CSSProperties;\n  /**\n   * If true, indicates the reference element is hidden.\n   */\n  isReferenceHidden?: boolean;\n  /**\n   * If true, applies tooltip arrow styling.\n   */\n  hasTooltip?: boolean;\n  /**\n   * CSS selector of the container for scroll disabling.\n   */\n  containerSelector?: string;\n  /**\n   * If true or a selector string, disables scrolling when open.\n   */\n  disableContainerScroll?: boolean | string;\n  /**\n   * Callback fired on context menu (right-click) events.\n   */\n  onContextMenu?: (e: React.MouseEvent) => void;\n}\n\nconst DialogContent = forwardRef<HTMLElement, DialogContentProps>(\n  (\n    {\n      onEsc = NOOP,\n      children,\n      position,\n      wrapperClassName,\n      isOpen = false,\n      startingEdge,\n      animationType = \"expand\",\n      onMouseEnter = NOOP,\n      onMouseLeave = NOOP,\n      onClickOutside = NOOP,\n      onClick = NOOP,\n      onContextMenu = NOOP,\n      showDelay,\n      styleObject = EMPTY_OBJECT,\n      isReferenceHidden,\n      hasTooltip = false,\n      containerSelector,\n      disableContainerScroll = false,\n      \"data-testid\": dataTestId\n    },\n    forwardedRef\n  ) => {\n    const contentRef = useRef<HTMLDivElement>(null);\n    const wrapperRef = useRef<HTMLSpanElement>(null);\n    const mergedWrapperRef = useMergeRef(forwardedRef, wrapperRef);\n\n    const onOutsideClick = useCallback(\n      (event: React.MouseEvent) => {\n        if (isOpen) {\n          return onClickOutside(event, \"clickoutside\");\n        }\n      },\n      [isOpen, onClickOutside]\n    );\n    const overrideOnContextMenu = useCallback(\n      (event: React.MouseEvent) => {\n        if (isOpen) {\n          onContextMenu(event);\n        }\n      },\n      [isOpen, onContextMenu]\n    );\n\n    // Wrap escape callback to ensure useKeyEvent always receives a valid function\n    const escapeCallback = useMemo(\n      () => (event: KeyboardEvent) => {\n        if (isOpen && onEsc !== NOOP) {\n          onEsc(event as unknown as React.KeyboardEvent);\n        }\n      },\n      [isOpen, onEsc]\n    );\n    useKeyEvent({ keys: ESCAPE_KEYS, callback: escapeCallback });\n\n    // Watch the wrapper ref to include padding area, tooltip arrows, and nested Dialogs\n    useClickOutside({ callback: onOutsideClick, ref: wrapperRef });\n    useClickOutside({ eventName: \"contextmenu\", callback: overrideOnContextMenu, ref: wrapperRef });\n    const selectorToDisable = typeof disableContainerScroll === \"string\" ? disableContainerScroll : containerSelector;\n    const { disableScroll, enableScroll } = useDisableScroll(selectorToDisable);\n\n    useEffect(() => {\n      if (disableContainerScroll) {\n        if (isOpen) {\n          disableScroll();\n        } else {\n          enableScroll();\n        }\n      }\n    }, [disableContainerScroll, disableScroll, enableScroll, isOpen]);\n\n    const transitionOptions: Partial<CSSTransitionProps> = { classNames: undefined };\n\n    switch (animationType) {\n      case \"expand\":\n        transitionOptions.classNames = {\n          appear: styles.expandAppear,\n          appearActive: styles.expandAppearActive,\n          exit: styles.expandExit\n        };\n        break;\n      case \"opacity-and-slide\":\n        transitionOptions.classNames = {\n          appear: styles.opacitySlideAppear,\n          appearActive: styles.opacitySlideAppearActive\n        };\n        break;\n    }\n\n    // Clone children to attach mouse event handlers, with proper type checking\n    const childrenWithHandlers = React.Children.map(children, child => {\n      // Only clone valid React elements, pass through primitives unchanged\n      if (!React.isValidElement(child)) {\n        return child;\n      }\n\n      return cloneElement(child as ReactElement, {\n        onMouseEnter: chainFunctions([(child as ReactElement).props.onMouseEnter, onMouseEnter]),\n        onMouseLeave: chainFunctions([(child as ReactElement).props.onMouseLeave, onMouseLeave])\n      });\n    });\n\n    return (\n      <span\n        // Legacy class name preserved for Monolith overrides\n        className={cx(\"monday-style-dialog-content-wrapper\", styles.contentWrapper, wrapperClassName)}\n        ref={mergedWrapperRef}\n        data-testid={dataTestId}\n        style={styleObject}\n        onClickCapture={onClick}\n        data-dialog-reference-hidden={isReferenceHidden}\n      >\n        <CSSTransition\n          classNames={transitionOptions.classNames}\n          nodeRef={contentRef}\n          in={isOpen}\n          appear={!!animationType}\n          timeout={showDelay}\n        >\n          <div\n            className={cx(styles.contentComponent, getStyle(styles, camelCase(position)), {\n              [getStyle(styles, camelCase(\"edge-\" + startingEdge))]: startingEdge,\n              [styles.hasTooltip]: hasTooltip\n            })}\n            ref={contentRef}\n          >\n            {childrenWithHandlers}\n          </div>\n        </CSSTransition>\n      </span>\n    );\n  }\n);\n\nexport default DialogContent;\n"
  },
  {
    "path": "packages/components/dialog/src/Dialog/components/Refable/Refable.tsx",
    "content": "import React, { type HTMLProps, type ReactElement } from \"react\";\nimport { chainFunctions, chainRefFunctions, type VibeComponentProps } from \"@vibe/shared\";\n\nexport interface RefableProps extends React.PropsWithChildren<HTMLProps<HTMLElement> & VibeComponentProps> {\n  children: ReactElement | ReactElement[] | string;\n  /**\n   * The wrapper element type to use for React components. Defaults to \"span\".\n   */\n  wrapperElement?: \"span\" | \"div\";\n}\n\n/**\n * Refable is a utility component that enables ref forwarding to children elements.\n *\n * For native HTML elements: Clones the child and merges refs and event handlers.\n * For React components: Wraps in a span/div and attaches the ref to the wrapper.\n *\n * This allows Dialog to get a reference to the trigger element for positioning.\n */\nexport const Refable = React.forwardRef<HTMLElement, RefableProps>(\n  ({ children, wrapperElement = \"span\", ...rest }, ref) => {\n    return React.Children.map(children, child => {\n      if (!React.isValidElement(child)) return null;\n\n      // For React components, wrap in a native element to attach the ref\n      if (typeof child.type !== \"string\") {\n        const WrapperElement = wrapperElement;\n        return (\n          // @ts-expect-error - TypeScript can't infer the correct ref type when using a variable as JSX tag\n          <WrapperElement ref={ref} {...rest}>\n            {child}\n          </WrapperElement>\n        );\n      }\n\n      // For native HTML elements, clone and merge props/refs\n      const childProps = child.props as React.HTMLProps<HTMLElement>;\n\n      return React.cloneElement(child, {\n        ...rest,\n        ...childProps,\n        // Chain all event handlers to preserve both parent and child handlers\n        onClick: getChainedFunction(\"onClick\", childProps, rest),\n        onBlur: getChainedFunction(\"onBlur\", childProps, rest),\n        onFocus: getChainedFunction(\"onFocus\", childProps, rest),\n        onMouseEnter: getChainedFunction(\"onMouseEnter\", childProps, rest),\n        onMouseLeave: getChainedFunction(\"onMouseLeave\", childProps, rest),\n        onMouseDown: getChainedFunction(\"onMouseDown\", childProps, rest),\n        onKeyDown: getChainedFunction(\"onKeyDown\", childProps, rest),\n        onContextMenu: getChainedFunction(\"onContextMenu\", childProps, rest),\n        ref: chainRefFunctions([(child as any).ref, ref])\n      } as any);\n    }) as any;\n  }\n);\n\nfunction getChainedFunction(\n  name: keyof React.HTMLProps<unknown>,\n  childProps: React.PropsWithChildren<React.HTMLProps<unknown>>,\n  wrapperProps: React.HTMLProps<unknown>\n) {\n  return chainFunctions([childProps[name], wrapperProps[name]], true);\n}\n"
  },
  {
    "path": "packages/components/dialog/src/Dialog/components/Refable/__tests__/Refable.test.tsx",
    "content": "import { vi, afterEach, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { cleanup } from \"@testing-library/react-hooks\";\nimport { fireEvent, render } from \"@testing-library/react\";\nimport { Refable } from \"../Refable\";\n\ndescribe(\"Refable\", () => {\n  afterEach(() => {\n    cleanup();\n  });\n\n  it(\"should render nothing if an invalid child is passed\", () => {\n    const { container } = render(<Refable>{`invalid`}</Refable>);\n\n    expect(container.innerHTML).toBe(\"\");\n  });\n\n  it(\"should be able to render an intractable single JSX element\", () => {\n    const onClickCallback = vi.fn();\n\n    const { getAllByTestId } = render(\n      <Refable data-testid=\"ref-component\" onClick={onClickCallback}>\n        <span>test</span>\n      </Refable>\n    );\n\n    const components = getAllByTestId(\"ref-component\");\n    expect(components.length).toBe(1);\n    const [component] = components;\n    expect(component.innerHTML).toBe(\"test\");\n    expect(component.getAttribute(\"data-testid\")).toBe(\"ref-component\");\n    fireEvent.click(component);\n    expect(onClickCallback.mock.calls.length).toBe(1);\n  });\n\n  it(\"should be able to render multiple intractable JSX elements\", () => {\n    const onClickCallback = vi.fn();\n\n    const { getAllByTestId } = render(\n      <Refable data-testid=\"ref-component\" onClick={onClickCallback}>\n        <span>test</span>\n        <span>test</span>\n      </Refable>\n    );\n\n    const components = getAllByTestId(\"ref-component\");\n    expect(components.length).toBe(2);\n    components.forEach(component => {\n      expect(component.innerHTML).toBe(\"test\");\n      expect(component.getAttribute(\"data-testid\")).toBe(\"ref-component\");\n      fireEvent.click(component);\n    });\n    expect(onClickCallback.mock.calls.length).toBe(2);\n  });\n\n  it(\"should be able to render an intractable function component\", () => {\n    const onClickCallback = vi.fn();\n    const InlineComponent = () => {\n      return <div>test</div>;\n    };\n\n    const { getByTestId } = render(\n      <Refable data-testid=\"ref-component\" onClick={onClickCallback}>\n        <InlineComponent />\n      </Refable>\n    );\n\n    const component = getByTestId(\"ref-component\");\n    expect(component.innerHTML).toBe(\"<div>test</div>\");\n    fireEvent.click(component);\n    expect(onClickCallback.mock.calls.length).toBe(1);\n  });\n\n  it(\"should wrap a function component with a span\", () => {\n    const onClickCallback = vi.fn();\n    const InlineComponent = () => {\n      return <div>test</div>;\n    };\n\n    const { container } = render(\n      <Refable data-testid=\"ref-component\" onClick={onClickCallback}>\n        <InlineComponent />\n      </Refable>\n    );\n\n    expect(container.innerHTML).toBe('<span data-testid=\"ref-component\"><div>test</div></span>');\n  });\n});\n"
  },
  {
    "path": "packages/components/dialog/src/Dialog/hooks/__tests__/useDisableScroll.test.ts",
    "content": "import { vi, beforeEach, afterEach, describe, expect, type MockInstance } from \"vitest\";\nimport { renderHook } from \"@testing-library/react-hooks\";\nimport useDisableScroll from \"../useDisableScroll\";\n\ndescribe(\"useDisableScroll\", () => {\n  let addEventListenerSpy: MockInstance;\n  let removeEventListenerSpy: MockInstance;\n\n  beforeEach(() => {\n    addEventListenerSpy = vi.spyOn(document.body, \"addEventListener\");\n    removeEventListenerSpy = vi.spyOn(document.body, \"removeEventListener\");\n  });\n\n  afterEach(() => {\n    addEventListenerSpy.mockRestore();\n    removeEventListenerSpy.mockRestore();\n  });\n\n  test(\"should add event listeners when disableScroll is called\", () => {\n    const { result } = renderHook(() => useDisableScroll(\"body\"));\n\n    result.current.disableScroll();\n\n    expect(addEventListenerSpy).toHaveBeenCalledTimes(1);\n    expect(addEventListenerSpy).toHaveBeenCalledWith(\"wheel\", expect.any(Function), { passive: false });\n  });\n\n  test(\"should remove event listeners when disableScroll is called\", () => {\n    const { result } = renderHook(() => useDisableScroll(\"body\"));\n\n    result.current.enableScroll();\n\n    expect(removeEventListenerSpy).toHaveBeenCalledTimes(1);\n    expect(removeEventListenerSpy).toHaveBeenCalledWith(\"wheel\", expect.any(Function));\n  });\n\n  test(\"should not throw an error when disableScroll is called after unmounting\", () => {\n    const { result, unmount } = renderHook(() => useDisableScroll(\"body\"));\n\n    unmount();\n\n    expect(() => {\n      result.current.disableScroll();\n    }).not.toThrow();\n  });\n\n  test(\"should not throw an error when disableScroll is called after unmounting when selector empty\", () => {\n    const { result, unmount } = renderHook(() => useDisableScroll(\"\"));\n\n    unmount();\n\n    expect(() => {\n      result.current.disableScroll();\n    }).not.toThrow();\n  });\n\n  test(\"should not throw an error when disableScroll is called after unmounting when selector undefined\", () => {\n    // @ts-ignore\n    const { result, unmount } = renderHook(() => useDisableScroll());\n\n    unmount();\n\n    expect(() => {\n      result.current.disableScroll();\n    }).not.toThrow();\n  });\n});\n"
  },
  {
    "path": "packages/components/dialog/src/Dialog/hooks/useDisableScroll.ts",
    "content": "import { useCallback, useEffect } from \"react\";\n\nconst useDisableScroll = (scrollableQuerySelector: string | undefined) => {\n  const _disableScroll = useCallback((e: Event) => {\n    e.preventDefault();\n    e.stopPropagation();\n\n    return false;\n  }, []);\n\n  const disableScroll = useCallback(() => {\n    if (scrollableQuerySelector?.length && scrollableQuerySelector.length > 0) {\n      document.querySelectorAll(scrollableQuerySelector).forEach((item: Element) => {\n        item.addEventListener(\"wheel\", _disableScroll, { passive: false });\n      });\n    }\n  }, [_disableScroll, scrollableQuerySelector]);\n\n  const enableScroll = useCallback(() => {\n    if (scrollableQuerySelector?.length && scrollableQuerySelector.length > 0) {\n      document.querySelectorAll(scrollableQuerySelector).forEach((item: Element) => {\n        item.removeEventListener(\"wheel\", _disableScroll);\n      });\n    }\n  }, [_disableScroll, scrollableQuerySelector]);\n\n  useEffect(() => {\n    return enableScroll;\n  }, [enableScroll]);\n\n  return {\n    disableScroll,\n    enableScroll\n  };\n};\n\nexport default useDisableScroll;\n"
  },
  {
    "path": "packages/components/dialog/src/Dialog/index.ts",
    "content": "export { default as Dialog } from \"./Dialog\";\nexport { DialogPlacement as DialogPlacementEnum } from \"./DialogConstants\";\nexport * from \"./Dialog.types\";\n"
  },
  {
    "path": "packages/components/dialog/src/DialogContentContainer/DialogContentContainer.module.scss",
    "content": ".dialogContentContainer:focus {\n  outline: none;\n}\n\n.sizeSmall {\n  padding: var(--space-8);\n}\n\n.sizeMedium {\n  padding: var(--space-16);\n}\n\n.sizeLarge {\n  padding: var(--space-24);\n}\n\n.typePopover {\n  box-shadow: var(--box-shadow-medium);\n  border-radius: var(--border-radius-medium);\n  background-color: var(--secondary-background-color);\n\n  :global(.dark-app-theme) &,\n  :global(.black-app-theme) &,\n  :global(.hacker-app-theme) & {\n    box-shadow: 0 0 0 1px var(--layout-border-color), var(--box-shadow-medium);\n  }\n}\n\n.typeModal {\n  box-shadow: var(--box-shadow-large);\n  border-radius: var(--border-radius-big);\n  background-color: var(--primary-background-color);\n}\n"
  },
  {
    "path": "packages/components/dialog/src/DialogContentContainer/DialogContentContainer.tsx",
    "content": "import { camelCase } from \"es-toolkit\";\nimport cx from \"classnames\";\nimport React, { useRef, forwardRef } from \"react\";\nimport { useMergeRef, type VibeComponentProps, ComponentDefaultTestId, getTestId, getStyle } from \"@vibe/shared\";\nimport { type DialogSize, type DialogType } from \"../Dialog\";\nimport styles from \"./DialogContentContainer.module.scss\";\n\nexport interface DialogContentContainerProps extends VibeComponentProps {\n  /**\n   * The content inside the dialog container.\n   */\n  children?: React.ReactNode;\n  /**\n   * The ID of the element that labels this dialog.\n   */\n  \"aria-labelledby\"?: string;\n  /**\n   * The ID of the element that describes this dialog.\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * The type of dialog.\n   */\n  type?: DialogType;\n  /**\n   * The size of the dialog.\n   */\n  size?: DialogSize;\n  /**\n   * Custom styles applied to the dialog container.\n   */\n  style?: React.CSSProperties;\n  /**\n   * The ARIA role applied to the dialog container.\n   * Defaults to \"dialog\" when not provided. Pass `null` to remove the role attribute entirely.\n   */\n  role?: string | null;\n}\n\nconst DialogContentContainer = forwardRef(\n  (\n    {\n      id,\n      className = \"\",\n      \"aria-labelledby\": ariaLabelledby = \"\",\n      \"aria-describedby\": ariaDescribedby = \"\",\n      type = \"popover\",\n      size = \"small\",\n      children,\n      style,\n      role,\n      \"data-testid\": dataTestId = getTestId(ComponentDefaultTestId.DIALOG_CONTENT_CONTAINER, id),\n      ...props\n    }: DialogContentContainerProps,\n    ref: React.Ref<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const roleValue = role === null ? undefined : role || \"dialog\";\n\n    return (\n      <div\n        id={id}\n        role={roleValue}\n        data-testid={dataTestId}\n        aria-labelledby={ariaLabelledby}\n        aria-describedby={ariaDescribedby}\n        ref={mergedRef}\n        style={style}\n        className={cx(\n          styles.dialogContentContainer,\n          className,\n          getStyle(styles, camelCase(\"type--\" + type)),\n          getStyle(styles, camelCase(\"size--\" + size))\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nexport default DialogContentContainer;\n"
  },
  {
    "path": "packages/components/dialog/src/DialogContentContainer/__tests__/DialogContentContainer.test.tsx",
    "content": "import { it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport DialogContentContainer from \"../DialogContentContainer\";\n\nit(\"renders correctly with empty props\", () => {\n  const tree = renderer.create(<DialogContentContainer />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n\nit(\"renders correctly with data-testid\", () => {\n  const tree = renderer.create(<DialogContentContainer data-testid=\"test\" />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "packages/components/dialog/src/DialogContentContainer/__tests__/__snapshots__/DialogContentContainer.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`renders correctly with data-testid 1`] = `\n<div\n  aria-describedby=\"\"\n  aria-labelledby=\"\"\n  className=\"dialogContentContainer typePopover sizeSmall\"\n  data-testid=\"test\"\n  role=\"dialog\"\n/>\n`;\n\nexports[`renders correctly with empty props 1`] = `\n<div\n  aria-describedby=\"\"\n  aria-labelledby=\"\"\n  className=\"dialogContentContainer typePopover sizeSmall\"\n  data-testid=\"dialog-content-container\"\n  role=\"dialog\"\n/>\n`;\n"
  },
  {
    "path": "packages/components/dialog/src/DialogContentContainer/index.ts",
    "content": "export { default as DialogContentContainer, type DialogContentContainerProps } from \"./DialogContentContainer\";\n"
  },
  {
    "path": "packages/components/dialog/src/index.ts",
    "content": "export * from \"./Dialog\";\nexport * from \"./DialogContentContainer\";\n"
  },
  {
    "path": "packages/components/dialog/src/types/files.d.ts",
    "content": "// SCSS\ndeclare module \"*.module.scss\" {\n  const classes: { [key: string]: string };\n  export default classes;\n}\n\n// SVG\ndeclare module \"*.svg\" {\n  const content: string;\n  export default content;\n}\n\ndeclare module \"*.png\";\ndeclare module \"*.mp4\";\ndeclare module \"*.pdf\";\n"
  },
  {
    "path": "packages/components/dialog/tsconfig.json",
    "content": "{\n  \"extends\": \"@vibe/config/tsconfig\",\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"rootDir\": \"src\"\n  },\n  \"include\": [\"src/**/*\"]\n}\n"
  },
  {
    "path": "packages/components/dialog/vitest.config.mjs",
    "content": "import config from \"@vibe/config/vitest.config\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n  ...config\n});\n"
  },
  {
    "path": "packages/components/dialog/vitest.setup.mjs",
    "content": "import { vi } from \"vitest\";\nimport \"@testing-library/jest-dom\";\nimport React from \"react\";\n\n// Mock ResizeObserver\nclass ResizeObserver {\n  observe() {}\n  unobserve() {}\n  disconnect() {}\n}\nglobal.ResizeObserver = ResizeObserver;\n\n// Mock react-inlinesvg\nvi.mock(\"react-inlinesvg\", () => ({\n  default: ({ src, ...props }) =>\n    React.createElement(\"div\", {\n      \"data-testid\": \"mock-svg\",\n      \"data-src\": src,\n      ...props\n    })\n}));\n"
  },
  {
    "path": "packages/components/icon/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [4.0.1](https://github.com/mondaycom/vibe/compare/@vibe/icon@4.0.0...@vibe/icon@4.0.1) (2026-04-16)\n\n**Note:** Version bump only for package @vibe/icon\n\n\n\n\n\n## [3.0.11](https://github.com/mondaycom/vibe/compare/@vibe/icon@3.0.10...@vibe/icon@3.0.11) (2026-01-18)\n\n**Note:** Version bump only for package @vibe/icon\n\n\n\n\n\n## [3.0.10](https://github.com/mondaycom/vibe/compare/@vibe/icon@3.0.9...@vibe/icon@3.0.10) (2026-01-04)\n\n**Note:** Version bump only for package @vibe/icon\n\n\n\n\n\n## [3.0.9](https://github.com/mondaycom/vibe/compare/@vibe/icon@3.0.8...@vibe/icon@3.0.9) (2025-12-17)\n\n**Note:** Version bump only for package @vibe/icon\n\n\n\n\n\n## [3.0.8](https://github.com/mondaycom/vibe/compare/@vibe/icon@3.0.7...@vibe/icon@3.0.8) (2025-11-26)\n\n**Note:** Version bump only for package @vibe/icon\n\n\n\n\n\n## [3.0.7](https://github.com/mondaycom/vibe/compare/@vibe/icon@3.0.6...@vibe/icon@3.0.7) (2025-11-25)\n\n**Note:** Version bump only for package @vibe/icon\n\n\n\n\n\n## [3.0.6](https://github.com/mondaycom/vibe/compare/@vibe/icon@3.0.5...@vibe/icon@3.0.6) (2025-11-19)\n\n**Note:** Version bump only for package @vibe/icon\n\n\n\n\n\n## [3.0.5](https://github.com/mondaycom/vibe/compare/@vibe/icon@3.0.4...@vibe/icon@3.0.5) (2025-11-06)\n\n**Note:** Version bump only for package @vibe/icon\n\n\n\n\n\n## [3.0.4](https://github.com/mondaycom/vibe/compare/@vibe/icon@3.0.3...@vibe/icon@3.0.4) (2025-10-30)\n\n**Note:** Version bump only for package @vibe/icon\n\n\n\n\n\n## [3.0.3](https://github.com/mondaycom/vibe/compare/@vibe/icon@3.0.2...@vibe/icon@3.0.3) (2025-10-26)\n\n**Note:** Version bump only for package @vibe/icon\n\n\n\n\n\n## [3.0.2](https://github.com/mondaycom/vibe/compare/@vibe/icon@3.0.1...@vibe/icon@3.0.2) (2025-10-26)\n\n\n### Bug Fixes\n\n* remove unneeded dev dependencies ([#3157](https://github.com/mondaycom/vibe/issues/3157)) ([eec1792](https://github.com/mondaycom/vibe/commit/eec17924422cb0478bb713290919d80a516cd436))\n\n\n\n\n\n## 3.0.1 (2025-10-25)\n\n**Note:** Version bump only for package @vibe/icon\n"
  },
  {
    "path": "packages/components/icon/package.json",
    "content": "{\n  \"name\": \"@vibe/icon\",\n  \"version\": \"4.0.1\",\n  \"description\": \"Vibe sub-package for icon components\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/mondaycom/vibe.git\",\n    \"directory\": \"packages/components/icon\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/mondaycom/vibe/issues\"\n  },\n  \"homepage\": \"https://github.com/mondaycom/vibe#readme\",\n  \"author\": \"monday.com\",\n  \"license\": \"MIT\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.js\",\n  \"types\": \"dist/index.d.ts\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \".\": {\n      \"types\": \"./dist/index.d.ts\",\n      \"import\": \"./dist/index.js\",\n      \"default\": \"./dist/index.js\"\n    },\n    \"./mockedClassNames\": {\n      \"import\": \"./dist/mocked_classnames/index.js\",\n      \"default\": \"./dist/mocked_classnames/index.js\"\n    }\n  },\n  \"scripts\": {\n    \"build\": \"rollup -c && yarn build:mocked-classnames\",\n    \"build:mocked-classnames\": \"[ \\\"$SKIP_RELEASE_ARTIFACTS\\\" = \\\"true\\\" ] || mock_classnames=on rollup -c\",\n    \"test\": \"vitest run\",\n    \"lint\": \"eslint \\\"./src/**/*.{js,jsx,ts,tsx}\\\"\"\n  },\n  \"dependencies\": {\n    \"@vibe/shared\": \"4.0.1\",\n    \"classnames\": \"^2.5.1\",\n    \"es-toolkit\": \"^1.39.10\",\n    \"react-inlinesvg\": \"^4.1.3\"\n  },\n  \"devDependencies\": {\n    \"@vibe/config\": \"4.0.0\",\n    \"react\": \"^16.13.0\",\n    \"react-dom\": \"^16.13.0\",\n    \"typescript\": \"^5.9.3\",\n    \"vitest\": \"^1.6.0\"\n  },\n  \"peerDependencies\": {\n    \"react\": \">=16.9.0\",\n    \"react-dom\": \">=16.9.0\"\n  },\n  \"sideEffects\": [\n    \"*.scss\",\n    \"*.css\",\n    \"*.scss.js\",\n    \"*.css.js\"\n  ],\n  \"eslintConfig\": {\n    \"extends\": [\n      \"../../../node_modules/@vibe/config/.eslintrc.cjs\"\n    ]\n  }\n}\n"
  },
  {
    "path": "packages/components/icon/rollup.config.mjs",
    "content": "import config from \"@vibe/config/rollup.config\";\n\nexport default config;\n"
  },
  {
    "path": "packages/components/icon/src/Icon/CustomSvgIcon/CustomSvgIcon.tsx",
    "content": "import React, { type FunctionComponent, useCallback, type AriaRole, type Ref } from \"react\";\nimport SVG from \"react-inlinesvg\";\nimport {\n  ComponentDefaultTestId,\n  ComponentVibeId,\n  getTestId,\n  useIsMounted,\n  type VibeComponentProps\n} from \"@vibe/shared\";\nimport useIconScreenReaderAccessProps from \"../hooks/useIconScreenReaderAccessProps\";\n\nfunction modifySvgCode(svg: string, color = \"currentColor\") {\n  return svg.replace(/fill=\".*?\"/g, `fill=\"${color}\"`);\n}\n\nexport interface CustomSvgIconProps extends VibeComponentProps {\n  /**\n   * The source URL or object of the SVG icon.\n   */\n  src: string | object;\n  /**\n   * The accessible label for the icon.\n   */\n  \"aria-label\"?: string;\n  /**\n   * The tab index of the icon for keyboard navigation.\n   */\n  tabIndex?: number;\n  /**\n   * The ARIA role of the icon.\n   */\n  role?: AriaRole;\n  /**\n   * If true, hides the icon from screen readers.\n   */\n  \"aria-hidden\"?: boolean;\n  /**\n   * If true, replaces the `fill` attribute in the SVG with `currentColor`.\n   */\n  replaceToCurrentColor?: boolean;\n  /**\n   * Overrides the default color of the icon.\n   */\n  customColor?: string;\n  /**\n   * The size (width and height) of the icon.\n   */\n  size?: number | string;\n  /**\n   * Reference to the SVG element.\n   */\n  ref?: Ref<SVGElement>;\n}\n\nconst CustomSvgIcon: FunctionComponent<CustomSvgIconProps> = ({\n  className,\n  ref,\n  src,\n  \"aria-label\": ariaLabel,\n  \"aria-hidden\": ariaHidden,\n  replaceToCurrentColor = false,\n  customColor,\n  size,\n  id,\n  \"data-testid\": dataTestId\n}) => {\n  const screenReaderAccessProps = useIconScreenReaderAccessProps({\n    isClickable: false,\n    label: ariaLabel,\n    isDecorationOnly: ariaHidden\n  });\n\n  const isMounted = useIsMounted();\n\n  const svgProcessor = useCallback(\n    (svg: string) => {\n      if (replaceToCurrentColor) return modifySvgCode(svg, \"currentColor\");\n      if (customColor) return modifySvgCode(svg, customColor);\n      return svg;\n    },\n    [replaceToCurrentColor, customColor]\n  );\n\n  if (typeof src !== \"string\") return null;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const SVGComponent = (SVG.default || SVG) as React.FC<any>; // fix esm issue\n\n  const PlaceHolder = <div className={className} id={id}></div>;\n\n  if (!isMounted) {\n    // placeholder for server side rendering\n    return PlaceHolder;\n  }\n  return (\n    <SVGComponent\n      innerRef={ref}\n      {...screenReaderAccessProps}\n      loader={PlaceHolder} // avoid flickering\n      src={src}\n      className={className}\n      preProcessor={svgProcessor}\n      width={size}\n      height={size}\n      id={id}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.SVG_ICON, id)}\n      data-vibe={ComponentVibeId.ICON}\n    >\n      {PlaceHolder}\n    </SVGComponent>\n  );\n};\n\nexport default CustomSvgIcon;\n"
  },
  {
    "path": "packages/components/icon/src/Icon/FontIcon/FontIcon.tsx",
    "content": "import React, { type AriaRole, forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport { type VibeComponentProps, ComponentVibeId } from \"@vibe/shared\";\nimport { type SubIcon } from \"../types\";\n\nexport interface FontIconProps extends VibeComponentProps {\n  /**\n   * Callback fired when the icon is clicked.\n   */\n  onClick?: (event: React.MouseEvent<HTMLSpanElement>) => void;\n  /**\n   * The accessible label for the icon.\n   */\n  \"aria-label\"?: string;\n  /**\n   * The tab index of the icon for keyboard navigation.\n   */\n  tabIndex?: number;\n  /**\n   * The icon name or component.\n   */\n  icon?: SubIcon;\n  /**\n   * The ARIA role of the icon.\n   */\n  role?: AriaRole;\n  /**\n   * If true, hides the icon from screen readers.\n   */\n  \"aria-hidden\"?: boolean;\n}\n\nconst FontIcon = forwardRef(\n  (\n    {\n      id,\n      className,\n      onClick,\n      \"aria-label\": iconLabel,\n      tabIndex,\n      icon: Icon,\n      role = \"img\",\n      \"aria-hidden\": ariaHidden,\n      \"data-testid\": dataTestId\n    }: FontIconProps,\n    iconRef: React.ForwardedRef<HTMLElement>\n  ) => {\n    const isIconFunction = typeof Icon === \"function\";\n    const iconClassName = isIconFunction ? \"\" : Icon;\n    return (\n      // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n      <span\n        aria-hidden={ariaHidden}\n        className={classNames(className, \"fa\", iconClassName)}\n        onClick={onClick}\n        ref={iconRef}\n        aria-label={iconLabel}\n        tabIndex={tabIndex}\n        role={role}\n        id={id}\n        data-testid={dataTestId}\n        data-vibe={ComponentVibeId.ICON}\n      >\n        {isIconFunction && <Icon />}\n      </span>\n    );\n  }\n);\n\nexport default FontIcon;\n"
  },
  {
    "path": "packages/components/icon/src/Icon/Icon.module.scss",
    "content": ".icon {\n  position: relative;\n}\n\n.icon:before {\n  text-decoration: none !important;\n}\n\n.noFocusStyle:focus {\n  outline: none;\n}\n\n.clickable {\n  cursor: pointer;\n}\n"
  },
  {
    "path": "packages/components/icon/src/Icon/Icon.tsx",
    "content": "import cx from \"classnames\";\nimport React, { forwardRef } from \"react\";\nimport { type VibeComponentProps, ComponentDefaultTestId, getTestId, ComponentVibeId, useMergeRef } from \"@vibe/shared\";\nimport CustomSvgIcon from \"./CustomSvgIcon/CustomSvgIcon\";\nimport FontIcon from \"./FontIcon/FontIcon\";\nimport useIconProps from \"./hooks/useIconProps\";\nimport { type SubIcon, type IconSubComponentProps, type IconType } from \"./types\";\n\nfunction renderIcon(Icon: React.FC<IconSubComponentProps>, props: IconSubComponentProps) {\n  const dataTestId = props[\"data-testid\"];\n  return (\n    <Icon\n      {...props}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.ICON, props.id)}\n      data-vibe={ComponentVibeId.ICON}\n    />\n  );\n}\n\nexport interface IconProps extends VibeComponentProps {\n  /**\n   * The icon name, component, or source URL.\n   */\n  icon: SubIcon;\n  /**\n   * The accessible label for the icon.\n   */\n  label?: string;\n  /**\n   * The type of the icon: `svg`, `font`, or `src` (external source).\n   */\n  type?: IconType;\n  /**\n   * The size of the icon.\n   */\n  size?: number | string;\n  /**\n   * If true, removes focus styles from the icon.\n   */\n  ignoreFocusStyle?: boolean;\n  /**\n   * The tab index of the icon for keyboard navigation.\n   */\n  tabindex?: number | string;\n  /**\n   * If true, hides the icon from screen readers.\n   */\n  \"aria-hidden\"?: boolean;\n  /**\n   * Inline styles applied to the icon.\n   */\n  style?: React.CSSProperties;\n  /**\n   * If true, replaces `fill` property with `currentColor` when using an `src` icon.\n   */\n  useCurrentColor?: boolean;\n  /**\n   * Overrides the default color with a custom color.\n   */\n  customColor?: string;\n}\n\nconst Icon = forwardRef(\n  (\n    {\n      /**\n       * component id\n       */\n      id,\n      className,\n      icon = \"\",\n      label,\n      type = \"svg\",\n      size = 16,\n      ignoreFocusStyle = false,\n      tabindex: externalTabIndex,\n      \"aria-hidden\": ariaHidden,\n      style,\n      useCurrentColor = false,\n      customColor,\n      \"data-testid\": dataTestId\n    }: IconProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const overrideExternalTabIndex = externalTabIndex && +externalTabIndex;\n    const { screenReaderAccessProps, onClickCallback, computedClassName, iconRef } = useIconProps({\n      label,\n      className,\n      isDecorationOnly: ariaHidden,\n      ignoreFocusStyle,\n      externalTabIndex: overrideExternalTabIndex || undefined\n    });\n\n    const mergedRef = useMergeRef(ref, iconRef);\n\n    if (!icon) {\n      return null;\n    }\n\n    const isFunctionType = typeof icon === \"function\";\n    const overrideDataTestId = dataTestId || getTestId(ComponentDefaultTestId.ICON, id);\n\n    if (type === \"svg\" || isFunctionType || typeof icon === \"object\") {\n      return renderIcon(icon as React.FC<IconSubComponentProps>, {\n        id,\n        ...screenReaderAccessProps,\n        ref: isFunctionType ? undefined : mergedRef,\n        size: size.toString(),\n        className: computedClassName,\n        style,\n        \"data-testid\": overrideDataTestId\n      });\n    }\n    if (type === \"src\") {\n      return (\n        <CustomSvgIcon\n          id={id}\n          src={icon}\n          {...screenReaderAccessProps}\n          className={cx(computedClassName)}\n          replaceToCurrentColor={useCurrentColor}\n          customColor={customColor}\n          size={size}\n          data-testid={overrideDataTestId}\n        />\n      );\n    }\n    return (\n      <FontIcon\n        id={id}\n        {...screenReaderAccessProps}\n        className={cx(computedClassName)}\n        onClick={onClickCallback}\n        ref={mergedRef}\n        icon={icon}\n        data-testid={overrideDataTestId}\n      />\n    );\n  }\n);\n\nexport default Icon;\n"
  },
  {
    "path": "packages/components/icon/src/Icon/__tests__/allIcons.test.ts",
    "content": "import { describe, it, expect } from \"vitest\";\nimport { getClickableScreenReaderAccessProps, getClickableIconScreenReaderAccessProps } from \"@vibe/shared\";\nimport { getIconScreenReaderAccessProps } from \"../hooks/useIconScreenReaderAccessProps\";\n\ndescribe(\"getIconScreenReaderAccessProps\", () => {\n  it(\"should return correct props for clickable icon with label\", () => {\n    const props = getIconScreenReaderAccessProps({\n      isClickable: true,\n      isDecorationOnly: false,\n      label: \"Icon Label\"\n    });\n    expect(props).toEqual({\n      role: \"button\",\n      tabIndex: 0,\n      \"aria-hidden\": false,\n      \"aria-label\": \"Icon Label\"\n    });\n  });\n\n  it(\"should return correct props for non-clickable decoration icon without label\", () => {\n    const props = getIconScreenReaderAccessProps({\n      isClickable: false,\n      isDecorationOnly: true,\n      label: \"\"\n    });\n    expect(props).toEqual({\n      role: undefined,\n      \"aria-hidden\": true,\n      tabIndex: undefined,\n      \"aria-label\": undefined\n    });\n  });\n\n  it(\"should return correct props for non-clickable icon with label\", () => {\n    const props = getIconScreenReaderAccessProps({\n      isClickable: false,\n      isDecorationOnly: false,\n      label: \"Icon Label\"\n    });\n    expect(props).toEqual({\n      role: \"img\",\n      \"aria-hidden\": false,\n      tabIndex: 0,\n      \"aria-label\": \"Icon Label\"\n    });\n  });\n});\n\ndescribe(\"getClickableScreenReaderAccessProps\", () => {\n  it(\"should return correct props for keyboard accessible clickable element\", () => {\n    const props = getClickableScreenReaderAccessProps({\n      isKeyboardAccessible: true,\n      isDecorationOnly: false,\n      isHoverOnly: false\n    });\n    expect(props).toEqual({\n      role: \"button\",\n      tabIndex: 0,\n      \"aria-hidden\": false\n    });\n  });\n\n  it(\"should return correct props for non-keyboard accessible clickable element\", () => {\n    const props = getClickableScreenReaderAccessProps({\n      isKeyboardAccessible: false,\n      isDecorationOnly: false,\n      isHoverOnly: false\n    });\n    expect(props).toEqual({\n      role: \"button\",\n      tabIndex: -1,\n      \"aria-hidden\": false\n    });\n  });\n\n  it(\"should return correct props for decoration-only clickable element\", () => {\n    const props = getClickableScreenReaderAccessProps({\n      isKeyboardAccessible: true,\n      isDecorationOnly: true,\n      isHoverOnly: false\n    });\n    expect(props).toEqual({\n      role: \"button\",\n      tabIndex: 0,\n      \"aria-hidden\": true\n    });\n  });\n\n  it(\"should return correct props for hover-only clickable element\", () => {\n    const props = getClickableScreenReaderAccessProps({\n      isKeyboardAccessible: true,\n      isDecorationOnly: false,\n      isHoverOnly: true\n    });\n    expect(props).toEqual({\n      role: \"img\",\n      tabIndex: 0,\n      \"aria-hidden\": false\n    });\n  });\n});\n\ndescribe(\"getClickableIconScreenReaderAccessProps\", () => {\n  it(\"should return correct props for clickable icon with label and keyboard accessibility\", () => {\n    const props = getClickableIconScreenReaderAccessProps({\n      label: \"Clickable Icon\",\n      isDecorationOnly: false,\n      isKeyboardAccessible: true,\n      isHoverOnly: false\n    });\n    expect(props).toEqual({\n      role: \"button\",\n      tabIndex: 0,\n      \"aria-hidden\": false,\n      \"aria-label\": \"Clickable Icon\"\n    });\n  });\n\n  it(\"should return correct props for clickable icon with label and without keyboard accessibility\", () => {\n    const props = getClickableIconScreenReaderAccessProps({\n      label: \"Clickable Icon\",\n      isDecorationOnly: false,\n      isKeyboardAccessible: false,\n      isHoverOnly: false\n    });\n    expect(props).toEqual({\n      role: \"button\",\n      tabIndex: -1,\n      \"aria-hidden\": false,\n      \"aria-label\": \"Clickable Icon\"\n    });\n  });\n\n  it(\"should return correct props for decoration-only clickable icon with label\", () => {\n    const props = getClickableIconScreenReaderAccessProps({\n      label: \"Clickable Icon\",\n      isDecorationOnly: true,\n      isKeyboardAccessible: true,\n      isHoverOnly: false\n    });\n    expect(props).toEqual({\n      role: \"button\",\n      tabIndex: 0,\n      \"aria-hidden\": true,\n      \"aria-label\": \"Clickable Icon\"\n    });\n  });\n\n  it(\"should return correct props for hover-only clickable icon with label\", () => {\n    const props = getClickableIconScreenReaderAccessProps({\n      label: \"Hover Icon\",\n      isDecorationOnly: false,\n      isKeyboardAccessible: true,\n      isHoverOnly: true\n    });\n    expect(props).toEqual({\n      role: \"img\",\n      tabIndex: 0,\n      \"aria-hidden\": false,\n      \"aria-label\": \"Hover Icon\"\n    });\n  });\n});\n"
  },
  {
    "path": "packages/components/icon/src/Icon/hooks/useIconProps.tsx",
    "content": "import { type KeyboardEvent, type MouseEvent, type UIEvent, useCallback, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { useEventListener, useKeyEvent, keyCodes } from \"@vibe/shared\";\nimport useIconScreenReaderAccessProps from \"./useIconScreenReaderAccessProps\";\nimport { noop as NOOP } from \"es-toolkit\";\nimport styles from \"../Icon.module.scss\";\n\nconst KEYS = [keyCodes.ENTER, keyCodes.SPACE];\n\nexport default function useIconProps({\n  onClick,\n  className,\n  clickable,\n  ignoreFocusStyle,\n  isDecorationOnly,\n  label,\n  externalTabIndex\n}: {\n  onClick?: (event: UIEvent) => void;\n  className?: string;\n  clickable?: boolean;\n  ignoreFocusStyle?: boolean;\n  isDecorationOnly?: boolean;\n  label?: string;\n  externalTabIndex?: number | undefined;\n}) {\n  const iconRef = useRef(null);\n  const onEnterCallback = useCallback(\n    (event: KeyboardEvent) => {\n      const isActive = document.activeElement === iconRef.current;\n      if (!isActive) {\n        return;\n      }\n      onClick(event);\n    },\n    [iconRef, onClick]\n  );\n\n  const onMouseDown = useCallback((event: MouseEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const computedClassName = useMemo(() => {\n    return cx(styles.icon, className, {\n      [styles.clickable]: clickable,\n      [styles.noFocusStyle]: ignoreFocusStyle\n    });\n  }, [clickable, className, ignoreFocusStyle]);\n\n  useEventListener({\n    eventName: \"mousedown\",\n    callback: onMouseDown,\n    ref: iconRef\n  });\n\n  useKeyEvent({\n    keys: KEYS,\n    ref: iconRef,\n    callback: onEnterCallback,\n    ignoreDocumentFallback: true,\n    capture: true,\n    stopPropagation: true,\n    preventDefault: true\n  });\n\n  const onClickCallback = useCallback(\n    (event: MouseEvent) => {\n      const callback = onClick || NOOP;\n      callback(event);\n    },\n    [onClick]\n  );\n\n  const screenReaderAccessProps = useIconScreenReaderAccessProps({\n    isClickable: clickable,\n    label,\n    isDecorationOnly\n  });\n\n  screenReaderAccessProps.tabIndex = externalTabIndex ?? screenReaderAccessProps.tabIndex;\n\n  return {\n    screenReaderAccessProps,\n    onClickCallback,\n    computedClassName,\n    onEnterCallback,\n    iconRef\n  };\n}\n"
  },
  {
    "path": "packages/components/icon/src/Icon/hooks/useIconScreenReaderAccessProps.ts",
    "content": "import { useMemo } from \"react\";\nimport { getClickableIconScreenReaderAccessProps } from \"@vibe/shared\";\n\nexport function getIconScreenReaderAccessProps({\n  isClickable,\n  isDecorationOnly,\n  isKeyboardAccessible,\n  label\n}: {\n  isClickable: boolean;\n  isDecorationOnly: boolean;\n  isKeyboardAccessible?: boolean;\n  label: string;\n}) {\n  const overrideIsDecorationOnly = isDecorationOnly ?? (!isClickable && !label);\n  if (isClickable || label) {\n    return getClickableIconScreenReaderAccessProps({\n      label,\n      isDecorationOnly: overrideIsDecorationOnly,\n      isKeyboardAccessible,\n      isHoverOnly: !isClickable && !!label\n    });\n  }\n  return {\n    role: overrideIsDecorationOnly ? undefined : \"img\",\n    \"aria-hidden\": overrideIsDecorationOnly,\n    tabIndex: undefined,\n    \"aria-label\": isDecorationOnly ? undefined : label\n  };\n}\n\nexport default function useIconScreenReaderAccessProps({\n  isClickable,\n  label,\n  isDecorationOnly\n}: {\n  isClickable: boolean;\n  label: string;\n  isDecorationOnly: boolean;\n}) {\n  const screenReaderAccessProps = useMemo(\n    () =>\n      getIconScreenReaderAccessProps({\n        isClickable,\n        label,\n        isDecorationOnly\n      }),\n    [isClickable, label, isDecorationOnly]\n  );\n  return screenReaderAccessProps;\n}\n"
  },
  {
    "path": "packages/components/icon/src/Icon/index.ts",
    "content": "export { default as Icon, type IconProps } from \"./Icon\";\nexport { default as CustomSvgIcon, type CustomSvgIconProps } from \"./CustomSvgIcon/CustomSvgIcon\";\n\nexport * from \"./types\";\n"
  },
  {
    "path": "packages/components/icon/src/Icon/types.ts",
    "content": "import { type CSSProperties, type Ref } from \"react\";\n\nexport interface IconSubComponentProps {\n  /**\n   * Ref for the icon component.\n   */\n  ref?: Ref<HTMLElement>;\n  /**\n   * The ID of the icon component.\n   */\n  id?: string;\n  /**\n   * The size of the icon.\n   */\n  size?: string | number;\n  /**\n   * Class name applied to the icon.\n   */\n  className?: string;\n  /**\n   * Inline styles applied to the icon.\n   */\n  style?: CSSProperties;\n  /**\n   * Test ID for testing purposes.\n   */\n  \"data-testid\"?: string;\n}\n\nexport type SubIcon = string | React.FC<IconSubComponentProps> | null;\nexport type IconType = \"svg\" | \"font\" | \"src\";\n"
  },
  {
    "path": "packages/components/icon/src/index.ts",
    "content": "export * from \"./Icon\";\n"
  },
  {
    "path": "packages/components/icon/src/types/files.d.ts",
    "content": "// SCSS\ndeclare module \"*.module.scss\" {\n  const classes: { [key: string]: string };\n  export default classes;\n}\n\n// SVG\ndeclare module \"*.svg\" {\n  const content: string;\n  export default content;\n}\n\ndeclare module \"*.png\";\ndeclare module \"*.mp4\";\ndeclare module \"*.pdf\";\n"
  },
  {
    "path": "packages/components/icon/tsconfig.json",
    "content": "{\n  \"extends\": \"@vibe/config/tsconfig\",\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"rootDir\": \"src\"\n  },\n  \"include\": [\"src/**/*\"]\n}\n"
  },
  {
    "path": "packages/components/icon-button/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [4.0.1](https://github.com/mondaycom/vibe/compare/@vibe/icon-button@4.0.0...@vibe/icon-button@4.0.1) (2026-04-16)\n\n**Note:** Version bump only for package @vibe/icon-button\n\n\n\n\n\n## [3.0.5](https://github.com/mondaycom/vibe/compare/@vibe/icon-button@3.0.4...@vibe/icon-button@3.0.5) (2026-02-27)\n\n**Note:** Version bump only for package @vibe/icon-button\n\n\n\n\n\n## [3.0.4](https://github.com/mondaycom/vibe/compare/@vibe/icon-button@3.0.3...@vibe/icon-button@3.0.4) (2026-01-28)\n\n**Note:** Version bump only for package @vibe/icon-button\n\n\n\n\n\n## [3.0.3](https://github.com/mondaycom/vibe/compare/@vibe/icon-button@3.0.2...@vibe/icon-button@3.0.3) (2026-01-18)\n\n**Note:** Version bump only for package @vibe/icon-button\n\n\n\n\n\n## [3.0.2](https://github.com/mondaycom/vibe/compare/@vibe/icon-button@3.0.1...@vibe/icon-button@3.0.2) (2026-01-04)\n\n**Note:** Version bump only for package @vibe/icon-button\n\n\n\n\n\n## 3.0.1 (2026-01-04)\n\n**Note:** Version bump only for package @vibe/icon-button\n"
  },
  {
    "path": "packages/components/icon-button/package.json",
    "content": "{\n  \"name\": \"@vibe/icon-button\",\n  \"version\": \"4.0.1\",\n  \"description\": \"Vibe sub-package for icon button component\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/mondaycom/vibe.git\",\n    \"directory\": \"packages/components/icon-button\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/mondaycom/vibe/issues\"\n  },\n  \"homepage\": \"https://github.com/mondaycom/vibe#readme\",\n  \"author\": \"monday.com\",\n  \"license\": \"MIT\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.js\",\n  \"types\": \"dist/index.d.ts\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \".\": {\n      \"types\": \"./dist/index.d.ts\",\n      \"import\": \"./dist/index.js\",\n      \"default\": \"./dist/index.js\"\n    },\n    \"./mockedClassNames\": {\n      \"import\": \"./dist/mocked_classnames/index.js\",\n      \"default\": \"./dist/mocked_classnames/index.js\"\n    }\n  },\n  \"scripts\": {\n    \"build\": \"rollup -c && yarn build:mocked-classnames\",\n    \"build:mocked-classnames\": \"[ \\\"$SKIP_RELEASE_ARTIFACTS\\\" = \\\"true\\\" ] || mock_classnames=on rollup -c\",\n    \"test\": \"vitest run\",\n    \"lint\": \"eslint \\\"./src/**/*.{js,jsx,ts,tsx}\\\"\"\n  },\n  \"dependencies\": {\n    \"@vibe/button\": \"4.0.1\",\n    \"@vibe/icon\": \"4.0.1\",\n    \"@vibe/icons\": \"4.0.0\",\n    \"@vibe/shared\": \"4.0.1\",\n    \"@vibe/tooltip\": \"4.0.1\",\n    \"classnames\": \"^2.5.1\",\n    \"es-toolkit\": \"^1.39.10\"\n  },\n  \"devDependencies\": {\n    \"@testing-library/react\": \"^12.1.2\",\n    \"@vibe/config\": \"4.0.0\",\n    \"react\": \"^16.13.0\",\n    \"react-dom\": \"^16.13.0\",\n    \"react-test-renderer\": \"16\",\n    \"typescript\": \"^5.9.3\",\n    \"vitest\": \"^1.6.0\"\n  },\n  \"peerDependencies\": {\n    \"react\": \">=16.9.0\",\n    \"react-dom\": \">=16.9.0\"\n  },\n  \"sideEffects\": [\n    \"*.scss\",\n    \"*.css\",\n    \"*.scss.js\",\n    \"*.css.js\"\n  ],\n  \"eslintConfig\": {\n    \"extends\": [\n      \"../../../node_modules/@vibe/config/.eslintrc.cjs\"\n    ]\n  }\n}\n"
  },
  {
    "path": "packages/components/icon-button/rollup.config.mjs",
    "content": "import config from \"@vibe/config/rollup.config\";\n\nexport default config;\n"
  },
  {
    "path": "packages/components/icon-button/src/IconButton/IconButton.module.scss",
    "content": ".wrapper {\n  width: fit-content;\n  height: fit-content;\n  display: inline-flex;\n}\n\n.referenceWrapper {\n  display: inline-flex;\n}\n\n.referenceWrapper button .loader {\n  width: 16px;\n  height: 16px;\n  &.xxs {\n    width: 10px;\n    height: 10px;\n    svg {\n      display: block;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/components/icon-button/src/IconButton/IconButton.tsx",
    "content": "import React, { type AriaAttributes, forwardRef, Fragment, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { noop as NOOP } from \"es-toolkit\";\nimport {\n  useMergeRef,\n  type VibeComponentProps,\n  getTestId,\n  ComponentDefaultTestId,\n  ComponentVibeId,\n  getStyle\n} from \"@vibe/shared\";\nimport { Tooltip, type TooltipProps } from \"@vibe/tooltip\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { AddSmall } from \"@vibe/icons\";\nimport { getWidthHeight, type Size } from \"./services/IconButton-helpers\";\nimport { Button, type ButtonColor, type ButtonType } from \"@vibe/button\";\nimport styles from \"./IconButton.module.scss\";\n\nexport interface IconButtonProps extends VibeComponentProps {\n  /**\n   * Callback fired when the button is clicked.\n   */\n  onClick?: (event: React.MouseEvent) => void;\n  /**\n   * Class name applied to the button wrapper.\n   */\n  wrapperClassName?: string;\n  /**\n   * Class name applied to the icon.\n   */\n  iconClassName?: string;\n  /**\n   * The icon displayed inside the button.\n   */\n  icon?: SubIcon;\n  /**\n   * The ID of the element that labels this button.\n   */\n  \"aria-labelledby\"?: string;\n  /**\n   * The ARIA label for accessibility.\n   */\n  \"aria-label\"?: string;\n  /**\n   * If true, indicates that the button controls a popup.\n   */\n  \"aria-haspopup\"?: React.HTMLProps<HTMLButtonElement>[\"aria-haspopup\"];\n  /**\n   * If true, indicates that the associated popup is open.\n   */\n  \"aria-expanded\"?: boolean;\n  /**\n   * The ID of the region controlled by the button.\n   */\n  \"aria-controls\"?: string;\n  /**\n   * ID of the element describing the button.\n   */\n  \"aria-describedby\"?: AriaAttributes[\"aria-describedby\"];\n  /**\n   * If true, hides the button from assistive technologies.\n   */\n  \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n  /**\n   * Indicates the current \"pressed\" state of toggle buttons.\n   */\n  \"aria-pressed\"?: AriaAttributes[\"aria-pressed\"];\n  /**\n   * The size of the button.\n   */\n  size?: Size;\n  /**\n   * If true, hides the tooltip.\n   */\n  hideTooltip?: boolean;\n  /**\n   * Props for the Tooltip component.\n   */\n  tooltipProps?: Partial<TooltipProps>;\n  /**\n   * Tooltip content displayed on hover.\n   */\n  tooltipContent?: string;\n  /**\n   * The button variant.\n   */\n  kind?: ButtonType;\n  /**\n   * If true, the button is in an active state.\n   */\n  active?: boolean;\n  /**\n   * The color of the button.\n   */\n  color?: ButtonColor;\n  /**\n   * If true, the button is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If disabled, this message will be displayed in the tooltip.\n   */\n  disabledReason?: string;\n  /**\n   * If true, the focus indicator is displayed inside the button instead of around it.\n   */\n  insetFocus?: boolean;\n  /**\n   * The tab order of the button.\n   */\n  tabIndex?: number;\n  /**\n   * If true, a loader replaces the icon.\n   */\n  loading?: boolean;\n}\n\nconst IconButton = forwardRef(\n  (\n    {\n      className,\n      wrapperClassName,\n      iconClassName,\n      id,\n      icon = AddSmall,\n      size = \"medium\",\n      tooltipProps = {} as TooltipProps,\n      tooltipContent,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-label\": ariaLabel,\n      \"aria-haspopup\": ariaHasPopup,\n      \"aria-expanded\": ariaExpanded,\n      \"aria-controls\": ariaControls,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-hidden\": ariaHidden,\n      \"aria-pressed\": ariaPressed,\n      hideTooltip = false,\n      kind = \"tertiary\",\n      active,\n      disabled = false,\n      disabledReason,\n      onClick = NOOP,\n      color,\n      \"data-testid\": dataTestId,\n      insetFocus = false,\n      tabIndex,\n      loading = false\n    }: IconButtonProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const overrideTooltipContent = useMemo(\n      () => tooltipProps?.content || tooltipContent,\n      [tooltipProps?.content, tooltipContent]\n    );\n\n    const buttonAriaLabel = useMemo(() => {\n      if (ariaLabel) return ariaLabel;\n      if (typeof overrideTooltipContent === \"string\") return overrideTooltipContent;\n      return undefined;\n    }, [ariaLabel, overrideTooltipContent]);\n\n    const iconSize = useMemo(() => {\n      switch (size) {\n        case \"xxs\":\n        case \"xs\":\n          return 16;\n        case \"small\":\n        case \"medium\":\n        case \"large\":\n          return 20;\n        default:\n          return 24;\n      }\n    }, [size]);\n\n    const overrideStyle = useMemo(() => {\n      let style = {\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        padding: 0\n      } as React.CSSProperties;\n\n      if (size) {\n        style = { ...style, ...getWidthHeight(size) };\n      }\n      return style;\n    }, [size]);\n\n    const calculatedTooltipContent = useMemo(() => {\n      if (hideTooltip) return null;\n      if (disabled && disabledReason) return disabledReason;\n      if (overrideTooltipContent) return overrideTooltipContent as never;\n      return ariaLabel;\n    }, [hideTooltip, disabled, disabledReason, overrideTooltipContent, ariaLabel]);\n\n    const IconButtonWrapper = wrapperClassName ? \"div\" : Fragment;\n    const iconButtonWrapperProps = useMemo(() => {\n      return wrapperClassName ? { className: cx(wrapperClassName, styles.wrapper) } : {};\n    }, [wrapperClassName]);\n\n    return (\n      <IconButtonWrapper {...iconButtonWrapperProps}>\n        <Tooltip\n          {...tooltipProps}\n          content={calculatedTooltipContent}\n          referenceWrapperClassName={styles.referenceWrapper}\n        >\n          <Button\n            onClick={onClick}\n            disabled={disabled}\n            color={color}\n            kind={kind}\n            aria-labelledby={ariaLabelledBy}\n            aria-label={buttonAriaLabel}\n            aria-haspopup={ariaHasPopup}\n            aria-expanded={ariaExpanded}\n            aria-controls={ariaControls}\n            aria-describedby={ariaDescribedBy}\n            aria-hidden={ariaHidden}\n            aria-pressed={ariaPressed}\n            ref={mergedRef}\n            id={id}\n            data-testid={dataTestId || getTestId(ComponentDefaultTestId.ICON_BUTTON, id)}\n            data-vibe={ComponentVibeId.ICON_BUTTON}\n            noSidePadding\n            active={active}\n            className={className}\n            style={overrideStyle}\n            insetFocus={insetFocus}\n            tabIndex={tabIndex}\n            loading={loading}\n            loaderClassName={cx(styles.loader, getStyle(styles, size))}\n          >\n            <Icon icon={icon} type=\"svg\" size={iconSize} ignoreFocusStyle className={iconClassName} />\n          </Button>\n        </Tooltip>\n      </IconButtonWrapper>\n    );\n  }\n);\n\nexport default IconButton;\n"
  },
  {
    "path": "packages/components/icon-button/src/IconButton/__tests__/IconButton.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport IconButton from \"../IconButton\";\nimport { SIZES } from \"@vibe/shared\";\n\ndescribe(\"IconButton renders correctly\", () => {\n  it(\"with empty props\", () => {\n    const tree = renderer.create(<IconButton />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with id\", () => {\n    const tree = renderer.create(<IconButton id=\"icon-button\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with\", () => {\n    const tree = renderer.create(<IconButton className=\"class-name\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with disabled\", () => {\n    const tree = renderer.create(<IconButton disabled />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(`with size - xs`, () => {\n    const tree = renderer.create(<IconButton size=\"xs\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(`with size - medium`, () => {\n    const tree = renderer.create(<IconButton size=\"medium\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  Object.values(SIZES).forEach(size => {\n    it(`with size - ${size}`, () => {\n      const tree = renderer.create(<IconButton size={size} />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n  });\n\n  it(\"with aria label\", () => {\n    const tree = renderer.create(<IconButton aria-label=\"My aria label\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with active\", () => {\n    const tree = renderer.create(<IconButton active />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/components/icon-button/src/IconButton/__tests__/IconButton.test.tsx",
    "content": "import { vi, afterEach, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { fireEvent, render, cleanup, screen, act } from \"@testing-library/react\";\nimport IconButton, { type IconButtonProps } from \"../IconButton\";\n\nvi.useFakeTimers();\n\nconst ariaLabel = \"Button Icon\";\n\nconst renderComponent = (props: IconButtonProps = {}) => {\n  return render(<IconButton aria-label={ariaLabel} {...props} />);\n};\n\ndescribe(\"IconButton tests\", () => {\n  afterEach(() => {\n    cleanup();\n  });\n\n  describe(\"click\", () => {\n    it(\"should call the callback function when clicked\", () => {\n      const onClick = vi.fn();\n      renderComponent({ onClick });\n      const component = screen.getByLabelText(ariaLabel);\n      fireEvent.click(component);\n      expect(onClick.mock.calls.length).toBe(1);\n    });\n\n    it(\"should not call the callback if disabled when clicked\", () => {\n      const onClick = vi.fn();\n      renderComponent({ onClick, disabled: true });\n      const component = screen.getByLabelText(ariaLabel);\n      fireEvent.click(component);\n      expect(onClick.mock.calls.length).toBe(0);\n    });\n  });\n\n  describe(\"Tooltips\", () => {\n    it(\"should display the tooltip content\", async () => {\n      const tooltipContent = \"My Text\";\n\n      renderComponent({ tooltipContent });\n      const component = screen.getByLabelText(ariaLabel);\n      act(() => {\n        fireEvent.mouseEnter(component);\n      });\n      vi.advanceTimersByTime(1000);\n      const content = screen.getByText(tooltipContent);\n      expect(content).toBeTruthy();\n      act(() => {\n        fireEvent.mouseLeave(component);\n      });\n      vi.advanceTimersByTime(1000);\n    });\n\n    it(\"should display the tooltip with aria label\", () => {\n      renderComponent();\n      const component = screen.getByLabelText(ariaLabel);\n      act(() => {\n        fireEvent.mouseEnter(component);\n      });\n      vi.advanceTimersByTime(1000);\n      const content = screen.getByText(ariaLabel);\n      expect(content).toBeTruthy();\n      act(() => {\n        fireEvent.mouseLeave(component);\n      });\n      vi.advanceTimersByTime(1000);\n    });\n\n    it(\"should display not disabledReason if disabled is false\", () => {\n      const disabledReason = \"I'm a disabled button\";\n\n      renderComponent({ disabledReason });\n      const component = screen.getByLabelText(ariaLabel);\n      act(() => {\n        fireEvent.mouseEnter(component);\n      });\n      vi.advanceTimersByTime(1000);\n      const content = screen.queryByText(disabledReason);\n      expect(content).toBeFalsy();\n      act(() => {\n        fireEvent.mouseLeave(component);\n      });\n      vi.advanceTimersByTime(1000);\n    });\n\n    it(\"should display disabledReason if disabled is true\", () => {\n      const disabledReason = \"I'm a disabled button\";\n\n      renderComponent({ disabledReason, disabled: true });\n      const component = screen.getByLabelText(ariaLabel);\n      act(() => {\n        fireEvent.mouseEnter(component);\n      });\n      vi.advanceTimersByTime(1000);\n      const content = screen.queryByText(disabledReason);\n      expect(content).toBeTruthy();\n      act(() => {\n        fireEvent.mouseLeave(component);\n      });\n      vi.advanceTimersByTime(1000);\n    });\n  });\n\n  describe(\"a11y\", () => {\n    describe(\"aria-hidden\", () => {\n      it(\"should pass aria-hidden attribute to Button component\", () => {\n        const { getByRole } = renderComponent({ \"aria-hidden\": true });\n        const buttonComponent = getByRole(\"button\", { hidden: true });\n        expect(buttonComponent).toHaveAttribute(\"aria-hidden\", \"true\");\n      });\n\n      it(\"should not have aria-hidden attribute on Button component if not specified\", () => {\n        const { getByRole } = renderComponent();\n        const buttonComponent = getByRole(\"button\");\n        expect(buttonComponent).not.toHaveAttribute(\"aria-hidden\");\n      });\n    });\n  });\n});\n"
  },
  {
    "path": "packages/components/icon-button/src/IconButton/__tests__/__snapshots__/IconButton.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`IconButton renders correctly > with 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"class-name button sizeMedium kindTertiary colorPrimary noSidePadding\"\n  data-testid=\"icon-button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  style={\n    {\n      \"alignItems\": \"center\",\n      \"height\": \"40px\",\n      \"justifyContent\": \"center\",\n      \"padding\": 0,\n      \"width\": \"40px\",\n    }\n  }\n  type=\"button\"\n>\n  <svg\n    aria-hidden={true}\n    className=\"icon noFocusStyle\"\n    data-testid=\"icon\"\n    data-vibe=\"Icon\"\n    fill=\"currentColor\"\n    height=\"20\"\n    viewBox=\"0 0 20 20\"\n    width=\"20\"\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M10.75 6C10.75 5.58579 10.4142 5.25 10 5.25C9.58579 5.25 9.25 5.58579 9.25 6V9.25H6C5.58579 9.25 5.25 9.58579 5.25 10C5.25 10.4142 5.58579 10.75 6 10.75H9.25V14C9.25 14.4142 9.58579 14.75 10 14.75C10.4142 14.75 10.75 14.4142 10.75 14V10.75H14C14.4142 10.75 14.75 10.4142 14.75 10C14.75 9.58579 14.4142 9.25 14 9.25H10.75V6Z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n</button>\n`;\n\nexports[`IconButton renders correctly > with active 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"button sizeMedium kindTertiary colorPrimary colorPrimaryActive undefined noSidePadding\"\n  data-testid=\"icon-button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  style={\n    {\n      \"alignItems\": \"center\",\n      \"height\": \"40px\",\n      \"justifyContent\": \"center\",\n      \"padding\": 0,\n      \"width\": \"40px\",\n    }\n  }\n  type=\"button\"\n>\n  <svg\n    aria-hidden={true}\n    className=\"icon noFocusStyle\"\n    data-testid=\"icon\"\n    data-vibe=\"Icon\"\n    fill=\"currentColor\"\n    height=\"20\"\n    viewBox=\"0 0 20 20\"\n    width=\"20\"\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M10.75 6C10.75 5.58579 10.4142 5.25 10 5.25C9.58579 5.25 9.25 5.58579 9.25 6V9.25H6C5.58579 9.25 5.25 9.58579 5.25 10C5.25 10.4142 5.58579 10.75 6 10.75H9.25V14C9.25 14.4142 9.58579 14.75 10 14.75C10.4142 14.75 10.75 14.4142 10.75 14V10.75H14C14.4142 10.75 14.75 10.4142 14.75 10C14.75 9.58579 14.4142 9.25 14 9.25H10.75V6Z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n</button>\n`;\n\nexports[`IconButton renders correctly > with aria label 1`] = `\n<span\n  className=\"referenceWrapper\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onContextMenu={[Function]}\n  onFocus={[Function]}\n  onKeyDown={[Function]}\n  onMouseDown={[Function]}\n  onMouseEnter={[Function]}\n  onMouseLeave={[Function]}\n>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    aria-label=\"My aria label\"\n    className=\"button sizeMedium kindTertiary colorPrimary noSidePadding\"\n    data-testid=\"icon-button\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    style={\n      {\n        \"alignItems\": \"center\",\n        \"height\": \"40px\",\n        \"justifyContent\": \"center\",\n        \"padding\": 0,\n        \"width\": \"40px\",\n      }\n    }\n    type=\"button\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      width=\"20\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M10.75 6C10.75 5.58579 10.4142 5.25 10 5.25C9.58579 5.25 9.25 5.58579 9.25 6V9.25H6C5.58579 9.25 5.25 9.58579 5.25 10C5.25 10.4142 5.58579 10.75 6 10.75H9.25V14C9.25 14.4142 9.58579 14.75 10 14.75C10.4142 14.75 10.75 14.4142 10.75 14V10.75H14C14.4142 10.75 14.75 10.4142 14.75 10C14.75 9.58579 14.4142 9.25 14 9.25H10.75V6Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  </button>\n</span>\n`;\n\nexports[`IconButton renders correctly > with disabled 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={true}\n  className=\"button sizeMedium kindTertiary colorPrimary noSidePadding disabled\"\n  data-testid=\"icon-button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  style={\n    {\n      \"alignItems\": \"center\",\n      \"height\": \"40px\",\n      \"justifyContent\": \"center\",\n      \"padding\": 0,\n      \"width\": \"40px\",\n    }\n  }\n  tabIndex={-1}\n  type=\"button\"\n>\n  <svg\n    aria-hidden={true}\n    className=\"icon noFocusStyle\"\n    data-testid=\"icon\"\n    data-vibe=\"Icon\"\n    fill=\"currentColor\"\n    height=\"20\"\n    viewBox=\"0 0 20 20\"\n    width=\"20\"\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M10.75 6C10.75 5.58579 10.4142 5.25 10 5.25C9.58579 5.25 9.25 5.58579 9.25 6V9.25H6C5.58579 9.25 5.25 9.58579 5.25 10C5.25 10.4142 5.58579 10.75 6 10.75H9.25V14C9.25 14.4142 9.58579 14.75 10 14.75C10.4142 14.75 10.75 14.4142 10.75 14V10.75H14C14.4142 10.75 14.75 10.4142 14.75 10C14.75 9.58579 14.4142 9.25 14 9.25H10.75V6Z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n</button>\n`;\n\nexports[`IconButton renders correctly > with empty props 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"button sizeMedium kindTertiary colorPrimary noSidePadding\"\n  data-testid=\"icon-button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  style={\n    {\n      \"alignItems\": \"center\",\n      \"height\": \"40px\",\n      \"justifyContent\": \"center\",\n      \"padding\": 0,\n      \"width\": \"40px\",\n    }\n  }\n  type=\"button\"\n>\n  <svg\n    aria-hidden={true}\n    className=\"icon noFocusStyle\"\n    data-testid=\"icon\"\n    data-vibe=\"Icon\"\n    fill=\"currentColor\"\n    height=\"20\"\n    viewBox=\"0 0 20 20\"\n    width=\"20\"\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M10.75 6C10.75 5.58579 10.4142 5.25 10 5.25C9.58579 5.25 9.25 5.58579 9.25 6V9.25H6C5.58579 9.25 5.25 9.58579 5.25 10C5.25 10.4142 5.58579 10.75 6 10.75H9.25V14C9.25 14.4142 9.58579 14.75 10 14.75C10.4142 14.75 10.75 14.4142 10.75 14V10.75H14C14.4142 10.75 14.75 10.4142 14.75 10C14.75 9.58579 14.4142 9.25 14 9.25H10.75V6Z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n</button>\n`;\n\nexports[`IconButton renders correctly > with id 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"button sizeMedium kindTertiary colorPrimary noSidePadding\"\n  data-testid=\"icon-button_icon-button\"\n  data-vibe=\"Button\"\n  id=\"icon-button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  style={\n    {\n      \"alignItems\": \"center\",\n      \"height\": \"40px\",\n      \"justifyContent\": \"center\",\n      \"padding\": 0,\n      \"width\": \"40px\",\n    }\n  }\n  type=\"button\"\n>\n  <svg\n    aria-hidden={true}\n    className=\"icon noFocusStyle\"\n    data-testid=\"icon\"\n    data-vibe=\"Icon\"\n    fill=\"currentColor\"\n    height=\"20\"\n    viewBox=\"0 0 20 20\"\n    width=\"20\"\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M10.75 6C10.75 5.58579 10.4142 5.25 10 5.25C9.58579 5.25 9.25 5.58579 9.25 6V9.25H6C5.58579 9.25 5.25 9.58579 5.25 10C5.25 10.4142 5.58579 10.75 6 10.75H9.25V14C9.25 14.4142 9.58579 14.75 10 14.75C10.4142 14.75 10.75 14.4142 10.75 14V10.75H14C14.4142 10.75 14.75 10.4142 14.75 10C14.75 9.58579 14.4142 9.25 14 9.25H10.75V6Z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n</button>\n`;\n\nexports[`IconButton renders correctly > with size - large 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"button sizeMedium kindTertiary colorPrimary noSidePadding\"\n  data-testid=\"icon-button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  style={\n    {\n      \"alignItems\": \"center\",\n      \"height\": \"48px\",\n      \"justifyContent\": \"center\",\n      \"padding\": 0,\n      \"width\": \"48px\",\n    }\n  }\n  type=\"button\"\n>\n  <svg\n    aria-hidden={true}\n    className=\"icon noFocusStyle\"\n    data-testid=\"icon\"\n    data-vibe=\"Icon\"\n    fill=\"currentColor\"\n    height=\"20\"\n    viewBox=\"0 0 20 20\"\n    width=\"20\"\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M10.75 6C10.75 5.58579 10.4142 5.25 10 5.25C9.58579 5.25 9.25 5.58579 9.25 6V9.25H6C5.58579 9.25 5.25 9.58579 5.25 10C5.25 10.4142 5.58579 10.75 6 10.75H9.25V14C9.25 14.4142 9.58579 14.75 10 14.75C10.4142 14.75 10.75 14.4142 10.75 14V10.75H14C14.4142 10.75 14.75 10.4142 14.75 10C14.75 9.58579 14.4142 9.25 14 9.25H10.75V6Z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n</button>\n`;\n\nexports[`IconButton renders correctly > with size - medium 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"button sizeMedium kindTertiary colorPrimary noSidePadding\"\n  data-testid=\"icon-button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  style={\n    {\n      \"alignItems\": \"center\",\n      \"height\": \"40px\",\n      \"justifyContent\": \"center\",\n      \"padding\": 0,\n      \"width\": \"40px\",\n    }\n  }\n  type=\"button\"\n>\n  <svg\n    aria-hidden={true}\n    className=\"icon noFocusStyle\"\n    data-testid=\"icon\"\n    data-vibe=\"Icon\"\n    fill=\"currentColor\"\n    height=\"20\"\n    viewBox=\"0 0 20 20\"\n    width=\"20\"\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M10.75 6C10.75 5.58579 10.4142 5.25 10 5.25C9.58579 5.25 9.25 5.58579 9.25 6V9.25H6C5.58579 9.25 5.25 9.58579 5.25 10C5.25 10.4142 5.58579 10.75 6 10.75H9.25V14C9.25 14.4142 9.58579 14.75 10 14.75C10.4142 14.75 10.75 14.4142 10.75 14V10.75H14C14.4142 10.75 14.75 10.4142 14.75 10C14.75 9.58579 14.4142 9.25 14 9.25H10.75V6Z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n</button>\n`;\n\nexports[`IconButton renders correctly > with size - medium 2`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"button sizeMedium kindTertiary colorPrimary noSidePadding\"\n  data-testid=\"icon-button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  style={\n    {\n      \"alignItems\": \"center\",\n      \"height\": \"40px\",\n      \"justifyContent\": \"center\",\n      \"padding\": 0,\n      \"width\": \"40px\",\n    }\n  }\n  type=\"button\"\n>\n  <svg\n    aria-hidden={true}\n    className=\"icon noFocusStyle\"\n    data-testid=\"icon\"\n    data-vibe=\"Icon\"\n    fill=\"currentColor\"\n    height=\"20\"\n    viewBox=\"0 0 20 20\"\n    width=\"20\"\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M10.75 6C10.75 5.58579 10.4142 5.25 10 5.25C9.58579 5.25 9.25 5.58579 9.25 6V9.25H6C5.58579 9.25 5.25 9.58579 5.25 10C5.25 10.4142 5.58579 10.75 6 10.75H9.25V14C9.25 14.4142 9.58579 14.75 10 14.75C10.4142 14.75 10.75 14.4142 10.75 14V10.75H14C14.4142 10.75 14.75 10.4142 14.75 10C14.75 9.58579 14.4142 9.25 14 9.25H10.75V6Z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n</button>\n`;\n\nexports[`IconButton renders correctly > with size - small 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"button sizeMedium kindTertiary colorPrimary noSidePadding\"\n  data-testid=\"icon-button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  style={\n    {\n      \"alignItems\": \"center\",\n      \"height\": \"32px\",\n      \"justifyContent\": \"center\",\n      \"padding\": 0,\n      \"width\": \"32px\",\n    }\n  }\n  type=\"button\"\n>\n  <svg\n    aria-hidden={true}\n    className=\"icon noFocusStyle\"\n    data-testid=\"icon\"\n    data-vibe=\"Icon\"\n    fill=\"currentColor\"\n    height=\"20\"\n    viewBox=\"0 0 20 20\"\n    width=\"20\"\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M10.75 6C10.75 5.58579 10.4142 5.25 10 5.25C9.58579 5.25 9.25 5.58579 9.25 6V9.25H6C5.58579 9.25 5.25 9.58579 5.25 10C5.25 10.4142 5.58579 10.75 6 10.75H9.25V14C9.25 14.4142 9.58579 14.75 10 14.75C10.4142 14.75 10.75 14.4142 10.75 14V10.75H14C14.4142 10.75 14.75 10.4142 14.75 10C14.75 9.58579 14.4142 9.25 14 9.25H10.75V6Z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n</button>\n`;\n\nexports[`IconButton renders correctly > with size - xs 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"button sizeMedium kindTertiary colorPrimary noSidePadding\"\n  data-testid=\"icon-button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  style={\n    {\n      \"alignItems\": \"center\",\n      \"height\": \"24px\",\n      \"justifyContent\": \"center\",\n      \"padding\": 0,\n      \"width\": \"24px\",\n    }\n  }\n  type=\"button\"\n>\n  <svg\n    aria-hidden={true}\n    className=\"icon noFocusStyle\"\n    data-testid=\"icon\"\n    data-vibe=\"Icon\"\n    fill=\"currentColor\"\n    height=\"16\"\n    viewBox=\"0 0 20 20\"\n    width=\"16\"\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M10.75 6C10.75 5.58579 10.4142 5.25 10 5.25C9.58579 5.25 9.25 5.58579 9.25 6V9.25H6C5.58579 9.25 5.25 9.58579 5.25 10C5.25 10.4142 5.58579 10.75 6 10.75H9.25V14C9.25 14.4142 9.58579 14.75 10 14.75C10.4142 14.75 10.75 14.4142 10.75 14V10.75H14C14.4142 10.75 14.75 10.4142 14.75 10C14.75 9.58579 14.4142 9.25 14 9.25H10.75V6Z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n</button>\n`;\n\nexports[`IconButton renders correctly > with size - xs 2`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"button sizeMedium kindTertiary colorPrimary noSidePadding\"\n  data-testid=\"icon-button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  style={\n    {\n      \"alignItems\": \"center\",\n      \"height\": \"24px\",\n      \"justifyContent\": \"center\",\n      \"padding\": 0,\n      \"width\": \"24px\",\n    }\n  }\n  type=\"button\"\n>\n  <svg\n    aria-hidden={true}\n    className=\"icon noFocusStyle\"\n    data-testid=\"icon\"\n    data-vibe=\"Icon\"\n    fill=\"currentColor\"\n    height=\"16\"\n    viewBox=\"0 0 20 20\"\n    width=\"16\"\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M10.75 6C10.75 5.58579 10.4142 5.25 10 5.25C9.58579 5.25 9.25 5.58579 9.25 6V9.25H6C5.58579 9.25 5.25 9.58579 5.25 10C5.25 10.4142 5.58579 10.75 6 10.75H9.25V14C9.25 14.4142 9.58579 14.75 10 14.75C10.4142 14.75 10.75 14.4142 10.75 14V10.75H14C14.4142 10.75 14.75 10.4142 14.75 10C14.75 9.58579 14.4142 9.25 14 9.25H10.75V6Z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n</button>\n`;\n\nexports[`IconButton renders correctly > with size - xxs 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  className=\"button sizeMedium kindTertiary colorPrimary noSidePadding\"\n  data-testid=\"icon-button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  style={\n    {\n      \"alignItems\": \"center\",\n      \"height\": \"16px\",\n      \"justifyContent\": \"center\",\n      \"padding\": 0,\n      \"width\": \"16px\",\n    }\n  }\n  type=\"button\"\n>\n  <svg\n    aria-hidden={true}\n    className=\"icon noFocusStyle\"\n    data-testid=\"icon\"\n    data-vibe=\"Icon\"\n    fill=\"currentColor\"\n    height=\"16\"\n    viewBox=\"0 0 20 20\"\n    width=\"16\"\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M10.75 6C10.75 5.58579 10.4142 5.25 10 5.25C9.58579 5.25 9.25 5.58579 9.25 6V9.25H6C5.58579 9.25 5.25 9.58579 5.25 10C5.25 10.4142 5.58579 10.75 6 10.75H9.25V14C9.25 14.4142 9.58579 14.75 10 14.75C10.4142 14.75 10.75 14.4142 10.75 14V10.75H14C14.4142 10.75 14.75 10.4142 14.75 10C14.75 9.58579 14.4142 9.25 14 9.25H10.75V6Z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n</button>\n`;\n"
  },
  {
    "path": "packages/components/icon-button/src/IconButton/index.ts",
    "content": "export { default as IconButton, type IconButtonProps } from \"./IconButton\";\n"
  },
  {
    "path": "packages/components/icon-button/src/IconButton/services/IconButton-helpers.ts",
    "content": "import { SIZES } from \"@vibe/shared\";\n\nconst sizesMap = {\n  [SIZES.XXS]: 16,\n  [SIZES.XS]: 24,\n  [SIZES.SMALL]: 32,\n  [SIZES.MEDIUM]: 40,\n  [SIZES.LARGE]: 48\n} as const;\n\nexport type Size = (typeof SIZES)[keyof typeof SIZES];\n\nexport function getWidthHeight(size: Size) {\n  return {\n    width: `${sizesMap[size]}px`,\n    height: `${sizesMap[size]}px`\n  };\n}\n"
  },
  {
    "path": "packages/components/icon-button/src/index.ts",
    "content": "export * from \"./IconButton\";\n"
  },
  {
    "path": "packages/components/icon-button/src/types/files.d.ts",
    "content": "// SCSS\ndeclare module \"*.module.scss\" {\n  const classes: { [key: string]: string };\n  export default classes;\n}\n\n// SVG\ndeclare module \"*.svg\" {\n  const content: string;\n  export default content;\n}\n\ndeclare module \"*.png\";\ndeclare module \"*.mp4\";\ndeclare module \"*.pdf\";\n"
  },
  {
    "path": "packages/components/icon-button/tsconfig.json",
    "content": "{\n  \"extends\": \"@vibe/config/tsconfig\",\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"rootDir\": \"src\"\n  },\n  \"include\": [\"src/**/*\"]\n}\n"
  },
  {
    "path": "packages/components/icon-button/vitest.config.mjs",
    "content": "import config from \"@vibe/config/vitest.config\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n  ...config\n});\n"
  },
  {
    "path": "packages/components/icon-button/vitest.setup.mjs",
    "content": "import { vi } from \"vitest\";\nimport \"@testing-library/jest-dom\";\nimport React from \"react\";\n\n// Mock ResizeObserver\nclass ResizeObserver {\n  observe() {}\n  unobserve() {}\n  disconnect() {}\n}\nglobal.ResizeObserver = ResizeObserver;\n\n// Mock react-inlinesvg\nvi.mock(\"react-inlinesvg\", () => ({\n  default: ({ src, ...props }) =>\n    React.createElement(\"div\", {\n      \"data-testid\": \"mock-svg\",\n      \"data-src\": src,\n      ...props\n    })\n}));\n"
  },
  {
    "path": "packages/components/layer/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [4.0.1](https://github.com/mondaycom/vibe/compare/@vibe/layer@4.0.0...@vibe/layer@4.0.1) (2026-04-16)\n\n**Note:** Version bump only for package @vibe/layer\n\n\n\n\n\n## [3.0.10](https://github.com/mondaycom/vibe/compare/@vibe/layer@3.0.9...@vibe/layer@3.0.10) (2026-01-18)\n\n**Note:** Version bump only for package @vibe/layer\n\n\n\n\n\n## [3.0.9](https://github.com/mondaycom/vibe/compare/@vibe/layer@3.0.8...@vibe/layer@3.0.9) (2026-01-04)\n\n**Note:** Version bump only for package @vibe/layer\n\n\n\n\n\n## [3.0.8](https://github.com/mondaycom/vibe/compare/@vibe/layer@3.0.7...@vibe/layer@3.0.8) (2026-01-04)\n\n**Note:** Version bump only for package @vibe/layer\n\n\n\n\n\n## [3.0.7](https://github.com/mondaycom/vibe/compare/@vibe/layer@3.0.6...@vibe/layer@3.0.7) (2025-12-25)\n\n**Note:** Version bump only for package @vibe/layer\n\n\n\n\n\n## [3.0.6](https://github.com/mondaycom/vibe/compare/@vibe/layer@3.0.5...@vibe/layer@3.0.6) (2025-12-22)\n\n**Note:** Version bump only for package @vibe/layer\n\n\n\n\n\n## [3.0.5](https://github.com/mondaycom/vibe/compare/@vibe/layer@3.0.4...@vibe/layer@3.0.5) (2025-12-17)\n\n**Note:** Version bump only for package @vibe/layer\n\n\n\n\n\n## [3.0.4](https://github.com/mondaycom/vibe/compare/@vibe/layer@3.0.3...@vibe/layer@3.0.4) (2025-12-17)\n\n**Note:** Version bump only for package @vibe/layer\n\n\n\n\n\n## [3.0.3](https://github.com/mondaycom/vibe/compare/@vibe/layer@3.0.2...@vibe/layer@3.0.3) (2025-12-04)\n\n**Note:** Version bump only for package @vibe/layer\n\n\n\n\n\n## [3.0.2](https://github.com/mondaycom/vibe/compare/@vibe/layer@3.0.1...@vibe/layer@3.0.2) (2025-11-26)\n\n**Note:** Version bump only for package @vibe/layer\n\n\n\n\n\n## 3.0.1 (2025-11-25)\n\n**Note:** Version bump only for package @vibe/layer\n"
  },
  {
    "path": "packages/components/layer/package.json",
    "content": "{\n  \"name\": \"@vibe/layer\",\n  \"version\": \"4.0.1\",\n  \"description\": \"Vibe sub-package for layering components\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/mondaycom/vibe.git\",\n    \"directory\": \"packages/components/layers\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/mondaycom/vibe/issues\"\n  },\n  \"homepage\": \"https://github.com/mondaycom/vibe#readme\",\n  \"author\": \"monday.com\",\n  \"license\": \"MIT\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.js\",\n  \"types\": \"dist/index.d.ts\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \".\": {\n      \"types\": \"./dist/index.d.ts\",\n      \"import\": \"./dist/index.js\",\n      \"default\": \"./dist/index.js\"\n    },\n    \"./mockedClassNames\": {\n      \"import\": \"./dist/mocked_classnames/index.js\",\n      \"default\": \"./dist/mocked_classnames/index.js\"\n    }\n  },\n  \"scripts\": {\n    \"build\": \"rollup -c && yarn build:mocked-classnames\",\n    \"build:mocked-classnames\": \"[ \\\"$SKIP_RELEASE_ARTIFACTS\\\" = \\\"true\\\" ] || mock_classnames=on rollup -c\",\n    \"test\": \"vitest run\",\n    \"lint\": \"eslint \\\"./src/**/*.{js,jsx,ts,tsx}\\\"\"\n  },\n  \"dependencies\": {\n    \"@vibe/icon\": \"4.0.1\",\n    \"@vibe/loader\": \"4.0.1\",\n    \"@vibe/shared\": \"4.0.1\",\n    \"classnames\": \"^2.5.1\",\n    \"es-toolkit\": \"^1.39.10\"\n  },\n  \"devDependencies\": {\n    \"@testing-library/react\": \"^12.1.2\",\n    \"@vibe/config\": \"4.0.0\",\n    \"@vibe/icons\": \"4.0.0\",\n    \"react\": \"^16.13.0\",\n    \"react-dom\": \"^16.13.0\",\n    \"react-test-renderer\": \"16\",\n    \"typescript\": \"^5.9.3\",\n    \"vitest\": \"^1.6.0\"\n  },\n  \"peerDependencies\": {\n    \"react\": \">=16.9.0\",\n    \"react-dom\": \">=16.9.0\"\n  },\n  \"sideEffects\": [\n    \"*.scss\",\n    \"*.css\",\n    \"*.scss.js\",\n    \"*.css.js\"\n  ],\n  \"eslintConfig\": {\n    \"extends\": [\n      \"../../../node_modules/@vibe/config/.eslintrc.cjs\"\n    ]\n  }\n}\n"
  },
  {
    "path": "packages/components/layer/rollup.config.mjs",
    "content": "import config from \"@vibe/config/rollup.config\";\n\nexport default config;\n"
  },
  {
    "path": "packages/components/layer/src/LayerProvider/LayerContext.ts",
    "content": "import React from \"react\";\n\nexport interface LayersContextType {\n  /**\n   * A reference to the layer container element.\n   */\n  layerRef: React.RefObject<HTMLElement>;\n}\n\nconst LayerContext = React.createContext<LayersContextType>({\n  layerRef: null\n});\n\nexport default LayerContext;\n"
  },
  {
    "path": "packages/components/layer/src/LayerProvider/LayerProvider.tsx",
    "content": "import React, { type FC, type ReactNode, type RefObject } from \"react\";\nimport LayerContext from \"./LayerContext\";\n\nexport interface LayerProviderType {\n  /**\n   * The child elements.\n   */\n  children: ReactNode | ReactNode[];\n  /**\n   * A reference to the layer container element.\n   */\n  layerRef: RefObject<HTMLElement> | null;\n}\n\nconst LayerProvider: FC<LayerProviderType> = ({ children, layerRef }) => {\n  return <LayerContext.Provider value={{ layerRef }}>{children}</LayerContext.Provider>;\n};\n\nexport default LayerProvider;\n"
  },
  {
    "path": "packages/components/layer/src/LayerProvider/__tests__/LayerProvider.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React, { useContext, useRef } from \"react\";\nimport { render, screen } from \"@testing-library/react\";\nimport LayerProvider from \"../LayerProvider\";\nimport LayerContext from \"../LayerContext\";\n\nconst TestComponent = () => {\n  const { layerRef } = useContext(LayerContext);\n  return <div data-testid=\"test-component\">Layer ref: {layerRef ? \"provided\" : \"not provided\"}</div>;\n};\n\ndescribe(\"LayerProvider\", () => {\n  it(\"should render children correctly\", () => {\n    render(\n      <LayerProvider layerRef={null}>\n        <div data-testid=\"child\">Test Child</div>\n      </LayerProvider>\n    );\n\n    expect(screen.getByTestId(\"child\")).toBeInTheDocument();\n    expect(screen.getByText(\"Test Child\")).toBeInTheDocument();\n  });\n\n  it(\"should provide layerRef to context when ref is provided\", () => {\n    const TestWrapper = () => {\n      const layerRef = useRef<HTMLDivElement>(null);\n\n      return (\n        <LayerProvider layerRef={layerRef}>\n          <TestComponent />\n        </LayerProvider>\n      );\n    };\n\n    render(<TestWrapper />);\n\n    expect(screen.getByTestId(\"test-component\")).toBeInTheDocument();\n    expect(screen.getByText(/Layer ref: provided/)).toBeInTheDocument();\n  });\n\n  it(\"should provide null layerRef to context when ref is null\", () => {\n    render(\n      <LayerProvider layerRef={null}>\n        <TestComponent />\n      </LayerProvider>\n    );\n\n    expect(screen.getByTestId(\"test-component\")).toBeInTheDocument();\n    expect(screen.getByText(/Layer ref: not provided/)).toBeInTheDocument();\n  });\n\n  it(\"should render multiple children correctly\", () => {\n    render(\n      <LayerProvider layerRef={null}>\n        <div data-testid=\"child1\">Child 1</div>\n        <div data-testid=\"child2\">Child 2</div>\n        <div data-testid=\"child3\">Child 3</div>\n      </LayerProvider>\n    );\n\n    expect(screen.getByTestId(\"child1\")).toBeInTheDocument();\n    expect(screen.getByTestId(\"child2\")).toBeInTheDocument();\n    expect(screen.getByTestId(\"child3\")).toBeInTheDocument();\n  });\n});\n"
  },
  {
    "path": "packages/components/layer/src/LayerProvider/index.ts",
    "content": "export { default as LayerProvider, type LayerProviderType } from \"./LayerProvider\";\nexport { default as LayerContext, type LayersContextType } from \"./LayerContext\";\n"
  },
  {
    "path": "packages/components/layer/src/index.ts",
    "content": "export * from \"./LayerProvider\";\n"
  },
  {
    "path": "packages/components/layer/src/types/files.d.ts",
    "content": "// SCSS\ndeclare module \"*.module.scss\" {\n  const classes: { [key: string]: string };\n  export default classes;\n}\n\n// SVG\ndeclare module \"*.svg\" {\n  const content: string;\n  export default content;\n}\n\ndeclare module \"*.png\";\ndeclare module \"*.mp4\";\ndeclare module \"*.pdf\";\n"
  },
  {
    "path": "packages/components/layer/tsconfig.json",
    "content": "{\n  \"extends\": \"@vibe/config/tsconfig\",\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"rootDir\": \"src\"\n  },\n  \"include\": [\"src/**/*\"]\n}\n"
  },
  {
    "path": "packages/components/layer/vitest.config.mjs",
    "content": "import config from \"@vibe/config/vitest.config\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n  ...config\n});\n"
  },
  {
    "path": "packages/components/layer/vitest.setup.mjs",
    "content": "import { vi } from \"vitest\";\nimport \"@testing-library/jest-dom\";\nimport React from \"react\";\n\n// Mock ResizeObserver\nclass ResizeObserver {\n  observe() {}\n  unobserve() {}\n  disconnect() {}\n}\nglobal.ResizeObserver = ResizeObserver;\n\n// Mock react-inlinesvg\nvi.mock(\"react-inlinesvg\", () => ({\n  default: ({ src, ...props }) =>\n    React.createElement(\"div\", {\n      \"data-testid\": \"mock-svg\",\n      \"data-src\": src,\n      ...props\n    })\n}));\n"
  },
  {
    "path": "packages/components/layout/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [4.0.1](https://github.com/mondaycom/vibe/compare/@vibe/layout@4.0.0...@vibe/layout@4.0.1) (2026-04-16)\n\n**Note:** Version bump only for package @vibe/layout\n\n\n\n\n\n## [3.0.3](https://github.com/mondaycom/vibe/compare/@vibe/layout@3.0.2...@vibe/layout@3.0.3) (2026-01-04)\n\n**Note:** Version bump only for package @vibe/layout\n\n\n\n\n\n## [3.0.2](https://github.com/mondaycom/vibe/compare/@vibe/layout@3.0.1...@vibe/layout@3.0.2) (2025-12-17)\n\n**Note:** Version bump only for package @vibe/layout\n\n\n\n\n\n## 3.0.1 (2025-11-26)\n\n**Note:** Version bump only for package @vibe/layout\n"
  },
  {
    "path": "packages/components/layout/package.json",
    "content": "{\n  \"name\": \"@vibe/layout\",\n  \"version\": \"4.0.1\",\n  \"description\": \"Vibe sub-package for layout components\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/mondaycom/vibe.git\",\n    \"directory\": \"packages/components/layout\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/mondaycom/vibe/issues\"\n  },\n  \"homepage\": \"https://github.com/mondaycom/vibe#readme\",\n  \"author\": \"monday.com\",\n  \"license\": \"MIT\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.js\",\n  \"types\": \"dist/index.d.ts\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \".\": {\n      \"types\": \"./dist/index.d.ts\",\n      \"import\": \"./dist/index.js\",\n      \"default\": \"./dist/index.js\"\n    },\n    \"./mockedClassNames\": {\n      \"import\": \"./dist/mocked_classnames/index.js\",\n      \"default\": \"./dist/mocked_classnames/index.js\"\n    }\n  },\n  \"scripts\": {\n    \"build\": \"rollup -c && yarn build:mocked-classnames\",\n    \"build:mocked-classnames\": \"[ \\\"$SKIP_RELEASE_ARTIFACTS\\\" = \\\"true\\\" ] || mock_classnames=on rollup -c\",\n    \"test\": \"vitest run\",\n    \"lint\": \"eslint \\\"./src/**/*.{js,jsx,ts,tsx}\\\"\"\n  },\n  \"dependencies\": {\n    \"@vibe/clickable\": \"4.0.1\",\n    \"@vibe/shared\": \"4.0.1\",\n    \"@vibe/style\": \"4.0.0\",\n    \"classnames\": \"^2.5.1\",\n    \"es-toolkit\": \"^1.39.10\"\n  },\n  \"devDependencies\": {\n    \"@testing-library/react\": \"^12.1.2\",\n    \"@vibe/config\": \"4.0.0\",\n    \"react\": \"^16.13.0\",\n    \"react-dom\": \"^16.13.0\",\n    \"react-test-renderer\": \"16\",\n    \"typescript\": \"^5.9.3\",\n    \"vitest\": \"^1.6.0\"\n  },\n  \"peerDependencies\": {\n    \"react\": \">=16.9.0\",\n    \"react-dom\": \">=16.9.0\"\n  },\n  \"sideEffects\": [\n    \"*.scss\",\n    \"*.css\",\n    \"*.scss.js\",\n    \"*.css.js\"\n  ],\n  \"eslintConfig\": {\n    \"extends\": [\n      \"../../../node_modules/@vibe/config/.eslintrc.cjs\"\n    ]\n  }\n}\n"
  },
  {
    "path": "packages/components/layout/rollup.config.mjs",
    "content": "import config from \"@vibe/config/rollup.config\";\n\nexport default config;\n"
  },
  {
    "path": "packages/components/layout/src/Box/Box.module.scss",
    "content": "// Monday ui styles dependencies\n@import \"~@vibe/style/dist/mixins\";\n@import \"./utilities\";\n\n.box {\n  overflow: hidden;\n\n  &.scrollable {\n    overflow: auto;\n    @include scroller;\n  }\n}\n\n// Generating Utility class locally for Box component\n@include utility-class-factory($utilities-modules, $export: \"modules\");\n"
  },
  {
    "path": "packages/components/layout/src/Box/Box.tsx",
    "content": "import React, { forwardRef, useRef } from \"react\";\nimport { camelCase } from \"es-toolkit\";\nimport cx from \"classnames\";\nimport { SizePrefixMapping } from \"./BoxConstants\";\nimport {\n  type BackgroundColor,\n  type BorderColor,\n  type BaseBoxSize,\n  type BoxSize,\n  type BoxTextColor,\n  type RoundedSize,\n  type Shadow\n} from \"./Box.types\";\nimport {\n  type VibeComponentProps,\n  type ElementContent,\n  getTestId,\n  ComponentDefaultTestId,\n  useMergeRef\n} from \"@vibe/shared\";\nimport styles from \"./Box.module.scss\";\n\nexport interface BoxProps extends VibeComponentProps {\n  /**\n   * The HTML element or custom component used as the root.\n   */\n  elementType?: keyof JSX.IntrinsicElements | string;\n  /**\n   * The content inside the box.\n   */\n  children?: ElementContent;\n  /**\n   * If true, the box is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If true, applies a border to the box.\n   */\n  border?: boolean;\n  /**\n   * The color of the border.\n   */\n  borderColor?: BorderColor;\n  /**\n   * The border radius of the box.\n   */\n  rounded?: RoundedSize;\n  /**\n   * The shadow style applied to the box.\n   */\n  shadow?: Shadow;\n  /**\n   * The margin applied to all sides.\n   */\n  margin?: BoxSize;\n  /**\n   * The horizontal margin.\n   */\n  marginX?: BoxSize;\n  /**\n   * The vertical margin.\n   */\n  marginY?: BoxSize;\n  /**\n   * The top margin.\n   */\n  marginTop?: BoxSize;\n  /**\n   * The end (right in LTR, left in RTL) margin.\n   */\n  marginEnd?: BoxSize;\n  /**\n   * The bottom margin.\n   */\n  marginBottom?: BaseBoxSize;\n  /**\n   * The start (left in LTR, right in RTL) margin.\n   */\n  marginStart?: BaseBoxSize;\n  /**\n   * The padding applied to all sides.\n   */\n  padding?: BaseBoxSize;\n  /**\n   * The horizontal padding.\n   */\n  paddingX?: BaseBoxSize;\n  /**\n   * The vertical padding.\n   */\n  paddingY?: BaseBoxSize;\n  /**\n   * The top padding.\n   */\n  paddingTop?: BaseBoxSize;\n  /**\n   * The end (right in LTR, left in RTL) padding.\n   */\n  paddingEnd?: BaseBoxSize;\n  /**\n   * The bottom padding.\n   */\n  paddingBottom?: BaseBoxSize;\n  /**\n   * The start (left in LTR, right in RTL) padding.\n   */\n  paddingStart?: BaseBoxSize;\n  /**\n   * The background color of the box.\n   */\n  backgroundColor?: BackgroundColor;\n  /**\n   * The text color inside the box.\n   */\n  textColor?: BoxTextColor;\n  /**\n   * If true, the box content is scrollable.\n   */\n  scrollable?: boolean;\n  /**\n   * Inline styles applied to the box.\n   */\n  style?: React.CSSProperties;\n}\n\nconst Box = forwardRef(\n  (\n    {\n      className,\n      id,\n      elementType = \"div\",\n      children,\n      disabled,\n      border,\n      scrollable,\n      style,\n      \"data-testid\": dataTestId,\n      ...props\n    }: BoxProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const getClassNames = (styles: Record<string, string>, props: Record<string, any | undefined>) => {\n      return Object.keys(props)\n        .filter(prop => props[prop])\n        .map(prop => {\n          const value = props[prop];\n          const prefix = SizePrefixMapping[prop as keyof typeof SizePrefixMapping];\n          return prefix && typeof value === \"string\" ? styles[camelCase(`${prefix}-${value}`)] : styles[value];\n        })\n        .filter(Boolean);\n    };\n\n    return React.createElement(\n      elementType,\n      {\n        \"data-testid\": dataTestId || getTestId(ComponentDefaultTestId.BOX, id),\n        ref: mergedRef,\n        className: cx(\n          styles.box,\n          className,\n          { [styles.opacityDisabled]: disabled, [styles.scrollable]: scrollable, [styles.border]: border },\n          ...getClassNames(styles, props)\n        ),\n        id: id,\n        style\n      },\n      children\n    );\n  }\n);\n\nexport default Box;\n"
  },
  {
    "path": "packages/components/layout/src/Box/Box.types.ts",
    "content": "export type BorderColor = \"uiBorderColor\" | \"layoutBorderColor\";\n\nexport type BackgroundColor =\n  | \"primaryBackgroundColor\"\n  | \"secondaryBackgroundColor\"\n  | \"greyBackgroundColor\"\n  | \"allgreyBackgroundColor\"\n  | \"invertedColorBackground\";\n\nexport type BoxTextColor = \"primaryTextColor\" | \"textColorOnInverted\" | \"secondaryTextColor\";\n\nexport type BaseBoxSize = \"xs\" | \"small\" | \"medium\" | \"large\" | \"xl\" | \"xxl\" | \"xxxl\";\n\nexport type BoxSize = \"auto\" | BaseBoxSize;\n\nexport type Shadow = Extract<BaseBoxSize, \"xs\" | \"small\" | \"medium\" | \"large\">;\n\nexport type RoundedSize = \"small\" | \"medium\" | \"big\";\n"
  },
  {
    "path": "packages/components/layout/src/Box/BoxConstants.ts",
    "content": "export const SizePrefixMapping = {\n  margin: \"m\",\n  marginX: \"mx\",\n  marginY: \"my\",\n  marginTop: \"mt\",\n  marginEnd: \"me\",\n  marginBottom: \"mb\",\n  marginStart: \"ms\",\n  padding: \"p\",\n  paddingX: \"px\",\n  paddingY: \"py\",\n  paddingTop: \"pt\",\n  paddingEnd: \"pe\",\n  paddingBottom: \"pb\",\n  paddingStart: \"ps\",\n  shadow: \"shadow\",\n  rounded: \"rounded\",\n  borderColor: \"borderColor\",\n  backgroundColor: \"bg\",\n  textColor: \"text\"\n};\n"
  },
  {
    "path": "packages/components/layout/src/Box/__tests__/Box.snapshot.test.tsx",
    "content": "import { vi, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport Box from \"../Box\";\n\nvi.mock(\"../Box.module.scss\", () => {\n  const styles = {\n    box: \"box\",\n    border: \"border\",\n    borderColorUiBorderColor: \"uiBorderColor\",\n    roundedSmall: \"roundedSmall\",\n    shadowSmall: \"shadowSmall\",\n    mSmall: \"mSmall\",\n    mxSmall: \"mxSmall\",\n    mySmall: \"mySmall\",\n    mtSmall: \"mtSmall\",\n    meSmall: \"meSmall\",\n    msSmall: \"msSmall\",\n    pSmall: \"pSmall\",\n    pxSmall: \"pxSmall\",\n    pySmall: \"pySmall\",\n    ptSmall: \"ptSmall\",\n    peSmall: \"peSmall\",\n    pbSmall: \"pbSmall\",\n    psSmall: \"psSmall\",\n    bgPrimaryBackgroundColor: \"bgPrimaryBackgroundColor\",\n    textPrimaryTextColor: \"textPrimaryTextColor\",\n    opacityDisabled: \"opacityDisabled\",\n    scrollable: \"scrollable\"\n  };\n  return {\n    default: styles,\n    ...styles\n  };\n});\n\ndescribe(\"Box renders correctly\", () => {\n  it(\"with empty props\", () => {\n    const tree = renderer.create(<Box></Box>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with children\", () => {\n    const tree = renderer.create(<Box>Child</Box>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with border prop\", () => {\n    const tree = renderer.create(<Box border />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with borderColor prop\", () => {\n    const tree = renderer.create(<Box borderColor=\"uiBorderColor\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with rounded prop\", () => {\n    const tree = renderer.create(<Box rounded=\"small\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with shadow prop\", () => {\n    const tree = renderer.create(<Box shadow=\"small\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with margin prop\", () => {\n    const tree = renderer.create(<Box margin=\"small\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with marginX prop\", () => {\n    const tree = renderer.create(<Box marginX=\"small\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with marginY prop\", () => {\n    const tree = renderer.create(<Box marginY=\"small\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with marginTop prop\", () => {\n    const tree = renderer.create(<Box marginTop=\"small\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with marginEnd prop\", () => {\n    const tree = renderer.create(<Box marginEnd=\"small\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with marginStart prop\", () => {\n    const tree = renderer.create(<Box marginStart=\"small\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with padding prop\", () => {\n    const tree = renderer.create(<Box padding=\"small\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with paddingX prop\", () => {\n    const tree = renderer.create(<Box paddingX=\"small\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with paddingY prop\", () => {\n    const tree = renderer.create(<Box paddingY=\"small\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with paddingTop prop\", () => {\n    const tree = renderer.create(<Box paddingTop=\"small\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with paddingEnd prop\", () => {\n    const tree = renderer.create(<Box paddingEnd=\"small\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with paddingBottom prop\", () => {\n    const tree = renderer.create(<Box paddingBottom=\"small\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with paddingStart prop\", () => {\n    const tree = renderer.create(<Box paddingStart=\"small\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with backgroundColor prop\", () => {\n    const tree = renderer.create(<Box backgroundColor=\"primaryBackgroundColor\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with text prop\", () => {\n    const tree = renderer.create(<Box textColor=\"primaryTextColor\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with data-testid prop\", () => {\n    const tree = renderer.create(<Box data-testid=\"test-id\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/components/layout/src/Box/__tests__/__snapshots__/Box.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`Box renders correctly > with backgroundColor prop 1`] = `\n<div\n  className=\"box bgPrimaryBackgroundColor\"\n  data-testid=\"box\"\n/>\n`;\n\nexports[`Box renders correctly > with border prop 1`] = `\n<div\n  className=\"box border\"\n  data-testid=\"box\"\n/>\n`;\n\nexports[`Box renders correctly > with borderColor prop 1`] = `\n<div\n  className=\"box uiBorderColor\"\n  data-testid=\"box\"\n/>\n`;\n\nexports[`Box renders correctly > with children 1`] = `\n<div\n  className=\"box\"\n  data-testid=\"box\"\n>\n  Child\n</div>\n`;\n\nexports[`Box renders correctly > with data-testid prop 1`] = `\n<div\n  className=\"box\"\n  data-testid=\"test-id\"\n/>\n`;\n\nexports[`Box renders correctly > with empty props 1`] = `\n<div\n  className=\"box\"\n  data-testid=\"box\"\n/>\n`;\n\nexports[`Box renders correctly > with margin prop 1`] = `\n<div\n  className=\"box mSmall\"\n  data-testid=\"box\"\n/>\n`;\n\nexports[`Box renders correctly > with marginEnd prop 1`] = `\n<div\n  className=\"box meSmall\"\n  data-testid=\"box\"\n/>\n`;\n\nexports[`Box renders correctly > with marginStart prop 1`] = `\n<div\n  className=\"box msSmall\"\n  data-testid=\"box\"\n/>\n`;\n\nexports[`Box renders correctly > with marginTop prop 1`] = `\n<div\n  className=\"box mtSmall\"\n  data-testid=\"box\"\n/>\n`;\n\nexports[`Box renders correctly > with marginX prop 1`] = `\n<div\n  className=\"box mxSmall\"\n  data-testid=\"box\"\n/>\n`;\n\nexports[`Box renders correctly > with marginY prop 1`] = `\n<div\n  className=\"box mySmall\"\n  data-testid=\"box\"\n/>\n`;\n\nexports[`Box renders correctly > with padding prop 1`] = `\n<div\n  className=\"box pSmall\"\n  data-testid=\"box\"\n/>\n`;\n\nexports[`Box renders correctly > with paddingBottom prop 1`] = `\n<div\n  className=\"box pbSmall\"\n  data-testid=\"box\"\n/>\n`;\n\nexports[`Box renders correctly > with paddingEnd prop 1`] = `\n<div\n  className=\"box peSmall\"\n  data-testid=\"box\"\n/>\n`;\n\nexports[`Box renders correctly > with paddingStart prop 1`] = `\n<div\n  className=\"box psSmall\"\n  data-testid=\"box\"\n/>\n`;\n\nexports[`Box renders correctly > with paddingTop prop 1`] = `\n<div\n  className=\"box ptSmall\"\n  data-testid=\"box\"\n/>\n`;\n\nexports[`Box renders correctly > with paddingX prop 1`] = `\n<div\n  className=\"box pxSmall\"\n  data-testid=\"box\"\n/>\n`;\n\nexports[`Box renders correctly > with paddingY prop 1`] = `\n<div\n  className=\"box pySmall\"\n  data-testid=\"box\"\n/>\n`;\n\nexports[`Box renders correctly > with rounded prop 1`] = `\n<div\n  className=\"box roundedSmall\"\n  data-testid=\"box\"\n/>\n`;\n\nexports[`Box renders correctly > with shadow prop 1`] = `\n<div\n  className=\"box shadowSmall\"\n  data-testid=\"box\"\n/>\n`;\n\nexports[`Box renders correctly > with text prop 1`] = `\n<div\n  className=\"box textPrimaryTextColor\"\n  data-testid=\"box\"\n/>\n`;\n"
  },
  {
    "path": "packages/components/layout/src/Box/_utilities.scss",
    "content": "@use \"sass:map\";\n@use \"sass:string\";\n@use \"sass:list\";\n@import \"~@vibe/style/dist/functions\";\n\n/*  stylelint-disable scss/at-if-no-null */\n$utility-spacing-vars: (\n  0: 0,\n  xs: var(--space-4),\n  small: var(--space-8),\n  medium: var(--space-16),\n  large: var(--space-24),\n  xl: var(--space-32),\n  xxl: var(--space-48),\n  xxxl: var(--space-64)\n);\n\n$utility-border-colors-vars: (\n  uiBorderColor: var(--ui-border-color),\n  layoutBorderColor: var(--layout-border-color)\n);\n\n$utility-colors-vars: (\n  primaryTextColor: var(--primary-text-color),\n  textColorOnInverted: var(--text-color-on-inverted),\n  secondaryTextColor: var(--secondary-text-color)\n);\n\n$utility-background-colors-vars: (\n  primaryBackgroundColor: var(--primary-background-color),\n  secondaryBackgroundColor: var(--secondary-background-color),\n  greyBackgroundColor: var(--grey-background-color),\n  allgreyBackgroundColor: var(--allgrey-background-color),\n  invertedColorBackground: var(--inverted-color-background)\n);\n\n$utilities-modules: (\n  \"opacity\": (\n    property: opacity,\n    values: (\n      disabled: var(--disabled-component-opacity)\n    )\n  ),\n  \"border\": (\n    property: border,\n    values: (\n      null: var(--border-width) var(--border-style) var(--ui-border-color)\n    )\n  ),\n  \"borderColor\": (\n    property: border-color,\n    class: borderColor,\n    values: $utility-border-colors-vars\n  ),\n  \"rounded\": (\n    property: border-radius,\n    class: rounded,\n    values: (\n      0: 0,\n      small: var(--border-radius-small),\n      medium: var(--border-radius-medium),\n      big: var(--border-radius-big)\n    )\n  ),\n  \"shadow\": (\n    property: box-shadow,\n    class: shadow,\n    values: (\n      xs: var(--box-shadow-xs),\n      small: var(--box-shadow-small),\n      medium: var(--box-shadow-medium),\n      large: var(--box-shadow-large)\n    )\n  ),\n  \"margin\": (\n    property: margin,\n    class: m,\n    values:\n      map.merge(\n        $utility-spacing-vars,\n        (\n          auto: auto\n        )\n      )\n  ),\n  \"marginX\": (\n    property: margin-inline,\n    class: mx,\n    values:\n      map.merge(\n        $utility-spacing-vars,\n        (\n          auto: auto\n        )\n      )\n  ),\n  \"marginY\": (\n    property: margin-top margin-bottom,\n    class: my,\n    values:\n      map.merge(\n        $utility-spacing-vars,\n        (\n          auto: auto\n        )\n      )\n  ),\n  \"marginTop\": (\n    property: margin-top,\n    class: mt,\n    values:\n      map.merge(\n        $utility-spacing-vars,\n        (\n          auto: auto\n        )\n      )\n  ),\n  \"marginEnd\": (\n    property: margin-inline-end,\n    class: me,\n    values:\n      map.merge(\n        $utility-spacing-vars,\n        (\n          auto: auto\n        )\n      )\n  ),\n  \"marginBottom\": (\n    property: margin-bottom,\n    class: mb,\n    values:\n      map.merge(\n        $utility-spacing-vars,\n        (\n          auto: auto\n        )\n      )\n  ),\n  \"marginStart\": (\n    property: margin-inline-start,\n    class: ms,\n    values:\n      map.merge(\n        $utility-spacing-vars,\n        (\n          auto: auto\n        )\n      )\n  ),\n  \"padding\": (\n    property: padding,\n    class: p,\n    values: $utility-spacing-vars\n  ),\n  \"paddingX\": (\n    property: padding-inline,\n    class: px,\n    values: $utility-spacing-vars\n  ),\n  \"paddingY\": (\n    property: padding-top padding-bottom,\n    class: py,\n    values: $utility-spacing-vars\n  ),\n  \"paddingTop\": (\n    property: padding-top,\n    class: pt,\n    values: $utility-spacing-vars\n  ),\n  \"paddingEnd\": (\n    property: padding-inline-end,\n    class: pe,\n    values: $utility-spacing-vars\n  ),\n  \"paddingBottom\": (\n    property: padding-bottom,\n    class: pb,\n    values: $utility-spacing-vars\n  ),\n  \"paddingStart\": (\n    property: padding-inline-start,\n    class: ps,\n    values: $utility-spacing-vars\n  ),\n  \"color\": (\n    property: color,\n    class: text,\n    values: $utility-colors-vars\n  ),\n  \"backgroundColor\": (\n    property: background-color,\n    class: bg,\n    values: $utility-background-colors-vars\n  )\n);\n\n// Generate utilities\n// @arguments: $utility , $infix, $export\n// - $utility is a scope key from the utilities map.\n// - $infix is defined by utility values\n// - $export enables Camelcase by capitalizing the $infix\n// -- This is achieved via flag using $export:\"modules\" (for css modules)\n// This mixin generates classes with definition per a utility scope\n// - Utility scopes are nested within a utility map\n// - Map keys are fixed and defined within the mixin:\n// --  property, class,values,\n@mixin generate-utility-class($utility, $infix, $export) {\n  $values: map.get($utility, values);\n  @if type-of($values) == \"string\" or type-of(nth($values, 1)) != \"list\" {\n    $values: list.zip($values, $values);\n  }\n\n  @each $key, $value in $values {\n    $properties: map.get($utility, property);\n\n    // Multiple properties are possible, for example with vertical or horizontal margins or paddings\n    @if type-of($properties) == \"string\" {\n      $properties: list.append((), $properties);\n    }\n\n    // Use custom class if present\n    $property-class: if(map.has-key($utility, class), map.get($utility, class), list.nth($properties, 1));\n    $property-class: if($property-class == null, \"\", $property-class);\n\n    $infix: if($property-class == \"\" and string.slice($infix, 1, 1) == \"-\", string.slice($infix, 2), $infix);\n\n    // Don't prefix if value key is null (eg. with shadow class)\n    $property-class-modifier: if($key, if($property-class == \"\" and $infix == \"\", \"\", \"\") + $key, \"\");\n\n    @if $value != null {\n      @if $export == \"modules\" {\n        $class-name: $property-class + capitalize(camelize($infix)) + capitalize(camelize($property-class-modifier));\n        .#{$class-name} {\n          @each $property in $properties {\n            #{$property}: $value !important;\n          }\n        }\n      } @else {\n        $class-name: $property-class + $infix + -#{$property-class-modifier};\n        .#{$class-name} {\n          @each $property in $properties {\n            #{$property}: $value !important;\n          }\n        }\n      }\n    }\n  }\n}\n\n// Generate utilities\n// This mixin invoke the utility mixin by setting its map and export type, and initializing the $infix.\n@mixin utility-class-factory($map, $infix: \"\", $export: \"\") {\n  @each $key, $utility in $map {\n    // The utility can be disabled with `false`, thus check if the utility is a map first\n    // Only proceed if responsive media queries are enabled or if it's the base media query\n    @if type-of($utility) == \"map\" and ($infix == \"\") {\n      @include generate-utility-class($utility, $infix, $export);\n    }\n  }\n}\n/*  stylelint-enable scss/at-if-no-null */\n"
  },
  {
    "path": "packages/components/layout/src/Box/index.ts",
    "content": "export { default as Box, type BoxProps } from \"./Box\";\n\nexport * from \"./Box.types\";\n"
  },
  {
    "path": "packages/components/layout/src/Flex/Flex.module.scss",
    "content": ".container {\n  display: flex;\n  flex-direction: row;\n\n  &.justify {\n    &Start {\n      justify-content: flex-start;\n    }\n\n    &End {\n      justify-content: flex-end;\n    }\n\n    &Center {\n      justify-content: center;\n    }\n\n    &SpaceBetween {\n      justify-content: space-between;\n    }\n\n    &SpaceAround {\n      justify-content: space-around;\n    }\n    &Inital {\n      justify-content: initial;\n    }\n  }\n\n  &.align {\n    &Start {\n      align-items: flex-start;\n    }\n\n    &End {\n      align-items: flex-end;\n    }\n\n    &Center {\n      align-items: center;\n    }\n\n    &Stretch {\n      align-items: stretch;\n    }\n\n    &Baseline {\n      align-items: baseline;\n    }\n\n    &Initial {\n      align-items: initial;\n    }\n  }\n  &.direction {\n    &Column {\n      flex-direction: column;\n    }\n  }\n\n  &.wrap {\n    flex-wrap: wrap;\n  }\n}\n"
  },
  {
    "path": "packages/components/layout/src/Flex/Flex.tsx",
    "content": "import React, { forwardRef, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { Clickable } from \"@vibe/clickable\";\nimport { type FlexDirection, type FlexJustify, type FlexAlign, type FlexGap, type FlexShorthand } from \"./Flex.types\";\nimport { type ElementContent, type VibeComponentProps, getStyle, useMergeRef } from \"@vibe/shared\";\nimport styles from \"./Flex.module.scss\";\nimport { camelCase } from \"es-toolkit\";\n\nexport interface FlexProps extends VibeComponentProps {\n  /**\n   * Inline styles applied to the flex container.\n   */\n  style?: object;\n  /**\n   * The direction of the flex container.\n   */\n  direction?: FlexDirection;\n  /**\n   * The HTML element or component used as the root.\n   */\n  elementType?: React.ElementType;\n  /**\n   * If true, allows wrapping of flex items.\n   */\n  wrap?: boolean;\n  /**\n   * The content inside the flex container.\n   */\n  children?: ElementContent | ElementContent[];\n  /**\n   * Defines how flex items are aligned along the main axis.\n   */\n  justify?: FlexJustify;\n  /**\n   * Defines how flex items are aligned along the cross axis.\n   */\n  align?: FlexAlign;\n  /**\n   * The gap between flex items.\n   */\n  gap?: FlexGap | number;\n  /**\n   * The flex shorthand of the flex container.\n   */\n  flex?: FlexShorthand;\n  /**\n   * The label of the flex container for accessibility.\n   */\n  \"aria-label\"?: string;\n  /**\n   * The tab order of the element.\n   */\n  tabIndex?: number;\n  /**\n   * Callback fired when the flex container is clicked.\n   */\n  onClick?: (event: React.MouseEvent) => void;\n  /**\n   * Callback fired when the mouse button is pressed on the flex container.\n   */\n  onMouseDown?: (event: React.MouseEvent) => void;\n  /**\n   * ID of the element describing the flex container.\n   */\n  \"aria-labelledby\"?: string;\n}\n\nconst Flex = forwardRef(\n  (\n    {\n      className,\n      id,\n      elementType = \"div\",\n      direction = \"row\",\n      wrap = false,\n      children,\n      justify = \"start\",\n      align = \"center\",\n      flex,\n      gap,\n      onClick,\n      onMouseDown,\n      style,\n      \"aria-labelledby\": ariaLabelledby,\n      \"aria-label\": ariaLabel,\n      tabIndex,\n      \"data-testid\": dataTestId\n    }: FlexProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef<HTMLElement>(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const gapStyle = useMemo(() => {\n      if (!gap) {\n        return;\n      }\n      if (typeof gap === \"number\") {\n        return { gap: `${gap}px` };\n      }\n      const gapTokenMap: Record<string, string> = {\n        xs: \"var(--space-4)\",\n        small: \"var(--space-8)\",\n        medium: \"var(--space-16)\",\n        large: \"var(--space-24)\"\n      };\n      return { gap: gapTokenMap[gap] };\n    }, [gap]);\n\n    const flexStyle = useMemo(() => {\n      if (!flex) return {};\n\n      if ([\"string\", \"number\"].includes(typeof flex)) {\n        return { flex };\n      }\n\n      if (typeof flex === \"object\") {\n        return {\n          flexGrow: flex.grow,\n          flexShrink: flex.shrink,\n          flexBasis: flex.basis\n        };\n      }\n\n      return {};\n    }, [flex]);\n\n    const overrideStyle = useMemo(() => ({ ...style, ...gapStyle, ...flexStyle }), [style, gapStyle, flexStyle]);\n    const onClickProps = useMemo(() => {\n      if (onClick) return { elementType, \"aria-labelledby\": ariaLabelledby };\n      return { \"aria-labelledby\": ariaLabelledby };\n    }, [onClick, elementType, ariaLabelledby]);\n    const Element = onClick ? Clickable : elementType;\n\n    return (\n      <Element\n        id={id}\n        data-testid={dataTestId}\n        {...onClickProps}\n        ref={mergedRef}\n        className={cx(\n          styles.container,\n          getStyle(styles, camelCase(`direction-${direction}`)),\n          getStyle(styles, camelCase(`justify-${justify}`)),\n          getStyle(styles, camelCase(`align-${align}`)),\n          className,\n          {\n            [styles.wrap]: wrap\n          }\n        )}\n        tabIndex={tabIndex}\n        onClick={onClick}\n        onMouseDown={onMouseDown}\n        style={overrideStyle}\n        aria-label={ariaLabel}\n      >\n        {children}\n      </Element>\n    );\n  }\n);\n\nexport default Flex;\n"
  },
  {
    "path": "packages/components/layout/src/Flex/Flex.types.ts",
    "content": "import type { CSSProperties } from \"react\";\n\nexport type FlexAlign = \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\" | \"initial\";\n\nexport type FlexJustify = \"start\" | \"center\" | \"end\" | \"space-around\" | \"space-between\" | \"initial\";\n\nexport type FlexGap = \"xs\" | \"small\" | \"medium\" | \"large\";\n\nexport type FlexDirection = \"row\" | \"column\";\n\nexport type FlexShorthand =\n  | CSSProperties[\"flex\"]\n  | {\n      grow?: CSSProperties[\"flexGrow\"];\n      shrink?: CSSProperties[\"flexShrink\"];\n      basis?: CSSProperties[\"flexBasis\"];\n    };\n"
  },
  {
    "path": "packages/components/layout/src/Flex/__tests__/Flex.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport Flex from \"../Flex\";\n\ndescribe(\"Flex renders correctly\", () => {\n  it(\"with empty props\", () => {\n    const tree = renderer.create(<Flex />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n  it(\"with data-testid\", () => {\n    const tree = renderer.create(<Flex data-testid=\"test\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n  describe(\"Horizontal display\", () => {\n    it(\"with children\", () => {\n      const tree = renderer\n        .create(\n          <Flex>\n            <div>1</div>\n            <div>2</div>\n            <div>3</div>\n          </Flex>\n        )\n        .toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n    it(\"with align\", () => {\n      const tree = renderer\n        .create(\n          <Flex align=\"end\">\n            <div>1</div>\n            <div>2</div>\n            <div>3</div>\n          </Flex>\n        )\n        .toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n    it(\"with justify\", () => {\n      const tree = renderer\n        .create(\n          <Flex justify=\"space-between\">\n            <div>1</div>\n            <div>2</div>\n            <div>3</div>\n          </Flex>\n        )\n        .toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"with gap\", () => {\n      const tree = renderer\n        .create(\n          <Flex gap=\"large\">\n            <div>1</div>\n            <div>2</div>\n            <div>3</div>\n          </Flex>\n        )\n        .toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n    it(\"with wrap\", () => {\n      const tree = renderer\n        .create(\n          <Flex wrap>\n            <div>1</div>\n            <div>2</div>\n            <div>3</div>\n          </Flex>\n        )\n        .toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n    it(\"with flex\", () => {\n      const tree = renderer\n        .create(\n          <Flex>\n            <Flex flex={{ grow: 1, shrink: 0, basis: \"auto\" }}>1</Flex>\n            <Flex flex={{ grow: 0, shrink: 1, basis: \"auto\" }}>2</Flex>\n            <Flex flex={{ grow: 0, shrink: 1, basis: \"auto\" }}>3</Flex>\n          </Flex>\n        )\n        .toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n    it(\"with flex shorthand\", () => {\n      const tree = renderer\n        .create(\n          <Flex>\n            <Flex flex=\"1 0 auto\">1</Flex>\n            <Flex flex=\"0 1 auto\">2</Flex>\n            <Flex flex=\"0 1 auto\">3</Flex>\n          </Flex>\n        )\n        .toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n  });\n  describe(\"Vertical display\", () => {\n    it(\"with children\", () => {\n      const tree = renderer\n        .create(\n          <Flex direction=\"column\">\n            <div>1</div>\n            <div>2</div>\n            <div>3</div>\n          </Flex>\n        )\n        .toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"with justify\", () => {\n      const tree = renderer\n        .create(\n          <Flex direction=\"column\" justify=\"space-between\">\n            <div>1</div>\n            <div>2</div>\n            <div>3</div>\n          </Flex>\n        )\n        .toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n    it(\"with align\", () => {\n      const tree = renderer\n        .create(\n          <Flex direction=\"column\" align=\"end\">\n            <div>1</div>\n            <div>2</div>\n            <div>3</div>\n          </Flex>\n        )\n        .toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n    it(\"with wrap\", () => {\n      const tree = renderer\n        .create(\n          <Flex direction=\"column\" wrap>\n            <div>1</div>\n            <div>2</div>\n            <div>3</div>\n          </Flex>\n        )\n        .toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n    it(\"with flex\", () => {\n      const tree = renderer\n        .create(\n          <Flex direction=\"column\">\n            <Flex flex={{ grow: 1, shrink: 0, basis: \"auto\" }}>1</Flex>\n            <Flex flex={{ grow: 0, shrink: 1, basis: \"auto\" }}>2</Flex>\n            <Flex flex={{ grow: 0, shrink: 1, basis: \"auto\" }}>3</Flex>\n          </Flex>\n        )\n        .toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/components/layout/src/Flex/__tests__/__snapshots__/Flex.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`Flex renders correctly > Horizontal display > with align 1`] = `\n<div\n  className=\"container directionRow justifyStart alignEnd\"\n  style={{}}\n>\n  <div>\n    1\n  </div>\n  <div>\n    2\n  </div>\n  <div>\n    3\n  </div>\n</div>\n`;\n\nexports[`Flex renders correctly > Horizontal display > with children 1`] = `\n<div\n  className=\"container directionRow justifyStart alignCenter\"\n  style={{}}\n>\n  <div>\n    1\n  </div>\n  <div>\n    2\n  </div>\n  <div>\n    3\n  </div>\n</div>\n`;\n\nexports[`Flex renders correctly > Horizontal display > with flex 1`] = `\n<div\n  className=\"container directionRow justifyStart alignCenter\"\n  style={{}}\n>\n  <div\n    className=\"container directionRow justifyStart alignCenter\"\n    style={\n      {\n        \"flexBasis\": \"auto\",\n        \"flexGrow\": 1,\n        \"flexShrink\": 0,\n      }\n    }\n  >\n    1\n  </div>\n  <div\n    className=\"container directionRow justifyStart alignCenter\"\n    style={\n      {\n        \"flexBasis\": \"auto\",\n        \"flexGrow\": 0,\n        \"flexShrink\": 1,\n      }\n    }\n  >\n    2\n  </div>\n  <div\n    className=\"container directionRow justifyStart alignCenter\"\n    style={\n      {\n        \"flexBasis\": \"auto\",\n        \"flexGrow\": 0,\n        \"flexShrink\": 1,\n      }\n    }\n  >\n    3\n  </div>\n</div>\n`;\n\nexports[`Flex renders correctly > Horizontal display > with flex shorthand 1`] = `\n<div\n  className=\"container directionRow justifyStart alignCenter\"\n  style={{}}\n>\n  <div\n    className=\"container directionRow justifyStart alignCenter\"\n    style={\n      {\n        \"flex\": \"1 0 auto\",\n      }\n    }\n  >\n    1\n  </div>\n  <div\n    className=\"container directionRow justifyStart alignCenter\"\n    style={\n      {\n        \"flex\": \"0 1 auto\",\n      }\n    }\n  >\n    2\n  </div>\n  <div\n    className=\"container directionRow justifyStart alignCenter\"\n    style={\n      {\n        \"flex\": \"0 1 auto\",\n      }\n    }\n  >\n    3\n  </div>\n</div>\n`;\n\nexports[`Flex renders correctly > Horizontal display > with gap 1`] = `\n<div\n  className=\"container directionRow justifyStart alignCenter\"\n  style={\n    {\n      \"gap\": \"var(--space-24)\",\n    }\n  }\n>\n  <div>\n    1\n  </div>\n  <div>\n    2\n  </div>\n  <div>\n    3\n  </div>\n</div>\n`;\n\nexports[`Flex renders correctly > Horizontal display > with justify 1`] = `\n<div\n  className=\"container directionRow justifySpaceBetween alignCenter\"\n  style={{}}\n>\n  <div>\n    1\n  </div>\n  <div>\n    2\n  </div>\n  <div>\n    3\n  </div>\n</div>\n`;\n\nexports[`Flex renders correctly > Horizontal display > with wrap 1`] = `\n<div\n  className=\"container directionRow justifyStart alignCenter wrap\"\n  style={{}}\n>\n  <div>\n    1\n  </div>\n  <div>\n    2\n  </div>\n  <div>\n    3\n  </div>\n</div>\n`;\n\nexports[`Flex renders correctly > Vertical display > with align 1`] = `\n<div\n  className=\"container directionColumn justifyStart alignEnd\"\n  style={{}}\n>\n  <div>\n    1\n  </div>\n  <div>\n    2\n  </div>\n  <div>\n    3\n  </div>\n</div>\n`;\n\nexports[`Flex renders correctly > Vertical display > with children 1`] = `\n<div\n  className=\"container directionColumn justifyStart alignCenter\"\n  style={{}}\n>\n  <div>\n    1\n  </div>\n  <div>\n    2\n  </div>\n  <div>\n    3\n  </div>\n</div>\n`;\n\nexports[`Flex renders correctly > Vertical display > with flex 1`] = `\n<div\n  className=\"container directionColumn justifyStart alignCenter\"\n  style={{}}\n>\n  <div\n    className=\"container directionRow justifyStart alignCenter\"\n    style={\n      {\n        \"flexBasis\": \"auto\",\n        \"flexGrow\": 1,\n        \"flexShrink\": 0,\n      }\n    }\n  >\n    1\n  </div>\n  <div\n    className=\"container directionRow justifyStart alignCenter\"\n    style={\n      {\n        \"flexBasis\": \"auto\",\n        \"flexGrow\": 0,\n        \"flexShrink\": 1,\n      }\n    }\n  >\n    2\n  </div>\n  <div\n    className=\"container directionRow justifyStart alignCenter\"\n    style={\n      {\n        \"flexBasis\": \"auto\",\n        \"flexGrow\": 0,\n        \"flexShrink\": 1,\n      }\n    }\n  >\n    3\n  </div>\n</div>\n`;\n\nexports[`Flex renders correctly > Vertical display > with justify 1`] = `\n<div\n  className=\"container directionColumn justifySpaceBetween alignCenter\"\n  style={{}}\n>\n  <div>\n    1\n  </div>\n  <div>\n    2\n  </div>\n  <div>\n    3\n  </div>\n</div>\n`;\n\nexports[`Flex renders correctly > Vertical display > with wrap 1`] = `\n<div\n  className=\"container directionColumn justifyStart alignCenter wrap\"\n  style={{}}\n>\n  <div>\n    1\n  </div>\n  <div>\n    2\n  </div>\n  <div>\n    3\n  </div>\n</div>\n`;\n\nexports[`Flex renders correctly > with data-testid 1`] = `\n<div\n  className=\"container directionRow justifyStart alignCenter\"\n  data-testid=\"test\"\n  style={{}}\n/>\n`;\n\nexports[`Flex renders correctly > with empty props 1`] = `\n<div\n  className=\"container directionRow justifyStart alignCenter\"\n  style={{}}\n/>\n`;\n"
  },
  {
    "path": "packages/components/layout/src/Flex/index.ts",
    "content": "export { default as Flex, type FlexProps } from \"./Flex\";\n"
  },
  {
    "path": "packages/components/layout/src/index.ts",
    "content": "export * from \"./Flex\";\nexport * from \"./Box\";\n"
  },
  {
    "path": "packages/components/layout/src/types/files.d.ts",
    "content": "// SCSS\ndeclare module \"*.module.scss\" {\n  const classes: { [key: string]: string };\n  export default classes;\n}\n\n// SVG\ndeclare module \"*.svg\" {\n  const content: string;\n  export default content;\n}\n\ndeclare module \"*.png\";\ndeclare module \"*.mp4\";\ndeclare module \"*.pdf\";\n"
  },
  {
    "path": "packages/components/layout/tsconfig.json",
    "content": "{\n  \"extends\": \"@vibe/config/tsconfig\",\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"rootDir\": \"src\"\n  },\n  \"include\": [\"src/**/*\"]\n}\n"
  },
  {
    "path": "packages/components/layout/vitest.config.mjs",
    "content": "import config from \"@vibe/config/vitest.config\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n  ...config\n});\n"
  },
  {
    "path": "packages/components/layout/vitest.setup.mjs",
    "content": "import { vi } from \"vitest\";\nimport \"@testing-library/jest-dom\";\nimport React from \"react\";\n\n// Mock ResizeObserver\nclass ResizeObserver {\n  observe() {}\n  unobserve() {}\n  disconnect() {}\n}\nglobal.ResizeObserver = ResizeObserver;\n\n// Mock react-inlinesvg\nvi.mock(\"react-inlinesvg\", () => ({\n  default: ({ src, ...props }) =>\n    React.createElement(\"div\", {\n      \"data-testid\": \"mock-svg\",\n      \"data-src\": src,\n      ...props\n    })\n}));\n"
  },
  {
    "path": "packages/components/loader/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [4.0.1](https://github.com/mondaycom/vibe/compare/@vibe/loader@4.0.0...@vibe/loader@4.0.1) (2026-04-16)\n\n**Note:** Version bump only for package @vibe/loader\n\n\n\n\n\n## [3.0.11](https://github.com/mondaycom/vibe/compare/@vibe/loader@3.0.10...@vibe/loader@3.0.11) (2026-01-18)\n\n**Note:** Version bump only for package @vibe/loader\n\n\n\n\n\n## [3.0.10](https://github.com/mondaycom/vibe/compare/@vibe/loader@3.0.9...@vibe/loader@3.0.10) (2026-01-04)\n\n**Note:** Version bump only for package @vibe/loader\n\n\n\n\n\n## [3.0.9](https://github.com/mondaycom/vibe/compare/@vibe/loader@3.0.8...@vibe/loader@3.0.9) (2025-12-17)\n\n**Note:** Version bump only for package @vibe/loader\n\n\n\n\n\n## [3.0.8](https://github.com/mondaycom/vibe/compare/@vibe/loader@3.0.7...@vibe/loader@3.0.8) (2025-11-26)\n\n**Note:** Version bump only for package @vibe/loader\n\n\n\n\n\n## [3.0.7](https://github.com/mondaycom/vibe/compare/@vibe/loader@3.0.6...@vibe/loader@3.0.7) (2025-11-25)\n\n**Note:** Version bump only for package @vibe/loader\n\n\n\n\n\n## [3.0.6](https://github.com/mondaycom/vibe/compare/@vibe/loader@3.0.5...@vibe/loader@3.0.6) (2025-11-19)\n\n**Note:** Version bump only for package @vibe/loader\n\n\n\n\n\n## [3.0.5](https://github.com/mondaycom/vibe/compare/@vibe/loader@3.0.4...@vibe/loader@3.0.5) (2025-11-06)\n\n**Note:** Version bump only for package @vibe/loader\n\n\n\n\n\n## [3.0.4](https://github.com/mondaycom/vibe/compare/@vibe/loader@3.0.3...@vibe/loader@3.0.4) (2025-10-30)\n\n**Note:** Version bump only for package @vibe/loader\n\n\n\n\n\n## [3.0.3](https://github.com/mondaycom/vibe/compare/@vibe/loader@3.0.2...@vibe/loader@3.0.3) (2025-10-26)\n\n**Note:** Version bump only for package @vibe/loader\n\n\n\n\n\n## [3.0.2](https://github.com/mondaycom/vibe/compare/@vibe/loader@3.0.1...@vibe/loader@3.0.2) (2025-10-26)\n\n\n### Bug Fixes\n\n* remove unneeded dev dependencies ([#3157](https://github.com/mondaycom/vibe/issues/3157)) ([eec1792](https://github.com/mondaycom/vibe/commit/eec17924422cb0478bb713290919d80a516cd436))\n\n\n\n\n\n## 3.0.1 (2025-10-25)\n\n**Note:** Version bump only for package @vibe/loader\n"
  },
  {
    "path": "packages/components/loader/package.json",
    "content": "{\n  \"name\": \"@vibe/loader\",\n  \"version\": \"4.0.1\",\n  \"description\": \"Vibe sub-package for loader components\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/mondaycom/vibe.git\",\n    \"directory\": \"packages/components/loader\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/mondaycom/vibe/issues\"\n  },\n  \"homepage\": \"https://github.com/mondaycom/vibe#readme\",\n  \"author\": \"monday.com\",\n  \"license\": \"MIT\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.js\",\n  \"types\": \"dist/index.d.ts\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \".\": {\n      \"types\": \"./dist/index.d.ts\",\n      \"import\": \"./dist/index.js\",\n      \"default\": \"./dist/index.js\"\n    },\n    \"./mockedClassNames\": {\n      \"import\": \"./dist/mocked_classnames/index.js\",\n      \"default\": \"./dist/mocked_classnames/index.js\"\n    }\n  },\n  \"scripts\": {\n    \"build\": \"rollup -c && yarn build:mocked-classnames\",\n    \"build:mocked-classnames\": \"[ \\\"$SKIP_RELEASE_ARTIFACTS\\\" = \\\"true\\\" ] || mock_classnames=on rollup -c\",\n    \"test\": \"vitest run\",\n    \"lint\": \"eslint \\\"./src/**/*.{js,jsx,ts,tsx}\\\"\"\n  },\n  \"dependencies\": {\n    \"@vibe/shared\": \"4.0.1\",\n    \"classnames\": \"^2.5.1\"\n  },\n  \"devDependencies\": {\n    \"@testing-library/react\": \"^12.1.2\",\n    \"@vibe/config\": \"4.0.0\",\n    \"react\": \"^16.13.0\",\n    \"react-dom\": \"^16.13.0\",\n    \"react-test-renderer\": \"16\",\n    \"typescript\": \"^5.9.3\",\n    \"vitest\": \"^1.6.0\"\n  },\n  \"peerDependencies\": {\n    \"react\": \">=16.9.0\",\n    \"react-dom\": \">=16.9.0\"\n  },\n  \"sideEffects\": [\n    \"*.scss\",\n    \"*.css\",\n    \"*.scss.js\",\n    \"*.css.js\"\n  ],\n  \"eslintConfig\": {\n    \"extends\": [\n      \"../../../node_modules/@vibe/config/.eslintrc.cjs\"\n    ]\n  }\n}\n"
  },
  {
    "path": "packages/components/loader/rollup.config.mjs",
    "content": "import config from \"@vibe/config/rollup.config\";\n\nexport default config;\n"
  },
  {
    "path": "packages/components/loader/src/Loader/Loader.module.scss",
    "content": ".loaderContainer {\n  position: relative;\n  height: 100%;\n  width: 100%;\n\n  .circleLoaderSpinnerBackground {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    margin-top: -50%;\n    margin-left: -50%;\n    stroke: var(--ui-background-color);\n  }\n\n  .circleLoaderSpinner {\n    animation: rotate 1s linear infinite;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    margin-top: -50%;\n    margin-left: -50%;\n    stroke: currentColor;\n    stroke-linecap: round;\n\n    .circleLoaderSpinnerPath {\n      animation: dash 1s infinite;\n    }\n  }\n\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  @keyframes dash {\n    0% {\n      stroke-dasharray: 1, 150;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -35;\n    }\n    100% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -124;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/components/loader/src/Loader/Loader.tsx",
    "content": "import React, { type ForwardedRef, forwardRef, useMemo } from \"react\";\nimport cx from \"classnames\";\nimport { type LoaderColors, type LoaderSize, type LoaderSizes } from \"./Loader.types\";\nimport { getTestId, type VibeComponentProps, ComponentDefaultTestId } from \"@vibe/shared\";\nimport styles from \"./Loader.module.scss\";\n\nconst mapSizesToLoaderSize: Record<LoaderSizes, number> = {\n  xs: 16,\n  small: 24,\n  medium: 40,\n  large: 64\n};\n\nconst mapLoaderColorsToColors: Record<LoaderColors, string> = {\n  primary: \"primary-color\",\n  secondary: \"secondary-text-color\",\n  onPrimary: \"text-color-on-inverted\",\n  dark: \"primary-text-color\"\n};\n\nexport interface LoaderProps extends VibeComponentProps {\n  /**\n   * The size of the loader, either a predefined size or a custom number.\n   */\n  size?: LoaderSize;\n  /**\n   * The color of the loader.\n   */\n  color?: LoaderColors;\n  /**\n   * If true, a background circle is displayed behind the loader.\n   */\n  hasBackground?: boolean;\n  /**\n   * Class name applied to the wrapper element.\n   */\n  wrapperClassName?: string;\n}\n\nconst Loader = forwardRef(\n  (\n    { className, wrapperClassName, size, color, hasBackground = false, id, \"data-testid\": dataTestId }: LoaderProps,\n    ref: ForwardedRef<HTMLDivElement>\n  ) => {\n    const sizeStyle = useMemo(() => {\n      const loaderSize = typeof size === \"string\" ? mapSizesToLoaderSize[size] : size;\n      if (typeof loaderSize === \"number\") {\n        return { width: loaderSize, height: loaderSize };\n      }\n      return undefined;\n    }, [size]);\n\n    const colorStyle = useMemo(() => {\n      if (!mapLoaderColorsToColors[color]) return;\n      return `var(--${mapLoaderColorsToColors[color]})`;\n    }, [color]);\n\n    return (\n      <div\n        className={cx(styles.loaderContainer, wrapperClassName)}\n        ref={ref}\n        role=\"alert\"\n        title=\"loading\"\n        style={sizeStyle}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.LOADER, id)}\n      >\n        <svg className={cx(styles.circleLoaderSpinner, className)} viewBox=\"0 0 50 50\" color={colorStyle} aria-hidden>\n          {hasBackground && (\n            <circle\n              className={styles.circleLoaderSpinnerBackground}\n              cx=\"25\"\n              cy=\"25\"\n              r=\"20\"\n              fill=\"none\"\n              strokeWidth=\"5\"\n            />\n          )}\n          <circle className={styles.circleLoaderSpinnerPath} cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" strokeWidth=\"5\" />\n        </svg>\n      </div>\n    );\n  }\n);\n\nexport default Loader;\n"
  },
  {
    "path": "packages/components/loader/src/Loader/Loader.types.ts",
    "content": "export type LoaderColors = \"primary\" | \"secondary\" | \"onPrimary\" | \"dark\";\n\nexport type LoaderSizes = \"xs\" | \"small\" | \"medium\" | \"large\";\n\nexport type LoaderSize = LoaderSizes | number;\n"
  },
  {
    "path": "packages/components/loader/src/Loader/__tests__/Loader.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport Loader from \"../Loader\";\n\ndescribe(\"Loader renders correctly\", () => {\n  it(\"with custom class name\", () => {\n    const tree = renderer.create(<Loader size=\"medium\" className=\"dummy-class-name\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with custom class name wrapper\", () => {\n    const tree = renderer.create(<Loader size=\"medium\" wrapperClassName=\"dummy-class-name\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  describe(\"with size variants\", () => {\n    it(\"with XS size\", () => {\n      const tree = renderer.create(<Loader size=\"xs\" />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"with SMALL size\", () => {\n      const tree = renderer.create(<Loader size=\"small\" />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"with MEDIUM size\", () => {\n      const tree = renderer.create(<Loader size=\"medium\" />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"with LARGE size\", () => {\n      const tree = renderer.create(<Loader size=\"large\" />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"with custom size as number\", () => {\n      const tree = renderer.create(<Loader size={100} />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n  });\n\n  describe(\"with color variants\", () => {\n    it(\"with PRIMARY color\", () => {\n      const tree = renderer.create(<Loader size=\"medium\" color=\"primary\" />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"with ON_PRIMARY color\", () => {\n      const tree = renderer.create(<Loader size=\"medium\" color=\"onPrimary\" />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"with SECONDARY color\", () => {\n      const tree = renderer.create(<Loader size=\"medium\" color=\"secondary\" />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"with DARK color\", () => {\n      const tree = renderer.create(<Loader size=\"medium\" color=\"dark\" />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n  });\n\n  describe(\"with visual variants\", () => {\n    it(\"with background\", () => {\n      const tree = renderer.create(<Loader size=\"medium\" hasBackground />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/components/loader/src/Loader/__tests__/Loader.test.tsx",
    "content": "import { afterEach, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { cleanup, render } from \"@testing-library/react\";\nimport Loader from \"../Loader\";\n\ndescribe(\"<Loader />\", () => {\n  afterEach(() => {\n    cleanup();\n  });\n\n  it(\"should be able to forward ref\", () => {\n    const ref = React.createRef();\n    render(<Loader ref={ref} className=\"ref-class-name\" />);\n    expect(ref.current.querySelector(\".ref-class-name\")).toBeInTheDocument();\n  });\n});\n"
  },
  {
    "path": "packages/components/loader/src/Loader/__tests__/__snapshots__/Loader.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`Loader renders correctly > with color variants > with DARK color 1`] = `\n<div\n  className=\"loaderContainer\"\n  data-testid=\"loader\"\n  role=\"alert\"\n  style={\n    {\n      \"height\": 40,\n      \"width\": 40,\n    }\n  }\n  title=\"loading\"\n>\n  <svg\n    aria-hidden={true}\n    className=\"circleLoaderSpinner\"\n    color=\"var(--primary-text-color)\"\n    viewBox=\"0 0 50 50\"\n  >\n    <circle\n      className=\"circleLoaderSpinnerPath\"\n      cx=\"25\"\n      cy=\"25\"\n      fill=\"none\"\n      r=\"20\"\n      strokeWidth=\"5\"\n    />\n  </svg>\n</div>\n`;\n\nexports[`Loader renders correctly > with color variants > with ON_PRIMARY color 1`] = `\n<div\n  className=\"loaderContainer\"\n  data-testid=\"loader\"\n  role=\"alert\"\n  style={\n    {\n      \"height\": 40,\n      \"width\": 40,\n    }\n  }\n  title=\"loading\"\n>\n  <svg\n    aria-hidden={true}\n    className=\"circleLoaderSpinner\"\n    color=\"var(--text-color-on-inverted)\"\n    viewBox=\"0 0 50 50\"\n  >\n    <circle\n      className=\"circleLoaderSpinnerPath\"\n      cx=\"25\"\n      cy=\"25\"\n      fill=\"none\"\n      r=\"20\"\n      strokeWidth=\"5\"\n    />\n  </svg>\n</div>\n`;\n\nexports[`Loader renders correctly > with color variants > with PRIMARY color 1`] = `\n<div\n  className=\"loaderContainer\"\n  data-testid=\"loader\"\n  role=\"alert\"\n  style={\n    {\n      \"height\": 40,\n      \"width\": 40,\n    }\n  }\n  title=\"loading\"\n>\n  <svg\n    aria-hidden={true}\n    className=\"circleLoaderSpinner\"\n    color=\"var(--primary-color)\"\n    viewBox=\"0 0 50 50\"\n  >\n    <circle\n      className=\"circleLoaderSpinnerPath\"\n      cx=\"25\"\n      cy=\"25\"\n      fill=\"none\"\n      r=\"20\"\n      strokeWidth=\"5\"\n    />\n  </svg>\n</div>\n`;\n\nexports[`Loader renders correctly > with color variants > with SECONDARY color 1`] = `\n<div\n  className=\"loaderContainer\"\n  data-testid=\"loader\"\n  role=\"alert\"\n  style={\n    {\n      \"height\": 40,\n      \"width\": 40,\n    }\n  }\n  title=\"loading\"\n>\n  <svg\n    aria-hidden={true}\n    className=\"circleLoaderSpinner\"\n    color=\"var(--secondary-text-color)\"\n    viewBox=\"0 0 50 50\"\n  >\n    <circle\n      className=\"circleLoaderSpinnerPath\"\n      cx=\"25\"\n      cy=\"25\"\n      fill=\"none\"\n      r=\"20\"\n      strokeWidth=\"5\"\n    />\n  </svg>\n</div>\n`;\n\nexports[`Loader renders correctly > with custom class name 1`] = `\n<div\n  className=\"loaderContainer\"\n  data-testid=\"loader\"\n  role=\"alert\"\n  style={\n    {\n      \"height\": 40,\n      \"width\": 40,\n    }\n  }\n  title=\"loading\"\n>\n  <svg\n    aria-hidden={true}\n    className=\"circleLoaderSpinner dummy-class-name\"\n    viewBox=\"0 0 50 50\"\n  >\n    <circle\n      className=\"circleLoaderSpinnerPath\"\n      cx=\"25\"\n      cy=\"25\"\n      fill=\"none\"\n      r=\"20\"\n      strokeWidth=\"5\"\n    />\n  </svg>\n</div>\n`;\n\nexports[`Loader renders correctly > with custom class name wrapper 1`] = `\n<div\n  className=\"loaderContainer dummy-class-name\"\n  data-testid=\"loader\"\n  role=\"alert\"\n  style={\n    {\n      \"height\": 40,\n      \"width\": 40,\n    }\n  }\n  title=\"loading\"\n>\n  <svg\n    aria-hidden={true}\n    className=\"circleLoaderSpinner\"\n    viewBox=\"0 0 50 50\"\n  >\n    <circle\n      className=\"circleLoaderSpinnerPath\"\n      cx=\"25\"\n      cy=\"25\"\n      fill=\"none\"\n      r=\"20\"\n      strokeWidth=\"5\"\n    />\n  </svg>\n</div>\n`;\n\nexports[`Loader renders correctly > with size variants > with LARGE size 1`] = `\n<div\n  className=\"loaderContainer\"\n  data-testid=\"loader\"\n  role=\"alert\"\n  style={\n    {\n      \"height\": 64,\n      \"width\": 64,\n    }\n  }\n  title=\"loading\"\n>\n  <svg\n    aria-hidden={true}\n    className=\"circleLoaderSpinner\"\n    viewBox=\"0 0 50 50\"\n  >\n    <circle\n      className=\"circleLoaderSpinnerPath\"\n      cx=\"25\"\n      cy=\"25\"\n      fill=\"none\"\n      r=\"20\"\n      strokeWidth=\"5\"\n    />\n  </svg>\n</div>\n`;\n\nexports[`Loader renders correctly > with size variants > with MEDIUM size 1`] = `\n<div\n  className=\"loaderContainer\"\n  data-testid=\"loader\"\n  role=\"alert\"\n  style={\n    {\n      \"height\": 40,\n      \"width\": 40,\n    }\n  }\n  title=\"loading\"\n>\n  <svg\n    aria-hidden={true}\n    className=\"circleLoaderSpinner\"\n    viewBox=\"0 0 50 50\"\n  >\n    <circle\n      className=\"circleLoaderSpinnerPath\"\n      cx=\"25\"\n      cy=\"25\"\n      fill=\"none\"\n      r=\"20\"\n      strokeWidth=\"5\"\n    />\n  </svg>\n</div>\n`;\n\nexports[`Loader renders correctly > with size variants > with SMALL size 1`] = `\n<div\n  className=\"loaderContainer\"\n  data-testid=\"loader\"\n  role=\"alert\"\n  style={\n    {\n      \"height\": 24,\n      \"width\": 24,\n    }\n  }\n  title=\"loading\"\n>\n  <svg\n    aria-hidden={true}\n    className=\"circleLoaderSpinner\"\n    viewBox=\"0 0 50 50\"\n  >\n    <circle\n      className=\"circleLoaderSpinnerPath\"\n      cx=\"25\"\n      cy=\"25\"\n      fill=\"none\"\n      r=\"20\"\n      strokeWidth=\"5\"\n    />\n  </svg>\n</div>\n`;\n\nexports[`Loader renders correctly > with size variants > with XS size 1`] = `\n<div\n  className=\"loaderContainer\"\n  data-testid=\"loader\"\n  role=\"alert\"\n  style={\n    {\n      \"height\": 16,\n      \"width\": 16,\n    }\n  }\n  title=\"loading\"\n>\n  <svg\n    aria-hidden={true}\n    className=\"circleLoaderSpinner\"\n    viewBox=\"0 0 50 50\"\n  >\n    <circle\n      className=\"circleLoaderSpinnerPath\"\n      cx=\"25\"\n      cy=\"25\"\n      fill=\"none\"\n      r=\"20\"\n      strokeWidth=\"5\"\n    />\n  </svg>\n</div>\n`;\n\nexports[`Loader renders correctly > with size variants > with custom size as number 1`] = `\n<div\n  className=\"loaderContainer\"\n  data-testid=\"loader\"\n  role=\"alert\"\n  style={\n    {\n      \"height\": 100,\n      \"width\": 100,\n    }\n  }\n  title=\"loading\"\n>\n  <svg\n    aria-hidden={true}\n    className=\"circleLoaderSpinner\"\n    viewBox=\"0 0 50 50\"\n  >\n    <circle\n      className=\"circleLoaderSpinnerPath\"\n      cx=\"25\"\n      cy=\"25\"\n      fill=\"none\"\n      r=\"20\"\n      strokeWidth=\"5\"\n    />\n  </svg>\n</div>\n`;\n\nexports[`Loader renders correctly > with visual variants > with background 1`] = `\n<div\n  className=\"loaderContainer\"\n  data-testid=\"loader\"\n  role=\"alert\"\n  style={\n    {\n      \"height\": 40,\n      \"width\": 40,\n    }\n  }\n  title=\"loading\"\n>\n  <svg\n    aria-hidden={true}\n    className=\"circleLoaderSpinner\"\n    viewBox=\"0 0 50 50\"\n  >\n    <circle\n      className=\"circleLoaderSpinnerBackground\"\n      cx=\"25\"\n      cy=\"25\"\n      fill=\"none\"\n      r=\"20\"\n      strokeWidth=\"5\"\n    />\n    <circle\n      className=\"circleLoaderSpinnerPath\"\n      cx=\"25\"\n      cy=\"25\"\n      fill=\"none\"\n      r=\"20\"\n      strokeWidth=\"5\"\n    />\n  </svg>\n</div>\n`;\n"
  },
  {
    "path": "packages/components/loader/src/Loader/index.ts",
    "content": "export { default as Loader, type LoaderProps } from \"./Loader\";\n\nexport * from \"./Loader.types\";\n"
  },
  {
    "path": "packages/components/loader/src/index.ts",
    "content": "export * from \"./Loader\";\n"
  },
  {
    "path": "packages/components/loader/src/types/files.d.ts",
    "content": "// SCSS\ndeclare module \"*.module.scss\" {\n  const classes: { [key: string]: string };\n  export default classes;\n}\n\n// SVG\ndeclare module \"*.svg\" {\n  const content: string;\n  export default content;\n}\n\ndeclare module \"*.png\";\ndeclare module \"*.mp4\";\ndeclare module \"*.pdf\";\n"
  },
  {
    "path": "packages/components/loader/tsconfig.json",
    "content": "{\n  \"extends\": \"@vibe/config/tsconfig\",\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"rootDir\": \"src\"\n  },\n  \"include\": [\"src/**/*\"]\n}\n"
  },
  {
    "path": "packages/components/loader/vitest.config.mjs",
    "content": "import config from \"@vibe/config/vitest.config\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n  ...config\n});\n"
  },
  {
    "path": "packages/components/loader/vitest.setup.mjs",
    "content": "import { vi } from \"vitest\";\nimport \"@testing-library/jest-dom\";\nimport React from \"react\";\n\n// Mock ResizeObserver\nclass ResizeObserver {\n  observe() {}\n  unobserve() {}\n  disconnect() {}\n}\nglobal.ResizeObserver = ResizeObserver;\n\n// Mock react-inlinesvg\nvi.mock(\"react-inlinesvg\", () => ({\n  default: ({ src, ...props }) =>\n    React.createElement(\"div\", {\n      \"data-testid\": \"mock-svg\",\n      \"data-src\": src,\n      ...props\n    })\n}));\n"
  },
  {
    "path": "packages/components/tooltip/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [4.0.1](https://github.com/mondaycom/vibe/compare/@vibe/tooltip@4.0.0...@vibe/tooltip@4.0.1) (2026-04-16)\n\n**Note:** Version bump only for package @vibe/tooltip\n\n\n\n\n\n## [3.0.5](https://github.com/mondaycom/vibe/compare/@vibe/tooltip@3.0.4...@vibe/tooltip@3.0.5) (2026-02-27)\n\n**Note:** Version bump only for package @vibe/tooltip\n\n\n\n\n\n## [3.0.4](https://github.com/mondaycom/vibe/compare/@vibe/tooltip@3.0.3...@vibe/tooltip@3.0.4) (2026-01-28)\n\n**Note:** Version bump only for package @vibe/tooltip\n\n\n\n\n\n## [3.0.3](https://github.com/mondaycom/vibe/compare/@vibe/tooltip@3.0.2...@vibe/tooltip@3.0.3) (2026-01-18)\n\n**Note:** Version bump only for package @vibe/tooltip\n\n\n\n\n\n## [3.0.2](https://github.com/mondaycom/vibe/compare/@vibe/tooltip@3.0.1...@vibe/tooltip@3.0.2) (2026-01-04)\n\n**Note:** Version bump only for package @vibe/tooltip\n\n\n\n\n\n## 3.0.1 (2026-01-04)\n\n**Note:** Version bump only for package @vibe/tooltip\n"
  },
  {
    "path": "packages/components/tooltip/package.json",
    "content": "{\n  \"name\": \"@vibe/tooltip\",\n  \"version\": \"4.0.1\",\n  \"description\": \"Vibe sub-package for tooltip components\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/mondaycom/vibe.git\",\n    \"directory\": \"packages/components/tooltip\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/mondaycom/vibe/issues\"\n  },\n  \"homepage\": \"https://github.com/mondaycom/vibe#readme\",\n  \"author\": \"monday.com\",\n  \"license\": \"MIT\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.js\",\n  \"types\": \"dist/index.d.ts\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \".\": {\n      \"types\": \"./dist/index.d.ts\",\n      \"import\": \"./dist/index.js\",\n      \"default\": \"./dist/index.js\"\n    },\n    \"./mockedClassNames\": {\n      \"import\": \"./dist/mocked_classnames/index.js\",\n      \"default\": \"./dist/mocked_classnames/index.js\"\n    }\n  },\n  \"scripts\": {\n    \"build\": \"rollup -c && yarn build:mocked-classnames\",\n    \"build:mocked-classnames\": \"[ \\\"$SKIP_RELEASE_ARTIFACTS\\\" = \\\"true\\\" ] || mock_classnames=on rollup -c\",\n    \"test\": \"vitest run\",\n    \"lint\": \"eslint \\\"./src/**/*.{js,jsx,ts,tsx}\\\"\"\n  },\n  \"dependencies\": {\n    \"@vibe/dialog\": \"4.0.1\",\n    \"@vibe/icon\": \"4.0.1\",\n    \"@vibe/layout\": \"4.0.1\",\n    \"@vibe/shared\": \"4.0.1\",\n    \"@vibe/style\": \"4.0.0\",\n    \"classnames\": \"^2.5.1\",\n    \"es-toolkit\": \"^1.39.10\"\n  },\n  \"devDependencies\": {\n    \"@testing-library/react\": \"^12.1.2\",\n    \"@vibe/config\": \"4.0.0\",\n    \"@vibe/icons\": \"4.0.0\",\n    \"react\": \"^16.13.0\",\n    \"react-dom\": \"^16.13.0\",\n    \"react-test-renderer\": \"16\",\n    \"typescript\": \"^5.9.3\",\n    \"vitest\": \"^1.6.0\"\n  },\n  \"peerDependencies\": {\n    \"react\": \">=16.9.0\",\n    \"react-dom\": \">=16.9.0\"\n  },\n  \"sideEffects\": [\n    \"*.scss\",\n    \"*.css\",\n    \"*.scss.js\",\n    \"*.css.js\"\n  ],\n  \"eslintConfig\": {\n    \"extends\": [\n      \"../../../node_modules/@vibe/config/.eslintrc.cjs\"\n    ]\n  }\n}\n"
  },
  {
    "path": "packages/components/tooltip/rollup.config.mjs",
    "content": "import config from \"@vibe/config/rollup.config\";\n\nexport default config;\n"
  },
  {
    "path": "packages/components/tooltip/src/Tooltip/Tooltip.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n.tooltip {\n  position: relative;\n  display: inline-block;\n  border-radius: var(--tooltip-border-radius, var(--border-radius-small));\n  box-shadow: var(--box-shadow-medium);\n  @include vibe-text(text2, normal);\n  max-width: var(--tooltip-max-width, 50vw);\n  word-break: break-word;\n  background-color: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n  --tooltip-max-width: 240px;\n  white-space: pre-wrap;\n\n  .image {\n    display: block;\n    position: relative;\n    border-start-end-radius: 2px;\n    border-start-start-radius: 2px;\n    padding: 2px 2px 0 2px;\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n    min-width: var(--tooltip-max-width);\n    z-index: 1;\n  }\n\n  .title {\n    @include vibe-text(text2, bold);\n  }\n\n  .content {\n    word-break: break-word;\n    display: inline-block;\n    padding: var(--tooltip-padding, #{var(--space-8) var(--space-16)});\n  }\n}\n\n.tooltip.paddingSizeMd {\n  border-radius: var(--border-radius-medium);\n  padding: var(--space-16);\n  @include vibe-text(text2, normal);\n}\n\n.tooltip a.tooltipWhiteLink {\n  color: #fff;\n}\n\n.arrow,\n.dark,\n.arrow.dark {\n  background-color: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n\n.arrow.arrow.dark,\n.arrow.arrow.primary {\n  :global(.dark-app-theme) &,\n  :global(.black-app-theme) &,\n  :global(.hacker-app-theme) & {\n    box-shadow: none;\n  }\n}\n\n.primary,\n.arrow.primary {\n  background-color: var(--primary-color);\n  color: var(--text-color-on-primary);\n}\n"
  },
  {
    "path": "packages/components/tooltip/src/Tooltip/Tooltip.tsx",
    "content": "/* eslint-disable react/jsx-props-no-spreading */\nimport { isFunction } from \"es-toolkit\";\nimport { camelCase } from \"es-toolkit\";\nimport cx from \"classnames\";\nimport React, { type CSSProperties, isValidElement, PureComponent, type ReactElement } from \"react\";\nimport { Dialog, type DialogProps } from \"@vibe/dialog\";\nimport { type ElementContent, getStyle, ComponentDefaultTestId, getTestId } from \"@vibe/shared\";\nimport styles from \"./Tooltip.module.scss\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { Flex } from \"@vibe/layout\";\nimport { type TooltipPositions, type TooltipTheme } from \"./Tooltip.types\";\n\nexport type TooltipProps = TooltipBaseProps & (TooltipWithChildrenProps | TooltipWithoutChildrenProps);\n\ninterface TooltipWithoutChildrenProps {\n  /**\n   * If true, the tooltip will be rendered even if there are no children.\n   */\n  forceRenderWithoutChildren: boolean;\n  /**\n   * The children elements that the tooltip is attached to.\n   */\n  children?: ReactElement | Array<ReactElement>;\n}\n\ninterface TooltipWithChildrenProps {\n  /**\n   * If true, the tooltip will be rendered even if there are no children.\n   */\n  forceRenderWithoutChildren?: boolean;\n  /**\n   * The children elements that the tooltip is attached to.\n   */\n  children: ReactElement | Array<ReactElement>;\n}\n\ninterface TooltipBaseProps extends Omit<DialogProps, \"position\" | \"content\" | \"children\"> {\n  /**\n   * The content displayed inside the tooltip.\n   */\n  content: ElementContent;\n  /**\n   * Inline styles applied to the tooltip container.\n   */\n  style?: CSSProperties;\n  /**\n   * Class name applied to the tooltip arrow.\n   */\n  arrowClassName?: string;\n  /**\n   * The theme of the tooltip.\n   */\n  theme?: TooltipTheme;\n  /**\n   * Function to get the container where the tooltip should be rendered.\n   */\n  getContainer?: () => HTMLElement;\n  /**\n   * If true, disables the slide animation of the tooltip.\n   */\n  disableDialogSlide?: boolean;\n  /**\n   * If true, renders the tooltip without a dialog.\n   */\n  withoutDialog?: boolean;\n  /**\n   * Delay in milliseconds before showing the tooltip immediately.\n   */\n  immediateShowDelay?: number;\n  /**\n   * If false, hides the arrow of the tooltip.\n   */\n  tip?: boolean;\n  /**\n   * Callback fired when the tooltip is hidden.\n   */\n  onTooltipHide?: () => void;\n  /**\n   * Callback fired when the tooltip is shown.\n   */\n  onTooltipShow?: () => void;\n  /**\n   * The placement of the tooltip relative to the reference element.\n   */\n  position?: TooltipPositions;\n  /**\n   * The title of the tooltip.\n   */\n  title?: string;\n  /**\n   * The image displayed inside the tooltip.\n   */\n  image?: string;\n  /**\n   * The icon displayed next to the title.\n   */\n  icon?: SubIcon;\n  /**\n   * The maximum width of the tooltip.\n   */\n  maxWidth?: number;\n  /**\n   * The text direction of the tooltip: \"ltr\", \"rtl\", or \"auto\".\n   */\n  dir?: \"ltr\" | \"rtl\" | \"auto\";\n}\n// When last tooltip was shown in the last 1.5 second - the next tooltip will be shown immediately\nconst IMMEDIATE_SHOW_THRESHOLD_MS = 1500;\n\n// Shared state across multiple tooltip instances (i.e last tooltip shown time)\nconst globalState: { lastTooltipHideTS: number; openTooltipsCount: number } = {\n  lastTooltipHideTS: null,\n  openTooltipsCount: 0\n};\n\nexport default class Tooltip extends PureComponent<TooltipProps> {\n  wasShown: boolean;\n  /* eslint-disable react/default-props-match-prop-types -- props inherited from DialogProps via Omit<> */\n  static defaultProps = {\n    moveBy: { main: 4, secondary: 0 },\n    theme: \"dark\",\n    position: \"top\",\n    hideDelay: 100,\n    showDelay: 300,\n    disableDialogSlide: true,\n    animationType: \"expand\",\n    withoutDialog: false,\n    tip: true,\n    hideWhenReferenceHidden: false,\n    showTrigger: \"mouseenter\",\n    hideTrigger: \"mouseleave\",\n    showOnDialogEnter: true,\n    referenceWrapperClassName: \"\",\n    addKeyboardHideShowTriggersByDefault: true,\n    open: false\n  };\n  /* eslint-enable react/default-props-match-prop-types */\n  constructor(props: TooltipProps) {\n    super(props);\n    this.renderTooltipContent = this.renderTooltipContent.bind(this);\n    this.getShowDelay = this.getShowDelay.bind(this);\n    this.onTooltipShow = this.onTooltipShow.bind(this);\n    this.onTooltipHide = this.onTooltipHide.bind(this);\n\n    this.wasShown = false;\n  }\n\n  renderTooltipContent() {\n    const { theme, content, className, style, maxWidth, title, image, icon, dir } = this.props;\n    if (!content) {\n      // don't render empty tooltip\n      return null;\n    }\n    let contentValue;\n    if (isFunction(content)) {\n      contentValue = content();\n    } else if (isValidElement(content)) {\n      contentValue = content;\n    } else if (typeof content === \"string\" && content) {\n      contentValue = content;\n    } else if (Array.isArray(content) && content.length > 0) {\n      // allow array of elements\n      contentValue = content;\n    }\n\n    if (!contentValue) {\n      return null;\n    }\n\n    return (\n      <div\n        style={maxWidth ? ({ ...style, \"--tooltip-max-width\": `${maxWidth}px` } as CSSProperties) : style}\n        className={cx(styles.tooltip, getStyle(styles, camelCase(theme)), className)}\n        dir={dir}\n      >\n        {image && <img className={styles.image} src={image} alt=\"\" />}\n        <div className={cx(styles.content)}>\n          {title && (\n            <Flex gap=\"xs\">\n              {icon && <Icon size=\"20\" icon={icon} />}\n              <div className={styles.title}>{title}</div>\n            </Flex>\n          )}\n          {contentValue}\n        </div>\n      </div>\n    );\n  }\n\n  onTooltipShow() {\n    if (!this.wasShown) {\n      const { onTooltipShow } = this.props;\n      globalState.openTooltipsCount++;\n      this.wasShown = true;\n      onTooltipShow && onTooltipShow();\n    }\n  }\n\n  onTooltipHide() {\n    if (this.wasShown) {\n      const { onTooltipHide } = this.props;\n      globalState.lastTooltipHideTS = Date.now();\n      globalState.openTooltipsCount--;\n      this.wasShown = false;\n      onTooltipHide && onTooltipHide();\n    }\n  }\n\n  getTimeSinceLastTooltip() {\n    if (globalState.openTooltipsCount > 0) {\n      return 0;\n    }\n    return globalState.lastTooltipHideTS ? Date.now() - globalState.lastTooltipHideTS : Infinity;\n  }\n\n  getShowDelay() {\n    const { showDelay, immediateShowDelay } = this.props;\n    const timeSinceLastTooltip = this.getTimeSinceLastTooltip();\n    if ((immediateShowDelay === 0 || immediateShowDelay) && timeSinceLastTooltip < IMMEDIATE_SHOW_THRESHOLD_MS) {\n      // showing the tooltip immediately (without animation)\n      return {\n        showDelay: immediateShowDelay,\n        preventAnimation: true\n      };\n    }\n    return {\n      showDelay,\n      preventAnimation: false\n    };\n  }\n\n  render() {\n    const {\n      withoutDialog,\n      children,\n      forceRenderWithoutChildren,\n      theme,\n      tip,\n      arrowClassName,\n      id,\n      \"data-testid\": dataTestId,\n      position\n    } = this.props;\n\n    if (!children && !forceRenderWithoutChildren) {\n      return null;\n    }\n\n    if (withoutDialog) {\n      return this.renderTooltipContent();\n    }\n\n    const content = this.renderTooltipContent;\n    const dialogProps = {\n      ...this.props,\n      position: position,\n      \"data-testid\": dataTestId || getTestId(ComponentDefaultTestId.TOOLTIP, id),\n      tooltip: tip,\n      content,\n      tooltipClassName: cx(styles.arrow, getStyle(styles, theme), arrowClassName),\n      onDialogDidHide: this.onTooltipHide,\n      onDialogDidShow: this.onTooltipShow,\n      getDynamicShowDelay: this.getShowDelay\n    };\n    return (\n      <Dialog {...dialogProps} animationType=\"expand\">\n        {children}\n      </Dialog>\n    );\n  }\n}\n"
  },
  {
    "path": "packages/components/tooltip/src/Tooltip/Tooltip.types.ts",
    "content": "export type TooltipPositions = \"top\" | \"right\" | \"bottom\" | \"left\";\n\nexport type TooltipTheme = \"dark\" | \"primary\";\n"
  },
  {
    "path": "packages/components/tooltip/src/Tooltip/__tests__/Tooltip.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { render } from \"@testing-library/react\";\nimport Tooltip from \"../Tooltip\";\n\ndescribe(\"Tooltip renders correctly\", () => {\n  it(\"with theme\", () => {\n    const { baseElement } = render(\n      <Tooltip shouldShowOnMount content=\"test\" theme=\"primary\">\n        <div />\n      </Tooltip>\n    );\n    expect(baseElement).toMatchSnapshot();\n  });\n\n  it(\"with position\", () => {\n    const { baseElement } = render(\n      <Tooltip shouldShowOnMount content=\"test\" position=\"left\">\n        <div />\n      </Tooltip>\n    );\n    expect(baseElement).toMatchSnapshot();\n  });\n\n  it(\"with withoutDialog\", () => {\n    const { container } = render(\n      <Tooltip withoutDialog content=\"test\">\n        <div />\n      </Tooltip>\n    );\n    expect(container.firstChild).toMatchSnapshot();\n  });\n\n  it(\"without arrow\", () => {\n    const { baseElement } = render(\n      <Tooltip tip={false} content=\"test\" shouldShowOnMount>\n        <div />\n      </Tooltip>\n    );\n    expect(baseElement).toMatchSnapshot();\n  });\n\n  it(\"with hideWhenReferenceHidden\", () => {\n    const { baseElement } = render(\n      <Tooltip hideWhenReferenceHidden content=\"test\" shouldShowOnMount>\n        <div />\n      </Tooltip>\n    );\n    expect(baseElement).toMatchSnapshot();\n  });\n\n  it(\"with style\", () => {\n    const { baseElement } = render(\n      <Tooltip style={{ width: \"200px\" }} content=\"test\" shouldShowOnMount>\n        <div />\n      </Tooltip>\n    );\n    expect(baseElement).toMatchSnapshot();\n  });\n\n  it(\"with data-testid\", () => {\n    const { baseElement } = render(\n      <Tooltip data-testid=\"test\" content=\"test\" shouldShowOnMount>\n        <div />\n      </Tooltip>\n    );\n    expect(baseElement).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/components/tooltip/src/Tooltip/__tests__/Tooltip.test.tsx",
    "content": "import { vi, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { fireEvent, render, screen, waitFor, waitForElementToBeRemoved } from \"@testing-library/react\";\nimport Tooltip from \"../Tooltip\";\n\ndescribe(\"Tooltip tests\", () => {\n  it(\"Should trigger onTooltipShow\", async () => {\n    const onTooltipShow = vi.fn();\n    const { getByText } = render(\n      <Tooltip content=\"content\" onTooltipShow={onTooltipShow}>\n        <div>hello</div>\n      </Tooltip>\n    );\n    fireEvent.mouseOver(getByText(\"hello\"));\n    await waitFor(() => screen.getByText(\"content\"));\n    expect(onTooltipShow).toHaveBeenCalledTimes(1);\n  });\n\n  it(\"Shouldn't trigger onTooltipShow on keyboard focus\", async () => {\n    const onTooltipShow = vi.fn();\n    const testId = \"tooltip-button\";\n    const { getByTestId } = render(\n      <Tooltip content=\"content\" onTooltipShow={onTooltipShow}>\n        <div data-testid={testId}>hello</div>\n      </Tooltip>\n    );\n    fireEvent.focus(getByTestId(testId));\n    expect(onTooltipShow).toHaveBeenCalledTimes(0);\n  });\n\n  it(\"Should trigger onTooltipShow on keyboard focus when addKeyboardHideShowTriggersByDefault is true\", async () => {\n    const onTooltipShow = vi.fn();\n    const testId = \"tooltip-button\";\n    const { getByTestId } = render(\n      <Tooltip content=\"content\" onTooltipShow={onTooltipShow} addKeyboardHideShowTriggersByDefault>\n        <div data-testid={testId}>hello</div>\n      </Tooltip>\n    );\n    fireEvent.focus(getByTestId(testId));\n    await waitFor(() => screen.getByText(\"content\"));\n    expect(onTooltipShow).toHaveBeenCalledTimes(1);\n  });\n\n  it(\"Should trigger onTooltipHide\", async () => {\n    const onTooltipHide = vi.fn();\n    const { getByText } = render(\n      <Tooltip content=\"content\" onTooltipHide={onTooltipHide}>\n        <div>hello</div>\n      </Tooltip>\n    );\n    fireEvent.mouseOver(getByText(\"hello\"));\n    await waitFor(() => screen.getByText(\"content\"));\n    fireEvent.mouseLeave(getByText(\"hello\"));\n    await waitForElementToBeRemoved(() => screen.getByText(\"content\"));\n    expect(onTooltipHide).toHaveBeenCalledTimes(1);\n  });\n\n  it(\"Shouldn't trigger onTooltipHide on keyboard blur\", async () => {\n    const onTooltipHide = vi.fn();\n    const testId = \"tooltip-button\";\n    const { getByTestId } = render(\n      <Tooltip content=\"content\" onTooltipHide={onTooltipHide}>\n        <div data-testid={testId}>hello</div>\n      </Tooltip>\n    );\n    fireEvent.mouseOver(getByTestId(testId));\n    await waitFor(() => screen.getByText(\"content\"));\n    fireEvent.blur(getByTestId(testId));\n    expect(onTooltipHide).toHaveBeenCalledTimes(0);\n  });\n\n  it(\"Should trigger onTooltipHide on keyboard blur by default\", async () => {\n    const onTooltipHide = vi.fn();\n    const testId = \"tooltip-button\";\n    const { getByTestId } = render(\n      <Tooltip content=\"content\" onTooltipHide={onTooltipHide}>\n        <div data-testid={testId}>hello</div>\n      </Tooltip>\n    );\n    fireEvent.mouseOver(getByTestId(testId));\n    await waitFor(() => screen.getByText(\"content\"));\n    fireEvent.blur(getByTestId(testId));\n    await waitForElementToBeRemoved(() => screen.getByText(\"content\"));\n    expect(onTooltipHide).toHaveBeenCalledTimes(1);\n  });\n});\n"
  },
  {
    "path": "packages/components/tooltip/src/Tooltip/__tests__/__snapshots__/Tooltip.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`Tooltip renders correctly > with data-testid 1`] = `\n<body>\n  <div>\n    <div\n      class=\"\"\n    />\n  </div>\n  <span\n    class=\"monday-style-dialog-content-wrapper contentWrapper\"\n    data-dialog-reference-hidden=\"false\"\n    data-testid=\"test\"\n    style=\"position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);\"\n  >\n    <div\n      class=\"contentComponent top hasTooltip expandAppear expandAppearActive\"\n    >\n      <div\n        class=\"tooltip dark\"\n      >\n        <div\n          class=\"content\"\n        >\n          test\n        </div>\n      </div>\n      <div\n        class=\"arrow arrow dark\"\n        data-placement=\"top\"\n      />\n    </div>\n  </span>\n</body>\n`;\n\nexports[`Tooltip renders correctly > with hideWhenReferenceHidden 1`] = `\n<body>\n  <div>\n    <div\n      class=\"\"\n    />\n  </div>\n  <span\n    class=\"monday-style-dialog-content-wrapper contentWrapper\"\n    data-dialog-reference-hidden=\"false\"\n    data-testid=\"tooltip\"\n    style=\"position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);\"\n  >\n    <div\n      class=\"contentComponent top hasTooltip expandAppear expandAppearActive\"\n    >\n      <div\n        class=\"tooltip dark\"\n      >\n        <div\n          class=\"content\"\n        >\n          test\n        </div>\n      </div>\n      <div\n        class=\"arrow arrow dark\"\n        data-placement=\"top\"\n      />\n    </div>\n  </span>\n</body>\n`;\n\nexports[`Tooltip renders correctly > with position 1`] = `\n<body>\n  <div>\n    <div\n      class=\"\"\n    />\n  </div>\n  <span\n    class=\"monday-style-dialog-content-wrapper contentWrapper\"\n    data-dialog-reference-hidden=\"false\"\n    data-testid=\"tooltip\"\n    style=\"position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);\"\n  >\n    <div\n      class=\"contentComponent left hasTooltip expandAppear expandAppearActive\"\n    >\n      <div\n        class=\"tooltip dark\"\n      >\n        <div\n          class=\"content\"\n        >\n          test\n        </div>\n      </div>\n      <div\n        class=\"arrow arrow dark\"\n        data-placement=\"left\"\n      />\n    </div>\n  </span>\n</body>\n`;\n\nexports[`Tooltip renders correctly > with style 1`] = `\n<body>\n  <div>\n    <div\n      class=\"\"\n    />\n  </div>\n  <span\n    class=\"monday-style-dialog-content-wrapper contentWrapper\"\n    data-dialog-reference-hidden=\"false\"\n    data-testid=\"tooltip\"\n    style=\"position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);\"\n  >\n    <div\n      class=\"contentComponent top hasTooltip expandAppear expandAppearActive\"\n    >\n      <div\n        class=\"tooltip dark\"\n        style=\"width: 200px;\"\n      >\n        <div\n          class=\"content\"\n        >\n          test\n        </div>\n      </div>\n      <div\n        class=\"arrow arrow dark\"\n        data-placement=\"top\"\n      />\n    </div>\n  </span>\n</body>\n`;\n\nexports[`Tooltip renders correctly > with theme 1`] = `\n<body>\n  <div>\n    <div\n      class=\"\"\n    />\n  </div>\n  <span\n    class=\"monday-style-dialog-content-wrapper contentWrapper\"\n    data-dialog-reference-hidden=\"false\"\n    data-testid=\"tooltip\"\n    style=\"position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);\"\n  >\n    <div\n      class=\"contentComponent top hasTooltip expandAppear expandAppearActive\"\n    >\n      <div\n        class=\"tooltip primary\"\n      >\n        <div\n          class=\"content\"\n        >\n          test\n        </div>\n      </div>\n      <div\n        class=\"arrow arrow primary\"\n        data-placement=\"top\"\n      />\n    </div>\n  </span>\n</body>\n`;\n\nexports[`Tooltip renders correctly > with withoutDialog 1`] = `\n<div\n  class=\"tooltip dark\"\n>\n  <div\n    class=\"content\"\n  >\n    test\n  </div>\n</div>\n`;\n\nexports[`Tooltip renders correctly > without arrow 1`] = `\n<body>\n  <div>\n    <div\n      class=\"\"\n    />\n  </div>\n  <span\n    class=\"monday-style-dialog-content-wrapper contentWrapper\"\n    data-dialog-reference-hidden=\"false\"\n    data-testid=\"tooltip\"\n    style=\"position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);\"\n  >\n    <div\n      class=\"contentComponent top expandAppear expandAppearActive\"\n    >\n      <div\n        class=\"tooltip dark\"\n      >\n        <div\n          class=\"content\"\n        >\n          test\n        </div>\n      </div>\n    </div>\n  </span>\n</body>\n`;\n"
  },
  {
    "path": "packages/components/tooltip/src/Tooltip/index.ts",
    "content": "export { default as Tooltip, type TooltipProps } from \"./Tooltip\";\nexport * from \"./Tooltip.types\";\n"
  },
  {
    "path": "packages/components/tooltip/src/index.ts",
    "content": "export * from \"./Tooltip\";\n"
  },
  {
    "path": "packages/components/tooltip/src/types/files.d.ts",
    "content": "// SCSS\ndeclare module \"*.module.scss\" {\n  const classes: { [key: string]: string };\n  export default classes;\n}\n\n// SVG\ndeclare module \"*.svg\" {\n  const content: string;\n  export default content;\n}\n\ndeclare module \"*.png\";\ndeclare module \"*.mp4\";\ndeclare module \"*.pdf\";\n"
  },
  {
    "path": "packages/components/tooltip/tsconfig.json",
    "content": "{\n  \"extends\": \"@vibe/config/tsconfig\",\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"rootDir\": \"src\"\n  },\n  \"include\": [\"src/**/*\"]\n}\n"
  },
  {
    "path": "packages/components/tooltip/vitest.config.mjs",
    "content": "import config from \"@vibe/config/vitest.config\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n  ...config\n});\n"
  },
  {
    "path": "packages/components/tooltip/vitest.setup.mjs",
    "content": "import { vi } from \"vitest\";\nimport \"@testing-library/jest-dom\";\nimport React from \"react\";\n\n// Mock ResizeObserver\nclass ResizeObserver {\n  observe() {}\n  unobserve() {}\n  disconnect() {}\n}\nglobal.ResizeObserver = ResizeObserver;\n\n// Mock react-inlinesvg\nvi.mock(\"react-inlinesvg\", () => ({\n  default: ({ src, ...props }) =>\n    React.createElement(\"div\", {\n      \"data-testid\": \"mock-svg\",\n      \"data-src\": src,\n      ...props\n    })\n}));\n"
  },
  {
    "path": "packages/components/typography/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [4.0.1](https://github.com/mondaycom/vibe/compare/@vibe/typography@4.0.0...@vibe/typography@4.0.1) (2026-04-16)\n\n**Note:** Version bump only for package @vibe/typography\n\n\n\n\n\n## [3.0.5](https://github.com/mondaycom/vibe/compare/@vibe/typography@3.0.4...@vibe/typography@3.0.5) (2026-02-27)\n\n**Note:** Version bump only for package @vibe/typography\n\n\n\n\n\n## [3.0.4](https://github.com/mondaycom/vibe/compare/@vibe/typography@3.0.3...@vibe/typography@3.0.4) (2026-01-28)\n\n**Note:** Version bump only for package @vibe/typography\n\n\n\n\n\n## [3.0.3](https://github.com/mondaycom/vibe/compare/@vibe/typography@3.0.2...@vibe/typography@3.0.3) (2026-01-18)\n\n**Note:** Version bump only for package @vibe/typography\n\n\n\n\n\n## [3.0.2](https://github.com/mondaycom/vibe/compare/@vibe/typography@3.0.1...@vibe/typography@3.0.2) (2026-01-04)\n\n**Note:** Version bump only for package @vibe/typography\n\n\n\n\n\n## 3.0.1 (2026-01-04)\n\n**Note:** Version bump only for package @vibe/typography\n"
  },
  {
    "path": "packages/components/typography/package.json",
    "content": "{\n  \"name\": \"@vibe/typography\",\n  \"version\": \"4.0.1\",\n  \"description\": \"Vibe sub-package for typography components (Text and Typography)\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/mondaycom/vibe.git\",\n    \"directory\": \"packages/components/typography\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/mondaycom/vibe/issues\"\n  },\n  \"homepage\": \"https://github.com/mondaycom/vibe#readme\",\n  \"author\": \"monday.com\",\n  \"license\": \"MIT\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.js\",\n  \"types\": \"dist/index.d.ts\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \".\": {\n      \"types\": \"./dist/index.d.ts\",\n      \"import\": \"./dist/index.js\",\n      \"default\": \"./dist/index.js\"\n    },\n    \"./mockedClassNames\": {\n      \"import\": \"./dist/mocked_classnames/index.js\",\n      \"default\": \"./dist/mocked_classnames/index.js\"\n    }\n  },\n  \"scripts\": {\n    \"build\": \"rollup -c && mock_classnames=on rollup -c\",\n    \"test\": \"vitest run\",\n    \"lint\": \"eslint \\\"./src/**/*.{js,jsx,ts,tsx}\\\"\"\n  },\n  \"dependencies\": {\n    \"@vibe/hooks\": \"4.0.1\",\n    \"@vibe/shared\": \"4.0.1\",\n    \"@vibe/style\": \"4.0.0\",\n    \"@vibe/tooltip\": \"4.0.1\",\n    \"classnames\": \"^2.5.1\",\n    \"es-toolkit\": \"^1.39.10\"\n  },\n  \"devDependencies\": {\n    \"@testing-library/react\": \"^12.1.2\",\n    \"@vibe/config\": \"4.0.0\",\n    \"react\": \"^16.13.0\",\n    \"react-dom\": \"^16.13.0\",\n    \"react-test-renderer\": \"16\",\n    \"typescript\": \"^5.9.3\",\n    \"vitest\": \"^1.6.0\"\n  },\n  \"peerDependencies\": {\n    \"react\": \">=16.9.0\",\n    \"react-dom\": \">=16.9.0\"\n  },\n  \"sideEffects\": [\n    \"*.scss\",\n    \"*.css\",\n    \"*.scss.js\",\n    \"*.css.js\"\n  ],\n  \"eslintConfig\": {\n    \"extends\": [\n      \"../../../node_modules/@vibe/config/.eslintrc.cjs\"\n    ]\n  }\n}\n"
  },
  {
    "path": "packages/components/typography/rollup.config.mjs",
    "content": "import config from \"@vibe/config/rollup.config\";\n\nexport default config;\n"
  },
  {
    "path": "packages/components/typography/src/Heading/Heading.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n@import \"../styles/typography\";\n\n@include create-title-classes;\n\n.heading {\n  margin: 0;\n}\n"
  },
  {
    "path": "packages/components/typography/src/Heading/Heading.tsx",
    "content": "import React, { forwardRef, type ReactNode } from \"react\";\nimport cx from \"classnames\";\nimport { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"@vibe/shared\";\nimport Typography, { type TypographyProps } from \"../Typography/Typography\";\nimport { TypographyContext } from \"../Typography/TypographyContext\";\nimport styles from \"./Heading.module.scss\";\nimport { type HeadingType, type HeadingWeight } from \"./Heading.types\";\nimport { type TypographyAlign, type TypographyColor } from \"../Typography/Typography.types\";\n\nconst OVERFLOW_TOLERANCE_IN_PX = 4;\n\nexport interface HeadingProps extends TypographyProps {\n  /**\n   * The heading type.\n   */\n  type?: HeadingType;\n  /**\n   * The font weight of the heading.\n   */\n  weight?: HeadingWeight;\n  /**\n   * The text alignment.\n   */\n  align?: TypographyAlign;\n  /**\n   * The text color.\n   */\n  color?: TypographyColor;\n  /**\n   * The content inside the heading.\n   */\n  children: ReactNode;\n}\n\nconst Heading = forwardRef(\n  (\n    { className, type = \"h1\", weight = \"normal\", ...typographyProps }: HeadingProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    return (\n      <TypographyContext.Provider value={{ overflowTolerance: OVERFLOW_TOLERANCE_IN_PX }}>\n        <Typography\n          element={type}\n          ref={ref}\n          className={cx(styles.heading, getStyle(styles, camelCase(type + \"-\" + weight)), className)}\n          {...typographyProps}\n        />\n      </TypographyContext.Provider>\n    );\n  }\n);\n\nexport default Heading;\n"
  },
  {
    "path": "packages/components/typography/src/Heading/Heading.types.ts",
    "content": "export type HeadingType = \"h1\" | \"h2\" | \"h3\";\nexport type HeadingWeight = \"bold\" | \"medium\" | \"normal\" | \"light\";\n"
  },
  {
    "path": "packages/components/typography/src/Heading/__tests__/Heading.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport Heading from \"../Heading\";\n\ndescribe(\"Text renders correctly\", () => {\n  it(\"with empty props\", () => {\n    const tree = renderer.create(<Heading>text</Heading>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with type\", () => {\n    const tree = renderer.create(<Heading type=\"h2\">text</Heading>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with weight\", () => {\n    const tree = renderer.create(<Heading weight=\"bold\">text</Heading>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with color\", () => {\n    const tree = renderer.create(<Heading color=\"secondary\">text</Heading>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with element\", () => {\n    const tree = renderer.create(<Heading element=\"p\">text</Heading>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with align\", () => {\n    const tree = renderer.create(<Heading align=\"center\">text</Heading>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with element as children\", () => {\n    const tree = renderer\n      .create(\n        <Heading>\n          <div>text</div>\n        </Heading>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/components/typography/src/Heading/__tests__/__snapshots__/Heading.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`Text renders correctly > with align 1`] = `\n<h1\n  className=\"typography primary center singleLineEllipsis heading h1Normal\"\n  data-testid=\"text\"\n>\n  text\n</h1>\n`;\n\nexports[`Text renders correctly > with color 1`] = `\n<h1\n  className=\"typography secondary start singleLineEllipsis heading h1Normal\"\n  data-testid=\"text\"\n>\n  text\n</h1>\n`;\n\nexports[`Text renders correctly > with element 1`] = `\n<p\n  className=\"typography primary start singleLineEllipsis heading h1Normal\"\n  data-testid=\"text\"\n>\n  text\n</p>\n`;\n\nexports[`Text renders correctly > with element as children 1`] = `\n<h1\n  className=\"typography primary start singleLineEllipsis heading h1Normal\"\n  data-testid=\"text\"\n>\n  <div>\n    text\n  </div>\n</h1>\n`;\n\nexports[`Text renders correctly > with empty props 1`] = `\n<h1\n  className=\"typography primary start singleLineEllipsis heading h1Normal\"\n  data-testid=\"text\"\n>\n  text\n</h1>\n`;\n\nexports[`Text renders correctly > with type 1`] = `\n<h2\n  className=\"typography primary start singleLineEllipsis heading h2Normal\"\n  data-testid=\"text\"\n>\n  text\n</h2>\n`;\n\nexports[`Text renders correctly > with weight 1`] = `\n<h1\n  className=\"typography primary start singleLineEllipsis heading h1Bold\"\n  data-testid=\"text\"\n>\n  text\n</h1>\n`;\n"
  },
  {
    "path": "packages/components/typography/src/Heading/index.ts",
    "content": "export { default as Heading, type HeadingProps } from \"./Heading\";\n\nexport * from \"./Heading.types\";\n"
  },
  {
    "path": "packages/components/typography/src/Text/Text.module.scss",
    "content": "@import \"../styles/typography\";\n\n@include create-text-classes;\n\np:first-of-type.text {\n  margin-block: 0;\n}\n\np.text + p {\n  margin-block-start: var(--space-24);\n  margin-block-end: 0;\n}\n\n"
  },
  {
    "path": "packages/components/typography/src/Text/Text.tsx",
    "content": "import React, { forwardRef, type ReactNode } from \"react\";\nimport cx from \"classnames\";\nimport { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"@vibe/shared\";\nimport Typography, { type TypographyProps } from \"../Typography/Typography\";\nimport { type TextType, type TextWeight } from \"./Text.types\";\nimport styles from \"./Text.module.scss\";\n\nexport interface TextProps extends TypographyProps {\n  /**\n   * The text style variant.\n   */\n  type?: TextType;\n  /**\n   * The font weight of the text.\n   */\n  weight?: TextWeight;\n  /**\n   * The content inside the text component.\n   */\n  children: ReactNode;\n}\n\nconst Text = forwardRef(\n  (\n    {\n      className,\n      type = \"text2\",\n      weight = \"normal\",\n      ellipsis,\n      element = \"div\",\n      children,\n      ...typographyProps\n    }: TextProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const overrideEllipsis = ellipsis ?? element !== \"p\";\n    return (\n      <Typography\n        ref={ref}\n        className={cx(styles.text, getStyle(styles, camelCase(type + \"-\" + weight)), className)}\n        ellipsis={overrideEllipsis}\n        element={element}\n        {...typographyProps}\n      >\n        {children}\n      </Typography>\n    );\n  }\n);\n\nexport default Text;\n"
  },
  {
    "path": "packages/components/typography/src/Text/Text.types.ts",
    "content": "export type TextType = \"text1\" | \"text2\" | \"text3\";\nexport type TextWeight = \"bold\" | \"medium\" | \"normal\";\n"
  },
  {
    "path": "packages/components/typography/src/Text/__tests__/Text.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport Text from \"../Text\";\n\ndescribe(\"Text renders correctly\", () => {\n  it(\"with empty props\", () => {\n    const tree = renderer.create(<Text>text</Text>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with type\", () => {\n    const tree = renderer.create(<Text type=\"text1\">text</Text>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with weight\", () => {\n    const tree = renderer.create(<Text weight=\"medium\">text</Text>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with color\", () => {\n    const tree = renderer.create(<Text color=\"secondary\">text</Text>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with element\", () => {\n    const tree = renderer.create(<Text element=\"p\">text</Text>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with align\", () => {\n    const tree = renderer.create(<Text align=\"center\">text</Text>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with element as children\", () => {\n    const tree = renderer\n      .create(\n        <Text>\n          <div>text</div>\n        </Text>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/components/typography/src/Text/__tests__/__snapshots__/Text.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`Text renders correctly > with align 1`] = `\n<div\n  className=\"typography primary center singleLineEllipsis text text2Normal\"\n  data-testid=\"text\"\n>\n  text\n</div>\n`;\n\nexports[`Text renders correctly > with color 1`] = `\n<div\n  className=\"typography secondary start singleLineEllipsis text text2Normal\"\n  data-testid=\"text\"\n>\n  text\n</div>\n`;\n\nexports[`Text renders correctly > with element 1`] = `\n<p\n  className=\"typography primary start text text2Normal\"\n  data-testid=\"text\"\n>\n  text\n</p>\n`;\n\nexports[`Text renders correctly > with element as children 1`] = `\n<div\n  className=\"typography primary start singleLineEllipsis text text2Normal\"\n  data-testid=\"text\"\n>\n  <div>\n    text\n  </div>\n</div>\n`;\n\nexports[`Text renders correctly > with empty props 1`] = `\n<div\n  className=\"typography primary start singleLineEllipsis text text2Normal\"\n  data-testid=\"text\"\n>\n  text\n</div>\n`;\n\nexports[`Text renders correctly > with type 1`] = `\n<div\n  className=\"typography primary start singleLineEllipsis text text1Normal\"\n  data-testid=\"text\"\n>\n  text\n</div>\n`;\n\nexports[`Text renders correctly > with weight 1`] = `\n<div\n  className=\"typography primary start singleLineEllipsis text text2Medium\"\n  data-testid=\"text\"\n>\n  text\n</div>\n`;\n"
  },
  {
    "path": "packages/components/typography/src/Text/index.ts",
    "content": "export { default as Text, type TextProps } from \"./Text\";\n\nexport * from \"./Text.types\";\n"
  },
  {
    "path": "packages/components/typography/src/Typography/Typography.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n.typography {\n  // TODO: [breaking] remove anchor styles\n  > a {\n    text-decoration: none;\n    color: var(--link-color);\n    @include focus-style();\n\n    &:hover {\n      text-decoration: underline;\n    }\n  }\n\n  &:disabled,\n  &[aria-disabled=\"true\"] {\n    color: var(--disabled-text-color);\n  }\n}\n\n.primary {\n  color: var(--primary-text-color);\n}\n\n.secondary {\n  color: var(--secondary-text-color);\n}\n\n.negative {\n  color: var(--color-error);\n}\n\n.onPrimary {\n  color: var(--text-color-on-primary);\n  a {\n    color: var(--text-color-on-primary);\n    text-decoration: underline;\n  }\n}\n\n.onInverted {\n  color: var(--text-color-on-inverted);\n  a {\n    color: var(--text-color-on-inverted);\n    text-decoration: underline;\n  }\n}\n\n.fixedLight {\n  color: var(--fixed-light-color);\n  a {\n    color: var(--fixed-light-color);\n    text-decoration: underline;\n  }\n}\n\n.fixedDark {\n  color: var(--fixed-dark-color);\n  a {\n    color: var(--fixed-dark-color);\n    text-decoration: underline;\n  }\n}\n\n.inherit {\n  color: inherit;\n  a {\n    color: inherit;\n    text-decoration: underline;\n  }\n}\n\n.alignInherit {\n  text-align: inherit;\n}\n\n.start {\n  text-align: start;\n}\n\n.center {\n  text-align: center;\n}\n\n.end {\n  text-align: end;\n}\n\n.singleLineEllipsis {\n  @include ellipsis();\n}\n\n.multiLineEllipsis {\n  @include line-clamp(var(--text-clamp-lines));\n}\n"
  },
  {
    "path": "packages/components/typography/src/Typography/Typography.tsx",
    "content": "import React, { forwardRef, useRef, type HTMLAttributes, useContext } from \"react\";\nimport cx from \"classnames\";\nimport {\n  useMergeRef,\n  type VibeComponentProps,\n  getTestId,\n  ComponentDefaultTestId,\n  type ElementContent\n} from \"@vibe/shared\";\nimport { type TypographyAlign, type TypographyColor } from \"./Typography.types\";\nimport { useEllipsisClass, useTooltipProps } from \"./TypographyHooks\";\nimport { Tooltip, type TooltipProps } from \"@vibe/tooltip\";\nimport { TypographyContext } from \"./TypographyContext\";\nimport styles from \"./Typography.module.scss\";\n\nexport interface TypographyProps extends VibeComponentProps, HTMLAttributes<HTMLElement> {\n  /**\n   * The HTML element tag used for the text component.\n   */\n  element?: string;\n  /**\n   * The content inside the typography component.\n   */\n  children: ElementContent;\n  /**\n   * The text color.\n   */\n  color?: TypographyColor;\n  /**\n   * The text alignment.\n   */\n  align?: TypographyAlign;\n  /**\n   * If true, truncates overflowing text with an ellipsis.\n   */\n  ellipsis?: boolean;\n  /**\n   * The maximum number of lines before truncating with an ellipsis.\n   */\n  maxLines?: number;\n  /**\n   * Props passed to the tooltip displayed when hovering over the text.\n   */\n  tooltipProps?: Partial<TooltipProps>;\n  /**\n   * If true, disables the tooltip that appears when text is truncated.\n   */\n  withoutTooltip?: boolean;\n}\n\nconst Typography = forwardRef(\n  (\n    {\n      className,\n      id,\n      children,\n      tooltipProps,\n      \"data-testid\": dataTestId = getTestId(ComponentDefaultTestId.TEXT, id),\n      element = \"span\",\n      color = \"primary\",\n      align = \"start\",\n      ellipsis = true,\n      maxLines = 1,\n      withoutTooltip = false,\n      role,\n      ...htmlAttributes\n    }: TypographyProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const { overflowTolerance } = useContext(TypographyContext);\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n    const ignoreHeightOverflow = maxLines === 1;\n    const { class: ellipsisClass, style: ellipsisStyle } = useEllipsisClass(ellipsis, maxLines);\n    const overrideTooltipProps = useTooltipProps(\n      componentRef,\n      withoutTooltip,\n      ellipsis,\n      tooltipProps,\n      children,\n      ignoreHeightOverflow,\n      overflowTolerance\n    ) as TooltipProps;\n\n    const overrideAlign = align === \"inherit\" ? \"alignInherit\" : align;\n\n    return (\n      <Tooltip {...overrideTooltipProps}>\n        {React.createElement(\n          element,\n          {\n            id,\n            style: ellipsisStyle,\n            \"data-testid\": dataTestId,\n            className: cx(styles.typography, styles[color], styles[overrideAlign], ellipsisClass, className),\n            ref: mergedRef,\n            role,\n            ...htmlAttributes\n          },\n          children\n        )}\n      </Tooltip>\n    );\n  }\n);\n\nexport default Typography;\n"
  },
  {
    "path": "packages/components/typography/src/Typography/Typography.types.ts",
    "content": "export type TypographyColor =\n  | \"primary\"\n  | \"secondary\"\n  | \"onPrimary\"\n  | \"onInverted\"\n  | \"fixedLight\"\n  | \"fixedDark\"\n  | \"inherit\"\n  | \"negative\";\n\nexport type TypographyAlign = \"start\" | \"center\" | \"end\" | \"inherit\";\n"
  },
  {
    "path": "packages/components/typography/src/Typography/TypographyContext.ts",
    "content": "import React from \"react\";\n\ntype TypographyContext = {\n  /**\n   * Sets a tolerance for vertical overflow to avoid undeed detetction of overflow\n   * Useful for cases where line-height is set and it's smaller than the font's line-height\n   */\n  overflowTolerance: number;\n};\n\nexport const TypographyContext = React.createContext<TypographyContext>({ overflowTolerance: 0 });\n"
  },
  {
    "path": "packages/components/typography/src/Typography/TypographyHooks.tsx",
    "content": "import { type MutableRefObject, useMemo } from \"react\";\nimport { type ElementContent } from \"@vibe/shared\";\nimport { useIsOverflowing } from \"@vibe/hooks\";\nimport { type TooltipProps } from \"@vibe/tooltip\";\nimport styles from \"./Typography.module.scss\";\n\nexport function useEllipsisClass(ellipsis: boolean, maxLines = 1) {\n  const result = useMemo(() => {\n    let ellipsisClass: string;\n    let style: Record<string, string>;\n    // If component contains ellipsis return the fit ellipsis class\n    if (ellipsis) {\n      ellipsisClass = maxLines > 1 ? styles.multiLineEllipsis : styles.singleLineEllipsis;\n      if (maxLines > 1) {\n        // not relevant for single line ellipsis\n        style = { \"--text-clamp-lines\": maxLines.toString() };\n      }\n    }\n\n    return { class: ellipsisClass, style };\n  }, [ellipsis, maxLines]);\n  return result;\n}\n\nexport function useTooltipProps(\n  ref: MutableRefObject<HTMLElement>,\n  withoutTooltip: boolean,\n  ellipsis: boolean,\n  tooltipProps: Partial<TooltipProps>,\n  children: ElementContent,\n  ignoreHeightOverflow: boolean,\n  overflowTolerance: number\n) {\n  const isOverflowing = useIsOverflowing({\n    ref: ellipsis ? ref : null,\n    ignoreHeightOverflow,\n    tolerance: overflowTolerance\n  });\n  const isTooltipRendered = !withoutTooltip && ellipsis && isOverflowing;\n  return isTooltipRendered ? { ...tooltipProps, content: children } : {};\n}\n"
  },
  {
    "path": "packages/components/typography/src/Typography/__tests__/Typography.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport Typography from \"../Typography\";\n\ndescribe(\"Text renders correctly\", () => {\n  it(\"with empty props\", () => {\n    const tree = renderer.create(<Typography>text</Typography>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with color\", () => {\n    const tree = renderer.create(<Typography color=\"secondary\">text</Typography>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with element\", () => {\n    const tree = renderer.create(<Typography element=\"p\">text</Typography>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with align\", () => {\n    const tree = renderer.create(<Typography align=\"center\">text</Typography>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with html attribute\", () => {\n    const tree = renderer.create(<Typography role=\"banner\">text</Typography>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with element as children\", () => {\n    const tree = renderer\n      .create(\n        <Typography>\n          <div>text</div>\n        </Typography>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/components/typography/src/Typography/__tests__/__snapshots__/Typography.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`Text renders correctly > with align 1`] = `\n<span\n  className=\"typography primary center singleLineEllipsis\"\n  data-testid=\"text\"\n>\n  text\n</span>\n`;\n\nexports[`Text renders correctly > with color 1`] = `\n<span\n  className=\"typography secondary start singleLineEllipsis\"\n  data-testid=\"text\"\n>\n  text\n</span>\n`;\n\nexports[`Text renders correctly > with element 1`] = `\n<p\n  className=\"typography primary start singleLineEllipsis\"\n  data-testid=\"text\"\n>\n  text\n</p>\n`;\n\nexports[`Text renders correctly > with element as children 1`] = `\n<span\n  className=\"typography primary start singleLineEllipsis\"\n  data-testid=\"text\"\n>\n  <div>\n    text\n  </div>\n</span>\n`;\n\nexports[`Text renders correctly > with empty props 1`] = `\n<span\n  className=\"typography primary start singleLineEllipsis\"\n  data-testid=\"text\"\n>\n  text\n</span>\n`;\n\nexports[`Text renders correctly > with html attribute 1`] = `\n<span\n  className=\"typography primary start singleLineEllipsis\"\n  data-testid=\"text\"\n  role=\"banner\"\n>\n  text\n</span>\n`;\n"
  },
  {
    "path": "packages/components/typography/src/Typography/index.ts",
    "content": "export { default as Typography, type TypographyProps } from \"./Typography\";\n\nexport * from \"./Typography.types\";\n"
  },
  {
    "path": "packages/components/typography/src/index.ts",
    "content": "export { Text, type TextProps, type TextType, type TextWeight } from \"./Text\";\nexport { Heading, type HeadingProps, type HeadingType, type HeadingWeight } from \"./Heading\";\n\nexport type { TypographyColor, TypographyAlign } from \"./Typography\";\n"
  },
  {
    "path": "packages/components/typography/src/styles/typography.scss",
    "content": "@use \"sass:string\";\n@import \"~@vibe/style/dist/mixins\";\n@import \"~@vibe/style/dist/functions\";\n\n@mixin create-text-classes() {\n  @include create-typography-classes($textClasses, text);\n}\n\n@mixin create-title-classes() {\n  @include create-typography-classes($headingClasses, null);\n}\n\n@mixin create-typography-classes($classes, $token-prefix) {\n  @each $class-prefix, $weight-types in $classes {\n    @each $weight-type in $weight-types {\n      $class-name: camelize(#{$class-prefix}-#{$weight-type});\n\n      .#{$class-name} {\n        // if class is a heading class\n        @if str-slice($class-prefix, 1, 1) == \"h\" {\n          @include vibe-heading($class-prefix, $weight-type);\n        } @else {\n          @include vibe-text($class-prefix, $weight-type);\n        }\n      }\n    }\n  }\n}\n\n$headingClasses: (\n  \"h1\": (\n    \"bold\",\n    \"medium\",\n    \"normal\",\n    \"light\"\n  ),\n  \"h2\": (\n    \"bold\",\n    \"medium\",\n    \"normal\",\n    \"light\"\n  ),\n  \"h3\": (\n    \"bold\",\n    \"medium\",\n    \"normal\",\n    \"light\"\n  )\n);\n\n$textClasses: (\n  \"text1\": (\n    \"bold\",\n    \"medium\",\n    \"normal\"\n  ),\n  \"text2\": (\n    \"bold\",\n    \"medium\",\n    \"normal\"\n  ),\n  \"text3\": (\n    \"bold\",\n    \"medium\",\n    \"normal\"\n  )\n);\n"
  },
  {
    "path": "packages/components/typography/src/types/files.d.ts",
    "content": "declare module \"*.scss\" {\n  const content: { [className: string]: string };\n  export = content;\n}\n"
  },
  {
    "path": "packages/components/typography/tsconfig.json",
    "content": "{\n  \"extends\": \"@vibe/config/tsconfig\",\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"rootDir\": \"src\"\n  },\n  \"include\": [\"src/**/*\"]\n}\n\n"
  },
  {
    "path": "packages/components/typography/vitest.config.mjs",
    "content": "import config from \"@vibe/config/vitest.config\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n  ...config\n});\n\n"
  },
  {
    "path": "packages/components/typography/vitest.setup.mjs",
    "content": "import { vi } from \"vitest\";\nimport \"@testing-library/jest-dom\";\nimport React from \"react\";\n\n// Mock ResizeObserver\nclass ResizeObserver {\n  observe() {}\n  unobserve() {}\n  disconnect() {}\n}\nglobal.ResizeObserver = ResizeObserver;\n\n// Mock react-inlinesvg\nvi.mock(\"react-inlinesvg\", () => ({\n  default: ({ src, ...props }) =>\n    React.createElement(\"div\", {\n      \"data-testid\": \"mock-svg\",\n      \"data-src\": src,\n      ...props\n    })\n}));\n\n"
  },
  {
    "path": "packages/config/.eslintrc.cjs",
    "content": "const commonRules = {\n  \"react/display-name\": \"off\",\n  \"object-curly-newline\": \"off\",\n  \"no-debugger\": \"error\",\n  \"global-require\": \"off\",\n  \"no-unused-expressions\": \"off\",\n  \"react/forbid-foreign-prop-types\": \"off\",\n  \"no-console\": \"off\",\n  \"consistent-return\": \"off\",\n  \"no-use-before-define\": \"off\",\n  \"one-var\": \"off\",\n  \"default-case\": \"off\",\n  \"func-names\": \"off\",\n  \"react/sort-comp\": \"off\",\n  \"class-methods-use-this\": \"off\",\n  radix: \"off\",\n  \"no-underscore-dangle\": \"off\",\n  \"import/prefer-default-export\": \"off\",\n  \"no-plusplus\": \"off\",\n  \"react/react-in-jsx-scope\": \"error\",\n  \"react/no-danger\": \"error\",\n  \"react/jsx-one-expression-per-line\": \"off\",\n  \"react/prop-types\": 0,\n  \"react/forbid-prop-types\": \"off\",\n  \"react/function-component-definition\": \"off\",\n  \"default-param-last\": \"off\",\n  \"react/require-default-props\": [\"error\"],\n  \"jsx-a11y/anchor-is-valid\": [\"error\"],\n  \"react/jsx-props-no-spreading\": 0,\n  \"react/jsx-filename-extension\": [\"error\", { extensions: [\".js\", \".jsx\", \".ts\", \".tsx\"] }],\n  \"jsx-a11y/no-static-element-interactions\": \"off\",\n  \"jsx-a11y/alt-text\": \"error\",\n  \"jsx-a11y/no-noninteractive-element-interactions\": [\n    \"error\",\n    {\n      required: {\n        some: [\"nesting\", \"id\"]\n      },\n      handlers: [\"onClick\", \"onMouseDown\", \"onMouseUp\", \"onKeyPress\", \"onKeyDown\", \"onKeyUp\"]\n    }\n  ],\n  \"jsx-a11y/role-has-required-aria-props\": \"error\",\n  \"jsx-a11y/click-events-have-key-events\": \"error\",\n  \"jsx-a11y/label-has-associated-control\": \"off\",\n  \"react/default-props-match-prop-types\": \"error\",\n  \"jsx-a11y/aria-activedescendant-has-tabindex\": \"error\",\n  \"react/button-has-type\": \"error\",\n  \"jsx-a11y/interactive-supports-focus\": \"error\",\n  \"jsx-a11y/no-noninteractive-tabindex\": \"error\",\n  \"react/jsx-boolean-value\": \"off\",\n  \"arrow-parens\": \"off\",\n  \"lodash/import-scope\": [2, \"member\"],\n  \"implicit-arrow-linebreak\": \"off\",\n  \"import/no-extraneous-dependencies\": [\n    \"error\",\n    {\n      devDependencies: [\n        \"src/scripts/**/*.ts\",\n        \"src/storybook/**/*\",\n        \"**/__tests__/**/*.{js,jsx,ts,tsx}\",\n        \"**/__stories__/**/*.{js,jsx,ts,tsx}\",\n        \"**/*.test.{js,jsx,ts,tsx}\",\n        \"**/*.spec.{js,jsx,ts,tsx}\",\n        \"**/*.snapshot.test.{js,jsx,ts,tsx}\",\n        \"src/tests/**/*.{js,jsx,ts,tsx}\",\n        \"vitest.config.ts\"\n      ]\n    }\n  ]\n};\nconst commonPlugins = [\"import\", \"lodash\", \"react\", \"jsx-a11y\", \"json\", \"markdown\", \"vitest\"];\nconst commonExtends = [\n  \"plugin:react/recommended\",\n  \"plugin:react-hooks/recommended\",\n  \"plugin:prettier/recommended\",\n  \"plugin:vitest/recommended\"\n];\n\nmodule.exports = {\n  overrides: [\n    {\n      files: [\"*.test.js\"]\n    },\n    {\n      files: [\n        \"plopfile.js\",\n        \"babel.config.js\",\n        \".eslintrc.js\",\n        \"__mocks__/**/*.js\",\n        \"plop/**/*.js\",\n        \"rollup.config.js\"\n      ],\n      env: {\n        node: true\n      }\n    },\n    {\n      files: [\"*.ts\", \"*.tsx\"],\n      parser: \"@typescript-eslint/parser\",\n      extends: [\n        ...commonExtends,\n        \"plugin:@typescript-eslint/eslint-recommended\",\n        \"plugin:@typescript-eslint/recommended\"\n      ],\n      plugins: [...commonPlugins, \"@typescript-eslint\"],\n      rules: {\n        ...commonRules,\n        \"@typescript-eslint/ban-ts-comment\": [\"warn\"],\n        \"no-unused-vars\": \"off\",\n        \"react/require-default-props\": \"off\",\n        \"@typescript-eslint/no-unused-vars\": [\"error\", { argsIgnorePattern: \"^_\", varsIgnorePattern: \"^_\" }],\n        \"@typescript-eslint/no-empty-function\": \"off\",\n        \"@typescript-eslint/consistent-type-imports\": [\"error\", { fixStyle: \"inline-type-imports\" }]\n      }\n    },\n    {\n      files: [\"*.stories.@(js|jsx)\", \"*.stories.helpers.@(js|jsx)\", \"src/storybook/decorators/**/with*.{js,jsx}\"],\n      rules: {\n        ...commonRules,\n        \"react-hooks/rules-of-hooks\": \"off\",\n        \"react/jsx-key\": \"off\"\n      }\n    },\n    {\n      files: [\"*.stories.@(ts|tsx)\", \"*.stories.helpers.@(ts|tsx)\", \"src/storybook/decorators/**/with*.{ts,tsx}\"],\n      rules: {\n        ...commonRules,\n        \"react-hooks/rules-of-hooks\": \"off\",\n        \"react/jsx-key\": \"off\",\n        \"react/require-default-props\": \"off\"\n      }\n    }\n  ],\n  env: {\n    browser: true,\n    es2021: true\n  },\n  settings: {\n    react: {\n      version: \"detect\"\n    }\n  },\n  extends: [...commonExtends, \"eslint:recommended\"],\n  parserOptions: {\n    ecmaFeatures: {\n      jsx: true\n    },\n    ecmaVersion: 13,\n    sourceType: \"module\"\n  },\n  plugins: [...commonPlugins],\n  rules: {\n    ...commonRules,\n    \"no-unused-vars\": [\"error\", { argsIgnorePattern: \"^_\" }]\n  }\n};\n"
  },
  {
    "path": "packages/config/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [3.0.5](https://github.com/mondaycom/vibe/compare/@vibe/config@3.0.4...@vibe/config@3.0.5) (2025-11-19)\n\n**Note:** Version bump only for package @vibe/config\n\n\n\n\n\n## [3.0.4](https://github.com/mondaycom/vibe/compare/@vibe/config@3.0.3...@vibe/config@3.0.4) (2025-11-06)\n\n**Note:** Version bump only for package @vibe/config\n\n\n\n\n\n## [3.0.3](https://github.com/mondaycom/vibe/compare/@vibe/config@3.0.2...@vibe/config@3.0.3) (2025-10-30)\n\n**Note:** Version bump only for package @vibe/config\n\n\n\n\n\n## [3.0.2](https://github.com/mondaycom/vibe/compare/@vibe/config@3.0.1...@vibe/config@3.0.2) (2025-10-25)\n\n**Note:** Version bump only for package @vibe/config\n\n\n\n\n\n## 3.0.1 (2025-09-14)\n\n**Note:** Version bump only for package @vibe/config\n"
  },
  {
    "path": "packages/config/eslint.config.cjs",
    "content": "const commonRules = {\n  \"react/display-name\": \"off\",\n  \"object-curly-newline\": \"off\",\n  \"no-debugger\": \"error\",\n  \"global-require\": \"off\",\n  \"no-unused-expressions\": \"off\",\n  \"react/forbid-foreign-prop-types\": \"off\",\n  \"no-console\": \"off\",\n  \"consistent-return\": \"off\",\n  \"no-use-before-define\": \"off\",\n  \"one-var\": \"off\",\n  \"default-case\": \"off\",\n  \"func-names\": \"off\",\n  \"react/sort-comp\": \"off\",\n  \"class-methods-use-this\": \"off\",\n  radix: \"off\",\n  \"no-underscore-dangle\": \"off\",\n  \"import/prefer-default-export\": \"off\",\n  \"no-plusplus\": \"off\",\n  \"react/react-in-jsx-scope\": \"error\",\n  \"react/no-danger\": \"error\",\n  \"react/jsx-one-expression-per-line\": \"off\",\n  \"react/prop-types\": 0,\n  \"react/forbid-prop-types\": \"off\",\n  \"react/function-component-definition\": \"off\",\n  \"default-param-last\": \"off\",\n  \"react/require-default-props\": [\"error\"],\n  \"jsx-a11y/anchor-is-valid\": [\"error\"],\n  \"react/jsx-props-no-spreading\": 0,\n  \"react/jsx-filename-extension\": [\"error\", { extensions: [\".js\", \".jsx\", \".ts\", \".tsx\"] }],\n  \"jsx-a11y/no-static-element-interactions\": \"off\",\n  \"jsx-a11y/alt-text\": \"error\",\n  \"jsx-a11y/no-noninteractive-element-interactions\": [\n    \"error\",\n    {\n      required: {\n        some: [\"nesting\", \"id\"]\n      },\n      handlers: [\"onClick\", \"onMouseDown\", \"onMouseUp\", \"onKeyPress\", \"onKeyDown\", \"onKeyUp\"]\n    }\n  ],\n  \"jsx-a11y/role-has-required-aria-props\": \"error\",\n  \"jsx-a11y/click-events-have-key-events\": \"error\",\n  \"jsx-a11y/label-has-associated-control\": \"off\",\n  \"react/default-props-match-prop-types\": \"error\",\n  \"jsx-a11y/aria-activedescendant-has-tabindex\": \"error\",\n  \"react/button-has-type\": \"error\",\n  \"jsx-a11y/interactive-supports-focus\": \"error\",\n  \"jsx-a11y/no-noninteractive-tabindex\": \"error\",\n  \"react/jsx-boolean-value\": \"off\",\n  \"arrow-parens\": \"off\",\n  \"lodash/import-scope\": [2, \"member\"],\n  \"implicit-arrow-linebreak\": \"off\",\n  \"import/no-extraneous-dependencies\": [\n    \"error\",\n    {\n      devDependencies: [\n        \"src/scripts/**/*.ts\",\n        \"src/storybook/**/*\",\n        \"**/__tests__/**/*.{js,jsx,ts,tsx}\",\n        \"**/__stories__/**/*.{js,jsx,ts,tsx}\",\n        \"**/*.test.{js,jsx,ts,tsx}\",\n        \"**/*.spec.{js,jsx,ts,tsx}\",\n        \"**/*.snapshot.test.{js,jsx,ts,tsx}\",\n        \"src/tests/**/*.{js,jsx,ts,tsx}\",\n        \"vitest.config.ts\"\n      ]\n    }\n  ]\n};\nconst commonPlugins = [\"import\", \"lodash\", \"react\", \"jsx-a11y\", \"json\", \"markdown\", \"vitest\"];\nconst commonExtends = [\n  \"plugin:react/recommended\",\n  \"plugin:react-hooks/recommended\",\n  \"plugin:prettier/recommended\",\n  \"plugin:vitest/recommended\"\n];\n\nmodule.exports = {\n  overrides: [\n    {\n      files: [\"*.test.js\"]\n    },\n    {\n      files: [\n        \"plopfile.js\",\n        \"babel.config.js\",\n        \".eslintrc.js\",\n        \"__mocks__/**/*.js\",\n        \"plop/**/*.js\",\n        \"rollup.config.js\"\n      ],\n      env: {\n        node: true\n      }\n    },\n    {\n      files: [\"*.ts\", \"*.tsx\"],\n      parser: \"@typescript-eslint/parser\",\n      extends: [\n        ...commonExtends,\n        \"plugin:@typescript-eslint/eslint-recommended\",\n        \"plugin:@typescript-eslint/recommended\"\n      ],\n      plugins: [...commonPlugins, \"@typescript-eslint\"],\n      rules: {\n        ...commonRules,\n        \"@typescript-eslint/ban-ts-comment\": [\"warn\"],\n        \"no-unused-vars\": \"off\",\n        \"react/require-default-props\": \"off\",\n        \"@typescript-eslint/no-unused-vars\": [\"error\", { argsIgnorePattern: \"^_\", varsIgnorePattern: \"^_\" }],\n        \"@typescript-eslint/no-empty-function\": \"off\",\n        \"@typescript-eslint/consistent-type-imports\": [\"error\", { fixStyle: \"inline-type-imports\" }]\n      }\n    },\n    {\n      files: [\"*.stories.@(js|jsx)\", \"*.stories.helpers.@(js|jsx)\", \"src/storybook/decorators/**/with*.{js,jsx}\"],\n      rules: {\n        ...commonRules,\n        \"react-hooks/rules-of-hooks\": \"off\",\n        \"react/jsx-key\": \"off\"\n      }\n    },\n    {\n      files: [\"*.stories.@(ts|tsx)\", \"*.stories.helpers.@(ts|tsx)\", \"src/storybook/decorators/**/with*.{ts,tsx}\"],\n      rules: {\n        ...commonRules,\n        \"react-hooks/rules-of-hooks\": \"off\",\n        \"react/jsx-key\": \"off\",\n        \"react/require-default-props\": \"off\"\n      }\n    }\n  ],\n  env: {\n    browser: true,\n    es2021: true\n  },\n  settings: {\n    react: {\n      version: \"detect\"\n    }\n  },\n  extends: [...commonExtends, \"eslint:recommended\"],\n  parserOptions: {\n    ecmaFeatures: {\n      jsx: true\n    },\n    ecmaVersion: 13,\n    sourceType: \"module\"\n  },\n  plugins: [...commonPlugins],\n  rules: {\n    ...commonRules,\n    \"no-unused-vars\": [\"error\", { argsIgnorePattern: \"^_\" }]\n  }\n};\n"
  },
  {
    "path": "packages/config/package.json",
    "content": "{\n  \"name\": \"@vibe/config\",\n  \"version\": \"4.0.0\",\n  \"private\": true,\n  \"description\": \"Shared configurations for Vibe packages\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/mondaycom/vibe.git\",\n    \"directory\": \"packages/config\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/mondaycom/vibe/issues\"\n  },\n  \"homepage\": \"https://github.com/mondaycom/vibe#readme\",\n  \"author\": \"monday.com\",\n  \"license\": \"MIT\",\n  \"type\": \"module\",\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \"./rollup.config\": \"./rollup.config.mjs\",\n    \"./eslint.config\": \"./eslint.config.cjs\",\n    \"./tsconfig\": \"./tsconfig.json\",\n    \"./vitest.config\": \"./vitest.config.mjs\"\n  },\n  \"devDependencies\": {\n    \"typescript\": \"^5.9.3\"\n  },\n  \"dependencies\": {\n    \"@rollup/plugin-babel\": \"^6.0.2\",\n    \"@rollup/plugin-commonjs\": \"^23.0.2\",\n    \"@rollup/plugin-node-resolve\": \"^15.0.1\",\n    \"@typescript-eslint/eslint-plugin\": \"^5.36.1\",\n    \"@typescript-eslint/parser\": \"^5.36.1\",\n    \"autoprefixer\": \"^10.4.0\",\n    \"ejs\": \"^3.1.10\",\n    \"eslint\": \"^8.23.0\",\n    \"eslint-config-airbnb\": \"^19.0.4\",\n    \"eslint-config-prettier\": \"^8.3.0\",\n    \"eslint-plugin-import\": \"^2.25.4\",\n    \"eslint-plugin-json\": \"^3.1.0\",\n    \"eslint-plugin-jsx-a11y\": \"^6.5.1\",\n    \"eslint-plugin-lodash\": \"^7.4.0\",\n    \"eslint-plugin-markdown\": \"^2.2.1\",\n    \"eslint-plugin-only-warn\": \"^1.0.3\",\n    \"eslint-plugin-prettier\": \"^4.0.0\",\n    \"eslint-plugin-react\": \"^7.28.0\",\n    \"eslint-plugin-react-hooks\": \"^4.3.0\",\n    \"eslint-plugin-storybook\": \"^0.6.15\",\n    \"eslint-plugin-vitest\": \"^0.4.1\",\n    \"js-sha256\": \"^0.9.0\",\n    \"postcss-import\": \"^15.1.0\",\n    \"rollup\": \"^2.79.1\",\n    \"rollup-plugin-import-css\": \"^3.1.0\",\n    \"rollup-plugin-postcss\": \"^4.0.2\",\n    \"rollup-plugin-terser\": \"^7.0.2\",\n    \"rollup-plugin-typescript2\": \"^0.34.1\"\n  },\n  \"sideEffects\": false\n}\n"
  },
  {
    "path": "packages/config/rollup.config.mjs",
    "content": "import * as fs from \"fs\";\nimport * as path from \"path\";\nimport nodeResolve from \"@rollup/plugin-node-resolve\";\nimport babel from \"@rollup/plugin-babel\";\nimport commonjs from \"@rollup/plugin-commonjs\";\nimport typescript from \"rollup-plugin-typescript2\";\nimport { terser } from \"rollup-plugin-terser\";\nimport postcss from \"rollup-plugin-postcss\";\nimport postCssImport from \"postcss-import\";\nimport autoprefixer from \"autoprefixer\";\nimport { sha256 } from \"js-sha256\";\nimport ejs from \"ejs\";\n\nconst EXTENSIONS = [\".js\", \".jsx\", \".ts\", \".tsx\"];\nconst ROOT_PATH = process.cwd();\nconst SRC_PATH = path.join(ROOT_PATH, \"src\");\nconst DIST_PATH = path.join(ROOT_PATH, \"dist\");\nconst __dirname = path.dirname(new URL(import.meta.url).pathname);\nconst injectStyle = fs.readFileSync(path.join(__dirname, \"./scripts/styleInject.ejs\"), \"utf8\");\n\nconst shouldMockModularClassnames = process.env.mock_classnames === \"on\";\n\nfunction replaceDotWithUnderscore(verNum) {\n  return verNum.replace(/\\./g, \"_\");\n}\n\nfunction getShortSha(content, length = 10) {\n  return sha256(content).slice(0, length);\n}\n\nfunction loadPackageJson() {\n  const packageJson = fs.readFileSync(path.join(ROOT_PATH, \"package.json\"), \"utf8\");\n  return JSON.parse(packageJson);\n}\n\nfunction generateCssModulesScopedName(name, filename, css) {\n  const start = css.indexOf(`${name} {`);\n  const end = css.indexOf(\"}\", start);\n  const content = css.slice(start + name.length + 1, end).replace(/[\\r\\n]/, \"\");\n  const loadPackageJsonResult = loadPackageJson();\n  return `${name}_${getShortSha(content + replaceDotWithUnderscore(loadPackageJsonResult.version))}`;\n}\n\nfunction onwarn(message, handler) {\n  if (message.code === \"THIS_IS_UNDEFINED\" || message.code === \"SOURCEMAP_ERROR\") return;\n  if (message.code === \"CIRCULAR_DEPENDENCY\") {\n    console.error(\"Circular dependency detected: \", message, \"Build failed, exiting...\");\n    process.exit(1);\n  }\n  handler(message);\n}\n\nexport default {\n  onwarn,\n  output: {\n    dir: shouldMockModularClassnames ? path.join(DIST_PATH, \"mocked_classnames\") : DIST_PATH,\n    indent: false,\n    strict: false,\n    exports: \"named\",\n    preserveModules: true,\n    preserveModulesRoot: \"./src\",\n    sourcemap: true,\n    format: \"esm\"\n  },\n  input: path.join(SRC_PATH, \"index.ts\"),\n  external: [\n    /node_modules\\/(?!@vibe\\/style)(.*)/,\n    /@vibe\\/.*/ // Externalize all @vibe packages\n  ],\n  plugins: [\n    commonjs(),\n    nodeResolve({\n      extensions: [...EXTENSIONS, \".json\", \".css\"]\n    }),\n    typescript({\n      tsconfigOverride: {\n        exclude: [\"**/__tests__\", \"**/__stories__\", path.join(SRC_PATH, \"storybook\")]\n      }\n    }),\n    babel({\n      babelHelpers: \"bundled\",\n      extensions: EXTENSIONS\n    }),\n    terser({\n      compress: {\n        pure_getters: true,\n        unsafe: true,\n        unsafe_comps: true\n      }\n    }),\n    postcss({\n      /**\n       * Normally, this plugin expects a local version of \"node_modules\" to be present, but since\n       * we're externalizing all \"node_modules\", it doesn't exist.\n       * This little hack makes sure we're using \"node_modules\" instead of what the plugin expects.\n       */\n      inject: function (cssVariableName, filename) {\n        if (!injectStyle) return null;\n        let shaKey = filename;\n        try {\n          const data = fs.readFileSync(filename, \"utf8\");\n\n          shaKey = getShortSha(data, 12);\n        } catch (err) {\n          console.error(err);\n        }\n        const version = replaceDotWithUnderscore(loadPackageJson().version);\n        const hashValue = `s_id-${shaKey}`;\n        return ejs.render(injectStyle, { cssVariableName, hashValue, version });\n      },\n      plugins: [autoprefixer(), postCssImport()],\n      modules: {\n        generateScopedName: (name, filename, css) =>\n          shouldMockModularClassnames ? name : generateCssModulesScopedName(name, filename, css)\n      }\n    })\n  ]\n};\n"
  },
  {
    "path": "packages/config/scripts/styleInject.ejs",
    "content": "function styleInject(css) {\n    const id = \"<%= hashValue %>_<%= version %>\";\n    if(typeof document !== 'undefined') {\n        const head = document.head || document.getElementsByTagName('head')[0];\n        const styleExists = head.querySelector(\"#\" + id);\n    \n        if(styleExists) return;\n    \n        const style = document.createElement('style');\n        style.id = id;\n    \n        if (head.firstChild) {\n            head.insertBefore(style, head.firstChild);\n        } else {\n            head.appendChild(style);\n        }\n    \n        style.appendChild(document.createTextNode(css));\n    } else if (globalThis.injectedStyles) {\n        // support SSR environments\n        globalThis.injectedStyles[id] = css;\n    }\n}\n\nstyleInject(<%= cssVariableName %>);\n"
  },
  {
    "path": "packages/config/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"module\": \"ESNext\",\n    \"declaration\": true,\n    \"sourceMap\": true,\n    \"allowJs\": true,\n    \"rootDir\": \"src\",\n    \"outDir\": \"dist\",\n    \"allowSyntheticDefaultImports\": true,\n    \"lib\": [\"esnext\", \"dom\"],\n    \"target\": \"es6\",\n    \"moduleResolution\": \"node\",\n    \"esModuleInterop\": true,\n    \"jsx\": \"react\",\n    \"skipLibCheck\": true,\n    \"noImplicitAny\": true,\n    \"baseUrl\": \".\"\n  },\n  \"include\": [\"src/**/*\"]\n}\n"
  },
  {
    "path": "packages/config/vitest.config.mjs",
    "content": "/// <reference types=\"vitest\" />\nimport { defineConfig } from \"vitest/config\";\nimport react from \"@vitejs/plugin-react\";\nimport path from \"path\";\nimport fs from \"fs\";\nimport { fileURLToPath } from \"url\";\n\nconst __dirname = path.dirname(fileURLToPath(import.meta.url));\n\nfunction generateVibeComponentAliases() {\n  const componentsFolder = path.resolve(__dirname, \"../../packages/components\");\n  const vibeComponents = {};\n\n  if (fs.existsSync(componentsFolder)) {\n    const componentDirs = fs.readdirSync(componentsFolder);\n\n    componentDirs.forEach(component => {\n      const componentFolderPath = path.resolve(componentsFolder, component);\n      const srcPath = path.join(componentFolderPath, \"src\");\n\n      if (fs.statSync(componentFolderPath).isDirectory() && fs.existsSync(srcPath)) {\n        vibeComponents[`@vibe/${component}`] = srcPath;\n      }\n    });\n  }\n\n  // Add @vibe/base package alias\n  const baseFolder = path.resolve(__dirname, \"../../packages/base\");\n  const baseSrcPath = path.join(baseFolder, \"src\");\n\n  if (fs.existsSync(baseSrcPath)) {\n    vibeComponents[\"@vibe/base\"] = baseSrcPath;\n  }\n\n  return vibeComponents;\n}\n\nexport default defineConfig({\n  plugins: [\n    react({\n      jsxRuntime: \"classic\"\n    })\n  ],\n  resolve: {\n    alias: {\n      ...generateVibeComponentAliases()\n    }\n  },\n  define: {\n    \"process.env.NODE_ENV\": '\"test\"'\n  },\n  test: {\n    globals: true,\n    environment: \"jsdom\",\n    setupFiles: [\"./vitest.setup.mjs\"],\n    include: [\"**/__tests__/**/*.test.[jt]s?(x)\"],\n    css: {\n      modules: {\n        classNameStrategy: \"non-scoped\"\n      }\n    },\n    coverage: {\n      provider: \"v8\",\n      reporter: [\"text\", \"json\", \"html\"],\n      exclude: [\n        \"node_modules/\",\n        \"**/__tests__/**\",\n        \"**/*.test.*\",\n        \"**/*.spec.*\",\n        \"**/dist/**\",\n        \"**/*.config.*\",\n        \"**/*.setup.*\"\n      ]\n    }\n  }\n});\n"
  },
  {
    "path": "packages/core/.eslintrc.cjs",
    "content": "const commonRules = {\n  \"react/display-name\": \"off\",\n  \"object-curly-newline\": \"off\",\n  \"no-debugger\": \"error\",\n  \"global-require\": \"off\",\n  \"no-unused-expressions\": \"off\",\n  \"react/forbid-foreign-prop-types\": \"off\",\n  \"no-console\": \"off\",\n  \"consistent-return\": \"off\",\n  \"no-use-before-define\": \"off\",\n  \"one-var\": \"off\",\n  \"default-case\": \"off\",\n  \"func-names\": \"off\",\n  \"react/sort-comp\": \"off\",\n  \"class-methods-use-this\": \"off\",\n  radix: \"off\",\n  \"no-underscore-dangle\": \"off\",\n  \"import/prefer-default-export\": \"off\",\n  \"no-plusplus\": \"off\",\n  \"react/react-in-jsx-scope\": \"error\",\n  \"react/no-danger\": \"error\",\n  \"react/jsx-one-expression-per-line\": \"off\",\n  \"react/prop-types\": 0,\n  \"react/forbid-prop-types\": \"off\",\n  \"react/function-component-definition\": \"off\",\n  \"default-param-last\": \"off\",\n  \"react/require-default-props\": [\"error\"],\n  \"jsx-a11y/anchor-is-valid\": [\"error\"],\n  \"react/jsx-props-no-spreading\": 0,\n  \"react/jsx-filename-extension\": [\"error\", { extensions: [\".js\", \".jsx\", \".ts\", \".tsx\"] }],\n  \"jsx-a11y/no-static-element-interactions\": \"off\",\n  \"jsx-a11y/alt-text\": \"error\",\n  \"jsx-a11y/no-noninteractive-element-interactions\": [\n    \"error\",\n    {\n      required: {\n        some: [\"nesting\", \"id\"]\n      },\n      handlers: [\"onClick\", \"onMouseDown\", \"onMouseUp\", \"onKeyPress\", \"onKeyDown\", \"onKeyUp\"]\n    }\n  ],\n  \"jsx-a11y/role-has-required-aria-props\": \"error\",\n  \"jsx-a11y/click-events-have-key-events\": \"error\",\n  \"jsx-a11y/label-has-associated-control\": \"off\",\n  \"react/default-props-match-prop-types\": \"error\",\n  \"jsx-a11y/aria-activedescendant-has-tabindex\": \"error\",\n  \"react/button-has-type\": \"error\",\n  \"jsx-a11y/interactive-supports-focus\": \"error\",\n  \"jsx-a11y/no-noninteractive-tabindex\": \"error\",\n  \"react/jsx-boolean-value\": \"off\",\n  \"arrow-parens\": \"off\",\n  \"implicit-arrow-linebreak\": \"off\",\n  \"import/no-extraneous-dependencies\": [\n    \"error\",\n    {\n      devDependencies: [\n        \"src/scripts/**/*.ts\",\n        \"src/storybook/**/*\",\n        \"**/__tests__/**/*.{js,jsx,ts,tsx}\",\n        \"**/__stories__/**/*.{js,jsx,ts,tsx}\",\n        \"**/*.test.{js,jsx,ts,tsx}\",\n        \"**/*.spec.{js,jsx,ts,tsx}\",\n        \"**/*.snapshot.test.{js,jsx,ts,tsx}\",\n        \"src/tests/**/*.{js,jsx,ts,tsx}\",\n        \"vitest.config.ts\"\n      ]\n    }\n  ]\n};\nconst commonPlugins = [\"import\", \"react\", \"jsx-a11y\", \"json\", \"markdown\", \"vitest\"];\nconst commonExtends = [\n  \"plugin:react/recommended\",\n  \"plugin:react-hooks/recommended\",\n  \"plugin:prettier/recommended\",\n  \"plugin:vitest/recommended\"\n];\n\nmodule.exports = {\n  overrides: [\n    {\n      files: [\"*.test.js\"]\n    },\n    {\n      files: [\n        \"plopfile.js\",\n        \"babel.config.js\",\n        \".eslintrc.js\",\n        \"__mocks__/**/*.js\",\n        \"plop/**/*.js\",\n        \"rollup.config.js\"\n      ],\n      env: {\n        node: true\n      }\n    },\n    {\n      files: [\"*.ts\", \"*.tsx\"],\n      parser: \"@typescript-eslint/parser\",\n      extends: [\n        ...commonExtends,\n        \"plugin:@typescript-eslint/eslint-recommended\",\n        \"plugin:@typescript-eslint/recommended\"\n      ],\n      plugins: [...commonPlugins, \"@typescript-eslint\"],\n      rules: {\n        ...commonRules,\n        \"@typescript-eslint/ban-ts-comment\": [\"warn\"],\n        \"no-unused-vars\": \"off\",\n        \"react/require-default-props\": \"off\",\n        \"@typescript-eslint/no-unused-vars\": [\"error\", { argsIgnorePattern: \"^_\", varsIgnorePattern: \"^_\" }],\n        \"@typescript-eslint/no-empty-function\": \"off\",\n        \"@typescript-eslint/consistent-type-imports\": [\"error\", { fixStyle: \"inline-type-imports\" }]\n      }\n    },\n    {\n      files: [\"*.stories.@(js|jsx)\", \"*.stories.helpers.@(js|jsx)\", \"src/storybook/decorators/**/with*.{js,jsx}\"],\n      rules: {\n        ...commonRules,\n        \"react-hooks/rules-of-hooks\": \"off\",\n        \"react/jsx-key\": \"off\"\n      }\n    },\n    {\n      files: [\"*.stories.@(ts|tsx)\", \"*.stories.helpers.@(ts|tsx)\", \"src/storybook/decorators/**/with*.{ts,tsx}\"],\n      rules: {\n        ...commonRules,\n        \"react-hooks/rules-of-hooks\": \"off\",\n        \"react/jsx-key\": \"off\",\n        \"react/require-default-props\": \"off\"\n      }\n    }\n  ],\n  env: {\n    browser: true,\n    es2021: true\n  },\n  settings: {\n    react: {\n      version: \"detect\"\n    }\n  },\n  extends: [...commonExtends, \"eslint:recommended\"],\n  parserOptions: {\n    ecmaFeatures: {\n      jsx: true\n    },\n    ecmaVersion: 13,\n    sourceType: \"module\"\n  },\n  plugins: [...commonPlugins],\n  rules: {\n    ...commonRules,\n    \"no-unused-vars\": [\"error\", { argsIgnorePattern: \"^_\" }]\n  }\n};\n"
  },
  {
    "path": "packages/core/.stylelintignore",
    "content": "src/storybook/**/*.scss\n**/__stories__/**/*.scss\n"
  },
  {
    "path": "packages/core/.stylelintrc.json",
    "content": "{\n  \"extends\": [\"stylelint-config-recommended-scss\", \"@vibe/style/stylelint-config\"],\n  \"plugins\": [\"stylelint-use-logical\", \"stylelint-no-unsupported-browser-features\"],\n  \"rules\": {\n    \"no-descending-specificity\": null,\n    \"@vibe/style/use-defined-css-var-when-available\": [\n      true,\n      {\n        \"severity\": \"warning\"\n      }\n    ],\n    \"@vibe/style/use-new-spacing-tokens\": [\n      null,\n      {\n        \"severity\": \"warning\"\n      }\n    ],\n    \"selector-pseudo-class-no-unknown\": [\n      true,\n      {\n        \"ignorePseudoClasses\": [\"global\", \"local\"]\n      }\n    ],\n    \"scss/comment-no-empty\": null,\n    \"selector-class-pattern\": [\n      \"^([a-z][a-z0-9]*([A-Z][a-z0-9]*)*|dark-app-theme|black-app-theme|hacker-app-theme|hacker_theme-app-theme)$\",\n      {\n        \"message\": \"Use camelCase for CSS class names in modules. Example: .myButton instead of .my-button\"\n      }\n    ],\n    \"unit-disallowed-list\": [\"em\", \"rem\"],\n    \"scss/dollar-variable-pattern\": [\n      \"^[a-z][a-zA-Z0-9]*(-[a-z0-9]+)*$\",\n      {\n        \"message\": \"Use kebab-case for CSS custom properties. Example: --my-color instead of --myColor\"\n      }\n    ],\n    \"scss/at-mixin-pattern\": [\n      \"^[a-z][a-zA-Z0-9]*(-[a-z0-9]+)*$\",\n      {\n        \"message\": \"Use kebab-case for CSS mixins. Example: @mixin my-mixin instead of @mixin myMixin\"\n      }\n    ],\n    \"scss/at-function-pattern\": [\n      \"^[a-z][a-zA-Z0-9]*(-[a-z0-9]+)*$\",\n      {\n        \"message\": \"Use kebab-case for CSS functions. Example: @function my-function instead of @function myFunction\"\n      }\n    ],\n    \"csstools/use-logical\": [\n      null,\n      {\n        \"severity\": \"warning\",\n        \"except\": [\"width\", \"height\", \"min-width\", \"max-width\", \"min-height\", \"max-height\"]\n      }\n    ],\n    \"plugin/no-unsupported-browser-features\": [\n      true,\n      {\n        \"ignore\": [\n          \"css-nesting\",\n          \"css3-cursors\",\n          \"css3-cursors-grab\",\n          \"css-touch-action\",\n          \"css-focus-visible\",\n          \"css-when-else\",\n          \"css-overflow\",\n          \"css-logical-props\",\n          \"css-text-indent\",\n          \"css-scrollbar\",\n          \"intrinsic-width\",\n          \"css-sticky\",\n          \"flexbox-gap\",\n          \"css-appearance\",\n          \"css-resize\",\n          \"css-gradients\",\n          \"background-clip-text\",\n          \"css-masks\",\n          \"css-clip-path\",\n          \"css-has\",\n          \"css-backdrop-filter\"\n        ]\n      }\n    ]\n  }\n}\n"
  },
  {
    "path": "packages/core/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [4.2.1](https://github.com/mondaycom/vibe/compare/@vibe/core@4.2.0...@vibe/core@4.2.1) (2026-05-13)\n\n\n### Bug Fixes\n\n* **mcp:** always use @vibe/core as import path in metadata ([#3358](https://github.com/mondaycom/vibe/issues/3358)) ([fa3483d](https://github.com/mondaycom/vibe/commit/fa3483dfa34d8649ee7f6b1a9dac6b83de45d764))\n\n\n\n\n\n# [4.2.0](https://github.com/mondaycom/vibe/compare/@vibe/core@4.0.1...@vibe/core@4.2.0) (2026-05-06)\n\n\n### Bug Fixes\n\n* **Slider:** support fractional step values during drag and rail click ([#3350](https://github.com/mondaycom/vibe/issues/3350)) ([abbb3d5](https://github.com/mondaycom/vibe/commit/abbb3d5aea16c3acf22f165b343b0a3c97a1bb99))\n\n\n### Features\n\n* **core:** add storyUrl and previewUrl to component metadata ([#3357](https://github.com/mondaycom/vibe/issues/3357)) ([57d9b5f](https://github.com/mondaycom/vibe/commit/57d9b5ffb669ec855c8463376e070f6e716e7f18))\n\n\n\n\n\n# [4.1.0](https://github.com/mondaycom/vibe/compare/@vibe/core@4.0.1...@vibe/core@4.1.0) (2026-05-06)\n\n\n### Bug Fixes\n\n* **Slider:** support fractional step values during drag and rail click ([#3350](https://github.com/mondaycom/vibe/issues/3350)) ([abbb3d5](https://github.com/mondaycom/vibe/commit/abbb3d5aea16c3acf22f165b343b0a3c97a1bb99))\n\n\n### Features\n\n* **core:** add storyUrl and previewUrl to component metadata ([#3357](https://github.com/mondaycom/vibe/issues/3357)) ([57d9b5f](https://github.com/mondaycom/vibe/commit/57d9b5ffb669ec855c8463376e070f6e716e7f18))\n\n\n\n\n\n## [4.0.1](https://github.com/mondaycom/vibe/compare/@vibe/core@4.0.0...@vibe/core@4.0.1) (2026-04-16)\n\n\n### Bug Fixes\n\n* **ColorPicker:** add screen reader support for color announcements ([#3346](https://github.com/mondaycom/vibe/issues/3346)) ([ed1bbb1](https://github.com/mondaycom/vibe/commit/ed1bbb1d466d544fbab6ab08198e1db026c116a9))\n\n\n\n\n\n# [4.0.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.88.0...@vibe/core@4.0.0) (2026-03-18)\n\n\n### BREAKING CHANGES\n\nThis release contains breaking changes across components, APIs, and styling. Key highlights:\n\n- **Enum removal**: Removed all deprecated enum exports and static properties across 30+ components. Use string literals instead. Run `npx @vibe/codemod --migration v4` to migrate automatically.\n- **Dropdown**: Complete API rewrite replacing the react-select-based implementation with a new custom component.\n- **Dialog**: Migrated from Popper.js to Floating UI (`@floating-ui/react-dom`). The `modifiers` prop is replaced by `middleware`.\n- **AttentionBox**: New component promoted from `@vibe/core/next`. Legacy props removed; type values renamed.\n- **Icon**: Props renamed — `iconLabel` → `label`, `iconType` → `type`, `iconSize` → `size`.\n- **TipseenImage**: Removed — use `TipseenMedia` with an `<img>` child instead.\n\nFor the full list of breaking changes and migration instructions, see the [v4 migration guide](https://vibe.monday.com/?path=/docs/migration-guide--docs).\n\n\n# [3.88.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.87.0...@vibe/core@3.88.0) (2026-03-11)\n\n\n### Bug Fixes\n\n* **checkbox:** safari keyboard navigation ([#3328](https://github.com/mondaycom/vibe/issues/3328)) ([8614a7b](https://github.com/mondaycom/vibe/commit/8614a7bfb85f4ce59b4765a12d418dbe705ae6e8))\n\n\n### Features\n\n* **LinearProgressBar:** add allowExceedingMax prop to support values… ([#3255](https://github.com/mondaycom/vibe/issues/3255)) ([ce68c53](https://github.com/mondaycom/vibe/commit/ce68c53deab2663b57d0da75d2c6ecb21274827f))\n\n\n\n\n\n# [3.87.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.85.1...@vibe/core@3.87.0) (2026-02-27)\n\n\n### Features\n\n* bump version ([#3286](https://github.com/mondaycom/vibe/issues/3286)) ([812acd8](https://github.com/mondaycom/vibe/commit/812acd8e89f21fc73d4184fe966dfa96d21ba5d3))\n\n\n\n\n\n## [3.85.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.85.0...@vibe/core@3.85.1) (2026-02-12)\n\n\n### Bug Fixes\n\n* **DropdownBoxMode:** add menuWrapperClassName ([#3253](https://github.com/mondaycom/vibe/issues/3253)) ([c05a846](https://github.com/mondaycom/vibe/commit/c05a8467ba63d1930acc58ee6b584bda9dde8c66))\n\n\n\n\n\n# [3.85.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.84.0...@vibe/core@3.85.0) (2026-02-09)\n\n\n### Bug Fixes\n\n* **Dropdown:** use vibe scroller ([#3248](https://github.com/mondaycom/vibe/issues/3248)) ([aba1ad2](https://github.com/mondaycom/vibe/commit/aba1ad28861d89bdae858bb7080175618323ffe0))\n\n\n### Features\n\n* **List:** new component ([#3240](https://github.com/mondaycom/vibe/issues/3240)) ([c9a15d6](https://github.com/mondaycom/vibe/commit/c9a15d685e586b461e56fcbb008750bf8572821e))\n\n\n\n\n\n# [3.84.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.83.4...@vibe/core@3.84.0) (2026-02-04)\n\n\n### Features\n\n* **BaseList:** new component ([#3212](https://github.com/mondaycom/vibe/issues/3212)) ([8372ddd](https://github.com/mondaycom/vibe/commit/8372ddde21e2357e108c1dbbda81e48f00fbc105))\n\n\n\n\n\n## [3.83.4](https://github.com/mondaycom/vibe/compare/@vibe/core@3.83.3...@vibe/core@3.83.4) (2026-01-28)\n\n**Note:** Version bump only for package @vibe/core\n\n\n\n\n\n## [3.83.3](https://github.com/mondaycom/vibe/compare/@vibe/core@3.83.2...@vibe/core@3.83.3) (2026-01-25)\n\n\n### Bug Fixes\n\n* **Tipseen:** hide button div when no buttons are displayed ([#3242](https://github.com/mondaycom/vibe/issues/3242)) ([e48766e](https://github.com/mondaycom/vibe/commit/e48766e3c8ec1194a0281ac6a9ec1db3a0d3c3eb))\n\n\n\n\n\n## [3.83.2](https://github.com/mondaycom/vibe/compare/@vibe/core@3.83.1...@vibe/core@3.83.2) (2026-01-18)\n\n\n### Bug Fixes\n\n* **Dropdown:** : blur searchable dropdown select item ([#3236](https://github.com/mondaycom/vibe/issues/3236)) ([5f62a8f](https://github.com/mondaycom/vibe/commit/5f62a8fe17f20445369883a4d150995a7326c3f1))\n\n\n\n\n\n## [3.83.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.83.0...@vibe/core@3.83.1) (2026-01-04)\n\n**Note:** Version bump only for package @vibe/core\n\n\n\n\n\n# [3.83.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.82.4...@vibe/core@3.83.0) (2026-01-04)\n\n\n### Features\n\n* **Dropdown:** enhance MultiSelectedValues and DropdownInput for better layout and responsiveness ([#3230](https://github.com/mondaycom/vibe/issues/3230)) ([40f8791](https://github.com/mondaycom/vibe/commit/40f8791d4b1855bcb568005e625b4b2c7967c704))\n\n\n\n\n\n## [3.82.4](https://github.com/mondaycom/vibe/compare/@vibe/core@3.82.3...@vibe/core@3.82.4) (2025-12-28)\n\n**Note:** Version bump only for package @vibe/core\n\n\n\n\n\n## [3.82.3](https://github.com/mondaycom/vibe/compare/@vibe/core@3.82.2...@vibe/core@3.82.3) (2025-12-25)\n\n**Note:** Version bump only for package @vibe/core\n\n\n\n\n\n## [3.82.2](https://github.com/mondaycom/vibe/compare/@vibe/core@3.82.1...@vibe/core@3.82.2) (2025-12-22)\n\n**Note:** Version bump only for package @vibe/core\n\n\n\n\n\n## [3.82.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.82.0...@vibe/core@3.82.1) (2025-12-17)\n\n**Note:** Version bump only for package @vibe/core\n\n\n\n\n\n# [3.82.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.81.1...@vibe/core@3.82.0) (2025-12-17)\n\n\n### Features\n\n* add new DatePicker component ([#3139](https://github.com/mondaycom/vibe/issues/3139)) ([cfea5a9](https://github.com/mondaycom/vibe/commit/cfea5a92f6daa5fce28179d8d9534e2dc7d80a2d))\n\n\n\n\n\n## [3.81.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.81.0...@vibe/core@3.81.1) (2025-12-04)\n\n**Note:** Version bump only for package @vibe/core\n\n\n\n\n\n# [3.81.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.80.0...@vibe/core@3.81.0) (2025-11-27)\n\n\n### Features\n\n* **Dropdown:** add minVisibleCount prop to MultiSelect ([#3185](https://github.com/mondaycom/vibe/issues/3185)) ([e789214](https://github.com/mondaycom/vibe/commit/e789214a13666c6b8614569581a2d295fe9d8f1c))\n\n\n\n\n\n# [3.80.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.79.0...@vibe/core@3.80.0) (2025-11-27)\n\n\n### Bug Fixes\n\n* **Label:** update text color ([#3194](https://github.com/mondaycom/vibe/issues/3194)) ([822f3a7](https://github.com/mondaycom/vibe/commit/822f3a70373c7bfdea8ca3d259af063b4bcecd8c))\n\n\n### Features\n\n* **Dropdown:** add borderless prop ([#3195](https://github.com/mondaycom/vibe/issues/3195)) ([0e1227d](https://github.com/mondaycom/vibe/commit/0e1227d24b6731b95e0935115c3551ffffc02aff))\n* **Dropdown:** add boxMode for inline dropdown display ([#3171](https://github.com/mondaycom/vibe/issues/3171)) ([c344822](https://github.com/mondaycom/vibe/commit/c3448224aa80b5f659fcd62d8739865912d60634))\n\n\n\n\n\n# [3.79.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.78.0...@vibe/core@3.79.0) (2025-11-26)\n\n\n### Features\n\n* **AlertBanner:** add ariaLive to AlertBanner ([#3182](https://github.com/mondaycom/vibe/issues/3182)) ([961faca](https://github.com/mondaycom/vibe/commit/961faca14f6c8258650b3004ef6d0c30b7741720))\n\n\n\n\n\n# [3.78.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.77.0...@vibe/core@3.78.0) (2025-11-25)\n\n\n### Features\n\n* **EditableTypography:** add onKeyDown event ([#3190](https://github.com/mondaycom/vibe/issues/3190)) ([0b53625](https://github.com/mondaycom/vibe/commit/0b53625a00a22653ba43f92f85ab2bf5c728fe29))\n\n\n\n\n\n# [3.77.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.76.1...@vibe/core@3.77.0) (2025-11-19)\n\n\n### Features\n\n* **MenuItem:** add right icon ([#3183](https://github.com/mondaycom/vibe/issues/3183)) ([9e8b448](https://github.com/mondaycom/vibe/commit/9e8b44835e09ee43e9d962897f3798287d5fa64c))\n\n\n\n\n\n## [3.76.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.76.0...@vibe/core@3.76.1) (2025-11-19)\n\n\n### Bug Fixes\n\n* **AttentionBox:** change Text element type based on content type for… ([#3186](https://github.com/mondaycom/vibe/issues/3186)) ([8964e33](https://github.com/mondaycom/vibe/commit/8964e338526807342311f0431d5ad08a7ccc57e5))\n\n\n\n\n\n# [3.76.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.75.0...@vibe/core@3.76.0) (2025-11-11)\n\n\n### Features\n\n* **Dropdown:** add support for ControlledPropUpdatedSelectedItem state change in combobox hooks ([#3179](https://github.com/mondaycom/vibe/issues/3179)) ([14d7d56](https://github.com/mondaycom/vibe/commit/14d7d563eee0815bcf00cdf05d9665e560078954))\n\n\n\n\n\n# [3.75.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.74.0...@vibe/core@3.75.0) (2025-11-10)\n\n\n### Features\n\n* Enhance metadata generation to support @vibe/* imports ([#3178](https://github.com/mondaycom/vibe/issues/3178)) ([70c5822](https://github.com/mondaycom/vibe/commit/70c5822573d385d151206fefbe49bc96d78a8698))\n\n\n\n\n\n# [3.74.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.73.0...@vibe/core@3.74.0) (2025-11-06)\n\n\n### Bug Fixes\n\n* **Tipseen:** resolve invalid HTML structure and ref/id prop issues ([#2799](https://github.com/mondaycom/vibe/issues/2799)) ([5f942d1](https://github.com/mondaycom/vibe/commit/5f942d17224e004251ddb016ab1dbf47ce3716d2))\n\n\n### Features\n\n* **Dialog:** add enableNestedDialogLayer prop ([#3176](https://github.com/mondaycom/vibe/issues/3176)) ([a14a063](https://github.com/mondaycom/vibe/commit/a14a063de3dad13dc2a315fabd4b5b880a437658))\n\n\n\n\n\n# [3.73.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.72.0...@vibe/core@3.73.0) (2025-11-03)\n\n\n### Bug Fixes\n\n* **BaseListItem:** fix overflow tooltip ([#3151](https://github.com/mondaycom/vibe/issues/3151)) ([6440534](https://github.com/mondaycom/vibe/commit/64405342d828fcfe5f482ab575d4efd3d7b743ac))\n\n\n### Features\n\n* **Chips:** add \"neutral\" variant color ([#3170](https://github.com/mondaycom/vibe/issues/3170)) ([b91490f](https://github.com/mondaycom/vibe/commit/b91490f3ae601624e47f0f544bcb5207ecfff7e5))\n\n\n\n\n\n# [3.72.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.71.1...@vibe/core@3.72.0) (2025-10-30)\n\n\n### Bug Fixes\n\n* **AttentionBox:** increase specificity for the link component to be greater than the Link component native style ([#3169](https://github.com/mondaycom/vibe/issues/3169)) ([1d57865](https://github.com/mondaycom/vibe/commit/1d57865782450ef18228359359d8d47cb8833294))\n\n\n### Features\n\n* **Dropdown:** enhance MultiSelectedValues for single chip display ([#3164](https://github.com/mondaycom/vibe/issues/3164)) ([3b9d502](https://github.com/mondaycom/vibe/commit/3b9d5021c99eddb3efd06784c046f82294d32115))\n\n\n\n\n\n## [3.71.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.71.0...@vibe/core@3.71.1) (2025-10-30)\n\n**Note:** Version bump only for package @vibe/core\n\n\n\n\n\n# [3.71.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.70.5...@vibe/core@3.71.0) (2025-10-28)\n\n\n### Features\n\n* **Modal:** allow to block focus lock from stealing focus for other type of dialogs ([#3143](https://github.com/mondaycom/vibe/issues/3143)) ([2f55f6f](https://github.com/mondaycom/vibe/commit/2f55f6f6524a77e52e006880cc7c6153028f2c01))\n\n\n\n\n\n## [3.70.5](https://github.com/mondaycom/vibe/compare/@vibe/core@3.70.4...@vibe/core@3.70.5) (2025-10-27)\n\n\n### Bug Fixes\n\n* **Dropdown:** smooth text to align all dropdowns ([#3161](https://github.com/mondaycom/vibe/issues/3161)) ([a639943](https://github.com/mondaycom/vibe/commit/a639943ad2fd3fb8f49a07bd4eb2d3f9202c0cef))\n\n\n\n\n\n## [3.70.4](https://github.com/mondaycom/vibe/compare/@vibe/core@3.70.3...@vibe/core@3.70.4) (2025-10-26)\n\n\n### Bug Fixes\n\n* itemToKey by value ([#3158](https://github.com/mondaycom/vibe/issues/3158)) ([3811c78](https://github.com/mondaycom/vibe/commit/3811c786935b0ebdc697e6f1b59502cfd30a9833))\n\n\n\n\n\n## [3.70.3](https://github.com/mondaycom/vibe/compare/@vibe/core@3.70.2...@vibe/core@3.70.3) (2025-10-26)\n\n**Note:** Version bump only for package @vibe/core\n\n\n\n\n\n## [3.70.2](https://github.com/mondaycom/vibe/compare/@vibe/core@3.70.1...@vibe/core@3.70.2) (2025-10-25)\n\n\n### Bug Fixes\n\n* **Dialog:** click outside handler should be on the wrapper - not content - of the Dialog ([#3145](https://github.com/mondaycom/vibe/issues/3145)) ([b154daf](https://github.com/mondaycom/vibe/commit/b154dafda4dc61384197f7d66625bd1c187cc544))\n\n\n\n\n\n## [3.70.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.70.0...@vibe/core@3.70.1) (2025-10-19)\n\n**Note:** Version bump only for package @vibe/core\n\n\n\n\n\n# [3.70.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.69.1...@vibe/core@3.70.0) (2025-10-16)\n\n\n### Bug Fixes\n\n* **Dropdown:** set index correctly ([#3138](https://github.com/mondaycom/vibe/issues/3138)) ([205ad5a](https://github.com/mondaycom/vibe/commit/205ad5ae8d584a3ae42e5120b4fa2ca9f2f41295))\n\n\n### Features\n\n* **ListItem:** add tooltipProps prop ([#3137](https://github.com/mondaycom/vibe/issues/3137)) ([41d4d26](https://github.com/mondaycom/vibe/commit/41d4d268464ee1d7cbc63d2b5064a53c8c3911b5))\n\n\n\n\n\n## [3.69.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.69.0...@vibe/core@3.69.1) (2025-09-29)\n\n\n### Bug Fixes\n\n* **Dropdown:** fix types ([#3131](https://github.com/mondaycom/vibe/issues/3131)) ([a207bb2](https://github.com/mondaycom/vibe/commit/a207bb2ed041568614d488bd090aec7dedb9c7cc))\n* **DropdownNew:** fix types ([#3108](https://github.com/mondaycom/vibe/issues/3108)) ([8695e81](https://github.com/mondaycom/vibe/commit/8695e81fb287fff59ae4b356735be91b52c639a2))\n\n\n\n\n\n# [3.69.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.68.5...@vibe/core@3.69.0) (2025-09-28)\n\n\n### Features\n\n* **Info:** new component ([#3095](https://github.com/mondaycom/vibe/issues/3095)) ([5bfa27f](https://github.com/mondaycom/vibe/commit/5bfa27f646ef1e2b4a8b8a26692b7e9c73019c1c))\n\n\n\n\n\n## [3.68.5](https://github.com/mondaycom/vibe/compare/@vibe/core@3.68.4...@vibe/core@3.68.5) (2025-09-28)\n\n\n### Bug Fixes\n\n* **AvatarGroup:** fix counter styles ([#3124](https://github.com/mondaycom/vibe/issues/3124)) ([5c80e0f](https://github.com/mondaycom/vibe/commit/5c80e0f8a679ac4e84360f6f1c1d30441106fdf9))\n\n\n\n\n\n## [3.68.4](https://github.com/mondaycom/vibe/compare/@vibe/core@3.68.3...@vibe/core@3.68.4) (2025-09-21)\n\n\n### Bug Fixes\n\n* **Dialog:** add LayerProvider ([#3122](https://github.com/mondaycom/vibe/issues/3122)) ([b56e7aa](https://github.com/mondaycom/vibe/commit/b56e7aacdfa291379c71974f9ae62ff3944809ca))\n\n\n\n\n\n## [3.68.3](https://github.com/mondaycom/vibe/compare/@vibe/core@3.68.2...@vibe/core@3.68.3) (2025-09-19)\n\n\n### Bug Fixes\n\n* use react-select v3.4.0 ([#3119](https://github.com/mondaycom/vibe/issues/3119)) ([089e15d](https://github.com/mondaycom/vibe/commit/089e15da1c8ad0c3b3b45f3c4bd13c3a0d76a047))\n\n\n\n\n\n## [3.68.2](https://github.com/mondaycom/vibe/compare/@vibe/core@3.68.1...@vibe/core@3.68.2) (2025-09-19)\n\n\n### Bug Fixes\n\n* Revert Dropdown use Select component as named export ([#3117](https://github.com/mondaycom/vibe/issues/3117)) ([cc1d72a](https://github.com/mondaycom/vibe/commit/cc1d72acc7e57187c5caa091a18d7b8bbbd7941b))\n\n\n\n\n\n## [3.68.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.68.0...@vibe/core@3.68.1) (2025-09-18)\n\n\n### Bug Fixes\n\n* **Dropdown:** use Select component as named export ([#3116](https://github.com/mondaycom/vibe/issues/3116)) ([7059d31](https://github.com/mondaycom/vibe/commit/7059d3155191b67a9a0c0a8a63d41406763c0da7))\n\n\n\n\n\n# [3.68.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.67.0...@vibe/core@3.68.0) (2025-09-18)\n\n\n### Bug Fixes\n\n* **DropdownNew:** onInputChange return null instead of empty string ([#3109](https://github.com/mondaycom/vibe/issues/3109)) ([bcd6ac0](https://github.com/mondaycom/vibe/commit/bcd6ac0c805b615631763ac879d1ea49aebde829))\n\n\n### Features\n\n* **DropdownNew:** a11y improvements ([#3114](https://github.com/mondaycom/vibe/issues/3114)) ([6b21abb](https://github.com/mondaycom/vibe/commit/6b21abb2dca59f155510ae94fc1141125600fb0b))\n\n\n### Performance Improvements\n\n* **Dialog:** Return default when `containerSelector` is undefined ([#3113](https://github.com/mondaycom/vibe/issues/3113)) ([9c7ba22](https://github.com/mondaycom/vibe/commit/9c7ba22f92c730b92a4909cb477d8ef0891eec6e))\n\n\n\n\n\n# [3.67.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.66.0...@vibe/core@3.67.0) (2025-09-17)\n\n\n### Features\n\n* **Chips:** add ariaHasPopup prop ([#3111](https://github.com/mondaycom/vibe/issues/3111)) ([666bc76](https://github.com/mondaycom/vibe/commit/666bc76703813d0868a04c189c5ff8a5da35fa05))\n\n\n\n\n\n# [3.66.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.65.1...@vibe/core@3.66.0) (2025-09-17)\n\n\n### Features\n\n* **DropdownNew:** enhance accessibility attributes for dropdown states ([#3110](https://github.com/mondaycom/vibe/issues/3110)) ([b52e075](https://github.com/mondaycom/vibe/commit/b52e0759806447759c615659a5e49278fe10e582))\n\n\n\n\n\n## [3.65.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.65.0...@vibe/core@3.65.1) (2025-09-14)\n\n\n### Bug Fixes\n\n* **DropdownNew:** Searchable controlled multi dropdown item selection ([#3104](https://github.com/mondaycom/vibe/issues/3104)) ([d335161](https://github.com/mondaycom/vibe/commit/d3351616bc27cf742066933a505c1d30f27b743f))\n\n\n\n\n\n# [3.65.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.64.0...@vibe/core@3.65.0) (2025-09-08)\n\n\n### Features\n\n* **Combobox:** add tooltipProps and ComboboxOption for enhanced tooltip customization ([#3096](https://github.com/mondaycom/vibe/issues/3096)) ([3fa0d10](https://github.com/mondaycom/vibe/commit/3fa0d10e47010b7872b6a9af6f5bdebbd73269f7))\n\n\n\n\n\n# [3.64.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.63.1...@vibe/core@3.64.0) (2025-09-07)\n\n\n### Features\n\n* **AttentionBox:** implement new AttentionBox component for better DX and improved UI ([#2969](https://github.com/mondaycom/vibe/issues/2969)) ([ad3e2e1](https://github.com/mondaycom/vibe/commit/ad3e2e15f16d89e3a3a53ed677f789115e76c057))\n* **Dropdown:** add loading state ([#3090](https://github.com/mondaycom/vibe/issues/3090)) ([6101b24](https://github.com/mondaycom/vibe/commit/6101b24014d8364e56769d1bcc81d015be6f569e))\n\n\n\n\n\n## [3.63.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.63.0...@vibe/core@3.63.1) (2025-09-04)\n\n**Note:** Version bump only for package @vibe/core\n\n\n\n\n\n# [3.63.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.62.0...@vibe/core@3.63.0) (2025-09-04)\n\n\n### Bug Fixes\n\n* **Chips:** warning color missing hover state ([#3080](https://github.com/mondaycom/vibe/issues/3080)) ([f21b62b](https://github.com/mondaycom/vibe/commit/f21b62b0da4e85530288cf955e74402f9343b78e))\n\n\n### Features\n\n* add getVibeComponentAccessibility tool to retrieve a11y requirements ([#3084](https://github.com/mondaycom/vibe/issues/3084)) ([45314fb](https://github.com/mondaycom/vibe/commit/45314fba533f7ef920b6e325c29de6afe6a7bf22))\n\n\n### Performance Improvements\n\n* replace lodash-es with es-toolkit compat ([#3072](https://github.com/mondaycom/vibe/issues/3072)) ([14dd2bb](https://github.com/mondaycom/vibe/commit/14dd2bb14112a07ce3e649937e281a20516ecb71))\n\n\n\n\n\n# [3.62.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.61.1...@vibe/core@3.62.0) (2025-08-27)\n\n\n### Bug Fixes\n\n* **Dropdown:**  fix size and focus ([#3071](https://github.com/mondaycom/vibe/issues/3071)) ([72425ad](https://github.com/mondaycom/vibe/commit/72425ad7549a67940f7cfb71051e83f6de14eb18))\n* **DropdownBase:** update active state to include isOpen condition ([#3070](https://github.com/mondaycom/vibe/issues/3070)) ([05eba9f](https://github.com/mondaycom/vibe/commit/05eba9f38140d5fbcc1b6ffa9281c47d03776d8e))\n* **dropdown:** border ([#3075](https://github.com/mondaycom/vibe/issues/3075)) ([81d904f](https://github.com/mondaycom/vibe/commit/81d904fe9fcd5a1007c59d1b0716b8bb10f9761d))\n* **Dropdown:** padding on trigger actions ([#3073](https://github.com/mondaycom/vibe/issues/3073)) ([56dfdf8](https://github.com/mondaycom/vibe/commit/56dfdf8bbfd1236ffb59a4ef5cd8f12d55b7c153))\n\n\n### Features\n\n* **Tabs:** add ariaControls ([#3068](https://github.com/mondaycom/vibe/issues/3068)) ([1f1c084](https://github.com/mondaycom/vibe/commit/1f1c084e2eaab94533375b7e58daa38b72826813))\n\n\n\n\n\n## [3.61.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.61.0...@vibe/core@3.61.1) (2025-08-25)\n\n\n### Bug Fixes\n\n* tabs screen reader ([#3066](https://github.com/mondaycom/vibe/issues/3066)) ([9e39770](https://github.com/mondaycom/vibe/commit/9e39770629d925892694982686967db90e59b004))\n\n\n\n\n\n# [3.61.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.60.0...@vibe/core@3.61.0) (2025-08-20)\n\n\n### Features\n\n* IME support for EditableHeading, EditableText ([#3052](https://github.com/mondaycom/vibe/issues/3052)) ([7074f42](https://github.com/mondaycom/vibe/commit/7074f42e983e377ee1f1f0aa6b88178920fe08fb))\n* **Link:** add `style` prop for inline styling ([#3063](https://github.com/mondaycom/vibe/issues/3063)) ([48df2c5](https://github.com/mondaycom/vibe/commit/48df2c5afd3a647718e3c7025b29fe5da3724c5c))\n* **Tipseen:** add onShow event ([#3064](https://github.com/mondaycom/vibe/issues/3064)) ([d5954e7](https://github.com/mondaycom/vibe/commit/d5954e75cb79e37f65dbb02e88ad2415683792e9))\n\n\n### Reverts\n\n* \"feat(Tipseen): add onShow event\" ([#3065](https://github.com/mondaycom/vibe/issues/3065)) ([2df6c8b](https://github.com/mondaycom/vibe/commit/2df6c8b70c21fbcc1c55aee052b6c9eecdcde306))\n\n\n\n\n\n# [3.60.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.59.0...@vibe/core@3.60.0) (2025-08-14)\n\n\n### Features\n\n* **Table:** use custom scrollbar ([#3032](https://github.com/mondaycom/vibe/issues/3032)) ([60962e6](https://github.com/mondaycom/vibe/commit/60962e68c94a80c184617132236fdf5969b86e34))\n\n\n\n\n\n# [3.59.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.58.4...@vibe/core@3.59.0) (2025-08-13)\n\n\n### Features\n\n* **Toggle:** add noSpacing prop to remove horizontal spacing ([#3048](https://github.com/mondaycom/vibe/issues/3048)) ([e0c6732](https://github.com/mondaycom/vibe/commit/e0c6732bbdda1268f453efe375caeba054a15a1e))\n\n\n\n\n\n## [3.58.4](https://github.com/mondaycom/vibe/compare/@vibe/core@3.58.3...@vibe/core@3.58.4) (2025-08-12)\n\n\n### Bug Fixes\n\n* **Counter:** fix usage of CSSTransition#addEndListener with nodeRef ([#3047](https://github.com/mondaycom/vibe/issues/3047)) ([a73b8e9](https://github.com/mondaycom/vibe/commit/a73b8e972144051449b1f47a2c7ee1b5e2d560d1))\n\n\n\n\n\n## [3.58.3](https://github.com/mondaycom/vibe/compare/@vibe/core@3.58.2...@vibe/core@3.58.3) (2025-08-12)\n\n\n### Bug Fixes\n\n* **Label:** fix line kind when using content colors ([#3041](https://github.com/mondaycom/vibe/issues/3041)) ([1eb0893](https://github.com/mondaycom/vibe/commit/1eb08938f8bb609fd4238a80bcf033a3551db5f4))\n\n\n\n\n\n## [3.58.2](https://github.com/mondaycom/vibe/compare/@vibe/core@3.58.1...@vibe/core@3.58.2) (2025-08-07)\n\n\n### Bug Fixes\n\n* A11y-fixes for MenuButton, TextArea, TextField and Checkbox ([#3036](https://github.com/mondaycom/vibe/issues/3036)) ([803c244](https://github.com/mondaycom/vibe/commit/803c244881871cddd1c9afd525eb5c9e72e8ff00))\n\n\n\n\n\n## [3.58.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.58.0...@vibe/core@3.58.1) (2025-08-05)\n\n\n### Bug Fixes\n\n* **DatePicker:** fix import path for defaultPhrases ([#3034](https://github.com/mondaycom/vibe/issues/3034)) ([2797c34](https://github.com/mondaycom/vibe/commit/2797c34e9cfb387df43b5b664a013b9f75437d98))\n\n\n\n\n\n# [3.58.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.57.1...@vibe/core@3.58.0) (2025-08-05)\n\n\n### Features\n\n* **Tabs:** add support for Home and End key navigation ([#3031](https://github.com/mondaycom/vibe/issues/3031)) ([3e80d9c](https://github.com/mondaycom/vibe/commit/3e80d9c454bf4112e50f072b46bf3719515f14ce))\n\n\n\n\n\n## [3.57.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.57.0...@vibe/core@3.57.1) (2025-08-04)\n\n**Note:** Version bump only for package @vibe/core\n\n\n\n\n\n# [3.57.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.56.5...@vibe/core@3.57.0) (2025-08-03)\n\n\n### Bug Fixes\n\n* add check for ResizeObserver support ([#3025](https://github.com/mondaycom/vibe/issues/3025)) ([a2d14fb](https://github.com/mondaycom/vibe/commit/a2d14fb7c87da8548b2e2d747e27140235e27438))\n* change progress bar transition duration ([#3022](https://github.com/mondaycom/vibe/issues/3022)) ([200cba7](https://github.com/mondaycom/vibe/commit/200cba788c2522855d6edb72b687900db2014c42))\n* **DatePicker:** add default value for onPickDate prop ([#3024](https://github.com/mondaycom/vibe/issues/3024)) ([fbd01c2](https://github.com/mondaycom/vibe/commit/fbd01c207f8bb69d84859bcee70d58a8e053bd38))\n\n\n### Features\n\n* **DatePicker:** be able to customize phrases for localization ([#2983](https://github.com/mondaycom/vibe/issues/2983)) ([e21c3b6](https://github.com/mondaycom/vibe/commit/e21c3b622ba85f782538ce63e2cd0a48d3744dcb))\n\n\n\n\n\n## [3.56.5](https://github.com/mondaycom/vibe/compare/@vibe/core@3.56.4...@vibe/core@3.56.5) (2025-07-27)\n\n**Note:** Version bump only for package @vibe/core\n\n\n\n\n\n## [3.56.4](https://github.com/mondaycom/vibe/compare/@vibe/core@3.56.3...@vibe/core@3.56.4) (2025-07-27)\n\n\n### Bug Fixes\n\n* **BaseList:** update background color to use secondary background token ([#3012](https://github.com/mondaycom/vibe/issues/3012)) ([dd3f610](https://github.com/mondaycom/vibe/commit/dd3f6109c9be02eec9f995b0328bc058eb134807))\n\n\n\n\n\n## [3.56.3](https://github.com/mondaycom/vibe/compare/@vibe/core@3.56.2...@vibe/core@3.56.3) (2025-07-24)\n\n\n### Bug Fixes\n\n* **Dropdown:** update default of showSelectedOptions to true ([#3011](https://github.com/mondaycom/vibe/issues/3011)) ([cb07d75](https://github.com/mondaycom/vibe/commit/cb07d75fde06760977c71cb3bebf44b32e4dbff3))\n\n\n\n\n\n## [3.56.2](https://github.com/mondaycom/vibe/compare/@vibe/core@3.56.1...@vibe/core@3.56.2) (2025-07-24)\n\n**Note:** Version bump only for package @vibe/core\n\n\n\n\n\n## [3.56.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.56.0...@vibe/core@3.56.1) (2025-07-24)\n\n**Note:** Version bump only for package @vibe/core\n\n\n\n\n\n# [3.56.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.55.6...@vibe/core@3.56.0) (2025-07-23)\n\n\n### Bug Fixes\n\n* **Dropdown:** stretch selected value ([#3007](https://github.com/mondaycom/vibe/issues/3007)) ([b5899df](https://github.com/mondaycom/vibe/commit/b5899dfe45f87f7fd258a396ef487383c87afe04))\n\n\n### Features\n\n* **stylelint:** add new stylelint rule for new spacing tokens system and update configuration ([#2991](https://github.com/mondaycom/vibe/issues/2991)) ([b4a07cb](https://github.com/mondaycom/vibe/commit/b4a07cbc30c9adcf081e8311d1be503adeeca1b4))\n\n\n\n\n\n## [3.55.6](https://github.com/mondaycom/vibe/compare/@vibe/core@3.55.5...@vibe/core@3.55.6) (2025-07-23)\n\n**Note:** Version bump only for package @vibe/core\n\n\n\n\n\n## [3.55.5](https://github.com/mondaycom/vibe/compare/@vibe/core@3.55.4...@vibe/core@3.55.5) (2025-07-23)\n\n**Note:** Version bump only for package @vibe/core\n\n\n\n\n\n## [3.55.4](https://github.com/mondaycom/vibe/compare/@vibe/core@3.55.3...@vibe/core@3.55.4) (2025-07-22)\n\n\n### Bug Fixes\n\n* **Dropdown:** apply padding conditionally for closed dropdown ([#3001](https://github.com/mondaycom/vibe/issues/3001)) ([62f2461](https://github.com/mondaycom/vibe/commit/62f24610c30da33b089d160bd9b7ed26a1405bc7))\n\n\n\n\n\n## [3.55.3](https://github.com/mondaycom/vibe/compare/@vibe/core@3.55.2...@vibe/core@3.55.3) (2025-07-22)\n\n**Note:** Version bump only for package @vibe/core\n\n\n\n\n\n## [3.55.2](https://github.com/mondaycom/vibe/compare/@vibe/core@3.55.1...@vibe/core@3.55.2) (2025-07-21)\n\n\n### Bug Fixes\n\n* **Dropdown:** remove padding for closed dropdown ([#2999](https://github.com/mondaycom/vibe/issues/2999)) ([48a1186](https://github.com/mondaycom/vibe/commit/48a1186aefcd065d34ebf7290e94a2828024537a))\n\n\n\n\n\n## [3.55.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.55.0...@vibe/core@3.55.1) (2025-07-21)\n\n\n### Bug Fixes\n\n* **Table:** fix loading state handling in TableVirtualizedBody ([#2992](https://github.com/mondaycom/vibe/issues/2992)) ([8e2dff4](https://github.com/mondaycom/vibe/commit/8e2dff456b32227dbb8c38c348f7d4cacac6c195))\n\n\n\n\n\n# [3.55.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.54.2...@vibe/core@3.55.0) (2025-07-20)\n\n\n### Bug Fixes\n\n* fix @vibe/core/tokens import ts error ([#2948](https://github.com/mondaycom/vibe/issues/2948)) ([1f66197](https://github.com/mondaycom/vibe/commit/1f661978f5a4be098e7f20428b3af426954f89f3))\n\n\n### Features\n\n* **Dropdown:** New dropdown component ([#2896](https://github.com/mondaycom/vibe/issues/2896)) ([95b08c9](https://github.com/mondaycom/vibe/commit/95b08c9fc5dce0f105a2aeb2fd1c589fafc8a143))\n\n\n\n\n\n## [3.54.2](https://github.com/mondaycom/vibe/compare/@vibe/core@3.54.1...@vibe/core@3.54.2) (2025-07-15)\n\n**Note:** Version bump only for package @vibe/core\n\n\n\n\n\n## [3.54.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.54.0...@vibe/core@3.54.1) (2025-07-13)\n\n**Note:** Version bump only for package @vibe/core\n\n\n\n\n\n# [3.54.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.53.1...@vibe/core@3.54.0) (2025-07-09)\n\n\n### Features\n\n* **NumberField:** add a new NumberField component ([#2950](https://github.com/mondaycom/vibe/issues/2950)) ([e3693f7](https://github.com/mondaycom/vibe/commit/e3693f72d5bc73576515d8743800a3c6a8f3f07d))\n\n\n\n\n\n## [3.53.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.53.0...@vibe/core@3.53.1) (2025-07-03)\n\n\n### Bug Fixes\n\n* **icons:** update DropdownChevronDown and DropdownChevronUp ([#2965](https://github.com/mondaycom/vibe/issues/2965)) ([57d9704](https://github.com/mondaycom/vibe/commit/57d9704f04a643884a43bb3274228b3daa52412e))\n\n\n\n\n\n# [3.53.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.52.2...@vibe/core@3.53.0) (2025-07-01)\n\n\n### Features\n\n* **Dialog, Refable:** add support for customizable wrapper element type in Dialog and Refable components ([#2961](https://github.com/mondaycom/vibe/issues/2961)) ([b4d7729](https://github.com/mondaycom/vibe/commit/b4d7729c8bf482b93fdc6af5d6c41099605bd21a))\n* **FieldLabel:** add htmlFor prop and id support for improved accessibility ([#2958](https://github.com/mondaycom/vibe/issues/2958)) ([7d18194](https://github.com/mondaycom/vibe/commit/7d181949c72fe6293fa155dd0600720afb01b68d))\n\n\n\n\n\n## [3.52.2](https://github.com/mondaycom/vibe/compare/@vibe/core@3.52.1...@vibe/core@3.52.2) (2025-06-18)\n\n\n### Bug Fixes\n\n* **ButtonGroup:** fix tooltips in fullWidth layout ([#2931](https://github.com/mondaycom/vibe/issues/2931)) ([6a37195](https://github.com/mondaycom/vibe/commit/6a37195ae83524de34dbd3edda6bd0089119a7a4))\n\n\n\n\n\n## [3.52.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.52.0...@vibe/core@3.52.1) (2025-06-11)\n\n\n### Bug Fixes\n\n* **metadata:** include components withStaticPropsWithoutForwardRef ([#2929](https://github.com/mondaycom/vibe/issues/2929)) ([9e5d351](https://github.com/mondaycom/vibe/commit/9e5d3517f6b87ee2b9238f73f76c41d31496124e))\n\n\n\n\n\n# [3.52.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.51.3...@vibe/core@3.52.0) (2025-06-08)\n\n\n### Bug Fixes\n\n* **Chips:** fix hover state ([#2924](https://github.com/mondaycom/vibe/issues/2924)) ([6eed661](https://github.com/mondaycom/vibe/commit/6eed66131e62ba7f1a5e7db608c0f86fb184271e))\n\n\n### Features\n\n* **tabs:** added stretchedUnderline prop ([#2923](https://github.com/mondaycom/vibe/issues/2923)) ([6f971ee](https://github.com/mondaycom/vibe/commit/6f971eec4d095919002eaea237e96c7132883c74))\n\n\n\n\n\n## [3.51.3](https://github.com/mondaycom/vibe/compare/@vibe/core@3.51.2...@vibe/core@3.51.3) (2025-06-01)\n\n**Note:** Version bump only for package @vibe/core\n\n\n\n\n\n## [3.51.2](https://github.com/mondaycom/vibe/compare/@vibe/core@3.51.1...@vibe/core@3.51.2) (2025-05-29)\n\n\n### Bug Fixes\n\n* **Tabs:** add circular keyboard navigation ([#2867](https://github.com/mondaycom/vibe/issues/2867)) ([29a98c2](https://github.com/mondaycom/vibe/commit/29a98c2a26cd8592815b76d2e71db05fe6842af4))\n\n\n\n\n\n## [3.51.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.51.0...@vibe/core@3.51.1) (2025-05-28)\n\n\n### Bug Fixes\n\n* **TextField:** display error text correctly ([#2910](https://github.com/mondaycom/vibe/issues/2910)) ([c6ecb22](https://github.com/mondaycom/vibe/commit/c6ecb22822cfb60289b87436d311f11b2b7ae194))\n\n\n\n\n\n# [3.51.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.50.3...@vibe/core@3.51.0) (2025-05-26)\n\n\n### Features\n\n* **Dropdown:** add hover and active states to counter in MultiValueContainer ([#2907](https://github.com/mondaycom/vibe/issues/2907)) ([7d5d137](https://github.com/mondaycom/vibe/commit/7d5d13779ff607542cb133746f1d7da5905ac32a))\n\n\n\n\n\n## [3.50.3](https://github.com/mondaycom/vibe/compare/@vibe/core@3.50.2...@vibe/core@3.50.3) (2025-05-25)\n\n**Note:** Version bump only for package @vibe/core\n\n\n\n\n\n## [3.50.2](https://github.com/mondaycom/vibe/compare/@vibe/core@3.50.1...@vibe/core@3.50.2) (2025-05-20)\n\n**Note:** Version bump only for package @vibe/core\n\n\n\n\n\n## [3.50.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.50.0...@vibe/core@3.50.1) (2025-05-19)\n\n\n### Bug Fixes\n\n* **Dialog:** clear timeouts on component unmount ([#2892](https://github.com/mondaycom/vibe/issues/2892)) ([a12c654](https://github.com/mondaycom/vibe/commit/a12c6545981f77654b5397dd7798bf8afc10b472))\n* enhance props handling by filtering unnecessary properties to shorten the json ([#2890](https://github.com/mondaycom/vibe/issues/2890)) ([174ebd2](https://github.com/mondaycom/vibe/commit/174ebd291281e627758f32487347c81903da8680))\n* metadata did not include components with static props because of docgen and typescript issues ([#2889](https://github.com/mondaycom/vibe/issues/2889)) ([dc73328](https://github.com/mondaycom/vibe/commit/dc7332899924cc94a60b4dc0c2d38d983b84ab33))\n* **Table:** make row hover state immediate, robust and more reliable ([#2888](https://github.com/mondaycom/vibe/issues/2888)) ([fe41ed1](https://github.com/mondaycom/vibe/commit/fe41ed1c55b565563b7b95e19bfd473548ab2b48))\n\n\n\n\n\n# [3.50.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.49.0...@vibe/core@3.50.0) (2025-05-15)\n\n\n### Features\n\n* **Dropdown, Dialog, Tooltip:** apply border color for components in darker themes ([#2880](https://github.com/mondaycom/vibe/issues/2880)) ([c25630c](https://github.com/mondaycom/vibe/commit/c25630cad4dd4836433fccff5311ec055ba96202))\n\n\n\n\n\n# [3.49.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.48.1...@vibe/core@3.49.0) (2025-05-13)\n\n\n### Features\n\n* **Modal:** add responsiveness for modal ([#2737](https://github.com/mondaycom/vibe/issues/2737)) ([02ef204](https://github.com/mondaycom/vibe/commit/02ef204354580b659b26deb9b4e9791c6518be9b))\n\n\n\n\n\n## [3.48.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.48.0...@vibe/core@3.48.1) (2025-05-11)\n\n\n### Bug Fixes\n\n* **Dropdown:** Fix dropdown chip width issue ([#2872](https://github.com/mondaycom/vibe/issues/2872)) ([c8c6b09](https://github.com/mondaycom/vibe/commit/c8c6b09b13584cf0e8cf4fb411c0243d155cb7e3))\n\n\n\n\n\n# [3.48.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.47.0...@vibe/core@3.48.0) (2025-05-08)\n\n\n### Bug Fixes\n\n* **Dropdown:** add support for rightRenderer in multi dropdown ([#2870](https://github.com/mondaycom/vibe/issues/2870)) ([6a833c8](https://github.com/mondaycom/vibe/commit/6a833c865c6c2af45edac059d12e8f9c12b73152))\n\n\n### Features\n\n* add observeReferenceResizeModifier for dynamic reference resizing ([#2869](https://github.com/mondaycom/vibe/issues/2869)) ([5967c65](https://github.com/mondaycom/vibe/commit/5967c650f45363efcc3ad6d867c976bf6dda6d79))\n* **Chips:** add noMargin prop to remove default margin from chips ([#2871](https://github.com/mondaycom/vibe/issues/2871)) ([ab92f6c](https://github.com/mondaycom/vibe/commit/ab92f6cec2b03f99ea3cee828894c7c8f78fec2a))\n\n\n\n\n\n# [3.47.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.46.1...@vibe/core@3.47.0) (2025-05-05)\n\n\n### Features\n\n* **ExpandCollapse:** make icon position configurable ([#2863](https://github.com/mondaycom/vibe/issues/2863)) ([7d24e77](https://github.com/mondaycom/vibe/commit/7d24e7760aa17a2cb19f34a5fe378af49c8186f5))\n\n\n\n\n\n## [3.46.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.46.0...@vibe/core@3.46.1) (2025-05-04)\n\n\n### Bug Fixes\n\n* **Table:** Memoized row for optimized row rendering ([#2862](https://github.com/mondaycom/vibe/issues/2862)) ([261ca12](https://github.com/mondaycom/vibe/commit/261ca127f057e660a6efe1a239fbd3ade865230e))\n\n\n\n\n\n# [3.46.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.45.0...@vibe/core@3.46.0) (2025-05-04)\n\n\n### Features\n\n* **MenuButton:** allow passing multiple values to dialog ignore classes ([#2859](https://github.com/mondaycom/vibe/issues/2859)) ([85f52f4](https://github.com/mondaycom/vibe/commit/85f52f4c98fbdc88e2a871779923ad42e503c320))\n\n\n\n\n\n# [3.45.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.44.3...@vibe/core@3.45.0) (2025-04-29)\n\n\n### Bug Fixes\n\n* **Dropdown:** prevent the MultiValueContainer gaps from triggering open of menu ([#2858](https://github.com/mondaycom/vibe/issues/2858)) ([cd97a59](https://github.com/mondaycom/vibe/commit/cd97a59c8910785e51874dd8cd509d3644058082))\n\n\n### Features\n\n* **Dropdown:** add classname for multi value dialog ([#2857](https://github.com/mondaycom/vibe/issues/2857)) ([79c0bd7](https://github.com/mondaycom/vibe/commit/79c0bd72470943f3564a89b39f65e00f0377ef5b))\n\n\n\n\n\n## [3.44.3](https://github.com/mondaycom/vibe/compare/@vibe/core@3.44.2...@vibe/core@3.44.3) (2025-04-29)\n\n\n### Bug Fixes\n\n* **ColorPickerContent:** add keyboard tab navigation support to ColorPickerContent's grid ([#2856](https://github.com/mondaycom/vibe/issues/2856)) ([be22cc5](https://github.com/mondaycom/vibe/commit/be22cc527a6b1342089b6cda61988aac40aa3127))\n\n\n\n\n\n## [3.44.2](https://github.com/mondaycom/vibe/compare/@vibe/core@3.44.1...@vibe/core@3.44.2) (2025-04-28)\n\n\n### Bug Fixes\n\n* **ColorPicker:** fix icon alignment in color ([#2855](https://github.com/mondaycom/vibe/issues/2855)) ([77c855b](https://github.com/mondaycom/vibe/commit/77c855b3d88c7707c7c7504c76b6162bebb70133))\n\n\n\n\n\n## [3.44.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.44.0...@vibe/core@3.44.1) (2025-04-27)\n\n\n### Bug Fixes\n\n* **Combobox:** Hide option tooltip when scrolled ([#2854](https://github.com/mondaycom/vibe/issues/2854)) ([a0d9f85](https://github.com/mondaycom/vibe/commit/a0d9f8523a41b9d4402e914f335daf4333831cc2))\n* **MenuButton:** fix tab focus when menu is closing ([#2853](https://github.com/mondaycom/vibe/issues/2853)) ([4c74e15](https://github.com/mondaycom/vibe/commit/4c74e15936c1c22ca6d74dddadb605b266f57e3e))\n\n\n\n\n\n# [3.44.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.43.1...@vibe/core@3.44.0) (2025-04-24)\n\n\n### Bug Fixes\n\n* Fix `<ButtonGroup>` border collapse issue ([#2852](https://github.com/mondaycom/vibe/issues/2852)) ([f5eb915](https://github.com/mondaycom/vibe/commit/f5eb915f696d1b7390763cb4dea582e3fc4b3ce2))\n\n\n### Features\n\n* **BreadcrumbsBar:** adding breadcrumb menu component ([#2844](https://github.com/mondaycom/vibe/issues/2844)) ([c93f590](https://github.com/mondaycom/vibe/commit/c93f5900428eec3308855fff18c98e318a48d1f8))\n* **Menu:** accessibility improvements ([#2848](https://github.com/mondaycom/vibe/issues/2848)) ([685f9b3](https://github.com/mondaycom/vibe/commit/685f9b35e7df2755ca59dff4a4a6beb6ee629b9c))\n\n\n\n\n\n## [3.43.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.43.0...@vibe/core@3.43.1) (2025-04-23)\n\n\n### Bug Fixes\n\n* **Combobox:** update scrollRef type to MutableRefObject ([#2850](https://github.com/mondaycom/vibe/issues/2850)) ([d5fe720](https://github.com/mondaycom/vibe/commit/d5fe720388cde224087a44671ccd6e9e02898e9d))\n* **docs:** docgen can't handle ComponentType ([#2851](https://github.com/mondaycom/vibe/issues/2851)) ([e50beb0](https://github.com/mondaycom/vibe/commit/e50beb04ac446cdd1fefd577b5d56b9f4b447b33))\n\n\n\n\n\n# [3.43.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.42.0...@vibe/core@3.43.0) (2025-04-23)\n\n\n### Bug Fixes\n\n* **MenuItem:** replace aria-current with aria-selected for menu items according to a11y guidelines ([#2842](https://github.com/mondaycom/vibe/issues/2842)) ([9dc6565](https://github.com/mondaycom/vibe/commit/9dc6565b89375686923ea6bb94da442ece70a457))\n* **TextField:** Don't display subTextContainer when no requiredErrorText ([#2849](https://github.com/mondaycom/vibe/issues/2849)) ([08aadc5](https://github.com/mondaycom/vibe/commit/08aadc509f18bd0fb96589b92716c9e9c897fec4))\n\n\n### Features\n\n* add metadata for LLMs ([#2833](https://github.com/mondaycom/vibe/issues/2833)) ([675f541](https://github.com/mondaycom/vibe/commit/675f54156ccd74d2bc595f4663f0748036e646d4))\n\n\n\n\n\n# [3.42.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.41.0...@vibe/core@3.42.0) (2025-04-10)\n\n\n### Bug Fixes\n\n* **Tipseen:** prevent double delay when using showDelay ([#2839](https://github.com/mondaycom/vibe/issues/2839)) ([d53758b](https://github.com/mondaycom/vibe/commit/d53758bf7402a293faad33ea523b922b7beaae26))\n\n\n### Features\n\n* **Flex:** introduced flex prop ([#2753](https://github.com/mondaycom/vibe/issues/2753)) ([5972ab2](https://github.com/mondaycom/vibe/commit/5972ab2f7aadeb61525e580aa0ff2036187a6c97))\n* **TextWithHighlight:** add tooltipProps for additional Tooltip cust… ([#2840](https://github.com/mondaycom/vibe/issues/2840)) ([41781fd](https://github.com/mondaycom/vibe/commit/41781fd5ccc25540675e706b32aa9a825170327f))\n\n\n\n\n\n# [3.41.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.40.0...@vibe/core@3.41.0) (2025-04-10)\n\n\n### Features\n\n* **TextField:** validationText can be a ReactNode ([#2837](https://github.com/mondaycom/vibe/issues/2837)) ([3df905c](https://github.com/mondaycom/vibe/commit/3df905ca4ecb9bb5824b71b61bc489ad1f29cc93))\n\n\n\n\n\n# [3.40.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.39.0...@vibe/core@3.40.0) (2025-04-09)\n\n\n### Bug Fixes\n\n* **Dropdown:** fix test env check ([#2836](https://github.com/mondaycom/vibe/issues/2836)) ([823dcfe](https://github.com/mondaycom/vibe/commit/823dcfeeeb322597163dac0e692c70dbcb2a98d2))\n\n\n### Features\n\n* add data-testid to Box ([#2831](https://github.com/mondaycom/vibe/issues/2831)) ([778312c](https://github.com/mondaycom/vibe/commit/778312cc9c5e3cab87bdffc2e18932f5b9491ccd))\n\n\n\n\n\n# [3.39.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.38.0...@vibe/core@3.39.0) (2025-04-06)\n\n\n### Bug Fixes\n\n* **EmptyState:** description should always be text2 ([#2832](https://github.com/mondaycom/vibe/issues/2832)) ([c476765](https://github.com/mondaycom/vibe/commit/c4767653cd5519f402af72c802eb38511162d958))\n\n\n### Features\n\n* **MenuTitle:** be able to provide a ReactNode ([#2835](https://github.com/mondaycom/vibe/issues/2835)) ([47448e8](https://github.com/mondaycom/vibe/commit/47448e8da9333ab4299c77e5cc82606d67b99732))\n\n\n\n\n\n# [3.38.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.37.0...@vibe/core@3.38.0) (2025-04-03)\n\n\n### Bug Fixes\n\n* **Modal:** update background color to use new token ([#2830](https://github.com/mondaycom/vibe/issues/2830)) ([4cd31ee](https://github.com/mondaycom/vibe/commit/4cd31eee36e38ec37e95b08c5f116a39cb5ddd08))\n\n\n### Features\n\n* add EmptyState component ([#2790](https://github.com/mondaycom/vibe/issues/2790)) ([4b50947](https://github.com/mondaycom/vibe/commit/4b509471b02b92341ec2c9e93cf54eef9cbb1b87))\n* **Text:** add error color ([#2827](https://github.com/mondaycom/vibe/issues/2827)) ([5fcd9ff](https://github.com/mondaycom/vibe/commit/5fcd9ff067c5da8ec0ae358bdb302e47cdfd5306))\n\n\n\n\n\n# [3.37.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.36.0...@vibe/core@3.37.0) (2025-03-30)\n\n\n### Features\n\n* **Dropdown:** use layer context for the dropdown in case used inside Dialog or Modal ([#2824](https://github.com/mondaycom/vibe/issues/2824)) ([0beb840](https://github.com/mondaycom/vibe/commit/0beb840aea841b720a2501c56db4370af5262a4d))\n\n\n\n\n\n# [3.36.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.35.0...@vibe/core@3.36.0) (2025-03-26)\n\n\n### Bug Fixes\n\n* **Dropdown:** use require for test envs only ([#2807](https://github.com/mondaycom/vibe/issues/2807)) ([da66310](https://github.com/mondaycom/vibe/commit/da66310c581dfeb9f05fc41c4da66d29911479ff))\n* **MenuItem:** remove 2nd tooltip (already has tooltip on the MenuItem wrapper) ([#2820](https://github.com/mondaycom/vibe/issues/2820)) ([1f33f10](https://github.com/mondaycom/vibe/commit/1f33f10724e2f9c6c9d6399894aafaad1e241b89))\n\n\n### Features\n\n* **usePopover:** add fallbackPlacements prop ([#2819](https://github.com/mondaycom/vibe/issues/2819)) ([6f28a55](https://github.com/mondaycom/vibe/commit/6f28a55eef4e454212f31a026bf29ee028b7e35a))\n\n\n\n\n\n# [3.35.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.34.2...@vibe/core@3.35.0) (2025-03-25)\n\n\n### Features\n\n* add data-vibe attribute to components ([#2783](https://github.com/mondaycom/vibe/issues/2783)) ([e3e2043](https://github.com/mondaycom/vibe/commit/e3e2043a12f0c3d3c367261879d0accde1fdd61c))\n\n\n\n\n\n## [3.34.2](https://github.com/mondaycom/vibe/compare/@vibe/core@3.34.1...@vibe/core@3.34.2) (2025-03-24)\n\n**Note:** Version bump only for package @vibe/core\n\n\n\n\n\n## [3.34.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.34.0...@vibe/core@3.34.1) (2025-03-23)\n\n**Note:** Version bump only for package @vibe/core\n\n\n\n\n\n# [3.34.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.33.0...@vibe/core@3.34.0) (2025-03-20)\n\n\n### Features\n\n* **Tipseen:** add submitButtonIcon prop ([#2809](https://github.com/mondaycom/vibe/issues/2809)) ([471979f](https://github.com/mondaycom/vibe/commit/471979fadbd8517935a9138be2597cff5663fc01))\n\n\n\n\n\n# [3.33.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.32.0...@vibe/core@3.33.0) (2025-03-19)\n\n\n### Features\n\n* **Link:** add color variants ([#2794](https://github.com/mondaycom/vibe/issues/2794)) ([2051a60](https://github.com/mondaycom/vibe/commit/2051a60e4d50643342a47a4bde7725c37b0554b5))\n* usePopover add offset prop ([#2806](https://github.com/mondaycom/vibe/issues/2806)) ([3f8acd6](https://github.com/mondaycom/vibe/commit/3f8acd6ed846d04dca778eced8101507f8d3b69e))\n\n\n\n\n\n# [3.32.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.31.2...@vibe/core@3.32.0) (2025-03-13)\n\n\n### Bug Fixes\n\n* **Table:** fix virtualized table overflow ([#2797](https://github.com/mondaycom/vibe/issues/2797)) ([8a1f7fc](https://github.com/mondaycom/vibe/commit/8a1f7fcae39382de563833c1cfaa48a1c12039f5))\n* **TextArea:** remove border from disabled state ([#2793](https://github.com/mondaycom/vibe/issues/2793)) ([7b02ffa](https://github.com/mondaycom/vibe/commit/7b02ffab9ca436cf6a329d0fa5eddf1d0837034e))\n\n\n### Features\n\n* **AvatarGroup:** Add tabIndex prop for AvatarGroupCounter ([#2795](https://github.com/mondaycom/vibe/issues/2795)) ([c3cc979](https://github.com/mondaycom/vibe/commit/c3cc979f0afd25be658e33687b5ffc0402e674bd))\n\n\n\n\n\n## [3.31.2](https://github.com/mondaycom/vibe/compare/@vibe/core@3.31.1...@vibe/core@3.31.2) (2025-03-11)\n\n\n### Bug Fixes\n\n* **Button:** change icon size in small variant to 16px ([#2792](https://github.com/mondaycom/vibe/issues/2792)) ([9ef5648](https://github.com/mondaycom/vibe/commit/9ef56488bf23039501445264dadad153cebc7352))\n* **ColorPicker:** make forceUseRawColorList and showColorNameTooltip compatible ([#2789](https://github.com/mondaycom/vibe/issues/2789)) ([39592ae](https://github.com/mondaycom/vibe/commit/39592aee0053680f43405b114d4b11341f41a0e7))\n\n\n\n\n\n## [3.31.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.31.0...@vibe/core@3.31.1) (2025-03-11)\n\n\n### Bug Fixes\n\n* **Modal:** closeButtonTheme fixed color ([#2791](https://github.com/mondaycom/vibe/issues/2791)) ([977764a](https://github.com/mondaycom/vibe/commit/977764a39a0156895f8a743933c5603307012bc3))\n\n\n\n\n\n# [3.31.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.30.0...@vibe/core@3.31.0) (2025-03-11)\n\n\n### Features\n\n* **Spacing:** add new spacing tokens ([#2768](https://github.com/mondaycom/vibe/issues/2768)) ([a21f765](https://github.com/mondaycom/vibe/commit/a21f765ef376da00b5ed0992a41da1124fbd191c))\n\n\n\n\n\n# [3.30.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.29.0...@vibe/core@3.30.0) (2025-03-05)\n\n\n### Features\n\n* **types:** allow dialogPaddingSize to accept inline string values (in addition to the enum) ([#2786](https://github.com/mondaycom/vibe/issues/2786)) ([167b290](https://github.com/mondaycom/vibe/commit/167b2906c1b88e4b982dfe9fec25a4ff372d8943))\n* **types:** export TableColumn type ([#2787](https://github.com/mondaycom/vibe/issues/2787)) ([dbad506](https://github.com/mondaycom/vibe/commit/dbad5068a5f23677a9fc16809225e5563312f031))\n\n\n\n\n\n# [3.29.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.28.2...@vibe/core@3.29.0) (2025-02-24)\n\n\n### Features\n\n* **List:** add role props ([#2771](https://github.com/mondaycom/vibe/issues/2771)) ([a079690](https://github.com/mondaycom/vibe/commit/a07969084be9088801263eac29d65aa344adf040))\n\n\n\n\n\n## [3.28.2](https://github.com/mondaycom/vibe/compare/@vibe/core@3.28.1...@vibe/core@3.28.2) (2025-02-19)\n\n\n### Bug Fixes\n\n* **Tipseen:** setting width more than max-width in tooltip default width has no effect ([#2770](https://github.com/mondaycom/vibe/issues/2770)) ([4dc7a38](https://github.com/mondaycom/vibe/commit/4dc7a3882046157e8f6892193eaa35d0247bf7c6))\n\n\n\n\n\n## [3.28.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.28.0...@vibe/core@3.28.1) (2025-02-19)\n\n\n### Bug Fixes\n\n* **VirtualizedList:** sync scroll position to handle React 18 batching ([#2769](https://github.com/mondaycom/vibe/issues/2769)) ([4eacea5](https://github.com/mondaycom/vibe/commit/4eacea54a755361798666295f5ccf915b267d416))\n\n\n\n\n\n# [3.28.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.27.1...@vibe/core@3.28.0) (2025-02-17)\n\n\n### Features\n\n* **Label:** Add content colors ([#2767](https://github.com/mondaycom/vibe/issues/2767)) ([6ff8036](https://github.com/mondaycom/vibe/commit/6ff803620579fbb80e8204bc35e8a94d025409ab))\n\n\n\n\n\n## [3.27.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.27.0...@vibe/core@3.27.1) (2025-02-13)\n\n\n### Bug Fixes\n\n* **Dialog:** ensure event handlers are properly forwarded in DialogContentContainer ([#2762](https://github.com/mondaycom/vibe/issues/2762)) ([8a9bfbd](https://github.com/mondaycom/vibe/commit/8a9bfbd1aacf6e8fbc71b2e294ed51a654c46574))\n\n\n\n\n\n# [3.27.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.25.0...@vibe/core@3.27.0) (2025-02-11)\n\n\n### Features\n\n* **Combobox:** add className for sticky header ([#2759](https://github.com/mondaycom/vibe/issues/2759)) ([63094f7](https://github.com/mondaycom/vibe/commit/63094f75ff19e08d435b3947ed86272c387cc18c))\n\n\n\n\n\n# [3.26.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.25.0...@vibe/core@3.26.0) (2025-02-11)\n\n\n### Features\n\n* **Combobox:** add className for sticky header ([#2759](https://github.com/mondaycom/vibe/issues/2759)) ([63094f7](https://github.com/mondaycom/vibe/commit/63094f75ff19e08d435b3947ed86272c387cc18c))\n\n\n\n\n\n# [3.25.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.24.2...@vibe/core@3.25.0) (2025-02-09)\n\n\n### Features\n\n* **ModalFooter:** allow tooltip for the modal footer's buttons ([#2754](https://github.com/mondaycom/vibe/issues/2754)) ([9f45266](https://github.com/mondaycom/vibe/commit/9f45266a9a46ab8e0b0f36fb3bdeca969495f742))\n\n\n\n\n\n## [3.24.2](https://github.com/mondaycom/vibe/compare/@vibe/core@3.24.1...@vibe/core@3.24.2) (2025-02-09)\n\n\n### Bug Fixes\n\n* **Combobox:** color on sticky category in virtualized ([#2757](https://github.com/mondaycom/vibe/issues/2757)) ([91a3bd9](https://github.com/mondaycom/vibe/commit/91a3bd9b5f4c950b4acc9f32a0e65b0080fe7e4e))\n\n\n\n\n\n## [3.24.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.24.0...@vibe/core@3.24.1) (2025-02-05)\n\n**Note:** Version bump only for package @vibe/core\n\n\n\n\n\n# [3.24.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.23.0...@vibe/core@3.24.0) (2025-02-04)\n\n\n### Features\n\n* **Tab:** add tooltipProps prop ([#2750](https://github.com/mondaycom/vibe/issues/2750)) ([3714938](https://github.com/mondaycom/vibe/commit/3714938f24bb4a920114b30ba942feef2002ff08))\n* **useIsOverflowing:** allow width tolerance ([#2752](https://github.com/mondaycom/vibe/issues/2752)) ([6102dd1](https://github.com/mondaycom/vibe/commit/6102dd10b8a5be9e8b8c7579a6454c9f32fac86e))\n\n\n\n\n\n# [3.23.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.22.1...@vibe/core@3.23.0) (2025-02-03)\n\n\n### Features\n\n* **Dropdown:** allow ellipsis for component's placeholder ([#2749](https://github.com/mondaycom/vibe/issues/2749)) ([66b1924](https://github.com/mondaycom/vibe/commit/66b1924857ef766cc4095816c680e301b21dff5e))\n\n\n\n\n\n## [3.22.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.22.0...@vibe/core@3.22.1) (2025-02-03)\n\n\n### Bug Fixes\n\n* **Slider:** increase value label max-width to 64px ([#2748](https://github.com/mondaycom/vibe/issues/2748)) ([1435c4d](https://github.com/mondaycom/vibe/commit/1435c4daa6e3c8330d12cd3c1ac952667cd75f66))\n\n\n\n\n\n# [3.22.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.21.0...@vibe/core@3.22.0) (2025-02-02)\n\n\n### Features\n\n* **ButtonGroup:** add blurOnMouseUp to ButtonGroup ([#2743](https://github.com/mondaycom/vibe/issues/2743)) ([bfcb116](https://github.com/mondaycom/vibe/commit/bfcb116f204b2557d875ef2fd0eb3e098f996f68))\n\n\n\n\n\n# [3.21.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.20.0...@vibe/core@3.21.0) (2025-01-30)\n\n\n### Features\n\n* **Modal:** allow disabling autoFocus ([#2729](https://github.com/mondaycom/vibe/issues/2729)) ([abb15b2](https://github.com/mondaycom/vibe/commit/abb15b2e967e640b59d13b36165a4ff1f2b23585))\n\n\n\n\n\n# [3.20.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.19.0...@vibe/core@3.20.0) (2025-01-30)\n\n\n### Bug Fixes\n\n* **Slider:** margin on slider wrapper based on valueLabelPosition prop ([#2741](https://github.com/mondaycom/vibe/issues/2741)) ([e2ae9f6](https://github.com/mondaycom/vibe/commit/e2ae9f6f2ac6aa03ef42235334474d8fcb0bf497))\n\n\n### Features\n\n* **Search:** add prop for hiding clear icon ([#2742](https://github.com/mondaycom/vibe/issues/2742)) ([779db25](https://github.com/mondaycom/vibe/commit/779db25221bd760f3d827d9da87128d2aa1fd202))\n\n\n\n\n\n# [3.19.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.18.0...@vibe/core@3.19.0) (2025-01-27)\n\n\n### Features\n\n* **MenuItem:** allow observing submenu content resize when a re-render isn't triggered ([#2713](https://github.com/mondaycom/vibe/issues/2713)) ([ef07e3c](https://github.com/mondaycom/vibe/commit/ef07e3cd1b65120c4489d5a1691f4ddabbdeffc3))\n\n\n\n\n\n# [3.18.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.17.1...@vibe/core@3.18.0) (2025-01-27)\n\n\n### Bug Fixes\n\n* **MenuItem:** fix disabled submenu arrow button ([#2735](https://github.com/mondaycom/vibe/issues/2735)) ([f9ba468](https://github.com/mondaycom/vibe/commit/f9ba468a125050a2c5458569badaa62b65c2abe7))\n\n\n### Features\n\n* **Avatar:** add xs size ([#2732](https://github.com/mondaycom/vibe/issues/2732)) ([abfefda](https://github.com/mondaycom/vibe/commit/abfefdad3266736f8b650d39ab90ad9394ff19fb))\n* **Slider:** be able to change value label position and color ([#2734](https://github.com/mondaycom/vibe/issues/2734)) ([c84db0a](https://github.com/mondaycom/vibe/commit/c84db0a60368dd7fa1f56c7aff0079ac1375681b))\n\n\n\n\n\n## [3.17.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.17.0...@vibe/core@3.17.1) (2025-01-20)\n\n\n### Bug Fixes\n\n* **MenuButton:** return closeDialogOnContentClick prop ([#2725](https://github.com/mondaycom/vibe/issues/2725)) ([515a648](https://github.com/mondaycom/vibe/commit/515a648527a44a30f4142a0b47c8cf4d53043ab3))\n\n\n\n\n\n# [3.17.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.16.0...@vibe/core@3.17.0) (2025-01-16)\n\n\n### Features\n\n* **Modal:** add full-view size for Modal ([#2716](https://github.com/mondaycom/vibe/issues/2716)) ([ac85841](https://github.com/mondaycom/vibe/commit/ac85841076824c3dfa781acf9367885e4f4ae38e))\n\n\n\n\n\n# [3.16.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.15.1...@vibe/core@3.16.0) (2025-01-13)\n\n\n### Bug Fixes\n\n* **Icons:** update icons ([#2711](https://github.com/mondaycom/vibe/issues/2711)) ([be229ad](https://github.com/mondaycom/vibe/commit/be229adf34bfd22154c1db4c9696fada25d16608))\n\n\n### Features\n\n* **Dialog:** allow observing content resize without a re-render triggered ([#2706](https://github.com/mondaycom/vibe/issues/2706)) ([8ae3eeb](https://github.com/mondaycom/vibe/commit/8ae3eeb03c540976e5bee9694eb3ddeac8c62cbf))\n\n\n\n\n\n## [3.15.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.15.0...@vibe/core@3.15.1) (2025-01-12)\n\n**Note:** Version bump only for package @vibe/core\n\n\n\n\n\n# [3.15.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.14.0...@vibe/core@3.15.0) (2025-01-07)\n\n\n### Bug Fixes\n\n* **Modal:** avoid breaking changes due to specificity ([#2705](https://github.com/mondaycom/vibe/issues/2705)) ([393ecf8](https://github.com/mondaycom/vibe/commit/393ecf8c7881cd30606a847e3ce55b3f090ed234))\n\n\n### Features\n\n* **Modal:** wrap the overlay and modal inside a container, to allow portaling with layer provider to the container ([#2703](https://github.com/mondaycom/vibe/issues/2703)) ([6f4b9d5](https://github.com/mondaycom/vibe/commit/6f4b9d5b18b8258b1cc20bba31542fb3cdc2714b))\n\n\n\n\n\n# [3.14.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.13.0...@vibe/core@3.14.0) (2025-01-06)\n\n\n### Bug Fixes\n\n* **Dropdown:** allow remove chips on mobile ([#2704](https://github.com/mondaycom/vibe/issues/2704)) ([01ceab5](https://github.com/mondaycom/vibe/commit/01ceab59ea6b6d1027878902f9fb5db9b24bb6dd))\n* **EditableTypography:** improve performance ([#2701](https://github.com/mondaycom/vibe/issues/2701)) ([f7e5514](https://github.com/mondaycom/vibe/commit/f7e5514154df6e3b451115eeb34f0d994fed428b))\n\n\n### Features\n\n* **Modal:** allow accepting custom arias, allow passing ReactNode to ModalHeader's title ([#2702](https://github.com/mondaycom/vibe/issues/2702)) ([8201d7f](https://github.com/mondaycom/vibe/commit/8201d7fbbbd85282af179964d8d3de111f43c169))\n\n\n\n\n\n# [3.13.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.12.3...@vibe/core@3.13.0) (2025-01-06)\n\n\n### Bug Fixes\n\n* **tooltip:** fix text with line breaks ([#2700](https://github.com/mondaycom/vibe/issues/2700)) ([5863c05](https://github.com/mondaycom/vibe/commit/5863c0526ff45b106ccc19f4feac4ffb8e90edea))\n\n\n### Features\n\n* **TransitionView:** export component to be used publicly ([#2699](https://github.com/mondaycom/vibe/issues/2699)) ([661be75](https://github.com/mondaycom/vibe/commit/661be7534be8f366b6541c40c7a11761185bc928))\n\n\n\n\n\n## [3.12.3](https://github.com/mondaycom/vibe/compare/@vibe/core@3.12.2...@vibe/core@3.12.3) (2025-01-01)\n\n\n### Bug Fixes\n\n* **Modal:** Esc should be scoped to the current top modal and not to close all modals ([#2698](https://github.com/mondaycom/vibe/issues/2698)) ([8fa3253](https://github.com/mondaycom/vibe/commit/8fa3253d059e6c98eef8b36188b4cd7385f90c4e))\n\n\n\n\n\n## [3.12.2](https://github.com/mondaycom/vibe/compare/@vibe/core@3.12.1...@vibe/core@3.12.2) (2025-01-01)\n\n\n### Bug Fixes\n\n* **Modal:** RemoveScroll is overriding Modal's div's ref ([#2697](https://github.com/mondaycom/vibe/issues/2697)) ([7f1772f](https://github.com/mondaycom/vibe/commit/7f1772fbede8bc6b3a01df435bec78020a90ca83))\n\n\n\n\n\n## [3.12.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.12.0...@vibe/core@3.12.1) (2025-01-01)\n\n\n### Bug Fixes\n\n* **Dropdown:** fix a11y props when searchable is false ([#2689](https://github.com/mondaycom/vibe/issues/2689)) ([ca0a4ed](https://github.com/mondaycom/vibe/commit/ca0a4ed9cc8f1cb19cad793f77561941c0962f7d))\n* **EditableTypography:** Enter and Esc click to end edit mode is bubbling to other places afterwards ([#2696](https://github.com/mondaycom/vibe/issues/2696)) ([428ba51](https://github.com/mondaycom/vibe/commit/428ba51830eb34137ba51bfe016efcc4c4b67853))\n* **EditableTypography:** Enter click to end edit mode is bubbling to other places afterwards ([#2694](https://github.com/mondaycom/vibe/issues/2694)) ([c60db9f](https://github.com/mondaycom/vibe/commit/c60db9fbff945255a2e283711a73f5c8bf0909ff))\n\n\n\n\n\n# [3.12.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.11.0...@vibe/core@3.12.0) (2024-12-31)\n\n\n### Features\n\n* support multiline for EditableText ([#2683](https://github.com/mondaycom/vibe/issues/2683)) ([8c4bf29](https://github.com/mondaycom/vibe/commit/8c4bf29790a007811e9abd70a18f2cebed0679f9))\n\n\n\n\n\n# [3.11.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.10.3...@vibe/core@3.11.0) (2024-12-31)\n\n\n### Features\n\n* **EditableTypography:** allow autoselect of text when going into edit mode ([#2691](https://github.com/mondaycom/vibe/issues/2691)) ([941fab2](https://github.com/mondaycom/vibe/commit/941fab2f94857e93b90f46eb42e5eb752c2f991f))\n\n\n\n\n\n## [3.10.3](https://github.com/mondaycom/vibe/compare/@vibe/core@3.10.2...@vibe/core@3.10.3) (2024-12-30)\n\n\n### Bug Fixes\n\n* **Table:** menu not rendering on react 18 ([#2684](https://github.com/mondaycom/vibe/issues/2684)) ([0ae670f](https://github.com/mondaycom/vibe/commit/0ae670f3104d4a0b7ef6ea4e39805b4585d52eef))\n\n\n\n\n\n## [3.10.2](https://github.com/mondaycom/vibe/compare/@vibe/core@3.10.1...@vibe/core@3.10.2) (2024-12-30)\n\n\n### Bug Fixes\n\n* **Tipseen:** showDelay of 0 causes component to auto-close when mouse leave ([#2687](https://github.com/mondaycom/vibe/issues/2687)) ([f8b59f6](https://github.com/mondaycom/vibe/commit/f8b59f6998e6c988d9536a04b112067404b507d3))\n\n\n### Performance Improvements\n\n* remove redundant overflow style manipulation ([#2678](https://github.com/mondaycom/vibe/issues/2678)) ([5b57172](https://github.com/mondaycom/vibe/commit/5b57172e2d33027993ed2509f8d2c470d51b3d2c))\n\n\n\n\n\n## [3.10.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.10.0...@vibe/core@3.10.1) (2024-12-29)\n\n\n### Bug Fixes\n\n* **Button:** ensure icons className is not added when children are non-renderable ([#2685](https://github.com/mondaycom/vibe/issues/2685)) ([7758e29](https://github.com/mondaycom/vibe/commit/7758e2996bd26d3f7c76bd99b89584823ed5389b))\n\n\n\n\n\n# [3.10.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.9.3...@vibe/core@3.10.0) (2024-12-26)\n\n\n### Features\n\n* **Tipseen:** add event in Tipseen onClose prop ([#2680](https://github.com/mondaycom/vibe/issues/2680)) ([a79f610](https://github.com/mondaycom/vibe/commit/a79f6105a6b1b6a96a0fdce1326239539e027587))\n\n\n\n\n\n## [3.9.3](https://github.com/mondaycom/vibe/compare/@vibe/core@3.9.2...@vibe/core@3.9.3) (2024-12-24)\n\n\n### Bug Fixes\n\n* **VirtualizedGrid:** fix onItemsRendered params ([#2674](https://github.com/mondaycom/vibe/issues/2674)) ([48d4711](https://github.com/mondaycom/vibe/commit/48d4711844f7baebd9d10a86cb6cf10d0aa27e6c))\n\n\n\n\n\n## [3.9.2](https://github.com/mondaycom/vibe/compare/@vibe/core@3.9.1...@vibe/core@3.9.2) (2024-12-23)\n\n**Note:** Version bump only for package @vibe/core\n\n\n\n\n\n## [3.9.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.9.0...@vibe/core@3.9.1) (2024-12-22)\n\n\n### Bug Fixes\n\n* **List:** fix error when ListItem is not HTMLElement ([#2672](https://github.com/mondaycom/vibe/issues/2672)) ([e175d32](https://github.com/mondaycom/vibe/commit/e175d326cab32d8a0d8e3d812689b8d8397aba56))\n\n\n\n\n\n# [3.9.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.8.0...@vibe/core@3.9.0) (2024-12-19)\n\n\n### Bug Fixes\n\n* **ModalBasicLayout:** fix for logic of when to show modal footer shadow ([#2665](https://github.com/mondaycom/vibe/issues/2665)) ([9d68962](https://github.com/mondaycom/vibe/commit/9d68962a87fcae22d43d592aa395bbbe8aa470c7))\n\n\n### Features\n\n* **TransitionView:** remove previous slide before continuing to next slide, enhance animation ([#2668](https://github.com/mondaycom/vibe/issues/2668)) ([0bd51df](https://github.com/mondaycom/vibe/commit/0bd51df7253834864d60039f420ef531b0fdfc30))\n\n\n\n\n\n# [3.8.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.7.3...@vibe/core@3.8.0) (2024-12-19)\n\n\n### Features\n\n* **Modal:** allow passing z-index to overlay and modal ([#2662](https://github.com/mondaycom/vibe/issues/2662)) ([3d1aceb](https://github.com/mondaycom/vibe/commit/3d1acebcd50da9e723248d71f20befcb683f0778))\n* **Tooltip:** add dir prop ([#2666](https://github.com/mondaycom/vibe/issues/2666)) ([5280307](https://github.com/mondaycom/vibe/commit/5280307a4af6a8f97f0256a1e63dec2d5df44717))\n\n\n\n\n\n## [3.7.3](https://github.com/mondaycom/vibe/compare/@vibe/core@3.7.2...@vibe/core@3.7.3) (2024-12-18)\n\n\n### Bug Fixes\n\n* **Dropdown:** fix menuRenderer type ([#2661](https://github.com/mondaycom/vibe/issues/2661)) ([16b707b](https://github.com/mondaycom/vibe/commit/16b707b84eb6695b36ea7615d46a181a2540bef6))\n\n\n\n\n\n## [3.7.2](https://github.com/mondaycom/vibe/compare/@vibe/core@3.7.1...@vibe/core@3.7.2) (2024-12-18)\n\n\n### Bug Fixes\n\n* next entry point pointed to a wrong path ([#2660](https://github.com/mondaycom/vibe/issues/2660)) ([b1a0b2c](https://github.com/mondaycom/vibe/commit/b1a0b2cb0d289fe4f499e82271ef84152ab82d88))\n\n\n\n\n\n## [3.7.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.7.0...@vibe/core@3.7.1) (2024-12-17)\n\n\n### Bug Fixes\n\n* StatusTag remove log, sort stories alphabetically, modal docs fixes ([#2659](https://github.com/mondaycom/vibe/issues/2659)) ([5b13f48](https://github.com/mondaycom/vibe/commit/5b13f48e57cdca2aadc7cc4a612f4e6fe016112d))\n\n\n\n\n\n# [3.7.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.6.2...@vibe/core@3.7.0) (2024-12-17)\n\n\n### Features\n\n* **Modal:** export new Modal component to /next ([#2641](https://github.com/mondaycom/vibe/issues/2641)) ([244c1cb](https://github.com/mondaycom/vibe/commit/244c1cbfa80641f8e3a07270a0dfb4fd3e488bc7))\n\n\n\n\n\n## [3.6.2](https://github.com/mondaycom/vibe/compare/@vibe/core@3.6.1...@vibe/core@3.6.2) (2024-12-17)\n\n\n### Bug Fixes\n\n* **Dropdown:** fix valueRenderer return type ([#2642](https://github.com/mondaycom/vibe/issues/2642)) ([87afb2d](https://github.com/mondaycom/vibe/commit/87afb2d96a23395b4e9a7d796fd1c4aac6882c87))\n\n\n\n\n\n## [3.6.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.6.0...@vibe/core@3.6.1) (2024-12-16)\n\n\n### Bug Fixes\n\n* load inlinesvg with esm ([#2656](https://github.com/mondaycom/vibe/issues/2656)) ([1ef3ab3](https://github.com/mondaycom/vibe/commit/1ef3ab36a7bfe7bc6b0bc2ce15756a75276f24b5))\n\n\n\n\n\n# [3.6.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.5.1...@vibe/core@3.6.0) (2024-12-15)\n\n\n### Bug Fixes\n\n* **ButtonGroup:** remove z-index from active button ([#2649](https://github.com/mondaycom/vibe/issues/2649)) ([9f15af8](https://github.com/mondaycom/vibe/commit/9f15af83e69ac8a8e48d743dda65a9e846b6eea5))\n* **Dropdown:** when disabled chip has extra class ([#2650](https://github.com/mondaycom/vibe/issues/2650)) ([3bf35bd](https://github.com/mondaycom/vibe/commit/3bf35bd2287c3a7f061368718548e1d3707df2f7))\n\n\n### Features\n\n* **Tipseen:** allow referenceWrapperClassName prop for component ([#2652](https://github.com/mondaycom/vibe/issues/2652)) ([9d6fcc2](https://github.com/mondaycom/vibe/commit/9d6fcc295965abc12e05d786c1d98f5a5080cfd1))\n\n\n\n\n\n## [3.5.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.5.0...@vibe/core@3.5.1) (2024-12-12)\n\n\n### Bug Fixes\n\n* **List:** getting wrong tabIndex on initialization ([#2648](https://github.com/mondaycom/vibe/issues/2648)) ([7aaaa73](https://github.com/mondaycom/vibe/commit/7aaaa73fddb3c8434104785f65268ee373079634))\n\n\n\n\n\n# [3.5.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.4.1...@vibe/core@3.5.0) (2024-12-12)\n\n\n### Features\n\n* **Tooltip:** be able to change max width ([#2643](https://github.com/mondaycom/vibe/issues/2643)) ([f39633b](https://github.com/mondaycom/vibe/commit/f39633b190da5b7e453d958bf36028c8332139f5))\n\n\n\n\n\n## [3.4.1](https://github.com/mondaycom/vibe/compare/@vibe/core@3.4.0...@vibe/core@3.4.1) (2024-12-12)\n\n\n### Bug Fixes\n\n* **List:** fix ListTitle getting focus on initialization ([#2638](https://github.com/mondaycom/vibe/issues/2638)) ([0986200](https://github.com/mondaycom/vibe/commit/0986200af94f425a9ba19e4d0948786525557b2e))\n\n\n\n\n\n# [3.4.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.3.0...@vibe/core@3.4.0) (2024-12-09)\n\n\n### Bug Fixes\n\n* **table:** avoid unnecessary re-rendering if TableRowMenu doesn't exist ([#2630](https://github.com/mondaycom/vibe/issues/2630)) ([e8d093e](https://github.com/mondaycom/vibe/commit/e8d093ebc8231c90cfbfa596c686f163d1ad60c4))\n\n\n### Features\n\n* **Modal:** modal improvements, add stories for main Modal and modal's layouts ([#2627](https://github.com/mondaycom/vibe/issues/2627)) ([bead0ba](https://github.com/mondaycom/vibe/commit/bead0bae158a05d9654748e4bf020fc6ccbbc9be))\n* **Modal:** use createPortal and LayerProvider in Modal ([#2634](https://github.com/mondaycom/vibe/issues/2634)) ([b8f895b](https://github.com/mondaycom/vibe/commit/b8f895b3bea0c9a57763ef6d7fe6f604e89989e4))\n\n\n\n\n\n# [3.3.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.2.0...@vibe/core@3.3.0) (2024-12-08)\n\n\n### Bug Fixes\n\n* **Button:** fix secondary disabled border color ([#2622](https://github.com/mondaycom/vibe/issues/2622)) ([0df501d](https://github.com/mondaycom/vibe/commit/0df501db6618f1ae38b6e3581b2e6169da026746))\n* support vitest [prerelease] ([#2625](https://github.com/mondaycom/vibe/issues/2625)) ([638b19f](https://github.com/mondaycom/vibe/commit/638b19f9d582d5bc7cc9c8f6f633bde7bc333e55))\n* **table:** avoid unnecessary re-rendering of table rows ([#2626](https://github.com/mondaycom/vibe/issues/2626)) ([c83a4c4](https://github.com/mondaycom/vibe/commit/c83a4c4ea09173932b66c7cbe3c14d1266ad1388))\n\n\n### Features\n\n* **Modal:** animation enhancements and general fixes and enhancements ([#2620](https://github.com/mondaycom/vibe/issues/2620)) ([17a14fe](https://github.com/mondaycom/vibe/commit/17a14fe4e93e23bcdfd4b6da61095bc679185b3b))\n* **TransitionView:** fill parent if parent has definite height ([#2629](https://github.com/mondaycom/vibe/issues/2629)) ([da5e3b3](https://github.com/mondaycom/vibe/commit/da5e3b3d98d6f5ccdbfd34a4441526c62b5096b0))\n\n\n\n\n\n# [3.2.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.1.0...@vibe/core@3.2.0) (2024-12-04)\n\n\n### Bug Fixes\n\n* **table:** fix scroll delay in header on virtualized table ([#2619](https://github.com/mondaycom/vibe/issues/2619)) ([2230b03](https://github.com/mondaycom/vibe/commit/2230b0309bd624d2d1da32f73e55f718ae7a68da))\n\n\n### Features\n\n* **TextField:** add dir prop ([#2624](https://github.com/mondaycom/vibe/issues/2624)) ([c0545d9](https://github.com/mondaycom/vibe/commit/c0545d98ad41c632fd410bc6a8bec79a2461089e))\n\n\n\n\n\n# [3.1.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.0.0...@vibe/core@3.1.0) (2024-12-03)\n\n\n### Bug Fixes\n\n* **table:** Reduce scroll delay in table ([#2611](https://github.com/mondaycom/vibe/issues/2611)) ([0a37b1a](https://github.com/mondaycom/vibe/commit/0a37b1ae03b9338a88d604bd395ba46533a224f0))\n\n\n### Features\n\n* **Modal:** footers for new Modal component ([#2553](https://github.com/mondaycom/vibe/issues/2553)) ([ba63288](https://github.com/mondaycom/vibe/commit/ba6328894d132ff4070ece9d47f3b1a9bcb23162))\n* **Modal:** layouts for new Modal component ([#2552](https://github.com/mondaycom/vibe/issues/2552)) ([97d81fa](https://github.com/mondaycom/vibe/commit/97d81fa86ca8018cfb70f4de7d9cb7a2fa701120))\n* **Modal:** new Modal components building blocks ([#2432](https://github.com/mondaycom/vibe/issues/2432)) ([43b6b42](https://github.com/mondaycom/vibe/commit/43b6b42872bceac8bceac114b10ebbff3864f5fa))\n\n\n\n\n\n# [3.0.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.0.0-rc.0...@vibe/core@3.0.0) (2024-11-24)\n\nWe're excited to announce the release of Vibe v3! 🎉\n\nSee the complete changelog of v3 [here](https://github.com/mondaycom/vibe/blob/master/packages/core/docs/vibe-3-changelog.md). To migrate, follow the [migration guide](https://vibe.monday.com/?path=/docs/migration-guide--docs).\n\n### Bug Fixes\n\n* **AvatarGroup:** pass dialogContainerSelector from AvatarGroup to AvatarGroupCounter ([#2602](https://github.com/mondaycom/vibe/issues/2602)) ([571e908](https://github.com/mondaycom/vibe/commit/571e908bbc7e8647444026d08a6fe93a2c000330))\n* **icons:** update icons ([#2583](https://github.com/mondaycom/vibe/issues/2583)) ([0d6803c](https://github.com/mondaycom/vibe/commit/0d6803cc2e65cae0cc175f672a2c625ac69fc1d4))\n* **PushNotifications:** fix icon ([#2607](https://github.com/mondaycom/vibe/issues/2607)) ([5b831a4](https://github.com/mondaycom/vibe/commit/5b831a47a8f2705a63e24b9ef18eec3a5853153d))\n* **Switcher:** revert icon change to older version ([#2596](https://github.com/mondaycom/vibe/issues/2596)) ([202e5a6](https://github.com/mondaycom/vibe/commit/202e5a6a1e20b3fc9c9e20185d8d46fc713650b6))\n* **table:** horizontal scroll on react 18 ([#2594](https://github.com/mondaycom/vibe/issues/2594)) ([09c0dc8](https://github.com/mondaycom/vibe/commit/09c0dc83676f5b5a0504e25db0e26227f6b003c9))\n* **TextArea:** don't show the help section if no help text or char co… ([#2590](https://github.com/mondaycom/vibe/issues/2590)) ([162a77d](https://github.com/mondaycom/vibe/commit/162a77d3c734f7833772e5567222de5698108356))\n* **TextArea:** Error state not correctly set when maxlength is exceeded ([#2588](https://github.com/mondaycom/vibe/issues/2588)) ([5a140e8](https://github.com/mondaycom/vibe/commit/5a140e8f335c4b2f4c83ae6beeae3de7db55d746))\n* **TextField:** when inputValue is undefined, length check fails ([#2603](https://github.com/mondaycom/vibe/issues/2603)) ([ad98340](https://github.com/mondaycom/vibe/commit/ad983408dcbdfc725f9106c0a314c7c84ffb66ec))\n* **TextSmall:** fix icon ([#2604](https://github.com/mondaycom/vibe/issues/2604)) ([9a7bad7](https://github.com/mondaycom/vibe/commit/9a7bad770bd5966210684236663de577345c5a5a))\n* **TextSmall:** fix icon ([#2605](https://github.com/mondaycom/vibe/issues/2605)) ([34b439b](https://github.com/mondaycom/vibe/commit/34b439b0e128ab1294e43dfa8eba639618fb3fef))\n* **TransitionView:** handle parent without definite height ([#2584](https://github.com/mondaycom/vibe/issues/2584)) ([356255e](https://github.com/mondaycom/vibe/commit/356255e21d3dbdd0eccab4a410e86411e62e35e5))\n* **WhatsNew:** update icon ([#2592](https://github.com/mondaycom/vibe/issues/2592)) ([fbcb99f](https://github.com/mondaycom/vibe/commit/fbcb99f257b624ee7a64eb270c30292b25f6e2ef))\n\n\n### Features\n\n* **AvatarGroupCounter:** add option to render MenuButton on a container ([#2591](https://github.com/mondaycom/vibe/issues/2591)) ([d286b28](https://github.com/mondaycom/vibe/commit/d286b285900e73b65fc7658b61fb59af8dc1d846))\n* **Dropdown:** add inputValue and blurInputOnSelect properties to allow editing options ([#2608](https://github.com/mondaycom/vibe/issues/2608)) ([074c12c](https://github.com/mondaycom/vibe/commit/074c12c794ebfbe4d0bed3a9921332f66b0aaf07))\n* **PinFull:** new icon ([#2589](https://github.com/mondaycom/vibe/issues/2589)) ([1e34a3c](https://github.com/mondaycom/vibe/commit/1e34a3cff3ee9d1be3d62643258fbca20a2bed83))\n* **Search:** allow tracking Enter key press ([#2600](https://github.com/mondaycom/vibe/issues/2600)) ([01a677a](https://github.com/mondaycom/vibe/commit/01a677ab1665cbb34c1a975663fb7195e2adf3df))\n* **Switcher:** update icon ([#2597](https://github.com/mondaycom/vibe/issues/2597)) ([3c045b1](https://github.com/mondaycom/vibe/commit/3c045b18caf3dad36787c5ee9e84ebb3f71425b2))\n* **Switcher:** update icon ([#2599](https://github.com/mondaycom/vibe/issues/2599)) ([cdac401](https://github.com/mondaycom/vibe/commit/cdac401ee11c14c2ae3ca2d4fe62aa579b2dd1c0))\n* **TextArea:** Character count and maxLength ([#2574](https://github.com/mondaycom/vibe/issues/2574)) ([753edb8](https://github.com/mondaycom/vibe/commit/753edb862a4e531d4cab7115aca2bec5965c256a))\n* **TextField:** improved maxLength with exceeding limit UI ([#2576](https://github.com/mondaycom/vibe/issues/2576)) ([291a843](https://github.com/mondaycom/vibe/commit/291a843b7af340bdc06baa7695bd779358f750e9))\n* **ThumbsDown:** new icon ([#2582](https://github.com/mondaycom/vibe/issues/2582)) ([5395753](https://github.com/mondaycom/vibe/commit/53957534f8a28feb6c8345df088b1dc5f5cf02e7))\n* **TransitionView:** component to be used on wizard-related logics to render a step with animation between steps ([#2557](https://github.com/mondaycom/vibe/issues/2557)) ([bbb6856](https://github.com/mondaycom/vibe/commit/bbb68567c5084bbd6f65bc519f11538594f4e570))\n* **useWizard:** add hook for managing wizard logic for different use cases ([#2450](https://github.com/mondaycom/vibe/issues/2450)) ([dc6e393](https://github.com/mondaycom/vibe/commit/dc6e393ad7d75655fd7e0d0f6a93674ffc783e3f))\n\n\n\n\n\n# [2.149.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.148.0...monday-ui-react-core@2.149.0) (2024-11-24)\n\n\n### Features\n\n* **Dropdown:** add inputValue and blurInputOnSelect properties to allow editing options ([#2608](https://github.com/mondaycom/vibe/issues/2608)) ([074c12c](https://github.com/mondaycom/vibe/commit/074c12c794ebfbe4d0bed3a9921332f66b0aaf07))\n\n\n\n\n\n# [2.148.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.147.1...monday-ui-react-core@2.148.0) (2024-11-24)\n\n\n### Bug Fixes\n\n* **PushNotifications:** fix icon ([#2607](https://github.com/mondaycom/vibe/issues/2607)) ([5b831a4](https://github.com/mondaycom/vibe/commit/5b831a47a8f2705a63e24b9ef18eec3a5853153d))\n* **TextSmall:** fix icon ([#2604](https://github.com/mondaycom/vibe/issues/2604)) ([9a7bad7](https://github.com/mondaycom/vibe/commit/9a7bad770bd5966210684236663de577345c5a5a))\n* **TextSmall:** fix icon ([#2605](https://github.com/mondaycom/vibe/issues/2605)) ([34b439b](https://github.com/mondaycom/vibe/commit/34b439b0e128ab1294e43dfa8eba639618fb3fef))\n\n\n### Features\n\n* **Search:** allow tracking Enter key press ([#2600](https://github.com/mondaycom/vibe/issues/2600)) ([01a677a](https://github.com/mondaycom/vibe/commit/01a677ab1665cbb34c1a975663fb7195e2adf3df))\n\n\n\n\n\n## [2.147.1](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.147.0...monday-ui-react-core@2.147.1) (2024-11-21)\n\n\n### Bug Fixes\n\n* **AvatarGroup:** pass dialogContainerSelector from AvatarGroup to AvatarGroupCounter ([#2602](https://github.com/mondaycom/vibe/issues/2602)) ([571e908](https://github.com/mondaycom/vibe/commit/571e908bbc7e8647444026d08a6fe93a2c000330))\n* **TextField:** when inputValue is undefined, length check fails ([#2603](https://github.com/mondaycom/vibe/issues/2603)) ([ad98340](https://github.com/mondaycom/vibe/commit/ad983408dcbdfc725f9106c0a314c7c84ffb66ec))\n\n\n\n\n\n# [2.147.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.146.0...monday-ui-react-core@2.147.0) (2024-11-20)\n\n\n### Features\n\n* **Switcher:** update icon ([#2599](https://github.com/mondaycom/vibe/issues/2599)) ([cdac401](https://github.com/mondaycom/vibe/commit/cdac401ee11c14c2ae3ca2d4fe62aa579b2dd1c0))\n\n\n\n\n\n# [2.146.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.145.2...monday-ui-react-core@2.146.0) (2024-11-19)\n\n\n### Bug Fixes\n\n* **TextArea:** Error state not correctly set when maxlength is exceeded ([#2588](https://github.com/mondaycom/vibe/issues/2588)) ([5a140e8](https://github.com/mondaycom/vibe/commit/5a140e8f335c4b2f4c83ae6beeae3de7db55d746))\n\n\n### Features\n\n* **Switcher:** update icon ([#2597](https://github.com/mondaycom/vibe/issues/2597)) ([3c045b1](https://github.com/mondaycom/vibe/commit/3c045b18caf3dad36787c5ee9e84ebb3f71425b2))\n\n\n\n\n\n## [2.145.2](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.145.1...monday-ui-react-core@2.145.2) (2024-11-18)\n\n\n### Bug Fixes\n\n* **Switcher:** revert icon change to older version ([#2596](https://github.com/mondaycom/vibe/issues/2596)) ([202e5a6](https://github.com/mondaycom/vibe/commit/202e5a6a1e20b3fc9c9e20185d8d46fc713650b6))\n\n\n\n\n\n## [2.145.1](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.145.0...monday-ui-react-core@2.145.1) (2024-11-18)\n\n\n### Bug Fixes\n\n* **table:** horizontal scroll on react 18 ([#2594](https://github.com/mondaycom/vibe/issues/2594)) ([09c0dc8](https://github.com/mondaycom/vibe/commit/09c0dc83676f5b5a0504e25db0e26227f6b003c9))\n\n\n\n\n\n# [2.145.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.144.0...monday-ui-react-core@2.145.0) (2024-11-18)\n\n\n### Bug Fixes\n\n* **TextArea:** don't show the help section if no help text or char co… ([#2590](https://github.com/mondaycom/vibe/issues/2590)) ([162a77d](https://github.com/mondaycom/vibe/commit/162a77d3c734f7833772e5567222de5698108356))\n* **WhatsNew:** update icon ([#2592](https://github.com/mondaycom/vibe/issues/2592)) ([fbcb99f](https://github.com/mondaycom/vibe/commit/fbcb99f257b624ee7a64eb270c30292b25f6e2ef))\n\n\n### Features\n\n* **AvatarGroupCounter:** add option to render MenuButton on a container ([#2591](https://github.com/mondaycom/vibe/issues/2591)) ([d286b28](https://github.com/mondaycom/vibe/commit/d286b285900e73b65fc7658b61fb59af8dc1d846))\n* **PinFull:** new icon ([#2589](https://github.com/mondaycom/vibe/issues/2589)) ([1e34a3c](https://github.com/mondaycom/vibe/commit/1e34a3cff3ee9d1be3d62643258fbca20a2bed83))\n\n\n\n\n\n# [2.144.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.143.1...monday-ui-react-core@2.144.0) (2024-11-15)\n\n\n### Features\n\n* **TextField:** improved maxLength with exceeding limit UI ([#2576](https://github.com/mondaycom/vibe/issues/2576)) ([291a843](https://github.com/mondaycom/vibe/commit/291a843b7af340bdc06baa7695bd779358f750e9))\n\n\n\n\n\n## [2.143.1](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.143.0...monday-ui-react-core@2.143.1) (2024-11-14)\n\n**Note:** Version bump only for package monday-ui-react-core\n\n\n\n\n\n# [2.143.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.142.1...monday-ui-react-core@2.143.0) (2024-11-14)\n\n\n### Bug Fixes\n\n* **icons:** update icons ([#2583](https://github.com/mondaycom/vibe/issues/2583)) ([0d6803c](https://github.com/mondaycom/vibe/commit/0d6803cc2e65cae0cc175f672a2c625ac69fc1d4))\n* **TransitionView:** handle parent without definite height ([#2584](https://github.com/mondaycom/vibe/issues/2584)) ([356255e](https://github.com/mondaycom/vibe/commit/356255e21d3dbdd0eccab4a410e86411e62e35e5))\n\n\n### Features\n\n* **TextArea:** Character count and maxLength ([#2574](https://github.com/mondaycom/vibe/issues/2574)) ([753edb8](https://github.com/mondaycom/vibe/commit/753edb862a4e531d4cab7115aca2bec5965c256a))\n* **ThumbsDown:** new icon ([#2582](https://github.com/mondaycom/vibe/issues/2582)) ([5395753](https://github.com/mondaycom/vibe/commit/53957534f8a28feb6c8345df088b1dc5f5cf02e7))\n* **TransitionView:** component to be used on wizard-related logics to render a step with animation between steps ([#2557](https://github.com/mondaycom/vibe/issues/2557)) ([bbb6856](https://github.com/mondaycom/vibe/commit/bbb68567c5084bbd6f65bc519f11538594f4e570))\n* **useWizard:** add hook for managing wizard logic for different use cases ([#2450](https://github.com/mondaycom/vibe/issues/2450)) ([dc6e393](https://github.com/mondaycom/vibe/commit/dc6e393ad7d75655fd7e0d0f6a93674ffc783e3f))\n\n\n\n\n\n## [2.142.1](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.142.0...monday-ui-react-core@2.142.1) (2024-11-06)\n\n\n### Bug Fixes\n\n* **AvatarGroup:** avatar shrinking in counter tooltip ([#2575](https://github.com/mondaycom/vibe/issues/2575)) ([37befed](https://github.com/mondaycom/vibe/commit/37befed099aa0c211c9c07a7296d158485704b9a))\n\n\n\n\n\n# [2.142.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.141.0...monday-ui-react-core@2.142.0) (2024-10-31)\n\n\n### Features\n\n* **Clipboard:** new icon ([#2570](https://github.com/mondaycom/vibe/issues/2570)) ([da71c1b](https://github.com/mondaycom/vibe/commit/da71c1bc6ca23a5321b2ea6e177633da6d2e01cf))\n* **Forward:** new icon ([#2569](https://github.com/mondaycom/vibe/issues/2569)) ([2034fd5](https://github.com/mondaycom/vibe/commit/2034fd51e30e2c32425e0e06322739d3526c22eb))\n\n\n\n\n\n# [2.141.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.140.0...monday-ui-react-core@2.141.0) (2024-10-30)\n\n\n### Bug Fixes\n\n* **Table:** scroll handlers and menu handlers, fix double scroll ([#2564](https://github.com/mondaycom/vibe/issues/2564)) ([214350b](https://github.com/mondaycom/vibe/commit/214350b97fddc5d92a260a8e7b4acfebdcf8683f))\n\n\n### Features\n\n* **TableHeaderCell:** allow passing title as component ([#2563](https://github.com/mondaycom/vibe/issues/2563)) ([bd382b7](https://github.com/mondaycom/vibe/commit/bd382b7dadf719c4dfdfbc33b59e127babd1e42c))\n\n\n\n\n\n# [2.140.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.139.4...monday-ui-react-core@2.140.0) (2024-10-29)\n\n\n### Features\n\n* add aria-label to VirtualizedList ([#2558](https://github.com/mondaycom/vibe/issues/2558)) ([e1d5044](https://github.com/mondaycom/vibe/commit/e1d504423d9bce1c94d27d2ff141f61bbd7546b4))\n* **AttentionBox:** add prop for enter animation ([#2566](https://github.com/mondaycom/vibe/issues/2566)) ([15b20b1](https://github.com/mondaycom/vibe/commit/15b20b105d952f6db03136c23ccf369b8d2e6829))\n\n\n\n\n\n## [2.139.4](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.139.3...monday-ui-react-core@2.139.4) (2024-10-21)\n\n\n### Bug Fixes\n\n* **Combobox:** restricted onclick on the disabled ([#2491](https://github.com/mondaycom/vibe/issues/2491)) ([9965476](https://github.com/mondaycom/vibe/commit/996547612af7a33e5dde95ba200ea23fa8ea0963))\n* Dropdown font broken ([#2551](https://github.com/mondaycom/vibe/issues/2551)) ([bca2c68](https://github.com/mondaycom/vibe/commit/bca2c681e622fbd7a6f8291df1c413cc8fc2083f))\n\n\n\n\n\n## [2.139.3](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.139.2...monday-ui-react-core@2.139.3) (2024-10-10)\n\n\n### Bug Fixes\n\n* fix icons tsx ([#2487](https://github.com/mondaycom/vibe/issues/2487)) ([f53f259](https://github.com/mondaycom/vibe/commit/f53f259879ae36b08f060c6d1e32add02be3e649))\n\n\n\n\n\n## [2.139.2](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.139.1...monday-ui-react-core@2.139.2) (2024-10-10)\n\n\n### Bug Fixes\n\n* Fix ellipsis clamp lines for SSR [prerelease] ([#2484](https://github.com/mondaycom/vibe/issues/2484)) ([0f2c618](https://github.com/mondaycom/vibe/commit/0f2c618ad89bf96a36421c1ca23eb6701aa0c0e1))\n\n\n\n\n\n## [2.139.1](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.139.0...monday-ui-react-core@2.139.1) (2024-10-10)\n\n**Note:** Version bump only for package monday-ui-react-core\n\n\n\n\n\n# [2.139.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.138.1...monday-ui-react-core@2.139.0) (2024-10-09)\n\n\n### Features\n\n* add inputAriaLabel to Dropdown component ([#2466](https://github.com/mondaycom/vibe/issues/2466)) ([1cb3d1e](https://github.com/mondaycom/vibe/commit/1cb3d1eb7608abb575620eb1ba7acbe9e68a77f4))\n\n\n\n\n\n## [2.138.1](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.138.0...monday-ui-react-core@2.138.1) (2024-10-08)\n\n\n### Bug Fixes\n\n* **ColorPickerClearButton:** button isn't clickable inside MenuItem ([#2464](https://github.com/mondaycom/vibe/issues/2464)) ([d6bc515](https://github.com/mondaycom/vibe/commit/d6bc51513d95db7db1c4dc8c81ed0a8282dc6990))\n\n\n\n\n\n# [2.138.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.137.1...monday-ui-react-core@2.138.0) (2024-10-06)\n\n\n### Features\n\n* SSR support fixes  ([#2458](https://github.com/mondaycom/vibe/issues/2458)) ([562da71](https://github.com/mondaycom/vibe/commit/562da71cfb984bf368ae2375f72504ec8c179db3))\n\n\n\n\n\n## [2.137.1](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.137.0...monday-ui-react-core@2.137.1) (2024-10-06)\n\n\n### Bug Fixes\n\n* keep current drop shadow with stroke on dark theme ([#2451](https://github.com/mondaycom/vibe/issues/2451)) ([197fc6f](https://github.com/mondaycom/vibe/commit/197fc6fa38d3fb170f94755ba66416e7e27f55f3))\n\n\n\n\n\n# [2.137.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.136.0...monday-ui-react-core@2.137.0) (2024-10-01)\n\n\n### Features\n\n* **Dropdown:** add scroll handlers props ([#2447](https://github.com/mondaycom/vibe/issues/2447)) ([0f1277a](https://github.com/mondaycom/vibe/commit/0f1277a67b56b32943001d0fc16e1a1e133a64be))\n\n\n\n\n\n# [2.136.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.135.1...monday-ui-react-core@2.136.0) (2024-09-29)\n\n\n### Features\n\n* **Toast:** improve animation ([#2391](https://github.com/mondaycom/vibe/issues/2391)) ([968c852](https://github.com/mondaycom/vibe/commit/968c852bd640a45594d2da1b1a416a8f4aabe120))\n\n\n\n\n\n## [2.135.1](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.135.0...monday-ui-react-core@2.135.1) (2024-09-29)\n\n**Note:** Version bump only for package monday-ui-react-core\n\n\n\n\n\n# [2.135.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.134.2...monday-ui-react-core@2.135.0) (2024-09-26)\n\n\n### Features\n\n* **Key:** add new icon ([#2443](https://github.com/mondaycom/vibe/issues/2443)) ([0c7bdef](https://github.com/mondaycom/vibe/commit/0c7bdeff1c7cc29a9e7b3daa37747f69d42c9822))\n\n\n\n\n\n## [2.134.2](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.134.1...monday-ui-react-core@2.134.2) (2024-09-25)\n\n\n### Bug Fixes\n\n* **TextArea:** Spread rest props to the native textarea tag ([#2442](https://github.com/mondaycom/vibe/issues/2442)) ([f74d5bd](https://github.com/mondaycom/vibe/commit/f74d5bd482ca307d2b33869c1af97d838c29204a))\n\n\n\n\n\n## [2.134.1](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.134.0...monday-ui-react-core@2.134.1) (2024-09-16)\n\n\n### Bug Fixes\n\n* pass on attributes such as name, onBlur and maxLength to textarea element ([#2435](https://github.com/mondaycom/vibe/issues/2435)) ([be0482d](https://github.com/mondaycom/vibe/commit/be0482dfb7a182919309c0fb2884c222ddfd49f0))\n\n\n\n\n\n# [2.134.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.133.0...monday-ui-react-core@2.134.0) (2024-09-15)\n\n\n### Features\n\n* **CloseMedium:** add new icon ([#2431](https://github.com/mondaycom/vibe/issues/2431)) ([6fefb43](https://github.com/mondaycom/vibe/commit/6fefb4331f4ef5a89f9badd71357cc92c5f9f4cb))\n\n\n\n\n\n# [2.133.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.132.0...monday-ui-react-core@2.133.0) (2024-09-11)\n\n\n### Features\n\n* add aria-pressed prop to IconButton ([#2428](https://github.com/mondaycom/vibe/issues/2428)) ([4587c6e](https://github.com/mondaycom/vibe/commit/4587c6e2270d9bd688e52256dda0611cf1731fd8))\n\n\n\n\n\n# [2.132.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.131.2...monday-ui-react-core@2.132.0) (2024-09-09)\n\n\n### Bug Fixes\n\n* **Dropdown:** left icon shrinking with long text ([#2416](https://github.com/mondaycom/vibe/issues/2416)) ([dab052d](https://github.com/mondaycom/vibe/commit/dab052de53e849d284fd13b0d523ae04b2faed93))\n* **Toast:** make type style stronger ([#2408](https://github.com/mondaycom/vibe/issues/2408)) ([7faf565](https://github.com/mondaycom/vibe/commit/7faf5654c1da2e6f2b7051c76df85f72811ca785))\n\n\n### Features\n\n* **Dropdown:** Add A11y props to dropdown ([#2407](https://github.com/mondaycom/vibe/issues/2407)) ([d53d2e2](https://github.com/mondaycom/vibe/commit/d53d2e2f04b067080999f4924bedf358faf03d05))\n* **Dropdown:** add option for divider in dropdown ([#2422](https://github.com/mondaycom/vibe/issues/2422)) ([f5d1e5a](https://github.com/mondaycom/vibe/commit/f5d1e5a802104db4b4e5baae38d06f43ba125eac))\n* **Icon:** add reply all icon ([#2418](https://github.com/mondaycom/vibe/issues/2418)) ([031f65d](https://github.com/mondaycom/vibe/commit/031f65d500098c0f34ede3316503aa3fceea0123))\n\n\n\n\n\n## [2.131.2](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.131.1...monday-ui-react-core@2.131.2) (2024-08-28)\n\n\n### Bug Fixes\n\n* **Combobox:** render comboboxItems only when hasResults is true ([#2380](https://github.com/mondaycom/vibe/issues/2380)) ([7ede2d0](https://github.com/mondaycom/vibe/commit/7ede2d017de9ca1ed1b86565cef7a2000039cd00))\n\n\n\n\n\n## [2.131.1](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.131.0...monday-ui-react-core@2.131.1) (2024-08-22)\n\n**Note:** Version bump only for package monday-ui-react-core\n\n\n\n\n\n# [2.131.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.130.2...monday-ui-react-core@2.131.0) (2024-08-19)\n\n\n### Bug Fixes\n\n* **AvatarGroup:** be able to use some tooltip props ([#2370](https://github.com/mondaycom/vibe/issues/2370)) ([583e1fd](https://github.com/mondaycom/vibe/commit/583e1fddb07656ca76fbad941bdfb49faead547b))\n\n\n### Features\n\n* **Chips:** change chips spacing and size ([#2356](https://github.com/mondaycom/vibe/issues/2356)) ([c455cc6](https://github.com/mondaycom/vibe/commit/c455cc6fa9023d541297c097a95f268b6fa28899))\n\n\n\n\n\n## [2.130.2](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.130.1...monday-ui-react-core@2.130.2) (2024-08-12)\n\n\n### Bug Fixes\n\n* **AvatarGroup:** avatar in tipseen without image is wrong size ([#2353](https://github.com/mondaycom/vibe/issues/2353)) ([3d0cfe6](https://github.com/mondaycom/vibe/commit/3d0cfe6e0988a01b5a34939072c3e21c6c06c076))\n\n\n\n\n\n## [2.130.1](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.130.0...monday-ui-react-core@2.130.1) (2024-08-12)\n\n\n### Bug Fixes\n\n* **menuButton:** fix scale for disabled menu button ([#2319](https://github.com/mondaycom/vibe/issues/2319)) ([c84a9ae](https://github.com/mondaycom/vibe/commit/c84a9ae4e80eed2e3a6e01d7882ef701dd70be47))\n* targets for storybook ([#2351](https://github.com/mondaycom/vibe/issues/2351)) ([e9d2a5c](https://github.com/mondaycom/vibe/commit/e9d2a5ca21d7574991ee5690c00b04b955aaa2f8))\n\n\n\n\n\n# [2.130.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.129.0...monday-ui-react-core@2.130.0) (2024-08-08)\n\n\n### Features\n\n* **Breadcrumbs:** be able to show only the icon ([#2336](https://github.com/mondaycom/vibe/issues/2336)) ([d68c9c3](https://github.com/mondaycom/vibe/commit/d68c9c34498ab423f8eb179bc5e2dc07c5588757))\n* **combobox:** Add render action to combobox ([#2297](https://github.com/mondaycom/vibe/issues/2297)) ([a6d4adb](https://github.com/mondaycom/vibe/commit/a6d4adb57c994e4fb0176a287ec3cac488a2d05b))\n* **MenuItem:** Add all label capabilities to menu item ([#2335](https://github.com/mondaycom/vibe/issues/2335)) ([d786e92](https://github.com/mondaycom/vibe/commit/d786e9250abfd464a1064218421cbbe15998514e))\n\n\n\n\n\n# [2.129.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.128.0...monday-ui-react-core@2.129.0) (2024-08-07)\n\n\n### Bug Fixes\n\n* **useSwitch:** type guard to fix breaking change we accidentally introduced in previous version ([#2330](https://github.com/mondaycom/vibe/issues/2330)) ([d07d907](https://github.com/mondaycom/vibe/commit/d07d907b2e46f8ec004a6823c4f0fd45a7deff1b))\n\n\n### Features\n\n* **Icon:** update numbers icon ([#2296](https://github.com/mondaycom/vibe/issues/2296)) ([847d2c8](https://github.com/mondaycom/vibe/commit/847d2c840ffcee68a00b157f0dd6d907328aebe2))\n* **primary-surface-color:** new color token ([#2300](https://github.com/mondaycom/vibe/issues/2300)) ([780fdf7](https://github.com/mondaycom/vibe/commit/780fdf7be027bfba3aa4a643969e024263e80ec6))\n* **Tipseen:** New paddings for tipseen ([#2251](https://github.com/mondaycom/vibe/issues/2251)) ([a4d40a0](https://github.com/mondaycom/vibe/commit/a4d40a0b68a95288c192b56f418990b3579ac9ef))\n\n\n\n\n\n# [2.128.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.127.0...monday-ui-react-core@2.128.0) (2024-08-01)\n\n\n### Bug Fixes\n\n* Add support for generic types in the TableVirtualizedBody component ([#2292](https://github.com/mondaycom/vibe/issues/2292)) ([203ab3c](https://github.com/mondaycom/vibe/commit/203ab3c544c4d0f989523293ab529f5e15cde8d5))\n* **DatePicker:** Keyboard Navigation ([#2241](https://github.com/mondaycom/vibe/issues/2241)) ([8108b06](https://github.com/mondaycom/vibe/commit/8108b06a1e331615a86da7df3e32cc85d46d8725))\n\n\n### Features\n\n* **icons:** add Items Count icon ([#2294](https://github.com/mondaycom/vibe/issues/2294)) ([da16f1e](https://github.com/mondaycom/vibe/commit/da16f1e56be9f6233b0c5fe7514ff1fb72ef19d5))\n* **Menu:** allow setting submenu position to left ([#2281](https://github.com/mondaycom/vibe/issues/2281)) ([3fc94c2](https://github.com/mondaycom/vibe/commit/3fc94c2c3559e6cb99d55975f802d36f09d7b6de))\n\n\n\n\n\n# [2.127.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.126.0...monday-ui-react-core@2.127.0) (2024-07-31)\n\n\n### Features\n\n* added placeholder to textarea ([#2293](https://github.com/mondaycom/vibe/issues/2293)) ([a6d6b6b](https://github.com/mondaycom/vibe/commit/a6d6b6b5d7ee45263de01e681c5df09b083dfd5b))\n\n\n\n\n\n# [2.126.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.125.0...monday-ui-react-core@2.126.0) (2024-07-30)\n\n\n### Bug Fixes\n\n* Revert \"use react-select version 4.3.1\" ([#2288](https://github.com/mondaycom/vibe/issues/2288)) ([b189494](https://github.com/mondaycom/vibe/commit/b18949456662c8f95ef9735af56cddd155178f43))\n\n\n### Features\n\n* add onClear prop to Search component ([#2272](https://github.com/mondaycom/vibe/issues/2272)) ([8a5ca3c](https://github.com/mondaycom/vibe/commit/8a5ca3c7e3878f259192f8b01e390af775590ba7))\n* **Search:** Add `onClear` prop+testing+story for `Search` ([#2276](https://github.com/mondaycom/vibe/issues/2276)) ([4366676](https://github.com/mondaycom/vibe/commit/436667663b69fa9ff11a17bd92e90e75d74711e9))\n\n\n\n\n\n# [2.125.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.124.1...monday-ui-react-core@2.125.0) (2024-07-25)\n\n\n### Bug Fixes\n\n* **Dropdown:** use same id to avoid breaking snapshots ([#2274](https://github.com/mondaycom/vibe/issues/2274)) ([d8f40af](https://github.com/mondaycom/vibe/commit/d8f40af18d585758ddcb2ffcd20b954d33246328))\n\n\n### Features\n\n* add `filterValue` prop to Combobox ([#2267](https://github.com/mondaycom/vibe/issues/2267)) ([fbaf5a3](https://github.com/mondaycom/vibe/commit/fbaf5a3c54b89f3482de68cf323593bdbfb84ad1))\n* add `searchInputRef` prop to Combobox ([#2266](https://github.com/mondaycom/vibe/issues/2266)) ([defc65c](https://github.com/mondaycom/vibe/commit/defc65c554968b9c4143f93a2731eefae4ac36a5))\n\n\n\n\n\n## [2.124.1](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.124.0...monday-ui-react-core@2.124.1) (2024-07-25)\n\n\n### Bug Fixes\n\n* replace nanoid ([#2268](https://github.com/mondaycom/vibe/issues/2268)) ([03f7b9a](https://github.com/mondaycom/vibe/commit/03f7b9a9742c70ad2422be93d251925fb23ad37f))\n\n\n\n\n\n# [2.124.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.123.3...monday-ui-react-core@2.124.0) (2024-07-24)\n\n\n### Bug Fixes\n\n* **dropdown:** fix blur border color ([#2257](https://github.com/mondaycom/vibe/issues/2257)) ([6e3d2de](https://github.com/mondaycom/vibe/commit/6e3d2deff17834279b1a59fa0c99c2e77b0a61d4))\n* **dropdown:** Fix ellipsis not to working for simple text dropdown ([#2255](https://github.com/mondaycom/vibe/issues/2255)) ([4094d73](https://github.com/mondaycom/vibe/commit/4094d73b33c2a9ae6be3a208c285f16c363ba073))\n* **Dropdown:** nanoid 4+ supports only ESM, we should still support CJS ([#2265](https://github.com/mondaycom/vibe/issues/2265)) ([e86625c](https://github.com/mondaycom/vibe/commit/e86625c82dfc4e4c03c499a86121ad00d432aecc))\n* **icon:** Allow icon to be focusable when not clickable ([#2217](https://github.com/mondaycom/vibe/issues/2217)) ([9788fac](https://github.com/mondaycom/vibe/commit/9788fac84064aede6d7f2855b4544cfbedacc51f))\n* **MenuButton:** show hide menu bug ([#2259](https://github.com/mondaycom/vibe/issues/2259)) ([6e7027c](https://github.com/mondaycom/vibe/commit/6e7027cf776a214dc8cb4a2ea418562b5433ba03))\n\n\n### Features\n\n* **textField:** Add option for tooltip on icon ([#2221](https://github.com/mondaycom/vibe/issues/2221)) ([cb27f3e](https://github.com/mondaycom/vibe/commit/cb27f3e7c4e89f95c701273cb0018825af0c68a3))\n\n\n\n\n\n## [2.123.3](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.123.2...monday-ui-react-core@2.123.3) (2024-07-23)\n\n\n### Bug Fixes\n\n* use NonceProvider for react-select to fix disappearing emotion stylesheet ([#2253](https://github.com/mondaycom/vibe/issues/2253)) ([6bb52c8](https://github.com/mondaycom/vibe/commit/6bb52c8c0e0c03dd34236aace0114417f9d221a9))\n\n\n\n\n\n## [2.123.2](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.123.1...monday-ui-react-core@2.123.2) (2024-07-22)\n\n\n### Bug Fixes\n\n* fix style linter ([#2254](https://github.com/mondaycom/vibe/issues/2254)) ([a15e32a](https://github.com/mondaycom/vibe/commit/a15e32a3f70e0c0c7176258fe8f109457bab971a))\n\n\n\n\n\n## [2.123.1](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.123.0...monday-ui-react-core@2.123.1) (2024-07-21)\n\n\n### Bug Fixes\n\n* **textWithHighlight:** Fix linesToClamp not working properly ([#2250](https://github.com/mondaycom/vibe/issues/2250)) ([17ac1ee](https://github.com/mondaycom/vibe/commit/17ac1eec4b2b6ad1aa15221d6411e207799c32f7))\n\n\n\n\n\n# [2.123.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.122.0...monday-ui-react-core@2.123.0) (2024-07-21)\n\n\n### Bug Fixes\n\n* **textWithHighlight:** Fix ellipsis when no breaks in string ([#2248](https://github.com/mondaycom/vibe/issues/2248)) ([e3f6bfb](https://github.com/mondaycom/vibe/commit/e3f6bfb8049d080375b319cd7744c2e307d6b900))\n\n\n### Features\n\n* **Menu:** add on focus to menu ([#2246](https://github.com/mondaycom/vibe/issues/2246)) ([2e5820e](https://github.com/mondaycom/vibe/commit/2e5820e6e0a6ea90be6fe16fb4c52f3b83757bd7))\n* **Toggle:** pass event as 2nd argument to allow working with react-hook-form ([#2243](https://github.com/mondaycom/vibe/issues/2243)) ([c4f09e1](https://github.com/mondaycom/vibe/commit/c4f09e1805830fd4824162351933cb046b40762d))\n\n\n\n\n\n# [2.122.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.121.0...monday-ui-react-core@2.122.0) (2024-07-18)\n\n\n### Features\n\n* **Baseline:** add new icon ([#2245](https://github.com/mondaycom/vibe/issues/2245)) ([0bd7424](https://github.com/mondaycom/vibe/commit/0bd7424498362f5f0c9a00eed7c4fb2ca4d86fc4))\n\n\n\n\n\n# [2.121.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.120.0...monday-ui-react-core@2.121.0) (2024-07-18)\n\n\n### Features\n\n* add experimental stroke instead of box-shadow for dark themes ([#2218](https://github.com/mondaycom/vibe/issues/2218)) ([3469767](https://github.com/mondaycom/vibe/commit/34697676a549f3a7ec43b948def3d12cc2c94c49))\n* **TextField:** send native event if applicable in onChange ([#2231](https://github.com/mondaycom/vibe/issues/2231)) ([35b1ea6](https://github.com/mondaycom/vibe/commit/35b1ea64d20aa037133b395c6963416057bf1dae))\n\n\n\n\n\n# [2.120.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.119.0...monday-ui-react-core@2.120.0) (2024-07-14)\n\n\n### Bug Fixes\n\n* **Combobox:** spacings in categories ([#2223](https://github.com/mondaycom/vibe/issues/2223)) ([1ffe75d](https://github.com/mondaycom/vibe/commit/1ffe75d6fee9bdeb240734f6c7a89664346f5797))\n\n\n### Features\n\n* **icons:** Add Item Height Double Icon ([#2227](https://github.com/mondaycom/vibe/issues/2227)) ([42b3f1f](https://github.com/mondaycom/vibe/commit/42b3f1f899528fbaa89d328eabcc4c6e13604c1f))\n* **icons:** Add Item Height Single Icon ([#2228](https://github.com/mondaycom/vibe/issues/2228)) ([32dc7c2](https://github.com/mondaycom/vibe/commit/32dc7c2c49715670d2e87d8095ee3830154cea20))\n* **icons:** Add Prompt icon ([#2222](https://github.com/mondaycom/vibe/issues/2222)) ([eeff132](https://github.com/mondaycom/vibe/commit/eeff13295730eef13f92c5d7d7f6ea95c361af9b))\n\n\n\n\n\n# [2.119.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.118.1...monday-ui-react-core@2.119.0) (2024-07-10)\n\n\n### Bug Fixes\n\n* **Table:** hover cell background var should be declared inside the table selector and not on :root ([#2219](https://github.com/mondaycom/vibe/issues/2219)) ([33b47ab](https://github.com/mondaycom/vibe/commit/33b47abe3b7707846f758c6bdf0efff42b9dfda8))\n\n\n### Features\n\n* **Combobox:** add debounceRate prop ([#2220](https://github.com/mondaycom/vibe/issues/2220)) ([a6053dd](https://github.com/mondaycom/vibe/commit/a6053dd36e80d1894f3bb42cad89c6d64beb780b))\n\n\n\n\n\n## [2.118.1](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.118.0...monday-ui-react-core@2.118.1) (2024-07-04)\n\n**Note:** Version bump only for package monday-ui-react-core\n\n\n\n\n\n# [2.118.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.117.0...monday-ui-react-core@2.118.0) (2024-07-03)\n\n\n### Features\n\n* **Table:** add Table menu capability for each row ([#2197](https://github.com/mondaycom/vibe/issues/2197)) ([dfd551c](https://github.com/mondaycom/vibe/commit/dfd551ca3ccc57cceeb56686f9103f2e90b223ff))\n\n\n\n\n\n# [2.117.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.116.0...monday-ui-react-core@2.117.0) (2024-07-02)\n\n\n### Bug Fixes\n\n* **ExpandCollapse:** component gets to 95% scale when active ([#2201](https://github.com/mondaycom/vibe/issues/2201)) ([58b14a6](https://github.com/mondaycom/vibe/commit/58b14a6908b2bdb72533e30518a0ce843ed20d10))\n* **Table:** sticky cell is seen-through when hovered ([#2198](https://github.com/mondaycom/vibe/issues/2198)) ([6ec1d61](https://github.com/mondaycom/vibe/commit/6ec1d6177a4d906bc1d28b92309c7363fd7c1134))\n\n\n### Features\n\n* **AccordionItem:** add option for onClick instead of onClickCapture ([#2203](https://github.com/mondaycom/vibe/issues/2203)) ([983b012](https://github.com/mondaycom/vibe/commit/983b01290a9fede5a39244a22e32e08e7043dec2))\n\n\n\n\n\n# [2.116.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.115.0...monday-ui-react-core@2.116.0) (2024-06-27)\n\n\n### Bug Fixes\n\n* **ToastLink:** hover color should inherit from link color ([#2193](https://github.com/mondaycom/vibe/issues/2193)) ([7ab5710](https://github.com/mondaycom/vibe/commit/7ab5710cc2ffc82376dd0a6df592d5c849ab17f6))\n\n\n### Features\n\n* **Table:** add sticky column capabilities ([#2172](https://github.com/mondaycom/vibe/issues/2172)) ([a79a28e](https://github.com/mondaycom/vibe/commit/a79a28ec0ed2ed8953ecc4ffce372fec3fa3b70b))\n\n\n\n\n\n# [2.115.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.114.0...monday-ui-react-core@2.115.0) (2024-06-26)\n\n\n### Features\n\n* **TextField:** add a controlled variant ([#2180](https://github.com/mondaycom/vibe/issues/2180)) ([67489b3](https://github.com/mondaycom/vibe/commit/67489b38de56ba44ed86deafc0ca49b7f72e050e))\n\n\n\n\n\n# [2.114.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.113.1...monday-ui-react-core@2.114.0) (2024-06-26)\n\n\n### Features\n\n* **react-select:** use react-select version 4.3.1 ([#2184](https://github.com/mondaycom/vibe/issues/2184)) ([c90b6dd](https://github.com/mondaycom/vibe/commit/c90b6dd7aa8fe1612d7feefb1dce224a9cb04222))\n* **TextArea:** be able to disable resize ([#2189](https://github.com/mondaycom/vibe/issues/2189)) ([9223c0a](https://github.com/mondaycom/vibe/commit/9223c0abd8828f8da34c70c7df7ec3c8204cebba))\n\n\n\n\n\n## [2.113.1](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.113.0...monday-ui-react-core@2.113.1) (2024-06-25)\n\n\n### Bug Fixes\n\n* **Button:** fix text placeholder dimensions in loading state ([#2187](https://github.com/mondaycom/vibe/issues/2187)) ([3a9c983](https://github.com/mondaycom/vibe/commit/3a9c983d1f35c9a49159ee1f93b1ccd41ecfbe00))\n* **link:** hover color should inherit from link color ([#2183](https://github.com/mondaycom/vibe/issues/2183)) ([60d6166](https://github.com/mondaycom/vibe/commit/60d61661ff3d520b15a40a95641adab092f2afb9))\n* **Dropdown:** Dropdown multi size \"small\" style and behavior is broken ([#2174](https://github.com/mondaycom/vibe/issues/2174)) ([91f02fb](https://github.com/mondaycom/vibe/commit/91f02fb04e70efe89b8a68b5c29723ab2f844254))\n\n\n\n\n\n# [2.113.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.112.0...monday-ui-react-core@2.113.0) (2024-06-11)\n\n\n### Bug Fixes\n\n* **useAfterFirstRender:** hook is currently behaving the opposite than its purpose ([#2168](https://github.com/mondaycom/vibe/issues/2168)) ([483bf9b](https://github.com/mondaycom/vibe/commit/483bf9b6f071a04a366bfaf8aaaddd2cf5d0b893))\n\n\n### Features\n\n* **toggle:** add small variant ([#2167](https://github.com/mondaycom/vibe/issues/2167)) ([6491d27](https://github.com/mondaycom/vibe/commit/6491d274f8d7d7617937dc8c9e87f899b68f4978))\n\n\n\n\n\n# [2.112.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.111.1...monday-ui-react-core@2.112.0) (2024-06-09)\n\n\n### Bug Fixes\n\n* **Table:** sync between body scroll and header scroll in virtualized state ([#2162](https://github.com/mondaycom/vibe/issues/2162)) ([d47f8f9](https://github.com/mondaycom/vibe/commit/d47f8f9c9b1930bae258d94641d0dcc9e07842b6))\n\n\n### Features\n\n* **icons:** Add Heart icon ([#2166](https://github.com/mondaycom/vibe/issues/2166)) ([896871b](https://github.com/mondaycom/vibe/commit/896871b9ab4c0f1340987f3379a767652fb41420))\n* **Modal:** unmount when hidden ([#2165](https://github.com/mondaycom/vibe/issues/2165)) ([d5ba05c](https://github.com/mondaycom/vibe/commit/d5ba05c9d8f88ed94d849090b90d874c4a7f8253))\n* **Table:** apply vibe component props in TableVirtualizedBody ([#2163](https://github.com/mondaycom/vibe/issues/2163)) ([2a4238e](https://github.com/mondaycom/vibe/commit/2a4238e605f2a19257b7afe3af44ffc9418b4441))\n\n\n\n\n\n## [2.111.1](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.111.0...monday-ui-react-core@2.111.1) (2024-06-03)\n\n\n### Bug Fixes\n\n* **ResponsiveList:** add static props for backwards ([#2161](https://github.com/mondaycom/vibe/issues/2161)) ([209d6d4](https://github.com/mondaycom/vibe/commit/209d6d492cd7d96b7bbf6cd2fb9d45ebb6ebdf0d))\n\n\n\n\n\n# [2.111.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.110.0...monday-ui-react-core@2.111.0) (2024-06-02)\n\n\n### Bug Fixes\n\n* **colors:** align dark orange to a11y requirments ([#2155](https://github.com/mondaycom/vibe/issues/2155)) ([68901cc](https://github.com/mondaycom/vibe/commit/68901cc3bfc881822fc57ca95cc94fe50d55b844))\n* export next components types ([#2158](https://github.com/mondaycom/vibe/issues/2158)) ([25505f7](https://github.com/mondaycom/vibe/commit/25505f73be0d25cfc961e66bd127f7efb1c17ee8))\n\n\n### Features\n\n* **AvatarGroup:** add disabled state ([#2126](https://github.com/mondaycom/vibe/issues/2126)) ([cf65f6b](https://github.com/mondaycom/vibe/commit/cf65f6ba005107247cc2cf45d618d95ae6103c68))\n* **Box:** add style prop ([#2149](https://github.com/mondaycom/vibe/issues/2149)) ([87c987d](https://github.com/mondaycom/vibe/commit/87c987d16767396583972b59392c75a25fb90fa5))\n* export component types ([#2153](https://github.com/mondaycom/vibe/issues/2153)) ([18b9f51](https://github.com/mondaycom/vibe/commit/18b9f5100a73d8cda4cb60b11188544c608f7e64))\n\n\n\n\n\n# [2.110.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.109.1...monday-ui-react-core@2.110.0) (2024-05-28)\n\n\n### Bug Fixes\n\n* **Checkbox storybook:** story is using Link from storybook-blocks ([#2137](https://github.com/mondaycom/vibe/issues/2137)) ([70fc17d](https://github.com/mondaycom/vibe/commit/70fc17d62973d7ccc55a0ec64ad68680471a3b1a))\n\n\n### Features\n\n* Ignore classes in useClickOutside hook ([#2135](https://github.com/mondaycom/vibe/issues/2135)) ([ea42d2b](https://github.com/mondaycom/vibe/commit/ea42d2b0d964166d74b990be0fdd82266539155e))\n\n\n\n\n\n## [2.109.1](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.109.0...monday-ui-react-core@2.109.1) (2024-05-26)\n\n\n### Bug Fixes\n\n* **SplitButton storybook:** - fix stories that use wrong prop ([#2138](https://github.com/mondaycom/vibe/issues/2138)) ([5f9c0a4](https://github.com/mondaycom/vibe/commit/5f9c0a44c3075cf3346ba84f1c29fb542e6bae7f))\n\n\n\n\n\n# [2.109.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.108.3...monday-ui-react-core@2.109.0) (2024-05-21)\n\n\n### Bug Fixes\n\n* **Dropdown:** migrate to TS continue ([#2109](https://github.com/mondaycom/vibe/issues/2109)) ([a7a51ad](https://github.com/mondaycom/vibe/commit/a7a51ada6400b045c831978e3d5d419c35e0a8b1))\n* **TextArea:** add background color and text for dark mode ([#2130](https://github.com/mondaycom/vibe/issues/2130)) ([8d6a84c](https://github.com/mondaycom/vibe/commit/8d6a84ce884b3f3b37309015583bae9533304fc8))\n\n\n### Features\n\n* **label:** add small variant ([#2121](https://github.com/mondaycom/vibe/issues/2121)) ([2ca6562](https://github.com/mondaycom/vibe/commit/2ca65624abb07c88fde5e758a47c7e6c4e62b60f))\n* **withLiveEdit:** add actions for copy, format, and reset at the bottom of the live editor ([#2123](https://github.com/mondaycom/vibe/issues/2123)) ([f384d7c](https://github.com/mondaycom/vibe/commit/f384d7c95fe4e9bf65a5c590b1fbb0082c869eee))\n\n\n\n\n\n## [2.108.3](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.108.2...monday-ui-react-core@2.108.3) (2024-05-16)\n\n\n### Bug Fixes\n\n* **Dialog.tsx:** getContainer causing react error 200 ([#2124](https://github.com/mondaycom/vibe/issues/2124)) ([b018467](https://github.com/mondaycom/vibe/commit/b018467b43f648372f8cee3d2b7eb4c2c875287b))\n\n\n\n\n\n## [2.108.2](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.108.1...monday-ui-react-core@2.108.2) (2024-05-16)\n\n\n### Bug Fixes\n\n* **AlertBanner:** replace Button & Icon with IconButton ([#2120](https://github.com/mondaycom/vibe/issues/2120)) ([ee2d11c](https://github.com/mondaycom/vibe/commit/ee2d11cbb64d94a837e3b902e9eb1d1724c69cde))\n* **Storybook Docs:** typo ([#2119](https://github.com/mondaycom/vibe/issues/2119)) ([25ff8fb](https://github.com/mondaycom/vibe/commit/25ff8fbbea1d221c45dc69102b5d965b888d09da))\n* **TabsContext:** use onTabChange from child props ([#2125](https://github.com/mondaycom/vibe/issues/2125)) ([11bbddf](https://github.com/mondaycom/vibe/commit/11bbddf748a80bbebd246f5e8d3dd2bd96bd09ab))\n* **Typography:** change tooltipProps type to Partial< TooltipProps > ([#2118](https://github.com/mondaycom/vibe/issues/2118)) ([707c5c3](https://github.com/mondaycom/vibe/commit/707c5c31372c1cbb9e3bd8e8fcfefea91ab0088f))\n* **Typography:** make anchor style apply only to direct child ([#2115](https://github.com/mondaycom/vibe/issues/2115)) ([337975b](https://github.com/mondaycom/vibe/commit/337975b97de2120ed52b70a99ceaddb208015bbe))\n\n\n\n\n\n## [2.108.1](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.108.0...monday-ui-react-core@2.108.1) (2024-05-09)\n\n\n### Bug Fixes\n\n* **TextWIthHighlight:** escape regex ([#2113](https://github.com/mondaycom/vibe/issues/2113)) ([a980976](https://github.com/mondaycom/vibe/commit/a98097672abd405cccc8b5e07c0b10d7861c700a))\n\n\n\n\n\n# [2.108.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.107.0...monday-ui-react-core@2.108.0) (2024-05-07)\n\n\n### Bug Fixes\n\n* add null protection for onPickDate callback ([#2045](https://github.com/mondaycom/vibe/issues/2045)) ([#2102](https://github.com/mondaycom/vibe/issues/2102)) ([272ac89](https://github.com/mondaycom/vibe/commit/272ac893832b39a366ed851b98a9e92519d17b2f))\n* **MenuItem:** disabled item should not show its submenu ([#2099](https://github.com/mondaycom/vibe/issues/2099)) ([8513ba9](https://github.com/mondaycom/vibe/commit/8513ba9106a3bf259a956cf35ba85a2a2927013e))\n\n\n### Features\n\n* add a11y props for `search` and `combobox` components ([#2105](https://github.com/mondaycom/vibe/issues/2105)) ([b564e1b](https://github.com/mondaycom/vibe/commit/b564e1ba276cf57c03c448ee5989bc30bcc46b62))\n\n\n\n\n\n# [2.107.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.106.1...monday-ui-react-core@2.107.0) (2024-05-01)\n\n\n### Features\n\n* **Search:** adds hideRenderActionOnInput option ([#2098](https://github.com/mondaycom/vibe/issues/2098)) ([fdc8c21](https://github.com/mondaycom/vibe/commit/fdc8c217b19a6917f2112e4124407316b91546f9))\n\n\n\n\n\n## [2.106.1](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.106.0...monday-ui-react-core@2.106.1) (2024-05-01)\n\n**Note:** Version bump only for package monday-ui-react-core\n\n\n\n\n\n# [2.106.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.105.1...monday-ui-react-core@2.106.0) (2024-04-30)\n\n\n### Features\n\n* **Button:** add active-hover state to buttons ([#2076](https://github.com/mondaycom/vibe/issues/2076)) ([9976fa0](https://github.com/mondaycom/vibe/commit/9976fa06621b23770a3b46a801fd12fc0de7a639))\n* **Dialog:** add event args to dialog show methods ([#2092](https://github.com/mondaycom/vibe/issues/2092)) ([352a48a](https://github.com/mondaycom/vibe/commit/352a48a752a889925ca0b4e7de1adf36aa0ce989))\n\n\n\n\n\n## [2.105.1](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.105.0...monday-ui-react-core@2.105.1) (2024-04-24)\n\n\n### Bug Fixes\n\n* export Search from next ([#2088](https://github.com/mondaycom/vibe/issues/2088)) ([a0d56d3](https://github.com/mondaycom/vibe/commit/a0d56d3704d2eeaa704a6b4e0743111cdd9e4537))\n\n\n\n\n\n# [2.105.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.104.0...monday-ui-react-core@2.105.0) (2024-04-24)\n\n\n### Bug Fixes\n\n* **Dialog:** prevent default for contextmenu event ([#2087](https://github.com/mondaycom/vibe/issues/2087)) ([483c47f](https://github.com/mondaycom/vibe/commit/483c47fe26363ba54fa4fd4a1953c7cbcbac00a2))\n* increase specificity ([#2074](https://github.com/mondaycom/vibe/issues/2074)) ([f8e18cc](https://github.com/mondaycom/vibe/commit/f8e18cccbe95cb91c6616363074719ce82b6d5e6))\n\n\n### Features\n\n* **withLiveEdit:** apply decorators from within self CSF module of a story ([#2077](https://github.com/mondaycom/vibe/issues/2077)) ([6b1e520](https://github.com/mondaycom/vibe/commit/6b1e5200bd6e2cf8587aec80be78a2f76d2a3808))\n* **withLiveEdit:** parse render attribute with ast instead of with regex for variety of cases ([#2078](https://github.com/mondaycom/vibe/issues/2078)) ([57ad30d](https://github.com/mondaycom/vibe/commit/57ad30d631f97ca055d2397edb12df21ae981ac0))\n\n\n\n\n\n# [2.104.0](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.103.1...monday-ui-react-core@2.104.0) (2024-04-18)\n\n\n### Bug Fixes\n\n* **ExpandCollapse:** remove no-longer-needed css scale workaround ([#2071](https://github.com/mondaycom/monday-ui-react-core/issues/2071)) ([f3a8144](https://github.com/mondaycom/monday-ui-react-core/commit/f3a8144dbb0ce6b1e836470e1283f92f1c8eb3c4))\n\n\n### Features\n\n* migrate usages of LegacySearch to new Search ([#2067](https://github.com/mondaycom/monday-ui-react-core/issues/2067)) ([3e8ac10](https://github.com/mondaycom/monday-ui-react-core/commit/3e8ac10c8183fc638d1159a986bb115c7f0deeb3))\n* **Search:** new Search component ([#2064](https://github.com/mondaycom/monday-ui-react-core/issues/2064)) ([489a374](https://github.com/mondaycom/monday-ui-react-core/commit/489a374f1ac5afaada75d6d514333c9e5846d52a))\n* **Text:** Add new 12px font size (Text3) ([#2072](https://github.com/mondaycom/monday-ui-react-core/issues/2072)) ([cd4af2f](https://github.com/mondaycom/monday-ui-react-core/commit/cd4af2fd3a3443197234a608e9b6460fce80b488))\n\n\n\n\n\n## [2.103.1](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.103.0...monday-ui-react-core@2.103.1) (2024-04-15)\n\n\n### Bug Fixes\n\n* **Dialog:** add onContextMenu to dialog's show trigger ([#2065](https://github.com/mondaycom/monday-ui-react-core/issues/2065)) ([663d056](https://github.com/mondaycom/monday-ui-react-core/commit/663d056f432d0e7e9005e8a9106a39fd04ae13e0))\n\n\n\n\n\n# [2.103.0](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.102.0...monday-ui-react-core@2.103.0) (2024-04-15)\n\n\n### Features\n\n* Dropdown and TextFeild accessibility improvements ([#1898](https://github.com/mondaycom/monday-ui-react-core/issues/1898)) ([de99f06](https://github.com/mondaycom/monday-ui-react-core/commit/de99f06b472b350cba6f43d960505f430769fb9e))\n\n\n\n\n\n# [2.102.0](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.101.0...monday-ui-react-core@2.102.0) (2024-04-11)\n\n\n### Features\n\n* add autoFocus to CheckBox ([#2059](https://github.com/mondaycom/monday-ui-react-core/issues/2059)) ([cd26e7c](https://github.com/mondaycom/monday-ui-react-core/commit/cd26e7cf7b666da211efc7dd7af4f58a25a1b7a0))\n\n\n\n\n\n# [2.101.0](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.100.1...monday-ui-react-core@2.101.0) (2024-04-10)\n\n\n### Bug Fixes\n\n* **DatePicker:** added min width to buttons inside year picker ([#2050](https://github.com/mondaycom/monday-ui-react-core/issues/2050)) ([7c35041](https://github.com/mondaycom/monday-ui-react-core/commit/7c35041363e880667899df8f033b117058be3a25))\n\n\n### Features\n\n* add autoFocus to RadioButton ([#2057](https://github.com/mondaycom/monday-ui-react-core/issues/2057)) ([d40b49e](https://github.com/mondaycom/monday-ui-react-core/commit/d40b49efc63fe943a71bf9ba643b513cf5f66d97))\n\n\n\n\n\n## [2.100.1](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.100.0...monday-ui-react-core@2.100.1) (2024-04-07)\n\n\n### Bug Fixes\n\n* **Label:** changes selectors ([#2051](https://github.com/mondaycom/monday-ui-react-core/issues/2051)) ([a504ce9](https://github.com/mondaycom/monday-ui-react-core/commit/a504ce99f876275757ebb58563c1c81c33e06949))\n\n\n\n\n\n# [2.100.0](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.99.0...monday-ui-react-core@2.100.0) (2024-04-03)\n\n\n### Features\n\n* **Label:** celebration animation ([#2032](https://github.com/mondaycom/monday-ui-react-core/issues/2032)) ([1af527c](https://github.com/mondaycom/monday-ui-react-core/commit/1af527cce8dad30fdf81fb7c3c0b805de4097910))\n* **Tooltip:** Rich tooltip ([#2040](https://github.com/mondaycom/monday-ui-react-core/issues/2040)) ([dc0c470](https://github.com/mondaycom/monday-ui-react-core/commit/dc0c470b23e38f93007c1518fc6cc3b07e913d47))\n\n\n\n\n\n# [2.99.0](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.98.4...monday-ui-react-core@2.99.0) (2024-03-25)\n\n\n### Features\n\n* **IconButton:** loading state ([#2029](https://github.com/mondaycom/monday-ui-react-core/issues/2029)) ([a38dd2b](https://github.com/mondaycom/monday-ui-react-core/commit/a38dd2b3d1af515ca51859b7e2e7915b11fc1d89))\n\n\n\n\n\n## [2.98.4](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.98.3...monday-ui-react-core@2.98.4) (2024-03-25)\n\n**Note:** Version bump only for package monday-ui-react-core\n\n\n\n\n\n## [2.98.3](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.98.2...monday-ui-react-core@2.98.3) (2024-03-24)\n\n\n### Bug Fixes\n\n* **MultiStepIndicator:** nest divider style ([#2036](https://github.com/mondaycom/monday-ui-react-core/issues/2036)) ([2faf7e4](https://github.com/mondaycom/monday-ui-react-core/commit/2faf7e4413894e7a0739526636585353f62105ac))\n\n\n\n\n\n## [2.98.2](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.98.1...monday-ui-react-core@2.98.2) (2024-03-21)\n\n\n### Bug Fixes\n\n* all elements inside an app that consumes vibe had button with active state that turns to 0.95 scale on active pseudo state ([#2031](https://github.com/mondaycom/monday-ui-react-core/issues/2031)) ([1b6e92a](https://github.com/mondaycom/monday-ui-react-core/commit/1b6e92aab423df632c5fe178a57ddc093e1626f3))\n\n\n\n\n\n## [2.98.1](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.98.0...monday-ui-react-core@2.98.1) (2024-03-20)\n\n\n### Bug Fixes\n\n* **MenuButton:** call `onMenuHide` on all cases where menu is closed ([#2027](https://github.com/mondaycom/monday-ui-react-core/issues/2027)) ([1c80b4c](https://github.com/mondaycom/monday-ui-react-core/commit/1c80b4cb149e303c47fa2f4efe58541d3c209859))\n\n\n\n\n\n# [2.98.0](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.97.0...monday-ui-react-core@2.98.0) (2024-03-19)\n\n\n### Bug Fixes\n\n* **EditableTypography:** fix specificity issues when changing types a… ([#2028](https://github.com/mondaycom/monday-ui-react-core/issues/2028)) ([bebcdbd](https://github.com/mondaycom/monday-ui-react-core/commit/bebcdbd1dd82cc381988f7c84d6f97686357471b))\n\n\n### Features\n\n* changed proptype from `string`/`IconSubComponentProps` to `SubIcon` ([#2026](https://github.com/mondaycom/monday-ui-react-core/issues/2026)) ([f30ab8a](https://github.com/mondaycom/monday-ui-react-core/commit/f30ab8a702bff73b0fb05a67891470a3e915493f))\n\n\n\n\n\n## [2.97.2](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.97.1...monday-ui-react-core@2.97.2) (2024-03-19)\n\n\n### Bug Fixes\n\n* **EditableTypography:** fix specificity issues when changing types a… ([#2028](https://github.com/mondaycom/monday-ui-react-core/issues/2028)) ([bebcdbd](https://github.com/mondaycom/monday-ui-react-core/commit/bebcdbd1dd82cc381988f7c84d6f97686357471b))\n\n\n\n\n\n## [2.97.1](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.97.0...monday-ui-react-core@2.97.1) (2024-03-19)\n\n**Note:** Version bump only for package monday-ui-react-core\n\n\n\n\n\n# [2.97.0](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.96.1...monday-ui-react-core@2.97.0) (2024-03-18)\n\n\n### Features\n\n* **Modal:** make data-testid optional ([#2024](https://github.com/mondaycom/monday-ui-react-core/issues/2024)) ([590c7ce](https://github.com/mondaycom/monday-ui-react-core/commit/590c7ce2debe8281bef057d914830472b0482b3a))\n\n\n\n\n\n## [2.96.1](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.96.0...monday-ui-react-core@2.96.1) (2024-03-18)\n\n\n### Bug Fixes\n\n* **Combobox:** clear selected option when query changes ([#2020](https://github.com/mondaycom/monday-ui-react-core/issues/2020)) ([fe83d89](https://github.com/mondaycom/monday-ui-react-core/commit/fe83d89136c882d5d7e39b6272f6dc60b06c75c0))\n\n\n\n\n\n# [2.96.0](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.95.0...monday-ui-react-core@2.96.0) (2024-03-13)\n\n\n### Features\n\n* Add inverted variant to Tipseen and Steps ([#1995](https://github.com/mondaycom/monday-ui-react-core/issues/1995)) ([6e4bbb4](https://github.com/mondaycom/monday-ui-react-core/commit/6e4bbb42c51b36f4a15c438bee011f7edf9e88be))\n* Align vibe's colors to new a11y based colors ([#2009](https://github.com/mondaycom/monday-ui-react-core/issues/2009)) ([6c6e156](https://github.com/mondaycom/monday-ui-react-core/commit/6c6e156b875d06a17ba4697c92cfcdf7dba4d020))\n* **ModalFooterButtons:** support disable buttons and remove secondary ([#2016](https://github.com/mondaycom/monday-ui-react-core/issues/2016)) ([41d2a99](https://github.com/mondaycom/monday-ui-react-core/commit/41d2a991bc10ce1bc43627bb292459f29b31ee83))\n\n\n\n\n\n# [2.95.0](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.94.0...monday-ui-react-core@2.95.0) (2024-03-12)\n\n\n### Features\n\n* **AvatarGroupCounter:** pass noAnimation prop ([#2010](https://github.com/mondaycom/monday-ui-react-core/issues/2010)) ([048b163](https://github.com/mondaycom/monday-ui-react-core/commit/048b1639fe6f648450802889624d876c181fc12f))\n* **Table:** new sort behavior ([#1935](https://github.com/mondaycom/monday-ui-react-core/issues/1935)) ([32790f4](https://github.com/mondaycom/monday-ui-react-core/commit/32790f4309daf9bd38c9eeb62e6b11cbd52baea0))\n\n\n\n\n\n# [2.94.0](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.93.0...monday-ui-react-core@2.94.0) (2024-03-05)\n\n\n### Bug Fixes\n\n* **TableHeaderCell:** change hover color ([#1888](https://github.com/mondaycom/monday-ui-react-core/issues/1888)) ([c057a2e](https://github.com/mondaycom/monday-ui-react-core/commit/c057a2e83d2d3fb62c05e29ab768f44a77045fe9))\n\n\n### Features\n\n* **Flex:** new align's value - baseline ([#1989](https://github.com/mondaycom/monday-ui-react-core/issues/1989)) ([224be04](https://github.com/mondaycom/monday-ui-react-core/commit/224be042e0265740d174f995e290f3cefa36ed1b))\n\n\n\n\n\n# [2.93.0](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.92.9...monday-ui-react-core@2.93.0) (2024-02-28)\n\n\n### Features\n\n* **button:** add inverted color to button ([#1981](https://github.com/mondaycom/monday-ui-react-core/issues/1981)) ([9363000](https://github.com/mondaycom/monday-ui-react-core/commit/9363000ab926ba7c55860c00ceb4abcdeef1c04c))\n* **colors:** add --primary-highlighted-color token ([#1986](https://github.com/mondaycom/monday-ui-react-core/issues/1986)) ([1207a4a](https://github.com/mondaycom/monday-ui-react-core/commit/1207a4a7bac5d00b90dcd0792396e0c82df7131c))\n\n\n\n\n\n## [2.92.9](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.92.8...monday-ui-react-core@2.92.9) (2024-02-19)\n\n\n### Bug Fixes\n\n* **EditableTypography:** react to value prop change ([#1971](https://github.com/mondaycom/monday-ui-react-core/issues/1971)) ([de17685](https://github.com/mondaycom/monday-ui-react-core/commit/de176855d4d6578549012225541de9c4d12015e4))\n* **Tipseen:** add gap between title and close button ([#1972](https://github.com/mondaycom/monday-ui-react-core/issues/1972)) ([b0ceea2](https://github.com/mondaycom/monday-ui-react-core/commit/b0ceea2a52ef53d267ad68ba0e8104bfa4186388))\n\n\n\n\n\n## [2.92.8](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.92.7...monday-ui-react-core@2.92.8) (2024-02-18)\n\n\n### Bug Fixes\n\n* **AlertBanner:** fix children type ([#1968](https://github.com/mondaycom/monday-ui-react-core/issues/1968)) ([cf4845d](https://github.com/mondaycom/monday-ui-react-core/commit/cf4845d00e6caf85cfba45b6dd4823fdd9c19452))\n\n\n\n\n\n## [2.92.7](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.92.6...monday-ui-react-core@2.92.7) (2024-02-14)\n\n\n### Bug Fixes\n\n* fix build in release ([#1965](https://github.com/mondaycom/monday-ui-react-core/issues/1965)) ([8177d9a](https://github.com/mondaycom/monday-ui-react-core/commit/8177d9a799c4fb469316f4cdeefc15250eea4c61))\n\n\n\n\n\n## [2.92.6](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.92.5...monday-ui-react-core@2.92.6) (2024-02-14)\n\n\n### Bug Fixes\n\n* release ([#1963](https://github.com/mondaycom/monday-ui-react-core/issues/1963)) ([1817e5a](https://github.com/mondaycom/monday-ui-react-core/commit/1817e5a663f00b000e547f2f5d5aabbb5c25cd15))\n\n\n\n\n\n## [2.92.5](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.92.1...monday-ui-react-core@2.92.5) (2024-02-14)\n\n**Note:** Version bump only for package monday-ui-react-core\n\n\n\n\n\n## [2.92.4](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.92.3...monday-ui-react-core@2.92.4) (2024-02-14)\n\n\n### Bug Fixes\n\n* remove redundant class ([c4bf0bb](https://github.com/mondaycom/monday-ui-react-core/commit/c4bf0bb6d34f5c3d75801b765677966ad5f3983a))\n\n\n\n\n\n## [2.92.3](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.92.1...monday-ui-react-core@2.92.3) (2024-02-14)\n\n**Note:** Version bump only for package monday-ui-react-core\n\n\n\n\n\n## [2.92.2](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.92.1...monday-ui-react-core@2.92.2) (2024-02-13)\n\n**Note:** Version bump only for package monday-ui-react-core\n\n\n\n\n\n## 2.92.1 (2024-02-13)\n\n\n### Bug Fixes\n\n* fix rollup build ([#1954](https://github.com/mondaycom/monday-ui-react-core/issues/1954)) ([3c17759](https://github.com/mondaycom/monday-ui-react-core/commit/3c17759053b0324bc816bb581a69b0fe4ae83278))\n\n\n\n\n\n# 2.92.0 (2024-02-12)\n\n\n### Features\n\n* **core:** prettier ([34969a0](https://github.com/mondaycom/monday-ui-react-core/commit/34969a0d3b3e6176e4b5298e816454cafb5a0af5))\n\n\n\n\n\n## 2.91.1 (2024-02-12)\n\n**Note:** Version bump only for package monday-ui-react-core\n\n\n\n\n\n## 2.91.1 (2024-02-12)\n\n**Note:** Version bump only for package monday-ui-react-core\n\n\n\n\n\n# Changelog\n\n## 2.91.0 (2024-02-11)\n\n#### Bug Fixes\n* [#1939](https://github.com/mondaycom/monday-ui-react-core/pull/1939) fix(MenuItem): change condition of ariaLabel ([@talkor](https://github.com/talkor))\n\n#### New Features\n* [#1940](https://github.com/mondaycom/monday-ui-react-core/pull/1940) feat(Badge): remove border on OUTSIDE alignment, remove translate on OUTSIDE alignment ([@YossiSaadi](https://github.com/YossiSaadi))\n* [#1938](https://github.com/mondaycom/monday-ui-react-core/pull/1938) feat(MenuItem): be able to provide a component to title ([@talkor](https://github.com/talkor))\n\n#### New Icons\n* [#1941](https://github.com/mondaycom/monday-ui-react-core/pull/1941) Update icons - monday-ui-style 0.1.210 ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 2.90.3 (2024-02-07)\n\n#### Bug Fixes\n* [#1934](https://github.com/mondaycom/monday-ui-react-core/pull/1934) fix(TableVirtualizedBody): handle empty state when no items or items is an empty array ([@YossiSaadi](https://github.com/YossiSaadi))\n\n## 2.90.2 (2024-02-07)\n\n#### Bug Fixes\n* [#1933](https://github.com/mondaycom/monday-ui-react-core/pull/1933) fix(TextField): avoid failing to cleanup on unmount, avoid inputRef is undefined ([@YossiSaadi](https://github.com/YossiSaadi))\n\n## 2.90.1 (2024-02-07)\n\n#### Bug Fixes\n* [#1932](https://github.com/mondaycom/monday-ui-react-core/pull/1932) fix(EditableTypography): should call onChange with empty string when placeholder is used ([@YossiSaadi](https://github.com/YossiSaadi))\n\n## 2.90.0 (2024-02-06)\n\n#### Bug Fixes\n* [#1930](https://github.com/mondaycom/monday-ui-react-core/pull/1930) fix(MenuButton): fix component type ([@talkor](https://github.com/talkor))\n\n#### New Features\n* [#1931](https://github.com/mondaycom/monday-ui-react-core/pull/1931) feat(EditableTypography): send onEditModeChange when entering edit mode ([@YossiSaadi](https://github.com/YossiSaadi))\n\n## 2.89.0 (2024-02-05)\n\n#### Bug Fixes\n* [#1927](https://github.com/mondaycom/monday-ui-react-core/pull/1927) fix(Dropdown): prevent shrink of ChildrenContent ([@talkor](https://github.com/talkor))\n* [#1922](https://github.com/mondaycom/monday-ui-react-core/pull/1922) fix(MenuButton): tooltip should only appear on trigger element hover, not on dialog hover ([@YossiSaadi](https://github.com/YossiSaadi))\n\n#### New Features\n* [#1928](https://github.com/mondaycom/monday-ui-react-core/pull/1928) feat(Label): support ellipsis ([@YossiSaadi](https://github.com/YossiSaadi))\n\n## 2.88.0 (2024-02-05)\n\n#### Bug Fixes\n* [#1925](https://github.com/mondaycom/monday-ui-react-core/pull/1925) fix(Avatar): changed medium avatar size ([@shaharzil](https://github.com/shaharzil))\n\n#### New Features\n* [#1921](https://github.com/mondaycom/monday-ui-react-core/pull/1921) feat(EditableText): show placeholder when empty ([@talkor](https://github.com/talkor))\n* [#1926](https://github.com/mondaycom/monday-ui-react-core/pull/1926) feat(Dropdown): add withReadOnlyStyle prop ([@talkor](https://github.com/talkor))\n* [#1924](https://github.com/mondaycom/monday-ui-react-core/pull/1924) feat(TextField): add withReadOnlyStyle prop ([@talkor](https://github.com/talkor))\n\n## 2.87.0 (2024-01-29)\n\n#### New Features\n* [#1869](https://github.com/mondaycom/monday-ui-react-core/pull/1869) feat!: <ThemeProvider> add wrapping div (!), rename theme prop to themeConfig ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1852](https://github.com/mondaycom/monday-ui-react-core/pull/1852) feat: <ThemeProvider> add systemTheme prop - adds className to body ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.86.2 (2024-01-29)\n\n#### Bug Fixes\n* [#1914](https://github.com/mondaycom/monday-ui-react-core/pull/1914) fix(MenuItem): tooltip should on all item and not only on title ([@YossiSaadi](https://github.com/YossiSaadi))\n\n## 2.86.1 (2024-01-29)\n\n#### Bug Fixes\n* [#1904](https://github.com/mondaycom/monday-ui-react-core/pull/1904) fix(MenuItem): split menu items does not open sub-menu when navigating directly between two split menus ([@YuliaGold](https://github.com/YuliaGold))\n* [#1912](https://github.com/mondaycom/monday-ui-react-core/pull/1912) fix(MenuButton): fix dialog close behavior ([@talkor](https://github.com/talkor))\n\n#### Internal Changes\n* [#1913](https://github.com/mondaycom/monday-ui-react-core/pull/1913) chore: add issue template form ([@talkor](https://github.com/talkor))\n\n## 2.86.0 (2024-01-25)\n\n#### Bug Fixes\n* [#1919](https://github.com/mondaycom/monday-ui-react-core/pull/1919) fix: fix animation for menu with editable typography ([@shaharzil](https://github.com/shaharzil))\n\n#### New Features\n* [#1918](https://github.com/mondaycom/monday-ui-react-core/pull/1918) feat: add tel TextFieldTextType ([@or-nuri-monday](https://github.com/or-nuri-monday))\n* [#1917](https://github.com/mondaycom/monday-ui-react-core/pull/1917) feat: add URL TextFieldTextType ([@or-nuri-monday](https://github.com/or-nuri-monday))\n* [#1916](https://github.com/mondaycom/monday-ui-react-core/pull/1916) feat: add email TextFieldTextType ([@or-nuri-monday](https://github.com/or-nuri-monday))\n\n## 2.85.0 (2024-01-25)\n\n#### New Features\n* [#1915](https://github.com/mondaycom/monday-ui-react-core/pull/1915) feat(TabList): add opt-out for default padding ([@YossiSaadi](https://github.com/YossiSaadi))\n\n## 2.84.1 (2024-01-21)\n\n#### Bug Fixes\n* [#1910](https://github.com/mondaycom/monday-ui-react-core/pull/1910) fix(EditableTypography): don't spread tooltipProps ([@talkor](https://github.com/talkor))\n\n## 2.84.0 (2024-01-21)\n\n#### Bug Fixes\n* [#1909](https://github.com/mondaycom/monday-ui-react-core/pull/1909) fix(TableVirtualized): support row height ([@talkor](https://github.com/talkor))\n\n#### New Features\n* [#1908](https://github.com/mondaycom/monday-ui-react-core/pull/1908) feat(TableVirtualizedBody): pass onScroll event ([@talkor](https://github.com/talkor))\n* [#1907](https://github.com/mondaycom/monday-ui-react-core/pull/1907) feat: add tooltip props to components ([@talkor](https://github.com/talkor))\n\n#### Documentation\n* [#1905](https://github.com/mondaycom/monday-ui-react-core/pull/1905) docs: Realated components fixes - editable text and menu button titles ([@shaharzil](https://github.com/shaharzil))\n\n#### Internal Changes\n* [#1903](https://github.com/mondaycom/monday-ui-react-core/pull/1903) chore: add codeowners ([@talkor](https://github.com/talkor))\n\n#### New Icons\n* [#1906](https://github.com/mondaycom/monday-ui-react-core/pull/1906) feat(Icons): add Translation icon ([@talkor](https://github.com/talkor))\n\n## 2.83.0 (2024-01-18)\n\n#### New Features\n* [#1901](https://github.com/mondaycom/monday-ui-react-core/pull/1901) feat: add tooltip props ([@talkor](https://github.com/talkor))\n\n#### Internal Changes\n* [#1900](https://github.com/mondaycom/monday-ui-react-core/pull/1900) chore(chromatic): add a command to run chromatic locally ([@YossiSaadi](https://github.com/YossiSaadi))\n\n## 2.82.1 (2024-01-18)\n\n#### Documentation\n* [#1899](https://github.com/mondaycom/monday-ui-react-core/pull/1899) chore: update Playground addon ([@YossiSaadi](https://github.com/YossiSaadi))\n\n#### Internal Changes\n* [#1895](https://github.com/mondaycom/monday-ui-react-core/pull/1895) chore: update Playground addon ([@YossiSaadi](https://github.com/YossiSaadi))\n\n## 2.82.0 (2024-01-16)\n\n#### New Features\n* [#1893](https://github.com/mondaycom/monday-ui-react-core/pull/1893) feat(AvatarBadge): add an icon prop ([@talkor](https://github.com/talkor))\n\n## 2.81.0 (2024-01-15)\n\n#### New Features\n* [#1890](https://github.com/mondaycom/monday-ui-react-core/pull/1890) feat(AttentionBoxLink): use link component ([@talkor](https://github.com/talkor))\n\n## 2.80.2 (2024-01-14)\n\n#### Bug Fixes\n* [#1891](https://github.com/mondaycom/monday-ui-react-core/pull/1891) fix(TableVirtualizedBody): take height of header into consideration ([@talkor](https://github.com/talkor))\n* [#1887](https://github.com/mondaycom/monday-ui-react-core/pull/1887) fix: replace primary-background-hover color in non-hover ([@talkor](https://github.com/talkor))\n* [#1882](https://github.com/mondaycom/monday-ui-react-core/pull/1882) fix(TableCellSkeleton): circle and rectangle loading types are broken (have width 0) ([@YossiSaadi](https://github.com/YossiSaadi))\n\n#### Documentation\n* [#1892](https://github.com/mondaycom/monday-ui-react-core/pull/1892) docs: add virtualized grid description and component ([@Suraj-Bhandarkar-S](https://github.com/Suraj-Bhandarkar-S))\n* [#1880](https://github.com/mondaycom/monday-ui-react-core/pull/1880) docs: fix typo in Label and and warning in OtherContributorsList ([@Suraj-Bhandarkar-S](https://github.com/Suraj-Bhandarkar-S))\n* [#1884](https://github.com/mondaycom/monday-ui-react-core/pull/1884) docs: fix font weights in typography examples' mixin ([@prathamnagpure](https://github.com/prathamnagpure))\n\n#### Internal Changes\n* [#1885](https://github.com/mondaycom/monday-ui-react-core/pull/1885) chore(EditableTypography): remove animation ([@talkor](https://github.com/talkor))\n\n## 2.80.1 (2024-01-09)\n\n#### Bug Fixes\n* [#1883](https://github.com/mondaycom/monday-ui-react-core/pull/1883) feat(EditableTypography): expose mode change event ([@talkor](https://github.com/talkor))\n\n## 2.80.0 (2024-01-08)\n\n#### New Features\n* [#1876](https://github.com/mondaycom/monday-ui-react-core/pull/1876) feat(EditableText): add isEditMode prop ([@talkor](https://github.com/talkor))\n\n#### Documentation\n* [#1875](https://github.com/mondaycom/monday-ui-react-core/pull/1875) docs: change sidebar organization ([@talkor](https://github.com/talkor))\n\n## 2.79.2 (2024-01-07)\n\n#### Bug Fixes\n* [#1874](https://github.com/mondaycom/monday-ui-react-core/pull/1874) fix(MenuItemButton): fix type for kind ([@YossiSaadi](https://github.com/YossiSaadi))\n\n## 2.79.1 (2024-01-04)\n\n#### Bug Fixes\n* [#1866](https://github.com/mondaycom/monday-ui-react-core/pull/1866) fix(Label): change padding according to design ([@talkor](https://github.com/talkor))\n\n## 2.79.0 (2024-01-04)\n\n#### Bug Fixes\n* [#1833](https://github.com/mondaycom/monday-ui-react-core/pull/1833) fix: trigger scaling for menuButton only while clicking ([@shaharzil](https://github.com/shaharzil))\n\n#### New Features\n* [#1867](https://github.com/mondaycom/monday-ui-react-core/pull/1867) feat(Label): add a disabled state to submenu button ([@talkor](https://github.com/talkor))\n* [#1871](https://github.com/mondaycom/monday-ui-react-core/pull/1871) feat(Table): add option to supply %, fr, px as width for table ([@YossiSaadi](https://github.com/YossiSaadi))\n* [#1861](https://github.com/mondaycom/monday-ui-react-core/pull/1861) feat(Table): add no border variant ([@YossiSaadi](https://github.com/YossiSaadi))\n* [#1826](https://github.com/mondaycom/monday-ui-react-core/pull/1826) feat: add a Finish button to Steps ([@talkor](https://github.com/talkor))\n\n#### Documentation\n* [#1865](https://github.com/mondaycom/monday-ui-react-core/pull/1865) docs: fix <Menu> link in catalog ([@neerajkumarc](https://github.com/neerajkumarc))\n* [#1846](https://github.com/mondaycom/monday-ui-react-core/pull/1846) docs: RelatedComponents - table-description.tsx ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1859](https://github.com/mondaycom/monday-ui-react-core/pull/1859) docs: remove unneeded callbacks ([@talkor](https://github.com/talkor))\n\n#### Internal Changes\n* [#1860](https://github.com/mondaycom/monday-ui-react-core/pull/1860) test(DatePicker): make tests more deterministic ([@talkor](https://github.com/talkor))\n* [#1858](https://github.com/mondaycom/monday-ui-react-core/pull/1858) ci: check-pr-semantic-title.yml workflow ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.78.0 (2023-12-26)\n\n#### New Features\n* [#1853](https://github.com/mondaycom/monday-ui-react-core/pull/1853) feat: <Dropdown> leftRenderer prop ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#1856](https://github.com/mondaycom/monday-ui-react-core/pull/1856) Fix Dropdown prop duplication ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1855](https://github.com/mondaycom/monday-ui-react-core/pull/1855) Explanatory comment - Dropdown closeMenuOnScroll ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.77.0 (2023-12-26)\n\n#### New Features\n* [#1847](https://github.com/mondaycom/monday-ui-react-core/pull/1847) feat: <Dropdown> closeMenuOnScroll prop ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Documentation\n* [#1851](https://github.com/mondaycom/monday-ui-react-core/pull/1851) docs: Related components: fix < Steps />, < Tipseen /> - make examples clickable ([@PraveenShinde3](https://github.com/PraveenShinde3))\n\n## 2.76.0 (2023-12-25)\n\n#### Bug Fixes\n* [#1841](https://github.com/mondaycom/monday-ui-react-core/pull/1841) chore(playground-addon): support next components and add an initial code example ([@shlomitc](https://github.com/shlomitc))\n\n#### New Features\n* [#1773](https://github.com/mondaycom/monday-ui-react-core/pull/1773) feat(Tooltip): add a max width prop ([@talkor](https://github.com/talkor))\n\n#### Internal Changes\n* [#1848](https://github.com/mondaycom/monday-ui-react-core/pull/1848) monorepo-prerelease.yml - fix - run build in monorepo root ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.75.0 (2023-12-24)\n\n#### New Features\n* [#1845](https://github.com/mondaycom/monday-ui-react-core/pull/1845) feat: add warning color LinearProgressBar ([@rongabbay](https://github.com/rongabbay))\n\n#### Documentation\n* [#1840](https://github.com/mondaycom/monday-ui-react-core/pull/1840) docs(box): add box description on catalog page ([@Dhoni77](https://github.com/Dhoni77))\n\n#### Internal Changes\n* [#1844](https://github.com/mondaycom/monday-ui-react-core/pull/1844) infra: monorepo-prerelease.yml workflow ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.74.4 (2023-12-21)\n\n#### Bug Fixes\n* [#1839](https://github.com/mondaycom/monday-ui-react-core/pull/1839) fix: change Box/Menu children types to ElementContent ([@talkor](https://github.com/talkor))\n\n## 2.74.3 (2023-12-21)\n\n#### Internal Changes\n* [#1842](https://github.com/mondaycom/monday-ui-react-core/pull/1842) type: change menu children type ([@idoyana](https://github.com/idoyana))\n\n## 2.74.2 (2023-12-20)\n\n#### Documentation\n* [#1837](https://github.com/mondaycom/monday-ui-react-core/pull/1837) docs: add playground addon for vibe's storybook ([@YossiSaadi](https://github.com/YossiSaadi))\n\n## 2.74.1 (2023-12-20)\n\n#### Bug Fixes\n* [#1838](https://github.com/mondaycom/monday-ui-react-core/pull/1838) Split button alignment fix ([@talkor](https://github.com/talkor))\n\n## 2.74.0 (2023-12-20)\n\n#### Bug Fixes\n* [#1827](https://github.com/mondaycom/monday-ui-react-core/pull/1827) fix: Remove fucos for disabled button ([@shaharzil](https://github.com/shaharzil))\n\n#### New Features\n* [#1836](https://github.com/mondaycom/monday-ui-react-core/pull/1836) feat(Box): add a scrollable prop ([@talkor](https://github.com/talkor))\n\n#### Documentation\n* [#1830](https://github.com/mondaycom/monday-ui-react-core/pull/1830) docs(README): fix npm link ([@Yaronglp](https://github.com/Yaronglp))\n* [#1835](https://github.com/mondaycom/monday-ui-react-core/pull/1835) docs: RelatedComponents - fix icons-description.jsx href ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1834](https://github.com/mondaycom/monday-ui-react-core/pull/1834) fix: align <SplitButton> options in Catalog with overview example ([@neerajkumarc](https://github.com/neerajkumarc))\n\n## 2.73.2 (2023-12-18)\n\n#### Bug Fixes\n* [#1829](https://github.com/mondaycom/monday-ui-react-core/pull/1829) fix: update Feedback and DoubleCheck icons after monday-ui-style update ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.73.1 (2023-12-17)\n\n#### Bug Fixes\n* [#1821](https://github.com/mondaycom/monday-ui-react-core/pull/1821) fix: add background color to form components ([@talkor](https://github.com/talkor))\n* [#1814](https://github.com/mondaycom/monday-ui-react-core/pull/1814) fix(AttentionBox): fix layout and typography ([@talkor](https://github.com/talkor))\n\n#### Documentation\n* [#1824](https://github.com/mondaycom/monday-ui-react-core/pull/1824) docs(Chips): remove colors which we don't want devs to use from docs ([@YossiSaadi](https://github.com/YossiSaadi))\n* [#1825](https://github.com/mondaycom/monday-ui-react-core/pull/1825) docs: virtualized-list-description - fix import ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1819](https://github.com/mondaycom/monday-ui-react-core/pull/1819) docs(slider): add slider description on catalog page ([@Dhoni77](https://github.com/Dhoni77))\n\n#### Internal Changes\n* [#1822](https://github.com/mondaycom/monday-ui-react-core/pull/1822) chore: update monday-ui-style ([@talkor](https://github.com/talkor))\n\n## 2.73.0 (2023-12-14)\n\n#### New Features\n* [#1816](https://github.com/mondaycom/monday-ui-react-core/pull/1816) feat: Add Toast dark variation ([@shaharzil](https://github.com/shaharzil))\n* [#1791](https://github.com/mondaycom/monday-ui-react-core/pull/1791) style(Tooltip): Explicitly expose zIndex prop in component ([@lukasz-dudzinski](https://github.com/lukasz-dudzinski))\n\n#### Documentation\n* [#1820](https://github.com/mondaycom/monday-ui-react-core/pull/1820) docs: remove release section from readme ([@shaharzil](https://github.com/shaharzil))\n* [#1818](https://github.com/mondaycom/monday-ui-react-core/pull/1818) docs(icon): add icon description on catalog page ([@Dhoni77](https://github.com/Dhoni77))\n\n## 2.72.0 (2023-12-13)\n\n#### New Features\n* [#1815](https://github.com/mondaycom/monday-ui-react-core/pull/1815) feat: <TipseenImage> add tipseenMediaClassName ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Documentation\n* [#1806](https://github.com/mondaycom/monday-ui-react-core/pull/1806) docs(badge): add badge description on catelog page ([@Hossein-Mirazimi](https://github.com/Hossein-Mirazimi))\n* [#1811](https://github.com/mondaycom/monday-ui-react-core/pull/1811) docs(Dropdown): fix menuPosition & menuPlacement props in argsTable controls ([@YossiSaadi](https://github.com/YossiSaadi))\n\n#### Internal Changes\n* [#1813](https://github.com/mondaycom/monday-ui-react-core/pull/1813) build(Rollup): fail build if circular dependency detected ([@YossiSaadi](https://github.com/YossiSaadi))\n* [#1812](https://github.com/mondaycom/monday-ui-react-core/pull/1812) chore(MenuItem): fix circular dependency with IconButton's import ([@YossiSaadi](https://github.com/YossiSaadi))\n\n## 2.71.0 (2023-12-11)\n\n#### New Features\n* [#1789](https://github.com/mondaycom/monday-ui-react-core/pull/1789) Yulia/extract add button and menu to mf/split menu item ([@YuliaGold](https://github.com/YuliaGold))\n\n## 2.70.0 (2023-12-11)\n\n#### New Features\n* [#1793](https://github.com/mondaycom/monday-ui-react-core/pull/1793) Sergeyro/feature/menu button custom trigger ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.69.4 (2023-12-10)\n\n#### Bug Fixes\n* [#1809](https://github.com/mondaycom/monday-ui-react-core/pull/1809) fix: export Table.sizes enum ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.69.3 (2023-12-10)\n\n#### Bug Fixes\n* [#1808](https://github.com/mondaycom/monday-ui-react-core/pull/1808) fix(Table): table does not render empty state if children are empty array ([@YossiSaadi](https://github.com/YossiSaadi))\n\n#### Documentation\n* [#1807](https://github.com/mondaycom/monday-ui-react-core/pull/1807) docs: useIsOverflowing.stories.js - remove maintenance warning ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1804](https://github.com/mondaycom/monday-ui-react-core/pull/1804) docs: fix storybook's sidebar overflow ([@talkor](https://github.com/talkor))\n\n## 2.69.2 (2023-12-07)\n\n#### Documentation\n* [#1803](https://github.com/mondaycom/monday-ui-react-core/pull/1803) docs: fix broken docs links ([@shaharzil](https://github.com/shaharzil))\n\n## 2.69.1 (2023-12-06)\n\n#### Bug Fixes\n* [#1802](https://github.com/mondaycom/monday-ui-react-core/pull/1802) fix: changed toggle typography ([@shaharzil](https://github.com/shaharzil))\n\n## 2.69.0 (2023-12-06)\n\n#### New Features\n* [#1801](https://github.com/mondaycom/monday-ui-react-core/pull/1801) feat(EditableTypography): add onClick event ([@YossiSaadi](https://github.com/YossiSaadi))\n\n#### Documentation\n* [#1800](https://github.com/mondaycom/monday-ui-react-core/pull/1800) Internal links fixes ([@talkor](https://github.com/talkor))\n* [#1797](https://github.com/mondaycom/monday-ui-react-core/pull/1797) docs: replace internal links with StorybookLink ([@talkor](https://github.com/talkor))\n\n## 2.68.0 (2023-12-05)\n\n#### New Features\n* [#1798](https://github.com/mondaycom/monday-ui-react-core/pull/1798) feat(Chips): allow label to accept custom Element ([@YossiSaadi](https://github.com/YossiSaadi))\n* [#1790](https://github.com/mondaycom/monday-ui-react-core/pull/1790) feat(Toast): add loading prop  ([@YossiSaadi](https://github.com/YossiSaadi))\n\n#### Documentation\n* [#1796](https://github.com/mondaycom/monday-ui-react-core/pull/1796) docs(Tipseen): fix floating variation story ([@YossiSaadi](https://github.com/YossiSaadi))\n* [#1795](https://github.com/mondaycom/monday-ui-react-core/pull/1795) fix: re-enable sidebar tags ([@talkor](https://github.com/talkor))\n* [#1763](https://github.com/mondaycom/monday-ui-react-core/pull/1763) docs: Storybook 7 migrate ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.67.0 (2023-11-30)\n\n#### New Features\n* [#1758](https://github.com/mondaycom/monday-ui-react-core/pull/1758) Editable typography animation and a11y ([@talkor](https://github.com/talkor))\n\n## 2.66.0 (2023-11-29)\n\n#### New Features\n* [#1787](https://github.com/mondaycom/monday-ui-react-core/pull/1787) feat(Toggle): add data-testid prop ([@talkor](https://github.com/talkor))\n\n## 2.65.0 (2023-11-29)\n\n#### Bug Fixes\n* [#1785](https://github.com/mondaycom/monday-ui-react-core/pull/1785) fix: replace deprecated text-fixed-color tokens with identical color tokens ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### New Features\n* [#1788](https://github.com/mondaycom/monday-ui-react-core/pull/1788) Support className in TableRow ([@uri-shmueli](https://github.com/uri-shmueli))\n\n#### Documentation\n* [#1784](https://github.com/mondaycom/monday-ui-react-core/pull/1784) docs: RelatedComponents - add <VirtualizedList> component description example ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1786](https://github.com/mondaycom/monday-ui-react-core/pull/1786) docs: RelatedComponents - fix <Dialog> description ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#1775](https://github.com/mondaycom/monday-ui-react-core/pull/1775) infra: disable cron for update monday-ui-style version workflow ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.64.2 (2023-11-28)\n\n#### Bug Fixes\n* [#1776](https://github.com/mondaycom/monday-ui-react-core/pull/1776) fix: <Dropdown> Control - use --primary-color on focus-within instead of default color from react-select ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1772](https://github.com/mondaycom/monday-ui-react-core/pull/1772) fix(ModalHeader): extract icon from Heading to allow tooltip to work ([@talkor](https://github.com/talkor))\n* [#1777](https://github.com/mondaycom/monday-ui-react-core/pull/1777) fix(Button): remove aria-pressed ([@talkor](https://github.com/talkor))\n* [#1771](https://github.com/mondaycom/monday-ui-react-core/pull/1771) fix: typography vertical overflow tolerance ([@talkor](https://github.com/talkor))\n\n#### Documentation\n* [#1782](https://github.com/mondaycom/monday-ui-react-core/pull/1782) docs: RelatedComponents - add <ColorPicker> component ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1783](https://github.com/mondaycom/monday-ui-react-core/pull/1783) docs: Catalog fix multi words search ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1778](https://github.com/mondaycom/monday-ui-react-core/pull/1778) docs: change spacing of layout in stories ([@talkor](https://github.com/talkor))\n\n## 2.64.1 (2023-11-27)\n\n#### Bug Fixes\n* [#1774](https://github.com/mondaycom/monday-ui-react-core/pull/1774) fix(BreadcrumbItem): add hover style when using link variation ([@talkor](https://github.com/talkor))\n\n## 2.64.0 (2023-11-27)\n\n#### Bug Fixes\n* [#1759](https://github.com/mondaycom/monday-ui-react-core/pull/1759) EditableText/EditableHeading fixed and update docs ([@talkor](https://github.com/talkor))\n\n#### New Features\n* [#1765](https://github.com/mondaycom/monday-ui-react-core/pull/1765) <Table/> - Add row size variations ([@kapusj](https://github.com/kapusj))\n\n## 2.63.3 (2023-11-26)\n\n#### Bug Fixes\n* [#1768](https://github.com/mondaycom/monday-ui-react-core/pull/1768) fix(Toast): description icon should be 20px ([@YossiSaadi](https://github.com/YossiSaadi))\n\n#### Documentation\n* [#1769](https://github.com/mondaycom/monday-ui-react-core/pull/1769) docs(Table): Scroll story should have same length as other stories ([@YossiSaadi](https://github.com/YossiSaadi))\n\n#### Internal Changes\n* [#1770](https://github.com/mondaycom/monday-ui-react-core/pull/1770) chore: supress <Dialog> console.error if container not found, add TODO ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### New Icons\n* [#1764](https://github.com/mondaycom/monday-ui-react-core/pull/1764) Update icons - monday-ui-style 0.1.203 ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 2.63.2 (2023-11-23)\n\n#### Bug Fixes\n* [#1760](https://github.com/mondaycom/monday-ui-react-core/pull/1760) fix(Button): include entire content for width placeholder ([@talkor](https://github.com/talkor))\n\n#### Internal Changes\n* [#1762](https://github.com/mondaycom/monday-ui-react-core/pull/1762) test(Chromatic): wait for font loading before taking a snapshot ([@talkor](https://github.com/talkor))\n\n## 2.63.1 (2023-11-21)\n\n#### Documentation\n* [#1757](https://github.com/mondaycom/monday-ui-react-core/pull/1757) docs: Typography migration guide ([@talkor](https://github.com/talkor))\n\n## 2.63.0 (2023-11-20)\n\n#### New Features\n* [#1552](https://github.com/mondaycom/monday-ui-react-core/pull/1552) feat(TableRow): add highlighted styling for TableRow ([@YossiSaadi](https://github.com/YossiSaadi))\n\n## 2.62.0 (2023-11-19)\n\n#### Bug Fixes\n* [#1756](https://github.com/mondaycom/monday-ui-react-core/pull/1756) fix: <Dropdown> disabled option - fix keyboard focused style ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### New Features\n* [#1745](https://github.com/mondaycom/monday-ui-react-core/pull/1745) Editable text ([@talkor](https://github.com/talkor))\n\n#### Documentation\n* [#1754](https://github.com/mondaycom/monday-ui-react-core/pull/1754) docs: Fix overview links - scroll instead of openning new page ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1750](https://github.com/mondaycom/monday-ui-react-core/pull/1750) docs: related components fix description ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1737](https://github.com/mondaycom/monday-ui-react-core/pull/1737) docs: Components catalog ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1751](https://github.com/mondaycom/monday-ui-react-core/pull/1751) docs: fix typo ([@talkor](https://github.com/talkor))\n\n## 2.61.0 (2023-11-15)\n\n#### New Features\n* [#1753](https://github.com/mondaycom/monday-ui-react-core/pull/1753) feat(Checkbox): add a tabIndex prop ([@talkor](https://github.com/talkor))\n\n#### Documentation\n* [#1747](https://github.com/mondaycom/monday-ui-react-core/pull/1747) docs: rename Wizard to <MultiStepIndicator> ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.60.1 (2023-11-15)\n\n#### Bug Fixes\n* [#1752](https://github.com/mondaycom/monday-ui-react-core/pull/1752) fix(Button): fix loading behavior when button is type submit in a for… ([@talkor](https://github.com/talkor))\n\n#### Documentation\n* [#1748](https://github.com/mondaycom/monday-ui-react-core/pull/1748) docs: rename stories names to be in pascal case ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.60.0 (2023-11-14)\n\n#### New Features\n* [#1738](https://github.com/mondaycom/monday-ui-react-core/pull/1738) fix: <Dropdown> inside <Modal> overflow ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.59.3 (2023-11-12)\n\n#### Bug Fixes\n* [#1739](https://github.com/mondaycom/monday-ui-react-core/pull/1739) fix(Button): differentiate different states of the button with a key ([@talkor](https://github.com/talkor))\n* [#1740](https://github.com/mondaycom/monday-ui-react-core/pull/1740) fix: <ThemeProvider> remove Hacker theme from eligible for overrides ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.59.2 (2023-11-12)\n\n#### Bug Fixes\n* [#1729](https://github.com/mondaycom/monday-ui-react-core/pull/1729) fix(MultiValueContainer): align items vertically ([@talkor](https://github.com/talkor))\n\n#### Documentation\n* [#1741](https://github.com/mondaycom/monday-ui-react-core/pull/1741) docs: remove hacker theme from storybook ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.59.1 (2023-11-09)\n\n#### Documentation\n* [#1735](https://github.com/mondaycom/monday-ui-react-core/pull/1735) docs: improve readme files on how to import css - mention storybook ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#1726](https://github.com/mondaycom/monday-ui-react-core/pull/1726) feat: new EditableHeading with new typography ([@talkor](https://github.com/talkor))\n\n## 2.59.0 (2023-11-09)\n\n#### New Features\n* [#1718](https://github.com/mondaycom/monday-ui-react-core/pull/1718) feat: change < Icon /> and < Avatar /> sizes inside < Chips />, < Dropdown /> < ChildrenContent />,  < ComboboxOption />, < ListItem />, < MenuItem /> ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.58.0 (2023-11-07)\n\n#### Bug Fixes\n* [#1736](https://github.com/mondaycom/monday-ui-react-core/pull/1736) fix: <TextField> add typograpghy mixin to the textField container to prevent avoid line-height overrides ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### New Features\n* [#1733](https://github.com/mondaycom/monday-ui-react-core/pull/1733) feat: <Dropdown> add filterOption prop for custom filter ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.57.2 (2023-11-07)\n\n#### Bug Fixes\n* [#1734](https://github.com/mondaycom/monday-ui-react-core/pull/1734) fix: Modified the styling of the <TextField> icon  ([@Nirco96](https://github.com/Nirco96))\n\n## 2.57.1 (2023-11-06)\n\n#### Documentation\n* [#1730](https://github.com/mondaycom/monday-ui-react-core/pull/1730) docs: ThemeProvider alpha tag instead of beta ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.57.0 (2023-11-05)\n\n#### New Features\n* [#1526](https://github.com/mondaycom/monday-ui-react-core/pull/1526) feat: <ThemeProvider> ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1614](https://github.com/mondaycom/monday-ui-react-core/pull/1614) feat(Refable): add TypeScript support ([@naorpeled](https://github.com/naorpeled))\n\n#### Documentation\n* [#1720](https://github.com/mondaycom/monday-ui-react-core/pull/1720) Update vibe-storybook-components to ^0.10.3 ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#1721](https://github.com/mondaycom/monday-ui-react-core/pull/1721) chore: Replace Github contributors list to be from vibe-storybook-components ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1724](https://github.com/mondaycom/monday-ui-react-core/pull/1724) chore: cleanup ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1651](https://github.com/mondaycom/monday-ui-react-core/pull/1651) chore: fix lint warnings ([@Dhoni77](https://github.com/Dhoni77))\n\n## 2.56.4 (2023-10-30)\n\n#### Bug Fixes\n* [#1715](https://github.com/mondaycom/monday-ui-react-core/pull/1715) fix(AttentionBox): fix title overflow behavior ([@talkor](https://github.com/talkor))\n\n#### Documentation\n* [#1716](https://github.com/mondaycom/monday-ui-react-core/pull/1716) docs: extract AlertBanner template to stories file ([@talkor](https://github.com/talkor))\n\n## 2.56.3 (2023-10-29)\n\n#### Bug Fixes\n* [#1706](https://github.com/mondaycom/monday-ui-react-core/pull/1706) Fixes: #1673 BUG Tooltip not visible when more than one row ellipsis is applied to Text component  ([@viditagrawal56](https://github.com/viditagrawal56))\n\n#### Internal Changes\n* [#1717](https://github.com/mondaycom/monday-ui-react-core/pull/1717) chore: cleanup - lint issue ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.56.2 (2023-10-29)\n\n#### Bug Fixes\n* [#1708](https://github.com/mondaycom/monday-ui-react-core/pull/1708) fix: <Dropdown> multi single line - counter options display ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.56.1 (2023-10-29)\n\n#### Bug Fixes\n* [#1714](https://github.com/mondaycom/monday-ui-react-core/pull/1714) fix: <MenuButton> change moveBy <Dialog> and active state text color ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### New Icons\n* [#1709](https://github.com/mondaycom/monday-ui-react-core/pull/1709) Update icons - monday-ui-style 0.1.202 ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 2.56.0 (2023-10-29)\n\n#### New Features\n* [#1705](https://github.com/mondaycom/monday-ui-react-core/pull/1705) feat: fix for Vite ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#1711](https://github.com/mondaycom/monday-ui-react-core/pull/1711) chore: replace mixins with exported mixins from monday-ui-style ([@talkor](https://github.com/talkor))\n\n## 2.55.1 (2023-10-26)\n\n#### Bug Fixes\n* [#1707](https://github.com/mondaycom/monday-ui-react-core/pull/1707) fix(Button): adjust loading state to initial button size ([@talkor](https://github.com/talkor))\n\n## 2.55.0 (2023-10-26)\n\n#### New Features\n* [#1703](https://github.com/mondaycom/monday-ui-react-core/pull/1703) feat: < Dialog /> should throw console.error if containerSelector is not found ([@Kritik-J](https://github.com/Kritik-J))\n\n## 2.54.1 (2023-10-25)\n\n#### Bug Fixes\n* [#1704](https://github.com/mondaycom/monday-ui-react-core/pull/1704) fix: <AvatarGroup> rename freshly added padding prop to removePadding ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#1702](https://github.com/mondaycom/monday-ui-react-core/pull/1702) chore: cleanup demo styles ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.54.0 (2023-10-24)\n\n#### Bug Fixes\n* [#1699](https://github.com/mondaycom/monday-ui-react-core/pull/1699) fix: < ComboBox / > - change stickyCategories to not be the default behavior ([@Kritik-J](https://github.com/Kritik-J))\n\n#### New Features\n* [#1700](https://github.com/mondaycom/monday-ui-react-core/pull/1700) feat: < TextField /> add red asterisks(*) when required=true ([@HarshitVashisht11](https://github.com/HarshitVashisht11))\n* [#1690](https://github.com/mondaycom/monday-ui-react-core/pull/1690) feat: < AvatarGroup /> - added new prop to remove padding (#1674) ([@nabinbhatt](https://github.com/nabinbhatt))\n\n#### Documentation\n* [#1519](https://github.com/mondaycom/monday-ui-react-core/pull/1519) docs(Typography): new docs page for Typography ([@hadasfa](https://github.com/hadasfa))\n\n## 2.53.0 (2023-10-24)\n\n#### New Features\n* [#1701](https://github.com/mondaycom/monday-ui-react-core/pull/1701) export useElementsOverflowingIndex hook ([@orrgottlieb](https://github.com/orrgottlieb))\n\n#### Internal Changes\n* [#1695](https://github.com/mondaycom/monday-ui-react-core/pull/1695) createStoryMetaSettingsDecorator.ts - TS migration, add ignoreControlsPropNamesArray ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.52.1 (2023-10-22)\n\n#### Bug Fixes\n* [#1694](https://github.com/mondaycom/monday-ui-react-core/pull/1694) fix: <Dropdown> controlled multi fix option remove ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.52.0 (2023-10-22)\n\n#### New Features\n* [#1691](https://github.com/mondaycom/monday-ui-react-core/pull/1691) feat(EditableInput): expose inputType ([@talkor](https://github.com/talkor))\n\n#### Internal Changes\n* [#1693](https://github.com/mondaycom/monday-ui-react-core/pull/1693) chore: fix < Tip /> imports to be from vibe-storybook-components ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.51.2 (2023-10-22)\n\n#### Bug Fixes\n* [#1692](https://github.com/mondaycom/monday-ui-react-core/pull/1692) < Slider /> controlled state fix ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.51.1 (2023-10-22)\n\n#### Bug Fixes\n* [#1678](https://github.com/mondaycom/monday-ui-react-core/pull/1678) fix: <Toast /> close button - replace <Button /> and <Icon /> with <IconButton /> ([@Kritik-J](https://github.com/Kritik-J))\n\n## 2.51.0 (2023-10-19)\n\n#### New Features\n* [#1687](https://github.com/mondaycom/monday-ui-react-core/pull/1687) Add mising data-testid, replace dataTestId (not breaking) ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1683](https://github.com/mondaycom/monday-ui-react-core/pull/1683) feat: < Tipseen /> export hideShowTriggers ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Documentation\n* [#1689](https://github.com/mondaycom/monday-ui-react-core/pull/1689) chore: add @deprecated comments where backwardCompatibilityForProperties is being used ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1684](https://github.com/mondaycom/monday-ui-react-core/pull/1684) docs: fix contributors list to include all contributors ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#1682](https://github.com/mondaycom/monday-ui-react-core/pull/1682) docs(AlertBanner): fix documentation ([@talkor](https://github.com/talkor))\n* [#1601](https://github.com/mondaycom/monday-ui-react-core/pull/1601) chore(deps-dev): bump postcss from 8.4.21 to 8.4.31 ([@dependabot[bot]](https://github.com/apps/dependabot))\n\n#### New Icons\n* [#1688](https://github.com/mondaycom/monday-ui-react-core/pull/1688) Update icons - monday-ui-style 0.1.201 ([@github-actions[bot]](https://github.com/apps/github-actions))\n* [#1685](https://github.com/mondaycom/monday-ui-react-core/pull/1685) Update icons - monday-ui-style 0.1.200 ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 2.50.2 (2023-10-18)\n\n#### Bug Fixes\n* [#1680](https://github.com/mondaycom/monday-ui-react-core/pull/1680) fix(types): fix unknown path '/types' ([@YossiSaadi](https://github.com/YossiSaadi))\n\n#### Internal Changes\n* [#1656](https://github.com/mondaycom/monday-ui-react-core/pull/1656) chore: < GridKeyboardNavigationContext /> - migrate to TS ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### New Icons\n* [#1677](https://github.com/mondaycom/monday-ui-react-core/pull/1677) Update icons - monday-ui-style 0.1.199 ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 2.50.1 (2023-10-18)\n\n#### Bug Fixes\n* [#1671](https://github.com/mondaycom/monday-ui-react-core/pull/1671) Update vibe-storybook-components version, @babel/core version ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.50.0 (2023-10-18)\n\n#### New Features\n* [#1670](https://github.com/mondaycom/monday-ui-react-core/pull/1670) feat(types): export general types ([@YossiSaadi](https://github.com/YossiSaadi))\n\n#### Internal Changes\n* [#1653](https://github.com/mondaycom/monday-ui-react-core/pull/1653) chore: resolve lint warnings - < Menu /> ([@Kritik-J](https://github.com/Kritik-J))\n\n#### New Icons\n* [#1669](https://github.com/mondaycom/monday-ui-react-core/pull/1669) Update icons - monday-ui-style 0.1.198 ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 2.49.1 (2023-10-16)\n\n#### Internal Changes\n* [#1666](https://github.com/mondaycom/monday-ui-react-core/pull/1666) Bug Fix: Closes [#1661](https://github.com/mondaycom/monday-ui-react-core/issues/1661) Fixed the TS error while using size prop for <ProgressBar /> ([@viditagrawal56](https://github.com/viditagrawal56))\n* [#1665](https://github.com/mondaycom/monday-ui-react-core/pull/1665) chore(deps-dev): bump @babel/traverse from 7.18.2 to 7.23.2 ([@dependabot[bot]](https://github.com/apps/dependabot))\n\n## 2.49.0 (2023-10-16)\n\n#### New Features\n* [#1637](https://github.com/mondaycom/monday-ui-react-core/pull/1637) feat: add Toast warning variation ([@talkor](https://github.com/talkor))\n* [#1662](https://github.com/mondaycom/monday-ui-react-core/pull/1662) feat(AlertBanner): add warning variation ([@talkor](https://github.com/talkor))\n\n#### Documentation\n* [#1559](https://github.com/mondaycom/monday-ui-react-core/pull/1559) docs: sidebar tags ([@talkor](https://github.com/talkor))\n\n#### Internal Changes\n* [#1663](https://github.com/mondaycom/monday-ui-react-core/pull/1663) infra: add build-test in test-workflow.yml ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.48.0 (2023-10-15)\n\n#### Bug Fixes\n* [#1657](https://github.com/mondaycom/monday-ui-react-core/pull/1657) fix: colorpicker indicator is dissapearing when color is selected ([@sayyedarib](https://github.com/sayyedarib))\n\n#### New Features\n* [#1654](https://github.com/mondaycom/monday-ui-react-core/pull/1654) feat: provide props for ariaLabel - < Toast />, < AlertBanner />, < Combobox /> Fixes: #1642 ([@viditagrawal56](https://github.com/viditagrawal56))\n\n## 2.47.3 (2023-10-15)\n\n#### Bug Fixes\n* [#1659](https://github.com/mondaycom/monday-ui-react-core/pull/1659) fix: <BreadcrumbsBar> - shouldn't be clickable when type = Indication ([@SoumyadiptoPal](https://github.com/SoumyadiptoPal))\n\n#### Documentation\n* [#1660](https://github.com/mondaycom/monday-ui-react-core/pull/1660) docs: fix description of text-color-fixed-light and text-color-fixed-dark ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.47.2 (2023-10-15)\n\n#### Bug Fixes\n* [#1556](https://github.com/mondaycom/monday-ui-react-core/pull/1556) fix: Fix menu item label style ([@talkor](https://github.com/talkor))\n\n## 2.47.1 (2023-10-15)\n\n#### Bug Fixes\n* [#1623](https://github.com/mondaycom/monday-ui-react-core/pull/1623) fix: <Toast> use color - text-color-fixed-light ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#1628](https://github.com/mondaycom/monday-ui-react-core/pull/1628) docs: Replace tip alpha warning deprecated warning with vibe storybook components ([@talkor](https://github.com/talkor))\n\n## 2.47.0 (2023-10-12)\n\n#### New Features\n* [#1646](https://github.com/mondaycom/monday-ui-react-core/pull/1646) feat: provide props for ariaLabel - < AvatarGroupCounter />, < TableHeaderCell /> ([@Kritik-J](https://github.com/Kritik-J))\n\n#### Documentation\n* [#1627](https://github.com/mondaycom/monday-ui-react-core/pull/1627) docs: replace all <a/> tags with <Link/> in stories ([@evadrake89](https://github.com/evadrake89))\n\n#### Internal Changes\n* [#1652](https://github.com/mondaycom/monday-ui-react-core/pull/1652) Resolved lint warnings - < Slider />, < StepIndicator />, < Bar />, <TabsContext /> ([@balajik](https://github.com/balajik))\n* [#1640](https://github.com/mondaycom/monday-ui-react-core/pull/1640) chore: fix Github actions lint warnings - < Button /> ([@Kritik-J](https://github.com/Kritik-J))\n* [#1643](https://github.com/mondaycom/monday-ui-react-core/pull/1643) chore: fix Github actions lint warnings - < ColorPicker /> ([@Kritik-J](https://github.com/Kritik-J))\n* [#1639](https://github.com/mondaycom/monday-ui-react-core/pull/1639) docs: Text.stories cleanup ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1636](https://github.com/mondaycom/monday-ui-react-core/pull/1636) chore: fix github actions lint warnings - <AlertBanner /> ([@Dhoni77](https://github.com/Dhoni77))\n* [#1635](https://github.com/mondaycom/monday-ui-react-core/pull/1635) chore: fix github actions lint warnings - < Checkbox /> tests ([@Dhoni77](https://github.com/Dhoni77))\n* [#1634](https://github.com/mondaycom/monday-ui-react-core/pull/1634) chore: fix Github actions lint warnings - < AvatarGroup /> ([@Kritik-J](https://github.com/Kritik-J))\n\n## 2.46.3 (2023-10-09)\n\n#### Bug Fixes\n* [#1624](https://github.com/mondaycom/monday-ui-react-core/pull/1624) fix: <Counter> use color - text-color-fixed-light ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.46.2 (2023-10-09)\n\n#### Bug Fixes\n* [#1619](https://github.com/mondaycom/monday-ui-react-core/pull/1619) fix: <MenuDivider/> - added necessary stylings ([@SoumyadiptoPal](https://github.com/SoumyadiptoPal))\n\n#### Documentation\n* [#1621](https://github.com/mondaycom/monday-ui-react-core/pull/1621) docs: <Checkbox> Usage guidelines - fix font #1577 ([@SoumyadiptoPal](https://github.com/SoumyadiptoPal))\n* [#1600](https://github.com/mondaycom/monday-ui-react-core/pull/1600) docs: fix links ([@Dhoni77](https://github.com/Dhoni77))\n* [#1618](https://github.com/mondaycom/monday-ui-react-core/pull/1618) docs: add npm version badge ([@talkor](https://github.com/talkor))\n* [#1616](https://github.com/mondaycom/monday-ui-react-core/pull/1616) chore: cleanup in stories controls ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1599](https://github.com/mondaycom/monday-ui-react-core/pull/1599) docs: enable controls for some of the stories ([@Dhoni77](https://github.com/Dhoni77))\n\n#### Internal Changes\n* [#1626](https://github.com/mondaycom/monday-ui-react-core/pull/1626) chore: cleanup, update vibe-storybook-components to ^0.8.0 ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1612](https://github.com/mondaycom/monday-ui-react-core/pull/1612) test: add editable heading interaction test ([@jes14](https://github.com/jes14))\n\n## 2.46.1 (2023-10-05)\n\n#### Bug Fixes\n* [#1615](https://github.com/mondaycom/monday-ui-react-core/pull/1615) fix: <AttentionBox> don't apply defaultIcon for case when icon=null ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.46.0 (2023-10-04)\n\n#### New Features\n* [#1611](https://github.com/mondaycom/monday-ui-react-core/pull/1611) feat: <AttentionBox> - update default icon for Primary type to Info icon ([@Kritik-J](https://github.com/Kritik-J))\n\n#### Internal Changes\n* [#1613](https://github.com/mondaycom/monday-ui-react-core/pull/1613) chore: Update snapshots ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.45.0 (2023-10-04)\n\n#### New Features\n* [#1595](https://github.com/mondaycom/monday-ui-react-core/pull/1595) feat: update label with VibeComponent ([@jes14](https://github.com/jes14))\n\n#### Documentation\n* [#1504](https://github.com/mondaycom/monday-ui-react-core/pull/1504) docs: separate docs tokens from components tokens ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1609](https://github.com/mondaycom/monday-ui-react-core/pull/1609) docs: Shortening texts - add space before the link ([@Kritik-J](https://github.com/Kritik-J))\n* [#1608](https://github.com/mondaycom/monday-ui-react-core/pull/1608) docs: added a link to Combobox on the Menu page  ([@SarthakD15](https://github.com/SarthakD15))\n\n#### Internal Changes\n* [#1610](https://github.com/mondaycom/monday-ui-react-core/pull/1610) infra: Fix workflows running twice ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1603](https://github.com/mondaycom/monday-ui-react-core/pull/1603) infra: allow running chromatic workflow on pull_request ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.44.1 (2023-10-04)\n\n#### Bug Fixes\n* [#1604](https://github.com/mondaycom/monday-ui-react-core/pull/1604) Revert \"chore: enforce using npm\" ([@talkor](https://github.com/talkor))\n\n## 2.44.0 (2023-10-03)\n\n#### Bug Fixes\n* [#1594](https://github.com/mondaycom/monday-ui-react-core/pull/1594) fix: <Avatar> remove default tabIndex = 0 ([@Kritik-J](https://github.com/Kritik-J))\n* [#1582](https://github.com/mondaycom/monday-ui-react-core/pull/1582) fix: <MenuButton> disabledReason?: boolean change type to string ([@Franqsanz](https://github.com/Franqsanz))\n\n#### New Features\n* [#1586](https://github.com/mondaycom/monday-ui-react-core/pull/1586) feat: <AttentionBox> closeButton - add hideTooltip and closeButtonAriaLabel prop ([@Kritik-J](https://github.com/Kritik-J))\n* [#1585](https://github.com/mondaycom/monday-ui-react-core/pull/1585) feat: <Chips> - add closeButtonAriaLabel as a prop ([@Kritik-J](https://github.com/Kritik-J))\n\n#### Documentation\n* [#1593](https://github.com/mondaycom/monday-ui-react-core/pull/1593) fix text in a few places ([@Vijeth56](https://github.com/Vijeth56))\n* [#1591](https://github.com/mondaycom/monday-ui-react-core/pull/1591) docs: replace legacy links with the new ones ([@jes14](https://github.com/jes14))\n* [#1592](https://github.com/mondaycom/monday-ui-react-core/pull/1592) docs: Add space between <Combobox> tips and links ([@anirudhsudhir](https://github.com/anirudhsudhir))\n\n#### Internal Changes\n* [#1596](https://github.com/mondaycom/monday-ui-react-core/pull/1596) chore: enforce using npm ([@talkor](https://github.com/talkor))\n* [#1590](https://github.com/mondaycom/monday-ui-react-core/pull/1590) Sergeyro/chore/cleanup  ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### New Icons\n* [#1597](https://github.com/mondaycom/monday-ui-react-core/pull/1597) Update icons - monday-ui-style 0.1.196 ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 2.43.0 (2023-10-02)\n\n#### New Features\n* [#1570](https://github.com/mondaycom/monday-ui-react-core/pull/1570) feat(useActiveDescendantListFocus): add option to ignoreDocumentFallback to prevent vibe from adding event listeners ([@YossiSaadi](https://github.com/YossiSaadi))\n\n#### Documentation\n* [#1563](https://github.com/mondaycom/monday-ui-react-core/pull/1563) docs: <Dialog> story improvements - UsageGuidelines, add links ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#1551](https://github.com/mondaycom/monday-ui-react-core/pull/1551) chore: set browserslist config to specific version to avoid breaking changes, update caniuse browserslist ([@YossiSaadi](https://github.com/YossiSaadi))\n\n## 2.42.0 (2023-10-02)\n\n#### New Features\n* [#1565](https://github.com/mondaycom/monday-ui-react-core/pull/1565) Replace Rubik with Noto Sans Hebrew ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Documentation\n* [#1564](https://github.com/mondaycom/monday-ui-react-core/pull/1564) docs: component-name-decorator- text color = fixed-dark ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.41.2 (2023-10-01)\n\n#### Bug Fixes\n* [#1561](https://github.com/mondaycom/monday-ui-react-core/pull/1561) fix(Label): apply preventDefault when calling onClick event ([@talkor](https://github.com/talkor))\n\n#### Documentation\n* [#1558](https://github.com/mondaycom/monday-ui-react-core/pull/1558) useClickOutside event name argument documentation ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#1562](https://github.com/mondaycom/monday-ui-react-core/pull/1562) chore(rollup): export sourcemap with build ([@YossiSaadi](https://github.com/YossiSaadi))\n\n## 2.41.1 (2023-09-27)\n\n#### Bug Fixes\n* [#1560](https://github.com/mondaycom/monday-ui-react-core/pull/1560) fix: remove preventDefault from useKeyboardButtonPressedFunc.ts ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Documentation\n* [#1554](https://github.com/mondaycom/monday-ui-react-core/pull/1554) docs: <Dialog> - Dialog with tooltip story ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1557](https://github.com/mondaycom/monday-ui-react-core/pull/1557) docs: add missing up next links ([@talkor](https://github.com/talkor))\n* [#1553](https://github.com/mondaycom/monday-ui-react-core/pull/1553) Infra/talko/flaky chromatic tests ([@talkor](https://github.com/talkor))\n\n## 2.41.0 (2023-09-21)\n\n#### New Features\n* [#1555](https://github.com/mondaycom/monday-ui-react-core/pull/1555) feat(Table): add vibe component props to all table-related components make components VibeComponent type - with forwardRef ([@YossiSaadi](https://github.com/YossiSaadi))\n\n## 2.40.0 (2023-09-20)\n\n#### New Features\n* [#1547](https://github.com/mondaycom/monday-ui-react-core/pull/1547) Feat/talko/label clickable ([@talkor](https://github.com/talkor))\n\n## 2.39.1 (2023-09-20)\n\n#### Internal Changes\n* [#1550](https://github.com/mondaycom/monday-ui-react-core/pull/1550) fix(TipseenMedia): fix import/export path ([@YossiSaadi](https://github.com/YossiSaadi))\n\n## 2.39.0 (2023-09-20)\n\n#### New Features\n* [#1548](https://github.com/mondaycom/monday-ui-react-core/pull/1548) feat(Tipseen): add TipseenMedia component to act as a container for tipseen medias ([@YossiSaadi](https://github.com/YossiSaadi))\n* [#1542](https://github.com/mondaycom/monday-ui-react-core/pull/1542) feat(Table): table leftovers ([@YossiSaadi](https://github.com/YossiSaadi))\n\n## 2.38.1 (2023-09-19)\n\n#### Bug Fixes\n* [#1549](https://github.com/mondaycom/monday-ui-react-core/pull/1549) fix: <Chips> text overflow Tooltip issue - replace internal Tooltip logic with Text overflow Tooltip logic ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### New Icons\n* [#1544](https://github.com/mondaycom/monday-ui-react-core/pull/1544) Update icons - monday-ui-style 0.1.194 ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 2.38.0 (2023-09-14)\n\n#### New Features\n* [#1520](https://github.com/mondaycom/monday-ui-react-core/pull/1520) Added the ability for combobox categories to get classNames and inline color as props ([@MBYOded](https://github.com/MBYOded))\n\n## 2.37.1 (2023-09-14)\n\n#### Bug Fixes\n* [#1546](https://github.com/mondaycom/monday-ui-react-core/pull/1546) fix: <ListItem> children type change to ElementContent ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.37.0 (2023-09-14)\n\n#### New Features\n* [#1545](https://github.com/mondaycom/monday-ui-react-core/pull/1545) Exposed the ability to control the search icon for combobox ([@MBYOded](https://github.com/MBYOded))\n\n## 2.36.3 (2023-09-13)\n\n#### Bug Fixes\n* [#1543](https://github.com/mondaycom/monday-ui-react-core/pull/1543) <DropdownMenu> - disable animation when using menuPortalTarget - temp fix ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.36.2 (2023-09-12)\n\n#### Bug Fixes\n* [#1541](https://github.com/mondaycom/monday-ui-react-core/pull/1541) fix(Table): export table-related components ([@YossiSaadi](https://github.com/YossiSaadi))\n* [#1540](https://github.com/mondaycom/monday-ui-react-core/pull/1540) fix(TipseenTitle): font size should be TEXT1 (16px) ([@YossiSaadi](https://github.com/YossiSaadi))\n\n## 2.36.1 (2023-09-10)\n\n#### Bug Fixes\n* [#1538](https://github.com/mondaycom/monday-ui-react-core/pull/1538) <AttentionBox> withoutIcon remove padding ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.36.0 (2023-09-10)\n\n#### New Features\n* [#1537](https://github.com/mondaycom/monday-ui-react-core/pull/1537) feat(Tipseen): in floating variation do not show tip, make docs for variation clearer ([@YossiSaadi](https://github.com/YossiSaadi))\n\n#### Internal Changes\n* [#1521](https://github.com/mondaycom/monday-ui-react-core/pull/1521) chore(browserslist): Use browserslist-config-monday on Vibe ([@YossiSaadi](https://github.com/YossiSaadi))\n\n## 2.35.0 (2023-09-07)\n\n#### New Features\n* [#1535](https://github.com/mondaycom/monday-ui-react-core/pull/1535) feat: add a11y arias props for `List`, `ListItem`, and `Button` ([@YossiSaadi](https://github.com/YossiSaadi))\n* [#1530](https://github.com/mondaycom/monday-ui-react-core/pull/1530) feat(Table): table leftovers phase 1 ([@YossiSaadi](https://github.com/YossiSaadi))\n\n## 2.34.1 (2023-09-07)\n\n#### Bug Fixes\n* [#1534](https://github.com/mondaycom/monday-ui-react-core/pull/1534) fix: <MenuItem/> Tooltip shouldn't cover the icon ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.34.0 (2023-09-07)\n\n#### New Features\n* [#1524](https://github.com/mondaycom/monday-ui-react-core/pull/1524) feat(Text): remove paragraph prop (can be achieved with element=\"p\") ([@YossiSaadi](https://github.com/YossiSaadi))\n\n#### Documentation\n* [#1529](https://github.com/mondaycom/monday-ui-react-core/pull/1529) docs: Change <LegacyHeading> name in the story ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### New Icons\n* [#1531](https://github.com/mondaycom/monday-ui-react-core/pull/1531) Update icons - monday-ui-style 0.1.189 ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 2.33.0 (2023-09-05)\n\n#### Bug Fixes\n* [#1511](https://github.com/mondaycom/monday-ui-react-core/pull/1511) fix(Dropdown): when used inside overflowed container with transform, consider container scroll ([@YossiSaadi](https://github.com/YossiSaadi))\n\n#### New Features\n* [#1528](https://github.com/mondaycom/monday-ui-react-core/pull/1528) feat(Tipseen): add floating variation for Tipseen ([@YossiSaadi](https://github.com/YossiSaadi))\n\n#### Internal Changes\n* [#1525](https://github.com/mondaycom/monday-ui-react-core/pull/1525) Revert \"chore: fail chromatic action check in case has visual changes (#1392) ([@YossiSaadi](https://github.com/YossiSaadi))\n\n## 2.32.0 (2023-09-04)\n\n#### New Features\n* [#1523](https://github.com/mondaycom/monday-ui-react-core/pull/1523) feat(Tipseen): allow withoutDialog for component ([@YossiSaadi](https://github.com/YossiSaadi))\n\n## 2.31.4 (2023-09-04)\n\n#### Bug Fixes\n* [#1522](https://github.com/mondaycom/monday-ui-react-core/pull/1522) fix: <BreadcrumbsBar> type ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### New Icons\n* [#1518](https://github.com/mondaycom/monday-ui-react-core/pull/1518) Update icons - monday-ui-style 0.1.188 ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 2.31.3 (2023-08-31)\n\n#### New Icons\n* [#1516](https://github.com/mondaycom/monday-ui-react-core/pull/1516) Update icons - monday-ui-style 0.1.186 ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 2.31.2 (2023-08-30)\n\n#### Bug Fixes\n* [#1513](https://github.com/mondaycom/monday-ui-react-core/pull/1513) fix attention box icon color  ([@hadasfa](https://github.com/hadasfa))\n\n#### Documentation\n* [#1499](https://github.com/mondaycom/monday-ui-react-core/pull/1499) docs: <ExpandCollapse> story ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#1487](https://github.com/mondaycom/monday-ui-react-core/pull/1487) Sergeyro/chore/replace theme prop ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### New Icons\n* [#1509](https://github.com/mondaycom/monday-ui-react-core/pull/1509) Update icons - monday-ui-style 0.1.184 ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 2.31.1 (2023-08-28)\n\n#### Bug Fixes\n* [#1512](https://github.com/mondaycom/monday-ui-react-core/pull/1512) fix: <Heading> export ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.31.0 (2023-08-28)\n\n#### Bug Fixes\n* [#1510](https://github.com/mondaycom/monday-ui-react-core/pull/1510) fix: <TextField> type=date, revert calendar icon changes ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### New Features\n* [#1494](https://github.com/mondaycom/monday-ui-react-core/pull/1494) feat: <Table/> - new component ([@giladar-monday](https://github.com/giladar-monday))\n\n## 2.30.1 (2023-08-27)\n\n#### Documentation\n* [#1495](https://github.com/mondaycom/monday-ui-react-core/pull/1495) Docs for text and heading ([@hadasfa](https://github.com/hadasfa))\n\n## 2.30.0 (2023-08-27)\n\n#### New Features\n* [#1503](https://github.com/mondaycom/monday-ui-react-core/pull/1503) feat: export <Dropdown> components - <DropdownMenu>, <DropdownOption>, <DropdownSingleValue> ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.29.1 (2023-08-27)\n\n#### Bug Fixes\n* [#1506](https://github.com/mondaycom/monday-ui-react-core/pull/1506) fix: <List> keyboard focus only on list items ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1505](https://github.com/mondaycom/monday-ui-react-core/pull/1505) fix: <ExpandCollapse> flickering ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#1500](https://github.com/mondaycom/monday-ui-react-core/pull/1500) chore: Update stories plop ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.29.0 (2023-08-24)\n\n#### New Features\n* [#1492](https://github.com/mondaycom/monday-ui-react-core/pull/1492) feat: <Menu> id generation ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Dependency Upgrades\n* [#1501](https://github.com/mondaycom/monday-ui-react-core/pull/1501) update monday-ui-style ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.28.3 (2023-08-23)\n\n#### Bug Fixes\n* [#1498](https://github.com/mondaycom/monday-ui-react-core/pull/1498) fix: <AlertBannerLink> pass textColor ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.28.2 (2023-08-22)\n\n#### Bug Fixes\n* [#1497](https://github.com/mondaycom/monday-ui-react-core/pull/1497) fix: <Dropdown> pass children to the menuRenderer ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Documentation\n* [#1493](https://github.com/mondaycom/monday-ui-react-core/pull/1493) docs: Update Pull request template ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.28.1 (2023-08-21)\n\n#### Bug Fixes\n* [#1491](https://github.com/mondaycom/monday-ui-react-core/pull/1491) fix: <TextField> debounce recreation bug ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.28.0 (2023-08-21)\n\n#### New Features\n* [#1488](https://github.com/mondaycom/monday-ui-react-core/pull/1488) feat: <Combobox> defaultFilter value ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.27.0 (2023-08-21)\n\n#### New Features\n* [#1490](https://github.com/mondaycom/monday-ui-react-core/pull/1490) feat: <Toggle>, <Switch> refForwarding ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1486](https://github.com/mondaycom/monday-ui-react-core/pull/1486) feat: add configurable aria-describedby attribute to the link element ([@LihiBechorMarkovitz](https://github.com/LihiBechorMarkovitz))\n\n## 2.26.0 (2023-08-17)\n\n#### Bug Fixes\n* [#1485](https://github.com/mondaycom/monday-ui-react-core/pull/1485) fix: <List> id generation ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### New Features\n* [#1484](https://github.com/mondaycom/monday-ui-react-core/pull/1484) feat: <ListItemIcon>, <ListItemAvatar> component props ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.25.2 (2023-08-16)\n\n#### Bug Fixes\n* [#1481](https://github.com/mondaycom/monday-ui-react-core/pull/1481) fix: removing unneeded aria-label from TextField's error message ([@LihiBechorMarkovitz](https://github.com/LihiBechorMarkovitz))\n\n## 2.25.1 (2023-08-16)\n\n#### Dependency Upgrades\n* [#1482](https://github.com/mondaycom/monday-ui-react-core/pull/1482) Upgrade monday-ui-style ([@sahariko](https://github.com/sahariko))\n\n## 2.25.0 (2023-08-16)\n\n#### Bug Fixes\n* [#1479](https://github.com/mondaycom/monday-ui-react-core/pull/1479) Fix h6 size in legacy heading ([@hadasfa](https://github.com/hadasfa))\n\n#### New Features\n* [#1475](https://github.com/mondaycom/monday-ui-react-core/pull/1475) Api changes/hadas/next ([@hadasfa](https://github.com/hadasfa))\n\n## 2.24.1 (2023-08-15)\n\n#### Bug Fixes\n* [#1477](https://github.com/mondaycom/monday-ui-react-core/pull/1477) add null check to List component for support undef children ([@hadasfa](https://github.com/hadasfa))\n\n## 2.24.0 (2023-08-15)\n\n#### New Features\n* [#1440](https://github.com/mondaycom/monday-ui-react-core/pull/1440) Heading API changes ([@hadasfa](https://github.com/hadasfa))\n\n#### Internal Changes\n* [#1474](https://github.com/mondaycom/monday-ui-react-core/pull/1474) chore: Cleanup internal css variables ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.23.1 (2023-08-14)\n\n#### Bug Fixes\n* [#1472](https://github.com/mondaycom/monday-ui-react-core/pull/1472) fix(Menu): `focusIndexOnMount` can focus on an unfocusable item ([@YossiSaadi](https://github.com/YossiSaadi))\n* [#1444](https://github.com/mondaycom/monday-ui-react-core/pull/1444) fix(SplitButton): make menu-opening a11y-compatible ([@YossiSaadi](https://github.com/YossiSaadi))\n\n#### Internal Changes\n* [#1473](https://github.com/mondaycom/monday-ui-react-core/pull/1473) chore: Storybook config cleanup ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.23.0 (2023-08-13)\n\n#### New Features\n* [#1439](https://github.com/mondaycom/monday-ui-react-core/pull/1439) feat: <List> a11y improvements ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.22.0 (2023-08-10)\n\n#### New Features\n* [#1442](https://github.com/mondaycom/monday-ui-react-core/pull/1442) Technical pattern from using dropdown in dialog and modals and support for popupsContainerSelector for displaying dropdown properly in modals ([@hadasfa](https://github.com/hadasfa))\n\n## 2.21.0 (2023-08-09)\n\n#### Bug Fixes\n* [#1468](https://github.com/mondaycom/monday-ui-react-core/pull/1468) fix: <TextField> replace icon ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### New Features\n* [#1469](https://github.com/mondaycom/monday-ui-react-core/pull/1469) feat(Tipseen): allow tipseen title to have max 2 lines ([@YossiSaadi](https://github.com/YossiSaadi))\n* [#1465](https://github.com/mondaycom/monday-ui-react-core/pull/1465) feat: <TextField/> add event as a param to onChange callback ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.20.1 (2023-08-08)\n\n#### Bug Fixes\n* [#1467](https://github.com/mondaycom/monday-ui-react-core/pull/1467) Fix specificity issues in label and in typography in general ([@hadasfa](https://github.com/hadasfa))\n\n## 2.20.0 (2023-08-08)\n\n#### New Features\n* [#1432](https://github.com/mondaycom/monday-ui-react-core/pull/1432) feat(Indicator): add new Indicator component to component library ([@YossiSaadi](https://github.com/YossiSaadi))\n\n#### Documentation\n* [#1466](https://github.com/mondaycom/monday-ui-react-core/pull/1466) chore(storybook): upgrade storybook to 6.5.10+ to enable interaction testing on Chromatic ([@YossiSaadi](https://github.com/YossiSaadi))\n\n## 2.19.2 (2023-08-07)\n\n#### Bug Fixes\n* [#1464](https://github.com/mondaycom/monday-ui-react-core/pull/1464) fix version number as css selector ([@hadasfa](https://github.com/hadasfa))\n\n## 2.19.1 (2023-08-07)\n\n#### Bug Fixes\n* [#1463](https://github.com/mondaycom/monday-ui-react-core/pull/1463) Add version to class ([@orrgottlieb](https://github.com/orrgottlieb))\n* [#1434](https://github.com/mondaycom/monday-ui-react-core/pull/1434) fix(AttentionBox): general improvements + allow ellipsis for overflowin attention box ([@YossiSaadi](https://github.com/YossiSaadi))\n\n#### Internal Changes\n* [#1392](https://github.com/mondaycom/monday-ui-react-core/pull/1392) chore: fail chromatic action check in case has visual changes ([@YossiSaadi](https://github.com/YossiSaadi))\n\n## 2.19.0 (2023-08-03)\n\n#### Bug Fixes\n* [#1459](https://github.com/mondaycom/monday-ui-react-core/pull/1459) fix: storybookComponents export - include styles ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### New Features\n* [#1452](https://github.com/mondaycom/monday-ui-react-core/pull/1452) feat(Modal): css changes, add new footer layout ([@YossiSaadi](https://github.com/YossiSaadi))\n\n## 2.18.1 (2023-08-03)\n\n#### Bug Fixes\n* [#1458](https://github.com/mondaycom/monday-ui-react-core/pull/1458) package.json fix types exports for icons and root ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.18.0 (2023-08-03)\n\n#### Bug Fixes\n* [#1456](https://github.com/mondaycom/monday-ui-react-core/pull/1456) Change vibe version number manually ([@hadasfa](https://github.com/hadasfa))\n* [#1453](https://github.com/mondaycom/monday-ui-react-core/pull/1453) Fix letter spacing in legacy heading (temp until we will able to fix in monday ui style) ([@hadasfa](https://github.com/hadasfa))\n\n#### New Features\n* [#1457](https://github.com/mondaycom/monday-ui-react-core/pull/1457) last manually change for update vibe version? ([@hadasfa](https://github.com/hadasfa))\n* [#1455](https://github.com/mondaycom/monday-ui-react-core/pull/1455) Update vibe version number manually  ([@hadasfa](https://github.com/hadasfa))\n\n#### Documentation\n* [#1454](https://github.com/mondaycom/monday-ui-react-core/pull/1454) docs: fix Shadows page usage and examples ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.17.5 (2023-08-01)\n\n#### Documentation\n* [#1451](https://github.com/mondaycom/monday-ui-react-core/pull/1451) Sergeyro/fix/update vibe storybook components ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#1450](https://github.com/mondaycom/monday-ui-react-core/pull/1450) chore: prevent from style injection to explode in server side rendering ([@shlomitc](https://github.com/shlomitc))\n\n## 2.17.4 (2023-08-01)\n\n#### Bug Fixes\n* [#1449](https://github.com/mondaycom/monday-ui-react-core/pull/1449) Fix/hadas/log fix ([@hadasfa](https://github.com/hadasfa))\n\n## 2.17.3 (2023-08-01)\n\n#### Bug Fixes\n* [#1447](https://github.com/mondaycom/monday-ui-react-core/pull/1447) Fix modal content bug: display ellipsis on modal content ([@hadasfa](https://github.com/hadasfa))\n\n## 2.17.2 (2023-08-01)\n\n#### Documentation\n* [#1445](https://github.com/mondaycom/monday-ui-react-core/pull/1445) docs: welcome page small fixes ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#1446](https://github.com/mondaycom/monday-ui-react-core/pull/1446) chore: fix internal triggers for deployment ([@shlomitc](https://github.com/shlomitc))\n* [#1441](https://github.com/mondaycom/monday-ui-react-core/pull/1441) chore: expose types for vite and next-based projects ([@shlomitc](https://github.com/shlomitc))\n* [#1443](https://github.com/mondaycom/monday-ui-react-core/pull/1443) chore(data-testid): util function does not chain id if it is falsy ([@YossiSaadi](https://github.com/YossiSaadi))\n\n## 2.17.1 (2023-07-26)\n\n#### Bug Fixes\n* [#1438](https://github.com/mondaycom/monday-ui-react-core/pull/1438) fix: <Box/> static props ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Documentation\n* [#1433](https://github.com/mondaycom/monday-ui-react-core/pull/1433) docs(API_GUIDELINES): add export instructions for type and interface ([@YossiSaadi](https://github.com/YossiSaadi))\n\n## 2.17.0 (2023-07-25)\n\n#### New Features\n* [#1431](https://github.com/mondaycom/monday-ui-react-core/pull/1431) Chips: Add WARNING color ([@benpinchas](https://github.com/benpinchas))\n* [#1403](https://github.com/mondaycom/monday-ui-react-core/pull/1403) feat(MultiStepIndicator): add ts support ([@YossiSaadi](https://github.com/YossiSaadi))\n\n#### Internal Changes\n* [#1425](https://github.com/mondaycom/monday-ui-react-core/pull/1425) PR #3 of replacing old token variants with mixins ([@hadasfa](https://github.com/hadasfa))\n* [#1430](https://github.com/mondaycom/monday-ui-react-core/pull/1430) Replace storybookComponents with vibe-storybook-components ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.16.1 (2023-07-19)\n\n#### Bug Fixes\n* [#1428](https://github.com/mondaycom/monday-ui-react-core/pull/1428) fix heading margin breaking change ([@hadasfa](https://github.com/hadasfa))\n* [#1422](https://github.com/mondaycom/monday-ui-react-core/pull/1422) fix(Chips): change border color token, do not limit chip-with-border's height ([@YossiSaadi](https://github.com/YossiSaadi))\n\n## 2.16.0 (2023-07-18)\n\n#### Bug Fixes\n* [#1421](https://github.com/mondaycom/monday-ui-react-core/pull/1421) fix(DatePicker): do not set vertical alignment to be baseline (defaults to middle) ([@YossiSaadi](https://github.com/YossiSaadi))\n\n#### New Features\n* [#1400](https://github.com/mondaycom/monday-ui-react-core/pull/1400) Convert text and title usages with mixins ([@hadasfa](https://github.com/hadasfa))\n\n#### Internal Changes\n* [#1412](https://github.com/mondaycom/monday-ui-react-core/pull/1412) Fix vibe typography instances 2 ([@hadasfa](https://github.com/hadasfa))\n\n#### New Icons\n* [#1426](https://github.com/mondaycom/monday-ui-react-core/pull/1426) Update icons - monday-ui-style 0.1.173 ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 2.15.5 (2023-07-13)\n\n#### Bug Fixes\n* [#1419](https://github.com/mondaycom/monday-ui-react-core/pull/1419) improve useState to only called once in useIsOverflowing ([@doronbrikman](https://github.com/doronbrikman))\n\n#### Documentation\n* [#1420](https://github.com/mondaycom/monday-ui-react-core/pull/1420) docs(DatePicker): set default selected days for stories ([@YossiSaadi](https://github.com/YossiSaadi))\n* [#1408](https://github.com/mondaycom/monday-ui-react-core/pull/1408) docs: change usage of Yonatan in stories to Yossi ([@YossiSaadi](https://github.com/YossiSaadi))\n\n## 2.15.4 (2023-07-12)\n\n#### New Icons\n* [#1417](https://github.com/mondaycom/monday-ui-react-core/pull/1417) Update icons - monday-ui-style 0.1.172 ([@github-actions[bot]](https://github.com/apps/github-actions))\n* [#1415](https://github.com/mondaycom/monday-ui-react-core/pull/1415) Update icons - monday-ui-style 0.1.171 ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 2.15.3 (2023-07-12)\n\n#### Bug Fixes\n* [#1416](https://github.com/mondaycom/monday-ui-react-core/pull/1416) Bug: Combobox component ts issues ([@hadasfa](https://github.com/hadasfa))\n\n#### Documentation\n* [#1414](https://github.com/mondaycom/monday-ui-react-core/pull/1414) docs: change colors descriptions ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.15.2 (2023-07-12)\n\n#### Bug Fixes\n* [#1409](https://github.com/mondaycom/monday-ui-react-core/pull/1409) fix: InteractionsTest - fix types ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Documentation\n* [#1407](https://github.com/mondaycom/monday-ui-react-core/pull/1407) docs(useSwitch): add story page for hook ([@YossiSaadi](https://github.com/YossiSaadi))\n\n#### Internal Changes\n* [#1406](https://github.com/mondaycom/monday-ui-react-core/pull/1406) test(useSwitch): add tests for hook ([@YossiSaadi](https://github.com/YossiSaadi))\n\n#### New Icons\n* [#1413](https://github.com/mondaycom/monday-ui-react-core/pull/1413) Update icons - monday-ui-style 0.1.170 ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 2.15.1 (2023-07-11)\n\n#### Bug Fixes\n* [#1404](https://github.com/mondaycom/monday-ui-react-core/pull/1404) Combobox: expose actual type instead a no argument on hover callback. ([@m-binygal](https://github.com/m-binygal))\n\n#### Documentation\n* [#1402](https://github.com/mondaycom/monday-ui-react-core/pull/1402) docs: fix storybook light theme name ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#1396](https://github.com/mondaycom/monday-ui-react-core/pull/1396) Revert \"refactor: support aria a11y in Tooltip component\" ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.15.0 (2023-07-09)\n\n#### Bug Fixes\n* [#1395](https://github.com/mondaycom/monday-ui-react-core/pull/1395) Accordion: fix vibe props are not recognized. ([@m-binygal](https://github.com/m-binygal))\n\n#### New Features\n* [#1391](https://github.com/mondaycom/monday-ui-react-core/pull/1391) refactor: support aria a11y in Tooltip component ([@YGlaubach](https://github.com/YGlaubach))\n\n#### Internal Changes\n* [#1390](https://github.com/mondaycom/monday-ui-react-core/pull/1390) chore: enable source maps in tsconfig ([@YossiSaadi](https://github.com/YossiSaadi))\n\n## 2.14.1 (2023-07-05)\n\n#### Bug Fixes\n* [#1388](https://github.com/mondaycom/monday-ui-react-core/pull/1388) Refactor modal heading ([@YGlaubach](https://github.com/YGlaubach))\n* [#1385](https://github.com/mondaycom/monday-ui-react-core/pull/1385) fix: remove Chips.sizes ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Documentation\n* [#1387](https://github.com/mondaycom/monday-ui-react-core/pull/1387) Update browserslist in docs ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.14.0 (2023-07-04)\n\n#### New Features\n* [#1384](https://github.com/mondaycom/monday-ui-react-core/pull/1384) feat: support ariaExpanded in <IconButton> ([@YGlaubach](https://github.com/YGlaubach))\n\n## 2.13.1 (2023-07-02)\n\n#### Bug Fixes\n* [#1382](https://github.com/mondaycom/monday-ui-react-core/pull/1382) fix: MultiStepIndicator - fix divider to not squeeze bullets ([@shlomitc](https://github.com/shlomitc))\n\n#### Documentation\n* [#1380](https://github.com/mondaycom/monday-ui-react-core/pull/1380) docs: Combobox - add example for the creation button ([@shlomitc](https://github.com/shlomitc))\n\n## 2.13.0 (2023-06-29)\n\n#### New Features\n* [#1375](https://github.com/mondaycom/monday-ui-react-core/pull/1375) AccordionItem: add support for custom header. ([@m-binygal](https://github.com/m-binygal))\n\n## 2.12.1 (2023-06-28)\n\n#### Bug Fixes\n* [#1369](https://github.com/mondaycom/monday-ui-react-core/pull/1369) fix: icons, interactionsTests, testIds types exports ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.12.0 (2023-06-26)\n\n#### New Features\n* [#1372](https://github.com/mondaycom/monday-ui-react-core/pull/1372) feat: Publish <GridKeyboardNavigationContext> ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1359](https://github.com/mondaycom/monday-ui-react-core/pull/1359) New title component and some docs fixes and tests ([@hadasfa](https://github.com/hadasfa))\n\n## 2.11.1 (2023-06-25)\n\n#### Bug Fixes\n* [#1370](https://github.com/mondaycom/monday-ui-react-core/pull/1370) fix: <TokenTable> tags styles overrides ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.11.0 (2023-06-25)\n\n#### Bug Fixes\n* [#1368](https://github.com/mondaycom/monday-ui-react-core/pull/1368) fix: <Text> in published-ts-components.js ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1367](https://github.com/mondaycom/monday-ui-react-core/pull/1367) Remove redundant tipseen max-width property ([@ofirmonday](https://github.com/ofirmonday))\n\n## 2.10.2 (2023-06-21)\n\n#### Documentation\n* [#1360](https://github.com/mondaycom/monday-ui-react-core/pull/1360) Add docs best practices to contribution md ([@hadasfa](https://github.com/hadasfa))\n\n#### New Icons\n* [#1361](https://github.com/mondaycom/monday-ui-react-core/pull/1361) Update icons - monday-ui-style 0.1.162 ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 2.10.1 (2023-06-21)\n\n#### Bug Fixes\n* [#1362](https://github.com/mondaycom/monday-ui-react-core/pull/1362) Fix bug on Tipseen in dark mode ([@hadasfa](https://github.com/hadasfa))\n\n## 2.10.0 (2023-06-15)\n\n#### New Features\n* [#1354](https://github.com/mondaycom/monday-ui-react-core/pull/1354) TS export components with static props - fix TS2532 ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1356](https://github.com/mondaycom/monday-ui-react-core/pull/1356) feat: <Modal> components - data-testid attributes ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### New Icons\n* [#1355](https://github.com/mondaycom/monday-ui-react-core/pull/1355) Update monday-ui-style to 0.1.160 ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## prerelease (2023-06-12)\n\n#### New Features\n* [#1323](https://github.com/mondaycom/monday-ui-react-core/pull/1323) Add tokens.css in Vibe 2.0 ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Documentation\n* [#1353](https://github.com/mondaycom/monday-ui-react-core/pull/1353) Fix dialog overview story + add come prop comments ([@hadasfa](https://github.com/hadasfa))\n\n## prerelease (2023-06-07)\n\n#### New Features\n* [#1352](https://github.com/mondaycom/monday-ui-react-core/pull/1352) added compact mode to MultiStepIndicator component ([@rami-monday](https://github.com/rami-monday))\n\n## 2.7.0 (2023-06-07)\n\n#### New Features\n* [#1342](https://github.com/mondaycom/monday-ui-react-core/pull/1342) Support dialog context menu hide trigger ([@hadasfa](https://github.com/hadasfa))\n\n## 2.6.0 (2023-06-07)\n\n#### New Features\n* [#1338](https://github.com/mondaycom/monday-ui-react-core/pull/1338) feat: <StepIndicator> font-weight redesign + small padding fixes ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Documentation\n* [#1344](https://github.com/mondaycom/monday-ui-react-core/pull/1344) Readme updates for easier contribution ([@hadasfa](https://github.com/hadasfa))\n* [#1348](https://github.com/mondaycom/monday-ui-react-core/pull/1348) chore: < Dialog > add an example for basic controlled component ([@shlomitc](https://github.com/shlomitc))\n* [#1351](https://github.com/mondaycom/monday-ui-react-core/pull/1351) docs: Rename version 2 migration file ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1345](https://github.com/mondaycom/monday-ui-react-core/pull/1345) docs: Vibe 2 migration guide ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.5.2 (2023-06-06)\n\n#### Bug Fixes\n* [#1350](https://github.com/mondaycom/monday-ui-react-core/pull/1350) fix: <ModalHeader> revert changes to margin-block-start ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.5.1 (2023-06-06)\n\n#### Bug Fixes\n* [#1343](https://github.com/mondaycom/monday-ui-react-core/pull/1343) fix: <Dropdown> multi on option delete callback ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#1347](https://github.com/mondaycom/monday-ui-react-core/pull/1347) fix: AutoSizer TS issues ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.5.0 (2023-06-05)\n\n#### Bug Fixes\n* [#1337](https://github.com/mondaycom/monday-ui-react-core/pull/1337) fix: <Tipseen> dependencies array ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### New Features\n* [#1334](https://github.com/mondaycom/monday-ui-react-core/pull/1334) feat: <Modal> custom header title ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.4.2 (2023-06-02)\n\n#### Bug Fixes\n* [#1340](https://github.com/mondaycom/monday-ui-react-core/pull/1340) fix: <Dropdown> multi fix <Chips> override with css variables ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.4.1 (2023-05-31)\n\n#### Bug Fixes\n* [#1336](https://github.com/mondaycom/monday-ui-react-core/pull/1336) fix: <Tipseen/> - override the <Tooltip/> styles by using dedicates CSS variables to prevent CSS order issue ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.4.0 (2023-05-30)\n\n#### Bug Fixes\n* [#1331](https://github.com/mondaycom/monday-ui-react-core/pull/1331) Hotfix for not throw an error on dialog when disable scroll is false ([@hadasfa](https://github.com/hadasfa))\n\n#### New Features\n* [#1125](https://github.com/mondaycom/monday-ui-react-core/pull/1125) Optimize style injection ([@orrgottlieb](https://github.com/orrgottlieb))\n\n#### Documentation\n* [#1328](https://github.com/mondaycom/monday-ui-react-core/pull/1328) Fix chips with background with the same color story ([@hadasfa](https://github.com/hadasfa))\n\n## 2.3.1 (2023-05-28)\n\n#### Bug Fixes\n* [#1324](https://github.com/mondaycom/monday-ui-react-core/pull/1324) fix: <StepsGalleryHeader> - galleryHeaderDot increase specificity ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.3.0 (2023-05-28)\n\n#### New Features\n* [#1303](https://github.com/mondaycom/monday-ui-react-core/pull/1303) Add support on close button theme for tipseen (V2) ([@hadasfa](https://github.com/hadasfa))\n\n## 2.2.0 (2023-05-24)\n\n#### Bug Fixes\n* [#1313](https://github.com/mondaycom/monday-ui-react-core/pull/1313) Fix  Menu Button TS issues ([@hadasfa](https://github.com/hadasfa))\n\n#### Internal Changes\n* [#1302](https://github.com/mondaycom/monday-ui-react-core/pull/1302) Internal: run test-workflow on pull_request - for public forks ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.1.0 (2023-05-22)\n\n#### New Features\n* [#1283](https://github.com/mondaycom/monday-ui-react-core/pull/1283) Feature/sergeyro/button brand color ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 2.0.1 (2023-05-22)\n\n#### New Icons\n* [#1298](https://github.com/mondaycom/monday-ui-react-core/pull/1298) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 2.0.0 (2023-05-16)\n\n## Breaking Changes 🔴\n* [#1254](https://github.com/mondaycom/monday-ui-react-core/pull/1254) CSS Modules migration ([@SergeyRoyt](https://github.com/SergeyRoyt))\n  * All components were migrated to CSS Modules, replacing the global CSS.\n  * Each component now expected a `data-testid` attribute set on the root element, allowing easier selection for testing (refer to [this guide](https://github.com/mondaycom/monday-ui-react-core/blob/master/API_GUIDELINES.MD#data-testids))\n\n## 1.125.2 (2023-05-16)\n\n#### Bug Fixes\n* [#1276](https://github.com/mondaycom/monday-ui-react-core/pull/1276) internal: <Counter>, <Link> - remove default props ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#1275](https://github.com/mondaycom/monday-ui-react-core/pull/1275) Internal: release process - using package_version variables - test ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.125.1 (2023-05-16)\n\n#### Bug Fixes\n* [#1264](https://github.com/mondaycom/monday-ui-react-core/pull/1264) Fix hooks exports ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Documentation\n* [#1273](https://github.com/mondaycom/monday-ui-react-core/pull/1273) docs: Colors foundation - warning colors after negative colors ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#1274](https://github.com/mondaycom/monday-ui-react-core/pull/1274) Internal: Publish storybook on workflow_dispatch ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.125.0 (2023-05-16)\n\n#### New Features\n* [#1262](https://github.com/mondaycom/monday-ui-react-core/pull/1262) add wrapper class name to loader ([@hadasfa](https://github.com/hadasfa))\n\n#### Internal Changes\n* [#1271](https://github.com/mondaycom/monday-ui-react-core/pull/1271) Release: breaking changes support ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1270](https://github.com/mondaycom/monday-ui-react-core/pull/1270) Release v1 workflow ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1269](https://github.com/mondaycom/monday-ui-react-core/pull/1269) npm publish with deprecated tag ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1267](https://github.com/mondaycom/monday-ui-react-core/pull/1267) Release deprecated workflow ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.124.4 (2023-05-15)\n\n#### Bug Fixes\n* [#1265](https://github.com/mondaycom/monday-ui-react-core/pull/1265) Docs and craft updates in components ([@hadasfa](https://github.com/hadasfa))\n\n## 1.124.3 (2023-05-11)\n\n#### Bug Fixes\n* [#1263](https://github.com/mondaycom/monday-ui-react-core/pull/1263) Passed onKeyPress, onBlur, onFocus props in EditableHeader to EditableInput ([@udidoron](https://github.com/udidoron))\n* [#1122](https://github.com/mondaycom/monday-ui-react-core/pull/1122) Basic dialog docs (only basic variants and examples) ([@hadasfa](https://github.com/hadasfa))\n\n#### Documentation\n* [#1258](https://github.com/mondaycom/monday-ui-react-core/pull/1258) fix: <RadioButton/> - fix name not displayed in the docs ([@shlomitc](https://github.com/shlomitc))\n* [#1256](https://github.com/mondaycom/monday-ui-react-core/pull/1256) chore: fix typography docs to map to the exact typography css vars ([@shlomitc](https://github.com/shlomitc))\n* [#1255](https://github.com/mondaycom/monday-ui-react-core/pull/1255) chore: <Avatar/>, <AvatarGroup/> - update stories to show absolute urls to files and fix Avatar story to use AvatarGroup ([@shlomitc](https://github.com/shlomitc))\n\n## 1.124.2 (2023-05-08)\n\n#### Bug Fixes\n* [#1257](https://github.com/mondaycom/monday-ui-react-core/pull/1257) Fix testIds export path ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.124.1 (2023-05-04)\n\n#### Bug Fixes\n* [#1252](https://github.com/mondaycom/monday-ui-react-core/pull/1252) feat: <Dropdown> - ref forwarding ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.124.0 (2023-05-04)\n\n#### New Features\n* [#1251](https://github.com/mondaycom/monday-ui-react-core/pull/1251) Publish-storybook on release completed ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.123.0 (2023-05-04)\n\n#### Bug Fixes\n* [#1248](https://github.com/mondaycom/monday-ui-react-core/pull/1248) chore: expose entry in types for non-ts components ([@shlomitc](https://github.com/shlomitc))\n\n#### New Features\n* [#1240](https://github.com/mondaycom/monday-ui-react-core/pull/1240) Css modules/sergeyro/attention box warning color + icons color + heading style fix ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1250](https://github.com/mondaycom/monday-ui-react-core/pull/1250) feat: <Modal/> - allow to pass custom width ([@shlomitc](https://github.com/shlomitc))\n\n#### Documentation\n* [#1247](https://github.com/mondaycom/monday-ui-react-core/pull/1247)  Create API_GUIDELINES.MD ([@shlomitc](https://github.com/shlomitc))\n\n#### Internal Changes\n* [#1249](https://github.com/mondaycom/monday-ui-react-core/pull/1249) change install to npm ci ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.122.2 (2023-05-02)\n\n#### Bug Fixes\n* [#1244](https://github.com/mondaycom/monday-ui-react-core/pull/1244) Dropdown: customOnOptionRemove as a callback, not as a replacement for inner logic ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.122.1 (2023-04-30)\n\n#### Bug Fixes\n* [#1220](https://github.com/mondaycom/monday-ui-react-core/pull/1220) MenuItem id ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.122.0 (2023-04-24)\n\n#### New Features\n* [#1235](https://github.com/mondaycom/monday-ui-react-core/pull/1235) EditableHeading - add data-testid ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#1162](https://github.com/mondaycom/monday-ui-react-core/pull/1162) Bump webpack from 5.73.0 to 5.76.0 ([@dependabot[bot]](https://github.com/apps/dependabot))\n* [#1120](https://github.com/mondaycom/monday-ui-react-core/pull/1120) Bump loader-utils and typescript-plugin-css-modules ([@dependabot[bot]](https://github.com/apps/dependabot))\n\n## 1.121.1 (2023-04-20)\n\n#### Bug Fixes\n* [#1229](https://github.com/mondaycom/monday-ui-react-core/pull/1229) Fix margin between link and is related icon ([@hadasfa](https://github.com/hadasfa))\n\n## 1.121.0 (2023-04-20)\n\n#### New Features\n* [#1228](https://github.com/mondaycom/monday-ui-react-core/pull/1228) Add icon class name to icon button ([@hadasfa](https://github.com/hadasfa))\n\n## 1.120.0 (2023-04-20)\n\n#### New Features\n* [#1227](https://github.com/mondaycom/monday-ui-react-core/pull/1227) change background-color to background in order to allow gradient vari… ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.119.0 (2023-04-19)\n\n#### New Features\n* [#1219](https://github.com/mondaycom/monday-ui-react-core/pull/1219) Support scrollable class name for virtualized grid ([@hadasfa](https://github.com/hadasfa))\n\n#### Internal Changes\n* [#1208](https://github.com/mondaycom/monday-ui-react-core/pull/1208) refactor: ColorPicker TS Migration ([@shlomitc](https://github.com/shlomitc))\n\n## 1.118.0 (2023-04-18)\n\n#### New Features\n* [#1216](https://github.com/mondaycom/monday-ui-react-core/pull/1216) Support custom renderer in Chip component ([@hadasfa](https://github.com/hadasfa))\n\n## 1.117.0 (2023-04-18)\n\n#### New Features\n* [#1217](https://github.com/mondaycom/monday-ui-react-core/pull/1217) Add number type and onWheel prop to text field ([@or-nuri-monday](https://github.com/or-nuri-monday))\n\n#### Internal Changes\n* [#1214](https://github.com/mondaycom/monday-ui-react-core/pull/1214) Css modules comment ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.116.3 (2023-04-16)\n\n#### Bug Fixes\n* [#1212](https://github.com/mondaycom/monday-ui-react-core/pull/1212) Heading: replace padding changes with useIsOverflowing ignoreHeightOverflow prop ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.116.2 (2023-04-13)\n\n#### Bug Fixes\n* [#1206](https://github.com/mondaycom/monday-ui-react-core/pull/1206) Fix bug on split button loading state ([@hadasfa](https://github.com/hadasfa))\n\n#### New Icons\n* [#1207](https://github.com/mondaycom/monday-ui-react-core/pull/1207) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.116.1 (2023-04-10)\n\n#### Bug Fixes\n* [#1205](https://github.com/mondaycom/monday-ui-react-core/pull/1205) fix expand collapse border bug ([@hadasfa](https://github.com/hadasfa))\n\n## 1.116.0 (2023-04-09)\n\n#### Bug Fixes\n* [#1201](https://github.com/mondaycom/monday-ui-react-core/pull/1201) Fix hide border bug in expand collapse  ([@hadasfa](https://github.com/hadasfa))\n\n#### New Features\n* [#1202](https://github.com/mondaycom/monday-ui-react-core/pull/1202) Support menu button controlled active state ([@hadasfa](https://github.com/hadasfa))\n\n## 1.115.1 (2023-04-04)\n\n#### Bug Fixes\n* [#1200](https://github.com/mondaycom/monday-ui-react-core/pull/1200) Fix text field and search disabled appearance  ([@hadasfa](https://github.com/hadasfa))\n\n## 1.115.0 (2023-04-03)\n\n#### New Features\n* [#1199](https://github.com/mondaycom/monday-ui-react-core/pull/1199) TS-migration: Combobox ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.114.0 (2023-04-03)\n\n#### Bug Fixes\n* [#1197](https://github.com/mondaycom/monday-ui-react-core/pull/1197) Fix/sergeyro/sentry errors (EditableInput, VirtualizedList) ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### New Features\n* [#1187](https://github.com/mondaycom/monday-ui-react-core/pull/1187) Vibe: mock modular classnames - rollup, special entrypoint ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.113.1 (2023-03-29)\n\n#### Bug Fixes\n* [#1188](https://github.com/mondaycom/monday-ui-react-core/pull/1188) Fix/sergeyro/heading overflow ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.113.0 (2023-03-29)\n\n#### New Features\n* [#1196](https://github.com/mondaycom/monday-ui-react-core/pull/1196) Feature/sergeyro/buttons tab index props ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.112.0 (2023-03-28)\n\n#### New Features\n* [#1194](https://github.com/mondaycom/monday-ui-react-core/pull/1194) Dropdown add className props ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1193](https://github.com/mondaycom/monday-ui-react-core/pull/1193) Chips border ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.111.0 (2023-03-28)\n\n#### New Features\n* [#1192](https://github.com/mondaycom/monday-ui-react-core/pull/1192) Tooltip & Tipseen: arrowClassName ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1191](https://github.com/mondaycom/monday-ui-react-core/pull/1191) Toggle add toggleSelectedClassName ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1190](https://github.com/mondaycom/monday-ui-react-core/pull/1190) Add titleClassName props to customize TipseenTitle ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.110.0 (2023-03-26)\n\n#### Bug Fixes\n* [#1186](https://github.com/mondaycom/monday-ui-react-core/pull/1186) fix interactions test location ([@orrgottlieb](https://github.com/orrgottlieb))\n\n#### New Features\n* [#1183](https://github.com/mondaycom/monday-ui-react-core/pull/1183) change the build of css modules to calculate the hash according to co… ([@orrgottlieb](https://github.com/orrgottlieb))\n* [#1179](https://github.com/mondaycom/monday-ui-react-core/pull/1179) Support class name for search wrapper in combobox ([@hadasfa](https://github.com/hadasfa))\n\n#### Documentation\n* [#1184](https://github.com/mondaycom/monday-ui-react-core/pull/1184) Yael photo update ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.109.0 (2023-03-23)\n\n#### New Features\n* [#1180](https://github.com/mondaycom/monday-ui-react-core/pull/1180) ModalHeader: JsxElement in description ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.108.0 (2023-03-21)\n\n#### New Features\n* [#1177](https://github.com/mondaycom/monday-ui-react-core/pull/1177) add editable heading class name for inner heading ([@hadasfa](https://github.com/hadasfa))\n\n## 1.107.2 (2023-03-21)\n\n#### Bug Fixes\n* [#1176](https://github.com/mondaycom/monday-ui-react-core/pull/1176) Add classname prop to Expandable ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.107.1 (2023-03-21)\n\n#### Bug Fixes\n* [#1175](https://github.com/mondaycom/monday-ui-react-core/pull/1175) Feature/sergeyro/modal close button aria label default value ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1174](https://github.com/mondaycom/monday-ui-react-core/pull/1174) Support on attention box renderer and link ([@hadasfa](https://github.com/hadasfa))\n\n## 1.107.0 (2023-03-20)\n\n#### New Features\n* [#1172](https://github.com/mondaycom/monday-ui-react-core/pull/1172) MenuItem: add iconWrapperClassName prop ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.106.1 (2023-03-19)\n\n#### Bug Fixes\n* [#1168](https://github.com/mondaycom/monday-ui-react-core/pull/1168) Revert css modules part 1 migration ([@hadasfa](https://github.com/hadasfa))\n\n## 1.106.0 (2023-03-16)\n\n#### New Features\n* [#1165](https://github.com/mondaycom/monday-ui-react-core/pull/1165) Dummy change for checking release process ([@hadasfa](https://github.com/hadasfa))\n\n## 1.105.0 (2023-03-14)\n\n#### New Features\n* [#1160](https://github.com/mondaycom/monday-ui-react-core/pull/1160) Feature/sergeyro/link add text classname prop ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.104.1 (2023-03-13)\n\n#### Bug Fixes\n* [#1159](https://github.com/mondaycom/monday-ui-react-core/pull/1159) Fix dropdown bug when passing a damaged value ([@hadasfa](https://github.com/hadasfa))\n\n## 1.104.0 (2023-03-13)\n\n#### New Features\n* [#1158](https://github.com/mondaycom/monday-ui-react-core/pull/1158) TextField story & fix story in Chips ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.103.2 (2023-03-12)\n\n#### Bug Fixes\n* [#1134](https://github.com/mondaycom/monday-ui-react-core/pull/1134) Feature/sergeyro/css modules prerelease 1 ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.103.1 (2023-03-12)\n\n#### Bug Fixes\n* [#1157](https://github.com/mondaycom/monday-ui-react-core/pull/1157) export list item avatar ([@hadasfa](https://github.com/hadasfa))\n\n## 1.103.0 (2023-03-12)\n\n#### Bug Fixes\n* [#1155](https://github.com/mondaycom/monday-ui-react-core/pull/1155) Fix combobox bug: trigger onclick event with the wrong option when categories and options not sorted ([@hadasfa](https://github.com/hadasfa))\n\n#### New Features\n* [#1130](https://github.com/mondaycom/monday-ui-react-core/pull/1130) Feature/sergeyro/dropdown readonly ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#1154](https://github.com/mondaycom/monday-ui-react-core/pull/1154) Fix back prerelease flow ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.102.1 (2023-03-08)\n\n#### Bug Fixes\n* [#1153](https://github.com/mondaycom/monday-ui-react-core/pull/1153) Fix Heading sizes type issue ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.102.0 (2023-03-08)\n\n#### Bug Fixes\n* [#1129](https://github.com/mondaycom/monday-ui-react-core/pull/1129) set no animation on chip as default ([@hadasfa](https://github.com/hadasfa))\n\n#### New Features\n* [#1151](https://github.com/mondaycom/monday-ui-react-core/pull/1151) Feature/sergeyro/tab remove inner css overrides - new prop ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1128](https://github.com/mondaycom/monday-ui-react-core/pull/1128) Skeleton types + aria pressed + switch ([@hadasfa](https://github.com/hadasfa))\n* [#1127](https://github.com/mondaycom/monday-ui-react-core/pull/1127) Feature/sergeyro/chips elipsis tooltip ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#1152](https://github.com/mondaycom/monday-ui-react-core/pull/1152) Rename prerelease flow ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1133](https://github.com/mondaycom/monday-ui-react-core/pull/1133) Fix getStyle if no such style ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.101.1 (2023-03-02)\n\n#### Bug Fixes\n* [#1146](https://github.com/mondaycom/monday-ui-react-core/pull/1146) skeleton animation use transform ([@doronbrikman](https://github.com/doronbrikman))\n\n## 1.101.0 (2023-03-01)\n\n#### New Features\n* [#1124](https://github.com/mondaycom/monday-ui-react-core/pull/1124) Dialog, Tooltip addKeyboardHideShowTriggersByDefault prop ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#1142](https://github.com/mondaycom/monday-ui-react-core/pull/1142) Use .nvmrc and npm ci in CI ([@sahariko](https://github.com/sahariko))\n\n## 1.100.3 (2023-02-27)\n\n#### Bug Fixes\n* [#1141](https://github.com/mondaycom/monday-ui-react-core/pull/1141) Fix invalid hook referemce ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.100.2 (2023-02-27)\n\n#### Bug Fixes\n* [#1140](https://github.com/mondaycom/monday-ui-react-core/pull/1140) Fix storybook build ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.100.1 (2023-02-27)\n\n#### Bug Fixes\n* [#1139](https://github.com/mondaycom/monday-ui-react-core/pull/1139) Fix exported function ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.100.0 (2023-02-27)\n\n#### New Features\n* [#1138](https://github.com/mondaycom/monday-ui-react-core/pull/1138) add more docs ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.97.1 (2023-02-19)\n\n#### Bug Fixes\n* [#1115](https://github.com/mondaycom/monday-ui-react-core/pull/1115) Feature/sergeyro/modal fix rerendering issues ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.97.0 (2023-02-16)\n\n#### Bug Fixes\n* [#1118](https://github.com/mondaycom/monday-ui-react-core/pull/1118) Fix modal components exposion ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### New Features\n* [#1086](https://github.com/mondaycom/monday-ui-react-core/pull/1086) Add disabled param to editable input component ([@or-nuri-monday](https://github.com/or-nuri-monday))\n* [#1108](https://github.com/mondaycom/monday-ui-react-core/pull/1108) Docs/hadas/modal improvements ([@hadasfa](https://github.com/hadasfa))\n\n#### Documentation\n* [#1106](https://github.com/mondaycom/monday-ui-react-core/pull/1106) Feature/sergeyro/steps story clickable example ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1109](https://github.com/mondaycom/monday-ui-react-core/pull/1109) TextField stories - change icon in overview + fix a few typos ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1113](https://github.com/mondaycom/monday-ui-react-core/pull/1113) Fix responsive dos and dont's by change min width and fix tipseen story ([@hadasfa](https://github.com/hadasfa))\n\n## 1.96.0 (2023-02-13)\n\n#### Bug Fixes\n* [#1105](https://github.com/mondaycom/monday-ui-react-core/pull/1105) Set chips clickable behavior as default instead of extra prop for backward support and clearer API  ([@hadasfa](https://github.com/hadasfa))\n\n#### New Features\n* [#1103](https://github.com/mondaycom/monday-ui-react-core/pull/1103) Tooltip.hideShowTriggers - static property ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Documentation\n* [#1099](https://github.com/mondaycom/monday-ui-react-core/pull/1099) Feature/sergeyro/remove storybook styles overrides ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.95.3 (2023-02-08)\n\n#### Bug Fixes\n* [#1100](https://github.com/mondaycom/monday-ui-react-core/pull/1100) Fix modal zIndex breaking change ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Documentation\n* [#1097](https://github.com/mondaycom/monday-ui-react-core/pull/1097) Add founding designers to welcome page ([@hadasfa](https://github.com/hadasfa))\n\n## 1.95.2 (2023-02-07)\n\n#### Bug Fixes\n* [#1098](https://github.com/mondaycom/monday-ui-react-core/pull/1098) Fix modal title font family ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.95.1 (2023-02-06)\n\n#### Bug Fixes\n* [#1096](https://github.com/mondaycom/monday-ui-react-core/pull/1096) Feature/sergeyro/fix modal z index prop ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.95.0 (2023-02-06)\n\n#### New Features\n* [#1087](https://github.com/mondaycom/monday-ui-react-core/pull/1087) Counter: counterClassName added ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.94.1 (2023-02-06)\n\n#### Bug Fixes\n* [#1095](https://github.com/mondaycom/monday-ui-react-core/pull/1095) fix: Search component onChange callback type ([@itaymndy](https://github.com/itaymndy))\n\n## 1.94.0 (2023-02-06)\n\n#### New Features\n* [#1092](https://github.com/mondaycom/monday-ui-react-core/pull/1092) Add support for combobox optionClassName & combobox dark mode fixes ([@hadasfa](https://github.com/hadasfa))\n\n## 1.93.0 (2023-02-06)\n\n#### Bug Fixes\n* [#1093](https://github.com/mondaycom/monday-ui-react-core/pull/1093) feat(ListItemIcon): export icon size ([@shiraWeiss](https://github.com/shiraWeiss))\n\n#### New Features\n* [#1094](https://github.com/mondaycom/monday-ui-react-core/pull/1094) Modal: Add zIndex prop ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Documentation\n* [#1091](https://github.com/mondaycom/monday-ui-react-core/pull/1091) Fix docs ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.92.0 (2023-02-04)\n\n#### New Features\n* [#1090](https://github.com/mondaycom/monday-ui-react-core/pull/1090) update Figtree and Poppins ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.91.0 (2023-02-01)\n\n#### New Features\n* [#1082](https://github.com/mondaycom/monday-ui-react-core/pull/1082) Add support for \"without margin\" prop in Divider component ([@hadasfa](https://github.com/hadasfa))\n\n## 1.90.0 (2023-01-30)\n\n#### New Features\n* [#1084](https://github.com/mondaycom/monday-ui-react-core/pull/1084) Feature/sergeyro/label class name props ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.89.0 (2023-01-30)\n\n#### New Features\n* [#1080](https://github.com/mondaycom/monday-ui-react-core/pull/1080) Skeleton - wrapperClassName and fullWidth props added ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.88.1 (2023-01-29)\n\n#### Bug Fixes\n* [#1079](https://github.com/mondaycom/monday-ui-react-core/pull/1079) Update Dropdown.jsx ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.88.0 (2023-01-29)\n\n#### New Features\n* [#1070](https://github.com/mondaycom/monday-ui-react-core/pull/1070) add class names to marker and description of radiobutton ([@hadasfa](https://github.com/hadasfa))\n* [#1078](https://github.com/mondaycom/monday-ui-react-core/pull/1078) AccordionItem and ExpandAble preparation for css modules transition ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.87.0 (2023-01-26)\n\n#### Bug Fixes\n* [#1075](https://github.com/mondaycom/monday-ui-react-core/pull/1075) Tipseen: snapshot tests & fix bug on onDismiss and onSubmit overrides ([@hadasfa](https://github.com/hadasfa))\n\n#### New Features\n* [#1077](https://github.com/mondaycom/monday-ui-react-core/pull/1077) Feature/sergeyro/avatar classname props ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Documentation\n* [#1074](https://github.com/mondaycom/monday-ui-react-core/pull/1074) Docs/hadas/responsive list docs ([@hadasfa](https://github.com/hadasfa))\n\n#### Internal Changes\n* [#1076](https://github.com/mondaycom/monday-ui-react-core/pull/1076) small tipseen test fix ([@hadasfa](https://github.com/hadasfa))\n\n## 1.86.3 (2023-01-25)\n\n#### Bug Fixes\n* [#1072](https://github.com/mondaycom/monday-ui-react-core/pull/1072) Fix tipssen hide close button ([@hadasfa](https://github.com/hadasfa))\n\n## 1.86.2 (2023-01-23)\n\n#### Bug Fixes\n* [#1056](https://github.com/mondaycom/monday-ui-react-core/pull/1056) Feature/sergeyro/fix chips dropdown alignment ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.86.1 (2023-01-22)\n\n#### Bug Fixes\n* [#1055](https://github.com/mondaycom/monday-ui-react-core/pull/1055) Feature/sergeyro/fix clickable chips breaking changes ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.86.0 (2023-01-22)\n\n#### New Features\n* [#1071](https://github.com/mondaycom/monday-ui-react-core/pull/1071) Expose Vibe components and related TS types ([@hadasfa](https://github.com/hadasfa))\n\n## 1.85.0 (2023-01-18)\n\n#### New Features\n* [#1067](https://github.com/mondaycom/monday-ui-react-core/pull/1067) Checkbox: checkbox and label className props ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.84.4 (2023-01-18)\n\n#### Bug Fixes\n* [#1069](https://github.com/mondaycom/monday-ui-react-core/pull/1069) fix center loader  ([@hadasfa](https://github.com/hadasfa))\n\n## 1.84.3 (2023-01-18)\n\n#### Bug Fixes\n* [#1068](https://github.com/mondaycom/monday-ui-react-core/pull/1068) Fix/hadas/center loader ([@hadasfa](https://github.com/hadasfa))\n\n## 1.84.2 (2023-01-17)\n\n#### Bug Fixes\n* [#1064](https://github.com/mondaycom/monday-ui-react-core/pull/1064) fix dropdown with modal/dialog state (support scroll inside dropdown) ([@hadasfa](https://github.com/hadasfa))\n\n## 1.84.1 (2023-01-16)\n\n#### Bug Fixes\n* [#1066](https://github.com/mondaycom/monday-ui-react-core/pull/1066) move lodash-es from devDependencies to dependencies ([@eran-cohen](https://github.com/eran-cohen))\n\n## 1.84.0 (2023-01-16)\n\n#### Bug Fixes\n* [#1065](https://github.com/mondaycom/monday-ui-react-core/pull/1065) fix inject location ([@orrgottlieb](https://github.com/orrgottlieb))\n\n#### New Features\n* [#1051](https://github.com/mondaycom/monday-ui-react-core/pull/1051) Tipseen TS-migration ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Dependency Upgrades\n* [#1063](https://github.com/mondaycom/monday-ui-react-core/pull/1063) Use lodash-es instead of lodash - to align our dependency and better support esm ([@mentaman](https://github.com/mentaman))\n\n#### Documentation\n* [#1060](https://github.com/mondaycom/monday-ui-react-core/pull/1060) AvatarGroup: teams use case fix ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.83.3 (2023-01-13)\n\n#### Bug Fixes\n* [#1062](https://github.com/mondaycom/monday-ui-react-core/pull/1062) fix link to build ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.83.2 (2023-01-12)\n\n#### Bug Fixes\n* [#1061](https://github.com/mondaycom/monday-ui-react-core/pull/1061) Fix all icons ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.83.1 (2023-01-12)\n\n#### Bug Fixes\n* [#1059](https://github.com/mondaycom/monday-ui-react-core/pull/1059) fix mapping ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.83.0 (2023-01-12)\n\n#### New Features\n* [#1058](https://github.com/mondaycom/monday-ui-react-core/pull/1058) added name prop to textField ([@etaylib](https://github.com/etaylib))\n\n## 1.82.0 (2023-01-12)\n\n#### Bug Fixes\n* [#1057](https://github.com/mondaycom/monday-ui-react-core/pull/1057) fix css build issue :( ([@orrgottlieb](https://github.com/orrgottlieb))\n\n#### New Features\n* [#1049](https://github.com/mondaycom/monday-ui-react-core/pull/1049) Feature/sergeyro/unify icon sizes list menu ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Documentation\n* [#1054](https://github.com/mondaycom/monday-ui-react-core/pull/1054) Change welcome page to display current team ([@hadasfa](https://github.com/hadasfa))\n* [#1053](https://github.com/mondaycom/monday-ui-react-core/pull/1053) Revert \"Fix storybook menu colors (#1050)\" ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1052](https://github.com/mondaycom/monday-ui-react-core/pull/1052) Clickable chips redesign story ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1050](https://github.com/mondaycom/monday-ui-react-core/pull/1050) Fix storybook menu colors ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.81.0 (2022-12-28)\n\n#### New Features\n* [#1048](https://github.com/mondaycom/monday-ui-react-core/pull/1048) Feature/sergeyro/icon button tooltipProps ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.80.1 (2022-12-27)\n\n#### Bug Fixes\n* [#1047](https://github.com/mondaycom/monday-ui-react-core/pull/1047) Increase Tipseen styles specificity to override Tooltip styles ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.80.0 (2022-12-27)\n\n#### New Features\n* [#1045](https://github.com/mondaycom/monday-ui-react-core/pull/1045) Feature/sergeyro/more of dialog container selectors ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#1013](https://github.com/mondaycom/monday-ui-react-core/pull/1013) Feature/sergeyro/ts migration menu ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#995](https://github.com/mondaycom/monday-ui-react-core/pull/995) Dialog, DialogContent, MenuButton: TS-migration ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.79.2 (2022-12-25)\n\n#### Bug Fixes\n* [#1043](https://github.com/mondaycom/monday-ui-react-core/pull/1043) Revert \"Heading Weights\" ([@hadasfa](https://github.com/hadasfa))\n\n## 1.79.1 (2022-12-22)\n\n#### Bug Fixes\n* [#1042](https://github.com/mondaycom/monday-ui-react-core/pull/1042) Revert \"TS-migration: Tipseen + some constants usage refactoring (#998)\" ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.79.0 (2022-12-21)\n\n#### Bug Fixes\n* [#1040](https://github.com/mondaycom/monday-ui-react-core/pull/1040) Fix TabList undefined error ([@MosheZemah](https://github.com/MosheZemah))\n\n#### New Features\n* [#1041](https://github.com/mondaycom/monday-ui-react-core/pull/1041) Heading Weights ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.78.2 (2022-12-19)\n\n#### Bug Fixes\n* [#1037](https://github.com/mondaycom/monday-ui-react-core/pull/1037) Same behaviour for active button ,active split button and active icon button ([@hadasfa](https://github.com/hadasfa))\n\n## 1.78.1 (2022-12-19)\n\n#### Bug Fixes\n* [#1038](https://github.com/mondaycom/monday-ui-react-core/pull/1038) export date picker as part of esm ([@hadasfa](https://github.com/hadasfa))\n\n## 1.78.0 (2022-12-19)\n\n#### Bug Fixes\n* [#1039](https://github.com/mondaycom/monday-ui-react-core/pull/1039) Import react to prevent cypress tests (in docs team e.g.) from failing ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### New Features\n* [#1018](https://github.com/mondaycom/monday-ui-react-core/pull/1018) Feature/sergeyro/chips hovered state + clickable ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Documentation\n* [#1036](https://github.com/mondaycom/monday-ui-react-core/pull/1036) Accessability story navigation fix ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#1032](https://github.com/mondaycom/monday-ui-react-core/pull/1032) Icon: follow create component best practices. ([@m-binygal](https://github.com/m-binygal))\n* [#998](https://github.com/mondaycom/monday-ui-react-core/pull/998) TS-migration: Tipseen + some constants usage refactoring ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.77.0 (2022-12-14)\n\n#### Bug Fixes\n* [#1028](https://github.com/mondaycom/monday-ui-react-core/pull/1028) Fix AvatarGroup tooltip keyboard navigation: fix checkWithoutModifierInEvent ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1031](https://github.com/mondaycom/monday-ui-react-core/pull/1031) Fix interactions-utils imports in RadioButton ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### New Features\n* [#1034](https://github.com/mondaycom/monday-ui-react-core/pull/1034) MenuButton: allow to specify position of an icon ([@arutkowski00](https://github.com/arutkowski00))\n* [#1035](https://github.com/mondaycom/monday-ui-react-core/pull/1035) Feature/sergeyro/export test infra ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Documentation\n* [#1033](https://github.com/mondaycom/monday-ui-react-core/pull/1033) Test readme markdown fixes ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1026](https://github.com/mondaycom/monday-ui-react-core/pull/1026) Add interactions basic readme file ([@hadasfa](https://github.com/hadasfa))\n\n## 1.76.0 (2022-12-04)\n\n#### Bug Fixes\n* [#1029](https://github.com/mondaycom/monday-ui-react-core/pull/1029) close while scrolling with in dialog/modal mode ([@hadasfa](https://github.com/hadasfa))\n* [#996](https://github.com/mondaycom/monday-ui-react-core/pull/996) RadioButton: add disabled-text-color ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1027](https://github.com/mondaycom/monday-ui-react-core/pull/1027) Remove indicator hover state when dropdown is disabled ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1010](https://github.com/mondaycom/monday-ui-react-core/pull/1010) Feature/sergeyro/dropdown disabled color fix ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### New Features\n* [#1025](https://github.com/mondaycom/monday-ui-react-core/pull/1025) Export interactions 2 ([@hadasfa](https://github.com/hadasfa))\n\n## 1.75.2 (2022-11-30)\n\n#### Dependency Upgrades\n* [#1024](https://github.com/mondaycom/monday-ui-react-core/pull/1024) Import optimizations ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.75.1 (2022-11-29)\n\n#### Dependency Upgrades\n* [#1023](https://github.com/mondaycom/monday-ui-react-core/pull/1023) remove docgen on production build ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.75.0 (2022-11-29)\n\n#### New Features\n* [#1022](https://github.com/mondaycom/monday-ui-react-core/pull/1022) Revert \"Interactions tests exports (#1004)\" ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.74.2 (2022-11-29)\n\n#### Bug Fixes\n* [#1021](https://github.com/mondaycom/monday-ui-react-core/pull/1021) revert changes ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.74.1 (2022-11-29)\n\n#### Dependency Upgrades\n* [#1020](https://github.com/mondaycom/monday-ui-react-core/pull/1020) remove not needed packages ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.74.0 (2022-11-29)\n\n#### New Features\n* [#1019](https://github.com/mondaycom/monday-ui-react-core/pull/1019) remove docogen from build ([@orrgottlieb](https://github.com/orrgottlieb))\n* [#1004](https://github.com/mondaycom/monday-ui-react-core/pull/1004) Interactions tests exports ([@hadasfa](https://github.com/hadasfa))\n\n## 1.73.13 (2022-11-29)\n\n#### Bug Fixes\n* [#1016](https://github.com/mondaycom/monday-ui-react-core/pull/1016) Hot fix after external PR ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.73.12 (2022-11-29)\n\n#### Bug Fixes\n* [#1007](https://github.com/mondaycom/monday-ui-react-core/pull/1007) Fix ability to display dropdown menu inside dialog or modal ([@hadasfa](https://github.com/hadasfa))\n\n#### Internal Changes\n* [#986](https://github.com/mondaycom/monday-ui-react-core/pull/986) TS-Migration: Reduced amount of ts-ignore ([@khitrind](https://github.com/khitrind))\n\n## 1.73.11 (2022-11-28)\n\n#### New Icons\n* [#1015](https://github.com/mondaycom/monday-ui-react-core/pull/1015) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.73.10 (2022-11-28)\n\n#### Bug Fixes\n* [#999](https://github.com/mondaycom/monday-ui-react-core/pull/999) Support all edge cases for multi select drop with counter (hidden chips in dropdown with defined width edge case) ([@hadasfa](https://github.com/hadasfa))\n\n## 1.73.9 (2022-11-28)\n\n#### Bug Fixes\n* [#1014](https://github.com/mondaycom/monday-ui-react-core/pull/1014) fix letter spacing in non h1 headers ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.73.8 (2022-11-27)\n\n#### Bug Fixes\n* [#1012](https://github.com/mondaycom/monday-ui-react-core/pull/1012) Heading font ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.73.7 (2022-11-27)\n\n#### Bug Fixes\n* [#1011](https://github.com/mondaycom/monday-ui-react-core/pull/1011) Heading component main font ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.73.6 (2022-11-27)\n\n#### Bug Fixes\n* [#1009](https://github.com/mondaycom/monday-ui-react-core/pull/1009) Fix editable heading bug ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.73.5 (2022-11-27)\n\n#### Bug Fixes\n* [#1008](https://github.com/mondaycom/monday-ui-react-core/pull/1008) Fix attention box icon bug ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.73.4 (2022-11-27)\n\n#### Bug Fixes\n* [#1003](https://github.com/mondaycom/monday-ui-react-core/pull/1003) align usages ([@orrgottlieb](https://github.com/orrgottlieb))\n\n#### Internal Changes\n* [#1006](https://github.com/mondaycom/monday-ui-react-core/pull/1006) TS-migration: Flex ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#1005](https://github.com/mondaycom/monday-ui-react-core/pull/1005) Feature/sergeyro/split button improve tests ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### New Icons\n* [#1002](https://github.com/mondaycom/monday-ui-react-core/pull/1002) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.73.3 (2022-11-22)\n\n#### Bug Fixes\n* [#1001](https://github.com/mondaycom/monday-ui-react-core/pull/1001) Fix: Revert splitButton default props to old-fashioned defaultProps ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.73.2 (2022-11-22)\n\n#### Bug Fixes\n* [#1000](https://github.com/mondaycom/monday-ui-react-core/pull/1000) SplitButton temp fix - secondary button no click event ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.73.1 (2022-11-22)\n\n#### Bug Fixes\n* [#994](https://github.com/mondaycom/monday-ui-react-core/pull/994) Display avatar/icon in single value and in options for multi and single ([@hadasfa](https://github.com/hadasfa))\n\n## 1.73.0 (2022-11-20)\n\n#### New Features\n* [#973](https://github.com/mondaycom/monday-ui-react-core/pull/973) Feature/sergeyro/export storybook components ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.72.0 (2022-11-20)\n\n#### New Features\n* [#993](https://github.com/mondaycom/monday-ui-react-core/pull/993) support tab index for text field ([@etaylib](https://github.com/etaylib))\n\n#### New Icons\n* [#992](https://github.com/mondaycom/monday-ui-react-core/pull/992) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.71.3 (2022-11-20)\n\n#### Internal Changes\n* [#931](https://github.com/mondaycom/monday-ui-react-core/pull/931) AvatarGroup Typescript migration ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#984](https://github.com/mondaycom/monday-ui-react-core/pull/984) TS-migration: EditableInput ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#964](https://github.com/mondaycom/monday-ui-react-core/pull/964) ExpandCollapse: TS-migration ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#981](https://github.com/mondaycom/monday-ui-react-core/pull/981) TS-migration: VirtualizedList ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#989](https://github.com/mondaycom/monday-ui-react-core/pull/989) Install `style-inject` explicitly ([@sahariko](https://github.com/sahariko))\n* [#988](https://github.com/mondaycom/monday-ui-react-core/pull/988) Rollup ([@sahariko](https://github.com/sahariko))\n\n#### New Icons\n* [#990](https://github.com/mondaycom/monday-ui-react-core/pull/990) Bump monday-ui-styles version to \"0.1.144\": team icon ([@3dyonic](https://github.com/3dyonic))\n\n## 1.71.2 (2022-11-16)\n\n#### Bug Fixes\n* [#985](https://github.com/mondaycom/monday-ui-react-core/pull/985) Check if contributorsJson is an array before filtering ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#954](https://github.com/mondaycom/monday-ui-react-core/pull/954) Skeleton: TS-migration ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#959](https://github.com/mondaycom/monday-ui-react-core/pull/959) TS-migration: Steps ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#980](https://github.com/mondaycom/monday-ui-react-core/pull/980) TS-migration: VirtualizedGrid ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#960](https://github.com/mondaycom/monday-ui-react-core/pull/960) Modal: TS-migration ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#947](https://github.com/mondaycom/monday-ui-react-core/pull/947) SplitButton: Typescript migration ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#961](https://github.com/mondaycom/monday-ui-react-core/pull/961) Toast: TS-migration ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#978](https://github.com/mondaycom/monday-ui-react-core/pull/978) TS-migration: LinearProgressBar, Bar ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### New Icons\n* [#987](https://github.com/mondaycom/monday-ui-react-core/pull/987) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.71.1 (2022-11-13)\n\n#### New Icons\n* [#979](https://github.com/mondaycom/monday-ui-react-core/pull/979) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.71.0 (2022-11-13)\n\n#### New Features\n* [#983](https://github.com/mondaycom/monday-ui-react-core/pull/983) dropdown component tooltip ([@liorswM](https://github.com/liorswM))\n\n## 1.70.2 (2022-11-10)\n\n#### Bug Fixes\n* [#982](https://github.com/mondaycom/monday-ui-react-core/pull/982) Fix tooltip-arrow color to adapt to the theme ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.70.1 (2022-11-09)\n\n#### Bug Fixes\n* [#974](https://github.com/mondaycom/monday-ui-react-core/pull/974) ComboboxItems: add categories to calculations. ([@m-binygal](https://github.com/m-binygal))\n\n#### Documentation\n* [#975](https://github.com/mondaycom/monday-ui-react-core/pull/975) Fix storybook box overview code ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#976](https://github.com/mondaycom/monday-ui-react-core/pull/976) add source maps ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.70.0 (2022-11-02)\n\n#### New Features\n* [#970](https://github.com/mondaycom/monday-ui-react-core/pull/970) tipseen tip prop ([@liorswM](https://github.com/liorswM))\n\n## 1.69.3 (2022-11-02)\n\n#### Bug Fixes\n* [#969](https://github.com/mondaycom/monday-ui-react-core/pull/969) fix accordion publish ([@hadasfa](https://github.com/hadasfa))\n\n## 1.69.2 (2022-11-02)\n\n#### Bug Fixes\n* [#968](https://github.com/mondaycom/monday-ui-react-core/pull/968) Fix bug: scroll inside dropdown in overflow mode ([@hadasfa](https://github.com/hadasfa))\n\n#### Internal Changes\n* [#967](https://github.com/mondaycom/monday-ui-react-core/pull/967) Box: ts-migration  ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#966](https://github.com/mondaycom/monday-ui-react-core/pull/966) Fix DatePicker tests + refactor ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#965](https://github.com/mondaycom/monday-ui-react-core/pull/965) Accordion: ts-migration - refactoring ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#963](https://github.com/mondaycom/monday-ui-react-core/pull/963) Migrate Accordion to TypeScript ([@aayushbisen](https://github.com/aayushbisen))\n\n## 1.69.1 (2022-10-26)\n\n#### Bug Fixes\n* [#962](https://github.com/mondaycom/monday-ui-react-core/pull/962) add support for import css files ([@neilmon](https://github.com/neilmon))\n\n#### Internal Changes\n* [#956](https://github.com/mondaycom/monday-ui-react-core/pull/956) TS fixes: add SubIcon and Element types + remove default props ([@hadasfa](https://github.com/hadasfa))\n\n## 1.69.0 (2022-10-25)\n\n#### New Features\n* [#875](https://github.com/mondaycom/monday-ui-react-core/pull/875) Neil/date picker ([@neilmon](https://github.com/neilmon))\n\n#### Documentation\n* [#932](https://github.com/mondaycom/monday-ui-react-core/pull/932) Add docs about change publish component files for every ts migration update ([@hadasfa](https://github.com/hadasfa))\n\n#### Internal Changes\n* [#949](https://github.com/mondaycom/monday-ui-react-core/pull/949) Slider and all sub-components: TS-migration ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#958](https://github.com/mondaycom/monday-ui-react-core/pull/958) Tab: TS-migration ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#951](https://github.com/mondaycom/monday-ui-react-core/pull/951) TextField: TS migration ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#955](https://github.com/mondaycom/monday-ui-react-core/pull/955) Toggle: TS-migration ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#957](https://github.com/mondaycom/monday-ui-react-core/pull/957) Fix dialog container after external contribution ([@hadasfa](https://github.com/hadasfa))\n* [#933](https://github.com/mondaycom/monday-ui-react-core/pull/933) refactor: migrate DialogContentContainer to typescript ([@vishal-codes](https://github.com/vishal-codes))\n\n## 1.68.3 (2022-10-23)\n\n#### Bug Fixes\n* [#952](https://github.com/mondaycom/monday-ui-react-core/pull/952) For \"getElementColor\" function return, add missing ')'. ([@3dyonic](https://github.com/3dyonic))\n* [#943](https://github.com/mondaycom/monday-ui-react-core/pull/943) fix: onClose can be undefined when hidding the modal ([@gaspoute](https://github.com/gaspoute))\n\n#### Internal Changes\n* [#945](https://github.com/mondaycom/monday-ui-react-core/pull/945) BreadcrumbsBar Typescript migration ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#935](https://github.com/mondaycom/monday-ui-react-core/pull/935) Heading Typescript migration ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#938](https://github.com/mondaycom/monday-ui-react-core/pull/938) List Typescript migration ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#941](https://github.com/mondaycom/monday-ui-react-core/pull/941) AlertBanner: Typescript migration ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#934](https://github.com/mondaycom/monday-ui-react-core/pull/934) Plop Typescript migration ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#862](https://github.com/mondaycom/monday-ui-react-core/pull/862) Loader Typescript migration ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#950](https://github.com/mondaycom/monday-ui-react-core/pull/950) fix button group after migration ([@hadasfa](https://github.com/hadasfa))\n* [#948](https://github.com/mondaycom/monday-ui-react-core/pull/948) refactor(ButtonGroup): migrate ButtonGroup to TypeScript ([@aayushbisen](https://github.com/aayushbisen))\n* [#937](https://github.com/mondaycom/monday-ui-react-core/pull/937) Ts/hadas/tooltip ([@hadasfa](https://github.com/hadasfa))\n* [#946](https://github.com/mondaycom/monday-ui-react-core/pull/946) Search Typescript migration ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.68.2 (2022-10-18)\n\n#### Bug Fixes\n* [#939](https://github.com/mondaycom/monday-ui-react-core/pull/939) Fix attention box migration to ts ([@hadasfa](https://github.com/hadasfa))\n\n## 1.68.1 (2022-10-18)\n\n#### Bug Fixes\n* [#944](https://github.com/mondaycom/monday-ui-react-core/pull/944) Revert release version ([@eran-cohen](https://github.com/eran-cohen))\n* [#942](https://github.com/mondaycom/monday-ui-react-core/pull/942) fix attentionBox snapshot ([@eran-cohen](https://github.com/eran-cohen))\n* [#940](https://github.com/mondaycom/monday-ui-react-core/pull/940) added some docs to modal component ([@eran-cohen](https://github.com/eran-cohen))\n* [#928](https://github.com/mondaycom/monday-ui-react-core/pull/928) modal css fixes ([@eran-cohen](https://github.com/eran-cohen))\n\n#### Dependency Upgrades\n* [#901](https://github.com/mondaycom/monday-ui-react-core/pull/901) upgrade deps ([@orrgottlieb](https://github.com/orrgottlieb))\n\n#### Internal Changes\n* [#925](https://github.com/mondaycom/monday-ui-react-core/pull/925) refactor: migrate AttentionBox to typescript ([@SumeetHaryani](https://github.com/SumeetHaryani))\n* [#930](https://github.com/mondaycom/monday-ui-react-core/pull/930) Fixes in chips migration to ts ([@hadasfa](https://github.com/hadasfa))\n* [#926](https://github.com/mondaycom/monday-ui-react-core/pull/926) Chips Typescript Migration ([@manastelavane](https://github.com/manastelavane))\n* [#929](https://github.com/mondaycom/monday-ui-react-core/pull/929) move IconButton to ts components list ([@eran-cohen](https://github.com/eran-cohen))\n* [#924](https://github.com/mondaycom/monday-ui-react-core/pull/924) refactor: migrate IconButton to typescript ([@SumeetHaryani](https://github.com/SumeetHaryani))\n* [#921](https://github.com/mondaycom/monday-ui-react-core/pull/921) refactor: migrate Avatar to typescript ([@SumeetHaryani](https://github.com/SumeetHaryani))\n* [#913](https://github.com/mondaycom/monday-ui-react-core/pull/913) Convert label to typescript ([@bautistaaa](https://github.com/bautistaaa))\n* [#914](https://github.com/mondaycom/monday-ui-react-core/pull/914) Migrate hiddentext to ts ([@bautistaaa](https://github.com/bautistaaa))\n* [#916](https://github.com/mondaycom/monday-ui-react-core/pull/916) refactor: migrate Divider in typescript ([@aayushbisen](https://github.com/aayushbisen))\n* [#918](https://github.com/mondaycom/monday-ui-react-core/pull/918) Migrated Radio Button to typescript ([@Suman94310](https://github.com/Suman94310))\n* [#917](https://github.com/mondaycom/monday-ui-react-core/pull/917) refactor(Banner): Migrated from JS to TS ([@suvnshr](https://github.com/suvnshr))\n* [#915](https://github.com/mondaycom/monday-ui-react-core/pull/915) feat: migrate FormattedNumber to ts ([@indremak](https://github.com/indremak))\n* [#907](https://github.com/mondaycom/monday-ui-react-core/pull/907) Migrate Counter component to TS. ([@a11rew](https://github.com/a11rew))\n* [#906](https://github.com/mondaycom/monday-ui-react-core/pull/906) migrate Link component to TypeScript ([@ercusz](https://github.com/ercusz))\n* [#897](https://github.com/mondaycom/monday-ui-react-core/pull/897) convert helpers/utils to typescript ([@orrgottlieb](https://github.com/orrgottlieb))\n\n#### New Icons\n* [#902](https://github.com/mondaycom/monday-ui-react-core/pull/902) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.68.0 (2022-10-02)\n\n#### New Features\n* [#884](https://github.com/mondaycom/monday-ui-react-core/pull/884) Feature/sergeyro/font change ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.67.1 (2022-09-29)\n\n#### Bug Fixes\n* [#890](https://github.com/mondaycom/monday-ui-react-core/pull/890) fix css issue ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.67.0 (2022-09-28)\n\n#### New Features\n* [#696](https://github.com/mondaycom/monday-ui-react-core/pull/696) Modal ([@eran-cohen](https://github.com/eran-cohen))\n\n#### New Icons\n* [#888](https://github.com/mondaycom/monday-ui-react-core/pull/888) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.66.1 (2022-09-22)\n\n#### Bug Fixes\n* [#887](https://github.com/mondaycom/monday-ui-react-core/pull/887) fix import path from absolute to relative. ([@3dyonic](https://github.com/3dyonic))\n* [#886](https://github.com/mondaycom/monday-ui-react-core/pull/886) Tooltip: increase specifity of monday-style-arrow-${theme} classes ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.66.0 (2022-09-21)\n\n#### New Features\n* [#882](https://github.com/mondaycom/monday-ui-react-core/pull/882) Feature/refactor components motion keyframes ([@3dyonic](https://github.com/3dyonic))\n\n## 1.65.0 (2022-09-21)\n\n#### New Features\n* [#883](https://github.com/mondaycom/monday-ui-react-core/pull/883) fix externals issue ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.64.2 (2022-09-20)\n\n#### Bug Fixes\n* [#879](https://github.com/mondaycom/monday-ui-react-core/pull/879) Fix flex grow loading state size. ([@3dyonic](https://github.com/3dyonic))\n\n## 1.64.1 (2022-09-20)\n\n#### Bug Fixes\n* [#880](https://github.com/mondaycom/monday-ui-react-core/pull/880) Fix Virtualized list items ([@MosheZemah](https://github.com/MosheZemah))\n\n## 1.64.0 (2022-09-20)\n\n#### Bug Fixes\n* [#876](https://github.com/mondaycom/monday-ui-react-core/pull/876) Fix for virtualized list items ([@MosheZemah](https://github.com/MosheZemah))\n\n#### New Features\n* [#873](https://github.com/mondaycom/monday-ui-react-core/pull/873) add on hover to list item ([@liatmaor](https://github.com/liatmaor))\n\n#### Documentation\n* [#872](https://github.com/mondaycom/monday-ui-react-core/pull/872) add readme for typescript migration process ([@hadasfa](https://github.com/hadasfa))\n\n#### Internal Changes\n* [#869](https://github.com/mondaycom/monday-ui-react-core/pull/869) Hooks ts ([@orrgottlieb](https://github.com/orrgottlieb))\n\n#### New Icons\n* [#877](https://github.com/mondaycom/monday-ui-react-core/pull/877) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.63.1 (2022-09-15)\n\n#### Bug Fixes\n* [#874](https://github.com/mondaycom/monday-ui-react-core/pull/874) fix icon types import ([@eran-cohen](https://github.com/eran-cohen))\n\n#### Internal Changes\n* [#870](https://github.com/mondaycom/monday-ui-react-core/pull/870) Feature/sergeyro/ts infra css modules ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### New Icons\n* [#871](https://github.com/mondaycom/monday-ui-react-core/pull/871) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.63.0 (2022-09-14)\n\n#### New Features\n* [#857](https://github.com/mondaycom/monday-ui-react-core/pull/857) Convert icon component and related code to js ([@hadasfa](https://github.com/hadasfa))\n\n#### Internal Changes\n* [#858](https://github.com/mondaycom/monday-ui-react-core/pull/858) Css modules typescript infra via 'typescript-plugin-css-modules' + eslint ts specification ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.62.1 (2022-09-11)\n\n#### Bug Fixes\n* [#866](https://github.com/mondaycom/monday-ui-react-core/pull/866) Fixing Chips import by changing to relative import ([@yardenli](https://github.com/yardenli))\n\n## 1.62.0 (2022-09-11)\n\n#### Bug Fixes\n* [#859](https://github.com/mondaycom/monday-ui-react-core/pull/859) Feature/sergeyro/menu button icon size unify ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### New Features\n* [#864](https://github.com/mondaycom/monday-ui-react-core/pull/864) Chip colors in dropdown with multi support ([@yardenli](https://github.com/yardenli))\n\n#### Internal Changes\n* [#860](https://github.com/mondaycom/monday-ui-react-core/pull/860) Feature/sergeyro/build react icons typescript ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.61.0 (2022-09-07)\n\n#### New Features\n* [#861](https://github.com/mondaycom/monday-ui-react-core/pull/861) Fix menu button ref ([@hadasfa](https://github.com/hadasfa))\n\n## 1.60.0 (2022-09-06)\n\n#### New Features\n* [#856](https://github.com/mondaycom/monday-ui-react-core/pull/856) feat(checkbox): add ability to render component without label ([@niksa-monday](https://github.com/niksa-monday))\n\n#### Internal Changes\n* [#794](https://github.com/mondaycom/monday-ui-react-core/pull/794) Convert button component to typescript & project configurations  ([@hadasfa](https://github.com/hadasfa))\n\n## 1.59.1 (2022-09-04)\n\n#### Bug Fixes\n* [#854](https://github.com/mondaycom/monday-ui-react-core/pull/854) add support for menus inside a container which using transform function ([@hadasfa](https://github.com/hadasfa))\n\n## 1.59.0 (2022-09-02)\n\n#### Bug Fixes\n* [#839](https://github.com/mondaycom/monday-ui-react-core/pull/839) Feature/sergeyro/accordion collapse icon not clickable ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### New Features\n* [#852](https://github.com/mondaycom/monday-ui-react-core/pull/852) Add Horizontal virtualized list ([@MosheZemah](https://github.com/MosheZemah))\n\n#### Internal Changes\n* [#845](https://github.com/mondaycom/monday-ui-react-core/pull/845) Feature/sergeyro/disable styleint rule for global pseudo class ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.58.1 (2022-08-31)\n\n#### Bug Fixes\n* [#849](https://github.com/mondaycom/monday-ui-react-core/pull/849) Fix close on scroll in inside scroll state ([@hadasfa](https://github.com/hadasfa))\n\n## 1.58.0 (2022-08-31)\n\n#### Bug Fixes\n* [#840](https://github.com/mondaycom/monday-ui-react-core/pull/840) Fix avatar group dependencies without effect behivour ([@hadasfa](https://github.com/hadasfa))\n\n#### New Features\n* [#848](https://github.com/mondaycom/monday-ui-react-core/pull/848) Support new dropdown state for displaying menu inside scrollable dialog ([@hadasfa](https://github.com/hadasfa))\n* [#847](https://github.com/mondaycom/monday-ui-react-core/pull/847) Export content color ([@or-nuri-monday](https://github.com/or-nuri-monday))\n* [#832](https://github.com/mondaycom/monday-ui-react-core/pull/832) Feature/sergeyro/chips close button aria label ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.57.0 (2022-08-24)\n\n#### New Features\n* [#838](https://github.com/mondaycom/monday-ui-react-core/pull/838) Add color: var(--disabled-text-color) to disabled checkbox label ([@3dyonic](https://github.com/3dyonic))\n* [#828](https://github.com/mondaycom/monday-ui-react-core/pull/828) AttentionBox - close icon button instead of icon ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#836](https://github.com/mondaycom/monday-ui-react-core/pull/836) BreadcrumbContent: link and button roles are added ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#829](https://github.com/mondaycom/monday-ui-react-core/pull/829) Feature/sergeyro/dropdown item tooltip ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#835](https://github.com/mondaycom/monday-ui-react-core/pull/835) Feature/sergeyro/loader a11y attributes ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#831](https://github.com/mondaycom/monday-ui-react-core/pull/831) IconButton: add showTooltip prop ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.56.0 (2022-08-21)\n\n#### Bug Fixes\n* [#833](https://github.com/mondaycom/monday-ui-react-core/pull/833) add support on pass class name to reference in tooltip ([@hadasfa](https://github.com/hadasfa))\n* [#827](https://github.com/mondaycom/monday-ui-react-core/pull/827) Update h1 example to Poppins ([@3dyonic](https://github.com/3dyonic))\n* [#817](https://github.com/mondaycom/monday-ui-react-core/pull/817) Add missing prop bind: marginBottom in Box story ([@3dyonic](https://github.com/3dyonic))\n\n#### New Features\n* [#811](https://github.com/mondaycom/monday-ui-react-core/pull/811) Update easing tokens ([@3dyonic](https://github.com/3dyonic))\n\n#### Internal Changes\n* [#821](https://github.com/mondaycom/monday-ui-react-core/pull/821) Test-utils ELEMENT_TYPES extended ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.55.0 (2022-08-14)\n\n#### Bug Fixes\n* [#818](https://github.com/mondaycom/monday-ui-react-core/pull/818) Fix icon button size ([@hadasfa](https://github.com/hadasfa))\n* [#815](https://github.com/mondaycom/monday-ui-react-core/pull/815) Avatar: prevent default (scroll) on click via space ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#813](https://github.com/mondaycom/monday-ui-react-core/pull/813) fix focus indicator to inset ([@orrgottlieb](https://github.com/orrgottlieb))\n* [#810](https://github.com/mondaycom/monday-ui-react-core/pull/810) remove console.log ([@hadasfa](https://github.com/hadasfa))\n\n#### New Features\n* [#816](https://github.com/mondaycom/monday-ui-react-core/pull/816) Add Cursor not-allowed to disabled checkbox ([@3dyonic](https://github.com/3dyonic))\n\n#### Internal Changes\n* [#814](https://github.com/mondaycom/monday-ui-react-core/pull/814) Fix useKeyEvent imports ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.54.0 (2022-08-03)\n\n#### Bug Fixes\n* [#807](https://github.com/mondaycom/monday-ui-react-core/pull/807) Fix typo in color menuColorsExample.png ([@3dyonic](https://github.com/3dyonic))\n\n#### New Features\n* [#796](https://github.com/mondaycom/monday-ui-react-core/pull/796) Use motion tokens on SliderBase.scss ([@3dyonic](https://github.com/3dyonic))\n* [#797](https://github.com/mondaycom/monday-ui-react-core/pull/797) Use motion tokens on SplitButton.scss ([@3dyonic](https://github.com/3dyonic))\n* [#798](https://github.com/mondaycom/monday-ui-react-core/pull/798) Use motion tokens on Steps.scss ([@3dyonic](https://github.com/3dyonic))\n* [#802](https://github.com/mondaycom/monday-ui-react-core/pull/802) Use motion tokens on TextField.scss ([@3dyonic](https://github.com/3dyonic))\n* [#803](https://github.com/mondaycom/monday-ui-react-core/pull/803) Use motion tokens on Toggle.scss ([@3dyonic](https://github.com/3dyonic))\n* [#804](https://github.com/mondaycom/monday-ui-react-core/pull/804) Use motion tokens on Toast.scss ([@3dyonic](https://github.com/3dyonic))\n* [#805](https://github.com/mondaycom/monday-ui-react-core/pull/805) Use motion tokens on TabPanels.scss ([@3dyonic](https://github.com/3dyonic))\n* [#786](https://github.com/mondaycom/monday-ui-react-core/pull/786) Use motion tokens on Label.scss ([@3dyonic](https://github.com/3dyonic))\n* [#801](https://github.com/mondaycom/monday-ui-react-core/pull/801) Use motion tokens on Tab.scss ([@3dyonic](https://github.com/3dyonic))\n* [#795](https://github.com/mondaycom/monday-ui-react-core/pull/795) Use motion tokens on RadioButton.scss ([@3dyonic](https://github.com/3dyonic))\n* [#790](https://github.com/mondaycom/monday-ui-react-core/pull/790) Use motion tokens on LinearProgressBar.scss ([@3dyonic](https://github.com/3dyonic))\n* [#806](https://github.com/mondaycom/monday-ui-react-core/pull/806) Use motion tokens on Skeleton.scss ([@3dyonic](https://github.com/3dyonic))\n\n#### Internal Changes\n* [#809](https://github.com/mondaycom/monday-ui-react-core/pull/809) fix issue for externals ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.53.0 (2022-08-01)\n\n#### Bug Fixes\n* [#800](https://github.com/mondaycom/monday-ui-react-core/pull/800) Fix h1 style gaps in Editable heading edit mode. ([@3dyonic](https://github.com/3dyonic))\n\n#### New Features\n* [#782](https://github.com/mondaycom/monday-ui-react-core/pull/782) Use motion tokens on Chips.module.scss ([@3dyonic](https://github.com/3dyonic))\n* [#789](https://github.com/mondaycom/monday-ui-react-core/pull/789) Use motion tokens on StepIndicator.scss ([@3dyonic](https://github.com/3dyonic))\n* [#779](https://github.com/mondaycom/monday-ui-react-core/pull/779) Use motion tokens on  Button.scss ([@3dyonic](https://github.com/3dyonic))\n* [#784](https://github.com/mondaycom/monday-ui-react-core/pull/784) Feature/yonatanari/motion tokens counter ([@3dyonic](https://github.com/3dyonic))\n* [#785](https://github.com/mondaycom/monday-ui-react-core/pull/785) Use motion tokens on Dropdown.scss and dropdown/menu.scss ([@3dyonic](https://github.com/3dyonic))\n* [#788](https://github.com/mondaycom/monday-ui-react-core/pull/788) Use motion tokens on MenuButton.scss ([@3dyonic](https://github.com/3dyonic))\n* [#781](https://github.com/mondaycom/monday-ui-react-core/pull/781) Use motion tokens on Checkbox.scss ([@3dyonic](https://github.com/3dyonic))\n* [#778](https://github.com/mondaycom/monday-ui-react-core/pull/778) Use motion tokens on ExpandCollapse.scss ([@3dyonic](https://github.com/3dyonic))\n* [#772](https://github.com/mondaycom/monday-ui-react-core/pull/772) New disabled-text-color tokens, component disabled update. ([@3dyonic](https://github.com/3dyonic))\n\n## 1.52.3 (2022-08-01)\n\n#### Bug Fixes\n* [#799](https://github.com/mondaycom/monday-ui-react-core/pull/799) allow disable label animation on radio button ([@hadasfa](https://github.com/hadasfa))\n\n#### Internal Changes\n* [#793](https://github.com/mondaycom/monday-ui-react-core/pull/793) Tipseen: fix styleint errors ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.52.2 (2022-07-28)\n\n#### Bug Fixes\n* [#771](https://github.com/mondaycom/monday-ui-react-core/pull/771) Tipseen: css modules ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.52.1 (2022-07-27)\n\n#### Bug Fixes\n* [#791](https://github.com/mondaycom/monday-ui-react-core/pull/791) removed hooks alias usage ([@eran-cohen](https://github.com/eran-cohen))\n\n## 1.52.0 (2022-07-27)\n\n#### New Features\n* [#780](https://github.com/mondaycom/monday-ui-react-core/pull/780) Remove aliases ([@eran-cohen](https://github.com/eran-cohen))\n\n#### Internal Changes\n* [#776](https://github.com/mondaycom/monday-ui-react-core/pull/776) add exports to package.json + build icons esm file ([@eran-cohen](https://github.com/eran-cohen))\n\n## 1.51.1 (2022-07-27)\n\n#### Bug Fixes\n* [#736](https://github.com/mondaycom/monday-ui-react-core/pull/736) scroll combobox fix ([@mentaman](https://github.com/mentaman))\n\n## 1.51.0 (2022-07-26)\n\n#### Bug Fixes\n* [#787](https://github.com/mondaycom/monday-ui-react-core/pull/787) add validation ([@orrgottlieb](https://github.com/orrgottlieb))\n\n#### New Features\n* [#759](https://github.com/mondaycom/monday-ui-react-core/pull/759) Allow defaultVisualFocusItemIndex on use useActiveDescendantListFocus and combobox ([@hadasfa](https://github.com/hadasfa))\n\n## 1.50.2 (2022-07-24)\n\n#### Bug Fixes\n* [#777](https://github.com/mondaycom/monday-ui-react-core/pull/777) Bug/hadas/attention box close ([@hadasfa](https://github.com/hadasfa))\n\n## 1.50.1 (2022-07-24)\n\n#### Bug Fixes\n* [#775](https://github.com/mondaycom/monday-ui-react-core/pull/775) Fix button group css specificity ([@hadasfa](https://github.com/hadasfa))\n\n#### New Icons\n* [#773](https://github.com/mondaycom/monday-ui-react-core/pull/773) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.50.0 (2022-07-20)\n\n#### New Features\n* [#770](https://github.com/mondaycom/monday-ui-react-core/pull/770) Manually update monday-ui-style version to 0.1.132 ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.49.0 (2022-07-20)\n\n#### Bug Fixes\n* [#763](https://github.com/mondaycom/monday-ui-react-core/pull/763) Add test for list without props. ([@samitc](https://github.com/samitc))\n\n#### New Features\n* [#750](https://github.com/mondaycom/monday-ui-react-core/pull/750) Feature/yonatanari/change logo href ([@3dyonic](https://github.com/3dyonic))\n* [#765](https://github.com/mondaycom/monday-ui-react-core/pull/765) Enable brandFont prop for heading within editable heading. ([@3dyonic](https://github.com/3dyonic))\n\n## 1.48.3 (2022-07-20)\n\n#### New Icons\n* [#768](https://github.com/mondaycom/monday-ui-react-core/pull/768) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.48.2 (2022-07-20)\n\n#### Bug Fixes\n* [#767](https://github.com/mondaycom/monday-ui-react-core/pull/767) Box: added to published-components ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.48.1 (2022-07-20)\n\n#### New Icons\n* [#764](https://github.com/mondaycom/monday-ui-react-core/pull/764) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.48.0 (2022-07-19)\n\n#### New Features\n* [#758](https://github.com/mondaycom/monday-ui-react-core/pull/758) Add Poppins font-family to h1 heading ([@3dyonic](https://github.com/3dyonic))\n\n#### New Icons\n* [#762](https://github.com/mondaycom/monday-ui-react-core/pull/762) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.47.0 (2022-07-19)\n\n#### New Features\n* [#753](https://github.com/mondaycom/monday-ui-react-core/pull/753) Navigate in list with keyboard. ([@samitc](https://github.com/samitc))\n* [#687](https://github.com/mondaycom/monday-ui-react-core/pull/687) Feature/yonatanari/box component ([@3dyonic](https://github.com/3dyonic))\n* [#752](https://github.com/mondaycom/monday-ui-react-core/pull/752) Feature/yonatan ari/storybook repsoinsive tweaks ([@3dyonic](https://github.com/3dyonic))\n\n#### Documentation\n* [#712](https://github.com/mondaycom/monday-ui-react-core/pull/712) Feature/yonatanari/motion page ([@3dyonic](https://github.com/3dyonic))\n\n## 1.46.0 (2022-07-13)\n\n#### New Features\n* [#749](https://github.com/mondaycom/monday-ui-react-core/pull/749) Support set use active descendant list visual focus from outside ([@hadasfa](https://github.com/hadasfa))\n\n## 1.45.0 (2022-07-13)\n\n#### New Features\n* [#748](https://github.com/mondaycom/monday-ui-react-core/pull/748) Clickable: ariaExpanded prop added ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.44.1 (2022-07-12)\n\n#### Bug Fixes\n* [#746](https://github.com/mondaycom/monday-ui-react-core/pull/746) adding property box-sizing to RadioButton ([@rami-monday](https://github.com/rami-monday))\n\n## 1.44.0 (2022-07-10)\n\n#### New Features\n* [#744](https://github.com/mondaycom/monday-ui-react-core/pull/744) Icon button fix and link alignment ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.43.0 (2022-07-10)\n\n#### New Features\n* [#743](https://github.com/mondaycom/monday-ui-react-core/pull/743) Feat: Add prop set the tabindex for RadioButton.jsx rendered children ([@DorShakedMonday](https://github.com/DorShakedMonday))\n\n## 1.42.0 (2022-07-07)\n\n#### New Features\n* [#742](https://github.com/mondaycom/monday-ui-react-core/pull/742) Mute Notification Icon ([@orrgottlieb](https://github.com/orrgottlieb))\n* [#737](https://github.com/mondaycom/monday-ui-react-core/pull/737) Feature/yonatanari/wellcome page responsive without media ([@3dyonic](https://github.com/3dyonic))\n\n#### New Icons\n* [#740](https://github.com/mondaycom/monday-ui-react-core/pull/740) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.41.2 (2022-07-06)\n\n#### Bug Fixes\n* [#739](https://github.com/mondaycom/monday-ui-react-core/pull/739) Few fixes for supporting useActiveDescendantListFocus in menus ([@hadasfa](https://github.com/hadasfa))\n\n## 1.41.1 (2022-07-05)\n\n#### Bug Fixes\n* [#735](https://github.com/mondaycom/monday-ui-react-core/pull/735) IconButton: added wrapperClassName prop ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.41.0 (2022-07-03)\n\n#### New Features\n* [#706](https://github.com/mondaycom/monday-ui-react-core/pull/706) Feature/sergeyro/avatar group a11y ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.40.1 (2022-07-03)\n\n#### Bug Fixes\n* [#733](https://github.com/mondaycom/monday-ui-react-core/pull/733) AvatarGroup component export ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.40.0 (2022-07-03)\n\n#### Bug Fixes\n* [#723](https://github.com/mondaycom/monday-ui-react-core/pull/723) Add css module support for chips component ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### New Features\n* [#732](https://github.com/mondaycom/monday-ui-react-core/pull/732) adding leftIcon and leftAvatar to dropdown chips ([@maxiozer](https://github.com/maxiozer))\n\n## 1.39.1 (2022-06-30)\n\n#### Bug Fixes\n* [#731](https://github.com/mondaycom/monday-ui-react-core/pull/731) fix clickable PropType and inset focus for heading compoennt ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.39.0 (2022-06-30)\n\n#### New Features\n* [#730](https://github.com/mondaycom/monday-ui-react-core/pull/730) dropdown with mandatory default values ([@maxiozer](https://github.com/maxiozer))\n\n## 1.38.1 (2022-06-29)\n\n#### Bug Fixes\n* [#729](https://github.com/mondaycom/monday-ui-react-core/pull/729) add max length as a prop ([@mayaAssayag](https://github.com/mayaAssayag))\n\n## 1.38.0 (2022-06-29)\n\n#### New Features\n* [#727](https://github.com/mondaycom/monday-ui-react-core/pull/727) Butotn inset focus style ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.37.0 (2022-06-28)\n\n#### New Features\n* [#725](https://github.com/mondaycom/monday-ui-react-core/pull/725) Clickable: ariaHasPopup prop ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.36.5 (2022-06-28)\n\n#### New Icons\n* [#722](https://github.com/mondaycom/monday-ui-react-core/pull/722) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.36.4 (2022-06-28)\n\n#### Bug Fixes\n* [#724](https://github.com/mondaycom/monday-ui-react-core/pull/724) fix medium 2 min width to 1280 ([@liatmaor](https://github.com/liatmaor))\n\n## 1.36.3 (2022-06-27)\n\n#### Bug Fixes\n* [#720](https://github.com/mondaycom/monday-ui-react-core/pull/720) Fix/yonatanari/fix disabled text color issues ([@3dyonic](https://github.com/3dyonic))\n\n#### Internal Changes\n* [#719](https://github.com/mondaycom/monday-ui-react-core/pull/719) feat(storybook): memory stats for stories ([@niksa-monday](https://github.com/niksa-monday))\n* [#718](https://github.com/mondaycom/monday-ui-react-core/pull/718) feat(storybook): enable storybook performance addon ([@niksa-monday](https://github.com/niksa-monday))\n\n## 1.36.2 (2022-06-27)\n\n#### Internal Changes\n* [#713](https://github.com/mondaycom/monday-ui-react-core/pull/713) Jest snapshot css modules ([@eran-cohen](https://github.com/eran-cohen))\n\n#### New Icons\n* [#717](https://github.com/mondaycom/monday-ui-react-core/pull/717) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.36.1 (2022-06-23)\n\n#### Bug Fixes\n* [#709](https://github.com/mondaycom/monday-ui-react-core/pull/709) Avatar custom size by classname ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#708](https://github.com/mondaycom/monday-ui-react-core/pull/708) Feature/sergeyro/plop component fix ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.36.0 (2022-06-19)\n\n#### Bug Fixes\n* [#705](https://github.com/mondaycom/monday-ui-react-core/pull/705) fix button tooltip hidden when stop hovering + tipseen useless wrapper ([@hadasfa](https://github.com/hadasfa))\n\n#### New Features\n* [#694](https://github.com/mondaycom/monday-ui-react-core/pull/694) Feature/sergeyro/avatar group ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.35.1 (2022-06-15)\n\n#### Bug Fixes\n* [#699](https://github.com/mondaycom/monday-ui-react-core/pull/699) Fix: Add prop to preserve radio button on select behaviour with children ([@DorShakedMonday](https://github.com/DorShakedMonday))\n\n## 1.35.0 (2022-06-14)\n\n#### New Features\n* [#698](https://github.com/mondaycom/monday-ui-react-core/pull/698) Feature/yonatanari/add shadow xs example ([@3dyonic](https://github.com/3dyonic))\n* [#697](https://github.com/mondaycom/monday-ui-react-core/pull/697) * Update version \"monday-ui-style\": \"0.1.118\", ([@3dyonic](https://github.com/3dyonic))\n\n## 1.34.0 (2022-06-08)\n\n#### New Features\n* [#690](https://github.com/mondaycom/monday-ui-react-core/pull/690) feat/Chris/ make Avatar initials text styling customisable ([@ChristopherMichaelNowak](https://github.com/ChristopherMichaelNowak))\n\n## 1.33.1 (2022-06-08)\n\n#### Internal Changes\n* [#692](https://github.com/mondaycom/monday-ui-react-core/pull/692) update version of storybook ([@orrgottlieb](https://github.com/orrgottlieb))\n\n#### New Icons\n* [#691](https://github.com/mondaycom/monday-ui-react-core/pull/691) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.33.0 (2022-06-07)\n\n#### New Features\n* [#686](https://github.com/mondaycom/monday-ui-react-core/pull/686) Storybook/sergeyro/expand loader ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#689](https://github.com/mondaycom/monday-ui-react-core/pull/689) Feature/sergeyro/hooks plop improve ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.32.0 (2022-05-26)\n\n#### New Features\n* [#683](https://github.com/mondaycom/monday-ui-react-core/pull/683) EditableHeading -Add option to pass argument to onStartEditing, input class name prop,… ([@mayaAssayag](https://github.com/mayaAssayag))\n\n#### New Icons\n* [#684](https://github.com/mondaycom/monday-ui-react-core/pull/684) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.31.3 (2022-05-25)\n\n#### Bug Fixes\n* [#677](https://github.com/mondaycom/monday-ui-react-core/pull/677) fix: fix issue with ButtonIcon inline issue ([@orrgottlieb](https://github.com/orrgottlieb))\n\n#### Documentation\n* [#681](https://github.com/mondaycom/monday-ui-react-core/pull/681) fix: Remove Tip box ([@abaum-augu](https://github.com/abaum-augu))\n\n#### New Icons\n* [#682](https://github.com/mondaycom/monday-ui-react-core/pull/682) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.31.2 (2022-05-24)\n\n#### Bug Fixes\n* [#680](https://github.com/mondaycom/monday-ui-react-core/pull/680) Change attention box default padding ([@hadasfa](https://github.com/hadasfa))\n\n#### Dependency Upgrades\n* [#660](https://github.com/mondaycom/monday-ui-react-core/pull/660) #  Update sass to version  \"sass\": \"^1.51.0\", ([@3dyonic](https://github.com/3dyonic))\n\n## 1.31.1 (2022-05-22)\n\n#### Bug Fixes\n* [#679](https://github.com/mondaycom/monday-ui-react-core/pull/679) Patch/yonatanari/disabled states correction ([@3dyonic](https://github.com/3dyonic))\n\n#### New Icons\n* [#678](https://github.com/mondaycom/monday-ui-react-core/pull/678) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.31.0 (2022-05-19)\n\n#### New Features\n* [#659](https://github.com/mondaycom/monday-ui-react-core/pull/659) Storybook/sergey/use set focus hook ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.30.0 (2022-05-19)\n\n#### New Features\n* [#676](https://github.com/mondaycom/monday-ui-react-core/pull/676) #  Update \"monday-ui-style\" to \"0.1.111\" ([@3dyonic](https://github.com/3dyonic))\n\n#### Dependency Upgrades\n* [#669](https://github.com/mondaycom/monday-ui-react-core/pull/669) upgrade patch versions ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.29.0 (2022-05-15)\n\n#### Bug Fixes\n* [#667](https://github.com/mondaycom/monday-ui-react-core/pull/667) [Snyk] Upgrade react-window from 1.8.6 to 1.8.7 ([@snyk-bot](https://github.com/snyk-bot))\n\n#### New Features\n* [#668](https://github.com/mondaycom/monday-ui-react-core/pull/668) hide the dialog/tooltip when the reference is hidden ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.28.2 (2022-05-10)\n\n#### Bug Fixes\n* [#663](https://github.com/mondaycom/monday-ui-react-core/pull/663) fix use previous export ([@hadasfa](https://github.com/hadasfa))\n\n## 1.28.1 (2022-05-10)\n\n#### Bug Fixes\n* [#662](https://github.com/mondaycom/monday-ui-react-core/pull/662) Fix bug: remove \"add new\" button from not found empty state in combobox as default ([@hadasfa](https://github.com/hadasfa))\n\n#### Documentation\n* [#657](https://github.com/mondaycom/monday-ui-react-core/pull/657) Storybook: usePrevios hook ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 1.28.0 (2022-05-01)\n\n#### New Features\n* [#584](https://github.com/mondaycom/monday-ui-react-core/pull/584) Use media query ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.27.1 (2022-04-28)\n\n#### Bug Fixes\n* [#654](https://github.com/mondaycom/monday-ui-react-core/pull/654) Fix export of a11y list hook ([@hadasfa](https://github.com/hadasfa))\n\n## 1.27.0 (2022-04-28)\n\n#### Bug Fixes\n* [#653](https://github.com/mondaycom/monday-ui-react-core/pull/653) Fix usage on useMergedRef in checkbox ([@hadasfa](https://github.com/hadasfa))\n\n#### New Features\n* [#636](https://github.com/mondaycom/monday-ui-react-core/pull/636) A11y/combobox nav refactor and expose list focus and keyboard navigation hook ([@hadasfa](https://github.com/hadasfa))\n\n## 1.26.7 (2022-04-26)\n\n#### New Icons\n* [#652](https://github.com/mondaycom/monday-ui-react-core/pull/652) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.26.6 (2022-04-24)\n\n#### New Icons\n* [#650](https://github.com/mondaycom/monday-ui-react-core/pull/650) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.26.5 (2022-04-24)\n\n#### Bug Fixes\n* [#649](https://github.com/mondaycom/monday-ui-react-core/pull/649) fix commit ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.26.4 (2022-04-20)\n\n#### New Icons\n* [#647](https://github.com/mondaycom/monday-ui-react-core/pull/647) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.26.3 (2022-04-19)\n\n#### Bug Fixes\n* [#648](https://github.com/mondaycom/monday-ui-react-core/pull/648) Undo \"component\" absolute path because it increase bundle size ([@hadasfa](https://github.com/hadasfa))\n\n## 1.26.2 (2022-04-18)\n\n#### Bug Fixes\n* [#643](https://github.com/mondaycom/monday-ui-react-core/pull/643) remove set style hardcoded for icon button (not needed and not used u… ([@hadasfa](https://github.com/hadasfa))\n\n## 1.26.1 (2022-04-18)\n\n#### Bug Fixes\n* [#641](https://github.com/mondaycom/monday-ui-react-core/pull/641) Fix bug: support press shift while click on checkbox on firefox browsers ([@hadasfa](https://github.com/hadasfa))\n\n## 1.26.0 (2022-04-17)\n\n#### Bug Fixes\n* [#635](https://github.com/mondaycom/monday-ui-react-core/pull/635) Add flag for undo a null check which cause weird behavior (combobox)  ([@hadasfa](https://github.com/hadasfa))\n\n#### New Features\n* [#633](https://github.com/mondaycom/monday-ui-react-core/pull/633) Fix minor craft bugs (button disabled cursor and chip close button appearance) & stories & add data test id prop to chip, button, icon button ([@hadasfa](https://github.com/hadasfa))\n\n## 1.25.0 (2022-04-13)\n\n#### Bug Fixes\n* [#632](https://github.com/mondaycom/monday-ui-react-core/pull/632) Support on disabled tabIndex ([@NofarRG](https://github.com/NofarRG))\n* [#630](https://github.com/mondaycom/monday-ui-react-core/pull/630) fix icon size for small button ([@liatmaor](https://github.com/liatmaor))\n\n#### New Features\n* [#625](https://github.com/mondaycom/monday-ui-react-core/pull/625) add support on virtualized list items inside list component ([@hadasfa](https://github.com/hadasfa))\n\n#### Documentation\n* [#619](https://github.com/mondaycom/monday-ui-react-core/pull/619) fix virtualized list story ([@hadasfa](https://github.com/hadasfa))\n* [#622](https://github.com/mondaycom/monday-ui-react-core/pull/622) Feature/yonatanari/wellcome page updates ([@3dyonic](https://github.com/3dyonic))\n\n## 1.24.0 (2022-04-07)\n\n#### Bug Fixes\n* [#623](https://github.com/mondaycom/monday-ui-react-core/pull/623) # 💄 Change Icon Button Small variant shape size to 24px. ([@3dyonic](https://github.com/3dyonic))\n\n#### New Features\n* [#629](https://github.com/mondaycom/monday-ui-react-core/pull/629) feat: adding a flag to ColorPicker for showing color name tooltips ([@shanibenaderetmonday](https://github.com/shanibenaderetmonday))\n\n## 1.23.2 (2022-04-05)\n\n#### Bug Fixes\n* [#628](https://github.com/mondaycom/monday-ui-react-core/pull/628) Scrollintoview ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.23.1 (2022-04-05)\n\n#### Bug Fixes\n* [#627](https://github.com/mondaycom/monday-ui-react-core/pull/627) Scroll into view not exsiting ([@orrgottlieb](https://github.com/orrgottlieb))\n\n#### Documentation\n* [#624](https://github.com/mondaycom/monday-ui-react-core/pull/624) Analytics ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.23.0 (2022-04-05)\n\n#### Bug Fixes\n* [#615](https://github.com/mondaycom/monday-ui-react-core/pull/615) Interaction tests for combobox & add data test ids by prop to clickable, search, textfield, combobox ([@hadasfa](https://github.com/hadasfa))\n\n#### New Features\n* [#621](https://github.com/mondaycom/monday-ui-react-core/pull/621) Combobox max options without scroll ([@MosheZemah](https://github.com/MosheZemah))\n\n#### Documentation\n* [#620](https://github.com/mondaycom/monday-ui-react-core/pull/620) docs(accordion): improve storybook (sub-items, props, etc.) ([@niksa-monday](https://github.com/niksa-monday))\n* [#618](https://github.com/mondaycom/monday-ui-react-core/pull/618) test(accordion): add interaction tests for multi-active mode ([@niksa-monday](https://github.com/niksa-monday))\n* [#617](https://github.com/mondaycom/monday-ui-react-core/pull/617) feat(accordion): add data-testid, improve ids, add interaction tests ([@niksa-monday](https://github.com/niksa-monday))\n* [#614](https://github.com/mondaycom/monday-ui-react-core/pull/614) color picker testids fix ([@laviomri](https://github.com/laviomri))\n\n## 1.22.0 (2022-03-30)\n\n#### Bug Fixes\n* [#609](https://github.com/mondaycom/monday-ui-react-core/pull/609) Fix clickable tests (add interaction tests for focus and few behaviour tests) ([@hadasfa](https://github.com/hadasfa))\n* [#606](https://github.com/mondaycom/monday-ui-react-core/pull/606) fix(interaction): minor selector typo issue ([@niksa-monday](https://github.com/niksa-monday))\n\n#### New Features\n* [#616](https://github.com/mondaycom/monday-ui-react-core/pull/616) Avatar custom background color ([@MosheZemah](https://github.com/MosheZemah))\n* [#601](https://github.com/mondaycom/monday-ui-react-core/pull/601) Fix/omri/fix grid keyboard nav story ([@laviomri](https://github.com/laviomri))\n\n#### Documentation\n* [#610](https://github.com/mondaycom/monday-ui-react-core/pull/610) test(slider): add Thumb drag interaction tests ([@niksa-monday](https://github.com/niksa-monday))\n* [#612](https://github.com/mondaycom/monday-ui-react-core/pull/612) menu interaction tests ([@laviomri](https://github.com/laviomri))\n* [#607](https://github.com/mondaycom/monday-ui-react-core/pull/607) Color picker interaction tests ([@laviomri](https://github.com/laviomri))\n* [#611](https://github.com/mondaycom/monday-ui-react-core/pull/611) test(Slider): add interaction tests for ranged mode  ([@niksa-monday](https://github.com/niksa-monday))\n* [#596](https://github.com/mondaycom/monday-ui-react-core/pull/596) # ay11 Foundation page Corrections: Update image sizes, add up next section ([@3dyonic](https://github.com/3dyonic))\n* [#608](https://github.com/mondaycom/monday-ui-react-core/pull/608) test(Slider): add interaction tests for Slider component ([@niksa-monday](https://github.com/niksa-monday))\n* [#605](https://github.com/mondaycom/monday-ui-react-core/pull/605) Interaction tests alignments ([@laviomri](https://github.com/laviomri))\n* [#602](https://github.com/mondaycom/monday-ui-react-core/pull/602) Increase default width of left panel ([@laviomri](https://github.com/laviomri))\n* [#603](https://github.com/mondaycom/monday-ui-react-core/pull/603) storybook initials ([@orrgottlieb](https://github.com/orrgottlieb))\n* [#600](https://github.com/mondaycom/monday-ui-react-core/pull/600) fix-typos-in-avatar-story-classnames ([@laviomri](https://github.com/laviomri))\n\n## 1.21.5 (2022-03-22)\n\n#### Bug Fixes\n* [#597](https://github.com/mondaycom/monday-ui-react-core/pull/597) Bug/hadas/change combobox msg class (too common) ([@hadasfa](https://github.com/hadasfa))\n\n## 1.21.4 (2022-03-21)\n\n#### Bug Fixes\n* [#595](https://github.com/mondaycom/monday-ui-react-core/pull/595) Add aria-label to Flex ([@Naama-Weber-Monday](https://github.com/Naama-Weber-Monday))\n\n## 1.21.3 (2022-03-20)\n\n#### Bug Fixes\n* [#594](https://github.com/mondaycom/monday-ui-react-core/pull/594) fix dark mode issue, sticky issue and add categories story ([@hadasfa](https://github.com/hadasfa))\n\n#### Documentation\n* [#588](https://github.com/mondaycom/monday-ui-react-core/pull/588) feature/omri/multi-interaction-tests-per-story ([@laviomri](https://github.com/laviomri))\n\n## 1.21.2 (2022-03-17)\n\n#### Bug Fixes\n* [#586](https://github.com/mondaycom/monday-ui-react-core/pull/586) Fix menu grid item focus after keyboard nav ([@hadasfa](https://github.com/hadasfa))\n\n#### Dependency Upgrades\n* [#592](https://github.com/mondaycom/monday-ui-react-core/pull/592) Move deps to devDependencies ([@sahariko](https://github.com/sahariko))\n\n#### Documentation\n* [#591](https://github.com/mondaycom/monday-ui-react-core/pull/591) Button prop-types proofreading ([@sahariko](https://github.com/sahariko))\n\n## 1.21.1 (2022-03-16)\n\n#### Bug Fixes\n* [#589](https://github.com/mondaycom/monday-ui-react-core/pull/589) Fix combobox spacing issues ([@hadasfa](https://github.com/hadasfa))\n\n## 1.21.0 (2022-03-16)\n\n#### Bug Fixes\n* [#587](https://github.com/mondaycom/monday-ui-react-core/pull/587) Fix radiobutton check issue ([@MosheZemah](https://github.com/MosheZemah))\n* [#583](https://github.com/mondaycom/monday-ui-react-core/pull/583) Fix issue with combobox story ([@MosheZemah](https://github.com/MosheZemah))\n* [#581](https://github.com/mondaycom/monday-ui-react-core/pull/581) Fix issue with hovering combobox hover ([@MosheZemah](https://github.com/MosheZemah))\n\n#### New Features\n* [#574](https://github.com/mondaycom/monday-ui-react-core/pull/574) Add virtualized list support to combobox ([@hadasfa](https://github.com/hadasfa))\n* [#580](https://github.com/mondaycom/monday-ui-react-core/pull/580) Clear filter on combobox selection ([@MosheZemah](https://github.com/MosheZemah))\n\n#### Documentation\n* [#579](https://github.com/mondaycom/monday-ui-react-core/pull/579) PR: Documentation ,Ay11 foundation page ([@3dyonic](https://github.com/3dyonic))\n\n#### Internal Changes\n* [#585](https://github.com/mondaycom/monday-ui-react-core/pull/585) Add menu tests ([@MosheZemah](https://github.com/MosheZemah))\n* [#582](https://github.com/mondaycom/monday-ui-react-core/pull/582) Interaction tests ([@MosheZemah](https://github.com/MosheZemah))\n\n## 1.20.0 (2022-03-10)\n\n#### New Features\n* [#578](https://github.com/mondaycom/monday-ui-react-core/pull/578) Feature/hadas/checkbox ref ([@hadasfa](https://github.com/hadasfa))\n\n#### Documentation\n* [#562](https://github.com/mondaycom/monday-ui-react-core/pull/562) Add dropdown groups to storybook and change dropdown groups style ([@ronachmany-monday](https://github.com/ronachmany-monday))\n\n## 1.19.3 (2022-03-09)\n\n#### New Icons\n* [#576](https://github.com/mondaycom/monday-ui-react-core/pull/576) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n* [#575](https://github.com/mondaycom/monday-ui-react-core/pull/575) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.19.2 (2022-03-08)\n\n#### Bug Fixes\n* [#571](https://github.com/mondaycom/monday-ui-react-core/pull/571) Add all icons tests ([@MosheZemah](https://github.com/MosheZemah))\n\n#### New Icons\n* [#573](https://github.com/mondaycom/monday-ui-react-core/pull/573) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.19.1 (2022-03-01)\n\n#### New Icons\n* [#569](https://github.com/mondaycom/monday-ui-react-core/pull/569) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.19.0 (2022-03-01)\n\n#### New Features\n* [#561](https://github.com/mondaycom/monday-ui-react-core/pull/561) Added menuPlacement prop to Dropdown component ([@udidoron](https://github.com/udidoron))\n\n## 1.18.4 (2022-03-01)\n\n#### Bug Fixes\n* [#567](https://github.com/mondaycom/monday-ui-react-core/pull/567) Fix editable heading cursor on disabled ([@MosheZemah](https://github.com/MosheZemah))\n\n## 1.18.3 (2022-03-01)\n\n#### Bug Fixes\n* [#566](https://github.com/mondaycom/monday-ui-react-core/pull/566) Fix editable heading editing while disabled ([@MosheZemah](https://github.com/MosheZemah))\n\n## 1.18.2 (2022-02-28)\n\n#### Bug Fixes\n* [#565](https://github.com/mondaycom/monday-ui-react-core/pull/565) Editable heading callback on blur ignore ([@MosheZemah](https://github.com/MosheZemah))\n\n## 1.18.1 (2022-02-28)\n\n#### Bug Fixes\n* [#564](https://github.com/mondaycom/monday-ui-react-core/pull/564) Allow stop editing for EditableHeading ([@MosheZemah](https://github.com/MosheZemah))\n\n## 1.18.0 (2022-02-28)\n\n#### New Features\n* [#563](https://github.com/mondaycom/monday-ui-react-core/pull/563) Add color prop to Heading and Editable Heading ([@MosheZemah](https://github.com/MosheZemah))\n\n## 1.17.2 (2022-02-28)\n\n#### New Icons\n* [#558](https://github.com/mondaycom/monday-ui-react-core/pull/558) Upgrade monday ui style ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.17.1 (2022-02-27)\n\n#### Bug Fixes\n* [#537](https://github.com/mondaycom/monday-ui-react-core/pull/537) Fix tabs list bug - visible focus displayed when clicking out side and then clicking on one tab ([@hadasfa](https://github.com/hadasfa))\n\n## 1.17.0 (2022-02-25)\n\n#### New Features\n* [#557](https://github.com/mondaycom/monday-ui-react-core/pull/557) Support Heading highlight text ([@MosheZemah](https://github.com/MosheZemah))\n\n#### Documentation\n* [#555](https://github.com/mondaycom/monday-ui-react-core/pull/555) Fix stories ([@hadasfa](https://github.com/hadasfa))\n\n## 1.16.0 (2022-02-24)\n\n#### New Features\n* [#556](https://github.com/mondaycom/monday-ui-react-core/pull/556) Expose use is overflowing hook ([@hadasfa](https://github.com/hadasfa))\n\n## 1.15.0 (2022-02-24)\n\n#### New Features\n* [#554](https://github.com/mondaycom/monday-ui-react-core/pull/554) Add support on avatar in chip component ([@roniCohen123](https://github.com/roniCohen123))\n\n## 1.14.2 (2022-02-23)\n\n#### New Icons\n* [#553](https://github.com/mondaycom/monday-ui-react-core/pull/553) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.14.1 (2022-02-23)\n\n#### New Icons\n* [#552](https://github.com/mondaycom/monday-ui-react-core/pull/552) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.14.0 (2022-02-22)\n\n#### Bug Fixes\n* [#536](https://github.com/mondaycom/monday-ui-react-core/pull/536) combobox disable no result on loading ([@roniCohen123](https://github.com/roniCohen123))\n\n#### New Features\n* [#551](https://github.com/mondaycom/monday-ui-react-core/pull/551) Support passing tooltip content to menu item by tooltipContent prop ([@etaylib](https://github.com/etaylib))\n\n## 1.13.12 (2022-02-20)\n\n#### New Icons\n* [#549](https://github.com/mondaycom/monday-ui-react-core/pull/549) Update color keys ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.13.11 (2022-02-20)\n\n#### Bug Fixes\n* [#548](https://github.com/mondaycom/monday-ui-react-core/pull/548) Fix toggle on change params ([@hadasfa](https://github.com/hadasfa))\n\n## 1.13.10 (2022-02-20)\n\n#### Bug Fixes\n* [#545](https://github.com/mondaycom/monday-ui-react-core/pull/545) Better support for useDocumentEventListeners on Menu components ([@laviomri](https://github.com/laviomri))\n\n## 1.13.9 (2022-02-17)\n\n#### Bug Fixes\n* [#546](https://github.com/mondaycom/monday-ui-react-core/pull/546) Displaying focus properly in toggle component ([@hadasfa](https://github.com/hadasfa))\n\n#### New Icons\n* [#547](https://github.com/mondaycom/monday-ui-react-core/pull/547) Update colors in basic, night themes ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.13.8 (2022-02-17)\n\n#### Bug Fixes\n* [#544](https://github.com/mondaycom/monday-ui-react-core/pull/544) Fix bug on toggle cannot be affected by click when in controlled mode ([@hadasfa](https://github.com/hadasfa))\n\n## 1.13.7 (2022-02-16)\n\n#### Bug Fixes\n* [#543](https://github.com/mondaycom/monday-ui-react-core/pull/543) remove react aria dependecies ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.13.6 (2022-02-16)\n\n#### Bug Fixes\n* [#542](https://github.com/mondaycom/monday-ui-react-core/pull/542) remove react button ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.13.5 (2022-02-16)\n\n#### Bug Fixes\n* [#541](https://github.com/mondaycom/monday-ui-react-core/pull/541) Set version ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.13.4 (2022-02-16)\n\n#### Bug Fixes\n* [#540](https://github.com/mondaycom/monday-ui-react-core/pull/540) Fix font load ([@MosheZemah](https://github.com/MosheZemah))\n\n## 1.13.3 (2022-02-16)\n\n#### Bug Fixes\n* [#539](https://github.com/mondaycom/monday-ui-react-core/pull/539) Flex types ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.13.2 (2022-02-16)\n\n#### Bug Fixes\n* [#538](https://github.com/mondaycom/monday-ui-react-core/pull/538) Element type issues ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.13.1 (2022-02-15)\n\n#### Bug Fixes\n* [#535](https://github.com/mondaycom/monday-ui-react-core/pull/535) Fix combobox drawer width ([@hadasfa](https://github.com/hadasfa))\n\n## 1.13.0 (2022-02-15)\n\n#### Bug Fixes\n* [#530](https://github.com/mondaycom/monday-ui-react-core/pull/530) tooltip: removing border from tooltip arrow + adding themes to storybook ([@etaylib](https://github.com/etaylib))\n* [#534](https://github.com/mondaycom/monday-ui-react-core/pull/534) Add chips colors story fixes ([@MosheZemah](https://github.com/MosheZemah))\n\n#### New Features\n* [#506](https://github.com/mondaycom/monday-ui-react-core/pull/506) Menu grid item ([@laviomri](https://github.com/laviomri))\n* [#532](https://github.com/mondaycom/monday-ui-react-core/pull/532) Dropdown - add isOptionSelected prop ([@ronachmany-monday](https://github.com/ronachmany-monday))\n* [#533](https://github.com/mondaycom/monday-ui-react-core/pull/533) Add chips colors story ([@MosheZemah](https://github.com/MosheZemah))\n* [#528](https://github.com/mondaycom/monday-ui-react-core/pull/528) add divider to combo box categories ([@SagiL96](https://github.com/SagiL96))\n\n## 1.12.0 (2022-02-13)\n\n#### New Features\n* [#529](https://github.com/mondaycom/monday-ui-react-core/pull/529) Add virtualized list ref ([@MosheZemah](https://github.com/MosheZemah))\n\n## 1.11.2 (2022-02-13)\n\n#### Dependency Upgrades\n* [#527](https://github.com/mondaycom/monday-ui-react-core/pull/527) Upgrade monday-ui-style ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.11.1 (2022-02-13)\n\n#### Bug Fixes\n* [#523](https://github.com/mondaycom/monday-ui-react-core/pull/523) Fix icon button and drop down stories ([@hadasfa](https://github.com/hadasfa))\n* [#498](https://github.com/mondaycom/monday-ui-react-core/pull/498) fix: lint fixes ([@orrgottlieb](https://github.com/orrgottlieb))\n\n#### Dependency Upgrades\n* [#525](https://github.com/mondaycom/monday-ui-react-core/pull/525) Change design system Hebrew font to rubik ([@hadasfa](https://github.com/hadasfa))\n\n## 1.11.0 (2022-02-08)\n\n#### New Features\n* [#521](https://github.com/mondaycom/monday-ui-react-core/pull/521) Replace typography source to monday-ui-style font variables ([@hadasfa](https://github.com/hadasfa))\n\n#### New Icons\n* [#522](https://github.com/mondaycom/monday-ui-react-core/pull/522) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.10.4 (2022-02-08)\n\n#### Bug Fixes\n* [#520](https://github.com/mondaycom/monday-ui-react-core/pull/520) Revert \" Add typography variables\" ([@hadasfa](https://github.com/hadasfa))\n\n## 1.10.3 (2022-02-07)\n\n#### Bug Fixes\n* [#518](https://github.com/mondaycom/monday-ui-react-core/pull/518) When click on checkbox with shift pressed, shift key is not true in the manual all checkbox events (even if it was true in the original event) ([@hadasfa](https://github.com/hadasfa))\n\n## 1.10.2 (2022-02-07)\n\n#### Bug Fixes\n* [#517](https://github.com/mondaycom/monday-ui-react-core/pull/517) Tabs focus issue ([@orrgottlieb](https://github.com/orrgottlieb))\n\n#### Dependency Upgrades\n* [#482](https://github.com/mondaycom/monday-ui-react-core/pull/482)  Add typography variables ([@hadasfa](https://github.com/hadasfa))\n\n#### Internal Changes\n* [#482](https://github.com/mondaycom/monday-ui-react-core/pull/482)  Add typography variables ([@hadasfa](https://github.com/hadasfa))\n\n## 1.10.1 (2022-02-06)\n\n#### Bug Fixes\n* [#514](https://github.com/mondaycom/monday-ui-react-core/pull/514) fix support on checkbox click while shift is pressed on firefox browser ([@hadasfa](https://github.com/hadasfa))\n\n## 1.10.0 (2022-02-06)\n\n#### Bug Fixes\n* [#516](https://github.com/mondaycom/monday-ui-react-core/pull/516) feat: move dependencies to correct area ([@orrgottlieb](https://github.com/orrgottlieb))\n\n#### New Features\n* [#513](https://github.com/mondaycom/monday-ui-react-core/pull/513) Allow non-monday colors picker ([@laviomri](https://github.com/laviomri))\n* [#512](https://github.com/mondaycom/monday-ui-react-core/pull/512) Disabling activeIndex after a non-keyboard interaction ([@laviomri](https://github.com/laviomri))\n* [#509](https://github.com/mondaycom/monday-ui-react-core/pull/509) ColorPicker - white selected icon, even not on multi selection ([@laviomri](https://github.com/laviomri))\n\n#### Documentation\n* [#515](https://github.com/mondaycom/monday-ui-react-core/pull/515) Fix OpenGraph description typo ([@laviomri](https://github.com/laviomri))\n\n## 1.9.0 (2022-02-02)\n\n#### Bug Fixes\n* [#510](https://github.com/mondaycom/monday-ui-react-core/pull/510) Dropdown with multi - placeholder show condition fix ([@yardenli](https://github.com/yardenli))\n* [#508](https://github.com/mondaycom/monday-ui-react-core/pull/508) Fix selection feedback not showing for single item selection of ColorPicker ([@laviomri](https://github.com/laviomri))\n\n#### New Features\n* [#502](https://github.com/mondaycom/monday-ui-react-core/pull/502) Menu enhancements ([@laviomri](https://github.com/laviomri))\n\n#### Documentation\n* [#505](https://github.com/mondaycom/monday-ui-react-core/pull/505) Fix combobox docs ([@hadasfa](https://github.com/hadasfa))\n\n#### Internal Changes\n* [#511](https://github.com/mondaycom/monday-ui-react-core/pull/511) fix/yarden/dropdown-multi-lint-and-tests-fixes ([@yardenli](https://github.com/yardenli))\n\n## 1.8.4 (2022-02-01)\n\n#### New Icons\n* [#507](https://github.com/mondaycom/monday-ui-react-core/pull/507) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.8.3 (2022-01-31)\n\n#### New Icons\n* [#504](https://github.com/mondaycom/monday-ui-react-core/pull/504) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.8.2 (2022-01-31)\n\n#### Bug Fixes\n* [#503](https://github.com/mondaycom/monday-ui-react-core/pull/503) Fix drop down counter in multi state with single line ([@hadasfa](https://github.com/hadasfa))\n\n## 1.8.1 (2022-01-30)\n\n#### Bug Fixes\n* [#499](https://github.com/mondaycom/monday-ui-react-core/pull/499) Support placeholder in drop down with multi state ([@hadasfa](https://github.com/hadasfa))\n* [#500](https://github.com/mondaycom/monday-ui-react-core/pull/500) Fixed menu item hover ([@laviomri](https://github.com/laviomri))\n\n#### New Icons\n* [#501](https://github.com/mondaycom/monday-ui-react-core/pull/501) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.8.0 (2022-01-27)\n\n#### Bug Fixes\n* [#495](https://github.com/mondaycom/monday-ui-react-core/pull/495) fix close when click outside in drop down and display correct options when delete ([@hadasfa](https://github.com/hadasfa))\n* [#496](https://github.com/mondaycom/monday-ui-react-core/pull/496) feature/yarden/dropdown-max-height ([@yardenli](https://github.com/yardenli))\n* [#487](https://github.com/mondaycom/monday-ui-react-core/pull/487) fix(slider): change broken padding for slider prefix ([@niksa-monday](https://github.com/niksa-monday))\n* [#477](https://github.com/mondaycom/monday-ui-react-core/pull/477) Keyboard nav context improvements ([@laviomri](https://github.com/laviomri))\n\n#### New Features\n* [#493](https://github.com/mondaycom/monday-ui-react-core/pull/493) Disabled indexes for keyboard nav ([@laviomri](https://github.com/laviomri))\n* [#488](https://github.com/mondaycom/monday-ui-react-core/pull/488) Skipping disabled components while navigating ([@laviomri](https://github.com/laviomri))\n* [#479](https://github.com/mondaycom/monday-ui-react-core/pull/479) support ref passing for dropdown ([@etaylib](https://github.com/etaylib))\n* [#480](https://github.com/mondaycom/monday-ui-react-core/pull/480) Added focusItemIndexOnMount to useGridKeyboardNavigation ([@laviomri](https://github.com/laviomri))\n\n#### Dependency Upgrades\n* [#484](https://github.com/mondaycom/monday-ui-react-core/pull/484) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n#### Documentation\n* [#489](https://github.com/mondaycom/monday-ui-react-core/pull/489) Story for ColorPicker shape prop ([@laviomri](https://github.com/laviomri))\n* [#486](https://github.com/mondaycom/monday-ui-react-core/pull/486) added missing proptype + added as action ([@laviomri](https://github.com/laviomri))\n\n#### Internal Changes\n* [#492](https://github.com/mondaycom/monday-ui-react-core/pull/492) Menu item small refactor ([@laviomri](https://github.com/laviomri))\n\n#### New Icons\n* [#490](https://github.com/mondaycom/monday-ui-react-core/pull/490) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.7.0 (2022-01-24)\n\n#### New Features\n* [#472](https://github.com/mondaycom/monday-ui-react-core/pull/472) add option renderer to combobox ([@roniCohen123](https://github.com/roniCohen123))\n* [#464](https://github.com/mondaycom/monday-ui-react-core/pull/464) Keyboard nav for ColorPicker ([@laviomri](https://github.com/laviomri))\n\n#### Documentation\n* [#476](https://github.com/mondaycom/monday-ui-react-core/pull/476) Minor fixes in split button story ([@hadasfa](https://github.com/hadasfa))\n\n## 1.6.3 (2022-01-23)\n\n#### Bug Fixes\n* [#467](https://github.com/mondaycom/monday-ui-react-core/pull/467) support keep open mode for dropdown ([@etaylib](https://github.com/etaylib))\n* [#475](https://github.com/mondaycom/monday-ui-react-core/pull/475) Fix/orr/menu item css fix ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.6.2 (2022-01-23)\n\n#### New Icons\n* [#474](https://github.com/mondaycom/monday-ui-react-core/pull/474) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.6.1 (2022-01-23)\n\n#### Bug Fixes\n* [#473](https://github.com/mondaycom/monday-ui-react-core/pull/473) Use resetAfterIndices ([@or-nuri-monday](https://github.com/or-nuri-monday))\n\n## 1.6.0 (2022-01-23)\n\n#### Bug Fixes\n* [#469](https://github.com/mondaycom/monday-ui-react-core/pull/469) Focus on editing editable header ([@laviomri](https://github.com/laviomri))\n\n#### New Features\n* [#470](https://github.com/mondaycom/monday-ui-react-core/pull/470) feat: added 'onInputChange' property to Dropdown ([@udidoron](https://github.com/udidoron))\n\n#### Internal Changes\n* [#471](https://github.com/mondaycom/monday-ui-react-core/pull/471) feat: fix lint and absolute paths ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.5.0 (2022-01-20)\n\n#### Bug Fixes\n* [#468](https://github.com/mondaycom/monday-ui-react-core/pull/468) Feature/ornu/virtualizedgrid/Fix rows and columns calculations ([@or-nuri-monday](https://github.com/or-nuri-monday))\n\n#### New Features\n* [#462](https://github.com/mondaycom/monday-ui-react-core/pull/462) Added GridKeyboardNavigationContext ([@laviomri](https://github.com/laviomri))\n* [#461](https://github.com/mondaycom/monday-ui-react-core/pull/461) Added useGridKeyboardNavigation ([@laviomri](https://github.com/laviomri))\n\n## 1.4.0 (2022-01-20)\n\n#### Bug Fixes\n* [#466](https://github.com/mondaycom/monday-ui-react-core/pull/466) Call resetAfterIndices instead of resetAfterIndex ([@or-nuri-monday](https://github.com/or-nuri-monday))\n* [#463](https://github.com/mondaycom/monday-ui-react-core/pull/463) AttentionBox with icon on compact mode support & Docs fixes in attention box and typography ([@hadasfa](https://github.com/hadasfa))\n\n#### New Features\n* [#424](https://github.com/mondaycom/monday-ui-react-core/pull/424) feat(slider): create new component - Slider ([@niksa-monday](https://github.com/niksa-monday))\n* [#465](https://github.com/mondaycom/monday-ui-react-core/pull/465) feat: export and align hooks exposure ([@orrgottlieb](https://github.com/orrgottlieb))\n* [#456](https://github.com/mondaycom/monday-ui-react-core/pull/456) Feature/hadas/flex ([@hadasfa](https://github.com/hadasfa))\n\n#### Documentation\n* [#458](https://github.com/mondaycom/monday-ui-react-core/pull/458) Added optional mapping from action to input props ([@laviomri](https://github.com/laviomri))\n\n## 1.3.3 (2022-01-18)\n\n#### Bug Fixes\n* [#460](https://github.com/mondaycom/monday-ui-react-core/pull/460) Fix tabs rendering non active tabs ([@MosheZemah](https://github.com/MosheZemah))\n\n## 1.3.2 (2022-01-17)\n\n#### New Icons\n* [#459](https://github.com/mondaycom/monday-ui-react-core/pull/459) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.3.1 (2022-01-13)\n\n#### Bug Fixes\n* [#457](https://github.com/mondaycom/monday-ui-react-core/pull/457) fix: Loader issues ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.3.0 (2022-01-13)\n\n#### New Features\n* [#443](https://github.com/mondaycom/monday-ui-react-core/pull/443) Adding VirtualizedGrid component ([@or-nuri-monday](https://github.com/or-nuri-monday))\n\n#### Dependency Upgrades\n* [#455](https://github.com/mondaycom/monday-ui-react-core/pull/455) Fix/eslint ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.2.6 (2022-01-12)\n\n#### New Icons\n* [#454](https://github.com/mondaycom/monday-ui-react-core/pull/454) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.2.5 (2022-01-12)\n\n#### Bug Fixes\n* [#453](https://github.com/mondaycom/monday-ui-react-core/pull/453) Fix icon button export ([@hadasfa](https://github.com/hadasfa))\n* [#452](https://github.com/mondaycom/monday-ui-react-core/pull/452) Fix dialog hideTriggerIgnoreClass prop type to accept array ([@MosheZemah](https://github.com/MosheZemah))\n\n## 1.2.4 (2022-01-11)\n\n#### Bug Fixes\n* [#450](https://github.com/mondaycom/monday-ui-react-core/pull/450) editable clickable test fix ([@ronachmany-monday](https://github.com/ronachmany-monday))\n* [#448](https://github.com/mondaycom/monday-ui-react-core/pull/448) icon button export ([@ronachmany-monday](https://github.com/ronachmany-monday))\n\n#### Documentation\n* [#445](https://github.com/mondaycom/monday-ui-react-core/pull/445) Storybook actions ([@laviomri](https://github.com/laviomri))\n\n#### New Icons\n* [#449](https://github.com/mondaycom/monday-ui-react-core/pull/449) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 1.2.3 (2022-01-10)\n\n#### Bug Fixes\n* [#444](https://github.com/mondaycom/monday-ui-react-core/pull/444) use button to clickable ([@ronachmany-monday](https://github.com/ronachmany-monday))\n\n#### Documentation\n* [#440](https://github.com/mondaycom/monday-ui-react-core/pull/440) Fix stories errors and typos    ([@hadasfa](https://github.com/hadasfa))\n\n## 1.2.2 (2022-01-10)\n\n#### Bug Fixes\n* [#442](https://github.com/mondaycom/monday-ui-react-core/pull/442) fix: Props passing bug in tabs panel ([@orrgottlieb](https://github.com/orrgottlieb))\n\n#### Documentation\n* [#439](https://github.com/mondaycom/monday-ui-react-core/pull/439) Fixed code example of 'Menu with 2-depth sub menu' ([@laviomri](https://github.com/laviomri))\n* [#438](https://github.com/mondaycom/monday-ui-react-core/pull/438) fix links story controls, add leanylabs as contributors and add few description to props ([@hadasfa](https://github.com/hadasfa))\n* [#437](https://github.com/mondaycom/monday-ui-react-core/pull/437) random story fixes ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.2.1 (2022-01-06)\n\n#### Bug Fixes\n* [#436](https://github.com/mondaycom/monday-ui-react-core/pull/436) check that element is there ([@amirbardugo](https://github.com/amirbardugo))\n\n## 1.2.0 (2022-01-05)\n\n#### New Features\n* [#430](https://github.com/mondaycom/monday-ui-react-core/pull/430) Create an ESM entry ([@sahariko](https://github.com/sahariko))\n\n#### Dependency Upgrades\n* [#431](https://github.com/mondaycom/monday-ui-react-core/pull/431) Infra/orr/update deps ([@orrgottlieb](https://github.com/orrgottlieb))\n\n#### Documentation\n* [#425](https://github.com/mondaycom/monday-ui-react-core/pull/425) New components docs (tabs sub components and hidden text component) ([@hadasfa](https://github.com/hadasfa))\n\n#### New Icons\n* [#434](https://github.com/mondaycom/monday-ui-react-core/pull/434) feat: LearnMore icon ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 1.1.0 (2022-01-05)\n\n#### Bug Fixes\n* [#426](https://github.com/mondaycom/monday-ui-react-core/pull/426) Bugfix : scroll menu if needed ([@amirbardugo](https://github.com/amirbardugo))\n\n#### New Features\n* [#432](https://github.com/mondaycom/monday-ui-react-core/pull/432) Enhance use key event ([@MosheZemah](https://github.com/MosheZemah))\n\n## 1.0.4 (2022-01-04)\n\n#### Bug Fixes\n* [#423](https://github.com/mondaycom/monday-ui-react-core/pull/423) Add support on consistent API for all the library components for class name and disabled props ([@hadasfa](https://github.com/hadasfa))\n\n## 1.0.3 (2021-12-30)\n\n#### Bug Fixes\n* [#420](https://github.com/mondaycom/monday-ui-react-core/pull/420) Fix virtualized list scrollbar visible issue ([@MosheZemah](https://github.com/MosheZemah))\n\n## 1.0.2 (2021-12-29)\n\n#### Bug Fixes\n* [#404](https://github.com/mondaycom/monday-ui-react-core/pull/404) added support for date and date time for input ([@etaylib](https://github.com/etaylib))\n\n## 1.0.1 (2021-12-29)\n\n#### Bug Fixes\n* [#417](https://github.com/mondaycom/monday-ui-react-core/pull/417) Change `className` props to consistent naming ([@hadasfa](https://github.com/hadasfa))\n* [#416](https://github.com/mondaycom/monday-ui-react-core/pull/416) Tree-shake the library ([@sahariko](https://github.com/sahariko))\n\n#### Documentation\n* [#418](https://github.com/mondaycom/monday-ui-react-core/pull/418) Update PULL_REQUEST_TEMPLATE.md ([@sahariko](https://github.com/sahariko))\n\n## 1.0.0 (2021-12-27)\n\n#### Breaking Changes\n* [#340](https://github.com/mondaycom/monday-ui-react-core/pull/340) Vibe Design System release\n* [#340](https://github.com/mondaycom/monday-ui-react-core/pull/340) Node Sass as a bunlder\n* [#340](https://github.com/mondaycom/monday-ui-react-core/pull/340) New Documentation\n* [#340](https://github.com/mondaycom/monday-ui-react-core/pull/340) More Hooks\n* [#340](https://github.com/mondaycom/monday-ui-react-core/pull/340) className props unification\n* [#340](https://github.com/mondaycom/monday-ui-react-core/pull/340) Upgrade Storybook\n* [#340](https://github.com/mondaycom/monday-ui-react-core/pull/340) Chromatic Integration\n\n## 0.14.4 (2021-12-15)\n\n#### Bug Fixes\n* [#389](https://github.com/mondaycom/monday-ui-react-core/pull/389) added classname to the virtualized list where scrollbars appears ([@etaylib](https://github.com/etaylib))\n\n## 0.14.3 (2021-12-15)\n\n#### Bug Fixes\n* [#391](https://github.com/mondaycom/monday-ui-react-core/pull/391) quick fix in the index of color utils ([@hadasfa](https://github.com/hadasfa))\n* [#390](https://github.com/mondaycom/monday-ui-react-core/pull/390) Fix bugs on allow multiple on click ([@hadasfa](https://github.com/hadasfa))\n\n## 0.14.2 (2021-12-14)\n\n#### Bug Fixes\n* [#388](https://github.com/mondaycom/monday-ui-react-core/pull/388) Fix bug on color utils  ([@hadasfa](https://github.com/hadasfa))\n\n## 0.14.1 (2021-12-14)\n\n#### Bug Fixes\n* [#387](https://github.com/mondaycom/monday-ui-react-core/pull/387) export color utils as default object (for fixing error while trying to create new version) ([@hadasfa](https://github.com/hadasfa))\n\n## 0.14.0 (2021-12-14)\n\n#### Bug Fixes\n* [#386](https://github.com/mondaycom/monday-ui-react-core/pull/386) set default color to tabs titles ([@hadasfa](https://github.com/hadasfa))\n* [#384](https://github.com/mondaycom/monday-ui-react-core/pull/384) fix accordion item type check ([@hadasfa](https://github.com/hadasfa))\n\n#### New Features\n* [#385](https://github.com/mondaycom/monday-ui-react-core/pull/385) expose colors-utils ([@ofersh-monday](https://github.com/ofersh-monday))\n\n## 0.13.1 (2021-12-12)\n\n#### New Icons\n* [#382](https://github.com/mondaycom/monday-ui-react-core/pull/382) Update damaged icons ([@yardenli](https://github.com/yardenli))\n* [#381](https://github.com/mondaycom/monday-ui-react-core/pull/381) added new icons ([@etaylib](https://github.com/etaylib))\n\n## 0.13.0 (2021-12-06)\n\n#### Bug Fixes\n* [#376](https://github.com/mondaycom/monday-ui-react-core/pull/376) added indexes for other idGetter usages ([@etaylib](https://github.com/etaylib))\n\n#### New Features\n* [#377](https://github.com/mondaycom/monday-ui-react-core/pull/377) add modifiers support to tipseen and tooltip ([@hadasfa](https://github.com/hadasfa))\n\n#### Internal Changes\n* [#378](https://github.com/mondaycom/monday-ui-react-core/pull/378) Fix `<Dropdown>` test driver ([@sahariko](https://github.com/sahariko))\n\n## 0.12.1 (2021-12-05)\n\n#### Bug Fixes\n* [#374](https://github.com/mondaycom/monday-ui-react-core/pull/374) Fix `<Dropdown>` multi-value bug ([@sahariko](https://github.com/sahariko))\n* [#375](https://github.com/mondaycom/monday-ui-react-core/pull/375) passing index to getter in virtualized list ([@etaylib](https://github.com/etaylib))\n\n## 0.12.0 (2021-12-05)\n\n#### New Features\n* [#354](https://github.com/mondaycom/monday-ui-react-core/pull/354) Multiselect component ([@sahariko](https://github.com/sahariko))\n\n#### New Icons\n* [#373](https://github.com/mondaycom/monday-ui-react-core/pull/373) feat: icons ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 0.11.0 (2021-12-01)\n\n#### Bug Fixes\n* [#370](https://github.com/mondaycom/monday-ui-react-core/pull/370) fix package lock ([@hadasfa](https://github.com/hadasfa))\n\n#### New Features\n* [#369](https://github.com/mondaycom/monday-ui-react-core/pull/369) add MenuButton onClick prop ([@shalomscott](https://github.com/shalomscott))\n* [#367](https://github.com/mondaycom/monday-ui-react-core/pull/367) add MenuButton props to control dialog hide/show trigger ignore class ([@shalomscott](https://github.com/shalomscott))\n\n#### New Icons\n* [#368](https://github.com/mondaycom/monday-ui-react-core/pull/368) Update icons ([@darbentov](https://github.com/darbentov))\n\n## 0.10.1 (2021-12-01)\n\n#### Bug Fixes\n* [#366](https://github.com/mondaycom/monday-ui-react-core/pull/366) pass event to onclick ([@etaylib](https://github.com/etaylib))\n\n#### New Icons\n* [#365](https://github.com/mondaycom/monday-ui-react-core/pull/365) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 0.10.0 (2021-11-30)\n\n#### New Features\n* [#361](https://github.com/mondaycom/monday-ui-react-core/pull/361) support onclick without navigation ([@etaylib](https://github.com/etaylib))\n\n#### New Icons\n* [#363](https://github.com/mondaycom/monday-ui-react-core/pull/363) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 0.9.7 (2021-11-28)\n\n#### New Icons\n* [#360](https://github.com/mondaycom/monday-ui-react-core/pull/360) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 0.9.6 (2021-11-28)\n\n#### Bug Fixes\n* [#358](https://github.com/mondaycom/monday-ui-react-core/pull/358) fix: export Icon component ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 0.9.5 (2021-11-24)\n\n#### New Icons\n* [#357](https://github.com/mondaycom/monday-ui-react-core/pull/357) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 0.9.4 (2021-11-21)\n\n#### Bug Fixes\n* [#348](https://github.com/mondaycom/monday-ui-react-core/pull/348) add aria label support for checkbox ([@hadasfa](https://github.com/hadasfa))\n\n#### Documentation\n* [#325](https://github.com/mondaycom/monday-ui-react-core/pull/325) docs : improve documentation for extra styles in <dropdown> ([@Muskan777](https://github.com/Muskan777))\n\n## 0.9.3 (2021-11-18)\n\n#### Bug Fixes\n* [#350](https://github.com/mondaycom/monday-ui-react-core/pull/350) Fix heading ellipsis issue with 1 line ([@MosheZemah](https://github.com/MosheZemah))\n\n## 0.9.2 (2021-11-18)\n\n#### Bug Fixes\n* [#349](https://github.com/mondaycom/monday-ui-react-core/pull/349) Prevent editable heading from being empty ([@MosheZemah](https://github.com/MosheZemah))\n* [#346](https://github.com/mondaycom/monday-ui-react-core/pull/346) Rename ButtonContstants file to ButtonConstants file ([@KarelVerschraegen](https://github.com/KarelVerschraegen))\n* [#344](https://github.com/mondaycom/monday-ui-react-core/pull/344) fix: safari useReszieObserver ([@orrgottlieb](https://github.com/orrgottlieb))\n\n#### Documentation\n* [#345](https://github.com/mondaycom/monday-ui-react-core/pull/345) Fix typo in useForceUpdate ([@KarelVerschraegen](https://github.com/KarelVerschraegen))\n\n#### New Icons\n* [#347](https://github.com/mondaycom/monday-ui-react-core/pull/347) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 0.9.1 (2021-11-17)\n\n#### Bug Fixes\n* [#341](https://github.com/mondaycom/monday-ui-react-core/pull/341) fix: callback on mount when should show on mount ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 0.9.0 (2021-11-17)\n\n#### Bug Fixes\n* [#339](https://github.com/mondaycom/monday-ui-react-core/pull/339) amitha/fix/combobox-disable-active-scroll-without-categories ([@amit-hanoch](https://github.com/amit-hanoch))\n* [#328](https://github.com/mondaycom/monday-ui-react-core/pull/328) Add support on className to Checkbox&AttentionBox instead of componentClassName ([@hadasfa](https://github.com/hadasfa))\n\n#### New Features\n* [#335](https://github.com/mondaycom/monday-ui-react-core/pull/335) Tooltip add show/hide events ([@ronachmany-monday](https://github.com/ronachmany-monday))\n\n#### Internal Changes\n* [#310](https://github.com/mondaycom/monday-ui-react-core/pull/310) stylelint rules ([@mentaman](https://github.com/mentaman))\n* [#309](https://github.com/mondaycom/monday-ui-react-core/pull/309) change fixed eslint to error ([@mentaman](https://github.com/mentaman))\n\n## 0.8.4 (2021-11-15)\n\n#### Bug Fixes\n* [#333](https://github.com/mondaycom/monday-ui-react-core/pull/333) amitha/fix/text-field-focus-animation-in-dialog ([@amit-hanoch](https://github.com/amit-hanoch))\n* [#332](https://github.com/mondaycom/monday-ui-react-core/pull/332) Combobox: fix the space between the search box to the first option ([@amit-hanoch](https://github.com/amit-hanoch))\n\n## 0.8.3 (2021-11-14)\n\n#### Bug Fixes\n* [#331](https://github.com/mondaycom/monday-ui-react-core/pull/331) successIconSize property to determine function success icon size ([@yardenli](https://github.com/yardenli))\n\n## 0.8.2 (2021-11-14)\n\n#### Bug Fixes\n* [#330](https://github.com/mondaycom/monday-ui-react-core/pull/330) Fix button initial loading state ([@MosheZemah](https://github.com/MosheZemah))\n\n## 0.8.1 (2021-11-11)\n\n#### Bug Fixes\n* [#327](https://github.com/mondaycom/monday-ui-react-core/pull/327) editable input focus in animation frame ([@barcohen2](https://github.com/barcohen2))\n\n## 0.8.0 (2021-11-07)\n\n#### New Features\n* [#321](https://github.com/mondaycom/monday-ui-react-core/pull/321) Adding tooltip content option to combobox item ([@samitc](https://github.com/samitc))\n* [#323](https://github.com/mondaycom/monday-ui-react-core/pull/323) Add support in tipseen component for: submitButtonText & submitButtonOnClick & dismissButtonText & dismissButtonOnClick & hideWhenReferenceHidden ([@hadasfa](https://github.com/hadasfa))\n\n## 0.7.3 (2021-11-04)\n\n#### Bug Fixes\n* [#322](https://github.com/mondaycom/monday-ui-react-core/pull/322) amitha/feature/dialog-is-reference-hidden ([@amit-hanoch](https://github.com/amit-hanoch))\n\n## 0.7.2 (2021-11-03)\n\n#### Bug Fixes\n* [#319](https://github.com/mondaycom/monday-ui-react-core/pull/319) Fix typo ([@MosheZemah](https://github.com/MosheZemah))\n* [#318](https://github.com/mondaycom/monday-ui-react-core/pull/318) Combobox sticky categories and search width ([@MosheZemah](https://github.com/MosheZemah))\n\n#### Documentation\n* [#317](https://github.com/mondaycom/monday-ui-react-core/pull/317) Plop/hadas/tests ([@hadasfa](https://github.com/hadasfa))\n\n#### New Icons\n* [#320](https://github.com/mondaycom/monday-ui-react-core/pull/320) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 0.7.1 (2021-11-01)\n\n#### Bug Fixes\n* [#313](https://github.com/mondaycom/monday-ui-react-core/pull/313) Added onClick callback support for AccordionItem ([@adirhaz1z](https://github.com/adirhaz1z))\n\n## 0.7.0 (2021-11-01)\n\n#### New Features\n* [#315](https://github.com/mondaycom/monday-ui-react-core/pull/315) add autoFocus to dropdown ([@ronachmany-monday](https://github.com/ronachmany-monday))\n* [#314](https://github.com/mondaycom/monday-ui-react-core/pull/314) amitha/feature/combobox-no-results ([@amit-hanoch](https://github.com/amit-hanoch))\n\n## 0.6.0 (2021-10-31)\n\n#### Bug Fixes\n* [#312](https://github.com/mondaycom/monday-ui-react-core/pull/312) fix bug on tipseen \"isCloseButtonHidden\" prop ([@hadasfa](https://github.com/hadasfa))\n\n#### New Features\n* [#308](https://github.com/mondaycom/monday-ui-react-core/pull/308) add support on menu button \"tooltip content\" and \"class name\" props and tipseen \"move by\" ([@hadasfa](https://github.com/hadasfa))\n* [#306](https://github.com/mondaycom/monday-ui-react-core/pull/306) amitha/feature/attention-box-close-icon ([@amit-hanoch](https://github.com/amit-hanoch))\n\n## 0.5.4 (2021-10-27)\n\n#### Bug Fixes\n* [#304](https://github.com/mondaycom/monday-ui-react-core/pull/304) fix: clean lint erros and remove not needed component ([@orrgottlieb](https://github.com/orrgottlieb))\n\n## 0.5.3 (2021-10-26)\n\n#### Bug Fixes\n* [#303](https://github.com/mondaycom/monday-ui-react-core/pull/303) opacity and padding fix ([@ronachmany-monday](https://github.com/ronachmany-monday))\n\n#### Internal Changes\n* [#302](https://github.com/mondaycom/monday-ui-react-core/pull/302) Bump patch version for dependency upgrades ([@sahariko](https://github.com/sahariko))\n\n## 0.5.2 (2021-10-26)\n\n#### New Icons\n* [#301](https://github.com/mondaycom/monday-ui-react-core/pull/301) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))\n\n## 0.5.1 (2021-10-25)\n\n#### Bug Fixes\n* [#300](https://github.com/mondaycom/monday-ui-react-core/pull/300) fix master tests ([@hadasfa](https://github.com/hadasfa))\n\n## 0.5.0 (2021-10-25)\n\n#### New Features\n* [#291](https://github.com/mondaycom/monday-ui-react-core/pull/291) Add support for accordion component  ([@adirhaz1z](https://github.com/adirhaz1z))\n\n## 0.4.1 (2021-10-25)\n\n#### Bug Fixes\n* [#299](https://github.com/mondaycom/monday-ui-react-core/pull/299) amitha/feature/combobox-prevent-scroll ([@amit-hanoch](https://github.com/amit-hanoch))\n\n#### Internal Changes\n* [#298](https://github.com/mondaycom/monday-ui-react-core/pull/298) Push tags on release script and update CONTRIBUTING.md ([@sahariko](https://github.com/sahariko))\n\n## 0.4.0 (2021-10-24)\n\n#### Bug Fixes\n* [#296](https://github.com/mondaycom/monday-ui-react-core/pull/296) fix tests ([@MosheZemah](https://github.com/MosheZemah))\n\n#### New Features\n* [#287](https://github.com/mondaycom/monday-ui-react-core/pull/287) Feature: when the prop title is undefined do not draw the monday style attention box component  title container ([@pedaars](https://github.com/pedaars))\n* [#266](https://github.com/mondaycom/monday-ui-react-core/pull/266) Feature: add support on \"withoutIcon\" prop to attention box component ([@pedaars](https://github.com/pedaars))\n* [#294](https://github.com/mondaycom/monday-ui-react-core/pull/294) feat: on option leave/enter combobox ([@orrgottlieb](https://github.com/orrgottlieb))\n* [#293](https://github.com/mondaycom/monday-ui-react-core/pull/293) Feat/orr/custom icon preproccessor ([@orrgottlieb](https://github.com/orrgottlieb))\n\n#### Internal Changes\n* [#297](https://github.com/mondaycom/monday-ui-react-core/pull/297) Fix release and add tagging ([@sahariko](https://github.com/sahariko))\n* [#295](https://github.com/mondaycom/monday-ui-react-core/pull/295) fix tests ([@MosheZemah](https://github.com/MosheZemah))\n* [#282](https://github.com/mondaycom/monday-ui-react-core/pull/282) Refactor versioning process ([@sahariko](https://github.com/sahariko))\n"
  },
  {
    "path": "packages/core/LICENSE",
    "content": "MIT License\n\nCopyright (c) 2020 monday.com LTD\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "packages/core/README.md",
    "content": "# @vibe/core\n\n<a href=\"https://bundlephobia.com/package/@vibe/core\"><img alt=\"npm bundle size\" src=\"https://img.shields.io/bundlephobia/minzip/@vibe/core\"></a>\n<a href=\"https://www.npmjs.com/package/@vibe/core\"><img alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/@vibe/core?label=@vibe/core\"></a>\n\n> Vibe Design System's Core Component Library in React\n\n## Usage\n\nComponents are imported from the library's root entry:\n\n```javascript\nimport { Button } from \"@vibe/core\";\n```\n\n### Global CSS Setup\n\nVibe components require `box-sizing: border-box` to be applied globally. Add the following to your root stylesheet:\n\n```css\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n```\n\n### Font installation\n\nWe don't import fonts ourselves, we work best with the following fonts -\nPoppins, Figtree and Roboto, we recommend adding the following `link` import to your application\n\n```html\n<link\n  href=\"https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\"\n  rel=\"stylesheet\"\n/>\n```\n\n## Theming\n\nTheming is supported using CSS variables - for more info on theming please read the [theme guidelines](./docs/theming.md) file.\n\n## Experimental SSR (Server Side Rendering)\n\nComponents are using style injection on the client side (into <head> element)\nThis is not usable on the server side.\nIn order to get the required styles on the server side, you should initialize\n\n```javascript\nglobalThis.injectedStyles = {};\n```\n\nin order to have each server side render component css inserted into the injectedStyles object\neach component will insert its css string under a unique key.\nThen you can join all the values into one string and add it under a `<style>` element\n\n## Experimental Component Metadata for LLMs\n\nYou can access component metadata (props, descriptions, etc.) via the `/meta` export path:\n\n```javascript\nimport metadata from \"@vibe/core/meta\";\n```\n\n**Note:** This feature is experimental and currently intended for internal Vibe LLM efforts. The structure and content of the metadata object are subject to change without notice in future versions. We cannot guarantee stability for this feature, yet.\n"
  },
  {
    "path": "packages/core/__mocks__/fileMock.cjs",
    "content": "const path = require(\"path\");\n\nmodule.exports = {\n  process(src, filename) {\n    return {\n      code: `module.exports = ${JSON.stringify(path.basename(filename))};`\n    };\n  }\n};\n"
  },
  {
    "path": "packages/core/babel.config.cjs",
    "content": "const TESTING_STORYBOOK = process.env.testing === \"storybook\";\n\nmodule.exports = api => {\n  const env = process.env.NODE_ENV;\n  api.cache.using(() => env);\n\n  const plugins = [\n    \"react-require\",\n    [\n      \"@babel/plugin-proposal-class-properties\",\n      {\n        loose: true\n      }\n    ],\n    [\n      \"@babel/plugin-proposal-private-methods\",\n      {\n        loose: true\n      }\n    ],\n    [\n      \"@babel/plugin-proposal-private-property-in-object\",\n      {\n        loose: true\n      }\n    ],\n    \"transform-react-remove-prop-types\"\n  ].filter(Boolean);\n\n  return {\n    env: {\n      test: {\n        plugins: [\"@babel/plugin-transform-runtime\"]\n      }\n    },\n    presets: [\n      [\n        \"@babel/preset-env\",\n        {\n          modules: env === \"test\" ? \"commonjs\" : false,\n          targets: TESTING_STORYBOOK\n            ? {\n                node: \"current\"\n              }\n            : {\n                chrome: \"66\",\n                ie: \"11\",\n                firefox: \"51\",\n                edge: \"18\",\n                node: \"current\"\n              }\n        }\n      ],\n      \"@babel/preset-typescript\",\n      \"@babel/preset-react\"\n    ],\n    plugins\n  };\n};\n"
  },
  {
    "path": "packages/core/package.json",
    "content": "{\n  \"name\": \"@vibe/core\",\n  \"version\": \"4.2.1\",\n  \"description\": \"Official monday.com UI resources for application development in React.js\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/mondaycom/vibe.git\",\n    \"directory\": \"packages/core\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/mondaycom/vibe/issues\"\n  },\n  \"homepage\": \"https://github.com/mondaycom/vibe#readme\",\n  \"author\": \"monday.com\",\n  \"license\": \"MIT\",\n  \"type\": \"module\",\n  \"main\": \"dist/src/index.js\",\n  \"types\": \"dist/index.d.ts\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \"./meta\": {\n      \"import\": \"./dist/metadata.json\",\n      \"default\": \"./dist/metadata.json\"\n    },\n    \".\": {\n      \"types\": \"./dist/index.d.ts\",\n      \"import\": \"./dist/src/index.js\",\n      \"default\": \"./dist/src/index.js\"\n    },\n    \"./interactionsTests\": {\n      \"types\": \"./dist/tests/interactions-utils.d.ts\",\n      \"import\": \"./dist/src/tests/interactionsTests.js\",\n      \"default\": \"./dist/src/tests/interactionsTests.js\"\n    },\n    \"./testIds\": {\n      \"types\": \"./dist/tests/test-ids-utils.d.ts\",\n      \"import\": \"./dist/src/tests/testIds.js\",\n      \"default\": \"./dist/src/tests/testIds.js\"\n    },\n    \"./next\": {\n      \"types\": \"./dist/components/next.d.ts\",\n      \"import\": \"./dist/src/components/next.js\",\n      \"default\": \"./dist/src/components/next.js\"\n    },\n    \"./tokens\": {\n      \"types\": \"./dist/tokens/tokens.d.ts\",\n      \"import\": \"./dist/tokens/tokens.css\",\n      \"default\": \"./dist/tokens/tokens.css\"\n    },\n    \"./mockedClassNames\": {\n      \"import\": \"./dist/mocked_classnames/src/index.js\",\n      \"default\": \"./dist/mocked_classnames/src/index.js\"\n    }\n  },\n  \"typesVersions\": {\n    \"*\": {\n      \"interactionsTests\": [\n        \"./dist/tests/interactions-utils.d.ts\"\n      ],\n      \"testIds\": [\n        \"./dist/tests/test-ids-utils.d.ts\"\n      ],\n      \"next\": [\n        \"./dist/components/next.d.ts\"\n      ],\n      \"tokens\": [\n        \"./dist/tokens/tokens.d.ts\"\n      ]\n    }\n  },\n  \"scripts\": {\n    \"test\": \"vitest run\",\n    \"test:watch\": \"vitest\",\n    \"test:update\": \"vitest run -u\",\n    \"test:coverage\": \"vitest run --coverage\",\n    \"start\": \"yarn build:esm -- --watch\",\n    \"build\": \"yarn build:esm && yarn build:mocked-classnames && yarn build:metadata\",\n    \"build:esm\": \"rollup -c\",\n    \"build:mocked-classnames\": \"[ \\\"$SKIP_RELEASE_ARTIFACTS\\\" = \\\"true\\\" ] || mock_classnames=on rollup -c\",\n    \"build:metadata\": \"[ \\\"$SKIP_RELEASE_ARTIFACTS\\\" = \\\"true\\\" ] || tsx src/scripts/generate-metadata.ts\",\n    \"link-local\": \"npm link && npm start\",\n    \"plop\": \"plop\",\n    \"lint\": \"eslint \\\"./src/**/*.{js,jsx,ts,tsx}\\\"\",\n    \"lint:fix\": \"yarn lint -- --fix\",\n    \"stylelint\": \"stylelint \\\"**/*.scss\\\"\",\n    \"stylelint:fix\": \"yarn stylelint -- --fix\"\n  },\n  \"dependencies\": {\n    \"@floating-ui/react-dom\": \"^2.1.2\",\n    \"@vibe/base\": \"4.0.1\",\n    \"@vibe/button\": \"4.0.1\",\n    \"@vibe/clickable\": \"4.0.1\",\n    \"@vibe/dialog\": \"4.0.1\",\n    \"@vibe/hooks\": \"4.0.1\",\n    \"@vibe/icon\": \"4.0.1\",\n    \"@vibe/icon-button\": \"4.0.1\",\n    \"@vibe/icons\": \"4.0.0\",\n    \"@vibe/layer\": \"4.0.1\",\n    \"@vibe/layout\": \"4.0.1\",\n    \"@vibe/loader\": \"4.0.1\",\n    \"@vibe/shared\": \"4.0.1\",\n    \"@vibe/style\": \"4.0.0\",\n    \"@vibe/tooltip\": \"4.0.1\",\n    \"@vibe/typography\": \"4.0.1\",\n    \"browserslist-config-monday\": \"1.0.6\",\n    \"classnames\": \"^2.3.2\",\n    \"date-fns\": \"^2.30.0\",\n    \"downshift\": \"^9.0.8\",\n    \"es-toolkit\": \"^1.39.10\",\n    \"react-day-picker\": \"^8.8.0\",\n    \"react-focus-lock\": \"^2.13.2\",\n    \"react-inlinesvg\": \"^4.1.3\",\n    \"react-is\": \"^16.9.0\",\n    \"react-remove-scroll\": \"^2.6.0\",\n    \"react-transition-group\": \"^4.4.5\",\n    \"react-virtualized-auto-sizer\": \"^1.0.7\",\n    \"react-window\": \"^1.8.7\",\n    \"style-inject\": \"^0.3.0\"\n  },\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.23.2\",\n    \"@babel/eslint-parser\": \"^7.16.5\",\n    \"@babel/parser\": \"^7.24.4\",\n    \"@babel/plugin-proposal-class-properties\": \"^7.16.5\",\n    \"@babel/plugin-proposal-private-methods\": \"^7.18.6\",\n    \"@babel/plugin-proposal-private-property-in-object\": \"^7.21.11\",\n    \"@babel/plugin-transform-modules-commonjs\": \"^7.16.5\",\n    \"@babel/plugin-transform-react-jsx\": \"^7.16.5\",\n    \"@babel/plugin-transform-runtime\": \"^7.16.7\",\n    \"@babel/preset-env\": \"^7.16.5\",\n    \"@babel/preset-react\": \"^7.16.5\",\n    \"@babel/preset-typescript\": \"^7.23.3\",\n    \"@babel/standalone\": \"^7.24.4\",\n    \"@babel/types\": \"^7.24.0\",\n    \"@hot-loader/react-dom\": \"^16.13.0\",\n    \"@jest/transform\": \"^29.7.0\",\n    \"@rollup/plugin-babel\": \"^6.0.2\",\n    \"@rollup/plugin-commonjs\": \"^23.0.2\",\n    \"@rollup/plugin-node-resolve\": \"^15.0.1\",\n    \"@rollup/plugin-typescript\": \"^9.0.2\",\n    \"@storybook/addon-a11y\": \"^8.6.15\",\n    \"@storybook/addon-actions\": \"^8.6.15\",\n    \"@storybook/addon-controls\": \"^8.6.15\",\n    \"@storybook/addon-docs\": \"^8.6.15\",\n    \"@storybook/addon-essentials\": \"^8.6.15\",\n    \"@storybook/addon-interactions\": \"^8.6.15\",\n    \"@storybook/addon-links\": \"^8.6.15\",\n    \"@storybook/addon-storysource\": \"^8.6.15\",\n    \"@storybook/addon-themes\": \"^8.6.15\",\n    \"@storybook/addon-toolbars\": \"^8.6.15\",\n    \"@storybook/blocks\": \"^8.6.15\",\n    \"@storybook/blocks7\": \"npm:@storybook/blocks@^7.6.21\",\n    \"@storybook/builder-vite\": \"^8.6.15\",\n    \"@storybook/jest\": \"^0.2.3\",\n    \"@storybook/manager-api\": \"^8.6.15\",\n    \"@storybook/preset-scss\": \"^1.0.3\",\n    \"@storybook/react\": \"^8.6.15\",\n    \"@storybook/react-vite\": \"^8.6.15\",\n    \"@storybook/source-loader\": \"^8.6.15\",\n    \"@storybook/storybook-deployer\": \"^2.8.16\",\n    \"@storybook/test\": \"^8.6.15\",\n    \"@storybook/testing-library\": \"^0.2.2\",\n    \"@storybook/theming\": \"^8.6.15\",\n    \"@testing-library/jest-dom\": \"^6.4.6\",\n    \"@testing-library/react\": \"^12.1.2\",\n    \"@testing-library/react-hooks\": \"^7.0.2\",\n    \"@testing-library/user-event\": \"^13.5.0\",\n    \"@types/babel__standalone\": \"^7.1.7\",\n    \"@types/jest-axe\": \"^3.5.9\",\n    \"@types/react\": \"^18.0.25\",\n    \"@types/react-is\": \"^16.7.5\",\n    \"@types/react-resizable\": \"^3.0.7\",\n    \"@types/react-syntax-highlighter\": \"^11.0.5\",\n    \"@types/react-test-renderer\": \"^16.9.0\",\n    \"@types/react-transition-group\": \"^4.4.5\",\n    \"@types/react-virtualized-auto-sizer\": \"^1.0.1\",\n    \"@types/react-window\": \"^1.8.5\",\n    \"@typescript-eslint/eslint-plugin\": \"^5.36.1\",\n    \"@typescript-eslint/parser\": \"^5.36.1\",\n    \"@uiw/codemirror-extensions-langs\": \"^4.21.25\",\n    \"@uiw/codemirror-theme-github\": \"^4.21.25\",\n    \"@uiw/react-codemirror\": \"^4.21.25\",\n    \"@vibe/config\": \"4.0.0\",\n    \"@vitejs/plugin-react\": \"^4.3.1\",\n    \"@vitest/coverage-v8\": \"^1.6.0\",\n    \"@vitest/ui\": \"^1.6.0\",\n    \"acorn\": \"^8.7.1\",\n    \"autoprefixer\": \"^10.4.0\",\n    \"babel-core\": \"^6.26.3\",\n    \"babel-loader\": \"^8.2.3\",\n    \"babel-plugin-react-require\": \"^3.1.3\",\n    \"babel-plugin-transform-react-remove-prop-types\": \"^0.4.24\",\n    \"babel-polyfill\": \"^6.26.0\",\n    \"babel-preset-react\": \"^6.24.1\",\n    \"boxt\": \"^1.1.1\",\n    \"chalk\": \"^4.1.2\",\n    \"chromatic\": \"^11.5.4\",\n    \"csstype\": \"^3.1.0\",\n    \"ejs\": \"^3.1.9\",\n    \"eslint\": \"^8.23.0\",\n    \"eslint-config-airbnb\": \"^19.0.4\",\n    \"eslint-config-prettier\": \"^8.3.0\",\n    \"eslint-plugin-import\": \"^2.25.4\",\n    \"eslint-plugin-json\": \"^3.1.0\",\n    \"eslint-plugin-jsx-a11y\": \"^6.5.1\",\n    \"eslint-plugin-markdown\": \"^2.2.1\",\n    \"eslint-plugin-only-warn\": \"^1.0.3\",\n    \"eslint-plugin-prettier\": \"^4.0.0\",\n    \"eslint-plugin-react\": \"^7.28.0\",\n    \"eslint-plugin-react-hooks\": \"^4.3.0\",\n    \"eslint-plugin-storybook\": \"^0.6.15\",\n    \"eslint-plugin-vitest\": \"^0.4.1\",\n    \"execa\": \"^5.1.1\",\n    \"identity-obj-proxy\": \"^3.0.0\",\n    \"jest-axe\": \"^8.0.0\",\n    \"js-sha256\": \"^0.9.0\",\n    \"json-loader\": \"^0.5.7\",\n    \"jsontosass\": \"^0.2.0\",\n    \"mini-css-extract-plugin\": \"^2.4.5\",\n    \"plop\": \"4.0.1\",\n    \"postcss\": \"^8.4.5\",\n    \"postcss-import\": \"^15.1.0\",\n    \"postcss-loader\": \"^6.2.1\",\n    \"postcss-scss\": \"^4.0.2\",\n    \"preact\": \"^10.8.0\",\n    \"prettier\": \"^2.5.1\",\n    \"react\": \"^16.14.0\",\n    \"react-docgen-typescript\": \"^2.2.2\",\n    \"react-dom\": \"^16.14.0\",\n    \"react-live\": \"^4.1.5\",\n    \"react-resizable\": \"^3.0.4\",\n    \"react-syntax-highlighter\": \"^15.5.0\",\n    \"react-test-renderer\": \"^16.14.0\",\n    \"remark-gfm\": \"^4.0.0\",\n    \"resolve-url-loader\": \"^5.0.0\",\n    \"rollup\": \"^2.79.1\",\n    \"rollup-plugin-copy\": \"^3.5.0\",\n    \"rollup-plugin-import-css\": \"^3.1.0\",\n    \"rollup-plugin-postcss\": \"^4.0.2\",\n    \"rollup-plugin-terser\": \"^7.0.2\",\n    \"rollup-plugin-typescript2\": \"^0.34.1\",\n    \"sass\": \"^1.51.0\",\n    \"snapshot-diff\": \"^0.9.0\",\n    \"storybook\": \"^8.6.15\",\n    \"storybook-addon-playground\": \"^2.0.1\",\n    \"stylelint\": \"^14.2.0\",\n    \"stylelint-config-recommended-scss\": \"^6.0.0\",\n    \"stylelint-no-unsupported-browser-features\": \"7.0.0\",\n    \"stylelint-use-logical\": \"^2.1.2\",\n    \"ts-loader\": \"^9.3.1\",\n    \"ts-morph\": \"^25.0.1\",\n    \"ts-node\": \"^10.9.2\",\n    \"tsx\": \"^4.20.3\",\n    \"typescript\": \"^5.9.3\",\n    \"typescript-plugin-css-modules\": \"^4.2.1\",\n    \"vibe-storybook-components\": \"4.0.0\",\n    \"vite\": \"^5.3.1\",\n    \"vitest\": \"^1.6.0\"\n  },\n  \"peerDependencies\": {\n    \"react\": \">=16.9.0\",\n    \"react-dom\": \">=16.9.0\"\n  },\n  \"sideEffects\": [\n    \"*.scss\",\n    \"*.css\",\n    \"*.scss.js\",\n    \"*.css.js\"\n  ],\n  \"browserslist\": [\n    \"extends browserslist-config-monday\"\n  ]\n}\n"
  },
  {
    "path": "packages/core/plop/component/component-index.txt",
    "content": "export { default as {{componentName}} } from \"./{{componentName}}\";\n\nexport * from \"./{{componentName}}.types\";\n"
  },
  {
    "path": "packages/core/plop/component/component-scss.txt",
    "content": ".{{camelCase componentName}} {\n\n}\n"
  },
  {
    "path": "packages/core/plop/component/component-stories-mdx.txt",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport @componentName@ from \"../@componentName@\";\nimport * as @componentName@Stories from \"./@componentName@.stories\";\n\n<Meta of={@componentName@Stories} />\n\n# @componentName@\n\n## Overview\n\nPlease write here the component description\n\n<Canvas of={@componentName@Stories.Overview} />\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines guidelines={[\"Usage guideline 1\", \"Usage guideline 2\", \"Usage guideline 3\"]} />\n\n## Variants\n\n### Story title 1\n\nDescription of story 1\n\n<Canvas of={@componentName@Stories.Story1} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: <@componentName@ />,\n        description: \"Best practice description.\"\n      },\n      negative: {\n        component: <@componentName@ />,\n        description: \"Bad practice description.\"\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### Story title 2\n\nDescription of story 2\n\n<Canvas of={@componentName@Stories.Story2} />\n\n## Related components\n\n<RelatedComponents componentsNames={[]} />\n"
  },
  {
    "path": "packages/core/plop/component/component-stories-tsx.txt",
    "content": "import React from \"react\";\nimport { createComponentTemplate } from \"vibe-storybook-components\";\nimport {{properCase componentName}} from \"../{{properCase componentName}}\";\nimport { createStoryMetaSettingsDecorator } from \"../../../storybook\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: {{properCase componentName}},\n  iconPropNamesArray: [], // List props that are typed as icons here\n  actionPropsArray: [] // List the component's actions here\n});\n\nexport default {\n  title: \"{{properCase componentName}}\",\n  component: {{properCase componentName}},\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n};\n\nconst {{camelCase componentName}}Template = createComponentTemplate({{properCase componentName}});\n\nexport const Overview = {\n  render: {{camelCase componentName}}Template.bind({}),\n  name: \"Overview\",\n  args: {\n    customProp: \"Overview\"\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const Story1 = {\n  render: () => {\n    return <{{properCase componentName}} customProp={\"Story 1\"} />;\n  },\n  name: \"Story 1\"\n};\n\nexport const Story2 = {\n  render: () => {\n    return <{{properCase componentName}} customProp={\"Story 2\"} />;\n  },\n  name: \"Story 2\"\n};\n"
  },
  {
    "path": "packages/core/plop/component/component-tests.txt",
    "content": "import React from \"react\";\nimport { fireEvent, render } from \"@testing-library/react\";\nimport {{properCase componentName}} from \"../{{properCase componentName}}\";\nimport { {{properCase componentName}}Props } from \"../{{properCase componentName}}.types\";\n\nconst renderComponent = (props: {{properCase componentName}}Props) => {\n  return render(<{{properCase componentName}} {...props} />);\n};\n\ndescribe(\"{{properCase componentName}}\", () => {\n  it(\"should render\", () => {});\n\n  it(\"should do  x when y\", () => {});\n});\n"
  },
  {
    "path": "packages/core/plop/component/component-ts.txt",
    "content": "import React, { forwardRef, useRef, ForwardedRef } from \"react\";\nimport cx from \"classnames\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\nimport styles from \"./{{properCase componentName}}.module.scss\";\nimport { {{properCase componentName}}Props } from \"./{{properCase componentName}}.types\";\n\nconst {{properCase componentName}} = forwardRef(\n  (\n    { className, id, \"data-testid\": dataTestId, customProp = \"defaultValue\" }: {{properCase componentName}}Props,\n    ref: ForwardedRef<HTMLDivElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    return (\n      <div\n        ref={mergedRef}\n        className={cx(styles.{{camelCase componentName}}, className)}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.{{constantCase componentName}}, id)}\n      >\n        My awesome component with customProp = {customProp}\n      </div>\n    );\n  }\n);\n\nexport default {{properCase componentName}};\n"
  },
  {
    "path": "packages/core/plop/component/component-types.txt",
    "content": "import { VibeComponentProps } from \"../../types\";\n\nexport interface {{properCase componentName}}Props extends VibeComponentProps {\n  /**\n   * some custom prop\n   */\n  customProp?: string;\n}\n"
  },
  {
    "path": "packages/core/plop/component/index.js",
    "content": "export default {\n  description: \"New Vibe component\",\n  prompts: [\n    {\n      type: \"input\",\n      name: \"componentName\",\n      message: \"What is the name of your component? (e.g. ButtonGroup)\"\n    }\n  ],\n  actions: [\n    {\n      type: \"add\",\n      path: \"src/components/{{properCase componentName}}/{{properCase componentName}}.tsx\",\n      templateFile: \"plop/component/component-ts.txt\"\n    },\n    {\n      type: \"append\",\n      path: \"src/tests/constants.ts\",\n      pattern: /(\\/\\/ plop_marker:default-data-testid-declarations)/g,\n      template: '  {{constantCase componentName}} = \"{{dashCase componentName}}\",'\n    },\n    {\n      type: \"add\",\n      path: \"src/components/{{properCase componentName}}/{{properCase componentName}}.module.scss\",\n      templateFile: \"plop/component/component-scss.txt\"\n    },\n    {\n      type: \"add\",\n      path: \"src/components/{{properCase componentName}}/__stories__/{{properCase componentName}}.mdx\",\n      templateFile: \"plop/component/component-stories-mdx.txt\"\n    },\n    {\n      type: \"modify\",\n      path: \"src/components/{{properCase componentName}}/__stories__/{{properCase componentName}}.mdx\",\n      pattern: /@componentName@/g,\n      template: \"{{properCase componentName}}\"\n    },\n    {\n      type: \"add\",\n      path: \"src/components/{{properCase componentName}}/__stories__/{{properCase componentName}}.stories.tsx\",\n      templateFile: \"plop/component/component-stories-tsx.txt\"\n    },\n    {\n      type: \"add\",\n      path: \"src/components/{{properCase componentName}}/index.ts\",\n      templateFile: \"plop/component/component-index.txt\"\n    },\n    {\n      type: \"add\",\n      path: \"src/components/{{properCase componentName}}/{{properCase componentName}}.types.ts\",\n      templateFile: \"plop/component/component-types.txt\"\n    },\n    {\n      type: \"add\",\n      path: \"src/components/{{properCase componentName}}/__tests__/{{properCase componentName}}.test.tsx\",\n      templateFile: \"plop/component/component-tests.txt\"\n    },\n    {\n      type: \"append\",\n      path: \"src/components/index.ts\",\n      template: 'export * from \"./{{componentName}}\";\\n'\n    }\n  ]\n};\n"
  },
  {
    "path": "packages/core/plopfile.js",
    "content": "import component from \"./plop/component/index.js\";\n\nexport default function (plop) {\n  plop.setGenerator(\"Component\", component);\n}\n"
  },
  {
    "path": "packages/core/rollup.config.js",
    "content": "import * as path from \"path\";\nimport nodeResolve from \"@rollup/plugin-node-resolve\";\nimport babel from \"@rollup/plugin-babel\";\nimport commonjs from \"@rollup/plugin-commonjs\";\nimport typescript from \"rollup-plugin-typescript2\";\nimport { terser } from \"rollup-plugin-terser\";\nimport postcss from \"rollup-plugin-postcss\";\nimport postCssImport from \"postcss-import\";\nimport autoprefixer from \"autoprefixer\";\nimport { sha256 } from \"js-sha256\";\nimport * as fs from \"fs\";\nimport ejs from \"ejs\";\nimport copy from \"rollup-plugin-copy\";\n\nconst EXTENSIONS = [\".js\", \".jsx\", \".ts\", \".tsx\"];\nconst ROOT_PATH = path.join(__dirname);\nconst SRC_PATH = path.join(ROOT_PATH, \"src\");\nconst DIST_PATH = path.join(ROOT_PATH, \"dist\");\nconst injectStyle = fs.readFileSync(\"./scripts/styleInject.ejs\", \"utf8\");\n\nconst shouldMockModularClassnames = process.env.mock_classnames === \"on\";\n\nfunction replaceDotWithUnderscore(verNum) {\n  return verNum.replace(/\\./g, \"_\");\n}\n\nfunction getShortSha(content, length = 10) {\n  return sha256(content).slice(0, length);\n}\n\nfunction loadPackageJson() {\n  const packageJson = fs.readFileSync(\"./package.json\", \"utf8\");\n  return JSON.parse(packageJson);\n}\n\nfunction generateCssModulesScopedName(name, filename, css) {\n  const start = css.indexOf(`${name} {`);\n  const end = css.indexOf(\"}\", start);\n  const content = css.slice(start + name.length + 1, end).replace(/[\\r\\n]/, \"\");\n  const loadPackageJsonResult = loadPackageJson();\n  return `${name}_${getShortSha(content + replaceDotWithUnderscore(loadPackageJsonResult.version))}`;\n}\n\nfunction onwarn(message) {\n  if (message.code === \"CIRCULAR_DEPENDENCY\") {\n    console.error(\"Circular dependency detected: \", message, \"Build failed, exiting...\");\n    process.exit(1);\n  }\n  console.warn(message);\n}\n\nfunction generateCssModulesMockName(name) {\n  return name;\n}\n\nfunction getVibePackagesWithMockedClassNames() {\n  const packagesWithMocked = new Map();\n  const packagesRoot = path.resolve(__dirname, \"..\");\n\n  const scanDir = dir => {\n    if (!fs.existsSync(dir)) return;\n    for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {\n      if (!entry.isDirectory()) continue;\n      const pkgJsonPath = path.join(dir, entry.name, \"package.json\");\n      if (!fs.existsSync(pkgJsonPath)) continue;\n      try {\n        const pkg = JSON.parse(fs.readFileSync(pkgJsonPath, \"utf8\"));\n        if (pkg.name?.startsWith(\"@vibe/\") && pkg.exports?.[\"./mockedClassNames\"]) {\n          packagesWithMocked.set(pkg.name, true);\n        }\n      } catch (e) {\n        // Skip invalid package.json\n      }\n    }\n  };\n\n  scanDir(packagesRoot);\n  scanDir(path.join(packagesRoot, \"components\"));\n\n  return packagesWithMocked;\n}\n\nconst vibePackagesWithMocked = shouldMockModularClassnames ? getVibePackagesWithMockedClassNames() : new Map();\n\nexport default {\n  onwarn,\n  output: {\n    dir: shouldMockModularClassnames ? path.join(DIST_PATH, \"mocked_classnames\") : DIST_PATH,\n    indent: false,\n    strict: false,\n    exports: \"named\",\n    preserveModules: true,\n    preserveModulesRoot: \".\",\n    sourcemap: true,\n    format: \"esm\"\n  },\n  input: {\n    index: path.join(SRC_PATH, \"index.ts\"),\n    interactionsTests: path.join(SRC_PATH, \"tests/interactions-utils.ts\"),\n    testIds: path.join(SRC_PATH, \"tests/test-ids-utils.ts\"),\n    next: path.join(SRC_PATH, \"components/next.ts\")\n  },\n  external: [/node_modules\\/(?!@vibe\\/style)(.*)/],\n  plugins: [\n    ...(shouldMockModularClassnames\n      ? [\n          {\n            name: \"resolve-vibe-to-mocked-entry-points\",\n            resolveId: {\n              order: \"pre\",\n              handler(source) {\n                if (source.startsWith(\"@vibe/\") && !source.includes(\"/mockedClassNames\")) {\n                  const packageName = source.replace(\"@vibe/\", \"\").split(\"/\")[0];\n                  const fullPackageName = `@vibe/${packageName}`;\n\n                  if (vibePackagesWithMocked.has(fullPackageName)) {\n                    return { id: `${fullPackageName}/mockedClassNames`, external: true };\n                  }\n\n                  return { id: source, external: true };\n                }\n                return null;\n              }\n            }\n          }\n        ]\n      : []),\n    commonjs(),\n    nodeResolve({\n      extensions: [...EXTENSIONS, \".json\", \".css\"]\n    }),\n    typescript({\n      tsconfigOverride: {\n        exclude: [\"**/__tests__\", \"**/__stories__\", path.join(SRC_PATH, \"storybook\")]\n      }\n    }),\n    babel({\n      babelHelpers: \"bundled\",\n      extensions: EXTENSIONS\n    }),\n    terser({\n      compress: {\n        pure_getters: true,\n        unsafe: true,\n        unsafe_comps: true\n      }\n    }),\n    postcss({\n      /**\n       * Normally, this plugin expects a local version of \"node_modules\" to be present, but since\n       * we're externalizing all \"node_modules\", it doesn't exist.\n       * This little hack makes sure we're using \"node_modules\" instead of what the plugin expects.\n       */\n      inject: function (cssVariableName, filename) {\n        if (!injectStyle) return null;\n        let shaKey = filename;\n        try {\n          const data = fs.readFileSync(filename, \"utf8\");\n\n          shaKey = getShortSha(data, 12);\n        } catch (err) {\n          console.error(err);\n        }\n        const version = replaceDotWithUnderscore(loadPackageJson().version);\n        const hashValue = `s_id-${shaKey}`;\n        return ejs.render(injectStyle, { cssVariableName, hashValue, version });\n      },\n      plugins: [autoprefixer(), postCssImport()],\n      modules: {\n        generateScopedName: (name, filename, css) =>\n          shouldMockModularClassnames\n            ? generateCssModulesMockName(name)\n            : generateCssModulesScopedName(name, filename, css)\n      }\n    }),\n    copy({\n      targets: [\n        {\n          src: \"../../node_modules/@vibe/style/dist/index.min.css\",\n          dest: \"dist/tokens\",\n          rename: () => \"tokens.css\"\n        },\n        {\n          src: \"types/tokens.d.ts\",\n          dest: \"dist/tokens\"\n        }\n      ]\n    })\n  ]\n};\n"
  },
  {
    "path": "packages/core/scripts/styleInject.ejs",
    "content": "function styleInject(css) {\n    const id = \"<%= hashValue %>_<%= version %>\";\n    if(typeof document !== 'undefined') {\n        const head = document.head || document.getElementsByTagName('head')[0];\n        const styleExists = head.querySelector(\"#\" + id);\n    \n        if(styleExists) return;\n    \n        const style = document.createElement('style');\n        style.id = id;\n    \n        if (head.firstChild) {\n            head.insertBefore(style, head.firstChild);\n        } else {\n            head.appendChild(style);\n        }\n    \n        style.appendChild(document.createTextNode(css));\n    } else if (globalThis.injectedStyles) {\n        // support SSR environments\n        globalThis.injectedStyles[id] = css;\n    }\n}\n\nstyleInject(<%= cssVariableName %>);\n"
  },
  {
    "path": "packages/core/src/__tests__/__snapshots__/exports.test.ts.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`exports > should export all components 1`] = `\n[\n  \"Accordion\",\n  \"AccordionItem\",\n  \"AlertBanner\",\n  \"AlertBannerButton\",\n  \"AlertBannerLink\",\n  \"AlertBannerText\",\n  \"AttentionBox\",\n  \"Avatar\",\n  \"AvatarGroup\",\n  \"Badge\",\n  \"Box\",\n  \"BreadcrumbItem\",\n  \"BreadcrumbMenu\",\n  \"BreadcrumbMenuItem\",\n  \"BreadcrumbsBar\",\n  \"Button\",\n  \"ButtonGroup\",\n  \"Checkbox\",\n  \"Chips\",\n  \"Clickable\",\n  \"ColorPicker\",\n  \"ColorPickerContent\",\n  \"ColorUtils\",\n  \"Combobox\",\n  \"Counter\",\n  \"CustomSvgIcon\",\n  \"DatePicker\",\n  \"Dialog\",\n  \"DialogContentContainer\",\n  \"Divider\",\n  \"Dropdown\",\n  \"EditableHeading\",\n  \"EditableText\",\n  \"EmptyState\",\n  \"ExpandCollapse\",\n  \"Flex\",\n  \"FormattedNumber\",\n  \"GridKeyboardNavigationContext\",\n  \"Heading\",\n  \"HiddenText\",\n  \"Icon\",\n  \"IconButton\",\n  \"Info\",\n  \"Label\",\n  \"LayerProvider\",\n  \"Link\",\n  \"List\",\n  \"ListItem\",\n  \"ListItemAvatar\",\n  \"ListItemIcon\",\n  \"ListTitle\",\n  \"Loader\",\n  \"Menu\",\n  \"MenuButton\",\n  \"MenuDivider\",\n  \"MenuGridItem\",\n  \"MenuItem\",\n  \"MenuItemButton\",\n  \"MenuTitle\",\n  \"Modal\",\n  \"ModalBasicLayout\",\n  \"ModalContent\",\n  \"ModalFooter\",\n  \"ModalFooterWizard\",\n  \"ModalHeader\",\n  \"ModalMedia\",\n  \"ModalMediaLayout\",\n  \"ModalSideBySideLayout\",\n  \"MultiStepIndicator\",\n  \"NumberField\",\n  \"ProgressBar\",\n  \"RadioButton\",\n  \"Search\",\n  \"Skeleton\",\n  \"Slider\",\n  \"SplitButton\",\n  \"SplitButtonMenu\",\n  \"Steps\",\n  \"Tab\",\n  \"TabList\",\n  \"TabPanel\",\n  \"TabPanels\",\n  \"Table\",\n  \"TableBody\",\n  \"TableCell\",\n  \"TableContainer\",\n  \"TableHeader\",\n  \"TableHeaderCell\",\n  \"TableRow\",\n  \"TableRowMenu\",\n  \"TableVirtualizedBody\",\n  \"TabsContext\",\n  \"Text\",\n  \"TextArea\",\n  \"TextField\",\n  \"TextWithHighlight\",\n  \"ThemeProvider\",\n  \"Tipseen\",\n  \"TipseenContent\",\n  \"TipseenMedia\",\n  \"TipseenWizard\",\n  \"Toast\",\n  \"ToastButton\",\n  \"ToastLink\",\n  \"Toggle\",\n  \"Tooltip\",\n  \"TransitionView\",\n  \"VirtualizedGrid\",\n  \"VirtualizedList\",\n  \"useClickableProps\",\n  \"useGridKeyboardNavigationContext\",\n]\n`;\n\nexports[`exports > should export all hooks 1`] = `\n[\n  \"useActiveDescendantListFocus\",\n  \"useAfterFirstRender\",\n  \"useClickOutside\",\n  \"useDebounceEvent\",\n  \"useElementsOverflowingIndex\",\n  \"useEventListener\",\n  \"useGridKeyboardNavigation\",\n  \"useHover\",\n  \"useIsMouseOver\",\n  \"useIsOverflowing\",\n  \"useKeyEvent\",\n  \"useMediaQuery\",\n  \"usePrevious\",\n  \"useResizeObserver\",\n  \"useSetFocus\",\n  \"useSwitch\",\n  \"useTimeout\",\n  \"useVibeMediaQuery\",\n  \"useWizard\",\n]\n`;\n\nexports[`exports > should export next all components 1`] = `\n[\n  \"List\",\n  \"ListItem\",\n  \"ListTitle\",\n]\n`;\n"
  },
  {
    "path": "packages/core/src/__tests__/exports.test.ts",
    "content": "import { describe, it, expect } from \"vitest\";\nimport * as components from \"../components/index\";\nimport * as nextComponents from \"../components/next\";\nimport * as hooks from \"../hooks\";\n\ndescribe(\"exports\", () => {\n  it(\"should export all components\", () => {\n    expect(Object.keys(components).sort()).toMatchSnapshot();\n  });\n\n  it(\"should export next all components\", () => {\n    expect(Object.keys(nextComponents).sort()).toMatchSnapshot();\n  });\n\n  it(\"should export all hooks\", () => {\n    expect(Object.keys(hooks).sort()).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Accordion/Accordion/Accordion.module.scss",
    "content": ".accordion {\n  height: fit-content;\n  border: 1px solid var(--ui-border-color);\n  box-sizing: border-box;\n  border-radius: var(--border-radius-small);\n}\n\n.accordion .accordionItemExpandCollapse {\n  border-radius: 0;\n  border-top: none;\n  border-inline: none;\n  border-color: var(--ui-border-color);\n}\n\n.accordion .accordionItemExpandCollapseLast {\n  border-bottom: none;\n}\n"
  },
  {
    "path": "packages/core/src/components/Accordion/Accordion/Accordion.tsx",
    "content": "import cx from \"classnames\";\nimport React, { forwardRef, type ReactElement, useCallback, useMemo, useRef, useState } from \"react\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport styles from \"./Accordion.module.scss\";\nimport { ComponentVibeId } from \"../../../tests/constants\";\n\nconst COMPONENT_ID = \"monday-accordion\";\n\nfunction defineChildId(index: number, props: { id: string }, accordionId: string) {\n  if (props.id) {\n    return props.id;\n  }\n  if (accordionId) {\n    return `${accordionId}--item-${index}`;\n  }\n  return `${COMPONENT_ID}--item-${index}`;\n}\n\nexport interface AccordionProps extends VibeComponentProps {\n  /**\n   * The content of the accordion (`AccordionItem` components).\n   */\n  children?: Array<ReactElement> | ReactElement;\n  /**\n   * If true, multiple accordion items can be expanded at the same time.\n   */\n  allowMultiple?: boolean;\n  /**\n   * An array of initially expanded item indexes.\n   */\n  defaultIndex?: Array<number>;\n}\n\nconst Accordion = forwardRef(\n  (\n    {\n      children: originalChildren = null,\n      allowMultiple = false,\n      \"data-testid\": dataTestId = COMPONENT_ID,\n      defaultIndex = [],\n      className = \"\",\n      id\n    }: AccordionProps,\n    ref: React.ForwardedRef<unknown>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const [expandedItems, setExpandedItems] = useState(defaultIndex);\n\n    const children = useMemo(() => React.Children.toArray(originalChildren), [originalChildren]);\n\n    const isChildExpanded = useCallback(\n      (itemIndex: number) => {\n        return expandedItems.includes(itemIndex);\n      },\n      [expandedItems]\n    );\n\n    const onChildClick = useCallback(\n      (itemIndex: number) => {\n        if (allowMultiple) {\n          const newExpandedItems = [...expandedItems];\n          if (isChildExpanded(itemIndex)) {\n            const index = newExpandedItems.indexOf(itemIndex);\n            if (index > -1) {\n              newExpandedItems.splice(index, 1);\n            }\n          } else {\n            newExpandedItems.push(itemIndex);\n          }\n          setExpandedItems(newExpandedItems);\n          return;\n        }\n\n        if (isChildExpanded(itemIndex)) {\n          setExpandedItems([]);\n        } else {\n          setExpandedItems([itemIndex]);\n        }\n      },\n      [isChildExpanded, expandedItems, allowMultiple]\n    );\n\n    const renderChildElements = useMemo(() => {\n      return React.Children.map(children, (child: ReactElement, itemIndex) => {\n        const originalProps = { ...child?.props };\n        const childId = defineChildId(itemIndex, originalProps, id);\n        return React.cloneElement(child, {\n          ...originalProps,\n          id: childId,\n          onClickAccordionCallback: () => {\n            onChildClick(itemIndex);\n          },\n          open: isChildExpanded(itemIndex),\n          expandCollapseComponentClassName: cx(styles.accordionItemExpandCollapse, {\n            [styles.accordionItemExpandCollapseLast]: itemIndex === children.length - 1\n          })\n        });\n      });\n    }, [children, id, isChildExpanded, onChildClick]);\n\n    return (\n      <div\n        ref={mergedRef}\n        className={cx(styles.accordion, className)}\n        data-testid={dataTestId}\n        data-vibe={ComponentVibeId.ACCORDION}\n        id={id}\n      >\n        {children && renderChildElements}\n      </div>\n    );\n  }\n);\n\nexport default Accordion;\n"
  },
  {
    "path": "packages/core/src/components/Accordion/Accordion/__tests__/Accordion.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport Accordion from \"../Accordion\";\nimport AccordionItem from \"../../AccordionItem/AccordionItem\";\n\ndescribe(\"Accordion renders correctly\", () => {\n  it(\"with empty props\", () => {\n    const tree = renderer.create(<Accordion />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with children\", () => {\n    const tree = renderer\n      .create(\n        <Accordion>\n          <AccordionItem />\n          <AccordionItem />\n          <AccordionItem />\n        </Accordion>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with defaultIndex prop\", () => {\n    const tree = renderer\n      .create(\n        <Accordion defaultIndex={[0]}>\n          <AccordionItem />\n          <AccordionItem />\n          <AccordionItem />\n        </Accordion>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with className\", () => {\n    const tree = renderer.create(<Accordion className=\"test\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with id\", () => {\n    const tree = renderer.create(<Accordion id=\"test\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with allowMultiple\", () => {\n    const tree = renderer\n      .create(\n        <Accordion allowMultiple defaultIndex={[0, 2]}>\n          <AccordionItem />\n          <AccordionItem />\n          <AccordionItem />\n        </Accordion>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with custom AccordionItem title\", () => {\n    const tree = renderer\n      .create(\n        <Accordion>\n          <AccordionItem title={<div>custom title</div>} />\n        </Accordion>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Accordion/Accordion/__tests__/__snapshots__/Accordion.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`Accordion renders correctly > with allowMultiple 1`] = `\n<div\n  className=\"accordion\"\n  data-testid=\"monday-accordion\"\n  data-vibe=\"Accordion\"\n>\n  <div\n    className=\"\"\n    id=\"monday-accordion--item-0\"\n  >\n    <div\n      data-testid=\"expand-collapse_expand-collapse--monday-accordion--item-0\"\n      data-vibe=\"ExpandCollapse\"\n      id=\"expand-collapse--monday-accordion--item-0\"\n    >\n      <div\n        className=\"expandCollapse showBorder accordionItemExpandCollapse\"\n      >\n        <button\n          aria-controls=\"expand-collapse--monday-accordion--item-0-controls\"\n          aria-expanded={true}\n          className=\"header section headerOpen\"\n          onClickCapture={[Function]}\n          type=\"button\"\n        >\n          <svg\n            aria-hidden={true}\n            className=\"icon iconComponent animateIconOpen\"\n            data-testid=\"icon\"\n            data-vibe=\"Icon\"\n            fill=\"currentColor\"\n            height=\"24\"\n            viewBox=\"0 0 20 20\"\n            width=\"24\"\n          >\n            <path\n              d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n            />\n          </svg>\n        </button>\n        <div\n          className=\"content section animateExpandCollapseContent\"\n          id=\"expand-collapse--monday-accordion--item-0-controls\"\n          role=\"region\"\n        />\n      </div>\n    </div>\n  </div>\n  <div\n    className=\"\"\n    id=\"monday-accordion--item-1\"\n  >\n    <div\n      data-testid=\"expand-collapse_expand-collapse--monday-accordion--item-1\"\n      data-vibe=\"ExpandCollapse\"\n      id=\"expand-collapse--monday-accordion--item-1\"\n    >\n      <div\n        className=\"expandCollapse showBorder accordionItemExpandCollapse\"\n      >\n        <button\n          aria-controls=\"expand-collapse--monday-accordion--item-1-controls\"\n          aria-expanded={false}\n          className=\"header section\"\n          onClickCapture={[Function]}\n          type=\"button\"\n        >\n          <svg\n            aria-hidden={true}\n            className=\"icon iconComponent animateIconClose\"\n            data-testid=\"icon\"\n            data-vibe=\"Icon\"\n            fill=\"currentColor\"\n            height=\"24\"\n            viewBox=\"0 0 20 20\"\n            width=\"24\"\n          >\n            <path\n              d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n            />\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n  <div\n    className=\"\"\n    id=\"monday-accordion--item-2\"\n  >\n    <div\n      data-testid=\"expand-collapse_expand-collapse--monday-accordion--item-2\"\n      data-vibe=\"ExpandCollapse\"\n      id=\"expand-collapse--monday-accordion--item-2\"\n    >\n      <div\n        className=\"expandCollapse showBorder accordionItemExpandCollapse accordionItemExpandCollapseLast\"\n      >\n        <button\n          aria-controls=\"expand-collapse--monday-accordion--item-2-controls\"\n          aria-expanded={true}\n          className=\"header section headerOpen\"\n          onClickCapture={[Function]}\n          type=\"button\"\n        >\n          <svg\n            aria-hidden={true}\n            className=\"icon iconComponent animateIconOpen\"\n            data-testid=\"icon\"\n            data-vibe=\"Icon\"\n            fill=\"currentColor\"\n            height=\"24\"\n            viewBox=\"0 0 20 20\"\n            width=\"24\"\n          >\n            <path\n              d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n            />\n          </svg>\n        </button>\n        <div\n          className=\"content section animateExpandCollapseContent\"\n          id=\"expand-collapse--monday-accordion--item-2-controls\"\n          role=\"region\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Accordion renders correctly > with children 1`] = `\n<div\n  className=\"accordion\"\n  data-testid=\"monday-accordion\"\n  data-vibe=\"Accordion\"\n>\n  <div\n    className=\"\"\n    id=\"monday-accordion--item-0\"\n  >\n    <div\n      data-testid=\"expand-collapse_expand-collapse--monday-accordion--item-0\"\n      data-vibe=\"ExpandCollapse\"\n      id=\"expand-collapse--monday-accordion--item-0\"\n    >\n      <div\n        className=\"expandCollapse showBorder accordionItemExpandCollapse\"\n      >\n        <button\n          aria-controls=\"expand-collapse--monday-accordion--item-0-controls\"\n          aria-expanded={false}\n          className=\"header section\"\n          onClickCapture={[Function]}\n          type=\"button\"\n        >\n          <svg\n            aria-hidden={true}\n            className=\"icon iconComponent animateIconClose\"\n            data-testid=\"icon\"\n            data-vibe=\"Icon\"\n            fill=\"currentColor\"\n            height=\"24\"\n            viewBox=\"0 0 20 20\"\n            width=\"24\"\n          >\n            <path\n              d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n            />\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n  <div\n    className=\"\"\n    id=\"monday-accordion--item-1\"\n  >\n    <div\n      data-testid=\"expand-collapse_expand-collapse--monday-accordion--item-1\"\n      data-vibe=\"ExpandCollapse\"\n      id=\"expand-collapse--monday-accordion--item-1\"\n    >\n      <div\n        className=\"expandCollapse showBorder accordionItemExpandCollapse\"\n      >\n        <button\n          aria-controls=\"expand-collapse--monday-accordion--item-1-controls\"\n          aria-expanded={false}\n          className=\"header section\"\n          onClickCapture={[Function]}\n          type=\"button\"\n        >\n          <svg\n            aria-hidden={true}\n            className=\"icon iconComponent animateIconClose\"\n            data-testid=\"icon\"\n            data-vibe=\"Icon\"\n            fill=\"currentColor\"\n            height=\"24\"\n            viewBox=\"0 0 20 20\"\n            width=\"24\"\n          >\n            <path\n              d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n            />\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n  <div\n    className=\"\"\n    id=\"monday-accordion--item-2\"\n  >\n    <div\n      data-testid=\"expand-collapse_expand-collapse--monday-accordion--item-2\"\n      data-vibe=\"ExpandCollapse\"\n      id=\"expand-collapse--monday-accordion--item-2\"\n    >\n      <div\n        className=\"expandCollapse showBorder accordionItemExpandCollapse accordionItemExpandCollapseLast\"\n      >\n        <button\n          aria-controls=\"expand-collapse--monday-accordion--item-2-controls\"\n          aria-expanded={false}\n          className=\"header section\"\n          onClickCapture={[Function]}\n          type=\"button\"\n        >\n          <svg\n            aria-hidden={true}\n            className=\"icon iconComponent animateIconClose\"\n            data-testid=\"icon\"\n            data-vibe=\"Icon\"\n            fill=\"currentColor\"\n            height=\"24\"\n            viewBox=\"0 0 20 20\"\n            width=\"24\"\n          >\n            <path\n              d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n            />\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Accordion renders correctly > with className 1`] = `\n<div\n  className=\"accordion test\"\n  data-testid=\"monday-accordion\"\n  data-vibe=\"Accordion\"\n/>\n`;\n\nexports[`Accordion renders correctly > with custom AccordionItem title 1`] = `\n<div\n  className=\"accordion\"\n  data-testid=\"monday-accordion\"\n  data-vibe=\"Accordion\"\n>\n  <div\n    className=\"\"\n    id=\"monday-accordion--item-0\"\n  >\n    <div\n      data-testid=\"expand-collapse_expand-collapse--monday-accordion--item-0\"\n      data-vibe=\"ExpandCollapse\"\n      id=\"expand-collapse--monday-accordion--item-0\"\n    >\n      <div\n        className=\"expandCollapse showBorder accordionItemExpandCollapse accordionItemExpandCollapseLast\"\n      >\n        <button\n          aria-controls=\"expand-collapse--monday-accordion--item-0-controls\"\n          aria-expanded={false}\n          className=\"header section\"\n          onClickCapture={[Function]}\n          type=\"button\"\n        >\n          <div>\n            custom title\n          </div>\n          <svg\n            aria-hidden={true}\n            className=\"icon iconComponent animateIconClose\"\n            data-testid=\"icon\"\n            data-vibe=\"Icon\"\n            fill=\"currentColor\"\n            height=\"24\"\n            viewBox=\"0 0 20 20\"\n            width=\"24\"\n          >\n            <path\n              d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n            />\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Accordion renders correctly > with defaultIndex prop 1`] = `\n<div\n  className=\"accordion\"\n  data-testid=\"monday-accordion\"\n  data-vibe=\"Accordion\"\n>\n  <div\n    className=\"\"\n    id=\"monday-accordion--item-0\"\n  >\n    <div\n      data-testid=\"expand-collapse_expand-collapse--monday-accordion--item-0\"\n      data-vibe=\"ExpandCollapse\"\n      id=\"expand-collapse--monday-accordion--item-0\"\n    >\n      <div\n        className=\"expandCollapse showBorder accordionItemExpandCollapse\"\n      >\n        <button\n          aria-controls=\"expand-collapse--monday-accordion--item-0-controls\"\n          aria-expanded={true}\n          className=\"header section headerOpen\"\n          onClickCapture={[Function]}\n          type=\"button\"\n        >\n          <svg\n            aria-hidden={true}\n            className=\"icon iconComponent animateIconOpen\"\n            data-testid=\"icon\"\n            data-vibe=\"Icon\"\n            fill=\"currentColor\"\n            height=\"24\"\n            viewBox=\"0 0 20 20\"\n            width=\"24\"\n          >\n            <path\n              d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n            />\n          </svg>\n        </button>\n        <div\n          className=\"content section animateExpandCollapseContent\"\n          id=\"expand-collapse--monday-accordion--item-0-controls\"\n          role=\"region\"\n        />\n      </div>\n    </div>\n  </div>\n  <div\n    className=\"\"\n    id=\"monday-accordion--item-1\"\n  >\n    <div\n      data-testid=\"expand-collapse_expand-collapse--monday-accordion--item-1\"\n      data-vibe=\"ExpandCollapse\"\n      id=\"expand-collapse--monday-accordion--item-1\"\n    >\n      <div\n        className=\"expandCollapse showBorder accordionItemExpandCollapse\"\n      >\n        <button\n          aria-controls=\"expand-collapse--monday-accordion--item-1-controls\"\n          aria-expanded={false}\n          className=\"header section\"\n          onClickCapture={[Function]}\n          type=\"button\"\n        >\n          <svg\n            aria-hidden={true}\n            className=\"icon iconComponent animateIconClose\"\n            data-testid=\"icon\"\n            data-vibe=\"Icon\"\n            fill=\"currentColor\"\n            height=\"24\"\n            viewBox=\"0 0 20 20\"\n            width=\"24\"\n          >\n            <path\n              d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n            />\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n  <div\n    className=\"\"\n    id=\"monday-accordion--item-2\"\n  >\n    <div\n      data-testid=\"expand-collapse_expand-collapse--monday-accordion--item-2\"\n      data-vibe=\"ExpandCollapse\"\n      id=\"expand-collapse--monday-accordion--item-2\"\n    >\n      <div\n        className=\"expandCollapse showBorder accordionItemExpandCollapse accordionItemExpandCollapseLast\"\n      >\n        <button\n          aria-controls=\"expand-collapse--monday-accordion--item-2-controls\"\n          aria-expanded={false}\n          className=\"header section\"\n          onClickCapture={[Function]}\n          type=\"button\"\n        >\n          <svg\n            aria-hidden={true}\n            className=\"icon iconComponent animateIconClose\"\n            data-testid=\"icon\"\n            data-vibe=\"Icon\"\n            fill=\"currentColor\"\n            height=\"24\"\n            viewBox=\"0 0 20 20\"\n            width=\"24\"\n          >\n            <path\n              d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n            />\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Accordion renders correctly > with empty props 1`] = `\n<div\n  className=\"accordion\"\n  data-testid=\"monday-accordion\"\n  data-vibe=\"Accordion\"\n/>\n`;\n\nexports[`Accordion renders correctly > with id 1`] = `\n<div\n  className=\"accordion\"\n  data-testid=\"monday-accordion\"\n  data-vibe=\"Accordion\"\n  id=\"test\"\n/>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Accordion/AccordionItem/AccordionItem.tsx",
    "content": "import React, { forwardRef, useCallback, useRef } from \"react\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport ExpandCollapse from \"../../ExpandCollapse/ExpandCollapse\";\nimport { type VibeComponentProps, type ElementContent } from \"../../../types\";\nimport { type ExpandCollapseIconPosition } from \"../../ExpandCollapse/ExpandCollapse.types\";\n\nexport interface AccordionItemProps extends VibeComponentProps {\n  /**\n   * The header content displayed in the accordion item.\n   */\n  title?: ElementContent;\n  /**\n   * The content rendered inside the accordion item.\n   */\n  children?: ElementContent;\n  /**\n   * The size of the expand/collapse icon.\n   */\n  iconSize?: number | string;\n  /**\n   * The position of the expand/collapse icon.\n   */\n  iconPosition?: ExpandCollapseIconPosition;\n  /**\n   * Callback fired upon item click.\n   */\n  onClick?: () => void;\n  /** @ignore */\n  open?: boolean;\n  /** @ignore */\n  onClickAccordionCallback?: () => void;\n  /**\n   * If true, the accordion item's border is hidden.\n   */\n  hideBorder?: boolean;\n  /**\n   * Class name applied to the accordion item's header.\n   */\n  headerClassName?: string;\n  /**\n   * Class name applied to the accordion item's content.\n   */\n  contentClassName?: string;\n  /**\n   * If true, the click event is handled during the capture phase.\n   */\n  captureOnClick?: boolean;\n  /**\n   * Class name applied to the expand/collapse component.\n   */\n  expandCollapseComponentClassName?: string;\n}\n\nconst AccordionItem: React.FC<AccordionItemProps> = forwardRef(\n  (\n    {\n      children = null,\n      title = \"\",\n      className = \"\",\n      iconSize = 24,\n      iconPosition = \"right\",\n      id,\n      open,\n      onClick,\n      onClickAccordionCallback,\n      hideBorder = false,\n      headerClassName,\n      contentClassName,\n      expandCollapseComponentClassName,\n      captureOnClick = true\n    },\n    ref\n  ) => {\n    // Change onClick param name to onClickCallback in 1.0.0\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const onClickCallback = useCallback(() => {\n      onClickAccordionCallback && onClickAccordionCallback();\n      onClick && onClick();\n    }, [onClickAccordionCallback, onClick]);\n\n    return (\n      <div ref={mergedRef} className={className} id={id}>\n        <ExpandCollapse\n          iconSize={iconSize}\n          iconPosition={iconPosition}\n          id={`expand-collapse--${id}`}\n          onClick={onClickCallback}\n          open={open}\n          title={title}\n          hideBorder={hideBorder}\n          componentClassName={expandCollapseComponentClassName}\n          headerClassName={headerClassName}\n          contentClassName={contentClassName}\n          captureOnClick={captureOnClick}\n        >\n          {children}\n        </ExpandCollapse>\n      </div>\n    );\n  }\n);\n\nexport default AccordionItem;\n"
  },
  {
    "path": "packages/core/src/components/Accordion/AccordionItem/__tests__/AccordionItem.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport Accordion from \"../../Accordion/Accordion\";\nimport AccordionItem from \"../AccordionItem\";\n\ndescribe(\"AccordionItem renders correctly\", () => {\n  it(\"with className\", () => {\n    const tree = renderer\n      .create(\n        <Accordion defaultIndex={[0]}>\n          <AccordionItem className=\"test\" />\n        </Accordion>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with id\", () => {\n    const tree = renderer\n      .create(\n        <Accordion defaultIndex={[0]}>\n          <AccordionItem id=\"test\" />\n        </Accordion>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with title\", () => {\n    const tree = renderer\n      .create(\n        <Accordion defaultIndex={[0]}>\n          <AccordionItem title=\"Test title\" />\n        </Accordion>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with children\", () => {\n    const tree = renderer\n      .create(\n        <Accordion defaultIndex={[0]}>\n          <AccordionItem>Test Children</AccordionItem>\n        </Accordion>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with iconSize\", () => {\n    const tree = renderer\n      .create(\n        <Accordion defaultIndex={[0]}>\n          <AccordionItem iconSize={36} />\n        </Accordion>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with iconPosition\", () => {\n    const tree = renderer\n      .create(\n        <Accordion defaultIndex={[0]}>\n          <AccordionItem iconPosition=\"left\" />\n        </Accordion>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Accordion/AccordionItem/__tests__/AccordionItem.test.tsx",
    "content": "import { vi, beforeEach, describe, it, expect, type Mock } from \"vitest\";\nimport React from \"react\";\nimport { fireEvent, render, screen } from \"@testing-library/react\";\nimport Accordion from \"../../Accordion/Accordion\";\nimport AccordionItem from \"../AccordionItem\";\n\ndescribe(\"AccordionItem tests\", () => {\n  let onClickMock: Mock;\n\n  beforeEach(() => {\n    onClickMock = vi.fn();\n    render(\n      <Accordion>\n        <AccordionItem onClick={onClickMock} />\n      </Accordion>\n    );\n  });\n\n  it(\"should call the click callback when clicked\", () => {\n    fireEvent.click(screen.queryByRole(\"button\"));\n    expect(onClickMock.mock.calls.length).toBe(1);\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Accordion/AccordionItem/__tests__/__snapshots__/AccordionItem.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`AccordionItem renders correctly > with children 1`] = `\n<div\n  className=\"accordion\"\n  data-testid=\"monday-accordion\"\n  data-vibe=\"Accordion\"\n>\n  <div\n    className=\"\"\n    id=\"monday-accordion--item-0\"\n  >\n    <div\n      data-testid=\"expand-collapse_expand-collapse--monday-accordion--item-0\"\n      data-vibe=\"ExpandCollapse\"\n      id=\"expand-collapse--monday-accordion--item-0\"\n    >\n      <div\n        className=\"expandCollapse showBorder accordionItemExpandCollapse accordionItemExpandCollapseLast\"\n      >\n        <button\n          aria-controls=\"expand-collapse--monday-accordion--item-0-controls\"\n          aria-expanded={true}\n          className=\"header section headerOpen\"\n          onClickCapture={[Function]}\n          type=\"button\"\n        >\n          <svg\n            aria-hidden={true}\n            className=\"icon iconComponent animateIconOpen\"\n            data-testid=\"icon\"\n            data-vibe=\"Icon\"\n            fill=\"currentColor\"\n            height=\"24\"\n            viewBox=\"0 0 20 20\"\n            width=\"24\"\n          >\n            <path\n              d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n            />\n          </svg>\n        </button>\n        <div\n          className=\"content section animateExpandCollapseContent\"\n          id=\"expand-collapse--monday-accordion--item-0-controls\"\n          role=\"region\"\n        >\n          Test Children\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`AccordionItem renders correctly > with className 1`] = `\n<div\n  className=\"accordion\"\n  data-testid=\"monday-accordion\"\n  data-vibe=\"Accordion\"\n>\n  <div\n    className=\"test\"\n    id=\"monday-accordion--item-0\"\n  >\n    <div\n      data-testid=\"expand-collapse_expand-collapse--monday-accordion--item-0\"\n      data-vibe=\"ExpandCollapse\"\n      id=\"expand-collapse--monday-accordion--item-0\"\n    >\n      <div\n        className=\"expandCollapse showBorder accordionItemExpandCollapse accordionItemExpandCollapseLast\"\n      >\n        <button\n          aria-controls=\"expand-collapse--monday-accordion--item-0-controls\"\n          aria-expanded={true}\n          className=\"header section headerOpen\"\n          onClickCapture={[Function]}\n          type=\"button\"\n        >\n          <svg\n            aria-hidden={true}\n            className=\"icon iconComponent animateIconOpen\"\n            data-testid=\"icon\"\n            data-vibe=\"Icon\"\n            fill=\"currentColor\"\n            height=\"24\"\n            viewBox=\"0 0 20 20\"\n            width=\"24\"\n          >\n            <path\n              d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n            />\n          </svg>\n        </button>\n        <div\n          className=\"content section animateExpandCollapseContent\"\n          id=\"expand-collapse--monday-accordion--item-0-controls\"\n          role=\"region\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`AccordionItem renders correctly > with iconPosition 1`] = `\n<div\n  className=\"accordion\"\n  data-testid=\"monday-accordion\"\n  data-vibe=\"Accordion\"\n>\n  <div\n    className=\"\"\n    id=\"monday-accordion--item-0\"\n  >\n    <div\n      data-testid=\"expand-collapse_expand-collapse--monday-accordion--item-0\"\n      data-vibe=\"ExpandCollapse\"\n      id=\"expand-collapse--monday-accordion--item-0\"\n    >\n      <div\n        className=\"expandCollapse showBorder accordionItemExpandCollapse accordionItemExpandCollapseLast\"\n      >\n        <button\n          aria-controls=\"expand-collapse--monday-accordion--item-0-controls\"\n          aria-expanded={true}\n          className=\"header section headerOpen leftIcon\"\n          onClickCapture={[Function]}\n          type=\"button\"\n        >\n          <svg\n            aria-hidden={true}\n            className=\"icon iconComponent animateIconOpen\"\n            data-testid=\"icon\"\n            data-vibe=\"Icon\"\n            fill=\"currentColor\"\n            height=\"24\"\n            viewBox=\"0 0 20 20\"\n            width=\"24\"\n          >\n            <path\n              d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n            />\n          </svg>\n        </button>\n        <div\n          className=\"content section animateExpandCollapseContent\"\n          id=\"expand-collapse--monday-accordion--item-0-controls\"\n          role=\"region\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`AccordionItem renders correctly > with iconSize 1`] = `\n<div\n  className=\"accordion\"\n  data-testid=\"monday-accordion\"\n  data-vibe=\"Accordion\"\n>\n  <div\n    className=\"\"\n    id=\"monday-accordion--item-0\"\n  >\n    <div\n      data-testid=\"expand-collapse_expand-collapse--monday-accordion--item-0\"\n      data-vibe=\"ExpandCollapse\"\n      id=\"expand-collapse--monday-accordion--item-0\"\n    >\n      <div\n        className=\"expandCollapse showBorder accordionItemExpandCollapse accordionItemExpandCollapseLast\"\n      >\n        <button\n          aria-controls=\"expand-collapse--monday-accordion--item-0-controls\"\n          aria-expanded={true}\n          className=\"header section headerOpen\"\n          onClickCapture={[Function]}\n          type=\"button\"\n        >\n          <svg\n            aria-hidden={true}\n            className=\"icon iconComponent animateIconOpen\"\n            data-testid=\"icon\"\n            data-vibe=\"Icon\"\n            fill=\"currentColor\"\n            height=\"36\"\n            viewBox=\"0 0 20 20\"\n            width=\"36\"\n          >\n            <path\n              d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n            />\n          </svg>\n        </button>\n        <div\n          className=\"content section animateExpandCollapseContent\"\n          id=\"expand-collapse--monday-accordion--item-0-controls\"\n          role=\"region\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`AccordionItem renders correctly > with id 1`] = `\n<div\n  className=\"accordion\"\n  data-testid=\"monday-accordion\"\n  data-vibe=\"Accordion\"\n>\n  <div\n    className=\"\"\n    id=\"test\"\n  >\n    <div\n      data-testid=\"expand-collapse_expand-collapse--test\"\n      data-vibe=\"ExpandCollapse\"\n      id=\"expand-collapse--test\"\n    >\n      <div\n        className=\"expandCollapse showBorder accordionItemExpandCollapse accordionItemExpandCollapseLast\"\n      >\n        <button\n          aria-controls=\"expand-collapse--test-controls\"\n          aria-expanded={true}\n          className=\"header section headerOpen\"\n          onClickCapture={[Function]}\n          type=\"button\"\n        >\n          <svg\n            aria-hidden={true}\n            className=\"icon iconComponent animateIconOpen\"\n            data-testid=\"icon\"\n            data-vibe=\"Icon\"\n            fill=\"currentColor\"\n            height=\"24\"\n            viewBox=\"0 0 20 20\"\n            width=\"24\"\n          >\n            <path\n              d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n            />\n          </svg>\n        </button>\n        <div\n          className=\"content section animateExpandCollapseContent\"\n          id=\"expand-collapse--test-controls\"\n          role=\"region\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`AccordionItem renders correctly > with title 1`] = `\n<div\n  className=\"accordion\"\n  data-testid=\"monday-accordion\"\n  data-vibe=\"Accordion\"\n>\n  <div\n    className=\"\"\n    id=\"monday-accordion--item-0\"\n  >\n    <div\n      data-testid=\"expand-collapse_expand-collapse--monday-accordion--item-0\"\n      data-vibe=\"ExpandCollapse\"\n      id=\"expand-collapse--monday-accordion--item-0\"\n    >\n      <div\n        className=\"expandCollapse showBorder accordionItemExpandCollapse accordionItemExpandCollapseLast\"\n      >\n        <button\n          aria-controls=\"expand-collapse--monday-accordion--item-0-controls\"\n          aria-expanded={true}\n          className=\"header section headerOpen\"\n          onClickCapture={[Function]}\n          type=\"button\"\n        >\n          <div\n            className=\"typography primary start singleLineEllipsis text text1Normal headerContent\"\n            data-testid=\"text\"\n          >\n            Test title\n          </div>\n          <svg\n            aria-hidden={true}\n            className=\"icon iconComponent animateIconOpen\"\n            data-testid=\"icon\"\n            data-vibe=\"Icon\"\n            fill=\"currentColor\"\n            height=\"24\"\n            viewBox=\"0 0 20 20\"\n            width=\"24\"\n          >\n            <path\n              d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n            />\n          </svg>\n        </button>\n        <div\n          className=\"content section animateExpandCollapseContent\"\n          id=\"expand-collapse--monday-accordion--item-0-controls\"\n          role=\"region\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Accordion/index.ts",
    "content": "export { default as Accordion, type AccordionProps } from \"./Accordion/Accordion\";\nexport { default as AccordionItem, type AccordionItemProps } from \"./AccordionItem/AccordionItem\";\n"
  },
  {
    "path": "packages/core/src/components/AlertBanner/AlertBanner.module.scss",
    "content": ".alertBanner {\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n}\n\n.primary {\n  background-color: var(--primary-color);\n}\n\n.positive {\n  background-color: var(--positive-color);\n}\n\n.negative {\n  background-color: var(--negative-color);\n}\n\n.dark {\n  background-color: var(--inverted-color-background);\n}\n\n.warning {\n  background-color: var(--warning-color);\n  color: var(--fixed-dark-color);\n\n  .closeBtn {\n    color: var(--fixed-dark-color);\n  }\n}\n\n.content {\n  flex: 1 1 auto;\n  display: flex;\n  height: 100%;\n  min-width: 0;\n  align-items: center;\n  justify-content: center;\n  padding-inline-start: var(--space-16);\n}\n\n.closeButtonWrapper {\n  flex: 0 0 40px;\n  position: relative;\n  height: 100%;\n  min-width: 0;\n}\n\n.closeBtn {\n  position: absolute;\n  inset-inline-end: 4px;\n  top: 4px;\n}\n\n.ellipsis {\n  flex: 0 1 auto;\n}\n\n.contentItem {\n  flex: 0 0 auto;\n  min-width: 0;\n}\n\n.contentItemText {\n  flex: 0 1 auto;\n  min-width: 0;\n}\n"
  },
  {
    "path": "packages/core/src/components/AlertBanner/AlertBanner.tsx",
    "content": "import { getStyle, NOOP } from \"@vibe/shared\";\nimport cx from \"classnames\";\nimport React, { type ForwardedRef, forwardRef, type ReactElement, useMemo } from \"react\";\nimport { IconButton } from \"@vibe/icon-button\";\nimport { CloseSmall } from \"@vibe/icons\";\nimport { type AlertBannerBackgroundColor } from \"./AlertBanner.types\";\n\nimport { type AlertBannerLinkProps } from \"./AlertBannerLink/AlertBannerLink\";\nimport { type AlertBannerButtonProps } from \"./AlertBannerButton/AlertBannerButton\";\nimport { type AlertBannerTextProps } from \"./AlertBannerText/AlertBannerText\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./AlertBanner.module.scss\";\nimport { Text } from \"@vibe/typography\";\nimport { AlertBannerContext } from \"./AlertBannerContext\";\n\ntype ChildrenType = ReactElement<AlertBannerButtonProps | AlertBannerLinkProps | AlertBannerTextProps>;\n\nexport interface AlertBannerProps extends VibeComponentProps {\n  /**\n   * The background color of the alert banner.\n   */\n  backgroundColor?: AlertBannerBackgroundColor;\n  /**\n   * If true, the close button is hidden.\n   */\n  isCloseHidden?: boolean;\n  /**\n   * The ARIA label of the alert banner for accessibility.\n   */\n  \"aria-label\"?: string;\n  /**\n   * The ARIA label of the close button for accessibility.\n   */\n  closeButtonAriaLabel?: string;\n  /**\n   * Callback fired when the close button is clicked.\n   */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * The content of the alert banner.\n   */\n  children?: ChildrenType | ChildrenType[];\n}\n\nconst AlertBanner = forwardRef(\n  (\n    {\n      children: originalChildren,\n      className,\n      backgroundColor = \"primary\",\n      onClose = NOOP,\n      \"aria-label\": ariaLabel = \"\",\n      closeButtonAriaLabel = \"Close\",\n      isCloseHidden = false,\n      id,\n      \"data-testid\": dataTestId\n    }: AlertBannerProps,\n    ref: ForwardedRef<HTMLDivElement>\n  ) => {\n    const classNames = useMemo(() => {\n      return cx(className, styles.alertBanner, getStyle(styles, backgroundColor));\n    }, [className, backgroundColor]);\n\n    const isDarkBackground = backgroundColor === \"dark\";\n    const isFixedColor = backgroundColor === \"warning\";\n    const textColor = useMemo(() => {\n      if (isFixedColor) {\n        return \"fixedDark\";\n      }\n      return isDarkBackground ? \"onInverted\" : \"onPrimary\";\n    }, [isDarkBackground, isFixedColor]);\n    const children = useMemo(() => {\n      const allChildren = React.Children.toArray(originalChildren) as ReactElement[];\n      const filteredChildren = allChildren.filter(\n        (\n          child: ReactElement & {\n            type: Record<string, unknown>;\n          }\n        ) => {\n          if (child.type.isAlertBannerItem || child.type.displayName === \"MDXCreateElement\") return true;\n          console.error(\n            \"Alert banner child is not supported. Please use AlertBannerText, AlertBannerLink or AlertBannerButton.\",\n            child\n          );\n          return false;\n        }\n      );\n\n      return filteredChildren.map((child, index) => {\n        return React.cloneElement(child, {\n          ...child?.props,\n          marginLeft: index > 0,\n          isDarkBackground\n        });\n      });\n    }, [originalChildren, isDarkBackground]);\n\n    return (\n      <Text\n        type=\"text2\"\n        color={textColor}\n        ref={ref}\n        className={classNames}\n        role=\"banner\"\n        aria-label={ariaLabel || \"banner\"}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.ALERT_BANNER, id)}\n        data-vibe={ComponentVibeId.ALERT_BANNER}\n      >\n        <AlertBannerContext.Provider value={{ textColor }}>\n          <div className={cx(styles.content)}>\n            {children.map(\n              (\n                child: ReactElement & {\n                  type: Record<string, unknown>;\n                },\n                index\n              ) => {\n                const childTypeIsAlertBannerText = child.type.isAlertBannerText;\n                return (\n                  <div\n                    key={index}\n                    className={cx(styles.contentItem, {\n                      [styles.contentItemText]: childTypeIsAlertBannerText\n                    })}\n                  >\n                    {childTypeIsAlertBannerText ? <div className={cx(styles.ellipsis)}>{child}</div> : child}\n                  </div>\n                );\n              }\n            )}\n          </div>\n        </AlertBannerContext.Provider>\n        <div className={cx(styles.closeButtonWrapper)}>\n          {isCloseHidden ? null : (\n            <IconButton\n              data-testid=\"alert-banner-close-button\"\n              icon={CloseSmall}\n              className={cx(styles.closeBtn)}\n              hideTooltip\n              onClick={onClose}\n              size=\"small\"\n              kind=\"tertiary\"\n              color={isDarkBackground ? \"on-inverted-background\" : \"on-primary-color\"}\n              aria-label={closeButtonAriaLabel}\n            />\n          )}\n        </div>\n      </Text>\n    );\n  }\n);\n\nexport default AlertBanner;\n"
  },
  {
    "path": "packages/core/src/components/AlertBanner/AlertBanner.types.ts",
    "content": "export type AlertBannerBackgroundColor = \"primary\" | \"positive\" | \"negative\" | \"dark\" | \"warning\";\n"
  },
  {
    "path": "packages/core/src/components/AlertBanner/AlertBannerButton/AlertBannerButton.module.scss",
    "content": ".bannerButton {\n  // TODO Mismatched property value - fix other\n  -webkit-font-smoothing: auto;\n  -moz-osx-font-smoothing: auto;\n}\n\n:global(.dark-app-theme) .darkBackground .bannerButton {\n  background-color: var(--dark-background-color);\n}\n\n.marginLeft {\n  margin-inline-start: var(--space-8);\n}\n"
  },
  {
    "path": "packages/core/src/components/AlertBanner/AlertBannerButton/AlertBannerButton.tsx",
    "content": "import { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport { Button, type ButtonProps } from \"@vibe/button\";\nimport React, { type FC } from \"react\";\nimport styles from \"./AlertBannerButton.module.scss\";\n\nexport interface AlertBannerButtonProps extends ButtonProps {\n  /**\n   * If true, the button is displayed on a dark background.\n   */\n  isDarkBackground?: boolean;\n}\n\nconst AlertBannerButton: FC<AlertBannerButtonProps> = ({\n  marginLeft = false,\n  isDarkBackground = false,\n  id,\n  \"data-testid\": dataTestId,\n  ...buttonProps\n}) => {\n  const classNames = cx({\n    [styles.marginLeft]: marginLeft,\n    [styles.darkBackground]: isDarkBackground\n  });\n\n  return (\n    <div\n      className={classNames}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.ALERT_BANNER_BUTTON, id)}\n      id={id}\n    >\n      <Button {...buttonProps} size=\"small\" className={cx(styles.bannerButton)} color=\"on-primary-color\" />\n    </div>\n  );\n};\n\nObject.assign(AlertBannerButton, {\n  isAlertBannerItem: true\n});\n\nexport default AlertBannerButton;\n"
  },
  {
    "path": "packages/core/src/components/AlertBanner/AlertBannerContext.ts",
    "content": "import React from \"react\";\nimport { type TypographyColor } from \"@vibe/typography\";\n\ntype AlertBannerContextType = {\n  textColor: Extract<TypographyColor, \"onPrimary\" | \"onInverted\" | \"fixedDark\">;\n};\n\nexport const AlertBannerContext = React.createContext<AlertBannerContextType>({\n  textColor: \"onPrimary\"\n});\n"
  },
  {
    "path": "packages/core/src/components/AlertBanner/AlertBannerLink/AlertBannerLink.module.scss",
    "content": ".bannerLink {\n  text-decoration: underline;\n  -webkit-font-smoothing: auto;\n  -moz-osx-font-smoothing: auto;\n}\n\n.bannerLinkTextColorOnPrimary {\n  color: var(--text-color-on-primary);\n}\n\n.bannerLinkTextColorOnInverted {\n  color: var(--text-color-on-inverted);\n}\n\n.marginLeft {\n  margin-inline-start: var(--space-8);\n}\n"
  },
  {
    "path": "packages/core/src/components/AlertBanner/AlertBannerLink/AlertBannerLink.tsx",
    "content": "import cx from \"classnames\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport React, { type FC, useContext } from \"react\";\nimport Link, { type LinkProps } from \"../../Link/Link\";\nimport styles from \"./AlertBannerLink.module.scss\";\nimport { AlertBannerContext } from \"../AlertBannerContext\";\n\nexport interface AlertBannerLinkProps extends LinkProps {\n  /**\n   * If true, a left margin is applied to the link.\n   */\n  marginLeft?: boolean;\n}\n\nconst AlertBannerLink: FC<AlertBannerLinkProps> = ({\n  marginLeft = false,\n  id,\n  \"data-testid\": dataTestId,\n  ...linkProps\n}) => {\n  const { textColor } = useContext(AlertBannerContext);\n  const classNames = cx({\n    [styles.marginLeft]: marginLeft\n  });\n\n  return (\n    <div\n      className={classNames}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.ALERT_BANNER_LINK, id)}\n      id={id}\n    >\n      <Link\n        {...linkProps}\n        textClassName={cx(styles.bannerLink, {\n          [styles.bannerLinkTextColorOnPrimary]: textColor === \"onPrimary\",\n          [styles.bannerLinkTextColorOnInverted]: textColor === \"onInverted\"\n        })}\n      />\n    </div>\n  );\n};\n\nObject.assign(AlertBannerLink, {\n  isAlertBannerItem: true\n});\n\nexport default AlertBannerLink;\n"
  },
  {
    "path": "packages/core/src/components/AlertBanner/AlertBannerText/AlertBannerText.module.scss",
    "content": ".bannerText {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.marginLeft {\n  margin-inline-start: var(--space-8);\n}\n"
  },
  {
    "path": "packages/core/src/components/AlertBanner/AlertBannerText/AlertBannerText.tsx",
    "content": "import { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { type FC, useRef } from \"react\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { useIsOverflowing } from \"@vibe/hooks\";\nimport type VibeComponentProps from \"../../../types/VibeComponentProps\";\n\nimport styles from \"./AlertBannerText.module.scss\";\n\nexport interface AlertBannerTextProps extends VibeComponentProps {\n  /**\n   * The text content displayed within the alert banner.\n   */\n  text: string;\n  /**\n   * If true, a left margin is applied to the alert banner text.\n   */\n  marginLeft?: boolean;\n  /**\n   * The aria-live attribute value for the alert banner text.\n   */\n  ariaLive?: \"polite\" | \"assertive\" | \"off\";\n}\n\nconst AlertBannerText: FC<AlertBannerTextProps> = ({\n  text,\n  marginLeft = false,\n  id,\n  \"data-testid\": dataTestId,\n  ariaLive\n}) => {\n  const componentRef = useRef(null);\n  const classNames = cx(styles.bannerText, {\n    [styles.marginLeft]: marginLeft\n  });\n  const isOverflowing = useIsOverflowing({ ref: componentRef });\n\n  return (\n    <Tooltip\n      position=\"bottom\"\n      content={isOverflowing && text}\n      showTrigger={[\"mouseenter\"]}\n      hideTrigger={[\"mouseleave\"]}\n    >\n      <div\n        ref={componentRef}\n        className={classNames}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.ALERT_BANNER_TEXT, id)}\n      >\n        <span aria-live={ariaLive}>{text}</span>\n      </div>\n    </Tooltip>\n  );\n};\n\nObject.assign(AlertBannerText, {\n  isAlertBannerItem: true,\n  isAlertBannerText: true\n});\n\nexport default AlertBannerText;\n"
  },
  {
    "path": "packages/core/src/components/AlertBanner/__tests__/AlertBanner.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport AlertBanner from \"../AlertBanner\";\nimport AlertBannerLink from \"../AlertBannerLink/AlertBannerLink\";\nimport AlertBannerButton from \"../AlertBannerButton/AlertBannerButton\";\nimport AlertBannerText from \"../AlertBannerText/AlertBannerText\";\nimport { NOOP } from \"@vibe/shared\";\n\ndescribe(\"AlertBanner\", () => {\n  it(\"should render correctly without props\", () => {\n    const tree = renderer.create(<AlertBanner />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"should render correctly with props\", () => {\n    const tree = renderer\n      .create(\n        <AlertBanner\n          onClose={NOOP}\n          backgroundColor=\"negative\"\n          aria-label=\"lorem-banner\"\n          className=\"my-lorem-ipsum-banner\"\n        >\n          <AlertBannerText text=\"Lorem ipsum dolor sit amet\" />\n        </AlertBanner>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"should render with correctly with text and link\", () => {\n    const tree = renderer\n      .create(\n        <AlertBanner onClose={NOOP}>\n          <AlertBannerText text=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua\" />\n          <AlertBannerLink text=\"Lorem ipsum\" href=\"https://monday.com\" />\n        </AlertBanner>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"should render with correctly with text and button\", () => {\n    const tree = renderer\n      .create(\n        <AlertBanner onClose={NOOP}>\n          <AlertBannerText text=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua\" />\n          <AlertBannerButton onClick={NOOP}>Lorem Ipsum Salura</AlertBannerButton>\n        </AlertBanner>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"should render with correctly with multiple elements\", () => {\n    const tree = renderer\n      .create(\n        <AlertBanner onClose={NOOP}>\n          <AlertBannerText text=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit\" />\n          <AlertBannerLink text=\"Lorem ipsum\" href=\"https://monday.com\" />\n          <AlertBannerText text=\"sed do eiusmod tempor incididunt ut labore et dolore magna aliqua\" />\n          <AlertBannerButton onClick={NOOP}>Lorem Ipsum Bailar</AlertBannerButton>\n        </AlertBanner>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"should render correctly with hidden close button\", () => {\n    const tree = renderer.create(<AlertBanner isCloseHidden />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"should render correctly with background color\", () => {\n    const tree = renderer.create(<AlertBanner backgroundColor=\"positive\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/AlertBanner/__tests__/AlertBanner.test.tsx",
    "content": "import { vi, beforeEach, afterEach, describe, it, expect, type Mock } from \"vitest\";\nimport React from \"react\";\nimport { render, cleanup, fireEvent } from \"@testing-library/react\";\nimport AlertBanner from \"../AlertBanner\";\nimport AlertBannerButton from \"../AlertBannerButton/AlertBannerButton\";\nimport AlertBannerText from \"../AlertBannerText/AlertBannerText\";\n\nconst NOOP = () => {};\n\ndescribe(\"<AlertBanner />\", () => {\n  afterEach(() => {\n    cleanup();\n  });\n\n  describe(\"on close\", () => {\n    let onCloseStub: Mock;\n\n    beforeEach(() => {\n      onCloseStub = vi.fn();\n      render(\n        <AlertBanner onClose={onCloseStub}>\n          <AlertBannerText text=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua\" />\n          <AlertBannerButton onClick={NOOP}>Lorem Ipsum Salura</AlertBannerButton>\n        </AlertBanner>\n      );\n    });\n\n    it(\"should be able to close alert banner when clicking on close button\", () => {\n      const { container } = render(\n        <AlertBanner onClose={onCloseStub}>\n          <AlertBannerText text=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua\" />\n          <AlertBannerButton onClick={NOOP}>Lorem Ipsum Salura</AlertBannerButton>\n        </AlertBanner>\n      );\n      fireEvent.click(container.querySelector(\"[data-testid='alert-banner-close-button']\"));\n      expect(onCloseStub.mock.calls.length).toBe(1);\n    });\n\n    describe(\"a11y\", () => {\n      it(\"should add the label\", () => {\n        const ariaLabel = \"Lable Name\";\n        const { getByLabelText } = render(<AlertBanner aria-label={ariaLabel} />);\n        const alertBannerComponentLabel = getByLabelText(ariaLabel);\n        expect(alertBannerComponentLabel).toBeTruthy();\n      });\n\n      it(\"should set aria-live on alert banner text when provided\", () => {\n        const { container } = render(\n          <AlertBanner>\n            <AlertBannerText text=\"Important update\" ariaLive=\"polite\" />\n          </AlertBanner>\n        );\n        const textSpan = container.querySelector(\"[data-testid='alert-banner-text'] span\");\n        expect(textSpan).toBeTruthy();\n        expect(textSpan.getAttribute(\"aria-live\")).toBe(\"polite\");\n      });\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/AlertBanner/__tests__/__snapshots__/AlertBanner.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`AlertBanner > should render correctly with background color 1`] = `\n<div\n  aria-label=\"banner\"\n  className=\"typography onPrimary start singleLineEllipsis text text2Normal alertBanner positive\"\n  data-testid=\"alert-banner\"\n  data-vibe=\"AlertBanner\"\n  role=\"banner\"\n>\n  <div\n    className=\"content\"\n  />\n  <div\n    className=\"closeButtonWrapper\"\n  >\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      aria-label=\"Close\"\n      className=\"closeBtn button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding\"\n      data-testid=\"alert-banner-close-button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      style={\n        {\n          \"alignItems\": \"center\",\n          \"height\": \"32px\",\n          \"justifyContent\": \"center\",\n          \"padding\": 0,\n          \"width\": \"32px\",\n        }\n      }\n      type=\"button\"\n    >\n      <svg\n        aria-hidden={true}\n        className=\"icon noFocusStyle\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"20\"\n        viewBox=\"0 0 20 20\"\n        width=\"20\"\n      >\n        <path\n          d=\"M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z\"\n        />\n      </svg>\n    </button>\n  </div>\n</div>\n`;\n\nexports[`AlertBanner > should render correctly with hidden close button 1`] = `\n<div\n  aria-label=\"banner\"\n  className=\"typography onPrimary start singleLineEllipsis text text2Normal alertBanner primary\"\n  data-testid=\"alert-banner\"\n  data-vibe=\"AlertBanner\"\n  role=\"banner\"\n>\n  <div\n    className=\"content\"\n  />\n  <div\n    className=\"closeButtonWrapper\"\n  />\n</div>\n`;\n\nexports[`AlertBanner > should render correctly with props 1`] = `\n<div\n  aria-label=\"lorem-banner\"\n  className=\"typography onPrimary start singleLineEllipsis text text2Normal my-lorem-ipsum-banner alertBanner negative\"\n  data-testid=\"alert-banner\"\n  data-vibe=\"AlertBanner\"\n  role=\"banner\"\n>\n  <div\n    className=\"content\"\n  >\n    <div\n      className=\"contentItem contentItemText\"\n    >\n      <div\n        className=\"ellipsis\"\n      >\n        <div\n          className=\"bannerText\"\n          data-testid=\"alert-banner-text\"\n        >\n          <span>\n            Lorem ipsum dolor sit amet\n          </span>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    className=\"closeButtonWrapper\"\n  >\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      aria-label=\"Close\"\n      className=\"closeBtn button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding\"\n      data-testid=\"alert-banner-close-button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      style={\n        {\n          \"alignItems\": \"center\",\n          \"height\": \"32px\",\n          \"justifyContent\": \"center\",\n          \"padding\": 0,\n          \"width\": \"32px\",\n        }\n      }\n      type=\"button\"\n    >\n      <svg\n        aria-hidden={true}\n        className=\"icon noFocusStyle\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"20\"\n        viewBox=\"0 0 20 20\"\n        width=\"20\"\n      >\n        <path\n          d=\"M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z\"\n        />\n      </svg>\n    </button>\n  </div>\n</div>\n`;\n\nexports[`AlertBanner > should render correctly without props 1`] = `\n<div\n  aria-label=\"banner\"\n  className=\"typography onPrimary start singleLineEllipsis text text2Normal alertBanner primary\"\n  data-testid=\"alert-banner\"\n  data-vibe=\"AlertBanner\"\n  role=\"banner\"\n>\n  <div\n    className=\"content\"\n  />\n  <div\n    className=\"closeButtonWrapper\"\n  >\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      aria-label=\"Close\"\n      className=\"closeBtn button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding\"\n      data-testid=\"alert-banner-close-button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      style={\n        {\n          \"alignItems\": \"center\",\n          \"height\": \"32px\",\n          \"justifyContent\": \"center\",\n          \"padding\": 0,\n          \"width\": \"32px\",\n        }\n      }\n      type=\"button\"\n    >\n      <svg\n        aria-hidden={true}\n        className=\"icon noFocusStyle\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"20\"\n        viewBox=\"0 0 20 20\"\n        width=\"20\"\n      >\n        <path\n          d=\"M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z\"\n        />\n      </svg>\n    </button>\n  </div>\n</div>\n`;\n\nexports[`AlertBanner > should render with correctly with multiple elements 1`] = `\n<div\n  aria-label=\"banner\"\n  className=\"typography onPrimary start singleLineEllipsis text text2Normal alertBanner primary\"\n  data-testid=\"alert-banner\"\n  data-vibe=\"AlertBanner\"\n  role=\"banner\"\n>\n  <div\n    className=\"content\"\n  >\n    <div\n      className=\"contentItem contentItemText\"\n    >\n      <div\n        className=\"ellipsis\"\n      >\n        <div\n          className=\"bannerText\"\n          data-testid=\"alert-banner-text\"\n        >\n          <span>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit\n          </span>\n        </div>\n      </div>\n    </div>\n    <div\n      className=\"contentItem\"\n    >\n      <div\n        className=\"marginLeft\"\n        data-testid=\"alert-banner-link\"\n      >\n        <a\n          aria-describedby=\"\"\n          aria-label=\"\"\n          aria-labelledby=\"\"\n          className=\"link colorPrimary\"\n          data-testid=\"link\"\n          data-vibe=\"Link\"\n          href=\"https://monday.com\"\n          id=\"\"\n          onClick={[Function]}\n          rel=\"noreferrer\"\n          target=\"_blank\"\n        >\n          <span\n            className=\"text bannerLink bannerLinkTextColorOnPrimary\"\n          >\n            Lorem ipsum\n          </span>\n        </a>\n      </div>\n    </div>\n    <div\n      className=\"contentItem contentItemText\"\n    >\n      <div\n        className=\"ellipsis\"\n      >\n        <div\n          className=\"bannerText marginLeft\"\n          data-testid=\"alert-banner-text\"\n        >\n          <span>\n            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua\n          </span>\n        </div>\n      </div>\n    </div>\n    <div\n      className=\"contentItem\"\n    >\n      <div\n        className=\"marginLeft\"\n        data-testid=\"alert-banner-button\"\n      >\n        <button\n          aria-busy={false}\n          aria-disabled={false}\n          className=\"bannerButton button sizeSmall kindPrimary colorOnPrimaryColor\"\n          data-testid=\"button\"\n          data-vibe=\"Button\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n          type=\"button\"\n        >\n          Lorem Ipsum Bailar\n        </button>\n      </div>\n    </div>\n  </div>\n  <div\n    className=\"closeButtonWrapper\"\n  >\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      aria-label=\"Close\"\n      className=\"closeBtn button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding\"\n      data-testid=\"alert-banner-close-button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      style={\n        {\n          \"alignItems\": \"center\",\n          \"height\": \"32px\",\n          \"justifyContent\": \"center\",\n          \"padding\": 0,\n          \"width\": \"32px\",\n        }\n      }\n      type=\"button\"\n    >\n      <svg\n        aria-hidden={true}\n        className=\"icon noFocusStyle\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"20\"\n        viewBox=\"0 0 20 20\"\n        width=\"20\"\n      >\n        <path\n          d=\"M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z\"\n        />\n      </svg>\n    </button>\n  </div>\n</div>\n`;\n\nexports[`AlertBanner > should render with correctly with text and button 1`] = `\n<div\n  aria-label=\"banner\"\n  className=\"typography onPrimary start singleLineEllipsis text text2Normal alertBanner primary\"\n  data-testid=\"alert-banner\"\n  data-vibe=\"AlertBanner\"\n  role=\"banner\"\n>\n  <div\n    className=\"content\"\n  >\n    <div\n      className=\"contentItem contentItemText\"\n    >\n      <div\n        className=\"ellipsis\"\n      >\n        <div\n          className=\"bannerText\"\n          data-testid=\"alert-banner-text\"\n        >\n          <span>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua\n          </span>\n        </div>\n      </div>\n    </div>\n    <div\n      className=\"contentItem\"\n    >\n      <div\n        className=\"marginLeft\"\n        data-testid=\"alert-banner-button\"\n      >\n        <button\n          aria-busy={false}\n          aria-disabled={false}\n          className=\"bannerButton button sizeSmall kindPrimary colorOnPrimaryColor\"\n          data-testid=\"button\"\n          data-vibe=\"Button\"\n          onBlur={[Function]}\n          onClick={[Function]}\n          onFocus={[Function]}\n          onMouseDown={[Function]}\n          onMouseUp={[Function]}\n          type=\"button\"\n        >\n          Lorem Ipsum Salura\n        </button>\n      </div>\n    </div>\n  </div>\n  <div\n    className=\"closeButtonWrapper\"\n  >\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      aria-label=\"Close\"\n      className=\"closeBtn button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding\"\n      data-testid=\"alert-banner-close-button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      style={\n        {\n          \"alignItems\": \"center\",\n          \"height\": \"32px\",\n          \"justifyContent\": \"center\",\n          \"padding\": 0,\n          \"width\": \"32px\",\n        }\n      }\n      type=\"button\"\n    >\n      <svg\n        aria-hidden={true}\n        className=\"icon noFocusStyle\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"20\"\n        viewBox=\"0 0 20 20\"\n        width=\"20\"\n      >\n        <path\n          d=\"M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z\"\n        />\n      </svg>\n    </button>\n  </div>\n</div>\n`;\n\nexports[`AlertBanner > should render with correctly with text and link 1`] = `\n<div\n  aria-label=\"banner\"\n  className=\"typography onPrimary start singleLineEllipsis text text2Normal alertBanner primary\"\n  data-testid=\"alert-banner\"\n  data-vibe=\"AlertBanner\"\n  role=\"banner\"\n>\n  <div\n    className=\"content\"\n  >\n    <div\n      className=\"contentItem contentItemText\"\n    >\n      <div\n        className=\"ellipsis\"\n      >\n        <div\n          className=\"bannerText\"\n          data-testid=\"alert-banner-text\"\n        >\n          <span>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua\n          </span>\n        </div>\n      </div>\n    </div>\n    <div\n      className=\"contentItem\"\n    >\n      <div\n        className=\"marginLeft\"\n        data-testid=\"alert-banner-link\"\n      >\n        <a\n          aria-describedby=\"\"\n          aria-label=\"\"\n          aria-labelledby=\"\"\n          className=\"link colorPrimary\"\n          data-testid=\"link\"\n          data-vibe=\"Link\"\n          href=\"https://monday.com\"\n          id=\"\"\n          onClick={[Function]}\n          rel=\"noreferrer\"\n          target=\"_blank\"\n        >\n          <span\n            className=\"text bannerLink bannerLinkTextColorOnPrimary\"\n          >\n            Lorem ipsum\n          </span>\n        </a>\n      </div>\n    </div>\n  </div>\n  <div\n    className=\"closeButtonWrapper\"\n  >\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      aria-label=\"Close\"\n      className=\"closeBtn button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding\"\n      data-testid=\"alert-banner-close-button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      style={\n        {\n          \"alignItems\": \"center\",\n          \"height\": \"32px\",\n          \"justifyContent\": \"center\",\n          \"padding\": 0,\n          \"width\": \"32px\",\n        }\n      }\n      type=\"button\"\n    >\n      <svg\n        aria-hidden={true}\n        className=\"icon noFocusStyle\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"20\"\n        viewBox=\"0 0 20 20\"\n        width=\"20\"\n      >\n        <path\n          d=\"M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z\"\n        />\n      </svg>\n    </button>\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/AlertBanner/index.ts",
    "content": "export { default as AlertBanner, type AlertBannerProps } from \"./AlertBanner\";\nexport { default as AlertBannerButton, type AlertBannerButtonProps } from \"./AlertBannerButton/AlertBannerButton\";\nexport { default as AlertBannerLink, type AlertBannerLinkProps } from \"./AlertBannerLink/AlertBannerLink\";\nexport { default as AlertBannerText, type AlertBannerTextProps } from \"./AlertBannerText/AlertBannerText\";\n\nexport * from \"./AlertBanner.types\";\n"
  },
  {
    "path": "packages/core/src/components/AttentionBox/AttentionBox.module.scss",
    "content": "@keyframes attentionBoxAnimation {\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.attention {\n  width: 100%;\n  border-radius: var(--border-radius-medium);\n  padding: var(--space-12) var(--space-16);\n  position: relative;\n  overflow: hidden;\n\n  &.animate {\n    animation: attentionBoxAnimation 200ms var(--motion-timing-transition);\n  }\n\n  &.primary {\n    background-color: var(--primary-selected-color);\n  }\n\n  &.positive {\n    background-color: var(--positive-color-selected);\n  }\n\n  &.negative {\n    background-color: var(--negative-color-selected);\n  }\n\n  &.warning {\n    background-color: var(--warning-color-selected);\n  }\n\n  &.neutral {\n    background-color: var(--allgrey-background-color);\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/AttentionBox/AttentionBox.tsx",
    "content": "import React, { forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport type { AttentionBoxProps, AttentionBoxRole } from \"./AttentionBox.types\";\nimport AttentionBoxDefault from \"./layouts/AttentionBoxDefault/AttentionBoxDefault\";\nimport AttentionBoxCompact from \"./layouts/AttentionBoxCompact/AttentionBoxCompact\";\nimport { resolveAttentionBoxIcon } from \"./utils/iconUtils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./AttentionBox.module.scss\";\n\nconst AttentionBox = forwardRef(\n  (\n    {\n      compact = false,\n      title,\n      animate = true,\n      icon,\n      iconType = \"svg\",\n      type = \"primary\",\n      children,\n      text,\n      action,\n      link,\n      id,\n      onClose,\n      closeButtonAriaLabel,\n      className,\n      \"data-testid\": dataTestId\n    }: AttentionBoxProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const role: AttentionBoxRole = type === \"negative\" ? \"alert\" : \"status\";\n    const displayIcon = resolveAttentionBoxIcon(icon, type);\n    const content = children || text;\n\n    const baseClasses = cx(\n      styles.attention,\n      styles[type],\n      {\n        [styles.animate]: animate\n      },\n      className\n    );\n\n    const layoutSharedProps = {\n      onClose,\n      closeButtonAriaLabel,\n      action,\n      link,\n      icon: displayIcon,\n      iconType,\n      content\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={baseClasses}\n        role={role}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.ATTENTION_BOX, id)}\n        data-vibe={ComponentVibeId.ATTENTION_BOX}\n      >\n        {compact ? (\n          <AttentionBoxCompact {...layoutSharedProps} />\n        ) : (\n          <AttentionBoxDefault title={title} {...layoutSharedProps} />\n        )}\n      </div>\n    );\n  }\n);\n\nexport default AttentionBox;\n"
  },
  {
    "path": "packages/core/src/components/AttentionBox/AttentionBox.types.ts",
    "content": "import type { ReactNode, MouseEvent } from \"react\";\nimport type { VibeComponentProps } from \"../../types\";\nimport type { SubIcon, IconType } from \"@vibe/icon\";\nimport type { AttentionBoxButtonProps } from \"./components/AttentionBoxButton/AttentionBoxButton\";\nimport type { AttentionBoxLinkProps } from \"./components/AttentionBoxLink/AttentionBoxLink\";\n\nexport type AttentionBoxType = \"primary\" | \"positive\" | \"negative\" | \"warning\" | \"neutral\";\n\n// Mutually exclusive content props\nexport type AttentionBoxContentProps =\n  | {\n      /**\n       * The main text content\n       */\n      text: string;\n      children?: never;\n    }\n  | {\n      /**\n       * Custom children to override the default text content\n       */\n      children: ReactNode;\n      text?: never;\n    };\n\n// Shared props for both compact and default layouts\nexport interface AttentionBoxLayoutSharedProps\n  extends Pick<AttentionBoxProps, \"icon\" | \"iconType\" | \"onClose\" | \"closeButtonAriaLabel\" | \"action\" | \"link\"> {\n  content: ReactNode;\n}\n\n// Mutually exclusive title props\nexport type AttentionBoxCompactTitleProps =\n  | {\n      compact?: false;\n      /**\n       * The title of the attention box\n       */\n      title?: string;\n    }\n  | {\n      /**\n       * When true, the attention box will be displayed in compact mode of one-liner\n       */\n      compact: true;\n      title?: never;\n    };\n\nexport type AttentionBoxRole = \"alert\" | \"status\";\n\nexport type AttentionBoxProps = VibeComponentProps &\n  AttentionBoxContentProps &\n  AttentionBoxCompactTitleProps & {\n    /**\n     * The variant type of the attention box\n     */\n    type?: AttentionBoxType;\n    /**\n     * The type of the icon\n     */\n    iconType?: IconType;\n    /**\n     * The icon to display. Pass `false` to hide the icon entirely, or omit to use the default icon for the type.\n     */\n    icon?: SubIcon | false;\n    /**\n     * Callback when the close button is clicked\n     */\n    onClose?: (event: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Custom aria label for the close button\n     */\n    closeButtonAriaLabel?: string;\n    /**\n     * Whether to animate the entrance\n     */\n    animate?: boolean;\n    /**\n     * Action button configuration\n     */\n    action?: AttentionBoxButtonProps;\n    /**\n     * Link configuration\n     */\n    link?: Omit<AttentionBoxLinkProps, \"inlineText\">;\n  };\n"
  },
  {
    "path": "packages/core/src/components/AttentionBox/__tests__/AttentionBox.test.tsx",
    "content": "import React from \"react\";\nimport { render, screen, fireEvent } from \"@testing-library/react\";\nimport { vi, describe, it, expect, beforeEach } from \"vitest\";\nimport { Robot } from \"@vibe/icons\";\nimport AttentionBox from \"../AttentionBox\";\nimport userEvent from \"@testing-library/user-event\";\nimport type { AttentionBoxType } from \"../AttentionBox.types\";\n\ndescribe(\"AttentionBox\", () => {\n  beforeEach(() => {\n    vi.clearAllTimers();\n    vi.useFakeTimers();\n  });\n\n  afterEach(() => {\n    vi.runOnlyPendingTimers();\n    vi.useRealTimers();\n  });\n\n  describe(\"Core Functionality\", () => {\n    it(\"renders in default mode with title and text\", () => {\n      render(<AttentionBox title=\"Test Title\" text=\"Test text\" />);\n\n      expect(screen.getByText(\"Test Title\")).toBeInTheDocument();\n      expect(screen.getByText(\"Test text\")).toBeInTheDocument();\n    });\n\n    it(\"renders all variant types with correct class styling\", () => {\n      const variants: AttentionBoxType[] = [\"primary\", \"positive\", \"negative\", \"warning\", \"neutral\"];\n\n      variants.forEach(variant => {\n        const { unmount } = render(<AttentionBox type={variant} text=\"Test\" />);\n        const container = screen.getByRole(variant === \"negative\" ? \"alert\" : \"status\");\n        expect(container).toHaveClass(`${variant}`);\n        unmount();\n      });\n    });\n\n    it(\"renders negative variant with alert role\", () => {\n      render(<AttentionBox type=\"negative\" text=\"Error message\" />);\n      expect(screen.getByRole(\"alert\")).toBeInTheDocument();\n    });\n\n    it(\"renders non-negative variants with status role\", () => {\n      render(<AttentionBox type=\"primary\" text=\"Info message\" />);\n      expect(screen.getByRole(\"status\")).toBeInTheDocument();\n    });\n  });\n\n  describe(\"Icon Control\", () => {\n    it(\"renders default icon when no icon is provided\", () => {\n      render(<AttentionBox type=\"primary\" text=\"Test\" />);\n      expect(screen.getByTestId(\"icon\")).toBeInTheDocument();\n    });\n\n    it(\"renders custom icon when provided\", () => {\n      render(<AttentionBox text=\"Test\" icon={Robot} />);\n      expect(screen.getByTestId(\"icon\")).toBeInTheDocument();\n    });\n\n    it(\"hides icon when icon is false\", () => {\n      render(<AttentionBox text=\"Test\" icon={false} />);\n      expect(screen.queryByTestId(\"icon\")).not.toBeInTheDocument();\n    });\n  });\n\n  describe(\"Dismiss Control\", () => {\n    it(\"renders close button when onClose is provided\", () => {\n      const onClose = vi.fn();\n      render(<AttentionBox text=\"Test\" onClose={onClose} />);\n\n      const closeButton = screen.getByRole(\"button\", { name: /close/i });\n      expect(closeButton).toBeInTheDocument();\n    });\n\n    it(\"does not render close button when onClose is not provided\", () => {\n      render(<AttentionBox text=\"Test\" />);\n      expect(screen.queryByRole(\"button\", { name: /close/i })).not.toBeInTheDocument();\n    });\n\n    it(\"calls onClose when close button is clicked\", () => {\n      const onClose = vi.fn();\n      render(<AttentionBox text=\"Test\" onClose={onClose} />);\n\n      const closeButton = screen.getByRole(\"button\", { name: /close/i });\n      fireEvent.click(closeButton);\n\n      expect(onClose).toHaveBeenCalledTimes(1);\n    });\n  });\n\n  describe(\"Action Button\", () => {\n    it(\"renders action button when provided\", () => {\n      const onClick = vi.fn();\n      render(<AttentionBox text=\"Test\" action={{ text: \"Action\", onClick }} />);\n\n      const actionButton = screen.getByRole(\"button\", { name: \"Action\" });\n      expect(actionButton).toBeInTheDocument();\n    });\n\n    it(\"calls action onClick when button is clicked\", () => {\n      const onClick = vi.fn();\n      render(<AttentionBox text=\"Test\" action={{ text: \"Action\", onClick }} />);\n\n      const actionButton = screen.getByRole(\"button\", { name: \"Action\" });\n      fireEvent.click(actionButton);\n\n      expect(onClick).toHaveBeenCalledTimes(1);\n    });\n  });\n\n  describe(\"Link\", () => {\n    it(\"renders link when provided\", () => {\n      render(<AttentionBox text=\"Test\" link={{ href: \"/test\", text: \"Test Link\" }} />);\n\n      const link = screen.getByRole(\"link\", { name: \"Test Link\" });\n      expect(link).toBeInTheDocument();\n      expect(link).toHaveAttribute(\"href\", \"/test\");\n    });\n\n    it(\"renders link as block level element\", () => {\n      render(<AttentionBox text=\"Test text\" link={{ href: \"/test\", text: \"Test Link\" }} />);\n\n      const link = screen.getByRole(\"link\", { name: \"Test Link\" });\n      expect(link).toBeInTheDocument();\n      expect(link).not.toHaveClass(\"inlineText\");\n    });\n\n    it(\"renders link in action section when action also exists\", () => {\n      const onClick = vi.fn();\n      render(\n        <AttentionBox\n          text=\"Test text\"\n          link={{ href: \"/test\", text: \"Test Link\" }}\n          action={{ text: \"Action\", onClick }}\n        />\n      );\n\n      const link = screen.getByRole(\"link\", { name: \"Test Link\" });\n      const actionButton = screen.getByRole(\"button\", { name: \"Action\" });\n      expect(link).toBeInTheDocument();\n      expect(actionButton).toBeInTheDocument();\n    });\n  });\n\n  describe(\"Animation\", () => {\n    it(\"applies animation classes when animate is true\", () => {\n      render(<AttentionBox text=\"Test\" animate />);\n\n      vi.advanceTimersByTime(200);\n\n      const container = screen.getByRole(\"status\");\n      expect(container).toHaveClass(\"animate\");\n    });\n  });\n\n  describe(\"Children Override\", () => {\n    it(\"renders children instead of text when provided\", () => {\n      render(\n        <AttentionBox text=\"Original text\">\n          <span>Custom children</span>\n        </AttentionBox>\n      );\n\n      expect(screen.getByText(\"Custom children\")).toBeInTheDocument();\n      expect(screen.queryByText(\"Original text\")).not.toBeInTheDocument();\n    });\n  });\n\n  describe(\"Accessibility\", () => {\n    it(\"has correct tab order\", () => {\n      const onClose = vi.fn();\n      const actionClick = vi.fn();\n\n      render(\n        <AttentionBox\n          text=\"Test\"\n          onClose={onClose}\n          link={{ href: \"/test\", text: \"Link\" }}\n          action={{ text: \"Action\", onClick: actionClick }}\n        />\n      );\n\n      const closeButton = screen.getByRole(\"button\", { name: /close/i });\n      const link = screen.getByRole(\"link\");\n      const actionButton = screen.getByRole(\"button\", { name: \"Action\" });\n\n      userEvent.tab();\n      expect(closeButton).toHaveFocus();\n      userEvent.tab();\n      expect(link).toHaveFocus();\n      userEvent.tab();\n      expect(actionButton).toHaveFocus();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/AttentionBox/components/AttentionBoxButton/AttentionBoxButton.tsx",
    "content": "import React, { forwardRef } from \"react\";\nimport { Button, type ButtonProps } from \"@vibe/button\";\n\nexport interface AttentionBoxButtonProps extends Omit<ButtonProps, \"size\" | \"kind\" | \"color\" | \"children\"> {\n  text: string;\n}\n\nconst AttentionBoxButton = forwardRef<HTMLButtonElement, AttentionBoxButtonProps>(({ text, ...buttonProps }, ref) => (\n  <Button ref={ref} size=\"small\" kind=\"secondary\" color=\"inverted\" {...buttonProps}>\n    {text}\n  </Button>\n));\n\nexport default AttentionBoxButton;\n"
  },
  {
    "path": "packages/core/src/components/AttentionBox/components/AttentionBoxCloseButton/AttentionBoxCloseButton.module.scss",
    "content": ".closeButton {\n  flex-shrink: 0;\n\n  &:hover {\n    background-color: var(--primary-background-hover-color);\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/AttentionBox/components/AttentionBoxCloseButton/AttentionBoxCloseButton.tsx",
    "content": "import React from \"react\";\nimport cx from \"classnames\";\nimport { IconButton } from \"@vibe/icon-button\";\nimport { CloseSmall } from \"@vibe/icons\";\nimport styles from \"./AttentionBoxCloseButton.module.scss\";\n\nexport interface AttentionBoxCloseButtonProps {\n  onClose?: (event: React.MouseEvent) => void;\n  closeButtonAriaLabel?: string;\n  className?: string;\n}\n\nconst AttentionBoxCloseButton = ({\n  onClose,\n  closeButtonAriaLabel = \"Close\",\n  className\n}: AttentionBoxCloseButtonProps) => {\n  return (\n    <IconButton\n      icon={CloseSmall}\n      size=\"xs\"\n      kind=\"tertiary\"\n      onClick={onClose}\n      aria-label={closeButtonAriaLabel}\n      hideTooltip\n      className={cx(styles.closeButton, className)}\n    />\n  );\n};\n\nexport default AttentionBoxCloseButton;\n"
  },
  {
    "path": "packages/core/src/components/AttentionBox/components/AttentionBoxLeadingIcon/AttentionBoxLeadingIcon.module.scss",
    "content": ".icon {\n  color: var(--primary-text-color);\n  flex-shrink: 0;\n}\n"
  },
  {
    "path": "packages/core/src/components/AttentionBox/components/AttentionBoxLeadingIcon/AttentionBoxLeadingIcon.tsx",
    "content": "import React from \"react\";\nimport cx from \"classnames\";\nimport { Icon, type SubIcon, type IconType } from \"@vibe/icon\";\nimport styles from \"./AttentionBoxLeadingIcon.module.scss\";\n\nexport interface AttentionBoxLeadingIconProps {\n  icon?: SubIcon;\n  iconType?: IconType;\n  className?: string;\n}\n\nconst AttentionBoxLeadingIcon = ({ icon, iconType = \"svg\", className }: AttentionBoxLeadingIconProps) => {\n  return <Icon icon={icon} type={iconType} size={20} className={cx(styles.icon, className)} />;\n};\n\nexport default AttentionBoxLeadingIcon;\n"
  },
  {
    "path": "packages/core/src/components/AttentionBox/components/AttentionBoxLink/AttentionBoxLink.module.scss",
    "content": "a.attentionBoxLink {\n  color: var(--primary-text-color);\n  text-decoration: underline;\n}\n"
  },
  {
    "path": "packages/core/src/components/AttentionBox/components/AttentionBoxLink/AttentionBoxLink.tsx",
    "content": "import React, { forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport { Link } from \"../../../Link\";\nimport type { LinkProps } from \"../../../Link\";\nimport styles from \"./AttentionBoxLink.module.scss\";\n\nexport type AttentionBoxLinkProps = LinkProps;\n\nconst AttentionBoxLink = forwardRef(\n  ({ target, className, ...linkProps }: AttentionBoxLinkProps, ref: React.ForwardedRef<HTMLAnchorElement>) => {\n    return <Link ref={ref} target={target} className={cx(styles.attentionBoxLink, className)} {...linkProps} />;\n  }\n);\n\nexport default AttentionBoxLink;\n"
  },
  {
    "path": "packages/core/src/components/AttentionBox/consts/icons.ts",
    "content": "import { Info, Check, Alert, Warning, Favorite } from \"@vibe/icons\";\nimport type { AttentionBoxType } from \"../AttentionBox.types\";\nimport type { SubIcon } from \"@vibe/icon\";\n\nexport const ATTENTION_BOX_DEFAULT_ICONS: Record<AttentionBoxType, SubIcon> = {\n  primary: Info,\n  positive: Check,\n  negative: Alert,\n  warning: Warning,\n  neutral: Favorite\n};\n"
  },
  {
    "path": "packages/core/src/components/AttentionBox/index.ts",
    "content": "export { default as AttentionBox } from \"./AttentionBox\";\nexport type { AttentionBoxProps, AttentionBoxType } from \"./AttentionBox.types\";\n"
  },
  {
    "path": "packages/core/src/components/AttentionBox/layouts/AttentionBoxCompact/AttentionBoxCompact.module.scss",
    "content": ".container {\n  gap: var(--space-32);\n}\n\n.mainContentGroup {\n  min-width: 0;\n}\n\n.leadingIcon {\n  align-self: flex-start;\n}\n\n.actionsGroup {\n  gap: var(--space-12);\n}\n"
  },
  {
    "path": "packages/core/src/components/AttentionBox/layouts/AttentionBoxCompact/AttentionBoxCompact.tsx",
    "content": "import React from \"react\";\nimport { Flex } from \"@vibe/layout\";\nimport { Text } from \"@vibe/typography\";\nimport AttentionBoxButton from \"../../components/AttentionBoxButton/AttentionBoxButton\";\nimport AttentionBoxLink from \"../../components/AttentionBoxLink/AttentionBoxLink\";\nimport AttentionBoxCloseButton from \"../../components/AttentionBoxCloseButton/AttentionBoxCloseButton\";\nimport AttentionBoxLeadingIcon from \"../../components/AttentionBoxLeadingIcon/AttentionBoxLeadingIcon\";\nimport styles from \"./AttentionBoxCompact.module.scss\";\nimport type { AttentionBoxLayoutSharedProps } from \"../../AttentionBox.types\";\n\nexport type AttentionBoxCompactProps = AttentionBoxLayoutSharedProps;\n\nconst AttentionBoxCompact = ({\n  icon,\n  iconType,\n  onClose,\n  closeButtonAriaLabel = \"Close\",\n  action,\n  link,\n  content\n}: AttentionBoxCompactProps) => {\n  const hasActions = !!(action || link);\n\n  return (\n    <Flex align=\"center\" className={styles.container}>\n      <Flex gap=\"xs\" flex=\"1\" className={styles.mainContentGroup}>\n        {icon && <AttentionBoxLeadingIcon icon={icon} iconType={iconType} className={styles.leadingIcon} />}\n        <Text type=\"text2\" element={typeof content === \"string\" ? \"p\" : undefined} ellipsis>\n          {content}\n        </Text>\n      </Flex>\n      {(hasActions || !!onClose) && (\n        <Flex className={styles.actionsGroup}>\n          {link && <AttentionBoxLink {...link} inlineText={false} />}\n          {action && <AttentionBoxButton {...action} />}\n          {!!onClose && <AttentionBoxCloseButton onClose={onClose} closeButtonAriaLabel={closeButtonAriaLabel} />}\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n\nexport default AttentionBoxCompact;\n"
  },
  {
    "path": "packages/core/src/components/AttentionBox/layouts/AttentionBoxCompact/__tests__/AttentionBoxCompact.test.tsx",
    "content": "import React from \"react\";\nimport { render, screen } from \"@testing-library/react\";\nimport { describe, expect, it, vi } from \"vitest\";\n\nimport AttentionBoxCompact from \"../AttentionBoxCompact\";\nimport type { AttentionBoxCompactProps } from \"../AttentionBoxCompact\";\n\nconst renderWithProps = (props: Partial<AttentionBoxCompactProps> = {}) => {\n  return render(<AttentionBoxCompact content=\"Test content\" {...props} />);\n};\n\ndescribe(\"AttentionBoxCompact\", () => {\n  it(\"renders action button when action is provided\", () => {\n    const action = { text: \"Action\", onClick: vi.fn() };\n    renderWithProps({ action });\n\n    expect(screen.getByRole(\"button\", { name: \"Action\" })).toBeInTheDocument();\n  });\n\n  it(\"renders link button when link is provided\", () => {\n    const link = { href: \"/test\", text: \"Test Link\" };\n    renderWithProps({ link });\n\n    expect(screen.getByRole(\"link\", { name: \"Test Link\" })).toBeInTheDocument();\n  });\n\n  it(\"renders link and action when both exist\", () => {\n    const action = { text: \"Action\", onClick: vi.fn() };\n    const link = { href: \"/test\", text: \"Test Link\" };\n    renderWithProps({ action, link });\n\n    expect(screen.getByRole(\"button\", { name: \"Action\" })).toBeInTheDocument();\n    expect(screen.getByRole(\"link\", { name: \"Test Link\" })).toBeInTheDocument();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/AttentionBox/layouts/AttentionBoxDefault/AttentionBoxDefault.module.scss",
    "content": ".container {\n  --grid-columns: auto 1fr auto;\n  display: grid;\n  gap: var(--space-4);\n  width: 100%;\n  grid-template-columns: var(--grid-columns);\n\n  .icon {\n    grid-column: 1;\n    grid-row: 1;\n    align-self: center;\n  }\n\n  .title {\n    grid-row: 1;\n    grid-column: 2;\n    align-self: center;\n  }\n\n  .text,\n  .actions {\n    grid-column: 2 / -1;\n  }\n\n  .text {\n    grid-row: 2;\n    min-width: 0;\n    margin-inline-end: var(--space-8);\n  }\n\n  .closeButton {\n    grid-row: 1;\n    grid-column: 3;\n    align-self: start;\n  }\n\n  .actions {\n    grid-row: 3;\n    margin-block-start: var(--space-8);\n  }\n\n  &:not(.hasIcon) {\n    --grid-columns: 1fr auto;\n\n    &:not(.hasCloseButton) {\n      --grid-columns: 1fr;\n    }\n\n    .title {\n      grid-column: 1;\n    }\n\n    .text,\n    .actions {\n      grid-column: 1 / -1;\n    }\n\n    .closeButton {\n      grid-column: 2;\n    }\n  }\n\n  &:not(.hasCloseButton) {\n    --grid-columns: auto 1fr;\n  }\n\n  &:not(.hasTitle) {\n    .icon {\n      align-self: start;\n    }\n\n    .text {\n      grid-row: 1;\n      grid-column-end: -2;\n    }\n\n    .closeButton {\n      margin-block-start: -1px; // temporary fix until line height is adjusted in typography\n    }\n\n    .actions {\n      grid-row: 2;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/AttentionBox/layouts/AttentionBoxDefault/AttentionBoxDefault.tsx",
    "content": "import React from \"react\";\nimport cx from \"classnames\";\nimport { Text } from \"@vibe/typography\";\nimport { Flex } from \"@vibe/layout\";\nimport AttentionBoxButton from \"../../components/AttentionBoxButton/AttentionBoxButton\";\nimport AttentionBoxLink from \"../../components/AttentionBoxLink/AttentionBoxLink\";\nimport AttentionBoxCloseButton from \"../../components/AttentionBoxCloseButton/AttentionBoxCloseButton\";\nimport AttentionBoxLeadingIcon from \"../../components/AttentionBoxLeadingIcon/AttentionBoxLeadingIcon\";\nimport styles from \"./AttentionBoxDefault.module.scss\";\nimport type { AttentionBoxLayoutSharedProps, AttentionBoxProps } from \"../../AttentionBox.types\";\n\nexport type AttentionBoxDefaultProps = AttentionBoxLayoutSharedProps & Pick<AttentionBoxProps, \"title\">;\n\nconst AttentionBoxDefault = ({\n  title,\n  icon,\n  iconType,\n  onClose,\n  closeButtonAriaLabel = \"Close\",\n  action,\n  link,\n  content\n}: AttentionBoxDefaultProps) => {\n  const hasActions = action || link;\n\n  return (\n    <div\n      className={cx(styles.container, {\n        [styles.hasIcon]: !!icon,\n        [styles.hasTitle]: !!title,\n        [styles.hasActions]: hasActions,\n        [styles.hasCloseButton]: !!onClose\n      })}\n    >\n      {icon && <AttentionBoxLeadingIcon icon={icon} iconType={iconType} className={styles.icon} />}\n\n      {title && (\n        <Text type=\"text1\" weight=\"medium\" className={styles.title}>\n          {title}\n        </Text>\n      )}\n\n      {!!onClose && (\n        <AttentionBoxCloseButton\n          onClose={onClose}\n          closeButtonAriaLabel={closeButtonAriaLabel}\n          className={styles.closeButton}\n        />\n      )}\n\n      <Text\n        type=\"text2\"\n        className={styles.text}\n        ellipsis={false}\n        element={typeof content === \"string\" ? \"p\" : undefined}\n      >\n        {content}\n      </Text>\n\n      {hasActions && (\n        <Flex gap=\"medium\" className={styles.actions}>\n          {link && <AttentionBoxLink {...link} inlineText={false} />}\n          {action && <AttentionBoxButton {...action} />}\n        </Flex>\n      )}\n    </div>\n  );\n};\n\nexport default AttentionBoxDefault;\n"
  },
  {
    "path": "packages/core/src/components/AttentionBox/layouts/AttentionBoxDefault/__tests__/AttentionBoxDefault.test.tsx",
    "content": "import React from \"react\";\nimport { render, screen } from \"@testing-library/react\";\nimport { describe, expect, it, vi } from \"vitest\";\n\nimport AttentionBoxDefault from \"../AttentionBoxDefault\";\nimport type { AttentionBoxDefaultProps } from \"../AttentionBoxDefault\";\n\nconst renderWithProps = (props: Partial<AttentionBoxDefaultProps> = {}) => {\n  return render(<AttentionBoxDefault content=\"Test content\" {...props} />);\n};\n\ndescribe(\"AttentionBoxDefault\", () => {\n  describe(\"Layout Structure\", () => {\n    it(\"renders title section with title\", () => {\n      renderWithProps({ title: \"Test Title\" });\n\n      expect(screen.getByText(\"Test Title\")).toBeInTheDocument();\n    });\n\n    it(\"renders content section\", () => {\n      renderWithProps();\n      expect(screen.getByText(\"Test content\")).toBeInTheDocument();\n    });\n  });\n\n  describe(\"Action Section\", () => {\n    it(\"renders action section with action button when action is provided\", () => {\n      const action = { text: \"Action\", onClick: vi.fn() };\n      renderWithProps({ action });\n\n      expect(screen.getByRole(\"button\", { name: \"Action\" })).toBeInTheDocument();\n    });\n\n    it(\"renders action section with block link when link exists and no action\", () => {\n      const link = { href: \"/test\", text: \"Test Link\" };\n      renderWithProps({ link });\n\n      expect(screen.getByRole(\"link\", { name: \"Test Link\" })).toBeInTheDocument();\n    });\n\n    it(\"does not render action section when no action and no link\", () => {\n      const { container } = renderWithProps();\n\n      expect(container.querySelector('[class*=\"actionSection\"]')).not.toBeInTheDocument();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/AttentionBox/utils/__tests__/iconUtils.test.ts",
    "content": "import { describe, it, expect, vi } from \"vitest\";\nimport { resolveAttentionBoxIcon } from \"../iconUtils\";\nimport { ATTENTION_BOX_DEFAULT_ICONS } from \"../../consts/icons\";\n\nvi.mock(\"../../consts/icons\", () => ({\n  ATTENTION_BOX_DEFAULT_ICONS: {\n    primary: \"MockPrimaryIcon\",\n    positive: \"MockPositiveIcon\",\n    negative: \"MockNegativeIcon\",\n    warning: \"MockWarningIcon\",\n    neutral: \"MockNeutralIcon\"\n  } satisfies typeof ATTENTION_BOX_DEFAULT_ICONS\n}));\n\ndescribe(\"iconUtils\", () => {\n  describe(\"resolveAttentionBoxIcon\", () => {\n    it(\"returns null when icon is false\", () => {\n      const result = resolveAttentionBoxIcon(false, \"primary\");\n      expect(result).toBeNull();\n    });\n\n    it(\"returns custom icon when provided\", () => {\n      const result = resolveAttentionBoxIcon(\"test-icon\", \"primary\");\n      expect(result).toBe(\"test-icon\");\n    });\n\n    it(\"returns default icon for type when no custom icon\", () => {\n      const result = resolveAttentionBoxIcon(undefined, \"primary\");\n      expect(result).toBe(ATTENTION_BOX_DEFAULT_ICONS.primary);\n    });\n\n    it(\"returns default icon for primary type when no type specified\", () => {\n      const result = resolveAttentionBoxIcon(undefined, undefined);\n      expect(result).toBe(ATTENTION_BOX_DEFAULT_ICONS.primary);\n    });\n\n    it(\"returns default icon for negative type when type negative is specified\", () => {\n      const result = resolveAttentionBoxIcon(undefined, \"negative\");\n      expect(result).toBe(ATTENTION_BOX_DEFAULT_ICONS.negative);\n    });\n\n    it(\"prioritizes custom icon over default icon when type is provided\", () => {\n      const result = resolveAttentionBoxIcon(\"test-icon\", \"negative\");\n      expect(result).toBe(\"test-icon\");\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/AttentionBox/utils/iconUtils.ts",
    "content": "import type { SubIcon } from \"@vibe/icon\";\nimport type { AttentionBoxType } from \"../AttentionBox.types\";\nimport { ATTENTION_BOX_DEFAULT_ICONS } from \"../consts/icons\";\n\nexport const resolveAttentionBoxIcon = (icon?: SubIcon | false, type?: AttentionBoxType): SubIcon | null => {\n  if (icon === false) return null;\n  return icon || ATTENTION_BOX_DEFAULT_ICONS[type || \"primary\"];\n};\n"
  },
  {
    "path": "packages/core/src/components/Avatar/Avatar.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n@import \"./AvatarConstants\";\n\n.avatar {\n  position: relative;\n}\n\n.large {\n  height: $avatar-size-large;\n  width: $avatar-size-large;\n}\n\n.medium {\n  height: $avatar-size-medium;\n  width: $avatar-size-medium;\n}\n\n.small {\n  height: $avatar-size-small;\n  width: $avatar-size-small;\n}\n\n.xs {\n  height: $avatar-size-xs;\n  width: $avatar-size-xs;\n}\n\n.clickableWrapper {\n  height: 100%;\n  width: 100%;\n}\n\n.circle {\n  height: 100%;\n  width: 100%;\n  position: relative;\n  border: 1px solid;\n  border-radius: 50%;\n  overflow: hidden;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: var(--text-color-on-primary);\n}\n\n.circle:focus {\n  outline: none;\n  @include focus-style(50%);\n}\n\n.circleImg {\n  border-color: var(--primary-background-color);\n}\n\n.circleText {\n  border-color: var(--layout-border-color);\n}\n\n.disabled:before {\n  content: \"\";\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  top: 0;\n  opacity: 0.7;\n  background: var(--primary-background-color);\n}\n\n.square {\n  border-radius: var(--border-radius-small);\n}\n\n.square:focus {\n  outline: none;\n  @include focus-style(var(--border-radius-small));\n}\n\n.withoutBorder {\n  border: none;\n}\n\n.badges {\n  position: absolute;\n  top: 50%;\n  left: 50%; /* position the left edge of the element at the middle of the parent */\n  transform: translate(-50%, -50%);\n  display: grid;\n  grid-template-columns: 50% 50%;\n  margin-inline: auto;\n  height: 110%;\n  width: 110%;\n}\n\n.badges .badge {\n  display: flex;\n}\n\n.badges .badgeTopLeft {\n  grid-row: 1;\n  grid-column: 1;\n  justify-self: start;\n}\n\n.badges .badgeTopRight {\n  grid-row: 1;\n  grid-column: 2;\n  justify-self: end;\n}\n\n.badges .badgeBottomLeft {\n  grid-row: 2;\n  grid-column: 1;\n  justify-self: start;\n  align-self: end;\n}\n\n.badges .badgeBottomRight {\n  grid-row: 2;\n  grid-column: 2;\n  justify-self: end;\n  align-self: end;\n}\n"
  },
  {
    "path": "packages/core/src/components/Avatar/Avatar.tsx",
    "content": "import { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"@vibe/shared\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { type AriaRole, useCallback, useMemo } from \"react\";\nimport { isNil } from \"es-toolkit\";\nimport { type ElementAllowedColor, getElementColor } from \"../../types/Colors\";\nimport { type AvatarSize, type AvatarType } from \"./Avatar.types\";\nimport AvatarBadge, { type AvatarBadgeProps } from \"./AvatarBadge\";\nimport AvatarContent from \"./AvatarContent\";\nimport { Tooltip, type TooltipProps } from \"@vibe/tooltip\";\nimport { ClickableWrapper } from \"@vibe/clickable\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport styles from \"./Avatar.module.scss\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface AvatarProps extends VibeComponentProps {\n  /**\n   * The image source for the avatar.\n   */\n  src?: string;\n  /**\n   * The text displayed inside the avatar.\n   */\n  text?: string;\n  /**\n   * Props passed to the Tooltip component. See full options in the [Tooltip documentation](https://vibe.monday.com/?path=/docs/components-tooltip--docs).\n   */\n  tooltipProps?: Partial<TooltipProps>;\n  /**\n   * The ARIA label of the avatar.\n   */\n  \"aria-label\"?: string;\n  /**\n   * If true, the tooltip is disabled.\n   */\n  withoutTooltip?: boolean;\n  /**\n   * The icon displayed inside the avatar.\n   */\n  icon?: SubIcon;\n  /**\n   * The type of the avatar.\n   */\n  type?: AvatarType;\n  /**\n   * Class name applied to the text inside the avatar.\n   */\n  textClassName?: string;\n  /**\n   * Class name applied to the avatar content wrapper.\n   */\n  avatarContentWrapperClassName?: string;\n  /**\n   * The background color of the avatar.\n   */\n  backgroundColor?: ElementAllowedColor;\n  /**\n   * A custom background color.\n   */\n  customBackgroundColor?: string;\n  /**\n   * The ARIA role of the avatar.\n   */\n  role?: AriaRole;\n  /**\n   * The size of the avatar.\n   */\n  size?: AvatarSize;\n  /**\n   * A custom size in pixels.\n   */\n  customSize?: number;\n  /**\n   * The tab index of the avatar.\n   */\n  tabIndex?: number;\n  /**\n   * If true, the avatar is hidden from assistive technologies.\n   */\n  \"aria-hidden\"?: boolean;\n  /**\n   * If true, the avatar is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If true, renders the avatar as a square instead of a circle.\n   */\n  square?: boolean;\n  /**\n   * Props for the top-left badge.\n   */\n  topLeftBadgeProps?: AvatarBadgeProps;\n  /**\n   * Props for the top-right badge.\n   */\n  topRightBadgeProps?: AvatarBadgeProps;\n  /**\n   * Props for the bottom-left badge.\n   */\n  bottomLeftBadgeProps?: AvatarBadgeProps;\n  /**\n   * Props for the bottom-right badge.\n   */\n  bottomRightBadgeProps?: AvatarBadgeProps;\n  /**\n   * If true, removes the avatar's border.\n   */\n  withoutBorder?: boolean;\n  /**\n   * Callback fired when the avatar is clicked.\n   */\n  onClick?: (event: React.MouseEvent | React.KeyboardEvent, avatarId: string) => void;\n}\n\nconst Avatar = ({\n  id,\n  type = \"text\",\n  className,\n  avatarContentWrapperClassName,\n  textClassName = \"\",\n  size = \"large\",\n  src,\n  icon,\n  text,\n  tooltipProps,\n  \"aria-label\": ariaLabel,\n  withoutTooltip = false,\n  role,\n  backgroundColor = \"chili-blue\",\n  square,\n  disabled,\n  tabIndex,\n  \"aria-hidden\": ariaHidden = false,\n  topLeftBadgeProps,\n  topRightBadgeProps,\n  bottomLeftBadgeProps,\n  bottomRightBadgeProps,\n  withoutBorder = false,\n  customSize = null,\n  customBackgroundColor = null,\n  onClick,\n  \"data-testid\": dataTestId\n}: AvatarProps) => {\n  const backgroundColorStyle = useMemo(() => {\n    if (customBackgroundColor) return { backgroundColor: customBackgroundColor };\n    return src ? {} : { backgroundColor: getElementColor(backgroundColor) };\n  }, [src, backgroundColor, customBackgroundColor]);\n  const sizeStyle = useMemo(() => {\n    return customSize ? { height: customSize, width: customSize } : {};\n  }, [customSize]);\n\n  const overrideTooltipProps = useMemo(() => {\n    if (withoutTooltip) return undefined;\n\n    if (tooltipProps) {\n      return { content: ariaLabel, ...tooltipProps };\n    } else {\n      return { content: ariaLabel };\n    }\n  }, [ariaLabel, tooltipProps, withoutTooltip]);\n\n  const badgesContainer = useMemo(() => {\n    const badges = [];\n    if (!isNil(topLeftBadgeProps)) {\n      badges.push(\n        <div key=\"top-left-badge\" className={cx(styles.badge, styles.badgeTopLeft)}>\n          <AvatarBadge size={size} {...topLeftBadgeProps} />\n        </div>\n      );\n    }\n    if (!isNil(topRightBadgeProps)) {\n      badges.push(\n        <div key=\"top-right-badge\" className={cx(styles.badge, styles.badgeTopRight)}>\n          <AvatarBadge size={size} {...topRightBadgeProps} />\n        </div>\n      );\n    }\n    if (!isNil(bottomLeftBadgeProps)) {\n      badges.push(\n        <div key=\"bottom-left-badge\" className={cx(styles.badge, styles.badgeBottomLeft)}>\n          <AvatarBadge size={size} {...bottomLeftBadgeProps} />\n        </div>\n      );\n    }\n    if (!isNil(bottomRightBadgeProps)) {\n      badges.push(\n        <div key=\"bottom-right-bade\" className={cx(styles.badge, styles.badgeBottomRight)}>\n          <AvatarBadge size={size} {...bottomRightBadgeProps} />\n        </div>\n      );\n    }\n\n    return badges.length > 0 ? <div className={cx(styles.badges)}>{badges}</div> : null;\n  }, [size, topLeftBadgeProps, topRightBadgeProps, bottomLeftBadgeProps, bottomRightBadgeProps]);\n\n  const defaultTabIndex = useMemo(() => {\n    if (!disabled && (onClick || overrideTooltipProps?.content)) {\n      return 0;\n    }\n    return -1;\n  }, [disabled, onClick, overrideTooltipProps?.content]);\n\n  const overrideTabIndex = tabIndex ?? defaultTabIndex;\n\n  const clickHandler = useCallback(\n    (event: React.MouseEvent | React.KeyboardEvent) => {\n      event.preventDefault();\n      if (onClick) {\n        onClick(event, id);\n      }\n    },\n    [onClick, id]\n  );\n\n  return (\n    <div\n      id={id}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.AVATAR, id)}\n      className={cx(styles.avatar, styles[size], className)}\n      style={sizeStyle}\n      data-vibe={ComponentVibeId.AVATAR}\n    >\n      <ClickableWrapper\n        isClickable={!!onClick}\n        clickableProps={{\n          onClick: clickHandler,\n          tabIndex: -1,\n          className: styles.clickableWrapper\n        }}\n      >\n        <Tooltip showTrigger={[\"focus\", \"mouseenter\"]} hideTrigger={[\"blur\", \"mouseleave\"]} {...overrideTooltipProps}>\n          <div\n            className={cx(\n              styles.circle,\n              getStyle(styles, camelCase(\"circle--\" + type)),\n              {\n                [styles.disabled]: disabled,\n                [styles.square]: square,\n                [styles.withoutBorder]: withoutBorder\n              },\n              avatarContentWrapperClassName\n            )}\n            aria-hidden={ariaHidden}\n            tabIndex={overrideTabIndex}\n            style={{ ...backgroundColorStyle }}\n          >\n            <AvatarContent\n              type={type}\n              size={size}\n              src={src}\n              icon={icon}\n              text={text}\n              aria-label={ariaLabel}\n              role={role}\n              textClassName={textClassName}\n            />\n          </div>\n          {badgesContainer}\n        </Tooltip>\n      </ClickableWrapper>\n    </div>\n  );\n};\n\nexport default Avatar;\n"
  },
  {
    "path": "packages/core/src/components/Avatar/Avatar.types.ts",
    "content": "export type AvatarType = \"img\" | \"icon\" | \"text\";\n\nexport type AvatarSize = \"xs\" | \"small\" | \"medium\" | \"large\";\n"
  },
  {
    "path": "packages/core/src/components/Avatar/AvatarBadge.module.scss",
    "content": "$avatar-badge-size-large: 19px;\n$avatar-badge-size-medium: 13px;\n$avatar-badge-size-small: 10px;\n\n.badgeLarge {\n  height: $avatar-badge-size-large;\n  width: $avatar-badge-size-large;\n}\n\n.badgeMedium {\n  height: $avatar-badge-size-medium;\n  width: $avatar-badge-size-medium;\n}\n\n.badgeSmall,\n.badgeXs {\n  height: $avatar-badge-size-small;\n  width: $avatar-badge-size-small;\n}\n"
  },
  {
    "path": "packages/core/src/components/Avatar/AvatarBadge.tsx",
    "content": "import React from \"react\";\nimport { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"@vibe/shared\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport { Icon, CustomSvgIcon } from \"@vibe/icon\";\nimport { type AvatarSize } from \"./Avatar.types\";\nimport styles from \"./AvatarBadge.module.scss\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport { ClickableWrapper } from \"@vibe/clickable\";\n\nexport interface AvatarBadgeProps extends VibeComponentProps {\n  /**\n   * The image source for the badge.\n   */\n  src?: string;\n  /**\n   * The icon displayed inside the badge.\n   */\n  icon?: SubIcon;\n  /**\n   * The tab index of the badge.\n   */\n  tabIndex?: number;\n  /**\n   * The size of the badge.\n   */\n  size?: AvatarSize;\n  /**\n   * Callback fired when the badge is clicked.\n   */\n  onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;\n}\n\nconst AvatarBadge = ({\n  src,\n  icon,\n  tabIndex = 0,\n  className,\n  size = \"large\",\n  id,\n  onClick,\n  \"data-testid\": dataTestId,\n  ...otherProps\n}: AvatarBadgeProps) => {\n  const classNames = cx(getStyle(styles, camelCase(\"badge--\" + size)), className);\n  const testId = dataTestId || getTestId(ComponentDefaultTestId.AVATAR_BADGE, id);\n  const isClickable = tabIndex === -1 && !!onClick;\n\n  if (icon) {\n    return isClickable ? (\n      <ClickableWrapper isClickable clickableProps={{ onClick, tabIndex }}>\n        <Icon icon={icon} className={classNames} {...otherProps} data-testid={testId} />\n      </ClickableWrapper>\n    ) : (\n      <Icon icon={icon} className={classNames} tabindex={tabIndex} {...otherProps} data-testid={testId} />\n    );\n  }\n\n  const svgIcon = <CustomSvgIcon src={src} className={classNames} {...otherProps} data-testid={testId} />;\n\n  return src ? (\n    isClickable ? (\n      <ClickableWrapper isClickable clickableProps={{ onClick, tabIndex }}>\n        {svgIcon}\n      </ClickableWrapper>\n    ) : (\n      svgIcon\n    )\n  ) : null;\n};\n\nexport default AvatarBadge;\n"
  },
  {
    "path": "packages/core/src/components/Avatar/AvatarConstants.scss",
    "content": "$avatar-size-large: 50px;\n$avatar-size-medium: 32px;\n$avatar-size-small: 28px;\n$avatar-size-xs: 20px;\n"
  },
  {
    "path": "packages/core/src/components/Avatar/AvatarContent.module.scss",
    "content": "@import \"../../styles/typography\";\n$avatar-icon-large: 28px;\n$avatar-icon-medium: 18px;\n$avatar-icon-small: 12px;\n$font-size-avatar-small: 12px;\n\n.contentImg {\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n}\n\n.contentText {\n  font-family: var(--font-family);\n  font-weight: 400;\n  line-height: 21px;\n  letter-spacing: -0.5px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n\n.contentTextLarge {\n  @include vibe-heading(\"h3\", \"normal\");\n  font-family: var(--font-family) !important;\n}\n\n.contentTextMedium {\n  @include vibe-text(text1, normal);\n  margin-top: 1px;\n}\n\n.contentTextSmall {\n  margin-top: 1px;\n  font-size: $font-size-avatar-small;\n}\n\n.contentTextXs {\n  margin-top: 1px;\n  @include vibe-text(text3, normal);\n}\n\n.contentIconLarge {\n  height: $avatar-icon-large;\n  width: $avatar-icon-large;\n}\n\n.contentIconMedium {\n  height: $avatar-icon-medium;\n  width: $avatar-icon-medium;\n}\n\n.contentIconSmall {\n  height: $avatar-icon-small;\n  width: $avatar-icon-small;\n}\n"
  },
  {
    "path": "packages/core/src/components/Avatar/AvatarContent.tsx",
    "content": "import { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"@vibe/shared\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React from \"react\";\nimport { type AvatarSize, type AvatarType } from \"./Avatar.types\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./AvatarContent.module.scss\";\n\nexport interface AvatarContentProps extends VibeComponentProps {\n  /**\n   * The image source when the type is set to `img`.\n   */\n  src?: string;\n  /**\n   * The type of content displayed inside the avatar.\n   */\n  type?: AvatarType;\n  /**\n   * The size of the avatar content.\n   */\n  size?: AvatarSize;\n  /**\n   * The ARIA role of the content.\n   */\n  role?: string;\n  /**\n   * The label of the content for accessibility.\n   */\n  \"aria-label\"?: string;\n  /**\n   * The icon displayed when the type is set to `icon`.\n   */\n  icon?: SubIcon;\n  /**\n   * Class name applied to the text content.\n   */\n  textClassName?: string;\n  /**\n   * The text displayed when the type is set to `text`.\n   */\n  text?: string;\n}\n\nconst AvatarContent = ({\n  type = \"text\",\n  src,\n  icon,\n  text,\n  \"aria-label\": ariaLabel,\n  role,\n  size = \"large\",\n  textClassName = \"\",\n  id,\n  \"data-testid\": dataTestId\n}: AvatarContentProps) => {\n  const className = cx(\n    getStyle(styles, camelCase(\"content_\" + type)),\n    getStyle(styles, camelCase(\"content_\" + type + \"--\" + size))\n  );\n  switch (type) {\n    case \"img\":\n      return (\n        <img\n          role={role}\n          alt={ariaLabel}\n          src={src}\n          className={className}\n          id={id}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.AVATAR_CONTENT, id)}\n        />\n      );\n    case \"icon\":\n      return (\n        <Icon\n          icon={icon}\n          aria-label={ariaLabel}\n          // role={role}\n          className={className}\n          aria-hidden={false}\n          id={id}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.AVATAR_CONTENT, id)}\n        />\n      );\n    case \"text\":\n      return (\n        <span\n          aria-label={ariaLabel}\n          role={role}\n          className={cx(className, textClassName)}\n          id={id}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.AVATAR_CONTENT, id)}\n        >\n          {text}\n        </span>\n      );\n    default:\n      return null;\n  }\n};\n\nexport default AvatarContent;\n"
  },
  {
    "path": "packages/core/src/components/Avatar/__tests__/Avatar.snapshot.test.tsx",
    "content": "import { vi, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport Avatar from \"../Avatar\";\nimport { WhatsNew } from \"@vibe/icons\";\n\nvi.mock(\"@vibe/icon\", () => ({\n  Icon: ({ icon }: { icon: string | null }) => <div data-testid=\"icon-mock\">{icon}</div>,\n  CustomSvgIcon: ({ icon }: { icon: string | null }) => <div data-testid=\"custom-icon-mock\">{icon}</div>\n}));\n\nconst IMG_SRC =\n  \"https://files.monday.com/use1/photos/16447897/small/16447897-Hadas_Farhi_photo_2020_10_04_10_14_06.png?1601806446\";\nconst BADGE_SRC = \"https://cdn7.monday.com/images/working-status/wfh.svg\";\n\ndescribe(\"Avatar renders correctly\", () => {\n  it(\"renders correctly with empty props\", () => {\n    const tree = renderer.create(<Avatar />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with image and text\", () => {\n    const tree = renderer.create(<Avatar src={IMG_SRC} text=\"Name\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with image\", () => {\n    const tree = renderer.create(<Avatar src={IMG_SRC} />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with not valid image\", () => {\n    const tree = renderer.create(<Avatar src=\"not valid src\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with text\", () => {\n    const tree = renderer.create(<Avatar />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly square avatar\", () => {\n    const tree = renderer.create(<Avatar square />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly an icon\", () => {\n    const tree = renderer.create(<Avatar icon={WhatsNew} />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with badges\", () => {\n    const tree = renderer\n      .create(\n        <Avatar\n          topRightBadgeProps={{ src: BADGE_SRC }}\n          topLeftBadgeProps={{ src: BADGE_SRC }}\n          bottomRightBadgeProps={{ src: BADGE_SRC }}\n          bottomLeftBadgeProps={{ src: BADGE_SRC }}\n        />\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with damaged src badges\", () => {\n    const tree = renderer\n      .create(\n        <Avatar\n          topRightBadgeProps={{ src: \"not valid\" }}\n          topLeftBadgeProps={{ src: \"not valid\" }}\n          bottomRightBadgeProps={{ src: \"not valid\" }}\n          bottomLeftBadgeProps={{ src: \"not valid\" }}\n        />\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly accessibility props\", () => {\n    const tree = renderer.create(<Avatar tabIndex={-1} aria-hidden />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Avatar/__tests__/Avatar.test.tsx",
    "content": "import { vi, afterEach, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { cleanup } from \"@testing-library/react-hooks\";\nimport { fireEvent, render } from \"@testing-library/react\";\nimport Avatar, { type AvatarProps } from \"../Avatar\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\n\nconst renderComponent = (props: AvatarProps) => {\n  return render(<Avatar {...props} />);\n};\n\ndescribe(\"avatar\", () => {\n  afterEach(() => {\n    cleanup();\n  });\n\n  it(\"onClick callback should be called after clicking the element\", () => {\n    const onClickCallback = vi.fn();\n    const { getByTestId } = renderComponent({ onClick: onClickCallback });\n    const component = getByTestId(ComponentDefaultTestId.CLICKABLE);\n    fireEvent.click(component);\n    expect(onClickCallback.mock.calls.length).toBe(1);\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Avatar/__tests__/__snapshots__/Avatar.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`Avatar renders correctly > renders correctly accessibility props 1`] = `\n<div\n  className=\"avatar large\"\n  data-testid=\"avatar\"\n  data-vibe=\"Avatar\"\n  style={{}}\n>\n  <div\n    aria-hidden={true}\n    className=\"circle circleText\"\n    style={\n      {\n        \"backgroundColor\": \"var(--color-chili-blue)\",\n      }\n    }\n    tabIndex={-1}\n  >\n    <span\n      className=\"contentText contentTextLarge\"\n      data-testid=\"avatar-content\"\n    />\n  </div>\n</div>\n`;\n\nexports[`Avatar renders correctly > renders correctly an icon 1`] = `\n<div\n  className=\"avatar large\"\n  data-testid=\"avatar\"\n  data-vibe=\"Avatar\"\n  style={{}}\n>\n  <div\n    aria-hidden={false}\n    className=\"circle circleText\"\n    style={\n      {\n        \"backgroundColor\": \"var(--color-chili-blue)\",\n      }\n    }\n    tabIndex={-1}\n  >\n    <span\n      className=\"contentText contentTextLarge\"\n      data-testid=\"avatar-content\"\n    />\n  </div>\n</div>\n`;\n\nexports[`Avatar renders correctly > renders correctly square avatar 1`] = `\n<div\n  className=\"avatar large\"\n  data-testid=\"avatar\"\n  data-vibe=\"Avatar\"\n  style={{}}\n>\n  <div\n    aria-hidden={false}\n    className=\"circle circleText square\"\n    style={\n      {\n        \"backgroundColor\": \"var(--color-chili-blue)\",\n      }\n    }\n    tabIndex={-1}\n  >\n    <span\n      className=\"contentText contentTextLarge\"\n      data-testid=\"avatar-content\"\n    />\n  </div>\n</div>\n`;\n\nexports[`Avatar renders correctly > renders correctly with badges 1`] = `\n<div\n  className=\"avatar large\"\n  data-testid=\"avatar\"\n  data-vibe=\"Avatar\"\n  style={{}}\n>\n  <div\n    aria-hidden={false}\n    className=\"circle circleText\"\n    style={\n      {\n        \"backgroundColor\": \"var(--color-chili-blue)\",\n      }\n    }\n    tabIndex={-1}\n  >\n    <span\n      className=\"contentText contentTextLarge\"\n      data-testid=\"avatar-content\"\n    />\n  </div>\n  <div\n    className=\"badges\"\n  >\n    <div\n      className=\"badge badgeTopLeft\"\n    >\n      <div\n        data-testid=\"custom-icon-mock\"\n      />\n    </div>\n    <div\n      className=\"badge badgeTopRight\"\n    >\n      <div\n        data-testid=\"custom-icon-mock\"\n      />\n    </div>\n    <div\n      className=\"badge badgeBottomLeft\"\n    >\n      <div\n        data-testid=\"custom-icon-mock\"\n      />\n    </div>\n    <div\n      className=\"badge badgeBottomRight\"\n    >\n      <div\n        data-testid=\"custom-icon-mock\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Avatar renders correctly > renders correctly with damaged src badges 1`] = `\n<div\n  className=\"avatar large\"\n  data-testid=\"avatar\"\n  data-vibe=\"Avatar\"\n  style={{}}\n>\n  <div\n    aria-hidden={false}\n    className=\"circle circleText\"\n    style={\n      {\n        \"backgroundColor\": \"var(--color-chili-blue)\",\n      }\n    }\n    tabIndex={-1}\n  >\n    <span\n      className=\"contentText contentTextLarge\"\n      data-testid=\"avatar-content\"\n    />\n  </div>\n  <div\n    className=\"badges\"\n  >\n    <div\n      className=\"badge badgeTopLeft\"\n    >\n      <div\n        data-testid=\"custom-icon-mock\"\n      />\n    </div>\n    <div\n      className=\"badge badgeTopRight\"\n    >\n      <div\n        data-testid=\"custom-icon-mock\"\n      />\n    </div>\n    <div\n      className=\"badge badgeBottomLeft\"\n    >\n      <div\n        data-testid=\"custom-icon-mock\"\n      />\n    </div>\n    <div\n      className=\"badge badgeBottomRight\"\n    >\n      <div\n        data-testid=\"custom-icon-mock\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Avatar renders correctly > renders correctly with empty props 1`] = `\n<div\n  className=\"avatar large\"\n  data-testid=\"avatar\"\n  data-vibe=\"Avatar\"\n  style={{}}\n>\n  <div\n    aria-hidden={false}\n    className=\"circle circleText\"\n    style={\n      {\n        \"backgroundColor\": \"var(--color-chili-blue)\",\n      }\n    }\n    tabIndex={-1}\n  >\n    <span\n      className=\"contentText contentTextLarge\"\n      data-testid=\"avatar-content\"\n    />\n  </div>\n</div>\n`;\n\nexports[`Avatar renders correctly > renders correctly with image 1`] = `\n<div\n  className=\"avatar large\"\n  data-testid=\"avatar\"\n  data-vibe=\"Avatar\"\n  style={{}}\n>\n  <div\n    aria-hidden={false}\n    className=\"circle circleText\"\n    style={{}}\n    tabIndex={-1}\n  >\n    <span\n      className=\"contentText contentTextLarge\"\n      data-testid=\"avatar-content\"\n    />\n  </div>\n</div>\n`;\n\nexports[`Avatar renders correctly > renders correctly with image and text 1`] = `\n<div\n  className=\"avatar large\"\n  data-testid=\"avatar\"\n  data-vibe=\"Avatar\"\n  style={{}}\n>\n  <div\n    aria-hidden={false}\n    className=\"circle circleText\"\n    style={{}}\n    tabIndex={-1}\n  >\n    <span\n      className=\"contentText contentTextLarge\"\n      data-testid=\"avatar-content\"\n    >\n      Name\n    </span>\n  </div>\n</div>\n`;\n\nexports[`Avatar renders correctly > renders correctly with not valid image 1`] = `\n<div\n  className=\"avatar large\"\n  data-testid=\"avatar\"\n  data-vibe=\"Avatar\"\n  style={{}}\n>\n  <div\n    aria-hidden={false}\n    className=\"circle circleText\"\n    style={{}}\n    tabIndex={-1}\n  >\n    <span\n      className=\"contentText contentTextLarge\"\n      data-testid=\"avatar-content\"\n    />\n  </div>\n</div>\n`;\n\nexports[`Avatar renders correctly > renders correctly with text 1`] = `\n<div\n  className=\"avatar large\"\n  data-testid=\"avatar\"\n  data-vibe=\"Avatar\"\n  style={{}}\n>\n  <div\n    aria-hidden={false}\n    className=\"circle circleText\"\n    style={\n      {\n        \"backgroundColor\": \"var(--color-chili-blue)\",\n      }\n    }\n    tabIndex={-1}\n  >\n    <span\n      className=\"contentText contentTextLarge\"\n      data-testid=\"avatar-content\"\n    />\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Avatar/index.ts",
    "content": "export { default as Avatar, type AvatarProps } from \"./Avatar\";\n\nexport * from \"./Avatar.types\";\n"
  },
  {
    "path": "packages/core/src/components/AvatarGroup/AvatarGroup.module.scss",
    "content": ".avatarGroupContainer {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  position: relative;\n  padding: 0;\n  margin: 0;\n}\n\n.avatarContainer {\n  margin-inline-start: calc(-1 * var(--space-8));\n}\n"
  },
  {
    "path": "packages/core/src/components/AvatarGroup/AvatarGroup.tsx",
    "content": "import React, { type ReactElement, useMemo } from \"react\";\nimport cx from \"classnames\";\nimport { type AvatarProps } from \"../Avatar/Avatar\";\nimport AvatarGroupCounter from \"./AvatarGroupCounter\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport { type AvatarSize, type AvatarType } from \"../Avatar/Avatar.types\";\nimport { avatarOnClick } from \"./AvatarGroupHelper\";\nimport { type TooltipProps } from \"@vibe/tooltip\";\nimport styles from \"./AvatarGroup.module.scss\";\nimport { type AvatarGroupCounterVisualProps } from \"./AvatarGroup.types\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface AvatarGroupProps extends VibeComponentProps {\n  /**\n   * Class name applied to each avatar.\n   */\n  avatarClassName?: string;\n  /**\n   * The avatars displayed in the group.\n   */\n  children?: ReactElement<AvatarProps> | ReactElement<AvatarProps>[];\n  /**\n   * The size of the avatars in the group.\n   */\n  size?: AvatarSize;\n  /**\n   * The type of the avatars in the group.\n   */\n  type?: AvatarType;\n  /**\n   * The maximum number of avatars displayed before showing a counter.\n   */\n  max?: number;\n  /**\n   * Props for customizing the counter display.\n   */\n  counterProps?: AvatarGroupCounterVisualProps;\n  /**\n   * Props passed to the Tooltip component. See full options in the [Tooltip documentation](https://vibe.monday.com/?path=/docs/components-tooltip--docs).\n   */\n  counterTooltipCustomProps?: Partial<TooltipProps>;\n  /**\n   * If true, the counter tooltip uses a virtualized list for performance optimization.\n   */\n  counterTooltipIsVirtualizedList?: boolean;\n  /**\n   * If true, the component is disabled and non-interactive.\n   */\n  disabled?: boolean;\n}\n\nconst AvatarGroup: React.FC<AvatarGroupProps> = ({\n  className,\n  avatarClassName,\n  id,\n  children,\n  size,\n  type,\n  max = 5,\n  counterProps,\n  counterTooltipCustomProps,\n  counterTooltipIsVirtualizedList = false,\n  disabled\n}) => {\n  const { displayAvatars, counterTooltipAvatars } = useMemo(() => {\n    if (!children) {\n      return {};\n    }\n    const childrenArray = Array.isArray(children) ? children : [children];\n    return {\n      displayAvatars: childrenArray.slice(0, max).map((avatar, index) => {\n        return React.cloneElement(avatar, {\n          key: index,\n          ...avatar?.props,\n          size: size || avatar?.props?.size,\n          type: type || avatar?.props?.type,\n          className: cx(styles.avatarContainer, avatarClassName),\n          onClick: (event: React.MouseEvent | React.KeyboardEvent) => avatarOnClick(event, avatar.props),\n          disabled\n        });\n      }),\n      counterTooltipAvatars: childrenArray.slice(max)\n    };\n  }, [avatarClassName, children, disabled, max, size, type]);\n\n  if (!children) {\n    return null;\n  }\n\n  return (\n    <div className={cx(styles.avatarGroupContainer, className)} id={id} data-vibe={ComponentVibeId.AVATAR_GROUP}>\n      {displayAvatars}\n      <AvatarGroupCounter\n        counterTooltipAvatars={counterTooltipAvatars}\n        counterProps={counterProps}\n        counterTooltipCustomProps={counterTooltipCustomProps}\n        counterTooltipIsVirtualizedList={counterTooltipIsVirtualizedList}\n        size={size}\n        type={type}\n        disabled={disabled}\n      />\n    </div>\n  );\n};\n\nexport default AvatarGroup;\n"
  },
  {
    "path": "packages/core/src/components/AvatarGroup/AvatarGroup.types.ts",
    "content": "import { type CounterColor } from \"../Counter/Counter.types\";\n\nexport type AvatarGroupCounterVisualProps = {\n  color?: Extract<CounterColor, \"light\" | \"dark\">;\n  count?: number;\n  prefix?: string;\n  maxDigits?: number;\n  ariaLabelItemsName?: string;\n  noAnimation?: boolean;\n  tabIndex?: number;\n  /**\n   * Relevant only for when AvatarGroup contains a clickable avatar\n   */\n  dialogContainerSelector?: string;\n};\n"
  },
  {
    "path": "packages/core/src/components/AvatarGroup/AvatarGroupConstants.ts",
    "content": "export const AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY = 200;\nexport const AVATAR_GROUP_COUNTER_AVATAR_SIZE = 22;\n"
  },
  {
    "path": "packages/core/src/components/AvatarGroup/AvatarGroupCounter.module.scss",
    "content": "@use \"sass:math\";\n@import \"~@vibe/style/dist/mixins\";\n@import \"../../components/Avatar/AvatarConstants\";\n\n.counterContainer.counterContainer {\n  background: var(--ui-background-color);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-inline-start: calc(-1 * var(--space-8));\n  z-index: 1;\n  border: 1px solid var(--primary-background-color);\n\n  &:focus-visible,\n  &.focus-visible { /* stylelint-disable-line selector-class-pattern */\n    outline: none;\n    @include focus-style(50%);\n  }\n\n  @mixin counterSize($size) {\n    height: $size;\n    min-width: $size;\n    border-radius: math.div($size, 2);\n  }\n  &.xs {\n    @include counterSize($avatar-size-xs);\n    padding: 0 1px;\n  }\n  &.small {\n    @include counterSize($avatar-size-small);\n    padding: 0 1px;\n  }\n  &.medium {\n    @include counterSize($avatar-size-medium);\n    padding: 0 2px;\n  }\n  &.large {\n    @include counterSize($avatar-size-large);\n    padding: 0 var(--space-4);\n  }\n\n  &.primary {\n    color: var(--text-color-on-primary);\n    background-color: var(--primary-color);\n  }\n  &.dark {\n    color: var(--text-color-on-inverted);\n    background-color: var(--inverted-color-background);\n  }\n  &.negative {\n    color: var(--text-color-on-primary);\n    background-color: var(--negative-color);\n  }\n  &.light {\n    color: var(--primary-text-color);\n    background-color: var(--ui-background-color);\n  }\n\n  .disabled,\n  &.disabled {\n    background-color: var(--disabled-background-color);\n    color: var(--disabled-text-color);\n  }\n}\n\n.menu {\n  max-height: 300px;\n  overflow-y: auto;\n  overflow-x: hidden;\n  @include scroller();\n}\n"
  },
  {
    "path": "packages/core/src/components/AvatarGroup/AvatarGroupCounter.tsx",
    "content": "import React, { type ReactElement, useCallback, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { type AvatarProps } from \"../Avatar/Avatar\";\nimport Counter from \"../Counter/Counter\";\nimport MenuButton from \"../MenuButton/MenuButton\";\nimport Menu from \"../Menu/Menu/Menu\";\nimport AvatarMenuItem from \"../Menu/MenuItem/AvatarMenuItem\";\nimport AvatarGroupCounterTooltipContainer from \"./AvatarGroupCounterTooltipContainer\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport { type AvatarSize, type AvatarType } from \"../Avatar/Avatar.types\";\nimport { getStyle } from \"@vibe/shared\";\nimport { type AvatarGroupCounterVisualProps } from \"./AvatarGroup.types\";\nimport { type TooltipProps } from \"@vibe/tooltip\";\nimport { avatarOnClick } from \"./AvatarGroupHelper\";\nimport styles from \"./AvatarGroupCounter.module.scss\";\nimport { AVATAR_GROUP_COUNTER_AVATAR_SIZE } from \"./AvatarGroupConstants\";\n\nexport interface AvatarGroupCounterProps extends VibeComponentProps {\n  /**\n   * The list of avatars hidden behind the counter.\n   */\n  counterTooltipAvatars?: ReactElement<AvatarProps>[];\n  /**\n   * Props for customizing the counter appearance.\n   */\n  counterProps?: AvatarGroupCounterVisualProps;\n  /**\n   * Props for customizing the counter tooltip.\n   */\n  counterTooltipCustomProps?: Partial<TooltipProps>;\n  /**\n   * If true, the counter tooltip uses a virtualized list for performance optimization.\n   */\n  counterTooltipIsVirtualizedList?: boolean;\n  /**\n   * The size of the counter.\n   */\n  size?: AvatarSize;\n  /**\n   * The type of the avatars in the counter.\n   */\n  type?: AvatarType;\n  /**\n   * The label of the counter for accessibility.\n   */\n  counterAriaLabel?: string;\n  /**\n   * If true, the counter is disabled and non-interactive.\n   */\n  disabled?: boolean;\n}\n\nconst AvatarGroupCounter: React.FC<AvatarGroupCounterProps> = ({\n  counterTooltipAvatars = [],\n  counterProps,\n  counterTooltipCustomProps,\n  counterTooltipIsVirtualizedList = false,\n  size = \"medium\",\n  type,\n  counterAriaLabel,\n  disabled\n}: AvatarGroupCounterProps) => {\n  const {\n    color: counterColor = \"light\",\n    count: counterValue = counterTooltipAvatars.length,\n    prefix: counterPrefix = \"+\",\n    maxDigits: counterMaxDigits = 3,\n    ariaLabelItemsName: counterAriaLabelItemsName = \"items\",\n    noAnimation,\n    dialogContainerSelector,\n    tabIndex: counterTabIndex = 0\n  } = counterProps || {};\n\n  const counterSizeStyle = getStyle(styles, size?.toString());\n  const counterColorStyle = styles[counterColor];\n\n  const focusPrevPlaceholderRef = useRef(null);\n  const focusNextPlaceholderRef = useRef(null);\n  const counterContainerRef = useRef(null);\n  const counterComponent = useCallback(() => {\n    return (\n      <Counter\n        color={counterColor}\n        count={counterValue}\n        prefix={counterPrefix}\n        maxDigits={counterMaxDigits}\n        aria-label={counterAriaLabel ? counterAriaLabel : `Tab for more ${counterAriaLabelItemsName}`}\n        noAnimation={noAnimation}\n        counterClassName={cx({ [styles.disabled]: disabled })}\n        size={size === \"xs\" ? \"xs\" : undefined}\n      />\n    );\n  }, [\n    counterAriaLabel,\n    counterAriaLabelItemsName,\n    counterColor,\n    counterMaxDigits,\n    counterPrefix,\n    counterValue,\n    disabled,\n    noAnimation\n  ]);\n\n  if (!counterTooltipAvatars.length && !counterValue) {\n    return null;\n  }\n\n  if (disabled) {\n    return (\n      <div\n        ref={counterContainerRef}\n        className={cx(styles.counterContainer, styles.disabled, counterSizeStyle, counterColorStyle)}\n      >\n        {counterComponent()}\n      </div>\n    );\n  }\n\n  const areAvatarsClickable = counterTooltipAvatars.some(a => a.props?.onClick);\n  if (areAvatarsClickable) {\n    return (\n      <MenuButton\n        component={counterComponent}\n        zIndex={1}\n        className={cx(styles.counterContainer, counterSizeStyle, counterColorStyle)}\n        aria-label={counterAriaLabel ? counterAriaLabel : `${counterValue} additional ${counterAriaLabelItemsName}`}\n        dialogContainerSelector={dialogContainerSelector}\n      >\n        <Menu id=\"menu\" size=\"medium\" className={styles.menu} focusItemIndexOnMount={0}>\n          {counterTooltipAvatars.map((avatar, index) => {\n            return (\n              // eslint-disable-next-line react/jsx-key\n              <AvatarMenuItem\n                menuItemProps={{\n                  key: avatar.props?.id || String(index),\n                  title: (avatar.props?.tooltipProps?.content as string) || avatar?.props?.[\"aria-label\"],\n                  onClick: (event: React.MouseEvent | React.KeyboardEvent) => avatarOnClick(event, avatar.props)\n                }}\n                avatarProps={{\n                  ...avatar.props,\n                  customSize: AVATAR_GROUP_COUNTER_AVATAR_SIZE,\n                  \"aria-label\": \"\",\n                  tabIndex: -1\n                }}\n              />\n            );\n          })}\n        </Menu>\n      </MenuButton>\n    );\n  }\n\n  return (\n    <AvatarGroupCounterTooltipContainer\n      focusPrevPlaceholderRef={focusPrevPlaceholderRef}\n      focusNextPlaceholderRef={focusNextPlaceholderRef}\n      counterContainerRef={counterContainerRef}\n      avatars={counterTooltipAvatars}\n      counterTooltipCustomProps={counterTooltipCustomProps}\n      counterTooltipIsVirtualizedList={counterTooltipIsVirtualizedList}\n      type={type}\n    >\n      <div tabIndex={-1} ref={focusPrevPlaceholderRef} />\n      {/* eslint-disable jsx-a11y/no-noninteractive-tabindex */}\n      <div\n        tabIndex={counterTabIndex}\n        className={cx(styles.counterContainer, counterSizeStyle, counterColorStyle)}\n        ref={counterContainerRef}\n      >\n        {/* eslint-enable jsx-a11y/no-noninteractive-tabindex */}\n        {counterComponent()}\n        <div tabIndex={-1} ref={focusNextPlaceholderRef} />\n      </div>\n    </AvatarGroupCounterTooltipContainer>\n  );\n};\n\nexport default AvatarGroupCounter;\n"
  },
  {
    "path": "packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipContainer.tsx",
    "content": "import React, { type ReactElement, type RefObject, useCallback, useMemo, useRef, useState } from \"react\";\nimport { Tooltip, type TooltipProps } from \"@vibe/tooltip\";\nimport { type AvatarProps } from \"../Avatar/Avatar\";\nimport AvatarGroupCounterTooltipContent from \"./AvatarGroupCounterTooltipContent\";\nimport { useTooltipContentTabNavigation } from \"./AvatarGroupCounterTooltipHelper\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport { type AvatarType } from \"../Avatar/Avatar.types\";\nimport { AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY } from \"./AvatarGroupConstants\";\n\nexport interface AvatarGroupCounterTooltipContainerProps extends VibeComponentProps {\n  /**\n   * The type of avatars displayed in the tooltip.\n   */\n  type?: AvatarType;\n  /**\n   * The counter element and focus placeholders.\n   */\n  children?: ReactElement[];\n  /**\n   * The list of avatars displayed inside the tooltip.\n   */\n  avatars?: ReactElement<AvatarProps>[];\n  /**\n   * Props passed to the Tooltip component. See full options in the [Tooltip documentation](https://vibe.monday.com/?path=/docs/components-tooltip--docs).\n   */\n  counterTooltipCustomProps?: Partial<TooltipProps>;\n  /**\n   * If true, the tooltip uses a virtualized list for performance optimization.\n   */\n  counterTooltipIsVirtualizedList?: boolean;\n  /**\n   * Ref for the element before the tooltip content, used for keyboard navigation.\n   */\n  focusPrevPlaceholderRef?: RefObject<HTMLDivElement>;\n  /**\n   * Ref for the element after the tooltip content, used for keyboard navigation.\n   */\n  focusNextPlaceholderRef?: RefObject<HTMLDivElement>;\n  /**\n   * Ref for the counter container element.\n   */\n  counterContainerRef?: RefObject<HTMLDivElement>;\n}\n\nconst AvatarGroupCounterTooltipContainer: React.FC<AvatarGroupCounterTooltipContainerProps> = ({\n  focusPrevPlaceholderRef,\n  focusNextPlaceholderRef,\n  counterContainerRef,\n  children = [],\n  avatars = [],\n  type,\n  className,\n  counterTooltipCustomProps,\n  counterTooltipIsVirtualizedList = false\n}) => {\n  const [isKeyboardTooltipVisible, setIsKeyboardTooltipVisible] = useState(false);\n  const tooltipContentContainerRef = useRef(null);\n  const tooltipContent = useMemo(\n    () =>\n      counterTooltipCustomProps?.content || (\n        <AvatarGroupCounterTooltipContent\n          avatars={avatars}\n          type={type}\n          className={className}\n          isVirtualizedList={counterTooltipIsVirtualizedList}\n          tooltipContentContainerRef={tooltipContentContainerRef}\n        />\n      ),\n    [avatars, className, counterTooltipCustomProps?.content, counterTooltipIsVirtualizedList, type]\n  );\n\n  useTooltipContentTabNavigation({\n    counterContainerRef,\n    tooltipContentContainerRef,\n    focusPrevPlaceholderRef,\n    focusNextPlaceholderRef,\n    setIsKeyboardTooltipVisible,\n    isKeyboardTooltipVisible\n  });\n\n  // Tooltip props\n  const onHide = useCallback(() => {\n    setIsKeyboardTooltipVisible(false);\n  }, []);\n\n  if (!avatars?.length && !counterTooltipCustomProps?.content) {\n    return <>{children}</>;\n  }\n  return (\n    <Tooltip\n      open={isKeyboardTooltipVisible}\n      hideDelay={AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY}\n      showTrigger={[\"mouseenter\"]}\n      hideTrigger={[\"mouseleave\"]}\n      onTooltipHide={onHide}\n      {...(counterTooltipCustomProps || {})}\n      content={tooltipContent}\n    >\n      {children}\n    </Tooltip>\n  );\n};\n\nexport default AvatarGroupCounterTooltipContainer;\n"
  },
  {
    "path": "packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipContent.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n.tooltipAvatarItemTitle {\n  white-space: nowrap;\n}\n\n.tooltipAvatarItemAvatar {\n  flex-shrink: 0;\n}\n\n.tooltipContainer {\n  max-height: 300px;\n  padding-inline-end: var(--space-16);\n  align-items: flex-start !important;\n  overflow-x: visible;\n  overflow-y: auto;\n  margin-top: var(--space-8);\n  &:focus,\n  &:focus-visible,\n  &.focus-visible { /* stylelint-disable-line selector-class-pattern */\n    outline: none;\n  }\n}\n\n.tooltipGridContainer {\n  max-width: 160px;\n  padding-inline-end: 0;\n}\n.scrollableContainer {\n  @include scroller();\n}\n"
  },
  {
    "path": "packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipContent.tsx",
    "content": "import React, { type ReactElement, type Ref, useCallback, useMemo } from \"react\";\nimport cx from \"classnames\";\nimport { Flex, type FlexProps } from \"@vibe/layout\";\nimport { type AvatarProps } from \"../Avatar/Avatar\";\nimport AvatarGroupCounterTooltipContentVirtualizedList from \"./AvatarGroupCounterTooltipContentVirtualizedList\";\nimport { avatarRenderer } from \"./AvatarGroupCounterTooltipHelper\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport { type AvatarType } from \"../Avatar/Avatar.types\";\nimport styles from \"./AvatarGroupCounterTooltipContent.module.scss\";\n\nexport interface AvatarGroupCounterTooltipContentProps extends VibeComponentProps {\n  /**\n   * The type of avatars displayed inside the tooltip.\n   */\n  type?: AvatarType;\n  /**\n   * The avatars shown in the tooltip.\n   */\n  avatars?: ReactElement<AvatarProps>[];\n  /**\n   * If true, the tooltip uses a virtualized list for performance optimization.\n   */\n  isVirtualizedList?: boolean;\n  /**\n   * Ref for the tooltip content container.\n   */\n  tooltipContentContainerRef?: Ref<HTMLDivElement>;\n}\n\nconst AvatarGroupCounterTooltipContent: React.FC<AvatarGroupCounterTooltipContentProps> = ({\n  avatars = [],\n  type,\n  className,\n  isVirtualizedList = false,\n  tooltipContentContainerRef\n}) => {\n  const getTooltipContent = useCallback((avatarProps: AvatarProps) => {\n    return avatarProps?.tooltipProps?.content || avatarProps?.[\"aria-label\"];\n  }, []);\n\n  const { avatarItems, displayAsGrid, tooltipContainerAriaLabel } = useMemo(() => {\n    const avatarItems = avatars.map(avatar => ({\n      value: { ...avatar.props, tooltipContent: getTooltipContent(avatar.props) }\n    }));\n    const displayAsGrid = !avatarItems.some(item => item.value.tooltipContent);\n    const tooltipContainerAriaLabel = !displayAsGrid\n      ? avatarItems.map(item => item.value.tooltipContent).join(\",\")\n      : undefined;\n    return { avatarItems, displayAsGrid, tooltipContainerAriaLabel };\n  }, [avatars, getTooltipContent]);\n\n  const renderedItems = useMemo(\n    () => avatarItems.map((item, index) => avatarRenderer(item, index, undefined, type, displayAsGrid)),\n    [avatarItems, displayAsGrid, type]\n  );\n\n  if (isVirtualizedList) {\n    return (\n      <AvatarGroupCounterTooltipContentVirtualizedList\n        avatarRenderer={avatarRenderer}\n        tooltipContentContainerRef={tooltipContentContainerRef}\n        tooltipContainerAriaLabel={tooltipContainerAriaLabel}\n        avatarItems={avatarItems}\n        type={type}\n      />\n    );\n  }\n\n  const flexProps = {\n    ref: tooltipContentContainerRef,\n    tabIndex: -1,\n    role: \"treegrid\",\n    \"aria-label\": tooltipContainerAriaLabel,\n    className: displayAsGrid\n      ? cx(styles.scrollableContainer, styles.tooltipContainer, styles.tooltipGridContainer, className)\n      : cx(styles.scrollableContainer, styles.tooltipContainer, className),\n    direction: displayAsGrid ? \"row\" : \"column\",\n    gap: displayAsGrid ? \"xs\" : \"small\",\n    wrap: displayAsGrid\n  };\n\n  return <Flex {...(flexProps as FlexProps)}>{renderedItems}</Flex>;\n};\n\nexport default AvatarGroupCounterTooltipContent;\n"
  },
  {
    "path": "packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipContentVirtualizedList.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n.scrollableContainer {\n  @include scroller();\n}\n\n.virtualizedTooltipContainer {\n  align-items: flex-start !important;\n  display: flex;\n  overflow-y: hidden;\n  overflow-x: visible;\n  &:focus,\n  &:focus-visible,\n  &.focus-visible { /* stylelint-disable-line selector-class-pattern */\n    outline: none;\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipContentVirtualizedList.tsx",
    "content": "import React, { type CSSProperties, type ReactElement, type Ref, useMemo } from \"react\";\nimport { VirtualizedList, type VirtualizedListItem } from \"../VirtualizedList\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport { type AvatarType } from \"../Avatar/Avatar.types\";\nimport { type AvatarProps } from \"../Avatar/Avatar\";\nimport { type ElementContent } from \"../../types\";\nimport styles from \"./AvatarGroupCounterTooltipContentVirtualizedList.module.scss\";\n\nconst LIST_OPTIONS = Object.freeze({\n  maxItemsWithoutScroll: 10,\n  itemLineHeight: 34,\n  itemLineWidth: 150\n});\n\nexport type AvatarItem = {\n  value: AvatarProps & { tooltipContent: ElementContent };\n};\n\nexport interface AvatarGroupCounterTooltipContentVirtualizedListProps extends VibeComponentProps {\n  /**\n   * The list of avatars displayed in the virtualized tooltip.\n   */\n  avatarItems?: AvatarItem[];\n  /**\n   * Function to render each avatar item.\n   */\n  avatarRenderer?: (\n    item: AvatarItem,\n    index: number,\n    style: CSSProperties,\n    type: AvatarType,\n    displayAsGrid: boolean\n  ) => ReactElement;\n  /**\n   * The ARIA label of the tooltip container.\n   */\n  tooltipContainerAriaLabel?: string;\n  /**\n   * Ref for the tooltip content container.\n   */\n  tooltipContentContainerRef?: Ref<HTMLDivElement>;\n  /**\n   * The type of avatars in the tooltip.\n   */\n  type?: AvatarType;\n}\n\nconst AvatarGroupCounterTooltipContentVirtualizedList: React.FC<\n  AvatarGroupCounterTooltipContentVirtualizedListProps\n> = ({ avatarItems = [], avatarRenderer, type, tooltipContainerAriaLabel, tooltipContentContainerRef }) => {\n  const virtualizedItems: VirtualizedListItem[] = useMemo(\n    () => avatarItems.map(item => ({ value: item, height: LIST_OPTIONS.itemLineHeight } as VirtualizedListItem)),\n    [avatarItems]\n  );\n\n  const minCount = Math.min(avatarItems.length, LIST_OPTIONS.maxItemsWithoutScroll);\n  const virtualizedListStyle = {\n    height: LIST_OPTIONS.itemLineHeight * minCount,\n    minWidth: LIST_OPTIONS.itemLineWidth\n  };\n\n  return (\n    <div\n      className={styles.virtualizedTooltipContainer}\n      aria-label={tooltipContainerAriaLabel}\n      ref={tooltipContentContainerRef}\n      tabIndex={-1}\n    >\n      <VirtualizedList\n        items={virtualizedItems}\n        itemRenderer={(item: VirtualizedListItem, index: number, style: CSSProperties) =>\n          avatarRenderer(item.value as AvatarItem, index, style, type, false)\n        }\n        role=\"treegrid\"\n        scrollableClassName={styles.scrollableContainer}\n        getItemId={(item: VirtualizedListItem, index: number) => String(index)}\n        style={virtualizedListStyle}\n      />\n    </div>\n  );\n};\n\nexport default AvatarGroupCounterTooltipContentVirtualizedList;\n"
  },
  {
    "path": "packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipHelper.tsx",
    "content": "import React, { type CSSProperties, type RefObject, useCallback } from \"react\";\nimport useKeyEvent from \"../../hooks/useKeyEvent\";\nimport { Flex } from \"@vibe/layout\";\nimport Avatar, { type AvatarProps } from \"../Avatar/Avatar\";\nimport { ClickableWrapper } from \"@vibe/clickable\";\nimport avatarGroupCounterTooltipContentStyles from \"./AvatarGroupCounterTooltipContent.module.scss\";\nimport useEventListener from \"../../hooks/useEventListener\";\nimport useListenFocusTriggers from \"../../hooks/useListenFocusTriggers\";\nimport { type AvatarType } from \"../Avatar\";\nimport { type ElementContent } from \"../../types\";\nimport { AVATAR_GROUP_COUNTER_AVATAR_SIZE, AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY } from \"./AvatarGroupConstants\";\nimport { keyCodes } from \"../../constants\";\n\nconst TAB = [keyCodes.TAB];\nconst ESC = [keyCodes.ESCAPE];\n\nexport function useTooltipContentTabNavigation({\n  counterContainerRef = undefined,\n  tooltipContentContainerRef,\n  focusPrevPlaceholderRef,\n  focusNextPlaceholderRef,\n  isKeyboardTooltipVisible,\n  setIsKeyboardTooltipVisible\n}: {\n  counterContainerRef: RefObject<HTMLDivElement>;\n  tooltipContentContainerRef: RefObject<HTMLElement>;\n  focusPrevPlaceholderRef: RefObject<HTMLDivElement>;\n  focusNextPlaceholderRef: RefObject<HTMLDivElement>;\n  isKeyboardTooltipVisible: boolean;\n  setIsKeyboardTooltipVisible: (value: boolean) => void;\n}) {\n  const showKeyboardTooltip = useCallback(() => {\n    if (!isKeyboardTooltipVisible) {\n      // temp hack for display tooltip with delay after timeout because refactoring the tooltip with open mechanism is out of scope\n      setTimeout(() => setIsKeyboardTooltipVisible(true), AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY);\n    }\n  }, [isKeyboardTooltipVisible, setIsKeyboardTooltipVisible]);\n\n  const hideKeyboardTooltip = useCallback(() => {\n    if (isKeyboardTooltipVisible) setIsKeyboardTooltipVisible(false);\n  }, [isKeyboardTooltipVisible, setIsKeyboardTooltipVisible]);\n\n  // Open tooltip manually when keyboard focusing on counter\n  useListenFocusTriggers({\n    ref: counterContainerRef,\n    onFocusByKeyboard: showKeyboardTooltip\n  });\n\n  useEventListener({\n    eventName: \"blur\",\n    ref: tooltipContentContainerRef,\n    callback: hideKeyboardTooltip\n  });\n\n  //Move focus to content by keyboard\n  useKeyEvent({\n    keys: TAB,\n    ref: counterContainerRef,\n    withoutAnyModifier: true,\n    preventDefault: true,\n    callback: useCallback(() => {\n      if (isKeyboardTooltipVisible) tooltipContentContainerRef?.current && tooltipContentContainerRef.current.focus();\n    }, [isKeyboardTooltipVisible, tooltipContentContainerRef])\n  });\n\n  // Close tooltip by keyboard\n  useKeyEvent({\n    keys: TAB,\n    modifier: useKeyEvent.modifiers.SHIFT,\n    ref: counterContainerRef,\n    callback: hideKeyboardTooltip\n  });\n  useKeyEvent({\n    keys: TAB,\n    ref: tooltipContentContainerRef,\n    withoutAnyModifier: true,\n    callback: useCallback(() => {\n      // We are not preventing default behaviour here and that's why after pressing tab and after moving focus to here\n      // the browser will move the focus to the next element in the focus order.\n      focusNextPlaceholderRef?.current && focusNextPlaceholderRef.current.focus();\n      if (isKeyboardTooltipVisible) setIsKeyboardTooltipVisible(false);\n    }, [focusNextPlaceholderRef, isKeyboardTooltipVisible, setIsKeyboardTooltipVisible])\n  });\n  useKeyEvent({\n    keys: TAB,\n    ref: tooltipContentContainerRef,\n    modifier: useKeyEvent.modifiers.SHIFT,\n    callback: useCallback(() => {\n      // We are not preventing default behaviour here and that's why after pressing tab and after moving focus to here\n      // the browser will move the focus to the next element in the focus order.\n      focusPrevPlaceholderRef?.current && focusPrevPlaceholderRef.current.focus();\n      if (isKeyboardTooltipVisible) setIsKeyboardTooltipVisible(false);\n    }, [focusPrevPlaceholderRef, isKeyboardTooltipVisible, setIsKeyboardTooltipVisible])\n  });\n  useKeyEvent({\n    keys: ESC,\n    ref: tooltipContentContainerRef,\n    callback: useCallback(() => {\n      counterContainerRef?.current && counterContainerRef.current.focus();\n      if (isKeyboardTooltipVisible) setIsKeyboardTooltipVisible(false);\n    }, [counterContainerRef, isKeyboardTooltipVisible, setIsKeyboardTooltipVisible])\n  });\n  useKeyEvent({\n    keys: ESC,\n    ref: counterContainerRef,\n    callback: hideKeyboardTooltip\n  });\n\n  // Close tooltip when moving focus to next element\n  useEventListener({\n    eventName: \"focus\",\n    ref: focusNextPlaceholderRef,\n    callback: hideKeyboardTooltip\n  });\n}\n\nexport const avatarRenderer = (\n  item: { value: AvatarProps & { tooltipContent: ElementContent } },\n  index: number,\n  style: CSSProperties,\n  type: AvatarType,\n  displayAsGrid: boolean\n) => {\n  const avatarProps = item.value;\n  const overrideStyle: CSSProperties = { ...style, width: displayAsGrid ? undefined : \"100%\" };\n  const labelId = `tooltip-item-${index}-label`;\n\n  return (\n    <ClickableWrapper\n      key={index}\n      isClickable={!!avatarProps?.onClick}\n      clickableProps={{ onClick: event => avatarProps.onClick(event, avatarProps.id), tabIndex: -1 }}\n    >\n      <div style={overrideStyle}>\n        <Flex direction=\"row\" gap=\"xs\" aria-labelledby={labelId}>\n          <Avatar\n            {...avatarProps}\n            tooltipProps={undefined}\n            aria-label={\"\"}\n            customSize={AVATAR_GROUP_COUNTER_AVATAR_SIZE}\n            type={type || avatarProps?.type}\n            tabIndex={-1}\n            size=\"small\"\n            className={avatarGroupCounterTooltipContentStyles.tooltipAvatarItemAvatar}\n          />\n          {!displayAsGrid && (\n            <div id={labelId} className={avatarGroupCounterTooltipContentStyles.tooltipAvatarItemTitle}>\n              {avatarProps.tooltipContent}\n            </div>\n          )}\n        </Flex>\n      </div>\n    </ClickableWrapper>\n  );\n};\n"
  },
  {
    "path": "packages/core/src/components/AvatarGroup/AvatarGroupHelper.ts",
    "content": "import type React from \"react\";\nimport { type AvatarProps } from \"../Avatar/Avatar\";\n\nexport const avatarOnClick = (event: React.MouseEvent | React.KeyboardEvent, avatarProps: AvatarProps) => {\n  avatarProps?.onClick?.(event, avatarProps.id);\n};\n"
  },
  {
    "path": "packages/core/src/components/AvatarGroup/__tests__/AvatarGroup.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport AvatarGroup from \"../AvatarGroup\";\nimport Avatar from \"../../Avatar/Avatar\";\n\n// Component depends on Avatar, Counter and Tooltip components\ndescribe(\"AvatarGroup renders correctly\", () => {\n  it(\"with empty props\", () => {\n    const tree = renderer.create(<AvatarGroup />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with dummy class name\", () => {\n    const tree = renderer\n      .create(\n        <AvatarGroup className=\"dummy-class-name\">\n          <Avatar text=\"P1\" />\n        </AvatarGroup>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with counter\", () => {\n    const tree = renderer\n      .create(\n        <AvatarGroup max={1}>\n          <Avatar text=\"P1\" />\n          <Avatar text=\"P2\" />\n        </AvatarGroup>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly without counter\", () => {\n    const tree = renderer\n      .create(\n        <AvatarGroup max={2}>\n          <Avatar text=\"P1\" />\n          <Avatar text=\"P2\" />\n        </AvatarGroup>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with custom counter value\", () => {\n    const tree = renderer\n      .create(\n        <AvatarGroup max={2} counterValue={13}>\n          <Avatar text=\"P1\" />\n          <Avatar text=\"P2\" />\n        </AvatarGroup>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with large size\", () => {\n    const tree = renderer\n      .create(\n        <AvatarGroup size=\"large\" max={1}>\n          <Avatar text=\"P1\" />\n          <Avatar text=\"P2\" />\n        </AvatarGroup>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n  it(\"renders correctly with xs size\", () => {\n    const tree = renderer\n      .create(\n        <AvatarGroup size=\"xs\" max={1}>\n          <Avatar text=\"P1\" />\n          <Avatar text=\"P2\" />\n        </AvatarGroup>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with counter aria-label default-tooltip\", () => {\n    const tree = renderer\n      .create(\n        <AvatarGroup max={1}>\n          <Avatar text=\"P1\" aria-label=\"Person 1\" />\n          <Avatar text=\"P2\" aria-label=\"Person 2\" />\n        </AvatarGroup>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with counter default-tooltip\", () => {\n    const tree = renderer\n      .create(\n        <AvatarGroup max={1}>\n          <Avatar text=\"P1\" tooltipProps={{ content: \"Person 1\" }} />\n          <Avatar text=\"P2\" tooltipProps={{ content: \"Person 2\" }} />\n        </AvatarGroup>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with custom counter tooltip\", () => {\n    const tree = renderer\n      .create(\n        <AvatarGroup counterTooltipCustomProps={{ content: \"Custom tooltip content\" }} max={1}>\n          <Avatar text=\"P1\" />\n          <Avatar text=\"P2\" />\n        </AvatarGroup>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/AvatarGroup/__tests__/__snapshots__/AvatarGroup.snapshot.test.jsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`AvatarGroup renders correctly > renders correctly with counter 1`] = `\n<div\n  className=\"avatarGroupContainer\"\n  data-vibe=\"AvatarGroup\"\n>\n  <div\n    className=\"avatar large avatarContainer\"\n    data-testid=\"avatar\"\n    data-vibe=\"Avatar\"\n    style={{}}\n  >\n    <div\n      className=\"clickable clickableWrapper disableTextSelection\"\n      data-testid=\"clickable\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      tabIndex={-1}\n    >\n      <div\n        aria-hidden={false}\n        className=\"circle circleText\"\n        style={\n          {\n            \"backgroundColor\": \"var(--color-chili-blue)\",\n          }\n        }\n        tabIndex={0}\n      >\n        <span\n          className=\"contentText contentTextLarge\"\n          data-testid=\"avatar-content\"\n        >\n          P1\n        </span>\n      </div>\n    </div>\n  </div>\n  <div\n    className=\"\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    tabIndex={-1}\n  />\n  <div\n    className=\"counterContainer medium light\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    tabIndex={0}\n  >\n    <span\n      aria-label=\"Tab for more items 1\"\n      aria-labelledby=\"\"\n      data-vibe=\"Counter\"\n      onMouseDown={[Function]}\n    >\n      <div\n        aria-label=\"1\"\n        className=\"counter sizeLarge kindFill colorLight\"\n      >\n        <span\n          data-testid=\"counter\"\n          id=\"counter\"\n        >\n          +1\n        </span>\n      </div>\n    </span>\n    <div\n      tabIndex={-1}\n    />\n  </div>\n</div>\n`;\n\nexports[`AvatarGroup renders correctly > renders correctly with counter aria-label default-tooltip 1`] = `\n<div\n  className=\"avatarGroupContainer\"\n  data-vibe=\"AvatarGroup\"\n>\n  <div\n    className=\"avatar large avatarContainer\"\n    data-testid=\"avatar\"\n    data-vibe=\"Avatar\"\n    style={{}}\n  >\n    <div\n      className=\"clickable clickableWrapper disableTextSelection\"\n      data-testid=\"clickable\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      tabIndex={-1}\n    >\n      <div\n        aria-hidden={false}\n        className=\"circle circleText\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onMouseDown={[Function]}\n        onMouseEnter={[Function]}\n        onMouseLeave={[Function]}\n        style={\n          {\n            \"backgroundColor\": \"var(--color-chili-blue)\",\n          }\n        }\n        tabIndex={0}\n      >\n        <span\n          aria-label=\"Person 1\"\n          className=\"contentText contentTextLarge\"\n          data-testid=\"avatar-content\"\n        >\n          P1\n        </span>\n      </div>\n    </div>\n  </div>\n  <div\n    className=\"\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    tabIndex={-1}\n  />\n  <div\n    className=\"counterContainer medium light\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    tabIndex={0}\n  >\n    <span\n      aria-label=\"Tab for more items 1\"\n      aria-labelledby=\"\"\n      data-vibe=\"Counter\"\n      onMouseDown={[Function]}\n    >\n      <div\n        aria-label=\"1\"\n        className=\"counter sizeLarge kindFill colorLight\"\n      >\n        <span\n          data-testid=\"counter\"\n          id=\"counter\"\n        >\n          +1\n        </span>\n      </div>\n    </span>\n    <div\n      tabIndex={-1}\n    />\n  </div>\n</div>\n`;\n\nexports[`AvatarGroup renders correctly > renders correctly with counter default-tooltip 1`] = `\n<div\n  className=\"avatarGroupContainer\"\n  data-vibe=\"AvatarGroup\"\n>\n  <div\n    className=\"avatar large avatarContainer\"\n    data-testid=\"avatar\"\n    data-vibe=\"Avatar\"\n    style={{}}\n  >\n    <div\n      className=\"clickable clickableWrapper disableTextSelection\"\n      data-testid=\"clickable\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      tabIndex={-1}\n    >\n      <div\n        aria-hidden={false}\n        className=\"circle circleText\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onMouseDown={[Function]}\n        onMouseEnter={[Function]}\n        onMouseLeave={[Function]}\n        style={\n          {\n            \"backgroundColor\": \"var(--color-chili-blue)\",\n          }\n        }\n        tabIndex={0}\n      >\n        <span\n          className=\"contentText contentTextLarge\"\n          data-testid=\"avatar-content\"\n        >\n          P1\n        </span>\n      </div>\n    </div>\n  </div>\n  <div\n    className=\"\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    tabIndex={-1}\n  />\n  <div\n    className=\"counterContainer medium light\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    tabIndex={0}\n  >\n    <span\n      aria-label=\"Tab for more items 1\"\n      aria-labelledby=\"\"\n      data-vibe=\"Counter\"\n      onMouseDown={[Function]}\n    >\n      <div\n        aria-label=\"1\"\n        className=\"counter sizeLarge kindFill colorLight\"\n      >\n        <span\n          data-testid=\"counter\"\n          id=\"counter\"\n        >\n          +1\n        </span>\n      </div>\n    </span>\n    <div\n      tabIndex={-1}\n    />\n  </div>\n</div>\n`;\n\nexports[`AvatarGroup renders correctly > renders correctly with custom counter tooltip 1`] = `\n<div\n  className=\"avatarGroupContainer\"\n  data-vibe=\"AvatarGroup\"\n>\n  <div\n    className=\"avatar large avatarContainer\"\n    data-testid=\"avatar\"\n    data-vibe=\"Avatar\"\n    style={{}}\n  >\n    <div\n      className=\"clickable clickableWrapper disableTextSelection\"\n      data-testid=\"clickable\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      tabIndex={-1}\n    >\n      <div\n        aria-hidden={false}\n        className=\"circle circleText\"\n        style={\n          {\n            \"backgroundColor\": \"var(--color-chili-blue)\",\n          }\n        }\n        tabIndex={0}\n      >\n        <span\n          className=\"contentText contentTextLarge\"\n          data-testid=\"avatar-content\"\n        >\n          P1\n        </span>\n      </div>\n    </div>\n  </div>\n  <div\n    className=\"\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    tabIndex={-1}\n  />\n  <div\n    className=\"counterContainer medium light\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    tabIndex={0}\n  >\n    <span\n      aria-label=\"Tab for more items 1\"\n      aria-labelledby=\"\"\n      data-vibe=\"Counter\"\n      onMouseDown={[Function]}\n    >\n      <div\n        aria-label=\"1\"\n        className=\"counter sizeLarge kindFill colorLight\"\n      >\n        <span\n          data-testid=\"counter\"\n          id=\"counter\"\n        >\n          +1\n        </span>\n      </div>\n    </span>\n    <div\n      tabIndex={-1}\n    />\n  </div>\n</div>\n`;\n\nexports[`AvatarGroup renders correctly > renders correctly with custom counter value 1`] = `\n<div\n  className=\"avatarGroupContainer\"\n  data-vibe=\"AvatarGroup\"\n>\n  <div\n    className=\"avatar large avatarContainer\"\n    data-testid=\"avatar\"\n    data-vibe=\"Avatar\"\n    style={{}}\n  >\n    <div\n      className=\"clickable clickableWrapper disableTextSelection\"\n      data-testid=\"clickable\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      tabIndex={-1}\n    >\n      <div\n        aria-hidden={false}\n        className=\"circle circleText\"\n        style={\n          {\n            \"backgroundColor\": \"var(--color-chili-blue)\",\n          }\n        }\n        tabIndex={0}\n      >\n        <span\n          className=\"contentText contentTextLarge\"\n          data-testid=\"avatar-content\"\n        >\n          P1\n        </span>\n      </div>\n    </div>\n  </div>\n  <div\n    className=\"avatar large avatarContainer\"\n    data-testid=\"avatar\"\n    data-vibe=\"Avatar\"\n    style={{}}\n  >\n    <div\n      className=\"clickable clickableWrapper disableTextSelection\"\n      data-testid=\"clickable\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      tabIndex={-1}\n    >\n      <div\n        aria-hidden={false}\n        className=\"circle circleText\"\n        style={\n          {\n            \"backgroundColor\": \"var(--color-chili-blue)\",\n          }\n        }\n        tabIndex={0}\n      >\n        <span\n          className=\"contentText contentTextLarge\"\n          data-testid=\"avatar-content\"\n        >\n          P2\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`AvatarGroup renders correctly > renders correctly with dummy class name 1`] = `\n<div\n  className=\"avatarGroupContainer dummy-class-name\"\n  data-vibe=\"AvatarGroup\"\n>\n  <div\n    className=\"avatar large avatarContainer\"\n    data-testid=\"avatar\"\n    data-vibe=\"Avatar\"\n    style={{}}\n  >\n    <div\n      className=\"clickable clickableWrapper disableTextSelection\"\n      data-testid=\"clickable\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      tabIndex={-1}\n    >\n      <div\n        aria-hidden={false}\n        className=\"circle circleText\"\n        style={\n          {\n            \"backgroundColor\": \"var(--color-chili-blue)\",\n          }\n        }\n        tabIndex={0}\n      >\n        <span\n          className=\"contentText contentTextLarge\"\n          data-testid=\"avatar-content\"\n        >\n          P1\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`AvatarGroup renders correctly > renders correctly with large size 1`] = `\n<div\n  className=\"avatarGroupContainer\"\n  data-vibe=\"AvatarGroup\"\n>\n  <div\n    className=\"avatar large avatarContainer\"\n    data-testid=\"avatar\"\n    data-vibe=\"Avatar\"\n    style={{}}\n  >\n    <div\n      className=\"clickable clickableWrapper disableTextSelection\"\n      data-testid=\"clickable\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      tabIndex={-1}\n    >\n      <div\n        aria-hidden={false}\n        className=\"circle circleText\"\n        style={\n          {\n            \"backgroundColor\": \"var(--color-chili-blue)\",\n          }\n        }\n        tabIndex={0}\n      >\n        <span\n          className=\"contentText contentTextLarge\"\n          data-testid=\"avatar-content\"\n        >\n          P1\n        </span>\n      </div>\n    </div>\n  </div>\n  <div\n    className=\"\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    tabIndex={-1}\n  />\n  <div\n    className=\"counterContainer large light\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    tabIndex={0}\n  >\n    <span\n      aria-label=\"Tab for more items 1\"\n      aria-labelledby=\"\"\n      data-vibe=\"Counter\"\n      onMouseDown={[Function]}\n    >\n      <div\n        aria-label=\"1\"\n        className=\"counter sizeLarge kindFill colorLight\"\n      >\n        <span\n          data-testid=\"counter\"\n          id=\"counter\"\n        >\n          +1\n        </span>\n      </div>\n    </span>\n    <div\n      tabIndex={-1}\n    />\n  </div>\n</div>\n`;\n\nexports[`AvatarGroup renders correctly > renders correctly with xs size 1`] = `\n<div\n  className=\"avatarGroupContainer\"\n  data-vibe=\"AvatarGroup\"\n>\n  <div\n    className=\"avatar xs avatarContainer\"\n    data-testid=\"avatar\"\n    data-vibe=\"Avatar\"\n    style={{}}\n  >\n    <div\n      className=\"clickable clickableWrapper disableTextSelection\"\n      data-testid=\"clickable\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      tabIndex={-1}\n    >\n      <div\n        aria-hidden={false}\n        className=\"circle circleText\"\n        style={\n          {\n            \"backgroundColor\": \"var(--color-chili-blue)\",\n          }\n        }\n        tabIndex={0}\n      >\n        <span\n          className=\"contentText contentTextXs\"\n          data-testid=\"avatar-content\"\n        >\n          P1\n        </span>\n      </div>\n    </div>\n  </div>\n  <div\n    className=\"\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    tabIndex={-1}\n  />\n  <div\n    className=\"counterContainer xs light\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    tabIndex={0}\n  >\n    <span\n      aria-label=\"Tab for more items 1\"\n      aria-labelledby=\"\"\n      data-vibe=\"Counter\"\n      onMouseDown={[Function]}\n    >\n      <div\n        aria-label=\"1\"\n        className=\"counter sizeXs kindFill colorLight\"\n      >\n        <span\n          data-testid=\"counter\"\n          id=\"counter\"\n        >\n          +1\n        </span>\n      </div>\n    </span>\n    <div\n      tabIndex={-1}\n    />\n  </div>\n</div>\n`;\n\nexports[`AvatarGroup renders correctly > renders correctly without counter 1`] = `\n<div\n  className=\"avatarGroupContainer\"\n  data-vibe=\"AvatarGroup\"\n>\n  <div\n    className=\"avatar large avatarContainer\"\n    data-testid=\"avatar\"\n    data-vibe=\"Avatar\"\n    style={{}}\n  >\n    <div\n      className=\"clickable clickableWrapper disableTextSelection\"\n      data-testid=\"clickable\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      tabIndex={-1}\n    >\n      <div\n        aria-hidden={false}\n        className=\"circle circleText\"\n        style={\n          {\n            \"backgroundColor\": \"var(--color-chili-blue)\",\n          }\n        }\n        tabIndex={0}\n      >\n        <span\n          className=\"contentText contentTextLarge\"\n          data-testid=\"avatar-content\"\n        >\n          P1\n        </span>\n      </div>\n    </div>\n  </div>\n  <div\n    className=\"avatar large avatarContainer\"\n    data-testid=\"avatar\"\n    data-vibe=\"Avatar\"\n    style={{}}\n  >\n    <div\n      className=\"clickable clickableWrapper disableTextSelection\"\n      data-testid=\"clickable\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      tabIndex={-1}\n    >\n      <div\n        aria-hidden={false}\n        className=\"circle circleText\"\n        style={\n          {\n            \"backgroundColor\": \"var(--color-chili-blue)\",\n          }\n        }\n        tabIndex={0}\n      >\n        <span\n          className=\"contentText contentTextLarge\"\n          data-testid=\"avatar-content\"\n        >\n          P2\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`AvatarGroup renders correctly > with empty props 1`] = `null`;\n"
  },
  {
    "path": "packages/core/src/components/AvatarGroup/__tests__/__snapshots__/AvatarGroup.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`AvatarGroup renders correctly > renders correctly with counter 1`] = `\n<div\n  className=\"avatarGroupContainer\"\n  data-vibe=\"AvatarGroup\"\n>\n  <div\n    className=\"avatar large avatarContainer\"\n    data-testid=\"avatar\"\n    data-vibe=\"Avatar\"\n    style={{}}\n  >\n    <div\n      className=\"clickable clickableWrapper disableTextSelection\"\n      data-testid=\"clickable\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      tabIndex={-1}\n    >\n      <div\n        aria-hidden={false}\n        className=\"circle circleText\"\n        style={\n          {\n            \"backgroundColor\": \"var(--color-chili-blue)\",\n          }\n        }\n        tabIndex={0}\n      >\n        <span\n          className=\"contentText contentTextLarge\"\n          data-testid=\"avatar-content\"\n        >\n          P1\n        </span>\n      </div>\n    </div>\n  </div>\n  <div\n    className=\"\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    tabIndex={-1}\n  />\n  <div\n    className=\"counterContainer medium light\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    tabIndex={0}\n  >\n    <span\n      aria-label=\"Tab for more items 1\"\n      aria-labelledby=\"\"\n      data-vibe=\"Counter\"\n      onMouseDown={[Function]}\n    >\n      <div\n        aria-label=\"1\"\n        className=\"counter sizeLarge kindFill colorLight\"\n      >\n        <span\n          data-testid=\"counter\"\n          id=\"counter\"\n        >\n          +1\n        </span>\n      </div>\n    </span>\n    <div\n      tabIndex={-1}\n    />\n  </div>\n</div>\n`;\n\nexports[`AvatarGroup renders correctly > renders correctly with counter aria-label default-tooltip 1`] = `\n<div\n  className=\"avatarGroupContainer\"\n  data-vibe=\"AvatarGroup\"\n>\n  <div\n    className=\"avatar large avatarContainer\"\n    data-testid=\"avatar\"\n    data-vibe=\"Avatar\"\n    style={{}}\n  >\n    <div\n      className=\"clickable clickableWrapper disableTextSelection\"\n      data-testid=\"clickable\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      tabIndex={-1}\n    >\n      <div\n        aria-hidden={false}\n        className=\"circle circleText\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onMouseDown={[Function]}\n        onMouseEnter={[Function]}\n        onMouseLeave={[Function]}\n        style={\n          {\n            \"backgroundColor\": \"var(--color-chili-blue)\",\n          }\n        }\n        tabIndex={0}\n      >\n        <span\n          aria-label=\"Person 1\"\n          className=\"contentText contentTextLarge\"\n          data-testid=\"avatar-content\"\n        >\n          P1\n        </span>\n      </div>\n    </div>\n  </div>\n  <div\n    className=\"\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    tabIndex={-1}\n  />\n  <div\n    className=\"counterContainer medium light\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    tabIndex={0}\n  >\n    <span\n      aria-label=\"Tab for more items 1\"\n      aria-labelledby=\"\"\n      data-vibe=\"Counter\"\n      onMouseDown={[Function]}\n    >\n      <div\n        aria-label=\"1\"\n        className=\"counter sizeLarge kindFill colorLight\"\n      >\n        <span\n          data-testid=\"counter\"\n          id=\"counter\"\n        >\n          +1\n        </span>\n      </div>\n    </span>\n    <div\n      tabIndex={-1}\n    />\n  </div>\n</div>\n`;\n\nexports[`AvatarGroup renders correctly > renders correctly with counter default-tooltip 1`] = `\n<div\n  className=\"avatarGroupContainer\"\n  data-vibe=\"AvatarGroup\"\n>\n  <div\n    className=\"avatar large avatarContainer\"\n    data-testid=\"avatar\"\n    data-vibe=\"Avatar\"\n    style={{}}\n  >\n    <div\n      className=\"clickable clickableWrapper disableTextSelection\"\n      data-testid=\"clickable\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      tabIndex={-1}\n    >\n      <div\n        aria-hidden={false}\n        className=\"circle circleText\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onMouseDown={[Function]}\n        onMouseEnter={[Function]}\n        onMouseLeave={[Function]}\n        style={\n          {\n            \"backgroundColor\": \"var(--color-chili-blue)\",\n          }\n        }\n        tabIndex={0}\n      >\n        <span\n          className=\"contentText contentTextLarge\"\n          data-testid=\"avatar-content\"\n        >\n          P1\n        </span>\n      </div>\n    </div>\n  </div>\n  <div\n    className=\"\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    tabIndex={-1}\n  />\n  <div\n    className=\"counterContainer medium light\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    tabIndex={0}\n  >\n    <span\n      aria-label=\"Tab for more items 1\"\n      aria-labelledby=\"\"\n      data-vibe=\"Counter\"\n      onMouseDown={[Function]}\n    >\n      <div\n        aria-label=\"1\"\n        className=\"counter sizeLarge kindFill colorLight\"\n      >\n        <span\n          data-testid=\"counter\"\n          id=\"counter\"\n        >\n          +1\n        </span>\n      </div>\n    </span>\n    <div\n      tabIndex={-1}\n    />\n  </div>\n</div>\n`;\n\nexports[`AvatarGroup renders correctly > renders correctly with custom counter tooltip 1`] = `\n<div\n  className=\"avatarGroupContainer\"\n  data-vibe=\"AvatarGroup\"\n>\n  <div\n    className=\"avatar large avatarContainer\"\n    data-testid=\"avatar\"\n    data-vibe=\"Avatar\"\n    style={{}}\n  >\n    <div\n      className=\"clickable clickableWrapper disableTextSelection\"\n      data-testid=\"clickable\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      tabIndex={-1}\n    >\n      <div\n        aria-hidden={false}\n        className=\"circle circleText\"\n        style={\n          {\n            \"backgroundColor\": \"var(--color-chili-blue)\",\n          }\n        }\n        tabIndex={0}\n      >\n        <span\n          className=\"contentText contentTextLarge\"\n          data-testid=\"avatar-content\"\n        >\n          P1\n        </span>\n      </div>\n    </div>\n  </div>\n  <div\n    className=\"\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    tabIndex={-1}\n  />\n  <div\n    className=\"counterContainer medium light\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    tabIndex={0}\n  >\n    <span\n      aria-label=\"Tab for more items 1\"\n      aria-labelledby=\"\"\n      data-vibe=\"Counter\"\n      onMouseDown={[Function]}\n    >\n      <div\n        aria-label=\"1\"\n        className=\"counter sizeLarge kindFill colorLight\"\n      >\n        <span\n          data-testid=\"counter\"\n          id=\"counter\"\n        >\n          +1\n        </span>\n      </div>\n    </span>\n    <div\n      tabIndex={-1}\n    />\n  </div>\n</div>\n`;\n\nexports[`AvatarGroup renders correctly > renders correctly with custom counter value 1`] = `\n<div\n  className=\"avatarGroupContainer\"\n  data-vibe=\"AvatarGroup\"\n>\n  <div\n    className=\"avatar large avatarContainer\"\n    data-testid=\"avatar\"\n    data-vibe=\"Avatar\"\n    style={{}}\n  >\n    <div\n      className=\"clickable clickableWrapper disableTextSelection\"\n      data-testid=\"clickable\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      tabIndex={-1}\n    >\n      <div\n        aria-hidden={false}\n        className=\"circle circleText\"\n        style={\n          {\n            \"backgroundColor\": \"var(--color-chili-blue)\",\n          }\n        }\n        tabIndex={0}\n      >\n        <span\n          className=\"contentText contentTextLarge\"\n          data-testid=\"avatar-content\"\n        >\n          P1\n        </span>\n      </div>\n    </div>\n  </div>\n  <div\n    className=\"avatar large avatarContainer\"\n    data-testid=\"avatar\"\n    data-vibe=\"Avatar\"\n    style={{}}\n  >\n    <div\n      className=\"clickable clickableWrapper disableTextSelection\"\n      data-testid=\"clickable\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      tabIndex={-1}\n    >\n      <div\n        aria-hidden={false}\n        className=\"circle circleText\"\n        style={\n          {\n            \"backgroundColor\": \"var(--color-chili-blue)\",\n          }\n        }\n        tabIndex={0}\n      >\n        <span\n          className=\"contentText contentTextLarge\"\n          data-testid=\"avatar-content\"\n        >\n          P2\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`AvatarGroup renders correctly > renders correctly with dummy class name 1`] = `\n<div\n  className=\"avatarGroupContainer dummy-class-name\"\n  data-vibe=\"AvatarGroup\"\n>\n  <div\n    className=\"avatar large avatarContainer\"\n    data-testid=\"avatar\"\n    data-vibe=\"Avatar\"\n    style={{}}\n  >\n    <div\n      className=\"clickable clickableWrapper disableTextSelection\"\n      data-testid=\"clickable\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      tabIndex={-1}\n    >\n      <div\n        aria-hidden={false}\n        className=\"circle circleText\"\n        style={\n          {\n            \"backgroundColor\": \"var(--color-chili-blue)\",\n          }\n        }\n        tabIndex={0}\n      >\n        <span\n          className=\"contentText contentTextLarge\"\n          data-testid=\"avatar-content\"\n        >\n          P1\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`AvatarGroup renders correctly > renders correctly with large size 1`] = `\n<div\n  className=\"avatarGroupContainer\"\n  data-vibe=\"AvatarGroup\"\n>\n  <div\n    className=\"avatar large avatarContainer\"\n    data-testid=\"avatar\"\n    data-vibe=\"Avatar\"\n    style={{}}\n  >\n    <div\n      className=\"clickable clickableWrapper disableTextSelection\"\n      data-testid=\"clickable\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      tabIndex={-1}\n    >\n      <div\n        aria-hidden={false}\n        className=\"circle circleText\"\n        style={\n          {\n            \"backgroundColor\": \"var(--color-chili-blue)\",\n          }\n        }\n        tabIndex={0}\n      >\n        <span\n          className=\"contentText contentTextLarge\"\n          data-testid=\"avatar-content\"\n        >\n          P1\n        </span>\n      </div>\n    </div>\n  </div>\n  <div\n    className=\"\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    tabIndex={-1}\n  />\n  <div\n    className=\"counterContainer large light\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    tabIndex={0}\n  >\n    <span\n      aria-label=\"Tab for more items 1\"\n      aria-labelledby=\"\"\n      data-vibe=\"Counter\"\n      onMouseDown={[Function]}\n    >\n      <div\n        aria-label=\"1\"\n        className=\"counter sizeLarge kindFill colorLight\"\n      >\n        <span\n          data-testid=\"counter\"\n          id=\"counter\"\n        >\n          +1\n        </span>\n      </div>\n    </span>\n    <div\n      tabIndex={-1}\n    />\n  </div>\n</div>\n`;\n\nexports[`AvatarGroup renders correctly > renders correctly with xs size 1`] = `\n<div\n  className=\"avatarGroupContainer\"\n  data-vibe=\"AvatarGroup\"\n>\n  <div\n    className=\"avatar xs avatarContainer\"\n    data-testid=\"avatar\"\n    data-vibe=\"Avatar\"\n    style={{}}\n  >\n    <div\n      className=\"clickable clickableWrapper disableTextSelection\"\n      data-testid=\"clickable\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      tabIndex={-1}\n    >\n      <div\n        aria-hidden={false}\n        className=\"circle circleText\"\n        style={\n          {\n            \"backgroundColor\": \"var(--color-chili-blue)\",\n          }\n        }\n        tabIndex={0}\n      >\n        <span\n          className=\"contentText contentTextXs\"\n          data-testid=\"avatar-content\"\n        >\n          P1\n        </span>\n      </div>\n    </div>\n  </div>\n  <div\n    className=\"\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    tabIndex={-1}\n  />\n  <div\n    className=\"counterContainer xs light\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    tabIndex={0}\n  >\n    <span\n      aria-label=\"Tab for more items 1\"\n      aria-labelledby=\"\"\n      data-vibe=\"Counter\"\n      onMouseDown={[Function]}\n    >\n      <div\n        aria-label=\"1\"\n        className=\"counter sizeXs kindFill colorLight\"\n      >\n        <span\n          data-testid=\"counter\"\n          id=\"counter\"\n        >\n          +1\n        </span>\n      </div>\n    </span>\n    <div\n      tabIndex={-1}\n    />\n  </div>\n</div>\n`;\n\nexports[`AvatarGroup renders correctly > renders correctly without counter 1`] = `\n<div\n  className=\"avatarGroupContainer\"\n  data-vibe=\"AvatarGroup\"\n>\n  <div\n    className=\"avatar large avatarContainer\"\n    data-testid=\"avatar\"\n    data-vibe=\"Avatar\"\n    style={{}}\n  >\n    <div\n      className=\"clickable clickableWrapper disableTextSelection\"\n      data-testid=\"clickable\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      tabIndex={-1}\n    >\n      <div\n        aria-hidden={false}\n        className=\"circle circleText\"\n        style={\n          {\n            \"backgroundColor\": \"var(--color-chili-blue)\",\n          }\n        }\n        tabIndex={0}\n      >\n        <span\n          className=\"contentText contentTextLarge\"\n          data-testid=\"avatar-content\"\n        >\n          P1\n        </span>\n      </div>\n    </div>\n  </div>\n  <div\n    className=\"avatar large avatarContainer\"\n    data-testid=\"avatar\"\n    data-vibe=\"Avatar\"\n    style={{}}\n  >\n    <div\n      className=\"clickable clickableWrapper disableTextSelection\"\n      data-testid=\"clickable\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n      role=\"button\"\n      tabIndex={-1}\n    >\n      <div\n        aria-hidden={false}\n        className=\"circle circleText\"\n        style={\n          {\n            \"backgroundColor\": \"var(--color-chili-blue)\",\n          }\n        }\n        tabIndex={0}\n      >\n        <span\n          className=\"contentText contentTextLarge\"\n          data-testid=\"avatar-content\"\n        >\n          P2\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`AvatarGroup renders correctly > with empty props 1`] = `null`;\n"
  },
  {
    "path": "packages/core/src/components/AvatarGroup/index.ts",
    "content": "export { default as AvatarGroup, type AvatarGroupProps } from \"./AvatarGroup\";\nexport * from \"./AvatarGroup.types\";\n"
  },
  {
    "path": "packages/core/src/components/Badge/Badge.module.scss",
    "content": "$embeddedPosition: 15%;\n\n.badgeWrapper {\n  position: relative;\n\n  .badge {\n    z-index: 1;\n    position: absolute;\n    border-radius: 16px;\n\n    &:not(.outside) {\n      border: 2px solid;\n      border-color: var(--primary-background-color);\n    }\n\n    &.topEnd {\n      &.rectangular {\n        top: 0;\n        inset-inline-end: 0;\n        translate: 50% -50%;\n      }\n\n      &.outside {\n        top: 0;\n        inset-inline-end: -2px;\n        translate: 100% 0;\n      }\n\n      &.circular {\n        top: $embeddedPosition;\n        inset-inline-end: $embeddedPosition;\n        translate: 50% -50%;\n      }\n    }\n\n    &.topStart {\n      &.rectangular {\n        top: 0;\n        inset-inline-start: 0;\n        translate: -50% -50%;\n      }\n\n      &.outside {\n        top: 0;\n        inset-inline-start: -2px;\n        translate: -100% 0;\n      }\n\n      &.circular {\n        top: $embeddedPosition;\n        inset-inline-start: $embeddedPosition;\n        translate: -50% -50%;\n      }\n    }\n\n    &.bottomEnd {\n      &.rectangular {\n        bottom: 0;\n        inset-inline-end: 0;\n        translate: 50% 50%;\n      }\n\n      &.outside {\n        bottom: 0;\n        inset-inline-end: -2px;\n        translate: 100% 0;\n      }\n\n      &.circular {\n        bottom: $embeddedPosition;\n        inset-inline-end: $embeddedPosition;\n        translate: 50% 50%;\n      }\n    }\n\n    &.bottomStart {\n      &.rectangular {\n        bottom: 0;\n        inset-inline-start: 0;\n        translate: -50% 50%;\n      }\n\n      &.outside {\n        bottom: 0;\n        inset-inline-start: -2px;\n        translate: -100% 0;\n      }\n\n      &.circular {\n        bottom: $embeddedPosition;\n        inset-inline-start: $embeddedPosition;\n        translate: -50% 50%;\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Badge/Badge.tsx",
    "content": "import React, { forwardRef, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { camelCase } from \"es-toolkit\";\nimport { useMergeRef, getStyle } from \"@vibe/shared\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport { type BadgeAlignments, type BadgeAnchor, type BadgeType } from \"./Badge.types\";\nimport Indicator, { type IndicatorProps } from \"./Indicator/Indicator\";\nimport Counter, { type CounterProps } from \"../Counter/Counter\";\n\nimport { type IndicatorColor } from \"./Indicator/Indicator.types\";\nimport { type CounterColor } from \"../Counter/Counter.types\";\nimport styles from \"./Badge.module.scss\";\nimport { type VibeComponentProps } from \"../../types\";\n\nexport interface BadgeBaseProps extends VibeComponentProps {\n  /**\n   * The position of the badge relative to its parent.\n   */\n  anchor?: BadgeAnchor;\n  /**\n   * The alignment style of the badge.\n   */\n  alignment?: BadgeAlignments;\n  /**\n   * The content the badge is attached to.\n   */\n  children: React.ReactNode;\n}\n\ninterface CounterBadgeProps extends CounterProps {\n  /**\n   * The type of badge, set to `\"counter\"` for numeric values.\n   */\n  type: Extract<BadgeType, \"counter\">;\n}\n\ninterface IndicatorBadgeProps extends IndicatorProps {\n  /**\n   * The type of badge, set to `\"indicator\"` for a simple dot.\n   */\n  type?: Extract<BadgeType, \"indicator\">;\n}\n\nexport type BadgeProps = BadgeBaseProps & (CounterBadgeProps | IndicatorBadgeProps);\n\nconst Badge = forwardRef(\n  (\n    {\n      type = \"indicator\",\n      anchor = \"top-end\",\n      alignment = \"rectangular\",\n      className,\n      id,\n      \"data-testid\": dataTestId,\n      children,\n      ...badgeProps\n    }: BadgeProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n    const badgeClassNames = cx(\n      styles.badge,\n      getStyle(styles, camelCase(anchor as unknown as string)),\n      getStyle(styles, alignment)\n    );\n\n    const color = badgeProps.color || type === \"indicator\" ? \"notification\" : \"negative\";\n\n    return (\n      <div ref={mergedRef} className={cx(styles.badgeWrapper, className)} id={id} data-vibe={ComponentVibeId.BADGE}>\n        {children}\n        <div className={badgeClassNames} data-testid={dataTestId || getTestId(ComponentDefaultTestId.BADGE, id)}>\n          {type === \"indicator\" ? (\n            <Indicator color={color as IndicatorColor} {...(badgeProps as IndicatorBadgeProps)} />\n          ) : (\n            type === \"counter\" && <Counter color={color as CounterColor} {...(badgeProps as CounterBadgeProps)} />\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nexport default Badge;\n"
  },
  {
    "path": "packages/core/src/components/Badge/Badge.types.ts",
    "content": "export type BadgeType = \"indicator\" | \"counter\";\n\nexport type BadgeAnchor = \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\";\n\nexport type BadgeAlignments = \"rectangular\" | \"outside\" | \"circular\";\n"
  },
  {
    "path": "packages/core/src/components/Badge/Indicator/Indicator.module.scss",
    "content": "$indicator-size: 8px;\n\n.indicator {\n  width: $indicator-size;\n  height: $indicator-size;\n  border-radius: 50%;\n\n  &.primary {\n    background-color: var(--primary-color);\n  }\n\n  &.notification {\n    background-color: var(--negative-color);\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Badge/Indicator/Indicator.tsx",
    "content": "import React from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./Indicator.module.scss\";\nimport { type IndicatorColor } from \"./Indicator.types\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\n\nexport interface IndicatorProps extends VibeComponentProps {\n  /**\n   * The color of the indicator.\n   */\n  color?: IndicatorColor;\n}\n\nconst Indicator = ({ color = \"notification\", className, id, \"data-testid\": dataTestId }: IndicatorProps) => {\n  return (\n    <div\n      className={cx(styles.indicator, styles[color], className)}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.INDICATOR, id)}\n    />\n  );\n};\n\nexport default Indicator;\n"
  },
  {
    "path": "packages/core/src/components/Badge/Indicator/Indicator.types.ts",
    "content": "export type IndicatorColor = \"primary\" | \"notification\";\n"
  },
  {
    "path": "packages/core/src/components/Badge/Indicator/__tests__/Indicator.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport Indicator from \"../Indicator\";\n\ndescribe(\"Indicator\", () => {\n  it(\"renders correctly with empty props\", () => {\n    const tree = renderer.create(<Indicator />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with a custom color\", () => {\n    const tree = renderer.create(<Indicator color=\"primary\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Badge/Indicator/__tests__/__snapshots__/Indicator.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`Indicator > renders correctly with a custom color 1`] = `\n<div\n  className=\"indicator primary\"\n  data-testid=\"indicator\"\n/>\n`;\n\nexports[`Indicator > renders correctly with empty props 1`] = `\n<div\n  className=\"indicator notification\"\n  data-testid=\"indicator\"\n/>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Badge/__tests__/Badge.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport Badge from \"../Badge\";\n\ndescribe(\"Badge\", () => {\n  it(\"renders with no props with default badge Indicator\", () => {\n    const tree = renderer.create(<Badge>Child</Badge>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders with Counter and counter props\", () => {\n    const tree = renderer\n      .create(\n        <Badge type=\"counter\" count={5}>\n          Child\n        </Badge>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders at different position\", () => {\n    const tree = renderer.create(<Badge anchor=\"bottom-start\">Child</Badge>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders with different color\", () => {\n    const tree = renderer.create(<Badge color=\"primary\">Child</Badge>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders out of horizontal bounds\", () => {\n    const tree = renderer.create(<Badge alignment=\"outside\">Child</Badge>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders with margins from component's bounds\", () => {\n    const tree = renderer.create(<Badge alignment=\"circular\">Child</Badge>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Badge/__tests__/__snapshots__/Badge.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`Badge > renders at different position 1`] = `\n<div\n  className=\"badgeWrapper\"\n  data-vibe=\"Badge\"\n>\n  Child\n  <div\n    className=\"badge bottomStart rectangular\"\n    data-testid=\"badge\"\n  >\n    <div\n      className=\"indicator notification\"\n      data-testid=\"indicator\"\n    />\n  </div>\n</div>\n`;\n\nexports[`Badge > renders out of horizontal bounds 1`] = `\n<div\n  className=\"badgeWrapper\"\n  data-vibe=\"Badge\"\n>\n  Child\n  <div\n    className=\"badge topEnd outside\"\n    data-testid=\"badge\"\n  >\n    <div\n      className=\"indicator notification\"\n      data-testid=\"indicator\"\n    />\n  </div>\n</div>\n`;\n\nexports[`Badge > renders with Counter and counter props 1`] = `\n<div\n  className=\"badgeWrapper\"\n  data-vibe=\"Badge\"\n>\n  Child\n  <div\n    className=\"badge topEnd rectangular\"\n    data-testid=\"badge\"\n  >\n    <span\n      aria-label=\" 5\"\n      aria-labelledby=\"\"\n      data-vibe=\"Counter\"\n      onMouseDown={[Function]}\n    >\n      <div\n        aria-label=\"5\"\n        className=\"counter sizeLarge kindFill colorNegative\"\n      >\n        <span\n          data-testid=\"counter\"\n          id=\"counter\"\n        >\n          5\n        </span>\n      </div>\n    </span>\n  </div>\n</div>\n`;\n\nexports[`Badge > renders with different color 1`] = `\n<div\n  className=\"badgeWrapper\"\n  data-vibe=\"Badge\"\n>\n  Child\n  <div\n    className=\"badge topEnd rectangular\"\n    data-testid=\"badge\"\n  >\n    <div\n      className=\"indicator primary\"\n      data-testid=\"indicator\"\n    />\n  </div>\n</div>\n`;\n\nexports[`Badge > renders with margins from component's bounds 1`] = `\n<div\n  className=\"badgeWrapper\"\n  data-vibe=\"Badge\"\n>\n  Child\n  <div\n    className=\"badge topEnd circular\"\n    data-testid=\"badge\"\n  >\n    <div\n      className=\"indicator notification\"\n      data-testid=\"indicator\"\n    />\n  </div>\n</div>\n`;\n\nexports[`Badge > renders with no props with default badge Indicator 1`] = `\n<div\n  className=\"badgeWrapper\"\n  data-vibe=\"Badge\"\n>\n  Child\n  <div\n    className=\"badge topEnd rectangular\"\n    data-testid=\"badge\"\n  >\n    <div\n      className=\"indicator notification\"\n      data-testid=\"indicator\"\n    />\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Badge/index.ts",
    "content": "export { default as Badge, type BadgeProps } from \"./Badge\";\n\nexport * from \"./Badge.types\";\n"
  },
  {
    "path": "packages/core/src/components/BaseItem/BaseItem.module.scss",
    "content": "@import \"../../styles/states\";\n\n.wrapper {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  border-radius: var(--border-radius-small);\n  color: var(--primary-text-color);\n  cursor: pointer;\n  @include focus-style-inset();\n\n  &.highlighted,\n  &:hover:not(.disabled):not(.readOnly) {\n    background-color: var(--primary-background-hover-color);\n  }\n\n  &.disabled {\n    color: var(--disabled-text-color);\n    cursor: not-allowed;\n  }\n\n  &.readOnly {\n    cursor: default;\n  }\n\n  &.selected {\n    background-color: var(--primary-selected-color);\n\n    &.highlighted,\n    &:hover:not(.disabled):not(.readOnly) {\n      background-color: var(--primary-selected-hover-color);\n    }\n  }\n\n  &.small {\n    padding: 6px var(--space-8);\n  }\n\n  &.medium {\n    padding: 9px 12px;\n  }\n\n  &.large {\n    padding: 13px 12px;\n  }\n\n  .avatar,\n  .icon {\n    flex-shrink: 0;\n  }\n\n  .indent {\n    width: 20px;\n  }\n\n  .endElement {\n    padding-inline-start: var(--space-8);\n    margin-inline-start: auto;\n    display: flex;\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/BaseItem/BaseItem.tsx",
    "content": "import React, { forwardRef, useEffect, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { useMergeRef, getStyle } from \"@vibe/shared\";\n\nimport { Text, type TextType } from \"@vibe/typography\";\nimport { type BaseItemData, type BaseItemProps } from \"./BaseItem.types\";\nimport { useListItemProps } from \"./hooks/useListItemProps\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { renderSideElement } from \"./utils\";\nimport styles from \"./BaseItem.module.scss\";\n\nconst BaseItem = forwardRef(\n  <Item extends Record<string, unknown>>(\n    {\n      className,\n      id,\n      component = \"li\",\n      size = \"medium\",\n      selected = false,\n      readOnly = false,\n      highlighted = false,\n      role,\n      index: _index,\n      dir = \"auto\",\n      itemRenderer,\n      itemProps = {},\n      item = {} as BaseItemData<Item>\n    }: BaseItemProps<Item>,\n    ref: React.Ref<HTMLElement>\n  ) => {\n    const internalRef = useRef<HTMLElement>(null);\n    const mergedRef = useMergeRef(ref, internalRef);\n\n    const listItemProps = useListItemProps({ id, component, size, highlighted, role, itemProps });\n\n    useEffect(() => {\n      listItemProps.refCallback?.(internalRef.current);\n    }, [listItemProps]);\n\n    const { label = \"\", disabled = false, startElement, endElement, tooltipProps = {} } = item;\n\n    const listItemClassNames = useMemo(\n      () =>\n        cx(\n          styles.wrapper,\n          {\n            [styles.selected]: selected,\n            [styles.disabled]: disabled,\n            [styles.highlighted]: listItemProps.highlighted,\n            [styles.readOnly]: readOnly\n          },\n          getStyle(styles, listItemProps.size),\n          className\n        ),\n      [selected, disabled, listItemProps.highlighted, readOnly, listItemProps.size, className]\n    );\n\n    const textVariant: TextType = listItemProps.size === \"small\" ? \"text2\" : \"text1\";\n    const Element = listItemProps.component as React.ElementType;\n\n    return (\n      <Tooltip\n        {...tooltipProps}\n        content={tooltipProps?.content}\n        position={dir === \"rtl\" ? \"right\" : \"left\"}\n        containerSelector=\"body\"\n      >\n        <Element\n          id={listItemProps.id}\n          ref={mergedRef}\n          className={listItemClassNames}\n          role={listItemProps.role}\n          aria-selected={selected}\n          aria-disabled={disabled || undefined}\n          {...listItemProps.itemProps}\n        >\n          {itemRenderer ? (\n            itemRenderer(item)\n          ) : (\n            <>\n              {startElement && renderSideElement(startElement, disabled, textVariant)}\n              <Text type={textVariant} color=\"inherit\" tooltipProps={{ containerSelector: \"body\" }}>\n                {label}\n              </Text>\n              {endElement && (\n                <div className={styles.endElement}>{renderSideElement(endElement, disabled, textVariant)}</div>\n              )}\n            </>\n          )}\n        </Element>\n      </Tooltip>\n    );\n  }\n);\n\nexport default BaseItem as <Item extends Record<string, unknown>>(\n  props: BaseItemProps<Item> & { ref?: React.Ref<HTMLElement> }\n) => React.ReactElement;\n"
  },
  {
    "path": "packages/core/src/components/BaseItem/BaseItem.types.ts",
    "content": "import { type ReactNode, type AriaRole } from \"react\";\nimport type React from \"react\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { type TooltipProps } from \"@vibe/tooltip\";\nimport { type ChipsProps } from \"../Chips\";\nimport { type SubIcon } from \"@vibe/icon\";\n\nexport type BaseItemSizes = \"small\" | \"medium\" | \"large\";\nexport type BaseItemDirection = \"ltr\" | \"rtl\" | \"auto\";\n\nexport interface BaseItemProps<Item extends Record<string, unknown>>\n  extends Omit<React.HTMLAttributes<HTMLElement>, \"role\">,\n    VibeComponentProps {\n  /**\n   * The HTML element to render. Defaults to \"li\".\n   */\n  component?: keyof JSX.IntrinsicElements;\n  /**\n   * The Size of the list item.\n   */\n  size?: BaseItemSizes;\n  /**\n   * If true, the list item is selected.\n   */\n  selected?: boolean;\n  /**\n   * If true, the dropdown is read-only and cannot be edited.\n   */\n  readOnly?: boolean;\n  /**\n   * Whether item should have highlight styling\n   */\n  highlighted?: boolean;\n  /**\n   * Determines the position of the tooltip according to the direction.\n   */\n  dir?: BaseItemDirection;\n  /**\n   * The ARIA role of the list item.\n   */\n  role?: AriaRole;\n  /**\n   * The index of the item in the list.\n   */\n  index?: number;\n  /**\n   * Custom renderer for options.\n   */\n  itemRenderer?: (item: BaseItemData<Item>) => React.ReactNode;\n  /**\n   * The original item data that this list item represents.\n   */\n  item?: BaseItemData<Item>;\n  /**\n   * Additional props to pass to the list item element.\n   */\n  itemProps?: Record<string, unknown>;\n}\n\nexport type BaseItemData<Item = Record<string, unknown>> = Item & {\n  /**\n   * The value of the list item.\n   */\n  value: string | number;\n  /**\n   * The primary text content of the list item.\n   */\n  label: string;\n  /**\n   * The start element of the list item.\n   */\n  startElement?: StartElement;\n  /**\n   * The end element of the list item.\n   */\n  endElement?: EndElement;\n  /**\n   * If true, the list item is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Props for displaying a tooltip on the list item.\n   */\n  tooltipProps?: Partial<TooltipProps>;\n  /**\n   * The color of the chip when displayed in multi-select mode.\n   */\n  chipColor?: ChipsProps[\"color\"];\n  /**\n   * The index of the item in the list.\n   */\n  index?: number;\n};\n\nexport type SideElement =\n  | { type: \"avatar\"; value: string; square?: boolean }\n  | { type: \"icon\"; value: SubIcon }\n  | { type: \"indent\" }\n  | { type: \"suffix\"; value: string }\n  | { type: \"custom\"; render: () => ReactNode };\n\nexport type StartElement = Extract<SideElement, { type: \"avatar\" | \"icon\" | \"indent\" | \"custom\" }>;\n\nexport type EndElement = Extract<SideElement, { type: \"icon\" | \"suffix\" | \"custom\" }>;\n"
  },
  {
    "path": "packages/core/src/components/BaseItem/__stories__/BaseItem.stories.tsx",
    "content": "import { createComponentTemplate } from \"vibe-storybook-components\";\nimport BaseItem from \"../BaseItem\";\nimport { type Meta, type StoryObj } from \"@storybook/react\";\nimport { Email } from \"@vibe/icons\";\nimport person1 from \"./person1.png\";\n\ntype Story = StoryObj<typeof BaseItem>;\n\nexport default {\n  title: \"Internal/BaseItem\",\n  component: BaseItem,\n  tags: [\"internal\"]\n} satisfies Meta<typeof BaseItem>;\n\nconst baseItemTemplate = createComponentTemplate(BaseItem);\n\nexport const Overview: Story = {\n  render: baseItemTemplate.bind({}),\n  args: {\n    item: {\n      value: \"item1\",\n      label: \"This is a list item\",\n      startElement: { type: \"avatar\", value: person1 },\n      endElement: { type: \"icon\", value: Email },\n      tooltipProps: { content: \"tooltip content\" }\n    }\n  }\n};\n"
  },
  {
    "path": "packages/core/src/components/BaseItem/__tests__/BaseItem.test.tsx",
    "content": "import { vi, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { render } from \"@testing-library/react\";\nimport BaseItem from \"../BaseItem\";\nimport { type BaseItemProps, type StartElement, type EndElement, type BaseItemData } from \"../BaseItem.types\";\n\nconst startElement: StartElement = {\n  type: \"avatar\",\n  value: \"avatar.png\",\n  square: true\n};\n\nconst endElement: EndElement = {\n  type: \"icon\",\n  value: \"check\"\n};\n\nfunction renderBaseItem(props?: Partial<BaseItemProps<Record<string, unknown>>>) {\n  return render(<BaseItem {...props} />);\n}\n\ndescribe(\"BaseItem\", () => {\n  const label = \"Default Item\";\n\n  it(\"should render correctly with all props\", () => {\n    const { getByText } = renderBaseItem({\n      item: {\n        label,\n        value: \"item1\",\n        disabled: false,\n        startElement,\n        endElement\n      },\n      size: \"large\",\n      selected: true,\n      highlighted: true,\n      className: \"custom-wrapper\"\n    });\n\n    expect(getByText(\"Default Item\").parentNode).toHaveClass(\"large\");\n    expect(getByText(\"Default Item\").parentNode).toHaveClass(\"selected\");\n    expect(getByText(\"Default Item\").parentNode).toHaveClass(\"highlighted\");\n    expect(getByText(\"Default Item\").parentNode).toHaveClass(\"custom-wrapper\");\n  });\n\n  describe(\"with declared props\", () => {\n    it(\"should apply the size class\", () => {\n      const { getByText } = renderBaseItem({\n        item: { label, value: \"item1\" },\n        size: \"large\"\n      });\n      expect(getByText(\"Default Item\").parentNode).toHaveClass(\"large\");\n    });\n\n    it(\"should show start and end elements when provided\", () => {\n      const { getByTestId } = renderBaseItem({\n        item: {\n          label,\n          value: \"item1\",\n          startElement,\n          endElement\n        }\n      });\n\n      expect(getByTestId(\"avatar-content\")).toBeInTheDocument();\n      expect(getByTestId(\"icon\")).toBeInTheDocument();\n    });\n\n    it(\"should apply the selected class\", () => {\n      const { getByText } = renderBaseItem({\n        item: { label, value: \"item1\" },\n        selected: true\n      });\n      expect(getByText(\"Default Item\").parentNode).toHaveClass(\"selected\");\n    });\n\n    it(\"should apply the disabled class\", () => {\n      const { getByText } = renderBaseItem({\n        item: {\n          label,\n          value: \"item1\",\n          disabled: true\n        }\n      });\n      expect(getByText(\"Default Item\").parentNode).toHaveClass(\"disabled\");\n    });\n\n    it(\"should apply the highlighted class\", () => {\n      const { getByText } = renderBaseItem({\n        item: { label, value: \"item1\" },\n        highlighted: true\n      });\n      expect(getByText(\"Default Item\").parentNode).toHaveClass(\"highlighted\");\n    });\n\n    it(\"should have role option\", () => {\n      const { getByRole } = renderBaseItem({\n        item: { label, value: \"item1\" },\n        role: \"option\"\n      });\n      expect(getByRole(\"option\")).toBeInTheDocument();\n    });\n  });\n});\n\ndescribe(\"with custom type\", () => {\n  type CustomItemType = {\n    id: string;\n    customValue: number;\n    category: string;\n    priority: number;\n  };\n\n  const customItem: BaseItemData<CustomItemType> = {\n    id: \"custom-123\",\n    value: \"custom-123\",\n    customValue: 42,\n    label: \"Custom Item\",\n    category: \"Test\",\n    priority: 1\n  };\n\n  it(\"should render correctly with a custom type\", () => {\n    const { getByText } = render(<BaseItem<CustomItemType> item={customItem} />);\n    expect(getByText(\"Custom Item\")).toBeInTheDocument();\n  });\n\n  it(\"should pass custom type properties to itemRenderer\", () => {\n    const mockRenderer = vi.fn((item: BaseItemData<CustomItemType>) => {\n      const { id, customValue, label } = item;\n      return <div data-testid=\"custom-rendered\">{`${label} (${id}): ${customValue}`}</div>;\n    });\n\n    const { getByTestId } = render(<BaseItem<CustomItemType> item={customItem} itemRenderer={mockRenderer} />);\n\n    expect(mockRenderer).toHaveBeenCalledWith(customItem);\n\n    expect(getByTestId(\"custom-rendered\")).toHaveTextContent(\"Custom Item (custom-123): 42\");\n  });\n});\n\ndescribe(\"with type parameter scenarios\", () => {\n  it(\"should work without explicit type parameter\", () => {\n    const simpleItem = {\n      label: \"Simple Item\",\n      value: \"simple-123\",\n      customField: \"custom value\"\n    };\n\n    const { getByText } = render(<BaseItem item={simpleItem} />);\n    expect(getByText(\"Simple Item\")).toBeInTheDocument();\n  });\n\n  it(\"should work with explicit type parameter\", () => {\n    type ExplicitType = {\n      id: string;\n      isActive: boolean;\n    };\n\n    const typedItem: BaseItemData<ExplicitType> = {\n      label: \"Typed Item\",\n      value: \"typed-123\",\n      id: \"123\",\n      isActive: true\n    };\n\n    const { getByText } = render(<BaseItem<ExplicitType> item={typedItem} />);\n    expect(getByText(\"Typed Item\")).toBeInTheDocument();\n  });\n\n  it(\"should work with itemRenderer without explicit type\", () => {\n    const simpleItem = {\n      label: \"Renderer Item\",\n      count: 42\n    };\n\n    const simpleRenderer = (item: any) => <div data-testid=\"simple-rendered\">{`${item.label}: ${item.count}`}</div>;\n    const { getByTestId } = render(<BaseItem item={simpleItem} itemRenderer={simpleRenderer} />);\n    expect(getByTestId(\"simple-rendered\")).toHaveTextContent(\"Renderer Item: 42\");\n  });\n\n  it(\"should work with itemRenderer and explicit type\", () => {\n    const complexItem = {\n      label: \"Complex Item\",\n      id: \"complex-1\",\n      metadata: {\n        version: 2,\n        status: \"active\" as const\n      }\n    };\n\n    const typedRenderer = (item: any) => {\n      const typedItem = item as typeof complexItem;\n      return (\n        <div data-testid=\"complex-rendered\">\n          {`${typedItem.label} (v${typedItem.metadata.version}): ${typedItem.metadata.status}`}\n        </div>\n      );\n    };\n\n    const { getByTestId } = render(<BaseItem item={complexItem} itemRenderer={typedRenderer} />);\n    expect(getByTestId(\"complex-rendered\")).toHaveTextContent(\"Complex Item (v2): active\");\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/BaseItem/hooks/useListItemProps.ts",
    "content": "import { useBaseListItem } from \"../../BaseList/context/BaseListContext\";\nimport { type BaseItemProps } from \"../BaseItem.types\";\n\ntype ListItemPropsInput<Item extends Record<string, unknown>> = Pick<\n  BaseItemProps<Item>,\n  \"id\" | \"component\" | \"size\" | \"highlighted\" | \"role\" | \"itemProps\"\n>;\n\ninterface ListItemPropsOutput {\n  id: string | undefined;\n  component: string;\n  size: \"small\" | \"medium\" | \"large\";\n  highlighted: boolean;\n  role: string | undefined;\n  itemProps: Record<string, unknown>;\n  refCallback: ((element: HTMLElement | null) => void) | undefined;\n}\n\n/**\n * Merges explicit BaseItem props with context values from BaseList.\n * Explicit props always take precedence over context.\n *\n * @param props - The explicit props passed to BaseItem\n * @returns Merged props with context values as defaults\n */\nexport function useListItemProps<Item extends Record<string, unknown>>(\n  props: ListItemPropsInput<Item>\n): ListItemPropsOutput {\n  const context = useBaseListItem();\n\n  if (!context) {\n    return {\n      id: props.id,\n      component: props.component ?? \"li\",\n      size: props.size ?? \"medium\",\n      highlighted: props.highlighted ?? false,\n      role: props.role,\n      itemProps: props.itemProps ?? {},\n      refCallback: undefined\n    };\n  }\n\n  return {\n    id: props.id ?? context.id,\n    component: props.component !== \"li\" ? props.component! : context.component,\n    size: props.size !== \"medium\" ? props.size! : context.size,\n    highlighted: props.highlighted !== undefined ? props.highlighted : context.highlighted,\n    role: props.role ?? context.role,\n    itemProps: {\n      tabIndex: context.tabIndex,\n      ...props.itemProps\n    },\n    refCallback: context.refCallback\n  };\n}\n"
  },
  {
    "path": "packages/core/src/components/BaseItem/index.ts",
    "content": "export { default as BaseItem } from \"./BaseItem\";\nexport * from \"./BaseItem.types\";\n"
  },
  {
    "path": "packages/core/src/components/BaseItem/utils.tsx",
    "content": "import { type EndElement, type StartElement } from \"./BaseItem.types\";\nimport { Text, type TextType } from \"@vibe/typography\";\nimport React from \"react\";\nimport Avatar from \"../Avatar/Avatar\";\nimport styles from \"./BaseItem.module.scss\";\nimport { Icon } from \"@vibe/icon\";\n\nexport function renderSideElement(\n  element: StartElement | EndElement,\n  disabled: boolean,\n  textVariant: TextType\n): React.ReactNode {\n  switch (element.type) {\n    case \"avatar\":\n      return (\n        <Avatar\n          className={styles.avatar}\n          src={element.value}\n          withoutBorder\n          square={element.square}\n          type=\"img\"\n          customSize={20}\n          disabled={disabled}\n        />\n      );\n\n    case \"icon\":\n      return <Icon className={styles.icon} icon={element.value} size={20} />;\n\n    case \"indent\":\n      return <div className={styles.indent} />;\n\n    case \"suffix\":\n      return (\n        <Text type={textVariant} color=\"secondary\" style={{ maxWidth: \"112px\" }}>\n          {element.value}\n        </Text>\n      );\n\n    case \"custom\":\n      return element.render();\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/BaseList/BaseList.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n@import \"../../styles/states\";\n@import \"../../styles/typography\";\n\n.baseList {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  overflow-y: auto;\n  max-height: var(--baselist-max-height, none);\n  @include smoothing-text;\n  @include scroller();\n}\n"
  },
  {
    "path": "packages/core/src/components/BaseList/BaseList.tsx",
    "content": "import React, { forwardRef, type ReactElement, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { useMergeRef, useIsomorphicLayoutEffect } from \"@vibe/shared\";\n\nimport { type BaseListProps } from \"./BaseList.types\";\nimport {\n  BaseListProvider,\n  BaseListItemProvider,\n  type BaseListContextProps,\n  type BaseListItemContextProps\n} from \"./context/BaseListContext\";\nimport { useBaseListFocus } from \"./hooks/useBaseListFocus\";\nimport { useBaseListKeyboard } from \"./hooks/useBaseListKeyboard\";\nimport { getChildRole, getItemComponentType, getItemId, isListItem } from \"./utils/baseListUtils\";\nimport styles from \"./BaseList.module.scss\";\n\nconst BaseList = forwardRef(\n  (\n    {\n      className,\n      id,\n      as = \"ul\",\n      children,\n      \"aria-label\": ariaLabel,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-controls\": ariaControls,\n      role = \"listbox\",\n      size = \"medium\",\n      maxHeight,\n      focusOnMount = false,\n      defaultFocusIndex = 0,\n      onFocusChange,\n      style,\n      disabled = false,\n      \"data-testid\": dataTestId,\n      ...rest\n    }: BaseListProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef<HTMLElement>(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const Element = as as React.ElementType;\n\n    const { focusIndex, activeDescendantId, updateFocusedItem, registerItem, childrenRefs } = useBaseListFocus({\n      defaultFocusIndex,\n      onFocusChange,\n      listId: id,\n      disabled\n    });\n\n    useBaseListKeyboard({\n      focusIndex,\n      childrenRefs,\n      listId: id,\n      updateFocusedItem,\n      componentRef,\n      disabled\n    });\n\n    useIsomorphicLayoutEffect(() => {\n      if (focusOnMount && componentRef.current) {\n        requestAnimationFrame(() => {\n          componentRef.current?.focus();\n        });\n      }\n    }, [focusOnMount]);\n\n    const enrichedChildren = useMemo(() => {\n      const childArray = React.Children.toArray(children) as ReactElement[];\n      childrenRefs.current = childrenRefs.current.slice(0, childArray.length);\n\n      return childArray.map((child, index) => {\n        if (!React.isValidElement(child)) {\n          return child;\n        }\n\n        const childId = getItemId(id, index, (child.props as { id?: string }).id);\n        const currentRef = childrenRefs.current[index];\n        const isFocusableItem = currentRef === undefined || currentRef === null || isListItem(currentRef);\n        const isDOMElement = typeof child.type === \"string\";\n\n        const existingRole = (child.props as { role?: string }).role;\n        const childRole = existingRole || (!isDOMElement ? getChildRole(role) : undefined);\n\n        const refCallback = (itemRef: HTMLElement | null) => {\n          childrenRefs.current[index] = itemRef;\n        };\n\n        const itemContextValue: BaseListItemContextProps = {\n          index,\n          id: childId,\n          highlighted: focusIndex === index && isFocusableItem,\n          tabIndex: focusIndex === index && isFocusableItem ? 0 : -1,\n          component: getItemComponentType(as),\n          size,\n          role: childRole,\n          refCallback\n        };\n\n        return (\n          <BaseListItemProvider key={childId} value={itemContextValue}>\n            {child}\n          </BaseListItemProvider>\n        );\n      });\n    }, [children, as, focusIndex, id, role, size, childrenRefs]);\n\n    const contextValue: BaseListContextProps = useMemo(\n      () => ({\n        activeItemIndex: focusIndex,\n        updateFocusedItem,\n        registerItem,\n        size\n      }),\n      [focusIndex, updateFocusedItem, registerItem, size]\n    );\n\n    const listStyle = useMemo(\n      () =>\n        maxHeight\n          ? ({\n              ...style,\n              \"--baselist-max-height\": typeof maxHeight === \"number\" ? `${maxHeight}px` : maxHeight\n            } as React.CSSProperties)\n          : style,\n      [maxHeight, style]\n    );\n\n    return (\n      <BaseListProvider value={contextValue}>\n        <Element\n          ref={mergedRef}\n          id={id}\n          className={cx(styles.baseList, className)}\n          style={listStyle}\n          aria-label={ariaLabel}\n          aria-describedby={ariaDescribedBy}\n          aria-controls={ariaControls}\n          aria-activedescendant={activeDescendantId}\n          aria-disabled={disabled || undefined}\n          role={role}\n          tabIndex={-1}\n          data-testid={dataTestId}\n          {...rest}\n        >\n          {enrichedChildren}\n        </Element>\n      </BaseListProvider>\n    );\n  }\n);\n\nexport default BaseList;\n"
  },
  {
    "path": "packages/core/src/components/BaseList/BaseList.types.ts",
    "content": "import { type AriaAttributes, type AriaRole, type ReactElement } from \"react\";\nimport type React from \"react\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { type BaseItemSizes } from \"../BaseItem\";\n\nexport type BaseListElement = \"div\" | \"nav\" | \"ul\" | \"ol\";\n\nexport type BaseListSizes = BaseItemSizes;\n\nexport interface BaseListProps extends Omit<React.HTMLAttributes<HTMLElement>, \"id\">, VibeComponentProps {\n  /**\n   * A unique identifier for the list. Required to ensure unique IDs across micro-frontends.\n   */\n  id: string;\n  /**\n   * The HTML element to render as. Defaults to \"ul\".\n   */\n  as?: BaseListElement;\n  /**\n   * The child elements inside the list.\n   */\n  children?: ReactElement | ReactElement[];\n  /**\n   * The ARIA label describing the list. Required for accessibility when aria-describedby is not provided.\n   */\n  \"aria-label\"?: string;\n  /**\n   * The ID of an element that describes the list.\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * The ID of an element controlled by the list.\n   */\n  \"aria-controls\"?: AriaAttributes[\"aria-controls\"];\n  /**\n   * The ARIA role of the list. Defaults to \"listbox\".\n   */\n  role?: AriaRole;\n  /**\n   * The size of the list items.\n   */\n  size?: BaseListSizes;\n  /**\n   * The maximum height of the list container. Enables scrolling when content exceeds this height.\n   */\n  maxHeight?: number | string;\n  /**\n   * If true, the list will automatically focus on mount.\n   */\n  focusOnMount?: boolean;\n  /**\n   * Index of the item that should be focused initially. Defaults to 0.\n   */\n  defaultFocusIndex?: number;\n  /**\n   * Callback fired when the focused item changes.\n   */\n  onFocusChange?: (index: number, id?: string) => void;\n  /**\n   * If true, disables all keyboard navigation and focus management.\n   */\n  disabled?: boolean;\n}\n"
  },
  {
    "path": "packages/core/src/components/BaseList/__tests__/BaseList.test.tsx",
    "content": "import { vi, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { render, screen } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { BaseList } from \"../index\";\nimport BaseItem from \"../../BaseItem/BaseItem\";\nimport { type BaseListProps } from \"../BaseList.types\";\n\nfunction renderBaseList(props?: Partial<Omit<BaseListProps, \"id\">> & { id?: string }) {\n  return render(\n    <BaseList id=\"test-list\" aria-label=\"Test List\" {...props}>\n      <BaseItem item={{ label: \"Item 1\", value: \"1\" }} />\n      <BaseItem item={{ label: \"Item 2\", value: \"2\" }} />\n      <BaseItem item={{ label: \"Item 3\", value: \"3\" }} />\n    </BaseList>\n  );\n}\n\ndescribe(\"BaseList\", () => {\n  describe(\"rendering\", () => {\n    it(\"should render with default props\", () => {\n      renderBaseList();\n      expect(screen.getByRole(\"listbox\")).toBeInTheDocument();\n    });\n\n    it(\"should render children correctly\", () => {\n      renderBaseList();\n      expect(screen.getByText(\"Item 1\")).toBeInTheDocument();\n      expect(screen.getByText(\"Item 2\")).toBeInTheDocument();\n      expect(screen.getByText(\"Item 3\")).toBeInTheDocument();\n    });\n\n    it(\"should apply custom className\", () => {\n      renderBaseList({ className: \"custom-list\" });\n      expect(screen.getByRole(\"listbox\")).toHaveClass(\"custom-list\");\n    });\n\n    it(\"should render with custom element type\", () => {\n      render(\n        <BaseList id=\"ordered-list\" as=\"ol\" aria-label=\"Ordered List\">\n          <BaseItem item={{ label: \"Item 1\", value: \"1\" }} />\n        </BaseList>\n      );\n      const list = screen.getByRole(\"listbox\");\n      expect(list.tagName.toLowerCase()).toBe(\"ol\");\n    });\n  });\n\n  describe(\"accessibility\", () => {\n    it(\"should have correct aria-label\", () => {\n      renderBaseList({ \"aria-label\": \"Custom Label\" });\n      expect(screen.getByLabelText(\"Custom Label\")).toBeInTheDocument();\n    });\n\n    it(\"should have correct role\", () => {\n      renderBaseList({ role: \"menu\" });\n      expect(screen.getByRole(\"menu\")).toBeInTheDocument();\n    });\n\n    it(\"should have aria-describedby when provided\", () => {\n      render(\n        <>\n          <span id=\"description\">List description</span>\n          <BaseList id=\"described-list\" aria-label=\"Test\" aria-describedby=\"description\">\n            <BaseItem item={{ label: \"Item 1\", value: \"1\" }} />\n          </BaseList>\n        </>\n      );\n      expect(screen.getByRole(\"listbox\")).toHaveAttribute(\"aria-describedby\", \"description\");\n    });\n  });\n\n  describe(\"keyboard navigation\", () => {\n    it(\"should navigate down with arrow key\", async () => {\n      renderBaseList();\n\n      const list = screen.getByRole(\"listbox\");\n      list.focus();\n\n      const items = screen.getAllByRole(\"option\");\n      expect(items[0]).toHaveAttribute(\"tabindex\", \"0\");\n\n      await userEvent.keyboard(\"{ArrowDown}\");\n\n      // After pressing down, second item should be focusable\n      expect(items[1]).toHaveAttribute(\"tabindex\", \"0\");\n      expect(items[0]).toHaveAttribute(\"tabindex\", \"-1\");\n    });\n\n    it(\"should navigate up with arrow key\", async () => {\n      renderBaseList({ defaultFocusIndex: 2 });\n\n      const list = screen.getByRole(\"listbox\");\n      list.focus();\n\n      const items = screen.getAllByRole(\"option\");\n      expect(items[2]).toHaveAttribute(\"tabindex\", \"0\");\n\n      await userEvent.keyboard(\"{ArrowUp}\");\n\n      expect(items[1]).toHaveAttribute(\"tabindex\", \"0\");\n      expect(items[2]).toHaveAttribute(\"tabindex\", \"-1\");\n    });\n\n    it(\"should wrap to last item when pressing up from first item\", async () => {\n      renderBaseList({ defaultFocusIndex: 0 });\n\n      const list = screen.getByRole(\"listbox\");\n      list.focus();\n\n      const items = screen.getAllByRole(\"option\");\n      await userEvent.keyboard(\"{ArrowUp}\");\n\n      // Should wrap to last item\n      expect(items[2]).toHaveAttribute(\"tabindex\", \"0\");\n    });\n\n    it(\"should wrap to first item when pressing down from last item\", async () => {\n      renderBaseList({ defaultFocusIndex: 2 });\n\n      const list = screen.getByRole(\"listbox\");\n      list.focus();\n\n      const items = screen.getAllByRole(\"option\");\n      await userEvent.keyboard(\"{ArrowDown}\");\n\n      // Should wrap to first item\n      expect(items[0]).toHaveAttribute(\"tabindex\", \"0\");\n    });\n  });\n\n  describe(\"focus management\", () => {\n    it(\"should call onFocusChange when focus changes\", async () => {\n      const onFocusChange = vi.fn();\n\n      renderBaseList({ onFocusChange });\n\n      const list = screen.getByRole(\"listbox\");\n      list.focus();\n\n      await userEvent.keyboard(\"{ArrowDown}\");\n\n      expect(onFocusChange).toHaveBeenCalledWith(1, expect.any(String));\n    });\n\n    it(\"should focus list on mount when focusOnMount is true\", () => {\n      renderBaseList({ focusOnMount: true });\n\n      // Note: focusOnMount uses requestAnimationFrame, so we may need to wait\n      // This is a basic check that the component renders\n      expect(screen.getByRole(\"listbox\")).toBeInTheDocument();\n    });\n\n    it(\"should respect defaultFocusIndex\", () => {\n      renderBaseList({ defaultFocusIndex: 1 });\n\n      const items = screen.getAllByRole(\"option\");\n      expect(items[1]).toHaveAttribute(\"tabindex\", \"0\");\n      expect(items[0]).toHaveAttribute(\"tabindex\", \"-1\");\n    });\n  });\n\n  describe(\"scrollable container\", () => {\n    it(\"should apply maxHeight as CSS variable\", () => {\n      renderBaseList({ maxHeight: 200 });\n      expect(screen.getByRole(\"listbox\")).toHaveStyle({ \"--baselist-max-height\": \"200px\" });\n    });\n\n    it(\"should apply maxHeight as string via CSS variable\", () => {\n      renderBaseList({ maxHeight: \"50vh\" });\n      expect(screen.getByRole(\"listbox\")).toHaveStyle({ \"--baselist-max-height\": \"50vh\" });\n    });\n\n    it(\"should merge maxHeight with custom style prop\", () => {\n      renderBaseList({ maxHeight: 200, style: { width: \"300px\", backgroundColor: \"red\" } });\n      const list = screen.getByRole(\"listbox\");\n      expect(list).toHaveStyle({ \"--baselist-max-height\": \"200px\", width: \"300px\", backgroundColor: \"red\" });\n    });\n\n    it(\"should prioritize maxHeight prop over style.maxHeight\", () => {\n      renderBaseList({ maxHeight: 200, style: { maxHeight: \"500px\" } });\n      const list = screen.getByRole(\"listbox\");\n      // maxHeight prop sets the CSS variable, style.maxHeight is ignored since CSS uses the variable\n      expect(list).toHaveStyle({ \"--baselist-max-height\": \"200px\" });\n    });\n  });\n\n  describe(\"direction\", () => {\n    it(\"should apply dir attribute\", () => {\n      renderBaseList({ dir: \"rtl\" });\n      expect(screen.getByRole(\"listbox\")).toHaveAttribute(\"dir\", \"rtl\");\n    });\n  });\n\n  describe(\"with selected items\", () => {\n    it(\"should focus on selected item initially\", () => {\n      render(\n        <BaseList id=\"selected-list\" aria-label=\"Test List\">\n          <BaseItem item={{ label: \"Item 1\", value: \"1\" }} />\n          <BaseItem item={{ label: \"Item 2\", value: \"2\" }} selected />\n          <BaseItem item={{ label: \"Item 3\", value: \"3\" }} />\n        </BaseList>\n      );\n\n      const items = screen.getAllByRole(\"option\");\n      // The selected item (index 1) should have tabindex 0\n      expect(items[1]).toHaveAttribute(\"tabindex\", \"0\");\n    });\n  });\n\n  describe(\"with disabled items\", () => {\n    it(\"should support disabled items\", () => {\n      render(\n        <BaseList id=\"disabled-list\" aria-label=\"Test List\">\n          <BaseItem item={{ label: \"Item 1\", value: \"1\" }} />\n          <BaseItem item={{ label: \"Disabled Item\", value: \"disabled\", disabled: true }} />\n          <BaseItem item={{ label: \"Item 2\", value: \"2\" }} />\n        </BaseList>\n      );\n\n      const disabledItem = screen.getByText(\"Disabled Item\").closest(\"[role='option']\");\n      expect(disabledItem).toHaveClass(\"disabled\");\n    });\n  });\n\n  describe(\"automatic role assignment\", () => {\n    it(\"should assign role='option' to children when list role is 'listbox'\", () => {\n      renderBaseList({ role: \"listbox\" });\n      const items = screen.getAllByRole(\"option\");\n      expect(items).toHaveLength(3);\n    });\n\n    it(\"should assign role='menuitem' to children when list role is 'menu'\", () => {\n      render(\n        <BaseList id=\"menu-list\" aria-label=\"Menu\" role=\"menu\">\n          <BaseItem item={{ label: \"Action 1\", value: \"1\" }} />\n          <BaseItem item={{ label: \"Action 2\", value: \"2\" }} />\n        </BaseList>\n      );\n      const items = screen.getAllByRole(\"menuitem\");\n      expect(items).toHaveLength(2);\n    });\n\n    it(\"should allow explicit role override on individual items\", () => {\n      render(\n        <BaseList id=\"override-list\" aria-label=\"Test List\" role=\"listbox\">\n          <BaseItem item={{ label: \"Item 1\", value: \"1\" }} />\n          <BaseItem item={{ label: \"Item 2\", value: \"2\" }} role=\"menuitem\" />\n        </BaseList>\n      );\n      expect(screen.getByRole(\"option\")).toBeInTheDocument();\n      expect(screen.getByRole(\"menuitem\")).toBeInTheDocument();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/BaseList/context/BaseListContext.tsx",
    "content": "import React, { createContext, useContext, type ReactNode, type AriaRole } from \"react\";\nimport { NOOP } from \"@vibe/shared\";\nimport { type BaseListSizes } from \"../BaseList.types\";\n\nexport interface BaseListItemContextProps {\n  /**\n   * The index of this item in the list.\n   */\n  index: number;\n  /**\n   * The derived ID for this item.\n   */\n  id: string;\n  /**\n   * Whether this item is currently highlighted (has keyboard focus).\n   */\n  highlighted: boolean;\n  /**\n   * The tabIndex for this item (0 if highlighted, -1 otherwise).\n   */\n  tabIndex: number;\n  /**\n   * The HTML element to render as.\n   */\n  component: string;\n  /**\n   * The size of the item.\n   */\n  size: BaseListSizes;\n  /**\n   * The ARIA role for this item.\n   */\n  role: AriaRole | undefined;\n  /**\n   * Callback ref to register the item's DOM element.\n   */\n  refCallback: (element: HTMLElement | null) => void;\n}\n\nexport interface BaseListContextProps {\n  /**\n   * The index of the currently focused/active item.\n   */\n  activeItemIndex: number;\n  /**\n   * Callback to update the focused item by id and index.\n   */\n  updateFocusedItem: (id: string, index: number) => void;\n  /**\n   * Register an item ref for keyboard navigation.\n   */\n  registerItem: (ref: HTMLElement | null, index: number) => void;\n  /**\n   * The size of items in the list.\n   */\n  size?: BaseListSizes;\n}\n\nexport interface BaseListProviderProps {\n  value: BaseListContextProps;\n  children: ReactNode;\n}\n\nexport interface BaseListItemProviderProps {\n  value: BaseListItemContextProps;\n  children: ReactNode;\n}\n\nconst defaultListContextValue: BaseListContextProps = {\n  activeItemIndex: -1,\n  updateFocusedItem: NOOP,\n  registerItem: NOOP,\n  size: \"medium\"\n};\n\nconst BaseListContext = createContext<BaseListContextProps>(defaultListContextValue);\nconst BaseListItemContext = createContext<BaseListItemContextProps | undefined>(undefined);\n\nexport const BaseListProvider = ({ value, children }: BaseListProviderProps) => {\n  return <BaseListContext.Provider value={value}>{children}</BaseListContext.Provider>;\n};\n\nexport const BaseListItemProvider = ({ value, children }: BaseListItemProviderProps) => {\n  return <BaseListItemContext.Provider value={value}>{children}</BaseListItemContext.Provider>;\n};\n\nexport const useBaseList = (): BaseListContextProps => {\n  return useContext(BaseListContext);\n};\n\nexport const useBaseListItem = (): BaseListItemContextProps | undefined => {\n  return useContext(BaseListItemContext);\n};\n"
  },
  {
    "path": "packages/core/src/components/BaseList/hooks/useBaseListFocus.ts",
    "content": "import { useCallback, useEffect, useRef, useState } from \"react\";\nimport { findSelectedItemIndex, getItemId } from \"../utils/baseListUtils\";\n\nexport interface UseBaseListFocusProps {\n  /**\n   * Index of the item that should be focused initially.\n   */\n  defaultFocusIndex: number;\n  /**\n   * Callback fired when the focused item changes.\n   */\n  onFocusChange?: (index: number, id?: string) => void;\n  /**\n   * The unique identifier for the list.\n   */\n  listId: string | undefined;\n  /**\n   * If true, disables focus management.\n   */\n  disabled: boolean;\n}\n\nexport interface UseBaseListFocusResult {\n  /**\n   * The index of the currently focused item.\n   */\n  focusIndex: number;\n  /**\n   * The ID of the active descendant for aria-activedescendant.\n   */\n  activeDescendantId: string | undefined;\n  /**\n   * Callback to update the focused item.\n   */\n  updateFocusedItem: (itemId: string, index: number) => void;\n  /**\n   * Callback to register an item ref.\n   */\n  registerItem: (itemRef: HTMLElement | null, index: number) => void;\n  /**\n   * Ref array containing all item DOM elements.\n   */\n  childrenRefs: React.MutableRefObject<(HTMLElement | null)[]>;\n}\n\nexport const useBaseListFocus = ({\n  defaultFocusIndex,\n  onFocusChange,\n  listId,\n  disabled\n}: UseBaseListFocusProps): UseBaseListFocusResult => {\n  const childrenRefs = useRef<(HTMLElement | null)[]>([]);\n  const [isInitialized, setIsInitialized] = useState(false);\n  const [focusIndex, setFocusIndex] = useState(-1);\n  const [activeDescendantId, setActiveDescendantId] = useState<string | undefined>(undefined);\n\n  const updateFocusedItem = useCallback(\n    (itemId: string, index: number) => {\n      if (disabled) return;\n\n      setFocusIndex(index);\n      setActiveDescendantId(itemId);\n      onFocusChange?.(index, itemId);\n    },\n    [onFocusChange, disabled]\n  );\n\n  const registerItem = useCallback((itemRef: HTMLElement | null, index: number) => {\n    childrenRefs.current[index] = itemRef;\n  }, []);\n\n  useEffect(() => {\n    if (disabled || isInitialized) return;\n\n    const refs = childrenRefs.current;\n    // Wait until refs are populated\n    if (refs.length === 0 || refs.every(ref => ref === null)) return;\n\n    const selectedIndex = findSelectedItemIndex(refs);\n    const targetIndex = selectedIndex !== -1 ? selectedIndex : defaultFocusIndex;\n    const element = refs[targetIndex];\n\n    if (element) {\n      const itemId = getItemId(listId, targetIndex, element.id);\n      updateFocusedItem(itemId, targetIndex);\n      setIsInitialized(true);\n    }\n  }, [listId, disabled, defaultFocusIndex, updateFocusedItem, isInitialized]);\n\n  return {\n    focusIndex,\n    activeDescendantId,\n    updateFocusedItem,\n    registerItem,\n    childrenRefs\n  };\n};\n"
  },
  {
    "path": "packages/core/src/components/BaseList/hooks/useBaseListKeyboard.ts",
    "content": "import { useCallback } from \"react\";\nimport useKeyEvent from \"../../../hooks/useKeyEvent\";\nimport { keyCodes } from \"../../../constants/keyCodes\";\nimport {\n  findAdjacentFocusableIndex,\n  findFirstFocusableIndex,\n  findLastFocusableIndex,\n  getItemId,\n  isFocusableListItem\n} from \"../utils/baseListUtils\";\n\nexport interface UseBaseListKeyboardProps {\n  /**\n   * The index of the currently focused item.\n   */\n  focusIndex: number;\n  /**\n   * Ref array containing all item DOM elements.\n   */\n  childrenRefs: React.MutableRefObject<(HTMLElement | null)[]>;\n  /**\n   * The unique identifier for the list.\n   */\n  listId: string | undefined;\n  /**\n   * Callback to update the focused item.\n   */\n  updateFocusedItem: (itemId: string, index: number) => void;\n  /**\n   * Ref to the list container element.\n   */\n  componentRef: React.RefObject<HTMLElement>;\n  /**\n   * If true, disables keyboard navigation.\n   */\n  disabled: boolean;\n}\n\nconst NAVIGATION_KEYS: string[] = [\n  keyCodes.UP_ARROW,\n  keyCodes.DOWN_ARROW,\n  keyCodes.HOME,\n  keyCodes.END,\n  keyCodes.PAGE_UP,\n  keyCodes.PAGE_DOWN\n];\n\nconst PAGE_JUMP_SIZE = 10;\n\nconst findPageUpIndex = (refs: (HTMLElement | null)[], currentIndex: number): number | undefined => {\n  const targetIndex = Math.max(0, currentIndex - PAGE_JUMP_SIZE);\n\n  for (let i = targetIndex; i < currentIndex; i++) {\n    if (isFocusableListItem(refs[i])) {\n      return i;\n    }\n  }\n\n  const firstFocusableIndex = findFirstFocusableIndex(refs);\n  return firstFocusableIndex !== -1 ? firstFocusableIndex : undefined;\n};\n\nconst findPageDownIndex = (refs: (HTMLElement | null)[], currentIndex: number): number | undefined => {\n  const targetIndex = Math.min(refs.length - 1, currentIndex + PAGE_JUMP_SIZE);\n\n  for (let i = targetIndex; i > currentIndex; i--) {\n    if (isFocusableListItem(refs[i])) {\n      return i;\n    }\n  }\n\n  const lastFocusableIndex = findLastFocusableIndex(refs);\n  return lastFocusableIndex !== -1 ? lastFocusableIndex : undefined;\n};\n\nexport const useBaseListKeyboard = ({\n  focusIndex,\n  childrenRefs,\n  listId,\n  updateFocusedItem,\n  componentRef,\n  disabled\n}: UseBaseListKeyboardProps): void => {\n  const onKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (disabled) return;\n\n      const { key } = event;\n      const refs = childrenRefs.current;\n      let newFocusIndex: number | undefined;\n\n      switch (key) {\n        case keyCodes.UP_ARROW:\n          event.preventDefault();\n          newFocusIndex = findAdjacentFocusableIndex(refs, focusIndex, \"prev\");\n          break;\n\n        case keyCodes.DOWN_ARROW:\n          event.preventDefault();\n          newFocusIndex = findAdjacentFocusableIndex(refs, focusIndex, \"next\");\n          break;\n\n        case keyCodes.HOME:\n          event.preventDefault();\n          newFocusIndex = findFirstFocusableIndex(refs);\n          if (newFocusIndex === -1) newFocusIndex = undefined;\n          break;\n\n        case keyCodes.END:\n          event.preventDefault();\n          newFocusIndex = findLastFocusableIndex(refs);\n          if (newFocusIndex === -1) newFocusIndex = undefined;\n          break;\n\n        case keyCodes.PAGE_UP:\n          event.preventDefault();\n          newFocusIndex = findPageUpIndex(refs, focusIndex);\n          break;\n\n        case keyCodes.PAGE_DOWN:\n          event.preventDefault();\n          newFocusIndex = findPageDownIndex(refs, focusIndex);\n          break;\n\n        default:\n          return;\n      }\n\n      if (newFocusIndex !== undefined) {\n        const element = refs[newFocusIndex];\n        if (element) {\n          const itemId = getItemId(listId, newFocusIndex, element.id);\n          updateFocusedItem(itemId, newFocusIndex);\n          element.focus();\n        }\n      }\n    },\n    [focusIndex, childrenRefs, listId, updateFocusedItem, disabled]\n  );\n\n  useKeyEvent({\n    keys: NAVIGATION_KEYS,\n    callback: onKeyDown,\n    ref: componentRef\n  });\n};\n"
  },
  {
    "path": "packages/core/src/components/BaseList/index.ts",
    "content": "export { default as BaseList } from \"./BaseList\";\nexport * from \"./BaseList.types\";\nexport {\n  BaseListProvider,\n  BaseListItemProvider,\n  useBaseList,\n  useBaseListItem,\n  type BaseListContextProps,\n  type BaseListItemContextProps,\n  type BaseListProviderProps,\n  type BaseListItemProviderProps\n} from \"./context/BaseListContext\";\n"
  },
  {
    "path": "packages/core/src/components/BaseList/utils/baseListUtils.ts",
    "content": "export const VALID_ROLES = [\"option\", \"listitem\", \"menuitem\", \"tab\", \"treeitem\"];\n\nconst ROLE_MAPPING: Record<string, string> = {\n  listbox: \"option\",\n  menu: \"menuitem\",\n  menubar: \"menuitem\",\n  tablist: \"tab\",\n  tree: \"treeitem\",\n  list: \"listitem\"\n};\n\nexport const getChildRole = (listRole: string): string => ROLE_MAPPING[listRole] || \"listitem\";\n\nexport const getItemId = (listId: string, index: number, customId?: string): string => {\n  return customId || `${listId}-item-${index}`;\n};\n\nexport const isListItem = (element: HTMLElement | null): boolean => {\n  return element instanceof HTMLElement && VALID_ROLES.includes(element.getAttribute(\"role\") || \"\");\n};\n\nexport const isFocusableListItem = (element: HTMLElement | null): boolean => {\n  if (!isListItem(element)) return false;\n  return element.getAttribute(\"aria-disabled\") !== \"true\";\n};\n\nconst ELEMENT_MAPPING: Record<string, string> = {\n  ul: \"li\",\n  ol: \"li\",\n  nav: \"a\"\n};\n\nexport const getItemComponentType = (listElement: string): string => ELEMENT_MAPPING[listElement] || \"div\";\n\nexport const findAdjacentFocusableIndex = (\n  refs: (HTMLElement | null)[],\n  currentIndex: number,\n  direction: \"next\" | \"prev\",\n  shouldWrap = true\n): number | undefined => {\n  const step = direction === \"next\" ? 1 : -1;\n  let index = currentIndex + step;\n\n  while (index >= 0 && index < refs.length) {\n    if (isFocusableListItem(refs[index])) {\n      return index;\n    }\n    index += step;\n  }\n\n  if (shouldWrap) {\n    const startIndex = direction === \"next\" ? 0 : refs.length - 1;\n    index = startIndex;\n\n    while (index !== currentIndex) {\n      if (isFocusableListItem(refs[index])) {\n        return index;\n      }\n      index += step;\n\n      if (index < 0 || index >= refs.length) {\n        break;\n      }\n    }\n  }\n\n  return undefined;\n};\n\nexport const findFirstFocusableIndex = (refs: (HTMLElement | null)[]): number => {\n  return refs.findIndex(isFocusableListItem);\n};\n\nexport const findLastFocusableIndex = (refs: (HTMLElement | null)[]): number => {\n  for (let i = refs.length - 1; i >= 0; i--) {\n    if (isFocusableListItem(refs[i])) {\n      return i;\n    }\n  }\n  return -1;\n};\n\nexport const findSelectedItemIndex = (refs: (HTMLElement | null)[]): number => {\n  return refs.findIndex(element => {\n    if (!isListItem(element)) return false;\n    return element.getAttribute(\"aria-selected\") === \"true\";\n  });\n};\n"
  },
  {
    "path": "packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbContent/BreadcrumbContent.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n@import \"../../../../styles/states\";\n\n.breadcrumbContent {\n  @include vibe-text(text2, normal);\n  color: var(--secondary-text-color);\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 2px;\n  overflow: hidden;\n  text-decoration: none;\n\n  &.withoutText {\n    padding: 4px;\n  }\n}\n\na.breadcrumbContent:hover {\n  color: var(--secondary-text-color);\n  text-decoration: none;\n}\n\n.breadcrumbContent .breadcrumbText {\n  color: inherit;\n  margin: 0 4px;\n  line-height: 22px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.breadcrumbContent .breadcrumbIcon {\n  height: 14px;\n  width: 14px;\n  flex-shrink: 0;\n}\n\n.breadcrumbContent:focus {\n  outline: none;\n}\n\n.breadcrumbContent.clickable {\n  cursor: pointer;\n}\n\n.breadcrumbContent.clickable:hover,\n.breadcrumbContent:focus-within {\n  background-color: var(--primary-background-hover-color);\n  border-radius: 4px;\n}\n\n.breadcrumbContent.current {\n  color: var(--primary-text-color);\n  font-weight: 500;\n}\n\n.breadcrumbContent.disabled {\n  @include disabled;\n  pointer-events: none;\n}\n\n.breadcrumbContent.notClickable {\n  pointer-events: none;\n}\n"
  },
  {
    "path": "packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbContent/BreadcrumbContent.tsx",
    "content": "import React, { type ForwardedRef, forwardRef, useCallback, useMemo } from \"react\";\nimport { keyCodes } from \"../../../../constants\";\nimport { type VibeComponentProps } from \"../../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport cx from \"classnames\";\nimport styles from \"./BreadcrumbContent.module.scss\";\n\nexport interface BreadcrumbContentProps extends VibeComponentProps {\n  /**\n   * If true, the breadcrumb is clickable.\n   */\n  isClickable?: boolean;\n  /**\n   * The URL the breadcrumb links to.\n   */\n  link?: string;\n  /**\n   * Callback fired when the breadcrumb is clicked.\n   */\n  onClick?: () => void;\n  /**\n   * The text displayed inside the breadcrumb.\n   */\n  text?: string;\n  /**\n   * The icon displayed next to the text.\n   */\n  icon?: SubIcon;\n  /**\n   * If true, the breadcrumb represents the current page.\n   */\n  isCurrent?: boolean;\n  /**\n   * If true, the breadcrumb is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If true, the breadcrumb text is shown.\n   */\n  showText?: boolean;\n}\n\nconst iconProps = { className: styles.breadcrumbIcon, size: 14, clickable: false };\n\nexport const BreadcrumbContent: React.ForwardRefExoticComponent<BreadcrumbContentProps & React.RefAttributes<unknown>> =\n  forwardRef<unknown, BreadcrumbContentProps>(\n    (\n      { className, isClickable, link, onClick, text, icon, isCurrent, disabled = false, showText = true },\n      ref: ForwardedRef<HTMLSpanElement>\n    ) => {\n      const Icon = icon;\n\n      const onKeyDown = useCallback(\n        (event: React.KeyboardEvent) => {\n          if (event.key === keyCodes.ENTER || event.key === keyCodes.SPACE) {\n            link ? (window.parent.location.href = link) : onClick();\n          }\n        },\n        [onClick, link]\n      );\n\n      const tabIndex = useMemo(() => (disabled ? -1 : 0), [disabled]);\n\n      if (isClickable && (link || onClick)) {\n        if (link) {\n          return (\n            <a\n              className={cx(styles.breadcrumbContent, className, {\n                [styles.disabled]: disabled,\n                [styles.clickable]: isClickable,\n                [styles.current]: isCurrent,\n                [styles.withoutText]: !showText\n              })}\n              href={link}\n              onKeyDown={onKeyDown}\n              aria-current={isCurrent ? \"page\" : undefined}\n            >\n              {Icon && <Icon {...iconProps} />}\n              {showText && (\n                <span ref={ref} className={styles.breadcrumbText}>\n                  {text}\n                </span>\n              )}\n            </a>\n          );\n        }\n        return (\n          <span\n            className={cx(styles.breadcrumbContent, className, {\n              [styles.disabled]: disabled,\n              [styles.clickable]: isClickable,\n              [styles.current]: isCurrent,\n              [styles.withoutText]: !showText\n            })}\n            onClick={onClick}\n            onKeyDown={onKeyDown}\n            tabIndex={tabIndex}\n            aria-current={isCurrent ? \"page\" : undefined}\n            role=\"button\"\n          >\n            {Icon && <Icon {...iconProps} />}\n            {showText && (\n              <span ref={ref} className={styles.breadcrumbText}>\n                {text}\n              </span>\n            )}\n          </span>\n        );\n      }\n      return (\n        <span\n          className={cx(styles.breadcrumbContent, className, {\n            [styles.disabled]: disabled,\n            [styles.clickable]: isClickable,\n            [styles.current]: isCurrent,\n            [styles.notClickable]: !isClickable,\n            [styles.withoutText]: !showText\n          })}\n          aria-disabled=\"true\"\n          tabIndex={tabIndex}\n          aria-current={isCurrent ? \"page\" : undefined}\n        >\n          {Icon && <Icon {...iconProps} />}\n          {showText && (\n            <span ref={ref} className={styles.breadcrumbText}>\n              {text}\n            </span>\n          )}\n        </span>\n      );\n    }\n  );\n"
  },
  {
    "path": "packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbItem.module.scss",
    "content": ".breadcrumbItemWrapper {\n  display: inline-flex;\n  overflow: hidden;\n  list-style-type: none;\n  cursor: default;\n}\n\n.breadcrumbItemWrapper.disabled {\n  cursor: not-allowed;\n}\n"
  },
  {
    "path": "packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbItem.tsx",
    "content": "import { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { useRef } from \"react\";\nimport { useIsOverflowing } from \"@vibe/hooks\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { BreadcrumbContent } from \"./BreadcrumbContent/BreadcrumbContent\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport styles from \"./BreadcrumbItem.module.scss\";\n\nexport interface BreadcrumbItemProps extends VibeComponentProps {\n  /**\n   * The display text of the breadcrumb item.\n   */\n  text?: string;\n  /**\n   * If true, the item is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If true, the item is clickable.\n   */\n  isClickable?: boolean;\n  /**\n   * The URL the item links to if navigation is handled via a link.\n   */\n  link?: string;\n  /**\n   * Callback fired when the item is clicked.\n   */\n  onClick?: () => void;\n  /**\n   * If true, applies styling for the current page.\n   */\n  isCurrent?: boolean;\n  /**\n   * The icon displayed next to the text.\n   */\n  icon?: SubIcon;\n  /**\n   * If true, the breadcrumb text is shown.\n   */\n  showText?: boolean;\n}\n\nconst BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({\n  className,\n  text = \"\",\n  disabled,\n  isClickable = false,\n  link,\n  onClick,\n  isCurrent = false,\n  icon,\n  id,\n  showText = true,\n  \"data-testid\": dataTestId\n}) => {\n  const componentRef = useRef<HTMLSpanElement>(null);\n  const isOverflowing = useIsOverflowing({ ref: componentRef });\n\n  return (\n    <Tooltip\n      disableDialogSlide={true}\n      withoutDialog={false}\n      content={(isOverflowing || !showText) && text}\n      showTrigger={[\"mouseenter\"]}\n      hideTrigger={[\"mouseleave\"]}\n      addKeyboardHideShowTriggersByDefault={!showText}\n    >\n      <li\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.BREADCRUMB_ITEM, id)}\n        className={cx(styles.breadcrumbItemWrapper, className, {\n          [styles.disabled]: disabled\n        })}\n      >\n        <BreadcrumbContent\n          ref={componentRef}\n          isClickable={isClickable}\n          link={link}\n          onClick={onClick}\n          text={text}\n          icon={icon}\n          isCurrent={isCurrent}\n          disabled={disabled}\n          showText={showText}\n        />\n      </li>\n    </Tooltip>\n  );\n};\n\nexport default BreadcrumbItem;\n"
  },
  {
    "path": "packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/__tests__/BreadcrumbItem.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport { Board } from \"@vibe/icons\";\nimport BreadcrumbsBar from \"../../BreadcrumbsBar\";\nimport BreadcrumbItem from \"../BreadcrumbItem\";\n\ndescribe(\"BreadcrumbsItem renders correctly\", () => {\n  it(\"with empty props\", () => {\n    const tree = renderer\n      .create(\n        <BreadcrumbsBar>\n          <BreadcrumbItem />\n        </BreadcrumbsBar>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with icon\", () => {\n    const tree = renderer\n      .create(\n        <BreadcrumbsBar>\n          <BreadcrumbItem icon={Board} />\n        </BreadcrumbsBar>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with current item\", () => {\n    const tree = renderer\n      .create(\n        <BreadcrumbsBar>\n          <BreadcrumbItem isCurrent />\n        </BreadcrumbsBar>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"when disabled item\", () => {\n    const tree = renderer\n      .create(\n        <BreadcrumbsBar>\n          <BreadcrumbItem disabled />\n        </BreadcrumbsBar>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with className\", () => {\n    const tree = renderer\n      .create(\n        <BreadcrumbsBar>\n          <BreadcrumbItem className=\"test\" />\n        </BreadcrumbsBar>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with text\", () => {\n    const tree = renderer\n      .create(\n        <BreadcrumbsBar>\n          <BreadcrumbItem text=\"item\" />\n        </BreadcrumbsBar>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/__tests__/BreadcrumbItem.test.tsx",
    "content": "import { vi, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { fireEvent, render } from \"@testing-library/react\";\nimport BreadcrumbsBar from \"../../BreadcrumbsBar\";\nimport BreadcrumbItem from \"../BreadcrumbItem\";\n\nvi.useFakeTimers();\n\ndescribe(\"BreadcrumbsItem tests\", () => {\n  it(\"if navigation item, href link is correct\", () => {\n    const { getByRole } = render(\n      <BreadcrumbsBar type=\"navigation\">\n        <BreadcrumbItem text=\"Workspace\" link=\"https://www.google.com\" />\n      </BreadcrumbsBar>\n    );\n\n    const link = getByRole(\"link\");\n\n    expect(link.getAttribute(\"href\")).toBe(\"https://www.google.com\");\n  });\n\n  it(\"if navigation item, click works\", () => {\n    const onClickMock = vi.fn();\n\n    const { getByText } = render(\n      <BreadcrumbsBar type=\"navigation\">\n        <BreadcrumbItem text=\"Workspace\" onClick={onClickMock} />\n      </BreadcrumbsBar>\n    );\n\n    const item = getByText(\"Workspace\");\n    fireEvent.click(item);\n    vi.advanceTimersByTime(1000);\n\n    expect(onClickMock.mock.calls.length).toBe(1);\n  });\n\n  it(\"if indication item, click does nothing\", () => {\n    const onClickMock = vi.fn();\n\n    const { getByText } = render(\n      <BreadcrumbsBar type=\"indication\">\n        <BreadcrumbItem text=\"Workspace\" onClick={onClickMock} />\n      </BreadcrumbsBar>\n    );\n\n    const item = getByText(\"Workspace\");\n    fireEvent.click(item);\n    vi.advanceTimersByTime(1000);\n\n    expect(onClickMock.mock.calls.length).toBe(0);\n  });\n\n  it(\"click with Enter key works\", () => {\n    const onClickMock = vi.fn();\n\n    const { getByText } = render(\n      <BreadcrumbsBar type=\"navigation\">\n        <BreadcrumbItem text=\"Workspace\" onClick={onClickMock} />\n      </BreadcrumbsBar>\n    );\n\n    const item = getByText(\"Workspace\");\n    fireEvent.focus(item);\n    fireEvent.keyDown(item, { key: \"Enter\", code: \"Enter\", charCode: \"13\" });\n    vi.advanceTimersByTime(1000);\n\n    expect(onClickMock.mock.calls.length).toBe(1);\n  });\n\n  it(\"click with Space key works\", () => {\n    const onClickMock = vi.fn();\n\n    const { getByText } = render(\n      <BreadcrumbsBar type=\"navigation\">\n        <BreadcrumbItem text=\"Workspace\" onClick={onClickMock} />\n      </BreadcrumbsBar>\n    );\n\n    const item = getByText(\"Workspace\");\n    fireEvent.keyDown(item, { key: \" \", code: \"Space\", charCode: \"32\" });\n    vi.advanceTimersByTime(1000);\n\n    expect(onClickMock.mock.calls.length).toBe(1);\n  });\n\n  it(\"should call the click callback when clicked\", () => {\n    const onClickMock = vi.fn();\n    const { getByText } = render(\n      <BreadcrumbsBar>\n        <BreadcrumbItem text=\"Workspace\" onClick={onClickMock} />\n      </BreadcrumbsBar>\n    );\n    const item = getByText(\"Workspace\");\n    fireEvent.click(item);\n    expect(onClickMock.mock.calls.length).toBe(0);\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/__tests__/__snapshots__/BreadcrumbItem.snapshot.test.jsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`BreadcrumbsItem renders correctly > when disabled item 1`] = `\n<nav\n  aria-label=\"Breadcrumb\"\n  className=\"breadcrumbsBar\"\n  data-testid=\"breadcrumbs-bar\"\n  data-vibe=\"BreadcrumbsBar\"\n>\n  <ol>\n    <li\n      className=\"breadcrumbItemWrapper disabled\"\n      data-testid=\"breadcrumb-item\"\n    >\n      <span\n        aria-disabled=\"true\"\n        className=\"breadcrumbContent disabled notClickable\"\n        tabIndex={-1}\n      >\n        <span\n          className=\"breadcrumbText\"\n        >\n          \n        </span>\n      </span>\n    </li>\n  </ol>\n</nav>\n`;\n\nexports[`BreadcrumbsItem renders correctly > with className 1`] = `\n<nav\n  aria-label=\"Breadcrumb\"\n  className=\"breadcrumbsBar\"\n  data-testid=\"breadcrumbs-bar\"\n  data-vibe=\"BreadcrumbsBar\"\n>\n  <ol>\n    <li\n      className=\"breadcrumbItemWrapper test\"\n      data-testid=\"breadcrumb-item\"\n    >\n      <span\n        aria-disabled=\"true\"\n        className=\"breadcrumbContent notClickable\"\n        tabIndex={0}\n      >\n        <span\n          className=\"breadcrumbText\"\n        >\n          \n        </span>\n      </span>\n    </li>\n  </ol>\n</nav>\n`;\n\nexports[`BreadcrumbsItem renders correctly > with current item 1`] = `\n<nav\n  aria-label=\"Breadcrumb\"\n  className=\"breadcrumbsBar\"\n  data-testid=\"breadcrumbs-bar\"\n  data-vibe=\"BreadcrumbsBar\"\n>\n  <ol>\n    <li\n      className=\"breadcrumbItemWrapper\"\n      data-testid=\"breadcrumb-item\"\n    >\n      <span\n        aria-current=\"page\"\n        aria-disabled=\"true\"\n        className=\"breadcrumbContent current notClickable\"\n        tabIndex={0}\n      >\n        <span\n          className=\"breadcrumbText\"\n        >\n          \n        </span>\n      </span>\n    </li>\n  </ol>\n</nav>\n`;\n\nexports[`BreadcrumbsItem renders correctly > with empty props 1`] = `\n<nav\n  aria-label=\"Breadcrumb\"\n  className=\"breadcrumbsBar\"\n  data-testid=\"breadcrumbs-bar\"\n  data-vibe=\"BreadcrumbsBar\"\n>\n  <ol>\n    <li\n      className=\"breadcrumbItemWrapper\"\n      data-testid=\"breadcrumb-item\"\n    >\n      <span\n        aria-disabled=\"true\"\n        className=\"breadcrumbContent notClickable\"\n        tabIndex={0}\n      >\n        <span\n          className=\"breadcrumbText\"\n        >\n          \n        </span>\n      </span>\n    </li>\n  </ol>\n</nav>\n`;\n\nexports[`BreadcrumbsItem renders correctly > with icon 1`] = `\n<nav\n  aria-label=\"Breadcrumb\"\n  className=\"breadcrumbsBar\"\n  data-testid=\"breadcrumbs-bar\"\n  data-vibe=\"BreadcrumbsBar\"\n>\n  <ol>\n    <li\n      className=\"breadcrumbItemWrapper\"\n      data-testid=\"breadcrumb-item\"\n    >\n      <span\n        aria-disabled=\"true\"\n        className=\"breadcrumbContent notClickable\"\n        tabIndex={0}\n      >\n        <svg\n          className=\"breadcrumbIcon\"\n          clickable={false}\n          fill=\"currentColor\"\n          height={14}\n          viewBox=\"0 0 20 20\"\n          width={14}\n        >\n          <path\n            clipRule=\"evenodd\"\n            d=\"M7.5 4.5H16C16.2761 4.5 16.5 4.72386 16.5 5V15C16.5 15.2761 16.2761 15.5 16 15.5H7.5L7.5 4.5ZM6 4.5H4C3.72386 4.5 3.5 4.72386 3.5 5V15C3.5 15.2761 3.72386 15.5 4 15.5H6L6 4.5ZM2 5C2 3.89543 2.89543 3 4 3H16C17.1046 3 18 3.89543 18 5V15C18 16.1046 17.1046 17 16 17H4C2.89543 17 2 16.1046 2 15V5Z\"\n            fill=\"currentColor\"\n            fillRule=\"evenodd\"\n          />\n        </svg>\n        <span\n          className=\"breadcrumbText\"\n        >\n          \n        </span>\n      </span>\n    </li>\n  </ol>\n</nav>\n`;\n\nexports[`BreadcrumbsItem renders correctly > with text 1`] = `\n<nav\n  aria-label=\"Breadcrumb\"\n  className=\"breadcrumbsBar\"\n  data-testid=\"breadcrumbs-bar\"\n  data-vibe=\"BreadcrumbsBar\"\n>\n  <ol>\n    <li\n      className=\"breadcrumbItemWrapper\"\n      data-testid=\"breadcrumb-item\"\n    >\n      <span\n        aria-disabled=\"true\"\n        className=\"breadcrumbContent notClickable\"\n        tabIndex={0}\n      >\n        <span\n          className=\"breadcrumbText\"\n        >\n          item\n        </span>\n      </span>\n    </li>\n  </ol>\n</nav>\n`;\n"
  },
  {
    "path": "packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/__tests__/__snapshots__/BreadcrumbItem.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`BreadcrumbsItem renders correctly > when disabled item 1`] = `\n<nav\n  aria-label=\"Breadcrumb\"\n  className=\"breadcrumbsBar\"\n  data-testid=\"breadcrumbs-bar\"\n  data-vibe=\"BreadcrumbsBar\"\n>\n  <ol>\n    <li\n      className=\"breadcrumbItemWrapper disabled\"\n      data-testid=\"breadcrumb-item\"\n    >\n      <span\n        aria-disabled=\"true\"\n        className=\"breadcrumbContent disabled notClickable\"\n        tabIndex={-1}\n      >\n        <span\n          className=\"breadcrumbText\"\n        >\n          \n        </span>\n      </span>\n    </li>\n  </ol>\n</nav>\n`;\n\nexports[`BreadcrumbsItem renders correctly > with className 1`] = `\n<nav\n  aria-label=\"Breadcrumb\"\n  className=\"breadcrumbsBar\"\n  data-testid=\"breadcrumbs-bar\"\n  data-vibe=\"BreadcrumbsBar\"\n>\n  <ol>\n    <li\n      className=\"breadcrumbItemWrapper test\"\n      data-testid=\"breadcrumb-item\"\n    >\n      <span\n        aria-disabled=\"true\"\n        className=\"breadcrumbContent notClickable\"\n        tabIndex={0}\n      >\n        <span\n          className=\"breadcrumbText\"\n        >\n          \n        </span>\n      </span>\n    </li>\n  </ol>\n</nav>\n`;\n\nexports[`BreadcrumbsItem renders correctly > with current item 1`] = `\n<nav\n  aria-label=\"Breadcrumb\"\n  className=\"breadcrumbsBar\"\n  data-testid=\"breadcrumbs-bar\"\n  data-vibe=\"BreadcrumbsBar\"\n>\n  <ol>\n    <li\n      className=\"breadcrumbItemWrapper\"\n      data-testid=\"breadcrumb-item\"\n    >\n      <span\n        aria-current=\"page\"\n        aria-disabled=\"true\"\n        className=\"breadcrumbContent current notClickable\"\n        tabIndex={0}\n      >\n        <span\n          className=\"breadcrumbText\"\n        >\n          \n        </span>\n      </span>\n    </li>\n  </ol>\n</nav>\n`;\n\nexports[`BreadcrumbsItem renders correctly > with empty props 1`] = `\n<nav\n  aria-label=\"Breadcrumb\"\n  className=\"breadcrumbsBar\"\n  data-testid=\"breadcrumbs-bar\"\n  data-vibe=\"BreadcrumbsBar\"\n>\n  <ol>\n    <li\n      className=\"breadcrumbItemWrapper\"\n      data-testid=\"breadcrumb-item\"\n    >\n      <span\n        aria-disabled=\"true\"\n        className=\"breadcrumbContent notClickable\"\n        tabIndex={0}\n      >\n        <span\n          className=\"breadcrumbText\"\n        >\n          \n        </span>\n      </span>\n    </li>\n  </ol>\n</nav>\n`;\n\nexports[`BreadcrumbsItem renders correctly > with icon 1`] = `\n<nav\n  aria-label=\"Breadcrumb\"\n  className=\"breadcrumbsBar\"\n  data-testid=\"breadcrumbs-bar\"\n  data-vibe=\"BreadcrumbsBar\"\n>\n  <ol>\n    <li\n      className=\"breadcrumbItemWrapper\"\n      data-testid=\"breadcrumb-item\"\n    >\n      <span\n        aria-disabled=\"true\"\n        className=\"breadcrumbContent notClickable\"\n        tabIndex={0}\n      >\n        <svg\n          className=\"breadcrumbIcon\"\n          clickable={false}\n          fill=\"currentColor\"\n          height={14}\n          viewBox=\"0 0 20 20\"\n          width={14}\n        >\n          <path\n            clipRule=\"evenodd\"\n            d=\"M7.5 4.5H16C16.2761 4.5 16.5 4.72386 16.5 5V15C16.5 15.2761 16.2761 15.5 16 15.5H7.5L7.5 4.5ZM6 4.5H4C3.72386 4.5 3.5 4.72386 3.5 5V15C3.5 15.2761 3.72386 15.5 4 15.5H6L6 4.5ZM2 5C2 3.89543 2.89543 3 4 3H16C17.1046 3 18 3.89543 18 5V15C18 16.1046 17.1046 17 16 17H4C2.89543 17 2 16.1046 2 15V5Z\"\n            fill=\"currentColor\"\n            fillRule=\"evenodd\"\n          />\n        </svg>\n        <span\n          className=\"breadcrumbText\"\n        >\n          \n        </span>\n      </span>\n    </li>\n  </ol>\n</nav>\n`;\n\nexports[`BreadcrumbsItem renders correctly > with text 1`] = `\n<nav\n  aria-label=\"Breadcrumb\"\n  className=\"breadcrumbsBar\"\n  data-testid=\"breadcrumbs-bar\"\n  data-vibe=\"BreadcrumbsBar\"\n>\n  <ol>\n    <li\n      className=\"breadcrumbItemWrapper\"\n      data-testid=\"breadcrumb-item\"\n    >\n      <span\n        aria-disabled=\"true\"\n        className=\"breadcrumbContent notClickable\"\n        tabIndex={0}\n      >\n        <span\n          className=\"breadcrumbText\"\n        >\n          item\n        </span>\n      </span>\n    </li>\n  </ol>\n</nav>\n`;\n"
  },
  {
    "path": "packages/core/src/components/BreadcrumbsBar/BreadcrumbMenu/BreadcrumbMenu.tsx",
    "content": "import React, { forwardRef } from \"react\";\nimport MenuButton from \"../../MenuButton/MenuButton\";\nimport { Menu } from \"../../Menu\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport styles from \"./BreadcrumbsMenu.module.scss\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\n\nexport interface BreadcrumbMenuProps extends VibeComponentProps {\n  children: React.ReactNode;\n}\nconst BreadcrumbMenu = forwardRef(\n  (\n    { children, id, \"data-testid\": dataTestId, ...props }: BreadcrumbMenuProps,\n    ref: React.ForwardedRef<HTMLLIElement>\n  ) => {\n    const menuButtonId = id || \"breadcrumb-menu-button\";\n    const menuId = `${menuButtonId}-menu`;\n\n    return (\n      <li className={styles.breadcrumbMenuWrapper} {...props}>\n        <MenuButton\n          id={menuButtonId}\n          size={\"xxs\"}\n          closeMenuOnItemClick\n          aria-label={\"Hidden breadcrumbs menu\"}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.BREADCRUMB_MENU, id)}\n          aria-controls={menuId}\n          ref={ref}\n        >\n          <Menu id={menuId} size={\"medium\"} focusItemIndexOnMount={0} aria-label=\"Expanded breadcrumbs menu\">\n            {children}\n          </Menu>\n        </MenuButton>\n      </li>\n    );\n  }\n);\n\nexport default BreadcrumbMenu;\n"
  },
  {
    "path": "packages/core/src/components/BreadcrumbsBar/BreadcrumbMenu/BreadcrumbMenuItem/BreadcrumbMenuItem.tsx",
    "content": "import React, { forwardRef, type ForwardRefExoticComponent, type RefAttributes } from \"react\";\nimport { MenuItem, type MenuItemProps } from \"../../../Menu\";\nimport { getTestId } from \"../../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../../tests/constants\";\n\nexport interface BreadcrumbMenuItemProps extends MenuItemProps {\n  /** Link to navigate to when item is clicked */\n  link?: string;\n}\n\ninterface BreadcrumbMenuItemComponent\n  extends ForwardRefExoticComponent<BreadcrumbMenuItemProps & RefAttributes<unknown>> {\n  isMenuChild?: boolean;\n  isSelectable?: boolean;\n}\n\nconst BreadcrumbMenuItem: BreadcrumbMenuItemComponent = forwardRef<unknown, BreadcrumbMenuItemProps>(\n  (\n    { id, \"data-testid\": dataTestId, link, onClick, ...rest }: BreadcrumbMenuItemProps,\n    ref: React.ForwardedRef<HTMLLIElement>\n  ) => {\n    const handleClick = link\n      ? (event: React.MouseEvent | React.KeyboardEvent) => {\n          if (onClick) onClick(event);\n          if (link) window.open(link);\n        }\n      : onClick;\n\n    return (\n      <MenuItem\n        id={id}\n        onClick={handleClick}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.BREADCRUMB_MENU_ITEM, id)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  }\n);\n\nBreadcrumbMenuItem.isMenuChild = true;\nBreadcrumbMenuItem.isSelectable = true;\n\nexport default BreadcrumbMenuItem;\n"
  },
  {
    "path": "packages/core/src/components/BreadcrumbsBar/BreadcrumbMenu/BreadcrumbsMenu.module.scss",
    "content": ".breadcrumbMenuWrapper {\n  display: inline-flex;\n  overflow: hidden;\n  list-style-type: none;\n  cursor: default;\n}\n"
  },
  {
    "path": "packages/core/src/components/BreadcrumbsBar/BreadcrumbMenu/__tests__/BreadcrumbMenu.snapshot.test.tsx",
    "content": "import { vi, beforeEach, afterEach, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport BreadcrumbMenu from \"../BreadcrumbMenu\";\nimport BreadcrumbMenuItem from \"../BreadcrumbMenuItem/BreadcrumbMenuItem\";\nimport { mockRequestAnimationFrame, restoreRequestAnimationFrameMock } from \"../../../../tests/__tests__/test-utils\";\nimport { Filter, Work, Pin } from \"@vibe/icons\";\n\ndescribe(\"BreadcrumbMenu\", () => {\n  beforeEach(() => {\n    mockRequestAnimationFrame();\n  });\n\n  afterEach(() => {\n    restoreRequestAnimationFrameMock();\n  });\n\n  it(\"renders correctly with empty props\", () => {\n    const tree = renderer\n      .create(\n        <BreadcrumbMenu>\n          <BreadcrumbMenuItem title=\"Option 1\" />\n          <BreadcrumbMenuItem title=\"Option 2\" />\n        </BreadcrumbMenu>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with custom className\", () => {\n    const tree = renderer\n      .create(\n        <BreadcrumbMenu className=\"custom-class\">\n          <BreadcrumbMenuItem title=\"Option 1\" />\n          <BreadcrumbMenuItem title=\"Option 2\" />\n        </BreadcrumbMenu>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with various MenuItem props\", () => {\n    const onClickMock = vi.fn();\n\n    const tree = renderer\n      .create(\n        <BreadcrumbMenu>\n          <BreadcrumbMenuItem title=\"Filter Items\" icon={Filter} onClick={onClickMock} />\n          <BreadcrumbMenuItem title=\"Documentation\" icon={Work} link=\"https://docs.example.com\" />\n          <BreadcrumbMenuItem\n            title=\"Pin Dashboard\"\n            icon={Pin}\n            onClick={onClickMock}\n            link=\"https://pinned.example.com\"\n          />\n        </BreadcrumbMenu>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/BreadcrumbsBar/BreadcrumbMenu/__tests__/BreadcrumbMenu.test.tsx",
    "content": "import { vi, beforeEach, afterEach, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { fireEvent, render, screen, waitFor } from \"@testing-library/react\";\nimport { act } from \"react-dom/test-utils\";\nimport BreadcrumbsBar from \"../../BreadcrumbsBar\";\nimport BreadcrumbMenu from \"../BreadcrumbMenu\";\nimport BreadcrumbMenuItem from \"../BreadcrumbMenuItem/BreadcrumbMenuItem\";\nimport { mockRequestAnimationFrame, restoreRequestAnimationFrameMock } from \"../../../../tests/__tests__/test-utils\";\n\nvi.useFakeTimers();\n\nvi.mock(\"../../../Menu/MenuItem/MenuItem\", () => {\n  return {\n    __esModule: true,\n    default: vi.fn(props => {\n      if (props.onClick && props.title === \"Click Test\") {\n        props.onClick({});\n      }\n      return <li data-testid=\"menu-item-mock\">{props.title}</li>;\n    })\n  };\n});\n\ndescribe(\"BreadcrumbMenu tests\", () => {\n  beforeEach(() => {\n    mockRequestAnimationFrame();\n  });\n\n  afterEach(() => {\n    restoreRequestAnimationFrameMock();\n    vi.clearAllMocks();\n  });\n\n  it(\"should open menu when clicked\", async () => {\n    const { getByRole, queryByText } = render(\n      <BreadcrumbsBar type=\"navigation\">\n        <BreadcrumbMenu>\n          <BreadcrumbMenuItem title=\"Option 1\" />\n          <BreadcrumbMenuItem title=\"Option 2\" />\n        </BreadcrumbMenu>\n      </BreadcrumbsBar>\n    );\n\n    expect(queryByText(\"Option 1\")).toBeNull();\n\n    const menuButton = getByRole(\"button\");\n\n    act(() => {\n      fireEvent.click(menuButton);\n      vi.runAllTimers();\n    });\n\n    await waitFor(() => {\n      expect(screen.getByText(\"Option 1\")).toBeInTheDocument();\n      expect(screen.getByText(\"Option 2\")).toBeInTheDocument();\n    });\n  });\n\n  it(\"should pass onClick handlers to MenuItem\", () => {\n    const onClickMock = vi.fn();\n\n    render(<BreadcrumbMenuItem title=\"Click Test\" onClick={onClickMock} />);\n\n    expect(onClickMock).toHaveBeenCalled();\n  });\n\n  it(\"should pass link to MenuItem\", () => {\n    const originalOpen = window.open;\n    window.open = vi.fn();\n\n    const onClickMock = vi.fn();\n\n    const { getByTestId } = render(\n      <BreadcrumbMenuItem title=\"Link Test\" onClick={onClickMock} link=\"https://example.com\" />\n    );\n\n    expect(getByTestId(\"menu-item-mock\")).toBeInTheDocument();\n\n    window.open = originalOpen;\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/BreadcrumbsBar/BreadcrumbMenu/__tests__/__snapshots__/BreadcrumbMenu.snapshot.test.jsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`BreadcrumbMenu > renders correctly with custom className 1`] = `\n<li\n  className=\"custom-class\"\n>\n  <button\n    aria-controls=\"breadcrumb-menu-button-menu\"\n    aria-disabled={false}\n    aria-expanded={false}\n    aria-haspopup=\"true\"\n    aria-label=\"Hidden breadcrumbs menu\"\n    className=\"wrapper sizeXxs\"\n    data-testid=\"breadcrumb-menu\"\n    data-vibe=\"MenuButton\"\n    id=\"breadcrumb-menu-button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    onMouseUp={[Function]}\n    type=\"button\"\n  >\n    <svg\n      aria-hidden=\"true\"\n      fill=\"currentColor\"\n      height=\"16\"\n      role=\"img\"\n      viewBox=\"0 0 20 20\"\n      width=\"16\"\n    >\n      <path\n        d=\"M6 10.5C6 11.3284 5.32843 12 4.5 12 3.67157 12 3 11.3284 3 10.5 3 9.67157 3.67157 9 4.5 9 5.32843 9 6 9.67157 6 10.5zM11.8333 10.5C11.8333 11.3284 11.1618 12 10.3333 12 9.50492 12 8.83334 11.3284 8.83334 10.5 8.83334 9.67157 9.50492 9 10.3333 9 11.1618 9 11.8333 9.67157 11.8333 10.5zM17.6667 10.5C17.6667 11.3284 16.9951 12 16.1667 12 15.3383 12 14.6667 11.3284 14.6667 10.5 14.6667 9.67157 15.3383 9 16.1667 9 16.9951 9 17.6667 9.67157 17.6667 10.5z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  </button>\n</li>\n`;\n\nexports[`BreadcrumbMenu > renders correctly with empty props 1`] = `\n<li\n  className=\"breadcrumbMenuWrapper\"\n>\n  <button\n    aria-controls=\"breadcrumb-menu-button-menu\"\n    aria-disabled={false}\n    aria-expanded={false}\n    aria-haspopup=\"true\"\n    aria-label=\"Hidden breadcrumbs menu\"\n    className=\"wrapper sizeXxs\"\n    data-testid=\"breadcrumb-menu\"\n    data-vibe=\"MenuButton\"\n    id=\"breadcrumb-menu-button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    onMouseUp={[Function]}\n    type=\"button\"\n  >\n    <svg\n      aria-hidden=\"true\"\n      fill=\"currentColor\"\n      height=\"16\"\n      role=\"img\"\n      viewBox=\"0 0 20 20\"\n      width=\"16\"\n    >\n      <path\n        d=\"M6 10.5C6 11.3284 5.32843 12 4.5 12 3.67157 12 3 11.3284 3 10.5 3 9.67157 3.67157 9 4.5 9 5.32843 9 6 9.67157 6 10.5zM11.8333 10.5C11.8333 11.3284 11.1618 12 10.3333 12 9.50492 12 8.83334 11.3284 8.83334 10.5 8.83334 9.67157 9.50492 9 10.3333 9 11.1618 9 11.8333 9.67157 11.8333 10.5zM17.6667 10.5C17.6667 11.3284 16.9951 12 16.1667 12 15.3383 12 14.6667 11.3284 14.6667 10.5 14.6667 9.67157 15.3383 9 16.1667 9 16.9951 9 17.6667 9.67157 17.6667 10.5z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  </button>\n</li>\n`;\n\nexports[`BreadcrumbMenu > renders correctly with various MenuItem props 1`] = `\n<li\n  className=\"breadcrumbMenuWrapper\"\n>\n  <button\n    aria-controls=\"breadcrumb-menu-button-menu\"\n    aria-disabled={false}\n    aria-expanded={false}\n    aria-haspopup=\"true\"\n    aria-label=\"Hidden breadcrumbs menu\"\n    className=\"wrapper sizeXxs\"\n    data-testid=\"breadcrumb-menu\"\n    data-vibe=\"MenuButton\"\n    id=\"breadcrumb-menu-button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    onMouseUp={[Function]}\n    type=\"button\"\n  >\n    <svg\n      aria-hidden=\"true\"\n      fill=\"currentColor\"\n      height=\"16\"\n      role=\"img\"\n      viewBox=\"0 0 20 20\"\n      width=\"16\"\n    >\n      <path\n        d=\"M6 10.5C6 11.3284 5.32843 12 4.5 12 3.67157 12 3 11.3284 3 10.5 3 9.67157 3.67157 9 4.5 9 5.32843 9 6 9.67157 6 10.5zM11.8333 10.5C11.8333 11.3284 11.1618 12 10.3333 12 9.50492 12 8.83334 11.3284 8.83334 10.5 8.83334 9.67157 9.50492 9 10.3333 9 11.1618 9 11.8333 9.67157 11.8333 10.5zM17.6667 10.5C17.6667 11.3284 16.9951 12 16.1667 12 15.3383 12 14.6667 11.3284 14.6667 10.5 14.6667 9.67157 15.3383 9 16.1667 9 16.9951 9 17.6667 9.67157 17.6667 10.5z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  </button>\n</li>\n`;\n"
  },
  {
    "path": "packages/core/src/components/BreadcrumbsBar/BreadcrumbMenu/__tests__/__snapshots__/BreadcrumbMenu.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`BreadcrumbMenu > renders correctly with custom className 1`] = `\n<li\n  className=\"custom-class\"\n>\n  <button\n    aria-controls=\"breadcrumb-menu-button-menu\"\n    aria-disabled={false}\n    aria-expanded={false}\n    aria-haspopup=\"true\"\n    aria-label=\"Hidden breadcrumbs menu\"\n    className=\"wrapper sizeXxs\"\n    data-testid=\"breadcrumb-menu\"\n    data-vibe=\"MenuButton\"\n    id=\"breadcrumb-menu-button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    onMouseUp={[Function]}\n    type=\"button\"\n  >\n    <svg\n      aria-hidden=\"true\"\n      fill=\"currentColor\"\n      height=\"16\"\n      role=\"img\"\n      viewBox=\"0 0 20 20\"\n      width=\"16\"\n    >\n      <path\n        d=\"M6 10.5C6 11.3284 5.32843 12 4.5 12 3.67157 12 3 11.3284 3 10.5 3 9.67157 3.67157 9 4.5 9 5.32843 9 6 9.67157 6 10.5zM11.8333 10.5C11.8333 11.3284 11.1618 12 10.3333 12 9.50492 12 8.83334 11.3284 8.83334 10.5 8.83334 9.67157 9.50492 9 10.3333 9 11.1618 9 11.8333 9.67157 11.8333 10.5zM17.6667 10.5C17.6667 11.3284 16.9951 12 16.1667 12 15.3383 12 14.6667 11.3284 14.6667 10.5 14.6667 9.67157 15.3383 9 16.1667 9 16.9951 9 17.6667 9.67157 17.6667 10.5z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  </button>\n</li>\n`;\n\nexports[`BreadcrumbMenu > renders correctly with empty props 1`] = `\n<li\n  className=\"breadcrumbMenuWrapper\"\n>\n  <button\n    aria-controls=\"breadcrumb-menu-button-menu\"\n    aria-disabled={false}\n    aria-expanded={false}\n    aria-haspopup=\"true\"\n    aria-label=\"Hidden breadcrumbs menu\"\n    className=\"wrapper sizeXxs\"\n    data-testid=\"breadcrumb-menu\"\n    data-vibe=\"MenuButton\"\n    id=\"breadcrumb-menu-button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    onMouseUp={[Function]}\n    type=\"button\"\n  >\n    <svg\n      aria-hidden=\"true\"\n      fill=\"currentColor\"\n      height=\"16\"\n      role=\"img\"\n      viewBox=\"0 0 20 20\"\n      width=\"16\"\n    >\n      <path\n        d=\"M6 10.5C6 11.3284 5.32843 12 4.5 12 3.67157 12 3 11.3284 3 10.5 3 9.67157 3.67157 9 4.5 9 5.32843 9 6 9.67157 6 10.5zM11.8333 10.5C11.8333 11.3284 11.1618 12 10.3333 12 9.50492 12 8.83334 11.3284 8.83334 10.5 8.83334 9.67157 9.50492 9 10.3333 9 11.1618 9 11.8333 9.67157 11.8333 10.5zM17.6667 10.5C17.6667 11.3284 16.9951 12 16.1667 12 15.3383 12 14.6667 11.3284 14.6667 10.5 14.6667 9.67157 15.3383 9 16.1667 9 16.9951 9 17.6667 9.67157 17.6667 10.5z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  </button>\n</li>\n`;\n\nexports[`BreadcrumbMenu > renders correctly with various MenuItem props 1`] = `\n<li\n  className=\"breadcrumbMenuWrapper\"\n>\n  <button\n    aria-controls=\"breadcrumb-menu-button-menu\"\n    aria-disabled={false}\n    aria-expanded={false}\n    aria-haspopup=\"true\"\n    aria-label=\"Hidden breadcrumbs menu\"\n    className=\"wrapper sizeXxs\"\n    data-testid=\"breadcrumb-menu\"\n    data-vibe=\"MenuButton\"\n    id=\"breadcrumb-menu-button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    onMouseUp={[Function]}\n    type=\"button\"\n  >\n    <svg\n      aria-hidden=\"true\"\n      fill=\"currentColor\"\n      height=\"16\"\n      role=\"img\"\n      viewBox=\"0 0 20 20\"\n      width=\"16\"\n    >\n      <path\n        d=\"M6 10.5C6 11.3284 5.32843 12 4.5 12 3.67157 12 3 11.3284 3 10.5 3 9.67157 3.67157 9 4.5 9 5.32843 9 6 9.67157 6 10.5zM11.8333 10.5C11.8333 11.3284 11.1618 12 10.3333 12 9.50492 12 8.83334 11.3284 8.83334 10.5 8.83334 9.67157 9.50492 9 10.3333 9 11.1618 9 11.8333 9.67157 11.8333 10.5zM17.6667 10.5C17.6667 11.3284 16.9951 12 16.1667 12 15.3383 12 14.6667 11.3284 14.6667 10.5 14.6667 9.67157 15.3383 9 16.1667 9 16.9951 9 17.6667 9.67157 17.6667 10.5z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  </button>\n</li>\n`;\n"
  },
  {
    "path": "packages/core/src/components/BreadcrumbsBar/Breadcrumbs.types.ts",
    "content": "export type BreadcrumbsBarType = \"navigation\" | \"indication\";\n"
  },
  {
    "path": "packages/core/src/components/BreadcrumbsBar/BreadcrumbsBar.module.scss",
    "content": ".breadcrumbsBar ol {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: nowrap;\n}\n\n.breadcrumbsBar ol .separatorIcon {\n  color: var(--secondary-text-color);\n  flex-shrink: 0;\n}\n"
  },
  {
    "path": "packages/core/src/components/BreadcrumbsBar/BreadcrumbsBar.tsx",
    "content": "import React, { type ReactElement } from \"react\";\nimport cx from \"classnames\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { NavigationChevronRight } from \"@vibe/icons\";\nimport { type BreadcrumbsBarType } from \"./Breadcrumbs.types\";\nimport { type BreadcrumbItemProps } from \"./BreadcrumbItem/BreadcrumbItem\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./BreadcrumbsBar.module.scss\";\nimport { type BreadcrumbMenuProps } from \"./BreadcrumbMenu/BreadcrumbMenu\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface BreadcrumbBarProps extends VibeComponentProps {\n  /**\n   * The type of the breadcrumb bar, determining if it is navigational or for indication only.\n   */\n  type: BreadcrumbsBarType;\n  /**\n   * The breadcrumb items displayed in the bar.\n   */\n  children:\n    | ReactElement<BreadcrumbItemProps | BreadcrumbMenuProps>\n    | ReactElement<BreadcrumbItemProps | BreadcrumbMenuProps>[];\n}\n\nconst BreadcrumbsBar = ({\n  className,\n  children,\n  type = \"indication\",\n  id,\n  \"data-testid\": dataTestId\n}: BreadcrumbBarProps) => (\n  <nav\n    aria-label=\"Breadcrumb\"\n    className={cx(styles.breadcrumbsBar, className)}\n    id={id}\n    data-testid={dataTestId || getTestId(ComponentDefaultTestId.BREADCRUMBS_BAR, id)}\n    data-vibe={ComponentVibeId.BREADCRUMBS_BAR}\n  >\n    <ol>\n      {children &&\n        React.Children.map(children, (child, index) =>\n          React.isValidElement(child)\n            ? [\n                index > 0 && <NavigationChevronRight className={styles.separatorIcon} size=\"14\" aria-hidden=\"true\" />,\n                React.cloneElement(child, {\n                  ...child?.props,\n                  isClickable: type !== \"indication\"\n                })\n              ]\n            : null\n        )}\n    </ol>\n  </nav>\n);\n\nexport default BreadcrumbsBar;\n"
  },
  {
    "path": "packages/core/src/components/BreadcrumbsBar/__tests__/BreadcrumbsBar.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport BreadcrumbsBar from \"../BreadcrumbsBar\";\nimport BreadcrumbItem from \"../BreadcrumbItem/BreadcrumbItem\";\nimport BreadcrumbMenu from \"../BreadcrumbMenu/BreadcrumbMenu\";\nimport BreadcrumbMenuItem from \"../BreadcrumbMenu/BreadcrumbMenuItem/BreadcrumbMenuItem\";\n\ndescribe(\"BreadcrumbsBar renders correctly\", () => {\n  it(\"with empty props\", () => {\n    const tree = renderer.create(<BreadcrumbsBar />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with bar type\", () => {\n    Object.values([\"default\", \"divider\", \"hidden\"]).forEach(type => {\n      const tree = renderer.create(<BreadcrumbsBar type={type} />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n  });\n\n  it(\"with children\", () => {\n    const tree = renderer\n      .create(\n        <BreadcrumbsBar>\n          <BreadcrumbItem text=\"Workspace\" />\n          <BreadcrumbItem text=\"Board\" />\n        </BreadcrumbsBar>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with breadcrumb menu\", () => {\n    const tree = renderer\n      .create(\n        <BreadcrumbsBar>\n          <BreadcrumbItem text=\"Board\" />\n          <BreadcrumbMenu>\n            <BreadcrumbMenuItem title=\"Item 1\" />\n            <BreadcrumbMenuItem title=\"Item 2\" />\n          </BreadcrumbMenu>\n          <BreadcrumbItem text=\"My Item\" isCurrent />\n        </BreadcrumbsBar>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/BreadcrumbsBar/__tests__/__snapshots__/BreadcrumbsBar.snapshot.test.jsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`BreadcrumbsBar renders correctly > with bar type 1`] = `\n<nav\n  aria-label=\"Breadcrumb\"\n  className=\"breadcrumbsBar\"\n  data-testid=\"breadcrumbs-bar\"\n  data-vibe=\"BreadcrumbsBar\"\n>\n  <ol />\n</nav>\n`;\n\nexports[`BreadcrumbsBar renders correctly > with bar type 2`] = `\n<nav\n  aria-label=\"Breadcrumb\"\n  className=\"breadcrumbsBar\"\n  data-testid=\"breadcrumbs-bar\"\n  data-vibe=\"BreadcrumbsBar\"\n>\n  <ol />\n</nav>\n`;\n\nexports[`BreadcrumbsBar renders correctly > with bar type 3`] = `\n<nav\n  aria-label=\"Breadcrumb\"\n  className=\"breadcrumbsBar\"\n  data-testid=\"breadcrumbs-bar\"\n  data-vibe=\"BreadcrumbsBar\"\n>\n  <ol />\n</nav>\n`;\n\nexports[`BreadcrumbsBar renders correctly > with breadcrumb menu 1`] = `\n<nav\n  aria-label=\"Breadcrumb\"\n  className=\"breadcrumbsBar\"\n  data-testid=\"breadcrumbs-bar\"\n  data-vibe=\"BreadcrumbsBar\"\n>\n  <ol>\n    <li\n      className=\"breadcrumbItemWrapper\"\n      data-testid=\"breadcrumb-item\"\n    >\n      <span\n        aria-disabled=\"true\"\n        className=\"breadcrumbContent notClickable\"\n        tabIndex={0}\n      >\n        <span\n          className=\"breadcrumbText\"\n        >\n          Board\n        </span>\n      </span>\n    </li>\n    <svg\n      aria-hidden=\"true\"\n      className=\"separatorIcon\"\n      fill=\"currentColor\"\n      height=\"14\"\n      viewBox=\"0 0 20 20\"\n      width=\"14\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303L13 10L13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n    <li\n      className=\"breadcrumbMenuWrapper\"\n      isClickable={false}\n    >\n      <button\n        aria-controls=\"breadcrumb-menu-button-menu\"\n        aria-disabled={false}\n        aria-expanded={false}\n        aria-haspopup=\"true\"\n        aria-label=\"Hidden breadcrumbs menu\"\n        className=\"wrapper sizeXxs\"\n        data-testid=\"breadcrumb-menu\"\n        data-vibe=\"MenuButton\"\n        id=\"breadcrumb-menu-button\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onMouseDown={[Function]}\n        onMouseEnter={[Function]}\n        onMouseLeave={[Function]}\n        onMouseUp={[Function]}\n        type=\"button\"\n      >\n        <svg\n          aria-hidden=\"true\"\n          fill=\"currentColor\"\n          height=\"16\"\n          role=\"img\"\n          viewBox=\"0 0 20 20\"\n          width=\"16\"\n        >\n          <path\n            d=\"M6 10.5C6 11.3284 5.32843 12 4.5 12 3.67157 12 3 11.3284 3 10.5 3 9.67157 3.67157 9 4.5 9 5.32843 9 6 9.67157 6 10.5zM11.8333 10.5C11.8333 11.3284 11.1618 12 10.3333 12 9.50492 12 8.83334 11.3284 8.83334 10.5 8.83334 9.67157 9.50492 9 10.3333 9 11.1618 9 11.8333 9.67157 11.8333 10.5zM17.6667 10.5C17.6667 11.3284 16.9951 12 16.1667 12 15.3383 12 14.6667 11.3284 14.6667 10.5 14.6667 9.67157 15.3383 9 16.1667 9 16.9951 9 17.6667 9.67157 17.6667 10.5z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </button>\n    </li>\n    <svg\n      aria-hidden=\"true\"\n      className=\"separatorIcon\"\n      fill=\"currentColor\"\n      height=\"14\"\n      viewBox=\"0 0 20 20\"\n      width=\"14\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303L13 10L13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n    <li\n      className=\"breadcrumbItemWrapper\"\n      data-testid=\"breadcrumb-item\"\n    >\n      <span\n        aria-current=\"page\"\n        aria-disabled=\"true\"\n        className=\"breadcrumbContent current notClickable\"\n        tabIndex={0}\n      >\n        <span\n          className=\"breadcrumbText\"\n        >\n          My Item\n        </span>\n      </span>\n    </li>\n  </ol>\n</nav>\n`;\n\nexports[`BreadcrumbsBar renders correctly > with children 1`] = `\n<nav\n  aria-label=\"Breadcrumb\"\n  className=\"breadcrumbsBar\"\n  data-testid=\"breadcrumbs-bar\"\n  data-vibe=\"BreadcrumbsBar\"\n>\n  <ol>\n    <li\n      className=\"breadcrumbItemWrapper\"\n      data-testid=\"breadcrumb-item\"\n    >\n      <span\n        aria-disabled=\"true\"\n        className=\"breadcrumbContent notClickable\"\n        tabIndex={0}\n      >\n        <span\n          className=\"breadcrumbText\"\n        >\n          Workspace\n        </span>\n      </span>\n    </li>\n    <svg\n      aria-hidden=\"true\"\n      className=\"separatorIcon\"\n      fill=\"currentColor\"\n      height=\"14\"\n      viewBox=\"0 0 20 20\"\n      width=\"14\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303L13 10L13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n    <li\n      className=\"breadcrumbItemWrapper\"\n      data-testid=\"breadcrumb-item\"\n    >\n      <span\n        aria-disabled=\"true\"\n        className=\"breadcrumbContent notClickable\"\n        tabIndex={0}\n      >\n        <span\n          className=\"breadcrumbText\"\n        >\n          Board\n        </span>\n      </span>\n    </li>\n  </ol>\n</nav>\n`;\n\nexports[`BreadcrumbsBar renders correctly > with empty props 1`] = `\n<nav\n  aria-label=\"Breadcrumb\"\n  className=\"breadcrumbsBar\"\n  data-testid=\"breadcrumbs-bar\"\n  data-vibe=\"BreadcrumbsBar\"\n>\n  <ol />\n</nav>\n`;\n"
  },
  {
    "path": "packages/core/src/components/BreadcrumbsBar/__tests__/__snapshots__/BreadcrumbsBar.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`BreadcrumbsBar renders correctly > with bar type 1`] = `\n<nav\n  aria-label=\"Breadcrumb\"\n  className=\"breadcrumbsBar\"\n  data-testid=\"breadcrumbs-bar\"\n  data-vibe=\"BreadcrumbsBar\"\n>\n  <ol />\n</nav>\n`;\n\nexports[`BreadcrumbsBar renders correctly > with bar type 2`] = `\n<nav\n  aria-label=\"Breadcrumb\"\n  className=\"breadcrumbsBar\"\n  data-testid=\"breadcrumbs-bar\"\n  data-vibe=\"BreadcrumbsBar\"\n>\n  <ol />\n</nav>\n`;\n\nexports[`BreadcrumbsBar renders correctly > with bar type 3`] = `\n<nav\n  aria-label=\"Breadcrumb\"\n  className=\"breadcrumbsBar\"\n  data-testid=\"breadcrumbs-bar\"\n  data-vibe=\"BreadcrumbsBar\"\n>\n  <ol />\n</nav>\n`;\n\nexports[`BreadcrumbsBar renders correctly > with breadcrumb menu 1`] = `\n<nav\n  aria-label=\"Breadcrumb\"\n  className=\"breadcrumbsBar\"\n  data-testid=\"breadcrumbs-bar\"\n  data-vibe=\"BreadcrumbsBar\"\n>\n  <ol>\n    <li\n      className=\"breadcrumbItemWrapper\"\n      data-testid=\"breadcrumb-item\"\n    >\n      <span\n        aria-disabled=\"true\"\n        className=\"breadcrumbContent notClickable\"\n        tabIndex={0}\n      >\n        <span\n          className=\"breadcrumbText\"\n        >\n          Board\n        </span>\n      </span>\n    </li>\n    <svg\n      aria-hidden=\"true\"\n      className=\"separatorIcon\"\n      fill=\"currentColor\"\n      height=\"14\"\n      viewBox=\"0 0 20 20\"\n      width=\"14\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303L13 10L13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n    <li\n      className=\"breadcrumbMenuWrapper\"\n      isClickable={false}\n    >\n      <button\n        aria-controls=\"breadcrumb-menu-button-menu\"\n        aria-disabled={false}\n        aria-expanded={false}\n        aria-haspopup=\"true\"\n        aria-label=\"Hidden breadcrumbs menu\"\n        className=\"wrapper sizeXxs\"\n        data-testid=\"breadcrumb-menu\"\n        data-vibe=\"MenuButton\"\n        id=\"breadcrumb-menu-button\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onContextMenu={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onMouseDown={[Function]}\n        onMouseEnter={[Function]}\n        onMouseLeave={[Function]}\n        onMouseUp={[Function]}\n        type=\"button\"\n      >\n        <svg\n          aria-hidden=\"true\"\n          fill=\"currentColor\"\n          height=\"16\"\n          role=\"img\"\n          viewBox=\"0 0 20 20\"\n          width=\"16\"\n        >\n          <path\n            d=\"M6 10.5C6 11.3284 5.32843 12 4.5 12 3.67157 12 3 11.3284 3 10.5 3 9.67157 3.67157 9 4.5 9 5.32843 9 6 9.67157 6 10.5zM11.8333 10.5C11.8333 11.3284 11.1618 12 10.3333 12 9.50492 12 8.83334 11.3284 8.83334 10.5 8.83334 9.67157 9.50492 9 10.3333 9 11.1618 9 11.8333 9.67157 11.8333 10.5zM17.6667 10.5C17.6667 11.3284 16.9951 12 16.1667 12 15.3383 12 14.6667 11.3284 14.6667 10.5 14.6667 9.67157 15.3383 9 16.1667 9 16.9951 9 17.6667 9.67157 17.6667 10.5z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </button>\n    </li>\n    <svg\n      aria-hidden=\"true\"\n      className=\"separatorIcon\"\n      fill=\"currentColor\"\n      height=\"14\"\n      viewBox=\"0 0 20 20\"\n      width=\"14\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303L13 10L13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n    <li\n      className=\"breadcrumbItemWrapper\"\n      data-testid=\"breadcrumb-item\"\n    >\n      <span\n        aria-current=\"page\"\n        aria-disabled=\"true\"\n        className=\"breadcrumbContent current notClickable\"\n        tabIndex={0}\n      >\n        <span\n          className=\"breadcrumbText\"\n        >\n          My Item\n        </span>\n      </span>\n    </li>\n  </ol>\n</nav>\n`;\n\nexports[`BreadcrumbsBar renders correctly > with children 1`] = `\n<nav\n  aria-label=\"Breadcrumb\"\n  className=\"breadcrumbsBar\"\n  data-testid=\"breadcrumbs-bar\"\n  data-vibe=\"BreadcrumbsBar\"\n>\n  <ol>\n    <li\n      className=\"breadcrumbItemWrapper\"\n      data-testid=\"breadcrumb-item\"\n    >\n      <span\n        aria-disabled=\"true\"\n        className=\"breadcrumbContent notClickable\"\n        tabIndex={0}\n      >\n        <span\n          className=\"breadcrumbText\"\n        >\n          Workspace\n        </span>\n      </span>\n    </li>\n    <svg\n      aria-hidden=\"true\"\n      className=\"separatorIcon\"\n      fill=\"currentColor\"\n      height=\"14\"\n      viewBox=\"0 0 20 20\"\n      width=\"14\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303L13 10L13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n    <li\n      className=\"breadcrumbItemWrapper\"\n      data-testid=\"breadcrumb-item\"\n    >\n      <span\n        aria-disabled=\"true\"\n        className=\"breadcrumbContent notClickable\"\n        tabIndex={0}\n      >\n        <span\n          className=\"breadcrumbText\"\n        >\n          Board\n        </span>\n      </span>\n    </li>\n  </ol>\n</nav>\n`;\n\nexports[`BreadcrumbsBar renders correctly > with empty props 1`] = `\n<nav\n  aria-label=\"Breadcrumb\"\n  className=\"breadcrumbsBar\"\n  data-testid=\"breadcrumbs-bar\"\n  data-vibe=\"BreadcrumbsBar\"\n>\n  <ol />\n</nav>\n`;\n"
  },
  {
    "path": "packages/core/src/components/BreadcrumbsBar/index.ts",
    "content": "export { default as BreadcrumbsBar, type BreadcrumbBarProps } from \"./BreadcrumbsBar\";\nexport { default as BreadcrumbItem, type BreadcrumbItemProps } from \"./BreadcrumbItem/BreadcrumbItem\";\nexport { default as BreadcrumbMenu, type BreadcrumbMenuProps } from \"./BreadcrumbMenu/BreadcrumbMenu\";\nexport {\n  default as BreadcrumbMenuItem,\n  type BreadcrumbMenuItemProps\n} from \"./BreadcrumbMenu/BreadcrumbMenuItem/BreadcrumbMenuItem\";\n\nexport * from \"./Breadcrumbs.types\";\n"
  },
  {
    "path": "packages/core/src/components/ButtonGroup/ButtonGroup.module.scss",
    "content": "@import \"../../styles/typography\";\n\n.buttonGroup {\n  display: flex;\n  flex-direction: column;\n}\n\n.subTextContainer {\n  @include font-caption();\n}\n\n.buttonsContainer {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &.fullWidth {\n    justify-content: flex-start;\n    width: 100%;\n  }\n\n  .button {\n    border-style: solid;\n    border-width: 1px 0;\n    background-color: var(--primary-background-color);\n    border-color: var(--ui-border-color);\n\n    // &:first-of-type {\n    //   border-inline-start-width: 1px;\n    // }\n\n    // &:last-of-type {\n    //   border-inline-end-width: 1px;\n    // }\n\n    &.activeButton {\n      background-color: var(--primary-selected-color);\n      border-color: var(--primary-color);\n      border-inline-start-width: 1px;\n      border-inline-end-width: 1px;\n\n      &:hover {\n        background-color: var(--primary-selected-color);\n      }\n    }\n\n    &.disabled,\n    &.buttonDisabled {\n      background-color: var(--disabled-background-color);\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    &.startBorder {\n      border-inline-start-width: 1px;\n    }\n\n    &.endBorder {\n      border-inline-end-width: 1px;\n    }\n\n    &.fullWidth {\n      width: 100%;\n      display: flex;\n    }\n  }\n\n  .kindTertiary & {\n    .button {\n      border-color: transparent;\n\n      &:first-child {\n        border-color: transparent;\n      }\n    }\n  }\n}\n\n.optionText:not(.disabled) {\n  color: var(--primary-text-color);\n}\n\n.optionText:not(.disabled).selected {\n  color: var(--primary-text-color);\n}\n\n.wrapper.disabled {\n  cursor: not-allowed;\n}\n\n.fullWidth {\n  flex: 1;\n}\n"
  },
  {
    "path": "packages/core/src/components/ButtonGroup/ButtonGroup.tsx",
    "content": "import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { camelCase } from \"es-toolkit\";\nimport cx from \"classnames\";\nimport { getStyle, useMergeRef } from \"@vibe/shared\";\nimport usePrevious from \"../../hooks/usePrevious\";\n\nimport { type SubIcon } from \"@vibe/icon\";\nimport { type ButtonValue } from \"./ButtonGroupConstants\";\nimport { ButtonWrapper } from \"./ButtonWrapper\";\nimport { type ButtonType, type ButtonSize } from \"@vibe/button\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { type MoveBy } from \"../../types/MoveBy\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport styles from \"./ButtonGroup.module.scss\";\nimport { type TooltipPositions } from \"@vibe/tooltip\";\n\ntype ButtonGroupOption = {\n  icon?: SubIcon;\n  leftIcon?: SubIcon;\n  \"aria-label\"?: string;\n  subText?: string;\n  value: ButtonValue;\n  text: string;\n  disabled?: boolean;\n  tooltipContent?: string;\n};\n\nexport interface ButtonGroupProps extends VibeComponentProps {\n  /**\n   * The list of button options.\n   */\n  options: Array<ButtonGroupOption>;\n  /**\n   * The currently selected button value.\n   */\n  value?: ButtonValue;\n  /**\n   * Callback fired when a button is selected.\n   */\n  onSelect?: (value: ButtonValue, name: string) => void;\n  /**\n   * The size of the buttons.\n   */\n  size?: ButtonSize;\n  /**\n   * The style variant of the buttons.\n   */\n  kind?: Extract<ButtonType, \"secondary\" | \"tertiary\">;\n  /**\n   * The name of the button group.\n   */\n  name?: string;\n  /**\n   * If true, disables all buttons in the group.\n   */\n  disabled?: boolean;\n  /**\n   * The label of the button group for accessibility.\n   */\n  groupAriaLabel?: string;\n  /**\n   * The position of the tooltip relative to the button.\n   */\n  tooltipPosition?: TooltipPositions;\n  /**\n   * The delay in milliseconds before the tooltip hides.\n   */\n  tooltipHideDelay?: number;\n  /**\n   * The delay in milliseconds before the tooltip shows.\n   */\n  tooltipShowDelay?: number;\n  /**\n   * CSS selector for the tooltip container.\n   */\n  tooltipContainerSelector?: string;\n  /**\n   * Adjusts the tooltip position.\n   */\n  tooltipMoveBy?: MoveBy;\n  /**\n   * The content inside the button group.\n   */\n  children?: React.ReactNode;\n  /**\n   * If true, makes the button group take the full width of its container.\n   */\n  fullWidth?: boolean;\n  /**\n   * If true, removes focus from the button after clicking.\n   */\n  blurOnMouseUp?: boolean;\n}\n\nconst ButtonGroup = forwardRef(\n  (\n    {\n      className,\n      options,\n      name = \"\",\n      disabled = false,\n      value = \"\",\n      onSelect,\n      size = \"small\",\n      kind = \"secondary\",\n      groupAriaLabel = \"\",\n      tooltipPosition,\n      tooltipHideDelay,\n      tooltipShowDelay,\n      tooltipContainerSelector,\n      tooltipMoveBy,\n      blurOnMouseUp = true,\n      id,\n      \"data-testid\": dataTestId,\n      fullWidth = false\n    }: ButtonGroupProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const inputRef = useRef();\n    const mergedRef = useMergeRef(ref, inputRef);\n\n    const [valueState, setValueState] = useState(value);\n    const prevValue = usePrevious(value);\n\n    const onClick = useCallback(\n      (option: ButtonGroupOption) => {\n        const isDisabled = disabled || option.disabled;\n        if (!isDisabled) {\n          setValueState(option.value);\n          if (onSelect) {\n            onSelect(option.value, name);\n          }\n        }\n      },\n      [onSelect, disabled, name]\n    );\n\n    const isOptionActive = (option?: ButtonGroupOption) => option?.value === valueState;\n\n    const selectedOption = useMemo(() => {\n      return options.find(option => isOptionActive(option));\n    }, [options, valueState]);\n\n    const Buttons = useMemo(() => {\n      return options.map((option, index) => {\n        const isSelected = isOptionActive(option);\n        const isFirst = index === 0;\n        const isLast = index === options.length - 1;\n        const isNextOptionActive = isOptionActive(options[index + 1]);\n\n        return (\n          <ButtonWrapper\n            key={option.value}\n            size={size}\n            onClick={() => onClick(option)}\n            rightIcon={option.icon}\n            leftIcon={option.leftIcon}\n            active={isSelected}\n            rightFlat={index !== options.length - 1}\n            leftFlat={index !== 0}\n            kind=\"tertiary\"\n            preventClickAnimation\n            aria-label={option[\"aria-label\"]}\n            tooltipContent={option.tooltipContent}\n            tooltipPosition={tooltipPosition}\n            tooltipHideDelay={tooltipHideDelay}\n            tooltipShowDelay={tooltipShowDelay}\n            tooltipContainerSelector={tooltipContainerSelector}\n            tooltipMoveBy={tooltipMoveBy}\n            blurOnMouseUp={blurOnMouseUp}\n            fullWidth={fullWidth}\n            className={cx(styles.button, styles.optionText, {\n              [styles.selected]: isSelected,\n              [styles.disabled]: disabled,\n              [styles.buttonDisabled]: option.disabled,\n              [styles.fullWidth]: fullWidth,\n              [styles.startBorder]: isFirst,\n              [styles.endBorder]: isLast || !isNextOptionActive\n            })}\n            activeButtonClassName={styles.activeButton}\n          >\n            {option.text}\n          </ButtonWrapper>\n        );\n      });\n    }, [\n      options,\n      valueState,\n      size,\n      tooltipPosition,\n      tooltipHideDelay,\n      tooltipShowDelay,\n      tooltipContainerSelector,\n      tooltipMoveBy,\n      blurOnMouseUp,\n      disabled,\n      fullWidth,\n      onClick\n    ]);\n\n    // Effects\n    useEffect(() => {\n      // Update value if changed from props\n      if (value !== prevValue && value !== valueState) {\n        setValueState(value);\n      }\n    }, [value, prevValue, valueState, setValueState]);\n\n    return (\n      <div\n        className={cx(styles.buttonGroup, className, getStyle(styles, camelCase(\"kind-\" + kind)), {\n          [styles.disabled]: disabled\n        })}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.BUTTON_GROUP, id)}\n        data-vibe={ComponentVibeId.BUTTON_GROUP}\n        ref={mergedRef}\n      >\n        <div\n          role=\"group\"\n          aria-label={groupAriaLabel}\n          className={cx(styles.buttonsContainer, { [styles.fullWidth]: fullWidth })}\n          aria-disabled={disabled}\n        >\n          {Buttons}\n        </div>\n        {selectedOption && selectedOption.subText && (\n          <div className={cx(styles.subTextContainer)}>{selectedOption.subText}</div>\n        )}\n      </div>\n    );\n  }\n);\n\nexport default ButtonGroup;\n"
  },
  {
    "path": "packages/core/src/components/ButtonGroup/ButtonGroupConstants.ts",
    "content": "export type ButtonValue = string | number;\n"
  },
  {
    "path": "packages/core/src/components/ButtonGroup/ButtonWrapper.tsx",
    "content": "import React from \"react\";\nimport { isNil } from \"es-toolkit\";\nimport { Button, type ButtonProps } from \"@vibe/button\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { type MoveBy } from \"../../types/MoveBy\";\nimport { type TooltipPositions } from \"@vibe/tooltip\";\nimport styles from \"./ButtonGroup.module.scss\";\n\nexport interface ButtonWrapperProps extends ButtonProps {\n  /**\n   * The content of the tooltip.\n   */\n  tooltipContent?: string;\n  /**\n   * The position of the tooltip relative to the button.\n   */\n  tooltipPosition?: TooltipPositions;\n  /**\n   * The delay in milliseconds before the tooltip hides.\n   */\n  tooltipHideDelay?: number;\n  /**\n   * The delay in milliseconds before the tooltip shows.\n   */\n  tooltipShowDelay?: number;\n  /**\n   * CSS selector for the tooltip container.\n   */\n  tooltipContainerSelector?: string;\n  /**\n   * Adjusts the tooltip position.\n   */\n  tooltipMoveBy?: MoveBy;\n  /**\n   * If true, makes the button take the full width of its container.\n   */\n  fullWidth?: boolean;\n}\n\nexport const ButtonWrapper = ({\n  tooltipContent,\n  tooltipPosition,\n  tooltipHideDelay,\n  tooltipShowDelay,\n  tooltipContainerSelector,\n  tooltipMoveBy,\n  fullWidth,\n  className,\n  ...otherProps\n}: ButtonWrapperProps) => {\n  const button = <Button {...otherProps} className={className} />;\n\n  if (!isNil(tooltipContent)) {\n    return (\n      <Tooltip\n        moveBy={tooltipMoveBy}\n        position={tooltipPosition}\n        hideDelay={tooltipHideDelay}\n        showDelay={tooltipShowDelay}\n        content={tooltipContent}\n        showTrigger={[\"mouseenter\"]}\n        hideTrigger={[\"mouseleave\"]}\n        containerSelector={tooltipContainerSelector}\n        referenceWrapperClassName={fullWidth ? styles.fullWidth : undefined}\n      >\n        {button}\n      </Tooltip>\n    );\n  }\n\n  // Always wrap in a div when fullWidth to ensure consistent structure\n  if (fullWidth) {\n    return <div className={styles.fullWidth}>{button}</div>;\n  }\n\n  return button;\n};\n"
  },
  {
    "path": "packages/core/src/components/ButtonGroup/__tests__/ButtonGroup.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport ButtonGroup from \"../ButtonGroup\";\n\nconst option = [\n  { value: 1, text: \"Alpha\" },\n  { value: 2, text: \"Beta\" },\n  { value: 3, text: \"Gamma\" },\n  { value: 4, text: \"Delta\" }\n];\n\ndescribe(\"ButtonGroup renders correctly\", () => {\n  it(\"with value\", () => {\n    const tree = renderer.create(<ButtonGroup value={1} options={option} />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with name\", () => {\n    const tree = renderer.create(<ButtonGroup name=\"name\" options={option} />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"when disabled\", () => {\n    const tree = renderer.create(<ButtonGroup disabled options={option} />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with large size\", () => {\n    const tree = renderer.create(<ButtonGroup size=\"large\" options={option} />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with TERTIARY kind\", () => {\n    const tree = renderer.create(<ButtonGroup kind=\"tertiary\" options={option} />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with groupAriaLabel\", () => {\n    const tree = renderer.create(<ButtonGroup groupAriaLabel=\"as\" options={option} />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with className\", () => {\n    const tree = renderer.create(<ButtonGroup className=\"testClassName\" options={option} />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/ButtonGroup/__tests__/ButtonGroup.test.tsx",
    "content": "import { vi, beforeEach, describe, it, expect, type Mock } from \"vitest\";\nimport React from \"react\";\nimport { fireEvent, render, screen } from \"@testing-library/react\";\nimport ButtonGroup from \"../ButtonGroup\";\n\ndescribe(\"ButtonGroup tests\", () => {\n  const option = [\n    { value: 1, text: \"Alpha\" },\n    { value: 2, text: \"Beta\" },\n    { value: 3, text: \"Gamma\" },\n    { value: 4, text: \"Delta\" }\n  ];\n  let onSelectMock: Mock;\n  let label: string;\n\n  beforeEach(() => {\n    onSelectMock = vi.fn();\n    label = \"label\";\n    render(<ButtonGroup options={option} onSelect={onSelectMock} groupAriaLabel={label} />);\n  });\n\n  it(\"should call the click callback when clicked\", () => {\n    fireEvent.click(screen.getByText(\"Delta\"));\n    expect(onSelectMock.mock.calls.length).toBe(1);\n  });\n\n  describe(\"a11y\", () => {\n    it(\"should add the label\", () => {\n      expect(screen.getByLabelText(label)).toBeTruthy();\n    });\n  });\n\n  describe(\"snapshots\", () => {\n    const snapshotOptions = [\n      { value: 1, text: \"Alpha\" },\n      { value: 2, text: \"Beta\" },\n      { value: 3, text: \"Gamma\" },\n      { value: 4, text: \"Delta\" }\n    ];\n\n    it(\"should render ButtonGroup with full width\", () => {\n      const { container } = render(\n        <ButtonGroup options={snapshotOptions} groupAriaLabel=\"Full width test\" fullWidth={true} value={2} />\n      );\n      expect(container.firstChild).toMatchSnapshot();\n    });\n\n    it(\"should render ButtonGroup without tooltips\", () => {\n      const { container } = render(\n        <ButtonGroup options={snapshotOptions} groupAriaLabel=\"No tooltips test\" value={1} />\n      );\n      expect(container.firstChild).toMatchSnapshot();\n    });\n\n    it(\"should render ButtonGroup with tooltips on all options\", () => {\n      const optionsWithAllTooltips = [\n        { value: 1, text: \"Alpha\", tooltipContent: \"First option tooltip\" },\n        { value: 2, text: \"Beta\", tooltipContent: \"Second option tooltip\" },\n        { value: 3, text: \"Gamma\", tooltipContent: \"Third option tooltip\" },\n        { value: 4, text: \"Delta\", tooltipContent: \"Fourth option tooltip\" }\n      ];\n\n      const { container } = render(\n        <ButtonGroup options={optionsWithAllTooltips} groupAriaLabel=\"All tooltips test\" value={3} />\n      );\n      expect(container.firstChild).toMatchSnapshot();\n    });\n\n    it(\"should render ButtonGroup with tooltips on some options\", () => {\n      const optionsWithSomeTooltips = [\n        { value: 1, text: \"Alpha\" },\n        { value: 2, text: \"Beta\", tooltipContent: \"Beta tooltip\" },\n        { value: 3, text: \"Gamma\" },\n        { value: 4, text: \"Delta\", tooltipContent: \"Delta tooltip\" }\n      ];\n\n      const { container } = render(\n        <ButtonGroup options={optionsWithSomeTooltips} groupAriaLabel=\"Some tooltips test\" value={4} />\n      );\n      expect(container.firstChild).toMatchSnapshot();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/ButtonGroup/__tests__/__snapshots__/ButtonGroup.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`ButtonGroup renders correctly > when disabled 1`] = `\n<div\n  className=\"buttonGroup kindSecondary disabled\"\n  data-testid=\"button-group\"\n  data-vibe=\"ButtonGroup\"\n>\n  <div\n    aria-disabled={true}\n    aria-label=\"\"\n    className=\"buttonsContainer\"\n    role=\"group\"\n  >\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button optionText disabled startBorder endBorder button sizeSmall kindTertiary colorPrimary rightFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Alpha\n    </button>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button optionText disabled endBorder button sizeSmall kindTertiary colorPrimary rightFlat leftFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Beta\n    </button>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button optionText disabled endBorder button sizeSmall kindTertiary colorPrimary rightFlat leftFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Gamma\n    </button>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button optionText disabled endBorder button sizeSmall kindTertiary colorPrimary leftFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Delta\n    </button>\n  </div>\n</div>\n`;\n\nexports[`ButtonGroup renders correctly > with TERTIARY kind 1`] = `\n<div\n  className=\"buttonGroup kindTertiary\"\n  data-testid=\"button-group\"\n  data-vibe=\"ButtonGroup\"\n>\n  <div\n    aria-disabled={false}\n    aria-label=\"\"\n    className=\"buttonsContainer\"\n    role=\"group\"\n  >\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button optionText startBorder endBorder button sizeSmall kindTertiary colorPrimary rightFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Alpha\n    </button>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button optionText endBorder button sizeSmall kindTertiary colorPrimary rightFlat leftFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Beta\n    </button>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button optionText endBorder button sizeSmall kindTertiary colorPrimary rightFlat leftFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Gamma\n    </button>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button optionText endBorder button sizeSmall kindTertiary colorPrimary leftFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Delta\n    </button>\n  </div>\n</div>\n`;\n\nexports[`ButtonGroup renders correctly > with className 1`] = `\n<div\n  className=\"buttonGroup testClassName kindSecondary\"\n  data-testid=\"button-group\"\n  data-vibe=\"ButtonGroup\"\n>\n  <div\n    aria-disabled={false}\n    aria-label=\"\"\n    className=\"buttonsContainer\"\n    role=\"group\"\n  >\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button optionText startBorder endBorder button sizeSmall kindTertiary colorPrimary rightFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Alpha\n    </button>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button optionText endBorder button sizeSmall kindTertiary colorPrimary rightFlat leftFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Beta\n    </button>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button optionText endBorder button sizeSmall kindTertiary colorPrimary rightFlat leftFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Gamma\n    </button>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button optionText endBorder button sizeSmall kindTertiary colorPrimary leftFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Delta\n    </button>\n  </div>\n</div>\n`;\n\nexports[`ButtonGroup renders correctly > with groupAriaLabel 1`] = `\n<div\n  className=\"buttonGroup kindSecondary\"\n  data-testid=\"button-group\"\n  data-vibe=\"ButtonGroup\"\n>\n  <div\n    aria-disabled={false}\n    aria-label=\"as\"\n    className=\"buttonsContainer\"\n    role=\"group\"\n  >\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button optionText startBorder endBorder button sizeSmall kindTertiary colorPrimary rightFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Alpha\n    </button>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button optionText endBorder button sizeSmall kindTertiary colorPrimary rightFlat leftFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Beta\n    </button>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button optionText endBorder button sizeSmall kindTertiary colorPrimary rightFlat leftFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Gamma\n    </button>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button optionText endBorder button sizeSmall kindTertiary colorPrimary leftFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Delta\n    </button>\n  </div>\n</div>\n`;\n\nexports[`ButtonGroup renders correctly > with large size 1`] = `\n<div\n  className=\"buttonGroup kindSecondary\"\n  data-testid=\"button-group\"\n  data-vibe=\"ButtonGroup\"\n>\n  <div\n    aria-disabled={false}\n    aria-label=\"\"\n    className=\"buttonsContainer\"\n    role=\"group\"\n  >\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button optionText startBorder endBorder button sizeLarge kindTertiary colorPrimary rightFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Alpha\n    </button>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button optionText endBorder button sizeLarge kindTertiary colorPrimary rightFlat leftFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Beta\n    </button>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button optionText endBorder button sizeLarge kindTertiary colorPrimary rightFlat leftFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Gamma\n    </button>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button optionText endBorder button sizeLarge kindTertiary colorPrimary leftFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Delta\n    </button>\n  </div>\n</div>\n`;\n\nexports[`ButtonGroup renders correctly > with name 1`] = `\n<div\n  className=\"buttonGroup kindSecondary\"\n  data-testid=\"button-group\"\n  data-vibe=\"ButtonGroup\"\n>\n  <div\n    aria-disabled={false}\n    aria-label=\"\"\n    className=\"buttonsContainer\"\n    role=\"group\"\n  >\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button optionText startBorder endBorder button sizeSmall kindTertiary colorPrimary rightFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Alpha\n    </button>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button optionText endBorder button sizeSmall kindTertiary colorPrimary rightFlat leftFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Beta\n    </button>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button optionText endBorder button sizeSmall kindTertiary colorPrimary rightFlat leftFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Gamma\n    </button>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button optionText endBorder button sizeSmall kindTertiary colorPrimary leftFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Delta\n    </button>\n  </div>\n</div>\n`;\n\nexports[`ButtonGroup renders correctly > with value 1`] = `\n<div\n  className=\"buttonGroup kindSecondary\"\n  data-testid=\"button-group\"\n  data-vibe=\"ButtonGroup\"\n>\n  <div\n    aria-disabled={false}\n    aria-label=\"\"\n    className=\"buttonsContainer\"\n    role=\"group\"\n  >\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button optionText selected startBorder endBorder button sizeSmall kindTertiary colorPrimary colorPrimaryActive activeButton rightFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Alpha\n    </button>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button optionText endBorder button sizeSmall kindTertiary colorPrimary rightFlat leftFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Beta\n    </button>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button optionText endBorder button sizeSmall kindTertiary colorPrimary rightFlat leftFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Gamma\n    </button>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button optionText endBorder button sizeSmall kindTertiary colorPrimary leftFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Delta\n    </button>\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/ButtonGroup/__tests__/__snapshots__/ButtonGroup.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`ButtonGroup tests > snapshots > should render ButtonGroup with full width 1`] = `\n<div\n  class=\"buttonGroup kindSecondary\"\n  data-testid=\"button-group\"\n  data-vibe=\"ButtonGroup\"\n>\n  <div\n    aria-disabled=\"false\"\n    aria-label=\"Full width test\"\n    class=\"buttonsContainer fullWidth\"\n    role=\"group\"\n  >\n    <div\n      class=\"fullWidth\"\n    >\n      <button\n        aria-busy=\"false\"\n        aria-disabled=\"false\"\n        class=\"button optionText fullWidth startBorder button sizeSmall kindTertiary colorPrimary rightFlat preventClickAnimation\"\n        data-testid=\"button\"\n        data-vibe=\"Button\"\n        type=\"button\"\n      >\n        Alpha\n      </button>\n    </div>\n    <div\n      class=\"fullWidth\"\n    >\n      <button\n        aria-busy=\"false\"\n        aria-disabled=\"false\"\n        class=\"button optionText selected fullWidth endBorder button sizeSmall kindTertiary colorPrimary colorPrimaryActive activeButton rightFlat leftFlat preventClickAnimation\"\n        data-testid=\"button\"\n        data-vibe=\"Button\"\n        type=\"button\"\n      >\n        Beta\n      </button>\n    </div>\n    <div\n      class=\"fullWidth\"\n    >\n      <button\n        aria-busy=\"false\"\n        aria-disabled=\"false\"\n        class=\"button optionText fullWidth endBorder button sizeSmall kindTertiary colorPrimary rightFlat leftFlat preventClickAnimation\"\n        data-testid=\"button\"\n        data-vibe=\"Button\"\n        type=\"button\"\n      >\n        Gamma\n      </button>\n    </div>\n    <div\n      class=\"fullWidth\"\n    >\n      <button\n        aria-busy=\"false\"\n        aria-disabled=\"false\"\n        class=\"button optionText fullWidth endBorder button sizeSmall kindTertiary colorPrimary leftFlat preventClickAnimation\"\n        data-testid=\"button\"\n        data-vibe=\"Button\"\n        type=\"button\"\n      >\n        Delta\n      </button>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`ButtonGroup tests > snapshots > should render ButtonGroup with tooltips on all options 1`] = `\n<div\n  class=\"buttonGroup kindSecondary\"\n  data-testid=\"button-group\"\n  data-vibe=\"ButtonGroup\"\n>\n  <div\n    aria-disabled=\"false\"\n    aria-label=\"All tooltips test\"\n    class=\"buttonsContainer\"\n    role=\"group\"\n  >\n    <span\n      class=\"\"\n    >\n      <button\n        aria-busy=\"false\"\n        aria-disabled=\"false\"\n        class=\"button optionText startBorder endBorder button sizeSmall kindTertiary colorPrimary rightFlat preventClickAnimation\"\n        data-testid=\"button\"\n        data-vibe=\"Button\"\n        type=\"button\"\n      >\n        Alpha\n      </button>\n    </span>\n    <span\n      class=\"\"\n    >\n      <button\n        aria-busy=\"false\"\n        aria-disabled=\"false\"\n        class=\"button optionText button sizeSmall kindTertiary colorPrimary rightFlat leftFlat preventClickAnimation\"\n        data-testid=\"button\"\n        data-vibe=\"Button\"\n        type=\"button\"\n      >\n        Beta\n      </button>\n    </span>\n    <span\n      class=\"\"\n    >\n      <button\n        aria-busy=\"false\"\n        aria-disabled=\"false\"\n        class=\"button optionText selected endBorder button sizeSmall kindTertiary colorPrimary colorPrimaryActive activeButton rightFlat leftFlat preventClickAnimation\"\n        data-testid=\"button\"\n        data-vibe=\"Button\"\n        type=\"button\"\n      >\n        Gamma\n      </button>\n    </span>\n    <span\n      class=\"\"\n    >\n      <button\n        aria-busy=\"false\"\n        aria-disabled=\"false\"\n        class=\"button optionText endBorder button sizeSmall kindTertiary colorPrimary leftFlat preventClickAnimation\"\n        data-testid=\"button\"\n        data-vibe=\"Button\"\n        type=\"button\"\n      >\n        Delta\n      </button>\n    </span>\n  </div>\n</div>\n`;\n\nexports[`ButtonGroup tests > snapshots > should render ButtonGroup with tooltips on some options 1`] = `\n<div\n  class=\"buttonGroup kindSecondary\"\n  data-testid=\"button-group\"\n  data-vibe=\"ButtonGroup\"\n>\n  <div\n    aria-disabled=\"false\"\n    aria-label=\"Some tooltips test\"\n    class=\"buttonsContainer\"\n    role=\"group\"\n  >\n    <button\n      aria-busy=\"false\"\n      aria-disabled=\"false\"\n      class=\"button optionText startBorder endBorder button sizeSmall kindTertiary colorPrimary rightFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      type=\"button\"\n    >\n      Alpha\n    </button>\n    <span\n      class=\"\"\n    >\n      <button\n        aria-busy=\"false\"\n        aria-disabled=\"false\"\n        class=\"button optionText endBorder button sizeSmall kindTertiary colorPrimary rightFlat leftFlat preventClickAnimation\"\n        data-testid=\"button\"\n        data-vibe=\"Button\"\n        type=\"button\"\n      >\n        Beta\n      </button>\n    </span>\n    <button\n      aria-busy=\"false\"\n      aria-disabled=\"false\"\n      class=\"button optionText button sizeSmall kindTertiary colorPrimary rightFlat leftFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      type=\"button\"\n    >\n      Gamma\n    </button>\n    <span\n      class=\"\"\n    >\n      <button\n        aria-busy=\"false\"\n        aria-disabled=\"false\"\n        class=\"button optionText selected endBorder button sizeSmall kindTertiary colorPrimary colorPrimaryActive activeButton leftFlat preventClickAnimation\"\n        data-testid=\"button\"\n        data-vibe=\"Button\"\n        type=\"button\"\n      >\n        Delta\n      </button>\n    </span>\n  </div>\n</div>\n`;\n\nexports[`ButtonGroup tests > snapshots > should render ButtonGroup without tooltips 1`] = `\n<div\n  class=\"buttonGroup kindSecondary\"\n  data-testid=\"button-group\"\n  data-vibe=\"ButtonGroup\"\n>\n  <div\n    aria-disabled=\"false\"\n    aria-label=\"No tooltips test\"\n    class=\"buttonsContainer\"\n    role=\"group\"\n  >\n    <button\n      aria-busy=\"false\"\n      aria-disabled=\"false\"\n      class=\"button optionText selected startBorder endBorder button sizeSmall kindTertiary colorPrimary colorPrimaryActive activeButton rightFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      type=\"button\"\n    >\n      Alpha\n    </button>\n    <button\n      aria-busy=\"false\"\n      aria-disabled=\"false\"\n      class=\"button optionText endBorder button sizeSmall kindTertiary colorPrimary rightFlat leftFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      type=\"button\"\n    >\n      Beta\n    </button>\n    <button\n      aria-busy=\"false\"\n      aria-disabled=\"false\"\n      class=\"button optionText endBorder button sizeSmall kindTertiary colorPrimary rightFlat leftFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      type=\"button\"\n    >\n      Gamma\n    </button>\n    <button\n      aria-busy=\"false\"\n      aria-disabled=\"false\"\n      class=\"button optionText endBorder button sizeSmall kindTertiary colorPrimary leftFlat preventClickAnimation\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      type=\"button\"\n    >\n      Delta\n    </button>\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/ButtonGroup/index.ts",
    "content": "export { default as ButtonGroup, type ButtonGroupProps } from \"./ButtonGroup\";\n"
  },
  {
    "path": "packages/core/src/components/Checkbox/Checkbox.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n@import \"../../styles/typography\";\n@import \"../../styles/states\";\n$checkbox-size: 16px;\n\n@mixin hover-selected {\n  background-color: var(--primary-hover-color);\n  border-color: transparent;\n}\n\n@mixin hover-unselected {\n  border-color: var(--secondary-text-color);\n}\n\n\n.wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: min-content;\n  outline: none; /* focus ring is rendered on .checkbox child, not the wrapper */\n}\n\n.checkbox {\n  cursor: pointer;\n  visibility: visible;\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  height: $checkbox-size;\n  width: $checkbox-size;\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  border-radius: 2px;\n  transition: transform var(--motion-productive-short) var(--motion-timing-enter);\n  position: relative;\n  overflow: hidden;\n  background-color: var(--secondary-background-color);\n}\n\n.checkbox:after {\n  content: \" \";\n  background-color: transparent;\n  position: absolute;\n  height: $checkbox-size;\n  z-index: 2;\n  inset-inline: 0;\n  width: 100%;\n}\n\n.checkbox:hover {\n  @include hover-unselected;\n}\n\n.icon {\n  width: 100%;\n  color: var(--text-color-on-primary);\n  visibility: hidden;\n}\n\n.label {\n  @include smoothing-text;\n  cursor: pointer;\n  user-select: none;\n  margin-inline-start: var(--space-8);\n}\n\n/* Since it is not possible to change the design of the checkbox according to the requirements using css, */\n/* we hide the checkbox and draw a new one instead. */\n/* In order to allow accessibility, all operations will be performed on the hidden checkbox and be reflected */\n.input {\n  @include hidden-element();\n}\n\n/* For any active attribute in the hidden checkbox, we will change the appearance of the checkbox we drew in its place. */\n\n.input:focus + .checkbox {\n  @include hover-unselected;\n}\n\n.input:focus:checked + .checkbox {\n  @include hover-selected;\n}\n\n.input:focus-visible + .checkbox {\n  @include focus-style-css(2px);\n}\n\n.input:checked:focus + .checkbox:after,\n.input:indeterminate:focus + .checkbox:after {\n  background-color: var(--primary-hover-color);\n}\n\n/* Tab navigation — non-separate mode: the wrapper <label> is the Tab target */\n.wrapper:focus-visible > .checkbox {\n  @include focus-style-css(2px);\n}\n\n.wrapper:focus-visible > .input:checked ~ .checkbox,\n.wrapper:focus-visible > .input:indeterminate ~ .checkbox {\n  @include hover-selected;\n}\n\n/* Tab navigation — separate mode: the .checkbox <label> is the Tab target */\n.checkbox:focus-visible {\n  @include focus-style-css(2px);\n}\n\n.input:checked + .checkbox:focus-visible,\n.input:indeterminate + .checkbox:focus-visible {\n  @include hover-selected;\n}\n\n.input:checked + .checkbox,\n.input:indeterminate + .checkbox {\n  animation: checkboxGrowAnimation var(--motion-productive-short);\n  background-color: var(--primary-color);\n  border-color: transparent;\n}\n\n.input:checked + .checkbox:hover,\n.input:indeterminate + .checkbox:hover {\n  @include hover-selected;\n}\n\n.input:checked + .checkbox:hover:after,\n.input:indeterminate + .checkbox:hover:after {\n  background-color: var(--primary-hover-color);\n}\n\n.input:checked + .checkbox:after,\n.input:indeterminate + .checkbox:after {\n  content: \" \";\n  background-color: var(--primary-color);\n  height: $checkbox-size;\n  transform: scaleX(0);\n  transition: transform var(--motion-productive-long);\n  transform-origin: right;\n  inset-inline-start: 0;\n}\n\n.input:checked + .checkbox > .icon,\n.input:indeterminate + .checkbox > .icon {\n  visibility: visible;\n}\n\n.input:checked:disabled + .checkbox:after,\n.input:indeterminate:disabled + .checkbox:after {\n  background-color: var(--disabled-background-color);\n}\n\n.input:disabled + .checkbox .icon,\n.input:disabled + .checkbox:hover .icon {\n  color: var(--disabled-text-color);\n}\n\n.input:disabled + .checkbox,\n.input:disabled + .checkbox:hover {\n  cursor: not-allowed;\n  background-color: var(--disabled-background-color);\n  border-color: var(--ui-border-color);\n}\n\n.input:disabled ~ .label {\n  cursor: not-allowed;\n  color: var(--disabled-text-color);\n}\n\n@keyframes checkboxGrowAnimation {\n  0% {\n    transform: scale(0.8);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Checkbox/Checkbox.tsx",
    "content": "import React, { forwardRef, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { isNil, noop as NOOP } from \"es-toolkit\";\nimport { Icon } from \"@vibe/icon\";\nimport { Check, Remove } from \"@vibe/icons\";\nimport { useSupportFirefoxLabelClick } from \"./hooks/useSupportFirefoxLabelClick\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport { Text } from \"@vibe/typography\";\nimport styles from \"./Checkbox.module.scss\";\n\nexport interface CheckBoxProps extends VibeComponentProps {\n  /**\n   * Class name applied to the checkbox element.\n   */\n  checkboxClassName?: string;\n  /**\n   * Class name applied to the label element.\n   */\n  labelClassName?: string;\n  /**\n   * The label of the checkbox for accessibility.\n   */\n  \"aria-label\"?: string;\n  /**\n   * The content displayed next to the checkbox.\n   */\n  label?: React.ReactNode | Array<React.ReactNode>;\n  /**\n   * The ID of an element describing the checkbox.\n   */\n  \"aria-labelledby\"?: string;\n  /**\n   * Callback fired when the checkbox value changes.\n   */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  /**\n   * If true, controls the checked state of the checkbox.\n   */\n  checked?: boolean;\n  /**\n   * If true, displays an indeterminate state.\n   */\n  indeterminate?: boolean;\n  /**\n   * If true, the checkbox automatically receives focus.\n   */\n  autoFocus?: boolean;\n  /**\n   * If true, the checkbox is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The initial checked state of the checkbox.\n   */\n  defaultChecked?: boolean;\n  /**\n   * The value submitted with the form when checked.\n   */\n  value?: string;\n  /**\n   * The name of the checkbox, used for form submission.\n   */\n  name?: string;\n  /**\n   * The tab order of the checkbox.\n   */\n  tabIndex?: number;\n  /**\n   * If true, uses separate labels with htmlFor/id association instead of wrapping the input.\n   * If using this the id prop is required for it to function correctly.\n   */\n  separateLabel?: boolean;\n}\n\nconst Checkbox = forwardRef(\n  (\n    {\n      className,\n      checkboxClassName,\n      labelClassName,\n      \"aria-label\": ariaLabel,\n      label,\n      \"aria-labelledby\": ariaLabelledBy,\n      onChange = NOOP,\n      checked,\n      autoFocus,\n      indeterminate = false,\n      disabled = false,\n      defaultChecked,\n      tabIndex,\n      value = \"\",\n      name = \"\",\n      id,\n      separateLabel = false,\n      \"data-testid\": dataTestId\n    }: CheckBoxProps,\n    ref: React.ForwardedRef<HTMLInputElement>\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const mergedInputRef = useMergeRef(ref, inputRef);\n\n    const onMouseUpCallback = useCallback((e: React.MouseEvent<HTMLElement>) => {\n      const target = e.currentTarget;\n      window.requestAnimationFrame(() => {\n        window.requestAnimationFrame(() => {\n          target.blur();\n        });\n      });\n    }, []);\n\n    let overrideDefaultChecked = defaultChecked;\n\n    // If component did not receive default checked and checked props, choose default checked as\n    // default behavior (handle isChecked logic inside input) and set default value\n    if (isNil(overrideDefaultChecked) && isNil(checked)) {\n      overrideDefaultChecked = false;\n    }\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.indeterminate = indeterminate;\n      }\n    }, [inputRef, indeterminate]);\n\n    const { onClickCapture: onClickCaptureLabel } = useSupportFirefoxLabelClick({ inputRef });\n\n    const finalAriaLabel = useMemo(() => {\n      if (ariaLabel) return ariaLabel;\n      if (typeof label === \"string\") return label;\n      return \"\";\n    }, [ariaLabel, label]);\n\n    const onKeyDownCallback = useCallback(\n      (e: React.KeyboardEvent) => {\n        if (e.key === \" \") {\n          e.preventDefault();\n          inputRef.current?.click();\n        }\n      },\n      [inputRef]\n    );\n\n    const wrapperTabIndex = disabled ? undefined : tabIndex ?? 0;\n\n    if (separateLabel) {\n      return (\n        <div\n          className={cx(styles.wrapper, className)}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.CHECKBOX, id)}\n          data-vibe={ComponentVibeId.CHECKBOX}\n        >\n          <input\n            ref={mergedInputRef}\n            id={id}\n            className={styles.input}\n            value={value}\n            name={name}\n            type=\"checkbox\"\n            autoFocus={autoFocus}\n            onChange={onChange}\n            defaultChecked={overrideDefaultChecked}\n            disabled={disabled}\n            aria-label={finalAriaLabel}\n            aria-labelledby={ariaLabelledBy}\n            checked={checked}\n            tabIndex={-1}\n          />\n          {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\n          <label\n            htmlFor={id}\n            className={cx(styles.checkbox, checkboxClassName)}\n            data-testid={getTestId(ComponentDefaultTestId.CHECKBOX_CHECKBOX, id)}\n            tabIndex={wrapperTabIndex}\n            onMouseUp={onMouseUpCallback}\n            onKeyDown={onKeyDownCallback}\n            onClickCapture={onClickCaptureLabel}\n          >\n            <Icon\n              className={styles.icon}\n              type=\"svg\"\n              icon={indeterminate ? Remove : Check}\n              ignoreFocusStyle\n              aria-hidden={true}\n              size=\"16\"\n            />\n          </label>\n          {label === false ? null : (\n            // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n            <label\n              htmlFor={id}\n              className={cx(styles.label, labelClassName)}\n              data-testid={getTestId(ComponentDefaultTestId.CHECKBOX_LABEL, id)}\n              onMouseUp={onMouseUpCallback}\n              onClickCapture={onClickCaptureLabel}\n            >\n              <Text element=\"span\" type=\"text2\">\n                {label}\n              </Text>\n            </label>\n          )}\n        </div>\n      );\n    }\n\n    return (\n      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n      <label\n        className={cx(styles.wrapper, className)}\n        tabIndex={wrapperTabIndex}\n        onMouseUp={onMouseUpCallback}\n        onKeyDown={onKeyDownCallback}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.CHECKBOX, id)}\n        htmlFor={id}\n        onClickCapture={onClickCaptureLabel}\n        data-vibe={ComponentVibeId.CHECKBOX}\n      >\n        <input\n          ref={mergedInputRef}\n          id={id}\n          className={styles.input}\n          value={value}\n          name={name}\n          type=\"checkbox\"\n          autoFocus={autoFocus}\n          onChange={onChange}\n          defaultChecked={overrideDefaultChecked}\n          disabled={disabled}\n          aria-label={finalAriaLabel}\n          aria-labelledby={ariaLabelledBy}\n          checked={checked}\n          tabIndex={-1}\n        />\n        <div\n          className={cx(styles.checkbox, checkboxClassName)}\n          data-testid={getTestId(ComponentDefaultTestId.CHECKBOX_CHECKBOX, id)}\n        >\n          <Icon\n            className={styles.icon}\n            type=\"svg\"\n            icon={indeterminate ? Remove : Check}\n            ignoreFocusStyle\n            aria-hidden={true}\n            size=\"16\"\n          />\n        </div>\n        {label === false ? null : (\n          <Text\n            element=\"span\"\n            type=\"text2\"\n            className={cx(styles.label, labelClassName)}\n            data-testid={getTestId(ComponentDefaultTestId.CHECKBOX_LABEL, id)}\n          >\n            {label}\n          </Text>\n        )}\n      </label>\n    );\n  }\n);\n\nexport default Checkbox;\n"
  },
  {
    "path": "packages/core/src/components/Checkbox/__tests__/Checkbox.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport Checkbox from \"../Checkbox\";\n\ndescribe(\"Checkbox renders correctly\", () => {\n  it(\"with props\", () => {\n    const tree = renderer\n      .create(<Checkbox className=\"dummy-class-name\" label=\"Option 1\" name=\"checkbox\" value=\"option1\" />)\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with empty props\", () => {\n    const tree = renderer.create(<Checkbox />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"when checked\", () => {\n    const tree = renderer.create(<Checkbox checked />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"when disabled\", () => {\n    const tree = renderer.create(<Checkbox disabled />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"when autoFocus\", () => {\n    const tree = renderer.create(<Checkbox autoFocus />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with name\", () => {\n    const tree = renderer.create(<Checkbox name=\"checkbox\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with value\", () => {\n    const tree = renderer.create(<Checkbox value=\"checkboxValue\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"when default checked\", () => {\n    const tree = renderer.create(<Checkbox defaultChecked />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"when interminate\", () => {\n    const tree = renderer.create(<Checkbox indeterminate />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with aria-labelledby\", () => {\n    const tree = renderer.create(<Checkbox aria-labelledby=\"aria\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"without label\", () => {\n    const tree = renderer.create(<Checkbox label={false} />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Checkbox/__tests__/Checkbox.test.tsx",
    "content": "import { vi, beforeEach, afterEach, beforeAll, afterAll, describe, it, expect, type Mock } from \"vitest\";\nimport React from \"react\";\nimport { fireEvent, render, cleanup, screen } from \"@testing-library/react\";\nimport Checkbox from \"../Checkbox\";\n\nvi.mock(\"@vibe/shared\", async importOriginal => {\n  const actual = await importOriginal();\n  return {\n    ...(actual as object),\n    isFirefox: vi.fn()\n  };\n});\n\nfunction createCheckboxesVariables() {\n  return {\n    formName: \"myForm\",\n    checkbox1Name: \"checkbox1\",\n    option1Value: \"1\",\n    option1Text: \"Option 1\",\n    checkbox2Name: \"checkbox2\",\n    option2Value: \"2\",\n    option2Text: \"Option 2\",\n    checkbox3Name: \"checkbox3\",\n    option3Value: \"3\",\n    option3Text: \"Option 3\"\n  };\n}\n\ntype RenderHelper = {\n  formName: string;\n  checkbox1Name: string;\n  option1Value: string;\n  option1Text: string;\n  onChangeMock1: Mock;\n  checkbox2Name: string;\n  option2Text: string;\n  option2Value: string;\n  onChangeMock2: Mock;\n  checkbox3Name: string;\n  option3Text: string;\n  option3Value: string;\n  onChangeMock3: Mock;\n  defaultChecked?: boolean;\n  autoFocus?: boolean;\n};\n\nfunction renderCheckboxes({\n  formName,\n  checkbox1Name,\n  option1Value,\n  option1Text,\n  onChangeMock1,\n  checkbox2Name,\n  option2Text,\n  option2Value,\n  onChangeMock2,\n  checkbox3Name,\n  option3Text,\n  option3Value,\n  onChangeMock3,\n  defaultChecked,\n  autoFocus\n}: RenderHelper) {\n  render(\n    <form name={formName}>\n      <Checkbox\n        name={checkbox1Name}\n        value={option1Value}\n        label={option1Text}\n        defaultChecked={defaultChecked}\n        onChange={onChangeMock1}\n        autoFocus={autoFocus}\n      />\n      <Checkbox name={checkbox2Name} value={option2Value} label={option2Text} onChange={onChangeMock2} />\n      <Checkbox name={checkbox3Name} value={option3Value} label={option3Text} onChange={onChangeMock3} />\n    </form>\n  );\n}\n\nfunction testUnselectFirstOption(\n  option1Text: string,\n  option2Text: string,\n  option3Text: string,\n  clickOptions?: Record<string, unknown>\n) {\n  const option1 = screen.getByLabelText<HTMLInputElement>(option1Text);\n  const option2 = screen.getByLabelText<HTMLInputElement>(option2Text);\n  const option3 = screen.getByLabelText<HTMLInputElement>(option3Text);\n  fireEvent.click(option1, clickOptions);\n  expect(option1.checked).toBeFalsy();\n  expect(option2.checked).toBeFalsy();\n  expect(option3.checked).toBeFalsy();\n}\n\ndescribe(\"Checkbox tests\", () => {\n  const {\n    formName,\n    checkbox1Name,\n    option1Value,\n    option1Text,\n    checkbox2Name,\n    option2Value,\n    option2Text,\n    checkbox3Name,\n    option3Value,\n    option3Text\n  } = createCheckboxesVariables();\n\n  let onChangeMock1: Mock, onChangeMock2: Mock, onChangeMock3: Mock;\n\n  describe(\"regular checkbox tests with default checked\", () => {\n    beforeEach(() => {\n      onChangeMock1 = vi.fn();\n      onChangeMock2 = vi.fn();\n      onChangeMock3 = vi.fn();\n\n      renderCheckboxes({\n        formName,\n        onChangeMock1,\n        onChangeMock2,\n        onChangeMock3,\n        option3Text,\n        option3Value,\n        option2Text,\n        option2Value,\n        option1Text,\n        option1Value,\n        checkbox1Name,\n        checkbox2Name,\n        checkbox3Name,\n        defaultChecked: true\n      });\n    });\n\n    afterEach(() => {\n      cleanup();\n    });\n\n    it(\"should default select 1st option\", () => {\n      const option1 = screen.getByLabelText<HTMLInputElement>(option1Text);\n      const option2 = screen.getByLabelText<HTMLInputElement>(option2Text);\n      const option3 = screen.getByLabelText<HTMLInputElement>(option3Text);\n      expect(option1.checked).toBeTruthy();\n      expect(option2.checked).toBeFalsy();\n      expect(option3.checked).toBeFalsy();\n    });\n\n    // eslint-disable-next-line vitest/expect-expect\n    it(\"should unselect 1st option\", () => {\n      testUnselectFirstOption(option1Text, option2Text, option3Text);\n    });\n\n    it(\"should default select 1st option and should select 2nd option\", () => {\n      const option1 = screen.getByLabelText<HTMLInputElement>(option1Text);\n      const option2 = screen.getByLabelText<HTMLInputElement>(option2Text);\n      const option3 = screen.getByLabelText<HTMLInputElement>(option3Text);\n      fireEvent.click(option2);\n      expect(option1.checked).toBeTruthy();\n      expect(option2.checked).toBeTruthy();\n      expect(option3.checked).toBeFalsy();\n    });\n\n    it(\"should call the onChange callback when clicked\", () => {\n      const option1 = screen.getByLabelText(option1Text);\n      const option2 = screen.getByLabelText(option2Text);\n      fireEvent.click(option1);\n      fireEvent.click(option2);\n      expect(onChangeMock1.mock.calls.length).toBe(1);\n      expect(onChangeMock2.mock.calls.length).toBe(1);\n      expect(onChangeMock3.mock.calls.length).toBe(0);\n    });\n\n    describe(\"a11y\", () => {\n      it(\"should add the label\", () => {\n        const ariaLabel = \"Lable Name\";\n        const { getByLabelText } = render(<Checkbox label={ariaLabel} />);\n        const checkboxComponent = getByLabelText(ariaLabel);\n        expect(checkboxComponent).toBeTruthy();\n      });\n\n      it(\"should be the same text\", () => {\n        const ariaLabel = \"Lable Name\";\n        const { getByText } = render(<Checkbox label={ariaLabel} />);\n        const checkboxComponentText = getByText(ariaLabel);\n        expect(checkboxComponentText).toBeTruthy();\n      });\n    });\n  });\n\n  describe(\"regular checkbox tests with no default checked\", () => {\n    it(\"should auto focus 1st checkbox\", () => {\n      renderCheckboxes({\n        formName,\n        onChangeMock1,\n        onChangeMock2,\n        onChangeMock3,\n        option3Text,\n        option3Value,\n        option2Text,\n        option2Value,\n        option1Text,\n        option1Value,\n        checkbox1Name,\n        checkbox2Name,\n        checkbox3Name,\n        autoFocus: true\n      });\n\n      const option1 = screen.getByLabelText<HTMLInputElement>(option1Text);\n      const option2 = screen.getByLabelText<HTMLInputElement>(option2Text);\n      const option3 = screen.getByLabelText<HTMLInputElement>(option3Text);\n      expect(option1).toHaveFocus();\n      expect(option2).not.toHaveFocus();\n      expect(option3).not.toHaveFocus();\n    });\n  });\n\n  describe(\"keyboard navigation (Safari compatibility)\", () => {\n    afterEach(() => {\n      cleanup();\n    });\n\n    it(\"should have tabIndex 0 on the wrapper label by default so Safari includes it in Tab order\", () => {\n      const { getByTestId } = render(<Checkbox label=\"Option\" data-testid=\"cb\" />);\n      const wrapper = getByTestId(\"cb\");\n      expect(wrapper.tabIndex).toBe(0);\n    });\n\n    it(\"should have tabIndex -1 on the hidden input so it is not a duplicate Tab stop\", () => {\n      const { getByLabelText } = render(<Checkbox label=\"Option\" />);\n      const input = getByLabelText<HTMLInputElement>(\"Option\");\n      expect(input.tabIndex).toBe(-1);\n    });\n\n    it(\"should respect a custom tabIndex on the wrapper\", () => {\n      const { getByTestId } = render(<Checkbox label=\"Option\" tabIndex={3} data-testid=\"cb\" />);\n      const wrapper = getByTestId(\"cb\");\n      expect(wrapper.tabIndex).toBe(3);\n    });\n\n    it(\"should have no tabIndex when disabled so it is excluded from Tab order\", () => {\n      const { getByTestId } = render(<Checkbox label=\"Option\" disabled data-testid=\"cb\" />);\n      const wrapper = getByTestId(\"cb\");\n      expect(wrapper.getAttribute(\"tabindex\")).toBeNull();\n    });\n\n    it(\"should toggle the checkbox when Space is pressed on the wrapper\", () => {\n      const onChange = vi.fn();\n      const { getByTestId } = render(<Checkbox label=\"Option\" onChange={onChange} data-testid=\"cb\" />);\n      const wrapper = getByTestId(\"cb\");\n      fireEvent.keyDown(wrapper, { key: \" \" });\n      expect(onChange).toHaveBeenCalledTimes(1);\n    });\n  });\n\n  describe(\"specific firefox checkbox tests\", () => {\n    const {\n      formName,\n      checkbox1Name,\n      option1Value,\n      option1Text,\n      checkbox2Name,\n      option2Value,\n      option2Text,\n      checkbox3Name,\n      option3Value,\n      option3Text\n    } = createCheckboxesVariables();\n\n    beforeAll(() => {\n      vi.mock(\"@vibe/shared\", async importOriginal => {\n        const actual = await importOriginal();\n        return {\n          ...(actual as object),\n          isFirefox: vi.fn().mockImplementation(() => true)\n        };\n      });\n    });\n\n    afterAll(() => {\n      vi.mock(\"@vibe/shared\", async importOriginal => {\n        const actual = await importOriginal();\n        return {\n          ...(actual as object),\n          isFirefox: vi.fn()\n        };\n      });\n    });\n\n    let onChangeMock1: Mock, onChangeMock2: Mock, onChangeMock3: Mock;\n\n    beforeEach(() => {\n      onChangeMock1 = vi.fn();\n      onChangeMock2 = vi.fn();\n      onChangeMock3 = vi.fn();\n      renderCheckboxes({\n        formName,\n        onChangeMock1,\n        onChangeMock2,\n        onChangeMock3,\n        option3Text,\n        option3Value,\n        option2Text,\n        option2Value,\n        option1Text,\n        option1Value,\n        checkbox1Name,\n        checkbox2Name,\n        checkbox3Name,\n        defaultChecked: true\n      });\n    });\n\n    // eslint-disable-next-line vitest/expect-expect\n    it(\"should unselect  1st option (with firefox browser - check workaround for known firefox bug\", () => {\n      testUnselectFirstOption(option1Text, option2Text, option3Text, { shiftKey: true });\n    });\n\n    it(\"should call on change with shiftKey true when unselect option with shift key (with firefox browser - check workaround for known firefox bug\", () => {\n      let isShift = false;\n      onChangeMock1.mockImplementation((e: React.KeyboardEvent) => {\n        isShift = e.nativeEvent.shiftKey;\n      });\n      const option1 = screen.getByLabelText(option1Text);\n      fireEvent.click(option1, { shiftKey: true });\n      expect(isShift).toBeTruthy();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Checkbox/__tests__/__snapshots__/Checkbox.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`Checkbox renders correctly > when autoFocus 1`] = `\n<label\n  className=\"wrapper\"\n  data-testid=\"checkbox\"\n  data-vibe=\"Checkbox\"\n  onClickCapture={[Function]}\n  onKeyDown={[Function]}\n  onMouseUp={[Function]}\n  tabIndex={0}\n>\n  <input\n    aria-label=\"\"\n    autoFocus={true}\n    className=\"input\"\n    defaultChecked={false}\n    disabled={false}\n    name=\"\"\n    onChange={[Function]}\n    tabIndex={-1}\n    type=\"checkbox\"\n    value=\"\"\n  />\n  <div\n    className=\"checkbox\"\n    data-testid=\"checkbox-checkbox\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"16\"\n      viewBox=\"0 0 20 20\"\n      width=\"16\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M8.53033 14.2478L8 13.7175L7.46967 14.2478C7.76256 14.5407 8.23744 14.5407 8.53033 14.2478ZM8 12.6569L4.53033 9.18718C4.23744 8.89429 3.76256 8.89429 3.46967 9.18718C3.17678 9.48008 3.17678 9.95495 3.46967 10.2478L7.46967 14.2478L8 13.7175L8.53033 14.2478L16.2478 6.53033C16.5407 6.23743 16.5407 5.76256 16.2478 5.46967C15.955 5.17677 15.4801 5.17677 15.1872 5.46967L8 12.6569Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  </div>\n  <span\n    className=\"typography primary start singleLineEllipsis text text2Normal label\"\n    data-testid=\"checkbox-label\"\n  />\n</label>\n`;\n\nexports[`Checkbox renders correctly > when checked 1`] = `\n<label\n  className=\"wrapper\"\n  data-testid=\"checkbox\"\n  data-vibe=\"Checkbox\"\n  onClickCapture={[Function]}\n  onKeyDown={[Function]}\n  onMouseUp={[Function]}\n  tabIndex={0}\n>\n  <input\n    aria-label=\"\"\n    checked={true}\n    className=\"input\"\n    disabled={false}\n    name=\"\"\n    onChange={[Function]}\n    tabIndex={-1}\n    type=\"checkbox\"\n    value=\"\"\n  />\n  <div\n    className=\"checkbox\"\n    data-testid=\"checkbox-checkbox\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"16\"\n      viewBox=\"0 0 20 20\"\n      width=\"16\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M8.53033 14.2478L8 13.7175L7.46967 14.2478C7.76256 14.5407 8.23744 14.5407 8.53033 14.2478ZM8 12.6569L4.53033 9.18718C4.23744 8.89429 3.76256 8.89429 3.46967 9.18718C3.17678 9.48008 3.17678 9.95495 3.46967 10.2478L7.46967 14.2478L8 13.7175L8.53033 14.2478L16.2478 6.53033C16.5407 6.23743 16.5407 5.76256 16.2478 5.46967C15.955 5.17677 15.4801 5.17677 15.1872 5.46967L8 12.6569Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  </div>\n  <span\n    className=\"typography primary start singleLineEllipsis text text2Normal label\"\n    data-testid=\"checkbox-label\"\n  />\n</label>\n`;\n\nexports[`Checkbox renders correctly > when default checked 1`] = `\n<label\n  className=\"wrapper\"\n  data-testid=\"checkbox\"\n  data-vibe=\"Checkbox\"\n  onClickCapture={[Function]}\n  onKeyDown={[Function]}\n  onMouseUp={[Function]}\n  tabIndex={0}\n>\n  <input\n    aria-label=\"\"\n    className=\"input\"\n    defaultChecked={true}\n    disabled={false}\n    name=\"\"\n    onChange={[Function]}\n    tabIndex={-1}\n    type=\"checkbox\"\n    value=\"\"\n  />\n  <div\n    className=\"checkbox\"\n    data-testid=\"checkbox-checkbox\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"16\"\n      viewBox=\"0 0 20 20\"\n      width=\"16\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M8.53033 14.2478L8 13.7175L7.46967 14.2478C7.76256 14.5407 8.23744 14.5407 8.53033 14.2478ZM8 12.6569L4.53033 9.18718C4.23744 8.89429 3.76256 8.89429 3.46967 9.18718C3.17678 9.48008 3.17678 9.95495 3.46967 10.2478L7.46967 14.2478L8 13.7175L8.53033 14.2478L16.2478 6.53033C16.5407 6.23743 16.5407 5.76256 16.2478 5.46967C15.955 5.17677 15.4801 5.17677 15.1872 5.46967L8 12.6569Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  </div>\n  <span\n    className=\"typography primary start singleLineEllipsis text text2Normal label\"\n    data-testid=\"checkbox-label\"\n  />\n</label>\n`;\n\nexports[`Checkbox renders correctly > when disabled 1`] = `\n<label\n  className=\"wrapper\"\n  data-testid=\"checkbox\"\n  data-vibe=\"Checkbox\"\n  onClickCapture={[Function]}\n  onKeyDown={[Function]}\n  onMouseUp={[Function]}\n>\n  <input\n    aria-label=\"\"\n    className=\"input\"\n    defaultChecked={false}\n    disabled={true}\n    name=\"\"\n    onChange={[Function]}\n    tabIndex={-1}\n    type=\"checkbox\"\n    value=\"\"\n  />\n  <div\n    className=\"checkbox\"\n    data-testid=\"checkbox-checkbox\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"16\"\n      viewBox=\"0 0 20 20\"\n      width=\"16\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M8.53033 14.2478L8 13.7175L7.46967 14.2478C7.76256 14.5407 8.23744 14.5407 8.53033 14.2478ZM8 12.6569L4.53033 9.18718C4.23744 8.89429 3.76256 8.89429 3.46967 9.18718C3.17678 9.48008 3.17678 9.95495 3.46967 10.2478L7.46967 14.2478L8 13.7175L8.53033 14.2478L16.2478 6.53033C16.5407 6.23743 16.5407 5.76256 16.2478 5.46967C15.955 5.17677 15.4801 5.17677 15.1872 5.46967L8 12.6569Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  </div>\n  <span\n    className=\"typography primary start singleLineEllipsis text text2Normal label\"\n    data-testid=\"checkbox-label\"\n  />\n</label>\n`;\n\nexports[`Checkbox renders correctly > when interminate 1`] = `\n<label\n  className=\"wrapper\"\n  data-testid=\"checkbox\"\n  data-vibe=\"Checkbox\"\n  onClickCapture={[Function]}\n  onKeyDown={[Function]}\n  onMouseUp={[Function]}\n  tabIndex={0}\n>\n  <input\n    aria-label=\"\"\n    className=\"input\"\n    defaultChecked={false}\n    disabled={false}\n    name=\"\"\n    onChange={[Function]}\n    tabIndex={-1}\n    type=\"checkbox\"\n    value=\"\"\n  />\n  <div\n    className=\"checkbox\"\n    data-testid=\"checkbox-checkbox\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"16\"\n      viewBox=\"0 0 20 20\"\n      width=\"16\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M2.25 10C2.25 9.58579 2.58579 9.25 3 9.25H17C17.4142 9.25 17.75 9.58579 17.75 10C17.75 10.4142 17.4142 10.75 17 10.75H3C2.58579 10.75 2.25 10.4142 2.25 10Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  </div>\n  <span\n    className=\"typography primary start singleLineEllipsis text text2Normal label\"\n    data-testid=\"checkbox-label\"\n  />\n</label>\n`;\n\nexports[`Checkbox renders correctly > with aria-labelledby 1`] = `\n<label\n  className=\"wrapper\"\n  data-testid=\"checkbox\"\n  data-vibe=\"Checkbox\"\n  onClickCapture={[Function]}\n  onKeyDown={[Function]}\n  onMouseUp={[Function]}\n  tabIndex={0}\n>\n  <input\n    aria-label=\"\"\n    aria-labelledby=\"aria\"\n    className=\"input\"\n    defaultChecked={false}\n    disabled={false}\n    name=\"\"\n    onChange={[Function]}\n    tabIndex={-1}\n    type=\"checkbox\"\n    value=\"\"\n  />\n  <div\n    className=\"checkbox\"\n    data-testid=\"checkbox-checkbox\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"16\"\n      viewBox=\"0 0 20 20\"\n      width=\"16\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M8.53033 14.2478L8 13.7175L7.46967 14.2478C7.76256 14.5407 8.23744 14.5407 8.53033 14.2478ZM8 12.6569L4.53033 9.18718C4.23744 8.89429 3.76256 8.89429 3.46967 9.18718C3.17678 9.48008 3.17678 9.95495 3.46967 10.2478L7.46967 14.2478L8 13.7175L8.53033 14.2478L16.2478 6.53033C16.5407 6.23743 16.5407 5.76256 16.2478 5.46967C15.955 5.17677 15.4801 5.17677 15.1872 5.46967L8 12.6569Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  </div>\n  <span\n    className=\"typography primary start singleLineEllipsis text text2Normal label\"\n    data-testid=\"checkbox-label\"\n  />\n</label>\n`;\n\nexports[`Checkbox renders correctly > with empty props 1`] = `\n<label\n  className=\"wrapper\"\n  data-testid=\"checkbox\"\n  data-vibe=\"Checkbox\"\n  onClickCapture={[Function]}\n  onKeyDown={[Function]}\n  onMouseUp={[Function]}\n  tabIndex={0}\n>\n  <input\n    aria-label=\"\"\n    className=\"input\"\n    defaultChecked={false}\n    disabled={false}\n    name=\"\"\n    onChange={[Function]}\n    tabIndex={-1}\n    type=\"checkbox\"\n    value=\"\"\n  />\n  <div\n    className=\"checkbox\"\n    data-testid=\"checkbox-checkbox\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"16\"\n      viewBox=\"0 0 20 20\"\n      width=\"16\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M8.53033 14.2478L8 13.7175L7.46967 14.2478C7.76256 14.5407 8.23744 14.5407 8.53033 14.2478ZM8 12.6569L4.53033 9.18718C4.23744 8.89429 3.76256 8.89429 3.46967 9.18718C3.17678 9.48008 3.17678 9.95495 3.46967 10.2478L7.46967 14.2478L8 13.7175L8.53033 14.2478L16.2478 6.53033C16.5407 6.23743 16.5407 5.76256 16.2478 5.46967C15.955 5.17677 15.4801 5.17677 15.1872 5.46967L8 12.6569Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  </div>\n  <span\n    className=\"typography primary start singleLineEllipsis text text2Normal label\"\n    data-testid=\"checkbox-label\"\n  />\n</label>\n`;\n\nexports[`Checkbox renders correctly > with name 1`] = `\n<label\n  className=\"wrapper\"\n  data-testid=\"checkbox\"\n  data-vibe=\"Checkbox\"\n  onClickCapture={[Function]}\n  onKeyDown={[Function]}\n  onMouseUp={[Function]}\n  tabIndex={0}\n>\n  <input\n    aria-label=\"\"\n    className=\"input\"\n    defaultChecked={false}\n    disabled={false}\n    name=\"checkbox\"\n    onChange={[Function]}\n    tabIndex={-1}\n    type=\"checkbox\"\n    value=\"\"\n  />\n  <div\n    className=\"checkbox\"\n    data-testid=\"checkbox-checkbox\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"16\"\n      viewBox=\"0 0 20 20\"\n      width=\"16\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M8.53033 14.2478L8 13.7175L7.46967 14.2478C7.76256 14.5407 8.23744 14.5407 8.53033 14.2478ZM8 12.6569L4.53033 9.18718C4.23744 8.89429 3.76256 8.89429 3.46967 9.18718C3.17678 9.48008 3.17678 9.95495 3.46967 10.2478L7.46967 14.2478L8 13.7175L8.53033 14.2478L16.2478 6.53033C16.5407 6.23743 16.5407 5.76256 16.2478 5.46967C15.955 5.17677 15.4801 5.17677 15.1872 5.46967L8 12.6569Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  </div>\n  <span\n    className=\"typography primary start singleLineEllipsis text text2Normal label\"\n    data-testid=\"checkbox-label\"\n  />\n</label>\n`;\n\nexports[`Checkbox renders correctly > with props 1`] = `\n<label\n  className=\"wrapper dummy-class-name\"\n  data-testid=\"checkbox\"\n  data-vibe=\"Checkbox\"\n  onClickCapture={[Function]}\n  onKeyDown={[Function]}\n  onMouseUp={[Function]}\n  tabIndex={0}\n>\n  <input\n    aria-label=\"Option 1\"\n    className=\"input\"\n    defaultChecked={false}\n    disabled={false}\n    name=\"checkbox\"\n    onChange={[Function]}\n    tabIndex={-1}\n    type=\"checkbox\"\n    value=\"option1\"\n  />\n  <div\n    className=\"checkbox\"\n    data-testid=\"checkbox-checkbox\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"16\"\n      viewBox=\"0 0 20 20\"\n      width=\"16\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M8.53033 14.2478L8 13.7175L7.46967 14.2478C7.76256 14.5407 8.23744 14.5407 8.53033 14.2478ZM8 12.6569L4.53033 9.18718C4.23744 8.89429 3.76256 8.89429 3.46967 9.18718C3.17678 9.48008 3.17678 9.95495 3.46967 10.2478L7.46967 14.2478L8 13.7175L8.53033 14.2478L16.2478 6.53033C16.5407 6.23743 16.5407 5.76256 16.2478 5.46967C15.955 5.17677 15.4801 5.17677 15.1872 5.46967L8 12.6569Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  </div>\n  <span\n    className=\"typography primary start singleLineEllipsis text text2Normal label\"\n    data-testid=\"checkbox-label\"\n  >\n    Option 1\n  </span>\n</label>\n`;\n\nexports[`Checkbox renders correctly > with value 1`] = `\n<label\n  className=\"wrapper\"\n  data-testid=\"checkbox\"\n  data-vibe=\"Checkbox\"\n  onClickCapture={[Function]}\n  onKeyDown={[Function]}\n  onMouseUp={[Function]}\n  tabIndex={0}\n>\n  <input\n    aria-label=\"\"\n    className=\"input\"\n    defaultChecked={false}\n    disabled={false}\n    name=\"\"\n    onChange={[Function]}\n    tabIndex={-1}\n    type=\"checkbox\"\n    value=\"checkboxValue\"\n  />\n  <div\n    className=\"checkbox\"\n    data-testid=\"checkbox-checkbox\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"16\"\n      viewBox=\"0 0 20 20\"\n      width=\"16\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M8.53033 14.2478L8 13.7175L7.46967 14.2478C7.76256 14.5407 8.23744 14.5407 8.53033 14.2478ZM8 12.6569L4.53033 9.18718C4.23744 8.89429 3.76256 8.89429 3.46967 9.18718C3.17678 9.48008 3.17678 9.95495 3.46967 10.2478L7.46967 14.2478L8 13.7175L8.53033 14.2478L16.2478 6.53033C16.5407 6.23743 16.5407 5.76256 16.2478 5.46967C15.955 5.17677 15.4801 5.17677 15.1872 5.46967L8 12.6569Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  </div>\n  <span\n    className=\"typography primary start singleLineEllipsis text text2Normal label\"\n    data-testid=\"checkbox-label\"\n  />\n</label>\n`;\n\nexports[`Checkbox renders correctly > without label 1`] = `\n<label\n  className=\"wrapper\"\n  data-testid=\"checkbox\"\n  data-vibe=\"Checkbox\"\n  onClickCapture={[Function]}\n  onKeyDown={[Function]}\n  onMouseUp={[Function]}\n  tabIndex={0}\n>\n  <input\n    aria-label=\"\"\n    className=\"input\"\n    defaultChecked={false}\n    disabled={false}\n    name=\"\"\n    onChange={[Function]}\n    tabIndex={-1}\n    type=\"checkbox\"\n    value=\"\"\n  />\n  <div\n    className=\"checkbox\"\n    data-testid=\"checkbox-checkbox\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"16\"\n      viewBox=\"0 0 20 20\"\n      width=\"16\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M8.53033 14.2478L8 13.7175L7.46967 14.2478C7.76256 14.5407 8.23744 14.5407 8.53033 14.2478ZM8 12.6569L4.53033 9.18718C4.23744 8.89429 3.76256 8.89429 3.46967 9.18718C3.17678 9.48008 3.17678 9.95495 3.46967 10.2478L7.46967 14.2478L8 13.7175L8.53033 14.2478L16.2478 6.53033C16.5407 6.23743 16.5407 5.76256 16.2478 5.46967C15.955 5.17677 15.4801 5.17677 15.1872 5.46967L8 12.6569Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  </div>\n</label>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Checkbox/hooks/useSupportFirefoxLabelClick.tsx",
    "content": "import type React from \"react\";\nimport { useCallback, useRef } from \"react\";\nimport { isFirefox } from \"@vibe/shared\";\n\nexport function useSupportFirefoxLabelClick({ inputRef }: { inputRef: React.RefObject<HTMLInputElement> }) {\n  // The purpose of this variable is to make sure that the captured event is a checkbox's label click event and not a manual event\n  // that we actually created in this hook.\n  // We handle the custom event create state as ref because this variable should not be depend on the component renders\n  // and it should be unique per checkbox.\n  const customEventCreated = useRef(false);\n\n  // fix for known bug firefox bug: firefox does not support checking or unchecking checkbox by its label when shift pressed\n  const onClickCapture = useCallback(\n    (e: React.MouseEvent) => {\n      // We would like to dispatch a manual event to click on the input only for cases where there is a bug in supporting this capability -\n      // firefox browsers when the shift key is pressed.\n      // In addition we make sure here that the captured event is not a manually generated event created by this code because we want to prevent\n      // an infinite loop in recursion here.\n      if (!customEventCreated.current && e.shiftKey && isFirefox() && inputRef?.current?.dispatchEvent) {\n        e.preventDefault();\n        const manualClickEvent = new MouseEvent(\"click\", {\n          shiftKey: true,\n          // After dispatch this event we will want it to be captured by all the relevant event listeners which registered to this checkbox input.\n          bubbles: true,\n          cancelable: true\n        });\n\n        customEventCreated.current = true;\n        inputRef.current.dispatchEvent(manualClickEvent);\n      } else if (customEventCreated.current) {\n        customEventCreated.current = false;\n      }\n    },\n    [customEventCreated, inputRef]\n  );\n\n  return { onClickCapture };\n}\n"
  },
  {
    "path": "packages/core/src/components/Checkbox/index.ts",
    "content": "export { default as Checkbox, type CheckBoxProps as CheckboxProps } from \"./Checkbox\";\n"
  },
  {
    "path": "packages/core/src/components/Chips/Chips.module.scss",
    "content": "@import \"../../styles/typography\";\n@import \"../../styles/states\";\n@import \"../../styles/keyframes\";\n@import \"~@vibe/style/dist/mixins/states\";\n\n.chips {\n  display: inline-flex;\n  overflow: hidden;\n  height: 24px;\n  border-radius: 4px;\n  padding: 0 8px;\n  align-items: center;\n  justify-content: center;\n  margin: var(--chips-margin, #{0 var(--space-4)});\n  user-select: none;\n  @include smoothing-text;\n  color: var(--primary-text-color);\n  animation: chips-pop-in-emphasized var(--motion-productive-medium) var(--motion-timing-emphasize);\n  &.border {\n    border: 1px solid var(--primary-background-color);\n  }\n  &.withUserSelect {\n    user-select: text;\n    cursor: text;\n  }\n  &.noMargin {\n    margin: 0;\n  }\n\n  .label {\n    @include ellipsis();\n  }\n\n  &.noAnimation {\n    animation: none;\n  }\n\n  .icon,\n  .avatar,\n  .customRenderer {\n    min-width: 18px;\n    &.left {\n      margin-inline-end: var(--space-4);\n    }\n    &.right {\n      margin-inline-start: var(--space-4);\n    }\n    &.close {\n      margin-inline-start: var(--space-4);\n      color: var(--primary-text-color);\n    }\n  }\n\n  &.disabled {\n    .icon {\n      color: var(--disabled-text-color);\n    }\n    .label {\n      color: var(--disabled-text-color);\n    }\n  }\n\n  &.defaultCursor {\n    cursor: default;\n  }\n\n  &.clickable {\n    @include clickable;\n    &.disabled {\n      @include clickable-disabled;\n    }\n    &.disableTextSelection {\n      @include clickable-disable-text-selection;\n    }\n  }\n}\n\n@include keyframe(chips-pop-in-emphasized) {\n  @include pop-in-emphasized();\n}\n"
  },
  {
    "path": "packages/core/src/components/Chips/Chips.tsx",
    "content": "import React, { forwardRef, useCallback, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { Icon } from \"@vibe/icon\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport { CloseSmall } from \"@vibe/icons\";\nimport { getCSSVar } from \"../../services/themes\";\nimport { type ElementAllowedColor, getElementColor } from \"../../types/Colors\";\nimport Avatar from \"../Avatar/Avatar\";\nimport { IconButton } from \"@vibe/icon-button\";\nimport { Text } from \"@vibe/typography\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { type AvatarType } from \"../Avatar\";\nimport { type ElementContent, type VibeComponentProps } from \"../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport useSetFocus from \"../../hooks/useSetFocus\";\nimport { useClickableProps } from \"@vibe/clickable\";\nimport styles from \"./Chips.module.scss\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nconst CHIPS_AVATAR_SIZE = 18;\n\nexport interface ChipsProps extends VibeComponentProps {\n  /**\n   * The text or content displayed inside the chip.\n   */\n  label?: ElementContent;\n  /**\n   * If true, the chip is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If true, the chip is read-only and cannot be deleted.\n   */\n  readOnly?: boolean;\n  /**\n   * A React element displayed on the right side.\n   */\n  rightRenderer?: ElementContent;\n  /**\n   * A React element displayed on the left side.\n   */\n  leftRenderer?: ElementContent;\n  /**\n   * Icon displayed on the right side.\n   */\n  rightIcon?: SubIcon;\n  /**\n   * Icon displayed on the left side.\n   */\n  leftIcon?: SubIcon;\n  /**\n   * Image URL or text for an avatar displayed on the right.\n   */\n  rightAvatar?: string;\n  /**\n   * The type of avatar displayed on the right.\n   */\n  rightAvatarType?: AvatarType;\n  /**\n   * Image URL or text for an avatar displayed on the left.\n   */\n  leftAvatar?: string;\n  /**\n   * The type of avatar displayed on the left.\n   */\n  leftAvatarType?: AvatarType;\n  /**\n   * Class name applied to left or right icons.\n   */\n  iconClassName?: string;\n  /**\n   * Class name applied to left or right avatars.\n   */\n  avatarClassName?: string;\n  /**\n   * The background color of the chip.\n   */\n  color?: Exclude<ElementAllowedColor, \"dark_indigo\" | \"blackish\">;\n  /**\n   * The size of the icons inside the chip.\n   */\n  iconSize?: number | string;\n  /**\n   * Callback fired when the chip is deleted.\n   */\n  onDelete?: (id: string, event: React.MouseEvent<HTMLSpanElement>) => void;\n  /**\n   * If true, disables the chip's entry animation.\n   */\n  noAnimation?: boolean;\n  /**\n   * If true, allows the user to select text inside the chip.\n   */\n  allowTextSelection?: boolean;\n  /**\n   * Callback fired when the mouse button is pressed on the chip.\n   */\n  onMouseDown?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  /**\n   * Callback fired when the chip is clicked.\n   */\n  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  /**\n   * The label of the chip for accessibility.\n   */\n  \"aria-label\"?: string;\n  /**\n   * If true, indicates that the chip has a popup.\n   */\n  \"aria-haspopup\"?: boolean;\n  /**\n   * If true, displays a border around the chip.\n   */\n  showBorder?: boolean;\n  /**\n   * The label for the close button.\n   */\n  closeButtonAriaLabel?: string;\n  /**\n   * If true, removes the default margin from the chip.\n   */\n  noMargin?: boolean;\n}\n\nconst Chips = forwardRef(\n  (\n    {\n      className,\n      avatarClassName,\n      iconClassName,\n      id,\n      label = \"\",\n      leftIcon = null,\n      rightIcon = null,\n      leftAvatar = null,\n      rightAvatar = null,\n      disabled = false,\n      readOnly = false,\n      allowTextSelection = false,\n      color = \"primary\",\n      iconSize = 18,\n      onDelete = (_id: string, _e: React.MouseEvent<HTMLSpanElement>) => {},\n      onMouseDown,\n      onClick,\n      noAnimation = true,\n      \"aria-label\": ariaLabel,\n      \"aria-haspopup\": ariaHasPopup = false,\n      \"data-testid\": dataTestId,\n      leftAvatarType = \"img\",\n      rightAvatarType = \"img\",\n      showBorder = false,\n      leftRenderer,\n      rightRenderer,\n      closeButtonAriaLabel = \"Remove\",\n      noMargin = false\n    }: ChipsProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const componentDataTestId = dataTestId || getTestId(ComponentDefaultTestId.CHIP, id);\n    const hasClickableWrapper = !!onClick || !!onMouseDown;\n    const hasCloseButton = !readOnly && !disabled;\n    const overrideAriaLabel = ariaLabel || (typeof label === \"string\" && label) || \"\";\n\n    const iconButtonRef = useRef(null);\n    const componentRef = useRef(null);\n\n    const [isHovered, setIsHovered] = useState(false);\n    const handleMouseEnter = useCallback(() => setIsHovered(true), []);\n    const handleMouseLeave = useCallback(() => setIsHovered(false), []);\n    const { isFocused } = useSetFocus({ ref: componentRef });\n\n    const mergedRef = useMergeRef<HTMLDivElement>(ref, componentRef);\n\n    const overrideClassName = cx(styles.chips, className, {\n      [styles.disabled]: disabled,\n      [styles.noAnimation]: noAnimation,\n      [styles.withUserSelect]: allowTextSelection,\n      [styles.border]: showBorder,\n      [styles.noMargin]: noMargin\n    });\n    const clickableClassName = cx(styles.clickable, overrideClassName, {\n      [styles.disabled]: disabled,\n      [styles.disableTextSelection]: !allowTextSelection\n    });\n\n    const backgroundColorStyle = useMemo(() => {\n      let cssVar;\n      if (disabled) {\n        cssVar = getCSSVar(\"disabled-background-color\");\n      } else if (hasClickableWrapper && (isHovered || isFocused)) {\n        cssVar = getElementColor(color, true, true);\n      } else {\n        cssVar = getElementColor(color, true);\n      }\n      return { backgroundColor: cssVar };\n    }, [disabled, hasClickableWrapper, isHovered, isFocused, color]);\n\n    const onDeleteCallback = useCallback(\n      (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {\n        e.stopPropagation();\n        if (onDelete) {\n          onDelete(id, e);\n        }\n      },\n      [id, onDelete]\n    );\n\n    const onClickCallback = useCallback(\n      (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n        if (onClick !== undefined && (e.target as HTMLElement) !== iconButtonRef.current) {\n          e.preventDefault();\n          onClick(e);\n        }\n      },\n      [onClick]\n    );\n\n    const clickableProps = useClickableProps(\n      {\n        onClick: onClickCallback,\n        onMouseDown,\n        disabled,\n        id,\n        \"data-testid\": componentDataTestId,\n        \"aria-label\": overrideAriaLabel,\n        \"aria-hidden\": false,\n        \"aria-haspopup\": ariaHasPopup,\n        \"aria-expanded\": false\n      },\n      mergedRef\n    );\n    const wrapperProps = hasClickableWrapper\n      ? {\n          ...clickableProps,\n          ref: mergedRef,\n          className: clickableClassName,\n          style: backgroundColorStyle,\n          onMouseEnter: handleMouseEnter,\n          onMouseLeave: handleMouseLeave\n        }\n      : {\n          className: overrideClassName,\n          \"aria-label\": overrideAriaLabel,\n          style: backgroundColorStyle,\n          ref: mergedRef,\n          onClick: onClickCallback,\n          onMouseDown,\n          id: id,\n          \"data-testid\": componentDataTestId,\n          onMouseEnter: handleMouseEnter,\n          onMouseLeave: handleMouseLeave\n        };\n\n    const leftAvatarProps = leftAvatarType === \"text\" ? { text: leftAvatar } : { src: leftAvatar };\n    const rightAvatarProps = leftAvatarType === \"text\" ? { text: rightAvatar } : { src: rightAvatar };\n\n    return (\n      <div {...wrapperProps} data-vibe={ComponentVibeId.CHIPS}>\n        {leftAvatar ? (\n          <Avatar\n            withoutBorder\n            className={cx(styles.avatar, styles.left, avatarClassName)}\n            customSize={CHIPS_AVATAR_SIZE}\n            type={leftAvatarType}\n            key={id}\n            {...leftAvatarProps}\n          />\n        ) : null}\n        {leftIcon ? (\n          <Icon\n            className={cx(styles.icon, styles.left, iconClassName)}\n            type=\"font\"\n            icon={leftIcon}\n            size={iconSize}\n            ignoreFocusStyle\n          />\n        ) : null}\n        {leftRenderer && <div className={cx(styles.customRenderer, styles.left)}>{leftRenderer}</div>}\n        <Text type=\"text2\" className={styles.label}>\n          {label}\n        </Text>\n        {rightIcon ? (\n          <Icon\n            className={cx(styles.icon, styles.right, iconClassName)}\n            type=\"font\"\n            icon={rightIcon}\n            size={iconSize}\n            ignoreFocusStyle\n          />\n        ) : null}\n        {rightAvatar ? (\n          <Avatar\n            withoutBorder\n            className={cx(styles.avatar, styles.right, avatarClassName)}\n            customSize={CHIPS_AVATAR_SIZE}\n            type={rightAvatarType}\n            key={id}\n            {...rightAvatarProps}\n          />\n        ) : null}\n        {rightRenderer && <div className={cx(styles.customRenderer, styles.right)}>{rightRenderer}</div>}\n        {hasCloseButton && (\n          <IconButton\n            size=\"xxs\"\n            color=\"on-primary-color\"\n            className={cx(styles.icon, styles.close)}\n            aria-label={closeButtonAriaLabel}\n            hideTooltip\n            icon={CloseSmall}\n            onClick={onDeleteCallback}\n            data-testid={`${componentDataTestId}-close`}\n            ref={iconButtonRef}\n          />\n        )}\n      </div>\n    );\n  }\n);\n\nexport default Chips;\n"
  },
  {
    "path": "packages/core/src/components/Chips/__tests__/Chips.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport Chips from \"../Chips\";\nimport { Calendar } from \"@vibe/icons\";\n\ndescribe(\"Chips renders correctly\", () => {\n  it(\"renders correctly with empty props\", () => {\n    const tree = renderer.create(<Chips />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with color\", () => {\n    const tree = renderer.create(<Chips color=\"negative\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly disabled chip\", () => {\n    const tree = renderer.create(<Chips disabled />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly without close button\", () => {\n    const tree = renderer.create(<Chips readOnly />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with text\", () => {\n    const tree = renderer.create(<Chips label=\"text\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with right icon\", () => {\n    const tree = renderer.create(<Chips rightIcon={Calendar} readOnly />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with left icon\", () => {\n    const tree = renderer.create(<Chips leftIcon={Calendar} readOnly />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with right avatar\", () => {\n    const tree = renderer.create(<Chips rightAvatar={\"image-url.jpg\"} readOnly />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with left avatar\", () => {\n    const tree = renderer.create(<Chips leftAvatar={\"image-url.jpg\"} readOnly />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with left custom renderer\", () => {\n    const tree = renderer.create(<Chips leftRenderer={<div>custom renderer</div>} />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with right custom renderer\", () => {\n    const tree = renderer.create(<Chips rightRenderer={<div>custom renderer</div>} />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with a custom label\", () => {\n    const tree = renderer\n      .create(\n        <Chips\n          readOnly\n          aria-label={\"This is mandatory\"}\n          label={\n            <>\n              This is mandatory <span>*</span>\n            </>\n          }\n        />\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Chips/__tests__/Chips.test.tsx",
    "content": "import { vi, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { render, fireEvent, screen } from \"@testing-library/react\";\nimport Chips from \"../Chips\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\n\ndescribe(\"Chips tests\", () => {\n  const label = \"Chip\";\n  const defaultTestId = getTestId(ComponentDefaultTestId.CHIP);\n  const className = \"test-class\";\n\n  it(\"Should call the onDelete callback when on close button clicked\", () => {\n    const testId = `${defaultTestId}-close`;\n    const onDeletedMock = vi.fn();\n    render(<Chips className={className} onDelete={onDeletedMock} label={label} />);\n    fireEvent.click(screen.getByTestId(testId));\n    expect(onDeletedMock.mock.calls.length).toBe(1);\n  });\n  it(\"Should call onClick callback when chips clicked\", () => {\n    const onClick = vi.fn();\n    render(<Chips className={className} onClick={onClick} label={label} />);\n    fireEvent.click(screen.getByTestId(defaultTestId));\n    expect(onClick.mock.calls.length).toBe(1);\n  });\n  it(\"Should call the onMousedown callback when mouse down\", () => {\n    const onMouseDown = vi.fn();\n    render(<Chips className={className} onMouseDown={onMouseDown} label={label} />);\n    fireEvent.mouseDown(screen.getByTestId(defaultTestId));\n    expect(onMouseDown.mock.calls.length).toBe(1);\n  });\n  it(\"Should not call onClick callback when chips clicked with disabled state\", () => {\n    const onClick = vi.fn();\n    render(<Chips className={className} onClick={onClick} label={label} disabled />);\n    fireEvent.click(screen.getByTestId(defaultTestId));\n    expect(onClick.mock.calls.length).toBe(0);\n  });\n  it(\"Should call the onMousedown callback when mouse down with disabled state\", () => {\n    const onMouseDown = vi.fn();\n    render(<Chips className={className} onMouseDown={onMouseDown} label={label} disabled />);\n    fireEvent.click(screen.getByTestId(defaultTestId));\n    expect(onMouseDown.mock.calls.length).toBe(0);\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Chips/__tests__/__snapshots__/Chips.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`Chips renders correctly > renders correctly disabled chip 1`] = `\n<div\n  aria-label=\"\"\n  className=\"chips disabled noAnimation\"\n  data-testid=\"chip\"\n  data-vibe=\"Chips\"\n  onClick={[Function]}\n  onMouseEnter={[Function]}\n  onMouseLeave={[Function]}\n  style={\n    {\n      \"backgroundColor\": undefined,\n    }\n  }\n>\n  <div\n    className=\"typography primary start singleLineEllipsis text text2Normal label\"\n    data-testid=\"text\"\n  >\n    \n  </div>\n</div>\n`;\n\nexports[`Chips renders correctly > renders correctly with a custom label 1`] = `\n<div\n  aria-label=\"This is mandatory\"\n  className=\"chips noAnimation\"\n  data-testid=\"chip\"\n  data-vibe=\"Chips\"\n  onClick={[Function]}\n  onMouseEnter={[Function]}\n  onMouseLeave={[Function]}\n  style={\n    {\n      \"backgroundColor\": \"var(--primary-selected-color)\",\n    }\n  }\n>\n  <div\n    className=\"typography primary start singleLineEllipsis text text2Normal label\"\n    data-testid=\"text\"\n  >\n    This is mandatory \n    <span>\n      *\n    </span>\n  </div>\n</div>\n`;\n\nexports[`Chips renders correctly > renders correctly with color 1`] = `\n<div\n  aria-label=\"\"\n  className=\"chips noAnimation\"\n  data-testid=\"chip\"\n  data-vibe=\"Chips\"\n  onClick={[Function]}\n  onMouseEnter={[Function]}\n  onMouseLeave={[Function]}\n  style={\n    {\n      \"backgroundColor\": \"var(--negative-color-selected)\",\n    }\n  }\n>\n  <div\n    className=\"typography primary start singleLineEllipsis text text2Normal label\"\n    data-testid=\"text\"\n  >\n    \n  </div>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    aria-label=\"Remove\"\n    className=\"icon close button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding\"\n    data-testid=\"chip-close\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    style={\n      {\n        \"alignItems\": \"center\",\n        \"height\": \"16px\",\n        \"justifyContent\": \"center\",\n        \"padding\": 0,\n        \"width\": \"16px\",\n      }\n    }\n    type=\"button\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"16\"\n      viewBox=\"0 0 20 20\"\n      width=\"16\"\n    >\n      <path\n        d=\"M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z\"\n      />\n    </svg>\n  </button>\n</div>\n`;\n\nexports[`Chips renders correctly > renders correctly with empty props 1`] = `\n<div\n  aria-label=\"\"\n  className=\"chips noAnimation\"\n  data-testid=\"chip\"\n  data-vibe=\"Chips\"\n  onClick={[Function]}\n  onMouseEnter={[Function]}\n  onMouseLeave={[Function]}\n  style={\n    {\n      \"backgroundColor\": \"var(--primary-selected-color)\",\n    }\n  }\n>\n  <div\n    className=\"typography primary start singleLineEllipsis text text2Normal label\"\n    data-testid=\"text\"\n  >\n    \n  </div>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    aria-label=\"Remove\"\n    className=\"icon close button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding\"\n    data-testid=\"chip-close\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    style={\n      {\n        \"alignItems\": \"center\",\n        \"height\": \"16px\",\n        \"justifyContent\": \"center\",\n        \"padding\": 0,\n        \"width\": \"16px\",\n      }\n    }\n    type=\"button\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"16\"\n      viewBox=\"0 0 20 20\"\n      width=\"16\"\n    >\n      <path\n        d=\"M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z\"\n      />\n    </svg>\n  </button>\n</div>\n`;\n\nexports[`Chips renders correctly > renders correctly with left avatar 1`] = `\n<div\n  aria-label=\"\"\n  className=\"chips noAnimation\"\n  data-testid=\"chip\"\n  data-vibe=\"Chips\"\n  onClick={[Function]}\n  onMouseEnter={[Function]}\n  onMouseLeave={[Function]}\n  style={\n    {\n      \"backgroundColor\": \"var(--primary-selected-color)\",\n    }\n  }\n>\n  <div\n    className=\"avatar large avatar left\"\n    data-testid=\"avatar\"\n    data-vibe=\"Avatar\"\n    style={\n      {\n        \"height\": 18,\n        \"width\": 18,\n      }\n    }\n  >\n    <div\n      aria-hidden={false}\n      className=\"circle circleImg withoutBorder\"\n      style={{}}\n      tabIndex={-1}\n    >\n      <img\n        className=\"contentImg contentImgLarge\"\n        data-testid=\"avatar-content\"\n        src=\"image-url.jpg\"\n      />\n    </div>\n  </div>\n  <div\n    className=\"typography primary start singleLineEllipsis text text2Normal label\"\n    data-testid=\"text\"\n  >\n    \n  </div>\n</div>\n`;\n\nexports[`Chips renders correctly > renders correctly with left custom renderer 1`] = `\n<div\n  aria-label=\"\"\n  className=\"chips noAnimation\"\n  data-testid=\"chip\"\n  data-vibe=\"Chips\"\n  onClick={[Function]}\n  onMouseEnter={[Function]}\n  onMouseLeave={[Function]}\n  style={\n    {\n      \"backgroundColor\": \"var(--primary-selected-color)\",\n    }\n  }\n>\n  <div\n    className=\"customRenderer left\"\n  >\n    <div>\n      custom renderer\n    </div>\n  </div>\n  <div\n    className=\"typography primary start singleLineEllipsis text text2Normal label\"\n    data-testid=\"text\"\n  >\n    \n  </div>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    aria-label=\"Remove\"\n    className=\"icon close button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding\"\n    data-testid=\"chip-close\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    style={\n      {\n        \"alignItems\": \"center\",\n        \"height\": \"16px\",\n        \"justifyContent\": \"center\",\n        \"padding\": 0,\n        \"width\": \"16px\",\n      }\n    }\n    type=\"button\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"16\"\n      viewBox=\"0 0 20 20\"\n      width=\"16\"\n    >\n      <path\n        d=\"M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z\"\n      />\n    </svg>\n  </button>\n</div>\n`;\n\nexports[`Chips renders correctly > renders correctly with left icon 1`] = `\n<div\n  aria-label=\"\"\n  className=\"chips noAnimation\"\n  data-testid=\"chip\"\n  data-vibe=\"Chips\"\n  onClick={[Function]}\n  onMouseEnter={[Function]}\n  onMouseLeave={[Function]}\n  style={\n    {\n      \"backgroundColor\": \"var(--primary-selected-color)\",\n    }\n  }\n>\n  <svg\n    aria-hidden={true}\n    className=\"icon icon left noFocusStyle\"\n    data-testid=\"icon\"\n    data-vibe=\"Icon\"\n    fill=\"currentColor\"\n    height=\"18\"\n    viewBox=\"0 0 20 20\"\n    width=\"18\"\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M6.83801 3C6.83801 2.58579 6.50223 2.25 6.08801 2.25C5.6738 2.25 5.33801 2.58579 5.33801 3V5.15381V7.30769C5.33801 7.72191 5.6738 8.05769 6.08801 8.05769C6.50223 8.05769 6.83801 7.72191 6.83801 7.30769V5.90381H11.4726C11.8868 5.90381 12.2226 5.56802 12.2226 5.15381C12.2226 4.73959 11.8868 4.40381 11.4726 4.40381H6.83801V3ZM2.64227 4.9389C2.98489 4.59629 3.44957 4.40381 3.9341 4.40381C4.34831 4.40381 4.6841 4.73959 4.6841 5.15381C4.6841 5.56802 4.34831 5.90381 3.9341 5.90381C3.8474 5.90381 3.76424 5.93825 3.70293 5.99956C3.64162 6.06087 3.60718 6.14403 3.60718 6.23073V8.71149H16.1072V6.23073C16.1072 6.14403 16.0727 6.06087 16.0114 5.99956C15.9501 5.93825 15.867 5.90381 15.7803 5.90381H14.3765V7.30769C14.3765 7.72191 14.0407 8.05769 13.6265 8.05769C13.2123 8.05769 12.8765 7.72191 12.8765 7.30769V5.16301L12.8764 5.15381L12.8765 5.1446V3C12.8765 2.58579 13.2123 2.25 13.6265 2.25C14.0407 2.25 14.3765 2.58579 14.3765 3V4.40381H15.7803C16.2648 4.40381 16.7295 4.59629 17.0721 4.9389C17.4147 5.28152 17.6072 5.7462 17.6072 6.23073V9.46149V15.923C17.6072 16.4076 17.4147 16.8723 17.0721 17.2149C16.7295 17.5575 16.2648 17.75 15.7803 17.75H3.9341C3.44957 17.75 2.98489 17.5575 2.64227 17.2149C2.29966 16.8723 2.10718 16.4076 2.10718 15.923V9.46149V6.23073C2.10718 5.7462 2.29966 5.28152 2.64227 4.9389ZM3.60718 15.923V10.2115H16.1072V15.923C16.1072 16.0097 16.0727 16.0929 16.0114 16.1542C15.9501 16.2155 15.867 16.25 15.7803 16.25H3.9341C3.8474 16.25 3.76424 16.2155 3.70293 16.1542C3.64162 16.0929 3.60718 16.0097 3.60718 15.923Z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n  <div\n    className=\"typography primary start singleLineEllipsis text text2Normal label\"\n    data-testid=\"text\"\n  >\n    \n  </div>\n</div>\n`;\n\nexports[`Chips renders correctly > renders correctly with right avatar 1`] = `\n<div\n  aria-label=\"\"\n  className=\"chips noAnimation\"\n  data-testid=\"chip\"\n  data-vibe=\"Chips\"\n  onClick={[Function]}\n  onMouseEnter={[Function]}\n  onMouseLeave={[Function]}\n  style={\n    {\n      \"backgroundColor\": \"var(--primary-selected-color)\",\n    }\n  }\n>\n  <div\n    className=\"typography primary start singleLineEllipsis text text2Normal label\"\n    data-testid=\"text\"\n  >\n    \n  </div>\n  <div\n    className=\"avatar large avatar right\"\n    data-testid=\"avatar\"\n    data-vibe=\"Avatar\"\n    style={\n      {\n        \"height\": 18,\n        \"width\": 18,\n      }\n    }\n  >\n    <div\n      aria-hidden={false}\n      className=\"circle circleImg withoutBorder\"\n      style={{}}\n      tabIndex={-1}\n    >\n      <img\n        className=\"contentImg contentImgLarge\"\n        data-testid=\"avatar-content\"\n        src=\"image-url.jpg\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Chips renders correctly > renders correctly with right custom renderer 1`] = `\n<div\n  aria-label=\"\"\n  className=\"chips noAnimation\"\n  data-testid=\"chip\"\n  data-vibe=\"Chips\"\n  onClick={[Function]}\n  onMouseEnter={[Function]}\n  onMouseLeave={[Function]}\n  style={\n    {\n      \"backgroundColor\": \"var(--primary-selected-color)\",\n    }\n  }\n>\n  <div\n    className=\"typography primary start singleLineEllipsis text text2Normal label\"\n    data-testid=\"text\"\n  >\n    \n  </div>\n  <div\n    className=\"customRenderer right\"\n  >\n    <div>\n      custom renderer\n    </div>\n  </div>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    aria-label=\"Remove\"\n    className=\"icon close button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding\"\n    data-testid=\"chip-close\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    style={\n      {\n        \"alignItems\": \"center\",\n        \"height\": \"16px\",\n        \"justifyContent\": \"center\",\n        \"padding\": 0,\n        \"width\": \"16px\",\n      }\n    }\n    type=\"button\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"16\"\n      viewBox=\"0 0 20 20\"\n      width=\"16\"\n    >\n      <path\n        d=\"M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z\"\n      />\n    </svg>\n  </button>\n</div>\n`;\n\nexports[`Chips renders correctly > renders correctly with right icon 1`] = `\n<div\n  aria-label=\"\"\n  className=\"chips noAnimation\"\n  data-testid=\"chip\"\n  data-vibe=\"Chips\"\n  onClick={[Function]}\n  onMouseEnter={[Function]}\n  onMouseLeave={[Function]}\n  style={\n    {\n      \"backgroundColor\": \"var(--primary-selected-color)\",\n    }\n  }\n>\n  <div\n    className=\"typography primary start singleLineEllipsis text text2Normal label\"\n    data-testid=\"text\"\n  >\n    \n  </div>\n  <svg\n    aria-hidden={true}\n    className=\"icon icon right noFocusStyle\"\n    data-testid=\"icon\"\n    data-vibe=\"Icon\"\n    fill=\"currentColor\"\n    height=\"18\"\n    viewBox=\"0 0 20 20\"\n    width=\"18\"\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M6.83801 3C6.83801 2.58579 6.50223 2.25 6.08801 2.25C5.6738 2.25 5.33801 2.58579 5.33801 3V5.15381V7.30769C5.33801 7.72191 5.6738 8.05769 6.08801 8.05769C6.50223 8.05769 6.83801 7.72191 6.83801 7.30769V5.90381H11.4726C11.8868 5.90381 12.2226 5.56802 12.2226 5.15381C12.2226 4.73959 11.8868 4.40381 11.4726 4.40381H6.83801V3ZM2.64227 4.9389C2.98489 4.59629 3.44957 4.40381 3.9341 4.40381C4.34831 4.40381 4.6841 4.73959 4.6841 5.15381C4.6841 5.56802 4.34831 5.90381 3.9341 5.90381C3.8474 5.90381 3.76424 5.93825 3.70293 5.99956C3.64162 6.06087 3.60718 6.14403 3.60718 6.23073V8.71149H16.1072V6.23073C16.1072 6.14403 16.0727 6.06087 16.0114 5.99956C15.9501 5.93825 15.867 5.90381 15.7803 5.90381H14.3765V7.30769C14.3765 7.72191 14.0407 8.05769 13.6265 8.05769C13.2123 8.05769 12.8765 7.72191 12.8765 7.30769V5.16301L12.8764 5.15381L12.8765 5.1446V3C12.8765 2.58579 13.2123 2.25 13.6265 2.25C14.0407 2.25 14.3765 2.58579 14.3765 3V4.40381H15.7803C16.2648 4.40381 16.7295 4.59629 17.0721 4.9389C17.4147 5.28152 17.6072 5.7462 17.6072 6.23073V9.46149V15.923C17.6072 16.4076 17.4147 16.8723 17.0721 17.2149C16.7295 17.5575 16.2648 17.75 15.7803 17.75H3.9341C3.44957 17.75 2.98489 17.5575 2.64227 17.2149C2.29966 16.8723 2.10718 16.4076 2.10718 15.923V9.46149V6.23073C2.10718 5.7462 2.29966 5.28152 2.64227 4.9389ZM3.60718 15.923V10.2115H16.1072V15.923C16.1072 16.0097 16.0727 16.0929 16.0114 16.1542C15.9501 16.2155 15.867 16.25 15.7803 16.25H3.9341C3.8474 16.25 3.76424 16.2155 3.70293 16.1542C3.64162 16.0929 3.60718 16.0097 3.60718 15.923Z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n</div>\n`;\n\nexports[`Chips renders correctly > renders correctly with text 1`] = `\n<div\n  aria-label=\"text\"\n  className=\"chips noAnimation\"\n  data-testid=\"chip\"\n  data-vibe=\"Chips\"\n  onClick={[Function]}\n  onMouseEnter={[Function]}\n  onMouseLeave={[Function]}\n  style={\n    {\n      \"backgroundColor\": \"var(--primary-selected-color)\",\n    }\n  }\n>\n  <div\n    className=\"typography primary start singleLineEllipsis text text2Normal label\"\n    data-testid=\"text\"\n  >\n    text\n  </div>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    aria-label=\"Remove\"\n    className=\"icon close button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding\"\n    data-testid=\"chip-close\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    style={\n      {\n        \"alignItems\": \"center\",\n        \"height\": \"16px\",\n        \"justifyContent\": \"center\",\n        \"padding\": 0,\n        \"width\": \"16px\",\n      }\n    }\n    type=\"button\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"16\"\n      viewBox=\"0 0 20 20\"\n      width=\"16\"\n    >\n      <path\n        d=\"M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z\"\n      />\n    </svg>\n  </button>\n</div>\n`;\n\nexports[`Chips renders correctly > renders correctly without close button 1`] = `\n<div\n  aria-label=\"\"\n  className=\"chips noAnimation\"\n  data-testid=\"chip\"\n  data-vibe=\"Chips\"\n  onClick={[Function]}\n  onMouseEnter={[Function]}\n  onMouseLeave={[Function]}\n  style={\n    {\n      \"backgroundColor\": \"var(--primary-selected-color)\",\n    }\n  }\n>\n  <div\n    className=\"typography primary start singleLineEllipsis text text2Normal label\"\n    data-testid=\"text\"\n  >\n    \n  </div>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Chips/index.ts",
    "content": "export { default as Chips, type ChipsProps } from \"./Chips\";\n"
  },
  {
    "path": "packages/core/src/components/ColorPicker/ColorPicker.module.scss",
    "content": ".colorPicker.colorPickerDialogContent {\n  z-index: 1;\n  padding: 12px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n"
  },
  {
    "path": "packages/core/src/components/ColorPicker/ColorPicker.tsx",
    "content": "import cx from \"classnames\";\nimport React, { forwardRef, useCallback, useRef } from \"react\";\nimport { type BaseSizes } from \"../../constants\";\nimport { useMergeRef, NOOP } from \"@vibe/shared\";\nimport { DialogContentContainer } from \"@vibe/dialog\";\nimport { NoColor } from \"@vibe/icons\";\nimport ColorPickerContent from \"./components/ColorPickerContent/ColorPickerContent\";\nimport { DEFAULT_NUMBER_OF_COLORS_IN_LINE } from \"./ColorPickerConstants\";\nimport {\n  type ColorShapes,\n  type ColorPickerSizes,\n  type ColorPickerValue,\n  type ColorPickerArrayValueOnly\n} from \"./ColorPicker.types\";\nimport { calculateColorPickerDialogWidth } from \"./services/ColorPickerStyleService\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\n\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./ColorPicker.module.scss\";\nimport { type ColorStyle } from \"../../types/Colors\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface ColorPickerProps extends VibeComponentProps {\n  /**\n   * The selected color(s).\n   */\n  value?: ColorPickerValue;\n  /**\n   * Callback fired when the selected color(s) change.\n   */\n  onSave?: (value: ColorPickerArrayValueOnly) => void;\n  /**\n   * Icon displayed as an indicator inside the color.\n   */\n  ColorIndicatorIcon?: SubIcon;\n  /**\n   * Icon displayed when a color is selected.\n   */\n  SelectedIndicatorIcon?: SubIcon;\n  /**\n   * Icon used for clearing the color selection.\n   */\n  NoColorIcon?: SubIcon;\n  /**\n   * The style applied to the colors.\n   */\n  colorStyle?: ColorStyle;\n  /**\n   * Text displayed for the \"no color\" option.\n   */\n  noColorText?: string;\n  /**\n   * If true, renders the color indicator without a background.\n   */\n  shouldRenderIndicatorWithoutBackground?: boolean;\n  /**\n   * If true, treats the color list as a blacklist rather than a whitelist.\n   */\n  isBlackListMode?: boolean;\n  /**\n   * The list of colors available for selection.\n   */\n  colorsList?: ColorPickerArrayValueOnly;\n  /**\n   * If true, allows selecting multiple colors.\n   */\n  isMultiselect?: boolean;\n  /**\n   * The size of the color items.\n   */\n  colorSize?: ColorPickerSizes;\n  /**\n   * The number of colors displayed per row.\n   */\n  numberOfColorsInLine?: number;\n  /**\n   * If true, the first color is focused when the component mounts.\n   */\n  focusOnMount?: boolean;\n  /**\n   * The shape of the color items.\n   */\n  colorShape?: ColorShapes;\n  /**\n   * Used to force the component render the colorList prop as is. Usually, this flag should not be used. It's intended only for edge cases.\n   * Usually, only \"monday colors\" will be rendered (unless blacklist mode is used). This flag will override this behavior.\n   */\n  forceUseRawColorList?: boolean;\n  /**\n   * Used to enable color name tooltip on each color in the component.\n   * When \"tooltipContentByColor\" is supplied, it will override the color name tooltip.\n   *\n   */\n  showColorNameTooltip?: boolean;\n}\n\nconst ColorPicker = forwardRef(\n  (\n    {\n      className,\n      onSave = NOOP,\n      value = \"\",\n      noColorText,\n      colorStyle = \"regular\",\n      ColorIndicatorIcon,\n      SelectedIndicatorIcon,\n      shouldRenderIndicatorWithoutBackground,\n      NoColorIcon = NoColor,\n      isBlackListMode = true,\n      colorsList = [],\n      isMultiselect,\n      colorSize = \"medium\",\n      numberOfColorsInLine = DEFAULT_NUMBER_OF_COLORS_IN_LINE,\n      focusOnMount,\n      colorShape = \"square\",\n      forceUseRawColorList,\n      showColorNameTooltip,\n      id,\n      \"data-testid\": dataTestId\n    }: ColorPickerProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const onChange = useCallback(onSave, [onSave]);\n\n    const width = calculateColorPickerDialogWidth(colorSize as BaseSizes, numberOfColorsInLine);\n\n    return (\n      <DialogContentContainer\n        ref={mergedRef}\n        className={cx(styles.colorPicker, styles.colorPickerDialogContent, className)}\n        aria-labelledby=\"Color Picker Dialog\"\n        aria-describedby=\"Pick color\"\n        style={{ width }}\n        data-vibe={ComponentVibeId.COLOR_PICKER}\n      >\n        <ColorPickerContent\n          onValueChange={onChange}\n          value={value}\n          noColorText={noColorText}\n          shouldRenderIndicatorWithoutBackground={ColorIndicatorIcon && shouldRenderIndicatorWithoutBackground}\n          colorStyle={colorStyle}\n          ColorIndicatorIcon={ColorIndicatorIcon}\n          SelectedIndicatorIcon={SelectedIndicatorIcon}\n          NoColorIcon={NoColorIcon}\n          colorsList={colorsList}\n          isBlackListMode={isBlackListMode}\n          isMultiselect={isMultiselect}\n          colorSize={colorSize}\n          numberOfColorsInLine={numberOfColorsInLine}\n          focusOnMount={focusOnMount}\n          colorShape={colorShape}\n          forceUseRawColorList={forceUseRawColorList}\n          showColorNameTooltip={showColorNameTooltip}\n          id={id}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.COLOR_PICKER, id)}\n        />\n      </DialogContentContainer>\n    );\n  }\n);\n\nexport default ColorPicker;\n"
  },
  {
    "path": "packages/core/src/components/ColorPicker/ColorPicker.types.ts",
    "content": "import { type CONTENT_COLORS_VALUES } from \"../../utils/colors-vars-map\";\n\nexport type ColorShapes = \"square\" | \"circle\";\n\nexport type ColorPickerSizes = \"small\" | \"medium\" | \"large\";\n\nexport type ColorPickerValueOnly = CONTENT_COLORS_VALUES | string;\nexport type ColorPickerArrayValueOnly = CONTENT_COLORS_VALUES[] | string[];\nexport type ColorPickerValue = ColorPickerValueOnly | ColorPickerArrayValueOnly;\n"
  },
  {
    "path": "packages/core/src/components/ColorPicker/ColorPickerConstants.ts",
    "content": "import { type BaseSizes, SIZES } from \"../../constants/sizes\";\n\nexport const DEFAULT_NUMBER_OF_COLORS_IN_LINE = 5;\n\nexport const COLOR_SIZES: Record<BaseSizes, number> = {\n  [SIZES.SMALL]: 24,\n  [SIZES.MEDIUM]: 32,\n  [SIZES.LARGE]: 40\n};\n\nexport const COLOR_PADDING = 8;\nexport const DIALOG_WIDTH_PADDING = 24;\n"
  },
  {
    "path": "packages/core/src/components/ColorPicker/__tests__/ColorPicker.test.tsx",
    "content": "import { vi, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport { render, fireEvent, act, screen } from \"@testing-library/react\";\nimport { difference as _difference } from \"es-toolkit\";\nimport ColorPicker from \"../ColorPicker\";\nimport { contentColors } from \"../../../utils/colors-vars-map\";\nimport ColorPickerColorsGrid from \"../components/ColorPickerContent/ColorPickerColorsGrid\";\n\nconst formatColorName = (color: string) => color.replace(/-|_/g, \" \").replace(/(?:^|\\s)\\S/g, a => a.toUpperCase());\n\nit(\"renders correctly with empty props\", () => {\n  const tree = renderer.create(<ColorPicker />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n\nvi.useFakeTimers();\n\ndescribe(\"ColorPicker\", () => {\n  it(\"Should call onSave with color clicked value\", () => {\n    const colorToClick = contentColors[0];\n    let clickedColorValue;\n    const onSaveMock = vi.fn();\n\n    const { getByLabelText } = render(\n      <ColorPicker\n        onSave={color => {\n          onSaveMock();\n          clickedColorValue = color;\n        }}\n      />\n    );\n\n    const colorElementToClick = getByLabelText(formatColorName(colorToClick));\n\n    act(() => {\n      fireEvent.click(colorElementToClick);\n    });\n\n    expect(onSaveMock.mock.calls.length).toBe(1);\n    expect(clickedColorValue).toStrictEqual([colorToClick]);\n  });\n\n  it(\"Should call onSave with multiselect colors clicked values\", () => {\n    const colorToClick = contentColors[0];\n    let clickedColorValue;\n    const onSaveMock = vi.fn();\n\n    const { getByLabelText } = render(\n      <ColorPicker\n        isMultiselect\n        onSave={colors => {\n          onSaveMock();\n          clickedColorValue = colors;\n        }}\n      />\n    );\n\n    const colorElementToClick = getByLabelText(formatColorName(colorToClick));\n\n    act(() => {\n      fireEvent.click(colorElementToClick);\n    });\n\n    expect(onSaveMock.mock.calls.length).toBe(1);\n    expect(clickedColorValue).toStrictEqual([colorToClick]);\n  });\n\n  it(\"should render only colors not in black list\", () => {\n    const blackListColors = contentColors.slice(0, 3);\n    const restOfColors = _difference(contentColors, blackListColors);\n\n    const { getByLabelText, queryByLabelText } = render(<ColorPicker isBlackListMode colorsList={blackListColors} />);\n\n    blackListColors.forEach(color => expect(queryByLabelText(formatColorName(color))).toBeNull());\n    const restOfColorsElements = restOfColors.map(color => getByLabelText(formatColorName(color)));\n\n    expect(restOfColorsElements.length).toBe(restOfColors.length);\n  });\n\n  it(\"should render only colors in white list\", () => {\n    const whiteListColors = contentColors.slice(0, 3);\n    const restOfColors = _difference(contentColors, whiteListColors);\n    const { getByLabelText, queryByLabelText } = render(\n      <ColorPicker isBlackListMode={false} colorsList={whiteListColors} />\n    );\n\n    const whiteListColorsElements = whiteListColors.map(color => getByLabelText(formatColorName(color)));\n    restOfColors.forEach(color => expect(queryByLabelText(formatColorName(color))).toBeNull());\n\n    expect(whiteListColorsElements.length).toBe(whiteListColors.length);\n  });\n\n  it(\"should render all colors if forceUseRawColorList is true and isBlackListMode is false\", () => {\n    const colorList = [\"#abcdef\", \"#123456\", \"#234567\"];\n    const { getByLabelText } = render(<ColorPicker colorsList={colorList} forceUseRawColorList={true} />);\n\n    const colorsElements = colorList.map(color => getByLabelText(color));\n\n    expect(colorsElements.length).toBe(colorsElements.length);\n  });\n\n  it(\"should render all colors if forceUseRawColorList is true, even if isBlackListMode is true\", () => {\n    const colorList = [\"#abcdef\", \"#123456\", \"#234567\"];\n    const { getByLabelText } = render(\n      <ColorPicker colorsList={colorList} forceUseRawColorList={true} isBlackListMode={true} />\n    );\n\n    const colorsElements = colorList.map(color => getByLabelText(color));\n\n    expect(colorsElements.length).toBe(colorsElements.length);\n  });\n\n  it(\"should render tooltip with color name if showColorNameTooltip is true\", () => {\n    const colorPicker = render(<ColorPicker showColorNameTooltip />);\n    const colorNameTooltip = \"Done Green\";\n\n    const component = colorPicker.getByLabelText(colorNameTooltip);\n    act(() => {\n      fireEvent.mouseOver(component);\n    });\n    vi.advanceTimersByTime(1000);\n    const content = screen.getByText(colorNameTooltip);\n    expect(content).toBeTruthy();\n  });\n\n  it(\"should render tooltip with the color name if showColorNameTooltip is true and forceUseRawColorList is true\", () => {\n    const colorName = \"done-green\";\n    const colorNameTooltip = \"Done Green\";\n    const colorList = [colorName];\n    const colorPicker = render(<ColorPicker colorsList={colorList} showColorNameTooltip forceUseRawColorList />);\n\n    const component = colorPicker.getByLabelText(colorNameTooltip);\n    act(() => {\n      fireEvent.mouseOver(component);\n    });\n    vi.advanceTimersByTime(1000);\n    const content = screen.queryByText(colorNameTooltip);\n    expect(content).toBeTruthy();\n  });\n\n  it(\"should render tooltip with tooltipContentByColor value if tooltipContentByColor of the color exist\", () => {\n    const colorName = \"done-green\";\n    const colorNameTooltip = \"Done Green\";\n    const contentByColorTooltip = \"Custom tooltip\";\n    const tooltipContentByColor = { \"done-green\": contentByColorTooltip };\n    const colorsToRender = [colorName];\n\n    const colorPicker = render(\n      <ColorPickerColorsGrid\n        colorsToRender={colorsToRender}\n        tooltipContentByColor={tooltipContentByColor}\n        showColorNameTooltip\n      />\n    );\n\n    // When tooltipContentByColor has a custom label, aria-label uses that custom value\n    const component = colorPicker.getByLabelText(contentByColorTooltip);\n    act(() => {\n      fireEvent.mouseOver(component);\n    });\n    vi.advanceTimersByTime(1000);\n    const contentByName = screen.queryByText(colorNameTooltip);\n    const expected = screen.getByText(contentByColorTooltip);\n\n    expect(contentByName).toBeNull();\n    expect(expected).toBeTruthy();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/ColorPicker/__tests__/__snapshots__/ColorPicker.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`renders correctly with empty props 1`] = `\n<div\n  aria-describedby=\"Pick color\"\n  aria-labelledby=\"Color Picker Dialog\"\n  className=\"dialogContentContainer colorPicker colorPickerDialogContent typePopover sizeSmall\"\n  data-testid=\"dialog-content-container\"\n  data-vibe=\"ColorPicker\"\n  role=\"dialog\"\n  style={\n    {\n      \"width\": 224,\n    }\n  }\n>\n  <div\n    style={\n      {\n        \"width\": 200,\n      }\n    }\n    tabIndex={-1}\n  >\n    <ul\n      className=\"colorsGrid\"\n      data-testid=\"color-picker\"\n      role=\"listbox\"\n      tabIndex={0}\n    >\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_grass_green\"\n        id=\"color-picker-grid-0-item-0\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Grass Green\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-grass_green)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_done-green\"\n        id=\"color-picker-grid-0-item-1\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Done Green\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-done-green)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_bright-green\"\n        id=\"color-picker-grid-0-item-2\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Bright Green\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-bright-green)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_saladish\"\n        id=\"color-picker-grid-0-item-3\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Saladish\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-saladish)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_egg_yolk\"\n        id=\"color-picker-grid-0-item-4\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Egg Yolk\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-egg_yolk)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_working_orange\"\n        id=\"color-picker-grid-0-item-5\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Working Orange\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-working_orange)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_dark-orange\"\n        id=\"color-picker-grid-0-item-6\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Dark Orange\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-dark-orange)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_peach\"\n        id=\"color-picker-grid-0-item-7\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Peach\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-peach)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_sunset\"\n        id=\"color-picker-grid-0-item-8\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Sunset\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-sunset)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_stuck-red\"\n        id=\"color-picker-grid-0-item-9\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Stuck Red\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-stuck-red)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_dark-red\"\n        id=\"color-picker-grid-0-item-10\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Dark Red\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-dark-red)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_sofia_pink\"\n        id=\"color-picker-grid-0-item-11\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Sofia Pink\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-sofia_pink)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_lipstick\"\n        id=\"color-picker-grid-0-item-12\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Lipstick\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-lipstick)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_bubble\"\n        id=\"color-picker-grid-0-item-13\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Bubble\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-bubble)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_purple\"\n        id=\"color-picker-grid-0-item-14\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Purple\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-purple)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_dark_purple\"\n        id=\"color-picker-grid-0-item-15\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Dark Purple\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-dark_purple)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_berry\"\n        id=\"color-picker-grid-0-item-16\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Berry\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-berry)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_dark_indigo\"\n        id=\"color-picker-grid-0-item-17\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Dark Indigo\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-dark_indigo)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_indigo\"\n        id=\"color-picker-grid-0-item-18\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Indigo\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-indigo)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_navy\"\n        id=\"color-picker-grid-0-item-19\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Navy\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-navy)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_bright-blue\"\n        id=\"color-picker-grid-0-item-20\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Bright Blue\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-bright-blue)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_dark-blue\"\n        id=\"color-picker-grid-0-item-21\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Dark Blue\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-dark-blue)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_aquamarine\"\n        id=\"color-picker-grid-0-item-22\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Aquamarine\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-aquamarine)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_chili-blue\"\n        id=\"color-picker-grid-0-item-23\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Chili Blue\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-chili-blue)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_river\"\n        id=\"color-picker-grid-0-item-24\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"River\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-river)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_winter\"\n        id=\"color-picker-grid-0-item-25\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Winter\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-winter)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_explosive\"\n        id=\"color-picker-grid-0-item-26\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Explosive\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-explosive)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_american_gray\"\n        id=\"color-picker-grid-0-item-27\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"American Gray\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-american_gray)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_blackish\"\n        id=\"color-picker-grid-0-item-28\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Blackish\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-blackish)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_brown\"\n        id=\"color-picker-grid-0-item-29\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Brown\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-brown)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_orchid\"\n        id=\"color-picker-grid-0-item-30\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Orchid\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-orchid)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_tan\"\n        id=\"color-picker-grid-0-item-31\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Tan\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-tan)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_sky\"\n        id=\"color-picker-grid-0-item-32\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Sky\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-sky)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_coffee\"\n        id=\"color-picker-grid-0-item-33\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Coffee\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-coffee)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_royal\"\n        id=\"color-picker-grid-0-item-34\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Royal\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-royal)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_teal\"\n        id=\"color-picker-grid-0-item-35\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Teal\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-teal)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_lavender\"\n        id=\"color-picker-grid-0-item-36\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Lavender\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-lavender)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_steel\"\n        id=\"color-picker-grid-0-item-37\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Steel\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-steel)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_lilac\"\n        id=\"color-picker-grid-0-item-38\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Lilac\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-lilac)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n      <li\n        aria-selected={false}\n        className=\"itemWrapper\"\n        data-testid=\"color-picker-item_pecan\"\n        id=\"color-picker-grid-0-item-39\"\n        role=\"option\"\n      >\n        <div\n          className=\"feedbackIndicator\"\n        />\n        <div\n          aria-label=\"Pecan\"\n          className=\"clickable colorItem colorItemSizeMedium disableTextSelection\"\n          data-testid=\"clickable\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          role=\"presentation\"\n          style={\n            {\n              \"background\": \"var(--color-pecan)\",\n            }\n          }\n          tabIndex={-1}\n        >\n          <div\n            className=\"colorIndicatorWrapper\"\n            style={{}}\n          />\n        </div>\n      </li>\n    </ul>\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.module.scss",
    "content": ".clearColorIcon {\n  margin-inline-end: var(--space-8);\n}\n\n.clearColorButton {\n  margin-top: var(--space-8);\n}\n"
  },
  {
    "path": "packages/core/src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.tsx",
    "content": "import React, { forwardRef } from \"react\";\nimport useGridKeyboardNavigation from \"../../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation\";\nimport { Button } from \"@vibe/button\";\nimport { type VibeComponentProps } from \"../../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport { NOOP } from \"@vibe/shared\";\nimport styles from \"./ColorPickerClearButton.module.scss\";\n\nexport interface ColorPickerClearButtonProps extends VibeComponentProps {\n  /**\n   * Callback fired when the clear button is clicked.\n   */\n  onClick: () => void;\n  /**\n   * The text displayed inside the button.\n   */\n  text?: string;\n  /**\n   * The icon displayed inside the button.\n   */\n  Icon: SubIcon;\n}\n\nconst ColorPickerClearButton = forwardRef(\n  ({ onClick, text, Icon }: ColorPickerClearButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) => {\n    const { onSelectionAction } = useGridKeyboardNavigation({\n      ref: ref as React.MutableRefObject<HTMLElement>,\n      itemsCount: 1,\n      numberOfItemsInLine: 1,\n      onItemClicked: onClick,\n      getItemByIndex: NOOP //hack - we don't really have a grid, it's just for keyboard navigation outside the clear button\n    });\n\n    return (\n      <Button\n        ref={ref}\n        size=\"small\"\n        kind=\"tertiary\"\n        onClick={() => onSelectionAction(-1)} //hack - we don't really have a grid, it's just for keyboard navigation outside the clear button\n        blurOnMouseUp={false}\n        className={styles.clearColorButton}\n      >\n        <Icon size=\"16\" className={styles.clearColorIcon} />\n        {text || \"Clear\"}\n      </Button>\n    );\n  }\n);\n\nexport default ColorPickerClearButton;\n"
  },
  {
    "path": "packages/core/src/components/ColorPicker/components/ColorPickerContent/ColorPickerColorsGrid.module.scss",
    "content": ".colorsGrid {\n  padding: 0;\n  outline: none;\n  display: flex;\n  flex-wrap: wrap;\n}\n"
  },
  {
    "path": "packages/core/src/components/ColorPicker/components/ColorPickerContent/ColorPickerColorsGrid.tsx",
    "content": "import React, { forwardRef, useCallback, useState } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"@vibe/shared\";\nimport useGridKeyboardNavigation from \"../../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation\";\nimport ColorPickerItemComponent from \"../ColorPickerItemComponent/ColorPickerItemComponent\";\nimport { type CONTENT_COLORS_VALUES } from \"../../../../utils/colors-vars-map\";\nimport { type ColorPickerArrayValueOnly, type ColorPickerValueOnly } from \"../../ColorPicker.types\";\nimport { type ColorShapes, type ColorPickerSizes } from \"../../ColorPicker.types\";\nimport { type VibeComponentProps } from \"../../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport styles from \"./ColorPickerColorsGrid.module.scss\";\nimport { type ColorStyle } from \"../../../../types\";\n\nlet colorPickerGridIdCounter = 0;\nconst generateColorPickerGridId = () => `color-picker-grid-${colorPickerGridIdCounter++}`;\n\nconst useColorPickerGridId = (id: string) => {\n  const [gridId, setGridId] = useState<string>();\n  useIsomorphicLayoutEffect(() => {\n    setGridId(id || generateColorPickerGridId());\n  }, [id]);\n  return gridId;\n};\n\nconst formatColorNameForTooltip = (color: ColorPickerValueOnly) => {\n  return color.replace(/-|_/g, \" \").replace(/(?:^|\\s)\\S/g, function (a) {\n    return a.toUpperCase();\n  });\n};\n\nconst calculateColorTooltip = (\n  color: ColorPickerValueOnly,\n  tooltipContentByColor?: Partial<Record<CONTENT_COLORS_VALUES, string> & Record<string, string>>\n) => {\n  if (tooltipContentByColor && tooltipContentByColor[color]) {\n    return tooltipContentByColor[color];\n  } else {\n    return formatColorNameForTooltip(color);\n  }\n};\n\nexport interface ColorPickerColorsGridProps extends VibeComponentProps {\n  /**\n   * Callback fired when a color is clicked.\n   */\n  onColorClicked?: (color: ColorPickerValueOnly) => void;\n  /**\n   * The list of colors to be displayed.\n   */\n  colorsToRender?: ColorPickerArrayValueOnly;\n  /**\n   * Icon displayed as an indicator inside the color.\n   */\n  ColorIndicatorIcon?: SubIcon;\n  /**\n   * Icon displayed when a color is selected.\n   */\n  SelectedIndicatorIcon?: SubIcon;\n  /**\n   * The style applied to the colors.\n   */\n  colorStyle?: ColorStyle;\n  /**\n   * The currently selected color or colors.\n   */\n  value?: string | string[];\n  /**\n   * If true, renders the color indicator without a background.\n   */\n  shouldRenderIndicatorWithoutBackground?: boolean;\n  /**\n   * The size of the color items.\n   */\n  colorSize?: ColorPickerSizes;\n  /**\n   * The number of colors per row.\n   */\n  numberOfColorsInLine?: number;\n  /**\n   * Custom tooltip content for specific colors.\n   */\n  tooltipContentByColor?: Partial<Record<CONTENT_COLORS_VALUES, string> & Record<string, string>>;\n  /**\n   * If true, the first color is focused when the component mounts.\n   */\n  focusOnMount?: boolean;\n  /**\n   * The shape of the color items.\n   */\n  colorShape?: ColorShapes;\n  /**\n   * If true, displays a tooltip with the color name.\n   */\n  showColorNameTooltip?: boolean;\n}\n\nconst ColorPickerColorsGrid = forwardRef(\n  (\n    {\n      onColorClicked,\n      colorsToRender,\n      numberOfColorsInLine,\n      focusOnMount,\n      value,\n      colorStyle,\n      ColorIndicatorIcon,\n      shouldRenderIndicatorWithoutBackground,\n      SelectedIndicatorIcon,\n      colorSize,\n      tooltipContentByColor,\n      colorShape,\n      showColorNameTooltip: showColorNameTooltip,\n      id,\n      \"data-testid\": dataTestId\n    }: ColorPickerColorsGridProps,\n    ref: React.ForwardedRef<HTMLUListElement>\n  ) => {\n    const getItemByIndex = useCallback((index: number) => colorsToRender[index], [colorsToRender]);\n\n    const { activeIndex, onSelectionAction } = useGridKeyboardNavigation({\n      focusOnMount,\n      ref: ref as React.MutableRefObject<HTMLUListElement>,\n      onItemClicked: onColorClicked,\n      itemsCount: colorsToRender.length,\n      numberOfItemsInLine: numberOfColorsInLine,\n      entryFocusStrategy: \"first\",\n      getItemByIndex\n    });\n\n    const gridId = useColorPickerGridId(id);\n    const getColorItemId = (index: number) => (gridId ? `${gridId}-item-${index}` : undefined);\n    const activeDescendantId = activeIndex >= 0 ? getColorItemId(activeIndex) : undefined;\n\n    return (\n      <ul\n        className={styles.colorsGrid}\n        ref={ref}\n        tabIndex={0}\n        id={id}\n        data-testid={dataTestId}\n        role=\"listbox\"\n        aria-activedescendant={activeDescendantId}\n      >\n        {colorsToRender.map((color, index) => {\n          return (\n            <ColorPickerItemComponent\n              key={color}\n              id={getColorItemId(index)}\n              color={color}\n              colorAriaLabel={calculateColorTooltip(color, tooltipContentByColor)}\n              onColorClicked={() => onSelectionAction(index)}\n              shouldRenderIndicatorWithoutBackground={ColorIndicatorIcon && shouldRenderIndicatorWithoutBackground}\n              colorStyle={colorStyle}\n              ColorIndicatorIcon={ColorIndicatorIcon}\n              SelectedIndicatorIcon={SelectedIndicatorIcon}\n              isSelected={Array.isArray(value) ? value.includes(color) : value === color}\n              isActive={index === activeIndex}\n              colorSize={colorSize}\n              tooltipContent={showColorNameTooltip ? calculateColorTooltip(color, tooltipContentByColor) : undefined}\n              colorShape={colorShape}\n            />\n          );\n        })}\n      </ul>\n    );\n  }\n);\n\nexport default ColorPickerColorsGrid;\n"
  },
  {
    "path": "packages/core/src/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.tsx",
    "content": "import { difference as _difference, intersection as _intersection } from \"es-toolkit\";\nimport React, { forwardRef, useCallback, useMemo, useRef } from \"react\";\nimport { BaseSizes } from \"../../../../constants\";\nimport { type CONTENT_COLORS_VALUES, contentColors } from \"../../../../utils/colors-vars-map\";\nimport { NoColor } from \"@vibe/icons\";\nimport { DEFAULT_NUMBER_OF_COLORS_IN_LINE } from \"../../ColorPickerConstants\";\nimport {\n  type ColorShapes,\n  type ColorPickerSizes,\n  type ColorPickerValue,\n  type ColorPickerArrayValueOnly\n} from \"../../ColorPicker.types\";\nimport { calculateColorPickerWidth } from \"../../services/ColorPickerStyleService\";\nimport {\n  GridKeyboardNavigationContext,\n  useGridKeyboardNavigationContext\n} from \"../../../GridKeyboardNavigationContext\";\nimport ColorPickerClearButton from \"./ColorPickerClearButton\";\nimport ColorPickerColorsGrid from \"./ColorPickerColorsGrid\";\nimport { type VibeComponentProps } from \"../../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport { type ColorStyle } from \"../../../../types\";\n\nexport interface ColorPickerContentProps extends VibeComponentProps {\n  /**\n   * The selected color(s).\n   */\n  value: ColorPickerValue;\n  /**\n   * Callback fired when the selected color(s) change.\n   */\n  onValueChange: (value: ColorPickerArrayValueOnly) => void;\n  /**\n   * The list of colors available for selection.\n   */\n  colorsList: ColorPickerArrayValueOnly;\n  /**\n   * Icon displayed as an indicator inside the color.\n   */\n  ColorIndicatorIcon?: SubIcon;\n  /**\n   * Icon displayed when a color is selected.\n   */\n  SelectedIndicatorIcon?: SubIcon;\n  /**\n   * Icon used for clearing the color selection.\n   */\n  NoColorIcon?: SubIcon;\n  /**\n   * The style applied to the colors.\n   */\n  colorStyle?: ColorStyle;\n  /**\n   * The size of the color items.\n   */\n  colorSize?: ColorPickerSizes;\n  /**\n   * The shape of the color items.\n   */\n  colorShape?: ColorShapes;\n  /**\n   * Custom tooltip content for specific colors.\n   */\n  tooltipContentByColor?: Partial<Record<CONTENT_COLORS_VALUES, string>>;\n  /**\n   * Text displayed for the \"no color\" option.\n   */\n  noColorText?: string;\n  /**\n   * If true, renders the color indicator without a background.\n   */\n  shouldRenderIndicatorWithoutBackground?: boolean;\n  /**\n   * If true, treats the color list as a blacklist rather than a whitelist.\n   */\n  isBlackListMode?: boolean;\n  /**\n   * The number of colors displayed per row.\n   */\n  numberOfColorsInLine?: number;\n  /**\n   * If true, the first color is focused when the component mounts.\n   */\n  focusOnMount?: boolean;\n  /**\n   * If true, allows selecting multiple colors.\n   */\n  isMultiselect?: boolean;\n  /**\n   * Used to force the component render the colorList prop as is. Usually, this flag should not be used. It's intended only for edge cases.\n   * Usually, only \"monday colors\" will be rendered (unless blacklist mode is used). This flag will override this behavior.\n   */\n  forceUseRawColorList?: boolean;\n  /**\n   * Used to enable color name tooltip on each color in the component.\n   * When \"tooltipContentByColor\" is supplied, it will override the color name tooltip.\n   */\n  showColorNameTooltip?: boolean;\n}\n\nconst ColorPickerContent = forwardRef(\n  (\n    {\n      className,\n      onValueChange,\n      value,\n      noColorText,\n      colorStyle = \"regular\",\n      ColorIndicatorIcon,\n      SelectedIndicatorIcon,\n      shouldRenderIndicatorWithoutBackground,\n      NoColorIcon = NoColor,\n      isBlackListMode = true,\n      colorsList,\n      isMultiselect,\n      colorSize = BaseSizes.MEDIUM,\n      numberOfColorsInLine = DEFAULT_NUMBER_OF_COLORS_IN_LINE,\n      tooltipContentByColor = {},\n      focusOnMount,\n      colorShape = \"square\",\n      forceUseRawColorList,\n      showColorNameTooltip,\n      id,\n      \"data-testid\": dataTestId\n    }: ColorPickerContentProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const gridRef = useRef(null);\n    const mergedRef = useMergeRef(ref, gridRef);\n    const colorsRef = useRef(null);\n    const buttonRef = useRef(null);\n\n    const onClearButton = useCallback(() => {\n      onValueChange(null);\n    }, [onValueChange]);\n\n    const colorsToRender = useMemo(() => {\n      if (forceUseRawColorList) {\n        return colorsList;\n      }\n      return isBlackListMode ? _difference(contentColors, colorsList) : _intersection(contentColors, colorsList);\n    }, [forceUseRawColorList, isBlackListMode, colorsList]);\n\n    const onColorClicked = useCallback(\n      (color: CONTENT_COLORS_VALUES) => {\n        if (!isMultiselect) {\n          onValueChange([color]);\n          return;\n        }\n        const colors = [...value];\n        if (colors.includes(color)) {\n          const indexInSelected = colors.indexOf(color);\n          if (indexInSelected > -1) {\n            colors.splice(indexInSelected, 1);\n          }\n        } else {\n          colors.push(color);\n        }\n        onValueChange(colors);\n      },\n      [isMultiselect, onValueChange, value]\n    );\n\n    const positions = useMemo(() => [{ topElement: colorsRef, bottomElement: buttonRef }], []);\n    const keyboardContext = useGridKeyboardNavigationContext(positions, gridRef);\n    const width = calculateColorPickerWidth(colorSize as BaseSizes, numberOfColorsInLine);\n\n    return (\n      <div className={className} style={{ width }} ref={mergedRef} tabIndex={-1}>\n        <GridKeyboardNavigationContext.Provider value={keyboardContext}>\n          <ColorPickerColorsGrid\n            ref={colorsRef}\n            onColorClicked={onColorClicked}\n            colorsToRender={colorsToRender}\n            numberOfColorsInLine={numberOfColorsInLine}\n            focusOnMount={focusOnMount}\n            value={value}\n            colorStyle={colorStyle}\n            ColorIndicatorIcon={ColorIndicatorIcon}\n            shouldRenderIndicatorWithoutBackground={shouldRenderIndicatorWithoutBackground}\n            SelectedIndicatorIcon={SelectedIndicatorIcon}\n            colorSize={colorSize}\n            tooltipContentByColor={tooltipContentByColor}\n            colorShape={colorShape}\n            showColorNameTooltip={showColorNameTooltip}\n            id={id}\n            data-testid={dataTestId}\n          />\n          {noColorText && (\n            <ColorPickerClearButton Icon={NoColorIcon} onClick={onClearButton} text={noColorText} ref={buttonRef} />\n          )}\n        </GridKeyboardNavigationContext.Provider>\n      </div>\n    );\n  }\n);\n\nexport default ColorPickerContent;\n"
  },
  {
    "path": "packages/core/src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.module.scss",
    "content": ".itemWrapper.circle {\n  --border-radius-multiplier: 99999;\n}\n\n/* stylelint-disable scss/operator-no-unspaced */\n\n@mixin absolute-border($border-width, $border-color-var-name, $inset: -$border-width, $border-radius: 7px) {\n  content: \" \";\n  position: absolute;\n  border-radius: calc($border-radius * var(--border-radius-multiplier, 1));\n  inset: $inset;\n  border: $border-width solid;\n  border-color: var(--#{$border-color-var-name});\n  pointer-events: none;\n}\n\n.itemWrapper {\n  --border-radius-multiplier: 1;\n  margin: 4px;\n  display: flex;\n  list-style-type: none;\n  position: relative;\n}\n\n.itemWrapper .feedbackIndicator {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.itemWrapper:focus,\n.itemWrapper:focus-visible,\n.itemWrapper.active {\n  outline: none;\n}\n\n.itemWrapper:focus .feedbackIndicator:before,\n.itemWrapper:focus-visible .feedbackIndicator:before,\n.itemWrapper.active .feedbackIndicator:before {\n  @include absolute-border(4px, primary-selected-color);\n}\n\n.itemWrapper:focus .feedbackIndicator:after,\n.itemWrapper:focus-visible .feedbackIndicator:after,\n.itemWrapper.active .feedbackIndicator:after {\n  @include absolute-border(1px, primary-color);\n}\n\n/* active elements have no \"hover feedback\" */\n\n.itemWrapper:hover:not(.active):not(.selectedColor) .feedbackIndicator {\n  @include absolute-border(4px, primary-background-hover-color, -4px, 8px);\n}\n\n.itemWrapper .colorItem {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: 2px solid transparent;\n  border-radius: calc(4px * var(--border-radius-multiplier, 1));\n  cursor: pointer;\n}\n\n.itemWrapper .colorItem .colorIndicatorWrapper {\n  display: flex;\n}\n\n.itemWrapper .colorItem.colorItemSizeSmall {\n  width: 24px;\n  height: 24px;\n}\n\n.itemWrapper .colorItem.colorItemSizeMedium {\n  width: 32px;\n  height: 32px;\n}\n\n.itemWrapper .colorItem.colorItemSizeLarge {\n  width: 40px;\n  height: 40px;\n}\n\n.itemWrapper.selectedColor {\n  position: relative;\n}\n\n.itemWrapper.selectedColor:before {\n  @include absolute-border(2px, primary-color, -4px);\n}\n\n.itemWrapper.selectedColor .feedbackIndicator:before {\n  /* hide the outer border from the \"active\" feedback indicator */\n  display: none;\n}\n\n.itemWrapper .colorItemTextMode:hover {\n  background-color: var(--primary-background-hover-color) !important;\n}\n\n.itemWrapper .colorIconWhite {\n  color: var(--color-snow_white);\n}\n"
  },
  {
    "path": "packages/core/src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.tsx",
    "content": "import { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"@vibe/shared\";\nimport cx from \"classnames\";\nimport React, { useRef, useCallback, useMemo, forwardRef, useEffect } from \"react\";\nimport { contentColors } from \"../../../../utils/colors-vars-map\";\nimport ColorUtils from \"../../../../utils/colors-utils\";\nimport { Icon } from \"@vibe/icon\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { Clickable } from \"@vibe/clickable\";\nimport { type ColorPickerValueOnly } from \"../../ColorPicker.types\";\nimport { type ColorShapes, type ColorPickerSizes } from \"../../ColorPicker.types\";\nimport { getTestId } from \"../../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../../tests/constants\";\nimport { type VibeComponentProps, type ElementContent, type ColorStyle } from \"../../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport styles from \"./ColorPickerItemComponent.module.scss\";\n\nexport interface ColorPickerItemComponentProps extends VibeComponentProps {\n  /**\n   * The color value of the item.\n   */\n  color: ColorPickerValueOnly;\n  /**\n   * Callback fired when the color is clicked.\n   */\n  onColorClicked: (color: ColorPickerValueOnly) => void;\n  /**\n   * The style applied to the color.\n   */\n  colorStyle: ColorStyle;\n  /**\n   * If true, renders the color indicator without a background.\n   */\n  shouldRenderIndicatorWithoutBackground: boolean;\n  /**\n   * Icon displayed inside the color item.\n   */\n  ColorIndicatorIcon: SubIcon;\n  /**\n   * Icon displayed when the color is selected.\n   */\n  SelectedIndicatorIcon: SubIcon;\n  /**\n   * If true, the color is marked as selected.\n   */\n  isSelected: boolean;\n  /**\n   * The size of the color item.\n   */\n  colorSize: ColorPickerSizes;\n  /**\n   * Tooltip content for the color item.\n   */\n  tooltipContent: ElementContent;\n  /**\n   * If true, the color item is currently active.\n   */\n  isActive: boolean;\n  /**\n   * The shape of the color item.\n   */\n  colorShape: ColorShapes;\n  /**\n   * Human-readable label for the color, used for screen reader announcements.\n   */\n  colorAriaLabel: string;\n}\n\nconst ColorPickerItemComponent = forwardRef(\n  (\n    {\n      color,\n      onColorClicked,\n      colorStyle = \"regular\",\n      shouldRenderIndicatorWithoutBackground,\n      ColorIndicatorIcon,\n      SelectedIndicatorIcon = ColorIndicatorIcon,\n      isSelected,\n      colorSize,\n      tooltipContent,\n      isActive,\n      colorShape,\n      colorAriaLabel,\n      id,\n      \"data-testid\": dataTestId\n    }: ColorPickerItemComponentProps,\n    _ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const isMondayColor = useMemo(() => (contentColors as readonly string[]).includes(color), [color]); // casting to any since color can be one of the system content colors but can also be a custom one\n    const colorAsStyle = isMondayColor ? ColorUtils.getMondayColorAsStyle(color, colorStyle) : color;\n    const itemRef = useRef<HTMLDivElement>(null);\n\n    const onClick = useCallback(() => onColorClicked(color), [onColorClicked, color]);\n\n    useEffect(() => {\n      if (!itemRef?.current || shouldRenderIndicatorWithoutBackground || !isMondayColor) return;\n      const item = itemRef.current;\n      const setHoverColor = (e: MouseEvent) => {\n        if (colorStyle === \"selected\") {\n          (e.target as HTMLDivElement).style.background = ColorUtils.getMondayColorAsStyle(color, \"regular\");\n        } else {\n          (e.target as HTMLDivElement).style.background = ColorUtils.getMondayColorAsStyle(color, \"hover\");\n        }\n      };\n      const restoreToOriginalColor = (e: MouseEvent) => {\n        (e.target as HTMLDivElement).style.background = colorAsStyle;\n      };\n      item.addEventListener(\"mouseenter\", setHoverColor, false);\n      item.addEventListener(\"mouseleave\", restoreToOriginalColor, false);\n\n      return () => {\n        item.removeEventListener(\"mouseenter\", setHoverColor, false);\n        item.removeEventListener(\"mouseleave\", restoreToOriginalColor, false);\n      };\n    }, [color, colorAsStyle, colorStyle, isMondayColor, itemRef, shouldRenderIndicatorWithoutBackground]);\n\n    const shouldRenderIcon = isSelected || ColorIndicatorIcon;\n    const colorIndicatorWrapperStyle = shouldRenderIndicatorWithoutBackground ? { color: colorAsStyle } : {};\n    return (\n      <Tooltip content={tooltipContent}>\n        <li\n          id={id}\n          role=\"option\"\n          aria-selected={isSelected}\n          className={cx(styles.itemWrapper, {\n            [styles.selectedColor]: isSelected,\n            [styles.active]: isActive,\n            [styles.circle]: colorShape === \"circle\"\n          })}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.COLOR_PICKER_ITEM, color)}\n        >\n          <div className={cx(styles.feedbackIndicator)} />\n          <Clickable\n            ref={itemRef}\n            role=\"presentation\"\n            aria-label={colorAriaLabel}\n            className={cx(styles.colorItem, getStyle(styles, camelCase(\"color-item-size-\" + colorSize)), {\n              [styles.colorItemTextMode]: shouldRenderIndicatorWithoutBackground\n            })}\n            style={{ background: shouldRenderIndicatorWithoutBackground ? \"transparent\" : colorAsStyle }}\n            onClick={onClick}\n            tabIndex={-1}\n            onMouseDown={e => e.preventDefault()} // this is for quill to not lose the selection\n          >\n            <div className={cx(styles.colorIndicatorWrapper)} style={colorIndicatorWrapperStyle}>\n              {shouldRenderIcon && (\n                <Icon\n                  icon={isSelected ? SelectedIndicatorIcon : ColorIndicatorIcon}\n                  className={cx({\n                    [styles.colorIconWhite]: !shouldRenderIndicatorWithoutBackground\n                  })}\n                  ignoreFocusStyle\n                />\n              )}\n            </div>\n          </Clickable>\n        </li>\n      </Tooltip>\n    );\n  }\n);\n\nexport default ColorPickerItemComponent;\n"
  },
  {
    "path": "packages/core/src/components/ColorPicker/index.ts",
    "content": "export { default as ColorPicker, type ColorPickerProps } from \"./ColorPicker\";\nexport {\n  default as ColorPickerContent,\n  type ColorPickerContentProps\n} from \"./components/ColorPickerContent/ColorPickerContent\";\n\nexport * from \"./ColorPicker.types\";\n"
  },
  {
    "path": "packages/core/src/components/ColorPicker/services/ColorPickerStyleService.ts",
    "content": "import { DIALOG_WIDTH_PADDING, COLOR_SIZES, COLOR_PADDING } from \"../ColorPickerConstants\";\nimport { type BaseSizes } from \"../../../constants/sizes\";\n\nexport const calculateColorPickerWidth = (colorSize: BaseSizes, numberOfColorsInLine: number) => {\n  return numberOfColorsInLine * (COLOR_SIZES[colorSize] + COLOR_PADDING);\n};\n\nexport const calculateColorPickerDialogWidth = (colorSize: BaseSizes, numberOfColorsInLine: number) => {\n  return calculateColorPickerWidth(colorSize, numberOfColorsInLine) + DIALOG_WIDTH_PADDING;\n};\n"
  },
  {
    "path": "packages/core/src/components/Combobox/Combobox.module.scss",
    "content": "@import \"../../styles/typography\";\n@import \"../../styles/states\";\n\n.combobox {\n  @include smoothing-text;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  margin-bottom: var(--space-8);\n}\n\n.combobox.stickyCategory .comboboxCategory {\n  z-index: 10;\n  background-color: var(--secondary-background-color);\n}\n\n/* Relative to Search height */\n\n.combobox.stickyCategory.sizeSmall .comboboxCategory {\n  top: 32px;\n}\n\n.combobox.stickyCategory.sizeMedium .comboboxCategory {\n  top: 40px;\n}\n\n.combobox.stickyCategory.sizeLarge .comboboxCategory {\n  top: 48px;\n}\n\n.combobox.empty {\n  max-height: 200px;\n  margin-bottom: 0;\n}\n\n.comboboxSearchWrapper {\n  position: sticky;\n  top: 0;\n  z-index: 12;\n}\n\n.comboboxNoResults {\n  margin-top: var(--space-8);\n  flex: 1 1 auto;\n  height: calc(100% - 20px);\n  overflow: hidden;\n  position: relative;\n  padding: 0 16px;\n  display: flex;\n  flex-direction: column;\n}\n\n.comboboxNoResults .comboboxMessageWrapper {\n  flex: 1 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.comboboxNoResults .comboboxMessageWrapper .comboboxMessage {\n  @include ellipsis();\n}\n\n.comboboxNoResults .addNewButton {\n  flex: 0 0 auto;\n  width: 100% !important;\n  margin-bottom: 8px;\n}\n\n.comboboxNoResults .addNewButton .buttonLabel {\n  @include ellipsis();\n}\n\n.comboboxList {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  padding: 0 4px;\n  overflow: hidden;\n}\n"
  },
  {
    "path": "packages/core/src/components/Combobox/Combobox.tsx",
    "content": "import cx from \"classnames\";\nimport React, { useRef, useState, forwardRef, useMemo, useCallback } from \"react\";\nimport { isFunction } from \"es-toolkit\";\nimport { noop as NOOP, camelCase } from \"es-toolkit\";\nimport { getStyle, useMergeRef, useWarnDeprecated } from \"@vibe/shared\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\n\nimport Search from \"../Search/Search\";\nimport { Button } from \"@vibe/button\";\nimport { Text } from \"@vibe/typography\";\n\nimport { defaultFilter } from \"./ComboboxService\";\nimport { ComboboxItems } from \"./components/ComboboxItems/ComboboxItems\";\nimport { StickyCategoryHeader } from \"./components/StickyCategoryHeader/StickyCategoryHeader\";\nimport { useItemsData, useKeyboardNavigation } from \"./ComboboxHelpers/ComboboxHelpers\";\nimport { getOptionId } from \"./helpers\";\nimport { type ElementContent, type VibeComponentProps } from \"../../types\";\nimport {\n  type IComboboxCategoryMap,\n  type IComboboxItem,\n  type IComboboxOption,\n  COMBOBOX_LISTBOX_ID,\n  type IComboboxCategory\n} from \"./components/ComboboxConstants\";\nimport styles from \"./Combobox.module.scss\";\nimport { type ComboboxSizes } from \"./Combobox.types\";\nimport type { IconButton } from \"@vibe/icon-button\";\nimport type MenuButton from \"../MenuButton/MenuButton\";\nimport { ComponentVibeId } from \"../../tests/constants\";\nimport { type SubIcon } from \"@vibe/icon\";\n\nexport interface ComboboxProps extends VibeComponentProps {\n  /**\n   * Class name applied to each option item.\n   */\n  optionClassName?: string;\n  /**\n   * Class name applied to the search wrapper.\n   */\n  searchWrapperClassName?: string;\n  /**\n   * Class name applied to the sticky category header.\n   */\n  stickyCategoryClassName?: string;\n  /**\n   * Placeholder text displayed in the search input.\n   */\n  placeholder?: string;\n  /**\n   * Message displayed when no results are found.\n   */\n  noResultsMessage?: string;\n  /**\n   * If true, the combobox is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The list of available options.\n   */\n  options?: IComboboxOption[];\n  /**\n   * The list of available categories.\n   */\n  categories?: IComboboxCategoryMap;\n  /**\n   * If true, displays a divider between category sections.\n   */\n  withCategoriesDivider?: boolean;\n  /**\n   * The size of the combobox.\n   */\n  size?: ComboboxSizes;\n  /**\n   * The height of each option item.\n   */\n  optionLineHeight?: number;\n  /**\n   * The height of the options list.\n   */\n  optionsListHeight?: number;\n  /**\n   * If true, the search input is focused when the component mounts.\n   */\n  autoFocus?: boolean;\n  /**\n   * Callback fired when the \"Add new\" button is clicked.\n   */\n  onAddNew?: (value: string) => void;\n  /**\n   * Label displayed for the \"Add new\" button.\n   */\n  addNewLabel?: ((label: string) => ElementContent) | string;\n  /**\n   * Custom filter function for searching options.\n   */\n  filter?: (filterValue: string, options: IComboboxOption[]) => IComboboxOption[];\n  /**\n   * The default search input\n   */\n  defaultFilter?: string;\n  /**\n   * If true, disables filtering.\n   */\n  disableFilter?: boolean;\n  /**\n   * Controlled search input value.\n   */\n  filterValue?: string;\n  /**\n   * Callback fired when the search input value changes.\n   */\n  onFilterChanged?: (value: string) => void;\n  /**\n   * If true, displays a loading state.\n   */\n  loading?: boolean;\n  /**\n   * Callback fired when an option is hovered.\n   */\n  onOptionHover?: (event: React.MouseEvent, index: number, option: IComboboxOption) => void;\n  /**\n   * Callback fired when the mouse leaves an option.\n   */\n  onOptionLeave?: () => void;\n  /**\n   * If true, automatically scrolls to the selected option.\n   */\n  shouldScrollToSelectedItem?: boolean;\n  /**\n   * Custom renderer for when no results are found.\n   */\n  noResultsRenderer?: () => JSX.Element;\n  /**\n   * If true, keeps categories visible when scrolling.\n   */\n  stickyCategories?: boolean;\n  /**\n   * If true, visually focuses the first item by default.\n   */\n  defaultVisualFocusFirstIndex?: boolean;\n  /**\n   * If true, clears the search input when an option is selected.\n   */\n  clearFilterOnSelection?: boolean;\n  /**\n   * Custom renderer for options.\n   */\n  optionRenderer?: (option: IComboboxOption) => JSX.Element;\n  /**\n   * Maximum number of options displayed before scrolling.\n   */\n  maxOptionsWithoutScroll?: number;\n  /**\n   * If true, renders only visible options for performance optimization.\n   */\n  renderOnlyVisibleOptions?: boolean;\n  /**\n   * Callback fired when an option is clicked.\n   */\n  onClick?: (optionData: IComboboxOption) => void;\n  /**\n   * Custom search icon.\n   */\n  searchIcon?: SubIcon;\n  /**\n   * ARIA label for the search input.\n   */\n  searchInputAriaLabel?: string;\n  /**\n   * The debounce rate for filtering.\n   */\n  debounceRate?: number;\n  /**\n   * Ref for the search input element.\n   */\n  searchInputRef?: React.RefObject<HTMLInputElement>;\n  /**\n   * Additional action button inside the search input.\n   */\n  renderAction?: React.ReactElement<typeof IconButton | typeof MenuButton>;\n  /**\n   * If true, hides the additional action when the user types in the search input.\n   */\n  hideRenderActionOnInput?: boolean;\n}\n\nconst Combobox = forwardRef(\n  (\n    {\n      className = \"\",\n      optionClassName = \"\",\n      searchWrapperClassName,\n      stickyCategoryClassName,\n      searchIcon,\n      id = \"\",\n      placeholder = \"\",\n      size = \"medium\",\n      defaultVisualFocusFirstIndex,\n      optionLineHeight = 32,\n      optionsListHeight,\n      autoFocus = false,\n      disabled = false,\n      options = [],\n      categories,\n      withCategoriesDivider = false,\n      noResultsMessage = \"No results found\",\n      onAddNew,\n      addNewLabel = \"Add new\",\n      onClick = (_optionData: IComboboxOption) => {},\n      filter = defaultFilter,\n      disableFilter = false,\n      filterValue: filterValueProp,\n      onFilterChanged,\n      loading = false,\n      onOptionHover = NOOP,\n      onOptionLeave = NOOP,\n      shouldScrollToSelectedItem = true,\n      noResultsRenderer,\n      stickyCategories = false,\n      optionRenderer = null,\n      renderOnlyVisibleOptions = false,\n      clearFilterOnSelection = false,\n      maxOptionsWithoutScroll,\n      defaultFilter: defaultFilterValue = \"\",\n      searchInputAriaLabel = \"Search for content\",\n      \"data-testid\": dataTestId,\n      debounceRate,\n      searchInputRef,\n      renderAction: RenderAction,\n      hideRenderActionOnInput\n    }: ComboboxProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    useWarnDeprecated({\n      component: \"Combobox\",\n      message:\n        \"This component is deprecated and will be removed in the next major version. Please use Dropdown box mode from @vibe/core instead.\"\n    });\n\n    const componentRef = useRef(null);\n    const inputRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n    const mergedInputRef = useMergeRef(inputRef, searchInputRef);\n\n    const [filterValue, setFilterValue] = useState(filterValueProp || defaultFilterValue);\n\n    if (filterValueProp !== undefined && filterValueProp !== filterValue) {\n      setFilterValue(filterValueProp);\n    }\n\n    const onChangeCallback = useCallback(\n      (value: string) => {\n        setActiveOptionIndex(-1);\n        if (onFilterChanged) {\n          onFilterChanged(value);\n        }\n        setFilterValue(value);\n      },\n      [setFilterValue, onFilterChanged]\n    );\n\n    const onOptionHoverCB = useCallback(\n      (event: React.MouseEvent, index: number, option: IComboboxOption) => {\n        onOptionHover(event, index, option);\n      },\n      [onOptionHover]\n    );\n\n    const filteredOptions: IComboboxOption[] = useMemo(() => {\n      if (disableFilter) {\n        return options;\n      }\n      return filter(filterValue, options);\n    }, [options, filterValue, filter, disableFilter]);\n\n    const [activeOptionIndex, setActiveOptionIndex] = useState(-1);\n\n    const isChildSelectable = useCallback(\n      (index: number) => {\n        return index !== undefined && filteredOptions[index] && !filteredOptions[index].disabled;\n      },\n      [filteredOptions]\n    );\n\n    const onAddNewCallback = useCallback(() => {\n      onAddNew && onAddNew(filterValue);\n      // clear filter after adding\n      setFilterValue(\"\");\n    }, [onAddNew, filterValue, setFilterValue]);\n\n    const hasResults = filteredOptions.length > 0;\n    const hasFilter = filterValue.length > 0;\n\n    function getAddNewLabel() {\n      if (isFunction(addNewLabel)) {\n        return addNewLabel(filterValue);\n      }\n      return addNewLabel;\n    }\n\n    function renderNoResults() {\n      if (noResultsRenderer) {\n        return noResultsRenderer();\n      }\n\n      return (\n        <div className={styles.comboboxNoResults}>\n          <div className={styles.comboboxMessageWrapper}>\n            <span className={styles.comboboxMessage}>{noResultsMessage}</span>\n          </div>\n          {onAddNew && !disabled && (\n            <Button className={styles.addNewButton} size={size} kind=\"tertiary\" onClick={onAddNewCallback}>\n              <span className={styles.buttonLabel}>{getAddNewLabel()}</span>\n            </Button>\n          )}\n        </div>\n      );\n    }\n\n    const [activeCategory, setActiveCategory] = useState<IComboboxCategory>();\n\n    const onActiveCategoryChanged = useCallback(\n      (categoryData: IComboboxItem) => {\n        if (categoryData?.category?.label !== activeCategory?.label) {\n          setActiveCategory(categoryData?.category);\n        }\n      },\n      [activeCategory]\n    );\n\n    const { items, itemsMap, selectableItems } = useItemsData({\n      categories,\n      options: filteredOptions,\n      filterValue,\n      withCategoriesDivider,\n      optionLineHeight\n    });\n\n    const overrideOnClick = useCallback(\n      (_event: React.MouseEvent | React.KeyboardEvent, itemIndex: number) => {\n        onClick(selectableItems[itemIndex]);\n        if (isChildSelectable(itemIndex)) {\n          setActiveOptionIndex(itemIndex);\n        }\n        if (clearFilterOnSelection) {\n          // clear filter after adding\n          onChangeCallback(\"\");\n        }\n      },\n      [onClick, selectableItems, isChildSelectable, clearFilterOnSelection, onChangeCallback]\n    );\n\n    const {\n      visualFocusItemIndex,\n      visualFocusItemId,\n      onOptionClick: overrideOnOptionClick\n    } = useKeyboardNavigation({\n      getOptionId,\n      defaultVisualFocusFirstIndex,\n      onClick: overrideOnClick,\n      isChildSelectable,\n      options: selectableItems,\n      inputRef: mergedInputRef\n    });\n\n    return (\n      <Text\n        type=\"text2\"\n        ref={mergedRef}\n        className={cx(styles.combobox, className, getStyle(styles, camelCase(\"size-\" + size)), {\n          [styles.empty]: !hasResults,\n          [styles.stickyCategory]: stickyCategories\n        })}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.COMBOBOX, id)}\n        ellipsis={false}\n        data-vibe={ComponentVibeId.COMBOBOX}\n      >\n        <div className={styles.comboboxList} style={{ maxHeight: optionsListHeight }}>\n          <Search\n            ref={mergedInputRef}\n            value={filterValue}\n            className={cx(styles.comboboxSearchWrapper, searchWrapperClassName)}\n            inputAriaLabel={searchInputAriaLabel}\n            currentAriaResultId={visualFocusItemId}\n            id=\"combobox-search\"\n            placeholder={placeholder}\n            size={size}\n            disabled={disabled}\n            onChange={onChangeCallback}\n            autoFocus={autoFocus}\n            loading={loading}\n            searchIconName={searchIcon}\n            aria-expanded={hasFilter || hasResults}\n            aria-haspopup=\"listbox\"\n            searchResultsContainerId={id ? `${id}-listbox` : COMBOBOX_LISTBOX_ID}\n            debounceRate={debounceRate}\n            renderAction={RenderAction}\n            hideRenderActionOnInput={hideRenderActionOnInput}\n          />\n          {stickyCategories && (\n            <StickyCategoryHeader\n              label={activeCategory?.label}\n              color={activeCategory?.color}\n              className={stickyCategoryClassName}\n            />\n          )}\n          {hasResults && (\n            <ComboboxItems\n              stickyCategories={stickyCategories}\n              categories={categories}\n              options={items}\n              itemsMap={itemsMap}\n              optionClassName={optionClassName}\n              optionRenderer={optionRenderer}\n              activeItemIndex={activeOptionIndex}\n              onActiveCategoryChanged={onActiveCategoryChanged}\n              onOptionClick={overrideOnOptionClick}\n              onOptionEnter={onOptionHoverCB}\n              onOptionLeave={onOptionLeave}\n              optionLineHeight={optionLineHeight}\n              shouldScrollToSelectedItem={shouldScrollToSelectedItem}\n              renderOnlyVisibleOptions={renderOnlyVisibleOptions}\n              maxOptionsWithoutScroll={maxOptionsWithoutScroll}\n              visualFocusItemIndex={visualFocusItemIndex}\n              id={id ? `${id}-listbox` : COMBOBOX_LISTBOX_ID}\n            />\n          )}\n        </div>\n        {hasFilter && !hasResults && !loading && renderNoResults()}\n      </Text>\n    );\n  }\n);\n\n// Locate loading next to search icon\n// color it with --secondary-text-color\n// size it like the icon - we think it's 16px - make sure it's not fat\n\nexport default Combobox;\n"
  },
  {
    "path": "packages/core/src/components/Combobox/Combobox.types.ts",
    "content": "export type ComboboxOptionIconType = \"default\" | \"renderer\";\n\nexport type ComboboxSizes = \"small\" | \"medium\" | \"large\";\n\nexport {\n  type IComboboxCategoryMap as ComboboxCategoryMap,\n  type IComboboxCategory as ComboboxCategory,\n  type IComboboxItem as ComboboxItem,\n  type IComboboxOption as ComboboxOption,\n  type IComboboxOptionEvents as ComboboxOptionEvents,\n  type IOptionItemRendererArgs as ComboboxOptionItemRendererArgs\n} from \"./components/ComboboxConstants\";\n"
  },
  {
    "path": "packages/core/src/components/Combobox/ComboboxHelpers/ComboboxHelpers.module.scss",
    "content": ".comboboxItemContainer {\n  display: flex;\n  flex: auto;\n  width: 100%;\n  background-color: var(--secondary-background-color);\n}\n\n.dividerContainer {\n  position: relative;\n  width: 95%;\n}\n\n.divider {\n  position: absolute;\n\n  // 16 px are the margin of the dialog and the scroll size\n  width: calc(100% + 16px);\n  margin-inline-start: -12px;\n}\n\n.sticky {\n  position: sticky;\n  top: 0;\n  z-index: 20;\n}"
  },
  {
    "path": "packages/core/src/components/Combobox/ComboboxHelpers/ComboboxHelpers.tsx",
    "content": "import React, { type CSSProperties, type MutableRefObject, useMemo } from \"react\";\nimport cx from \"classnames\";\nimport ComboboxOption from \"../components/ComboboxOption/ComboboxOption\";\nimport ComboboxCategory from \"../components/ComboboxCategory/ComboboxCategory\";\nimport Divider from \"../../Divider/Divider\";\nimport {\n  COMBOBOX_DIVIDER_ITEM,\n  COMBOBOX_CATEGORY_ITEM,\n  COMBOBOX_OPTION_ITEM,\n  type IComboboxCategory,\n  type IComboboxOption,\n  type IComboboxCategoryMap,\n  type IComboboxItem,\n  type IOptionItemRendererArgs,\n  type IComboboxOptionEvents\n} from \"../components/ComboboxConstants\";\nimport useActiveDescendantListFocus from \"../../../hooks/useActiveDescendantListFocus\";\nimport { getOptionsByCategories } from \"../ComboboxService\";\nimport comboboxItemsStyles from \"../components/ComboboxItems/ComboboxItems.module.scss\";\nimport styles from \"./ComboboxHelpers.module.scss\";\n\nconst DIVIDER_HEIGHT = 17;\nconst CATEGORY_HEIGHT = 32;\n\nexport function useItemsData({\n  categories,\n  options,\n  filterValue,\n  withCategoriesDivider,\n  optionLineHeight\n}: {\n  categories: IComboboxCategoryMap;\n  options: IComboboxOption[];\n  filterValue: string;\n  withCategoriesDivider: boolean;\n  optionLineHeight: number;\n}) {\n  return useMemo(() => {\n    let items: IComboboxItem[] = [];\n    let selectableItems: IComboboxOption[] = [];\n    const itemsMap = new Map();\n\n    if (categories) {\n      const optionsByCategories = getOptionsByCategories(options, categories, filterValue);\n      let optionIndex = 0;\n      Object.keys(optionsByCategories).forEach((categoryId, categoryIndex) => {\n        const withDivider = withCategoriesDivider && categoryIndex !== 0;\n        if (withDivider) {\n          items.push(createDividerItemObject({ categoryId }));\n        }\n\n        const isCategoryWithOptions = optionsByCategories[categoryId].length > 0;\n        const isFirstCategory = categoryIndex === 0;\n\n        const categoryObject = createCategoryItemObject({\n          categoryId,\n          categoryData: categories[categoryId],\n          withDivider,\n          className: cx({\n            [comboboxItemsStyles.categoryWithOptions]: isCategoryWithOptions,\n            [comboboxItemsStyles.categoryWithoutOptions]: !isCategoryWithOptions,\n            [comboboxItemsStyles.firstCategory]: isFirstCategory\n          })\n        });\n\n        // save category object in both items array and categories map\n        items.push(categoryObject);\n        itemsMap.set(categoryId, categoryObject);\n\n        optionsByCategories[categoryId].forEach((option: IComboboxOption) => {\n          const itemObject = createOptionItemObject({\n            height: optionLineHeight,\n            option,\n            index: optionIndex,\n            categoryId: categoryObject.id\n          });\n\n          itemsMap.set(itemObject.id, itemObject);\n          items.push(itemObject);\n          selectableItems.push(option);\n          optionIndex++;\n        });\n      });\n    } else {\n      selectableItems = options;\n      items = options.map((option, index) => {\n        return createOptionItemObject({\n          height: optionLineHeight,\n          option,\n          index\n        });\n      });\n    }\n    return { items, itemsMap, selectableItems };\n  }, [categories, options, filterValue, withCategoriesDivider, optionLineHeight]);\n}\n\nexport function useKeyboardNavigation({\n  defaultVisualFocusFirstIndex,\n  inputRef,\n  onClick,\n  isChildSelectable,\n  options,\n  getOptionId\n}: {\n  defaultVisualFocusFirstIndex?: boolean;\n  inputRef: MutableRefObject<HTMLElement>;\n  onClick: (event: React.KeyboardEvent | React.MouseEvent, index: number) => void;\n  isChildSelectable: (index: number) => boolean;\n  options: IComboboxOption[];\n  getOptionId: (optionId: string, index: number) => string;\n}) {\n  const filteredOptionsIds = useMemo(\n    () => options.map((option: IComboboxOption, index: number) => getOptionId(option?.id, index)),\n    [getOptionId, options]\n  );\n\n  const { visualFocusItemIndex, visualFocusItemId } = useActiveDescendantListFocus({\n    defaultVisualFocusFirstIndex,\n    focusedElementRef: inputRef,\n    focusedElementRole: useActiveDescendantListFocus.roles.COMBOBOX,\n    itemsIds: filteredOptionsIds,\n    onItemClick: onClick,\n    isItemSelectable: isChildSelectable,\n    isIgnoreSpaceAsItemSelection: true\n  });\n\n  return { visualFocusItemIndex, visualFocusItemId, onOptionClick: onClick };\n}\nexport function createDividerItemObject({ categoryId }: { categoryId: string }): IComboboxItem {\n  return { type: COMBOBOX_DIVIDER_ITEM, height: DIVIDER_HEIGHT, id: `${categoryId}-divider` };\n}\n\nexport function createCategoryItemObject({\n  withDivider,\n  categoryId,\n  categoryData,\n  className\n}: {\n  withDivider: boolean;\n  categoryId: string;\n  categoryData: IComboboxCategory;\n  className: string;\n}): IComboboxItem {\n  return {\n    height: CATEGORY_HEIGHT,\n    type: COMBOBOX_CATEGORY_ITEM,\n    category: categoryData,\n    id: categoryId,\n    withDivider,\n    className\n  };\n}\n\nexport function createOptionItemObject({\n  option,\n  height,\n  index,\n  optionRenderer,\n  isActive,\n  optionLineHeight,\n  shouldScrollToSelectedItem,\n  categoryId\n}: {\n  option?: IComboboxOption;\n  height?: number;\n  index?: number;\n  optionRenderer?: (option: IComboboxOption) => JSX.Element;\n  isActive?: boolean;\n  optionLineHeight?: number;\n  shouldScrollToSelectedItem?: boolean;\n  categoryId?: string;\n}): IComboboxItem {\n  return {\n    type: COMBOBOX_OPTION_ITEM,\n    height,\n    belongToCategory: true,\n    index,\n    option,\n    id: option.id || index.toString(),\n    optionRenderer,\n    isActive,\n    optionLineHeight,\n    shouldScrollToSelectedItem,\n    categoryId\n  };\n}\n\nexport function comboboxItemRenderer({\n  item,\n  style,\n  optionEvents,\n  optionRenderData,\n  isVirtualized,\n  stickyCategories\n}: {\n  item: IComboboxItem;\n  style: CSSProperties;\n  optionEvents: IComboboxOptionEvents;\n  optionRenderData: any;\n  isVirtualized: boolean;\n  stickyCategories?: boolean;\n}) {\n  const { type, ...otherArgs } = item;\n  let customClassNames;\n  let innerElement;\n  switch (type) {\n    case COMBOBOX_DIVIDER_ITEM: {\n      innerElement = dividerItemRenderer({ id: otherArgs.id, height: otherArgs.height });\n      break;\n    }\n    case COMBOBOX_CATEGORY_ITEM: {\n      innerElement = categoryItemRenderer({\n        id: otherArgs.id,\n        category: otherArgs.category,\n        className: otherArgs.className\n      });\n      if (stickyCategories && !isVirtualized) {\n        customClassNames = styles.sticky;\n      }\n      break;\n    }\n    case COMBOBOX_OPTION_ITEM: {\n      innerElement = optionItemRenderer({\n        ...otherArgs,\n        ...optionEvents,\n        ...optionRenderData\n      });\n      break;\n    }\n  }\n\n  return (\n    <div key={otherArgs.id} className={cx(styles.comboboxItemContainer, customClassNames)} style={style}>\n      {innerElement}\n    </div>\n  );\n}\n\nexport function dividerItemRenderer({ id, height }: { id: string; height: number }) {\n  return (\n    <div className={styles.dividerContainer} style={{ height: height }}>\n      <Divider className={styles.divider} key={id} />\n    </div>\n  );\n}\n\nexport function categoryItemRenderer({\n  id,\n  category,\n  className\n}: {\n  id: string;\n  category: IComboboxCategory;\n  className: string;\n}) {\n  return <ComboboxCategory key={id} category={category} className={className} />;\n}\n\nexport function optionItemRenderer({\n  id,\n  index,\n  option,\n  className,\n  onOptionClick,\n  onOptionEnter,\n  onOptionLeave,\n  optionLineHeight,\n  optionRenderer,\n  scrollRef,\n  shouldScrollToSelectedItem,\n  activeItemIndex,\n  visualFocusItemIndex\n}: IOptionItemRendererArgs) {\n  return (\n    <ComboboxOption\n      className={className}\n      index={index}\n      key={id}\n      option={option}\n      optionRenderer={optionRenderer}\n      scrollRef={scrollRef}\n      isActive={activeItemIndex === index}\n      visualFocus={index === visualFocusItemIndex}\n      onOptionClick={onOptionClick}\n      onOptionHover={onOptionEnter}\n      onOptionLeave={onOptionLeave}\n      onOptionEnter={onOptionEnter}\n      optionLineHeight={optionLineHeight}\n      shouldScrollWhenActive={shouldScrollToSelectedItem}\n    />\n  );\n}\n"
  },
  {
    "path": "packages/core/src/components/Combobox/ComboboxService.ts",
    "content": "import { type IComboboxCategoryMap, type IComboboxOption } from \"./components/ComboboxConstants\";\n\ntype OptionsByCategories = {\n  [key: string]: Array<IComboboxOption>;\n};\n\nexport const getOptionsByCategories = (\n  options: IComboboxOption[],\n  categories: IComboboxCategoryMap,\n  filterValue: string\n): OptionsByCategories => {\n  const optionsByCategories = options.reduce((result: OptionsByCategories, option) => {\n    const categoryId = option.categoryId;\n    // skipping if the option doesn't have a category\n    if (!categoryId) return result;\n    if (categories[categoryId]?.onlyShowOnSearch && !filterValue) return result;\n\n    if (result[categoryId]) {\n      result[categoryId].push(option);\n    } else {\n      result[categoryId] = [option];\n    }\n\n    return result;\n  }, {});\n\n  // reorder the keys according to the categories order\n  return Object.keys(categories).reduce((result: OptionsByCategories, categoryId) => {\n    if (optionsByCategories[categoryId]) result[categoryId] = optionsByCategories[categoryId];\n\n    return result;\n  }, {});\n};\n\nexport const defaultFilter = (filterValue: string, options: IComboboxOption[]) =>\n  options.filter(\n    ({ label }: { label: string }) => !filterValue || label.toLowerCase().includes(filterValue.toLowerCase())\n  );\n"
  },
  {
    "path": "packages/core/src/components/Combobox/__tests__/Combobox.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport Combobox from \"../Combobox\";\nimport { NewTab } from \"@vibe/icons\";\n\ndescribe(\"Combobox renders correctly\", () => {\n  it(\"with empty props\", () => {\n    const tree = renderer.create(<Combobox />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with className\", () => {\n    const tree = renderer.create(<Combobox className=\"test\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with optionClassName\", () => {\n    const tree = renderer.create(<Combobox optionClassName=\"test\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with custom search icon\", () => {\n    const tree = renderer.create(<Combobox optionClassName=\"test\" searchIcon={NewTab} />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with id\", () => {\n    const tree = renderer.create(<Combobox id=\"test\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with placeholder\", () => {\n    const tree = renderer.create(<Combobox placeholder=\"placeholder\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with another noResultsMessage\", () => {\n    const tree = renderer.create(<Combobox noResultsMessage=\"no test text\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"when disabled\", () => {\n    const tree = renderer.create(<Combobox disabled />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with size\", () => {\n    const tree = renderer.create(<Combobox size=\"large\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with optionLineHeight\", () => {\n    const tree = renderer.create(<Combobox optionLineHeight={50} />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with optionsListHeight\", () => {\n    const tree = renderer.create(<Combobox optionsListHeight={50} />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with autoFocus\", () => {\n    const tree = renderer.create(<Combobox autoFocus />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with loading\", () => {\n    const tree = renderer.create(<Combobox loading />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with divider\", () => {\n    const options = [\n      { id: \"1\", label: \"Option 1\", categoryId: \"cat1\" },\n      { id: \"2\", label: \"Option 2\", categoryId: \"cat2\" }\n    ];\n\n    const categories = {\n      cat1: {\n        id: \"cat1\",\n        label: \"cat1\"\n      },\n      cat2: {\n        id: \"cat2\",\n        label: \"cat2\"\n      }\n    };\n    const tree = renderer.create(<Combobox options={options} categories={categories} withCategoriesDivider />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with divider and colored categories\", () => {\n    const options = [\n      { id: \"1\", label: \"Option 1\", categoryId: \"cat1\" },\n      { id: \"2\", label: \"Option 2\", categoryId: \"cat2\" }\n    ];\n\n    const categories = {\n      cat1: {\n        id: \"cat1\",\n        label: \"cat1\",\n        color: \"red\"\n      },\n      cat2: {\n        id: \"cat2\",\n        label: \"cat2\",\n        color: \"blue\"\n      }\n    };\n    const tree = renderer.create(<Combobox options={options} categories={categories} withCategoriesDivider />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with optionRenderer\", () => {\n    const options = [\n      { id: \"1\", label: \"Option 1\" },\n      { id: \"2\", label: \"Option 2\" }\n    ];\n    const optionRenderer = (option: any) => <div>some render of {option.label}</div>;\n    const tree = renderer.create(<Combobox options={options} optionRenderer={optionRenderer} />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Combobox/__tests__/Combobox.test.tsx",
    "content": "import { vi, beforeEach, afterEach, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { fireEvent, render, screen, waitFor, cleanup } from \"@testing-library/react\";\nimport Combobox from \"../Combobox\";\n\nfunction clickValueCheckCallback(getByLabelText, onClickMock, labelText, value, numberOfCall = 1) {\n  fireEvent.click(getByLabelText(labelText));\n  expect(onClickMock.mock.calls.length).toBe(numberOfCall);\n  expect(onClickMock).toHaveBeenCalledWith(expect.objectContaining({ label: labelText, value }));\n}\n\ndescribe(\"Combobox tests\", () => {\n  beforeEach(() => {\n    vi.useFakeTimers();\n  });\n\n  afterEach(() => {\n    vi.useRealTimers();\n    cleanup();\n  });\n\n  describe(\"Without categories\", () => {\n    const mockOptions = [\n      { value: \"orange\", label: \"Orange\" },\n      { value: \"yellow\", label: \"Yellow\" },\n      { value: \"red\", label: \"Red\", disabled: true }\n    ];\n\n    // eslint-disable-next-line vitest/expect-expect\n    it(\"should call item on click callback func when onClick\", () => {\n      const onClickMock = vi.fn();\n      const { getByLabelText } = render(<Combobox onClick={onClickMock} options={mockOptions} />);\n\n      clickValueCheckCallback(getByLabelText, onClickMock, \"Yellow\", \"yellow\");\n    });\n\n    it(\"should call callback func when onOptionHover\", () => {\n      const onMouseOverMock = vi.fn();\n      const { getByLabelText } = render(<Combobox onOptionHover={onMouseOverMock} options={mockOptions} />);\n\n      fireEvent.mouseOver(getByLabelText(\"Yellow\"));\n      expect(onMouseOverMock.mock.calls.length).toBe(1);\n    });\n\n    it(\"should call callback func when onOptionLeave\", () => {\n      const onMouseLeaveMock = vi.fn();\n      const { getByLabelText } = render(<Combobox onOptionLeave={onMouseLeaveMock} options={mockOptions} />);\n\n      fireEvent.mouseLeave(getByLabelText(\"Yellow\"));\n      expect(onMouseLeaveMock.mock.calls.length).toBe(1);\n    });\n\n    it(\"should call callback func when noResultsRenderer\", async () => {\n      const noResRendereMock = vi.fn();\n      const { getByLabelText } = render(<Combobox noResultsRenderer={noResRendereMock} options={mockOptions} />);\n      const input = getByLabelText(\"Search for content\");\n      expect(noResRendereMock.mock.calls.length).toBe(0);\n      fireEvent.change(input, { target: { value: \"No text in option\" } });\n      vi.runAllTimers();\n      await waitFor(() => expect(noResRendereMock.mock.calls.length).toBe(1));\n    });\n\n    it(\"should display no results message\", async () => {\n      const noRes = \"NO MESSAGE\";\n      const { getByLabelText } = render(<Combobox options={mockOptions} noResultsMessage={noRes} />);\n      const input = getByLabelText(\"Search for content\");\n      fireEvent.change(input, { target: { value: \"No text in option\" } });\n      vi.runAllTimers();\n      await waitFor(() => expect(screen.getByText(noRes)).toBeInstanceOf(Node));\n    });\n\n    it(\"should support default filter\", async () => {\n      const defaultFilter = \"Orange\";\n      const { getByTestId, getByLabelText, getByRole } = render(\n        <Combobox options={mockOptions} defaultFilter={defaultFilter} />\n      );\n      const input = getByTestId(\"search_combobox-search\");\n      expect(input.value).toBe(defaultFilter);\n      const listbox = getByRole(\"listbox\");\n      expect(listbox.childElementCount).toBe(1);\n      const orangeOption = getByLabelText(mockOptions[0].label);\n      expect(orangeOption).toBeTruthy();\n    });\n\n    it(\"should call onAddNew func when add new\", async () => {\n      const onAddMock = vi.fn();\n\n      const { getByLabelText } = render(<Combobox onAddNew={onAddMock} options={mockOptions} />);\n      const input = getByLabelText(\"Search for content\");\n      fireEvent.change(input, { target: { value: \"No text in option\" } });\n      vi.runAllTimers();\n\n      await waitFor(() => {\n        fireEvent.click(screen.getByText(\"Add new\"));\n        expect(onAddMock.mock.calls.length).toBe(1);\n      });\n    });\n\n    it(\"should not call onClick for disabled option\", () => {\n      const onClickMock = vi.fn();\n      const { getByLabelText } = render(<Combobox onClick={onClickMock} options={mockOptions} />);\n\n      fireEvent.click(getByLabelText(\"Red\"));\n      expect(onClickMock).not.toHaveBeenCalled();\n    });\n\n    it(\"should NOT trigger hover event on disabled options\", () => {\n      const onHoverMock = vi.fn();\n      const { getByLabelText } = render(<Combobox onOptionHover={onHoverMock} options={mockOptions} />);\n\n      fireEvent.mouseOver(getByLabelText(\"Red\"));\n      expect(onHoverMock).not.toHaveBeenCalled();\n    });\n  });\n\n  describe(\"With categories\", () => {\n    const options = [\n      { id: \"item 1\", label: \"item 1\", categoryId: \"third\", value: \"item 1\" },\n      { id: \"item 2\", label: \"item 2\", categoryId: \"second\", value: \"item 2\" },\n      { id: \"item 3\", label: \"item 3\", categoryId: \"first\", value: \"item 3\" },\n      { id: \"item 4\", label: \"item 4\", categoryId: \"third\", value: \"item 4\" },\n      { id: \"item 5\", label: \"item 5\", categoryId: \"first\", value: \"item 5\" },\n      { id: \"item 6\", label: \"item 6\", categoryId: \"second\", value: \"item 6\" },\n      { id: \"item 7\", label: \"item 7\", categoryId: \"third\", value: \"item 7\" }\n    ];\n    const categories = {\n      first: { id: \"first\", label: \"first\", color: \"red\" },\n      second: { id: \"second\", label: \"second\", color: \"blue\" },\n      third: { id: \"third\", label: \"third\", color: \"orange\" }\n    };\n\n    // eslint-disable-next-line vitest/expect-expect\n    it(\"Should trigger the on click callback on the correct item with regular categories\", () => {\n      const onClickMock = vi.fn();\n      const { getByLabelText } = render(<Combobox onClick={onClickMock} options={options} categories={categories} />);\n      clickValueCheckCallback(getByLabelText, onClickMock, \"item 1\", \"item 1\");\n      clickValueCheckCallback(getByLabelText, onClickMock, \"item 2\", \"item 2\", 2);\n      clickValueCheckCallback(getByLabelText, onClickMock, \"item 3\", \"item 3\", 3);\n      clickValueCheckCallback(getByLabelText, onClickMock, \"item 4\", \"item 4\", 4);\n      clickValueCheckCallback(getByLabelText, onClickMock, \"item 5\", \"item 5\", 5);\n    });\n\n    // eslint-disable-next-line vitest/expect-expect\n    it(\"Should trigger the on click callback on the correct item with divided categories\", () => {\n      const onClickMock = vi.fn();\n      const { getByLabelText } = render(\n        <Combobox onClick={onClickMock} options={options} categories={categories} withCategoriesDivider />\n      );\n      clickValueCheckCallback(getByLabelText, onClickMock, \"item 1\", \"item 1\");\n      clickValueCheckCallback(getByLabelText, onClickMock, \"item 2\", \"item 2\", 2);\n      clickValueCheckCallback(getByLabelText, onClickMock, \"item 3\", \"item 3\", 3);\n      clickValueCheckCallback(getByLabelText, onClickMock, \"item 4\", \"item 4\", 4);\n      clickValueCheckCallback(getByLabelText, onClickMock, \"item 5\", \"item 5\", 5);\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Combobox/__tests__/ComboboxService.test.ts",
    "content": "import { beforeAll, afterAll, describe, it, expect } from \"vitest\";\nimport * as ComboboxService from \"../ComboboxService\";\n\nconst OPTIONS = [\n  { id: \"1\", label: \"Test\", categoryId: \"category1\" },\n  { id: \"2\", label: \"Test2\", categoryId: \"category2\" },\n  { id: \"3\", label: \"Test3\", categoryId: \"category3\" }\n];\nconst CATEGORIES = {\n  category1: { id: \"category1\" },\n  category2: { id: \"category2\", label: \"category2\" },\n  category3: { id: \"category3\", label: \"category3\" }\n};\nconst EMPTY_FILTER_VALUE = \"\";\n\ndescribe(\"ComboboxService\", () => {\n  it(\"orders the options by categories\", () => {\n    const result = ComboboxService.getOptionsByCategories(OPTIONS, CATEGORIES, EMPTY_FILTER_VALUE);\n    const expectedResult = {\n      category1: [{ id: \"1\", label: \"Test\", categoryId: \"category1\" }],\n      category2: [{ id: \"2\", label: \"Test2\", categoryId: \"category2\" }],\n      category3: [{ id: \"3\", label: \"Test3\", categoryId: \"category3\" }]\n    };\n    expect(result).toEqual(expectedResult);\n  });\n\n  describe(\"onlyShowOnSearch category param\", () => {\n    beforeAll(() => {\n      CATEGORIES.category3.onlyShowOnSearch = true;\n    });\n\n    afterAll(() => {\n      delete CATEGORIES.category3.onlyShowOnSearch;\n    });\n\n    describe(\"no filter value\", () => {\n      it(\"skips categories with onlyShowOnSearch\", () => {\n        const result = ComboboxService.getOptionsByCategories(OPTIONS, CATEGORIES, EMPTY_FILTER_VALUE);\n        const expectedResult = {\n          category1: [{ id: \"1\", label: \"Test\", categoryId: \"category1\" }],\n          category2: [{ id: \"2\", label: \"Test2\", categoryId: \"category2\" }]\n        };\n        expect(result).toEqual(expectedResult);\n      });\n    });\n\n    describe(\"with filter value\", () => {\n      it(\"keeps categories with onlyShowOnSearch\", () => {\n        const result = ComboboxService.getOptionsByCategories(OPTIONS, CATEGORIES, \"cat\");\n        const expectedResult = {\n          category1: [{ id: \"1\", label: \"Test\", categoryId: \"category1\" }],\n          category2: [{ id: \"2\", label: \"Test2\", categoryId: \"category2\" }],\n          category3: [{ id: \"3\", label: \"Test3\", categoryId: \"category3\" }]\n        };\n        expect(result).toEqual(expectedResult);\n      });\n    });\n  });\n\n  it(\"keeps the categories order\", () => {\n    const optionsWithMessyOrder = [\n      { id: \"3\", label: \"Test3\", categoryId: \"category3\" },\n      { id: \"1\", label: \"Test\", categoryId: \"category1\" },\n      { id: \"2\", label: \"Test2\", categoryId: \"category2\" }\n    ];\n\n    const result = ComboboxService.getOptionsByCategories(optionsWithMessyOrder, CATEGORIES, EMPTY_FILTER_VALUE);\n    const expectedResult = {\n      category1: [{ id: \"1\", label: \"Test\", categoryId: \"category1\" }],\n      category2: [{ id: \"2\", label: \"Test2\", categoryId: \"category2\" }],\n      category3: [{ id: \"3\", label: \"Test3\", categoryId: \"category3\" }]\n    };\n    expect(result).toEqual(expectedResult);\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Combobox/__tests__/__snapshots__/Combobox.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`Combobox renders correctly > when disabled 1`] = `\n<div\n  className=\"typography primary start text text2Normal combobox sizeMedium empty\"\n  data-testid=\"combobox\"\n  data-vibe=\"Combobox\"\n  id=\"\"\n>\n  <div\n    className=\"comboboxList\"\n    style={\n      {\n        \"maxHeight\": undefined,\n      }\n    }\n  >\n    <div\n      className=\"wrapper disabled medium searchWrapper comboboxSearchWrapper\"\n      role=\"search\"\n    >\n      <svg\n        aria-hidden={true}\n        className=\"icon icon\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"20px\"\n        viewBox=\"0 0 20 20\"\n        width=\"20px\"\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M8.65191 2.37299C6.9706 2.37299 5.35814 3.04089 4.16927 4.22976C2.9804 5.41863 2.3125 7.03108 2.3125 8.7124C2.3125 10.3937 2.9804 12.0062 4.16927 13.195C5.35814 14.3839 6.9706 15.0518 8.65191 15.0518C10.0813 15.0518 11.4609 14.5691 12.5728 13.6939L16.4086 17.5303C16.7014 17.8232 17.1763 17.8232 17.4692 17.5303C17.7621 17.2375 17.7622 16.7626 17.4693 16.4697L13.6334 12.6333C14.5086 11.5214 14.9913 10.1418 14.9913 8.7124C14.9913 7.03108 14.3234 5.41863 13.1346 4.22976C11.9457 3.04089 10.3332 2.37299 8.65191 2.37299ZM12.091 12.1172C12.9878 11.2113 13.4913 9.98783 13.4913 8.7124C13.4913 7.42891 12.9815 6.19798 12.0739 5.29042C11.1663 4.38285 9.9354 3.87299 8.65191 3.87299C7.36842 3.87299 6.1375 4.38285 5.22993 5.29042C4.32237 6.19798 3.8125 7.42891 3.8125 8.7124C3.8125 9.99589 4.32237 11.2268 5.22993 12.1344C6.1375 13.0419 7.36842 13.5518 8.65191 13.5518C9.92736 13.5518 11.1509 13.0483 12.0568 12.1514C12.0623 12.1455 12.0679 12.1397 12.0737 12.134C12.0794 12.1283 12.0851 12.1227 12.091 12.1172Z\"\n          fill=\"currentColor\"\n          fillRule=\"evenodd\"\n        />\n      </svg>\n      <input\n        aria-busy={false}\n        aria-expanded={false}\n        aria-haspopup=\"listbox\"\n        aria-label=\"Search for content\"\n        autoComplete=\"off\"\n        autoFocus={false}\n        className=\"input search\"\n        data-testid=\"search_combobox-search\"\n        data-vibe=\"Search\"\n        disabled={true}\n        id=\"combobox-search\"\n        onChange={[Function]}\n        placeholder=\"\"\n        role=\"combobox\"\n        type=\"search\"\n        value=\"\"\n      />\n      \n    </div>\n  </div>\n</div>\n`;\n\nexports[`Combobox renders correctly > with another noResultsMessage 1`] = `\n<div\n  className=\"typography primary start text text2Normal combobox sizeMedium empty\"\n  data-testid=\"combobox\"\n  data-vibe=\"Combobox\"\n  id=\"\"\n>\n  <div\n    className=\"comboboxList\"\n    style={\n      {\n        \"maxHeight\": undefined,\n      }\n    }\n  >\n    <div\n      className=\"wrapper medium searchWrapper comboboxSearchWrapper\"\n      role=\"search\"\n    >\n      <svg\n        aria-hidden={true}\n        className=\"icon icon\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"20px\"\n        viewBox=\"0 0 20 20\"\n        width=\"20px\"\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M8.65191 2.37299C6.9706 2.37299 5.35814 3.04089 4.16927 4.22976C2.9804 5.41863 2.3125 7.03108 2.3125 8.7124C2.3125 10.3937 2.9804 12.0062 4.16927 13.195C5.35814 14.3839 6.9706 15.0518 8.65191 15.0518C10.0813 15.0518 11.4609 14.5691 12.5728 13.6939L16.4086 17.5303C16.7014 17.8232 17.1763 17.8232 17.4692 17.5303C17.7621 17.2375 17.7622 16.7626 17.4693 16.4697L13.6334 12.6333C14.5086 11.5214 14.9913 10.1418 14.9913 8.7124C14.9913 7.03108 14.3234 5.41863 13.1346 4.22976C11.9457 3.04089 10.3332 2.37299 8.65191 2.37299ZM12.091 12.1172C12.9878 11.2113 13.4913 9.98783 13.4913 8.7124C13.4913 7.42891 12.9815 6.19798 12.0739 5.29042C11.1663 4.38285 9.9354 3.87299 8.65191 3.87299C7.36842 3.87299 6.1375 4.38285 5.22993 5.29042C4.32237 6.19798 3.8125 7.42891 3.8125 8.7124C3.8125 9.99589 4.32237 11.2268 5.22993 12.1344C6.1375 13.0419 7.36842 13.5518 8.65191 13.5518C9.92736 13.5518 11.1509 13.0483 12.0568 12.1514C12.0623 12.1455 12.0679 12.1397 12.0737 12.134C12.0794 12.1283 12.0851 12.1227 12.091 12.1172Z\"\n          fill=\"currentColor\"\n          fillRule=\"evenodd\"\n        />\n      </svg>\n      <input\n        aria-busy={false}\n        aria-expanded={false}\n        aria-haspopup=\"listbox\"\n        aria-label=\"Search for content\"\n        autoComplete=\"off\"\n        autoFocus={false}\n        className=\"input search\"\n        data-testid=\"search_combobox-search\"\n        data-vibe=\"Search\"\n        disabled={false}\n        id=\"combobox-search\"\n        onChange={[Function]}\n        placeholder=\"\"\n        role=\"combobox\"\n        type=\"search\"\n        value=\"\"\n      />\n      \n    </div>\n  </div>\n</div>\n`;\n\nexports[`Combobox renders correctly > with autoFocus 1`] = `\n<div\n  className=\"typography primary start text text2Normal combobox sizeMedium empty\"\n  data-testid=\"combobox\"\n  data-vibe=\"Combobox\"\n  id=\"\"\n>\n  <div\n    className=\"comboboxList\"\n    style={\n      {\n        \"maxHeight\": undefined,\n      }\n    }\n  >\n    <div\n      className=\"wrapper medium searchWrapper comboboxSearchWrapper\"\n      role=\"search\"\n    >\n      <svg\n        aria-hidden={true}\n        className=\"icon icon\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"20px\"\n        viewBox=\"0 0 20 20\"\n        width=\"20px\"\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M8.65191 2.37299C6.9706 2.37299 5.35814 3.04089 4.16927 4.22976C2.9804 5.41863 2.3125 7.03108 2.3125 8.7124C2.3125 10.3937 2.9804 12.0062 4.16927 13.195C5.35814 14.3839 6.9706 15.0518 8.65191 15.0518C10.0813 15.0518 11.4609 14.5691 12.5728 13.6939L16.4086 17.5303C16.7014 17.8232 17.1763 17.8232 17.4692 17.5303C17.7621 17.2375 17.7622 16.7626 17.4693 16.4697L13.6334 12.6333C14.5086 11.5214 14.9913 10.1418 14.9913 8.7124C14.9913 7.03108 14.3234 5.41863 13.1346 4.22976C11.9457 3.04089 10.3332 2.37299 8.65191 2.37299ZM12.091 12.1172C12.9878 11.2113 13.4913 9.98783 13.4913 8.7124C13.4913 7.42891 12.9815 6.19798 12.0739 5.29042C11.1663 4.38285 9.9354 3.87299 8.65191 3.87299C7.36842 3.87299 6.1375 4.38285 5.22993 5.29042C4.32237 6.19798 3.8125 7.42891 3.8125 8.7124C3.8125 9.99589 4.32237 11.2268 5.22993 12.1344C6.1375 13.0419 7.36842 13.5518 8.65191 13.5518C9.92736 13.5518 11.1509 13.0483 12.0568 12.1514C12.0623 12.1455 12.0679 12.1397 12.0737 12.134C12.0794 12.1283 12.0851 12.1227 12.091 12.1172Z\"\n          fill=\"currentColor\"\n          fillRule=\"evenodd\"\n        />\n      </svg>\n      <input\n        aria-busy={false}\n        aria-expanded={false}\n        aria-haspopup=\"listbox\"\n        aria-label=\"Search for content\"\n        autoComplete=\"off\"\n        autoFocus={true}\n        className=\"input search\"\n        data-testid=\"search_combobox-search\"\n        data-vibe=\"Search\"\n        disabled={false}\n        id=\"combobox-search\"\n        onChange={[Function]}\n        placeholder=\"\"\n        role=\"combobox\"\n        type=\"search\"\n        value=\"\"\n      />\n      \n    </div>\n  </div>\n</div>\n`;\n\nexports[`Combobox renders correctly > with className 1`] = `\n<div\n  className=\"typography primary start text text2Normal combobox test sizeMedium empty\"\n  data-testid=\"combobox\"\n  data-vibe=\"Combobox\"\n  id=\"\"\n>\n  <div\n    className=\"comboboxList\"\n    style={\n      {\n        \"maxHeight\": undefined,\n      }\n    }\n  >\n    <div\n      className=\"wrapper medium searchWrapper comboboxSearchWrapper\"\n      role=\"search\"\n    >\n      <svg\n        aria-hidden={true}\n        className=\"icon icon\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"20px\"\n        viewBox=\"0 0 20 20\"\n        width=\"20px\"\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M8.65191 2.37299C6.9706 2.37299 5.35814 3.04089 4.16927 4.22976C2.9804 5.41863 2.3125 7.03108 2.3125 8.7124C2.3125 10.3937 2.9804 12.0062 4.16927 13.195C5.35814 14.3839 6.9706 15.0518 8.65191 15.0518C10.0813 15.0518 11.4609 14.5691 12.5728 13.6939L16.4086 17.5303C16.7014 17.8232 17.1763 17.8232 17.4692 17.5303C17.7621 17.2375 17.7622 16.7626 17.4693 16.4697L13.6334 12.6333C14.5086 11.5214 14.9913 10.1418 14.9913 8.7124C14.9913 7.03108 14.3234 5.41863 13.1346 4.22976C11.9457 3.04089 10.3332 2.37299 8.65191 2.37299ZM12.091 12.1172C12.9878 11.2113 13.4913 9.98783 13.4913 8.7124C13.4913 7.42891 12.9815 6.19798 12.0739 5.29042C11.1663 4.38285 9.9354 3.87299 8.65191 3.87299C7.36842 3.87299 6.1375 4.38285 5.22993 5.29042C4.32237 6.19798 3.8125 7.42891 3.8125 8.7124C3.8125 9.99589 4.32237 11.2268 5.22993 12.1344C6.1375 13.0419 7.36842 13.5518 8.65191 13.5518C9.92736 13.5518 11.1509 13.0483 12.0568 12.1514C12.0623 12.1455 12.0679 12.1397 12.0737 12.134C12.0794 12.1283 12.0851 12.1227 12.091 12.1172Z\"\n          fill=\"currentColor\"\n          fillRule=\"evenodd\"\n        />\n      </svg>\n      <input\n        aria-busy={false}\n        aria-expanded={false}\n        aria-haspopup=\"listbox\"\n        aria-label=\"Search for content\"\n        autoComplete=\"off\"\n        autoFocus={false}\n        className=\"input search\"\n        data-testid=\"search_combobox-search\"\n        data-vibe=\"Search\"\n        disabled={false}\n        id=\"combobox-search\"\n        onChange={[Function]}\n        placeholder=\"\"\n        role=\"combobox\"\n        type=\"search\"\n        value=\"\"\n      />\n      \n    </div>\n  </div>\n</div>\n`;\n\nexports[`Combobox renders correctly > with custom search icon 1`] = `\n<div\n  className=\"typography primary start text text2Normal combobox sizeMedium empty\"\n  data-testid=\"combobox\"\n  data-vibe=\"Combobox\"\n  id=\"\"\n>\n  <div\n    className=\"comboboxList\"\n    style={\n      {\n        \"maxHeight\": undefined,\n      }\n    }\n  >\n    <div\n      className=\"wrapper medium searchWrapper comboboxSearchWrapper\"\n      role=\"search\"\n    >\n      <svg\n        aria-hidden={true}\n        className=\"icon icon\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"20px\"\n        viewBox=\"0 0 20 20\"\n        width=\"20px\"\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M3.66646 3H14.346C14.7681 3.00122 15.1821 3.15768 15.4953 3.4498C15.8103 3.74354 15.9985 4.15312 16 4.59258L16 4.59507L16 9.92688C16 10.3411 15.6642 10.6769 15.25 10.6769C14.8358 10.6769 14.5 10.3411 14.5 9.92688V8.07327H3.50583V14.2135C3.50583 14.2135 3.50899 14.2193 3.51509 14.225C3.52968 14.2386 3.55999 14.2545 3.60162 14.2545H10.1946C10.6088 14.2545 10.9446 14.5903 10.9446 15.0045C10.9446 15.4187 10.6088 15.7545 10.1946 15.7545H3.60162C3.19461 15.7545 2.79466 15.6042 2.49203 15.3219C2.18762 15.038 2.00583 14.6413 2.00583 14.2157V4.5968C2.00728 4.15622 2.19603 3.74556 2.51184 3.45103C2.82591 3.15812 3.24105 3.00122 3.66431 3L3.66646 3ZM3.50583 6.57327H14.5V4.59715C14.4999 4.58857 14.4964 4.56932 14.4722 4.54677C14.446 4.52232 14.4002 4.50034 14.3424 4.5H3.66791C3.60893 4.50035 3.56195 4.52277 3.5349 4.548C3.50987 4.57134 3.50597 4.59165 3.50583 4.60131V6.57327ZM15.7115 12.75C15.7115 12.3358 15.3757 12 14.9615 12C14.5473 12 14.2115 12.3358 14.2115 12.75V14.2115H12.75C12.3358 14.2115 12 14.5473 12 14.9615C12 15.3757 12.3358 15.7115 12.75 15.7115H14.2115V17.173C14.2115 17.5872 14.5473 17.923 14.9615 17.923C15.3757 17.923 15.7115 17.5872 15.7115 17.173V15.7115H17.173C17.5872 15.7115 17.923 15.3757 17.923 14.9615C17.923 14.5473 17.5872 14.2115 17.173 14.2115H15.7115V12.75Z\"\n          fill=\"currentColor\"\n          fillRule=\"evenodd\"\n        />\n      </svg>\n      <input\n        aria-busy={false}\n        aria-expanded={false}\n        aria-haspopup=\"listbox\"\n        aria-label=\"Search for content\"\n        autoComplete=\"off\"\n        autoFocus={false}\n        className=\"input search\"\n        data-testid=\"search_combobox-search\"\n        data-vibe=\"Search\"\n        disabled={false}\n        id=\"combobox-search\"\n        onChange={[Function]}\n        placeholder=\"\"\n        role=\"combobox\"\n        type=\"search\"\n        value=\"\"\n      />\n      \n    </div>\n  </div>\n</div>\n`;\n\nexports[`Combobox renders correctly > with divider 1`] = `\n<div\n  className=\"typography primary start text text2Normal combobox sizeMedium\"\n  data-testid=\"combobox\"\n  data-vibe=\"Combobox\"\n  id=\"\"\n>\n  <div\n    className=\"comboboxList\"\n    style={\n      {\n        \"maxHeight\": undefined,\n      }\n    }\n  >\n    <div\n      className=\"wrapper medium searchWrapper comboboxSearchWrapper\"\n      role=\"search\"\n    >\n      <svg\n        aria-hidden={true}\n        className=\"icon icon\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"20px\"\n        viewBox=\"0 0 20 20\"\n        width=\"20px\"\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M8.65191 2.37299C6.9706 2.37299 5.35814 3.04089 4.16927 4.22976C2.9804 5.41863 2.3125 7.03108 2.3125 8.7124C2.3125 10.3937 2.9804 12.0062 4.16927 13.195C5.35814 14.3839 6.9706 15.0518 8.65191 15.0518C10.0813 15.0518 11.4609 14.5691 12.5728 13.6939L16.4086 17.5303C16.7014 17.8232 17.1763 17.8232 17.4692 17.5303C17.7621 17.2375 17.7622 16.7626 17.4693 16.4697L13.6334 12.6333C14.5086 11.5214 14.9913 10.1418 14.9913 8.7124C14.9913 7.03108 14.3234 5.41863 13.1346 4.22976C11.9457 3.04089 10.3332 2.37299 8.65191 2.37299ZM12.091 12.1172C12.9878 11.2113 13.4913 9.98783 13.4913 8.7124C13.4913 7.42891 12.9815 6.19798 12.0739 5.29042C11.1663 4.38285 9.9354 3.87299 8.65191 3.87299C7.36842 3.87299 6.1375 4.38285 5.22993 5.29042C4.32237 6.19798 3.8125 7.42891 3.8125 8.7124C3.8125 9.99589 4.32237 11.2268 5.22993 12.1344C6.1375 13.0419 7.36842 13.5518 8.65191 13.5518C9.92736 13.5518 11.1509 13.0483 12.0568 12.1514C12.0623 12.1455 12.0679 12.1397 12.0737 12.134C12.0794 12.1283 12.0851 12.1227 12.091 12.1172Z\"\n          fill=\"currentColor\"\n          fillRule=\"evenodd\"\n        />\n      </svg>\n      <input\n        aria-busy={false}\n        aria-controls=\"combobox-listbox\"\n        aria-expanded={true}\n        aria-haspopup=\"listbox\"\n        aria-label=\"Search for content\"\n        autoComplete=\"off\"\n        autoFocus={false}\n        className=\"input search\"\n        data-testid=\"search_combobox-search\"\n        data-vibe=\"Search\"\n        disabled={false}\n        id=\"combobox-search\"\n        onChange={[Function]}\n        placeholder=\"\"\n        role=\"combobox\"\n        type=\"search\"\n        value=\"\"\n      />\n      \n    </div>\n    <div\n      className=\"scrollableContainer optionsContainer\"\n      id=\"combobox-listbox\"\n      role=\"listbox\"\n    >\n      <div\n        className=\"comboboxItemContainer\"\n      >\n        <div\n          aria-label=\"cat1\"\n          aria-level={1}\n          className=\"comboboxCategory comboboxCategory categoryWithOptions firstCategory\"\n          id=\"combobox-category-cat1\"\n          role=\"row\"\n        >\n          cat1\n        </div>\n      </div>\n      <div\n        className=\"comboboxItemContainer\"\n      >\n        <div\n          aria-label=\"Option 1\"\n          aria-level={1}\n          aria-selected={false}\n          className=\"comboboxOption\"\n          data-testid=\"combobox-option_0\"\n          id=\"combobox-item-1\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          style={\n            {\n              \"height\": 32,\n            }\n          }\n        >\n          <div\n            className=\"optionLabel\"\n          >\n            Option 1\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"comboboxItemContainer\"\n      >\n        <div\n          className=\"dividerContainer\"\n          style={\n            {\n              \"height\": 17,\n            }\n          }\n        >\n          <div\n            className=\"divider divider horizontal\"\n            data-testid=\"divider\"\n            data-vibe=\"Divider\"\n          />\n        </div>\n      </div>\n      <div\n        className=\"comboboxItemContainer\"\n      >\n        <div\n          aria-label=\"cat2\"\n          aria-level={1}\n          className=\"comboboxCategory comboboxCategory categoryWithOptions\"\n          id=\"combobox-category-cat2\"\n          role=\"row\"\n        >\n          cat2\n        </div>\n      </div>\n      <div\n        className=\"comboboxItemContainer\"\n      >\n        <div\n          aria-label=\"Option 2\"\n          aria-level={1}\n          aria-selected={false}\n          className=\"comboboxOption\"\n          data-testid=\"combobox-option_1\"\n          id=\"combobox-item-2\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          style={\n            {\n              \"height\": 32,\n            }\n          }\n        >\n          <div\n            className=\"optionLabel\"\n          >\n            Option 2\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Combobox renders correctly > with divider and colored categories 1`] = `\n<div\n  className=\"typography primary start text text2Normal combobox sizeMedium\"\n  data-testid=\"combobox\"\n  data-vibe=\"Combobox\"\n  id=\"\"\n>\n  <div\n    className=\"comboboxList\"\n    style={\n      {\n        \"maxHeight\": undefined,\n      }\n    }\n  >\n    <div\n      className=\"wrapper medium searchWrapper comboboxSearchWrapper\"\n      role=\"search\"\n    >\n      <svg\n        aria-hidden={true}\n        className=\"icon icon\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"20px\"\n        viewBox=\"0 0 20 20\"\n        width=\"20px\"\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M8.65191 2.37299C6.9706 2.37299 5.35814 3.04089 4.16927 4.22976C2.9804 5.41863 2.3125 7.03108 2.3125 8.7124C2.3125 10.3937 2.9804 12.0062 4.16927 13.195C5.35814 14.3839 6.9706 15.0518 8.65191 15.0518C10.0813 15.0518 11.4609 14.5691 12.5728 13.6939L16.4086 17.5303C16.7014 17.8232 17.1763 17.8232 17.4692 17.5303C17.7621 17.2375 17.7622 16.7626 17.4693 16.4697L13.6334 12.6333C14.5086 11.5214 14.9913 10.1418 14.9913 8.7124C14.9913 7.03108 14.3234 5.41863 13.1346 4.22976C11.9457 3.04089 10.3332 2.37299 8.65191 2.37299ZM12.091 12.1172C12.9878 11.2113 13.4913 9.98783 13.4913 8.7124C13.4913 7.42891 12.9815 6.19798 12.0739 5.29042C11.1663 4.38285 9.9354 3.87299 8.65191 3.87299C7.36842 3.87299 6.1375 4.38285 5.22993 5.29042C4.32237 6.19798 3.8125 7.42891 3.8125 8.7124C3.8125 9.99589 4.32237 11.2268 5.22993 12.1344C6.1375 13.0419 7.36842 13.5518 8.65191 13.5518C9.92736 13.5518 11.1509 13.0483 12.0568 12.1514C12.0623 12.1455 12.0679 12.1397 12.0737 12.134C12.0794 12.1283 12.0851 12.1227 12.091 12.1172Z\"\n          fill=\"currentColor\"\n          fillRule=\"evenodd\"\n        />\n      </svg>\n      <input\n        aria-busy={false}\n        aria-controls=\"combobox-listbox\"\n        aria-expanded={true}\n        aria-haspopup=\"listbox\"\n        aria-label=\"Search for content\"\n        autoComplete=\"off\"\n        autoFocus={false}\n        className=\"input search\"\n        data-testid=\"search_combobox-search\"\n        data-vibe=\"Search\"\n        disabled={false}\n        id=\"combobox-search\"\n        onChange={[Function]}\n        placeholder=\"\"\n        role=\"combobox\"\n        type=\"search\"\n        value=\"\"\n      />\n      \n    </div>\n    <div\n      className=\"scrollableContainer optionsContainer\"\n      id=\"combobox-listbox\"\n      role=\"listbox\"\n    >\n      <div\n        className=\"comboboxItemContainer\"\n      >\n        <div\n          aria-label=\"cat1\"\n          aria-level={1}\n          className=\"comboboxCategory comboboxCategory categoryWithOptions firstCategory\"\n          id=\"combobox-category-cat1\"\n          role=\"row\"\n          style={\n            {\n              \"color\": \"red\",\n            }\n          }\n        >\n          cat1\n        </div>\n      </div>\n      <div\n        className=\"comboboxItemContainer\"\n      >\n        <div\n          aria-label=\"Option 1\"\n          aria-level={1}\n          aria-selected={false}\n          className=\"comboboxOption\"\n          data-testid=\"combobox-option_0\"\n          id=\"combobox-item-1\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          style={\n            {\n              \"height\": 32,\n            }\n          }\n        >\n          <div\n            className=\"optionLabel\"\n          >\n            Option 1\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"comboboxItemContainer\"\n      >\n        <div\n          className=\"dividerContainer\"\n          style={\n            {\n              \"height\": 17,\n            }\n          }\n        >\n          <div\n            className=\"divider divider horizontal\"\n            data-testid=\"divider\"\n            data-vibe=\"Divider\"\n          />\n        </div>\n      </div>\n      <div\n        className=\"comboboxItemContainer\"\n      >\n        <div\n          aria-label=\"cat2\"\n          aria-level={1}\n          className=\"comboboxCategory comboboxCategory categoryWithOptions\"\n          id=\"combobox-category-cat2\"\n          role=\"row\"\n          style={\n            {\n              \"color\": \"blue\",\n            }\n          }\n        >\n          cat2\n        </div>\n      </div>\n      <div\n        className=\"comboboxItemContainer\"\n      >\n        <div\n          aria-label=\"Option 2\"\n          aria-level={1}\n          aria-selected={false}\n          className=\"comboboxOption\"\n          data-testid=\"combobox-option_1\"\n          id=\"combobox-item-2\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          style={\n            {\n              \"height\": 32,\n            }\n          }\n        >\n          <div\n            className=\"optionLabel\"\n          >\n            Option 2\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Combobox renders correctly > with empty props 1`] = `\n<div\n  className=\"typography primary start text text2Normal combobox sizeMedium empty\"\n  data-testid=\"combobox\"\n  data-vibe=\"Combobox\"\n  id=\"\"\n>\n  <div\n    className=\"comboboxList\"\n    style={\n      {\n        \"maxHeight\": undefined,\n      }\n    }\n  >\n    <div\n      className=\"wrapper medium searchWrapper comboboxSearchWrapper\"\n      role=\"search\"\n    >\n      <svg\n        aria-hidden={true}\n        className=\"icon icon\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"20px\"\n        viewBox=\"0 0 20 20\"\n        width=\"20px\"\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M8.65191 2.37299C6.9706 2.37299 5.35814 3.04089 4.16927 4.22976C2.9804 5.41863 2.3125 7.03108 2.3125 8.7124C2.3125 10.3937 2.9804 12.0062 4.16927 13.195C5.35814 14.3839 6.9706 15.0518 8.65191 15.0518C10.0813 15.0518 11.4609 14.5691 12.5728 13.6939L16.4086 17.5303C16.7014 17.8232 17.1763 17.8232 17.4692 17.5303C17.7621 17.2375 17.7622 16.7626 17.4693 16.4697L13.6334 12.6333C14.5086 11.5214 14.9913 10.1418 14.9913 8.7124C14.9913 7.03108 14.3234 5.41863 13.1346 4.22976C11.9457 3.04089 10.3332 2.37299 8.65191 2.37299ZM12.091 12.1172C12.9878 11.2113 13.4913 9.98783 13.4913 8.7124C13.4913 7.42891 12.9815 6.19798 12.0739 5.29042C11.1663 4.38285 9.9354 3.87299 8.65191 3.87299C7.36842 3.87299 6.1375 4.38285 5.22993 5.29042C4.32237 6.19798 3.8125 7.42891 3.8125 8.7124C3.8125 9.99589 4.32237 11.2268 5.22993 12.1344C6.1375 13.0419 7.36842 13.5518 8.65191 13.5518C9.92736 13.5518 11.1509 13.0483 12.0568 12.1514C12.0623 12.1455 12.0679 12.1397 12.0737 12.134C12.0794 12.1283 12.0851 12.1227 12.091 12.1172Z\"\n          fill=\"currentColor\"\n          fillRule=\"evenodd\"\n        />\n      </svg>\n      <input\n        aria-busy={false}\n        aria-expanded={false}\n        aria-haspopup=\"listbox\"\n        aria-label=\"Search for content\"\n        autoComplete=\"off\"\n        autoFocus={false}\n        className=\"input search\"\n        data-testid=\"search_combobox-search\"\n        data-vibe=\"Search\"\n        disabled={false}\n        id=\"combobox-search\"\n        onChange={[Function]}\n        placeholder=\"\"\n        role=\"combobox\"\n        type=\"search\"\n        value=\"\"\n      />\n      \n    </div>\n  </div>\n</div>\n`;\n\nexports[`Combobox renders correctly > with id 1`] = `\n<div\n  className=\"typography primary start text text2Normal combobox sizeMedium empty\"\n  data-testid=\"combobox_test\"\n  data-vibe=\"Combobox\"\n  id=\"test\"\n>\n  <div\n    className=\"comboboxList\"\n    style={\n      {\n        \"maxHeight\": undefined,\n      }\n    }\n  >\n    <div\n      className=\"wrapper medium searchWrapper comboboxSearchWrapper\"\n      role=\"search\"\n    >\n      <svg\n        aria-hidden={true}\n        className=\"icon icon\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"20px\"\n        viewBox=\"0 0 20 20\"\n        width=\"20px\"\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M8.65191 2.37299C6.9706 2.37299 5.35814 3.04089 4.16927 4.22976C2.9804 5.41863 2.3125 7.03108 2.3125 8.7124C2.3125 10.3937 2.9804 12.0062 4.16927 13.195C5.35814 14.3839 6.9706 15.0518 8.65191 15.0518C10.0813 15.0518 11.4609 14.5691 12.5728 13.6939L16.4086 17.5303C16.7014 17.8232 17.1763 17.8232 17.4692 17.5303C17.7621 17.2375 17.7622 16.7626 17.4693 16.4697L13.6334 12.6333C14.5086 11.5214 14.9913 10.1418 14.9913 8.7124C14.9913 7.03108 14.3234 5.41863 13.1346 4.22976C11.9457 3.04089 10.3332 2.37299 8.65191 2.37299ZM12.091 12.1172C12.9878 11.2113 13.4913 9.98783 13.4913 8.7124C13.4913 7.42891 12.9815 6.19798 12.0739 5.29042C11.1663 4.38285 9.9354 3.87299 8.65191 3.87299C7.36842 3.87299 6.1375 4.38285 5.22993 5.29042C4.32237 6.19798 3.8125 7.42891 3.8125 8.7124C3.8125 9.99589 4.32237 11.2268 5.22993 12.1344C6.1375 13.0419 7.36842 13.5518 8.65191 13.5518C9.92736 13.5518 11.1509 13.0483 12.0568 12.1514C12.0623 12.1455 12.0679 12.1397 12.0737 12.134C12.0794 12.1283 12.0851 12.1227 12.091 12.1172Z\"\n          fill=\"currentColor\"\n          fillRule=\"evenodd\"\n        />\n      </svg>\n      <input\n        aria-busy={false}\n        aria-expanded={false}\n        aria-haspopup=\"listbox\"\n        aria-label=\"Search for content\"\n        autoComplete=\"off\"\n        autoFocus={false}\n        className=\"input search\"\n        data-testid=\"search_combobox-search\"\n        data-vibe=\"Search\"\n        disabled={false}\n        id=\"combobox-search\"\n        onChange={[Function]}\n        placeholder=\"\"\n        role=\"combobox\"\n        type=\"search\"\n        value=\"\"\n      />\n      \n    </div>\n  </div>\n</div>\n`;\n\nexports[`Combobox renders correctly > with loading 1`] = `\n<div\n  className=\"typography primary start text text2Normal combobox sizeMedium empty\"\n  data-testid=\"combobox\"\n  data-vibe=\"Combobox\"\n  id=\"\"\n>\n  <div\n    className=\"comboboxList\"\n    style={\n      {\n        \"maxHeight\": undefined,\n      }\n    }\n  >\n    <div\n      className=\"wrapper medium searchWrapper comboboxSearchWrapper\"\n      role=\"search\"\n    >\n      <svg\n        aria-hidden={true}\n        className=\"icon icon\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"20px\"\n        viewBox=\"0 0 20 20\"\n        width=\"20px\"\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M8.65191 2.37299C6.9706 2.37299 5.35814 3.04089 4.16927 4.22976C2.9804 5.41863 2.3125 7.03108 2.3125 8.7124C2.3125 10.3937 2.9804 12.0062 4.16927 13.195C5.35814 14.3839 6.9706 15.0518 8.65191 15.0518C10.0813 15.0518 11.4609 14.5691 12.5728 13.6939L16.4086 17.5303C16.7014 17.8232 17.1763 17.8232 17.4692 17.5303C17.7621 17.2375 17.7622 16.7626 17.4693 16.4697L13.6334 12.6333C14.5086 11.5214 14.9913 10.1418 14.9913 8.7124C14.9913 7.03108 14.3234 5.41863 13.1346 4.22976C11.9457 3.04089 10.3332 2.37299 8.65191 2.37299ZM12.091 12.1172C12.9878 11.2113 13.4913 9.98783 13.4913 8.7124C13.4913 7.42891 12.9815 6.19798 12.0739 5.29042C11.1663 4.38285 9.9354 3.87299 8.65191 3.87299C7.36842 3.87299 6.1375 4.38285 5.22993 5.29042C4.32237 6.19798 3.8125 7.42891 3.8125 8.7124C3.8125 9.99589 4.32237 11.2268 5.22993 12.1344C6.1375 13.0419 7.36842 13.5518 8.65191 13.5518C9.92736 13.5518 11.1509 13.0483 12.0568 12.1514C12.0623 12.1455 12.0679 12.1397 12.0737 12.134C12.0794 12.1283 12.0851 12.1227 12.091 12.1172Z\"\n          fill=\"currentColor\"\n          fillRule=\"evenodd\"\n        />\n      </svg>\n      <input\n        aria-busy={true}\n        aria-expanded={false}\n        aria-haspopup=\"listbox\"\n        aria-label=\"Search for content\"\n        autoComplete=\"off\"\n        autoFocus={false}\n        className=\"input search\"\n        data-testid=\"search_combobox-search\"\n        data-vibe=\"Search\"\n        disabled={false}\n        id=\"combobox-search\"\n        onChange={[Function]}\n        placeholder=\"\"\n        role=\"combobox\"\n        type=\"search\"\n        value=\"\"\n      />\n      <div\n        className=\"loaderContainer loader\"\n        data-testid=\"loader\"\n        role=\"alert\"\n        style={\n          {\n            \"height\": 20,\n            \"width\": 20,\n          }\n        }\n        title=\"loading\"\n      >\n        <svg\n          aria-hidden={true}\n          className=\"circleLoaderSpinner\"\n          color=\"var(--secondary-text-color)\"\n          viewBox=\"0 0 50 50\"\n        >\n          <circle\n            className=\"circleLoaderSpinnerPath\"\n            cx=\"25\"\n            cy=\"25\"\n            fill=\"none\"\n            r=\"20\"\n            strokeWidth=\"5\"\n          />\n        </svg>\n      </div>\n      \n    </div>\n  </div>\n</div>\n`;\n\nexports[`Combobox renders correctly > with optionClassName 1`] = `\n<div\n  className=\"typography primary start text text2Normal combobox sizeMedium empty\"\n  data-testid=\"combobox\"\n  data-vibe=\"Combobox\"\n  id=\"\"\n>\n  <div\n    className=\"comboboxList\"\n    style={\n      {\n        \"maxHeight\": undefined,\n      }\n    }\n  >\n    <div\n      className=\"wrapper medium searchWrapper comboboxSearchWrapper\"\n      role=\"search\"\n    >\n      <svg\n        aria-hidden={true}\n        className=\"icon icon\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"20px\"\n        viewBox=\"0 0 20 20\"\n        width=\"20px\"\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M8.65191 2.37299C6.9706 2.37299 5.35814 3.04089 4.16927 4.22976C2.9804 5.41863 2.3125 7.03108 2.3125 8.7124C2.3125 10.3937 2.9804 12.0062 4.16927 13.195C5.35814 14.3839 6.9706 15.0518 8.65191 15.0518C10.0813 15.0518 11.4609 14.5691 12.5728 13.6939L16.4086 17.5303C16.7014 17.8232 17.1763 17.8232 17.4692 17.5303C17.7621 17.2375 17.7622 16.7626 17.4693 16.4697L13.6334 12.6333C14.5086 11.5214 14.9913 10.1418 14.9913 8.7124C14.9913 7.03108 14.3234 5.41863 13.1346 4.22976C11.9457 3.04089 10.3332 2.37299 8.65191 2.37299ZM12.091 12.1172C12.9878 11.2113 13.4913 9.98783 13.4913 8.7124C13.4913 7.42891 12.9815 6.19798 12.0739 5.29042C11.1663 4.38285 9.9354 3.87299 8.65191 3.87299C7.36842 3.87299 6.1375 4.38285 5.22993 5.29042C4.32237 6.19798 3.8125 7.42891 3.8125 8.7124C3.8125 9.99589 4.32237 11.2268 5.22993 12.1344C6.1375 13.0419 7.36842 13.5518 8.65191 13.5518C9.92736 13.5518 11.1509 13.0483 12.0568 12.1514C12.0623 12.1455 12.0679 12.1397 12.0737 12.134C12.0794 12.1283 12.0851 12.1227 12.091 12.1172Z\"\n          fill=\"currentColor\"\n          fillRule=\"evenodd\"\n        />\n      </svg>\n      <input\n        aria-busy={false}\n        aria-expanded={false}\n        aria-haspopup=\"listbox\"\n        aria-label=\"Search for content\"\n        autoComplete=\"off\"\n        autoFocus={false}\n        className=\"input search\"\n        data-testid=\"search_combobox-search\"\n        data-vibe=\"Search\"\n        disabled={false}\n        id=\"combobox-search\"\n        onChange={[Function]}\n        placeholder=\"\"\n        role=\"combobox\"\n        type=\"search\"\n        value=\"\"\n      />\n      \n    </div>\n  </div>\n</div>\n`;\n\nexports[`Combobox renders correctly > with optionLineHeight 1`] = `\n<div\n  className=\"typography primary start text text2Normal combobox sizeMedium empty\"\n  data-testid=\"combobox\"\n  data-vibe=\"Combobox\"\n  id=\"\"\n>\n  <div\n    className=\"comboboxList\"\n    style={\n      {\n        \"maxHeight\": undefined,\n      }\n    }\n  >\n    <div\n      className=\"wrapper medium searchWrapper comboboxSearchWrapper\"\n      role=\"search\"\n    >\n      <svg\n        aria-hidden={true}\n        className=\"icon icon\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"20px\"\n        viewBox=\"0 0 20 20\"\n        width=\"20px\"\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M8.65191 2.37299C6.9706 2.37299 5.35814 3.04089 4.16927 4.22976C2.9804 5.41863 2.3125 7.03108 2.3125 8.7124C2.3125 10.3937 2.9804 12.0062 4.16927 13.195C5.35814 14.3839 6.9706 15.0518 8.65191 15.0518C10.0813 15.0518 11.4609 14.5691 12.5728 13.6939L16.4086 17.5303C16.7014 17.8232 17.1763 17.8232 17.4692 17.5303C17.7621 17.2375 17.7622 16.7626 17.4693 16.4697L13.6334 12.6333C14.5086 11.5214 14.9913 10.1418 14.9913 8.7124C14.9913 7.03108 14.3234 5.41863 13.1346 4.22976C11.9457 3.04089 10.3332 2.37299 8.65191 2.37299ZM12.091 12.1172C12.9878 11.2113 13.4913 9.98783 13.4913 8.7124C13.4913 7.42891 12.9815 6.19798 12.0739 5.29042C11.1663 4.38285 9.9354 3.87299 8.65191 3.87299C7.36842 3.87299 6.1375 4.38285 5.22993 5.29042C4.32237 6.19798 3.8125 7.42891 3.8125 8.7124C3.8125 9.99589 4.32237 11.2268 5.22993 12.1344C6.1375 13.0419 7.36842 13.5518 8.65191 13.5518C9.92736 13.5518 11.1509 13.0483 12.0568 12.1514C12.0623 12.1455 12.0679 12.1397 12.0737 12.134C12.0794 12.1283 12.0851 12.1227 12.091 12.1172Z\"\n          fill=\"currentColor\"\n          fillRule=\"evenodd\"\n        />\n      </svg>\n      <input\n        aria-busy={false}\n        aria-expanded={false}\n        aria-haspopup=\"listbox\"\n        aria-label=\"Search for content\"\n        autoComplete=\"off\"\n        autoFocus={false}\n        className=\"input search\"\n        data-testid=\"search_combobox-search\"\n        data-vibe=\"Search\"\n        disabled={false}\n        id=\"combobox-search\"\n        onChange={[Function]}\n        placeholder=\"\"\n        role=\"combobox\"\n        type=\"search\"\n        value=\"\"\n      />\n      \n    </div>\n  </div>\n</div>\n`;\n\nexports[`Combobox renders correctly > with optionRenderer 1`] = `\n<div\n  className=\"typography primary start text text2Normal combobox sizeMedium\"\n  data-testid=\"combobox\"\n  data-vibe=\"Combobox\"\n  id=\"\"\n>\n  <div\n    className=\"comboboxList\"\n    style={\n      {\n        \"maxHeight\": undefined,\n      }\n    }\n  >\n    <div\n      className=\"wrapper medium searchWrapper comboboxSearchWrapper\"\n      role=\"search\"\n    >\n      <svg\n        aria-hidden={true}\n        className=\"icon icon\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"20px\"\n        viewBox=\"0 0 20 20\"\n        width=\"20px\"\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M8.65191 2.37299C6.9706 2.37299 5.35814 3.04089 4.16927 4.22976C2.9804 5.41863 2.3125 7.03108 2.3125 8.7124C2.3125 10.3937 2.9804 12.0062 4.16927 13.195C5.35814 14.3839 6.9706 15.0518 8.65191 15.0518C10.0813 15.0518 11.4609 14.5691 12.5728 13.6939L16.4086 17.5303C16.7014 17.8232 17.1763 17.8232 17.4692 17.5303C17.7621 17.2375 17.7622 16.7626 17.4693 16.4697L13.6334 12.6333C14.5086 11.5214 14.9913 10.1418 14.9913 8.7124C14.9913 7.03108 14.3234 5.41863 13.1346 4.22976C11.9457 3.04089 10.3332 2.37299 8.65191 2.37299ZM12.091 12.1172C12.9878 11.2113 13.4913 9.98783 13.4913 8.7124C13.4913 7.42891 12.9815 6.19798 12.0739 5.29042C11.1663 4.38285 9.9354 3.87299 8.65191 3.87299C7.36842 3.87299 6.1375 4.38285 5.22993 5.29042C4.32237 6.19798 3.8125 7.42891 3.8125 8.7124C3.8125 9.99589 4.32237 11.2268 5.22993 12.1344C6.1375 13.0419 7.36842 13.5518 8.65191 13.5518C9.92736 13.5518 11.1509 13.0483 12.0568 12.1514C12.0623 12.1455 12.0679 12.1397 12.0737 12.134C12.0794 12.1283 12.0851 12.1227 12.091 12.1172Z\"\n          fill=\"currentColor\"\n          fillRule=\"evenodd\"\n        />\n      </svg>\n      <input\n        aria-busy={false}\n        aria-controls=\"combobox-listbox\"\n        aria-expanded={true}\n        aria-haspopup=\"listbox\"\n        aria-label=\"Search for content\"\n        autoComplete=\"off\"\n        autoFocus={false}\n        className=\"input search\"\n        data-testid=\"search_combobox-search\"\n        data-vibe=\"Search\"\n        disabled={false}\n        id=\"combobox-search\"\n        onChange={[Function]}\n        placeholder=\"\"\n        role=\"combobox\"\n        type=\"search\"\n        value=\"\"\n      />\n      \n    </div>\n    <div\n      className=\"scrollableContainer optionsContainer\"\n      id=\"combobox-listbox\"\n      role=\"listbox\"\n    >\n      <div\n        className=\"comboboxItemContainer\"\n      >\n        <div\n          aria-label=\"Option 1\"\n          aria-level={1}\n          aria-selected={false}\n          className=\"comboboxOption\"\n          data-testid=\"combobox-option_0\"\n          id=\"combobox-item-1\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          style={\n            {\n              \"height\": 32,\n            }\n          }\n        >\n          <div>\n            some render of \n            Option 1\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"comboboxItemContainer\"\n      >\n        <div\n          aria-label=\"Option 2\"\n          aria-level={1}\n          aria-selected={false}\n          className=\"comboboxOption\"\n          data-testid=\"combobox-option_1\"\n          id=\"combobox-item-2\"\n          onClick={[Function]}\n          onKeyDown={[Function]}\n          onMouseEnter={[Function]}\n          onMouseLeave={[Function]}\n          style={\n            {\n              \"height\": 32,\n            }\n          }\n        >\n          <div>\n            some render of \n            Option 2\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Combobox renders correctly > with optionsListHeight 1`] = `\n<div\n  className=\"typography primary start text text2Normal combobox sizeMedium empty\"\n  data-testid=\"combobox\"\n  data-vibe=\"Combobox\"\n  id=\"\"\n>\n  <div\n    className=\"comboboxList\"\n    style={\n      {\n        \"maxHeight\": 50,\n      }\n    }\n  >\n    <div\n      className=\"wrapper medium searchWrapper comboboxSearchWrapper\"\n      role=\"search\"\n    >\n      <svg\n        aria-hidden={true}\n        className=\"icon icon\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"20px\"\n        viewBox=\"0 0 20 20\"\n        width=\"20px\"\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M8.65191 2.37299C6.9706 2.37299 5.35814 3.04089 4.16927 4.22976C2.9804 5.41863 2.3125 7.03108 2.3125 8.7124C2.3125 10.3937 2.9804 12.0062 4.16927 13.195C5.35814 14.3839 6.9706 15.0518 8.65191 15.0518C10.0813 15.0518 11.4609 14.5691 12.5728 13.6939L16.4086 17.5303C16.7014 17.8232 17.1763 17.8232 17.4692 17.5303C17.7621 17.2375 17.7622 16.7626 17.4693 16.4697L13.6334 12.6333C14.5086 11.5214 14.9913 10.1418 14.9913 8.7124C14.9913 7.03108 14.3234 5.41863 13.1346 4.22976C11.9457 3.04089 10.3332 2.37299 8.65191 2.37299ZM12.091 12.1172C12.9878 11.2113 13.4913 9.98783 13.4913 8.7124C13.4913 7.42891 12.9815 6.19798 12.0739 5.29042C11.1663 4.38285 9.9354 3.87299 8.65191 3.87299C7.36842 3.87299 6.1375 4.38285 5.22993 5.29042C4.32237 6.19798 3.8125 7.42891 3.8125 8.7124C3.8125 9.99589 4.32237 11.2268 5.22993 12.1344C6.1375 13.0419 7.36842 13.5518 8.65191 13.5518C9.92736 13.5518 11.1509 13.0483 12.0568 12.1514C12.0623 12.1455 12.0679 12.1397 12.0737 12.134C12.0794 12.1283 12.0851 12.1227 12.091 12.1172Z\"\n          fill=\"currentColor\"\n          fillRule=\"evenodd\"\n        />\n      </svg>\n      <input\n        aria-busy={false}\n        aria-expanded={false}\n        aria-haspopup=\"listbox\"\n        aria-label=\"Search for content\"\n        autoComplete=\"off\"\n        autoFocus={false}\n        className=\"input search\"\n        data-testid=\"search_combobox-search\"\n        data-vibe=\"Search\"\n        disabled={false}\n        id=\"combobox-search\"\n        onChange={[Function]}\n        placeholder=\"\"\n        role=\"combobox\"\n        type=\"search\"\n        value=\"\"\n      />\n      \n    </div>\n  </div>\n</div>\n`;\n\nexports[`Combobox renders correctly > with placeholder 1`] = `\n<div\n  className=\"typography primary start text text2Normal combobox sizeMedium empty\"\n  data-testid=\"combobox\"\n  data-vibe=\"Combobox\"\n  id=\"\"\n>\n  <div\n    className=\"comboboxList\"\n    style={\n      {\n        \"maxHeight\": undefined,\n      }\n    }\n  >\n    <div\n      className=\"wrapper medium searchWrapper comboboxSearchWrapper\"\n      role=\"search\"\n    >\n      <svg\n        aria-hidden={true}\n        className=\"icon icon\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"20px\"\n        viewBox=\"0 0 20 20\"\n        width=\"20px\"\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M8.65191 2.37299C6.9706 2.37299 5.35814 3.04089 4.16927 4.22976C2.9804 5.41863 2.3125 7.03108 2.3125 8.7124C2.3125 10.3937 2.9804 12.0062 4.16927 13.195C5.35814 14.3839 6.9706 15.0518 8.65191 15.0518C10.0813 15.0518 11.4609 14.5691 12.5728 13.6939L16.4086 17.5303C16.7014 17.8232 17.1763 17.8232 17.4692 17.5303C17.7621 17.2375 17.7622 16.7626 17.4693 16.4697L13.6334 12.6333C14.5086 11.5214 14.9913 10.1418 14.9913 8.7124C14.9913 7.03108 14.3234 5.41863 13.1346 4.22976C11.9457 3.04089 10.3332 2.37299 8.65191 2.37299ZM12.091 12.1172C12.9878 11.2113 13.4913 9.98783 13.4913 8.7124C13.4913 7.42891 12.9815 6.19798 12.0739 5.29042C11.1663 4.38285 9.9354 3.87299 8.65191 3.87299C7.36842 3.87299 6.1375 4.38285 5.22993 5.29042C4.32237 6.19798 3.8125 7.42891 3.8125 8.7124C3.8125 9.99589 4.32237 11.2268 5.22993 12.1344C6.1375 13.0419 7.36842 13.5518 8.65191 13.5518C9.92736 13.5518 11.1509 13.0483 12.0568 12.1514C12.0623 12.1455 12.0679 12.1397 12.0737 12.134C12.0794 12.1283 12.0851 12.1227 12.091 12.1172Z\"\n          fill=\"currentColor\"\n          fillRule=\"evenodd\"\n        />\n      </svg>\n      <input\n        aria-busy={false}\n        aria-expanded={false}\n        aria-haspopup=\"listbox\"\n        aria-label=\"Search for content\"\n        autoComplete=\"off\"\n        autoFocus={false}\n        className=\"input search\"\n        data-testid=\"search_combobox-search\"\n        data-vibe=\"Search\"\n        disabled={false}\n        id=\"combobox-search\"\n        onChange={[Function]}\n        placeholder=\"placeholder\"\n        role=\"combobox\"\n        type=\"search\"\n        value=\"\"\n      />\n      \n    </div>\n  </div>\n</div>\n`;\n\nexports[`Combobox renders correctly > with size 1`] = `\n<div\n  className=\"typography primary start text text2Normal combobox sizeLarge empty\"\n  data-testid=\"combobox\"\n  data-vibe=\"Combobox\"\n  id=\"\"\n>\n  <div\n    className=\"comboboxList\"\n    style={\n      {\n        \"maxHeight\": undefined,\n      }\n    }\n  >\n    <div\n      className=\"wrapper large searchWrapper comboboxSearchWrapper\"\n      role=\"search\"\n    >\n      <svg\n        aria-hidden={true}\n        className=\"icon icon\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"20px\"\n        viewBox=\"0 0 20 20\"\n        width=\"20px\"\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M8.65191 2.37299C6.9706 2.37299 5.35814 3.04089 4.16927 4.22976C2.9804 5.41863 2.3125 7.03108 2.3125 8.7124C2.3125 10.3937 2.9804 12.0062 4.16927 13.195C5.35814 14.3839 6.9706 15.0518 8.65191 15.0518C10.0813 15.0518 11.4609 14.5691 12.5728 13.6939L16.4086 17.5303C16.7014 17.8232 17.1763 17.8232 17.4692 17.5303C17.7621 17.2375 17.7622 16.7626 17.4693 16.4697L13.6334 12.6333C14.5086 11.5214 14.9913 10.1418 14.9913 8.7124C14.9913 7.03108 14.3234 5.41863 13.1346 4.22976C11.9457 3.04089 10.3332 2.37299 8.65191 2.37299ZM12.091 12.1172C12.9878 11.2113 13.4913 9.98783 13.4913 8.7124C13.4913 7.42891 12.9815 6.19798 12.0739 5.29042C11.1663 4.38285 9.9354 3.87299 8.65191 3.87299C7.36842 3.87299 6.1375 4.38285 5.22993 5.29042C4.32237 6.19798 3.8125 7.42891 3.8125 8.7124C3.8125 9.99589 4.32237 11.2268 5.22993 12.1344C6.1375 13.0419 7.36842 13.5518 8.65191 13.5518C9.92736 13.5518 11.1509 13.0483 12.0568 12.1514C12.0623 12.1455 12.0679 12.1397 12.0737 12.134C12.0794 12.1283 12.0851 12.1227 12.091 12.1172Z\"\n          fill=\"currentColor\"\n          fillRule=\"evenodd\"\n        />\n      </svg>\n      <input\n        aria-busy={false}\n        aria-expanded={false}\n        aria-haspopup=\"listbox\"\n        aria-label=\"Search for content\"\n        autoComplete=\"off\"\n        autoFocus={false}\n        className=\"input search\"\n        data-testid=\"search_combobox-search\"\n        data-vibe=\"Search\"\n        disabled={false}\n        id=\"combobox-search\"\n        onChange={[Function]}\n        placeholder=\"\"\n        role=\"combobox\"\n        type=\"search\"\n        value=\"\"\n      />\n      \n    </div>\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Combobox/components/ComboboxCategory/ComboboxCategory.module.scss",
    "content": "@import \"../../../../styles/typography\";\n@import \"../../../../styles/states\";\n\n.comboboxCategory {\n  color: var(--placeholder-color);\n  display: flex;\n  align-items: center;\n  padding-top: var(--space-8);\n}\n"
  },
  {
    "path": "packages/core/src/components/Combobox/components/ComboboxCategory/ComboboxCategory.tsx",
    "content": "import cx from \"classnames\";\nimport React, { type FC } from \"react\";\nimport { type IComboboxCategory } from \"../ComboboxConstants\";\nimport styles from \"./ComboboxCategory.module.scss\";\nimport comboboxStyles from \"../../Combobox.module.scss\";\n\nexport interface ComboboxCategoryProps {\n  /**\n   * The category data.\n   */\n  category: IComboboxCategory;\n  /**\n   * Class name applied to the category element.\n   */\n  className: string;\n}\n\nconst ComboboxCategory: FC<ComboboxCategoryProps> = ({ category, className }) => {\n  const { label, id, \"aria-label\": ariaLabel, color } = category;\n\n  if (!label) return null;\n\n  return (\n    <div\n      key={id}\n      role=\"row\"\n      aria-level={1}\n      aria-label={ariaLabel || label}\n      id={`combobox-category-${id}`}\n      style={color && { color }}\n      className={cx(styles.comboboxCategory, comboboxStyles.comboboxCategory, className)}\n    >\n      {label}\n    </div>\n  );\n};\n\nexport default ComboboxCategory;\n"
  },
  {
    "path": "packages/core/src/components/Combobox/components/ComboboxConstants.ts",
    "content": "import type React from \"react\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport type { TooltipProps } from \"@vibe/tooltip\";\n\nexport const COMBOBOX_DIVIDER_ITEM = \"combobox-divider\";\nexport const COMBOBOX_CATEGORY_ITEM = \"combobox-category\";\nexport const COMBOBOX_OPTION_ITEM = \"combobox-option\";\nexport const COMBOBOX_LISTBOX_ID = \"combobox-listbox\";\n\n/**\n * @deprecated\n */\nexport enum ComboboxOptionIconType {\n  DEFAULT = \"default\",\n  RENDERER = \"renderer\"\n}\n\nexport interface IComboboxCategoryMap {\n  /**\n   * A mapping of category IDs to category details.\n   */\n  [key: string]: IComboboxCategory;\n}\n\nexport interface IComboboxCategory {\n  /**\n   * The display label of the category.\n   */\n  label: string;\n  /**\n   * The unique ID of the category.\n   */\n  id: string;\n  /**\n   * The ARIA label for accessibility.\n   */\n  \"aria-label\"?: string;\n  /**\n   * If true, the category is only shown when searching.\n   */\n  onlyShowOnSearch?: boolean;\n  /**\n   * The color associated with the category.\n   */\n  color?: string;\n}\n\nexport interface IComboboxOption {\n  /**\n   * The unique ID of the option.\n   */\n  id: string;\n  /**\n   * The ID of the category the option belongs to.\n   */\n  categoryId?: string;\n  /**\n   * The icon displayed on the left side.\n   */\n  leftIcon?: SubIcon | ((className: string) => JSX.Element);\n  /**\n   * The icon displayed on the right side.\n   */\n  rightIcon?: SubIcon | ((className: string) => JSX.Element);\n  /**\n   * The type of the left icon.\n   */\n  leftIconType?: ComboboxOptionIconType;\n  /**\n   * The type of the right icon.\n   */\n  rightIconType?: ComboboxOptionIconType;\n  /**\n   * The display label of the option.\n   */\n  label: string;\n  /**\n   * The size of the icons.\n   */\n  iconSize?: number;\n  /**\n   * If true, the option is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If true, the option is selected.\n   */\n  selected?: boolean;\n  /**\n   * The ARIA label for accessibility.\n   */\n  \"aria-label\"?: string;\n  /**\n   * If true, the option belongs to a category.\n   */\n  belongToCategory?: boolean;\n  /**\n   * The tooltip content displayed on hover.\n   */\n  tooltipContent?: string;\n  /**\n   * Props for the Tooltip component.\n   * The \"Omit\" is here on purpose to avoid the content prop, in case tooltipProps would be expanded in the future.\n   */\n  tooltipProps?: Pick<Omit<TooltipProps, \"content\">, \"position\">;\n}\n\nexport interface IComboboxItem {\n  /**\n   * The height of the item.\n   */\n  height?: number;\n  /**\n   * The type of the item.\n   */\n  type?: string;\n  /**\n   * The category details if the item is a category.\n   */\n  category?: IComboboxCategory;\n  /**\n   * The ID of the category the item belongs to.\n   */\n  categoryId?: string;\n  /**\n   * The unique ID of the item.\n   */\n  id?: string;\n  /**\n   * The index of the item in the list.\n   */\n  index?: number;\n  /**\n   * If true, a divider is displayed before this item.\n   */\n  withDivider?: boolean;\n  /**\n   * Class name applied to the item.\n   */\n  className?: string;\n  /**\n   * If true, the item belongs to a category.\n   */\n  belongToCategory?: boolean;\n  /**\n   * The option details if the item is an option.\n   */\n  option?: IComboboxOption;\n  /**\n   * Custom renderer for the option.\n   */\n  optionRenderer?: (option: IComboboxOption) => JSX.Element;\n  /**\n   * If true, the item is currently active.\n   */\n  isActive?: boolean;\n  /**\n   * The height of the option item.\n   */\n  optionLineHeight?: number;\n  /**\n   * If true, the selected item is automatically scrolled into view.\n   */\n  shouldScrollToSelectedItem?: boolean;\n}\n\nexport interface IComboboxOptionEvents {\n  /**\n   * Callback fired when an option is clicked.\n   */\n  onOptionClick: (\n    event: React.MouseEvent | React.KeyboardEvent,\n    index: number,\n    option: IComboboxOption,\n    mouseTriggered: boolean\n  ) => void;\n  /**\n   * Callback fired when the mouse leaves an option.\n   */\n  onOptionLeave: (event: React.MouseEvent, index: number, option: IComboboxOption, mouseTriggered: boolean) => void;\n  /**\n   * Callback fired when the mouse enters an option.\n   */\n  onOptionEnter: (event: React.MouseEvent, index: number, option: IComboboxOption, mouseTriggered: boolean) => void;\n  /**\n   * Callback fired when hovering over an option.\n   */\n  onOptionHover?: (event: React.MouseEvent, index: number, option: IComboboxOption, mouseTriggered: boolean) => void;\n}\n\nexport interface IOptionItemRendererArgs extends IComboboxOptionEvents {\n  /**\n   * The unique ID of the option item.\n   */\n  id?: string;\n  /**\n   * The index of the option item.\n   */\n  index?: number;\n  /**\n   * The option details.\n   */\n  option?: IComboboxOption;\n  /**\n   * Class name applied to the option item.\n   */\n  className?: string;\n  /**\n   * If true, the option is currently active.\n   */\n  isActive?: boolean;\n  /**\n   * If true, the option has visual focus.\n   */\n  visualFocus?: boolean;\n  /**\n   * A reference to the scroll container.\n   */\n  scrollRef?: React.MutableRefObject<HTMLElement>;\n  /**\n   * The amount of offset when scrolling to the active item.\n   */\n  scrollOffset?: number;\n  /**\n   * The height of the option item.\n   */\n  optionLineHeight?: number;\n  /**\n   * If true, the selected item is automatically scrolled into view.\n   */\n  shouldScrollToSelectedItem?: boolean;\n  /**\n   * If true, scrolls to the active option when it is selected.\n   */\n  shouldScrollWhenActive?: boolean;\n  /**\n   * If true, the option belongs to a category.\n   */\n  belongToCategory?: boolean;\n  /**\n   * The index of the item with visual focus.\n   */\n  visualFocusItemIndex?: number;\n  /**\n   * The index of the currently active item.\n   */\n  activeItemIndex?: number;\n  /**\n   * Custom renderer for the option content.\n   */\n  optionRenderer?: (option: IComboboxOption) => JSX.Element;\n}\n"
  },
  {
    "path": "packages/core/src/components/Combobox/components/ComboboxItems/ComboboxItems.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n.scrollableContainer {\n  @include scroller;\n}\n\n.optionsContainer {\n  overflow-x: visible;\n  overflow-y: auto;\n  margin-top: var(--space-8);\n}\n\n.categoryWithOptions,\n.categoryWithoutOptions {\n  &.firstCategory {\n    padding-top: 0;\n  }\n}\n\n.categoryWithOptions {\n  margin-bottom: var(--space-4);\n}\n\n.categoryWithoutOptions {\n  margin-bottom: 0;\n}\n"
  },
  {
    "path": "packages/core/src/components/Combobox/components/ComboboxItems/ComboboxItems.tsx",
    "content": "import React, { type CSSProperties, forwardRef, type RefObject, useCallback, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { comboboxItemRenderer } from \"../../ComboboxHelpers/ComboboxHelpers\";\nimport VirtualizedList from \"../../../../components/VirtualizedList/VirtualizedList\";\nimport {\n  COMBOBOX_CATEGORY_ITEM,\n  COMBOBOX_OPTION_ITEM,\n  type IComboboxCategoryMap,\n  type IComboboxItem,\n  type IComboboxOption,\n  type IComboboxOptionEvents\n} from \"../ComboboxConstants\";\nimport styles from \"./ComboboxItems.module.scss\";\n\nexport interface ComboboxItemsProps extends IComboboxOptionEvents {\n  /**\n   * Class name applied to the options container.\n   */\n  className?: string;\n  /**\n   * Class name applied to individual options.\n   */\n  optionClassName?: string;\n  /**\n   * The categories available in the combobox.\n   */\n  categories?: IComboboxCategoryMap;\n  /**\n   * The list of options displayed in the combobox.\n   */\n  options?: IComboboxItem[];\n  /**\n   * Custom renderer for an option.\n   */\n  optionRenderer?: (option: IComboboxOption) => JSX.Element;\n  /**\n   * The index of the currently active item.\n   */\n  activeItemIndex?: number;\n  /**\n   * The index of the item with visual focus.\n   */\n  visualFocusItemIndex?: number;\n  /**\n   * The height of each option item.\n   */\n  optionLineHeight?: number;\n  /**\n   * If true, the list scrolls to the selected item when opened.\n   */\n  shouldScrollToSelectedItem?: boolean;\n  /**\n   * If true, only renders visible options (optimization for large lists).\n   */\n  renderOnlyVisibleOptions?: boolean;\n  /**\n   * Callback fired when the active category changes.\n   */\n  onActiveCategoryChanged?: (category: IComboboxItem) => void;\n  /**\n   * The maximum number of options displayed without scrolling.\n   */\n  maxOptionsWithoutScroll?: number;\n  /**\n   * A map of item IDs to item data.\n   */\n  itemsMap?: Map<string, IComboboxItem>;\n  /**\n   * If true, categories remain visible when scrolling.\n   */\n  stickyCategories?: boolean;\n  /**\n   * The ID of the options container.\n   */\n  id?: string;\n}\n\nexport const ComboboxItems: React.FC<ComboboxItemsProps> = forwardRef(\n  (\n    {\n      className,\n      optionClassName,\n      categories,\n      options,\n      optionRenderer,\n      activeItemIndex,\n      visualFocusItemIndex,\n      onOptionClick,\n      onOptionEnter,\n      onOptionLeave,\n      optionLineHeight,\n      shouldScrollToSelectedItem,\n      renderOnlyVisibleOptions,\n      onActiveCategoryChanged,\n      maxOptionsWithoutScroll,\n      itemsMap,\n      stickyCategories,\n      id\n    },\n    ref: RefObject<HTMLDivElement>\n  ) => {\n    const activeCategoryId = useRef<string>();\n    const style = useMemo(() => {\n      if (maxOptionsWithoutScroll) {\n        // Adding 0.5 to show next option to indicate scroll is available\n        const maxCount = Math.min(options.length + Object.keys(categories ?? {}).length, maxOptionsWithoutScroll + 0.5);\n        return { height: optionLineHeight * maxCount };\n      }\n      return undefined;\n    }, [maxOptionsWithoutScroll, optionLineHeight, options, categories]);\n\n    const createItemElementRenderer = useCallback(\n      (item: IComboboxItem, index: number, style: CSSProperties) =>\n        comboboxItemRenderer({\n          stickyCategories,\n          item,\n          style,\n          optionEvents: {\n            onOptionClick,\n            onOptionEnter,\n            onOptionLeave\n          },\n          optionRenderData: {\n            className: optionClassName,\n            optionLineHeight,\n            optionRenderer,\n            visualFocusItemIndex,\n            scrollRef: renderOnlyVisibleOptions ? null : ref,\n            activeItemIndex,\n            shouldScrollToSelectedItem\n          },\n          isVirtualized: renderOnlyVisibleOptions\n        }),\n      [\n        onOptionClick,\n        onOptionEnter,\n        onOptionLeave,\n        optionClassName,\n        optionLineHeight,\n        optionRenderer,\n        visualFocusItemIndex,\n        renderOnlyVisibleOptions,\n        ref,\n        activeItemIndex,\n        shouldScrollToSelectedItem\n      ]\n    );\n\n    const onItemsRender = useCallback(\n      ({ firstItemId }: { firstItemId?: string }) => {\n        window.requestAnimationFrame(() => {\n          const itemData = itemsMap.get(firstItemId);\n          if (itemData && (itemData.type === COMBOBOX_CATEGORY_ITEM || itemData.type === COMBOBOX_OPTION_ITEM)) {\n            const newActiveCategoryId =\n              itemData.type === COMBOBOX_OPTION_ITEM && itemData.categoryId ? itemData.categoryId : itemData.id;\n\n            if (newActiveCategoryId !== activeCategoryId.current) {\n              activeCategoryId.current = newActiveCategoryId;\n              const categoryObject = itemsMap.get(activeCategoryId.current);\n              onActiveCategoryChanged(categoryObject);\n            }\n          }\n        });\n      },\n      [itemsMap, onActiveCategoryChanged]\n    );\n\n    let itemsElements;\n\n    // If we request to render only the items which visible in a given moment (optimization for very large lists)\n    if (renderOnlyVisibleOptions) {\n      itemsElements = (\n        <VirtualizedList\n          ref={ref}\n          className={cx(styles.optionsContainer, className)}\n          items={options}\n          itemRenderer={createItemElementRenderer}\n          role=\"listbox\"\n          scrollableClassName={styles.scrollableContainer}\n          onItemsRendered={onItemsRender}\n          style={style}\n          id={id}\n        />\n      );\n    } else {\n      itemsElements = (\n        <div\n          className={cx(styles.scrollableContainer, styles.optionsContainer, className)}\n          role=\"listbox\"\n          id={id}\n          style={style}\n          ref={ref}\n        >\n          {options.map((itemData, index) => createItemElementRenderer(itemData, index, undefined))}\n        </div>\n      );\n    }\n\n    return itemsElements;\n  }\n);\n"
  },
  {
    "path": "packages/core/src/components/Combobox/components/ComboboxOption/ComboboxOption.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n@import \"../../../../styles/states\";\n$icon-margin: 4px;\n\n.comboboxOption {\n  padding: 8px;\n  width: 100%;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  cursor: pointer;\n  user-select: none;\n}\n\n.comboboxOption.disabled {\n  cursor: not-allowed;\n  @include disabled;\n}\n\n.comboboxOption.selected {\n  background-color: var(--primary-selected-color);\n}\n\n.comboboxOption:hover:not(.disabled):not(.selected),\n.comboboxOption.active {\n  color: var(--primary-text-color);\n  background-color: var(--primary-background-hover-color);\n  position: relative;\n}\n\n.comboboxOption.activeOutline {\n  @include focus-style-css-inset();\n  background-color: var(--secondary-background-color);\n}\n\n.comboboxOption .optionLabel {\n  flex: 1 1 auto;\n  @include ellipsis();\n}\n\n.comboboxOption .optionIcon {\n  flex: 0 0 auto;\n}\n\n.comboboxOption .optionIcon.left {\n  margin-inline-end: $icon-margin;\n}\n"
  },
  {
    "path": "packages/core/src/components/Combobox/components/ComboboxOption/ComboboxOption.tsx",
    "content": "import cx from \"classnames\";\nimport React, { type RefObject, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { useIsOverflowing } from \"@vibe/hooks\";\nimport { keyCodes } from \"../../../../constants\";\nimport { getOptionId } from \"../../helpers\";\nimport { type IComboboxOption, type IComboboxOptionEvents } from \"../ComboboxConstants\";\nimport { type ComboboxOptionIconType } from \"../../Combobox.types\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../../tests/test-ids-utils\";\nimport styles from \"./ComboboxOption.module.scss\";\n\nexport interface ComboboxOptionProps extends IComboboxOptionEvents {\n  /**\n   * The index of the option in the list.\n   */\n  index?: number;\n  /**\n   * The option data containing label, icons, and other properties.\n   */\n  option?: IComboboxOption;\n  /**\n   * Class name applied to the option element.\n   */\n  className?: string;\n  /**\n   * If true, the option is currently active.\n   */\n  isActive?: boolean;\n  /**\n   * If true, the option has visual focus.\n   */\n  visualFocus?: boolean;\n  /**\n   * A reference to the scroll container.\n   */\n  scrollRef?: RefObject<HTMLElement>;\n  /**\n   * The amount of offset when scrolling to the active item.\n   */\n  scrollOffset?: number;\n  /**\n   * The height of each option.\n   */\n  optionLineHeight?: number;\n  /**\n   * If true, scrolls to the active option when it is selected.\n   */\n  shouldScrollWhenActive?: boolean;\n  /**\n   * Custom renderer for the option content.\n   */\n  optionRenderer?: (option: IComboboxOption) => JSX.Element;\n}\n\nconst ComboboxOption = ({\n  index,\n  option,\n  className,\n  isActive,\n  visualFocus,\n  scrollRef,\n  scrollOffset = 100,\n  onOptionClick,\n  onOptionLeave,\n  onOptionHover,\n  optionLineHeight,\n  shouldScrollWhenActive = true,\n  optionRenderer = null\n}: ComboboxOptionProps) => {\n  const {\n    id,\n    leftIcon,\n    leftIconType,\n    rightIcon,\n    rightIconType,\n    label,\n    iconSize = 18,\n    disabled,\n    selected,\n    \"aria-label\": ariaLabel,\n    belongToCategory = false\n  } = option;\n  let { tooltipContent } = option;\n\n  const ref = useRef(null);\n  const labelRef = useRef();\n\n  const isOptionOverflowing = useIsOverflowing({ ref: labelRef });\n\n  useEffect(() => {\n    const element = ref.current;\n    if (visualFocus && element && shouldScrollWhenActive) {\n      if (scrollRef?.current && element) {\n        // not supported with virtualized atm, need their scrollRef (element with overflow-y auto that has the scroll)\n        scrollRef.current.scrollTop = element.offsetTop - scrollOffset;\n      } else {\n        element?.scrollIntoView?.({ behaviour: \"smooth\" });\n      }\n    }\n  }, [ref, visualFocus, shouldScrollWhenActive, scrollRef, scrollOffset, belongToCategory]);\n\n  const renderIcon = (\n    icon: SubIcon | ((className: string) => JSX.Element),\n    iconType: ComboboxOptionIconType,\n    className: string\n  ) => {\n    if (iconType === \"renderer\") {\n      return (icon as (className: string) => JSX.Element)(cx(styles.optionIcon, className));\n    }\n\n    return (\n      <Icon\n        className={cx(styles.optionIcon, className)}\n        type=\"font\"\n        icon={icon as SubIcon}\n        size={iconSize}\n        ignoreFocusStyle\n      />\n    );\n  };\n\n  const onClick = useCallback(\n    (event: React.MouseEvent) => {\n      if (disabled) return;\n      onOptionClick(event, index, option, true);\n    },\n    [index, option, onOptionClick, disabled]\n  );\n\n  const onMouseLeave = useCallback(\n    (event: React.MouseEvent) => {\n      if (disabled) return;\n      onOptionLeave(event, index, option, true);\n    },\n    [index, option, onOptionLeave, disabled]\n  );\n\n  const onMouseEnter = useCallback(\n    (event: React.MouseEvent) => {\n      if (disabled) return;\n      onOptionHover(event, index, option, true);\n    },\n    [index, option, onOptionHover, disabled]\n  );\n\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.key === keyCodes.ENTER || event.key === keyCodes.SPACE) {\n        onOptionClick(event, index, option, false);\n      }\n    },\n    [onOptionClick, index, option]\n  );\n  if (!tooltipContent) {\n    tooltipContent = isOptionOverflowing ? label : null;\n  }\n\n  const optionRendererValue = useMemo(() => optionRenderer && optionRenderer(option), [optionRenderer, option]);\n\n  const optionValue = (\n    <>\n      {leftIcon && renderIcon(leftIcon, leftIconType, styles.left)}\n      <div ref={labelRef} className={cx(styles.optionLabel)}>\n        {label}\n      </div>\n      {rightIcon && renderIcon(rightIcon, rightIconType, \"\")}\n    </>\n  );\n\n  return (\n    <Tooltip {...option.tooltipProps} content={tooltipContent} hideWhenReferenceHidden>\n      <div\n        ref={ref}\n        key={id || label}\n        aria-level={belongToCategory ? 2 : 1}\n        aria-selected={isActive}\n        aria-label={ariaLabel || label}\n        id={getOptionId(id, index)}\n        data-testid={getTestId(ComponentDefaultTestId.COMBOBOX_OPTION, index)}\n        onMouseEnter={onMouseEnter}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        onMouseLeave={onMouseLeave}\n        className={cx(styles.comboboxOption, className, {\n          [styles.disabled]: disabled,\n          [styles.selected]: selected,\n          [styles.active]: isActive,\n          [styles.activeOutline]: visualFocus\n        })}\n        style={{ height: optionLineHeight }}\n      >\n        {optionRendererValue || optionValue}\n      </div>\n    </Tooltip>\n  );\n};\n\nexport default ComboboxOption;\n"
  },
  {
    "path": "packages/core/src/components/Combobox/components/StickyCategoryHeader/StickyCategoryHeader.module.scss",
    "content": ".stickyCategoryHeader {\n  position: absolute;\n  z-index: 10;\n  width:  calc(100% - 12px);\n  background-color: var(--primary-background-color);\n  padding-block: 10px var(--space-4);\n  display: flex;\n  align-items: center;\n}\n"
  },
  {
    "path": "packages/core/src/components/Combobox/components/StickyCategoryHeader/StickyCategoryHeader.tsx",
    "content": "import React from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./StickyCategoryHeader.module.scss\";\nimport comboboxStyles from \"../../Combobox.module.scss\";\nimport comboboxCategoryStyles from \"../ComboboxCategory/ComboboxCategory.module.scss\";\n\nexport const StickyCategoryHeader = ({\n  label,\n  color,\n  className\n}: {\n  label: string;\n  color?: string;\n  className?: string;\n}) => {\n  return label === undefined ? null : (\n    <div\n      className={cx(\n        styles.stickyCategoryHeader,\n        comboboxStyles.comboboxCategory,\n        comboboxCategoryStyles.comboboxCategory,\n        className\n      )}\n      style={color && { color }}\n      aria-hidden\n    >\n      {label}\n    </div>\n  );\n};\n"
  },
  {
    "path": "packages/core/src/components/Combobox/helpers.ts",
    "content": "export function getOptionId(id: string, index: number) {\n  return id !== undefined ? `combobox-item-${id}` : `combobox-item-${index}`;\n}\n"
  },
  {
    "path": "packages/core/src/components/Combobox/index.ts",
    "content": "export { default as Combobox, type ComboboxProps } from \"./Combobox\";\n\nexport * from \"./Combobox.types\";\n"
  },
  {
    "path": "packages/core/src/components/Counter/Counter.module.scss",
    "content": "@import \"../../styles/typography\";\n@import \"../../styles/keyframes\";\n\n.counter {\n  display: inline-flex;\n  justify-content: center;\n  border-radius: 30px;\n  overflow: hidden;\n  transform-origin: center;\n  @include keyframe(counter-pop-elastic) {\n    @include pop-elastic();\n  }\n}\n\n.withAnimation {\n  animation: counterPopElastic var(--motion-expressive-short);\n}\n\n.sizeXs {\n  @include vibe-text(text3, normal);\n  @include smoothing-text;\n  min-width: 18px;\n  line-height: 18px;\n  padding: 0 var(--space-8);\n}\n\n.sizeSmall {\n  @include font-caption();\n  min-width: 18px;\n  line-height: 18px;\n  padding: 0 var(--space-8);\n}\n\n.sizeLarge {\n  @include label-text();\n  min-width: 24px;\n  padding: 2px var(--space-8);\n}\n\n.kindFill.colorPrimary {\n  color: var(--fixed-light-color);\n  background-color: var(--primary-color);\n}\n\n.kindFill.colorDark {\n  color: var(--text-color-on-inverted);\n  background-color: var(--inverted-color-background);\n}\n\n.kindFill.colorNegative {\n  color: var(--fixed-light-color);\n  background-color: var(--negative-color);\n}\n\n.kindFill.colorLight {\n  color: var(--primary-text-color);\n  background-color: var(--ui-background-color);\n}\n\n.kindLine {\n  box-shadow: 0 0 0 1px currentColor inset;\n}\n\n.kindLine.colorPrimary {\n  color: var(--primary-color);\n}\n\n.kindLine.colorDark {\n  color: var(--inverted-color-background);\n}\n\n.kindLine.colorNegative {\n  color: var(--negative-color);\n}\n\n.kindLine.colorLight {\n  color: var(--primary-text-color);\n  box-shadow: 0 0 0 1px var(--ui-background-color) inset !important;\n}\n\n// Animations\n/* New number enters */\n\n.fadeEnter {\n  opacity: 0;\n  transform: translateY(15px);\n}\n\n.fadeEnterActive {\n  position: relative;\n  opacity: 1;\n  transition: transform var(--motion-productive-long) var(--motion-timing-enter), opacity var(--motion-productive-short);\n  transform: translateY(0);\n}\n\n/* Old number exits */\n\n.fadeExit {\n  position: relative;\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.fadeExitActive {\n  position: relative;\n  opacity: 0;\n  transform: translateY(-15px);\n  transition: transform var(--motion-productive-long) var(--motion-timing-exit), opacity var(--motion-productive-short);\n}\n"
  },
  {
    "path": "packages/core/src/components/Counter/Counter.tsx",
    "content": "import { camelCase } from \"es-toolkit\";\nimport { getStyle, NOOP } from \"@vibe/shared\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { CSSTransition, SwitchTransition } from \"react-transition-group\";\nimport useEventListener from \"../../hooks/useEventListener\";\nimport useAfterFirstRender from \"../../hooks/useAfterFirstRender\";\n\nimport { type CounterColor, type CounterSize, type CounterType } from \"./Counter.types\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./Counter.module.scss\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface CounterProps extends VibeComponentProps {\n  /**\n   * The ID of the element describing the counter.\n   */\n  \"aria-labelledby\"?: string;\n  /**\n   * Class name applied to the counter element.\n   */\n  counterClassName?: string;\n  /**\n   * The numeric value displayed in the counter.\n   */\n  count?: number;\n  /**\n   * The label of the counter for accessibility.\n   */\n  \"aria-label\"?: string;\n  /**\n   * The size of the counter.\n   */\n  size?: CounterSize;\n  /**\n   * The visual style of the counter.\n   */\n  kind?: CounterType;\n  /**\n   * The color of the counter.\n   */\n  color?: CounterColor;\n  /**\n   * The maximum number of digits displayed before truncation.\n   */\n  maxDigits?: number;\n  /**\n   * Text prepended to the counter value.\n   */\n  prefix?: string;\n  /**\n   * Callback fired when the counter is clicked.\n   */\n  onMouseDown?: (event: React.MouseEvent<HTMLSpanElement>) => void;\n  /**\n   * If true, disables counter animations.\n   */\n  noAnimation?: boolean;\n}\n\nconst Counter = ({\n  className,\n  counterClassName,\n  count = 0,\n  size = \"large\",\n  kind = \"fill\",\n  color = \"primary\",\n  maxDigits = 3,\n  \"aria-labelledby\": ariaLabelledBy = \"\",\n  \"aria-label\": ariaLabel = \"\",\n  id = \"\",\n  prefix = \"\",\n  onMouseDown = NOOP,\n  noAnimation = false,\n  \"data-testid\": dataTestId\n}: CounterProps) => {\n  const [countChangeAnimationState, setCountChangeAnimationState] = useState(false);\n\n  const ref = useRef<HTMLDivElement>(null);\n  const nodeRef = useRef<HTMLSpanElement>(null);\n\n  const setCountChangedAnimationActive = useCallback(() => {\n    setCountChangeAnimationState(true);\n  }, [setCountChangeAnimationState]);\n\n  const setCountChangedAnimationNotActive = useCallback(() => {\n    setCountChangeAnimationState(false);\n  }, [setCountChangeAnimationState]);\n\n  useEventListener({\n    eventName: \"animationend\",\n    callback: setCountChangedAnimationNotActive,\n    ref\n  });\n\n  const isAfterFirstRender = useAfterFirstRender();\n\n  useEffect(() => {\n    if (isAfterFirstRender.current) {\n      setCountChangedAnimationActive();\n    }\n  }, [count, isAfterFirstRender, setCountChangedAnimationActive]);\n\n  useEffect(() => {\n    if (maxDigits <= 0) {\n      console.error(\"Max digits must be a positive number\");\n    }\n  }, [maxDigits]);\n\n  const classNames = useMemo(() => {\n    return cx(\n      styles.counter,\n      getStyle(styles, camelCase(\"size-\" + size)),\n      getStyle(styles, camelCase(\"kind-\" + kind)),\n      getStyle(styles, camelCase(\"color-\" + color)),\n      {\n        [styles.withAnimation]: countChangeAnimationState\n      },\n      counterClassName\n    );\n  }, [size, kind, color, countChangeAnimationState, counterClassName]);\n\n  const counterId = \"counter\" + (id ? `-${id}` : \"\");\n  const countText = count?.toString().length > maxDigits ? `${10 ** maxDigits - 1}+` : String(count);\n  const counter = (\n    <span id={counterId} data-testid={dataTestId || getTestId(ComponentDefaultTestId.COUNTER, id)}>\n      {prefix + countText}\n    </span>\n  );\n\n  return (\n    <span\n      className={className}\n      aria-label={`${ariaLabel} ${countText}`}\n      aria-labelledby={ariaLabelledBy}\n      onMouseDown={onMouseDown}\n      data-vibe={ComponentVibeId.COUNTER}\n    >\n      <div className={classNames} aria-label={countText} ref={ref}>\n        {noAnimation ? (\n          counter\n        ) : (\n          <SwitchTransition mode=\"out-in\">\n            <CSSTransition\n              key={countText}\n              nodeRef={nodeRef}\n              classNames={{\n                enter: styles.fadeEnter,\n                enterActive: styles.fadeEnterActive,\n                exit: styles.fadeExit,\n                exitActive: styles.fadeExitActive\n              }}\n              addEndListener={done => {\n                nodeRef.current?.addEventListener(\"transitionend\", done, false);\n              }}\n            >\n              <span\n                ref={nodeRef}\n                id={counterId}\n                data-testid={dataTestId || getTestId(ComponentDefaultTestId.COUNTER, id)}\n              >\n                {prefix + countText}\n              </span>\n            </CSSTransition>\n          </SwitchTransition>\n        )}\n      </div>\n    </span>\n  );\n};\n\nexport default Counter;\n"
  },
  {
    "path": "packages/core/src/components/Counter/Counter.types.ts",
    "content": "export type CounterType = \"fill\" | \"line\";\n\nexport type CounterColor = \"primary\" | \"dark\" | \"negative\" | \"light\";\n\nexport type CounterSize = \"xs\" | \"small\" | \"large\";\n"
  },
  {
    "path": "packages/core/src/components/Counter/__tests__/Counter.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport Counter from \"../Counter\";\n\ndescribe(\"Counter renders correctly\", () => {\n  it(\"with count below the limit\", () => {\n    const tree = renderer.create(<Counter count={1} />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with count above limit\", () => {\n    const tree = renderer.create(<Counter count={1000} maxDigits={3} />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with the prefix\", () => {\n    const tree = renderer.create(<Counter count={13} prefix=\"+\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with negative color\", () => {\n    const tree = renderer.create(<Counter color=\"negative\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with line kind\", () => {\n    const tree = renderer.create(<Counter kind=\"line\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with count above limit and max digits\", () => {\n    const tree = renderer.create(<Counter maxDigits={4} count={1050} />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with small size\", () => {\n    const tree = renderer.create(<Counter size=\"small\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with aria-labelledby\", () => {\n    const tree = renderer.create(<Counter aria-labelledby=\"aria label\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with className\", () => {\n    const tree = renderer.create(<Counter className=\"className\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with counterClassName\", () => {\n    const tree = renderer.create(<Counter counterClassName=\"counterClassName\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Counter/__tests__/Counter.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { render } from \"@testing-library/react\";\nimport Counter from \"../Counter\";\n\ndescribe(\"Counter tests\", () => {\n  const className = \"test-class\";\n\n  const getComponentToRender = ({ count = 1, ...props } = {}) => {\n    return <Counter {...props} className={className} count={count} />;\n  };\n\n  const renderComponent = ({ ...props } = {}) => {\n    return render(getComponentToRender(props));\n  };\n\n  it(\"Shows the right count\", () => {\n    const counterComponent = renderComponent({ count: 1 });\n    const counterText = counterComponent.getByText(\"1\");\n    expect(counterText).toBeTruthy();\n  });\n\n  it(\"Shows 999+ if count is above limit\", () => {\n    const counterComponent = renderComponent({ count: 1000, maxDigits: 3 });\n    const counterText = counterComponent.getByText(\"999+\");\n    expect(counterText).toBeTruthy();\n  });\n\n  describe(\"a11y\", () => {\n    it(\"should add the aria label\", () => {\n      const count = 3;\n      const ariaLabel = \"Label Name \";\n      const { getByLabelText } = render(<Counter aria-label={ariaLabel} count={count} />);\n      const counterComponent = getByLabelText(ariaLabel + count);\n      expect(counterComponent).toBeTruthy();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Counter/__tests__/__snapshots__/Counter.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`Counter renders correctly > with aria-labelledby 1`] = `\n<span\n  aria-label=\" 0\"\n  aria-labelledby=\"aria label\"\n  data-vibe=\"Counter\"\n  onMouseDown={[Function]}\n>\n  <div\n    aria-label=\"0\"\n    className=\"counter sizeLarge kindFill colorPrimary\"\n  >\n    <span\n      data-testid=\"counter\"\n      id=\"counter\"\n    >\n      0\n    </span>\n  </div>\n</span>\n`;\n\nexports[`Counter renders correctly > with className 1`] = `\n<span\n  aria-label=\" 0\"\n  aria-labelledby=\"\"\n  className=\"className\"\n  data-vibe=\"Counter\"\n  onMouseDown={[Function]}\n>\n  <div\n    aria-label=\"0\"\n    className=\"counter sizeLarge kindFill colorPrimary\"\n  >\n    <span\n      data-testid=\"counter\"\n      id=\"counter\"\n    >\n      0\n    </span>\n  </div>\n</span>\n`;\n\nexports[`Counter renders correctly > with count above limit 1`] = `\n<span\n  aria-label=\" 999+\"\n  aria-labelledby=\"\"\n  data-vibe=\"Counter\"\n  onMouseDown={[Function]}\n>\n  <div\n    aria-label=\"999+\"\n    className=\"counter sizeLarge kindFill colorPrimary\"\n  >\n    <span\n      data-testid=\"counter\"\n      id=\"counter\"\n    >\n      999+\n    </span>\n  </div>\n</span>\n`;\n\nexports[`Counter renders correctly > with count above limit and max digits 1`] = `\n<span\n  aria-label=\" 1050\"\n  aria-labelledby=\"\"\n  data-vibe=\"Counter\"\n  onMouseDown={[Function]}\n>\n  <div\n    aria-label=\"1050\"\n    className=\"counter sizeLarge kindFill colorPrimary\"\n  >\n    <span\n      data-testid=\"counter\"\n      id=\"counter\"\n    >\n      1050\n    </span>\n  </div>\n</span>\n`;\n\nexports[`Counter renders correctly > with count below the limit 1`] = `\n<span\n  aria-label=\" 1\"\n  aria-labelledby=\"\"\n  data-vibe=\"Counter\"\n  onMouseDown={[Function]}\n>\n  <div\n    aria-label=\"1\"\n    className=\"counter sizeLarge kindFill colorPrimary\"\n  >\n    <span\n      data-testid=\"counter\"\n      id=\"counter\"\n    >\n      1\n    </span>\n  </div>\n</span>\n`;\n\nexports[`Counter renders correctly > with counterClassName 1`] = `\n<span\n  aria-label=\" 0\"\n  aria-labelledby=\"\"\n  data-vibe=\"Counter\"\n  onMouseDown={[Function]}\n>\n  <div\n    aria-label=\"0\"\n    className=\"counter sizeLarge kindFill colorPrimary counterClassName\"\n  >\n    <span\n      data-testid=\"counter\"\n      id=\"counter\"\n    >\n      0\n    </span>\n  </div>\n</span>\n`;\n\nexports[`Counter renders correctly > with line kind 1`] = `\n<span\n  aria-label=\" 0\"\n  aria-labelledby=\"\"\n  data-vibe=\"Counter\"\n  onMouseDown={[Function]}\n>\n  <div\n    aria-label=\"0\"\n    className=\"counter sizeLarge kindLine colorPrimary\"\n  >\n    <span\n      data-testid=\"counter\"\n      id=\"counter\"\n    >\n      0\n    </span>\n  </div>\n</span>\n`;\n\nexports[`Counter renders correctly > with negative color 1`] = `\n<span\n  aria-label=\" 0\"\n  aria-labelledby=\"\"\n  data-vibe=\"Counter\"\n  onMouseDown={[Function]}\n>\n  <div\n    aria-label=\"0\"\n    className=\"counter sizeLarge kindFill colorNegative\"\n  >\n    <span\n      data-testid=\"counter\"\n      id=\"counter\"\n    >\n      0\n    </span>\n  </div>\n</span>\n`;\n\nexports[`Counter renders correctly > with small size 1`] = `\n<span\n  aria-label=\" 0\"\n  aria-labelledby=\"\"\n  data-vibe=\"Counter\"\n  onMouseDown={[Function]}\n>\n  <div\n    aria-label=\"0\"\n    className=\"counter sizeSmall kindFill colorPrimary\"\n  >\n    <span\n      data-testid=\"counter\"\n      id=\"counter\"\n    >\n      0\n    </span>\n  </div>\n</span>\n`;\n\nexports[`Counter renders correctly > with the prefix 1`] = `\n<span\n  aria-label=\" 13\"\n  aria-labelledby=\"\"\n  data-vibe=\"Counter\"\n  onMouseDown={[Function]}\n>\n  <div\n    aria-label=\"13\"\n    className=\"counter sizeLarge kindFill colorPrimary\"\n  >\n    <span\n      data-testid=\"counter\"\n      id=\"counter\"\n    >\n      +13\n    </span>\n  </div>\n</span>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Counter/index.ts",
    "content": "export { default as Counter, type CounterProps } from \"./Counter\";\n\nexport * from \"./Counter.types\";\n"
  },
  {
    "path": "packages/core/src/components/DatePicker/DateContentHoverContext.tsx",
    "content": "import React, { createContext, useContext, useMemo, useState } from \"react\";\nimport { noop } from \"es-toolkit\";\n\nexport const DayContentHoverContext = createContext<{\n  hover: Date | undefined;\n  setHover: (_hover: Date | undefined) => void;\n}>({ hover: undefined, setHover: noop });\n\nexport const DayContentHoverProvider = ({ children }: { children: React.ReactNode }) => {\n  const [hover, setHover] = useState<Date | undefined>(undefined);\n  const value = useMemo(() => ({ hover, setHover }), [hover]);\n  return <DayContentHoverContext.Provider value={value}>{children}</DayContentHoverContext.Provider>;\n};\n\nexport const useDayContentHoverContext = () => useContext(DayContentHoverContext);\n"
  },
  {
    "path": "packages/core/src/components/DatePicker/DatePicker.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n.datePicker {\n  --day-picker-header-height: 34px;\n  --day-picker-content-height: 234px;\n  --day-picker-day-width: 30px;\n  --day-picker-day-height: 30px;\n  --day-picker-days-horizontal-gap: 4px;\n  --day-picker-days-vertical-gap: 2px;\n  --day-picker-day-change-range: var(--primary-surface-color);\n\n  .datePickerMonths {\n    display: flex;\n    flex-direction: row;\n    gap: var(--space-16);\n    align-items: flex-start;\n  }\n\n  &.withWeekNumber {\n    --day-picker-days-horizontal-gap: 2px;\n    width: 284px;\n    margin: 0;\n\n    .datePickerHead {\n      td:first-child {\n        width: var(--day-picker-day-width);\n        border-start-start-radius: var(--border-radius-medium);\n        border-start-end-radius: var(--border-radius-medium);\n        background-color: var(--primary-background-hover-color);\n\n        &::after {\n          color: var(--secondary-text-color);\n          @include vibe-text(text2, normal);\n          display: flex;\n          justify-content: center;\n          content: \"No.\";\n        }\n      }\n    }\n\n    .datePickerBody {\n      td:first-child {\n        background-color: var(--primary-background-hover-color);\n      }\n\n      tr:last-child td:first-child {\n        border-end-start-radius: var(--border-radius-medium);\n        border-end-end-radius: var(--border-radius-medium);\n      }\n    }\n  }\n\n  .datePickerTable {\n    margin-top: var(--space-8);\n    border-collapse: collapse;\n    height: var(--day-picker-content-height);\n  }\n\n  .datePickerHead {\n    th {\n      color: var(--secondary-text-color);\n      @include vibe-text(text2, normal);\n      padding-block: var(--space-2);\n      text-align: center;\n      height: var(--day-picker-day-height);\n    }\n  }\n  .datePickerBody {\n    td {\n      color: var(--secondary-text-color);\n      @include vibe-text(text2, normal);\n      text-align: center;\n      padding: 0;\n    }\n\n    .datePickerDay {\n      color: var(--primary-text-color);\n      @include vibe-text(text2, normal);\n      width: var(--day-picker-day-width);\n      height: var(--day-picker-day-height);\n      background: none;\n      border: none;\n      cursor: pointer;\n      border-radius: var(--border-radius-small);\n      margin: var(--day-picker-days-vertical-gap) var(--day-picker-days-horizontal-gap);\n      padding: 0;\n\n      .datePickerDayContent {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        width: 100%;\n        height: 100%;\n        border-radius: var(--border-radius-small);\n      }\n\n      &:focus-visible {\n        outline: none;\n        .datePickerDayContent {\n          outline: 2px solid var(--primary-color);\n        }\n      }\n\n      &.datePickerDayDisabled {\n        color: var(--disabled-text-color);\n        cursor: not-allowed;\n      }\n\n      &:not(.datePickerDayDisabled):not(.datePickerAddToRangeStart):not(.datePickerAddToRangeEnd):not(\n          .datePickerAddToRangeMiddle\n        ):not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd)\n        .datePickerDayContent:hover {\n        background: var(--primary-background-hover-color);\n      }\n\n      &.datePickerDayOutside {\n        color: var(--disabled-text-color);\n      }\n\n      &.datePickerDaySelected:not(.datePickerDayRangeMiddle):not(.datePickerRemoveFromRange) {\n        background: var(--primary-color);\n        color: var(--text-color-on-primary);\n      }\n\n      &.datePickerDayRangeStart:not(.datePickerDayRangeEnd):not(.datePickerRemoveFromRange),\n      &.datePickerDayRangeEnd:not(.datePickerDayRangeStart):not(.datePickerRemoveFromRange) {\n        background: var(--primary-color);\n        width: calc(var(--day-picker-day-width) + var(--day-picker-days-horizontal-gap));\n      }\n\n      &.datePickerDayRangeStart.datePickerRemoveFromRange,\n      &.datePickerDayRangeEnd.datePickerRemoveFromRange {\n        background: var(--primary-color);\n        color: var(--text-color-on-primary);\n      }\n\n      &.datePickerDayRangeStart.datePickerRemoveFromRange:not(.datePickerDayRangeEnd),\n      &.datePickerDayRangeEnd.datePickerRemoveFromRange:not(.datePickerDayRangeStart) {\n        width: calc(var(--day-picker-day-width) + var(--day-picker-days-horizontal-gap));\n      }\n\n      &.datePickerAddToRangeStart,\n      &.datePickerDayRangeStart:not(.datePickerDayRangeEnd) {\n        margin-inline-end: 0;\n        border-start-end-radius: 0;\n        border-end-end-radius: 0;\n      }\n\n      &.datePickerAddToRangeEnd,\n      &.datePickerDayRangeEnd:not(.datePickerDayRangeStart) {\n        margin-inline-start: 0;\n        border-start-start-radius: 0;\n        border-end-start-radius: 0;\n      }\n\n      &.datePickerAddToRangeStart,\n      &.datePickerAddToRangeEnd,\n      &.datePickerAddToRangeMiddle {\n        margin: var(--day-picker-days-vertical-gap) 0;\n      }\n\n      &.datePickerAddToRangeStart:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd),\n      &.datePickerAddToRangeEnd:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd),\n      &.datePickerAddToRangeMiddle,\n      &.datePickerDayRangeMiddle:not(.datePickerAddToRangeStart):not(.datePickerAddToRangeEnd) {\n        background-color: var(--primary-selected-color);\n        border: var(--day-picker-days-horizontal-gap) var(--border-style) var(--primary-selected-color);\n        border-top: none;\n        border-bottom: none;\n        width: calc(var(--day-picker-day-width) + 2 * var(--day-picker-days-horizontal-gap));\n      }\n\n      &.datePickerAddToRangeMiddle,\n      &.datePickerDayRangeMiddle:not(.datePickerAddToRangeStart):not(.datePickerAddToRangeEnd) {\n        background: var(--primary-selected-color);\n        margin: var(--day-picker-days-vertical-gap) 0;\n        border-radius: 0;\n      }\n\n      &.datePickerRemoveFromRange:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd),\n      &.datePickerAddToRangeStart:not(.datePickerDayRangeMiddle):not(.datePickerDayRangeEnd),\n      &.datePickerAddToRangeEnd:not(.datePickerDayRangeMiddle):not(.datePickerDayRangeStart),\n      &.datePickerAddToRangeMiddle {\n        background: var(--day-picker-day-change-range);\n        border-color: var(--day-picker-day-change-range);\n      }\n    }\n\n    tr {\n      td:first-child .datePickerDay {\n        &.datePickerDayRangeMiddle,\n        &.datePickerAddToRangeStart:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd),\n        &.datePickerAddToRangeMiddle,\n        &.datePickerAddToRangeEnd:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd) {\n          border: none;\n          width: calc(var(--day-picker-day-width) + var(--day-picker-days-horizontal-gap));\n          margin-inline-start: var(--day-picker-days-horizontal-gap);\n          border-inline-end: var(--day-picker-days-horizontal-gap) solid var(--primary-selected-color);\n          border-start-start-radius: var(--border-radius-small);\n          border-end-start-radius: var(--border-radius-small);\n        }\n\n        &.datePickerRemoveFromRange {\n          border-color: var(--day-picker-day-change-range);\n        }\n\n        &.datePickerAddToRangeEnd,\n        &.datePickerDayRangeEnd:not(.datePickerDayRangeStart) {\n          margin-inline-end: 0;\n        }\n      }\n\n      td:last-child .datePickerDay {\n        &.datePickerDayRangeMiddle,\n        &.datePickerAddToRangeStart:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd),\n        &.datePickerAddToRangeMiddle,\n        &.datePickerAddToRangeEnd:not(.datePickerDayRangeStart):not(.datePickerDayRangeEnd) {\n          border: none;\n          width: calc(var(--day-picker-day-width) + var(--day-picker-days-horizontal-gap));\n          margin-inline-end: var(--day-picker-days-horizontal-gap);\n          border-inline-start: var(--day-picker-days-horizontal-gap) solid var(--primary-selected-color);\n          border-start-end-radius: var(--border-radius-small);\n          border-end-end-radius: var(--border-radius-small);\n        }\n\n        &.datePickerRemoveFromRange {\n          border-color: var(--day-picker-day-change-range);\n        }\n\n        &.datePickerAddToRangeStart,\n        &.datePickerDayRangeStart:not(.datePickerDayRangeEnd) {\n          margin-inline-start: 0;\n        }\n      }\n\n      td:first-child .datePickerDay,\n      td:last-child .datePickerDay {\n        &.datePickerAddToRangeStart:not(.datePickerDayRangeMiddle),\n        &.datePickerAddToRangeMiddle,\n        &.datePickerAddToRangeEnd:not(.datePickerDayRangeMiddle) {\n          border-color: var(--day-picker-day-change-range);\n        }\n\n        &.datePickerDaySelected.datePickerDayRangeEnd.datePickerAddToRangeStart {\n          border-inline-start-width: 0;\n        }\n        &.datePickerDaySelected.datePickerDayRangeStart.datePickerAddToRangeEnd {\n          border-inline-end-width: 0;\n        }\n      }\n    }\n\n    .datePickerDaySelected.datePickerDayRangeEnd.datePickerAddToRangeStart {\n      border-radius: var(--border-radius-small) !important;\n      border-color: var(--primary-color) !important;\n      background-color: var(--primary-color) !important;\n\n      &:not(.datePickerHalfRangeSelected) {\n        margin-inline-start: calc(var(--day-picker-days-horizontal-gap) * -1);\n      }\n    }\n\n    .datePickerDaySelected.datePickerDayRangeStart.datePickerAddToRangeEnd {\n      border-radius: var(--border-radius-small) !important;\n      border-color: var(--primary-color) !important;\n      background-color: var(--primary-color) !important;\n\n      &:not(.datePickerHalfRangeSelected) {\n        margin-inline-end: calc(var(--day-picker-days-horizontal-gap) * -1);\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/DatePicker/DatePicker.tsx",
    "content": "import React, { type FC, createContext, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { type DateRange, DayPicker as ReactDatePicker, InternalModifier as DayModifier } from \"react-day-picker\";\nimport styles from \"./DatePicker.module.scss\";\nimport DatePickerHeader, { type DatePickerHeaderProps } from \"./DatePickerHeader\";\nimport { type DatePickerProps, type DatePickerRange } from \"./DatePicker.types\";\nimport {\n  AddToRangeEnd,\n  AddToRangeMiddle,\n  AddToRangeStart,\n  HalfRangeSelected,\n  HoveredDayExists,\n  RemoveFromRange,\n  addToRange,\n  addToRangeModifiers\n} from \"./utils\";\nimport { RangeDayContent } from \"./RangeDayContent\";\nimport { SingleDayContent } from \"./SingleDayContent\";\nimport { DayContentHoverContext, DayContentHoverProvider } from \"./DateContentHoverContext\";\n\nexport const DEFAULT_TIME = { hours: 9, minutes: 0 };\n\nconst MODIFIERS_CLASS_NAMES = {\n  [DayModifier.Outside]: styles.datePickerDayOutside,\n  [DayModifier.Selected]: styles.datePickerDaySelected,\n  [DayModifier.Today]: styles.datePickerDayToday,\n  [DayModifier.Disabled]: styles.datePickerDayDisabled,\n  [DayModifier.RangeStart]: styles.datePickerDayRangeStart,\n  [DayModifier.RangeEnd]: styles.datePickerDayRangeEnd,\n  [DayModifier.RangeMiddle]: styles.datePickerDayRangeMiddle,\n  [AddToRangeMiddle]: styles.datePickerAddToRangeMiddle,\n  [AddToRangeStart]: styles.datePickerAddToRangeStart,\n  [AddToRangeEnd]: styles.datePickerAddToRangeEnd,\n  [RemoveFromRange]: styles.datePickerRemoveFromRange,\n  [HoveredDayExists]: styles.datePickerHoveredDayExists,\n  [HalfRangeSelected]: styles.datePickerHalfRangeSelected\n};\n\nconst DatePickerHeaderContext = createContext<DatePickerHeaderProps>({} as DatePickerHeaderProps);\n\nconst Caption = () => (\n  <DatePickerHeaderContext.Consumer>{props => <DatePickerHeader {...props} />}</DatePickerHeaderContext.Consumer>\n);\n\nconst DatePicker: FC<DatePickerProps> = ({\n  className,\n  dayClassName,\n  selectedDayClassName,\n  id,\n  \"data-testid\": dataTestId,\n  mode = \"single\",\n  date,\n  endDate,\n  onDateChange,\n  firstDayOfWeek = 0,\n  showWeekNumber,\n  isDateDisabled,\n  locale,\n  nextButtonAriaLabel = \"Next\",\n  prevButtonAriaLabel = \"Previous\",\n  monthSelectionAriaLabel = \"Month\",\n  yearSelectionAriaLabel = \"Year\",\n  dropdownsClassName,\n  intent = \"to\",\n  dialogContainerSelector\n}) => {\n  const selected = useMemo(() => (mode === \"single\" ? date : { from: date, to: endDate }), [date, endDate, mode]);\n  const [displayMonth, setDisplayMonth] = useState(date || new Date());\n\n  const prevDateRef = useRef<Date | undefined>();\n  const prevEndDateRef = useRef<Date | undefined>();\n  const lastChangeByInnerSelection = useRef(false);\n  useEffect(() => {\n    const dateChanged = +prevDateRef.current !== +date;\n    const endDateChanged = +prevEndDateRef.current !== +endDate;\n    const shouldSetDisplayMonth = !lastChangeByInnerSelection.current;\n\n    if (dateChanged) {\n      shouldSetDisplayMonth && date && setDisplayMonth(date);\n    } else if (endDateChanged) {\n      shouldSetDisplayMonth && endDate && setDisplayMonth(endDate);\n    }\n\n    prevDateRef.current = date;\n    prevEndDateRef.current = endDate;\n    lastChangeByInnerSelection.current = false;\n  }, [date, endDate]);\n\n  const onPickerDateChange = useCallback(\n    (newValue: Date | DateRange, selectedDay: Date) => {\n      lastChangeByInnerSelection.current = true;\n\n      if (mode === \"range\") {\n        const newRange = addToRange(selectedDay, selected as DateRange, intent);\n        (onDateChange as (range: DatePickerRange) => void)({ date: newRange?.from, endDate: newRange?.to });\n      } else {\n        const newDate = newValue as Date;\n        const { hours, minutes } = date ? { hours: date.getHours(), minutes: date.getMinutes() } : DEFAULT_TIME;\n        newDate.setHours(hours, minutes);\n        (onDateChange as (date: Date | undefined) => void)(newDate);\n      }\n    },\n    [date, intent, mode, onDateChange, selected]\n  );\n\n  const DatePickerHeaderContextValue = useMemo<DatePickerHeaderProps>(\n    () => ({\n      setDisplayMonth,\n      locale,\n      nextButtonAriaLabel,\n      prevButtonAriaLabel,\n      monthSelectionAriaLabel,\n      yearSelectionAriaLabel,\n      dropdownsClassName,\n      dialogContainerSelector\n    }),\n    [\n      locale,\n      monthSelectionAriaLabel,\n      nextButtonAriaLabel,\n      setDisplayMonth,\n      prevButtonAriaLabel,\n      yearSelectionAriaLabel,\n      dropdownsClassName,\n      dialogContainerSelector\n    ]\n  );\n\n  const modifiersClassNames = useMemo(\n    () => ({\n      ...MODIFIERS_CLASS_NAMES,\n      [DayModifier.Selected]: cx(MODIFIERS_CLASS_NAMES[DayModifier.Selected], selectedDayClassName)\n    }),\n    [selectedDayClassName]\n  );\n\n  const classNames = useMemo(\n    () => ({\n      months: styles.datePickerMonths,\n      head: styles.datePickerHead,\n      table: styles.datePickerTable,\n      tbody: styles.datePickerBody,\n      day: cx(styles.datePickerDay, dayClassName)\n    }),\n    [dayClassName]\n  );\n\n  return (\n    <div\n      id={id}\n      className={cx(styles.datePicker, { [styles.withWeekNumber]: showWeekNumber }, className)}\n      data-testid={dataTestId}\n      data-vibe=\"DatePicker\"\n    >\n      <DayContentHoverProvider>\n        <DatePickerHeaderContext.Provider value={DatePickerHeaderContextValue}>\n          <DayContentHoverContext.Consumer>\n            {({ hover }) => {\n              const modifiers = addToRangeModifiers(hover, selected as DateRange, intent);\n              return (\n                <ReactDatePicker\n                  fixedWeeks\n                  showOutsideDays\n                  showWeekNumber={showWeekNumber}\n                  mode={mode as \"single\"} // cast to avoid type errors from ReactDatePicker\n                  required\n                  weekStartsOn={firstDayOfWeek}\n                  disabled={isDateDisabled}\n                  selected={selected as Date} // cast to avoid type errors from ReactDatePicker\n                  onSelect={onPickerDateChange}\n                  month={displayMonth}\n                  onMonthChange={setDisplayMonth}\n                  components={{ Caption, DayContent: mode === \"single\" ? SingleDayContent : RangeDayContent }}\n                  classNames={classNames}\n                  modifiers={modifiers}\n                  modifiersClassNames={modifiersClassNames}\n                  locale={locale}\n                />\n              );\n            }}\n          </DayContentHoverContext.Consumer>\n        </DatePickerHeaderContext.Provider>\n      </DayContentHoverProvider>\n    </div>\n  );\n};\n\nexport default DatePicker;\n"
  },
  {
    "path": "packages/core/src/components/DatePicker/DatePicker.types.ts",
    "content": "import type { VibeComponentProps } from \"@vibe/shared\";\nimport type { Intent } from \"./utils\";\n\ninterface DatePickerBaseProps extends VibeComponentProps {\n  mode?: \"single\" | \"range\";\n  date: Date | undefined;\n  endDate?: Date | undefined;\n  firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  showWeekNumber?: boolean;\n  isDateDisabled?: (date: Date) => boolean;\n  locale?: Locale;\n  monthSelectionAriaLabel?: string;\n  yearSelectionAriaLabel?: string;\n  nextButtonAriaLabel?: string;\n  prevButtonAriaLabel?: string;\n  dayClassName?: string;\n  selectedDayClassName?: string;\n  dropdownsClassName?: string;\n  intent?: Intent;\n  dialogContainerSelector?: string;\n}\n\ninterface DatePickerSingleProps extends DatePickerBaseProps {\n  mode?: \"single\";\n  onDateChange: (date: Date | undefined) => void;\n}\n\nexport type DatePickerRange = {\n  date: Date | undefined;\n  endDate: Date | undefined;\n};\n\ninterface DatePickerRangeProps extends DatePickerBaseProps {\n  mode: \"range\";\n  onDateChange: (range: DatePickerRange) => void;\n}\n\nexport type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;\n"
  },
  {
    "path": "packages/core/src/components/DatePicker/DatePickerHeader.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n.monthButtonDropdown {\n  min-width: 70px;\n  justify-content: space-between;\n}\n\n.yearButtonDropdown {\n  justify-content: space-between;\n}\n\n.datePickerHeader {\n  @include vibe-text(text2, normal);\n  height: var(--day-picker-header-height);\n  color: var(--primary-text-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n\n  button {\n    &:focus:not(:active),\n    &:focus-visible {\n      box-shadow: 0 0 0 2px var(--primary-color);\n      background: var(--primary-background-color) !important;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/DatePicker/DatePickerHeader.tsx",
    "content": "import React, { type FC, useCallback, useMemo } from \"react\";\nimport cx from \"classnames\";\nimport { useDayPicker, useNavigation } from \"react-day-picker\";\nimport { IconButton } from \"@vibe/icon-button\";\nimport { Flex } from \"@vibe/layout\";\nimport Dropdown from \"../Dropdown/Dropdown\";\nimport { DropdownChevronRight, DropdownChevronLeft } from \"@vibe/icons\";\nimport styles from \"./DatePickerHeader.module.scss\";\nimport { useMonthsOptionItems, useYearsOptionItems, type DatePickerDropdownItem } from \"./datePickerHooks\";\nimport { format, type Locale } from \"date-fns\";\n\nexport interface DatePickerHeaderProps {\n  setDisplayMonth: (displayMonth: Date) => void;\n  monthSelectionAriaLabel?: string;\n  yearSelectionAriaLabel?: string;\n  nextButtonAriaLabel?: string;\n  prevButtonAriaLabel?: string;\n  locale?: Locale;\n  className?: string;\n  dropdownsClassName?: string;\n  dialogContainerSelector?: string;\n}\n\nconst DatePickerHeader: FC<DatePickerHeaderProps> = ({\n  setDisplayMonth,\n  monthSelectionAriaLabel,\n  yearSelectionAriaLabel,\n  nextButtonAriaLabel,\n  prevButtonAriaLabel,\n  locale,\n  className,\n  dialogContainerSelector: _dialogContainerSelector\n}) => {\n  const { month: displayMonth } = useDayPicker();\n  const { goToMonth, nextMonth, previousMonth } = useNavigation();\n  const goToNextMonth = useCallback(() => goToMonth(nextMonth), [goToMonth, nextMonth]);\n  const goToPreviousMonth = useCallback(() => goToMonth(previousMonth), [goToMonth, previousMonth]);\n  const monthsData = useMonthsOptionItems({ locale });\n  const yearsData = useYearsOptionItems({ locale });\n\n  const months = useMemo(() => monthsData.map(item => ({ ...item, value: item.id })), [monthsData]);\n  const years = useMemo(() => yearsData.map(item => ({ ...item, value: item.id })), [yearsData]);\n  const monthButtonLabel = useMemo(() => getMonthButtonLabel(displayMonth, locale), [displayMonth, locale]);\n  const yearsButtonLabel = useMemo(() => getYearButtonLabel(displayMonth, locale), [displayMonth, locale]);\n\n  const onMonthSelect = useCallback(\n    (option: DatePickerDropdownItem) => {\n      const month = option.value;\n      const date = new Date(displayMonth);\n      date.setMonth(+month);\n      setDisplayMonth(date);\n    },\n    [displayMonth, setDisplayMonth]\n  );\n\n  const onYearSelect = useCallback(\n    (option: DatePickerDropdownItem) => {\n      const year = option.value;\n      const date = new Date(displayMonth);\n      date.setFullYear(+year);\n      setDisplayMonth(date);\n    },\n    [displayMonth, setDisplayMonth]\n  );\n\n  const selectedMonth = useMemo(\n    () => months.find(month => month.value === displayMonth.getMonth().toString()),\n    [months, displayMonth]\n  );\n  const selectedYear = useMemo(\n    () => years.find(year => year.value === displayMonth.getFullYear().toString()),\n    [years, displayMonth]\n  );\n\n  return (\n    <div className={cx(styles.datePickerHeader, className)}>\n      <Flex gap=\"small\">\n        <Dropdown\n          className={styles.monthButtonDropdown}\n          aria-label={monthSelectionAriaLabel}\n          options={months}\n          value={selectedMonth}\n          onChange={onMonthSelect}\n          menuWrapperClassName={styles.monthButtonDropdown}\n          size=\"small\"\n          valueRenderer={(_option: DatePickerDropdownItem) => monthButtonLabel}\n          searchable={false}\n          clearable={false}\n          borderless\n        />\n        <Dropdown\n          className={styles.yearButtonDropdown}\n          aria-label={yearSelectionAriaLabel}\n          options={years}\n          value={selectedYear}\n          onChange={onYearSelect}\n          menuWrapperClassName={styles.yearButtonDropdown}\n          size=\"small\"\n          valueRenderer={(_option: DatePickerDropdownItem) => yearsButtonLabel}\n          searchable={false}\n          clearable={false}\n          borderless\n        />\n      </Flex>\n      <Flex>\n        <IconButton\n          kind=\"tertiary\"\n          size=\"small\"\n          aria-label={prevButtonAriaLabel}\n          onClick={goToPreviousMonth}\n          icon={DropdownChevronLeft}\n        />\n        <IconButton\n          kind=\"tertiary\"\n          size=\"small\"\n          aria-label={nextButtonAriaLabel}\n          onClick={goToNextMonth}\n          icon={DropdownChevronRight}\n        />\n      </Flex>\n    </div>\n  );\n};\n\nexport default DatePickerHeader;\n\nexport function getYearButtonLabel(displayMonth: Date, locale: Locale) {\n  return format(displayMonth, \"yyyy\", { locale });\n}\n\nexport function getMonthButtonLabel(displayMonth: Date, locale: Locale) {\n  return format(displayMonth, \"MMM\", { locale });\n}\n"
  },
  {
    "path": "packages/core/src/components/DatePicker/RangeDayContent.tsx",
    "content": "import cx from \"classnames\";\nimport React, { useEffect, useRef } from \"react\";\nimport {\n  type DayContentProps as DatePickerDayContentProps,\n  DayContent as DatePickerDayContent\n} from \"react-day-picker\";\nimport { useDayContentHoverContext } from \"./DateContentHoverContext\";\nimport styles from \"./DatePicker.module.scss\";\n\nexport const RangeDayContent = (props: DatePickerDayContentProps) => {\n  const { date, activeModifiers } = props;\n  const { setHover } = useDayContentHoverContext();\n\n  const ref = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    const td = ref.current.closest(\"td\");\n    const onMouseEnter = () => setHover(date);\n    const onMouseLeave = () => setHover(undefined);\n\n    td?.addEventListener(\"mouseenter\", onMouseEnter);\n    td?.addEventListener(\"mouseleave\", onMouseLeave);\n\n    return () => {\n      td?.removeEventListener(\"mouseenter\", onMouseEnter);\n      td?.removeEventListener(\"mouseleave\", onMouseLeave);\n    };\n  }, [date, setHover]);\n\n  return (\n    <div ref={ref} className={cx(styles.datePickerDayContent, activeModifiers)}>\n      <DatePickerDayContent {...props} />\n    </div>\n  );\n};\n"
  },
  {
    "path": "packages/core/src/components/DatePicker/SingleDayContent.tsx",
    "content": "import React from \"react\";\nimport {\n  type DayContentProps as DatePickerDayContentProps,\n  DayContent as DatePickerDayContent\n} from \"react-day-picker\";\nimport styles from \"./DatePicker.module.scss\";\n\nexport const SingleDayContent = (dayContentProps: DatePickerDayContentProps) => (\n  <div className={styles.datePickerDayContent}>\n    <DatePickerDayContent {...dayContentProps} />\n  </div>\n);\n"
  },
  {
    "path": "packages/core/src/components/DatePicker/__tests__/DatePicker.test.tsx",
    "content": "import { vi, afterEach, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { render, cleanup, screen, fireEvent, waitFor } from \"@testing-library/react\";\nimport { ja } from \"date-fns/locale\";\nimport DatePicker from \"../DatePicker\";\n\nconst renderDatePicker = props => {\n  return render(<DatePicker {...props} />);\n};\n\ndescribe(\"DatePicker tests\", () => {\n  afterEach(() => {\n    cleanup();\n  });\n\n  describe(\"snapshot tests\", () => {\n    it(\"renders correctly\", () => {\n      const { container } = renderDatePicker({ date: new Date(1992, 2, 17) });\n      expect(container).toMatchSnapshot();\n    });\n  });\n\n  it(\"should render correctly with date - 3/17/92\", () => {\n    renderDatePicker({ date: new Date(1992, 2, 17) });\n\n    const selectedDay = screen.getByRole(\"gridcell\", { name: \"17\" });\n    expect(selectedDay).toHaveAttribute(\"aria-selected\", \"true\");\n\n    // Check that Mar is displayed in the month selector (abbreviated form)\n    expect(screen.getByText(\"Mar\")).toBeInTheDocument();\n\n    // Check that 1992 is displayed in the year selector\n    expect(screen.getByText(\"1992\")).toBeInTheDocument();\n  });\n\n  it(\"should show date\", () => {\n    const date = new Date(1992, 2, 17);\n    renderDatePicker({ date });\n\n    // Check that day 17 is selected\n    const selectedDay = screen.getByRole(\"gridcell\", { name: \"17\" });\n    expect(selectedDay).toHaveAttribute(\"aria-selected\", \"true\");\n\n    // Check that Mar and 1992 are displayed\n    expect(screen.getByText(\"Mar\")).toBeInTheDocument();\n    expect(screen.getByText(\"1992\")).toBeInTheDocument();\n  });\n\n  it(\"should change day of date\", () => {\n    const date = new Date(1992, 2, 17);\n    const onDateChange = vi.fn();\n    renderDatePicker({ date, onDateChange });\n\n    // Click on day 20\n    const day20 = screen.getByRole(\"gridcell\", { name: \"20\" });\n    fireEvent.click(day20);\n\n    // Verify callback was called with the new date\n    expect(onDateChange).toHaveBeenCalledWith(new Date(1992, 2, 20));\n  });\n\n  it(\"should open months picker and change displayed month\", async () => {\n    const date = new Date(1992, 2, 17);\n    renderDatePicker({ date });\n\n    // Click on the month combobox to open dropdown\n    const monthCombobox = screen.getByRole(\"combobox\", { name: \"Month\" });\n    fireEvent.click(monthCombobox);\n\n    // Wait for dropdown to open and click on April\n    await waitFor(() => {\n      expect(screen.getByRole(\"option\", { name: \"Apr\" })).toBeInTheDocument();\n    });\n\n    const aprilOption = screen.getByRole(\"option\", { name: \"Apr\" });\n    fireEvent.click(aprilOption);\n\n    // Verify the month changed to Apr (abbreviated) and year stayed the same\n    await waitFor(() => {\n      expect(screen.getByText(\"Apr\")).toBeInTheDocument();\n      expect(screen.getByText(\"1992\")).toBeInTheDocument();\n    });\n  });\n\n  it(\"should open years picker and change displayed year\", async () => {\n    const date = new Date(1992, 2, 17);\n    renderDatePicker({ date });\n\n    // Click on the year combobox to open dropdown\n    const yearCombobox = screen.getByRole(\"combobox\", { name: \"Year\" });\n    fireEvent.click(yearCombobox);\n\n    // Wait for dropdown to open and click on 1993\n    await waitFor(() => {\n      expect(screen.getByRole(\"option\", { name: \"1993\" })).toBeInTheDocument();\n    });\n\n    const year1993Option = screen.getByRole(\"option\", { name: \"1993\" });\n    fireEvent.click(year1993Option);\n\n    // Verify the year changed to 1993 and month stayed the same (Mar)\n    await waitFor(() => {\n      expect(screen.getByText(\"1993\")).toBeInTheDocument();\n      expect(screen.getByText(\"Mar\")).toBeInTheDocument();\n    });\n  });\n\n  it(\"should support disabled days\", () => {\n    const date = new Date(1992, 2, 17);\n    renderDatePicker({ date, isDateDisabled: d => d.getDate() === 18 });\n\n    // Verify day 18 is disabled\n    const day18 = screen.getByRole(\"gridcell\", { name: \"18\" });\n    expect(day18).toHaveAttribute(\"disabled\");\n    expect(day18).toHaveClass(\"datePickerDayDisabled\");\n\n    // Try to click on day 18 (should not work)\n    fireEvent.click(day18);\n\n    // Verify day 17 is still selected\n    const selectedDay = screen.getByRole(\"gridcell\", { name: \"17\" });\n    expect(selectedDay).toHaveAttribute(\"aria-selected\", \"true\");\n  });\n\n  it(\"should support locale\", () => {\n    const date = new Date(1992, 2, 17);\n    renderDatePicker({ date, locale: ja });\n\n    // Check that the month is displayed in Japanese\n    expect(screen.getByText(\"3月\")).toBeInTheDocument();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.jsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`DatePicker tests > snapshot tests > renders correctly 1`] = `\n<div>\n  <div\n    class=\"datePicker\"\n    data-vibe=\"DatePicker\"\n  >\n    <div\n      class=\"rdp \"\n    >\n      <div\n        class=\"datePickerMonths\"\n      >\n        <div\n          class=\"rdp-month rdp-caption_start rdp-caption_end\"\n        >\n          <div\n            class=\"datePickerHeader\"\n          >\n            <div\n              class=\"container directionRow justifyStart alignCenter\"\n              style=\"gap: var(--space-8);\"\n            >\n              <div\n                class=\"outerWrapper\"\n              >\n                <div\n                  aria-label=\"Month\"\n                  class=\"wrapper borderless monthButtonDropdown\"\n                  data-testid=\"dropdown\"\n                  data-vibe=\"Dropdown\"\n                >\n                  <div\n                    class=\"\"\n                  >\n                    <div\n                      class=\"container directionRow justifySpaceBetween alignCenter\"\n                    >\n                      <div\n                        aria-activedescendant=\"\"\n                        aria-controls=\"downshift-0-menu\"\n                        aria-expanded=\"false\"\n                        aria-haspopup=\"dialog\"\n                        aria-label=\"Month\"\n                        class=\"triggerWrapper small\"\n                        id=\"downshift-0-toggle-button\"\n                        role=\"combobox\"\n                        tabindex=\"0\"\n                      >\n                        <div\n                          class=\"selectedItem small\"\n                        >\n                          <div\n                            aria-selected=\"false\"\n                            class=\"wrapper readOnly small\"\n                          >\n                            Mar\n                          </div>\n                        </div>\n                      </div>\n                      <div>\n                        <div\n                          class=\"container directionRow justifyStart alignCenter actionsWrapper\"\n                        >\n                          <button\n                            aria-busy=\"false\"\n                            aria-controls=\"downshift-0-menu\"\n                            aria-disabled=\"false\"\n                            aria-expanded=\"false\"\n                            aria-labelledby=\"downshift-0-menu\"\n                            class=\"button sizeMedium kindTertiary colorPrimary noSidePadding\"\n                            data-testid=\"icon-button\"\n                            data-vibe=\"Button\"\n                            style=\"justify-content: center; align-items: center; padding: 0px; width: 24px; height: 24px;\"\n                            tabindex=\"-1\"\n                            type=\"button\"\n                          >\n                            <svg\n                              aria-hidden=\"true\"\n                              class=\"icon noFocusStyle\"\n                              data-testid=\"icon\"\n                              data-vibe=\"Icon\"\n                              fill=\"currentColor\"\n                              height=\"16\"\n                              viewBox=\"0 0 20 20\"\n                              width=\"16\"\n                            >\n                              <path\n                                d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n                              />\n                            </svg>\n                          </button>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div\n                class=\"outerWrapper\"\n              >\n                <div\n                  aria-label=\"Year\"\n                  class=\"wrapper borderless yearButtonDropdown\"\n                  data-testid=\"dropdown\"\n                  data-vibe=\"Dropdown\"\n                >\n                  <div\n                    class=\"\"\n                  >\n                    <div\n                      class=\"container directionRow justifySpaceBetween alignCenter\"\n                    >\n                      <div\n                        aria-activedescendant=\"\"\n                        aria-controls=\"downshift-1-menu\"\n                        aria-expanded=\"false\"\n                        aria-haspopup=\"dialog\"\n                        aria-label=\"Year\"\n                        class=\"triggerWrapper small\"\n                        id=\"downshift-1-toggle-button\"\n                        role=\"combobox\"\n                        tabindex=\"0\"\n                      >\n                        <div\n                          class=\"selectedItem small\"\n                        >\n                          <div\n                            aria-selected=\"false\"\n                            class=\"wrapper readOnly small\"\n                          >\n                            1992\n                          </div>\n                        </div>\n                      </div>\n                      <div>\n                        <div\n                          class=\"container directionRow justifyStart alignCenter actionsWrapper\"\n                        >\n                          <button\n                            aria-busy=\"false\"\n                            aria-controls=\"downshift-1-menu\"\n                            aria-disabled=\"false\"\n                            aria-expanded=\"false\"\n                            aria-labelledby=\"downshift-1-menu\"\n                            class=\"button sizeMedium kindTertiary colorPrimary noSidePadding\"\n                            data-testid=\"icon-button\"\n                            data-vibe=\"Button\"\n                            style=\"justify-content: center; align-items: center; padding: 0px; width: 24px; height: 24px;\"\n                            tabindex=\"-1\"\n                            type=\"button\"\n                          >\n                            <svg\n                              aria-hidden=\"true\"\n                              class=\"icon noFocusStyle\"\n                              data-testid=\"icon\"\n                              data-vibe=\"Icon\"\n                              fill=\"currentColor\"\n                              height=\"16\"\n                              viewBox=\"0 0 20 20\"\n                              width=\"16\"\n                            >\n                              <path\n                                d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n                              />\n                            </svg>\n                          </button>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              class=\"container directionRow justifyStart alignCenter\"\n            >\n              <span\n                class=\"referenceWrapper\"\n              >\n                <button\n                  aria-busy=\"false\"\n                  aria-disabled=\"false\"\n                  aria-label=\"Previous\"\n                  class=\"button sizeMedium kindTertiary colorPrimary noSidePadding\"\n                  data-testid=\"icon-button\"\n                  data-vibe=\"Button\"\n                  style=\"justify-content: center; align-items: center; padding: 0px; width: 32px; height: 32px;\"\n                  type=\"button\"\n                >\n                  <svg\n                    aria-hidden=\"true\"\n                    class=\"icon noFocusStyle\"\n                    data-testid=\"icon\"\n                    data-vibe=\"Icon\"\n                    fill=\"currentColor\"\n                    height=\"20\"\n                    viewBox=\"0 0 20 20\"\n                    width=\"20\"\n                  >\n                    <path\n                      d=\"M7.24 9.444a.77.77 0 0 0 0 1.116l4.363 4.21a.84.84 0 0 0 1.157 0 .77.77 0 0 0 0-1.116l-3.785-3.652 3.785-3.653a.77.77 0 0 0 0-1.116.84.84 0 0 0-1.157 0L7.24 9.443Z\"\n                    />\n                  </svg>\n                </button>\n              </span>\n              <span\n                class=\"referenceWrapper\"\n              >\n                <button\n                  aria-busy=\"false\"\n                  aria-disabled=\"false\"\n                  aria-label=\"Next\"\n                  class=\"button sizeMedium kindTertiary colorPrimary noSidePadding\"\n                  data-testid=\"icon-button\"\n                  data-vibe=\"Button\"\n                  style=\"justify-content: center; align-items: center; padding: 0px; width: 32px; height: 32px;\"\n                  type=\"button\"\n                >\n                  <svg\n                    aria-hidden=\"true\"\n                    class=\"icon noFocusStyle\"\n                    data-testid=\"icon\"\n                    data-vibe=\"Icon\"\n                    fill=\"currentColor\"\n                    height=\"20\"\n                    viewBox=\"0 0 20 20\"\n                    width=\"20\"\n                  >\n                    <path\n                      d=\"M12.76 10.56a.77.77 0 0 0 0-1.116L8.397 5.233a.84.84 0 0 0-1.157 0 .77.77 0 0 0 0 1.116l3.785 3.653-3.785 3.652a.77.77 0 0 0 0 1.117.84.84 0 0 0 1.157 0l4.363-4.211Z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </button>\n              </span>\n            </div>\n          </div>\n          <table\n            aria-labelledby=\"react-day-picker-1\"\n            class=\"datePickerTable\"\n            role=\"grid\"\n          >\n            <thead\n              class=\"datePickerHead\"\n            >\n              <tr\n                class=\"rdp-head_row\"\n              >\n                <th\n                  aria-label=\"Sunday\"\n                  class=\"rdp-head_cell\"\n                  scope=\"col\"\n                >\n                  Su\n                </th>\n                <th\n                  aria-label=\"Monday\"\n                  class=\"rdp-head_cell\"\n                  scope=\"col\"\n                >\n                  Mo\n                </th>\n                <th\n                  aria-label=\"Tuesday\"\n                  class=\"rdp-head_cell\"\n                  scope=\"col\"\n                >\n                  Tu\n                </th>\n                <th\n                  aria-label=\"Wednesday\"\n                  class=\"rdp-head_cell\"\n                  scope=\"col\"\n                >\n                  We\n                </th>\n                <th\n                  aria-label=\"Thursday\"\n                  class=\"rdp-head_cell\"\n                  scope=\"col\"\n                >\n                  Th\n                </th>\n                <th\n                  aria-label=\"Friday\"\n                  class=\"rdp-head_cell\"\n                  scope=\"col\"\n                >\n                  Fr\n                </th>\n                <th\n                  aria-label=\"Saturday\"\n                  class=\"rdp-head_cell\"\n                  scope=\"col\"\n                >\n                  Sa\n                </th>\n              </tr>\n            </thead>\n            <tbody\n              class=\"datePickerBody\"\n            >\n              <tr\n                class=\"rdp-row\"\n              >\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      1\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      2\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      3\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      4\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      5\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      6\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      7\n                    </div>\n                  </button>\n                </td>\n              </tr>\n              <tr\n                class=\"rdp-row\"\n              >\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      8\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      9\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      10\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      11\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      12\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      13\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      14\n                    </div>\n                  </button>\n                </td>\n              </tr>\n              <tr\n                class=\"rdp-row\"\n              >\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      15\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      16\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    aria-selected=\"true\"\n                    class=\"rdp-button_reset rdp-button datePickerDay datePickerDaySelected\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"0\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      17\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      18\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      19\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      20\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      21\n                    </div>\n                  </button>\n                </td>\n              </tr>\n              <tr\n                class=\"rdp-row\"\n              >\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      22\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      23\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      24\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      25\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      26\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      27\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      28\n                    </div>\n                  </button>\n                </td>\n              </tr>\n              <tr\n                class=\"rdp-row\"\n              >\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      29\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      30\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      31\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay datePickerDayOutside\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      1\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay datePickerDayOutside\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      2\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay datePickerDayOutside\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      3\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay datePickerDayOutside\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      4\n                    </div>\n                  </button>\n                </td>\n              </tr>\n              <tr\n                class=\"rdp-row\"\n              >\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay datePickerDayOutside\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      5\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay datePickerDayOutside\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      6\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay datePickerDayOutside\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      7\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay datePickerDayOutside\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      8\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay datePickerDayOutside\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      9\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay datePickerDayOutside\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      10\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay datePickerDayOutside\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      11\n                    </div>\n                  </button>\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`DatePicker tests > snapshot tests > renders correctly 1`] = `\n<div>\n  <div\n    class=\"datePicker\"\n    data-vibe=\"DatePicker\"\n  >\n    <div\n      class=\"rdp \"\n    >\n      <div\n        class=\"datePickerMonths\"\n      >\n        <div\n          class=\"rdp-month rdp-caption_start rdp-caption_end\"\n        >\n          <div\n            class=\"datePickerHeader\"\n          >\n            <div\n              class=\"container directionRow justifyStart alignCenter\"\n              style=\"gap: var(--space-8);\"\n            >\n              <div\n                class=\"outerWrapper\"\n              >\n                <div\n                  aria-label=\"Month\"\n                  class=\"wrapper borderless monthButtonDropdown\"\n                  data-testid=\"dropdown\"\n                  data-vibe=\"Dropdown\"\n                >\n                  <div\n                    class=\"\"\n                  >\n                    <div\n                      class=\"container directionRow justifySpaceBetween alignCenter\"\n                    >\n                      <div\n                        aria-activedescendant=\"\"\n                        aria-controls=\"downshift-0-menu\"\n                        aria-expanded=\"false\"\n                        aria-haspopup=\"dialog\"\n                        aria-label=\"Month\"\n                        class=\"triggerWrapper small\"\n                        id=\"downshift-0-toggle-button\"\n                        role=\"combobox\"\n                        tabindex=\"0\"\n                      >\n                        <div\n                          class=\"selectedItem small\"\n                        >\n                          <div\n                            aria-selected=\"false\"\n                            class=\"wrapper readOnly small\"\n                          >\n                            Mar\n                          </div>\n                        </div>\n                      </div>\n                      <div>\n                        <div\n                          class=\"container directionRow justifyStart alignCenter actionsWrapper\"\n                        >\n                          <button\n                            aria-busy=\"false\"\n                            aria-controls=\"downshift-0-menu\"\n                            aria-disabled=\"false\"\n                            aria-expanded=\"false\"\n                            aria-labelledby=\"downshift-0-menu\"\n                            class=\"button sizeMedium kindTertiary colorPrimary noSidePadding\"\n                            data-testid=\"icon-button\"\n                            data-vibe=\"Button\"\n                            style=\"justify-content: center; align-items: center; padding: 0px; width: 24px; height: 24px;\"\n                            tabindex=\"-1\"\n                            type=\"button\"\n                          >\n                            <svg\n                              aria-hidden=\"true\"\n                              class=\"icon noFocusStyle\"\n                              data-testid=\"icon\"\n                              data-vibe=\"Icon\"\n                              fill=\"currentColor\"\n                              height=\"16\"\n                              viewBox=\"0 0 20 20\"\n                              width=\"16\"\n                            >\n                              <path\n                                d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n                              />\n                            </svg>\n                          </button>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div\n                class=\"outerWrapper\"\n              >\n                <div\n                  aria-label=\"Year\"\n                  class=\"wrapper borderless yearButtonDropdown\"\n                  data-testid=\"dropdown\"\n                  data-vibe=\"Dropdown\"\n                >\n                  <div\n                    class=\"\"\n                  >\n                    <div\n                      class=\"container directionRow justifySpaceBetween alignCenter\"\n                    >\n                      <div\n                        aria-activedescendant=\"\"\n                        aria-controls=\"downshift-1-menu\"\n                        aria-expanded=\"false\"\n                        aria-haspopup=\"dialog\"\n                        aria-label=\"Year\"\n                        class=\"triggerWrapper small\"\n                        id=\"downshift-1-toggle-button\"\n                        role=\"combobox\"\n                        tabindex=\"0\"\n                      >\n                        <div\n                          class=\"selectedItem small\"\n                        >\n                          <div\n                            aria-selected=\"false\"\n                            class=\"wrapper readOnly small\"\n                          >\n                            1992\n                          </div>\n                        </div>\n                      </div>\n                      <div>\n                        <div\n                          class=\"container directionRow justifyStart alignCenter actionsWrapper\"\n                        >\n                          <button\n                            aria-busy=\"false\"\n                            aria-controls=\"downshift-1-menu\"\n                            aria-disabled=\"false\"\n                            aria-expanded=\"false\"\n                            aria-labelledby=\"downshift-1-menu\"\n                            class=\"button sizeMedium kindTertiary colorPrimary noSidePadding\"\n                            data-testid=\"icon-button\"\n                            data-vibe=\"Button\"\n                            style=\"justify-content: center; align-items: center; padding: 0px; width: 24px; height: 24px;\"\n                            tabindex=\"-1\"\n                            type=\"button\"\n                          >\n                            <svg\n                              aria-hidden=\"true\"\n                              class=\"icon noFocusStyle\"\n                              data-testid=\"icon\"\n                              data-vibe=\"Icon\"\n                              fill=\"currentColor\"\n                              height=\"16\"\n                              viewBox=\"0 0 20 20\"\n                              width=\"16\"\n                            >\n                              <path\n                                d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n                              />\n                            </svg>\n                          </button>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div\n              class=\"container directionRow justifyStart alignCenter\"\n            >\n              <span\n                class=\"referenceWrapper\"\n              >\n                <button\n                  aria-busy=\"false\"\n                  aria-disabled=\"false\"\n                  aria-label=\"Previous\"\n                  class=\"button sizeMedium kindTertiary colorPrimary noSidePadding\"\n                  data-testid=\"icon-button\"\n                  data-vibe=\"Button\"\n                  style=\"justify-content: center; align-items: center; padding: 0px; width: 32px; height: 32px;\"\n                  type=\"button\"\n                >\n                  <svg\n                    aria-hidden=\"true\"\n                    class=\"icon noFocusStyle\"\n                    data-testid=\"icon\"\n                    data-vibe=\"Icon\"\n                    fill=\"currentColor\"\n                    height=\"20\"\n                    viewBox=\"0 0 20 20\"\n                    width=\"20\"\n                  >\n                    <path\n                      d=\"M7.24 9.444a.77.77 0 0 0 0 1.116l4.363 4.21a.84.84 0 0 0 1.157 0 .77.77 0 0 0 0-1.116l-3.785-3.652 3.785-3.653a.77.77 0 0 0 0-1.116.84.84 0 0 0-1.157 0L7.24 9.443Z\"\n                    />\n                  </svg>\n                </button>\n              </span>\n              <span\n                class=\"referenceWrapper\"\n              >\n                <button\n                  aria-busy=\"false\"\n                  aria-disabled=\"false\"\n                  aria-label=\"Next\"\n                  class=\"button sizeMedium kindTertiary colorPrimary noSidePadding\"\n                  data-testid=\"icon-button\"\n                  data-vibe=\"Button\"\n                  style=\"justify-content: center; align-items: center; padding: 0px; width: 32px; height: 32px;\"\n                  type=\"button\"\n                >\n                  <svg\n                    aria-hidden=\"true\"\n                    class=\"icon noFocusStyle\"\n                    data-testid=\"icon\"\n                    data-vibe=\"Icon\"\n                    fill=\"currentColor\"\n                    height=\"20\"\n                    viewBox=\"0 0 20 20\"\n                    width=\"20\"\n                  >\n                    <path\n                      d=\"M12.76 10.56a.77.77 0 0 0 0-1.116L8.397 5.233a.84.84 0 0 0-1.157 0 .77.77 0 0 0 0 1.116l3.785 3.653-3.785 3.652a.77.77 0 0 0 0 1.117.84.84 0 0 0 1.157 0l4.363-4.211Z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </button>\n              </span>\n            </div>\n          </div>\n          <table\n            aria-labelledby=\"react-day-picker-1\"\n            class=\"datePickerTable\"\n            role=\"grid\"\n          >\n            <thead\n              class=\"datePickerHead\"\n            >\n              <tr\n                class=\"rdp-head_row\"\n              >\n                <th\n                  aria-label=\"Sunday\"\n                  class=\"rdp-head_cell\"\n                  scope=\"col\"\n                >\n                  Su\n                </th>\n                <th\n                  aria-label=\"Monday\"\n                  class=\"rdp-head_cell\"\n                  scope=\"col\"\n                >\n                  Mo\n                </th>\n                <th\n                  aria-label=\"Tuesday\"\n                  class=\"rdp-head_cell\"\n                  scope=\"col\"\n                >\n                  Tu\n                </th>\n                <th\n                  aria-label=\"Wednesday\"\n                  class=\"rdp-head_cell\"\n                  scope=\"col\"\n                >\n                  We\n                </th>\n                <th\n                  aria-label=\"Thursday\"\n                  class=\"rdp-head_cell\"\n                  scope=\"col\"\n                >\n                  Th\n                </th>\n                <th\n                  aria-label=\"Friday\"\n                  class=\"rdp-head_cell\"\n                  scope=\"col\"\n                >\n                  Fr\n                </th>\n                <th\n                  aria-label=\"Saturday\"\n                  class=\"rdp-head_cell\"\n                  scope=\"col\"\n                >\n                  Sa\n                </th>\n              </tr>\n            </thead>\n            <tbody\n              class=\"datePickerBody\"\n            >\n              <tr\n                class=\"rdp-row\"\n              >\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      1\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      2\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      3\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      4\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      5\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      6\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      7\n                    </div>\n                  </button>\n                </td>\n              </tr>\n              <tr\n                class=\"rdp-row\"\n              >\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      8\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      9\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      10\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      11\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      12\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      13\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      14\n                    </div>\n                  </button>\n                </td>\n              </tr>\n              <tr\n                class=\"rdp-row\"\n              >\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      15\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      16\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    aria-selected=\"true\"\n                    class=\"rdp-button_reset rdp-button datePickerDay datePickerDaySelected\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"0\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      17\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      18\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      19\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      20\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      21\n                    </div>\n                  </button>\n                </td>\n              </tr>\n              <tr\n                class=\"rdp-row\"\n              >\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      22\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      23\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      24\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      25\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      26\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      27\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      28\n                    </div>\n                  </button>\n                </td>\n              </tr>\n              <tr\n                class=\"rdp-row\"\n              >\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      29\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      30\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      31\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay datePickerDayOutside\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      1\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay datePickerDayOutside\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      2\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay datePickerDayOutside\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      3\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay datePickerDayOutside\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      4\n                    </div>\n                  </button>\n                </td>\n              </tr>\n              <tr\n                class=\"rdp-row\"\n              >\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay datePickerDayOutside\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      5\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay datePickerDayOutside\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      6\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay datePickerDayOutside\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      7\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay datePickerDayOutside\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      8\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay datePickerDayOutside\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      9\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay datePickerDayOutside\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      10\n                    </div>\n                  </button>\n                </td>\n                <td\n                  class=\"rdp-cell\"\n                  role=\"presentation\"\n                >\n                  <button\n                    class=\"rdp-button_reset rdp-button datePickerDay datePickerDayOutside\"\n                    name=\"day\"\n                    role=\"gridcell\"\n                    tabindex=\"-1\"\n                    type=\"button\"\n                  >\n                    <div\n                      class=\"datePickerDayContent\"\n                    >\n                      11\n                    </div>\n                  </button>\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/DatePicker/__tests__/utils.test.ts",
    "content": "import { describe, it, expect } from \"vitest\";\nimport { addToRange } from \"../utils\";\n\ndescribe(\"utils\", () => {\n  describe(\"addToRange\", () => {\n    const today = new Date();\n\n    const yesterday = new Date();\n    yesterday.setDate(today.getDate() - 1);\n\n    const tomorrow = new Date();\n    tomorrow.setDate(today.getDate() + 1);\n\n    describe(\"intent is 'to'\", () => {\n      it(\"'from' and 'to' are undefined\", () => {\n        const result = addToRange(today, { from: undefined, to: undefined }, \"to\");\n        expect(result).toEqual({ from: undefined, to: today });\n      });\n\n      describe(\"'from' is defined and 'to' is undefined\", () => {\n        it(\"day is after 'from'\", () => {\n          const result = addToRange(tomorrow, { from: yesterday, to: undefined }, \"to\");\n          expect(result).toEqual({ from: yesterday, to: tomorrow });\n        });\n\n        it(\"day is before 'from'\", () => {\n          const result = addToRange(yesterday, { from: tomorrow, to: undefined }, \"to\");\n          expect(result).toEqual({ from: yesterday, to: tomorrow });\n        });\n      });\n\n      describe(\"'from' is undefined and 'to' is defined\", () => {\n        it(\"day is before 'to'\", () => {\n          const result = addToRange(yesterday, { from: undefined, to: today }, \"to\");\n          expect(result).toEqual({ from: yesterday, to: today });\n        });\n\n        it(\"day is after 'to'\", () => {\n          const result = addToRange(tomorrow, { from: undefined, to: yesterday }, \"to\");\n          expect(result).toEqual({ from: yesterday, to: tomorrow });\n        });\n      });\n\n      it(\"day is before 'from'\", () => {\n        const result = addToRange(yesterday, { from: today, to: tomorrow }, \"to\");\n        expect(result).toEqual({ from: yesterday, to: tomorrow });\n      });\n\n      it(\"day is the same as 'from'\", () => {\n        const result = addToRange(yesterday, { from: yesterday, to: today }, \"to\");\n        expect(result).toEqual({ from: undefined });\n      });\n\n      it(\"day is between 'from' and 'to'\", () => {\n        const result = addToRange(today, { from: yesterday, to: tomorrow }, \"to\");\n        expect(result).toEqual({ from: yesterday, to: today });\n      });\n\n      it(\"day is the same as 'to'\", () => {\n        const result = addToRange(today, { from: yesterday, to: today }, \"to\");\n        expect(result).toEqual({ from: yesterday, to: today });\n      });\n\n      it(\"day is after 'to'\", () => {\n        const result = addToRange(tomorrow, { from: yesterday, to: today }, \"to\");\n        expect(result).toEqual({ from: yesterday, to: tomorrow });\n      });\n    });\n\n    describe(\"intent is 'from'\", () => {\n      it(\"'from' and 'to' are undefined\", () => {\n        const result = addToRange(today, { from: undefined, to: undefined }, \"from\");\n        expect(result).toEqual({ from: today, to: undefined });\n      });\n\n      describe(\"'from' is defined and 'to' is undefined\", () => {\n        it(\"day is after 'from'\", () => {\n          const result = addToRange(tomorrow, { from: yesterday, to: undefined }, \"from\");\n          expect(result).toEqual({ from: yesterday, to: tomorrow });\n        });\n\n        it(\"day is before 'from'\", () => {\n          const result = addToRange(yesterday, { from: tomorrow, to: undefined }, \"from\");\n          expect(result).toEqual({ from: yesterday, to: tomorrow });\n        });\n      });\n\n      describe(\"'from' is undefined and 'to' is defined\", () => {\n        it(\"day is before 'to'\", () => {\n          const result = addToRange(yesterday, { from: undefined, to: today }, \"from\");\n          expect(result).toEqual({ from: yesterday, to: today });\n        });\n\n        it(\"day is after 'to'\", () => {\n          const result = addToRange(tomorrow, { from: undefined, to: yesterday }, \"from\");\n          expect(result).toEqual({ from: yesterday, to: tomorrow });\n        });\n      });\n\n      it(\"day is before 'from'\", () => {\n        const result = addToRange(yesterday, { from: today, to: tomorrow }, \"from\");\n        expect(result).toEqual({ from: yesterday, to: tomorrow });\n      });\n\n      it(\"day is the same as 'from'\", () => {\n        const result = addToRange(today, { from: today, to: tomorrow }, \"from\");\n        expect(result).toEqual({ from: today, to: today });\n      });\n\n      it(\"day is between 'from' and 'to'\", () => {\n        const result = addToRange(today, { from: yesterday, to: tomorrow }, \"from\");\n        expect(result).toEqual({ from: today, to: tomorrow });\n      });\n\n      it(\"day is the same as 'to'\", () => {\n        const result = addToRange(tomorrow, { from: yesterday, to: tomorrow }, \"from\");\n        expect(result).toEqual({ from: tomorrow, to: tomorrow });\n      });\n\n      it(\"day is after 'to'\", () => {\n        const result = addToRange(tomorrow, { from: yesterday, to: today }, \"from\");\n        expect(result).toEqual({ from: yesterday, to: tomorrow });\n      });\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/DatePicker/datePickerHooks.tsx",
    "content": "import { useMemo } from \"react\";\nimport { format, type Locale } from \"date-fns\";\n\nexport interface DatePickerDropdownItem {\n  id: string;\n  label: string;\n  value: string;\n}\n\nconst monthsIndexes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];\nexport const useMonthsOptionItems = ({ locale }: { locale?: Locale }) =>\n  useMemo(\n    () =>\n      monthsIndexes.map(monthIndex => {\n        const month = new Date();\n        month.setMonth(monthIndex, 1);\n        return { id: monthIndex.toString(), label: format(month, \"LLL\", { locale }) };\n      }),\n    [locale]\n  );\n\n// returns a list of all years from 100 years ago to 100 years in the future\nconst YEARS_AGO = 100;\nconst YEARS_IN_FUTURE = 100;\nexport const useYearsOptionItems = ({ locale }: { locale?: Locale }) =>\n  useMemo(\n    () =>\n      Array.from({ length: YEARS_AGO + YEARS_IN_FUTURE + 1 }, (_, i) => {\n        const date = new Date();\n        date.setFullYear(date.getFullYear() - YEARS_AGO + i);\n        return date;\n      }).map(year => ({\n        id: year.getFullYear().toString(),\n        label: format(year, \"yyyy\", { locale })\n      })),\n    [locale]\n  );\n"
  },
  {
    "path": "packages/core/src/components/DatePicker/index.ts",
    "content": "export { default as DatePicker } from \"./DatePicker\";\n\nexport * from \"./DatePicker.types\";\n"
  },
  {
    "path": "packages/core/src/components/DatePicker/types/files.d.ts",
    "content": "// SCSS\ndeclare module \"*.module.scss\" {\n  const classes: { [key: string]: string };\n  export default classes;\n}\n\n// SVG\ndeclare module \"*.svg\" {\n  const content: string;\n  export default content;\n}\n\ndeclare module \"*.png\";\ndeclare module \"*.mp4\";\ndeclare module \"*.pdf\";\n"
  },
  {
    "path": "packages/core/src/components/DatePicker/utils.ts",
    "content": "import { isAfter, isBefore, isSameDay } from \"date-fns\";\nimport { type DateRange, type Matcher } from \"react-day-picker\";\n\nexport type Intent = \"to\" | \"from\";\n\nexport function addToRange(day: Date, { from, to }: DateRange, intent: Intent): DateRange {\n  if (!from && !to) {\n    return intent === \"from\" ? { from: day, to: undefined } : { from: undefined, to: day };\n  }\n\n  if (!from) {\n    if (isBefore(day, to)) {\n      return { from: day, to };\n    }\n\n    return { from: to, to: day };\n  }\n\n  if (!to) {\n    if (isBefore(day, from)) {\n      return { from: day, to: from };\n    }\n\n    return { from, to: day };\n  }\n\n  if (intent === \"to\") {\n    if (isSameDay(day, from) && isSameDay(day, to)) {\n      return { from: undefined };\n    }\n\n    if (isSameDay(day, from)) {\n      // both from & to selected + user clicks on start -> clear selection\n      return { from: undefined };\n    }\n\n    if (isBefore(day, from)) {\n      return { from: day, to };\n    }\n\n    if (isAfter(day, from) && isBefore(day, to)) {\n      return { from, to: day };\n    }\n\n    if (isAfter(day, to) || isSameDay(day, to)) {\n      return { from, to: day };\n    }\n  } else {\n    // intent is from\n    if (isSameDay(day, from) && isSameDay(day, to)) {\n      return { from: undefined };\n    }\n\n    if (isSameDay(day, to)) {\n      return { from: day, to: day };\n    }\n\n    if (isAfter(day, to)) {\n      return { from, to: day };\n    }\n\n    if (isBefore(day, to) && isAfter(day, from)) {\n      return { from: day, to };\n    }\n\n    if (isBefore(day, from)) {\n      return { from: day, to };\n    }\n\n    if (isSameDay(day, to)) {\n      // both from & to selected + user clicks on end -> end becomes start\n      return { from: day };\n    }\n  }\n\n  return { from, to: day };\n}\n\nconst isInRange = (day: Date, range: DateRange): boolean => {\n  if (!range.from || !range.to) {\n    return false;\n  }\n\n  return (\n    (isAfter(day, range.from) || isSameDay(day, range.from)) && (isBefore(day, range.to) || isSameDay(day, range.to))\n  );\n};\n\nexport const AddToRangeMiddle = \"addToRangeMiddle\";\nexport const AddToRangeStart = \"addToRangeStart\";\nexport const AddToRangeEnd = \"addToRangeEnd\";\nexport const RemoveFromRange = \"removeFromRange\";\nexport const HoveredDayExists = \"HoveredDayExists\";\nexport const HalfRangeSelected = \"HalfRangeSelected\";\n\ntype GetDateNextStateResult =\n  | typeof AddToRangeMiddle\n  | typeof AddToRangeStart\n  | typeof AddToRangeEnd\n  | typeof RemoveFromRange\n  | undefined;\n\nexport function addToRangeNextState(\n  day: Date,\n  dayToAdd: Date,\n  range: DateRange,\n  intent: Intent\n): GetDateNextStateResult {\n  if (!dayToAdd) {\n    return undefined;\n  }\n\n  const nextRange = addToRange(dayToAdd, range, intent);\n\n  if (!isInRange(day, nextRange) && !isInRange(day, range)) {\n    return undefined;\n  }\n\n  if (isSameDay(day, nextRange.to) && !isSameDay(day, range.to)) {\n    return AddToRangeEnd;\n  }\n\n  if (isSameDay(day, nextRange.from) && !isSameDay(day, range.from)) {\n    return AddToRangeStart;\n  }\n\n  if (isInRange(day, nextRange)) {\n    if (isInRange(day, range)) {\n      return undefined;\n    }\n\n    if (isSameDay(day, nextRange.from)) {\n      return AddToRangeStart;\n    }\n\n    if (isSameDay(day, nextRange.to)) {\n      return AddToRangeEnd;\n    }\n\n    return !isInRange(dayToAdd, range) ? AddToRangeMiddle : undefined;\n  }\n\n  return isInRange(dayToAdd, range) ? RemoveFromRange : undefined;\n}\n\nexport function addToRangeModifiers(dayToAdd: Date, range: DateRange, intent: Intent): Record<string, Matcher> {\n  return {\n    [HoveredDayExists]: () => !!dayToAdd,\n    [HalfRangeSelected]: () => !!(range && ((!range.from && range.to) || (range.from && !range.to))),\n    [AddToRangeMiddle]: (day: Date) => addToRangeNextState(day, dayToAdd, range, intent) === AddToRangeMiddle,\n    [AddToRangeStart]: (day: Date) => addToRangeNextState(day, dayToAdd, range, intent) === AddToRangeStart,\n    [AddToRangeEnd]: (day: Date) => addToRangeNextState(day, dayToAdd, range, intent) === AddToRangeEnd,\n    [RemoveFromRange]: (day: Date) => addToRangeNextState(day, dayToAdd, range, intent) === RemoveFromRange\n  };\n}\n"
  },
  {
    "path": "packages/core/src/components/Divider/Divider.module.scss",
    "content": ".divider {\n  background-color: var(--layout-border-color);\n}\n\n.divider.withoutMargin {\n  margin: 0;\n}\n\n.horizontal {\n  height: 1px;\n  width: 100%;\n  margin: var(--space-8) 0;\n}\n\n.vertical {\n  height: 100%;\n  width: 1px;\n  margin: 0 var(--space-4);\n}\n"
  },
  {
    "path": "packages/core/src/components/Divider/Divider.tsx",
    "content": "import { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React from \"react\";\nimport { type DividerDirection } from \"./Divider.types\";\nimport { getStyle } from \"@vibe/shared\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./Divider.module.scss\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface DividerProps extends VibeComponentProps {\n  /**\n   * The direction of the divider.\n   */\n  direction?: DividerDirection;\n  /**\n   * If true, removes margin from the divider.\n   */\n  withoutMargin?: boolean;\n}\n\nconst Divider = ({\n  className = undefined,\n  withoutMargin = false,\n  direction = \"horizontal\",\n  id,\n  \"data-testid\": dataTestId\n}: DividerProps) => {\n  return (\n    <div\n      id={id}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.DIVIDER, id)}\n      data-vibe={ComponentVibeId.DIVIDER}\n      className={cx(styles.divider, className, getStyle(styles, direction), {\n        [styles.withoutMargin]: withoutMargin\n      })}\n    />\n  );\n};\n\nexport default Divider;\n"
  },
  {
    "path": "packages/core/src/components/Divider/Divider.types.ts",
    "content": "export type DividerDirection = \"vertical\" | \"horizontal\";\n"
  },
  {
    "path": "packages/core/src/components/Divider/__tests__/Divider.test.tsx",
    "content": "import { it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport Divider from \"../Divider\";\n\nit(\"renders correctly with empty props\", () => {\n  const tree = renderer.create(<Divider />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n\nit(\"renders correctly with custom class name\", () => {\n  const tree = renderer.create(<Divider className=\"dummy-class-name\" />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "packages/core/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`renders correctly with custom class name 1`] = `\n<div\n  className=\"divider dummy-class-name horizontal\"\n  data-testid=\"divider\"\n  data-vibe=\"Divider\"\n/>\n`;\n\nexports[`renders correctly with empty props 1`] = `\n<div\n  className=\"divider horizontal\"\n  data-testid=\"divider\"\n  data-vibe=\"Divider\"\n/>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Divider/index.ts",
    "content": "export { default as Divider, type DividerProps } from \"./Divider\";\n\nexport * from \"./Divider.types\";\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/Dropdown.tsx",
    "content": "import React, { useRef, forwardRef } from \"react\";\nimport {\n  type BaseDropdownProps,\n  type DropdownMultiControllerProps,\n  type DropdownSingleControllerProps\n} from \"./Dropdown.types\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport { type BaseItemData } from \"../BaseItem\";\nimport DropdownComboboxController from \"./modes/DropdownComboboxController\";\nimport DropdownMultiComboboxController from \"./modes/DropdownMultiComboboxController\";\nimport DropdownSelectController from \"./modes/DropdownSelectController\";\nimport DropdownMultiSelectController from \"./modes/DropdownMultiSelectController\";\n\nconst Dropdown = forwardRef(\n  <Item extends BaseItemData<Record<string, unknown>>>(\n    dropdownProps: BaseDropdownProps<Item>,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const isSearchable = Boolean(dropdownProps.searchable);\n\n    const dropdownInternalRef = useRef<HTMLDivElement>(null);\n    const dropdownMergedRef = useMergeRef(ref, dropdownInternalRef);\n\n    if (isMultiType(dropdownProps)) {\n      return isSearchable ? (\n        <DropdownMultiComboboxController {...dropdownProps} dropdownRef={dropdownMergedRef} />\n      ) : (\n        <DropdownMultiSelectController {...dropdownProps} dropdownRef={dropdownMergedRef} />\n      );\n    }\n\n    if (isSingleType(dropdownProps)) {\n      return isSearchable ? (\n        <DropdownComboboxController {...dropdownProps} dropdownRef={dropdownMergedRef} />\n      ) : (\n        <DropdownSelectController {...dropdownProps} dropdownRef={dropdownMergedRef} />\n      );\n    }\n\n    return null;\n  }\n);\n\nexport default Dropdown as <Item extends BaseItemData<Record<string, unknown>>>(\n  props: BaseDropdownProps<Item> & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => React.ReactElement;\n\nfunction isMultiType(dropdownProps: BaseDropdownProps<any>): dropdownProps is DropdownMultiControllerProps<any> {\n  return dropdownProps.multi;\n}\n\nfunction isSingleType(dropdownProps: BaseDropdownProps<any>): dropdownProps is DropdownSingleControllerProps<any> {\n  return !dropdownProps.multi;\n}\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/Dropdown.types.ts",
    "content": "import type React from \"react\";\nimport { type DropdownListGroup } from \"./components/DropdownBaseList/DropdownBaseList.types\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { type BaseItemData } from \"../BaseItem\";\nimport { type TooltipProps } from \"@vibe/tooltip\";\n\nexport type DropdownOption<Item = Record<string, unknown>> = BaseItemData<Item>;\nexport type DropdownGroupOption<Item = Record<string, unknown>> = DropdownListGroup<Item>[] | BaseItemData<Item>[];\n\ninterface MultiSelectSpecifics<Item extends BaseItemData<Record<string, unknown>>> {\n  /**\n   * If true, the dropdown allows multiple selections.\n   */\n  multi: true;\n  /*\n   * If true, the dropdown allows multiple lines of selected items.\n   */\n  multiline?: boolean;\n  /**\n   * Callback fired when an option is removed in multi-select mode. Only available when multi is true.\n   */\n  onOptionRemove?: (option: Item) => void;\n  /**\n   * The function to call to render the selected value on single select mode.\n   */\n  valueRenderer?: never;\n  /**\n   * The default selected values for multi-select.\n   */\n  defaultValue?: Item[];\n  /**\n   * The controlled selected values for multi-select.\n   */\n  value?: Item[];\n  /**\n   * Callback fired when the selected values change in multi-select mode.\n   */\n  onChange?: (options: Item[]) => void;\n  /**\n   * Minimum number of selected chips to always show before overflowing to the counter.\n   */\n  minVisibleCount?: number;\n}\n\ninterface SingleSelectSpecifics<Item extends BaseItemData<Record<string, unknown>>> {\n  /**\n   * If true, the dropdown allows multiple selections. Defaults to false.\n   */\n  multi?: false;\n  /**\n   * If true, the dropdown allows multiple lines of selected items. (Not available for single select)\n   */\n  multiline?: never;\n  /**\n   * Callback fired when an option is removed in multi-select mode. (Not available for single select)\n   */\n  onOptionRemove?: never;\n  /**\n   * The function to call to render the selected value on single select mode.\n   */\n  valueRenderer?: (option: Item) => React.ReactNode;\n  /**\n   * The default selected value for single-select.\n   */\n  defaultValue?: Item;\n  /**\n   * The controlled selected value for single-select.\n   */\n  value?: Item;\n  /**\n   * Callback fired when the selected value changes in single-select mode.\n   */\n  onChange?: (option: Item) => void;\n  /**\n   * Minimum number of selected chips to always show before overflowing to the counter. (Not available for single select)\n   */\n  minVisibleCount?: never;\n}\n\ntype BoxModeConstraint =\n  | {\n      /**\n       * If true, the dropdown is searchable.\n       */\n      searchable?: false;\n      /**\n       * If true, the dropdown menu is displayed inline without a popup/dialog.\n       */\n      boxMode?: false;\n    }\n  | {\n      /**\n       * If true, the dropdown is searchable.\n       */\n      searchable: true;\n      /**\n       * If true, the dropdown menu is displayed inline without a popup/dialog.\n       */\n      boxMode?: boolean;\n    };\n\nexport type BaseDropdownProps<Item extends BaseItemData<Record<string, unknown>>> = VibeComponentProps &\n  BoxModeConstraint & {\n    /**\n     * The list of options available in the list.\n     */\n    options: DropdownGroupOption<Item>;\n    /**\n     * Props to be passed to the Tooltip component that wraps the dropdown.\n     */\n    tooltipProps?: Partial<TooltipProps>;\n    /**\n     * If true, displays dividers between grouped options.\n     */\n    withGroupDivider?: boolean;\n    /**\n     * If true, makes the group title sticky.\n     */\n    stickyGroupTitle?: boolean;\n    /**\n     * The size of the dropdown.\n     */\n    size?: DropdownSizes;\n    /**\n     * The direction of the dropdown.\n     */\n    dir?: DropdownDirection;\n    /**\n     * If true, the dropdown has no visible border by default, but shows border on hover, focus, and active states.\n     */\n    borderless?: boolean;\n    /**\n     * The function to call to render an option.\n     */\n    optionRenderer?: (option: Item) => React.ReactNode;\n    /**\n     * The function to call to render the menu.\n     */\n    menuRenderer?: (props: {\n      children: React.ReactNode;\n      filteredOptions: DropdownListGroup<Item>[];\n      selectedItems: Item[];\n      getItemProps: (options: any) => Record<string, unknown>;\n    }) => React.ReactNode;\n    /**\n     * The message to display when there are no options.\n     */\n    noOptionsMessage?: string | React.ReactNode;\n    /**\n     * The placeholder to display when the dropdown is empty.\n     */\n    placeholder?: string;\n    /**\n     * If true, the dropdown is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * If true, the dropdown is read only.\n     */\n    readOnly?: boolean;\n    /**\n     * If true, the dropdown is in an error state.\n     */\n    error?: boolean;\n    /**\n     * The helper text to display below the dropdown.\n     */\n    helperText?: string;\n    /**\n     * If true, the dropdown is required.\n     */\n    required?: boolean;\n    /**\n     * The label to display above the dropdown.\n     */\n    label?: string;\n    /**\n     * The ARIA label for the dropdown.\n     */\n    \"aria-label\"?: string;\n    /**\n     * The ARIA label for the dropdown input.\n     */\n    inputAriaLabel?: string;\n    /**\n     * The ARIA label for the menu container.\n     */\n    menuAriaLabel?: string;\n    /**\n     * The ARIA label for the clear button.\n     */\n    clearAriaLabel?: string;\n    /**\n     * The current value of the input field.\n     */\n    inputValue?: string;\n    /**\n     * The maximum height of the dropdown menu.\n     */\n    maxMenuHeight?: number;\n    /**\n     * If true, controls the menu open state.\n     */\n    isMenuOpen?: boolean;\n    /**\n     * If true, closes the menu when an option is selected.\n     */\n    closeMenuOnSelect?: boolean;\n    /**\n     * If true, the dropdown menu will be auto focused.\n     */\n    autoFocus?: boolean;\n    /**\n     * If true, the dropdown will have a clear button.\n     */\n    clearable?: boolean;\n    /**\n     * Callback fired when the dropdown loses focus.\n     */\n    onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n    /**\n     * Callback fired when the clear button is clicked.\n     */\n    onClear?: () => void;\n    /**\n     * Callback fired when the dropdown gains focus.\n     */\n    onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;\n    /**\n     * Callback fired when the dropdown input value changes.\n     */\n    onInputChange?: (input: string | null) => void;\n    /**\n     * Callback fired when a key is pressed inside the dropdown.\n     */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n    /**\n     * Callback fired when the dropdown menu opens.\n     */\n    onMenuOpen?: () => void;\n    /**\n     * Callback fired when the dropdown menu closes.\n     */\n    onMenuClose?: () => void;\n    /**\n     * Callback fired when an option is selected.\n     */\n    onOptionSelect?: (option: Item) => void;\n    /**\n     * Callback fired when scrolling inside the dropdown.\n     */\n    onScroll?: (event: React.UIEvent<HTMLUListElement>) => void;\n    /**\n     * A function to customize the filtering of options.\n     * It receives an option and the current input value, and should return true if the option should be included, false otherwise.\n     */\n    filterOption?: (option: Item, inputValue: string) => boolean;\n    /**\n     * If false, selected options will be hidden from the list. Defaults to true.\n     */\n    showSelectedOptions?: boolean;\n    /**\n     * The class name to be applied to the menu wrapper.\n     */\n    menuWrapperClassName?: string;\n    /**\n     * If true, displays a loading indicator in the dropdown controls.\n     */\n    loading?: boolean;\n  } & (MultiSelectSpecifics<Item> | SingleSelectSpecifics<Item>);\n\nexport type DropdownSizes = \"small\" | \"medium\" | \"large\";\n\nexport type DropdownDirection = \"ltr\" | \"rtl\" | \"auto\";\n\nexport type DropdownMultiControllerProps<Item extends BaseItemData<Record<string, unknown>>> = Omit<\n  BaseDropdownProps<Item>,\n  keyof MultiSelectSpecifics<Item> | keyof BoxModeConstraint\n> &\n  BoxModeConstraint &\n  MultiSelectSpecifics<Item> & {\n    dropdownRef: React.Ref<HTMLDivElement>;\n  };\n\nexport type DropdownSingleControllerProps<Item extends BaseItemData<Record<string, unknown>>> = Omit<\n  BaseDropdownProps<Item>,\n  keyof SingleSelectSpecifics<Item> | keyof BoxModeConstraint\n> &\n  BoxModeConstraint &\n  SingleSelectSpecifics<Item> & {\n    dropdownRef: React.Ref<HTMLDivElement>;\n  };\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/__tests__/BaseList.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { render } from \"@testing-library/react\";\nimport BaseList from \"../components/DropdownBaseList/DropdownBaseList\";\nimport { type DropdownBaseListProps } from \"../components/DropdownBaseList/DropdownBaseList.types\";\n\nfunction renderBaseList(props?: Partial<DropdownBaseListProps<any>>) {\n  const defaultProps: DropdownBaseListProps<any> = {\n    options: [],\n    ...props\n  };\n\n  return render(<BaseList {...defaultProps} />);\n}\n\ndescribe(\"BaseList\", () => {\n  const options = [\n    {\n      label: \"Group 1\",\n      options: [\n        { label: \"Option 1\", value: \"opt1\", index: 0 },\n        { label: \"Option 2\", value: \"opt2\", index: 1, disabled: true }\n      ]\n    },\n    {\n      label: \"Group 2\",\n      options: [\n        { label: \"Option 3\", value: \"opt3\", index: 2 },\n        { label: \"Option 4\", value: \"opt4\", index: 3 }\n      ]\n    }\n  ];\n  it(\"should render correctly with all props\", () => {\n    const { getByText } = renderBaseList({\n      options,\n      size: \"large\",\n      withGroupDivider: true,\n      dir: \"rtl\",\n      noOptionsMessage: \"No options available\"\n    });\n\n    expect(getByText(\"Group 1\")).toBeInTheDocument();\n    expect(getByText(\"Group 2\")).toBeInTheDocument();\n    expect(getByText(\"Option 1\")).toBeInTheDocument();\n    expect(getByText(\"Option 2\")).toBeInTheDocument();\n    expect(getByText(\"Option 3\")).toBeInTheDocument();\n    expect(getByText(\"Option 4\")).toBeInTheDocument();\n  });\n\n  describe(\"with declared props\", () => {\n    it(\"should display group labels when provided\", () => {\n      const { getByText } = renderBaseList({ options });\n\n      expect(getByText(\"Group 1\")).toBeInTheDocument();\n      expect(getByText(\"Group 2\")).toBeInTheDocument();\n    });\n\n    it(\"should apply the selected class to the selected item\", () => {\n      const { getByText } = renderBaseList({\n        options,\n        selectedItems: [{ index: 0, value: \"opt1\", label: \"Option 1\" }]\n      });\n\n      expect(getByText(\"Option 1\").parentNode).toHaveClass(\"selected\");\n    });\n\n    it(\"should apply the selected class to multiple selected items\", () => {\n      const { getByText } = renderBaseList({\n        options,\n        selectedItems: [\n          { index: 0, value: \"opt1\", label: \"Option 1\" },\n          { label: \"Option 4\", value: \"opt4\", index: 3 }\n        ]\n      });\n\n      expect(getByText(\"Option 1\").parentNode).toHaveClass(\"selected\");\n      expect(getByText(\"Option 2\").parentNode).not.toHaveClass(\"selected\");\n      expect(getByText(\"Option 3\").parentNode).not.toHaveClass(\"selected\");\n      expect(getByText(\"Option 4\").parentNode).toHaveClass(\"selected\");\n    });\n\n    it(\"should no apply selected class when no selected items\", () => {\n      const { getByText } = renderBaseList({\n        options,\n        selectedItems: []\n      });\n\n      expect(getByText(\"Option 1\").parentNode).not.toHaveClass(\"selected\");\n      expect(getByText(\"Option 2\").parentNode).not.toHaveClass(\"selected\");\n      expect(getByText(\"Option 3\").parentNode).not.toHaveClass(\"selected\");\n      expect(getByText(\"Option 4\").parentNode).not.toHaveClass(\"selected\");\n    });\n\n    it(\"should apply the highlighted class to the highlighted item\", () => {\n      const { getByText } = renderBaseList({\n        options,\n        highlightedIndex: 0\n      });\n\n      expect(getByText(\"Option 1\").parentNode).toHaveClass(\"highlighted\");\n    });\n\n    it(\"should apply the disabled class when an option is disabled\", () => {\n      const { getByText } = renderBaseList({ options });\n\n      expect(getByText(\"Option 2\").parentNode).toHaveClass(\"disabled\");\n    });\n\n    it(\"should display a no-options message when the list is empty\", () => {\n      const { getByText } = renderBaseList({ options: [], noOptionsMessage: \"No items available\" });\n\n      expect(getByText(\"No items available\")).toBeInTheDocument();\n    });\n\n    it(\"should display group dividers when `withGroupDivider` is true\", () => {\n      const { container } = renderBaseList({ options, withGroupDivider: true });\n\n      expect(container.getElementsByClassName(\"divider\").length).toBe(1);\n    });\n\n    it(\"should support a custom option renderer\", () => {\n      const customRenderer = (item: any) => <div data-testid=\"custom-renderer\">Renderer - {item.label}</div>;\n      const { getByText } = renderBaseList({ options, itemRenderer: customRenderer });\n\n      expect(getByText(\"Renderer - Option 1\")).toBeInTheDocument();\n      expect(getByText(\"Renderer - Option 2\")).toBeInTheDocument();\n    });\n\n    it(\"should have the correct `dir` attribute\", () => {\n      const { container } = renderBaseList({ options, dir: \"rtl\" });\n\n      expect(container.querySelector(\"ul\")).toHaveAttribute(\"dir\", \"rtl\");\n    });\n  });\n\n  describe(\"with custom type\", () => {\n    it(\"should work without explicit type parameter\", () => {\n      const simpleOptions = [\n        {\n          label: \"Simple Group\",\n          options: [\n            {\n              index: 0,\n              value: \"simple-1\",\n              label: \"Simple Item\",\n              customField: \"custom value\"\n            }\n          ]\n        }\n      ];\n\n      const { getByText } = render(<BaseList options={simpleOptions} />);\n      expect(getByText(\"Simple Item\")).toBeInTheDocument();\n    });\n\n    it(\"should work with explicit type parameter\", () => {\n      type ExplicitType = Record<string, unknown> & {\n        id: string;\n        isActive: boolean;\n      };\n\n      const typedOptions = [\n        {\n          label: \"Typed Group\",\n          options: [\n            {\n              index: 0,\n              value: \"typed-1\",\n              label: \"Typed Item\",\n              id: \"123\",\n              isActive: true\n            }\n          ]\n        }\n      ];\n\n      const { getByText } = render(<BaseList<ExplicitType> options={typedOptions} />);\n      expect(getByText(\"Typed Item\")).toBeInTheDocument();\n    });\n\n    it(\"should work with itemRenderer without explicit type\", () => {\n      const simpleOptions = [\n        {\n          label: \"Renderer Group\",\n          options: [\n            {\n              index: 0,\n              value: \"render-1\",\n              label: \"Renderer Item\",\n              count: 42\n            }\n          ]\n        }\n      ];\n\n      const simpleRenderer = (item: any) => <div data-testid=\"simple-rendered\">{`${item.label}: ${item.count}`}</div>;\n\n      const { getByTestId } = render(<BaseList options={simpleOptions} itemRenderer={simpleRenderer} />);\n\n      expect(getByTestId(\"simple-rendered\")).toHaveTextContent(\"Renderer Item: 42\");\n    });\n\n    it(\"should work with itemRenderer and explicit type\", () => {\n      type ComplexType = Record<string, unknown> & {\n        id: string;\n        metadata: {\n          version: number;\n          status: string;\n        };\n      };\n\n      const complexOptions = [\n        {\n          label: \"Complex Group\",\n          options: [\n            {\n              index: 0,\n              value: \"complex-1\",\n              label: \"Complex Item\",\n              id: \"complex-1\",\n              metadata: {\n                version: 2,\n                status: \"active\"\n              }\n            }\n          ]\n        }\n      ];\n\n      const typedRenderer = (item: any) => {\n        return (\n          <div data-testid=\"complex-rendered\">\n            {`${item.label} (v${item.metadata.version}): ${item.metadata.status}`}\n          </div>\n        );\n      };\n\n      const { getByTestId } = render(<BaseList<ComplexType> options={complexOptions} itemRenderer={typedRenderer} />);\n\n      expect(getByTestId(\"complex-rendered\")).toHaveTextContent(\"Complex Item (v2): active\");\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/__tests__/Dropdown.test.tsx",
    "content": "import { vi, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { render, fireEvent, within } from \"@testing-library/react\";\nimport Dropdown from \"../Dropdown\";\nimport { type BaseDropdownProps } from \"../Dropdown.types\";\nimport { type BaseItemData } from \"../../BaseItem\";\nimport { type DropdownListGroup } from \"../components/DropdownBaseList/DropdownBaseList.types\";\n\nconst defaultOptions = [\n  {\n    label: \"Group 1\",\n    options: [\n      { label: \"Option 1\", value: \"opt1\", index: 0 },\n      { label: \"Option 2\", value: \"opt2\", index: 1, disabled: true }\n    ]\n  },\n  {\n    label: \"Group 2\",\n    options: [\n      { label: \"Option 3\", value: \"opt3\", index: 2 },\n      { label: \"Option 4\", value: \"opt4\", index: 3 }\n    ]\n  }\n] as const;\n\nfunction renderDropdown<T extends BaseItemData<Record<string, unknown>>>(props?: Partial<BaseDropdownProps<T>>) {\n  const defaultProps = {\n    options: props?.options ?? (defaultOptions as any),\n    placeholder: \"Select an option\",\n    searchable: true,\n    ...props\n  };\n  return render(<Dropdown {...(defaultProps as BaseDropdownProps<T>)} />);\n}\n\ndescribe(\"DropdownNew\", () => {\n  it(\"should render correctly with all props\", () => {\n    const { getByPlaceholderText, getByText, queryByText } = renderDropdown({\n      size: \"large\",\n      withGroupDivider: true,\n      noOptionsMessage: \"No options available\"\n    });\n    expect(queryByText(\"Option 1\")).not.toBeInTheDocument();\n\n    const input = getByPlaceholderText(\"Select an option\");\n    fireEvent.click(input);\n    expect(input).toBeInTheDocument();\n    expect(getByText(\"Group 1\")).toBeInTheDocument();\n    expect(getByText(\"Group 2\")).toBeInTheDocument();\n    expect(getByText(\"Option 1\")).toBeInTheDocument();\n    expect(getByText(\"Option 2\")).toBeInTheDocument();\n    expect(getByText(\"Option 3\")).toBeInTheDocument();\n    expect(getByText(\"Option 4\")).toBeInTheDocument();\n  });\n\n  describe(\"with declared props\", () => {\n    it(\"should open dropdown on click\", () => {\n      const { getByPlaceholderText, getByText } = renderDropdown();\n\n      const input = getByPlaceholderText(\"Select an option\");\n      fireEvent.click(input);\n\n      expect(getByText(\"Option 1\")).toBeVisible();\n    });\n\n    it(\"should be disabled when disabled prop is true\", () => {\n      const { getByPlaceholderText } = renderDropdown({\n        disabled: true\n      });\n\n      const input = getByPlaceholderText(\"Select an option\");\n      expect(input).toBeDisabled();\n    });\n\n    it(\"should be read-only when readOnly prop is true\", () => {\n      const { getByPlaceholderText } = renderDropdown({\n        readOnly: true\n      });\n\n      const input = getByPlaceholderText(\"Select an option\");\n      expect(input).toHaveAttribute(\"readonly\");\n    });\n\n    it(\"should prevent user interactions when readOnly is true\", () => {\n      const onOptionSelect = vi.fn();\n      const onChange = vi.fn();\n      const { getByPlaceholderText, queryByText, container } = renderDropdown({\n        readOnly: true,\n        onOptionSelect,\n        onChange\n      });\n\n      const input = getByPlaceholderText(\"Select an option\");\n\n      fireEvent.click(input);\n\n      expect(queryByText(\"Option 1\")).not.toBeInTheDocument();\n\n      fireEvent.change(input, { target: { value: \"test\" } });\n\n      expect(input).toHaveValue(\"\");\n\n      expect(onOptionSelect).not.toHaveBeenCalled();\n      expect(onChange).not.toHaveBeenCalled();\n\n      const clearButton = container.querySelector('[data-testid=\"dropdown-clear-button\"]');\n      expect(clearButton).not.toBeInTheDocument();\n\n      const dropdownChevron = container.querySelector(\"button[aria-expanded]\");\n      expect(dropdownChevron).not.toBeInTheDocument();\n    });\n\n    it(\"should show error state when error prop is true\", () => {\n      const { container } = renderDropdown({\n        error: true\n      });\n\n      const wrapperDiv = container.querySelector(\".wrapper\");\n      expect(wrapperDiv).toHaveClass(\"error\");\n    });\n\n    it(\"should open menu when isMenuOpen prop is true\", () => {\n      const { getByText } = renderDropdown({\n        isMenuOpen: true\n      });\n\n      expect(getByText(\"Option 1\")).toBeVisible();\n    });\n\n    it(\"should focus input on mount when autoFocus is true\", () => {\n      const { getByPlaceholderText, queryByText } = renderDropdown({\n        autoFocus: true\n      });\n\n      const input = getByPlaceholderText(\"Select an option\");\n      expect(document.activeElement).toBe(input);\n      expect(queryByText(\"Option 1\")).toBeInTheDocument();\n    });\n\n    it(\"should filter options based on input value\", () => {\n      const { getByPlaceholderText, queryByText } = renderDropdown();\n\n      const input = getByPlaceholderText(\"Select an option\");\n      fireEvent.change(input, { target: { value: \"Option 1\" } });\n\n      expect(queryByText(\"Option 2\")).not.toBeInTheDocument();\n      expect(queryByText(\"Option 3\")).not.toBeInTheDocument();\n      expect(queryByText(\"Option 4\")).not.toBeInTheDocument();\n      expect(queryByText(\"Option 1\")).toBeInTheDocument();\n    });\n\n    it(\"should display a no-options message when the list is empty\", () => {\n      const { getByPlaceholderText, getByText } = renderDropdown({\n        options: [],\n        noOptionsMessage: \"No items available\"\n      });\n\n      const input = getByPlaceholderText(\"Select an option\");\n      fireEvent.click(input);\n\n      expect(getByText(\"No items available\")).toBeInTheDocument();\n    });\n\n    it(\"should support sticky group titles when stickyGroupTitle is true\", async () => {\n      const { getByPlaceholderText, getByText } = renderDropdown({\n        stickyGroupTitle: true\n      });\n      const input = getByPlaceholderText(\"Select an option\");\n      fireEvent.click(input);\n\n      // Wait for the dropdown to render\n      await new Promise(resolve => setTimeout(resolve, 100));\n\n      // Since dropdown menus are often rendered in portals, check if the dropdown opened\n      // by looking for the option text that should be visible\n      expect(getByText(\"Group 1\")).toBeInTheDocument();\n      expect(getByText(\"Option 1\")).toBeInTheDocument();\n    });\n\n    it(\"should support a custom option renderer\", () => {\n      const customRenderer = (item: any) => {\n        return <div data-testid={`custom-renderer-${item.value}`}>{item.label}</div>;\n      };\n      const { getByPlaceholderText, getByTestId } = renderDropdown({\n        optionRenderer: customRenderer\n      });\n\n      const input = getByPlaceholderText(\"Select an option\");\n      fireEvent.click(input);\n\n      expect(getByTestId(\"custom-renderer-opt1\")).toBeInTheDocument();\n      expect(getByTestId(\"custom-renderer-opt2\")).toBeInTheDocument();\n    });\n\n    it(\"should call onInputChange when input value changes\", () => {\n      const onInputChange = vi.fn();\n      const { getByPlaceholderText } = renderDropdown({\n        onInputChange,\n        placeholder: \"Select an option\"\n      });\n\n      const input = getByPlaceholderText(\"Select an option\");\n      fireEvent.change(input, { target: { value: \"test\" } });\n\n      expect(onInputChange).toHaveBeenCalledWith(\"test\");\n    });\n\n    it(\"should call onOptionSelect when an option is selected\", () => {\n      const onOptionSelect = vi.fn();\n      const { getByPlaceholderText, getByText } = renderDropdown({\n        onOptionSelect,\n        placeholder: \"Select an option\"\n      });\n\n      const input = getByPlaceholderText(\"Select an option\");\n      fireEvent.click(input);\n      fireEvent.click(getByText(\"Option 1\"));\n\n      expect(onOptionSelect).toHaveBeenCalledWith(expect.objectContaining({ value: \"opt1\" }));\n    });\n\n    it(\"should not allow selection of disabled options\", () => {\n      const onOptionSelect = vi.fn();\n      const { getByPlaceholderText, getByText } = renderDropdown({\n        onOptionSelect,\n        placeholder: \"Select an option\"\n      });\n\n      const input = getByPlaceholderText(\"Select an option\");\n      fireEvent.click(input);\n      fireEvent.click(getByText(\"Option 2\")); // Option 2 is disabled\n\n      expect(onOptionSelect).not.toHaveBeenCalled();\n    });\n\n    it(\"should reset selection when clicking the clear button\", () => {\n      const { getByPlaceholderText, getByText, queryByRole } = renderDropdown({\n        placeholder: \"Select an option\"\n      });\n\n      const input = getByPlaceholderText(\"Select an option\");\n      fireEvent.click(input);\n      fireEvent.click(getByText(\"Option 1\"));\n\n      const clearButton = queryByRole(\"button\", { name: /close/i });\n      if (clearButton) {\n        fireEvent.click(clearButton);\n        expect(input).toHaveValue(\"\");\n      }\n    });\n\n    it(\"should show faded selected item when focused\", () => {\n      const { getByPlaceholderText, container, getByText } = renderDropdown({\n        placeholder: \"Select an option\"\n      });\n\n      const input = getByPlaceholderText(\"Select an option\");\n      fireEvent.click(input);\n      fireEvent.click(getByText(\"Option 1\"));\n\n      fireEvent.focus(input);\n\n      const selectedValue = container.querySelector(\".selectedItem\");\n      expect(selectedValue).toHaveClass(\"faded\");\n    });\n\n    it(\"should hide selected value when typing in the input\", () => {\n      const { getByPlaceholderText, getByText, queryByText } = renderDropdown();\n\n      const input = getByPlaceholderText(\"Select an option\");\n      fireEvent.click(input);\n      fireEvent.click(getByText(\"Option 1\"));\n\n      fireEvent.change(input, { target: { value: \"test\" } });\n      expect(queryByText(\"Option 1\")).not.toBeInTheDocument();\n    });\n\n    it(\"should not display indent startElement in selected value\", () => {\n      const optionsWithIndent: DropdownListGroup<BaseItemData<Record<string, unknown>>>[] = [\n        {\n          label: \"Group 1\",\n          options: [\n            {\n              label: \"Option 1\",\n              value: \"opt1\",\n              index: 0,\n              startElement: { type: \"indent\" }\n            }\n          ]\n        }\n      ];\n\n      const { getByPlaceholderText, getByText, container } = renderDropdown({\n        options: optionsWithIndent\n      });\n\n      const input = getByPlaceholderText(\"Select an option\");\n      fireEvent.click(input);\n      fireEvent.click(getByText(\"Option 1\"));\n\n      const selectedValue = container.querySelector(\".selectedItem\");\n      expect(selectedValue).toBeInTheDocument();\n\n      const indentElement = selectedValue.querySelector(\".indent\");\n      expect(indentElement).not.toBeInTheDocument();\n    });\n\n    it(\"should show clear button only when clearable is true and an option is selected\", () => {\n      const { getByPlaceholderText, getByText, queryByTestId } = renderDropdown({\n        clearable: true\n      });\n\n      const input2 = getByPlaceholderText(\"Select an option\");\n\n      expect(queryByTestId(\"dropdown-clear-button\")).not.toBeInTheDocument();\n\n      fireEvent.click(input2);\n      fireEvent.click(getByText(\"Option 1\"));\n      expect(queryByTestId(\"dropdown-clear-button\")).toBeInTheDocument();\n    });\n\n    it(\"should prevent chip deletion in multi-select readonly mode\", () => {\n      const onOptionRemove = vi.fn();\n      const onChange = vi.fn();\n      const { container } = renderDropdown({\n        readOnly: true,\n        multi: true,\n        defaultValue: [\n          { label: \"Option 1\", value: \"opt1\", index: 0 },\n          { label: \"Option 3\", value: \"opt3\", index: 2 }\n        ],\n        onOptionRemove,\n        onChange\n      });\n\n      // Selected chips should be visible but not deletable\n      const chips = container.querySelectorAll('[data-testid*=\"chip\"]');\n      expect(chips.length).toBeGreaterThan(0);\n\n      // Try to find and click delete buttons on chips (should not exist in readonly mode)\n      const deleteButtons = container.querySelectorAll(\n        '[data-testid*=\"delete\"], [aria-label*=\"delete\"], [aria-label*=\"remove\"]'\n      );\n      deleteButtons.forEach(button => {\n        fireEvent.click(button);\n      });\n\n      expect(onOptionRemove).not.toHaveBeenCalled();\n      expect(onChange).not.toHaveBeenCalled();\n\n      const clearButton = container.querySelector('[data-testid=\"dropdown-clear-button\"]');\n      expect(clearButton).not.toBeInTheDocument();\n\n      const dropdownChevron = container.querySelector(\"button[aria-expanded]\");\n      expect(dropdownChevron).not.toBeInTheDocument();\n    });\n\n    it(\"should work as a controlled component with value prop in single-select mode\", () => {\n      const onChange = vi.fn();\n      const { rerender, getByText } = renderDropdown({\n        searchable: false,\n        value: { label: \"Option 1\", value: \"opt1\", index: 0 },\n        onChange\n      });\n\n      expect(getByText(\"Option 1\")).toBeInTheDocument();\n\n      rerender(\n        <Dropdown\n          options={defaultOptions as any}\n          searchable={false}\n          value={{ label: \"Option 2\", value: \"opt2\", index: 1 }}\n          onChange={onChange}\n          placeholder=\"Select an option\"\n        />\n      );\n\n      expect(getByText(\"Option 2\")).toBeInTheDocument();\n      expect(() => getByText(\"Option 1\")).toThrow();\n    });\n\n    it(\"should work as a controlled component with value prop in multi-select mode\", () => {\n      const onChange = vi.fn();\n      const { rerender, getByText } = renderDropdown({\n        multi: true,\n        searchable: false,\n        value: [\n          { label: \"Option 1\", value: \"opt1\", index: 0 },\n          { label: \"Option 3\", value: \"opt3\", index: 2 }\n        ],\n        onChange\n      });\n\n      expect(getByText(\"Option 1\")).toBeInTheDocument();\n      expect(getByText(\"Option 3\")).toBeInTheDocument();\n\n      rerender(\n        <Dropdown\n          options={defaultOptions as any}\n          multi\n          searchable={false}\n          value={[{ label: \"Option 2\", value: \"opt2\", index: 1 }]}\n          onChange={onChange}\n          placeholder=\"Select an option\"\n        />\n      );\n\n      expect(getByText(\"Option 2\")).toBeInTheDocument();\n      expect(() => getByText(\"Option 1\")).toThrow();\n      expect(() => getByText(\"Option 3\")).toThrow();\n    });\n\n    it(\"should call onChange when selecting options in controlled mode\", () => {\n      const onChange = vi.fn();\n      const { getByPlaceholderText, getByText } = renderDropdown({\n        value: null,\n        onChange\n      });\n\n      const input = getByPlaceholderText(\"Select an option\");\n      fireEvent.click(input);\n\n      const option1 = getByText(\"Option 1\");\n      fireEvent.click(option1);\n\n      expect(onChange).toHaveBeenCalledWith({ label: \"Option 1\", value: \"opt1\", index: 0 });\n    });\n  });\n\n  describe(\"event handlers\", () => {\n    it(\"should call onFocus when input is focused\", () => {\n      const onFocus = vi.fn();\n      const { getByPlaceholderText } = renderDropdown({ onFocus });\n\n      const input = getByPlaceholderText(\"Select an option\");\n      fireEvent.focus(input);\n\n      expect(onFocus).toHaveBeenCalled();\n    });\n\n    it(\"should call onBlur when input loses focus\", () => {\n      const onBlur = vi.fn();\n      const { getByPlaceholderText } = renderDropdown({ onBlur });\n\n      const input = getByPlaceholderText(\"Select an option\");\n      fireEvent.focus(input);\n      fireEvent.blur(input);\n\n      expect(onBlur).toHaveBeenCalled();\n    });\n\n    it(\"should call onChange when an option is selected\", () => {\n      const onChange = vi.fn();\n      const { getByPlaceholderText, getByText } = renderDropdown({ onChange });\n\n      const input = getByPlaceholderText(\"Select an option\");\n      fireEvent.click(input);\n\n      const option = getByText(\"Option 1\");\n      fireEvent.click(option);\n\n      expect(onChange).toHaveBeenCalledWith(\n        expect.objectContaining({\n          value: \"opt1\",\n          label: \"Option 1\"\n        })\n      );\n    });\n\n    it(\"should call onClear when clear button is clicked\", () => {\n      const onClear = vi.fn();\n      const onChange = vi.fn();\n      const { getByPlaceholderText, getByText, getByTestId } = renderDropdown({ onClear, onChange });\n\n      const input = getByPlaceholderText(\"Select an option\");\n      fireEvent.click(input);\n      const option = getByText(\"Option 1\");\n      fireEvent.click(option);\n\n      const clearButton = getByTestId(\"dropdown-clear-button\");\n      fireEvent.click(clearButton);\n\n      expect(onClear).toHaveBeenCalled();\n      expect(onChange).toHaveBeenCalledWith(null);\n    });\n\n    it(\"should call onKeyDown when a key is pressed\", () => {\n      const onKeyDown = vi.fn();\n      const { getByPlaceholderText } = renderDropdown({ onKeyDown });\n\n      const input = getByPlaceholderText(\"Select an option\");\n      fireEvent.keyDown(input, { key: \"ArrowDown\" });\n\n      expect(onKeyDown).toHaveBeenCalled();\n    });\n\n    it(\"should call onMenuOpen when dropdown is opened\", () => {\n      const onMenuOpen = vi.fn();\n      const { getByPlaceholderText } = renderDropdown({ onMenuOpen });\n\n      const input = getByPlaceholderText(\"Select an option\");\n      fireEvent.click(input);\n\n      expect(onMenuOpen).toHaveBeenCalled();\n    });\n\n    it(\"should call onMenuClose when dropdown is closed\", () => {\n      const onMenuOpen = vi.fn();\n      const onMenuClose = vi.fn();\n      const { getByPlaceholderText, getByRole } = renderDropdown({ onMenuClose, onMenuOpen });\n\n      const input = getByPlaceholderText(\"Select an option\");\n      fireEvent.click(input);\n      expect(onMenuOpen).toHaveBeenCalled();\n\n      const menu = getByRole(\"listbox\");\n      expect(menu).toBeInTheDocument();\n\n      fireEvent.keyDown(input, { key: \"Escape\", code: \"Escape\" });\n\n      expect(onMenuClose).toHaveBeenCalled();\n    });\n\n    it(\"should call onScroll when list is scrolled\", () => {\n      const onScroll = vi.fn();\n      const manyOptions = [\n        {\n          label: \"Group 1\",\n          options: Array.from({ length: 50 }, (_, i) => ({\n            value: `opt${i}`,\n            label: `Option ${i}`,\n            index: i\n          }))\n        }\n      ];\n\n      const { getByPlaceholderText, getByRole } = renderDropdown({\n        options: manyOptions,\n        onScroll\n      });\n\n      const input = getByPlaceholderText(\"Select an option\");\n      fireEvent.click(input);\n\n      const list = getByRole(\"listbox\");\n      fireEvent.scroll(list);\n\n      expect(onScroll).toHaveBeenCalled();\n    });\n\n    it(\"should handle the complete interaction flow\", () => {\n      const onFocus = vi.fn();\n      const onBlur = vi.fn();\n      const onMenuOpen = vi.fn();\n      const onMenuClose = vi.fn();\n      const onInputChange = vi.fn();\n      const onChange = vi.fn();\n      const onOptionSelect = vi.fn();\n\n      const { getByPlaceholderText, getByRole, getByText } = renderDropdown({\n        onFocus,\n        onBlur,\n        onMenuOpen,\n        onMenuClose,\n        onInputChange,\n        onChange,\n        onOptionSelect\n      });\n\n      const input = getByPlaceholderText(\"Select an option\");\n      fireEvent.click(input);\n      expect(onFocus).toHaveBeenCalled();\n      expect(onMenuOpen).toHaveBeenCalled();\n\n      const menu = getByRole(\"listbox\");\n      expect(menu).toBeInTheDocument();\n\n      fireEvent.change(input, { target: { value: \"Option 1\" } });\n      expect(onInputChange).toHaveBeenCalledWith(\"Option 1\");\n\n      const option = getByText(\"Option 1\");\n      fireEvent.click(option);\n\n      expect(onOptionSelect).toHaveBeenCalledWith(\n        expect.objectContaining({\n          value: \"opt1\",\n          label: \"Option 1\"\n        })\n      );\n      expect(onChange).toHaveBeenCalledWith(\n        expect.objectContaining({\n          value: \"opt1\",\n          label: \"Option 1\"\n        })\n      );\n\n      fireEvent.keyDown(input, { key: \"Escape\", code: \"Escape\" });\n      expect(onMenuClose).toHaveBeenCalled();\n\n      fireEvent.blur(input);\n      expect(onBlur).toHaveBeenCalled();\n    });\n  });\n\n  describe(\"multi-select mode\", () => {\n    it(\"should render a multi-select dropdown when the multi prop is true\", () => {\n      const { getByPlaceholderText, getByText, getByTestId } = renderDropdown({\n        multi: true\n      });\n\n      const input = getByPlaceholderText(\"Select an option\");\n      fireEvent.click(input);\n\n      const option1 = getByText(\"Option 1\");\n      fireEvent.click(option1);\n      expect(getByTestId(\"dropdown-chip-opt1\")).toBeInTheDocument();\n    });\n\n    it(\"should allow selecting multiple items\", () => {\n      const onChange = vi.fn();\n      const { getByPlaceholderText, getByText } = renderDropdown({\n        multi: true,\n        onChange\n      });\n\n      const input = getByPlaceholderText(\"Select an option\");\n      fireEvent.click(input);\n\n      fireEvent.click(getByText(\"Option 1\"));\n      expect(onChange).toHaveBeenLastCalledWith([expect.objectContaining({ value: \"opt1\", label: \"Option 1\" })]);\n\n      fireEvent.click(getByText(\"Option 3\"));\n      expect(onChange).toHaveBeenLastCalledWith([\n        expect.objectContaining({ value: \"opt1\", label: \"Option 1\" }),\n        expect.objectContaining({ value: \"opt3\", label: \"Option 3\" })\n      ]);\n    });\n\n    it(\"should render chips for selected items\", () => {\n      const { getByPlaceholderText, getByText, getByTestId } = renderDropdown({\n        multi: true\n      });\n\n      const input = getByPlaceholderText(\"Select an option\");\n      fireEvent.click(input);\n\n      fireEvent.click(getByText(\"Option 1\"));\n      fireEvent.click(getByText(\"Option 3\"));\n\n      expect(getByTestId(\"dropdown-chip-opt1\")).toBeInTheDocument();\n      expect(getByTestId(\"dropdown-chip-opt3\")).toBeInTheDocument();\n    });\n\n    it(\"should remove an item when its chip is deleted\", () => {\n      const onChange = vi.fn();\n      const { getByPlaceholderText, getByText, getAllByRole } = renderDropdown({\n        multi: true,\n        onChange\n      });\n\n      const input = getByPlaceholderText(\"Select an option\");\n      fireEvent.click(input);\n\n      fireEvent.click(getByText(\"Option 1\"));\n      fireEvent.click(getByText(\"Option 3\"));\n\n      const deleteButtons = getAllByRole(\"button\").filter(\n        button => button.getAttribute(\"data-testid\") === \"chip-close\"\n      );\n\n      fireEvent.click(deleteButtons[0]);\n\n      expect(onChange).toHaveBeenLastCalledWith(\n        expect.arrayContaining([expect.not.objectContaining({ value: \"opt1\" })])\n      );\n    });\n\n    it(\"should call onOptionRemove when an item is removed\", () => {\n      const onOptionRemove = vi.fn();\n      const { getByPlaceholderText, getByText, getAllByRole } = renderDropdown({\n        multi: true,\n        onOptionRemove\n      });\n\n      const input = getByPlaceholderText(\"Select an option\");\n      fireEvent.click(input);\n\n      fireEvent.click(getByText(\"Option 1\"));\n\n      const deleteButtons = getAllByRole(\"button\").filter(button =>\n        button.getAttribute(\"data-testid\")?.includes(\"close\")\n      );\n      fireEvent.click(deleteButtons[0]);\n      expect(onOptionRemove).toHaveBeenCalledWith(expect.objectContaining({ value: \"opt1\", label: \"Option 1\" }));\n    });\n\n    it(\"should show selected chips without counter\", () => {\n      const { getByPlaceholderText, getByText, queryByTestId, getByLabelText } = renderDropdown({\n        multi: true\n      });\n\n      const input = getByPlaceholderText(\"Select an option\");\n      fireEvent.click(input);\n\n      fireEvent.click(getByText(\"Option 1\"));\n      fireEvent.click(getByText(\"Option 3\"));\n\n      fireEvent.keyDown(input, { key: \"Escape\", code: \"Escape\" });\n\n      expect(getByLabelText(\"Option 1\")).toBeInTheDocument();\n      expect(getByLabelText(\"Option 3\")).toBeInTheDocument();\n\n      expect(queryByTestId(\"dropdown-counter\")).not.toBeInTheDocument();\n    });\n\n    it(\"should show an overflow counter when more items are selected than can be displayed\", () => {\n      const manyOptionsForCounter = [\n        {\n          label: \"Overflow Group\",\n          options: [\n            { label: \"Chip Item 1\", value: \"chip1\" },\n            { label: \"Chip Item 2\", value: \"chip2\" },\n            { label: \"Chip Item 3\", value: \"chip3\" }\n          ]\n        }\n      ];\n\n      const { getByPlaceholderText, getByText, getByTestId } = renderDropdown({\n        multi: true,\n        options: manyOptionsForCounter\n      });\n\n      const input = getByPlaceholderText(\"Select an option\");\n      fireEvent.click(input);\n\n      fireEvent.click(getByText(\"Chip Item 1\"));\n      fireEvent.click(getByText(\"Chip Item 2\"));\n      fireEvent.click(getByText(\"Chip Item 3\"));\n\n      fireEvent.keyDown(input, { key: \"Escape\", code: \"Escape\" });\n\n      const counter = getByTestId(\"dropdown-overflow-counter\");\n      expect(counter).toBeInTheDocument();\n      expect(counter).toHaveTextContent(\"+ 2\");\n\n      expect(getByTestId(\"dropdown-chip-chip1\")).not.toHaveAttribute(\"aria-hidden\", \"true\");\n      expect(getByTestId(\"dropdown-chip-chip2\")).toHaveAttribute(\"aria-hidden\", \"true\");\n      expect(getByTestId(\"dropdown-chip-chip3\")).toHaveAttribute(\"aria-hidden\", \"true\");\n    });\n  });\n\n  describe(\"with custom type\", () => {\n    it(\"should work without explicit type parameter\", () => {\n      type SimpleOptionType = BaseItemData<{\n        value: string;\n      }>;\n\n      const inlineOptions: DropdownListGroup<SimpleOptionType>[] = [\n        {\n          label: \"Inline Group\",\n          options: [\n            { label: \"Inline Option 1\", value: \"inline-1\" },\n            { label: \"Inline Option 2\", value: \"inline-2\", disabled: true }\n          ]\n        }\n      ];\n\n      const { getByText, getByPlaceholderText } = render(\n        <Dropdown options={inlineOptions} placeholder=\"Select an inline option\" searchable={true} />\n      );\n\n      const input = getByPlaceholderText(\"Select an inline option\");\n      fireEvent.click(input);\n\n      expect(getByText(\"Inline Option 1\")).toBeInTheDocument();\n      expect(getByText(\"Inline Option 2\")).toBeInTheDocument();\n    });\n\n    it(\"should work with explicit type parameter\", () => {\n      interface InlineType extends Record<string, unknown> {\n        value: string;\n        inlineData?: string;\n      }\n\n      type InlineItemType = BaseItemData<InlineType>;\n\n      const typedInlineOptions: DropdownListGroup<InlineItemType>[] = [\n        {\n          label: \"Typed Inline\",\n          options: [\n            {\n              label: \"Typed Inline 1\",\n              value: \"typed-inline-1\",\n              inlineData: \"some data\"\n            },\n            {\n              label: \"Typed Inline 2\",\n              value: \"typed-inline-2\",\n              inlineData: \"other data\",\n              disabled: true\n            }\n          ]\n        }\n      ];\n\n      const handleChange = vi.fn();\n\n      const { getByText, getByPlaceholderText } = render(\n        <Dropdown<InlineItemType>\n          options={typedInlineOptions}\n          placeholder=\"Select typed inline option\"\n          onChange={handleChange}\n          searchable={true}\n        />\n      );\n\n      const input = getByPlaceholderText(\"Select typed inline option\");\n      fireEvent.click(input);\n\n      expect(getByText(\"Typed Inline 1\")).toBeInTheDocument();\n\n      fireEvent.click(getByText(\"Typed Inline 1\"));\n      expect(handleChange).toHaveBeenCalledWith(\n        expect.objectContaining({\n          label: \"Typed Inline 1\",\n          value: \"typed-inline-1\",\n          inlineData: \"some data\"\n        })\n      );\n    });\n\n    it(\"should work with renderer without explicit type parameter\", () => {\n      const inlineOptions = [\n        {\n          label: \"Rendered Group\",\n          options: [\n            { label: \"Rendered Option 1\", value: \"rendered-1\" },\n            { label: \"Rendered Option 2\", value: \"rendered-2\" }\n          ]\n        }\n      ];\n\n      const customRenderer = (item: any) => <div data-testid={`inline-render-${item.value}`}>Custom: {item.label}</div>;\n\n      const { getByTestId, getByPlaceholderText } = render(\n        <Dropdown\n          options={inlineOptions}\n          placeholder=\"Select rendered option\"\n          optionRenderer={customRenderer}\n          searchable={true}\n        />\n      );\n\n      const input = getByPlaceholderText(\"Select rendered option\");\n      fireEvent.click(input);\n\n      expect(getByTestId(\"inline-render-rendered-1\")).toBeInTheDocument();\n      expect(getByTestId(\"inline-render-rendered-2\")).toBeInTheDocument();\n    });\n\n    it(\"should work with renderer and explicit type parameter\", () => {\n      interface RenderedType extends Record<string, unknown> {\n        value: string;\n        icon?: string;\n      }\n\n      type RenderedItemType = BaseItemData<RenderedType>;\n\n      const typedRenderedOptions: DropdownListGroup<RenderedItemType>[] = [\n        {\n          label: \"Typed Rendered\",\n          options: [\n            {\n              label: \"Rendered Type 1\",\n              value: \"typed-rendered-1\",\n              icon: \"star\"\n            },\n            {\n              label: \"Rendered Type 2\",\n              value: \"typed-rendered-2\",\n              icon: \"flag\"\n            }\n          ]\n        }\n      ];\n\n      const typedRenderer = (item: RenderedItemType) => (\n        <div data-testid={`typed-render-${item.value}`}>\n          {item.icon && <span>{item.icon}</span>}\n          <span>{item.label}</span>\n        </div>\n      );\n\n      const { getByTestId, getByPlaceholderText } = render(\n        <Dropdown<RenderedItemType>\n          options={typedRenderedOptions}\n          placeholder=\"Select typed rendered option\"\n          optionRenderer={typedRenderer}\n          searchable={true}\n        />\n      );\n\n      const input = getByPlaceholderText(\"Select typed rendered option\");\n      fireEvent.click(input);\n\n      expect(getByTestId(\"typed-render-typed-rendered-1\")).toBeInTheDocument();\n      expect(getByTestId(\"typed-render-typed-rendered-2\")).toBeInTheDocument();\n    });\n  });\n\n  describe(\"with filterOption prop\", () => {\n    type FilterTestOptionType = BaseItemData<{\n      id: string;\n      value: string;\n    }>;\n\n    const filterTestOptions: FilterTestOptionType[] = [\n      { label: \"Apple\", id: \"1\", value: \"apple\" },\n      { label: \"Banana\", id: \"2\", value: \"banana\" },\n      { label: \"Cherry\", id: \"3\", value: \"cherry\" },\n      { label: \"Date\", id: \"4\", value: \"date\" }\n    ];\n\n    const customEvenIdFilter = (option: FilterTestOptionType, _inputValue: string) => {\n      return parseInt(option.id) % 2 === 0;\n    };\n\n    const customSubstringFilter = (option: FilterTestOptionType, inputValue: string) => {\n      return option.label.toLowerCase().includes(\"rr\") && option.label.toLowerCase().includes(inputValue.toLowerCase());\n    };\n\n    it(\"should filter options using custom filterOption in single select mode\", () => {\n      const { getByPlaceholderText, queryByText, getByText } = renderDropdown<FilterTestOptionType>({\n        options: filterTestOptions,\n        filterOption: customEvenIdFilter,\n        placeholder: \"Select fruit\"\n      });\n\n      const input = getByPlaceholderText(\"Select fruit\");\n      fireEvent.click(input);\n\n      fireEvent.change(input, { target: { value: \"a\" } });\n\n      expect(queryByText(\"Apple\")).not.toBeInTheDocument();\n      expect(getByText(\"Banana\")).toBeInTheDocument();\n      expect(queryByText(\"Cherry\")).not.toBeInTheDocument();\n      expect(getByText(\"Date\")).toBeInTheDocument();\n    });\n\n    it(\"should filter options using custom filterOption (substring) in single select mode\", () => {\n      const { getByPlaceholderText, queryByText, getByText } = renderDropdown<FilterTestOptionType>({\n        options: filterTestOptions,\n        filterOption: customSubstringFilter,\n        placeholder: \"Select fruit\"\n      });\n\n      const input = getByPlaceholderText(\"Select fruit\");\n      fireEvent.click(input);\n      fireEvent.change(input, { target: { value: \"rr\" } });\n\n      expect(queryByText(\"Apple\")).not.toBeInTheDocument();\n      expect(queryByText(\"Banana\")).not.toBeInTheDocument();\n      expect(getByText(\"Cherry\")).toBeInTheDocument();\n      expect(queryByText(\"Date\")).not.toBeInTheDocument();\n    });\n\n    it(\"should filter options using custom filterOption in multi select mode\", () => {\n      const { getByPlaceholderText, queryByText, getByText } = renderDropdown<FilterTestOptionType>({\n        options: filterTestOptions,\n        filterOption: customEvenIdFilter,\n        multi: true,\n        placeholder: \"Select fruits\"\n      });\n\n      const input = getByPlaceholderText(\"Select fruits\");\n      fireEvent.click(input);\n\n      fireEvent.change(input, { target: { value: \"b\" } });\n\n      expect(queryByText(\"Apple\")).not.toBeInTheDocument();\n      expect(getByText(\"Banana\")).toBeInTheDocument();\n      expect(queryByText(\"Cherry\")).not.toBeInTheDocument();\n      expect(getByText(\"Date\")).toBeInTheDocument();\n    });\n\n    it(\"should filter options using custom filterOption (substring) in multi select mode\", () => {\n      const { getByPlaceholderText, queryByText, getByText } = renderDropdown<FilterTestOptionType>({\n        options: filterTestOptions,\n        filterOption: customSubstringFilter,\n        multi: true,\n        placeholder: \"Select fruits\"\n      });\n\n      const input = getByPlaceholderText(\"Select fruits\");\n      fireEvent.click(input);\n      fireEvent.change(input, { target: { value: \"rr\" } });\n\n      expect(queryByText(\"Apple\")).not.toBeInTheDocument();\n      expect(queryByText(\"Banana\")).not.toBeInTheDocument();\n      expect(getByText(\"Cherry\")).toBeInTheDocument();\n      expect(queryByText(\"Date\")).not.toBeInTheDocument();\n    });\n\n    it(\"should use default filter if filterOption is not provided, even with input\", () => {\n      const { getByPlaceholderText, queryByText, getByText } = renderDropdown<FilterTestOptionType>({\n        options: filterTestOptions,\n        placeholder: \"Select fruit\"\n      });\n\n      const input = getByPlaceholderText(\"Select fruit\");\n      fireEvent.click(input);\n      fireEvent.change(input, { target: { value: \"app\" } });\n\n      expect(getByText(\"Apple\")).toBeInTheDocument();\n      expect(queryByText(\"Banana\")).not.toBeInTheDocument();\n      expect(queryByText(\"Cherry\")).not.toBeInTheDocument();\n      expect(queryByText(\"Date\")).not.toBeInTheDocument();\n    });\n  });\n\n  describe(\"with showSelectedOptions prop\", () => {\n    const showSelectedTestOptions = [\n      {\n        label: \"Show Selected Group\",\n        options: [\n          { label: \"Option Alpha\", value: \"alpha\" },\n          { label: \"Option Beta\", value: \"beta\" },\n          { label: \"Option Gamma\", value: \"gamma\" }\n        ]\n      }\n    ];\n\n    it(\"should hide selected option from list when showSelectedOptions is false (single select)\", () => {\n      const { getByPlaceholderText, getByRole } = renderDropdown({\n        options: showSelectedTestOptions,\n        showSelectedOptions: false,\n        placeholder: \"Select single\"\n      });\n      const input = getByPlaceholderText(\"Select single\");\n      fireEvent.click(input);\n\n      let listbox = getByRole(\"listbox\");\n      expect(within(listbox).getByText(\"Option Alpha\")).toBeInTheDocument();\n      expect(within(listbox).getByText(\"Option Beta\")).toBeInTheDocument();\n      expect(within(listbox).getByText(\"Option Gamma\")).toBeInTheDocument();\n\n      fireEvent.click(within(listbox).getByText(\"Option Beta\"));\n\n      fireEvent.click(input);\n      listbox = getByRole(\"listbox\");\n\n      expect(within(listbox).queryByText(\"Option Beta\")).not.toBeInTheDocument();\n      expect(within(listbox).getByText(\"Option Alpha\")).toBeInTheDocument();\n      expect(within(listbox).getByText(\"Option Gamma\")).toBeInTheDocument();\n    });\n\n    it(\"should keep selected option in list when showSelectedOptions is true (single select)\", () => {\n      const { getByPlaceholderText, getByRole } = renderDropdown({\n        options: showSelectedTestOptions,\n        showSelectedOptions: true,\n        placeholder: \"Select single true\"\n      });\n      const input = getByPlaceholderText(\"Select single true\");\n      fireEvent.click(input);\n      let listbox = getByRole(\"listbox\");\n      fireEvent.click(within(listbox).getByText(\"Option Beta\"));\n      fireEvent.click(input);\n      listbox = getByRole(\"listbox\");\n      expect(within(listbox).getByText(\"Option Alpha\")).toBeInTheDocument();\n      expect(within(listbox).getByText(\"Option Beta\")).toBeInTheDocument();\n      expect(within(listbox).getByText(\"Option Gamma\")).toBeInTheDocument();\n    });\n\n    it(\"should hide selected options from list when showSelectedOptions is false (multi select)\", () => {\n      const { getByRole, getByTestId, getByPlaceholderText } = renderDropdown({\n        options: showSelectedTestOptions,\n        showSelectedOptions: false,\n        multi: true,\n        placeholder: \"Select multi\"\n      });\n\n      const input = getByPlaceholderText(\"Select multi\");\n      fireEvent.click(input);\n      let listbox = getByRole(\"listbox\");\n\n      fireEvent.click(within(listbox).getByText(\"Option Alpha\"));\n      expect(getByTestId(\"dropdown-chip-alpha\")).toBeInTheDocument();\n      listbox = getByRole(\"listbox\");\n\n      expect(within(listbox).queryByText(\"Option Alpha\")).not.toBeInTheDocument();\n      expect(within(listbox).getByText(\"Option Beta\")).toBeInTheDocument();\n      expect(within(listbox).getByText(\"Option Gamma\")).toBeInTheDocument();\n\n      fireEvent.click(within(listbox).getByText(\"Option Gamma\"));\n      expect(getByTestId(\"dropdown-chip-gamma\")).toBeInTheDocument();\n      listbox = getByRole(\"listbox\");\n\n      expect(within(listbox).queryByText(\"Option Alpha\")).not.toBeInTheDocument();\n      expect(within(listbox).getByText(\"Option Beta\")).toBeInTheDocument();\n      expect(within(listbox).queryByText(\"Option Gamma\")).not.toBeInTheDocument();\n    });\n\n    it(\"should keep selected options in list when showSelectedOptions is true (multi select)\", () => {\n      const { getByPlaceholderText, getByRole, getByTestId } = renderDropdown({\n        options: showSelectedTestOptions,\n        showSelectedOptions: true,\n        multi: true,\n        placeholder: \"Select multi true\"\n      });\n      const input = getByPlaceholderText(\"Select multi true\");\n      fireEvent.click(input);\n      let listbox = getByRole(\"listbox\");\n\n      fireEvent.click(within(listbox).getByText(\"Option Alpha\"));\n      expect(getByTestId(\"dropdown-chip-alpha\")).toBeInTheDocument();\n      listbox = getByRole(\"listbox\");\n      expect(within(listbox).getByText(\"Option Alpha\")).toBeInTheDocument();\n      expect(within(listbox).getByText(\"Option Beta\")).toBeInTheDocument();\n\n      fireEvent.click(within(listbox).getByText(\"Option Beta\"));\n      expect(getByTestId(\"dropdown-chip-beta\")).toBeInTheDocument();\n      listbox = getByRole(\"listbox\");\n      expect(within(listbox).getByText(\"Option Alpha\")).toBeInTheDocument();\n      expect(within(listbox).getByText(\"Option Beta\")).toBeInTheDocument();\n    });\n  });\n\n  describe(\"Box Mode\", () => {\n    it(\"should render single select in box mode with input visible and menu always open\", () => {\n      const { getByRole, getByPlaceholderText, getByText } = renderDropdown({\n        boxMode: true,\n        searchable: true\n      });\n\n      // Input should be visible\n      const input = getByPlaceholderText(\"Select an option\");\n      expect(input).toBeInTheDocument();\n\n      // Menu should be visible without clicking\n      const listbox = getByRole(\"listbox\");\n      expect(listbox).toBeInTheDocument();\n      expect(getByText(\"Option 1\")).toBeInTheDocument();\n      expect(getByText(\"Option 3\")).toBeInTheDocument();\n    });\n\n    it(\"should work with multi select in box mode\", () => {\n      const { getByRole, getByPlaceholderText, getByTestId } = renderDropdown({\n        boxMode: true,\n        multi: true,\n        searchable: true\n      });\n\n      // Input should be visible\n      const input = getByPlaceholderText(\"Select an option\");\n      expect(input).toBeInTheDocument();\n\n      // Menu should be visible\n      const listbox = getByRole(\"listbox\");\n      expect(listbox).toBeInTheDocument();\n\n      // Select an option\n      fireEvent.click(within(listbox).getByText(\"Option 1\"));\n      expect(getByTestId(\"dropdown-chip-opt1\")).toBeInTheDocument();\n    });\n\n    it(\"should hide chevron in box mode\", () => {\n      const { queryByRole } = renderDropdown({\n        boxMode: true,\n        searchable: true\n      });\n\n      // Chevron button should not be rendered\n      const chevronButton = queryByRole(\"button\", { name: /expand|collapse/i });\n      expect(chevronButton).not.toBeInTheDocument();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/components/DropdownBase/DropdownBase.module.scss",
    "content": ".outerWrapper {\n  width: 100%;\n}\n.wrapper {\n  --border-color: var(--ui-border-color);\n  --background-color: var(--secondary-background-color);\n\n  border-radius: var(--border-radius-small);\n  box-shadow: inset 0 0 0 1px var(--border-color);\n  background: var(--background-color);\n  cursor: pointer;\n\n  &:hover {\n    --border-color: var(--primary-text-color);\n  }\n\n  &.active,\n  &:focus {\n    --border-color: var(--primary-color);\n  }\n\n  &.disabled {\n    --border-color: var(--disabled-background-color);\n    --background-color: var(--disabled-background-color);\n    cursor: not-allowed;\n  }\n\n  &.readOnly {\n    --border-color: var(--allgrey-background-color);\n    --background-color: var(--allgrey-background-color);\n    cursor: default;\n  }\n\n  &.error {\n    --border-color: var(--negative-color);\n  }\n\n  &.boxMode {\n    box-shadow: none;\n    background: transparent;\n    cursor: default;\n  }\n\n  &.borderless {\n    --border-color: transparent;\n\n    &:hover {\n      --border-color: var(--primary-text-color);\n    }\n\n    &.active,\n    &:focus {\n      --border-color: var(--primary-color);\n    }\n  }\n}\n.helperText {\n  margin-top: var(--space-4);\n}\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/components/DropdownBase/DropdownBase.tsx",
    "content": "import React from \"react\";\nimport cx from \"classnames\";\nimport FieldLabel from \"../../../FieldLabel/FieldLabel\";\nimport { Text } from \"@vibe/typography\";\nimport styles from \"./DropdownBase.module.scss\";\nimport { getTestId } from \"../../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../../../tests/constants\";\nimport { useDropdownContext } from \"../../context/DropdownContext\";\nimport { type BaseItemData } from \"../../../BaseItem\";\nimport { Tooltip } from \"@vibe/tooltip\";\n\ninterface DropdownBaseProps {\n  dropdownRef: React.Ref<HTMLDivElement>;\n  children: React.ReactNode;\n}\n\nconst DropdownBase = ({ dropdownRef, children }: DropdownBaseProps) => {\n  const {\n    label,\n    required,\n    getLabelProps,\n    className,\n    id,\n    \"aria-label\": ariaLabel,\n    \"data-testid\": dataTestIdFromContext,\n    disabled,\n    readOnly,\n    error,\n    isFocused,\n    isOpen,\n    helperText,\n    dir,\n    tooltipProps,\n    boxMode,\n    borderless\n  } = useDropdownContext<BaseItemData>();\n\n  const coreDropdownElement = (\n    <div\n      ref={dropdownRef}\n      className={cx(\n        styles.wrapper,\n        {\n          [styles.disabled]: disabled,\n          [styles.readOnly]: readOnly,\n          [styles.error]: error,\n          [styles.active]: isFocused || isOpen,\n          [styles.boxMode]: boxMode,\n          [styles.borderless]: borderless\n        },\n        className\n      )}\n      id={id}\n      aria-label={ariaLabel}\n      data-testid={dataTestIdFromContext || getTestId(ComponentDefaultTestId.DROPDOWN, id)}\n      data-vibe={ComponentVibeId.DROPDOWN}\n    >\n      {children}\n    </div>\n  );\n\n  return (\n    <div dir={dir} className={styles.outerWrapper}>\n      {label && <FieldLabel labelText={label} required={required} {...getLabelProps()} />}\n      <Tooltip {...tooltipProps} content={tooltipProps?.content}>\n        {coreDropdownElement}\n      </Tooltip>\n      {helperText && (\n        <Text color={error ? \"negative\" : \"secondary\"} className={styles.helperText}>\n          {helperText}\n        </Text>\n      )}\n    </div>\n  );\n};\n\nexport default DropdownBase;\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/components/DropdownBaseList/DropdownBaseList.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n.wrapper {\n  overflow-y: auto;\n  @include scroller();\n  padding: 0;\n  margin: 0;\n\n  .groupTitle {\n    color: var(--secondary-text-color);\n    padding: var(--space-8) var(--space-4);\n    background-color: var(--secondary-background-color);\n\n    &.sticky {\n      position: sticky;\n      top: 0;\n    }\n  }\n\n  > li:not(:last-child) {\n    margin-bottom: 2px;\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/components/DropdownBaseList/DropdownBaseList.tsx",
    "content": "import React, { forwardRef } from \"react\";\nimport BaseItem from \"../../../BaseItem/BaseItem\";\nimport styles from \"./DropdownBaseList.module.scss\";\nimport { type DropdownBaseListProps } from \"./DropdownBaseList.types\";\nimport { Flex } from \"@vibe/layout\";\nimport { Text, type TextType } from \"@vibe/typography\";\nimport cx from \"classnames\";\nimport { Divider } from \"../../../Divider\";\n\nconst DropdownBaseList = forwardRef(\n  <Item extends Record<string, unknown>>(\n    {\n      options,\n      selectedItems,\n      highlightedIndex,\n      menuAriaLabel,\n      getMenuProps,\n      getItemProps,\n      size = \"medium\",\n      withGroupDivider = false,\n      dir = \"ltr\",\n      itemRenderer,\n      menuRenderer,\n      noOptionsMessage = \"No results\",\n      stickyGroupTitle = false,\n      renderOptions = true,\n      onScroll,\n      maxMenuHeight = 300\n    }: DropdownBaseListProps<Item>,\n    ref: React.Ref<HTMLUListElement>\n  ) => {\n    const textVariant: TextType = size === \"small\" ? \"text2\" : \"text1\";\n\n    const defaultContent = renderOptions ? (\n      options.every(group => group.options?.length === 0) ? (\n        <div role=\"status\">\n          {typeof noOptionsMessage === \"string\" ? (\n            <Flex justify=\"center\">\n              <BaseItem component=\"div\" item={{ label: noOptionsMessage, value: \"\" }} size={size} readOnly />\n            </Flex>\n          ) : (\n            noOptionsMessage\n          )}\n        </div>\n      ) : (\n        options.map((group, groupIndex) => (\n          <React.Fragment key={group.label ?? groupIndex}>\n            {group.label && (\n              <li className={cx(styles.groupTitle, { [styles.sticky]: stickyGroupTitle })}>\n                <Text type={textVariant} color=\"inherit\">\n                  {group.label}\n                </Text>\n              </li>\n            )}\n            {group.options.map((option, itemIndex) => {\n              const itemProps = getItemProps?.({ item: option, index: option.index }) ?? {};\n              const isHighlighted =\n                highlightedIndex !== undefined && highlightedIndex === option.index && !option.disabled;\n              const isSelected =\n                selectedItems?.some(selectedItem => selectedItem?.value === option.value) && !option.disabled;\n\n              return (\n                <BaseItem<Item>\n                  itemProps={itemProps}\n                  key={typeof option.value === \"string\" ? option.value : itemIndex}\n                  size={size}\n                  highlighted={isHighlighted}\n                  selected={isSelected}\n                  itemRenderer={itemRenderer}\n                  item={option}\n                  role=\"option\"\n                />\n              );\n            })}\n            {withGroupDivider && groupIndex < options.length - 1 && <Divider />}\n          </React.Fragment>\n        ))\n      )\n    ) : null;\n\n    return (\n      <ul\n        ref={ref}\n        dir={dir}\n        className={styles.wrapper}\n        {...getMenuProps?.({ \"aria-label\": menuAriaLabel })}\n        onScroll={onScroll}\n        style={{ maxHeight: maxMenuHeight }}\n      >\n        {menuRenderer && renderOptions\n          ? menuRenderer({\n              children: defaultContent,\n              filteredOptions: options,\n              selectedItem: selectedItems?.[0] || null,\n              selectedItems: selectedItems || []\n            })\n          : defaultContent}\n      </ul>\n    );\n  }\n);\n\nexport default DropdownBaseList as <Item extends Record<string, unknown>>(\n  props: DropdownBaseListProps<Item> & { ref?: React.Ref<HTMLUListElement> }\n) => React.ReactElement;\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/components/DropdownBaseList/DropdownBaseList.types.ts",
    "content": "import { type ReactNode } from \"react\";\nimport type React from \"react\";\nimport { type VibeComponentProps } from \"../../../../types\";\nimport { type BaseItemData, type BaseItemSizes, type BaseItemDirection } from \"../../../BaseItem\";\n\nexport interface DropdownBaseListProps<Item = Record<string, unknown>>\n  extends React.HTMLAttributes<HTMLUListElement>,\n    VibeComponentProps {\n  /**\n   * The list of options available in the list.\n   */\n  options: DropdownListGroup<Item>[];\n  /**\n   * The selected item in the list.\n   */\n  selectedItems?: BaseItemData<Item>[] | null;\n  /**\n   * The index of the highlighted item in the list.\n   */\n  highlightedIndex?: number;\n  /**\n   * The ARIA label for the menu.\n   */\n  menuAriaLabel?: string;\n  /**\n   * Function to get props for the menu container.\n   */\n  getMenuProps?: ((options?: any, otherOptions?: any) => Record<string, unknown>) | null;\n  /**\n   * Function to get props for each item in the list.\n   */\n  getItemProps?: ((options: any) => Record<string, unknown>) | null;\n  /**\n   * The size of the list item.\n   */\n  size?: BaseItemSizes;\n  /**\n   * If true, displays dividers between grouped options.\n   */\n  withGroupDivider?: boolean;\n  /**\n   * If true, makes the group title sticky.\n   */\n  stickyGroupTitle?: boolean;\n  /**\n   * The text direction of the list.\n   */\n  dir?: BaseItemDirection;\n  /**\n   * Custom renderer for options.\n   */\n  itemRenderer?: (item: BaseItemData<Item>) => React.ReactNode;\n  /**\n   * Custom renderer for the entire menu content inside the ul element.\n   */\n  menuRenderer?: (props: {\n    children: React.ReactNode;\n    filteredOptions: DropdownListGroup<Item>[];\n    selectedItem?: Item | null;\n    selectedItems?: Item[];\n  }) => React.ReactNode;\n  /**\n   * Text or function to customize the \"No results\" message.\n   */\n  noOptionsMessage?: string | ReactNode;\n  /**\n   * If true, the options are rendered.\n   */\n  renderOptions?: boolean;\n  /**\n   * Function to handle scroll events.\n   */\n  onScroll?: (event: React.UIEvent<HTMLUListElement>) => void;\n  /**\n   * The maximum height of the list.\n   */\n  maxMenuHeight?: number;\n}\n\nexport interface DropdownListGroup<Item = Record<string, unknown>> {\n  /**\n   * The label for the group of options.\n   */\n  label?: string;\n  /**\n   * The list of options within this group.\n   */\n  options: BaseItemData<Item>[];\n}\n\nexport type { BaseItemSizes, BaseItemDirection };\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/components/DropdownBoxMode/DropdownBoxMode.module.scss",
    "content": ".boxModeContainer {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n.inputContainer {\n  --border-color: var(--ui-border-color);\n  --background-color: var(--secondary-background-color);\n\n  border-radius: var(--border-radius-small);\n  box-shadow: inset 0 0 0 1px var(--border-color);\n  background: var(--background-color);\n  width: 100%;\n\n  &:hover {\n    --border-color: var(--primary-text-color);\n  }\n\n  &:focus-within {\n    --border-color: var(--primary-color);\n  }\n\n  &.disabled {\n    --border-color: var(--disabled-background-color);\n    --background-color: var(--disabled-background-color);\n  }\n\n  &.readOnly {\n    --border-color: var(--allgrey-background-color);\n    --background-color: var(--allgrey-background-color);\n  }\n\n  &.error {\n    --border-color: var(--negative-color);\n  }\n}\n\n.menuContainer {\n  width: 100%;\n}\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/components/DropdownBoxMode/DropdownBoxMode.tsx",
    "content": "import React from \"react\";\nimport cx from \"classnames\";\nimport { useDropdownContext } from \"../../context/DropdownContext\";\nimport MenuList from \"../Menu/MenuList\";\nimport SingleSelectTrigger from \"../Trigger/SingleSelectTrigger\";\nimport MultiSelectTrigger from \"../Trigger/MultiSelectTrigger\";\nimport { Flex } from \"@vibe/layout\";\nimport styles from \"./DropdownBoxMode.module.scss\";\n\nconst DropdownBoxMode = () => {\n  const { multi, searchable, disabled, readOnly, error, menuWrapperClassName } = useDropdownContext();\n\n  if (!searchable) {\n    return null;\n  }\n\n  return (\n    <Flex direction=\"column\" gap=\"xs\" className={cx(styles.boxModeContainer)}>\n      <div\n        className={cx(styles.inputContainer, {\n          [styles.disabled]: disabled,\n          [styles.readOnly]: readOnly,\n          [styles.error]: error\n        })}\n      >\n        {multi ? <MultiSelectTrigger /> : <SingleSelectTrigger />}\n      </div>\n      <div className={cx(styles.menuContainer, menuWrapperClassName)}>\n        <MenuList />\n      </div>\n    </Flex>\n  );\n};\n\nexport default DropdownBoxMode;\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/components/DropdownPopup/DropdownPopup.tsx",
    "content": "import React from \"react\";\nimport { Dialog } from \"@vibe/dialog\";\nimport { matchWidthMiddleware } from \"../../utils/dropdown-modifiers\";\nimport { useDropdownContext } from \"../../context/DropdownContext\";\nimport Menu from \"../Menu/Menu\";\nimport SingleSelectTrigger from \"../Trigger/SingleSelectTrigger\";\nimport MultiSelectTrigger from \"../Trigger/MultiSelectTrigger\";\n\nconst DropdownPopup = () => {\n  const { multi } = useDropdownContext();\n\n  return (\n    <Dialog\n      open\n      useDerivedStateFromProps\n      position=\"bottom-start\"\n      moveBy={{ main: 4, secondary: 0 }}\n      observeContentResize={true}\n      showTrigger={[]}\n      hideTrigger={[]}\n      middleware={[matchWidthMiddleware]}\n      content={<Menu />}\n      referenceWrapperElement=\"div\"\n    >\n      {multi ? <MultiSelectTrigger /> : <SingleSelectTrigger />}\n    </Dialog>\n  );\n};\n\nexport default DropdownPopup;\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/components/DropdownWrapperUI.tsx",
    "content": "import React from \"react\";\nimport { DropdownContext } from \"../context/DropdownContext\";\nimport { type DropdownContextProps } from \"../context/DropdownContext.types\";\nimport DropdownPopup from \"./DropdownPopup/DropdownPopup\";\nimport DropdownBoxMode from \"./DropdownBoxMode/DropdownBoxMode\";\nimport { type BaseItemData } from \"../../BaseItem\";\nimport DropdownBase from \"./DropdownBase/DropdownBase\";\n\ninterface DropdownWrapperUIProps<Item extends BaseItemData<Record<string, unknown>>> {\n  contextValue: DropdownContextProps<Item>;\n  dropdownRef: React.Ref<HTMLDivElement>;\n}\n\nconst DropdownWrapperUI = <Item extends BaseItemData<Record<string, unknown>>>(props: DropdownWrapperUIProps<Item>) => {\n  const { contextValue, dropdownRef } = props;\n\n  return (\n    <DropdownContext.Provider value={contextValue}>\n      <DropdownBase dropdownRef={dropdownRef}>\n        {contextValue.boxMode ? <DropdownBoxMode /> : <DropdownPopup />}\n      </DropdownBase>\n    </DropdownContext.Provider>\n  );\n};\n\nexport default DropdownWrapperUI;\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/components/Menu/Menu.module.scss",
    "content": ".menuVisible {\n  visibility: visible;\n}\n\n.menuHidden {\n  visibility: hidden;\n}\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/components/Menu/Menu.tsx",
    "content": "import React from \"react\";\nimport cx from \"classnames\";\nimport { DialogContentContainer } from \"@vibe/dialog\";\nimport { useDropdownContext } from \"../../context/DropdownContext\";\nimport { type BaseItemData } from \"../../../BaseItem\";\nimport MenuList from \"./MenuList\";\nimport styles from \"./Menu.module.scss\";\n\nconst Menu = <Item extends BaseItemData<Record<string, unknown>>>() => {\n  const { isOpen, menuWrapperClassName } = useDropdownContext<Item>();\n\n  return (\n    <DialogContentContainer\n      className={cx({ [styles.menuVisible]: isOpen, [styles.menuHidden]: !isOpen }, menuWrapperClassName)}\n      style={!isOpen ? { padding: 0 } : undefined}\n    >\n      <MenuList<Item> />\n    </DialogContentContainer>\n  );\n};\n\nexport default Menu;\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/components/Menu/MenuList.tsx",
    "content": "import React from \"react\";\nimport BaseList from \"../DropdownBaseList/DropdownBaseList\";\nimport { useDropdownContext } from \"../../context/DropdownContext\";\nimport { type BaseItemData } from \"../../../BaseItem\";\n\nconst MenuList = <Item extends BaseItemData<Record<string, unknown>>>() => {\n  const {\n    filteredOptions,\n    highlightedIndex,\n    getMenuProps,\n    getItemProps,\n    optionRenderer,\n    menuRenderer,\n    size,\n    withGroupDivider,\n    stickyGroupTitle,\n    dir,\n    noOptionsMessage,\n    maxMenuHeight,\n    onScroll,\n    menuAriaLabel,\n    selectedItem,\n    selectedItems,\n    multi,\n    isOpen,\n    boxMode\n  } = useDropdownContext<Item>();\n\n  const currentSelection = selectedItems?.length > 0 ? selectedItems : selectedItem ? [selectedItem] : [];\n\n  const enhancedGetMenuProps = (props?: Record<string, unknown>) => {\n    const baseProps = getMenuProps?.(props) || {};\n    return multi ? { ...baseProps, \"aria-multiselectable\": \"true\" } : baseProps;\n  };\n\n  return (\n    <BaseList<Item>\n      size={size}\n      options={filteredOptions}\n      selectedItems={currentSelection}\n      highlightedIndex={highlightedIndex}\n      menuAriaLabel={menuAriaLabel}\n      getMenuProps={enhancedGetMenuProps}\n      getItemProps={getItemProps}\n      withGroupDivider={withGroupDivider}\n      stickyGroupTitle={stickyGroupTitle}\n      dir={dir}\n      itemRenderer={optionRenderer}\n      noOptionsMessage={noOptionsMessage}\n      renderOptions={boxMode ? true : isOpen}\n      onScroll={onScroll}\n      maxMenuHeight={maxMenuHeight}\n      menuRenderer={menuRenderer}\n    />\n  );\n};\n\nexport default MenuList;\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/components/MultiSelectedValues/MultiSelectedValues.module.scss",
    "content": ".containerWrapper {\n  min-width: 1px;\n  flex-grow: 1;\n\n  &.singleChip {\n    > div:first-child {\n      min-width: 50px;\n      flex-shrink: 1;\n\n      div {\n        max-width: 100%;\n      }\n    }\n  }\n\n  &.measuring {\n    > div:not(.hiddenChip) {\n      opacity: 0;\n    }\n  }\n}\n\n.inputAndCounterWrapper {\n  flex-grow: 1;\n  min-width: 0;\n}\n\n.inputWrapper {\n  flex-grow: 1;\n\n  input {\n    width: 100%;\n  }\n}\n\n.chipWrapperWithOverflow {\n  max-width: 100%;\n  flex-shrink: 0;\n\n  .visibleChip {\n    max-width: 100%;\n  }\n}\n\n.hiddenChip {\n  position: absolute;\n  visibility: hidden;\n  pointer-events: none;\n  z-index: -1;\n}\n.hiddenChipsDialog {\n  max-width: 192px;\n}\n.dialogChip {\n  max-width: 100%;\n}\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/components/MultiSelectedValues/MultiSelectedValues.tsx",
    "content": "import React, { useRef, useMemo, createRef } from \"react\";\nimport { type BaseItemData } from \"../../../BaseItem\";\nimport { Chips } from \"../../../Chips\";\nimport { Flex } from \"@vibe/layout\";\nimport { DialogContentContainer, Dialog } from \"@vibe/dialog\";\nimport useItemsOverflow from \"../../../../hooks/useItemsOverflow/useItemsOverflow\";\nimport styles from \"./MultiSelectedValues.module.scss\";\nimport cx from \"classnames\";\nimport DropdownChip from \"../Trigger/DropdownChip\";\n\nconst INPUT_DEDUCTED_WIDTH = 48;\n\ntype MultiSelectedValuesProps<Item> = {\n  selectedItems: Item[];\n  onRemove: (item: Item) => void;\n  renderInput?: () => React.ReactNode;\n  disabled?: boolean;\n  readOnly?: boolean;\n  minVisibleCount?: number;\n};\n\nfunction MultiSelectedValues<Item extends BaseItemData<Record<string, unknown>>>({\n  selectedItems,\n  onRemove,\n  renderInput,\n  disabled,\n  readOnly,\n  minVisibleCount = 0\n}: MultiSelectedValuesProps<Item>) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const deductedSpaceRef = useRef<HTMLDivElement>(null);\n\n  const itemRefs = useMemo(() => selectedItems.map(() => createRef<HTMLDivElement>()), [selectedItems]);\n\n  const { visibleCount, hasMeasured } = useItemsOverflow({\n    containerRef,\n    itemRefs,\n    gap: 4,\n    deductedSpaceRef,\n    deductedWidth: renderInput ? INPUT_DEDUCTED_WIDTH : 0,\n    minVisibleCount: selectedItems.length === 1 ? 1 : minVisibleCount\n  });\n\n  const { hiddenItems, hiddenCount } = useMemo(() => {\n    const hiddenItems = selectedItems.length > visibleCount ? selectedItems.slice(visibleCount) : [];\n    return {\n      hiddenItems,\n      hiddenCount: hiddenItems.length\n    };\n  }, [selectedItems, visibleCount]);\n\n  const dialogContent = useMemo(() => {\n    return () => (\n      <DialogContentContainer>\n        <Flex direction=\"column\" gap=\"xs\" align=\"start\" className={styles.hiddenChipsDialog}>\n          {hiddenItems.map(item => {\n            return (\n              <DropdownChip\n                key={`dropdown-chip-dialog-${item.value}`}\n                item={item}\n                onDelete={() => onRemove(item)}\n                className={styles.dialogChip}\n                disabled={disabled}\n                readOnly={readOnly}\n              />\n            );\n          })}\n        </Flex>\n      </DialogContentContainer>\n    );\n  }, [hiddenItems, onRemove, disabled, readOnly]);\n\n  const chipElements = useMemo(() => {\n    return selectedItems.map((item, index) => {\n      const isVisible = index < visibleCount;\n\n      return (\n        <div\n          key={`dropdown-chip-visible-${item.value}`}\n          ref={itemRefs[index]}\n          className={cx({\n            [styles.chipWrapperWithOverflow]: minVisibleCount !== undefined,\n            [styles.hiddenChip]: !isVisible\n          })}\n          aria-hidden={!isVisible}\n          data-testid={`dropdown-chip-${item.value}`}\n        >\n          <DropdownChip\n            item={item}\n            onDelete={() => onRemove(item)}\n            disabled={disabled}\n            readOnly={readOnly}\n            className={styles.visibleChip}\n          />\n        </div>\n      );\n    });\n  }, [selectedItems, visibleCount, onRemove, itemRefs, disabled, readOnly, minVisibleCount]);\n\n  if (!selectedItems?.length) return null;\n\n  const isSingleChip = selectedItems.length === 1;\n\n  return (\n    <Flex\n      align=\"center\"\n      wrap={false}\n      gap=\"xs\"\n      ref={containerRef}\n      className={cx(styles.containerWrapper, {\n        [styles.singleChip]: isSingleChip,\n        [styles.measuring]: !hasMeasured\n      })}\n    >\n      {chipElements}\n\n      <Flex gap=\"xs\" className={styles.inputAndCounterWrapper}>\n        {hiddenCount > 0 && (\n          <div\n            ref={deductedSpaceRef}\n            onClick={e => {\n              e.stopPropagation();\n            }}\n            onKeyDown={e => {\n              e.stopPropagation();\n            }}\n            onMouseDown={e => {\n              e.stopPropagation();\n            }}\n          >\n            <Dialog\n              content={dialogContent}\n              showTrigger={[\"click\", \"enter\"]}\n              hideTrigger={[\"clickoutside\", \"enter\"]}\n              position=\"bottom\"\n              moveBy={{ main: 4 }}\n              hideWhenReferenceHidden\n              addKeyboardHideShowTriggersByDefault\n            >\n              <Chips\n                label={`+ ${hiddenCount}`}\n                readOnly\n                noMargin\n                aria-label={`+${hiddenCount}. ${selectedItems.length - hiddenCount} items are visible out of ${\n                  selectedItems.length\n                }`}\n                data-testid=\"dropdown-overflow-counter\"\n                className={styles.overflowCounter}\n                onClick={() => {}}\n                onMouseDown={e => {\n                  e.preventDefault();\n                }}\n              />\n            </Dialog>\n          </div>\n        )}\n        {renderInput && <div className={styles.inputWrapper}>{renderInput()}</div>}\n      </Flex>\n    </Flex>\n  );\n}\n\nexport default MultiSelectedValues;\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/components/Trigger/DropdownChip.tsx",
    "content": "import React from \"react\";\nimport { Chips, type ChipsProps } from \"../../../Chips\";\nimport { type BaseItemData } from \"../../../BaseItem\";\n\nconst getChipPropsFromItemElements = (item: BaseItemData<Record<string, unknown>>): Partial<ChipsProps> => {\n  const chipProps: Partial<ChipsProps> = {};\n  if (item?.startElement) {\n    switch (item?.startElement?.type) {\n      case \"icon\":\n        chipProps.leftIcon = item?.startElement?.value;\n        break;\n      case \"avatar\":\n        chipProps.leftAvatar = item?.startElement?.value;\n        break;\n      case \"custom\":\n        chipProps.leftRenderer = item?.startElement?.render() as React.ReactNode;\n        break;\n      default:\n        break;\n    }\n  }\n\n  if (item?.endElement) {\n    switch (item?.endElement?.type) {\n      case \"icon\":\n        chipProps.rightIcon = item?.endElement?.value;\n        break;\n      case \"custom\":\n        chipProps.rightRenderer = item?.endElement?.render() as React.ReactNode;\n        break;\n      default:\n        break;\n    }\n  }\n  return chipProps;\n};\n\ninterface DropdownChipProps<Item extends BaseItemData<Record<string, unknown>>> {\n  item: Item;\n  onDelete: () => void;\n  disabled?: boolean;\n  readOnly?: boolean;\n  className?: string;\n}\n\nconst DropdownChip = <Item extends BaseItemData<Record<string, unknown>>>({\n  item,\n  onDelete,\n  disabled,\n  readOnly,\n  className\n}: DropdownChipProps<Item>) => {\n  const chipSpecificProps = getChipPropsFromItemElements(item);\n\n  return (\n    <Chips\n      label={item.label}\n      closeButtonAriaLabel={`Remove ${item.label}`}\n      onDelete={onDelete}\n      disabled={disabled}\n      readOnly={readOnly}\n      noMargin\n      className={className}\n      color={item.chipColor || \"primary\"}\n      {...chipSpecificProps}\n    />\n  );\n};\n\nexport default DropdownChip;\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/components/Trigger/DropdownInput.tsx",
    "content": "import React, { useRef } from \"react\";\nimport cx from \"classnames\";\nimport { BaseInput } from \"@vibe/base\";\nimport styles from \"./Trigger.module.scss\";\nimport { useDropdownContext } from \"../../context/DropdownContext\";\nimport { type BaseItemData } from \"../../../BaseItem\";\nimport { Text } from \"@vibe/typography\";\n\nconst DropdownInput = ({ inputSize, fullWidth }: { inputSize?: \"small\" | \"medium\" | \"large\"; fullWidth?: boolean }) => {\n  const {\n    inputValue,\n    autoFocus,\n    disabled,\n    readOnly,\n    placeholder,\n    multi,\n    selectedItem,\n    selectedItems = [],\n    inputAriaLabel,\n    searchable,\n    size,\n    label,\n    isOpen,\n    getDropdownProps,\n    getLabelProps,\n    getInputProps\n  } = useDropdownContext<BaseItemData>();\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const hasSelection = multi ? selectedItems.length > 0 : !!selectedItem;\n  const multipleSelectionDropdownProps = getDropdownProps ? getDropdownProps({ preventKeyAction: isOpen }) : {};\n\n  return (\n    <>\n      {searchable ? (\n        <BaseInput\n          {...getInputProps({\n            \"aria-labelledby\": label ? getLabelProps().id : undefined,\n            \"aria-label\": inputAriaLabel || (label ? undefined : getLabelProps()?.id),\n            placeholder: hasSelection ? \"\" : placeholder,\n            ref: inputRef,\n            ...multipleSelectionDropdownProps\n          })}\n          inputRole=\"combobox\"\n          value={inputValue || \"\"}\n          autoFocus={autoFocus}\n          size={inputSize || size}\n          className={cx(styles.inputWrapper, {\n            [styles.hasSelected]: !multi && selectedItem && !inputValue,\n            [styles.small]: inputSize === \"small\",\n            [styles.multi]: multi && hasSelection,\n            [styles.multiSelected]: multi && hasSelection && inputSize === \"small\",\n            [styles.fullWidth]: fullWidth\n          })}\n          disabled={disabled}\n          readOnly={readOnly}\n        />\n      ) : (\n        <>\n          {!hasSelection && placeholder && (\n            <Text\n              color=\"secondary\"\n              className={cx(styles.placeholderText, {\n                [styles.disabled]: !!disabled\n              })}\n              type={size === \"small\" ? \"text2\" : \"text1\"}\n            >\n              {placeholder}\n            </Text>\n          )}\n        </>\n      )}\n    </>\n  );\n};\n\nexport default DropdownInput;\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/components/Trigger/MultiSelectTrigger.tsx",
    "content": "import React from \"react\";\nimport { Flex } from \"@vibe/layout\";\nimport MultiSelectedValues from \"../MultiSelectedValues/MultiSelectedValues\";\nimport DropdownInput from \"./DropdownInput\";\nimport { useDropdownContext } from \"../../context/DropdownContext\";\nimport { type BaseItemData } from \"../../../BaseItem\";\nimport TriggerActions from \"./TriggerActions\";\nimport styles from \"./Trigger.module.scss\";\nimport { getStyle } from \"@vibe/shared\";\nimport cx from \"classnames\";\nimport DropdownChip from \"./DropdownChip\";\n\nconst MultiSelectTrigger = () => {\n  const {\n    selectedItems = [],\n    contextOnOptionRemove,\n    multiline,\n    disabled,\n    readOnly,\n    error,\n    size,\n    searchable,\n    getToggleButtonProps,\n    label,\n    getLabelProps,\n    \"aria-label\": ariaLabel,\n    minVisibleCount\n  } = useDropdownContext<BaseItemData>();\n\n  return (\n    <Flex justify=\"space-between\" align=\"center\">\n      <div\n        className={cx(styles.triggerWrapper, getStyle(styles, size))}\n        {...(!searchable\n          ? getToggleButtonProps({\n              \"aria-haspopup\": \"dialog\",\n              \"aria-labelledby\": label ? getLabelProps().id : undefined,\n              \"aria-label\": ariaLabel || (label ? undefined : getLabelProps()?.id),\n              \"aria-disabled\": disabled ? \"true\" : undefined,\n              \"aria-invalid\": error ? \"true\" : undefined,\n              \"aria-readonly\": readOnly ? \"true\" : undefined\n            })\n          : {})}\n      >\n        {selectedItems.length > 0 ? (\n          <div className={styles.multiWrapper}>\n            {!multiline ? (\n              <MultiSelectedValues\n                disabled={disabled}\n                readOnly={readOnly}\n                selectedItems={selectedItems}\n                onRemove={item => {\n                  contextOnOptionRemove?.(item);\n                }}\n                renderInput={searchable ? () => <DropdownInput inputSize=\"small\" fullWidth /> : undefined}\n                minVisibleCount={minVisibleCount}\n              />\n            ) : (\n              <Flex gap=\"xs\" wrap>\n                {selectedItems.map((item, index) => (\n                  <Flex key={String(item.id ?? item.value ?? index)}>\n                    <div style={{ flexShrink: 0 }}>\n                      <DropdownChip\n                        item={item}\n                        onDelete={() => {\n                          contextOnOptionRemove?.(item);\n                        }}\n                        readOnly={readOnly}\n                        disabled={disabled}\n                      />\n                    </div>\n                    {index === selectedItems.length - 1 && <DropdownInput inputSize=\"small\" />}\n                  </Flex>\n                ))}\n              </Flex>\n            )}\n          </div>\n        ) : (\n          <DropdownInput />\n        )}\n      </div>\n      <TriggerActions />\n    </Flex>\n  );\n};\n\nexport default MultiSelectTrigger;\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/components/Trigger/SingleSelectTrigger.tsx",
    "content": "import React from \"react\";\nimport cx from \"classnames\";\nimport { BaseItem, type BaseItemData } from \"../../../BaseItem\";\nimport DropdownInput from \"./DropdownInput\";\nimport styles from \"./Trigger.module.scss\";\nimport { useDropdownContext } from \"../../context/DropdownContext\";\nimport { Flex } from \"@vibe/layout\";\nimport TriggerActions from \"./TriggerActions\";\nimport { getStyle } from \"@vibe/shared\";\n\nconst SingleSelectTrigger = () => {\n  const {\n    inputValue,\n    selectedItem,\n    searchable,\n    size,\n    valueRenderer,\n    isFocused,\n    getToggleButtonProps,\n    disabled,\n    readOnly,\n    error,\n    label,\n    getLabelProps,\n    \"aria-label\": ariaLabel\n  } = useDropdownContext<BaseItemData>();\n\n  return (\n    <Flex justify=\"space-between\" align=\"center\">\n      <div\n        className={cx(styles.triggerWrapper, getStyle(styles, size))}\n        {...(!searchable\n          ? getToggleButtonProps({\n              \"aria-haspopup\": \"dialog\",\n              \"aria-labelledby\": label ? getLabelProps().id : undefined,\n              \"aria-label\": ariaLabel || (label ? undefined : getLabelProps()?.id),\n              \"aria-disabled\": disabled ? \"true\" : undefined,\n              \"aria-invalid\": error ? \"true\" : undefined,\n              \"aria-readonly\": readOnly ? \"true\" : undefined\n            })\n          : {})}\n      >\n        <DropdownInput />\n\n        {!inputValue && selectedItem && (\n          <div\n            className={cx(\n              styles.selectedItem,\n              {\n                [styles.faded]: isFocused && searchable\n              },\n              getStyle(styles, size)\n            )}\n          >\n            <BaseItem\n              component=\"div\"\n              itemRenderer={valueRenderer}\n              size={size}\n              readOnly\n              item={{\n                ...selectedItem,\n                disabled,\n                startElement: selectedItem.startElement?.type === \"indent\" ? undefined : selectedItem.startElement\n              }}\n            />\n          </div>\n        )}\n      </div>\n      <TriggerActions />\n    </Flex>\n  );\n};\n\nexport default SingleSelectTrigger;\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/components/Trigger/Trigger.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n.triggerWrapper {\n  flex-grow: 1;\n  position: relative;\n  min-width: 1px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  outline: none;\n\n  &.small {\n    min-height: 32px;\n\n    .placeholderText {\n      padding-inline-start: var(--space-8);\n    }\n  }\n\n  &.medium {\n    min-height: 40px;\n  }\n\n  &.large {\n    min-height: 48px;\n  }\n\n  .inputWrapper {\n    border: none;\n    width: 100%;\n    background: transparent;\n\n    &.small {\n      height: 24px;\n      min-height: 24px;\n    }\n\n    &.multiSelected {\n      width: 48px;\n      flex-shrink: 0;\n      padding: 0 var(--space-4);\n\n      &.fullWidth {\n        width: 100%;\n        flex-grow: 1;\n      }\n    }\n\n    &.hasSelected {\n      position: absolute;\n      inset: 0;\n      cursor: pointer;\n    }\n  }\n\n  .selectedItem {\n    position: relative;\n    pointer-events: none;\n    inset: 0;\n    padding-inline-start: 0;\n    width: 100%;\n    @include smoothing-text;\n\n    &.small {\n      min-height: 32px;\n      height: 32px;\n    }\n\n    &.medium {\n      min-height: 40px;\n      height: 40px;\n    }\n\n    &.large {\n      min-height: 48px;\n      height: 48px;\n    }\n\n    &.faded {\n      opacity: 0.6;\n    }\n  }\n\n  .placeholderText {\n    padding-inline-start: var(--space-12);\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    color: var(--placeholder-color);\n    @include smoothing-text;\n\n    &.disabled {\n      color: var(--disabled-text-color);\n    }\n  }\n}\n\n.multiWrapper {\n  padding: var(--space-4) 0 var(--space-4) var(--space-8);\n  width: 100%;\n}\n\n.actionsWrapper {\n  padding: 0 var(--space-4);\n}\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/components/Trigger/TriggerActions.tsx",
    "content": "import React from \"react\";\nimport { CloseSmall, DropdownChevronDown, DropdownChevronUp } from \"@vibe/icons\";\nimport { IconButton } from \"@vibe/icon-button\";\nimport { Flex } from \"@vibe/layout\";\nimport { Loader } from \"@vibe/loader\";\nimport styles from \"./Trigger.module.scss\";\nimport { useDropdownContext } from \"../../context/DropdownContext\";\nimport { type BaseItemData } from \"../../../BaseItem\";\n\nconst sizeMap = {\n  large: \"medium\",\n  medium: \"small\",\n  small: \"xs\"\n} as const;\n\nconst TriggerActions = () => {\n  const {\n    isOpen,\n    reset,\n    contextOnClear,\n    size,\n    disabled,\n    clearable,\n    readOnly,\n    multi,\n    selectedItem,\n    selectedItems = [],\n    toggleMenu,\n    getMenuProps,\n    loading,\n    clearAriaLabel,\n    boxMode\n  } = useDropdownContext<BaseItemData>();\n\n  const hasSelection = multi ? selectedItems?.length > 0 : !!selectedItem;\n  const iconButtonSize = sizeMap[size] || \"small\";\n\n  const handleClear = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    if (contextOnClear) {\n      contextOnClear();\n    } else {\n      reset();\n    }\n  };\n\n  if (readOnly) {\n    return null;\n  }\n\n  return (\n    <div\n      onKeyDown={e => {\n        e.stopPropagation();\n      }}\n    >\n      <Flex className={styles.actionsWrapper}>\n        {loading && (\n          <Loader size={iconButtonSize === \"xs\" ? 16 : iconButtonSize === \"small\" ? 20 : 24} color=\"secondary\" />\n        )}\n        {hasSelection && clearable && !disabled && (\n          <IconButton\n            data-testid=\"dropdown-clear-button\"\n            icon={CloseSmall}\n            onClick={handleClear}\n            size={iconButtonSize}\n            aria-label={clearAriaLabel}\n            hideTooltip\n          />\n        )}\n        {!boxMode && (\n          <IconButton\n            icon={isOpen ? DropdownChevronUp : DropdownChevronDown}\n            size={iconButtonSize}\n            disabled={disabled}\n            aria-controls={getMenuProps().id}\n            aria-expanded={isOpen}\n            aria-labelledby={getMenuProps().id}\n            tabIndex={-1}\n            onClick={() => {\n              toggleMenu();\n            }}\n          />\n        )}\n      </Flex>\n    </div>\n  );\n};\n\nexport default TriggerActions;\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/context/DropdownContext.ts",
    "content": "import type React from \"react\";\nimport { createContext, useContext } from \"react\";\nimport { type DropdownListGroup } from \"../components/DropdownBaseList/DropdownBaseList.types\";\nimport { type BaseItemData } from \"../../BaseItem\";\nimport { type BaseDropdownProps, type DropdownSizes } from \"../Dropdown.types\";\nimport { type DropdownContextProps } from \"./DropdownContext.types\";\n\ntype PropGetter = (options?: any) => Record<string, any>;\ntype ItemPropGetter<Item> = (options: { item: Item; index: number }) => Record<string, any>;\n\nexport interface DropdownContextValue<Item extends BaseItemData<Record<string, unknown>> = any> {\n  isOpen: boolean;\n  inputValue: string | null;\n  highlightedIndex: number | null;\n  selectedItem: Item | null | undefined;\n  selectedItems: Item[];\n  filteredOptions: DropdownListGroup<Item>[];\n\n  getToggleButtonProps: PropGetter;\n  getLabelProps: PropGetter;\n  getMenuProps: PropGetter;\n  getInputProps: PropGetter;\n  getItemProps: ItemPropGetter<Item>;\n  getDropdownProps?: PropGetter;\n\n  reset: () => void;\n  toggleMenu: () => void;\n  onClear?: () => void;\n  onOptionSelect?: (option: Item) => void;\n  onOptionRemove?: (option: Item) => void;\n  addSelectedItem?: (item: Item) => void;\n  removeSelectedItem?: (item: Item) => void;\n  setSelectedItems?: (items: Item[]) => void;\n\n  searchable?: boolean;\n  multi?: boolean;\n  multiline?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  size?: DropdownSizes;\n  optionRenderer?: BaseDropdownProps<Item>[\"optionRenderer\"];\n  valueRenderer?: BaseDropdownProps<Item>[\"valueRenderer\"];\n  noOptionsMessage?: BaseDropdownProps<Item>[\"noOptionsMessage\"];\n  placeholder?: BaseDropdownProps<Item>[\"placeholder\"];\n  withGroupDivider?: BaseDropdownProps<Item>[\"withGroupDivider\"];\n  stickyGroupTitle?: BaseDropdownProps<Item>[\"stickyGroupTitle\"];\n  maxMenuHeight?: BaseDropdownProps<Item>[\"maxMenuHeight\"];\n  clearable?: boolean;\n  autoFocus?: boolean;\n  isFocused?: boolean;\n  inputAriaLabel?: string;\n  menuAriaLabel?: string;\n  closeMenuOnSelect?: boolean;\n  dir?: BaseDropdownProps<Item>[\"dir\"];\n  originalOnFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;\n  originalOnBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;\n  originalOnKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n  originalOnScroll?: (event: React.UIEvent<HTMLUListElement>) => void;\n}\n\nexport const DropdownContext = createContext<DropdownContextProps<any> | undefined>(undefined);\n\nexport function useDropdownContext<Item extends BaseItemData<Record<string, unknown>>>() {\n  const context = useContext(DropdownContext) as DropdownContextProps<Item>;\n  if (context === undefined) {\n    throw new Error(\"useDropdownContext must be used within a DropdownProvider\");\n  }\n  return context;\n}\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/context/DropdownContext.types.ts",
    "content": "import { type DropdownListGroup } from \"../components/DropdownBaseList/DropdownBaseList.types\";\nimport { type BaseItemData } from \"../../BaseItem\";\nimport { type BaseDropdownProps } from \"../Dropdown.types\";\nimport { type TooltipProps } from \"@vibe/tooltip\";\n\ntype PropGetter = (options?: any) => Record<string, any>;\ntype ItemPropGetter<Item> = (options: { item: Item; index: number }) => Record<string, any>;\n\ntype InheritedDropdownProps<Item extends BaseItemData<Record<string, unknown>>> = Partial<\n  Pick<\n    BaseDropdownProps<Item>,\n    | \"label\"\n    | \"required\"\n    | \"className\"\n    | \"id\"\n    | \"aria-label\"\n    | \"data-testid\"\n    | \"error\"\n    | \"helperText\"\n    | \"dir\"\n    | \"searchable\"\n    | \"multi\"\n    | \"multiline\"\n    | \"disabled\"\n    | \"readOnly\"\n    | \"size\"\n    | \"optionRenderer\"\n    | \"valueRenderer\"\n    | \"menuRenderer\"\n    | \"noOptionsMessage\"\n    | \"placeholder\"\n    | \"withGroupDivider\"\n    | \"stickyGroupTitle\"\n    | \"maxMenuHeight\"\n    | \"clearable\"\n    | \"autoFocus\"\n    | \"inputAriaLabel\"\n    | \"menuAriaLabel\"\n    | \"clearAriaLabel\"\n    | \"closeMenuOnSelect\"\n    | \"menuWrapperClassName\"\n    | \"loading\"\n    | \"minVisibleCount\"\n    | \"boxMode\"\n    | \"borderless\"\n    | \"onFocus\"\n    | \"onBlur\"\n    | \"onKeyDown\"\n    | \"onScroll\"\n    | \"onClear\"\n  >\n>;\n\nexport interface DropdownContextProps<Item extends BaseItemData<Record<string, unknown>> = any>\n  extends InheritedDropdownProps<Item> {\n  label?: string;\n  isOpen: boolean;\n  inputValue: string | null;\n  highlightedIndex: number | null;\n  selectedItem?: Item | null | undefined;\n  selectedItems?: Item[];\n  filteredOptions?: DropdownListGroup<Item>[];\n  tooltipProps?: Partial<TooltipProps>;\n\n  getToggleButtonProps: PropGetter;\n  getLabelProps: PropGetter;\n  getMenuProps: PropGetter;\n  getInputProps?: PropGetter;\n  getItemProps: ItemPropGetter<Item>;\n  getDropdownProps?: PropGetter;\n\n  reset: () => void;\n  toggleMenu: () => void;\n  contextOnClear: () => void;\n  contextOnOptionRemove?: (option: Item) => void;\n\n  addSelectedItem?: (item: Item) => void;\n  removeSelectedItem?: (item: Item) => void;\n  isFocused?: boolean;\n}\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/hooks/useDropdownCombobox.ts",
    "content": "import { useCallback, useMemo, useRef, useState } from \"react\";\nimport { useCombobox } from \"downshift\";\nimport useDropdownFiltering from \"./useDropdownFiltering\";\nimport { type BaseItemData } from \"../../BaseItem\";\nimport { type DropdownGroupOption } from \"../Dropdown.types\";\n\nfunction useDropdownCombobox<T extends BaseItemData<Record<string, unknown>>>(\n  options: DropdownGroupOption<T>,\n  isMenuOpen?: boolean,\n  autoFocus?: boolean,\n  closeMenuOnSelect?: boolean,\n  defaultValue?: T,\n  value?: T,\n  inputValueProp?: string,\n  onChange?: (option: T | T[] | null) => void,\n  onInputChange?: (value: string | null) => void,\n  onMenuOpen?: () => void,\n  onMenuClose?: () => void,\n  onOptionSelect?: (option: T) => void,\n  filterOption?: (option: T, inputValue: string) => boolean,\n  showSelectedOptions?: boolean,\n  id?: string\n) {\n  const [currentSelectedItem, setCurrentSelectedItem] = useState<T | null>(defaultValue || null);\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  // Use controlled value if provided, otherwise use internal state\n  const selectedItem = value !== undefined ? value : currentSelectedItem;\n\n  const memoizedSelectedItemForFiltering = useMemo(() => {\n    return selectedItem ? [selectedItem] : [];\n  }, [selectedItem]);\n\n  const { filteredOptions, filterOptions } = useDropdownFiltering<T>(\n    options,\n    filterOption,\n    showSelectedOptions,\n    memoizedSelectedItemForFiltering\n  );\n\n  const flatOptions = useMemo(() => filteredOptions.flatMap(group => group.options), [filteredOptions]);\n  const {\n    isOpen,\n    inputValue,\n    highlightedIndex,\n    getToggleButtonProps,\n    getLabelProps,\n    getMenuProps,\n    getInputProps,\n    getItemProps,\n    reset,\n    openMenu,\n    toggleMenu,\n    closeMenu\n  } = useCombobox<T>({\n    items: flatOptions,\n    itemToString: item => item?.label ?? \"\",\n    itemToKey: item => (item?.value !== undefined ? String(item.value) : \"\"),\n    isItemDisabled: item => Boolean(item.disabled),\n    initialInputValue: inputValueProp || \"\",\n    selectedItem: selectedItem,\n    isOpen: isMenuOpen,\n    initialIsOpen: autoFocus,\n    id,\n    onIsOpenChange: ({ isOpen }) => {\n      isOpen ? onMenuClose?.() : onMenuOpen?.();\n    },\n\n    onInputValueChange: useCallback(\n      ({ inputValue }) => {\n        filterOptions(inputValue || \"\");\n        onInputChange?.(inputValue);\n      },\n      [onInputChange, filterOptions]\n    ),\n    onSelectedItemChange: useCallback(\n      ({ selectedItem }) => {\n        if (value === undefined) {\n          setCurrentSelectedItem(selectedItem || null);\n        }\n        if (selectedItem) {\n          onOptionSelect?.(selectedItem);\n          onChange?.(selectedItem);\n          filterOptions(\"\");\n        } else {\n          onChange?.(null);\n          filterOptions(\"\");\n        }\n      },\n      [value, onOptionSelect, filterOptions, onChange]\n    ),\n    onStateChange: useCallback(\n      ({ type }) => {\n        // Blur input after selection via click or Enter key\n        if (\n          closeMenuOnSelect &&\n          (type === useCombobox.stateChangeTypes.ItemClick || type === useCombobox.stateChangeTypes.InputKeyDownEnter)\n        ) {\n          inputRef.current?.blur();\n        }\n      },\n      [closeMenuOnSelect]\n    ),\n    stateReducer: (state, actionAndChanges) => {\n      switch (actionAndChanges.type) {\n        case useCombobox.stateChangeTypes.InputKeyDownEnter:\n        case useCombobox.stateChangeTypes.ItemClick:\n          return { ...actionAndChanges.changes, inputValue: null, isOpen: !closeMenuOnSelect };\n        case useCombobox.stateChangeTypes.InputBlur:\n        case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:\n          return { ...actionAndChanges.changes, inputValue: null };\n\n        default:\n          return actionAndChanges.changes;\n      }\n    }\n  });\n\n  return {\n    isOpen,\n    inputValue,\n    highlightedIndex,\n    selectedItem,\n    getToggleButtonProps,\n    getLabelProps,\n    getMenuProps,\n    getInputProps: (options?: Parameters<typeof getInputProps>[0]) => getInputProps({ ...options, ref: inputRef }),\n    getItemProps,\n    reset: () => {\n      if (value === undefined) {\n        setCurrentSelectedItem(null);\n      }\n      reset();\n      filterOptions(\"\");\n    },\n    filteredOptions,\n    openMenu,\n    toggleMenu,\n    closeMenu\n  };\n}\n\nexport default useDropdownCombobox;\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/hooks/useDropdownFiltering.ts",
    "content": "import { useState, useEffect } from \"react\";\nimport { normalizeOptions } from \"../utils/dropdownUtils\";\nimport { type BaseItemData } from \"../../BaseItem\";\nimport { type DropdownListGroup } from \"../components/DropdownBaseList/DropdownBaseList.types\";\nimport { type DropdownGroupOption } from \"../Dropdown.types\";\n\nfunction useDropdownFiltering<Item extends BaseItemData>(\n  options: DropdownGroupOption<Item>,\n  filterOption?: (option: Item, inputValue: string) => boolean,\n  showSelectedOptions?: boolean,\n  selectedItems?: Item[]\n) {\n  const [filteredOptions, setFilteredOptions] = useState<DropdownListGroup<Item>[]>(() =>\n    normalizeOptions(options, undefined, undefined, showSelectedOptions, selectedItems)\n  );\n  const [filterValue, setFilterValue] = useState<string>(\"\");\n\n  useEffect(() => {\n    setFilteredOptions(normalizeOptions(options, filterValue, filterOption, showSelectedOptions, selectedItems));\n  }, [options, filterValue, filterOption, showSelectedOptions, selectedItems]);\n\n  const filterOptions = (inputValue: string) => {\n    setFilterValue(inputValue);\n  };\n\n  return { filteredOptions, filterOptions, setFilteredOptions };\n}\n\nexport default useDropdownFiltering;\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/hooks/useDropdownMultiCombobox.ts",
    "content": "import { useMemo, useCallback } from \"react\";\nimport useDropdownFiltering from \"./useDropdownFiltering\";\nimport { useMultipleSelection, useCombobox } from \"downshift\";\nimport { type DropdownGroupOption } from \"../Dropdown.types\";\nimport { type BaseItemData } from \"../../BaseItem\";\n\nfunction useDropdownMultiCombobox<T extends BaseItemData<Record<string, unknown>>>(\n  options: DropdownGroupOption<T>,\n  selectedItems: T[],\n  setSelectedItems: (items: T[]) => void,\n  isMenuOpen: boolean,\n  autoFocus?: boolean,\n  defaultValue?: T[],\n  value?: T[],\n  inputValueProp?: string,\n  onChange?: (options: T[]) => void,\n  onInputChange?: (value: string | null) => void,\n  onMenuOpen?: () => void,\n  onMenuClose?: () => void,\n  onOptionSelect?: (option: T) => void,\n  filterOption?: (option: T, inputValue: string) => boolean,\n  showSelectedOptions?: boolean,\n  id?: string\n) {\n  // Use controlled value if provided, otherwise use internal state\n  const currentSelectedItems = value !== undefined ? value : selectedItems;\n\n  const { filteredOptions, filterOptions } = useDropdownFiltering<T>(\n    options,\n    filterOption,\n    showSelectedOptions,\n    currentSelectedItems\n  );\n  const flatOptions = useMemo(() => filteredOptions.flatMap(group => group.options), [filteredOptions]);\n  const { getSelectedItemProps, getDropdownProps, addSelectedItem, removeSelectedItem } = useMultipleSelection<T>({\n    selectedItems: currentSelectedItems,\n    initialSelectedItems: defaultValue,\n    onSelectedItemsChange: ({ selectedItems }) => {\n      if (value === undefined) {\n        setSelectedItems(selectedItems || []);\n      }\n      onChange?.(selectedItems || []);\n    }\n  });\n\n  const {\n    isOpen,\n    inputValue,\n    highlightedIndex,\n    getToggleButtonProps,\n    getLabelProps,\n    getMenuProps,\n    getInputProps,\n    getItemProps,\n    reset: downshiftReset,\n    openMenu,\n    toggleMenu,\n    closeMenu\n  } = useCombobox<T>({\n    items: flatOptions,\n    itemToString: item => item?.label ?? \"\",\n    itemToKey: item => (item?.value !== undefined ? String(item.value) : \"\"),\n    isItemDisabled: item => Boolean(item.disabled),\n    isOpen: isMenuOpen,\n    initialIsOpen: autoFocus,\n    initialInputValue: inputValueProp || \"\",\n    id,\n    onIsOpenChange: ({ isOpen }) => {\n      isOpen ? onMenuClose?.() : onMenuOpen?.();\n    },\n    onInputValueChange: ({ inputValue }) => {\n      filterOptions(inputValue || \"\");\n      onInputChange?.(inputValue);\n    },\n    onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {\n      if (!newSelectedItem) return;\n      const existingItem = currentSelectedItems.find(item => item.value === newSelectedItem.value);\n      if (existingItem) {\n        removeSelectedItem(existingItem);\n      } else {\n        addSelectedItem(newSelectedItem);\n      }\n      onOptionSelect?.(newSelectedItem);\n      filterOptions(\"\");\n    },\n    stateReducer: (state, actionAndChanges) => {\n      switch (actionAndChanges.type) {\n        case useCombobox.stateChangeTypes.InputKeyDownEnter:\n        case useCombobox.stateChangeTypes.ItemClick:\n          return {\n            ...actionAndChanges.changes,\n            inputValue: null,\n            isOpen: true,\n            highlightedIndex: (actionAndChanges.changes.selectedItem?.index as number) ?? 0\n          };\n        case useCombobox.stateChangeTypes.InputBlur:\n        case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:\n          return { ...actionAndChanges.changes, inputValue: null };\n        default:\n          return actionAndChanges.changes;\n      }\n    }\n  });\n\n  const reset = useCallback(() => {\n    if (value === undefined) {\n      setSelectedItems([]);\n    }\n    downshiftReset();\n    onChange?.([]);\n  }, [value, setSelectedItems, downshiftReset, onChange]);\n\n  return {\n    isOpen,\n    inputValue,\n    highlightedIndex,\n    selectedItems: currentSelectedItems,\n    getSelectedItemProps,\n    getDropdownProps,\n    addSelectedItem,\n    getToggleButtonProps,\n    getLabelProps,\n    getMenuProps,\n    getInputProps,\n    getItemProps,\n    reset,\n    removeSelectedItem,\n    filteredOptions,\n    openMenu,\n    toggleMenu,\n    closeMenu\n  };\n}\n\nexport default useDropdownMultiCombobox;\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/hooks/useDropdownMultiSelect.ts",
    "content": "import { useMemo, useCallback } from \"react\";\nimport { useMultipleSelection, useSelect } from \"downshift\";\nimport useDropdownFiltering from \"./useDropdownFiltering\";\nimport { type DropdownGroupOption } from \"../Dropdown.types\";\nimport { type BaseItemData } from \"../../BaseItem\";\n\nfunction useDropdownMultiSelect<T extends BaseItemData<Record<string, unknown>>>(\n  options: DropdownGroupOption<T>,\n  selectedItems: T[],\n  setSelectedItems: (items: T[]) => void,\n  isMenuOpen: boolean,\n  autoFocus?: boolean,\n  defaultValue?: T[],\n  value?: T[],\n  onChange?: (options: T[]) => void,\n  onMenuOpen?: () => void,\n  onMenuClose?: () => void,\n  onOptionSelect?: (option: T) => void,\n  showSelectedOptions?: boolean,\n  filterOption?: (option: T, inputValue: string) => boolean,\n  id?: string\n) {\n  const currentSelectedItems = value !== undefined ? value : selectedItems;\n\n  const { filteredOptions } = useDropdownFiltering<T>(options, filterOption, showSelectedOptions, currentSelectedItems);\n\n  const flatOptions = useMemo(() => filteredOptions.flatMap(group => group.options), [filteredOptions]);\n\n  const { getSelectedItemProps, addSelectedItem, removeSelectedItem, getDropdownProps } = useMultipleSelection<T>({\n    selectedItems: currentSelectedItems,\n    initialSelectedItems: defaultValue,\n    onSelectedItemsChange: ({ selectedItems: newSelected }) => {\n      if (value === undefined) {\n        setSelectedItems(newSelected || []);\n      }\n      onChange?.(newSelected || []);\n    }\n  });\n\n  const {\n    isOpen,\n    highlightedIndex,\n    getToggleButtonProps,\n    getLabelProps,\n    getMenuProps,\n    getItemProps,\n    reset: downshiftReset,\n    openMenu,\n    toggleMenu,\n    closeMenu\n  } = useSelect<T>({\n    items: flatOptions,\n    itemToString: item => item?.label ?? \"\",\n    itemToKey: item => (item?.value !== undefined ? String(item.value) : \"\"),\n    isItemDisabled: item => Boolean(item.disabled),\n    selectedItem: null,\n    isOpen: isMenuOpen,\n    initialIsOpen: autoFocus,\n    id,\n    onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {\n      if (!newSelectedItem) return;\n      const existingItem = currentSelectedItems.find(item => item.value === newSelectedItem.value);\n      if (existingItem) {\n        removeSelectedItem(existingItem);\n      } else {\n        addSelectedItem(newSelectedItem);\n      }\n      onOptionSelect?.(newSelectedItem);\n    },\n    stateReducer: (state, actionAndChanges) => {\n      const { type, changes } = actionAndChanges;\n      switch (type) {\n        case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:\n        case useSelect.stateChangeTypes.ItemClick:\n          return { ...changes, isOpen: true, highlightedIndex: (changes.selectedItem?.index as number) ?? 0 };\n        default:\n          return changes;\n      }\n    },\n    onIsOpenChange: ({ isOpen }) => {\n      isOpen ? onMenuOpen?.() : onMenuClose?.();\n    }\n  });\n\n  const reset = useCallback(() => {\n    if (value === undefined) {\n      setSelectedItems([]);\n    }\n    downshiftReset();\n    onChange?.([]);\n  }, [value, setSelectedItems, downshiftReset, onChange]);\n\n  const getInputProps = () => ({});\n\n  return {\n    isOpen,\n    inputValue: \"\",\n    highlightedIndex,\n    selectedItems: currentSelectedItems,\n    getSelectedItemProps,\n    addSelectedItem,\n    removeSelectedItem,\n    getToggleButtonProps,\n    getLabelProps,\n    getMenuProps,\n    getInputProps,\n    getItemProps,\n    reset,\n    filteredOptions,\n    openMenu,\n    toggleMenu,\n    closeMenu,\n    getDropdownProps\n  };\n}\n\nexport default useDropdownMultiSelect;\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/hooks/useDropdownSelect.ts",
    "content": "import { useMemo, useState } from \"react\";\nimport { useSelect } from \"downshift\";\nimport useDropdownFiltering from \"./useDropdownFiltering\";\nimport { type BaseItemData } from \"../../BaseItem\";\nimport { type DropdownGroupOption } from \"../Dropdown.types\";\n\nfunction useDropdownSelect<T extends BaseItemData<Record<string, unknown>>>(\n  options: DropdownGroupOption<T>,\n  autoFocus?: boolean,\n  isMenuOpen?: boolean,\n  defaultValue?: T,\n  value?: T,\n  onChange?: (option: T | T[] | null) => void,\n  onMenuOpen?: () => void,\n  onMenuClose?: () => void,\n  onOptionSelect?: (option: T) => void,\n  showSelectedOptions?: boolean,\n  filterOption?: (option: T, inputValue: string) => boolean,\n  id?: string\n) {\n  const [currentSelectedItem, setCurrentSelectedItem] = useState<T | null>(defaultValue || null);\n\n  const selectedItem = value !== undefined ? value : currentSelectedItem;\n\n  const memoizedSelectedItemForFiltering = useMemo(() => {\n    return selectedItem ? [selectedItem] : [];\n  }, [selectedItem]);\n\n  const { filteredOptions } = useDropdownFiltering<T>(\n    options,\n    filterOption,\n    showSelectedOptions,\n    memoizedSelectedItemForFiltering\n  );\n\n  const flatOptions = useMemo(() => filteredOptions.flatMap(group => group.options), [filteredOptions]);\n\n  const {\n    isOpen,\n    highlightedIndex,\n    getToggleButtonProps,\n    getLabelProps,\n    getMenuProps,\n    getItemProps,\n    reset: downshiftReset,\n    openMenu,\n    toggleMenu,\n    closeMenu\n  } = useSelect<T>({\n    items: flatOptions,\n    itemToString: item => item?.label ?? \"\",\n    itemToKey: item => (item?.value !== undefined ? String(item.value) : \"\"),\n    isItemDisabled: item => Boolean(item.disabled),\n    isOpen: isMenuOpen,\n    initialIsOpen: autoFocus,\n    selectedItem: selectedItem,\n    id,\n    onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {\n      if (value === undefined) {\n        setCurrentSelectedItem(newSelectedItem || null);\n      }\n      if (newSelectedItem) {\n        onOptionSelect?.(newSelectedItem);\n      }\n      onChange?.(newSelectedItem || null);\n    },\n    onIsOpenChange: ({ isOpen }) => {\n      isOpen ? onMenuOpen?.() : onMenuClose?.();\n    }\n  });\n\n  const reset = () => {\n    if (value === undefined) {\n      setCurrentSelectedItem(null);\n    }\n    downshiftReset();\n    onChange?.(null);\n  };\n\n  const getInputProps = () => ({});\n\n  return {\n    isOpen,\n    inputValue: \"\",\n    highlightedIndex,\n    selectedItem,\n    getToggleButtonProps,\n    getLabelProps,\n    getMenuProps,\n    getInputProps,\n    getItemProps,\n    reset,\n    filteredOptions,\n    openMenu,\n    toggleMenu,\n    closeMenu\n  };\n}\n\nexport default useDropdownSelect;\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/index.ts",
    "content": "export { default as Dropdown } from \"./Dropdown\";\n\nexport * from \"./Dropdown.types\";\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/modes/DropdownComboboxController.tsx",
    "content": "import React, { useState } from \"react\";\nimport { type DropdownSingleControllerProps } from \"../Dropdown.types\";\nimport useDropdownCombobox from \"../hooks/useDropdownCombobox\";\nimport { type BaseItemData } from \"../../BaseItem\";\nimport { type DropdownContextProps } from \"../context/DropdownContext.types\";\nimport DropdownWrapperUI from \"../components/DropdownWrapperUI\";\n\nconst DropdownComboboxController = <Item extends BaseItemData<Record<string, unknown>>>(\n  props: DropdownSingleControllerProps<Item>\n) => {\n  const {\n    options,\n    isMenuOpen: isMenuOpenProp,\n    autoFocus,\n    closeMenuOnSelect = true,\n    defaultValue,\n    value,\n    inputValue: inputValueProp,\n    onChange,\n    onInputChange,\n    onMenuClose,\n    onMenuOpen,\n    onOptionSelect,\n    filterOption,\n    showSelectedOptions = true,\n    clearable = true,\n    searchable = true,\n    multi = false,\n    dropdownRef,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    onClear,\n    loading = false,\n    size = \"medium\",\n    id,\n    readOnly,\n    disabled,\n    boxMode = false\n  } = props;\n\n  const [isFocused, setIsFocused] = useState(false);\n\n  const handleOptionSelect = (item: Item | null) => {\n    onOptionSelect?.(item);\n    if (item) {\n      setIsFocused(false);\n    }\n  };\n\n  const {\n    isOpen,\n    inputValue: hookInputValue,\n    highlightedIndex,\n    getToggleButtonProps,\n    getLabelProps,\n    getMenuProps,\n    getItemProps,\n    getInputProps: hookGetInputProps,\n    reset: hookReset,\n    filteredOptions,\n    selectedItem: hookSelectedItem,\n    toggleMenu\n  } = useDropdownCombobox<Item>(\n    options,\n    boxMode ? undefined : isMenuOpenProp,\n    autoFocus,\n    closeMenuOnSelect,\n    defaultValue,\n    value,\n    inputValueProp,\n    onChange,\n    onInputChange,\n    onMenuClose,\n    onMenuOpen,\n    handleOptionSelect,\n    filterOption,\n    showSelectedOptions,\n    id\n  );\n\n  const contextValue: DropdownContextProps<Item> = {\n    ...props,\n    isOpen: boxMode ? true : isOpen,\n    inputValue: hookInputValue ?? null,\n    highlightedIndex,\n    selectedItem: hookSelectedItem,\n    selectedItems: [],\n    filteredOptions,\n    getToggleButtonProps,\n    getLabelProps,\n    getMenuProps,\n    getItemProps,\n    getInputProps: (inputOptions?: any) => {\n      return hookGetInputProps!({\n        ...(inputOptions || {}),\n        disabled: readOnly || disabled,\n        onFocus: (event: React.FocusEvent<HTMLInputElement>) => {\n          setIsFocused(true);\n          onFocus?.(event as any);\n          inputOptions?.onFocus?.(event);\n        },\n        onBlur: (event: React.FocusEvent<HTMLInputElement>) => {\n          setIsFocused(false);\n          onBlur?.(event);\n          inputOptions?.onBlur?.(event);\n        },\n        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => {\n          onKeyDown?.(event);\n          inputOptions?.onKeyDown?.(event);\n        }\n      });\n    },\n    reset: hookReset,\n    contextOnClear: () => {\n      hookReset();\n      onClear?.();\n    },\n    contextOnOptionRemove: () => {},\n    addSelectedItem: undefined,\n    removeSelectedItem: undefined,\n    isFocused,\n    clearable,\n    searchable,\n    multi,\n    closeMenuOnSelect,\n    size,\n    toggleMenu,\n    loading\n  };\n  return <DropdownWrapperUI contextValue={contextValue} dropdownRef={dropdownRef} />;\n};\n\nexport default DropdownComboboxController;\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/modes/DropdownMultiComboboxController.tsx",
    "content": "import React, { useState } from \"react\";\nimport { type DropdownMultiControllerProps } from \"../Dropdown.types\";\nimport useDropdownMultiCombobox from \"../hooks/useDropdownMultiCombobox\";\nimport { type BaseItemData } from \"../../BaseItem\";\nimport { type DropdownContextProps } from \"../context/DropdownContext.types\";\nimport DropdownWrapperUI from \"../components/DropdownWrapperUI\";\n\nconst DropdownMultiComboboxController = <Item extends BaseItemData<Record<string, unknown>>>(\n  props: DropdownMultiControllerProps<Item>\n) => {\n  const {\n    options,\n    isMenuOpen: isMenuOpenProp,\n    autoFocus,\n    defaultValue,\n    value,\n    inputValue: inputValueProp,\n    onChange,\n    onInputChange,\n    onMenuClose,\n    onMenuOpen,\n    onOptionSelect,\n    filterOption,\n    showSelectedOptions = true,\n    clearable = true,\n    searchable = true,\n    multi = true,\n    closeMenuOnSelect = true,\n    dropdownRef,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    onClear,\n    onOptionRemove,\n    loading = false,\n    size = \"medium\",\n    id,\n    boxMode = false\n  } = props;\n\n  const initialMultiSelectedItems = Array.isArray(defaultValue) ? defaultValue : [];\n  const [multiSelectedItemsState, setMultiSelectedItemsState] = useState<Item[]>(initialMultiSelectedItems);\n  const [isFocused, setIsFocused] = useState(false);\n\n  const {\n    isOpen,\n    inputValue: hookInputValue,\n    highlightedIndex,\n    getToggleButtonProps,\n    getLabelProps,\n    getMenuProps,\n    getItemProps,\n    getInputProps: hookGetInputProps,\n    reset: hookReset,\n    toggleMenu,\n    filteredOptions,\n    selectedItems: hookSelectedItems,\n    addSelectedItem: hookAddSelectedItem,\n    removeSelectedItem: hookRemoveSelectedItem,\n    getDropdownProps\n  } = useDropdownMultiCombobox<Item>(\n    options,\n    multiSelectedItemsState,\n    setMultiSelectedItemsState,\n    boxMode ? undefined : isMenuOpenProp,\n    autoFocus,\n    defaultValue,\n    value,\n    inputValueProp,\n    onChange,\n    onInputChange,\n    onMenuClose,\n    onMenuOpen,\n    onOptionSelect,\n    filterOption,\n    showSelectedOptions,\n    id\n  );\n\n  const contextValue: DropdownContextProps<Item> = {\n    ...props,\n    isOpen: boxMode ? true : isOpen,\n    inputValue: hookInputValue ?? null,\n    highlightedIndex,\n    selectedItems: hookSelectedItems || [],\n    filteredOptions,\n    getToggleButtonProps,\n    getLabelProps,\n    getMenuProps,\n    getItemProps,\n    getInputProps: (inputOptions?: any) => {\n      return hookGetInputProps!({\n        ...(inputOptions || {}),\n        disabled: props.readOnly || props.disabled,\n        onFocus: (event: React.FocusEvent<HTMLInputElement>) => {\n          setIsFocused(true);\n          onFocus?.(event as any);\n          inputOptions?.onFocus?.(event);\n        },\n        onBlur: (event: React.FocusEvent<HTMLInputElement>) => {\n          setIsFocused(false);\n          onBlur?.(event);\n          inputOptions?.onBlur?.(event);\n        },\n        onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => {\n          onKeyDown?.(event);\n          inputOptions?.onKeyDown?.(event);\n        }\n      });\n    },\n    reset: hookReset,\n    contextOnClear: () => {\n      hookReset();\n      if (value === undefined) {\n        setMultiSelectedItemsState([]);\n      }\n      onClear?.();\n    },\n    contextOnOptionRemove: (option: Item) => {\n      if (hookRemoveSelectedItem) {\n        hookRemoveSelectedItem(option);\n      }\n      onOptionRemove?.(option);\n    },\n    addSelectedItem: hookAddSelectedItem,\n    removeSelectedItem: hookRemoveSelectedItem,\n    isFocused,\n    clearable,\n    searchable,\n    multi,\n    closeMenuOnSelect,\n    size,\n    getDropdownProps,\n    toggleMenu,\n    loading\n  };\n\n  return <DropdownWrapperUI contextValue={contextValue} dropdownRef={dropdownRef} />;\n};\n\nexport default DropdownMultiComboboxController;\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/modes/DropdownMultiSelectController.tsx",
    "content": "import React, { useState } from \"react\";\nimport { type DropdownMultiControllerProps } from \"../Dropdown.types\";\nimport useDropdownMultiSelect from \"../hooks/useDropdownMultiSelect\";\nimport { type BaseItemData } from \"../../BaseItem\";\nimport { type DropdownContextProps } from \"../context/DropdownContext.types\";\nimport DropdownWrapperUI from \"../components/DropdownWrapperUI\";\n\nconst DropdownMultiSelectController = <Item extends BaseItemData<Record<string, unknown>>>(\n  props: DropdownMultiControllerProps<Item>\n) => {\n  const {\n    options,\n    isMenuOpen: isMenuOpenProp,\n    autoFocus,\n    defaultValue,\n    value,\n    onChange,\n    onMenuOpen,\n    onMenuClose,\n    onOptionSelect,\n    clearable = true,\n    showSelectedOptions = true,\n    filterOption,\n    dropdownRef,\n    onClear,\n    onOptionRemove,\n    onFocus,\n    onBlur,\n    loading = false,\n    size = \"medium\",\n    id\n  } = props;\n\n  const initialMultiSelectedItems = Array.isArray(defaultValue) ? defaultValue : [];\n  const [multiSelectedItemsState, setMultiSelectedItemsState] = useState<Item[]>(initialMultiSelectedItems);\n  const [isFocused, setIsFocused] = useState(false);\n\n  const {\n    isOpen,\n    highlightedIndex,\n    getToggleButtonProps,\n    getLabelProps,\n    getMenuProps,\n    getItemProps,\n    reset: hookReset,\n    toggleMenu,\n    filteredOptions,\n    selectedItems: hookSelectedItems,\n    addSelectedItem: hookAddSelectedItem,\n    removeSelectedItem: hookRemoveSelectedItem,\n    getDropdownProps\n  } = useDropdownMultiSelect<Item>(\n    options,\n    multiSelectedItemsState,\n    setMultiSelectedItemsState,\n    isMenuOpenProp,\n    autoFocus,\n    defaultValue,\n    value,\n    onChange,\n    onMenuOpen,\n    onMenuClose,\n    onOptionSelect,\n    showSelectedOptions,\n    filterOption,\n    id\n  );\n\n  const contextValue: DropdownContextProps<Item> = {\n    ...props,\n    isOpen,\n    inputValue: null,\n    highlightedIndex,\n    selectedItem: undefined,\n    selectedItems: hookSelectedItems || [],\n    filteredOptions,\n    clearable,\n    getToggleButtonProps: (toggleOptions?: Record<string, any>) => {\n      return getToggleButtonProps({\n        ...(toggleOptions || {}),\n        disabled: props.readOnly || props.disabled,\n        onFocus: (event: React.FocusEvent<HTMLDivElement>) => {\n          setIsFocused(true);\n          onFocus?.(event);\n        },\n        onBlur: (event: React.FocusEvent<HTMLDivElement>) => {\n          setIsFocused(false);\n          onBlur?.(event);\n        }\n      });\n    },\n    getLabelProps,\n    getMenuProps,\n    getItemProps,\n    reset: hookReset,\n    getDropdownProps,\n    contextOnClear: () => {\n      hookReset();\n      if (value === undefined) {\n        setMultiSelectedItemsState([]);\n      }\n      onClear?.();\n    },\n    contextOnOptionRemove: (option: Item) => {\n      if (hookRemoveSelectedItem) {\n        hookRemoveSelectedItem(option);\n      }\n      onOptionRemove?.(option);\n    },\n    addSelectedItem: hookAddSelectedItem,\n    removeSelectedItem: hookRemoveSelectedItem,\n    size,\n    toggleMenu,\n    isFocused,\n    loading\n  };\n\n  return <DropdownWrapperUI contextValue={contextValue} dropdownRef={dropdownRef} />;\n};\n\nexport default DropdownMultiSelectController;\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/modes/DropdownSelectController.tsx",
    "content": "import React, { useState } from \"react\";\nimport { type DropdownSingleControllerProps } from \"../Dropdown.types\";\nimport useDropdownSelect from \"../hooks/useDropdownSelect\";\nimport { type BaseItemData } from \"../../BaseItem\";\nimport { type DropdownContextProps } from \"../context/DropdownContext.types\";\nimport DropdownWrapperUI from \"../components/DropdownWrapperUI\";\n\nconst DropdownSelectController = <Item extends BaseItemData<Record<string, unknown>>>(\n  props: DropdownSingleControllerProps<Item>\n) => {\n  const {\n    options,\n    autoFocus,\n    isMenuOpen: isMenuOpenProp,\n    defaultValue,\n    value,\n    onChange,\n    onMenuOpen,\n    onMenuClose,\n    onOptionSelect,\n    showSelectedOptions = true,\n    filterOption,\n    clearable = true,\n    searchable = false,\n    multi = false,\n    dropdownRef,\n    onClear,\n    onFocus,\n    onBlur,\n    loading = false,\n    size = \"medium\",\n    id\n  } = props;\n\n  const [isFocused, setIsFocused] = useState(false);\n\n  const {\n    isOpen,\n    highlightedIndex,\n    getToggleButtonProps,\n    getLabelProps,\n    getMenuProps,\n    getItemProps,\n    reset: hookReset,\n    toggleMenu,\n    filteredOptions,\n    selectedItem: hookSelectedItem\n  } = useDropdownSelect<Item>(\n    options,\n    autoFocus,\n    isMenuOpenProp,\n    defaultValue,\n    value,\n    onChange,\n    onMenuOpen,\n    onMenuClose,\n    onOptionSelect,\n    showSelectedOptions,\n    filterOption,\n    id\n  );\n\n  const contextValue: DropdownContextProps<Item> = {\n    ...props,\n    isOpen,\n    highlightedIndex,\n    selectedItem: hookSelectedItem,\n    filteredOptions,\n    getToggleButtonProps: (toggleOptions?: Record<string, any>) => {\n      return getToggleButtonProps({\n        ...(toggleOptions || {}),\n        disabled: props.readOnly || props.disabled,\n        onFocus: (event: React.FocusEvent<HTMLDivElement>) => {\n          setIsFocused(true);\n          onFocus?.(event);\n        },\n        onBlur: (event: React.FocusEvent<HTMLDivElement>) => {\n          setIsFocused(false);\n          onBlur?.(event);\n        }\n      });\n    },\n    getLabelProps,\n    getMenuProps,\n    getItemProps,\n    reset: hookReset,\n    inputValue: null,\n    selectedItems: [],\n    addSelectedItem: undefined,\n    removeSelectedItem: undefined,\n    contextOnClear: () => {\n      hookReset();\n      onClear?.();\n    },\n    contextOnOptionRemove: () => {},\n    clearable,\n    searchable,\n    multi,\n    autoFocus,\n    onClear,\n    size,\n    toggleMenu,\n    isFocused,\n    loading\n  };\n\n  return <DropdownWrapperUI contextValue={contextValue} dropdownRef={dropdownRef} />;\n};\n\nexport default DropdownSelectController;\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/utils/dropdown-modifiers.ts",
    "content": "import { type Middleware } from \"@floating-ui/react-dom\";\n\nexport const matchWidthMiddleware: Middleware = {\n  name: \"matchWidth\",\n  fn: ({ rects, elements }) => {\n    Object.assign(elements.floating.style, {\n      width: `${rects.reference.width}px`\n    });\n    return {};\n  }\n};\n"
  },
  {
    "path": "packages/core/src/components/Dropdown/utils/dropdownUtils.ts",
    "content": "import { type BaseItemData } from \"../../BaseItem\";\nimport { type DropdownListGroup } from \"../components/DropdownBaseList/DropdownBaseList.types\";\n\nexport function normalizeOptions<Item extends BaseItemData>(\n  options: DropdownListGroup<Item>[] | BaseItemData<Item>[],\n  filter?: string,\n  filterOption?: (option: Item, inputValue: string) => boolean,\n  showSelectedOptions = true,\n  selectedItems: Item[] = []\n): DropdownListGroup<Item>[] {\n  let indexCounter = 0;\n  const defaultFilterFn = (item: Item, inputValue: string) =>\n    !inputValue || item.label.toLowerCase().includes(inputValue.toLowerCase());\n  const currentFilterFn = filterOption || defaultFilterFn;\n\n  const isItemSelected = (item: Item) => selectedItems.some(selected => selected.value === item.value);\n\n  return Array.isArray(options) && options.some(item => \"options\" in item)\n    ? (options as DropdownListGroup<Item>[]).flatMap(group => {\n        const filteredGroupOptions = group.options\n          .filter(item => {\n            const matchesFilter = currentFilterFn(item, filter || \"\");\n            if (!showSelectedOptions && isItemSelected(item)) {\n              return false;\n            }\n            return matchesFilter;\n          })\n          .map(item => {\n            item.index = indexCounter++;\n            return item;\n          });\n\n        return filteredGroupOptions.length > 0 ? [{ ...group, options: filteredGroupOptions }] : [];\n      })\n    : [\n        {\n          label: undefined,\n          options: (options as BaseItemData<Item>[])\n            .filter(item => {\n              const matchesFilter = currentFilterFn(item, filter || \"\");\n              if (!showSelectedOptions && isItemSelected(item)) {\n                return false;\n              }\n              return matchesFilter;\n            })\n            .map(item => {\n              item.index = indexCounter++;\n              return item;\n            })\n        }\n      ];\n}\n"
  },
  {
    "path": "packages/core/src/components/EditableHeading/EditableHeading.module.scss",
    "content": "@import \"../../styles/typography\";\n@import \"~@vibe/style/dist/mixins\";\n\n@include create-title-classes;\n"
  },
  {
    "path": "packages/core/src/components/EditableHeading/EditableHeading.tsx",
    "content": "import { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport React, { forwardRef } from \"react\";\nimport { Heading, type HeadingType, type HeadingWeight } from \"@vibe/typography\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./EditableHeading.module.scss\";\nimport { getStyle } from \"@vibe/shared\";\nimport { camelCase } from \"es-toolkit\";\nimport EditableTypography, {\n  type EditableTypographyImplementationProps\n} from \"../EditableTypography/EditableTypography\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface EditableHeadingProps extends VibeComponentProps, EditableTypographyImplementationProps {\n  /**\n   * The type of the heading element.\n   */\n  type?: HeadingType;\n  /**\n   * The font weight of the heading.\n   */\n  weight?: HeadingWeight;\n}\n\nconst EditableHeading = forwardRef(\n  (\n    { type = \"h1\", weight = \"normal\", id, \"data-testid\": dataTestId, ...editableTypographyProps }: EditableHeadingProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    return (\n      <EditableTypography\n        ref={ref}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.EDITABLE_HEADING, id)}\n        data-vibe={ComponentVibeId.EDITABLE_HEADING}\n        component={Heading}\n        typographyClassName={getStyle(styles, camelCase(type + \"-\" + weight))}\n        type={type}\n        weight={weight}\n        {...editableTypographyProps}\n      />\n    );\n  }\n);\n\nexport default EditableHeading;\n"
  },
  {
    "path": "packages/core/src/components/EditableHeading/__tests__/EditableHeading.test.tsx",
    "content": "import { afterEach, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { fireEvent, render, cleanup, screen } from \"@testing-library/react\";\nimport EditableHeading from \"../EditableHeading\";\n\ndescribe(\"EditableHeading\", () => {\n  afterEach(() => {\n    cleanup();\n  });\n\n  it(\"should render an input in edit mode\", () => {\n    render(<EditableHeading value=\"Editable heading\" />);\n\n    const component = screen.getByRole(\"button\");\n    fireEvent.click(component);\n\n    const input = screen.queryByRole(\"input\");\n    expect(input).toBeInTheDocument();\n  });\n\n  it(\"should not render an input when 'readOnly' is false when clicked\", () => {\n    render(<EditableHeading value=\"Editable heading\" readOnly />);\n\n    const component = screen.getByRole(\"button\");\n    fireEvent.click(component);\n\n    const input = screen.queryByRole(\"input\");\n    expect(input).not.toBeInTheDocument();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/EditableHeading/index.ts",
    "content": "export { default as EditableHeading, type EditableHeadingProps } from \"./EditableHeading\";\n"
  },
  {
    "path": "packages/core/src/components/EditableText/EditableText.module.scss",
    "content": "@import \"../../styles/typography\";\n@import \"~@vibe/style/dist/mixins\";\n\n@include create-text-classes;\n\n.editableText {\n  .typography {\n    min-width: 56px;\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/EditableText/EditableText.tsx",
    "content": "import { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport React, { forwardRef } from \"react\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./EditableText.module.scss\";\nimport { getStyle } from \"@vibe/shared\";\nimport { camelCase } from \"es-toolkit\";\nimport EditableTypography, {\n  type EditableTypographyImplementationProps\n} from \"../EditableTypography/EditableTypography\";\nimport { Text, type TextType, type TextWeight } from \"@vibe/typography\";\nimport cx from \"classnames\";\n\nexport interface EditableTextProps extends VibeComponentProps, EditableTypographyImplementationProps {\n  /**\n   * The text style variant.\n   */\n  type?: TextType;\n  /**\n   * The font weight of the text.\n   */\n  weight?: TextWeight;\n  /**\n   * If true, enables editing multiple lines of text.\n   */\n  multiline?: boolean;\n}\n\nconst EditableText = forwardRef(\n  (\n    {\n      type = \"text2\",\n      weight = \"normal\",\n      \"data-testid\": dataTestId,\n      id,\n      multiline,\n      ...editableTypographyProps\n    }: EditableTextProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    return (\n      <EditableTypography\n        className={styles.editableText}\n        ref={ref}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.EDITABLE_TEXT, id)}\n        component={Text}\n        typographyClassName={cx(getStyle(styles, camelCase(type + \"-\" + weight)), styles.typography)}\n        clearable\n        type={type}\n        weight={weight}\n        multiline={multiline}\n        {...editableTypographyProps}\n      />\n    );\n  }\n);\n\nexport default EditableText;\n"
  },
  {
    "path": "packages/core/src/components/EditableText/__tests__/EditableText.test.tsx",
    "content": "import { vi, afterEach, beforeEach, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { fireEvent, render, cleanup, screen, waitFor, within } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport EditableText from \"../EditableText\";\n\ndescribe(\"EditableText\", () => {\n  afterEach(() => {\n    cleanup();\n  });\n\n  it(\"should render an input in edit mode\", () => {\n    render(<EditableText value=\"Editable text\" />);\n\n    const component = screen.getByRole(\"button\");\n    fireEvent.click(component);\n\n    const input = screen.queryByRole(\"input\");\n    expect(input).toBeInTheDocument();\n  });\n\n  it(\"should render a textarea in edit mode with multiline\", () => {\n    render(<EditableText multiline value=\"Editable text\" />);\n\n    const component = screen.getByRole(\"button\");\n    fireEvent.click(component);\n\n    const input = screen.queryByRole(\"textbox\");\n    expect(input).toBeInTheDocument();\n  });\n\n  it(\"should not render an input when 'readOnly' is false when clicked\", () => {\n    render(<EditableText value=\"Editable test\" readOnly />);\n\n    const component = screen.getByRole(\"button\");\n    fireEvent.click(component);\n\n    const input = screen.queryByRole(\"input\");\n    expect(input).not.toBeInTheDocument();\n  });\n\n  describe(\"rendered value\", () => {\n    it(\"should render original value when value of an editable component is cleared\", async () => {\n      const value = \"Editable test\";\n      render(<EditableText value={value} />);\n\n      const component = screen.getByRole(\"button\");\n      fireEvent.click(component);\n\n      const input = screen.getByRole(\"input\");\n      fireEvent.change(input, {\n        target: { value: \"\" }\n      });\n\n      expect(input).toHaveValue(\"\");\n\n      await waitFor(() => {\n        fireEvent.keyDown(input, { key: \"Enter\" });\n      });\n\n      expect(within(screen.getByRole(\"button\")).getByText(value)).toBeInTheDocument();\n    });\n  });\n\n  describe(\"event handling\", () => {\n    describe(\"onClick\", () => {\n      const onClick = vi.fn();\n\n      beforeEach(() => {\n        onClick.mockReset();\n      });\n\n      it(\"should call onClick when clicking on an editable component\", () => {\n        render(<EditableText value=\"Editable test\" onClick={onClick} />);\n\n        const component = screen.getByRole(\"button\");\n        fireEvent.click(component);\n\n        expect(onClick).toHaveBeenCalledTimes(1);\n      });\n\n      it(\"should call onClick when clicking on 'readOnly' component\", () => {\n        render(<EditableText value=\"Editable test\" readOnly onClick={onClick} />);\n\n        const component = screen.getByRole(\"button\");\n        fireEvent.click(component);\n\n        expect(onClick).toHaveBeenCalledTimes(1);\n      });\n    });\n\n    describe(\"onChange\", () => {\n      const onChange = vi.fn();\n\n      beforeEach(() => {\n        onChange.mockReset();\n      });\n\n      it(\"should call onChange with new value when changed in an editable component\", async () => {\n        const value = \"Editable test\";\n        const newValue = \"New Editable test\";\n        render(<EditableText value={value} onChange={onChange} />);\n\n        const component = screen.getByRole(\"button\");\n        fireEvent.click(component);\n\n        const input = screen.getByRole(\"input\");\n        fireEvent.change(input, {\n          target: { value: newValue }\n        });\n\n        expect(input).toHaveValue(newValue);\n\n        await waitFor(() => {\n          fireEvent.keyDown(input, { key: \"Enter\" });\n        });\n        expect(within(await screen.findByRole(\"button\")).getByText(newValue)).toBeInTheDocument();\n        expect(onChange).toHaveBeenCalledTimes(1);\n        expect(onChange).toHaveBeenCalledWith(newValue);\n      });\n\n      it(\"should call onChange with new value when changed in a multiline editable component\", async () => {\n        const value = \"Editable test\";\n        const newValue = \"New Editable test\";\n        render(<EditableText value={value} onChange={onChange} multiline />);\n\n        const component = screen.getByRole(\"button\");\n        fireEvent.click(component);\n\n        const input = screen.getByRole(\"textbox\");\n        fireEvent.change(input, {\n          target: { value: newValue }\n        });\n\n        expect(input).toHaveValue(newValue);\n\n        await waitFor(() => {\n          fireEvent.keyDown(input, { key: \"Enter\" });\n        });\n        expect(within(await screen.findByRole(\"button\")).getByText(newValue)).toBeInTheDocument();\n        expect(onChange).toHaveBeenCalledTimes(1);\n        expect(onChange).toHaveBeenCalledWith(newValue);\n      });\n\n      it(\"should not call onChange when value isn't changed in an editable component\", async () => {\n        const value = \"Editable test\";\n        render(<EditableText value={value} onChange={onChange} />);\n\n        const component = screen.getByRole(\"button\");\n        fireEvent.click(component);\n\n        const input = screen.getByRole(\"input\");\n\n        expect(input).toHaveValue(value);\n\n        await waitFor(() => {\n          fireEvent.keyDown(input, { key: \"Enter\" });\n        });\n\n        expect(within(screen.getByRole(\"button\")).getByText(value)).toBeInTheDocument();\n\n        expect(onChange).not.toBeCalled();\n      });\n\n      it(\"should not call onChange when value changed but Shift+Enter was clicked for multiline in an editable component\", async () => {\n        const value = \"Editable test\";\n        render(<EditableText value={value} onChange={onChange} multiline />);\n\n        const component = screen.getByRole(\"button\");\n        fireEvent.click(component);\n\n        const input = screen.getByRole(\"textbox\");\n\n        expect(input).toHaveValue(value);\n\n        await waitFor(() => {\n          fireEvent.keyDown(input, { key: \"Enter\", shiftKey: true });\n        });\n\n        expect(onChange).not.toBeCalled();\n      });\n\n      it(\"should not call onChange when value of an editable component is cleared\", async () => {\n        const value = \"Editable test\";\n        render(<EditableText value={value} onChange={onChange} />);\n\n        const component = screen.getByRole(\"button\");\n        fireEvent.click(component);\n\n        const input = screen.getByRole(\"input\");\n        fireEvent.change(input, {\n          target: { value: \"\" }\n        });\n\n        expect(input).toHaveValue(\"\");\n\n        await waitFor(() => {\n          fireEvent.keyDown(input, { key: \"Enter\" });\n        });\n\n        expect(within(screen.getByRole(\"button\")).getByText(value)).toBeInTheDocument();\n        expect(onChange).not.toBeCalled();\n      });\n    });\n\n    describe(\"onEditModeChange\", () => {\n      const onEditModeChange = vi.fn();\n\n      beforeEach(() => {\n        onEditModeChange.mockReset();\n      });\n\n      it(\"should call onEditModeChange with true when enter edit mode\", async () => {\n        const value = \"Editable test\";\n        render(<EditableText value={value} onEditModeChange={onEditModeChange} />);\n\n        const component = screen.getByRole(\"button\");\n        fireEvent.click(component);\n\n        expect(onEditModeChange).toHaveBeenCalledTimes(1);\n        expect(onEditModeChange).toHaveBeenCalledWith(true);\n      });\n\n      it(\"should call onEditModeChange with false when exit edit mode\", async () => {\n        const value = \"Editable test\";\n        render(<EditableText value={value} onEditModeChange={onEditModeChange} />);\n\n        const component = screen.getByRole(\"button\");\n        fireEvent.click(component);\n\n        const input = screen.getByRole(\"input\");\n        await waitFor(() => {\n          fireEvent.keyDown(input, { key: \"Enter\" });\n        });\n\n        expect(onEditModeChange).toHaveBeenCalledTimes(2);\n        expect(onEditModeChange).toHaveBeenLastCalledWith(false);\n      });\n    });\n  });\n\n  describe(\"event bubbling and propagation\", () => {\n    it(\"should prevent Enter key press from propagating outside EditableText\", () => {\n      const onChange = vi.fn();\n      const externalKeyHandler = vi.fn();\n\n      render(\n        <div onKeyDown={externalKeyHandler} data-testid=\"external-container\">\n          <EditableText value=\"Editable text\" onChange={onChange} />\n        </div>\n      );\n\n      const component = screen.getByRole(\"button\");\n      fireEvent.click(component);\n\n      const input = screen.getByRole(\"input\");\n      fireEvent.change(input, { target: { value: \"New value\" } });\n      userEvent.keyboard(\"{enter}\");\n\n      expect(onChange).toHaveBeenCalledWith(\"New value\");\n      expect(externalKeyHandler).not.toHaveBeenCalled();\n    });\n\n    it(\"should prevent Esc key press from propagating outside EditableText\", () => {\n      const onChange = vi.fn();\n      const onEditModeChange = vi.fn();\n      const externalKeyHandler = vi.fn();\n\n      render(\n        <div onKeyDown={externalKeyHandler} data-testid=\"external-container\">\n          <EditableText value=\"Editable text\" onChange={onChange} onEditModeChange={onEditModeChange} />\n        </div>\n      );\n\n      const component = screen.getByRole(\"button\");\n      fireEvent.click(component);\n\n      const input = screen.getByRole(\"input\");\n      fireEvent.change(input, { target: { value: \"New value\" } });\n      userEvent.keyboard(\"{escape}\");\n\n      expect(onChange).not.toHaveBeenCalled();\n      expect(onEditModeChange).toHaveBeenCalledTimes(2);\n      expect(externalKeyHandler).not.toHaveBeenCalled();\n    });\n  });\n\n  describe(\"with placeholder\", () => {\n    it(\"should show a placeholder if provided and input is empty\", async () => {\n      const onChange = vi.fn();\n      const placeholderText = \"Placeholder text\";\n      const value = \"Editable test\";\n      render(<EditableText value={value} placeholder={placeholderText} onChange={onChange} />);\n\n      const component = screen.getByRole(\"button\");\n      fireEvent.click(component);\n\n      const input = screen.getByRole(\"input\");\n      fireEvent.change(input, {\n        target: { value: \"\" }\n      });\n\n      expect(input).toHaveValue(\"\");\n      expect(screen.getByPlaceholderText(placeholderText)).toBeInTheDocument();\n\n      await waitFor(() => {\n        fireEvent.keyDown(input, { key: \"Enter\" });\n      });\n\n      expect(within(await screen.findByRole(\"button\")).getByText(placeholderText)).toBeInTheDocument();\n      expect(onChange).toHaveBeenCalledTimes(1);\n      expect(onChange).toHaveBeenCalledWith(\"\");\n    });\n\n    it(\"should not show a placeholder if provided and input is not empty\", async () => {\n      const placeholderText = \"Placeholder text\";\n      const value = \"Editable test\";\n      const newValue = \"New Editable test\";\n      render(<EditableText value={value} placeholder={placeholderText} />);\n\n      const component = screen.getByRole(\"button\");\n      fireEvent.click(component);\n\n      const input = screen.getByRole(\"input\");\n      fireEvent.change(input, {\n        target: { value: newValue }\n      });\n\n      expect(input).toHaveValue(newValue);\n      expect(screen.getByPlaceholderText(placeholderText)).toBeInTheDocument();\n\n      await waitFor(() => {\n        fireEvent.keyDown(input, { key: \"Enter\" });\n      });\n      expect(within(await screen.findByRole(\"button\")).getByText(newValue)).toBeInTheDocument();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/EditableText/index.ts",
    "content": "export { default as EditableText, type EditableTextProps } from \"./EditableText\";\n"
  },
  {
    "path": "packages/core/src/components/EditableTypography/EditableTypography.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n.editableTypography {\n  display: inline-flex;\n  min-width: 0;\n  max-width: 100%;\n  // Shifts the component to align the text with the container\n  margin-inline-start: -6px;\n  overflow: hidden;\n  position: relative;\n\n  .input,\n  .textarea {\n    width: var(--input-width);\n    display: inline-block;\n    max-width: 100%;\n    min-width: 64px;\n    padding: 0 var(--space-4);\n    outline: none;\n    border: 1px solid var(--primary-color);\n    border-radius: var(--border-radius-small);\n    color: var(--primary-text-color);\n    background-color: transparent;\n\n    &:focus,\n    &:active {\n      outline: none;\n    }\n  }\n\n  .textarea {\n    resize: none;\n    overflow: hidden;\n    height: var(--input-height);\n  }\n\n  .typography {\n    border: 1px solid transparent;\n    padding: 0 var(--space-4);\n    border-radius: var(--border-radius-small);\n\n    &:hover:not(.disabled) {\n      border-color: var(--ui-border-color);\n    }\n\n    &.hidden {\n      position: absolute;\n      opacity: 0;\n      height: 0;\n      visibility: hidden;\n      white-space: pre;\n    }\n\n    &.placeholder {\n      color: var(--placeholder-color);\n    }\n\n    &.multiline {\n      white-space: pre-wrap;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/EditableTypography/EditableTypography.tsx",
    "content": "import React, { type ElementType, forwardRef, useEffect, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { useMergeRef, useKeyboardButtonPressedFunc, useIsomorphicLayoutEffect } from \"@vibe/shared\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./EditableTypography.module.scss\";\nimport { keyCodes } from \"../../constants\";\n\nimport { type TooltipProps } from \"@vibe/tooltip\";\nimport usePrevious from \"../../hooks/usePrevious\";\nimport { type TextType, type TextWeight } from \"@vibe/typography\";\nimport { type HeadingType, type HeadingWeight } from \"@vibe/typography\";\n\nexport interface EditableTypographyImplementationProps {\n  /**\n   * The current value of the text.\n   */\n  value: string;\n  /**\n   * Callback fired when the value changes.\n   */\n  onChange?: (value: string) => void;\n  /**\n   * Callback fired when the component is clicked.\n   */\n  onClick?: (event: React.KeyboardEvent | React.MouseEvent) => void;\n  /**\n   * Callback fired when a key is pressed inside the input/textarea element.\n   */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n  /**\n   * If true, the text is read-only and cannot be edited.\n   */\n  readOnly?: boolean;\n  /**\n   * Placeholder text displayed when the value is empty.\n   */\n  placeholder?: string;\n  /**\n   * The label of the component for accessibility.\n   */\n  \"aria-label\"?: string;\n  /**\n   * Controls whether the component is in edit mode.\n   */\n  isEditMode?: boolean;\n  /**\n   * If true, automatically selects all text when entering edit mode.\n   */\n  autoSelectTextOnEditMode?: boolean;\n  /**\n   * Callback fired when the edit mode changes.\n   */\n  onEditModeChange?: (isEditMode: boolean) => void;\n  /**\n   * Props to customize the tooltip.\n   */\n  tooltipProps?: Partial<TooltipProps>;\n}\n\nexport interface EditableTypographyProps extends VibeComponentProps, EditableTypographyImplementationProps {\n  /**\n   * The typography component used in view mode.\n   */\n  component: ElementType;\n  /**\n   * Class name applied to the typography component.\n   */\n  typographyClassName: string;\n  /**\n   * If true, shows the placeholder when empty.\n   */\n  clearable?: boolean;\n  /**\n   * The text or heading type.\n   */\n  type?: TextType | HeadingType;\n  /**\n   * The text or heading weight.\n   */\n  weight?: TextWeight | HeadingWeight;\n  /**\n   * If true, enables multi-line editing.\n   */\n  multiline?: boolean;\n}\n\nconst PADDING_OFFSET = 2;\n\nconst EditableTypography = forwardRef(\n  (\n    {\n      id,\n      className,\n      \"data-testid\": dataTestId,\n      value,\n      onChange,\n      onClick,\n      onKeyDown,\n      readOnly = false,\n      \"aria-label\": ariaLabel = \"\",\n      placeholder,\n      clearable,\n      typographyClassName,\n      component: TypographyComponent,\n      isEditMode,\n      autoSelectTextOnEditMode,\n      onEditModeChange,\n      tooltipProps,\n      type,\n      weight,\n      multiline = false\n    }: EditableTypographyProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const [isEditing, setIsEditing] = useState(isEditMode || false);\n    const [inputValue, setInputValue] = useState(value);\n\n    const prevValue = usePrevious(value);\n\n    const inputRef = useRef(null);\n    const typographyRef = useRef(null);\n\n    useEffect(() => {\n      if (!isEditing && value !== prevValue && value !== inputValue) {\n        setInputValue(value);\n      }\n    }, [prevValue, isEditing, value, inputValue]);\n\n    useEffect(() => {\n      setIsEditing(isEditMode);\n    }, [isEditMode]);\n\n    function onTypographyClick(event: React.KeyboardEvent | React.MouseEvent) {\n      onClick?.(event);\n      toggleEditMode(event);\n    }\n\n    function toggleEditMode(event: React.KeyboardEvent | React.MouseEvent) {\n      if (readOnly || isEditing) {\n        return;\n      }\n      event.preventDefault();\n      handleEditModeChange(true);\n    }\n\n    function handleEditModeChange(value: boolean) {\n      onEditModeChange?.(value);\n      setIsEditing(value);\n    }\n\n    function handleInputValueChange() {\n      handleEditModeChange(false);\n\n      if (value === inputValue) {\n        return;\n      }\n\n      const shouldShowPlaceholderWhenEmpty = clearable && placeholder;\n      if (!inputValue && !shouldShowPlaceholderWhenEmpty) {\n        setInputValue(value);\n        return;\n      }\n      setInputValue(inputValue);\n      onChange?.(inputValue);\n    }\n\n    function handleBlur() {\n      handleInputValueChange();\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) {\n      if (event.nativeEvent.isComposing) {\n        return;\n      }\n\n      if (event.key === keyCodes.ENTER) {\n        if (multiline && event.shiftKey) {\n          return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n        handleInputValueChange();\n      }\n      if (event.key === keyCodes.ESCAPE) {\n        event.preventDefault();\n        event.stopPropagation();\n        handleEditModeChange(false);\n        setInputValue(value);\n      }\n\n      onKeyDown?.(event);\n    }\n\n    function handleChange(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {\n      setInputValue(event.target.value);\n    }\n\n    const toggleKeyboardEditMode = useKeyboardButtonPressedFunc(toggleEditMode);\n\n    function focus() {\n      inputRef.current?.focus?.();\n\n      if (inputRef.current) {\n        const inputElement = inputRef.current as HTMLInputElement | HTMLTextAreaElement;\n        const textLength = inputElement.value.length;\n        inputElement.setSelectionRange(textLength, textLength);\n      }\n    }\n\n    function selectAllInputText() {\n      inputRef.current?.select?.();\n    }\n\n    useEffect(() => {\n      if (!isEditing) return;\n      focus();\n      if (autoSelectTextOnEditMode) {\n        selectAllInputText();\n      }\n    }, [autoSelectTextOnEditMode, isEditing]);\n\n    useIsomorphicLayoutEffect(() => {\n      if (!typographyRef.current) {\n        return;\n      }\n\n      const { width } = typographyRef.current.getBoundingClientRect();\n      inputRef?.current?.style.setProperty(\"--input-width\", `${width}px`);\n\n      if (multiline) {\n        const textareaElement = inputRef?.current as HTMLTextAreaElement;\n        textareaElement?.style.setProperty(\"--input-height\", \"auto\");\n        textareaElement?.style.setProperty(\"--input-height\", `${textareaElement.scrollHeight + PADDING_OFFSET}px`);\n      }\n    }, [inputValue, isEditing]);\n\n    return (\n      <div\n        ref={mergedRef}\n        id={id}\n        aria-label={ariaLabel}\n        data-testid={dataTestId}\n        className={cx(styles.editableTypography, className)}\n        role={isEditing ? null : \"button\"}\n        onClick={onTypographyClick}\n        onKeyDown={toggleKeyboardEditMode}\n      >\n        {isEditing &&\n          (multiline ? (\n            <textarea\n              ref={inputRef}\n              className={cx(styles.textarea, typographyClassName)}\n              value={inputValue}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onBlur={handleBlur}\n              aria-label={ariaLabel}\n              placeholder={placeholder}\n              role=\"textbox\"\n              rows={1}\n            />\n          ) : (\n            <input\n              ref={inputRef}\n              className={cx(styles.input, typographyClassName)}\n              value={inputValue}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onBlur={handleBlur}\n              aria-label={ariaLabel}\n              placeholder={placeholder}\n              role=\"input\"\n            />\n          ))}\n        <TypographyComponent\n          ref={typographyRef}\n          aria-hidden={isEditing}\n          className={cx(styles.typography, typographyClassName, {\n            [styles.hidden]: isEditing,\n            [styles.disabled]: readOnly,\n            [styles.placeholder]: !inputValue && placeholder,\n            [styles.multiline]: !isEditing && multiline\n          })}\n          tabIndex={0}\n          tooltipProps={tooltipProps}\n          weight={weight}\n          type={type}\n          ellipsis={!multiline}\n        >\n          {inputValue || placeholder}\n        </TypographyComponent>\n      </div>\n    );\n  }\n);\n\nexport default EditableTypography;\n"
  },
  {
    "path": "packages/core/src/components/EditableTypography/__tests__/EditableTypography.test.tsx",
    "content": "import { vi, afterEach, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { fireEvent, render, cleanup, screen, within } from \"@testing-library/react\";\nimport EditableTypography from \"../EditableTypography\";\nimport { Text } from \"@vibe/typography\";\n\ndescribe(\"EditableTypography - IME composition with onKeyDown\", () => {\n  afterEach(() => {\n    cleanup();\n  });\n\n  it(\"should ignore Enter keydown while composing (single-line) and commit after composition ends\", () => {\n    const onChange = vi.fn();\n    render(\n      <EditableTypography value=\"Editable text\" onChange={onChange} component={Text} typographyClassName=\"typography\" />\n    );\n\n    const button = screen.getByRole(\"button\");\n    fireEvent.click(button);\n\n    const input = screen.getByRole(\"input\");\n    fireEvent.change(input, { target: { value: \"新しい\" } });\n\n    fireEvent.keyDown(input, { key: \"Enter\", isComposing: true });\n\n    expect(screen.getByRole(\"input\")).toBeInTheDocument();\n    expect(onChange).not.toHaveBeenCalled();\n\n    fireEvent.keyDown(input, { key: \"Enter\", isComposing: false });\n\n    expect(within(screen.getByRole(\"button\")).getByText(\"新しい\")).toBeInTheDocument();\n    expect(onChange).toHaveBeenCalledTimes(1);\n    expect(onChange).toHaveBeenCalledWith(\"新しい\");\n  });\n\n  it(\"should ignore Escape keydown while composing (single-line) and cancel after composition ends\", () => {\n    const onChange = vi.fn();\n    render(\n      <EditableTypography value=\"Editable text\" onChange={onChange} component={Text} typographyClassName=\"typography\" />\n    );\n\n    const button = screen.getByRole(\"button\");\n    fireEvent.click(button);\n\n    const input = screen.getByRole(\"input\");\n    fireEvent.change(input, { target: { value: \"中\" } });\n\n    fireEvent.keyDown(input, { key: \"Escape\", isComposing: true });\n\n    expect(screen.getByRole(\"input\")).toBeInTheDocument();\n    expect(onChange).not.toHaveBeenCalled();\n\n    fireEvent.keyDown(input, { key: \"Escape\", isComposing: false });\n\n    expect(within(screen.getByRole(\"button\")).getByText(\"Editable text\")).toBeInTheDocument();\n    expect(onChange).not.toHaveBeenCalled();\n  });\n\n  it(\"should ignore Enter keydown while composing (multiline) and commit after composition ends\", () => {\n    const onChange = vi.fn();\n    render(\n      <EditableTypography\n        value=\"Editable text\"\n        onChange={onChange}\n        component={Text}\n        typographyClassName=\"typography\"\n        multiline\n      />\n    );\n\n    const button = screen.getByRole(\"button\");\n    fireEvent.click(button);\n\n    const textarea = screen.getByRole(\"textbox\");\n    fireEvent.change(textarea, { target: { value: \"新しい\" } });\n\n    fireEvent.keyDown(textarea, { key: \"Enter\", isComposing: true });\n\n    expect(screen.getByRole(\"textbox\")).toBeInTheDocument();\n    expect(onChange).not.toHaveBeenCalled();\n\n    fireEvent.keyDown(textarea, { key: \"Enter\", isComposing: false });\n\n    expect(within(screen.getByRole(\"button\")).getByText(\"新しい\")).toBeInTheDocument();\n    expect(onChange).toHaveBeenCalledTimes(1);\n    expect(onChange).toHaveBeenCalledWith(\"新しい\");\n  });\n\n  it(\"should ignore Escape keydown while composing (multiline) and cancel after composition ends\", () => {\n    const onChange = vi.fn();\n    render(\n      <EditableTypography\n        value=\"Editable text\"\n        onChange={onChange}\n        component={Text}\n        typographyClassName=\"typography\"\n        multiline\n      />\n    );\n\n    const button = screen.getByRole(\"button\");\n    fireEvent.click(button);\n\n    const textarea = screen.getByRole(\"textbox\");\n    fireEvent.change(textarea, { target: { value: \"中\" } });\n\n    fireEvent.keyDown(textarea, { key: \"Escape\", isComposing: true });\n\n    expect(screen.getByRole(\"textbox\")).toBeInTheDocument();\n    expect(onChange).not.toHaveBeenCalled();\n\n    fireEvent.keyDown(textarea, { key: \"Escape\", isComposing: false });\n\n    expect(within(screen.getByRole(\"button\")).getByText(\"Editable text\")).toBeInTheDocument();\n    expect(onChange).not.toHaveBeenCalled();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/EditableTypography/index.ts",
    "content": "export { default as EditableTypography, EditableTypographyProps } from \"./EditableTypography\";\n"
  },
  {
    "path": "packages/core/src/components/EmptyState/EmptyState.module.scss",
    "content": ".emptyState {\n  width: 100%;\n  padding: var(--space-24);\n  box-sizing: border-box;\n  background: var(--primary-background-color);\n\n  &.compact {\n    padding: var(--space-16);\n  }\n\n  .content {\n    width: 100%;\n    text-align: center;\n\n    .title {\n      max-width: 500px;\n    }\n\n    .description {\n      max-width: 500px;\n    }\n\n    .actions {\n      width: 100%;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/EmptyState/EmptyState.tsx",
    "content": "import React, { forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport { Flex } from \"@vibe/layout\";\nimport { Heading, Text } from \"@vibe/typography\";\nimport { type EmptyStateProps } from \"./EmptyState.types\";\nimport styles from \"./EmptyState.module.scss\";\nimport { getStyle } from \"@vibe/shared\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { Button, type ButtonProps } from \"@vibe/button\";\nimport { Link, type LinkProps } from \"../Link\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nconst EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(\n  (\n    {\n      className,\n      title,\n      description,\n      visual,\n      mainAction,\n      supportingAction,\n      layout = \"default\",\n      id,\n      \"data-testid\": dataTestId\n    },\n    ref\n  ) => {\n    const isCompact = layout === \"compact\";\n\n    return (\n      <Flex\n        direction=\"column\"\n        align=\"center\"\n        justify=\"center\"\n        gap={isCompact ? \"small\" : \"medium\"}\n        className={cx(styles.emptyState, getStyle(styles, layout), className)}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.EMPTY_STATE, id)}\n        data-vibe={ComponentVibeId.EMPTY_STATE}\n        ref={ref}\n      >\n        {!!visual && visual}\n\n        <Flex direction=\"column\" align=\"center\" gap={isCompact ? 12 : \"medium\"} className={styles.content}>\n          <Flex direction=\"column\" align=\"center\" gap=\"xs\">\n            {title && (\n              <Heading type=\"h3\" weight=\"normal\" className={styles.title} align=\"center\" ellipsis={false}>\n                {title}\n              </Heading>\n            )}\n\n            {typeof description === \"string\" ? (\n              <Text className={styles.description} align=\"center\" ellipsis={false}>\n                {description}\n              </Text>\n            ) : (\n              description\n            )}\n          </Flex>\n\n          {(mainAction || supportingAction) && (\n            <Flex direction=\"column\" align=\"center\" gap=\"small\" className={styles.actions}>\n              {renderMainAction(mainAction, isCompact)}\n              {renderSupportingAction(supportingAction, isCompact)}\n            </Flex>\n          )}\n        </Flex>\n      </Flex>\n    );\n  }\n);\n\nfunction renderMainAction(mainAction: EmptyStateProps[\"mainAction\"], isCompact: boolean) {\n  if (typeof mainAction === \"object\" && \"text\" in mainAction) {\n    return (\n      <Button kind=\"secondary\" size={isCompact ? \"small\" : \"medium\"} {...mainAction}>\n        {mainAction.text}\n      </Button>\n    );\n  }\n\n  return mainAction;\n}\n\nfunction renderSupportingAction(supportingAction: EmptyStateProps[\"supportingAction\"], isCompact: boolean) {\n  if (typeof supportingAction === \"object\") {\n    if (\"text\" in supportingAction && \"href\" in supportingAction) {\n      const { text, ...linkProps } = supportingAction as LinkProps & { text: string };\n      return <Link text={text} {...linkProps} />;\n    }\n    if (\"text\" in supportingAction) {\n      const { text, ...buttonProps } = supportingAction as ButtonProps & { text: string };\n      return (\n        <Button kind=\"tertiary\" size={isCompact ? \"small\" : \"medium\"} {...buttonProps}>\n          {text}\n        </Button>\n      );\n    }\n  }\n\n  return supportingAction;\n}\n\nexport default EmptyState;\n"
  },
  {
    "path": "packages/core/src/components/EmptyState/EmptyState.types.ts",
    "content": "import type React from \"react\";\nimport { type LinkProps } from \"../Link/Link\";\nimport { type VibeComponentProps } from \"src/types\";\nimport { type ButtonProps, type ButtonType } from \"@vibe/button\";\n\nexport type EmptyStateLayout = \"default\" | \"compact\";\n\nexport interface EmptyStateProps extends VibeComponentProps {\n  /** Optional title for the empty state */\n  title?: string;\n  /** Required description text explaining the empty state */\n  description: string | React.ReactNode;\n  /** Optional visual element like image, animation, video, or illustration to display */\n  visual?: React.ReactNode;\n  /** Main action button configuration */\n  mainAction?:\n    | React.ReactElement<ButtonProps>\n    | (Omit<ButtonProps, \"kind\" | \"children\" | \"size\"> & {\n        kind?: Exclude<ButtonType, \"tertiary\">;\n        text: string;\n      });\n  /** Supporting action (link or tertiary button) configuration */\n  supportingAction?:\n    | React.ReactElement<ButtonProps | LinkProps>\n    | (Omit<ButtonProps, \"kind\" | \"children\" | \"size\"> & {\n        kind: \"tertiary\";\n        text: string;\n      })\n    | (LinkProps & {\n        text: string;\n      });\n  /** Layout style of the empty state */\n  layout?: EmptyStateLayout;\n}\n"
  },
  {
    "path": "packages/core/src/components/EmptyState/__tests__/EmptyState.test.tsx",
    "content": "import { vi, beforeEach, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { render, screen, fireEvent } from \"@testing-library/react\";\nimport EmptyState from \"../EmptyState\";\nimport { Button } from \"@vibe/button\";\nimport Link from \"../../../components/Link/Link\";\n\ndescribe(\"EmptyState component\", () => {\n  const mockOnClick = vi.fn();\n\n  beforeEach(() => {\n    vi.clearAllMocks();\n  });\n\n  it(\"renders with required props only\", () => {\n    render(<EmptyState description=\"This is a description\" />);\n\n    expect(screen.getByText(\"This is a description\")).toBeInTheDocument();\n    expect(screen.queryByRole(\"heading\")).not.toBeInTheDocument();\n    expect(screen.queryByRole(\"button\")).not.toBeInTheDocument();\n    expect(screen.queryByRole(\"link\")).not.toBeInTheDocument();\n\n    // Verify default test ID is applied\n    expect(screen.getByTestId(\"empty-state\")).toBeInTheDocument();\n  });\n\n  it(\"renders with all props\", () => {\n    render(\n      <EmptyState\n        title=\"Empty State Title\"\n        description=\"This is a description\"\n        className=\"custom-class\"\n        mainAction={<Button onClick={mockOnClick}> Main Action</Button>}\n        supportingAction={<Link href=\"https://example.com\" text=\"Read more\" />}\n        id=\"custom-id\"\n        data-testid=\"custom-test-id\"\n      />\n    );\n\n    // Check title and description\n    expect(screen.getByRole(\"heading\", { name: \"Empty State Title\" })).toBeInTheDocument();\n    expect(screen.getByText(\"This is a description\")).toBeInTheDocument();\n\n    // Check main action button\n    const button = screen.getByRole(\"button\", { name: \"Main Action\" });\n    expect(button).toBeInTheDocument();\n    fireEvent.click(button);\n\n    // Check supporting link action\n    const link = screen.getByRole(\"link\", { name: \"Read more\" });\n    expect(link).toBeInTheDocument();\n    expect(link).toHaveAttribute(\"href\", \"https://example.com\");\n    fireEvent.click(link);\n    expect(mockOnClick).toHaveBeenCalledTimes(1);\n\n    // Check custom className\n    const emptyState = screen.getByTestId(\"custom-test-id\");\n    expect(emptyState).toHaveClass(\"custom-class\");\n\n    // Check custom ID\n    expect(emptyState).toHaveAttribute(\"id\", \"custom-id\");\n  });\n\n  it(\"renders with supporting button action\", () => {\n    render(\n      <EmptyState\n        description=\"This is a description\"\n        supportingAction={\n          <Button type=\"button\" onClick={mockOnClick}>\n            Secondary Action\n          </Button>\n        }\n      />\n    );\n\n    const button = screen.getByRole(\"button\", { name: \"Secondary Action\" });\n    expect(button).toBeInTheDocument();\n\n    fireEvent.click(button);\n    expect(mockOnClick).toHaveBeenCalledTimes(1);\n  });\n\n  it(\"renders with compact layout\", () => {\n    render(<EmptyState description=\"This is a description\" layout=\"compact\" data-testid=\"compact-empty-state\" />);\n\n    const emptyState = screen.getByTestId(\"compact-empty-state\");\n    expect(emptyState).toHaveClass(\"compact\");\n  });\n\n  it(\"renders with custom image\", () => {\n    render(\n      <EmptyState\n        description=\"This is a description\"\n        visual={<img src=\"https://example.com/image.png\" alt=\"Empty state illustration\" />}\n      />\n    );\n\n    const image = screen.getByRole(\"img\");\n    expect(image).toHaveAttribute(\"src\", \"https://example.com/image.png\");\n  });\n\n  it(\"renders with custom React node as image\", () => {\n    render(\n      <EmptyState\n        description=\"This is a description\"\n        visual={<div data-testid=\"empty-state-visual\">Custom Icon</div>}\n      />\n    );\n\n    expect(screen.getByTestId(\"empty-state-visual\")).toBeInTheDocument();\n  });\n\n  it(\"renders with description as a React element\", () => {\n    render(\n      <EmptyState\n        description={\n          <span data-testid=\"custom-description\">\n            Custom description with <strong>formatting</strong>\n          </span>\n        }\n      />\n    );\n\n    expect(screen.getByTestId(\"custom-description\")).toBeInTheDocument();\n    expect(screen.getByText(\"formatting\")).toBeInTheDocument();\n  });\n\n  it(\"renders with actions passed as prop objects\", () => {\n    const mainActionClick = vi.fn();\n    const supportingActionClick = vi.fn();\n\n    render(\n      <EmptyState\n        description=\"This is a description\"\n        mainAction={{\n          kind: \"primary\",\n          text: \"Main Action\",\n          onClick: mainActionClick\n        }}\n        supportingAction={{\n          kind: \"tertiary\",\n          text: \"Supporting Action\",\n          onClick: supportingActionClick\n        }}\n      />\n    );\n\n    // Check main action button\n    const mainButton = screen.getByRole(\"button\", { name: \"Main Action\" });\n    expect(mainButton).toBeInTheDocument();\n    fireEvent.click(mainButton);\n    expect(mainActionClick).toHaveBeenCalledTimes(1);\n\n    // Check supporting action button\n    const supportingButton = screen.getByRole(\"button\", { name: \"Supporting Action\" });\n    expect(supportingButton).toBeInTheDocument();\n    fireEvent.click(supportingButton);\n    expect(supportingActionClick).toHaveBeenCalledTimes(1);\n  });\n\n  it(\"renders with supporting action as link props\", () => {\n    render(\n      <EmptyState\n        description=\"This is a description\"\n        supportingAction={{\n          text: \"Learn More\",\n          href: \"https://example.com\"\n        }}\n      />\n    );\n\n    const link = screen.getByRole(\"link\", { name: \"Learn More\" });\n    expect(link).toBeInTheDocument();\n    expect(link).toHaveAttribute(\"href\", \"https://example.com\");\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/EmptyState/index.ts",
    "content": "export { default as EmptyState } from \"./EmptyState\";\n\nexport * from \"./EmptyState.types\";\n"
  },
  {
    "path": "packages/core/src/components/ExpandCollapse/ExpandCollapse.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n.expandCollapse {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n  color: var(--primary-text-color);\n  background-color: transparent;\n  box-sizing: border-box;\n  border-radius: var(--border-radius-small);\n}\n\n.header {\n  @include reset-button();\n  padding: var(--space-16);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: pointer;\n}\n\n.header:hover {\n  background-color: var(--primary-background-hover-color);\n}\n\n.header:active {\n  transform: scale(1);\n}\n\n.header .headerContent {\n  margin: 0;\n}\n\n.header .iconComponent {\n  color: var(--icon-color);\n}\n\n.content {\n  padding: var(--space-16);\n}\n\n.section {\n  width: 100%;\n}\n\n.hideBorder {\n  border: none;\n}\n\n.hideBorderBottom {\n  border-bottom: none;\n}\n\n.showBorder {\n  border: 1px solid var(--ui-border-color);\n  .headerOpen {\n    border-bottom: 1px solid;\n    border-color: var(--ui-border-color);\n  }\n}\n\n.animateIconOpen {\n  transform: rotate(-180deg);\n  transition: transform var(--motion-expressive-short) var(--motion-timing-transition);\n}\n\n.animateIconClose {\n  transform: rotate(-360deg);\n  transition: transform var(--motion-expressive-short) var(--motion-timing-transition);\n}\n\n.header.leftIcon {\n  justify-content: flex-start;\n  gap: var(--space-8);\n}\n"
  },
  {
    "path": "packages/core/src/components/ExpandCollapse/ExpandCollapse.tsx",
    "content": "import cx from \"classnames\";\nimport React, { type FC, forwardRef, type ReactElement, useCallback, useRef, useState } from \"react\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport { Icon } from \"@vibe/icon\";\nimport { Text } from \"@vibe/typography\";\nimport { DropdownChevronDown } from \"@vibe/icons\";\nimport { type VibeComponentProps, type ElementContent } from \"../../types\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./ExpandCollapse.module.scss\";\nimport { type ExpandCollapseIconPosition } from \"./ExpandCollapse.types\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface ExpandCollapseProps extends VibeComponentProps {\n  /**\n   * Custom renderer for the header component.\n   */\n  headerComponentRenderer?: () => ReactElement;\n  /**\n   * Class name applied to the header.\n   */\n  headerClassName?: string;\n  /**\n   * Class name applied to the content.\n   */\n  contentClassName?: string;\n  /**\n   * Class name applied to the root component.\n   */\n  componentClassName?: string;\n  /**\n   * The title displayed in the header.\n   */\n  title?: ElementContent;\n  /**\n   * The content inside the expandable section.\n   */\n  children?: ElementContent;\n  /**\n   * The size of the expand/collapse icon.\n   */\n  iconSize?: number | string;\n  /**\n   * The position of the icon.\n   */\n  iconPosition?: ExpandCollapseIconPosition;\n  /**\n   * If true, the section is open by default when rendered.\n   */\n  defaultOpenState?: boolean;\n  /**\n   * Controls the open state of the section.\n   */\n  open?: boolean;\n  /**\n   * Callback fired when the header is clicked.\n   */\n  onClick?: (event: React.MouseEvent) => void;\n  /**\n   * If true, hides the border around the component.\n   */\n  hideBorder?: boolean;\n  /**\n   * If true, captures the click event on the button.\n   */\n  captureOnClick?: boolean;\n}\n\nconst ExpandCollapse: FC<ExpandCollapseProps> = forwardRef(\n  (\n    {\n      children,\n      headerComponentRenderer = null,\n      title = \"\",\n      className,\n      defaultOpenState = false,\n      iconSize = 24,\n      iconPosition = \"right\",\n      id = \"\",\n      open,\n      onClick = null,\n      hideBorder = false,\n      headerClassName,\n      contentClassName,\n      componentClassName,\n      \"data-testid\": dataTestId,\n      captureOnClick = true\n    },\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const [isOpen, setIsOpen] = useState(defaultOpenState);\n    const isExpanded = open === undefined ? isOpen : open;\n\n    const toggleExpand = () => {\n      setIsOpen(!isOpen);\n    };\n    const renderHeader = useCallback(() => {\n      return typeof title === \"string\" ? (\n        <Text type=\"text1\" className={cx(styles.headerContent)}>\n          {title}\n        </Text>\n      ) : (\n        title\n      );\n    }, [title]);\n\n    const renderIcon = () => (\n      <Icon\n        className={cx(styles.iconComponent, {\n          [styles.animateIconOpen]: isExpanded,\n          [styles.animateIconClose]: !isExpanded\n        })}\n        type=\"svg\"\n        icon={DropdownChevronDown}\n        size={iconSize}\n      />\n    );\n\n    return (\n      <div\n        ref={mergedRef}\n        className={className}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.EXPAND_COLLAPSE, id)}\n        data-vibe={ComponentVibeId.EXPAND_COLLAPSE}\n      >\n        <div\n          className={cx(\n            styles.expandCollapse,\n            {\n              [styles.hideBorder]: hideBorder,\n              [styles.showBorder]: !hideBorder\n            },\n            componentClassName\n          )}\n        >\n          <button\n            type=\"button\"\n            className={cx(styles.header, styles.section, headerClassName, {\n              [styles.headerOpen]: isExpanded,\n              [styles.hideBorderBottom]: hideBorder,\n              [styles.leftIcon]: iconPosition === \"left\"\n            })}\n            onClickCapture={captureOnClick ? onClick || toggleExpand : undefined}\n            onClick={!captureOnClick ? onClick || toggleExpand : undefined}\n            aria-expanded={isExpanded}\n            aria-controls={`${id}-controls`}\n          >\n            {iconPosition === \"left\" && renderIcon()}\n            {typeof title !== \"string\" || title.length !== 0\n              ? renderHeader()\n              : headerComponentRenderer && headerComponentRenderer()}\n            {iconPosition === \"right\" && renderIcon()}\n          </button>\n          {isExpanded && (\n            <div\n              className={cx(styles.content, styles.section, contentClassName, {\n                [styles.animateExpandCollapseContent]: isExpanded\n              })}\n              id={`${id}-controls`}\n              role=\"region\"\n            >\n              {children}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nexport default ExpandCollapse;\n"
  },
  {
    "path": "packages/core/src/components/ExpandCollapse/ExpandCollapse.types.ts",
    "content": "export type ExpandCollapseIconPosition = \"left\" | \"right\";\n"
  },
  {
    "path": "packages/core/src/components/ExpandCollapse/__tests__/ExpandCollapse.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport { render, fireEvent, screen } from \"@testing-library/react\";\nimport ExpandCollapse from \"../ExpandCollapse\";\n\ndescribe(\"ExpandCollapse\", () => {\n  it(\"renders correctly with empty props\", () => {\n    const tree = renderer.create(<ExpandCollapse />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"Should render header component\", () => {\n    render(<ExpandCollapse headerComponentRenderer={() => <h1>Some Header</h1>} />);\n\n    expect(screen.getByText(\"Some Header\")).toBeInTheDocument();\n  });\n\n  it(\"Should not render child components when closed\", () => {\n    render(\n      <ExpandCollapse headerComponentRenderer={() => <h1>Some Header</h1>}>\n        <h1>Child 1</h1>\n        <span>Child 2</span>\n      </ExpandCollapse>\n    );\n\n    expect(screen.getByText(\"Some Header\")).toBeInTheDocument();\n\n    expect(screen.queryByText(\"Child 1\")).toBeNull();\n    expect(screen.queryByText(\"Child 2\")).toBeNull();\n  });\n\n  it(\"Should render header and child components when defaultOpenState = true\", () => {\n    render(\n      <ExpandCollapse defaultOpenState={true} headerComponentRenderer={() => <h1>Some Header</h1>}>\n        <h1>Child 1</h1>\n        <span>Child 2</span>\n      </ExpandCollapse>\n    );\n\n    expect(screen.getByText(\"Some Header\")).toBeInTheDocument();\n\n    expect(screen.getByText(\"Child 1\")).toBeInTheDocument();\n    expect(screen.getByText(\"Child 2\")).toBeInTheDocument();\n  });\n\n  it(\"Should render child components after clicking component\", () => {\n    const { container } = render(\n      <ExpandCollapse headerComponentRenderer={() => <h1>Some Header</h1>}>\n        <h1>Child 1</h1>\n        <span>Child 2</span>\n      </ExpandCollapse>\n    );\n\n    expect(screen.getByText(\"Some Header\")).toBeInTheDocument();\n\n    expect(screen.queryByText(\"Child 1\")).toBeNull();\n    expect(screen.queryByText(\"Child 2\")).toBeNull();\n\n    fireEvent.click(container.firstChild.firstChild.firstChild);\n\n    expect(screen.getByText(\"Child 1\")).toBeInTheDocument();\n    expect(screen.getByText(\"Child 2\")).toBeInTheDocument();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/ExpandCollapse/__tests__/__snapshots__/ExpandCollapse.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`ExpandCollapse > renders correctly with empty props 1`] = `\n<div\n  data-testid=\"expand-collapse\"\n  data-vibe=\"ExpandCollapse\"\n  id=\"\"\n>\n  <div\n    className=\"expandCollapse showBorder\"\n  >\n    <button\n      aria-controls=\"-controls\"\n      aria-expanded={false}\n      className=\"header section\"\n      onClickCapture={[Function]}\n      type=\"button\"\n    >\n      <svg\n        aria-hidden={true}\n        className=\"icon iconComponent animateIconClose\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"24\"\n        viewBox=\"0 0 20 20\"\n        width=\"24\"\n      >\n        <path\n          d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n        />\n      </svg>\n    </button>\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/ExpandCollapse/index.ts",
    "content": "export { default as ExpandCollapse, type ExpandCollapseProps } from \"./ExpandCollapse\";\n"
  },
  {
    "path": "packages/core/src/components/FieldLabel/FieldLabel.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n.labelComponentWrapper {\n  @include vibe-text(text2, normal);\n  display: flex;\n  padding-bottom: var(--space-4);\n  align-items: center;\n}\n\n.labelComponentIcon {\n  margin: 0 var(--space-8) 0 var(--space-4);\n  line-height: 24px;\n  color: var(--secondary-text-color);\n}\n\n.labelComponentText {\n  color: var(--primary-text-color);\n  padding-block: 2px;\n}\n\n.required {\n  color: var(--negative-color);\n}\n"
  },
  {
    "path": "packages/core/src/components/FieldLabel/FieldLabel.tsx",
    "content": "import cx from \"classnames\";\nimport React, { type FC, type ForwardedRef, forwardRef } from \"react\";\nimport { Icon } from \"@vibe/icon\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport styles from \"./FieldLabel.module.scss\";\n\nexport interface FieldLabelProps extends VibeComponentProps {\n  /**\n   * The icon displayed next to the label.\n   */\n  icon?: string | React.FunctionComponent | null;\n  /**\n   * The text content of the label.\n   */\n  labelText?: string;\n  /**\n   * The ID of the associated input element.\n   */\n  labelFor?: string;\n  /**\n   * Class name applied to the icon.\n   */\n  iconClassName?: string;\n  /**\n   * Class name applied to the label text.\n   */\n  labelClassName?: string;\n  /**\n   * If true, displays an asterisk to indicate a required field.\n   */\n  required?: boolean;\n  /**\n   * The HTML for attribute of the associated input element.\n   */\n  htmlFor?: string;\n}\n\nconst FieldLabel: FC<FieldLabelProps> = forwardRef(\n  (\n    {\n      className,\n      icon = \"\",\n      labelText = \"\",\n      labelFor = \"\",\n      iconClassName = \"\",\n      labelClassName = \"\",\n      required = false,\n      id = \"\",\n      htmlFor = \"\"\n    },\n    ref: ForwardedRef<HTMLLabelElement>\n  ) => {\n    if (!labelText) {\n      return null;\n    }\n\n    return (\n      <section className={cx(styles.labelComponentWrapper, className)}>\n        <Icon icon={icon} className={cx(styles.labelComponentIcon, iconClassName)} id={labelFor} type=\"font\" />\n        <label\n          id={id}\n          htmlFor={labelFor || htmlFor}\n          ref={ref}\n          className={cx(styles.labelComponentText, labelClassName)}\n        >\n          {labelText}\n          {required && <span className={styles.required}> *</span>}\n        </label>\n      </section>\n    );\n  }\n);\n\nexport default FieldLabel;\n"
  },
  {
    "path": "packages/core/src/components/FieldLabel/index.ts",
    "content": "export { default as FieldLabel, FieldLabelProps } from \"./FieldLabel\";\n"
  },
  {
    "path": "packages/core/src/components/FormattedNumber/FormattedNumber.module.scss",
    "content": "@import \"../../styles/typography\";\n\n.formattedNumberComponent {\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  font-family: var(--font-family);\n  width: 100%;\n}\n\n.prefix {\n  white-space: pre;\n}\n\n.suffix {\n  white-space: pre;\n}\n"
  },
  {
    "path": "packages/core/src/components/FormattedNumber/FormattedNumber.tsx",
    "content": "import cx from \"classnames\";\nimport React, { useMemo, forwardRef } from \"react\";\nimport { formatNumber, formatNumberConsts } from \"../../helpers/textManipulations\";\nimport { validateValue } from \"./FormattedNumberHelpers\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./FormattedNumber.module.scss\";\n\nexport interface FormattedNumberProps extends VibeComponentProps {\n  /**\n   * The numeric value to format.\n   */\n  value?: number | string;\n  /**\n   * The text displayed before the number.\n   */\n  prefix?: string;\n  /**\n   * The text displayed after the number.\n   */\n  suffix?: string;\n  /**\n   * The text displayed when no value is provided.\n   */\n  emptyPlaceHolder?: string;\n  /**\n   * The number of decimal places to display (0 ~ 20).\n   */\n  decimalPrecision?: number;\n  /**\n   * If true, formats the number into a compact notation.\n   */\n  compact?: boolean;\n  /**\n   * The locale used for formatting (Unicode BCP 47 locale identifier).\n   */\n  local?: string;\n  /**\n   * If true, reverses the order of the prefix and suffix.\n   */\n  rtl?: boolean;\n}\n\nconst FormattedNumber = forwardRef(\n  (\n    {\n      value,\n      className,\n      local = formatNumberConsts.DEFAULT_LOCAL,\n      prefix,\n      suffix,\n      emptyPlaceHolder = \"N/A\",\n      decimalPrecision = 2,\n      compact = true,\n      rtl,\n      id,\n      \"data-testid\": dataTestId\n    }: FormattedNumberProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const renderSuffix = useMemo(() => {\n      if (!suffix) return null;\n\n      return <span className={cx(styles.suffix)}>{suffix}</span>;\n    }, [suffix]);\n\n    const renderPrefix = useMemo(() => {\n      if (!prefix) return null;\n\n      return <span className={cx(styles.prefix)}>{prefix}</span>;\n    }, [prefix]);\n\n    const calculatedValue = useMemo(() => {\n      return formatNumber(Number(value), {\n        local,\n        precision: decimalPrecision,\n        isCompact: compact\n      });\n    }, [value, decimalPrecision, local, compact]);\n\n    if (validateValue(value)) {\n      return <span>{emptyPlaceHolder}</span>;\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={className}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.FORMATTED_NUMBER, id)}\n      >\n        {rtl ? renderSuffix : renderPrefix}\n        <span>{calculatedValue}</span>\n        {rtl ? renderPrefix : renderSuffix}\n      </div>\n    );\n  }\n);\n\nexport default FormattedNumber;\n"
  },
  {
    "path": "packages/core/src/components/FormattedNumber/FormattedNumberHelpers.ts",
    "content": "export const validateValue = (value: number | string): boolean => {\n  const isNullOrUndefined = value === null || value === undefined;\n  const isEmptyStringWithSpaces = typeof value === \"string\" && !value.replace(\" \", \"\").length;\n  return isNullOrUndefined || isNaN(Number(value)) || isEmptyStringWithSpaces;\n};\n\nconst range =\n  (min: number, max: number) => (props: Record<string, number>, propName: string, componentName: string) => {\n    if (props[propName] < min || props[propName] > max) {\n      return new Error(\n        `Invalid prop ${propName} supplied to ${componentName}. ${propName} should be between ${min} to ${max}.`\n      );\n    }\n  };\n\nexport const customPropTypes = Object.freeze({\n  range\n});\n"
  },
  {
    "path": "packages/core/src/components/FormattedNumber/__tests__/FormattedNumber.test.tsx",
    "content": "import { beforeEach, afterEach, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { render, cleanup } from \"@testing-library/react\";\nimport FormattedNumber from \"../FormattedNumber\";\n\ndescribe(\"FormattedNumber Tests\", () => {\n  beforeEach(() => cleanup());\n  afterEach(() => cleanup());\n\n  describe(\"emptyPlaceHolder\", () => {\n    it(\"no props where provided\", () => {\n      const { getByText } = render(<FormattedNumber id=\"test\" />);\n      expect(getByText(\"N/A\")).toBeTruthy();\n    });\n\n    it(\"invalid value - empty string\", () => {\n      const { getByText } = render(<FormattedNumber id=\"test\" value={\" \"} />);\n      expect(getByText(\"N/A\")).toBeTruthy();\n    });\n\n    it(\"invalid value - mixed content\", () => {\n      const { getByText } = render(<FormattedNumber id=\"test\" value=\"a1s2d\" />);\n      expect(getByText(\"N/A\")).toBeTruthy();\n    });\n\n    it(\"should render emptyPlaceHolder if provided\", () => {\n      const emptyPlaceHolderText = \"Test\";\n      const { getByText } = render(<FormattedNumber id=\"test\" emptyPlaceHolder={emptyPlaceHolderText} />);\n      expect(getByText(emptyPlaceHolderText)).toBeTruthy();\n    });\n  });\n\n  describe(\"Correct format\", () => {\n    const smallNumber = 98;\n    const largeNumber = 987654321;\n    const decimalNumber = 987654321.123456;\n\n    it(\"should format small number without sign\", () => {\n      const expectedText = \"98\";\n      const { getByText } = render(<FormattedNumber id=\"test\" value={smallNumber} />);\n      expect(getByText(expectedText)).toBeTruthy();\n    });\n\n    it(\"should format large number with sign\", () => {\n      const expectedText = \"987.6543M\";\n      const { getByText } = render(<FormattedNumber id=\"test\" value={largeNumber} decimalPrecision={4} />);\n      expect(getByText(expectedText)).toBeTruthy();\n    });\n\n    it(\"should format large number without sign\", () => {\n      const expectedText = \"987,654,321\";\n      const { getByText } = render(<FormattedNumber id=\"test\" value={largeNumber} compact={false} />);\n      expect(getByText(expectedText)).toBeTruthy();\n    });\n\n    it(\"should format large number without sign and limited decimal numbers\", () => {\n      const expectedText = \"987,654,321.123\";\n      const { getByText } = render(\n        <FormattedNumber id=\"test\" value={decimalNumber} compact={false} decimalPrecision={3} />\n      );\n      expect(getByText(expectedText)).toBeTruthy();\n    });\n\n    it(\"should format with MIN precision for precision below MIN\", () => {\n      const expectedText = \"987,654,321\";\n      const { getByText } = render(\n        <FormattedNumber id=\"test\" value={decimalNumber} compact={false} decimalPrecision={-10} />\n      );\n      expect(getByText(expectedText)).toBeTruthy();\n    });\n\n    it(\"should format with MAX precision for precision above MAX\", () => {\n      const expectedText = \"987,654,321.123456\";\n      const { getByText } = render(\n        <FormattedNumber id=\"test\" value={decimalNumber} compact={false} decimalPrecision={50} />\n      );\n      expect(getByText(expectedText)).toBeTruthy();\n    });\n  });\n\n  describe(\"local support\", () => {\n    const value = 456;\n\n    it(\"should use handle unsupported local\", () => {\n      const badLocal = \"bad\";\n      const { getByText } = render(<FormattedNumber id=\"test\" value={value} local={badLocal} />);\n      expect(getByText(\"456\")).toBeTruthy();\n    });\n  });\n\n  describe(\"forward ref\", () => {\n    it(\"should be able to forward ref\", () => {\n      const ref = React.createRef<HTMLDivElement>();\n      render(<FormattedNumber ref={ref} id=\"test\" className=\"ref-class-name\" value={1248} />);\n      expect(ref.current.classList.contains(\"ref-class-name\")).toEqual(true);\n    });\n  });\n\n  describe(\"Prefix && Suffix\", () => {\n    const value = 456;\n    const prefix = \"pref\";\n    const suffix = \"suf\";\n\n    it(\"should render predix and suffix in the correct order if provided\", () => {\n      const { container } = render(<FormattedNumber id=\"test\" value={value} prefix={prefix} suffix={suffix} />);\n      const { childNodes } = container.firstChild;\n\n      expect(childNodes.length).toBe(3);\n      expect(childNodes[0].textContent).toBe(prefix);\n      expect(childNodes[2].textContent).toBe(suffix);\n    });\n\n    it(\"should render rtl\", () => {\n      const { container } = render(\n        <FormattedNumber id=\"test\" value={value} prefix={prefix} suffix={suffix} rtl={true} />\n      );\n      const { childNodes } = container.firstChild;\n\n      expect(childNodes.length).toBe(3);\n      expect(childNodes[0].textContent).toBe(suffix);\n      expect(childNodes[2].textContent).toBe(prefix);\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/FormattedNumber/index.ts",
    "content": "export { default as FormattedNumber, type FormattedNumberProps } from \"./FormattedNumber\";\n"
  },
  {
    "path": "packages/core/src/components/GridKeyboardNavigationContext/GridKeyboardNavigationContext.ts",
    "content": "import React, { useContext, useCallback, useMemo } from \"react\";\nimport useEventListener from \"../../hooks/useEventListener\";\nimport { useLastNavigationDirection } from \"../Menu/Menu/hooks/useLastNavigationDirection\";\nimport {\n  getDirectionMaps,\n  getNextElementToFocusInDirection,\n  getOppositeDirection,\n  getOutmostElementInDirection\n} from \"./helper\";\nimport { type NavDirections } from \"../../hooks/useFullKeyboardListeners\";\nimport {\n  type GridElementRef,\n  type GridKeyboardNavigationContextType,\n  type Position\n} from \"./GridKeyboardNavigationContextConstants\";\n\nexport const GridKeyboardNavigationContext = React.createContext<GridKeyboardNavigationContextType>(null);\n\n/**\n * @param {({topElement: MutableRefObject, bottomElement: MutableRefObject}|\n * {leftElement: MutableRefObject, rightElement: MutableRefObject})[]} positions - the positions of the navigable items\n * @param {*} wrapperRef - a reference for a wrapper element which contains all the referenced elements\n * @param options - { disabled: boolean }\n */\nexport const useGridKeyboardNavigationContext = (\n  positions: Position[],\n  wrapperRef: GridElementRef,\n  options: { disabled: boolean } = { disabled: false }\n) => {\n  const directionMaps = useMemo(() => getDirectionMaps(positions), [positions]);\n  const upperContext = useContext(GridKeyboardNavigationContext);\n  const { lastNavigationDirectionRef } = useLastNavigationDirection();\n\n  const onWrapperFocus = useCallback(() => {\n    const keyboardDirection = lastNavigationDirectionRef.current;\n    if (!keyboardDirection || options.disabled) {\n      return;\n    }\n    const oppositeDirection = getOppositeDirection(keyboardDirection);\n    const refToFocus = getOutmostElementInDirection(directionMaps, oppositeDirection);\n    refToFocus?.current?.focus();\n  }, [directionMaps, options.disabled, lastNavigationDirectionRef]);\n  useEventListener({ eventName: \"focus\", callback: onWrapperFocus, ref: wrapperRef });\n\n  const onOutboundNavigation = useCallback(\n    (elementRef: GridElementRef, direction: NavDirections) => {\n      if (options.disabled) return;\n      const maybeNextElement = getNextElementToFocusInDirection(directionMaps[direction], elementRef);\n      if (maybeNextElement) {\n        elementRef.current?.blur();\n        maybeNextElement.current?.focus();\n        return;\n      }\n      // nothing on that direction - try updating the upper context\n      upperContext?.onOutboundNavigation(wrapperRef, direction);\n    },\n    [directionMaps, upperContext, wrapperRef, options.disabled]\n  );\n  return { onOutboundNavigation };\n};\n"
  },
  {
    "path": "packages/core/src/components/GridKeyboardNavigationContext/GridKeyboardNavigationContextConstants.ts",
    "content": "import { type MutableRefObject } from \"react\";\nimport { type NavDirections } from \"../../hooks/useFullKeyboardListeners\";\n\nexport type GridElementRef = MutableRefObject<HTMLElement> & { current?: HTMLElement & { disabled?: boolean } };\nexport type DirectionMap = Map<GridElementRef, GridElementRef>;\nexport type DirectionMaps = Record<NavDirections, DirectionMap>;\n\nexport type Position = VerticalPosition & HorizontalPosition;\n\ntype VerticalPosition = {\n  topElement?: GridElementRef;\n  bottomElement?: GridElementRef;\n};\n\ntype HorizontalPosition = {\n  leftElement?: GridElementRef;\n  rightElement?: GridElementRef;\n};\n\nexport interface GridKeyboardNavigationContextType {\n  /**\n   * Callback fired when navigation moves beyond the bounds of the grid.\n   */\n  onOutboundNavigation?: (ref: GridElementRef, direction: NavDirections) => void;\n}\n"
  },
  {
    "path": "packages/core/src/components/GridKeyboardNavigationContext/__tests__/GridKeyboardNavigationContext.test.tsx",
    "content": "import { vi, beforeEach, afterEach, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { act, cleanup, renderHook } from \"@testing-library/react-hooks\";\nimport userEvent from \"@testing-library/user-event\";\nimport { NavDirections } from \"../../../hooks/useFullKeyboardListeners\";\nimport { GridKeyboardNavigationContext, useGridKeyboardNavigationContext } from \"../GridKeyboardNavigationContext\";\n\ndescribe(\"GridKeyboardNavigationContext\", () => {\n  let wrapperRef;\n  let ref1;\n  let ref2;\n  let ref3;\n  let ref4;\n  let ref5;\n\n  beforeEach(() => {\n    ref1 = createElementRef(\"ref1\");\n    ref2 = createElementRef(\"ref2\");\n    ref3 = createElementRef(\"ref3\");\n    ref4 = createElementRef(\"ref4\");\n    ref5 = createElementRef(\"ref5\");\n  });\n\n  afterEach(() => {\n    [wrapperRef, ref1, ref2, ref3, ref4, ref5].forEach(ref => ref?.current?.remove());\n    cleanup();\n  });\n\n  describe(\"useGridKeyboardNavigationContext\", () => {\n    it(\"should focus the element positioned on the direction of onOutboundNavigation\", () => {\n      const positions = [{ leftElement: ref2, rightElement: ref4 }];\n      const keyboardDirection = NavDirections.RIGHT;\n      const { result } = renderHookForTest(positions);\n\n      result.current.onOutboundNavigation(ref2, keyboardDirection);\n\n      expect(ref2.current.blur).toHaveBeenCalled();\n      expect(ref4.current.focus).toHaveBeenCalled();\n    });\n\n    it(\"should do nothing if there is no element on the direction of onOutboundNavigation\", () => {\n      const positions = [{ leftElement: ref2, rightElement: ref4 }];\n      const keyboardDirection = NavDirections.UP;\n      const { result } = renderHookForTest(positions);\n\n      result.current.onOutboundNavigation(ref2, keyboardDirection);\n\n      expect(ref2.current.blur).not.toHaveBeenCalled();\n    });\n\n    it(\"should do nothing if onOutboundNavigation is called when disabled\", () => {\n      const positions = [{ leftElement: ref2, rightElement: ref4 }];\n      const keyboardDirection = NavDirections.RIGHT;\n      const { result } = renderHookForTest(positions, true);\n\n      result.current.onOutboundNavigation(ref2, keyboardDirection);\n\n      expect(ref2.current.blur).not.toHaveBeenCalled();\n      expect(ref4.current.blur).not.toHaveBeenCalled();\n    });\n\n    it(\"should call the upper context's onOutboundNavigation if there is no element in that direction\", () => {\n      const positions = [{ leftElement: ref2, rightElement: ref4 }];\n      const keyboardDirection = NavDirections.UP;\n      const fakeUpperContext = { onOutboundNavigation: vi.fn() };\n      const { result } = renderHookWithContext(positions, fakeUpperContext);\n\n      result.current.onOutboundNavigation(ref2, keyboardDirection);\n\n      expect(fakeUpperContext.onOutboundNavigation).toHaveBeenCalledWith(wrapperRef, keyboardDirection);\n    });\n\n    it(\"should not focus any other element when the is no last direction of keyboard navigation, after the wrapper element is focused\", () => {\n      const positions = [\n        { leftElement: ref2, rightElement: ref4 },\n        { topElement: ref1, rightElement: ref3 }\n      ];\n\n      renderHookForTest(positions);\n      focusWrapperElement();\n\n      expect(ref1.current.focus).not.toHaveBeenCalled();\n      expect(ref2.current.focus).not.toHaveBeenCalled();\n      expect(ref3.current.focus).not.toHaveBeenCalled();\n      expect(ref4.current.focus).not.toHaveBeenCalled();\n    });\n\n    it(\"should do nothing if the wrapper element is focused, and the hook is disabled\", () => {\n      const positions = [{ leftElement: ref2, rightElement: ref4 }];\n      renderHookForTest(positions, true);\n\n      act(() => {\n        userEvent.keyboard(\"{ArrowLeft}\"); // make sure there's a value for lastNavigationDirection\n      });\n      focusWrapperElement();\n\n      expect(ref2.current.blur).not.toHaveBeenCalled();\n      expect(ref4.current.blur).not.toHaveBeenCalled();\n    });\n\n    it(\"should focus the element in the last direction of keyboard navigation, when the wrapper element is focused\", () => {\n      const positions = [{ leftElement: ref2, rightElement: ref4 }];\n\n      renderHookForTest(positions);\n\n      act(() => {\n        userEvent.keyboard(\"{ArrowLeft}\"); // if the user navigated left, the right-most element should be focused\n      });\n      focusWrapperElement();\n\n      expect(ref2.current.focus).not.toHaveBeenCalled();\n      expect(ref4.current.focus).toHaveBeenCalled();\n    });\n\n    function renderHookForTest(positions, disabled = false) {\n      wrapperRef = createElementRef(\"wrapper\");\n      return renderHook(() => useGridKeyboardNavigationContext(positions, wrapperRef, { disabled }));\n    }\n\n    function renderHookWithContext(positions, contextValue) {\n      wrapperRef = createElementRef();\n      const wrapper = ({ children }) => (\n        <GridKeyboardNavigationContext.Provider value={contextValue}>{children}</GridKeyboardNavigationContext.Provider>\n      );\n      return renderHook(() => useGridKeyboardNavigationContext(positions, wrapperRef), { wrapper });\n    }\n\n    function focusWrapperElement() {\n      act(() => {\n        wrapperRef.current.dispatchEvent(new Event(\"focus\")); //jsdom's .focus() isn't working as it should, so we fire our own event\n      });\n    }\n  });\n\n  function createElementRef(id) {\n    const element = document.createElement(\"div\");\n    element.id = id;\n    document.body.appendChild(element);\n    vi.spyOn(element, \"blur\");\n    vi.spyOn(element, \"focus\");\n    return { current: element };\n  }\n});\n"
  },
  {
    "path": "packages/core/src/components/GridKeyboardNavigationContext/__tests__/helper.test.ts",
    "content": "import { describe, it, expect } from \"vitest\";\nimport { NavDirections } from \"../../../hooks/useFullKeyboardListeners\";\nimport {\n  getOppositeDirection,\n  getDirectionMaps,\n  getOutmostElementInDirection,\n  getNextElementToFocusInDirection\n} from \"../helper\";\n\ndescribe(\"GridKeyboardNavigationContext.helper\", () => {\n  const ELEMENT1 = { current: \"e1\" };\n  const ELEMENT2 = { current: \"e2\" };\n  const ELEMENT3 = { current: \"e3\" };\n  const ELEMENT4 = { current: \"e4\" };\n  const ELEMENT5 = { current: \"e5\" };\n  const UNMOUNTED_ELEMENT_1 = { current: null };\n  const UNMOUNTED_ELEMENT_2 = { current: null };\n  const DISABLED_ELEMENT = { current: { disabled: true } };\n  const DISABLED_DATASET_ELEMENT = { current: { dataset: { disabled: \"true\" } } };\n  const DATASET_NOT_DISABLED_ELEMENT = { current: { dataset: { disabled: \"false\" } } };\n\n  describe(\"getDirectionMaps\", () => {\n    it(\"should return empty direction maps when no positions are supplied\", () => {\n      const input = [];\n      const expected = {\n        [NavDirections.RIGHT]: new Map(),\n        [NavDirections.LEFT]: new Map(),\n        [NavDirections.UP]: new Map(),\n        [NavDirections.DOWN]: new Map()\n      };\n\n      const result = getDirectionMaps(input);\n\n      expect(result).toEqual(expected);\n    });\n\n    it(\"should ignore positions in unexpected object schema\", () => {\n      const input = [\n        { topElement: ELEMENT1, bottomElement: ELEMENT2 }, // this is the only valid input\n        { unexpectedKey1: ELEMENT2, unexpectedKey2: ELEMENT3 },\n        { topElement: ELEMENT4 },\n        { bottomElement: ELEMENT3 },\n        {}\n      ];\n      const expected = {\n        [NavDirections.RIGHT]: new Map(),\n        [NavDirections.LEFT]: new Map(),\n        [NavDirections.UP]: new Map([[ELEMENT2, ELEMENT1]]),\n        [NavDirections.DOWN]: new Map([[ELEMENT1, ELEMENT2]])\n      };\n\n      const result = getDirectionMaps(input);\n\n      expect(result).toEqual(expected);\n    });\n\n    it(\"should return directions map which represent the relation between all positions\", () => {\n      const input = [\n        { topElement: ELEMENT1, bottomElement: ELEMENT2 },\n        { topElement: ELEMENT2, bottomElement: ELEMENT3 },\n        { leftElement: ELEMENT2, rightElement: ELEMENT4 },\n        { leftElement: ELEMENT4, rightElement: ELEMENT5 }\n      ];\n      const expected = {\n        [NavDirections.RIGHT]: new Map([\n          [ELEMENT2, ELEMENT4], // ELEMENT4 is to the right of ELEMENT2...\n          [ELEMENT4, ELEMENT5]\n        ]),\n        [NavDirections.LEFT]: new Map([\n          [ELEMENT5, ELEMENT4],\n          [ELEMENT4, ELEMENT2]\n        ]),\n        [NavDirections.UP]: new Map([\n          [ELEMENT2, ELEMENT1],\n          [ELEMENT3, ELEMENT2]\n        ]),\n        [NavDirections.DOWN]: new Map([\n          [ELEMENT1, ELEMENT2],\n          [ELEMENT2, ELEMENT3]\n        ])\n      };\n\n      const result = getDirectionMaps(input);\n\n      expect(result).toEqual(expected);\n    });\n\n    it(\"should throw when a circular vertical positioning is added\", () => {\n      const input = [\n        { topElement: ELEMENT1, bottomElement: ELEMENT2 },\n        { topElement: ELEMENT2, bottomElement: ELEMENT1 }, // invalid\n        { leftElement: ELEMENT2, rightElement: ELEMENT4 }, // valid\n        { leftElement: ELEMENT4, rightElement: ELEMENT5 } // valid\n      ];\n\n      expect(() => getDirectionMaps(input)).toThrowError(\n        \"Circular positioning detected: the BOTTOM element is already positioned to the TOP of the TOP element. This probably means the layout isn't ordered correctly.\"\n      );\n    });\n\n    it(\"should throw when a circular horizontal positioning is added\", () => {\n      const input = [\n        { leftElement: ELEMENT2, rightElement: ELEMENT4 },\n        { leftElement: ELEMENT4, rightElement: ELEMENT2 }, // invalid\n        { topElement: ELEMENT1, bottomElement: ELEMENT2 }, // valid\n        { topElement: ELEMENT2, bottomElement: ELEMENT5 } // valid\n      ];\n\n      expect(() => getDirectionMaps(input)).toThrowError(\n        \"Circular positioning detected: the RIGHT element is already positioned to the LEFT of the LEFT element. This probably means the layout isn't ordered correctly.\"\n      );\n    });\n  });\n\n  describe(\"getOppositeDirection\", () => {\n    [\n      { direction: NavDirections.LEFT, opposite: NavDirections.RIGHT },\n      { direction: NavDirections.RIGHT, opposite: NavDirections.LEFT },\n      { direction: NavDirections.UP, opposite: NavDirections.DOWN },\n      { direction: NavDirections.DOWN, opposite: NavDirections.UP }\n    ].forEach(({ direction, opposite }) => {\n      it(`should return \"${opposite}\" as the opposite of \"${direction}\"`, () => {\n        expect(getOppositeDirection(direction)).toBe(opposite);\n      });\n    });\n\n    it(\"should throw on unknown input\", () => {\n      const input = \"UNKNOWN!\";\n      expect(() => getOppositeDirection(input)).toThrowError(`Unexpected direction: ${input}`);\n    });\n  });\n\n  describe(\"getOutmostElementToFocus\", () => {\n    it(\"should return the right-most element when there are multiple horizontal connections\", () => {\n      const directionMaps = getDirectionMaps([\n        { topElement: ELEMENT1, bottomElement: ELEMENT2 },\n        { topElement: ELEMENT2, bottomElement: ELEMENT3 },\n        { leftElement: ELEMENT2, rightElement: ELEMENT4 },\n        { leftElement: ELEMENT4, rightElement: ELEMENT5 }\n      ]);\n      const direction = NavDirections.RIGHT;\n      const expected = ELEMENT5;\n\n      const result = getOutmostElementInDirection(directionMaps, direction);\n\n      expect(result).toEqual(expected);\n    });\n\n    it(\"should return the left-most element when there are multiple horizontal connections\", () => {\n      const directionMaps = getDirectionMaps([\n        { topElement: ELEMENT1, bottomElement: ELEMENT2 },\n        { topElement: ELEMENT2, bottomElement: ELEMENT3 },\n        { leftElement: ELEMENT2, rightElement: ELEMENT4 },\n        { leftElement: ELEMENT4, rightElement: ELEMENT5 }\n      ]);\n      const direction = NavDirections.LEFT;\n      const expected = ELEMENT2;\n\n      const result = getOutmostElementInDirection(directionMaps, direction);\n\n      expect(result).toEqual(expected);\n    });\n\n    it(\"should return the top-most element when there are multiple horizontal connections\", () => {\n      const directionMaps = getDirectionMaps([\n        { topElement: ELEMENT1, bottomElement: ELEMENT2 },\n        { topElement: ELEMENT2, bottomElement: ELEMENT3 },\n        { leftElement: ELEMENT2, rightElement: ELEMENT4 },\n        { leftElement: ELEMENT4, rightElement: ELEMENT5 }\n      ]);\n      const direction = NavDirections.UP;\n      const expected = ELEMENT1;\n\n      const result = getOutmostElementInDirection(directionMaps, direction);\n\n      expect(result).toEqual(expected);\n    });\n\n    it(\"should return the bottom-most element when there are multiple horizontal connections\", () => {\n      const directionMaps = getDirectionMaps([\n        { topElement: ELEMENT1, bottomElement: ELEMENT2 },\n        { topElement: ELEMENT2, bottomElement: ELEMENT3 },\n        { leftElement: ELEMENT2, rightElement: ELEMENT4 },\n        { leftElement: ELEMENT4, rightElement: ELEMENT5 }\n      ]);\n      const direction = NavDirections.DOWN;\n      const expected = ELEMENT3;\n\n      const result = getOutmostElementInDirection(directionMaps, direction);\n\n      expect(result).toEqual(expected);\n    });\n\n    it(\"should fallback to the left-most element when asking for the BOTTOM element, and there are no vertical relations\", () => {\n      const directionMaps = getDirectionMaps([\n        { leftElement: ELEMENT2, rightElement: ELEMENT4 },\n        { leftElement: ELEMENT4, rightElement: ELEMENT5 }\n      ]);\n      const direction = NavDirections.DOWN;\n      const expected = ELEMENT2;\n\n      const result = getOutmostElementInDirection(directionMaps, direction);\n\n      expect(result).toEqual(expected);\n    });\n\n    it(\"should fallback to the left-most element when asking for the TOP element, and there are no vertical relations\", () => {\n      const directionMaps = getDirectionMaps([\n        { leftElement: ELEMENT2, rightElement: ELEMENT4 },\n        { leftElement: ELEMENT4, rightElement: ELEMENT5 }\n      ]);\n      const direction = NavDirections.UP;\n      const expected = ELEMENT2;\n\n      const result = getOutmostElementInDirection(directionMaps, direction);\n\n      expect(result).toEqual(expected);\n    });\n\n    it(\"should fallback to the top-most element when asking for the LEFT element, and there are no horizontal relations\", () => {\n      const directionMaps = getDirectionMaps([\n        { topElement: ELEMENT1, bottomElement: ELEMENT2 },\n        { topElement: ELEMENT2, bottomElement: ELEMENT3 }\n      ]);\n      const direction = NavDirections.LEFT;\n      const expected = ELEMENT1;\n\n      const result = getOutmostElementInDirection(directionMaps, direction);\n\n      expect(result).toEqual(expected);\n    });\n\n    it(\"should fallback to the top-most element when asking for the RIGHT element, and there are no horizontal relations\", () => {\n      const directionMaps = getDirectionMaps([\n        { topElement: ELEMENT1, bottomElement: ELEMENT2 },\n        { topElement: ELEMENT2, bottomElement: ELEMENT3 }\n      ]);\n      const direction = NavDirections.RIGHT;\n      const expected = ELEMENT1;\n\n      const result = getOutmostElementInDirection(directionMaps, direction);\n\n      expect(result).toEqual(expected);\n    });\n\n    it(\"should skip the bottom-most element when asking for the bottom element, and the bottom-most element is not mounted\", () => {\n      const directionMaps = getDirectionMaps([\n        { topElement: ELEMENT1, bottomElement: ELEMENT2 },\n        { topElement: ELEMENT2, bottomElement: UNMOUNTED_ELEMENT_1 }\n      ]);\n      const direction = NavDirections.DOWN;\n      const expected = ELEMENT2;\n\n      const result = getOutmostElementInDirection(directionMaps, direction);\n\n      expect(result).toEqual(expected);\n    });\n\n    it(\"should skip the two right-most elements when asking for the right element, and the two right-most elements are not mounted\", () => {\n      const directionMaps = getDirectionMaps([\n        { leftElement: ELEMENT1, rightElement: UNMOUNTED_ELEMENT_2 },\n        { leftElement: UNMOUNTED_ELEMENT_2, rightElement: UNMOUNTED_ELEMENT_1 }\n      ]);\n      const direction = NavDirections.RIGHT;\n      const expected = ELEMENT1;\n\n      const result = getOutmostElementInDirection(directionMaps, direction);\n\n      expect(result).toEqual(expected);\n    });\n  });\n\n  describe(\"getNextElementToFocusInDirection\", () => {\n    it(\"should return null if the referenced element isn't positioned on that direction\", () => {\n      const directionMaps = getDirectionMaps([\n        { leftElement: ELEMENT2, rightElement: ELEMENT4 },\n        { leftElement: ELEMENT4, rightElement: ELEMENT5 }\n      ]);\n      const directionMap = directionMaps[NavDirections.RIGHT];\n\n      const result = getNextElementToFocusInDirection(directionMap, ELEMENT1); // ELEMENT1 isn't mapped\n\n      expect(result).toBeNull();\n    });\n\n    it(\"return null if there's only one next ref, and it is currently null\", () => {\n      const directionMaps = getDirectionMaps([{ leftElement: ELEMENT1, rightElement: UNMOUNTED_ELEMENT_1 }]);\n      const directionMap = directionMaps[NavDirections.RIGHT];\n\n      const result = getNextElementToFocusInDirection(directionMap, ELEMENT1);\n\n      expect(result).toBeNull();\n    });\n\n    it(\"return null if there's only one next ref, and it is disabled\", () => {\n      const directionMaps = getDirectionMaps([{ leftElement: ELEMENT1, rightElement: DISABLED_ELEMENT }]);\n      const directionMap = directionMaps[NavDirections.RIGHT];\n\n      const result = getNextElementToFocusInDirection(directionMap, ELEMENT1);\n\n      expect(result).toBeNull();\n    });\n\n    it(\"return null if there's only one next ref, and it is disabled with data-disabled='true'\", () => {\n      const directionMaps = getDirectionMaps([{ leftElement: ELEMENT1, rightElement: DISABLED_DATASET_ELEMENT }]);\n      const directionMap = directionMaps[NavDirections.RIGHT];\n\n      const result = getNextElementToFocusInDirection(directionMap, ELEMENT1);\n\n      expect(result).toBeNull();\n    });\n\n    it(\"return the next element ref even if it has data-disabled='false'\", () => {\n      const directionMaps = getDirectionMaps([{ leftElement: ELEMENT1, rightElement: DATASET_NOT_DISABLED_ELEMENT }]);\n      const directionMap = directionMaps[NavDirections.RIGHT];\n\n      const result = getNextElementToFocusInDirection(directionMap, ELEMENT1);\n\n      expect(result).toBe(DATASET_NOT_DISABLED_ELEMENT);\n    });\n\n    it(\"return the next element ref in the given direction which is focusable, while skipping disabled or unmounted elements\", () => {\n      const directionMaps = getDirectionMaps([\n        { leftElement: ELEMENT1, rightElement: UNMOUNTED_ELEMENT_1 },\n        { leftElement: UNMOUNTED_ELEMENT_1, rightElement: DISABLED_ELEMENT },\n        { leftElement: DISABLED_ELEMENT, rightElement: ELEMENT2 }\n      ]);\n      const directionMap = directionMaps[NavDirections.RIGHT];\n\n      const result = getNextElementToFocusInDirection(directionMap, ELEMENT1);\n\n      expect(result).toBe(ELEMENT2);\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/GridKeyboardNavigationContext/helper.ts",
    "content": "import { NavDirections } from \"../../hooks/useFullKeyboardListeners\";\nimport {\n  type DirectionMap,\n  type DirectionMaps,\n  type GridElementRef,\n  type Position\n} from \"./GridKeyboardNavigationContextConstants\";\n\nfunction throwIfCausingCircularDependency(directionMaps: DirectionMaps, newPosition: Position) {\n  const { topElement, bottomElement, leftElement, rightElement } = newPosition;\n  if (topElement && bottomElement) {\n    if (directionMaps[NavDirections.UP].get(topElement) === bottomElement) {\n      throwMessage(\"BOTTOM\", \"TOP\");\n    }\n    if (directionMaps[NavDirections.DOWN].get(bottomElement) === topElement) {\n      throwMessage(\"TOP\", \"BOTTOM\");\n    }\n  }\n  if (leftElement && rightElement) {\n    if (directionMaps[NavDirections.LEFT].get(leftElement) === rightElement) {\n      throwMessage(\"RIGHT\", \"LEFT\");\n    }\n    if (directionMaps[NavDirections.RIGHT].get(rightElement) === leftElement) {\n      throwMessage(\"LEFT\", \"RIGHT\");\n    }\n  }\n\n  function throwMessage(directionFrom: string, directionTo: string) {\n    throw new Error(\n      `Circular positioning detected: the ${directionFrom} element is already positioned to the ${directionTo} of the ${directionTo} element. This probably means the layout isn't ordered correctly.`\n    );\n  }\n}\n\nexport const getDirectionMaps = (positions: Position[]) => {\n  const directionMaps: DirectionMaps = {\n    [NavDirections.RIGHT]: new Map(),\n    [NavDirections.LEFT]: new Map(),\n    [NavDirections.UP]: new Map(),\n    [NavDirections.DOWN]: new Map()\n  };\n  positions.forEach(position => {\n    throwIfCausingCircularDependency(directionMaps, position);\n\n    const { topElement, bottomElement, leftElement, rightElement } = position;\n    if (topElement && bottomElement) {\n      directionMaps[NavDirections.UP].set(bottomElement, topElement);\n      directionMaps[NavDirections.DOWN].set(topElement, bottomElement);\n    }\n    if (leftElement && rightElement) {\n      directionMaps[NavDirections.LEFT].set(rightElement, leftElement);\n      directionMaps[NavDirections.RIGHT].set(leftElement, rightElement);\n    }\n  });\n  return directionMaps;\n};\n\nexport const getOppositeDirection = (direction: NavDirections) => {\n  switch (direction) {\n    case NavDirections.LEFT:\n      return NavDirections.RIGHT;\n    case NavDirections.RIGHT:\n      return NavDirections.LEFT;\n    case NavDirections.UP:\n      return NavDirections.DOWN;\n    case NavDirections.DOWN:\n      return NavDirections.UP;\n    default:\n      throw new Error(`Unexpected direction: ${direction}`);\n  }\n};\n\nexport const getOutmostElementInDirection = (\n  directionMaps: DirectionMaps,\n  direction: NavDirections\n): GridElementRef => {\n  const directionMap = directionMaps[direction];\n  const firstEntry = [...directionMap][0]; // start with any element\n  if (!firstEntry) {\n    // no relations were registered for this direction - fallback to a different direction\n    if ([NavDirections.LEFT, NavDirections.RIGHT].includes(direction)) {\n      // there are no registered horizontal relations registered, try vertical relations. Get the top-most element.\n      return getOutmostElementInDirection(directionMaps, NavDirections.UP);\n    }\n    // there are no registered vertical relations registered, try horizontal relations. Get the left-most element.\n    return getOutmostElementInDirection(directionMaps, NavDirections.LEFT);\n  }\n  const firstRef = firstEntry[0];\n  return getLastFocusableElementFromElementInDirection(directionMap, firstRef);\n};\n\nexport const getNextElementToFocusInDirection = (\n  directionMap: DirectionMap,\n  elementRef: GridElementRef\n): null | GridElementRef => {\n  const next = directionMap.get(elementRef);\n  if (!next) {\n    // this is the last element on the direction map - there' nothing next\n    return null;\n  }\n  if (!next.current || next.current.disabled || next.current.dataset?.disabled === \"true\") {\n    // the next element is not mounted or disabled - try the next one\n    return getNextElementToFocusInDirection(directionMap, next);\n  }\n  return next;\n};\n\nfunction getLastFocusableElementFromElementInDirection(directionMap: DirectionMap, initialRef: GridElementRef) {\n  let done = false;\n  let currentRef = initialRef;\n\n  while (!done) {\n    // as long as there's a mounted element which in that direction, take it.\n    const nextEligible = getNextElementToFocusInDirection(directionMap, currentRef);\n    if (!nextEligible) {\n      done = true;\n    } else {\n      currentRef = nextEligible;\n    }\n  }\n\n  return currentRef;\n}\n"
  },
  {
    "path": "packages/core/src/components/GridKeyboardNavigationContext/index.ts",
    "content": "export { useGridKeyboardNavigationContext, GridKeyboardNavigationContext } from \"./GridKeyboardNavigationContext\";\n"
  },
  {
    "path": "packages/core/src/components/HiddenText/HiddenText.module.scss",
    "content": "@import \"../../styles/typography\";\n\n.hiddenTextWrapper {\n  /* clip pattern taken from https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/. */\n  clip: rect(0, 0, 0, 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n"
  },
  {
    "path": "packages/core/src/components/HiddenText/HiddenText.tsx",
    "content": "import cx from \"classnames\";\nimport React, { useRef, forwardRef } from \"react\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./HiddenText.module.scss\";\n\nexport interface HiddenTextProps extends VibeComponentProps {\n  /**\n   * The text content that is hidden but available for assistive technologies.\n   */\n  text: string;\n}\n\nconst HiddenText = forwardRef<HTMLSpanElement, HiddenTextProps>(\n  ({ text, className = \"\", id = \"hiddenText\", \"data-testid\": dataTestId }, ref) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    return (\n      <span\n        ref={mergedRef}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.HIDDEN_TEXT, id)}\n        className={cx(styles.hiddenTextWrapper, className)}\n      >\n        {text}\n      </span>\n    );\n  }\n);\n\nexport default HiddenText;\n"
  },
  {
    "path": "packages/core/src/components/HiddenText/__tests__/HiddenText.test.tsx",
    "content": "import { it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport HiddenText from \"../HiddenText\";\nimport { render } from \"@testing-library/react\";\n\nit(\"renders correctly with empty props\", () => {\n  const tree = renderer.create(<HiddenText text=\"This text is hidden\" />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n\nit(\"Doesn't show the text\", () => {\n  const { getByText } = render(<HiddenText text=\"Example\" />);\n  const element = getByText(\"Example\");\n  expect(element).toHaveClass(\"hiddenTextWrapper\");\n});\n"
  },
  {
    "path": "packages/core/src/components/HiddenText/__tests__/__snapshots__/HiddenText.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`renders correctly with empty props 1`] = `\n<span\n  className=\"hiddenTextWrapper\"\n  data-testid=\"hidden-text_hiddenText\"\n  id=\"hiddenText\"\n>\n  This text is hidden\n</span>\n`;\n"
  },
  {
    "path": "packages/core/src/components/HiddenText/index.ts",
    "content": "export { default as HiddenText, type HiddenTextProps } from \"./HiddenText\";\n"
  },
  {
    "path": "packages/core/src/components/Info/Info.tsx",
    "content": "import React, { forwardRef, useCallback, useRef, useState } from \"react\";\nimport { Info as InfoIcon } from \"@vibe/icons\";\nimport { IconButton } from \"@vibe/icon-button\";\nimport { Dialog, type DialogEvent } from \"@vibe/dialog\";\nimport { InfoDialogContent } from \"./components\";\nimport { type InfoProps } from \"./Info.types\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { useMergeRef } from \"@vibe/shared\";\n\nconst Info = forwardRef(\n  (\n    {\n      id,\n      className,\n      title,\n      body,\n      link,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledby,\n      position = \"bottom-start\",\n      disabled = false,\n      onDialogShow,\n      onDialogHide,\n      hideButtonTooltip,\n      dialogClassName,\n      containerSelector,\n      \"data-testid\": dataTestId\n    }: InfoProps,\n    ref: React.ForwardedRef<HTMLButtonElement>\n  ) => {\n    const iconButtonRef = useRef<HTMLButtonElement>(null);\n    const mergedRef = useMergeRef(ref, iconButtonRef);\n    const dialogContentRef = useRef<HTMLDivElement>(null);\n\n    const [isOpen, setIsOpen] = useState(false);\n\n    const dialogId = id ? `${id}-dialog` : undefined;\n\n    const handleDialogShow = useCallback(() => {\n      setIsOpen(true);\n      onDialogShow?.();\n      requestAnimationFrame(() => {\n        dialogContentRef.current?.focus();\n      });\n    }, [onDialogShow]);\n\n    const handleDialogHide = useCallback(\n      (e: DialogEvent) => {\n        setIsOpen(false);\n        onDialogHide?.();\n        if ((e as React.KeyboardEvent).key === \"Escape\") {\n          iconButtonRef.current?.focus();\n        }\n      },\n      [onDialogHide]\n    );\n\n    return (\n      <Dialog\n        id={dialogId}\n        disable={disabled}\n        position={position}\n        moveBy={{ main: 4, secondary: 0 }}\n        showTrigger={[\"click\"]}\n        hideTrigger={[\"click\", \"clickoutside\", \"esckey\"]}\n        onDialogDidShow={handleDialogShow}\n        onDialogDidHide={handleDialogHide}\n        containerSelector={containerSelector}\n        content={\n          <InfoDialogContent\n            ref={dialogContentRef}\n            id={dialogId}\n            title={title}\n            body={body}\n            link={link}\n            className={dialogClassName}\n          />\n        }\n        hideWhenReferenceHidden\n      >\n        <IconButton\n          ref={mergedRef}\n          id={id}\n          className={className}\n          icon={InfoIcon}\n          size=\"xs\"\n          kind=\"tertiary\"\n          active={isOpen}\n          disabled={disabled}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          aria-controls={dialogId}\n          aria-haspopup=\"dialog\"\n          aria-expanded={isOpen}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.INFO, id)}\n          data-vibe={ComponentVibeId.INFO}\n          hideTooltip={hideButtonTooltip}\n        />\n      </Dialog>\n    );\n  }\n);\n\nexport default Info;\n"
  },
  {
    "path": "packages/core/src/components/Info/Info.types.ts",
    "content": "import { type VibeComponentProps } from \"../../types\";\nimport { type DialogPosition } from \"@vibe/dialog\";\nimport { type InfoLinkProps } from \"./components\";\n\nexport type InfoProps = BaseInfoProps & VibeComponentProps & InfoAriaLabelProps;\n\ninterface BaseInfoProps {\n  /**\n   * The title text displayed at the top of the info dialog.\n   */\n  title?: string;\n  /**\n   * The main body text content displayed in the info dialog.\n   */\n  body: string;\n  /**\n   * Link configuration for the info dialog.\n   */\n  link?: InfoLinkProps;\n  /**\n   * The ID of the element that labels the info button.\n   */\n  \"aria-labelledby\"?: string;\n  /**\n   * The placement of the dialog relative to the info button.\n   */\n  position?: DialogPosition;\n  /**\n   * If true, the info dialog is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Callback fired when the info dialog is shown.\n   */\n  onDialogShow?: () => void;\n  /**\n   * Callback fired when the info dialog is hidden.\n   */\n  onDialogHide?: () => void;\n  /**\n   * Class name applied to the dialog content.\n   */\n  dialogClassName?: string;\n  /**\n   * The CSS selector of the container where the dialog is rendered.\n   */\n  containerSelector?: string;\n}\n\n// Mutually exclusive aria-label props\nexport type InfoAriaLabelProps =\n  | {\n      /**\n       * The ARIA label for the info button.\n       */\n      \"aria-label\": string;\n      /**\n       * If true, the tooltip for the info button is hidden.\n       */\n      hideButtonTooltip?: boolean;\n    }\n  | {\n      \"aria-label\"?: string;\n      hideButtonTooltip?: never;\n    };\n"
  },
  {
    "path": "packages/core/src/components/Info/__tests__/Info.test.tsx",
    "content": "import { vi, describe, it, expect, afterEach } from \"vitest\";\nimport React from \"react\";\nimport { render, screen, cleanup, waitFor } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport Info from \"../Info\";\nimport { type InfoProps } from \"../Info.types\";\n\nconst defaultAriaLabel = \"Show info\";\nconst renderComponent = (props: Partial<InfoProps> = {}) => {\n  return render(<Info aria-label={defaultAriaLabel} {...props} />);\n};\n\ndescribe(\"Info tests\", () => {\n  afterEach(() => {\n    cleanup();\n  });\n\n  describe(\"Rendering\", () => {\n    it(\"should render the info button\", () => {\n      renderComponent();\n      const infoButton = screen.getByLabelText(defaultAriaLabel);\n      expect(infoButton).toBeInTheDocument();\n    });\n  });\n\n  describe(\"Dialog interactions\", () => {\n    it(\"should open dialog when button is clicked\", async () => {\n      const title = \"Test Title\";\n      const body = \"Test body content\";\n      renderComponent({ title, body });\n\n      const infoButton = screen.getByLabelText(defaultAriaLabel);\n\n      // Dialog should not be visible initially\n      expect(screen.queryByText(title)).not.toBeInTheDocument();\n\n      // Click to open dialog\n      await userEvent.click(infoButton);\n\n      // Dialog content should now be visible\n      await waitFor(() => {\n        expect(screen.getByText(title)).toBeInTheDocument();\n        expect(screen.getByText(body)).toBeInTheDocument();\n      });\n    });\n\n    it(\"should close dialog when button is clicked again\", async () => {\n      const title = \"Test Title\";\n      renderComponent({ title });\n\n      const infoButton = screen.getByLabelText(defaultAriaLabel);\n\n      // Open dialog\n      await userEvent.click(infoButton);\n      await waitFor(() => {\n        expect(screen.getByText(title)).toBeInTheDocument();\n      });\n\n      // Close dialog by clicking button again\n      await userEvent.click(infoButton);\n      await waitFor(() => {\n        expect(screen.queryByText(title)).not.toBeInTheDocument();\n      });\n    });\n  });\n\n  describe(\"Accessibility\", () => {\n    it(\"should update aria-expanded when dialog opens\", async () => {\n      const title = \"Test Title\";\n      renderComponent({ title });\n\n      const infoButton = screen.getByLabelText(defaultAriaLabel);\n      expect(infoButton).toHaveAttribute(\"aria-expanded\", \"false\");\n\n      await userEvent.click(infoButton);\n\n      await waitFor(() => {\n        expect(infoButton).toHaveAttribute(\"aria-expanded\", \"true\");\n      });\n    });\n\n    it(\"should use custom aria-label when provided\", () => {\n      const customAriaLabel = \"Custom info label\";\n      renderComponent({ \"aria-label\": customAriaLabel });\n\n      expect(screen.getByLabelText(customAriaLabel)).toBeInTheDocument();\n    });\n\n    it(\"should use aria-labelledby when provided\", () => {\n      const labelId = \"custom-label-id\";\n      renderComponent({ \"aria-labelledby\": labelId });\n\n      const infoButton = screen.getByLabelText(defaultAriaLabel);\n      expect(infoButton).toHaveAttribute(\"aria-labelledby\", labelId);\n    });\n\n    it(\"should generate dialog ID for aria-controls when id is provided\", async () => {\n      const id = \"test-info\";\n      const title = \"Test Title\";\n      renderComponent({ id, title });\n\n      const infoButton = screen.getByLabelText(defaultAriaLabel);\n      expect(infoButton).toHaveAttribute(\"id\", id);\n      expect(infoButton).toHaveAttribute(\"aria-controls\", `${id}-dialog`);\n\n      // Open dialog to verify dialog is rendered\n      await userEvent.click(infoButton);\n      await waitFor(() => {\n        const dialogContent = screen.getByRole(\"dialog\");\n        expect(dialogContent).toHaveAttribute(\"id\", `${id}-dialog`);\n      });\n    });\n\n    it(\"should not have aria-controls when no id provided\", () => {\n      renderComponent();\n\n      const infoButton = screen.getByLabelText(defaultAriaLabel);\n      expect(infoButton).not.toHaveAttribute(\"aria-controls\");\n    });\n  });\n\n  describe(\"Disabled state\", () => {\n    it(\"should not open dialog when disabled\", async () => {\n      const title = \"Test Title\";\n      renderComponent({ title, disabled: true });\n\n      const infoButton = screen.getByLabelText(defaultAriaLabel);\n      await userEvent.click(infoButton);\n\n      expect(screen.queryByText(title)).not.toBeInTheDocument();\n    });\n\n    it(\"should apply disabled attribute to button\", () => {\n      renderComponent({ disabled: true });\n      const infoButton = screen.getByLabelText(defaultAriaLabel);\n      expect(infoButton).toHaveAttribute(\"aria-disabled\", \"true\");\n    });\n  });\n\n  describe(\"Callbacks\", () => {\n    it(\"should call onDialogShow when dialog opens\", async () => {\n      const onDialogShow = vi.fn();\n      const title = \"Test Title\";\n      renderComponent({ title, onDialogShow });\n\n      const infoButton = screen.getByLabelText(defaultAriaLabel);\n      await userEvent.click(infoButton);\n\n      await waitFor(() => {\n        expect(screen.getByText(title)).toBeInTheDocument();\n      });\n\n      expect(onDialogShow).toHaveBeenCalledTimes(1);\n    });\n\n    it(\"should call onDialogHide when dialog closes\", async () => {\n      const onDialogHide = vi.fn();\n      const title = \"Test Title\";\n      renderComponent({ title, onDialogHide });\n\n      const infoButton = screen.getByLabelText(defaultAriaLabel);\n\n      // Open dialog\n      await userEvent.click(infoButton);\n      await waitFor(() => {\n        expect(screen.getByText(title)).toBeInTheDocument();\n      });\n\n      // Close dialog\n      await userEvent.click(infoButton);\n      await waitFor(() => {\n        expect(screen.queryByText(title)).not.toBeInTheDocument();\n      });\n\n      // TODO: fix this assertion\n      // expect(onDialogHide).toHaveBeenCalledTimes(1);\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Info/components/InfoDialogContent/InfoDialogContent.module.scss",
    "content": ".contentWrapper {\n  max-width: 240px;\n\n  .link {\n    margin-top: var(--space-4);\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Info/components/InfoDialogContent/InfoDialogContent.tsx",
    "content": "import React, { forwardRef } from \"react\";\nimport { DialogContentContainer } from \"@vibe/dialog\";\nimport { Text } from \"@vibe/typography\";\nimport { Flex } from \"@vibe/layout\";\nimport InfoLink from \"../InfoLink/InfoLink\";\nimport { type InfoDialogContentProps } from \"./InfoDialogContent.types\";\nimport styles from \"./InfoDialogContent.module.scss\";\n\nconst InfoDialogContent = forwardRef(\n  ({ id, title, body, link, className }: InfoDialogContentProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n    if (!title && !body && !link) {\n      return null;\n    }\n\n    return (\n      <DialogContentContainer id={id} type=\"popover\" size=\"medium\" className={className}>\n        <Flex ref={ref} tabIndex={-1} align=\"start\" direction=\"column\" gap=\"xs\" className={styles.contentWrapper}>\n          {title && (\n            <Text type=\"text2\" weight=\"bold\">\n              {title}\n            </Text>\n          )}\n          {body && (\n            <Text type=\"text2\" element=\"p\">\n              {body}\n            </Text>\n          )}\n          {link && <InfoLink className={styles.link} {...link} />}\n        </Flex>\n      </DialogContentContainer>\n    );\n  }\n);\n\nexport default InfoDialogContent;\n"
  },
  {
    "path": "packages/core/src/components/Info/components/InfoDialogContent/InfoDialogContent.types.ts",
    "content": "import { type VibeComponentProps } from \"../../../../types\";\nimport { type InfoLinkProps } from \"../InfoLink/InfoLink\";\n\nexport interface InfoDialogContentProps extends VibeComponentProps {\n  /**\n   * The title text displayed at the top of the info dialog.\n   */\n  title?: string;\n  /**\n   * The main body text content displayed in the info dialog.\n   */\n  body?: string;\n  /**\n   * Link configuration for the info dialog.\n   */\n  link?: InfoLinkProps;\n}\n"
  },
  {
    "path": "packages/core/src/components/Info/components/InfoDialogContent/__tests__/InfoDialogContent.test.tsx",
    "content": "import { describe, it, expect, afterEach } from \"vitest\";\nimport React from \"react\";\nimport { render, screen, cleanup } from \"@testing-library/react\";\nimport InfoDialogContent from \"../InfoDialogContent\";\nimport { type InfoDialogContentProps } from \"../InfoDialogContent.types\";\n\nconst renderComponent = (props: InfoDialogContentProps) => {\n  return render(<InfoDialogContent {...props} />);\n};\n\ndescribe(\"InfoDialogContent\", () => {\n  afterEach(() => {\n    cleanup();\n  });\n\n  describe(\"Rendering\", () => {\n    it(\"should render title when provided\", () => {\n      const title = \"Test Title\";\n      renderComponent({ title });\n\n      expect(screen.getByText(title)).toBeInTheDocument();\n    });\n\n    it(\"should render body when provided\", () => {\n      const body = \"Test body content\";\n      renderComponent({ body });\n\n      expect(screen.getByText(body)).toBeInTheDocument();\n    });\n\n    it(\"should render link when provided\", () => {\n      const link = {\n        text: \"Learn more\",\n        href: \"https://example.com\"\n      };\n      renderComponent({ link });\n\n      const linkElement = screen.getByText(link.text);\n      expect(linkElement).toBeInTheDocument();\n      expect(linkElement.closest(\"a\")).toHaveAttribute(\"href\", link.href);\n    });\n\n    it(\"should render all content elements together when provided\", () => {\n      const title = \"Test Title\";\n      const body = \"Test body\";\n      const link = { text: \"Learn more\", href: \"https://example.com\" };\n      renderComponent({ title, body, link });\n\n      expect(screen.getByText(title)).toBeInTheDocument();\n      expect(screen.getByText(body)).toBeInTheDocument();\n      expect(screen.getByText(link.text)).toBeInTheDocument();\n    });\n\n    it(\"should return null when no content element is provided\", () => {\n      const { container } = renderComponent({});\n      expect(container.firstChild).toBeNull();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Info/components/InfoLink/InfoLink.module.scss",
    "content": ".infoLink {\n  color: var(--primary-text-color);\n  text-decoration: underline;\n}\n"
  },
  {
    "path": "packages/core/src/components/Info/components/InfoLink/InfoLink.tsx",
    "content": "import React, { forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport { Link, type LinkProps } from \"../../../Link\";\nimport styles from \"./InfoLink.module.scss\";\n\nexport type InfoLinkProps = LinkProps;\n\nconst InfoLink = forwardRef(\n  ({ className, ...linkProps }: InfoLinkProps, ref: React.ForwardedRef<HTMLAnchorElement>) => {\n    return <Link ref={ref} className={cx(styles.infoLink, className)} {...linkProps} />;\n  }\n);\n\nexport default InfoLink;\n"
  },
  {
    "path": "packages/core/src/components/Info/components/InfoLink/__tests__/InfoLink.test.tsx",
    "content": "import { vi, describe, it, expect, afterEach } from \"vitest\";\nimport React from \"react\";\nimport { render, screen, cleanup } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport InfoLink from \"../InfoLink\";\nimport { type InfoLinkProps } from \"../InfoLink\";\n\nconst renderComponent = (props: InfoLinkProps) => {\n  return render(<InfoLink {...props} />);\n};\n\ndescribe(\"InfoLink\", () => {\n  afterEach(() => {\n    cleanup();\n  });\n\n  describe(\"Rendering\", () => {\n    it(\"should render link with text and href\", () => {\n      const text = \"Learn more\";\n      const href = \"https://example.com\";\n      renderComponent({ text, href });\n\n      const linkElement = screen.getByText(text);\n      expect(linkElement).toBeInTheDocument();\n      expect(linkElement.closest(\"a\")).toHaveAttribute(\"href\", href);\n    });\n\n    it(\"should call onClick when clicked\", async () => {\n      const onClick = vi.fn();\n      const text = \"Learn more\";\n      const href = \"https://example.com\";\n      renderComponent({ text, href, onClick });\n\n      const linkElement = screen.getByText(text);\n      await userEvent.click(linkElement);\n\n      expect(onClick).toHaveBeenCalledTimes(1);\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Info/components/index.ts",
    "content": "export { default as InfoLink, type InfoLinkProps } from \"./InfoLink/InfoLink\";\nexport { default as InfoDialogContent } from \"./InfoDialogContent/InfoDialogContent\";\nexport type { InfoDialogContentProps } from \"./InfoDialogContent/InfoDialogContent.types\";\n"
  },
  {
    "path": "packages/core/src/components/Info/index.ts",
    "content": "export { default as Info } from \"./Info\";\nexport type { InfoProps } from \"./Info.types\";\n"
  },
  {
    "path": "packages/core/src/components/InfoText/InfoText.module.scss",
    "content": ".infoText {\n  color: var(--secondary-text-color);\n\n  &.error {\n    color: var(--negative-color);\n  }\n\n  &.success {\n    color: var(--positive-color);\n  }\n\n  &.disabled {\n    color: var(--disabled-text-color);\n  }\n\n  &.readOnly {\n    color: var(--secondary-text-color);\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/InfoText/InfoText.tsx",
    "content": "import React, { forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport { type InfoTextProps } from \"./InfoText.types\";\nimport { Text } from \"@vibe/typography\";\nimport styles from \"./InfoText.module.scss\";\n\nconst InfoText = forwardRef(\n  ({ id, text, error, success, disabled, readOnly }: InfoTextProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n    if (!text) {\n      return null;\n    }\n\n    return (\n      <Text\n        id={id}\n        ref={ref}\n        className={cx(styles.infoText, {\n          [styles.error]: error,\n          [styles.success]: success,\n          [styles.disabled]: disabled,\n          [styles.readOnly]: readOnly\n        })}\n        type=\"text2\"\n      >\n        {text}\n      </Text>\n    );\n  }\n);\n\nexport default InfoText;\n"
  },
  {
    "path": "packages/core/src/components/InfoText/InfoText.types.ts",
    "content": "export interface InfoTextProps {\n  /**\n   * The ID of the associated form element for aria-describedby.\n   */\n  id: string;\n  /**\n   * The text content to display.\n   */\n  text: string;\n  /**\n   * If true, applies error styling to the info text.\n   */\n  error?: boolean;\n  /**\n   * If true, applies success styling to the info text.\n   */\n  success?: boolean;\n  /**\n   * If true, applies disabled styling to the info text.\n   */\n  disabled?: boolean;\n  /**\n   * If true, applies read-only styling to the info text.\n   */\n  readOnly?: boolean;\n}\n"
  },
  {
    "path": "packages/core/src/components/InfoText/__tests__/InfoText.test.tsx",
    "content": "import React from \"react\";\nimport { render, screen } from \"@testing-library/react\";\nimport InfoText from \"../InfoText\";\n\ndescribe(\"InfoText\", () => {\n  const MOCK_ID = \"test-info-text\";\n  const MOCK_TEXT = \"This is info text\";\n\n  it(\"should render text when provided\", () => {\n    render(<InfoText id={MOCK_ID} text={MOCK_TEXT} />);\n    expect(screen.getByText(MOCK_TEXT)).toBeInTheDocument();\n  });\n\n  it(\"should not render when text is empty string\", () => {\n    const { container } = render(<InfoText id={MOCK_ID} text={\"\"} />);\n    expect(container.firstChild).toBeNull();\n  });\n\n  it(\"should not render when text is null\", () => {\n    const { container } = render(<InfoText id={MOCK_ID} text={null} />);\n    expect(container.firstChild).toBeNull();\n  });\n\n  it(\"should apply error styling when error prop is true\", () => {\n    render(<InfoText id={MOCK_ID} text=\"Error message\" error />);\n    const element = screen.getByText(\"Error message\");\n    expect(element).toHaveClass(\"error\");\n  });\n\n  it(\"should apply success styling when success prop is true\", () => {\n    render(<InfoText id={MOCK_ID} text=\"Success message\" success />);\n    const element = screen.getByText(\"Success message\");\n    expect(element).toHaveClass(\"success\");\n  });\n\n  it(\"should apply disabled styling when disabled prop is true\", () => {\n    render(<InfoText id={MOCK_ID} text=\"Disabled message\" disabled />);\n    const element = screen.getByText(\"Disabled message\");\n    expect(element).toHaveClass(\"disabled\");\n  });\n\n  it(\"should apply readOnly styling when readOnly prop is true\", () => {\n    render(<InfoText id={MOCK_ID} text=\"Read only message\" readOnly />);\n    const element = screen.getByText(\"Read only message\");\n    expect(element).toHaveClass(\"readOnly\");\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/InfoText/index.ts",
    "content": "export { default as InfoText } from \"./InfoText\";\nexport type { InfoTextProps } from \"./InfoText.types\";\n"
  },
  {
    "path": "packages/core/src/components/Label/Label.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins/states\";\n@import \"../../styles/typography\";\n@import \"../../styles/keyframes\";\n\n.clickableWrapper {\n  @include clickable;\n\n  &:active {\n    transform: scale(0.95) translate3d(0, 0, 0);\n    transition: var(--motion-productive-short) transform;\n  }\n}\n\n.label {\n  @include smoothing-text;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--border-radius-small);\n  padding: 2px var(--space-8);\n  position: relative;\n\n  &.small {\n    padding: 0 var(--space-4);\n    border-radius: 2px;\n  }\n}\n\n.withLeg {\n  border-start-start-radius: var(--border-radius-small);\n  border-start-end-radius: var(--border-radius-small);\n  border-end-end-radius: var(--border-radius-small);\n  border-end-start-radius: 0;\n}\n\n.legWrapper {\n  position: absolute;\n  height: 8px;\n  top: 100%;\n  inset-inline-start: 0;\n  display: inline-flex;\n}\n\n.kindFill {\n  &.colorPrimary {\n    background-color: var(--primary-color);\n\n    svg path {\n      fill: var(--primary-color);\n    }\n\n    &.clickable:hover,\n    &.clickable:active {\n      background-color: var(--primary-hover-color);\n    }\n  }\n\n  &.colorDark {\n    background-color: var(--inverted-color-background);\n\n    svg path {\n      fill: var(--inverted-color-background);\n    }\n  }\n\n  &.colorNegative {\n    background-color: var(--negative-color);\n\n    svg path {\n      fill: var(--negative-color);\n    }\n\n    &.clickable:hover,\n    &.clickable:active {\n      background-color: var(--negative-color-hover);\n    }\n  }\n\n  &.colorPositive {\n    background-color: var(--positive-color);\n\n    svg path {\n      fill: var(--positive-color);\n    }\n\n    &.clickable:hover,\n    &.clickable:active {\n      background-color: var(--positive-color-hover);\n    }\n  }\n}\n\n.kindLine {\n  border: 1px solid currentColor;\n  padding: 1px var(--space-8);\n\n  .legWrapper {\n    inset-inline-start: -1px;\n    top: calc(100% + 1px);\n  }\n\n  &.colorPrimary {\n    color: var(--primary-color);\n\n    svg path {\n      fill: var(--primary-color);\n    }\n\n    &.clickable:hover,\n    &.clickable:active {\n      background-color: var(--primary-background-hover-color);\n    }\n  }\n\n  &.colorDark {\n    color: var(--inverted-color-background);\n\n    svg path {\n      fill: var(--inverted-color-background);\n    }\n\n    &.clickable:hover,\n    &.clickable:active {\n      background-color: var(--primary-background-hover-color);\n    }\n  }\n\n  &.colorNegative {\n    color: var(--negative-color);\n\n    svg path {\n      fill: var(--negative-color);\n    }\n\n    &.clickable:hover,\n    &.clickable:active {\n      background-color: var(--negative-color-selected);\n    }\n  }\n\n  &.colorPositive {\n    color: var(--positive-color);\n\n    svg path {\n      fill: var(--positive-color);\n    }\n\n    &.clickable:hover,\n    &.clickable:active {\n      background-color: var(--positive-color-selected);\n    }\n  }\n\n  .smallText {\n    line-height: 14px;\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Label/Label.tsx",
    "content": "import { camelCase } from \"es-toolkit\";\nimport cx from \"classnames\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { getStyle, useMergeRef } from \"@vibe/shared\";\nimport React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { Text } from \"@vibe/typography\";\nimport Leg from \"./Leg\";\nimport { type LabelColor, type LabelKind, type ContentColor } from \"./Label.types\";\nimport { contentColors } from \"../../utils/colors-vars-map\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { useClickableProps } from \"@vibe/clickable\";\n\nimport styles from \"./Label.module.scss\";\nimport LabelCelebrationAnimation from \"./LabelCelebrationAnimation\";\nimport { type LabelSizes } from \"./Label.types\";\nimport { mapSizesToTextSize } from \"./LabelConstants\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface LabelProps extends VibeComponentProps {\n  /**\n   * Class name applied to the inner text wrapper.\n   */\n  labelClassName?: string;\n  /**\n   * The visual style of the label.\n   */\n  kind?: LabelKind;\n  /**\n   * The background color of the label.\n   */\n  color?: LabelColor;\n  /**\n   * The text content of the label.\n   */\n  text?: string;\n  /**\n   * If true, includes a leg (decorative extension).\n   */\n  isLegIncluded?: boolean;\n  /**\n   * Callback fired when the label is clicked.\n   */\n  onClick?: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;\n  /**\n   * If true, triggers a celebration animation.\n   */\n  celebrationAnimation?: boolean;\n  /**\n   * The size of the label.\n   */\n  size?: LabelSizes;\n}\n\nconst Label = forwardRef<HTMLElement, LabelProps>(\n  (\n    {\n      className,\n      labelClassName,\n      kind = \"fill\",\n      color = \"primary\",\n      text = \"\",\n      isLegIncluded = false,\n      id,\n      \"data-testid\": dataTestId,\n      onClick,\n      celebrationAnimation,\n      size = \"medium\"\n    }: LabelProps,\n    ref\n  ) => {\n    const labelRef = useRef<HTMLSpanElement>(null);\n    const mergedRef = useMergeRef(ref, labelRef);\n    const [isCelebrationAnimation, setIsCelebrationAnimation] = useState(celebrationAnimation);\n\n    const isClickable = Boolean(onClick);\n\n    const classNames = useMemo(\n      () =>\n        cx(\n          styles.label,\n          getStyle(styles, camelCase(\"kind\" + \"-\" + kind)),\n          getStyle(styles, camelCase(\"color\" + \"-\" + color)),\n          {\n            [styles.withLeg]: isLegIncluded,\n            [styles.clickable]: isClickable,\n            [styles.small]: size === \"small\"\n          },\n          labelClassName\n        ),\n      [kind, color, isLegIncluded, labelClassName, isClickable, size]\n    );\n\n    const backgroundColorStyle = useMemo(() => {\n      if (contentColors.includes(color as ContentColor)) {\n        if (kind === \"line\") {\n          return { color: `var(--color-${color})` };\n        }\n        return { backgroundColor: `var(--color-${color})` };\n      }\n    }, [color, kind]);\n\n    const onClickCallback = useCallback(\n      (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {\n        if (onClick) {\n          event.preventDefault();\n          onClick(event);\n        }\n      },\n      [onClick]\n    );\n\n    const clickableProps = useClickableProps(\n      {\n        onClick: onClickCallback,\n        id,\n        \"aria-hidden\": false,\n        \"aria-haspopup\": false,\n        \"aria-expanded\": false\n      },\n      labelRef\n    );\n\n    useEffect(() => {\n      setIsCelebrationAnimation(celebrationAnimation);\n    }, [celebrationAnimation]);\n\n    const label = useMemo(() => {\n      return (\n        <span\n          {...(isClickable && clickableProps)}\n          className={cx({ [styles.clickableWrapper]: isClickable }, className)}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.LABEL, id)}\n          data-vibe={ComponentVibeId.LABEL}\n          ref={mergedRef}\n        >\n          <Text\n            style={backgroundColorStyle}\n            element=\"span\"\n            type={mapSizesToTextSize[size]}\n            className={classNames}\n            color={color === \"dark\" ? \"onInverted\" : \"onPrimary\"}\n            data-celebration-text={isCelebrationAnimation}\n          >\n            <Text\n              element=\"span\"\n              type={mapSizesToTextSize[size]}\n              color=\"inherit\"\n              className={cx({ [styles.smallText]: size === \"small\" })}\n            >\n              {text}\n            </Text>\n            <span className={cx(styles.legWrapper)}>{isLegIncluded ? <Leg /> : null}</span>\n          </Text>\n        </span>\n      );\n    }, [\n      isClickable,\n      clickableProps,\n      className,\n      dataTestId,\n      id,\n      mergedRef,\n      classNames,\n      isCelebrationAnimation,\n      text,\n      isLegIncluded,\n      size,\n      backgroundColorStyle,\n      color\n    ]);\n\n    // Celebration animation is applied only for line kind\n    if (isCelebrationAnimation && kind === \"line\") {\n      return (\n        <LabelCelebrationAnimation onAnimationEnd={() => setIsCelebrationAnimation(false)}>\n          {label}\n        </LabelCelebrationAnimation>\n      );\n    }\n\n    return label;\n  }\n);\n\nexport default Label;\n"
  },
  {
    "path": "packages/core/src/components/Label/Label.types.ts",
    "content": "import { type contentColors } from \"../../utils/colors-vars-map\";\n\nexport type LabelSizes = \"small\" | \"medium\";\n\nexport type LabelKind = \"fill\" | \"line\";\n\nexport type ContentColor = (typeof contentColors)[number];\nexport type LabelColor = \"primary\" | \"dark\" | \"negative\" | \"positive\" | ContentColor;\n"
  },
  {
    "path": "packages/core/src/components/Label/LabelCelebrationAnimation.module.scss",
    "content": ".celebration {\n  // Fallback perimeter, changes according to the path length\n  --container-perimeter: 840;\n  position: relative;\n\n  .svg {\n    position: absolute;\n    top: 0;\n    inset-inline-start: 0;\n    height: 100%;\n    width: 100%;\n\n    .stroke {\n      fill: none;\n      stroke-width: 1;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n      animation: stroke-rotate cubic-bezier(0.33, 0, 0.67, 1) forwards;\n      stroke-dasharray: var(--container-perimeter);\n      stroke-dashoffset: var(--container-perimeter);\n\n      &.base {\n        stroke: var(--color-egg_yolk);\n        animation: fade 200ms linear forwards;\n        animation-delay: 80ms;\n        stroke-dasharray: 0;\n        stroke-dashoffset: 0;\n        opacity: 0;\n      }\n\n      &.first {\n        stroke: var(--color-done-green);\n        animation-delay: 80ms;\n        animation-duration: 320ms;\n      }\n\n      &.second {\n        stroke: var(--color-stuck-red);\n        animation-delay: 200ms;\n        animation-duration: 320ms;\n      }\n\n      &.third {\n        stroke: var(--primary-color);\n        animation-delay: 360ms;\n        animation-duration: 320ms;\n      }\n    }\n  }\n\n  &.celebration [data-celebration-text] {\n    background-size: 300% 100%;\n    background-repeat: no-repeat;\n    background-clip: text;\n    -webkit-background-clip: text;\n    color: transparent;\n    animation: gradient-text-fill 680ms linear forwards;\n    background-image: linear-gradient(\n      to right,\n      var(--primary-color) 30%,\n      var(--color-stuck-red) 40%,\n      var(--color-done-green) 60%,\n      var(--color-egg_yolk) 85%,\n      transparent 90%\n    );\n  }\n}\n\n@keyframes fade {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes stroke-rotate {\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n\n@keyframes gradient-text-fill {\n  from {\n    background-position: 150% 0;\n  }\n  to {\n    background-position: 0% 0;\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Label/LabelCelebrationAnimation.tsx",
    "content": "import React, { cloneElement, forwardRef, useCallback, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { useResizeObserver } from \"@vibe/hooks\";\nimport styles from \"./LabelCelebrationAnimation.module.scss\";\n\nconst DEFAULT_BORDER_RADIUS = 4;\nconst DEFAULT_STROKE_WIDTH = 1;\n\nexport interface LabelCelebrationAnimationProps {\n  /**\n   * The child component that will be wrapped by the animation.\n   */\n  children: React.ReactElement;\n  /**\n   * Callback fired when the celebration animation ends.\n   */\n  onAnimationEnd: () => void;\n}\n\nfunction LabelCelebrationAnimation({ children, onAnimationEnd }: LabelCelebrationAnimationProps) {\n  const wrapperRef = useRef<HTMLDivElement>();\n  const childRef = useRef<HTMLDivElement>();\n\n  const [path, setPath] = useState<string>();\n\n  const resizeObserverCallback = useCallback(\n    ({ borderBoxSize }: { borderBoxSize: { blockSize: number; inlineSize: number } }) => {\n      const { blockSize: height, inlineSize: width } = borderBoxSize || {};\n\n      if (wrapperRef.current) {\n        const d = getPath({ width, height });\n        setPath(d);\n\n        const perimeter = getPerimeter({ width, height });\n        wrapperRef.current.style.setProperty(\"--container-perimeter\", String(perimeter));\n      }\n    },\n    []\n  );\n\n  useResizeObserver({\n    ref: wrapperRef,\n    callback: resizeObserverCallback,\n    debounceTime: 0\n  });\n\n  const ChildComponentWithRef = forwardRef((_props, ref) =>\n    cloneElement(children, {\n      ref\n    })\n  );\n\n  return (\n    <div className={styles.celebration} ref={wrapperRef}>\n      <svg className={styles.svg}>\n        <path className={cx(styles.stroke, styles.base)} d={path} />\n        <path className={cx(styles.stroke, styles.first)} d={path} />\n        <path className={cx(styles.stroke, styles.second)} d={path} />\n        <path className={cx(styles.stroke, styles.third)} d={path} onAnimationEnd={onAnimationEnd} />\n      </svg>\n      <ChildComponentWithRef ref={childRef} />\n    </div>\n  );\n}\n\nexport default LabelCelebrationAnimation;\n\nfunction getPath({\n  width,\n  height,\n  borderRadius = DEFAULT_BORDER_RADIUS,\n  strokeWidth = DEFAULT_STROKE_WIDTH\n}: {\n  width: number;\n  height: number;\n  borderRadius?: number;\n  strokeWidth?: number;\n}) {\n  const offset = strokeWidth / 2;\n\n  return `M ${width - strokeWidth / 2}, ${borderRadius} V ${\n    height - borderRadius\n  } A ${borderRadius} ${borderRadius} 0 0 1 ${width - borderRadius} ${height - strokeWidth / 2} H ${\n    borderRadius + offset\n  } A ${borderRadius} ${borderRadius} 0 0 1 ${strokeWidth / 2} ${height - borderRadius} V ${\n    borderRadius + offset\n  } A ${borderRadius} ${borderRadius} 0 0 1 ${borderRadius} ${strokeWidth / 2} L ${width - borderRadius}, ${\n    strokeWidth / 2\n  } A ${borderRadius} ${borderRadius} 0 0 1 ${width - strokeWidth / 2} ${borderRadius} Z`;\n}\n\nfunction getPerimeter({\n  width,\n  height,\n  borderRadius = DEFAULT_BORDER_RADIUS\n}: {\n  width: number;\n  height: number;\n  borderRadius?: number;\n}) {\n  const straightWidth = width - 2 * borderRadius;\n  const straightHeight = height - 2 * borderRadius;\n  const cornerCircumference = 2 * Math.PI * borderRadius;\n  return cornerCircumference + 2 * straightWidth + 2 * straightHeight;\n}\n"
  },
  {
    "path": "packages/core/src/components/Label/LabelConstants.ts",
    "content": "import { type TextType } from \"@vibe/typography\";\nimport { type LabelSizes } from \"./Label.types\";\n\nexport const mapSizesToTextSize: Record<LabelSizes, TextType> = {\n  small: \"text3\",\n  medium: \"text2\"\n};\n"
  },
  {
    "path": "packages/core/src/components/Label/Leg.tsx",
    "content": "import React from \"react\";\n\nconst Leg = () => (\n  <svg width=\"8\" height=\"5\" viewBox=\"0 0 8 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M0 0V2.76772C0 4.21783 1.77351 4.92116 2.76736 3.86519L5.45681 1.00765C6.06097 0.365738 6.90294 0.00127805 7.7843 3.35493e-06C5.30942 2.53165e-06 2.69058 1.4328e-06 0 0Z\"\n      fill=\"#E44258\"\n    />\n  </svg>\n);\n\nLeg.displayName = \"Leg\";\n\nexport default Leg;\n"
  },
  {
    "path": "packages/core/src/components/Label/__tests__/Label.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport Label from \"../Label\";\n\ndescribe(\"Label renders correctly\", () => {\n  it(\"with empty props\", () => {\n    const tree = renderer.create(<Label />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  describe(\"fill\", () => {\n    it(\"primary\", () => {\n      const tree = renderer.create(<Label text=\"Test\" kind=\"fill\" color=\"primary\" />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"dark\", () => {\n      const tree = renderer.create(<Label text=\"Test\" kind=\"fill\" color=\"dark\" />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"positive\", () => {\n      const tree = renderer.create(<Label text=\"Test\" kind=\"fill\" color=\"positive\" />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"negative\", () => {\n      const tree = renderer.create(<Label text=\"Test\" kind=\"fill\" color=\"negative\" />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n  });\n\n  describe(\"line\", () => {\n    it(\"primary\", () => {\n      const tree = renderer.create(<Label text=\"Test\" kind=\"line\" color=\"primary\" />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"dark\", () => {\n      const tree = renderer.create(<Label text=\"Test\" kind=\"line\" color=\"dark\" />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"positive\", () => {\n      const tree = renderer.create(<Label text=\"Test\" kind=\"line\" color=\"positive\" />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"negative\", () => {\n      const tree = renderer.create(<Label text=\"Test\" kind=\"line\" color=\"negative\" />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"without animation\", () => {\n      const tree = renderer.create(<Label text=\"Test\" />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"with leg\", () => {\n      const tree = renderer.create(<Label text=\"Test\" isLegIncluded />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"with className\", () => {\n      const tree = renderer.create(<Label className=\"test\" />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Label/__tests__/Label.test.tsx",
    "content": "import { vi, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { render, fireEvent, screen } from \"@testing-library/react\";\nimport Label from \"../Label\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport userEvent from \"@testing-library/user-event\";\n\ndescribe(\"Label\", () => {\n  const defaultTestId = getTestId(ComponentDefaultTestId.LABEL);\n\n  describe(\"Clickable\", () => {\n    it(\"should call onClick callback when label is clicked\", () => {\n      const onClick = vi.fn();\n      render(<Label text=\"Clickable Label\" onClick={onClick} />);\n      fireEvent.click(screen.getByTestId(defaultTestId));\n      expect(onClick).toBeCalled();\n    });\n\n    it(\"should call onClick callback when label is clicked with the enter key\", () => {\n      const onClick = vi.fn();\n      render(<Label text=\"Clickable Label\" onClick={onClick} />);\n      screen.getByTestId(defaultTestId).focus();\n      userEvent.type(screen.getByTestId(defaultTestId), \"{enter}\");\n      expect(onClick).toBeCalled();\n    });\n\n    it(\"should call onClick callback when label is clicked with the space key\", () => {\n      const onClick = vi.fn();\n      render(<Label text=\"Clickable Label\" onClick={onClick} />);\n      screen.getByTestId(defaultTestId).focus();\n      userEvent.type(screen.getByTestId(defaultTestId), \"{space}\");\n      expect(onClick).toBeCalled();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Label/__tests__/__snapshots__/Label.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`Label renders correctly > fill > dark 1`] = `\n<span\n  className=\"\"\n  data-testid=\"label\"\n  data-vibe=\"Label\"\n>\n  <span\n    className=\"typography onInverted start singleLineEllipsis text text2Normal label kindFill colorDark\"\n    data-testid=\"text\"\n  >\n    <span\n      className=\"typography inherit start singleLineEllipsis text text2Normal\"\n      data-testid=\"text\"\n    >\n      Test\n    </span>\n    <span\n      className=\"legWrapper\"\n    />\n  </span>\n</span>\n`;\n\nexports[`Label renders correctly > fill > negative 1`] = `\n<span\n  className=\"\"\n  data-testid=\"label\"\n  data-vibe=\"Label\"\n>\n  <span\n    className=\"typography onPrimary start singleLineEllipsis text text2Normal label kindFill colorNegative\"\n    data-testid=\"text\"\n  >\n    <span\n      className=\"typography inherit start singleLineEllipsis text text2Normal\"\n      data-testid=\"text\"\n    >\n      Test\n    </span>\n    <span\n      className=\"legWrapper\"\n    />\n  </span>\n</span>\n`;\n\nexports[`Label renders correctly > fill > positive 1`] = `\n<span\n  className=\"\"\n  data-testid=\"label\"\n  data-vibe=\"Label\"\n>\n  <span\n    className=\"typography onPrimary start singleLineEllipsis text text2Normal label kindFill colorPositive\"\n    data-testid=\"text\"\n  >\n    <span\n      className=\"typography inherit start singleLineEllipsis text text2Normal\"\n      data-testid=\"text\"\n    >\n      Test\n    </span>\n    <span\n      className=\"legWrapper\"\n    />\n  </span>\n</span>\n`;\n\nexports[`Label renders correctly > fill > primary 1`] = `\n<span\n  className=\"\"\n  data-testid=\"label\"\n  data-vibe=\"Label\"\n>\n  <span\n    className=\"typography onPrimary start singleLineEllipsis text text2Normal label kindFill colorPrimary\"\n    data-testid=\"text\"\n  >\n    <span\n      className=\"typography inherit start singleLineEllipsis text text2Normal\"\n      data-testid=\"text\"\n    >\n      Test\n    </span>\n    <span\n      className=\"legWrapper\"\n    />\n  </span>\n</span>\n`;\n\nexports[`Label renders correctly > line > dark 1`] = `\n<span\n  className=\"\"\n  data-testid=\"label\"\n  data-vibe=\"Label\"\n>\n  <span\n    className=\"typography onInverted start singleLineEllipsis text text2Normal label kindLine colorDark\"\n    data-testid=\"text\"\n  >\n    <span\n      className=\"typography inherit start singleLineEllipsis text text2Normal\"\n      data-testid=\"text\"\n    >\n      Test\n    </span>\n    <span\n      className=\"legWrapper\"\n    />\n  </span>\n</span>\n`;\n\nexports[`Label renders correctly > line > negative 1`] = `\n<span\n  className=\"\"\n  data-testid=\"label\"\n  data-vibe=\"Label\"\n>\n  <span\n    className=\"typography onPrimary start singleLineEllipsis text text2Normal label kindLine colorNegative\"\n    data-testid=\"text\"\n  >\n    <span\n      className=\"typography inherit start singleLineEllipsis text text2Normal\"\n      data-testid=\"text\"\n    >\n      Test\n    </span>\n    <span\n      className=\"legWrapper\"\n    />\n  </span>\n</span>\n`;\n\nexports[`Label renders correctly > line > positive 1`] = `\n<span\n  className=\"\"\n  data-testid=\"label\"\n  data-vibe=\"Label\"\n>\n  <span\n    className=\"typography onPrimary start singleLineEllipsis text text2Normal label kindLine colorPositive\"\n    data-testid=\"text\"\n  >\n    <span\n      className=\"typography inherit start singleLineEllipsis text text2Normal\"\n      data-testid=\"text\"\n    >\n      Test\n    </span>\n    <span\n      className=\"legWrapper\"\n    />\n  </span>\n</span>\n`;\n\nexports[`Label renders correctly > line > primary 1`] = `\n<span\n  className=\"\"\n  data-testid=\"label\"\n  data-vibe=\"Label\"\n>\n  <span\n    className=\"typography onPrimary start singleLineEllipsis text text2Normal label kindLine colorPrimary\"\n    data-testid=\"text\"\n  >\n    <span\n      className=\"typography inherit start singleLineEllipsis text text2Normal\"\n      data-testid=\"text\"\n    >\n      Test\n    </span>\n    <span\n      className=\"legWrapper\"\n    />\n  </span>\n</span>\n`;\n\nexports[`Label renders correctly > line > with className 1`] = `\n<span\n  className=\"test\"\n  data-testid=\"label\"\n  data-vibe=\"Label\"\n>\n  <span\n    className=\"typography onPrimary start singleLineEllipsis text text2Normal label kindFill colorPrimary\"\n    data-testid=\"text\"\n  >\n    <span\n      className=\"typography inherit start singleLineEllipsis text text2Normal\"\n      data-testid=\"text\"\n    >\n      \n    </span>\n    <span\n      className=\"legWrapper\"\n    />\n  </span>\n</span>\n`;\n\nexports[`Label renders correctly > line > with leg 1`] = `\n<span\n  className=\"\"\n  data-testid=\"label\"\n  data-vibe=\"Label\"\n>\n  <span\n    className=\"typography onPrimary start singleLineEllipsis text text2Normal label kindFill colorPrimary withLeg\"\n    data-testid=\"text\"\n  >\n    <span\n      className=\"typography inherit start singleLineEllipsis text text2Normal\"\n      data-testid=\"text\"\n    >\n      Test\n    </span>\n    <span\n      className=\"legWrapper\"\n    >\n      <svg\n        fill=\"none\"\n        height=\"5\"\n        viewBox=\"0 0 8 5\"\n        width=\"8\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M0 0V2.76772C0 4.21783 1.77351 4.92116 2.76736 3.86519L5.45681 1.00765C6.06097 0.365738 6.90294 0.00127805 7.7843 3.35493e-06C5.30942 2.53165e-06 2.69058 1.4328e-06 0 0Z\"\n          fill=\"#E44258\"\n        />\n      </svg>\n    </span>\n  </span>\n</span>\n`;\n\nexports[`Label renders correctly > line > without animation 1`] = `\n<span\n  className=\"\"\n  data-testid=\"label\"\n  data-vibe=\"Label\"\n>\n  <span\n    className=\"typography onPrimary start singleLineEllipsis text text2Normal label kindFill colorPrimary\"\n    data-testid=\"text\"\n  >\n    <span\n      className=\"typography inherit start singleLineEllipsis text text2Normal\"\n      data-testid=\"text\"\n    >\n      Test\n    </span>\n    <span\n      className=\"legWrapper\"\n    />\n  </span>\n</span>\n`;\n\nexports[`Label renders correctly > with empty props 1`] = `\n<span\n  className=\"\"\n  data-testid=\"label\"\n  data-vibe=\"Label\"\n>\n  <span\n    className=\"typography onPrimary start singleLineEllipsis text text2Normal label kindFill colorPrimary\"\n    data-testid=\"text\"\n  >\n    <span\n      className=\"typography inherit start singleLineEllipsis text text2Normal\"\n      data-testid=\"text\"\n    >\n      \n    </span>\n    <span\n      className=\"legWrapper\"\n    />\n  </span>\n</span>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Label/index.ts",
    "content": "export { default as Label, type LabelProps } from \"./Label\";\n\nexport * from \"./Label.types\";\n"
  },
  {
    "path": "packages/core/src/components/Link/Link.module.scss",
    "content": "@import \"../../styles/typography\";\n@import \"~@vibe/style/dist/mixins\";\n\n.link {\n  display: flex;\n  align-items: center;\n  color: var(--link-color);\n  @include vibe-text(text2, normal);\n  @include smoothing-text;\n  text-decoration: none;\n  writing-mode: horizontal-tb;\n  @include focus-style();\n\n  &.colorOnPrimary {\n    color: var(--text-color-on-primary);\n  }\n\n  &.colorOnInverted {\n    color: var(--text-color-on-inverted);\n  }\n}\n\n.link:hover .text {\n  text-decoration: underline;\n  color: inherit;\n}\n\n.link.inlineText {\n  display: inline-flex;\n  align-items: unset;\n}\n\n.link.inheritFontSize {\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.iconStart {\n  line-height: 24px;\n  margin-inline-end: var(--space-4);\n}\n\n.iconEnd {\n  line-height: 24px;\n  margin-inline-start: var(--space-4);\n}\n"
  },
  {
    "path": "packages/core/src/components/Link/Link.tsx",
    "content": "import { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { forwardRef, useCallback } from \"react\";\nimport { NOOP, getStyle } from \"@vibe/shared\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { type LinkColor, type LinkIconPosition, type LinkTarget } from \"./Link.types\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./Link.module.scss\";\n\nimport { camelCase } from \"es-toolkit\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface LinkProps extends VibeComponentProps {\n  /**\n   * Class name applied to the link text.\n   */\n  textClassName?: string;\n  /**\n   * The URL the link points to.\n   */\n  href?: string;\n  /**\n   * The text content of the link.\n   */\n  text?: string;\n  /**\n   * Specifies the relationship between the current document and the linked resource.\n   */\n  rel?: string;\n  /**\n   * Callback fired when the link is clicked.\n   */\n  onClick?: (event: React.MouseEvent) => void;\n  /**\n   * Specifies where to open the linked document.\n   */\n  target?: LinkTarget;\n  /**\n   * The ARIA label for accessibility.\n   */\n  \"aria-label\"?: string;\n  /**\n   * The ID of the element that describes this link.\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * The ID of the element labeling this link.\n   */\n  \"aria-labelledby\"?: string;\n  /**\n   * Icon displayed next to the link text.\n   */\n  icon?: SubIcon;\n  /**\n   * The position of the icon relative to the text.\n   */\n  iconPosition?: LinkIconPosition;\n  /**\n   * If true, disables navigation when the link is clicked.\n   */\n  disableNavigation?: boolean;\n  /**\n   * If true, the link inherits the surrounding text's font size.\n   */\n  inheritFontSize?: boolean;\n  /**\n   * If true, the link is styled to fit within inline text content.\n   */\n  inlineText?: boolean;\n  /** The link's color style */\n  color?: LinkColor;\n  /**\n   * Inline style object applied to the link element.\n   */\n  style?: React.CSSProperties;\n}\n\nconst Link = forwardRef(\n  (\n    {\n      className,\n      textClassName,\n      href = \"\",\n      text = \"\",\n      rel = \"noreferrer\",\n      onClick = NOOP,\n      target = \"_blank\",\n      \"aria-label\": ariaLabel = \"\",\n      color = \"primary\",\n      \"aria-describedby\": ariaDescribedby = \"\",\n      icon = \"\",\n      iconPosition = \"start\",\n      id = \"\",\n      \"aria-labelledby\": ariaLabelledBy = \"\",\n      disableNavigation = false,\n      inheritFontSize = false,\n      inlineText = false,\n      style,\n      \"data-testid\": dataTestId\n    }: LinkProps,\n    ref: React.ForwardedRef<HTMLAnchorElement>\n  ) => {\n    const isStart = iconPosition === \"start\";\n\n    const onClickWrapper = useCallback(\n      (e: React.MouseEvent<HTMLElement>) => {\n        if (disableNavigation) {\n          e.preventDefault();\n        }\n        onClick && onClick(e);\n      },\n      [disableNavigation, onClick]\n    );\n\n    return (\n      <a\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.LINK, id)}\n        data-vibe={ComponentVibeId.LINK}\n        id={id}\n        href={href}\n        rel={rel}\n        ref={ref}\n        onClick={onClickWrapper}\n        target={target}\n        style={style}\n        className={cx(styles.link, className, getStyle(styles, camelCase(\"color-\" + color)), {\n          [styles.inheritFontSize]: inheritFontSize,\n          [styles.inlineText]: inlineText\n        })}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedby}\n        aria-labelledby={ariaLabelledBy}\n      >\n        {getIcon(isStart, icon, cx(styles.iconStart))}\n        <span className={cx(styles.text, textClassName)}>{text}</span>\n        {getIcon(!isStart, icon, cx(styles.iconEnd))}\n      </a>\n    );\n  }\n);\n\nfunction getIcon(shouldShow: boolean, icon: string | React.FunctionComponent | null, className: string) {\n  if (!shouldShow) return;\n  return <Icon className={className} icon={icon} type=\"font\" />;\n}\n\nexport default Link;\n"
  },
  {
    "path": "packages/core/src/components/Link/Link.types.ts",
    "content": "export type LinkTarget = \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n\nexport type LinkIconPosition = \"start\" | \"end\";\n\nexport type LinkColor = \"primary\" | \"onPrimary\" | \"onInverted\";\n"
  },
  {
    "path": "packages/core/src/components/Link/LinkConsts.ts",
    "content": "/**\n * @deprecated\n */\nexport enum LinkTarget {\n  NEW_WINDOW = \"_blank\",\n  SELF = \"_self\",\n  PARENT = \"_parent\",\n  TOP = \"_top\"\n}\n\n/**\n * @deprecated\n */\nexport enum IconPosition {\n  START = \"start\",\n  END = \"end\"\n}\n"
  },
  {
    "path": "packages/core/src/components/Link/__tests__/Link.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport Link from \"../Link\";\n\ndescribe(\"Link renders correctly\", () => {\n  it(\"with icon\", () => {\n    const tree = renderer.create(<Link icon=\"fa fa-star\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with right icon\", () => {\n    const tree = renderer.create(<Link icon=\"fa fa-star\" iconPosition=\"end\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with id\", () => {\n    const tree = renderer.create(<Link id=\"TestId\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with className\", () => {\n    const tree = renderer.create(<Link className=\"testClassName\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with text\", () => {\n    const tree = renderer.create(<Link text=\"Link\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with aria-labelledby\", () => {\n    const tree = renderer.create(<Link aria-labelledby=\"aria label link\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with aria-describedby\", () => {\n    const tree = renderer.create(<Link aria-describedby=\"aria described by\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with aria-label\", () => {\n    const tree = renderer.create(<Link aria-label=\"arialabel link\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Link/__tests__/Link.test.tsx",
    "content": "import { vi, beforeEach, describe, it, expect, type Mock } from \"vitest\";\nimport React from \"react\";\nimport { fireEvent, render, screen } from \"@testing-library/react\";\nimport Link from \"../Link\";\n\ndescribe(\"Link\", () => {\n  const ariaLabel = \"Read more about the interesting article\";\n  const text = \"Read More\";\n  const href = \"https://www.monday.com\";\n\n  let onClickMock: Mock;\n\n  beforeEach(() => {\n    onClickMock = vi.fn();\n    render(<Link text={text} onClick={onClickMock} href={href} aria-label={ariaLabel} />);\n  });\n\n  describe(\"default props\", () => {\n    it(\"should open link in a new window\", () => {\n      const element = screen.getByText(text).closest(\"a\");\n      expect(element.target).toBe(\"_blank\");\n    });\n\n    it(\"should open link to have noreferrer attribute\", () => {\n      const element = screen.getByText(text).closest(\"a\");\n      expect(element.rel).toBe(\"noreferrer\");\n    });\n  });\n\n  it(\"should call onClick\", () => {\n    const element = screen.getByText(text).closest(\"a\");\n    fireEvent.click(element);\n    expect(onClickMock.mock.calls.length).toBe(1);\n  });\n\n  it(\"should have the correct href\", () => {\n    const element = screen.getByText(text).closest(\"a\");\n    expect(element.href).toBe(`${href}/`);\n  });\n\n  it(\"should have the correct target\", () => {\n    const { getByText } = render(<Link href=\"#\" text=\"test text\" target=\"_self\" />);\n    const element = getByText(\"test text\").closest(\"a\");\n    expect(element.target).toBe(\"_self\");\n  });\n\n  it(\"should apply aria label correctly\", () => {\n    const element = screen.getByLabelText(ariaLabel);\n    expect(element).toBeTruthy();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Link/__tests__/__snapshots__/Link.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`Link renders correctly > with aria-describedby 1`] = `\n<a\n  aria-describedby=\"aria described by\"\n  aria-label=\"\"\n  aria-labelledby=\"\"\n  className=\"link colorPrimary\"\n  data-testid=\"link\"\n  data-vibe=\"Link\"\n  href=\"\"\n  id=\"\"\n  onClick={[Function]}\n  rel=\"noreferrer\"\n  target=\"_blank\"\n>\n  <span\n    className=\"text\"\n  >\n    \n  </span>\n</a>\n`;\n\nexports[`Link renders correctly > with aria-label 1`] = `\n<a\n  aria-describedby=\"\"\n  aria-label=\"arialabel link\"\n  aria-labelledby=\"\"\n  className=\"link colorPrimary\"\n  data-testid=\"link\"\n  data-vibe=\"Link\"\n  href=\"\"\n  id=\"\"\n  onClick={[Function]}\n  rel=\"noreferrer\"\n  target=\"_blank\"\n>\n  <span\n    className=\"text\"\n  >\n    \n  </span>\n</a>\n`;\n\nexports[`Link renders correctly > with aria-labelledby 1`] = `\n<a\n  aria-describedby=\"\"\n  aria-label=\"\"\n  aria-labelledby=\"aria label link\"\n  className=\"link colorPrimary\"\n  data-testid=\"link\"\n  data-vibe=\"Link\"\n  href=\"\"\n  id=\"\"\n  onClick={[Function]}\n  rel=\"noreferrer\"\n  target=\"_blank\"\n>\n  <span\n    className=\"text\"\n  >\n    \n  </span>\n</a>\n`;\n\nexports[`Link renders correctly > with className 1`] = `\n<a\n  aria-describedby=\"\"\n  aria-label=\"\"\n  aria-labelledby=\"\"\n  className=\"link testClassName colorPrimary\"\n  data-testid=\"link\"\n  data-vibe=\"Link\"\n  href=\"\"\n  id=\"\"\n  onClick={[Function]}\n  rel=\"noreferrer\"\n  target=\"_blank\"\n>\n  <span\n    className=\"text\"\n  >\n    \n  </span>\n</a>\n`;\n\nexports[`Link renders correctly > with icon 1`] = `\n<a\n  aria-describedby=\"\"\n  aria-label=\"\"\n  aria-labelledby=\"\"\n  className=\"link colorPrimary\"\n  data-testid=\"link\"\n  data-vibe=\"Link\"\n  href=\"\"\n  id=\"\"\n  onClick={[Function]}\n  rel=\"noreferrer\"\n  target=\"_blank\"\n>\n  <span\n    aria-hidden={true}\n    className=\"icon iconStart fa fa fa-star\"\n    data-testid=\"icon\"\n    data-vibe=\"Icon\"\n    onClick={[Function]}\n    role=\"img\"\n  />\n  <span\n    className=\"text\"\n  >\n    \n  </span>\n</a>\n`;\n\nexports[`Link renders correctly > with id 1`] = `\n<a\n  aria-describedby=\"\"\n  aria-label=\"\"\n  aria-labelledby=\"\"\n  className=\"link colorPrimary\"\n  data-testid=\"link_TestId\"\n  data-vibe=\"Link\"\n  href=\"\"\n  id=\"TestId\"\n  onClick={[Function]}\n  rel=\"noreferrer\"\n  target=\"_blank\"\n>\n  <span\n    className=\"text\"\n  >\n    \n  </span>\n</a>\n`;\n\nexports[`Link renders correctly > with right icon 1`] = `\n<a\n  aria-describedby=\"\"\n  aria-label=\"\"\n  aria-labelledby=\"\"\n  className=\"link colorPrimary\"\n  data-testid=\"link\"\n  data-vibe=\"Link\"\n  href=\"\"\n  id=\"\"\n  onClick={[Function]}\n  rel=\"noreferrer\"\n  target=\"_blank\"\n>\n  <span\n    className=\"text\"\n  >\n    \n  </span>\n  <span\n    aria-hidden={true}\n    className=\"icon iconEnd fa fa fa-star\"\n    data-testid=\"icon\"\n    data-vibe=\"Icon\"\n    onClick={[Function]}\n    role=\"img\"\n  />\n</a>\n`;\n\nexports[`Link renders correctly > with text 1`] = `\n<a\n  aria-describedby=\"\"\n  aria-label=\"\"\n  aria-labelledby=\"\"\n  className=\"link colorPrimary\"\n  data-testid=\"link\"\n  data-vibe=\"Link\"\n  href=\"\"\n  id=\"\"\n  onClick={[Function]}\n  rel=\"noreferrer\"\n  target=\"_blank\"\n>\n  <span\n    className=\"text\"\n  >\n    Link\n  </span>\n</a>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Link/index.ts",
    "content": "export { default as Link, type LinkProps } from \"./Link\";\n\nexport * from \"./Link.types\";\n"
  },
  {
    "path": "packages/core/src/components/List/List.module.scss",
    "content": "@import \"../../styles/states\";\n@import \"../../styles/typography\";\n\n.list {\n  margin: 0;\n  padding: 0;\n  overflow: auto;\n  @include scroller();\n  @include smoothing-text;\n}\n"
  },
  {
    "path": "packages/core/src/components/List/List.tsx",
    "content": "import cx from \"classnames\";\nimport React, {\n  type AriaAttributes,\n  type AriaRole,\n  type CSSProperties,\n  forwardRef,\n  type ReactElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from \"react\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport useKeyEvent from \"../../hooks/useKeyEvent\";\nimport { VirtualizedListItems } from \"./VirtualizedListItems/VirtualizedListItems\";\nimport { keyCodes, UP_DOWN_ARROWS } from \"../../constants/keyCodes\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { type ListItemProps } from \"../ListItem/ListItem\";\nimport { type ListTitleProps } from \"../ListTitle/ListTitle\";\nimport { type ListElement } from \"./List.types\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { ListContext } from \"./utils/ListContext\";\nimport {\n  getListItemComponentType,\n  getListItemIdByIndex,\n  getListItemIndexById,\n  getNextListItemIndex,\n  getPrevListItemIndex,\n  isListItem,\n  useListId\n} from \"./utils/ListUtils\";\nimport styles from \"./List.module.scss\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface ListProps extends VibeComponentProps {\n  /**\n   * The wrapping component for the list.\n   */\n  component?: ListElement;\n  /**\n   * The ARIA label describing the list.\n   */\n  \"aria-label\"?: string;\n  /**\n   * The ID of an element that describes the list.\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * The ID of an element controlled by the list.\n   */\n  \"aria-controls\"?: AriaAttributes[\"aria-controls\"];\n  /**\n   * The child elements inside the list.\n   */\n  children?: ReactElement<ListItemProps | ListTitleProps> | ReactElement<ListItemProps | ListTitleProps>[];\n  /**\n   * If true, uses a virtualized list to render only visible items for performance optimization.\n   */\n  renderOnlyVisibleItems?: boolean;\n  /**\n   * Custom inline styles applied to the list.\n   */\n  style?: CSSProperties;\n  /**\n   * The ARIA role of the list.\n   */\n  role?: AriaRole;\n}\n\nconst List = forwardRef(\n  (\n    {\n      className,\n      id,\n      component = \"ul\",\n      children,\n      \"aria-label\": ariaLabel,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-controls\": ariaControls,\n      renderOnlyVisibleItems = false,\n      style,\n      role = \"listbox\",\n      \"data-testid\": dataTestId\n    }: ListProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n    const childrenRefs: React.MutableRefObject<HTMLElement[]> = useRef([]);\n\n    const overrideId = useListId(id);\n    const [focusIndex, setFocusIndex] = useState(0);\n    const Component = component;\n\n    const updateFocusedItem = useCallback((id: string) => {\n      setFocusIndex(getListItemIndexById(childrenRefs, id));\n      componentRef?.current?.setAttribute(\"aria-activedescendant\", id);\n    }, []);\n\n    const onUpDownArrows = useCallback(\n      (event: KeyboardEvent) => {\n        if (renderOnlyVisibleItems) {\n          return;\n        }\n        event.preventDefault();\n\n        const isUpKey = event.key === keyCodes.UP_ARROW;\n        const isDownKey = event.key === keyCodes.DOWN_ARROW;\n        let overrideFocusIndex = undefined;\n\n        if (isDownKey && focusIndex + 1 < childrenRefs.current.length) {\n          overrideFocusIndex = getNextListItemIndex(focusIndex, childrenRefs);\n        } else if (isUpKey && focusIndex > 0) {\n          overrideFocusIndex = getPrevListItemIndex(focusIndex, childrenRefs);\n        }\n        if (overrideFocusIndex !== undefined) {\n          updateFocusedItem(getListItemIdByIndex(childrenRefs, overrideFocusIndex));\n          childrenRefs.current[overrideFocusIndex].focus();\n        }\n      },\n      [focusIndex, renderOnlyVisibleItems, updateFocusedItem]\n    );\n\n    useKeyEvent({\n      keys: UP_DOWN_ARROWS,\n      callback: onUpDownArrows,\n      ref: componentRef\n    });\n\n    useEffect(() => {\n      const selectedItemIndex = childrenRefs.current.findIndex(\n        child => child instanceof HTMLElement && isListItem(child) && child?.getAttribute(\"aria-selected\") === \"true\"\n      );\n      if (selectedItemIndex !== -1) {\n        updateFocusedItem(getListItemIdByIndex(childrenRefs, selectedItemIndex));\n      } else {\n        const firstFocusableIndex = childrenRefs.current.findIndex(child => isListItem(child));\n        if (firstFocusableIndex !== -1) {\n          updateFocusedItem(getListItemIdByIndex(childrenRefs, firstFocusableIndex));\n        }\n      }\n    }, [updateFocusedItem]);\n\n    const overrideChildren = useMemo(() => {\n      let override: ReactElement | ReactElement[] = Array.isArray(children) ? children : [children];\n      if (renderOnlyVisibleItems) {\n        override = <VirtualizedListItems>{override}</VirtualizedListItems>;\n      } else {\n        childrenRefs.current = childrenRefs.current.slice(0, override.length);\n        override = React.Children.map(override, (child, index) => {\n          if (!React.isValidElement(child)) {\n            return child;\n          }\n          const id = (child.props as ListItemProps).id || `${overrideId}-item-${index}`;\n          const currentRef = childrenRefs.current[index];\n          const isFocusableItem = currentRef === undefined || currentRef === null || isListItem(currentRef);\n          return React.cloneElement(child, {\n            // @ts-ignore not sure how to deal with ref here\n            ref: ref => (childrenRefs.current[index] = ref),\n            tabIndex: focusIndex === index && isFocusableItem ? 0 : -1,\n            id,\n            component: getListItemComponentType(component),\n            role: (child.props as ListItemProps).role\n          });\n        });\n      }\n\n      return override;\n    }, [children, component, focusIndex, overrideId, renderOnlyVisibleItems]);\n\n    return (\n      <ListContext.Provider value={{ updateFocusedItem }}>\n        <Component\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.LIST, id)}\n          data-vibe={ComponentVibeId.LIST}\n          ref={mergedRef}\n          style={style}\n          className={cx(styles.list, className)}\n          id={overrideId}\n          aria-label={ariaLabel}\n          aria-describedby={ariaDescribedBy}\n          aria-controls={ariaControls}\n          tabIndex={-1}\n          role={role}\n        >\n          {overrideChildren}\n        </Component>\n      </ListContext.Provider>\n    );\n  }\n);\n\nexport default List;\n"
  },
  {
    "path": "packages/core/src/components/List/List.types.ts",
    "content": "export type ListElement = \"div\" | \"nav\" | \"ul\" | \"ol\";\n"
  },
  {
    "path": "packages/core/src/components/List/VirtualizedListItems/VirtualizedListItems.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n.scrollableContainer {\n  margin: 0;\n  padding: 0;\n  overflow: auto;\n  @include scroller();\n}\n"
  },
  {
    "path": "packages/core/src/components/List/VirtualizedListItems/VirtualizedListItems.tsx",
    "content": "import React, { type CSSProperties, type ReactElement, useCallback, useMemo } from \"react\";\nimport cx from \"classnames\";\nimport ListItem, { type ListItemProps } from \"../../../components/ListItem/ListItem\";\nimport ListTitle, { type ListTitleProps } from \"../../ListTitle/ListTitle\";\nimport VirtualizedList from \"../../../components/VirtualizedList/VirtualizedList\";\nimport type VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport { type ListItemIconProps } from \"../../ListItemIcon/ListItemIcon\";\nimport styles from \"./VirtualizedListItems.module.scss\";\n\nconst ITEM_CHILDREN_TYPES = {\n  TITLE: \"title\",\n  ITEM: \"item\"\n};\n\nconst LIST_TITLE_HEIGHT = 48;\nconst LIST_ITEM_HEIGHT = 32;\n\nexport interface VirtualizedListItemsProps extends VibeComponentProps {\n  /**\n   * The list of children.\n   */\n  children?: React.ReactElement<ListItemProps | ListTitleProps> | React.ReactElement<ListItemProps | ListTitleProps>[];\n}\n\nexport const VirtualizedListItems: React.FC<VirtualizedListItemsProps> = ({ children }) => {\n  const items = useMemo(() => {\n    const childrenArr = Array.isArray(children) ? children : [children];\n    return childrenArr\n      .map((child, index) => {\n        // @ts-ignore displayName is coming from Component assigned field: ListTitle, ListItem\n        const childTypeDisplayName = child.type.displayName;\n        if (childTypeDisplayName === ListTitle.displayName) {\n          return {\n            type: ITEM_CHILDREN_TYPES.TITLE,\n            id: `list-title-${index}`,\n            props: child.props,\n            // avoid add spacing to the first category on the list\n            height: LIST_TITLE_HEIGHT\n          };\n        } else if (childTypeDisplayName === ListItem.displayName) {\n          const { id } = child.props;\n          return {\n            type: ITEM_CHILDREN_TYPES.ITEM,\n            id: id || `list-item-${index}`,\n            props: child.props,\n            height: LIST_ITEM_HEIGHT\n          };\n        } else {\n          return undefined;\n        }\n      })\n      .filter(item => item !== undefined);\n  }, [children]);\n\n  const itemRenderer = useCallback(\n    (item: ReactElement<ListItemProps | ListItemIconProps | ListTitleProps>, index: number, style: CSSProperties) => {\n      const { type, props } = item;\n      let element;\n      switch (type) {\n        case ITEM_CHILDREN_TYPES.TITLE: {\n          element = <ListTitle {...(props as ListTitleProps)} />;\n          break;\n        }\n        case ITEM_CHILDREN_TYPES.ITEM: {\n          element = <ListItem {...(props as ListItemProps)} />;\n          break;\n        }\n      }\n\n      return <div style={style}>{element}</div>;\n    },\n    []\n  );\n\n  return (\n    // @ts-ignore TODO TS-migration fix when VirtualizedList is converted to TS\n    <VirtualizedList scrollableClassName={cx(styles.scrollableContainer)} items={items} itemRenderer={itemRenderer} />\n  );\n};\n"
  },
  {
    "path": "packages/core/src/components/List/__tests__/List.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport { render } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport List from \"../List\";\nimport ListItem from \"../../ListItem/ListItem\";\n\ndescribe(\"List\", () => {\n  it(\"renders correctly without props\", () => {\n    const tree = renderer.create(<List />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with empty props\", () => {\n    const tree = renderer.create(<List>Something</List>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with list items\", () => {\n    const tree = renderer\n      .create(\n        <List>\n          <ListItem>1</ListItem>\n          <ListItem>2</ListItem>\n        </List>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  describe(\"accessibility tests\", () => {\n    it(\"List should have role listbox\", () => {\n      const { getByRole } = render(\n        <List>\n          <ListItem>1</ListItem>\n          <ListItem>2</ListItem>\n        </List>\n      );\n      expect(getByRole(\"listbox\")).toBeInTheDocument();\n    });\n\n    it(\"ListItem should have role option\", () => {\n      const { getAllByRole } = render(\n        <List>\n          <ListItem>1</ListItem>\n          <ListItem>2</ListItem>\n        </List>\n      );\n      expect(getAllByRole(\"option\")).toHaveLength(2);\n    });\n\n    it(\"disabled ListItem should have aria-selected\", () => {\n      const { getByTestId } = render(\n        <List>\n          <ListItem data-testid=\"list-item-1\" disabled>\n            1\n          </ListItem>\n          <ListItem data-testid=\"list-item-2\">1</ListItem>\n        </List>\n      );\n      expect(getByTestId(\"list-item-1\")).toHaveAttribute(\"aria-disabled\", \"true\");\n      expect(getByTestId(\"list-item-2\")).toHaveAttribute(\"aria-disabled\", \"false\");\n    });\n\n    it(\"selected ListItem should have aria-selected\", () => {\n      const { getByTestId } = render(\n        <List>\n          <ListItem data-testid=\"list-item-1\" selected>\n            1\n          </ListItem>\n          <ListItem data-testid=\"list-item-2\">1</ListItem>\n        </List>\n      );\n      expect(getByTestId(\"list-item-1\")).toHaveAttribute(\"aria-selected\", \"true\");\n      expect(getByTestId(\"list-item-2\")).not.toHaveAttribute(\"aria-selected\");\n    });\n\n    it(\"List should have aria-activedescendant\", () => {\n      const { getByRole } = render(\n        <List>\n          <ListItem id=\"list-item-1\">1</ListItem>\n          <ListItem id=\"list-item-2\" selected>\n            2\n          </ListItem>\n        </List>\n      );\n      expect(getByRole(\"listbox\")).toHaveAttribute(\"aria-activedescendant\", \"list-item-2\");\n    });\n\n    it(\"List aria-activedescendant\", () => {\n      const { getByRole } = render(\n        <List id=\"list\">\n          <ListItem>1</ListItem>\n          <ListItem>2</ListItem>\n          <ListItem selected>3</ListItem>\n        </List>\n      );\n      const list = getByRole(\"listbox\");\n      expect(list).toHaveAttribute(\"aria-activedescendant\", \"list-item-2\");\n      userEvent.tab();\n      userEvent.keyboard(\"{arrowup}\");\n      expect(list).toHaveAttribute(\"aria-activedescendant\", \"list-item-1\");\n    });\n  });\n\n  describe(\"custom roles\", () => {\n    it(\"List render with a custom role\", () => {\n      const { getByRole, getAllByRole } = render(\n        <List role=\"list\">\n          <ListItem role=\"listitem\">1</ListItem>\n          <ListItem role=\"listitem\">2</ListItem>\n        </List>\n      );\n      expect(getByRole(\"list\")).toBeInTheDocument();\n      expect(getAllByRole(\"listitem\")).toHaveLength(2);\n    });\n\n    it(\"selected ListItem should have aria-selected with custom roles\", () => {\n      const { getByTestId } = render(\n        <List role=\"list\">\n          <ListItem data-testid=\"list-item-1\" role=\"listitem\" selected>\n            1\n          </ListItem>\n          <ListItem data-testid=\"list-item-2\" role=\"listitem\">\n            2\n          </ListItem>\n        </List>\n      );\n      expect(getByTestId(\"list-item-1\")).toHaveAttribute(\"aria-selected\", \"true\");\n      expect(getByTestId(\"list-item-2\")).not.toHaveAttribute(\"aria-selected\");\n    });\n\n    it(\"List should have aria-activedescendant with custom roles\", () => {\n      const { getByRole } = render(\n        <List role=\"list\">\n          <ListItem id=\"list-item-1\" role=\"listitem\">\n            1\n          </ListItem>\n          <ListItem id=\"list-item-2\" role=\"listitem\" selected>\n            2\n          </ListItem>\n        </List>\n      );\n      expect(getByRole(\"list\")).toHaveAttribute(\"aria-activedescendant\", \"list-item-2\");\n    });\n\n    it(\"List aria-activedescendant with custom roles\", () => {\n      const { getByRole } = render(\n        <List id=\"list\" role=\"list\">\n          <ListItem role=\"listitem\">1</ListItem>\n          <ListItem role=\"listitem\">2</ListItem>\n          <ListItem role=\"listitem\" selected>\n            3\n          </ListItem>\n        </List>\n      );\n      const list = getByRole(\"list\");\n      expect(list).toHaveAttribute(\"aria-activedescendant\", \"list-item-2\");\n      userEvent.tab();\n      userEvent.keyboard(\"{arrowup}\");\n      expect(list).toHaveAttribute(\"aria-activedescendant\", \"list-item-1\");\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/List/__tests__/__snapshots__/List.test.jsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`List > renders correctly with empty props 1`] = `\n<ul\n  className=\"list\"\n  data-testid=\"list\"\n  data-vibe=\"List\"\n  id=\"list-1\"\n  role=\"listbox\"\n  tabIndex={-1}\n>\n  Something\n</ul>\n`;\n\nexports[`List > renders correctly with list items 1`] = `\n<ul\n  className=\"list\"\n  data-testid=\"list\"\n  data-vibe=\"List\"\n  id=\"list-2\"\n  role=\"listbox\"\n  tabIndex={-1}\n>\n  <li\n    aria-disabled={false}\n    className=\"typography primary start singleLineEllipsis text text2Normal listItem small\"\n    data-testid=\"list-2-item-0\"\n    id=\"list-2-item-0\"\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseEnter={[Function]}\n    role=\"option\"\n    tabIndex={0}\n  >\n    1\n  </li>\n  <li\n    aria-disabled={false}\n    className=\"typography primary start singleLineEllipsis text text2Normal listItem small\"\n    data-testid=\"list-2-item-1\"\n    id=\"list-2-item-1\"\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseEnter={[Function]}\n    role=\"option\"\n    tabIndex={-1}\n  >\n    2\n  </li>\n</ul>\n`;\n\nexports[`List > renders correctly without props 1`] = `\n<ul\n  className=\"list\"\n  data-testid=\"list\"\n  data-vibe=\"List\"\n  id=\"list-0\"\n  role=\"listbox\"\n  tabIndex={-1}\n/>\n`;\n"
  },
  {
    "path": "packages/core/src/components/List/__tests__/__snapshots__/List.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`List > renders correctly with empty props 1`] = `\n<ul\n  className=\"list\"\n  data-testid=\"list\"\n  data-vibe=\"List\"\n  id=\"list-1\"\n  role=\"listbox\"\n  tabIndex={-1}\n>\n  Something\n</ul>\n`;\n\nexports[`List > renders correctly with list items 1`] = `\n<ul\n  className=\"list\"\n  data-testid=\"list\"\n  data-vibe=\"List\"\n  id=\"list-2\"\n  role=\"listbox\"\n  tabIndex={-1}\n>\n  <li\n    aria-disabled={false}\n    className=\"typography primary start singleLineEllipsis text text2Normal listItem small\"\n    data-testid=\"list-2-item-0\"\n    id=\"list-2-item-0\"\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseEnter={[Function]}\n    role=\"option\"\n    tabIndex={0}\n  >\n    1\n  </li>\n  <li\n    aria-disabled={false}\n    className=\"typography primary start singleLineEllipsis text text2Normal listItem small\"\n    data-testid=\"list-2-item-1\"\n    id=\"list-2-item-1\"\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseEnter={[Function]}\n    role=\"option\"\n    tabIndex={-1}\n  >\n    2\n  </li>\n</ul>\n`;\n\nexports[`List > renders correctly without props 1`] = `\n<ul\n  className=\"list\"\n  data-testid=\"list\"\n  data-vibe=\"List\"\n  id=\"list-0\"\n  role=\"listbox\"\n  tabIndex={-1}\n/>\n`;\n"
  },
  {
    "path": "packages/core/src/components/List/index.ts",
    "content": "export { default as List, type ListProps } from \"./List\";\n\nexport * from \"./List.types\";\n"
  },
  {
    "path": "packages/core/src/components/List/utils/ListContext.ts",
    "content": "import React from \"react\";\nimport { NOOP } from \"@vibe/shared\";\n\ntype ListContextType = {\n  /**\n   * A callback function which is being called when the item is being focused by keyboard navigation\n   * @param ListItem id\n   */\n  updateFocusedItem: (id: string) => void;\n};\n\nexport const ListContext = React.createContext<ListContextType>({ updateFocusedItem: NOOP });\n"
  },
  {
    "path": "packages/core/src/components/List/utils/ListUtils.ts",
    "content": "import { type MutableRefObject, useState } from \"react\";\nimport { type ListItemElement } from \"../../ListItem/ListItem.types\";\nimport { type ListElement } from \"../List.types\";\nimport { useIsomorphicLayoutEffect } from \"@vibe/shared\";\n\nlet listIdCounter = 0;\nexport const generateListId = () => {\n  return `list-${listIdCounter++}`;\n};\n\nconst VALID_ROLES = [\"option\", \"listitem\", \"menuitem\", \"tab\", \"treeitem\"];\n\nexport const useListId = (id: string) => {\n  const [listId, setListId] = useState<string>();\n  useIsomorphicLayoutEffect(() => {\n    setListId(id || generateListId());\n  }, [id]);\n  return listId;\n};\n\nexport const getListItemIdByIndex = (childrenRefs: MutableRefObject<HTMLElement[]>, index: number): string => {\n  return childrenRefs.current[index]?.id;\n};\n\nexport const getListItemIndexById = (childrenRefs: MutableRefObject<HTMLElement[]>, id: string): number => {\n  return childrenRefs.current.findIndex(child => child?.id === id);\n};\n\nexport const getListItemComponentType = (listComponent: ListElement): ListItemElement => {\n  switch (listComponent) {\n    case \"ul\":\n    case \"ol\":\n      return \"li\";\n    case \"nav\":\n      return \"a\";\n    default:\n      return \"div\";\n  }\n};\n\nexport const isListItem = (element: HTMLElement) => {\n  return element && element instanceof HTMLElement && VALID_ROLES.includes(element.getAttribute(\"role\"));\n};\n\nexport const getNextListItemIndex = (currentIndex: number, childrenRefs: MutableRefObject<HTMLElement[]>) => {\n  while (currentIndex < childrenRefs.current.length - 1) {\n    const child = childrenRefs.current[++currentIndex];\n    if (isListItem(child)) {\n      return currentIndex;\n    }\n  }\n  return undefined;\n};\n\nexport const getPrevListItemIndex = (currentIndex: number, childrenRefs: MutableRefObject<HTMLElement[]>) => {\n  while (currentIndex > 0) {\n    const child = childrenRefs.current[--currentIndex];\n    if (isListItem(child)) {\n      return currentIndex;\n    }\n  }\n  return undefined;\n};\n"
  },
  {
    "path": "packages/core/src/components/ListItem/ListItem.module.scss",
    "content": "@import \"../../styles/states\";\n@import \"../../styles/typography\";\n\n.listItem {\n  display: flex;\n  align-items: center;\n  padding: 8px 16px;\n  border-radius: 4px;\n  cursor: pointer;\n  @include focus-style-inset();\n}\n\n.listItem:hover {\n  background-color: var(--primary-background-hover-color);\n}\n\n.disabled {\n  cursor: not-allowed;\n}\n\n.disabled:hover {\n  background-color: transparent;\n}\n\n.selected {\n  background-color: var(--primary-selected-color);\n}\n\n.selected:hover {\n  background-color: var(--primary-selected-color);\n}\n\n.small {\n  height: 32px;\n}\n\n.medium {\n  height: 40px;\n}\n\n.large {\n  height: 48px;\n}\n"
  },
  {
    "path": "packages/core/src/components/ListItem/ListItem.tsx",
    "content": "import cx from \"classnames\";\nimport React, {\n  type AriaAttributes,\n  type AriaRole,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef\n} from \"react\";\nimport { camelCase } from \"es-toolkit\";\nimport { getStyle, NOOP, useMergeRef } from \"@vibe/shared\";\nimport { Text } from \"@vibe/typography\";\nimport { SIZES, SELECTION_KEYS } from \"../../constants\";\n\nimport { type VibeComponentProps, type ElementContent } from \"../../types\";\nimport { useKeyEvent } from \"../../hooks\";\n\nimport { ListContext } from \"../List/utils/ListContext\";\nimport { type ListItemElement, type ListItemSize } from \"./ListItem.types\";\nimport { type TooltipProps } from \"@vibe/tooltip\";\nimport styles from \"./ListItem.module.scss\";\n\nexport interface ListItemProps extends VibeComponentProps {\n  /**\n   * The HTML element used for the list item.\n   */\n  component?: ListItemElement;\n  /**\n   * The textual content inside the list item.\n   */\n  children?: ElementContent;\n  /**\n   * Callback fired when the item is clicked.\n   */\n  onClick?: (event: React.MouseEvent | React.KeyboardEvent, id: string) => void;\n  /**\n   * Callback fired when the item is hovered.\n   */\n  onHover?: (event: React.MouseEvent | React.FocusEvent, id: string) => void;\n  /**\n   * If true, disables the item and prevents interactions.\n   */\n  disabled?: boolean;\n  /**\n   * If true, marks the item as selected.\n   */\n  selected?: boolean;\n  /**\n   * The size of the list item.\n   */\n  size?: ListItemSize;\n  /**\n   * The tab index of the list item for keyboard navigation.\n   */\n  tabIndex?: number;\n  /**\n   * Indicates the current state of the item in a set of items.\n   */\n  \"aria-current\"?: AriaAttributes[\"aria-current\"];\n  /**\n   * The ARIA role of the list item.\n   */\n  role?: AriaRole;\n  /**\n   * Props passed to the tooltip displayed when hovering over the text.\n   */\n  tooltipProps?: Partial<TooltipProps>;\n}\n\nconst ListItem = forwardRef(\n  (\n    {\n      className,\n      id,\n      component = \"div\",\n      onClick = NOOP,\n      onHover = NOOP,\n      selected,\n      disabled = false,\n      size = SIZES.SMALL,\n      tabIndex = 0,\n      children,\n      \"aria-current\": ariaCurrent,\n      \"data-testid\": dataTestId,\n      role = \"option\",\n      tooltipProps\n    }: ListItemProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const { updateFocusedItem } = useContext(ListContext);\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    useEffect(() => {\n      if (selected) {\n        updateFocusedItem?.(id);\n      }\n    }, [selected, id, updateFocusedItem]);\n\n    const componentOnClick = useCallback(\n      (event: React.MouseEvent | React.KeyboardEvent) => {\n        if (disabled) return;\n        onClick(event, id);\n      },\n      [disabled, onClick, id]\n    );\n\n    const onKeyboardSelect = useCallback((event: React.KeyboardEvent) => componentOnClick(event), [componentOnClick]);\n\n    useKeyEvent({\n      keys: SELECTION_KEYS,\n      ref: componentRef,\n      callback: onKeyboardSelect\n    });\n\n    const componentOnHover = useCallback(\n      (event: React.MouseEvent | React.FocusEvent) => {\n        if (disabled) return;\n        onHover(event, id);\n      },\n      [disabled, onHover, id]\n    );\n\n    return (\n      <Text\n        element={component}\n        data-testid={dataTestId || id}\n        ref={mergedRef}\n        className={cx(styles.listItem, className, getStyle(styles, camelCase(size)), {\n          [styles.selected]: selected && !disabled,\n          [styles.disabled]: disabled\n        })}\n        id={id}\n        type=\"text2\"\n        aria-disabled={disabled}\n        aria-selected={selected}\n        onClick={componentOnClick}\n        onMouseEnter={componentOnHover}\n        onFocus={componentOnHover}\n        role={role}\n        tabIndex={tabIndex}\n        aria-current={ariaCurrent}\n        tooltipProps={tooltipProps}\n      >\n        {children}\n      </Text>\n    );\n  }\n);\n\nObject.assign(ListItem, {\n  // Used by VirtualizedListItems\n  displayName: \"ListItem\"\n});\n\nexport default ListItem;\n"
  },
  {
    "path": "packages/core/src/components/ListItem/ListItem.types.ts",
    "content": "import { type SIZES } from \"../../constants\";\n\nexport type ListItemElement = \"div\" | \"li\" | \"a\";\n\nexport type ListItemSize = (typeof SIZES)[keyof typeof SIZES];\n"
  },
  {
    "path": "packages/core/src/components/ListItem/__tests__/ListItem.test.tsx",
    "content": "import { vi, beforeEach, describe, it, expect, type Mock } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport { fireEvent, render } from \"@testing-library/react\";\nimport ListItem from \"../ListItem\";\n\nit(\"renders correctly with empty props\", () => {\n  const tree = renderer.create(<ListItem data-testid=\"list-item\" />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n\nit(\"renders correctly with selected\", () => {\n  const tree = renderer.create(<ListItem data-testid=\"list-item\" selected />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n\nit(\"renders correctly with disabled\", () => {\n  const tree = renderer.create(<ListItem data-testid=\"list-item\" disabled />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n\nit(\"renders correctly with size\", () => {\n  const tree = renderer.create(<ListItem data-testid=\"list-item\" size=\"large\" />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n\nit(\"renders correctly with selected and disabled\", () => {\n  const tree = renderer.create(<ListItem data-testid=\"list-item\" selected disabled />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n\ndescribe(\"BDD List Item\", () => {\n  let onClick: Mock;\n  const itemText = \"My item\";\n  beforeEach(() => {\n    onClick = vi.fn();\n  });\n  it(\"should call onClick\", () => {\n    const { getByText } = render(\n      <ListItem data-testid=\"list-item\" onClick={onClick}>\n        {itemText}\n      </ListItem>\n    );\n    const element = getByText(itemText);\n    fireEvent.click(element);\n    expect(onClick.mock.calls.length).toBe(1);\n  });\n\n  it(\"should call on key down (Enter)\", () => {\n    const { getByText } = render(\n      <ListItem data-testid=\"list-item\" onClick={onClick}>\n        {itemText}\n      </ListItem>\n    );\n    const element = getByText(itemText);\n    fireEvent.keyDown(element, { key: \"Enter\", code: \"Enter\", charCode: \"13\" });\n    expect(onClick.mock.calls.length).toBe(1);\n  });\n\n  it(\"should call on key down (Space)\", () => {\n    const { getByText } = render(\n      <ListItem data-testid=\"list-item\" onClick={onClick}>\n        {itemText}\n      </ListItem>\n    );\n    const element = getByText(itemText);\n    fireEvent.keyDown(element, { key: \" \", code: \"Space\", charCode: \"32\" });\n    expect(onClick.mock.calls.length).toBe(1);\n  });\n\n  it(\"should not call onClick if disabled\", () => {\n    const { getByText } = render(\n      <ListItem data-testid=\"list-item\" disabled onClick={onClick}>\n        {itemText}\n      </ListItem>\n    );\n    const element = getByText(itemText);\n    fireEvent.click(element);\n    expect(onClick.mock.calls.length).toBe(0);\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/ListItem/__tests__/__snapshots__/ListItem.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`renders correctly with disabled 1`] = `\n<div\n  aria-disabled={true}\n  className=\"typography primary start singleLineEllipsis text text2Normal listItem small disabled\"\n  data-testid=\"list-item\"\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseEnter={[Function]}\n  role=\"option\"\n  tabIndex={0}\n/>\n`;\n\nexports[`renders correctly with empty props 1`] = `\n<div\n  aria-disabled={false}\n  className=\"typography primary start singleLineEllipsis text text2Normal listItem small\"\n  data-testid=\"list-item\"\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseEnter={[Function]}\n  role=\"option\"\n  tabIndex={0}\n/>\n`;\n\nexports[`renders correctly with selected 1`] = `\n<div\n  aria-disabled={false}\n  aria-selected={true}\n  className=\"typography primary start singleLineEllipsis text text2Normal listItem small selected\"\n  data-testid=\"list-item\"\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseEnter={[Function]}\n  role=\"option\"\n  tabIndex={0}\n/>\n`;\n\nexports[`renders correctly with selected and disabled 1`] = `\n<div\n  aria-disabled={true}\n  aria-selected={true}\n  className=\"typography primary start singleLineEllipsis text text2Normal listItem small disabled\"\n  data-testid=\"list-item\"\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseEnter={[Function]}\n  role=\"option\"\n  tabIndex={0}\n/>\n`;\n\nexports[`renders correctly with size 1`] = `\n<div\n  aria-disabled={false}\n  className=\"typography primary start singleLineEllipsis text text2Normal listItem large\"\n  data-testid=\"list-item\"\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseEnter={[Function]}\n  role=\"option\"\n  tabIndex={0}\n/>\n`;\n"
  },
  {
    "path": "packages/core/src/components/ListItem/index.ts",
    "content": "export { default as ListItem, type ListItemProps } from \"./ListItem\";\n\nexport * from \"./ListItem.types\";\n"
  },
  {
    "path": "packages/core/src/components/ListItemAvatar/ListItemAvatar.module.scss",
    "content": "@import \"../../styles/typography\";\n\n.listItemAvatar {\n  display: flex;\n  align-items: center;\n  color: var(--primary-text-color);\n}\n\n.avatar {\n  width: 22px;\n  height: 22px;\n  margin-inline-end: var(--space-8);\n}\n"
  },
  {
    "path": "packages/core/src/components/ListItemAvatar/ListItemAvatar.tsx",
    "content": "import React, { forwardRef, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport { type VibeComponentProps } from \"../../types\";\nimport Avatar from \"../Avatar/Avatar\";\nimport { type ListItemElement } from \"../ListItem\";\nimport styles from \"./ListItemAvatar.module.scss\";\n\nexport interface ListItemAvatarProps extends VibeComponentProps {\n  /**\n   * The HTML element used for the list item avatar.\n   */\n  component?: ListItemElement;\n  /**\n   * The source URL of the avatar image.\n   */\n  src?: string;\n  /**\n   * Class name applied to the avatar.\n   */\n  avatarClassName?: string;\n}\n\nconst ListItemAvatar = forwardRef(\n  (\n    { className, id, src, avatarClassName, component: Component = \"div\" }: ListItemAvatarProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    return (\n      <Component ref={mergedRef} className={cx(styles.listItemAvatar, className)} id={id} aria-hidden=\"true\">\n        <Avatar src={src} type=\"img\" size=\"small\" className={cx(styles.avatar, avatarClassName)} />\n      </Component>\n    );\n  }\n);\n\nexport default ListItemAvatar;\n"
  },
  {
    "path": "packages/core/src/components/ListItemAvatar/__tests__/ListItemAvatar.test.tsx",
    "content": "import { it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport ListItemAvatar from \"../ListItemAvatar\";\n\nit(\"renders correctly with empty props\", () => {\n  const tree = renderer.create(<ListItemAvatar />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n\nit(\"renders correctly with picture\", () => {\n  const tree = renderer.create(<ListItemAvatar src={\"image-url.jpg\"} />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "packages/core/src/components/ListItemAvatar/__tests__/__snapshots__/ListItemAvatar.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`renders correctly with empty props 1`] = `\n<div\n  aria-hidden=\"true\"\n  className=\"listItemAvatar\"\n>\n  <div\n    className=\"avatar small avatar\"\n    data-testid=\"avatar\"\n    data-vibe=\"Avatar\"\n    style={{}}\n  >\n    <div\n      aria-hidden={false}\n      className=\"circle circleImg\"\n      style={\n        {\n          \"backgroundColor\": \"var(--color-chili-blue)\",\n        }\n      }\n      tabIndex={-1}\n    >\n      <img\n        className=\"contentImg contentImgSmall\"\n        data-testid=\"avatar-content\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`renders correctly with picture 1`] = `\n<div\n  aria-hidden=\"true\"\n  className=\"listItemAvatar\"\n>\n  <div\n    className=\"avatar small avatar\"\n    data-testid=\"avatar\"\n    data-vibe=\"Avatar\"\n    style={{}}\n  >\n    <div\n      aria-hidden={false}\n      className=\"circle circleImg\"\n      style={{}}\n      tabIndex={-1}\n    >\n      <img\n        className=\"contentImg contentImgSmall\"\n        data-testid=\"avatar-content\"\n        src=\"image-url.jpg\"\n      />\n    </div>\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/ListItemAvatar/index.ts",
    "content": "export { default as ListItemAvatar, type ListItemAvatarProps } from \"./ListItemAvatar\";\n"
  },
  {
    "path": "packages/core/src/components/ListItemIcon/ListItemIcon.module.scss",
    "content": "@import \"../../styles/typography\";\n\n.listItemIcon {\n  display: flex;\n  align-items: center;\n  color: var(--primary-text-color);\n}\n\n.start {\n  margin-inline-end: var(--space-8);\n}\n\n.end {\n  margin-inline-start: var(--space-8);\n}\n"
  },
  {
    "path": "packages/core/src/components/ListItemIcon/ListItemIcon.tsx",
    "content": "import cx from \"classnames\";\nimport React, { forwardRef, useRef } from \"react\";\nimport { useMergeRef, getStyle } from \"@vibe/shared\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { type ListItemElement } from \"../ListItem\";\nimport { type VibeComponentProps } from \"../../types\";\n\nimport styles from \"./ListItemIcon.module.scss\";\nimport { type ListItemIconMargin } from \"./ListItemIcon.types\";\n\nexport const LIST_ITEM_ICON_SIZE = 18;\n\nexport interface ListItemIconProps extends VibeComponentProps {\n  /**\n   * The HTML element used for the list item icon.\n   */\n  component?: ListItemElement;\n  /**\n   * The icon displayed inside the list item.\n   */\n  icon?: SubIcon;\n  /**\n   * The position of the icon inside the list item, determining its margins.\n   */\n  margin?: ListItemIconMargin;\n}\n\nconst ListItemIcon = forwardRef(\n  (\n    { className, id, icon, margin = \"start\", component: Component = \"div\" }: ListItemIconProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    return (\n      <Component\n        ref={mergedRef}\n        className={cx(styles.listItemIcon, getStyle(styles, margin), className)}\n        id={id}\n        aria-hidden=\"true\"\n      >\n        <Icon icon={icon} ignoreFocusStyle size={LIST_ITEM_ICON_SIZE} />\n      </Component>\n    );\n  }\n);\n\nexport default ListItemIcon;\n"
  },
  {
    "path": "packages/core/src/components/ListItemIcon/ListItemIcon.types.ts",
    "content": "export type ListItemIconMargin = \"start\" | \"end\";\n"
  },
  {
    "path": "packages/core/src/components/ListItemIcon/__tests__/ListItemIcon.test.tsx",
    "content": "import { it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport ListItemIcon from \"../ListItemIcon\";\nimport { Sun } from \"@vibe/icons\";\n\nit(\"renders correctly with empty props\", () => {\n  const tree = renderer.create(<ListItemIcon />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n\nit(\"renders correctly with icon\", () => {\n  const tree = renderer.create(<ListItemIcon icon={Sun} />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "packages/core/src/components/ListItemIcon/__tests__/__snapshots__/ListItemIcon.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`renders correctly with empty props 1`] = `\n<div\n  aria-hidden=\"true\"\n  className=\"listItemIcon start\"\n/>\n`;\n\nexports[`renders correctly with icon 1`] = `\n<div\n  aria-hidden=\"true\"\n  className=\"listItemIcon start\"\n>\n  <svg\n    aria-hidden={true}\n    className=\"icon noFocusStyle\"\n    data-testid=\"icon\"\n    data-vibe=\"Icon\"\n    fill=\"currentColor\"\n    height=\"18\"\n    viewBox=\"0 0 20 20\"\n    width=\"18\"\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M10 2.25C10.4142 2.25 10.75 2.58579 10.75 3V5C10.75 5.41421 10.4142 5.75 10 5.75C9.58579 5.75 9.25 5.41421 9.25 5V3C9.25 2.58579 9.58579 2.25 10 2.25ZM7.34835 7.34835C8.05161 6.64509 9.00544 6.25 10 6.25C10.9946 6.25 11.9484 6.64509 12.6517 7.34835C13.3549 8.05161 13.75 9.00544 13.75 10C13.75 10.9946 13.3549 11.9484 12.6517 12.6517C11.9484 13.3549 10.9946 13.75 10 13.75C9.00544 13.75 8.05161 13.3549 7.34835 12.6517C6.64509 11.9484 6.25 10.9946 6.25 10C6.25 9.00544 6.64509 8.05161 7.34835 7.34835ZM10 7.75C9.40326 7.75 8.83097 7.98705 8.40901 8.40901C7.98705 8.83097 7.75 9.40326 7.75 10C7.75 10.5967 7.98705 11.169 8.40901 11.591C8.83097 12.0129 9.40326 12.25 10 12.25C10.5967 12.25 11.169 12.0129 11.591 11.591C12.0129 11.169 12.25 10.5967 12.25 10C12.25 9.40326 12.0129 8.83097 11.591 8.40901C11.169 7.98705 10.5967 7.75 10 7.75ZM10.75 15C10.75 14.5858 10.4142 14.25 10 14.25C9.58579 14.25 9.25 14.5858 9.25 15V17C9.25 17.4142 9.58579 17.75 10 17.75C10.4142 17.75 10.75 17.4142 10.75 17V15ZM14.25 10C14.25 9.58579 14.5858 9.25 15 9.25H17C17.4142 9.25 17.75 9.58579 17.75 10C17.75 10.4142 17.4142 10.75 17 10.75H15C14.5858 10.75 14.25 10.4142 14.25 10ZM3 9.25C2.58579 9.25 2.25 9.58579 2.25 10C2.25 10.4142 2.58579 10.75 3 10.75H5C5.41421 10.75 5.75 10.4142 5.75 10C5.75 9.58579 5.41421 9.25 5 9.25H3ZM15.4797 4.52033C15.7726 4.81322 15.7726 5.2881 15.4797 5.58099L14.0657 6.99499C13.7728 7.28788 13.2979 7.28788 13.005 6.99499C12.7121 6.7021 12.7121 6.22722 13.005 5.93433L14.419 4.52033C14.7119 4.22744 15.1868 4.22744 15.4797 4.52033ZM6.99432 14.0663C7.28721 13.7734 7.28721 13.2986 6.99432 13.0057C6.70142 12.7128 6.22655 12.7128 5.93366 13.0057L4.51966 14.4197C4.22676 14.7126 4.22676 15.1874 4.51966 15.4803C4.81255 15.7732 5.28742 15.7732 5.58032 15.4803L6.99432 14.0663ZM13.005 13.0057C13.2979 12.7128 13.7728 12.7128 14.0657 13.0057L15.4797 14.4197C15.7726 14.7126 15.7726 15.1874 15.4797 15.4803C15.1868 15.7732 14.7119 15.7732 14.419 15.4803L13.005 14.0663C12.7121 13.7734 12.7121 13.2986 13.005 13.0057ZM5.58032 4.52033C5.28742 4.22744 4.81255 4.22744 4.51966 4.52033C4.22676 4.81322 4.22676 5.2881 4.51966 5.58099L5.93366 6.99499C6.22655 7.28788 6.70142 7.28788 6.99432 6.99499C7.28721 6.7021 7.28721 6.22722 6.99432 5.93433L5.58032 4.52033Z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/ListItemIcon/index.ts",
    "content": "export { default as ListItemIcon, type ListItemIconProps } from \"./ListItemIcon\";\n\nexport * from \"./ListItemIcon.types\";\n"
  },
  {
    "path": "packages/core/src/components/ListTitle/ListTitle.module.scss",
    "content": "@import \"../../styles/typography\";\n\n.listTitle {\n  @include smoothing-text;\n  padding: var(--space-16) var(--space-16) var(--space-8);\n  border-radius: var(--border-radius-small);\n}\n"
  },
  {
    "path": "packages/core/src/components/ListTitle/ListTitle.tsx",
    "content": "import cx from \"classnames\";\nimport React, { forwardRef, useRef } from \"react\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport { Text } from \"@vibe/typography\";\nimport styles from \"./ListTitle.module.scss\";\n\nexport interface ListTitleProps extends VibeComponentProps {\n  /**\n   * The tab index for keyboard navigation.\n   */\n  tabIndex?: number;\n  /**\n   * The title text.\n   */\n  children?: string;\n}\n\nconst ListTitle: React.FC<ListTitleProps> = forwardRef(\n  ({ className, id, children, tabIndex, \"data-testid\": dataTestId }, ref) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    return (\n      <Text\n        type=\"text1\"\n        weight=\"medium\"\n        data-testid={dataTestId || id}\n        aria-level={3}\n        tabIndex={tabIndex}\n        role=\"heading\"\n        ref={mergedRef}\n        className={cx(styles.listTitle, className)}\n        id={id}\n      >\n        {children}\n      </Text>\n    );\n  }\n);\n\nObject.assign(ListTitle, {\n  // Used by VirtualizedListItems\n  displayName: \"ListTitle\"\n});\n\nexport default ListTitle;\n"
  },
  {
    "path": "packages/core/src/components/ListTitle/__tests__/ListTitle.test.tsx",
    "content": "import { it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport ListTitle from \"../ListTitle\";\n\nit(\"renders correctly with empty props\", () => {\n  const tree = renderer.create(<ListTitle data-testid=\"list-title\">Title</ListTitle>).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "packages/core/src/components/ListTitle/__tests__/__snapshots__/ListTitle.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`renders correctly with empty props 1`] = `\n<div\n  aria-level={3}\n  className=\"typography primary start singleLineEllipsis text text1Medium listTitle\"\n  data-testid=\"list-title\"\n  role=\"heading\"\n>\n  Title\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/ListTitle/index.ts",
    "content": "export { default as ListTitle, type ListTitleProps } from \"./ListTitle\";\n"
  },
  {
    "path": "packages/core/src/components/Menu/Menu/Menu.module.scss",
    "content": "@import \"../../../styles/typography\";\n\n.menu {\n  margin: unset;\n  padding: unset;\n  position: relative;\n}\n\n.menu:focus {\n  outline: none;\n}\n\n.small {\n  width: 200px;\n}\n\n.medium {\n  width: 220px;\n}\n\n.large {\n  width: 240px;\n}\n"
  },
  {
    "path": "packages/core/src/components/Menu/Menu/Menu.tsx",
    "content": "import cx from \"classnames\";\nimport { SIZES } from \"../../../constants\";\nimport React, { forwardRef, type ReactElement, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useMergeRef, useIsomorphicLayoutEffect, getStyle } from \"@vibe/shared\";\n\nimport { useClickOutside } from \"@vibe/hooks\";\nimport useSubMenuIndex from \"./hooks/useSubMenuIndex\";\nimport useOnCloseMenu from \"./hooks/useOnCloseMenu\";\nimport useCloseMenuOnKeyEvent from \"./hooks/useCloseMenuOnKeyEvent\";\nimport useMenuKeyboardNavigation from \"./hooks/useMenuKeyboardNavigation\";\nimport useMouseLeave from \"./hooks/useMouseLeave\";\nimport { useAdjacentSelectableMenuIndex } from \"./hooks/useAdjacentSelectableMenuIndex\";\nimport { useFocusWithin } from \"../../../hooks/useFocusWithin\";\nimport usePrevious from \"../../../hooks/usePrevious\";\nimport { type ElementContent, type VibeComponentProps } from \"../../../types\";\n\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../../tests/constants\";\nimport { useFocusOnMount } from \"./hooks/useFocusOnMount\";\nimport { useMenuId } from \"./hooks/useMenuId\";\nimport { type CloseMenuOption, type MenuChild } from \"./MenuConstants\";\nimport { generateMenuItemId } from \"./utils/utils\";\nimport styles from \"./Menu.module.scss\";\n\nexport interface MenuProps extends VibeComponentProps {\n  /**\n   * Size of the menu.\n   */\n  size?: (typeof SIZES)[keyof typeof SIZES];\n  /**\n   * The tab index of the menu.\n   */\n  tabIndex?: number;\n  /**\n   * ARIA label for accessibility.\n   */\n  \"aria-label\"?: string;\n  /**\n   * ARIA description ID.\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * If true, the menu will automatically focus on mount.\n   */\n  focusOnMount?: boolean;\n  /**\n   * Callback when a menu item gains focus.\n   */\n  onItemFocus?: (index: number) => void;\n  /**\n   * Controls the visibility of the menu.\n   */\n  isVisible?: boolean;\n  /**\n   * Callback triggered when the menu closes.\n   */\n  onClose?: (option: CloseMenuOption) => void;\n  /**\n   * Index of the focused menu item.\n   */\n  focusItemIndex?: number;\n  /**\n   * If true, this menu is a submenu.\n   */\n  isSubMenu?: boolean;\n  /**\n   * If true, event listeners will be attached to the document.\n   */\n  useDocumentEventListeners?: boolean;\n  /**\n   * Index of the item that should be focused when the menu mounts.\n   */\n  focusItemIndexOnMount?: number;\n  /**\n   * If true, enables scrolling within the menu.\n   */\n  shouldScrollMenu?: boolean;\n  /**\n   * The menu items.\n   */\n  children?: ElementContent;\n}\n\nconst Menu = forwardRef(\n  (\n    {\n      id,\n      className,\n      size = SIZES.MEDIUM,\n      tabIndex = 0,\n      \"aria-label\": ariaLabel = \"Menu\",\n      \"aria-describedby\": ariaDescribedBy,\n      children: originalChildren,\n      isVisible = true,\n      onClose,\n      onItemFocus,\n      focusOnMount = false,\n      focusItemIndex = -1,\n      focusItemIndexOnMount = -1,\n      isSubMenu = false,\n      useDocumentEventListeners = false,\n      shouldScrollMenu = false,\n      \"data-testid\": dataTestId\n    }: MenuProps,\n    forwardedRef: React.ForwardedRef<HTMLElement>\n  ) => {\n    const ref = useRef(null);\n    const mergedRef = useMergeRef(ref, forwardedRef);\n\n    const overrideId = useMenuId(id);\n    const splitMenuItemIconButtonRef = useRef<HTMLElement>(null);\n\n    const [activeItemIndex, setActiveItemIndex] = useState(focusItemIndex);\n    const [isInitialSelectedState, setIsInitialSelectedState] = useState(false);\n\n    const children = useMemo(() => {\n      const allChildren = React.Children.toArray(originalChildren) as MenuChild[];\n      return allChildren.filter(child => {\n        if (child.type.isMenuChild) return true;\n        console.error(\n          \"Menu child must be a menuChild item (such as MenuItem, MenuDivider, MenuTitle, etc). This child is not supported: \",\n          child\n        );\n        return false;\n      });\n    }, [originalChildren]);\n\n    const updateActiveItemIndex = useCallback(\n      (index: number) => {\n        setActiveItemIndex(index);\n\n        const activeChild = children[index];\n        const ariaActiveDescendant = React.isValidElement(activeChild)\n          ? activeChild?.props?.id || `${overrideId}-item-${index}`\n          : undefined;\n        if (ariaActiveDescendant) {\n          ref?.current?.setAttribute(\"aria-activedescendant\", ariaActiveDescendant);\n        } else {\n          ref?.current?.removeAttribute(\"aria-activedescendant\");\n        }\n      },\n      [children, overrideId]\n    );\n\n    const onSetActiveItemIndexCallback = useCallback(\n      (index: number) => {\n        onItemFocus && onItemFocus(index);\n        updateActiveItemIndex(index);\n        setIsInitialSelectedState(false);\n      },\n      [updateActiveItemIndex, onItemFocus]\n    );\n\n    const { setSubMenuIsOpenByIndex, hasOpenSubMenu, openSubMenuIndex, setOpenSubMenuIndex, resetOpenSubMenuIndex } =\n      useSubMenuIndex();\n\n    const onCloseMenu = useOnCloseMenu({\n      setActiveItemIndex: onSetActiveItemIndexCallback,\n      setOpenSubMenuIndex,\n      onClose\n    });\n\n    useClickOutside({ ref, callback: () => onCloseMenu() });\n    useCloseMenuOnKeyEvent({ hasOpenSubMenu, onCloseMenu, ref, onClose, isSubMenu, useDocumentEventListeners });\n\n    const { getNextSelectableIndex, getPreviousSelectableIndex } = useAdjacentSelectableMenuIndex({\n      children: children as ReactElement[]\n    });\n    useMenuKeyboardNavigation({\n      hasOpenSubMenu,\n      getNextSelectableIndex,\n      getPreviousSelectableIndex,\n      activeItemIndex,\n      setActiveItemIndex: onSetActiveItemIndexCallback,\n      isVisible,\n      ref,\n      useDocumentEventListeners\n    });\n    useMouseLeave({\n      resetOpenSubMenuIndex,\n      hasOpenSubMenu,\n      ref,\n      setActiveItemIndex: onSetActiveItemIndexCallback\n    });\n    useFocusOnMount({\n      focusItemIndexOnMount,\n      focusChildOnMount: children[focusItemIndexOnMount] as ReactElement,\n      getNextSelectableIndex,\n      updateActiveItemIndex,\n      setIsInitialFocusSet: setIsInitialSelectedState\n    });\n\n    const onMouseMove = useCallback(() => {\n      setIsInitialSelectedState(true);\n    }, [setIsInitialSelectedState]);\n\n    const previousHasOpenSubMenu = usePrevious(hasOpenSubMenu);\n    useEffect(() => {\n      if (hasOpenSubMenu || useDocumentEventListeners) return;\n      if (activeItemIndex > -1 && previousHasOpenSubMenu) {\n        // the submenu was just closed, so we want to focus the menu to capture keyboard events\n        ref?.current?.focus();\n      }\n    }, [activeItemIndex, hasOpenSubMenu, previousHasOpenSubMenu, useDocumentEventListeners]);\n\n    useIsomorphicLayoutEffect(() => {\n      if (!focusOnMount || useDocumentEventListeners) return;\n      requestAnimationFrame(() => {\n        ref && ref.current && ref.current.focus();\n      });\n    }, [ref, focusOnMount, useDocumentEventListeners]);\n\n    const { focusWithinProps } = useFocusWithin({\n      onBlurWithin: () => {\n        onCloseMenu && onCloseMenu();\n      }\n    });\n\n    return (\n      <ul\n        onFocus={focusWithinProps?.onFocus}\n        onBlur={focusWithinProps?.onBlur}\n        id={overrideId}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MENU, id)}\n        data-vibe={ComponentVibeId.MENU}\n        className={cx(styles.menu, getStyle(styles, size), className)}\n        ref={mergedRef}\n        tabIndex={tabIndex}\n        aria-label={ariaLabel}\n        role=\"menu\"\n        aria-describedby={ariaDescribedBy}\n        onMouseOver={onMouseMove}\n      >\n        {children &&\n          React.Children.map(children, (child, index) => {\n            return React.isValidElement(child)\n              ? React.cloneElement(child, {\n                  ...child?.props,\n                  activeItemIndex,\n                  index,\n                  setActiveItemIndex: updateActiveItemIndex,\n                  menuRef: ref,\n                  resetOpenSubMenuIndex,\n                  isParentMenuVisible: isVisible,\n                  setSubMenuIsOpenByIndex,\n                  hasOpenSubMenu: index === openSubMenuIndex,\n                  closeMenu: onCloseMenu,\n                  id: generateMenuItemId(overrideId, child, index),\n                  useDocumentEventListeners,\n                  isInitialSelectedState,\n                  shouldScrollMenu,\n                  getNextSelectableIndex,\n                  getPreviousSelectableIndex,\n                  isUnderSubMenu: isSubMenu,\n                  splitMenuItemIconButtonRef\n                })\n              : null;\n          })}\n      </ul>\n    );\n  }\n);\n\nObject.assign(Menu, {\n  isMenu: true,\n  supportFocusOnMount: true\n});\n\nexport default Menu;\n"
  },
  {
    "path": "packages/core/src/components/Menu/Menu/MenuConstants.ts",
    "content": "import { type ReactElement } from \"react\";\n\nexport type CloseMenuOption = {\n  propagate?: boolean;\n};\n\nexport type MenuChild = ReactElement & {\n  type?: {\n    isSelectable?: boolean;\n    isMenuChild?: boolean;\n    isMenu?: boolean;\n    supportFocusOnMount?: boolean;\n  };\n};\n"
  },
  {
    "path": "packages/core/src/components/Menu/Menu/__tests__/Menu.test.tsx",
    "content": "import { vi, beforeEach, afterEach, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport { cleanup, fireEvent, render } from \"@testing-library/react\";\nimport { act } from \"@testing-library/react-hooks\";\nimport Menu from \"../Menu\";\nimport MenuItem from \"../../MenuItem/MenuItem\";\nimport MenuTitle from \"../../MenuTitle/MenuTitle\";\nimport Divider from \"../../../Divider/Divider\";\nimport { mockRequestAnimationFrame, restoreRequestAnimationFrameMock } from \"../../../../tests/__tests__/test-utils\";\n\ndescribe(\"Snapshots\", () => {\n  beforeEach(() => {\n    mockRequestAnimationFrame();\n  });\n\n  afterEach(() => {\n    restoreRequestAnimationFrameMock();\n  });\n\n  it(\"renders correctly with empty props\", () => {\n    const tree = renderer.create(<Menu />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with custom class name\", () => {\n    const tree = renderer.create(<Menu className=\"dummy-class-name\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with children\", () => {\n    const tree = renderer\n      .create(\n        <Menu className=\"dummy-class-name\" focusItemIndexOnMount={0}>\n          <MenuTitle caption=\"my title\" />\n          <MenuItem title=\"item 1\" />\n          <Divider />\n          <MenuItem title=\"item 2\" />\n        </Menu>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n\nvi.useFakeTimers();\nconst menuTitleCaption = \"Title\";\nconst menuItem1Name = \"My item 1\";\nconst menuItem1Id = \"menu-item-1\";\nconst menuItem1OnClickMock = vi.fn();\nconst menuItem2OnClickMock = vi.fn();\nconst menuItem2Name = \"My item 2\";\nconst menuItem2Id = \"menu-item-2\";\n\nconst renderComponent = ({ ...props } = {}) => {\n  return render(\n    <Menu {...props} aria-label=\"menu\">\n      <MenuTitle caption={menuTitleCaption} />\n      <MenuItem title={menuItem1Name} onClick={menuItem1OnClickMock} id={menuItem1Id} />\n      <Divider />\n      <MenuItem title={menuItem2Name} onClick={menuItem2OnClickMock} id={menuItem2Id} />\n    </Menu>\n  );\n};\n\ndescribe.skip(\"<Menu />\", () => {\n  afterEach(() => {\n    cleanup();\n  });\n\n  it(\"calls onClick only for the selected menu item when using the mouse\", () => {\n    const menuComponent = renderComponent();\n\n    const menuItem = menuComponent.getByText(menuItem1Name);\n\n    act(() => {\n      fireEvent.mouseOver(menuItem);\n      vi.advanceTimersByTime(1000);\n      fireEvent.click(menuItem);\n    });\n\n    vi.advanceTimersByTime(1000);\n    expect(menuItem1OnClickMock.mock.calls.length).toBe(1);\n    expect(menuItem2OnClickMock.mock.calls.length).toBe(0);\n  });\n\n  it(\"calls onClick only for the selected menu item when using the enter\", () => {\n    const menuComponent = renderComponent();\n    const menuItem = menuComponent.getByText(menuItem1Name);\n\n    act(() => {\n      fireEvent.mouseOver(menuItem);\n      vi.advanceTimersByTime(1000);\n      fireEvent.keyUp(menuItem, { key: \"Enter\" });\n    });\n\n    vi.advanceTimersByTime(1000);\n    expect(menuItem1OnClickMock.mock.calls.length).toBe(1);\n    expect(menuItem2OnClickMock.mock.calls.length).toBe(0);\n  });\n\n  it(\"calls onClick only for the selected menu item when using keyboard\", () => {\n    const menuComponent = renderComponent();\n    const menuElement = menuComponent.getByLabelText(\"menu\");\n\n    act(() => {\n      fireEvent.keyUp(menuElement, { key: \"ArrowDown\" });\n      vi.advanceTimersByTime(1000);\n      fireEvent.keyUp(menuElement, { key: \"Enter\" });\n    });\n\n    vi.advanceTimersByTime(1000);\n    expect(menuItem1OnClickMock.mock.calls.length).toBe(1);\n    expect(menuItem2OnClickMock.mock.calls.length).toBe(0);\n  });\n\n  it(\"menu has correct active-descendant when item is active\", () => {\n    const menuComponent = renderComponent();\n    expect(menuComponent).not.toHaveAttribute(\"aria-activedescendant\");\n\n    const menuItem = menuComponent.getByText(menuItem1Name);\n\n    act(() => {\n      fireEvent.mouseOver(menuItem);\n      vi.advanceTimersByTime(1000);\n      fireEvent.click(menuItem);\n    });\n\n    vi.advanceTimersByTime(1000);\n    expect(menuComponent).toHaveAttribute(\"aria-activedescendant\", menuItem1Id);\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Menu/Menu/__tests__/__snapshots__/Menu.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`Snapshots > renders correctly with children 1`] = `\n<ul\n  aria-label=\"Menu\"\n  className=\"menu medium dummy-class-name\"\n  data-testid=\"menu\"\n  data-vibe=\"Menu\"\n  id=\"menu-2\"\n  onBlur={[Function]}\n  onFocus={[Function]}\n  onMouseOver={[Function]}\n  role=\"menu\"\n  tabIndex={0}\n>\n  <div\n    className=\"typography secondary start singleLineEllipsis text text2Normal title\"\n    data-testid=\"menu-title_menu-2-item-0\"\n  >\n    <label\n      className=\"titleCaption titleCaptionBottom\"\n      data-testid=\"menu-title-caption_menu-2-item-0\"\n      id=\"menu-2-item-0\"\n    >\n      my title\n    </label>\n  </div>\n  <li\n    aria-selected={true}\n    className=\"typography primary start singleLineEllipsis text text2Normal item focused initialSelected\"\n    data-testid=\"menu-item_1\"\n    id=\"menu-2-item-1\"\n    onClick={[Function]}\n    role=\"menuitem\"\n    tabIndex={-1}\n  >\n    <div\n      className=\"title\"\n    >\n      item 1\n    </div>\n    <div\n      className=\"container directionRow justifyStart alignCenter\"\n      style={\n        {\n          \"gap\": \"var(--space-4)\",\n        }\n      }\n    />\n  </li>\n  <li\n    aria-selected={false}\n    className=\"typography primary start singleLineEllipsis text text2Normal item initialSelected\"\n    data-testid=\"menu-item_2\"\n    id=\"menu-2-item-2\"\n    onClick={[Function]}\n    role=\"menuitem\"\n    tabIndex={-1}\n  >\n    <div\n      className=\"title\"\n    >\n      item 2\n    </div>\n    <div\n      className=\"container directionRow justifyStart alignCenter\"\n      style={\n        {\n          \"gap\": \"var(--space-4)\",\n        }\n      }\n    />\n  </li>\n</ul>\n`;\n\nexports[`Snapshots > renders correctly with custom class name 1`] = `\n<ul\n  aria-label=\"Menu\"\n  className=\"menu medium dummy-class-name\"\n  data-testid=\"menu\"\n  data-vibe=\"Menu\"\n  id=\"menu-1\"\n  onBlur={[Function]}\n  onFocus={[Function]}\n  onMouseOver={[Function]}\n  role=\"menu\"\n  tabIndex={0}\n/>\n`;\n\nexports[`Snapshots > renders correctly with empty props 1`] = `\n<ul\n  aria-label=\"Menu\"\n  className=\"menu medium\"\n  data-testid=\"menu\"\n  data-vibe=\"Menu\"\n  id=\"menu-0\"\n  onBlur={[Function]}\n  onFocus={[Function]}\n  onMouseOver={[Function]}\n  role=\"menu\"\n  tabIndex={0}\n/>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Menu/Menu/hooks/__tests__/useAdjacentSelectableMenuIndex.test.tsx",
    "content": "import type React from \"react\";\nimport { describe, it, expect } from \"vitest\";\nimport { renderHook } from \"@testing-library/react-hooks\";\nimport { useAdjacentSelectableMenuIndex } from \"../useAdjacentSelectableMenuIndex\";\n\ndescribe(\"useAdjacentSelectableMenuIndex\", () => {\n  const ENABLED_SELECTABLE_CHILD = { type: { isSelectable: true }, props: {} };\n  const DISABLED_SELECTABLE_CHILD = { type: { isSelectable: true }, props: { disabled: true } };\n  const ENABLED_NON_SELECTABLE_CHILD = { type: {}, props: {} };\n\n  describe(\"getNextSelectableIndex\", () => {\n    it(\"should return the same index if there is only one child\", () => {\n      const children = [ENABLED_SELECTABLE_CHILD];\n      const currentIndex = 0;\n      const expectedResult = 0;\n\n      const { result: hookResult } = renderHookForTest(children);\n      const result = hookResult.current.getNextSelectableIndex(currentIndex);\n\n      expect(result).toEqual(expectedResult);\n    });\n\n    it(\"should return the third index if there are three items and the second index is selected\", () => {\n      const children = [ENABLED_SELECTABLE_CHILD, ENABLED_SELECTABLE_CHILD, ENABLED_SELECTABLE_CHILD];\n      const currentIndex = 1;\n      const expectedResult = 2;\n\n      const { result: hookResult } = renderHookForTest(children);\n      const result = hookResult.current.getNextSelectableIndex(currentIndex);\n\n      expect(result).toEqual(expectedResult);\n    });\n\n    it(\"should return the first index if there are three children and the third index is selected\", () => {\n      const children = [ENABLED_SELECTABLE_CHILD, ENABLED_SELECTABLE_CHILD, ENABLED_SELECTABLE_CHILD];\n      const currentIndex = 2;\n      const expectedResult = 0;\n\n      const { result: hookResult } = renderHookForTest(children);\n      const result = hookResult.current.getNextSelectableIndex(currentIndex);\n\n      expect(result).toEqual(expectedResult);\n    });\n\n    it(\"should return the third index if there are three children, the first one is active and the second one is disabled\", () => {\n      const children = [ENABLED_SELECTABLE_CHILD, DISABLED_SELECTABLE_CHILD, ENABLED_SELECTABLE_CHILD];\n      const currentIndex = 0;\n      const expectedResult = 2;\n\n      const { result: hookResult } = renderHookForTest(children);\n      const result = hookResult.current.getNextSelectableIndex(currentIndex);\n\n      expect(result).toEqual(expectedResult);\n    });\n\n    it(\"should return the first index if there are three children, the second is active and the third one is no selectable\", () => {\n      const children = [ENABLED_SELECTABLE_CHILD, ENABLED_SELECTABLE_CHILD, ENABLED_NON_SELECTABLE_CHILD];\n      const currentIndex = 1;\n      const expectedResult = 0;\n\n      const { result: hookResult } = renderHookForTest(children);\n      const result = hookResult.current.getNextSelectableIndex(currentIndex);\n\n      expect(result).toEqual(expectedResult);\n    });\n  });\n\n  describe(\"getPreviousSelectableIndex\", () => {\n    it(\"should return the null if there is only one child\", () => {\n      const children = [ENABLED_SELECTABLE_CHILD];\n      const currentIndex = 0;\n\n      const { result: hookResult } = renderHookForTest(children);\n      const result = hookResult.current.getPreviousSelectableIndex(currentIndex);\n\n      expect(result).toEqual(null);\n    });\n\n    it(\"should return the second index if there are three items and the third index is selected\", () => {\n      const children = [ENABLED_SELECTABLE_CHILD, ENABLED_SELECTABLE_CHILD, ENABLED_SELECTABLE_CHILD];\n      const currentIndex = 2;\n      const expectedResult = 1;\n\n      const { result: hookResult } = renderHookForTest(children);\n      const result = hookResult.current.getPreviousSelectableIndex(currentIndex);\n\n      expect(result).toEqual(expectedResult);\n    });\n\n    it(\"should return the third index if there are three children and the first index is selected\", () => {\n      const children = [ENABLED_SELECTABLE_CHILD, ENABLED_SELECTABLE_CHILD, ENABLED_SELECTABLE_CHILD];\n      const currentIndex = 0;\n      const expectedResult = 2;\n\n      const { result: hookResult } = renderHookForTest(children);\n      const result = hookResult.current.getPreviousSelectableIndex(currentIndex);\n\n      expect(result).toEqual(expectedResult);\n    });\n\n    it(\"should return the first index if there are three children, the third one is active and the second one is disabled\", () => {\n      const children = [ENABLED_SELECTABLE_CHILD, DISABLED_SELECTABLE_CHILD, ENABLED_SELECTABLE_CHILD];\n      const currentIndex = 2;\n      const expectedResult = 0;\n\n      const { result: hookResult } = renderHookForTest(children);\n      const result = hookResult.current.getPreviousSelectableIndex(currentIndex);\n\n      expect(result).toEqual(expectedResult);\n    });\n\n    it(\"should return the third index if there are three children, the second is active and the first one is no selectable\", () => {\n      const children = [ENABLED_NON_SELECTABLE_CHILD, ENABLED_SELECTABLE_CHILD, ENABLED_SELECTABLE_CHILD];\n      const currentIndex = 1;\n      const expectedResult = 2;\n\n      const { result: hookResult } = renderHookForTest(children);\n      const result = hookResult.current.getPreviousSelectableIndex(currentIndex);\n\n      expect(result).toEqual(expectedResult);\n    });\n  });\n\n  function renderHookForTest(children: React.ReactElement[]) {\n    return renderHook(() => useAdjacentSelectableMenuIndex({ children }));\n  }\n});\n"
  },
  {
    "path": "packages/core/src/components/Menu/Menu/hooks/__tests__/useFocusOnMount.test.tsx",
    "content": "import { vi, beforeEach, afterEach, describe, it, expect, type MockedFunction } from \"vitest\";\nimport { renderHook } from \"@testing-library/react-hooks\";\nimport { useFocusOnMount, type UseFocusOnMountProps } from \"../useFocusOnMount\";\nimport { isMenuChildSelectable } from \"../../utils/utils\";\nimport { type ReactElement } from \"react\";\nimport { mockRequestAnimationFrame, restoreRequestAnimationFrameMock } from \"../../../../../tests/__tests__/test-utils\";\n\nvi.mock(\"../../utils/utils\", () => ({\n  isMenuChildSelectable: vi.fn()\n}));\n\nfunction renderHookWithProps(props: Partial<UseFocusOnMountProps>) {\n  return renderHook(() =>\n    useFocusOnMount({\n      focusItemIndexOnMount: -1,\n      focusChildOnMount: {} as ReactElement,\n      getNextSelectableIndex: vi.fn(),\n      updateActiveItemIndex: vi.fn(),\n      setIsInitialFocusSet: vi.fn(),\n      ...props\n    })\n  );\n}\n\ndescribe(\"useFocusOnMount\", () => {\n  const mockUpdateActiveItemIndex = vi.fn();\n  const mockSetIsInitialFocusSet = vi.fn();\n\n  beforeEach(() => {\n    mockRequestAnimationFrame();\n  });\n\n  afterEach(() => {\n    restoreRequestAnimationFrameMock();\n    vi.clearAllMocks();\n  });\n\n  it(\"should not focus when focusItemIndexOnMount is -1\", () => {\n    renderHookWithProps({\n      focusItemIndexOnMount: -1,\n      updateActiveItemIndex: mockUpdateActiveItemIndex,\n      setIsInitialFocusSet: mockSetIsInitialFocusSet\n    });\n\n    expect(mockUpdateActiveItemIndex).not.toHaveBeenCalled();\n    expect(mockSetIsInitialFocusSet).not.toHaveBeenCalled();\n  });\n\n  it(\"should set focus to the initial child if it is selectable\", () => {\n    (isMenuChildSelectable as MockedFunction<typeof isMenuChildSelectable>).mockReturnValueOnce(true);\n\n    renderHookWithProps({\n      focusItemIndexOnMount: 0,\n      updateActiveItemIndex: mockUpdateActiveItemIndex,\n      setIsInitialFocusSet: mockSetIsInitialFocusSet\n    });\n\n    expect(mockUpdateActiveItemIndex).toHaveBeenCalledWith(0);\n    expect(mockSetIsInitialFocusSet).toHaveBeenCalledWith(true);\n  });\n\n  it(\"should set focus to the next selectable child if initial is not selectable\", () => {\n    (isMenuChildSelectable as MockedFunction<typeof isMenuChildSelectable>)\n      .mockReturnValue(true)\n      .mockReturnValueOnce(false);\n\n    renderHookWithProps({\n      focusItemIndexOnMount: 0,\n      getNextSelectableIndex: vi.fn().mockReturnValueOnce(1),\n      updateActiveItemIndex: mockUpdateActiveItemIndex,\n      setIsInitialFocusSet: mockSetIsInitialFocusSet\n    });\n\n    expect(mockUpdateActiveItemIndex).toHaveBeenCalledWith(1);\n    expect(mockSetIsInitialFocusSet).toHaveBeenCalledWith(true);\n  });\n\n  it(\"should not set focus if no selectable children found\", () => {\n    (isMenuChildSelectable as MockedFunction<typeof isMenuChildSelectable>).mockReturnValue(false);\n\n    renderHookWithProps({\n      focusItemIndexOnMount: 0,\n      getNextSelectableIndex: vi.fn().mockReturnValueOnce(null),\n      updateActiveItemIndex: mockUpdateActiveItemIndex,\n      setIsInitialFocusSet: mockSetIsInitialFocusSet\n    });\n\n    expect(mockUpdateActiveItemIndex).not.toHaveBeenCalled();\n    expect(mockSetIsInitialFocusSet).not.toHaveBeenCalled();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Menu/Menu/hooks/__tests__/useLastNavigationDirection.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport { renderHook, act } from \"@testing-library/react-hooks\";\nimport userEvent from \"@testing-library/user-event\";\nimport { NavDirections } from \"../../../../../hooks/useFullKeyboardListeners\";\nimport { useLastNavigationDirection } from \"../useLastNavigationDirection\";\n\ndescribe(\"useLastNavigationDirection\", () => {\n  it(\"should return undefined when no direction key was pressed yet\", () => {\n    const { result } = renderHookForTest();\n\n    expect(result.current.lastNavigationDirectionRef.current).toBeUndefined();\n  });\n\n  it(\"should return undefined when only non-direction keys were pressed\", () => {\n    const { result } = renderHookForTest();\n\n    act(() => {\n      userEvent.keyboard(\"f\");\n    });\n\n    expect(result.current.lastNavigationDirectionRef.current).toBeUndefined();\n  });\n\n  [\n    { key: \"ArrowUp\", direction: NavDirections.UP },\n    { key: \"ArrowLeft\", direction: NavDirections.LEFT },\n    { key: \"ArrowRight\", direction: NavDirections.RIGHT },\n    { key: \"ArrowDown\", direction: NavDirections.DOWN }\n  ].forEach(({ key, direction }) => {\n    it(`should return direction \"${direction}\" when pressing the key \"${key}\"`, () => {\n      const { result } = renderHookForTest();\n\n      act(() => {\n        userEvent.keyboard(`{${key}}`);\n      });\n\n      expect(result.current.lastNavigationDirectionRef.current).toBe(direction);\n    });\n\n    it(`should return direction \"${direction}\" when pressing the key \"${key}\" after another direction key`, () => {\n      const otherDirectionKey = key === \"ArrowUp\" ? \"ArrowDown\" : \"ArrowUp\";\n      const { result } = renderHookForTest();\n\n      act(() => {\n        userEvent.keyboard(`{${otherDirectionKey}}{${key}}`);\n      });\n\n      expect(result.current.lastNavigationDirectionRef.current).toBe(direction);\n    });\n\n    it(`should return direction \"${direction}\" when pressing the key \"${key}\" after another non-direction keys`, () => {\n      const { result } = renderHookForTest();\n\n      act(() => {\n        userEvent.keyboard(`something{${key}}`);\n      });\n\n      expect(result.current.lastNavigationDirectionRef.current).toBe(direction);\n    });\n\n    it(`should return direction \"${direction}\" when pressing the key \"${key}\" and THEN non-direction keys`, () => {\n      const { result } = renderHookForTest();\n\n      act(() => {\n        userEvent.keyboard(`{${key}}something`);\n      });\n\n      expect(result.current.lastNavigationDirectionRef.current).toBe(direction);\n    });\n  });\n\n  it(\"should clear the last navigation direction after using the mouse\", () => {\n    const { result } = renderHookForTest();\n\n    act(() => {\n      userEvent.keyboard(\"{ArrowUp}\");\n    });\n    act(() => {\n      userEvent.click(document.body);\n    });\n\n    expect(result.current.lastNavigationDirectionRef.current).toBe(undefined);\n  });\n\n  function renderHookForTest() {\n    return renderHook(() => useLastNavigationDirection());\n  }\n});\n"
  },
  {
    "path": "packages/core/src/components/Menu/Menu/hooks/useAdjacentSelectableMenuIndex.tsx",
    "content": "import { type ReactElement, useCallback } from \"react\";\nimport { isMenuChildSelectable } from \"../utils/utils\";\n\nexport const useAdjacentSelectableMenuIndex = ({ children }: { children: ReactElement[] }) => {\n  const getNextSelectableIndex = useCallback(\n    (currentActiveItemIndex: number) => {\n      let newIndex;\n      for (let offset = 1; offset <= children.length; offset++) {\n        newIndex = (currentActiveItemIndex + offset) % children.length;\n        if (isMenuChildSelectable(children[newIndex])) {\n          return newIndex;\n        }\n      }\n      return null;\n    },\n    [children]\n  );\n\n  const getPreviousSelectableIndex = useCallback(\n    (currentActiveItemIndex: number) => {\n      let newIndex;\n      for (let offset = children.length - 1; offset > 0; offset--) {\n        newIndex = (currentActiveItemIndex + offset) % children.length;\n        if (isMenuChildSelectable(children[newIndex])) {\n          return newIndex;\n        }\n      }\n      return null;\n    },\n    [children]\n  );\n\n  return { getNextSelectableIndex, getPreviousSelectableIndex };\n};\n"
  },
  {
    "path": "packages/core/src/components/Menu/Menu/hooks/useCloseMenuOnKeyEvent.tsx",
    "content": "import type React from \"react\";\nimport { useCallback } from \"react\";\nimport useKeyEvent from \"../../../../hooks/useKeyEvent\";\nimport { type CloseMenuOption } from \"../MenuConstants\";\nimport { keyCodes } from \"../../../../constants\";\n\nconst KEYS = [keyCodes.ESCAPE, keyCodes.LEFT_ARROW, keyCodes.TAB];\n\nexport default function useCloseMenuOnKeyEvent({\n  hasOpenSubMenu,\n  onCloseMenu,\n  ref,\n  onClose,\n  isSubMenu,\n  useDocumentEventListeners\n}: {\n  hasOpenSubMenu: boolean;\n  onCloseMenu: (option: CloseMenuOption) => void;\n  ref: React.RefObject<HTMLElement>;\n  onClose: (option: CloseMenuOption, key?: string) => void;\n  isSubMenu: boolean;\n  useDocumentEventListeners: boolean;\n}) {\n  const onKeyEvent = useCallback(\n    (event: React.KeyboardEvent) => {\n      const key = event.key;\n\n      if (hasOpenSubMenu) return;\n\n      if (key === keyCodes.LEFT_ARROW && !isSubMenu) {\n        return;\n      }\n      if (![keyCodes.ESCAPE, keyCodes.LEFT_ARROW, keyCodes.TAB].includes(key)) {\n        return;\n      }\n\n      onCloseMenu({ propagate: false });\n\n      if (onClose) {\n        onClose({ propagate: false }, key);\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [onClose, hasOpenSubMenu, onCloseMenu, isSubMenu]\n  );\n\n  useKeyEvent({\n    keys: KEYS,\n    callback: onKeyEvent,\n    ref: useDocumentEventListeners ? undefined : ref\n  });\n}\n"
  },
  {
    "path": "packages/core/src/components/Menu/Menu/hooks/useFocusOnMount.tsx",
    "content": "import { useEffect } from \"react\";\nimport { type ReactElement } from \"react\";\nimport { isMenuChildSelectable } from \"../utils/utils\";\n\nexport interface UseFocusOnMountProps {\n  focusItemIndexOnMount: number;\n  focusChildOnMount: ReactElement;\n  getNextSelectableIndex: (index: number) => number | null;\n  updateActiveItemIndex: (index: number) => void;\n  setIsInitialFocusSet: (state: boolean) => void;\n}\n\nexport const useFocusOnMount = ({\n  focusItemIndexOnMount,\n  focusChildOnMount,\n  getNextSelectableIndex,\n  updateActiveItemIndex,\n  setIsInitialFocusSet\n}: UseFocusOnMountProps) => {\n  useEffect(() => {\n    if (focusItemIndexOnMount === -1) {\n      return;\n    }\n\n    const indexToFocusOnMount = isMenuChildSelectable(focusChildOnMount)\n      ? focusItemIndexOnMount\n      : getNextSelectableIndex(focusItemIndexOnMount);\n\n    if (indexToFocusOnMount !== null) {\n      requestAnimationFrame(() => {\n        updateActiveItemIndex(indexToFocusOnMount);\n        setIsInitialFocusSet(true);\n      });\n    }\n  }, [focusChildOnMount, focusItemIndexOnMount, getNextSelectableIndex, setIsInitialFocusSet, updateActiveItemIndex]);\n};\n"
  },
  {
    "path": "packages/core/src/components/Menu/Menu/hooks/useLastNavigationDirection.tsx",
    "content": "import { useCallback, useRef } from \"react\";\nimport useEventListener from \"../../../../hooks/useEventListener\";\nimport {\n  ARROW_DOWN_KEYS,\n  ARROW_LEFT_KEYS,\n  ARROW_RIGHT_KEYS,\n  ARROW_UP_KEYS,\n  NavDirections\n} from \"../../../../hooks/useFullKeyboardListeners\";\nimport useKeyEvent from \"../../../../hooks/useKeyEvent\";\n\nconst NAVIGATION_KEYS = [...ARROW_UP_KEYS, ...ARROW_RIGHT_KEYS, ...ARROW_DOWN_KEYS, ...ARROW_LEFT_KEYS];\n\nexport const useLastNavigationDirection = () => {\n  const documentRef = useRef(document);\n\n  const lastNavigationDirectionRef = useRef<NavDirections>();\n\n  const setLastNavigationDirection = useCallback((dir: NavDirections) => {\n    lastNavigationDirectionRef.current = dir;\n  }, []);\n\n  const onKeyEvent = useCallback(\n    ({ key }: KeyboardEvent) => {\n      if (ARROW_UP_KEYS.includes(key)) {\n        setLastNavigationDirection(NavDirections.UP);\n      } else if (ARROW_RIGHT_KEYS.includes(key)) {\n        setLastNavigationDirection(NavDirections.RIGHT);\n      } else if (ARROW_DOWN_KEYS.includes(key)) {\n        setLastNavigationDirection(NavDirections.DOWN);\n      } else if (ARROW_LEFT_KEYS.includes(key)) {\n        setLastNavigationDirection(NavDirections.LEFT);\n      }\n    },\n    [setLastNavigationDirection]\n  );\n\n  const onMousedownAnywhere = useCallback(() => {\n    lastNavigationDirectionRef.current = undefined;\n  }, [lastNavigationDirectionRef]);\n\n  useKeyEvent({ ref: documentRef, capture: true, keys: NAVIGATION_KEYS, callback: onKeyEvent });\n  useEventListener({ eventName: \"mousedown\", ref: documentRef, capture: true, callback: onMousedownAnywhere });\n\n  return { lastNavigationDirectionRef };\n};\n"
  },
  {
    "path": "packages/core/src/components/Menu/Menu/hooks/useMenuId.tsx",
    "content": "import { useState } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"@vibe/shared\";\n\nlet menuIdCounter = 0;\nexport const generateMenuId = () => {\n  return `menu-${menuIdCounter++}`;\n};\n\nexport const useMenuId = (id: string) => {\n  const [menuId, setMenuId] = useState<string>();\n  useIsomorphicLayoutEffect(() => {\n    setMenuId(id || generateMenuId());\n  }, [id]);\n  return menuId;\n};\n"
  },
  {
    "path": "packages/core/src/components/Menu/Menu/hooks/useMenuKeyboardNavigation.tsx",
    "content": "import type React from \"react\";\nimport { useCallback, useMemo } from \"react\";\nimport {\n  ARROW_DOWN_KEYS,\n  ARROW_UP_KEYS,\n  ENTER_KEYS,\n  HOME_KEYS,\n  END_KEYS,\n  NavDirections\n} from \"../../../../hooks/useFullKeyboardListeners\";\nimport useKeyEvent from \"../../../../hooks/useKeyEvent\";\n\nexport default function useMenuKeyboardNavigation({\n  hasOpenSubMenu,\n  getNextSelectableIndex,\n  getPreviousSelectableIndex,\n  activeItemIndex,\n  setActiveItemIndex,\n  isVisible,\n  ref,\n  useDocumentEventListeners\n}: {\n  hasOpenSubMenu: boolean;\n  getNextSelectableIndex: (index: number) => number;\n  getPreviousSelectableIndex: (index: number) => number;\n  activeItemIndex: number;\n  setActiveItemIndex: (index: number) => void;\n  isVisible: boolean;\n  ref: React.RefObject<HTMLElement>;\n  useDocumentEventListeners: boolean;\n}) {\n  const onArrowKeyEvent = useCallback(\n    (direction: NavDirections) => {\n      let newIndex;\n\n      if (hasOpenSubMenu) return false;\n\n      if (direction === NavDirections.DOWN) {\n        newIndex = getNextSelectableIndex(activeItemIndex);\n      } else if (direction === NavDirections.UP) {\n        newIndex = getPreviousSelectableIndex(activeItemIndex);\n      }\n\n      if (newIndex || newIndex === 0) setActiveItemIndex(newIndex);\n    },\n    [activeItemIndex, getNextSelectableIndex, getPreviousSelectableIndex, hasOpenSubMenu, setActiveItemIndex]\n  );\n  const onArrowUp = useCallback(() => {\n    onArrowKeyEvent(NavDirections.UP);\n  }, [onArrowKeyEvent]);\n\n  const onArrowDown = useCallback(() => {\n    onArrowKeyEvent(NavDirections.DOWN);\n  }, [onArrowKeyEvent]);\n\n  const onEnterClickCallback = useCallback(\n    (_event: React.KeyboardEvent) => {\n      if (!isVisible) return;\n\n      if (activeItemIndex === -1) {\n        setActiveItemIndex(0);\n      }\n    },\n    [setActiveItemIndex, activeItemIndex, isVisible]\n  );\n\n  const onHomeKey = useCallback(() => {\n    if (hasOpenSubMenu) return;\n    const firstIndex = getNextSelectableIndex(-1);\n    if (firstIndex !== -1) {\n      setActiveItemIndex(firstIndex);\n    }\n  }, [hasOpenSubMenu, getNextSelectableIndex, setActiveItemIndex]);\n\n  const onEndKey = useCallback(() => {\n    if (hasOpenSubMenu) return;\n    const lastIndex = getPreviousSelectableIndex(0);\n    if (lastIndex !== -1) {\n      setActiveItemIndex(lastIndex);\n    }\n  }, [hasOpenSubMenu, getPreviousSelectableIndex, setActiveItemIndex]);\n\n  const listenerOptions = useMemo(() => {\n    if (useDocumentEventListeners) return undefined;\n\n    return {\n      ref,\n      preventDefault: true,\n      stopPropagation: true\n    };\n  }, [useDocumentEventListeners, ref]);\n\n  useKeyEvent({\n    keys: ARROW_DOWN_KEYS,\n    callback: onArrowDown,\n    ...listenerOptions\n  });\n\n  useKeyEvent({\n    keys: ARROW_UP_KEYS,\n    callback: onArrowUp,\n    ...listenerOptions\n  });\n\n  useKeyEvent({\n    keys: ENTER_KEYS,\n    callback: onEnterClickCallback,\n    ...listenerOptions\n  });\n\n  useKeyEvent({\n    keys: HOME_KEYS,\n    callback: onHomeKey,\n    ...listenerOptions\n  });\n\n  useKeyEvent({\n    keys: END_KEYS,\n    callback: onEndKey,\n    ...listenerOptions\n  });\n}\n"
  },
  {
    "path": "packages/core/src/components/Menu/Menu/hooks/useMouseLeave.tsx",
    "content": "import type React from \"react\";\nimport useIsMouseEnter from \"../../../../hooks/useIsMouseEnter\";\nimport usePrevious from \"../../../../hooks/usePrevious\";\nimport { useIsomorphicLayoutEffect } from \"@vibe/shared\";\n\nexport default function useMouseLeave({\n  resetOpenSubMenuIndex,\n  hasOpenSubMenu,\n  ref,\n  setActiveItemIndex\n}: {\n  resetOpenSubMenuIndex: () => void;\n  hasOpenSubMenu: boolean;\n  ref: React.RefObject<HTMLElement>;\n  setActiveItemIndex: (index: number) => void;\n}) {\n  const isMouseEnter = useIsMouseEnter({ ref });\n  const prevIsMouseEnter = usePrevious(isMouseEnter);\n\n  useIsomorphicLayoutEffect(() => {\n    if (isMouseEnter) return;\n    if (isMouseEnter === prevIsMouseEnter) return;\n    if (hasOpenSubMenu) return;\n    resetOpenSubMenuIndex();\n    setActiveItemIndex(-1);\n  }, [resetOpenSubMenuIndex, ref, prevIsMouseEnter, isMouseEnter, hasOpenSubMenu, setActiveItemIndex]);\n\n  return isMouseEnter;\n}\n"
  },
  {
    "path": "packages/core/src/components/Menu/Menu/hooks/useOnCloseMenu.tsx",
    "content": "import { useCallback } from \"react\";\nimport { type CloseMenuOption } from \"../MenuConstants\";\n\nexport default function useOnCloseMenu({\n  setActiveItemIndex,\n  setOpenSubMenuIndex,\n  onClose\n}: {\n  setActiveItemIndex: (index: number) => void;\n  setOpenSubMenuIndex: (index: number) => void;\n  onClose: (option: CloseMenuOption) => void;\n}) {\n  return useCallback(\n    (option: CloseMenuOption = { propagate: false }) => {\n      setActiveItemIndex(-1);\n      setOpenSubMenuIndex(null);\n      onClose && onClose(option);\n    },\n    [onClose, setOpenSubMenuIndex, setActiveItemIndex]\n  );\n}\n"
  },
  {
    "path": "packages/core/src/components/Menu/Menu/hooks/useSubMenuIndex.tsx",
    "content": "import { useCallback, useState } from \"react\";\n\nexport default function useSubMenuIndex() {\n  const [openSubMenuIndex, setOpenSubMenuIndex] = useState<number>(null);\n  const hasOpenSubMenu = typeof openSubMenuIndex === \"number\";\n\n  const setSubMenuIsOpenByIndex = useCallback(\n    (index: number, isOpen: boolean) => {\n      const isOpenIndexValue = isOpen ? index : null;\n      setOpenSubMenuIndex(isOpenIndexValue);\n    },\n    [setOpenSubMenuIndex]\n  );\n\n  const resetOpenSubMenuIndex = useCallback(() => {\n    setOpenSubMenuIndex(null);\n  }, [setOpenSubMenuIndex]);\n\n  return { setSubMenuIsOpenByIndex, hasOpenSubMenu, openSubMenuIndex, setOpenSubMenuIndex, resetOpenSubMenuIndex };\n}\n"
  },
  {
    "path": "packages/core/src/components/Menu/Menu/utils/__tests__/utils.test.ts",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { isMenuChildSelectable } from \"../utils\";\nimport MenuItem from \"../../../MenuItem/MenuItem\";\nimport MenuTitle from \"../../../MenuTitle/MenuTitle\";\nimport MenuDivider from \"../../../MenuDivider/MenuDivider\";\n\ndescribe(\"isMenuChildSelectable utility function\", () => {\n  describe(\"with selectable child\", () => {\n    it(\"should return true for enabled MenuItem\", () => {\n      const isMenuItemSelectable = isMenuChildSelectable(React.createElement(MenuItem));\n      expect(isMenuItemSelectable).toBe(true);\n    });\n\n    it(\"should return false for disabled MenuItem\", () => {\n      const isDisabledMenuItemSelectable = isMenuChildSelectable(React.createElement(MenuItem, { disabled: true }));\n      expect(isDisabledMenuItemSelectable).toBe(false);\n    });\n  });\n\n  describe(\"with non-selectable child\", () => {\n    it(\"should return false for MenuTitle\", () => {\n      const isMenuTitleSelectable = isMenuChildSelectable(React.createElement(MenuTitle));\n      expect(isMenuTitleSelectable).toBe(false);\n    });\n\n    it(\"should return false for MenuDivider\", () => {\n      const isMenuDividerSelectable = isMenuChildSelectable(React.createElement(MenuDivider));\n      expect(isMenuDividerSelectable).toBe(false);\n    });\n\n    it(\"should return false for a non-Menu item\", () => {\n      const isDivSelectable = isMenuChildSelectable(React.createElement(\"div\", null, \"I'm a child\"));\n      expect(isDivSelectable).toBe(false);\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Menu/Menu/utils/utils.ts",
    "content": "import { type ReactElement } from \"react\";\nimport { type MenuChild } from \"../MenuConstants\";\n\nexport function isMenuChildSelectable(child: MenuChild): boolean {\n  return !!child.type.isSelectable && !child.props.disabled;\n}\n\nexport const generateMenuItemId = (menuId: string, child: ReactElement, index: number) => {\n  return (child.props as { id: string }).id || `${menuId}-item-${index}`;\n};\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuDivider/MenuDivider.module.scss",
    "content": ".menuChildDivider {\n  width: 100%;\n  padding: 0 var(--space-8);\n}\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuDivider/MenuDivider.tsx",
    "content": "import React from \"react\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport Divider from \"../../Divider/Divider\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport styles from \"./MenuDivider.module.scss\";\n\nexport type MenuDividerProps = VibeComponentProps;\n\nconst MenuDivider = ({ className, id, \"data-testid\": dataTestId }: MenuDividerProps) => {\n  return (\n    <Divider\n      className={cx(styles.menuChildDivider, className)}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.MENU_DIVIDER, id)}\n    />\n  );\n};\n\nObject.assign(MenuDivider, {\n  isMenuChild: true\n});\n\nexport default MenuDivider;\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuGridItem/MenuGridItem.tsx",
    "content": "import React, { forwardRef, type ReactElement, useCallback, useRef } from \"react\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport { GridKeyboardNavigationContext } from \"../../GridKeyboardNavigationContext\";\nimport { useMenuGridItemNavContext } from \"./useMenuGridItemNavContext\";\nimport { useFocusGridItemByActiveStatus } from \"./useFocusGridItemByActiveStatus\";\nimport { useFocusWithin } from \"../../../hooks/useFocusWithin\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport { type CloseMenuOption } from \"../Menu/MenuConstants\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\n\nexport interface MenuGridItemProps extends VibeComponentProps {\n  /**\n   * The content of the menu grid item.\n   */\n  children?: ReactElement | ReactElement[];\n  /**\n   * If true, keyboard navigation will skip this item. This prop is also passed to the child.\n   */\n  disabled?: boolean;\n  /**\n   * A callback function to close the wrapping menu.\n   */\n  closeMenu?: (option: CloseMenuOption) => void;\n  /**\n   * The currently active index of the wrapping menu.\n   */\n  activeItemIndex?: number;\n  /**\n   * Callback function to set the active item index.\n   */\n  setActiveItemIndex?: (index: number) => void;\n  /**\n   * Function to get the next selectable index.\n   */\n  getNextSelectableIndex?: (activeItemIndex: number) => number;\n  /**\n   * Function to get the previous selectable index.\n   */\n  getPreviousSelectableIndex?: (activeItemIndex: number) => number;\n  /**\n   * The index of this menu grid item.\n   */\n  index?: number;\n  /**\n   * If true, this item is under a submenu instead of a top-level menu.\n   */\n  isUnderSubMenu?: boolean;\n  /**\n   * Callback function to open or close a submenu by its index.\n   */\n  setSubMenuIsOpenByIndex?: (index: number, isOpen: boolean) => void;\n  /**\n   * If true, event listeners will be attached to the document.\n   */\n  useDocumentEventListeners?: boolean;\n}\n\nconst MenuGridItem = forwardRef(\n  (\n    {\n      className,\n      id,\n      children,\n      index,\n      activeItemIndex = -1,\n      closeMenu,\n      getNextSelectableIndex,\n      getPreviousSelectableIndex,\n      setActiveItemIndex,\n      setSubMenuIsOpenByIndex,\n      isUnderSubMenu = false,\n      disabled = false,\n      useDocumentEventListeners = false,\n      \"data-testid\": dataTestId\n    }: MenuGridItemProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n    const childRef = useRef();\n\n    const child = children && React.Children.only(children);\n    if (!child) {\n      console.error(\n        \"MenuGridItem can accept only a single element as first level child, this element is not valid: \",\n        child\n      );\n    }\n\n    const onFocusWithinChange = useCallback(\n      (isFocusWithin: boolean) => {\n        setSubMenuIsOpenByIndex(index, isFocusWithin);\n        if (isFocusWithin) {\n          setActiveItemIndex(index);\n        }\n      },\n      [index, setActiveItemIndex, setSubMenuIsOpenByIndex]\n    );\n    const { focusWithinProps } = useFocusWithin({ onFocusWithinChange });\n\n    useFocusGridItemByActiveStatus({\n      wrapperRef: componentRef,\n      childRef,\n      activeItemIndex,\n      index,\n      useDocumentEventListeners\n    });\n\n    const keyboardContext = useMenuGridItemNavContext({\n      wrapperRef: componentRef,\n      setActiveItemIndex,\n      getPreviousSelectableIndex,\n      getNextSelectableIndex,\n      activeItemIndex,\n      isUnderSubMenu,\n      closeMenu\n    });\n\n    return (\n      <section\n        ref={mergedRef}\n        className={className}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MENU_GRID_ITEM, id)}\n        tabIndex={-1}\n        role=\"grid\"\n        {...focusWithinProps}\n      >\n        <GridKeyboardNavigationContext.Provider value={keyboardContext}>\n          {React.cloneElement(child, {\n            ...child?.props,\n            disabled,\n            ref: childRef\n          })}\n        </GridKeyboardNavigationContext.Provider>\n      </section>\n    );\n  }\n);\n\nObject.assign(MenuGridItem, {\n  isMenuChild: true,\n  isSelectable: true\n});\n\nexport default MenuGridItem;\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuGridItem/__tests__/MenuGridItem.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport MenuGridItem from \"../MenuGridItem\";\n\nconst NO_OP = () => {};\n\ndescribe(\"MenuGridItem renders correctly\", () => {\n  const FAKE_REQUIRED_PROPS = {\n    closeMenu: NO_OP,\n    setActiveItemIndex: NO_OP,\n    getNextSelectableIndex: NO_OP,\n    getPreviousSelectableIndex: NO_OP,\n    setSubMenuIsOpenByIndex: NO_OP\n  };\n\n  it(\"with a child\", () => {\n    const tree = renderer\n      .create(\n        <MenuGridItem {...FAKE_REQUIRED_PROPS}>\n          <div>Hello!</div>\n        </MenuGridItem>\n      )\n      .toJSON();\n\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with a disabled child\", () => {\n    // MenuGridItem should pass the disabled prop into DivWrapper\n    const DivWrapper = ({ disabled }) => <div disabled={disabled}>this should be disabled</div>;\n    const tree = renderer\n      .create(\n        <MenuGridItem disabled {...FAKE_REQUIRED_PROPS}>\n          <DivWrapper />\n        </MenuGridItem>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuGridItem/__tests__/MenuGridItem.test.tsx",
    "content": "import { afterEach, describe, it, expect } from \"vitest\";\nimport { cleanup, render } from \"@testing-library/react\";\nimport React from \"react\";\nimport MenuGridItem from \"../MenuGridItem\";\n\nconst NO_OP = () => {};\n\ndescribe(\"MenuGridItem\", () => {\n  const FAKE_REQUIRED_PROPS = {\n    closeMenu: NO_OP,\n    setActiveItemIndex: NO_OP,\n    getNextSelectableIndex: NO_OP,\n    getPreviousSelectableIndex: NO_OP,\n    setSubMenuIsOpenByIndex: NO_OP\n  };\n\n  afterEach(() => {\n    cleanup();\n  });\n\n  it(\"should pass the disabled prop to the child\", () => {\n    const { getByTestId } = render(\n      <MenuGridItem disabled={true} {...FAKE_REQUIRED_PROPS}>\n        <button type=\"button\" data-testid=\"my-div\">\n          Hey\n        </button>\n      </MenuGridItem>\n    );\n    const child = getByTestId(\"my-div\");\n\n    expect(child).toBeDisabled();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuGridItem/__tests__/__snapshots__/MenuGridItem.snapshot.test.jsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`MenuGridItem renders correctly > with a child 1`] = `\n<section\n  data-testid=\"menu-grid-item\"\n  onBlur={[Function]}\n  onFocus={[Function]}\n  role=\"grid\"\n  tabIndex={-1}\n>\n  <div\n    disabled={false}\n  >\n    Hello!\n  </div>\n</section>\n`;\n\nexports[`MenuGridItem renders correctly > with a disabled child 1`] = `\n<section\n  data-testid=\"menu-grid-item\"\n  onBlur={[Function]}\n  onFocus={[Function]}\n  role=\"grid\"\n  tabIndex={-1}\n>\n  <div\n    disabled={true}\n  >\n    this should be disabled\n  </div>\n</section>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuGridItem/__tests__/__snapshots__/MenuGridItem.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`MenuGridItem renders correctly > with a child 1`] = `\n<section\n  data-testid=\"menu-grid-item\"\n  onBlur={[Function]}\n  onFocus={[Function]}\n  role=\"grid\"\n  tabIndex={-1}\n>\n  <div\n    disabled={false}\n  >\n    Hello!\n  </div>\n</section>\n`;\n\nexports[`MenuGridItem renders correctly > with a disabled child 1`] = `\n<section\n  data-testid=\"menu-grid-item\"\n  onBlur={[Function]}\n  onFocus={[Function]}\n  role=\"grid\"\n  tabIndex={-1}\n>\n  <div\n    disabled={true}\n  >\n    this should be disabled\n  </div>\n</section>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuGridItem/__tests__/useFocusGridItemByActiveStatus.test.ts",
    "content": "import { vi, beforeEach, afterEach, describe, it, expect } from \"vitest\";\nimport { cleanup, renderHook } from \"@testing-library/react-hooks\";\nimport { useFocusGridItemByActiveStatus } from \"../useFocusGridItemByActiveStatus\";\n\nimport * as useLastNavigationDirectionModule from \"../../Menu/hooks/useLastNavigationDirection\";\n\ndescribe(\"useFocusGridItemByActiveStatus\", () => {\n  let element, childElement, wrapperRef, childRef;\n\n  beforeEach(() => {\n    element = document.createElement(\"div\");\n    document.body.appendChild(element);\n    vi.spyOn(element, \"blur\");\n    vi.spyOn(element, \"focus\");\n\n    childElement = document.createElement(\"input\");\n    element.appendChild(childElement);\n    vi.spyOn(childElement, \"focus\");\n\n    wrapperRef = { current: element };\n    childRef = { current: childElement };\n\n    vi.spyOn(useLastNavigationDirectionModule, \"useLastNavigationDirection\");\n  });\n\n  afterEach(() => {\n    element.remove();\n    childElement.remove();\n    cleanup();\n    vi.restoreAllMocks();\n  });\n\n  it(\"should blur the wrapper element if index != activeItemIndex\", () => {\n    renderHook(() => useFocusGridItemByActiveStatus({ index: 0, activeItemIndex: 1, wrapperRef, childRef }));\n\n    expect(element.blur).toHaveBeenCalledTimes(1);\n  });\n\n  it(\"should do nothing if useDocumentEventListeners and index != activeItemIndex\", () => {\n    renderHook(() =>\n      useFocusGridItemByActiveStatus({\n        index: 0,\n        activeItemIndex: 1,\n        wrapperRef,\n        childRef,\n        useDocumentEventListeners: true\n      })\n    );\n\n    expect(element.blur).not.toHaveBeenCalled();\n    expect(element.focus).not.toHaveBeenCalled();\n  });\n\n  it(\"should blur the wrapper element if activeItemIndex changes from the given index to a different one\", () => {\n    const props = { index: 0, activeItemIndex: 0, wrapperRef, childRef };\n    const { rerender } = renderHook(() => useFocusGridItemByActiveStatus(props));\n    expect(element.blur).not.toBeCalled();\n\n    props.activeItemIndex = props.index + 1;\n    rerender();\n\n    expect(element.blur).toHaveBeenCalledTimes(1);\n  });\n\n  it(\"should focus the child element, with current direction, when mounting and index === activeItemIndex\", () => {\n    mockLastNavigationDirection(\"some direction\");\n    renderHook(() => useFocusGridItemByActiveStatus({ index: 1, activeItemIndex: 1, wrapperRef, childRef }));\n\n    expect(childElement.focus).toHaveBeenCalledTimes(1);\n  });\n\n  it(\"should focus the child element, with current direction, when activeItemIndex changes to given index\", () => {\n    mockLastNavigationDirection(\"some direction\");\n    const props = { index: 1, activeItemIndex: 0, wrapperRef, childRef };\n    const { rerender } = renderHook(() => useFocusGridItemByActiveStatus(props));\n    expect(childElement.focus).not.toHaveBeenCalled();\n\n    props.activeItemIndex = props.index;\n    rerender();\n\n    expect(childElement.focus).toHaveBeenCalledTimes(1);\n  });\n\n  function mockLastNavigationDirection(currentDirectionValue) {\n    useLastNavigationDirectionModule.useLastNavigationDirection.mockReturnValue({\n      lastNavigationDirectionRef: { current: currentDirectionValue }\n    });\n  }\n});\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuGridItem/__tests__/useMenuGridItemNavContext.test.ts",
    "content": "import { vi, beforeEach, afterEach, describe, it, expect } from \"vitest\";\nimport { cleanup, renderHook } from \"@testing-library/react-hooks\";\nimport { NavDirections } from \"../../../../hooks/useFullKeyboardListeners\";\nimport * as GridKeyboardNavigationContextModule from \"../../../GridKeyboardNavigationContext/GridKeyboardNavigationContext\";\nimport { useMenuGridItemNavContext } from \"../useMenuGridItemNavContext\";\n\ndescribe(\"useMenuGridItemNavContext\", () => {\n  let element;\n  let elementRef;\n\n  beforeEach(() => {\n    element = document.createElement(\"div\");\n    document.body.appendChild(element);\n\n    elementRef = { current: element };\n  });\n\n  afterEach(() => {\n    element.remove();\n    cleanup();\n    vi.resetAllMocks();\n  });\n\n  describe(\"onOutboundNavigation\", () => {\n    const outBoundingElement = document.createElement(\"span\");\n\n    it(\"should call the parent GridKeyboardNavigationContext\", () => {\n      const mockedInnerUseContext = { onOutboundNavigation: vi.fn() };\n      const { result } = renderHookForTest({ mockedInnerUseContext });\n\n      result.current.onOutboundNavigation(outBoundingElement, NavDirections.UP);\n\n      expect(mockedInnerUseContext.onOutboundNavigation).toHaveBeenCalledWith(outBoundingElement, NavDirections.UP);\n    });\n\n    it(\"should set the previous item as active when navigating up\", () => {\n      const getPreviousSelectableIndex = vi.fn().mockReturnValue(10);\n      const setActiveItemIndex = vi.fn();\n      const { result } = renderHookForTest({ activeItemIndex: 15, getPreviousSelectableIndex, setActiveItemIndex });\n\n      result.current.onOutboundNavigation(outBoundingElement, NavDirections.UP);\n\n      expect(getPreviousSelectableIndex).toHaveBeenCalledTimes(1);\n      expect(getPreviousSelectableIndex).toHaveBeenCalledWith(15);\n      expect(setActiveItemIndex).toHaveBeenCalledTimes(1);\n      expect(setActiveItemIndex).toHaveBeenCalledWith(10);\n    });\n\n    it(\"should set the next item as active when navigating down\", () => {\n      const getNextSelectableIndex = vi.fn().mockReturnValue(20);\n      const setActiveItemIndex = vi.fn();\n      const { result } = renderHookForTest({ activeItemIndex: 15, getNextSelectableIndex, setActiveItemIndex });\n\n      result.current.onOutboundNavigation(outBoundingElement, NavDirections.DOWN);\n\n      expect(getNextSelectableIndex).toHaveBeenCalledTimes(1);\n      expect(getNextSelectableIndex).toHaveBeenCalledWith(15);\n      expect(setActiveItemIndex).toHaveBeenCalledTimes(1);\n      expect(setActiveItemIndex).toHaveBeenCalledWith(20);\n    });\n\n    it(\"should do nothing when not under a sub menu and pressing left\", () => {\n      const setActiveItemIndex = vi.fn();\n      const closeMenu = vi.fn();\n      const { result } = renderHookForTest({ setActiveItemIndex, closeMenu });\n\n      result.current.onOutboundNavigation(outBoundingElement, NavDirections.LEFT);\n\n      expect(setActiveItemIndex).not.toHaveBeenCalled();\n      expect(closeMenu).not.toHaveBeenCalled();\n    });\n\n    it(\"should close the sub menu and pressing left\", () => {\n      const closeMenu = vi.fn();\n      const { result } = renderHookForTest({ closeMenu, isUnderSubMenu: true });\n\n      result.current.onOutboundNavigation(outBoundingElement, NavDirections.LEFT);\n\n      expect(closeMenu).toHaveBeenCalledTimes(1);\n    });\n\n    function renderHookForTest({\n      setActiveItemIndex = vi.fn(),\n      getNextSelectableIndex = vi.fn(),\n      getPreviousSelectableIndex = vi.fn(),\n      activeItemIndex = 0,\n      isUnderSubMenu = false,\n      closeMenu = vi.fn(),\n      mockedInnerUseContext = { onOutboundNavigation: vi.fn() }\n    }) {\n      vi.spyOn(GridKeyboardNavigationContextModule, \"useGridKeyboardNavigationContext\").mockReturnValue(\n        mockedInnerUseContext\n      );\n\n      return renderHook(() =>\n        useMenuGridItemNavContext({\n          wrapperRef: elementRef,\n          setActiveItemIndex,\n          getNextSelectableIndex,\n          getPreviousSelectableIndex,\n          activeItemIndex,\n          isUnderSubMenu,\n          closeMenu\n        })\n      );\n    }\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuGridItem/useFocusGridItemByActiveStatus.tsx",
    "content": "import type React from \"react\";\nimport { useEffect, useMemo } from \"react\";\nimport { useLastNavigationDirection } from \"../Menu/hooks/useLastNavigationDirection\";\n\nexport const useFocusGridItemByActiveStatus = ({\n  wrapperRef,\n  childRef,\n  index,\n  activeItemIndex,\n  useDocumentEventListeners = false\n}: {\n  wrapperRef: React.RefObject<HTMLElement>;\n  childRef: React.RefObject<HTMLElement>;\n  index: number;\n  activeItemIndex: number;\n  useDocumentEventListeners?: boolean;\n}) => {\n  const { lastNavigationDirectionRef } = useLastNavigationDirection();\n  const isActive = useMemo(() => index === activeItemIndex, [activeItemIndex, index]);\n\n  useEffect(() => {\n    if (useDocumentEventListeners) return;\n    if (isActive) {\n      childRef.current?.focus();\n    } else {\n      wrapperRef?.current?.blur?.();\n    }\n  }, [childRef, isActive, lastNavigationDirectionRef, wrapperRef, useDocumentEventListeners]);\n};\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuGridItem/useMenuGridItemNavContext.tsx",
    "content": "import type React from \"react\";\nimport { useMemo } from \"react\";\nimport { NavDirections } from \"../../../hooks/useFullKeyboardListeners\";\nimport { useGridKeyboardNavigationContext } from \"../../GridKeyboardNavigationContext/GridKeyboardNavigationContext\";\nimport { type CloseMenuOption } from \"../Menu/MenuConstants\";\nimport { type GridElementRef } from \"../../GridKeyboardNavigationContext/GridKeyboardNavigationContextConstants\";\n\nexport const useMenuGridItemNavContext = ({\n  wrapperRef,\n  setActiveItemIndex,\n  getPreviousSelectableIndex,\n  getNextSelectableIndex,\n  activeItemIndex,\n  isUnderSubMenu,\n  closeMenu\n}: {\n  wrapperRef?: GridElementRef;\n  setActiveItemIndex?: (index: number) => void;\n  getNextSelectableIndex?: (activeItemIndex: number) => number;\n  getPreviousSelectableIndex?: (activeItemIndex: number) => number;\n  activeItemIndex?: number;\n  isUnderSubMenu?: boolean;\n  closeMenu?: (option: CloseMenuOption) => void;\n}) => {\n  /*\n   * This is an \"adapter\" between the Grid Keyboard Navigation mechanism and the Menu navigation mechanism.\n   * Currently, the two mechanisms work a bit differently.\n   * In the future, when the Menu component will use a GridKeyboardNavigationContext, this adapter shouldn't be needed anymore.\n   */\n  const innerKeyboardContext = useGridKeyboardNavigationContext([], wrapperRef);\n  const keyboardContext = useMemo(\n    () => ({\n      onOutboundNavigation: (elementRef: React.RefObject<HTMLElement>, direction: NavDirections) => {\n        innerKeyboardContext.onOutboundNavigation(elementRef, direction);\n\n        switch (direction) {\n          case NavDirections.UP:\n            return setActiveItemIndex(getPreviousSelectableIndex(activeItemIndex));\n          case NavDirections.DOWN:\n            return setActiveItemIndex(getNextSelectableIndex(activeItemIndex));\n          case NavDirections.LEFT:\n            if (isUnderSubMenu) {\n              closeMenu({});\n            }\n        }\n      }\n    }),\n    [\n      innerKeyboardContext,\n      setActiveItemIndex,\n      getPreviousSelectableIndex,\n      activeItemIndex,\n      getNextSelectableIndex,\n      isUnderSubMenu,\n      closeMenu\n    ]\n  );\n\n  return keyboardContext;\n};\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuItem/AvatarMenuItem.tsx",
    "content": "import React, { type ForwardedRef, forwardRef, useCallback } from \"react\";\nimport MenuItem, { type MenuItemProps } from \"./MenuItem\";\nimport Avatar, { type AvatarProps } from \"../../Avatar/Avatar\";\nimport type VibeComponentProps from \"../../../types/VibeComponentProps\";\n\nexport interface AvatarMenuItemProps extends VibeComponentProps {\n  /**\n   * Props passed to the avatar component.\n   */\n  avatarProps?: AvatarProps;\n  /**\n   * Props passed to the menu item component.\n   */\n  menuItemProps?: MenuItemProps;\n}\n\n/**\n * MenuItem with Avatar instead of Icon\n */\nconst AvatarMenuItem: React.FC<AvatarMenuItemProps & { isMenuChild?: boolean; isSelectable?: boolean }> = forwardRef(\n  ({ avatarProps, menuItemProps, ...embeddedMenuItemProps }, ref: ForwardedRef<HTMLElement>) => {\n    const renderAvatar = useCallback(() => <Avatar {...avatarProps} />, [avatarProps]);\n    return <MenuItem {...embeddedMenuItemProps} {...menuItemProps} icon={renderAvatar} ref={ref} />;\n  }\n);\n\nObject.assign(AvatarMenuItem, {\n  isMenuChild: true,\n  isSelectable: true\n});\n\nexport default AvatarMenuItem;\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuItem/MenuItem.module.scss",
    "content": ".title {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex-grow: 1;\n  padding-block: 1px;\n}\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuItem/MenuItem.tsx",
    "content": "import React, { type AriaAttributes, type ForwardedRef, type ReactElement, forwardRef, useMemo, useRef } from \"react\";\nimport { Tooltip, type TooltipProps } from \"@vibe/tooltip\";\nimport { type IconType, type SubIcon } from \"@vibe/icon\";\nimport { useIsOverflowing } from \"@vibe/hooks\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport { type CloseMenuOption, type MenuChild } from \"../Menu/MenuConstants\";\nimport Label from \"../../Label/Label\";\nimport styles from \"./MenuItem.module.scss\";\nimport BaseMenuItem from \"./components/BaseMenuItem/BaseMenuItem\";\nimport MenuItemIcon from \"./components/MenuItemIcon/MenuItemIcon\";\nimport { type TooltipPositions } from \"@vibe/tooltip\";\nimport { type SubmenuPosition } from \"./MenuItem.types\";\nimport { Flex } from \"@vibe/layout\";\n\nexport interface MenuItemProps extends VibeComponentProps {\n  /**\n   * The title of the menu item.\n   */\n  title?: string;\n  /**\n   * The label displayed alongside the title.\n   */\n  label?: string | React.ReactElement<typeof Label>;\n  /**\n   * The icon displayed in the menu item.\n   */\n  icon?: SubIcon;\n  /**\n   * The type of icon.\n   */\n  iconType?: IconType;\n  /**\n   * The background color of the icon.\n   */\n  iconBackgroundColor?: string;\n  /**\n   * The right icon to be displayed.\n   */\n  rightIcon?: SubIcon;\n  /**\n   * The type of right icon.\n   */\n  rightIconType?: IconType;\n  /**\n   * The background color of the right icon.\n   */\n  rightIconBackgroundColor?: string;\n  /**\n   * Class name applied to the icon wrapper.\n   */\n  rightIconWrapperClassName?: string;\n  /**\n   * If true, the menu item is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The reason for disabling the item, shown in a tooltip.\n   */\n  disableReason?: string;\n  /**\n   * If true, the menu item is selected.\n   */\n  selected?: boolean;\n  /**\n   * Callback fired when the menu item is clicked.\n   */\n  onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;\n  /**\n   * The active item index in the menu.\n   */\n  activeItemIndex?: number;\n  /**\n   * Callback to set the active item index.\n   */\n  setActiveItemIndex?: (index: number) => void;\n  /**\n   * The index of the menu item.\n   */\n  index?: number;\n  /**\n   * The key of the menu item.\n   */\n  key?: string;\n  /**\n   * If true, the parent menu is visible.\n   */\n  isParentMenuVisible?: boolean;\n  /**\n   * Callback to reset the open submenu index.\n   */\n  resetOpenSubMenuIndex?: () => void;\n  /**\n   * If true, a submenu is open.\n   */\n  hasOpenSubMenu?: boolean;\n  /**\n   * Callback to open or close a submenu by index.\n   */\n  setSubMenuIsOpenByIndex?: (index: number, isOpen: boolean) => void;\n  /**\n   * If true, document event listeners are used for handling interactions.\n   */\n  useDocumentEventListeners?: boolean;\n  /**\n   * The tooltip content for the menu item.\n   */\n  tooltipContent?: string;\n  /**\n   * The position of the tooltip.\n   */\n  tooltipPosition?: TooltipPositions;\n  /**\n   * The delay in milliseconds before the tooltip shows.\n   */\n  tooltipShowDelay?: number;\n  /**\n   * Additional props for customizing the tooltip.\n   */\n  tooltipProps?: Partial<TooltipProps>;\n  /**\n   * Callback fired when the mouse leaves the item.\n   */\n  onMouseLeave?: (event: React.MouseEvent) => void;\n  /**\n   * Callback fired when the mouse enters the item.\n   */\n  onMouseEnter?: (event: React.MouseEvent) => void;\n  /**\n   * Class name applied to the icon wrapper.\n   */\n  iconWrapperClassName?: string;\n  /**\n   * If true, the menu item starts as selected.\n   */\n  isInitialSelectedState?: boolean;\n  /**\n   * If true, the menu scrolls to ensure visibility.\n   */\n  shouldScrollMenu?: boolean;\n  /**\n   * Function to close the menu with a given option.\n   */\n  closeMenu?: (option: CloseMenuOption) => void;\n  /**\n   * Reference to the menu container.\n   */\n  menuRef?: React.RefObject<HTMLElement>;\n  /**\n   * The submenu, if applicable. Must be a single `Menu` element.\n   */\n  children?: MenuChild;\n  /**\n   * If true, enables a split menu item interaction where the main area triggers an action,\n   * while the icon button opens the submenu.\n   */\n  splitMenuItem?: boolean;\n  /**\n   * The label of the menu item for accessibility.\n   */\n  \"aria-label\"?: AriaAttributes[\"aria-label\"];\n  /**\n   * The position of a submenu relative to the menu item.\n   */\n  submenuPosition?: SubmenuPosition;\n  /**\n   * If true, automatically repositions the submenu when its content changes.\n   */\n  autoAdjustOnSubMenuContentResize?: boolean;\n}\n\nexport interface MenuItemTitleComponentProps extends Omit<MenuItemProps, \"title\"> {\n  title: ReactElement;\n  \"aria-label\": NonNullable<AriaAttributes[\"aria-label\"]>;\n}\n\nconst MenuItem = forwardRef(\n  (\n    {\n      className,\n      iconWrapperClassName,\n      rightIconWrapperClassName,\n      title = \"\",\n      label = \"\",\n      icon = \"\",\n      rightIcon = \"\",\n      rightIconType,\n      rightIconBackgroundColor,\n      iconType,\n      iconBackgroundColor,\n      disabled = false,\n      disableReason,\n      selected = false,\n      key,\n      children,\n      tooltipContent,\n      tooltipPosition = \"right\",\n      tooltipShowDelay = 300,\n      tooltipProps,\n      ...baseMenuProps\n    }: MenuItemProps | MenuItemTitleComponentProps,\n    ref: ForwardedRef<HTMLElement>\n  ) => {\n    const titleRef = useRef();\n\n    const isTitleHoveredAndOverflowing = useIsOverflowing({ ref: titleRef });\n    const shouldShowTooltip = isTitleHoveredAndOverflowing || disabled || tooltipContent;\n\n    const finalTooltipContent = useMemo(() => {\n      if (disabled) return disableReason;\n      if (tooltipContent) return tooltipContent;\n      return title;\n    }, [disableReason, disabled, title, tooltipContent]);\n\n    const renderLabel = useMemo(() => {\n      if (!label) return;\n      if (typeof label === \"string\") {\n        return <Label kind=\"line\" text={label} />;\n      }\n      if (React.isValidElement(label) && label.type === Label) {\n        return label;\n      }\n    }, [label]);\n\n    return (\n      <Tooltip\n        content={shouldShowTooltip ? finalTooltipContent : null}\n        position={tooltipPosition}\n        showDelay={tooltipShowDelay}\n        {...tooltipProps}\n      >\n        <BaseMenuItem\n          key={key}\n          ref={ref}\n          subMenu={children}\n          className={className}\n          disabled={disabled}\n          selected={selected}\n          {...baseMenuProps}\n        >\n          {Boolean(icon) && (\n            <MenuItemIcon\n              icon={icon}\n              type={iconType}\n              disabled={disabled}\n              selected={selected}\n              backgroundColor={iconBackgroundColor}\n              wrapperClassName={iconWrapperClassName}\n            />\n          )}\n          <div ref={titleRef} className={styles.title}>\n            {title}\n          </div>\n          <Flex gap=\"xs\">\n            {Boolean(rightIcon) && !children && (\n              <MenuItemIcon\n                icon={rightIcon}\n                type={rightIconType}\n                disabled={disabled}\n                selected={selected}\n                backgroundColor={rightIconBackgroundColor}\n                isRightIcon={true}\n                wrapperClassName={rightIconWrapperClassName}\n              />\n            )}\n            {renderLabel}\n          </Flex>\n        </BaseMenuItem>\n      </Tooltip>\n    );\n  }\n);\n\nObject.assign(MenuItem, {\n  isSelectable: true,\n  isMenuChild: true\n});\n\nexport default MenuItem;\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuItem/MenuItem.types.ts",
    "content": "export type SubmenuPosition = \"right\" | \"left\";\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuItem/MenuItemConstants.ts",
    "content": "export const TAB_INDEX_FOCUS_WITH_JS_ONLY = -1;\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuItem/__tests__/MenuItem.snapshot.test.tsx",
    "content": "import { vi, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport MenuItem from \"../MenuItem\";\nimport { Activity } from \"@vibe/icons\";\n\ndescribe(\"Snapshots\", () => {\n  it(\"renders correctly with empty props\", () => {\n    const tree = renderer.create(<MenuItem />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with custom class name\", () => {\n    const tree = renderer.create(<MenuItem className=\"dummy-class-name\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with title and font icon\", () => {\n    const tree = renderer.create(<MenuItem title=\"my item\" icon=\"fa fa-star\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with title and SVG icon\", () => {\n    const tree = renderer.create(<MenuItem title=\"my item\" icon={Activity} />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly when disabled\", () => {\n    const tree = renderer.create(<MenuItem title=\"my item\" disabled={true} />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly when selected\", () => {\n    const tree = renderer.create(<MenuItem title=\"my item\" selected={true} />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with a label\", () => {\n    const tree = renderer.create(<MenuItem title=\"my item\" label=\"New\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n\nvi.useFakeTimers();\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuItem/__tests__/MenuItem.test.tsx",
    "content": "import { vi, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { render, waitFor, fireEvent, act, within } from \"@testing-library/react\";\nimport MenuItem from \"../MenuItem\";\nimport Menu from \"../../Menu/Menu\";\nimport { Label } from \"../../../Label\";\n\nconst title = \"Menu Item\";\n\ndescribe(\"<MenuItem />\", () => {\n  it(\"should be able to render menu item text\", async () => {\n    const { getAllByText } = render(<MenuItem title={title} />);\n    const menuItemElement = getAllByText(title);\n    await waitFor(() => expect(menuItemElement).toBeTruthy());\n  });\n\n  it(\"should not show subMenu when MenuItem is disabled\", () => {\n    const { queryByText } = render(\n      <MenuItem disabled index={0} activeItemIndex={0} title=\"Main Item\" isParentMenuVisible hasOpenSubMenu>\n        <Menu>\n          <MenuItem title=\"Sub Item\" />\n        </Menu>\n      </MenuItem>\n    );\n\n    expect(queryByText(\"Sub Item\")).toBeFalsy();\n  });\n\n  it(\"should open the submenu on correct position when submenuPosition is left\", async () => {\n    const title = \"Main Item\";\n    const submenuTitle = \"Sub Item\";\n\n    const { queryByText, container } = render(\n      <MenuItem index={0} activeItemIndex={0} title={title} isParentMenuVisible submenuPosition=\"left\" hasOpenSubMenu>\n        <Menu>\n          <MenuItem title={submenuTitle} />\n        </Menu>\n      </MenuItem>\n    );\n    const menuItemElement = queryByText(title);\n    await act(async () => {\n      fireEvent.mouseEnter(menuItemElement);\n    });\n\n    await waitFor(() => {\n      const subMenuElement = container.querySelector(\"[data-popper-placement]\");\n      expect(subMenuElement).toBeVisible();\n      expect(subMenuElement.getAttribute(\"data-popper-placement\")).toContain(\"left\");\n    });\n  });\n\n  it(\"should open the submenu when no submenuPosition is specified\", async () => {\n    const title = \"Main Item\";\n    const submenuTitle = \"Sub Item\";\n\n    const { queryByText, container } = render(\n      <MenuItem index={0} activeItemIndex={0} title={title} isParentMenuVisible hasOpenSubMenu>\n        <Menu>\n          <MenuItem title={submenuTitle} />\n        </Menu>\n      </MenuItem>\n    );\n    const menuItemElement = queryByText(title);\n    await act(async () => {\n      fireEvent.mouseEnter(menuItemElement);\n    });\n\n    await waitFor(() => {\n      const subMenuElement = container.querySelector(\"[data-popper-placement]\");\n      expect(subMenuElement).toBeVisible();\n      expect(subMenuElement).toHaveAttribute(\"data-popper-placement\");\n    });\n  });\n\n  it(\"should render Label when pass a string\", () => {\n    const labelText = \"Label Text\";\n    const { getByText } = render(<MenuItem title={title} label={labelText} />);\n    const labelElement = getByText(labelText);\n    expect(labelElement).toBeTruthy();\n  });\n\n  it(\"should render the Label component with props when pass a component\", () => {\n    const labelText = \"Label Text\";\n    const { getByTestId } = render(\n      <MenuItem title={title} label={<Label text={labelText} color=\"dark\" kind=\"line\" />} />\n    );\n    const labelElement = getByTestId(\"label\");\n    expect(labelElement).toBeTruthy();\n    const { getAllByTestId } = within(labelElement);\n    const labelTextElement = getAllByTestId(\"text\")[0];\n    expect(labelTextElement).toHaveClass(\"colorDark\");\n    expect(labelTextElement).toHaveClass(\"kindLine\");\n  });\n\n  describe.skip(\"click\", () => {\n    it(\"should call the callback on click\", async () => {\n      const onClick = vi.fn();\n      const { getByText } = render(<MenuItem title={title} onClick={onClick} index={1} activeItemIndex={1} />);\n\n      const menuItemElement = getByText(title);\n      await act(() => {\n        fireEvent.mouseEnter(menuItemElement);\n        fireEvent.click(menuItemElement);\n      });\n\n      await waitFor(() => expect(onClick.mock.calls.length).toEqual(1));\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuItem/__tests__/__snapshots__/MenuItem.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`Snapshots > renders correctly when disabled 1`] = `\n<li\n  aria-selected={false}\n  className=\"typography primary start singleLineEllipsis text text2Normal item disabled\"\n  data-testid=\"menu-item\"\n  onClick={[Function]}\n  role=\"menuitem\"\n  tabIndex={-1}\n>\n  <div\n    className=\"title\"\n  >\n    my item\n  </div>\n  <div\n    className=\"container directionRow justifyStart alignCenter\"\n    style={\n      {\n        \"gap\": \"var(--space-4)\",\n      }\n    }\n  />\n</li>\n`;\n\nexports[`Snapshots > renders correctly when selected 1`] = `\n<li\n  aria-selected={false}\n  className=\"typography primary start singleLineEllipsis text text2Normal item selected\"\n  data-testid=\"menu-item\"\n  onClick={[Function]}\n  role=\"menuitem\"\n  tabIndex={-1}\n>\n  <div\n    className=\"title\"\n  >\n    my item\n  </div>\n  <div\n    className=\"container directionRow justifyStart alignCenter\"\n    style={\n      {\n        \"gap\": \"var(--space-4)\",\n      }\n    }\n  />\n</li>\n`;\n\nexports[`Snapshots > renders correctly with a label 1`] = `\n<li\n  aria-selected={false}\n  className=\"typography primary start singleLineEllipsis text text2Normal item\"\n  data-testid=\"menu-item\"\n  onClick={[Function]}\n  role=\"menuitem\"\n  tabIndex={-1}\n>\n  <div\n    className=\"title\"\n  >\n    my item\n  </div>\n  <div\n    className=\"container directionRow justifyStart alignCenter\"\n    style={\n      {\n        \"gap\": \"var(--space-4)\",\n      }\n    }\n  >\n    <span\n      className=\"\"\n      data-testid=\"label\"\n      data-vibe=\"Label\"\n    >\n      <span\n        className=\"typography onPrimary start singleLineEllipsis text text2Normal label kindLine colorPrimary\"\n        data-testid=\"text\"\n      >\n        <span\n          className=\"typography inherit start singleLineEllipsis text text2Normal\"\n          data-testid=\"text\"\n        >\n          New\n        </span>\n        <span\n          className=\"legWrapper\"\n        />\n      </span>\n    </span>\n  </div>\n</li>\n`;\n\nexports[`Snapshots > renders correctly with custom class name 1`] = `\n<li\n  aria-selected={false}\n  className=\"typography primary start singleLineEllipsis text text2Normal item dummy-class-name\"\n  data-testid=\"menu-item\"\n  onClick={[Function]}\n  role=\"menuitem\"\n  tabIndex={-1}\n>\n  <div\n    className=\"title\"\n  >\n    \n  </div>\n  <div\n    className=\"container directionRow justifyStart alignCenter\"\n    style={\n      {\n        \"gap\": \"var(--space-4)\",\n      }\n    }\n  />\n</li>\n`;\n\nexports[`Snapshots > renders correctly with empty props 1`] = `\n<li\n  aria-selected={false}\n  className=\"typography primary start singleLineEllipsis text text2Normal item\"\n  data-testid=\"menu-item\"\n  onClick={[Function]}\n  role=\"menuitem\"\n  tabIndex={-1}\n>\n  <div\n    className=\"title\"\n  >\n    \n  </div>\n  <div\n    className=\"container directionRow justifyStart alignCenter\"\n    style={\n      {\n        \"gap\": \"var(--space-4)\",\n      }\n    }\n  />\n</li>\n`;\n\nexports[`Snapshots > renders correctly with title and SVG icon 1`] = `\n<li\n  aria-selected={false}\n  className=\"typography primary start singleLineEllipsis text text2Normal item\"\n  data-testid=\"menu-item\"\n  onClick={[Function]}\n  role=\"menuitem\"\n  tabIndex={-1}\n>\n  <div\n    className=\"container directionRow justifyCenter alignCenter iconWrapper\"\n    style={{}}\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"18\"\n      viewBox=\"0 0 20 20\"\n      width=\"18\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M9.98296 1.97614C7.85942 1.97614 5.82285 2.81971 4.32128 4.32128C2.81971 5.82285 1.97614 7.85942 1.97614 9.98296C1.97614 12.1065 2.81971 14.1431 4.32128 15.6446C5.82285 17.1462 7.85942 17.9898 9.98296 17.9898C12.1065 17.9898 14.1431 17.1462 15.6446 15.6446C17.1462 14.1431 17.9898 12.1065 17.9898 9.98296C17.9898 7.85942 17.1462 5.82285 15.6446 4.32128C14.1431 2.81971 12.1065 1.97614 9.98296 1.97614ZM5.38194 5.38194C6.6022 4.16167 8.25724 3.47614 9.98296 3.47614C11.7087 3.47614 13.3637 4.16167 14.584 5.38194C15.8042 6.6022 16.4898 8.25724 16.4898 9.98296C16.4898 11.7087 15.8042 13.3637 14.584 14.584C13.3637 15.8042 11.7087 16.4898 9.98296 16.4898C8.25724 16.4898 6.6022 15.8042 5.38194 14.584C4.16167 13.3637 3.47614 11.7087 3.47614 9.98296C3.47614 8.25724 4.16167 6.6022 5.38194 5.38194ZM7.29283 10.7453L8.48668 7.76067L10.3736 13.1057L10.3737 13.1058C10.4523 13.3285 10.5933 13.524 10.7798 13.669C10.9663 13.814 11.1905 13.9024 11.4257 13.9237C11.661 13.945 11.8974 13.8983 12.1069 13.7892C12.3165 13.6801 12.4902 13.5131 12.6076 13.3081L12.6078 13.3079L13.8044 11.2168H15.3047C15.7189 11.2168 16.0547 10.881 16.0547 10.4668C16.0547 10.0526 15.7189 9.71676 15.3047 9.71676H13.3695C13.1005 9.71676 12.8521 9.8608 12.7185 10.0943L11.5946 12.0583L9.66458 6.59126L9.66381 6.58909C9.57982 6.35351 9.4262 6.14904 9.2233 6.0028C9.02041 5.85656 8.77785 5.77547 8.5278 5.77029C8.27775 5.76511 8.03204 5.83609 7.82327 5.9738C7.61449 6.11151 7.45253 6.30945 7.35887 6.54134L7.35886 6.54134L7.35793 6.54368L6.08869 9.71676H4.66132C4.2471 9.71676 3.91132 10.0526 3.91132 10.4668C3.91132 10.881 4.2471 11.2168 4.66132 11.2168H6.59647C6.90315 11.2168 7.17893 11.0301 7.29283 10.7453Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  </div>\n  <div\n    className=\"title\"\n  >\n    my item\n  </div>\n  <div\n    className=\"container directionRow justifyStart alignCenter\"\n    style={\n      {\n        \"gap\": \"var(--space-4)\",\n      }\n    }\n  />\n</li>\n`;\n\nexports[`Snapshots > renders correctly with title and font icon 1`] = `\n<li\n  aria-selected={false}\n  className=\"typography primary start singleLineEllipsis text text2Normal item\"\n  data-testid=\"menu-item\"\n  onClick={[Function]}\n  role=\"menuitem\"\n  tabIndex={-1}\n>\n  <div\n    className=\"container directionRow justifyCenter alignCenter iconWrapper\"\n    style={{}}\n  >\n    <span\n      aria-hidden={true}\n      className=\"icon icon noFocusStyle fa fa fa-star\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      onClick={[Function]}\n      role=\"img\"\n    />\n  </div>\n  <div\n    className=\"title\"\n  >\n    my item\n  </div>\n  <div\n    className=\"container directionRow justifyStart alignCenter\"\n    style={\n      {\n        \"gap\": \"var(--space-4)\",\n      }\n    }\n  />\n</li>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuItem/components/BaseMenuItem/BaseMenuItem.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n@import \"../../../../../styles/typography\";\n@import \"../../../../../styles/states\";\n\n.item {\n  @include smoothing-text;\n  margin: unset;\n  display: flex;\n  flex-direction: row;\n  padding: var(--space-4) var(--space-8);\n  cursor: pointer;\n  user-select: none;\n  align-items: center;\n  border: 1px solid transparent;\n  outline: none;\n\n  &.splitMenuItem {\n    padding: 0 0 0 var(--space-8);\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    color: var(--disabled-text-color);\n  }\n\n  &.focused {\n    &:not(.disabled) {\n      background-color: var(--primary-background-hover-color);\n      border-radius: var(--border-radius-small);\n\n      &:not(:hover):not(.initialSelected) {\n        @include focus-style-css();\n      }\n    }\n  }\n\n  &.selected:not(.disabled) {\n    background-color: var(--primary-selected-color);\n    border-radius: var(--border-radius-small);\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuItem/components/BaseMenuItem/BaseMenuItem.tsx",
    "content": "import React, { forwardRef, useCallback, useEffect, useRef } from \"react\";\nimport { Text } from \"@vibe/typography\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport { TAB_INDEX_FOCUS_WITH_JS_ONLY } from \"../../MenuItemConstants\";\nimport MenuItemSubMenuIcon from \"../MenuItemSubMenuIcon/MenuItemSubMenuIcon\";\nimport MenuItemSubMenu from \"../MenuItemSubMenu/MenuItemSubMenu\";\nimport { type CloseMenuOption } from \"../../../Menu/MenuConstants\";\nimport useMenuItemMouseEvents from \"../../hooks/useMenuItemMouseEvents\";\nimport useMenuItemKeyboardEvents from \"../../hooks/useMenuItemKeyboardEvents\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport useIsMouseEnter from \"../../../../../hooks/useIsMouseEnter\";\nimport styles from \"./BaseMenuItem.module.scss\";\nimport { type BaseMenuItemProps } from \"./BaseMenuItem.types\";\n\nconst BaseMenuItem = forwardRef(\n  (\n    {\n      subMenu,\n      className,\n      menuRef,\n      disabled = false,\n      selected = false,\n      onClick,\n      activeItemIndex = -1,\n      setActiveItemIndex,\n      index,\n      id,\n      isParentMenuVisible = false,\n      resetOpenSubMenuIndex,\n      hasOpenSubMenu = false,\n      setSubMenuIsOpenByIndex,\n      closeMenu,\n      useDocumentEventListeners = false,\n      isInitialSelectedState,\n      onMouseEnter,\n      onMouseLeave,\n      shouldScrollMenu,\n      \"data-testid\": dataTestId,\n      splitMenuItem = false,\n      children,\n      submenuPosition = \"right\",\n      autoAdjustOnSubMenuContentResize\n    }: BaseMenuItemProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const isActive = activeItemIndex === index;\n    const isSubMenuOpen = isActive && hasOpenSubMenu;\n    const shouldShowSubMenu = !disabled && Boolean(subMenu) && isParentMenuVisible && isSubMenuOpen;\n\n    const anchorRef = useRef(null);\n    const splitMenuItemIconButtonRef = useRef(null);\n\n    const mergedRef = useMergeRef(ref, anchorRef);\n\n    const isMouseEnterMenuItem = useIsMouseEnter({ ref: anchorRef });\n    const isMouseEnterIconButton = useIsMouseEnter({ ref: splitMenuItemIconButtonRef });\n\n    useEffect(() => {\n      const anchorElement = anchorRef.current;\n      if (!isActive || !shouldScrollMenu || !anchorElement) {\n        return;\n      }\n      if (anchorElement.scrollIntoViewIfNeeded) {\n        anchorElement.scrollIntoViewIfNeeded({ behaviour: \"smooth\" });\n        return;\n      }\n      anchorElement.scrollIntoView?.({ behavior: \"smooth\", block: \"center\" });\n    }, [isActive, shouldScrollMenu]);\n\n    useEffect(() => {\n      const anchorElement = anchorRef.current;\n      if (useDocumentEventListeners) return;\n      if (isActive) {\n        anchorElement?.focus();\n      }\n    }, [isActive, useDocumentEventListeners]);\n\n    const isMouseEnter = useMenuItemMouseEvents({\n      ref: anchorRef,\n      splitMenuItemIconButtonRef,\n      resetOpenSubMenuIndex,\n      setSubMenuIsOpenByIndex,\n      isActive,\n      setActiveItemIndex,\n      index,\n      hasChildren: Boolean(subMenu),\n      splitMenuItem\n    });\n\n    const { onClickCallback } = useMenuItemKeyboardEvents({\n      onClick,\n      disabled,\n      isActive,\n      index,\n      setActiveItemIndex,\n      hasChildren: Boolean(subMenu),\n      shouldShowSubMenu,\n      setSubMenuIsOpenByIndex,\n      menuRef,\n      isMouseEnter,\n      closeMenu,\n      useDocumentEventListeners,\n      splitMenuItem,\n      isMouseEnterMenuItem,\n      isMouseEnterIconButton\n    });\n\n    const closeSubMenu = useCallback(\n      (option: CloseMenuOption = {}) => {\n        setSubMenuIsOpenByIndex(index, false);\n        if (option.propagate) {\n          closeMenu(option);\n        }\n      },\n      [setSubMenuIsOpenByIndex, index, closeMenu]\n    );\n\n    return (\n      <Text\n        id={id}\n        element=\"li\"\n        type=\"text2\"\n        aria-haspopup={subMenu ? true : undefined}\n        aria-expanded={subMenu ? shouldShowSubMenu : undefined}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MENU_ITEM, index)}\n        className={cx(styles.item, className, {\n          [styles.disabled]: disabled,\n          [styles.focused]: isActive,\n          [styles.selected]: selected,\n          [styles.initialSelected]: isInitialSelectedState,\n          [styles.splitMenuItem]: splitMenuItem\n        })}\n        ref={mergedRef}\n        onClick={onClickCallback}\n        role=\"menuitem\"\n        aria-selected={isActive}\n        onMouseLeave={onMouseLeave}\n        onMouseEnter={onMouseEnter}\n        tabIndex={TAB_INDEX_FOCUS_WITH_JS_ONLY}\n        withoutTooltip\n      >\n        {children}\n        {Boolean(subMenu) && (\n          <>\n            <MenuItemSubMenuIcon\n              ref={splitMenuItemIconButtonRef}\n              isSplit={splitMenuItem}\n              active={shouldShowSubMenu}\n              disabled={disabled}\n            />\n            <MenuItemSubMenu\n              anchorRef={anchorRef}\n              open={shouldShowSubMenu}\n              onClose={closeSubMenu}\n              autoFocusOnMount={!useDocumentEventListeners}\n              submenuPosition={submenuPosition}\n              autoAdjustOnSubMenuContentResize={autoAdjustOnSubMenuContentResize}\n            >\n              {subMenu}\n            </MenuItemSubMenu>\n          </>\n        )}\n      </Text>\n    );\n  }\n);\n\nexport default BaseMenuItem;\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuItem/components/BaseMenuItem/BaseMenuItem.types.ts",
    "content": "import { type MenuItemProps } from \"../../MenuItem\";\nimport { type MenuChild } from \"../../../Menu/MenuConstants\";\nimport type React from \"react\";\nimport { type VibeComponentProps } from \"../../../../../types\";\n\nexport type LossMenuItemProps = Omit<\n  MenuItemProps,\n  | \"className\"\n  | \"classname\"\n  | \"iconWrapperClassName\"\n  | \"title\"\n  | \"label\"\n  | \"icon\"\n  | \"iconType\"\n  | \"iconBackgroundColor\"\n  | \"disabledReason\"\n  | \"key\"\n  | \"tooltipContent\"\n  | \"tooltipPosition\"\n  | \"tooltipShowDelay\"\n  | \"tooltipProps\"\n  | \"aria-label\"\n  | \"children\"\n>;\n\nexport interface BaseMenuItemProps extends LossMenuItemProps, VibeComponentProps {\n  /**\n   * The submenu associated with this menu item. Must be a single `Menu` element.\n   */\n  subMenu?: MenuChild;\n  /**\n   * The content of the menu item.\n   */\n  children: React.ReactNode;\n}\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuItem/components/BaseMenuItem/__tests__/BaseMenuItem.test.tsx",
    "content": "import { vi, describe, it, expect } from \"vitest\";\nimport React, { createRef } from \"react\";\nimport { render, fireEvent, screen } from \"@testing-library/react\";\nimport \"@testing-library/jest-dom\";\nimport BaseMenuItem from \"../BaseMenuItem\";\nimport useMenuItemMouseEvents from \"../../../hooks/useMenuItemMouseEvents\";\nimport {\n  mockRequestAnimationFrame,\n  restoreRequestAnimationFrameMock\n} from \"../../../../../../tests/__tests__/test-utils\";\n\nvi.mock(\"../../MenuItemSubMenu/MenuItemSubMenu\", () => ({\n  __esModule: true,\n  default: React.forwardRef(({ children }: { children: React.ReactElement }, _ref: React.ForwardedRef<HTMLElement>) =>\n    React.createElement(\"div\", { \"data-testid\": \"menu-item-sub-menu\" }, children)\n  )\n}));\n\nvi.mock(\"../../MenuItemSubMenuIcon/MenuItemSubMenuIcon\", () => ({\n  __esModule: true,\n  default: React.forwardRef(() =>\n    React.createElement(\"div\", { \"data-testid\": \"menu-item-sub-menu-icon\" }, \"Sub Menu Icon\")\n  )\n}));\n\nvi.mock(\"../../../hooks/useMenuItemMouseEvents\");\nconst mockUseMenuItemMouseEvents = vi.mocked(useMenuItemMouseEvents);\n\ndescribe(\"BaseMenuItem\", () => {\n  it(\"should render correctly with provided props\", () => {\n    const { container } = render(\n      <BaseMenuItem className=\"test-class\" id=\"test-id\">\n        <div>Child Content</div>\n      </BaseMenuItem>\n    );\n    expect(container.querySelector(\"li\")).toHaveClass(\"test-class\");\n    expect(container.querySelector(\"li\")).toHaveAttribute(\"id\", \"test-id\");\n    expect(screen.getByText(\"Child Content\")).toBeInTheDocument();\n  });\n\n  it(\"should handle click events and call onClick prop\", () => {\n    const mockOnClick = vi.fn();\n    const mockCloseMenu = vi.fn();\n\n    mockUseMenuItemMouseEvents.mockReturnValueOnce(true);\n    mockRequestAnimationFrame();\n\n    render(\n      <BaseMenuItem\n        onClick={mockOnClick}\n        setActiveItemIndex={vi.fn()}\n        setSubMenuIsOpenByIndex={vi.fn()}\n        closeMenu={mockCloseMenu}\n        activeItemIndex={0}\n        index={0}\n      >\n        <div>Clickable Content</div>\n      </BaseMenuItem>\n    );\n    fireEvent.click(screen.getByText(\"Clickable Content\"));\n    restoreRequestAnimationFrameMock();\n    expect(mockOnClick).toHaveBeenCalled();\n    expect(mockCloseMenu).toHaveBeenCalled();\n  });\n\n  it(\"should trigger onMouseEnter and onMouseLeave events\", () => {\n    const mockOnMouseEnter = vi.fn();\n    const mockOnMouseLeave = vi.fn();\n\n    const { getByText } = render(\n      <BaseMenuItem onMouseEnter={mockOnMouseEnter} onMouseLeave={mockOnMouseLeave}>\n        <div>Content</div>\n      </BaseMenuItem>\n    );\n\n    fireEvent.mouseEnter(getByText(\"Content\"));\n    expect(mockOnMouseEnter).toHaveBeenCalled();\n\n    fireEvent.mouseLeave(getByText(\"Content\"));\n    expect(mockOnMouseLeave).toHaveBeenCalled();\n  });\n\n  it(\"should conditionally render the submenu icon and submenu\", () => {\n    const { getByTestId, getByText } = render(\n      <BaseMenuItem index={1} activeItemIndex={1} subMenu={<div>SubMenu Content</div>}>\n        <div>Main Content</div>\n      </BaseMenuItem>\n    );\n\n    expect(getByTestId(\"menu-item-sub-menu\")).toBeInTheDocument();\n    expect(getByTestId(\"menu-item-sub-menu-icon\")).toBeInTheDocument();\n    expect(getByText(\"Main Content\")).toBeInTheDocument();\n  });\n\n  it(\"should focus the component when it is active\", () => {\n    const ref = createRef<HTMLDivElement>();\n    render(\n      <BaseMenuItem ref={ref} index={1} activeItemIndex={1}>\n        <div>Main Content</div>\n      </BaseMenuItem>\n    );\n\n    expect(ref.current).toHaveFocus();\n  });\n\n  it(\"should not focus the component when it is not active\", () => {\n    const ref = createRef<HTMLDivElement>();\n    render(\n      <BaseMenuItem ref={ref} index={1} activeItemIndex={0}>\n        <div>Main Content</div>\n      </BaseMenuItem>\n    );\n\n    expect(ref.current).not.toHaveFocus();\n  });\n\n  it(\"should not focus the component when using document event listeners\", () => {\n    const ref = createRef<HTMLDivElement>();\n    render(\n      <BaseMenuItem ref={ref} index={1} activeItemIndex={1} useDocumentEventListeners>\n        <div>Main Content</div>\n      </BaseMenuItem>\n    );\n\n    expect(ref.current).not.toHaveFocus();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.module.scss",
    "content": ".iconWrapper {\n  margin-inline-end: var(--space-8);\n\n  &.rightIcon {\n    margin-inline-end: 0;\n    margin-inline-start: var(--space-8);\n  }\n\n  &.withBackgroundColor {\n    border-radius: var(--space-4);\n\n    &.disabled {\n      opacity: 0.4;\n    }\n\n    .icon {\n      color: var(--text-color-on-primary);\n    }\n  }\n\n  &.disabled .icon {\n    cursor: not-allowed;\n    color: var(--disabled-text-color);\n  }\n\n  .icon {\n    color: var(--icon-color);\n\n    &.selected {\n      color: var(--primary-color);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.tsx",
    "content": "import React from \"react\";\nimport { Icon } from \"@vibe/icon\";\nimport { Flex } from \"@vibe/layout\";\nimport cx from \"classnames\";\nimport styles from \"./MenuItemIcon.module.scss\";\nimport { type MenuItemIconProps } from \"./MenuItemIcon.types\";\n\nconst MenuItemIcon = ({\n  icon,\n  isRightIcon = false,\n  type,\n  disabled,\n  selected,\n  backgroundColor,\n  wrapperClassName\n}: MenuItemIconProps) => (\n  <Flex\n    justify=\"center\"\n    className={cx(\n      styles.iconWrapper,\n      {\n        [styles.rightIcon]: isRightIcon,\n        [styles.disabled]: disabled,\n        [styles.withBackgroundColor]: !!backgroundColor\n      },\n      wrapperClassName\n    )}\n    style={{ ...(backgroundColor && { backgroundColor }) }}\n  >\n    <Icon\n      type={type || (typeof icon === \"function\" ? \"svg\" : \"font\")}\n      icon={icon}\n      className={cx(styles.icon, { [styles.selected]: !disabled && selected })}\n      ignoreFocusStyle\n      size={18}\n    />\n  </Flex>\n);\n\nexport default MenuItemIcon;\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.types.ts",
    "content": "import { type IconType, type SubIcon } from \"@vibe/icon\";\n\nexport interface MenuItemIconProps {\n  /**\n   * The icon to be displayed. Can be a string or an icon component.\n   */\n  icon?: SubIcon;\n  /**\n   * The type of icon to be used.\n   */\n  type?: IconType;\n  /**\n   * If true, the icon appears disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If true, the icon appears selected.\n   */\n  selected?: boolean;\n  /**\n   * The background color of the icon wrapper.\n   */\n  backgroundColor?: string;\n  /**\n   * Additional class name for styling the icon wrapper.\n   */\n  wrapperClassName?: string;\n  /**\n   * If true, the icon appears on the right side.\n   * @default false\n   */\n  isRightIcon?: boolean;\n}\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuItem/components/MenuItemIcon/__tests__/MenuItemIcon.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { render, screen } from \"@testing-library/react\";\nimport \"@testing-library/jest-dom\";\nimport MenuItemIcon from \"../MenuItemIcon\";\nimport { type MenuItemIconProps } from \"../MenuItemIcon.types\";\n\nfunction renderMenuItemIcon(props: Partial<MenuItemIconProps> = {}) {\n  return render(<MenuItemIcon icon=\"test-icon\" label=\"Test Icon\" {...props} />);\n}\n\ndescribe(\"MenuItemIcon\", () => {\n  it(\"should render the icon correctly\", () => {\n    const { queryByTestId } = renderMenuItemIcon();\n    expect(queryByTestId(\"icon\")).toBeInTheDocument();\n  });\n\n  it(\"should apply the disabled style if the disabled prop is true\", () => {\n    const { queryByTestId } = renderMenuItemIcon({ disabled: true });\n    const iconWrapper = queryByTestId(\"icon\").parentNode;\n    expect(iconWrapper).toHaveClass(\"disabled\");\n  });\n\n  it(\"should apply the selected style if the selected prop is true and not disabled\", () => {\n    const { queryByTestId } = renderMenuItemIcon({ selected: true });\n    screen.logTestingPlaygroundURL();\n    expect(queryByTestId(\"icon\")).toHaveClass(\"selected\");\n  });\n\n  it(\"should not apply the selected style if the icon is disabled\", () => {\n    const { queryByTestId } = renderMenuItemIcon({\n      selected: true,\n      disabled: true\n    });\n    expect(queryByTestId(\"icon\")).not.toHaveClass(\"selected\");\n  });\n\n  it(\"should set the background color if backgroundColor prop is provided\", () => {\n    const { queryByTestId } = renderMenuItemIcon({ backgroundColor: \"red\" });\n    const iconWrapper = queryByTestId(\"icon\").parentNode;\n    expect(iconWrapper).toHaveClass(\"withBackgroundColor\");\n    expect(iconWrapper).toHaveStyle(\"background-color: red\");\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuItem/components/MenuItemSubMenu/MenuItemSubMenu.tsx",
    "content": "import React, { useMemo, useRef } from \"react\";\nimport { DialogContentContainer } from \"@vibe/dialog\";\nimport { useFloating, flip, type Placement } from \"@floating-ui/react-dom\";\nimport { type MenuChild } from \"../../../Menu/MenuConstants\";\nimport { type MenuItemSubMenuProps } from \"./MenuItemSubMenu.types\";\nimport { useIsomorphicLayoutEffect } from \"@vibe/shared\";\n\nconst DEFAULT_FALLBACK_PLACEMENTS: Placement[] = [\"right-end\", \"left-start\", \"left-end\"];\n\nconst MenuItemSubMenu = ({\n  anchorRef,\n  open,\n  autoFocusOnMount,\n  onClose,\n  children,\n  submenuPosition\n}: MenuItemSubMenuProps) => {\n  const childRef = useRef<HTMLDivElement>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!autoFocusOnMount || !open || !childRef?.current) {\n      return;\n    }\n    requestAnimationFrame(() => {\n      childRef.current.focus();\n    });\n  }, [autoFocusOnMount, open]);\n\n  const placement = useMemo<Placement>(\n    () => (submenuPosition === \"left\" ? \"left-start\" : \"right-start\"),\n    [submenuPosition]\n  );\n\n  const {\n    refs,\n    floatingStyles,\n    placement: actualPlacement\n  } = useFloating({\n    placement,\n    middleware: [flip({ fallbackPlacements: DEFAULT_FALLBACK_PLACEMENTS })],\n    elements: {\n      reference: anchorRef?.current\n    }\n  });\n\n  const subMenu: MenuChild = children && React.Children.only(children);\n  if (!subMenu?.type?.isMenu) {\n    console.error(\"MenuItem can accept only Menu element as first level child, this element is not valid: \", subMenu);\n    return null;\n  }\n\n  return (\n    <div\n      style={{ ...floatingStyles, visibility: open ? \"visible\" : \"hidden\" }}\n      ref={refs.setFloating}\n      data-popper-placement={actualPlacement}\n    >\n      {subMenu && open && (\n        <DialogContentContainer>\n          {React.cloneElement(subMenu, {\n            ...subMenu?.props,\n            isVisible: open,\n            isSubMenu: true,\n            onClose,\n            ref: childRef,\n            useDocumentEventListeners: !autoFocusOnMount\n          })}\n        </DialogContentContainer>\n      )}\n    </div>\n  );\n};\n\nexport default MenuItemSubMenu;\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuItem/components/MenuItemSubMenu/MenuItemSubMenu.types.ts",
    "content": "import type React from \"react\";\nimport { type CloseMenuOption, type MenuChild } from \"../../../Menu/MenuConstants\";\nimport { type SubmenuPosition } from \"../../MenuItem.types\";\nimport { type MenuItemProps } from \"../../MenuItem\";\n\nexport interface MenuItemSubMenuProps extends Pick<MenuItemProps, \"autoAdjustOnSubMenuContentResize\"> {\n  /**\n   * Reference to the anchor element that the submenu is related to.\n   * This is used to position the submenu correctly relative to the parent menu item.\n   */\n  anchorRef: React.MutableRefObject<HTMLElement>;\n  /**\n   * Controls the visibility of the submenu. If true, the submenu is shown; otherwise, it is hidden.\n   */\n  open?: boolean;\n  /**\n   * If true, the submenu will automatically receive focus when it mounts.\n   */\n  autoFocusOnMount?: boolean;\n  /**\n   * Function to call when the submenu is requested to close.\n   * This can be triggered by user interaction or programmatically.\n   * The function may accept an optional object with a `propagate` property, which can be used to control whether the close event should also propagate up to parent menus.\n   */\n  onClose?: (option?: CloseMenuOption) => void;\n  /**\n   * The submenu content. Must be a single `Menu` component.\n   */\n  children: MenuChild;\n  /**\n   * The position of the submenu relative to its parent menu item.\n   */\n  submenuPosition?: SubmenuPosition;\n}\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuItem/components/MenuItemSubMenu/__tests__/MenuItemSubMenu.test.tsx",
    "content": "import { vi, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { render, fireEvent } from \"@testing-library/react\";\nimport \"@testing-library/jest-dom\";\nimport MenuItemSubMenu from \"../MenuItemSubMenu\";\n// import { MenuChild } from \"../../../../Menu/MenuConstants\";\nimport { type MenuProps } from \"../../../../Menu/Menu\";\n\nconst mockConsoleError = () => {\n  const originalConsoleError = console.error;\n  vi.spyOn(console, \"error\").mockImplementation((message, ...args) => {\n    if (!message.includes(\"MenuItem can accept only\")) {\n      originalConsoleError(message, ...args);\n    }\n  });\n};\n\nconst MockMenuChild = React.forwardRef(({ onClose }: MenuProps, ref: React.ForwardedRef<HTMLDivElement>) => (\n  // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n  <div data-testid=\"close-button\" onClick={() => onClose({})}>\n    <div ref={ref}>Items</div>\n  </div>\n));\nObject.assign(MockMenuChild, { isMenu: true });\n\ndescribe(\"MenuItemSubMenu\", () => {\n  it(\"should render correctly with visibility hidden when not open\", () => {\n    const mockAnchor = document.createElement(\"div\");\n    const { container } = render(\n      <MenuItemSubMenu anchorRef={{ current: mockAnchor }} open={false}>\n        <MockMenuChild />\n      </MenuItemSubMenu>\n    );\n    expect(container.firstChild).toHaveStyle(\"visibility: hidden\");\n  });\n\n  it(\"should render correctly and become visible when open is true\", () => {\n    const mockAnchor = document.createElement(\"div\");\n    const { container } = render(\n      <MenuItemSubMenu anchorRef={{ current: mockAnchor }} open>\n        <MockMenuChild />\n      </MenuItemSubMenu>\n    );\n    expect(container.firstChild).toHaveStyle(\"visibility: visible\");\n  });\n\n  it(\"should call onClose when requested to close\", () => {\n    const mockAnchor = document.createElement(\"div\");\n    const onCloseMock = vi.fn();\n    const { getByTestId } = render(\n      <MenuItemSubMenu anchorRef={{ current: mockAnchor }} open onClose={onCloseMock}>\n        <MockMenuChild />\n      </MenuItemSubMenu>\n    );\n\n    fireEvent.click(getByTestId(\"close-button\"));\n    expect(onCloseMock).toHaveBeenCalledTimes(1);\n  });\n\n  it(\"should not crash if children are not valid menu items\", () => {\n    // component prints an error message to the console when children are not valid\n    mockConsoleError();\n\n    const mockAnchor = document.createElement(\"div\");\n    const { container } = render(\n      <MenuItemSubMenu anchorRef={{ current: mockAnchor }} open>\n        <div>Invalid Child</div>\n      </MenuItemSubMenu>\n    );\n    expect(container).toBeEmptyDOMElement();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.module.scss",
    "content": ".subMenuIconWrapper {\n  margin-inline-start: var(--space-4);\n\n  .divider {\n    height: 19px;\n  }\n\n  .splitSubMenuIcon {\n    width: 18px;\n    height: 18px;\n  }\n\n  .subMenuIcon,\n  .splitSubMenuIcon {\n    color: var(--icon-color);\n\n    &.disabled {\n      cursor: not-allowed;\n      color: var(--disabled-text-color);\n    }\n  }\n\n  .splitMenuItemIconButton {\n    width: 34px;\n    height: 30px;\n\n    // Override for IconButton active color\n    --primary-selected-color: rgba(103, 104, 121, 0.1);\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.tsx",
    "content": "import React, { forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport Divider from \"../../../../Divider/Divider\";\nimport { Icon } from \"@vibe/icon\";\nimport { Flex } from \"@vibe/layout\";\nimport { IconButton } from \"@vibe/icon-button\";\nimport { DropdownChevronRight } from \"@vibe/icons\";\nimport styles from \"./MenuItemSubMenuIcon.module.scss\";\nimport { type MenuItemSubMenuIconProps } from \"./MenuItemSubMenuIcon.types\";\n\nconst MenuItemSubMenuIcon = forwardRef((props: MenuItemSubMenuIconProps, ref: React.ForwardedRef<HTMLDivElement>) => (\n  <Flex justify=\"center\" className={styles.subMenuIconWrapper}>\n    {props.isSplit === true ? (\n      <>\n        <Divider direction=\"vertical\" className={styles.divider} />\n        <IconButton\n          icon={DropdownChevronRight}\n          className={styles.splitMenuItemIconButton}\n          kind=\"tertiary\"\n          size={null} // Customizing size via className\n          iconClassName={cx(styles.splitSubMenuIcon, { [styles.disabled]: props.disabled })}\n          tabIndex={-1}\n          ref={ref}\n          active={props.active}\n          disabled={props.disabled}\n        />\n      </>\n    ) : (\n      <Icon\n        icon={DropdownChevronRight}\n        label={props.label}\n        className={cx(styles.subMenuIcon, { [styles.disabled]: props.disabled })}\n        ignoreFocusStyle\n        size={18}\n      />\n    )}\n  </Flex>\n));\n\nexport default MenuItemSubMenuIcon;\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.types.ts",
    "content": "export interface SplitMenuItemSubMenuIconProps {\n  /**\n   * Determines whether the submenu icon is split from the main menu item.\n   * When true, clicking the main menu item and the submenu icon trigger different actions.\n   */\n  isSplit?: true;\n  /**\n   * Indicates if the split submenu is currently active.\n   */\n  active?: boolean;\n  /**\n   * Whether the split submenu icon is disabled.\n   */\n  disabled?: boolean;\n}\n\nexport interface SimpleMenuItemSubMenuIconProps {\n  /**\n   * Determines whether the submenu icon is part of the main menu item.\n   * When false, the submenu is accessed by interacting with the main menu item itself.\n   */\n  isSplit?: false;\n  /**\n   * Label for the submenu icon, used for accessibility.\n   */\n  label?: string;\n  /**\n   * Whether the submenu icon is disabled.\n   */\n  disabled?: boolean;\n}\n\nexport type MenuItemSubMenuIconProps = SimpleMenuItemSubMenuIconProps | SplitMenuItemSubMenuIconProps;\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/__tests__/MenuItemSubMenuIcon.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { render } from \"@testing-library/react\";\nimport \"@testing-library/jest-dom\";\nimport MenuItemSubMenuIcon from \"../MenuItemSubMenuIcon\";\nimport { type MenuItemSubMenuIconProps } from \"../MenuItemSubMenuIcon.types\";\n\nfunction renderMenuItemSubMenuIcon(props: Partial<MenuItemSubMenuIconProps> & { ref?: React.Ref<HTMLDivElement> }) {\n  return render(<MenuItemSubMenuIcon {...props} />);\n}\n\ndescribe(\"MenuItemSubMenuIcon\", () => {\n  it(\"should render the split icon button when isSplit is true\", () => {\n    const { getByRole } = renderMenuItemSubMenuIcon({ isSplit: true });\n    expect(getByRole(\"button\")).toBeInTheDocument();\n  });\n\n  it(\"should render a simple icon when isSplit is false\", () => {\n    const { queryByRole, getByTestId, getByLabelText } = renderMenuItemSubMenuIcon({\n      isSplit: false,\n      label: \"SubMenu\"\n    });\n    expect(queryByRole(\"button\")).not.toBeInTheDocument();\n    expect(getByTestId(\"icon\")).toBeInTheDocument();\n    expect(getByLabelText(\"SubMenu\")).toBeInTheDocument();\n  });\n\n  it(\"should apply disabled styles when disabled is true\", () => {\n    const { getByRole } = renderMenuItemSubMenuIcon({ isSplit: true, disabled: true });\n    expect(getByRole(\"button\")).toHaveAttribute(\"aria-disabled\", \"true\");\n  });\n\n  it(\"should forward ref to the button when isSplit is true\", () => {\n    const ref = React.createRef<HTMLDivElement>();\n    renderMenuItemSubMenuIcon({ isSplit: true, ref });\n    expect(ref.current.tagName).toBe(\"BUTTON\");\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuItem/hooks/useMenuItemKeyboardEvents.ts",
    "content": "import type React from \"react\";\nimport { useCallback } from \"react\";\nimport useKeyEvent from \"../../../../hooks/useKeyEvent\";\nimport { keyCodes } from \"../../../../constants\";\nimport { type CloseMenuOption } from \"../../Menu/MenuConstants\";\n\nconst KEYS = [keyCodes.ENTER, keyCodes.RIGHT_ARROW];\n\nexport default function useMenuItemKeyboardEvents({\n  onClick,\n  disabled,\n  isActive,\n  index,\n  setActiveItemIndex,\n  hasChildren,\n  shouldShowSubMenu,\n  setSubMenuIsOpenByIndex,\n  menuRef,\n  isMouseEnter,\n  closeMenu,\n  useDocumentEventListeners,\n  splitMenuItem,\n  isMouseEnterMenuItem,\n  isMouseEnterIconButton\n}: {\n  onClick: (event: React.MouseEvent | React.KeyboardEvent) => void;\n  disabled: boolean;\n  isActive: boolean;\n  index: number;\n  hasChildren: boolean;\n  shouldShowSubMenu: boolean;\n  setSubMenuIsOpenByIndex: (index: number, isOpen: boolean) => void;\n  setActiveItemIndex: (index: number) => void;\n  menuRef: React.RefObject<HTMLElement>;\n  isMouseEnter: boolean;\n  closeMenu: (option: CloseMenuOption) => void;\n  useDocumentEventListeners: boolean;\n  splitMenuItem?: boolean;\n  isMouseEnterMenuItem?: boolean;\n  isMouseEnterIconButton?: boolean;\n}) {\n  const onClickCallback = useCallback(\n    (event: React.MouseEvent | React.KeyboardEvent) => {\n      if (!isActive && !isMouseEnter) return;\n      if (!setActiveItemIndex || !setSubMenuIsOpenByIndex) {\n        console.error(\"MenuItem must be a first level child of a menu\");\n        return;\n      }\n\n      const isKeyEvent = event instanceof KeyboardEvent;\n\n      if (isActive && hasChildren) {\n        setActiveItemIndex(index);\n        if (!splitMenuItem || isMouseEnterIconButton) {\n          setSubMenuIsOpenByIndex(index, true);\n          return;\n        }\n      }\n\n      if (isKeyEvent && splitMenuItem) {\n        setSubMenuIsOpenByIndex(index, true);\n      }\n\n      if (shouldShowSubMenu) return;\n\n      const clickCallback = () => {\n        event.preventDefault();\n        onClick(event);\n        closeMenu({ propagate: true });\n      };\n\n      if (isKeyEvent && onClick && !disabled && isActive) {\n        if ((event as React.KeyboardEvent).key === \"ArrowRight\") {\n          return;\n        }\n        clickCallback();\n      }\n\n      if (!isKeyEvent && onClick && !disabled && isMouseEnter) {\n        if (!isActive) {\n          setActiveItemIndex(index);\n          if (hasChildren) {\n            setSubMenuIsOpenByIndex(index, true);\n          }\n        }\n\n        if ((splitMenuItem && isMouseEnterMenuItem && !isMouseEnterIconButton) || !hasChildren) {\n          // wait for background of menu item to change before trigger click\n          requestAnimationFrame(() => {\n            requestAnimationFrame(() => {\n              clickCallback();\n            });\n          });\n        }\n      }\n    },\n    [\n      isActive,\n      isMouseEnter,\n      setActiveItemIndex,\n      setSubMenuIsOpenByIndex,\n      hasChildren,\n      splitMenuItem,\n      shouldShowSubMenu,\n      onClick,\n      disabled,\n      index,\n      closeMenu,\n      isMouseEnterMenuItem,\n      isMouseEnterIconButton\n    ]\n  );\n\n  const onKeyboardClick = useCallback((event: React.KeyboardEvent) => onClickCallback(event), [onClickCallback]);\n\n  useKeyEvent({\n    keys: KEYS,\n    callback: onKeyboardClick,\n    ref: useDocumentEventListeners ? undefined : menuRef\n  });\n\n  return { onClickCallback };\n}\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuItem/hooks/useMenuItemMouseEvents.ts",
    "content": "import { type RefObject } from \"react\";\nimport useIsMouseEnter from \"../../../../hooks/useIsMouseEnter\";\nimport usePrevious from \"../../../../hooks/usePrevious\";\nimport { useIsomorphicLayoutEffect } from \"@vibe/shared\";\n\nexport default function useMenuItemMouseEvents({\n  ref,\n  resetOpenSubMenuIndex,\n  setSubMenuIsOpenByIndex,\n  isActive,\n  setActiveItemIndex,\n  index,\n  hasChildren,\n  splitMenuItemIconButtonRef,\n  splitMenuItem = false\n}: {\n  ref: RefObject<HTMLElement>;\n  resetOpenSubMenuIndex: () => void;\n  setSubMenuIsOpenByIndex: (index: number, isOpen: boolean) => void;\n  isActive: boolean;\n  setActiveItemIndex: (index: number) => void;\n  index: number;\n  hasChildren: boolean;\n  splitMenuItemIconButtonRef?: React.RefObject<HTMLElement>;\n  splitMenuItem?: boolean;\n}) {\n  const isMouseEnter = useIsMouseEnter({ ref });\n  const isMouseEnterOnIconButton = useIsMouseEnter({ ref: splitMenuItemIconButtonRef });\n  const prevIsMouseEnter = usePrevious(isMouseEnter);\n  const prevIsMouseEnterOnIconButton = usePrevious(isMouseEnterOnIconButton);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!isMouseEnterOnIconButton) return;\n\n    if (isMouseEnterOnIconButton === prevIsMouseEnterOnIconButton) return;\n\n    if (isActive) {\n      setSubMenuIsOpenByIndex(index, true);\n    } else {\n      resetOpenSubMenuIndex();\n    }\n  }, [\n    setSubMenuIsOpenByIndex,\n    index,\n    isMouseEnterOnIconButton,\n    prevIsMouseEnterOnIconButton,\n    isActive,\n    resetOpenSubMenuIndex\n  ]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!isMouseEnter) return;\n    if (isMouseEnter === prevIsMouseEnter) return;\n\n    if (!setSubMenuIsOpenByIndex || !resetOpenSubMenuIndex) {\n      console.error(\"MenuItem must be a first level child of a menu\");\n      return;\n    }\n\n    resetOpenSubMenuIndex();\n\n    if (!isActive && !splitMenuItem) {\n      setActiveItemIndex(index);\n      if (hasChildren) {\n        setSubMenuIsOpenByIndex(index, true);\n      } else {\n        resetOpenSubMenuIndex();\n      }\n    }\n\n    if (isActive && hasChildren) {\n      setSubMenuIsOpenByIndex(index, !!isMouseEnter);\n    }\n\n    if (!isActive && splitMenuItem) {\n      setActiveItemIndex(index);\n\n      if (isMouseEnterOnIconButton) {\n        setSubMenuIsOpenByIndex(index, true);\n      }\n    }\n  }, [\n    resetOpenSubMenuIndex,\n    prevIsMouseEnter,\n    isMouseEnter,\n    isMouseEnterOnIconButton,\n    setSubMenuIsOpenByIndex,\n    isActive,\n    setActiveItemIndex,\n    index,\n    hasChildren,\n    splitMenuItem\n  ]);\n\n  return isMouseEnter;\n}\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuItemButton/MenuItemButton.module.scss",
    "content": ".itemButton {\n  margin: unset;\n  display: flex;\n  flex-direction: row;\n  padding: var(--space-4) 0;\n  align-items: center;\n}\n\n.itemButton .buttonComponent {\n  width: 100%;\n}\n\n.itemButton .buttonComponent .content {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuItemButton/MenuItemButton.tsx",
    "content": "import cx from \"classnames\";\nimport React, { useRef } from \"react\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport { Button, type ButtonType } from \"@vibe/button\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport useMenuItemMouseEvents from \"../MenuItem/hooks/useMenuItemMouseEvents\";\nimport useMenuItemKeyboardEvents from \"../MenuItem/hooks/useMenuItemKeyboardEvents\";\nimport { type VibeComponentProps, type ElementContent } from \"../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport { Text } from \"@vibe/typography\";\nimport styles from \"./MenuItemButton.module.scss\";\nimport { type TooltipPositions } from \"@vibe/tooltip\";\n\nexport interface MenuItemButtonProps extends VibeComponentProps {\n  /**\n   * The style variant of the button.\n   */\n  kind?: ButtonType;\n  /**\n   * Icon displayed on the left side of the button.\n   */\n  leftIcon?: SubIcon;\n  /**\n   * Icon displayed on the right side of the button.\n   */\n  rightIcon?: SubIcon;\n  /**\n   * The index of the menu item in the menu.\n   */\n  index?: number;\n  /**\n   * The index of the currently active menu item.\n   */\n  activeItemIndex?: number;\n  /**\n   * If true, the button is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The reason why the button is disabled, displayed as a tooltip.\n   */\n  disableReason?: string;\n  /**\n   * Callback fired when the button is clicked.\n   */\n  onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;\n  /**\n   * The position of the tooltip.\n   */\n  tooltipPosition?: TooltipPositions;\n  /**\n   * The delay in milliseconds before the tooltip appears.\n   */\n  tooltipShowDelay?: number;\n  /**\n   * Callback to reset the open submenu index.\n   */\n  resetOpenSubMenuIndex?: () => void;\n  /**\n   * Callback to open or close a submenu by index.\n   */\n  setSubMenuIsOpenByIndex?: (index: number, isOpen: boolean) => void;\n  /**\n   * Callback to set the active item index.\n   */\n  setActiveItemIndex?: (index: number) => void;\n  /**\n   * Reference to the menu container.\n   */\n  menuRef?: React.RefObject<HTMLElement>;\n  /**\n   * Function to close the menu.\n   */\n  closeMenu?: () => void;\n  /**\n   * If true, event listeners are added at the document level.\n   */\n  useDocumentEventListeners?: boolean;\n  /**\n   * The content of the button.\n   */\n  children?: ElementContent | ElementContent[];\n}\n\nconst MenuItemButton = ({\n  className,\n  kind = \"primary\",\n  leftIcon = null,\n  rightIcon = null,\n  disabled = false,\n  disableReason,\n  index,\n  activeItemIndex = -1,\n  onClick,\n  tooltipPosition = \"right\",\n  tooltipShowDelay = 300,\n  children,\n  resetOpenSubMenuIndex,\n  setSubMenuIsOpenByIndex,\n  setActiveItemIndex,\n  menuRef,\n  closeMenu,\n  useDocumentEventListeners,\n  id,\n  \"data-testid\": dataTestId\n}: MenuItemButtonProps) => {\n  const ref = useRef(null);\n  const referenceElementRef = useRef(null);\n  const mergedRef = useMergeRef(ref, referenceElementRef);\n\n  const shouldShowTooltip = disabled && disableReason;\n  const tooltipContent = disableReason;\n\n  const isActive = activeItemIndex === index;\n\n  const isMouseEnter = useMenuItemMouseEvents({\n    ref,\n    resetOpenSubMenuIndex,\n    setSubMenuIsOpenByIndex,\n    isActive,\n    setActiveItemIndex,\n    index,\n    hasChildren: false\n  });\n\n  const { onClickCallback } = useMenuItemKeyboardEvents({\n    onClick,\n    disabled,\n    isActive,\n    index,\n    setActiveItemIndex,\n    hasChildren: false,\n    shouldShowSubMenu: false,\n    setSubMenuIsOpenByIndex,\n    menuRef,\n    isMouseEnter,\n    closeMenu,\n    useDocumentEventListeners\n  });\n\n  return (\n    <Tooltip\n      content={shouldShowTooltip ? tooltipContent : null}\n      position={tooltipPosition}\n      showDelay={tooltipShowDelay}\n    >\n      <Text\n        type=\"text2\"\n        element=\"li\"\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MENU_ITEM_BUTTON, id)}\n        id={id}\n        className={cx(styles.itemButton, className)}\n        ref={mergedRef}\n        role=\"menuitem\"\n        aria-current={isActive}\n      >\n        <Button\n          className={styles.buttonComponent}\n          active={isActive}\n          disabled={disabled}\n          leftIcon={leftIcon}\n          rightIcon={rightIcon}\n          onClick={onClickCallback}\n          kind={kind}\n          size=\"small\"\n          blurOnMouseUp={false}\n        >\n          <div className={styles.content}>{children}</div>\n        </Button>\n      </Text>\n    </Tooltip>\n  );\n};\n\nObject.assign(MenuItemButton, {\n  isSelectable: true,\n  isMenuChild: true\n});\n\nexport default MenuItemButton;\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuItemButton/__tests__/MenuItemButton.test.tsx",
    "content": "import { vi, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { fireEvent, render, act } from \"@testing-library/react\";\nimport renderer from \"react-test-renderer\";\nimport MenuItemButton from \"../MenuItemButton\";\n\ndescribe(\"Snapshots\", () => {\n  it(\"renders correctly with empty props\", () => {\n    const tree = renderer.create(<MenuItemButton />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with custom class name\", () => {\n    const tree = renderer.create(<MenuItemButton className=\"dummy-class-name\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with title and icon\", () => {\n    const tree = renderer.create(<MenuItemButton icon=\"fa fa-star\">my item</MenuItemButton>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly when disabled\", () => {\n    const tree = renderer.create(<MenuItemButton disabled={true}>my item</MenuItemButton>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly when selected\", () => {\n    const tree = renderer.create(<MenuItemButton selected={true}>my item</MenuItemButton>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n\nvi.useFakeTimers();\nconst itemName = \"My item\";\n\nconst renderComponent = ({ ...props } = {}) => {\n  return render(<MenuItemButton title={itemName} {...props} />);\n};\n\ndescribe.skip(\"<MenuItemButton />\", () => {\n  it(\"calls onClick when clicking on the menu item\", () => {\n    const onClickMock = vi.fn();\n    const menuItemComponent = renderComponent({\n      onClick: onClickMock\n    });\n\n    const item = menuItemComponent.getByText(itemName);\n\n    act(() => {\n      fireEvent.mouseOver(item);\n      vi.advanceTimersByTime(1000);\n      fireEvent.click(item);\n    });\n\n    vi.advanceTimersByTime(1000);\n    expect(onClickMock.mock.calls.length).toBe(1);\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuItemButton/__tests__/__snapshots__/MenuItemButton.test.jsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`Snapshots > renders correctly when disabled 1`] = `\n<li\n  aria-current={false}\n  className=\"typography primary start singleLineEllipsis text text2Normal itemButton\"\n  data-testid=\"menu-item-button\"\n  role=\"menuitem\"\n>\n  <button\n    aria-busy={false}\n    aria-disabled={true}\n    className=\"buttonComponent button sizeSmall kindPrimary colorPrimary disabled\"\n    data-testid=\"button\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    tabIndex={-1}\n    type=\"button\"\n  >\n    <div\n      className=\"content\"\n    >\n      my item\n    </div>\n  </button>\n</li>\n`;\n\nexports[`Snapshots > renders correctly when selected 1`] = `\n<li\n  aria-current={false}\n  className=\"typography primary start singleLineEllipsis text text2Normal itemButton\"\n  data-testid=\"menu-item-button\"\n  role=\"menuitem\"\n>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    className=\"buttonComponent button sizeSmall kindPrimary colorPrimary\"\n    data-testid=\"button\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    type=\"button\"\n  >\n    <div\n      className=\"content\"\n    >\n      my item\n    </div>\n  </button>\n</li>\n`;\n\nexports[`Snapshots > renders correctly with custom class name 1`] = `\n<li\n  aria-current={false}\n  className=\"typography primary start singleLineEllipsis text text2Normal itemButton dummy-class-name\"\n  data-testid=\"menu-item-button\"\n  role=\"menuitem\"\n>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    className=\"buttonComponent button sizeSmall kindPrimary colorPrimary\"\n    data-testid=\"button\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    type=\"button\"\n  >\n    <div\n      className=\"content\"\n    />\n  </button>\n</li>\n`;\n\nexports[`Snapshots > renders correctly with empty props 1`] = `\n<li\n  aria-current={false}\n  className=\"typography primary start singleLineEllipsis text text2Normal itemButton\"\n  data-testid=\"menu-item-button\"\n  role=\"menuitem\"\n>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    className=\"buttonComponent button sizeSmall kindPrimary colorPrimary\"\n    data-testid=\"button\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    type=\"button\"\n  >\n    <div\n      className=\"content\"\n    />\n  </button>\n</li>\n`;\n\nexports[`Snapshots > renders correctly with title and icon 1`] = `\n<li\n  aria-current={false}\n  className=\"typography primary start singleLineEllipsis text text2Normal itemButton\"\n  data-testid=\"menu-item-button\"\n  role=\"menuitem\"\n>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    className=\"buttonComponent button sizeSmall kindPrimary colorPrimary\"\n    data-testid=\"button\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    type=\"button\"\n  >\n    <div\n      className=\"content\"\n    >\n      my item\n    </div>\n  </button>\n</li>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuItemButton/__tests__/__snapshots__/MenuItemButton.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`Snapshots > renders correctly when disabled 1`] = `\n<li\n  aria-current={false}\n  className=\"typography primary start singleLineEllipsis text text2Normal itemButton\"\n  data-testid=\"menu-item-button\"\n  role=\"menuitem\"\n>\n  <button\n    aria-busy={false}\n    aria-disabled={true}\n    className=\"buttonComponent button sizeSmall kindPrimary colorPrimary disabled\"\n    data-testid=\"button\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    tabIndex={-1}\n    type=\"button\"\n  >\n    <div\n      className=\"content\"\n    >\n      my item\n    </div>\n  </button>\n</li>\n`;\n\nexports[`Snapshots > renders correctly when selected 1`] = `\n<li\n  aria-current={false}\n  className=\"typography primary start singleLineEllipsis text text2Normal itemButton\"\n  data-testid=\"menu-item-button\"\n  role=\"menuitem\"\n>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    className=\"buttonComponent button sizeSmall kindPrimary colorPrimary\"\n    data-testid=\"button\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    type=\"button\"\n  >\n    <div\n      className=\"content\"\n    >\n      my item\n    </div>\n  </button>\n</li>\n`;\n\nexports[`Snapshots > renders correctly with custom class name 1`] = `\n<li\n  aria-current={false}\n  className=\"typography primary start singleLineEllipsis text text2Normal itemButton dummy-class-name\"\n  data-testid=\"menu-item-button\"\n  role=\"menuitem\"\n>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    className=\"buttonComponent button sizeSmall kindPrimary colorPrimary\"\n    data-testid=\"button\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    type=\"button\"\n  >\n    <div\n      className=\"content\"\n    />\n  </button>\n</li>\n`;\n\nexports[`Snapshots > renders correctly with empty props 1`] = `\n<li\n  aria-current={false}\n  className=\"typography primary start singleLineEllipsis text text2Normal itemButton\"\n  data-testid=\"menu-item-button\"\n  role=\"menuitem\"\n>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    className=\"buttonComponent button sizeSmall kindPrimary colorPrimary\"\n    data-testid=\"button\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    type=\"button\"\n  >\n    <div\n      className=\"content\"\n    />\n  </button>\n</li>\n`;\n\nexports[`Snapshots > renders correctly with title and icon 1`] = `\n<li\n  aria-current={false}\n  className=\"typography primary start singleLineEllipsis text text2Normal itemButton\"\n  data-testid=\"menu-item-button\"\n  role=\"menuitem\"\n>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    className=\"buttonComponent button sizeSmall kindPrimary colorPrimary\"\n    data-testid=\"button\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    type=\"button\"\n  >\n    <div\n      className=\"content\"\n    >\n      my item\n    </div>\n  </button>\n</li>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuTitle/MenuTitle.module.scss",
    "content": "@import \"../../../styles/typography\";\n\n.title {\n  @include smoothing-text;\n  padding-block: 1px;\n}\n\n.titleCaption {\n  color: var(--icon-color);\n  margin: var(--space-8) 0;\n}\n\n.titleCaptionCenter {\n  display: flex;\n  flex-basis: 100%;\n  align-items: center;\n}\n\n.titleCaptionBottom,\n.titleCaptionTop {\n  padding-inline-start: var(--space-8);\n}\n\n.titleCaptionBottom {\n  padding-bottom: var(--space-8);\n}\n\n.titleCaptionCenter::before,\n.titleCaptionCenter::after {\n  content: \"\";\n  flex-grow: 1;\n  background-color: var(--ui-border-color);\n  height: 1px;\n  font-size: 0;\n  line-height: 0;\n  margin: 0 var(--space-8);\n}\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuTitle/MenuTitle.tsx",
    "content": "import React from \"react\";\nimport cx from \"classnames\";\nimport { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"@vibe/shared\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport { Text } from \"@vibe/typography\";\nimport { type MenuTitleCaptionPosition } from \"./MenuTitle.type\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport styles from \"./MenuTitle.module.scss\";\n\nexport interface MenuTitleProps extends VibeComponentProps {\n  /**\n   * The caption text displayed alongside the title.\n   */\n  caption?: string | React.ReactNode;\n  /**\n   * The position of the caption relative to the title.\n   */\n  captionPosition?: MenuTitleCaptionPosition;\n}\n\nconst MenuTitle = ({\n  className,\n  caption = \"\",\n  captionPosition = \"bottom\",\n  id,\n  \"data-testid\": dataTestId\n}: MenuTitleProps) => {\n  const renderCaptionIfNeeded = () => {\n    if (caption) {\n      return (\n        <label\n          className={cx(styles.titleCaption, getStyle(styles, camelCase(\"title__caption--\" + captionPosition)))}\n          id={id}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.MENU_TITLE_CAPTION, id)}\n        >\n          {caption}\n        </label>\n      );\n    }\n  };\n  return (\n    <Text\n      color=\"secondary\"\n      type=\"text2\"\n      className={cx(styles.title, className)}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.MENU_TITLE, id)}\n    >\n      {renderCaptionIfNeeded()}\n    </Text>\n  );\n};\n\nObject.assign(MenuTitle, {\n  isMenuChild: true\n});\n\nexport default MenuTitle;\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuTitle/MenuTitle.type.ts",
    "content": "export type MenuTitleCaptionPosition = \"top\" | \"bottom\" | \"center\";\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuTitle/__tests__/MenuTitle.test.tsx",
    "content": "import { it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport MenuTitle from \"../MenuTitle\";\n\nit(\"renders correctly with empty props\", () => {\n  const tree = renderer.create(<MenuTitle />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n\nit(\"renders correctly with custom class name\", () => {\n  const tree = renderer.create(<MenuTitle className=\"dummy-class-name\" />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n\nit(\"renders correctly with caption\", () => {\n  const tree = renderer.create(<MenuTitle caption=\"my title\" />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "packages/core/src/components/Menu/MenuTitle/__tests__/__snapshots__/MenuTitle.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`renders correctly with caption 1`] = `\n<div\n  className=\"typography secondary start singleLineEllipsis text text2Normal title\"\n  data-testid=\"menu-title\"\n>\n  <label\n    className=\"titleCaption titleCaptionBottom\"\n    data-testid=\"menu-title-caption\"\n  >\n    my title\n  </label>\n</div>\n`;\n\nexports[`renders correctly with custom class name 1`] = `\n<div\n  className=\"typography secondary start singleLineEllipsis text text2Normal title dummy-class-name\"\n  data-testid=\"menu-title\"\n/>\n`;\n\nexports[`renders correctly with empty props 1`] = `\n<div\n  className=\"typography secondary start singleLineEllipsis text text2Normal title\"\n  data-testid=\"menu-title\"\n/>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Menu/index.ts",
    "content": "export { default as Menu, type MenuProps } from \"./Menu/Menu\";\nexport { default as MenuItem, type MenuItemProps } from \"./MenuItem/MenuItem\";\nexport { default as MenuItemButton, type MenuItemButtonProps } from \"./MenuItemButton/MenuItemButton\";\nexport { default as MenuDivider, type MenuDividerProps } from \"./MenuDivider/MenuDivider\";\nexport { default as MenuTitle, type MenuTitleProps } from \"./MenuTitle/MenuTitle\";\nexport { default as MenuGridItem, type MenuGridItemProps } from \"./MenuGridItem/MenuGridItem\";\n\nexport * from \"./MenuTitle/MenuTitle.type\";\n"
  },
  {
    "path": "packages/core/src/components/MenuButton/MenuButton.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n@import \"../../styles/typography\";\n@import \"../../styles/states\";\n\n.wrapper {\n  @include reset-button();\n  border-radius: var(--border-radius-small);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: transform var(--motion-productive-short) var(--motion-timing-transition);\n  color: var(--primary-text-color);\n  @include focus-style();\n}\n\n.wrapper:focus,\n.wrapper:hover {\n  background-color: var(--primary-background-hover-color);\n}\n\n.wrapper:active {\n  transform: scale(0.95);\n}\n\n.active {\n  background-color: var(--primary-selected-color);\n}\n\n.active:focus {\n  background-color: var(--primary-selected-color);\n}\n\n.active:hover {\n  background-color: var(--primary-selected-color);\n}\n\n.sizeXxs {\n  width: 16px;\n  height: 16px;\n  @include vibe-text(text2, normal);\n  @include smoothing-text;\n}\n\n.sizeXs {\n  width: 24px;\n  height: 24px;\n  @include vibe-text(text1, normal);\n  @include smoothing-text;\n}\n\n.sizeSmall {\n  width: 32px;\n  height: 32px;\n  @include vibe-text(text1, normal);\n  @include smoothing-text;\n}\n\n.sizeMedium {\n  width: 40px;\n  height: 40px;\n  @include vibe-heading(h3, normal);\n}\n\n.sizeLarge {\n  width: 48px;\n  height: 48px;\n  @include vibe-heading(h2, normal);\n}\n\n.disabled {\n  border-color: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.disabled:hover {\n  background-color: transparent;\n}\n\n.text {\n  width: 100%;\n}\n\n.innerText {\n  margin: 0 var(--space-8);\n}\n"
  },
  {
    "path": "packages/core/src/components/MenuButton/MenuButton.tsx",
    "content": "import React, { forwardRef, useCallback, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { camelCase } from \"es-toolkit\";\nimport { isForwardRef } from \"react-is\";\nimport { Dialog, type DialogEvent, DialogContentContainer } from \"@vibe/dialog\";\nimport {\n  type DialogOffset,\n  type DialogPosition,\n  type DialogSize,\n  type DialogStartingEdge,\n  type DialogTriggerEvent\n} from \"@vibe/dialog\";\nimport { Tooltip, type TooltipProps } from \"@vibe/tooltip\";\nimport { useIsomorphicLayoutEffect, useMergeRef, NOOP, getStyle } from \"@vibe/shared\";\n\nimport { type ElementContent, type VibeComponentProps } from \"../../types\";\nimport { type MenuButtonComponentPosition, type MenuButtonSize } from \"./MenuButton.types\";\nimport { type MenuChild } from \"../Menu/Menu/MenuConstants\";\n\nimport { Menu } from \"@vibe/icons\";\n\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./MenuButton.module.scss\";\nimport { type TooltipPositions } from \"@vibe/tooltip\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nconst MOVE_BY = { main: 8, secondary: 0 };\nconst CLOSE_KEYS: DialogTriggerEvent[] = [\"esckey\", \"tab\"];\n\nexport interface MenuButtonProps extends VibeComponentProps {\n  /**\n   * If true, the button is in an active state.\n   */\n  active?: boolean;\n  /**\n   * Class name applied to the button when the dialog is open.\n   */\n  openDialogComponentClassName?: string;\n  /**\n   * The component used as the button icon.\n   */\n  component?: (() => JSX.Element) | React.ElementType;\n  /**\n   * The size of the button.\n   */\n  size?: MenuButtonSize;\n  /**\n   * If true, the menu is open.\n   */\n  open?: boolean;\n  /**\n   * Callback fired when the button is clicked.\n   */\n  onClick?: (event: React.MouseEvent) => void;\n  /**\n   * The z-index of the menu.\n   */\n  zIndex?: number;\n  /**\n   * The label of the button for accessibility.\n   */\n  \"aria-label\"?: string;\n  /**\n   * Class name applied to the menu dialog wrapper.\n   */\n  dialogClassName?: string;\n  /**\n   * The offset of the menu relative to the button.\n   */\n  dialogOffset?: DialogOffset;\n  /**\n   * The padding size inside the menu dialog.\n   */\n  dialogPaddingSize?: DialogSize;\n  /**\n   * The position of the menu dialog relative to the button.\n   */\n  dialogPosition?: DialogPosition;\n  /**\n   * Classes that prevent showing the dialog when present.\n   */\n  dialogShowTriggerIgnoreClass?: string | Array<string>;\n  /**\n   * Classes that prevent hiding the dialog when present.\n   */\n  dialogHideTriggerIgnoreClass?: string | Array<string>;\n  /**\n   * The container selector in which to append the dialog.\n   */\n  dialogContainerSelector?: string;\n  /**\n   * The starting edge alignment of the menu.\n   */\n  startingEdge?: DialogStartingEdge;\n  /**\n   * Callback fired when the menu is shown.\n   */\n  onMenuShow?: () => void;\n  /**\n   * Callback fired when the menu is hidden.\n   */\n  onMenuHide?: () => void;\n  /**\n   * The text displayed inside the button.\n   */\n  text?: string;\n  /**\n   * If true, the button is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The tooltip content displayed when hovering over the button.\n   */\n  tooltipContent?: string;\n  /**\n   * If true, removes the tab key from the hide trigger.\n   */\n  removeTabCloseTrigger?: boolean;\n  /**\n   * The triggers that cause the tooltip to show or hide.\n   */\n  tooltipTriggers?: DialogTriggerEvent | DialogTriggerEvent[];\n  /**\n   * The position of the tooltip.\n   */\n  tooltipPosition?: TooltipPositions;\n  /**\n   * Class name applied to the tooltip reference wrapper.\n   */\n  tooltipReferenceClassName?: string;\n  /**\n   * Additional props for customizing the tooltip.\n   */\n  tooltipProps?: Partial<TooltipProps>;\n  /**\n   * If true, hides the menu and tooltip when the button is not visible.\n   */\n  hideWhenReferenceHidden?: boolean;\n  /**\n   * The content inside the menu button.\n   */\n  children?: ElementContent;\n  /**\n   * The position of the component relative to the text.\n   */\n  componentPosition?: MenuButtonComponentPosition;\n  /**\n   * The element used as the trigger for the menu.\n   */\n  triggerElement?: React.ElementType;\n  /**\n   * If true, closes the menu when a menu item is clicked.\n   */\n  closeMenuOnItemClick?: boolean;\n  /**\n   * If true, the tooltip appears only when hovering over the trigger element, not the menu dialog.\n   */\n  showTooltipOnlyOnTriggerElement?: boolean;\n  /**\n   * If true, closes the menu when clicking inside the dialog.\n   */\n  closeDialogOnContentClick?: boolean;\n  /**\n   * The ARIA control of the menu button for accessibility.\n   */\n  \"aria-controls\"?: string;\n}\n\nconst MenuButton = forwardRef(\n  (\n    {\n      id,\n      className,\n      openDialogComponentClassName,\n      children,\n      component = Menu,\n      componentPosition = \"start\",\n      size = \"small\",\n      open = false,\n      onClick = NOOP,\n      zIndex = null,\n      \"aria-label\": ariaLabel = \"Menu\",\n      closeMenuOnItemClick,\n      dialogOffset = MOVE_BY,\n      dialogPosition = \"bottom-start\",\n      dialogClassName,\n      dialogPaddingSize = \"small\",\n      dialogShowTriggerIgnoreClass,\n      dialogHideTriggerIgnoreClass,\n      onMenuHide = NOOP,\n      onMenuShow = NOOP,\n      disabled = false,\n      text,\n      tooltipContent,\n      tooltipProps,\n      tooltipTriggers = [\"mouseleave\"],\n      tooltipPosition = \"right\",\n      startingEdge = \"bottom\",\n      removeTabCloseTrigger = false,\n      tooltipReferenceClassName,\n      hideWhenReferenceHidden = true,\n      dialogContainerSelector,\n      active,\n      triggerElement: TriggerElement = \"button\",\n      showTooltipOnlyOnTriggerElement,\n      \"data-testid\": dataTestId,\n      closeDialogOnContentClick = false,\n      \"aria-controls\": ariaControls\n    }: MenuButtonProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const [isOpen, setIsOpen] = useState(open);\n    const isActive = active ?? isOpen;\n\n    const handleMenuClose = useCallback(\n      (focusOnMenuButtonAfterClose: boolean) => {\n        onMenuHide();\n        setIsOpen(false);\n        const button = componentRef.current;\n        if (!button || !focusOnMenuButtonAfterClose) {\n          return;\n        }\n        window.requestAnimationFrame(() => {\n          button.focus();\n        });\n      },\n      [onMenuHide]\n    );\n\n    const onMenuDidClose = useCallback(\n      (event: React.KeyboardEvent) => {\n        // TODO: check the functionality of the isEscapeKey since the event is not an actual KeyboardEVent but an object with propagate property only\n        const isCloseKey = CLOSE_KEYS.includes(event.key as DialogTriggerEvent);\n        if (isCloseKey || closeMenuOnItemClick) {\n          // @ts-ignore\n          if (event.propagate) {\n            handleMenuClose(isCloseKey);\n          }\n        }\n      },\n      [closeMenuOnItemClick, handleMenuClose]\n    );\n\n    const onDialogDidHide = useCallback(\n      (event: DialogEvent, hideEvent: string) => {\n        handleMenuClose(isOpen && CLOSE_KEYS.includes(hideEvent as DialogTriggerEvent));\n      },\n      [handleMenuClose, isOpen]\n    );\n\n    const onDialogDidShow = useCallback(() => {\n      setIsOpen(true);\n      onMenuShow();\n    }, [setIsOpen, onMenuShow]);\n\n    const [clonedChildren, hideTrigger] = useMemo(() => {\n      const triggers = new Set<DialogTriggerEvent>([\"clickoutside\", \"tab\", \"esckey\"]);\n\n      if (closeDialogOnContentClick) {\n        triggers.add(\"onContentClick\");\n        triggers.add(\"enter\");\n      }\n\n      if (removeTabCloseTrigger) {\n        triggers.delete(\"tab\");\n      }\n      const childrenArr = React.Children.toArray(children) as MenuChild[];\n      const cloned = childrenArr.map(child => {\n        if (!React.isValidElement(child)) return null;\n\n        const newProps: {\n          focusOnMount?: boolean;\n          focusItemIndexOnMount?: number;\n          onClose?: (event: React.KeyboardEvent) => void;\n        } = {};\n        if (child.type && child.type.supportFocusOnMount) {\n          newProps.focusOnMount = true;\n          if (child.props.focusItemIndexOnMount === undefined) {\n            newProps.focusItemIndexOnMount = 0;\n          }\n          triggers.delete(\"esckey\");\n        }\n\n        if (child.type && child.type.isMenu) {\n          newProps.onClose = onMenuDidClose;\n        }\n\n        return React.cloneElement(child, newProps);\n      });\n      return [cloned, Array.from(triggers)];\n    }, [children, onMenuDidClose, closeDialogOnContentClick, removeTabCloseTrigger]);\n\n    const content = useMemo(() => {\n      if (clonedChildren.length === 0) return null;\n      return (\n        <DialogContentContainer size={dialogPaddingSize} type=\"popover\" role={null}>\n          {clonedChildren}\n        </DialogContentContainer>\n      );\n    }, [clonedChildren, dialogPaddingSize]);\n\n    const computedDialogOffset = useMemo(\n      () => ({\n        ...MOVE_BY,\n        ...dialogOffset\n      }),\n      [dialogOffset]\n    );\n\n    const onMouseUp = (event: React.MouseEvent<HTMLElement>) => {\n      if (disabled) {\n        event.currentTarget.blur();\n        return;\n      }\n      onClick(event);\n    };\n\n    const Icon = component;\n    const iconSize = useMemo(() => {\n      switch (size) {\n        case \"xxs\":\n        case \"xs\":\n          return 16;\n        case \"small\":\n        case \"medium\":\n        case \"large\":\n          return 20;\n        default:\n          return 24;\n      }\n    }, [size]);\n    const icon = Icon ? <Icon size={iconSize.toString()} role=\"img\" aria-hidden=\"true\" /> : null;\n\n    useIsomorphicLayoutEffect(() => {\n      setIsOpen(open);\n    }, [open, setIsOpen]);\n\n    // Trigger element props, which are only relevant for \"button\" element, but might be needed for other elements e.g. Button\n    const triggerElementProps =\n      TriggerElement === \"button\"\n        ? {\n            ref: mergedRef\n          }\n        : {\n            active: isActive,\n            disabled: disabled,\n            ref: isForwardRef(TriggerElement) ? mergedRef : undefined\n          };\n\n    const triggerElementNode = (\n      <TriggerElement\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MENU_BUTTON, id)}\n        data-vibe={ComponentVibeId.MENU_BUTTON}\n        type=\"button\"\n        className={cx(styles.wrapper, className, getStyle(styles, camelCase(`size-${size}`)), {\n          [styles.active]: isActive,\n          [getStyle(styles, openDialogComponentClassName)]: isOpen && openDialogComponentClassName,\n          [styles.disabled]: disabled,\n          [styles.text]: text\n        })}\n        aria-haspopup=\"true\"\n        aria-expanded={isOpen}\n        aria-controls={ariaControls}\n        aria-label={!text && ariaLabel}\n        onMouseUp={onMouseUp}\n        aria-disabled={disabled}\n        {...triggerElementProps}\n      >\n        {componentPosition === \"start\" && icon}\n        {text && <span className={styles.innerText}>{text}</span>}\n        {componentPosition === \"end\" && icon}\n      </TriggerElement>\n    );\n\n    const dialogNode = (dialogChildren: React.ReactElement) => (\n      <Dialog\n        wrapperClassName={dialogClassName}\n        position={dialogPosition}\n        containerSelector={dialogContainerSelector}\n        startingEdge={startingEdge}\n        animationType=\"expand\"\n        content={content}\n        moveBy={computedDialogOffset}\n        showTrigger={disabled ? [] : [\"click\", \"enter\"]}\n        hideTrigger={hideTrigger}\n        showTriggerIgnoreClass={dialogShowTriggerIgnoreClass}\n        hideTriggerIgnoreClass={dialogHideTriggerIgnoreClass}\n        useDerivedStateFromProps={true}\n        onDialogDidShow={onDialogDidShow}\n        onDialogDidHide={onDialogDidHide}\n        zIndex={zIndex}\n        isOpen={isOpen}\n        hideWhenReferenceHidden={hideWhenReferenceHidden}\n      >\n        {dialogChildren}\n      </Dialog>\n    );\n\n    const tooltipNode = (tooltipChildren: React.ReactElement) => (\n      <Tooltip\n        content={tooltipContent}\n        position={tooltipPosition}\n        showTrigger=\"mouseenter\"\n        hideTrigger={tooltipTriggers}\n        referenceWrapperClassName={tooltipReferenceClassName}\n        hideWhenReferenceHidden={hideWhenReferenceHidden}\n        {...tooltipProps}\n      >\n        {tooltipChildren}\n      </Tooltip>\n    );\n\n    if (showTooltipOnlyOnTriggerElement) {\n      return dialogNode(tooltipNode(triggerElementNode));\n    }\n    return tooltipNode(dialogNode(triggerElementNode));\n  }\n);\n\nexport default MenuButton;\n"
  },
  {
    "path": "packages/core/src/components/MenuButton/MenuButton.types.ts",
    "content": "export type MenuButtonSize = \"xxs\" | \"xs\" | \"small\" | \"medium\" | \"large\";\n\nexport type MenuButtonComponentPosition = \"start\" | \"end\";\n"
  },
  {
    "path": "packages/core/src/components/MenuButton/__tests__/MenuButton.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport { fireEvent, render, screen, waitFor, waitForElementToBeRemoved } from \"@testing-library/react\";\nimport MenuButton from \"../MenuButton\";\nimport { Bolt } from \"@vibe/icons\";\nimport { Button } from \"@vibe/button\";\nimport MenuItem from \"../../Menu/MenuItem/MenuItem\";\nimport Menu from \"../../Menu/Menu/Menu\";\nimport userEvent from \"@testing-library/user-event\";\n\ndescribe(\"MenuButton\", () => {\n  it(\"renders correctly with empty props\", () => {\n    const tree = renderer\n      .create(\n        <MenuButton>\n          <div>Menu</div>\n        </MenuButton>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with size Large\", () => {\n    const tree = renderer\n      .create(\n        <MenuButton size=\"large\">\n          <div>Menu</div>\n        </MenuButton>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with Bolt Icon\", () => {\n    const tree = renderer\n      .create(\n        <MenuButton component={Bolt} text=\"Hello\">\n          <div>Menu</div>\n        </MenuButton>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with .dummy-class-name\", () => {\n    const tree = renderer\n      .create(\n        <MenuButton className=\"dummy-class-name\">\n          <div>Menu</div>\n        </MenuButton>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with tooltip content\", () => {\n    const tree = renderer\n      .create(\n        <MenuButton tooltipContent=\"tooltip content\">\n          <div>Menu</div>\n        </MenuButton>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with showTooltipOnlyOnTriggerElement and tooltip content\", () => {\n    const tree = renderer\n      .create(\n        <MenuButton showTooltipOnlyOnTriggerElement tooltipContent=\"tooltip content\">\n          <div>Menu</div>\n        </MenuButton>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with showTooltipOnlyOnTriggerElement and without tooltip content\", () => {\n    const tree = renderer\n      .create(\n        <MenuButton showTooltipOnlyOnTriggerElement>\n          <div>Menu</div>\n        </MenuButton>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with a default Menu icon at the end\", () => {\n    const tree = renderer\n      .create(\n        <MenuButton text=\"Hello\" componentPosition=\"start\">\n          <div>Menu</div>\n        </MenuButton>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with Button triggerElement\", () => {\n    const tree = renderer\n      .create(\n        <MenuButton\n          triggerElement={props => (\n            <Button kind=\"primary\" {...props} className={\"\"}>\n              Button\n            </Button>\n          )}\n        ></MenuButton>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  // TODO - fix this test\n  it.skip(\"renders correctly with open state\", () => {\n    const tree = renderer\n      .create(\n        <MenuButton open>\n          <div>Menu</div>\n        </MenuButton>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  describe(\"Click\", () => {\n    it(\"should show menu\", async () => {\n      const { getByLabelText } = render(\n        <MenuButton aria-label=\"Menu Button\">\n          <div>Menu</div>\n        </MenuButton>\n      );\n      const button = getByLabelText(\"Menu Button\");\n      await waitFor(() => {\n        fireEvent.click(button);\n      });\n      const menu = await screen.findByText(\"Menu\");\n      expect(menu).toBeTruthy();\n    });\n  });\n\n  describe(\"Item Click\", () => {\n    it.each`\n      closeMenuOnItemClick | expected\n      ${true}              | ${\"close\"}\n      ${false}             | ${\"not close\"}\n    `(\n      \"should $expected menu after clicking enter when closeMenuOnItemClick is $closeMenuOnItemClick\",\n      async ({ closeMenuOnItemClick }) => {\n        const { getByLabelText } = render(\n          <MenuButton aria-label=\"Menu Button\" closeMenuOnItemClick={closeMenuOnItemClick}>\n            <Menu>\n              <MenuItem title=\"Menu Item\" />\n            </Menu>\n          </MenuButton>\n        );\n        const button = getByLabelText(\"Menu Button\");\n        await waitFor(async () => {\n          fireEvent.click(button);\n          expect(await screen.findAllByText(\"Menu Item\")).toBeTruthy();\n          userEvent.type(button, \"{enter}\");\n        });\n        if (closeMenuOnItemClick) {\n          await waitForElementToBeRemoved(() => screen.queryByText(\"Menu Item\"));\n          expect(screen.queryByText(\"Menu Item\")).toBeFalsy();\n        } else {\n          expect(screen.queryByText(\"Menu Item\")).toBeTruthy();\n        }\n      }\n    );\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/MenuButton/__tests__/__snapshots__/MenuButton.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`MenuButton > renders correctly with .dummy-class-name 1`] = `\n<button\n  aria-disabled={false}\n  aria-expanded={false}\n  aria-haspopup=\"true\"\n  aria-label=\"Menu\"\n  className=\"wrapper dummy-class-name sizeSmall\"\n  data-testid=\"menu-button\"\n  data-vibe=\"MenuButton\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onContextMenu={[Function]}\n  onFocus={[Function]}\n  onKeyDown={[Function]}\n  onMouseDown={[Function]}\n  onMouseEnter={[Function]}\n  onMouseLeave={[Function]}\n  onMouseUp={[Function]}\n  type=\"button\"\n>\n  <svg\n    aria-hidden=\"true\"\n    fill=\"currentColor\"\n    height=\"20\"\n    role=\"img\"\n    viewBox=\"0 0 20 20\"\n    width=\"20\"\n  >\n    <path\n      d=\"M6 10.5C6 11.3284 5.32843 12 4.5 12 3.67157 12 3 11.3284 3 10.5 3 9.67157 3.67157 9 4.5 9 5.32843 9 6 9.67157 6 10.5zM11.8333 10.5C11.8333 11.3284 11.1618 12 10.3333 12 9.50492 12 8.83334 11.3284 8.83334 10.5 8.83334 9.67157 9.50492 9 10.3333 9 11.1618 9 11.8333 9.67157 11.8333 10.5zM17.6667 10.5C17.6667 11.3284 16.9951 12 16.1667 12 15.3383 12 14.6667 11.3284 14.6667 10.5 14.6667 9.67157 15.3383 9 16.1667 9 16.9951 9 17.6667 9.67157 17.6667 10.5z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n</button>\n`;\n\nexports[`MenuButton > renders correctly with Bolt Icon 1`] = `\n<button\n  aria-disabled={false}\n  aria-expanded={false}\n  aria-haspopup=\"true\"\n  aria-label={false}\n  className=\"wrapper sizeSmall text\"\n  data-testid=\"menu-button\"\n  data-vibe=\"MenuButton\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onContextMenu={[Function]}\n  onFocus={[Function]}\n  onKeyDown={[Function]}\n  onMouseDown={[Function]}\n  onMouseEnter={[Function]}\n  onMouseLeave={[Function]}\n  onMouseUp={[Function]}\n  type=\"button\"\n>\n  <svg\n    aria-hidden=\"true\"\n    fill=\"currentColor\"\n    height=\"20\"\n    role=\"img\"\n    viewBox=\"0 0 20 20\"\n    width=\"20\"\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M11.3336 2.28375C11.6473 2.38119 11.8611 2.67147 11.8611 2.99999V7.80555H15C15.2785 7.80555 15.5341 7.95989 15.6638 8.20639C15.7934 8.45289 15.7758 8.75094 15.618 8.98045L9.50692 17.8693C9.32081 18.1401 8.98017 18.2581 8.66643 18.1607C8.35269 18.0632 8.13889 17.773 8.13889 17.4444V12.6389H5C4.72148 12.6389 4.4659 12.4845 4.33624 12.238C4.20657 11.9915 4.22418 11.6935 4.38197 11.464L10.4931 2.5751C10.6792 2.30438 11.0198 2.1863 11.3336 2.28375ZM6.42577 11.1389H8.88889C9.3031 11.1389 9.63889 11.4747 9.63889 11.8889V15.0297L13.5742 9.30555H11.1111C10.6969 9.30555 10.3611 8.96976 10.3611 8.55555V5.41475L6.42577 11.1389Z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n  <span\n    className=\"innerText\"\n  >\n    Hello\n  </span>\n</button>\n`;\n\nexports[`MenuButton > renders correctly with Button triggerElement 1`] = `\n<button\n  aria-busy={false}\n  aria-disabled={false}\n  aria-expanded={false}\n  aria-haspopup=\"true\"\n  aria-label=\"Menu\"\n  className=\"button sizeMedium kindPrimary colorPrimary\"\n  data-testid=\"menu-button\"\n  data-vibe=\"Button\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onFocus={[Function]}\n  onMouseDown={[Function]}\n  onMouseUp={[Function]}\n  type=\"button\"\n>\n  Button\n</button>\n`;\n\nexports[`MenuButton > renders correctly with a default Menu icon at the end 1`] = `\n<button\n  aria-disabled={false}\n  aria-expanded={false}\n  aria-haspopup=\"true\"\n  aria-label={false}\n  className=\"wrapper sizeSmall text\"\n  data-testid=\"menu-button\"\n  data-vibe=\"MenuButton\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onContextMenu={[Function]}\n  onFocus={[Function]}\n  onKeyDown={[Function]}\n  onMouseDown={[Function]}\n  onMouseEnter={[Function]}\n  onMouseLeave={[Function]}\n  onMouseUp={[Function]}\n  type=\"button\"\n>\n  <svg\n    aria-hidden=\"true\"\n    fill=\"currentColor\"\n    height=\"20\"\n    role=\"img\"\n    viewBox=\"0 0 20 20\"\n    width=\"20\"\n  >\n    <path\n      d=\"M6 10.5C6 11.3284 5.32843 12 4.5 12 3.67157 12 3 11.3284 3 10.5 3 9.67157 3.67157 9 4.5 9 5.32843 9 6 9.67157 6 10.5zM11.8333 10.5C11.8333 11.3284 11.1618 12 10.3333 12 9.50492 12 8.83334 11.3284 8.83334 10.5 8.83334 9.67157 9.50492 9 10.3333 9 11.1618 9 11.8333 9.67157 11.8333 10.5zM17.6667 10.5C17.6667 11.3284 16.9951 12 16.1667 12 15.3383 12 14.6667 11.3284 14.6667 10.5 14.6667 9.67157 15.3383 9 16.1667 9 16.9951 9 17.6667 9.67157 17.6667 10.5z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n  <span\n    className=\"innerText\"\n  >\n    Hello\n  </span>\n</button>\n`;\n\nexports[`MenuButton > renders correctly with empty props 1`] = `\n<button\n  aria-disabled={false}\n  aria-expanded={false}\n  aria-haspopup=\"true\"\n  aria-label=\"Menu\"\n  className=\"wrapper sizeSmall\"\n  data-testid=\"menu-button\"\n  data-vibe=\"MenuButton\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onContextMenu={[Function]}\n  onFocus={[Function]}\n  onKeyDown={[Function]}\n  onMouseDown={[Function]}\n  onMouseEnter={[Function]}\n  onMouseLeave={[Function]}\n  onMouseUp={[Function]}\n  type=\"button\"\n>\n  <svg\n    aria-hidden=\"true\"\n    fill=\"currentColor\"\n    height=\"20\"\n    role=\"img\"\n    viewBox=\"0 0 20 20\"\n    width=\"20\"\n  >\n    <path\n      d=\"M6 10.5C6 11.3284 5.32843 12 4.5 12 3.67157 12 3 11.3284 3 10.5 3 9.67157 3.67157 9 4.5 9 5.32843 9 6 9.67157 6 10.5zM11.8333 10.5C11.8333 11.3284 11.1618 12 10.3333 12 9.50492 12 8.83334 11.3284 8.83334 10.5 8.83334 9.67157 9.50492 9 10.3333 9 11.1618 9 11.8333 9.67157 11.8333 10.5zM17.6667 10.5C17.6667 11.3284 16.9951 12 16.1667 12 15.3383 12 14.6667 11.3284 14.6667 10.5 14.6667 9.67157 15.3383 9 16.1667 9 16.9951 9 17.6667 9.67157 17.6667 10.5z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n</button>\n`;\n\nexports[`MenuButton > renders correctly with showTooltipOnlyOnTriggerElement and tooltip content 1`] = `\n<span\n  className=\"\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onContextMenu={[Function]}\n  onFocus={[Function]}\n  onKeyDown={[Function]}\n  onMouseDown={[Function]}\n  onMouseEnter={[Function]}\n  onMouseLeave={[Function]}\n>\n  <button\n    aria-disabled={false}\n    aria-expanded={false}\n    aria-haspopup=\"true\"\n    aria-label=\"Menu\"\n    className=\"wrapper sizeSmall\"\n    data-testid=\"menu-button\"\n    data-vibe=\"MenuButton\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    onMouseUp={[Function]}\n    type=\"button\"\n  >\n    <svg\n      aria-hidden=\"true\"\n      fill=\"currentColor\"\n      height=\"20\"\n      role=\"img\"\n      viewBox=\"0 0 20 20\"\n      width=\"20\"\n    >\n      <path\n        d=\"M6 10.5C6 11.3284 5.32843 12 4.5 12 3.67157 12 3 11.3284 3 10.5 3 9.67157 3.67157 9 4.5 9 5.32843 9 6 9.67157 6 10.5zM11.8333 10.5C11.8333 11.3284 11.1618 12 10.3333 12 9.50492 12 8.83334 11.3284 8.83334 10.5 8.83334 9.67157 9.50492 9 10.3333 9 11.1618 9 11.8333 9.67157 11.8333 10.5zM17.6667 10.5C17.6667 11.3284 16.9951 12 16.1667 12 15.3383 12 14.6667 11.3284 14.6667 10.5 14.6667 9.67157 15.3383 9 16.1667 9 16.9951 9 17.6667 9.67157 17.6667 10.5z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  </button>\n</span>\n`;\n\nexports[`MenuButton > renders correctly with showTooltipOnlyOnTriggerElement and without tooltip content 1`] = `\n<span\n  className=\"\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onContextMenu={[Function]}\n  onFocus={[Function]}\n  onKeyDown={[Function]}\n  onMouseDown={[Function]}\n  onMouseEnter={[Function]}\n  onMouseLeave={[Function]}\n>\n  <button\n    aria-disabled={false}\n    aria-expanded={false}\n    aria-haspopup=\"true\"\n    aria-label=\"Menu\"\n    className=\"wrapper sizeSmall\"\n    data-testid=\"menu-button\"\n    data-vibe=\"MenuButton\"\n    onMouseUp={[Function]}\n    type=\"button\"\n  >\n    <svg\n      aria-hidden=\"true\"\n      fill=\"currentColor\"\n      height=\"20\"\n      role=\"img\"\n      viewBox=\"0 0 20 20\"\n      width=\"20\"\n    >\n      <path\n        d=\"M6 10.5C6 11.3284 5.32843 12 4.5 12 3.67157 12 3 11.3284 3 10.5 3 9.67157 3.67157 9 4.5 9 5.32843 9 6 9.67157 6 10.5zM11.8333 10.5C11.8333 11.3284 11.1618 12 10.3333 12 9.50492 12 8.83334 11.3284 8.83334 10.5 8.83334 9.67157 9.50492 9 10.3333 9 11.1618 9 11.8333 9.67157 11.8333 10.5zM17.6667 10.5C17.6667 11.3284 16.9951 12 16.1667 12 15.3383 12 14.6667 11.3284 14.6667 10.5 14.6667 9.67157 15.3383 9 16.1667 9 16.9951 9 17.6667 9.67157 17.6667 10.5z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  </button>\n</span>\n`;\n\nexports[`MenuButton > renders correctly with size Large 1`] = `\n<button\n  aria-disabled={false}\n  aria-expanded={false}\n  aria-haspopup=\"true\"\n  aria-label=\"Menu\"\n  className=\"wrapper sizeLarge\"\n  data-testid=\"menu-button\"\n  data-vibe=\"MenuButton\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onContextMenu={[Function]}\n  onFocus={[Function]}\n  onKeyDown={[Function]}\n  onMouseDown={[Function]}\n  onMouseEnter={[Function]}\n  onMouseLeave={[Function]}\n  onMouseUp={[Function]}\n  type=\"button\"\n>\n  <svg\n    aria-hidden=\"true\"\n    fill=\"currentColor\"\n    height=\"20\"\n    role=\"img\"\n    viewBox=\"0 0 20 20\"\n    width=\"20\"\n  >\n    <path\n      d=\"M6 10.5C6 11.3284 5.32843 12 4.5 12 3.67157 12 3 11.3284 3 10.5 3 9.67157 3.67157 9 4.5 9 5.32843 9 6 9.67157 6 10.5zM11.8333 10.5C11.8333 11.3284 11.1618 12 10.3333 12 9.50492 12 8.83334 11.3284 8.83334 10.5 8.83334 9.67157 9.50492 9 10.3333 9 11.1618 9 11.8333 9.67157 11.8333 10.5zM17.6667 10.5C17.6667 11.3284 16.9951 12 16.1667 12 15.3383 12 14.6667 11.3284 14.6667 10.5 14.6667 9.67157 15.3383 9 16.1667 9 16.9951 9 17.6667 9.67157 17.6667 10.5z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n</button>\n`;\n\nexports[`MenuButton > renders correctly with tooltip content 1`] = `\n<span\n  className=\"\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onContextMenu={[Function]}\n  onFocus={[Function]}\n  onKeyDown={[Function]}\n  onMouseDown={[Function]}\n  onMouseEnter={[Function]}\n  onMouseLeave={[Function]}\n>\n  <button\n    aria-disabled={false}\n    aria-expanded={false}\n    aria-haspopup=\"true\"\n    aria-label=\"Menu\"\n    className=\"wrapper sizeSmall\"\n    data-testid=\"menu-button\"\n    data-vibe=\"MenuButton\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onContextMenu={[Function]}\n    onFocus={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    onMouseUp={[Function]}\n    type=\"button\"\n  >\n    <svg\n      aria-hidden=\"true\"\n      fill=\"currentColor\"\n      height=\"20\"\n      role=\"img\"\n      viewBox=\"0 0 20 20\"\n      width=\"20\"\n    >\n      <path\n        d=\"M6 10.5C6 11.3284 5.32843 12 4.5 12 3.67157 12 3 11.3284 3 10.5 3 9.67157 3.67157 9 4.5 9 5.32843 9 6 9.67157 6 10.5zM11.8333 10.5C11.8333 11.3284 11.1618 12 10.3333 12 9.50492 12 8.83334 11.3284 8.83334 10.5 8.83334 9.67157 9.50492 9 10.3333 9 11.1618 9 11.8333 9.67157 11.8333 10.5zM17.6667 10.5C17.6667 11.3284 16.9951 12 16.1667 12 15.3383 12 14.6667 11.3284 14.6667 10.5 14.6667 9.67157 15.3383 9 16.1667 9 16.9951 9 17.6667 9.67157 17.6667 10.5z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  </button>\n</span>\n`;\n"
  },
  {
    "path": "packages/core/src/components/MenuButton/index.ts",
    "content": "export { default as MenuButton, type MenuButtonProps } from \"./MenuButton\";\n\nexport * from \"./MenuButton.types\";\n"
  },
  {
    "path": "packages/core/src/components/Modal/Modal/Modal.module.scss",
    "content": "$full-view-margin: 40px;\n\n.container {\n  position: fixed;\n  inset: 0;\n  z-index: var(--monday-modal-z-index, 10000);\n}\n\n.overlay {\n  position: fixed;\n  inset: 0;\n  height: 100%;\n  background-color: var(--backdrop-color);\n}\n\n// Resting centering transform for non-fullView modals.\n// Matches the framer-motion x:\"-50%\", y:\"-50%\" that was previously applied inline.\n.centerPop {\n  transform: translate(-50%, -50%);\n}\n\n.anchorPop {\n  transform: translate(-50%, -50%);\n}\n\n.modal {\n  --top-actions-margin-inline: var(--space-24);\n  --top-actions-margin-block: var(--space-24);\n  --top-actions-width: var(--space-32);\n  --modal-inline-padding: var(--space-32);\n\n  position: relative;\n  top: 50%;\n  left: 50%;\n\n  display: flex;\n  flex-direction: column;\n  width: var(--modal-width);\n  max-height: var(--modal-max-height);\n  background-color: var(--primary-background-color);\n  overflow: hidden;\n  border-radius: var(--border-radius-big);\n  box-shadow: var(--box-shadow-large);\n  outline: none;\n\n  &.withHeaderAction {\n    --top-actions-width: calc(var(--space-32) * 2);\n  }\n\n  &.sizeSmall {\n    --modal-max-height: 50%;\n    --modal-width: 460px;\n  }\n\n  &.sizeMedium {\n    --modal-max-height: 80%;\n    --modal-width: 540px;\n  }\n\n  &.sizeLarge {\n    --modal-max-height: 80%;\n    --modal-width: 800px;\n  }\n\n  &.sizeFullView {\n    --top-actions-margin-inline: var(--space-32);\n    --modal-max-height: 100%;\n    --modal-width: auto;\n\n    position: fixed;\n    inset: 0;\n    height: calc(100% - $full-view-margin);\n\n    margin-inline: var(--space-24);\n    margin-block-start: $full-view-margin;\n\n    border-end-start-radius: unset;\n    border-end-end-radius: unset;\n  }\n\n  @media (min-width: 1280px) {\n    &.sizeSmall {\n      --modal-width: 480px;\n    }\n\n    &.sizeMedium {\n      --modal-width: 580px;\n    }\n\n    &.sizeLarge {\n      --modal-width: 840px;\n    }\n  }\n\n  @media (min-width: 1440px) {\n    &.sizeSmall {\n      --modal-width: 520px;\n    }\n\n    &.sizeMedium {\n      --modal-width: 620px;\n    }\n\n    &.sizeLarge {\n      --modal-width: 900px;\n    }\n  }\n\n  @media (min-width: 1720px) {\n    &.sizeFullView {\n      margin-inline: $full-view-margin;\n    }\n  }\n}\n\n// FROM state — must match 0% keyframes exactly to prevent flash on mount.\n.containerEnter {\n  .overlay {\n    opacity: 0;\n  }\n\n  .centerPop {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.8);\n  }\n\n  .anchorPop {\n    opacity: 0;\n    transform: translate(calc(-50% + var(--modal-start-x, 0px)), calc(-50% + var(--modal-start-y, 0px))) scale(0.8);\n  }\n\n  .fullView {\n    opacity: 0.3;\n    transform: translateY(30px);\n  }\n}\n\n.containerEnterActive {\n  .overlay {\n    opacity: 1;\n    transition: opacity 100ms cubic-bezier(0, 0, 0.4, 1);\n  }\n\n  .centerPop {\n    animation: centerPopIn 150ms cubic-bezier(0, 0, 0.4, 1) forwards;\n  }\n\n  .anchorPop {\n    animation: anchorPopIn 200ms cubic-bezier(0, 0, 0.4, 1) forwards;\n  }\n\n  .fullView {\n    animation: fullViewIn 250ms cubic-bezier(0, 0, 0.4, 1) forwards;\n  }\n}\n\n.containerExitActive {\n  .overlay {\n    opacity: 0;\n    transition: opacity 100ms cubic-bezier(0.6, 0, 1, 1);\n  }\n\n  .centerPop {\n    animation: centerPopOut 100ms cubic-bezier(0.6, 0, 1, 1) forwards;\n  }\n\n  .anchorPop {\n    animation: anchorPopOut 150ms cubic-bezier(0.6, 0, 1, 1) forwards;\n  }\n\n  .fullView {\n    animation: fullViewOut 100ms cubic-bezier(0.6, 0, 1, 1) forwards;\n  }\n}\n\n@keyframes centerPopIn {\n  0% {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.8);\n  }\n\n  50%,\n  100% {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n\n@keyframes centerPopOut {\n  0%,\n  50% {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n\n  100% {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.8);\n  }\n}\n\n@keyframes anchorPopIn {\n  0%,\n  40% {\n    opacity: 0;\n    transform: translate(calc(-50% + var(--modal-start-x, 0px)), calc(-50% + var(--modal-start-y, 0px))) scale(0.8);\n  }\n\n  100% {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n\n@keyframes anchorPopOut {\n  0% {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n\n  60%,\n  100% {\n    opacity: 0;\n    transform: translate(calc(-50% + var(--modal-start-x, 0px)), calc(-50% + var(--modal-start-y, 0px))) scale(0.8);\n  }\n}\n\n@keyframes fullViewIn {\n  0% {\n    opacity: 0.3;\n    transform: translateY(30px);\n  }\n\n  33% {\n    opacity: 1;\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes fullViewOut {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  to {\n    opacity: 0;\n    transform: translateY(30px);\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Modal/Modal/Modal.tsx",
    "content": "import React, { forwardRef, useCallback, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport FocusLock from \"react-focus-lock\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../../tests/constants\";\nimport styles from \"./Modal.module.scss\";\nimport { type ModalProps } from \"./Modal.types\";\nimport ModalTopActions from \"../ModalTopActions/ModalTopActions\";\nimport { getStyle, useMergeRef } from \"@vibe/shared\";\nimport { camelCase } from \"es-toolkit\";\nimport { ModalProvider } from \"../context/ModalContext\";\nimport { type ModalProviderValue } from \"../context/ModalContext.types\";\nimport { keyCodes } from \"../../../constants\";\nimport { createPortal } from \"react-dom\";\nimport usePortalTarget from \"../hooks/usePortalTarget/usePortalTarget\";\nimport useFocusEscapeTargets from \"../hooks/useFocusEscapeTargets/useFocusEscapeTargets\";\nimport { LayerProvider } from \"@vibe/layer\";\n\n// @ts-expect-error This is a precaution to support all possible module systems (ESM/CJS)\nconst FocusLockComponent = (FocusLock.default || FocusLock) as typeof FocusLock;\n\nconst Modal = forwardRef(\n  (\n    {\n      id,\n      show,\n      size = \"medium\",\n      renderHeaderAction,\n      closeButtonTheme,\n      closeButtonAriaLabel,\n      onClose = () => {},\n      autoFocus = true,\n      allowFocusEscapeTo,\n      onFocusAttempt,\n      anchorElementRef,\n      alertModal,\n      container = document.body,\n      children,\n      style,\n      zIndex,\n      className,\n      \"data-testid\": dataTestId,\n      \"aria-labelledby\": ariaLabelledby,\n      \"aria-describedby\": ariaDescribedby\n    }: ModalProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const portalTargetElement = usePortalTarget(container);\n\n    const modalRef = useRef<HTMLDivElement>(null);\n    const modalMergedRef = useMergeRef<HTMLDivElement>(ref, modalRef);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const [titleId, setTitleId] = useState<string>();\n    const [descriptionId, setDescriptionId] = useState<string>();\n\n    const setTitleIdCallback = useCallback(\n      (newId: string) => {\n        if (ariaLabelledby) return;\n        setTitleId(newId);\n      },\n      [ariaLabelledby]\n    );\n    const setDescriptionIdCallback = useCallback(\n      (newId: string) => {\n        if (ariaDescribedby) return;\n        setDescriptionId(newId);\n      },\n      [ariaDescribedby]\n    );\n\n    const contextValue = useMemo<ModalProviderValue>(\n      () => ({\n        modalId: id,\n        setTitleId: setTitleIdCallback,\n        setDescriptionId: setDescriptionIdCallback,\n        autoFocus\n      }),\n      [id, setTitleIdCallback, setDescriptionIdCallback, autoFocus]\n    );\n\n    const onBackdropClick = useCallback<React.MouseEventHandler<HTMLDivElement>>(\n      e => {\n        if (!show || alertModal) return;\n        onClose(e);\n      },\n      [show, alertModal, onClose]\n    );\n\n    const onModalKeyDown = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n      e => {\n        if (e.key !== keyCodes.ESCAPE || !show || alertModal) return;\n        onClose(e);\n      },\n      [alertModal, onClose, show]\n    );\n\n    const animationType = size === \"full-view\" ? \"fullView\" : anchorElementRef?.current ? \"anchorPop\" : \"centerPop\";\n\n    const anchorRect = anchorElementRef?.current?.getBoundingClientRect();\n    const anchorVars = anchorRect\n      ? ({\n          \"--modal-start-x\": `${anchorRect.left + anchorRect.width / 2}px`,\n          \"--modal-start-y\": `${anchorRect.top + anchorRect.height / 2}px`\n        } as React.CSSProperties)\n      : {};\n\n    const zIndexStyle = zIndex ? ({ \"--monday-modal-z-index\": zIndex } as React.CSSProperties) : {};\n\n    const shouldAllowFocusEscape = useFocusEscapeTargets(allowFocusEscapeTo);\n\n    /**\n     * Returning true means that the focus-lock is allowed to manage the element.\n     * Returning false means that the focus-lock would surrender control to the element.\n     */\n    const handleFocusLockWhiteList = useCallback(\n      (nextFocusedElement?: HTMLElement) => {\n        if (onFocusAttempt) {\n          const outcome = onFocusAttempt(nextFocusedElement);\n\n          if (outcome === true) return true;\n\n          if (outcome instanceof HTMLElement) {\n            outcome.focus();\n            return false;\n          }\n\n          return false;\n        }\n\n        return !shouldAllowFocusEscape(nextFocusedElement);\n      },\n      [onFocusAttempt, shouldAllowFocusEscape]\n    );\n\n    return (\n      <CSSTransition\n        in={show}\n        nodeRef={containerRef}\n        timeout={{ enter: 250, exit: 150 }}\n        unmountOnExit\n        classNames={{\n          enter: styles.containerEnter,\n          enterActive: styles.containerEnterActive,\n          exitActive: styles.containerExitActive\n        }}\n      >\n        <LayerProvider layerRef={containerRef}>\n          <ModalProvider value={contextValue}>\n            {createPortal(\n              <FocusLockComponent returnFocus autoFocus={autoFocus} whiteList={handleFocusLockWhiteList}>\n                <div ref={containerRef} className={styles.container} style={zIndexStyle} onKeyDown={onModalKeyDown}>\n                  <div\n                    data-testid={getTestId(ComponentDefaultTestId.MODAL_OVERLAY, id)}\n                    className={styles.overlay}\n                    onClick={onBackdropClick}\n                    aria-hidden\n                  />\n                  <RemoveScroll forwardProps ref={modalMergedRef}>\n                    <div\n                      className={cx(\n                        styles.modal,\n                        styles[animationType],\n                        getStyle(styles, camelCase(\"size-\" + size)),\n                        { [styles.withHeaderAction]: !!renderHeaderAction },\n                        className\n                      )}\n                      id={id}\n                      data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL, id)}\n                      data-vibe={ComponentVibeId.MODAL}\n                      role=\"dialog\"\n                      aria-modal\n                      aria-labelledby={ariaLabelledby || titleId}\n                      aria-describedby={ariaDescribedby || descriptionId}\n                      style={{ ...style, ...anchorVars }}\n                      tabIndex={-1}\n                    >\n                      {children}\n                      <ModalTopActions\n                        renderAction={renderHeaderAction}\n                        theme={closeButtonTheme}\n                        closeButtonAriaLabel={closeButtonAriaLabel}\n                        onClose={onClose}\n                      />\n                    </div>\n                  </RemoveScroll>\n                </div>\n              </FocusLockComponent>,\n              portalTargetElement\n            )}\n          </ModalProvider>\n        </LayerProvider>\n      </CSSTransition>\n    );\n  }\n);\n\nexport default Modal;\n"
  },
  {
    "path": "packages/core/src/components/Modal/Modal/Modal.types.tsx",
    "content": "import { type VibeComponentProps } from \"../../../types\";\nimport type React from \"react\";\nimport { type ModalTopActionsProps } from \"../ModalTopActions/ModalTopActions.types\";\nimport { type PortalTarget } from \"../hooks/usePortalTarget/usePortalTarget.types\";\nimport { type FocusEscapeTarget } from \"../hooks/useFocusEscapeTargets/useFocusEscapeTargets.types\";\n\nexport type ModalSize = \"small\" | \"medium\" | \"large\" | \"full-view\";\n\nexport type ModalCloseEvent =\n  | React.MouseEvent<HTMLDivElement | HTMLButtonElement>\n  | React.KeyboardEvent<HTMLDivElement>;\n\nexport interface ModalProps extends VibeComponentProps {\n  /**\n   * Unique identifier for the modal.\n   */\n  id: string;\n  /**\n   * Controls the visibility of the modal.\n   */\n  show: boolean;\n  /**\n   * Determines the width and max-height of the modal.\n   */\n  size?: ModalSize;\n  /**\n   * Theme color for the close button.\n   */\n  closeButtonTheme?: ModalTopActionsProps[\"theme\"];\n  /**\n   * Accessibility label for the close button.\n   */\n  closeButtonAriaLabel?: ModalTopActionsProps[\"closeButtonAriaLabel\"];\n  /**\n   * Callback fired when the modal should close.\n   */\n  onClose?: (event: ModalCloseEvent) => void;\n  /**\n   * This is intended for advanced use-cases.\n   * It allows you to control the default focus behavior when the modal mounts.\n   * Make sure to use this prop only when you understand the implications.\n   *\n   * Determines if focus should automatically move to the first focusable element when the component mounts.\n   * When set to `false` - disables the automatic focus behavior.\n   * - Notice this might break keyboard and general accessibility and should be used with caution.\n   */\n  autoFocus?: boolean;\n  /**\n   * Specifies elements/containers that should be allowed to receive focus outside this modal.\n   * When focus moves to these elements, the focus lock will ignore them.\n   * This allows other UI components (tooltips, dropdowns, nested modals, etc.) to receive focus.\n   *\n   * Accepts:\n   * - CSS selectors (string)\n   * - Refs to elements (React.RefObject<HTMLElement>)\n   * - Direct element references (HTMLElement)\n   */\n  allowFocusEscapeTo?: FocusEscapeTarget[];\n  /**\n   * This is intended for advanced use-cases.\n   * It allows you to control which elements the focus lock should manage.\n   * Make sure to use this prop only when you understand the implications.\n   *\n   * **Note:** If you only need to allow focus to specific selectors, use `allowFocusEscapeTo` instead.\n   *\n   * Called whenever focus is attempting to move to any element (inside or outside the modal).\n   * Return:\n   * - `true` to let focus-lock **manage** this element (keep it within the modal's focus trap).\n   * - `false` to let focus-lock **ignore** this element (allow focus to move outside the modal).\n   * - An HTMLElement to redirect focus to that element instead.\n   * - Any other value (e.g., null, undefined) would act as `false`.\n   *\n   * @example\n   * // Complex custom logic\n   * <Modal\n   *   onFocusAttempt={(el) => {\n   *     if (el?.dataset.customBehavior) return false;\n   *     return true;\n   *   }}\n   * />\n   */\n  onFocusAttempt?: (nextFocusedElement?: HTMLElement) => boolean | HTMLElement;\n  /**\n   * Additional action to render in the header area.\n   */\n  renderHeaderAction?: ModalTopActionsProps[\"renderAction\"];\n  /**\n   * Reference to an element that triggered the modal, used for animations.\n   */\n  anchorElementRef?: React.RefObject<HTMLElement>;\n  /**\n   * When true, prevents closing the modal when clicking the overlay (\"click-outside\") or pressing ESC.\n   */\n  alertModal?: boolean;\n  /**\n   * The target element to render the modal into.\n   */\n  container?: PortalTarget;\n  /**\n   * Modal content.\n   */\n  children: React.ReactNode;\n  /**\n   * Additional inline styles for the modal.\n   */\n  style?: React.CSSProperties;\n  /**\n   * The z-index to be used for the modal and overlay.\n   */\n  zIndex?: number;\n  /**\n   * If provided, overrides the automatically generated aria-labelledby, that is assigned when used with ModalHeader.\n   */\n  \"aria-labelledby\"?: string;\n  /**\n   * If provided, overrides the automatically generated aria-describedby, that is assigned when used with ModalHeader.\n   */\n  \"aria-describedby\"?: string;\n}\n"
  },
  {
    "path": "packages/core/src/components/Modal/Modal/__tests__/Modal.test.tsx",
    "content": "import { vi, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { render, fireEvent } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport Modal from \"../Modal\";\nimport ModalContent from \"../../ModalContent/ModalContent\";\nimport ModalHeader from \"../../ModalHeader/ModalHeader\";\n\nvi.mock(\"react-transition-group\", () => ({\n  CSSTransition: ({\n    in: inProp,\n    children,\n    unmountOnExit\n  }: {\n    in?: boolean;\n    children: React.ReactNode;\n    unmountOnExit?: boolean;\n  }) => {\n    if (!inProp && unmountOnExit) return null;\n    return <>{children}</>;\n  }\n}));\n\ndescribe(\"Modal\", () => {\n  const id = \"modal-id\";\n  const closeButtonAriaLabel = \"Close modal\";\n  const childrenContent = (\n    <div>\n      <button type=\"button\">Test button content</button>\n      <span>My content</span>\n    </div>\n  );\n  it(\"should render the modal with the correct role\", () => {\n    const { getByTestId } = render(\n      <Modal id={id} show data-testid=\"modal\">\n        {childrenContent}\n      </Modal>\n    );\n\n    expect(getByTestId(\"modal\")).toHaveAttribute(\"role\", \"dialog\");\n  });\n\n  it(\"should render the modal with the correct aria-modal\", () => {\n    const { getByTestId } = render(\n      <Modal id={id} show data-testid=\"modal\">\n        {childrenContent}\n      </Modal>\n    );\n\n    expect(getByTestId(\"modal\")).toHaveAttribute(\"aria-modal\", \"true\");\n  });\n\n  it(\"should not render when 'show' is false\", () => {\n    const { queryByRole } = render(\n      <Modal id={id} show={false}>\n        {childrenContent}\n      </Modal>\n    );\n\n    expect(queryByRole(\"dialog\")).not.toBeInTheDocument();\n  });\n\n  it(\"should render the children content correctly\", () => {\n    const { getByText } = render(\n      <Modal id={id} show>\n        {childrenContent}\n      </Modal>\n    );\n\n    expect(getByText(\"My content\")).toBeInTheDocument();\n  });\n\n  it(\"should ensure the ref prop does not return null when modal is shown\", () => {\n    const ref = React.createRef<HTMLDivElement>();\n\n    const { getByTestId } = render(\n      <Modal id={id} show ref={ref} data-testid=\"modal\">\n        <div>Content</div>\n      </Modal>\n    );\n\n    expect(getByTestId(\"modal\")).toBeInTheDocument();\n    expect(ref.current).not.toBeNull();\n  });\n\n  it(\"should apply default size as 'medium' when not supplied with a size\", () => {\n    const { getByRole } = render(\n      <Modal id={id} show>\n        {childrenContent}\n      </Modal>\n    );\n\n    expect(getByRole(\"dialog\")).toHaveClass(\"sizeMedium\");\n  });\n\n  it(\"should apply the correct given 'large' size\", () => {\n    const { getByRole } = render(\n      <Modal id={id} show size=\"large\">\n        {childrenContent}\n      </Modal>\n    );\n\n    expect(getByRole(\"dialog\")).toHaveClass(\"sizeLarge\");\n  });\n\n  it(\"should call onClose when the close button is clicked with mouse\", () => {\n    const mockOnClose = vi.fn();\n    const { getByLabelText } = render(\n      <Modal id={id} show onClose={mockOnClose} closeButtonAriaLabel={closeButtonAriaLabel}>\n        {childrenContent}\n      </Modal>\n    );\n\n    fireEvent.click(getByLabelText(closeButtonAriaLabel));\n    expect(mockOnClose).toHaveBeenCalled();\n  });\n\n  it(\"should call onClose when the close button is clicked with keyboard\", () => {\n    const mockOnClose = vi.fn();\n    const { getByLabelText } = render(\n      <Modal id={id} show onClose={mockOnClose} closeButtonAriaLabel={closeButtonAriaLabel}>\n        {childrenContent}\n      </Modal>\n    );\n\n    fireEvent.focus(getByLabelText(closeButtonAriaLabel));\n    userEvent.type(getByLabelText(closeButtonAriaLabel), \"{space}\");\n    expect(mockOnClose).toHaveBeenCalled();\n  });\n\n  it(\"should call onClose when the backdrop is clicked\", () => {\n    const mockOnClose = vi.fn();\n    const { getByTestId } = render(\n      <Modal id={id} show onClose={mockOnClose}>\n        {childrenContent}\n      </Modal>\n    );\n\n    fireEvent.click(getByTestId(\"modal-overlay_\" + id));\n    expect(mockOnClose).toHaveBeenCalled();\n  });\n\n  it(\"should call onClose when the Escape key is pressed while modal loads with auto-focusable content\", () => {\n    const mockOnClose = vi.fn();\n    render(\n      <Modal id={id} show onClose={mockOnClose}>\n        {childrenContent}\n      </Modal>\n    );\n\n    userEvent.keyboard(\"{escape}\");\n    expect(mockOnClose).toHaveBeenCalled();\n  });\n\n  it(\"should call onClose when the Escape key is pressed while modal loads without an auto-focusable content\", () => {\n    const mockOnClose = vi.fn();\n    render(\n      <Modal id={id} show onClose={mockOnClose}>\n        <div aria-hidden>I am not focusable</div>\n      </Modal>\n    );\n\n    userEvent.keyboard(\"{escape}\");\n    expect(mockOnClose).toHaveBeenCalled();\n  });\n\n  it(\"should close only the top most modal when Escape is pressed with multiple modals open\", () => {\n    const mockOnCloseModal1 = vi.fn();\n    const mockOnCloseModal2 = vi.fn();\n\n    render(\n      <>\n        <Modal id=\"modal1\" show onClose={mockOnCloseModal1} data-testid=\"modal1\">\n          <div>Modal 1 Content</div>\n        </Modal>\n        <Modal id=\"modal2\" show onClose={mockOnCloseModal2} data-testid=\"modal2\">\n          <div>Modal 2 Content</div>\n        </Modal>\n      </>\n    );\n\n    userEvent.keyboard(\"{escape}\");\n\n    expect(mockOnCloseModal1).not.toHaveBeenCalled();\n    expect(mockOnCloseModal2).toHaveBeenCalled();\n  });\n\n  it(\"should trap focus inside the modal when opened and move it to first non top-actions element\", () => {\n    const { getByText, getByLabelText } = render(\n      <>\n        <button type=\"button\">Focusable outside</button>\n        <Modal id={id} show closeButtonAriaLabel={closeButtonAriaLabel}>\n          <button type=\"button\">Test button content</button>\n        </Modal>\n      </>\n    );\n    expect(getByText(\"Test button content\")).toHaveFocus();\n    userEvent.tab();\n    expect(getByLabelText(closeButtonAriaLabel)).toHaveFocus();\n    userEvent.tab();\n    expect(getByText(\"Test button content\")).toHaveFocus();\n  });\n\n  it(\"should release focus lock from inside the modal when closed\", () => {\n    const { rerender, getByText } = render(\n      <>\n        <button type=\"button\">Focusable outside 1</button>\n        <button type=\"button\">Focusable outside 2</button>\n        <Modal id={id} show closeButtonAriaLabel={closeButtonAriaLabel}>\n          <button type=\"button\">Test button content</button>\n        </Modal>\n      </>\n    );\n    expect(getByText(\"Test button content\")).toHaveFocus();\n\n    rerender(\n      <>\n        <button type=\"button\">Focusable outside 1</button>\n        <button type=\"button\">Focusable outside 2</button>\n        <Modal id={id} show={false} closeButtonAriaLabel={closeButtonAriaLabel}>\n          <button type=\"button\">Test button content</button>\n        </Modal>\n      </>\n    );\n\n    userEvent.tab();\n    expect(getByText(\"Focusable outside 1\")).toHaveFocus();\n    userEvent.tab();\n    expect(getByText(\"Focusable outside 2\")).toHaveFocus();\n  });\n\n  it(\"traps and moves focus between modal elements\", () => {\n    const { getByLabelText, getByText } = render(\n      <Modal id={id} show closeButtonAriaLabel={closeButtonAriaLabel}>\n        <button type=\"button\">Focusable 1</button>\n        <button type=\"button\">Focusable 2</button>\n      </Modal>\n    );\n    expect(getByText(\"Focusable 1\")).toHaveFocus();\n\n    userEvent.tab();\n    expect(getByText(\"Focusable 2\")).toHaveFocus();\n\n    userEvent.tab();\n    const closeButton = getByLabelText(closeButtonAriaLabel);\n    expect(closeButton).toHaveFocus();\n\n    userEvent.tab();\n    expect(getByText(\"Focusable 1\")).toHaveFocus();\n  });\n\n  it(\"should allow focus by default if onFocusAttempt is not provided\", () => {\n    const { getByText, getByLabelText } = render(\n      <>\n        <button type=\"button\">Focusable outside</button>\n        <Modal id={id} show closeButtonAriaLabel={closeButtonAriaLabel}>\n          <button type=\"button\">Focusable 1</button>\n          <button type=\"button\">Focusable 2</button>\n        </Modal>\n      </>\n    );\n\n    expect(getByText(\"Focusable 1\")).toHaveFocus();\n\n    userEvent.tab();\n    expect(getByText(\"Focusable 2\")).toHaveFocus();\n\n    userEvent.tab();\n    expect(getByLabelText(closeButtonAriaLabel)).toHaveFocus();\n  });\n\n  it(\"should block focus if onFocusAttempt returns HTMLElement\", () => {\n    const modalRef = React.createRef<HTMLDivElement>();\n    const onFocusAttemptMock = vi.fn(nextFocusedElement => {\n      return nextFocusedElement.textContent === \"Focusable 2\" ? modalRef.current : true;\n    });\n\n    const { getByText, getByRole } = render(\n      <>\n        <button type=\"button\">Focusable outside</button>\n        <Modal\n          id={id}\n          ref={modalRef}\n          show\n          onFocusAttempt={onFocusAttemptMock}\n          closeButtonAriaLabel={closeButtonAriaLabel}\n        >\n          <button type=\"button\">Focusable 1</button>\n          <button type=\"button\">Focusable 2</button>\n        </Modal>\n      </>\n    );\n\n    expect(getByText(\"Focusable 1\")).toHaveFocus();\n\n    userEvent.tab();\n    expect(onFocusAttemptMock).toHaveBeenCalledWith(getByText(\"Focusable 2\"));\n    // initial + focusable 1 + ignored focusable 2 + enforced modal\n    expect(onFocusAttemptMock).toHaveBeenCalledTimes(4);\n    expect(getByRole(\"dialog\")).toHaveFocus();\n  });\n\n  it(\"should not auto-focus any modal content when autoFocus is false\", () => {\n    const outsideButtonRef = React.createRef<HTMLButtonElement>();\n    const { getByText } = render(\n      <>\n        <button type=\"button\" ref={outsideButtonRef}>\n          Focusable outside\n        </button>\n        <Modal id={id} show autoFocus={false} closeButtonAriaLabel={closeButtonAriaLabel}>\n          <button type=\"button\">Focusable 1</button>\n        </Modal>\n      </>\n    );\n\n    expect(document.body).toHaveFocus();\n    userEvent.tab();\n    expect(document.body).toHaveFocus();\n\n    userEvent.tab();\n    expect(getByText(\"Focusable 1\")).toHaveFocus();\n  });\n\n  describe(\"integrated with ModalContent\", () => {\n    it(\"should trap and moves focus to focusable element inside ModalContent and to cycle through full focus flow\", () => {\n      const { getByLabelText, getByText } = render(\n        <Modal id={id} show closeButtonAriaLabel={closeButtonAriaLabel}>\n          <button type=\"button\">Focusable 1</button>\n          <ModalContent>\n            <button type=\"button\">Focusable inside ModalContent</button>\n          </ModalContent>\n          <button type=\"button\">Focusable 2</button>\n        </Modal>\n      );\n      expect(getByText(\"Focusable inside ModalContent\")).toHaveFocus();\n\n      userEvent.tab();\n      expect(getByText(\"Focusable 2\")).toHaveFocus();\n\n      userEvent.tab();\n      expect(getByLabelText(closeButtonAriaLabel)).toHaveFocus();\n\n      userEvent.tab();\n      expect(getByText(\"Focusable 1\")).toHaveFocus();\n\n      userEvent.tab();\n      expect(getByText(\"Focusable inside ModalContent\")).toHaveFocus();\n    });\n\n    it(\"should pass autoFocus prop value to ModalContent's data-autofocus-inside attribute\", () => {\n      const { getByTestId, rerender } = render(\n        <Modal id={id} show>\n          <ModalContent data-testid=\"modal-content\">Some content</ModalContent>\n        </Modal>\n      );\n\n      expect(getByTestId(\"modal-content\")).toHaveAttribute(\"data-autofocus-inside\", \"true\");\n\n      rerender(\n        <Modal id={id} show autoFocus={false}>\n          <ModalContent data-testid=\"modal-content\">Some content</ModalContent>\n        </Modal>\n      );\n\n      expect(getByTestId(\"modal-content\")).toHaveAttribute(\"data-autofocus-inside\", \"false\");\n    });\n  });\n\n  describe(\"integrated with ModalHeader\", () => {\n    it(\"should use auto-generated aria-labelledby when none is provided\", () => {\n      const { getByRole } = render(\n        <Modal show id={id}>\n          <ModalHeader title=\"Title from Header\" />\n        </Modal>\n      );\n\n      expect(getByRole(\"dialog\")).toHaveAttribute(\"aria-labelledby\", `${id}_label`);\n    });\n\n    it(\"should use auto-generated aria-describedby when none is provided\", () => {\n      const { getByRole } = render(\n        <Modal show id={id}>\n          <ModalHeader title=\"Title\" description=\"Some description\" />\n        </Modal>\n      );\n\n      expect(getByRole(\"dialog\")).toHaveAttribute(\"aria-describedby\", `${id}_desc`);\n    });\n\n    it(\"should respect user-provided aria-labelledby and should not use the auto-generated ID\", () => {\n      const customAriaLabelId = \"myCustomTitleId\";\n      const { getByRole } = render(\n        <Modal show id={id} aria-labelledby={customAriaLabelId}>\n          <ModalHeader title=\"Header Title\" />\n        </Modal>\n      );\n\n      expect(getByRole(\"dialog\")).toHaveAttribute(\"aria-labelledby\", customAriaLabelId);\n    });\n\n    it(\"should respect user-provided aria-describedby and should not generate an ID\", () => {\n      const customAriaDescId = \"myCustomDescriptionId\";\n      const { getByRole } = render(\n        <Modal show id={id} aria-describedby={customAriaDescId}>\n          <ModalHeader title=\"Header Title\" description=\"I am a description\" />\n        </Modal>\n      );\n\n      expect(getByRole(\"dialog\")).toHaveAttribute(\"aria-describedby\", customAriaDescId);\n    });\n\n    it(\"should respect user-provided aria-describedby even if description isn't supplied to ModalHeader\", () => {\n      const customAriaDescId = \"myCustomDescriptionId\";\n      const { getByRole } = render(\n        <Modal show id={id} aria-describedby={customAriaDescId}>\n          <ModalHeader title=\"Header Title\" />\n        </Modal>\n      );\n\n      expect(getByRole(\"dialog\")).toHaveAttribute(\"aria-describedby\", customAriaDescId);\n    });\n\n    it(\"should not generate aria-describedby if there is no description in ModalHeader and the user provided none\", () => {\n      const { getByRole } = render(\n        <Modal show id={id}>\n          <ModalHeader title=\"Just a title, no description\" />\n        </Modal>\n      );\n\n      expect(getByRole(\"dialog\")).not.toHaveAttribute(\"aria-describedby\");\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Modal/Modal/index.ts",
    "content": "export { default as Modal } from \"./Modal\";\nexport { type ModalProps } from \"./Modal.types\";\n"
  },
  {
    "path": "packages/core/src/components/Modal/ModalContent/ModalContent.tsx",
    "content": "import React, { forwardRef } from \"react\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport { type ModalContentProps } from \"./ModalContent.types\";\nimport { useModal } from \"../context/ModalContext\";\n\nconst ModalContent = forwardRef(\n  (\n    { children, className, id, \"data-testid\": dataTestId }: ModalContentProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const { autoFocus } = useModal();\n    return (\n      <div\n        ref={ref}\n        className={className}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_CONTENT, id)}\n        data-autofocus-inside={autoFocus}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nexport default ModalContent;\n"
  },
  {
    "path": "packages/core/src/components/Modal/ModalContent/ModalContent.types.ts",
    "content": "import type React from \"react\";\nimport { type VibeComponentProps } from \"../../../types\";\n\nexport interface ModalContentProps extends VibeComponentProps {\n  /**\n   * The main content of the modal.\n   */\n  children?: React.ReactNode;\n}\n"
  },
  {
    "path": "packages/core/src/components/Modal/ModalContent/index.ts",
    "content": "export { default as ModalContent } from \"./ModalContent\";\nexport { type ModalContentProps } from \"./ModalContent.types\";\n"
  },
  {
    "path": "packages/core/src/components/Modal/ModalHeader/ModalHeader.module.scss",
    "content": ".header {\n  width: 100%;\n  align-self: flex-start;\n\n  .title {\n    width: 100%;\n  }\n\n  .descriptionIcon {\n    flex-shrink: 0;\n    margin-inline-end: var(--space-4);\n    color: var(--icon-color);\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Modal/ModalHeader/ModalHeader.tsx",
    "content": "import React, { forwardRef, useEffect } from \"react\";\nimport cx from \"classnames\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport styles from \"./ModalHeader.module.scss\";\nimport { type ModalHeaderProps } from \"./ModalHeader.types\";\nimport { Flex } from \"@vibe/layout\";\nimport { Heading, Text } from \"@vibe/typography\";\nimport { Icon } from \"@vibe/icon\";\nimport { useModal } from \"../context/ModalContext\";\n\nconst ModalHeader = forwardRef(\n  (\n    { title, description, descriptionIcon, className, id, \"data-testid\": dataTestId }: ModalHeaderProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const { modalId, setDescriptionId, setTitleId } = useModal();\n    const titleId = id ? `${modalId}_${id}_label` : `${modalId}_label`;\n    const descriptionId = id ? `${modalId}_${id}_desc` : `${modalId}_desc`;\n\n    useEffect(() => {\n      if (!modalId) return;\n      setTitleId(titleId);\n      if (!description) return;\n      setDescriptionId(descriptionId);\n    }, [modalId, setTitleId, titleId, description, setDescriptionId, descriptionId]);\n\n    return (\n      <Flex\n        gap=\"xs\"\n        direction=\"column\"\n        align=\"start\"\n        ref={ref}\n        className={cx(styles.header, className)}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_HEADER, id)}\n      >\n        {typeof title === \"string\" ? (\n          <Heading id={titleId} align=\"inherit\" type=\"h2\" weight=\"medium\" maxLines={2} className={styles.title}>\n            {title}\n          </Heading>\n        ) : (\n          title\n        )}\n\n        {description && (\n          <Flex id={descriptionId}>\n            {descriptionIcon && (\n              <Icon\n                icon={typeof descriptionIcon === \"object\" ? descriptionIcon.name : descriptionIcon}\n                className={cx(styles.descriptionIcon, typeof descriptionIcon === \"object\" && descriptionIcon.className)}\n              />\n            )}\n            {typeof description === \"string\" ? (\n              <Text element=\"span\" align=\"inherit\" type=\"text1\">\n                {description}\n              </Text>\n            ) : (\n              description\n            )}\n          </Flex>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default ModalHeader;\n"
  },
  {
    "path": "packages/core/src/components/Modal/ModalHeader/ModalHeader.types.ts",
    "content": "import type React from \"react\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\n\ninterface WithoutDescription {\n  description?: never;\n  descriptionIcon?: never;\n}\n\ninterface WithDescription {\n  /**\n   * Descriptive text or content below the title.\n   * - If you pass a **string**, this will automatically set an internally generated `aria-describedby` on the parent Modal.\n   * - If you pass a **ReactNode** (e.g., a complex component), we recommend assigning an **`id`** to that component (or a nested element),\n   *   and then pass that same ID in `aria-describedby` to the **Modal** (overriding the internal ID).\n   *\n   * This ensures that assistive technologies know which element is the modal's descriptive content.\n   * @see [WAI-ARIA Authoring Practices for Dialog (Modal)](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/#wai-ariaroles,states,andproperties)\n   */\n  description: string | React.ReactNode;\n  /**\n   * Icon to display before the description. Can only be passed when description is supplied.\n   */\n  descriptionIcon?:\n    | SubIcon\n    | {\n        name: SubIcon;\n        className?: string;\n      };\n}\n\nexport type ModalHeaderProps = {\n  /**\n   * Main heading text of the modal.\n   *\n   * - If you pass a **string**, `ModalHeader` will generate an internal ID and communicate it to the parent `Modal`\n   *   so that `aria-labelledby` is set automatically (unless `Modal` receives `aria-labelledby` prop).\n   * - If you pass a **ReactNode** (such as a custom component), **you must**:\n   *   1. Assign an **`id`** to that element (or a nested element), and\n   *   2. Pass that **same `id`** as the `aria-labelledby` prop to the `Modal`.\n   *\n   * This ensures that assistive technologies know which element is the modal's title.\n   * @see [WAI-ARIA Authoring Practices for Dialog (Modal)](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/#wai-ariaroles,states,andproperties)\n   */\n  title: string | React.ReactNode;\n} & (WithDescription | WithoutDescription) &\n  VibeComponentProps;\n"
  },
  {
    "path": "packages/core/src/components/Modal/ModalHeader/__tests__/ModalHeader.test.tsx",
    "content": "import { vi, beforeEach, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { render } from \"@testing-library/react\";\nimport ModalHeader from \"../ModalHeader\";\nimport { Text as TextIcon } from \"@vibe/icons\";\nimport { useModal } from \"../../context/ModalContext\";\nimport { type ModalContextProps } from \"../../context/ModalContext.types\";\n\nvi.mock(\"../../context/ModalContext\", () => ({\n  useModal: vi.fn()\n}));\nconst useModalMocked = vi.mocked(useModal);\n\ndescribe(\"ModalHeader\", () => {\n  const title = \"Test Modal Header\";\n  const simpleDescription = \"This is a description\";\n\n  const useModalMockedReturnedValue: ModalContextProps = {\n    modalId: \"modal-id\",\n    setTitleId: vi.fn(),\n    setDescriptionId: vi.fn()\n  };\n\n  beforeEach(() => {\n    // Reset all mocks before each test\n    vi.clearAllMocks();\n    (useModalMockedReturnedValue.setTitleId as any).mockClear();\n    (useModalMockedReturnedValue.setDescriptionId as any).mockClear();\n\n    useModalMocked.mockReturnValue(useModalMockedReturnedValue);\n  });\n\n  it(\"should render a Heading component when title is a string\", () => {\n    const { getByRole } = render(<ModalHeader title={title} />);\n    const headingElement = getByRole(\"heading\", { name: title });\n    expect(headingElement).toBeInTheDocument();\n  });\n\n  it(\"should not wrap in Heading if title is a ReactNode\", () => {\n    const CustomTitle = () => <div data-testid=\"custom-title\">My Custom Title</div>;\n\n    const { getByTestId, queryByRole } = render(<ModalHeader title={<CustomTitle />} />);\n\n    expect(getByTestId(\"custom-title\")).toBeInTheDocument();\n    expect(queryByRole(\"heading\")).not.toBeInTheDocument();\n  });\n\n  it(\"should render the description correctly\", () => {\n    const { getByText } = render(<ModalHeader title={title} description={simpleDescription} />);\n\n    expect(getByText(simpleDescription)).toBeInTheDocument();\n  });\n\n  it(\"should render the description icon when provided\", () => {\n    const { getByText, getByTestId } = render(\n      <ModalHeader title={title} description={simpleDescription} descriptionIcon={TextIcon} />\n    );\n\n    expect(getByText(simpleDescription)).toBeInTheDocument();\n    expect(getByTestId(\"icon\")).toBeInTheDocument();\n  });\n\n  it(\"should render custom description node\", () => {\n    const customDescription = <span data-testid=\"custom-description\">Custom description content</span>;\n\n    const { getByTestId } = render(<ModalHeader title={title} description={customDescription} />);\n\n    expect(getByTestId(\"custom-description\")).toBeInTheDocument();\n  });\n\n  it(\"should not render description when not provided\", () => {\n    const { queryByText } = render(<ModalHeader title={title} />);\n\n    expect(queryByText(simpleDescription)).not.toBeInTheDocument();\n  });\n\n  it(\"should render with description icon when descriptionIcon is an object\", () => {\n    const descriptionIconObject = {\n      name: TextIcon,\n      className: \"with-custom-icon-class\"\n    };\n\n    const { getByTestId } = render(\n      <ModalHeader title={title} description={simpleDescription} descriptionIcon={descriptionIconObject} />\n    );\n\n    const icon = getByTestId(\"icon\");\n    expect(icon).toHaveClass(descriptionIconObject.className);\n  });\n\n  it(\"should call setTitleId if modalId is available and title is provided\", () => {\n    render(<ModalHeader title=\"Title\" />);\n    expect(useModalMockedReturnedValue.setTitleId).toHaveBeenCalledWith(\"modal-id_label\");\n  });\n\n  it(\"should call setDescriptionId if modalId is available and description is provided\", () => {\n    render(<ModalHeader title=\"Title\" description=\"I am a description\" />);\n    expect(useModalMockedReturnedValue.setDescriptionId).toHaveBeenCalledWith(\"modal-id_desc\");\n  });\n\n  it(\"should not call setDescriptionId if no description is provided\", () => {\n    render(<ModalHeader title=\"Title\" />);\n    expect(useModalMockedReturnedValue.setDescriptionId).not.toHaveBeenCalled();\n  });\n\n  it(\"should renders the title with the correct id\", () => {\n    const { getByText } = render(<ModalHeader title={title} />);\n\n    const titleElement = getByText(title);\n    expect(titleElement).toHaveAttribute(\"id\", \"modal-id_label\");\n  });\n\n  it(\"should render the description container with the correct id when provided\", () => {\n    const { getByText } = render(<ModalHeader title={title} description={simpleDescription} />);\n\n    const descriptionElement = getByText(simpleDescription);\n    expect(descriptionElement.parentElement).toHaveAttribute(\"id\", \"modal-id_desc\");\n  });\n\n  it(\"should call setTitleId and setDescriptionId with a custom id if provided\", () => {\n    const customId = \"custom-header-id\";\n    render(<ModalHeader title={title} id={customId} description={simpleDescription} />);\n\n    expect(useModalMockedReturnedValue.setTitleId).toHaveBeenCalledWith(\"modal-id_custom-header-id_label\");\n    expect(useModalMockedReturnedValue.setDescriptionId).toHaveBeenCalledWith(\"modal-id_custom-header-id_desc\");\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Modal/ModalHeader/index.ts",
    "content": "export { default as ModalHeader } from \"./ModalHeader\";\nexport { type ModalHeaderProps } from \"./ModalHeader.types\";\n"
  },
  {
    "path": "packages/core/src/components/Modal/ModalMedia/ModalMedia.module.scss",
    "content": ".media {\n  max-width: 100%;\n  max-height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex: 1 0;\n  overflow: hidden;\n  position: relative;\n}\n"
  },
  {
    "path": "packages/core/src/components/Modal/ModalMedia/ModalMedia.tsx",
    "content": "import React, { forwardRef } from \"react\";\nimport { Flex } from \"@vibe/layout\";\nimport { type ModalMediaProps } from \"./ModalMedia.types\";\nimport styles from \"./ModalMedia.module.scss\";\nimport cx from \"classnames\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\n\nconst ModalMedia = forwardRef(\n  (\n    { children, className, id, \"data-testid\": dataTestId }: ModalMediaProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    return (\n      <Flex\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_MEDIA, id)}\n        justify=\"center\"\n        align=\"stretch\"\n        ref={ref}\n        className={cx(styles.media, className)}\n      >\n        {children}\n      </Flex>\n    );\n  }\n);\n\nexport default ModalMedia;\n"
  },
  {
    "path": "packages/core/src/components/Modal/ModalMedia/ModalMedia.types.ts",
    "content": "import type React from \"react\";\nimport { type VibeComponentProps } from \"../../../types\";\n\nexport interface ModalMediaProps extends VibeComponentProps {\n  /**\n   * The media content displayed in the modal.\n   */\n  children: React.ReactNode;\n}\n"
  },
  {
    "path": "packages/core/src/components/Modal/ModalMedia/index.ts",
    "content": "export { default as ModalMedia } from \"./ModalMedia\";\nexport { type ModalMediaProps } from \"./ModalMedia.types\";\n"
  },
  {
    "path": "packages/core/src/components/Modal/ModalTopActions/ModalTopActions.module.scss",
    "content": ".actions {\n  display: flex;\n  align-items: center;\n  position: absolute;\n  inset-inline-end: var(--top-actions-margin-inline);\n  top: var(--top-actions-margin-block);\n}\n"
  },
  {
    "path": "packages/core/src/components/Modal/ModalTopActions/ModalTopActions.tsx",
    "content": "import React from \"react\";\nimport styles from \"./ModalTopActions.module.scss\";\nimport {\n  type ModalTopActionsButtonColor,\n  type ModalTopActionsTheme,\n  type ModalTopActionsProps\n} from \"./ModalTopActions.types\";\nimport { IconButton } from \"@vibe/icon-button\";\nimport { CloseMedium } from \"@vibe/icons\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\n\nconst colorToButtonColor: Record<ModalTopActionsTheme, ModalTopActionsButtonColor> = {\n  dark: \"fixed-dark\",\n  light: \"fixed-light\"\n};\n\nconst ModalTopActions = ({ renderAction, theme, closeButtonAriaLabel, onClose }: ModalTopActionsProps) => {\n  const buttonColor = colorToButtonColor[theme] || \"primary\";\n\n  return (\n    <div className={styles.actions} data-no-autofocus={true}>\n      {typeof renderAction === \"function\" ? renderAction(buttonColor) : renderAction}\n      <IconButton\n        data-testid={ComponentDefaultTestId.MODAL_CLOSE_BUTTON}\n        icon={CloseMedium}\n        onClick={onClose}\n        size=\"small\"\n        kind=\"tertiary\"\n        color={buttonColor}\n        aria-label={closeButtonAriaLabel}\n      />\n    </div>\n  );\n};\n\nexport default ModalTopActions;\n"
  },
  {
    "path": "packages/core/src/components/Modal/ModalTopActions/ModalTopActions.types.ts",
    "content": "import type React from \"react\";\nimport type MenuButton from \"../../MenuButton/MenuButton\";\nimport type { IconButton } from \"@vibe/icon-button\";\nimport { type ButtonColor } from \"@vibe/button\";\n\nexport type ModalTopActionsTheme = \"light\" | \"dark\";\nexport type ModalTopActionsButtonColor = Extract<ButtonColor, \"primary\" | \"fixed-light\" | \"fixed-dark\">;\n\nexport interface ModalTopActionsProps {\n  /**\n   * The action element or a function that renders an action element in the top-right area.\n   * When provided as a function, it receives the current button color theme.\n   */\n  renderAction?:\n    | React.ReactElement<typeof MenuButton | typeof IconButton>\n    | ((color?: ModalTopActionsButtonColor) => React.ReactElement<typeof MenuButton | typeof IconButton>);\n  /**\n   * The color theme for the top actions.\n   */\n  theme?: ModalTopActionsTheme;\n  /**\n   * The label of the close button for accessibility.\n   */\n  closeButtonAriaLabel?: string;\n  /**\n   * Callback fired when the close button is clicked.\n   */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n}\n"
  },
  {
    "path": "packages/core/src/components/Modal/ModalTopActions/__tests__/ModalTopActions.test.tsx",
    "content": "import { vi, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { render, fireEvent, within } from \"@testing-library/react\";\nimport ModalTopActions from \"../ModalTopActions\";\nimport { IconButton } from \"@vibe/icon-button\";\nimport { Feedback as FeedbackIcon } from \"@vibe/icons\";\n\ndescribe(\"ModalTopActions\", () => {\n  const closeButtonAriaLabel = \"Close modal\";\n\n  it(\"renders the close button with the correct aria-label\", () => {\n    const { getByLabelText } = render(<ModalTopActions closeButtonAriaLabel={closeButtonAriaLabel} />);\n\n    expect(getByLabelText(closeButtonAriaLabel)).toBeInTheDocument();\n  });\n\n  it(\"calls onClose when the close button is clicked\", () => {\n    const mockOnClose = vi.fn();\n\n    const { getByLabelText } = render(\n      <ModalTopActions onClose={mockOnClose} closeButtonAriaLabel={closeButtonAriaLabel} />\n    );\n\n    fireEvent.click(getByLabelText(closeButtonAriaLabel));\n    expect(mockOnClose).toHaveBeenCalled();\n  });\n\n  it(\"does not fail when onClose is not provided\", () => {\n    const { getByLabelText } = render(<ModalTopActions closeButtonAriaLabel={closeButtonAriaLabel} />);\n    fireEvent.click(getByLabelText(closeButtonAriaLabel));\n    expect(() => getByLabelText(closeButtonAriaLabel)).not.toThrow();\n  });\n\n  it(\"renders the action button using the renderAction prop as a function\", () => {\n    const renderAction = vi.fn(color => <IconButton data-testid=\"extra-action\" icon={FeedbackIcon} color={color} />);\n    const { getByTestId } = render(<ModalTopActions renderAction={renderAction} />);\n\n    expect(within(getByTestId(\"extra-action\")).getByTestId(\"icon\")).toBeInTheDocument();\n  });\n\n  it(\"calls renderAction with correct color argument\", () => {\n    const renderAction = vi.fn(color => <IconButton data-testid=\"extra-action\" icon={FeedbackIcon} color={color} />);\n    render(<ModalTopActions theme=\"dark\" renderAction={renderAction} />);\n\n    expect(renderAction).toHaveBeenCalledWith(\"fixed-dark\");\n  });\n\n  it(\"renders the action button using the renderAction prop directly\", () => {\n    const renderAction = <IconButton data-testid=\"extra-action\" icon={FeedbackIcon} color=\"on-primary-color\" />;\n    const { getByTestId } = render(<ModalTopActions renderAction={renderAction} />);\n\n    expect(within(getByTestId(\"extra-action\")).getByTestId(\"icon\")).toBeInTheDocument();\n  });\n\n  it(\"applies the correct color when 'dark' is passed\", () => {\n    const { getByLabelText } = render(<ModalTopActions theme=\"dark\" closeButtonAriaLabel={closeButtonAriaLabel} />);\n    expect(getByLabelText(closeButtonAriaLabel)).toHaveClass(\"colorFixedDark\");\n  });\n\n  it(\"applies the correct color when 'light' is passed\", () => {\n    const { getByLabelText } = render(<ModalTopActions theme=\"light\" closeButtonAriaLabel={closeButtonAriaLabel} />);\n    expect(getByLabelText(closeButtonAriaLabel)).toHaveClass(\"colorFixedLight\");\n  });\n\n  it(\"applies the default color when no color is passed\", () => {\n    const { getByLabelText } = render(<ModalTopActions closeButtonAriaLabel={closeButtonAriaLabel} />);\n    expect(getByLabelText(closeButtonAriaLabel)).toHaveClass(\"colorPrimary\");\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Modal/context/ModalContext.tsx",
    "content": "import React, { createContext, useContext } from \"react\";\nimport { type ModalContextProps, type ModalProviderProps } from \"./ModalContext.types\";\n\nconst ModalContext = createContext<ModalContextProps | undefined>(undefined);\n\nexport const ModalProvider = ({ value, children }: ModalProviderProps) => {\n  return <ModalContext.Provider value={value}>{children}</ModalContext.Provider>;\n};\n\nexport const useModal = (): ModalContextProps => {\n  const context = useContext(ModalContext);\n  if (!context) {\n    throw new Error(\"useModal must be used within a ModalProvider\");\n  }\n  return context;\n};\n"
  },
  {
    "path": "packages/core/src/components/Modal/context/ModalContext.types.ts",
    "content": "import type React from \"react\";\n\nexport type ModalContextProps = ModalProviderValue;\n\nexport type ModalProviderValue = {\n  /**\n   * Unique identifier for the modal.\n   * Used to ensure modal title and description IDs are unique.\n   */\n  modalId: string;\n  /**\n   * Callback to set the title element ID for accessibility.\n   */\n  setTitleId: (id: string) => void;\n  /**\n   * Callback to set the description element ID for accessibility.\n   */\n  setDescriptionId: (id: string) => void;\n  /**\n   * If true, the modal automatically focuses on open.\n   */\n  autoFocus?: boolean;\n};\n\nexport interface ModalProviderProps {\n  /**\n   * The context value containing modal state and handlers.\n   */\n  value: ModalProviderValue;\n  /**\n   * The children of the modal provider.\n   * Should wrap the root of the Modal.\n   */\n  children: React.ReactNode;\n}\n"
  },
  {
    "path": "packages/core/src/components/Modal/footers/ModalFooter/ModalFooter.module.scss",
    "content": ".primary {\n  order: 2;\n\n  &:only-child {\n    margin-inline-start: auto;\n  }\n}\n\n.secondary {\n  order: 1;\n  margin-inline-start: auto;\n}\n"
  },
  {
    "path": "packages/core/src/components/Modal/footers/ModalFooter/ModalFooter.tsx",
    "content": "import React, { forwardRef } from \"react\";\nimport ModalFooterBase from \"../ModalFooterBase/ModalFooterBase\";\nimport { getTestId } from \"../../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../../tests/constants\";\nimport { type ModalFooterProps } from \"./ModalFooter.types\";\nimport styles from \"./ModalFooter.module.scss\";\nimport { getPropsForButton } from \"../utils/getPropsForButton\";\n\nconst ModalFooter = forwardRef(\n  (\n    { primaryButton, secondaryButton, renderSideAction, \"data-testid\": dataTestId, className, id }: ModalFooterProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const primary = getPropsForButton(primaryButton, styles.primary);\n    const secondary = getPropsForButton(secondaryButton, styles.secondary);\n\n    return (\n      <ModalFooterBase\n        ref={ref}\n        className={className}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_FOOTER, id)}\n        primaryButton={primary}\n        secondaryButton={secondary}\n        renderAction={renderSideAction}\n      />\n    );\n  }\n);\n\nexport default ModalFooter;\n"
  },
  {
    "path": "packages/core/src/components/Modal/footers/ModalFooter/ModalFooter.types.ts",
    "content": "import type React from \"react\";\nimport { type ModalFooterBaseProps } from \"../ModalFooterBase/ModalFooterBase.types\";\n\nexport interface ModalFooterProps extends Omit<ModalFooterBaseProps, \"renderAction\"> {\n  /**\n   * Content displayed on the left side of the footer.\n   */\n  renderSideAction?: React.ReactNode;\n}\n"
  },
  {
    "path": "packages/core/src/components/Modal/footers/ModalFooterBase/ModalFooterBase.module.scss",
    "content": ".footer {\n  position: relative;\n  width: 100%;\n  padding: 20px var(--space-24);\n  flex-shrink: 0;\n  background-color: var(--primary-background-color);\n}\n"
  },
  {
    "path": "packages/core/src/components/Modal/footers/ModalFooterBase/ModalFooterBase.tsx",
    "content": "import React, { forwardRef } from \"react\";\nimport styles from \"./ModalFooterBase.module.scss\";\nimport { Button } from \"@vibe/button\";\nimport { Flex } from \"@vibe/layout\";\nimport { type ModalFooterBaseProps } from \"./ModalFooterBase.types\";\nimport cx from \"classnames\";\nimport { Tooltip } from \"@vibe/tooltip\";\n\nconst ModalFooterBase = forwardRef(\n  (\n    { primaryButton, secondaryButton, renderAction, id, className, \"data-testid\": dataTestId }: ModalFooterBaseProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const {\n      text: primaryButtonText,\n      tooltipProps: primaryButtonTooltipProps = {},\n      ...primaryButtonProps\n    } = primaryButton;\n    const {\n      text: secondaryButtonText,\n      tooltipProps: secondaryButtonTooltipProps = {},\n      ...secondaryButtonProps\n    } = secondaryButton || {};\n\n    return (\n      <Flex\n        ref={ref}\n        id={id}\n        justify=\"space-between\"\n        gap=\"small\"\n        className={cx(styles.footer, className)}\n        data-testid={dataTestId}\n      >\n        <Tooltip {...primaryButtonTooltipProps} content={primaryButtonTooltipProps.content}>\n          <Button {...primaryButtonProps}>{primaryButtonText}</Button>\n        </Tooltip>\n        {secondaryButton && (\n          <Tooltip {...secondaryButtonTooltipProps} content={secondaryButtonTooltipProps.content}>\n            <Button {...secondaryButtonProps} kind=\"tertiary\">\n              {secondaryButtonText}\n            </Button>\n          </Tooltip>\n        )}\n        {renderAction}\n      </Flex>\n    );\n  }\n);\n\nexport default ModalFooterBase;\n"
  },
  {
    "path": "packages/core/src/components/Modal/footers/ModalFooterBase/ModalFooterBase.types.ts",
    "content": "import { type ButtonProps } from \"@vibe/button\";\nimport type React from \"react\";\nimport { type VibeComponentProps } from \"../../../../types\";\nimport { type TooltipProps } from \"@vibe/tooltip\";\n\nexport interface ModalFooterActionProps extends Omit<ButtonProps, \"children\" | \"kind\" | \"size\"> {\n  /**\n   * The text displayed inside the button.\n   */\n  text: string;\n  /**\n   * Props for displaying a tooltip on the button.\n   */\n  tooltipProps?: Partial<TooltipProps>;\n}\n\nexport interface ModalFooterBaseProps extends VibeComponentProps {\n  /**\n   * Props for the primary action button.\n   */\n  primaryButton: ModalFooterActionProps;\n  /**\n   * Props for the optional secondary action button.\n   */\n  secondaryButton?: ModalFooterActionProps;\n  /**\n   * Additional content rendered inside the footer.\n   */\n  renderAction?: React.ReactNode;\n}\n"
  },
  {
    "path": "packages/core/src/components/Modal/footers/ModalFooterBase/__tests__/ModalFooterBase.test.tsx",
    "content": "import { vi, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { render, fireEvent } from \"@testing-library/react\";\nimport ModalFooterBase from \"../ModalFooterBase\";\n\ndescribe(\"ModalFooterBase\", () => {\n  const primaryButton = {\n    text: \"Save\",\n    onClick: vi.fn()\n  };\n\n  const secondaryButton = {\n    text: \"Cancel\",\n    onClick: vi.fn()\n  };\n\n  it(\"renders the primary button with the correct text\", () => {\n    const { getByText } = render(<ModalFooterBase primaryButton={primaryButton} />);\n\n    const primaryButtonElement = getByText(\"Save\");\n    expect(primaryButtonElement).toBeInTheDocument();\n  });\n\n  it(\"does not render more than one child when only supplying primary button\", () => {\n    const { container } = render(<ModalFooterBase primaryButton={primaryButton} />);\n    expect(container.firstChild.childNodes).toHaveLength(1);\n  });\n\n  it(\"renders the secondary button with the correct text\", () => {\n    const { getByText } = render(<ModalFooterBase primaryButton={primaryButton} secondaryButton={secondaryButton} />);\n\n    const secondaryButtonElement = getByText(\"Cancel\");\n    expect(secondaryButtonElement).toBeInTheDocument();\n  });\n\n  it(\"calls the primary button's onClick when clicked\", () => {\n    const { getByText } = render(<ModalFooterBase primaryButton={primaryButton} secondaryButton={secondaryButton} />);\n\n    fireEvent.click(getByText(\"Save\"));\n    expect(primaryButton.onClick).toHaveBeenCalled();\n  });\n\n  it(\"calls the secondary button's onClick when clicked\", () => {\n    const { getByText } = render(<ModalFooterBase primaryButton={primaryButton} secondaryButton={secondaryButton} />);\n\n    fireEvent.click(getByText(\"Cancel\"));\n    expect(secondaryButton.onClick).toHaveBeenCalled();\n  });\n\n  it(\"renders the custom action via renderAction\", () => {\n    const customAction = <div data-testid=\"custom-action\">Custom Action</div>;\n    const { getByTestId } = render(<ModalFooterBase primaryButton={primaryButton} renderAction={customAction} />);\n\n    const customActionElement = getByTestId(\"custom-action\");\n    expect(customActionElement).toBeInTheDocument();\n    expect(customActionElement).toHaveTextContent(\"Custom Action\");\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Modal/footers/ModalFooterWizard/ModalFooterWizard.module.scss",
    "content": ".primary {\n  order: 2;\n}\n\n.secondary {\n  order: 1;\n}\n\n.stepDots {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  margin: 0;\n}\n"
  },
  {
    "path": "packages/core/src/components/Modal/footers/ModalFooterWizard/ModalFooterWizard.tsx",
    "content": "import React, { forwardRef } from \"react\";\nimport ModalFooterBase from \"../ModalFooterBase/ModalFooterBase\";\nimport { getTestId } from \"../../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../../tests/constants\";\nimport styles from \"./ModalFooterWizard.module.scss\";\nimport { StepsGalleryHeader } from \"../../../Steps/StepsGalleryHeader\";\nimport { type ModalFooterWizardProps } from \"./ModalFooterWizard.types\";\nimport { getPropsForButton } from \"../utils/getPropsForButton\";\n\nconst ModalFooterWizard = forwardRef(\n  (\n    {\n      primaryButton,\n      secondaryButton,\n      stepCount,\n      activeStep,\n      onStepClick,\n      \"data-testid\": dataTestId,\n      className,\n      id\n    }: ModalFooterWizardProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const primary = getPropsForButton(primaryButton, styles.primary);\n    const secondary = getPropsForButton(secondaryButton, styles.secondary);\n\n    const steps = (\n      <StepsGalleryHeader\n        stepsCount={stepCount}\n        activeStepIndex={activeStep}\n        onChangeActiveStep={(_, newStep) => onStepClick(newStep)}\n        className={styles.stepDots}\n      />\n    );\n\n    return (\n      <ModalFooterBase\n        ref={ref}\n        className={className}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_FOOTER, id)}\n        primaryButton={primary}\n        secondaryButton={secondary}\n        renderAction={steps}\n      />\n    );\n  }\n);\n\nexport default ModalFooterWizard;\n"
  },
  {
    "path": "packages/core/src/components/Modal/footers/ModalFooterWizard/ModalFooterWizard.types.ts",
    "content": "import { type ModalFooterBaseProps } from \"../ModalFooterBase/ModalFooterBase.types\";\nimport { type VibeComponentProps } from \"../../../../types\";\n\nexport interface ModalFooterWizardProps\n  extends Required<Pick<ModalFooterBaseProps, \"primaryButton\" | \"secondaryButton\">>,\n    VibeComponentProps {\n  /**\n   * The total number of steps in the wizard.\n   * Renders the corresponding number of step indicators (\"dots\") in the footer.\n   */\n  stepCount: number;\n  /**\n   * The current active step (0-based index).\n   * Highlights the corresponding step indicator (\"dot\") in the footer.\n   */\n  activeStep: number;\n  /**\n   * Callback fired when a step indicator (\"dot\") is clicked.\n   */\n  onStepClick: (stepIndex: number) => void;\n}\n"
  },
  {
    "path": "packages/core/src/components/Modal/footers/index.ts",
    "content": "export { default as ModalFooter } from \"./ModalFooter/ModalFooter\";\nexport { type ModalFooterProps } from \"./ModalFooter/ModalFooter.types\";\n\nexport { default as ModalFooterWizard } from \"./ModalFooterWizard/ModalFooterWizard\";\nexport { type ModalFooterWizardProps } from \"./ModalFooterWizard/ModalFooterWizard.types\";\n"
  },
  {
    "path": "packages/core/src/components/Modal/footers/utils/__tests__/getPropsForButton.test.ts",
    "content": "import { describe, it, expect } from \"vitest\";\nimport { getPropsForButton } from \"../getPropsForButton\";\nimport cx from \"classnames\";\n\ndescribe(\"getPropsForButton\", () => {\n  it(\"should return undefined when button is undefined\", () => {\n    expect(getPropsForButton(undefined, \"my-button-class\")).toBeUndefined();\n  });\n\n  it(\"should apply buttonClassName to className when tooltipProps are not present\", () => {\n    const result = getPropsForButton({ className: \"existing-class\", text: \"Click Me\" }, \"my-button-class\");\n    expect(result).toEqual({\n      text: \"Click Me\",\n      className: cx(\"existing-class\", \"my-button-class\"),\n      tooltipProps: undefined\n    });\n  });\n\n  it(\"should apply buttonClassName to tooltipProps.referenceWrapperClassName when tooltipProps exist\", () => {\n    const result = getPropsForButton(\n      { text: \"Click Me\", tooltipProps: { content: \"Hello\", referenceWrapperClassName: \"tooltip-class\" } },\n      \"my-button-class\"\n    );\n    expect(result).toEqual({\n      text: \"Click Me\",\n      className: undefined,\n      tooltipProps: { content: \"Hello\", referenceWrapperClassName: cx(\"tooltip-class\", \"my-button-class\") }\n    });\n  });\n\n  it(\"should keep className unchanged if tooltipProps exist\", () => {\n    const result = getPropsForButton(\n      { className: \"existing-class\", text: \"Click Me\", tooltipProps: { content: \"Hello\" } },\n      \"my-button-class\"\n    );\n    expect(result).toEqual({\n      text: \"Click Me\",\n      className: \"existing-class\",\n      tooltipProps: { content: \"Hello\", referenceWrapperClassName: \"my-button-class\" }\n    });\n  });\n\n  it(\"should attach the button className to button itself and return undefined tooltipProps if tooltip content is empty\", () => {\n    const result = getPropsForButton(\n      {\n        className: \"existing-class\",\n        text: \"Click Me\",\n        tooltipProps: { referenceWrapperClassName: \"original-tooltip-class\", content: \"\" }\n      },\n      \"my-button-class\"\n    );\n    expect(result).toEqual({\n      text: \"Click Me\",\n      className: cx(\"existing-class\", \"my-button-class\"),\n      tooltipProps: undefined\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Modal/footers/utils/getPropsForButton.ts",
    "content": "import { type ModalFooterActionProps } from \"../ModalFooterBase/ModalFooterBase.types\";\nimport cx from \"classnames\";\n\nexport function getPropsForButton(button?: ModalFooterActionProps, buttonClassName?: string) {\n  if (!button) return undefined;\n  const { tooltipProps, className, ...rest } = button;\n  return {\n    ...rest,\n    className: tooltipProps?.content ? className : cx(className, buttonClassName),\n    tooltipProps: tooltipProps?.content\n      ? { ...tooltipProps, referenceWrapperClassName: cx(tooltipProps.referenceWrapperClassName, buttonClassName) }\n      : undefined\n  };\n}\n"
  },
  {
    "path": "packages/core/src/components/Modal/hooks/useFocusEscapeTargets/__tests__/useFocusEscapeTargets.test.ts",
    "content": "import { describe, it, expect, beforeEach, afterEach } from \"vitest\";\nimport { renderHook, cleanup } from \"@testing-library/react-hooks\";\nimport { createRef } from \"react\";\nimport useFocusEscapeTargets from \"../useFocusEscapeTargets\";\nimport type { FocusEscapeTarget } from \"../useFocusEscapeTargets.types\";\n\ndescribe(\"useFocusEscapeTargets\", () => {\n  let container: HTMLDivElement;\n  let childElement: HTMLDivElement;\n  let siblingElement: HTMLDivElement;\n\n  beforeEach(() => {\n    container = document.createElement(\"div\");\n    container.className = \"test-container\";\n\n    childElement = document.createElement(\"div\");\n    childElement.className = \"test-child\";\n\n    siblingElement = document.createElement(\"div\");\n    siblingElement.className = \"test-sibling\";\n\n    container.appendChild(childElement);\n    document.body.appendChild(container);\n    document.body.appendChild(siblingElement);\n  });\n\n  afterEach(() => {\n    container.remove();\n    siblingElement.remove();\n    cleanup();\n  });\n\n  describe(\"no targets\", () => {\n    it(\"should return false when no targets provided\", () => {\n      const { result } = renderHook(() => useFocusEscapeTargets());\n      expect(result.current(childElement)).toBe(false);\n    });\n\n    it(\"should return false when element is undefined\", () => {\n      const { result } = renderHook(() => useFocusEscapeTargets([\".test-container\"]));\n      expect(result.current(undefined)).toBe(false);\n    });\n  });\n\n  describe(\"string selectors\", () => {\n    it(\"should match element by CSS selector\", () => {\n      const { result } = renderHook(() => useFocusEscapeTargets([\".test-child\"]));\n      expect(result.current(childElement)).toBe(true);\n    });\n\n    it(\"should match nested element using closest\", () => {\n      const nestedChild = document.createElement(\"span\");\n      childElement.appendChild(nestedChild);\n\n      const { result } = renderHook(() => useFocusEscapeTargets([\".test-child\"]));\n      expect(result.current(nestedChild)).toBe(true);\n    });\n\n    it(\"should not match unrelated elements\", () => {\n      const { result } = renderHook(() => useFocusEscapeTargets([\".test-child\"]));\n      expect(result.current(siblingElement)).toBe(false);\n    });\n  });\n\n  describe(\"HTMLElement targets\", () => {\n    it(\"should match element directly\", () => {\n      const { result } = renderHook(() => useFocusEscapeTargets([childElement]));\n      expect(result.current(childElement)).toBe(true);\n    });\n\n    it(\"should match children via contains\", () => {\n      const nestedChild = document.createElement(\"span\");\n      childElement.appendChild(nestedChild);\n\n      const { result } = renderHook(() => useFocusEscapeTargets([childElement]));\n      expect(result.current(nestedChild)).toBe(true);\n    });\n\n    it(\"should not match parent elements\", () => {\n      const { result } = renderHook(() => useFocusEscapeTargets([childElement]));\n      expect(result.current(container)).toBe(false);\n    });\n  });\n\n  describe(\"RefObject targets\", () => {\n    it(\"should match ref element\", () => {\n      const ref = createRef<HTMLDivElement>();\n      Object.defineProperty(ref, \"current\", {\n        writable: true,\n        value: childElement\n      });\n\n      const { result } = renderHook(() => useFocusEscapeTargets([ref]));\n      expect(result.current(childElement)).toBe(true);\n    });\n\n    it(\"should match children of ref element\", () => {\n      const ref = createRef<HTMLDivElement>();\n      Object.defineProperty(ref, \"current\", {\n        writable: true,\n        value: container\n      });\n\n      const { result } = renderHook(() => useFocusEscapeTargets([ref]));\n      expect(result.current(childElement)).toBe(true);\n    });\n\n    it(\"should handle null ref gracefully\", () => {\n      const ref = createRef<HTMLDivElement>();\n      const { result } = renderHook(() => useFocusEscapeTargets([ref]));\n      expect(result.current(childElement)).toBe(false);\n    });\n  });\n\n  describe(\"mixed targets\", () => {\n    it(\"should handle combination of all target types\", () => {\n      const ref = createRef<HTMLDivElement>();\n      Object.defineProperty(ref, \"current\", {\n        writable: true,\n        value: container\n      });\n\n      const extraElement = document.createElement(\"div\");\n      document.body.appendChild(extraElement);\n\n      const targets: FocusEscapeTarget[] = [\".test-sibling\", extraElement, ref];\n      const { result } = renderHook(() => useFocusEscapeTargets(targets));\n\n      expect(result.current(siblingElement)).toBe(true);\n      expect(result.current(extraElement)).toBe(true);\n      expect(result.current(childElement)).toBe(true);\n\n      extraElement.remove();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Modal/hooks/useFocusEscapeTargets/index.ts",
    "content": "export { default } from \"./useFocusEscapeTargets\";\nexport * from \"./useFocusEscapeTargets.types\";\n"
  },
  {
    "path": "packages/core/src/components/Modal/hooks/useFocusEscapeTargets/useFocusEscapeTargets.ts",
    "content": "import { useCallback, useMemo } from \"react\";\nimport { type FocusEscapeTarget } from \"./useFocusEscapeTargets.types\";\n\n/**\n * Hook that creates a checker function to determine if an element should be allowed\n * to receive focus outside of a focus lock (escape the focus trap).\n *\n * @param targets - Array of targets (selectors, refs, or elements) that should be allowed to receive focus and won't be managed by the focus-lock\n * @returns A function that returns `true` if the element matches any target (should be allowed to escape), `false` otherwise\n */\nconst useFocusEscapeTargets = (targets?: FocusEscapeTarget[]) => {\n  // Pre-process and separate targets by type for faster lookup\n  const { combinedSelector, elements } = useMemo(() => {\n    if (!targets || targets.length === 0) {\n      return { combinedSelector: null, elements: [] };\n    }\n\n    const selectorList: string[] = [];\n    const elementList: HTMLElement[] = [];\n\n    for (const item of targets) {\n      if (typeof item === \"string\") {\n        selectorList.push(item);\n      } else if (item && typeof item === \"object\" && \"current\" in item) {\n        // Resolve ref to element\n        if (item.current) {\n          elementList.push(item.current);\n        }\n      } else if (item instanceof HTMLElement) {\n        elementList.push(item);\n      }\n    }\n\n    // Combine all selectors into one for a single DOM traversal\n    const combined = selectorList.length > 0 ? selectorList.join(\", \") : null;\n\n    return { combinedSelector: combined, elements: elementList };\n  }, [targets]);\n\n  const shouldAllowFocusEscape = useCallback(\n    (element?: HTMLElement): boolean => {\n      if (!element) {\n        return false;\n      }\n\n      // Early exit if no targets\n      if (!combinedSelector && elements.length === 0) {\n        return false;\n      }\n\n      // Check all selectors with a single DOM traversal\n      if (combinedSelector && element.closest(combinedSelector)) {\n        return true;\n      }\n\n      // Check elements (direct match or contains)\n      for (let i = 0; i < elements.length; i++) {\n        const targetElement = elements[i];\n        if (element === targetElement || targetElement.contains(element)) {\n          return true;\n        }\n      }\n\n      return false;\n    },\n    [combinedSelector, elements]\n  );\n\n  return shouldAllowFocusEscape;\n};\n\nexport default useFocusEscapeTargets;\n"
  },
  {
    "path": "packages/core/src/components/Modal/hooks/useFocusEscapeTargets/useFocusEscapeTargets.types.ts",
    "content": "import type React from \"react\";\n\nexport type FocusEscapeTarget = string | HTMLElement | React.RefObject<HTMLElement>;\n"
  },
  {
    "path": "packages/core/src/components/Modal/hooks/usePortalTarget/usePortalTarget.ts",
    "content": "import { useEffect, useState } from \"react\";\nimport { type PortalTarget } from \"./usePortalTarget.types\";\n\nconst usePortalTarget = (portalTarget?: PortalTarget): Element | DocumentFragment => {\n  const [resolvedTarget, setResolvedTarget] = useState<Element | DocumentFragment>(document.body);\n\n  useEffect(() => {\n    const resolveTarget = (): Element | DocumentFragment => {\n      if (!portalTarget) {\n        return document.body;\n      }\n\n      if (typeof portalTarget === \"string\") {\n        const target = document.querySelector(portalTarget);\n        if (!target) {\n          warn(`Target with selector \"${portalTarget}\" not found. Falling back to document.body.`);\n          return document.body;\n        }\n        return target;\n      }\n\n      if (portalTarget instanceof Element || portalTarget instanceof DocumentFragment) {\n        return portalTarget;\n      }\n\n      if (portalTarget.current instanceof Element) {\n        return portalTarget.current;\n      }\n\n      warn(\"Invalid target provided. Falling back to document.body.\");\n      return document.body;\n    };\n\n    const target = resolveTarget();\n    setResolvedTarget(target);\n  }, [portalTarget]);\n\n  return resolvedTarget;\n};\n\nexport default usePortalTarget;\n\nfunction warn(message: string): void {\n  if (process.env.NODE_ENV !== \"production\") {\n    console.warn(message);\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Modal/hooks/usePortalTarget/usePortalTarget.types.ts",
    "content": "import type React from \"react\";\n\nexport type PortalTarget = string | React.RefObject<Element> | Element | DocumentFragment;\n"
  },
  {
    "path": "packages/core/src/components/Modal/index.ts",
    "content": "export * from \"./footers\";\nexport * from \"./layouts\";\nexport * from \"./Modal\";\nexport * from \"./ModalHeader\";\nexport * from \"./ModalContent\";\nexport * from \"./ModalMedia\";\n"
  },
  {
    "path": "packages/core/src/components/Modal/layouts/ModalBasicLayout/ModalBasicLayout.module.scss",
    "content": ".layout {\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n\n  .header {\n    width: 100%;\n    margin-block: var(--space-32) var(--space-24);\n    padding-inline-end: calc(var(--top-actions-margin-inline) + var(--top-actions-width) + var(--space-16));\n    padding-inline-start: var(--modal-inline-padding);\n  }\n\n  .divider {\n    flex-shrink: 0;\n    opacity: 0;\n    transition: opacity var(--motion-productive-medium) ease-out;\n\n    &.showDivider {\n      opacity: 1;\n    }\n  }\n\n  .content {\n    padding-block-end: var(--space-32);\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Modal/layouts/ModalBasicLayout/ModalBasicLayout.tsx",
    "content": "import React, { forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport { getTestId } from \"../../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../../tests/constants\";\nimport styles from \"./ModalBasicLayout.module.scss\";\nimport { type ModalBasicLayoutProps } from \"./ModalBasicLayout.types\";\nimport { Flex } from \"@vibe/layout\";\nimport Divider from \"../../../Divider/Divider\";\nimport ModalFooterShadow from \"../ModalFooterShadow\";\nimport ModalLayoutScrollableContent from \"../ModalLayoutScrollableContent\";\nimport useLayoutScrolledContent from \"../useLayoutScrolledContent\";\n\nconst ModalBasicLayout = forwardRef(\n  (\n    { children, className, id, \"data-testid\": dataTestId }: ModalBasicLayoutProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const { ref: contentRef, isContentScrolled, isScrollable, isScrolledToEnd, onScroll } = useLayoutScrolledContent();\n    const [header, content] = React.Children.toArray(children);\n\n    return (\n      <>\n        <Flex\n          direction=\"column\"\n          align=\"start\"\n          ref={ref}\n          className={cx(styles.layout, className)}\n          id={id}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_BASIC_LAYOUT, id)}\n        >\n          <div className={styles.header}>{header}</div>\n          <Divider className={cx(styles.divider, { [styles.showDivider]: isContentScrolled })} withoutMargin />\n          <ModalLayoutScrollableContent onScroll={onScroll} className={styles.content} ref={contentRef}>\n            {content}\n          </ModalLayoutScrollableContent>\n        </Flex>\n        {isScrollable && <ModalFooterShadow show={!isScrolledToEnd} />}\n      </>\n    );\n  }\n);\n\nexport default ModalBasicLayout;\n"
  },
  {
    "path": "packages/core/src/components/Modal/layouts/ModalBasicLayout/ModalBasicLayout.types.ts",
    "content": "import type React from \"react\";\nimport { type VibeComponentProps } from \"../../../../types\";\n\nexport interface ModalBasicLayoutProps extends VibeComponentProps {\n  /**\n   * The content of the layout, structured as:\n   * 1. Header content\n   * 2. Main content\n   */\n  children: React.ReactNode;\n}\n"
  },
  {
    "path": "packages/core/src/components/Modal/layouts/ModalFooterShadow.module.scss",
    "content": ".shadowWrapper {\n  &::after {\n    content: \"\";\n    position: absolute;\n    opacity: 0;\n    transition: opacity var(--motion-productive-medium) ease-out;\n    width: 100%;\n    height: 10px;\n    box-shadow: var(--box-shadow-medium);\n  }\n\n  &.show::after {\n    opacity: 1;\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Modal/layouts/ModalFooterShadow.tsx",
    "content": "import React from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./ModalFooterShadow.module.scss\";\nimport { type ModalFooterShadowProps } from \"./ModalFooterShadow.types\";\n\nconst ModalFooterShadow = ({ show }: ModalFooterShadowProps) => {\n  return <div className={cx(styles.shadowWrapper, { [styles.show]: show })} />;\n};\n\nexport default ModalFooterShadow;\n"
  },
  {
    "path": "packages/core/src/components/Modal/layouts/ModalFooterShadow.types.ts",
    "content": "export interface ModalFooterShadowProps {\n  /**\n   * If true, the shadow is visible.\n   */\n  show: boolean;\n}\n"
  },
  {
    "path": "packages/core/src/components/Modal/layouts/ModalLayoutScrollableContent.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n.content {\n  width: 100%;\n  height: 100%;\n  padding-inline: var(--modal-inline-padding);\n  overflow: auto;\n  @include scroller;\n}\n"
  },
  {
    "path": "packages/core/src/components/Modal/layouts/ModalLayoutScrollableContent.tsx",
    "content": "import React, { type ForwardedRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./ModalLayoutScrollableContent.module.scss\";\nimport { type ModalLayoutScrollableContentProps } from \"./ModalLayoutScrollableContent.types\";\n\nconst ModalLayoutScrollableContent = forwardRef(\n  ({ onScroll, className, children }: ModalLayoutScrollableContentProps, ref: ForwardedRef<HTMLDivElement>) => {\n    return (\n      <div ref={ref} className={cx(styles.content, className)} onScroll={onScroll}>\n        {children}\n      </div>\n    );\n  }\n);\n\nexport default ModalLayoutScrollableContent;\n"
  },
  {
    "path": "packages/core/src/components/Modal/layouts/ModalLayoutScrollableContent.types.ts",
    "content": "import { type ReactNode, type UIEventHandler } from \"react\";\n\nexport interface ModalLayoutScrollableContentProps {\n  /**\n   * Callback fired when the content is scrolled.\n   */\n  onScroll?: UIEventHandler<HTMLDivElement>;\n  /**\n   * Class name applied to the scrollable content container.\n   */\n  className?: string;\n  /**\n   * The scrollable content.\n   */\n  children: ReactNode;\n}\n"
  },
  {
    "path": "packages/core/src/components/Modal/layouts/ModalMediaLayout/ModalMediaLayout.module.scss",
    "content": ".layout {\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n\n  .media {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n    flex-shrink: 0;\n  }\n\n  .header {\n    width: 100%;\n    text-align: center;\n    margin-block: var(--space-32) var(--space-8);\n    padding-inline: var(--modal-inline-padding);\n  }\n\n  .content {\n    width: 100%;\n    height: 100%;\n    flex: 1;\n    align-self: flex-start;\n    padding-inline: var(--modal-inline-padding);\n    padding-block-end: var(--space-24);\n    text-align: center;\n    overflow: hidden;\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Modal/layouts/ModalMediaLayout/ModalMediaLayout.tsx",
    "content": "import React, { forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport { getTestId } from \"../../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../../tests/constants\";\nimport styles from \"./ModalMediaLayout.module.scss\";\nimport { type ModalMediaLayoutProps } from \"./ModalMediaLayout.types\";\nimport { Flex } from \"@vibe/layout\";\n\nconst ModalMediaLayout = forwardRef(\n  (\n    { children, className, id, \"data-testid\": dataTestId }: ModalMediaLayoutProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const [media, header, content] = React.Children.toArray(children);\n\n    return (\n      <Flex\n        ref={ref}\n        direction=\"column\"\n        align=\"start\"\n        className={cx(styles.layout, className)}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_MEDIA_LAYOUT, id)}\n      >\n        <div className={styles.media}>{media}</div>\n        <div className={styles.header}>{header}</div>\n        <div className={styles.content}>{content}</div>\n      </Flex>\n    );\n  }\n);\n\nexport default ModalMediaLayout;\n"
  },
  {
    "path": "packages/core/src/components/Modal/layouts/ModalMediaLayout/ModalMediaLayout.types.ts",
    "content": "import type React from \"react\";\nimport { type VibeComponentProps } from \"../../../../types\";\n\nexport interface ModalMediaLayoutProps extends VibeComponentProps {\n  /**\n   * The content of the layout, structured as:\n   * 1. Media content\n   * 2. Header content\n   * 3. Main content\n   */\n  children: React.ReactNode;\n}\n"
  },
  {
    "path": "packages/core/src/components/Modal/layouts/ModalSideBySideLayout/ModalSideBySideLayout.module.scss",
    "content": ".layout {\n  width: 100%;\n  height: 100%;\n  display: grid;\n  grid-template-columns: 60% 40%;\n  grid-template-rows: auto 1fr;\n  min-height: 0;\n\n  .header {\n    width: 100%;\n    margin-block: var(--space-32) var(--space-24);\n    padding-inline: var(--modal-inline-padding);\n    grid-column: 1 / 2;\n    grid-row: 1;\n  }\n\n  .content {\n    grid-column: 1 / 2;\n    grid-row: 2;\n    padding-block-end: var(--space-32);\n  }\n\n  .media {\n    grid-column: 2 / 3;\n    grid-row: 1 / 3;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    position: relative;\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Modal/layouts/ModalSideBySideLayout/ModalSideBySideLayout.tsx",
    "content": "import React, { forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport { getTestId } from \"../../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../../tests/constants\";\nimport styles from \"./ModalSideBySideLayout.module.scss\";\nimport { type ModalSideBySideLayoutProps } from \"./ModalSideBySideLayout.types\";\nimport ModalLayoutScrollableContent from \"../ModalLayoutScrollableContent\";\nimport ModalFooterShadow from \"../ModalFooterShadow\";\n\nconst ModalSideBySideLayout = forwardRef(\n  (\n    { children, className, id, \"data-testid\": dataTestId }: ModalSideBySideLayoutProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const [header, content, media] = React.Children.toArray(children);\n    return (\n      <>\n        <div\n          ref={ref}\n          className={cx(styles.layout, className)}\n          id={id}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_SIDE_BY_SIDE_LAYOUT, id)}\n        >\n          <div className={styles.header}>{header}</div>\n          <ModalLayoutScrollableContent className={styles.content}>{content}</ModalLayoutScrollableContent>\n          <div className={styles.media}>{media}</div>\n        </div>\n        <ModalFooterShadow show />\n      </>\n    );\n  }\n);\n\nexport default ModalSideBySideLayout;\n"
  },
  {
    "path": "packages/core/src/components/Modal/layouts/ModalSideBySideLayout/ModalSideBySideLayout.types.ts",
    "content": "import { type VibeComponentProps } from \"../../../../types\";\nimport type React from \"react\";\n\nexport interface ModalSideBySideLayoutProps extends VibeComponentProps {\n  /**\n   * The content of the layout, structured as:\n   * 1. Header content\n   * 2. Main content\n   * 3. Media content\n   */\n  children: React.ReactNode;\n}\n"
  },
  {
    "path": "packages/core/src/components/Modal/layouts/index.ts",
    "content": "export { default as ModalBasicLayout } from \"./ModalBasicLayout/ModalBasicLayout\";\nexport { type ModalBasicLayoutProps } from \"./ModalBasicLayout/ModalBasicLayout.types\";\n\nexport { default as ModalMediaLayout } from \"./ModalMediaLayout/ModalMediaLayout\";\nexport { type ModalMediaLayoutProps } from \"./ModalMediaLayout/ModalMediaLayout.types\";\n\nexport { default as ModalSideBySideLayout } from \"./ModalSideBySideLayout/ModalSideBySideLayout\";\nexport { type ModalSideBySideLayoutProps } from \"./ModalSideBySideLayout/ModalSideBySideLayout.types\";\n"
  },
  {
    "path": "packages/core/src/components/Modal/layouts/useLayoutScrolledContent.ts",
    "content": "import { type UIEventHandler, useCallback, useEffect, useRef, useState } from \"react\";\n\nconst useLayoutScrolledContent = () => {\n  const [isContentScrolled, setContentScrolled] = useState<boolean>(false);\n  const [isScrollable, setScrollable] = useState<boolean>(false);\n  const [isScrolledToEnd, setScrolledToEnd] = useState<boolean>(false);\n\n  const ref = useRef<HTMLDivElement>(null);\n\n  const checkScroll = useCallback(() => {\n    const element = ref.current;\n    if (element) {\n      const { scrollTop, scrollHeight, clientHeight } = element;\n      setScrollable(scrollHeight > clientHeight);\n      setContentScrolled(scrollTop > 0);\n      setScrolledToEnd(scrollTop + clientHeight >= scrollHeight);\n    }\n  }, []);\n\n  const onScroll: UIEventHandler<HTMLDivElement> = useCallback(() => {\n    checkScroll();\n  }, [checkScroll]);\n\n  useEffect(() => {\n    if (!window.ResizeObserver) {\n      return;\n    }\n\n    const element = ref.current;\n    if (!element) return;\n\n    const resizeObserver = new ResizeObserver(() => {\n      checkScroll();\n    });\n\n    resizeObserver.observe(element);\n\n    checkScroll();\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [checkScroll]);\n\n  return { ref, isContentScrolled, isScrollable, isScrolledToEnd, onScroll };\n};\n\nexport default useLayoutScrolledContent;\n"
  },
  {
    "path": "packages/core/src/components/MultiStepIndicator/MultiStep.types.ts",
    "content": "export type MultiStepType = \"primary\" | \"success\" | \"danger\" | \"dark\";\n\nexport type StepStatus = \"pending\" | \"active\" | \"fulfilled\";\n\nexport type TextPlacement = \"horizontal\" | \"vertical\";\n\nexport type MultiStepSize = \"regular\" | \"compact\";\n\nexport type Step = {\n  titleText: string;\n  subtitleText: string;\n  status: StepStatus;\n};\n"
  },
  {
    "path": "packages/core/src/components/MultiStepIndicator/MultiStepIndicator.module.scss",
    "content": ".wrapper {\n  display: flex;\n\n  .divider {\n    background-color: var(--ui-border-color);\n    margin: 16px;\n    height: 1px;\n    width: 48px;\n\n    &.compact {\n      max-width: 40px;\n      min-width: 16px;\n      margin-inline-start: var(--space-8);\n      margin-inline-end: var(--space-8);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/MultiStepIndicator/MultiStepIndicator.tsx",
    "content": "import cx from \"classnames\";\nimport React, { forwardRef, useCallback, useMemo } from \"react\";\nimport { Check } from \"@vibe/icons\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport Divider from \"../../components/Divider/Divider\";\nimport { NOOP } from \"@vibe/shared\";\nimport StepIndicator from \"./components/StepIndicator/StepIndicator\";\nimport { type MultiStepType, type MultiStepSize, type TextPlacement, type Step } from \"./MultiStep.types\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./MultiStepIndicator.module.scss\";\n\nexport interface MultiStepIndicatorProps extends VibeComponentProps {\n  /**\n   * The list of steps in the multi-step indicator.\n   */\n  steps?: Step[];\n  /**\n   * The visual style of the multi-step indicator.\n   */\n  type?: MultiStepType;\n  /**\n   * Class name applied to each step component.\n   */\n  stepComponentClassName?: string;\n  /**\n   * Class name applied to the divider between steps.\n   */\n  dividerComponentClassName?: string;\n  /**\n   * The icon used for fulfilled steps.\n   */\n  fulfilledStepIcon?: SubIcon;\n  /**\n   * The type of the fulfilled step icon.\n   */\n  fulfilledStepIconType?: \"svg\" | \"font\";\n  /**\n   * If true, displays the step number instead of the fulfilled step icon.\n   */\n  isFulfilledStepDisplayNumber?: boolean;\n  /**\n   * Callback fired when a step is clicked.\n   */\n  onClick?: (stepNumber: number) => void;\n  /**\n   * The placement of the step text.\n   */\n  textPlacement?: TextPlacement;\n  /**\n   * The size of the multi-step indicator.\n   */\n  size?: MultiStepSize;\n}\n\nconst MultiStepIndicator = forwardRef(\n  (\n    {\n      className,\n      steps = [],\n      type = \"primary\",\n      stepComponentClassName,\n      dividerComponentClassName,\n      fulfilledStepIcon = Check,\n      fulfilledStepIconType = \"svg\",\n      isFulfilledStepDisplayNumber = false,\n      onClick = NOOP,\n      textPlacement = \"horizontal\",\n      id,\n      size,\n      \"data-testid\": dataTestId\n    }: MultiStepIndicatorProps,\n    ref: React.ForwardedRef<HTMLOListElement>\n  ) => {\n    const finalSize = textPlacement === \"vertical\" ? \"regular\" : size;\n\n    const renderHorizontalStepIndicator = useCallback(\n      (step: Step, index: number) => {\n        return (\n          <React.Fragment key={`${step.titleText}_${index}`}>\n            <StepIndicator\n              {...step}\n              stepNumber={index + 1}\n              type={type}\n              stepComponentClassName={stepComponentClassName}\n              fulfilledStepIcon={fulfilledStepIcon}\n              fulfilledStepIconType={fulfilledStepIconType}\n              onClick={onClick}\n              isFulfilledStepDisplayNumber={isFulfilledStepDisplayNumber}\n              size={finalSize}\n            />\n            {index !== steps.length - 1 && (\n              <Divider\n                className={cx(styles.divider, dividerComponentClassName, {\n                  [styles.compact]: finalSize === \"compact\"\n                })}\n              />\n            )}\n          </React.Fragment>\n        );\n      },\n      [\n        onClick,\n        isFulfilledStepDisplayNumber,\n        type,\n        stepComponentClassName,\n        fulfilledStepIcon,\n        fulfilledStepIconType,\n        dividerComponentClassName,\n        steps.length,\n        finalSize\n      ]\n    );\n\n    const renderVerticalStepIndicator = useCallback(\n      (step: Step, index: number) => {\n        return (\n          <StepIndicator\n            {...step}\n            key={`${step.titleText}_${index}`}\n            stepNumber={index + 1}\n            type={type}\n            stepComponentClassName={stepComponentClassName}\n            fulfilledStepIcon={fulfilledStepIcon}\n            fulfilledStepIconType={fulfilledStepIconType}\n            onClick={onClick}\n            isFollowedByDivider={index !== steps.length - 1}\n            stepDividerClassName={cx(styles.divider, dividerComponentClassName)}\n            isVertical\n            isFulfilledStepDisplayNumber={isFulfilledStepDisplayNumber}\n          />\n        );\n      },\n      [\n        onClick,\n        isFulfilledStepDisplayNumber,\n        type,\n        stepComponentClassName,\n        fulfilledStepIcon,\n        fulfilledStepIconType,\n        dividerComponentClassName,\n        steps.length\n      ]\n    );\n\n    const stepRenderer = useMemo(\n      () => (textPlacement === \"vertical\" ? renderVerticalStepIndicator : renderHorizontalStepIndicator),\n      [textPlacement, renderVerticalStepIndicator, renderHorizontalStepIndicator]\n    );\n\n    return (\n      <ol\n        ref={ref}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MULTI_STEP_INDICATOR, id)}\n        className={cx(styles.wrapper, className)}\n      >\n        {steps.map(stepRenderer)}\n      </ol>\n    );\n  }\n);\n\nexport default MultiStepIndicator;\n"
  },
  {
    "path": "packages/core/src/components/MultiStepIndicator/__tests__/MultiStepIndicator.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport { Upgrade } from \"@vibe/icons\";\nimport MultiStepIndicator from \"../MultiStepIndicator\";\nimport { type Step } from \"../MultiStep.types\";\n\nconst exampleSteps: Step[] = [\n  {\n    status: \"fulfilled\",\n    titleText: \"Title\",\n    subtitleText: \"Subtitle\"\n  },\n  {\n    status: \"active\",\n    titleText: \"Active\",\n    subtitleText: \"Active Subtitle\"\n  },\n  {\n    status: \"pending\",\n    titleText: \"Pending\",\n    subtitleText: \"Pending Subtitle\"\n  }\n];\n\ndescribe(\"MultiStepIndicator renders correctly\", () => {\n  it(\"with empty props\", () => {\n    const tree = renderer.create(<MultiStepIndicator />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with steps\", () => {\n    const tree = renderer.create(<MultiStepIndicator steps={exampleSteps} />);\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with className\", () => {\n    const tree = renderer.create(<MultiStepIndicator steps={exampleSteps} className=\"test\" />);\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with stepComponentClassName\", () => {\n    const tree = renderer.create(<MultiStepIndicator steps={exampleSteps} stepComponentClassName=\"test\" />);\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with textPlacement vertical\", () => {\n    const tree = renderer.create(<MultiStepIndicator steps={exampleSteps} textPlacement=\"vertical\" />);\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with dividerComponentClassName\", () => {\n    const tree = renderer.create(<MultiStepIndicator steps={exampleSteps} dividerComponentClassName=\"test\" />);\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with isFulfilledStepDisplayNumber\", () => {\n    const tree = renderer.create(<MultiStepIndicator steps={exampleSteps} isFulfilledStepDisplayNumber />);\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with fulfilledStepIcon\", () => {\n    const tree = renderer.create(<MultiStepIndicator steps={exampleSteps} fulfilledStepIcon={Upgrade} />);\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with mode compact\", () => {\n    const tree = renderer.create(<MultiStepIndicator steps={exampleSteps} size=\"compact\" />);\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with mode compact textPlacement vertical\", () => {\n    const tree = renderer.create(<MultiStepIndicator steps={exampleSteps} size=\"compact\" textPlacement=\"vertical\" />);\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/MultiStepIndicator/__tests__/MultiStepIndicator.test.tsx",
    "content": "import { vi, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { fireEvent, render } from \"@testing-library/react\";\nimport { act } from \"@testing-library/react-hooks\";\nimport MultiStepIndicator from \"../MultiStepIndicator\";\nimport { type Step } from \"../MultiStep.types\";\n\ndescribe(\"MultiStepIndicator tests\", () => {\n  it(\"onClick works and is called once\", () => {\n    const exampleSteps: Step[] = [\n      {\n        status: \"fulfilled\",\n        titleText: \"Title\",\n        subtitleText: \"Subtitle\"\n      },\n      {\n        status: \"active\",\n        titleText: \"Active\",\n        subtitleText: \"Active Subtitle\"\n      }\n    ];\n\n    const stepClickMock = vi.fn();\n\n    const multiStepIndicatorComponent = render(\n      <MultiStepIndicator type=\"success\" steps={exampleSteps} onClick={stepClickMock} />\n    );\n\n    const step = multiStepIndicatorComponent.getByText(\"Title\");\n    act(() => {\n      fireEvent.click(step);\n    });\n    expect(stepClickMock.mock.calls.length).toBe(1);\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/MultiStepIndicator/__tests__/__snapshots__/MultiStepIndicator.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`MultiStepIndicator renders correctly > with className 1`] = `\n<ol\n  className=\"wrapper test\"\n  data-testid=\"multi-step-indicator\"\n>\n  <li\n    aria-label=\"Step 1: Title - Subtitle, status: fulfilled\"\n    className=\"clickable indicator typePrimary statusFulfilled sizeRegular clickable disableTextSelection\"\n    data-testid=\"step-indicator\"\n    onClick={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    role=\"button\"\n    tabIndex={-1}\n  >\n    <div\n      className=\"numberDividerContainer typePrimaryNumberDividerContainer statusFulfilledNumberDividerContainer sizeRegularNumberDividerContainer\"\n    >\n      <div\n        className=\"numberContainer typePrimaryNumberContainer statusFulfilledNumberContainer sizeRegularNumberContainer\"\n        role=\"button\"\n        tabIndex={0}\n      >\n        <span\n          className=\"numberContainerText typePrimaryNumberContainerText statusFulfilledNumberContainerText sizeRegularNumberContainerText\"\n        >\n          <svg\n            aria-hidden={true}\n            className=\"icon numberContainerTextCheckIcon noFocusStyle\"\n            data-testid=\"icon\"\n            data-vibe=\"Icon\"\n            fill=\"currentColor\"\n            height=\"16\"\n            viewBox=\"0 0 20 20\"\n            width=\"16\"\n          >\n            <path\n              clipRule=\"evenodd\"\n              d=\"M8.53033 14.2478L8 13.7175L7.46967 14.2478C7.76256 14.5407 8.23744 14.5407 8.53033 14.2478ZM8 12.6569L4.53033 9.18718C4.23744 8.89429 3.76256 8.89429 3.46967 9.18718C3.17678 9.48008 3.17678 9.95495 3.46967 10.2478L7.46967 14.2478L8 13.7175L8.53033 14.2478L16.2478 6.53033C16.5407 6.23743 16.5407 5.76256 16.2478 5.46967C15.955 5.17677 15.4801 5.17677 15.1872 5.46967L8 12.6569Z\"\n              fill=\"currentColor\"\n              fillRule=\"evenodd\"\n            />\n          </svg>\n        </span>\n      </div>\n    </div>\n    <div\n      className=\"textContainer typePrimaryTextContainer statusFulfilledTextContainer sizeRegularTextContainer\"\n    >\n      <div\n        className=\"textContainerTitle typePrimaryTextContainerTitle statusFulfilledTextContainerTitle sizeRegularTextContainerTitle\"\n      >\n        <span\n          className=\"hiddenTextWrapper\"\n          data-testid=\"hidden-text_hiddenText\"\n          id=\"hiddenText\"\n        >\n          fulfilled\n        </span>\n         \n        <span\n          className=\"textContainerTitleText typePrimaryTextContainerTitleText statusFulfilledTextContainerTitleText sizeRegularTextContainerTitleText\"\n        >\n          Title\n        </span>\n      </div>\n      <span\n        className=\"textContainerSubtitleText typePrimaryTextContainerSubtitleText statusFulfilledTextContainerSubtitleText sizeRegularTextContainerSubtitleText\"\n      >\n        Subtitle\n      </span>\n    </div>\n  </li>\n  <div\n    className=\"divider divider horizontal\"\n    data-testid=\"divider\"\n    data-vibe=\"Divider\"\n  />\n  <li\n    aria-label=\"Step 2: Active - Active Subtitle, status: active\"\n    className=\"clickable indicator typePrimary statusActive sizeRegular clickable disableTextSelection\"\n    data-testid=\"step-indicator\"\n    onClick={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    role=\"button\"\n    tabIndex={-1}\n  >\n    <div\n      className=\"numberDividerContainer typePrimaryNumberDividerContainer statusActiveNumberDividerContainer sizeRegularNumberDividerContainer\"\n    >\n      <div\n        className=\"numberContainer typePrimaryNumberContainer statusActiveNumberContainer sizeRegularNumberContainer\"\n        role=\"button\"\n        tabIndex={0}\n      >\n        <span\n          className=\"numberContainerText typePrimaryNumberContainerText statusActiveNumberContainerText sizeRegularNumberContainerText\"\n        >\n          2\n        </span>\n      </div>\n    </div>\n    <div\n      className=\"textContainer typePrimaryTextContainer statusActiveTextContainer sizeRegularTextContainer\"\n    >\n      <div\n        className=\"textContainerTitle typePrimaryTextContainerTitle statusActiveTextContainerTitle sizeRegularTextContainerTitle\"\n      >\n        <span\n          className=\"hiddenTextWrapper\"\n          data-testid=\"hidden-text_hiddenText\"\n          id=\"hiddenText\"\n        >\n          active\n        </span>\n         \n        <span\n          className=\"textContainerTitleText typePrimaryTextContainerTitleText statusActiveTextContainerTitleText sizeRegularTextContainerTitleText\"\n        >\n          Active\n        </span>\n      </div>\n      <span\n        className=\"textContainerSubtitleText typePrimaryTextContainerSubtitleText statusActiveTextContainerSubtitleText sizeRegularTextContainerSubtitleText\"\n      >\n        Active Subtitle\n      </span>\n    </div>\n  </li>\n  <div\n    className=\"divider divider horizontal\"\n    data-testid=\"divider\"\n    data-vibe=\"Divider\"\n  />\n  <li\n    aria-label=\"Step 3: Pending - Pending Subtitle, status: pending\"\n    className=\"clickable indicator typePrimary statusPending sizeRegular clickable disableTextSelection\"\n    data-testid=\"step-indicator\"\n    onClick={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    role=\"button\"\n    tabIndex={-1}\n  >\n    <div\n      className=\"numberDividerContainer typePrimaryNumberDividerContainer statusPendingNumberDividerContainer sizeRegularNumberDividerContainer\"\n    >\n      <div\n        className=\"numberContainer typePrimaryNumberContainer statusPendingNumberContainer sizeRegularNumberContainer\"\n        role=\"button\"\n        tabIndex={0}\n      >\n        <span\n          className=\"numberContainerText typePrimaryNumberContainerText statusPendingNumberContainerText sizeRegularNumberContainerText\"\n        >\n          3\n        </span>\n      </div>\n    </div>\n    <div\n      className=\"textContainer typePrimaryTextContainer statusPendingTextContainer sizeRegularTextContainer\"\n    >\n      <div\n        className=\"textContainerTitle typePrimaryTextContainerTitle statusPendingTextContainerTitle sizeRegularTextContainerTitle\"\n      >\n        <span\n          className=\"hiddenTextWrapper\"\n          data-testid=\"hidden-text_hiddenText\"\n          id=\"hiddenText\"\n        >\n          pending\n        </span>\n         \n        <span\n          className=\"textContainerTitleText typePrimaryTextContainerTitleText statusPendingTextContainerTitleText sizeRegularTextContainerTitleText\"\n        >\n          Pending\n        </span>\n      </div>\n      <span\n        className=\"textContainerSubtitleText typePrimaryTextContainerSubtitleText statusPendingTextContainerSubtitleText sizeRegularTextContainerSubtitleText\"\n      >\n        Pending Subtitle\n      </span>\n    </div>\n  </li>\n</ol>\n`;\n\nexports[`MultiStepIndicator renders correctly > with dividerComponentClassName 1`] = `\n<ol\n  className=\"wrapper\"\n  data-testid=\"multi-step-indicator\"\n>\n  <li\n    aria-label=\"Step 1: Title - Subtitle, status: fulfilled\"\n    className=\"clickable indicator typePrimary statusFulfilled sizeRegular clickable disableTextSelection\"\n    data-testid=\"step-indicator\"\n    onClick={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    role=\"button\"\n    tabIndex={-1}\n  >\n    <div\n      className=\"numberDividerContainer typePrimaryNumberDividerContainer statusFulfilledNumberDividerContainer sizeRegularNumberDividerContainer\"\n    >\n      <div\n        className=\"numberContainer typePrimaryNumberContainer statusFulfilledNumberContainer sizeRegularNumberContainer\"\n        role=\"button\"\n        tabIndex={0}\n      >\n        <span\n          className=\"numberContainerText typePrimaryNumberContainerText statusFulfilledNumberContainerText sizeRegularNumberContainerText\"\n        >\n          <svg\n            aria-hidden={true}\n            className=\"icon numberContainerTextCheckIcon noFocusStyle\"\n            data-testid=\"icon\"\n            data-vibe=\"Icon\"\n            fill=\"currentColor\"\n            height=\"16\"\n            viewBox=\"0 0 20 20\"\n            width=\"16\"\n          >\n            <path\n              clipRule=\"evenodd\"\n              d=\"M8.53033 14.2478L8 13.7175L7.46967 14.2478C7.76256 14.5407 8.23744 14.5407 8.53033 14.2478ZM8 12.6569L4.53033 9.18718C4.23744 8.89429 3.76256 8.89429 3.46967 9.18718C3.17678 9.48008 3.17678 9.95495 3.46967 10.2478L7.46967 14.2478L8 13.7175L8.53033 14.2478L16.2478 6.53033C16.5407 6.23743 16.5407 5.76256 16.2478 5.46967C15.955 5.17677 15.4801 5.17677 15.1872 5.46967L8 12.6569Z\"\n              fill=\"currentColor\"\n              fillRule=\"evenodd\"\n            />\n          </svg>\n        </span>\n      </div>\n    </div>\n    <div\n      className=\"textContainer typePrimaryTextContainer statusFulfilledTextContainer sizeRegularTextContainer\"\n    >\n      <div\n        className=\"textContainerTitle typePrimaryTextContainerTitle statusFulfilledTextContainerTitle sizeRegularTextContainerTitle\"\n      >\n        <span\n          className=\"hiddenTextWrapper\"\n          data-testid=\"hidden-text_hiddenText\"\n          id=\"hiddenText\"\n        >\n          fulfilled\n        </span>\n         \n        <span\n          className=\"textContainerTitleText typePrimaryTextContainerTitleText statusFulfilledTextContainerTitleText sizeRegularTextContainerTitleText\"\n        >\n          Title\n        </span>\n      </div>\n      <span\n        className=\"textContainerSubtitleText typePrimaryTextContainerSubtitleText statusFulfilledTextContainerSubtitleText sizeRegularTextContainerSubtitleText\"\n      >\n        Subtitle\n      </span>\n    </div>\n  </li>\n  <div\n    className=\"divider divider test horizontal\"\n    data-testid=\"divider\"\n    data-vibe=\"Divider\"\n  />\n  <li\n    aria-label=\"Step 2: Active - Active Subtitle, status: active\"\n    className=\"clickable indicator typePrimary statusActive sizeRegular clickable disableTextSelection\"\n    data-testid=\"step-indicator\"\n    onClick={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    role=\"button\"\n    tabIndex={-1}\n  >\n    <div\n      className=\"numberDividerContainer typePrimaryNumberDividerContainer statusActiveNumberDividerContainer sizeRegularNumberDividerContainer\"\n    >\n      <div\n        className=\"numberContainer typePrimaryNumberContainer statusActiveNumberContainer sizeRegularNumberContainer\"\n        role=\"button\"\n        tabIndex={0}\n      >\n        <span\n          className=\"numberContainerText typePrimaryNumberContainerText statusActiveNumberContainerText sizeRegularNumberContainerText\"\n        >\n          2\n        </span>\n      </div>\n    </div>\n    <div\n      className=\"textContainer typePrimaryTextContainer statusActiveTextContainer sizeRegularTextContainer\"\n    >\n      <div\n        className=\"textContainerTitle typePrimaryTextContainerTitle statusActiveTextContainerTitle sizeRegularTextContainerTitle\"\n      >\n        <span\n          className=\"hiddenTextWrapper\"\n          data-testid=\"hidden-text_hiddenText\"\n          id=\"hiddenText\"\n        >\n          active\n        </span>\n         \n        <span\n          className=\"textContainerTitleText typePrimaryTextContainerTitleText statusActiveTextContainerTitleText sizeRegularTextContainerTitleText\"\n        >\n          Active\n        </span>\n      </div>\n      <span\n        className=\"textContainerSubtitleText typePrimaryTextContainerSubtitleText statusActiveTextContainerSubtitleText sizeRegularTextContainerSubtitleText\"\n      >\n        Active Subtitle\n      </span>\n    </div>\n  </li>\n  <div\n    className=\"divider divider test horizontal\"\n    data-testid=\"divider\"\n    data-vibe=\"Divider\"\n  />\n  <li\n    aria-label=\"Step 3: Pending - Pending Subtitle, status: pending\"\n    className=\"clickable indicator typePrimary statusPending sizeRegular clickable disableTextSelection\"\n    data-testid=\"step-indicator\"\n    onClick={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    role=\"button\"\n    tabIndex={-1}\n  >\n    <div\n      className=\"numberDividerContainer typePrimaryNumberDividerContainer statusPendingNumberDividerContainer sizeRegularNumberDividerContainer\"\n    >\n      <div\n        className=\"numberContainer typePrimaryNumberContainer statusPendingNumberContainer sizeRegularNumberContainer\"\n        role=\"button\"\n        tabIndex={0}\n      >\n        <span\n          className=\"numberContainerText typePrimaryNumberContainerText statusPendingNumberContainerText sizeRegularNumberContainerText\"\n        >\n          3\n        </span>\n      </div>\n    </div>\n    <div\n      className=\"textContainer typePrimaryTextContainer statusPendingTextContainer sizeRegularTextContainer\"\n    >\n      <div\n        className=\"textContainerTitle typePrimaryTextContainerTitle statusPendingTextContainerTitle sizeRegularTextContainerTitle\"\n      >\n        <span\n          className=\"hiddenTextWrapper\"\n          data-testid=\"hidden-text_hiddenText\"\n          id=\"hiddenText\"\n        >\n          pending\n        </span>\n         \n        <span\n          className=\"textContainerTitleText typePrimaryTextContainerTitleText statusPendingTextContainerTitleText sizeRegularTextContainerTitleText\"\n        >\n          Pending\n        </span>\n      </div>\n      <span\n        className=\"textContainerSubtitleText typePrimaryTextContainerSubtitleText statusPendingTextContainerSubtitleText sizeRegularTextContainerSubtitleText\"\n      >\n        Pending Subtitle\n      </span>\n    </div>\n  </li>\n</ol>\n`;\n\nexports[`MultiStepIndicator renders correctly > with empty props 1`] = `\n<ol\n  className=\"wrapper\"\n  data-testid=\"multi-step-indicator\"\n/>\n`;\n\nexports[`MultiStepIndicator renders correctly > with fulfilledStepIcon 1`] = `\n<ol\n  className=\"wrapper\"\n  data-testid=\"multi-step-indicator\"\n>\n  <li\n    aria-label=\"Step 1: Title - Subtitle, status: fulfilled\"\n    className=\"clickable indicator typePrimary statusFulfilled sizeRegular clickable disableTextSelection\"\n    data-testid=\"step-indicator\"\n    onClick={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    role=\"button\"\n    tabIndex={-1}\n  >\n    <div\n      className=\"numberDividerContainer typePrimaryNumberDividerContainer statusFulfilledNumberDividerContainer sizeRegularNumberDividerContainer\"\n    >\n      <div\n        className=\"numberContainer typePrimaryNumberContainer statusFulfilledNumberContainer sizeRegularNumberContainer\"\n        role=\"button\"\n        tabIndex={0}\n      >\n        <span\n          className=\"numberContainerText typePrimaryNumberContainerText statusFulfilledNumberContainerText sizeRegularNumberContainerText\"\n        >\n          <svg\n            aria-hidden={true}\n            className=\"icon numberContainerTextCheckIcon noFocusStyle\"\n            data-testid=\"icon\"\n            data-vibe=\"Icon\"\n            fill=\"currentColor\"\n            height=\"16\"\n            viewBox=\"0 0 20 20\"\n            width=\"16\"\n          >\n            <path\n              clipRule=\"evenodd\"\n              d=\"M5.7205 3.22905C5.8506 3.08332 6.03668 3 6.23203 3H14.2113C14.4224 3 14.6217 3.09723 14.7516 3.26359L17.8547 7.23601C18.053 7.48988 18.0478 7.84757 17.8423 8.09563L10.528 16.9232C10.3977 17.0804 10.2042 17.1714 10 17.1714C9.79582 17.1714 9.60226 17.0804 9.47198 16.9232L2.1577 8.09563C1.94134 7.8345 1.94835 7.45444 2.17418 7.20147L5.7205 3.22905ZM5.95682 5.02365L6.60922 6.97241H4.21709L5.95682 5.02365ZM4.14439 8.34384H7.03991L8.48766 13.5857L4.14439 8.34384ZM11.5123 13.5857L15.8556 8.34384H12.9601L11.5123 13.5857ZM11.5373 8.34384L10 13.91L8.46268 8.34384H11.5373ZM13.4951 6.97241H15.9085L14.3727 5.00631L13.4951 6.97241ZM13.1542 4.37143H7.18472L8.05546 6.97241H11.9932L13.1542 4.37143Z\"\n              fill=\"currentColor\"\n              fillRule=\"evenodd\"\n            />\n          </svg>\n        </span>\n      </div>\n    </div>\n    <div\n      className=\"textContainer typePrimaryTextContainer statusFulfilledTextContainer sizeRegularTextContainer\"\n    >\n      <div\n        className=\"textContainerTitle typePrimaryTextContainerTitle statusFulfilledTextContainerTitle sizeRegularTextContainerTitle\"\n      >\n        <span\n          className=\"hiddenTextWrapper\"\n          data-testid=\"hidden-text_hiddenText\"\n          id=\"hiddenText\"\n        >\n          fulfilled\n        </span>\n         \n        <span\n          className=\"textContainerTitleText typePrimaryTextContainerTitleText statusFulfilledTextContainerTitleText sizeRegularTextContainerTitleText\"\n        >\n          Title\n        </span>\n      </div>\n      <span\n        className=\"textContainerSubtitleText typePrimaryTextContainerSubtitleText statusFulfilledTextContainerSubtitleText sizeRegularTextContainerSubtitleText\"\n      >\n        Subtitle\n      </span>\n    </div>\n  </li>\n  <div\n    className=\"divider divider horizontal\"\n    data-testid=\"divider\"\n    data-vibe=\"Divider\"\n  />\n  <li\n    aria-label=\"Step 2: Active - Active Subtitle, status: active\"\n    className=\"clickable indicator typePrimary statusActive sizeRegular clickable disableTextSelection\"\n    data-testid=\"step-indicator\"\n    onClick={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    role=\"button\"\n    tabIndex={-1}\n  >\n    <div\n      className=\"numberDividerContainer typePrimaryNumberDividerContainer statusActiveNumberDividerContainer sizeRegularNumberDividerContainer\"\n    >\n      <div\n        className=\"numberContainer typePrimaryNumberContainer statusActiveNumberContainer sizeRegularNumberContainer\"\n        role=\"button\"\n        tabIndex={0}\n      >\n        <span\n          className=\"numberContainerText typePrimaryNumberContainerText statusActiveNumberContainerText sizeRegularNumberContainerText\"\n        >\n          2\n        </span>\n      </div>\n    </div>\n    <div\n      className=\"textContainer typePrimaryTextContainer statusActiveTextContainer sizeRegularTextContainer\"\n    >\n      <div\n        className=\"textContainerTitle typePrimaryTextContainerTitle statusActiveTextContainerTitle sizeRegularTextContainerTitle\"\n      >\n        <span\n          className=\"hiddenTextWrapper\"\n          data-testid=\"hidden-text_hiddenText\"\n          id=\"hiddenText\"\n        >\n          active\n        </span>\n         \n        <span\n          className=\"textContainerTitleText typePrimaryTextContainerTitleText statusActiveTextContainerTitleText sizeRegularTextContainerTitleText\"\n        >\n          Active\n        </span>\n      </div>\n      <span\n        className=\"textContainerSubtitleText typePrimaryTextContainerSubtitleText statusActiveTextContainerSubtitleText sizeRegularTextContainerSubtitleText\"\n      >\n        Active Subtitle\n      </span>\n    </div>\n  </li>\n  <div\n    className=\"divider divider horizontal\"\n    data-testid=\"divider\"\n    data-vibe=\"Divider\"\n  />\n  <li\n    aria-label=\"Step 3: Pending - Pending Subtitle, status: pending\"\n    className=\"clickable indicator typePrimary statusPending sizeRegular clickable disableTextSelection\"\n    data-testid=\"step-indicator\"\n    onClick={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    role=\"button\"\n    tabIndex={-1}\n  >\n    <div\n      className=\"numberDividerContainer typePrimaryNumberDividerContainer statusPendingNumberDividerContainer sizeRegularNumberDividerContainer\"\n    >\n      <div\n        className=\"numberContainer typePrimaryNumberContainer statusPendingNumberContainer sizeRegularNumberContainer\"\n        role=\"button\"\n        tabIndex={0}\n      >\n        <span\n          className=\"numberContainerText typePrimaryNumberContainerText statusPendingNumberContainerText sizeRegularNumberContainerText\"\n        >\n          3\n        </span>\n      </div>\n    </div>\n    <div\n      className=\"textContainer typePrimaryTextContainer statusPendingTextContainer sizeRegularTextContainer\"\n    >\n      <div\n        className=\"textContainerTitle typePrimaryTextContainerTitle statusPendingTextContainerTitle sizeRegularTextContainerTitle\"\n      >\n        <span\n          className=\"hiddenTextWrapper\"\n          data-testid=\"hidden-text_hiddenText\"\n          id=\"hiddenText\"\n        >\n          pending\n        </span>\n         \n        <span\n          className=\"textContainerTitleText typePrimaryTextContainerTitleText statusPendingTextContainerTitleText sizeRegularTextContainerTitleText\"\n        >\n          Pending\n        </span>\n      </div>\n      <span\n        className=\"textContainerSubtitleText typePrimaryTextContainerSubtitleText statusPendingTextContainerSubtitleText sizeRegularTextContainerSubtitleText\"\n      >\n        Pending Subtitle\n      </span>\n    </div>\n  </li>\n</ol>\n`;\n\nexports[`MultiStepIndicator renders correctly > with isFulfilledStepDisplayNumber 1`] = `\n<ol\n  className=\"wrapper\"\n  data-testid=\"multi-step-indicator\"\n>\n  <li\n    aria-label=\"Step 1: Title - Subtitle, status: fulfilled\"\n    className=\"clickable indicator typePrimary statusFulfilled sizeRegular clickable disableTextSelection\"\n    data-testid=\"step-indicator\"\n    onClick={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    role=\"button\"\n    tabIndex={-1}\n  >\n    <div\n      className=\"numberDividerContainer typePrimaryNumberDividerContainer statusFulfilledNumberDividerContainer sizeRegularNumberDividerContainer\"\n    >\n      <div\n        className=\"numberContainer typePrimaryNumberContainer statusFulfilledNumberContainer sizeRegularNumberContainer\"\n        role=\"button\"\n        tabIndex={0}\n      >\n        <span\n          className=\"numberContainerText typePrimaryNumberContainerText statusFulfilledNumberContainerText sizeRegularNumberContainerText\"\n        >\n          1\n        </span>\n      </div>\n    </div>\n    <div\n      className=\"textContainer typePrimaryTextContainer statusFulfilledTextContainer sizeRegularTextContainer\"\n    >\n      <div\n        className=\"textContainerTitle typePrimaryTextContainerTitle statusFulfilledTextContainerTitle sizeRegularTextContainerTitle\"\n      >\n        <span\n          className=\"hiddenTextWrapper\"\n          data-testid=\"hidden-text_hiddenText\"\n          id=\"hiddenText\"\n        >\n          fulfilled\n        </span>\n         \n        <span\n          className=\"textContainerTitleText typePrimaryTextContainerTitleText statusFulfilledTextContainerTitleText sizeRegularTextContainerTitleText\"\n        >\n          Title\n        </span>\n      </div>\n      <span\n        className=\"textContainerSubtitleText typePrimaryTextContainerSubtitleText statusFulfilledTextContainerSubtitleText sizeRegularTextContainerSubtitleText\"\n      >\n        Subtitle\n      </span>\n    </div>\n  </li>\n  <div\n    className=\"divider divider horizontal\"\n    data-testid=\"divider\"\n    data-vibe=\"Divider\"\n  />\n  <li\n    aria-label=\"Step 2: Active - Active Subtitle, status: active\"\n    className=\"clickable indicator typePrimary statusActive sizeRegular clickable disableTextSelection\"\n    data-testid=\"step-indicator\"\n    onClick={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    role=\"button\"\n    tabIndex={-1}\n  >\n    <div\n      className=\"numberDividerContainer typePrimaryNumberDividerContainer statusActiveNumberDividerContainer sizeRegularNumberDividerContainer\"\n    >\n      <div\n        className=\"numberContainer typePrimaryNumberContainer statusActiveNumberContainer sizeRegularNumberContainer\"\n        role=\"button\"\n        tabIndex={0}\n      >\n        <span\n          className=\"numberContainerText typePrimaryNumberContainerText statusActiveNumberContainerText sizeRegularNumberContainerText\"\n        >\n          2\n        </span>\n      </div>\n    </div>\n    <div\n      className=\"textContainer typePrimaryTextContainer statusActiveTextContainer sizeRegularTextContainer\"\n    >\n      <div\n        className=\"textContainerTitle typePrimaryTextContainerTitle statusActiveTextContainerTitle sizeRegularTextContainerTitle\"\n      >\n        <span\n          className=\"hiddenTextWrapper\"\n          data-testid=\"hidden-text_hiddenText\"\n          id=\"hiddenText\"\n        >\n          active\n        </span>\n         \n        <span\n          className=\"textContainerTitleText typePrimaryTextContainerTitleText statusActiveTextContainerTitleText sizeRegularTextContainerTitleText\"\n        >\n          Active\n        </span>\n      </div>\n      <span\n        className=\"textContainerSubtitleText typePrimaryTextContainerSubtitleText statusActiveTextContainerSubtitleText sizeRegularTextContainerSubtitleText\"\n      >\n        Active Subtitle\n      </span>\n    </div>\n  </li>\n  <div\n    className=\"divider divider horizontal\"\n    data-testid=\"divider\"\n    data-vibe=\"Divider\"\n  />\n  <li\n    aria-label=\"Step 3: Pending - Pending Subtitle, status: pending\"\n    className=\"clickable indicator typePrimary statusPending sizeRegular clickable disableTextSelection\"\n    data-testid=\"step-indicator\"\n    onClick={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    role=\"button\"\n    tabIndex={-1}\n  >\n    <div\n      className=\"numberDividerContainer typePrimaryNumberDividerContainer statusPendingNumberDividerContainer sizeRegularNumberDividerContainer\"\n    >\n      <div\n        className=\"numberContainer typePrimaryNumberContainer statusPendingNumberContainer sizeRegularNumberContainer\"\n        role=\"button\"\n        tabIndex={0}\n      >\n        <span\n          className=\"numberContainerText typePrimaryNumberContainerText statusPendingNumberContainerText sizeRegularNumberContainerText\"\n        >\n          3\n        </span>\n      </div>\n    </div>\n    <div\n      className=\"textContainer typePrimaryTextContainer statusPendingTextContainer sizeRegularTextContainer\"\n    >\n      <div\n        className=\"textContainerTitle typePrimaryTextContainerTitle statusPendingTextContainerTitle sizeRegularTextContainerTitle\"\n      >\n        <span\n          className=\"hiddenTextWrapper\"\n          data-testid=\"hidden-text_hiddenText\"\n          id=\"hiddenText\"\n        >\n          pending\n        </span>\n         \n        <span\n          className=\"textContainerTitleText typePrimaryTextContainerTitleText statusPendingTextContainerTitleText sizeRegularTextContainerTitleText\"\n        >\n          Pending\n        </span>\n      </div>\n      <span\n        className=\"textContainerSubtitleText typePrimaryTextContainerSubtitleText statusPendingTextContainerSubtitleText sizeRegularTextContainerSubtitleText\"\n      >\n        Pending Subtitle\n      </span>\n    </div>\n  </li>\n</ol>\n`;\n\nexports[`MultiStepIndicator renders correctly > with mode compact 1`] = `\n<ol\n  className=\"wrapper\"\n  data-testid=\"multi-step-indicator\"\n>\n  <li\n    aria-label=\"Step 1: Title - Subtitle, status: fulfilled\"\n    className=\"clickable indicator typePrimary statusFulfilled sizeCompact clickable disableTextSelection\"\n    data-testid=\"step-indicator\"\n    onClick={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    role=\"button\"\n    tabIndex={-1}\n  >\n    <div\n      className=\"numberDividerContainer typePrimaryNumberDividerContainer statusFulfilledNumberDividerContainer sizeCompactNumberDividerContainer\"\n    >\n      <div\n        className=\"numberContainer typePrimaryNumberContainer statusFulfilledNumberContainer sizeCompactNumberContainer\"\n        role=\"button\"\n        tabIndex={0}\n      >\n        <span\n          className=\"numberContainerText typePrimaryNumberContainerText statusFulfilledNumberContainerText sizeCompactNumberContainerText\"\n        >\n          <svg\n            aria-hidden={true}\n            className=\"icon numberContainerTextCheckIcon noFocusStyle\"\n            data-testid=\"icon\"\n            data-vibe=\"Icon\"\n            fill=\"currentColor\"\n            height=\"16\"\n            viewBox=\"0 0 20 20\"\n            width=\"16\"\n          >\n            <path\n              clipRule=\"evenodd\"\n              d=\"M8.53033 14.2478L8 13.7175L7.46967 14.2478C7.76256 14.5407 8.23744 14.5407 8.53033 14.2478ZM8 12.6569L4.53033 9.18718C4.23744 8.89429 3.76256 8.89429 3.46967 9.18718C3.17678 9.48008 3.17678 9.95495 3.46967 10.2478L7.46967 14.2478L8 13.7175L8.53033 14.2478L16.2478 6.53033C16.5407 6.23743 16.5407 5.76256 16.2478 5.46967C15.955 5.17677 15.4801 5.17677 15.1872 5.46967L8 12.6569Z\"\n              fill=\"currentColor\"\n              fillRule=\"evenodd\"\n            />\n          </svg>\n        </span>\n      </div>\n    </div>\n    <div\n      className=\"textContainer typePrimaryTextContainer statusFulfilledTextContainer sizeCompactTextContainer\"\n    >\n      <div\n        className=\"textContainerTitle typePrimaryTextContainerTitle statusFulfilledTextContainerTitle sizeCompactTextContainerTitle\"\n      >\n        <span\n          className=\"hiddenTextWrapper\"\n          data-testid=\"hidden-text_hiddenText\"\n          id=\"hiddenText\"\n        >\n          fulfilled\n        </span>\n         \n        <span\n          className=\"textContainerTitleText typePrimaryTextContainerTitleText statusFulfilledTextContainerTitleText sizeCompactTextContainerTitleText\"\n        >\n          Title\n        </span>\n      </div>\n    </div>\n  </li>\n  <div\n    className=\"divider divider compact horizontal\"\n    data-testid=\"divider\"\n    data-vibe=\"Divider\"\n  />\n  <li\n    aria-label=\"Step 2: Active - Active Subtitle, status: active\"\n    className=\"clickable indicator typePrimary statusActive sizeCompact clickable disableTextSelection\"\n    data-testid=\"step-indicator\"\n    onClick={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    role=\"button\"\n    tabIndex={-1}\n  >\n    <div\n      className=\"numberDividerContainer typePrimaryNumberDividerContainer statusActiveNumberDividerContainer sizeCompactNumberDividerContainer\"\n    >\n      <div\n        className=\"numberContainer typePrimaryNumberContainer statusActiveNumberContainer sizeCompactNumberContainer\"\n        role=\"button\"\n        tabIndex={0}\n      >\n        <span\n          className=\"numberContainerText typePrimaryNumberContainerText statusActiveNumberContainerText sizeCompactNumberContainerText\"\n        >\n          2\n        </span>\n      </div>\n    </div>\n    <div\n      className=\"textContainer typePrimaryTextContainer statusActiveTextContainer sizeCompactTextContainer\"\n    >\n      <div\n        className=\"textContainerTitle typePrimaryTextContainerTitle statusActiveTextContainerTitle sizeCompactTextContainerTitle\"\n      >\n        <span\n          className=\"hiddenTextWrapper\"\n          data-testid=\"hidden-text_hiddenText\"\n          id=\"hiddenText\"\n        >\n          active\n        </span>\n         \n        <span\n          className=\"textContainerTitleText typePrimaryTextContainerTitleText statusActiveTextContainerTitleText sizeCompactTextContainerTitleText\"\n        >\n          Active\n        </span>\n      </div>\n    </div>\n  </li>\n  <div\n    className=\"divider divider compact horizontal\"\n    data-testid=\"divider\"\n    data-vibe=\"Divider\"\n  />\n  <li\n    aria-label=\"Step 3: Pending - Pending Subtitle, status: pending\"\n    className=\"clickable indicator typePrimary statusPending sizeCompact clickable disableTextSelection\"\n    data-testid=\"step-indicator\"\n    onClick={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    role=\"button\"\n    tabIndex={-1}\n  >\n    <div\n      className=\"numberDividerContainer typePrimaryNumberDividerContainer statusPendingNumberDividerContainer sizeCompactNumberDividerContainer\"\n    >\n      <div\n        className=\"numberContainer typePrimaryNumberContainer statusPendingNumberContainer sizeCompactNumberContainer\"\n        role=\"button\"\n        tabIndex={0}\n      >\n        <span\n          className=\"numberContainerText typePrimaryNumberContainerText statusPendingNumberContainerText sizeCompactNumberContainerText\"\n        >\n          3\n        </span>\n      </div>\n    </div>\n    <div\n      className=\"textContainer typePrimaryTextContainer statusPendingTextContainer sizeCompactTextContainer\"\n    >\n      <div\n        className=\"textContainerTitle typePrimaryTextContainerTitle statusPendingTextContainerTitle sizeCompactTextContainerTitle\"\n      >\n        <span\n          className=\"hiddenTextWrapper\"\n          data-testid=\"hidden-text_hiddenText\"\n          id=\"hiddenText\"\n        >\n          pending\n        </span>\n         \n        <span\n          className=\"textContainerTitleText typePrimaryTextContainerTitleText statusPendingTextContainerTitleText sizeCompactTextContainerTitleText\"\n        >\n          Pending\n        </span>\n      </div>\n    </div>\n  </li>\n</ol>\n`;\n\nexports[`MultiStepIndicator renders correctly > with mode compact textPlacement vertical 1`] = `\n<ol\n  className=\"wrapper\"\n  data-testid=\"multi-step-indicator\"\n>\n  <li\n    aria-label=\"Step 1: Title - Subtitle, status: fulfilled\"\n    className=\"clickable indicator typePrimary statusFulfilled sizeRegular clickable textPlacementVertical disableTextSelection\"\n    data-testid=\"step-indicator\"\n    onClick={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    role=\"button\"\n    tabIndex={-1}\n  >\n    <div\n      className=\"numberDividerContainer typePrimaryNumberDividerContainer statusFulfilledNumberDividerContainer sizeRegularNumberDividerContainer\"\n    >\n      <div\n        className=\"numberContainer typePrimaryNumberContainer statusFulfilledNumberContainer sizeRegularNumberContainer\"\n        role=\"button\"\n        tabIndex={0}\n      >\n        <span\n          className=\"numberContainerText typePrimaryNumberContainerText statusFulfilledNumberContainerText sizeRegularNumberContainerText\"\n        >\n          <svg\n            aria-hidden={true}\n            className=\"icon numberContainerTextCheckIcon noFocusStyle\"\n            data-testid=\"icon\"\n            data-vibe=\"Icon\"\n            fill=\"currentColor\"\n            height=\"16\"\n            viewBox=\"0 0 20 20\"\n            width=\"16\"\n          >\n            <path\n              clipRule=\"evenodd\"\n              d=\"M8.53033 14.2478L8 13.7175L7.46967 14.2478C7.76256 14.5407 8.23744 14.5407 8.53033 14.2478ZM8 12.6569L4.53033 9.18718C4.23744 8.89429 3.76256 8.89429 3.46967 9.18718C3.17678 9.48008 3.17678 9.95495 3.46967 10.2478L7.46967 14.2478L8 13.7175L8.53033 14.2478L16.2478 6.53033C16.5407 6.23743 16.5407 5.76256 16.2478 5.46967C15.955 5.17677 15.4801 5.17677 15.1872 5.46967L8 12.6569Z\"\n              fill=\"currentColor\"\n              fillRule=\"evenodd\"\n            />\n          </svg>\n        </span>\n      </div>\n      <div\n        className=\"divider divider divider horizontal\"\n        data-testid=\"divider\"\n        data-vibe=\"Divider\"\n      />\n    </div>\n    <div\n      className=\"textContainer typePrimaryTextContainer statusFulfilledTextContainer sizeRegularTextContainer\"\n    >\n      <div\n        className=\"textContainerTitle typePrimaryTextContainerTitle statusFulfilledTextContainerTitle sizeRegularTextContainerTitle\"\n      >\n        <span\n          className=\"hiddenTextWrapper\"\n          data-testid=\"hidden-text_hiddenText\"\n          id=\"hiddenText\"\n        >\n          fulfilled\n        </span>\n         \n        <span\n          className=\"textContainerTitleText typePrimaryTextContainerTitleText statusFulfilledTextContainerTitleText sizeRegularTextContainerTitleText\"\n        >\n          Title\n        </span>\n      </div>\n      <span\n        className=\"textContainerSubtitleText typePrimaryTextContainerSubtitleText statusFulfilledTextContainerSubtitleText sizeRegularTextContainerSubtitleText\"\n      >\n        Subtitle\n      </span>\n    </div>\n  </li>\n  <li\n    aria-label=\"Step 2: Active - Active Subtitle, status: active\"\n    className=\"clickable indicator typePrimary statusActive sizeRegular clickable textPlacementVertical disableTextSelection\"\n    data-testid=\"step-indicator\"\n    onClick={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    role=\"button\"\n    tabIndex={-1}\n  >\n    <div\n      className=\"numberDividerContainer typePrimaryNumberDividerContainer statusActiveNumberDividerContainer sizeRegularNumberDividerContainer\"\n    >\n      <div\n        className=\"numberContainer typePrimaryNumberContainer statusActiveNumberContainer sizeRegularNumberContainer\"\n        role=\"button\"\n        tabIndex={0}\n      >\n        <span\n          className=\"numberContainerText typePrimaryNumberContainerText statusActiveNumberContainerText sizeRegularNumberContainerText\"\n        >\n          2\n        </span>\n      </div>\n      <div\n        className=\"divider divider divider horizontal\"\n        data-testid=\"divider\"\n        data-vibe=\"Divider\"\n      />\n    </div>\n    <div\n      className=\"textContainer typePrimaryTextContainer statusActiveTextContainer sizeRegularTextContainer\"\n    >\n      <div\n        className=\"textContainerTitle typePrimaryTextContainerTitle statusActiveTextContainerTitle sizeRegularTextContainerTitle\"\n      >\n        <span\n          className=\"hiddenTextWrapper\"\n          data-testid=\"hidden-text_hiddenText\"\n          id=\"hiddenText\"\n        >\n          active\n        </span>\n         \n        <span\n          className=\"textContainerTitleText typePrimaryTextContainerTitleText statusActiveTextContainerTitleText sizeRegularTextContainerTitleText\"\n        >\n          Active\n        </span>\n      </div>\n      <span\n        className=\"textContainerSubtitleText typePrimaryTextContainerSubtitleText statusActiveTextContainerSubtitleText sizeRegularTextContainerSubtitleText\"\n      >\n        Active Subtitle\n      </span>\n    </div>\n  </li>\n  <li\n    aria-label=\"Step 3: Pending - Pending Subtitle, status: pending\"\n    className=\"clickable indicator typePrimary statusPending sizeRegular clickable textPlacementVertical disableTextSelection\"\n    data-testid=\"step-indicator\"\n    onClick={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    role=\"button\"\n    tabIndex={-1}\n  >\n    <div\n      className=\"numberDividerContainer typePrimaryNumberDividerContainer statusPendingNumberDividerContainer sizeRegularNumberDividerContainer\"\n    >\n      <div\n        className=\"numberContainer typePrimaryNumberContainer statusPendingNumberContainer sizeRegularNumberContainer\"\n        role=\"button\"\n        tabIndex={0}\n      >\n        <span\n          className=\"numberContainerText typePrimaryNumberContainerText statusPendingNumberContainerText sizeRegularNumberContainerText\"\n        >\n          3\n        </span>\n      </div>\n    </div>\n    <div\n      className=\"textContainer typePrimaryTextContainer statusPendingTextContainer sizeRegularTextContainer\"\n    >\n      <div\n        className=\"textContainerTitle typePrimaryTextContainerTitle statusPendingTextContainerTitle sizeRegularTextContainerTitle\"\n      >\n        <span\n          className=\"hiddenTextWrapper\"\n          data-testid=\"hidden-text_hiddenText\"\n          id=\"hiddenText\"\n        >\n          pending\n        </span>\n         \n        <span\n          className=\"textContainerTitleText typePrimaryTextContainerTitleText statusPendingTextContainerTitleText sizeRegularTextContainerTitleText\"\n        >\n          Pending\n        </span>\n      </div>\n      <span\n        className=\"textContainerSubtitleText typePrimaryTextContainerSubtitleText statusPendingTextContainerSubtitleText sizeRegularTextContainerSubtitleText\"\n      >\n        Pending Subtitle\n      </span>\n    </div>\n  </li>\n</ol>\n`;\n\nexports[`MultiStepIndicator renders correctly > with stepComponentClassName 1`] = `\n<ol\n  className=\"wrapper\"\n  data-testid=\"multi-step-indicator\"\n>\n  <li\n    aria-label=\"Step 1: Title - Subtitle, status: fulfilled\"\n    className=\"clickable indicator typePrimary statusFulfilled sizeRegular test clickable disableTextSelection\"\n    data-testid=\"step-indicator\"\n    onClick={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    role=\"button\"\n    tabIndex={-1}\n  >\n    <div\n      className=\"numberDividerContainer typePrimaryNumberDividerContainer statusFulfilledNumberDividerContainer sizeRegularNumberDividerContainer\"\n    >\n      <div\n        className=\"numberContainer typePrimaryNumberContainer statusFulfilledNumberContainer sizeRegularNumberContainer\"\n        role=\"button\"\n        tabIndex={0}\n      >\n        <span\n          className=\"numberContainerText typePrimaryNumberContainerText statusFulfilledNumberContainerText sizeRegularNumberContainerText\"\n        >\n          <svg\n            aria-hidden={true}\n            className=\"icon numberContainerTextCheckIcon noFocusStyle\"\n            data-testid=\"icon\"\n            data-vibe=\"Icon\"\n            fill=\"currentColor\"\n            height=\"16\"\n            viewBox=\"0 0 20 20\"\n            width=\"16\"\n          >\n            <path\n              clipRule=\"evenodd\"\n              d=\"M8.53033 14.2478L8 13.7175L7.46967 14.2478C7.76256 14.5407 8.23744 14.5407 8.53033 14.2478ZM8 12.6569L4.53033 9.18718C4.23744 8.89429 3.76256 8.89429 3.46967 9.18718C3.17678 9.48008 3.17678 9.95495 3.46967 10.2478L7.46967 14.2478L8 13.7175L8.53033 14.2478L16.2478 6.53033C16.5407 6.23743 16.5407 5.76256 16.2478 5.46967C15.955 5.17677 15.4801 5.17677 15.1872 5.46967L8 12.6569Z\"\n              fill=\"currentColor\"\n              fillRule=\"evenodd\"\n            />\n          </svg>\n        </span>\n      </div>\n    </div>\n    <div\n      className=\"textContainer typePrimaryTextContainer statusFulfilledTextContainer sizeRegularTextContainer\"\n    >\n      <div\n        className=\"textContainerTitle typePrimaryTextContainerTitle statusFulfilledTextContainerTitle sizeRegularTextContainerTitle\"\n      >\n        <span\n          className=\"hiddenTextWrapper\"\n          data-testid=\"hidden-text_hiddenText\"\n          id=\"hiddenText\"\n        >\n          fulfilled\n        </span>\n         \n        <span\n          className=\"textContainerTitleText typePrimaryTextContainerTitleText statusFulfilledTextContainerTitleText sizeRegularTextContainerTitleText\"\n        >\n          Title\n        </span>\n      </div>\n      <span\n        className=\"textContainerSubtitleText typePrimaryTextContainerSubtitleText statusFulfilledTextContainerSubtitleText sizeRegularTextContainerSubtitleText\"\n      >\n        Subtitle\n      </span>\n    </div>\n  </li>\n  <div\n    className=\"divider divider horizontal\"\n    data-testid=\"divider\"\n    data-vibe=\"Divider\"\n  />\n  <li\n    aria-label=\"Step 2: Active - Active Subtitle, status: active\"\n    className=\"clickable indicator typePrimary statusActive sizeRegular test clickable disableTextSelection\"\n    data-testid=\"step-indicator\"\n    onClick={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    role=\"button\"\n    tabIndex={-1}\n  >\n    <div\n      className=\"numberDividerContainer typePrimaryNumberDividerContainer statusActiveNumberDividerContainer sizeRegularNumberDividerContainer\"\n    >\n      <div\n        className=\"numberContainer typePrimaryNumberContainer statusActiveNumberContainer sizeRegularNumberContainer\"\n        role=\"button\"\n        tabIndex={0}\n      >\n        <span\n          className=\"numberContainerText typePrimaryNumberContainerText statusActiveNumberContainerText sizeRegularNumberContainerText\"\n        >\n          2\n        </span>\n      </div>\n    </div>\n    <div\n      className=\"textContainer typePrimaryTextContainer statusActiveTextContainer sizeRegularTextContainer\"\n    >\n      <div\n        className=\"textContainerTitle typePrimaryTextContainerTitle statusActiveTextContainerTitle sizeRegularTextContainerTitle\"\n      >\n        <span\n          className=\"hiddenTextWrapper\"\n          data-testid=\"hidden-text_hiddenText\"\n          id=\"hiddenText\"\n        >\n          active\n        </span>\n         \n        <span\n          className=\"textContainerTitleText typePrimaryTextContainerTitleText statusActiveTextContainerTitleText sizeRegularTextContainerTitleText\"\n        >\n          Active\n        </span>\n      </div>\n      <span\n        className=\"textContainerSubtitleText typePrimaryTextContainerSubtitleText statusActiveTextContainerSubtitleText sizeRegularTextContainerSubtitleText\"\n      >\n        Active Subtitle\n      </span>\n    </div>\n  </li>\n  <div\n    className=\"divider divider horizontal\"\n    data-testid=\"divider\"\n    data-vibe=\"Divider\"\n  />\n  <li\n    aria-label=\"Step 3: Pending - Pending Subtitle, status: pending\"\n    className=\"clickable indicator typePrimary statusPending sizeRegular test clickable disableTextSelection\"\n    data-testid=\"step-indicator\"\n    onClick={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    role=\"button\"\n    tabIndex={-1}\n  >\n    <div\n      className=\"numberDividerContainer typePrimaryNumberDividerContainer statusPendingNumberDividerContainer sizeRegularNumberDividerContainer\"\n    >\n      <div\n        className=\"numberContainer typePrimaryNumberContainer statusPendingNumberContainer sizeRegularNumberContainer\"\n        role=\"button\"\n        tabIndex={0}\n      >\n        <span\n          className=\"numberContainerText typePrimaryNumberContainerText statusPendingNumberContainerText sizeRegularNumberContainerText\"\n        >\n          3\n        </span>\n      </div>\n    </div>\n    <div\n      className=\"textContainer typePrimaryTextContainer statusPendingTextContainer sizeRegularTextContainer\"\n    >\n      <div\n        className=\"textContainerTitle typePrimaryTextContainerTitle statusPendingTextContainerTitle sizeRegularTextContainerTitle\"\n      >\n        <span\n          className=\"hiddenTextWrapper\"\n          data-testid=\"hidden-text_hiddenText\"\n          id=\"hiddenText\"\n        >\n          pending\n        </span>\n         \n        <span\n          className=\"textContainerTitleText typePrimaryTextContainerTitleText statusPendingTextContainerTitleText sizeRegularTextContainerTitleText\"\n        >\n          Pending\n        </span>\n      </div>\n      <span\n        className=\"textContainerSubtitleText typePrimaryTextContainerSubtitleText statusPendingTextContainerSubtitleText sizeRegularTextContainerSubtitleText\"\n      >\n        Pending Subtitle\n      </span>\n    </div>\n  </li>\n</ol>\n`;\n\nexports[`MultiStepIndicator renders correctly > with steps 1`] = `\n<ol\n  className=\"wrapper\"\n  data-testid=\"multi-step-indicator\"\n>\n  <li\n    aria-label=\"Step 1: Title - Subtitle, status: fulfilled\"\n    className=\"clickable indicator typePrimary statusFulfilled sizeRegular clickable disableTextSelection\"\n    data-testid=\"step-indicator\"\n    onClick={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    role=\"button\"\n    tabIndex={-1}\n  >\n    <div\n      className=\"numberDividerContainer typePrimaryNumberDividerContainer statusFulfilledNumberDividerContainer sizeRegularNumberDividerContainer\"\n    >\n      <div\n        className=\"numberContainer typePrimaryNumberContainer statusFulfilledNumberContainer sizeRegularNumberContainer\"\n        role=\"button\"\n        tabIndex={0}\n      >\n        <span\n          className=\"numberContainerText typePrimaryNumberContainerText statusFulfilledNumberContainerText sizeRegularNumberContainerText\"\n        >\n          <svg\n            aria-hidden={true}\n            className=\"icon numberContainerTextCheckIcon noFocusStyle\"\n            data-testid=\"icon\"\n            data-vibe=\"Icon\"\n            fill=\"currentColor\"\n            height=\"16\"\n            viewBox=\"0 0 20 20\"\n            width=\"16\"\n          >\n            <path\n              clipRule=\"evenodd\"\n              d=\"M8.53033 14.2478L8 13.7175L7.46967 14.2478C7.76256 14.5407 8.23744 14.5407 8.53033 14.2478ZM8 12.6569L4.53033 9.18718C4.23744 8.89429 3.76256 8.89429 3.46967 9.18718C3.17678 9.48008 3.17678 9.95495 3.46967 10.2478L7.46967 14.2478L8 13.7175L8.53033 14.2478L16.2478 6.53033C16.5407 6.23743 16.5407 5.76256 16.2478 5.46967C15.955 5.17677 15.4801 5.17677 15.1872 5.46967L8 12.6569Z\"\n              fill=\"currentColor\"\n              fillRule=\"evenodd\"\n            />\n          </svg>\n        </span>\n      </div>\n    </div>\n    <div\n      className=\"textContainer typePrimaryTextContainer statusFulfilledTextContainer sizeRegularTextContainer\"\n    >\n      <div\n        className=\"textContainerTitle typePrimaryTextContainerTitle statusFulfilledTextContainerTitle sizeRegularTextContainerTitle\"\n      >\n        <span\n          className=\"hiddenTextWrapper\"\n          data-testid=\"hidden-text_hiddenText\"\n          id=\"hiddenText\"\n        >\n          fulfilled\n        </span>\n         \n        <span\n          className=\"textContainerTitleText typePrimaryTextContainerTitleText statusFulfilledTextContainerTitleText sizeRegularTextContainerTitleText\"\n        >\n          Title\n        </span>\n      </div>\n      <span\n        className=\"textContainerSubtitleText typePrimaryTextContainerSubtitleText statusFulfilledTextContainerSubtitleText sizeRegularTextContainerSubtitleText\"\n      >\n        Subtitle\n      </span>\n    </div>\n  </li>\n  <div\n    className=\"divider divider horizontal\"\n    data-testid=\"divider\"\n    data-vibe=\"Divider\"\n  />\n  <li\n    aria-label=\"Step 2: Active - Active Subtitle, status: active\"\n    className=\"clickable indicator typePrimary statusActive sizeRegular clickable disableTextSelection\"\n    data-testid=\"step-indicator\"\n    onClick={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    role=\"button\"\n    tabIndex={-1}\n  >\n    <div\n      className=\"numberDividerContainer typePrimaryNumberDividerContainer statusActiveNumberDividerContainer sizeRegularNumberDividerContainer\"\n    >\n      <div\n        className=\"numberContainer typePrimaryNumberContainer statusActiveNumberContainer sizeRegularNumberContainer\"\n        role=\"button\"\n        tabIndex={0}\n      >\n        <span\n          className=\"numberContainerText typePrimaryNumberContainerText statusActiveNumberContainerText sizeRegularNumberContainerText\"\n        >\n          2\n        </span>\n      </div>\n    </div>\n    <div\n      className=\"textContainer typePrimaryTextContainer statusActiveTextContainer sizeRegularTextContainer\"\n    >\n      <div\n        className=\"textContainerTitle typePrimaryTextContainerTitle statusActiveTextContainerTitle sizeRegularTextContainerTitle\"\n      >\n        <span\n          className=\"hiddenTextWrapper\"\n          data-testid=\"hidden-text_hiddenText\"\n          id=\"hiddenText\"\n        >\n          active\n        </span>\n         \n        <span\n          className=\"textContainerTitleText typePrimaryTextContainerTitleText statusActiveTextContainerTitleText sizeRegularTextContainerTitleText\"\n        >\n          Active\n        </span>\n      </div>\n      <span\n        className=\"textContainerSubtitleText typePrimaryTextContainerSubtitleText statusActiveTextContainerSubtitleText sizeRegularTextContainerSubtitleText\"\n      >\n        Active Subtitle\n      </span>\n    </div>\n  </li>\n  <div\n    className=\"divider divider horizontal\"\n    data-testid=\"divider\"\n    data-vibe=\"Divider\"\n  />\n  <li\n    aria-label=\"Step 3: Pending - Pending Subtitle, status: pending\"\n    className=\"clickable indicator typePrimary statusPending sizeRegular clickable disableTextSelection\"\n    data-testid=\"step-indicator\"\n    onClick={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    role=\"button\"\n    tabIndex={-1}\n  >\n    <div\n      className=\"numberDividerContainer typePrimaryNumberDividerContainer statusPendingNumberDividerContainer sizeRegularNumberDividerContainer\"\n    >\n      <div\n        className=\"numberContainer typePrimaryNumberContainer statusPendingNumberContainer sizeRegularNumberContainer\"\n        role=\"button\"\n        tabIndex={0}\n      >\n        <span\n          className=\"numberContainerText typePrimaryNumberContainerText statusPendingNumberContainerText sizeRegularNumberContainerText\"\n        >\n          3\n        </span>\n      </div>\n    </div>\n    <div\n      className=\"textContainer typePrimaryTextContainer statusPendingTextContainer sizeRegularTextContainer\"\n    >\n      <div\n        className=\"textContainerTitle typePrimaryTextContainerTitle statusPendingTextContainerTitle sizeRegularTextContainerTitle\"\n      >\n        <span\n          className=\"hiddenTextWrapper\"\n          data-testid=\"hidden-text_hiddenText\"\n          id=\"hiddenText\"\n        >\n          pending\n        </span>\n         \n        <span\n          className=\"textContainerTitleText typePrimaryTextContainerTitleText statusPendingTextContainerTitleText sizeRegularTextContainerTitleText\"\n        >\n          Pending\n        </span>\n      </div>\n      <span\n        className=\"textContainerSubtitleText typePrimaryTextContainerSubtitleText statusPendingTextContainerSubtitleText sizeRegularTextContainerSubtitleText\"\n      >\n        Pending Subtitle\n      </span>\n    </div>\n  </li>\n</ol>\n`;\n\nexports[`MultiStepIndicator renders correctly > with textPlacement vertical 1`] = `\n<ol\n  className=\"wrapper\"\n  data-testid=\"multi-step-indicator\"\n>\n  <li\n    aria-label=\"Step 1: Title - Subtitle, status: fulfilled\"\n    className=\"clickable indicator typePrimary statusFulfilled sizeRegular clickable textPlacementVertical disableTextSelection\"\n    data-testid=\"step-indicator\"\n    onClick={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    role=\"button\"\n    tabIndex={-1}\n  >\n    <div\n      className=\"numberDividerContainer typePrimaryNumberDividerContainer statusFulfilledNumberDividerContainer sizeRegularNumberDividerContainer\"\n    >\n      <div\n        className=\"numberContainer typePrimaryNumberContainer statusFulfilledNumberContainer sizeRegularNumberContainer\"\n        role=\"button\"\n        tabIndex={0}\n      >\n        <span\n          className=\"numberContainerText typePrimaryNumberContainerText statusFulfilledNumberContainerText sizeRegularNumberContainerText\"\n        >\n          <svg\n            aria-hidden={true}\n            className=\"icon numberContainerTextCheckIcon noFocusStyle\"\n            data-testid=\"icon\"\n            data-vibe=\"Icon\"\n            fill=\"currentColor\"\n            height=\"16\"\n            viewBox=\"0 0 20 20\"\n            width=\"16\"\n          >\n            <path\n              clipRule=\"evenodd\"\n              d=\"M8.53033 14.2478L8 13.7175L7.46967 14.2478C7.76256 14.5407 8.23744 14.5407 8.53033 14.2478ZM8 12.6569L4.53033 9.18718C4.23744 8.89429 3.76256 8.89429 3.46967 9.18718C3.17678 9.48008 3.17678 9.95495 3.46967 10.2478L7.46967 14.2478L8 13.7175L8.53033 14.2478L16.2478 6.53033C16.5407 6.23743 16.5407 5.76256 16.2478 5.46967C15.955 5.17677 15.4801 5.17677 15.1872 5.46967L8 12.6569Z\"\n              fill=\"currentColor\"\n              fillRule=\"evenodd\"\n            />\n          </svg>\n        </span>\n      </div>\n      <div\n        className=\"divider divider divider horizontal\"\n        data-testid=\"divider\"\n        data-vibe=\"Divider\"\n      />\n    </div>\n    <div\n      className=\"textContainer typePrimaryTextContainer statusFulfilledTextContainer sizeRegularTextContainer\"\n    >\n      <div\n        className=\"textContainerTitle typePrimaryTextContainerTitle statusFulfilledTextContainerTitle sizeRegularTextContainerTitle\"\n      >\n        <span\n          className=\"hiddenTextWrapper\"\n          data-testid=\"hidden-text_hiddenText\"\n          id=\"hiddenText\"\n        >\n          fulfilled\n        </span>\n         \n        <span\n          className=\"textContainerTitleText typePrimaryTextContainerTitleText statusFulfilledTextContainerTitleText sizeRegularTextContainerTitleText\"\n        >\n          Title\n        </span>\n      </div>\n      <span\n        className=\"textContainerSubtitleText typePrimaryTextContainerSubtitleText statusFulfilledTextContainerSubtitleText sizeRegularTextContainerSubtitleText\"\n      >\n        Subtitle\n      </span>\n    </div>\n  </li>\n  <li\n    aria-label=\"Step 2: Active - Active Subtitle, status: active\"\n    className=\"clickable indicator typePrimary statusActive sizeRegular clickable textPlacementVertical disableTextSelection\"\n    data-testid=\"step-indicator\"\n    onClick={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    role=\"button\"\n    tabIndex={-1}\n  >\n    <div\n      className=\"numberDividerContainer typePrimaryNumberDividerContainer statusActiveNumberDividerContainer sizeRegularNumberDividerContainer\"\n    >\n      <div\n        className=\"numberContainer typePrimaryNumberContainer statusActiveNumberContainer sizeRegularNumberContainer\"\n        role=\"button\"\n        tabIndex={0}\n      >\n        <span\n          className=\"numberContainerText typePrimaryNumberContainerText statusActiveNumberContainerText sizeRegularNumberContainerText\"\n        >\n          2\n        </span>\n      </div>\n      <div\n        className=\"divider divider divider horizontal\"\n        data-testid=\"divider\"\n        data-vibe=\"Divider\"\n      />\n    </div>\n    <div\n      className=\"textContainer typePrimaryTextContainer statusActiveTextContainer sizeRegularTextContainer\"\n    >\n      <div\n        className=\"textContainerTitle typePrimaryTextContainerTitle statusActiveTextContainerTitle sizeRegularTextContainerTitle\"\n      >\n        <span\n          className=\"hiddenTextWrapper\"\n          data-testid=\"hidden-text_hiddenText\"\n          id=\"hiddenText\"\n        >\n          active\n        </span>\n         \n        <span\n          className=\"textContainerTitleText typePrimaryTextContainerTitleText statusActiveTextContainerTitleText sizeRegularTextContainerTitleText\"\n        >\n          Active\n        </span>\n      </div>\n      <span\n        className=\"textContainerSubtitleText typePrimaryTextContainerSubtitleText statusActiveTextContainerSubtitleText sizeRegularTextContainerSubtitleText\"\n      >\n        Active Subtitle\n      </span>\n    </div>\n  </li>\n  <li\n    aria-label=\"Step 3: Pending - Pending Subtitle, status: pending\"\n    className=\"clickable indicator typePrimary statusPending sizeRegular clickable textPlacementVertical disableTextSelection\"\n    data-testid=\"step-indicator\"\n    onClick={[Function]}\n    onKeyDown={[Function]}\n    onMouseDown={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    role=\"button\"\n    tabIndex={-1}\n  >\n    <div\n      className=\"numberDividerContainer typePrimaryNumberDividerContainer statusPendingNumberDividerContainer sizeRegularNumberDividerContainer\"\n    >\n      <div\n        className=\"numberContainer typePrimaryNumberContainer statusPendingNumberContainer sizeRegularNumberContainer\"\n        role=\"button\"\n        tabIndex={0}\n      >\n        <span\n          className=\"numberContainerText typePrimaryNumberContainerText statusPendingNumberContainerText sizeRegularNumberContainerText\"\n        >\n          3\n        </span>\n      </div>\n    </div>\n    <div\n      className=\"textContainer typePrimaryTextContainer statusPendingTextContainer sizeRegularTextContainer\"\n    >\n      <div\n        className=\"textContainerTitle typePrimaryTextContainerTitle statusPendingTextContainerTitle sizeRegularTextContainerTitle\"\n      >\n        <span\n          className=\"hiddenTextWrapper\"\n          data-testid=\"hidden-text_hiddenText\"\n          id=\"hiddenText\"\n        >\n          pending\n        </span>\n         \n        <span\n          className=\"textContainerTitleText typePrimaryTextContainerTitleText statusPendingTextContainerTitleText sizeRegularTextContainerTitleText\"\n        >\n          Pending\n        </span>\n      </div>\n      <span\n        className=\"textContainerSubtitleText typePrimaryTextContainerSubtitleText statusPendingTextContainerSubtitleText sizeRegularTextContainerSubtitleText\"\n      >\n        Pending Subtitle\n      </span>\n    </div>\n  </li>\n</ol>\n`;\n"
  },
  {
    "path": "packages/core/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n@import \"../../../../styles/typography\";\n@import \"../../../../styles/keyframes\";\n\n.indicator {\n  @include vibe-text(text2, normal);\n  color: var(--text-color-on-primary);\n  display: flex;\n  margin: 0;\n  padding: 0;\n  text-indent: 0;\n  list-style-type: none;\n}\n\n.textContainer {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin-inline-start: 16px;\n}\n\n.sizeCompactTextContainer {\n  margin-inline-start: var(--space-8);\n  justify-content: center;\n  align-content: center;\n}\n\n.textContainerTitle {\n  width: 100%;\n  margin-bottom: var(--space-4);\n}\n\n.textContainerTitle .visuallyHidden {\n  display: none;\n}\n\n.textContainerTitleText {\n  @include vibe-text(text2, medium);\n  color: var(--primary-text-color);\n  margin-bottom: 2px;\n}\n\n.textContainerSubtitleText {\n  width: 100%;\n  @include vibe-text(text2, normal);\n  color: var(--primary-text-color);\n}\n.sizeCompactTextContainerTitle {\n  margin-bottom: 0px;\n}\n\n.textPlacementVertical {\n  margin: 8px;\n  flex-direction: column;\n  flex: 1 1 0px;\n}\n\n.textPlacementVertical .textContainer {\n  margin-inline-start: 0;\n  margin-top: var(--space-16);\n}\n\n.textPlacementVertical .numberDividerContainer {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n}\n\n.sizeCompactTextContainerTitleText {\n  display: block;\n  @include vibe-text(text2, normal);\n  max-width: 150px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  margin-bottom: 0;\n}\n\n.textPlacementVertical .numberDividerContainer .divider {\n  background-color: var(--ui-border-color);\n  margin: 16px 0 16px;\n  margin-inline-start: 16px;\n  height: 1px;\n  flex: 1 1 0;\n}\n\n.sizeCompactNumberDividerContainer {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &.statusActiveNumberDividerContainer {\n    width: 40px;\n  }\n}\n\n.indicator.clickable {\n  cursor: pointer;\n}\n\n.withAnimation {\n  animation: stepIndicatiorCirclePopElastic var(--motion-expressive-short);\n}\n\n/* New state enters */\n\n.swapEnter {\n  opacity: 0;\n  transform: translateY(15px);\n}\n\n.swapEnterActive {\n  position: relative;\n  opacity: 1;\n  transition: transform var(--motion-productive-long) var(--motion-timing-enter), opacity var(--motion-productive-short);\n  transform: translateY(0);\n}\n\n/* Old state leaves */\n\n.swapExit {\n  position: relative;\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.swapExitActive {\n  position: relative;\n  opacity: 0;\n  transform: translateY(-15px);\n  transition: transform var(--motion-productive-long) var(--motion-timing-enter), opacity var(--motion-productive-short);\n}\n\n.numberContainer {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  display: flex;\n}\n\n.numberContainerText {\n  margin: auto;\n  display: flex;\n  align-items: center;\n}\n\n.numberContainerTextCheckIcon {\n  width: 20px;\n  height: 20px;\n  margin-top: 2px;\n}\n\n.typePrimaryNumberContainer {\n  background-color: var(--primary-color);\n}\n\n.typePrimaryNumberContainer:hover {\n  background-color: var(--primary-hover-color);\n}\n\n.typeDangerNumberContainer {\n  background-color: var(--negative-color);\n}\n\n.typeDangerNumberContainer:hover {\n  background-color: var(--negative-color-hover);\n}\n\n.typeSuccessNumberContainer {\n  background-color: var(--positive-color);\n}\n\n.typeSuccessNumberContainer:hover {\n  background-color: var(--positive-color-hover);\n}\n\n.typeDarkNumberContainer {\n  background-color: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n\n.typeDarkNumberContainer:hover {\n  background-color: var(--secondary-text-color);\n}\n\n.statusActiveNumberContainer {\n  box-shadow: 0 0 0 4px var(--primary-background-color), 0 0 0 6px var(--primary-color);\n}\n\n.statusActiveNumberContainer.typeDangerNumberContainer {\n  box-shadow: 0 0 0 4px var(--primary-background-color), 0 0 0 6px var(--negative-color);\n}\n\n.statusActiveNumberContainer.typeSuccessNumberContainer {\n  box-shadow: 0 0 0 4px var(--primary-background-color), 0 0 0 6px var(--positive-color);\n}\n\n.statusActiveNumberContainer.typeDarkNumberContainer {\n  box-shadow: 0 0 0 4px var(--primary-background-color), 0 0 0 6px var(--primary-text-color);\n}\n\n.sizeCompactNumberContainer {\n  width: 28px;\n  height: 28px;\n}\n\n.statusPendingNumberContainer {\n  background-color: var(--primary-background-color);\n  color: var(--primary-text-color);\n  border-color: var(--ui-border-color) !important;\n  border: 1px solid;\n}\n\n.statusPendingNumberContainer:hover {\n  background-color: var(--primary-color);\n  color: var(--text-color-on-primary);\n  border: none;\n}\n\n.statusPendingNumberContainer.typeDangerNumberContainer:hover {\n  background-color: var(--negative-color);\n}\n\n.statusPendingNumberContainer.typeSuccessNumberContainer:hover {\n  background-color: var(--positive-color);\n}\n\n.statusPendingNumberContainer.typeDarkNumberContainer:hover {\n  background-color: var(--text-color-on-inverted);\n}\n\n@include keyframe(step-indicatior-circle-pop-elastic) {\n  @include pop-elastic();\n}\n"
  },
  {
    "path": "packages/core/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.tsx",
    "content": "import { camelCase } from \"es-toolkit\";\nimport { getStyle, NOOP } from \"@vibe/shared\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport { keyCodes } from \"../../../../constants/keyCodes\";\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { CSSTransition, SwitchTransition } from \"react-transition-group\";\nimport useEventListener from \"../../../../hooks/useEventListener\";\nimport useKeyEvent from \"../../../../hooks/useKeyEvent\";\nimport { Icon } from \"@vibe/icon\";\nimport { Check } from \"@vibe/icons\";\nimport Divider from \"../../../../components/Divider/Divider\";\n\nimport HiddenText from \"../../../../components/HiddenText/HiddenText\";\nimport { Clickable } from \"@vibe/clickable\";\nimport { type MultiStepSize, type MultiStepType, type StepStatus } from \"../../MultiStep.types\";\nimport styles from \"./StepIndicator.module.scss\";\nimport classNames from \"classnames\";\nimport { type VibeComponentProps } from \"../../../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\n\nconst KEYS = [keyCodes.ENTER, keyCodes.SPACE];\n\nexport interface StepCircleDisplayProps {\n  /**\n   * The status of the step.\n   */\n  status: StepStatus;\n  /**\n   * If true, displays the step number instead of the fulfilled step icon.\n   */\n  isFulfilledStepDisplayNumber: boolean;\n  /**\n   * The icon displayed when the step is fulfilled.\n   */\n  fulfilledStepIcon: SubIcon;\n  /**\n   * The type of icon used.\n   */\n  fulfilledStepIconType: \"svg\" | \"font\";\n  /**\n   * The step number in the sequence.\n   */\n  stepNumber: number;\n}\n\nconst StepCircleDisplay: React.FC<StepCircleDisplayProps> = ({\n  status,\n  isFulfilledStepDisplayNumber,\n  fulfilledStepIcon,\n  fulfilledStepIconType,\n  stepNumber\n}) => {\n  return status === \"fulfilled\" && !isFulfilledStepDisplayNumber ? (\n    <Icon\n      icon={fulfilledStepIcon}\n      className={classNames(styles.numberContainerTextCheckIcon)}\n      type={fulfilledStepIconType}\n      ignoreFocusStyle\n      aria-hidden={true}\n    />\n  ) : (\n    <>{stepNumber}</>\n  );\n};\n\nexport interface StepIndicatorProps extends VibeComponentProps {\n  /**\n   * The status of the step.\n   */\n  status: StepStatus;\n  /**\n   * The main title text for the step.\n   */\n  titleText: string;\n  /**\n   * The subtitle text for the step.\n   */\n  subtitleText?: string;\n  /**\n   * The number of the step in the sequence.\n   */\n  stepNumber?: number;\n  /**\n   * Class name applied to the step component.\n   */\n  stepComponentClassName?: string;\n  /**\n   * The visual style of the step indicator.\n   */\n  type?: MultiStepType;\n  /**\n   * The icon used for a fulfilled step.\n   */\n  fulfilledStepIcon?: SubIcon;\n  /**\n   * The type of icon used.\n   */\n  fulfilledStepIconType?: \"svg\" | \"font\";\n  /**\n   * If true, displays the step number instead of the fulfilled step icon.\n   */\n  isFulfilledStepDisplayNumber?: boolean;\n  /**\n   * Callback fired when the step is clicked.\n   */\n  onClick?: (stepNumber: number) => void;\n  /**\n   * If true, adds a divider after the step.\n   */\n  isFollowedByDivider?: boolean;\n  /**\n   * Class name applied to the step divider.\n   */\n  stepDividerClassName?: string;\n  /**\n   * If true, the step indicator is displayed vertically.\n   */\n  isVertical?: boolean;\n  /**\n   * The size of the step indicator.\n   */\n  size?: MultiStepSize;\n}\n\nconst StepIndicator: React.FC<StepIndicatorProps> = ({\n  stepComponentClassName,\n  stepNumber = 1,\n  status = \"pending\",\n  titleText = \"Heading text\",\n  subtitleText = \"Subtitle text\",\n  type = \"primary\",\n  fulfilledStepIcon = Check,\n  fulfilledStepIconType = \"svg\",\n  isFulfilledStepDisplayNumber = false,\n  onClick = NOOP,\n  isFollowedByDivider = false,\n  stepDividerClassName,\n  isVertical = false,\n  id,\n  size = \"regular\",\n  \"data-testid\": dataTestId\n}: StepIndicatorProps) => {\n  // Animations state\n  const [statusChangeAnimationState, setStatusChangeAnimationState] = useState(false);\n\n  // Refs\n  const componentRef = useRef(null);\n  const nodeRef = useRef<HTMLSpanElement>(null);\n  const prevStatusRef = useRef(status);\n\n  // Callbacks for modifying animation state\n  const enableStatusChangeAnimation = useCallback(() => {\n    setStatusChangeAnimationState(true);\n  }, [setStatusChangeAnimationState]);\n\n  const disableStatusChangeAnimation = useCallback(() => {\n    setStatusChangeAnimationState(false);\n  }, [setStatusChangeAnimationState]);\n\n  const isStatusTransition = useCallback(() => prevStatusRef.current !== status, [prevStatusRef, status]);\n\n  const handleClick = useCallback(() => {\n    if (onClick) onClick(stepNumber);\n  }, [onClick, stepNumber]);\n\n  // Event listeners for removing animation.\n  useEventListener({\n    eventName: \"animationend\",\n    callback: disableStatusChangeAnimation,\n    ref: componentRef\n  });\n\n  useKeyEvent({\n    keys: KEYS,\n    callback: handleClick,\n    ref: componentRef\n  });\n\n  // Effect - triggering animation when necessary.\n  useEffect(() => {\n    if (isStatusTransition()) {\n      enableStatusChangeAnimation();\n    }\n  }, [status, isStatusTransition, enableStatusChangeAnimation]);\n\n  // Effect - updating previous status ref value (for animation) after component update.\n  useEffect(() => {\n    prevStatusRef.current = status;\n  }, [status]);\n\n  const ariaLabel = useMemo(() => {\n    return `Step ${stepNumber}: ${titleText} - ${subtitleText}, status: ${status}`;\n  }, [status, titleText, stepNumber, subtitleText]);\n\n  const getClassNamesWithSuffix = (suffix: string) => {\n    return [\n      getStyle(styles, camelCase(suffix || \"indicator\")),\n      getStyle(styles, camelCase(`type-${type}${suffix}`)),\n      getStyle(styles, camelCase(`status-${status}${suffix}`)),\n      getStyle(styles, camelCase(`size-${size}${suffix}`))\n    ];\n  };\n\n  return (\n    <Clickable\n      tabIndex={-1}\n      elementType=\"li\"\n      className={cx(...getClassNamesWithSuffix(\"\"), stepComponentClassName, {\n        [styles.withAnimation]: statusChangeAnimationState,\n        [styles.clickable]: onClick,\n        [styles.textPlacementVertical]: isVertical\n      })}\n      aria-label={ariaLabel}\n      onClick={handleClick}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.STEP_INDICATOR, id)}\n    >\n      <div className={cx(...getClassNamesWithSuffix(\"__number-divider-container\"))}>\n        <div\n          className={cx(...getClassNamesWithSuffix(\"__number-container\"))}\n          ref={componentRef}\n          tabIndex={0}\n          role=\"button\"\n        >\n          <SwitchTransition mode=\"out-in\">\n            <CSSTransition\n              key={status}\n              nodeRef={nodeRef}\n              classNames={{\n                enter: styles.swapEnter,\n                enterActive: styles.swapEnterActive,\n                exit: styles.swapExit,\n                exitActive: styles.swapExitActive\n              }}\n              addEndListener={done => {\n                nodeRef.current?.addEventListener(\"transitionend\", done, false);\n              }}\n            >\n              <span ref={nodeRef} className={cx(...getClassNamesWithSuffix(\"__number-container__text\"))}>\n                <StepCircleDisplay\n                  fulfilledStepIcon={fulfilledStepIcon}\n                  fulfilledStepIconType={fulfilledStepIconType}\n                  isFulfilledStepDisplayNumber={isFulfilledStepDisplayNumber}\n                  stepNumber={stepNumber}\n                  status={status}\n                />\n              </span>\n            </CSSTransition>\n          </SwitchTransition>\n        </div>\n        {isFollowedByDivider && isVertical && <Divider className={cx(styles.divider, stepDividerClassName)} />}\n      </div>\n      <div className={cx(...getClassNamesWithSuffix(\"__text-container\"))}>\n        <div className={cx(...getClassNamesWithSuffix(\"__text-container__title\"))}>\n          <HiddenText text={status} /> {/* for accessibility */}\n          <span className={cx(...getClassNamesWithSuffix(\"__text-container__title__text\"))}>{titleText}</span>\n        </div>\n        {size !== \"compact\" ? (\n          <span className={cx(...getClassNamesWithSuffix(\"__text-container__subtitle__text\"))}>{subtitleText}</span>\n        ) : null}\n      </div>\n    </Clickable>\n  );\n};\n\nexport default StepIndicator;\n"
  },
  {
    "path": "packages/core/src/components/MultiStepIndicator/index.ts",
    "content": "export { default as MultiStepIndicator, type MultiStepIndicatorProps } from \"./MultiStepIndicator\";\n\nexport * from \"./MultiStep.types\";\n"
  },
  {
    "path": "packages/core/src/components/NumberField/NumberField.module.scss",
    "content": ".numberField {\n  width: 100%;\n\n  .label {\n    padding-bottom: 0;\n  }\n\n  .leftIcon {\n    color: var(--icon-color);\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/NumberField/NumberField.tsx",
    "content": "import React, { forwardRef, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { type NumberFieldProps } from \"./NumberField.types\";\nimport useNumberFieldState from \"./hooks/useNumberFieldState\";\nimport useSpinButtonHandlers from \"./hooks/useSpinButtonHandlers\";\nimport { BaseInput } from \"@vibe/base\";\nimport FieldLabel from \"../FieldLabel/FieldLabel\";\nimport InfoText from \"../InfoText/InfoText\";\nimport { Icon } from \"@vibe/icon\";\nimport NumberFieldSpinButton from \"./components/NumberFieldSpinButton/NumberFieldSpinButton\";\nimport styles from \"./NumberField.module.scss\";\nimport { Flex } from \"@vibe/layout\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nconst NumberField = forwardRef(\n  (\n    {\n      className,\n      value,\n      onChange,\n      label,\n      required,\n      placeholder,\n      infoText,\n      error,\n      success,\n      disabled,\n      readOnly,\n      min,\n      max,\n      step = 1,\n      size = \"medium\",\n      leftIcon,\n      \"aria-label\": ariaLabel,\n      id,\n      \"data-testid\": dataTestId,\n      allowOutOfBounds,\n      onValidityChange,\n      ...inputProps\n    }: NumberFieldProps,\n    ref: React.ForwardedRef<HTMLInputElement>\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const mergedRef = useMergeRef<HTMLInputElement>(ref, inputRef);\n\n    const {\n      inputValue,\n      numericValue,\n      onChange: handleChange,\n      onKeyDown,\n      isAtMin,\n      isAtMax\n    } = useNumberFieldState({\n      value,\n      onChange,\n      min,\n      max,\n      step,\n      disabled,\n      readOnly,\n      allowOutOfBounds,\n      onValidityChange\n    });\n\n    const { onIncrement, onDecrement } = useSpinButtonHandlers({\n      onChange,\n      value: numericValue,\n      step,\n      min,\n      max,\n      allowOutOfBounds,\n      readOnly,\n      inputRef\n    });\n\n    const renderedLeftIcon = useMemo(() => {\n      if (!leftIcon) return null;\n      return <Icon icon={leftIcon} className={styles.leftIcon} />;\n    }, [leftIcon]);\n\n    const renderedRightIcon = useMemo(() => {\n      return (\n        <NumberFieldSpinButton\n          inputId={id}\n          onIncrement={onIncrement}\n          onDecrement={onDecrement}\n          disabled={disabled || readOnly}\n          size={size}\n          isAtMin={isAtMin}\n          isAtMax={isAtMax}\n        />\n      );\n    }, [id, onIncrement, onDecrement, disabled, readOnly, size, isAtMin, isAtMax]);\n\n    const infoTextId = useMemo(() => {\n      return infoText && id ? `${id}-info-text` : undefined;\n    }, [infoText, id]);\n\n    const labelId = useMemo(() => {\n      return label && id ? `${id}-label` : undefined;\n    }, [label, id]);\n\n    return (\n      <Flex\n        direction=\"column\"\n        align=\"stretch\"\n        gap=\"xs\"\n        className={cx(styles.numberField, className)}\n        data-vibe={ComponentVibeId.NUMBER_FIELD}\n      >\n        <FieldLabel id={labelId} className={styles.label} labelText={label} required={required} labelFor={id} />\n        <BaseInput\n          {...inputProps}\n          data-testid={dataTestId}\n          ref={mergedRef}\n          id={id}\n          value={inputValue}\n          onChange={handleChange}\n          onKeyDown={onKeyDown}\n          placeholder={placeholder}\n          type=\"text\"\n          inputMode=\"numeric\"\n          inputRole=\"spinbutton\"\n          aria-valuenow={numericValue}\n          aria-valuemin={min}\n          aria-valuemax={max}\n          aria-required={required}\n          aria-label={ariaLabel || label}\n          aria-labelledby={labelId}\n          aria-describedby={infoTextId}\n          disabled={disabled}\n          readOnly={readOnly}\n          size={size}\n          error={error}\n          success={success}\n          renderLeft={renderedLeftIcon}\n          renderRight={renderedRightIcon}\n        />\n        <InfoText\n          id={infoTextId}\n          text={infoText}\n          error={error}\n          success={success}\n          disabled={disabled}\n          readOnly={readOnly}\n        />\n      </Flex>\n    );\n  }\n);\n\nexport default NumberField;\n"
  },
  {
    "path": "packages/core/src/components/NumberField/NumberField.types.ts",
    "content": "import { type InputHTMLAttributes } from \"react\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport { type FormElementProps } from \"../../types/FormElement\";\n\ntype NumberFieldNativeInputProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  | \"size\"\n  | \"value\"\n  | \"onChange\"\n  | \"disabled\"\n  | \"readOnly\"\n  | \"id\"\n  | \"type\"\n  | \"inputMode\"\n  | \"role\"\n  | \"aria-valuenow\"\n  | \"aria-valuemin\"\n  | \"aria-valuemax\"\n  | \"aria-required\"\n  | \"aria-invalid\"\n  | \"min\"\n  | \"max\"\n  | \"step\"\n>;\n\ninterface NumberFieldBaseProps extends NumberFieldNativeInputProps, Omit<VibeComponentProps, \"id\"> {\n  /**\n   * The current value of the number field.\n   */\n  value: number | null;\n  /**\n   * Callback fired when the value changes.\n   * @param {number | null} value - The new value.\n   * @param {React.ChangeEvent<HTMLInputElement> | React.MouseEvent | React.KeyboardEvent} event - The event that triggered the change.\n   */\n  onChange: (\n    value: number | null,\n    event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent | React.KeyboardEvent\n  ) => void;\n  /**\n   * If true, the input will be required.\n   */\n  required?: boolean;\n  /**\n   * The placeholder text to display when the input is empty.\n   */\n  placeholder?: string;\n  /**\n   * If true, the input will be in an error state.\n   */\n  error?: boolean;\n  /**\n   * If true, the input will be in a success state.\n   */\n  success?: boolean;\n  /**\n   * If true, the input will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If true, the input will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * The minimum value allowed.\n   */\n  min?: number;\n  /**\n   * The maximum value allowed.\n   */\n  max?: number;\n  /**\n   * The amount to increment or decrement the value by.\n   */\n  step?: number;\n  /**\n   * The size of the input.\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n  /**\n   * An icon to display on the left side of the input.\n   */\n  leftIcon?: SubIcon;\n}\n\ntype NumberFieldValidityChangeProps =\n  | {\n      /**\n       * If false, the value will be clamped to the min/max values on change.\n       */\n      allowOutOfBounds?: false;\n      onValidityChange?: never;\n    }\n  | {\n      /**\n       * If true, the value can exceed the min/max values.\n       * Can be used alongside `onValidityChange` to handle the validity of the value.\n       */\n      allowOutOfBounds: true;\n      /**\n       * Callback fired when the validity of the value changes (if it is within the min/max bounds).\n       */\n      onValidityChange?: (isValid: boolean) => void;\n    };\n\nexport type NumberFieldProps = NumberFieldBaseProps & FormElementProps & NumberFieldValidityChangeProps;\n"
  },
  {
    "path": "packages/core/src/components/NumberField/__tests__/NumberField.test.tsx",
    "content": "import React from \"react\";\nimport { render, fireEvent } from \"@testing-library/react\";\nimport { vi, describe, it, expect, beforeEach } from \"vitest\";\nimport NumberField from \"../NumberField\";\nimport { WhatsNew } from \"@vibe/icons\";\n\ndescribe(\"NumberField\", () => {\n  const mockOnChange = vi.fn();\n  const mockOnValidityChange = vi.fn();\n\n  beforeEach(() => {\n    vi.clearAllMocks();\n  });\n\n  describe(\"Integration tests\", () => {\n    it(\"should render with label and associate it correctly\", () => {\n      const { getByLabelText, getByText } = render(\n        <NumberField label=\"Age\" id=\"age\" value={25} onChange={mockOnChange} />\n      );\n      const input = getByLabelText(\"Age\");\n      const label = getByText(\"Age\");\n      expect(input).toBeInTheDocument();\n      expect(label).toBeInTheDocument();\n      expect(input).toHaveAttribute(\"id\", \"age\");\n    });\n\n    it(\"should render required field indicator\", () => {\n      const { getByText } = render(<NumberField label=\"Age\" id=\"age\" required value={null} onChange={mockOnChange} />);\n      expect(getByText(\"Age\")).toBeInTheDocument();\n    });\n\n    it(\"should render info text and connect it via aria-describedby\", () => {\n      const { getByText, getByLabelText } = render(\n        <NumberField label=\"Age\" id=\"age\" infoText=\"Enter your age\" value={null} onChange={mockOnChange} />\n      );\n      const infoTextElement = getByText(\"Enter your age\");\n      expect(infoTextElement).toBeInTheDocument();\n\n      const inputElement = getByLabelText(\"Age\");\n      const infoTextId = infoTextElement.getAttribute(\"id\");\n      expect(infoTextId).toBe(\"age-info-text\");\n      expect(inputElement).toHaveAttribute(\"aria-describedby\", infoTextId);\n    });\n\n    it(\"should handle basic number input changes\", () => {\n      const { getByTestId } = render(\n        <NumberField value={0} onChange={mockOnChange} data-testid=\"number-input\" aria-label=\"Number input\" />\n      );\n      const input = getByTestId(\"number-input\");\n\n      fireEvent.change(input, { target: { value: \"123\" } });\n      expect(mockOnChange).toHaveBeenCalledWith(123, expect.any(Object));\n    });\n\n    it(\"should handle disabled state\", () => {\n      const { getByTestId } = render(\n        <NumberField value={0} onChange={mockOnChange} disabled data-testid=\"number-input\" aria-label=\"Number input\" />\n      );\n      const input = getByTestId(\"number-input\");\n      expect(input).toBeDisabled();\n    });\n\n    it(\"should handle readOnly state\", () => {\n      const { getByTestId } = render(\n        <NumberField value={0} onChange={mockOnChange} readOnly data-testid=\"number-input\" aria-label=\"Number input\" />\n      );\n      const input = getByTestId(\"number-input\");\n      expect(input).toHaveAttribute(\"readonly\");\n    });\n\n    it(\"should render left icon\", () => {\n      const { getAllByTestId } = render(\n        <NumberField value={0} leftIcon={WhatsNew} onChange={mockOnChange} aria-label=\"Number input\" />\n      );\n      const icons = getAllByTestId(\"icon\");\n      expect(icons).toHaveLength(3);\n    });\n\n    it(\"should render placeholder text\", () => {\n      const { getByTestId } = render(\n        <NumberField\n          value={null}\n          placeholder=\"Enter amount\"\n          onChange={mockOnChange}\n          data-testid=\"number-input\"\n          aria-label=\"Number input\"\n        />\n      );\n      const input = getByTestId(\"number-input\");\n      expect(input).toHaveAttribute(\"placeholder\", \"Enter amount\");\n    });\n\n    it(\"should apply custom className\", () => {\n      const { container } = render(\n        <NumberField value={0} className=\"custom-class\" onChange={mockOnChange} aria-label=\"Number input\" />\n      );\n      expect(container.firstChild).toHaveClass(\"custom-class\");\n    });\n  });\n\n  describe(\"Edge cases\", () => {\n    it(\"should handle very large numbers\", () => {\n      const largeNumber = 999999999999;\n      const { getByTestId } = render(\n        <NumberField value={largeNumber} onChange={mockOnChange} data-testid=\"number-input\" aria-label=\"Number input\" />\n      );\n      const input = getByTestId(\"number-input\") as HTMLInputElement;\n      expect(input.value).toBe(largeNumber.toString());\n    });\n\n    it(\"should handle switching between null and numeric values\", () => {\n      const { rerender, getByTestId } = render(\n        <NumberField value={null} onChange={mockOnChange} data-testid=\"number-input\" aria-label=\"Number input\" />\n      );\n      let input = getByTestId(\"number-input\") as HTMLInputElement;\n      expect(input.value).toBe(\"\");\n\n      rerender(<NumberField value={42} onChange={mockOnChange} data-testid=\"number-input\" aria-label=\"Number input\" />);\n      input = getByTestId(\"number-input\") as HTMLInputElement;\n      expect(input.value).toBe(\"42\");\n\n      rerender(\n        <NumberField value={null} onChange={mockOnChange} data-testid=\"number-input\" aria-label=\"Number input\" />\n      );\n      input = getByTestId(\"number-input\") as HTMLInputElement;\n      expect(input.value).toBe(\"\");\n    });\n\n    it(\"should integrate spin button clicks with state management\", () => {\n      const { getByLabelText } = render(\n        <NumberField value={5} onChange={mockOnChange} step={2} aria-label=\"Number input\" />\n      );\n      const incrementButton = getByLabelText(\"Increase\");\n      const decrementButton = getByLabelText(\"Decrease\");\n\n      fireEvent.click(incrementButton);\n      expect(mockOnChange).toHaveBeenCalledWith(7, expect.any(Object));\n\n      fireEvent.click(decrementButton);\n      expect(mockOnChange).toHaveBeenCalledWith(3, expect.any(Object));\n    });\n  });\n\n  describe(\"Validation with allowOutOfBounds\", () => {\n    it(\"should call onValidityChange when value goes out of bounds\", () => {\n      const { rerender } = render(\n        <NumberField\n          value={5}\n          min={0}\n          max={10}\n          allowOutOfBounds\n          onValidityChange={mockOnValidityChange}\n          onChange={mockOnChange}\n          aria-label=\"Number input\"\n        />\n      );\n      expect(mockOnValidityChange).toHaveBeenCalledWith(true);\n\n      rerender(\n        <NumberField\n          value={15}\n          min={0}\n          max={10}\n          allowOutOfBounds\n          onValidityChange={mockOnValidityChange}\n          onChange={mockOnChange}\n          aria-label=\"Number input\"\n        />\n      );\n      expect(mockOnValidityChange).toHaveBeenCalledWith(false);\n    });\n\n    it(\"should allow out of bounds values when allowOutOfBounds is true\", () => {\n      const { getByTestId } = render(\n        <NumberField\n          value={10}\n          max={10}\n          allowOutOfBounds\n          onChange={mockOnChange}\n          data-testid=\"number-input\"\n          aria-label=\"Number input\"\n        />\n      );\n      const input = getByTestId(\"number-input\");\n\n      fireEvent.change(input, { target: { value: \"15\" } });\n      expect(mockOnChange).toHaveBeenCalledWith(15, expect.any(Object));\n    });\n  });\n\n  describe(\"Accessibility\", () => {\n    it(\"should have proper ARIA attributes\", () => {\n      const { getByTestId } = render(\n        <NumberField\n          value={5}\n          min={0}\n          max={10}\n          required\n          aria-label=\"Age input\"\n          onChange={mockOnChange}\n          data-testid=\"number-input\"\n        />\n      );\n      const input = getByTestId(\"number-input\");\n\n      expect(input).toHaveAttribute(\"aria-valuenow\", \"5\");\n      expect(input).toHaveAttribute(\"aria-valuemin\", \"0\");\n      expect(input).toHaveAttribute(\"aria-valuemax\", \"10\");\n      expect(input).toHaveAttribute(\"aria-required\", \"true\");\n      expect(input).toHaveAttribute(\"aria-label\", \"Age input\");\n    });\n\n    it(\"should use label for aria-label when provided\", () => {\n      const { getByTestId } = render(\n        <NumberField label=\"User Age\" id=\"user-age\" value={5} onChange={mockOnChange} data-testid=\"number-input\" />\n      );\n      const input = getByTestId(\"number-input\");\n      expect(input).toHaveAttribute(\"aria-label\", \"User Age\");\n    });\n\n    it(\"should have correct input attributes\", () => {\n      const { getByTestId } = render(\n        <NumberField value={5} onChange={mockOnChange} data-testid=\"number-input\" aria-label=\"Number input\" />\n      );\n      const input = getByTestId(\"number-input\");\n\n      expect(input).toHaveAttribute(\"type\", \"text\");\n      expect(input).toHaveAttribute(\"inputmode\", \"numeric\");\n      expect(input).toHaveAttribute(\"role\", \"spinbutton\");\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/NumberField/components/NumberFieldSpinButton/NumberFieldSpinButton.module.scss",
    "content": ".spinButton {\n  &.large {\n    width: 28px;\n    height: 20px;\n\n    .icon {\n      width: 16px;\n      height: 16px;\n    }\n  }\n\n  &.medium {\n    width: 24px;\n    height: 16px;\n\n    .icon {\n      width: 16px;\n      height: 16px;\n    }\n  }\n\n  &.small {\n    width: 22px;\n    height: 14px;\n\n    .icon {\n      width: 14px;\n      height: 14px;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/NumberField/components/NumberFieldSpinButton/NumberFieldSpinButton.tsx",
    "content": "import React from \"react\";\nimport cx from \"classnames\";\nimport { type NumberFieldSpinButtonProps } from \"./NumberFieldSpinButton.types\";\nimport { IconButton } from \"@vibe/icon-button\";\nimport { DropdownChevronUp, DropdownChevronDown } from \"@vibe/icons\";\nimport { Flex } from \"@vibe/layout\";\nimport { getStyle } from \"@vibe/shared\";\nimport styles from \"./NumberFieldSpinButton.module.scss\";\n\nconst NumberFieldSpinButton = ({\n  inputId,\n  onIncrement,\n  onDecrement,\n  disabled,\n  size,\n  isAtMin,\n  isAtMax\n}: NumberFieldSpinButtonProps) => {\n  const iconButtonClassName = cx(styles.spinButton, getStyle(styles, size));\n  const iconClassName = styles.icon;\n\n  const handleMouseDown = (event: React.MouseEvent) => {\n    // to prevent `IconButton`s from stealing focus\n    event.preventDefault();\n  };\n\n  return (\n    <Flex direction=\"column\" align=\"stretch\" justify=\"center\" onMouseDown={handleMouseDown}>\n      <IconButton\n        aria-label=\"Increase\"\n        hideTooltip\n        aria-controls={inputId}\n        tabIndex={-1}\n        onClick={onIncrement}\n        disabled={disabled || isAtMax}\n        size={null}\n        className={iconButtonClassName}\n        iconClassName={iconClassName}\n        icon={DropdownChevronUp}\n      />\n      <IconButton\n        aria-label=\"Decrease\"\n        hideTooltip\n        aria-controls={inputId}\n        tabIndex={-1}\n        onClick={onDecrement}\n        disabled={disabled || isAtMin}\n        size={null}\n        className={iconButtonClassName}\n        iconClassName={iconClassName}\n        icon={DropdownChevronDown}\n      />\n    </Flex>\n  );\n};\n\nexport default NumberFieldSpinButton;\n"
  },
  {
    "path": "packages/core/src/components/NumberField/components/NumberFieldSpinButton/NumberFieldSpinButton.types.ts",
    "content": "export interface NumberFieldSpinButtonProps {\n  inputId?: string;\n  onIncrement: (event: React.MouseEvent | React.KeyboardEvent) => void;\n  onDecrement: (event: React.MouseEvent | React.KeyboardEvent) => void;\n  size: \"small\" | \"medium\" | \"large\";\n  disabled?: boolean;\n  isAtMin?: boolean;\n  isAtMax?: boolean;\n}\n"
  },
  {
    "path": "packages/core/src/components/NumberField/components/NumberFieldSpinButton/__tests__/NumberFieldSpinButton.test.tsx",
    "content": "import React from \"react\";\nimport { fireEvent, render } from \"@testing-library/react\";\nimport { vi, describe, it, expect, afterEach } from \"vitest\";\nimport NumberFieldSpinButton from \"../NumberFieldSpinButton\";\n\ndescribe(\"NumberFieldSpinButton\", () => {\n  const mockOnIncrement = vi.fn();\n  const mockOnDecrement = vi.fn();\n\n  afterEach(() => {\n    vi.clearAllMocks();\n  });\n\n  it(\"should call onIncrement when the up button is clicked\", () => {\n    const { getByLabelText } = render(\n      <NumberFieldSpinButton onIncrement={mockOnIncrement} onDecrement={mockOnDecrement} size=\"medium\" />\n    );\n    const incrementButton = getByLabelText(\"Increase\");\n    fireEvent.click(incrementButton);\n    expect(mockOnIncrement).toHaveBeenCalledTimes(1);\n    expect(mockOnDecrement).not.toHaveBeenCalled();\n  });\n\n  it(\"should call onDecrement when the down button is clicked\", () => {\n    const { getByLabelText } = render(\n      <NumberFieldSpinButton onIncrement={mockOnIncrement} onDecrement={mockOnDecrement} size=\"medium\" />\n    );\n    const decrementButton = getByLabelText(\"Decrease\");\n    fireEvent.click(decrementButton);\n    expect(mockOnDecrement).toHaveBeenCalledTimes(1);\n    expect(mockOnIncrement).not.toHaveBeenCalled();\n  });\n\n  it(\"should disable both buttons when disabled prop is true\", () => {\n    const { getByLabelText } = render(\n      <NumberFieldSpinButton onIncrement={mockOnIncrement} onDecrement={mockOnDecrement} disabled size=\"medium\" />\n    );\n    const incrementButton = getByLabelText(\"Increase\");\n    const decrementButton = getByLabelText(\"Decrease\");\n    expect(incrementButton).toHaveAttribute(\"aria-disabled\", \"true\");\n    expect(decrementButton).toHaveAttribute(\"aria-disabled\", \"true\");\n  });\n\n  it(\"should disable the up button when isAtMax is true\", () => {\n    const { getByLabelText } = render(\n      <NumberFieldSpinButton onIncrement={mockOnIncrement} onDecrement={mockOnDecrement} isAtMax size=\"medium\" />\n    );\n    const incrementButton = getByLabelText(\"Increase\");\n    const decrementButton = getByLabelText(\"Decrease\");\n    expect(incrementButton).toHaveAttribute(\"aria-disabled\", \"true\");\n    expect(decrementButton).toHaveAttribute(\"aria-disabled\", \"false\");\n  });\n\n  it(\"should disable the down button when isAtMin is true\", () => {\n    const { getByLabelText } = render(\n      <NumberFieldSpinButton onIncrement={mockOnIncrement} onDecrement={mockOnDecrement} isAtMin size=\"medium\" />\n    );\n    const incrementButton = getByLabelText(\"Increase\");\n    const decrementButton = getByLabelText(\"Decrease\");\n    expect(incrementButton).toHaveAttribute(\"aria-disabled\", \"false\");\n    expect(decrementButton).toHaveAttribute(\"aria-disabled\", \"true\");\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/NumberField/hooks/__tests__/useNumberFieldState.test.ts",
    "content": "import { renderHook, act } from \"@testing-library/react-hooks\";\nimport { vi, describe, it, expect } from \"vitest\";\nimport useNumberFieldState, { type UseNumberFieldStateProps } from \"../useNumberFieldState\";\n\ndescribe(\"useNumberFieldState\", () => {\n  const setup = (props: Partial<UseNumberFieldStateProps> = {}) => {\n    const onChange = vi.fn();\n    const onValidityChange = vi.fn();\n    const defaultProps: UseNumberFieldStateProps = {\n      value: null,\n      step: 1,\n      onChange,\n      onValidityChange,\n      ...props\n    };\n\n    const { result, rerender } = renderHook((p: UseNumberFieldStateProps) => useNumberFieldState(p), {\n      initialProps: defaultProps\n    });\n\n    return { result, rerender, onChange, onValidityChange, defaultProps };\n  };\n\n  it(\"should update inputValue when controlled value changes\", () => {\n    const { result, rerender, defaultProps } = setup({ value: 10 });\n    expect(result.current.inputValue).toBe(\"10\");\n\n    rerender({ ...defaultProps, value: 20 });\n    expect(result.current.inputValue).toBe(\"20\");\n\n    rerender({ ...defaultProps, value: null });\n    expect(result.current.inputValue).toBe(\"\");\n  });\n\n  it(\"should handle valid number input\", () => {\n    const { result, onChange } = setup({ value: 0 });\n    act(() => {\n      result.current.onChange({ target: { value: \"123\" } } as React.ChangeEvent<HTMLInputElement>);\n    });\n    expect(result.current.inputValue).toBe(\"123\");\n    expect(onChange).toHaveBeenCalledWith(123, expect.anything());\n  });\n\n  it(\"should handle empty string input\", () => {\n    const { result, onChange } = setup({ value: 10 });\n    act(() => {\n      result.current.onChange({ target: { value: \"\" } } as React.ChangeEvent<HTMLInputElement>);\n    });\n    expect(result.current.inputValue).toBe(\"\");\n    expect(onChange).toHaveBeenCalledWith(null, expect.anything());\n  });\n\n  it(\"should handle partial number input (e.g., '-')\", () => {\n    const { result, onChange } = setup({ value: 0 });\n    act(() => {\n      result.current.onChange({ target: { value: \"-\" } } as React.ChangeEvent<HTMLInputElement>);\n    });\n    expect(result.current.inputValue).toBe(\"-\");\n    expect(onChange).not.toHaveBeenCalled();\n  });\n\n  it(\"should handle partial number input with a dot (e.g., '1.')\", () => {\n    const { result, onChange } = setup({ value: 0 });\n    act(() => {\n      result.current.onChange({ target: { value: \"1.\" } } as React.ChangeEvent<HTMLInputElement>);\n    });\n    expect(result.current.inputValue).toBe(\"1.\");\n    expect(onChange).not.toHaveBeenCalled();\n  });\n\n  it(\"should handle another partial number input with a dot (e.g., '.')\", () => {\n    const { result, onChange } = setup({ value: 0 });\n    act(() => {\n      result.current.onChange({ target: { value: \".\" } } as React.ChangeEvent<HTMLInputElement>);\n    });\n    expect(result.current.inputValue).toBe(\".\");\n    expect(onChange).toHaveBeenCalledWith(0, expect.anything());\n  });\n\n  it(\"should ignore invalid text input\", () => {\n    const { result, onChange } = setup({ value: 5 });\n    act(() => {\n      result.current.onChange({ target: { value: \"abc\" } } as React.ChangeEvent<HTMLInputElement>);\n    });\n    expect(result.current.inputValue).toBe(\"5\");\n    expect(onChange).not.toHaveBeenCalled();\n  });\n\n  it(\"should clamp value to max if not out of bounds\", () => {\n    const { result, onChange } = setup({ value: 10, max: 100 });\n    act(() => {\n      result.current.onChange({\n        target: { value: \"120\" }\n      } as React.ChangeEvent<HTMLInputElement>);\n    });\n    expect(onChange).toHaveBeenCalledWith(100, expect.anything());\n  });\n\n  it(\"should clamp value to min if not out of bounds\", () => {\n    const { result, onChange } = setup({ value: 10, min: 0 });\n    act(() => {\n      result.current.onChange({\n        target: { value: \"-10\" }\n      } as React.ChangeEvent<HTMLInputElement>);\n    });\n    expect(onChange).toHaveBeenCalledWith(0, expect.anything());\n  });\n\n  it(\"should allow out of bounds value if configured\", () => {\n    const { result, onChange } = setup({ value: 110, max: 100, allowOutOfBounds: true });\n    act(() => {\n      result.current.onChange({\n        target: { value: \"120\" }\n      } as React.ChangeEvent<HTMLInputElement>);\n    });\n    expect(onChange).toHaveBeenCalledWith(120, expect.anything());\n  });\n\n  it(\"should handle ArrowUp keydown to increment value\", () => {\n    const { result, onChange } = setup({ value: 5, step: 2 });\n    act(() => {\n      result.current.onKeyDown({ key: \"ArrowUp\", preventDefault: () => {} } as React.KeyboardEvent<HTMLInputElement>);\n    });\n    expect(onChange).toHaveBeenCalledWith(7, expect.anything());\n  });\n\n  it(\"should handle ArrowDown keydown to decrement value\", () => {\n    const { result, onChange } = setup({ value: 5, step: 2 });\n    act(() => {\n      result.current.onKeyDown({ key: \"ArrowDown\", preventDefault: () => {} } as React.KeyboardEvent<HTMLInputElement>);\n    });\n    expect(onChange).toHaveBeenCalledWith(3, expect.anything());\n  });\n\n  it(\"should call onValidityChange when value changes\", () => {\n    const { rerender, onValidityChange, defaultProps } = setup({ value: 50, min: 0, max: 100 });\n    expect(onValidityChange).toHaveBeenCalledWith(true);\n\n    rerender({ ...defaultProps, value: 110, min: 0, max: 100 });\n    expect(onValidityChange).toHaveBeenCalledWith(false);\n\n    rerender({ ...defaultProps, value: -10, min: 0, max: 100 });\n    expect(onValidityChange).toHaveBeenCalledWith(false);\n\n    rerender({ ...defaultProps, value: null, min: 0, max: 100 });\n    expect(onValidityChange).toHaveBeenCalledWith(true);\n  });\n\n  it(\"should correctly set isAtMin and isAtMax\", () => {\n    const { result, rerender, defaultProps } = setup({ value: 5, min: 0, max: 10 });\n    expect(result.current.isAtMin).toBe(false);\n    expect(result.current.isAtMax).toBe(false);\n\n    rerender({ ...defaultProps, value: 0, min: 0, max: 10 });\n    expect(result.current.isAtMin).toBe(true);\n    expect(result.current.isAtMax).toBe(false);\n\n    rerender({ ...defaultProps, value: 10, min: 0, max: 10 });\n    expect(result.current.isAtMin).toBe(false);\n    expect(result.current.isAtMax).toBe(true);\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/NumberField/hooks/__tests__/useSpinButtonHandlers.test.ts",
    "content": "import { renderHook, act } from \"@testing-library/react-hooks\";\nimport { vi, describe, it, expect } from \"vitest\";\nimport useSpinButtonHandlers, { type UseSpinButtonHandlersProps } from \"../useSpinButtonHandlers\";\nimport { createRef } from \"react\";\n\ndescribe(\"useSpinButtonHandlers\", () => {\n  const setup = (props: Partial<UseSpinButtonHandlersProps>) => {\n    const onChange = vi.fn();\n    const defaultProps: UseSpinButtonHandlersProps = {\n      value: 0,\n      step: 1,\n      inputRef: createRef<HTMLInputElement>(),\n      ...props,\n      onChange\n    };\n\n    const { result, rerender } = renderHook((p: UseSpinButtonHandlersProps) => useSpinButtonHandlers(p), {\n      initialProps: defaultProps\n    });\n    return { result, rerender, onChange };\n  };\n\n  it(\"should call onChange with the correctly stepped value on increment\", () => {\n    const { result, onChange } = setup({ value: 5, step: 2 });\n    act(() => {\n      result.current.onIncrement({} as React.MouseEvent);\n    });\n    expect(onChange).toHaveBeenCalledWith(7, expect.anything());\n  });\n\n  it(\"should call onChange with the correctly stepped value on decrement\", () => {\n    const { result, onChange } = setup({ value: 10, step: 3 });\n    act(() => {\n      result.current.onDecrement({} as React.MouseEvent);\n    });\n    expect(onChange).toHaveBeenCalledWith(7, expect.anything());\n  });\n\n  it(\"should ignore constraints when allowOutOfBounds is true\", () => {\n    const { result, onChange } = setup({ value: 10, step: 1, max: 10, allowOutOfBounds: true });\n    act(() => {\n      result.current.onIncrement({} as React.MouseEvent);\n    });\n    expect(onChange).toHaveBeenCalledWith(11, expect.anything());\n  });\n\n  it(\"should not call onChange when readOnly\", () => {\n    const { result, onChange } = setup({ value: 5, readOnly: true });\n    act(() => {\n      result.current.onIncrement({} as React.MouseEvent);\n      result.current.onDecrement({} as React.MouseEvent);\n    });\n    expect(onChange).not.toHaveBeenCalled();\n  });\n\n  it(\"should handle null values correctly\", () => {\n    const { result, onChange } = setup({ value: null, step: 1 });\n    act(() => {\n      result.current.onIncrement({} as React.MouseEvent);\n    });\n    expect(onChange).toHaveBeenCalledWith(1, expect.anything());\n\n    act(() => {\n      result.current.onDecrement({} as React.MouseEvent);\n    });\n    expect(onChange).toHaveBeenCalledWith(-1, expect.anything());\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/NumberField/hooks/useNumberFieldState.ts",
    "content": "import { useCallback, useEffect, useState } from \"react\";\nimport { type NumberFieldProps } from \"../NumberField.types\";\nimport { calculateSteppedValue } from \"../utils/calcValue\";\n\nexport type UseNumberFieldStateProps = Pick<\n  NumberFieldProps,\n  \"value\" | \"onChange\" | \"min\" | \"max\" | \"step\" | \"disabled\" | \"readOnly\" | \"allowOutOfBounds\" | \"onValidityChange\"\n>;\n\nconst useNumberFieldState = ({\n  value: controlledValue,\n  onChange,\n  min,\n  max,\n  step = 1,\n  disabled,\n  readOnly,\n  allowOutOfBounds,\n  onValidityChange\n}: UseNumberFieldStateProps) => {\n  const [inputValue, setInputValue] = useState(controlledValue === null ? \"\" : String(controlledValue));\n\n  useEffect(() => {\n    const controlledValueStr = controlledValue === null ? \"\" : String(controlledValue);\n    setInputValue(prevInputValue =>\n      controlledValue !== parseFloat(prevInputValue) ? controlledValueStr : prevInputValue\n    );\n  }, [controlledValue]);\n\n  const handleChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const stringValue = event.target.value;\n\n      if (stringValue === \"\") {\n        setInputValue(\"\");\n        onChange(null, event);\n        return;\n      }\n\n      const numericRegex = /^-?\\d*\\.?\\d*$/;\n      if (!numericRegex.test(stringValue)) {\n        return;\n      }\n\n      setInputValue(stringValue);\n      const isPartial = stringValue === \"-\" || stringValue.endsWith(\".\");\n      if (isPartial && stringValue.length === 1 && stringValue.endsWith(\".\")) {\n        onChange(0, event);\n        return;\n      }\n\n      if (!isPartial) {\n        const newNumber = parseFloat(stringValue);\n        if (allowOutOfBounds) {\n          if (newNumber !== controlledValue) {\n            onChange(newNumber, event);\n          }\n          return;\n        }\n\n        const clampedValue = Math.max(min ?? -Infinity, Math.min(max ?? Infinity, newNumber));\n        if (clampedValue !== controlledValue) {\n          onChange(clampedValue, event);\n        }\n      }\n    },\n    [onChange, allowOutOfBounds, min, max, controlledValue]\n  );\n\n  useEffect(() => {\n    if (!onValidityChange) return;\n\n    if (controlledValue === null) {\n      onValidityChange(true);\n      return;\n    }\n\n    const isWithinBounds =\n      (min === undefined || controlledValue >= min) && (max === undefined || controlledValue <= max);\n    onValidityChange(isWithinBounds);\n  }, [controlledValue, min, max, onValidityChange]);\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      if (disabled || readOnly) {\n        return;\n      }\n\n      const isArrowUp = event.key === \"ArrowUp\";\n      const isArrowDown = event.key === \"ArrowDown\";\n\n      if (isArrowUp || isArrowDown) {\n        event.preventDefault();\n        const direction = isArrowUp ? 1 : -1;\n        const newValue = calculateSteppedValue({\n          value: controlledValue,\n          direction,\n          step,\n          min,\n          max,\n          allowOutOfBounds\n        });\n        onChange(newValue, event);\n      }\n    },\n    [controlledValue, step, min, max, onChange, disabled, readOnly, allowOutOfBounds]\n  );\n\n  const isAtMin = !allowOutOfBounds && controlledValue !== null && min !== undefined && controlledValue <= min;\n  const isAtMax = !allowOutOfBounds && controlledValue !== null && max !== undefined && controlledValue >= max;\n\n  return {\n    inputValue,\n    numericValue: controlledValue,\n    onChange: handleChange,\n    onKeyDown: handleKeyDown,\n    isAtMin,\n    isAtMax\n  };\n};\n\nexport default useNumberFieldState;\n"
  },
  {
    "path": "packages/core/src/components/NumberField/hooks/useSpinButtonHandlers.ts",
    "content": "import { useCallback } from \"react\";\nimport { type NumberFieldProps } from \"../NumberField.types\";\nimport { calculateSteppedValue } from \"../utils/calcValue\";\n\nexport type UseSpinButtonHandlersProps = Pick<\n  NumberFieldProps,\n  \"onChange\" | \"value\" | \"step\" | \"min\" | \"max\" | \"allowOutOfBounds\" | \"readOnly\"\n> & {\n  inputRef: React.RefObject<HTMLInputElement>;\n};\n\nconst useSpinButtonHandlers = ({\n  onChange,\n  value,\n  step = 1,\n  min,\n  max,\n  allowOutOfBounds,\n  readOnly,\n  inputRef\n}: UseSpinButtonHandlersProps) => {\n  const handleStep = useCallback(\n    (direction: number, event: React.MouseEvent | React.KeyboardEvent) => {\n      if (readOnly) return;\n      const newValue = calculateSteppedValue({ value, direction, step, min, max, allowOutOfBounds });\n      onChange(newValue, event);\n      inputRef.current?.focus();\n    },\n    [value, step, min, max, onChange, allowOutOfBounds, readOnly, inputRef]\n  );\n\n  const onIncrement = useCallback(\n    (event: React.MouseEvent | React.KeyboardEvent) => {\n      handleStep(1, event);\n    },\n    [handleStep]\n  );\n\n  const onDecrement = useCallback(\n    (event: React.MouseEvent | React.KeyboardEvent) => {\n      handleStep(-1, event);\n    },\n    [handleStep]\n  );\n\n  return {\n    onIncrement,\n    onDecrement\n  };\n};\n\nexport default useSpinButtonHandlers;\n"
  },
  {
    "path": "packages/core/src/components/NumberField/index.ts",
    "content": "export { default as NumberField } from \"./NumberField\";\nexport * from \"./NumberField.types\";\n"
  },
  {
    "path": "packages/core/src/components/NumberField/utils/__tests__/calcValue.test.ts",
    "content": "import { calculateSteppedValue } from \"../calcValue\";\n\ndescribe(\"calculateSteppedValue\", () => {\n  it(\"should increment the value by the step\", () => {\n    expect(calculateSteppedValue({ value: 5, direction: 1, step: 1 })).toBe(6);\n  });\n\n  it(\"should decrement the value by the step\", () => {\n    expect(calculateSteppedValue({ value: 5, direction: -1, step: 1 })).toBe(4);\n  });\n\n  it(\"should handle different step values\", () => {\n    expect(calculateSteppedValue({ value: 10, direction: 1, step: 5 })).toBe(15);\n    expect(calculateSteppedValue({ value: 10, direction: -1, step: 5 })).toBe(5);\n  });\n\n  it(\"should treat null value as 0\", () => {\n    expect(calculateSteppedValue({ value: null, direction: 1, step: 1 })).toBe(1);\n    expect(calculateSteppedValue({ value: null, direction: -1, step: 1 })).toBe(-1);\n  });\n\n  it(\"should not exceed the max value\", () => {\n    expect(calculateSteppedValue({ value: 9, direction: 1, step: 1, min: 0, max: 10 })).toBe(10);\n    expect(calculateSteppedValue({ value: 10, direction: 1, step: 1, min: 0, max: 10 })).toBe(10);\n  });\n\n  it(\"should not go below the min value\", () => {\n    expect(calculateSteppedValue({ value: 1, direction: -1, step: 1, min: 0, max: 10 })).toBe(0);\n    expect(calculateSteppedValue({ value: 0, direction: -1, step: 1, min: 0, max: 10 })).toBe(0);\n  });\n\n  it(\"should allow values out of bounds when allowOutOfBounds is true\", () => {\n    expect(calculateSteppedValue({ value: 10, direction: 1, step: 1, min: 0, max: 10, allowOutOfBounds: true })).toBe(\n      11\n    );\n    expect(calculateSteppedValue({ value: 0, direction: -1, step: 1, min: 0, max: 10, allowOutOfBounds: true })).toBe(\n      -1\n    );\n  });\n\n  it(\"should work with negative numbers\", () => {\n    expect(calculateSteppedValue({ value: -5, direction: 1, step: 1 })).toBe(-4);\n    expect(calculateSteppedValue({ value: -5, direction: -1, step: 1 })).toBe(-6);\n  });\n\n  it(\"should clamp correctly with negative min/max values\", () => {\n    expect(calculateSteppedValue({ value: -1, direction: 1, step: 1, min: -10, max: -1 })).toBe(-1);\n    expect(calculateSteppedValue({ value: -9, direction: -1, step: 1, min: -10, max: -1 })).toBe(-10);\n  });\n\n  it(\"should handle floating point numbers correctly\", () => {\n    expect(calculateSteppedValue({ value: 1.5, direction: 1, step: 0.5 })).toBe(2.0);\n    expect(calculateSteppedValue({ value: 1.5, direction: -1, step: 0.5 })).toBe(1.0);\n    expect(calculateSteppedValue({ value: 1.2, direction: 1, step: 0.1 })).toBeCloseTo(1.3);\n    expect(calculateSteppedValue({ value: 1.2, direction: -1, step: 0.1 })).toBeCloseTo(1.1);\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/NumberField/utils/calcValue.ts",
    "content": "import { type NumberFieldProps } from \"../NumberField.types\";\n\ntype CalculateSteppedValueProps = Pick<NumberFieldProps, \"value\" | \"step\" | \"min\" | \"max\" | \"allowOutOfBounds\"> & {\n  direction: number;\n};\n\nexport const calculateSteppedValue = ({\n  value,\n  direction,\n  step = 1,\n  min,\n  max,\n  allowOutOfBounds\n}: CalculateSteppedValueProps): number => {\n  const numericValue = value ?? 0;\n  let newValue = numericValue + direction * step;\n\n  if (allowOutOfBounds) {\n    return newValue;\n  }\n\n  if (min !== undefined) {\n    newValue = Math.max(min, newValue);\n  }\n  if (max !== undefined) {\n    newValue = Math.min(max, newValue);\n  }\n  return newValue;\n};\n"
  },
  {
    "path": "packages/core/src/components/ProgressBars/PercentageLabel/PercentageLabel.module.scss",
    "content": ".label {\n  padding-inline-start: var(--space-4);\n}\n"
  },
  {
    "path": "packages/core/src/components/ProgressBars/PercentageLabel/PercentageLabel.tsx",
    "content": "import React, { type FC } from \"react\";\nimport styles from \"./PercentageLabel.module.scss\";\n\nexport interface PercentageLabelProps {\n  /**\n   * The ID of the element this label is associated with.\n   */\n  forElement: string;\n  /**\n   * The percentage value to display.\n   */\n  value: number;\n}\n\nconst PercentageLabel: FC<PercentageLabelProps> = ({ forElement = \"\", value = 0 }) => {\n  if (value === null || value === undefined) return null;\n  return (\n    <label htmlFor={forElement} className={styles.label}>\n      {`${value.toFixed()}%`}\n    </label>\n  );\n};\n\nexport default PercentageLabel;\n"
  },
  {
    "path": "packages/core/src/components/ProgressBars/ProgressBar/Bar/Bar.module.scss",
    "content": ".bar {\n  inset-inline-start: 0;\n  height: 100%;\n  position: absolute;\n  border-radius: var(--border-radius-small);\n}\n\n.typePrimaryPrimary {\n  background-color: var(--primary-color);\n}\n\n.typePrimarySecondary {\n  background-color: var(--inverted-color-background);\n}\n\n.typePrimaryPositive {\n  background-color: var(--positive-color);\n}\n\n.typePrimaryNegative {\n  background-color: var(--negative-color);\n}\n\n.typePrimaryWarning {\n  background-color: var(--warning-color);\n}\n\n.typeSecondaryPrimary {\n  background-color: var(--primary-selected-color);\n}\n\n.typeSecondarySecondary {\n  background-color: var(--ui-border-color);\n}\n\n.typeSecondaryPositive {\n  background-color: var(--positive-color-selected);\n}\n\n.typeSecondaryNegative {\n  background-color: var(--negative-color-selected);\n}\n\n.typeSecondaryWarning {\n  background-color: var(--warning-color-selected);\n}\n\n.animate {\n  transition: width 300ms var(--motion-timing-transition);\n}\n"
  },
  {
    "path": "packages/core/src/components/ProgressBars/ProgressBar/Bar/Bar.tsx",
    "content": "import React, { type FC, useMemo } from \"react\";\nimport { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"@vibe/shared\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport { calculatePercentage } from \"../ProgressBarHelpers\";\nimport { type VibeComponentProps } from \"../../../../types\";\nimport { type ProgressBarStyle } from \"../ProgressBar.types\";\nimport styles from \"./Bar.module.scss\";\n\nexport type BarType = \"primary\" | \"secondary\";\n\nexport interface BarProps extends VibeComponentProps {\n  /**\n   * Determines the visual style of the progress bar.\n   */\n  barStyle?: ProgressBarStyle;\n  /**\n   * The minimum value of the progress bar.\n   */\n  min?: number;\n  /**\n   * The maximum value of the progress bar.\n   */\n  max?: number;\n  /**\n   * The current progress value.\n   */\n  value?: number;\n  /**\n   * If true, enables animation effects.\n   */\n  animated?: boolean;\n  /**\n   * Base class name for the bar.\n   */\n  baseClass?: string;\n  /**\n   * The ARIA label describing the progress bar.\n   */\n  barLabelName?: string;\n  /**\n   * Custom color for the progress bar.\n   */\n  color?: string;\n  /**\n   * The type of the bar.\n   */\n  type?: BarType;\n  /**\n   * If true, allows displaying percentage values higher than 100% when value exceeds max.\n   */\n  allowExceedingMax?: boolean;\n}\n\nconst Bar: FC<BarProps> = ({\n  value,\n  type,\n  barStyle,\n  animated,\n  min,\n  max,\n  color,\n  barLabelName,\n  id,\n  \"data-testid\": dataTestId,\n  className,\n  allowExceedingMax = false\n}) => {\n  const classNames = useMemo(() => {\n    return cx(styles.bar, getStyle(styles, camelCase(\"type__\" + type + \"--\" + barStyle)), className, {\n      [styles.animate]: animated\n    });\n  }, [type, barStyle, animated, className]);\n\n  const valuePercentage = useMemo(() => {\n    if (value === null || value === undefined) return 0;\n    return calculatePercentage(value, min, max, allowExceedingMax);\n  }, [value, min, max, allowExceedingMax]);\n\n  const visualWidthPercentage = useMemo(() => {\n    // For visual purposes, cap the width at 100% to prevent overflow\n    return Math.min(valuePercentage, 100);\n  }, [valuePercentage]);\n\n  const ariaValueMax = useMemo(() => {\n    // When allowExceedingMax is true and value exceeds max,\n    // set aria-valuemax to the actual value percentage to maintain consistency\n    if (allowExceedingMax && valuePercentage > 100) {\n      return Math.max(valuePercentage, 100);\n    }\n    return 100;\n  }, [allowExceedingMax, valuePercentage]);\n\n  if (!value) return null;\n\n  return (\n    <div\n      role=\"progressbar\"\n      aria-label={barLabelName}\n      aria-valuenow={valuePercentage}\n      aria-valuemin={0}\n      aria-valuemax={ariaValueMax}\n      className={classNames}\n      style={{\n        width: `${visualWidthPercentage}%`,\n        ...(color && { backgroundColor: color })\n      }}\n      id={id}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.BAR, id)}\n    />\n  );\n};\n\nexport default Bar;\n"
  },
  {
    "path": "packages/core/src/components/ProgressBars/ProgressBar/ProgressBar.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n.wrapper {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  width: 100%;\n  @include vibe-text(text2, normal);\n  line-height: 8px !important;\n\n  &.fullWidth {\n    width: 100%;\n    .container {\n      border-radius: 0;\n      .progressBar {\n        border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;\n\n        &.completed {\n          border-radius: 0;\n        }\n      }\n    }\n  }\n}\n\n.label {\n  padding-inline-start: var(--space-4);\n}\n\n.large {\n  height: 8px;\n  line-height: 8px;\n}\n\n.medium {\n  height: 6px;\n  line-height: 6px;\n}\n\n.small {\n  height: 4px;\n  line-height: 4px;\n}\n\n.container {\n  position: relative;\n  width: 100%;\n  background-color: var(--ui-background-color);\n  border-radius: var(--border-radius-small);\n}\n"
  },
  {
    "path": "packages/core/src/components/ProgressBars/ProgressBar/ProgressBar.tsx",
    "content": "import React, { forwardRef, useMemo } from \"react\";\nimport cx from \"classnames\";\nimport { getStyle } from \"@vibe/shared\";\nimport PercentageLabel from \"../PercentageLabel/PercentageLabel\";\nimport { type ProgressBarSize, type ProgressBarStyle } from \"./ProgressBar.types\";\nimport { calculatePercentage, getProgressBarClassNames } from \"./ProgressBarHelpers\";\nimport Bar from \"./Bar/Bar\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../../tests/constants\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport styles from \"./ProgressBar.module.scss\";\n\nexport interface ProgressBarProps extends VibeComponentProps {\n  /**\n   * Determines the visual style of the progress bar.\n   */\n  barStyle?: ProgressBarStyle;\n  /**\n   * The minimum value of the progress bar.\n   */\n  min?: number;\n  /**\n   * The maximum value of the progress bar.\n   */\n  max?: number;\n  /**\n   * The current progress value.\n   */\n  value?: number;\n  /**\n   * The secondary progress value.\n   */\n  valueSecondary?: number;\n  /**\n   * If true, enables animation effects.\n   */\n  animated?: boolean;\n  /**\n   * The size of the progress bar.\n   */\n  size?: ProgressBarSize;\n  /**\n   * If true, displays the progress percentage.\n   */\n  indicateProgress?: boolean;\n  /**\n   * If true, enables multiple progress bars.\n   * **Note:** `value`, `valueSecondary`, and `barStyle` will not be used.\n   */\n  multi?: boolean;\n  /**\n   * An array of bar values and colors for multi-bar mode.\n   */\n  multiValues?: {\n    /**\n     * The progress value for a bar.\n     */\n    value?: number;\n    /**\n     * The bar color in hex format (`#000000` - `#ffffff`).\n     */\n    color?: string;\n  }[];\n  /**\n   * The ARIA label for the progress bar.\n   */\n  \"aria-label\"?: string;\n  /**\n   * If true, makes the progress bar span the full container width.\n   */\n  fullWidth?: boolean;\n  /**\n   * If true, allows displaying percentage values higher than 100% when value exceeds max.\n   */\n  allowExceedingMax?: boolean;\n}\n\nconst ProgressBar = forwardRef(\n  (\n    {\n      min = 0,\n      max = 100,\n      value = 0,\n      valueSecondary = 0,\n      animated = true,\n      barStyle = \"primary\",\n      className,\n      size = \"small\",\n      indicateProgress = false,\n      multi = false,\n      multiValues = [],\n      \"aria-label\": ariaLabel = \"\",\n      id,\n      fullWidth = false,\n      allowExceedingMax = false,\n      \"data-testid\": dataTestId\n    }: ProgressBarProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const wrapperClassName = useMemo(() => {\n      return cx(\n        styles.wrapper,\n        {\n          [getStyle(styles, size.toString())]: size,\n          [styles.fullWidth]: fullWidth\n        },\n        className\n      );\n    }, [size, fullWidth, className]);\n\n    const valuePercentage = useMemo(() => {\n      if (multi) {\n        const firstValue = multiValues && multiValues.length && multiValues[0].value;\n        if (firstValue === null || firstValue === undefined) return 0;\n        return calculatePercentage(firstValue, min, max, allowExceedingMax);\n      }\n      if (value === null || value === undefined) return 0;\n      return calculatePercentage(value, min, max, allowExceedingMax);\n    }, [value, min, max, multi, multiValues, allowExceedingMax]);\n\n    const renderMultiBars = useMemo(() => {\n      if (!multi) return null;\n      return (\n        <>\n          {[...multiValues].reverse().map(({ value: baseValue, color }, i) => (\n            <Bar\n              className={getProgressBarClassNames(baseValue)}\n              barStyle=\"none\"\n              value={baseValue}\n              animated={animated}\n              type=\"primary\"\n              color={color}\n              min={min}\n              max={max}\n              allowExceedingMax={allowExceedingMax}\n              id={`bar_${color}_${i}`}\n              key={`bar_${color}_${i}`}\n            />\n          ))}\n        </>\n      );\n    }, [min, max, animated, multiValues, multi, allowExceedingMax]);\n\n    const renderPercentage = indicateProgress ? (\n      <PercentageLabel forElement=\"linear-progress-bar\" value={valuePercentage} />\n    ) : null;\n\n    const renderBaseBars = !multi ? (\n      <>\n        <Bar\n          className={getProgressBarClassNames(value)}\n          barLabelName={ariaLabel}\n          barStyle={barStyle}\n          value={valueSecondary}\n          animated={animated}\n          type=\"secondary\"\n          min={min}\n          max={max}\n          allowExceedingMax={allowExceedingMax}\n          data-testid={ComponentDefaultTestId.BAR_SECONDARY}\n        />\n        <Bar\n          className={getProgressBarClassNames(value)}\n          barStyle={barStyle}\n          value={value}\n          animated={animated}\n          type=\"primary\"\n          min={min}\n          max={max}\n          allowExceedingMax={allowExceedingMax}\n          data-testid={ComponentDefaultTestId.BAR_PRIMARY}\n        />\n      </>\n    ) : null;\n\n    return (\n      <div\n        className={wrapperClassName}\n        ref={ref}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.PROGRESS_BAR, id)}\n        data-vibe={ComponentVibeId.PROGRESS_BAR}\n      >\n        <div className={styles.container}>\n          {renderBaseBars}\n          {renderMultiBars}\n        </div>\n        {renderPercentage}\n      </div>\n    );\n  }\n);\n\nexport default ProgressBar;\n"
  },
  {
    "path": "packages/core/src/components/ProgressBars/ProgressBar/ProgressBar.types.ts",
    "content": "import { type SIZES } from \"../../../constants\";\n\nexport type ProgressBarStyle = \"primary\" | \"secondary\" | \"positive\" | \"negative\" | \"warning\" | \"none\";\n\nexport type ProgressBarSize = (typeof SIZES)[keyof typeof SIZES];\n"
  },
  {
    "path": "packages/core/src/components/ProgressBars/ProgressBar/ProgressBarHelpers.ts",
    "content": "import { type SIZES } from \"./../../../constants/sizes\";\nimport cx from \"classnames\";\nimport styles from \"./ProgressBar.module.scss\";\n\nexport type Size = (typeof SIZES)[keyof typeof SIZES];\n\nexport const calculatePercentage = (value: number, min: number, max: number, allowExceeding?: boolean) => {\n  const valuePercentage = (Number(value - min) / Number(max - min)) * 100;\n  return !allowExceeding && valuePercentage > 100 ? 100 : valuePercentage;\n};\n\nexport const getProgressBarClassNames = (value: number) => {\n  return cx(styles.progressBar, { [styles.completed]: value >= 100 });\n};\n"
  },
  {
    "path": "packages/core/src/components/ProgressBars/ProgressBar/__tests__/ProgressBar.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport ProgressBar from \"../ProgressBar\";\n\nconst multiValues = [\n  { value: 25, color: \"red\" },\n  { value: 75, color: \"yellow\" },\n  { value: 100, color: \"green\" }\n];\n\ndescribe(\"ProgressBar renders correctly\", () => {\n  it(\"with empty props\", () => {\n    const tree = renderer.create(<ProgressBar />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with value\", () => {\n    const tree = renderer.create(<ProgressBar value={20} />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with size\", () => {\n    const tree = renderer.create(<ProgressBar value={20} size=\"large\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with barStyle\", () => {\n    const tree = renderer.create(<ProgressBar value={20} barStyle=\"positive\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with min\", () => {\n    const tree = renderer.create(<ProgressBar value={20} min={10} />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with indicateProgress\", () => {\n    const tree = renderer.create(<ProgressBar value={20} indicateProgress />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with valueSecondary\", () => {\n    const tree = renderer.create(<ProgressBar value={20} valueSecondary={40} />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with multi and multiValues\", () => {\n    const tree = renderer.create(<ProgressBar value={20} multi multiValues={multiValues} />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with full width progress bar\", () => {\n    const tree = renderer.create(<ProgressBar value={20} fullWidth />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/ProgressBars/ProgressBar/__tests__/ProgressBar.test.tsx",
    "content": "import { beforeEach, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { render, cleanup, act, screen } from \"@testing-library/react\";\nimport ProgressBar from \"../ProgressBar\";\n\ndescribe(\"ProgressBars Tests\", () => {\n  let component;\n\n  beforeEach(() => {\n    cleanup();\n    act(() => {\n      component = render(<ProgressBar id=\"test\" />);\n    });\n  });\n\n  describe(\"rendering of bars\", () => {\n    it(\"should not render progress bars if no values provided\", () => {\n      expect(screen.queryAllByRole(\"progressbar\").length).toBe(0);\n    });\n\n    it(\"should render progress bars if values are provided\", () => {\n      const { rerender } = component;\n      act(() => {\n        component = rerender(<ProgressBar value={13} id=\"test\" />);\n      });\n      expect(screen.queryAllByRole(\"progressbar\").length).toBe(1);\n\n      act(() => {\n        component = rerender(<ProgressBar value={14} valueSecondary={15} id=\"test\" />);\n      });\n      expect(screen.queryAllByRole(\"progressbar\").length).toBe(2);\n    });\n  });\n\n  describe(\"indicate progress\", () => {\n    it(\"should not render progress indication if not set\", () => {\n      const { rerender } = component;\n      act(() => {\n        component = rerender(<ProgressBar value={13} max={100} id=\"test\" />);\n      });\n      expect(screen.queryAllByText(\"13%\").length).toBe(0);\n    });\n\n    it(\"should render progress indication if set\", () => {\n      const { rerender } = component;\n      act(() => {\n        component = rerender(<ProgressBar value={13} max={100} id=\"test\" indicateProgress={true} />);\n      });\n\n      expect(screen.getByText(\"13%\")).toBeTruthy();\n    });\n\n    it(\"should change progress indication for value changes\", () => {\n      const { rerender } = component;\n      const value = 13;\n      for (let i = 0; i < 2; i++) {\n        act(() => {\n          rerender(<ProgressBar value={value + i} max={100} id=\"test\" indicateProgress={true} />);\n        });\n\n        expect(screen.getByText(`${value + i}%`)).toBeTruthy();\n      }\n    });\n  });\n\n  describe(\"multi progress bars\", () => {\n    const multiValues = [\n      { value: 10, color: \"rgb(255, 0, 0)\" },\n      { value: 20, color: \"rgb(0, 255, 0)\" },\n      { value: 30, color: \"rgb(0, 0, 255)\" }\n    ];\n    let multiBarsComponent;\n\n    beforeEach(() => {\n      multiBarsComponent = render(<ProgressBar max={100} id=\"test\" multi />);\n    });\n\n    it(\"should not render multiple bars if multi is not set\", () => {\n      const { rerender } = component;\n      act(() => {\n        component = rerender(<ProgressBar max={100} id=\"test\" multiValues={multiValues} />);\n      });\n\n      expect(screen.queryAllByRole(\"progressbar\").length).toBe(0);\n    });\n\n    it(\"should render all the given bars with the correct values\", () => {\n      const { rerender } = multiBarsComponent;\n      rerender(<ProgressBar max={100} id=\"test\" multi multiValues={multiValues} />);\n\n      const progressBarElements = screen.queryAllByRole(\"progressbar\");\n      expect(progressBarElements.length).toBe(3);\n      const style = window.getComputedStyle(progressBarElements[1]);\n      expect(style.backgroundColor).toBe(`${multiValues[1].color}`);\n    });\n\n    it(\"should propagate value changes to bars\", () => {\n      const multiValuesWithChange = [{ value: 100, color: \"rgb(255, 255, 255)\" }, multiValues[1], multiValues[2]];\n      const { rerender } = multiBarsComponent;\n      rerender(<ProgressBar max={100} id=\"test\" multi multiValues={multiValues} />);\n\n      let progressBarElements = screen.queryAllByRole(\"progressbar\");\n\n      rerender(<ProgressBar max={100} id=\"test\" multi multiValues={multiValuesWithChange} />);\n      progressBarElements = screen.queryAllByRole(\"progressbar\");\n      const style = window.getComputedStyle(progressBarElements[2]);\n\n      expect(style.backgroundColor).toEqual(multiValuesWithChange[0].color);\n    });\n  });\n\n  describe(\"exceeding max value\", () => {\n    it(\"should cap percentage at 100% by default when value exceeds max\", () => {\n      const { rerender } = component;\n      act(() => {\n        component = rerender(<ProgressBar value={120} max={100} id=\"test\" indicateProgress={true} />);\n      });\n\n      expect(screen.getByText(\"100%\")).toBeTruthy();\n      expect(screen.queryByText(\"120%\")).toBeNull();\n    });\n\n    it(\"should show actual percentage when allowExceedingMax is true\", () => {\n      const { rerender } = component;\n      act(() => {\n        component = rerender(\n          <ProgressBar value={120} max={100} id=\"test\" indicateProgress={true} allowExceedingMax={true} />\n        );\n      });\n\n      expect(screen.getByText(\"120%\")).toBeTruthy();\n      expect(screen.queryByText(\"100%\")).toBeNull();\n    });\n\n    it(\"should handle secondary value exceeding max when allowExceedingMax is true\", () => {\n      const { rerender } = component;\n      act(() => {\n        component = rerender(\n          <ProgressBar\n            value={150}\n            valueSecondary={180}\n            max={100}\n            id=\"test\"\n            indicateProgress={true}\n            allowExceedingMax={true}\n          />\n        );\n      });\n\n      expect(screen.getByText(\"150%\")).toBeTruthy();\n\n      expect(screen.queryAllByRole(\"progressbar\").length).toBe(2);\n    });\n\n    it(\"should cap visual bar width at 100% even when allowExceedingMax is true\", () => {\n      const { rerender } = component;\n      act(() => {\n        component = rerender(<ProgressBar value={120} max={100} id=\"test\" allowExceedingMax={true} />);\n      });\n\n      const progressBarElement = screen.getByRole(\"progressbar\");\n\n      expect(progressBarElement.style.width).toBe(\"100%\");\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/ProgressBars/ProgressBar/__tests__/__snapshots__/ProgressBar.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`ProgressBar renders correctly > with barStyle 1`] = `\n<div\n  className=\"wrapper small\"\n  data-testid=\"progress-bar\"\n  data-vibe=\"ProgressBar\"\n>\n  <div\n    className=\"container\"\n  >\n    <div\n      aria-valuemax={100}\n      aria-valuemin={0}\n      aria-valuenow={20}\n      className=\"bar typePrimaryPositive progressBar animate\"\n      data-testid=\"bar-primary\"\n      role=\"progressbar\"\n      style={\n        {\n          \"width\": \"20%\",\n        }\n      }\n    />\n  </div>\n</div>\n`;\n\nexports[`ProgressBar renders correctly > with empty props 1`] = `\n<div\n  className=\"wrapper small\"\n  data-testid=\"progress-bar\"\n  data-vibe=\"ProgressBar\"\n>\n  <div\n    className=\"container\"\n  />\n</div>\n`;\n\nexports[`ProgressBar renders correctly > with full width progress bar 1`] = `\n<div\n  className=\"wrapper small fullWidth\"\n  data-testid=\"progress-bar\"\n  data-vibe=\"ProgressBar\"\n>\n  <div\n    className=\"container\"\n  >\n    <div\n      aria-valuemax={100}\n      aria-valuemin={0}\n      aria-valuenow={20}\n      className=\"bar typePrimaryPrimary progressBar animate\"\n      data-testid=\"bar-primary\"\n      role=\"progressbar\"\n      style={\n        {\n          \"width\": \"20%\",\n        }\n      }\n    />\n  </div>\n</div>\n`;\n\nexports[`ProgressBar renders correctly > with indicateProgress 1`] = `\n<div\n  className=\"wrapper small\"\n  data-testid=\"progress-bar\"\n  data-vibe=\"ProgressBar\"\n>\n  <div\n    className=\"container\"\n  >\n    <div\n      aria-valuemax={100}\n      aria-valuemin={0}\n      aria-valuenow={20}\n      className=\"bar typePrimaryPrimary progressBar animate\"\n      data-testid=\"bar-primary\"\n      role=\"progressbar\"\n      style={\n        {\n          \"width\": \"20%\",\n        }\n      }\n    />\n  </div>\n  <label\n    className=\"label\"\n    htmlFor=\"linear-progress-bar\"\n  >\n    20%\n  </label>\n</div>\n`;\n\nexports[`ProgressBar renders correctly > with min 1`] = `\n<div\n  className=\"wrapper small\"\n  data-testid=\"progress-bar\"\n  data-vibe=\"ProgressBar\"\n>\n  <div\n    className=\"container\"\n  >\n    <div\n      aria-valuemax={100}\n      aria-valuemin={0}\n      aria-valuenow={11.11111111111111}\n      className=\"bar typePrimaryPrimary progressBar animate\"\n      data-testid=\"bar-primary\"\n      role=\"progressbar\"\n      style={\n        {\n          \"width\": \"11.11111111111111%\",\n        }\n      }\n    />\n  </div>\n</div>\n`;\n\nexports[`ProgressBar renders correctly > with multi and multiValues 1`] = `\n<div\n  className=\"wrapper small\"\n  data-testid=\"progress-bar\"\n  data-vibe=\"ProgressBar\"\n>\n  <div\n    className=\"container\"\n  >\n    <div\n      aria-valuemax={100}\n      aria-valuemin={0}\n      aria-valuenow={100}\n      className=\"bar typePrimaryNone progressBar completed animate\"\n      data-testid=\"bar_bar_green_0\"\n      id=\"bar_green_0\"\n      role=\"progressbar\"\n      style={\n        {\n          \"backgroundColor\": \"green\",\n          \"width\": \"100%\",\n        }\n      }\n    />\n    <div\n      aria-valuemax={100}\n      aria-valuemin={0}\n      aria-valuenow={75}\n      className=\"bar typePrimaryNone progressBar animate\"\n      data-testid=\"bar_bar_yellow_1\"\n      id=\"bar_yellow_1\"\n      role=\"progressbar\"\n      style={\n        {\n          \"backgroundColor\": \"yellow\",\n          \"width\": \"75%\",\n        }\n      }\n    />\n    <div\n      aria-valuemax={100}\n      aria-valuemin={0}\n      aria-valuenow={25}\n      className=\"bar typePrimaryNone progressBar animate\"\n      data-testid=\"bar_bar_red_2\"\n      id=\"bar_red_2\"\n      role=\"progressbar\"\n      style={\n        {\n          \"backgroundColor\": \"red\",\n          \"width\": \"25%\",\n        }\n      }\n    />\n  </div>\n</div>\n`;\n\nexports[`ProgressBar renders correctly > with size 1`] = `\n<div\n  className=\"wrapper large\"\n  data-testid=\"progress-bar\"\n  data-vibe=\"ProgressBar\"\n>\n  <div\n    className=\"container\"\n  >\n    <div\n      aria-valuemax={100}\n      aria-valuemin={0}\n      aria-valuenow={20}\n      className=\"bar typePrimaryPrimary progressBar animate\"\n      data-testid=\"bar-primary\"\n      role=\"progressbar\"\n      style={\n        {\n          \"width\": \"20%\",\n        }\n      }\n    />\n  </div>\n</div>\n`;\n\nexports[`ProgressBar renders correctly > with value 1`] = `\n<div\n  className=\"wrapper small\"\n  data-testid=\"progress-bar\"\n  data-vibe=\"ProgressBar\"\n>\n  <div\n    className=\"container\"\n  >\n    <div\n      aria-valuemax={100}\n      aria-valuemin={0}\n      aria-valuenow={20}\n      className=\"bar typePrimaryPrimary progressBar animate\"\n      data-testid=\"bar-primary\"\n      role=\"progressbar\"\n      style={\n        {\n          \"width\": \"20%\",\n        }\n      }\n    />\n  </div>\n</div>\n`;\n\nexports[`ProgressBar renders correctly > with valueSecondary 1`] = `\n<div\n  className=\"wrapper small\"\n  data-testid=\"progress-bar\"\n  data-vibe=\"ProgressBar\"\n>\n  <div\n    className=\"container\"\n  >\n    <div\n      aria-label=\"\"\n      aria-valuemax={100}\n      aria-valuemin={0}\n      aria-valuenow={40}\n      className=\"bar typeSecondaryPrimary progressBar animate\"\n      data-testid=\"bar-secondary\"\n      role=\"progressbar\"\n      style={\n        {\n          \"width\": \"40%\",\n        }\n      }\n    />\n    <div\n      aria-valuemax={100}\n      aria-valuemin={0}\n      aria-valuenow={20}\n      className=\"bar typePrimaryPrimary progressBar animate\"\n      data-testid=\"bar-primary\"\n      role=\"progressbar\"\n      style={\n        {\n          \"width\": \"20%\",\n        }\n      }\n    />\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/ProgressBars/index.ts",
    "content": "export { default as ProgressBar, type ProgressBarProps } from \"./ProgressBar/ProgressBar\";\n\nexport * from \"./ProgressBar/ProgressBar.types\";\n"
  },
  {
    "path": "packages/core/src/components/RadioButton/RadioButton.module.scss",
    "content": "/* stylelint-disable unit-disallowed-list */\n\n.radioButton {\n  display: grid;\n  grid-template-columns: 1.5em auto;\n  grid-gap: 0.5em;\n  cursor: pointer;\n}\n\n.inputContainer {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n  margin: 0;\n}\n\n.control {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1em;\n  height: 1em;\n  border: 0.1em solid;\n  box-sizing: border-box;\n  border-color: var(--ui-border-color);\n  border-radius: 50%;\n  transition: border-width var(--motion-productive-medium) var(--motion-timing-enter);\n  background-color: var(--secondary-background-color);\n}\n\ninput:checked + .control {\n  border-color: var(--primary-color);\n  border-width: 0.3em;\n}\n\ninput:checked + .labelAnimation {\n  animation-name: radioCheckedAnimation;\n  animation-duration: var(--motion-productive-medium);\n  animation-timing-function: var(--motion-timing-enter);\n  animation-fill-mode: forwards;\n}\n\ninput:disabled + .control {\n  border: 0.5em solid;\n  border-color: var(--disabled-background-color);\n  border-radius: 50%;\n}\n\ninput:checked:disabled + .control {\n  border: 0.3em solid;\n  border-color: var(--disabled-background-color);\n  background-color: var(--secondary-text-color);\n}\n\n.radioButton.disabled {\n  cursor: not-allowed;\n}\n\n.radioButton.disabled .label {\n  color: var(--disabled-text-color);\n}\n\n.inputContainer input:focus-visible + .control {\n  outline: none;\n  border-color: var(--primary-color);\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5);\n  border-radius: 50%;\n}\n\n.radioButton:hover .inputContainer input:enabled:checked + .control {\n  border-color: var(--primary-hover-color);\n}\n\n.radioButton:hover .inputContainer input:enabled:not(:checked) + .control,\n.radioButton:focus-within .inputContainer input:enabled:not(:checked) + .control {\n  border-color: var(--primary-text-color);\n}\n\n@keyframes radioCheckedAnimation {\n  0% {\n    height: 1em;\n    width: 1em;\n  }\n  50% {\n    height: 0.8em;\n    width: 0.8em;\n  }\n  100% {\n    height: 1em;\n    width: 1em;\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/RadioButton/RadioButton.tsx",
    "content": "import cx from \"classnames\";\nimport React, { forwardRef, useCallback, useMemo, useRef } from \"react\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport { Clickable } from \"@vibe/clickable\";\nimport { Text } from \"@vibe/typography\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./RadioButton.module.scss\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface RadioButtonProps extends VibeComponentProps {\n  /**\n   * Class name applied to the label text.\n   */\n  labelClassName?: string;\n  /**\n   * Class name applied to the radio button element.\n   */\n  radioButtonClassName?: string;\n  /**\n   * The label text displayed next to the radio button.\n   */\n  text?: string;\n  /**\n   * The value associated with the radio button.\n   */\n  value?: string;\n  /**\n   * The name of the radio button group.\n   */\n  name?: string;\n  /**\n   * If true, the radio button automatically receives focus on mount.\n   */\n  autoFocus?: boolean;\n  /**\n   * If true, the radio button is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The reason why the radio button is disabled, displayed in a tooltip.\n   */\n  disabledReason?: string;\n  /**\n   * If true, the radio button is checked by default.\n   */\n  defaultChecked?: boolean;\n  /**\n   * The child elements inside the radio button.\n   */\n  children?: React.ReactNode;\n  /**\n   * Callback fired when the radio button selection changes.\n   */\n  onSelect?: (event: React.ChangeEvent<HTMLInputElement | null>) => void;\n  /**\n   * If provided, controls the checked state of the radio button.\n   */\n  checked?: boolean;\n  /**\n   * If true, clicking on children will trigger selection.\n   */\n  retainChildClick?: boolean;\n  /**\n   * The tab index applied to the children.\n   */\n  childrenTabIndex?: number;\n  /**\n   * If true, disables the label animation.\n   */\n  noLabelAnimation?: boolean;\n  /**\n   * ARIA label for accessibility when no text is provided.\n   */\n  \"aria-label\"?: string;\n  /**\n   * ID of element that describe this radio button.\n   */\n  \"aria-describedby\"?: string;\n}\n\nconst RadioButton = forwardRef(\n  (\n    {\n      className,\n      text = \"\",\n      value = \"\",\n      name = \"\",\n      labelClassName,\n      radioButtonClassName,\n      disabled = false,\n      autoFocus,\n      disabledReason,\n      defaultChecked = false,\n      children,\n      onSelect,\n      checked,\n      retainChildClick = true,\n      childrenTabIndex = 0,\n      noLabelAnimation = false,\n      \"aria-label\": ariaLabel,\n      \"aria-describedby\": ariaDescribedby,\n      id,\n      \"data-testid\": dataTestId\n    }: RadioButtonProps,\n    ref: React.ForwardedRef<HTMLInputElement>\n  ) => {\n    const inputRef = useRef<HTMLInputElement | null>();\n    const mergedRef = useMergeRef(ref, inputRef);\n\n    const onChildClick = useCallback(() => {\n      if (disabled || !retainChildClick) return;\n      if (inputRef.current) {\n        inputRef.current.checked = true;\n      }\n      if (onSelect) {\n        onSelect(null);\n      }\n    }, [onSelect, inputRef, disabled, retainChildClick]);\n\n    const checkedProps = useMemo(() => {\n      if (checked !== undefined) {\n        return { checked };\n      }\n      return { defaultChecked };\n    }, [checked, defaultChecked]);\n\n    const tooltipContent = disabled ? disabledReason : null;\n\n    return (\n      <Tooltip content={tooltipContent}>\n        <label\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.RADIO_BUTTON, id)}\n          data-vibe={ComponentVibeId.RADIO_BUTTON}\n          className={cx(styles.radioButton, className, {\n            [styles.disabled]: disabled,\n            disabled: disabled\n          })}\n        >\n          <span className={cx(styles.inputContainer)}>\n            <input\n              className={cx(styles.input)}\n              type=\"radio\"\n              value={value}\n              name={name}\n              autoFocus={autoFocus}\n              disabled={disabled}\n              {...checkedProps}\n              aria-label={ariaLabel}\n              aria-describedby={ariaDescribedby}\n              onChange={onSelect}\n              ref={mergedRef}\n            />\n            <span\n              data-testid={getTestId(ComponentDefaultTestId.RADIO_BUTTON_CONTROL, id)}\n              className={cx(styles.control, radioButtonClassName, {\n                [styles.labelAnimation]: !noLabelAnimation\n              })}\n            />\n          </span>\n          {text && (\n            <Text\n              element=\"span\"\n              type=\"text2\"\n              className={labelClassName}\n              data-testid={getTestId(ComponentDefaultTestId.RADIO_BUTTON_LABEL, id)}\n            >\n              {text}\n            </Text>\n          )}\n          {children && (\n            <Clickable onClick={onChildClick} tabIndex={childrenTabIndex}>\n              {children}\n            </Clickable>\n          )}\n        </label>\n      </Tooltip>\n    );\n  }\n);\n\nexport default RadioButton;\n"
  },
  {
    "path": "packages/core/src/components/RadioButton/__tests__/RadioButton.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport RadioButton from \"../RadioButton\";\n\ndescribe(\"RadioButton renders correctly\", () => {\n  it(\"with empty props\", () => {\n    const tree = renderer.create(<RadioButton />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with name\", () => {\n    const tree = renderer.create(<RadioButton name=\"radiosName\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with value\", () => {\n    const tree = renderer.create(<RadioButton value=\"optionValue\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"when disabled\", () => {\n    const tree = renderer.create(<RadioButton disabled />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"when default checked\", () => {\n    const tree = renderer.create(<RadioButton defaultChecked />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"when checked\", () => {\n    const tree = renderer.create(<RadioButton checked />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"when autoFocus\", () => {\n    const tree = renderer.create(<RadioButton autoFocus />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"when unchecked\", () => {\n    const tree = renderer.create(<RadioButton checked={false} />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with text\", () => {\n    const tree = renderer.create(<RadioButton text=\"test text\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with className\", () => {\n    const tree = renderer.create(<RadioButton className=\"test-classname\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/RadioButton/__tests__/RadioButton.test.tsx",
    "content": "import { vi, beforeEach, afterEach, describe, it, expect, type Mock } from \"vitest\";\nimport React from \"react\";\nimport { fireEvent, render, cleanup, screen } from \"@testing-library/react\";\nimport RadioButton from \"../RadioButton\";\n\ndescribe(\"RadioButton tests\", () => {\n  const formName = \"myForm\";\n  const radiosName = \"radios\";\n\n  const option1Value = \"1\";\n  const option1Text = \"Option 1\";\n  const option2Value = \"2\";\n  const option2Text = \"Option 2\";\n  const option3Value = \"3\";\n  const option3Text = \"Option 3\";\n\n  let onChangeMock1: Mock;\n  let onChangeMock2: Mock;\n  let onChangeMock3: Mock;\n\n  describe(\"With one of the radio buttons is checked by default\", () => {\n    beforeEach(() => {\n      onChangeMock1 = vi.fn();\n      onChangeMock2 = vi.fn();\n      onChangeMock3 = vi.fn();\n\n      render(\n        <form name={formName}>\n          <RadioButton\n            name={radiosName}\n            value={option1Value}\n            text={option1Text}\n            onSelect={onChangeMock1}\n            defaultChecked\n          />\n          <RadioButton name={radiosName} value={option2Value} text={option2Text} onSelect={onChangeMock2} />\n          <RadioButton name={radiosName} value={option3Value} text={option3Text} onSelect={onChangeMock3} />\n        </form>\n      );\n    });\n\n    afterEach(() => {\n      cleanup();\n    });\n\n    it(\"should default select 1st option\", () => {\n      const option1: HTMLInputElement = screen.getByLabelText(option1Text);\n      const option2: HTMLInputElement = screen.getByLabelText(option2Text);\n      const option3: HTMLInputElement = screen.getByLabelText(option3Text);\n      expect(option1.checked).toBeTruthy();\n      expect(option2.checked).toBeFalsy();\n      expect(option3.checked).toBeFalsy();\n    });\n\n    it(\"should select 2nd option\", () => {\n      const option1: HTMLInputElement = screen.getByLabelText(option1Text);\n      const option2: HTMLInputElement = screen.getByLabelText(option2Text);\n      const option3: HTMLInputElement = screen.getByLabelText(option3Text);\n      fireEvent.click(option2);\n      expect(option1.checked).toBeFalsy();\n      expect(option2.checked).toBeTruthy();\n      expect(option3.checked).toBeFalsy();\n    });\n\n    it(\"should call the onChange callback when clicked\", () => {\n      const option2 = screen.getByLabelText(option2Text);\n      fireEvent.click(option2);\n      expect(onChangeMock2.mock.calls.length).toBe(1);\n      expect(onChangeMock2.mock.calls[0]).toBeTruthy();\n    });\n\n    it(\"should be the same text\", () => {\n      const text = \"test text\";\n      const { getByText } = render(<RadioButton text={text} />);\n      const radioButtonComponentText = getByText(text);\n      expect(radioButtonComponentText).toBeTruthy();\n    });\n  });\n\n  describe(\"When all radio buttons are unchecked\", () => {\n    it(\"should auto focus 2nd option\", () => {\n      render(\n        <form name={formName}>\n          <RadioButton text={option1Text} />\n          <RadioButton text={option2Text} autoFocus />\n          <RadioButton text={option3Text} />\n        </form>\n      );\n\n      const option1: HTMLInputElement = screen.getByLabelText(option1Text);\n      const option2: HTMLInputElement = screen.getByLabelText(option2Text);\n      const option3: HTMLInputElement = screen.getByLabelText(option3Text);\n      expect(option1).not.toHaveFocus();\n      expect(option2).toHaveFocus();\n      expect(option3).not.toHaveFocus();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/RadioButton/__tests__/__snapshots__/RadioButton.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`RadioButton renders correctly > when autoFocus 1`] = `\n<label\n  className=\"radioButton\"\n  data-testid=\"radio-button\"\n  data-vibe=\"RadioButton\"\n>\n  <span\n    className=\"inputContainer\"\n  >\n    <input\n      autoFocus={true}\n      className=\"input\"\n      defaultChecked={false}\n      disabled={false}\n      name=\"\"\n      type=\"radio\"\n      value=\"\"\n    />\n    <span\n      className=\"control labelAnimation\"\n      data-testid=\"radio-button-control\"\n    />\n  </span>\n  \n</label>\n`;\n\nexports[`RadioButton renders correctly > when checked 1`] = `\n<label\n  className=\"radioButton\"\n  data-testid=\"radio-button\"\n  data-vibe=\"RadioButton\"\n>\n  <span\n    className=\"inputContainer\"\n  >\n    <input\n      checked={true}\n      className=\"input\"\n      disabled={false}\n      name=\"\"\n      type=\"radio\"\n      value=\"\"\n    />\n    <span\n      className=\"control labelAnimation\"\n      data-testid=\"radio-button-control\"\n    />\n  </span>\n  \n</label>\n`;\n\nexports[`RadioButton renders correctly > when default checked 1`] = `\n<label\n  className=\"radioButton\"\n  data-testid=\"radio-button\"\n  data-vibe=\"RadioButton\"\n>\n  <span\n    className=\"inputContainer\"\n  >\n    <input\n      className=\"input\"\n      defaultChecked={true}\n      disabled={false}\n      name=\"\"\n      type=\"radio\"\n      value=\"\"\n    />\n    <span\n      className=\"control labelAnimation\"\n      data-testid=\"radio-button-control\"\n    />\n  </span>\n  \n</label>\n`;\n\nexports[`RadioButton renders correctly > when disabled 1`] = `\n<label\n  className=\"radioButton disabled\"\n  data-testid=\"radio-button\"\n  data-vibe=\"RadioButton\"\n>\n  <span\n    className=\"inputContainer\"\n  >\n    <input\n      className=\"input\"\n      defaultChecked={false}\n      disabled={true}\n      name=\"\"\n      type=\"radio\"\n      value=\"\"\n    />\n    <span\n      className=\"control labelAnimation\"\n      data-testid=\"radio-button-control\"\n    />\n  </span>\n  \n</label>\n`;\n\nexports[`RadioButton renders correctly > when unchecked 1`] = `\n<label\n  className=\"radioButton\"\n  data-testid=\"radio-button\"\n  data-vibe=\"RadioButton\"\n>\n  <span\n    className=\"inputContainer\"\n  >\n    <input\n      checked={false}\n      className=\"input\"\n      disabled={false}\n      name=\"\"\n      type=\"radio\"\n      value=\"\"\n    />\n    <span\n      className=\"control labelAnimation\"\n      data-testid=\"radio-button-control\"\n    />\n  </span>\n  \n</label>\n`;\n\nexports[`RadioButton renders correctly > with className 1`] = `\n<label\n  className=\"radioButton test-classname\"\n  data-testid=\"radio-button\"\n  data-vibe=\"RadioButton\"\n>\n  <span\n    className=\"inputContainer\"\n  >\n    <input\n      className=\"input\"\n      defaultChecked={false}\n      disabled={false}\n      name=\"\"\n      type=\"radio\"\n      value=\"\"\n    />\n    <span\n      className=\"control labelAnimation\"\n      data-testid=\"radio-button-control\"\n    />\n  </span>\n  \n</label>\n`;\n\nexports[`RadioButton renders correctly > with empty props 1`] = `\n<label\n  className=\"radioButton\"\n  data-testid=\"radio-button\"\n  data-vibe=\"RadioButton\"\n>\n  <span\n    className=\"inputContainer\"\n  >\n    <input\n      className=\"input\"\n      defaultChecked={false}\n      disabled={false}\n      name=\"\"\n      type=\"radio\"\n      value=\"\"\n    />\n    <span\n      className=\"control labelAnimation\"\n      data-testid=\"radio-button-control\"\n    />\n  </span>\n  \n</label>\n`;\n\nexports[`RadioButton renders correctly > with name 1`] = `\n<label\n  className=\"radioButton\"\n  data-testid=\"radio-button\"\n  data-vibe=\"RadioButton\"\n>\n  <span\n    className=\"inputContainer\"\n  >\n    <input\n      className=\"input\"\n      defaultChecked={false}\n      disabled={false}\n      name=\"radiosName\"\n      type=\"radio\"\n      value=\"\"\n    />\n    <span\n      className=\"control labelAnimation\"\n      data-testid=\"radio-button-control\"\n    />\n  </span>\n  \n</label>\n`;\n\nexports[`RadioButton renders correctly > with text 1`] = `\n<label\n  className=\"radioButton\"\n  data-testid=\"radio-button\"\n  data-vibe=\"RadioButton\"\n>\n  <span\n    className=\"inputContainer\"\n  >\n    <input\n      className=\"input\"\n      defaultChecked={false}\n      disabled={false}\n      name=\"\"\n      type=\"radio\"\n      value=\"\"\n    />\n    <span\n      className=\"control labelAnimation\"\n      data-testid=\"radio-button-control\"\n    />\n  </span>\n  <span\n    className=\"typography primary start singleLineEllipsis text text2Normal\"\n    data-testid=\"radio-button-label\"\n  >\n    test text\n  </span>\n</label>\n`;\n\nexports[`RadioButton renders correctly > with value 1`] = `\n<label\n  className=\"radioButton\"\n  data-testid=\"radio-button\"\n  data-vibe=\"RadioButton\"\n>\n  <span\n    className=\"inputContainer\"\n  >\n    <input\n      className=\"input\"\n      defaultChecked={false}\n      disabled={false}\n      name=\"\"\n      type=\"radio\"\n      value=\"optionValue\"\n    />\n    <span\n      className=\"control labelAnimation\"\n      data-testid=\"radio-button-control\"\n    />\n  </span>\n  \n</label>\n`;\n"
  },
  {
    "path": "packages/core/src/components/RadioButton/index.ts",
    "content": "export { default as RadioButton, type RadioButtonProps } from \"./RadioButton\";\n"
  },
  {
    "path": "packages/core/src/components/Search/Search.module.scss",
    "content": ".searchWrapper {\n  .search {\n    appearance: textfield;\n\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-results-button {\n      appearance: none;\n    }\n  }\n\n  .loader {\n    margin-inline-end: var(--space-4);\n  }\n\n  .icon {\n    opacity: 1;\n    color: var(--icon-color);\n    transition: opacity var(--motion-productive-short);\n\n    &.empty {\n      opacity: 0;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Search/Search.tsx",
    "content": "import cx from \"classnames\";\nimport React, { forwardRef, useCallback, useRef } from \"react\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport { CloseSmall as CloseSmallIcon, Search as SearchIcon } from \"@vibe/icons\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./Search.module.scss\";\nimport { BaseInput } from \"@vibe/base\";\nimport useDebounceEvent from \"../../hooks/useDebounceEvent\";\nimport { IconButton } from \"@vibe/icon-button\";\nimport { Icon } from \"@vibe/icon\";\nimport { type SearchProps } from \"./Search.types\";\nimport { Loader } from \"@vibe/loader\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nconst Search = forwardRef(\n  (\n    {\n      searchIconName = SearchIcon,\n      clearIconName = CloseSmallIcon,\n      clearIconLabel = \"Clear\",\n      renderAction: RenderAction,\n      hideRenderActionOnInput,\n      value,\n      placeholder,\n      size = \"medium\",\n      disabled,\n      loading,\n      autoFocus,\n      autoComplete = \"off\",\n      inputAriaLabel,\n      debounceRate = 400,\n      searchResultsContainerId,\n      currentAriaResultId,\n      onChange,\n      onFocus,\n      onBlur,\n      onClear,\n      onKeyDown,\n      className,\n      \"aria-expanded\": ariaExpanded,\n      \"aria-haspopup\": ariaHasPopup,\n      showClearIcon = true,\n      id,\n      \"data-testid\": dataTestId\n    }: SearchProps,\n    ref: React.ForwardedRef<HTMLInputElement>\n  ) => {\n    const inputRef = useRef(null);\n    const mergedRef = useMergeRef(ref, inputRef);\n\n    const { inputValue, onEventChanged, clearValue } = useDebounceEvent({\n      delay: debounceRate,\n      onChange,\n      initialStateValue: value\n    });\n\n    const onClearButtonClick = useCallback(() => {\n      if (disabled) return;\n      inputRef.current?.focus?.();\n      clearValue();\n      onClear?.();\n    }, [disabled, clearValue, onClear]);\n\n    const SearchIcon = (\n      <Icon icon={searchIconName} className={styles.icon} type=\"font\" size={size === \"small\" ? \"16px\" : \"20px\"} />\n    );\n\n    const ClearIcon = (\n      <IconButton\n        className={cx(styles.icon, { [styles.empty]: !inputValue })}\n        icon={clearIconName}\n        aria-label={clearIconLabel}\n        onClick={onClearButtonClick}\n        size={size === \"small\" ? \"xs\" : \"small\"}\n        data-testid={getTestId(ComponentDefaultTestId.CLEAN_SEARCH_BUTTON, id)}\n      />\n    );\n\n    const RenderRight = (\n      <>\n        {loading && (\n          <Loader\n            size={size === \"small\" ? \"xs\" : 20}\n            color=\"secondary\"\n            wrapperClassName={cx({ [styles.loader]: !inputValue && !RenderAction })}\n          />\n        )}\n        {showClearIcon && inputValue && !disabled && ClearIcon}\n        {!(hideRenderActionOnInput && inputValue) && RenderAction}\n      </>\n    );\n\n    return (\n      <BaseInput\n        ref={mergedRef}\n        id={id}\n        type={\"search\"}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.SEARCH, id)}\n        data-vibe={ComponentVibeId.SEARCH}\n        className={cx(styles.searchWrapper, className)}\n        inputClassName={styles.search}\n        value={inputValue}\n        renderLeft={SearchIcon}\n        renderRight={RenderRight}\n        autoFocus={autoFocus}\n        placeholder={placeholder}\n        disabled={disabled}\n        onChange={onEventChanged}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        autoComplete={autoComplete}\n        size={size}\n        wrapperRole=\"search\"\n        inputRole={searchResultsContainerId ? \"combobox\" : undefined}\n        aria-label={inputAriaLabel}\n        aria-busy={loading}\n        aria-controls={ariaExpanded ? searchResultsContainerId : undefined}\n        aria-activedescendant={currentAriaResultId}\n        aria-haspopup={ariaHasPopup}\n        aria-expanded={ariaExpanded}\n      />\n    );\n  }\n);\n\nexport default Search;\n"
  },
  {
    "path": "packages/core/src/components/Search/Search.types.ts",
    "content": "import type React from \"react\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { type SubIcon } from \"@vibe/icon\";\nimport { type InputSize } from \"@vibe/base\";\nimport type { IconButton } from \"@vibe/icon-button\";\nimport type MenuButton from \"../MenuButton/MenuButton\";\n\nexport interface SearchProps extends VibeComponentProps {\n  /**\n   * The icon used for the search button.\n   */\n  searchIconName?: SubIcon;\n  /**\n   * The icon used for the clear button.\n   */\n  clearIconName?: SubIcon;\n  /**\n   * The label for the clear button, for accessibility purposes.\n   */\n  clearIconLabel?: string;\n  /**\n   * Renders an additional action button in the search input.\n   */\n  renderAction?: React.ReactElement<typeof IconButton | typeof MenuButton>;\n  /**\n   * If true, hides the additional action button when input has text.\n   */\n  hideRenderActionOnInput?: boolean;\n  /**\n   * The current value of the search input.\n   */\n  value?: HTMLInputElement[\"value\"];\n  /**\n   * The placeholder text displayed when the input is empty.\n   */\n  placeholder?: HTMLInputElement[\"placeholder\"];\n  /**\n   * The size of the search input, affecting padding and font size.\n   */\n  size?: InputSize;\n  /**\n   * If true, disables the search input.\n   */\n  disabled?: HTMLInputElement[\"disabled\"];\n  /**\n   * If true, displays a loading indicator inside the input.\n   */\n  loading?: boolean;\n  /**\n   * If true, automatically focuses the search input on mount.\n   */\n  autoFocus?: HTMLInputElement[\"autofocus\"];\n  /**\n   * Configures the browser's autocomplete behavior.\n   */\n  autoComplete?: HTMLInputElement[\"autocomplete\"];\n  /**\n   * The ARIA label for the search input.\n   */\n  inputAriaLabel?: React.AriaAttributes[\"aria-label\"];\n  /**\n   * If true, indicates that a popup is open.\n   */\n  \"aria-expanded\"?: React.AriaAttributes[\"aria-expanded\"];\n  /**\n   * Specifies the type of popup associated with the search input.\n   */\n  \"aria-haspopup\"?: React.AriaAttributes[\"aria-haspopup\"];\n  /**\n   * The debounce rate for input value changes.\n   */\n  debounceRate?: number;\n  /**\n   * The ID of the container where search results are displayed.\n   */\n  searchResultsContainerId?: string;\n  /**\n   * ARIA property indicating the currently active search result.\n   */\n  currentAriaResultId?: React.AriaAttributes[\"aria-activedescendant\"];\n  /**\n   * Callback fired when the search input value changes.\n   */\n  onChange?: (value: string) => void;\n  /**\n   * Callback fired when the search input loses focus.\n   */\n  onBlur?: (event: React.FocusEvent) => void;\n  /**\n   * Callback fired when the search input gains focus.\n   */\n  onFocus?: (event: React.FocusEvent) => void;\n  /**\n   * Callback fired when the clear button is clicked.\n   */\n  onClear?: () => void;\n  /**\n   * Callback fired when a key is pressed inside the input.\n   */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n  /**\n   * If true, displays a clear button inside the search input.\n   */\n  showClearIcon?: boolean;\n}\n"
  },
  {
    "path": "packages/core/src/components/Search/__tests__/Search.test.tsx",
    "content": "import { vi, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { render } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport Search from \"../Search\";\nimport { type SearchProps } from \"../Search.types\";\n\nfunction renderSearch(props?: Partial<SearchProps>) {\n  return render(<Search inputAriaLabel=\"search-input\" {...props} />);\n}\n\ndescribe(\"Search\", () => {\n  it(\"should render correctly\", () => {\n    const { getByRole } = renderSearch();\n    expect(getByRole(\"searchbox\")).toBeInTheDocument();\n  });\n\n  it(\"should display the search icon by default\", () => {\n    const { getByTestId } = renderSearch();\n    expect(getByTestId(\"icon\")).toBeInTheDocument();\n  });\n\n  it(\"should not display the clear icon when the input is empty\", () => {\n    const { queryByLabelText } = renderSearch();\n    expect(queryByLabelText(\"Clear\")).toBeNull();\n  });\n\n  it(\"should not display the clear icon when showClearIcon false\", () => {\n    const { queryByLabelText, getAllByTestId } = renderSearch({ value: \"Test\", showClearIcon: false });\n    expect(getAllByTestId(\"icon\")).toHaveLength(1);\n    expect(queryByLabelText(\"Clear\")).toBeNull();\n  });\n\n  it(\"should display both the search icon and clear icon when input has value\", () => {\n    const { getByTestId, getAllByTestId } = renderSearch({ value: \"Test\" });\n    expect(getAllByTestId(\"icon\")).toHaveLength(2);\n    expect(getByTestId(\"clean-search-button\")).toBeInTheDocument();\n  });\n\n  it(\"should clear the input value when the clear icon is clicked\", () => {\n    const { getByRole, getByLabelText } = renderSearch({ value: \"Test\" });\n    userEvent.click(getByLabelText(\"Clear\"));\n    expect(getByRole(\"searchbox\")).toHaveValue(\"\");\n  });\n\n  it(\"should display the clear icon once user inputs\", () => {\n    const { getByRole, getByTestId } = renderSearch();\n    userEvent.type(getByRole(\"searchbox\"), \"Test\");\n    expect(getByTestId(\"clean-search-button\")).toBeInTheDocument();\n  });\n\n  it(\"should display a loader when the loading prop is true\", () => {\n    const { getByTestId } = renderSearch({ loading: true });\n    expect(getByTestId(\"loader\")).toBeInTheDocument();\n  });\n\n  it(\"should trigger onChange with the correct value when typing without debounce\", () => {\n    const onChange = vi.fn();\n    const { getByRole } = renderSearch({ onChange, debounceRate: 0 });\n    userEvent.type(getByRole(\"searchbox\"), \"Hello, World!\");\n    expect(onChange).toHaveBeenCalledTimes(\"Hello, World!\".length);\n    expect(onChange).toHaveBeenLastCalledWith(\"Hello, World!\");\n  });\n\n  it(\"should trigger onClear when the user press the clear button\", () => {\n    const onClear = vi.fn();\n    const { getByRole, getByLabelText } = renderSearch({ value: \"Test\", onClear });\n    userEvent.type(getByRole(\"searchbox\"), \"Hello, World!\");\n    userEvent.click(getByLabelText(\"Clear\"));\n    expect(onClear).toHaveBeenCalledOnce();\n  });\n\n  it(\"should debounce the onChange call\", () => {\n    vi.useFakeTimers();\n    const onChange = vi.fn();\n\n    const { getByRole } = renderSearch({ onChange, debounceRate: 100 });\n    userEvent.type(getByRole(\"searchbox\"), \"Hello\");\n    expect(onChange).not.toHaveBeenCalled();\n    vi.advanceTimersByTime(100);\n    expect(onChange).toHaveBeenCalledWith(\"Hello\");\n    vi.useRealTimers();\n  });\n\n  it(\"should respect the autoFocus prop\", () => {\n    const { getByRole } = renderSearch({ autoFocus: true });\n    expect(getByRole(\"searchbox\")).toHaveFocus();\n  });\n\n  it(\"should not allow input when disabled is true\", () => {\n    const { getByRole } = renderSearch({ value: \"Test\", disabled: true });\n    const input = getByRole(\"searchbox\");\n    expect(input).toBeDisabled();\n    userEvent.type(input, \"Hello, World!\");\n    expect(input).toHaveValue(\"Test\");\n  });\n\n  it(\"should not show clear when disabled is true\", () => {\n    const { queryByLabelText } = renderSearch({ value: \"Test\", disabled: true });\n    expect(queryByLabelText(\"Clear\")).not.toBeInTheDocument();\n  });\n\n  it(\"should display additional action render if provided\", () => {\n    const AdditionalActionButton = <button type=\"button\">Extra Action</button>;\n    const { getByText } = renderSearch({ renderAction: AdditionalActionButton });\n    expect(getByText(\"Extra Action\")).toBeInTheDocument();\n  });\n\n  it(\"should display additional action render with hideRenderActionOnInput option true and no input value\", () => {\n    const AdditionalActionButton = <button type=\"button\">Extra Action</button>;\n    const { getByText } = renderSearch({ renderAction: AdditionalActionButton, hideRenderActionOnInput: true });\n    expect(getByText(\"Extra Action\")).toBeInTheDocument();\n  });\n\n  it(\"should not display additional action render with hideRenderActionOnInput option true and input value\", () => {\n    const AdditionalActionButton = <button type=\"button\">Extra Action</button>;\n    const { queryByText } = renderSearch({\n      renderAction: AdditionalActionButton,\n      hideRenderActionOnInput: true,\n      value: \"Test\"\n    });\n    expect(queryByText(\"Extra Action\")).not.toBeInTheDocument();\n  });\n\n  describe(\"a11y\", () => {\n    it(\"should have default input role when searchResultsContainerId is not provided\", () => {\n      const { getByRole } = renderSearch();\n      expect(getByRole(\"searchbox\")).toBeInTheDocument();\n    });\n\n    it(\"should have role 'combobox' when searchResultsContainerId is provided\", () => {\n      const { getByRole } = renderSearch({ searchResultsContainerId: \"results\" });\n      expect(getByRole(\"combobox\")).toBeInTheDocument();\n    });\n\n    it(\"should set aria-controls when searchResultsContainerId is provided and aria-expanded is true\", () => {\n      const { getByRole } = renderSearch({ searchResultsContainerId: \"search-results\", \"aria-expanded\": true });\n      expect(getByRole(\"combobox\")).toHaveAttribute(\"aria-controls\", \"search-results\");\n    });\n\n    it(\"should set aria-activedescendant when activeDescendant is provided\", () => {\n      const { getByRole } = renderSearch({ currentAriaResultId: \"option-1\" });\n      expect(getByRole(\"searchbox\")).toHaveAttribute(\"aria-activedescendant\", \"option-1\");\n    });\n\n    it(\"should set aria-busy when loading is true\", () => {\n      const { getByRole } = renderSearch({ loading: true });\n      expect(getByRole(\"searchbox\")).toHaveAttribute(\"aria-busy\", \"true\");\n    });\n  });\n\n  describe(\"interactions\", () => {\n    it(\"should handle focus and blur events\", () => {\n      const onFocus = vi.fn();\n      const onBlur = vi.fn();\n      const { getByRole } = renderSearch({ onFocus, onBlur });\n      const input = getByRole(\"searchbox\");\n      userEvent.click(input);\n      expect(onFocus).toHaveBeenCalled();\n      userEvent.tab();\n      expect(onBlur).toHaveBeenCalled();\n    });\n\n    it(\"should call onKeyDown when Enter key is pressed\", () => {\n      const onKeyDown = vi.fn();\n      const { getByRole } = renderSearch({ onKeyDown });\n      const input = getByRole(\"searchbox\");\n      userEvent.click(input);\n      userEvent.keyboard(\"{Enter}\");\n      expect(onKeyDown).toHaveBeenCalledTimes(1);\n    });\n\n    it(\"should not call onKeyDown when input is disabled\", () => {\n      const onKeyDown = vi.fn();\n      const { getByRole } = renderSearch({ onKeyDown, disabled: true });\n      const input = getByRole(\"searchbox\");\n      userEvent.click(input);\n      userEvent.keyboard(\"{Enter}\");\n      expect(onKeyDown).not.toHaveBeenCalled();\n    });\n\n    it(\"should call onKeyDown for each character when input is typed with content\", () => {\n      const onKeyDown = vi.fn();\n      const string = \"Hello, World!\";\n      const { getByRole } = renderSearch({ onKeyDown });\n      const input = getByRole(\"searchbox\");\n      userEvent.click(input);\n      userEvent.type(input, string);\n      expect(onKeyDown).toHaveBeenCalledTimes(string.length);\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Search/index.ts",
    "content": "export { default as Search } from \"./Search\";\nexport * from \"./Search.types\";\n"
  },
  {
    "path": "packages/core/src/components/Skeleton/Skeleton.module.scss",
    "content": "@import \"SkeletonVariables\";\n\n@mixin shine-animation() {\n  overflow: hidden;\n  animation-duration: 0.8s;\n  animation-direction: alternate;\n  animation-iteration-count: infinite;\n  animation-name: shine;\n  animation-timing-function: steps(10, end);\n\n  @keyframes shine {\n    0% {\n      opacity: 0.4;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n\n@mixin skeleton($radius: var(--border-radius-small)) {\n  background: var(--ui-background-color);\n  border-radius: $radius;\n  @include shine-animation;\n}\n\n.skeleton {\n  display: flex;\n}\n\n.rectangle {\n  height: $rectangle-default-size;\n  @include skeleton;\n}\n\n.circle {\n  height: $circle-default-size;\n  @include skeleton($circle-radius);\n}\n\n.text {\n  @include skeleton;\n}\n\n.textH1 {\n  height: $h1-empty-state-height;\n}\n\n.textH2 {\n  height: $h2-empty-state-height;\n}\n\n.textH3 {\n  height: $h3-empty-state-height;\n}\n\n.textH4 {\n  height: $h4-empty-state-height;\n}\n\n.textH5 {\n  height: $h5-empty-state-height;\n}\n\n.textH6 {\n  height: $h6-empty-state-height;\n}\n\n.textSmall,\n.textCustom {\n  height: $small-empty-state-height;\n}\n\n.fullWidth {\n  width: 100%;\n}\n\n.skeleton:not(.fullWidth) {\n  .text {\n    width: 162px;\n  }\n  .circle {\n    width: $circle-default-size;\n  }\n  .rectangle {\n    width: $rectangle-default-size;\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Skeleton/Skeleton.tsx",
    "content": "import React from \"react\";\nimport { camelCase } from \"es-toolkit\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport { SKELETON_CUSTOM_SIZE } from \"./SkeletonConstants\";\nimport { type SkeletonType, type SkeletonSizeType } from \"./Skelton.types\";\nimport { getStyle } from \"@vibe/shared\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./Skeleton.module.scss\";\n\nexport interface SkeletonProps extends VibeComponentProps {\n  /**\n   * The type of skeleton.\n   */\n  type?: SkeletonType;\n  /**\n   * The predefined size of the skeleton.\n   */\n  size?: SkeletonSizeType;\n  /**\n   * The width of the skeleton in pixels.\n   */\n  width?: number;\n  /**\n   * The height of the skeleton in pixels.\n   */\n  height?: number;\n  /**\n   * Class name applied to the wrapper element.\n   */\n  wrapperClassName?: string;\n  /**\n   * If true, the skeleton will take up the full width of its container.\n   */\n  fullWidth?: boolean;\n}\n\nconst Skeleton = ({\n  type = \"rectangle\",\n  size = \"custom\",\n  className,\n  wrapperClassName,\n  width,\n  height,\n  fullWidth = false,\n  id,\n  \"data-testid\": dataTestId\n}: SkeletonProps) => {\n  const skeletonType = type || \"rectangle\";\n\n  // Skeleton has sizes only for text type, other types support only custom size\n  const skeletonSize = size || SKELETON_CUSTOM_SIZE;\n\n  return (\n    <div\n      id={id}\n      className={cx(styles.skeleton, wrapperClassName, { [styles.fullWidth]: fullWidth })}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.SKELETON, id)}\n    >\n      <div\n        className={cx(styles[skeletonType], getStyle(styles, camelCase(skeletonType + \"-\" + skeletonSize)), className, {\n          [styles.fullWidth]: fullWidth\n        })}\n        style={{ width, height }}\n      />\n    </div>\n  );\n};\n\nexport default Skeleton;\n"
  },
  {
    "path": "packages/core/src/components/Skeleton/SkeletonConstants.ts",
    "content": "// Fixed names\nexport const SKELETON_CUSTOM_SIZE = \"custom\";\n"
  },
  {
    "path": "packages/core/src/components/Skeleton/SkeletonVariables.scss",
    "content": "$circle-default-size: 40px;\n$circle-radius: 50%;\n$rectangle-default-size: 160px;\n\n// Empty state heights\n$h1-empty-state-height: 32px;\n$h2-empty-state-height: 24px;\n$h3-empty-state-height: 24px;\n$h4-empty-state-height: 21px;\n$h5-empty-state-height: 16px;\n$h6-empty-state-height: 12px;\n$small-empty-state-height: 12px;\n"
  },
  {
    "path": "packages/core/src/components/Skeleton/Skelton.types.ts",
    "content": "export type SkeletonType = \"circle\" | \"rectangle\" | \"text\";\n\ntype TextSkeletonSize = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\" | \"small\";\n\nexport type SkeletonSizeType = TextSkeletonSize | \"custom\";\n"
  },
  {
    "path": "packages/core/src/components/Skeleton/__tests__/Skeleton.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport Skeleton from \"../Skeleton\";\n\ndescribe(\"Skeleton renders correctly\", () => {\n  it(\"renders correctly with empty props\", () => {\n    const tree = renderer.create(<Skeleton />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  describe(\"renders correctly when rectangle\", () => {\n    it(\"with empty props\", () => {\n      const tree = renderer.create(<Skeleton type=\"rectangle\" />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"with fixed height\", () => {\n      const tree = renderer.create(<Skeleton type=\"rectangle\" height={100} />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"with fixed width\", () => {\n      const tree = renderer.create(<Skeleton type=\"rectangle\" width={100} />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"with fixed height and width\", () => {\n      const tree = renderer.create(<Skeleton type=\"rectangle\" width={100} height={100} />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n  });\n\n  describe(\"renders correctly when circle\", () => {\n    it(\"with empty props\", () => {\n      const tree = renderer.create(<Skeleton type=\"circle\" />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"with fixed height\", () => {\n      const tree = renderer.create(<Skeleton type=\"circle\" height={100} />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"with fixed width\", () => {\n      const tree = renderer.create(<Skeleton type=\"circle\" width={100} />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"with fixed height and width\", () => {\n      const tree = renderer.create(<Skeleton type=\"circle\" width={100} height={100} />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n  });\n\n  describe(\"renders correctly when text\", () => {\n    it(\"with empty props\", () => {\n      const tree = renderer.create(<Skeleton type=\"text\" />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"with fixed height\", () => {\n      const tree = renderer.create(<Skeleton type=\"text\" height={100} />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"with fixed width\", () => {\n      const tree = renderer.create(<Skeleton type=\"text\" width={100} />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"with fixed height and width\", () => {\n      const tree = renderer.create(<Skeleton type=\"text\" width={100} height={100} />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"with H1 size\", () => {\n      const tree = renderer.create(<Skeleton type=\"text\" size=\"h1\" />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"with H2 size\", () => {\n      const tree = renderer.create(<Skeleton type=\"text\" size=\"h2\" />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"with H3 size\", () => {\n      const tree = renderer.create(<Skeleton type=\"text\" size=\"h3\" />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"with H4 size\", () => {\n      const tree = renderer.create(<Skeleton type=\"text\" size=\"h4\" />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"with H5 size\", () => {\n      const tree = renderer.create(<Skeleton type=\"text\" size=\"h5\" />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"with CUSTOM size\", () => {\n      const tree = renderer.create(<Skeleton type=\"text\" size=\"custom\" />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Skeleton/__tests__/__snapshots__/Skeleton.snapshot.test.jsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`Skeleton renders correctly > renders correctly when circle > with empty props 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"circle circleCustom\"\n    style={\n      {\n        \"height\": undefined,\n        \"width\": undefined,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when circle > with fixed height 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"circle circleCustom\"\n    style={\n      {\n        \"height\": 100,\n        \"width\": undefined,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when circle > with fixed height and width 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"circle circleCustom\"\n    style={\n      {\n        \"height\": 100,\n        \"width\": 100,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when circle > with fixed width 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"circle circleCustom\"\n    style={\n      {\n        \"height\": undefined,\n        \"width\": 100,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when rectangle > with empty props 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"rectangle rectangleCustom\"\n    style={\n      {\n        \"height\": undefined,\n        \"width\": undefined,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when rectangle > with fixed height 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"rectangle rectangleCustom\"\n    style={\n      {\n        \"height\": 100,\n        \"width\": undefined,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when rectangle > with fixed height and width 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"rectangle rectangleCustom\"\n    style={\n      {\n        \"height\": 100,\n        \"width\": 100,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when rectangle > with fixed width 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"rectangle rectangleCustom\"\n    style={\n      {\n        \"height\": undefined,\n        \"width\": 100,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when text > with CUSTOM size 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"text textCustom\"\n    style={\n      {\n        \"height\": undefined,\n        \"width\": undefined,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when text > with H1 size 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"text textH1\"\n    style={\n      {\n        \"height\": undefined,\n        \"width\": undefined,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when text > with H2 size 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"text textH2\"\n    style={\n      {\n        \"height\": undefined,\n        \"width\": undefined,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when text > with H3 size 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"text textH3\"\n    style={\n      {\n        \"height\": undefined,\n        \"width\": undefined,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when text > with H4 size 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"text textH4\"\n    style={\n      {\n        \"height\": undefined,\n        \"width\": undefined,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when text > with H5 size 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"text textH5\"\n    style={\n      {\n        \"height\": undefined,\n        \"width\": undefined,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when text > with empty props 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"text textCustom\"\n    style={\n      {\n        \"height\": undefined,\n        \"width\": undefined,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when text > with fixed height 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"text textCustom\"\n    style={\n      {\n        \"height\": 100,\n        \"width\": undefined,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when text > with fixed height and width 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"text textCustom\"\n    style={\n      {\n        \"height\": 100,\n        \"width\": 100,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when text > with fixed width 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"text textCustom\"\n    style={\n      {\n        \"height\": undefined,\n        \"width\": 100,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly with empty props 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"rectangle rectangleCustom\"\n    style={\n      {\n        \"height\": undefined,\n        \"width\": undefined,\n      }\n    }\n  />\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Skeleton/__tests__/__snapshots__/Skeleton.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`Skeleton renders correctly > renders correctly when circle > with empty props 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"circle circleCustom\"\n    style={\n      {\n        \"height\": undefined,\n        \"width\": undefined,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when circle > with fixed height 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"circle circleCustom\"\n    style={\n      {\n        \"height\": 100,\n        \"width\": undefined,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when circle > with fixed height and width 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"circle circleCustom\"\n    style={\n      {\n        \"height\": 100,\n        \"width\": 100,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when circle > with fixed width 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"circle circleCustom\"\n    style={\n      {\n        \"height\": undefined,\n        \"width\": 100,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when rectangle > with empty props 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"rectangle rectangleCustom\"\n    style={\n      {\n        \"height\": undefined,\n        \"width\": undefined,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when rectangle > with fixed height 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"rectangle rectangleCustom\"\n    style={\n      {\n        \"height\": 100,\n        \"width\": undefined,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when rectangle > with fixed height and width 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"rectangle rectangleCustom\"\n    style={\n      {\n        \"height\": 100,\n        \"width\": 100,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when rectangle > with fixed width 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"rectangle rectangleCustom\"\n    style={\n      {\n        \"height\": undefined,\n        \"width\": 100,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when text > with CUSTOM size 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"text textCustom\"\n    style={\n      {\n        \"height\": undefined,\n        \"width\": undefined,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when text > with H1 size 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"text textH1\"\n    style={\n      {\n        \"height\": undefined,\n        \"width\": undefined,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when text > with H2 size 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"text textH2\"\n    style={\n      {\n        \"height\": undefined,\n        \"width\": undefined,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when text > with H3 size 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"text textH3\"\n    style={\n      {\n        \"height\": undefined,\n        \"width\": undefined,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when text > with H4 size 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"text textH4\"\n    style={\n      {\n        \"height\": undefined,\n        \"width\": undefined,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when text > with H5 size 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"text textH5\"\n    style={\n      {\n        \"height\": undefined,\n        \"width\": undefined,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when text > with empty props 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"text textCustom\"\n    style={\n      {\n        \"height\": undefined,\n        \"width\": undefined,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when text > with fixed height 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"text textCustom\"\n    style={\n      {\n        \"height\": 100,\n        \"width\": undefined,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when text > with fixed height and width 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"text textCustom\"\n    style={\n      {\n        \"height\": 100,\n        \"width\": 100,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly when text > with fixed width 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"text textCustom\"\n    style={\n      {\n        \"height\": undefined,\n        \"width\": 100,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`Skeleton renders correctly > renders correctly with empty props 1`] = `\n<div\n  className=\"skeleton\"\n  data-testid=\"skeleton\"\n>\n  <div\n    className=\"rectangle rectangleCustom\"\n    style={\n      {\n        \"height\": undefined,\n        \"width\": undefined,\n      }\n    }\n  />\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Skeleton/index.ts",
    "content": "export { default as Skeleton, type SkeletonProps } from \"./Skeleton\";\n\nexport * from \"./Skelton.types\";\n"
  },
  {
    "path": "packages/core/src/components/SlideTransition/SlideTransition.module.scss",
    "content": ".slide {\n  height: 100%;\n  width: 100%;\n}\n\n.slideForward {\n  animation: slideInForward 0.25s cubic-bezier(0, 0, 0.4, 1) forwards;\n}\n\n.slideBackward {\n  animation: slideInBackward 0.25s cubic-bezier(0, 0, 0.4, 1) forwards;\n}\n\n@keyframes slideInForward {\n  from {\n    transform: translateX(3%);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n}\n\n@keyframes slideInBackward {\n  from {\n    transform: translateX(-3%);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/SlideTransition/SlideTransition.tsx",
    "content": "import React, { forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport { type SlideTransitionProps } from \"./SlideTransition.types\";\nimport styles from \"./SlideTransition.module.scss\";\n\nconst SlideTransition = forwardRef(\n  ({ direction, style, children, className }: SlideTransitionProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n    return (\n      <div\n        ref={ref}\n        className={cx(styles.slide, direction === \"forward\" ? styles.slideForward : styles.slideBackward, className)}\n        style={style}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nexport default SlideTransition;\n"
  },
  {
    "path": "packages/core/src/components/SlideTransition/SlideTransition.types.ts",
    "content": "import type React from \"react\";\nimport { type VibeComponentProps } from \"../../types\";\n\nexport interface SlideTransitionProps extends VibeComponentProps {\n  /**\n   * The direction of the slide transition.\n   */\n  direction: SlideDirection;\n  /**\n   * Custom inline styles applied to the transition container.\n   */\n  style?: React.CSSProperties;\n  /**\n   * The content inside the transition container.\n   */\n  children: React.ReactNode;\n}\n\n/**\n * Defines the possible slide transition directions.\n */\nexport type SlideDirection = \"forward\" | \"backward\";\n"
  },
  {
    "path": "packages/core/src/components/Slider/SelectionIndicator.module.scss",
    "content": ".selectionIndicator.selectionIndicator.selectionIndicator {\n  text-align: center;\n  padding: var(--space-8);\n}\n"
  },
  {
    "path": "packages/core/src/components/Slider/SelectionIndicator.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { debounce } from \"es-toolkit\";\nimport TextField from \"../TextField/TextField\";\nimport { useSliderActions, useSliderSelection } from \"./SliderContext\";\nimport { type InfixKind } from \"./Slider.types\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport styles from \"./SelectionIndicator.module.scss\";\n\nconst VALUE_UPDATE_DELAY = 300;\n\nfunction getCurrentLabel(isPostfix: boolean, ranged: boolean, value: number | number[], valueText: string | string[]) {\n  if (!ranged) {\n    return [value as number, valueText as string];\n  }\n  if (isPostfix) {\n    return [(value as number[])[1], (valueText as string[])[1]];\n  }\n  return [(value as number[])[0], (valueText as string[])[0]];\n}\n\nfunction parseValue(valueText: string) {\n  return valueText.replace(/\\D/g, \"\");\n}\n\nexport interface SelectionIndicatorProps extends VibeComponentProps {\n  /**\n   * Determines whether the selection indicator is a prefix or postfix.\n   */\n  kind?: InfixKind;\n  /**\n   * The key for the selection indicator (used for React key uniqueness).\n   */\n  key?: InfixKind;\n}\n\nconst SelectionIndicator: React.FC<SelectionIndicatorProps> = ({ kind = \"prefix\" }) => {\n  const isPostfix = kind === \"postfix\";\n  const { ranged, value, valueText } = useSliderSelection();\n  const [, currentTextValue] = getCurrentLabel(isPostfix, ranged, value, valueText);\n  const { changeThumbValue } = useSliderActions();\n  const handleChange = useMemo(\n    () =>\n      debounce(newValueText => {\n        const newValue = parseValue(newValueText);\n        const thumbIndex = isPostfix ? 1 : 0;\n        changeThumbValue(newValue, thumbIndex, true);\n      }, VALUE_UPDATE_DELAY),\n    [changeThumbValue, isPostfix]\n  );\n  return <TextField onChange={handleChange} value={String(currentTextValue)} className={styles.selectionIndicator} />;\n};\n\nexport default SelectionIndicator;\n"
  },
  {
    "path": "packages/core/src/components/Slider/Slider.module.scss",
    "content": ".slider {\n  align-items: center;\n  display: flex;\n  max-width: 500px;\n  min-width: 200px;\n  width: 100%;\n}\n\n.valueShown {\n  &.positionTop {\n    margin-top: 10px;\n  }\n\n  &.positionBottom {\n    margin-bottom: 10px;\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Slider/Slider.tsx",
    "content": "import React, { forwardRef, type ReactElement, useMemo, useRef } from \"react\";\nimport { useMergeRef, NOOP, getStyle } from \"@vibe/shared\";\n\nimport { ensureDefaultValue } from \"./SliderHelpers\";\nimport { SliderProvider } from \"./SliderContext\";\nimport SliderBase from \"./SliderBase/SliderBase\";\nimport SliderInfix from \"./SliderInfix\";\nimport { type IconType } from \"@vibe/icon\";\nimport cx from \"classnames\";\nimport styles from \"./Slider.module.scss\";\nimport { type SliderColor, type SliderLabelColor, type SliderLabelPosition, type SliderSize } from \"./Slider.types\";\n\nimport { camelCase } from \"es-toolkit\";\n\nexport type SliderProps = {\n  /**\n   * Define a string that labels the current element (Slider)\n   */\n  \"aria-label\"?: string;\n  /**\n   * ElementId of Node that have the text needed for labeling the current element (Slider)\n   */\n  \"aria-labelledby\"?: string;\n  /**\n   * Custom `class name` to be added to the component-root-node\n   */\n  className?: string;\n  /**\n   * Color Mode (primary/positive/negative) of the component (Slider)\n   */\n  color?: SliderColor;\n  /**\n   * Unique TestId - can be used as Selector for integration tests and other needs (tracking, etc)\n   */\n  \"data-testid\"?: string;\n  defaultValue?: number | number[];\n  /**\n   * Formatter function `value => formattedValue`\n   * default formatter return `${value}%`\n   */\n  /**\n   * If set to true, Component (Slider) will be disabled\n   *  - impossible to change value of component (Slider)\n   *  - visual changes (opacity)\n   */\n  disabled?: boolean;\n  /**\n   * Attribute `id` to be added to the component-root-node\n   */\n  id?: string;\n  /**\n   * Max range value of the component (Slider)\n   */\n  max?: number;\n  /**\n   * Min range value of the component (Slider)\n   */\n  min?: number;\n  /**\n   * Optional onChange callback (for outer trigger or Controlled mode)\n   * - required in Controlled Mode\n   */\n  onChange?: (value: number | number[]) => void;\n  /**\n   * If true switch slider to RRange mode (two Thumbs)\n   */\n  ranged?: boolean;\n  /**\n   * The granularity with which the slider can step through values.\n   * (A \"discrete\" slider.) The min prop serves as the origin for the valid values.\n   * We recommend (max - min) to be evenly divisible by the step.\n   */\n  step?: number;\n  /**\n   * Always show `value` instead of Tooltip\n   */\n  showValue?: boolean;\n  /**\n   * Position of the `value` when `showValue` is true\n   */\n  valueLabelPosition?: SliderLabelPosition;\n  /**\n   * Color of the `value` when `showValue` is true\n   */\n  valueLabelColor?: SliderLabelColor;\n  /**\n   * Size small/medium/large of the component (Slider)\n   */\n  size?: SliderSize;\n  /**\n   * Current/selected value of the range of the Component (Slider)\n   *   - should be used in Controlled Mode only\n   *   - in ranged mode should be an array of two numbers\n   */\n  value?: number | number[];\n  /**\n   * Function to format the value, e.g. add %. By default, returns `${value}%`\n   */\n  valueFormatter?: (value: number) => string;\n  /**\n   * Text/presentation of current/selected value\n   *  - should be used in Controlled Mode only\n   */\n  valueText?: string;\n  /**\n   * Show selected from Slider range value\n   */\n  indicateSelection?: boolean;\n  /**\n   * Options for initial/start/prefix element, it can be one of:\n   *  - Any Component (react component, node, text, number etc.)\n   *  - Or it can be an object of options for Icons component (see Icon components props)\n   *  - Or it can be an object for Label (Icon, Heading - and other components)\n   *  - Or it can be Render Props Function witch are getting value and valueText\n   */\n  prefix?: { icon: IconType } | string | ((value: number, valueText: string) => void) | ReactElement;\n  /**\n   * Options for postfix/end/finishing element. Same as prefix element.\n   */\n  postfix?: { icon: IconType } | string | ((value: number, valueText: string) => void) | ReactElement;\n  /**\n   * Width of SelectionIndicator (i.e. TextField)\n   */\n  selectionIndicatorWidth?: string;\n};\n\nconst Slider = forwardRef(\n  (\n    {\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledby,\n      className,\n      color,\n      \"data-testid\": dataTestId = \"monday-slider\",\n      disabled = false,\n      id,\n      max = 100,\n      min = 0,\n      onChange = NOOP,\n      ranged = false,\n      step = 1,\n      showValue = false,\n      valueLabelPosition = \"top\",\n      valueLabelColor = \"primary\",\n      size = \"small\",\n      value,\n      defaultValue = 0,\n      valueFormatter = (value: number) => `${value}%`,\n      valueText,\n      indicateSelection = false,\n      prefix,\n      postfix,\n      selectionIndicatorWidth = \"60px\"\n    }: SliderProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n    const infixOptions = useMemo(\n      () => ({ prefix, postfix, indicateSelection, selectionIndicatorWidth }),\n      [prefix, postfix, indicateSelection, selectionIndicatorWidth]\n    );\n    return (\n      <SliderProvider\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        color={color}\n        data-testid={dataTestId}\n        disabled={disabled}\n        infixOptions={infixOptions}\n        max={max}\n        min={min}\n        onChange={onChange}\n        ranged={ranged}\n        showValue={showValue}\n        valueLabelPosition={valueLabelPosition}\n        valueLabelColor={valueLabelColor}\n        size={size}\n        step={step}\n        value={value}\n        defaultValue={ensureDefaultValue(defaultValue, min, max, ranged)}\n        valueFormatter={valueFormatter}\n        valueText={valueText}\n      >\n        <div\n          className={cx(\n            styles.slider,\n            { [styles.valueShown]: showValue },\n            getStyle(styles, camelCase(\"position-\" + valueLabelPosition)),\n            className\n          )}\n          data-testid={dataTestId}\n          id={id}\n          ref={mergedRef}\n        >\n          <SliderInfix kind=\"prefix\" />\n          <SliderBase />\n          <SliderInfix kind=\"postfix\" />\n        </div>\n      </SliderProvider>\n    );\n  }\n);\n\nexport default Slider;\n"
  },
  {
    "path": "packages/core/src/components/Slider/Slider.types.ts",
    "content": "import { type BASE_SIZES } from \"../../constants\";\nimport { type DialogPosition } from \"@vibe/dialog\";\nimport { type TypographyColor } from \"@vibe/typography\";\n\nexport type SliderColor = \"primary\" | \"negative\" | \"positive\";\n\nexport type SliderLabelColor = Extract<TypographyColor, \"primary\" | \"secondary\">;\n\nexport type SliderLabelPosition = Extract<DialogPosition, \"top\" | \"bottom\">;\n\nexport type SliderSize = (typeof BASE_SIZES)[keyof typeof BASE_SIZES];\n\nexport type InfixKind = \"prefix\" | \"postfix\";\n"
  },
  {
    "path": "packages/core/src/components/Slider/SliderBase/SliderBase.module.scss",
    "content": ".base {\n  display: flex;\n  touch-action: none;\n  -webkit-tap-highlight-color: transparent;\n  width: 100%;\n}\n\n.disabled {\n  * {\n    pointer-events: none;\n  }\n  cursor: not-allowed !important;\n  opacity: var(--disabled-component-opacity);\n}\n\n.small {\n  padding: 0 var(--space-8);\n}\n\n.medium {\n  padding: 0 12px;\n}\n\n.large {\n  padding: 0 12px;\n}\n"
  },
  {
    "path": "packages/core/src/components/Slider/SliderBase/SliderBase.tsx",
    "content": "import React, { type FC, forwardRef, useCallback } from \"react\";\nimport {\n  isArrowDownEvent,\n  isArrowLeftEvent,\n  isArrowRightEvent,\n  isArrowUpEvent,\n  isEndEvent,\n  isHomeEvent,\n  isPageDownEvent,\n  isPageUpEvent,\n  getStyle\n} from \"@vibe/shared\";\nimport { useSliderActions, useSliderSelection, useSliderUi } from \"../SliderContext\";\nimport { calcDimensions, calculatePageStep, getNearest, moveToPx } from \"../SliderHelpers\";\nimport { useSliderRail } from \"../SliderHooks\";\nimport SliderRail from \"./SliderRail\";\nimport SliderTrack from \"./SliderTrack\";\nimport SliderFilledTrack from \"./SliderFilledTrack\";\nimport SliderThumb from \"./SliderThumb\";\nimport type VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport cx from \"classnames\";\nimport styles from \"./SliderBase.module.scss\";\n\nexport type SliderBaseProps = VibeComponentProps;\n\nconst SliderBase: FC<SliderBaseProps> = forwardRef(({ className }, _ref) => {\n  const { color, disabled, size, shapeTestId } = useSliderUi();\n  const { min, max, ranged, step, value } = useSliderSelection();\n  const { changeThumbValue, drugThumb, decreaseValue, increaseValue } = useSliderActions();\n  const { railCoords, railRef } = useSliderRail();\n  const { dimension, offset, positions, thumbKeys } = calcDimensions(max, min, ranged, value);\n\n  const handlePointerMove = useCallback(\n    (e: PointerEvent) => {\n      const offsetInPx = Math.round(e.clientX - railCoords.left);\n      const newValue = moveToPx(offsetInPx, min, max, railCoords, step);\n      drugThumb(newValue);\n    },\n    [drugThumb, min, max, railCoords, step]\n  );\n\n  const handleRailClick = useCallback(\n    (e: React.MouseEvent) => {\n      const offsetInPx = e.clientX - railCoords.left;\n      const newValue = moveToPx(offsetInPx, min, max, railCoords, step);\n      const thumbIndex = getNearest(newValue, ranged, value);\n      changeThumbValue(newValue, thumbIndex);\n    },\n    [changeThumbValue, min, max, railCoords, ranged, step, value]\n  );\n\n  function handleKeyDown(e: React.KeyboardEvent) {\n    if (isArrowUpEvent(e) || isArrowRightEvent(e)) {\n      return increaseValue();\n    }\n    if (isArrowDownEvent(e) || isArrowLeftEvent(e)) {\n      return decreaseValue();\n    }\n    if (isPageUpEvent(e)) {\n      e.preventDefault();\n      return increaseValue(calculatePageStep(max, min, step));\n    }\n    if (isPageDownEvent(e)) {\n      e.preventDefault();\n      return decreaseValue(calculatePageStep(max, min, step));\n    }\n    if (isHomeEvent(e)) {\n      e.preventDefault();\n      return changeThumbValue(min);\n    }\n    if (isEndEvent(e)) {\n      e.preventDefault();\n      return changeThumbValue(max);\n    }\n  }\n\n  return (\n    <div\n      className={cx(\n        styles.base,\n        { [getStyle(styles, size)]: size, [getStyle(styles, color)]: color, [styles.disabled]: disabled },\n        className\n      )}\n      data-testid={shapeTestId(\"base\")}\n      onKeyDown={handleKeyDown}\n    >\n      <SliderRail onClick={handleRailClick} size={size} ref={railRef}>\n        <SliderTrack color={color} />\n        {railRef.current && (\n          <>\n            <SliderFilledTrack dimension={dimension} offset={offset} color={color} />\n            {positions.map((position, index) => {\n              return (\n                <SliderThumb\n                  key={thumbKeys[index]}\n                  index={index}\n                  onMove={handlePointerMove}\n                  position={position}\n                  color={color}\n                  size={size}\n                />\n              );\n            })}\n          </>\n        )}\n      </SliderRail>\n    </div>\n  );\n});\n\nexport default SliderBase;\n"
  },
  {
    "path": "packages/core/src/components/Slider/SliderBase/SliderFilledTrack.module.scss",
    "content": ".filledTrack {\n  position: absolute;\n  border-radius: inherit;\n  background-color: var(--primary-color);\n  height: inherit;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 100%;\n}\n\n.positive {\n  background-color: var(--positive-color);\n}\n\n.negative {\n  background-color: var(--negative-color);\n}\n"
  },
  {
    "path": "packages/core/src/components/Slider/SliderBase/SliderFilledTrack.tsx",
    "content": "import React, { type FC } from \"react\";\nimport type VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport cx from \"classnames\";\nimport { getStyle } from \"@vibe/shared\";\nimport styles from \"./SliderFilledTrack.module.scss\";\nimport { type SliderColor } from \"../Slider.types\";\n\nfunction defineFilledTrackProps(dimension: number, offset: number, reverse: boolean) {\n  if (reverse) {\n    return {\n      right: `${offset}%`,\n      width: `${dimension - offset}%`\n    };\n  }\n  return {\n    left: `${offset}%`,\n    width: `${dimension - offset}%`\n  };\n}\n\nexport interface SliderFilledTrackProps extends VibeComponentProps {\n  /**\n   * The size of the filled track, based on the selected value.\n   */\n  dimension?: number;\n  /**\n   * The offset from the start of the track.\n   */\n  offset?: number;\n  /**\n   * If true, the filled track starts from the end instead of the beginning.\n   */\n  reverse?: boolean;\n  /**\n   * The color of the filled track.\n   */\n  color: SliderColor;\n}\n\nconst SliderFilledTrack: FC<SliderFilledTrackProps> = ({\n  className,\n  dimension = 0,\n  offset = 0,\n  reverse = false,\n  color\n}) => {\n  const filledTrackStyle = defineFilledTrackProps(dimension, offset, reverse);\n  return <div className={cx(styles.filledTrack, getStyle(styles, color), className)} style={filledTrackStyle} />;\n};\n\nexport default SliderFilledTrack;\n"
  },
  {
    "path": "packages/core/src/components/Slider/SliderBase/SliderRail.module.scss",
    "content": ".rail {\n  cursor: pointer;\n  display: inline-block;\n  position: relative;\n  touch-action: none;\n  -webkit-tap-highlight-color: transparent;\n  width: 100%;\n}\n\n.small {\n  border-radius: 2px;\n  height: 2px;\n  padding: 8px 0;\n}\n\n.medium {\n  border-radius: 2px;\n  height: 4px;\n  padding: 12px 0;\n}\n\n.large {\n  border-radius: 8px;\n  height: 8px;\n  padding: 10px 0;\n}\n"
  },
  {
    "path": "packages/core/src/components/Slider/SliderBase/SliderRail.tsx",
    "content": "import React, { type ForwardedRef, forwardRef, type ReactElement } from \"react\";\nimport { NOOP, getStyle } from \"@vibe/shared\";\nimport { useSliderUi } from \"../SliderContext\";\nimport type VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport cx from \"classnames\";\n\nimport styles from \"./SliderRail.module.scss\";\nimport { type SliderSize } from \"../Slider.types\";\n\nexport interface SliderRailProps extends VibeComponentProps {\n  /**\n   * Callback fired when the rail is clicked.\n   */\n  onClick?: (event: React.MouseEvent) => void;\n  /**\n   * The child elements inside the slider rail.\n   */\n  children?: ReactElement | ReactElement[];\n  /**\n   * The size of the slider rail.\n   */\n  size: SliderSize;\n}\n\nconst SliderRail = forwardRef<unknown, SliderRailProps>(\n  ({ className, children, onClick = NOOP, size }: SliderRailProps, ref: ForwardedRef<HTMLDivElement>) => {\n    const { shapeTestId } = useSliderUi();\n    function handleClick(e: React.MouseEvent) {\n      onClick(e);\n    }\n\n    return (\n      // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n      <div\n        data-testid={shapeTestId(\"rail\")}\n        className={cx(styles.rail, getStyle(styles, size), className)}\n        onClick={handleClick}\n        ref={ref}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nexport default SliderRail;\n"
  },
  {
    "path": "packages/core/src/components/Slider/SliderBase/SliderThumb.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n.thumb {\n  position: absolute;\n  border: 3px solid;\n  border-radius: 50%;\n  border-color: var(--primary-color);\n  background-color: var(--primary-background-color);\n  font-size: 14px;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  transition: transform var(--motion-productive-long) var(--motion-timing-enter);\n  font-family: var(--font-family);\n}\n\n.dragging {\n  cursor: grabbing !important;\n  transform: translate(-50%, -50%) scale(1.15, 1.15);\n  transform-origin: center center;\n  transition: transform var(--motion-productive-long) var(--motion-timing-enter);\n  box-shadow: var(--box-shadow-small);\n}\n.focused {\n  border-color: var(--primary-hover-color);\n  cursor: grab;\n  box-shadow: var(--box-shadow-small);\n}\n\n// thumb (for NOT-disabled)\n.notDisabledThumb {\n  @include focus-style(50%);\n  &:hover {\n    border-color: var(--primary-hover-color);\n    cursor: grab;\n    box-shadow: var(--box-shadow-small);\n  }\n}\n\n.positive {\n  border-color: var(--positive-color);\n}\n\n.positive.notDisabledThumb {\n  &:hover {\n    border-color: var(--positive-color-hover);\n  }\n}\n\n.negative {\n  border-color: var(--negative-color);\n}\n\n.negative.notDisabledThumb {\n  &:hover {\n    border-color: var(--negative-color-hover);\n  }\n}\n\n.small {\n  height: 16px;\n  width: 16px;\n}\n\n.medium {\n  height: 20px;\n  width: 20px;\n}\n\n.large {\n  height: 24px;\n  width: 24px;\n}\n\n.label {\n  left: 50%;\n  max-width: 64px;\n  overflow: hidden;\n  position: absolute;\n  text-overflow: ellipsis;\n  transform: translate(-50%, 0);\n  white-space: nowrap;\n\n  &.positionTop {\n    bottom: calc(100% + 8px);\n  }\n\n  &.positionBottom {\n    top: calc(100% + 8px);\n  }\n\n  &.colorPrimary {\n    color: var(--primary-text-color);\n  }\n\n  &.colorSecondary {\n    color: var(--secondary-text-color);\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Slider/SliderBase/SliderThumb.tsx",
    "content": "import React, { type FC, useEffect, useRef } from \"react\";\nimport { NOOP, getStyle } from \"@vibe/shared\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { TOOLTIP_SHOW_DELAY } from \"../SliderConstants\";\nimport { useSliderActions, useSliderSelection, useSliderUi } from \"../SliderContext\";\nimport type VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport cx from \"classnames\";\nimport styles from \"./SliderThumb.module.scss\";\n\nimport { type SliderColor, type SliderSize } from \"../Slider.types\";\nimport { camelCase } from \"es-toolkit\";\n\nexport interface SliderThumbProps extends VibeComponentProps {\n  /**\n   * The index of the thumb (used in range sliders).\n   */\n  index?: number;\n  /**\n   * Callback fired when the thumb is moved.\n   */\n  onMove?: (event: PointerEvent) => void;\n  /**\n   * The position of the thumb, represented as an offset percentage from the start of the track.\n   */\n  position?: number;\n  /**\n   * The size of the slider thumb.\n   */\n  size: SliderSize;\n  /**\n   * The color theme of the slider thumb.\n   */\n  color: SliderColor;\n}\n\nconst SliderThumb: FC<SliderThumbProps> = ({ className, index = 0, onMove = NOOP, position = 0, size, color }) => {\n  const { max, min, ranged, value: valueOrValues, valueText: valueOrValuesText } = useSliderSelection();\n  const value = ranged ? (valueOrValues as unknown as number[])[index] : (valueOrValues as number);\n  const valueText = ranged ? (valueOrValuesText as unknown as string[])[index] : (valueOrValuesText as string);\n  const {\n    active,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledby,\n    disabled,\n    dragging,\n    focused,\n    shapeTestId,\n    showValue,\n    valueLabelPosition,\n    valueLabelColor\n  } = useSliderUi();\n  const { setActive, setFocused, setDragging } = useSliderActions();\n  const ref = useRef(null);\n\n  function handleBlur() {\n    setFocused(null);\n    setActive(null);\n  }\n\n  function handleFocus() {\n    setFocused(index);\n    setActive(index);\n  }\n\n  function handlePointerLeave() {\n    setActive(null);\n  }\n\n  function handlePointerDown(e: React.PointerEvent) {\n    e.stopPropagation();\n    setDragging(index);\n    document.addEventListener(\"pointermove\", onMove);\n    document.addEventListener(\"pointerup\", stopMove);\n  }\n\n  function stopMove() {\n    setDragging(null);\n    document.removeEventListener(\"pointermove\", onMove);\n    document.removeEventListener(\"pointerup\", stopMove);\n  }\n\n  useEffect(() => {\n    if (focused === index && ref && ref.current) {\n      ref.current.focus();\n    }\n  }, [focused, index]);\n\n  return (\n    <Tooltip\n      open={active === index || dragging === index}\n      content={showValue ? null : valueText}\n      position=\"top\"\n      showDelay={TOOLTIP_SHOW_DELAY}\n      addKeyboardHideShowTriggersByDefault={false}\n    >\n      <div\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-valuemax={max}\n        aria-valuemin={min}\n        aria-valuenow={value}\n        aria-valuetext={valueText}\n        aria-disabled={disabled}\n        className={cx(\n          styles.thumb,\n          getStyle(styles, color),\n          getStyle(styles, size),\n          {\n            [styles.dragging]: dragging === index,\n            [styles.focused]: focused,\n            [styles.notDisabledThumb]: !disabled\n          },\n          className\n        )}\n        data-testid={shapeTestId(`thumb-${index}`)}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onPointerDown={handlePointerDown}\n        onPointerLeave={handlePointerLeave}\n        ref={ref}\n        role=\"slider\"\n        style={{ left: `${position}%` }}\n        tabIndex={disabled ? -1 : 0}\n      >\n        {showValue && (\n          <label\n            className={cx(\n              styles.label,\n              getStyle(styles, camelCase(\"color-\" + valueLabelColor)),\n              getStyle(styles, camelCase(\"position-\" + valueLabelPosition))\n            )}\n          >\n            {valueText}\n          </label>\n        )}\n      </div>\n    </Tooltip>\n  );\n};\n\nexport default SliderThumb;\n"
  },
  {
    "path": "packages/core/src/components/Slider/SliderBase/SliderTrack.module.scss",
    "content": ".track {\n  position: absolute;\n  border-radius: inherit;\n  background-color: var(--primary-selected-color);\n  height: inherit;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 100%;\n}\n\n.positive {\n  background-color: var(--positive-color-selected);\n}\n\n.negative {\n  background-color: var(--negative-color-selected);\n}\n"
  },
  {
    "path": "packages/core/src/components/Slider/SliderBase/SliderTrack.tsx",
    "content": "import React, { type FC } from \"react\";\nimport type VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport cx from \"classnames\";\nimport { getStyle } from \"@vibe/shared\";\nimport styles from \"./SliderTrack.module.scss\";\nimport { type SliderColor } from \"../Slider.types\";\n\nexport interface SliderTrackProps extends VibeComponentProps {\n  /**\n   * The color of the slider track.\n   */\n  color: SliderColor;\n}\n\nconst SliderTrack: FC<SliderTrackProps> = React.memo(({ className, color }) => {\n  return <div className={cx(styles.track, getStyle(styles, color), className)} />;\n});\n\nexport default SliderTrack;\n"
  },
  {
    "path": "packages/core/src/components/Slider/SliderConstants.ts",
    "content": "import { type IconType } from \"@vibe/icon\";\nimport { type ReactElement } from \"react\";\nimport {\n  type SliderSize,\n  type SliderColor as SliderColorType,\n  type SliderLabelPosition,\n  type SliderLabelColor\n} from \"./Slider.types\";\n\nexport const BEM_PREFIX = \"monday\";\n\nexport const COMPONENT_ID = \"slider\";\n\nexport const UPDATE_SLIDER_SIZE_DEBOUNCE = 200;\n\nexport const TOOLTIP_SHOW_DELAY = 300;\n\nexport type SliderContextSelection = {\n  max: number;\n  min: number;\n  ranged: boolean;\n  step: number;\n  value: number | number[];\n  valueText: string | string[];\n};\n\nexport type SliderContextUI = {\n  active: number;\n  \"aria-label\": string;\n  \"aria-labelledby\": string;\n  color: SliderColorType;\n  disabled: boolean;\n  dragging: number;\n  focused: number;\n  size: SliderSize;\n  shapeTestId: (subElement: string) => string;\n  showValue: boolean;\n  valueLabelPosition: SliderLabelPosition;\n  valueLabelColor: SliderLabelColor;\n};\n\nexport type SliderContextActions = {\n  setActive: (value: number) => void;\n  setFocused: (value: number) => void;\n  setDragging: (value: number) => void;\n  changeThumbValue: (newValue: number | string, thumbIndex?: number, cancelFocus?: boolean) => void;\n  drugThumb: (newValue: number | number[]) => void;\n  decreaseValue: (consumerStep?: number) => void;\n  increaseValue: (consumerStep?: number) => void;\n};\n\nexport type SliderContextInfix = {\n  /**\n   * Show selected from Slider range value\n   */\n  indicateSelection?: boolean;\n  /**\n   * Options for initial/start/prefix element, it can be one of:\n   *  - Any Component (react component, node, text, number etc.)\n   *  - Or it can be an object of options for Icons component (see Icon components props)\n   *  - Or it can be an object for Label (Icon, Heading - and other components)\n   *  - Or it can be Render Props Function witch are getting value and valueText\n   */\n  prefix?:\n    | { icon: IconType }\n    | string\n    | ((value: number | number[], valueText: string | string[]) => ReactElement)\n    | ReactElement;\n  /**\n   * Options for postfix/end/finishing element. Same as prefix element.\n   */\n  postfix?:\n    | { icon: IconType }\n    | string\n    | ((value: number | number[], valueText: string | string[]) => ReactElement)\n    | ReactElement;\n  /**\n   * Width of SelectionIndicator (i.e. TextField)\n   */\n  selectionIndicatorWidth?: string;\n};\n"
  },
  {
    "path": "packages/core/src/components/Slider/SliderContext.tsx",
    "content": "import React, { createContext, type ReactElement, useContext, useMemo, useState } from \"react\";\nimport { createTestIdHelper } from \"@vibe/shared\";\nimport { useDragging, useSliderActionsContextValue, useSliderValues } from \"./SliderHooks\";\nimport { type SliderProps } from \"./Slider\";\nimport {\n  type SliderContextActions,\n  type SliderContextInfix,\n  type SliderContextSelection,\n  type SliderContextUI\n} from \"./SliderConstants\";\nimport { type IconType } from \"@vibe/icon\";\n\nconst UiContext = createContext({});\nconst SelectionContext = createContext({});\nconst ActionsContext = createContext({});\nconst InfixContext = createContext({});\n\nexport interface SliderProviderProps extends SliderProps {\n  /**\n   * The child elements inside the slider provider.\n   */\n  children?: ReactElement | ReactElement[];\n  /**\n   * Configuration options for prefix, postfix, and selection indicator.\n   */\n  infixOptions?: {\n    /**\n     * If true, displays the selected value from the slider range.\n     */\n    indicateSelection?: boolean;\n    /**\n     * Configuration for the prefix (start) element, which can be:\n     * - A React component, text, number, or node.\n     * - An object with an icon.\n     * - A function that receives the value and valueText.\n     */\n    prefix?: { icon: IconType } | string | ((value: number, valueText: string) => void) | ReactElement;\n    /**\n     * Configuration for the postfix (end) element, similar to prefix.\n     */\n    postfix?: { icon: IconType } | string | ((value: number, valueText: string) => void) | ReactElement;\n    /**\n     * The width of the selection indicator.\n     */\n    selectionIndicatorWidth?: string;\n  };\n}\n\nexport function SliderProvider({\n  children,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledby,\n  color,\n  \"data-testid\": dataTestId,\n  defaultValue,\n  disabled,\n  max,\n  min,\n  onChange,\n  ranged,\n  showValue,\n  valueLabelPosition,\n  valueLabelColor,\n  size,\n  step,\n  value,\n  valueFormatter,\n  valueText,\n  infixOptions\n}: SliderProviderProps) {\n  const shapeTestId = createTestIdHelper(dataTestId);\n  const { actualValue, actualValueText, getSelectedValue, setSelectedValue } = useSliderValues(\n    defaultValue,\n    value,\n    valueFormatter,\n    valueText\n  );\n\n  const [active, setActive] = useState<number>(null);\n  const [focused, setFocused] = useState<number>(null);\n  const [dragging, setDragging, getDragging] = useDragging();\n\n  const uiContextValue: SliderContextUI = useMemo(\n    () => ({\n      active,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledby,\n      color,\n      disabled,\n      dragging,\n      focused,\n      size,\n      shapeTestId,\n      showValue,\n      valueLabelPosition,\n      valueLabelColor\n    }),\n    [\n      active,\n      ariaLabel,\n      ariaLabelledby,\n      color,\n      disabled,\n      dragging,\n      focused,\n      size,\n      shapeTestId,\n      showValue,\n      valueLabelPosition,\n      valueLabelColor\n    ]\n  );\n\n  const selectionContextValue: SliderContextSelection = useMemo(\n    () => ({\n      max,\n      min,\n      ranged,\n      step,\n      value: actualValue,\n      valueText: actualValueText\n    }),\n    [max, min, ranged, step, actualValue, actualValueText]\n  );\n\n  const actionsContextValue: SliderContextActions = useSliderActionsContextValue(\n    actualValue,\n    focused,\n    getDragging,\n    getSelectedValue,\n    max,\n    min,\n    onChange,\n    ranged,\n    setActive,\n    setFocused,\n    setDragging,\n    setSelectedValue,\n    step\n  );\n\n  return (\n    <UiContext.Provider value={uiContextValue}>\n      <SelectionContext.Provider value={selectionContextValue}>\n        <ActionsContext.Provider value={actionsContextValue}>\n          <InfixContext.Provider value={infixOptions}>{children}</InfixContext.Provider>\n        </ActionsContext.Provider>\n      </SelectionContext.Provider>\n    </UiContext.Provider>\n  );\n}\n\nexport function useSliderUi(): SliderContextUI {\n  return useContext(UiContext) as SliderContextUI;\n}\n\nexport function useSliderInfix(): SliderContextInfix {\n  return useContext(InfixContext) as SliderContextInfix;\n}\n\nexport function useSliderSelection(): SliderContextSelection {\n  return useContext(SelectionContext) as SliderContextSelection;\n}\n\nexport function useSliderActions(): SliderContextActions {\n  return useContext(ActionsContext) as SliderContextActions;\n}\n"
  },
  {
    "path": "packages/core/src/components/Slider/SliderHelpers.ts",
    "content": "export function _calcDimension(max: number, min: number, value: number): [number, number] {\n  const valuePoints = max - min;\n  const dimension = Math.round(((value - min) * 100) / valuePoints);\n  return [dimension, dimension];\n}\n\nfunction _ensureSingleValueText(valueText: string, value: number, formatter: (value: number) => string): string {\n  if (valueText) {\n    return valueText;\n  }\n  if (typeof value === \"undefined\") {\n    return undefined;\n  }\n  if (typeof formatter !== \"function\") {\n    return value.toString();\n  }\n  return formatter(value);\n}\n\nfunction _ensureStepModulo(pageStep: number, step: number) {\n  const moduloToStep = pageStep % step;\n  if (moduloToStep === 0) {\n    return pageStep;\n  }\n  return pageStep - moduloToStep;\n}\n\nexport function calcDimensions(max: number, min: number, ranged: boolean, value: number | number[]) {\n  if (!ranged) {\n    const [dimension, position] = _calcDimension(max, min, value as number);\n    return { dimension, offset: 0, positions: [position], thumbKeys: [\"start\"] };\n  }\n  const [val1, val2] = value as number[];\n  const [offset, position] = _calcDimension(max, min, val1);\n  const [dimension, position2] = _calcDimension(max, min, val2);\n  return { dimension, offset, positions: [position, position2], thumbKeys: [\"start\", \"end\"] };\n}\n\nexport function calculatePageStep(max: number, min: number, step: number) {\n  const pageStep = (max - min) / 10;\n  if (pageStep < step) {\n    // too small pageSize --> return step\n    return step;\n  }\n  const fixedPageStep = _ensureStepModulo(Math.round(pageStep), step);\n  if ((max - min) / fixedPageStep > 10) {\n    // too many steps with fixedPageStep - multiply it\n    return 2 * fixedPageStep;\n  }\n  // basic page size is ok\n  return fixedPageStep;\n}\n\nexport function ensureDefaultValue(\n  defaultValue: number | number[],\n  min: number,\n  max: number,\n  ranged: boolean\n): number | number[] {\n  if (ranged && !Array.isArray(defaultValue)) {\n    return [min, max];\n  }\n  if (Array.isArray(defaultValue)) {\n    return defaultValue;\n  }\n  if (defaultValue < min) {\n    return min;\n  }\n  if (defaultValue > max) {\n    return max;\n  }\n  return defaultValue;\n}\n\nexport function ensureValueText(\n  valueText: string,\n  value: number | number[],\n  formatter: (value: number) => string\n): string | string[] {\n  if (!Array.isArray(value)) {\n    return _ensureSingleValueText(valueText, value, formatter);\n  }\n  return value.map((valueSingle, index) => {\n    const valueTextSingle = Array.isArray(valueText) ? valueText[index] : undefined;\n    return _ensureSingleValueText(valueTextSingle, valueSingle, formatter);\n  });\n}\n\nexport function getNearest(newValue: number, ranged: boolean, value: number | number[]) {\n  if (!ranged) {\n    return 0;\n  }\n  const diff0 = Math.abs((value as number[])[0] - newValue);\n  const diff1 = Math.abs((value as number[])[1] - newValue);\n  return diff0 > diff1 ? 1 : 0;\n}\n\nexport function moveToPx(offsetInPx: number, min: number, max: number, railCoords: { width: number }, step: number) {\n  const valuePoints = max - min;\n  const pxToValuePoints = railCoords.width / valuePoints;\n  const offsetInValuePoints = offsetInPx / pxToValuePoints + min;\n  const newValue = Math.round(offsetInValuePoints / step) * step;\n  if (newValue < min) {\n    return min;\n  }\n  if (newValue > max) {\n    return max;\n  }\n  return newValue;\n}\n"
  },
  {
    "path": "packages/core/src/components/Slider/SliderHooks.ts",
    "content": "import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useResizeObserver } from \"@vibe/hooks\";\nimport { NOOP } from \"@vibe/shared\";\nimport { UPDATE_SLIDER_SIZE_DEBOUNCE } from \"./SliderConstants\";\nimport { ensureValueText } from \"./SliderHelpers\";\n\nfunction _useIsStateControlledFromOutside(value: number | number[]): boolean {\n  const [isControlled] = useState(typeof value !== \"undefined\");\n  return isControlled;\n}\n\nfunction _useSliderValue(\n  defaultValue: number | number[],\n  isControlled: boolean,\n  value: number | number[]\n): [number | number[], (value: number | number[]) => void] {\n  const initialValue = isControlled ? value : defaultValue;\n  const [internalStateValue, setInternalStateValue] = useState(initialValue);\n  if (isControlled) {\n    return [value as number, NOOP];\n  }\n  return [internalStateValue, setInternalStateValue];\n}\n\nexport function useSliderActionsContextValue(\n  actualValue: number | number[],\n  focused: number,\n  getDragging: () => number,\n  getSelectedValue: () => number | number[],\n  max: number,\n  min: number,\n  onChange: (value: number | number[]) => void,\n  ranged: boolean,\n  setActive: (value: number) => void,\n  setFocused: (value: number) => void,\n  setDragging: (value: number) => void,\n  setSelectedValue: (value: number | number[]) => void,\n  step: number\n) {\n  const _changeValueOrValues = useCallback(\n    (newValueOrValues: number | number[]) => {\n      setSelectedValue(newValueOrValues);\n      if (typeof onChange === \"function\") {\n        onChange(newValueOrValues);\n      }\n    },\n    [setSelectedValue, onChange]\n  );\n\n  const _validateValue = useCallback(\n    (index: number, newValue: number | number[] | string): number => {\n      const numericValue = Number(newValue);\n      if (newValue === \"\" || Number.isNaN(numericValue)) {\n        return index === 1 ? max : min;\n      }\n      if (numericValue > max) {\n        return max;\n      }\n      if (numericValue < min) {\n        return min;\n      }\n      return numericValue;\n    },\n    [min, max]\n  );\n\n  const _calculateNewValues = useCallback(\n    (thumb: { index: number; newValue: number | number[] | string }): number[] => {\n      const [startValue, endValue] = [...(getSelectedValue() as number[])];\n      if (thumb.index === 1) {\n        return [startValue, _validateValue(thumb.index, thumb.newValue)];\n      }\n      return [_validateValue(thumb.index, thumb.newValue), endValue];\n    },\n    [_validateValue, getSelectedValue]\n  );\n\n  const _manageRangedValues = useCallback(\n    (thumb: { index: number; newValue: number | number[] | string }, switchCb: (value: number) => void = NOOP) => {\n      const [startValue, endValue] = _calculateNewValues(thumb);\n      if (startValue < endValue) {\n        // no need to switch, same thumb stay active\n        return [startValue, endValue];\n      }\n      // switch active thumb + end and start values\n      switchCb(thumb.index === 0 ? 1 : 0);\n      return [endValue, startValue];\n    },\n    [_calculateNewValues]\n  );\n\n  const _switchDraggingThumb = useCallback(\n    (switchTo: number) => {\n      setActive(switchTo);\n      setFocused(switchTo);\n      setDragging(switchTo);\n    },\n    [setActive, setFocused, setDragging]\n  );\n\n  const changeThumbValue = useCallback(\n    (newValue: number | string, thumbIndex: number = undefined, cancelFocus = false) => {\n      if (!ranged) {\n        _changeValueOrValues(_validateValue(null, newValue));\n        return;\n      }\n      const currentThumb = { newValue, index: thumbIndex ?? focused };\n      const switchCb = cancelFocus ? NOOP : setFocused;\n      const newValues = _manageRangedValues(currentThumb, switchCb);\n      _changeValueOrValues(newValues);\n    },\n    [_changeValueOrValues, _manageRangedValues, _validateValue, focused, ranged, setFocused]\n  );\n\n  const drugThumb = useCallback(\n    (newValue: number | number[]) => {\n      if (!ranged) {\n        _changeValueOrValues(_validateValue(null, newValue));\n        return;\n      }\n      const currentThumb = { newValue, index: getDragging() ?? 0 };\n      const newValues = _manageRangedValues(currentThumb, _switchDraggingThumb);\n      _changeValueOrValues(newValues);\n    },\n    [_changeValueOrValues, _manageRangedValues, _switchDraggingThumb, _validateValue, getDragging, ranged]\n  );\n\n  const decreaseValue = useCallback(\n    (consumerStep: number) => {\n      const currentValue = ranged ? (actualValue as number[])[focused] : (actualValue as number);\n      if (currentValue === min) {\n        return;\n      }\n      const finalStep = consumerStep || step;\n      const newValue = currentValue - finalStep;\n      changeThumbValue(newValue);\n    },\n    [actualValue, changeThumbValue, focused, min, ranged, step]\n  );\n\n  const increaseValue = useCallback(\n    (consumerStep?: number) => {\n      const currentValue = ranged ? (actualValue as number[])[focused] : (actualValue as number);\n      if (currentValue === max) {\n        return;\n      }\n      const finalStep = consumerStep || step;\n      const newValue = currentValue + finalStep;\n      changeThumbValue(newValue);\n    },\n    [actualValue, changeThumbValue, focused, max, ranged, step]\n  );\n\n  return useMemo(\n    () => ({\n      changeThumbValue,\n      decreaseValue,\n      drugThumb,\n      increaseValue,\n      setActive,\n      setDragging,\n      setFocused\n    }),\n    [changeThumbValue, decreaseValue, drugThumb, increaseValue, setActive, setDragging, setFocused]\n  );\n}\n\nexport function useDragging(): [number, (value: number) => void, () => number] {\n  const [dragging, setStateDragging] = useState<number>(null);\n  const draggingRef = useRef(null);\n\n  const setDragging = useCallback(\n    (index: number) => {\n      setStateDragging(index);\n      draggingRef.current = index;\n    },\n    [setStateDragging, draggingRef]\n  );\n  const getDragging = useCallback(() => draggingRef.current, [draggingRef]);\n  return [dragging, setDragging, getDragging];\n}\n\nexport function useSliderRail() {\n  const railRef = useRef(null);\n  const [railCoords, setRailCoords] = useState({ left: 0, right: 100, width: 100 });\n\n  const defineRailCoords = useCallback(() => {\n    if (!railRef.current) {\n      return;\n    }\n    const railRect = railRef.current.getBoundingClientRect();\n    const { left, right, width } = railRect;\n    setRailCoords({ left, right, width });\n  }, [railRef, setRailCoords]);\n\n  useResizeObserver({\n    ref: railRef,\n    callback: defineRailCoords,\n    debounceTime: UPDATE_SLIDER_SIZE_DEBOUNCE\n  });\n\n  useEffect(() => {\n    defineRailCoords();\n  }, [defineRailCoords]);\n\n  return { railCoords, railRef };\n}\n\nexport function useSliderValues(\n  defaultValue: number | number[],\n  value: number | number[],\n  valueFormatter: (value: number) => string,\n  valueText: string\n): {\n  actualValue: number | number[];\n  actualValueText: string | string[];\n  getSelectedValue: () => number | number[];\n  isControlled: boolean;\n  setSelectedValue: (value: number) => void;\n} {\n  const isControlled = _useIsStateControlledFromOutside(value);\n  const [actualValue, setStateSelectedValue] = _useSliderValue(defaultValue, isControlled, value);\n  const valueRef = useRef(actualValue);\n\n  // Update ref when actualValue was changed from outside in controlled mode\n  useEffect(() => {\n    if (isControlled && valueRef.current !== actualValue) {\n      valueRef.current = actualValue;\n    }\n  }, [isControlled, actualValue]);\n\n  const setSelectedValue = useCallback(\n    (newValue: number) => {\n      setStateSelectedValue(newValue);\n      valueRef.current = newValue;\n    },\n    [valueRef, setStateSelectedValue]\n  );\n\n  const getSelectedValue = () => valueRef.current;\n\n  const actualValueText = ensureValueText(valueText, actualValue, valueFormatter);\n  return { actualValue, actualValueText, getSelectedValue, isControlled, setSelectedValue };\n}\n"
  },
  {
    "path": "packages/core/src/components/Slider/SliderInfix.module.scss",
    "content": ".infix {\n  font-size: 14px;\n  font-family: var(--font-family);\n  flex: 0 0 auto;\n}\n\n.txt {\n  white-space: nowrap;\n}\n\n.prefix {\n  margin-inline-end: var(--space-8);\n}\n\n.postfix {\n  margin-inline-start: var(--space-8);\n}\n"
  },
  {
    "path": "packages/core/src/components/Slider/SliderInfix.tsx",
    "content": "import React, { type FC } from \"react\";\nimport { useSliderInfixComponent } from \"./SliderInfixHooks\";\nimport cx from \"classnames\";\nimport { getStyle } from \"@vibe/shared\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./SliderInfix.module.scss\";\nimport { type InfixKind } from \"./Slider.types\";\n\nexport interface SliderInfixProps extends VibeComponentProps {\n  /**\n   * Specifies the type of infix (prefix or postfix).\n   */\n  kind?: InfixKind;\n}\n\nconst SliderInfix: FC<SliderInfixProps> = ({ kind = \"prefix\" }) => {\n  const [isShow, modificators, InfixComponent, inlineStyle] = useSliderInfixComponent(kind);\n  return (\n    isShow && (\n      <div\n        className={cx(\n          styles.infix,\n          getStyle(styles, kind),\n          modificators.map(m => getStyle(styles, m))\n        )}\n        style={inlineStyle}\n      >\n        {InfixComponent}\n      </div>\n    )\n  );\n};\n\nexport default SliderInfix;\n"
  },
  {
    "path": "packages/core/src/components/Slider/SliderInfixHooks.tsx",
    "content": "import React, { type CSSProperties, type ReactElement } from \"react\";\nimport { type IconType, Icon } from \"@vibe/icon\";\nimport { type InfixKind } from \"./Slider.types\";\nimport { useSliderInfix, useSliderSelection } from \"./SliderContext\";\nimport SelectionIndicator from \"./SelectionIndicator\";\n\nconst defaultIconProps = {\n  clickable: false,\n  size: 18,\n  ignoreFocusStyle: true\n};\n\nexport function useSliderInfixComponent(kind: InfixKind): [boolean, string[], ReactElement, CSSProperties] {\n  const isPostfix = kind === \"postfix\";\n  const { prefix, postfix, indicateSelection, selectionIndicatorWidth } = useSliderInfix();\n  const { ranged, value, valueText } = useSliderSelection();\n  const infix = isPostfix ? postfix : prefix;\n\n  if (indicateSelection && (isPostfix || ranged)) {\n    return [true, [], <SelectionIndicator key={kind} kind={kind} />, { width: selectionIndicatorWidth }];\n  }\n  if (typeof infix === \"object\" && (infix as { icon: IconType }).icon) {\n    const { icon, ...restIconProps } = infix as { icon: IconType };\n    const iconProps = { ...defaultIconProps, ...restIconProps };\n    return [true, [], <Icon key=\"infix-icon\" icon={icon} {...iconProps} />, {}];\n  }\n  if (typeof infix === \"function\") {\n    return [true, [], infix(value, valueText), {}];\n  }\n  if (typeof infix === \"string\") {\n    return [true, [\"txt\"], <>{infix}</>, {}];\n  }\n  if (typeof infix === \"undefined\") {\n    return [false, [], null, {}];\n  }\n  return [true, [], <>{infix as ReactElement}</>, {}];\n}\n"
  },
  {
    "path": "packages/core/src/components/Slider/__tests__/Slider-helpers.test.ts",
    "content": "import { describe, it, expect } from \"vitest\";\nimport { calculatePageStep, moveToPx } from \"../SliderHelpers\";\n\ndescribe(\"Check moveToPx helper\", () => {\n  const railCoords = { width: 200 };\n\n  // table: expected, offsetInPx, min, max, step\n  it.each([\n    // integer step, min=0 - existing behavior preserved\n    [0, 0, 0, 100, 1],\n    [50, 100, 0, 100, 1],\n    [100, 200, 0, 100, 1],\n    [25, 50, 0, 100, 1],\n    // integer step, shifted min - existing behavior preserved\n    [10, 0, 10, 20, 1],\n    [15, 100, 10, 20, 1],\n    [20, 200, 10, 20, 1],\n    // fractional step - must snap to sub-integer values\n    [2.5, 50, 0, 10, 0.5],\n    [5, 100, 0, 10, 0.5],\n    [7.5, 150, 0, 10, 0.5],\n    [0.5, 10, 0, 10, 0.5],\n    // fractional step with 0.1 granularity\n    [1.2, 24, 0, 10, 0.1],\n    [5, 100, 0, 10, 0.1],\n    // clamp to min/max\n    [0, -50, 0, 100, 1],\n    [100, 300, 0, 100, 1],\n    [0, -10, 0, 10, 0.5],\n    [10, 500, 0, 10, 0.5]\n  ])(\"should return (%s) for: offsetInPx=%i, min=%i, max=%i, step=%s\", (expected, offsetInPx, min, max, step) => {\n    expect(moveToPx(offsetInPx, min, max, railCoords, step)).toBeCloseTo(expected, 5);\n  });\n});\n\ndescribe(\"Check calculatePageStep helper\", () => {\n  // table: expected, min, max, step\n  it.each([\n    // calculated pageStep less than step - slider step big enough\n    [1, 0, 8, 1],\n    [2, 1, 10, 2],\n    [20, 0, 100, 20],\n    [10, 20, 80, 10],\n    [3, 0, 24, 3],\n    // many steps with fixedPageStep - multiply it\n    [12, 10, 80, 3],\n    [10, 20, 80, 5],\n    [2, 0, 12, 1],\n    [6, 0, 36, 3],\n    // common/default use-case simple calculated pageStep\n    [10, 0, 100, 1],\n    [8, 10, 90, 2],\n    [6, 0, 60, 3],\n    [10, 0, 100, 10]\n  ])(\"pageStep should be (%i) for: min=%i, max=%i, step=%i\", (expected, min, max, step) => {\n    expect(calculatePageStep(max, min, step)).toBe(expected);\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Slider/__tests__/Slider-non-ranged.test.tsx",
    "content": "import { vi, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { act } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { renderSliderInNonRangeMode } from \"./sliderTestUtils.jsx\";\n\nvi.useFakeTimers();\n\nvi.mock(\"../../TextField/TextField\", () => ({\n  default: props => {\n    return <div data-testid=\"mock-text-field-comp\">{JSON.stringify(props)}</div>;\n  }\n}));\n\nit(\"a. Non-ranged Slider: basic renderer\", async () => {\n  const { asFragment } = await renderSliderInNonRangeMode();\n  expect(asFragment().firstChild).toMatchSnapshot();\n});\n\ndescribe(\"b. Non-ranged Slider Active/Inactive\", () => {\n  it(\"01. show Tooltip when hover Thumb\", async () => {\n    let result;\n    await act(async () => {\n      const { asFragment, elThumb } = await renderSliderInNonRangeMode();\n      userEvent.hover(elThumb);\n      vi.advanceTimersByTime(999);\n      result = asFragment().firstChild;\n    });\n    expect(result).toMatchSnapshot();\n  });\n\n  it(\"02. hide Tooltip when unhover Thumb\", async () => {\n    let result;\n    await act(async () => {\n      const { asFragment, elThumb } = await renderSliderInNonRangeMode();\n      userEvent.hover(elThumb);\n      vi.advanceTimersByTime(999);\n      userEvent.unhover(elThumb);\n      vi.advanceTimersByTime(999);\n      result = asFragment().firstChild;\n    });\n    expect(result).toMatchSnapshot();\n  });\n\n  it(\"03. activate Thumb by Tab key press\", async () => {\n    let result;\n    await act(async () => {\n      const { asFragment } = await renderSliderInNonRangeMode();\n      userEvent.tab();\n      vi.advanceTimersByTime(999);\n      result = asFragment().firstChild;\n    });\n    expect(result).toMatchSnapshot();\n  });\n\n  it(\"04. de-activate Thumb by Tab key press, when Thumb focused\", async () => {\n    let result;\n    await act(async () => {\n      const { asFragment, elThumb } = await renderSliderInNonRangeMode();\n      elThumb.focus();\n      userEvent.tab();\n      vi.advanceTimersByTime(999);\n      result = asFragment().firstChild;\n    });\n    expect(result).toMatchSnapshot();\n  });\n});\n\ndescribe(\"c. Non-ranged Slider Key Events\", () => {\n  it(\"01. decrease value by Left/Down keys press\", async () => {\n    let result;\n    await act(async () => {\n      const { asFragment, elThumb } = await renderSliderInNonRangeMode({ showValue: true });\n      elThumb.focus();\n      userEvent.keyboard(\"{arrowleft}\");\n      userEvent.keyboard(\"{arrowdown}\");\n      result = asFragment().firstChild;\n    });\n    expect(result).toMatchSnapshot();\n  });\n\n  it(\"02. increase value by Right/Up keys press\", async () => {\n    let result;\n    await act(async () => {\n      const { asFragment, elThumb } = await renderSliderInNonRangeMode({ showValue: true });\n      elThumb.focus();\n      userEvent.keyboard(\"{arrowright}\");\n      userEvent.keyboard(\"{arrowup}\");\n      result = asFragment().firstChild;\n    });\n    expect(result).toMatchSnapshot();\n  });\n\n  it(\"03. decrease value (step 10%) by PageDown key press\", async () => {\n    let result;\n    await act(async () => {\n      const { asFragment, elThumb } = await renderSliderInNonRangeMode({ showValue: true });\n      elThumb.focus();\n      userEvent.keyboard(\"{pagedown}\");\n      result = asFragment().firstChild;\n    });\n    expect(result).toMatchSnapshot();\n  });\n\n  it(\"04. increase value (step 10%) by PageUp key pres\", async () => {\n    let result;\n    await act(async () => {\n      const { asFragment, elThumb } = await renderSliderInNonRangeMode({ showValue: true });\n      elThumb.focus();\n      userEvent.keyboard(\"{pageup}\");\n      userEvent.keyboard(\"{pageup}\");\n      result = asFragment().firstChild;\n    });\n    expect(result).toMatchSnapshot();\n  });\n\n  it(\"05. change value by keys press in Step and Label mode\", async () => {\n    let result;\n    await act(async () => {\n      const { asFragment, elThumb } = await renderSliderInNonRangeMode({\n        indicateSelection: true,\n        showValue: true,\n        step: 10\n      });\n      elThumb.focus();\n      await userEvent.keyboard(\"{arrowright}\");\n      await userEvent.keyboard(\"{arrowright}\");\n      result = asFragment().firstChild;\n    });\n    expect(result).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Slider/__tests__/Slider-ranged.test.tsx",
    "content": "import { vi, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { act } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { renderSliderInRangeMode } from \"./sliderTestUtils.jsx\";\n\nvi.useFakeTimers();\n\nvi.mock(\"../../TextField/TextField\", () => ({\n  default: props => {\n    return <div data-testid=\"mock-text-field-comp\">{JSON.stringify(props)}</div>;\n  }\n}));\n\nit(\"a. Ranges Slider: basic renderer\", async () => {\n  const { asFragment } = await renderSliderInRangeMode();\n  expect(asFragment().firstChild).toMatchSnapshot();\n});\n\ndescribe(\"b. Ranges Slider Active/Inactive\", () => {\n  it(\"01. show Tooltip when hover Start Thumb\", async () => {\n    let result;\n    await act(async () => {\n      const { asFragment, elThumbStart } = await renderSliderInRangeMode();\n      userEvent.hover(elThumbStart);\n      vi.advanceTimersByTime(999);\n      result = asFragment().firstChild;\n    });\n    expect(result).toMatchSnapshot();\n  });\n\n  it(\"02. show Tooltip when hover End Thumb\", async () => {\n    let result;\n    await act(async () => {\n      const { asFragment, elThumbEnd } = await renderSliderInRangeMode();\n      userEvent.hover(elThumbEnd);\n      vi.advanceTimersByTime(999);\n      result = asFragment().firstChild;\n    });\n    expect(result).toMatchSnapshot();\n  });\n\n  it(\"03. hide Tooltip when unhover Thumb\", async () => {\n    let result;\n    await act(async () => {\n      const { asFragment, elThumbStart } = await renderSliderInRangeMode();\n      userEvent.hover(elThumbStart);\n      vi.advanceTimersByTime(999);\n      userEvent.unhover(elThumbStart);\n      vi.advanceTimersByTime(999);\n      result = asFragment().firstChild;\n    });\n    expect(result).toMatchSnapshot();\n  });\n\n  it(\"04. activate Start Thumb by Tab key press\", async () => {\n    let result;\n    await act(async () => {\n      const { asFragment } = await renderSliderInRangeMode();\n      userEvent.tab();\n      vi.advanceTimersByTime(999);\n      result = asFragment().firstChild;\n    });\n    expect(result).toMatchSnapshot();\n  });\n\n  it(\"05. activate End Thumb by Tab key press\", async () => {\n    let result;\n    await act(async () => {\n      const { asFragment } = await renderSliderInRangeMode();\n      userEvent.tab();\n      vi.advanceTimersByTime(999);\n      userEvent.tab();\n      vi.advanceTimersByTime(999);\n      result = asFragment().firstChild;\n    });\n    expect(result).toMatchSnapshot();\n  });\n\n  it(\"06. de-activate Thumb by Tab key press, when End Thumb focused\", async () => {\n    let result;\n    await act(async () => {\n      const { asFragment, elThumbEnd } = await renderSliderInRangeMode();\n      elThumbEnd.focus();\n      userEvent.tab();\n      vi.advanceTimersByTime(999);\n      result = asFragment().firstChild;\n    });\n    expect(result).toMatchSnapshot();\n  });\n});\n\ndescribe(\"c. Ranges Slider Key Events\", () => {\n  it(\"01. decrease value by Left/Down keys press\", async () => {\n    let result;\n    await act(async () => {\n      const { asFragment, elThumbStart } = await renderSliderInRangeMode({ showValue: true });\n      elThumbStart.focus();\n      userEvent.keyboard(\"{arrowleft}\");\n      userEvent.keyboard(\"{arrowdown}\");\n      result = asFragment().firstChild;\n    });\n    expect(result).toMatchSnapshot();\n  });\n\n  it(\"02. increase value by Right/Up keys press\", async () => {\n    let result;\n    await act(async () => {\n      const { asFragment, elThumbEnd } = await renderSliderInRangeMode({ showValue: true });\n      elThumbEnd.focus();\n      userEvent.keyboard(\"{arrowright}\");\n      userEvent.keyboard(\"{arrowup}\");\n      result = asFragment().firstChild;\n    });\n    expect(result).toMatchSnapshot();\n  });\n\n  it(\"03. decrease value (step 10%) by PageDown key press\", async () => {\n    let result;\n    await act(async () => {\n      const { asFragment, elThumbEnd } = await renderSliderInRangeMode({ showValue: true });\n      elThumbEnd.focus();\n      userEvent.keyboard(\"{pagedown}\");\n      result = asFragment().firstChild;\n    });\n    expect(result).toMatchSnapshot();\n  });\n\n  it(\"04. increase value (step 10%) by PageUp key pres\", async () => {\n    let result;\n    await act(async () => {\n      const { asFragment, elThumbStart } = await renderSliderInRangeMode({ showValue: true });\n      elThumbStart.focus();\n      userEvent.keyboard(\"{pageup}\");\n      userEvent.keyboard(\"{pageup}\");\n      result = asFragment().firstChild;\n    });\n    expect(result).toMatchSnapshot();\n  });\n\n  it(\"05. change value by keys press in Step and Label mode\", async () => {\n    let result;\n    await act(async () => {\n      const { asFragment, elThumbStart } = await renderSliderInRangeMode({\n        indicateSelection: true,\n        showValue: true,\n        step: 10\n      });\n      elThumbStart.focus();\n      await userEvent.keyboard(\"{arrowright}\");\n      await userEvent.keyboard(\"{arrowright}\");\n      result = asFragment().firstChild;\n    });\n    expect(result).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Slider/__tests__/Slider.snapshot.test.tsx",
    "content": "import { vi, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { Sound } from \"@vibe/icons\";\nimport { renderSliderForSnapshots } from \"./sliderTestUtils.jsx\";\n\nvi.mock(\"@vibe/icon\", () => ({\n  Icon: ({ icon, ...rest }) => (\n    <div data-testid=\"mock-icon\">{JSON.stringify({ ...rest, icon: icon && icon.displayName })}</div>\n  )\n}));\n\nvi.mock(\"../../TextField/TextField\", () => ({\n  default: props => {\n    return <div data-testid=\"mock-text-field-comp\">{JSON.stringify(props)}</div>;\n  }\n}));\n\ndescribe(\"Slider renders correctly\", () => {\n  it(\"01. with empty props\", async () => {\n    const render = await renderSliderForSnapshots();\n    expect(render).toMatchSnapshot();\n  });\n\n  it(\"02. with aria-label\", async () => {\n    const render = await renderSliderForSnapshots({ \"aria-label\": \"My Slider\" });\n    expect(render).toMatchSnapshot();\n  });\n\n  it(\"03. with aria-labelledby\", async () => {\n    const render = await renderSliderForSnapshots({ \"aria-labelledby\": \"id-of-the-custom-label\" });\n    expect(render).toMatchSnapshot();\n  });\n\n  it(\"04. with custom className\", async () => {\n    const render = await renderSliderForSnapshots({ className: \"slide-me\" });\n    expect(render).toMatchSnapshot();\n  });\n\n  it(\"05. with id and data-testid\", async () => {\n    const render = await renderSliderForSnapshots(\n      { id: \"my-slider\", \"data-testid\": \"my-slider\" },\n      \"my-slider__thumb-0\"\n    );\n    expect(render).toMatchSnapshot();\n  });\n\n  it(\"06. with disabled\", async () => {\n    const render = await renderSliderForSnapshots({ disabled: true });\n    expect(render).toMatchSnapshot();\n  });\n\n  it(\"07. with color\", async () => {\n    const render = await renderSliderForSnapshots({ color: \"positive\" });\n    expect(render).toMatchSnapshot();\n  });\n\n  it(`08. with size`, async () => {\n    const render = await renderSliderForSnapshots({ size: \"large\" });\n    expect(render).toMatchSnapshot();\n  });\n\n  it(`09. with min, max, and step`, async () => {\n    const render = await renderSliderForSnapshots({ min: 10, max: 20, step: 2 });\n    expect(render).toMatchSnapshot();\n  });\n\n  it(`10. with showValue`, async () => {\n    const render = await renderSliderForSnapshots({ showValue: true });\n    expect(render).toMatchSnapshot();\n  });\n\n  it(`11. with valueFormatter`, async () => {\n    const render = await renderSliderForSnapshots({ valueFormatter: value => `--${value}GB--` });\n    expect(render).toMatchSnapshot();\n  });\n\n  it(`12. with value (controlled component)`, async () => {\n    const render = await renderSliderForSnapshots({ value: 12 });\n    expect(render).toMatchSnapshot();\n  });\n\n  it(`13. with value, valueText (controlled component)`, async () => {\n    const render = await renderSliderForSnapshots({ value: 15, valueText: \"15kg\" });\n    expect(render).toMatchSnapshot();\n  });\n\n  it(`14. with indicateSelection`, async () => {\n    const render = await renderSliderForSnapshots({ indicateSelection: true });\n    expect(render).toMatchSnapshot();\n  });\n\n  it(`15. with prefix (string) and postfix (Icon)`, async () => {\n    const render = await renderSliderForSnapshots({ prefix: \"Vol\", postfix: { icon: Sound } });\n    expect(render).toMatchSnapshot();\n  });\n\n  it(`16. with prefix (custom) and postfix (render-props)`, async () => {\n    const render = await renderSliderForSnapshots({\n      prefix: <div>Custom component</div>,\n      postfix: (value, valueText) => `Render Props result: ${valueText} (${value})`\n    });\n    expect(render).toMatchSnapshot();\n  });\n\n  it(`17. with ranged (ranged slider)`, async () => {\n    const render = await renderSliderForSnapshots({ ranged: true });\n    expect(render).toMatchSnapshot();\n  });\n\n  it(`18. ranged slider with options`, async () => {\n    const render = await renderSliderForSnapshots({ defaultValue: [20, 30], min: 10, max: 50, ranged: true, step: 2 });\n    expect(render).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Slider/__tests__/__snapshots__/Slider-non-ranged.test.jsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`a. Non-ranged Slider: basic renderer 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 20%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-label=\"my-slider\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"20\"\n        aria-valuetext=\"20%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 20%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`b. Non-ranged Slider Active/Inactive > 01. show Tooltip when hover Thumb 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 20%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-label=\"my-slider\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"20\"\n        aria-valuetext=\"20%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 20%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`b. Non-ranged Slider Active/Inactive > 02. hide Tooltip when unhover Thumb 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 20%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-label=\"my-slider\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"20\"\n        aria-valuetext=\"20%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 20%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`b. Non-ranged Slider Active/Inactive > 03. activate Thumb by Tab key press 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 20%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-label=\"my-slider\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"20\"\n        aria-valuetext=\"20%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 20%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`b. Non-ranged Slider Active/Inactive > 04. de-activate Thumb by Tab key press, when Thumb focused 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 20%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-label=\"my-slider\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"20\"\n        aria-valuetext=\"20%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 20%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`c. Non-ranged Slider Key Events > 01. decrease value by Left/Down keys press 1`] = `\n<div\n  class=\"slider valueShown positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 18%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-label=\"my-slider\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"18\"\n        aria-valuetext=\"18%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 18%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          18%\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`c. Non-ranged Slider Key Events > 02. increase value by Right/Up keys press 1`] = `\n<div\n  class=\"slider valueShown positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 22%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-label=\"my-slider\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"22\"\n        aria-valuetext=\"22%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 22%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          22%\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`c. Non-ranged Slider Key Events > 03. decrease value (step 10%) by PageDown key press 1`] = `\n<div\n  class=\"slider valueShown positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 10%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-label=\"my-slider\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"10\"\n        aria-valuetext=\"10%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 10%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          10%\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`c. Non-ranged Slider Key Events > 04. increase value (step 10%) by PageUp key pres 1`] = `\n<div\n  class=\"slider valueShown positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 40%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-label=\"my-slider\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"40\"\n        aria-valuetext=\"40%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 40%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          40%\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`c. Non-ranged Slider Key Events > 05. change value by keys press in Step and Label mode 1`] = `\n<div\n  class=\"slider valueShown positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 40%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-label=\"my-slider\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"40\"\n        aria-valuetext=\"40%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 40%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          40%\n        </label>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"infix postfix\"\n    style=\"width: 60px;\"\n  >\n    <div\n      data-testid=\"mock-text-field-comp\"\n    >\n      {\"value\":\"40%\",\"className\":\"selectionIndicator\"}\n    </div>\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Slider/__tests__/__snapshots__/Slider-non-ranged.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`a. Non-ranged Slider: basic renderer 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 20%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-label=\"my-slider\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"20\"\n        aria-valuetext=\"20%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 20%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`b. Non-ranged Slider Active/Inactive > 01. show Tooltip when hover Thumb 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 20%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-label=\"my-slider\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"20\"\n        aria-valuetext=\"20%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 20%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`b. Non-ranged Slider Active/Inactive > 02. hide Tooltip when unhover Thumb 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 20%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-label=\"my-slider\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"20\"\n        aria-valuetext=\"20%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 20%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`b. Non-ranged Slider Active/Inactive > 03. activate Thumb by Tab key press 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 20%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-label=\"my-slider\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"20\"\n        aria-valuetext=\"20%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 20%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`b. Non-ranged Slider Active/Inactive > 04. de-activate Thumb by Tab key press, when Thumb focused 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 20%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-label=\"my-slider\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"20\"\n        aria-valuetext=\"20%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 20%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`c. Non-ranged Slider Key Events > 01. decrease value by Left/Down keys press 1`] = `\n<div\n  class=\"slider valueShown positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 18%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-label=\"my-slider\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"18\"\n        aria-valuetext=\"18%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 18%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          18%\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`c. Non-ranged Slider Key Events > 02. increase value by Right/Up keys press 1`] = `\n<div\n  class=\"slider valueShown positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 22%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-label=\"my-slider\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"22\"\n        aria-valuetext=\"22%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 22%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          22%\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`c. Non-ranged Slider Key Events > 03. decrease value (step 10%) by PageDown key press 1`] = `\n<div\n  class=\"slider valueShown positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 10%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-label=\"my-slider\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"10\"\n        aria-valuetext=\"10%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 10%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          10%\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`c. Non-ranged Slider Key Events > 04. increase value (step 10%) by PageUp key pres 1`] = `\n<div\n  class=\"slider valueShown positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 40%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-label=\"my-slider\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"40\"\n        aria-valuetext=\"40%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 40%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          40%\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`c. Non-ranged Slider Key Events > 05. change value by keys press in Step and Label mode 1`] = `\n<div\n  class=\"slider valueShown positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 40%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-label=\"my-slider\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"40\"\n        aria-valuetext=\"40%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 40%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          40%\n        </label>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"infix postfix\"\n    style=\"width: 60px;\"\n  >\n    <div\n      data-testid=\"mock-text-field-comp\"\n    >\n      {\"value\":\"40%\",\"className\":\"selectionIndicator\"}\n    </div>\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Slider/__tests__/__snapshots__/Slider-ranged.test.jsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`a. Ranges Slider: basic renderer 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 25%; width: 40%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"25\"\n        aria-valuetext=\"25%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 25%;\"\n        tabindex=\"0\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"65\"\n        aria-valuetext=\"65%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-1\"\n        role=\"slider\"\n        style=\"left: 65%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`b. Ranges Slider Active/Inactive > 01. show Tooltip when hover Start Thumb 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 25%; width: 40%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"25\"\n        aria-valuetext=\"25%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 25%;\"\n        tabindex=\"0\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"65\"\n        aria-valuetext=\"65%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-1\"\n        role=\"slider\"\n        style=\"left: 65%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`b. Ranges Slider Active/Inactive > 02. show Tooltip when hover End Thumb 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 25%; width: 40%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"25\"\n        aria-valuetext=\"25%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 25%;\"\n        tabindex=\"0\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"65\"\n        aria-valuetext=\"65%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-1\"\n        role=\"slider\"\n        style=\"left: 65%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`b. Ranges Slider Active/Inactive > 03. hide Tooltip when unhover Thumb 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 25%; width: 40%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"25\"\n        aria-valuetext=\"25%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 25%;\"\n        tabindex=\"0\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"65\"\n        aria-valuetext=\"65%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-1\"\n        role=\"slider\"\n        style=\"left: 65%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`b. Ranges Slider Active/Inactive > 04. activate Start Thumb by Tab key press 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 25%; width: 40%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"25\"\n        aria-valuetext=\"25%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 25%;\"\n        tabindex=\"0\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"65\"\n        aria-valuetext=\"65%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-1\"\n        role=\"slider\"\n        style=\"left: 65%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`b. Ranges Slider Active/Inactive > 05. activate End Thumb by Tab key press 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 25%; width: 40%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"25\"\n        aria-valuetext=\"25%\"\n        class=\"thumb small focused notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 25%;\"\n        tabindex=\"0\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"65\"\n        aria-valuetext=\"65%\"\n        class=\"thumb small focused notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-1\"\n        role=\"slider\"\n        style=\"left: 65%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`b. Ranges Slider Active/Inactive > 06. de-activate Thumb by Tab key press, when End Thumb focused 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 25%; width: 40%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"25\"\n        aria-valuetext=\"25%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 25%;\"\n        tabindex=\"0\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"65\"\n        aria-valuetext=\"65%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-1\"\n        role=\"slider\"\n        style=\"left: 65%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`c. Ranges Slider Key Events > 01. decrease value by Left/Down keys press 1`] = `\n<div\n  class=\"slider valueShown positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 23%; width: 42%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"23\"\n        aria-valuetext=\"23%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 23%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          23%\n        </label>\n      </div>\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"65\"\n        aria-valuetext=\"65%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-1\"\n        role=\"slider\"\n        style=\"left: 65%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          65%\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`c. Ranges Slider Key Events > 02. increase value by Right/Up keys press 1`] = `\n<div\n  class=\"slider valueShown positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 25%; width: 42%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"25\"\n        aria-valuetext=\"25%\"\n        class=\"thumb small focused notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 25%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          25%\n        </label>\n      </div>\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"67\"\n        aria-valuetext=\"67%\"\n        class=\"thumb small focused notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-1\"\n        role=\"slider\"\n        style=\"left: 67%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          67%\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`c. Ranges Slider Key Events > 03. decrease value (step 10%) by PageDown key press 1`] = `\n<div\n  class=\"slider valueShown positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 25%; width: 30%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"25\"\n        aria-valuetext=\"25%\"\n        class=\"thumb small focused notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 25%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          25%\n        </label>\n      </div>\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"55\"\n        aria-valuetext=\"55%\"\n        class=\"thumb small focused notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-1\"\n        role=\"slider\"\n        style=\"left: 55%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          55%\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`c. Ranges Slider Key Events > 04. increase value (step 10%) by PageUp key pres 1`] = `\n<div\n  class=\"slider valueShown positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 45%; width: 20%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"45\"\n        aria-valuetext=\"45%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 45%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          45%\n        </label>\n      </div>\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"65\"\n        aria-valuetext=\"65%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-1\"\n        role=\"slider\"\n        style=\"left: 65%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          65%\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`c. Ranges Slider Key Events > 05. change value by keys press in Step and Label mode 1`] = `\n<div\n  class=\"slider valueShown positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"infix prefix\"\n    style=\"width: 60px;\"\n  >\n    <div\n      data-testid=\"mock-text-field-comp\"\n    >\n      {\"value\":\"45%\",\"className\":\"selectionIndicator\"}\n    </div>\n  </div>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 45%; width: 20%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"45\"\n        aria-valuetext=\"45%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 45%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          45%\n        </label>\n      </div>\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"65\"\n        aria-valuetext=\"65%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-1\"\n        role=\"slider\"\n        style=\"left: 65%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          65%\n        </label>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"infix postfix\"\n    style=\"width: 60px;\"\n  >\n    <div\n      data-testid=\"mock-text-field-comp\"\n    >\n      {\"value\":\"65%\",\"className\":\"selectionIndicator\"}\n    </div>\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Slider/__tests__/__snapshots__/Slider-ranged.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`a. Ranges Slider: basic renderer 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 25%; width: 40%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"25\"\n        aria-valuetext=\"25%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 25%;\"\n        tabindex=\"0\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"65\"\n        aria-valuetext=\"65%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-1\"\n        role=\"slider\"\n        style=\"left: 65%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`b. Ranges Slider Active/Inactive > 01. show Tooltip when hover Start Thumb 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 25%; width: 40%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"25\"\n        aria-valuetext=\"25%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 25%;\"\n        tabindex=\"0\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"65\"\n        aria-valuetext=\"65%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-1\"\n        role=\"slider\"\n        style=\"left: 65%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`b. Ranges Slider Active/Inactive > 02. show Tooltip when hover End Thumb 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 25%; width: 40%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"25\"\n        aria-valuetext=\"25%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 25%;\"\n        tabindex=\"0\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"65\"\n        aria-valuetext=\"65%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-1\"\n        role=\"slider\"\n        style=\"left: 65%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`b. Ranges Slider Active/Inactive > 03. hide Tooltip when unhover Thumb 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 25%; width: 40%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"25\"\n        aria-valuetext=\"25%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 25%;\"\n        tabindex=\"0\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"65\"\n        aria-valuetext=\"65%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-1\"\n        role=\"slider\"\n        style=\"left: 65%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`b. Ranges Slider Active/Inactive > 04. activate Start Thumb by Tab key press 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 25%; width: 40%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"25\"\n        aria-valuetext=\"25%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 25%;\"\n        tabindex=\"0\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"65\"\n        aria-valuetext=\"65%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-1\"\n        role=\"slider\"\n        style=\"left: 65%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`b. Ranges Slider Active/Inactive > 05. activate End Thumb by Tab key press 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 25%; width: 40%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"25\"\n        aria-valuetext=\"25%\"\n        class=\"thumb small focused notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 25%;\"\n        tabindex=\"0\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"65\"\n        aria-valuetext=\"65%\"\n        class=\"thumb small focused notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-1\"\n        role=\"slider\"\n        style=\"left: 65%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`b. Ranges Slider Active/Inactive > 06. de-activate Thumb by Tab key press, when End Thumb focused 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 25%; width: 40%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"25\"\n        aria-valuetext=\"25%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 25%;\"\n        tabindex=\"0\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"65\"\n        aria-valuetext=\"65%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-1\"\n        role=\"slider\"\n        style=\"left: 65%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`c. Ranges Slider Key Events > 01. decrease value by Left/Down keys press 1`] = `\n<div\n  class=\"slider valueShown positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 23%; width: 42%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"23\"\n        aria-valuetext=\"23%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 23%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          23%\n        </label>\n      </div>\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"65\"\n        aria-valuetext=\"65%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-1\"\n        role=\"slider\"\n        style=\"left: 65%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          65%\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`c. Ranges Slider Key Events > 02. increase value by Right/Up keys press 1`] = `\n<div\n  class=\"slider valueShown positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 25%; width: 42%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"25\"\n        aria-valuetext=\"25%\"\n        class=\"thumb small focused notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 25%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          25%\n        </label>\n      </div>\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"67\"\n        aria-valuetext=\"67%\"\n        class=\"thumb small focused notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-1\"\n        role=\"slider\"\n        style=\"left: 67%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          67%\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`c. Ranges Slider Key Events > 03. decrease value (step 10%) by PageDown key press 1`] = `\n<div\n  class=\"slider valueShown positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 25%; width: 30%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"25\"\n        aria-valuetext=\"25%\"\n        class=\"thumb small focused notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 25%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          25%\n        </label>\n      </div>\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"55\"\n        aria-valuetext=\"55%\"\n        class=\"thumb small focused notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-1\"\n        role=\"slider\"\n        style=\"left: 55%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          55%\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`c. Ranges Slider Key Events > 04. increase value (step 10%) by PageUp key pres 1`] = `\n<div\n  class=\"slider valueShown positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 45%; width: 20%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"45\"\n        aria-valuetext=\"45%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 45%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          45%\n        </label>\n      </div>\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"65\"\n        aria-valuetext=\"65%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-1\"\n        role=\"slider\"\n        style=\"left: 65%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          65%\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`c. Ranges Slider Key Events > 05. change value by keys press in Step and Label mode 1`] = `\n<div\n  class=\"slider valueShown positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"infix prefix\"\n    style=\"width: 60px;\"\n  >\n    <div\n      data-testid=\"mock-text-field-comp\"\n    >\n      {\"value\":\"45%\",\"className\":\"selectionIndicator\"}\n    </div>\n  </div>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 45%; width: 20%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"45\"\n        aria-valuetext=\"45%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 45%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          45%\n        </label>\n      </div>\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"65\"\n        aria-valuetext=\"65%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-1\"\n        role=\"slider\"\n        style=\"left: 65%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          65%\n        </label>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"infix postfix\"\n    style=\"width: 60px;\"\n  >\n    <div\n      data-testid=\"mock-text-field-comp\"\n    >\n      {\"value\":\"65%\",\"className\":\"selectionIndicator\"}\n    </div>\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Slider/__tests__/__snapshots__/Slider.snapshot.test.jsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`Slider renders correctly > 01. with empty props 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 0%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"0\"\n        aria-valuetext=\"0%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 0%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 02. with aria-label 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 0%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-label=\"My Slider\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"0\"\n        aria-valuetext=\"0%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 0%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 03. with aria-labelledby 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 0%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-labelledby=\"id-of-the-custom-label\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"0\"\n        aria-valuetext=\"0%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 0%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 04. with custom className 1`] = `\n<div\n  class=\"slider positionTop slide-me\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 0%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"0\"\n        aria-valuetext=\"0%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 0%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 05. with id and data-testid 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"my-slider\"\n  id=\"my-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"my-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"my-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 0%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"0\"\n        aria-valuetext=\"0%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"my-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 0%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 06. with disabled 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small disabled\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 0%;\"\n      />\n      <div\n        aria-disabled=\"true\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"0\"\n        aria-valuetext=\"0%\"\n        class=\"thumb small\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 0%;\"\n        tabindex=\"-1\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 07. with color 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small positive\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track positive\"\n      />\n      <div\n        class=\"filledTrack positive\"\n        style=\"left: 0%; width: 0%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"0\"\n        aria-valuetext=\"0%\"\n        class=\"thumb positive small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 0%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 08. with size 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base large\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail large\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 0%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"0\"\n        aria-valuetext=\"0%\"\n        class=\"thumb large notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 0%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 09. with min, max, and step 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 0%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"20\"\n        aria-valuemin=\"10\"\n        aria-valuenow=\"10\"\n        aria-valuetext=\"10%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 0%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 10. with showValue 1`] = `\n<div\n  class=\"slider valueShown positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 0%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"0\"\n        aria-valuetext=\"0%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 0%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          0%\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 11. with valueFormatter 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 0%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"0\"\n        aria-valuetext=\"--0GB--\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 0%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 12. with value (controlled component) 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 12%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"12\"\n        aria-valuetext=\"12%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 12%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 13. with value, valueText (controlled component) 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 15%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"15\"\n        aria-valuetext=\"15kg\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 15%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 14. with indicateSelection 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 0%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"0\"\n        aria-valuetext=\"0%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 0%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n  <div\n    class=\"infix postfix\"\n    style=\"width: 60px;\"\n  >\n    <div\n      data-testid=\"mock-text-field-comp\"\n    >\n      {\"value\":\"0%\",\"className\":\"selectionIndicator\"}\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 15. with prefix (string) and postfix (Icon) 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"infix prefix txt\"\n  >\n    Vol\n  </div>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 0%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"0\"\n        aria-valuetext=\"0%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 0%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n  <div\n    class=\"infix postfix\"\n  >\n    <div\n      data-testid=\"mock-icon\"\n    >\n      {\"clickable\":false,\"size\":18,\"ignoreFocusStyle\":true,\"icon\":\"Sound\"}\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 16. with prefix (custom) and postfix (render-props) 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"infix prefix\"\n  >\n    <div>\n      Custom component\n    </div>\n  </div>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 0%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"0\"\n        aria-valuetext=\"0%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 0%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n  <div\n    class=\"infix postfix\"\n  >\n    Render Props result: 0% (0)\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 17. with ranged (ranged slider) 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 100%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"0\"\n        aria-valuetext=\"0%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 0%;\"\n        tabindex=\"0\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"100\"\n        aria-valuetext=\"100%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-1\"\n        role=\"slider\"\n        style=\"left: 100%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 18. ranged slider with options 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 25%; width: 25%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"50\"\n        aria-valuemin=\"10\"\n        aria-valuenow=\"20\"\n        aria-valuetext=\"20%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 25%;\"\n        tabindex=\"0\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"50\"\n        aria-valuemin=\"10\"\n        aria-valuenow=\"30\"\n        aria-valuetext=\"30%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-1\"\n        role=\"slider\"\n        style=\"left: 50%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Slider/__tests__/__snapshots__/Slider.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`Slider renders correctly > 01. with empty props 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 0%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"0\"\n        aria-valuetext=\"0%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 0%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 02. with aria-label 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 0%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-label=\"My Slider\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"0\"\n        aria-valuetext=\"0%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 0%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 03. with aria-labelledby 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 0%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-labelledby=\"id-of-the-custom-label\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"0\"\n        aria-valuetext=\"0%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 0%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 04. with custom className 1`] = `\n<div\n  class=\"slider positionTop slide-me\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 0%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"0\"\n        aria-valuetext=\"0%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 0%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 05. with id and data-testid 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"my-slider\"\n  id=\"my-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"my-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"my-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 0%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"0\"\n        aria-valuetext=\"0%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"my-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 0%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 06. with disabled 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small disabled\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 0%;\"\n      />\n      <div\n        aria-disabled=\"true\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"0\"\n        aria-valuetext=\"0%\"\n        class=\"thumb small\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 0%;\"\n        tabindex=\"-1\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 07. with color 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small positive\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track positive\"\n      />\n      <div\n        class=\"filledTrack positive\"\n        style=\"left: 0%; width: 0%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"0\"\n        aria-valuetext=\"0%\"\n        class=\"thumb positive small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 0%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 08. with size 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base large\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail large\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 0%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"0\"\n        aria-valuetext=\"0%\"\n        class=\"thumb large notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 0%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 09. with min, max, and step 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 0%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"20\"\n        aria-valuemin=\"10\"\n        aria-valuenow=\"10\"\n        aria-valuetext=\"10%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 0%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 10. with showValue 1`] = `\n<div\n  class=\"slider valueShown positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 0%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"0\"\n        aria-valuetext=\"0%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 0%;\"\n        tabindex=\"0\"\n      >\n        <label\n          class=\"label colorPrimary positionTop\"\n        >\n          0%\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 11. with valueFormatter 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 0%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"0\"\n        aria-valuetext=\"--0GB--\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 0%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 12. with value (controlled component) 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 12%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"12\"\n        aria-valuetext=\"12%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 12%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 13. with value, valueText (controlled component) 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 15%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"15\"\n        aria-valuetext=\"15kg\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 15%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 14. with indicateSelection 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 0%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"0\"\n        aria-valuetext=\"0%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 0%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n  <div\n    class=\"infix postfix\"\n    style=\"width: 60px;\"\n  >\n    <div\n      data-testid=\"mock-text-field-comp\"\n    >\n      {\"value\":\"0%\",\"className\":\"selectionIndicator\"}\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 15. with prefix (string) and postfix (Icon) 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"infix prefix txt\"\n  >\n    Vol\n  </div>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 0%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"0\"\n        aria-valuetext=\"0%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 0%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n  <div\n    class=\"infix postfix\"\n  >\n    <div\n      data-testid=\"mock-icon\"\n    >\n      {\"clickable\":false,\"size\":18,\"ignoreFocusStyle\":true,\"icon\":\"Sound\"}\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 16. with prefix (custom) and postfix (render-props) 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"infix prefix\"\n  >\n    <div>\n      Custom component\n    </div>\n  </div>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 0%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"0\"\n        aria-valuetext=\"0%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 0%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n  <div\n    class=\"infix postfix\"\n  >\n    Render Props result: 0% (0)\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 17. with ranged (ranged slider) 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 0%; width: 100%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"0\"\n        aria-valuetext=\"0%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 0%;\"\n        tabindex=\"0\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"100\"\n        aria-valuemin=\"0\"\n        aria-valuenow=\"100\"\n        aria-valuetext=\"100%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-1\"\n        role=\"slider\"\n        style=\"left: 100%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Slider renders correctly > 18. ranged slider with options 1`] = `\n<div\n  class=\"slider positionTop\"\n  data-testid=\"monday-slider\"\n>\n  <div\n    class=\"base small\"\n    data-testid=\"monday-slider__base\"\n  >\n    <div\n      class=\"rail small\"\n      data-testid=\"monday-slider__rail\"\n    >\n      <div\n        class=\"track\"\n      />\n      <div\n        class=\"filledTrack\"\n        style=\"left: 25%; width: 25%;\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"50\"\n        aria-valuemin=\"10\"\n        aria-valuenow=\"20\"\n        aria-valuetext=\"20%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-0\"\n        role=\"slider\"\n        style=\"left: 25%;\"\n        tabindex=\"0\"\n      />\n      <div\n        aria-disabled=\"false\"\n        aria-valuemax=\"50\"\n        aria-valuemin=\"10\"\n        aria-valuenow=\"30\"\n        aria-valuetext=\"30%\"\n        class=\"thumb small notDisabledThumb\"\n        data-testid=\"monday-slider__thumb-1\"\n        role=\"slider\"\n        style=\"left: 50%;\"\n        tabindex=\"0\"\n      />\n    </div>\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Slider/__tests__/sliderTestUtils.tsx",
    "content": "import React from \"react\";\nimport { render, screen } from \"@testing-library/react\";\nimport Slider from \"../Slider\";\n\nexport const SLIDER_LABEL = \"my-slider\";\n\nexport async function renderSliderInNonRangeMode(props = {}) {\n  const renderResult = render(<Slider aria-label={SLIDER_LABEL} defaultValue={20} {...props} />);\n  // noinspection JSCheckFunctionSignatures\n  const elThumb = await screen.findByLabelText(SLIDER_LABEL);\n  return { ...renderResult, elThumb };\n}\n\nexport async function renderSliderInRangeMode(props = {}) {\n  const renderResult = render(<Slider ranged={true} defaultValue={[25, 65]} {...props} />);\n  // noinspection JSCheckFunctionSignatures\n  const elThumbStart = await screen.findByTestId(\"monday-slider__thumb-0\");\n  // noinspection JSCheckFunctionSignatures\n  const elThumbEnd = await screen.findByTestId(\"monday-slider__thumb-1\");\n  return { ...renderResult, elThumbStart, elThumbEnd };\n}\n\nexport async function renderSliderForSnapshots(props, dataTestId = \"monday-slider__thumb-0\") {\n  const { asFragment } = render(<Slider {...props} />);\n  // noinspection JSCheckFunctionSignatures\n  await screen.findByTestId(dataTestId);\n  return asFragment().firstChild;\n}\n"
  },
  {
    "path": "packages/core/src/components/Slider/index.ts",
    "content": "export { default as Slider, type SliderProps } from \"./Slider\";\n\nexport * from \"./Slider.types\";\n"
  },
  {
    "path": "packages/core/src/components/SplitButton/SplitButton.module.scss",
    "content": ".button {\n  display: inline-flex;\n  border-radius: var(--border-radius-small);\n  transition: var(--motion-productive-short) transform,\n    var(--motion-productive-medium) var(--motion-timing-transition) min-width;\n}\n\n.button .mainButton {\n  margin-inline-end: 0;\n}\n\n.button .secondaryButton {\n  margin-inline-start: 0;\n}\n\n.secondaryButtonWrapper .secondaryButtonIconWrapper {\n  display: inline-flex;\n  padding: 0 4px;\n}\n\n.active {\n  transform: scale(0.95);\n}\n\n.disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.kindTertiary.colorPrimary.mainActive .mainButton {\n  background-color: var(--primary-selected-color);\n}\n\n.kindTertiary.colorPrimary.mainActive .mainButton:hover {\n  background-color: var(--primary-selected-hover-color);\n}\n\n.kindTertiary.colorPrimary.mainActive .secondaryButton {\n  background-color: var(--primary-selected-color);\n}\n\n.kindTertiary.colorPrimary.mainActive .secondaryButton:hover {\n  background-color: var(--primary-selected-hover-color);\n}\n\n.kindTertiary.colorPrimary.mainActive.splitContentOpen.splitContentOpen .secondaryButton,\n.kindTertiary.colorPrimary.mainActive.splitContentOpen.splitContentOpen .secondaryButton:hover,\n.kindTertiary.colorPrimary.mainActive.hovered.splitContentOpen .secondaryButton,\n.kindTertiary.colorPrimary.mainActive.hovered.splitContentOpen .secondaryButton:hover {\n  color: var(--primary-color);\n}\n\n.kindTertiary.colorBrand.mainActive .mainButton {\n  background-color: var(--brand-selected-color);\n}\n\n.kindTertiary.colorBrand.mainActive .secondaryButton {\n  background-color: var(--brand-selected-color);\n}\n\n.kindTertiary.colorBrand.mainActive.splitContentOpen.splitContentOpen .secondaryButton,\n.kindTertiary.colorBrand.mainActive.splitContentOpen.splitContentOpen .secondaryButton:hover,\n.kindTertiary.colorBrand.mainActive.hovered.splitContentOpen .secondaryButton,\n.kindTertiary.colorBrand.mainActive.hovered.splitContentOpen .secondaryButton:hover {\n  color: var(--brand-color);\n}\n\n.kindTertiary.colorPositive.splitContentOpen .secondaryButton,\n.kindTertiary.colorPositive:hover .secondaryButton,\n.kindTertiary.colorPositive:focus .secondaryButton {\n  border-color: transparent;\n  background-color: var(--positive-color-selected);\n}\n\n.kindTertiary.colorPositive.splitContentOpen .mainButton,\n.kindTertiary.colorPositive:hover .mainButton,\n.kindTertiary.colorPositive:focus .mainButton {\n  background-color: var(--positive-color-selected);\n}\n\n.kindTertiary.colorNegative.splitContentOpen .secondaryButton,\n.kindTertiary.colorNegative:hover .secondaryButton,\n.kindTertiary.colorNegative:focus .secondaryButton {\n  border-color: transparent;\n  background-color: var(--negative-color-selected);\n}\n\n.kindTertiary.colorNegative.splitContentOpen .mainButton,\n.kindTertiary.colorNegative:hover .mainButton,\n.kindTertiary.colorNegative:focus .mainButton {\n  background-color: var(--negative-color-selected);\n}\n\n.kindTertiary .secondaryButton {\n  border-inline-start: 1px solid transparent;\n  margin-inline-start: 1px;\n}\n\n.kindPrimary.disabled .secondaryButton {\n  border-inline-start: 1px solid;\n  border-color: var(--ui-border-color);\n}\n\n.kindPrimary:not(.disabled).colorPrimary.mainActive .secondaryButton {\n  background-color: var(--primary-hover-color);\n  border-color: var(--text-color-on-primary);\n}\n\n.kindPrimary:not(.disabled).colorPrimary .secondaryButton {\n  border-inline-start: 1px solid;\n  border-color: var(--primary-hover-color);\n}\n\n.kindPrimary:not(.disabled).colorBrand.mainActive .secondaryButton {\n  background-color: var(--brand-hover-color);\n  border-color: var(--text-color-on-primary);\n}\n\n.kindPrimary:not(.disabled).colorBrand .secondaryButton {\n  border-inline-start: 1px solid;\n  border-color: var(--brand-hover-color);\n}\n\n.kindPrimary:not(.disabled).colorPositive .secondaryButton {\n  border-inline-start: 1px solid;\n  border-color: var(--positive-color-hover);\n}\n\n.kindPrimary:not(.disabled).colorNegative .secondaryButton {\n  border-inline-start: 1px solid;\n  border-color: var(--negative-color-hover);\n}\n\n.kindPrimary:not(.disabled).colorOnPrimaryColor .secondaryButton {\n  border-inline-start: 1px solid;\n  border-color: var(--color-ui_grey);\n}\n\n.kindSecondary .mainButton {\n  border-inline-end: none;\n}\n\n.kindSecondary.colorPrimary.mainActive .mainButton {\n  background-color: var(--primary-selected-color);\n}\n\n.kindSecondary.colorPrimary.mainActive .mainButton:hover {\n  background-color: var(--primary-selected-hover-color);\n}\n\n.kindSecondary.colorPrimary.mainActive .secondaryButton {\n  background-color: var(--primary-selected-color);\n  border-color: var(--primary-color);\n}\n\n.kindSecondary.colorPrimary.splitContentOpen .secondaryButton {\n  color: var(--primary-color);\n  border-color: var(--primary-color);\n  background-color: var(--primary-selected-color);\n}\n\n.kindSecondary.colorPrimary.splitContentOpen .secondaryButton:hover {\n  background-color: var(--primary-selected-hover-color);\n}\n\n.kindSecondary.colorBrand.mainActive .mainButton {\n  background-color: var(--brand-selected-color);\n}\n\n.kindSecondary.colorBrand.mainActive .secondaryButton {\n  background-color: var(--brand-selected-color);\n  border-color: var(--brand-color);\n}\n\n.kindSecondary.colorBrand.splitContentOpen .secondaryButton,\n.kindSecondary.colorBrand.splitContentOpen .secondaryButton:hover {\n  color: var(--brand-color);\n  border-color: var(--brand-color);\n  background-color: var(--brand-selected-color);\n}\n"
  },
  {
    "path": "packages/core/src/components/SplitButton/SplitButton.tsx",
    "content": "/* eslint-disable react/jsx-props-no-spreading */\nimport { camelCase } from \"es-toolkit\";\nimport { getStyle, NOOP, isInsideClass } from \"@vibe/shared\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\n// Libraries import\nimport React, { type ReactElement, useCallback, useMemo, useRef, useState } from \"react\";\n// Constants import\nimport {\n  DEFAULT_DIALOG_HIDE_TRIGGER,\n  DEFAULT_DIALOG_SHOW_TRIGGER,\n  DIALOG_MOVE_BY,\n  ENTER_KEYS,\n  SECONDARY_BUTTON_ARIA_LABEL,\n  SECONDARY_BUTTON_WRAPPER_CLASSNAME,\n  type SplitButtonSecondaryContentPositionType\n} from \"./SplitButtonConstants\";\n// Utils import\n\n// Hooks import\nimport useKeyEvent from \"../../hooks/useKeyEvent\";\nimport useEventListener from \"../../hooks/useEventListener\";\n// Components import\nimport { Button, type ButtonProps } from \"@vibe/button\";\nimport { DropdownChevronDown } from \"@vibe/icons\";\nimport {\n  DialogContentContainer,\n  type DialogSize,\n  type DialogStartingEdge,\n  type DialogTriggerEvent,\n  Dialog,\n  type DialogEvent,\n  type DialogPosition\n} from \"@vibe/dialog\";\nimport styles from \"./SplitButton.module.scss\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface SplitButtonProps extends ButtonProps {\n  /**\n   * The element or renderer that is displayed inside the dialog opened by clicking the secondary button.\n   */\n  secondaryDialogContent?: ReactElement | (() => string | ReactElement);\n  /**\n   * Callback fired when the secondary dialog is shown.\n   */\n  onSecondaryDialogDidShow?: () => void;\n  /**\n   * Callback fired when the secondary dialog is hidden.\n   */\n  onSecondaryDialogDidHide?: () => void;\n  /**\n   * The z-index applied to the secondary dialog.\n   */\n  zIndex?: number;\n  /**\n   * Class name applied to the wrapper of the secondary dialog.\n   */\n  secondaryDialogClassName?: string;\n  /**\n   * The position of the secondary dialog.\n   */\n  secondaryDialogPosition?: SplitButtonSecondaryContentPositionType;\n  /**\n   * The padding size inside the secondary dialog.\n   */\n  dialogPaddingSize?: DialogSize;\n  /**\n   * The CSS selector of the container where the dialog should be rendered.\n   */\n  dialogContainerSelector?: string;\n  /**\n   * If true, clicking inside the dialog will close it.\n   */\n  shouldCloseOnClickInsideDialog?: boolean;\n}\n\nconst SplitButton = ({\n  secondaryDialogContent,\n  onSecondaryDialogDidShow = NOOP,\n  onSecondaryDialogDidHide = NOOP,\n  shouldCloseOnClickInsideDialog,\n  zIndex = null,\n  secondaryDialogClassName = \"\",\n  secondaryDialogPosition = \"bottom-start\",\n  dialogContainerSelector,\n  dialogPaddingSize = \"medium\",\n  disabled,\n  // success mode not working right now, need to fix it in different pr\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  success,\n  loading,\n  kind = \"primary\",\n  color = \"primary\",\n  className,\n  leftIcon,\n  rightIcon,\n  onClick,\n  children,\n  marginLeft,\n  marginRight,\n  active,\n  id,\n  \"data-testid\": dataTestId,\n  ...buttonProps\n}: SplitButtonProps) => {\n  // State //\n  const [isDialogOpen, setDialogOpen] = useState(false);\n  const [isHovered, setIsHover] = useState(false);\n  const [isActive, setIsActive] = useState(false);\n\n  // Refs //\n  const ref = useRef(null);\n  const secondaryButtonRef = useRef(null);\n\n  // Callbacks //\n  const setHovered = useCallback(() => setIsHover(true), [setIsHover]);\n  const setNotHovered = useCallback(() => setIsHover(false), [setIsHover]);\n\n  const shouldSetActive = useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      if (disabled) return false;\n      return !isInsideClass(e.target as HTMLElement, SECONDARY_BUTTON_WRAPPER_CLASSNAME);\n    },\n    [disabled]\n  );\n\n  const setActive = useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      if (!shouldSetActive(e)) return;\n      setIsActive(true);\n    },\n    [setIsActive, shouldSetActive]\n  );\n  const setNotActive = useCallback(() => setIsActive(false), [setIsActive]);\n  const setActiveOnEnter = useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      if (!shouldSetActive(e)) return;\n      setIsActive(true);\n    },\n    [setIsActive, shouldSetActive]\n  );\n\n  const showDialog = useCallback(() => {\n    setDialogOpen(true);\n    onSecondaryDialogDidShow();\n  }, [setDialogOpen, onSecondaryDialogDidShow]);\n\n  const hideDialog = useCallback(\n    (_: DialogEvent, eventName: DialogTriggerEvent) => {\n      setDialogOpen(false);\n      onSecondaryDialogDidHide();\n      if (eventName === \"esckey\") {\n        secondaryButtonRef.current.focus();\n      }\n    },\n    [setDialogOpen, onSecondaryDialogDidHide]\n  );\n\n  // Event listeners //\n\n  // Used to set both buttons as hovered no matter what button was hovered\n  useEventListener({ eventName: \"mouseenter\", callback: setHovered, ref });\n  useEventListener({ eventName: \"mouseleave\", callback: setNotHovered, ref });\n\n  useEventListener({ eventName: \"mousedown\", callback: setActive, ref });\n  useEventListener({ eventName: \"mouseup\", callback: setNotActive, ref });\n\n  // Used to finish active transition if clicked on enter\n  useEventListener({ eventName: \"transitionend\", callback: setNotActive, ref });\n\n  // Key events\n  useKeyEvent({ keys: ENTER_KEYS, ref, callback: setActiveOnEnter });\n\n  const classNames = useMemo(\n    () =>\n      cx(\n        styles.button,\n        getStyle(styles, camelCase(\"kind-\" + kind)),\n        getStyle(styles, camelCase(\"color-\" + color)),\n        {\n          [styles.mainActive]: active,\n          [styles.active]: isActive,\n          [styles.splitContentOpen]: isDialogOpen,\n          [styles.hovered]: isHovered,\n          [styles.disabled]: disabled\n        },\n        className\n      ),\n    [className, kind, color, active, isActive, isDialogOpen, isHovered, disabled]\n  );\n\n  const dialogShowTrigger = useMemo(() => (disabled ? [] : DEFAULT_DIALOG_SHOW_TRIGGER), [disabled]);\n\n  const dialogHideTrigger = useMemo(() => {\n    if (shouldCloseOnClickInsideDialog)\n      return [...DEFAULT_DIALOG_HIDE_TRIGGER, \"onContentClick\"] as DialogTriggerEvent[];\n    return DEFAULT_DIALOG_HIDE_TRIGGER;\n  }, [shouldCloseOnClickInsideDialog]);\n\n  const actionsContent = useCallback(() => {\n    const content = typeof secondaryDialogContent === \"function\" ? secondaryDialogContent() : secondaryDialogContent;\n    return (\n      <DialogContentContainer type=\"popover\" size={dialogPaddingSize}>\n        {content}\n      </DialogContentContainer>\n    );\n  }, [secondaryDialogContent, dialogPaddingSize]);\n\n  const animationEdgePosition: DialogStartingEdge | undefined = useMemo(() => {\n    if (secondaryDialogPosition === \"bottom\") {\n      return undefined;\n    }\n    if (secondaryDialogPosition === \"bottom-start\") {\n      return \"bottom\";\n    }\n\n    return \"top\";\n  }, [secondaryDialogPosition]);\n\n  return (\n    <div\n      className={classNames}\n      ref={ref}\n      id={id}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.SPLIT_BUTTON, id)}\n      data-vibe={ComponentVibeId.SPLIT_BUTTON}\n    >\n      <Button\n        {\n          ...buttonProps /* We are enriching button with other props so we must use spreading */\n        }\n        preventClickAnimation\n        leftIcon={leftIcon}\n        rightIcon={rightIcon}\n        rightFlat\n        color={color}\n        kind={kind}\n        active={active}\n        onClick={onClick}\n        className={styles.mainButton}\n        marginLeft={marginLeft}\n        onFocus={setHovered}\n        onBlur={setNotHovered}\n        disabled={disabled}\n        loading={loading}\n        data-testid={getTestId(ComponentDefaultTestId.SPLIT_BUTTON_PRIMARY_BUTTON, id)}\n      >\n        {children}\n      </Button>\n      <div className={styles.secondaryButtonWrapper}>\n        <Dialog\n          wrapperClassName={secondaryDialogClassName}\n          zIndex={zIndex}\n          content={actionsContent}\n          position={secondaryDialogPosition as DialogPosition}\n          containerSelector={dialogContainerSelector}\n          startingEdge={animationEdgePosition}\n          animationType=\"expand\"\n          moveBy={DIALOG_MOVE_BY}\n          onDialogDidShow={showDialog}\n          onDialogDidHide={hideDialog}\n          showTrigger={dialogShowTrigger}\n          hideTrigger={dialogHideTrigger}\n        >\n          <Button\n            {...buttonProps}\n            ref={secondaryButtonRef}\n            preventClickAnimation\n            leftFlat\n            noSidePadding\n            color={color}\n            kind={kind}\n            className={styles.secondaryButton}\n            active={isDialogOpen}\n            marginRight={marginRight}\n            onFocus={setHovered}\n            onBlur={setNotHovered}\n            disabled={disabled}\n            aria-label={SECONDARY_BUTTON_ARIA_LABEL}\n            aria-haspopup\n            aria-expanded={isDialogOpen}\n            data-testid={getTestId(ComponentDefaultTestId.SPLIT_BUTTON_SECONDARY_BUTTON, id)}\n          >\n            <div className={styles.secondaryButtonIconWrapper}>\n              <DropdownChevronDown aria-hidden=\"true\" />\n            </div>\n          </Button>\n        </Dialog>\n      </div>\n    </div>\n  );\n};\n\nexport default SplitButton;\n"
  },
  {
    "path": "packages/core/src/components/SplitButton/SplitButtonConstants.ts",
    "content": "// Constants\nimport { keyCodes } from \"../../constants\";\nimport type { DialogTriggerEvent } from \"@vibe/dialog\";\n\nexport const DIALOG_MOVE_BY = { main: 8, secondary: 0 };\nexport const DEFAULT_DIALOG_SHOW_TRIGGER: DialogTriggerEvent[] = [\"click\"];\nexport const DEFAULT_DIALOG_HIDE_TRIGGER: DialogTriggerEvent[] = [\"clickoutside\", \"click\", \"esckey\"];\nexport const SECONDARY_BUTTON_WRAPPER_CLASSNAME = \"monday-style-split-button__secondary-button-wrapper\";\nexport const EMPTY_ARR: string[] = [];\n\nexport const ENTER_KEYS = [keyCodes.ENTER];\n\n//TODO Remove once change dialogPosition to const\nexport const DialogPosition = {\n  BOTTOM: \"bottom\",\n  BOTTOM_START: \"bottom-start\",\n  BOTTOM_END: \"bottom-end\"\n} as const;\n\nexport const SplitButtonSecondaryContentPosition = {\n  BOTTOM_START: DialogPosition.BOTTOM_START,\n  BOTTOM_MIDDLE: DialogPosition.BOTTOM,\n  BOTTOM_END: DialogPosition.BOTTOM_END\n} as const;\n\nexport type SplitButtonSecondaryContentPositionType =\n  (typeof SplitButtonSecondaryContentPosition)[keyof typeof SplitButtonSecondaryContentPosition];\n\nexport const SECONDARY_BUTTON_ARIA_LABEL = \"additional actions\";\n"
  },
  {
    "path": "packages/core/src/components/SplitButton/SplitButtonMenu/SplitButtonMenu.tsx",
    "content": "import React, { forwardRef, useRef } from \"react\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport Menu, { type MenuProps } from \"../../Menu/Menu/Menu\";\n\nexport type SplitButtonMenuProps = Omit<MenuProps, \"focusItemIndexOnMount\"> & { children: React.ReactNode };\n\nconst SplitButtonMenu = forwardRef(\n  ({ children, ...splitButtonMenuProps }: SplitButtonMenuProps, ref: React.ForwardedRef<HTMLElement>) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    return (\n      <Menu focusItemIndexOnMount={0} {...splitButtonMenuProps} ref={mergedRef}>\n        {children}\n      </Menu>\n    );\n  }\n);\n\nexport default SplitButtonMenu;\n"
  },
  {
    "path": "packages/core/src/components/SplitButton/SplitButtonMenu/__tests__/SplitButtonMenu.snapshot.test.tsx",
    "content": "import { beforeEach, afterEach, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport SplitButtonMenu from \"../SplitButtonMenu\";\nimport MenuItem from \"../../../Menu/MenuItem/MenuItem\";\nimport { mockRequestAnimationFrame, restoreRequestAnimationFrameMock } from \"../../../../tests/__tests__/test-utils\";\n\nconst SplitButtonMenuWithItems = (\n  <SplitButtonMenu id=\"menu\">\n    <MenuItem title=\"Test 1\" />\n    <MenuItem title=\"Test 2\" />\n  </SplitButtonMenu>\n);\n\ndescribe(\"SplitButtonMenu\", () => {\n  beforeEach(() => {\n    mockRequestAnimationFrame();\n  });\n\n  afterEach(() => {\n    restoreRequestAnimationFrameMock();\n  });\n\n  it(\"renders correctly\", () => {\n    const tree = renderer.create(SplitButtonMenuWithItems).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/SplitButton/SplitButtonMenu/__tests__/SplitButtonMenu.test.tsx",
    "content": "import { beforeEach, afterEach, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { render } from \"@testing-library/react\";\nimport SplitButtonMenu from \"../SplitButtonMenu\";\nimport MenuItem from \"../../../Menu/MenuItem/MenuItem\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../../tests/test-ids-utils\";\nimport { mockRequestAnimationFrame, restoreRequestAnimationFrameMock } from \"../../../../tests/__tests__/test-utils\";\n\nconst id = \"menu\";\nconst menuDataTestId = getTestId(ComponentDefaultTestId.MENU, id);\n\nconst renderSplitButtonMenu = () => {\n  return render(\n    <SplitButtonMenu id={id}>\n      <MenuItem title=\"Test 1\" />\n      <MenuItem title=\"Test 2\" />\n    </SplitButtonMenu>\n  );\n};\n\ndescribe(\"SplitButtonMenu\", () => {\n  beforeEach(() => {\n    mockRequestAnimationFrame();\n  });\n\n  afterEach(() => {\n    restoreRequestAnimationFrameMock();\n  });\n\n  it(\"renders correctly\", () => {\n    const { container } = renderSplitButtonMenu();\n    expect(container).toBeInTheDocument();\n  });\n\n  it(\"set first item as aria-activedescendant\", () => {\n    const { getByTestId } = renderSplitButtonMenu();\n    expect(getByTestId(menuDataTestId)).toHaveAttribute(\"aria-activedescendant\", `${id}-item-0`);\n  });\n\n  it(\"should focus first menu item on mount\", () => {\n    const { getByTestId } = renderSplitButtonMenu();\n    const firstMenuItemId = `${getTestId(ComponentDefaultTestId.MENU_ITEM)}_0`;\n    expect(getByTestId(firstMenuItemId)).toHaveFocus();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/SplitButton/SplitButtonMenu/__tests__/__snapshots__/SplitButtonMenu.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`SplitButtonMenu > renders correctly 1`] = `\n<ul\n  aria-label=\"Menu\"\n  className=\"menu medium\"\n  data-testid=\"menu_menu\"\n  data-vibe=\"Menu\"\n  id=\"menu\"\n  onBlur={[Function]}\n  onFocus={[Function]}\n  onMouseOver={[Function]}\n  role=\"menu\"\n  tabIndex={0}\n>\n  <li\n    aria-selected={true}\n    className=\"typography primary start singleLineEllipsis text text2Normal item focused initialSelected\"\n    data-testid=\"menu-item_0\"\n    id=\"menu-item-0\"\n    onClick={[Function]}\n    role=\"menuitem\"\n    tabIndex={-1}\n  >\n    <div\n      className=\"title\"\n    >\n      Test 1\n    </div>\n    <div\n      className=\"container directionRow justifyStart alignCenter\"\n      style={\n        {\n          \"gap\": \"var(--space-4)\",\n        }\n      }\n    />\n  </li>\n  <li\n    aria-selected={false}\n    className=\"typography primary start singleLineEllipsis text text2Normal item initialSelected\"\n    data-testid=\"menu-item_1\"\n    id=\"menu-item-1\"\n    onClick={[Function]}\n    role=\"menuitem\"\n    tabIndex={-1}\n  >\n    <div\n      className=\"title\"\n    >\n      Test 2\n    </div>\n    <div\n      className=\"container directionRow justifyStart alignCenter\"\n      style={\n        {\n          \"gap\": \"var(--space-4)\",\n        }\n      }\n    />\n  </li>\n</ul>\n`;\n"
  },
  {
    "path": "packages/core/src/components/SplitButton/SplitButtonMenu/__tests__/test-utils.ts",
    "content": "import { vi } from \"vitest\";\n\nlet rafSpy: ReturnType<typeof vi.spyOn>;\n\nexport const mockRequestAnimationFrame = () => {\n  rafSpy = vi.spyOn(window, \"requestAnimationFrame\").mockImplementation((cb: FrameRequestCallback) => {\n    cb(0);\n    return 0;\n  });\n};\n\nexport const restoreRequestAnimationFrameMock = () => {\n  rafSpy.mockRestore();\n};\n"
  },
  {
    "path": "packages/core/src/components/SplitButton/__tests__/SplitButton.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport SplitButton from \"../SplitButton\";\nimport { Delete } from \"@vibe/icons\";\nimport SplitButtonMenu from \"../SplitButtonMenu/SplitButtonMenu\";\nimport MenuItem from \"../../Menu/MenuItem/MenuItem\";\nimport Menu from \"../../Menu/Menu/Menu\";\n\nconst secondaryContentText = \"Test secondary dialog content\";\nconst secondaryContent = <div>{secondaryContentText}</div>;\nconst SplitButtonMenuWithItems = (\n  <SplitButtonMenu id=\"menu\">\n    <MenuItem title=\"Test 1\" />\n    <MenuItem title=\"Test 2\" />\n  </SplitButtonMenu>\n);\nconst CustomMenuWithItems = (\n  <Menu id=\"menu\">\n    <MenuItem title=\"Test 1\" />\n    <MenuItem title=\"Test 2\" />\n  </Menu>\n);\n\ndescribe(\"SplitButton renders correctly\", () => {\n  it(\"with only required props\", () => {\n    const tree = renderer\n      .create(<SplitButton secondaryDialogContent={secondaryContent}>split button</SplitButton>)\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with disabled\", () => {\n    const tree = renderer\n      .create(\n        <SplitButton secondaryDialogContent={secondaryContent} disabled>\n          split button\n        </SplitButton>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with tertiary button\", () => {\n    const tree = renderer\n      .create(\n        <SplitButton secondaryDialogContent={secondaryContent} kind=\"tertiary\">\n          split button\n        </SplitButton>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with medium dialog padding size\", () => {\n    const tree = renderer\n      .create(\n        <SplitButton secondaryDialogContent={secondaryContent} dialogPaddingSize=\"medium\">\n          split button\n        </SplitButton>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with secondary position\", () => {\n    const tree = renderer\n      .create(\n        <SplitButton secondaryDialogContent={secondaryContent} secondaryDialogPosition=\"bottom-end\">\n          split button\n        </SplitButton>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with zIndex\", () => {\n    const tree = renderer\n      .create(\n        <SplitButton secondaryDialogContent={secondaryContent} zIndex={2}>\n          split button\n        </SplitButton>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with left icon\", () => {\n    const tree = renderer\n      .create(\n        <SplitButton secondaryDialogContent={secondaryContent} leftIcon={Delete}>\n          split button\n        </SplitButton>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with right icon\", () => {\n    const tree = renderer\n      .create(\n        <SplitButton secondaryDialogContent={secondaryContent} rightIcon={Delete}>\n          split button\n        </SplitButton>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with SplitButtonMenu\", () => {\n    const tree = renderer\n      .create(<SplitButton secondaryDialogContent={SplitButtonMenuWithItems}>split button</SplitButton>)\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with custom menu\", () => {\n    const tree = renderer\n      .create(<SplitButton secondaryDialogContent={CustomMenuWithItems}>split button</SplitButton>)\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/SplitButton/__tests__/SplitButton.test.tsx",
    "content": "import { vi, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { fireEvent, render, screen, waitFor } from \"@testing-library/react\";\nimport { act } from \"react-dom/test-utils\";\nimport SplitButton from \"../SplitButton\";\nimport userEvent from \"@testing-library/user-event\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport SplitButtonMenu from \"../SplitButtonMenu/SplitButtonMenu\";\nimport MenuItem from \"../../Menu/MenuItem/MenuItem\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\n\nconst text = \"Click Me!\";\nconst className = \"test-class\";\nconst secondaryContentText = \"Test secondary dialog content\";\nconst secondaryContent = <div>{secondaryContentText}</div>;\nconst splitMenuId = \"split-menu\";\nconst menuSecondaryContent = () => {\n  return (\n    <SplitButtonMenu id={splitMenuId}>\n      <MenuItem title=\"Test 1\" />\n      <MenuItem title=\"Test 2\" />\n    </SplitButtonMenu>\n  );\n};\n\nconst ENTER_KEY = \"{Enter}\";\n\nconst getSecondaryButton = splitButtonComponent => {\n  return splitButtonComponent.getByTestId(ComponentDefaultTestId.SPLIT_BUTTON_SECONDARY_BUTTON);\n};\n\nconst getPrimaryButton = splitButtonComponent => {\n  return splitButtonComponent.getByTestId(ComponentDefaultTestId.SPLIT_BUTTON_PRIMARY_BUTTON);\n};\n\nconst renderComponent = ({ ...props } = {}) => {\n  return render(\n    <SplitButton {...props} className={className} secondaryDialogContent={secondaryContent}>\n      {text}\n    </SplitButton>\n  );\n};\n\nvi.useFakeTimers();\n\ndescribe(\"SplitButton tests\", () => {\n  it(\"opens the secondary content dialog on click\", async () => {\n    const splitButtonComponent = renderComponent();\n    const arrowButton = getSecondaryButton(splitButtonComponent);\n    fireEvent.click(arrowButton);\n    vi.runAllTimers();\n    const expectedSecondaryDialog = await screen.findByText(secondaryContentText, {}, { timeout: 10000 });\n    expect(expectedSecondaryDialog).toBeTruthy();\n  });\n\n  it(\"doesn't open the secondary content dialog on click\", () => {\n    const splitButtonComponent = renderComponent({ disabled: true });\n    const arrowButton = getSecondaryButton(splitButtonComponent);\n    fireEvent.click(arrowButton);\n    const expectedSecondaryDialog = screen.queryByText(secondaryContentText);\n    expect(expectedSecondaryDialog).toBeFalsy();\n  });\n\n  it(\"should move between buttons with tab\", () => {\n    const splitButtonComponent = renderComponent();\n    userEvent.tab();\n    expect(getPrimaryButton(splitButtonComponent)).toHaveFocus();\n    userEvent.tab();\n    expect(getSecondaryButton(splitButtonComponent)).toHaveFocus();\n  });\n\n  describe(\"callbacks\", () => {\n    it(\"calls onSecondaryDialogDidShow when click on secondaryButton\", () => {\n      const onSecondaryDialogDidShow = vi.fn();\n      const splitButtonComponent = renderComponent({\n        onSecondaryDialogDidShow\n      });\n      const arrowButton = getSecondaryButton(splitButtonComponent);\n      act(() => {\n        fireEvent.click(arrowButton);\n        vi.advanceTimersByTime(1000);\n      });\n      expect(onSecondaryDialogDidShow.mock.calls.length).toBe(1);\n    });\n\n    it(\"calls onSecondaryDialogDidHide when click on secondaryButton\", async () => {\n      const onSecondaryDialogDidHideMock = vi.fn();\n      const splitButtonComponent = renderComponent({\n        onSecondaryDialogDidHide: onSecondaryDialogDidHideMock\n      });\n      const arrowButton = getSecondaryButton(splitButtonComponent);\n\n      act(() => {\n        fireEvent.click(arrowButton);\n        vi.advanceTimersByTime(1000);\n      });\n\n      act(() => {\n        fireEvent.click(arrowButton);\n        vi.runAllTimers();\n      });\n\n      expect(onSecondaryDialogDidHideMock.mock.calls.length).toBe(1);\n    });\n\n    it(\"does call onClick when click on primaryButton\", () => {\n      const primaryButtonOnClick = vi.fn();\n      const splitButtonComponent = renderComponent({ onClick: primaryButtonOnClick });\n      const primaryButton = getPrimaryButton(splitButtonComponent);\n      act(() => {\n        fireEvent.click(primaryButton);\n      });\n      expect(primaryButtonOnClick.mock.calls.length).toBe(1);\n    });\n\n    it(\"doesn't call onClick when click on secondaryButton\", () => {\n      const primaryButtonOnClick = vi.fn();\n      const splitButtonComponent = renderComponent({ onClick: primaryButtonOnClick });\n      const arrowButton = getSecondaryButton(splitButtonComponent);\n      act(() => {\n        fireEvent.click(arrowButton);\n      });\n      expect(primaryButtonOnClick.mock.calls.length).toBe(0);\n    });\n  });\n\n  describe(\"keyboard accessibility\", () => {\n    it(\"does call onClick when enter pressed on primaryButton\", () => {\n      const primaryButtonOnClick = vi.fn();\n      const splitButtonComponent = renderComponent({ onClick: primaryButtonOnClick });\n      const primaryButton = getPrimaryButton(splitButtonComponent);\n      act(() => {\n        primaryButton.focus();\n        userEvent.keyboard(ENTER_KEY);\n      });\n      expect(primaryButtonOnClick.mock.calls.length).toBe(1);\n    });\n\n    it(\"opens the secondary content dialog when enter pressed on secondaryButton\", async () => {\n      const splitButtonComponent = renderComponent();\n      const arrowButton = getSecondaryButton(splitButtonComponent);\n      act(() => {\n        arrowButton.focus();\n        userEvent.keyboard(ENTER_KEY);\n        vi.runAllTimers();\n      });\n      const expectedSecondaryDialog = await screen.findByText(secondaryContentText, {});\n      expect(expectedSecondaryDialog).toBeTruthy();\n    });\n  });\n\n  describe(\"with SplitButtonMenu\", () => {\n    it(\"should focus on first menu item\", async () => {\n      const splitButtonComponent = render(\n        <SplitButton secondaryDialogContent={menuSecondaryContent}>{text}</SplitButton>\n      );\n      const arrowButton = getSecondaryButton(splitButtonComponent);\n      act(() => {\n        arrowButton.focus();\n        userEvent.keyboard(ENTER_KEY);\n      });\n      vi.runAllTimers();\n      let menu;\n      await waitFor(async () => {\n        menu = await splitButtonComponent.findByTestId(getTestId(ComponentDefaultTestId.MENU, splitMenuId));\n        expect(menu).toBeTruthy();\n      });\n\n      const firstMenuItemId = `${getTestId(ComponentDefaultTestId.MENU_ITEM)}_0`;\n      await waitFor(() => {\n        expect(splitButtonComponent.getByTestId(firstMenuItemId)).toHaveFocus();\n      });\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/SplitButton/__tests__/__snapshots__/SplitButton.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`SplitButton renders correctly > with SplitButtonMenu 1`] = `\n<div\n  className=\"button kindPrimary colorPrimary\"\n  data-testid=\"split-button\"\n  data-vibe=\"SplitButton\"\n>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    className=\"mainButton button sizeMedium kindPrimary colorPrimary rightFlat preventClickAnimation\"\n    data-testid=\"split-button-primary-button\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    type=\"button\"\n  >\n    split button\n  </button>\n  <div\n    className=\"secondaryButtonWrapper\"\n  >\n    <span\n      className=\"\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n    >\n      <button\n        aria-busy={false}\n        aria-disabled={false}\n        aria-expanded={false}\n        aria-haspopup={true}\n        aria-label=\"additional actions\"\n        className=\"secondaryButton button sizeMedium kindPrimary colorPrimary leftFlat preventClickAnimation noSidePadding\"\n        data-testid=\"split-button-secondary-button\"\n        data-vibe=\"Button\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onMouseDown={[Function]}\n        onMouseUp={[Function]}\n        type=\"button\"\n      >\n        <div\n          className=\"secondaryButtonIconWrapper\"\n        >\n          <svg\n            aria-hidden=\"true\"\n            fill=\"currentColor\"\n            height=\"20\"\n            viewBox=\"0 0 20 20\"\n            width=\"20\"\n          >\n            <path\n              d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n            />\n          </svg>\n        </div>\n      </button>\n    </span>\n  </div>\n</div>\n`;\n\nexports[`SplitButton renders correctly > with custom menu 1`] = `\n<div\n  className=\"button kindPrimary colorPrimary\"\n  data-testid=\"split-button\"\n  data-vibe=\"SplitButton\"\n>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    className=\"mainButton button sizeMedium kindPrimary colorPrimary rightFlat preventClickAnimation\"\n    data-testid=\"split-button-primary-button\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    type=\"button\"\n  >\n    split button\n  </button>\n  <div\n    className=\"secondaryButtonWrapper\"\n  >\n    <span\n      className=\"\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n    >\n      <button\n        aria-busy={false}\n        aria-disabled={false}\n        aria-expanded={false}\n        aria-haspopup={true}\n        aria-label=\"additional actions\"\n        className=\"secondaryButton button sizeMedium kindPrimary colorPrimary leftFlat preventClickAnimation noSidePadding\"\n        data-testid=\"split-button-secondary-button\"\n        data-vibe=\"Button\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onMouseDown={[Function]}\n        onMouseUp={[Function]}\n        type=\"button\"\n      >\n        <div\n          className=\"secondaryButtonIconWrapper\"\n        >\n          <svg\n            aria-hidden=\"true\"\n            fill=\"currentColor\"\n            height=\"20\"\n            viewBox=\"0 0 20 20\"\n            width=\"20\"\n          >\n            <path\n              d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n            />\n          </svg>\n        </div>\n      </button>\n    </span>\n  </div>\n</div>\n`;\n\nexports[`SplitButton renders correctly > with disabled 1`] = `\n<div\n  className=\"button kindPrimary colorPrimary disabled\"\n  data-testid=\"split-button\"\n  data-vibe=\"SplitButton\"\n>\n  <button\n    aria-busy={false}\n    aria-disabled={true}\n    className=\"mainButton button sizeMedium kindPrimary colorPrimary rightFlat preventClickAnimation disabled\"\n    data-testid=\"split-button-primary-button\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    tabIndex={-1}\n    type=\"button\"\n  >\n    split button\n  </button>\n  <div\n    className=\"secondaryButtonWrapper\"\n  >\n    <span\n      className=\"\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n    >\n      <button\n        aria-busy={false}\n        aria-disabled={true}\n        aria-expanded={false}\n        aria-haspopup={true}\n        aria-label=\"additional actions\"\n        className=\"secondaryButton button sizeMedium kindPrimary colorPrimary leftFlat preventClickAnimation noSidePadding disabled\"\n        data-testid=\"split-button-secondary-button\"\n        data-vibe=\"Button\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onMouseDown={[Function]}\n        onMouseUp={[Function]}\n        tabIndex={-1}\n        type=\"button\"\n      >\n        <div\n          className=\"secondaryButtonIconWrapper\"\n        >\n          <svg\n            aria-hidden=\"true\"\n            fill=\"currentColor\"\n            height=\"20\"\n            viewBox=\"0 0 20 20\"\n            width=\"20\"\n          >\n            <path\n              d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n            />\n          </svg>\n        </div>\n      </button>\n    </span>\n  </div>\n</div>\n`;\n\nexports[`SplitButton renders correctly > with left icon 1`] = `\n<div\n  className=\"button kindPrimary colorPrimary\"\n  data-testid=\"split-button\"\n  data-vibe=\"SplitButton\"\n>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    className=\"mainButton button sizeMedium kindPrimary colorPrimary rightFlat preventClickAnimation\"\n    data-testid=\"split-button-primary-button\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    type=\"button\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon leftIcon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      width=\"20\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M8.30035 1.86462C7.77994 1.86462 7.29477 2.08976 6.94732 2.46719C6.60179 2.84253 6.41724 3.33927 6.41724 3.84552V4.32642H4.901H2.63477C2.22055 4.32642 1.88477 4.6622 1.88477 5.07642C1.88477 5.49063 2.22055 5.82642 2.63477 5.82642H4.151V16.1545C4.151 16.6608 4.33556 17.1575 4.68109 17.5328C5.02853 17.9103 5.51371 18.1354 6.03411 18.1354H13.9659C14.4863 18.1354 14.9715 17.9103 15.3189 17.5328C15.6645 17.1575 15.849 16.6608 15.849 16.1545V5.82642H17.3652C17.7794 5.82642 18.1152 5.49063 18.1152 5.07642C18.1152 4.6622 17.7794 4.32642 17.3652 4.32642H15.099H13.5828V3.84552C13.5828 3.33927 13.3982 2.84253 13.0527 2.46719C12.7053 2.08976 12.2201 1.86462 11.6997 1.86462H8.30035ZM7.16447 5.82642C7.16539 5.82642 7.16631 5.82642 7.16724 5.82642H12.8328C12.8337 5.82642 12.8346 5.82642 12.8356 5.82642H14.349V16.1545C14.349 16.3012 14.2948 16.4306 14.2153 16.5169C14.1378 16.6012 14.0465 16.6354 13.9659 16.6354H6.03411C5.95348 16.6354 5.86223 16.6012 5.78468 16.5169C5.7052 16.4306 5.651 16.3012 5.651 16.1545V5.82642H7.16447ZM12.0828 4.32642V3.84552C12.0828 3.69887 12.0286 3.56943 11.9491 3.4831C11.8716 3.39886 11.7803 3.36462 11.6997 3.36462H8.30035C8.21972 3.36462 8.12847 3.39886 8.05091 3.4831C7.97144 3.56943 7.91724 3.69887 7.91724 3.84552V4.32642L12.0828 4.32642Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n    split button\n  </button>\n  <div\n    className=\"secondaryButtonWrapper\"\n  >\n    <span\n      className=\"\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n    >\n      <button\n        aria-busy={false}\n        aria-disabled={false}\n        aria-expanded={false}\n        aria-haspopup={true}\n        aria-label=\"additional actions\"\n        className=\"secondaryButton button sizeMedium kindPrimary colorPrimary leftFlat preventClickAnimation noSidePadding\"\n        data-testid=\"split-button-secondary-button\"\n        data-vibe=\"Button\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onMouseDown={[Function]}\n        onMouseUp={[Function]}\n        type=\"button\"\n      >\n        <div\n          className=\"secondaryButtonIconWrapper\"\n        >\n          <svg\n            aria-hidden=\"true\"\n            fill=\"currentColor\"\n            height=\"20\"\n            viewBox=\"0 0 20 20\"\n            width=\"20\"\n          >\n            <path\n              d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n            />\n          </svg>\n        </div>\n      </button>\n    </span>\n  </div>\n</div>\n`;\n\nexports[`SplitButton renders correctly > with medium dialog padding size 1`] = `\n<div\n  className=\"button kindPrimary colorPrimary\"\n  data-testid=\"split-button\"\n  data-vibe=\"SplitButton\"\n>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    className=\"mainButton button sizeMedium kindPrimary colorPrimary rightFlat preventClickAnimation\"\n    data-testid=\"split-button-primary-button\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    type=\"button\"\n  >\n    split button\n  </button>\n  <div\n    className=\"secondaryButtonWrapper\"\n  >\n    <span\n      className=\"\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n    >\n      <button\n        aria-busy={false}\n        aria-disabled={false}\n        aria-expanded={false}\n        aria-haspopup={true}\n        aria-label=\"additional actions\"\n        className=\"secondaryButton button sizeMedium kindPrimary colorPrimary leftFlat preventClickAnimation noSidePadding\"\n        data-testid=\"split-button-secondary-button\"\n        data-vibe=\"Button\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onMouseDown={[Function]}\n        onMouseUp={[Function]}\n        type=\"button\"\n      >\n        <div\n          className=\"secondaryButtonIconWrapper\"\n        >\n          <svg\n            aria-hidden=\"true\"\n            fill=\"currentColor\"\n            height=\"20\"\n            viewBox=\"0 0 20 20\"\n            width=\"20\"\n          >\n            <path\n              d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n            />\n          </svg>\n        </div>\n      </button>\n    </span>\n  </div>\n</div>\n`;\n\nexports[`SplitButton renders correctly > with only required props 1`] = `\n<div\n  className=\"button kindPrimary colorPrimary\"\n  data-testid=\"split-button\"\n  data-vibe=\"SplitButton\"\n>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    className=\"mainButton button sizeMedium kindPrimary colorPrimary rightFlat preventClickAnimation\"\n    data-testid=\"split-button-primary-button\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    type=\"button\"\n  >\n    split button\n  </button>\n  <div\n    className=\"secondaryButtonWrapper\"\n  >\n    <span\n      className=\"\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n    >\n      <button\n        aria-busy={false}\n        aria-disabled={false}\n        aria-expanded={false}\n        aria-haspopup={true}\n        aria-label=\"additional actions\"\n        className=\"secondaryButton button sizeMedium kindPrimary colorPrimary leftFlat preventClickAnimation noSidePadding\"\n        data-testid=\"split-button-secondary-button\"\n        data-vibe=\"Button\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onMouseDown={[Function]}\n        onMouseUp={[Function]}\n        type=\"button\"\n      >\n        <div\n          className=\"secondaryButtonIconWrapper\"\n        >\n          <svg\n            aria-hidden=\"true\"\n            fill=\"currentColor\"\n            height=\"20\"\n            viewBox=\"0 0 20 20\"\n            width=\"20\"\n          >\n            <path\n              d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n            />\n          </svg>\n        </div>\n      </button>\n    </span>\n  </div>\n</div>\n`;\n\nexports[`SplitButton renders correctly > with right icon 1`] = `\n<div\n  className=\"button kindPrimary colorPrimary\"\n  data-testid=\"split-button\"\n  data-vibe=\"SplitButton\"\n>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    className=\"mainButton button sizeMedium kindPrimary colorPrimary rightFlat preventClickAnimation\"\n    data-testid=\"split-button-primary-button\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    type=\"button\"\n  >\n    split button\n    <svg\n      aria-hidden={true}\n      className=\"icon rightIcon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      width=\"20\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M8.30035 1.86462C7.77994 1.86462 7.29477 2.08976 6.94732 2.46719C6.60179 2.84253 6.41724 3.33927 6.41724 3.84552V4.32642H4.901H2.63477C2.22055 4.32642 1.88477 4.6622 1.88477 5.07642C1.88477 5.49063 2.22055 5.82642 2.63477 5.82642H4.151V16.1545C4.151 16.6608 4.33556 17.1575 4.68109 17.5328C5.02853 17.9103 5.51371 18.1354 6.03411 18.1354H13.9659C14.4863 18.1354 14.9715 17.9103 15.3189 17.5328C15.6645 17.1575 15.849 16.6608 15.849 16.1545V5.82642H17.3652C17.7794 5.82642 18.1152 5.49063 18.1152 5.07642C18.1152 4.6622 17.7794 4.32642 17.3652 4.32642H15.099H13.5828V3.84552C13.5828 3.33927 13.3982 2.84253 13.0527 2.46719C12.7053 2.08976 12.2201 1.86462 11.6997 1.86462H8.30035ZM7.16447 5.82642C7.16539 5.82642 7.16631 5.82642 7.16724 5.82642H12.8328C12.8337 5.82642 12.8346 5.82642 12.8356 5.82642H14.349V16.1545C14.349 16.3012 14.2948 16.4306 14.2153 16.5169C14.1378 16.6012 14.0465 16.6354 13.9659 16.6354H6.03411C5.95348 16.6354 5.86223 16.6012 5.78468 16.5169C5.7052 16.4306 5.651 16.3012 5.651 16.1545V5.82642H7.16447ZM12.0828 4.32642V3.84552C12.0828 3.69887 12.0286 3.56943 11.9491 3.4831C11.8716 3.39886 11.7803 3.36462 11.6997 3.36462H8.30035C8.21972 3.36462 8.12847 3.39886 8.05091 3.4831C7.97144 3.56943 7.91724 3.69887 7.91724 3.84552V4.32642L12.0828 4.32642Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  </button>\n  <div\n    className=\"secondaryButtonWrapper\"\n  >\n    <span\n      className=\"\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n    >\n      <button\n        aria-busy={false}\n        aria-disabled={false}\n        aria-expanded={false}\n        aria-haspopup={true}\n        aria-label=\"additional actions\"\n        className=\"secondaryButton button sizeMedium kindPrimary colorPrimary leftFlat preventClickAnimation noSidePadding\"\n        data-testid=\"split-button-secondary-button\"\n        data-vibe=\"Button\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onMouseDown={[Function]}\n        onMouseUp={[Function]}\n        type=\"button\"\n      >\n        <div\n          className=\"secondaryButtonIconWrapper\"\n        >\n          <svg\n            aria-hidden=\"true\"\n            fill=\"currentColor\"\n            height=\"20\"\n            viewBox=\"0 0 20 20\"\n            width=\"20\"\n          >\n            <path\n              d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n            />\n          </svg>\n        </div>\n      </button>\n    </span>\n  </div>\n</div>\n`;\n\nexports[`SplitButton renders correctly > with secondary position 1`] = `\n<div\n  className=\"button kindPrimary colorPrimary\"\n  data-testid=\"split-button\"\n  data-vibe=\"SplitButton\"\n>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    className=\"mainButton button sizeMedium kindPrimary colorPrimary rightFlat preventClickAnimation\"\n    data-testid=\"split-button-primary-button\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    type=\"button\"\n  >\n    split button\n  </button>\n  <div\n    className=\"secondaryButtonWrapper\"\n  >\n    <span\n      className=\"\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n    >\n      <button\n        aria-busy={false}\n        aria-disabled={false}\n        aria-expanded={false}\n        aria-haspopup={true}\n        aria-label=\"additional actions\"\n        className=\"secondaryButton button sizeMedium kindPrimary colorPrimary leftFlat preventClickAnimation noSidePadding\"\n        data-testid=\"split-button-secondary-button\"\n        data-vibe=\"Button\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onMouseDown={[Function]}\n        onMouseUp={[Function]}\n        type=\"button\"\n      >\n        <div\n          className=\"secondaryButtonIconWrapper\"\n        >\n          <svg\n            aria-hidden=\"true\"\n            fill=\"currentColor\"\n            height=\"20\"\n            viewBox=\"0 0 20 20\"\n            width=\"20\"\n          >\n            <path\n              d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n            />\n          </svg>\n        </div>\n      </button>\n    </span>\n  </div>\n</div>\n`;\n\nexports[`SplitButton renders correctly > with tertiary button 1`] = `\n<div\n  className=\"button kindTertiary colorPrimary\"\n  data-testid=\"split-button\"\n  data-vibe=\"SplitButton\"\n>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    className=\"mainButton button sizeMedium kindTertiary colorPrimary rightFlat preventClickAnimation\"\n    data-testid=\"split-button-primary-button\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    type=\"button\"\n  >\n    split button\n  </button>\n  <div\n    className=\"secondaryButtonWrapper\"\n  >\n    <span\n      className=\"\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n    >\n      <button\n        aria-busy={false}\n        aria-disabled={false}\n        aria-expanded={false}\n        aria-haspopup={true}\n        aria-label=\"additional actions\"\n        className=\"secondaryButton button sizeMedium kindTertiary colorPrimary leftFlat preventClickAnimation noSidePadding\"\n        data-testid=\"split-button-secondary-button\"\n        data-vibe=\"Button\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onMouseDown={[Function]}\n        onMouseUp={[Function]}\n        type=\"button\"\n      >\n        <div\n          className=\"secondaryButtonIconWrapper\"\n        >\n          <svg\n            aria-hidden=\"true\"\n            fill=\"currentColor\"\n            height=\"20\"\n            viewBox=\"0 0 20 20\"\n            width=\"20\"\n          >\n            <path\n              d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n            />\n          </svg>\n        </div>\n      </button>\n    </span>\n  </div>\n</div>\n`;\n\nexports[`SplitButton renders correctly > with zIndex 1`] = `\n<div\n  className=\"button kindPrimary colorPrimary\"\n  data-testid=\"split-button\"\n  data-vibe=\"SplitButton\"\n>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    className=\"mainButton button sizeMedium kindPrimary colorPrimary rightFlat preventClickAnimation\"\n    data-testid=\"split-button-primary-button\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    type=\"button\"\n  >\n    split button\n  </button>\n  <div\n    className=\"secondaryButtonWrapper\"\n  >\n    <span\n      className=\"\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onContextMenu={[Function]}\n      onFocus={[Function]}\n      onKeyDown={[Function]}\n      onMouseDown={[Function]}\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n    >\n      <button\n        aria-busy={false}\n        aria-disabled={false}\n        aria-expanded={false}\n        aria-haspopup={true}\n        aria-label=\"additional actions\"\n        className=\"secondaryButton button sizeMedium kindPrimary colorPrimary leftFlat preventClickAnimation noSidePadding\"\n        data-testid=\"split-button-secondary-button\"\n        data-vibe=\"Button\"\n        onBlur={[Function]}\n        onClick={[Function]}\n        onFocus={[Function]}\n        onMouseDown={[Function]}\n        onMouseUp={[Function]}\n        type=\"button\"\n      >\n        <div\n          className=\"secondaryButtonIconWrapper\"\n        >\n          <svg\n            aria-hidden=\"true\"\n            fill=\"currentColor\"\n            height=\"20\"\n            viewBox=\"0 0 20 20\"\n            width=\"20\"\n          >\n            <path\n              d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n            />\n          </svg>\n        </div>\n      </button>\n    </span>\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/SplitButton/index.ts",
    "content": "export { default as SplitButton, type SplitButtonProps } from \"./SplitButton\";\nexport { default as SplitButtonMenu, type SplitButtonMenuProps } from \"./SplitButtonMenu/SplitButtonMenu\";\n"
  },
  {
    "path": "packages/core/src/components/Steps/Steps.module.scss",
    "content": ".steps {\n  .contentOnTop {\n    margin-top: var(--space-16);\n  }\n  .contentOnBottom {\n    margin-bottom: var(--space-8);\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Steps/Steps.tsx",
    "content": "import React, { forwardRef, type ReactElement, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { NOOP, useMergeRef } from \"@vibe/shared\";\n\nimport { StepsHeader } from \"./StepsHeader\";\nimport { type StepsColor, type StepsType } from \"./Steps.types\";\nimport { type ButtonProps } from \"@vibe/button\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./Steps.module.scss\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface StepsProps extends VibeComponentProps {\n  /**\n   * The index of the currently active step.\n   */\n  activeStepIndex?: number;\n  /**\n   * Callback fired when the active step changes.\n   */\n  onChangeActiveStep?: (e: React.MouseEvent, stepIndex: number) => void;\n  /**\n   * If true, hides the navigation buttons.\n   */\n  areNavigationButtonsHidden?: boolean;\n  /**\n   * The list of steps in the steps component.\n   */\n  steps?: ReactElement[];\n  /**\n   * The visual style of the steps component.\n   */\n  type?: StepsType;\n  /**\n   * The color theme of the steps component.\n   */\n  color?: StepsColor;\n  /**\n   * If true, the content is displayed above the step navigation.\n   */\n  isContentOnTop?: boolean;\n  /**\n   * If true, hides the icons in the navigation buttons.\n   */\n  areButtonsIconsHidden?: boolean;\n  /**\n   * Props applied to the back button.\n   */\n  backButtonProps?: Partial<ButtonProps>;\n  /**\n   * Props applied to the next button.\n   */\n  nextButtonProps?: Partial<ButtonProps>;\n  /**\n   * Props applied to the finish button.\n   */\n  finishButtonProps?: Partial<ButtonProps>;\n  /**\n   * Callback fired when the finish button is clicked.\n   */\n  onFinish?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n}\n\nconst Steps = forwardRef(\n  (\n    {\n      className,\n      id,\n      \"data-testid\": dataTestId,\n      steps = [],\n      activeStepIndex = 0,\n      type = \"gallery\",\n      onChangeActiveStep = NOOP,\n      onFinish,\n      color,\n      areNavigationButtonsHidden = false,\n      isContentOnTop = false,\n      backButtonProps = {},\n      nextButtonProps = {},\n      finishButtonProps = {},\n      areButtonsIconsHidden = false\n    }: StepsProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    return (\n      <div\n        ref={mergedRef}\n        className={cx(styles.steps, className)}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.STEPS, id)}\n        data-vibe={ComponentVibeId.STEPS}\n      >\n        {isContentOnTop && steps[activeStepIndex]}\n        <StepsHeader\n          onChangeActiveStep={onChangeActiveStep}\n          type={type}\n          activeStepIndex={activeStepIndex}\n          stepsCount={steps.length}\n          areNavigationButtonsHidden={areNavigationButtonsHidden}\n          color={color}\n          backButtonProps={backButtonProps}\n          nextButtonProps={nextButtonProps}\n          finishButtonProps={finishButtonProps}\n          areButtonsIconsHidden={areButtonsIconsHidden}\n          onFinish={onFinish}\n          className={cx({\n            [styles.contentOnTop]: isContentOnTop,\n            [styles.contentOnBottom]: !isContentOnTop\n          })}\n        />\n        {!isContentOnTop && steps[activeStepIndex]}\n      </div>\n    );\n  }\n);\n\nexport default Steps;\n"
  },
  {
    "path": "packages/core/src/components/Steps/Steps.types.ts",
    "content": "export type StepsType = \"numbers\" | \"gallery\";\n\nexport type StepsDotAriaCurrent = \"page\" | \"step\" | \"location\" | \"date\" | \"time\";\n\nexport type StepsColor = \"primary\" | \"on-primary-color\" | \"on-inverted-background\";\n"
  },
  {
    "path": "packages/core/src/components/Steps/StepsCommand.module.scss",
    "content": ".command {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n\n  &.backward {\n    flex-direction: row-reverse;\n  }\n}\n\n.icon {\n  color: var(--icon-color);\n  width: 15.5px;\n  height: 15.5px;\n  &.disabled {\n    color: var(--disabled-text-color);\n  }\n  &.colorOnPrimaryColor {\n    color: var(--text-color-on-primary);\n  }\n  &.colorOnInvertedBackground {\n    color: var(--text-color-on-inverted);\n  }\n}\n\n"
  },
  {
    "path": "packages/core/src/components/Steps/StepsCommand.tsx",
    "content": "import React, { type FC, useCallback, useMemo } from \"react\";\nimport cx from \"classnames\";\nimport { NavigationChevronRight, NavigationChevronLeft } from \"@vibe/icons\";\nimport { Icon } from \"@vibe/icon\";\nimport { Button, type ButtonProps } from \"@vibe/button\";\nimport { NOOP, getStyle } from \"@vibe/shared\";\nimport { BACK_TEXT, NEXT_TEXT } from \"./StepsConstants\";\nimport { type StepsColor } from \"./Steps.types\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\nimport styles from \"./StepsCommand.module.scss\";\nimport { camelCase } from \"es-toolkit\";\n\nexport interface StepsCommandProps extends VibeComponentProps {\n  /**\n   * If true, this button is for moving to the next step.\n   */\n  isNext?: boolean;\n  /**\n   * Callback fired when the active step changes.\n   */\n  onChangeActiveStep?: (e: React.MouseEvent, newStepIndex: number) => void;\n  /**\n   * The index of the currently active step.\n   */\n  activeStepIndex: number;\n  /**\n   * The total number of steps.\n   */\n  stepsCount: number;\n  /**\n   * If true, hides the navigation icon.\n   */\n  isIconHidden?: boolean;\n  /**\n   * Props applied to the button.\n   */\n  buttonProps?: Partial<ButtonProps>;\n  /**\n   * The color theme of the button.\n   */\n  color?: StepsColor;\n}\n\nexport const StepsCommand: FC<StepsCommandProps> = ({\n  isNext = false,\n  onChangeActiveStep = NOOP,\n  activeStepIndex,\n  stepsCount,\n  isIconHidden = false,\n  buttonProps = {},\n  color = \"primary\"\n}: StepsCommandProps) => {\n  const { children: buttonChildren, ...otherButtonProps } = buttonProps;\n  const description = useMemo(() => {\n    if (buttonChildren) return buttonChildren;\n    return isNext ? NEXT_TEXT : BACK_TEXT;\n  }, [isNext, buttonChildren]);\n  const newStepIndex = isNext ? activeStepIndex + 1 : activeStepIndex - 1;\n  const onClick = useCallback(\n    (e: React.MouseEvent) => onChangeActiveStep(e, newStepIndex),\n    [newStepIndex, onChangeActiveStep]\n  );\n  const isDisabled = (isNext && activeStepIndex === stepsCount - 1) || (!isNext && activeStepIndex === 0);\n\n  const icon = isNext ? NavigationChevronRight : NavigationChevronLeft;\n  return (\n    <Button\n      className={cx(styles.command, { [styles.backward]: !isNext })}\n      data-testid={\n        isNext ? ComponentDefaultTestId.STEPS_FORWARD_COMMAND : ComponentDefaultTestId.STEPS_BACKWARD_COMMAND\n      }\n      kind=\"tertiary\"\n      onClick={onClick}\n      disabled={isDisabled}\n      // @ts-ignore\n      color={color}\n      {...otherButtonProps}\n    >\n      {description}\n      {isIconHidden ? null : (\n        <Icon\n          icon={icon}\n          className={cx(styles.icon, getStyle(styles, camelCase(\"color-\" + color)), {\n            [styles.disabled]: isDisabled\n          })}\n        />\n      )}\n    </Button>\n  );\n};\n"
  },
  {
    "path": "packages/core/src/components/Steps/StepsConstants.ts",
    "content": "export const NEXT_TEXT = \"Next\";\nexport const BACK_TEXT = \"Back\";\nexport const FINISH_TEXT = \"Finish\";\n"
  },
  {
    "path": "packages/core/src/components/Steps/StepsDot.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n@import \"../../styles/states\";\n\n@mixin active-step-dot {\n  background: var(--primary-color);\n  transform: scale(1.3);\n}\n\n.dot {\n  @include reset-button;\n  width: 6px;\n  height: 6px;\n  cursor: pointer;\n  border-radius: 50%;\n  background: var(--ui-border-color);\n  @include focus-style;\n  transform-origin: center;\n  transform: scale(1);\n  transition: transform var(--motion-productive-long) var(--motion-timing-transition),\n    background var(--motion-productive-long) var(--motion-timing-transition);\n\n  &:hover {\n    transform: scale(1.3);\n  }\n}\n\n.isActive {\n  @include active-step-dot;\n}\n\n.colorOnPrimaryColor.dot {\n  background: var(--primary-hover-color);\n  @include focus-style-on-primary;\n}\n\n.colorOnPrimaryColor.dot.isActive {\n  background: var(--text-color-on-primary);\n}\n\n.colorOnInvertedBackground.dot {\n  background: var(--placeholder-color);\n}\n\n.colorOnInvertedBackground.dot.isActive {\n  background: var(--text-color-on-inverted);\n}\n"
  },
  {
    "path": "packages/core/src/components/Steps/StepsDot.tsx",
    "content": "import cx from \"classnames\";\nimport { noop as NOOP, camelCase } from \"es-toolkit\";\nimport { type StepsColor, type StepsDotAriaCurrent } from \"./Steps.types\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport React, { type FC } from \"react\";\nimport styles from \"./StepsDot.module.scss\";\nimport { getStyle } from \"@vibe/shared\";\n\nexport interface StepsDotProps extends VibeComponentProps {\n  /**\n   * Callback fired when the dot is clicked.\n   */\n  onClick?: (e: React.MouseEvent) => void;\n  /**\n   * ARIA attribute to indicate the current step.\n   */\n  ariaCurrent?: StepsDotAriaCurrent | boolean;\n  /**\n   * If true, marks the dot as active.\n   */\n  isActive?: boolean;\n  /**\n   * The ARIA label for the dot.\n   */\n  \"aria-label\"?: string;\n  /**\n   * The color theme of the dot.\n   */\n  color?: StepsColor;\n}\n\nexport const StepsDot: FC<StepsDotProps> = ({\n  isActive,\n  onClick = NOOP,\n  ariaCurrent = \"step\",\n  \"aria-label\": ariaLabel,\n  color,\n  className\n}: StepsDotProps) => {\n  return (\n    <button\n      type=\"button\"\n      aria-label={ariaLabel}\n      aria-current={isActive ? ariaCurrent : false}\n      className={cx(\n        styles.dot,\n        getStyle(styles, camelCase(\"color-\" + color)),\n        {\n          [styles.isActive]: isActive\n        },\n        className\n      )}\n      onClick={onClick}\n    />\n  );\n};\n"
  },
  {
    "path": "packages/core/src/components/Steps/StepsGalleryHeader.module.scss",
    "content": ".galleryHeader {\n  margin: 0 var(--space-8);\n  display: flex;\n  align-items: center;\n\n  .galleryHeaderDot {\n    margin-inline-end: var(--space-8);\n    &:last-child {\n      margin-inline-end: 0;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Steps/StepsGalleryHeader.tsx",
    "content": "import React, { type FC, useCallback, useMemo } from \"react\";\nimport { range } from \"es-toolkit\";\nimport cx from \"classnames\";\nimport { StepsDot } from \"./StepsDot\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport styles from \"./StepsGalleryHeader.module.scss\";\nimport { type StepsColor } from \"./Steps.types\";\n\nexport interface StepsGalleryHeaderProps extends VibeComponentProps {\n  /**\n   * The index of the currently active step.\n   */\n  activeStepIndex: number;\n  /**\n   * The total number of steps.\n   */\n  stepsCount: number;\n  /**\n   * Callback fired when the active step changes.\n   */\n  onChangeActiveStep: (e: React.MouseEvent, stepIndex: number) => void;\n  /**\n   * A function to generate step descriptions for accessibility.\n   */\n  stepDescriptionFunc?: (stepIndex: number) => string;\n  /**\n   * The color theme of the gallery header.\n   */\n  color?: StepsColor;\n}\n\nexport const StepsGalleryHeader: FC<StepsGalleryHeaderProps> = ({\n  activeStepIndex,\n  stepsCount,\n  onChangeActiveStep,\n  stepDescriptionFunc,\n  color,\n  className\n}) => {\n  const stepsPlaceholders = useMemo(() => range(stepsCount), [stepsCount]);\n  const defaultStepDescriptionFunc = useCallback((stepIndex: number) => `Step number ${stepIndex}`, []);\n  const overrideStepDescriptionFunc = stepDescriptionFunc || defaultStepDescriptionFunc;\n  const onClickFunctions = useMemo(\n    () => stepsPlaceholders.map(stepIndex => (e: React.MouseEvent) => onChangeActiveStep(e, stepIndex)),\n    [onChangeActiveStep, stepsPlaceholders]\n  );\n\n  const galleryDots = useMemo(\n    () =>\n      stepsPlaceholders.map(\n        stepIndex => (\n          <StepsDot\n            isActive={activeStepIndex === stepIndex}\n            key={`monday-style-step-dot-${stepIndex + 1}`}\n            aria-label={overrideStepDescriptionFunc(stepIndex)}\n            onClick={onClickFunctions[stepIndex]}\n            color={color}\n            className={styles.galleryHeaderDot}\n          />\n        ),\n        []\n      ),\n    [activeStepIndex, color, onClickFunctions, overrideStepDescriptionFunc, stepsPlaceholders]\n  );\n\n  return (\n    <div role=\"group\" className={cx(styles.galleryHeader, className)}>\n      {galleryDots || null}\n    </div>\n  );\n};\n"
  },
  {
    "path": "packages/core/src/components/Steps/StepsHeader.module.scss",
    "content": ".header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-8);\n}\n"
  },
  {
    "path": "packages/core/src/components/Steps/StepsHeader.tsx",
    "content": "import React, { type FC, useMemo } from \"react\";\nimport cx from \"classnames\";\nimport { StepsCommand } from \"./StepsCommand\";\nimport { StepsGalleryHeader, type StepsGalleryHeaderProps } from \"./StepsGalleryHeader\";\nimport { StepsNumbersHeader, type StepsNumbersHeaderProps } from \"./StepsNumbersHeader\";\nimport { FINISH_TEXT } from \"./StepsConstants\";\nimport { type StepsType, type StepsColor } from \"./Steps.types\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport { Button, type ButtonProps } from \"@vibe/button\";\nimport styles from \"./StepsHeader.module.scss\";\n\nexport interface StepsHeaderProps extends VibeComponentProps {\n  /**\n   * The type of steps header.\n   */\n  type: StepsType;\n  /**\n   * The index of the currently active step.\n   */\n  activeStepIndex: number;\n  /**\n   * Callback fired when the active step changes.\n   */\n  onChangeActiveStep: (e: React.MouseEvent, stepIndex: number) => void;\n  /**\n   * The total number of steps.\n   */\n  stepsCount: number;\n  /**\n   * If true, hides the navigation buttons.\n   */\n  areNavigationButtonsHidden: boolean;\n  /**\n   * Props applied to the back button.\n   */\n  backButtonProps: Partial<ButtonProps>;\n  /**\n   * Props applied to the next button.\n   */\n  nextButtonProps: Partial<ButtonProps>;\n  /**\n   * Props applied to the finish button.\n   */\n  finishButtonProps: Partial<ButtonProps>;\n  /**\n   * If true, hides the icons in the navigation buttons.\n   */\n  areButtonsIconsHidden: boolean;\n  /**\n   * The color theme of the steps header.\n   */\n  color?: StepsColor;\n  /**\n   * Callback fired when the finish button is clicked.\n   */\n  onFinish?: (e: React.MouseEvent) => void;\n}\n\nexport const StepsHeader: FC<StepsHeaderProps> = ({\n  type,\n  activeStepIndex,\n  onChangeActiveStep,\n  stepsCount,\n  areNavigationButtonsHidden,\n  backButtonProps,\n  nextButtonProps,\n  finishButtonProps,\n  areButtonsIconsHidden,\n  color = \"primary\",\n  onFinish,\n  className\n}: StepsHeaderProps) => {\n  const SubHeaderComponent: FC<StepsGalleryHeaderProps | StepsNumbersHeaderProps> =\n    type === \"gallery\" ? StepsGalleryHeader : StepsNumbersHeader;\n\n  const showFinishButton = useMemo(() => {\n    return activeStepIndex === stepsCount - 1;\n  }, [activeStepIndex, stepsCount]);\n\n  return (\n    <div className={cx(styles.header, className)}>\n      {areNavigationButtonsHidden ? null : (\n        <StepsCommand\n          isNext={false}\n          isIconHidden={areButtonsIconsHidden}\n          onChangeActiveStep={onChangeActiveStep}\n          activeStepIndex={activeStepIndex}\n          stepsCount={stepsCount}\n          buttonProps={backButtonProps}\n          color={color}\n        />\n      )}\n      <SubHeaderComponent\n        activeStepIndex={activeStepIndex}\n        stepsCount={stepsCount}\n        onChangeActiveStep={onChangeActiveStep}\n        color={color}\n      />\n      {areNavigationButtonsHidden ? null : (\n        <>\n          {showFinishButton ? (\n            <Button onClick={onFinish} color={color} {...finishButtonProps}>\n              {finishButtonProps?.children || FINISH_TEXT}\n            </Button>\n          ) : (\n            <StepsCommand\n              isNext\n              isIconHidden={areButtonsIconsHidden}\n              activeStepIndex={activeStepIndex}\n              onChangeActiveStep={onChangeActiveStep}\n              stepsCount={stepsCount}\n              buttonProps={nextButtonProps}\n              color={color}\n            />\n          )}\n        </>\n      )}\n    </div>\n  );\n};\n"
  },
  {
    "path": "packages/core/src/components/Steps/StepsNumbersHeader.module.scss",
    "content": "@import \"../../styles/typography\";\n\n.numbers {\n  margin: 0 var(--space-8);\n  @include smoothing-text;\n}\n"
  },
  {
    "path": "packages/core/src/components/Steps/StepsNumbersHeader.tsx",
    "content": "import cx from \"classnames\";\nimport React, { type FC, useMemo } from \"react\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport { Text } from \"@vibe/typography\";\nimport styles from \"./StepsNumbersHeader.module.scss\";\nimport { type StepsColor } from \"./Steps.types\";\n\nexport interface StepsNumbersHeaderProps extends VibeComponentProps {\n  /**\n   * The index of the currently active step.\n   */\n  activeStepIndex: number;\n  /**\n   * The total number of steps.\n   */\n  stepsCount: number;\n  /**\n   * The color theme of the steps numbers header.\n   */\n  color?: StepsColor;\n}\n\nexport const StepsNumbersHeader: FC<StepsNumbersHeaderProps> = ({ activeStepIndex, stepsCount, color }) => {\n  const textColor = useMemo(() => {\n    if (color === \"primary\") {\n      return color;\n    } else {\n      return color === \"on-inverted-background\" ? \"onInverted\" : \"onPrimary\";\n    }\n  }, [color]);\n\n  return (\n    <Text type=\"text2\" color={textColor} className={cx(styles.numbers)}>{`${\n      activeStepIndex + 1\n    } \\\\ ${stepsCount}`}</Text>\n  );\n};\n"
  },
  {
    "path": "packages/core/src/components/Steps/__tests__/Steps.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport Steps from \"../Steps\";\n\nconst stepsContent = [<div key=\"first\">first</div>, <div key=\"second\">second</div>];\n\ndescribe(\"Steps\", () => {\n  describe(\"with numeric type renders correctly\", () => {\n    it(\"with regular props\", () => {\n      const tree = renderer.create(<Steps type=\"numbers\" steps={stepsContent} />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"when viewing first step\", () => {\n      const tree = renderer.create(<Steps type=\"numbers\" steps={stepsContent} activeStepIndex={0} />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"when viewing last step\", () => {\n      const tree = renderer\n        .create(<Steps type=\"numbers\" steps={stepsContent} activeStepIndex={stepsContent.length - 1} />)\n        .toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"when hide navigations icons\", () => {\n      const tree = renderer\n        .create(\n          <Steps type=\"numbers\" steps={stepsContent} activeStepIndex={stepsContent.length - 1} areButtonsIconsHidden />\n        )\n        .toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"when steps content is on top\", () => {\n      const tree = renderer\n        .create(<Steps type=\"numbers\" steps={stepsContent} activeStepIndex={stepsContent.length - 1} isContentOnTop />)\n        .toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n  });\n\n  describe(\"with gallery type renders correctly\", () => {\n    it(\"with regular props\", () => {\n      const tree = renderer.create(<Steps type=\"gallery\" steps={stepsContent} />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"when viewing first step\", () => {\n      const tree = renderer.create(<Steps type=\"gallery\" steps={stepsContent} activeStepIndex={0} />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"when viewing last step\", () => {\n      const tree = renderer.create(\n        <Steps type=\"gallery\" steps={stepsContent} activeStepIndex={stepsContent.length - 1} />\n      );\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"when hide navigations icons\", () => {\n      const tree = renderer\n        .create(\n          <Steps type=\"gallery\" steps={stepsContent} activeStepIndex={stepsContent.length - 1} areButtonsIconsHidden />\n        )\n        .toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"when steps content is on top\", () => {\n      const tree = renderer\n        .create(<Steps type=\"gallery\" steps={stepsContent} activeStepIndex={stepsContent.length - 1} isContentOnTop />)\n        .toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"when navigation buttons are hidden\", () => {\n      const tree = renderer\n        .create(\n          <Steps\n            type=\"gallery\"\n            steps={stepsContent}\n            activeStepIndex={stepsContent.length - 1}\n            areNavigationButtonsHidden\n          />\n        )\n        .toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Steps/__tests__/Steps.test.tsx",
    "content": "import { vi, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { fireEvent, render } from \"@testing-library/react\";\nimport { act } from \"@testing-library/react-hooks\";\nimport Steps, { type StepsProps } from \"../Steps\";\nimport { NEXT_TEXT, BACK_TEXT, FINISH_TEXT } from \"../StepsConstants\";\n\nvi.useFakeTimers();\n\nconst stepsContent = [\n  <div key=\"first\" data-testid=\"first-step\">\n    first\n  </div>,\n  <div key=\"second\" data-testid=\"second-step\">\n    second\n  </div>\n];\nconst renderComponent = (props: StepsProps) => {\n  return render(<Steps steps={stepsContent} {...props} />);\n};\n\ndescribe(\"Steps tests\", () => {\n  it(\"call onChangeIndexCallback when click on go back button and it does not disable\", () => {\n    const onClickMock = vi.fn();\n    const steps = renderComponent({\n      onChangeActiveStep: onClickMock,\n      activeStepIndex: stepsContent.length - 1\n    });\n    const backwardButton = steps.getByText(BACK_TEXT);\n\n    act(() => {\n      fireEvent.click(backwardButton);\n    });\n    expect(onClickMock.mock.calls.length).toBe(1);\n  });\n\n  it(\"call onChangeIndexCallback when click on go forward button and it does not disable\", () => {\n    const onClickMock = vi.fn();\n    const steps = renderComponent({\n      onChangeActiveStep: onClickMock,\n      activeStepIndex: 0\n    });\n    const forwardButton = steps.getByText(NEXT_TEXT);\n\n    act(() => {\n      fireEvent.click(forwardButton);\n    });\n\n    expect(onClickMock.mock.calls.length).toBe(1);\n  });\n\n  it(\"does not call onChangeIndexCallback when click on back button and when in first page\", () => {\n    const onClickMock = vi.fn();\n    const steps = renderComponent({\n      onChangeActiveStep: onClickMock,\n      activeStepIndex: 0\n    });\n    const backwardButton = steps.getByText(BACK_TEXT);\n\n    act(() => {\n      fireEvent.click(backwardButton);\n    });\n\n    expect(onClickMock.mock.calls.length).toBe(0);\n  });\n\n  it(\"shows finish button on last step by default\", () => {\n    const steps = renderComponent({\n      activeStepIndex: stepsContent.length - 1\n    });\n    expect(steps.getByText(FINISH_TEXT)).toBeTruthy();\n  });\n\n  it(\"calls onFinish when clicking finish button on last step\", () => {\n    const onFinishMock = vi.fn();\n    const steps = renderComponent({\n      activeStepIndex: stepsContent.length - 1,\n      onFinish: onFinishMock\n    });\n    const finishButton = steps.getByText(FINISH_TEXT);\n\n    act(() => {\n      fireEvent.click(finishButton);\n    });\n\n    expect(onFinishMock).toHaveBeenCalledTimes(1);\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Steps/__tests__/__snapshots__/Steps.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`Steps > with gallery type renders correctly > when hide navigations icons 1`] = `\n<div\n  className=\"steps\"\n  data-testid=\"steps\"\n  data-vibe=\"Steps\"\n>\n  <div\n    className=\"header contentOnBottom\"\n  >\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"command backward button sizeMedium kindTertiary colorPrimary\"\n      data-testid=\"steps-backward-command\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Back\n    </button>\n    <div\n      className=\"galleryHeader\"\n      role=\"group\"\n    >\n      <button\n        aria-current={false}\n        aria-label=\"Step number 0\"\n        className=\"dot colorPrimary galleryHeaderDot\"\n        onClick={[Function]}\n        type=\"button\"\n      />\n      <button\n        aria-current=\"step\"\n        aria-label=\"Step number 1\"\n        className=\"dot colorPrimary isActive galleryHeaderDot\"\n        onClick={[Function]}\n        type=\"button\"\n      />\n    </div>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button sizeMedium kindPrimary colorPrimary\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Finish\n    </button>\n  </div>\n  <div>\n    second\n  </div>\n</div>\n`;\n\nexports[`Steps > with gallery type renders correctly > when navigation buttons are hidden 1`] = `\n<div\n  className=\"steps\"\n  data-testid=\"steps\"\n  data-vibe=\"Steps\"\n>\n  <div\n    className=\"header contentOnBottom\"\n  >\n    <div\n      className=\"galleryHeader\"\n      role=\"group\"\n    >\n      <button\n        aria-current={false}\n        aria-label=\"Step number 0\"\n        className=\"dot colorPrimary galleryHeaderDot\"\n        onClick={[Function]}\n        type=\"button\"\n      />\n      <button\n        aria-current=\"step\"\n        aria-label=\"Step number 1\"\n        className=\"dot colorPrimary isActive galleryHeaderDot\"\n        onClick={[Function]}\n        type=\"button\"\n      />\n    </div>\n  </div>\n  <div>\n    second\n  </div>\n</div>\n`;\n\nexports[`Steps > with gallery type renders correctly > when steps content is on top 1`] = `\n<div\n  className=\"steps\"\n  data-testid=\"steps\"\n  data-vibe=\"Steps\"\n>\n  <div>\n    second\n  </div>\n  <div\n    className=\"header contentOnTop\"\n  >\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"command backward button sizeMedium kindTertiary colorPrimary\"\n      data-testid=\"steps-backward-command\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Back\n      <svg\n        aria-hidden={true}\n        className=\"icon icon colorPrimary\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"16\"\n        viewBox=\"0 0 20 20\"\n        width=\"16\"\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M5.46967 10.5303L6 10L5.46967 9.46967C5.17678 9.76256 5.17678 10.2374 5.46967 10.5303ZM7.06066 10L13.5303 3.53033C13.8232 3.23744 13.8232 2.76256 13.5303 2.46967C13.2374 2.17678 12.7626 2.17678 12.4697 2.46967L5.46967 9.46967L6 10L5.46967 10.5303L12.4697 17.5303C12.7626 17.8232 13.2374 17.8232 13.5303 17.5303C13.8232 17.2374 13.8232 16.7626 13.5303 16.4697L7.06066 10Z\"\n          fill=\"currentColor\"\n          fillRule=\"evenodd\"\n        />\n      </svg>\n    </button>\n    <div\n      className=\"galleryHeader\"\n      role=\"group\"\n    >\n      <button\n        aria-current={false}\n        aria-label=\"Step number 0\"\n        className=\"dot colorPrimary galleryHeaderDot\"\n        onClick={[Function]}\n        type=\"button\"\n      />\n      <button\n        aria-current=\"step\"\n        aria-label=\"Step number 1\"\n        className=\"dot colorPrimary isActive galleryHeaderDot\"\n        onClick={[Function]}\n        type=\"button\"\n      />\n    </div>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button sizeMedium kindPrimary colorPrimary\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Finish\n    </button>\n  </div>\n</div>\n`;\n\nexports[`Steps > with gallery type renders correctly > when viewing first step 1`] = `\n<div\n  className=\"steps\"\n  data-testid=\"steps\"\n  data-vibe=\"Steps\"\n>\n  <div\n    className=\"header contentOnBottom\"\n  >\n    <button\n      aria-busy={false}\n      aria-disabled={true}\n      className=\"command backward button sizeMedium kindTertiary colorPrimary disabled\"\n      data-testid=\"steps-backward-command\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      tabIndex={-1}\n      type=\"button\"\n    >\n      Back\n      <svg\n        aria-hidden={true}\n        className=\"icon icon colorPrimary disabled\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"16\"\n        viewBox=\"0 0 20 20\"\n        width=\"16\"\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M5.46967 10.5303L6 10L5.46967 9.46967C5.17678 9.76256 5.17678 10.2374 5.46967 10.5303ZM7.06066 10L13.5303 3.53033C13.8232 3.23744 13.8232 2.76256 13.5303 2.46967C13.2374 2.17678 12.7626 2.17678 12.4697 2.46967L5.46967 9.46967L6 10L5.46967 10.5303L12.4697 17.5303C12.7626 17.8232 13.2374 17.8232 13.5303 17.5303C13.8232 17.2374 13.8232 16.7626 13.5303 16.4697L7.06066 10Z\"\n          fill=\"currentColor\"\n          fillRule=\"evenodd\"\n        />\n      </svg>\n    </button>\n    <div\n      className=\"galleryHeader\"\n      role=\"group\"\n    >\n      <button\n        aria-current=\"step\"\n        aria-label=\"Step number 0\"\n        className=\"dot colorPrimary isActive galleryHeaderDot\"\n        onClick={[Function]}\n        type=\"button\"\n      />\n      <button\n        aria-current={false}\n        aria-label=\"Step number 1\"\n        className=\"dot colorPrimary galleryHeaderDot\"\n        onClick={[Function]}\n        type=\"button\"\n      />\n    </div>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"command button sizeMedium kindTertiary colorPrimary\"\n      data-testid=\"steps-forward-command\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Next\n      <svg\n        aria-hidden={true}\n        className=\"icon icon colorPrimary\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"16\"\n        viewBox=\"0 0 20 20\"\n        width=\"16\"\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303L13 10L13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z\"\n          fill=\"currentColor\"\n          fillRule=\"evenodd\"\n        />\n      </svg>\n    </button>\n  </div>\n  <div>\n    first\n  </div>\n</div>\n`;\n\nexports[`Steps > with gallery type renders correctly > when viewing last step 1`] = `\n<div\n  className=\"steps\"\n  data-testid=\"steps\"\n  data-vibe=\"Steps\"\n>\n  <div\n    className=\"header contentOnBottom\"\n  >\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"command backward button sizeMedium kindTertiary colorPrimary\"\n      data-testid=\"steps-backward-command\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Back\n      <svg\n        aria-hidden={true}\n        className=\"icon icon colorPrimary\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"16\"\n        viewBox=\"0 0 20 20\"\n        width=\"16\"\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M5.46967 10.5303L6 10L5.46967 9.46967C5.17678 9.76256 5.17678 10.2374 5.46967 10.5303ZM7.06066 10L13.5303 3.53033C13.8232 3.23744 13.8232 2.76256 13.5303 2.46967C13.2374 2.17678 12.7626 2.17678 12.4697 2.46967L5.46967 9.46967L6 10L5.46967 10.5303L12.4697 17.5303C12.7626 17.8232 13.2374 17.8232 13.5303 17.5303C13.8232 17.2374 13.8232 16.7626 13.5303 16.4697L7.06066 10Z\"\n          fill=\"currentColor\"\n          fillRule=\"evenodd\"\n        />\n      </svg>\n    </button>\n    <div\n      className=\"galleryHeader\"\n      role=\"group\"\n    >\n      <button\n        aria-current={false}\n        aria-label=\"Step number 0\"\n        className=\"dot colorPrimary galleryHeaderDot\"\n        onClick={[Function]}\n        type=\"button\"\n      />\n      <button\n        aria-current=\"step\"\n        aria-label=\"Step number 1\"\n        className=\"dot colorPrimary isActive galleryHeaderDot\"\n        onClick={[Function]}\n        type=\"button\"\n      />\n    </div>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button sizeMedium kindPrimary colorPrimary\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Finish\n    </button>\n  </div>\n  <div>\n    second\n  </div>\n</div>\n`;\n\nexports[`Steps > with gallery type renders correctly > with regular props 1`] = `\n<div\n  className=\"steps\"\n  data-testid=\"steps\"\n  data-vibe=\"Steps\"\n>\n  <div\n    className=\"header contentOnBottom\"\n  >\n    <button\n      aria-busy={false}\n      aria-disabled={true}\n      className=\"command backward button sizeMedium kindTertiary colorPrimary disabled\"\n      data-testid=\"steps-backward-command\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      tabIndex={-1}\n      type=\"button\"\n    >\n      Back\n      <svg\n        aria-hidden={true}\n        className=\"icon icon colorPrimary disabled\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"16\"\n        viewBox=\"0 0 20 20\"\n        width=\"16\"\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M5.46967 10.5303L6 10L5.46967 9.46967C5.17678 9.76256 5.17678 10.2374 5.46967 10.5303ZM7.06066 10L13.5303 3.53033C13.8232 3.23744 13.8232 2.76256 13.5303 2.46967C13.2374 2.17678 12.7626 2.17678 12.4697 2.46967L5.46967 9.46967L6 10L5.46967 10.5303L12.4697 17.5303C12.7626 17.8232 13.2374 17.8232 13.5303 17.5303C13.8232 17.2374 13.8232 16.7626 13.5303 16.4697L7.06066 10Z\"\n          fill=\"currentColor\"\n          fillRule=\"evenodd\"\n        />\n      </svg>\n    </button>\n    <div\n      className=\"galleryHeader\"\n      role=\"group\"\n    >\n      <button\n        aria-current=\"step\"\n        aria-label=\"Step number 0\"\n        className=\"dot colorPrimary isActive galleryHeaderDot\"\n        onClick={[Function]}\n        type=\"button\"\n      />\n      <button\n        aria-current={false}\n        aria-label=\"Step number 1\"\n        className=\"dot colorPrimary galleryHeaderDot\"\n        onClick={[Function]}\n        type=\"button\"\n      />\n    </div>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"command button sizeMedium kindTertiary colorPrimary\"\n      data-testid=\"steps-forward-command\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Next\n      <svg\n        aria-hidden={true}\n        className=\"icon icon colorPrimary\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"16\"\n        viewBox=\"0 0 20 20\"\n        width=\"16\"\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303L13 10L13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z\"\n          fill=\"currentColor\"\n          fillRule=\"evenodd\"\n        />\n      </svg>\n    </button>\n  </div>\n  <div>\n    first\n  </div>\n</div>\n`;\n\nexports[`Steps > with numeric type renders correctly > when hide navigations icons 1`] = `\n<div\n  className=\"steps\"\n  data-testid=\"steps\"\n  data-vibe=\"Steps\"\n>\n  <div\n    className=\"header contentOnBottom\"\n  >\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"command backward button sizeMedium kindTertiary colorPrimary\"\n      data-testid=\"steps-backward-command\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Back\n    </button>\n    <div\n      className=\"typography primary start singleLineEllipsis text text2Normal numbers\"\n      data-testid=\"text\"\n    >\n      2 \\\\ 2\n    </div>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button sizeMedium kindPrimary colorPrimary\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Finish\n    </button>\n  </div>\n  <div>\n    second\n  </div>\n</div>\n`;\n\nexports[`Steps > with numeric type renders correctly > when steps content is on top 1`] = `\n<div\n  className=\"steps\"\n  data-testid=\"steps\"\n  data-vibe=\"Steps\"\n>\n  <div>\n    second\n  </div>\n  <div\n    className=\"header contentOnTop\"\n  >\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"command backward button sizeMedium kindTertiary colorPrimary\"\n      data-testid=\"steps-backward-command\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Back\n      <svg\n        aria-hidden={true}\n        className=\"icon icon colorPrimary\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"16\"\n        viewBox=\"0 0 20 20\"\n        width=\"16\"\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M5.46967 10.5303L6 10L5.46967 9.46967C5.17678 9.76256 5.17678 10.2374 5.46967 10.5303ZM7.06066 10L13.5303 3.53033C13.8232 3.23744 13.8232 2.76256 13.5303 2.46967C13.2374 2.17678 12.7626 2.17678 12.4697 2.46967L5.46967 9.46967L6 10L5.46967 10.5303L12.4697 17.5303C12.7626 17.8232 13.2374 17.8232 13.5303 17.5303C13.8232 17.2374 13.8232 16.7626 13.5303 16.4697L7.06066 10Z\"\n          fill=\"currentColor\"\n          fillRule=\"evenodd\"\n        />\n      </svg>\n    </button>\n    <div\n      className=\"typography primary start singleLineEllipsis text text2Normal numbers\"\n      data-testid=\"text\"\n    >\n      2 \\\\ 2\n    </div>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button sizeMedium kindPrimary colorPrimary\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Finish\n    </button>\n  </div>\n</div>\n`;\n\nexports[`Steps > with numeric type renders correctly > when viewing first step 1`] = `\n<div\n  className=\"steps\"\n  data-testid=\"steps\"\n  data-vibe=\"Steps\"\n>\n  <div\n    className=\"header contentOnBottom\"\n  >\n    <button\n      aria-busy={false}\n      aria-disabled={true}\n      className=\"command backward button sizeMedium kindTertiary colorPrimary disabled\"\n      data-testid=\"steps-backward-command\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      tabIndex={-1}\n      type=\"button\"\n    >\n      Back\n      <svg\n        aria-hidden={true}\n        className=\"icon icon colorPrimary disabled\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"16\"\n        viewBox=\"0 0 20 20\"\n        width=\"16\"\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M5.46967 10.5303L6 10L5.46967 9.46967C5.17678 9.76256 5.17678 10.2374 5.46967 10.5303ZM7.06066 10L13.5303 3.53033C13.8232 3.23744 13.8232 2.76256 13.5303 2.46967C13.2374 2.17678 12.7626 2.17678 12.4697 2.46967L5.46967 9.46967L6 10L5.46967 10.5303L12.4697 17.5303C12.7626 17.8232 13.2374 17.8232 13.5303 17.5303C13.8232 17.2374 13.8232 16.7626 13.5303 16.4697L7.06066 10Z\"\n          fill=\"currentColor\"\n          fillRule=\"evenodd\"\n        />\n      </svg>\n    </button>\n    <div\n      className=\"typography primary start singleLineEllipsis text text2Normal numbers\"\n      data-testid=\"text\"\n    >\n      1 \\\\ 2\n    </div>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"command button sizeMedium kindTertiary colorPrimary\"\n      data-testid=\"steps-forward-command\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Next\n      <svg\n        aria-hidden={true}\n        className=\"icon icon colorPrimary\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"16\"\n        viewBox=\"0 0 20 20\"\n        width=\"16\"\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303L13 10L13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z\"\n          fill=\"currentColor\"\n          fillRule=\"evenodd\"\n        />\n      </svg>\n    </button>\n  </div>\n  <div>\n    first\n  </div>\n</div>\n`;\n\nexports[`Steps > with numeric type renders correctly > when viewing last step 1`] = `\n<div\n  className=\"steps\"\n  data-testid=\"steps\"\n  data-vibe=\"Steps\"\n>\n  <div\n    className=\"header contentOnBottom\"\n  >\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"command backward button sizeMedium kindTertiary colorPrimary\"\n      data-testid=\"steps-backward-command\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Back\n      <svg\n        aria-hidden={true}\n        className=\"icon icon colorPrimary\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"16\"\n        viewBox=\"0 0 20 20\"\n        width=\"16\"\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M5.46967 10.5303L6 10L5.46967 9.46967C5.17678 9.76256 5.17678 10.2374 5.46967 10.5303ZM7.06066 10L13.5303 3.53033C13.8232 3.23744 13.8232 2.76256 13.5303 2.46967C13.2374 2.17678 12.7626 2.17678 12.4697 2.46967L5.46967 9.46967L6 10L5.46967 10.5303L12.4697 17.5303C12.7626 17.8232 13.2374 17.8232 13.5303 17.5303C13.8232 17.2374 13.8232 16.7626 13.5303 16.4697L7.06066 10Z\"\n          fill=\"currentColor\"\n          fillRule=\"evenodd\"\n        />\n      </svg>\n    </button>\n    <div\n      className=\"typography primary start singleLineEllipsis text text2Normal numbers\"\n      data-testid=\"text\"\n    >\n      2 \\\\ 2\n    </div>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button sizeMedium kindPrimary colorPrimary\"\n      data-testid=\"button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Finish\n    </button>\n  </div>\n  <div>\n    second\n  </div>\n</div>\n`;\n\nexports[`Steps > with numeric type renders correctly > with regular props 1`] = `\n<div\n  className=\"steps\"\n  data-testid=\"steps\"\n  data-vibe=\"Steps\"\n>\n  <div\n    className=\"header contentOnBottom\"\n  >\n    <button\n      aria-busy={false}\n      aria-disabled={true}\n      className=\"command backward button sizeMedium kindTertiary colorPrimary disabled\"\n      data-testid=\"steps-backward-command\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      tabIndex={-1}\n      type=\"button\"\n    >\n      Back\n      <svg\n        aria-hidden={true}\n        className=\"icon icon colorPrimary disabled\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"16\"\n        viewBox=\"0 0 20 20\"\n        width=\"16\"\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M5.46967 10.5303L6 10L5.46967 9.46967C5.17678 9.76256 5.17678 10.2374 5.46967 10.5303ZM7.06066 10L13.5303 3.53033C13.8232 3.23744 13.8232 2.76256 13.5303 2.46967C13.2374 2.17678 12.7626 2.17678 12.4697 2.46967L5.46967 9.46967L6 10L5.46967 10.5303L12.4697 17.5303C12.7626 17.8232 13.2374 17.8232 13.5303 17.5303C13.8232 17.2374 13.8232 16.7626 13.5303 16.4697L7.06066 10Z\"\n          fill=\"currentColor\"\n          fillRule=\"evenodd\"\n        />\n      </svg>\n    </button>\n    <div\n      className=\"typography primary start singleLineEllipsis text text2Normal numbers\"\n      data-testid=\"text\"\n    >\n      1 \\\\ 2\n    </div>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"command button sizeMedium kindTertiary colorPrimary\"\n      data-testid=\"steps-forward-command\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Next\n      <svg\n        aria-hidden={true}\n        className=\"icon icon colorPrimary\"\n        data-testid=\"icon\"\n        data-vibe=\"Icon\"\n        fill=\"currentColor\"\n        height=\"16\"\n        viewBox=\"0 0 20 20\"\n        width=\"16\"\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303L13 10L13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z\"\n          fill=\"currentColor\"\n          fillRule=\"evenodd\"\n        />\n      </svg>\n    </button>\n  </div>\n  <div>\n    first\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Steps/index.ts",
    "content": "export { default as Steps, type StepsProps } from \"./Steps\";\n\nexport * from \"./Steps.types\";\n"
  },
  {
    "path": "packages/core/src/components/Switch/Switch.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n.hidden-switch { /* stylelint-disable-line selector-class-pattern */\n  @include hidden-element();\n}\n"
  },
  {
    "path": "packages/core/src/components/Switch/Switch.tsx",
    "content": "import React, { type ChangeEvent, forwardRef, type ReactElement, useMemo } from \"react\";\nimport cx from \"classnames\";\nimport useSwitch from \"../../hooks/useSwitch\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { type MockToggleProps } from \"../Toggle/MockToggle\";\nimport styles from \"./Switch.module.scss\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface SwitchProps extends VibeComponentProps {\n  /**\n   * The name of the switch input.\n   */\n  name?: string;\n  /**\n   * The value associated with the switch.\n   */\n  value?: string;\n  /**\n   * The ARIA role of the switch.\n   */\n  role?: string;\n  /**\n   * If true, the switch is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The ARIA label for accessibility.\n   */\n  \"aria-label\"?: string;\n  /**\n   * The ID of the element labeling the switch.\n   */\n  \"aria-labelledby\"?: string;\n  /**\n   * If true, the switch is checked.\n   */\n  checked?: boolean;\n  /**\n   * Class name applied to the input element.\n   */\n  inputClassName?: string;\n  /**\n   * Callback fired when the switch state changes.\n   */\n  onChange?: (value: boolean, event: ChangeEvent<HTMLInputElement>) => void;\n  /**\n   * The ID of the element controlled by the switch.\n   */\n  \"aria-controls\"?: string;\n  /**\n   * If true, the switch is checked by default.\n   */\n  defaultChecked?: boolean;\n  /**\n   * The child component rendered inside the switch.\n   */\n  children?: ReactElement<MockToggleProps>;\n  /**\n   * Class name applied to the wrapper element.\n   */\n  wrapperClassName?: string;\n}\n\n// TODO no story\nconst Switch = forwardRef(\n  (\n    {\n      id,\n      name,\n      value,\n      role,\n      disabled,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      checked,\n      inputClassName,\n      onChange,\n      \"aria-controls\": ariaControls,\n      defaultChecked,\n      children: originalChildren,\n      wrapperClassName,\n      \"data-testid\": dataTestId\n    }: SwitchProps,\n    ref: React.ForwardedRef<HTMLInputElement>\n  ) => {\n    const { onChange: overrideOnChange, isChecked: overrideChecked } = useSwitch({\n      isDisabled: disabled,\n      isChecked: checked,\n      defaultChecked,\n      onChange\n    });\n\n    const children = useMemo(\n      () =>\n        React.cloneElement(originalChildren, {\n          ...originalChildren?.props,\n          checked: overrideChecked\n        }),\n      [originalChildren, overrideChecked]\n    );\n\n    return (\n      <label htmlFor={id} className={wrapperClassName} data-vibe={ComponentVibeId.TOGGLE}>\n        <input\n          ref={ref}\n          id={id}\n          aria-controls={ariaControls}\n          value={value}\n          name={name}\n          type=\"checkbox\"\n          className={cx(styles[\"hidden-switch\"], inputClassName)}\n          checked={overrideChecked}\n          role={role ? role : \"switch\"}\n          onChange={overrideOnChange}\n          disabled={disabled}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-checked={overrideChecked}\n          data-testid={dataTestId}\n        />\n        {children}\n      </label>\n    );\n  }\n);\n\nexport default Switch;\n"
  },
  {
    "path": "packages/core/src/components/Switch/index.ts",
    "content": "export { default as Switch, SwitchProps } from \"./Switch\";\n"
  },
  {
    "path": "packages/core/src/components/Switch/index.tsx",
    "content": "import React, { useCallback, useRef } from \"react\";\nimport classes from \"./Switch.module.scss\";\nimport { isNil } from \"es-toolkit\";\n\n// TODO should be migrated to TS? Not used rn\nexport function useHiddenSwitch({\n  id,\n  name,\n  value,\n  role,\n  disabled,\n  ariaLabel,\n  ariaLabelledBy,\n  checked,\n  onChange,\n  ariaControls,\n  defaultChecked\n}) {\n  const inputRef = useRef(null);\n  const onSwitchClick = useCallback(() => {\n    const manualClickEvent = new MouseEvent(\"click\", {\n      shiftKey: true,\n      // After dispatch this event we will want it to be captured by all the relevant event listeners which registered to this checkbox input.\n      bubbles: true,\n      cancelable: true\n    });\n    inputRef.current.dispatchEvent(manualClickEvent);\n  }, []);\n  let overrideDefaultChecked = defaultChecked;\n\n  // If component did not receive default checked and checked props, choose default checked as\n  // default behavior (handle isChecked logic inside input) and set default value\n  if (isNil(overrideDefaultChecked) && isNil(checked)) {\n    overrideDefaultChecked = false;\n  }\n\n  return {\n    onSwitchClick,\n    isChecked: overrideDefaultChecked || checked,\n    HiddenSwitch: (\n      <input\n        ref={inputRef}\n        id={id}\n        aria-controls={ariaControls}\n        className={classes[\"hidden-switch\"]}\n        value={value}\n        name={name}\n        type=\"checkbox\"\n        role={role ? role : \"switch\"}\n        onChange={onChange}\n        defaultChecked={overrideDefaultChecked}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        checked={checked}\n        aria-checked={checked}\n      />\n    )\n  };\n}\n"
  },
  {
    "path": "packages/core/src/components/Table/Table/Table.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n.table {\n  @include scroller(6px, 6px);\n  --sticky-cell-hover-background: linear-gradient(\n      to right,\n      var(--primary-background-hover-color),\n      var(--primary-background-hover-color)\n    ),\n    linear-gradient(to right, var(--primary-background-color), var(--primary-background-color));\n\n  background-color: var(--primary-background-color);\n  overflow: auto;\n  width: 100%;\n  height: 100%;\n\n  &.border {\n    border: 1px solid var(--layout-border-color);\n    border-radius: var(--border-radius-small);\n  }\n\n  [role=\"rowgroup\"] {\n    [role=\"row\"] {\n      > [role=\"cell\"] {\n        border-bottom: 1px solid var(--layout-border-color);\n      }\n    }\n\n    > [role=\"row\"]:last-of-type {\n      > [role=\"cell\"] {\n        border-bottom: none;\n      }\n    }\n  }\n\n  &.virtualized {\n    overflow: hidden;\n  }\n\n  &.hasScroll {\n    --sticky-cell-box-shadow: 3px 0 4px rgba(0, 0, 0, 0.1);\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Table/Table/Table.tsx",
    "content": "import React, {\n  forwardRef,\n  type ReactElement,\n  type UIEventHandler,\n  useCallback,\n  useMemo,\n  useRef,\n  useState\n} from \"react\";\nimport cx from \"classnames\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport { type TableHeaderProps } from \"../TableHeader/TableHeader\";\nimport { type TableBodyProps } from \"../TableBody/TableBody\";\nimport { getTableRowLayoutStyles } from \"./tableHelpers\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../../tests/constants\";\nimport { RowHeights } from \"./TableConsts\";\nimport { type RowSizes } from \"./Table.types\";\nimport styles from \"./Table.module.scss\";\nimport { TableProvider } from \"../context/TableContext/TableContext\";\nimport { TableRowMenuProvider } from \"../context/TableRowMenuContext/TableRowMenuContext\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport { type TableProviderValue } from \"../context/TableContext/TableContext.types\";\nimport { type TableRowMenuProviderValue } from \"../context/TableRowMenuContext/TableRowMenuContext.types\";\nimport { type SubIcon } from \"@vibe/icon\";\n\nexport type TableLoadingStateType = \"long-text\" | \"medium-text\" | \"circle\" | \"rectangle\";\n\ntype Width = number | `${number}%` | `${number}px` | `${number}fr`;\n\nexport interface TableColumn {\n  /**\n   * Unique identifier for the column.\n   */\n  id: string;\n  /**\n   * Column title displayed in the header.\n   */\n  title: string;\n  /**\n   * Additional information displayed as a tooltip.\n   */\n  infoContent?: string;\n  /**\n   * Column width configuration.\n   */\n  width?: Width | { min: Width; max: Width };\n  /**\n   * Icon displayed next to the column title.\n   */\n  icon?: SubIcon;\n  /**\n   * Loading state type for the column when data is being fetched.\n   */\n  loadingStateType?: TableLoadingStateType;\n}\n\nexport interface TableProps extends VibeComponentProps {\n  /**\n   * Defines the columns of the table.\n   */\n  columns: TableColumn[];\n  /**\n   * State of the data being displayed (loading or error).\n   */\n  dataState?: {\n    isLoading?: boolean;\n    isError?: boolean;\n  };\n  /**\n   * React element displayed when there is an error state.\n   */\n  errorState: ReactElement;\n  /**\n   * React element displayed when there is no data.\n   */\n  emptyState: ReactElement;\n  /**\n   * Custom styles for the table.\n   */\n  style?: React.CSSProperties;\n  /**\n   * The child components inside the table, such as `<TableHeader />` and `<TableBody />`.\n   */\n  children?:\n    | ReactElement<TableHeaderProps>\n    | ReactElement<TableBodyProps>\n    | Array<ReactElement<TableHeaderProps> | ReactElement<TableBodyProps>>;\n  /**\n   * The row size of the table.\n   */\n  size?: RowSizes;\n  /**\n   * If true, removes the table's outer border.\n   */\n  withoutBorder?: boolean;\n}\n\nconst Table = forwardRef(\n  (\n    {\n      id,\n      className,\n      \"data-testid\": dataTestId,\n      columns,\n      errorState,\n      emptyState,\n      dataState,\n      style,\n      children,\n      size = \"medium\",\n      withoutBorder\n    }: TableProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const tableRootRef = useRef<HTMLDivElement>(null);\n    const mergedRef = useMergeRef(ref, tableRootRef);\n\n    const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);\n    const [hoveredRowRef, setHoveredRowRef] = useState<React.RefObject<HTMLDivElement>>(null);\n\n    const resetHoveredRow = useCallback(() => {\n      setIsMenuOpen(false);\n      setHoveredRowRef(null);\n    }, []);\n\n    const [isVirtualized, setIsVirtualized] = useState<boolean>(false);\n    const markTableAsVirtualized = useCallback(() => {\n      setIsVirtualized(true);\n    }, []);\n\n    const [isScrolled, setIsScrolled] = useState<boolean>(false);\n\n    const onScroll = useCallback<UIEventHandler<HTMLDivElement>>(\n      e => {\n        resetHoveredRow();\n        if (!isVirtualized) {\n          const newLeft = (e.target as HTMLDivElement).scrollLeft;\n          const hasScroll = newLeft > 0;\n          setIsScrolled(prevScroll => (prevScroll !== hasScroll ? hasScroll : prevScroll));\n        }\n      },\n      [resetHoveredRow, isVirtualized]\n    );\n\n    const { gridTemplateColumns } = getTableRowLayoutStyles(columns);\n\n    /**\n     * The `--table-grid-template-columns` and `--table-row-size` variables will be available under each <Table /> scope\n     * and will be consumed in the stylesheets of its children (<TableHeader />, <TableRow />, <TableHeaderCell />)\n     */\n    const calculatedStyle = {\n      \"--table-grid-template-columns\": gridTemplateColumns,\n      \"--table-row-size\": `${RowHeights[size]}px`,\n      ...style\n    } as React.CSSProperties;\n\n    const tableProviderValue = useMemo<TableProviderValue>(\n      () => ({\n        columns,\n        dataState,\n        emptyState,\n        errorState,\n        size,\n        tableRootRef,\n        isVirtualized,\n        markTableAsVirtualized,\n        isScrolled,\n        setIsScrolled: (scrollLeft: boolean) => setIsScrolled(scrollLeft)\n      }),\n      [columns, dataState, emptyState, errorState, isVirtualized, markTableAsVirtualized, isScrolled, size]\n    );\n\n    const tableRowMenuProviderValue = useMemo<TableRowMenuProviderValue>(\n      () => ({\n        tableRootRef,\n        hoveredRowRef,\n        isMenuOpen,\n        resetHoveredRow,\n        setHoveredRowRef: (rowRef: React.RefObject<HTMLDivElement>) => setHoveredRowRef(rowRef),\n        setIsMenuOpen: (isOpen: boolean) => setIsMenuOpen(isOpen)\n      }),\n      [hoveredRowRef, isMenuOpen, resetHoveredRow, setHoveredRowRef]\n    );\n\n    return (\n      <TableProvider value={tableProviderValue}>\n        <TableRowMenuProvider value={tableRowMenuProviderValue}>\n          <div\n            ref={mergedRef}\n            id={id}\n            className={cx(\n              styles.table,\n              {\n                [styles.border]: !withoutBorder,\n                [styles.virtualized]: isVirtualized,\n                [styles.hasScroll]: isScrolled\n              },\n              className\n            )}\n            data-testid={dataTestId || getTestId(ComponentDefaultTestId.TABLE, id)}\n            data-vibe={ComponentVibeId.TABLE}\n            role=\"table\"\n            style={calculatedStyle}\n            onScroll={onScroll}\n          >\n            {children}\n          </div>\n        </TableRowMenuProvider>\n      </TableProvider>\n    );\n  }\n);\n\nexport default Table;\n"
  },
  {
    "path": "packages/core/src/components/Table/Table/Table.types.ts",
    "content": "export type RowSizes = \"small\" | \"medium\" | \"large\";\n"
  },
  {
    "path": "packages/core/src/components/Table/Table/TableConsts.ts",
    "content": "export const SKELETON_ROWS_AMOUNT = 5;\n\n/**\n * @deprecated\n */\nexport enum RowSizes {\n  SMALL = \"small\",\n  MEDIUM = \"medium\",\n  LARGE = \"large\"\n}\n\nexport const RowHeights = {\n  [RowSizes.SMALL]: 32,\n  [RowSizes.MEDIUM]: 40,\n  [RowSizes.LARGE]: 48\n};\n"
  },
  {
    "path": "packages/core/src/components/Table/Table/__tests__/Table.test.tsx",
    "content": "import { vi, beforeEach, afterEach, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { cleanup, render } from \"@testing-library/react\";\nimport TableCell from \"../../TableCell/TableCell\";\nimport Table, { type TableColumn } from \"../Table\";\nimport TableBody from \"../../TableBody/TableBody\";\nimport TableRow from \"../../TableRow/TableRow\";\nimport TableHeaderCell, { type TableHeaderCellProps } from \"../../TableHeaderCell/TableHeaderCell\";\nimport TableHeader from \"../../TableHeader/TableHeader\";\nimport TableCellSkeleton from \"../../TableCellSkeleton/TableCellSkeleton\";\nimport { mockUseTable, mockUseTableRowMenu } from \"./tableTestUtils\";\nimport TableVirtualizedBody from \"../../TableVirtualizedBody/TableVirtualizedBody\";\n\ninterface TableNode {\n  role: string;\n  children: TableNode[];\n}\n\nfunction traverse(element: Element, acc: TableNode[] = []): TableNode[] {\n  for (const child of Array.from(element.children)) {\n    const role = child.getAttribute(\"role\");\n\n    if (role) {\n      const result: TableNode = { role, children: [] };\n      acc.push(result);\n      traverse(child, result.children);\n    } else {\n      traverse(child, acc);\n    }\n  }\n  return acc;\n}\n\ndescribe(\"Table\", () => {\n  const tableBoilerplate = {\n    columns: [{ id: \"column-id\", title: \"Title\", width: 20 }],\n    errorState: <h1>Error State</h1>,\n    emptyState: <h1>Empty State</h1>\n  };\n\n  afterEach(cleanup);\n\n  describe(\"<TableCell />\", () => {\n    it(\"Should render string as a <Text /> component\", () => {\n      const { getByRole } = render(<TableCell>String</TableCell>);\n      const cell = getByRole(\"cell\");\n      const textElement = cell.children[0];\n\n      expect(textElement.classList).toContain(\"typography\");\n      expect(textElement.textContent).toBe(\"String\");\n    });\n\n    it(\"Should render number as a <Text /> component\", () => {\n      const { getByRole } = render(<TableCell>{100}</TableCell>);\n      const cell = getByRole(\"cell\");\n      const textElement = cell.children[0];\n\n      expect(textElement.classList).toContain(\"typography\");\n      expect(textElement.textContent).toBe(\"100\");\n    });\n\n    it(\"Should render HTML element as a child\", () => {\n      const { getByRole } = render(\n        <TableCell>\n          <div>Content</div>\n        </TableCell>\n      );\n      const cell = getByRole(\"cell\");\n\n      expect(cell.innerHTML).toBe(`<div>Content</div>`);\n    });\n  });\n\n  describe(\"TableRow\", () => {\n    beforeEach(() => {\n      mockUseTable();\n      mockUseTableRowMenu();\n    });\n\n    afterEach(() => {\n      vi.restoreAllMocks();\n    });\n\n    it(\"should render without a highlight state\", () => {\n      const { getByRole } = render(<TableRow />);\n      expect(getByRole(\"row\")).toHaveAttribute(\"aria-selected\", \"false\");\n    });\n\n    it(\"should render with a highlight state\", () => {\n      const { getByRole } = render(<TableRow highlighted />);\n      expect(getByRole(\"row\")).toHaveAttribute(\"aria-selected\", \"true\");\n    });\n  });\n\n  describe(\"TableCellSkeleton\", () => {\n    it(\"should render with a specified type\", () => {\n      const { getByTestId } = render(<TableCellSkeleton type=\"long-text\" />);\n      expect(getByTestId(\"skeleton\")).toHaveClass(\"longText\");\n    });\n  });\n\n  describe(\"loading state\", () => {\n    it(\"should render skeletons body in case loadingState is true\", () => {\n      const { getByRole } = render(\n        <Table {...tableBoilerplate} dataState={{ isLoading: true }}>\n          <TableBody></TableBody>\n        </Table>\n      );\n\n      const tableBodyElement = getByRole(\"rowgroup\");\n      expect(tableBodyElement.children.length).toBe(5);\n    });\n  });\n\n  describe(\"Virtualized table loading state\", () => {\n    it(\"should render header when virtualized table has headerRenderer and is in loading state\", () => {\n      const headerText = \"Test Header Column\";\n      const columns = [{ id: \"test\", title: headerText, loadingStateType: \"long-text\" as const }];\n\n      const HeaderRenderer = (columns: any[]) => (\n        <div role=\"rowgroup\" data-testid=\"table-header\">\n          {columns.map(col => (\n            <div key={col.id}>{col.title}</div>\n          ))}\n        </div>\n      );\n\n      const RowRenderer = (item: any) => <div role=\"row\">{item.name}</div>;\n\n      const { getByTestId, getByText } = render(\n        <Table\n          columns={columns}\n          dataState={{ isLoading: true }}\n          errorState={<div>Error</div>}\n          emptyState={<div>Empty</div>}\n        >\n          <TableVirtualizedBody\n            items={[{ id: \"1\", name: \"Test Item\" }]}\n            rowRenderer={RowRenderer}\n            headerRenderer={HeaderRenderer}\n            columns={columns}\n          />\n        </Table>\n      );\n\n      // Header should be visible even when loading\n      expect(getByTestId(\"table-header\")).toBeInTheDocument();\n      expect(getByText(headerText)).toBeInTheDocument();\n\n      // Should also render skeleton rows\n      const skeletonElements = document.querySelectorAll('[data-testid=\"skeleton\"]');\n      expect(skeletonElements.length).toBeGreaterThan(0);\n    });\n  });\n\n  describe(\"Empty/error states\", () => {\n    it(\"Should render empty state in case <TableBody /> is empty\", () => {\n      const { getByRole } = render(\n        <Table {...tableBoilerplate}>\n          <TableBody></TableBody>\n        </Table>\n      );\n\n      const tableBodyElement = getByRole(\"rowgroup\");\n      expect(tableBodyElement.textContent).toBe(\"Empty State\");\n    });\n\n    it(\"Should render empty state in case <TableBody /> has empty array children\", () => {\n      const { getByRole } = render(\n        <Table {...tableBoilerplate}>\n          <TableBody>\n            {[].map(item => (\n              <TableRow key={item.id}>\n                <TableCell>Table Cell</TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      );\n\n      const tableBodyElement = getByRole(\"rowgroup\");\n      expect(tableBodyElement.textContent).toBe(\"Empty State\");\n    });\n\n    it(\"Should render table rows instead of empty state\", () => {\n      const { getByRole } = render(\n        <Table {...tableBoilerplate}>\n          <TableBody>\n            <TableRow>\n              <TableCell>Table Cell</TableCell>\n            </TableRow>\n          </TableBody>\n        </Table>\n      );\n\n      const tableBodyElement = getByRole(\"rowgroup\");\n      expect(tableBodyElement.textContent).toBe(\"Table Cell\");\n    });\n\n    it(\"Should render error state\", () => {\n      const { getByRole } = render(\n        <Table {...tableBoilerplate} dataState={{ isError: true }}>\n          <TableBody></TableBody>\n        </Table>\n      );\n\n      const tableBodyElement = getByRole(\"rowgroup\");\n      expect(tableBodyElement.textContent).toBe(\"Error State\");\n    });\n  });\n\n  describe(\"Layout\", () => {\n    it(\"Should apply column layout CSS variable to table's styling scope\", () => {\n      const columns: TableColumn[] = [\n        { id: \"1\", title: \"Fixed width\", width: 20 },\n        { id: \"2\", title: \"Min and max\", width: { min: 10, max: 20 } },\n        { id: \"3\", title: \"Dynamic width\" }\n      ];\n\n      const { getByRole } = render(<Table {...tableBoilerplate} columns={columns} />);\n\n      const style = getByRole(\"table\").getAttribute(\"style\");\n      expect(style).toMatch(\"20px minmax(10px, 20px) minmax(112px, 1fr)\");\n    });\n  });\n\n  describe(\"a11y\", () => {\n    it(\"Should have accessible DOM structure (roles hierarchy)\", () => {\n      const { baseElement } = render(\n        <Table {...tableBoilerplate}>\n          <TableHeader>\n            <TableHeaderCell title=\"Title\" sortState=\"asc\" />\n          </TableHeader>\n          <TableBody>\n            <TableRow>\n              <TableCell>Table Cell</TableCell>\n            </TableRow>\n          </TableBody>\n        </Table>\n      );\n\n      expect(traverse(baseElement)).toMatchObject([\n        {\n          role: \"table\",\n          children: [\n            { role: \"rowgroup\", children: [{ role: \"columnheader\" }] },\n            { role: \"rowgroup\", children: [{ role: \"row\", children: [{ role: \"cell\" }] }] }\n          ]\n        }\n      ]);\n    });\n\n    describe.each([\n      [\"asc\", \"ascending\"],\n      [\"desc\", \"descending\"],\n      [\"none\", \"none\"]\n    ])(\"Sort\", (sortState: TableHeaderCellProps[\"sortState\"], ariaSort) => {\n      it(`Should apply aria-sort to header element (${sortState}, ${ariaSort}) when onSortClicked is defined`, () => {\n        const onSortClicked = vi.fn();\n        const { getByRole } = render(\n          <TableHeaderCell title=\"Title\" sortState={sortState} onSortClicked={onSortClicked} />\n        );\n        expect(getByRole(\"columnheader\").getAttribute(\"aria-sort\")).toBe(ariaSort);\n      });\n\n      it(`Should not apply aria-sort to header element (${sortState}, ${ariaSort}) when onSortClicked isn't defined`, () => {\n        const { getByRole } = render(<TableHeaderCell title=\"Title\" sortState={sortState} />);\n        expect(getByRole(\"columnheader\")).not.toHaveAttribute(\"aria-sort\");\n      });\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Table/Table/__tests__/TableHelpers.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport { generateWidth } from \"../tableHelpers\";\n\ndescribe(\"tableHelpers\", () => {\n  describe(\"generateWidth\", () => {\n    it(\"should convert numbers to string with px unit\", () => {\n      expect(generateWidth(100)).toBe(\"100px\");\n    });\n\n    it(\"should accept percentage strings without modification\", () => {\n      expect(generateWidth(\"25%\")).toBe(\"25%\");\n    });\n\n    it(\"should accept pixel strings without modification\", () => {\n      expect(generateWidth(\"150px\")).toBe(\"150px\");\n    });\n\n    it(\"should accept fraction strings without modification\", () => {\n      expect(generateWidth(\"3fr\")).toBe(\"3fr\");\n    });\n\n    it(\"should handle minmax with different units\", () => {\n      expect(generateWidth({ min: 50, max: 75 })).toBe(\"minmax(50px, 75px)\");\n    });\n\n    it(\"should handle minmax with numeric units\", () => {\n      expect(generateWidth({ min: 50, max: \"75%\" })).toBe(\"minmax(50px, 75%)\");\n    });\n\n    it(\"should handle minmax with percentage units\", () => {\n      expect(generateWidth({ min: \"50%\", max: \"75%\" })).toBe(\"minmax(50%, 75%)\");\n    });\n\n    it(\"should return default minmax for undefined width\", () => {\n      expect(generateWidth(undefined)).toBe(\"minmax(112px, 1fr)\");\n    });\n\n    it(\"should return default minmax for null width\", () => {\n      expect(generateWidth(null)).toBe(\"minmax(112px, 1fr)\");\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Table/Table/__tests__/tableTestUtils.tsx",
    "content": "import React from \"react\";\nimport { vi } from \"vitest\";\nimport * as TableContextModule from \"../../context/TableContext/TableContext\";\nimport { type TableContext } from \"../../context/TableContext/TableContext.types\";\nimport * as TableRowMenuContextModule from \"../../context/TableRowMenuContext/TableRowMenuContext\";\nimport { type TableRowMenuContext } from \"../../context/TableRowMenuContext/TableRowMenuContext.types\";\nimport { RowSizes } from \"../TableConsts\";\n\nexport function mockUseTable() {\n  const mockUseTable = vi.spyOn(TableContextModule, \"useTable\").mockImplementation(\n    () =>\n      ({\n        columns: [],\n        emptyState: <div />,\n        errorState: <div />,\n        size: RowSizes.MEDIUM,\n        tableRootRef: { current: null },\n        isVirtualized: false,\n        markTableAsVirtualized: vi.fn(),\n        isScrolled: false,\n        setIsScrolled: vi.fn(),\n        headRef: { current: null },\n        onHeadScroll: vi.fn(),\n        virtualizedListRef: { current: null },\n        onVirtualizedListScroll: vi.fn()\n      } satisfies TableContext)\n  );\n\n  return mockUseTable;\n}\n\nexport function mockUseTableRowMenu() {\n  const mockUseTableRowMenu = vi.spyOn(TableRowMenuContextModule, \"useTableRowMenu\").mockImplementation(\n    () =>\n      ({\n        hoveredRowId: null,\n        resetHoveredRow: vi.fn(),\n        onMouseOverRow: vi.fn(),\n        onMouseLeaveRow: vi.fn(),\n        onMouseOverRowMenu: vi.fn(),\n        onMouseLeaveRowMenu: vi.fn(),\n        menuButtonPosition: 0,\n        setTableMenuShown: vi.fn(),\n        setTableMenuHidden: vi.fn()\n      } satisfies TableRowMenuContext)\n  );\n\n  return mockUseTableRowMenu;\n}\n"
  },
  {
    "path": "packages/core/src/components/Table/Table/tableHelpers.ts",
    "content": "import { type AriaAttributes } from \"react\";\nimport type React from \"react\";\nimport { type TableColumn, type TableLoadingStateType } from \"./Table\";\nimport { Sort } from \"@vibe/icons\";\nimport { type TableHeaderCellProps } from \"../TableHeaderCell/TableHeaderCell\";\nimport { SortAscending, SortDescending } from \"@vibe/icons\";\nimport { type SkeletonType } from \"../../../components/Skeleton/Skelton.types\";\nexport function generateWidth(width: TableColumn[\"width\"]): string {\n  if (typeof width === \"number\") {\n    return `${width}px`;\n  } else if (typeof width === \"string\") {\n    return /%|px|fr$/.test(width) ? width : `${width}px`;\n  } else if (width?.min && width?.max) {\n    return `minmax(${generateWidth(width.min)}, ${generateWidth(width.max)})`;\n  } else {\n    return \"minmax(112px, 1fr)\";\n  }\n}\n\nexport function getTableRowLayoutStyles(columns: TableColumn[], style: React.CSSProperties = {}): React.CSSProperties {\n  return {\n    ...style,\n    display: \"grid\",\n    gridTemplateColumns: columns.map(cell => generateWidth(cell.width)).join(\" \")\n  };\n}\n\nexport function getSortIcon(sortState: TableHeaderCellProps[\"sortState\"]) {\n  if (sortState === \"asc\") {\n    return SortAscending;\n  } else if (sortState === \"desc\") {\n    return SortDescending;\n  } else {\n    return Sort;\n  }\n}\n\nexport function getNextSortState(sortState: TableHeaderCellProps[\"sortState\"]): TableHeaderCellProps[\"sortState\"] {\n  if (sortState === \"asc\") {\n    return \"desc\";\n  } else if (sortState === \"desc\") {\n    return \"none\";\n  } else {\n    return \"asc\";\n  }\n}\n\nexport function getAriaSort(sortState: TableHeaderCellProps[\"sortState\"]): AriaAttributes[\"aria-sort\"] {\n  if (sortState === \"asc\") {\n    return \"ascending\";\n  }\n  if (sortState === \"desc\") {\n    return \"descending\";\n  }\n  return \"none\";\n}\n\nexport function getSkeletonType(loadingStateType: TableLoadingStateType): SkeletonType {\n  if (loadingStateType === \"circle\") {\n    return \"circle\";\n  }\n  if (loadingStateType === \"rectangle\") {\n    return \"rectangle\";\n  }\n  return \"text\";\n}\n\nexport function getLoadingTypeForCell(\n  loadingStateType: TableLoadingStateType,\n  rowIndex: number\n): TableLoadingStateType {\n  return loadingStateType === \"long-text\"\n    ? ([\"long-text\", \"medium-text\"] as TableLoadingStateType[])[rowIndex % 2]\n    : loadingStateType;\n}\n"
  },
  {
    "path": "packages/core/src/components/Table/TableBody/TableBody.module.scss",
    "content": ".tableBody {\n  height: 100%;\n}\n"
  },
  {
    "path": "packages/core/src/components/Table/TableBody/TableBody.tsx",
    "content": "import React, { type ReactElement, type ComponentProps, forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport TableRow, { type TableRowProps } from \"../TableRow/TableRow\";\nimport type VirtualizedList from \"../../VirtualizedList/VirtualizedList\";\nimport styles from \"./TableBody.module.scss\";\nimport { useTable } from \"../context/TableContext/TableContext\";\nimport TableCellSkeleton from \"../TableCellSkeleton/TableCellSkeleton\";\nimport { SKELETON_ROWS_AMOUNT } from \"../Table/TableConsts\";\nimport { getLoadingTypeForCell } from \"../Table/tableHelpers\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\n\nexport interface TableBodyProps extends VibeComponentProps {\n  /**\n   * The child components inside the table body, such as `<TableRow />` elements.\n   */\n  children?:\n    | ReactElement<TableRowProps>\n    | ReactElement<TableRowProps>[]\n    | ReactElement<ComponentProps<typeof VirtualizedList>>;\n}\n\nconst TableBody = forwardRef(\n  ({ id, className, \"data-testid\": dataTestId, children }: TableBodyProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n    const { dataState, emptyState, errorState, columns } = useTable();\n    const { isLoading, isError } = dataState || {};\n\n    const skeletonRender = [...new Array(SKELETON_ROWS_AMOUNT)].map((_, rowIndex) => (\n      <TableRow key={rowIndex}>\n        {columns.map(({ loadingStateType }, columnIndex) => (\n          <TableCellSkeleton\n            key={`${rowIndex}-${columnIndex}`}\n            type={getLoadingTypeForCell(loadingStateType, rowIndex)}\n          />\n        ))}\n      </TableRow>\n    ));\n\n    return (\n      <div\n        ref={ref}\n        id={id}\n        className={cx(styles.tableBody, className)}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TABLE_BODY, id)}\n        role=\"rowgroup\"\n      >\n        {isLoading\n          ? skeletonRender\n          : isError\n          ? errorState\n          : !children || (Array.isArray(children) && children.length === 0)\n          ? emptyState\n          : children}\n      </div>\n    );\n  }\n);\n\nexport default TableBody;\n"
  },
  {
    "path": "packages/core/src/components/Table/TableCell/TableCell.module.scss",
    "content": ".tableCell {\n  padding: 9px 16px;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n\n  &.sticky {\n    z-index: 1;\n    position: sticky;\n    inset-inline-start: 0;\n    box-shadow: var(--sticky-cell-box-shadow);\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Table/TableCell/TableCell.tsx",
    "content": "import React, { forwardRef } from \"react\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport { Text } from \"@vibe/typography\";\nimport styles from \"./TableCell.module.scss\";\nimport cx from \"classnames\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\n\nexport interface TableCellProps extends VibeComponentProps {\n  /**\n   * The content inside the table cell.\n   */\n  children?: React.ReactNode;\n  /**\n   * If true, makes the cell sticky (typically used for frozen columns).\n   */\n  sticky?: boolean;\n}\n\nconst TableCell = forwardRef(\n  (\n    { sticky, id, className, \"data-testid\": dataTestId, children }: TableCellProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const isSingleChild = React.Children.count(children) === 1;\n    const typeOfFirstChild = typeof React.Children.toArray(children)[0];\n    const isFirstChildString = typeOfFirstChild === \"string\" || typeOfFirstChild === \"number\";\n\n    return (\n      <div\n        ref={ref}\n        id={id}\n        className={cx(styles.tableCell, { [styles.sticky]: sticky }, className)}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TABLE_CELL, id)}\n        role=\"cell\"\n      >\n        {isSingleChild && isFirstChildString ? (\n          <Text type=\"text2\" color=\"primary\">\n            {children}\n          </Text>\n        ) : (\n          children\n        )}\n      </div>\n    );\n  }\n);\n\nexport default TableCell;\n"
  },
  {
    "path": "packages/core/src/components/Table/TableCellSkeleton/TableCellSkeleton.module.scss",
    "content": ".tableCellSkeletonWrapper {\n  height: 100%;\n\n  &.longText {\n    padding-inline-end: var(--space-24);\n  }\n\n  &.mediumText {\n    padding-inline-end: var(--space-64);\n  }\n\n  .tableCellSkeleton {\n    height: 100%;\n\n    &.circle,\n    &.rectangle {\n      width: auto;\n      aspect-ratio: 1 / 1;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Table/TableCellSkeleton/TableCellSkeleton.tsx",
    "content": "import React from \"react\";\nimport cx from \"classnames\";\nimport TableCell from \"../TableCell/TableCell\";\nimport Skeleton from \"../../Skeleton/Skeleton\";\nimport styles from \"./TableCellSkeleton.module.scss\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport { getStyle } from \"@vibe/shared\";\nimport { type TableLoadingStateType } from \"../Table/Table\";\nimport { getSkeletonType } from \"../Table/tableHelpers\";\nimport { camelCase } from \"es-toolkit\";\n\nexport interface TableCellSkeletonProps extends VibeComponentProps {\n  /**\n   * The type of loading state for the skeleton.\n   */\n  type?: TableLoadingStateType;\n  /**\n   * If true, renders a shorter skeleton for text-based loading states.\n   */\n  short?: boolean;\n}\n\nconst TableCellSkeleton: React.FC<TableCellSkeletonProps> = ({ type = \"long-text\" }) => {\n  const isText = [\"long-text\", \"medium-text\"].includes(type);\n  return (\n    <TableCell>\n      <Skeleton\n        type={getSkeletonType(type)}\n        wrapperClassName={cx(styles.tableCellSkeletonWrapper, getStyle(styles, camelCase(type)))}\n        className={cx(styles.tableCellSkeleton, { [getStyle(styles, camelCase(type))]: !isText })}\n        fullWidth\n      />\n    </TableCell>\n  );\n};\n\nexport default TableCellSkeleton;\n"
  },
  {
    "path": "packages/core/src/components/Table/TableContainer/TableContainer.module.scss",
    "content": ".tableContainer {\n  width: 100%;\n  height: 100%;\n  position: relative;\n\n  .menuContainer {\n    --cell-width: 40px;\n    position: absolute;\n    overflow: hidden;\n    inset-inline-start: calc(1px - var(--cell-width));\n    width: var(--cell-width);\n    height: 100%;\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Table/TableContainer/TableContainer.tsx",
    "content": "import React, { forwardRef, useRef } from \"react\";\nimport { TableContainerProvider } from \"../context/TableContainerContext/TableContainerContext\";\nimport { type TableContainerProps } from \"./TableContainer.types\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport cx from \"classnames\";\nimport styles from \"./TableContainer.module.scss\";\n\nconst TableContainer = forwardRef(\n  (\n    { id, className, \"data-testid\": dataTestId, style, children }: TableContainerProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const menuContainerRef = useRef<HTMLDivElement>(null);\n\n    return (\n      <TableContainerProvider value={{ menuContainerRef }}>\n        <div\n          ref={ref}\n          id={id}\n          className={cx(styles.tableContainer, className)}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.TABLE_CONTAINER, id)}\n          style={style}\n        >\n          <div ref={menuContainerRef} className={styles.menuContainer} />\n          {children}\n        </div>\n      </TableContainerProvider>\n    );\n  }\n);\n\nexport default TableContainer;\n"
  },
  {
    "path": "packages/core/src/components/Table/TableContainer/TableContainer.types.ts",
    "content": "import type React from \"react\";\nimport { type VibeComponentProps } from \"../../../types\";\n\nexport interface TableContainerProps extends VibeComponentProps {\n  /**\n   * Custom styles for the table container.\n   */\n  style?: React.CSSProperties;\n  /**\n   * The child elements inside the table container.\n   */\n  children: React.ReactNode;\n}\n"
  },
  {
    "path": "packages/core/src/components/Table/TableHeader/TableHeader.module.scss",
    "content": ".tableHeader {\n  display: grid;\n  grid-template-columns: var(--table-grid-template-columns);\n  position: sticky;\n  top: 0;\n  z-index: 2;\n  background-color: var(--primary-background-color);\n  min-width: 100%;\n  width: fit-content;\n\n  > [role=\"columnheader\"] {\n    background-color: inherit;\n  }\n\n  &.virtualized {\n    overflow: auto;\n    width: auto;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Table/TableHeader/TableHeader.tsx",
    "content": "import React, { forwardRef } from \"react\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport styles from \"./TableHeader.module.scss\";\nimport { type TableHeaderCellProps } from \"../TableHeaderCell/TableHeaderCell\";\nimport cx from \"classnames\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport { useTable } from \"../context/TableContext/TableContext\";\nimport { useMergeRef } from \"@vibe/shared\";\n\nexport interface TableHeaderProps extends VibeComponentProps {\n  /**\n   * The child elements inside the table header, typically `<TableHeaderCell />` components.\n   */\n  children?: React.ReactElement<TableHeaderCellProps> | React.ReactElement<TableHeaderCellProps>[];\n}\n\nconst TableHeader = forwardRef(\n  (\n    { id, className, \"data-testid\": dataTestId, children }: TableHeaderProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const { headRef, onHeadScroll, isVirtualized } = useTable();\n    const mergedRef = useMergeRef(headRef, ref);\n\n    return (\n      <div\n        ref={mergedRef}\n        id={id}\n        className={cx(styles.tableHeader, { [styles.virtualized]: isVirtualized }, className)}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TABLE_HEADER, id)}\n        role=\"rowgroup\"\n        onScroll={onHeadScroll}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nexport default TableHeader;\n"
  },
  {
    "path": "packages/core/src/components/Table/TableHeaderCell/TableHeaderCell.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n.tableHeaderCell {\n  height: var(--table-row-size);\n  padding: var(--space-8);\n  padding-inline-start: var(--space-16);\n  color: var(--secondary-text-color);\n  box-sizing: border-box;\n  text-align: initial;\n  border-bottom: 1px solid var(--layout-border-color);\n  display: flex;\n  justify-content: space-between;\n  background-color: inherit;\n  @include focus-style();\n\n  &.sticky {\n    z-index: 1;\n    position: sticky;\n    inset-inline-start: 0;\n    box-shadow: var(--sticky-cell-box-shadow);\n\n    &:hover {\n      background: var(--sticky-cell-hover-background);\n    }\n  }\n\n  &:hover,\n  &.sortActive {\n    background-color: var(--primary-background-hover-color);\n  }\n\n  .tableHeaderCellContent {\n    min-width: 0;\n\n    .icon {\n      min-width: var(--space-16);\n    }\n\n    .infoTooltip {\n      display: inline-flex;\n    }\n  }\n\n  .tableHeaderCellSort {\n    padding-inline-start: var(--space-8);\n\n    .sort {\n      color: var(--icon-color);\n      transition: opacity 0.1s;\n\n      &.asc,\n      &.desc {\n        color: var(--primary-text-color);\n      }\n\n      &:not(.show) {\n        opacity: 0;\n        pointer-events: none;\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Table/TableHeaderCell/TableHeaderCell.tsx",
    "content": "import React, { forwardRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport styles from \"./TableHeaderCell.module.scss\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { IconButton } from \"@vibe/icon-button\";\nimport { Info } from \"@vibe/icons\";\nimport { Text } from \"@vibe/typography\";\nimport { Flex } from \"@vibe/layout\";\nimport { getAriaSort, getNextSortState, getSortIcon } from \"../Table/tableHelpers\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport { getStyle } from \"@vibe/shared\";\n\nexport interface TableHeaderCellProps extends VibeComponentProps {\n  /**\n   * The title of the column, displayed inside the header cell.\n   */\n  title: string | React.ReactNode;\n  /**\n   * Icon displayed next to the column title.\n   */\n  icon?: SubIcon;\n  /**\n   * Tooltip content for additional information about the column.\n   */\n  infoContent?: string;\n  /**\n   * Current sorting state of the column.\n   */\n  sortState?: \"asc\" | \"desc\" | \"none\";\n  /**\n   * Callback fired when the column header is clicked to change sorting.\n   */\n  onSortClicked?: (direction: \"asc\" | \"desc\" | \"none\") => void;\n  /**\n   * ARIA label for the sort button.\n   */\n  sortButtonAriaLabel?: string;\n  /**\n   * If true, the header cell remains visible while scrolling horizontally.\n   */\n  sticky?: boolean;\n}\n\nconst TableHeaderCell = forwardRef(\n  (\n    {\n      id,\n      className,\n      \"data-testid\": dataTestId,\n      title,\n      onSortClicked,\n      infoContent,\n      icon,\n      sortState = \"none\",\n      sortButtonAriaLabel = \"Sort\",\n      sticky\n    }: TableHeaderCellProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const [isHovered, setIsHovered] = useState<boolean>(false);\n    const ariaSort = getAriaSort(sortState);\n    const isSortActive = onSortClicked && ariaSort !== \"none\";\n    const shouldShowSortIcon = ariaSort !== \"none\" || isHovered;\n\n    return (\n      <div\n        ref={ref}\n        id={id}\n        className={cx(\n          styles.tableHeaderCell,\n          { [styles.sortActive]: isSortActive, [styles.sticky]: sticky },\n          className\n        )}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TABLE_HEADER_CELL, id)}\n        role=\"columnheader\"\n        onMouseOver={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n        onFocus={() => setIsHovered(true)}\n        onBlur={() => setIsHovered(false)}\n        aria-sort={onSortClicked ? ariaSort : undefined}\n        tabIndex={onSortClicked ? 0 : undefined}\n      >\n        <Flex direction=\"row\" align=\"center\" className={styles.tableHeaderCellContent} gap=\"xs\">\n          {icon && <Icon icon={icon} className={styles.icon} />}\n          {typeof title === \"string\" ? (\n            <Text type=\"text2\" weight=\"medium\" color=\"secondary\">\n              {title}\n            </Text>\n          ) : (\n            title\n          )}\n          {infoContent && (\n            <Tooltip content={infoContent} referenceWrapperClassName={styles.infoTooltip}>\n              <Icon icon={Info} label={infoContent} />\n            </Tooltip>\n          )}\n        </Flex>\n        {onSortClicked && (\n          <Flex direction=\"row\" align=\"center\" className={styles.tableHeaderCellSort}>\n            <IconButton\n              icon={getSortIcon(sortState)}\n              kind=\"tertiary\"\n              size=\"xs\"\n              aria-label={sortButtonAriaLabel}\n              aria-hidden={!shouldShowSortIcon}\n              className={cx(styles.sort, getStyle(styles, sortState), {\n                [styles.show]: shouldShowSortIcon\n              })}\n              onClick={() => onSortClicked(getNextSortState(sortState))}\n            />\n          </Flex>\n        )}\n      </div>\n    );\n  }\n);\n\nexport default TableHeaderCell;\n"
  },
  {
    "path": "packages/core/src/components/Table/TableRow/TableRow.module.scss",
    "content": "@import \"../../../styles/states\";\n\n.tableRow {\n  height: var(--table-row-size);\n  display: grid;\n  grid-template-columns: var(--table-grid-template-columns);\n  min-width: 100%;\n  width: fit-content;\n\n  &[aria-selected=\"true\"] > [role=\"cell\"] {\n    background-color: var(--primary-selected-color);\n  }\n\n  > [role=\"cell\"] {\n    background-color: var(--primary-background-color);\n  }\n\n  &:hover {\n    > [role=\"cell\"] {\n      background: var(--sticky-cell-hover-background);\n    }\n\n    &[aria-selected=\"true\"] > [role=\"cell\"] {\n      background: var(--primary-selected-hover-color);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Table/TableRow/TableRow.tsx",
    "content": "import React, { forwardRef, useCallback, useRef } from \"react\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport { type TableCellProps } from \"../TableCell/TableCell\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport cx from \"classnames\";\nimport styles from \"./TableRow.module.scss\";\nimport { useTableRowMenu } from \"../context/TableRowMenuContext/TableRowMenuContext\";\n\nexport interface TableRowProps extends VibeComponentProps {\n  /**\n   * If true, applies a highlighted style to the row.\n   */\n  highlighted?: boolean;\n  /**\n   * The child components inside the table row, typically `<TableCell />` elements.\n   */\n  children?: React.ReactElement<TableCellProps> | React.ReactElement<TableCellProps>[];\n  /**\n   * Custom styles applied to the table row.\n   */\n  style?: React.CSSProperties;\n}\n\nconst TableRow = forwardRef(\n  (\n    { highlighted, children, style, id, className, \"data-testid\": dataTestId }: TableRowProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const componentRef = useRef<HTMLDivElement>(null);\n    const mergedRef = useMergeRef(componentRef, ref);\n    const { onMouseOverRow, onMouseLeaveRow } = useTableRowMenu();\n\n    const onMouseEnter = useCallback(() => {\n      onMouseOverRow(componentRef);\n    }, [onMouseOverRow]);\n\n    return (\n      <div\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TABLE_ROW, id)}\n        ref={mergedRef}\n        role=\"row\"\n        aria-selected={highlighted || false}\n        className={cx(styles.tableRow, className)}\n        style={style}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeaveRow}\n        tabIndex={-1}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nexport default TableRow;\n"
  },
  {
    "path": "packages/core/src/components/Table/TableRowMenu/TableRowMenu.module.scss",
    "content": ".rowMenuContainer {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-inline: var(--space-8);\n\n  &.small {\n    padding-block: var(--space-4);\n  }\n\n  &.medium {\n    padding-block: var(--space-8);\n  }\n\n  &.large {\n    padding-block: 12px;\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Table/TableRowMenu/TableRowMenu.tsx",
    "content": "import React, { forwardRef, useCallback } from \"react\";\nimport cx from \"classnames\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport styles from \"./TableRowMenu.module.scss\";\nimport MenuButton from \"../../MenuButton/MenuButton\";\nimport { Menu } from \"../../Menu\";\nimport { createPortal } from \"react-dom\";\nimport { useTable } from \"../context/TableContext/TableContext\";\nimport { getStyle } from \"@vibe/shared\";\nimport { useTableRowMenu } from \"../context/TableRowMenuContext/TableRowMenuContext\";\nimport { useTableContainer } from \"../context/TableContainerContext/TableContainerContext\";\nimport { type TableMenuProps } from \"./TableRowMenu.types\";\n\nconst TableRowMenu = forwardRef(\n  (\n    { rowId, className, id, \"data-testid\": dataTestId, children }: TableMenuProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const { menuContainerRef } = useTableContainer();\n    const { size } = useTable();\n    const {\n      hoveredRowId,\n      setTableMenuHidden,\n      setTableMenuShown,\n      menuButtonPosition,\n      onMouseOverRowMenu,\n      onMouseLeaveRowMenu\n    } = useTableRowMenu();\n\n    const onMenuHide = useCallback(() => {\n      setTableMenuHidden();\n    }, [setTableMenuHidden]);\n\n    const onMenuShow = useCallback(() => {\n      setTableMenuShown();\n    }, [setTableMenuShown]);\n\n    const shouldShowMenu = menuContainerRef.current && hoveredRowId && hoveredRowId === rowId;\n    if (!shouldShowMenu) return null;\n\n    return (\n      <>\n        {createPortal(\n          <div\n            className={cx(styles.rowMenuContainer, getStyle(styles, size))}\n            style={{ top: menuButtonPosition }}\n            onMouseEnter={onMouseOverRowMenu}\n            onMouseLeave={onMouseLeaveRowMenu}\n          >\n            <MenuButton\n              id={id}\n              ref={ref}\n              className={cx(styles.tableMenu, className)}\n              size=\"xs\"\n              onMenuHide={onMenuHide}\n              onMenuShow={onMenuShow}\n              data-testid={dataTestId || getTestId(ComponentDefaultTestId.TABLE_ROW_MENU, id)}\n            >\n              <Menu>{children}</Menu>\n            </MenuButton>\n          </div>,\n          menuContainerRef.current\n        )}\n      </>\n    );\n  }\n);\n\nexport default TableRowMenu;\n"
  },
  {
    "path": "packages/core/src/components/Table/TableRowMenu/TableRowMenu.types.ts",
    "content": "import { type VibeComponentProps } from \"../../../types\";\nimport type React from \"react\";\n\nexport interface TableMenuProps extends VibeComponentProps {\n  /**\n   * The ID of the row that the menu is associated with.\n   */\n  rowId: string;\n  /**\n   * The child elements inside the table menu.\n   */\n  children?: React.ReactNode;\n}\n"
  },
  {
    "path": "packages/core/src/components/Table/TableVirtualizedBody/TableVirtualizedBody.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n.tableBody {\n  // Take into consideration header's height since VirtualizedBody sets a static height\n  height: calc(100% - var(--table-row-size));\n\n  .tableBodyItems {\n    @include scroller(6px, 6px);\n  }\n\n  &.withHeader {\n    height: 100%;\n    overflow: hidden;\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Table/TableVirtualizedBody/TableVirtualizedBody.tsx",
    "content": "import React, { type ComponentType, forwardRef, useCallback, useEffect, useMemo } from \"react\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport TableBody from \"../TableBody/TableBody\";\nimport styles from \"./TableVirtualizedBody.module.scss\";\nimport { FixedSizeList as List, type ListChildComponentProps, type ScrollDirection } from \"react-window\";\nimport { useTable } from \"../context/TableContext/TableContext\";\nimport cx from \"classnames\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport { RowHeights } from \"../Table/TableConsts\";\nimport AutoSizer, { type Size as AutoSizerSize } from \"react-virtualized-auto-sizer\";\nimport { useTableRowMenu } from \"../context/TableRowMenuContext/TableRowMenuContext\";\nimport { type TableColumn } from \"../Table/Table\";\n\nexport type TableVirtualizedRow = Record<string, unknown> & { id: string };\n\nexport interface TableVirtualizedBodyProps<T extends TableVirtualizedRow = TableVirtualizedRow>\n  extends VibeComponentProps {\n  /**\n   * The list of items to render in the virtualized table.\n   */\n  items: T[];\n  /**\n   * Function to render a row in the table.\n   */\n  rowRenderer: (item: T) => JSX.Element;\n  /**\n   * Callback function triggered on scroll.\n   */\n  onScroll?: (horizontalScrollDirection: ScrollDirection, scrollTop: number, scrollUpdateWasRequested: boolean) => void;\n  /**\n   * The columns configuration for the table.\n   */\n  columns?: TableColumn[];\n  /**\n   * Function to render the table header.\n   */\n  headerRenderer?: (columns: TableColumn[]) => JSX.Element;\n  /**\n   * Number of rows to render above/below the visible area.\n   */\n  overscanCount?: number;\n}\n\nconst MemoizedRow = React.memo(\n  <T extends TableVirtualizedRow>({\n    item,\n    rowRenderer,\n    style\n  }: {\n    item: T;\n    rowRenderer: (item: T) => JSX.Element;\n    style: React.CSSProperties;\n  }) => {\n    const element = rowRenderer(item);\n    const { width: _width, ...styleWithoutWidth } = style;\n    return React.cloneElement(element, {\n      style: { ...styleWithoutWidth, ...element.props?.style }\n    });\n  }\n);\n\nconst TableVirtualizedBody = forwardRef(\n  <T extends TableVirtualizedRow = TableVirtualizedRow>(\n    {\n      items,\n      rowRenderer,\n      onScroll,\n      columns,\n      headerRenderer,\n      id,\n      className,\n      \"data-testid\": dataTestId,\n      overscanCount = 1\n    }: TableVirtualizedBodyProps<T>,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const { size, virtualizedListRef, onVirtualizedListScroll, markTableAsVirtualized, dataState } = useTable();\n    const { resetHoveredRow } = useTableRowMenu();\n    const virtualizedWithHeader = !!columns && !!headerRenderer;\n    const { isLoading } = dataState || {};\n\n    const handleOuterScroll = useCallback(\n      (e: Event) => {\n        const target = e.target as HTMLDivElement;\n        resetHoveredRow();\n        onVirtualizedListScroll({\n          target,\n          currentTarget: target\n        } as unknown as React.UIEvent<HTMLDivElement>);\n      },\n      [resetHoveredRow, onVirtualizedListScroll]\n    );\n\n    useEffect(() => {\n      const scrollElement = virtualizedListRef.current;\n      if (!scrollElement) return;\n\n      scrollElement.addEventListener(\"scroll\", handleOuterScroll);\n\n      return () => {\n        scrollElement.removeEventListener(\"scroll\", handleOuterScroll);\n      };\n    }, [handleOuterScroll, virtualizedListRef]);\n\n    const handleVirtualizedVerticalScroll = useCallback(\n      ({\n        scrollDirection,\n        scrollOffset,\n        scrollUpdateWasRequested\n      }: {\n        scrollDirection: ScrollDirection;\n        scrollOffset: number;\n        scrollUpdateWasRequested: boolean;\n      }) => {\n        if (virtualizedWithHeader) return;\n        onScroll?.(scrollDirection, scrollOffset, scrollUpdateWasRequested);\n      },\n      [onScroll, virtualizedWithHeader]\n    );\n\n    const itemRenderer = useCallback<ComponentType<ListChildComponentProps<T>>>(\n      ({ index, style }) => {\n        if (virtualizedWithHeader && index === 0) {\n          return null; //placeholder for virtualized with header\n        }\n        const currentIndex = virtualizedWithHeader ? index - 1 : index;\n        const currentItem = items[currentIndex];\n\n        return <MemoizedRow item={currentItem} rowRenderer={rowRenderer} style={style} />;\n      },\n      [items, rowRenderer, virtualizedWithHeader]\n    );\n\n    useEffect(() => {\n      if (!virtualizedWithHeader) markTableAsVirtualized();\n    }, [markTableAsVirtualized, virtualizedWithHeader]);\n\n    const memoizedInnerElementType = useMemo(\n      () =>\n        virtualizedWithHeader\n          ? forwardRef(({ children, ...rest }: any, ref: React.Ref<HTMLDivElement>) => (\n              <div ref={ref} {...rest}>\n                {headerRenderer!(columns!)}\n                {children}\n              </div>\n            ))\n          : undefined,\n      [virtualizedWithHeader, headerRenderer, columns]\n    );\n\n    // When in loading state and we have a header renderer, render header separately\n    if (isLoading && virtualizedWithHeader) {\n      return (\n        <div\n          ref={ref}\n          id={id}\n          className={cx(styles.tableBody, styles.withHeader, className)}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.TABLE_VIRTUALIZED_BODY, id)}\n        >\n          {headerRenderer!(columns!)}\n          <TableBody />\n        </div>\n      );\n    }\n\n    return (\n      <TableBody\n        className={cx(\n          styles.tableBody,\n          {\n            [styles.withHeader]: virtualizedWithHeader\n          },\n          className\n        )}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TABLE_VIRTUALIZED_BODY, id)}\n        ref={ref}\n      >\n        {items?.length && (\n          <AutoSizer>\n            {({ height, width }: AutoSizerSize) => (\n              <List\n                className={styles.tableBodyItems}\n                itemSize={RowHeights[size]}\n                height={height}\n                itemCount={virtualizedWithHeader ? items.length + 1 : items.length}\n                width={width}\n                overscanCount={overscanCount}\n                onScroll={handleVirtualizedVerticalScroll}\n                outerRef={element => {\n                  virtualizedListRef.current = element;\n                }}\n                innerElementType={memoizedInnerElementType}\n              >\n                {itemRenderer}\n              </List>\n            )}\n          </AutoSizer>\n        )}\n      </TableBody>\n    );\n  }\n);\n\nexport default TableVirtualizedBody;\n"
  },
  {
    "path": "packages/core/src/components/Table/context/TableContainerContext/TableContainerContext.tsx",
    "content": "import React, { createContext, useContext } from \"react\";\nimport {\n  type TableContainerContext as ITableContainerContext,\n  type TableContainerProviderProps\n} from \"./TableContainerContext.types\";\n\nconst TableContainerContext = createContext<ITableContainerContext | undefined>(undefined);\n\nexport const TableContainerProvider = ({ value, children }: TableContainerProviderProps) => {\n  return <TableContainerContext.Provider value={value}>{children}</TableContainerContext.Provider>;\n};\n\nexport const useTableContainer = () => {\n  const context = useContext(TableContainerContext);\n  if (!context) {\n    throw new Error(\"useTableContainer must be used within a TableContainerProvider\");\n  }\n  return context;\n};\n"
  },
  {
    "path": "packages/core/src/components/Table/context/TableContainerContext/TableContainerContext.types.ts",
    "content": "import type React from \"react\";\n\nexport type TableContainerContext = TableContainerProviderValue;\n\nexport interface TableContainerProviderValue {\n  menuContainerRef: React.RefObject<HTMLDivElement>;\n}\n\nexport interface TableContainerProviderProps {\n  value: TableContainerProviderValue;\n  children: React.ReactNode;\n}\n"
  },
  {
    "path": "packages/core/src/components/Table/context/TableContext/TableContext.tsx",
    "content": "import React, { createContext, type UIEventHandler, useCallback, useContext, useMemo, useRef } from \"react\";\nimport { type TableContext as ITableContext, type TableProviderProps } from \"./TableContext.types\";\n\nconst TableContext = createContext<ITableContext | undefined>(undefined);\n\nexport const TableProvider = ({ value, children }: TableProviderProps) => {\n  const { setIsScrolled } = value;\n  const headRef = useRef<HTMLDivElement>(null);\n  const virtualizedListRef = useRef<HTMLDivElement>(null);\n  const lastScrollLeft = useRef<number>(0);\n\n  const syncScroll = useCallback(\n    (newScrollLeft: number, source: \"head\" | \"body\") => {\n      if (newScrollLeft === lastScrollLeft.current) return;\n\n      if (source === \"body\" && headRef.current) {\n        headRef.current.scrollLeft = newScrollLeft;\n      }\n      if (source === \"head\" && virtualizedListRef.current) {\n        virtualizedListRef.current.scrollLeft = newScrollLeft;\n      }\n\n      const hasScroll = newScrollLeft > 0;\n      setIsScrolled(prevScroll => (prevScroll !== hasScroll ? hasScroll : prevScroll));\n\n      lastScrollLeft.current = newScrollLeft;\n    },\n    [setIsScrolled]\n  );\n\n  const onHeadScroll: UIEventHandler<HTMLDivElement> = useCallback(\n    e => {\n      const newLeft = (e.target as HTMLDivElement).scrollLeft;\n      syncScroll(newLeft, \"head\");\n    },\n    [syncScroll]\n  );\n\n  const onVirtualizedListScroll = useCallback<UIEventHandler<HTMLDivElement>>(\n    e => {\n      const newLeft = (e.target as HTMLDivElement).scrollLeft;\n      syncScroll(newLeft, \"body\");\n    },\n    [syncScroll]\n  );\n\n  const contextValue = useMemo<ITableContext>(\n    () => ({\n      ...value,\n      headRef,\n      onHeadScroll,\n      virtualizedListRef,\n      onVirtualizedListScroll\n    }),\n    [value, onHeadScroll, onVirtualizedListScroll]\n  );\n\n  return <TableContext.Provider value={contextValue}>{children}</TableContext.Provider>;\n};\n\nexport const useTable = () => {\n  const context = useContext(TableContext);\n  if (context === undefined) {\n    throw new Error(\"useTable must be used within a TableProvider\");\n  }\n  return context;\n};\n"
  },
  {
    "path": "packages/core/src/components/Table/context/TableContext/TableContext.types.ts",
    "content": "import { type TableProps } from \"../../Table/Table\";\nimport { type UIEventHandler } from \"react\";\nimport type React from \"react\";\n\nexport interface TableContext extends TableProviderValue {\n  headRef: React.MutableRefObject<HTMLDivElement>;\n  onHeadScroll: UIEventHandler<HTMLDivElement>;\n  virtualizedListRef: React.MutableRefObject<HTMLDivElement>;\n  onVirtualizedListScroll: UIEventHandler<HTMLDivElement>;\n}\n\nexport interface TableProviderForwardedProps {\n  columns: TableProps[\"columns\"];\n  dataState?: TableProps[\"dataState\"];\n  emptyState: TableProps[\"emptyState\"];\n  errorState: TableProps[\"errorState\"];\n  size: TableProps[\"size\"];\n}\n\nexport interface TableProviderValue extends TableProviderForwardedProps {\n  tableRootRef: React.MutableRefObject<HTMLDivElement>;\n  isVirtualized: boolean;\n  markTableAsVirtualized: () => void;\n  isScrolled: boolean;\n  setIsScrolled: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nexport type TableProviderProps = {\n  value: TableProviderValue;\n  children: React.ReactNode;\n};\n"
  },
  {
    "path": "packages/core/src/components/Table/context/TableRowMenuContext/TableRowMenuContext.tsx",
    "content": "import React, { createContext, useCallback, useContext, useMemo, useRef, useState } from \"react\";\nimport {\n  type TableRowMenuContext as ITableRowMenuContext,\n  type TableRowMenuProviderProps\n} from \"./TableRowMenuContext.types\";\n\nconst TableRowMenuContext = createContext<ITableRowMenuContext | undefined>(undefined);\n\nexport const TableRowMenuProvider = ({ value, children }: TableRowMenuProviderProps) => {\n  const { tableRootRef, hoveredRowRef, isMenuOpen, resetHoveredRow, setHoveredRowRef, setIsMenuOpen } = value;\n  const [menuButtonPosition, setMenuButtonPosition] = useState(0);\n  const isMenuHovered = useRef(false);\n\n  const onMouseOverRow = useCallback(\n    (rowRef: React.RefObject<HTMLDivElement>) => {\n      if (isMenuOpen) return;\n\n      setHoveredRowRef(rowRef);\n      const tableRootTop = tableRootRef.current.getBoundingClientRect().top;\n      const rowTop = rowRef.current.getBoundingClientRect().top;\n      setMenuButtonPosition(rowTop - tableRootTop);\n    },\n    [isMenuOpen, setHoveredRowRef, tableRootRef]\n  );\n\n  const onMouseLeaveRow = useCallback(() => {\n    if (isMenuOpen || isMenuHovered.current) return;\n    setHoveredRowRef(null);\n  }, [isMenuOpen, setHoveredRowRef]);\n\n  const onMouseOverRowMenu = useCallback(() => {\n    isMenuHovered.current = true;\n  }, []);\n\n  const onMouseLeaveRowMenu = useCallback(() => {\n    isMenuHovered.current = false;\n    if (isMenuOpen) return;\n\n    if (!hoveredRowRef?.current) {\n      setHoveredRowRef(null);\n    }\n  }, [isMenuOpen, hoveredRowRef, setHoveredRowRef]);\n\n  const setTableMenuShown = useCallback(() => {\n    setIsMenuOpen(true);\n  }, [setIsMenuOpen]);\n\n  const setTableMenuHidden = useCallback(() => {\n    setIsMenuOpen(false);\n  }, [setIsMenuOpen]);\n\n  const contextValue = useMemo<ITableRowMenuContext>(\n    () => ({\n      hoveredRowId: hoveredRowRef?.current?.id,\n      resetHoveredRow,\n      menuButtonPosition,\n      onMouseOverRow,\n      onMouseLeaveRow,\n      onMouseOverRowMenu,\n      onMouseLeaveRowMenu,\n      setTableMenuShown,\n      setTableMenuHidden\n    }),\n    [\n      hoveredRowRef,\n      resetHoveredRow,\n      menuButtonPosition,\n      onMouseLeaveRow,\n      onMouseLeaveRowMenu,\n      onMouseOverRow,\n      onMouseOverRowMenu,\n      setTableMenuShown,\n      setTableMenuHidden\n    ]\n  );\n\n  return <TableRowMenuContext.Provider value={contextValue}>{children}</TableRowMenuContext.Provider>;\n};\n\nexport const useTableRowMenu = () => {\n  const context = useContext(TableRowMenuContext);\n  if (!context) {\n    throw new Error(\"useTableRowMenuContext must be used within a TableRowMenuProvider\");\n  }\n  return context;\n};\n"
  },
  {
    "path": "packages/core/src/components/Table/context/TableRowMenuContext/TableRowMenuContext.types.ts",
    "content": "import type React from \"react\";\n\nexport interface TableRowMenuContext extends Pick<TableRowMenuProviderValue, \"resetHoveredRow\"> {\n  hoveredRowId: string;\n  onMouseOverRow: (rowRef: React.MutableRefObject<HTMLDivElement>) => void;\n  onMouseLeaveRow: () => void;\n  onMouseOverRowMenu: () => void;\n  onMouseLeaveRowMenu: () => void;\n  menuButtonPosition: number;\n  setTableMenuShown: () => void;\n  setTableMenuHidden: () => void;\n}\n\nexport interface TableRowMenuProviderValue {\n  tableRootRef: React.RefObject<HTMLDivElement>;\n  hoveredRowRef: React.RefObject<HTMLDivElement>;\n  isMenuOpen: boolean;\n  resetHoveredRow: () => void;\n  setHoveredRowRef: (rowRef: React.RefObject<HTMLDivElement>) => void;\n  setIsMenuOpen: (isOpen: boolean) => void;\n}\n\nexport type TableRowMenuProviderProps = {\n  value: TableRowMenuProviderValue;\n  children: React.ReactNode;\n};\n"
  },
  {
    "path": "packages/core/src/components/Table/index.ts",
    "content": "export { default as Table, type TableProps, type TableColumn } from \"./Table/Table\";\nexport { default as TableContainer } from \"./TableContainer/TableContainer\";\nexport * from \"./TableContainer/TableContainer.types\";\nexport { default as TableHeader, type TableHeaderProps } from \"./TableHeader/TableHeader\";\nexport { default as TableHeaderCell, type TableHeaderCellProps } from \"./TableHeaderCell/TableHeaderCell\";\nexport { default as TableBody, type TableBodyProps } from \"./TableBody/TableBody\";\nexport {\n  default as TableVirtualizedBody,\n  type TableVirtualizedBodyProps,\n  type TableVirtualizedRow\n} from \"./TableVirtualizedBody/TableVirtualizedBody\";\nexport { default as TableRow, type TableRowProps } from \"./TableRow/TableRow\";\nexport { default as TableRowMenu } from \"./TableRowMenu/TableRowMenu\";\nexport * from \"./TableRowMenu/TableRowMenu.types\";\nexport { default as TableCell, type TableCellProps } from \"./TableCell/TableCell\";\n\nexport * from \"./Table/Table.types\";\n"
  },
  {
    "path": "packages/core/src/components/Tabs/Tab/Tab.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n@import \"../../../styles/states\";\n@import \"../../../styles/typography\";\n\n.tabWrapper {\n  position: relative;\n  display: inline-block;\n  padding-inline: 1px;\n  border-top: 1px solid transparent;\n  border-bottom: 2px solid;\n  border-bottom-color: var(--ui-background-color);\n  color: var(--primary-text-color);\n  text-align: center;\n  height: 100%;\n  margin: 0;\n\n  &.stretchedUnderline {\n    border-bottom: 0;\n  }\n}\n\n.tabWrapper:after {\n  display: block;\n  position: absolute;\n  inset-inline: 0;\n  content: \"\";\n  border-bottom: solid 2px;\n  border-bottom-color: var(--primary-color);\n  transform: scaleX(0);\n  z-index: 0;\n}\n\n.tabWrapper .tabInner {\n  $margin-bottom: 1px;\n  height: calc(100% - #{$margin-bottom});\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-decoration: none;\n  padding: 4px 16px;\n  @include vibe-text(text1, normal);\n  user-select: none;\n  margin-bottom: $margin-bottom;\n  cursor: pointer;\n  color: var(--primary-text-color);\n}\n\n.tabWrapper .tabInner:focus {\n  outline: none;\n}\n\n.tabWrapper .tabInner .tabIcon {\n  color: var(--icon-color);\n  margin-inline-end: var(--space-8);\n}\n\n.tabWrapper .tabInner .tabIcon.right {\n  margin-inline-end: 0;\n  margin-inline-start: var(--space-8);\n}\n\n.tabWrapper.tabFocusVisibleInset {\n  @include focus-style-css-inset(3px, 3px);\n  position: relative;\n}\n\n.tabWrapper.active:after {\n  transform: scaleX(1);\n  transition: transform var(--motion-productive-medium) var(--motion-timing-enter);\n}\n\n.tabWrapper.disabled .tabInner {\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n}\n\n.tabWrapper:not(.disabled) .tabInner:hover {\n  border-radius: 4px;\n  background-color: var(--primary-background-hover-color);\n}\n"
  },
  {
    "path": "packages/core/src/components/Tabs/Tab/Tab.tsx",
    "content": "import cx from \"classnames\";\nimport React, { type FC, forwardRef, type ReactElement, useRef } from \"react\";\nimport { noop as NOOP } from \"es-toolkit\";\nimport { useMergeRef, getStyle } from \"@vibe/shared\";\n\nimport { Icon, type IconType, type SubIcon } from \"@vibe/icon\";\nimport type VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport styles from \"./Tab.module.scss\";\nimport { Tooltip, type TooltipProps } from \"@vibe/tooltip\";\nimport { ComponentVibeId } from \"../../../tests/constants\";\nimport { keyCodes } from \"../../../constants\";\n\nexport interface TabProps extends VibeComponentProps {\n  /**\n   * Class name applied to the inner tab content.\n   */\n  tabInnerClassName?: string;\n  /**\n   * The index value of the tab.\n   */\n  value?: number;\n  /**\n   * If true, disables the tab.\n   */\n  disabled?: boolean;\n  /**\n   * If true, marks the tab as active.\n   */\n  active?: boolean;\n  /**\n   * If true, applies focus styles to the tab.\n   */\n  focus?: boolean;\n  /**\n   * If true, hides the individual tab border when using stretched underline.\n   */\n  stretchedUnderline?: boolean;\n  /**\n   * The icon displayed in the tab.\n   */\n  icon?: SubIcon;\n  /**\n   * The type of icon.\n   */\n  iconType?: IconType;\n  /**\n   * The position of the icon relative to the text.\n   */\n  iconSide?: string;\n  /**\n   * Callback fired when the tab is clicked.\n   */\n  onClick?: (value: number) => void;\n  /**\n   * Props passed to the tab's tooltip.\n   */\n  tooltipProps?: Partial<TooltipProps>;\n  /**\n   * The content displayed inside the tab.\n   */\n  children?: string | ReactElement | ReactElement[];\n  /**\n   * Tab index for focus management.\n   */\n  tabIndex?: number;\n  /**\n   * The id of the associated TabPanel for aria-controls attribute.\n   */\n  \"aria-controls\"?: string;\n}\n\nconst Tab: FC<TabProps> = forwardRef(\n  (\n    {\n      className,\n      tabInnerClassName,\n      id,\n      value = 0,\n      disabled = false,\n      active = false,\n      focus = false,\n      stretchedUnderline = false,\n      onClick = NOOP,\n      tooltipProps = {} as TooltipProps,\n      icon,\n      iconType,\n      iconSide = \"left\",\n      children,\n      \"data-testid\": dataTestId,\n      tabIndex,\n      \"aria-controls\": ariaControls\n    }: TabProps,\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    function renderIconAndChildren() {\n      if (!icon) return children;\n\n      const iconElement = (\n        <Icon\n          aria-hidden={true}\n          type={iconType}\n          icon={icon}\n          className={cx(styles.tabIcon, getStyle(styles, iconSide))}\n          size={18}\n          ignoreFocusStyle\n        />\n      );\n\n      const childrenArray = React.Children.toArray(children);\n\n      if (iconSide === \"left\") {\n        return [iconElement, ...childrenArray];\n      }\n\n      return [...childrenArray, iconElement];\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent) {\n      if (event.key === keyCodes.ENTER || event.key === keyCodes.SPACE) {\n        event.preventDefault();\n        !disabled && onClick(value);\n      }\n    }\n\n    return (\n      <Tooltip {...tooltipProps} content={tooltipProps.content}>\n        <li\n          ref={mergedRef}\n          key={id}\n          className={cx(styles.tabWrapper, className, {\n            [styles.active]: active,\n            [styles.disabled]: disabled,\n            [styles.tabFocusVisibleInset]: focus,\n            [styles.stretchedUnderline]: stretchedUnderline\n          })}\n          id={id}\n          role=\"tab\"\n          aria-selected={active}\n          aria-disabled={disabled}\n          aria-controls={ariaControls || undefined}\n          tabIndex={tabIndex}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.TAB, id)}\n          data-vibe={ComponentVibeId.TAB}\n          onClick={() => !disabled && onClick(value)}\n          onKeyDown={handleKeyDown}\n        >\n          <div className={cx(styles.tabInner, tabInnerClassName)}>{renderIconAndChildren()}</div>\n        </li>\n      </Tooltip>\n    );\n  }\n);\n\nexport default Tab;\n"
  },
  {
    "path": "packages/core/src/components/Tabs/Tab/__tests__/Tab.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport Tab from \"../Tab\";\nimport { Email } from \"@vibe/icons\";\n\ndescribe(\"Tab renders correctly\", () => {\n  it(\"with empty props\", () => {\n    const tree = renderer.create(<Tab />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"when disabled\", () => {\n    const tree = renderer.create(<Tab disabled />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"when active\", () => {\n    const tree = renderer.create(<Tab active />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"when focus\", () => {\n    const tree = renderer.create(<Tab focus />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"when focus and active\", () => {\n    const tree = renderer.create(<Tab focus active />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with icon on left\", () => {\n    const tree = renderer\n      .create(\n        <Tab icon={Email} iconType=\"svg\" iconSide=\"left\">\n          Tab\n        </Tab>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with icon on right\", () => {\n    const tree = renderer\n      .create(\n        <Tab icon={Email} iconType=\"svg\" iconSide=\"right\">\n          Tab\n        </Tab>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with value\", () => {\n    const tree = renderer.create(<Tab value={0}>Tab</Tab>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with id\", () => {\n    const tree = renderer.create(<Tab id=\"test\">Tab</Tab>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with className\", () => {\n    const tree = renderer.create(<Tab className=\"test\">Tab</Tab>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Tabs/Tab/__tests__/Tab.test.tsx",
    "content": "import { vi, afterEach, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { render, fireEvent, screen, cleanup } from \"@testing-library/react\";\nimport { act } from \"@testing-library/react-hooks\";\nimport Tab, { type TabProps } from \"../Tab\";\n\nvi.useFakeTimers();\n\nconst onClickMock = vi.fn();\nconst text = \"tab\";\n\nconst renderComponent = (props: TabProps = {}) => {\n  return render(\n    <Tab onClick={onClickMock} {...props}>\n      {text}\n    </Tab>\n  );\n};\n\ndescribe(\"Tab tests\", () => {\n  afterEach(() => {\n    cleanup();\n  });\n\n  describe(\"click\", () => {\n    it(\"should call the click callback when clicked\", () => {\n      renderComponent();\n      fireEvent.click(screen.getByText(text));\n      expect(onClickMock.mock.calls.length).toBe(1);\n    });\n  });\n\n  describe(\"Tooltips\", () => {\n    it(\"should display tooltip content from tooltipProps\", () => {\n      const tooltipContent = \"My Text\";\n      const tooltipProps = { content: tooltipContent };\n\n      renderComponent({ tooltipProps });\n      const component = screen.getByText(text);\n      act(() => {\n        fireEvent.mouseEnter(component);\n      });\n      vi.advanceTimersByTime(1000);\n      const content = screen.getByText(tooltipContent);\n      expect(content).toBeTruthy();\n      act(() => {\n        fireEvent.mouseLeave(component);\n      });\n      vi.advanceTimersByTime(1000);\n    });\n  });\n\n  describe(\"aria-controls\", () => {\n    it(\"should add aria-controls attribute when id and aria-controls are provided\", () => {\n      const tabId = \"test-tab\";\n      const panelId = \"test-panel\";\n\n      renderComponent({ id: tabId, \"aria-controls\": panelId });\n      const tabElement = screen.getByRole(\"tab\");\n      expect(tabElement).toHaveAttribute(\"aria-controls\", panelId);\n    });\n\n    it(\"should not add aria-controls attribute when aria-controls is missing\", () => {\n      const tabId = \"test-tab\";\n\n      renderComponent({ id: tabId });\n      const tabElement = screen.getByRole(\"tab\");\n      expect(tabElement).not.toHaveAttribute(\"aria-controls\");\n    });\n\n    it(\"should not add aria-controls attribute when both id and aria-controls are missing\", () => {\n      renderComponent();\n      const tabElement = screen.getByRole(\"tab\");\n      expect(tabElement).not.toHaveAttribute(\"aria-controls\");\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Tabs/Tab/__tests__/__snapshots__/Tab.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`Tab renders correctly > when active 1`] = `\n<li\n  aria-disabled={false}\n  aria-selected={true}\n  className=\"tabWrapper active\"\n  data-testid=\"tab\"\n  data-vibe=\"Tab\"\n  onClick={[Function]}\n  onKeyDown={[Function]}\n  role=\"tab\"\n>\n  <div\n    className=\"tabInner\"\n  />\n</li>\n`;\n\nexports[`Tab renders correctly > when disabled 1`] = `\n<li\n  aria-disabled={true}\n  aria-selected={false}\n  className=\"tabWrapper disabled\"\n  data-testid=\"tab\"\n  data-vibe=\"Tab\"\n  onClick={[Function]}\n  onKeyDown={[Function]}\n  role=\"tab\"\n>\n  <div\n    className=\"tabInner\"\n  />\n</li>\n`;\n\nexports[`Tab renders correctly > when focus 1`] = `\n<li\n  aria-disabled={false}\n  aria-selected={false}\n  className=\"tabWrapper tabFocusVisibleInset\"\n  data-testid=\"tab\"\n  data-vibe=\"Tab\"\n  onClick={[Function]}\n  onKeyDown={[Function]}\n  role=\"tab\"\n>\n  <div\n    className=\"tabInner\"\n  />\n</li>\n`;\n\nexports[`Tab renders correctly > when focus and active 1`] = `\n<li\n  aria-disabled={false}\n  aria-selected={true}\n  className=\"tabWrapper active tabFocusVisibleInset\"\n  data-testid=\"tab\"\n  data-vibe=\"Tab\"\n  onClick={[Function]}\n  onKeyDown={[Function]}\n  role=\"tab\"\n>\n  <div\n    className=\"tabInner\"\n  />\n</li>\n`;\n\nexports[`Tab renders correctly > with className 1`] = `\n<li\n  aria-disabled={false}\n  aria-selected={false}\n  className=\"tabWrapper test\"\n  data-testid=\"tab\"\n  data-vibe=\"Tab\"\n  onClick={[Function]}\n  onKeyDown={[Function]}\n  role=\"tab\"\n>\n  <div\n    className=\"tabInner\"\n  >\n    Tab\n  </div>\n</li>\n`;\n\nexports[`Tab renders correctly > with empty props 1`] = `\n<li\n  aria-disabled={false}\n  aria-selected={false}\n  className=\"tabWrapper\"\n  data-testid=\"tab\"\n  data-vibe=\"Tab\"\n  onClick={[Function]}\n  onKeyDown={[Function]}\n  role=\"tab\"\n>\n  <div\n    className=\"tabInner\"\n  />\n</li>\n`;\n\nexports[`Tab renders correctly > with icon on left 1`] = `\n<li\n  aria-disabled={false}\n  aria-selected={false}\n  className=\"tabWrapper\"\n  data-testid=\"tab\"\n  data-vibe=\"Tab\"\n  onClick={[Function]}\n  onKeyDown={[Function]}\n  role=\"tab\"\n>\n  <div\n    className=\"tabInner\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon tabIcon left noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"18\"\n      viewBox=\"0 0 20 20\"\n      width=\"18\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M3 4.25C2.58579 4.25 2.25 4.58579 2.25 5V15C2.25 15.4142 2.58579 15.75 3 15.75H17C17.4142 15.75 17.75 15.4142 17.75 15V5C17.75 4.58579 17.4142 4.25 17 4.25H3ZM3.75 6.71589V14.25H16.25V6.71591L11.802 10.1371C11.2854 10.5346 10.6518 10.75 10 10.75C9.3482 10.75 8.71468 10.5346 8.19805 10.1371L3.75 6.71589ZM15.0455 5.75H4.95456L9.1126 8.94818L9.11265 8.94821C9.36706 9.14393 9.67903 9.25004 10 9.25004C10.321 9.25004 10.633 9.14393 10.8874 8.94821L10.8874 8.94818L15.0455 5.75Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n    Tab\n  </div>\n</li>\n`;\n\nexports[`Tab renders correctly > with icon on right 1`] = `\n<li\n  aria-disabled={false}\n  aria-selected={false}\n  className=\"tabWrapper\"\n  data-testid=\"tab\"\n  data-vibe=\"Tab\"\n  onClick={[Function]}\n  onKeyDown={[Function]}\n  role=\"tab\"\n>\n  <div\n    className=\"tabInner\"\n  >\n    Tab\n    <svg\n      aria-hidden={true}\n      className=\"icon tabIcon right noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"18\"\n      viewBox=\"0 0 20 20\"\n      width=\"18\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M3 4.25C2.58579 4.25 2.25 4.58579 2.25 5V15C2.25 15.4142 2.58579 15.75 3 15.75H17C17.4142 15.75 17.75 15.4142 17.75 15V5C17.75 4.58579 17.4142 4.25 17 4.25H3ZM3.75 6.71589V14.25H16.25V6.71591L11.802 10.1371C11.2854 10.5346 10.6518 10.75 10 10.75C9.3482 10.75 8.71468 10.5346 8.19805 10.1371L3.75 6.71589ZM15.0455 5.75H4.95456L9.1126 8.94818L9.11265 8.94821C9.36706 9.14393 9.67903 9.25004 10 9.25004C10.321 9.25004 10.633 9.14393 10.8874 8.94821L10.8874 8.94818L15.0455 5.75Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  </div>\n</li>\n`;\n\nexports[`Tab renders correctly > with id 1`] = `\n<li\n  aria-disabled={false}\n  aria-selected={false}\n  className=\"tabWrapper\"\n  data-testid=\"tab_test\"\n  data-vibe=\"Tab\"\n  id=\"test\"\n  onClick={[Function]}\n  onKeyDown={[Function]}\n  role=\"tab\"\n>\n  <div\n    className=\"tabInner\"\n  >\n    Tab\n  </div>\n</li>\n`;\n\nexports[`Tab renders correctly > with value 1`] = `\n<li\n  aria-disabled={false}\n  aria-selected={false}\n  className=\"tabWrapper\"\n  data-testid=\"tab\"\n  data-vibe=\"Tab\"\n  onClick={[Function]}\n  onKeyDown={[Function]}\n  role=\"tab\"\n>\n  <div\n    className=\"tabInner\"\n  >\n    Tab\n  </div>\n</li>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Tabs/TabList/TabList.module.scss",
    "content": "@import \"../../../styles/typography\";\n\n.tabsWrapper .tabsList {\n  display: flex;\n  flex-direction: row;\n  list-style-type: none;\n  font-size: 0;\n  position: relative;\n  height: 40px;\n  outline: none;\n  padding: 0;\n}\n\n.tabsWrapper .tabsList.sm {\n  height: 32px;\n}\n\n.tabsWrapper .tabsList.lg {\n  height: 48px;\n}\n\n.tabsWrapper.stretched .tabsList {\n  width: 100%;\n}\n\n.tabsWrapper.stretched .tabsList .tabListTabWrapper {\n  width: 100%;\n}\n\n.tabsWrapper.stretched .tabsList .tabListTabWrapper .tabListTabInner {\n  width: 100%;\n}\n\n.tabsWrapper.disabled {\n  opacity: 0;\n  height: 0;\n  padding-bottom: 5px;\n  pointer-events: none;\n}\n\n.tabsWrapper.stretchedUnderline {\n  border-bottom: 2px solid var(--ui-background-color);\n}\n"
  },
  {
    "path": "packages/core/src/components/Tabs/TabList/TabList.tsx",
    "content": "import cx from \"classnames\";\nimport { camelCase } from \"es-toolkit\";\nimport React, {\n  type FC,\n  forwardRef,\n  type ReactElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from \"react\";\nimport useGridKeyboardNavigation from \"../../../hooks/useGridKeyboardNavigation/useGridKeyboardNavigation\";\nimport { useMergeRef, NOOP, getStyle } from \"@vibe/shared\";\nimport usePrevious from \"../../../hooks/usePrevious\";\nimport type VibeComponentProps from \"../../../types/VibeComponentProps\";\n\nimport { type TabProps } from \"../Tab/Tab\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\n\nimport styles from \"./TabList.module.scss\";\n\nexport interface TabListProps extends VibeComponentProps {\n  /**\n   * Callback fired when the active tab changes.\n   */\n  onTabChange?: (tabId: number) => void;\n  /**\n   * The index of the currently active tab.\n   */\n  activeTabId?: number;\n  /**\n   * The type of tab style.\n   */\n  tabType?: string;\n  /**\n   * The size of the tab list.\n   */\n  size?: string;\n  /**\n   * If true, Sets an E2E underline under the whole tabs component.\n   */\n  stretchedUnderline?: boolean;\n  /**\n   * Array of corresponding TabPanel ids for aria-controls relationship.\n   */\n  tabPanelIds?: string[];\n  /**\n   * The child elements representing tabs.\n   */\n  children?: ReactElement<TabProps>[];\n}\nconst TabList: FC<TabListProps> = forwardRef(\n  (\n    {\n      className,\n      id,\n      onTabChange = NOOP,\n      activeTabId = 0,\n      tabType = \"Compact\",\n      size,\n      stretchedUnderline = false,\n      tabPanelIds = [],\n      children,\n      \"data-testid\": dataTestId\n    },\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n    const tabRefs = useRef<Record<number, HTMLElement | null>>({});\n\n    const [activeTabState, setActiveTabState] = useState<number>(activeTabId);\n\n    const prevActiveTabIdProp = usePrevious(activeTabId);\n    const prevActiveTabState = usePrevious(activeTabState);\n\n    useEffect(() => {\n      // Update active tab if changed from props\n\n      if (activeTabId !== prevActiveTabIdProp && activeTabId !== activeTabState) {\n        setActiveTabState(activeTabId);\n      }\n    }, [activeTabId, prevActiveTabIdProp, activeTabState, setActiveTabState]);\n\n    // Focus management: when activeTabState changes, focus the active tab\n    useEffect(() => {\n      if (\n        prevActiveTabState !== undefined &&\n        prevActiveTabState !== activeTabState &&\n        tabRefs.current[activeTabState]\n      ) {\n        tabRefs.current[activeTabState]?.focus();\n      }\n    }, [activeTabState, prevActiveTabState]);\n\n    const disabledTabIds = useMemo(() => {\n      const disabledIds = new Set<number>();\n      React.Children.forEach(children, (child, index) => {\n        if (child.props.disabled) {\n          disabledIds.add(index);\n        }\n      });\n      return disabledIds;\n    }, [children]);\n    const onTabSelect = useCallback(\n      (tabId: number) => {\n        if (disabledTabIds.has(tabId)) return;\n        setActiveTabState(tabId);\n        onTabChange && onTabChange(tabId);\n      },\n      [onTabChange, disabledTabIds]\n    );\n    const onTabClick = useCallback(\n      (value: HTMLElement | void, tabId: number) => {\n        const tabCallbackFunc = children[tabId].props?.onClick;\n        if (disabledTabIds.has(tabId)) return;\n        if (tabCallbackFunc) tabCallbackFunc(tabId);\n        onTabSelect(tabId);\n      },\n      [children, disabledTabIds, onTabSelect]\n    );\n    const getItemByIndex = useCallback((index: number): ReactElement<TabProps> => children[index], [children]);\n    const disabledIndexes = useMemo(() => Array.from(disabledTabIds), [disabledTabIds]);\n    const ulRef = useRef();\n    const { activeIndex: focusIndex, onSelectionAction } = useGridKeyboardNavigation({\n      ref: ulRef,\n      numberOfItemsInLine: children?.length,\n      itemsCount: children?.length,\n      getItemByIndex,\n      onItemClicked: onTabClick,\n      disabledIndexes,\n      circularNavigation: true\n    });\n\n    // Focus management: when focusIndex changes during keyboard navigation, focus the focused tab\n    const prevFocusIndex = usePrevious(focusIndex);\n    useEffect(() => {\n      if (focusIndex !== undefined && focusIndex >= 0 && prevFocusIndex !== focusIndex && tabRefs.current[focusIndex]) {\n        tabRefs.current[focusIndex]?.focus();\n      }\n    }, [focusIndex, prevFocusIndex]);\n\n    const tabsToRender = useMemo(() => {\n      const childrenToRender = React.Children.map(children, (child, index) => {\n        const isActive = activeTabState === index;\n\n        const shouldBeFocusable = focusIndex !== undefined && focusIndex >= 0 ? focusIndex === index : isActive;\n\n        return React.cloneElement(child, {\n          value: index,\n          active: isActive,\n          focus: focusIndex === index,\n          onClick: onSelectionAction,\n          stretchedUnderline,\n          className: cx(styles.tabListTabWrapper, child.props.className),\n          tabInnerClassName: cx(styles.tabListTabInner, child.props.tabInnerClassName),\n          tabIndex: shouldBeFocusable ? 0 : -1,\n          \"aria-controls\": tabPanelIds[index],\n          ref: (element: HTMLElement | null) => {\n            tabRefs.current[index] = element;\n          }\n        } as Partial<TabProps> & { ref: React.Ref<HTMLElement>; tabInnerLabelId?: string });\n      });\n      return childrenToRender;\n    }, [children, activeTabState, focusIndex, onSelectionAction, stretchedUnderline, tabPanelIds, id]);\n\n    return (\n      <div\n        ref={mergedRef}\n        className={cx(styles.tabsWrapper, className, [getStyle(styles, camelCase(tabType))], {\n          [styles.stretchedUnderline]: stretchedUnderline\n        })}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TAB_LIST, id)}\n      >\n        <ul ref={ulRef} className={cx(styles.tabsList, [getStyle(styles, size)])} role=\"tablist\">\n          {tabsToRender}\n        </ul>\n      </div>\n    );\n  }\n);\nObject.assign(TabList, {\n  isTabList: true\n});\n\nexport default TabList;\n"
  },
  {
    "path": "packages/core/src/components/Tabs/TabList/__tests__/TabList.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport TabList from \"../TabList\";\nimport Tab from \"../../Tab/Tab\";\n\ndescribe(\"TabList renders correctly\", () => {\n  it(\"with children\", () => {\n    const tree = renderer\n      .create(\n        <TabList>\n          <Tab>First</Tab>\n        </TabList>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with className\", () => {\n    const tree = renderer\n      .create(\n        <TabList className=\"test\">\n          <Tab>First</Tab>\n        </TabList>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with id\", () => {\n    const tree = renderer\n      .create(\n        <TabList id=\"test\">\n          <Tab>First</Tab>\n        </TabList>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with activeTabId\", () => {\n    const tree = renderer\n      .create(\n        <TabList activeTabId={1}>\n          <Tab>First</Tab>\n          <Tab>Second</Tab>\n        </TabList>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with size\", () => {\n    const tree = renderer\n      .create(\n        <TabList size=\"lg\">\n          <Tab>First</Tab>\n          <Tab>Second</Tab>\n        </TabList>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with tabType\", () => {\n    const tree = renderer\n      .create(\n        <TabList tabType=\"stretched\">\n          <Tab>First</Tab>\n          <Tab>Second</Tab>\n        </TabList>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with stretchedUnderline\", () => {\n    const tree = renderer\n      .create(\n        <TabList stretchedUnderline>\n          <Tab>First</Tab>\n          <Tab>Second</Tab>\n        </TabList>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Tabs/TabList/__tests__/__snapshots__/TabList.snapshot.test.jsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`TabList renders correctly > with activeTabId 1`] = `\n<div\n  className=\"tabsWrapper compact\"\n  data-testid=\"tab-list\"\n>\n  <ul\n    className=\"tabsList\"\n    role=\"tablist\"\n  >\n    <li\n      aria-disabled={false}\n      aria-selected={false}\n      className=\"tabWrapper tabListTabWrapper\"\n      data-testid=\"tab\"\n      data-vibe=\"Tab\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      role=\"tab\"\n      tabIndex={-1}\n    >\n      <div\n        className=\"tabInner tabListTabInner\"\n      >\n        First\n      </div>\n    </li>\n    <li\n      aria-disabled={false}\n      aria-selected={true}\n      className=\"tabWrapper tabListTabWrapper active\"\n      data-testid=\"tab\"\n      data-vibe=\"Tab\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      role=\"tab\"\n      tabIndex={0}\n    >\n      <div\n        className=\"tabInner tabListTabInner\"\n      >\n        Second\n      </div>\n    </li>\n  </ul>\n</div>\n`;\n\nexports[`TabList renders correctly > with children 1`] = `\n<div\n  className=\"tabsWrapper compact\"\n  data-testid=\"tab-list\"\n>\n  <ul\n    className=\"tabsList\"\n    role=\"tablist\"\n  >\n    <li\n      aria-disabled={false}\n      aria-selected={true}\n      className=\"tabWrapper tabListTabWrapper active\"\n      data-testid=\"tab\"\n      data-vibe=\"Tab\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      role=\"tab\"\n      tabIndex={0}\n    >\n      <div\n        className=\"tabInner tabListTabInner\"\n      >\n        First\n      </div>\n    </li>\n  </ul>\n</div>\n`;\n\nexports[`TabList renders correctly > with className 1`] = `\n<div\n  className=\"tabsWrapper test compact\"\n  data-testid=\"tab-list\"\n>\n  <ul\n    className=\"tabsList\"\n    role=\"tablist\"\n  >\n    <li\n      aria-disabled={false}\n      aria-selected={true}\n      className=\"tabWrapper tabListTabWrapper active\"\n      data-testid=\"tab\"\n      data-vibe=\"Tab\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      role=\"tab\"\n      tabIndex={0}\n    >\n      <div\n        className=\"tabInner tabListTabInner\"\n      >\n        First\n      </div>\n    </li>\n  </ul>\n</div>\n`;\n\nexports[`TabList renders correctly > with id 1`] = `\n<div\n  className=\"tabsWrapper compact\"\n  data-testid=\"tab-list_test\"\n  id=\"test\"\n>\n  <ul\n    className=\"tabsList\"\n    role=\"tablist\"\n  >\n    <li\n      aria-disabled={false}\n      aria-selected={true}\n      className=\"tabWrapper tabListTabWrapper active\"\n      data-testid=\"tab\"\n      data-vibe=\"Tab\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      role=\"tab\"\n      tabIndex={0}\n    >\n      <div\n        className=\"tabInner tabListTabInner\"\n      >\n        First\n      </div>\n    </li>\n  </ul>\n</div>\n`;\n\nexports[`TabList renders correctly > with size 1`] = `\n<div\n  className=\"tabsWrapper compact\"\n  data-testid=\"tab-list\"\n>\n  <ul\n    className=\"tabsList lg\"\n    role=\"tablist\"\n  >\n    <li\n      aria-disabled={false}\n      aria-selected={true}\n      className=\"tabWrapper tabListTabWrapper active\"\n      data-testid=\"tab\"\n      data-vibe=\"Tab\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      role=\"tab\"\n      tabIndex={0}\n    >\n      <div\n        className=\"tabInner tabListTabInner\"\n      >\n        First\n      </div>\n    </li>\n    <li\n      aria-disabled={false}\n      aria-selected={false}\n      className=\"tabWrapper tabListTabWrapper\"\n      data-testid=\"tab\"\n      data-vibe=\"Tab\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      role=\"tab\"\n      tabIndex={-1}\n    >\n      <div\n        className=\"tabInner tabListTabInner\"\n      >\n        Second\n      </div>\n    </li>\n  </ul>\n</div>\n`;\n\nexports[`TabList renders correctly > with stretchedUnderline 1`] = `\n<div\n  className=\"tabsWrapper compact stretchedUnderline\"\n  data-testid=\"tab-list\"\n>\n  <ul\n    className=\"tabsList\"\n    role=\"tablist\"\n  >\n    <li\n      aria-disabled={false}\n      aria-selected={true}\n      className=\"tabWrapper tabListTabWrapper active stretchedUnderline\"\n      data-testid=\"tab\"\n      data-vibe=\"Tab\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      role=\"tab\"\n      tabIndex={0}\n    >\n      <div\n        className=\"tabInner tabListTabInner\"\n      >\n        First\n      </div>\n    </li>\n    <li\n      aria-disabled={false}\n      aria-selected={false}\n      className=\"tabWrapper tabListTabWrapper stretchedUnderline\"\n      data-testid=\"tab\"\n      data-vibe=\"Tab\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      role=\"tab\"\n      tabIndex={-1}\n    >\n      <div\n        className=\"tabInner tabListTabInner\"\n      >\n        Second\n      </div>\n    </li>\n  </ul>\n</div>\n`;\n\nexports[`TabList renders correctly > with tabType 1`] = `\n<div\n  className=\"tabsWrapper stretched\"\n  data-testid=\"tab-list\"\n>\n  <ul\n    className=\"tabsList\"\n    role=\"tablist\"\n  >\n    <li\n      aria-disabled={false}\n      aria-selected={true}\n      className=\"tabWrapper tabListTabWrapper active\"\n      data-testid=\"tab\"\n      data-vibe=\"Tab\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      role=\"tab\"\n      tabIndex={0}\n    >\n      <div\n        className=\"tabInner tabListTabInner\"\n      >\n        First\n      </div>\n    </li>\n    <li\n      aria-disabled={false}\n      aria-selected={false}\n      className=\"tabWrapper tabListTabWrapper\"\n      data-testid=\"tab\"\n      data-vibe=\"Tab\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      role=\"tab\"\n      tabIndex={-1}\n    >\n      <div\n        className=\"tabInner tabListTabInner\"\n      >\n        Second\n      </div>\n    </li>\n  </ul>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Tabs/TabList/__tests__/__snapshots__/TabList.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`TabList renders correctly > with activeTabId 1`] = `\n<div\n  className=\"tabsWrapper compact\"\n  data-testid=\"tab-list\"\n>\n  <ul\n    className=\"tabsList\"\n    role=\"tablist\"\n  >\n    <li\n      aria-disabled={false}\n      aria-selected={false}\n      className=\"tabWrapper tabListTabWrapper\"\n      data-testid=\"tab\"\n      data-vibe=\"Tab\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      role=\"tab\"\n      tabIndex={-1}\n    >\n      <div\n        className=\"tabInner tabListTabInner\"\n      >\n        First\n      </div>\n    </li>\n    <li\n      aria-disabled={false}\n      aria-selected={true}\n      className=\"tabWrapper tabListTabWrapper active\"\n      data-testid=\"tab\"\n      data-vibe=\"Tab\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      role=\"tab\"\n      tabIndex={0}\n    >\n      <div\n        className=\"tabInner tabListTabInner\"\n      >\n        Second\n      </div>\n    </li>\n  </ul>\n</div>\n`;\n\nexports[`TabList renders correctly > with children 1`] = `\n<div\n  className=\"tabsWrapper compact\"\n  data-testid=\"tab-list\"\n>\n  <ul\n    className=\"tabsList\"\n    role=\"tablist\"\n  >\n    <li\n      aria-disabled={false}\n      aria-selected={true}\n      className=\"tabWrapper tabListTabWrapper active\"\n      data-testid=\"tab\"\n      data-vibe=\"Tab\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      role=\"tab\"\n      tabIndex={0}\n    >\n      <div\n        className=\"tabInner tabListTabInner\"\n      >\n        First\n      </div>\n    </li>\n  </ul>\n</div>\n`;\n\nexports[`TabList renders correctly > with className 1`] = `\n<div\n  className=\"tabsWrapper test compact\"\n  data-testid=\"tab-list\"\n>\n  <ul\n    className=\"tabsList\"\n    role=\"tablist\"\n  >\n    <li\n      aria-disabled={false}\n      aria-selected={true}\n      className=\"tabWrapper tabListTabWrapper active\"\n      data-testid=\"tab\"\n      data-vibe=\"Tab\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      role=\"tab\"\n      tabIndex={0}\n    >\n      <div\n        className=\"tabInner tabListTabInner\"\n      >\n        First\n      </div>\n    </li>\n  </ul>\n</div>\n`;\n\nexports[`TabList renders correctly > with id 1`] = `\n<div\n  className=\"tabsWrapper compact\"\n  data-testid=\"tab-list_test\"\n  id=\"test\"\n>\n  <ul\n    className=\"tabsList\"\n    role=\"tablist\"\n  >\n    <li\n      aria-disabled={false}\n      aria-selected={true}\n      className=\"tabWrapper tabListTabWrapper active\"\n      data-testid=\"tab\"\n      data-vibe=\"Tab\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      role=\"tab\"\n      tabIndex={0}\n    >\n      <div\n        className=\"tabInner tabListTabInner\"\n      >\n        First\n      </div>\n    </li>\n  </ul>\n</div>\n`;\n\nexports[`TabList renders correctly > with size 1`] = `\n<div\n  className=\"tabsWrapper compact\"\n  data-testid=\"tab-list\"\n>\n  <ul\n    className=\"tabsList lg\"\n    role=\"tablist\"\n  >\n    <li\n      aria-disabled={false}\n      aria-selected={true}\n      className=\"tabWrapper tabListTabWrapper active\"\n      data-testid=\"tab\"\n      data-vibe=\"Tab\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      role=\"tab\"\n      tabIndex={0}\n    >\n      <div\n        className=\"tabInner tabListTabInner\"\n      >\n        First\n      </div>\n    </li>\n    <li\n      aria-disabled={false}\n      aria-selected={false}\n      className=\"tabWrapper tabListTabWrapper\"\n      data-testid=\"tab\"\n      data-vibe=\"Tab\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      role=\"tab\"\n      tabIndex={-1}\n    >\n      <div\n        className=\"tabInner tabListTabInner\"\n      >\n        Second\n      </div>\n    </li>\n  </ul>\n</div>\n`;\n\nexports[`TabList renders correctly > with stretchedUnderline 1`] = `\n<div\n  className=\"tabsWrapper compact stretchedUnderline\"\n  data-testid=\"tab-list\"\n>\n  <ul\n    className=\"tabsList\"\n    role=\"tablist\"\n  >\n    <li\n      aria-disabled={false}\n      aria-selected={true}\n      className=\"tabWrapper tabListTabWrapper active stretchedUnderline\"\n      data-testid=\"tab\"\n      data-vibe=\"Tab\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      role=\"tab\"\n      tabIndex={0}\n    >\n      <div\n        className=\"tabInner tabListTabInner\"\n      >\n        First\n      </div>\n    </li>\n    <li\n      aria-disabled={false}\n      aria-selected={false}\n      className=\"tabWrapper tabListTabWrapper stretchedUnderline\"\n      data-testid=\"tab\"\n      data-vibe=\"Tab\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      role=\"tab\"\n      tabIndex={-1}\n    >\n      <div\n        className=\"tabInner tabListTabInner\"\n      >\n        Second\n      </div>\n    </li>\n  </ul>\n</div>\n`;\n\nexports[`TabList renders correctly > with tabType 1`] = `\n<div\n  className=\"tabsWrapper stretched\"\n  data-testid=\"tab-list\"\n>\n  <ul\n    className=\"tabsList\"\n    role=\"tablist\"\n  >\n    <li\n      aria-disabled={false}\n      aria-selected={true}\n      className=\"tabWrapper tabListTabWrapper active\"\n      data-testid=\"tab\"\n      data-vibe=\"Tab\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      role=\"tab\"\n      tabIndex={0}\n    >\n      <div\n        className=\"tabInner tabListTabInner\"\n      >\n        First\n      </div>\n    </li>\n    <li\n      aria-disabled={false}\n      aria-selected={false}\n      className=\"tabWrapper tabListTabWrapper\"\n      data-testid=\"tab\"\n      data-vibe=\"Tab\"\n      onClick={[Function]}\n      onKeyDown={[Function]}\n      role=\"tab\"\n      tabIndex={-1}\n    >\n      <div\n        className=\"tabInner tabListTabInner\"\n      >\n        Second\n      </div>\n    </li>\n  </ul>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Tabs/TabPanel/TabPanel.module.scss",
    "content": ".tabPanelWrapper {\n  color: var(--primary-text-color);\n}\n"
  },
  {
    "path": "packages/core/src/components/Tabs/TabPanel/TabPanel.tsx",
    "content": "import React, { type FC, forwardRef, type ReactElement, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport type VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport styles from \"./TabPanel.module.scss\";\n\nexport interface TabPanelProps extends VibeComponentProps {\n  /**\n   * The content inside the tab panel.\n   */\n  children?: ReactElement | ReactElement[] | string;\n  /**\n   * The index of the tab panel.\n   */\n  index?: number;\n}\n\nconst TabPanel: FC<TabPanelProps> = forwardRef(({ className, id, children, index, \"data-testid\": dataTestId }, ref) => {\n  const componentRef = useRef(null);\n  const mergedRef = useMergeRef(ref, componentRef);\n\n  return (\n    <div\n      key={`${id}_${index}`}\n      ref={mergedRef}\n      className={cx(styles.tabPanelWrapper, className)}\n      id={id}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.TAB_PANEL, id)}\n      role=\"tabpanel\"\n    >\n      {children}\n    </div>\n  );\n});\n\nexport default TabPanel;\n"
  },
  {
    "path": "packages/core/src/components/Tabs/TabPanel/__tests__/TabPanel.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport TabPanels from \"../../TabPanels/TabPanels\";\nimport TabPanel from \"../TabPanel\";\n\ndescribe(\"TabPanel renders correctly\", () => {\n  it(\"with empty props\", () => {\n    const tree = renderer\n      .create(\n        <TabPanels>\n          <TabPanel>First</TabPanel>\n        </TabPanels>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with className\", () => {\n    const tree = renderer\n      .create(\n        <TabPanels>\n          <TabPanel className=\"test\">First</TabPanel>\n        </TabPanels>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with id\", () => {\n    const tree = renderer\n      .create(\n        <TabPanels>\n          <TabPanel id=\"test\">First</TabPanel>\n        </TabPanels>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Tabs/TabPanel/__tests__/__snapshots__/TabPanel.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`TabPanel renders correctly > with className 1`] = `\n<div\n  className=\"tabPanelsWrapper\"\n  data-testid=\"tab-panels\"\n>\n  <div\n    className=\"tabPanelWrapper tabPanel active animationDirectionRtl test\"\n    data-testid=\"tab-panel\"\n    role=\"tabpanel\"\n  >\n    First\n  </div>\n</div>\n`;\n\nexports[`TabPanel renders correctly > with empty props 1`] = `\n<div\n  className=\"tabPanelsWrapper\"\n  data-testid=\"tab-panels\"\n>\n  <div\n    className=\"tabPanelWrapper tabPanel active animationDirectionRtl\"\n    data-testid=\"tab-panel\"\n    role=\"tabpanel\"\n  >\n    First\n  </div>\n</div>\n`;\n\nexports[`TabPanel renders correctly > with id 1`] = `\n<div\n  className=\"tabPanelsWrapper\"\n  data-testid=\"tab-panels\"\n>\n  <div\n    className=\"tabPanelWrapper tabPanel active animationDirectionRtl\"\n    data-testid=\"tab-panel_test\"\n    id=\"test\"\n    role=\"tabpanel\"\n  >\n    First\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Tabs/TabPanels/TabPanels.module.scss",
    "content": "@import \"../../../styles/typography\";\n\n.tabPanelsWrapper .tabPanel {\n  display: none;\n}\n\n.tabPanelsWrapper .tabPanel.animationDirectionRtl {\n  transform: translateX(8px);\n}\n\n.tabPanelsWrapper .tabPanel.animationDirectionLtr {\n  transform: translateX(-8px);\n}\n\n.tabPanelsWrapper .tabPanel.active {\n  display: block;\n  animation: panelSlideIn var(--motion-productive-long) forwards var(--motion-timing-enter);\n}\n\n@keyframes panelSlideIn {\n  100% {\n    transform: translateX(0%);\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Tabs/TabPanels/TabPanels.tsx",
    "content": "import cx from \"classnames\";\nimport { camelCase } from \"es-toolkit\";\nimport React, { forwardRef, type ReactElement, useMemo, useRef } from \"react\";\nimport { useMergeRef, getStyle } from \"@vibe/shared\";\nimport { type TabPanelsAnimationDirection } from \"./TabPanels.types\";\nimport { type TabPanelProps } from \"../TabPanel/TabPanel\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\n\nimport { type VibeComponentProps } from \"../../../types\";\nimport styles from \"./TabPanels.module.scss\";\n\nexport interface TabPanelsProps extends VibeComponentProps {\n  /**\n   * The index of the currently active tab panel.\n   */\n  activeTabId?: number;\n  /**\n   * The animation direction when switching between tab panels.\n   */\n  animationDirection?: TabPanelsAnimationDirection;\n  /**\n   * The child elements representing tab panels.\n   */\n  children?: ReactElement<TabPanelProps> | ReactElement<TabPanelProps>[];\n}\n\nconst TabPanels = forwardRef(\n  (\n    { className, id, activeTabId = 0, animationDirection = \"rtl\", children, \"data-testid\": dataTestId }: TabPanelsProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n    const renderedTabs = useMemo(() => {\n      return React.Children.map(children, (child, index) => {\n        const isActiveTab = activeTabId === index;\n        if (!isActiveTab) return null;\n        const activeClass = isActiveTab ? \"active\" : \"non-active\";\n        const animationClass = isActiveTab ? `animation-direction-${animationDirection}` : \"\";\n        return React.cloneElement(child, {\n          index,\n          ...child.props,\n          className: cx(\n            styles.tabPanel,\n            [getStyle(styles, activeClass)],\n            [getStyle(styles, camelCase(animationClass))],\n            child.props.className\n          )\n        });\n      }).filter(Boolean);\n    }, [children, activeTabId, animationDirection]);\n\n    return (\n      <div\n        ref={mergedRef}\n        className={cx(styles.tabPanelsWrapper, className)}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TAB_PANELS, id)}\n      >\n        {renderedTabs}\n      </div>\n    );\n  }\n);\n\nObject.assign(TabPanels, {\n  isTabPanels: true\n});\n\nexport default TabPanels;\n"
  },
  {
    "path": "packages/core/src/components/Tabs/TabPanels/TabPanels.types.ts",
    "content": "export type TabPanelsAnimationDirection = \"rtl\" | \"ltr\";\n"
  },
  {
    "path": "packages/core/src/components/Tabs/TabPanels/__tests__/TabPanels.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport TabPanels from \"../TabPanels\";\nimport TabPanel from \"../../TabPanel/TabPanel\";\n\ndescribe(\"TabPanels renders correctly\", () => {\n  it(\"with empty props\", () => {\n    const tree = renderer\n      .create(\n        <TabPanels>\n          <TabPanel className=\"first\">First</TabPanel>\n          <TabPanel>Second</TabPanel>\n          <TabPanel>Third</TabPanel>\n        </TabPanels>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with the given active tab panel\", () => {\n    const tree = renderer\n      .create(\n        <TabPanels activeTabId={1}>\n          <TabPanel>First</TabPanel>\n          <TabPanel>Second</TabPanel>\n          <TabPanel>Third</TabPanel>\n        </TabPanels>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with animation from left to right\", () => {\n    const tree = renderer\n      .create(\n        <TabPanels animationDirection=\"ltr\">\n          <TabPanel>First</TabPanel>\n          <TabPanel>Second</TabPanel>\n          <TabPanel>Third</TabPanel>\n        </TabPanels>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with animation from right to left\", () => {\n    const tree = renderer\n      .create(\n        <TabPanels animationDirection=\"rtl\">\n          <TabPanel>First</TabPanel>\n          <TabPanel>Second</TabPanel>\n          <TabPanel>Third</TabPanel>\n        </TabPanels>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Tabs/TabPanels/__tests__/__snapshots__/TabPanels.snapshot.test.jsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`TabPanels renders correctly > with animation from left to right 1`] = `\n<div\n  className=\"tabPanelsWrapper\"\n  data-testid=\"tab-panels\"\n>\n  <div\n    className=\"tabPanelWrapper tabPanel active animationDirectionLtr\"\n    data-testid=\"tab-panel\"\n    role=\"tabpanel\"\n  >\n    First\n  </div>\n</div>\n`;\n\nexports[`TabPanels renders correctly > with animation from right to left 1`] = `\n<div\n  className=\"tabPanelsWrapper\"\n  data-testid=\"tab-panels\"\n>\n  <div\n    className=\"tabPanelWrapper tabPanel active animationDirectionRtl\"\n    data-testid=\"tab-panel\"\n    role=\"tabpanel\"\n  >\n    First\n  </div>\n</div>\n`;\n\nexports[`TabPanels renders correctly > with empty props 1`] = `\n<div\n  className=\"tabPanelsWrapper\"\n  data-testid=\"tab-panels\"\n>\n  <div\n    className=\"tabPanelWrapper tabPanel active animationDirectionRtl first\"\n    data-testid=\"tab-panel\"\n    role=\"tabpanel\"\n  >\n    First\n  </div>\n</div>\n`;\n\nexports[`TabPanels renders correctly > with the given active tab panel 1`] = `\n<div\n  className=\"tabPanelsWrapper\"\n  data-testid=\"tab-panels\"\n>\n  <div\n    className=\"tabPanelWrapper tabPanel active animationDirectionRtl\"\n    data-testid=\"tab-panel\"\n    role=\"tabpanel\"\n  >\n    Second\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Tabs/TabPanels/__tests__/__snapshots__/TabPanels.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`TabPanels renders correctly > with animation from left to right 1`] = `\n<div\n  className=\"tabPanelsWrapper\"\n  data-testid=\"tab-panels\"\n>\n  <div\n    className=\"tabPanelWrapper tabPanel active animationDirectionLtr\"\n    data-testid=\"tab-panel\"\n    role=\"tabpanel\"\n  >\n    First\n  </div>\n</div>\n`;\n\nexports[`TabPanels renders correctly > with animation from right to left 1`] = `\n<div\n  className=\"tabPanelsWrapper\"\n  data-testid=\"tab-panels\"\n>\n  <div\n    className=\"tabPanelWrapper tabPanel active animationDirectionRtl\"\n    data-testid=\"tab-panel\"\n    role=\"tabpanel\"\n  >\n    First\n  </div>\n</div>\n`;\n\nexports[`TabPanels renders correctly > with empty props 1`] = `\n<div\n  className=\"tabPanelsWrapper\"\n  data-testid=\"tab-panels\"\n>\n  <div\n    className=\"tabPanelWrapper tabPanel active animationDirectionRtl first\"\n    data-testid=\"tab-panel\"\n    role=\"tabpanel\"\n  >\n    First\n  </div>\n</div>\n`;\n\nexports[`TabPanels renders correctly > with the given active tab panel 1`] = `\n<div\n  className=\"tabPanelsWrapper\"\n  data-testid=\"tab-panels\"\n>\n  <div\n    className=\"tabPanelWrapper tabPanel active animationDirectionRtl\"\n    data-testid=\"tab-panel\"\n    role=\"tabpanel\"\n  >\n    Second\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Tabs/TabsContext/TabsContext.tsx",
    "content": "import React, {\n  type FC,\n  forwardRef,\n  type ReactElement,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  useMemo\n} from \"react\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport usePrevious from \"../../../hooks/usePrevious\";\nimport type VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\n\nexport interface TabsContextProps extends VibeComponentProps {\n  /**\n   * The index of the currently active tab.\n   */\n  activeTabId?: number;\n  /**\n   * The child elements representing the tab list and tab panels.\n   */\n  children?: ReactElement | ReactElement[];\n}\n\ntype TabsChild = ReactElement & {\n  type: Record<string, unknown>;\n};\n\nconst TabsContext: FC<TabsContextProps> = forwardRef(\n  ({ className, id, activeTabId = 0, children, \"data-testid\": dataTestId }, ref) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const [previousActiveTabIdState, setPreviousActiveTabIdState] = useState(activeTabId);\n    const [activeTabIdState, setActiveTabIdState] = useState(activeTabId);\n    const prevActiveTabIdProp = usePrevious(activeTabId);\n\n    useEffect(() => {\n      // Update active tab if changed from props\n      if (activeTabId !== prevActiveTabIdProp && activeTabId !== activeTabIdState) {\n        setPreviousActiveTabIdState(activeTabIdState);\n        setActiveTabIdState(activeTabId);\n      }\n    }, [activeTabId, activeTabIdState, prevActiveTabIdProp]);\n\n    const onTabClick = useCallback(\n      (tabId: number) => {\n        setPreviousActiveTabIdState(activeTabIdState);\n        setActiveTabIdState(tabId);\n      },\n      [activeTabIdState]\n    );\n\n    // Collect TabPanel ids for aria-controls relationship\n    const tabPanelIds = useMemo(() => {\n      const ids: string[] = [];\n      React.Children.forEach(children, (child: TabsChild) => {\n        if (child.type.isTabPanels) {\n          React.Children.forEach(child.props.children, (panelChild: ReactElement, index: number) => {\n            ids[index] = panelChild.props.id;\n          });\n        }\n      });\n      return ids;\n    }, [children]);\n\n    return (\n      <div\n        ref={mergedRef}\n        className={className}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TABS_CONTEXT, id)}\n      >\n        {React.Children.map(children, (child: TabsChild) => {\n          if (child.type.isTabList) {\n            const originalOnTabChange = child.props.onTabChange;\n            const onTabChange = (tabId: number) => {\n              onTabClick(tabId);\n              originalOnTabChange?.(tabId);\n            };\n            return React.cloneElement(child, { activeTabId: activeTabIdState, onTabChange, tabPanelIds });\n          }\n          if (child.type.isTabPanels) {\n            const animationDirection = previousActiveTabIdState < activeTabIdState ? \"ltr\" : \"rtl\";\n            return React.cloneElement(child, { activeTabId: activeTabIdState, animationDirection });\n          }\n          return child;\n        })}\n      </div>\n    );\n  }\n);\n\nexport default TabsContext;\n"
  },
  {
    "path": "packages/core/src/components/Tabs/TabsContext/__tests__/TabsContext.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport TabsContext from \"../TabsContext\";\nimport TabPanel from \"../../TabPanel/TabPanel\";\nimport TabPanels from \"../../TabPanels/TabPanels\";\nimport Tab from \"../../Tab/Tab\";\nimport TabList from \"../../TabList/TabList\";\n\ndescribe(\"TabsContext renders correctly\", () => {\n  it(\"with empty props\", () => {\n    const tree = renderer\n      .create(\n        <TabsContext>\n          <TabList>\n            <Tab>First</Tab>\n          </TabList>\n          <TabPanels>\n            <TabPanel>First slide</TabPanel>\n          </TabPanels>\n        </TabsContext>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with className\", () => {\n    const tree = renderer\n      .create(\n        <TabsContext className=\"test\">\n          <TabList>\n            <Tab>First</Tab>\n          </TabList>\n          <TabPanels>\n            <TabPanel>First slide</TabPanel>\n          </TabPanels>\n        </TabsContext>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with id\", () => {\n    const tree = renderer\n      .create(\n        <TabsContext id=\"test\">\n          <TabList>\n            <Tab>First</Tab>\n          </TabList>\n          <TabPanels>\n            <TabPanel>First slide</TabPanel>\n          </TabPanels>\n        </TabsContext>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with activeTabId\", () => {\n    const tree = renderer\n      .create(\n        <TabsContext activeTabId={1}>\n          <TabList>\n            <Tab>First</Tab>\n            <Tab>Second</Tab>\n          </TabList>\n          <TabPanels>\n            <TabPanel>First slide</TabPanel>\n            <TabPanel>Second slide</TabPanel>\n          </TabPanels>\n        </TabsContext>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Tabs/TabsContext/__tests__/__snapshots__/TabsContext.snapshot.test.jsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`TabsContext renders correctly > with activeTabId 1`] = `\n<div\n  data-testid=\"tabs-context\"\n>\n  <div\n    className=\"tabsWrapper compact\"\n    data-testid=\"tab-list\"\n  >\n    <ul\n      className=\"tabsList\"\n      role=\"tablist\"\n    >\n      <li\n        aria-disabled={false}\n        aria-selected={false}\n        className=\"tabWrapper tabListTabWrapper\"\n        data-testid=\"tab\"\n        data-vibe=\"Tab\"\n        onClick={[Function]}\n        onKeyDown={[Function]}\n        role=\"tab\"\n        tabIndex={-1}\n      >\n        <div\n          className=\"tabInner tabListTabInner\"\n        >\n          First\n        </div>\n      </li>\n      <li\n        aria-disabled={false}\n        aria-selected={true}\n        className=\"tabWrapper tabListTabWrapper active\"\n        data-testid=\"tab\"\n        data-vibe=\"Tab\"\n        onClick={[Function]}\n        onKeyDown={[Function]}\n        role=\"tab\"\n        tabIndex={0}\n      >\n        <div\n          className=\"tabInner tabListTabInner\"\n        >\n          Second\n        </div>\n      </li>\n    </ul>\n  </div>\n  <div\n    className=\"tabPanelsWrapper\"\n    data-testid=\"tab-panels\"\n  >\n    <div\n      className=\"tabPanelWrapper tabPanel active animationDirectionRtl\"\n      data-testid=\"tab-panel\"\n      role=\"tabpanel\"\n    >\n      Second slide\n    </div>\n  </div>\n</div>\n`;\n\nexports[`TabsContext renders correctly > with className 1`] = `\n<div\n  className=\"test\"\n  data-testid=\"tabs-context\"\n>\n  <div\n    className=\"tabsWrapper compact\"\n    data-testid=\"tab-list\"\n  >\n    <ul\n      className=\"tabsList\"\n      role=\"tablist\"\n    >\n      <li\n        aria-disabled={false}\n        aria-selected={true}\n        className=\"tabWrapper tabListTabWrapper active\"\n        data-testid=\"tab\"\n        data-vibe=\"Tab\"\n        onClick={[Function]}\n        onKeyDown={[Function]}\n        role=\"tab\"\n        tabIndex={0}\n      >\n        <div\n          className=\"tabInner tabListTabInner\"\n        >\n          First\n        </div>\n      </li>\n    </ul>\n  </div>\n  <div\n    className=\"tabPanelsWrapper\"\n    data-testid=\"tab-panels\"\n  >\n    <div\n      className=\"tabPanelWrapper tabPanel active animationDirectionRtl\"\n      data-testid=\"tab-panel\"\n      role=\"tabpanel\"\n    >\n      First slide\n    </div>\n  </div>\n</div>\n`;\n\nexports[`TabsContext renders correctly > with empty props 1`] = `\n<div\n  data-testid=\"tabs-context\"\n>\n  <div\n    className=\"tabsWrapper compact\"\n    data-testid=\"tab-list\"\n  >\n    <ul\n      className=\"tabsList\"\n      role=\"tablist\"\n    >\n      <li\n        aria-disabled={false}\n        aria-selected={true}\n        className=\"tabWrapper tabListTabWrapper active\"\n        data-testid=\"tab\"\n        data-vibe=\"Tab\"\n        onClick={[Function]}\n        onKeyDown={[Function]}\n        role=\"tab\"\n        tabIndex={0}\n      >\n        <div\n          className=\"tabInner tabListTabInner\"\n        >\n          First\n        </div>\n      </li>\n    </ul>\n  </div>\n  <div\n    className=\"tabPanelsWrapper\"\n    data-testid=\"tab-panels\"\n  >\n    <div\n      className=\"tabPanelWrapper tabPanel active animationDirectionRtl\"\n      data-testid=\"tab-panel\"\n      role=\"tabpanel\"\n    >\n      First slide\n    </div>\n  </div>\n</div>\n`;\n\nexports[`TabsContext renders correctly > with id 1`] = `\n<div\n  data-testid=\"tabs-context_test\"\n  id=\"test\"\n>\n  <div\n    className=\"tabsWrapper compact\"\n    data-testid=\"tab-list\"\n  >\n    <ul\n      className=\"tabsList\"\n      role=\"tablist\"\n    >\n      <li\n        aria-disabled={false}\n        aria-selected={true}\n        className=\"tabWrapper tabListTabWrapper active\"\n        data-testid=\"tab\"\n        data-vibe=\"Tab\"\n        onClick={[Function]}\n        onKeyDown={[Function]}\n        role=\"tab\"\n        tabIndex={0}\n      >\n        <div\n          className=\"tabInner tabListTabInner\"\n        >\n          First\n        </div>\n      </li>\n    </ul>\n  </div>\n  <div\n    className=\"tabPanelsWrapper\"\n    data-testid=\"tab-panels\"\n  >\n    <div\n      className=\"tabPanelWrapper tabPanel active animationDirectionRtl\"\n      data-testid=\"tab-panel\"\n      role=\"tabpanel\"\n    >\n      First slide\n    </div>\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Tabs/TabsContext/__tests__/__snapshots__/TabsContext.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`TabsContext renders correctly > with activeTabId 1`] = `\n<div\n  data-testid=\"tabs-context\"\n>\n  <div\n    className=\"tabsWrapper compact\"\n    data-testid=\"tab-list\"\n  >\n    <ul\n      className=\"tabsList\"\n      role=\"tablist\"\n    >\n      <li\n        aria-disabled={false}\n        aria-selected={false}\n        className=\"tabWrapper tabListTabWrapper\"\n        data-testid=\"tab\"\n        data-vibe=\"Tab\"\n        onClick={[Function]}\n        onKeyDown={[Function]}\n        role=\"tab\"\n        tabIndex={-1}\n      >\n        <div\n          className=\"tabInner tabListTabInner\"\n        >\n          First\n        </div>\n      </li>\n      <li\n        aria-disabled={false}\n        aria-selected={true}\n        className=\"tabWrapper tabListTabWrapper active\"\n        data-testid=\"tab\"\n        data-vibe=\"Tab\"\n        onClick={[Function]}\n        onKeyDown={[Function]}\n        role=\"tab\"\n        tabIndex={0}\n      >\n        <div\n          className=\"tabInner tabListTabInner\"\n        >\n          Second\n        </div>\n      </li>\n    </ul>\n  </div>\n  <div\n    className=\"tabPanelsWrapper\"\n    data-testid=\"tab-panels\"\n  >\n    <div\n      className=\"tabPanelWrapper tabPanel active animationDirectionRtl\"\n      data-testid=\"tab-panel\"\n      role=\"tabpanel\"\n    >\n      Second slide\n    </div>\n  </div>\n</div>\n`;\n\nexports[`TabsContext renders correctly > with className 1`] = `\n<div\n  className=\"test\"\n  data-testid=\"tabs-context\"\n>\n  <div\n    className=\"tabsWrapper compact\"\n    data-testid=\"tab-list\"\n  >\n    <ul\n      className=\"tabsList\"\n      role=\"tablist\"\n    >\n      <li\n        aria-disabled={false}\n        aria-selected={true}\n        className=\"tabWrapper tabListTabWrapper active\"\n        data-testid=\"tab\"\n        data-vibe=\"Tab\"\n        onClick={[Function]}\n        onKeyDown={[Function]}\n        role=\"tab\"\n        tabIndex={0}\n      >\n        <div\n          className=\"tabInner tabListTabInner\"\n        >\n          First\n        </div>\n      </li>\n    </ul>\n  </div>\n  <div\n    className=\"tabPanelsWrapper\"\n    data-testid=\"tab-panels\"\n  >\n    <div\n      className=\"tabPanelWrapper tabPanel active animationDirectionRtl\"\n      data-testid=\"tab-panel\"\n      role=\"tabpanel\"\n    >\n      First slide\n    </div>\n  </div>\n</div>\n`;\n\nexports[`TabsContext renders correctly > with empty props 1`] = `\n<div\n  data-testid=\"tabs-context\"\n>\n  <div\n    className=\"tabsWrapper compact\"\n    data-testid=\"tab-list\"\n  >\n    <ul\n      className=\"tabsList\"\n      role=\"tablist\"\n    >\n      <li\n        aria-disabled={false}\n        aria-selected={true}\n        className=\"tabWrapper tabListTabWrapper active\"\n        data-testid=\"tab\"\n        data-vibe=\"Tab\"\n        onClick={[Function]}\n        onKeyDown={[Function]}\n        role=\"tab\"\n        tabIndex={0}\n      >\n        <div\n          className=\"tabInner tabListTabInner\"\n        >\n          First\n        </div>\n      </li>\n    </ul>\n  </div>\n  <div\n    className=\"tabPanelsWrapper\"\n    data-testid=\"tab-panels\"\n  >\n    <div\n      className=\"tabPanelWrapper tabPanel active animationDirectionRtl\"\n      data-testid=\"tab-panel\"\n      role=\"tabpanel\"\n    >\n      First slide\n    </div>\n  </div>\n</div>\n`;\n\nexports[`TabsContext renders correctly > with id 1`] = `\n<div\n  data-testid=\"tabs-context_test\"\n  id=\"test\"\n>\n  <div\n    className=\"tabsWrapper compact\"\n    data-testid=\"tab-list\"\n  >\n    <ul\n      className=\"tabsList\"\n      role=\"tablist\"\n    >\n      <li\n        aria-disabled={false}\n        aria-selected={true}\n        className=\"tabWrapper tabListTabWrapper active\"\n        data-testid=\"tab\"\n        data-vibe=\"Tab\"\n        onClick={[Function]}\n        onKeyDown={[Function]}\n        role=\"tab\"\n        tabIndex={0}\n      >\n        <div\n          className=\"tabInner tabListTabInner\"\n        >\n          First\n        </div>\n      </li>\n    </ul>\n  </div>\n  <div\n    className=\"tabPanelsWrapper\"\n    data-testid=\"tab-panels\"\n  >\n    <div\n      className=\"tabPanelWrapper tabPanel active animationDirectionRtl\"\n      data-testid=\"tab-panel\"\n      role=\"tabpanel\"\n    >\n      First slide\n    </div>\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Tabs/index.ts",
    "content": "export { default as Tab, type TabProps } from \"./Tab/Tab\";\nexport { default as TabList, type TabListProps } from \"./TabList/TabList\";\nexport { default as TabPanel, type TabPanelProps } from \"./TabPanel/TabPanel\";\nexport { default as TabsContext, type TabsContextProps } from \"./TabsContext/TabsContext\";\nexport { default as TabPanels, type TabPanelsProps } from \"./TabPanels/TabPanels\";\n\nexport * from \"./TabPanels/TabPanels.types\";\n"
  },
  {
    "path": "packages/core/src/components/TextArea/TextArea.module.scss",
    "content": "@import \"../../styles/typography\";\n@import \"~@vibe/style/dist/mixins\";\n\n.textAreaWrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: var(--space-4);\n  @include smoothing-text;\n  @include vibe-text(text2, normal);\n\n  .label {\n    display: inline-flex;\n    gap: var(--space-4);\n    color: var(--primary-text-color);\n\n    &.required::after {\n      content: \"*\";\n      color: var(--color-error);\n    }\n  }\n\n  .subTextContainer {\n    color: var(--secondary-text-color);\n\n    .helpText {\n      display: flex;\n    }\n\n    .limitText {\n      margin-inline-start: auto;\n    }\n  }\n\n  .textArea {\n    resize: vertical;\n    border: 1px solid var(--ui-border-color);\n    border-radius: var(--border-radius-small);\n    padding: var(--space-8);\n    outline: none;\n    background-color: var(--secondary-background-color);\n    color: var(--primary-text-color);\n\n    &::placeholder {\n      color: var(--placeholder-color);\n      font-weight: 400;\n    }\n\n    &:hover {\n      border-color: var(--primary-text-color);\n    }\n\n    &:active,\n    &:focus,\n    &:focus-within {\n      border-color: var(--primary-color);\n    }\n\n    &.small {\n      @include vibe-text(text2, normal);\n    }\n\n    &.large {\n      padding: var(--space-12);\n      @include vibe-text(text1, normal);\n    }\n\n    &:not(.resize) {\n      resize: none;\n    }\n  }\n\n  &.success {\n    .textArea {\n      border-color: var(--color-success);\n    }\n\n    .helpText {\n      color: var(--color-success);\n    }\n  }\n\n  &.error {\n    .textArea {\n      border-color: var(--color-error);\n    }\n\n    .helpText,\n    .limitText {\n      color: var(--color-error);\n    }\n  }\n\n  &.disabled {\n    .textArea,\n    .textArea:hover {\n      color: var(--disabled-text-color);\n      background-color: var(--disabled-background-color);\n      border-color: transparent;\n      resize: none;\n\n      &::placeholder {\n        color: var(--disabled-text-color);\n      }\n    }\n\n    .helpText {\n      color: var(--disabled-text-color);\n    }\n  }\n\n  &.readOnly {\n    .textArea,\n    .textArea:hover {\n      background-color: var(--allgrey-background-color);\n      border-color: transparent;\n      resize: none;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/TextArea/TextArea.tsx",
    "content": "import React, { forwardRef, useCallback, useMemo, useState } from \"react\";\nimport cx from \"classnames\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport styles from \"./TextArea.module.scss\";\nimport { type TextAreaProps, type TextAreaSize } from \"./TextArea.types\";\nimport { Text } from \"@vibe/typography\";\nimport { Flex } from \"@vibe/layout\";\nimport { HiddenText } from \"../HiddenText\";\n\nconst DEFAULT_ROWS: Record<TextAreaSize, number> = {\n  small: 3,\n  large: 4\n};\n\nconst TextArea = forwardRef(\n  (\n    {\n      size = \"small\",\n      rows,\n      label,\n      helpText,\n      success,\n      error,\n      className,\n      \"data-testid\": dataTestId,\n      id,\n      disabled,\n      readOnly,\n      required,\n      maxLength,\n      allowExceedingMaxLength,\n      onChange,\n      value,\n      resize = true,\n      showCharCount = false,\n      ...rest\n    }: TextAreaProps,\n    ref: React.ForwardedRef<HTMLTextAreaElement>\n  ) => {\n    const numRows = rows || DEFAULT_ROWS[size];\n    const helpTextId = helpText && `${id}-help-text`;\n    const allowExceedingMaxLengthTextId = allowExceedingMaxLength && `${id}-allow-exceeding-max-length`;\n\n    const ariaDescribedby = useMemo(\n      () => [helpTextId, allowExceedingMaxLengthTextId].filter(id => !!id).join(\" \") || undefined,\n      [helpTextId, allowExceedingMaxLengthTextId]\n    );\n\n    const [characterCount, setCharacterCount] = useState(value?.length || 0);\n    const isErrorState = error || (typeof maxLength === \"number\" && characterCount > maxLength);\n\n    const handleOnChange = useCallback(\n      (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        setCharacterCount(event.target.value.length);\n        onChange?.(event);\n      },\n      [onChange]\n    );\n\n    return (\n      <div\n        className={cx(\n          styles.textAreaWrapper,\n          {\n            [styles.error]: isErrorState,\n            [styles.success]: success,\n            [styles.disabled]: disabled,\n            [styles.readOnly]: readOnly\n          },\n          className\n        )}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TEXT_AREA, id)}\n        data-vibe={ComponentVibeId.TEXT_AREA}\n      >\n        {label && (\n          <label className={cx(styles.label, { [styles.required]: required })} htmlFor={id}>\n            {label}\n          </label>\n        )}\n        <textarea\n          {...rest}\n          id={id}\n          maxLength={typeof maxLength === \"number\" && !allowExceedingMaxLength ? maxLength : undefined}\n          ref={ref}\n          value={value}\n          disabled={disabled}\n          readOnly={readOnly}\n          required={required}\n          rows={numRows}\n          className={cx(styles.textArea, [styles[size]], { [styles.resize]: resize })}\n          aria-invalid={isErrorState}\n          aria-describedby={ariaDescribedby}\n          onChange={handleOnChange}\n        />\n        {(showCharCount || helpText) && (\n          <Flex gap=\"xs\" justify=\"space-between\" className={cx(styles.subTextContainer)}>\n            {helpText && (\n              <Text className={cx(styles.helpText)} color=\"inherit\" id={helpTextId}>\n                {helpText}\n              </Text>\n            )}\n            {showCharCount && (\n              <>\n                <Text className={styles.limitText}>\n                  {characterCount}\n                  {typeof maxLength === \"number\" && `/${maxLength}`}\n                </Text>\n                <HiddenText id={allowExceedingMaxLengthTextId} text={`${characterCount} out of ${maxLength}`} />\n              </>\n            )}\n          </Flex>\n        )}\n      </div>\n    );\n  }\n);\n\nexport default TextArea;\n"
  },
  {
    "path": "packages/core/src/components/TextArea/TextArea.types.ts",
    "content": "import { type TextareaHTMLAttributes } from \"react\";\nimport { type VibeComponentProps } from \"../../types\";\n\nexport type TextAreaSize = \"small\" | \"large\";\ntype TextAreaNativeInputProps = Omit<\n  TextareaHTMLAttributes<HTMLTextAreaElement>,\n  \"role\" | \"aria-describedby\" | \"aria-invalid\"\n>;\n\nexport interface TextAreaProps extends TextAreaNativeInputProps, VibeComponentProps {\n  /**\n   * The current value of the textarea.\n   */\n  value?: string;\n  /**\n   * Determines the size of the textarea text as well as the default row count.\n   */\n  size?: TextAreaSize;\n  /**\n   * If true, applies success styling to the textarea.\n   */\n  success?: boolean;\n  /**\n   * If true, applies error styling to the textarea.\n   */\n  error?: boolean;\n  /**\n   * The label associated with the textarea.\n   */\n  label?: string;\n  /**\n   * Callback fired when the textarea value changes.\n   */\n  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n  /**\n   * Help text displayed below the textarea.\n   */\n  helpText?: string;\n  /**\n   * The accessibility label for the textarea.\n   */\n  \"aria-label\"?: React.AriaAttributes[\"aria-label\"];\n  /**\n   * If true, the textarea can be resized vertically.\n   */\n  resize?: boolean;\n  /**\n   * The placeholder text displayed when the textarea is empty.\n   */\n  placeholder?: string;\n  /**\n   * The maximum number of characters allowed.\n   */\n  maxLength?: number;\n  /**\n   * If true, allows the user to exceed the character limit set by `maxLength`.\n   */\n  allowExceedingMaxLength?: boolean;\n  /**\n   * If true, displays the character count below the textarea.\n   */\n  showCharCount?: boolean;\n  /**\n   * If true, disables the textarea.\n   */\n  disabled?: boolean;\n  /**\n   * If true, makes the textarea read-only.\n   */\n  readOnly?: boolean;\n}\n"
  },
  {
    "path": "packages/core/src/components/TextArea/__tests__/TextArea.test.tsx",
    "content": "import { vi, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { render, fireEvent, screen } from \"@testing-library/react\";\nimport TextArea from \"../TextArea\";\nimport { axe } from \"jest-axe\";\nimport userEvent from \"@testing-library/user-event\";\n\ndescribe(\"TextArea\", () => {\n  it(\"should render TextArea with default props\", () => {\n    render(<TextArea />);\n    expect(screen.getByRole(\"textbox\")).toBeInTheDocument();\n  });\n\n  it(\"should render TextArea with a label if provided\", () => {\n    const labelText = \"Example Label\";\n    render(<TextArea label={labelText} id=\"test-textarea\" />);\n    expect(screen.getByLabelText(labelText)).toBeInTheDocument();\n  });\n\n  it(\"should display help text when provided\", () => {\n    const helpText = \"This is some helpful information.\";\n    render(<TextArea helpText={helpText} id=\"help-text-textarea\" />);\n    expect(screen.getByText(helpText)).toBeInTheDocument();\n  });\n\n  it(\"should render TextArea with different sizes and adjust rows accordingly\", () => {\n    const { rerender } = render(<TextArea size=\"small\" id=\"small-textarea\" />);\n    expect(screen.getByRole(\"textbox\")).toHaveAttribute(\"rows\", \"3\");\n    rerender(<TextArea size=\"large\" id=\"large-textarea\" />);\n    expect(screen.getByRole(\"textbox\")).toHaveAttribute(\"rows\", \"4\");\n  });\n\n  it(\"should render TextArea with a custom rows count\", () => {\n    render(<TextArea size=\"small\" id=\"small-textarea\" rows={10} />);\n    expect(screen.getByRole(\"textbox\")).toHaveAttribute(\"rows\", \"10\");\n  });\n\n  it(\"should render TextArea as disabled\", () => {\n    render(<TextArea disabled />);\n    expect(screen.getByRole(\"textbox\")).toBeDisabled();\n  });\n\n  it(\"should render TextArea as readOnly\", () => {\n    render(<TextArea readOnly />);\n    expect(screen.getByRole(\"textbox\")).toHaveAttribute(\"readOnly\");\n  });\n\n  it(\"should show an error state\", () => {\n    render(<TextArea error id=\"error-textarea\" />);\n    expect(screen.getByRole(\"textbox\")).toHaveAttribute(\"aria-invalid\", \"true\");\n  });\n\n  it(\"should add required attribute when provided\", () => {\n    render(<TextArea required label=\"Required\" id=\"required-textarea\" />);\n    expect(screen.getByRole(\"textbox\")).toHaveAttribute(\"required\");\n  });\n\n  it(\"should handle value updates correctly\", () => {\n    const handleChange = vi.fn();\n    const { rerender } = render(<TextArea value=\"initial\" onChange={handleChange} />);\n    expect(screen.getByRole(\"textbox\")).toHaveValue(\"initial\");\n\n    fireEvent.change(screen.getByRole(\"textbox\"), { target: { value: \"updated\" } });\n    expect(handleChange).toHaveBeenCalledTimes(1);\n\n    rerender(<TextArea value=\"updated\" onChange={handleChange} />);\n    expect(screen.getByRole(\"textbox\")).toHaveValue(\"updated\");\n  });\n\n  it(\"should call onChange when typing in the TextArea\", () => {\n    const handleChange = vi.fn();\n    render(<TextArea onChange={handleChange} />);\n\n    const input = screen.getByRole(\"textbox\");\n    fireEvent.change(input, { target: { value: \"new text\" } });\n\n    expect(handleChange).toHaveBeenCalledTimes(1);\n  });\n\n  describe(\"TextArea accessibility\", () => {\n    it(\"TextArea should be accessible\", async () => {\n      const { container } = render(<TextArea label=\"Accessible TextArea\" id=\"text-area\" />);\n      const results = await axe(container);\n\n      expect(results).toHaveNoViolations();\n    });\n\n    it(\"should set aria-label attribute correctly\", () => {\n      const ariaLabel = \"Test Aria Label\";\n      render(<TextArea aria-label={ariaLabel} id=\"aria-textarea\" />);\n\n      const textarea = screen.getByRole(\"textbox\");\n      expect(textarea).toHaveAttribute(\"aria-label\", ariaLabel);\n    });\n\n    it(\"should set aria-describedby attribute to reference help text ID when help text is provided\", () => {\n      const helpText = \"This is some helpful information.\";\n      render(<TextArea helpText={helpText} id=\"help-text-textarea\" />);\n      const textarea = screen.getByRole(\"textbox\");\n\n      expect(textarea).toHaveAttribute(\"aria-describedby\", \"help-text-textarea-help-text\");\n    });\n  });\n\n  describe(\"TextArea character count and limit\", () => {\n    it(\"should not show limit when character limit is not provided\", () => {\n      render(<TextArea />);\n      expect(screen.queryByText(\"0/\")).not.toBeInTheDocument();\n    });\n\n    it(\"only shows character count with showCharCount and no MaxLength\", () => {\n      render(<TextArea showCharCount />);\n      expect(screen.queryByText(\"0\")).toBeInTheDocument();\n    });\n\n    it(\"should not show character count when only maxLength is provided\", () => {\n      render(<TextArea maxLength={5} />);\n      expect(screen.queryByText(\"0/5\")).not.toBeInTheDocument();\n    });\n\n    it(\"should prevent typing when character limit is reached\", () => {\n      const handleChange = vi.fn();\n      render(<TextArea showCharCount maxLength={5} allowExceedingMaxLength={false} onChange={handleChange} />);\n\n      const charCount = screen.getByText(\"0/5\");\n      expect(charCount).toBeInTheDocument();\n\n      const input = screen.getByRole(\"textbox\");\n      userEvent.type(input, \"12345a\");\n\n      expect(input).toHaveValue(\"12345\");\n      expect(charCount).toHaveTextContent(\"5/5\");\n      expect(handleChange).toHaveBeenCalledTimes(5);\n    });\n\n    it(\"should allow typing when limit is allowed to be exceeded\", () => {\n      render(<TextArea showCharCount maxLength={10} allowExceedingMaxLength={true} />);\n\n      const charCount = screen.getByText(\"0/10\");\n      expect(charCount).toBeInTheDocument();\n\n      const input = screen.getByRole(\"textbox\");\n      userEvent.type(input, \"12345678910\");\n\n      expect(input).toHaveValue(\"12345678910\");\n      expect(charCount).toHaveTextContent(\"11/10\");\n      expect(input).toHaveAttribute(\"aria-invalid\", \"true\");\n    });\n\n    it(\"should allow text removal when character limit is exceeded\", () => {\n      render(<TextArea showCharCount maxLength={5} allowExceedingMaxLength={false} />);\n\n      const input = screen.getByRole(\"textbox\");\n      userEvent.type(input, \"12345\");\n\n      // Attempt to add more characters (should be prevented)\n      userEvent.type(input, \"a\");\n      expect(input).toHaveValue(\"12345\");\n\n      // Remove a character (should be allowed)\n      userEvent.type(input, \"{backspace}\");\n      userEvent.type(input, \"4\");\n\n      expect(input).toHaveValue(\"12344\");\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/TextArea/index.ts",
    "content": "export { default as TextArea } from \"./TextArea\";\nexport * from \"./TextArea.types\";\n"
  },
  {
    "path": "packages/core/src/components/TextField/TextField.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n@import \"../../styles/typography\";\n\n.textField {\n  position: relative;\n  box-sizing: border-box;\n  @include font-input;\n  width: 100%;\n}\n\n.textField * {\n  box-sizing: border-box;\n}\n\n.textField .labelWrapper {\n  width: 100%;\n}\n\n.textField .subTextContainer {\n  display: flex;\n  @include smoothing-text;\n  padding-block: 1px;\n}\n\n.textField .subTextContainer .counter {\n  margin-inline-start: auto;\n}\n\n.textField.disabled .icon {\n  cursor: not-allowed;\n}\n\n.textField.disabled .inputWrapper {\n  cursor: not-allowed;\n}\n\n.textField.disabled .inputWrapper .input {\n  user-select: none;\n  border: none;\n  pointer-events: none;\n  background-color: var(--disabled-background-color);\n  cursor: not-allowed;\n}\n\n.textField.disabled .inputWrapper .input::placeholder {\n  color: var(--disabled-text-color);\n}\n\n.textField.disabled .inputWrapper .iconContainer.iconContainerHasIcon:hover {\n  background-color: transparent;\n}\n\n.textField .inputWrapper {\n  width: 100%;\n  position: relative;\n}\n\n.textField .inputWrapper .input {\n  width: 100%;\n  height: 100%;\n  outline: 0;\n  background-color: var(--secondary-background-color);\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  border-radius: var(--border-radius-small);\n  transition: border-color var(--motion-productive-medium) ease-in;\n  padding: var(--space-8) var(--space-4) var(--space-8) var(--space-12);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--primary-text-color);\n\n  &.readOnly {\n    background-color: var(--allgrey-background-color);\n    border: none;\n  }\n}\n\n.textField .inputWrapper .input.inputHover {\n  border-color: var(--primary-text-color);\n}\n\n.textField .inputWrapper .input:focus,\n.textField .inputWrapper .input:active,\n.textField .inputWrapper .input.inputActive {\n  border-color: var(--primary-color);\n}\n\n.textField .inputWrapper .input::placeholder {\n  color: var(--placeholder-color);\n  font-weight: 400;\n}\n\n.textField .inputWrapper .input.inputHasIcon {\n  padding: var(--space-8) var(--space-24) var(--space-8) var(--space-8);\n}\n\n.textField .inputWrapper .input.round {\n  border-radius: 50px;\n}\n\n.textField .inputWrapper .input.square {\n  border-radius: 0;\n}\n\n.textField .inputWrapper .input.onlyUnderline {\n  border-inline: none;\n  border-top: none;\n  padding: var(--space-8) var(--space-24) var(--space-8) var(--space-4);\n  border-radius: 0 !important;\n}\n\n.textField .inputWrapper .tooltipContainer {\n  position: absolute;\n  top: 50%;\n  inset-inline-end: 0;\n  width: 32px;\n  height: 20px;\n  transform: translateY(-50%);\n}\n\n.textField .inputWrapper.wrapperSizeMedium .tooltipContainer {\n  width: 40px;\n}\n\n.textField .inputWrapper.wrapperSizeLarge .tooltipContainer {\n  width: 46px;\n}\n\n.textField .inputWrapper .iconContainer {\n  position: absolute;\n  top: 50%;\n  inset-inline-end: 4px;\n  width: 24px;\n  height: 24px;\n  transform: translateY(-50%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: var(--border-radius-small);\n  opacity: 0;\n  pointer-events: none;\n  -webkit-appearance: none;\n}\n\n.textField .inputWrapper .iconContainer.iconContainerActive.iconContainerHasIcon.iconContainerClickable {\n  pointer-events: all;\n  cursor: pointer;\n}\n\n.textField .inputWrapper .iconContainer.iconContainerActive.iconContainerHasIcon:not(.iconContainerClickable) {\n  pointer-events: none;\n  cursor: default;\n}\n\n.textField .inputWrapper .iconContainer.iconContainerActive {\n  opacity: 1;\n}\n\n.textField .inputWrapper .iconContainer.iconContainerActive .icon {\n  opacity: 1;\n  pointer-events: all;\n  transform: rotate(0) scale(1);\n}\n\n.textField .inputWrapper .iconContainer.iconContainerHasIcon.iconContainerClickable:hover {\n  background-color: var(--primary-background-hover-color);\n}\n\n.textField .inputWrapper .iconContainer.iconContainerHasIcon.iconContainerClickable:active {\n  transform: translateY(-50%) scale(0.9);\n}\n\n.textField .inputWrapper .iconContainer .icon {\n  transform: rotate(90deg) scale(0.8);\n  color: var(--icon-color);\n  will-change: transform;\n  pointer-events: none;\n  transition: color var(--motion-productive-short) var(--motion-timing-enter),\n    transform var(--motion-productive-short) var(--motion-timing-enter);\n  font-size: 14px;\n  font-family: var(--font-family);\n}\n\n.textField .inputWrapper.inputErrorValidation:hover .input {\n  border-color: var(--negative-color);\n}\n\n.textField .inputWrapper.inputErrorValidation .input {\n  border-color: var(--negative-color);\n}\n\n.textField .inputWrapper.inputErrorValidation .input:focus,\n.textField .inputWrapper.inputErrorValidation .input:active {\n  border-color: var(--negative-color);\n}\n\n.textField .inputWrapper.inputErrorValidation .iconContainer .icon {\n  color: var(--negative-color);\n}\n\n.textField .inputWrapper.inputErrorValidation .iconContainer .icon:hover {\n  color: var(--negative-color);\n}\n\n.textField .inputWrapper.inputErrorValidation + .subTextContainer {\n  .subTextContainerStatus,\n  .counter {\n    color: var(--negative-color);\n  }\n}\n\n.textField .inputWrapper.inputSuccessValidation:hover .input {\n  border-color: var(--positive-color);\n}\n\n.textField .inputWrapper.inputSuccessValidation .input {\n  border-color: var(--positive-color);\n}\n\n.textField .inputWrapper.inputSuccessValidation .input:focus,\n.textField .inputWrapper.inputSuccessValidation .input:active {\n  border-color: var(--positive-color);\n}\n\n.textField .inputWrapper.inputSuccessValidation .iconContainer .icon {\n  color: var(--positive-color);\n}\n\n.textField .inputWrapper.inputSuccessValidation .iconContainer .icon:hover {\n  color: var(--positive-color);\n}\n\n.textField .inputWrapper.inputSuccessValidation + .subTextContainer .subTextContainerStatus {\n  color: var(--positive-color);\n}\n\n.textField .inputWrapper.wrapperSizeSmall {\n  height: 32px;\n}\n\n.textField .inputWrapper.wrapperSizeSmall .input {\n  padding-inline-start: var(--space-8);\n  @include vibe-text(text2, normal);\n  @include smoothing-text;\n}\n\n.textField .inputWrapper.inputWrapperSizeSmall .input.inputHasIcon.onlyUnderline {\n  padding-inline-start: var(--space-4);\n}\n\n.textField .inputWrapper.wrapperSizeMedium {\n  height: 40px;\n}\n\n.textField .inputWrapper.wrapperSizeMedium .input {\n  @include vibe-text(text1, normal);\n  @include smoothing-text;\n}\n\n.textField .inputWrapper.wrapperSizeMedium .input.inputHasIcon {\n  padding: var(--space-8) var(--space-32) var(--space-8) var(--space-12);\n}\n\n.textField .inputWrapper.wrapperSizeMedium .input.inputHasIcon.onlyUnderline {\n  padding-inline-start: 4px;\n}\n\n.textField .inputWrapper.wrapperSizeMedium .iconContainer {\n  pointer-events: none;\n  height: 32px;\n  width: 32px;\n  outline: none;\n}\n\n.textField .inputWrapper.wrapperSizeMedium .iconContainer:hover + .iconContainer + .input {\n  border-color: var(--primary-text-color);\n}\n\n.textField .inputWrapper.wrapperSizeLarge {\n  height: 48px;\n}\n\n.textField .inputWrapper.wrapperSizeLarge .input {\n  @include vibe-text(text1, normal);\n  @include smoothing-text;\n}\n\n.textField .inputWrapper.wrapperSizeLarge .input.inputHasIcon {\n  padding: var(--space-8) var(--space-32) var(--space-8) var(--space-12);\n}\n\n.textField .inputWrapper.wrapperSizeLarge .input.inputHasIcon.onlyUnderline {\n  padding-inline-start: var(--space-4);\n}\n\n.textField .inputWrapper.wrapperSizeLarge .iconContainer {\n  height: 40px;\n  width: 40px;\n}\n\n.textField .inputWrapper:hover .input {\n  border-color: var(--primary-text-color);\n}\n\n.textField .inputWrapper .loaderContainer {\n  position: absolute;\n  top: 50%;\n  inset-inline-end: 4px;\n  width: 24px;\n  height: 24px;\n  transform: translateY(-50%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.textField .inputWrapper .loaderContainer.loaderContainerHasIcon {\n  inset-inline-end: 32px;\n}\n\n.textField .inputWrapper .loaderContainer .loader {\n  width: 16px;\n  height: 16px;\n}\n\n.textField .inputWrapper .loaderContainer .loader .loaderSvg {\n  color: var(--secondary-text-color);\n}\n\n.textField .inputWrapper.wrapperSizeMedium .iconContainer .icon {\n  font-size: 16px;\n  font-family: var(--font-family);\n}\n\n.textField .inputWrapper.wrapperSizeLarge .iconContainer .icon {\n  font-size: 16px;\n  font-family: var(--font-family);\n}\n\n// TODO url is not resolving correctly in the rollup build + theming approach isn't the best, as the component ideally shoudn't know about the theme\n//input[type=\"date\"]::-webkit-calendar-picker-indicator,\n//input[type=\"datetime-local\"]::-webkit-calendar-picker-indicator {\n//  background: url(\"./assets/Calendar.svg\") no-repeat;\n//\n//  :global(.dark-app-theme) &,\n//  :global(.black-app-theme) &,\n//  :global(.hacker_theme-app-theme) & {\n//    background: url(\"./assets/CalendarInverted.svg\") no-repeat;\n//  }\n//}\n\n// Temp solution for displaying calendar icon in dark themes\ninput[type=\"date\"]::-webkit-calendar-picker-indicator,\ninput[type=\"datetime-local\"]::-webkit-calendar-picker-indicator {\n  :global(.dark-app-theme) &,\n  :global(.black-app-theme) &,\n  :global(.hacker_theme-app-theme) & {\n    filter: invert(1);\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/TextField/TextField.tsx",
    "content": "import cx from \"classnames\";\nimport React, { type ChangeEventHandler, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport useDebounceEvent from \"../../hooks/useDebounceEvent\";\nimport { Icon } from \"@vibe/icon\";\nimport { Loader } from \"@vibe/loader\";\nimport { Text } from \"@vibe/typography\";\nimport FieldLabel from \"../FieldLabel/FieldLabel\";\nimport { FEEDBACK_CLASSES, SIZE_MAPPER, TextFieldAriaLabel } from \"./TextFieldConstants\";\nimport { type TextFieldType, type TextFieldSize } from \"./TextField.types\";\nimport { useMergeRef, NOOP } from \"@vibe/shared\";\nimport { Clickable } from \"@vibe/clickable\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\n\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./TextField.module.scss\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { HiddenText } from \"../HiddenText\";\n\nexport interface TextFieldProps extends VibeComponentProps {\n  /**\n   * The placeholder text displayed when the input is empty.\n   */\n  placeholder?: string;\n  /**\n   * Configures the browser's autocomplete behavior.\n   */\n  autoComplete?: string;\n  /**\n   * The current value of the text field.\n   */\n  value?: string;\n  /**\n   * Callback fired when the text field value changes.\n   */\n  onChange?: (\n    value: string,\n    event: React.ChangeEvent<HTMLInputElement> | Pick<React.ChangeEvent<HTMLInputElement>, \"target\">\n  ) => void;\n  /**\n   * Callback fired when the text field loses focus.\n   */\n  onBlur?: (event: React.FocusEvent) => void;\n  /**\n   * Callback fired when the text field gains focus.\n   */\n  onFocus?: (event: React.FocusEvent) => void;\n  /**\n   * Callback fired when a key is pressed inside the text field.\n   */\n  onKeyDown?: (event: React.KeyboardEvent) => void;\n  /**\n   * Callback fired when the mouse wheel is used inside the text field.\n   */\n  onWheel?: (event: React.WheelEvent) => void;\n  /**\n   * The debounce rate for input value changes.\n   */\n  debounceRate?: number;\n  /**\n   * If true, the input is automatically focused on mount.\n   */\n  autoFocus?: boolean;\n  /**\n   * If true, disables the text field.\n   */\n  disabled?: boolean;\n  /**\n   * If true, makes the text field read-only.\n   */\n  readonly?: boolean;\n  /**\n   * A function to set a reference to the input element.\n   */\n  setRef?: (node: HTMLElement) => void;\n  /**\n   * The primary icon displayed inside the text field.\n   */\n  icon?: string | React.FunctionComponent | null;\n  /**\n   * The secondary icon displayed inside the text field.\n   */\n  secondaryIconName?: string | React.FunctionComponent | null;\n  /**\n   * The label displayed above the text field.\n   */\n  title?: string;\n  /**\n   * The size of the text field.\n   */\n  size?: TextFieldSize;\n  /**\n   * Validation state for the text field.\n   */\n  validation?: { status?: \"error\" | \"success\"; text?: string | React.ReactNode };\n  /**\n   * Class name applied to the text field wrapper.\n   */\n  wrapperClassName?: string;\n  /**\n   * Callback fired when the icon inside the text field is clicked.\n   */\n  onIconClick?: (icon: string | React.FunctionComponent | null) => void;\n  /**\n   * If true, clears the input when the icon is clicked.\n   */\n  clearOnIconClick?: boolean;\n  /**\n   * The icon displayed inside the label.\n   */\n  labelIconName?: string | React.FunctionComponent | null;\n  /**\n   * If true, displays the character count.\n   */\n  showCharCount?: boolean;\n  /**\n   * The ARIA label for the input field.\n   */\n  inputAriaLabel?: string;\n  /**\n   * The ID of the container where search results are displayed.\n   */\n  searchResultsContainerId?: string;\n  /**\n   * The ID of the currently active search result.\n   */\n  activeDescendant?: string;\n  /**\n   * Accessible label for the primary icon.\n   */\n  iconLabel?: string;\n  /**\n   * Accessible label for the secondary icon.\n   */\n  secondaryIconLabel?: string;\n  /**\n   * The type of the text field.\n   */\n  type?: TextFieldType;\n  /**\n   * The maximum number of characters allowed.\n   */\n  maxLength?: number;\n  /**\n   * If true, allows the user to exceed the character limit set by `maxLength`.\n   */\n  allowExceedingMaxLength?: boolean;\n  /**\n   * If true, trims whitespace from the input value.\n   */\n  trim?: boolean;\n  /**\n   * The ARIA role of the text field.\n   */\n  role?: string;\n  /**\n   * If true, marks the input as required.\n   */\n  required?: boolean;\n  /**\n   * The error message displayed when a required field is left empty.\n   */\n  requiredErrorText?: string;\n  /**\n   * If true, displays a loading indicator inside the text field.\n   */\n  loading?: boolean;\n  /**\n   * Test ID for the secondary icon.\n   */\n  secondaryDataTestId?: string;\n  /**\n   * The tab order of the input field.\n   */\n  tabIndex?: number;\n  /**\n   * The name attribute for the input field.\n   */\n  name?: string;\n  /**\n   * If true, renders only an underline style for the text field.\n   */\n  underline?: boolean;\n  /**\n   * If true, the component is controlled by an external state.\n   */\n  controlled?: boolean;\n  /**\n   * Tooltip content for the primary icon.\n   */\n  iconTooltipContent?: string;\n  /**\n   * Tooltip content for the secondary icon.\n   */\n  secondaryTooltipContent?: string;\n  /**\n   * The text direction of the input.\n   */\n  dir?: \"ltr\" | \"rtl\" | \"auto\";\n}\n\nconst TextField = forwardRef(\n  (\n    {\n      className = \"\",\n      placeholder = \"\",\n      autoComplete = \"off\",\n      value,\n      onChange = NOOP,\n      onBlur = NOOP,\n      onFocus = NOOP,\n      onKeyDown = NOOP,\n      onWheel = NOOP,\n      debounceRate = 0,\n      autoFocus = false,\n      disabled = false,\n      readonly = false,\n      setRef = NOOP,\n      icon: iconName,\n      secondaryIconName,\n      id = \"input\",\n      title = \"\",\n      size = \"small\",\n      validation = null,\n      wrapperClassName = \"\",\n      onIconClick = NOOP,\n      clearOnIconClick = false,\n      labelIconName,\n      showCharCount = false,\n      inputAriaLabel,\n      searchResultsContainerId = \"\",\n      activeDescendant = \"\",\n      iconLabel,\n      secondaryIconLabel,\n      type = \"text\",\n      maxLength = null,\n      allowExceedingMaxLength = false,\n      trim = false,\n      role = \"\",\n      required = false,\n      requiredErrorText = \"\",\n      loading = false,\n      \"data-testid\": dataTestId,\n      secondaryDataTestId,\n      tabIndex,\n      underline = false,\n      name,\n      controlled = false,\n      iconTooltipContent,\n      secondaryTooltipContent,\n      dir\n    }: TextFieldProps,\n    ref: React.ForwardedRef<unknown>\n  ) => {\n    const [isRequiredAndEmpty, setIsRequiredAndEmpty] = useState(false);\n\n    const inputRef = useRef(null);\n    const mergedRef = useMergeRef(ref, inputRef, setRef);\n\n    const onBlurCallback = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        if (required && !e.target.value) {\n          setIsRequiredAndEmpty(true);\n        }\n        onBlur(e);\n      },\n      [onBlur, required]\n    );\n\n    const onChangeCallback = useCallback(\n      (value: string, e?: React.ChangeEvent<HTMLInputElement>) => {\n        if (isRequiredAndEmpty && value) {\n          setIsRequiredAndEmpty(false);\n        }\n        const event = e || { target: inputRef.current };\n        onChange(value, event);\n      },\n      [onChange, isRequiredAndEmpty]\n    );\n\n    const {\n      inputValue: uncontrolledInput,\n      onEventChanged,\n      clearValue\n    } = useDebounceEvent({\n      delay: debounceRate,\n      onChange: onChangeCallback,\n      initialStateValue: value,\n      trim\n    });\n\n    const inputValue = useMemo(() => {\n      return controlled ? value : uncontrolledInput;\n    }, [controlled, value, uncontrolledInput]);\n\n    const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n      event => {\n        controlled ? onChangeCallback(event.target.value, event) : onEventChanged(event);\n      },\n      [controlled, onChangeCallback, onEventChanged]\n    );\n\n    const currentStateIconName = useMemo(() => {\n      if (secondaryIconName) {\n        return inputValue ? secondaryIconName : iconName;\n      }\n      return iconName;\n    }, [iconName, secondaryIconName, inputValue]);\n\n    const onIconClickCallback = useCallback(() => {\n      if (disabled) {\n        return;\n      }\n\n      if (clearOnIconClick) {\n        if (inputRef.current) {\n          inputRef.current.focus();\n        }\n        // Do it cause otherwise the value is not cleared in target object\n        inputRef.current.value = \"\";\n        controlled ? onChangeCallback(\"\") : clearValue();\n      }\n      onIconClick(currentStateIconName);\n    }, [disabled, clearOnIconClick, onIconClick, currentStateIconName, controlled, onChangeCallback, clearValue]);\n\n    const validationClass = useMemo(() => {\n      if (typeof maxLength === \"number\" && inputValue && inputValue.length > maxLength) {\n        return FEEDBACK_CLASSES.error;\n      }\n\n      if ((!validation || !validation.status) && !isRequiredAndEmpty) {\n        return \"\";\n      }\n      const status = isRequiredAndEmpty ? \"error\" : validation.status;\n      return FEEDBACK_CLASSES[status];\n    }, [maxLength, validation, isRequiredAndEmpty, inputValue]);\n\n    const hasIcon = iconName || secondaryIconName;\n    const shouldShowExtraText =\n      showCharCount || (validation && validation.text) || (isRequiredAndEmpty && requiredErrorText);\n    const isSecondary = secondaryIconName === currentStateIconName;\n    const isPrimary = iconName === currentStateIconName;\n    const shouldFocusOnPrimaryIcon =\n      (onIconClick !== NOOP || iconLabel || iconTooltipContent) && inputValue && iconName.length && isPrimary;\n    const shouldFocusOnSecondaryIcon = (secondaryIconName || secondaryTooltipContent) && isSecondary && !!inputValue;\n    const allowExceedingMaxLengthTextId = allowExceedingMaxLength ? `${id}-allow-exceeding-max-length-text` : undefined;\n\n    useEffect(() => {\n      if (!inputRef?.current || !autoFocus) {\n        return;\n      }\n\n      const animationFrame = requestAnimationFrame(() => inputRef.current.focus());\n      return () => cancelAnimationFrame(animationFrame);\n    }, [inputRef, autoFocus]);\n\n    const isIconContainerClickable = onIconClick !== NOOP || clearOnIconClick;\n\n    const primaryIconAriaLabel = iconLabel || iconTooltipContent;\n    const secondaryIconAriaLabel = secondaryIconLabel || secondaryTooltipContent;\n\n    return (\n      <div\n        className={cx(styles.textField, wrapperClassName, {\n          [styles.disabled]: disabled,\n          [styles.onlyUnderline]: underline\n        })}\n        role={role}\n        aria-busy={loading}\n      >\n        <div className={cx(styles.labelWrapper)}>\n          <FieldLabel labelText={title} icon={labelIconName} labelFor={id} required={required} />\n          <div className={cx(styles.inputWrapper, SIZE_MAPPER[size], validationClass)}>\n            {/*Programatical input (tabIndex={-1}) is working fine with aria-activedescendant attribute despite the rule*/}\n            {/*eslint-disable-next-line jsx-a11y/aria-activedescendant-has-tabindex*/}\n            <input\n              className={cx(className, styles.input, {\n                [styles.inputHasIcon]: !!hasIcon,\n                [styles.readOnly]: readonly\n              })}\n              placeholder={placeholder}\n              autoComplete={autoComplete}\n              value={inputValue}\n              onChange={handleChange}\n              disabled={disabled}\n              readOnly={readonly}\n              ref={mergedRef}\n              type={type}\n              id={id}\n              data-testid={dataTestId || getTestId(ComponentDefaultTestId.TEXT_FIELD, id)}\n              data-vibe={ComponentVibeId.TEXT_FIELD}\n              name={name}\n              onBlur={onBlurCallback}\n              onFocus={onFocus}\n              onKeyDown={onKeyDown}\n              onWheel={onWheel}\n              maxLength={typeof maxLength === \"number\" && !allowExceedingMaxLength ? maxLength : undefined}\n              role={searchResultsContainerId && \"combobox\"} // For voice reader\n              aria-label={inputAriaLabel || placeholder}\n              aria-invalid={(validation && validation.status === \"error\") || isRequiredAndEmpty}\n              aria-owns={searchResultsContainerId}\n              aria-activedescendant={activeDescendant}\n              aria-required={required}\n              aria-describedby={allowExceedingMaxLengthTextId}\n              required={required}\n              tabIndex={tabIndex}\n              dir={dir}\n            />\n            {loading && (\n              <div\n                className={cx(styles.loaderContainer, {\n                  [styles.loaderContainerHasIcon]: hasIcon\n                })}\n              >\n                <div className={cx(styles.loader)}>\n                  <Loader className={cx(styles.loaderSvg)} />\n                </div>\n              </div>\n            )}\n            {iconName && (\n              <Tooltip\n                content={isPrimary ? iconTooltipContent : undefined}\n                referenceWrapperClassName={styles.tooltipContainer}\n              >\n                <Clickable\n                  className={cx(styles.iconContainer, {\n                    [styles.iconContainerHasIcon]: hasIcon,\n                    [styles.iconContainerActive]: isPrimary,\n                    [styles.iconContainerClickable]: isIconContainerClickable\n                  })}\n                  onClick={onIconClickCallback}\n                  tabIndex={shouldFocusOnPrimaryIcon ? 0 : -1}\n                  aria-label={primaryIconAriaLabel}\n                >\n                  <Icon\n                    icon={iconName}\n                    className={cx(styles.icon)}\n                    type=\"font\"\n                    size={size === \"small\" ? \"16px\" : \"18px\"}\n                  />\n                </Clickable>\n              </Tooltip>\n            )}\n            {secondaryIconName && (\n              <Tooltip\n                content={isSecondary ? secondaryTooltipContent : undefined}\n                addKeyboardHideShowTriggersByDefault\n                referenceWrapperClassName={styles.tooltipContainer}\n              >\n                <Clickable\n                  className={cx(styles.iconContainer, {\n                    [styles.iconContainerHasIcon]: hasIcon,\n                    [styles.iconContainerActive]: isSecondary,\n                    [styles.iconContainerClickable]: isIconContainerClickable\n                  })}\n                  onClick={onIconClickCallback}\n                  tabIndex={shouldFocusOnSecondaryIcon ? 0 : -1}\n                  data-testid={secondaryDataTestId || getTestId(ComponentDefaultTestId.TEXT_FIELD_SECONDARY_BUTTON, id)}\n                  aria-label={secondaryIconAriaLabel}\n                >\n                  <Icon\n                    icon={secondaryIconName}\n                    className={cx(styles.icon)}\n                    type=\"font\"\n                    size={size === \"small\" ? \"16px\" : \"18px\"}\n                  />\n                </Clickable>\n              </Tooltip>\n            )}\n          </div>\n          {shouldShowExtraText && (\n            <Text type=\"text2\" color=\"secondary\" className={cx(styles.subTextContainer)}>\n              {((validation && validation.text) || (isRequiredAndEmpty && requiredErrorText)) && (\n                <span className={cx(styles.subTextContainerStatus)}>\n                  {isRequiredAndEmpty ? requiredErrorText : validation.text}\n                </span>\n              )}\n              {showCharCount && (\n                <span className={cx(styles.counter)} aria-label={TextFieldAriaLabel.CHAR}>\n                  {(inputValue && inputValue.length) || 0}\n                  {typeof maxLength === \"number\" && `/${maxLength}`}\n                  <HiddenText id={allowExceedingMaxLengthTextId} text={`Maximum of ${maxLength} characters`} />\n                </span>\n              )}\n            </Text>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nexport default TextField;\n"
  },
  {
    "path": "packages/core/src/components/TextField/TextField.types.ts",
    "content": "export type TextFieldType =\n  | \"text\"\n  | \"password\"\n  | \"search\"\n  | \"date\"\n  | \"datetime-local\"\n  | \"number\"\n  | \"tel\"\n  | \"url\"\n  | \"email\";\n\nexport type TextFieldFeedbackState = \"error\" | \"success\";\n\nexport type TextFieldSize = \"small\" | \"medium\" | \"large\";\n"
  },
  {
    "path": "packages/core/src/components/TextField/TextFieldConstants.ts",
    "content": "import { BASE_SIZES } from \"../../constants\";\nimport styles from \"./TextField.module.scss\";\n\nexport enum TextFieldAriaLabel {\n  CHAR = \"Input char count\",\n  VALIDATION_TEXT = \"Additional helper text\"\n}\n\nconst OLD_TEXT_FIELD_SIZES = {\n  s: BASE_SIZES.SMALL,\n  md: BASE_SIZES.MEDIUM,\n  l: BASE_SIZES.LARGE\n};\n\nexport type TextFieldSize = (typeof BASE_SIZES)[keyof typeof BASE_SIZES] | keyof typeof OLD_TEXT_FIELD_SIZES;\n\nexport const FEEDBACK_CLASSES = {\n  error: styles.inputErrorValidation,\n  success: styles.inputSuccessValidation\n};\n\nexport const SIZE_MAPPER = {\n  [BASE_SIZES.SMALL]: styles.wrapperSizeSmall,\n  [BASE_SIZES.MEDIUM]: styles.wrapperSizeMedium,\n  [BASE_SIZES.LARGE]: styles.wrapperSizeLarge\n};\n"
  },
  {
    "path": "packages/core/src/components/TextField/__tests__/TextField-tests.test.tsx",
    "content": "import { vi, beforeEach, afterEach, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { fireEvent, render, cleanup, screen, waitFor } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { act } from \"@testing-library/react-hooks\";\nimport TextField from \"../TextField\";\n\nconst TEST_ID = \"test-text-field\";\n\ndescribe(\"TextField tests\", () => {\n  let inputComponent;\n  let onChangeStub;\n  const defaultPlaceHolder = \"Place Holder Text\";\n  let ref;\n\n  beforeEach(() => {\n    cleanup();\n    ref = {};\n    onChangeStub = vi.fn();\n    vi.useFakeTimers(\"modern\");\n    inputComponent = render(\n      <TextField placeholder={defaultPlaceHolder} onChange={onChangeStub} id={TEST_ID} ref={ref} />\n    );\n  });\n  afterEach(() => {\n    vi.useRealTimers();\n  });\n\n  it(\"on input mutate should call the callback stub with the value\", () => {\n    const input = screen.getByPlaceholderText(defaultPlaceHolder);\n    const value = \"Value of input\";\n    fireEvent.change(input, { target: { value } });\n    expect(input.value).toBe(value);\n  });\n\n  it(\"on input mutate should call the stub with the value\", () => {\n    const input = screen.getByPlaceholderText(defaultPlaceHolder);\n    const value = \"Value of input\";\n    act(() => {\n      fireEvent.change(input, { target: { value } });\n    });\n\n    expect(onChangeStub).toHaveBeenCalledWith(\n      value,\n      expect.objectContaining({\n        target: expect.objectContaining({\n          value: value,\n          id: TEST_ID\n        })\n      })\n    );\n  });\n\n  it(\"should not change the value instantly when debounce value is provided\", () => {\n    const { rerender } = inputComponent;\n    inputComponent = rerender(\n      <TextField placeholder={defaultPlaceHolder} onChange={onChangeStub} id={TEST_ID} debounceRate={200} />\n    );\n    const value = \"Value of input\";\n    const input = screen.getByPlaceholderText(defaultPlaceHolder);\n    fireEvent.change(input, { target: { value } });\n    expect(onChangeStub.mock.calls.length).toBe(0);\n  });\n\n  it(\"should be able to forward ref\", () => {\n    const { rerender } = inputComponent;\n    inputComponent = rerender(\n      <TextField placeholder={defaultPlaceHolder} onChange={onChangeStub} id={TEST_ID} debounceRate={200} ref={ref} />\n    );\n    expect(ref.current.className).toMatch(\"input\");\n  });\n\n  it(\"should call the debounced function after time passed (fake timers)\", async () => {\n    const { rerender } = inputComponent;\n    const debounceTime = 200;\n    inputComponent = rerender(\n      <TextField placeholder={defaultPlaceHolder} onChange={onChangeStub} id={TEST_ID} debounceRate={debounceTime} />\n    );\n    const value = \"A\";\n    const input = screen.getByPlaceholderText(defaultPlaceHolder);\n    userEvent.type(input, value);\n    expect(onChangeStub).not.toHaveBeenCalled();\n    vi.advanceTimersByTime(debounceTime + 1);\n    await waitFor(\n      () =>\n        expect(onChangeStub).toHaveBeenCalledWith(\n          value,\n          expect.objectContaining({\n            target: expect.objectContaining({\n              value: value,\n              id: TEST_ID\n            })\n          })\n        ),\n      { timeout: debounceTime }\n    );\n  });\n\n  it(\"should be disabled\", () => {\n    const { rerender } = inputComponent;\n    inputComponent = rerender(\n      <TextField placeholder={defaultPlaceHolder} onChange={onChangeStub} id={TEST_ID} disabled />\n    );\n    const input = screen.getByPlaceholderText(defaultPlaceHolder);\n    expect(input.disabled).toBeTruthy();\n  });\n\n  it(\"char count should display correctly after changing value\", () => {\n    const { rerender, queryByLabelText } = inputComponent;\n    let value = \"hello\";\n    rerender(<TextField placeholder={defaultPlaceHolder} onChange={onChangeStub} showCharCount value={value} />);\n    const input = screen.getByPlaceholderText(defaultPlaceHolder);\n    value = \"Value of input\";\n    fireEvent.change(input, { target: { value } });\n    const charCount = queryByLabelText(\"Place Holder Text\");\n    expect(parseInt(charCount.value.length)).toBe(value.length);\n  });\n\n  describe(\"autocomplete\", () => {\n    it(\"should add autocomplete attr and set it to on\", () => {\n      const { container } = render(\n        <TextField placeholder={defaultPlaceHolder} onChange={onChangeStub} id={TEST_ID} autoComplete=\"on\" />\n      );\n      const element = container.querySelector('[autocomplete=\"on\"]');\n      expect(element).toBeTruthy();\n    });\n\n    it(\"should add autocomplete attr and set it to off\", () => {\n      const { container } = render(\n        <TextField placeholder={defaultPlaceHolder} onChange={onChangeStub} id={TEST_ID} autoComplete=\"off\" />\n      );\n      const element = container.querySelector('[autocomplete=\"off\"]');\n      expect(element).toBeTruthy();\n    });\n  });\n\n  it(\"should trim the value if trim is true\", () => {\n    const { rerender } = inputComponent;\n    inputComponent = rerender(<TextField placeholder={defaultPlaceHolder} onChange={onChangeStub} id={TEST_ID} trim />);\n    const input = screen.getByPlaceholderText(defaultPlaceHolder);\n    const value = \"Value of input      \";\n    fireEvent.change(input, { target: { value } });\n    expect(input.value).toBe(value.trim());\n  });\n\n  describe(\"a11y\", () => {\n    it(\"should add the aria label\", () => {\n      const ariaLabel = \"aria label\";\n      const { getByLabelText } = render(<TextField inputAriaLabel={ariaLabel} />);\n      const element = getByLabelText(ariaLabel);\n      expect(element).toBeTruthy();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/TextField/__tests__/TextField.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport TextField from \"../TextField\";\n\ndescribe(\"TextField renders correctly\", () => {\n  it(\"with placeholder\", () => {\n    const tree = renderer.create(<TextField placeholder=\"placeholder\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with value\", () => {\n    const tree = renderer.create(<TextField value=\"value\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"when disabled\", () => {\n    const tree = renderer.create(<TextField disabled />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with wrapperClassName\", () => {\n    const tree = renderer.create(<TextField wrapperClassName=\"testClassName\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with className\", () => {\n    const tree = renderer.create(<TextField className=\"testClassName\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with id\", () => {\n    const tree = renderer.create(<TextField id=\"testId\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with validation\", () => {\n    const tree = renderer.create(<TextField validation={{ status: \"error\", text: \"error\" }} />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with showCharCount\", () => {\n    const tree = renderer.create(<TextField showCharCount />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"when loading\", () => {\n    const tree = renderer.create(<TextField loading />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with another type\", () => {\n    const tree = renderer.create(<TextField type=\"password\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with large size\", () => {\n    const tree = renderer.create(<TextField size=\"large\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with icon\", () => {\n    const tree = renderer.create(<TextField icon=\"fa-star\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with labelIconName\", () => {\n    const tree = renderer.create(<TextField labelIconName=\"fa-star\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"when readonly\", () => {\n    const tree = renderer.create(<TextField readonly />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with role\", () => {\n    const tree = renderer.create(<TextField role=\"button\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"when required\", () => {\n    const tree = renderer.create(<TextField required />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with secondaryIconName\", () => {\n    const tree = renderer.create(<TextField secondaryIconName=\"fa-star\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with iconLabel and secondaryIconLabel\", () => {\n    const tree = renderer.create(<TextField iconLabel=\"primary-label\" secondaryIconLabel=\"secondary-label\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with date type\", () => {\n    const tree = renderer.create(<TextField type=\"date\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with date-time type\", () => {\n    const tree = renderer.create(<TextField type=\"datetime-local\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with tel type\", () => {\n    const tree = renderer.create(<TextField type=\"tel\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with url type\", () => {\n    const tree = renderer.create(<TextField type=\"url\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with email type\", () => {\n    const tree = renderer.create(<TextField type=\"email\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/TextField/__tests__/TextField.test.tsx",
    "content": "import { vi, beforeEach, afterEach, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { act, cleanup, fireEvent, render, screen } from \"@testing-library/react\";\nimport TextField from \"../TextField\";\nimport { TextFieldAriaLabel } from \"../TextFieldConstants\";\n\ndescribe(\"TextField Tests\", () => {\n  let inputComponent;\n  let onChangeStub;\n  const defaultPlaceHolder = \"Place Holder Text\";\n  let ref;\n  beforeEach(() => {\n    cleanup();\n    ref = { current: null };\n    onChangeStub = vi.fn();\n    vi.useFakeTimers(\"modern\");\n    act(() => {\n      inputComponent = render(\n        <TextField placeholder={defaultPlaceHolder} onChange={onChangeStub} id=\"test\" ref={ref} />\n      );\n    });\n  });\n  afterEach(() => {\n    vi.useRealTimers();\n    cleanup();\n  });\n\n  it(\"should display placeholder\", () => {\n    expect(screen.getByPlaceholderText(defaultPlaceHolder)).toBeTruthy();\n  });\n\n  it(\"on input mutate should call the callback stub with the value\", () => {\n    const input = screen.getByPlaceholderText(defaultPlaceHolder);\n    const value = \"Value of input\";\n    act(() => {\n      fireEvent.change(input, { target: { value } });\n    });\n    expect(input.value).toBe(value);\n  });\n\n  it(\"on input mutate should call the stub with the value\", () => {\n    const input = screen.getByPlaceholderText(defaultPlaceHolder);\n    const value = \"Value of input\";\n    act(() => {\n      fireEvent.change(input, { target: { value } });\n    });\n    expect(onChangeStub.mock.calls[0][0]).toEqual(value);\n  });\n\n  it(\"should not change the value instantly when debounce value is provided\", () => {\n    const { rerender } = inputComponent;\n    act(() => {\n      inputComponent = rerender(\n        <TextField placeholder={defaultPlaceHolder} onChange={onChangeStub} id=\"test\" debounceRate={200} />\n      );\n    });\n\n    const value = \"Value of input\";\n    const input = screen.getByPlaceholderText(defaultPlaceHolder);\n    act(() => {\n      fireEvent.change(input, { target: { value } });\n    });\n\n    expect(onChangeStub.mock.calls.length).toEqual(0);\n  });\n\n  it(\"should be able to forward ref\", () => {\n    const { rerender } = inputComponent;\n    act(() => {\n      inputComponent = rerender(\n        <TextField placeholder={defaultPlaceHolder} onChange={onChangeStub} id=\"test\" debounceRate={200} ref={ref} />\n      );\n    });\n    expect(ref.current.classList.contains(\"input\")).toBeTruthy();\n  });\n\n  it(\"should call the debounced function after time passed (fake timers)\", () => {\n    const { rerender } = inputComponent;\n    const debounceTime = 200;\n    act(() => {\n      inputComponent = rerender(\n        <TextField placeholder={defaultPlaceHolder} onChange={onChangeStub} id=\"test\" debounceRate={debounceTime} />\n      );\n    });\n\n    const value = \"Value of input\";\n    const input = screen.getByPlaceholderText(defaultPlaceHolder);\n    act(() => {\n      fireEvent.change(input, { target: { value } });\n    });\n    vi.advanceTimersByTime(debounceTime + 1);\n    expect(onChangeStub.mock.calls.length).toEqual(1);\n  });\n\n  it(\"should be disabled\", () => {\n    const { rerender } = inputComponent;\n    act(() => {\n      inputComponent = rerender(\n        <TextField placeholder={defaultPlaceHolder} onChange={onChangeStub} id=\"test\" disabled />\n      );\n    });\n    const input = screen.getByPlaceholderText(defaultPlaceHolder);\n    expect(input).toBeDisabled();\n  });\n\n  it(\"title should be available\", () => {\n    const { rerender, getByText } = inputComponent;\n    const title = \"Title\";\n    act(() => {\n      rerender(<TextField placeholder={defaultPlaceHolder} onChange={onChangeStub} id=\"test\" disabled title={title} />);\n    });\n    const titleElement = getByText(title);\n    expect(titleElement).toBeTruthy();\n  });\n\n  it(\"title should not be available\", () => {\n    const { rerender, queryByText } = inputComponent;\n    const title = \"My Awesome Heading\";\n    act(() => {\n      rerender(<TextField placeholder={defaultPlaceHolder} onChange={onChangeStub} id=\"test\" disabled />);\n    });\n    const titleElement = queryByText(title);\n    expect(titleElement).toBeFalsy();\n  });\n\n  it(\"should display an icon\", () => {\n    const { rerender, queryByLabelText } = inputComponent;\n    act(() => {\n      rerender(\n        <TextField\n          placeholder={defaultPlaceHolder}\n          onChange={onChangeStub}\n          id=\"test\"\n          icon=\"test\"\n          iconLabel=\"Primary Icon\"\n        />\n      );\n    });\n\n    const icon = queryByLabelText(\"Primary Icon\");\n    expect(icon).toBeTruthy();\n  });\n\n  it(\"should not display icon\", () => {\n    const { rerender, queryByLabelText } = inputComponent;\n    act(() => {\n      rerender(<TextField placeholder={defaultPlaceHolder} onChange={onChangeStub} id=\"test\" />);\n    });\n\n    const icon = queryByLabelText(\"test-icon\");\n    expect(icon).toBeFalsy();\n  });\n\n  describe(\"char count and limit\", () => {\n    it(\"should display char count on initial\", () => {\n      const { rerender, queryByLabelText } = inputComponent;\n      const value = \"hello\";\n      act(() => {\n        rerender(\n          <TextField\n            placeholder={defaultPlaceHolder}\n            onChange={onChangeStub}\n            id=\"char-count-test\"\n            showCharCount\n            value={value}\n          />\n        );\n      });\n\n      const charCount = queryByLabelText(TextFieldAriaLabel.CHAR);\n      expect(parseInt(charCount.innerHTML, 10)).toBe(value.length);\n    });\n\n    it(\"should display char count and max length on initial\", () => {\n      const { rerender, getByText } = inputComponent;\n      const value = \"hello\";\n      act(() => {\n        rerender(\n          <TextField\n            placeholder={defaultPlaceHolder}\n            onChange={onChangeStub}\n            id=\"char-count-test\"\n            showCharCount\n            value={value}\n            maxLength={10}\n          />\n        );\n      });\n\n      expect(getByText(`${value.length}/10`)).toBeTruthy();\n    });\n\n    it(\"char count should display correctly after changing value\", () => {\n      const { rerender, queryByLabelText } = inputComponent;\n      let value = \"hello\";\n      act(() => {\n        rerender(\n          <TextField\n            placeholder={defaultPlaceHolder}\n            onChange={onChangeStub}\n            id=\"char-count-test\"\n            showCharCount\n            value={value}\n          />\n        );\n      });\n\n      const input = screen.getByPlaceholderText(defaultPlaceHolder);\n      value = \"Value of input\";\n      act(() => {\n        fireEvent.change(input, { target: { value } });\n      });\n\n      const charCount = queryByLabelText(TextFieldAriaLabel.CHAR);\n      expect(parseInt(charCount.innerHTML, 10)).toEqual(value.length);\n    });\n\n    it(\"should prevent typing when character limit is reached and allowExceedingMaxLength is false\", () => {\n      const { rerender } = inputComponent;\n      act(() => {\n        rerender(\n          <TextField placeholder={defaultPlaceHolder} showCharCount maxLength={5} allowExceedingMaxLength={false} />\n        );\n      });\n\n      const input = screen.getByPlaceholderText(defaultPlaceHolder);\n      // This correctly tests the maxLength attribute be properly set on the input element\n      // Using fireEvent bypasses the maxLength where a user wouldn't:\n      // https://github.com/testing-library/user-event/issues/591#issuecomment-517816296\n      expect(input).toHaveAttribute(\"maxlength\", \"5\");\n    });\n\n    it(\"should allow typing beyond character limit when allowExceedingMaxLength is true\", () => {\n      const { rerender, getByText } = inputComponent;\n      act(() => {\n        rerender(\n          <TextField placeholder={defaultPlaceHolder} showCharCount maxLength={5} allowExceedingMaxLength={true} />\n        );\n      });\n\n      const input = screen.getByPlaceholderText(defaultPlaceHolder);\n      act(() => {\n        fireEvent.change(input, { target: { value: \"123456\" } });\n      });\n\n      expect(input).toHaveValue(\"123456\");\n      expect(input).not.toHaveAttribute(\"maxlength\");\n\n      expect(getByText(\"6/5\")).toBeTruthy();\n    });\n  });\n\n  describe(\"validation text\", () => {\n    it(\"should not show validation\", () => {\n      const { queryByLabelText } = inputComponent;\n      const validationTextNode = queryByLabelText(TextFieldAriaLabel.VALIDATION_TEXT);\n      expect(validationTextNode).toBeNull();\n    });\n  });\n\n  describe(\"types\", () => {\n    it(\"default type should be text\", () => {\n      const input = screen.getByPlaceholderText(defaultPlaceHolder);\n      expect(input.type).toBe(\"text\");\n    });\n\n    it(\"type should be password\", () => {\n      const { rerender } = inputComponent;\n      act(() => {\n        inputComponent = rerender(\n          <TextField placeholder={defaultPlaceHolder} onChange={onChangeStub} id=\"test\" type=\"password\" />\n        );\n      });\n      const input = screen.getByPlaceholderText(defaultPlaceHolder);\n      expect(input.type).toBe(\"password\");\n    });\n\n    it(\"type should be tel\", () => {\n      const { rerender } = inputComponent;\n      act(() => {\n        inputComponent = rerender(\n          <TextField placeholder={defaultPlaceHolder} onChange={onChangeStub} id=\"test\" type=\"tel\" />\n        );\n      });\n      const input = screen.getByPlaceholderText(defaultPlaceHolder);\n      expect(input.type).toBe(\"tel\");\n    });\n\n    it(\"type should be url\", () => {\n      const { rerender } = inputComponent;\n      act(() => {\n        inputComponent = rerender(\n          <TextField placeholder={defaultPlaceHolder} onChange={onChangeStub} id=\"test\" type=\"url\" />\n        );\n      });\n      const input = screen.getByPlaceholderText(defaultPlaceHolder);\n      expect(input.type).toBe(\"url\");\n    });\n\n    it(\"type should be email\", () => {\n      const { rerender } = inputComponent;\n      act(() => {\n        inputComponent = rerender(\n          <TextField placeholder={defaultPlaceHolder} onChange={onChangeStub} id=\"test\" type=\"email\" />\n        );\n      });\n      const input = screen.getByPlaceholderText(defaultPlaceHolder);\n      expect(input.type).toBe(\"email\");\n    });\n  });\n  describe(\"autocomplete\", () => {\n    it(\"should add autocomplete attr and set it to on\", () => {\n      const { container } = render(\n        <TextField placeholder={defaultPlaceHolder} onChange={onChangeStub} id=\"test\" autoComplete=\"on\" />\n      );\n      const element = container.querySelector('[autocomplete=\"on\"]');\n      expect(element).toBeTruthy();\n    });\n\n    it(\"should add autocomplete attr and set it to off\", () => {\n      const { container } = render(\n        <TextField placeholder={defaultPlaceHolder} onChange={onChangeStub} id=\"test\" autoComplete=\"off\" />\n      );\n      const element = container.querySelector('[autocomplete=\"off\"]');\n      expect(element).toBeTruthy();\n    });\n  });\n\n  it(\"should trim the value if trim is true\", () => {\n    const { rerender } = inputComponent;\n    act(() => {\n      inputComponent = rerender(<TextField placeholder={defaultPlaceHolder} onChange={onChangeStub} id=\"test\" trim />);\n    });\n    const input = screen.getByPlaceholderText(defaultPlaceHolder);\n    const value = \"Value of input      \";\n    act(() => {\n      fireEvent.change(input, { target: { value } });\n    });\n    expect(input.value).toBe(value.trim());\n  });\n\n  describe(\"controlled\", () => {\n    it(\"should call onChange with the new value when controlled is true\", () => {\n      const handleChange = vi.fn();\n      render(<TextField placeholder=\"Enter text\" onChange={handleChange} value=\"value\" controlled />);\n\n      const input = screen.getByPlaceholderText(\"Enter text\");\n      expect(input.value).toBe(\"value\");\n\n      fireEvent.change(input, { target: { value: \"new value\" } });\n\n      expect(handleChange).toHaveBeenCalledTimes(1);\n      expect(handleChange).toHaveBeenCalledWith(\"new value\", expect.anything());\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/TextField/__tests__/__snapshots__/TextField.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`TextField renders correctly > when disabled 1`] = `\n<div\n  aria-busy={false}\n  className=\"textField disabled\"\n  role=\"\"\n>\n  <div\n    className=\"labelWrapper\"\n  >\n    <div\n      className=\"inputWrapper wrapperSizeSmall\"\n    >\n      <input\n        aria-activedescendant=\"\"\n        aria-invalid={false}\n        aria-label=\"\"\n        aria-owns=\"\"\n        aria-required={false}\n        autoComplete=\"off\"\n        className=\"input\"\n        data-testid=\"text-field_input\"\n        data-vibe=\"TextField\"\n        disabled={true}\n        id=\"input\"\n        onBlur={[Function]}\n        onChange={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onWheel={[Function]}\n        placeholder=\"\"\n        readOnly={false}\n        required={false}\n        role=\"\"\n        type=\"text\"\n        value=\"\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`TextField renders correctly > when loading 1`] = `\n<div\n  aria-busy={true}\n  className=\"textField\"\n  role=\"\"\n>\n  <div\n    className=\"labelWrapper\"\n  >\n    <div\n      className=\"inputWrapper wrapperSizeSmall\"\n    >\n      <input\n        aria-activedescendant=\"\"\n        aria-invalid={false}\n        aria-label=\"\"\n        aria-owns=\"\"\n        aria-required={false}\n        autoComplete=\"off\"\n        className=\"input\"\n        data-testid=\"text-field_input\"\n        data-vibe=\"TextField\"\n        disabled={false}\n        id=\"input\"\n        onBlur={[Function]}\n        onChange={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onWheel={[Function]}\n        placeholder=\"\"\n        readOnly={false}\n        required={false}\n        role=\"\"\n        type=\"text\"\n        value=\"\"\n      />\n      <div\n        className=\"loaderContainer\"\n      >\n        <div\n          className=\"loader\"\n        >\n          <div\n            className=\"loaderContainer\"\n            data-testid=\"loader\"\n            role=\"alert\"\n            title=\"loading\"\n          >\n            <svg\n              aria-hidden={true}\n              className=\"circleLoaderSpinner loaderSvg\"\n              viewBox=\"0 0 50 50\"\n            >\n              <circle\n                className=\"circleLoaderSpinnerPath\"\n                cx=\"25\"\n                cy=\"25\"\n                fill=\"none\"\n                r=\"20\"\n                strokeWidth=\"5\"\n              />\n            </svg>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`TextField renders correctly > when readonly 1`] = `\n<div\n  aria-busy={false}\n  className=\"textField\"\n  role=\"\"\n>\n  <div\n    className=\"labelWrapper\"\n  >\n    <div\n      className=\"inputWrapper wrapperSizeSmall\"\n    >\n      <input\n        aria-activedescendant=\"\"\n        aria-invalid={false}\n        aria-label=\"\"\n        aria-owns=\"\"\n        aria-required={false}\n        autoComplete=\"off\"\n        className=\"input readOnly\"\n        data-testid=\"text-field_input\"\n        data-vibe=\"TextField\"\n        disabled={false}\n        id=\"input\"\n        onBlur={[Function]}\n        onChange={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onWheel={[Function]}\n        placeholder=\"\"\n        readOnly={true}\n        required={false}\n        role=\"\"\n        type=\"text\"\n        value=\"\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`TextField renders correctly > when required 1`] = `\n<div\n  aria-busy={false}\n  className=\"textField\"\n  role=\"\"\n>\n  <div\n    className=\"labelWrapper\"\n  >\n    <div\n      className=\"inputWrapper wrapperSizeSmall\"\n    >\n      <input\n        aria-activedescendant=\"\"\n        aria-invalid={false}\n        aria-label=\"\"\n        aria-owns=\"\"\n        aria-required={true}\n        autoComplete=\"off\"\n        className=\"input\"\n        data-testid=\"text-field_input\"\n        data-vibe=\"TextField\"\n        disabled={false}\n        id=\"input\"\n        onBlur={[Function]}\n        onChange={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onWheel={[Function]}\n        placeholder=\"\"\n        readOnly={false}\n        required={true}\n        role=\"\"\n        type=\"text\"\n        value=\"\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`TextField renders correctly > with another type 1`] = `\n<div\n  aria-busy={false}\n  className=\"textField\"\n  role=\"\"\n>\n  <div\n    className=\"labelWrapper\"\n  >\n    <div\n      className=\"inputWrapper wrapperSizeSmall\"\n    >\n      <input\n        aria-activedescendant=\"\"\n        aria-invalid={false}\n        aria-label=\"\"\n        aria-owns=\"\"\n        aria-required={false}\n        autoComplete=\"off\"\n        className=\"input\"\n        data-testid=\"text-field_input\"\n        data-vibe=\"TextField\"\n        disabled={false}\n        id=\"input\"\n        onBlur={[Function]}\n        onChange={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onWheel={[Function]}\n        placeholder=\"\"\n        readOnly={false}\n        required={false}\n        role=\"\"\n        type=\"password\"\n        value=\"\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`TextField renders correctly > with className 1`] = `\n<div\n  aria-busy={false}\n  className=\"textField\"\n  role=\"\"\n>\n  <div\n    className=\"labelWrapper\"\n  >\n    <div\n      className=\"inputWrapper wrapperSizeSmall\"\n    >\n      <input\n        aria-activedescendant=\"\"\n        aria-invalid={false}\n        aria-label=\"\"\n        aria-owns=\"\"\n        aria-required={false}\n        autoComplete=\"off\"\n        className=\"testClassName input\"\n        data-testid=\"text-field_input\"\n        data-vibe=\"TextField\"\n        disabled={false}\n        id=\"input\"\n        onBlur={[Function]}\n        onChange={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onWheel={[Function]}\n        placeholder=\"\"\n        readOnly={false}\n        required={false}\n        role=\"\"\n        type=\"text\"\n        value=\"\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`TextField renders correctly > with date type 1`] = `\n<div\n  aria-busy={false}\n  className=\"textField\"\n  role=\"\"\n>\n  <div\n    className=\"labelWrapper\"\n  >\n    <div\n      className=\"inputWrapper wrapperSizeSmall\"\n    >\n      <input\n        aria-activedescendant=\"\"\n        aria-invalid={false}\n        aria-label=\"\"\n        aria-owns=\"\"\n        aria-required={false}\n        autoComplete=\"off\"\n        className=\"input\"\n        data-testid=\"text-field_input\"\n        data-vibe=\"TextField\"\n        disabled={false}\n        id=\"input\"\n        onBlur={[Function]}\n        onChange={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onWheel={[Function]}\n        placeholder=\"\"\n        readOnly={false}\n        required={false}\n        role=\"\"\n        type=\"date\"\n        value=\"\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`TextField renders correctly > with date-time type 1`] = `\n<div\n  aria-busy={false}\n  className=\"textField\"\n  role=\"\"\n>\n  <div\n    className=\"labelWrapper\"\n  >\n    <div\n      className=\"inputWrapper wrapperSizeSmall\"\n    >\n      <input\n        aria-activedescendant=\"\"\n        aria-invalid={false}\n        aria-label=\"\"\n        aria-owns=\"\"\n        aria-required={false}\n        autoComplete=\"off\"\n        className=\"input\"\n        data-testid=\"text-field_input\"\n        data-vibe=\"TextField\"\n        disabled={false}\n        id=\"input\"\n        onBlur={[Function]}\n        onChange={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onWheel={[Function]}\n        placeholder=\"\"\n        readOnly={false}\n        required={false}\n        role=\"\"\n        type=\"datetime-local\"\n        value=\"\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`TextField renders correctly > with email type 1`] = `\n<div\n  aria-busy={false}\n  className=\"textField\"\n  role=\"\"\n>\n  <div\n    className=\"labelWrapper\"\n  >\n    <div\n      className=\"inputWrapper wrapperSizeSmall\"\n    >\n      <input\n        aria-activedescendant=\"\"\n        aria-invalid={false}\n        aria-label=\"\"\n        aria-owns=\"\"\n        aria-required={false}\n        autoComplete=\"off\"\n        className=\"input\"\n        data-testid=\"text-field_input\"\n        data-vibe=\"TextField\"\n        disabled={false}\n        id=\"input\"\n        onBlur={[Function]}\n        onChange={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onWheel={[Function]}\n        placeholder=\"\"\n        readOnly={false}\n        required={false}\n        role=\"\"\n        type=\"email\"\n        value=\"\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`TextField renders correctly > with icon 1`] = `\n<div\n  aria-busy={false}\n  className=\"textField\"\n  role=\"\"\n>\n  <div\n    className=\"labelWrapper\"\n  >\n    <div\n      className=\"inputWrapper wrapperSizeSmall\"\n    >\n      <input\n        aria-activedescendant=\"\"\n        aria-invalid={false}\n        aria-label=\"\"\n        aria-owns=\"\"\n        aria-required={false}\n        autoComplete=\"off\"\n        className=\"input inputHasIcon\"\n        data-testid=\"text-field_input\"\n        data-vibe=\"TextField\"\n        disabled={false}\n        id=\"input\"\n        onBlur={[Function]}\n        onChange={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onWheel={[Function]}\n        placeholder=\"\"\n        readOnly={false}\n        required={false}\n        role=\"\"\n        type=\"text\"\n        value=\"\"\n      />\n      <div\n        className=\"clickable iconContainer iconContainerHasIcon iconContainerActive disableTextSelection\"\n        data-testid=\"clickable\"\n        onClick={[Function]}\n        onKeyDown={[Function]}\n        onMouseDown={[Function]}\n        onMouseEnter={[Function]}\n        onMouseLeave={[Function]}\n        role=\"button\"\n        tabIndex={-1}\n      >\n        <span\n          aria-hidden={true}\n          className=\"icon icon fa fa-star\"\n          data-testid=\"icon\"\n          data-vibe=\"Icon\"\n          onClick={[Function]}\n          role=\"img\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`TextField renders correctly > with iconLabel and secondaryIconLabel 1`] = `\n<div\n  aria-busy={false}\n  className=\"textField\"\n  role=\"\"\n>\n  <div\n    className=\"labelWrapper\"\n  >\n    <div\n      className=\"inputWrapper wrapperSizeSmall\"\n    >\n      <input\n        aria-activedescendant=\"\"\n        aria-invalid={false}\n        aria-label=\"\"\n        aria-owns=\"\"\n        aria-required={false}\n        autoComplete=\"off\"\n        className=\"input\"\n        data-testid=\"text-field_input\"\n        data-vibe=\"TextField\"\n        disabled={false}\n        id=\"input\"\n        onBlur={[Function]}\n        onChange={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onWheel={[Function]}\n        placeholder=\"\"\n        readOnly={false}\n        required={false}\n        role=\"\"\n        type=\"text\"\n        value=\"\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`TextField renders correctly > with id 1`] = `\n<div\n  aria-busy={false}\n  className=\"textField\"\n  role=\"\"\n>\n  <div\n    className=\"labelWrapper\"\n  >\n    <div\n      className=\"inputWrapper wrapperSizeSmall\"\n    >\n      <input\n        aria-activedescendant=\"\"\n        aria-invalid={false}\n        aria-label=\"\"\n        aria-owns=\"\"\n        aria-required={false}\n        autoComplete=\"off\"\n        className=\"input\"\n        data-testid=\"text-field_testId\"\n        data-vibe=\"TextField\"\n        disabled={false}\n        id=\"testId\"\n        onBlur={[Function]}\n        onChange={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onWheel={[Function]}\n        placeholder=\"\"\n        readOnly={false}\n        required={false}\n        role=\"\"\n        type=\"text\"\n        value=\"\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`TextField renders correctly > with labelIconName 1`] = `\n<div\n  aria-busy={false}\n  className=\"textField\"\n  role=\"\"\n>\n  <div\n    className=\"labelWrapper\"\n  >\n    <div\n      className=\"inputWrapper wrapperSizeSmall\"\n    >\n      <input\n        aria-activedescendant=\"\"\n        aria-invalid={false}\n        aria-label=\"\"\n        aria-owns=\"\"\n        aria-required={false}\n        autoComplete=\"off\"\n        className=\"input\"\n        data-testid=\"text-field_input\"\n        data-vibe=\"TextField\"\n        disabled={false}\n        id=\"input\"\n        onBlur={[Function]}\n        onChange={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onWheel={[Function]}\n        placeholder=\"\"\n        readOnly={false}\n        required={false}\n        role=\"\"\n        type=\"text\"\n        value=\"\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`TextField renders correctly > with large size 1`] = `\n<div\n  aria-busy={false}\n  className=\"textField\"\n  role=\"\"\n>\n  <div\n    className=\"labelWrapper\"\n  >\n    <div\n      className=\"inputWrapper wrapperSizeLarge\"\n    >\n      <input\n        aria-activedescendant=\"\"\n        aria-invalid={false}\n        aria-label=\"\"\n        aria-owns=\"\"\n        aria-required={false}\n        autoComplete=\"off\"\n        className=\"input\"\n        data-testid=\"text-field_input\"\n        data-vibe=\"TextField\"\n        disabled={false}\n        id=\"input\"\n        onBlur={[Function]}\n        onChange={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onWheel={[Function]}\n        placeholder=\"\"\n        readOnly={false}\n        required={false}\n        role=\"\"\n        type=\"text\"\n        value=\"\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`TextField renders correctly > with placeholder 1`] = `\n<div\n  aria-busy={false}\n  className=\"textField\"\n  role=\"\"\n>\n  <div\n    className=\"labelWrapper\"\n  >\n    <div\n      className=\"inputWrapper wrapperSizeSmall\"\n    >\n      <input\n        aria-activedescendant=\"\"\n        aria-invalid={false}\n        aria-label=\"placeholder\"\n        aria-owns=\"\"\n        aria-required={false}\n        autoComplete=\"off\"\n        className=\"input\"\n        data-testid=\"text-field_input\"\n        data-vibe=\"TextField\"\n        disabled={false}\n        id=\"input\"\n        onBlur={[Function]}\n        onChange={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onWheel={[Function]}\n        placeholder=\"placeholder\"\n        readOnly={false}\n        required={false}\n        role=\"\"\n        type=\"text\"\n        value=\"\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`TextField renders correctly > with role 1`] = `\n<div\n  aria-busy={false}\n  className=\"textField\"\n  role=\"button\"\n>\n  <div\n    className=\"labelWrapper\"\n  >\n    <div\n      className=\"inputWrapper wrapperSizeSmall\"\n    >\n      <input\n        aria-activedescendant=\"\"\n        aria-invalid={false}\n        aria-label=\"\"\n        aria-owns=\"\"\n        aria-required={false}\n        autoComplete=\"off\"\n        className=\"input\"\n        data-testid=\"text-field_input\"\n        data-vibe=\"TextField\"\n        disabled={false}\n        id=\"input\"\n        onBlur={[Function]}\n        onChange={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onWheel={[Function]}\n        placeholder=\"\"\n        readOnly={false}\n        required={false}\n        role=\"\"\n        type=\"text\"\n        value=\"\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`TextField renders correctly > with secondaryIconName 1`] = `\n<div\n  aria-busy={false}\n  className=\"textField\"\n  role=\"\"\n>\n  <div\n    className=\"labelWrapper\"\n  >\n    <div\n      className=\"inputWrapper wrapperSizeSmall\"\n    >\n      <input\n        aria-activedescendant=\"\"\n        aria-invalid={false}\n        aria-label=\"\"\n        aria-owns=\"\"\n        aria-required={false}\n        autoComplete=\"off\"\n        className=\"input inputHasIcon\"\n        data-testid=\"text-field_input\"\n        data-vibe=\"TextField\"\n        disabled={false}\n        id=\"input\"\n        onBlur={[Function]}\n        onChange={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onWheel={[Function]}\n        placeholder=\"\"\n        readOnly={false}\n        required={false}\n        role=\"\"\n        type=\"text\"\n        value=\"\"\n      />\n      <div\n        className=\"clickable iconContainer iconContainerHasIcon disableTextSelection\"\n        data-testid=\"text-field-secondary-button_input\"\n        onClick={[Function]}\n        onKeyDown={[Function]}\n        onMouseDown={[Function]}\n        onMouseEnter={[Function]}\n        onMouseLeave={[Function]}\n        role=\"button\"\n        tabIndex={-1}\n      >\n        <span\n          aria-hidden={true}\n          className=\"icon icon fa fa-star\"\n          data-testid=\"icon\"\n          data-vibe=\"Icon\"\n          onClick={[Function]}\n          role=\"img\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`TextField renders correctly > with showCharCount 1`] = `\n<div\n  aria-busy={false}\n  className=\"textField\"\n  role=\"\"\n>\n  <div\n    className=\"labelWrapper\"\n  >\n    <div\n      className=\"inputWrapper wrapperSizeSmall\"\n    >\n      <input\n        aria-activedescendant=\"\"\n        aria-invalid={false}\n        aria-label=\"\"\n        aria-owns=\"\"\n        aria-required={false}\n        autoComplete=\"off\"\n        className=\"input\"\n        data-testid=\"text-field_input\"\n        data-vibe=\"TextField\"\n        disabled={false}\n        id=\"input\"\n        onBlur={[Function]}\n        onChange={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onWheel={[Function]}\n        placeholder=\"\"\n        readOnly={false}\n        required={false}\n        role=\"\"\n        type=\"text\"\n        value=\"\"\n      />\n    </div>\n    <div\n      className=\"typography secondary start singleLineEllipsis text text2Normal subTextContainer\"\n      data-testid=\"text\"\n    >\n      <span\n        aria-label=\"Input char count\"\n        className=\"counter\"\n      >\n        0\n        <span\n          className=\"hiddenTextWrapper\"\n          data-testid=\"hidden-text_hiddenText\"\n          id=\"hiddenText\"\n        >\n          Maximum of null characters\n        </span>\n      </span>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`TextField renders correctly > with tel type 1`] = `\n<div\n  aria-busy={false}\n  className=\"textField\"\n  role=\"\"\n>\n  <div\n    className=\"labelWrapper\"\n  >\n    <div\n      className=\"inputWrapper wrapperSizeSmall\"\n    >\n      <input\n        aria-activedescendant=\"\"\n        aria-invalid={false}\n        aria-label=\"\"\n        aria-owns=\"\"\n        aria-required={false}\n        autoComplete=\"off\"\n        className=\"input\"\n        data-testid=\"text-field_input\"\n        data-vibe=\"TextField\"\n        disabled={false}\n        id=\"input\"\n        onBlur={[Function]}\n        onChange={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onWheel={[Function]}\n        placeholder=\"\"\n        readOnly={false}\n        required={false}\n        role=\"\"\n        type=\"tel\"\n        value=\"\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`TextField renders correctly > with url type 1`] = `\n<div\n  aria-busy={false}\n  className=\"textField\"\n  role=\"\"\n>\n  <div\n    className=\"labelWrapper\"\n  >\n    <div\n      className=\"inputWrapper wrapperSizeSmall\"\n    >\n      <input\n        aria-activedescendant=\"\"\n        aria-invalid={false}\n        aria-label=\"\"\n        aria-owns=\"\"\n        aria-required={false}\n        autoComplete=\"off\"\n        className=\"input\"\n        data-testid=\"text-field_input\"\n        data-vibe=\"TextField\"\n        disabled={false}\n        id=\"input\"\n        onBlur={[Function]}\n        onChange={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onWheel={[Function]}\n        placeholder=\"\"\n        readOnly={false}\n        required={false}\n        role=\"\"\n        type=\"url\"\n        value=\"\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`TextField renders correctly > with validation 1`] = `\n<div\n  aria-busy={false}\n  className=\"textField\"\n  role=\"\"\n>\n  <div\n    className=\"labelWrapper\"\n  >\n    <div\n      className=\"inputWrapper wrapperSizeSmall inputErrorValidation\"\n    >\n      <input\n        aria-activedescendant=\"\"\n        aria-invalid={true}\n        aria-label=\"\"\n        aria-owns=\"\"\n        aria-required={false}\n        autoComplete=\"off\"\n        className=\"input\"\n        data-testid=\"text-field_input\"\n        data-vibe=\"TextField\"\n        disabled={false}\n        id=\"input\"\n        onBlur={[Function]}\n        onChange={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onWheel={[Function]}\n        placeholder=\"\"\n        readOnly={false}\n        required={false}\n        role=\"\"\n        type=\"text\"\n        value=\"\"\n      />\n    </div>\n    <div\n      className=\"typography secondary start singleLineEllipsis text text2Normal subTextContainer\"\n      data-testid=\"text\"\n    >\n      <span\n        className=\"subTextContainerStatus\"\n      >\n        error\n      </span>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`TextField renders correctly > with value 1`] = `\n<div\n  aria-busy={false}\n  className=\"textField\"\n  role=\"\"\n>\n  <div\n    className=\"labelWrapper\"\n  >\n    <div\n      className=\"inputWrapper wrapperSizeSmall\"\n    >\n      <input\n        aria-activedescendant=\"\"\n        aria-invalid={false}\n        aria-label=\"\"\n        aria-owns=\"\"\n        aria-required={false}\n        autoComplete=\"off\"\n        className=\"input\"\n        data-testid=\"text-field_input\"\n        data-vibe=\"TextField\"\n        disabled={false}\n        id=\"input\"\n        onBlur={[Function]}\n        onChange={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onWheel={[Function]}\n        placeholder=\"\"\n        readOnly={false}\n        required={false}\n        role=\"\"\n        type=\"text\"\n        value=\"value\"\n      />\n    </div>\n  </div>\n</div>\n`;\n\nexports[`TextField renders correctly > with wrapperClassName 1`] = `\n<div\n  aria-busy={false}\n  className=\"textField testClassName\"\n  role=\"\"\n>\n  <div\n    className=\"labelWrapper\"\n  >\n    <div\n      className=\"inputWrapper wrapperSizeSmall\"\n    >\n      <input\n        aria-activedescendant=\"\"\n        aria-invalid={false}\n        aria-label=\"\"\n        aria-owns=\"\"\n        aria-required={false}\n        autoComplete=\"off\"\n        className=\"input\"\n        data-testid=\"text-field_input\"\n        data-vibe=\"TextField\"\n        disabled={false}\n        id=\"input\"\n        onBlur={[Function]}\n        onChange={[Function]}\n        onFocus={[Function]}\n        onKeyDown={[Function]}\n        onWheel={[Function]}\n        placeholder=\"\"\n        readOnly={false}\n        required={false}\n        role=\"\"\n        type=\"text\"\n        value=\"\"\n      />\n    </div>\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/TextField/index.ts",
    "content": "export { default as TextField, type TextFieldProps } from \"./TextField\";\n\nexport * from \"./TextField.types\";\n"
  },
  {
    "path": "packages/core/src/components/TextWithHighlight/TextWithHighlight.module.scss",
    "content": "@import \"../../styles/typography\";\n\n.textWithHighlightWrapper {\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n}\n\n.textWithHighlightWrapper em.highlightText {\n  background-color: var(--primary-selected-color);\n  color: var(--primary-text-color);\n  border-radius: 2px;\n}\n\n.textWithHighlightWrapper.withEllipsis {\n  @include line-clamp(var(--heading-clamp-lines));\n  word-break: break-word;\n}\n"
  },
  {
    "path": "packages/core/src/components/TextWithHighlight/TextWithHighlight.tsx",
    "content": "import { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { forwardRef, useMemo, useRef } from \"react\";\nimport { Tooltip, type TooltipProps } from \"@vibe/tooltip\";\nimport { useIsOverflowing } from \"@vibe/hooks\";\nimport { useIsomorphicLayoutEffect, useMergeRef } from \"@vibe/shared\";\n\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport styles from \"./TextWithHighlight.module.scss\";\n\nconst getTextPart = (\n  text: string,\n  key: number,\n  shouldHighlight: boolean,\n  wrappingTextTag: keyof JSX.IntrinsicElements = \"em\",\n  wrappingElementClassName: string\n) => {\n  const WrappingElement = wrappingTextTag;\n  if (shouldHighlight) {\n    return (\n      <WrappingElement className={cx(styles.highlightText, wrappingElementClassName)} key={key}>\n        {text}\n      </WrappingElement>\n    );\n  }\n  return <span key={key}>{text}</span>;\n};\n\nexport interface TextWithHighlightProps extends VibeComponentProps {\n  /**\n   * The text content to display.\n   */\n  text?: string;\n  /**\n   * The term to highlight within the text.\n   */\n  highlightTerm?: string;\n  /**\n   * The maximum number of highlighted terms allowed.\n   */\n  limit?: number;\n  /**\n   * If true, the highlight search is case-insensitive.\n   */\n  ignoreCase?: boolean;\n  /**\n   * If true, truncates overflowing text with an ellipsis.\n   */\n  useEllipsis?: boolean;\n  /**\n   * If true, allows splitting the highlight term into separate words.\n   */\n  allowTermSplit?: boolean;\n  /**\n   * The number of lines to display before truncating with an ellipsis.\n   */\n  linesToClamp?: number;\n  /**\n   * Tooltip content displayed when there is no overflow.\n   */\n  nonEllipsisTooltip?: string;\n  /**\n   * The HTML tag used to wrap highlighted text.\n   */\n  wrappingTextTag?: keyof JSX.IntrinsicElements;\n  /**\n   * Class name applied to the wrapping element of highlighted text.\n   */\n  wrappingElementClassName?: string;\n  /**\n   * Additional props to customize the tooltip component.\n   */\n  tooltipProps?: Partial<TooltipProps>;\n}\n\nconst TextWithHighlight: React.FC<TextWithHighlightProps> = forwardRef(\n  (\n    {\n      className,\n      id,\n      text = \"\",\n      highlightTerm,\n      limit,\n      useEllipsis = true,\n      linesToClamp = 3,\n      ignoreCase = true,\n      allowTermSplit = true,\n      nonEllipsisTooltip,\n      wrappingTextTag = \"em\",\n      wrappingElementClassName,\n      tooltipProps = {},\n      \"data-testid\": dataTestId\n    }: TextWithHighlightProps,\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const textWithHighlights = useMemo(() => {\n      if (!text || !highlightTerm || limit === 0) return text;\n      let finalTerm = escapeRegExp(highlightTerm);\n      if (allowTermSplit) {\n        finalTerm = finalTerm.split(\" \").join(\"|\");\n      }\n      const regex = new RegExp(`(${finalTerm})`, ignoreCase ? \"i\" : \"\");\n      const tokens = text.split(regex);\n      const parts = [];\n      // Tokens include the term search (in odd indices)\n      let highlightTermsCount = 0;\n      let key = 0;\n      for (let i = 0; i < tokens.length; i++) {\n        // skip empty tokens\n        if (tokens[i]) {\n          // adding highlight part\n          const isTermPart = i % 2 === 1;\n          const shouldHighlight = isTermPart && (!limit || limit < 0 || highlightTermsCount < limit);\n          parts.push(getTextPart(tokens[i], key++, shouldHighlight, wrappingTextTag, wrappingElementClassName));\n          if (isTermPart) highlightTermsCount++;\n        }\n      }\n\n      return parts;\n    }, [text, highlightTerm, limit, ignoreCase, allowTermSplit, wrappingTextTag, wrappingElementClassName]);\n\n    const isOverflowing = useIsOverflowing({ ref: useEllipsis && componentRef });\n\n    useIsomorphicLayoutEffect(() => {\n      if (componentRef.current) {\n        componentRef.current.style.setProperty(\"--heading-clamp-lines\", linesToClamp.toString());\n      }\n    }, [componentRef, linesToClamp, isOverflowing]);\n\n    const Element = (\n      <div\n        ref={mergedRef}\n        className={cx(styles.textWithHighlightWrapper, className, {\n          [styles.withEllipsis]: useEllipsis\n        })}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TEXT_WITH_HIGHLIGHT, id)}\n      >\n        {textWithHighlights}\n      </div>\n    );\n\n    if (isOverflowing || nonEllipsisTooltip) {\n      const tooltipContent = isOverflowing ? text : nonEllipsisTooltip;\n      return (\n        <Tooltip content={tooltipContent} {...tooltipProps}>\n          {Element}\n        </Tooltip>\n      );\n    }\n    return Element;\n  }\n);\n\nexport default TextWithHighlight;\n\nfunction escapeRegExp(string: string) {\n  return string.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n}\n"
  },
  {
    "path": "packages/core/src/components/TextWithHighlight/__tests__/TextWithHighlight.test.tsx",
    "content": "import { it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport TextWithHighlight from \"../TextWithHighlight\";\n\nit(\"renders correctly with empty props\", () => {\n  const tree = renderer.create(<TextWithHighlight />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "packages/core/src/components/TextWithHighlight/__tests__/__snapshots__/TextWithHighlight.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`renders correctly with empty props 1`] = `\n<div\n  className=\"textWithHighlightWrapper withEllipsis\"\n  data-testid=\"text-with-highlight\"\n>\n  \n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/TextWithHighlight/index.ts",
    "content": "export { default as TextWithHighlight, type TextWithHighlightProps } from \"./TextWithHighlight\";\n"
  },
  {
    "path": "packages/core/src/components/ThemeProvider/ThemeProvider.tsx",
    "content": "import cx from \"classnames\";\nimport React, { type ReactElement, useEffect, useMemo, useState } from \"react\";\nimport { type Theme } from \"./ThemeProviderConstants\";\nimport { type SystemTheme } from \"./ThemeProvider.types\";\nimport {\n  addSystemThemeClassNameToBody,\n  generateRandomAlphaString,\n  generateThemeCssOverride,\n  isAnySystemThemeClassNameOnBody,\n  removeSystemThemeClassNameFromBody,\n  shouldGenerateTheme\n} from \"./ThemeProviderUtils\";\nimport { useIsomorphicLayoutEffect } from \"@vibe/shared\";\nexport interface ThemeProviderProps {\n  /**\n   * The theme configuration to apply. It consists of a `name` (a unique CSS class name added to the children)\n   * and an object of color overrides for each system theme.\n   */\n  themeConfig?: Theme;\n  /**\n   * The children to be rendered with the applied theme.\n   */\n  children: ReactElement;\n  /**\n   * A string added to the theme name selector to make it more specific, in case `themeConfig.name`\n   * collides with another class name.\n   */\n  themeClassSpecifier?: string;\n  /**\n   * The system theme to apply to the `body` element on mount,\n   * if there is no system theme class name on the body already.\n   */\n  systemTheme?: SystemTheme;\n  /**\n   * Class name applied to the wrapping `div`.\n   */\n  className?: string;\n}\n\nconst ThemeProvider = ({\n  themeConfig,\n  children,\n  themeClassSpecifier: customThemeClassSpecifier,\n  systemTheme,\n  className\n}: ThemeProviderProps) => {\n  const [stylesLoaded, setStylesLoaded] = useState(false);\n  const themeClassSpecifier = useMemo(\n    () => customThemeClassSpecifier || generateRandomAlphaString(),\n    [customThemeClassSpecifier]\n  );\n\n  // Add the systemTheme class name to the body on mount\n  useIsomorphicLayoutEffect(() => {\n    if (!systemTheme) {\n      return;\n    }\n\n    if (isAnySystemThemeClassNameOnBody()) {\n      // If there is already a systemTheme class name on the body, we don't want to override it\n      return;\n    }\n\n    addSystemThemeClassNameToBody(systemTheme);\n\n    return () => {\n      // Cleanup the systemTheme class name from the body on ThemeProvider unmount\n      removeSystemThemeClassNameFromBody(systemTheme);\n    };\n  }, [systemTheme]);\n\n  useEffect(() => {\n    if (!shouldGenerateTheme(themeConfig)) {\n      return;\n    }\n    if (document.getElementById(themeConfig.name)) {\n      setStylesLoaded(true);\n      return;\n    }\n\n    const styleElement = document.createElement(\"style\");\n    styleElement.type = \"text/css\";\n    styleElement.id = themeConfig.name;\n    const themeCssOverride = generateThemeCssOverride(themeConfig, themeClassSpecifier);\n\n    try {\n      styleElement.appendChild(document.createTextNode(themeCssOverride));\n      document.head.appendChild(styleElement);\n      setStylesLoaded(true);\n    } catch (error) {\n      console.error(\"vibe ThemeProvider: error inserting theme-generated css - \", error);\n    }\n\n    return () => {\n      document.head.removeChild(styleElement);\n    };\n  }, [themeClassSpecifier, themeConfig]);\n\n  if (!stylesLoaded && shouldGenerateTheme(themeConfig)) {\n    // Waiting for styles to load before children render\n    return null;\n  }\n\n  // Pass the theme name as a class to the div wrapping children - to scope the effect of the theme\n  return <div className={cx(themeConfig?.name, themeClassSpecifier, className)}>{children}</div>;\n};\n\nexport default ThemeProvider;\n"
  },
  {
    "path": "packages/core/src/components/ThemeProvider/ThemeProvider.types.ts",
    "content": "export type SystemTheme = \"light\" | \"dark\" | \"black\";\n\n/**\n * Colors which are eligible for theming\n */\nexport type ThemeColor =\n  | \"primary-color\"\n  | \"primary-hover-color\"\n  | \"primary-selected-color\"\n  | \"primary-selected-hover-color\"\n  | \"primary-selected-on-secondary-color\"\n  | \"text-color-on-primary\"\n  | \"brand-color\"\n  | \"brand-hover-color\"\n  | \"brand-selected-color\"\n  | \"brand-selected-hover-color\"\n  | \"text-color-on-brand\";\n"
  },
  {
    "path": "packages/core/src/components/ThemeProvider/ThemeProviderConstants.ts",
    "content": "import { type SystemTheme, type ThemeColor } from \"./ThemeProvider.types\";\n\nexport type Theme = {\n  /**\n   * The name of the theme - name of css class that will be added to the children - should be unique\n   */\n  name: string;\n  colors: SystemThemeColorMap;\n};\n\ntype SystemThemeColorMap = {\n  [key in SystemTheme]?: ThemeColorTokenValueMap;\n};\n\nexport type ThemeColorTokenValueMap = ThemeColorTokenValue | ThemeCustomClassValue;\n\nexport type ThemeColorTokenValue = {\n  [key in ThemeColor]?: string;\n};\n\ntype ThemeCustomClassValue = {\n  [key: string]: ThemeColorTokenValue | ThemeCustomClassValue;\n};\n\nexport const SystemThemeClassMap: SystemThemeClassMapType = {\n  light: \"light-app-theme\",\n  dark: \"dark-app-theme\",\n  black: \"black-app-theme\"\n};\n\ntype SystemThemeClassMapType = {\n  [key in SystemTheme]: string;\n};\n"
  },
  {
    "path": "packages/core/src/components/ThemeProvider/ThemeProviderUtils.ts",
    "content": "import { type Theme, type ThemeColorTokenValueMap, SystemThemeClassMap } from \"./ThemeProviderConstants\";\nimport { type SystemTheme } from \"./ThemeProvider.types\";\n\nconst generateCss = (object: ThemeColorTokenValueMap, stack: string, parentSelector: string) => {\n  for (const key of Object.keys(object)) {\n    if (typeof object[key as keyof ThemeColorTokenValueMap] === \"string\") {\n      stack += `--${key}: ${object[key as keyof ThemeColorTokenValueMap]};`;\n    }\n  }\n\n  if (stack !== \"\") {\n    stack = parentSelector + \" {\" + stack + \"}\";\n  }\n\n  for (const key of Object.keys(object)) {\n    if (typeof object[key as keyof ThemeColorTokenValueMap] === \"object\") {\n      const selector = `${parentSelector} .${key}`;\n      stack +=\n        \"\\n\" + generateCss(object[key as keyof ThemeColorTokenValueMap] as ThemeColorTokenValueMap, \"\", selector);\n    }\n  }\n\n  return stack;\n};\n\nexport const shouldGenerateTheme = (themeConfig: Theme) => {\n  return !!themeConfig?.colors && !!themeConfig?.name;\n};\n\nexport const generateThemeCssOverride = (themeConfig: Theme, themeClassSpecifier: string) => {\n  if (!shouldGenerateTheme(themeConfig)) {\n    return null;\n  }\n\n  let css = \"\";\n  for (const systemTheme of Object.keys(themeConfig.colors) as SystemTheme[]) {\n    css +=\n      generateCss(\n        themeConfig.colors[systemTheme],\n        \"\",\n        `.${SystemThemeClassMap[systemTheme]} .${themeClassSpecifier}.${themeConfig.name}`\n      ) + \"\\n\";\n  }\n\n  return css;\n};\n\nexport const generateRandomAlphaString = (length = 6) => {\n  let result = \"\";\n  const characters = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz\";\n\n  for (let i = 0; i < length; i++) {\n    result += characters.charAt(Math.floor(Math.random() * characters.length));\n  }\n\n  return result;\n};\n\nconst APP_THEME_SUFFIX = \"-app-theme\";\n\nconst isAppThemeClassName = (className: string) => {\n  return className.endsWith(APP_THEME_SUFFIX);\n};\n\nexport const addAppThemeSuffix = (systemTheme: SystemTheme) => {\n  return `${systemTheme}${APP_THEME_SUFFIX}`;\n};\n\nexport const getBodySystemThemeClassName = () => {\n  const classList = document.body.classList;\n  for (const className of Array.from(classList)) {\n    if (isAppThemeClassName(className)) {\n      return className;\n    }\n  }\n  return null;\n};\n\nexport const isAnySystemThemeClassNameOnBody = () => {\n  const bodySystemThemeClassName = getBodySystemThemeClassName();\n  return !!bodySystemThemeClassName;\n};\n\nexport const addSystemThemeClassNameToBody = (systemTheme: SystemTheme) => {\n  document.body.classList.add(addAppThemeSuffix(systemTheme));\n};\n\nexport const removeSystemThemeClassNameFromBody = (systemTheme: SystemTheme) => {\n  document.body.classList.remove(addAppThemeSuffix(systemTheme));\n};\n"
  },
  {
    "path": "packages/core/src/components/ThemeProvider/__tests__/ThemeProvider.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport { generateThemeCssOverride } from \"../ThemeProviderUtils\";\nimport { render } from \"@testing-library/react\";\nimport React from \"react\";\nimport { ThemeProvider, Button, Flex } from \"../../index\";\n\nconst THEME_NAME = \"test-theme-name\";\nconst ADDITIONAL_STRING_SELECTOR = \"test-random-string-selector\";\n\ndescribe(\"ThemeProvider tests\", () => {\n  it(\"renders children correctly\", () => {\n    const themeConfig = {\n      name: THEME_NAME\n    };\n    const { getByTestId } = render(\n      <ThemeProvider themeConfig={themeConfig} themeClassSpecifier={ADDITIONAL_STRING_SELECTOR}>\n        <Flex data-testid={\"container\"}>\n          <Button data-testid={\"button\"} />\n        </Flex>\n      </ThemeProvider>\n    );\n\n    const container = getByTestId(\"container\");\n    const button = getByTestId(\"button\");\n    expect(container).toBeInTheDocument();\n    expect(container.parentElement).toHaveClass(themeConfig.name);\n    expect(button).toBeInTheDocument();\n  });\n\n  it(\"renders children correctly with empty theme\", () => {\n    const themeConfig = null;\n    const { getByTestId } = render(\n      <ThemeProvider themeConfig={themeConfig} themeClassSpecifier={ADDITIONAL_STRING_SELECTOR}>\n        <Flex data-testid={\"container\"}>\n          <Button data-testid={\"button\"} />\n        </Flex>\n      </ThemeProvider>\n    );\n\n    const container = getByTestId(\"container\");\n    const button = getByTestId(\"button\");\n    expect(container).toBeInTheDocument();\n    expect(button).toBeInTheDocument();\n  });\n\n  describe(\"ThemeProviderUtils tests\", () => {\n    it(\"theme with no colors\", () => {\n      const themeConfig = {\n        name: THEME_NAME\n      };\n      const css = generateThemeCssOverride(themeConfig, ADDITIONAL_STRING_SELECTOR);\n      expect(css).toBeNull();\n    });\n\n    it(\"theme with empty colors\", () => {\n      const themeConfig = {\n        name: THEME_NAME,\n        colors: {}\n      };\n      const css = generateThemeCssOverride(themeConfig, ADDITIONAL_STRING_SELECTOR);\n      expect(css).toBe(\"\");\n    });\n\n    it(\"theme with only one override\", () => {\n      const themeConfig = {\n        name: THEME_NAME,\n        colors: {\n          light: {\n            \"primary-color\": \"#d14900\"\n          }\n        }\n      };\n      const css = generateThemeCssOverride(themeConfig, ADDITIONAL_STRING_SELECTOR);\n      expect(css).toBe(`.light-app-theme .${ADDITIONAL_STRING_SELECTOR}.${themeConfig.name} {--primary-color: #d14900;}\n`);\n    });\n\n    it(\"basic theme\", () => {\n      const themeConfig = {\n        name: THEME_NAME,\n        colors: {\n          light: {\n            \"primary-color\": \"#d14900\",\n            \"primary-hover-color\": \"#ad4005\",\n            \"primary-selected-color\": \"#f8dccf\",\n            \"primary-selected-hover-color\": \"#f1d3c4\"\n          },\n          dark: {\n            \"primary-color\": \"#d14901\",\n            \"primary-hover-color\": \"#ad4006\",\n            \"primary-selected-color\": \"#6d2702\",\n            \"primary-selected-hover-color\": \"#491b03\"\n          },\n          black: {\n            \"primary-color\": \"#d14902\",\n            \"primary-hover-color\": \"#ad4007\",\n            \"primary-selected-color\": \"#6d2703\",\n            \"primary-selected-hover-color\": \"#491b04\"\n          }\n        }\n      };\n      const css = generateThemeCssOverride(themeConfig, ADDITIONAL_STRING_SELECTOR);\n      expect(css).toBe(\n        `.light-app-theme .${ADDITIONAL_STRING_SELECTOR}.${themeConfig.name} {--primary-color: #d14900;--primary-hover-color: #ad4005;--primary-selected-color: #f8dccf;--primary-selected-hover-color: #f1d3c4;}\\n` +\n          `.dark-app-theme .${ADDITIONAL_STRING_SELECTOR}.${themeConfig.name} {--primary-color: #d14901;--primary-hover-color: #ad4006;--primary-selected-color: #6d2702;--primary-selected-hover-color: #491b03;}\\n` +\n          `.black-app-theme .${ADDITIONAL_STRING_SELECTOR}.${themeConfig.name} {--primary-color: #d14902;--primary-hover-color: #ad4007;--primary-selected-color: #6d2703;--primary-selected-hover-color: #491b04;}\\n`\n      );\n    });\n\n    it(\"theme with custom classes and variables\", () => {\n      const themeConfig = {\n        name: THEME_NAME,\n        colors: {\n          light: {\n            \"primary-color\": \"#d14900\",\n            \"brand-colors\": {\n              \"brand-color\": \"#ad4005\",\n              \"custom-class\": {\n                \"custom-value-override\": \"#da1234\"\n              }\n            }\n          }\n        }\n      };\n      const css = generateThemeCssOverride(themeConfig, ADDITIONAL_STRING_SELECTOR);\n      expect(css).toBe(\n        `.light-app-theme .${ADDITIONAL_STRING_SELECTOR}.${themeConfig.name} {--primary-color: #d14900;}\\n` +\n          `.light-app-theme .${ADDITIONAL_STRING_SELECTOR}.${themeConfig.name} .brand-colors {--brand-color: #ad4005;}\\n` +\n          `.light-app-theme .${ADDITIONAL_STRING_SELECTOR}.${themeConfig.name} .brand-colors .custom-class {--custom-value-override: #da1234;}\\n`\n      );\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/ThemeProvider/index.ts",
    "content": "export { default as ThemeProvider, type ThemeProviderProps } from \"./ThemeProvider\";\n\nexport * from \"./ThemeProvider.types\";\n"
  },
  {
    "path": "packages/core/src/components/Tipseen/Tipseen.module.scss",
    "content": "@import \"../../styles/typography\";\n\n.tipseenWrapper {\n  min-width: 100px;\n  min-height: 40px;\n  --tooltip-padding: 0;\n  --tooltip-border-radius: var(--border-radius-medium);\n  --tooltip-max-width: initial;\n\n  &.tipseenWrapperWithoutCustomWidth {\n    --tooltip-max-width: 320px;\n  }\n\n  &.floating {\n    position: fixed;\n    bottom: 0;\n    inset-inline-end: 0;\n    margin-bottom: var(--space-16);\n    margin-inline-end: var(--space-16);\n  }\n\n  .tipseen {\n    &Header {\n      display: flex;\n      justify-content: flex-start;\n    }\n\n    &Title {\n      padding: var(--space-16) var(--space-32) 0 var(--space-16);\n    }\n\n    &Content {\n      margin: 0;\n      @include smoothing-text;\n    }\n\n    &CloseButton {\n      position: absolute;\n      top: var(--space-8);\n      inset-inline-end: var(--space-8);\n      z-index: 2;\n\n      &.dark {\n        color: var(--color-asphalt);\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Tipseen/Tipseen.tsx",
    "content": "import { forwardRef, Fragment, type ReactElement, useEffect, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { type DialogAnimationType, type DialogMiddleware, type DialogTriggerEvent } from \"@vibe/dialog\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { IconButton } from \"@vibe/icon-button\";\nimport { CloseSmall } from \"@vibe/icons\";\nimport TipseenTitle from \"./TipseenTitle\";\nimport { TIPSEEN_CLOSE_BUTTON_ARIA_LABEL } from \"./TipseenConstants\";\nimport { type TipseenCloseButtonTheme, type TipseenColor } from \"./Tipseen.types\";\nimport { type ElementContent, type VibeComponentProps } from \"../../types\";\nimport { type MoveBy } from \"../../types/MoveBy\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { Text } from \"@vibe/typography\";\nimport styles from \"./Tipseen.module.scss\";\nimport React from \"react\";\nimport { type TooltipPositions } from \"@vibe/tooltip\";\n\nexport interface TipseenProps extends VibeComponentProps {\n  /**\n   * Class name applied to the Tipseen title.\n   */\n  titleClassName?: string;\n  /**\n   * The position of the Tipseen relative to the target element.\n   */\n  position?: TooltipPositions;\n  /**\n   * The animation type used for showing/hiding the Tipseen.\n   */\n  animationType?: DialogAnimationType;\n  /**\n   * The delay in milliseconds before hiding the Tipseen.\n   */\n  hideDelay?: number;\n  /**\n   * The delay in milliseconds before showing the Tipseen.\n   */\n  showDelay?: number;\n  /**\n   * The title text of the Tipseen.\n   */\n  title?: string;\n  /**\n   * If true, hides the close button.\n   */\n  hideCloseButton?: boolean;\n  /**\n   * The child element that triggers the Tipseen.\n   */\n  children?: ReactElement;\n  /**\n   * The CSS selector of the container where the Tipseen should be rendered.\n   */\n  containerSelector?: string;\n  /**\n   * Events that trigger hiding the Tipseen.\n   */\n  hideTrigger?: DialogTriggerEvent | Array<DialogTriggerEvent>;\n  /**\n   * Events that trigger showing the Tipseen.\n   */\n  showTrigger?: DialogTriggerEvent | Array<DialogTriggerEvent>;\n  /**\n   * The width of the Tipseen.\n   */\n  width?: number;\n  /**\n   * Offset values for positioning adjustments.\n   */\n  moveBy?: MoveBy;\n  /**\n   * If true, hides the Tipseen when the reference element is hidden.\n   */\n  hideWhenReferenceHidden?: boolean;\n  /**\n   * Custom Floating UI middleware for positioning logic.\n   * @see https://floating-ui.com/docs/middleware\n   */\n  middleware?: DialogMiddleware[];\n  /**\n   * Class name applied to the reference wrapper element.\n   */\n  referenceWrapperClassName?: string;\n  /**\n   * If false, hides the arrow of the Tipseen.\n   */\n  tip?: boolean;\n  /**\n   * Class name applied to the Tipseen arrow.\n   */\n  tooltipArrowClassName?: string;\n  /**\n   * The aria-label for the close button.\n   */\n  closeAriaLabel?: string;\n  /**\n   * Callback fired when the Tipseen is closed.\n   */\n  onClose?: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * The content displayed inside the Tipseen.\n   */\n  content: ElementContent;\n  /**\n   * The theme of the Tipseen close button.\n   */\n  closeButtonTheme?: TipseenCloseButtonTheme;\n  /**\n   * If true, renders the Tipseen as a floating element without a reference.\n   */\n  floating?: boolean;\n  /**\n   * The color theme of the Tipseen.\n   */\n  color?: TipseenColor;\n}\n\nexport const TipseenContext = React.createContext<TipseenColor>(\"primary\");\n\nconst Tipseen = forwardRef(\n  (\n    {\n      className,\n      id,\n      position = \"bottom\",\n      animationType = \"expand\",\n      hideDelay = 0,\n      showDelay = 100,\n      title,\n      titleClassName,\n      hideCloseButton,\n      closeButtonTheme = \"light\",\n      onClose,\n      closeAriaLabel,\n      children = null,\n      content,\n      containerSelector,\n      hideTrigger = [],\n      showTrigger = [],\n      width,\n      moveBy,\n      hideWhenReferenceHidden = false,\n      middleware,\n      referenceWrapperClassName,\n      tip = true,\n      tooltipArrowClassName,\n      floating = false,\n      color: colorProp,\n      \"data-testid\": dataTestId\n    }: TipseenProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const color = colorProp ?? \"inverted\";\n\n    const defaultDelayOpen =\n      Array.isArray(showTrigger) && Array.isArray(hideTrigger) && showTrigger.length === 0 && showDelay > 0;\n\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n    const [delayedOpen, setDelayOpen] = useState(!defaultDelayOpen);\n    const overrideCloseAriaLabel = closeAriaLabel || TIPSEEN_CLOSE_BUTTON_ARIA_LABEL;\n\n    useEffect(() => {\n      let timeout: NodeJS.Timeout;\n      if (showDelay) {\n        timeout = setTimeout(() => {\n          setDelayOpen(true);\n        }, showDelay);\n      }\n      return () => {\n        clearTimeout(timeout);\n      };\n    }, [showDelay, setDelayOpen]);\n\n    const textColor = useMemo(() => {\n      return color === \"inverted\" ? \"onInverted\" : \"onPrimary\";\n    }, [color]);\n    const closeButtonColor = useMemo(() => {\n      if (closeButtonTheme === \"light\") {\n        return color === \"inverted\" ? \"on-inverted-background\" : \"on-primary-color\";\n      } else {\n        return closeButtonTheme;\n      }\n    }, [color, closeButtonTheme]);\n\n    const TipseenWrapper = ref || id ? \"div\" : Fragment;\n    const wrapperProps =\n      TipseenWrapper === \"div\"\n        ? { ref: mergedRef, id, \"data-testid\": dataTestId || getTestId(ComponentDefaultTestId.TIPSEEN, id) }\n        : {};\n\n    const tooltipContent = (\n      <div>\n        <div className={cx(styles.tipseenHeader)}>\n          {hideCloseButton ? null : (\n            <IconButton\n              hideTooltip\n              className={cx(styles.tipseenCloseButton, {\n                [styles.dark]: closeButtonTheme === \"dark\" || closeButtonTheme === \"fixed-dark\"\n              })}\n              onClick={onClose}\n              size=\"xs\"\n              kind=\"tertiary\"\n              // @ts-ignore\n              color={closeButtonColor}\n              aria-label={overrideCloseAriaLabel}\n              icon={CloseSmall}\n            />\n          )}\n          <TipseenTitle text={title} className={cx(styles.tipseenTitle, titleClassName)} />\n        </div>\n        <Text color={textColor} type=\"text2\" element=\"div\" ellipsis={false} className={cx(styles.tipseenContent)}>\n          <TipseenContext.Provider value={color}>{content}</TipseenContext.Provider>\n        </Text>\n      </div>\n    );\n\n    return (\n      <TipseenWrapper {...wrapperProps}>\n        <Tooltip\n          className={cx(styles.tipseenWrapper, className, {\n            [styles.tipseenWrapperWithoutCustomWidth]: !width,\n            [styles.floating]: floating\n          })}\n          maxWidth={width}\n          arrowClassName={tooltipArrowClassName}\n          style={width ? { width } : undefined}\n          shouldShowOnMount={!defaultDelayOpen}\n          position={position}\n          animationType={animationType}\n          hideDelay={hideDelay}\n          showDelay={0}\n          hideTrigger={hideTrigger}\n          showTrigger={showTrigger}\n          showOnDialogEnter={false}\n          content={tooltipContent}\n          theme={color === \"inverted\" ? \"dark\" : \"primary\"}\n          containerSelector={containerSelector}\n          disableDialogSlide={false}\n          moveBy={moveBy}\n          hideWhenReferenceHidden={hideWhenReferenceHidden}\n          middleware={middleware}\n          referenceWrapperClassName={referenceWrapperClassName}\n          tip={tip && !floating}\n          open={defaultDelayOpen ? delayedOpen : undefined}\n          forceRenderWithoutChildren={floating}\n        >\n          {children}\n        </Tooltip>\n      </TipseenWrapper>\n    );\n  }\n);\n\nexport default Tipseen;\n"
  },
  {
    "path": "packages/core/src/components/Tipseen/Tipseen.types.ts",
    "content": "export type TipseenCloseButtonTheme = \"light\" | \"dark\" | \"fixed-light\" | \"fixed-dark\";\n\nexport type TipseenColor = \"primary\" | \"inverted\";\n"
  },
  {
    "path": "packages/core/src/components/Tipseen/TipseenBasicContent.module.scss",
    "content": "@mixin tipseen-content-padding {\n  padding: var(--space-16) 20px var(--space-24) 20px;\n\n  // this is because the designer wanted the padding top\n  // to be 12px in case the tipseen have both content and image\n  &:not(:first-child) {\n    padding-top: 12px;\n  }\n}\n\n.tipseenBasicContent {\n  @include tipseen-content-padding;\n  display: flex;\n  flex-direction: column;\n\n}\n\n"
  },
  {
    "path": "packages/core/src/components/Tipseen/TipseenBasicContent.tsx",
    "content": "import React from \"react\";\nimport cx from \"classnames\";\nimport TipseenTitle from \"./TipseenTitle\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { type ElementContent } from \"../../types/ElementContent\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./TipseenBasicContent.module.scss\";\n\nexport interface TipseenBasicContentProps extends VibeComponentProps {\n  /**\n   * The title text displayed in the Tipseen content.\n   */\n  title?: string;\n  /**\n   * Class name applied to the title.\n   */\n  titleClassName?: string;\n  /**\n   * The content inside the Tipseen.\n   */\n  children?: ElementContent | ElementContent[];\n}\n\nconst TipseenBasicContent: React.FC<TipseenBasicContentProps> = ({\n  title,\n  children = null,\n  titleClassName,\n  className,\n  id,\n  \"data-testid\": dataTestId\n}) => {\n  return (\n    <div\n      className={cx(styles.tipseenBasicContent, className)}\n      id={id}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.TIPSEEN_CONTENT, id)}\n    >\n      <TipseenTitle text={title} className={titleClassName} />\n      {children}\n    </div>\n  );\n};\n\nexport default TipseenBasicContent;\n"
  },
  {
    "path": "packages/core/src/components/Tipseen/TipseenConstants.ts",
    "content": "export const SUBMIT_BUTTON_TEXT = \"Submit\";\nexport const DISMISS_BUTTON_TEXT = \"Dismiss\";\nexport const TIPSEEN_CLOSE_BUTTON_TEST_ID = \"close-tipseen\";\nexport const TIPSEEN_CLOSE_BUTTON_ARIA_LABEL = \"Close\";\n"
  },
  {
    "path": "packages/core/src/components/Tipseen/TipseenContent.module.scss",
    "content": ".buttons {\n  margin-top: 20px;\n  display: flex;\n  justify-content: flex-end;\n}\n\n.dismiss {\n  margin-inline-end: var(--space-8)\n}"
  },
  {
    "path": "packages/core/src/components/Tipseen/TipseenContent.tsx",
    "content": "import React, { type FC, useContext, useMemo } from \"react\";\nimport cx from \"classnames\";\nimport { DISMISS_BUTTON_TEXT, SUBMIT_BUTTON_TEXT } from \"./TipseenConstants\";\nimport TipseenBasicContent from \"./TipseenBasicContent\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { type ElementContent } from \"../../types/ElementContent\";\nimport styles from \"./TipseenContent.module.scss\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\nimport { TipseenContext } from \"./Tipseen\";\nimport { Button } from \"@vibe/button\";\nimport { type SubIcon } from \"@vibe/icon\";\n\nexport interface TipseenContentProps extends VibeComponentProps {\n  /**\n   * The title text displayed in the Tipseen content.\n   */\n  title?: string;\n  /**\n   * Class name applied to the Tipseen title.\n   */\n  titleClassName?: string;\n  /**\n   * If true, hides the dismiss button.\n   */\n  hideDismiss?: boolean;\n  /**\n   * The content inside the Tipseen.\n   */\n  children?: ElementContent;\n  /**\n   * If true, hides the submit button.\n   */\n  hideSubmit?: boolean;\n  /**\n   * The text displayed on the submit button.\n   */\n  submitButtonText?: string;\n  /**\n   * Icon to display in the submit button\n   */\n  submitButtonIcon?: SubIcon;\n  /**\n   * Callback fired when the submit button is clicked.\n   */\n  onSubmit?: (event: React.MouseEvent) => void;\n  /**\n   * The text displayed on the dismiss button.\n   */\n  dismissButtonText?: string;\n  /**\n   * Callback fired when the dismiss button is clicked.\n   */\n  onDismiss?: (event: React.MouseEvent) => void;\n}\n\nconst TipseenContent: FC<TipseenContentProps> = ({\n  id,\n  title,\n  titleClassName,\n  children = null,\n  hideDismiss = true,\n  hideSubmit,\n  submitButtonText = SUBMIT_BUTTON_TEXT,\n  submitButtonIcon,\n  onSubmit,\n  dismissButtonText = DISMISS_BUTTON_TEXT,\n  onDismiss\n}) => {\n  const color = useContext(TipseenContext);\n  const buttonColor = useMemo(() => {\n    return color === \"inverted\" ? \"on-inverted-background\" : \"on-primary-color\";\n  }, [color]);\n\n  const showButtons = !hideDismiss || !hideSubmit;\n\n  return (\n    <TipseenBasicContent title={title} titleClassName={titleClassName} id={id}>\n      {children ? <span>{children}</span> : null}\n      {showButtons && (\n        <div className={cx(styles.buttons)}>\n          {hideDismiss ? null : (\n            <Button\n              kind=\"tertiary\"\n              color={buttonColor}\n              className={styles.dismiss}\n              size=\"small\"\n              onClick={onDismiss}\n              data-testid={getTestId(ComponentDefaultTestId.TIPSEEN_CONTENT_DISMISS)}\n            >\n              {dismissButtonText}\n            </Button>\n          )}\n          {hideSubmit ? null : (\n            <Button\n              kind=\"primary\"\n              color={buttonColor}\n              size=\"small\"\n              onClick={onSubmit}\n              data-testid={getTestId(ComponentDefaultTestId.TIPSEEN_CONTENT_SUBMIT)}\n              leftIcon={submitButtonIcon}\n            >\n              {submitButtonText}\n            </Button>\n          )}\n        </div>\n      )}\n    </TipseenBasicContent>\n  );\n};\n\nexport default TipseenContent;\n"
  },
  {
    "path": "packages/core/src/components/Tipseen/TipseenMedia/TipseenMedia.module.scss",
    "content": ".tipseenMedia {\n  width: 100%;\n  overflow: hidden;\n  display: flex;\n  border: 2px solid var(--primary-color);\n  border-radius: var(--border-radius-medium);\n  position: relative;\n  z-index: 1;\n}\n\n.colorInverted {\n  border-color: var(--inverted-color-background);\n}"
  },
  {
    "path": "packages/core/src/components/Tipseen/TipseenMedia/TipseenMedia.tsx",
    "content": "import React, { forwardRef, type PropsWithChildren, type ReactNode, useContext, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { useMergeRef, getStyle } from \"@vibe/shared\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport styles from \"./TipseenMedia.module.scss\";\nimport { TipseenContext } from \"../Tipseen\";\n\nimport { camelCase } from \"es-toolkit\";\n\nexport interface TipseenMediaProps extends PropsWithChildren<VibeComponentProps> {\n  /**\n   * The media content displayed inside the Tipseen.\n   */\n  children: ReactNode;\n}\n\nconst TipseenMedia = forwardRef(\n  ({ className, id, \"data-testid\": dataTestId, children }: TipseenMediaProps, ref: React.ForwardedRef<HTMLElement>) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n    const color = useContext(TipseenContext);\n\n    const classNames = useMemo(() => {\n      return cx(styles.tipseenMedia, getStyle(styles, camelCase(\"color-\" + color)), className);\n    }, [color, className]);\n\n    return (\n      <div\n        ref={mergedRef}\n        className={classNames}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TIPSEEN_MEDIA, id)}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nexport default TipseenMedia;\n"
  },
  {
    "path": "packages/core/src/components/Tipseen/TipseenTitle.module.scss",
    "content": ".title {\n  padding-inline-end: var(--space-16);\n  padding-bottom: var(--space-4);\n}\n"
  },
  {
    "path": "packages/core/src/components/Tipseen/TipseenTitle.tsx",
    "content": "import React, { type FC } from \"react\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\nimport { Text } from \"@vibe/typography\";\nimport cx from \"classnames\";\nimport styles from \"./TipseenTitle.module.scss\";\n\nexport interface TipseenTitleProps extends VibeComponentProps {\n  /**\n   * The title text displayed in the Tipseen.\n   */\n  text?: string;\n}\n\nconst TipseenTitle: FC<TipseenTitleProps> = ({ text, className, id, \"data-testid\": dataTestId }) => {\n  return text ? (\n    <Text\n      type=\"text1\"\n      weight=\"bold\"\n      role=\"heading\"\n      color=\"inherit\"\n      aria-level={3}\n      maxLines={2}\n      className={cx(styles.title, className)}\n      id={id}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.TIPSEEN_TITLE, id)}\n    >\n      {text}\n    </Text>\n  ) : null;\n};\n\nexport default TipseenTitle;\n"
  },
  {
    "path": "packages/core/src/components/Tipseen/TipseenWizard.module.scss",
    "content": ".tipseenWizard {\n  display: flex;\n  flex-direction: column;\n\n  &Wizard {\n    width: 100%;\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Tipseen/TipseenWizard.tsx",
    "content": "import React, { type FC, useContext, useMemo } from \"react\";\nimport cx from \"classnames\";\nimport Steps, { type StepsProps } from \"../Steps/Steps\";\nimport TipseenBasicContent from \"./TipseenBasicContent\";\nimport styles from \"./TipseenWizard.module.scss\";\nimport { TipseenContext } from \"./Tipseen\";\nimport { type ButtonSize, type ButtonType } from \"@vibe/button\";\n\nconst FINISH_TEXT = \"Got it\";\n\nexport interface TipseenWizardProps extends StepsProps {\n  /**\n   * The title text displayed in the Tipseen Wizard.\n   */\n  title?: string;\n  /**\n   * Class name applied to the Tipseen title.\n   */\n  titleClassName?: string;\n  /**\n   * Callback fired when the wizard is completed.\n   */\n  onFinish?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n}\n\nconst TipseenWizard: FC<TipseenWizardProps> = ({ id, title, onFinish, titleClassName, className, ...stepsProps }) => {\n  const overrideStepsProps = stepsProps as StepsProps;\n  const color = useContext(TipseenContext);\n  const buttonColor = useMemo(() => {\n    return color === \"inverted\" ? \"on-inverted-background\" : \"on-primary-color\";\n  }, [color]);\n\n  const nextButtonProps = useMemo(\n    () => ({\n      kind: \"primary\" as ButtonType,\n      size: \"small\" as ButtonSize\n    }),\n    []\n  );\n  const backButtonProps = useMemo(\n    () => ({\n      size: \"small\" as ButtonSize\n    }),\n    []\n  );\n  const finishButtonProps = useMemo(\n    () => ({\n      kind: \"primary\" as ButtonType,\n      size: \"small\" as ButtonSize,\n      children: FINISH_TEXT\n    }),\n    []\n  );\n  return (\n    <TipseenBasicContent\n      title={title}\n      className={cx(styles.tipseenWizard, className)}\n      titleClassName={titleClassName}\n      id={id || \"wizard\"}\n    >\n      <Steps\n        className={cx(styles.tipseenWizardWizard)}\n        color={buttonColor}\n        isContentOnTop\n        areButtonsIconsHidden\n        backButtonProps={backButtonProps}\n        nextButtonProps={nextButtonProps}\n        finishButtonProps={finishButtonProps}\n        onFinish={onFinish}\n        {...overrideStepsProps}\n      />\n    </TipseenBasicContent>\n  );\n};\nexport default TipseenWizard;\n"
  },
  {
    "path": "packages/core/src/components/Tipseen/__tests__/Tipseen.test.tsx",
    "content": "import { vi, describe, it, expect, beforeEach, afterEach } from \"vitest\";\nimport React from \"react\";\nimport { fireEvent, render, waitFor } from \"@testing-library/react\";\nimport { act } from \"@testing-library/react-hooks\";\nimport TipseenContent from \"../TipseenContent\";\nimport Tipseen from \"../Tipseen\";\nimport { DISMISS_BUTTON_TEXT, SUBMIT_BUTTON_TEXT } from \"../TipseenConstants\";\nimport renderer from \"react-test-renderer\";\nimport TipseenTitle from \"../TipseenTitle\";\n\nconst tipseenMockChildren = <div className=\"monday-storybook-tipseen_container\" />;\n\ndescribe(\"Snapshot tests\", () => {\n  beforeEach(() => {\n    vi.useFakeTimers();\n  });\n\n  afterEach(() => {\n    vi.useRealTimers();\n  });\n\n  describe(\"TipseenTitle\", () => {\n    it(\"should render null without text\", () => {\n      const tree = renderer.create(<TipseenTitle />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n\n    it(\"should render correctly with given text\", () => {\n      const tree = renderer.create(<TipseenTitle text=\"I'm a title\" />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n  });\n\n  describe(\"Tipseen content tests\", () => {\n    it(\"renders correctly without props\", () => {\n      const { asFragment } = render(<TipseenContent />);\n      expect(asFragment()).toMatchSnapshot();\n    });\n    it(\"renders correctly with dismiss\", () => {\n      const tree = renderer.create(<TipseenContent hideDismiss={false} />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n    it(\"renders correctly without submit\", () => {\n      const tree = renderer.create(<TipseenContent hideSubmit />).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n  });\n\n  describe(\"Tipseen tests\", () => {\n    it(\"renders correctly without p\" + \"rops\", () => {\n      const tree = renderer.create(<Tipseen content=\"content\">{tipseenMockChildren}</Tipseen>).toJSON();\n      expect(tree).toMatchSnapshot();\n    });\n    it(\"renders correctly without close\", () => {\n      const { asFragment } = render(\n        <Tipseen content=\"content\" showDelay={0} hideCloseButton>\n          {tipseenMockChildren}\n        </Tipseen>\n      );\n      expect(asFragment()).toMatchSnapshot();\n    });\n    it(\"renders correctly with dark close button theme\", async () => {\n      const { asFragment } = render(\n        <Tipseen content=\"content\" showDelay={0} closeButtonTheme=\"dark\">\n          {tipseenMockChildren}\n        </Tipseen>\n      );\n      await waitFor(() => {\n        expect(asFragment()).toBeTruthy();\n      });\n      expect(asFragment()).toMatchSnapshot();\n    });\n    it(\"renders correctly with floating variation\", () => {\n      const { container } = render(<Tipseen content=\"content\" floating />);\n\n      // Run timers to ensure any async operations complete\n      act(() => {\n        vi.runAllTimers();\n      });\n\n      expect(container.firstChild).toMatchSnapshot();\n    });\n  });\n});\n\ndescribe(\"Integration Tests\", () => {\n  beforeEach(() => {\n    vi.useFakeTimers();\n  });\n\n  afterEach(() => {\n    vi.useRealTimers();\n  });\n\n  describe(\"Tipseen tests\", () => {\n    it(\"call onClose function when click on close button\", () => {\n      const onClickMock = vi.fn();\n      const { getByLabelText } = render(\n        <Tipseen content=\"content\" onClose={onClickMock}>\n          <div />\n        </Tipseen>\n      );\n\n      waitFor(() => {\n        fireEvent.click(getByLabelText(\"Close\"));\n        expect(onClickMock.mock.calls.length).toBe(1);\n      });\n    });\n  });\n\n  describe(\"Tipseen content tests\", () => {\n    it(\"call onDismiss function when click on dismiss button\", () => {\n      const onDismissMock = vi.fn();\n      const { getByText } = render(\n        <TipseenContent hideDismiss={false} onDismiss={onDismissMock}>\n          content\n        </TipseenContent>\n      );\n      const dismissButton = getByText(DISMISS_BUTTON_TEXT);\n\n      act(() => {\n        fireEvent.click(dismissButton);\n      });\n      expect(onDismissMock.mock.calls.length).toBe(1);\n    });\n\n    it(\"call onSubmit function when click on dismiss button\", () => {\n      const onSubmitMock = vi.fn();\n      const { getByText } = render(<TipseenContent onSubmit={onSubmitMock}>content</TipseenContent>);\n      const submitButton = getByText(SUBMIT_BUTTON_TEXT);\n\n      act(() => {\n        fireEvent.click(submitButton);\n      });\n      expect(onSubmitMock.mock.calls.length).toBe(1);\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Tipseen/__tests__/__snapshots__/Tipseen.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`Snapshot tests > Tipseen content tests > renders correctly with dismiss 1`] = `\n<div\n  className=\"tipseenBasicContent\"\n  data-testid=\"tipseen-content\"\n>\n  <div\n    className=\"buttons\"\n  >\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"dismiss button sizeSmall kindTertiary colorOnPrimaryColor\"\n      data-testid=\"tipseen-content-dismiss\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Dismiss\n    </button>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"button sizeSmall kindPrimary colorOnPrimaryColor\"\n      data-testid=\"tipseen-content-submit\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Submit\n    </button>\n  </div>\n</div>\n`;\n\nexports[`Snapshot tests > Tipseen content tests > renders correctly without props 1`] = `\n<DocumentFragment>\n  <div\n    class=\"tipseenBasicContent\"\n    data-testid=\"tipseen-content\"\n  >\n    <div\n      class=\"buttons\"\n    >\n      <button\n        aria-busy=\"false\"\n        aria-disabled=\"false\"\n        class=\"button sizeSmall kindPrimary colorOnPrimaryColor\"\n        data-testid=\"tipseen-content-submit\"\n        data-vibe=\"Button\"\n        style=\"color: rgba(0, 0, 0, 0);\"\n        type=\"button\"\n      >\n        Submit\n      </button>\n    </div>\n  </div>\n</DocumentFragment>\n`;\n\nexports[`Snapshot tests > Tipseen content tests > renders correctly without submit 1`] = `\n<div\n  className=\"tipseenBasicContent\"\n  data-testid=\"tipseen-content\"\n/>\n`;\n\nexports[`Snapshot tests > Tipseen tests > renders correctly with dark close button theme 1`] = `\n<DocumentFragment>\n  <div\n    class=\"monday-storybook-tipseen_container\"\n  />\n</DocumentFragment>\n`;\n\nexports[`Snapshot tests > Tipseen tests > renders correctly with floating variation 1`] = `null`;\n\nexports[`Snapshot tests > Tipseen tests > renders correctly without close 1`] = `\n<DocumentFragment>\n  <div\n    class=\"monday-storybook-tipseen_container\"\n  />\n</DocumentFragment>\n`;\n\nexports[`Snapshot tests > Tipseen tests > renders correctly without props 1`] = `\n<div\n  className=\"monday-storybook-tipseen_container\"\n  onBlur={[Function]}\n  onClick={[Function]}\n  onContextMenu={[Function]}\n  onFocus={[Function]}\n  onKeyDown={[Function]}\n  onMouseDown={[Function]}\n  onMouseEnter={[Function]}\n  onMouseLeave={[Function]}\n/>\n`;\n\nexports[`Snapshot tests > TipseenTitle > should render correctly with given text 1`] = `\n<div\n  aria-level={3}\n  className=\"typography inherit start multiLineEllipsis text text1Bold title\"\n  data-testid=\"tipseen-title\"\n  role=\"heading\"\n  style={\n    {\n      \"--text-clamp-lines\": \"2\",\n    }\n  }\n>\n  I'm a title\n</div>\n`;\n\nexports[`Snapshot tests > TipseenTitle > should render null without text 1`] = `null`;\n"
  },
  {
    "path": "packages/core/src/components/Tipseen/index.ts",
    "content": "export { default as Tipseen, type TipseenProps } from \"./Tipseen\";\nexport { default as TipseenContent, type TipseenContentProps } from \"./TipseenContent\";\nexport { default as TipseenWizard, type TipseenWizardProps } from \"./TipseenWizard\";\nexport { default as TipseenMedia, type TipseenMediaProps } from \"./TipseenMedia/TipseenMedia\";\n\nexport * from \"./Tipseen.types\";\n"
  },
  {
    "path": "packages/core/src/components/Toast/Toast.module.scss",
    "content": "@import \"../../styles/keyframes\";\n\n.toast {\n  box-shadow: var(--box-shadow-medium);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  margin: var(--space-16);\n  position: fixed;\n  left: 50%;\n  top: 0;\n  margin-inline: auto;\n  padding: var(--space-8);\n  align-items: center;\n  display: flex;\n  min-width: 200px;\n  width: auto;\n  border-radius: var(--border-radius-small);\n  color: var(--fixed-light-color);\n  transform: translateX(-50%);\n  transition: background-color 80ms cubic-bezier(0.6, 0, 0.4, 1), width 200ms cubic-bezier(0, 0, 0.4, 1);\n\n  &.typeNormal {\n    background-color: var(--primary-color);\n  }\n\n  &.typePositive {\n    background-color: var(--positive-color);\n  }\n\n  &.typeNegative {\n    background-color: var(--negative-color);\n  }\n\n  &.typeWarning {\n    background-color: var(--warning-color);\n    color: var(--fixed-dark-color);\n\n    .closeButton {\n      color: var(--fixed-dark-color);\n    }\n\n    .actionButton,\n    .actionLink {\n      color: var(--fixed-dark-color);\n      border-color: var(--fixed-dark-color);\n    }\n  }\n\n  &.typeDark {\n    background-color: var(--inverted-color-background);\n    color: var(--text-color-on-inverted);\n\n    .closeButton {\n      color: var(--text-color-on-inverted);\n    }\n\n    .actionButton,\n    .actionLink {\n      color: var(--text-color-on-inverted);\n      border-color: var(--text-color-on-inverted);\n    }\n  }\n}\n\n.icon {\n  display: flex;\n  margin-inline-start: var(--space-8);\n}\n\n.actionButton.withTransition {\n  opacity: 0;\n  animation: bounceIn 150ms cubic-bezier(0, 0, 0.4, 1);\n  animation-delay: 300ms;\n  animation-fill-mode: forwards;\n}\n\n.content {\n  margin: 0 var(--space-8);\n  flex: 1;\n}\n\n.textContent {\n  display: inline-flex;\n  flex-grow: 1;\n}\n\n.enterActive {\n  animation-iteration-count: 1;\n  animation-fill-mode: forwards;\n  animation-name: slideIn;\n  animation-duration: 350ms;\n  animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);\n}\n\n.exitActive {\n  animation-iteration-count: 1;\n  animation-fill-mode: forwards;\n  animation-name: slideOut;\n  animation-duration: 350ms;\n  animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);\n}\n\n.closeButton {\n  margin-inline-start: var(--space-8);\n}\n\n@keyframes slideIn {\n  0% {\n    transform: translate(-50%, -100px);\n  }\n\n  40% {\n    transform: translate(-50%, 16px);\n  }\n\n  100% {\n    transform: translate(-50%, 0px);\n  }\n}\n\n@keyframes slideOut {\n  0% {\n    transform: translate(-50%, 0);\n  }\n\n  100% {\n    transform: translate(-50%, -100px);\n    opacity: 0;\n  }\n}\n\n@keyframes bounceIn {\n  0% {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n\n  50% {\n    opacity: 1;\n  }\n\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Toast/Toast.tsx",
    "content": "import { camelCase } from \"es-toolkit\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { type ReactElement, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { type IconSubComponentProps } from \"@vibe/icon\";\nimport { Text } from \"@vibe/typography\";\nimport { Loader } from \"@vibe/loader\";\nimport { Flex } from \"@vibe/layout\";\nimport { CloseSmall } from \"@vibe/icons\";\nimport ToastLink from \"./ToastLink/ToastLink\";\nimport ToastButton from \"./ToastButton/ToastButton\";\nimport { type ToastType, type ToastAction } from \"./Toast.types\";\nimport { getIcon } from \"./ToastHelpers\";\nimport { NOOP, getStyle } from \"@vibe/shared\";\n\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./Toast.module.scss\";\nimport { IconButton } from \"@vibe/icon-button\";\nimport usePrevious from \"../../hooks/usePrevious\";\n\nexport interface ToastProps extends VibeComponentProps {\n  /**\n   * The actions available in the toast.\n   */\n  actions?: ToastAction[];\n  /**\n   * If true, the toast is open (visible).\n   */\n  open?: boolean;\n  /**\n   * If true, displays a loading indicator inside the toast.\n   */\n  loading?: boolean;\n  /**\n   * The type of toast.\n   */\n  type?: ToastType;\n  /**\n   * The icon displayed in the toast.\n   */\n  icon?: string | React.FC<IconSubComponentProps> | null;\n  /**\n   * If true, hides the toast icon.\n   */\n  hideIcon?: boolean;\n  /**\n   * The action element displayed in the toast.\n   */\n  action?: JSX.Element;\n  /**\n   * If false, hides the close button.\n   */\n  closeable?: boolean;\n  /**\n   * Callback fired when the toast is closed.\n   */\n  onClose?: () => void;\n  /**\n   * The number of milliseconds before the toast automatically closes.\n   * (0 or null disables auto-close behavior).\n   */\n  autoHideDuration?: number;\n  /**\n   * The content displayed inside the toast.\n   */\n  children?: ReactElement | ReactElement[] | string;\n  /**\n   * The aria-label for the close button.\n   */\n  closeButtonAriaLabel?: string;\n}\n\nconst Toast = ({\n  open = false,\n  loading = false,\n  autoHideDuration = null,\n  type = \"normal\",\n  icon,\n  hideIcon = false,\n  action: deprecatedAction,\n  actions,\n  children,\n  closeable = true,\n  onClose = NOOP,\n  className,\n  id,\n  closeButtonAriaLabel = \"Close\",\n  \"data-testid\": dataTestId\n}: ToastProps) => {\n  const ref = useRef(null);\n  const nodeRef = useRef<HTMLDivElement>(null);\n  const prevActions = usePrevious(actions?.length);\n  const toastLinks = useMemo(() => {\n    return actions\n      ? actions\n          .filter(action => action.type === \"link\")\n          .map(({ type: _type, ...otherProps }) => (\n            <ToastLink key={otherProps.href} className={styles.actionLink} {...otherProps} />\n          ))\n      : null;\n  }, [actions]);\n\n  const shouldShowButtonTransition = useMemo(() => {\n    return prevActions !== undefined && actions?.length !== prevActions;\n  }, [actions, prevActions]);\n\n  const toastButtons: JSX.Element[] | null = useMemo(() => {\n    return actions\n      ? actions\n          .filter(action => action.type === \"button\")\n          .map(({ type: _type, content, ...otherProps }, index) => (\n            <ToastButton\n              key={`alert-button-${index}`}\n              className={cx(styles.actionButton, { [styles.withTransition]: shouldShowButtonTransition })}\n              {...otherProps}\n            >\n              {content}\n            </ToastButton>\n          ))\n      : null;\n  }, [actions, shouldShowButtonTransition]);\n\n  const classNames = useMemo(\n    () => cx(styles.toast, getStyle(styles, camelCase(\"type-\" + type)), className),\n    [type, className]\n  );\n\n  const handleClose = useCallback(() => {\n    if (onClose) {\n      onClose();\n    }\n  }, [onClose]);\n\n  /* Timer */\n  const timerAutoHide = useRef<NodeJS.Timeout>();\n  const setAutoHideTimer = useCallback(\n    (duration: number) => {\n      if (!onClose || duration == null) {\n        return;\n      }\n\n      clearTimeout(timerAutoHide.current);\n      timerAutoHide.current = setTimeout(() => {\n        handleClose();\n      }, duration);\n    },\n    [handleClose, onClose]\n  );\n\n  useEffect(() => {\n    if (open && autoHideDuration > 0) {\n      setAutoHideTimer(autoHideDuration);\n    }\n\n    return () => {\n      clearTimeout(timerAutoHide.current);\n    };\n  }, [open, autoHideDuration, setAutoHideTimer]);\n\n  const iconElement = !hideIcon && getIcon(type, icon);\n\n  // https://n12v.com/css-transition-to-from-auto/\n  const recalculateElementWidth = useCallback((element: HTMLElement) => {\n    const prevWidth = element.style.width;\n    element.style.width = \"auto\";\n    const endWidth = getComputedStyle(element).width;\n    element.style.width = prevWidth;\n    element.offsetWidth; // force repaint\n    element.style.width = endWidth;\n  }, []);\n\n  useEffect(() => {\n    if (ref.current) {\n      recalculateElementWidth(ref.current);\n    }\n  }, [children, recalculateElementWidth]);\n\n  return (\n    <CSSTransition\n      in={open}\n      nodeRef={nodeRef}\n      classNames={{ enterActive: styles.enterActive, exitActive: styles.exitActive }}\n      timeout={400}\n      unmountOnExit\n    >\n      <Text\n        ref={nodeRef}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TOAST, id)}\n        type=\"text2\"\n        element=\"div\"\n        color=\"fixedLight\"\n        className={classNames}\n        role=\"alert\"\n        aria-live=\"polite\"\n      >\n        {iconElement && <div className={cx(styles.icon)}>{iconElement}</div>}\n        <Flex align=\"center\" gap=\"large\" className={styles.content}>\n          <Flex\n            gap=\"medium\"\n            data-testid={getTestId(ComponentDefaultTestId.TOAST_CONTENT)}\n            className={styles.textContent}\n          >\n            <span>{children}</span>\n            {toastLinks}\n          </Flex>\n          {(toastButtons || deprecatedAction) && (toastButtons || deprecatedAction)}\n          {loading && <Loader size=\"xs\" />}\n        </Flex>\n        {closeable && (\n          <IconButton\n            className={cx(styles.closeButton)}\n            onClick={handleClose}\n            size=\"small\"\n            kind=\"tertiary\"\n            color=\"fixed-light\"\n            aria-label={closeButtonAriaLabel}\n            data-testid={getTestId(ComponentDefaultTestId.TOAST_CLOSE_BUTTON)}\n            icon={CloseSmall}\n            hideTooltip\n          />\n        )}\n      </Text>\n    </CSSTransition>\n  );\n};\n\nexport default Toast;\n"
  },
  {
    "path": "packages/core/src/components/Toast/Toast.types.ts",
    "content": "export type ToastType = \"normal\" | \"positive\" | \"negative\" | \"warning\" | \"dark\";\n\nexport type ToastActionType = \"link\" | \"button\";\n\nexport type ToastAction = {\n  type: ToastActionType;\n  content?: string;\n  text?: string;\n  href?: string;\n  [key: string]: any;\n};\n"
  },
  {
    "path": "packages/core/src/components/Toast/ToastButton/ToastButton.tsx",
    "content": "import { Button, type ButtonProps } from \"@vibe/button\";\nimport React, { type FC } from \"react\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\n\nexport type ToastButtonProps = ButtonProps;\n\nconst ToastButton: FC<ToastButtonProps> = ({\n  className,\n  id,\n  \"data-testid\": dataTestId,\n  ...buttonProps\n}: ToastButtonProps) => {\n  return (\n    <Button\n      {...buttonProps}\n      id={id}\n      kind=\"secondary\"\n      marginLeft={false}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.TOAST_BUTTON, id)}\n      className={className}\n      size=\"small\"\n      color=\"fixed-light\"\n    />\n  );\n};\n\nexport default ToastButton;\n"
  },
  {
    "path": "packages/core/src/components/Toast/ToastConstants.ts",
    "content": "import { Info, Check, Alert, Warning } from \"@vibe/icons\";\n\nexport const defaultIconMap = {\n  normal: Info,\n  positive: Check,\n  negative: Alert,\n  warning: Warning,\n  dark: Info\n};\n"
  },
  {
    "path": "packages/core/src/components/Toast/ToastHelpers.tsx",
    "content": "import React from \"react\";\nimport { Icon, type IconSubComponentProps } from \"@vibe/icon\";\nimport { defaultIconMap } from \"./ToastConstants\";\nimport { type ToastType } from \"./Toast.types\";\n\nexport const getIcon = (type: ToastType, icon: string | React.FC<IconSubComponentProps> | null) => {\n  /* icon may be node a may be a string */\n  if (icon && typeof icon === \"object\") {\n    return icon;\n  }\n  return icon || defaultIconMap[type] ? (\n    <Icon type={icon ? \"font\" : \"svg\"} icon={icon || defaultIconMap[type]} size={20} ignoreFocusStyle />\n  ) : null;\n};\n"
  },
  {
    "path": "packages/core/src/components/Toast/ToastLink/ToastLink.module.scss",
    "content": ".actionLink {\n  color: var(--text-color-on-primary);\n  -webkit-font-smoothing: auto;\n  -moz-osx-font-smoothing: auto;\n\n  &:hover {\n    color: inherit;\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Toast/ToastLink/ToastLink.tsx",
    "content": "/* eslint-disable react/jsx-props-no-spreading */\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { type FC } from \"react\";\nimport Link, { type LinkProps } from \"../../Link/Link\";\nimport styles from \"./ToastLink.module.scss\";\n\nexport type ToastLinkProps = LinkProps;\n\nconst ToastLink: FC<ToastLinkProps> = ({ className, id, \"data-testid\": dataTestId, ...linkProps }) => {\n  const classNames = cx(styles.actionLink, className);\n  return (\n    <Link\n      {...linkProps}\n      className={classNames}\n      id={id}\n      data-testid={dataTestId || getTestId(ComponentDefaultTestId.TOAST_LINK, id)}\n    />\n  );\n};\n\nexport default ToastLink;\n"
  },
  {
    "path": "packages/core/src/components/Toast/__tests__/Toast.snapshot.test.tsx",
    "content": "import { vi, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport Toast from \"../Toast\";\n\nvi.mock(\"react-transition-group\", () => {\n  const FakeTransition = vi.fn(({ children }) => children);\n  const FakeSwitchTransition = vi.fn(({ children }) => children);\n  const FakeCSSTransition = vi.fn(({ children }) => children);\n  return {\n    CSSTransition: FakeCSSTransition,\n    Transition: FakeTransition,\n    SwitchTransition: FakeSwitchTransition\n  };\n});\n\ndescribe(\"Toast renders correctly\", () => {\n  it(\"(renders nothing) with empty props\", () => {\n    const tree = renderer.create(<Toast />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders nothing when open is false\", () => {\n    const tree = renderer.create(<Toast open={false}>Something Happened</Toast>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"when open is true\", () => {\n    const tree = renderer.create(<Toast open>Something Happened</Toast>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"and don't renders close button if closeable=false\", () => {\n    const tree = renderer\n      .create(\n        <Toast open closeable={false}>\n          Something Happened\n        </Toast>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with button\", () => {\n    const tree = renderer\n      .create(\n        <Toast open actions={[{ type: \"button\", content: \"Undo 5\", key: 1 }]}>\n          Something Happened\n        </Toast>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with link\", () => {\n    const tree = renderer\n      .create(\n        <Toast open actions={[{ type: \"link\", text: \"Lorem ipsum\", href: \"https://monday.com\", key: 1 }]}>\n          Something Happened\n        </Toast>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with button and link\", () => {\n    const tree = renderer\n      .create(\n        <Toast\n          open\n          actions={[\n            { type: \"button\", content: \"Undo 5\", key: 1 },\n            { type: \"link\", text: \"Lorem ipsum\", href: \"https://monday.com\", key: 2 }\n          ]}\n        >\n          Something Happened\n        </Toast>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with negative type\", () => {\n    const tree = renderer\n      .create(\n        <Toast open type=\"negative\">\n          Something Happened\n        </Toast>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"when icon is hidden\", () => {\n    const tree = renderer.create(<Toast hideIcon>Something Happened</Toast>).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"with loading\", () => {\n    const tree = renderer\n      .create(\n        <Toast open loading>\n          Something Happened\n        </Toast>\n      )\n      .toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Toast/__tests__/Toast.test.tsx",
    "content": "import { vi, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { fireEvent, render } from \"@testing-library/react\";\nimport { act } from \"@testing-library/react-hooks\";\nimport Toast, { type ToastProps } from \"../Toast\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\n\nconst renderComponent = (props: ToastProps) => {\n  return render(<Toast {...props} />);\n};\n\ndescribe(\"Toast tests\", () => {\n  it(\"calls onClose when click on close button\", () => {\n    const onCloseMock = vi.fn();\n    const toast = renderComponent({\n      open: true,\n      onClose: onCloseMock\n    });\n    const closeButton = toast.getByTestId(ComponentDefaultTestId.TOAST_CLOSE_BUTTON);\n\n    act(() => {\n      fireEvent.click(closeButton);\n    });\n\n    expect(onCloseMock.mock.calls.length).toBe(1);\n  });\n\n  it(\"calls onClose after 1S when autoHideDuration=1000\", () => {\n    const onCloseMock = vi.fn();\n    vi.useFakeTimers();\n    renderComponent({\n      onClose: onCloseMock,\n      autoHideDuration: 1000,\n      open: true\n    });\n\n    act(() => {\n      vi.advanceTimersByTime(1000);\n    });\n\n    expect(onCloseMock).toHaveBeenCalledOnce();\n    vi.useRealTimers();\n  });\n\n  it(\"calls onClick when clicking on attached button to the toast\", () => {\n    const onClickMock = vi.fn();\n    const toast = renderComponent({\n      open: true,\n      actions: [{ type: \"button\", key: 1, content: \"Button\", onClick: onClickMock }]\n    });\n\n    const button = toast.getByText(\"Button\");\n    act(() => {\n      fireEvent.click(button);\n    });\n\n    expect(onClickMock).toHaveBeenCalledOnce();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Toast/__tests__/__snapshots__/Toast.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`Toast renders correctly > (renders nothing) with empty props 1`] = `\n<div\n  aria-live=\"polite\"\n  className=\"typography fixedLight start singleLineEllipsis text text2Normal toast typeNormal\"\n  data-testid=\"toast\"\n  role=\"alert\"\n>\n  <div\n    className=\"icon\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      width=\"20\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M4.5559 4.55593C5.99976 3.11206 7.95806 2.3009 10 2.3009C12.0419 2.3009 14.0002 3.11206 15.4441 4.55593C16.888 5.99979 17.6991 7.9581 17.6991 10C17.6991 12.042 16.888 14.0003 15.4441 15.4441C14.0002 16.888 12.0419 17.6992 10 17.6992C7.95806 17.6992 5.99976 16.888 4.5559 15.4441C3.11203 14.0003 2.30087 12.042 2.30087 10C2.30087 7.9581 3.11203 5.99979 4.5559 4.55593ZM10 3.8009C8.35589 3.8009 6.77912 4.45402 5.61656 5.61659C4.45399 6.77915 3.80087 8.35592 3.80087 10C3.80087 11.6441 4.45399 13.2209 5.61656 14.3835C6.77912 15.546 8.35589 16.1992 10 16.1992C11.6441 16.1992 13.2209 15.546 14.3834 14.3835C15.546 13.2209 16.1991 11.6441 16.1991 10C16.1991 8.35592 15.546 6.77915 14.3834 5.61659C13.2209 4.45402 11.6441 3.8009 10 3.8009ZM10 9.25006C10.4142 9.25006 10.75 9.58585 10.75 10.0001V13.4746C10.75 13.8888 10.4142 14.2246 10 14.2246C9.58579 14.2246 9.25 13.8888 9.25 13.4746V10.0001C9.25 9.58585 9.58579 9.25006 10 9.25006ZM9.54135 6.21669C9.7058 6.10681 9.89914 6.04816 10.0969 6.04816C10.3621 6.04816 10.6165 6.15351 10.804 6.34105C10.9916 6.52859 11.0969 6.78294 11.0969 7.04816C11.0969 7.24593 11.0383 7.43927 10.9284 7.60373C10.8185 7.76818 10.6623 7.89635 10.4796 7.97204C10.2969 8.04772 10.0958 8.06753 9.90183 8.02894C9.70786 7.99036 9.52967 7.89512 9.38982 7.75526C9.24996 7.61541 9.15472 7.43722 9.11614 7.24325C9.07755 7.04927 9.09736 6.8482 9.17304 6.66547C9.24873 6.48275 9.3769 6.32657 9.54135 6.21669Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  </div>\n  <div\n    className=\"container directionRow justifyStart alignCenter content\"\n    style={\n      {\n        \"gap\": \"var(--space-24)\",\n      }\n    }\n  >\n    <div\n      className=\"container directionRow justifyStart alignCenter textContent\"\n      data-testid=\"toast-content\"\n      style={\n        {\n          \"gap\": \"var(--space-16)\",\n        }\n      }\n    >\n      <span />\n    </div>\n  </div>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    aria-label=\"Close\"\n    className=\"closeButton button sizeMedium kindTertiary colorFixedLight noSidePadding\"\n    data-testid=\"toast-close-button\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    style={\n      {\n        \"alignItems\": \"center\",\n        \"height\": \"32px\",\n        \"justifyContent\": \"center\",\n        \"padding\": 0,\n        \"width\": \"32px\",\n      }\n    }\n    type=\"button\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      width=\"20\"\n    >\n      <path\n        d=\"M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z\"\n      />\n    </svg>\n  </button>\n</div>\n`;\n\nexports[`Toast renders correctly > and don't renders close button if closeable=false 1`] = `\n<div\n  aria-live=\"polite\"\n  className=\"typography fixedLight start singleLineEllipsis text text2Normal toast typeNormal\"\n  data-testid=\"toast\"\n  role=\"alert\"\n>\n  <div\n    className=\"icon\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      width=\"20\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M4.5559 4.55593C5.99976 3.11206 7.95806 2.3009 10 2.3009C12.0419 2.3009 14.0002 3.11206 15.4441 4.55593C16.888 5.99979 17.6991 7.9581 17.6991 10C17.6991 12.042 16.888 14.0003 15.4441 15.4441C14.0002 16.888 12.0419 17.6992 10 17.6992C7.95806 17.6992 5.99976 16.888 4.5559 15.4441C3.11203 14.0003 2.30087 12.042 2.30087 10C2.30087 7.9581 3.11203 5.99979 4.5559 4.55593ZM10 3.8009C8.35589 3.8009 6.77912 4.45402 5.61656 5.61659C4.45399 6.77915 3.80087 8.35592 3.80087 10C3.80087 11.6441 4.45399 13.2209 5.61656 14.3835C6.77912 15.546 8.35589 16.1992 10 16.1992C11.6441 16.1992 13.2209 15.546 14.3834 14.3835C15.546 13.2209 16.1991 11.6441 16.1991 10C16.1991 8.35592 15.546 6.77915 14.3834 5.61659C13.2209 4.45402 11.6441 3.8009 10 3.8009ZM10 9.25006C10.4142 9.25006 10.75 9.58585 10.75 10.0001V13.4746C10.75 13.8888 10.4142 14.2246 10 14.2246C9.58579 14.2246 9.25 13.8888 9.25 13.4746V10.0001C9.25 9.58585 9.58579 9.25006 10 9.25006ZM9.54135 6.21669C9.7058 6.10681 9.89914 6.04816 10.0969 6.04816C10.3621 6.04816 10.6165 6.15351 10.804 6.34105C10.9916 6.52859 11.0969 6.78294 11.0969 7.04816C11.0969 7.24593 11.0383 7.43927 10.9284 7.60373C10.8185 7.76818 10.6623 7.89635 10.4796 7.97204C10.2969 8.04772 10.0958 8.06753 9.90183 8.02894C9.70786 7.99036 9.52967 7.89512 9.38982 7.75526C9.24996 7.61541 9.15472 7.43722 9.11614 7.24325C9.07755 7.04927 9.09736 6.8482 9.17304 6.66547C9.24873 6.48275 9.3769 6.32657 9.54135 6.21669Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  </div>\n  <div\n    className=\"container directionRow justifyStart alignCenter content\"\n    style={\n      {\n        \"gap\": \"var(--space-24)\",\n      }\n    }\n  >\n    <div\n      className=\"container directionRow justifyStart alignCenter textContent\"\n      data-testid=\"toast-content\"\n      style={\n        {\n          \"gap\": \"var(--space-16)\",\n        }\n      }\n    >\n      <span>\n        Something Happened\n      </span>\n    </div>\n  </div>\n</div>\n`;\n\nexports[`Toast renders correctly > renders nothing when open is false 1`] = `\n<div\n  aria-live=\"polite\"\n  className=\"typography fixedLight start singleLineEllipsis text text2Normal toast typeNormal\"\n  data-testid=\"toast\"\n  role=\"alert\"\n>\n  <div\n    className=\"icon\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      width=\"20\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M4.5559 4.55593C5.99976 3.11206 7.95806 2.3009 10 2.3009C12.0419 2.3009 14.0002 3.11206 15.4441 4.55593C16.888 5.99979 17.6991 7.9581 17.6991 10C17.6991 12.042 16.888 14.0003 15.4441 15.4441C14.0002 16.888 12.0419 17.6992 10 17.6992C7.95806 17.6992 5.99976 16.888 4.5559 15.4441C3.11203 14.0003 2.30087 12.042 2.30087 10C2.30087 7.9581 3.11203 5.99979 4.5559 4.55593ZM10 3.8009C8.35589 3.8009 6.77912 4.45402 5.61656 5.61659C4.45399 6.77915 3.80087 8.35592 3.80087 10C3.80087 11.6441 4.45399 13.2209 5.61656 14.3835C6.77912 15.546 8.35589 16.1992 10 16.1992C11.6441 16.1992 13.2209 15.546 14.3834 14.3835C15.546 13.2209 16.1991 11.6441 16.1991 10C16.1991 8.35592 15.546 6.77915 14.3834 5.61659C13.2209 4.45402 11.6441 3.8009 10 3.8009ZM10 9.25006C10.4142 9.25006 10.75 9.58585 10.75 10.0001V13.4746C10.75 13.8888 10.4142 14.2246 10 14.2246C9.58579 14.2246 9.25 13.8888 9.25 13.4746V10.0001C9.25 9.58585 9.58579 9.25006 10 9.25006ZM9.54135 6.21669C9.7058 6.10681 9.89914 6.04816 10.0969 6.04816C10.3621 6.04816 10.6165 6.15351 10.804 6.34105C10.9916 6.52859 11.0969 6.78294 11.0969 7.04816C11.0969 7.24593 11.0383 7.43927 10.9284 7.60373C10.8185 7.76818 10.6623 7.89635 10.4796 7.97204C10.2969 8.04772 10.0958 8.06753 9.90183 8.02894C9.70786 7.99036 9.52967 7.89512 9.38982 7.75526C9.24996 7.61541 9.15472 7.43722 9.11614 7.24325C9.07755 7.04927 9.09736 6.8482 9.17304 6.66547C9.24873 6.48275 9.3769 6.32657 9.54135 6.21669Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  </div>\n  <div\n    className=\"container directionRow justifyStart alignCenter content\"\n    style={\n      {\n        \"gap\": \"var(--space-24)\",\n      }\n    }\n  >\n    <div\n      className=\"container directionRow justifyStart alignCenter textContent\"\n      data-testid=\"toast-content\"\n      style={\n        {\n          \"gap\": \"var(--space-16)\",\n        }\n      }\n    >\n      <span>\n        Something Happened\n      </span>\n    </div>\n  </div>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    aria-label=\"Close\"\n    className=\"closeButton button sizeMedium kindTertiary colorFixedLight noSidePadding\"\n    data-testid=\"toast-close-button\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    style={\n      {\n        \"alignItems\": \"center\",\n        \"height\": \"32px\",\n        \"justifyContent\": \"center\",\n        \"padding\": 0,\n        \"width\": \"32px\",\n      }\n    }\n    type=\"button\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      width=\"20\"\n    >\n      <path\n        d=\"M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z\"\n      />\n    </svg>\n  </button>\n</div>\n`;\n\nexports[`Toast renders correctly > when icon is hidden 1`] = `\n<div\n  aria-live=\"polite\"\n  className=\"typography fixedLight start singleLineEllipsis text text2Normal toast typeNormal\"\n  data-testid=\"toast\"\n  role=\"alert\"\n>\n  <div\n    className=\"container directionRow justifyStart alignCenter content\"\n    style={\n      {\n        \"gap\": \"var(--space-24)\",\n      }\n    }\n  >\n    <div\n      className=\"container directionRow justifyStart alignCenter textContent\"\n      data-testid=\"toast-content\"\n      style={\n        {\n          \"gap\": \"var(--space-16)\",\n        }\n      }\n    >\n      <span>\n        Something Happened\n      </span>\n    </div>\n  </div>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    aria-label=\"Close\"\n    className=\"closeButton button sizeMedium kindTertiary colorFixedLight noSidePadding\"\n    data-testid=\"toast-close-button\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    style={\n      {\n        \"alignItems\": \"center\",\n        \"height\": \"32px\",\n        \"justifyContent\": \"center\",\n        \"padding\": 0,\n        \"width\": \"32px\",\n      }\n    }\n    type=\"button\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      width=\"20\"\n    >\n      <path\n        d=\"M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z\"\n      />\n    </svg>\n  </button>\n</div>\n`;\n\nexports[`Toast renders correctly > when open is true 1`] = `\n<div\n  aria-live=\"polite\"\n  className=\"typography fixedLight start singleLineEllipsis text text2Normal toast typeNormal\"\n  data-testid=\"toast\"\n  role=\"alert\"\n>\n  <div\n    className=\"icon\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      width=\"20\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M4.5559 4.55593C5.99976 3.11206 7.95806 2.3009 10 2.3009C12.0419 2.3009 14.0002 3.11206 15.4441 4.55593C16.888 5.99979 17.6991 7.9581 17.6991 10C17.6991 12.042 16.888 14.0003 15.4441 15.4441C14.0002 16.888 12.0419 17.6992 10 17.6992C7.95806 17.6992 5.99976 16.888 4.5559 15.4441C3.11203 14.0003 2.30087 12.042 2.30087 10C2.30087 7.9581 3.11203 5.99979 4.5559 4.55593ZM10 3.8009C8.35589 3.8009 6.77912 4.45402 5.61656 5.61659C4.45399 6.77915 3.80087 8.35592 3.80087 10C3.80087 11.6441 4.45399 13.2209 5.61656 14.3835C6.77912 15.546 8.35589 16.1992 10 16.1992C11.6441 16.1992 13.2209 15.546 14.3834 14.3835C15.546 13.2209 16.1991 11.6441 16.1991 10C16.1991 8.35592 15.546 6.77915 14.3834 5.61659C13.2209 4.45402 11.6441 3.8009 10 3.8009ZM10 9.25006C10.4142 9.25006 10.75 9.58585 10.75 10.0001V13.4746C10.75 13.8888 10.4142 14.2246 10 14.2246C9.58579 14.2246 9.25 13.8888 9.25 13.4746V10.0001C9.25 9.58585 9.58579 9.25006 10 9.25006ZM9.54135 6.21669C9.7058 6.10681 9.89914 6.04816 10.0969 6.04816C10.3621 6.04816 10.6165 6.15351 10.804 6.34105C10.9916 6.52859 11.0969 6.78294 11.0969 7.04816C11.0969 7.24593 11.0383 7.43927 10.9284 7.60373C10.8185 7.76818 10.6623 7.89635 10.4796 7.97204C10.2969 8.04772 10.0958 8.06753 9.90183 8.02894C9.70786 7.99036 9.52967 7.89512 9.38982 7.75526C9.24996 7.61541 9.15472 7.43722 9.11614 7.24325C9.07755 7.04927 9.09736 6.8482 9.17304 6.66547C9.24873 6.48275 9.3769 6.32657 9.54135 6.21669Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  </div>\n  <div\n    className=\"container directionRow justifyStart alignCenter content\"\n    style={\n      {\n        \"gap\": \"var(--space-24)\",\n      }\n    }\n  >\n    <div\n      className=\"container directionRow justifyStart alignCenter textContent\"\n      data-testid=\"toast-content\"\n      style={\n        {\n          \"gap\": \"var(--space-16)\",\n        }\n      }\n    >\n      <span>\n        Something Happened\n      </span>\n    </div>\n  </div>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    aria-label=\"Close\"\n    className=\"closeButton button sizeMedium kindTertiary colorFixedLight noSidePadding\"\n    data-testid=\"toast-close-button\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    style={\n      {\n        \"alignItems\": \"center\",\n        \"height\": \"32px\",\n        \"justifyContent\": \"center\",\n        \"padding\": 0,\n        \"width\": \"32px\",\n      }\n    }\n    type=\"button\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      width=\"20\"\n    >\n      <path\n        d=\"M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z\"\n      />\n    </svg>\n  </button>\n</div>\n`;\n\nexports[`Toast renders correctly > with button 1`] = `\n<div\n  aria-live=\"polite\"\n  className=\"typography fixedLight start singleLineEllipsis text text2Normal toast typeNormal\"\n  data-testid=\"toast\"\n  role=\"alert\"\n>\n  <div\n    className=\"icon\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      width=\"20\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M4.5559 4.55593C5.99976 3.11206 7.95806 2.3009 10 2.3009C12.0419 2.3009 14.0002 3.11206 15.4441 4.55593C16.888 5.99979 17.6991 7.9581 17.6991 10C17.6991 12.042 16.888 14.0003 15.4441 15.4441C14.0002 16.888 12.0419 17.6992 10 17.6992C7.95806 17.6992 5.99976 16.888 4.5559 15.4441C3.11203 14.0003 2.30087 12.042 2.30087 10C2.30087 7.9581 3.11203 5.99979 4.5559 4.55593ZM10 3.8009C8.35589 3.8009 6.77912 4.45402 5.61656 5.61659C4.45399 6.77915 3.80087 8.35592 3.80087 10C3.80087 11.6441 4.45399 13.2209 5.61656 14.3835C6.77912 15.546 8.35589 16.1992 10 16.1992C11.6441 16.1992 13.2209 15.546 14.3834 14.3835C15.546 13.2209 16.1991 11.6441 16.1991 10C16.1991 8.35592 15.546 6.77915 14.3834 5.61659C13.2209 4.45402 11.6441 3.8009 10 3.8009ZM10 9.25006C10.4142 9.25006 10.75 9.58585 10.75 10.0001V13.4746C10.75 13.8888 10.4142 14.2246 10 14.2246C9.58579 14.2246 9.25 13.8888 9.25 13.4746V10.0001C9.25 9.58585 9.58579 9.25006 10 9.25006ZM9.54135 6.21669C9.7058 6.10681 9.89914 6.04816 10.0969 6.04816C10.3621 6.04816 10.6165 6.15351 10.804 6.34105C10.9916 6.52859 11.0969 6.78294 11.0969 7.04816C11.0969 7.24593 11.0383 7.43927 10.9284 7.60373C10.8185 7.76818 10.6623 7.89635 10.4796 7.97204C10.2969 8.04772 10.0958 8.06753 9.90183 8.02894C9.70786 7.99036 9.52967 7.89512 9.38982 7.75526C9.24996 7.61541 9.15472 7.43722 9.11614 7.24325C9.07755 7.04927 9.09736 6.8482 9.17304 6.66547C9.24873 6.48275 9.3769 6.32657 9.54135 6.21669Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  </div>\n  <div\n    className=\"container directionRow justifyStart alignCenter content\"\n    style={\n      {\n        \"gap\": \"var(--space-24)\",\n      }\n    }\n  >\n    <div\n      className=\"container directionRow justifyStart alignCenter textContent\"\n      data-testid=\"toast-content\"\n      style={\n        {\n          \"gap\": \"var(--space-16)\",\n        }\n      }\n    >\n      <span>\n        Something Happened\n      </span>\n    </div>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"actionButton button sizeSmall kindSecondary colorFixedLight\"\n      data-testid=\"toast-button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Undo 5\n    </button>\n  </div>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    aria-label=\"Close\"\n    className=\"closeButton button sizeMedium kindTertiary colorFixedLight noSidePadding\"\n    data-testid=\"toast-close-button\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    style={\n      {\n        \"alignItems\": \"center\",\n        \"height\": \"32px\",\n        \"justifyContent\": \"center\",\n        \"padding\": 0,\n        \"width\": \"32px\",\n      }\n    }\n    type=\"button\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      width=\"20\"\n    >\n      <path\n        d=\"M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z\"\n      />\n    </svg>\n  </button>\n</div>\n`;\n\nexports[`Toast renders correctly > with button and link 1`] = `\n<div\n  aria-live=\"polite\"\n  className=\"typography fixedLight start singleLineEllipsis text text2Normal toast typeNormal\"\n  data-testid=\"toast\"\n  role=\"alert\"\n>\n  <div\n    className=\"icon\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      width=\"20\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M4.5559 4.55593C5.99976 3.11206 7.95806 2.3009 10 2.3009C12.0419 2.3009 14.0002 3.11206 15.4441 4.55593C16.888 5.99979 17.6991 7.9581 17.6991 10C17.6991 12.042 16.888 14.0003 15.4441 15.4441C14.0002 16.888 12.0419 17.6992 10 17.6992C7.95806 17.6992 5.99976 16.888 4.5559 15.4441C3.11203 14.0003 2.30087 12.042 2.30087 10C2.30087 7.9581 3.11203 5.99979 4.5559 4.55593ZM10 3.8009C8.35589 3.8009 6.77912 4.45402 5.61656 5.61659C4.45399 6.77915 3.80087 8.35592 3.80087 10C3.80087 11.6441 4.45399 13.2209 5.61656 14.3835C6.77912 15.546 8.35589 16.1992 10 16.1992C11.6441 16.1992 13.2209 15.546 14.3834 14.3835C15.546 13.2209 16.1991 11.6441 16.1991 10C16.1991 8.35592 15.546 6.77915 14.3834 5.61659C13.2209 4.45402 11.6441 3.8009 10 3.8009ZM10 9.25006C10.4142 9.25006 10.75 9.58585 10.75 10.0001V13.4746C10.75 13.8888 10.4142 14.2246 10 14.2246C9.58579 14.2246 9.25 13.8888 9.25 13.4746V10.0001C9.25 9.58585 9.58579 9.25006 10 9.25006ZM9.54135 6.21669C9.7058 6.10681 9.89914 6.04816 10.0969 6.04816C10.3621 6.04816 10.6165 6.15351 10.804 6.34105C10.9916 6.52859 11.0969 6.78294 11.0969 7.04816C11.0969 7.24593 11.0383 7.43927 10.9284 7.60373C10.8185 7.76818 10.6623 7.89635 10.4796 7.97204C10.2969 8.04772 10.0958 8.06753 9.90183 8.02894C9.70786 7.99036 9.52967 7.89512 9.38982 7.75526C9.24996 7.61541 9.15472 7.43722 9.11614 7.24325C9.07755 7.04927 9.09736 6.8482 9.17304 6.66547C9.24873 6.48275 9.3769 6.32657 9.54135 6.21669Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  </div>\n  <div\n    className=\"container directionRow justifyStart alignCenter content\"\n    style={\n      {\n        \"gap\": \"var(--space-24)\",\n      }\n    }\n  >\n    <div\n      className=\"container directionRow justifyStart alignCenter textContent\"\n      data-testid=\"toast-content\"\n      style={\n        {\n          \"gap\": \"var(--space-16)\",\n        }\n      }\n    >\n      <span>\n        Something Happened\n      </span>\n      <a\n        aria-describedby=\"\"\n        aria-label=\"\"\n        aria-labelledby=\"\"\n        className=\"link actionLink actionLink colorPrimary\"\n        data-testid=\"toast-link\"\n        data-vibe=\"Link\"\n        href=\"https://monday.com\"\n        id=\"\"\n        onClick={[Function]}\n        rel=\"noreferrer\"\n        target=\"_blank\"\n      >\n        <span\n          className=\"text\"\n        >\n          Lorem ipsum\n        </span>\n      </a>\n    </div>\n    <button\n      aria-busy={false}\n      aria-disabled={false}\n      className=\"actionButton button sizeSmall kindSecondary colorFixedLight\"\n      data-testid=\"toast-button\"\n      data-vibe=\"Button\"\n      onBlur={[Function]}\n      onClick={[Function]}\n      onFocus={[Function]}\n      onMouseDown={[Function]}\n      onMouseUp={[Function]}\n      type=\"button\"\n    >\n      Undo 5\n    </button>\n  </div>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    aria-label=\"Close\"\n    className=\"closeButton button sizeMedium kindTertiary colorFixedLight noSidePadding\"\n    data-testid=\"toast-close-button\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    style={\n      {\n        \"alignItems\": \"center\",\n        \"height\": \"32px\",\n        \"justifyContent\": \"center\",\n        \"padding\": 0,\n        \"width\": \"32px\",\n      }\n    }\n    type=\"button\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      width=\"20\"\n    >\n      <path\n        d=\"M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z\"\n      />\n    </svg>\n  </button>\n</div>\n`;\n\nexports[`Toast renders correctly > with link 1`] = `\n<div\n  aria-live=\"polite\"\n  className=\"typography fixedLight start singleLineEllipsis text text2Normal toast typeNormal\"\n  data-testid=\"toast\"\n  role=\"alert\"\n>\n  <div\n    className=\"icon\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      width=\"20\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M4.5559 4.55593C5.99976 3.11206 7.95806 2.3009 10 2.3009C12.0419 2.3009 14.0002 3.11206 15.4441 4.55593C16.888 5.99979 17.6991 7.9581 17.6991 10C17.6991 12.042 16.888 14.0003 15.4441 15.4441C14.0002 16.888 12.0419 17.6992 10 17.6992C7.95806 17.6992 5.99976 16.888 4.5559 15.4441C3.11203 14.0003 2.30087 12.042 2.30087 10C2.30087 7.9581 3.11203 5.99979 4.5559 4.55593ZM10 3.8009C8.35589 3.8009 6.77912 4.45402 5.61656 5.61659C4.45399 6.77915 3.80087 8.35592 3.80087 10C3.80087 11.6441 4.45399 13.2209 5.61656 14.3835C6.77912 15.546 8.35589 16.1992 10 16.1992C11.6441 16.1992 13.2209 15.546 14.3834 14.3835C15.546 13.2209 16.1991 11.6441 16.1991 10C16.1991 8.35592 15.546 6.77915 14.3834 5.61659C13.2209 4.45402 11.6441 3.8009 10 3.8009ZM10 9.25006C10.4142 9.25006 10.75 9.58585 10.75 10.0001V13.4746C10.75 13.8888 10.4142 14.2246 10 14.2246C9.58579 14.2246 9.25 13.8888 9.25 13.4746V10.0001C9.25 9.58585 9.58579 9.25006 10 9.25006ZM9.54135 6.21669C9.7058 6.10681 9.89914 6.04816 10.0969 6.04816C10.3621 6.04816 10.6165 6.15351 10.804 6.34105C10.9916 6.52859 11.0969 6.78294 11.0969 7.04816C11.0969 7.24593 11.0383 7.43927 10.9284 7.60373C10.8185 7.76818 10.6623 7.89635 10.4796 7.97204C10.2969 8.04772 10.0958 8.06753 9.90183 8.02894C9.70786 7.99036 9.52967 7.89512 9.38982 7.75526C9.24996 7.61541 9.15472 7.43722 9.11614 7.24325C9.07755 7.04927 9.09736 6.8482 9.17304 6.66547C9.24873 6.48275 9.3769 6.32657 9.54135 6.21669Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  </div>\n  <div\n    className=\"container directionRow justifyStart alignCenter content\"\n    style={\n      {\n        \"gap\": \"var(--space-24)\",\n      }\n    }\n  >\n    <div\n      className=\"container directionRow justifyStart alignCenter textContent\"\n      data-testid=\"toast-content\"\n      style={\n        {\n          \"gap\": \"var(--space-16)\",\n        }\n      }\n    >\n      <span>\n        Something Happened\n      </span>\n      <a\n        aria-describedby=\"\"\n        aria-label=\"\"\n        aria-labelledby=\"\"\n        className=\"link actionLink actionLink colorPrimary\"\n        data-testid=\"toast-link\"\n        data-vibe=\"Link\"\n        href=\"https://monday.com\"\n        id=\"\"\n        onClick={[Function]}\n        rel=\"noreferrer\"\n        target=\"_blank\"\n      >\n        <span\n          className=\"text\"\n        >\n          Lorem ipsum\n        </span>\n      </a>\n    </div>\n  </div>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    aria-label=\"Close\"\n    className=\"closeButton button sizeMedium kindTertiary colorFixedLight noSidePadding\"\n    data-testid=\"toast-close-button\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    style={\n      {\n        \"alignItems\": \"center\",\n        \"height\": \"32px\",\n        \"justifyContent\": \"center\",\n        \"padding\": 0,\n        \"width\": \"32px\",\n      }\n    }\n    type=\"button\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      width=\"20\"\n    >\n      <path\n        d=\"M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z\"\n      />\n    </svg>\n  </button>\n</div>\n`;\n\nexports[`Toast renders correctly > with loading 1`] = `\n<div\n  aria-live=\"polite\"\n  className=\"typography fixedLight start singleLineEllipsis text text2Normal toast typeNormal\"\n  data-testid=\"toast\"\n  role=\"alert\"\n>\n  <div\n    className=\"icon\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      width=\"20\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M4.5559 4.55593C5.99976 3.11206 7.95806 2.3009 10 2.3009C12.0419 2.3009 14.0002 3.11206 15.4441 4.55593C16.888 5.99979 17.6991 7.9581 17.6991 10C17.6991 12.042 16.888 14.0003 15.4441 15.4441C14.0002 16.888 12.0419 17.6992 10 17.6992C7.95806 17.6992 5.99976 16.888 4.5559 15.4441C3.11203 14.0003 2.30087 12.042 2.30087 10C2.30087 7.9581 3.11203 5.99979 4.5559 4.55593ZM10 3.8009C8.35589 3.8009 6.77912 4.45402 5.61656 5.61659C4.45399 6.77915 3.80087 8.35592 3.80087 10C3.80087 11.6441 4.45399 13.2209 5.61656 14.3835C6.77912 15.546 8.35589 16.1992 10 16.1992C11.6441 16.1992 13.2209 15.546 14.3834 14.3835C15.546 13.2209 16.1991 11.6441 16.1991 10C16.1991 8.35592 15.546 6.77915 14.3834 5.61659C13.2209 4.45402 11.6441 3.8009 10 3.8009ZM10 9.25006C10.4142 9.25006 10.75 9.58585 10.75 10.0001V13.4746C10.75 13.8888 10.4142 14.2246 10 14.2246C9.58579 14.2246 9.25 13.8888 9.25 13.4746V10.0001C9.25 9.58585 9.58579 9.25006 10 9.25006ZM9.54135 6.21669C9.7058 6.10681 9.89914 6.04816 10.0969 6.04816C10.3621 6.04816 10.6165 6.15351 10.804 6.34105C10.9916 6.52859 11.0969 6.78294 11.0969 7.04816C11.0969 7.24593 11.0383 7.43927 10.9284 7.60373C10.8185 7.76818 10.6623 7.89635 10.4796 7.97204C10.2969 8.04772 10.0958 8.06753 9.90183 8.02894C9.70786 7.99036 9.52967 7.89512 9.38982 7.75526C9.24996 7.61541 9.15472 7.43722 9.11614 7.24325C9.07755 7.04927 9.09736 6.8482 9.17304 6.66547C9.24873 6.48275 9.3769 6.32657 9.54135 6.21669Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  </div>\n  <div\n    className=\"container directionRow justifyStart alignCenter content\"\n    style={\n      {\n        \"gap\": \"var(--space-24)\",\n      }\n    }\n  >\n    <div\n      className=\"container directionRow justifyStart alignCenter textContent\"\n      data-testid=\"toast-content\"\n      style={\n        {\n          \"gap\": \"var(--space-16)\",\n        }\n      }\n    >\n      <span>\n        Something Happened\n      </span>\n    </div>\n    <div\n      className=\"loaderContainer\"\n      data-testid=\"loader\"\n      role=\"alert\"\n      style={\n        {\n          \"height\": 16,\n          \"width\": 16,\n        }\n      }\n      title=\"loading\"\n    >\n      <svg\n        aria-hidden={true}\n        className=\"circleLoaderSpinner\"\n        viewBox=\"0 0 50 50\"\n      >\n        <circle\n          className=\"circleLoaderSpinnerPath\"\n          cx=\"25\"\n          cy=\"25\"\n          fill=\"none\"\n          r=\"20\"\n          strokeWidth=\"5\"\n        />\n      </svg>\n    </div>\n  </div>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    aria-label=\"Close\"\n    className=\"closeButton button sizeMedium kindTertiary colorFixedLight noSidePadding\"\n    data-testid=\"toast-close-button\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    style={\n      {\n        \"alignItems\": \"center\",\n        \"height\": \"32px\",\n        \"justifyContent\": \"center\",\n        \"padding\": 0,\n        \"width\": \"32px\",\n      }\n    }\n    type=\"button\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      width=\"20\"\n    >\n      <path\n        d=\"M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z\"\n      />\n    </svg>\n  </button>\n</div>\n`;\n\nexports[`Toast renders correctly > with negative type 1`] = `\n<div\n  aria-live=\"polite\"\n  className=\"typography fixedLight start singleLineEllipsis text text2Normal toast typeNegative\"\n  data-testid=\"toast\"\n  role=\"alert\"\n>\n  <div\n    className=\"icon\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      width=\"20\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M10 2.10596C9.661 2.10596 9.32868 2.20028 9.04023 2.37836C8.75177 2.55645 8.51855 2.81128 8.36665 3.11435L8.36633 3.11498L2.44277 14.9621L2.44269 14.9623C2.30353 15.2407 2.23784 15.5502 2.25185 15.8612C2.26586 16.1721 2.3591 16.4744 2.52272 16.7392C2.68635 17.0041 2.91493 17.2227 3.18678 17.3744C3.45863 17.5261 3.76473 17.6058 4.07604 17.606H4.07644H15.9236H15.924C16.2353 17.6058 16.5414 17.5261 16.8132 17.3744C17.0851 17.2227 17.3137 17.0041 17.4773 16.7392C17.6409 16.4744 17.7341 16.1721 17.7481 15.8612C17.7622 15.5502 17.6965 15.2407 17.5573 14.9623L17.5572 14.9621L11.6337 3.11498L11.6333 3.11435C11.4815 2.81128 11.2482 2.55645 10.9598 2.37836C10.6713 2.20028 10.339 2.10596 10 2.10596ZM9.82821 3.65471C9.87984 3.62284 9.93932 3.60596 10 3.60596C10.0607 3.60596 10.1202 3.62284 10.1718 3.65471C10.2233 3.68654 10.265 3.73207 10.2922 3.78622L10.2923 3.78645L16.2155 15.6328L16.2156 15.6329C16.2404 15.6827 16.2522 15.7381 16.2497 15.7937C16.2472 15.8493 16.2305 15.9034 16.2012 15.9508C16.1719 15.9982 16.131 16.0374 16.0823 16.0645C16.0337 16.0917 15.9789 16.1059 15.9232 16.106H4.07684C4.02112 16.1059 3.96633 16.0917 3.91767 16.0645C3.86901 16.0374 3.8281 15.9982 3.79881 15.9508C3.76953 15.9034 3.75284 15.8493 3.75033 15.7937C3.74783 15.7381 3.75956 15.6827 3.78441 15.6329L3.78449 15.6328L9.70765 3.78645L9.70777 3.7862C9.73496 3.73206 9.77666 3.68654 9.82821 3.65471ZM10 6.95135C10.4142 6.95135 10.75 7.28714 10.75 7.70135V10.9324C10.75 11.3466 10.4142 11.6824 10 11.6824C9.58579 11.6824 9.25 11.3466 9.25 10.9324V7.70135C9.25 7.28714 9.58579 6.95135 10 6.95135ZM9.2303 13.3937C9.43444 13.1896 9.7113 13.0749 9.99999 13.0749C10.2887 13.0749 10.5655 13.1896 10.7697 13.3937C10.9738 13.5979 11.0885 13.8747 11.0885 14.1634C11.0885 14.4521 10.9738 14.729 10.7697 14.9331C10.5655 15.1372 10.2887 15.2519 9.99999 15.2519C9.7113 15.2519 9.43444 15.1372 9.2303 14.9331C9.02617 14.729 8.91149 14.4521 8.91149 14.1634C8.91149 13.8747 9.02617 13.5979 9.2303 13.3937ZM9.99999 14.1749C10.003 14.1749 10.006 14.1737 10.0081 14.1715C10.0103 14.1694 10.0115 14.1665 10.0115 14.1634C10.0115 14.1604 10.0103 14.1574 10.0081 14.1553C10.006 14.1531 10.003 14.1519 9.99999 14.1519C9.99695 14.1519 9.99402 14.1531 9.99187 14.1553C9.98971 14.1574 9.9885 14.1604 9.9885 14.1634C9.9885 14.1665 9.98971 14.1694 9.99187 14.1715C9.99402 14.1737 9.99695 14.1749 9.99999 14.1749Z\"\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  </div>\n  <div\n    className=\"container directionRow justifyStart alignCenter content\"\n    style={\n      {\n        \"gap\": \"var(--space-24)\",\n      }\n    }\n  >\n    <div\n      className=\"container directionRow justifyStart alignCenter textContent\"\n      data-testid=\"toast-content\"\n      style={\n        {\n          \"gap\": \"var(--space-16)\",\n        }\n      }\n    >\n      <span>\n        Something Happened\n      </span>\n    </div>\n  </div>\n  <button\n    aria-busy={false}\n    aria-disabled={false}\n    aria-label=\"Close\"\n    className=\"closeButton button sizeMedium kindTertiary colorFixedLight noSidePadding\"\n    data-testid=\"toast-close-button\"\n    data-vibe=\"Button\"\n    onBlur={[Function]}\n    onClick={[Function]}\n    onFocus={[Function]}\n    onMouseDown={[Function]}\n    onMouseUp={[Function]}\n    style={\n      {\n        \"alignItems\": \"center\",\n        \"height\": \"32px\",\n        \"justifyContent\": \"center\",\n        \"padding\": 0,\n        \"width\": \"32px\",\n      }\n    }\n    type=\"button\"\n  >\n    <svg\n      aria-hidden={true}\n      className=\"icon noFocusStyle\"\n      data-testid=\"icon\"\n      data-vibe=\"Icon\"\n      fill=\"currentColor\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      width=\"20\"\n    >\n      <path\n        d=\"M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z\"\n      />\n    </svg>\n  </button>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Toast/index.ts",
    "content": "export { default as Toast, type ToastProps } from \"./Toast\";\nexport { default as ToastButton, type ToastButtonProps } from \"./ToastButton/ToastButton\";\nexport { default as ToastLink, type ToastLinkProps } from \"./ToastLink/ToastLink\";\n\nexport * from \"./Toast.types\";\n"
  },
  {
    "path": "packages/core/src/components/Toggle/MockToggle.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n.toggle {\n  @include reset-button();\n  transition: background-color var(--motion-productive-medium) var(--motion-timing-transition);\n  margin: 0 var(--space-8);\n  position: relative;\n  height: var(--toggle-height);\n  width: var(--toggle-width);\n  cursor: pointer;\n  border-radius: 100px !important;\n\n  &::after {\n    background-color: var(--primary-background-color);\n    content: \" \";\n    position: absolute;\n    width: var(--circle-size);\n    height: var(--circle-size);\n    border-radius: 50%;\n    top: calc(50% - 18px / 2);\n    transition: inset-inline-start var(--motion-productive-medium) var(--motion-timing-transition);\n  }\n\n  &.selected {\n    background-color: var(--primary-color);\n    &::after {\n      inset-inline-start: 20px;\n    }\n  }\n\n  &.notSelected {\n    background-color: var(--ui-border-color);\n    &::after {\n      inset-inline-start: 3px;\n    }\n  }\n\n  &.disabled {\n    opacity: var(--disabled-component-opacity);\n    cursor: not-allowed;\n  }\n\n  &.medium {\n    --toggle-width: 41px;\n    --toggle-height: 24px;\n    &::after {\n      --circle-size: 18px;\n    }\n  }\n\n  &.small {\n    --toggle-width: 28px;\n    --toggle-height: 16px;\n    &::after {\n      --circle-size: 12px;\n      top: calc(50% - 6px);\n      inset-inline-start: 14px;\n    }\n    &.notSelected {\n      &::after {\n        inset-inline-start: 2px;\n      }\n    }\n  }\n\n  &.noSpacing {\n    margin: 0;\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/Toggle/MockToggle.tsx",
    "content": "import ToggleText from \"./ToggleText\";\nimport cx from \"classnames\";\nimport React, { type FC } from \"react\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport styles from \"./MockToggle.module.scss\";\nimport { type ToggleSize } from \"./Toggle.types\";\nimport { getStyle } from \"@vibe/shared\";\n\nexport interface MockToggleProps extends VibeComponentProps {\n  /**\n   * If true, hides the on/off labels.\n   */\n  areLabelsHidden?: boolean;\n  /**\n   * If true, the toggle is in the \"on\" state.\n   */\n  checked?: boolean;\n  /**\n   * The text displayed when the toggle is in the \"off\" state.\n   */\n  offOverrideText?: string;\n  /**\n   * The text displayed when the toggle is in the \"on\" state.\n   */\n  onOverrideText?: string;\n  /**\n   * Class name applied when the toggle is selected.\n   */\n  selectedClassName?: string;\n  /**\n   * If true, disables the toggle.\n   */\n  disabled: boolean;\n  /**\n   * The size of the toggle.\n   */\n  size?: ToggleSize;\n}\n\nexport const MockToggle: FC<MockToggleProps> = ({\n  areLabelsHidden,\n  checked,\n  offOverrideText,\n  onOverrideText,\n  className,\n  selectedClassName,\n  disabled,\n  size = \"medium\"\n}) => (\n  <>\n    {areLabelsHidden ? null : <ToggleText disabled={disabled}>{offOverrideText}</ToggleText>}\n    <div\n      className={cx(styles.toggle, getStyle(styles, size), className, {\n        [cx(styles.selected, selectedClassName)]: checked,\n        [styles.notSelected]: !checked,\n        [styles.disabled]: disabled,\n        [styles.noSpacing]: areLabelsHidden\n      })}\n      aria-hidden=\"true\"\n    />\n    {areLabelsHidden ? null : <ToggleText disabled={disabled}>{onOverrideText}</ToggleText>}\n  </>\n);\n"
  },
  {
    "path": "packages/core/src/components/Toggle/Toggle.module.scss",
    "content": "@import \"../../styles/states\";\n\n// Since it is not possible to change the design of the checkbox according to the storybook toggle requirements using css,\n// we hide the checkbox and draw a new one instead.\n// In order to allow accessibility, all operations will be performed on the hidden checkbox and be reflected\n// in the new toggle we drew.\n.toggleInput {\n  // When the hidden checkbox will be focused by keyboard navigation events, the toggle appearance will reflect it\n  &:focus-visible,\n  &.focus-visible { /* stylelint-disable-line selector-class-pattern */\n    & ~ div {\n      @include focus-style-css();\n    }\n  }\n}\n\n.wrapper {\n  display: flex;\n  align-items: center;\n}\n"
  },
  {
    "path": "packages/core/src/components/Toggle/Toggle.tsx",
    "content": "import React, { type ChangeEvent, forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport { noop as NOOP } from \"es-toolkit\";\nimport Switch from \"../Switch/Switch\";\nimport { MockToggle } from \"./MockToggle\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./Toggle.module.scss\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { type ToggleSize } from \"./Toggle.types\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface ToggleProps extends VibeComponentProps {\n  /**\n   * Class name applied when the toggle is selected.\n   */\n  toggleSelectedClassName?: string;\n  /**\n   * If true, the toggle is selected by default.\n   */\n  isDefaultSelected?: boolean;\n  /**\n   * Controls the selected state of the toggle.\n   */\n  isSelected?: boolean;\n  /**\n   * Callback fired when the toggle state changes.\n   */\n  onChange?: (value: boolean, event: ChangeEvent<HTMLInputElement>) => void;\n  /**\n   * The value associated with the toggle.\n   */\n  value?: string;\n  /**\n   * The name attribute of the toggle input.\n   */\n  name?: string;\n  /**\n   * If true, disables the toggle.\n   */\n  disabled?: boolean;\n  /**\n   * If true, hides the on/off labels.\n   */\n  areLabelsHidden?: boolean;\n  /**\n   * The text displayed when the toggle is in the \"on\" position.\n   */\n  onOverrideText?: string;\n  /**\n   * The text displayed when the toggle is in the \"off\" position.\n   */\n  offOverrideText?: string;\n  /**\n   * The ARIA label for accessibility.\n   */\n  \"aria-label\"?: string;\n  /**\n   * The ID of the element controlled by the toggle.\n   */\n  \"aria-controls\"?: string;\n  /**\n   * The size of the toggle.\n   */\n  size?: ToggleSize;\n}\n\nconst Toggle = forwardRef(\n  (\n    {\n      id,\n      className,\n      toggleSelectedClassName,\n      isDefaultSelected = true,\n      isSelected,\n      onChange = NOOP,\n      value,\n      name,\n      disabled,\n      \"aria-label\": ariaLabel,\n      \"aria-controls\": ariaControls,\n      areLabelsHidden = false,\n      onOverrideText = \"On\",\n      offOverrideText = \"Off\",\n      size = \"medium\",\n      \"data-testid\": dataTestId\n    }: ToggleProps,\n    ref: React.ForwardedRef<HTMLInputElement>\n  ) => {\n    const wrapperClassName = cx(styles.wrapper);\n    const inputClassName = cx(styles.toggleInput);\n\n    return (\n      <Switch\n        defaultChecked={isDefaultSelected}\n        checked={isSelected}\n        id={id}\n        wrapperClassName={wrapperClassName}\n        onChange={onChange}\n        value={value}\n        name={name}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-controls={ariaControls}\n        inputClassName={inputClassName}\n        ref={ref}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TOGGLE)}\n        data-vibe={ComponentVibeId.TOGGLE}\n      >\n        <MockToggle\n          areLabelsHidden={areLabelsHidden}\n          offOverrideText={offOverrideText}\n          onOverrideText={onOverrideText}\n          disabled={disabled}\n          className={className}\n          selectedClassName={toggleSelectedClassName}\n          size={size}\n        />\n      </Switch>\n    );\n  }\n);\n\nexport default Toggle;\n"
  },
  {
    "path": "packages/core/src/components/Toggle/Toggle.types.ts",
    "content": "export type ToggleSize = \"small\" | \"medium\";\n"
  },
  {
    "path": "packages/core/src/components/Toggle/ToggleConstants.ts",
    "content": "export const BASE_TOGGLE_CLASS_NAME = \"monday-style-toggle\";\n"
  },
  {
    "path": "packages/core/src/components/Toggle/ToggleText.module.scss",
    "content": ".text {\n  color: var(--primary-text-color);\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  line-height: 22px;\n}\n\n.disabled {\n  color: var(--disabled-text-color);\n}\n"
  },
  {
    "path": "packages/core/src/components/Toggle/ToggleText.tsx",
    "content": "import React, { type FC } from \"react\";\nimport cx from \"classnames\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport styles from \"./ToggleText.module.scss\";\nimport { Text } from \"@vibe/typography\";\n\nexport interface ToggleTextProps extends VibeComponentProps {\n  /**\n   * The text content inside the toggle.\n   */\n  children: string;\n  /**\n   * If true, applies a disabled style to the text.\n   */\n  disabled: boolean;\n}\n\nconst ToggleText: FC<ToggleTextProps> = ({ children, disabled }) => (\n  <Text element=\"span\" type=\"text2\" className={cx(styles.text, { [styles.disabled]: disabled })}>\n    {children}\n  </Text>\n);\nexport default ToggleText;\n"
  },
  {
    "path": "packages/core/src/components/Toggle/__tests__/Toggle.snapshot.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport Toggle from \"../Toggle\";\n\ndescribe(\"Toggle renders correctly\", () => {\n  it(\"renders correctly with empty props\", () => {\n    const tree = renderer.create(<Toggle />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly when selection defined by default selected (on)\", () => {\n    const tree = renderer.create(<Toggle className=\"dummy-class-name\" isDefaultSelected />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly when selection defined by default selected (off)\", () => {\n    const tree = renderer.create(<Toggle className=\"dummy-class-name\" isDefaultSelected={false} />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly when selection defined by isSelected (on)\", () => {\n    const tree = renderer.create(<Toggle className=\"dummy-class-name\" isSelected />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly when selection defined by isSelected (off)\", () => {\n    const tree = renderer.create(<Toggle className=\"dummy-class-name\" isSelected={false} />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly when disabled\", () => {\n    const tree = renderer.create(<Toggle disabled />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with not default onOverrideText\", () => {\n    const tree = renderer.create(<Toggle onOverrideText=\"TestOn\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with not default offOverrideText\", () => {\n    const tree = renderer.create(<Toggle offOverrideText=\"TestOff\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly when labels are hidden\", () => {\n    const tree = renderer.create(<Toggle areLabelsHidden />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n\n  it(\"renders correctly with aria controls\", () => {\n    const tree = renderer.create(<Toggle aria-controls=\"aria controls\" />).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Toggle/__tests__/Toggle.test.tsx",
    "content": "import { vi, afterEach, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { render, cleanup } from \"@testing-library/react\";\nimport Toggle from \"../Toggle\";\n\ndescribe(\"Toggle tests\", () => {\n  const formName = \"myForm\";\n  const toggleRole = \"switch\";\n\n  describe(\"Default selected mode\", () => {\n    afterEach(() => {\n      cleanup();\n    });\n\n    it(\"should change state to off when is default selected and clicked\", () => {\n      const { getByRole } = render(\n        <form name={formName}>\n          <Toggle isDefaultSelected aria-label=\"My Toggle\" />\n        </form>\n      );\n\n      const toggle = getByRole(toggleRole);\n      userEvent.click(toggle);\n      expect(toggle.checked).toBeFalsy();\n    });\n\n    it(\"should change state to on when is default not selected and clicked\", () => {\n      const { getByRole } = render(\n        <form name={formName}>\n          <Toggle isDefaultSelected={false} aria-label=\"My Toggle\" />\n        </form>\n      );\n      const toggle = getByRole(toggleRole);\n      userEvent.click(toggle);\n      expect(toggle.checked).toBeTruthy();\n    });\n\n    it(\"should not change state when disabled, default selected and clicked\", () => {\n      const { getByRole } = render(\n        <form name={formName}>\n          <Toggle disabled isDefaultSelected aria-label=\"My Toggle\" />\n        </form>\n      );\n\n      const toggle = getByRole(toggleRole);\n      userEvent.click(toggle);\n      expect(toggle.checked).toBeTruthy();\n    });\n\n    it(\"should click on toggle trigger on change event with the right parameters\", () => {\n      const onClickMock = vi.fn();\n      const { getByRole } = render(\n        <form name={formName}>\n          <Toggle isDefaultSelected onChange={onClickMock} />\n        </form>\n      );\n\n      const toggle = getByRole(toggleRole);\n      userEvent.click(toggle);\n      expect(onClickMock).toHaveBeenCalledWith(false, expect.anything());\n    });\n  });\n\n  it(\"should click on toggle trigger on change event with the right parameters - controlerd state\", () => {\n    const onClickMock = vi.fn();\n    const { getByRole } = render(\n      <form name={formName}>\n        <Toggle isSelected onChange={onClickMock} />\n      </form>\n    );\n\n    const toggle = getByRole(toggleRole);\n    userEvent.click(toggle);\n    expect(onClickMock).toHaveBeenCalledWith(false, expect.anything());\n  });\n\n  describe(\"a11y\", () => {\n    it(\"should add the aria label\", () => {\n      const ariaLabel = \"Lable Name\";\n      const { getByLabelText } = render(<Toggle aria-label={ariaLabel} />);\n      const toggleComponent = getByLabelText(ariaLabel);\n      expect(toggleComponent).toBeTruthy();\n    });\n  });\n\n  describe(\"Is selected mode\", () => {\n    afterEach(() => {\n      cleanup();\n    });\n\n    it(\"should not change state to off when is selected, clicked and prop does not changed\", () => {\n      const { getByRole } = render(\n        <form name={formName}>\n          <Toggle isSelected aria-label=\"My Toggle\" />\n        </form>\n      );\n\n      const toggle = getByRole(toggleRole);\n      userEvent.click(toggle);\n      expect(toggle.checked).toBeTruthy();\n    });\n\n    it(\"should not change state to on when is not selected, clicked and prop does not changed\", () => {\n      const { getByRole } = render(\n        <form name={formName}>\n          <Toggle isSelected={false} aria-label=\"My Toggle\" />\n        </form>\n      );\n\n      const toggle = getByRole(toggleRole);\n      userEvent.click(toggle);\n      expect(toggle.checked).toBeFalsy();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/Toggle/__tests__/__snapshots__/Toggle.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`Toggle renders correctly > renders correctly when disabled 1`] = `\n<label\n  className=\"wrapper\"\n  data-vibe=\"Toggle\"\n>\n  <input\n    aria-checked={true}\n    checked={true}\n    className=\"hidden-switch toggleInput\"\n    data-testid=\"toggle\"\n    disabled={true}\n    onChange={[Function]}\n    role=\"switch\"\n    type=\"checkbox\"\n  />\n  <span\n    className=\"typography primary start singleLineEllipsis text text2Normal text disabled\"\n    data-testid=\"text\"\n  >\n    Off\n  </span>\n  <div\n    aria-hidden=\"true\"\n    className=\"toggle medium selected disabled\"\n  />\n  <span\n    className=\"typography primary start singleLineEllipsis text text2Normal text disabled\"\n    data-testid=\"text\"\n  >\n    On\n  </span>\n</label>\n`;\n\nexports[`Toggle renders correctly > renders correctly when labels are hidden 1`] = `\n<label\n  className=\"wrapper\"\n  data-vibe=\"Toggle\"\n>\n  <input\n    aria-checked={true}\n    checked={true}\n    className=\"hidden-switch toggleInput\"\n    data-testid=\"toggle\"\n    onChange={[Function]}\n    role=\"switch\"\n    type=\"checkbox\"\n  />\n  <div\n    aria-hidden=\"true\"\n    className=\"toggle medium selected noSpacing\"\n  />\n</label>\n`;\n\nexports[`Toggle renders correctly > renders correctly when selection defined by default selected (off) 1`] = `\n<label\n  className=\"wrapper\"\n  data-vibe=\"Toggle\"\n>\n  <input\n    aria-checked={false}\n    checked={false}\n    className=\"hidden-switch toggleInput\"\n    data-testid=\"toggle\"\n    onChange={[Function]}\n    role=\"switch\"\n    type=\"checkbox\"\n  />\n  <span\n    className=\"typography primary start singleLineEllipsis text text2Normal text\"\n    data-testid=\"text\"\n  >\n    Off\n  </span>\n  <div\n    aria-hidden=\"true\"\n    className=\"toggle medium dummy-class-name notSelected\"\n  />\n  <span\n    className=\"typography primary start singleLineEllipsis text text2Normal text\"\n    data-testid=\"text\"\n  >\n    On\n  </span>\n</label>\n`;\n\nexports[`Toggle renders correctly > renders correctly when selection defined by default selected (on) 1`] = `\n<label\n  className=\"wrapper\"\n  data-vibe=\"Toggle\"\n>\n  <input\n    aria-checked={true}\n    checked={true}\n    className=\"hidden-switch toggleInput\"\n    data-testid=\"toggle\"\n    onChange={[Function]}\n    role=\"switch\"\n    type=\"checkbox\"\n  />\n  <span\n    className=\"typography primary start singleLineEllipsis text text2Normal text\"\n    data-testid=\"text\"\n  >\n    Off\n  </span>\n  <div\n    aria-hidden=\"true\"\n    className=\"toggle medium dummy-class-name selected\"\n  />\n  <span\n    className=\"typography primary start singleLineEllipsis text text2Normal text\"\n    data-testid=\"text\"\n  >\n    On\n  </span>\n</label>\n`;\n\nexports[`Toggle renders correctly > renders correctly when selection defined by isSelected (off) 1`] = `\n<label\n  className=\"wrapper\"\n  data-vibe=\"Toggle\"\n>\n  <input\n    aria-checked={false}\n    checked={false}\n    className=\"hidden-switch toggleInput\"\n    data-testid=\"toggle\"\n    onChange={[Function]}\n    role=\"switch\"\n    type=\"checkbox\"\n  />\n  <span\n    className=\"typography primary start singleLineEllipsis text text2Normal text\"\n    data-testid=\"text\"\n  >\n    Off\n  </span>\n  <div\n    aria-hidden=\"true\"\n    className=\"toggle medium dummy-class-name notSelected\"\n  />\n  <span\n    className=\"typography primary start singleLineEllipsis text text2Normal text\"\n    data-testid=\"text\"\n  >\n    On\n  </span>\n</label>\n`;\n\nexports[`Toggle renders correctly > renders correctly when selection defined by isSelected (on) 1`] = `\n<label\n  className=\"wrapper\"\n  data-vibe=\"Toggle\"\n>\n  <input\n    aria-checked={true}\n    checked={true}\n    className=\"hidden-switch toggleInput\"\n    data-testid=\"toggle\"\n    onChange={[Function]}\n    role=\"switch\"\n    type=\"checkbox\"\n  />\n  <span\n    className=\"typography primary start singleLineEllipsis text text2Normal text\"\n    data-testid=\"text\"\n  >\n    Off\n  </span>\n  <div\n    aria-hidden=\"true\"\n    className=\"toggle medium dummy-class-name selected\"\n  />\n  <span\n    className=\"typography primary start singleLineEllipsis text text2Normal text\"\n    data-testid=\"text\"\n  >\n    On\n  </span>\n</label>\n`;\n\nexports[`Toggle renders correctly > renders correctly with aria controls 1`] = `\n<label\n  className=\"wrapper\"\n  data-vibe=\"Toggle\"\n>\n  <input\n    aria-checked={true}\n    aria-controls=\"aria controls\"\n    checked={true}\n    className=\"hidden-switch toggleInput\"\n    data-testid=\"toggle\"\n    onChange={[Function]}\n    role=\"switch\"\n    type=\"checkbox\"\n  />\n  <span\n    className=\"typography primary start singleLineEllipsis text text2Normal text\"\n    data-testid=\"text\"\n  >\n    Off\n  </span>\n  <div\n    aria-hidden=\"true\"\n    className=\"toggle medium selected\"\n  />\n  <span\n    className=\"typography primary start singleLineEllipsis text text2Normal text\"\n    data-testid=\"text\"\n  >\n    On\n  </span>\n</label>\n`;\n\nexports[`Toggle renders correctly > renders correctly with empty props 1`] = `\n<label\n  className=\"wrapper\"\n  data-vibe=\"Toggle\"\n>\n  <input\n    aria-checked={true}\n    checked={true}\n    className=\"hidden-switch toggleInput\"\n    data-testid=\"toggle\"\n    onChange={[Function]}\n    role=\"switch\"\n    type=\"checkbox\"\n  />\n  <span\n    className=\"typography primary start singleLineEllipsis text text2Normal text\"\n    data-testid=\"text\"\n  >\n    Off\n  </span>\n  <div\n    aria-hidden=\"true\"\n    className=\"toggle medium selected\"\n  />\n  <span\n    className=\"typography primary start singleLineEllipsis text text2Normal text\"\n    data-testid=\"text\"\n  >\n    On\n  </span>\n</label>\n`;\n\nexports[`Toggle renders correctly > renders correctly with not default offOverrideText 1`] = `\n<label\n  className=\"wrapper\"\n  data-vibe=\"Toggle\"\n>\n  <input\n    aria-checked={true}\n    checked={true}\n    className=\"hidden-switch toggleInput\"\n    data-testid=\"toggle\"\n    onChange={[Function]}\n    role=\"switch\"\n    type=\"checkbox\"\n  />\n  <span\n    className=\"typography primary start singleLineEllipsis text text2Normal text\"\n    data-testid=\"text\"\n  >\n    TestOff\n  </span>\n  <div\n    aria-hidden=\"true\"\n    className=\"toggle medium selected\"\n  />\n  <span\n    className=\"typography primary start singleLineEllipsis text text2Normal text\"\n    data-testid=\"text\"\n  >\n    On\n  </span>\n</label>\n`;\n\nexports[`Toggle renders correctly > renders correctly with not default onOverrideText 1`] = `\n<label\n  className=\"wrapper\"\n  data-vibe=\"Toggle\"\n>\n  <input\n    aria-checked={true}\n    checked={true}\n    className=\"hidden-switch toggleInput\"\n    data-testid=\"toggle\"\n    onChange={[Function]}\n    role=\"switch\"\n    type=\"checkbox\"\n  />\n  <span\n    className=\"typography primary start singleLineEllipsis text text2Normal text\"\n    data-testid=\"text\"\n  >\n    Off\n  </span>\n  <div\n    aria-hidden=\"true\"\n    className=\"toggle medium selected\"\n  />\n  <span\n    className=\"typography primary start singleLineEllipsis text text2Normal text\"\n    data-testid=\"text\"\n  >\n    TestOn\n  </span>\n</label>\n`;\n"
  },
  {
    "path": "packages/core/src/components/Toggle/index.ts",
    "content": "export { default as Toggle, type ToggleProps } from \"./Toggle\";\n"
  },
  {
    "path": "packages/core/src/components/TransitionView/TransitionView.module.scss",
    "content": ".slideshow {\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n}\n"
  },
  {
    "path": "packages/core/src/components/TransitionView/TransitionView.tsx",
    "content": "import React, { forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport { type TransitionViewProps } from \"./TransitionView.types\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\nimport styles from \"./TransitionView.module.scss\";\nimport SlideTransition from \"../SlideTransition/SlideTransition\";\n\nconst TransitionView = forwardRef(\n  (\n    { activeStep, direction, id, className, \"data-testid\": dataTestId, children }: TransitionViewProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    return (\n      <div\n        id={id}\n        className={cx(styles.slideshow, className)}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TRANSITION_VIEW, id)}\n        ref={ref}\n      >\n        <SlideTransition key={activeStep} direction={direction}>\n          {children[activeStep]}\n        </SlideTransition>\n      </div>\n    );\n  }\n);\n\nexport default TransitionView;\n"
  },
  {
    "path": "packages/core/src/components/TransitionView/TransitionView.types.ts",
    "content": "import type React from \"react\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { type SlideDirection } from \"../SlideTransition/SlideTransition.types\";\n\nexport interface TransitionViewProps extends VibeComponentProps {\n  /**\n   * The index of the currently active step.\n   */\n  activeStep: number;\n  /**\n   * The direction of the transition between steps.\n   */\n  direction: TransitionViewDirection;\n  /**\n   * The child elements representing the steps in the transition.\n   */\n  children: React.ReactNode[];\n}\n\nexport type TransitionViewDirection = SlideDirection;\n"
  },
  {
    "path": "packages/core/src/components/TransitionView/__tests__/TransitionView.test.tsx",
    "content": "import { describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { render, screen } from \"@testing-library/react\";\nimport TransitionView from \"../TransitionView\";\n\ndescribe(\"TransitionView\", () => {\n  const mockChildren = [<div key=\"1\">Step 1</div>, <div key=\"2\">Step 2</div>, <div key=\"3\">Step 3</div>];\n\n  it(\"should render first step\", () => {\n    render(\n      <TransitionView activeStep={0} direction=\"forward\">\n        {mockChildren}\n      </TransitionView>\n    );\n    expect(screen.getByText(\"Step 1\")).toBeInTheDocument();\n  });\n\n  it(\"should display the correct step based on activeStep prop\", () => {\n    const { rerender } = render(\n      <TransitionView activeStep={0} direction=\"forward\">\n        {mockChildren}\n      </TransitionView>\n    );\n    expect(screen.getByText(\"Step 1\")).toBeInTheDocument();\n\n    rerender(\n      <TransitionView activeStep={1} direction=\"forward\">\n        {mockChildren}\n      </TransitionView>\n    );\n    expect(screen.getByText(\"Step 2\")).toBeInTheDocument();\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/TransitionView/index.ts",
    "content": "export { default as TransitionView } from \"./TransitionView\";\nexport * from \"./TransitionView.types\";\n"
  },
  {
    "path": "packages/core/src/components/VirtualizedGrid/VirtualizedGrid.module.scss",
    "content": "@import \"../../styles/typography\";\n\n.virtualizedGridWrapper {\n  height: 100%;\n  width: 100%;\n}\n"
  },
  {
    "path": "packages/core/src/components/VirtualizedGrid/VirtualizedGrid.tsx",
    "content": "import React, {\n  type CSSProperties,\n  type ReactElement,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from \"react\";\nimport cx from \"classnames\";\nimport {\n  type GridChildComponentProps,\n  type GridOnScrollProps,\n  type ScrollDirection,\n  VariableSizeGrid as Grid,\n  type GridOnItemsRenderedProps\n} from \"react-window\";\nimport AutoSizer from \"react-virtualized-auto-sizer\";\nimport {\n  getNormalizedItems,\n  getOnItemsRenderedData,\n  isLayoutDirectionScrollbarVisible\n} from \"../../services/virtualized-service\";\nimport usePrevious from \"../../hooks/usePrevious\";\nimport useThrottledCallback from \"../../hooks/useThrottledCallback\";\nimport { useMergeRef, NOOP } from \"@vibe/shared\";\nimport { type VibeComponentProps } from \"../../types\";\n\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./VirtualizedGrid.module.scss\";\nimport { type VirtualizedGridItemType as ItemType } from \"./VirtualizedGrid.types\";\n\nexport interface VirtualizedGridProps extends VibeComponentProps {\n  /**\n   * The list of items to be rendered in the grid.\n   */\n  items: ItemType[];\n  /**\n   * Function that renders each item in the grid.\n   */\n  itemRenderer: (item: ItemType, index: number, style: CSSProperties) => ReactElement;\n  /**\n   * Function that returns the row height.\n   */\n  getRowHeight: () => number;\n  /**\n   * Function that returns the column width.\n   */\n  getColumnWidth: () => number;\n  /**\n   * Function that returns the unique ID of an item.\n   */\n  getItemId?: (item: ItemType, index: number) => string;\n  /**\n   * The index of the item to scroll to.\n   */\n  scrollToId?: number;\n  /**\n   * Callback fired when the grid is scrolled.\n   */\n  onScroll?: (horizontalScrollDirection: ScrollDirection, scrollTop: number, scrollUpdateWasRequested: boolean) => void;\n  /**\n   * Callback fired when scrolling has finished.\n   */\n  onScrollToFinished?: () => void;\n  /**\n   * Callback fired when items are rendered in the grid.\n   */\n  onItemsRendered?: ({\n    firstItemId,\n    secondItemId,\n    lastItemId,\n    centerItemId,\n    firstItemOffsetEnd,\n    currentOffsetTop\n  }: {\n    firstItemId: string;\n    secondItemId: string;\n    lastItemId: string;\n    centerItemId: string;\n    firstItemOffsetEnd: number;\n    currentOffsetTop: number;\n  }) => void;\n  /**\n   * The delay (in ms) for throttling the `onItemsRendered` callback.\n   */\n  onItemsRenderedThrottleMs?: number;\n  /**\n   * Callback fired when the grid size is updated.\n   */\n  onSizeUpdate?: (width: number, height: number) => void;\n  /**\n   * Callback fired when the vertical scrollbar visibility changes.\n   */\n  onVerticalScrollbarVisiblityChange?: (value: boolean) => void;\n  /**\n   * Class name applied to the scrollable container.\n   */\n  scrollableClassName?: string;\n}\n\nconst VirtualizedGrid = forwardRef(\n  (\n    {\n      className,\n      id,\n      items = [],\n      itemRenderer,\n      getRowHeight = () => 50,\n      getColumnWidth = () => 100,\n      getItemId = (item: ItemType, _index: number) => item.id,\n      onScroll,\n      scrollToId = null,\n      onScrollToFinished = NOOP,\n      onItemsRendered = null,\n      onItemsRenderedThrottleMs = 200,\n      onSizeUpdate = NOOP,\n      onVerticalScrollbarVisiblityChange = null,\n      scrollableClassName,\n      \"data-testid\": dataTestId\n    }: VirtualizedGridProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    // states\n    const [gridHeight, setGridHeight] = useState(0);\n    const [gridWidth, setGridWidth] = useState(0);\n\n    // prevs\n    const prevScrollToId = usePrevious(scrollToId);\n\n    // Refs\n    const componentRef = useRef(null);\n    const isVerticalScrollbarVisibleRef = useRef(null);\n    const gridRef = useRef(null);\n    const scrollTopRef = useRef(0);\n    const animationDataRef = useRef({\n      scrollOffsetInitial: 0,\n      scrollOffsetFinal: 0,\n      animationStartTime: 0\n    });\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const animationData = animationDataRef.current;\n\n    // Callbacks\n    const heightGetter = useCallback(\n      (item: ItemType) => {\n        const height = getRowHeight();\n        if (!height || Number.isNaN(height)) {\n          console.error(\"Couldn't get height for item: \", item);\n        }\n        return height;\n      },\n      [getRowHeight]\n    );\n\n    const idGetter = useCallback(\n      (item: ItemType, index: number) => {\n        const itemId = getItemId(item, index);\n        if (itemId === undefined) {\n          console.error(\"Couldn't get id for item: \", item);\n        }\n        return itemId;\n      },\n      [getItemId]\n    );\n\n    // Memos\n    // Creates object of itemId => { item, index, height, offsetTop}\n    const normalizedItems = useMemo(() => {\n      return getNormalizedItems(items, idGetter, heightGetter);\n    }, [items, idGetter, heightGetter]);\n\n    const calcColumnCount = useMemo(() => {\n      return Math.min(items.length, Math.floor(gridWidth / getColumnWidth()));\n    }, [items, gridWidth, getColumnWidth]);\n\n    const calcRowCount = useMemo(() => {\n      return calcColumnCount > 0 ? Math.ceil(items.length / calcColumnCount) : 0;\n    }, [items, calcColumnCount]);\n\n    const scrollToColumnIndex = useMemo(() => {\n      return scrollToId % calcColumnCount;\n    }, [scrollToId, calcColumnCount]);\n\n    const scrollToRowIndex = useMemo(() => {\n      return Math.floor(scrollToId / calcColumnCount);\n    }, [scrollToId, calcColumnCount]);\n\n    // Callbacks\n    const onScrollCB = useCallback(\n      ({ horizontalScrollDirection, scrollTop, scrollUpdateWasRequested }: GridOnScrollProps) => {\n        scrollTopRef.current = scrollTop;\n        if (!scrollUpdateWasRequested) {\n          animationData.scrollOffsetInitial = scrollTop;\n        }\n        onScroll && onScroll(horizontalScrollDirection, scrollTop, scrollUpdateWasRequested);\n      },\n      [onScroll, scrollTopRef, animationData]\n    );\n\n    const cellRenderer = useCallback(\n      ({ columnIndex, rowIndex, style }: { columnIndex: number; rowIndex: number; style: CSSProperties }) => {\n        const index = rowIndex * calcColumnCount + columnIndex;\n        const item = items[index];\n        return itemRenderer(item, index, style);\n      },\n      [items, itemRenderer, calcColumnCount]\n    );\n\n    const updateGridSize = useCallback(\n      (width: number, height: number) => {\n        if (height !== gridHeight || width !== gridWidth) {\n          setTimeout(() => {\n            setGridHeight(height);\n            setGridWidth(width);\n            onSizeUpdate(width, height);\n          }, 0);\n        }\n      },\n      [gridHeight, gridWidth, onSizeUpdate]\n    );\n\n    const onItemsRenderedCB = useThrottledCallback(\n      ({ visibleRowStartIndex, visibleRowStopIndex }: GridOnItemsRenderedProps) => {\n        if (!onItemsRendered) return;\n        const data = getOnItemsRenderedData(\n          items,\n          normalizedItems,\n          idGetter,\n          visibleRowStartIndex,\n          visibleRowStopIndex,\n          gridHeight,\n          scrollTopRef.current\n        );\n        onItemsRendered(data);\n      },\n      { wait: onItemsRenderedThrottleMs, trailing: true },\n      [onItemsRendered, items, normalizedItems, idGetter, gridHeight]\n    );\n\n    // Effects\n    useEffect(() => {\n      // scroll to specific item\n      if (scrollToId && prevScrollToId !== scrollToId) {\n        gridRef.current.scrollToItem({\n          align: \"center\",\n          columnIndex: scrollToColumnIndex,\n          rowIndex: scrollToRowIndex\n        });\n        onScrollToFinished();\n      }\n    }, [scrollToId, prevScrollToId, gridRef, scrollToColumnIndex, scrollToRowIndex, onScrollToFinished]);\n\n    useEffect(() => {\n      // recalculate row heights\n      if (gridRef.current) {\n        gridRef.current.resetAfterIndices({ columnIndex: 0, rowIndex: 0 });\n      }\n    }, [normalizedItems]);\n\n    useEffect(() => {\n      // update vertical scrollbar visibility\n      if (onVerticalScrollbarVisiblityChange) {\n        const isVisible = isLayoutDirectionScrollbarVisible(items, normalizedItems, idGetter, gridHeight);\n        if (isVerticalScrollbarVisibleRef.current !== isVisible) {\n          isVerticalScrollbarVisibleRef.current = isVisible;\n          onVerticalScrollbarVisiblityChange(isVisible);\n        }\n      }\n    }, [onVerticalScrollbarVisiblityChange, items, normalizedItems, gridHeight, idGetter]);\n\n    return (\n      <div\n        ref={mergedRef}\n        className={cx(styles.virtualizedGridWrapper, className)}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.VIRTUALIZED_GRID, id)}\n      >\n        <AutoSizer>\n          {({ height, width }: { height: number; width: number }) => {\n            updateGridSize(width, height);\n            return (\n              <Grid\n                ref={gridRef}\n                height={height}\n                width={width}\n                columnWidth={getColumnWidth}\n                columnCount={calcColumnCount}\n                rowHeight={getRowHeight}\n                rowCount={calcRowCount}\n                onScroll={onScrollCB}\n                onItemsRendered={onItemsRenderedCB}\n                className={scrollableClassName}\n              >\n                {cellRenderer as unknown as React.ComponentType<GridChildComponentProps>}\n              </Grid>\n            );\n          }}\n        </AutoSizer>\n      </div>\n    );\n  }\n);\n\nexport default VirtualizedGrid;\n"
  },
  {
    "path": "packages/core/src/components/VirtualizedGrid/VirtualizedGrid.types.ts",
    "content": "export type VirtualizedGridItemType = {\n  value: string;\n  height: number;\n  width: number;\n  id: string;\n};\n"
  },
  {
    "path": "packages/core/src/components/VirtualizedGrid/__tests__/VirtualizedGrid.test.tsx",
    "content": "import { it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport VirtualizedGrid from \"../VirtualizedGrid\";\n\nit(\"renders correctly with empty props\", () => {\n  const tree = renderer.create(<VirtualizedGrid />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\nit(\"renders correctly with class name\", () => {\n  const tree = renderer.create(<VirtualizedGrid className=\"class-name\" />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\nit(\"renders correctly with scrollable class name\", () => {\n  const tree = renderer.create(<VirtualizedGrid scrollableClassName=\"class-name\" />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "packages/core/src/components/VirtualizedGrid/__tests__/__snapshots__/VirtualizedGrid.test.jsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`renders correctly with class name 1`] = `\n<div\n  className=\"virtualizedGridWrapper class-name\"\n  data-testid=\"virtualized-grid\"\n>\n  <div\n    style={\n      {\n        \"height\": 0,\n        \"overflow\": \"visible\",\n        \"width\": 0,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`renders correctly with empty props 1`] = `\n<div\n  className=\"virtualizedGridWrapper\"\n  data-testid=\"virtualized-grid\"\n>\n  <div\n    style={\n      {\n        \"height\": 0,\n        \"overflow\": \"visible\",\n        \"width\": 0,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`renders correctly with scrollable class name 1`] = `\n<div\n  className=\"virtualizedGridWrapper\"\n  data-testid=\"virtualized-grid\"\n>\n  <div\n    style={\n      {\n        \"height\": 0,\n        \"overflow\": \"visible\",\n        \"width\": 0,\n      }\n    }\n  />\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/VirtualizedGrid/__tests__/__snapshots__/VirtualizedGrid.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`renders correctly with class name 1`] = `\n<div\n  className=\"virtualizedGridWrapper class-name\"\n  data-testid=\"virtualized-grid\"\n>\n  <div\n    style={\n      {\n        \"height\": 0,\n        \"overflow\": \"visible\",\n        \"width\": 0,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`renders correctly with empty props 1`] = `\n<div\n  className=\"virtualizedGridWrapper\"\n  data-testid=\"virtualized-grid\"\n>\n  <div\n    style={\n      {\n        \"height\": 0,\n        \"overflow\": \"visible\",\n        \"width\": 0,\n      }\n    }\n  />\n</div>\n`;\n\nexports[`renders correctly with scrollable class name 1`] = `\n<div\n  className=\"virtualizedGridWrapper\"\n  data-testid=\"virtualized-grid\"\n>\n  <div\n    style={\n      {\n        \"height\": 0,\n        \"overflow\": \"visible\",\n        \"width\": 0,\n      }\n    }\n  />\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/VirtualizedGrid/index.ts",
    "content": "export { default as VirtualizedGrid, type VirtualizedGridProps } from \"./VirtualizedGrid\";\nexport * from \"./VirtualizedGrid.types\";\n"
  },
  {
    "path": "packages/core/src/components/VirtualizedList/VirtualizedList.module.scss",
    "content": "@import \"../../styles/typography\";\n\n.virtualizedListWrapper {\n  height: 100%;\n  width: 100%;\n}\n"
  },
  {
    "path": "packages/core/src/components/VirtualizedList/VirtualizedList.tsx",
    "content": "import cx from \"classnames\";\nimport React, {\n  type CSSProperties,\n  type ForwardedRef,\n  forwardRef,\n  type LegacyRef,\n  type ReactElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from \"react\";\nimport { noop as NOOP } from \"es-toolkit\";\nimport {\n  type ScrollDirection,\n  VariableSizeList as List,\n  type ListOnItemsRenderedProps,\n  type ListChildComponentProps,\n  type VariableSizeList\n} from \"react-window\";\nimport AutoSizer from \"react-virtualized-auto-sizer\";\nimport usePrevious from \"../../hooks/usePrevious\";\nimport useThrottledCallback from \"../../hooks/useThrottledCallback\";\nimport { useMergeRef } from \"@vibe/shared\";\nimport {\n  easeInOutQuint,\n  getMaxOffset,\n  getNormalizedItems,\n  getOnItemsRenderedData,\n  isLayoutDirectionScrollbarVisible\n} from \"../../services/virtualized-service\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./VirtualizedList.module.scss\";\nimport {\n  type VirtualizedListItem,\n  type VirtualizedListLayout,\n  type VirtualizedListScrollDirection\n} from \"./VirtualizedList.types\";\n\nexport interface VirtualizedListProps extends VibeComponentProps {\n  /**\n   * Class name applied to the scrollable container.\n   */\n  scrollableClassName?: string;\n  /**\n   * The orientation of the list.\n   */\n  layout?: VirtualizedListLayout;\n  /**\n   * The list of items to be rendered.\n   */\n  items: VirtualizedListItem[];\n  /**\n   * Function to render each item in the list.\n   */\n  itemRenderer: (item: VirtualizedListItem, index: number, style: CSSProperties) => ReactElement | JSX.Element;\n  /**\n   * Function to get the size (height/width) of each item, based on layout.\n   */\n  getItemSize?: (item: VirtualizedListItem, index: number) => number;\n  /**\n   * Function to get the unique ID of an item.\n   */\n  getItemId?: (item: VirtualizedListItem, index: number) => string;\n  /**\n   * Callback fired when the scroll animation is finished.\n   */\n  onScrollToFinished?: () => void;\n  /**\n   * Number of items to render above and below the visible portion.\n   */\n  overscanCount?: number;\n  /**\n   * The duration of the scroll animation in milliseconds.\n   */\n  scrollDuration?: number;\n  /**\n   * Callback fired when items are rendered.\n   */\n  onItemsRendered?: ({\n    firstItemId,\n    secondItemId,\n    lastItemId,\n    centerItemId,\n    firstItemOffsetEnd,\n    currentOffsetTop\n  }: {\n    firstItemId: string;\n    secondItemId: string;\n    lastItemId: string;\n    centerItemId: string;\n    firstItemOffsetEnd: number;\n    currentOffsetTop: number;\n  }) => void;\n  /**\n   * The delay (in ms) for throttling the `onItemsRendered` callback.\n   */\n  onItemsRenderedThrottleMs?: number;\n  /**\n   * Callback fired when the list size changes.\n   */\n  onSizeUpdate?: (width: number, height: number) => void;\n  /**\n   * Callback fired when the vertical or horizontal scrollbar visibility changes.\n   */\n  onLayoutDirectionScrollbarVisibilityChange?: (value: boolean) => void;\n  /**\n   * The ARIA role attribute applied to the list.\n   */\n  role?: string;\n  /**\n   * The ARIA label for the list.\n   */\n  \"aria-label\"?: string;\n  /**\n   * Custom inline styles applied to the list.\n   */\n  style?: CSSProperties;\n  /**\n   * The ID of the item to scroll to.\n   */\n  scrollToId?: string;\n  /**\n   * Reference to the virtualized list component.\n   */\n  virtualListRef?: ForwardedRef<HTMLElement>;\n  /**\n   * Callback fired when the list is scrolled.\n   */\n  onScroll?: (\n    horizontalScrollDirection: VirtualizedListScrollDirection,\n    scrollTop: number,\n    scrollUpdateWasRequested: boolean\n  ) => void;\n}\n\nconst VirtualizedList = forwardRef(\n  (\n    {\n      className,\n      id,\n      items = [],\n      itemRenderer = (item: VirtualizedListItem, _index: number, _style: CSSProperties) => item as ReactElement,\n      getItemSize = (item: VirtualizedListItem, _index: number) => item.height,\n      layout = \"vertical\",\n      onScroll,\n      overscanCount = 0,\n      getItemId = (item: VirtualizedListItem, _index: number) => item.id,\n      scrollToId,\n      scrollDuration = 200,\n      onScrollToFinished = NOOP,\n      onItemsRendered,\n      onItemsRenderedThrottleMs = 200,\n      onSizeUpdate = NOOP,\n      onLayoutDirectionScrollbarVisibilityChange = null,\n      virtualListRef,\n      scrollableClassName,\n      role,\n      \"aria-label\": ariaLabel,\n      style,\n      \"data-testid\": dataTestId\n    }: VirtualizedListProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    // states\n    const [listHeight, setListHeight] = useState(0);\n    const [listWidth, setListWidth] = useState(0);\n\n    const isVerticalList = layout !== \"horizontal\";\n    const listSizeByLayout = useMemo(() => {\n      return isVerticalList ? listHeight : listWidth;\n    }, [isVerticalList, listHeight, listWidth]);\n\n    // prevs\n    const prevScrollToId = usePrevious(scrollToId);\n\n    // Refs\n    const componentRef = useRef(null);\n    const isVerticalScrollbarVisibleRef = useRef(null);\n    const listRef = useRef(null);\n    const scrollTopRef = useRef(0);\n    const animationDataRef = useRef({\n      initialized: false,\n      scrollOffsetInitial: 0,\n      scrollOffsetFinal: 0,\n      animationStartTime: 0\n    });\n    const mergedRef = useMergeRef(ref, componentRef);\n    const mergedListRef = useMergeRef(virtualListRef, listRef);\n\n    const animationData = animationDataRef.current;\n    if (!animationData.initialized) {\n      animationData.initialized = true;\n      animationData.scrollOffsetInitial = 0;\n      animationData.scrollOffsetFinal = 0;\n      animationData.animationStartTime = 0;\n    }\n\n    // Callbacks\n    const sizeGetter = useCallback(\n      (item: VirtualizedListItem, index: number) => {\n        const height = getItemSize(item, index);\n        if (height === undefined) {\n          console.error(\"Couldn't get height for item: \", item);\n        }\n        return height;\n      },\n      [getItemSize]\n    );\n\n    const idGetter = useCallback(\n      (item: VirtualizedListItem, index: number) => {\n        const itemId = getItemId(item, index);\n        if (itemId === undefined) {\n          console.error(\"Couldn't get id for item: \", item);\n        }\n        return itemId;\n      },\n      [getItemId]\n    );\n\n    // Memos\n    // Creates object of itemId => { item, index, size, offsetTop}\n    const normalizedItems = useMemo(() => {\n      return getNormalizedItems(items, idGetter, sizeGetter);\n    }, [items, idGetter, sizeGetter]);\n\n    const maxListOffset = useMemo(() => {\n      return getMaxOffset(listSizeByLayout, normalizedItems);\n    }, [listSizeByLayout, normalizedItems]);\n\n    // Callbacks\n    const onScrollCB = useCallback(\n      ({\n        scrollDirection,\n        scrollOffset,\n        scrollUpdateWasRequested\n      }: {\n        scrollDirection: ScrollDirection;\n        scrollOffset: number;\n        scrollUpdateWasRequested: boolean;\n      }) => {\n        scrollTopRef.current = scrollOffset;\n        if (!scrollUpdateWasRequested) {\n          animationData.scrollOffsetInitial = scrollOffset;\n        }\n        onScroll && onScroll(scrollDirection, scrollOffset, scrollUpdateWasRequested);\n      },\n      [onScroll, scrollTopRef, animationData]\n    );\n\n    const animateScroll = useCallback(() => {\n      requestAnimationFrame(() => {\n        const now = performance.now();\n        const ellapsed = now - animationData.animationStartTime;\n        const scrollDelta = animationData.scrollOffsetFinal - animationData.scrollOffsetInitial;\n        const easedTime = easeInOutQuint(Math.min(1, ellapsed / scrollDuration));\n        const scrollOffset = animationData.scrollOffsetInitial + scrollDelta * easedTime;\n        const finalOffsetValue = Math.min(maxListOffset, scrollOffset);\n        scrollTopRef.current = finalOffsetValue;\n        listRef.current?.scrollTo(finalOffsetValue);\n\n        if (ellapsed < scrollDuration) {\n          animateScroll();\n        } else {\n          animationData.animationStartTime = undefined;\n          onScrollToFinished && onScrollToFinished();\n        }\n      });\n    }, [scrollDuration, animationData, listRef, maxListOffset, onScrollToFinished]);\n\n    const startScrollAnimation = useCallback(\n      (item: VirtualizedListItem) => {\n        const { offsetTop } = item;\n\n        if (animationData.animationStartTime) {\n          // animation already in progress\n          animationData.scrollOffsetFinal = offsetTop;\n          return;\n        }\n\n        // Update the initial scroll offset with the current scroll position for react 18 batching behavior\n        if (listRef.current?.state?.scrollOffset !== null) {\n          animationData.scrollOffsetInitial = listRef.current?.state?.scrollOffset;\n        }\n\n        if (animationData.scrollOffsetInitial === offsetTop) {\n          // offset already equals to item offset\n          onScrollToFinished && onScrollToFinished();\n          return;\n        }\n\n        animationData.scrollOffsetFinal = offsetTop;\n        animationData.animationStartTime = performance.now();\n        animateScroll();\n      },\n      [animationData, animateScroll, onScrollToFinished]\n    );\n\n    const rowRenderer = useCallback(\n      ({ index, style }: { index: number; style: CSSProperties }) => {\n        const item = items[index];\n        return itemRenderer(item, index, style);\n      },\n      [items, itemRenderer]\n    );\n\n    const calcItemSize = useCallback(\n      (index: number) => {\n        const item = items[index];\n        return sizeGetter(item, index);\n      },\n      [items, sizeGetter]\n    );\n\n    const updateListSize = useCallback(\n      (width: number, height: number) => {\n        if (height !== listHeight || width !== listWidth) {\n          setTimeout(() => {\n            setListHeight(height);\n            setListWidth(width);\n            onSizeUpdate(width, height);\n          }, 0);\n        }\n      },\n      [listHeight, listWidth, onSizeUpdate]\n    );\n\n    const onItemsRenderedCB = useThrottledCallback(\n      ({ visibleStartIndex, visibleStopIndex }: ListOnItemsRenderedProps) => {\n        if (!onItemsRendered) return;\n        const data = getOnItemsRenderedData(\n          items,\n          normalizedItems,\n          idGetter,\n          visibleStartIndex,\n          visibleStopIndex,\n          listSizeByLayout,\n          scrollTopRef.current\n        );\n        onItemsRendered(data);\n      },\n      { wait: onItemsRenderedThrottleMs, trailing: true },\n      [onItemsRendered, items, normalizedItems, idGetter, listSizeByLayout]\n    );\n\n    // Effects\n    useEffect(() => {\n      // scroll to specific item\n      if (scrollToId && prevScrollToId !== scrollToId) {\n        const hasScrollbar = isLayoutDirectionScrollbarVisible(items, normalizedItems, idGetter, listSizeByLayout);\n        const item = normalizedItems[scrollToId as keyof typeof normalizedItems];\n        hasScrollbar && item && startScrollAnimation(item);\n      }\n    }, [prevScrollToId, scrollToId, startScrollAnimation, normalizedItems, items, idGetter, listSizeByLayout]);\n\n    useEffect(() => {\n      // recalculate row heights\n      if (listRef.current) {\n        listRef.current.resetAfterIndex(0);\n      }\n    }, [normalizedItems]);\n\n    useEffect(() => {\n      // update vertical scrollbar visibility\n      if (onLayoutDirectionScrollbarVisibilityChange) {\n        const isVisible = isLayoutDirectionScrollbarVisible(items, normalizedItems, idGetter, listSizeByLayout);\n        if (isVerticalScrollbarVisibleRef.current !== isVisible) {\n          isVerticalScrollbarVisibleRef.current = isVisible;\n          onLayoutDirectionScrollbarVisibilityChange(isVisible);\n        }\n      }\n    }, [onLayoutDirectionScrollbarVisibilityChange, items, normalizedItems, listSizeByLayout, idGetter]);\n\n    return (\n      <div\n        ref={mergedRef}\n        className={cx(styles.virtualizedListWrapper, className)}\n        id={id}\n        role={role}\n        aria-label={ariaLabel}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.VIRTUALIZED_LIST, id)}\n        style={style}\n      >\n        <AutoSizer>\n          {({ height, width }: { height: number; width: number }) => {\n            updateListSize(width, height);\n            return (\n              <List\n                ref={mergedListRef as unknown as LegacyRef<VariableSizeList<unknown>>}\n                height={height}\n                width={width}\n                itemCount={items.length}\n                itemSize={calcItemSize}\n                onScroll={onScrollCB}\n                layout={layout}\n                overscanCount={overscanCount}\n                onItemsRendered={onItemsRenderedCB}\n                className={scrollableClassName}\n              >\n                {rowRenderer as React.ComponentType<ListChildComponentProps>}\n              </List>\n            );\n          }}\n        </AutoSizer>\n      </div>\n    );\n  }\n);\n\nexport default VirtualizedList;\n"
  },
  {
    "path": "packages/core/src/components/VirtualizedList/VirtualizedList.types.ts",
    "content": "export type VirtualizedListItem = {\n  value?: string | Record<string, unknown>;\n  height?: number;\n  width?: number;\n  id?: string;\n  offsetTop?: number;\n};\n\nexport {\n  type Layout as VirtualizedListLayout,\n  type ScrollDirection as VirtualizedListScrollDirection\n} from \"react-window\";\n"
  },
  {
    "path": "packages/core/src/components/VirtualizedList/__tests__/VirtualizedList.snapshot.test.tsx",
    "content": "import { it, expect } from \"vitest\";\nimport React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport VirtualizedList from \"../VirtualizedList\";\n\nit(\"renders correctly with empty props\", () => {\n  const tree = renderer.create(<VirtualizedList />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "packages/core/src/components/VirtualizedList/__tests__/__snapshots__/VirtualizedList.snapshot.test.jsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`renders correctly with empty props 1`] = `\n<div\n  className=\"virtualizedListWrapper\"\n  data-testid=\"virtualized-list\"\n>\n  <div\n    style={\n      {\n        \"height\": 0,\n        \"overflow\": \"visible\",\n        \"width\": 0,\n      }\n    }\n  />\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/VirtualizedList/__tests__/__snapshots__/VirtualizedList.snapshot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`renders correctly with empty props 1`] = `\n<div\n  className=\"virtualizedListWrapper\"\n  data-testid=\"virtualized-list\"\n>\n  <div\n    style={\n      {\n        \"height\": 0,\n        \"overflow\": \"visible\",\n        \"width\": 0,\n      }\n    }\n  />\n</div>\n`;\n"
  },
  {
    "path": "packages/core/src/components/VirtualizedList/index.ts",
    "content": "export { default as VirtualizedList, type VirtualizedListProps } from \"./VirtualizedList\";\n\nexport * from \"./VirtualizedList.types\";\n"
  },
  {
    "path": "packages/core/src/components/index.ts",
    "content": "export * from \"./Accordion\";\nexport * from \"./AlertBanner\";\nexport * from \"./AttentionBox\";\nexport * from \"./Avatar\";\nexport * from \"./AvatarGroup\";\nexport * from \"./Badge\";\nexport * from \"./BreadcrumbsBar\";\nexport * from \"@vibe/button\";\nexport * from \"./ButtonGroup\";\nexport * from \"./Checkbox\";\nexport * from \"./Chips\";\n// TODO: export * after removing ClickableWrapper from @vibe/clickable\nexport { Clickable, type ClickableProps, useClickableProps } from \"@vibe/clickable\";\nexport * from \"./ColorPicker\";\nexport * from \"./Combobox\";\nexport * from \"./Counter\";\nexport * from \"./DatePicker\";\n// TODO: export * after removing enums\nexport {\n  Dialog,\n  DialogContentContainer,\n  type DialogProps,\n  type DialogContentContainerProps,\n  type DialogType,\n  type DialogSize,\n  type DialogPosition,\n  type DialogTriggerEvent,\n  type DialogAnimationType,\n  type DialogOffset,\n  type DialogEvent\n} from \"@vibe/dialog\";\nexport * from \"./Divider\";\nexport * from \"./Dropdown\";\nexport * from \"./EditableHeading\";\nexport * from \"./EditableText\";\nexport * from \"./EmptyState\";\nexport * from \"./ExpandCollapse\";\nexport * from \"@vibe/layout\";\nexport * from \"./FormattedNumber\";\nexport * from \"./GridKeyboardNavigationContext\";\nexport { Heading, type HeadingProps, type HeadingType, type HeadingWeight } from \"@vibe/typography\";\nexport * from \"./HiddenText\";\nexport * from \"@vibe/icon\";\nexport * from \"@vibe/icon-button\";\nexport * from \"./Info\";\nexport * from \"./Label\";\nexport { LayerProvider, type LayerProviderType } from \"@vibe/layer\";\nexport * from \"./Link\";\nexport * from \"./List\";\nexport * from \"./ListItem\";\nexport * from \"./ListItemAvatar\";\nexport * from \"./ListItemIcon\";\nexport * from \"./ListTitle\";\nexport * from \"@vibe/loader\";\nexport * from \"./Menu\";\nexport * from \"./MenuButton\";\nexport * from \"./NumberField\";\nexport * from \"./Modal\";\nexport * from \"./MultiStepIndicator\";\nexport * from \"./ProgressBars\";\nexport * from \"./RadioButton\";\nexport * from \"./Search\";\nexport * from \"./Skeleton\";\nexport * from \"./Slider\";\nexport * from \"./SplitButton\";\nexport * from \"./Steps\";\nexport * from \"./Table\";\nexport * from \"./Tabs\";\nexport { Text, type TextProps, type TextType, type TextWeight } from \"@vibe/typography\";\nexport * from \"./TextArea\";\nexport * from \"./TextField\";\nexport * from \"./TextWithHighlight\";\nexport * from \"./ThemeProvider\";\nexport * from \"./Tipseen\";\nexport * from \"./Toast\";\nexport * from \"./Toggle\";\n// TODO: export * after removing enums\nexport { Tooltip, type TooltipProps, type TooltipPositions, type TooltipTheme } from \"@vibe/tooltip\";\nexport * from \"./TransitionView\";\nexport * from \"./VirtualizedGrid\";\nexport * from \"./VirtualizedList\";\n\nexport type { TypographyColor, TypographyAlign } from \"@vibe/typography\";\n\nexport { default as ColorUtils } from \"../utils/colors-utils\";\n"
  },
  {
    "path": "packages/core/src/components/next/List/List.module.scss",
    "content": ".list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n"
  },
  {
    "path": "packages/core/src/components/next/List/List.tsx",
    "content": "import React, { forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport BaseList from \"../../BaseList/BaseList\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentVibeId } from \"../../../tests/constants\";\nimport { type ListProps } from \"./List.types\";\nimport styles from \"./List.module.scss\";\n\nconst List = forwardRef(\n  (\n    {\n      className,\n      id,\n      as = \"ul\",\n      children,\n      \"aria-label\": ariaLabel,\n      \"aria-describedby\": ariaDescribedBy,\n      role = \"listbox\",\n      size = \"small\",\n      maxHeight,\n      focusOnMount = false,\n      defaultFocusIndex,\n      onFocusChange,\n      \"data-testid\": dataTestId\n    }: ListProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    return (\n      <BaseList\n        ref={ref}\n        id={id}\n        className={cx(styles.list, className)}\n        as={as}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedBy}\n        role={role}\n        size={size}\n        maxHeight={maxHeight}\n        focusOnMount={focusOnMount}\n        defaultFocusIndex={defaultFocusIndex}\n        onFocusChange={onFocusChange}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.LIST, id)}\n        data-vibe={ComponentVibeId.LIST}\n      >\n        {children}\n      </BaseList>\n    );\n  }\n);\n\nexport default List;\n"
  },
  {
    "path": "packages/core/src/components/next/List/List.types.ts",
    "content": "import { type ReactElement, type AriaRole } from \"react\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport { type BaseListSizes, type BaseListElement } from \"../../BaseList\";\n\nexport type ListSize = BaseListSizes;\nexport type ListElement = BaseListElement;\n\nexport interface ListProps extends VibeComponentProps {\n  /**\n   * The HTML element to render as. Defaults to \"ul\".\n   */\n  as?: ListElement;\n  /**\n   * The child elements inside the list (typically ListItem components).\n   */\n  children?: ReactElement | ReactElement[];\n  /**\n   * The ARIA label describing the list. Required for accessibility when aria-describedby is not provided.\n   */\n  \"aria-label\"?: string;\n  /**\n   * The ID of an element that describes the list.\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * The ARIA role of the list. Defaults to \"listbox\".\n   */\n  role?: AriaRole;\n  /**\n   * The size of the list items.\n   */\n  size?: ListSize;\n  /**\n   * The maximum height of the list container. Enables scrolling when content exceeds this height.\n   */\n  maxHeight?: number | string;\n  /**\n   * If true, the list will automatically focus on mount.\n   */\n  focusOnMount?: boolean;\n  /**\n   * Index of the item that should be focused initially. Defaults to 0.\n   */\n  defaultFocusIndex?: number;\n  /**\n   * Callback fired when the focused item changes.\n   */\n  onFocusChange?: (index: number, id?: string) => void;\n}\n"
  },
  {
    "path": "packages/core/src/components/next/List/ListItem/ListItem.tsx",
    "content": "import React, { forwardRef, useCallback, useMemo } from \"react\";\nimport BaseItem from \"../../../BaseItem/BaseItem\";\nimport { type BaseItemData } from \"../../../BaseItem\";\nimport { type ListItemProps } from \"./ListItem.types\";\n\nconst ListItem = forwardRef(\n  (\n    {\n      className,\n      id,\n      label,\n      value,\n      selected = false,\n      disabled = false,\n      readOnly = false,\n      dir,\n      role,\n      startElement,\n      endElement,\n      tooltipProps,\n      onClick,\n      onHover,\n      \"data-testid\": dataTestId\n    }: ListItemProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const item: BaseItemData = useMemo(\n      () => ({\n        label,\n        value: value ?? label,\n        disabled,\n        startElement,\n        endElement,\n        tooltipProps\n      }),\n      [label, value, disabled, startElement, endElement, tooltipProps]\n    );\n\n    const handleClick = useCallback(\n      (event: React.MouseEvent | React.KeyboardEvent) => {\n        if (!disabled && onClick) {\n          onClick(event);\n        }\n      },\n      [disabled, onClick]\n    );\n\n    const handleHover = useCallback(\n      (event: React.MouseEvent | React.FocusEvent) => {\n        if (!disabled && onHover) {\n          onHover(event);\n        }\n      },\n      [disabled, onHover]\n    );\n\n    const itemProps = useMemo(\n      () => ({\n        onClick: handleClick,\n        onMouseEnter: handleHover,\n        onFocus: handleHover,\n        \"data-testid\": dataTestId\n      }),\n      [handleClick, handleHover, dataTestId]\n    );\n\n    return (\n      <BaseItem\n        ref={ref}\n        className={className}\n        id={id}\n        item={item}\n        selected={selected}\n        highlighted={false}\n        readOnly={readOnly}\n        dir={dir}\n        role={role}\n        itemProps={itemProps}\n      />\n    );\n  }\n);\n\nexport default ListItem;\n"
  },
  {
    "path": "packages/core/src/components/next/List/ListItem/ListItem.types.ts",
    "content": "import type React from \"react\";\nimport { type AriaRole } from \"react\";\nimport { type VibeComponentProps } from \"../../../../types\";\nimport { type BaseItemDirection, type BaseItemData, type StartElement, type EndElement } from \"../../../BaseItem\";\n\n/**\n * Re-export types from BaseItem for convenience\n */\nexport type ListItemDirection = BaseItemDirection;\nexport type ListItemStartElement = StartElement;\nexport type ListItemEndElement = EndElement;\n\n/**\n * Props for the ListItem component.\n * These are derived from BaseItemData to ensure consistency with the underlying BaseItem component.\n */\nexport interface ListItemProps\n  extends Pick<BaseItemData, \"label\" | \"disabled\" | \"startElement\" | \"endElement\" | \"tooltipProps\">,\n    VibeComponentProps {\n  /**\n   * The value of the list item (used for identification). Defaults to label if not provided.\n   */\n  value?: BaseItemData[\"value\"];\n  /**\n   * If true, the list item is selected.\n   */\n  selected?: boolean;\n  /**\n   * If true, the list item is read-only and cannot be edited.\n   */\n  readOnly?: boolean;\n  /**\n   * Determines the position of the tooltip according to the direction.\n   */\n  dir?: ListItemDirection;\n  /**\n   * The ARIA role of the list item.\n   */\n  role?: AriaRole;\n  /**\n   * Callback fired when the list item is clicked.\n   */\n  onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;\n  /**\n   * Callback fired when the list item is hovered (mouseenter or focus).\n   */\n  onHover?: (event: React.MouseEvent | React.FocusEvent) => void;\n}\n"
  },
  {
    "path": "packages/core/src/components/next/List/ListItem/index.ts",
    "content": "export { default as ListItem } from \"./ListItem\";\nexport * from \"./ListItem.types\";\n"
  },
  {
    "path": "packages/core/src/components/next/List/ListTitle/ListTitle.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n.listTitle {\n  @include smoothing-text;\n  border-radius: var(--border-radius-small);\n}\n\n// Inline padding matches BaseItem for alignment\n.small {\n  padding: var(--space-16) var(--space-8) var(--space-8);\n}\n\n.medium {\n  padding: var(--space-16) 12px var(--space-8);\n}\n\n.large {\n  padding: var(--space-16) 12px var(--space-8);\n}\n\n.sticky {\n  position: sticky;\n  inset-block-start: 0;\n  background-color: var(--primary-background-color);\n  z-index: 1;\n}\n"
  },
  {
    "path": "packages/core/src/components/next/List/ListTitle/ListTitle.tsx",
    "content": "import React, { forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport { Text } from \"@vibe/typography\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../../tests/test-ids-utils\";\nimport { ComponentVibeId } from \"../../../../tests/constants\";\nimport { useBaseList } from \"../../../BaseList/context/BaseListContext\";\nimport { type ListTitleProps } from \"./ListTitle.types\";\nimport styles from \"./ListTitle.module.scss\";\n\nconst ListTitle = forwardRef(\n  (\n    { className, id, children, size: sizeProp, sticky = false, \"data-testid\": dataTestId }: ListTitleProps,\n    ref: React.ForwardedRef<HTMLLIElement>\n  ) => {\n    const { size: contextSize } = useBaseList();\n    const size = sizeProp ?? contextSize ?? \"small\";\n\n    return (\n      <Text\n        element=\"li\"\n        ref={ref}\n        id={id}\n        type=\"text1\"\n        weight=\"medium\"\n        role=\"heading\"\n        aria-level={3}\n        className={cx(\n          styles.listTitle,\n          styles[size],\n          {\n            [styles.sticky]: sticky\n          },\n          className\n        )}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.LIST_TITLE, id)}\n        data-vibe={ComponentVibeId.LIST_TITLE}\n      >\n        {children}\n      </Text>\n    );\n  }\n);\n\nexport default ListTitle;\n"
  },
  {
    "path": "packages/core/src/components/next/List/ListTitle/ListTitle.types.ts",
    "content": "import type { VibeComponentProps } from \"../../../../types\";\nimport type { BaseListSizes } from \"../../../BaseList/BaseList.types\";\n\nexport interface ListTitleProps extends VibeComponentProps {\n  /**\n   * The title text to display.\n   */\n  children?: string;\n  /**\n   * The size of the list title, inherited from the parent list context if not provided.\n   */\n  size?: BaseListSizes;\n  /**\n   * If true, the title will stick to the top when scrolling within a list.\n   */\n  sticky?: boolean;\n}\n"
  },
  {
    "path": "packages/core/src/components/next/List/ListTitle/index.ts",
    "content": "export { default as ListTitle } from \"./ListTitle\";\nexport * from \"./ListTitle.types\";\n"
  },
  {
    "path": "packages/core/src/components/next/List/__tests__/List.test.tsx",
    "content": "import { vi, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { render, screen } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { List, ListItem } from \"../index\";\nimport { type ListProps } from \"../List.types\";\n\nfunction renderList(props?: Partial<ListProps>) {\n  return render(\n    <List aria-label=\"Test List\" {...props}>\n      <ListItem label=\"Item 1\" value=\"1\" />\n      <ListItem label=\"Item 2\" value=\"2\" />\n      <ListItem label=\"Item 3\" value=\"3\" />\n    </List>\n  );\n}\n\ndescribe(\"List (next)\", () => {\n  describe(\"rendering\", () => {\n    it(\"should render with default props\", () => {\n      renderList();\n      expect(screen.getByRole(\"listbox\")).toBeInTheDocument();\n    });\n\n    it(\"should render children correctly\", () => {\n      renderList();\n      expect(screen.getByText(\"Item 1\")).toBeInTheDocument();\n      expect(screen.getByText(\"Item 2\")).toBeInTheDocument();\n      expect(screen.getByText(\"Item 3\")).toBeInTheDocument();\n    });\n\n    it(\"should apply custom className\", () => {\n      renderList({ className: \"custom-list\" });\n      expect(screen.getByRole(\"listbox\")).toHaveClass(\"custom-list\");\n    });\n\n    it(\"should render with custom element type\", () => {\n      render(\n        <List as=\"ol\" aria-label=\"Ordered List\">\n          <ListItem label=\"Item 1\" value=\"1\" />\n        </List>\n      );\n      const list = screen.getByRole(\"listbox\");\n      expect(list.tagName.toLowerCase()).toBe(\"ol\");\n    });\n\n    it(\"should render with custom id\", () => {\n      renderList({ id: \"custom-list-id\" });\n      expect(screen.getByRole(\"listbox\")).toHaveAttribute(\"id\", \"custom-list-id\");\n    });\n  });\n\n  describe(\"accessibility\", () => {\n    it(\"should have correct aria-label\", () => {\n      renderList({ \"aria-label\": \"Custom Label\" });\n      expect(screen.getByLabelText(\"Custom Label\")).toBeInTheDocument();\n    });\n\n    it(\"should have role listbox\", () => {\n      renderList();\n      expect(screen.getByRole(\"listbox\")).toBeInTheDocument();\n    });\n\n    it(\"should have aria-describedby when provided\", () => {\n      render(\n        <>\n          <span id=\"description\">List description</span>\n          <List aria-label=\"Test\" aria-describedby=\"description\">\n            <ListItem label=\"Item 1\" value=\"1\" />\n          </List>\n        </>\n      );\n      expect(screen.getByRole(\"listbox\")).toHaveAttribute(\"aria-describedby\", \"description\");\n    });\n\n    it(\"should render children with option role\", () => {\n      renderList();\n      const items = screen.getAllByRole(\"option\");\n      expect(items).toHaveLength(3);\n    });\n\n    it(\"should support custom role\", () => {\n      render(\n        <List aria-label=\"Menu\" role=\"menu\">\n          <ListItem label=\"Action 1\" value=\"1\" />\n          <ListItem label=\"Action 2\" value=\"2\" />\n        </List>\n      );\n      expect(screen.getByRole(\"menu\")).toBeInTheDocument();\n      // Children should get menuitem role automatically from BaseList\n      const items = screen.getAllByRole(\"menuitem\");\n      expect(items).toHaveLength(2);\n    });\n\n    it(\"should support list role\", () => {\n      render(\n        <List aria-label=\"Navigation\" role=\"list\">\n          <ListItem label=\"Link 1\" value=\"1\" />\n          <ListItem label=\"Link 2\" value=\"2\" />\n        </List>\n      );\n      expect(screen.getByRole(\"list\")).toBeInTheDocument();\n    });\n  });\n\n  describe(\"keyboard navigation\", () => {\n    it(\"should navigate down with arrow key\", async () => {\n      renderList();\n\n      const list = screen.getByRole(\"listbox\");\n      list.focus();\n\n      const items = screen.getAllByRole(\"option\");\n      expect(items[0]).toHaveAttribute(\"tabindex\", \"0\");\n\n      await userEvent.keyboard(\"{ArrowDown}\");\n\n      // After pressing down, second item should be focusable\n      expect(items[1]).toHaveAttribute(\"tabindex\", \"0\");\n      expect(items[0]).toHaveAttribute(\"tabindex\", \"-1\");\n    });\n\n    it(\"should navigate up with arrow key\", async () => {\n      renderList({ defaultFocusIndex: 2 });\n\n      const list = screen.getByRole(\"listbox\");\n      list.focus();\n\n      const items = screen.getAllByRole(\"option\");\n      expect(items[2]).toHaveAttribute(\"tabindex\", \"0\");\n\n      await userEvent.keyboard(\"{ArrowUp}\");\n\n      expect(items[1]).toHaveAttribute(\"tabindex\", \"0\");\n      expect(items[2]).toHaveAttribute(\"tabindex\", \"-1\");\n    });\n\n    it(\"should wrap to last item when pressing up from first item\", async () => {\n      renderList({ defaultFocusIndex: 0 });\n\n      const list = screen.getByRole(\"listbox\");\n      list.focus();\n\n      const items = screen.getAllByRole(\"option\");\n      await userEvent.keyboard(\"{ArrowUp}\");\n\n      // Should wrap to last item\n      expect(items[2]).toHaveAttribute(\"tabindex\", \"0\");\n    });\n\n    it(\"should wrap to first item when pressing down from last item\", async () => {\n      renderList({ defaultFocusIndex: 2 });\n\n      const list = screen.getByRole(\"listbox\");\n      list.focus();\n\n      const items = screen.getAllByRole(\"option\");\n      await userEvent.keyboard(\"{ArrowDown}\");\n\n      // Should wrap to first item\n      expect(items[0]).toHaveAttribute(\"tabindex\", \"0\");\n    });\n  });\n\n  describe(\"focus management\", () => {\n    it(\"should call onFocusChange when focus changes\", async () => {\n      const onFocusChange = vi.fn();\n\n      renderList({ onFocusChange });\n\n      const list = screen.getByRole(\"listbox\");\n      list.focus();\n\n      await userEvent.keyboard(\"{ArrowDown}\");\n\n      expect(onFocusChange).toHaveBeenCalledWith(1, expect.any(String));\n    });\n\n    it(\"should focus list on mount when focusOnMount is true\", () => {\n      renderList({ focusOnMount: true });\n\n      // Note: focusOnMount uses requestAnimationFrame, so we may need to wait\n      // This is a basic check that the component renders\n      expect(screen.getByRole(\"listbox\")).toBeInTheDocument();\n    });\n\n    it(\"should respect defaultFocusIndex\", () => {\n      renderList({ defaultFocusIndex: 1 });\n\n      const items = screen.getAllByRole(\"option\");\n      expect(items[1]).toHaveAttribute(\"tabindex\", \"0\");\n      expect(items[0]).toHaveAttribute(\"tabindex\", \"-1\");\n    });\n  });\n\n  describe(\"scrollable container\", () => {\n    it(\"should apply maxHeight as CSS variable\", () => {\n      renderList({ maxHeight: 200 });\n      expect(screen.getByRole(\"listbox\")).toHaveStyle({ \"--baselist-max-height\": \"200px\" });\n    });\n\n    it(\"should apply maxHeight as string via CSS variable\", () => {\n      renderList({ maxHeight: \"50vh\" });\n      expect(screen.getByRole(\"listbox\")).toHaveStyle({ \"--baselist-max-height\": \"50vh\" });\n    });\n  });\n\n  describe(\"sizes\", () => {\n    it(\"should render with small size\", () => {\n      render(\n        <List aria-label=\"Small list\" size=\"small\">\n          <ListItem label=\"Item 1\" value=\"1\" />\n        </List>\n      );\n      expect(screen.getByRole(\"listbox\")).toBeInTheDocument();\n    });\n\n    it(\"should render with medium size (default)\", () => {\n      render(\n        <List aria-label=\"Medium list\" size=\"medium\">\n          <ListItem label=\"Item 1\" value=\"1\" />\n        </List>\n      );\n      expect(screen.getByRole(\"listbox\")).toBeInTheDocument();\n    });\n\n    it(\"should render with large size\", () => {\n      render(\n        <List aria-label=\"Large list\" size=\"large\">\n          <ListItem label=\"Item 1\" value=\"1\" />\n        </List>\n      );\n      expect(screen.getByRole(\"listbox\")).toBeInTheDocument();\n    });\n  });\n\n  describe(\"with selected items\", () => {\n    it(\"should support selected items\", () => {\n      render(\n        <List aria-label=\"Test List\">\n          <ListItem label=\"Item 1\" value=\"1\" />\n          <ListItem label=\"Item 2\" value=\"2\" selected />\n          <ListItem label=\"Item 3\" value=\"3\" />\n        </List>\n      );\n\n      const items = screen.getAllByRole(\"option\");\n      expect(items[1]).toHaveAttribute(\"aria-selected\", \"true\");\n    });\n  });\n\n  describe(\"with disabled items\", () => {\n    it(\"should support disabled items\", () => {\n      render(\n        <List aria-label=\"Test List\">\n          <ListItem label=\"Item 1\" value=\"1\" />\n          <ListItem label=\"Disabled Item\" value=\"disabled\" disabled />\n          <ListItem label=\"Item 2\" value=\"2\" />\n        </List>\n      );\n\n      const disabledItem = screen.getByText(\"Disabled Item\").closest(\"[role='option']\");\n      expect(disabledItem).toHaveClass(\"disabled\");\n    });\n  });\n\n  describe(\"data-testid\", () => {\n    it(\"should have default data-testid when id is provided\", () => {\n      renderList({ id: \"my-list\" });\n      expect(screen.getByTestId(\"list_my-list\")).toBeInTheDocument();\n    });\n\n    it(\"should use custom data-testid when provided\", () => {\n      renderList({ \"data-testid\": \"custom-testid\" });\n      expect(screen.getByTestId(\"custom-testid\")).toBeInTheDocument();\n    });\n  });\n});\n\ndescribe(\"List with wrapped items\", () => {\n  function CustomWrapper({ children }: { children: React.ReactNode }) {\n    return <>{children}</>;\n  }\n\n  it(\"should render items wrapped in a custom component\", () => {\n    render(\n      <List aria-label=\"Test List\">\n        <ListItem label=\"Item 1\" value=\"1\" />\n        <CustomWrapper>\n          <ListItem label=\"Wrapped Item\" value=\"wrapped\" />\n        </CustomWrapper>\n        <ListItem label=\"Item 3\" value=\"3\" />\n      </List>\n    );\n\n    expect(screen.getByText(\"Item 1\")).toBeInTheDocument();\n    expect(screen.getByText(\"Wrapped Item\")).toBeInTheDocument();\n    expect(screen.getByText(\"Item 3\")).toBeInTheDocument();\n  });\n\n  it(\"should include wrapped items in keyboard navigation\", async () => {\n    render(\n      <List aria-label=\"Test List\">\n        <ListItem label=\"Item 1\" value=\"1\" />\n        <CustomWrapper>\n          <ListItem label=\"Wrapped Item\" value=\"wrapped\" />\n        </CustomWrapper>\n        <ListItem label=\"Item 3\" value=\"3\" />\n      </List>\n    );\n\n    const list = screen.getByRole(\"listbox\");\n    list.focus();\n\n    const items = screen.getAllByRole(\"option\");\n    expect(items[0]).toHaveAttribute(\"tabindex\", \"0\");\n\n    await userEvent.keyboard(\"{ArrowDown}\");\n    expect(items[1]).toHaveAttribute(\"tabindex\", \"0\");\n    expect(items[0]).toHaveAttribute(\"tabindex\", \"-1\");\n\n    await userEvent.keyboard(\"{ArrowDown}\");\n    expect(items[2]).toHaveAttribute(\"tabindex\", \"0\");\n    expect(items[1]).toHaveAttribute(\"tabindex\", \"-1\");\n  });\n\n  it(\"should support click on wrapped item\", async () => {\n    const onClick = vi.fn();\n    render(\n      <List aria-label=\"Test List\">\n        <ListItem label=\"Item 1\" value=\"1\" />\n        <CustomWrapper>\n          <ListItem label=\"Wrapped Item\" value=\"wrapped\" onClick={onClick} />\n        </CustomWrapper>\n      </List>\n    );\n\n    await userEvent.click(screen.getByText(\"Wrapped Item\"));\n    expect(onClick).toHaveBeenCalled();\n  });\n\n  it(\"should support selected state on wrapped item\", () => {\n    render(\n      <List aria-label=\"Test List\">\n        <ListItem label=\"Item 1\" value=\"1\" />\n        <CustomWrapper>\n          <ListItem label=\"Wrapped Item\" value=\"wrapped\" selected />\n        </CustomWrapper>\n      </List>\n    );\n\n    const items = screen.getAllByRole(\"option\");\n    expect(items[1]).toHaveAttribute(\"aria-selected\", \"true\");\n  });\n\n  it(\"should render items from a mapped array with keyboard navigation\", async () => {\n    const items = [\n      { label: \"Dynamic 1\", value: \"d1\" },\n      { label: \"Dynamic 2\", value: \"d2\" },\n      { label: \"Dynamic 3\", value: \"d3\" }\n    ];\n\n    render(\n      <List aria-label=\"Test List\">\n        {items.map(item => (\n          <ListItem key={item.value} label={item.label} value={item.value} />\n        ))}\n      </List>\n    );\n\n    expect(screen.getByText(\"Dynamic 1\")).toBeInTheDocument();\n    expect(screen.getByText(\"Dynamic 2\")).toBeInTheDocument();\n    expect(screen.getByText(\"Dynamic 3\")).toBeInTheDocument();\n\n    const options = screen.getAllByRole(\"option\");\n    expect(options).toHaveLength(3);\n\n    // Keyboard navigation should work across dynamically rendered items\n    const list = screen.getByRole(\"listbox\");\n    list.focus();\n\n    await userEvent.keyboard(\"{ArrowDown}\");\n    expect(options[1]).toHaveAttribute(\"tabindex\", \"0\");\n\n    await userEvent.keyboard(\"{ArrowDown}\");\n    expect(options[2]).toHaveAttribute(\"tabindex\", \"0\");\n  });\n});\n\ndescribe(\"ListItem\", () => {\n  describe(\"rendering\", () => {\n    it(\"should render with label\", () => {\n      render(\n        <List aria-label=\"Test\">\n          <ListItem label=\"Test Label\" />\n        </List>\n      );\n      expect(screen.getByText(\"Test Label\")).toBeInTheDocument();\n    });\n  });\n\n  describe(\"interactions\", () => {\n    it(\"should call onClick when clicked\", async () => {\n      const onClick = vi.fn();\n      render(\n        <List aria-label=\"Test\">\n          <ListItem label=\"Clickable\" onClick={onClick} />\n        </List>\n      );\n\n      await userEvent.click(screen.getByText(\"Clickable\"));\n      expect(onClick).toHaveBeenCalled();\n    });\n\n    it(\"should not call onClick when disabled\", async () => {\n      const onClick = vi.fn();\n      render(\n        <List aria-label=\"Test\">\n          <ListItem label=\"Disabled\" onClick={onClick} disabled />\n        </List>\n      );\n\n      await userEvent.click(screen.getByText(\"Disabled\"));\n      expect(onClick).not.toHaveBeenCalled();\n    });\n\n    it(\"should call onHover when mouse enters\", async () => {\n      const onHover = vi.fn();\n      render(\n        <List aria-label=\"Test\">\n          <ListItem label=\"Hoverable\" onHover={onHover} />\n        </List>\n      );\n\n      await userEvent.hover(screen.getByText(\"Hoverable\"));\n      expect(onHover).toHaveBeenCalled();\n    });\n\n    it(\"should call onHover when focused via tab\", async () => {\n      const onHover = vi.fn();\n      render(\n        <List aria-label=\"Test\">\n          <ListItem label=\"Focusable\" onHover={onHover} />\n        </List>\n      );\n\n      await userEvent.tab();\n      await userEvent.tab(); // Tab to the list item\n      expect(onHover).toHaveBeenCalled();\n    });\n\n    it(\"should not call onHover when disabled\", async () => {\n      const onHover = vi.fn();\n      render(\n        <List aria-label=\"Test\">\n          <ListItem label=\"Disabled\" onHover={onHover} disabled />\n        </List>\n      );\n\n      await userEvent.hover(screen.getByText(\"Disabled\"));\n      expect(onHover).not.toHaveBeenCalled();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/components/next/List/index.ts",
    "content": "export { default as List } from \"./List\";\nexport * from \"./List.types\";\nexport { ListItem } from \"./ListItem\";\nexport * from \"./ListItem/ListItem.types\";\nexport { ListTitle } from \"./ListTitle\";\nexport * from \"./ListTitle/ListTitle.types\";\n"
  },
  {
    "path": "packages/core/src/components/next/index.ts",
    "content": "export * from \"./List\";\n"
  },
  {
    "path": "packages/core/src/components/next.ts",
    "content": "export * from \"./next/index\";\n"
  },
  {
    "path": "packages/core/src/constants/index.ts",
    "content": "export * from \"./keyCodes\";\nexport * from \"./sizes\";\n"
  },
  {
    "path": "packages/core/src/constants/keyCodes.ts",
    "content": "export const keyCodes = {\n  ENTER: \"Enter\",\n  SPACE: \" \",\n  ESCAPE: \"Escape\",\n  DOWN_ARROW: \"ArrowDown\",\n  UP_ARROW: \"ArrowUp\",\n  LEFT_ARROW: \"ArrowLeft\",\n  RIGHT_ARROW: \"ArrowRight\",\n  TAB: \"Tab\",\n  HOME: \"Home\",\n  END: \"End\",\n  PAGE_UP: \"PageUp\",\n  PAGE_DOWN: \"PageDown\"\n};\n\nexport const SELECTION_KEYS = [keyCodes.ENTER, keyCodes.SPACE];\nexport const UP_DOWN_ARROWS = [keyCodes.UP_ARROW, keyCodes.DOWN_ARROW];\n"
  },
  {
    "path": "packages/core/src/constants/sizes.ts",
    "content": "export const BASE_SIZES = {\n  SMALL: \"small\",\n  MEDIUM: \"medium\",\n  LARGE: \"large\"\n} as const;\n\nexport const SIZES = { XXS: \"xxs\", XS: \"xs\", ...BASE_SIZES } as const;\n\nexport enum BaseSizes {\n  SMALL = \"small\",\n  MEDIUM = \"medium\",\n  LARGE = \"large\"\n}\n\nexport enum Sizes {\n  XXS = \"xxs\",\n  XS = \"xs\",\n  SMALL = \"small\",\n  MEDIUM = \"medium\",\n  LARGE = \"large\"\n}\n\nexport type SIZES_VALUES = (typeof SIZES)[keyof typeof SIZES];\n"
  },
  {
    "path": "packages/core/src/helpers/textManipulations.ts",
    "content": "import { convertToArray } from \"@vibe/shared\";\n\nconst MIN_PRECISION = 0;\nconst MAX_PRECISION = 20;\nconst DEFAULT_LOCAL = \"en-US\";\n\nfunction validateLocalSupported(local: string) {\n  let isLocalSupported;\n  try {\n    const options = { localeMatcher: \"lookup\" as const };\n    isLocalSupported = !!Intl.NumberFormat.supportedLocalesOf(convertToArray(local), options).length;\n  } catch (err) {\n    isLocalSupported = false;\n  }\n\n  return isLocalSupported;\n}\n\nfunction validatePrecision(precision: number) {\n  if (precision < MIN_PRECISION) return MIN_PRECISION;\n  if (precision > MAX_PRECISION) return MAX_PRECISION;\n  return precision;\n}\n\nexport const formatNumberConsts = Object.freeze({\n  MIN_PRECISION,\n  MAX_PRECISION,\n  DEFAULT_LOCAL\n});\n\nexport function formatNumber(\n  value: number,\n  {\n    local = DEFAULT_LOCAL,\n    isCompact = true,\n    precision = 2\n  }: { local?: Intl.Locale[\"language\"]; isCompact?: boolean; precision?: number } = {}\n) {\n  if (value === undefined || value === null) return;\n  const isLocalSupported = validateLocalSupported(local);\n  const normalizedPrecision = validatePrecision(precision);\n  const selectedLocal = isLocalSupported ? local : DEFAULT_LOCAL;\n  return new Intl.NumberFormat(selectedLocal, {\n    ...(isCompact && { notation: \"compact\" }),\n    maximumFractionDigits: normalizedPrecision\n  }).format(value);\n}\n"
  },
  {
    "path": "packages/core/src/hooks/__tests__/useDebounceEvent.test.ts",
    "content": "import { vi, beforeEach, afterEach, describe, it, expect, type Mock } from \"vitest\";\nimport { renderHook, cleanup, act, type RenderHookResult } from \"@testing-library/react-hooks\";\nimport useDebounceEvent, { type UseDebounceResult } from \"../useDebounceEvent\";\nimport { type ChangeEvent } from \"react\";\n\ndescribe(\"useDebounceEvent\", () => {\n  const delay = 0;\n  const initialStateValue = \"\";\n  let onChangeCallbackStub: Mock;\n  let hookResult: RenderHookResult<unknown, UseDebounceResult>;\n\n  beforeEach(() => {\n    onChangeCallbackStub = vi.fn();\n    hookResult = renderHook(() =>\n      useDebounceEvent({\n        delay,\n        initialStateValue,\n        onChange: onChangeCallbackStub\n      })\n    );\n  });\n\n  afterEach(() => {\n    cleanup();\n  });\n\n  describe(\"return types\", () => {\n    it(\"should give a callback function\", () => {\n      expect(typeof hookResult.result.current.onEventChanged).toEqual(\"function\");\n    });\n\n    it(\"should give a clear function\", () => {\n      expect(typeof hookResult.result.current.clearValue).toEqual(\"function\");\n    });\n\n    it(\"should give a update function\", () => {\n      expect(typeof hookResult.result.current.updateValue).toEqual(\"function\");\n    });\n\n    it(\"should give the value\", () => {\n      expect(typeof hookResult.result.current.inputValue).toEqual(\"string\");\n    });\n  });\n  describe(\"updating the value with input event\", () => {\n    it(\"should update the value\", () => {\n      const { onEventChanged } = hookResult.result.current;\n      const newInputValue = \"input value\";\n\n      act(() => {\n        onEventChanged(getEventObject(newInputValue));\n      });\n\n      expect(hookResult.result.current.inputValue).toEqual(newInputValue);\n    });\n\n    it(\"should trim the value\", () => {\n      const hookRes = renderHook(() =>\n        useDebounceEvent({\n          delay: 0,\n          trim: true,\n          onChange: onChangeCallbackStub,\n          initialStateValue: \"\"\n        })\n      );\n\n      const { onEventChanged } = hookRes.result.current;\n      const newInputValue = \"value     \";\n      act(() => {\n        onEventChanged(getEventObject(newInputValue));\n      });\n      expect(hookRes.result.current.inputValue).toEqual(newInputValue.trim());\n    });\n\n    it(\"should clear the value\", () => {\n      const { clearValue } = hookResult.result.current;\n\n      act(() => {\n        clearValue();\n      });\n\n      expect(hookResult.result.current.inputValue).toEqual(\"\");\n    });\n\n    it(\"should call onChange with the correct value\", () => {\n      const { onEventChanged } = hookResult.result.current;\n      const newInputValue = \"input value\";\n\n      act(() => {\n        onEventChanged(getEventObject(newInputValue));\n      });\n\n      expect(onChangeCallbackStub.mock.calls[0][0]).toEqual(newInputValue);\n    });\n  });\n  describe(\"debounced\", () => {\n    const additionalDelay = 200;\n\n    beforeEach(() => {\n      vi.useFakeTimers();\n\n      hookResult = renderHook(() =>\n        useDebounceEvent({\n          delay: additionalDelay,\n          initialStateValue,\n          onChange: onChangeCallbackStub\n        })\n      );\n    });\n\n    afterEach(() => {\n      vi.useRealTimers();\n    });\n\n    it(\"should not call the onChange immediately\", () => {\n      const { onEventChanged } = hookResult.result.current;\n      const newInputValue = \"input value\";\n      act(() => {\n        onEventChanged(getEventObject(newInputValue));\n      });\n      expect(onChangeCallbackStub.mock.calls.length).toEqual(0);\n    });\n\n    it(\"should not call the onChange before the timer passes\", () => {\n      const { onEventChanged } = hookResult.result.current;\n      const newInputValue = \"input value\";\n      act(() => {\n        onEventChanged(getEventObject(newInputValue));\n      });\n      vi.advanceTimersByTime(additionalDelay - 1);\n\n      expect(onChangeCallbackStub.mock.calls.length).toEqual(0);\n    });\n\n    it(\"should be called after the timeout\", () => {\n      const { onEventChanged } = hookResult.result.current;\n      const newInputValue = \"input value\";\n      act(() => {\n        onEventChanged(getEventObject(newInputValue));\n      });\n\n      vi.runOnlyPendingTimers();\n\n      expect(onChangeCallbackStub.mock.calls.length).toEqual(1);\n    });\n  });\n});\n\nfunction getEventObject(value: string): ChangeEvent<Partial<HTMLInputElement>> {\n  return {\n    bubbles: false,\n    cancelable: false,\n    currentTarget: undefined,\n    defaultPrevented: false,\n    eventPhase: 0,\n    isTrusted: false,\n    nativeEvent: undefined,\n    timeStamp: 0,\n    type: \"\",\n    isDefaultPrevented(): boolean {\n      return false;\n    },\n    isPropagationStopped(): boolean {\n      return false;\n    },\n    persist(): void {},\n    preventDefault(): void {},\n    stopPropagation(): void {},\n    target: {\n      value,\n      addEventListener(): void {},\n      dispatchEvent(): boolean {\n        return false;\n      },\n      removeEventListener(): void {}\n    }\n  };\n}\n"
  },
  {
    "path": "packages/core/src/hooks/__tests__/useEventListener.test.ts",
    "content": "import { vi, beforeEach, afterEach, describe, it, expect, type Mock } from \"vitest\";\nimport { renderHook, cleanup, act } from \"@testing-library/react-hooks\";\nimport { fireEvent } from \"@testing-library/react\";\nimport useEventListener from \"../useEventListener\";\n\ndescribe(\"useEventListener\", () => {\n  let element: HTMLElement;\n  let callbackStub: Mock;\n  describe(\"click\", () => {\n    beforeEach(() => {\n      callbackStub = vi.fn();\n      element = document.createElement(\"div\");\n      document.body.appendChild(element);\n      renderHook(() =>\n        useEventListener({\n          eventName: \"click\",\n          ref: { current: element },\n          callback: callbackStub\n        })\n      );\n    });\n\n    afterEach(() => {\n      element.remove();\n      cleanup();\n    });\n\n    it(\"should call the callback when clicking\", () => {\n      act(() => {\n        fireEvent.click(element);\n      });\n      return expect(callbackStub.mock.calls.length).toEqual(1);\n    });\n\n    it(\"should not call callback on a different (not click) event\", () => {\n      act(() => {\n        fireEvent.keyDown(element);\n      });\n      return expect(callbackStub.mock.calls.length).toEqual(0);\n    });\n  });\n\n  describe(\"custom event\", () => {\n    const customEventName = \"testEvent\";\n    const differentEventName = \"testEvent-different\";\n    beforeEach(() => {\n      callbackStub = vi.fn();\n      element = document.createElement(\"div\");\n      document.body.appendChild(element);\n      renderHook(() =>\n        useEventListener({\n          eventName: customEventName,\n          ref: { current: element },\n          callback: callbackStub\n        })\n      );\n    });\n\n    afterEach(() => {\n      element.remove();\n      cleanup();\n    });\n\n    it(\"should call the callback when clicking\", () => {\n      act(() => {\n        fireEvent(\n          element,\n          new Event(customEventName, {\n            bubbles: true,\n            cancelable: true\n          })\n        );\n      });\n      return expect(callbackStub.mock.calls.length).toEqual(1);\n    });\n\n    it(\"should not call callback on a different custom event event\", () => {\n      act(() => {\n        fireEvent(\n          element,\n          new Event(differentEventName, {\n            bubbles: true,\n            cancelable: true\n          })\n        );\n      });\n      return expect(callbackStub.mock.calls.length).toEqual(0);\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/hooks/__tests__/useKeyEvent.test.ts",
    "content": "import { vi, beforeEach, afterEach, describe, it, expect, type Mock } from \"vitest\";\nimport { renderHook, cleanup, act } from \"@testing-library/react-hooks\";\nimport { fireEvent } from \"@testing-library/react\";\nimport useKeyEvent from \"../useKeyEvent\";\n\ndescribe(\"useKeyEvent\", () => {\n  let element: HTMLElement;\n  let callbackStub: Mock;\n  describe(\"single key\", () => {\n    const keys = [\"Enter\"];\n    beforeEach(() => {\n      callbackStub = vi.fn();\n      element = document.createElement(\"div\");\n      document.body.appendChild(element);\n      renderHook(() =>\n        useKeyEvent({\n          keys,\n          keyEventName: \"keyup\",\n          ref: { current: element },\n          callback: callbackStub\n        })\n      );\n    });\n\n    afterEach(() => {\n      element.remove();\n      cleanup();\n    });\n\n    it(`should call the callback with the ${keys[0]} key`, () => {\n      act(() => {\n        fireEvent.keyUp(element, {\n          key: keys[0]\n        });\n      });\n      expect(callbackStub.mock.calls.length).toEqual(1);\n    });\n\n    it(`should not call the callback with a different key`, () => {\n      act(() => {\n        fireEvent.keyUp(element, {\n          key: \"Escape\"\n        });\n      });\n\n      expect(callbackStub.mock.calls.length).toEqual(0);\n    });\n\n    it(\"should not call on keyDown\", () => {\n      act(() => {\n        fireEvent.keyDown(element, {\n          key: keys[0]\n        });\n      });\n      expect(callbackStub.mock.calls.length).toEqual(0);\n    });\n  });\n\n  describe(\"single key with ALT modifier\", () => {\n    const keys = [\"Enter\"];\n    beforeEach(() => {\n      callbackStub = vi.fn();\n      element = document.createElement(\"div\");\n      document.body.appendChild(element);\n      renderHook(() =>\n        useKeyEvent({\n          keys,\n          keyEventName: \"keyup\",\n          ref: { current: element },\n          callback: callbackStub,\n          modifier: useKeyEvent.modifiers.ALT\n        })\n      );\n    });\n\n    afterEach(() => {\n      element.remove();\n      cleanup();\n    });\n\n    it(`should call the callback with the ${keys[0]} key and ALT key`, () => {\n      act(() => {\n        fireEvent.keyUp(element, {\n          key: keys[0],\n          altKey: true\n        });\n      });\n      expect(callbackStub.mock.calls.length).toEqual(1);\n    });\n\n    it(`should not call the callback with the key but without modifiers`, () => {\n      act(() => {\n        fireEvent.keyUp(element, {\n          key: keys[0]\n        });\n      });\n\n      expect(callbackStub.mock.calls.length).toEqual(0);\n    });\n\n    it(`should not call the callback with the key but with other modifier`, () => {\n      act(() => {\n        fireEvent.keyUp(element, {\n          key: keys[0],\n          shiftKey: true\n        });\n      });\n\n      expect(callbackStub.mock.calls.length).toEqual(0);\n    });\n  });\n\n  describe(\"single key with CTRL_OR_META modifier\", () => {\n    const keys = [\"Enter\"];\n    beforeEach(() => {\n      callbackStub = vi.fn();\n      element = document.createElement(\"div\");\n      document.body.appendChild(element);\n      renderHook(() =>\n        useKeyEvent({\n          keys,\n          keyEventName: \"keyup\",\n          ref: { current: element },\n          callback: callbackStub,\n          modifier: useKeyEvent.modifiers.CTRL_OR_META\n        })\n      );\n    });\n\n    afterEach(() => {\n      element.remove();\n      cleanup();\n    });\n\n    it(`should call the callback with the ${keys[0]} key and CTRL key`, () => {\n      act(() => {\n        fireEvent.keyUp(element, {\n          key: keys[0],\n          ctrlKey: true\n        });\n      });\n      expect(callbackStub.mock.calls.length).toEqual(1);\n    });\n\n    it(`should call the callback with the ${keys[0]} key and META key`, () => {\n      act(() => {\n        fireEvent.keyUp(element, {\n          key: keys[0],\n          metaKey: true\n        });\n      });\n      expect(callbackStub.mock.calls.length).toEqual(1);\n    });\n\n    it(`should not call the callback with the key but without modifiers`, () => {\n      act(() => {\n        fireEvent.keyUp(element, {\n          key: keys[0]\n        });\n      });\n\n      expect(callbackStub.mock.calls.length).toEqual(0);\n    });\n\n    it(`should not call the callback with the key but with other modifier`, () => {\n      act(() => {\n        fireEvent.keyUp(element, {\n          key: keys[0],\n          shiftKey: true\n        });\n      });\n\n      expect(callbackStub.mock.calls.length).toEqual(0);\n    });\n\n    it(`should not call the callback with other key but with modifiers`, () => {\n      act(() => {\n        fireEvent.keyUp(element, {\n          key: \"Esc\",\n          metaKey: true\n        });\n      });\n\n      expect(callbackStub.mock.calls.length).toEqual(0);\n    });\n  });\n\n  describe(\"multiple keys\", () => {\n    const keys = [\"Enter\", \"Esc\", \"Escape\"];\n    beforeEach(() => {\n      callbackStub = vi.fn();\n      element = document.createElement(\"div\");\n      document.body.appendChild(element);\n      renderHook(() => {\n        useKeyEvent({\n          keys,\n          keyEventName: \"keyup\",\n          ref: { current: element },\n          callback: callbackStub\n        });\n      });\n    });\n\n    afterEach(() => {\n      element.remove();\n      cleanup();\n    });\n\n    it(`should not call the callback with the ${keys[0]} key`, () => {\n      act(() => {\n        fireEvent.keyUp(element, {\n          key: keys[0]\n        });\n      });\n      expect(callbackStub.mock.calls.length).toEqual(1);\n    });\n\n    it(`should call the callback with a different key - ${keys[1]}`, () => {\n      act(() => {\n        fireEvent.keyUp(element, {\n          key: keys[1]\n        });\n      });\n\n      expect(callbackStub.mock.calls.length).toEqual(1);\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/hooks/createEventHandler.ts",
    "content": "export function createEventHandler(handler: (event: UIEvent) => void) {\n  if (!handler) {\n    return;\n  }\n\n  let shouldStopPropagation = true;\n  return (e: UIEvent) => {\n    const event = {\n      ...e,\n      preventDefault() {\n        e.preventDefault();\n      },\n      isDefaultPrevented() {\n        return e.defaultPrevented;\n      },\n      stopPropagation() {\n        console.error(\n          \"stopPropagation is now the default behavior for events. You can use continuePropagation() to revert this behavior.\"\n        );\n      },\n      continuePropagation() {\n        shouldStopPropagation = false;\n      }\n    };\n\n    handler(event);\n\n    if (shouldStopPropagation) {\n      e.stopPropagation();\n    }\n  };\n}\n"
  },
  {
    "path": "packages/core/src/hooks/index.ts",
    "content": "export { default as useKeyEvent } from \"./useKeyEvent\";\nexport { default as useEventListener } from \"./useEventListener\";\nexport { default as useDebounceEvent } from \"./useDebounceEvent\";\nexport { useClickOutside, useIsOverflowing, useResizeObserver } from \"@vibe/hooks\";\nexport { default as useAfterFirstRender } from \"./useAfterFirstRender\";\nexport { default as useTimeout } from \"./useTimeout\";\nexport { default as usePrevious } from \"./usePrevious\";\nexport { default as useSetFocus } from \"./useSetFocus\";\nexport { default as useIsMouseOver } from \"./useIsMouseOver\";\nexport { default as useHover } from \"./useHover/useHover\";\nexport { default as useGridKeyboardNavigation } from \"./useGridKeyboardNavigation/useGridKeyboardNavigation\";\nexport { default as useActiveDescendantListFocus } from \"./useActiveDescendantListFocus\";\nexport { default as useMediaQuery } from \"./useMediaQuery\";\nexport { default as useVibeMediaQuery } from \"./useVibeMediaQuery\";\nexport { default as useSwitch } from \"./useSwitch\";\nexport { default as useElementsOverflowingIndex } from \"./useElementsOverflowingIndex\";\nexport { default as useWizard } from \"./useWizard/useWizard\";\n"
  },
  {
    "path": "packages/core/src/hooks/useActiveDescendantListFocus/__tests__/useActiveDescendantListFocus.test.ts",
    "content": "import { vi, afterEach, describe, it, expect } from \"vitest\";\nimport { renderHook, cleanup, act } from \"@testing-library/react-hooks\";\nimport useActiveDescendantListFocus from \"../../useActiveDescendantListFocus\";\nimport userEvent from \"@testing-library/user-event\";\n\nlet element;\nconst FIRST_ITEM_ID = \"id-1\";\nconst SECOND_ITEM_ID = \"id-2\";\nconst THIRD_ITEM_ID = \"id-3\";\nconst FOURTH_ITEM_ID = \"id-4\";\nconst FIFTH_ITEM_ID = \"id-5\";\nconst ITEM_IDS = [FIRST_ITEM_ID, SECOND_ITEM_ID, THIRD_ITEM_ID, FOURTH_ITEM_ID, FIFTH_ITEM_ID];\n\nfunction renderHookForTest({\n  onItemClick = vi.fn(),\n  defaultVisualFocusFirstIndex = false,\n  isItemSelectable = () => true,\n  isHorizontal = false\n}) {\n  element = document.createElement(\"div\");\n  element.tabIndex = -1; // some tests focus the element - a tabIndex value is required for updating the document.activeIndex value\n  document.body.appendChild(element);\n\n  const props = {\n    focusedElementRef: {\n      current: element\n    },\n    defaultVisualFocusFirstIndex,\n    itemsIds: ITEM_IDS,\n    isItemSelectable: isItemSelectable,\n    onItemClick,\n    isHorizontalList: isHorizontal\n  };\n  return renderHook(argprops => useActiveDescendantListFocus({ ...props, ...argprops }));\n}\n\nfunction runListUnitTest({ isHorizontal, defaultVisualFocusFirstIndex }) {\n  const moveForwardKey = isHorizontal ? \"{arrowRight}\" : \"{arrowDown}\";\n  const oppositeMoveForwardKey = !isHorizontal ? \"{arrowRight}\" : \"{arrowDown}\";\n\n  it(\"should focus index + 1 item when user press keyboard forward\", async () => {\n    const onItemClick = vi.fn();\n    const { result } = renderHookForTest({ onItemClick, isHorizontal, defaultVisualFocusFirstIndex });\n\n    act(() => {\n      // set focus on the list's element which in charge on natural focus element\n      element.focus();\n    });\n\n    act(() => {\n      // move visual focus to current item index + 1\n      userEvent.keyboard(moveForwardKey);\n    });\n\n    const before = result.current.visualFocusItemIndex;\n    const keyboardTimes = 2;\n\n    act(() => {\n      // move visual focus to current item index + 2\n      userEvent.keyboard(moveForwardKey);\n    });\n\n    act(() => {\n      //move visual focus to current item index + 3\n      userEvent.keyboard(moveForwardKey);\n    });\n\n    expect(result.current.visualFocusItemIndex).toEqual(before + keyboardTimes);\n  });\n\n  it(\"should keep visual focus on same item after item list changed\", async () => {\n    const onItemClick = vi.fn();\n    const { result, rerender } = renderHookForTest({\n      onItemClick,\n      defaultVisualFocusFirstIndex\n    });\n    const moveForwardKey = \"{arrowDown}\";\n    act(() => {\n      // set focus on the list's element which in charge on natural focus element\n      element.focus();\n    });\n    for (let idx = 0; idx < 3; idx++) {\n      act(() => {\n        userEvent.keyboard(moveForwardKey);\n      });\n    }\n\n    const beforeIndex = result.current.visualFocusItemIndex;\n    const beforeId = result.current.visualFocusItemId;\n\n    const removeItems = 2;\n    const itemsAfterRemove = ITEM_IDS.slice(removeItems);\n    rerender({ itemsIds: itemsAfterRemove });\n\n    expect(result.current.visualFocusItemId).toEqual(beforeId);\n    expect(result.current.visualFocusItemIndex).toEqual(beforeIndex - removeItems);\n  });\n\n  it(\"should trigger onClick when focused element has natural focus and user navigate to item and press enter\", async () => {\n    const onItemClick = vi.fn();\n    const { result } = renderHookForTest({ onItemClick, isHorizontal, defaultVisualFocusFirstIndex });\n\n    act(() => {\n      // set focus on the list's element which in charge on natural focus element\n      element.focus();\n      // move visual focus to first item\n      userEvent.keyboard(moveForwardKey);\n    });\n\n    const selectedIndex = result.current.visualFocusItemIndex;\n\n    act(() => {\n      // Trigger on click by press enter\n      userEvent.keyboard(\"{Enter}\");\n    });\n\n    expect(onItemClick).toHaveBeenCalledTimes(1);\n    expect(onItemClick).toHaveBeenCalledWith(expect.objectContaining({}), selectedIndex);\n  });\n\n  it(\"should not trigger onClick when focused element does not have natural focus and user navigate to item and press enter\", async () => {\n    const onItemClick = vi.fn();\n    renderHookForTest({ onItemClick, isHorizontal, defaultVisualFocusFirstIndex });\n\n    act(() => {\n      // move visual focus to first item\n      userEvent.keyboard(moveForwardKey);\n    });\n\n    act(() =>\n      // Trigger on click by press enter\n      userEvent.keyboard(\"{Enter}\")\n    );\n\n    expect(onItemClick).toHaveBeenCalledTimes(0);\n  });\n\n  it(\"should skip not selectable item when user try to navigate to it\", async () => {\n    const onItemClick = vi.fn();\n    const isItemSelectable = i => i >= 3;\n    const { result } = renderHookForTest({ onItemClick, isItemSelectable, isHorizontal, defaultVisualFocusFirstIndex });\n\n    act(() => {\n      // set focus on the list's element which in charge on natural focus element\n      element.focus();\n\n      // move visual focus to first item\n      userEvent.keyboard(moveForwardKey);\n    });\n\n    expect(result.current.visualFocusItemIndex).toEqual(3);\n  });\n\n  it(\"should not return any visual focus if wrapper is not focused\", async () => {\n    const onItemClick = vi.fn();\n    const { result } = renderHookForTest({ onItemClick, isHorizontal, defaultVisualFocusFirstIndex });\n\n    expect(result.current.visualFocusItemIndex).toEqual(undefined);\n  });\n\n  it(\"should not navigate to next item when user try to navigate by using keys for the  opposite dimension to the list dimension\", async () => {\n    const onItemClick = vi.fn();\n    const { result } = renderHookForTest({ onItemClick, isHorizontal, defaultVisualFocusFirstIndex });\n\n    act(() => {\n      // set focus on the list's element which in charge on natural focus element\n      element.focus();\n      // move visual focus to first item\n      userEvent.keyboard(oppositeMoveForwardKey);\n    });\n\n    const before = result.current.visualFocusItemIndex;\n    act(() => {\n      // move visual focus to first item\n      userEvent.keyboard(oppositeMoveForwardKey);\n    });\n\n    expect(result.current.visualFocusItemIndex).toEqual(before);\n  });\n  it(\"should change visually focused item when calling setVisualFocusItemId with triggeredWithKeyboard argument\", async () => {\n    const { result } = renderHookForTest({ isHorizontal, defaultVisualFocusFirstIndex });\n\n    act(() => {\n      // set focus on the list's element which in charge on natural focus element\n      element.focus();\n    });\n\n    act(() => {\n      const isTriggeredByKeyboard = true;\n      // Change visually focused item by using setVisualFocusItemId function\n      result.current.setVisualFocusItemId(THIRD_ITEM_ID, isTriggeredByKeyboard);\n    });\n\n    // Now the visual focus item index should be the index of THIRD_ITEM_ID item\n    expect(result.current.visualFocusItemIndex).toEqual(2);\n  });\n}\n\nconst combineFeatures = features => {\n  const combinations = [];\n  // all closed\n  const allClosedComb = {};\n  for (const feature of features) {\n    allClosedComb[feature] = false;\n  }\n  combinations.push(allClosedComb);\n\n  // all open\n  const allOpenComb = {};\n  for (const feature of features) {\n    allOpenComb[feature] = true;\n  }\n  combinations.push(allOpenComb);\n\n  // one open all other closed\n  for (const feature of features) {\n    const oneOpen = {};\n    oneOpen[feature] = true;\n    for (const otherFeature of features) {\n      oneOpen[otherFeature] = false;\n    }\n    combinations.push(oneOpen);\n  }\n\n  return combinations;\n};\n\ndescribe(\"useActiveDescendantListFocus\", () => {\n  afterEach(() => {\n    element.remove();\n    cleanup();\n  });\n\n  const features = {\n    isHorizontal: { yes: \"Horizontal\", no: \"Vertical\" },\n    defaultVisualFocusFirstIndex: { yes: \"KeepOpen\", no: \"\" }\n  };\n\n  const featureCombinations = combineFeatures(Object.keys(features));\n  for (const featureComb of featureCombinations) {\n    describe(`${Object.entries(featureComb)\n      .map(([feat, value]) => (value ? features[feat].yes : features[feat].no))\n      .filter(Boolean)\n      .join(\", \")} list`, () => {\n      runListUnitTest(featureComb);\n    });\n  }\n\n  describe(\"defaultVisualFocusFirstIndex option\", () => {\n    const defaultVisualFocusFirstIndex = true;\n\n    it(\"should visually focus on first item when wrapper element is focused (not by mouse)\", async () => {\n      const onItemClick = vi.fn();\n      const { result } = renderHookForTest({ onItemClick, defaultVisualFocusFirstIndex });\n\n      act(() => {\n        // set focus on the list's element which in charge on natural focus element\n        element.focus();\n      });\n\n      expect(result.current.visualFocusItemIndex).toEqual(0);\n    });\n\n    it(\"should visually focus on closest item to first item when wrapper element is focused and first item is disable (not by mouse)\", async () => {\n      const onItemClick = vi.fn();\n      const isItemSelectable = i => i >= 3;\n      const { result } = renderHookForTest({ onItemClick, defaultVisualFocusFirstIndex, isItemSelectable });\n\n      act(() => {\n        // set focus on the list's element which in charge on natural focus element\n        element.focus();\n      });\n\n      expect(result.current.visualFocusItemIndex).toEqual(3);\n    });\n  });\n\n  describe(\"no defaultVisualFocusFirstIndex option\", () => {\n    it(\"should not set any item as visually focus when wrapper element is focused\", async () => {\n      const onItemClick = vi.fn();\n      const { result } = renderHookForTest({ onItemClick });\n\n      act(() => {\n        // set focus on the list's element which in charge on natural focus element\n        element.focus();\n      });\n\n      expect(result.current.visualFocusItemIndex).toEqual(undefined);\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/hooks/useActiveDescendantListFocus/index.ts",
    "content": "import { type MutableRefObject } from \"react\";\nimport type React from \"react\";\nimport { useMemo, useState, useCallback } from \"react\";\nimport {\n  useSupportArrowsKeyboardNavigation,\n  useSupportPressItemKeyboardNavigation,\n  useSetDefaultItemOnFocusEvent,\n  useKeepFocusOnItemWhenListChanged,\n  useCleanVisualFocusOnBlur\n} from \"./useActiveDescendantListFocusHooks\";\n\nenum Role {\n  APPLICATION = \"application\",\n  COMBOBOX = \"combobox\",\n  COMPOSITE = \"composite\",\n  GROUP = \"group\",\n  TEXTBOX = \"textbox\",\n  MENU = \"menu\"\n}\n\nfunction useActiveDescendantListFocus({\n  focusedElementRef, // the reference for the component that listens to keyboard\n  itemsIds,\n  isItemSelectable,\n  onItemClick,\n  defaultVisualFocusFirstIndex = false,\n  focusedElementRole = Role.GROUP,\n  isHorizontalList = false,\n  isIgnoreSpaceAsItemSelection = false,\n  useDocumentEventListeners = false,\n  ignoreDocumentFallback = false\n}: {\n  focusedElementRef: MutableRefObject<HTMLElement>;\n  itemsIds: string[];\n  isItemSelectable: (index: number) => boolean;\n  onItemClick: (event: React.KeyboardEvent | React.MouseEvent, index: number) => void;\n  defaultVisualFocusFirstIndex?: boolean;\n  focusedElementRole?: Role;\n  isHorizontalList?: boolean;\n  isIgnoreSpaceAsItemSelection?: boolean;\n  useDocumentEventListeners?: boolean;\n  ignoreDocumentFallback?: boolean;\n}) {\n  const defaultVisualFocusItemIndex = defaultVisualFocusFirstIndex ? 0 : -1;\n  const itemsCount = itemsIds.length;\n  const [visualFocusItemIndex, setVisualFocusItemIndex] = useState<number>(-1);\n  const visualFocusItemId = itemsIds[visualFocusItemIndex];\n\n  const listenerOptions = useMemo(() => {\n    if (useDocumentEventListeners) {\n      return ignoreDocumentFallback ? { ignoreDocumentFallback } : undefined;\n    }\n\n    return {\n      ref: focusedElementRef,\n      preventDefault: true,\n      stopPropagation: true\n    };\n  }, [useDocumentEventListeners, focusedElementRef, ignoreDocumentFallback]);\n\n  const { triggeredByKeyboard } = useSetDefaultItemOnFocusEvent({\n    focusedElementRef,\n    isItemSelectable,\n    visualFocusItemIndex,\n    setVisualFocusItemIndex,\n    itemsCount,\n    defaultVisualFocusItemIndex\n  });\n\n  const setVisualFocusItemId = useCallback(\n    (visualFocusItemId: string, isTriggeredByKeyboard: boolean) => {\n      triggeredByKeyboard.current = isTriggeredByKeyboard;\n      const itemIndex = itemsIds.indexOf(visualFocusItemId);\n      if (itemIndex > -1 && itemIndex !== visualFocusItemIndex) {\n        setVisualFocusItemIndex(itemIndex);\n      }\n    },\n    [itemsIds, triggeredByKeyboard, visualFocusItemIndex]\n  );\n\n  useSupportArrowsKeyboardNavigation({\n    itemsCount,\n    focusedElementRef,\n    visualFocusItemIndex,\n    setVisualFocusItemIndex,\n    triggeredByKeyboard,\n    isHorizontalList,\n    isItemSelectable,\n    listenerOptions\n  });\n\n  useSupportPressItemKeyboardNavigation({\n    visualFocusItemIndex,\n    itemsCount,\n    focusedElementRef,\n    setVisualFocusItemIndex,\n    onItemClick,\n    isItemSelectable,\n    listenerOptions,\n    isIgnoreSpaceAsItemSelection\n  });\n\n  useKeepFocusOnItemWhenListChanged({\n    visualFocusItemIndex,\n    itemsIds,\n    isItemSelectable,\n    setVisualFocusItemIndex\n  });\n\n  useCleanVisualFocusOnBlur({ focusedElementRef, visualFocusItemIndex, setVisualFocusItemIndex });\n\n  return {\n    visualFocusItemIndex: triggeredByKeyboard.current ? visualFocusItemIndex : undefined,\n    visualFocusItemId: triggeredByKeyboard.current ? visualFocusItemId : undefined,\n    focusedElementProps: {\n      \"aria-activedescendant\": triggeredByKeyboard.current ? visualFocusItemId : undefined,\n      role: focusedElementRole\n    },\n    setVisualFocusItemId\n  };\n}\n\nuseActiveDescendantListFocus.roles = Role;\n\nexport default useActiveDescendantListFocus;\n"
  },
  {
    "path": "packages/core/src/hooks/useActiveDescendantListFocus/useActiveDescendantListFocusHelpers.ts",
    "content": "type ActiveDependentHelper = {\n  isItemSelectable: (index: number) => boolean;\n  visualFocusItemIndex: number;\n  itemsCount: number;\n};\n\nexport function getNextSelectableIndex({ isItemSelectable, visualFocusItemIndex, itemsCount }: ActiveDependentHelper) {\n  if (visualFocusItemIndex > itemsCount - 1) return;\n  // Go over all the next items until found one which is selectable\n  for (let offset = 1; offset <= itemsCount; offset++) {\n    const nextIndex = (visualFocusItemIndex + offset) % itemsCount;\n    if (isItemSelectable(nextIndex)) {\n      return nextIndex;\n    }\n  }\n}\nexport function getPreviousSelectableIndex({\n  isItemSelectable,\n  visualFocusItemIndex,\n  itemsCount\n}: ActiveDependentHelper) {\n  for (let offset = 1; offset <= itemsCount - 1; offset++) {\n    let prevIndex = visualFocusItemIndex - offset;\n    if (prevIndex < 0) {\n      prevIndex = itemsCount + prevIndex;\n    }\n    if (isItemSelectable(prevIndex)) {\n      return prevIndex;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/core/src/hooks/useActiveDescendantListFocus/useActiveDescendantListFocusHooks.ts",
    "content": "import { type MutableRefObject } from \"react\";\nimport type React from \"react\";\nimport { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport useKeyEvent, { type UseKeyEventArgs } from \"../useKeyEvent\";\nimport useEventListener from \"../useEventListener\";\nimport usePrevious from \"../usePrevious\";\nimport { getNextSelectableIndex, getPreviousSelectableIndex } from \"./useActiveDescendantListFocusHelpers\";\nimport useListenFocusTriggers from \"../useListenFocusTriggers\";\n\nenum ArrowDirection {\n  UP = \"ArrowUp\",\n  DOWN = \"ArrowDown\",\n  RIGHT = \"ArrowRight\",\n  LEFT = \"ArrowLeft\"\n}\n\nconst ENTER_KEY = \"Enter\";\nconst SPACE_KEY = \" \";\n\nexport function useSupportArrowsKeyboardNavigation({\n  itemsCount,\n  focusedElementRef,\n  visualFocusItemIndex,\n  setVisualFocusItemIndex,\n  isHorizontalList,\n  isItemSelectable,\n  listenerOptions,\n  triggeredByKeyboard\n}: {\n  itemsCount: number;\n  focusedElementRef: MutableRefObject<HTMLElement>;\n  visualFocusItemIndex: number;\n  setVisualFocusItemIndex: (index: number) => void;\n  isHorizontalList: boolean;\n  isItemSelectable: (index: number) => boolean;\n  triggeredByKeyboard: MutableRefObject<boolean>;\n  listenerOptions: Omit<UseKeyEventArgs, \"keys\" | \"callback\">;\n}) {\n  const nextArrow = isHorizontalList ? ArrowDirection.RIGHT : ArrowDirection.DOWN;\n  const backArrow = isHorizontalList ? ArrowDirection.LEFT : ArrowDirection.UP;\n\n  const onArrowKeyEvent = useCallback(\n    (direction: ArrowDirection) => {\n      // we desire to change the visual focus item only if the user pressed on the keyboard arrows keys while\n      // the focusedElementRef is naturally focus\n      if (document.activeElement !== focusedElementRef.current) {\n        return;\n      }\n\n      // If the focusedElementRef is naturally focus but this is the first keyboard interaction of the user, we will mark future user interactions as trigger by keyboard (until the next mouse interaction)\n      // that from now on the interactions are trigger by keyboard (until the next mouse interaction)\n      if (!triggeredByKeyboard.current) {\n        triggeredByKeyboard.current = true;\n\n        // If the focusedElementRef is naturally focus but this is the first keyboard interaction of the user, we want only to display the item\n        // which right now visually focus without changing it.\n        if (visualFocusItemIndex > -1) {\n          return;\n        }\n      }\n\n      let newIndex;\n\n      // We will change the visual focused item index according to the direction of the pressed arrow\n      if (direction === nextArrow) {\n        newIndex = getNextSelectableIndex({ isItemSelectable, visualFocusItemIndex, itemsCount });\n      } else if (direction === backArrow) {\n        newIndex = getPreviousSelectableIndex({ isItemSelectable, visualFocusItemIndex, itemsCount });\n      }\n\n      if (newIndex > -1 && newIndex !== visualFocusItemIndex) setVisualFocusItemIndex(newIndex);\n    },\n    [\n      focusedElementRef,\n      triggeredByKeyboard,\n      nextArrow,\n      backArrow,\n      visualFocusItemIndex,\n      setVisualFocusItemIndex,\n      isItemSelectable,\n      itemsCount\n    ]\n  );\n  const onArrowBack = useCallback(() => {\n    onArrowKeyEvent(backArrow);\n  }, [backArrow, onArrowKeyEvent]);\n\n  const onArrowNext = useCallback(() => {\n    onArrowKeyEvent(nextArrow);\n  }, [nextArrow, onArrowKeyEvent]);\n\n  useKeyEvent({\n    keys: [nextArrow],\n    callback: onArrowNext,\n    ...listenerOptions\n  });\n\n  useKeyEvent({\n    keys: [backArrow],\n    callback: onArrowBack,\n    ...listenerOptions\n  });\n}\n\nexport function useSupportPressItemKeyboardNavigation({\n  visualFocusItemIndex,\n  focusedElementRef,\n  itemsCount,\n  setVisualFocusItemIndex,\n  onItemClick,\n  isItemSelectable,\n  listenerOptions = undefined,\n  isIgnoreSpaceAsItemSelection = false\n}: {\n  visualFocusItemIndex: number;\n  focusedElementRef: MutableRefObject<HTMLElement>;\n  itemsCount: number;\n  setVisualFocusItemIndex: (index: number) => void;\n  onItemClick: (event: React.MouseEvent | React.KeyboardEvent, index: number) => void;\n  isItemSelectable: (index: number) => boolean;\n  listenerOptions: Omit<UseKeyEventArgs, \"keys\" | \"callback\">;\n  isIgnoreSpaceAsItemSelection: boolean;\n}) {\n  const pressKeys = useMemo(\n    () => (isIgnoreSpaceAsItemSelection ? [ENTER_KEY] : [ENTER_KEY, SPACE_KEY]),\n    [isIgnoreSpaceAsItemSelection]\n  );\n\n  const baseOnClickCallback = useCallback(\n    (event: React.KeyboardEvent, itemIndex: number) => {\n      const hasValidIndex = itemIndex >= 0 && itemIndex < itemsCount;\n      if (!onItemClick || !hasValidIndex || !isItemSelectable(itemIndex)) return;\n      if (visualFocusItemIndex !== itemIndex) setVisualFocusItemIndex(itemIndex);\n      onItemClick(event, itemIndex);\n    },\n    [itemsCount, onItemClick, isItemSelectable, visualFocusItemIndex, setVisualFocusItemIndex]\n  );\n\n  const keyboardOnSelectCallback = useCallback(\n    (event: React.KeyboardEvent) => {\n      // we desire to change the trigger the active item on click callback only if the user pressed on the keyboard arrows keys while\n      // the focusedElementRef is naturally focus\n      if (focusedElementRef.current.contains(document.activeElement)) {\n        baseOnClickCallback(event, visualFocusItemIndex);\n      }\n    },\n    [baseOnClickCallback, focusedElementRef, visualFocusItemIndex]\n  );\n\n  useKeyEvent({\n    keys: pressKeys,\n    callback: keyboardOnSelectCallback,\n    ...listenerOptions\n  });\n}\n\nexport function useCleanVisualFocusOnBlur({\n  focusedElementRef,\n  visualFocusItemIndex,\n  setVisualFocusItemIndex\n}: {\n  focusedElementRef: MutableRefObject<HTMLElement>;\n  visualFocusItemIndex: number;\n  setVisualFocusItemIndex: (index: number) => void;\n}) {\n  const previousFocusedElementRef = usePrevious(focusedElementRef);\n\n  const onBlurCallback = useCallback(() => {\n    if (visualFocusItemIndex !== -1) {\n      setVisualFocusItemIndex(-1);\n    }\n  }, [setVisualFocusItemIndex, visualFocusItemIndex]);\n\n  // if element unmount act like element got blur event\n  useEffect(() => {\n    // if element unmount\n    if (focusedElementRef?.current === null && previousFocusedElementRef?.current !== null) {\n      onBlurCallback();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [focusedElementRef.current, previousFocusedElementRef, onBlurCallback]);\n\n  useEventListener({\n    eventName: \"blur\",\n    ref: focusedElementRef,\n    callback: onBlurCallback\n  });\n}\n\nexport function useSetDefaultItemOnFocusEvent({\n  focusedElementRef,\n  isItemSelectable,\n  visualFocusItemIndex,\n  setVisualFocusItemIndex,\n  itemsCount,\n  defaultVisualFocusItemIndex = -1\n}: {\n  focusedElementRef: MutableRefObject<HTMLElement>;\n  isItemSelectable: (index: number) => boolean;\n  visualFocusItemIndex: number;\n  setVisualFocusItemIndex: (index: number) => void;\n  itemsCount: number;\n  defaultVisualFocusItemIndex: number;\n}) {\n  const triggeredByKeyboard = useRef(false);\n\n  const onFocusByKeyboard = useCallback(() => {\n    triggeredByKeyboard.current = true;\n    if (visualFocusItemIndex !== defaultVisualFocusItemIndex) {\n      let newVisualFocusIndex;\n      if (isItemSelectable(defaultVisualFocusItemIndex)) {\n        newVisualFocusIndex = defaultVisualFocusItemIndex;\n      } else {\n        newVisualFocusIndex = getNextSelectableIndex({\n          isItemSelectable,\n          itemsCount,\n          visualFocusItemIndex: defaultVisualFocusItemIndex\n        });\n      }\n      setVisualFocusItemIndex(newVisualFocusIndex);\n    }\n  }, [\n    defaultVisualFocusItemIndex,\n    isItemSelectable,\n    itemsCount,\n    setVisualFocusItemIndex,\n    triggeredByKeyboard,\n    visualFocusItemIndex\n  ]);\n  const onFocusByMouse = useCallback(() => {\n    triggeredByKeyboard.current = false;\n  }, [triggeredByKeyboard]);\n  useListenFocusTriggers({ ref: focusedElementRef, onFocusByKeyboard, onFocusByMouse });\n\n  return { triggeredByKeyboard };\n}\n\nexport function useKeepFocusOnItemWhenListChanged({\n  visualFocusItemIndex,\n  itemsIds,\n  isItemSelectable,\n  setVisualFocusItemIndex\n}: {\n  visualFocusItemIndex: number;\n  itemsIds: string[];\n  isItemSelectable: (index: number) => boolean;\n  setVisualFocusItemIndex: (index: number) => void;\n}) {\n  const prevItemIds = usePrevious(itemsIds);\n\n  // When item list changed, keep the focus on the same item\n  useEffect(() => {\n    // When the list is changing the index of the focused item is point to a different item then before and\n    // this is why we want to search for the new index of the item and change the index to point to it.\n    let overrideIndexAfterListChanged;\n    const isListChanged = prevItemIds !== undefined && prevItemIds !== itemsIds;\n    if (isListChanged && prevItemIds !== undefined && visualFocusItemIndex !== -1) {\n      const focusedItemId = prevItemIds[visualFocusItemIndex];\n      overrideIndexAfterListChanged = itemsIds.indexOf(focusedItemId);\n    } else {\n      overrideIndexAfterListChanged = visualFocusItemIndex;\n    }\n\n    if (overrideIndexAfterListChanged !== visualFocusItemIndex) {\n      if (isItemSelectable(overrideIndexAfterListChanged)) {\n        setVisualFocusItemIndex(overrideIndexAfterListChanged);\n      } else {\n        const closestSelectableIndex = getNextSelectableIndex({\n          isItemSelectable,\n          visualFocusItemIndex: overrideIndexAfterListChanged,\n          itemsCount: itemsIds.length\n        });\n        setVisualFocusItemIndex(closestSelectableIndex);\n      }\n    }\n  }, [visualFocusItemIndex, itemsIds, isItemSelectable, setVisualFocusItemIndex, prevItemIds]);\n}\n"
  },
  {
    "path": "packages/core/src/hooks/useAfterFirstRender/__tests__/useAfterFirstRender.test.tsx",
    "content": "import { vi, beforeEach, afterEach, describe, it, expect } from \"vitest\";\nimport { renderHook } from \"@testing-library/react-hooks\";\nimport useAfterFirstRender from \"../\";\n\ndescribe(\"useAfterFirstRender\", () => {\n  it(\"should initially set isAfterFirstRender to false\", () => {\n    const { result } = renderHook(() => useAfterFirstRender());\n    expect(result.current.current).toBeFalsy();\n  });\n\n  describe(\"when re-renders\", () => {\n    beforeEach(() => {\n      vi.useFakeTimers();\n    });\n\n    afterEach(() => {\n      vi.useRealTimers();\n    });\n\n    it(\"should set isAfterFirstRender to true after a delay\", async () => {\n      const { result } = renderHook(() => useAfterFirstRender());\n      vi.advanceTimersByTime(1);\n      expect(result.current.current).toBeTruthy();\n    });\n\n    it(\"should maintain isAfterFirstRender as true on subsequent renders\", () => {\n      const { result, rerender } = renderHook(() => useAfterFirstRender());\n\n      vi.advanceTimersByTime(1);\n      expect(result.current.current).toBeTruthy();\n\n      rerender();\n      expect(result.current.current).toBeTruthy();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/hooks/useAfterFirstRender/index.ts",
    "content": "import { type RefObject, useEffect, useRef } from \"react\";\n\nexport default function useAfterFirstRender(): RefObject<boolean> {\n  const isAfterFirstRender = useRef(false);\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      isAfterFirstRender.current = true;\n    }, 0);\n    return () => clearTimeout(timer);\n  }, []);\n\n  return isAfterFirstRender;\n}\n"
  },
  {
    "path": "packages/core/src/hooks/useDebounceEvent/index.ts",
    "content": "import {\n  useMemo,\n  useCallback,\n  useState,\n  useRef,\n  useEffect,\n  type ChangeEvent,\n  type Dispatch,\n  type SetStateAction\n} from \"react\";\nimport { debounce } from \"es-toolkit\";\nimport { noop } from \"es-toolkit\";\n\nexport type UseDebounceResult = {\n  inputValue: string;\n  onEventChanged: (event: ChangeEvent<Partial<HTMLInputElement> | Partial<HTMLTextAreaElement>>) => void;\n  clearValue: () => void;\n  updateValue: Dispatch<SetStateAction<string>>;\n};\n\nexport default function useDebounceEvent({\n  delay = 0,\n  onChange,\n  initialStateValue = \"\",\n  trim\n}: {\n  onChange: (value: string) => void;\n  initialStateValue?: string;\n  delay?: number;\n  trim?: boolean;\n}) {\n  const [inputValue, setValue] = useState<string>(initialStateValue);\n  const previousValue = useRef<string>(null);\n\n  useEffect(() => {\n    previousValue.current = initialStateValue;\n  });\n\n  const debounceCallback = useMemo(() => {\n    if (!delay) {\n      return onChange;\n    }\n\n    if (!onChange) {\n      return noop;\n    }\n\n    return debounce(onChange, delay);\n  }, [onChange, delay]);\n\n  const onEventChanged = useCallback(\n    (event: ChangeEvent<Partial<HTMLInputElement> | Partial<HTMLTextAreaElement>>) => {\n      const { value } = event.target;\n      const finalValue = trim ? value.trim() : value;\n      setValue(finalValue);\n      debounceCallback(finalValue);\n    },\n    [debounceCallback, setValue, trim]\n  );\n\n  const clearValue = useCallback(() => {\n    setValue(\"\");\n    if (onChange) {\n      onChange(\"\");\n    }\n  }, [setValue, onChange]);\n\n  if (initialStateValue !== previousValue.current && initialStateValue !== inputValue) {\n    setValue(initialStateValue);\n  }\n\n  return { inputValue, onEventChanged, clearValue, updateValue: setValue };\n}\n"
  },
  {
    "path": "packages/core/src/hooks/useElementsOverflowingIndex.ts",
    "content": "import { type ReactNode, type RefObject, useCallback, useEffect, useState } from \"react\";\nimport { last } from \"es-toolkit\";\nimport { useResizeObserver } from \"@vibe/hooks\";\n\n// Use this hook when you want to get the index of the child which should be hidden from\ntype AggregatedChildResult = { childLength: number; totalLength: number };\n\nfunction useElementsOverflowingIndex({\n  ref,\n  children,\n  paddingSize,\n  resizeDebounceTime,\n  ignoreLast\n}: {\n  ref: RefObject<HTMLElement>;\n  children: ReactNode;\n  paddingSize: number;\n  resizeDebounceTime: number;\n  ignoreLast: boolean;\n}) {\n  const [size, setSize] = useState<number>(null);\n\n  const onResize = useCallback(\n    ({ borderBoxSize }: { borderBoxSize: ResizeObserverSize }) => {\n      setSize(borderBoxSize.inlineSize);\n    },\n    [setSize]\n  );\n  useResizeObserver({\n    ref,\n    callback: onResize,\n    debounceTime: resizeDebounceTime\n  });\n\n  const [aggregatedChildLengths, setAggregatedChildLengths] = useState<Array<AggregatedChildResult>>([]);\n  const [indexToSplit, setIndexToSplit] = useState<number | null>(null);\n\n  useEffect(() => {\n    if (ignoreLast) {\n      const withoutLast = aggregatedChildLengths.slice(0, -1);\n      const allInWithoutLast = !withoutLast.find(({ totalLength }) => totalLength > size - paddingSize);\n      if (allInWithoutLast) {\n        setIndexToSplit(-1);\n      } else {\n        const lastSize = aggregatedChildLengths.length > 0 ? last(aggregatedChildLengths).childLength : 0;\n        setIndexToSplit(\n          aggregatedChildLengths.findIndex(({ totalLength }) => totalLength > size - paddingSize - lastSize)\n        );\n      }\n    } else {\n      setIndexToSplit(aggregatedChildLengths.findIndex(({ totalLength }) => totalLength > size - paddingSize));\n    }\n  }, [aggregatedChildLengths, size, setIndexToSplit, paddingSize, ignoreLast]);\n\n  useEffect(() => {\n    if (!ref.current) return;\n    const childLengthsArray: Array<AggregatedChildResult> = [];\n    let totalLength = 0;\n    ref.current.childNodes.forEach((node: HTMLElement) => {\n      const childLength = node.clientWidth;\n      totalLength += childLength;\n      childLengthsArray.push({ childLength, totalLength });\n    });\n    setAggregatedChildLengths(childLengthsArray);\n  }, [children, ref, setAggregatedChildLengths]);\n\n  return indexToSplit;\n}\n\nexport default useElementsOverflowingIndex;\n"
  },
  {
    "path": "packages/core/src/hooks/useEventListener/index.ts",
    "content": "export { useEventListener } from \"@vibe/shared\";\nexport { useEventListener as default } from \"@vibe/shared\";\n"
  },
  {
    "path": "packages/core/src/hooks/useFocusWithin.ts",
    "content": "import { type FocusEvent, useCallback, useMemo, useRef } from \"react\";\n\ntype Result = {\n  focusWithinProps?: {\n    onFocus?: (e: FocusEvent) => void;\n    onBlur?: (e: FocusEvent) => void;\n  };\n};\n\nexport function useFocusWithin({\n  onFocusWithin,\n  onFocusWithinChange,\n  isDisabled,\n  onBlurWithin\n}: {\n  onFocusWithin?: (event: FocusEvent) => void;\n  onBlurWithin?: (event: FocusEvent) => void;\n  onFocusWithinChange?: (isWithinChange: boolean) => void;\n  isDisabled?: boolean;\n}): Result {\n  const state = useRef({\n    isFocusWithin: false\n  }).current;\n\n  const onFocus = useCallback(\n    (e: FocusEvent) => {\n      if (!state.isFocusWithin) {\n        if (onFocusWithin) {\n          onFocusWithin(e);\n        }\n\n        if (onFocusWithinChange) {\n          onFocusWithinChange(true);\n        }\n\n        state.isFocusWithin = true;\n      }\n    },\n    [onFocusWithin, onFocusWithinChange, state]\n  );\n\n  const onBlur = useCallback(\n    (e: FocusEvent) => {\n      // We don't want to trigger onBlurWithin and then immediately onFocusWithin again\n      // when moving focus inside the element. Only trigger if the currentTarget doesn't\n      // include the relatedTarget (where focus is moving).\n      const currentTarget = e.currentTarget;\n      if (state.isFocusWithin && !currentTarget.contains(e.relatedTarget)) {\n        if (onBlurWithin) {\n          onBlurWithin(e);\n        }\n\n        if (onFocusWithinChange) {\n          onFocusWithinChange(false);\n        }\n\n        state.isFocusWithin = false;\n      }\n    },\n    [onBlurWithin, onFocusWithinChange, state]\n  );\n\n  const isDisabledReturnValue = useMemo(() => {\n    if (!isDisabled) return {};\n    return { focusWithinProps: {} };\n  }, [isDisabled]);\n\n  if (isDisabled) {\n    return isDisabledReturnValue;\n  }\n\n  return {\n    focusWithinProps: {\n      onFocus: onFocus,\n      onBlur: onBlur\n    }\n  };\n}\n"
  },
  {
    "path": "packages/core/src/hooks/useFullKeyboardListeners.ts",
    "content": "import { type MutableRefObject, useCallback, useEffect, useMemo } from \"react\";\nimport { noop } from \"es-toolkit\";\nimport useKeyEvent from \"./useKeyEvent\";\nimport { type KeyboardEventCallback } from \"../types/events\";\n\nexport enum NavDirections {\n  UP = \"up\",\n  DOWN = \"down\",\n  LEFT = \"left\",\n  RIGHT = \"right\"\n}\n\nexport const ARROW_DOWN_KEYS = [\"ArrowDown\"];\nexport const ARROW_UP_KEYS = [\"ArrowUp\"];\nexport const ARROW_RIGHT_KEYS = [\"ArrowRight\"];\nexport const ARROW_LEFT_KEYS = [\"ArrowLeft\"];\nexport const SELECTION_KEYS = [\"Enter\", \" \"];\nexport const ENTER_KEYS = [\"Enter\"];\nexport const ESCAPE_KEYS = [\"Escape\"];\nexport const END_KEYS = [\"End\"];\nexport const HOME_KEYS = [\"Home\"];\n\nexport default function useFullKeyboardListeners({\n  ref, // the reference for the component that listens to keyboard\n  onSelectionKey = noop,\n  onArrowNavigation = noop,\n  onEscape = noop,\n  onHome = noop,\n  onEnd = noop,\n  useDocumentEventListeners = false,\n  focusOnMount = false\n}: {\n  ref: MutableRefObject<HTMLElement>;\n  onSelectionKey: KeyboardEventCallback;\n  onArrowNavigation: (type: NavDirections) => void;\n  onEscape: KeyboardEventCallback;\n  onHome?: KeyboardEventCallback;\n  onEnd?: KeyboardEventCallback;\n  useDocumentEventListeners?: boolean;\n  focusOnMount: boolean;\n}) {\n  const listenerOptions = useMemo(() => {\n    if (useDocumentEventListeners) return undefined;\n\n    return {\n      ref,\n      preventDefault: true,\n      stopPropagation: true\n    };\n  }, [useDocumentEventListeners, ref]);\n\n  const onArrowDown = useCallback(() => onArrowNavigation(NavDirections.DOWN), [onArrowNavigation]);\n  const onArrowUp = useCallback(() => onArrowNavigation(NavDirections.UP), [onArrowNavigation]);\n  const onArrowRight = useCallback(() => onArrowNavigation(NavDirections.RIGHT), [onArrowNavigation]);\n  const onArrowLeft = useCallback(() => onArrowNavigation(NavDirections.LEFT), [onArrowNavigation]);\n\n  useKeyEvent({\n    keys: ARROW_DOWN_KEYS,\n    callback: onArrowDown,\n    ...listenerOptions\n  });\n\n  useKeyEvent({\n    keys: ARROW_UP_KEYS,\n    callback: onArrowUp,\n    ...listenerOptions\n  });\n\n  useKeyEvent({\n    keys: ARROW_RIGHT_KEYS,\n    callback: onArrowRight,\n    ...listenerOptions\n  });\n\n  useKeyEvent({\n    keys: ARROW_LEFT_KEYS,\n    callback: onArrowLeft,\n    ...listenerOptions\n  });\n\n  useKeyEvent({\n    keys: SELECTION_KEYS,\n    callback: onSelectionKey,\n    ...listenerOptions\n  });\n\n  useKeyEvent({\n    keys: ESCAPE_KEYS,\n    callback: onEscape,\n    ...listenerOptions\n  });\n\n  useKeyEvent({\n    keys: HOME_KEYS,\n    callback: onHome,\n    ...listenerOptions\n  });\n\n  useKeyEvent({\n    keys: END_KEYS,\n    callback: onEnd,\n    ...listenerOptions\n  });\n\n  useEffect(() => {\n    if (!focusOnMount || useDocumentEventListeners) return;\n    ref?.current?.focus();\n  }, [focusOnMount, ref, useDocumentEventListeners]);\n}\n"
  },
  {
    "path": "packages/core/src/hooks/useGridKeyboardNavigation/__tests__/gridKeyboardNavigationHelper.test.ts",
    "content": "import { describe, it, expect } from \"vitest\";\nimport { NavDirections } from \"../../useFullKeyboardListeners\";\nimport {\n  calcActiveIndexAfterArrowNavigation,\n  getActiveIndexFromInboundNavigation\n} from \"../gridKeyboardNavigationHelper\";\n\ndescribe(\"getActiveIndexFromInboundNavigation\", () => {\n  describe(\"direction - left\", () => {\n    const direction = NavDirections.LEFT;\n\n    it(\"should return the last item in the 2nd row when there are 4 rows\", () => {\n      const itemsCount = 12;\n      const numberOfItemsInLine = 3;\n      const expectedResult = 5;\n\n      const result = getActiveIndexFromInboundNavigation({ direction, itemsCount, numberOfItemsInLine });\n\n      expect(result).toEqual(expectedResult);\n    });\n\n    it(\"should return the last item in the 2rd row when there are 3 rows\", () => {\n      const itemsCount = 9;\n      const numberOfItemsInLine = 3;\n      const expectedResult = 5;\n\n      const result = getActiveIndexFromInboundNavigation({ direction, itemsCount, numberOfItemsInLine });\n\n      expect(result).toEqual(expectedResult);\n    });\n\n    it(\"should return the last item in the first row when there is one row which is full\", () => {\n      const itemsCount = 5;\n      const numberOfItemsInLine = 5;\n      const expectedResult = 4;\n\n      const result = getActiveIndexFromInboundNavigation({ direction, itemsCount, numberOfItemsInLine });\n\n      expect(result).toEqual(expectedResult);\n    });\n\n    it(\"should return the last item in the first row when there is one row which is not full\", () => {\n      const itemsCount = 3;\n      const numberOfItemsInLine = 5;\n      const expectedResult = 2;\n\n      const result = getActiveIndexFromInboundNavigation({ direction, itemsCount, numberOfItemsInLine });\n\n      expect(result).toEqual(expectedResult);\n    });\n  });\n\n  describe(\"direction - right\", () => {\n    const direction = NavDirections.RIGHT;\n\n    it(\"should return the first item in the 2nd row when there are 4 rows\", () => {\n      const itemsCount = 12;\n      const numberOfItemsInLine = 3;\n      const expectedResult = 3;\n\n      const result = getActiveIndexFromInboundNavigation({ direction, itemsCount, numberOfItemsInLine });\n\n      expect(result).toEqual(expectedResult);\n    });\n\n    it(\"should return the first item in the 2nd row when there are 3 rows\", () => {\n      const itemsCount = 9;\n      const numberOfItemsInLine = 3;\n      const expectedResult = 3;\n\n      const result = getActiveIndexFromInboundNavigation({ direction, itemsCount, numberOfItemsInLine });\n\n      expect(result).toEqual(expectedResult);\n    });\n\n    it(\"should return the first item in the first row when there is one row which is full\", () => {\n      const itemsCount = 7;\n      const numberOfItemsInLine = 7;\n      const expectedResult = 0;\n\n      const result = getActiveIndexFromInboundNavigation({ direction, itemsCount, numberOfItemsInLine });\n\n      expect(result).toEqual(expectedResult);\n    });\n\n    it(\"should return the first item in the first row when there is one row which is not full\", () => {\n      const itemsCount = 3;\n      const numberOfItemsInLine = 7;\n      const expectedResult = 0;\n\n      const result = getActiveIndexFromInboundNavigation({ direction, itemsCount, numberOfItemsInLine });\n\n      expect(result).toEqual(expectedResult);\n    });\n  });\n\n  describe(\"direction - up\", () => {\n    const direction = NavDirections.UP;\n\n    it(\"should return the third item in the last row when the last row has 5 elements out of 5\", () => {\n      const itemsCount = 15;\n      const numberOfItemsInLine = 5;\n      const expectedResult = 12;\n\n      const result = getActiveIndexFromInboundNavigation({ direction, itemsCount, numberOfItemsInLine });\n\n      expect(result).toEqual(expectedResult);\n    });\n\n    it(\"should return the third item in the last row when the last row has 3 elements out of 5\", () => {\n      const itemsCount = 5;\n      const numberOfItemsInLine = 5;\n      const expectedResult = 2;\n\n      const result = getActiveIndexFromInboundNavigation({ direction, itemsCount, numberOfItemsInLine });\n\n      expect(result).toEqual(expectedResult);\n    });\n\n    it(\"should return the first item in the last row when the last row has 1 element out of 5\", () => {\n      const itemsCount = 6;\n      const numberOfItemsInLine = 5;\n      const expectedResult = 5;\n\n      const result = getActiveIndexFromInboundNavigation({ direction, itemsCount, numberOfItemsInLine });\n\n      expect(result).toEqual(expectedResult);\n    });\n  });\n\n  describe(\"direction - down\", () => {\n    const direction = NavDirections.DOWN;\n\n    it(\"should return the third item in the first row when the first row has 5 elements out of 5\", () => {\n      const itemsCount = 10;\n      const numberOfItemsInLine = 5;\n      const expectedResult = 2;\n\n      const result = getActiveIndexFromInboundNavigation({ direction, itemsCount, numberOfItemsInLine });\n\n      expect(result).toEqual(expectedResult);\n    });\n\n    it(\"should return the third item in the first row when the first row has 3 elements out of 5\", () => {\n      const itemsCount = 3;\n      const numberOfItemsInLine = 5;\n      const expectedResult = 2;\n\n      const result = getActiveIndexFromInboundNavigation({ direction, itemsCount, numberOfItemsInLine });\n\n      expect(result).toEqual(expectedResult);\n    });\n\n    it(\"should return the first item in the first row when the first row has 1 element out of 5\", () => {\n      const itemsCount = 1;\n      const numberOfItemsInLine = 5;\n      const expectedResult = 0;\n\n      const result = getActiveIndexFromInboundNavigation({ direction, itemsCount, numberOfItemsInLine });\n\n      expect(result).toEqual(expectedResult);\n    });\n  });\n});\n\ndescribe(\"calcActiveIndexAfterArrowNavigation\", () => {\n  describe(\"direction - up\", () => {\n    const direction = NavDirections.UP;\n\n    it(\"should return the 3rd index of the first row when navigating from 3rd item of second row\", () => {\n      const itemsCount = 12;\n      const numberOfItemsInLine = 3;\n      const activeIndex = 5;\n      const expectedResult = { isOutbound: false, nextIndex: 2 };\n\n      const result = calcActiveIndexAfterArrowNavigation({ direction, itemsCount, numberOfItemsInLine, activeIndex });\n\n      expect(result).toEqual(expectedResult);\n    });\n\n    it(\"should return 'isOutbound = true' when navigating from 3rd item of first row\", () => {\n      const itemsCount = 5;\n      const numberOfItemsInLine = 4;\n      const activeIndex = 2;\n      const expectedResult = { isOutbound: true };\n\n      const result = calcActiveIndexAfterArrowNavigation({ direction, itemsCount, numberOfItemsInLine, activeIndex });\n\n      expect(result).toEqual(expectedResult);\n    });\n\n    it(\"should return 'isOutbound = true' when navigating from the first item of first row\", () => {\n      const itemsCount = 5;\n      const numberOfItemsInLine = 4;\n      const activeIndex = 0;\n      const expectedResult = { isOutbound: true };\n\n      const result = calcActiveIndexAfterArrowNavigation({ direction, itemsCount, numberOfItemsInLine, activeIndex });\n\n      expect(result).toEqual(expectedResult);\n    });\n  });\n\n  describe(\"direction - down\", () => {\n    const direction = NavDirections.DOWN;\n\n    it(\"should return the 3rd index of the second row when navigating from 3rd item of first row\", () => {\n      const itemsCount = 12;\n      const numberOfItemsInLine = 3;\n      const activeIndex = 2;\n      const expectedResult = { isOutbound: false, nextIndex: 5 };\n\n      const result = calcActiveIndexAfterArrowNavigation({ direction, itemsCount, numberOfItemsInLine, activeIndex });\n\n      expect(result).toEqual(expectedResult);\n    });\n\n    it(\"should return 'isOutbound = true' when navigating from the 3rd index of the first row, and second row has only 2 items\", () => {\n      const itemsCount = 5;\n      const numberOfItemsInLine = 3;\n      const activeIndex = 2;\n      const expectedResult = { isOutbound: true };\n\n      const result = calcActiveIndexAfterArrowNavigation({ direction, itemsCount, numberOfItemsInLine, activeIndex });\n\n      expect(result).toEqual(expectedResult);\n    });\n\n    it(\"should return 'isOutbound = true' when navigating from first item of the last row\", () => {\n      const itemsCount = 5;\n      const numberOfItemsInLine = 3;\n      const activeIndex = 3;\n      const expectedResult = { isOutbound: true };\n\n      const result = calcActiveIndexAfterArrowNavigation({ direction, itemsCount, numberOfItemsInLine, activeIndex });\n\n      expect(result).toEqual(expectedResult);\n    });\n  });\n\n  describe(\"direction - left\", () => {\n    const direction = NavDirections.LEFT;\n\n    it(\"should return the second index of the second row when navigating from the third index of the second row\", () => {\n      const itemsCount = 9;\n      const numberOfItemsInLine = 4;\n      const activeIndex = 6;\n      const expectedResult = { isOutbound: false, nextIndex: 5 };\n\n      const result = calcActiveIndexAfterArrowNavigation({ direction, itemsCount, numberOfItemsInLine, activeIndex });\n\n      expect(result).toEqual(expectedResult);\n    });\n\n    it(\"should return 'isOutbound = true' when navigating from the first index of the second row\", () => {\n      const itemsCount = 9;\n      const numberOfItemsInLine = 4;\n      const activeIndex = 4;\n      const expectedResult = { isOutbound: true };\n\n      const result = calcActiveIndexAfterArrowNavigation({ direction, itemsCount, numberOfItemsInLine, activeIndex });\n\n      expect(result).toEqual(expectedResult);\n    });\n\n    it(\"should return 'isOutbound = true' when navigating from the first index of the first row\", () => {\n      const itemsCount = 9;\n      const numberOfItemsInLine = 4;\n      const activeIndex = 0;\n      const expectedResult = { isOutbound: true };\n\n      const result = calcActiveIndexAfterArrowNavigation({ direction, itemsCount, numberOfItemsInLine, activeIndex });\n\n      expect(result).toEqual(expectedResult);\n    });\n  });\n\n  describe(\"direction - right\", () => {\n    const direction = NavDirections.RIGHT;\n\n    it(\"should return the third index of the second row when navigating from the second index of the second row\", () => {\n      const itemsCount = 9;\n      const numberOfItemsInLine = 4;\n      const activeIndex = 5;\n      const expectedResult = { isOutbound: false, nextIndex: 6 };\n\n      const result = calcActiveIndexAfterArrowNavigation({ direction, itemsCount, numberOfItemsInLine, activeIndex });\n\n      expect(result).toEqual(expectedResult);\n    });\n\n    it(\"should return 'isOutbound = true' when navigating from the last index of the second row, when second row is full\", () => {\n      const itemsCount = 9;\n      const numberOfItemsInLine = 4;\n      const activeIndex = 7;\n      const expectedResult = { isOutbound: true };\n\n      const result = calcActiveIndexAfterArrowNavigation({ direction, itemsCount, numberOfItemsInLine, activeIndex });\n\n      expect(result).toEqual(expectedResult);\n    });\n\n    it(\"should return 'isOutbound = true' when navigating from the last index of the last row, when last row is not completely full\", () => {\n      const itemsCount = 5;\n      const numberOfItemsInLine = 3;\n      const activeIndex = 4;\n      const expectedResult = { isOutbound: true };\n\n      const result = calcActiveIndexAfterArrowNavigation({ direction, itemsCount, numberOfItemsInLine, activeIndex });\n\n      expect(result).toEqual(expectedResult);\n    });\n  });\n\n  describe(\"disabled indexes\", () => {\n    it(\"should skip a single disabled index\", () => {\n      const direction = NavDirections.RIGHT;\n      const itemsCount = 9;\n      const numberOfItemsInLine = 5;\n      const activeIndex = 0;\n      const disabledIndexes = [1, 3];\n      const expectedResult = { isOutbound: false, nextIndex: 2 }; // skip 1, which is a disabled index\n\n      const result = calcActiveIndexAfterArrowNavigation({\n        direction,\n        itemsCount,\n        numberOfItemsInLine,\n        activeIndex,\n        disabledIndexes\n      });\n\n      expect(result).toEqual(expectedResult);\n    });\n\n    it(\"should return outbound navigation when skipping over disabled index 0\", () => {\n      const direction = NavDirections.LEFT;\n      const itemsCount = 2;\n      const numberOfItemsInLine = 2;\n      const activeIndex = 1;\n      const disabledIndexes = [0];\n      const expectedResult = { isOutbound: true };\n\n      const result = calcActiveIndexAfterArrowNavigation({\n        direction,\n        itemsCount,\n        numberOfItemsInLine,\n        activeIndex,\n        disabledIndexes\n      });\n\n      expect(result).toEqual(expectedResult);\n    });\n\n    it(\"should skip multiple disabled sequential indexes in an inbound navigation\", () => {\n      const direction = NavDirections.UP;\n      const itemsCount = 10;\n      const numberOfItemsInLine = 2;\n      const activeIndex = 8; // last row, left item\n      const disabledIndexes = [2, 4, 6]; // all the items of the left column\n      const expectedResult = { isOutbound: false, nextIndex: 0 };\n\n      const result = calcActiveIndexAfterArrowNavigation({\n        direction,\n        itemsCount,\n        numberOfItemsInLine,\n        activeIndex,\n        disabledIndexes\n      });\n\n      expect(result).toEqual(expectedResult);\n    });\n\n    it(\"should return an outbound navigation when all indexes in the navigation direction are disabled\", () => {\n      const direction = NavDirections.UP;\n      const itemsCount = 5;\n      const numberOfItemsInLine = 5;\n      const activeIndex = 0; // last row, left item\n      const disabledIndexes = [1, 2, 3, 4]; // all the items except for the first one\n      const expectedResult = { isOutbound: true };\n\n      const result = calcActiveIndexAfterArrowNavigation({\n        direction,\n        itemsCount,\n        numberOfItemsInLine,\n        activeIndex,\n        disabledIndexes\n      });\n\n      expect(result).toEqual(expectedResult);\n    });\n  });\n});\n"
  },
  {
    "path": "packages/core/src/hooks/useGridKeyboardNavigation/__tests__/useGridKeyboardNavigation.test.ts",
    "content": "import { vi, afterEach, describe, it, expect } from \"vitest\";\nimport { renderHook, cleanup, act } from \"@testing-library/react-hooks\";\nimport { fireEvent } from \"@testing-library/react\";\nimport { range } from \"es-toolkit\";\nimport useGridKeyboardNavigation from \"../useGridKeyboardNavigation\";\nimport userEvent from \"@testing-library/user-event\";\n\ndescribe(\"useGridKeyboardNavigation\", () => {\n  let element;\n\n  afterEach(() => {\n    element.remove();\n    cleanup();\n  });\n\n  it(\"should consider the last navigation direction when focusing the element\", () => {\n    const items = itemsArray(9);\n    const { result } = renderHookForTest({ items, numberOfItemsInLine: 3 });\n\n    act(() => {\n      userEvent.keyboard(\"{ArrowLeft}\"); // make sure there's a value for lastNavigationDirection\n      element.focus();\n    });\n\n    expect(result.current.activeIndex).toBe(5); // last index of the right-most line\n  });\n\n  it(\"should do nothing when focusing the element when it is already focused\", () => {\n    const items = itemsArray(9);\n    const { result } = renderHookForTest({ items, numberOfItemsInLine: 3 });\n\n    act(() => {\n      // this should set the activeIndex to 5. Focusing the element after pressing \"left\", is like like the user pressed left to focus into the wrapper element.\n      userEvent.keyboard(\"{ArrowLeft}\");\n      element.focus();\n    });\n    expect(result.current.activeIndex).toBe(5);\n    act(() => {\n      // this would have set the active index to 1 - but it should be ignored, since the wrapper element is already focused.\n      element.focus();\n    });\n\n    expect(result.current.activeIndex).toBe(5);\n  });\n\n  it(\"should return a callback wrapper that sets the activeIndex to the keyboard selected element,\", () => {\n    const { result } = renderHookForTest({});\n\n    act(() => result.current.onSelectionAction(3, true));\n\n    expect(result.current.activeIndex).toBe(3);\n  });\n\n  it(\"should select the currently active item when navigating and selecting using the keyboard\", () => {\n    const onItemClicked = vi.fn();\n    const items = [\"a\", \"b\", \"c\", \"d\"];\n    renderHookForTest({ items, focusOnMount: true, focusItemIndexOnMount: 0, onItemClicked });\n\n    act(() => {\n      fireEvent.keyDown(element, { key: \"ArrowRight\" }); // activeIndex should be set to 1\n    });\n    act(() => {\n      fireEvent.keyDown(element, { key: \" \" }); // perform selection\n    });\n\n    expect(onItemClicked).toHaveBeenCalledTimes(1);\n    expect(onItemClicked).toHaveBeenCalledWith(\"b\", 1);\n  });\n\n  it(\"should ignore keyboard selections which are performed after selecting with the mouse\", () => {\n    const onItemClicked = vi.fn();\n    const items = [\"a\", \"b\", \"c\", \"d\"];\n    const { result } = renderHookForTest({ items, focusOnMount: true, focusItemIndexOnMount: 0, onItemClicked });\n    act(() => result.current.onSelectionAction(1)); // select without the keyboard\n    expect(onItemClicked).toHaveBeenCalledTimes(1);\n\n    act(() => {\n      fireEvent.keyDown(element, { key: \" \" }); // perform selection - which should be ignored\n    });\n\n    expect(onItemClicked).toHaveBeenCalledTimes(1); // no new calls\n  });\n\n  it(\"should return a callback wrapper that calls onItemClicked with the item and the index\", () => {\n    const onItemClicked = vi.fn();\n    const items = [\"a\", \"b\", \"c\", \"d\"];\n    const { result } = renderHookForTest({ onItemClicked, items });\n\n    act(() => result.current.onSelectionAction(2));\n\n    expect(onItemClicked).toHaveBeenCalledTimes(1);\n    expect(onItemClicked).toHaveBeenCalledWith(\"c\", 2);\n  });\n\n  it(\"should update the activeIndex when keyboard-navigating inside the element\", () => {\n    const items = [\"a\", \"b\", \"c\", \"d\"];\n    const { result } = renderHookForTest({ items, numberOfItemsInLine: 2 });\n\n    act(() => result.current.onSelectionAction(0)); // set the activeIndex to 0\n    act(() => {\n      fireEvent.keyDown(element, { key: \"ArrowRight\" });\n    });\n\n    expect(result.current.activeIndex).toBe(1);\n  });\n\n  it(\"should not update the activeIndex when performing outbound navigation with the keyboard\", () => {\n    const items = [\"a\", \"b\", \"c\", \"d\"];\n    const { result } = renderHookForTest({ items, numberOfItemsInLine: 2 });\n\n    act(() => result.current.onSelectionAction(0)); // set the activeIndex to 0\n    act(() => {\n      fireEvent.keyDown(element, { key: \"ArrowUp\" });\n    });\n\n    expect(result.current.activeIndex).toBe(0);\n  });\n\n  it(\"should skip disabled indexes when navigating with the keyboard\", () => {\n    const items = [\"0\", \"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\"];\n    const disabledIndexes = [1, 4];\n    const { result } = renderHookForTest({\n      items,\n      numberOfItemsInLine: 3,\n      focusItemIndexOnMount: 0,\n      focusOnMount: true,\n      disabledIndexes\n    });\n\n    act(() => {\n      fireEvent.keyDown(element, { key: \"ArrowRight\" }); // moving right from index 0 should skip disabled index 1, and set activeIndex to 2\n    });\n\n    expect(result.current.activeIndex).toBe(2);\n  });\n\n  it(\"should ignore a keyboard selection action if the user is currently not using the keyboard\", () => {\n    const { result } = renderHookForTest({ focusItemIndexOnMount: 2, focusOnMount: true });\n\n    act(() => result.current.onSelectionAction(3, true)); // set the activeIndex to 3\n    act(() => result.current.onSelectionAction(2)); // perform a non-keyboard action\n\n    expect(result.current.isInitialActiveState).toBe(false);\n  });\n\n  describe(\"focusItemIndexOnMount\", () => {\n    it(\"should set the active index according to focusItemIndexOnMount on mount, when focusOnMount is true\", () => {\n      const items = [\"a\", \"b\", \"c\", \"d\"];\n\n      const { result } = renderHookForTest({ items, focusItemIndexOnMount: 2, focusOnMount: true });\n\n      expect(result.current.activeIndex).toBe(2);\n    });\n\n    it(\"should ignore the value of focusItemIndexOnMount, when focusOnMount is false\", () => {\n      const items = [\"a\", \"b\", \"c\", \"d\"];\n\n      const { result } = renderHookForTest({ items, focusItemIndexOnMount: 2, focusOnMount: false });\n\n      expect(result.current.activeIndex).toBe(-1);\n    });\n\n    it(\"should return isInitialActiveState = false when focusItemIndexOnMount option is missing\", () => {\n      const items = [\"a\", \"b\", \"c\", \"d\"];\n\n      const { result } = renderHookForTest({ items, focusOnMount: true });\n\n      expect(result.current.isInitialActiveState).toBe(false);\n    });\n\n    it(\"should return isInitialActiveState = false when focusOnMount = false and focusItemIndexOnMount option exists\", () => {\n      const items = [\"a\", \"b\", \"c\", \"d\"];\n\n      const { result } = renderHookForTest({ items, focusItemIndexOnMount: 2, focusOnMount: false });\n\n      expect(result.current.isInitialActiveState).toBe(false);\n    });\n\n    it(\"should return isInitialActiveState = true when focusOnMount and focusItemIndexOnMount option exists\", () => {\n      const items = [\"a\", \"b\", \"c\", \"d\"];\n\n      const { result } = renderHookForTest({ items, focusItemIndexOnMount: 2, focusOnMount: true });\n\n      expect(result.current.isInitialActiveState).toBe(true);\n    });\n\n    it(\"should return isInitialActiveState = false when focusOnMount and focusItemIndexOnMount option exists, and activeIndex changed afterwards\", () => {\n      const items = [\"a\", \"b\", \"c\", \"d\"];\n\n      const { result } = renderHookForTest({ items, focusItemIndexOnMount: 2, focusOnMount: true });\n      act(() => {\n        fireEvent.keyDown(element, { key: \"ArrowLeft\" });\n      });\n\n      expect(result.current.isInitialActiveState).toBe(false);\n    });\n  });\n\n  function itemsArray(length) {\n    return range(length);\n  }\n\n  function renderHookForTest({\n    items = itemsArray(4),\n    numberOfItemsInLine = 3,\n    onItemClicked = vi.fn(),\n    focusOnMount = false,\n    focusItemIndexOnMount = undefined,\n    disabledIndexes = []\n  }) {\n    const itemsCount = items.length;\n    const getItemByIndex = index => items[index];\n\n    element = document.createElement(\"div\");\n    element.tabIndex = -1; // some tests focus the element - a tabIndex value is required for updating the document.activeIndex value\n    document.body.appendChild(element);\n\n    return renderHook(() =>\n      useGridKeyboardNavigation({\n        ref: { current: element },\n        itemsCount,\n        getItemByIndex,\n        onItemClicked,\n        focusOnMount,\n        numberOfItemsInLine,\n        focusItemIndexOnMount,\n        disabledIndexes\n      })\n    );\n  }\n});\n"
  },
  {
    "path": "packages/core/src/hooks/useGridKeyboardNavigation/gridKeyboardNavigationHelper.ts",
    "content": "import { NavDirections } from \"../useFullKeyboardListeners\";\n\nexport function getActiveIndexFromInboundNavigation({\n  direction,\n  numberOfItemsInLine,\n  itemsCount\n}: {\n  direction: NavDirections;\n  numberOfItemsInLine: number;\n  itemsCount: number;\n}) {\n  const getRawIndex = () => {\n    const firstLineMiddleIndex = Math.floor(numberOfItemsInLine / 2);\n    if (direction === NavDirections.UP) {\n      // last line, middle\n      const rowCount = Math.ceil(itemsCount / numberOfItemsInLine);\n      return (rowCount - 1) * numberOfItemsInLine + firstLineMiddleIndex;\n    }\n    if (direction === NavDirections.DOWN) {\n      // first line, middle\n      return firstLineMiddleIndex;\n    }\n    if (direction === NavDirections.LEFT) {\n      // middle line, last item\n      let result = numberOfItemsInLine - 1;\n      const midIndex = Math.floor((itemsCount - 1) / 2);\n      while (result < midIndex) {\n        result += numberOfItemsInLine;\n      }\n      return result;\n    }\n    if (direction === NavDirections.RIGHT) {\n      // middle line, first item\n      let result = 0;\n      const midIndex = Math.floor((itemsCount - 1) / 2);\n      while (result + numberOfItemsInLine < midIndex) {\n        result += numberOfItemsInLine;\n      }\n      return result;\n    }\n  };\n\n  const rawIndex = getRawIndex();\n  return Math.max(0, Math.min(rawIndex, itemsCount - 1));\n}\n\nfunction calcRawNewIndexAfterArrowNavigation({\n  activeIndex,\n  itemsCount,\n  numberOfItemsInLine,\n  direction,\n  circularNavigation = false\n}: {\n  activeIndex: number;\n  itemsCount: number;\n  numberOfItemsInLine: number;\n  direction: NavDirections;\n  circularNavigation?: boolean;\n}) {\n  const getIndexLine = (index: number) => Math.ceil((index + 1) / numberOfItemsInLine);\n\n  const horizontalChange = (isIndexIncrease: boolean) => {\n    let nextIndex = activeIndex + (isIndexIncrease ? 1 : -1);\n\n    if (nextIndex < 0 || nextIndex >= itemsCount) {\n      if (circularNavigation) {\n        if (nextIndex < 0) {\n          nextIndex = itemsCount - 1;\n        } else if (nextIndex >= itemsCount) {\n          nextIndex = 0;\n        }\n      } else {\n        return { isOutbound: true };\n      }\n    }\n\n    const currentLine = getIndexLine(activeIndex);\n    const nextIndexLine = getIndexLine(nextIndex);\n    if (currentLine !== nextIndexLine) {\n      return { isOutbound: true };\n    }\n\n    return { isOutbound: false, nextIndex };\n  };\n\n  const verticalChange = (isIndexIncrease: boolean) => {\n    const nextIndex = activeIndex + numberOfItemsInLine * (isIndexIncrease ? 1 : -1);\n    if (nextIndex < 0 || itemsCount <= nextIndex) {\n      return { isOutbound: true };\n    }\n    return { isOutbound: false, nextIndex };\n  };\n\n  switch (direction) {\n    case NavDirections.RIGHT:\n      return horizontalChange(true);\n    case NavDirections.LEFT:\n      return horizontalChange(false);\n    case NavDirections.DOWN:\n      return verticalChange(true);\n    case NavDirections.UP:\n      return verticalChange(false);\n  }\n}\n\nexport function calcActiveIndexAfterArrowNavigation({\n  activeIndex,\n  itemsCount,\n  numberOfItemsInLine,\n  direction,\n  disabledIndexes = [],\n  circularNavigation = false\n}: {\n  activeIndex: number;\n  itemsCount: number;\n  numberOfItemsInLine: number;\n  direction: NavDirections;\n  disabledIndexes?: number[];\n  circularNavigation?: boolean;\n}) {\n  let result = calcRawNewIndexAfterArrowNavigation({\n    activeIndex,\n    itemsCount,\n    numberOfItemsInLine,\n    direction,\n    circularNavigation\n  });\n  while (!result.isOutbound && disabledIndexes.includes(result.nextIndex)) {\n    result = calcRawNewIndexAfterArrowNavigation({\n      activeIndex: result.nextIndex,\n      itemsCount,\n      numberOfItemsInLine,\n      direction,\n      circularNavigation\n    });\n  }\n\n  return result;\n}\n"
  },
  {
    "path": "packages/core/src/hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.ts",
    "content": "import { type MutableRefObject, type ReactElement, useCallback, useContext, useEffect, useRef, useState } from \"react\";\nimport { GridKeyboardNavigationContext } from \"../../components/GridKeyboardNavigationContext/GridKeyboardNavigationContext\";\nimport useFullKeyboardListeners, { type NavDirections } from \"../../hooks/useFullKeyboardListeners\";\nimport { useEventListener } from \"@vibe/shared\";\nimport {\n  calcActiveIndexAfterArrowNavigation,\n  getActiveIndexFromInboundNavigation\n} from \"./gridKeyboardNavigationHelper\";\nimport { useLastNavigationDirection } from \"../../components/Menu/Menu/hooks/useLastNavigationDirection\";\n\nconst NO_ACTIVE_INDEX = -1;\n\n/**\n * A hook which is used for accessible keyboard navigation. Useful for components rendering a list of items that can be navigated and selected with a keyboard.\n * @param {Object} options\n * @param {React.MutableRefObject} options.ref - the reference for the component that listens to keyboard\n * @param {number} options.itemsCount - the number of items\n * @param {number} options.numberOfItemsInLine - the number of items on each line of the grid\n * @param {function} options.onItemClicked - the callback for selecting an item. It will be called when an active item is selected, for example with \"Enter\".\n * @param {function} options.getItemByIndex - a function which gets an index as a param, and returns the item on that index\n * @param {\"directional\" | \"first\"} options.entryFocusStrategy - Determines how the first item is focused when entering the grid via keyboard.\n *   - \"directional\": Tries to focus based on the entry direction (Tab vs Shift+Tab). This is the default.\n *   - \"first\": Always focuses the first item.\n * @param {boolean=} options.focusOnMount - if true, the referenced element will be focused when mounted\n * @param {number=} options.focusItemIndexOnMount - optional item index to focus when mounted. Only works with \"options.focusOnMount\".\n * @param {number[]=} options.disabledIndexes - optional array of disabled indices, which will be skipped while navigating.\n * @param {boolean=} options.circularNavigation - if true, the navigation will wrap around the grid\n * @returns {useGridKeyboardNavigationResult}\n *\n * @typedef useGridKeyboardNavigationResult\n * @property {number} activeIndex - the currently active index\n * @property {boolean} isInitialActiveState - if true, the currently active element was due to an initial mounting index option. See \"options.focusItemIndexOnMount\".\n * @property {(index: number, isKeyboardAction?: boolean) => void} onSelectionAction - the callback which should be used to select an item.\n * It should be called with the selected item's index. Use this callback for onClick handlers, for example.\n * The \"isKeyboardAction\" can be used to indicate a keyboard selection, which will affect the currently active index.\n */\nexport default function useGridKeyboardNavigation({\n  ref,\n  itemsCount,\n  numberOfItemsInLine,\n  onItemClicked, // the callback to call when an item is selected\n  entryFocusStrategy = \"directional\",\n  getItemByIndex = (_index: number) => {},\n  focusOnMount = false,\n  focusItemIndexOnMount = NO_ACTIVE_INDEX,\n  disabledIndexes = [],\n  circularNavigation = false\n}: {\n  ref: MutableRefObject<HTMLElement>;\n  itemsCount: number;\n  numberOfItemsInLine: number;\n  onItemClicked: (element: HTMLElement | ReactElement | void | string, index: number) => void;\n  entryFocusStrategy?: \"directional\" | \"first\";\n  getItemByIndex: (index: number | void) => HTMLElement | ReactElement | void | string;\n  focusOnMount?: boolean;\n  focusItemIndexOnMount?: number;\n  disabledIndexes?: number[];\n  circularNavigation?: boolean;\n}) {\n  const [isInitialActiveState, setIsInitialActiveState] = useState(\n    focusOnMount && focusItemIndexOnMount !== NO_ACTIVE_INDEX\n  );\n  const skippedInitialActiveIndexChange = useRef(false);\n  const [activeIndex, setActiveIndex] = useState(isInitialActiveState ? focusItemIndexOnMount : NO_ACTIVE_INDEX);\n  const [isUsingKeyboardNav, setIsUsingKeyboardNav] = useState(true);\n\n  const keyboardContext = useContext(GridKeyboardNavigationContext);\n\n  const onArrowNavigation = (direction: NavDirections) => {\n    setIsUsingKeyboardNav(true);\n    if (activeIndex === NO_ACTIVE_INDEX) {\n      setActiveIndex(0);\n      return;\n    }\n\n    const { isOutbound, nextIndex } = calcActiveIndexAfterArrowNavigation({\n      activeIndex,\n      itemsCount,\n      numberOfItemsInLine,\n      direction,\n      disabledIndexes,\n      circularNavigation\n    });\n    if (isOutbound) {\n      keyboardContext?.onOutboundNavigation(ref, direction);\n    } else {\n      setActiveIndex(nextIndex);\n    }\n  };\n\n  const onHomeNavigation = useCallback(() => {\n    setIsUsingKeyboardNav(true);\n    const firstEnabledIndex = disabledIndexes.includes(0)\n      ? disabledIndexes.length < itemsCount\n        ? Array.from({ length: itemsCount }, (_, i) => i).find(i => !disabledIndexes.includes(i)) ?? 0\n        : 0\n      : 0;\n    setActiveIndex(firstEnabledIndex);\n  }, [disabledIndexes, itemsCount]);\n\n  const onEndNavigation = useCallback(() => {\n    setIsUsingKeyboardNav(true);\n    const lastEnabledIndex = disabledIndexes.includes(itemsCount - 1)\n      ? disabledIndexes.length < itemsCount\n        ? Array.from({ length: itemsCount }, (_, i) => itemsCount - 1 - i).find(i => !disabledIndexes.includes(i)) ??\n          itemsCount - 1\n        : itemsCount - 1\n      : itemsCount - 1;\n    setActiveIndex(lastEnabledIndex);\n  }, [disabledIndexes, itemsCount]);\n\n  useEffect(() => {\n    if (!skippedInitialActiveIndexChange.current) {\n      skippedInitialActiveIndexChange.current = true;\n      return;\n    }\n    // if the active state changes, this is no longer the initial active state\n    setIsInitialActiveState(false);\n  }, [activeIndex]);\n\n  const blurTargetElement = useCallback(() => ref.current?.blur(), [ref]);\n\n  const { lastNavigationDirectionRef } = useLastNavigationDirection();\n  const onFocus = useCallback(() => {\n    if (activeIndex !== NO_ACTIVE_INDEX) {\n      setIsUsingKeyboardNav(true);\n      return;\n    }\n\n    const direction = lastNavigationDirectionRef.current;\n    setActiveIndex(\n      entryFocusStrategy === \"directional\" && direction\n        ? getActiveIndexFromInboundNavigation({ direction, numberOfItemsInLine, itemsCount })\n        : 0\n    );\n    setIsUsingKeyboardNav(true);\n  }, [\n    activeIndex,\n    entryFocusStrategy,\n    itemsCount,\n    lastNavigationDirectionRef,\n    numberOfItemsInLine,\n    setActiveIndex,\n    setIsUsingKeyboardNav\n  ]);\n\n  const onMouseDown = useCallback(() => {\n    // If the user clicked on the grid element we assume that that what will caused the focus\n    setIsUsingKeyboardNav(false);\n  }, [setIsUsingKeyboardNav]);\n\n  const onBlur = useCallback(() => {\n    // If we lose focus we will return to isUsingKeyboardNav default mode which is that any interaction\n    // with the grid always done by keyboard, unless we clicked on the grid element before that with a mouse\n    setIsUsingKeyboardNav(true);\n    setActiveIndex(NO_ACTIVE_INDEX);\n  }, [setActiveIndex]);\n\n  useEventListener({ eventName: \"focus\", callback: onFocus, ref });\n  useEventListener({ eventName: \"mousedown\", callback: onMouseDown, ref });\n  useEventListener({ eventName: \"blur\", callback: onBlur, ref });\n\n  useEffect(() => {\n    if (activeIndex > -1) {\n      ref.current?.focus();\n    }\n  }, [activeIndex, ref]);\n\n  const onSelectionAction = useCallback(\n    (index: number, isKeyboardAction = false) => {\n      setIsUsingKeyboardNav(isKeyboardAction);\n      setActiveIndex(index);\n\n      onItemClicked(getItemByIndex(index), index);\n    },\n    [setActiveIndex, onItemClicked, getItemByIndex]\n  );\n\n  const onKeyboardSelection = useCallback(() => {\n    if (!isUsingKeyboardNav) {\n      return;\n    }\n    return onSelectionAction(activeIndex, true);\n  }, [isUsingKeyboardNav, onSelectionAction, activeIndex]);\n\n  useFullKeyboardListeners({\n    ref,\n    onSelectionKey: onKeyboardSelection,\n    onArrowNavigation,\n    onEscape: blurTargetElement,\n    onHome: onHomeNavigation,\n    onEnd: onEndNavigation,\n    focusOnMount\n  });\n\n  // if the user is not using keyboard nav, the consumers should not treat the index as active\n  const externalActiveIndex = isUsingKeyboardNav ? activeIndex : NO_ACTIVE_INDEX;\n  return {\n    activeIndex: externalActiveIndex,\n    onSelectionAction,\n    isInitialActiveState\n  };\n}\n"
  },
  {
    "path": "packages/core/src/hooks/useHover/useHover.ts",
    "content": "import { type MutableRefObject, useEffect, useRef, useState } from \"react\";\n\n// Standard hook implementation https://usehooks.com/useHover/\nexport default function useHover<T extends HTMLElement = HTMLElement>(): [MutableRefObject<T>, boolean] {\n  const [value, setValue] = useState<boolean>(false);\n  const ref = useRef<T>(null);\n  const handleMouseOver = (): void => setValue(true);\n  const handleMouseOut = (): void => setValue(false);\n  useEffect(\n    () => {\n      const node = ref.current;\n      if (node) {\n        node.addEventListener(\"mouseover\", handleMouseOver);\n        node.addEventListener(\"mouseout\", handleMouseOut);\n        return () => {\n          node.removeEventListener(\"mouseover\", handleMouseOver);\n          node.removeEventListener(\"mouseout\", handleMouseOut);\n        };\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [ref.current] // Recall only if ref changes\n  );\n  return [ref, value];\n}\n"
  },
  {
    "path": "packages/core/src/hooks/useIsMouseEnter.ts",
    "content": "import { useCallback, useState, type RefObject } from \"react\";\nimport useEventListener from \"./useEventListener\";\n\n// TODO can be replaced with useIsMouseOver\nexport default function useIsMouseEnter({ ref }: { ref: RefObject<HTMLElement> }) {\n  const [isHovered, setIsHover] = useState<boolean>(false);\n\n  const setHovered = useCallback(\n    (event: MouseEvent) => {\n      const element = ref && ref.current;\n      const isEventHover = event.target === element;\n      setIsHover(isEventHover);\n    },\n    [setIsHover, ref]\n  );\n  const setNotHovered = useCallback(() => setIsHover(false), [setIsHover]);\n\n  useEventListener({ eventName: \"mouseenter\", callback: setHovered, ref });\n  useEventListener({ eventName: \"mouseleave\", callback: setNotHovered, ref });\n\n  return isHovered;\n}\n"
  },
  {
    "path": "packages/core/src/hooks/useIsMouseOver.ts",
    "content": "import { type RefObject, useCallback, useState } from \"react\";\nimport useEventListener from \"./useEventListener\";\nimport { type GeneralEventType } from \"../types/events\";\n\nexport default function useIsMouseOver({ ref }: { ref: RefObject<HTMLElement> }): boolean {\n  const [isHovered, setIsHover] = useState<boolean>(false);\n\n  const element = ref && ref.current;\n  const setHovered = useCallback(\n    (event: GeneralEventType) => {\n      const isEventHover = event.target === element;\n      setIsHover(isEventHover);\n    },\n    [setIsHover, element]\n  );\n  const setNotHovered = useCallback((_event: GeneralEventType) => setIsHover(false), [setIsHover]);\n\n  useEventListener({ eventName: \"mouseover\", callback: setHovered, ref });\n  useEventListener({ eventName: \"mouseout\", callback: setNotHovered, ref });\n\n  return isHovered;\n}\n"
  },
  {
    "path": "packages/core/src/hooks/useItemsOverflow/useItemsOverflow.ts",
    "content": "import { type RefObject, useCallback, useState, useRef } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"@vibe/shared\";\n\n/**\n * Custom hook that calculates how many items can fit in a container without overflowing\n */\nexport default function useItemsOverflow({\n  containerRef,\n  gap,\n  deductedSpaceRef,\n  deductedWidth = 0,\n  itemRefs,\n  minVisibleCount = 0\n}: {\n  containerRef: RefObject<HTMLElement>;\n  gap: number;\n  deductedSpaceRef?: RefObject<HTMLElement>;\n  deductedWidth?: number;\n  itemRefs: RefObject<HTMLElement>[];\n  minVisibleCount?: number;\n}) {\n  const [visibleCount, setVisibleCount] = useState<number>(0);\n  const [hasMeasured, setHasMeasured] = useState<boolean>(false);\n  const itemWidthsRef = useRef<number[]>([]);\n  const deductedWidthRef = useRef<number>(0);\n  const isCalculatingRef = useRef(false);\n\n  const calculateFromCachedWidths = useCallback(() => {\n    const container = containerRef?.current;\n    if (!container || !itemRefs.length) {\n      setVisibleCount(itemRefs.length);\n      return;\n    }\n\n    const containerWidth = container.offsetWidth;\n    const deductedRefWidth = deductedWidthRef.current;\n    // Only apply fixed deductedWidth when container has measurable width (avoids issues in test environments)\n    const availableWidth = containerWidth - deductedRefWidth - (containerWidth > 0 ? deductedWidth : 0);\n\n    let totalItemsWidth = 0;\n    let count = 0;\n\n    const maxIter = Math.min(itemRefs.length, itemWidthsRef.current.length);\n\n    for (let i = 0; i < maxIter; i++) {\n      const itemWidth = itemWidthsRef.current[i];\n      const itemWidthWithGap = i > 0 ? itemWidth + gap : itemWidth;\n\n      if (totalItemsWidth + itemWidthWithGap <= availableWidth) {\n        totalItemsWidth += itemWidthWithGap;\n        count++;\n      } else {\n        break;\n      }\n    }\n\n    // Ensure at least minVisibleCount items are visible\n    const finalCount = Math.max(count, Math.min(minVisibleCount, maxIter));\n    setVisibleCount(finalCount);\n  }, [containerRef, itemRefs, gap, minVisibleCount, deductedWidth]);\n\n  const measureDeductedWidth = useCallback(() => {\n    if (deductedSpaceRef?.current) {\n      deductedWidthRef.current = deductedSpaceRef.current.getBoundingClientRect().width;\n    } else {\n      deductedWidthRef.current = 0;\n    }\n  }, [deductedSpaceRef]);\n\n  const measureAndCacheItemsSync = useCallback(() => {\n    const container = containerRef.current;\n    if (!container || !itemRefs.length) {\n      setVisibleCount(itemRefs.length);\n      setHasMeasured(true);\n      return;\n    }\n\n    measureDeductedWidth();\n\n    const itemElements = itemRefs.map(ref => ref.current).filter(el => el !== null) as HTMLElement[];\n\n    if (itemElements.length === 0) {\n      setVisibleCount(0);\n      itemWidthsRef.current = [];\n      setHasMeasured(true);\n      return;\n    }\n\n    itemWidthsRef.current = itemElements.map(item => item.getBoundingClientRect().width);\n    calculateFromCachedWidths();\n    setHasMeasured(true);\n  }, [containerRef, itemRefs, calculateFromCachedWidths, measureDeductedWidth]);\n\n  const measureAndCacheItems = useCallback(() => {\n    if (isCalculatingRef.current) return;\n    isCalculatingRef.current = true;\n\n    requestAnimationFrame(() => {\n      try {\n        measureAndCacheItemsSync();\n      } finally {\n        isCalculatingRef.current = false;\n      }\n    });\n  }, [measureAndCacheItemsSync]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!containerRef.current) return;\n\n    const resizeObserver = new ResizeObserver(() => {\n      if (itemRefs.length > 0) {\n        if (itemWidthsRef.current.length) {\n          measureDeductedWidth();\n          calculateFromCachedWidths();\n        } else {\n          measureAndCacheItems();\n        }\n      } else {\n        setVisibleCount(0);\n        itemWidthsRef.current = [];\n      }\n    });\n\n    resizeObserver.observe(containerRef.current);\n\n    if (deductedSpaceRef?.current) {\n      resizeObserver.observe(deductedSpaceRef.current);\n    }\n\n    return () => resizeObserver.disconnect();\n  }, [containerRef, deductedSpaceRef, measureDeductedWidth, calculateFromCachedWidths, measureAndCacheItems, itemRefs]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (itemRefs.length > 0) {\n      setHasMeasured(false);\n      // Use synchronous measurement for initial render to prevent delay\n      measureAndCacheItemsSync();\n    } else {\n      setVisibleCount(0);\n      itemWidthsRef.current = [];\n      setHasMeasured(true);\n    }\n  }, [itemRefs, measureAndCacheItemsSync]);\n\n  return { visibleCount, hasMeasured };\n}\n"
  },
  {
    "path": "packages/core/src/hooks/useKeyEvent/index.ts",
    "content": "export { useKeyEvent, type UseKeyEventArgs } from \"@vibe/shared\";\nexport { useKeyEvent as default } from \"@vibe/shared\";\n"
  },
  {
    "path": "packages/core/src/hooks/useKeyboard.ts",
    "content": "import { createEventHandler } from \"./createEventHandler\";\nimport { type KeyboardEventCallback } from \"../types/events\";\n\nexport function useKeyboard({\n  isDisabled,\n  onKeyDown,\n  onKeyUp\n}: {\n  isDisabled: boolean;\n  onKeyDown: KeyboardEventCallback;\n  onKeyUp: KeyboardEventCallback;\n}) {\n  return {\n    keyboardProps: isDisabled\n      ? {}\n      : {\n          onKeyDown: createEventHandler(onKeyDown),\n          onKeyUp: createEventHandler(onKeyUp)\n        }\n  };\n}\n"
  },
  {
    "path": "packages/core/src/hooks/useListenFocusTriggers/index.ts",
    "content": "import useEventListener from \"../useEventListener\";\nimport { type RefObject, useCallback, useRef } from \"react\";\n\nexport default function useListenFocusTriggers({\n  ref,\n  onFocusByKeyboard,\n  onFocusByMouse\n}: {\n  ref: RefObject<HTMLElement>;\n  onFocusByKeyboard?: (event: FocusEvent) => void;\n  onFocusByMouse?: (event: FocusEvent) => void;\n}) {\n  const isElementMouseDown = useRef(false);\n\n  const onMouseDown = useCallback(() => {\n    isElementMouseDown.current = true;\n  }, [isElementMouseDown]);\n\n  const onFocus = useCallback(\n    (e: FocusEvent) => {\n      // if focus triggered by mouse down, call onFocusByMouse\n      if (isElementMouseDown.current) {\n        onFocusByMouse?.(e);\n      } else {\n        onFocusByKeyboard?.(e);\n      }\n    },\n    [onFocusByKeyboard, onFocusByMouse]\n  );\n  const onMouseUp = useCallback(() => {\n    isElementMouseDown.current = false;\n  }, [isElementMouseDown]);\n\n  useEventListener({\n    eventName: \"mousedown\",\n    ref,\n    callback: onMouseDown\n  });\n\n  useEventListener({\n    eventName: \"focus\",\n    ref,\n    callback: onFocus\n  });\n\n  useEventListener({\n    eventName: \"mouseup\",\n    ref,\n    callback: onMouseUp\n  });\n}\n"
  },
  {
    "path": "packages/core/src/hooks/useMediaQuery/index.ts",
    "content": "import { useState, useMemo } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"@vibe/shared\";\n\nexport function useMediaQuery(query: string | string[]) {\n  const queries = useMemo(() => {\n    return Array.isArray(query) ? query : [query];\n  }, [query]);\n\n  const [matches, setMatches] = useState(queries.map(query => !!window.matchMedia(query).matches));\n\n  useIsomorphicLayoutEffect(() => {\n    const mediaQueryList = queries.map(query => window.matchMedia(query));\n    const updated: [MediaQueryList, (event: MediaQueryListEvent) => void][] = mediaQueryList.map((query, index) => {\n      // we save the callback function so when we unmount we could remove the listener\n      const callback = (event: MediaQueryListEvent) => {\n        setMatches(prevState => {\n          const newQueries = [...prevState];\n          newQueries[index] = event.matches;\n          return newQueries;\n        });\n      };\n      query.addEventListener(\"change\", callback);\n      return [query, callback];\n    });\n    return () => {\n      updated.forEach(([query, callback]) => {\n        query.removeEventListener(\"change\", callback);\n      });\n    };\n  }, [queries, setMatches]);\n  return matches;\n}\nexport default useMediaQuery;\n"
  },
  {
    "path": "packages/core/src/hooks/usePrevious/index.ts",
    "content": "import { useRef } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"@vibe/shared\";\n\nexport default function usePrevious<Type>(value: Type): Type {\n  const ref = useRef(undefined);\n  useIsomorphicLayoutEffect(() => {\n    ref.current = value;\n  });\n  return ref.current;\n}\n"
  },
  {
    "path": "packages/core/src/hooks/useRefWithCallback.ts",
    "content": "import { type MutableRefObject, useCallback, useRef } from \"react\";\n\nexport default function useRefWithCallback(\n  onMount: (element: HTMLElement) => void,\n  onUnmount?: (element: HTMLElement) => void\n): [MutableRefObject<HTMLElement>, (node: HTMLElement) => void] {\n  const nodeRef = useRef(null);\n\n  const setRef = useCallback(\n    (node: HTMLElement) => {\n      if (nodeRef.current && onUnmount) {\n        onUnmount(nodeRef.current);\n      }\n\n      nodeRef.current = node;\n\n      if (nodeRef.current && onMount) {\n        onMount(nodeRef.current);\n      }\n    },\n    [onMount, onUnmount]\n  );\n\n  return [nodeRef, setRef];\n}\n"
  },
  {
    "path": "packages/core/src/hooks/useSetFocus/__tests__/useSetFocus.test.ts",
    "content": "import { vi, afterEach, describe, it, expect } from \"vitest\";\nimport { act, cleanup, renderHook } from \"@testing-library/react-hooks\";\nimport useSetFocus from \"../index\";\n\ndescribe(\"useSetFocus\", () => {\n  let element;\n  const focusCallback = vi.fn();\n  const blurCallback = vi.fn();\n\n  afterEach(() => {\n    element.remove();\n    cleanup();\n  });\n\n  it(\"default isFocused value is false\", () => {\n    const { result } = renderHookForTest();\n    expect(result.current.isFocused).toBe(false);\n  });\n\n  it(\"focusCallback should be called after focusing the element\", () => {\n    renderHookForTest();\n\n    act(() => {\n      element.focus();\n    });\n\n    expect(focusCallback.mock.calls.length).toBe(1);\n  });\n\n  it(\"isFocused should be true after focusing the element\", () => {\n    const { result } = renderHookForTest();\n\n    act(() => {\n      element.focus();\n    });\n\n    expect(result.current.isFocused).toBe(true);\n  });\n\n  it(\"blurCallback should not be called after focusing the element\", () => {\n    renderHookForTest();\n\n    act(() => {\n      element.focus();\n    });\n\n    expect(blurCallback.mock.calls.length).toBe(0);\n  });\n\n  it(\"blurCallback should be called after blurring element\", () => {\n    const { result } = renderHookForTest();\n\n    act(() => {\n      element.focus();\n    });\n\n    act(() => {\n      element.blur();\n    });\n\n    expect(blurCallback.mock.calls.length).toBe(1);\n    expect(result.current.isFocused).toBe(false);\n  });\n\n  it(\"isFocused should be false after blurring element\", () => {\n    const { result } = renderHookForTest();\n\n    act(() => {\n      element.focus();\n    });\n\n    act(() => {\n      element.blur();\n    });\n\n    expect(result.current.isFocused).toBe(false);\n  });\n\n  it(\"element should be focused after calling hook.focus()\", () => {\n    const { result } = renderHookForTest();\n\n    act(() => {\n      result.current.focus();\n    });\n\n    expect(result.current.isFocused).toBe(true);\n    expect(document.activeElement).toBe(element);\n  });\n\n  it(\"element should not be focused after calling hook.blur()\", () => {\n    const { result } = renderHookForTest();\n\n    act(() => {\n      result.current.focus();\n    });\n\n    act(() => {\n      result.current.blur();\n    });\n\n    expect(result.current.isFocused).toBe(false);\n    expect(document.activeElement).not.toBe(element);\n  });\n\n  function renderHookForTest() {\n    element = document.createElement(\"input\");\n    document.body.appendChild(element);\n\n    return renderHook(() =>\n      useSetFocus({\n        ref: { current: element },\n        focusCallback: focusCallback,\n        blurCallback: blurCallback\n      })\n    );\n  }\n});\n"
  },
  {
    "path": "packages/core/src/hooks/useSetFocus/index.ts",
    "content": "import { type RefObject, useCallback, useEffect, useState } from \"react\";\nimport useEventListener from \"../useEventListener\";\nimport usePrevious from \"../../hooks/usePrevious\";\n\n// TODO: [breaking] rename to useFocus? and maybe change signature to be like useHover?\nexport default function useSetFocus({\n  ref,\n  focusCallback,\n  blurCallback\n}: {\n  ref: RefObject<HTMLElement>;\n  focusCallback?: () => void;\n  blurCallback?: () => void;\n}) {\n  const [isFocused, setIsFocused] = useState(false);\n  const isFocusedPrev = usePrevious(isFocused);\n\n  useEffect(() => {\n    if (isFocusedPrev === undefined) {\n      // Don't call callback on first render\n      return;\n    }\n\n    // Calling back from here to be sure that isFocused value have already been updated\n    if (isFocused) {\n      focusCallback && focusCallback();\n    } else {\n      blurCallback && blurCallback();\n    }\n  }, [blurCallback, focusCallback, isFocused, isFocusedPrev]);\n\n  const focus = useCallback(() => {\n    ref.current.focus();\n  }, [ref]);\n\n  const blur = useCallback(() => {\n    ref.current.blur();\n  }, [ref]);\n\n  const onFocus = () => {\n    setIsFocused(true);\n  };\n\n  const onBlur = () => {\n    setIsFocused(false);\n  };\n\n  useEventListener({\n    eventName: \"focus\",\n    ref,\n    callback: onFocus\n  });\n\n  useEventListener({\n    eventName: \"blur\",\n    ref,\n    callback: onBlur\n  });\n\n  return { isFocused, focus, blur };\n}\n"
  },
  {
    "path": "packages/core/src/hooks/useStyle.ts",
    "content": "import { type CSSProperties, useMemo, useRef } from \"react\";\nimport { isEqual } from \"es-toolkit\";\n\nconst isEmpty = (value?: unknown): boolean => {\n  if (value == null) {\n    return true;\n  }\n\n  if (typeof value === \"string\" || Array.isArray(value) || (typeof value === \"object\" && \"length\" in value)) {\n    return value.length === 0;\n  }\n\n  if (value instanceof Map || value instanceof Set) {\n    return value.size === 0;\n  }\n\n  if (typeof value === \"object\") {\n    return Object.keys(value).length === 0;\n  }\n\n  return true;\n};\n\n// remove empty values\nfunction removeEmpty(obj: CSSProperties) {\n  const newObj = { ...obj };\n  for (const k in newObj) {\n    if (newObj[k as keyof typeof newObj] === undefined) {\n      delete newObj[k as keyof typeof newObj];\n    }\n  }\n\n  return newObj;\n}\n\nexport default function useStyle(currentStyle: CSSProperties, additionalProps?: CSSProperties) {\n  const additionalPropsRef = useRef<CSSProperties>(additionalProps);\n  const currentStyleRef = useRef<CSSProperties>(currentStyle);\n  // using deep equal in order to allow sending new object for additionalProps\n  // but with the same values inside i.e. '{ color, width }'\n  if (!isEqual(additionalPropsRef.current, additionalProps)) {\n    additionalPropsRef.current = additionalProps;\n  }\n  if (!isEqual(currentStyleRef.current, currentStyle)) {\n    currentStyleRef.current = currentStyle;\n  }\n  const currentStyleObj = currentStyleRef.current;\n  const additionalPropsObj = additionalPropsRef.current;\n  return useMemo(() => {\n    const nonEmptyObj = removeEmpty(additionalPropsObj);\n    if (isEmpty(nonEmptyObj)) return currentStyleObj;\n    return {\n      ...currentStyleObj,\n      ...nonEmptyObj\n    };\n  }, [currentStyleObj, additionalPropsObj]);\n}\n"
  },
  {
    "path": "packages/core/src/hooks/useSwitch/__tests__/useSwitch.test.ts",
    "content": "import { vi, afterEach, describe, it, expect } from \"vitest\";\nimport { act, cleanup, renderHook, type RenderResult } from \"@testing-library/react-hooks\";\nimport useSwitch, { type UseSwitchProps } from \"../index\";\nimport { type ChangeEvent } from \"react\";\n\ndescribe(\"useSwitch\", () => {\n  afterEach(() => {\n    cleanup();\n  });\n\n  describe(\"with no props supplied\", () => {\n    it(\"should default isChecked value to false\", () => {\n      const { result } = renderHookForTest();\n      expect(result.current.isChecked).toBe(false);\n    });\n\n    it(\"should update isChecked after onChange trigger\", () => {\n      const { result } = renderHookForTest();\n      callOnChange(result);\n      expect(result.current.isChecked).toBe(true);\n    });\n  });\n\n  describe(\"with overridden isChecked\", () => {\n    it(\"should return initial isChecked\", () => {\n      const { result } = renderHookForTest({ isChecked: true });\n      expect(result.current.isChecked).toBe(true);\n    });\n\n    it(\"should not update isChecked after onChange trigger\", () => {\n      const { result } = renderHookForTest({ isChecked: true });\n      callOnChange(result);\n      expect(result.current.isChecked).toBe(true);\n    });\n  });\n\n  describe(\"with initial defaultChecked set to true\", () => {\n    it(\"should return isChecked as initial default\", () => {\n      const { result } = renderHookForTest({ defaultChecked: true });\n      expect(result.current.isChecked).toBe(true);\n    });\n\n    it(\"should update isChecked after onChange trigger\", () => {\n      const { result } = renderHookForTest({ defaultChecked: true });\n      callOnChange(result);\n      expect(result.current.isChecked).toBe(false);\n    });\n  });\n\n  describe(\"with disabled prop\", () => {\n    it(\"should return defaultChecked isChecked\", () => {\n      const { result } = renderHookForTest({ isDisabled: true, defaultChecked: true });\n      expect(result.current.isChecked).toBe(true);\n    });\n\n    it(\"should not update isChecked after onChange trigger\", () => {\n      const { result } = renderHookForTest({ isDisabled: true, defaultChecked: true });\n      callOnChange(result);\n      expect(result.current.isChecked).toBe(true);\n    });\n  });\n\n  describe(\"onChange\", () => {\n    const onChange = vi.fn();\n\n    it(\"should not call onChange on initial rendering\", () => {\n      renderHookForTest({ defaultChecked: true, onChange });\n      expect(onChange).toBeCalledTimes(0);\n    });\n\n    it(\"should call onChange exactly once with new value\", () => {\n      const { result } = renderHookForTest({ defaultChecked: true, onChange });\n      callOnChange(result);\n      expect(onChange).toBeCalledTimes(1);\n      expect(onChange).toBeCalledWith(false);\n    });\n  });\n\n  function renderHookForTest(props?: UseSwitchProps) {\n    return renderHook<UseSwitchProps, ReturnType<typeof useSwitch>>(() => useSwitch(props));\n  }\n\n  function callOnChange(result: RenderResult<ReturnType<typeof useSwitch>>) {\n    const mockEvent = {} as ChangeEvent<HTMLInputElement>;\n    act(() => {\n      result.current.onChange(mockEvent);\n    });\n  }\n});\n"
  },
  {
    "path": "packages/core/src/hooks/useSwitch/index.ts",
    "content": "import { type ChangeEvent, useCallback, useEffect, useState } from \"react\";\n\nenum SwitchRole {\n  CHECKBOX = \"checkbox\",\n  BUTTON = \"button\"\n}\n\nexport interface UseSwitchProps {\n  /**\n   * If true, controls the checked state of the switch.\n   */\n  isChecked?: boolean;\n  /**\n   * The initial checked state when uncontrolled.\n   */\n  defaultChecked?: boolean;\n  /**\n   * Callback fired when the switch state changes.\n   */\n  onChange?: (value: boolean, event?: ChangeEvent<HTMLInputElement> | unknown) => void;\n  /**\n   * If true, disables interaction with the switch.\n   */\n  isDisabled?: boolean;\n}\n\nexport default function useSwitch({ isChecked, defaultChecked, onChange, isDisabled }: UseSwitchProps = {}) {\n  // if isChecked is empty, set defaultChecked value (default false value)\n  const overrideCheckedInitial = isChecked ?? !!defaultChecked;\n  const [overrideChecked, setOverrideChecked] = useState(overrideCheckedInitial);\n\n  const overrideOnChange = useCallback(\n    (event?: ChangeEvent<HTMLInputElement> | unknown) => {\n      if (isDisabled) {\n        return;\n      }\n      const newChecked = !overrideChecked;\n      if (isChecked === undefined) {\n        setOverrideChecked(newChecked);\n      }\n      if (event && typeof event === \"object\" && \"target\" in event) {\n        onChange?.(newChecked, event);\n      } else {\n        onChange?.(newChecked);\n      }\n    },\n    [isChecked, isDisabled, onChange, overrideChecked]\n  );\n\n  useEffect(() => {\n    if (isChecked !== undefined) {\n      setOverrideChecked(isChecked);\n    }\n  }, [isChecked]);\n\n  return { isChecked: overrideChecked, onChange: overrideOnChange };\n}\n\nuseSwitch.switchRole = SwitchRole;\n"
  },
  {
    "path": "packages/core/src/hooks/useThrottledCallback.ts",
    "content": "import { useMemo, useCallback } from \"react\";\nimport { throttle } from \"es-toolkit\";\n\nexport default function useThrottledCallback(\n  callback: (...args: Array<unknown>) => void,\n  { wait, trailing = true }: { wait: number; trailing: boolean },\n  dependencies: Array<unknown>\n) {\n  const throttledFunction = useMemo(() => {\n    const edges: (\"leading\" | \"trailing\")[] = trailing ? [\"leading\", \"trailing\"] : [\"leading\"];\n    return throttle(callback, wait, { edges });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [wait, trailing, ...dependencies]);\n\n  const throttledCallback = useCallback(throttledFunction, [throttledFunction]);\n\n  return throttledCallback;\n}\n"
  },
  {
    "path": "packages/core/src/hooks/useTimeout/index.ts",
    "content": "import { useEffect, useRef, useCallback } from \"react\";\nimport { noop } from \"es-toolkit\";\n\nexport default function useTimeout({\n  time = 0,\n  callback,\n  ignoreZeroTime = false\n}: {\n  callback: () => void;\n  time?: number;\n  ignoreZeroTime?: boolean;\n}) {\n  const ignoreTimeout = time === 0 && ignoreZeroTime;\n  const timeoutId = useRef(null);\n  const cancelTimeout = useCallback(() => {\n    if (!timeoutId.current) {\n      return;\n    }\n    clearTimeout(timeoutId.current);\n  }, [timeoutId]);\n\n  useEffect(() => {\n    if (ignoreTimeout) {\n      return;\n    }\n\n    timeoutId.current = setTimeout(callback, time);\n    return () => {\n      clearTimeout(timeoutId.current);\n    };\n  }, [callback, time, timeoutId, ignoreTimeout]);\n\n  if (ignoreTimeout) {\n    return [noop];\n  }\n  return [cancelTimeout];\n}\n"
  },
  {
    "path": "packages/core/src/hooks/useVibeMediaQuery/index.ts",
    "content": "import { useState } from \"react\";\nimport {\n  useIsomorphicLayoutEffect,\n  VIBE_MEDIA_QUERIES,\n  LARGE,\n  SMALL1,\n  XLARGE,\n  MEDIUM1,\n  MEDIUM2,\n  SMALL2,\n  MEDIA_QUERY_SIZES\n} from \"@vibe/shared\";\nimport useMediaQuery from \"../useMediaQuery\";\n\nexport default function useVibeMediaQuery() {\n  const [mediaSize, setMediaSize] = useState(SMALL1);\n  const [isSmall1, isSmall2, isMedium1, isMedium2, isLarge, isXLarge] = useMediaQuery(VIBE_MEDIA_QUERIES);\n\n  useIsomorphicLayoutEffect(() => {\n    if (isSmall1) setMediaSize(SMALL1);\n    if (isSmall2) setMediaSize(SMALL2);\n    if (isMedium1) setMediaSize(MEDIUM1);\n    if (isMedium2) setMediaSize(MEDIUM2);\n    if (isLarge) setMediaSize(LARGE);\n    if (isXLarge) setMediaSize(XLARGE);\n  }, [isSmall1, isSmall2, isMedium1, isMedium2, isLarge, isXLarge, setMediaSize]);\n\n  return mediaSize;\n}\n\nuseVibeMediaQuery.sizes = MEDIA_QUERY_SIZES;\n"
  },
  {
    "path": "packages/core/src/hooks/useWizard/__tests__/useWizard.test.ts",
    "content": "import { vi, describe, it, expect } from \"vitest\";\nimport { renderHook, act } from \"@testing-library/react-hooks\";\nimport useWizard from \"../useWizard\";\n\ndescribe(\"useWizard\", () => {\n  it(\"should initialize with the correct initial step\", () => {\n    const { result } = renderHook(() => useWizard({ stepCount: 3, initialStep: 1 }));\n    expect(result.current.activeStep).toBe(1);\n  });\n\n  it(\"should initialize with step 0 if initial step is out of bounds\", () => {\n    const { result } = renderHook(() => useWizard({ stepCount: 3, initialStep: 5 }));\n    expect(result.current.activeStep).toBe(0);\n  });\n\n  it(\"should correctly identify first step\", () => {\n    const { result } = renderHook(() => useWizard({ stepCount: 3 }));\n    expect(result.current.isFirstStep).toBe(true);\n\n    act(() => {\n      result.current.next();\n    });\n    expect(result.current.isFirstStep).toBe(false);\n  });\n\n  it(\"should correctly identify last step\", () => {\n    const { result } = renderHook(() => useWizard({ stepCount: 3, initialStep: 2 }));\n    expect(result.current.isLastStep).toBe(true);\n\n    act(() => {\n      result.current.back();\n    });\n    expect(result.current.isLastStep).toBe(false);\n  });\n\n  it(\"should increment step when next is called\", () => {\n    const { result } = renderHook(() => useWizard({ stepCount: 3 }));\n    act(() => {\n      result.current.next();\n    });\n    expect(result.current.activeStep).toBe(1);\n  });\n\n  it(\"should decrement step when back is called\", () => {\n    const { result } = renderHook(() => useWizard({ stepCount: 3, initialStep: 1 }));\n    act(() => {\n      result.current.back();\n    });\n    expect(result.current.activeStep).toBe(0);\n  });\n\n  it(\"should go to correct step when goToStep is called\", () => {\n    const { result } = renderHook(() => useWizard({ stepCount: 5 }));\n    act(() => {\n      result.current.goToStep(3);\n    });\n    expect(result.current.activeStep).toBe(3);\n  });\n\n  it(\"should not go to an out-of-bounds step\", () => {\n    const { result } = renderHook(() => useWizard({ stepCount: 3 }));\n    act(() => {\n      result.current.goToStep(5);\n    });\n    expect(result.current.activeStep).toBe(0);\n  });\n\n  it(\"should call onStepChange when step changes\", () => {\n    const onStepChange = vi.fn();\n    const { result } = renderHook(() => useWizard({ stepCount: 3, onStepChange }));\n    act(() => {\n      result.current.next();\n    });\n    expect(onStepChange).toHaveBeenCalledWith(1, 0);\n  });\n\n  it(\"should call onFinish when reaching the last step and calling next\", () => {\n    const onFinish = vi.fn();\n    const { result } = renderHook(() => useWizard({ stepCount: 3, onFinish }));\n    act(() => {\n      result.current.goToStep(2);\n    });\n    act(() => {\n      result.current.next();\n    });\n    expect(onFinish).toHaveBeenCalled();\n  });\n\n  it(\"should not call onStepChange when reaching the last step and calling next\", () => {\n    const onStepChange = vi.fn();\n    const { result } = renderHook(() => useWizard({ stepCount: 3, onStepChange }));\n    act(() => {\n      result.current.goToStep(2);\n    });\n    act(() => {\n      result.current.next();\n    });\n    // 1 call when calling goToStep, no call when calling next\n    expect(onStepChange).toHaveBeenCalledTimes(1);\n  });\n\n  it(\"should update direction correctly when moving forward and backward\", () => {\n    const { result } = renderHook(() => useWizard({ stepCount: 4 }));\n    expect(result.current.direction).toBe(undefined);\n\n    act(() => {\n      result.current.next();\n    });\n    expect(result.current.direction).toBe(\"forward\");\n\n    act(() => {\n      result.current.back();\n    });\n    expect(result.current.direction).toBe(\"backward\");\n\n    act(() => {\n      result.current.goToStep(2);\n    });\n    expect(result.current.direction).toBe(\"forward\");\n  });\n\n  it(\"should not change step if next is called on last step\", () => {\n    const { result } = renderHook(() => useWizard({ stepCount: 3, initialStep: 2 }));\n    act(() => {\n      result.current.next();\n    });\n    expect(result.current.activeStep).toBe(2);\n  });\n\n  it(\"should not change step if back is called on first step\", () => {\n    const { result } = renderHook(() => useWizard({ stepCount: 3 }));\n    act(() => {\n      result.current.back();\n    });\n    expect(result.current.activeStep).toBe(0);\n  });\n});\n"
  },
  {
    "path": "packages/core/src/hooks/useWizard/useWizard.ts",
    "content": "import { useCallback, useState } from \"react\";\nimport { type UseWizardProps, type UseWizardReturnValue, type WizardDirection } from \"./useWizard.types\";\n\nfunction useWizard({ initialStep = 0, stepCount, onStepChange, onFinish }: UseWizardProps): UseWizardReturnValue {\n  const lastStep = stepCount - 1;\n  const [activeStep, setActiveStep] = useState<number>(initialStep >= 0 && initialStep <= lastStep ? initialStep : 0);\n  const [direction, setDirection] = useState<WizardDirection>();\n\n  const isFirstStep = activeStep === 0;\n  const isLastStep = activeStep === lastStep;\n\n  const canGoNext = activeStep <= lastStep;\n  const canGoBack = activeStep > 0;\n\n  const goToStep = useCallback(\n    (newStep: number) => {\n      if (newStep < 0 || newStep >= stepCount) return;\n\n      const oldStep = activeStep;\n      setActiveStep(newStep);\n      setDirection(newStep > oldStep ? \"forward\" : \"backward\");\n      onStepChange?.(newStep, oldStep);\n    },\n    [stepCount, activeStep, onStepChange]\n  );\n\n  const next = useCallback(() => {\n    if (!canGoNext) return;\n    if (activeStep === lastStep) {\n      onFinish?.();\n      return;\n    }\n    goToStep(activeStep + 1);\n  }, [canGoNext, activeStep, lastStep, goToStep, onFinish]);\n\n  const back = useCallback(() => {\n    if (!canGoBack) return;\n    goToStep(activeStep - 1);\n  }, [canGoBack, activeStep, goToStep]);\n\n  return { activeStep, direction, next, back, goToStep, isFirstStep, isLastStep };\n}\n\nexport default useWizard;\n"
  },
  {
    "path": "packages/core/src/hooks/useWizard/useWizard.types.ts",
    "content": "export interface UseWizardProps {\n  /**\n   * The initial step index when the wizard starts.\n   */\n  initialStep?: number;\n  /**\n   * The total number of steps in the wizard.\n   */\n  stepCount: number;\n  /**\n   * Callback fired when the step changes.\n   */\n  onStepChange?: (newStep: number, oldStep: number) => void;\n  /**\n   * Callback fired when the wizard reaches the last step.\n   */\n  onFinish?: () => void;\n}\n\nexport interface UseWizardReturnValue {\n  /**\n   * The index of the currently active step.\n   */\n  activeStep: number;\n  /**\n   * The direction of the step transition.\n   */\n  direction: WizardDirection;\n  /**\n   * Moves to the next step in the wizard.\n   */\n  next: () => void;\n  /**\n   * Moves to the previous step in the wizard.\n   */\n  back: () => void;\n  /**\n   * Moves to a specific step in the wizard.\n   */\n  goToStep: (newStep: number) => void;\n  /**\n   * If true, the current step is the first step.\n   */\n  isFirstStep: boolean;\n  /**\n   * If true, the current step is the last step.\n   */\n  isLastStep: boolean;\n}\n\nexport type WizardDirection = \"forward\" | \"backward\";\n"
  },
  {
    "path": "packages/core/src/index.ts",
    "content": "import \"./style-imports\";\n\nexport * from \"./components\";\nexport * from \"./hooks\";\nexport * from \"./types\";\n"
  },
  {
    "path": "packages/core/src/scripts/generate-metadata.ts",
    "content": "import fs from \"fs\";\nimport path from \"path\";\nimport { withDefaultConfig, type Props } from \"react-docgen-typescript\";\nimport { type ExportDeclaration, Project, type SourceFile } from \"ts-morph\";\nimport { fileURLToPath } from \"url\";\nimport { cpus } from \"os\";\n\nconst __dirname = path.dirname(fileURLToPath(import.meta.url));\nconsole.log(\"__dirname\", __dirname);\nconst CACHE_FILE = path.resolve(__dirname, \".metadata-cache.json\");\nconsole.log(\"CACHE_FILE\", CACHE_FILE);\n\nconst STORYBOOK_BASE_URL = \"https://vibe.monday.com\";\n\nconst IS_CI = process.env.CI === \"true\" || process.env.CI === \"True\";\n\nif (IS_CI) {\n  console.log(\n    \"CI environment detected. For optimal performance, ensure your CI pipeline caches '.metadata-cache.json'.\"\n  );\n}\n\n// Optimal batch size based on CPU cores\nconst CPU_COUNT = cpus().length;\nconst BATCH_SIZE = Math.max(30, Math.ceil(CPU_COUNT * 4)); // Use at least 4x CPU cores as batch size for best performance\n\n// Cache source files to avoid loading the same file multiple times\nconst sourceFileCache = new Map<string, SourceFile>();\n\ninterface AggregatorRecord {\n  filePath: string;\n  aggregator: \"core\" | \"next\";\n  symbols: string[];\n  parentContext: string[];\n}\n\ninterface DocgenResult {\n  filePath: string;\n  components: Array<{\n    displayName: string;\n    description?: string;\n    props?: Props;\n  }>;\n}\n\ntype FinalOutput = Array<{\n  filePath: string;\n  aggregator: \"core\" | \"next\";\n  symbols: string[];\n  displayName: string;\n  description?: string;\n  import: string;\n  parentComponent?: string;\n  subComponents?: string[];\n  storyUrl?: string;\n  previewUrl?: string;\n  props: Props;\n}>;\n\nfunction isIndexFile(filePath: string): boolean {\n  return path.basename(filePath).toLowerCase() === \"index.ts\";\n}\n\n/**\n * Resolves module specifiers to actual file paths by checking common TypeScript file extensions\n */\nfunction findMatchingPaths(baseDir: string, moduleSpecifier: string): string[] {\n  const resolved = path.resolve(baseDir, moduleSpecifier);\n  const candidates = [`${resolved}.ts`, `${resolved}.tsx`, path.join(resolved, \"index.ts\")];\n\n  const matches: string[] = [];\n  for (const candidate of candidates) {\n    if (fs.existsSync(candidate)) {\n      matches.push(candidate);\n    }\n  }\n  return matches;\n}\n\n/**\n * Extracts exported symbols from an export declaration, handling both named and star exports\n */\nfunction getExportedSymbolsFromDecl(decl: ExportDeclaration): string[] {\n  const namedExports = decl.getNamedExports();\n  if (namedExports.length > 0) {\n    return namedExports.map(e => e.getText());\n  }\n\n  const modSpec = decl.getModuleSpecifierValue();\n  if (!modSpec) return [\"*\"];\n\n  const baseDir = path.dirname(decl.getSourceFile().getFilePath());\n  const matchedPaths = findMatchingPaths(baseDir, modSpec);\n  if (matchedPaths.length === 0) return [\"*\"];\n\n  const subFilePath = matchedPaths[0];\n  const project = decl.getSourceFile().getProject();\n\n  let subSf = sourceFileCache.get(subFilePath);\n  if (!subSf) {\n    subSf = project.getSourceFile(subFilePath);\n    if (!subSf) throw new Error(`Source file not found for module specifier: ${modSpec}`);\n    sourceFileCache.set(subFilePath, subSf);\n  }\n\n  const visited = new Set<string>();\n  const expandedSymbols = expandAllExportedSymbols(subSf, visited);\n  return expandedSymbols.length > 0 ? expandedSymbols : [\"*\"];\n}\n\n/**\n * Recursively expands all exported symbols from a source file, including those from star exports\n */\nfunction expandAllExportedSymbols(sf: SourceFile, visited: Set<string>): string[] {\n  if (visited.has(sf.getFilePath())) return [];\n  visited.add(sf.getFilePath());\n\n  const results: string[] = [];\n\n  const exportedDecls = sf.getExportedDeclarations();\n  for (const [exportName] of exportedDecls) {\n    if (exportName !== \"default\") {\n      results.push(exportName);\n    }\n  }\n\n  for (const decl of sf.getExportDeclarations()) {\n    const named = decl.getNamedExports();\n    const modSpec = decl.getModuleSpecifierValue();\n    if (!modSpec) continue;\n\n    if (named.length === 0) {\n      const baseDir = path.dirname(sf.getFilePath());\n      const matchedPaths = findMatchingPaths(baseDir, modSpec);\n      for (const subPath of matchedPaths) {\n        const subSf = sf.getProject().getSourceFile(subPath);\n        if (!subSf) continue;\n        const subSymbols = expandAllExportedSymbols(subSf, visited);\n        results.push(...subSymbols);\n      }\n    }\n  }\n\n  return Array.from(new Set(results));\n}\n\nfunction toRelativePath(filePath: string): string {\n  const srcIndex = filePath.indexOf(\"/src/\");\n  if (srcIndex === -1) {\n    throw new Error(`File path does not contain /src/: ${filePath}`);\n  }\n  return filePath.slice(srcIndex + 1); // +1 to remove the leading slash\n}\n\n/**\n * Recursively traverses the export tree to find all component files\n */\nfunction resolveExportsRecursively(\n  sourceFile: SourceFile,\n  aggregatorLabel: \"core\" | \"next\",\n  visited: Set<string>,\n  parentContext: string[]\n): AggregatorRecord[] {\n  const output: AggregatorRecord[] = [];\n  if (visited.has(sourceFile.getFilePath())) {\n    return output;\n  }\n  visited.add(sourceFile.getFilePath());\n\n  for (const decl of sourceFile.getExportDeclarations()) {\n    const modSpec = decl.getModuleSpecifierValue();\n    if (!modSpec) continue;\n\n    // Handle @vibe/* imports (e.g., export * from \"@vibe/button\")\n    let matchedPaths: string[] = [];\n    if (modSpec.startsWith(\"@vibe/\")) {\n      const pkgName = modSpec.replace(\"@vibe/\", \"\");\n      const pkgPath = path.resolve(__dirname, `../../../components/${pkgName}/src/index.ts`);\n      if (fs.existsSync(pkgPath)) matchedPaths = [pkgPath];\n    } else {\n      const baseDir = path.dirname(sourceFile.getFilePath());\n      matchedPaths = findMatchingPaths(baseDir, modSpec);\n    }\n\n    const exportedSyms = getExportedSymbolsFromDecl(decl);\n\n    for (const matched of matchedPaths) {\n      if (isIndexFile(matched)) {\n        const subSf = sourceFile.getProject().getSourceFile(matched);\n        if (!subSf) {\n          throw new Error(`Index file not found: ${matched}`);\n        }\n        output.push(\n          ...resolveExportsRecursively(subSf, aggregatorLabel, visited, [...parentContext, path.basename(matched)])\n        );\n      } else {\n        output.push({\n          filePath: path.resolve(matched),\n          aggregator: aggregatorLabel,\n          symbols: exportedSyms,\n          parentContext\n        });\n      }\n    }\n  }\n\n  return output;\n}\n\n/**\n * Main aggregator function that processes both core and next entry points\n */\nfunction aggregatorMain(): AggregatorRecord[] {\n  const project = new Project({\n    skipAddingFilesFromTsConfig: true\n  });\n\n  const packageDir = path.resolve(__dirname, \"../components\");\n  project.addSourceFilesAtPaths([`${packageDir}/**/*.ts`, `${packageDir}/**/*.tsx`]);\n\n  // Also load source files from separate component packages (e.g., @vibe/button)\n  const componentsDir = path.resolve(__dirname, \"../../../components\");\n  if (fs.existsSync(componentsDir)) {\n    project.addSourceFilesAtPaths([`${componentsDir}/*/src/**/*.{ts,tsx}`]);\n  }\n\n  const coreIndex = path.join(packageDir, \"index.ts\");\n  const nextIndex = path.join(packageDir, \"next.ts\");\n\n  const finalRecords: AggregatorRecord[] = [];\n  const visited = new Set<string>();\n\n  const sfCore = project.getSourceFile(coreIndex);\n  if (!sfCore) {\n    throw new Error(`Core index file not found at: ${coreIndex}`);\n  }\n  finalRecords.push(...resolveExportsRecursively(sfCore, \"core\", visited, []));\n\n  const sfNext = project.getSourceFile(nextIndex);\n  if (sfNext) {\n    finalRecords.push(...resolveExportsRecursively(sfNext, \"next\", visited, []));\n  }\n\n  const uniqueMap = new Map<string, AggregatorRecord>();\n  for (const rec of finalRecords) {\n    const key = rec.filePath + \"|\" + rec.aggregator;\n    if (!uniqueMap.has(key)) {\n      uniqueMap.set(key, rec);\n    } else {\n      const existing = uniqueMap.get(key) as AggregatorRecord;\n      existing.symbols = Array.from(new Set([...existing.symbols, ...rec.symbols]));\n    }\n  }\n\n  return Array.from(uniqueMap.values());\n}\n\n/**\n * Runs react-docgen-typescript on the provided files to extract component documentation\n */\nasync function runReactDocgenOnFiles(filePaths: string[]): Promise<DocgenResult[]> {\n  // Check which files need to be processed\n  const filesToProcess: string[] = [];\n\n  for (const filePath of filePaths) {\n    if (!fs.existsSync(filePath)) {\n      console.warn(`File not found: ${filePath}`);\n      continue;\n    }\n    filesToProcess.push(filePath); // Always process if file exists\n  }\n\n  console.log(`${filesToProcess.length} files to process`);\n\n  if (filesToProcess.length === 0) {\n    return []; // Return empty if no files to process (e.g. all paths were invalid)\n  }\n\n  // Configure parser with optimized settings\n  const parser = withDefaultConfig({\n    savePropValueAsString: true,\n    shouldExtractLiteralValuesFromEnum: true,\n    shouldRemoveUndefinedFromOptional: true,\n    propFilter: prop => {\n      if (prop.declarations !== undefined && prop.declarations.length > 0) {\n        const hasPropAdditionalDescription = prop.declarations.find(declaration => {\n          return !declaration.fileName.includes(\"node_modules\");\n        });\n\n        return Boolean(hasPropAdditionalDescription);\n      }\n\n      return true;\n    }\n  });\n\n  // Process files in batches to avoid overwhelming the system\n  const batches: string[][] = [];\n\n  for (let i = 0; i < filesToProcess.length; i += BATCH_SIZE) {\n    batches.push(filesToProcess.slice(i, i + BATCH_SIZE));\n  }\n\n  console.log(\n    `Processing ${filesToProcess.length} files in ${batches.length} batches of up to ${BATCH_SIZE} files each (using ${CPU_COUNT} CPU cores)`\n  );\n\n  // Store new results to be added to the cache\n  const newResults: DocgenResult[] = [];\n\n  for (let batchIndex = 0; batchIndex < batches.length; batchIndex++) {\n    const batch = batches[batchIndex];\n    console.log(`Processing batch ${batchIndex + 1}/${batches.length} (${batch.length} files)`);\n\n    const batchPromises = batch.map(async filePath => {\n      try {\n        const startTime = performance.now();\n        const docgenData = parser.parse(filePath);\n        const result = {\n          filePath,\n          components: docgenData.map(c => ({\n            displayName: c.displayName,\n            description: c.description,\n            props: c.props\n          }))\n        };\n\n        const endTime = performance.now();\n        if (endTime - startTime > 500) {\n          console.log(`Slow file: ${filePath} took ${((endTime - startTime) / 1000).toFixed(2)}s`);\n        }\n\n        return result;\n      } catch (err) {\n        console.warn(`Failed to parse component documentation for ${filePath}: ${err.message}`);\n        return null;\n      }\n    });\n\n    const batchResults = await Promise.all(batchPromises);\n\n    batchResults.forEach(result => {\n      if (result) {\n        newResults.push(result);\n      }\n    });\n  }\n\n  // Return both cached and newly processed results\n  return newResults;\n}\n\n/**\n * Extracts parent component name from file path\n */\nfunction getParentComponent(filePath: string): string | undefined {\n  // Only return parent if this is a sub-component (not the main component)\n  const match = filePath.match(/components\\/([^/]+)\\/([^/]+)\\/[^/]+$/);\n  if (!match) return undefined;\n\n  const [, parentDir, componentDir] = match;\n  // If the component directory name is the same as the parent directory name,\n  // this is the main component, not a sub-component\n  if (parentDir === componentDir) return undefined;\n\n  return parentDir;\n}\n\n/**\n * Finds all components in the same directory as the given file\n */\nfunction findSubComponents(filePath: string, allFiles: string[]): string[] {\n  const dir = path.dirname(filePath);\n  const dirName = path.basename(dir);\n  const fileName = path.basename(filePath, path.extname(filePath));\n\n  // Only look for sub-components if we\\'re in a component directory\n  if (!dirName.match(/^[A-Z]/)) return [];\n\n  // Only include sub-components for the main component (the one that matches the directory name)\n  if (fileName !== dirName) return [];\n\n  return allFiles\n    .filter(f => {\n      const fDir = path.dirname(f);\n      const fName = path.basename(f, path.extname(f));\n\n      // Only include files that:\n      // 1. Are in the same directory\n      // 2. Start with the parent component name (e.g., \"TipseenContent\" for \"Tipseen\")\n      // 3. Are not the parent component itself\n      return fDir === dir && fName !== dirName && fName.startsWith(dirName);\n    })\n    .map(f => path.basename(f, path.extname(f)));\n}\n\ninterface StoryMeta {\n  storyUrl: string;\n  previewUrl?: string;\n}\n\nfunction toStorySlug(exportName: string): string {\n  return exportName\n    .replace(/([a-z])([A-Z])/g, \"$1-$2\")\n    .toLowerCase()\n    .replace(/\\s+/g, \"-\");\n}\n\nfunction findFirstStoryExport(content: string): string | null {\n  const re = /export\\s+(?:const|function)\\s+(\\w+)/g;\n  let match;\n  while ((match = re.exec(content)) !== null) {\n    const name = match[1];\n    if (name !== \"default\" && name !== \"meta\" && /^[A-Z]/.test(name)) return name;\n  }\n  return null;\n}\n\nfunction buildStoryMap(): Map<string, StoryMeta> {\n  const docsComponentsDir = path.resolve(__dirname, \"../../../docs/src/pages/components\");\n  const storyMap = new Map<string, StoryMeta>();\n\n  if (!fs.existsSync(docsComponentsDir)) {\n    console.warn(`[storyMap] Docs components directory not found at ${docsComponentsDir}, skipping`);\n    return storyMap;\n  }\n\n  const titleRe = /title:\\s*['\"]([^'\"]+)['\"]/;\n  const dirs = fs.readdirSync(docsComponentsDir, { withFileTypes: true }).filter(d => d.isDirectory());\n\n  for (const dir of dirs) {\n    const dirPath = path.join(docsComponentsDir, dir.name);\n    const storyFiles = fs.readdirSync(dirPath).filter(f => f.endsWith(\".stories.tsx\") || f.endsWith(\".stories.ts\"));\n\n    for (const file of storyFiles) {\n      const content = fs.readFileSync(path.join(dirPath, file), \"utf-8\");\n      const match = titleRe.exec(content);\n      if (!match) continue;\n\n      const title = match[1];\n      const titleSlug = title.toLowerCase().replace(/\\//g, \"-\").replace(/ /g, \"-\");\n      const componentName = title.split(\"/\").pop()!;\n      const key = componentName.toLowerCase();\n\n      if (!storyMap.has(key)) {\n        const storyUrl = `${STORYBOOK_BASE_URL}/?path=/docs/${titleSlug}--docs`;\n        const firstStory = findFirstStoryExport(content);\n        const previewUrl = firstStory\n          ? `${STORYBOOK_BASE_URL}/iframe.html?id=${titleSlug}--${toStorySlug(\n              firstStory\n            )}&viewMode=story&shortcuts=false&singleStory=true`\n          : undefined;\n        storyMap.set(key, { storyUrl, previewUrl });\n      }\n    }\n  }\n\n  console.log(`[storyMap] Built story map: ${storyMap.size} entries`);\n  return storyMap;\n}\n\n/**\n * Merges aggregator records with docgen results and flattens the structure\n */\nfunction mergeResults(\n  aggregator: AggregatorRecord[],\n  docgen: DocgenResult[],\n  storyMap: Map<string, StoryMeta>\n): FinalOutput {\n  const docgenMap = new Map<string, DocgenResult>();\n  for (const d of docgen) {\n    docgenMap.set(d.filePath, d);\n  }\n\n  // Get all file paths for sub-components lookup\n  const allFilePaths = aggregator.map(agg => agg.filePath);\n\n  const files = aggregator.flatMap(agg => {\n    const doc = docgenMap.get(agg.filePath);\n    if (!doc) return [];\n\n    return doc.components.map(component => {\n      const filteredProps: Props = {};\n\n      if (component.props) {\n        for (const [propName, propData] of Object.entries(component.props)) {\n          const { parent: _parent, declarations: _declarations, ...propWithoutParentAndDeclarations } = propData;\n          filteredProps[propName] = propWithoutParentAndDeclarations;\n        }\n      }\n\n      const importPath = `@vibe/core${agg.aggregator === \"next\" ? \"/next\" : \"\"}`;\n\n      return {\n        filePath: toRelativePath(agg.filePath),\n        aggregator: agg.aggregator,\n        symbols: agg.symbols,\n        displayName: component.displayName,\n        description: component.description,\n        props: filteredProps,\n        import: `import { ${component.displayName} } from \"${importPath}\"`,\n        parentComponent: getParentComponent(toRelativePath(agg.filePath)),\n        subComponents: findSubComponents(toRelativePath(agg.filePath), allFilePaths.map(toRelativePath)),\n        storyUrl: storyMap.get(component.displayName.toLowerCase())?.storyUrl,\n        previewUrl: storyMap.get(component.displayName.toLowerCase())?.previewUrl\n      };\n    });\n  });\n\n  return files;\n}\n\n/**\n * Unifies type definitions with their corresponding component files\n */\nfunction unifyTypesWithComponents(records: AggregatorRecord[]): AggregatorRecord[] {\n  const newRecords: AggregatorRecord[] = [];\n  const pathMap = new Map<string, AggregatorRecord>();\n  for (const r of records) {\n    pathMap.set(r.filePath, r);\n  }\n\n  for (const r of records) {\n    if (r.filePath.endsWith(\".types.ts\")) {\n      const baseName = path.basename(r.filePath, \".types.ts\");\n      const dirName = path.dirname(r.filePath);\n      const candidateTsx = path.join(dirName, `${baseName}.tsx`);\n      const candidateTs = path.join(dirName, `${baseName}.ts`);\n\n      const mainRecord = pathMap.get(candidateTsx) || pathMap.get(candidateTs);\n      if (mainRecord) {\n        mainRecord.symbols = Array.from(new Set([...mainRecord.symbols, ...r.symbols]));\n      }\n      continue;\n    }\n\n    newRecords.push(r);\n  }\n\n  return newRecords;\n}\n\nasync function main() {\n  const startTime = performance.now();\n  try {\n    console.log(`Starting metadata generation (using ${CPU_COUNT} CPU cores, batch size ${BATCH_SIZE})...`);\n\n    console.log(\"Aggregating export records...\");\n    let aggregatorRecords = aggregatorMain();\n    console.log(`Found ${aggregatorRecords.length} records`);\n\n    console.log(\"Unifying types with components...\");\n    aggregatorRecords = unifyTypesWithComponents(aggregatorRecords);\n    console.log(`After unification: ${aggregatorRecords.length} records`);\n\n    const finalFilePaths = aggregatorRecords.map(r => r.filePath);\n    console.log(`Processing ${finalFilePaths.length} files with react-docgen-typescript...`);\n\n    const docgenResults = await runReactDocgenOnFiles(finalFilePaths);\n    console.log(`Successfully processed ${docgenResults.length} files`);\n\n    console.log(\"Building story map...\");\n    const storyMap = buildStoryMap();\n\n    console.log(\"Merging results...\");\n    const finalJson = mergeResults(aggregatorRecords, docgenResults, storyMap);\n    console.log(`Final output contains ${finalJson.length} component entries`);\n\n    const outPath = path.resolve(__dirname, \"../../dist/metadata.json\");\n    fs.mkdirSync(path.dirname(outPath), { recursive: true });\n    fs.writeFileSync(outPath, JSON.stringify(finalJson, null, 2), \"utf-8\");\n    console.log(`Done! Wrote metadata to: ${outPath}`);\n  } catch (error) {\n    console.error(\"Failed to generate documentation:\", error.message);\n    process.exit(1);\n  } finally {\n    const endTime = performance.now();\n    const duration = (endTime - startTime) / 1000;\n    console.log(`Execution time: ${duration.toFixed(2)} seconds`);\n  }\n}\n\nmain();\n"
  },
  {
    "path": "packages/core/src/services/themes.ts",
    "content": "function isThemesSupported() {\n  try {\n    if (!window.CSS || !window.CSS.supports) return false;\n    // check if browser supports basic var value usage\n    return window.CSS.supports(\"color\", \"var(--fake-var)\");\n  } catch (e) {\n    return false;\n  }\n}\n\nexport function getCSSVar(varName: string, fallback?: string) {\n  const fb = fallback ? `, ${fallback}` : \"\";\n  if (isThemesSupported()) {\n    return `var(--${varName}${fb})`;\n  }\n}\n\nexport const getComputedVarColor = (elem: Element, cssVar: string) =>\n  getComputedStyle(elem).getPropertyValue(`--${cssVar}`);\n\nexport function hexToRgb(hex: string) {\n  if (hex.startsWith(\"#\")) {\n    hex = hex.substring(1);\n  }\n  const bigint = parseInt(hex, 16);\n  const r = (bigint >> 16) & 255;\n  const g = (bigint >> 8) & 255;\n  const b = bigint & 255;\n\n  return `rgb(${r}, ${g}, ${b})`;\n}\n"
  },
  {
    "path": "packages/core/src/services/virtualized-service.ts",
    "content": "const LAST_ITEM_ID = \"~~~lastItem~~~\";\nconst EMPTY_OBJECT: Record<string, never> = {};\n\ntype NormalizedItem<T> = {\n  item: T;\n  index: number;\n  height: number;\n  size: number;\n  offsetTop: number;\n  offset: number;\n};\n\ntype NormalizedItems<T> = Record<string, NormalizedItem<T>>;\ntype IdGetter<T> = (item: T, index: number) => string;\ntype SizeGetter<T> = (item: T, index: number) => number;\n\nexport const getNormalizedItems = <T>(items: T[], idGetter: IdGetter<T>, sizeGetter: SizeGetter<T>) => {\n  const normalizedItems: NormalizedItems<T> = {};\n  let offset = 0;\n\n  const lastIndex = items.length - 1;\n  items.forEach((item, index) => {\n    const size = sizeGetter(item, index);\n    const uniqueId = idGetter(item, index);\n    // keep height/offsetTop for backward compatibility\n    normalizedItems[uniqueId] = { item, index, height: size, size, offsetTop: offset, offset };\n    if (lastIndex === index) {\n      normalizedItems[LAST_ITEM_ID] = normalizedItems[uniqueId];\n    }\n    offset += size;\n  });\n\n  return normalizedItems;\n};\n\nexport const isItemInView = (item: { offsetTop: number }, scrollTop: number, offsetHeight: number) => {\n  const isItemUnderTheViewableArea = item.offsetTop > scrollTop + offsetHeight;\n  const isItemAboveTheViewableArea = item.offsetTop < scrollTop;\n\n  return !isItemUnderTheViewableArea && !isItemAboveTheViewableArea;\n};\n\nexport const getMaxOffset = <T>(offsetSize: number, normalizedItems: NormalizedItems<T>) => {\n  const lastItem = normalizedItems[LAST_ITEM_ID];\n  if (!lastItem) return 0;\n  const { size, offset } = lastItem;\n  return offset + size - offsetSize; // max offset\n};\n\nexport const easeInOutQuint = (time: number) => {\n  let t = time;\n  return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t;\n};\n\nfunction findItemAtOffset<T>(\n  items: T[],\n  normalizedItems: NormalizedItems<T>,\n  idGetter: IdGetter<T>,\n  fromIndex: number,\n  offset: number\n) {\n  for (let i = fromIndex; i < items.length; i++) {\n    const itemId = idGetter(items[i], i);\n    const normalizedItem = normalizedItems[itemId];\n    const { height, offsetTop } = normalizedItem || EMPTY_OBJECT;\n    if (height + offsetTop > offset) {\n      return itemId;\n    }\n  }\n  return null;\n}\n\n// for vertical layout - this returns true when vertical scrollbar visible\n// for horizontal layout - this returns true when horizontal scrollbar visible\nexport const isLayoutDirectionScrollbarVisible = <T>(\n  items: T[],\n  normalizedItems: NormalizedItems<T>,\n  idGetter: IdGetter<T>,\n  componentSize: number\n) => {\n  if (!componentSize) return false;\n  const lastExistingItem = items[items.length - 1] || EMPTY_OBJECT;\n  const lastExistingItemId = idGetter(lastExistingItem as T, items.length - 1);\n  const normalizedItem = normalizedItems[lastExistingItemId];\n  if (!normalizedItem) return false;\n  const { offset: lastExistingItemIdOffset, size: lastExistingItemSize } = normalizedItems[lastExistingItemId];\n  const maxOffset = lastExistingItemIdOffset + lastExistingItemSize;\n  const isVisible = maxOffset > componentSize;\n  return isVisible;\n};\n\nfunction isEmptyObject(obj: unknown) {\n  return obj === EMPTY_OBJECT;\n}\n\nexport const getOnItemsRenderedData = <T>(\n  items: T[],\n  normalizedItems: NormalizedItems<T>,\n  idGetter: IdGetter<T>,\n  visibleStartIndex: number,\n  visibleStopIndex: number,\n  listSize: number,\n  currentOffsetTop: number\n) => {\n  const firstVisibleItem = items[visibleStartIndex] || EMPTY_OBJECT;\n  const secondVisibleItem = items[visibleStartIndex + 1] || EMPTY_OBJECT;\n  const lastVisibleItem = items[visibleStopIndex] || EMPTY_OBJECT;\n  const firstItemId = isEmptyObject(firstVisibleItem) ? undefined : idGetter(firstVisibleItem as T, visibleStartIndex);\n  const secondItemId = isEmptyObject(secondVisibleItem)\n    ? undefined\n    : idGetter(secondVisibleItem as T, visibleStartIndex + 1);\n  const lastItemId = isEmptyObject(lastVisibleItem) ? undefined : idGetter(lastVisibleItem as T, visibleStopIndex);\n  const centerOffset = currentOffsetTop + listSize / 2;\n  const { offsetTop: firstItemOffsetTop, height: firstItemHeight } = normalizedItems[firstItemId!] || EMPTY_OBJECT;\n  const firstItemOffsetEnd = firstItemOffsetTop + firstItemHeight;\n  const centerItemId = findItemAtOffset(items, normalizedItems, idGetter, visibleStartIndex, centerOffset);\n\n  return {\n    firstItemId,\n    secondItemId,\n    lastItemId,\n    centerItemId,\n    firstItemOffsetEnd,\n    currentOffsetTop\n  };\n};\n"
  },
  {
    "path": "packages/core/src/style-imports.ts",
    "content": "import \"@vibe/style/dist/index.min.css\";\n"
  },
  {
    "path": "packages/core/src/styles/_keyframes.scss",
    "content": "// KEYFRAMES: This loader imports animation mixins content for reuse.\n\n// Loading available keyframe content\n@import \"keyframes/pop/pop-elastic\";\n@import \"keyframes/pop/pop-in\";\n@import \"keyframes/pop/pop-in-from-trigger\";\n@import \"keyframes/pop/pop-in-emphasized\";\n@import \"keyframes/pop/pop-in-elastic\";\n@import \"keyframes/pop/pop-in-elastic-bold\";\n@import \"keyframes/pop/pop-out-from-trigger\";\n@import \"keyframes/spin/spin-in-emphasized\";\n@import \"keyframes/slide/slide-in\";\n@import \"keyframes/slide/slide-in-elastic\";\n@import \"keyframes/slide/slide-out\";\n\n// MIXIN: Keyframe\n// This mixin defines a keyframe definition using @content.\n// @argument: $animation-name\n// This mixin is used to enable reuse for local keyframes content\n\n@mixin keyframe($animation_name) {\n  @keyframes #{$animation_name} {\n    @content;\n  }\n}"
  },
  {
    "path": "packages/core/src/styles/keyframes/pop/_pop-elastic.scss",
    "content": "@mixin pop-elastic() {\n  0% {\n    transform: scale(1);\n  }\n  33% {\n    transform: scale(1.2);\n  }\n  66% {\n    transform: scale(0.9);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n"
  },
  {
    "path": "packages/core/src/styles/keyframes/pop/_pop-in-elastic-bold.scss",
    "content": "@mixin pop-in-elastic-bold() {\n  0% {\n    transform: scale(0.9);\n  }\n  25% {\n    transform: scale(1.05);\n  }\n  50% {\n    transform: scale(0.97);\n  }\n  75% {\n    transform: scale(1.02);\n  }\n  100%{\n    transform: scale(1);\n  }\n}\n"
  },
  {
    "path": "packages/core/src/styles/keyframes/pop/_pop-in-elastic.scss",
    "content": "@mixin pop-in-elastic() {\n  0% {\n    transform: scale(1.1);\n  }\n  33% {\n    transform: scale(0.95);\n  }\n  66% {\n    transform: scale(1.05);\n  }\n  100%{\n    transform: scale(1);\n  }\n}\n"
  },
  {
    "path": "packages/core/src/styles/keyframes/pop/_pop-in-emphasized.scss",
    "content": "@mixin pop-in-emphasized() {\n  0% {\n    transform: scale(0.3);\n    opacity: 0;\n  }\n  70% {\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n"
  },
  {
    "path": "packages/core/src/styles/keyframes/pop/_pop-in-from-trigger.scss",
    "content": "@mixin pop-in-from-trigger() {\n  0% {\n    transform: scale(0.5);\n    opacity: 0;\n  }\n  55% {\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n"
  },
  {
    "path": "packages/core/src/styles/keyframes/pop/_pop-in.scss",
    "content": "@mixin pop-in() {\n  0% {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  70% {\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n"
  },
  {
    "path": "packages/core/src/styles/keyframes/pop/_pop-out-from-trigger.scss",
    "content": "@mixin pop-out-from-trigger() {\n  0% {\n    transform: scale(1);\n  }\n  55% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n    transform: scale(0.5);\n  }\n}\n"
  },
  {
    "path": "packages/core/src/styles/keyframes/slide/_slide-in-elastic.scss",
    "content": "@mixin slide-in-elastic($main-translateY: -115px) {\n  0% {\n    transform: translateY($main-translateY);\n  }\n  33% {\n    transform: translateY(15px);\n  }\n  66% {\n    transform: translateY(-5px);\n  }\n  100% {\n    transform: translateY(0px);\n  }\n}\n"
  },
  {
    "path": "packages/core/src/styles/keyframes/slide/_slide-in.scss",
    "content": "@mixin slide-in($main-translateY: -115px) {\n  0% {\n    transform: translateY($main-translateY);\n  }\n  100% {\n    transform: translateY(0px);\n  }\n}\n"
  },
  {
    "path": "packages/core/src/styles/keyframes/slide/_slide-out.scss",
    "content": "@mixin slide-out($main-translateY:-65px) {\n  0% {\n    transform: translateY(0);\n  }\n  70% {\n    opacity: 0;\n  }\n  100% {\n    transform: translateY($main-translateY);\n    opacity: 0;\n  }\n}\n"
  },
  {
    "path": "packages/core/src/styles/keyframes/spin/_spin-in-emphasized.scss",
    "content": "@mixin spin-in-emphasized($rotate: 25deg) {\n  0% {\n    transform: rotate($rotate);\n    opacity: 0;\n  }\n  70% {\n    opacity: 1;\n  }\n  100% {\n    transform: rotate(0deg);\n  }\n}\n"
  },
  {
    "path": "packages/core/src/styles/states.scss",
    "content": "/* stylelint-disable selector-class-pattern */\n\n@mixin focus-style-inset($focus-radius: 4px, $shadow-depth: 3px) {\n  &:focus-visible,\n  &.focus-visible {\n    @include focus-style-css-inset($focus-radius, $shadow-depth);\n  }\n\n  &:focus:not(.focus-visible) {\n    outline: none;\n  }\n}\n\n@mixin focus-style-on-primary($focus-radius: 4px) {\n  &:focus-visible,\n  &.focus-visible {\n    @include focus-style-css-on-primary($focus-radius);\n  }\n\n  &:focus:not(.focus-visible) {\n    outline: none;\n  }\n}\n\n@mixin focus-style-base($focus-radius: 4px) {\n  outline: none;\n  z-index: 11;\n  border-radius: $focus-radius;\n}\n\n@mixin focus-style-css($focus-radius: 4px, $shadow-depth: 3px) {\n  @include focus-style-base($focus-radius);\n\n  box-shadow: 0 0 0 $shadow-depth hsl(209deg 100% 50% / 50%), 0 0 0 1px var(--primary-hover-color) inset;\n}\n\n@mixin focus-style-css-inset($focus-radius: 4px, $shadow-depth: 3px) {\n  @include focus-style-base($focus-radius);\n\n  box-shadow: 0 0 0 $shadow-depth hsl(209deg 100% 50% / 50%) inset, 0 0 0 1px var(--primary-hover-color) inset;\n}\n\n@mixin focus-style-css-on-primary($focus-radius: 4px) {\n  @include focus-style-base($focus-radius);\n\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n"
  },
  {
    "path": "packages/core/src/styles/typography.scss",
    "content": "@use \"sass:string\";\n@import \"~@vibe/style/dist/mixins\";\n@import \"~@vibe/style/dist/functions\";\n\n@mixin create-text-classes() {\n  @include create-typography-classes($textClasses, text);\n}\n\n@mixin create-title-classes() {\n  @include create-typography-classes($headingClasses, null);\n}\n\n@mixin create-typography-classes($classes, $token-prefix) {\n  @each $class-prefix, $weight-types in $classes {\n    @each $weight-type in $weight-types {\n      $class-name: camelize(#{$class-prefix}-#{$weight-type});\n\n      .#{$class-name} {\n        // if class is a heading class\n        @if str-slice($class-prefix, 1, 1) == \"h\" {\n          @include vibe-heading($class-prefix, $weight-type);\n        } @else {\n          @include vibe-text($class-prefix, $weight-type);\n        }\n      }\n    }\n  }\n}\n\n$headingClasses: (\n  \"h1\": (\n    \"bold\",\n    \"medium\",\n    \"normal\",\n    \"light\"\n  ),\n  \"h2\": (\n    \"bold\",\n    \"medium\",\n    \"normal\",\n    \"light\"\n  ),\n  \"h3\": (\n    \"bold\",\n    \"medium\",\n    \"normal\",\n    \"light\"\n  )\n);\n\n$textClasses: (\n  \"text1\": (\n    \"bold\",\n    \"medium\",\n    \"normal\"\n  ),\n  \"text2\": (\n    \"bold\",\n    \"medium\",\n    \"normal\"\n  ),\n  \"text3\": (\n    \"bold\",\n    \"medium\",\n    \"normal\"\n  )\n);\n\n@mixin smoothing-text {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n\n@mixin label-text {\n  @include smoothing-text;\n  @include vibe-text(text2, normal);\n}\n\n// Caption / Subtext (small)\n@mixin font-caption {\n  @include vibe-text(text2, normal);\n  @include smoothing-text;\n}\n\n@mixin font-input {\n  @include vibe-text(text2, normal);\n}\n\n@mixin heading-padding {\n  padding: 0 4px;\n}\n"
  },
  {
    "path": "packages/core/src/styles/utilities/_utilities-settings.scss",
    "content": "@use \"sass:map\";\n\n$utilities-modules: (\n        \"opacity\": (\n                property: opacity,\n                values: (\n                        disabled: var(--disabled-component-opacity),\n                )\n        ),\n        \"border\": (\n                property: border,\n                values: (\n                        null: var(--border-width) var(--border-style) var(--ui-border-color)\n                )\n        ),\n        \"borderColor\": (\n                property: border-color,\n                class: borderColor,\n                values: $utility-border-colors-vars,\n        ),\n        \"rounded\": (\n                property: border-radius,\n                class: rounded,\n                values: (\n                        0: 0,\n                        small: var(--border-radius-small),\n                        medium: var(--border-radius-medium),\n                        big: var(--border-radius-big),\n                ),\n        ),\n        \"shadow\": (\n                property: box-shadow,\n                class: shadow,\n                values: (\n                        xs: var(--box-shadow-xs),\n                        small: var(--box-shadow-small),\n                        medium: var(--box-shadow-medium),\n                        large: var(--box-shadow-large),\n                )\n        ),\n        \"margin\": (\n                property: margin,\n                class: m,\n                values: map.merge($utility-spacing-vars, (auto: auto)),\n        ),\n        \"marginX\": (\n                property: margin-inline,\n                class: mx,\n                values: map.merge($utility-spacing-vars, (auto: auto))\n        ),\n        \"marginY\": (\n                property: margin-top margin-bottom,\n                class: my,\n                values: map.merge($utility-spacing-vars, (auto: auto)),\n        ),\n        \"marginTop\": (\n                property: margin-top,\n                class: mt,\n                values: map.merge($utility-spacing-vars, (auto: auto)),\n        ),\n        \"marginEnd\": (\n                property: margin-inline-end,\n                class: me,\n                values: map.merge($utility-spacing-vars, (auto: auto)),\n        ),\n        \"marginBottom\": (\n                property: margin-bottom,\n                class: mb,\n                values: map.merge($utility-spacing-vars, (auto: auto)),\n        ),\n        \"marginStart\": (\n                property: margin-inline-start,\n                class: ms,\n                values: map.merge($utility-spacing-vars, (auto: auto)),\n        ),\n        \"padding\": (\n                property: padding,\n                class: p,\n                values: $utility-spacing-vars,\n        ),\n        \"paddingX\": (\n                property: padding-inline,\n                class: px,\n                values: $utility-spacing-vars,\n        ),\n        \"paddingY\": (\n                property: padding-top padding-bottom,\n                class: py,\n                values: $utility-spacing-vars,\n        ),\n        \"paddingTop\": (\n                property: padding-top,\n                class: pt,\n                values: $utility-spacing-vars\n        ),\n        \"paddingEnd\": (\n                property: padding-inline-end,\n                class: pe,\n                values: $utility-spacing-vars\n        ),\n        \"paddingBottom\": (\n                property: padding-bottom,\n                class: pb,\n                values: $utility-spacing-vars\n        ),\n        \"paddingStart\": (\n                property: padding-inline-start,\n                class: ps,\n                values: $utility-spacing-vars\n        ),\n        \"color\": (\n                property: color,\n                class: text,\n                values: $utility-colors-vars,\n        ),\n        \"backgroundColor\": (\n                property: background-color,\n                class: bg,\n                values: $utility-background-colors-vars,\n        ),\n);\n"
  },
  {
    "path": "packages/core/src/tests/__tests__/test-utils.ts",
    "content": "import { vi } from \"vitest\";\n\nlet rafSpy: ReturnType<typeof vi.spyOn>;\n\nexport const mockRequestAnimationFrame = () => {\n  rafSpy = vi.spyOn(window, \"requestAnimationFrame\").mockImplementation((cb: FrameRequestCallback) => {\n    cb(0);\n    return 0;\n  });\n};\n\nexport const restoreRequestAnimationFrameMock = () => {\n  rafSpy.mockRestore();\n};\n"
  },
  {
    "path": "packages/core/src/tests/constants.ts",
    "content": "export enum ComponentDefaultTestId {\n  // Don't remove next line\n  // plop_marker:default-data-testid-declarations\n  LIST_TITLE = \"list-title\",\n  EMPTY_STATE = \"empty-state\",\n  TRANSITION_VIEW = \"transition-view\",\n  TEXT_AREA = \"text-area\",\n  EDITABLE_TEXT = \"editable-text\",\n  TIPSEEN_MEDIA = \"tipseen-media\",\n  INDICATOR = \"indicator\",\n  BADGE = \"badge\",\n  TITLE = \"title\",\n  TEXT = \"text\",\n  COMBOBOX = \"combobox\",\n  COMBOBOX_CATEGORY = \"combobox-category\",\n  COMBOBOX_OPTION = \"combobox-option\",\n  COLOR_PICKER = \"color-picker\",\n  CHECKBOX = \"checkbox\",\n  CHECKBOX_LABEL = \"checkbox-label\",\n  CHECKBOX_CHECKBOX = \"checkbox-checkbox\",\n  DROPDOWN = \"dropdown\",\n  DROPDOWN_OPTION_CONTENT = \"dropdown-option-content\",\n  BUTTON = \"button\",\n  BUTTON_GROUP = \"button-group\",\n  CLICKABLE = \"clickable\",\n  VIRTUALIZED_LIST = \"virtualized-list\",\n  VIRTUALIZED_GRID = \"virtualized-grid\",\n  TEXT_FIELD = \"text-field\",\n  TEXT_FIELD_SECONDARY_BUTTON = \"text-field-secondary-button\",\n  SEARCH = \"search\",\n  CLEAN_SEARCH_BUTTON = \"clean-search-button\",\n  COLOR_PICKER_ITEM = \"color-picker-item\",\n  ICON_BUTTON = \"icon-button\",\n  INFO = \"info\",\n  SVG_ICON = \"svg-icon\",\n  CHIP = \"chip\",\n  RADIO_BUTTON = \"radio-button\",\n  RADIO_BUTTON_LABEL = \"radio-button-label\",\n  RADIO_BUTTON_CONTROL = \"radio-button-control\",\n  TAB = \"tab\",\n  TAB_PANEL = \"tab-panel\",\n  TAB_PANELS = \"tab-panels\",\n  TAB_LIST = \"tab-list\",\n  TABS_CONTEXT = \"tabs-context\",\n  ALERT_BANNER = \"alert-banner\",\n  ALERT_BANNER_BUTTON = \"alert-banner-button\",\n  ALERT_BANNER_LINK = \"alert-banner-link\",\n  ALERT_BANNER_TEXT = \"alert-banner-text\",\n  ATTENTION_BOX = \"attention-box\",\n  BOX = \"box\",\n  AVATAR = \"avatar\",\n  AVATAR_BADGE = \"avatar-badge\",\n  AVATAR_CONTENT = \"avatar-content\",\n  BREADCRUMB_ITEM = \"breadcrumb-item\",\n  BREADCRUMBS_BAR = \"breadcrumbs-bar\",\n  BREADCRUMB_MENU = \"breadcrumb-menu\",\n  BREADCRUMB_MENU_ITEM = \"breadcrumb-menu-item\",\n  PROGRESS_BAR = \"progress-bar\",\n  BAR = \"bar\",\n  BAR_PRIMARY = \"bar-primary\",\n  BAR_SECONDARY = \"bar-secondary\",\n  COLOR_PICKER_ITEM_COMPONENT = \"color-picker-item-component\",\n  COUNTER = \"counter\",\n  MENU = \"menu\",\n  OPTION = \"option\",\n  EXPAND_COLLAPSE = \"expand-collapse\",\n  EDITABLE_INPUT = \"editable-input\",\n  EDITABLE_HEADING = \"editable-heading\",\n  HEADING = \"heading\",\n  LABEL = \"label\",\n  LINK = \"link\",\n  MENU_DIVIDER = \"menu-divider\",\n  MENU_ITEM = \"menu-item\",\n  MENU_ITEM_BUTTON = \"menu-item-button\",\n  MENU_TITLE = \"menu-title\",\n  MENU_TITLE_CAPTION = \"menu-title-caption\",\n  MENU_GRID_ITEM = \"menu-grid-item\",\n  MENU_BUTTON = \"menu-button\",\n  STEP_INDICATOR = \"step-indicator\",\n  STEPS = \"steps\",\n  STEPS_FORWARD_COMMAND = \"steps-forward-command\",\n  STEPS_BACKWARD_COMMAND = \"steps-backward-command\",\n  MULTI_STEP_INDICATOR = \"multi-step-indicator\",\n  SKELETON = \"skeleton\",\n  SPLIT_BUTTON = \"split-button\",\n  SPLIT_BUTTON_PRIMARY_BUTTON = \"split-button-primary-button\",\n  SPLIT_BUTTON_SECONDARY_BUTTON = \"split-button-secondary-button\",\n  TEXT_WITH_HIGHLIGHT = \"text-with-highlight\",\n  TOAST = \"toast\",\n  TOAST_CONTENT = \"toast-content\",\n  TOAST_LINK = \"toast-link\",\n  TOAST_BUTTON = \"toast-button\",\n  TOAST_CLOSE_BUTTON = \"toast-close-button\",\n  TOGGLE = \"toggle\",\n  TIPSEEN = \"tipseen\",\n  TIPSEEN_CONTENT = \"tipseen-content\",\n  TIPSEEN_CONTENT_SUBMIT = \"tipseen-content-submit\",\n  TIPSEEN_CONTENT_DISMISS = \"tipseen-content-dismiss\",\n  TIPSEEN_TITLE = \"tipseen-title\",\n  DIVIDER = \"divider\",\n  DATEPICKER = \"date-picker\",\n  DATEPICKER_HEADER = \"date-picker-header\",\n  DATEPICKER_YEAR_SELECTION = \"date-picker-year-selection\",\n  LOADER = \"loader\",\n  ICON = \"icon\",\n  RESPONSIVE_LIST = \"responsive-list\",\n  LIST = \"list\",\n  MODAL = \"modal\",\n  MODAL_OVERLAY = \"modal-overlay\",\n  MODAL_HEADER = \"modal-header\",\n  MODAL_CLOSE_BUTTON = \"modal-close-button\",\n  MODAL_CONTENT = \"modal-content\",\n  MODAL_FOOTER = \"modal-footer\",\n  MODAL_MEDIA = \"modal-media\",\n  MODAL_BASIC_LAYOUT = \"modal-basic-layout\",\n  MODAL_SIDE_BY_SIDE_LAYOUT = \"modal-side-by-side-layout\",\n  MODAL_MEDIA_LAYOUT = \"modal-media-layout\",\n  FORMATTED_NUMBER = \"formatted-number\",\n  HIDDEN_TEXT = \"hidden-text\",\n  DIALOG_CONTENT_CONTAINER = \"dialog-content-container\",\n  FLEX = \"flex\",\n  TOOLTIP = \"tooltip\",\n  DIALOG = \"dialog\",\n  TABLE = \"table\",\n  TABLE_CONTAINER = \"table-container\",\n  TABLE_BODY = \"table-body\",\n  TABLE_VIRTUALIZED_BODY = \"table-virtualized-body\",\n  TABLE_CELL = \"table-cell\",\n  TABLE_HEADER = \"table-header\",\n  TABLE_HEADER_CELL = \"table-header-cell\",\n  TABLE_ROW = \"table-row\",\n  TABLE_ROW_MENU = \"table-row-menu\"\n}\n\nexport enum NavigationCommand {\n  RIGHT_ARROW = \"{arrowright}\",\n  LEFT_ARROW = \"{arrowleft}\",\n  UP_ARROW = \"{arrowup}\",\n  DOWN_ARROW = \"{arrowdown}\",\n  TAB = \"#TAB#\",\n  ENTER = \"{enter}\",\n  PAGE_UP = \"{pageup}\",\n  PAGE_DOWN = \"{pagedown}\"\n}\n\nexport enum ComponentVibeId {\n  ACCORDION = \"Accordion\",\n  LIST_TITLE = \"ListTitle\",\n  ALERT_BANNER = \"AlertBanner\",\n  ATTENTION_BOX = \"AttentionBox\",\n  AVATAR = \"Avatar\",\n  AVATAR_GROUP = \"AvatarGroup\",\n  BADGE = \"Badge\",\n  BOX = \"Box\",\n  BREADCRUMBS_BAR = \"BreadcrumbsBar\",\n  BUTTON = \"Button\",\n  BUTTON_GROUP = \"ButtonGroup\",\n  CHECKBOX = \"Checkbox\",\n  CHIPS = \"Chips\",\n  COLOR_PICKER = \"ColorPicker\",\n  COMBOBOX = \"Combobox\",\n  COUNTER = \"Counter\",\n  DATE_PICKER = \"DatePicker\",\n  DIALOG = \"Dialog\",\n  DIVIDER = \"Divider\",\n  DROPDOWN = \"Dropdown\",\n  EDITABLE_HEADING = \"EditableHeading\",\n  EDITABLE_TEXT = \"EditableText\",\n  EMPTY_STATE = \"EmptyState\",\n  EXPAND_COLLAPSE = \"ExpandCollapse\",\n  FLEX = \"Flex\",\n  HEADING = \"Heading\",\n  ICON = \"Icon\",\n  ICON_BUTTON = \"IconButton\",\n  INFO = \"Info\",\n  LABEL = \"Label\",\n  PROGRESS_BAR = \"ProgressBar\",\n  LINK = \"Link\",\n  LIST = \"List\",\n  LOADER = \"Loader\",\n  MENU = \"Menu\",\n  MENU_BUTTON = \"MenuButton\",\n  MODAL = \"Modal\",\n  MULTI_STEP_INDICATOR = \"MultiStepIndicator\",\n  NUMBER_FIELD = \"NumberField\",\n  RADIO_BUTTON = \"RadioButton\",\n  SEARCH = \"Search\",\n  SKELETON = \"Skeleton\",\n  SLIDER = \"Slider\",\n  SPLIT_BUTTON = \"SplitButton\",\n  STEPS = \"Steps\",\n  TAB = \"Tab\",\n  TABLE = \"Table\",\n  TEXT = \"Text\",\n  TEXT_AREA = \"TextArea\",\n  TEXT_FIELD = \"TextField\",\n  TEXT_WITH_HIGHLIGHT = \"TextWithHighlight\",\n  THEME_PROVIDER = \"ThemeProvider\",\n  TIPSEEN = \"Tipseen\",\n  TOAST = \"Toast\",\n  TOGGLE = \"Toggle\",\n  TOOLTIP = \"Tooltip\",\n  VIRTUALIZED_GRID = \"VirtualizedGrid\",\n  VIRTUALIZED_LIST = \"VirtualizedList\"\n}\n"
  },
  {
    "path": "packages/core/src/tests/interactions-utils.ts",
    "content": "import { fireEvent, type queries, userEvent, within } from \"@storybook/test\";\nimport { type BoundFunctions, type Screen, type SelectorMatcherOptions, waitFor } from \"@testing-library/react\";\nimport { NavigationCommand as NavigationCommandType } from \"./constants\";\nimport { expect } from \"@storybook/jest\";\n\nexport type Canvas = HTMLElement | BoundFunctions<typeof queries>;\nexport type TestFunction = (canvas: Canvas, args: Record<string, any>) => unknown;\nexport type Coordinates = { x: number; y: number };\n\n// Internal functions\nexport const testFunctionWrapper = (testFunc: TestFunction) => {\n  return async ({ canvasElement, args }: { canvasElement: Screen; args: Record<string, any> }) => {\n    // Starts querying the component from its root element\n    const canvas = getWithin(canvasElement);\n    return testFunc(canvas, args);\n  };\n};\n\nexport const clearText = async (element: HTMLElement) => {\n  userEvent.clear(element);\n};\n\nfunction logFunctionStart(name: string) {\n  expect(` ➡️ ${name}`).toBeDefined();\n}\n\nfunction getElementClientCenter(element: HTMLElement) {\n  const { left, top, width, height } = element.getBoundingClientRect();\n  return {\n    x: left + width / 2,\n    y: top + height / 2\n  };\n}\n\nconst getCoords = ({\n  toElm,\n  toCoords,\n  delta,\n  from\n}: {\n  toElm: HTMLElement;\n  toCoords: Coordinates;\n  delta: Coordinates;\n  from: Coordinates;\n}) => {\n  if (toCoords) {\n    return { ...from, ...toCoords };\n  }\n  if (toElm) {\n    return getElementClientCenter(toElm);\n  }\n  if (delta) {\n    return {\n      x: from.x + delta.x,\n      y: from.y + delta.y\n    };\n  }\n  return {\n    x: from.x + 10,\n    y: from.y + 0\n  };\n};\n\nfunction getWithin(canvasOrValidTestElement: HTMLElement | BoundFunctions<typeof queries>) {\n  if (canvasOrValidTestElement instanceof HTMLElement) {\n    const result = within(canvasOrValidTestElement);\n    if (result instanceof Error) {\n      throw result;\n    }\n    return result;\n  } else if (canvasOrValidTestElement.getByRole) return canvasOrValidTestElement;\n}\n\n// External constants\nexport const NavigationCommand = NavigationCommandType;\n\n// External functions\nexport const resetFocus = async () => {\n  const focusTrap = document.querySelector(\"[data-testid=focusTrap]\");\n  if (focusTrap) {\n    await userEvent.click(focusTrap as HTMLElement);\n  }\n};\n\nexport const interactionSuite =\n  ({\n    beforeEach = null,\n    beforeAll = null,\n    skip = false,\n    tests,\n    afterEach = null,\n    afterAll = null\n  }: {\n    beforeEach?: TestFunction;\n    beforeAll?: TestFunction;\n    skip?: boolean;\n    tests: Array<TestFunction>;\n    afterAll?: TestFunction;\n    afterEach?: TestFunction;\n  }): (({ canvasElement, args }: { canvasElement: Screen; args: Record<string, any> }) => Promise<void>) =>\n  async ({ canvasElement, args }) => {\n    if (skip) return;\n\n    if (beforeAll) {\n      logFunctionStart(\"Before all:\");\n      await testFunctionWrapper(beforeAll)({ canvasElement, args });\n    }\n\n    for (const test of tests) {\n      const fnName = test.name;\n      if (beforeEach) {\n        logFunctionStart(`Before: ${fnName}`);\n        await testFunctionWrapper(beforeEach)({ canvasElement, args });\n      }\n\n      logFunctionStart(`Running : ${fnName}`);\n      await testFunctionWrapper(test)({ canvasElement, args });\n\n      if (afterEach) {\n        logFunctionStart(`After: ${fnName}`);\n        await testFunctionWrapper(afterEach)({ canvasElement, args });\n      }\n    }\n\n    if (afterAll) {\n      logFunctionStart(\"After all:\");\n      await testFunctionWrapper(afterAll)({ canvasElement, args });\n    }\n  };\n\nexport const getByTestId = (rootElement: HTMLElement | BoundFunctions<typeof queries>, dataTestId: string) => {\n  return getWithin(rootElement).getByTestId(dataTestId);\n};\n\nexport const getAllByTestId = (rootElement: HTMLElement | BoundFunctions<typeof queries>, dataTestId: string) => {\n  return getWithin(rootElement).getAllByTestId(dataTestId);\n};\n\nexport const getByPlaceholderText = (rootElement: HTMLElement | BoundFunctions<typeof queries>, text: string) => {\n  return getWithin(rootElement).getByPlaceholderText(text);\n};\n\nexport const getAllByPlaceholderText = (rootElement: HTMLElement | BoundFunctions<typeof queries>, text: string) => {\n  return getWithin(rootElement).getAllByPlaceholderText(text);\n};\n\nexport const getByClassName = (className: string) => {\n  return document.getElementsByClassName(className);\n};\n\nexport const getFirstByClassName = (className: string) => {\n  return document.getElementsByClassName(className)[0];\n};\n\nexport const getByRole = (rootElement: HTMLElement | BoundFunctions<typeof queries>, role: string, options = {}) => {\n  return getWithin(rootElement).getByRole(role, options);\n};\n\nexport const getAllByRole = (rootElement: HTMLElement | BoundFunctions<typeof queries>, role: string) => {\n  return getWithin(rootElement).getAllByRole(role);\n};\n\nexport const getByLabelText = (rootElement: HTMLElement | BoundFunctions<typeof queries>, text: string) => {\n  return getWithin(rootElement).getByLabelText(text);\n};\n\nexport const getAllByLabelText = (rootElement: HTMLElement, text: string) => {\n  return getWithin(rootElement).getAllByLabelText(text);\n};\n\nexport const getByText = (\n  rootElement: HTMLElement | BoundFunctions<typeof queries>,\n  text: string,\n  options: SelectorMatcherOptions = {}\n) => {\n  return getWithin(rootElement).getByText(text, options);\n};\n\nexport const getAllByText = (rootElement: HTMLElement | BoundFunctions<typeof queries>, text: string) => {\n  return getWithin(rootElement).getAllByText(text);\n};\n\nexport const clickElement = (element: HTMLElement) => {\n  return userEvent.click(element);\n};\n\nexport const hoverElement = (element: HTMLElement) => {\n  return userEvent.hover(element);\n};\n\nexport const typeText = async (element: HTMLElement, text: string, waitForDebounceMs = 250) => {\n  const promise = userEvent.type(element, text, {\n    delay: 50\n  });\n  const result = await promise;\n  await delay(waitForDebounceMs);\n  return result;\n};\n\nexport const expectActiveElementToHaveExactText = (text: string) => {\n  expect(document.activeElement).toHaveTextContent(new RegExp(`^${text}$`));\n};\n\nexport const expectActiveElementToHavePartialText = (text: string) => {\n  expect(document.activeElement).toHaveTextContent(text);\n};\n\nexport const pressNavigationKey = async (command = NavigationCommandType.TAB, waitForDebounceMs = 0): Promise<any> => {\n  const promise = command === NavigationCommandType.TAB ? userEvent.tab() : userEvent.keyboard(command);\n  const result = await promise;\n  await delay(waitForDebounceMs);\n  return result;\n};\n\nexport function delay(timeout: number) {\n  return new Promise((resolve: (value: unknown) => void) => {\n    if (!timeout) return resolve(undefined);\n    setTimeout(resolve, timeout);\n  });\n}\n\nexport const waitForElementVisible = (getterFunc: () => HTMLElement) => {\n  return new Promise(resolve => {\n    let element: HTMLElement;\n    waitFor(async () => {\n      element = await getterFunc();\n      expect(element).toBeVisible();\n    }).then(() => {\n      resolve(element);\n    });\n  });\n};\n\nexport const typeMultipleTimes = async (text: string, count: number, options = { delay: 70 }) => {\n  text = text.repeat(count);\n  await userEvent.keyboard(text, options);\n};\n\nexport async function drag(\n  element: HTMLElement,\n  {\n    delta = undefined,\n    toCoords = undefined,\n    toElm = undefined,\n    steps = 20,\n    duration = 100\n  }: { delta: Coordinates; toCoords: Coordinates; toElm: HTMLElement; steps: number; duration: number }\n) {\n  const from = getElementClientCenter(element);\n  const to = getCoords({ toElm, toCoords, delta, from });\n  const step = {\n    x: (to.x - from.x) / steps,\n    y: (to.y - from.y) / steps\n  };\n  const current = {\n    clientX: from.x,\n    clientY: from.y\n  };\n  userEvent.hover(element);\n  fireEvent.pointerEnter(element, current);\n  fireEvent.pointerOver(element, current);\n  fireEvent.pointerMove(element, current);\n  fireEvent.pointerDown(element, current);\n  for (let i = 0; i < steps; i++) {\n    current.clientX += step.x;\n    current.clientY += step.y;\n    await delay(duration / steps);\n    fireEvent.pointerMove(element, current);\n  }\n  fireEvent.pointerUp(element, current);\n}\n"
  },
  {
    "path": "packages/core/src/tests/test-ids-utils.ts",
    "content": "import { ComponentDefaultTestId as TestIds } from \"./constants\";\nexport const ComponentDefaultTestId = TestIds;\nexport const getTestId = (elementType: TestIds, id?: string | number) => {\n  const formattedId = (id ?? \"\").toString();\n  return `${elementType}${formattedId && `_${formattedId}`}`;\n};\n"
  },
  {
    "path": "packages/core/src/types/ArrayLastElement.ts",
    "content": "export type ArrayLastElement<T extends unknown[]> = T extends [...unknown[], infer R] ? R : never;\n"
  },
  {
    "path": "packages/core/src/types/Colors.ts",
    "content": "import { contentColors } from \"../utils/colors-vars-map\";\n\nconst MapStateSelectedColor = {\n  positive: \"--positive-color-selected\",\n  negative: \"--negative-color-selected\",\n  primary: \"--primary-selected-color\",\n  warning: \"--warning-color-selected\",\n  neutral: \"--ui-background-color\"\n};\n\nconst MapStateSelectedHoverColor = {\n  positive: \"--positive-color-selected-hover\",\n  negative: \"--negative-color-selected-hover\",\n  primary: \"--primary-selected-hover-color\",\n  warning: \"--warning-color-selected-hover\",\n  neutral: \"--ui-background-hover-color\"\n};\n\ntype ContentColor = (typeof contentColors)[number];\ntype StateSelectedColorKeys = keyof typeof MapStateSelectedColor;\ntype StateSelectedHoverColorKeys = keyof typeof MapStateSelectedHoverColor;\n\nexport type ElementAllowedColor = ContentColor | \"positive\" | \"negative\" | \"primary\" | \"warning\" | \"neutral\";\n\nexport function getElementColor(\n  colorValue: ContentColor | StateSelectedColorKeys | StateSelectedHoverColorKeys,\n  isSelectedPalette = false,\n  isSelectedHoverPalette = false\n): string {\n  if (contentColors.includes(colorValue as ContentColor)) {\n    return `var(--color-${colorValue}${isSelectedPalette ? \"-selected\" : \"\"})`;\n  }\n  if (\n    Object.keys(MapStateSelectedHoverColor).includes(colorValue as StateSelectedHoverColorKeys) &&\n    isSelectedHoverPalette\n  ) {\n    return `var(${MapStateSelectedHoverColor[colorValue as StateSelectedHoverColorKeys]})`;\n  }\n  if (Object.keys(MapStateSelectedColor).includes(colorValue as StateSelectedColorKeys) && isSelectedPalette) {\n    return `var(${MapStateSelectedColor[colorValue as StateSelectedColorKeys]})`;\n  }\n  return colorValue;\n}\n\nexport type ColorStyle = \"regular\" | \"hover\" | \"selected\";\n"
  },
  {
    "path": "packages/core/src/types/ElementContent.ts",
    "content": "import { type ReactNode } from \"react\";\n\nexport type ElementContent = ReactNode | ReactNode[];\n"
  },
  {
    "path": "packages/core/src/types/FormElement.ts",
    "content": "/**\n * Props for form fields, including label, info text, and ID requirements for accessibility.\n * Using this type for a component's props will enforce that if a `label` or `infoText` is provided, an `id` must also be provided.\n * This is important for accessibility, to link the input with its label and description.\n * If there's a need, you can extend this type to add more shapes or conditions inside your form component types file.\n */\nexport type FormElementProps =\n  | {\n      /**\n       * The label for the input.\n       */\n      label: string;\n      /**\n       * The id of the input.\n       * Required when `label` or `infoText` is provided for accessibility reasons.\n       */\n      id: string;\n      /**\n       * Informational text to display below the input.\n       */\n      infoText?: string;\n    }\n  | {\n      label?: never;\n      /**\n       * Informational text to display below the input.\n       * If provided, an `id` is also required for accessibility.\n       */\n      infoText: string;\n      /**\n       * The id of the input.\n       * Required when `infoText` or `label` is provided for accessibility reasons.\n       */\n      id: string;\n    }\n  | {\n      label?: never;\n      infoText?: never;\n      /**\n       * The id of the input.\n       */\n      id?: string;\n    };\n"
  },
  {
    "path": "packages/core/src/types/MoveBy.ts",
    "content": "export type MoveBy = {\n  main?: number;\n  secondary?: number;\n};\n"
  },
  {
    "path": "packages/core/src/types/SplitString.ts",
    "content": "export type SplitString<S extends string, D extends string> = string extends S\n  ? string[]\n  : S extends \"\"\n  ? []\n  : S extends `${infer T}${D}${infer U}`\n  ? [T, ...SplitString<U, D>]\n  : [S];\n"
  },
  {
    "path": "packages/core/src/types/VibeComponentProps.ts",
    "content": "export default interface VibeComponentProps {\n  /**\n   * A CSS class name to apply to the component.\n   */\n  className?: string;\n  /**\n   * A unique identifier for testing purposes.\n   */\n  \"data-testid\"?: string;\n  /**\n   * An HTML id attribute for the component.\n   */\n  id?: string;\n}\n"
  },
  {
    "path": "packages/core/src/types/events.ts",
    "content": "import type React from \"react\";\n\nexport type OnPressEventType<Element> = React.MouseEvent<Element> | React.FocusEvent<Element>;\nexport type GeneralEventType = Event | React.UIEvent;\nexport type GenericEventCallback = (ev: GeneralEventType) => unknown;\nexport type KeyboardEventCallback = (event: KeyboardEvent) => unknown;\n\n// Custom type for all mouse event callbacks\nexport type MouseEventCallBack = (event: React.MouseEvent<HTMLElement | SVGElement>) => void;\n"
  },
  {
    "path": "packages/core/src/types/index.ts",
    "content": "export * from \"./events\";\nexport type { default as VibeComponentProps } from \"./VibeComponentProps\";\nexport * from \"./ArrayLastElement\";\nexport * from \"./SplitString\";\nexport * from \"./ElementContent\";\nexport * from \"./Colors\";\n"
  },
  {
    "path": "packages/core/src/utils/colors-utils.ts",
    "content": "import { ColorStyle as ColorStyleEnum, contentColors } from \"./colors-vars-map\";\nimport { type ColorStyle } from \"../types/Colors\";\n\nconst ColorUtils = {\n  modes: ColorStyleEnum,\n  contentColors,\n  getMondayColorAsStyle: (color: string, mode: ColorStyle = \"regular\", withVar = true) => {\n    return `${withVar ? \"var(\" : \"\"}--color-${color}${mode !== \"regular\" ? `-${mode}` : \"\"}${withVar ? \")\" : \"\"}`;\n  }\n};\n\nexport default Object.freeze(ColorUtils);\n"
  },
  {
    "path": "packages/core/src/utils/colors-vars-map.ts",
    "content": "export const colorsMap = [\n  { color: \"--primary-color\", description: \"Use to emphasise main ui components\" },\n  {\n    color: \"--primary-on-secondary-color\",\n    description: \"Use to emphasise main ui components on secondary background color\"\n  },\n  { color: \"--primary-hover-color\", description: \"Use only as a hover on primary color\" },\n  {\n    color: \"--primary-hover-on-secondary-color\",\n    description: \"Use only as a hover on primary color on secondary background color\"\n  },\n  { color: \"--primary-selected-color\", description: \"Use to indicate selected state of primary items\" },\n  {\n    color: \"--primary-selected-hover-color\",\n    description: \"Use to indicate hover state on a primary-selected-color items\"\n  },\n  {\n    color: \"--primary-highlighted-color\",\n    description: \"Use this to indicate highlighted components of primary items\"\n  },\n  {\n    color: \"--primary-surface-color\",\n    description: \"Use this as the surface of the main layout appearance\"\n  },\n  {\n    color: \"--primary-selected-on-secondary-color\",\n    description: \"Use to indicate selected state of primary items on secondary background color\"\n  },\n  { color: \"--primary-text-color\", description: \"Use for default text color\" },\n  {\n    color: \"--primary-text-on-secondary-color\",\n    description: \"Use for default text color on secondary background color\"\n  },\n  { color: \"--secondary-text-color\", description: \"Use when you need text with lesser importance\" },\n  {\n    color: \"--secondary-text-on-secondary-color\",\n    description: \"Use when you need text with lesser importance (on secondary background color)\"\n  },\n  { color: \"--primary-background-hover-color\", description: \"Use as hover color\" },\n  { color: \"--primary-background-hover-on-secondary-color\", description: \"Use as hover color on secondary color\" },\n  {\n    color: \"--inverted-color-background\",\n    description: \"Inverted background color (opposite of primary background color)\"\n  },\n  { color: \"--text-color-on-inverted\", description: \"Inverted text color (opposite of primary text color)\" },\n  { color: \"--text-color-on-primary\", description: \"Use for text on primary color\" },\n  { color: \"--fixed-light-color\", description: \"Use as color that should remain light in all themes\" },\n  { color: \"--fixed-dark-color\", description: \"Use as color that should remain dark in all themes\" },\n  // states\n  {\n    color: \"--positive-color\",\n    description: \"Use to indicate a positive action/state (success, completion, approval...)\"\n  },\n  { color: \"--positive-color-hover\", description: \"Use only as hover color on positive color\" },\n  { color: \"--positive-color-selected\", description: \"Use only as selected indication for a positive colors\" },\n  {\n    color: \"--positive-color-selected-hover\",\n    description: \"Use to indicate hover state on a positive-color-selected items\"\n  },\n  {\n    color: \"--negative-color\",\n    description: \"Use to indicate a negative action/state (delete, error...)\"\n  },\n  { color: \"--negative-color-hover\", description: \"Use only as hover color on negative color\" },\n  { color: \"--negative-color-selected\", description: \"Use as selected indication for negative colors\" },\n  {\n    color: \"--negative-color-selected-hover\",\n    description: \"Use to indicate hover state on a negative-selected items\"\n  },\n  {\n    color: \"--warning-color\",\n    description: \"Use to indicate a warning action/state (severity, alert, caution...)\"\n  },\n  { color: \"--warning-color-hover\", description: \"Use only as hover color on warning color\" },\n  { color: \"--warning-color-selected\", description: \"Use as selected indication for warning colors\" },\n  {\n    color: \"--warning-color-selected-hover\",\n    description: \"Use to indicate hover state on a warning-selected items\"\n  },\n  // borders\n  { color: \"--ui-border-color\", description: \"Border color for ui elements and components (Button, Input...)\" },\n  { color: \"--ui-border-on-secondary-color\", description: \"Border color for ui elements on secondary color\" },\n  {\n    color: \"--layout-border-color\",\n    description: \"Border color for general layout and separators (Leftpane, Menu Divider...)\"\n  },\n  {\n    color: \"--layout-border-on-secondary-color\",\n    description: \"Border color for general layout on secondary background color\"\n  },\n  { color: \"--placeholder-color\", description: \"Use for placeholder text in inputs fields\" },\n  {\n    color: \"--placeholder-on-secondary-color\",\n    description: \"Use for placeholder text in inputs fields on secondary background color\"\n  },\n  { color: \"--icon-color\", description: \"Default color for icons\" },\n  { color: \"--icon-on-secondary-color\", description: \"Default color for icons on secondary background color\" },\n  // disabled\n  {\n    color: \"--disabled-background-color\",\n    description: \"Use as background for disabled elements (ui hovers or elements)\"\n  },\n  { color: \"--disabled-text-color\", description: \"Use as text in disabled components\" },\n  {\n    color: \"--disabled-background-on-secondary-color\",\n    description: \"Use as background for disabled elements on secondary background\"\n  },\n  {\n    color: \"--disabled-text-on-secondary-color\",\n    description: \"Use as text in disabled components on secondary background color\"\n  },\n  // Link\n  { color: \"--link-color\", description: \"Use only for links\" },\n  { color: \"--link-on-secondary-color\", description: \"Use only for links on secondary colors\" },\n  // Backgrounds\n  { color: \"--primary-background-color\", description: \"Primary background color\" },\n  { color: \"--secondary-background-color\", description: \"Secondary background color\" },\n  { color: \"--grey-background-color\", description: \"Grey background color\" },\n  { color: \"--allgrey-background-color\", description: \"Grey background color, stays grey in dark and black themes\" },\n  { color: \"--ui-background-color\", description: \"Background color for UI elements and components\" }\n];\n\nexport const colorsHashMap = colorsMap.reduce((map, current) => {\n  const newColorName = current.color.substring(2);\n  map.set(newColorName, current.description);\n  return map;\n}, new Map());\n\nexport const contentColors = [\n  \"grass_green\",\n  \"done-green\",\n  \"bright-green\",\n  \"saladish\",\n  \"egg_yolk\",\n  \"working_orange\",\n  \"dark-orange\",\n  \"peach\",\n  \"sunset\",\n  \"stuck-red\",\n  \"dark-red\",\n  \"sofia_pink\",\n  \"lipstick\",\n  \"bubble\",\n  \"purple\",\n  \"dark_purple\",\n  \"berry\",\n  \"dark_indigo\",\n  \"indigo\",\n  \"navy\",\n  \"bright-blue\",\n  \"dark-blue\",\n  \"aquamarine\",\n  \"chili-blue\",\n  \"river\",\n  \"winter\",\n  \"explosive\",\n  \"american_gray\",\n  \"blackish\",\n  \"brown\",\n  \"orchid\",\n  \"tan\",\n  \"sky\",\n  \"coffee\",\n  \"royal\",\n  \"teal\",\n  \"lavender\",\n  \"steel\",\n  \"lilac\",\n  \"pecan\"\n] as const;\n\nexport type CONTENT_COLORS_VALUES = (typeof contentColors)[number];\n\n/**\n * @deprecated\n */\nexport enum ColorStyle {\n  REGULAR = \"regular\",\n  HOVER = \"hover\",\n  SELECTED = \"selected\"\n}\n\nexport enum ContentColorByName {\n  GRASS_GREEN = \"grass_green\",\n  DONE_GREEN = \"done-green\",\n  BRIGHT_GREEN = \"bright-green\",\n  SALADISH = \"saladish\",\n  EGG_YOLK = \"egg_yolk\",\n  WORKING_ORANGE = \"working_orange\",\n  DARK_ORANGE = \"dark-orange\",\n  PEACH = \"peach\",\n  SUNSET = \"sunset\",\n  STUCK_RED = \"stuck-red\",\n  DARK_RED = \"dark-red\",\n  SOFIA_PINK = \"sofia_pink\",\n  LIPSTICK = \"lipstick\",\n  BUBBLE = \"bubble\",\n  PURPLE = \"purple\",\n  DARK_PURPLE = \"dark_purple\",\n  BERRY = \"berry\",\n  DARK_INDIGO = \"dark_indigo\",\n  INDIGO = \"indigo\",\n  NAVY = \"navy\",\n  BRIGHT_BLUE = \"bright-blue\",\n  DARK_BLUE = \"dark-blue\",\n  AQUAMARINE = \"aquamarine\",\n  CHILI_BLUE = \"chili-blue\",\n  RIVER = \"river\",\n  WINTER = \"winter\",\n  EXPLOSIVE = \"explosive\",\n  AMERICAN_GRAY = \"american_gray\",\n  BLACKISH = \"blackish\",\n  BROWN = \"brown\",\n  ORCHID = \"orchid\",\n  TAN = \"tan\",\n  SKY = \"sky\",\n  COFFEE = \"coffee\",\n  ROYAL = \"royal\",\n  TEAL = \"teal\",\n  LAVENDER = \"lavender\",\n  STEEL = \"steel\",\n  LILAC = \"lilac\",\n  PECAN = \"pecan\"\n}\n\n/**\n * @deprecated\n */\nexport enum StateSelectedColor {\n  POSITIVE = \"positive\",\n  NEGATIVE = \"negative\",\n  PRIMARY = \"primary\",\n  WARNING = \"warning\",\n  NEUTRAL = \"neutral\"\n}\n\n/**\n * @deprecated\n */\nexport enum StateSelectedHoverColor {\n  POSITIVE = \"positive\",\n  NEGATIVE = \"negative\",\n  PRIMARY = \"primary\",\n  NEUTRAL = \"neutral\"\n}\n\n/**\n * @deprecated\n */\nexport const ElementAllowedColor = {\n  ...ContentColorByName,\n  ...StateSelectedColor,\n  ...StateSelectedHoverColor\n};\n\n/**\n * @deprecated\n */\nexport type ElementColor = (typeof ElementAllowedColor)[keyof typeof ElementAllowedColor] | string;\n\nexport const elementColorsNames = Object.values(ElementAllowedColor).reduce((acc: Record<string, string>, key) => {\n  acc[key] = key;\n  return acc;\n}, {});\n\nconst getColorKeyByValue = (colorValue: string, colors: Record<string, string>) => {\n  return Object.keys(colors)[Object.values(colors).indexOf(colorValue)];\n};\n\nexport function getElementColor(\n  colorValue: keyof typeof ElementAllowedColor | string,\n  isSelectedPalette = false,\n  isSelectedHoverPalette = false\n): string {\n  const colorKey = getColorKeyByValue(colorValue, ElementAllowedColor);\n  if (!colorKey) {\n    return colorValue;\n  }\n\n  if (ContentColorByName[colorKey as keyof typeof ContentColorByName]) {\n    return `var(--color-${ContentColorByName[colorKey as keyof typeof ContentColorByName]}${\n      isSelectedPalette ? \"-selected\" : \"\"\n    })`;\n  }\n  if (StateSelectedHoverColor[colorKey as keyof typeof StateSelectedHoverColor] && isSelectedHoverPalette) {\n    return `var(${StateSelectedHoverColor[colorKey as keyof typeof StateSelectedHoverColor]})`;\n  }\n  if (StateSelectedColor[colorKey as keyof typeof StateSelectedColor] && isSelectedPalette) {\n    return `var(${StateSelectedColor[colorKey as keyof typeof StateSelectedColor]})`;\n  }\n}\n"
  },
  {
    "path": "packages/core/tsconfig.base.json",
    "content": "{\n  \"compilerOptions\": {\n    \"lib\": [\"esnext\", \"dom\"],\n    \"target\": \"es6\",\n    \"moduleResolution\": \"node\",\n    \"esModuleInterop\": true,\n    \"jsx\": \"react\",\n    \"skipLibCheck\": true,\n    \"noImplicitAny\": true,\n    \"baseUrl\": \".\"\n  }\n}\n"
  },
  {
    "path": "packages/core/tsconfig.json",
    "content": "{\n  \"extends\": \"./tsconfig.base.json\",\n  \"compilerOptions\": {\n    \"module\": \"ESNext\",\n    \"declaration\": true,\n    \"sourceMap\": true,\n    \"rootDir\": \"src\",\n    \"allowSyntheticDefaultImports\": true,\n    \"plugins\": [{ \"name\": \"typescript-plugin-css-modules\" }]\n  },\n  \"include\": [\"src/**/*\", \"types/**/*\", \"scripts/**/*.ts\"]\n}\n"
  },
  {
    "path": "packages/core/types/files.d.ts",
    "content": "// SCSS\ndeclare module \"*.module.scss\" {\n  const classes: { [key: string]: string };\n  export default classes;\n}\n\n// SVG\ndeclare module \"*.svg\" {\n  const content: string;\n  export default content;\n}\n\ndeclare module \"*.png\";\ndeclare module \"*.mp4\";\ndeclare module \"*.pdf\";\n"
  },
  {
    "path": "packages/core/types/packages.d.ts",
    "content": "// Packages\ndeclare module \"react-windowed-select\";\n"
  },
  {
    "path": "packages/core/types/tokens.d.ts",
    "content": "declare module \"@vibe/core/tokens\";\n"
  },
  {
    "path": "packages/core/types/window.d.ts",
    "content": "type DocumentMode = 5 | 7 | 8 | 9 | 10 | 11;\n\nexport declare global {\n  interface Window {\n    MSInputMethodContext: unknown;\n  }\n\n  interface Document {\n    documentMode: DocumentMode;\n  }\n}\n"
  },
  {
    "path": "packages/core/vite.config.ts",
    "content": "import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({\n  plugins: [react()]\n});\n"
  },
  {
    "path": "packages/core/vitest.config.ts",
    "content": "/// <reference types=\"vitest\" />\nimport { defineConfig } from \"vitest/config\";\nimport react from \"@vitejs/plugin-react\";\nimport path from \"path\";\nimport fs from \"fs\";\n\nconst componentsFolder = path.resolve(process.cwd(), \"../components\");\n\nconst components = fs.readdirSync(componentsFolder).reduce((acc, component) => {\n  const componentFolderPath = path.resolve(componentsFolder, component);\n  if (fs.statSync(componentFolderPath).isDirectory()) {\n    acc[`@vibe/${component}`] = path.join(componentFolderPath, \"src/index.ts\");\n  }\n\n  return acc;\n}, {});\n\n// Add @vibe/base package alias\nconst baseFolder = path.resolve(process.cwd(), \"../base\");\nconst baseSrcPath = path.join(baseFolder, \"src\");\n\nif (fs.existsSync(baseSrcPath)) {\n  components[\"@vibe/base\"] = path.join(baseFolder, \"src/index.ts\");\n}\n\nexport default defineConfig({\n  plugins: [\n    react({\n      jsxRuntime: \"classic\"\n    })\n  ],\n  define: {\n    \"process.env.NODE_ENV\": '\"test\"'\n  },\n  resolve: {\n    alias: {\n      \"~@vibe/style\": path.resolve(process.cwd(), \"../../node_modules/@vibe/style\"),\n      \"~\": path.resolve(process.cwd(), \"../../node_modules\"),\n      ...components\n    }\n  },\n  test: {\n    globals: true,\n    environment: \"jsdom\",\n    setupFiles: [\"./vitest.setup.ts\"],\n    include: [\"**/__tests__/**/*.test.[jt]s?(x)\"],\n    css: {\n      modules: {\n        classNameStrategy: \"non-scoped\"\n      }\n    },\n    coverage: {\n      provider: \"v8\",\n      reporter: [\"text\", \"json\", \"html\"],\n      exclude: [\n        \"node_modules/\",\n        \"**/__tests__/**\",\n        \"**/*.test.*\",\n        \"**/*.spec.*\",\n        \"**/dist/**\",\n        \"**/*.config.*\",\n        \"**/*.setup.*\"\n      ]\n    }\n  }\n});\n"
  },
  {
    "path": "packages/core/vitest.setup.ts",
    "content": "import { vi } from \"vitest\";\nimport \"@testing-library/jest-dom\";\nimport { toHaveNoViolations } from \"jest-axe\";\nimport ReactDOM from \"react-dom\";\nimport React from \"react\";\n\nexpect.extend(toHaveNoViolations);\n\n// Mock ResizeObserver\nclass ResizeObserver {\n  observe() {}\n  unobserve() {}\n  disconnect() {}\n}\n(global as any).ResizeObserver = ResizeObserver;\n\n// Mock react-inlinesvg\nvi.mock(\"react-inlinesvg\", () => ({\n  default: ({ src, ...props }: any) =>\n    React.createElement(\"div\", {\n      \"data-testid\": \"mock-svg\",\n      \"data-src\": src,\n      ...props\n    })\n}));\n"
  },
  {
    "path": "packages/docs/.storybook/art.ts",
    "content": "export const vibeAsciiLogo = `\n @@@@@        @@@@@  @@@@   @@@@@                 Vibe design system.\n  @@@@@      @@@@@  @@@@@@  @@@@@                                    \n   @@@@      @@@@     @@    @@@@@                                    \n   @@@@@    @@@@@           @@@@@                                    \n    @@@@    @@@@     @@@@   @@@@@ @@@@@@@        @@@@@@@@            \n    @@@@@  @@@@@     @@@@   @@@@@@@@@@@@@@@    @@@@@@@@@@@@          \n     @@@@  @@@@      @@@@   @@@@@@    @@@@@@  @@@@@     @@@@         \n     @@@@@@@@@@      @@@@   @@@@@      @@@@@  @@@@@@@@@@@@@@@        \n      @@@@@@@@       @@@@   @@@@@       @@@@  @@@@@@@@@@@@@@@        \n      @@@@@@@@       @@@@   @@@@@@     @@@@@  @@@@              @@@  \n       @@@@@@        @@@@   @@@@@@@@@@@@@@@    @@@@@@@@@@@@    @@@@@ \n        @@@@         @@@@   @@@@@@@@@@@@@        @@@@@@@@@      @@@   \n`;\n\nexport function paintToConsole() {\n  if (process.env.NODE_ENV === \"production\") {\n    setTimeout(() => {\n      console.log(vibeAsciiLogo);\n    }, 3000);\n  }\n}\n"
  },
  {
    "path": "packages/docs/.storybook/main.ts",
    "content": "import path from \"path\";\nimport type { StorybookConfig } from \"@storybook/react-vite\";\nimport remarkGfm from \"remark-gfm\";\nimport fs from \"fs\";\n\nconst componentsFolder = path.resolve(__dirname, \"../../components\");\nconst components = fs.readdirSync(componentsFolder).reduce((acc: Record<string, string>, component) => {\n  const componentFolderPath = path.resolve(componentsFolder, component);\n  if (fs.statSync(componentFolderPath).isDirectory()) {\n    acc[`@vibe/${component}`] = path.join(componentFolderPath, \"src/index.ts\");\n  }\n  return acc;\n}, {});\n\nconst getAddons = () => {\n  const addons = [\n    \"@storybook/addon-links\",\n    \"@storybook/addon-a11y\",\n    {\n      name: \"@storybook/addon-essentials\",\n      options: {\n        backgrounds: false\n      }\n    },\n    \"@storybook/addon-themes\",\n    \"@storybook/preset-scss\",\n    \"storybook-addon-playground\",\n    \"@chromatic-com/storybook\",\n    \"@storybook/addon-storysource\",\n    {\n      name: \"@storybook/addon-docs\",\n      options: {\n        mdxPluginOptions: {\n          mdxCompileOptions: {\n            remarkPlugins: [remarkGfm]\n          }\n        }\n      }\n    }\n  ];\n\n  if (process.env.NODE_ENV !== \"production\") {\n    addons.push(\"@storybook/addon-interactions\");\n  }\n\n  return addons;\n};\n\nexport default {\n  stories: [\n    \"../src/**/*.mdx\",\n    \"../src/**/*.stories.@(js|jsx|ts|tsx)\",\n    \"../../core/**/*.mdx\",\n    \"../../core/**/*.stories.@(js|jsx|ts|tsx)\",\n    \"../../storybook-blocks/**/*.mdx\",\n    \"../../storybook-blocks/**/*.stories.@(js|jsx|ts|tsx)\"\n  ],\n  addons: getAddons(),\n  framework: {\n    name: \"@storybook/react-vite\",\n    options: {}\n  },\n  core: {\n    builder: \"@storybook/builder-vite\"\n  },\n  typescript: {\n    check: true,\n    reactDocgen: \"react-docgen-typescript\",\n    reactDocgenTypescriptOptions: {\n      tsconfigPath: path.resolve(__dirname, \"../tsconfig.storybook.json\")\n    }\n  },\n  staticDirs: [\"./static\"],\n  async viteFinal(config, { configType }) {\n    const { mergeConfig } = await import(\"vite\");\n\n    return mergeConfig(config, {\n      resolve: {\n        alias: {\n          \"@vibe/style/dist/index.min.css\": path.resolve(__dirname, \"../../style/src/index.scss\"),\n          \"@vibe/style/dist\": path.resolve(__dirname, \"../../style/src\"),\n          // mixins workaround for vite:\n          \"~@vibe/style/dist/mixins\": path.resolve(__dirname, \"../../style/src/mixins\"),\n          \"~@vibe/style/dist/functions\": path.resolve(__dirname, \"../../style/src/functions\"),\n          \"~@vibe/style\": path.resolve(__dirname, \"../../style\"),\n          \"~vibe-storybook-components\": path.resolve(__dirname, \"../../storybook-blocks/src\"),\n          \"@vibe/shared\": path.resolve(__dirname, \"../../shared/src\"),\n          \"@vibe/hooks\": path.resolve(__dirname, \"../../hooks/src/index.ts\"),\n          \"@vibe/icons/meta\": path.resolve(__dirname, \"../../icons/src/iconsMetaData.ts\"),\n          \"@vibe/icons\": path.resolve(__dirname, \"../../icons/src/react/index.ts\"),\n          \"@vibe/core/interactionsTests\": path.resolve(__dirname, \"../../core/src/tests/interactions-utils.ts\"),\n          \"@vibe/core/next\": path.resolve(__dirname, \"../../core/src/components/next.ts\"),\n          \"@vibe/core\": path.resolve(__dirname, \"../../core/src/index.ts\"),\n          \"@vibe/base\": path.resolve(__dirname, \"../../base/src/index.ts\"),\n          ...components\n        }\n      },\n      define: {\n        \"process.env.NODE_ENV\": JSON.stringify(configType === \"DEVELOPMENT\" ? \"development\" : \"production\")\n      },\n      optimizeDeps: {\n        include: [\"storybook-addon-playground\"]\n      },\n      build: {\n        commonjsOptions: {\n          exclude: [\"storybook-addon-playground\"]\n        }\n      }\n    });\n  }\n} satisfies StorybookConfig;\n"
  },
  {
    "path": "packages/docs/.storybook/manager-head.html",
    "content": "<link href=\"https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500&display=swap\" rel=\"stylesheet\" />\n<meta property=\"og:description\" content=\"Vibe design system by monday.com\" />\n<meta property=\"og:title\" content=\"Vibe Design System\" />\n<meta property=\"og:image\" content=\"https://irp.cdn-website.com/33477119/dms3rep/multi/og-banner.jpeg\" />\n<title>Vibe Design System</title>\n<script src=\"https://use.fontawesome.com/660238b999.js\"></script>\n<script type=\"module\">\n  const faviconLink = document.querySelector(\"link[rel='icon']\");\n  if (import.meta.url.includes(\"localhost\")) {\n    faviconLink.href = \"/favicon-dev.ico\";\n  }\n</script>\n<style>\n  body {\n    font-family: \"Figtree\", sans-serif;\n    background: none !important;\n    font-size: 14px;\n  }\n\n  /* Remove sidebar background */\n  body > div > div > div,\n  .container.sidebar-container {\n    background: none !important;\n  }\n\n  /* Sidebar alignment */\n  #storybook-explorer-menu .sidebar-item {\n    margin-left: -6px;\n  }\n\n  /* Sections style */\n  #storybook-explorer-menu .sidebar-item:not([data-parent-id]),\n  #storybook-explorer-menu .sidebar-item:not([data-parent-id]) a,\n  #storybook-explorer-menu .sidebar-item:not([data-parent-id]) button {\n    font-family: \"Figtree\", sans-serif;\n    font-size: 16px;\n    line-height: 16px;\n    font-weight: 500;\n  }\n\n  /* Sidebar sections spacing */\n  #storybook-explorer-tree > div > div {\n    margin-top: 32px;\n  }\n\n  .sidebar-header + label + div {\n    margin-left: 16px;\n  }\n\n  .sidebar-container .search-field {\n    border-radius: 20px;\n  }\n\n  /* Sidebar spacings */\n  #storybook-explorer-menu [data-item-id=\"foundations\"] {\n    margin-top: 24px;\n  }\n\n  /* Items style */\n  #storybook-explorer-menu a,\n  #storybook-explorer-menu button {\n    font-family: \"Figtree\", sans-serif;\n    font-size: 14px;\n    line-height: 16px;\n    font-weight: 500;\n    color: var(--sb-secondary-text-color);\n  }\n  #storybook-explorer-menu [data-item-id]:focus {\n    background: none;\n  }\n  #storybook-explorer-menu [data-item-id]:hover {\n    background-color: var(--sb-primary-background-hover-color);\n  }\n\n  /* Items spacings */\n  #storybook-explorer-menu a,\n  #storybook-explorer-menu button {\n    padding-top: 6px;\n    padding-bottom: 6px;\n    align-items: center;\n  }\n\n  /* Chevron alignment */\n  #storybook-explorer-menu .sidebar-item button[aria-expanded] > div {\n    margin-top: 0;\n  }\n\n  /* Icons color */\n  #storybook-explorer-menu svg {\n    color: var(--sb-secondary-text-color);\n  }\n\n  /* Items hover style */\n  #storybook-explorer-menu [data-item-id] {\n    border-radius: 8px;\n  }\n\n  /* Selected items style */\n  #storybook-explorer-menu [data-selected=\"true\"],\n  #storybook-explorer-menu [data-selected=\"true\"]:hover {\n    background: none;\n  }\n  #storybook-explorer-menu [data-selected=\"true\"] a,\n  #storybook-explorer-menu [data-selected=\"true\"] a svg {\n    color: #000000;\n  }\n\n  /* Removes sidebar icons */\n  #storybook-explorer-menu .sidebar-item[data-parent-id] > button > div > svg[type],\n  #storybook-explorer-menu .sidebar-item[data-parent-id=\"foundations\"] > a > div > svg,\n  #storybook-explorer-menu\n    .sidebar-item:not([data-parent-id])\n    :not([data-nodetype=\"story\"], [data-nodetype=\"document\"])\n    svg[type] {\n    display: none;\n  }\n\n  #storybook-explorer-menu .sidebar-item [aria-expanded] {\n    margin-left: 6px;\n  }\n\n  /* Fixes items spacings */\n  #storybook-explorer-menu button[data-item-id] {\n    width: calc(100% - 16px);\n  }\n\n  /* Adds a margin between the sidebar sections */\n  [data-parent-id]:has(+ :not([data-parent-id])) {\n    margin-bottom: 16px !important;\n  }\n\n  .sidebar-container .sidebar-header {\n    margin-top: 2px !important;\n    margin-left: 12px !important;\n  }\n  #storybook-explorer-searchfield::placeholder {\n    color: #32333861;\n  }\n\n  /* Left sidebar border */\n  div[role=\"main\"] > div {\n    box-shadow: none !important;\n    border-left: 1px solid var(--sb-layout-border-color);\n    border-radius: 0;\n  }\n\n  /* Top border */\n  div[role=\"main\"] > div > div > div > div {\n    border-bottom: 1px solid var(--sb-layout-border-color);\n    box-shadow: none !important;\n  }\n</style>\n\n<script>\n  //workaround to increase the left panel width just enough to show even the longer story names\n  //based on https://github.com/storybookjs/storybook/issues/9682#issuecomment-983356523\n  const DEFAULT_MINIMUM_LEFT_PANEL_WIDTH = 244; // original default is 230\n  let storybookConfig = JSON.parse(localStorage.getItem(\"storybook-layout\"));\n\n  // we only resize the left panel if it is set to a value lower than DEFAULT_MINIMUM_LEFT_PANEL_WIDTH\n  if (\n    typeof storybookConfig === \"object\" &&\n    storybookConfig !== null &&\n    storybookConfig.resizerNav.x < DEFAULT_MINIMUM_LEFT_PANEL_WIDTH\n  ) {\n    storybookConfig.resizerNav.x = DEFAULT_MINIMUM_LEFT_PANEL_WIDTH;\n    localStorage.setItem(\"storybook-layout\", JSON.stringify(storybookConfig));\n    document.location.reload();\n  } else if (storybookConfig === null) {\n    storybookConfig = { resizerNav: { x: DEFAULT_MINIMUM_LEFT_PANEL_WIDTH, y: 0 } };\n    localStorage.setItem(\"storybook-layout\", JSON.stringify(storybookConfig));\n    document.location.reload();\n  }\n</script>\n<script async src=\"https://www.googletagmanager.com/gtag/js?id=G-0CBP2ER8YL\"></script>\n<script>\n  window.dataLayer = window.dataLayer || [];\n  function gtag() {\n    dataLayer.push(arguments);\n  }\n  gtag(\"js\", new Date());\n\n  gtag(\"config\", \"G-0CBP2ER8YL\");\n</script>\n\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const waitForComponentsFolder = () => {\n      return new Promise(resolve => {\n        const observer = new MutationObserver((mutations, obs) => {\n          const componentsFolder = document.querySelector(\"button#components\");\n          if (componentsFolder) {\n            obs.disconnect();\n            resolve(componentsFolder);\n          }\n        });\n        observer.observe(document.body, { childList: true, subtree: true });\n      });\n    };\n\n    const initComponentsFolderLogic = componentsFolder => {\n      const isExpanded = componentsFolder.getAttribute(\"aria-expanded\") === \"true\";\n\n      if (isExpanded) {\n        addModalFolderObserver();\n      } else {\n        const folderObserver = new MutationObserver((mutations, obs) => {\n          for (const mutation of mutations) {\n            if (mutation.attributeName === \"aria-expanded\") {\n              if (componentsFolder.getAttribute(\"aria-expanded\") === \"true\") {\n                addModalFolderObserver();\n                obs.disconnect();\n                break;\n              }\n            }\n          }\n        });\n        folderObserver.observe(componentsFolder, { attributes: true });\n      }\n    };\n\n    const addModalFolderObserver = () => {\n      const modalFolder = document.querySelector(\"button#components-modal-new\");\n      if (!modalFolder) return;\n\n      const modalFolderObserver = new MutationObserver(mutations => {\n        for (const mutation of mutations) {\n          if (mutation.attributeName === \"aria-expanded\") {\n            const oldVal = mutation.oldValue || \"\";\n            const newVal = modalFolder.getAttribute(\"aria-expanded\") || \"\";\n\n            if (oldVal !== \"true\" && newVal === \"true\") {\n              const modalDocsPage = modalFolder.nextElementSibling.querySelector(\"a\");\n              modalDocsPage.click();\n            }\n          }\n        }\n      });\n\n      modalFolderObserver.observe(modalFolder, {\n        attributes: true,\n        attributeOldValue: true,\n        attributeFilter: [\"aria-expanded\"]\n      });\n    };\n\n    waitForComponentsFolder().then(componentsFolder => {\n      try {\n        initComponentsFolderLogic(componentsFolder);\n      } catch (e) {}\n    });\n  });\n</script>\n"
  },
  {
    "path": "packages/docs/.storybook/manager.jsx",
    "content": "import React from \"react\";\nimport { addons } from \"@storybook/manager-api\";\nimport { SidebarItem } from \"vibe-storybook-components\";\nimport \"vibe-storybook-components/index.css\";\nimport theme from \"./theme\";\nimport isChromatic from \"chromatic/isChromatic\";\n\nwindow.STORYBOOK_GA_ID = \"UA-308574295\";\nwindow.STORYBOOK_REACT_GA_OPTIONS = {};\n\naddons.setConfig({\n  theme: theme,\n  sidebar: {\n    renderLabel: ({ name, parameters = {} }) => {\n      const statusRegex = /\\[([^)]+)]/gi;\n      const [statusMatch, statusType] = statusRegex.exec(name) || [];\n\n      if (statusMatch) {\n        return <SidebarItem status={statusType.toLowerCase()}>{name.replace(statusMatch, \"\").trim()}</SidebarItem>;\n      }\n\n      const { status: storyStatus } = parameters;\n      if (!storyStatus) {\n        return name;\n      }\n\n      return <SidebarItem status={parameters.status}>{name.replace(storyStatus, \"\").trim()}</SidebarItem>;\n    },\n    filters: {\n      patterns: shouldShowStory\n    },\n    showRoots: false\n  }\n});\n\n/**\n * In order to hide stories you need to add `tags: ['internal']` to the stories file metadata.\n * In order to hide MDX, you need to add `Internal` to the title in the MDX's `Meta` declaration `title` or to the `title` in the stories file metadata.\n *\n * Notice that all stories are available in development mode and in Chromatic.\n */\nfunction shouldShowStory(item) {\n  const isDev = isChromatic() || process.env.NODE_ENV === \"development\";\n  const isPublic =\n    !item.tags?.includes?.(\"internal\") &&\n    !item.title?.startsWith?.(\"Internal\") &&\n    !item.title?.startsWith?.(\"Storybook Blocks\");\n  return isDev || isPublic;\n}\n"
  },
  {
    "path": "packages/docs/.storybook/modes.ts",
    "content": "export default {\n  \"1200px\": { \n    viewport: 1200 \n  },\n  Dark: {\n    theme: \"Dark\"\n  }\n};\n"
  },
  {
    "path": "packages/docs/.storybook/preview-body.html",
    "content": "<div id=\"dropdown-portal\"></div>\n"
  },
  {
    "path": "packages/docs/.storybook/preview-head.html",
    "content": "<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n<link href=\"https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500\" rel=\"stylesheet\" />\n<link\n  href=\"https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap\"\n  rel=\"stylesheet\"\n/>\n<link href=\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap\" rel=\"stylesheet\" />\n<link\n  href=\"https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\"\n  rel=\"stylesheet\"\n/>\n<link href=\"//fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@300;400;500;700&display=swap\" rel=\"stylesheet\" />\n<link href=\"https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700\" rel=\"stylesheet\" />\n<link href=\"https://fonts.cdnfonts.com/css/sofia-pro\" rel=\"stylesheet\" />\n<script src=\"https://use.fontawesome.com/660238b999.js\"></script>\n<style>\n  body {\n    font-family: \"Figtree\", sans-serif;\n    box-sizing: border-box;\n  }\n  body * {\n    box-sizing: border-box;\n  }\n  .light-app-theme {\n    background-color: var(--sb-primary-background-color);\n  }\n  .dark-app-theme {\n    background-color: var(--sb-primary-background-color);\n  }\n  .black-app-theme {\n    background-color: var(--sb-primary-background-color);\n  }\n  .sbdocs.sbdocs-wrapper,\n  .sbdocs.sbdocs-content {\n    background: var(--sb-primary-background-color);\n  }\n  .sbdocs.sbdocs-p {\n    color: var(--sb-primary-text-color);\n  }\n\n  .sbdocs .docs-story {\n    border: var(--sb-layout-border-color);\n  }\n  .sbdocs .docs-story > div:nth-child(2) {\n    /* prevent Show Code from rendering above full-screen components (such as Modal's overlay) */\n    z-index: unset;\n    background: unset;\n  }\n\n  .sbdocs {\n    color: var(--sb-primary-text-color);\n  }\n\n  .sbdocs p a,\n  .sbdocs ul li a {\n    color: var(--sb-link-color);\n  }\n\n  #docs-root .docblock-argstable {\n    border: 1px solid var(--sb-layout-border-color);\n  }\n\n  #docs-root .docblock-argstable tr th {\n    color: var(--sb-primary-text-color);\n  }\n\n  #docs-root .docblock-argstable tr td {\n    color: var(--sb-primary-text-color);\n    background: var(--sb-secondary-background-color);\n  }\n  #docs-root .docblock-code-toggle {\n    cursor: pointer;\n    background-color: var(--sb-secondary-background-color);\n    border: 1px solid var(--sb-layout-border-color);\n    color: var(--sb-primary-text-color);\n  }\n  #docs-root .docblock-code-toggle.docblock-code-toggle--expanded {\n    background-color: var(--sb-primary-selected-color);\n  }\n  #docs-root .docblock-code-toggle:hover {\n    background-color: var(--sb-primary-background-hover-color);\n  }\n\n  .os-content button:hover {\n    background-color: rgba(80, 52, 255, 0.1);\n    color: #5034ff;\n  }\n\n  .os-content button:hover svg {\n    color: #5034ff;\n  }\n  /* Adding styles for code tag to be exactly the same as storybook styles for `` tag in mdx */\n  body code {\n    font-family: ui-monospace, Menlo, Monaco, \"Roboto Mono\", \"Oxygen Mono\", \"Ubuntu Monospace\", \"Source Code Pro\",\n      \"Droid Sans Mono\", \"Courier New\", monospace;\n    -webkit-font-smoothing: antialiased;\n    display: inline-block;\n    vertical-align: baseline;\n    line-height: 1;\n    margin: 0 2px;\n    padding: 3px 5px;\n    white-space: nowrap;\n    border-radius: 3px;\n    font-size: 13px;\n    border: 1px solid #ecf4f9;\n    color: rgba(46, 52, 56, 0.9);\n    background-color: #f7fafc;\n  }\n\n  /* Remove shadow from code blocks */\n  .docblock-source {\n    box-shadow: none !important;\n  }\n\n  /* Remove shadow from args table */\n  .docblock-argstable-body {\n    filter: none !important;\n  }\n\n  .sbdocs.sbdocs-wrapper {\n    padding: 80px 0 64px 0;\n  }\n\n  .sbdocs.sbdocs-content {\n    max-width: 1200px;\n    min-width: 640px;\n    margin: 0 120px;\n  }\n\n  @media screen and (max-width: 1200px) {\n    .sbdocs.sbdocs-content {\n      max-width: 900px;\n      margin: 0 80px;\n    }\n  }\n\n  @media screen and (max-width: 1024px) {\n    .sbdocs.sbdocs-content {\n      max-width: 900px;\n      margin: 0 120px;\n    }\n  }\n</style>\n"
  },
  {
    "path": "packages/docs/.storybook/preview.tsx",
    "content": "import React from \"react\";\nimport { Preview } from \"@storybook/react\";\nimport isChromatic from \"chromatic/isChromatic\";\nimport { DocsContainer, DocsPage, Unstyled } from \"@storybook/blocks\";\nimport { withThemeByClassName } from \"@storybook/addon-themes\";\nimport {\n  AlphaWarning,\n  DeprecatedWarning,\n  ComponentName,\n  ComponentRules,\n  Frame,\n  FunctionArgument,\n  FunctionArguments,\n  Link,\n  Paragraph,\n  SectionName,\n  Tip,\n  Title,\n  UnstyledList,\n  UnstyledListItem,\n  UsageGuidelines,\n  withMemoryStats,\n  RelatedComponent,\n  StorybookLink\n} from \"vibe-storybook-components\";\n\nimport CanvasWrapper from \"../src/layout/canvas-wrapper/CanvasWrapper\";\nimport withGlobalStyle from \"../src/decorators/withGlobalStyle/withGlobalStyle\";\nimport { PropsTable } from \"../src/layout/props-table/props-table\";\nimport { RelatedComponentsDecorator } from \"../src/layout/related-components/related-components-decorator\";\nimport \"@vibe/style/dist/index.min.css\";\nimport \"vibe-storybook-components/dist/index.css\";\nimport { generateAutocompletion } from \"storybook-addon-playground\";\nimport {\n  playgroundVibeComponents,\n  playgroundReactCommonHooks,\n  introCode\n} from \"../src/pages/playground/playground-helpers\";\nimport reactDocgenOutput from \"../src/pages/playground/react-docgen-output.json\";\nimport withLiveEdit from \"../src/decorators/withLiveEdit/withLiveEdit\";\nimport withPerformanceProfiler from \"../src/decorators/withPerformanceProfiler/withPerformanceProfiler\";\nimport modes from \"./modes\";\nimport Footer from \"../src/layout/footer/Footer\";\nimport StorybookTableOfContents from \"../src/layout/toc/TableOfContents\";\nimport { paintToConsole } from \"./art\";\nimport FloatingObjects from \"../src/pages/welcome/hero/FloatingObjects\";\nimport Vibe4Banner from \"../src/pages/welcome/banner/Vibe4Banner\";\n\nconst fontLoader = async () => ({\n  fonts: await document.fonts.ready // Fixing Chromatic tests flakiness - taking snapshots after fonts are loaded\n});\n\nconst preview: Preview = {\n  parameters: {\n    chromatic: {\n      modes\n    },\n    controls: {\n      sort: \"alpha\",\n      expanded: true\n    },\n    docs: {\n      liveEdit: {\n        isEnabled: true\n      },\n      canvas: {\n        layout: \"fullscreen\"\n      },\n      container: ({ children, context }: { children: any; context: any }) => {\n        const isWelcomePage = typeof window !== \"undefined\" ? window.location.href.includes(\"id=welcome\") : false;\n\n        return (\n          <>\n            {isWelcomePage && <Vibe4Banner />}\n            {isWelcomePage && <FloatingObjects />}\n            <DocsContainer context={context}>\n              <Unstyled>{children}</Unstyled>\n            </DocsContainer>\n            <Footer />\n            <StorybookTableOfContents />\n          </>\n        );\n      },\n      page: DocsPage,\n      components: {\n        Canvas: CanvasWrapper,\n        Controls: PropsTable,\n        PropsTable,\n        h1: ComponentName,\n        ComponentName,\n        h2: SectionName,\n        h3: Title,\n        p: Paragraph,\n        AlphaWarning,\n        DeprecatedWarning,\n        SectionName,\n        Link,\n        ComponentRules,\n        UsageGuidelines,\n        FunctionArguments,\n        FunctionArgument,\n        RelatedComponent,\n        RelatedComponents: RelatedComponentsDecorator,\n        Frame,\n        StorybookLink,\n        Tip,\n        UnstyledList,\n        UnstyledListItem\n      }\n    },\n    options: {\n      storySort: {\n        method: \"alphabetical\",\n        order: [\n          \"Welcome\",\n          \"Getting Started\",\n          \"Catalog\",\n          \"MCP\",\n          \"Playground\",\n          \"Changelog\",\n          \"Migration Guide\",\n          \"Contributing\",\n          \"Foundations\",\n          \"Components\",\n          \"Layout\",\n          \"Text\",\n          \"Theming\",\n          \"Technical Patterns\",\n          \"Accessibility\",\n          \"Hooks\"\n        ]\n      }\n    },\n    playground: {\n      storyId: \"playground\",\n      components: {\n        ...playgroundVibeComponents,\n        ...playgroundReactCommonHooks\n      },\n      introCode,\n      autocompletions: generateAutocompletion(reactDocgenOutput)\n    }\n  },\n  decorators: [\n    withLiveEdit,\n    withGlobalStyle,\n    withMemoryStats,\n    withPerformanceProfiler,\n    // Should always be the last decorator (stories hooks issues otherwise) - bug in the addon\n    withThemeByClassName({\n      themes: {\n        Light: \"light-app-theme\",\n        Dark: \"dark-app-theme\",\n        Black: \"black-app-theme\"\n      },\n      defaultTheme: \"Light\"\n    })\n  ],\n  globalTypes: {\n    memoryStats: {\n      name: \"Memory Stats\",\n      description: \"Add Memory Stat tracker\",\n      defaultValue: \"no\",\n      toolbar: {\n        icon: \"memory\",\n        items: [\n          { value: \"no\", right: \"🚫\", title: \"Hide Memory Stat\" },\n          { value: \"yes\", right: \"✅\", title: \"Show Memory Stat\" }\n        ]\n      }\n    }\n  },\n\n  loaders: isChromatic() && document.fonts ? [fontLoader] : []\n};\n\npaintToConsole();\n\nexport default preview;\n"
  },
  {
    "path": "packages/docs/.storybook/storybook-title-fix.js",
    "content": "import { readFileSync, writeFileSync } from \"fs\";\nimport { join } from \"path\";\n\nfunction updateHtmlTitle(file, newTitle) {\n  const fileContents = readFileSync(file, \"utf8\");\n  const modifiedContents = fileContents.replace(/<title>.*<\\/title>/, `<title>${newTitle}</title>`);\n  writeFileSync(file, modifiedContents);\n}\n\nfunction updateStorybookHtmlTitles(storybookDir) {\n  try {\n    if (!storybookDir) {\n      throw new Error(\"Please provide the path to the storybook directory.\");\n    }\n    const newTitle = \"Vibe Design System\";\n    [\"index.html\", \"iframe.html\"].forEach(filePath => updateHtmlTitle(join(storybookDir, filePath), newTitle));\n  } catch (err) {\n    console.error(err);\n    process.exit(1);\n  }\n}\n\nupdateStorybookHtmlTitles(process.argv[2]);\n"
  },
  {
    "path": "packages/docs/.storybook/test-runner.cjs",
    "content": "const fs = require(\"fs\");\nconst path = require(\"path\");\n\nconst isPerformanceTest = process.env.PERFORMANCE_TEST === \"true\";\n\n// Metrics are written relative to repo root (from packages/docs)\nconst METRICS_DIR = path.join(process.cwd(), \"../../scripts/performance/reports\");\nconst TEMP_METRICS_FILE = path.join(METRICS_DIR, \".metrics-temp.jsonl\");\n\nfunction ensureDir() {\n  if (!fs.existsSync(METRICS_DIR)) {\n    fs.mkdirSync(METRICS_DIR, { recursive: true });\n  }\n}\n\nfunction appendMetric(title, name, data) {\n  try {\n    ensureDir();\n    const line = JSON.stringify({ title, name, data }) + \"\\n\";\n    fs.appendFileSync(TEMP_METRICS_FILE, line, \"utf-8\");\n  } catch (e) {\n    // Silently ignore write errors\n  }\n}\n\nmodule.exports = {\n  async preVisit(page) {\n    if (!isPerformanceTest) return;\n    await page.addInitScript(() => {\n      window.__VIBE_PERFORMANCE__ = window.__VIBE_PERFORMANCE__ || { renders: {} };\n    });\n  },\n\n  async postVisit(page, context) {\n    if (!isPerformanceTest) return;\n    const { id, title, name } = context;\n\n    try {\n      const root = await page.waitForSelector(\"#storybook-root\", { timeout: 5000 }).catch(() => null);\n      if (!root) return;\n\n      await page.waitForTimeout(50);\n\n      const metrics = await page.evaluate(storyId => {\n        const container = document.querySelector(\"#storybook-root\");\n        if (!container) return null;\n\n        const perfData = window.__VIBE_PERFORMANCE__;\n        const renderMetrics = perfData?.renders?.[storyId];\n\n        const countNodes = el => {\n          let count = 1;\n          for (let i = 0; i < el.children.length; i++) {\n            count += countNodes(el.children[i]);\n          }\n          return count;\n        };\n\n        const memory = performance.memory;\n\n        return {\n          actualDuration: renderMetrics?.actualDuration ?? 0,\n          baseDuration: renderMetrics?.baseDuration ?? 0,\n          phase: renderMetrics?.phase ?? \"unknown\",\n          domNodes: countNodes(container),\n          heapUsed: memory?.usedJSHeapSize ?? 0,\n          heapTotal: memory?.totalJSHeapSize ?? 0\n        };\n      }, id);\n\n      if (metrics) {\n        appendMetric(title, name, {\n          renderMetrics: {\n            mountTime: metrics.actualDuration,\n            baseDuration: metrics.baseDuration,\n            phase: metrics.phase,\n            rerenderCount: metrics.phase === \"update\" ? 1 : 0,\n            totalTime: metrics.actualDuration\n          },\n          memoryMetrics: {\n            heapUsed: metrics.heapUsed,\n            heapTotal: metrics.heapTotal,\n            domNodes: metrics.domNodes\n          }\n        });\n      }\n    } catch (e) {\n      // Silently ignore errors\n    }\n  }\n};\n"
  },
  {
    "path": "packages/docs/.storybook/theme.js",
    "content": "import { create } from \"@storybook/theming/create\";\n\nexport default create({\n  base: \"light\",\n  brandImage: \"/logo.svg\",\n  brandUrl: \"https://vibe.monday.com\",\n  barTextColor: \"#323338\",\n  barSelectedColor: \"#323338\",\n  barHoverColor: \"#323338\",\n  brandTitle: \"Vibe Design System\"\n});\n"
  },
  {
    "path": "packages/docs/.storybook/tsconfig.json",
    "content": "{\n  \"extends\": \"../tsconfig.base.json\",\n  \"compilerOptions\": {\n    \"resolveJsonModule\": true\n  },\n  \"include\": [\"**/*.ts\", \"**/*.tsx\", \"**/*.json\"]\n}\n"
  },
  {
    "path": "packages/docs/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [4.0.4](https://github.com/mondaycom/vibe/compare/@vibe/docs@4.0.3...@vibe/docs@4.0.4) (2026-05-13)\n\n**Note:** Version bump only for package @vibe/docs\n\n\n\n\n\n## [4.0.3](https://github.com/mondaycom/vibe/compare/@vibe/docs@4.0.1...@vibe/docs@4.0.3) (2026-05-06)\n\n**Note:** Version bump only for package @vibe/docs\n\n\n\n\n\n## [4.0.2](https://github.com/mondaycom/vibe/compare/@vibe/docs@4.0.1...@vibe/docs@4.0.2) (2026-05-06)\n\n**Note:** Version bump only for package @vibe/docs\n\n\n\n\n\n## [4.0.1](https://github.com/mondaycom/vibe/compare/@vibe/docs@4.0.0...@vibe/docs@4.0.1) (2026-04-16)\n\n\n### Bug Fixes\n\n* **ColorPicker:** add screen reader support for color announcements ([#3346](https://github.com/mondaycom/vibe/issues/3346)) ([ed1bbb1](https://github.com/mondaycom/vibe/commit/ed1bbb1d466d544fbab6ab08198e1db026c116a9))\n\n\n\n\n\n# [3.8.0](https://github.com/mondaycom/vibe/compare/@vibe/docs@3.7.3...@vibe/docs@3.8.0) (2026-03-11)\n\n\n### Features\n\n* **LinearProgressBar:** add allowExceedingMax prop to support values… ([#3255](https://github.com/mondaycom/vibe/issues/3255)) ([ce68c53](https://github.com/mondaycom/vibe/commit/ce68c53deab2663b57d0da75d2c6ecb21274827f))\n\n\n\n\n\n## [3.7.3](https://github.com/mondaycom/vibe/compare/@vibe/docs@3.7.1...@vibe/docs@3.7.3) (2026-02-27)\n\n**Note:** Version bump only for package @vibe/docs\n\n\n\n\n\n## [3.7.1](https://github.com/mondaycom/vibe/compare/@vibe/docs@3.7.0...@vibe/docs@3.7.1) (2026-02-12)\n\n**Note:** Version bump only for package @vibe/docs\n\n\n\n\n\n# [3.7.0](https://github.com/mondaycom/vibe/compare/@vibe/docs@3.6.0...@vibe/docs@3.7.0) (2026-02-09)\n\n\n### Features\n\n* **List:** new component ([#3240](https://github.com/mondaycom/vibe/issues/3240)) ([c9a15d6](https://github.com/mondaycom/vibe/commit/c9a15d685e586b461e56fcbb008750bf8572821e))\n\n\n\n\n\n# [3.6.0](https://github.com/mondaycom/vibe/compare/@vibe/docs@3.5.9...@vibe/docs@3.6.0) (2026-02-04)\n\n\n### Features\n\n* **BaseList:** new component ([#3212](https://github.com/mondaycom/vibe/issues/3212)) ([8372ddd](https://github.com/mondaycom/vibe/commit/8372ddde21e2357e108c1dbbda81e48f00fbc105))\n\n\n\n\n\n## [3.5.9](https://github.com/mondaycom/vibe/compare/@vibe/docs@3.5.8...@vibe/docs@3.5.9) (2026-01-28)\n\n**Note:** Version bump only for package @vibe/docs\n\n\n\n\n\n## [3.5.8](https://github.com/mondaycom/vibe/compare/@vibe/docs@3.5.7...@vibe/docs@3.5.8) (2026-01-25)\n\n**Note:** Version bump only for package @vibe/docs\n\n\n\n\n\n## [3.5.7](https://github.com/mondaycom/vibe/compare/@vibe/docs@3.5.6...@vibe/docs@3.5.7) (2026-01-18)\n\n**Note:** Version bump only for package @vibe/docs\n\n\n\n\n\n## [3.5.6](https://github.com/mondaycom/vibe/compare/@vibe/docs@3.5.5...@vibe/docs@3.5.6) (2026-01-04)\n\n**Note:** Version bump only for package @vibe/docs\n\n\n\n\n\n## [3.5.5](https://github.com/mondaycom/vibe/compare/@vibe/docs@3.5.4...@vibe/docs@3.5.5) (2026-01-04)\n\n**Note:** Version bump only for package @vibe/docs\n\n\n\n\n\n## [3.5.4](https://github.com/mondaycom/vibe/compare/@vibe/docs@3.5.3...@vibe/docs@3.5.4) (2025-12-28)\n\n**Note:** Version bump only for package @vibe/docs\n\n\n\n\n\n## [3.5.3](https://github.com/mondaycom/vibe/compare/@vibe/docs@3.5.2...@vibe/docs@3.5.3) (2025-12-25)\n\n**Note:** Version bump only for package @vibe/docs\n\n\n\n\n\n## [3.5.2](https://github.com/mondaycom/vibe/compare/@vibe/docs@3.5.1...@vibe/docs@3.5.2) (2025-12-22)\n\n**Note:** Version bump only for package @vibe/docs\n\n\n\n\n\n## [3.5.1](https://github.com/mondaycom/vibe/compare/@vibe/docs@3.5.0...@vibe/docs@3.5.1) (2025-12-17)\n\n**Note:** Version bump only for package @vibe/docs\n\n\n\n\n\n# [3.5.0](https://github.com/mondaycom/vibe/compare/@vibe/docs@3.4.2...@vibe/docs@3.5.0) (2025-12-17)\n\n\n### Features\n\n* add new DatePicker component ([#3139](https://github.com/mondaycom/vibe/issues/3139)) ([cfea5a9](https://github.com/mondaycom/vibe/commit/cfea5a92f6daa5fce28179d8d9534e2dc7d80a2d))\n* **Combobox:** add migration guide and deprecation notice ([#3200](https://github.com/mondaycom/vibe/issues/3200)) ([6d7ddb7](https://github.com/mondaycom/vibe/commit/6d7ddb7a68ec26c17cd7fba3f8acf0991a1b0e8c))\n\n\n\n\n\n## [3.4.2](https://github.com/mondaycom/vibe/compare/@vibe/docs@3.4.1...@vibe/docs@3.4.2) (2025-12-04)\n\n**Note:** Version bump only for package @vibe/docs\n\n\n\n\n\n## [3.4.1](https://github.com/mondaycom/vibe/compare/@vibe/docs@3.4.0...@vibe/docs@3.4.1) (2025-11-27)\n\n**Note:** Version bump only for package @vibe/docs\n\n\n\n\n\n# [3.4.0](https://github.com/mondaycom/vibe/compare/@vibe/docs@3.3.0...@vibe/docs@3.4.0) (2025-11-27)\n\n\n### Features\n\n* **Dropdown:** add boxMode for inline dropdown display ([#3171](https://github.com/mondaycom/vibe/issues/3171)) ([c344822](https://github.com/mondaycom/vibe/commit/c3448224aa80b5f659fcd62d8739865912d60634))\n\n\n\n\n\n# [3.3.0](https://github.com/mondaycom/vibe/compare/@vibe/docs@3.2.1...@vibe/docs@3.3.0) (2025-11-26)\n\n\n### Features\n\n* **AlertBanner:** add ariaLive to AlertBanner ([#3182](https://github.com/mondaycom/vibe/issues/3182)) ([961faca](https://github.com/mondaycom/vibe/commit/961faca14f6c8258650b3004ef6d0c30b7741720))\n\n\n\n\n\n## [3.2.1](https://github.com/mondaycom/vibe/compare/@vibe/docs@3.2.0...@vibe/docs@3.2.1) (2025-11-25)\n\n**Note:** Version bump only for package @vibe/docs\n\n\n\n\n\n# [3.2.0](https://github.com/mondaycom/vibe/compare/@vibe/docs@3.1.4...@vibe/docs@3.2.0) (2025-11-19)\n\n\n### Features\n\n* **MenuItem:** add right icon ([#3183](https://github.com/mondaycom/vibe/issues/3183)) ([9e8b448](https://github.com/mondaycom/vibe/commit/9e8b44835e09ee43e9d962897f3798287d5fa64c))\n\n\n\n\n\n## [3.1.4](https://github.com/mondaycom/vibe/compare/@vibe/docs@3.1.3...@vibe/docs@3.1.4) (2025-11-19)\n\n**Note:** Version bump only for package @vibe/docs\n\n\n\n\n\n## [3.1.3](https://github.com/mondaycom/vibe/compare/@vibe/docs@3.1.2...@vibe/docs@3.1.3) (2025-11-11)\n\n**Note:** Version bump only for package @vibe/docs\n\n\n\n\n\n## [3.1.2](https://github.com/mondaycom/vibe/compare/@vibe/docs@3.1.1...@vibe/docs@3.1.2) (2025-11-10)\n\n**Note:** Version bump only for package @vibe/docs\n\n\n\n\n\n## [3.1.1](https://github.com/mondaycom/vibe/compare/@vibe/docs@3.1.0...@vibe/docs@3.1.1) (2025-11-06)\n\n**Note:** Version bump only for package @vibe/docs\n\n\n\n\n\n# [3.1.0](https://github.com/mondaycom/vibe/compare/@vibe/docs@3.0.2...@vibe/docs@3.1.0) (2025-11-03)\n\n\n### Features\n\n* **Chips:** add \"neutral\" variant color ([#3170](https://github.com/mondaycom/vibe/issues/3170)) ([b91490f](https://github.com/mondaycom/vibe/commit/b91490f3ae601624e47f0f544bcb5207ecfff7e5))\n\n\n\n\n\n## [3.0.2](https://github.com/mondaycom/vibe/compare/@vibe/docs@3.0.1...@vibe/docs@3.0.2) (2025-10-30)\n\n**Note:** Version bump only for package @vibe/docs\n\n\n\n\n\n## 3.0.1 (2025-10-30)\n\n**Note:** Version bump only for package @vibe/docs\n"
  },
  {
    "path": "packages/docs/chromatic.config.json",
    "content": "{\n  \"onlyChanged\": true,\n  \"projectId\": \"Project:62037c72e0e4d6004a9a450f\",\n  \"storybookBaseDir\": \"packages/docs\",\n  \"zip\": true\n}\n"
  },
  {
    "path": "packages/docs/package.json",
    "content": "{\n  \"name\": \"@vibe/docs\",\n  \"version\": \"4.0.4\",\n  \"private\": true,\n  \"description\": \"Vibe documentation\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/mondaycom/vibe.git\",\n    \"directory\": \"packages/docs\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/mondaycom/vibe/issues\"\n  },\n  \"homepage\": \"https://github.com/mondaycom/vibe#readme\",\n  \"author\": \"monday.com\",\n  \"license\": \"MIT\",\n  \"type\": \"module\",\n  \"scripts\": {\n    \"storybook\": \"storybook dev -p 7008\",\n    \"build-storybook\": \"storybook build -o static_storybook && node .storybook/storybook-title-fix.js static_storybook\",\n    \"deploy-storybook\": \"storybook-to-ghpages\",\n    \"chromatic:local\": \"chromatic -t $CHROMATIC_PROJECT_TOKEN\"\n  },\n  \"dependencies\": {\n    \"@vibe/core\": \"4.2.1\",\n    \"@vibe/icons\": \"4.0.0\",\n    \"@vibe/shared\": \"4.0.1\",\n    \"@vibe/style\": \"4.0.0\",\n    \"classnames\": \"^2.3.2\",\n    \"es-toolkit\": \"^1.39.10\",\n    \"framer-motion\": \"^6.5.1\",\n    \"vibe-storybook-components\": \"^4.0.0\"\n  },\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.23.2\",\n    \"@babel/eslint-parser\": \"^7.16.5\",\n    \"@babel/parser\": \"^7.24.4\",\n    \"@babel/plugin-proposal-class-properties\": \"^7.16.5\",\n    \"@babel/plugin-proposal-private-methods\": \"^7.18.6\",\n    \"@babel/plugin-proposal-private-property-in-object\": \"^7.21.11\",\n    \"@babel/plugin-transform-modules-commonjs\": \"^7.16.5\",\n    \"@babel/plugin-transform-react-jsx\": \"^7.16.5\",\n    \"@babel/plugin-transform-runtime\": \"^7.16.7\",\n    \"@babel/preset-env\": \"^7.16.5\",\n    \"@babel/preset-react\": \"^7.16.5\",\n    \"@babel/preset-typescript\": \"^7.23.3\",\n    \"@babel/standalone\": \"^7.24.4\",\n    \"@babel/types\": \"^7.24.0\",\n    \"@chromatic-com/storybook\": \"^3.2.4\",\n    \"@hot-loader/react-dom\": \"^16.13.0\",\n    \"@storybook/addon-a11y\": \"^8.6.15\",\n    \"@storybook/addon-actions\": \"^8.6.15\",\n    \"@storybook/addon-controls\": \"^8.6.15\",\n    \"@storybook/addon-docs\": \"^8.6.15\",\n    \"@storybook/addon-essentials\": \"^8.6.15\",\n    \"@storybook/addon-interactions\": \"^8.6.15\",\n    \"@storybook/addon-links\": \"^8.6.15\",\n    \"@storybook/addon-storysource\": \"^8.6.15\",\n    \"@storybook/addon-themes\": \"^8.6.15\",\n    \"@storybook/addon-toolbars\": \"^8.6.15\",\n    \"@storybook/blocks\": \"^8.6.15\",\n    \"@storybook/blocks7\": \"npm:@storybook/blocks@^7.6.21\",\n    \"@storybook/builder-vite\": \"^8.6.15\",\n    \"@storybook/jest\": \"^0.2.3\",\n    \"@storybook/manager-api\": \"^8.6.15\",\n    \"@storybook/preset-scss\": \"^1.0.3\",\n    \"@storybook/react\": \"^8.6.15\",\n    \"@storybook/react-vite\": \"^8.6.15\",\n    \"@storybook/source-loader\": \"^8.6.15\",\n    \"@storybook/storybook-deployer\": \"^2.8.16\",\n    \"@storybook/test\": \"^8.6.15\",\n    \"@storybook/test-runner\": \"^0.19.1\",\n    \"@storybook/testing-library\": \"^0.2.2\",\n    \"@storybook/theming\": \"^8.6.15\",\n    \"@testing-library/jest-dom\": \"^6.4.6\",\n    \"@testing-library/react\": \"^12.1.2\",\n    \"@testing-library/react-hooks\": \"^7.0.2\",\n    \"@testing-library/user-event\": \"^13.5.0\",\n    \"@types/babel__standalone\": \"^7.1.7\",\n    \"@types/body-scroll-lock\": \"^3.1.0\",\n    \"@types/jest-axe\": \"^3.5.9\",\n    \"@types/react\": \"^18.0.25\",\n    \"@types/react-is\": \"^16.7.5\",\n    \"@types/react-resizable\": \"^3.0.7\",\n    \"@types/react-select\": \"^3.1.2\",\n    \"@types/react-syntax-highlighter\": \"^11.0.5\",\n    \"@types/react-test-renderer\": \"^16.9.0\",\n    \"@types/react-transition-group\": \"^4.4.5\",\n    \"@types/react-virtualized-auto-sizer\": \"^1.0.1\",\n    \"@types/react-window\": \"^1.8.5\",\n    \"@typescript-eslint/eslint-plugin\": \"^5.36.1\",\n    \"@typescript-eslint/parser\": \"^5.36.1\",\n    \"@uiw/codemirror-extensions-langs\": \"^4.21.25\",\n    \"@uiw/codemirror-theme-github\": \"^4.21.25\",\n    \"@uiw/react-codemirror\": \"^4.21.25\",\n    \"@vitejs/plugin-react\": \"^4.3.1\",\n    \"@vitest/coverage-v8\": \"^1.6.0\",\n    \"@vitest/ui\": \"^1.6.0\",\n    \"acorn\": \"^8.7.1\",\n    \"autoprefixer\": \"^10.4.0\",\n    \"babel-core\": \"^6.26.3\",\n    \"babel-loader\": \"^8.2.3\",\n    \"babel-plugin-react-require\": \"^3.1.3\",\n    \"babel-plugin-transform-react-remove-prop-types\": \"^0.4.24\",\n    \"babel-polyfill\": \"^6.26.0\",\n    \"babel-preset-react\": \"^6.24.1\",\n    \"boxt\": \"^1.1.1\",\n    \"chalk\": \"^4.1.2\",\n    \"chromatic\": \"^11.5.4\",\n    \"csstype\": \"^3.1.0\",\n    \"date-fns\": \"^2.30.0\",\n    \"ejs\": \"^3.1.9\",\n    \"eslint\": \"^8.23.0\",\n    \"eslint-config-airbnb\": \"^19.0.4\",\n    \"eslint-config-prettier\": \"^8.3.0\",\n    \"eslint-plugin-import\": \"^2.25.4\",\n    \"eslint-plugin-json\": \"^3.1.0\",\n    \"eslint-plugin-jsx-a11y\": \"^6.5.1\",\n    \"eslint-plugin-markdown\": \"^2.2.1\",\n    \"eslint-plugin-only-warn\": \"^1.0.3\",\n    \"eslint-plugin-prettier\": \"^4.0.0\",\n    \"eslint-plugin-react\": \"^7.28.0\",\n    \"eslint-plugin-react-hooks\": \"^4.3.0\",\n    \"eslint-plugin-storybook\": \"^0.6.15\",\n    \"eslint-plugin-vitest\": \"^0.4.1\",\n    \"execa\": \"^5.1.1\",\n    \"identity-obj-proxy\": \"^3.0.0\",\n    \"jest-axe\": \"^8.0.0\",\n    \"js-sha256\": \"^0.9.0\",\n    \"json-loader\": \"^0.5.7\",\n    \"jsontosass\": \"^0.2.0\",\n    \"mini-css-extract-plugin\": \"^2.4.5\",\n    \"playwright\": \"^1.40.0\",\n    \"plop\": \"4.0.1\",\n    \"postcss\": \"^8.4.5\",\n    \"postcss-import\": \"^15.1.0\",\n    \"postcss-loader\": \"^6.2.1\",\n    \"postcss-scss\": \"^4.0.2\",\n    \"preact\": \"^10.8.0\",\n    \"prettier\": \"^2.5.1\",\n    \"react\": \"^16.14.0\",\n    \"react-docgen-typescript\": \"^2.2.2\",\n    \"react-dom\": \"^16.14.0\",\n    \"react-live\": \"^4.1.5\",\n    \"react-resizable\": \"^3.0.4\",\n    \"react-syntax-highlighter\": \"^15.5.0\",\n    \"react-test-renderer\": \"^16.14.0\",\n    \"remark-gfm\": \"^4.0.0\",\n    \"resolve-url-loader\": \"^5.0.0\",\n    \"sass\": \"^1.51.0\",\n    \"snapshot-diff\": \"^0.9.0\",\n    \"storybook\": \"^8.6.15\",\n    \"storybook-addon-playground\": \"^2.0.1\",\n    \"ts-loader\": \"^9.3.1\",\n    \"ts-morph\": \"^25.0.1\",\n    \"ts-node\": \"^10.9.2\",\n    \"tsx\": \"^4.20.3\",\n    \"typescript\": \"^5.9.3\",\n    \"typescript-plugin-css-modules\": \"^4.2.1\",\n    \"vite\": \"^5.3.1\",\n    \"vitest\": \"^1.6.0\"\n  },\n  \"storybook-deployer\": {\n    \"commitMessage\": \"Deploy Storybook [ci-skip]\"\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/decorators/withGlobalStyle/withGlobalStyle.module.scss",
    "content": ".storyWrapper {\n  padding: var(--space-32) var(--space-24);\n}\n"
  },
  {
    "path": "packages/docs/src/decorators/withGlobalStyle/withGlobalStyle.tsx",
    "content": "import React from \"react\";\nimport { MultipleStoryElementsWrapper } from \"vibe-storybook-components\";\nimport cx from \"classnames\";\nimport styles from \"./withGlobalStyle.module.scss\";\nimport { type Decorator } from \"@storybook/react\";\n\nconst WithGlobalStyle: Decorator = (Story, { className, viewMode }) => {\n  return (\n    <MultipleStoryElementsWrapper className={cx({ [styles.storyWrapper]: viewMode === \"docs\" }, className)}>\n      <Story />\n    </MultipleStoryElementsWrapper>\n  );\n};\n\nexport default WithGlobalStyle;\n"
  },
  {
    "path": "packages/docs/src/decorators/withLiveEdit/components/LiveContent/LiveContent.module.scss",
    "content": ".modifiedVersionIndicator {\n  position: absolute;\n  top: 0;\n  left: calc(50% - var(--sb-spacing-large));\n  margin: 0;\n  border-radius: 0 0 4px 4px;\n  background: var(--sb-primary-color);\n  color: var(--sb-text-color-on-primary);\n  padding: var(--sb-spacing-xs);\n  font-size: 10px;\n  pointer-events: none;\n  user-select: none;\n}\n"
  },
  {
    "path": "packages/docs/src/decorators/withLiveEdit/components/LiveContent/LiveContent.tsx",
    "content": "import React from \"react\";\nimport { LiveProvider } from \"react-live\";\nimport { playgroundVibeComponents, playgroundReactCommonHooks } from \"../../../../pages/playground/playground-helpers\";\nimport LivePreview from \"../../../../layout/live-preview/LivePreview\";\nimport useApplyDecorators from \"../../hooks/useApplyDecorators\";\nimport { type LiveContentProps } from \"./LiveContent.types\";\nimport styles from \"./LiveContent.module.scss\";\n\nconst LiveContent = ({ code, scope, decorators, context }: LiveContentProps) => {\n  const content: React.JSX.Element = (\n    <>\n      <div className={styles.modifiedVersionIndicator}>Modified Version</div>\n      <LiveProvider\n        code={code}\n        scope={{ ...playgroundVibeComponents, ...playgroundReactCommonHooks, ...scope }}\n        enableTypeScript\n      >\n        <LivePreview />\n      </LiveProvider>\n    </>\n  );\n\n  return <>{useApplyDecorators(decorators || [], content, context)}</>;\n};\n\nexport default LiveContent;\n"
  },
  {
    "path": "packages/docs/src/decorators/withLiveEdit/components/LiveContent/LiveContent.types.ts",
    "content": "import { type Decorator, type StoryContext } from \"@storybook/react\";\n\nexport interface LiveContentProps {\n  code: string;\n  scope: Record<string, unknown>;\n  decorators: Decorator[];\n  context: StoryContext;\n}\n"
  },
  {
    "path": "packages/docs/src/decorators/withLiveEdit/components/LiveEditorAction/LiveEditorAction.module.scss",
    "content": ".action {\n  opacity: 0.6;\n  border: 0;\n  padding: 4px 8px;\n  cursor: pointer;\n  font-size: 9px;\n  font-weight: bold;\n  background-color: #fff;\n}\n\n.action:hover:not([disabled]) {\n  opacity: 0.8;\n  transition: opacity 0.1s ease;\n}\n\n.action[disabled] {\n  cursor: not-allowed;\n  color: #000;\n  opacity: 0.3;\n}\n"
  },
  {
    "path": "packages/docs/src/decorators/withLiveEdit/components/LiveEditorAction/LiveEditorAction.tsx",
    "content": "import React from \"react\";\nimport styles from \"./LiveEditorAction.module.scss\";\nimport { type LiveEditorActionProps } from \"./LiveEditorAction.types\";\n\nconst LiveEditorAction = ({ onClick, disabled, children }: LiveEditorActionProps) => {\n  return (\n    <button className={styles.action} type=\"button\" onClick={() => onClick()} disabled={disabled || !onClick}>\n      {children}\n    </button>\n  );\n};\n\nexport default LiveEditorAction;\n"
  },
  {
    "path": "packages/docs/src/decorators/withLiveEdit/components/LiveEditorAction/LiveEditorAction.types.ts",
    "content": "export interface LiveEditorActionProps {\n  onClick?: () => void;\n  disabled?: boolean;\n  children: string;\n}\n"
  },
  {
    "path": "packages/docs/src/decorators/withLiveEdit/hooks/useApplyDecorators.ts",
    "content": "import type React from \"react\";\nimport { useMemo } from \"react\";\nimport { type StoryContext, type Decorator } from \"@storybook/react\";\n\nconst useApplyDecorators = (decorators: Decorator[], component: React.ReactElement, context: StoryContext) => {\n  return useMemo(() => {\n    let decoratedComponent = () => component;\n\n    // recursively apply decorators to the component\n    decorators.forEach(decorator => {\n      const currentComponent = decoratedComponent;\n      decoratedComponent = () => decorator(currentComponent, context);\n    });\n\n    return decoratedComponent();\n  }, [decorators, component, context]);\n};\n\nexport default useApplyDecorators;\n"
  },
  {
    "path": "packages/docs/src/decorators/withLiveEdit/hooks/useLiveEditorActions.ts",
    "content": "import { useCallback, useRef, useState } from \"react\";\nimport { formatCode } from \"../utils/prettier-utils\";\nimport { extractRenderAttributeFromCsf } from \"../utils/parse-csf-utils\";\n\nfunction format(source: string): string {\n  try {\n    return formatCode(source);\n  } catch (e) {\n    return source;\n  }\n}\n\nconst useLiveEditorActions = (originalSource: string) => {\n  const originalRenderFromCsf = useRef<string>(\n    originalSource ? extractRenderAttributeFromCsf(`(${originalSource})`) : \"\"\n  );\n  const [code, setCode] = useState<string>(format(originalRenderFromCsf.current));\n  const [isDirty, setDirty] = useState<boolean>(false);\n  const [isCopied, setCopied] = useState<boolean>(false);\n\n  const onChange = useCallback((newVal: string) => {\n    setCode(newVal);\n    setDirty(true);\n  }, []);\n\n  const onCopyClick = useCallback(() => {\n    navigator.clipboard.writeText(code);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  }, [code]);\n\n  const onFormatClick = useCallback(() => {\n    setCode(format(code));\n  }, [code]);\n\n  const onResetClick = useCallback(() => {\n    setCode(format(originalRenderFromCsf.current));\n    setDirty(false);\n  }, []);\n\n  return {\n    code,\n    isDirty,\n    onChange,\n    onCopyClick,\n    isCopied,\n    onFormatClick,\n    onResetClick\n  };\n};\n\nexport default useLiveEditorActions;\n"
  },
  {
    "path": "packages/docs/src/decorators/withLiveEdit/utils/parse-csf-utils.ts",
    "content": "import { transformFromAst } from \"@babel/standalone\";\nimport { parse } from \"@babel/parser\";\nimport {\n  type File,\n  type Program,\n  type Expression,\n  type Statement,\n  type ObjectProperty,\n  type FunctionExpression,\n  type ArrowFunctionExpression,\n  isObjectExpression,\n  isBlockStatement,\n  isExpressionStatement,\n  isObjectProperty,\n  isIdentifier,\n  isArrowFunctionExpression,\n  isFunctionExpression\n} from \"@babel/types\";\n\nconst parseCsfToAst = (csfString: string) => {\n  return parse(csfString, {\n    plugins: [\"typescript\", \"jsx\"],\n    sourceType: \"module\"\n  });\n};\n\nfunction findRenderProperty(body: Statement[]): ObjectProperty {\n  return body\n    .flatMap(node =>\n      isExpressionStatement(node) && isObjectExpression(node.expression) ? node.expression.properties : []\n    )\n    .find(prop => isObjectProperty(prop) && isIdentifier(prop.key) && prop.key.name === \"render\") as ObjectProperty;\n}\n\nfunction prepareTransformTarget(renderProperty: ObjectProperty): Program {\n  const { value } = renderProperty;\n  const isFunction = isFunctionExpression(value) || isArrowFunctionExpression(value);\n  if (!isFunction) {\n    // e.g. render: something\n    const expression = value as Expression;\n    return {\n      type: \"Program\",\n      body: [{ type: \"ExpressionStatement\", expression }],\n      directives: [],\n      sourceType: \"module\"\n    };\n  }\n\n  // e.g. render: () => {...}, render: () => (...), render()\n  const { body } = value as FunctionExpression | ArrowFunctionExpression;\n\n  return {\n    type: \"Program\",\n    body: [\n      {\n        type: \"ExpressionStatement\",\n        expression: isBlockStatement(body) ? value : body\n      }\n    ],\n    directives: [],\n    sourceType: \"module\"\n  };\n}\n\nfunction transformAstToCode(ast: File): string {\n  // docs says transformFromAst is void, but it is not because of a breaking change\n  const { code } = transformFromAst(ast, null, { presets: [] }) as unknown as { code: string };\n  return code;\n}\n\nexport function extractRenderAttributeFromCsf(csfString: string) {\n  const originalAst = parseCsfToAst(csfString);\n\n  const renderProperty = findRenderProperty(originalAst.program.body);\n  if (!renderProperty) {\n    return null;\n  }\n\n  const transformTarget = prepareTransformTarget(renderProperty);\n  if (!transformTarget) {\n    return null;\n  }\n\n  const transformedAst: File = {\n    type: \"File\",\n    program: transformTarget\n  };\n\n  return transformAstToCode(transformedAst);\n}\n"
  },
  {
    "path": "packages/docs/src/decorators/withLiveEdit/utils/prettier-utils.ts",
    "content": "import { format, type Options } from \"prettier\";\nimport parserHtml from \"prettier/parser-html\";\nimport parserTypeScript from \"prettier/parser-typescript\";\n\nexport function formatCode(code: string): string {\n  const options: Options = {\n    parser: \"typescript\",\n    arrowParens: \"avoid\",\n    trailingComma: \"es5\",\n    plugins: [parserHtml, parserTypeScript]\n  };\n  try {\n    return format(code, options).replace(/;\\s*$/, \"\");\n  } catch (e) {\n    throw new Error(`[LiveEdit Error]: Error formatting code: ${e}`);\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/decorators/withLiveEdit/withLiveEdit.module.scss",
    "content": ".actions {\n  display: flex;\n  gap: 1px;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  border-top-left-radius: 4px;\n  overflow: hidden;\n}\n"
  },
  {
    "path": "packages/docs/src/decorators/withLiveEdit/withLiveEdit.tsx",
    "content": "import { type Decorator, type StoryContext } from \"@storybook/react\";\nimport React, { useMemo } from \"react\";\nimport { githubDark } from \"@uiw/codemirror-theme-github\";\nimport { langs } from \"@uiw/codemirror-extensions-langs\";\nimport { createPortal } from \"react-dom\";\nimport LiveEditor from \"../../layout/live-editor/LiveEditor\";\nimport LiveContent from \"./components/LiveContent/LiveContent\";\nimport LiveEditorAction from \"./components/LiveEditorAction/LiveEditorAction\";\nimport styles from \"./withLiveEdit.module.scss\";\nimport useLiveEditorActions from \"./hooks/useLiveEditorActions\";\n\nconst withLiveEdit: Decorator = (Story, context: StoryContext) => {\n  const { id, parameters, viewMode, moduleExport } = context;\n  const { source: sourceParams, liveEdit: liveEditParams } = parameters.docs || {};\n  const canvasEditorContainer = useMemo(() => document.getElementById(id), [id]);\n  const shouldAllowLiveEdit = viewMode === \"docs\" && liveEditParams?.isEnabled && !!canvasEditorContainer;\n\n  const { code, isDirty, onChange, onCopyClick, isCopied, onFormatClick, onResetClick } = useLiveEditorActions(\n    sourceParams?.originalSource\n  );\n\n  if (!shouldAllowLiveEdit) {\n    return <Story />;\n  }\n\n  return (\n    <>\n      {isDirty ? (\n        <LiveContent\n          code={code}\n          scope={liveEditParams?.scope}\n          decorators={moduleExport.decorators || []}\n          context={context}\n        />\n      ) : (\n        <Story />\n      )}\n      {createPortal(\n        <>\n          <LiveEditor\n            placeholder={\"Insert code here\"}\n            code={code}\n            theme={githubDark}\n            extensions={[langs.tsx()]}\n            style={{ fontSize: 13 }}\n            onChange={onChange}\n            setup={{\n              lineNumbers: false,\n              foldGutter: false,\n              highlightActiveLine: false,\n              autocompletion: false\n            }}\n          />\n          <section className={styles.actions}>\n            <LiveEditorAction onClick={onCopyClick} disabled={isCopied}>\n              {isCopied ? \"Copied\" : \"Copy\"}\n            </LiveEditorAction>\n            <LiveEditorAction onClick={onFormatClick}>Format</LiveEditorAction>\n            <LiveEditorAction onClick={onResetClick}>Reset</LiveEditorAction>\n          </section>\n        </>,\n        canvasEditorContainer\n      )}\n    </>\n  );\n};\n\nexport default withLiveEdit;\n"
  },
  {
    "path": "packages/docs/src/decorators/withPerformanceProfiler/withPerformanceProfiler.tsx",
    "content": "import React, { Profiler, ProfilerOnRenderCallback } from \"react\";\nimport type { Decorator } from \"@storybook/react\";\n\ninterface RenderMetric {\n  /** Actual time spent rendering (ms) */\n  actualDuration: number;\n  /** Time to render entire subtree without memoization (ms) */\n  baseDuration: number;\n  /** \"mount\" for first render, \"update\" for re-renders */\n  phase: \"mount\" | \"update\" | \"nested-update\";\n  /** When React started rendering */\n  startTime: number;\n  /** When React committed to DOM */\n  commitTime: number;\n  /** Timestamp when metric was recorded */\n  timestamp: number;\n}\n\ninterface VibePerformanceData {\n  renders: Record<string, RenderMetric>;\n}\n\ndeclare global {\n  interface Window {\n    __VIBE_PERFORMANCE__?: VibePerformanceData;\n  }\n}\n\nfunction initializeStore(): void {\n  if (typeof window === \"undefined\") return;\n\n  if (!window.__VIBE_PERFORMANCE__) {\n    window.__VIBE_PERFORMANCE__ = {\n      renders: {}\n    };\n  }\n}\n\nfunction createOnRenderCallback(storyId: string): ProfilerOnRenderCallback {\n  return (id, phase, actualDuration, baseDuration, startTime, commitTime) => {\n    if (typeof window === \"undefined\" || !window.__VIBE_PERFORMANCE__) return;\n\n    window.__VIBE_PERFORMANCE__.renders[storyId] = {\n      actualDuration,\n      baseDuration,\n      phase: phase as RenderMetric[\"phase\"],\n      startTime,\n      commitTime,\n      timestamp: Date.now()\n    };\n  };\n}\n\nconst withPerformanceProfiler: Decorator = (Story, context) => {\n  initializeStore();\n\n  const storyId = context.id;\n  const onRender = createOnRenderCallback(storyId);\n\n  return (\n    <Profiler id={storyId} onRender={onRender}>\n      <Story />\n    </Profiler>\n  );\n};\n\nexport default withPerformanceProfiler;\n"
  },
  {
    "path": "packages/docs/src/layout/canvas-wrapper/CanvasWrapper.module.scss",
    "content": ".editorContainer {\n  position: relative;\n  top: -40px;\n  width: 100%;\n  background: transparent;\n  max-height: 0;\n  opacity: 0;\n  transition: max-height 0.1s ease-out, opacity 0.1s ease-out;\n  overflow: auto;\n  border-radius: 0 0 4px 4px;\n  box-shadow: none;\n  border: 1px solid #dde3e7;\n  border-top: none;\n\n  &[data-editor-open=\"true\"] {\n    max-height: 500px;\n    opacity: 1;\n  }\n\n  & :global(.cm-editor) {\n    padding: var(--sb-spacing-medium);\n    padding-right: 0;\n    max-height: 500px;\n  }\n}\n\n.canvas:has(+ [data-editor-open=\"true\"]) {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.canvas {\n  box-shadow: none !important;\n}\n"
  },
  {
    "path": "packages/docs/src/layout/canvas-wrapper/CanvasWrapper.tsx",
    "content": "import React from \"react\";\nimport { Canvas, useOf } from \"@storybook/blocks\";\nimport { type ComponentProps, type FC, useMemo, useState } from \"react\";\nimport styles from \"./CanvasWrapper.module.scss\";\n\ntype CanvasWrapper = ComponentProps<typeof Canvas>;\n\nconst CanvasWrapper: FC<CanvasWrapper> = ({ of }) => {\n  const [open, setOpen] = useState<boolean>(false);\n\n  // resolve Storybook story module to get the story id and parameters of current rendered story\n  const { story } = useOf(of, [\"story\"]);\n\n  const toggleCodeAction = useMemo(\n    () => ({\n      title: \"Story Editor\",\n      onClick: () => setOpen(prev => !prev)\n    }),\n    []\n  );\n\n  const sourceState = story.parameters.docs?.sourceState;\n  const liveEditEnabledForStory = sourceState !== \"none\" && story.parameters.docs?.liveEdit?.isEnabled;\n\n  return (\n    <>\n      <Canvas\n        of={of}\n        sourceState={sourceState || (liveEditEnabledForStory ? \"none\" : \"hidden\")}\n        additionalActions={liveEditEnabledForStory ? [toggleCodeAction] : []}\n        className={styles.canvas}\n      />\n      {liveEditEnabledForStory && <div id={story.id} className={styles.editorContainer} data-editor-open={open} />}\n    </>\n  );\n};\n\nexport default CanvasWrapper;\n"
  },
  {
    "path": "packages/docs/src/layout/footer/ArrowIcon.tsx",
    "content": "import React from \"react\";\n\nexport default function ArrowIcon() {\n  return (\n    <svg width=\"17\" height=\"17\" viewBox=\"0 0 17 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M7.2249 2.7627C6.87282 2.7627 6.5874 3.04811 6.5874 3.4002C6.5874 3.75228 6.87282 4.0377 7.2249 4.0377H12.0608L2.52412 13.5745C2.27516 13.8234 2.27516 14.2271 2.52412 14.476C2.77308 14.725 3.17672 14.725 3.42568 14.476L12.9624 4.9393V9.7752C12.9624 10.1273 13.2478 10.4127 13.5999 10.4127C13.952 10.4127 14.2374 10.1273 14.2374 9.7752V3.4002C14.2374 3.04811 13.952 2.7627 13.5999 2.7627H7.2249Z\"\n        fill=\"#323338\"\n        stroke=\"#323338\"\n        strokeWidth=\"0.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n"
  },
  {
    "path": "packages/docs/src/layout/footer/Footer.module.scss",
    "content": ".footer {\n  display: flex;\n  justify-content: center;\n  background-color: var(--color-riverstone_gray);\n  padding: 80px 0;\n\n  .footerContent {\n    flex: 1;\n    max-width: 1200px;\n    min-width: 640px;\n    margin: 0 120px;\n  }\n\n  .footerTitles {\n    max-width: 320px;\n    flex-shrink: 0;\n    margin-right: 80px;\n  }\n\n  .title {\n    color: var(--sb-primary-text-color);\n    font-family: var(--sb-title-font-family);\n    font-size: 32px;\n    font-weight: 500;\n    line-height: 105%;\n    letter-spacing: -1.333px;\n    margin: 0;\n  }\n\n  .subtitle {\n    color: var(--sb-secondary-text-color);\n    font-family: var(--sb-title-font-family);\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 140%;\n    letter-spacing: 0.427px;\n    margin: 12px 0 0 0;\n  }\n}\n\n@media screen and (max-width: 1200px) {\n  .footer .footerContent {\n    max-width: 900px;\n    margin: 0 80px;\n    flex-direction: column;\n    gap: 50px;\n  }\n\n  .footer .footerTitles {\n    max-width: 100%;\n  }\n\n  .footer .footerCards {\n    width: 100%;\n  }\n}\n\n@media screen and (max-width: 1024px) {\n  .footer .footerContent {\n    margin: 0 120px;\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/layout/footer/Footer.tsx",
    "content": "import React from \"react\";\nimport styles from \"./Footer.module.scss\";\nimport { Flex } from \"@vibe/core\";\nimport FooterCard from \"./FooterCard\";\nimport Title from \"../../pages/welcome/Title\";\n\nexport default function Footer() {\n  return (\n    <div className={styles.footer}>\n      <Flex align=\"start\" className={styles.footerContent}>\n        <div className={styles.footerTitles}>\n          <Title className={styles.title}>We&apos;re listening.</Title>\n          <p className={styles.subtitle}>\n            We&apos;d love to hear your thoughts <br /> about Vibe!\n          </p>\n        </div>\n        <Flex gap=\"large\" className={styles.footerCards} align=\"start\" flex=\"1\">\n          <FooterCard\n            title=\"Bug report\"\n            description=\"Report a bug on our production\"\n            href=\"https://github.com/mondaycom/vibe/issues/new?template=bug_report.yml\"\n            linkText=\"See more\"\n          />\n          <FooterCard\n            title=\"General contact\"\n            description=\"General questions, feature requests, ideas, etc.\"\n            href=\"https://forms.monday.com/forms/213ebddcb0d423ae5b6178fb6e8f7b3d?r=use1\"\n            linkText=\"See more\"\n          />\n        </Flex>\n      </Flex>\n    </div>\n  );\n}\n"
  },
  {
    "path": "packages/docs/src/layout/footer/FooterCard.module.scss",
    "content": ".footerCard {\n  border-radius: 20px;\n  border: 1px solid var(--ui-border-color);\n  padding: 32px 32px 24px 32px;\n  cursor: pointer;\n  display: flex;\n  height: 170px;\n  flex: 1;\n  width: 100%;\n  align-items: flex-start;\n  text-decoration: none;\n  flex-direction: column;\n  justify-content: space-between;\n  color: var(--sb-primary-text-color);\n\n  .content {\n    gap: 12px;\n\n    .title {\n      margin: 0;\n      letter-spacing: normal;\n      font-size: 16px;\n      font-weight: 600;\n    }\n\n    .description {\n      color: var(--sb-secondary-text-color);\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 140%;\n    }\n  }\n  .link {\n    align-self: flex-end;\n    font-size: 16px;\n    font-weight: 500;\n  }\n\n  &:hover {\n    background: var(--sb-allgrey-background-color);\n    mix-blend-mode: multiply;\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/layout/footer/FooterCard.tsx",
    "content": "import React from \"react\";\nimport styles from \"./FooterCard.module.scss\";\nimport { Flex } from \"@vibe/core\";\nimport ArrowIcon from \"./ArrowIcon\";\nimport Title from \"../../pages/welcome/Title\";\n\nexport default function FooterCard({\n  title,\n  description,\n  linkText,\n  href\n}: {\n  title: string;\n  description: string;\n  linkText: string;\n  href: string;\n}) {\n  return (\n    <a href={href} className={styles.footerCard} target=\"_blank\" rel=\"noreferrer noopener\">\n      <Flex className={styles.content} direction=\"column\" align=\"start\">\n        <Title className={styles.title}>{title}</Title>\n        <div className={styles.description}>{description}</div>\n      </Flex>\n      <Flex className={styles.link} align=\"center\" gap=\"small\">\n        {linkText} <ArrowIcon />\n      </Flex>\n    </a>\n  );\n}\n"
  },
  {
    "path": "packages/docs/src/layout/live-editor/LiveEditor.tsx",
    "content": "import React, { forwardRef } from \"react\";\nimport CodeMirror, { type Extension, type ReactCodeMirrorRef, type BasicSetupOptions } from \"@uiw/react-codemirror\";\n\ninterface EditorProps {\n  code: string;\n  onChange: (newVal: string) => void;\n  placeholder?: string;\n  loading?: boolean;\n  theme?: \"light\" | \"dark\" | Extension;\n  style?: React.CSSProperties;\n  extensions?: Extension[];\n  setup?: BasicSetupOptions;\n}\n\ntype EditorComponent = React.ForwardRefExoticComponent<EditorProps & React.RefAttributes<ReactCodeMirrorRef>>;\n\nconst LiveEditor: EditorComponent = forwardRef(\n  ({ code, onChange, placeholder, theme = \"light\", style, extensions, setup }, ref) => {\n    return (\n      <CodeMirror\n        style={style}\n        ref={ref}\n        theme={theme}\n        value={code}\n        extensions={extensions}\n        onChange={onChange}\n        placeholder={placeholder}\n        basicSetup={setup}\n      />\n    );\n  }\n);\n\nexport default LiveEditor;\n"
  },
  {
    "path": "packages/docs/src/layout/live-preview/LivePreview.module.scss",
    "content": ".wrapper {\n  position: relative;\n}\n\n.overlay {\n  position: fixed;\n  inset: 0;\n  color: #fff;\n  background-color: rgba(0, 0, 0, 0.7);\n  padding: 16px;\n  margin: 0;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.errorTitle {\n  font-size: 14px;\n  font-weight: bold;\n  margin-bottom: 8px;\n}\n\n.errorMessage {\n  font-size: 12px;\n  white-space: pre-wrap;\n  word-break: break-all;\n}\n"
  },
  {
    "path": "packages/docs/src/layout/live-preview/LivePreview.tsx",
    "content": "import React, { useState, useEffect, useRef } from \"react\";\nimport { withLive } from \"react-live\";\nimport styles from \"./LivePreview.module.scss\";\n\ninterface LivePreview {\n  live?: {\n    // live injects more, currently unneeded, props\n    error?: string;\n    element?: React.ComponentType;\n  };\n}\n\nconst LivePreview: React.FC<LivePreview> = ({ live = {} }) => {\n  const { error, element: Element } = live;\n  const [LastGoodElement, setLastGoodElement] = useState<typeof Element | null>(null);\n  const errorRef = useRef(error);\n\n  useEffect(() => {\n    errorRef.current = error;\n  }, [error]);\n\n  useEffect(() => {\n    if (Element && !error) {\n      const timeoutId = setTimeout(() => {\n        if (!errorRef.current) {\n          setLastGoodElement(() => Element);\n        }\n      }, 10); // just enough for react-live to catch runtime errors\n\n      return () => clearTimeout(timeoutId);\n    }\n  }, [Element, error]);\n\n  return (\n    <>\n      {error ? (\n        <>\n          {LastGoodElement && <LastGoodElement />}\n          <div className={styles.overlay}>\n            <pre className={styles.errorMessage}>{error}</pre>\n          </div>\n        </>\n      ) : (\n        Element && <Element />\n      )}\n    </>\n  );\n};\nexport default withLive(LivePreview);\n"
  },
  {
    "path": "packages/docs/src/layout/props-table/props-table.jsx",
    "content": "import React from \"react\";\n// import { Controls } from \"@storybook/blocks\"; // Controls are not supporting subcomponents yet, so using deprecated ArgsTable - https://github.com/storybookjs/storybook/issues/20782\nimport { ArgsTable } from \"@storybook/blocks7\";\n// TODO extract to vibe-storybook-components?\nexport const PropsTable = props => <ArgsTable story=\"Overview\" sort=\"alpha\" {...props} />;\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/component-description-map.tsx",
    "content": "import React from \"react\";\n\n/* eslint-disable react/jsx-key */\nimport { SplitButtonDescription } from \"./descriptions/split-button-description\";\nimport { ButtonGroupDescription } from \"./descriptions/button-group-description\";\nimport { CheckboxDescription } from \"./descriptions/checkbox-description\";\nimport { RadioButtonDescription } from \"./descriptions/radio-button-description\";\nimport { LabelDescription } from \"./descriptions/label-description\";\nimport { LinkDescription } from \"./descriptions/link-description\";\nimport { CounterDescription } from \"./descriptions/counter-description\";\nimport { ChipsDescription } from \"./descriptions/chips-description\";\nimport { TooltipDescription } from \"./descriptions/tooltip-description\";\nimport { ToggleDescription } from \"./descriptions/toggle-description\";\nimport { DropdownDescription } from \"./descriptions/dropdown-description\";\nimport { ButtonDescription } from \"./descriptions/button-description\";\nimport { TabsDescription } from \"./descriptions/tab-description\";\nimport { BreadcrumbsDescription } from \"./descriptions/breadcrumbs-description\";\nimport { MenuDescription } from \"./descriptions/menu-description\";\nimport { AttentionBoxDescription } from \"./descriptions/attention-box-description\";\nimport { AlertBannerDescription } from \"./descriptions/alert-banner-description\";\nimport { ToastDescription } from \"./descriptions/toast-description\";\nimport { MultiStepIndicatorDescription } from \"./descriptions/multi-step-indicator-description\";\nimport { TipseenDescription } from \"./descriptions/tipseen-description\";\nimport { TextFieldDescription } from \"./descriptions/text-field-description\";\nimport { NumberFieldDescription } from \"./descriptions/number-field-description\";\nimport { SearchDescription } from \"./descriptions/search-description\";\nimport { ComboboxDescription } from \"./descriptions/combobox-description\";\nimport { StepsDescription } from \"./descriptions/steps-description\";\nimport { ColorsDescription } from \"./descriptions/colors-description/colors-description\";\nimport { AvatarDescription } from \"./descriptions/avatar-description\";\nimport { AvatarGroupDescription } from \"./descriptions/avatar-group-description\";\nimport { IconsDescription } from \"./descriptions/icons-description\";\nimport { SpinnerDescription } from \"./descriptions/spinner-description\";\nimport { SkeletonDescription } from \"./descriptions/skeleton-description\";\nimport { TypographyDescription } from \"./descriptions/typography-description/typography-description\";\nimport { ProgressBarDescription } from \"./descriptions/linear-progress-bar-description\";\nimport { EditableHeadingDescription } from \"./descriptions/editable-heading-description\";\nimport { EditableTextDescription } from \"./descriptions/editable-text-description\";\nimport { ShadowDescription } from \"./descriptions/shadow-description/shadow-description\";\nimport { HeadingDescription } from \"./descriptions/heading-description\";\nimport { SpacingDescription } from \"./descriptions/spacing-description/spacing-description\";\nimport { IconButtonDescription } from \"./descriptions/icon-button-description\";\nimport { MenuButtonDescription } from \"./descriptions/menu-button-description\";\nimport { ClickableDescription } from \"./descriptions/clickable-description/clickable-description\";\nimport { ListDescription } from \"./descriptions/list-description\";\nimport { FlexDescription } from \"./descriptions/flex-description\";\nimport { DividerDescription } from \"./descriptions/divider\";\nimport { DialogContentContainerDescription } from \"./descriptions/dialog-content-container\";\nimport { DialogDescription } from \"./descriptions/dialog-description/dialog-description\";\nimport { AccordionDescription } from \"./descriptions/accordion-description/accordion-description\";\nimport { ExpandCollapseDescription } from \"./descriptions/expand-collapse-description/expand-collapse-description\";\nimport { TextDescription } from \"./descriptions/text-description\";\nimport { VirtualizedListDescription } from \"./descriptions/virtualized-list-description/virtualized-list-description\";\nimport { ColorPickerDescription } from \"./descriptions/color-picker-description\";\nimport { BadgeDescription } from \"./descriptions/badge-description\";\nimport { SliderDescription } from \"./descriptions/slider-description\";\nimport { IconDescription } from \"./descriptions/icon-description\";\nimport { BoxDescription } from \"./descriptions/box-description\";\nimport { TableDescription } from \"./descriptions/table-description\";\nimport { VirtualizedGridDescription } from \"./descriptions/virtualized-grid-description/virtualized-grid-description\";\nimport { MenuGridItemDescription } from \"./descriptions/menu-grid-item-description\";\nimport { ModalMediaLayoutRelatedComponent } from \"./descriptions/modal/ModalMediaLayoutRelatedComponent\";\nimport { ModalSideBySideLayoutRelatedComponent } from \"./descriptions/modal/ModalSideBySideLayoutRelatedComponent\";\nimport { ModalBasicLayoutRelatedComponent } from \"./descriptions/modal/ModalBasicLayoutRelatedComponent\";\n\nconst COMPONENTS_DESCRIPTIONS_ENTRIES = [\n  [\"SplitButton\", <SplitButtonDescription />],\n  [\"ButtonGroup\", <ButtonGroupDescription />],\n  [\"Label\", <LabelDescription />],\n  [\"Link\", <LinkDescription />],\n  [\"Checkbox\", <CheckboxDescription />],\n  [\"RadioButton\", <RadioButtonDescription />],\n  [\"Counter\", <CounterDescription />],\n  [\"Tooltip\", <TooltipDescription />],\n  [\"Toggle\", <ToggleDescription />],\n  [\"Dropdown\", <DropdownDescription />],\n  [\"Chips\", <ChipsDescription />],\n  [\"AttentionBox\", <AttentionBoxDescription />],\n  [\"AlertBanner\", <AlertBannerDescription />],\n  [\"Toast\", <ToastDescription />],\n  [\"Badge\", <BadgeDescription />],\n  [\"Button\", <ButtonDescription />],\n  [\"Tabs\", <TabsDescription />],\n  [\"Breadcrumbs\", <BreadcrumbsDescription />],\n  [\"Menu\", <MenuDescription />],\n  [\"MultiStepIndicator\", <MultiStepIndicatorDescription />],\n  [\"Tipseen\", <TipseenDescription />],\n  [\"TextField\", <TextFieldDescription />],\n  [\"NumberField\", <NumberFieldDescription />],\n  [\"Search\", <SearchDescription />],\n  [\"Combobox\", <ComboboxDescription />],\n  [\"Avatar\", <AvatarDescription />],\n  [\"AvatarGroup\", <AvatarGroupDescription />],\n  [\"Icon\", <IconDescription />],\n  [\"icons\", <IconsDescription />],\n  [\"Steps\", <StepsDescription />],\n  [\"Spinner\", <SpinnerDescription />],\n  [\"Skeleton\", <SkeletonDescription />],\n  [\"ModalBasicLayout\", <ModalBasicLayoutRelatedComponent />],\n  [\"ModalSideBySideLayout\", <ModalSideBySideLayoutRelatedComponent />],\n  [\"ModalMediaLayout\", <ModalMediaLayoutRelatedComponent />],\n  [\"Slider\", <SliderDescription />],\n  [\"IconButton\", <IconButtonDescription />],\n  [\"MenuButton\", <MenuButtonDescription />],\n  [\"ProgressBar\", <ProgressBarDescription />],\n  [\"EditableHeading\", <EditableHeadingDescription />],\n  [\"EditableText\", <EditableTextDescription />],\n  [\"Heading\", <HeadingDescription />],\n  [\"Clickable\", <ClickableDescription />],\n  [\"List\", <ListDescription />],\n  [\"Flex\", <FlexDescription />],\n  [\"Divider\", <DividerDescription />],\n  [\"DialogContentContainer\", <DialogContentContainerDescription />],\n  [\"Dialog\", <DialogDescription />],\n  [\"Text\", <TextDescription />],\n  [\"Accordion\", <AccordionDescription />],\n  [\"ExpandCollapse\", <ExpandCollapseDescription />],\n  [\"VirtualizedList\", <VirtualizedListDescription />],\n  [\"VirtualizedGrid\", <VirtualizedGridDescription />],\n  [\"ColorPicker\", <ColorPickerDescription />],\n  [\"Box\", <BoxDescription />],\n  [\"Table\", <TableDescription />],\n  [\"MenuGridItem\", <MenuGridItemDescription />]\n] as const;\n\nconst GENERAL_DESCRIPTIONS_ENTRIES = [\n  [\"colors\", <ColorsDescription />],\n  [\"typography\", <TypographyDescription />],\n  [\"shadow\", <ShadowDescription />],\n  [\"spacing\", <SpacingDescription />]\n] as const;\n\nexport type ComponentDescriptionName =\n  | (typeof COMPONENTS_DESCRIPTIONS_ENTRIES)[number][0]\n  | (typeof GENERAL_DESCRIPTIONS_ENTRIES)[number][0];\n\nexport const DESCRIPTION_COMPONENTS_WITHOUT_GENERAL_DESCRIPTION_MAP = new Map<ComponentDescriptionName, JSX.Element>(\n  COMPONENTS_DESCRIPTIONS_ENTRIES\n);\nexport const DESCRIPTION_COMPONENTS_MAP = new Map<ComponentDescriptionName, JSX.Element>([\n  ...COMPONENTS_DESCRIPTIONS_ENTRIES,\n  ...GENERAL_DESCRIPTIONS_ENTRIES\n]);\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/accordion-description/accordion-description.module.scss",
    "content": ".smallWrapper {\n  width: 300px;\n}\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/accordion-description/accordion-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { AccordionItem, Accordion } from \"@vibe/core\";\nimport styles from \"./accordion-description.module.scss\";\n\nexport const AccordionDescription = () => {\n  const component = useMemo(() => {\n    return (\n      <Accordion className={styles.smallWrapper}>\n        <AccordionItem title=\"Notifications\">Notifications content</AccordionItem>\n        <AccordionItem title=\"Settings\">Settings content</AccordionItem>\n      </Accordion>\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Accordion\"\n      href=\"/?path=/docs/components-accordion--docs\"\n      description=\"Accordion is a vertically stacked list of items. Each item can be expanded or collapsed to reveal the content within with that item.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/alert-banner-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { AlertBanner, AlertBannerText } from \"@vibe/core\";\n\nexport const AlertBannerDescription = () => {\n  const component = useMemo(() => {\n    const style = {\n      width: \"90%\"\n    };\n    return (\n      <div style={style}>\n        <AlertBanner>\n          <AlertBannerText text=\"Alert banner message\" />\n        </AlertBanner>\n      </div>\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"AlertBanner\"\n      href=\"/?path=/docs/components-alertbanner--docs\"\n      description=\"Noticed high-signal messages, such as system alerts.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/attention-box-description.jsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { AttentionBox } from \"@vibe/core\";\n\nexport const AttentionBoxDescription = () => {\n  const component = useMemo(() => {\n    return (\n      <div style={{ width: \"90%\" }}>\n        <AttentionBox\n          title=\"Attention box title\"\n          text=\"Studies show that 100% of people who celebrate birthdays, will die.\"\n        />\n      </div>\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"AttentionBox\"\n      href=\"/?path=/docs/components-attentionbox--docs\"\n      description=\"Displays content classification.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/avatar-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport person1 from \"./assets/person1.png\";\nimport { Avatar } from \"@vibe/core\";\n\nexport const AvatarDescription = () => {\n  const component = useMemo(() => <Avatar src={person1} type=\"img\" aria-label=\"Julia Martinez\" />, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Avatar\"\n      href=\"/?path=/docs/components-avatar--docs\"\n      description=\"An avatar is a visual representation of a user or entity.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/avatar-group-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport person1 from \"./assets/person1.png\";\nimport person2 from \"./assets/person2.png\";\nimport person3 from \"./assets/person3.png\";\nimport person4 from \"./assets/person4.png\";\nimport { AvatarGroup, Avatar } from \"@vibe/core\";\n\nexport const AvatarGroupDescription = () => {\n  const component = useMemo(\n    () => (\n      <AvatarGroup size=\"large\" max={3}>\n        <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n        <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n        <Avatar type=\"img\" src={person3} aria-label=\"Marco DiAngelo\" />\n        <Avatar type=\"img\" src={person4} aria-label=\"Liam Caldwell\" />\n        <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n        <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n        <Avatar type=\"img\" src={person3} aria-label=\"Marco DiAngelo\" />\n        <Avatar type=\"img\" src={person4} aria-label=\"Liam Caldwell\" />\n      </AvatarGroup>\n    ),\n    []\n  );\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"AvatarGroup\"\n      href=\"/?path=/docs/components-avatargroup--docs\"\n      description=\"An avatar group displays a number of avatars grouped together in a stack or grid.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/badge-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { Badge, Button } from \"@vibe/core\";\n\nexport const BadgeDescription = () => {\n  const component = useMemo(\n    () => (\n      <Badge>\n        <Button>{\"What's new\"}</Button>\n      </Badge>\n    ),\n    []\n  );\n\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Badge\"\n      href=\"/?path=/docs/components-badge--docs\"\n      description=\"Used to place an indicator / counter on a child component\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/box-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { Box, Text } from \"@vibe/core\";\n\nexport const BoxDescription = () => {\n  const component = useMemo(\n    () => (\n      <div\n        style={{\n          width: \"80%\"\n        }}\n      >\n        <Box border rounded=\"medium\">\n          <Text align=\"center\">Box</Text>\n        </Box>\n      </div>\n    ),\n    []\n  );\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Box\"\n      href=\"/?path=/docs/layout-box--docs\"\n      description=\"Box component serves as a wrapper component.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/breadcrumbs-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { BreadcrumbsBar, BreadcrumbItem } from \"@vibe/core\";\nimport { Group, Board, Workspace } from \"@vibe/icons\";\n\nexport const BreadcrumbsDescription = () => {\n  const component = useMemo(() => {\n    const style = {\n      marginLeft: \"-40px\"\n    };\n    return (\n      <div style={style}>\n        <BreadcrumbsBar type=\"navigation\">\n          <BreadcrumbItem text=\"Workspace\" icon={Workspace} />\n          <BreadcrumbItem text=\"Board\" icon={Board} />\n          <BreadcrumbItem text=\"Group\" icon={Group} />\n        </BreadcrumbsBar>\n      </div>\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Breadcrumbs\"\n      href=\"/?path=/docs/components-breadcrumbsbar-breadcrumbsbar--docs\"\n      description=\"Helps users to keep track and maintain awareness of their location.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/button-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { Button } from \"@vibe/core\";\n\nexport const ButtonDescription = () => {\n  const component = useMemo(() => <Button size=\"large\">Get started</Button>, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Button\"\n      href=\"/?path=/docs/components-button--docs\"\n      description=\"Allow users take actions with a single click.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/button-group-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { ButtonGroup } from \"@vibe/core\";\n\nexport const ButtonGroupDescription = () => {\n  const component = useMemo(\n    () => (\n      <ButtonGroup\n        groupAriaLabel=\"button group aria label\"\n        value={1}\n        options={[\n          { value: 1, text: \"Alpha\" },\n          { value: 2, text: \"Beta\" },\n          { value: 3, text: \"Delta\" }\n        ]}\n      />\n    ),\n    []\n  );\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"ButtonGroup\"\n      href=\"/?path=/docs/components-buttongroup--docs\"\n      description=\"Used to group related options.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/checkbox-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { Checkbox } from \"@vibe/core\";\n\nexport const CheckboxDescription = () => {\n  const component = useMemo(() => <Checkbox label=\"Selected\" checked />, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Checkbox\"\n      href=\"/?path=/docs/components-checkbox--docs\"\n      description=\"Allow users to select one or more items from a set of options.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/chips-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { Chips } from \"@vibe/core\";\n\nexport const ChipsDescription = () => {\n  const component = useMemo(() => <Chips label=\"This is a chip\" readOnly />, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Chip\"\n      href=\"/?path=/docs/components-chips--docs\"\n      description=\"Compact elements that represent an input, attribute, or action.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/clickable-description/clickable-description.stories.module.scss",
    "content": ".clickable-description {\n  padding: var(--sb-spacing-small);\n  border-radius: var(--sb-border-radius-small);\n  background-color: var(--sb-primary-selected-color);\n  color: var(--sb-primary-text-color);\n  width: 40%;\n}\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/clickable-description/clickable-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { Clickable, Text } from \"@vibe/core\";\nimport classes from \"./clickable-description.stories.module.scss\";\n\nexport const ClickableDescription = () => {\n  const component = useMemo(() => {\n    return (\n      <Clickable className={classes[\"clickable-description\"]} onClick={() => alert(\"clicked\")}>\n        <Text ellipsis={false}>Button with custom appearance</Text>\n      </Clickable>\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Clickable\"\n      href=\"/?path=/docs/accessibility-clickable--docs\"\n      description=\"An accessibility helper component which simulates a button behaviour on non button elements.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/color-picker-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { ColorPicker } from \"@vibe/core\";\n\nconst COLORS_LIST = [\n  \"grass_green\",\n  \"done-green\",\n  \"bright-green\",\n  \"saladish\",\n  \"egg_yolk\",\n  \"working_orange\",\n  \"dark-orange\",\n  \"peach\",\n  \"sunset\",\n  \"stuck-red\",\n  \"dark-red\",\n  \"sofia_pink\",\n  \"lipstick\",\n  \"bubble\",\n  \"purple\"\n];\n\nexport const ColorPickerDescription = () => {\n  const component = useMemo(() => {\n    return (\n      <div>\n        <ColorPicker colorSize=\"small\" colorsList={COLORS_LIST} forceUseRawColorList />\n      </div>\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"ColorPicker\"\n      href=\"/?path=/docs/components-colorpicker--docs\"\n      description=\"ColorPicker is our component for selecting our content colors.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/colors-description/colors-description.scss",
    "content": ".monday-storybook-colors-description {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  &_color-block {\n    height: 48px;\n    width: 48px;\n\n    &:first-child {\n      background-color: var(--sb-primary-color);\n    }\n\n    &:nth-child(2) {\n      background-color: var(--sb-primary-hover-color);\n    }\n\n    &:last-child {\n      background-color: var(--sb-primary-selected-color);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/colors-description/colors-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport \"./colors-description.scss\";\n\nexport const ColorsDescription = () => {\n  const component = useMemo(\n    () => (\n      <div className=\"monday-storybook-colors-description\">\n        <div className=\"monday-storybook-colors-description_color-block\" />\n        <div className=\"monday-storybook-colors-description_color-block\" />\n        <div className=\"monday-storybook-colors-description_color-block\" />\n      </div>\n    ),\n    []\n  );\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Colors\"\n      href=\"/?path=/docs/foundations-colors--docs\"\n      description=\"Ensure accessible text, and distinguish UI elements and surfaces from one another.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/combobox-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { DialogContentContainer, Combobox } from \"@vibe/core\";\n\nexport const ComboboxDescription = () => {\n  const component = useMemo(() => {\n    const style = {\n      width: \"80%\",\n      height: \"150px\"\n    };\n    const option = [\n      { id: \"1\", label: \"Option 1\" },\n      { id: \"2\", label: \"Option 2\" },\n      { id: \"3\", label: \"Option 3\" }\n    ];\n    return (\n      <DialogContentContainer style={style}>\n        <Combobox placeholder=\"Placeholder text here\" options={option} size=\"small\" optionLineHeight={28} />\n      </DialogContentContainer>\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Combobox\"\n      href=\"/?path=/docs/components-combobox--docs\"\n      description=\"Combobox allowing users to filter longer lists to only the selections matching a query.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/counter-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { Counter } from \"@vibe/core\";\n\nexport const CounterDescription = () => {\n  const component = useMemo(() => <Counter count={5} />, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Counter\"\n      href=\"/?path=/docs/components-counter--docs\"\n      description=\"Show the count of some adjacent data. \"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/dialog-content-container.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { DialogContentContainer, Text } from \"@vibe/core\";\n\nexport const DialogContentContainerDescription = () => {\n  const component = useMemo(() => {\n    return (\n      <div style={{ width: \"200px\" }}>\n        <DialogContentContainer>\n          <Text ellipsis={false}>A content section within an elevated dialog content container</Text>\n        </DialogContentContainer>\n      </div>\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"DialogContentContainer\"\n      href=\"/?path=/docs/components-dialogcontentcontainer--docs\"\n      description=\"An Elevation container, use to elevate content section\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/dialog-description/dialog-description.module.scss",
    "content": ".container {\n  width: 100%;\n  padding-left: var(--space-24);\n}\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/dialog-description/dialog-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { Dialog, DialogContentContainer, IconButton, Flex, Skeleton } from \"@vibe/core\";\nimport { shift } from \"@floating-ui/react-dom\";\nimport { Info } from \"@vibe/icons\";\nimport styles from \"./dialog-description.module.scss\";\n\nexport const DialogDescription = () => {\n  const component = useMemo(() => {\n    return (\n      <div className={styles.container}>\n        <Dialog\n          middleware={[shift({ mainAxis: false })]}\n          shouldShowOnMount\n          showTrigger={[\"click\"]}\n          hideTrigger={[\"click\"]}\n          position=\"right\"\n          moveBy={{ main: 2, secondary: 0 }}\n          content={\n            <DialogContentContainer>\n              <Flex\n                direction=\"column\"\n                align=\"start\"\n                gap=\"small\"\n                style={{ width: \"150px\", padding: \"var(--sb-spacing-small)\" }}\n              >\n                <Skeleton type=\"text\" size=\"h1\" fullWidth />\n                {Array.from({ length: 3 }, (_value, index: number) => (\n                  <Flex key={index} gap=\"small\" style={{ width: \"100%\" }}>\n                    <Skeleton type=\"circle\" width={20} height={20} />\n                    <Skeleton type=\"text\" size=\"small\" fullWidth />\n                  </Flex>\n                ))}\n              </Flex>\n            </DialogContentContainer>\n          }\n        >\n          <IconButton icon={Info} active kind=\"secondary\" />\n        </Dialog>\n      </div>\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Dialog\"\n      href=\"/?path=/docs/components-dialog--docs\"\n      description=\"The dialog component's purpose is to position a popup component nearby another element, such as any kind of a button.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/divider.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { Divider, Menu, MenuItem } from \"@vibe/core\";\nimport { Settings, Bolt } from \"@vibe/icons\";\n\nexport const DividerDescription = () => {\n  const component = useMemo(() => {\n    return (\n      <div style={{ width: \"220px\" }}>\n        <Menu>\n          <MenuItem title=\"My Item\" icon={Settings} type=\"svg\" iconBackgroundColor=\"var(--sb-negative-color)\" />\n        </Menu>\n        <Divider />\n        <Menu>\n          <MenuItem title=\"My Item\" icon={Bolt} type=\"svg\" iconBackgroundColor=\"var(--sb-color-purple)\" />\n        </Menu>\n      </div>\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Divider\"\n      href=\"/?path=/docs/components-divider--docs\"\n      description=\"Divider create separation between two UI elements\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/dropdown-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { Dropdown } from \"@vibe/core\";\n\nexport const DropdownDescription = () => {\n  const component = useMemo(() => {\n    const style = {\n      width: \"60%\"\n    };\n    const options = [\n      { value: \"1\", label: \"Option 1\" },\n      { value: \"2\", label: \"Option 2\" },\n      { value: \"3\", label: \"Option 3\" }\n    ];\n    return (\n      <div style={style}>\n        <Dropdown placeholder=\"Placeholder text here\" size=\"medium\" options={options} />\n      </div>\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      href=\"/?path=/docs/components-dropdown--docs\"\n      title=\"Dropdown\"\n      description=\"Dropdown present a list of options from which a user can select one or several.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/editable-heading-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { EditableHeading } from \"@vibe/core\";\nimport { Flex } from \"@vibe/core\";\n\nexport const EditableHeadingDescription = () => {\n  const component = useMemo(() => {\n    return (\n      <Flex justify=\"center\" style={{ width: \"100%\" }}>\n        <EditableHeading value=\"Hello world\" />\n      </Flex>\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"EditableHeading\"\n      href=\"/?path=/docs/components-editableheading--docs\"\n      description=\"An extension of Heading component, it allows built in editing capabilities.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/editable-text-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { EditableText } from \"@vibe/core\";\nimport { Flex } from \"@vibe/core\";\n\nexport const EditableTextDescription = () => {\n  const component = useMemo(() => {\n    return (\n      <Flex justify=\"center\" style={{ width: \"100%\" }}>\n        <EditableText value=\"Hello world\" type=\"text1\" />\n      </Flex>\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"EditableText\"\n      href=\"/?path=/docs/components-EditableText--docs\"\n      description=\"An extension of the Text component with built in editing capabilities.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/expand-collapse-description/expand-collapse-description.module.scss",
    "content": ".expandCollapseDescription {\n  width: 90%;\n}\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/expand-collapse-description/expand-collapse-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { ExpandCollapse, Text, Icon } from \"@vibe/core\";\nimport { Robot } from \"@vibe/icons\";\nimport styles from \"./expand-collapse-description.module.scss\";\n\nexport const ExpandCollapseDescription = () => {\n  const component = useMemo(() => {\n    return (\n      <ExpandCollapse title=\"ExpandCollapse\" className={styles.expandCollapseDescription}>\n        <Text maxLines={2}>Insert any component that you want, here is a robot for you</Text>\n        <Icon type=\"svg\" icon={Robot} size={40} />\n      </ExpandCollapse>\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"ExpandCollapse\"\n      href=\"/?path=/docs/components-expandcollapse--docs\"\n      description=\"ExpandCollapse is a component that allows you to hide and show content.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/flex-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { Flex, Box } from \"@vibe/core\";\n\nexport const FlexDescription = () => {\n  const component = useMemo(() => {\n    return (\n      <Flex gap=\"small\">\n        <Box padding=\"large\" border />\n        <Box padding=\"large\" border />\n        <Box padding=\"large\" border />\n      </Flex>\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Flex\"\n      href=\"/?path=/docs/layout-flex--docs\"\n      description=\"Position group of sub-elements in one dimension, horizontal or vertical\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/heading-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { Heading } from \"@vibe/core\";\n\nexport const HeadingDescription = () => {\n  const component = useMemo(() => {\n    return (\n      <div>\n        <Heading type=\"h2\">Hello world</Heading>\n      </div>\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Heading\"\n      href=\"/?path=/docs/text-heading--docs\"\n      description=\"Heading components are used to title any page sections or sub-sections in top-level page sections.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/icon-button-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { IconButton } from \"@vibe/core\";\nimport { Bolt } from \"@vibe/icons\";\n\nexport const IconButtonDescription = () => {\n  const component = useMemo(() => <IconButton icon={Bolt} />, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"IconButton\"\n      href=\"/?path=/docs/components-iconbutton--docs\"\n      description=\"When you want to have a button with just an Icon\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/icon-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { Bolt } from \"@vibe/icons\";\nimport { Icon } from \"@vibe/core\";\n\nexport const IconDescription = () => {\n  const component = useMemo(() => {\n    return <Icon icon={Bolt} size={36} />;\n  }, []);\n\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Icon\"\n      href=\"/?path=/docs/components-icon--docs\"\n      description=\"When you want to display an icon.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/icons-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { Update, Locked, Lines } from \"@vibe/icons\";\nimport { Icon } from \"@vibe/core\";\n\nexport const IconsDescription = () => {\n  const component = useMemo(() => {\n    const style = {\n      display: \"flex\",\n      gap: \"16px\"\n    };\n    return (\n      <div style={style}>\n        <Icon icon={Update} size={36} />\n        <Icon icon={Lines} size={36} />\n        <Icon icon={Locked} size={36} />\n      </div>\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Icons\"\n      href=\"/?path=/story/components-icon--icons-list-story\"\n      description=\"Catalog of publicly avaliable icons.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/label-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { Label } from \"@vibe/core\";\n\nexport const LabelDescription = () => {\n  const component = useMemo(() => <Label text=\"New\" />, []);\n  return (\n    <RelatedComponent\n      component={component}\n      href=\"/?path=/docs/components-label--docs\"\n      title=\"Label\"\n      description=\"Offers content classification.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/linear-progress-bar-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { ProgressBar } from \"@vibe/core\";\n\nexport const ProgressBarDescription = () => {\n  const component = useMemo(() => {\n    const style = {\n      width: \"80%\"\n    };\n    return (\n      <div style={style}>\n        <ProgressBar value={50} />\n      </div>\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"ProgressBar\"\n      href=\"/?path=/docs/components-linearprogressbar--docs\"\n      description=\"Progress bars show continuous progress through a process, such as a percentage value.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/link-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { Link } from \"@vibe/core\";\nimport { ExternalPage } from \"@vibe/icons\";\n\nexport const LinkDescription = () => {\n  const component = useMemo(() => <Link text=\"Read more\" icon={ExternalPage} iconPosition=\"start\" />, []);\n  return (\n    <RelatedComponent\n      component={component}\n      href=\"/?path=/docs/components-link--docs\"\n      title=\"Link\"\n      description=\"Actionable text component with connection to another web pages.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/list-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { DialogContentContainer, List, ListItem } from \"@vibe/core\";\n\nexport const ListDescription = () => {\n  const component = useMemo(() => {\n    return (\n      <div>\n        <DialogContentContainer>\n          <List>\n            <ListItem>List item 1</ListItem>\n            <ListItem>List item 2</ListItem>\n            <ListItem>List item 3</ListItem>\n          </List>\n        </DialogContentContainer>\n      </div>\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"List\"\n      href=\"/?path=/docs/components-list-list--docs\"\n      description=\"Lists is a group of actionable items containing primary and supplemental actions, which are represented by icons and text.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/menu-button-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { MenuButton, Menu, MenuItem } from \"@vibe/core\";\nimport { Sun, Moon, Favorite } from \"@vibe/icons\";\n\nexport const MenuButtonDescription = () => {\n  const component = useMemo(\n    () => (\n      <MenuButton>\n        <Menu id=\"menu\" size=\"medium\">\n          <MenuItem icon={Sun} type=\"svg\" title=\"The sun\" />\n          <MenuItem icon={Moon} type=\"svg\" title=\"The moon\" />\n          <MenuItem icon={Favorite} type=\"svg\" title=\"And the stars\" />\n        </Menu>\n      </MenuButton>\n    ),\n    []\n  );\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"MenuButton\"\n      href=\"/?path=/docs/components-menubutton--docs\"\n      description=\"A component to open content next to another component\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/menu-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { DialogContentContainer, Menu, MenuItem } from \"@vibe/core\";\nimport { Email, Delete, Info } from \"@vibe/icons\";\n\nexport const MenuDescription = () => {\n  const component = useMemo(() => {\n    return (\n      <div>\n        <DialogContentContainer>\n          <Menu size=\"small\">\n            <MenuItem title=\"Send\" icon={Email} />\n            <MenuItem title=\"Delete\" icon={Delete} />\n            <MenuItem title=\"More info\" icon={Info} />\n          </Menu>\n        </DialogContentContainer>\n      </div>\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Menu\"\n      href=\"/?path=/docs/components-menu-menu--docs\"\n      description=\"Displays information related to an element over it.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/menu-grid-item-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { DummyNavigableGrid } from \"../../../pages/components/GridKeyboardNavigationContext/useGridKeyboardNavigationContext.stories.helpers\";\nimport { MenuGridItem } from \"@vibe/core\";\n\nexport const MenuGridItemDescription = () => {\n  const component = useMemo(() => {\n    return (\n      <MenuGridItem>\n        <DummyNavigableGrid itemsCount={8} numberOfItemsInLine={3} withoutBorder />\n      </MenuGridItem>\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"MenuGridItem\"\n      href=\"/?path=/docs/components-menu-menugriditem--docs\"\n      description=\"MenuGridItem can be used to place a grid-like, keyboard navigable container, inside a Menu.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/modal/ModalBasicLayoutRelatedComponent.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport relatedComponentImage from \"./assets/basic-related-component.png\";\n\nexport const ModalBasicLayoutRelatedComponent = () => {\n  const component = useMemo(() => {\n    return (\n      <img\n        src={relatedComponentImage}\n        style={{ maxHeight: \"100%\", maxWidth: \"100%\" }}\n        alt=\"modal with basic layout variation\"\n      />\n    );\n  }, []);\n\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Basic modal\"\n      href=\"/?path=/docs/components-modal-new-basic-modal\"\n      description=\"Modal for straightforward tasks, helps users focus on a single task without distractions.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/modal/ModalMediaLayoutRelatedComponent.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport relatedComponentImage from \"./assets/media-related-component.png\";\n\nexport const ModalMediaLayoutRelatedComponent = () => {\n  const component = useMemo(() => {\n    return (\n      <img\n        src={relatedComponentImage}\n        style={{ maxHeight: \"100%\", maxWidth: \"100%\" }}\n        alt=\"modal with media layout variation\"\n      />\n    );\n  }, []);\n\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Media modal\"\n      href=\"/?path=/docs/components-modal-new-media-modal\"\n      description=\"Modal with highlighted media section, for catching the user’s attention.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/modal/ModalSideBySideLayoutRelatedComponent.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport relatedComponentImage from \"./assets/sbs-related-component.png\";\n\nexport const ModalSideBySideLayoutRelatedComponent = () => {\n  const component = useMemo(() => {\n    return (\n      <img\n        src={relatedComponentImage}\n        style={{ maxHeight: \"100%\", maxWidth: \"100%\" }}\n        alt=\"modal with side by side layout variation\"\n      />\n    );\n  }, []);\n\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Side by side modal\"\n      href=\"/?path=/docs/components-modal-new-side-by-side-modal\"\n      description=\"Two-section modal layout, ideal for referencing visuals alongside text.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/multi-step-indicator-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { MultiStepIndicator, type Step } from \"@vibe/core\";\n\nexport const MultiStepIndicatorDescription = () => {\n  const component = useMemo(() => {\n    const style = {\n      marginLeft: \"-40px\"\n    };\n    const steps = [\n      {\n        status: \"active\",\n        titleText: \"1st\",\n        subtitleText: \"\"\n      },\n      {\n        status: \"pending\",\n        titleText: \"2nd\",\n        subtitleText: \"\"\n      },\n      {\n        status: \"pending\",\n        titleText: \"3rd\",\n        subtitleText: \"\"\n      }\n    ];\n    return (\n      <div style={style}>\n        <MultiStepIndicator textPlacement=\"vertical\" steps={steps as Step[]} />\n      </div>\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"MultiStepIndicator\"\n      href=\"/?path=/docs/components-multistepindicator--docs\"\n      description=\"Shows information related to a component when a user hovers over it.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/number-field-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { TextBig } from \"@vibe/icons\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { NumberField } from \"@vibe/core\";\n\nexport const NumberFieldDescription = () => {\n  const component = useMemo(() => {\n    return (\n      <div style={{ width: \"80%\" }}>\n        <NumberField leftIcon={TextBig} size=\"large\" value={42} onChange={() => {}} />\n      </div>\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"NumberField\"\n      href=\"/?path=/docs/components-numberfield--docs\"\n      description=\"Allows users to input numeric values with controls for increment and decrement.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/radio-button-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { RadioButton } from \"@vibe/core\";\n\nexport const RadioButtonDescription = () => {\n  const component = useMemo(() => <RadioButton text=\"Selection\" checked />, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"RadioButton\"\n      href=\"/?path=/docs/components-radiobutton--docs\"\n      description=\"Allow for a single option to be selected from a visible list.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/search-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { Search } from \"@vibe/core\";\n\nexport const SearchDescription = () => {\n  const component = useMemo(() => {\n    const style = {\n      width: \"80%\"\n    };\n    return (\n      <div style={style}>\n        <Search placeholder=\"Placeholder text here\" size=\"large\" />\n      </div>\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Search\"\n      href=\"/?path=/docs/components-search--docs\"\n      description=\"Displays content classification.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/shadow-description/shadow-description.module.scss",
    "content": "@mixin shadow-box {\n  width: 40px;\n  height: 40px;\n  background-color: var(--sb-primary-background-color);\n  margin: 0 var(--sb-spacing-small);\n}\n\n.small-shadow {\n  box-shadow: var(--box-shadow-small);\n  @include shadow-box;\n}\n.medium-shadow {\n  box-shadow: var(--box-shadow-medium);\n  @include shadow-box;\n}\n.large-shadow {\n  box-shadow: var(--box-shadow-large);\n  @include shadow-box;\n}\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/shadow-description/shadow-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport classes from \"./shadow-description.module.scss\";\n\nexport const ShadowDescription = () => {\n  const component = useMemo(() => {\n    return [\n      <div key=\"small\" className={classes[\"small-shadow\"]} />,\n      <div key=\"md\" className={classes[\"medium-shadow\"]} />,\n      <div key=\"large\" className={classes[\"large-shadow\"]} />\n    ];\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Shadow\"\n      href=\"/?path=/docs/foundations-shadow--docs\"\n      description=\"Shadows used to create the scenes of hierarchy and elevation withing the UI and layout.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/skeleton-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { Skeleton } from \"@vibe/core\";\n\nexport const SkeletonDescription = () => {\n  const component = useMemo(() => <Skeleton type=\"circle\" />, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Skeleton\"\n      href=\"/?path=/docs/components-skeleton--docs\"\n      description=\"Skeleton loading componet used to indicate content and ui loading.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/slider-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { Slider } from \"@vibe/core\";\n\nexport const SliderDescription = () => {\n  const component = useMemo(() => <Slider />, []);\n\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Slider\"\n      href=\"/?path=/docs/components-slider--docs\"\n      description=\"Displays a slider bar with range selection\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/spacing-description/spacing-description.module.scss",
    "content": ".spacing-description-visual-element {\n  display: flex;\n  justify-content: center;\n  align-items: flex-end;\n\n  & > * {\n    margin: var(--sb-spacing-medium);\n    width: 40px;\n    background-color: var(--sb-negative-color-selected);\n  }\n\n  .small-spacing-visual-element {\n    height: var(--sb-spacing-small);\n  }\n\n  .medium-spacing-visual-element {\n    height: var(--sb-spacing-medium);\n  }\n\n  .large-spacing-visual-element {\n    height: var(--sb-spacing-large);\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/spacing-description/spacing-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport classes from \"./spacing-description.module.scss\";\n\nexport const SpacingDescription = () => {\n  const component = useMemo(\n    () => (\n      <div className={classes[\"spacing-description-visual-element\"]}>\n        <div className={classes[\"small-spacing-visual-element\"]} />\n        <div className={classes[\"medium-spacing-visual-element\"]} />\n        <div className={classes[\"large-spacing-visual-element\"]} />\n      </div>\n    ),\n    []\n  );\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Spacing\"\n      href=\"/?path=/docs/foundations-spacing--docs\"\n      description=\"Spacing creates relationships and hierarchy withing the visual controls.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/spinner-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { Loader } from \"@vibe/core\";\n\nexport const SpinnerDescription = () => {\n  const component = useMemo(() => {\n    const style = {\n      width: \"10%\",\n      height: \"10%\"\n    };\n    return (\n      <div style={style}>\n        <Loader />\n      </div>\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Spinner\"\n      href=\"/?path=/docs/components-loader--docs\"\n      description=\"Displays information related to an element over it.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/split-button-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { SplitButton, SplitButtonMenu, MenuItem } from \"@vibe/core\";\nimport { Check, Announcement } from \"@vibe/icons\";\n\nexport const SplitButtonDescription = () => {\n  const component = useMemo(\n    () => (\n      <SplitButton\n        secondaryDialogContent={\n          <SplitButtonMenu id=\"split-menu\">\n            <MenuItem icon={Check} title=\"Hey\" />\n            <MenuItem icon={Announcement} title=\"There\" />\n          </SplitButtonMenu>\n        }\n      >\n        Button\n      </SplitButton>\n    ),\n    []\n  );\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"SplitButton\"\n      href=\"/?path=/docs/components-splitbutton--docs\"\n      description=\"Dual-function menu button offers a default action and a secondary action\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/steps-description.tsx",
    "content": "import React, { useMemo, useState, useCallback } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { Steps } from \"@vibe/core\";\n\nexport const StepsDescription = () => {\n  const [activeStepIndex, setActiveStepIndex] = useState(2);\n\n  const stepPrev = useCallback(() => {\n    setActiveStepIndex(prevState => prevState - 1);\n  }, []);\n\n  const stepNext = useCallback(() => {\n    setActiveStepIndex(prevState => prevState + 1);\n  }, []);\n\n  const onChangeActiveStep = useCallback((_e: React.MouseEvent, stepIndex: number) => {\n    setActiveStepIndex(stepIndex);\n  }, []);\n\n  const component = useMemo(() => {\n    const style = {\n      marginLeft: \"-10px\"\n    };\n\n    const steps = [\n      <div key=\"step-1\" />,\n      <div key=\"step-2\" />,\n      <div key=\"step-3\" />,\n      <div key=\"step-4\" />,\n      <div key=\"step-5\" />\n    ];\n\n    return (\n      <div style={style}>\n        <Steps\n          steps={steps}\n          activeStepIndex={activeStepIndex}\n          onChangeActiveStep={onChangeActiveStep}\n          backButtonProps={{\n            onClick: stepPrev\n          }}\n          nextButtonProps={{\n            onClick: stepNext\n          }}\n        />\n      </div>\n    );\n  }, [activeStepIndex, stepPrev, stepNext, onChangeActiveStep]);\n\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Steps\"\n      href=\"/?path=/docs/components-steps--docs\"\n      description=\"Steps display progress through a sequence of logical and numbered steps. They may also be used for navigation.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/tab-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { Tab, TabList } from \"@vibe/core\";\n\nexport const TabsDescription = () => {\n  const component = useMemo(() => {\n    return (\n      <div>\n        <TabList>\n          <Tab>Tab</Tab>\n          <Tab>Tab</Tab>\n          <Tab>Tab</Tab>\n        </TabList>\n      </div>\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Tabs\"\n      href=\"/?path=/docs/components-tabs-tabs--docs\"\n      description=\"Allow users to navigate between related views of content.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/table-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { Calendar, Doc, Status } from \"@vibe/icons\";\nimport { Label, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableRow } from \"@vibe/core\";\nimport {\n  statusColumnToLabelColor,\n  TableEmptyState,\n  TableErrorState\n} from \"../../../pages/components/Table/Table.stories.helpers\";\n\nconst tableColumns = [\n  {\n    id: \"sentOn\",\n    title: \"Sent\",\n    icon: Calendar,\n    width: 75\n  },\n  {\n    id: \"subject\",\n    title: \"Subject\",\n    icon: Doc\n  },\n  {\n    id: \"status\",\n    title: \"Status\",\n    icon: Status,\n    width: 120\n  }\n];\n\nconst tableData = [\n  {\n    id: \"1\",\n    sentOn: \"Apr 22\",\n    subject: \"Limited time offer: AP Process\",\n    sentBy: \"John Doe\",\n    status: \"In progress\"\n  },\n  {\n    id: \"2\",\n    sentOn: \"Apr 22\",\n    subject: \"Action required: Update your AP\",\n    sentBy: \"Jane Doe\",\n    status: \"Queued\"\n  },\n  {\n    id: \"3\",\n    sentOn: \"Apr 22\",\n    subject: \"Limited time offer: AP Process\",\n    sentBy: \"Peter Smith\",\n    status: \"Sent\"\n  }\n];\n\nexport const TableDescription = () => {\n  const component = useMemo(\n    () => (\n      <div style={{ width: \"95%\" }}>\n        <Table errorState={<TableErrorState />} emptyState={<TableEmptyState />} columns={tableColumns}>\n          <TableHeader>\n            {tableColumns.map(cell => (\n              <TableHeaderCell key={cell.id} {...cell} />\n            ))}\n          </TableHeader>\n          <TableBody>\n            {tableData.map(rowItem => (\n              <TableRow key={rowItem.id}>\n                <TableCell>{rowItem.sentOn}</TableCell>\n                <TableCell>{rowItem.subject}</TableCell>\n                <TableCell>\n                  <Label\n                    text={rowItem.status}\n                    color={statusColumnToLabelColor[rowItem.status as keyof typeof statusColumnToLabelColor]}\n                  />\n                </TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n    ),\n    []\n  );\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Table\"\n      href=\"/?path=/docs/components-table--docs\"\n      description=\"Tables are used to organize data, making it easier to understand.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/text-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { Text } from \"@vibe/core\";\n\nexport const TextDescription = () => {\n  const component = useMemo(() => {\n    return (\n      <div>\n        <Text>lorem ipsum dolor sit amet</Text>\n      </div>\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Text\"\n      href=\"/?path=/docs/text-text--docs\"\n      description=\"The text component serves as a wrapper for applying typography styles to the text it contains.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/text-field-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { TextField } from \"@vibe/core\";\n\nexport const TextFieldDescription = () => {\n  const component = useMemo(() => {\n    const style = {\n      width: \"80%\"\n    };\n    return (\n      <div style={style}>\n        <TextField placeholder=\"Placeholder text here\" size=\"large\" />\n      </div>\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"TextField\"\n      href=\"/?path=/docs/components-textfield--docs\"\n      description=\"Allows users take actions with a single click.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/tipseen-description.tsx",
    "content": "import React, { useMemo, useState, useCallback } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { Tipseen, TipseenWizard } from \"@vibe/core\";\nimport { shift, flip } from \"@floating-ui/react-dom\";\n\nexport const TipseenDescription = () => {\n  const [activeStepIndex, setActiveStepIndex] = useState(2);\n\n  const onChangeActiveStep = useCallback((_e: React.MouseEvent, stepIndex: number) => {\n    setActiveStepIndex(stepIndex);\n  }, []);\n\n  const component = useMemo(() => {\n    const style = {\n      width: \"95%\",\n      margin: \"0 -10px\",\n      display: \"flex\",\n      alignItems: \"flex-start\"\n    };\n    const content = [\n      <div key=\"tipseen-key-1\">Popover message will appear here loremipsum dolor samet…</div>,\n      <div key=\"tipseen-key-2\">Popover message will appear here loremipsum dolor samet…</div>,\n      <div key=\"tipseen-key-3\">Popover message will appear here loremipsum dolor samet…</div>,\n      <div key=\"tipseen-key-4\">Popover message will appear here loremipsum dolor samet…</div>,\n      <div key=\"tipseen-key-5\">Popover message will appear here loremipsum dolor samet…</div>\n    ];\n    return (\n      <div style={style}>\n        <Tipseen\n          middleware={[shift({ mainAxis: false }), flip({ fallbackPlacements: [] })]}\n          width={280}\n          position=\"right\"\n          content={\n            <TipseenWizard\n              title=\"This is a title\"\n              steps={content}\n              activeStepIndex={activeStepIndex}\n              onChangeActiveStep={onChangeActiveStep}\n              onFinish={() => {}}\n            />\n          }\n        >\n          <div />\n        </Tipseen>\n      </div>\n    );\n  }, [activeStepIndex, onChangeActiveStep]);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Tipseen\"\n      href=\"/?path=/docs/components-tipseen--docs\"\n      description=\"Displays information related to an element over it.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/toast-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { Toast } from \"@vibe/core\";\n\nexport const ToastDescription = () => {\n  const component = useMemo(() => {\n    return (\n      <div\n        style={{\n          width: \"100%\",\n          display: \"flex\",\n          justifyContent: \"center\",\n          padding: \"40px\",\n          position: \"static\",\n          transform: \"translate(0, 0)\",\n          marginRight: \"auto\",\n          marginLeft: \"auto\"\n        }}\n      >\n        <Toast open actions={[{ type: \"button\", content: \"Button\" }]}>\n          Message\n        </Toast>\n      </div>\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Toast\"\n      href=\"/?path=/docs/components-toast--docs\"\n      description=\"A message object that presents timely information or feedback for the user.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/toggle-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { Toggle } from \"@vibe/core\";\n\nexport const ToggleDescription = () => {\n  const component = useMemo(() => <Toggle />, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Toggle\"\n      href=\"/?path=/docs/components-toggle--docs\"\n      description=\"Allow users to turn an individual option on or off.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/tooltip-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { Tooltip } from \"@vibe/core\";\n\nexport const TooltipDescription = () => {\n  const component = useMemo(() => {\n    const style = {\n      marginTop: \"40px\"\n    };\n    return (\n      <div style={style}>\n        <Tooltip shouldShowOnMount content=\"Text\" open>\n          <div />\n        </Tooltip>\n      </div>\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Tooltip\"\n      href=\"/?path=/docs/components-tooltip--docs\"\n      description=\"Displays information related to an element over it.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/typography-description/typography-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { Flex, Heading } from \"@vibe/core\";\n\nexport const TypographyDescription = () => {\n  const component = useMemo(() => {\n    return (\n      <Flex gap=\"small\">\n        <Heading type=\"h1\" ellipsis={false}>\n          H1\n        </Heading>\n        <Heading type=\"h2\" ellipsis={false}>\n          H2\n        </Heading>\n        <Heading type=\"h3\" ellipsis={false}>\n          H3\n        </Heading>\n      </Flex>\n    );\n  }, []);\n\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"Typography\"\n      href=\"/?path=/docs/foundations-typography--docs\"\n      description=\"Typography expresses hierarchy and brand presence.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/virtualized-grid-description/virtualized-grid-description.jsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { VirtualizedGrid } from \"@vibe/core\";\nimport {\n  generateItems,\n  itemRenderer\n} from \"../../../../pages/components/VirtualizedGrid/VirtualizedGrid.stories.helpers\";\nimport styles from \"./virtualizedGrid.module.scss\";\n\nexport const VirtualizedGridDescription = () => {\n  const component = useMemo(() => {\n    return (\n      <div className={styles.virtualizedGridItem}>\n        <div className={styles.virtualizedGridItemChild}>\n          <VirtualizedGrid id={\"id\"} items={generateItems(50, 100, 50)} itemRenderer={itemRenderer} />\n        </div>\n      </div>\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"VirtualizedGrid\"\n      href=\"/?path=/docs/components-virtualizedgrid--docs\"\n      description=\"VirtualizedGrid is a component which only renders visible grid items, it is a logic component and doesn't change and look and feel.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/virtualized-grid-description/virtualizedGrid.module.scss",
    "content": ".virtualizedGridItem {\n  display: flex;\n  align-items: center;\n  overflow-x: hidden;\n  width: 230px;\n  height: 100%;\n}\n\n.virtualizedGridItemChild {\n  width: inherit;\n  height: inherit;\n}\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/virtualized-list-description/virtualized-list-description.jsx",
    "content": "import React, { useMemo } from \"react\";\nimport { RelatedComponent } from \"vibe-storybook-components\";\nimport { VirtualizedList, Text } from \"@vibe/core\";\nimport { generateItems } from \"../../../../pages/components/VirtualizedList/VirtualizedList.stories.helpers\";\nimport styles from \"./virtualized-list.module.scss\";\n\nexport const VirtualizedListDescription = () => {\n  const component = useMemo(() => {\n    const itemRenderer = (item, index, style) => {\n      const backgroundColor = index % 2 === 0 ? \"#e1e1e1\" : \"#f8f8f0\";\n      return (\n        <div key={index} style={style}>\n          <Text\n            className={styles.virtualizedListItem}\n            color=\"fixedDark\"\n            style={{\n              backgroundColor,\n              height: item.height\n            }}\n          >\n            {item.value}\n          </Text>\n        </div>\n      );\n    };\n\n    return (\n      <VirtualizedList\n        items={generateItems(30, 1000, \"vertical\")}\n        itemRenderer={itemRenderer}\n        getItemSize={item => item.height}\n      />\n    );\n  }, []);\n  return (\n    <RelatedComponent\n      component={component}\n      title=\"VirtualizedList\"\n      href=\"/?path=/docs/components-virtualizedlist--docs\"\n      description=\"VirtualizedList is a component which only renders visible list items, it is a logic component and doesn't change and look and feel.\"\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/descriptions/virtualized-list-description/virtualized-list.module.scss",
    "content": ".virtualizedListItem {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n"
  },
  {
    "path": "packages/docs/src/layout/related-components/related-components-decorator.jsx",
    "content": "import React from \"react\";\nimport { RelatedComponents } from \"vibe-storybook-components\";\nimport { DESCRIPTION_COMPONENTS_MAP } from \"./component-description-map\";\n\nexport const RelatedComponentsDecorator = ({ componentsNames = [], linkTarget }) => {\n  return (\n    <RelatedComponents\n      componentsNames={componentsNames}\n      descriptionComponentsMap={DESCRIPTION_COMPONENTS_MAP}\n      linkTarget={linkTarget}\n    />\n  );\n};\n\nexport default RelatedComponentsDecorator;\n"
  },
  {
    "path": "packages/docs/src/layout/toc/TableOfContents.module.scss",
    "content": ".toc {\n  position: fixed;\n  right: 20px;\n  top: 85px;\n  z-index: 1000;\n  border-radius: 12px;\n  background-color: var(--sb-primary-background-color);\n  border: 1px solid var(--sb-layout-border-color);\n\n  .button {\n    border-radius: 8px;\n\n    &.open {\n      border: none;\n    }\n\n    &:hover {\n      background: none !important;\n    }\n  }\n\n  &:hover {\n    width: 250px;\n    box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.2);\n  }\n\n  .header {\n    color: var(--sb-secondary-text-color);\n    padding: 4px 8px;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 20px;\n    margin-top: 16px;\n    margin-left: 12px;\n  }\n\n  .list {\n    list-style: none;\n    padding: 0;\n    margin: 0 12px 16px 12px;\n  }\n\n  .listItem {\n    padding: 4px 8px;\n    margin: 4px 0;\n    color: var(--sb-secondary-text-color);\n    border-radius: 4px;\n    font-size: 14px;\n    line-height: 20px;\n    cursor: pointer;\n\n    &.active {\n      font-weight: 600;\n      background-color: var(--sb-primary-background-hover-color);\n      color: var(--sb-primary-text-color);\n    }\n\n    &:hover {\n      background-color: var(--sb-primary-background-hover-color);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/layout/toc/TableOfContents.tsx",
    "content": "import React, { useState, useEffect, useCallback } from \"react\";\nimport styles from \"./TableOfContents.module.scss\";\nimport { Flex, IconButton } from \"@vibe/core\";\nimport { Timeline } from \"@vibe/icons\";\nimport cx from \"classnames\";\n\nexport default function TableOfContents() {\n  const [isOpen, setIsOpen] = useState(false);\n  const [headers, setHeaders] = useState([]);\n  const [activeHeader, setActiveHeader] = useState(\"\");\n\n  const handleMouseEnter = () => setIsOpen(true);\n  const handleMouseLeave = () => setIsOpen(false);\n\n  useEffect(() => {\n    const contentElement = document.querySelector(\"#storybook-docs\");\n    const foundHeaders = Array.from(contentElement.getElementsByTagName(\"h2\"))\n      .filter((h: HTMLElement) => {\n        return Boolean(h.id);\n      })\n      .map(h => {\n        return { id: h.id, text: h.textContent || \"\", element: h };\n      })\n      // limit to 15 headers\n      .slice(0, 15);\n    setHeaders(foundHeaders);\n  }, [isOpen]);\n\n  const handleScroll = useCallback(() => {\n    let currentActiveHeader = \"\";\n    // Find the header that is closest to the top of the viewport\n    for (let i = headers.length - 1; i >= 0; i--) {\n      const header = headers[i];\n      if (header.element) {\n        const rect = header.element.getBoundingClientRect();\n        // Check if the header is at or above the top of the viewport (with a small offset)\n        // or if it's the first header and we haven't found any other active header yet\n        if (rect.top <= 100 || (i === 0 && !currentActiveHeader)) {\n          currentActiveHeader = header.id;\n          break;\n        }\n      }\n    }\n    if (currentActiveHeader !== activeHeader) {\n      setActiveHeader(currentActiveHeader);\n    }\n  }, [headers, activeHeader]);\n\n  useEffect(() => {\n    window.addEventListener(\"scroll\", handleScroll);\n    return () => window.removeEventListener(\"scroll\", handleScroll);\n  }, [handleScroll]);\n\n  const navigateToHeader = (id: string) => {\n    const element = document.getElementById(id);\n    if (element) {\n      element.scrollIntoView({ behavior: \"smooth\" });\n    }\n    setIsOpen(false);\n  };\n\n  if (!headers.length) {\n    return null;\n  }\n\n  return (\n    <div className={styles.toc} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>\n      <Flex justify=\"space-between\" align=\"center\">\n        {isOpen && <div className={styles.header}>On this page</div>}\n        <IconButton\n          className={cx(styles.button, { [styles.open]: isOpen })}\n          icon={Timeline}\n          size=\"large\"\n          aria-label=\"Table of Contents\"\n        />\n      </Flex>\n      {isOpen && (\n        <ul className={styles.list}>\n          {headers.map(header => (\n            <li\n              key={header.id}\n              className={cx(styles.listItem, { [styles.active]: activeHeader === header.id })}\n              onClick={() => navigateToHeader(header.id)}\n              onKeyDown={e => {\n                if (e.key === \"Enter\" || e.key === \" \") {\n                  navigateToHeader(header.id);\n                }\n              }}\n              role=\"button\"\n              tabIndex={0}\n            >\n              {header.text}\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n}\n"
  },
  {
    "path": "packages/docs/src/pages/catalog/Catalog.stories.templates.tsx",
    "content": "import React, { useState } from \"react\";\nimport { RelatedComponentsDecorator } from \"../../layout/related-components/related-components-decorator\";\nimport { RelatedComponents } from \"vibe-storybook-components\";\nimport { DESCRIPTION_COMPONENTS_WITHOUT_GENERAL_DESCRIPTION_MAP } from \"../../layout/related-components/component-description-map\";\nimport { Search, Flex } from \"@vibe/core\";\nimport { CatalogEmptyState } from \"./EmptyState/CatalogEmptyState\";\n\nconst RELATED_COMPONENT_NAMES: string[] = Array.from(\n  DESCRIPTION_COMPONENTS_WITHOUT_GENERAL_DESCRIPTION_MAP.keys()\n).sort();\n\nexport const CatalogTemplate = () => {\n  const [query, setQuery] = useState(\"\");\n  const componentsToDisplay = RELATED_COMPONENT_NAMES.filter(name =>\n    name.toLowerCase().replaceAll(\"-\", \"\").includes(query.toLowerCase())\n  );\n\n  return (\n    <Flex direction=\"column\" gap=\"large\" align=\"stretch\" style={{ width: \"100%\" }}>\n      <Search placeholder=\"Search by component name...\" value={query} onChange={setQuery} />\n      <RelatedComponentsDecorator\n        componentsNames={componentsToDisplay}\n        linkTarget={RelatedComponents.linkTargets.PARENT}\n      />\n      {componentsToDisplay.length === 0 && <CatalogEmptyState />}\n    </Flex>\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/pages/catalog/EmptyState/CatalogEmptyState.module.scss",
    "content": ".emptyStateContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  padding: var(--sb-spacing-large);\n}\n\n.emptyStateHeading {\n  margin-block: var(--sb-spacing-large);\n}\n"
  },
  {
    "path": "packages/docs/src/pages/catalog/EmptyState/CatalogEmptyState.tsx",
    "content": "import React from \"react\";\nimport emptyStateExample from \"./emptyStateExample.svg\";\nimport { Heading, Text } from \"@vibe/core\";\nimport styles from \"./CatalogEmptyState.module.scss\";\n\nexport const CatalogEmptyState = () => {\n  return (\n    <div className={styles.emptyStateContainer} aria-labelledby=\"empty-state-id\">\n      <img style={{ width: \"290px\" }} src={emptyStateExample} alt=\"\" role=\"presentation\" />\n      <Heading type=\"h2\" id=\"empty-state-id\" className={styles.emptyStateHeading}>\n        We haven&apos;t found this component in the catalog\n      </Heading>\n      <Text element=\"span\" type=\"text1\" style={{ width: \"50%\", textAlign: \"center\" }} ellipsis={false}>\n        Not all the components have been added to the Catalog already, please, also check the{\" \"}\n        <Text element=\"span\" type=\"text1\" weight=\"bold\">\n          search in the left panel\n        </Text>\n        .\n      </Text>\n    </div>\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/pages/catalog/catalog.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport * as CatalogStories from \"./catalog.stories\";\n\n<Meta of={CatalogStories} />\n\n# Catalog\n\n<Canvas of={CatalogStories.Catalog} />\n"
  },
  {
    "path": "packages/docs/src/pages/catalog/catalog.stories.tsx",
    "content": "import React from \"react\";\nimport { CatalogTemplate } from \"./Catalog.stories.templates\";\nimport { type Meta, type StoryObj } from \"@storybook/react\";\n\ntype Story = StoryObj<typeof CatalogTemplate>;\n\nexport default {\n  title: \"Catalog\"\n} satisfies Meta<typeof CatalogTemplate>;\n\nexport const Catalog: Story = {\n  render: () => <CatalogTemplate />,\n  parameters: {\n    docs: {\n      sourceState: \"none\"\n    },\n    chromatic: {\n      pauseAnimationAtEnd: true\n    }\n  },\n  tags: [\"!dev\"]\n};\n"
  },
  {
    "path": "packages/docs/src/pages/changelog/changelog.mdx",
    "content": "import { Meta, Markdown } from \"@storybook/blocks\";\nimport changelog from \"../../../../core/CHANGELOG.md?raw\";\n\n<Meta title=\"Changelog\" />\n\n# Changelog\n\n<Markdown>{changelog.replace(\"# Change Log\", \"\")}</Markdown>\n"
  },
  {
    "path": "packages/docs/src/pages/components/Accordion/Accordion.interactions.ts",
    "content": "import { expect } from \"@storybook/jest\";\nimport { userEvent, within } from \"@storybook/test\";\nimport { type Screen } from \"@testing-library/react\";\nimport { delay, interactionSuite, resetFocus } from \"@vibe/core/interactionsTests\";\n\nconst CHANGES_DELAY = 100;\n\nfunction getAccordionHeadingByText(canvas: Screen, title: string) {\n  return canvas.getByText(title)?.closest(\"button\");\n}\n\nfunction getOpenedAccordionItem(canvas: Screen) {\n  const elPanel = canvas.getByRole(\"region\");\n  const elHeading = within(elPanel.parentElement).getByRole(\"button\");\n  return { elPanel, elHeading };\n}\n\nfunction getOpenedAccordionItems(canvas: Screen) {\n  const elPanels = canvas.queryAllByRole(\"region\");\n  const elHeadings = elPanels.map(elPanel => {\n    return within(elPanel.parentElement).getByRole(\"button\");\n  });\n  return { elPanels, elHeadings };\n}\n\nasync function openAndCheckAccordionItem(canvas: Screen, title: string) {\n  const before = getOpenedAccordionItem(canvas);\n  const elHeading = getAccordionHeadingByText(canvas, title);\n  userEvent.click(elHeading);\n  await delay(CHANGES_DELAY);\n  const elPanel = canvas.getByRole(\"region\");\n  await expect(elHeading.getAttribute(\"aria-expanded\")).toBe(\"true\");\n  await expect(before.elHeading.getAttribute(\"aria-expanded\")).toBe(\"false\");\n  await expect(elHeading.getAttribute(\"aria-controls\")).toBe(elPanel.id);\n}\n\nasync function closeAndCheckMultiAccordionItem(canvas: Screen, expectedOpenedPanels: number) {\n  const before = getOpenedAccordionItems(canvas);\n  userEvent.click(before.elHeadings[0]);\n  await delay(CHANGES_DELAY);\n  const after = getOpenedAccordionItems(canvas);\n  await expect(after.elPanels.length).toBe(expectedOpenedPanels);\n  await expect(before.elHeadings[0].getAttribute(\"aria-expanded\")).toBe(\"false\");\n}\n\nasync function openAndCheckMultiAccordionItem(canvas: Screen, title: string, expectedOpenedPanels: number) {\n  const elHeading = getAccordionHeadingByText(canvas, title);\n  userEvent.click(elHeading);\n  await delay(CHANGES_DELAY);\n  const after = getOpenedAccordionItems(canvas);\n  await expect(after.elPanels.length).toBe(expectedOpenedPanels);\n  await expect(after.elHeadings[0].getAttribute(\"aria-expanded\")).toBe(\"true\");\n  await expect(after.elHeadings[0].getAttribute(\"aria-controls\")).toBe(after.elPanels[0].id);\n}\n\nconst closeAlreadyOpenSingleActiveTests = async (canvas: Screen) => {\n  await delay(CHANGES_DELAY);\n  // Open panel gets closed after click\n  await closeAndCheckMultiAccordionItem(canvas, 0);\n};\n\nconst openCloseAccordionSingleActiveTests = async (canvas: Screen) => {\n  // select first (0) AccordionItem\n  await delay(CHANGES_DELAY);\n  await openAndCheckAccordionItem(canvas, \"Notifications\");\n  // select back second (1) AccordionItem\n  await delay(CHANGES_DELAY);\n  await openAndCheckAccordionItem(canvas, \"Setting\");\n};\n\nconst closeAlreadyActiveMultiActiveTests = async (canvas: Screen) => {\n  await delay(CHANGES_DELAY);\n  // close already opened Accordion Item (one from two)\n  await closeAndCheckMultiAccordionItem(canvas, 1);\n  // close last opened Accordion Item\n  await delay(CHANGES_DELAY);\n  await closeAndCheckMultiAccordionItem(canvas, 0);\n};\n\nconst openAccordionItemsMultiActiveTests = async (canvas: Screen) => {\n  // open Accordion Item - Settings\n  await delay(CHANGES_DELAY);\n  await openAndCheckMultiAccordionItem(canvas, \"Setting\", 1);\n  // open one more Accordion Item - Integration\n  await delay(CHANGES_DELAY);\n  await openAndCheckMultiAccordionItem(canvas, \"Integration\", 2);\n};\n\nexport const accordionSingleActivePlaySuite: ReturnType<typeof interactionSuite> = interactionSuite({\n  tests: [openCloseAccordionSingleActiveTests, closeAlreadyOpenSingleActiveTests],\n  afterEach: async () => {\n    await resetFocus();\n  }\n});\n\nexport const accordionMultiActivePlaySuite: ReturnType<typeof interactionSuite> = interactionSuite({\n  tests: [closeAlreadyActiveMultiActiveTests, openAccordionItemsMultiActiveTests],\n  afterEach: async () => {\n    await resetFocus();\n  }\n});\n"
  },
  {
    "path": "packages/docs/src/pages/components/Accordion/Accordion.mdx",
    "content": "import { Accordion, AccordionItem } from \"@vibe/core\";\nimport { Meta } from \"@storybook/blocks\";\nimport { UsageGuidelines } from \"vibe-storybook-components\";\nimport * as AccordionStories from \"./Accordion.stories\";\n\n<Meta of={AccordionStories} />\n\n# Accordion\n\nAccordion is a vertically stacked list of items. Each item can be \"expanded\" or \"collapsed\" to reveal the content within with that item.\n\n<Canvas of={AccordionStories.Overview} />\n\n### Import\n\n```js\nimport { Accordion, AccordionItem } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Use accordion reduce clutter and chunk the information one by one\",\n    \"Accordion Label must be short, clear, and understandable to indicate what's inside\",\n    \"Default state of accordion is closed unless used for navigation\",\n    \"Accordion content can include icons, radio buttons, and checkboxes\"\n  ]}\n/>\n\n## Accessibility\n\n<UsageGuidelines\n  guidelines={[\n    <>\n      Provide an <code>id</code> for the Accordion to enable proper accessibility associations and unique\n      identification.\n    </>,\n    <>\n      Provide unique <code>id</code> props for each AccordionItem to ensure proper ARIA relationships between buttons\n      and their controlled content regions.\n    </>,\n    <>\n      Use descriptive <code>title</code> props for AccordionItem headers that clearly indicate what content will be\n      revealed when expanded.\n    </>,\n    <>\n      Use the <code>defaultIndex</code> prop to set initial expanded states appropriately. Avoid auto-expanding too many\n      items to prevent overwhelming screen reader users.\n    </>\n  ]}\n/>\n## Variants\n\n### Multi active\n\nEach section can be expanded without closing the others\n\n<Canvas of={AccordionStories.MultiActive} />\n\n### Single active\n\nOnly one section can be open at the time\n\n<Canvas of={AccordionStories.SingleActive} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      className: \"monday-storybook-accordion_big-figure\",\n      positive: {\n        component: (\n          <Accordion className=\"monday-storybook-accordion_box-small\">\n            <AccordionItem title=\"Notifications\" />\n            <AccordionItem title=\"Security\" />\n            <AccordionItem title=\"InfoAssets\" />\n          </Accordion>\n        ),\n        description: \"Use informative short labels.\"\n      },\n      negative: {\n        className: \"monday-storybook-accordion_big-figure\",\n        component: (\n          <Accordion className=\"monday-storybook-accordion_box-small\">\n            <AccordionItem title=\"Closed\" />\n            <AccordionItem title=\"Closed\" />\n            <AccordionItem title=\"Closed\" />\n          </Accordion>\n        ),\n        description: \"Indicate the accordion state with labels.\"\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### Preferences Accordion\n\n<Canvas of={AccordionStories.PreferencesAccordion} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"ExpandCollapse\", \"Table\", \"Breadcrumbs\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Accordion/Accordion.stories.tsx",
    "content": "import React from \"react\";\nimport { Accordion, type AccordionProps, AccordionItem, Checkbox, Flex } from \"@vibe/core\";\nimport { accordionMultiActivePlaySuite, accordionSingleActivePlaySuite } from \"./Accordion.interactions\";\n\nconst accordionTemplate = (args: AccordionProps) => {\n  return (\n    <Accordion id=\"overview-accordion\" defaultIndex={[1]} {...args}>\n      <AccordionItem id=\"overview-notifications\" title=\"Notifications\">\n        <div style={{ height: 150 }} />\n      </AccordionItem>\n      <AccordionItem id=\"overview-setting\" title=\"Setting\">\n        <div style={{ height: 150 }} />\n      </AccordionItem>\n      <AccordionItem id=\"overview-info\" title=\"Info\">\n        <div style={{ height: 150 }} />\n      </AccordionItem>\n      <AccordionItem id=\"overview-profile\" title=\"Profile\">\n        <div style={{ height: 150 }} />\n      </AccordionItem>\n      <AccordionItem id=\"overview-permissions\" title=\"Permissions\">\n        <div style={{ height: 150 }} />\n      </AccordionItem>\n      <AccordionItem id=\"overview-security\" title=\"Security\">\n        <div style={{ height: 150 }} />\n      </AccordionItem>\n      <AccordionItem id=\"overview-connectivity\" title=\"Connectivity\">\n        <div style={{ height: 150 }} />\n      </AccordionItem>\n      <AccordionItem id=\"overview-integration\" title=\"Integration\">\n        <div style={{ height: 150 }} />\n      </AccordionItem>\n      <AccordionItem id=\"overview-assets\" title=\"Assets\">\n        <div style={{ height: 150 }} />\n      </AccordionItem>\n    </Accordion>\n  );\n};\n\nexport default {\n  title: \"Components/Accordion\",\n  component: Accordion,\n\n  subcomponents: {\n    AccordionItem\n  },\n\n  argTypes: {\n    children: {\n      control: false\n    },\n\n    defaultIndex: {\n      control: false\n    }\n  },\n\n  decorators: [\n    (Story: React.ComponentType) => (\n      <div style={{ width: \"300px\" }}>\n        <Story />\n      </div>\n    )\n  ]\n};\n\nexport const Overview = {\n  render: accordionTemplate.bind({}),\n  name: \"Overview\",\n  args: {},\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const MultiActive = {\n  render: () => (\n    <Accordion id=\"multi-active-accordion\" allowMultiple defaultIndex={[1, 3]}>\n      <AccordionItem id=\"multi-notifications\" title=\"Notifications\">\n        <div style={{ height: 150 }} />\n      </AccordionItem>\n      <AccordionItem id=\"multi-setting\" title=\"Setting\">\n        <div style={{ height: 150 }} />\n      </AccordionItem>\n      <AccordionItem id=\"multi-connectivity\" title=\"Connectivity\">\n        <div style={{ height: 150 }} />\n      </AccordionItem>\n      <AccordionItem id=\"multi-integration\" title=\"Integration\">\n        <div style={{ height: 150 }} />\n      </AccordionItem>\n      <AccordionItem id=\"multi-assets\" title=\"Assets\">\n        <div style={{ height: 150 }} />\n      </AccordionItem>\n    </Accordion>\n  ),\n\n  name: \"Multi active\",\n  play: accordionMultiActivePlaySuite\n};\n\nexport const SingleActive = {\n  render: () => (\n    <Accordion id=\"single-active-accordion\" defaultIndex={[1]}>\n      <AccordionItem id=\"single-notifications\" title=\"Notifications\">\n        <div style={{ height: 150 }} />\n      </AccordionItem>\n      <AccordionItem id=\"single-setting\" title=\"Setting\">\n        <div style={{ height: 150 }} />\n      </AccordionItem>\n      <AccordionItem id=\"single-connectivity\" title=\"Connectivity\">\n        <div style={{ height: 150 }} />\n      </AccordionItem>\n      <AccordionItem id=\"single-integration\" title=\"Integration\">\n        <div style={{ height: 150 }} />\n      </AccordionItem>\n      <AccordionItem id=\"single-assets\" title=\"Assets\">\n        <div style={{ height: 150 }} />\n      </AccordionItem>\n    </Accordion>\n  ),\n\n  name: \"Single active\",\n  play: accordionSingleActivePlaySuite\n};\n\nexport const PreferencesAccordion = {\n  render: () => (\n    <Accordion id=\"preferences-accordion\" defaultIndex={[0]}>\n      <AccordionItem id=\"preferences-monday\" title=\"In monday\">\n        <Flex direction=\"column\" gap={20} align=\"start\">\n          <Checkbox id=\"pref-likes\" label=\"Likes my update\" checked />\n          <Checkbox id=\"pref-replies\" label=\"Replies to my update\" />\n          <Checkbox id=\"pref-conversation\" label=\"Replies or likes a conversation I'm a part of\" checked />\n          <Checkbox id=\"pref-subscribes\" label=\"Subscribes me to a Board/Item/Team\" checked />\n          <Checkbox id=\"pref-updates\" label=\"Writes an update on an items I'm subscribed to\" checked />\n        </Flex>\n      </AccordionItem>\n    </Accordion>\n  ),\n\n  name: \"Preferences Accordion\",\n  decorators: [\n    (Story: React.ComponentType) => (\n      <div style={{ width: \"600px\" }}>\n        <Story />\n      </div>\n    )\n  ]\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/AlertBanner/AlertBanner.mdx",
    "content": "import { Canvas, Meta } from \"@storybook/blocks\";\nimport { ComponentRules, Link, UsageGuidelines } from \"vibe-storybook-components\";\nimport { AlertBanner, AlertBannerText, AlertBannerLink, AlertBannerButton, Flex } from \"@vibe/core\";\nimport { TipWhenToUse } from \"./AlertBanner.stories.helpers\";\nimport * as AlertBannerStories from \"./AlertBanner.stories\";\n\n<Meta of={AlertBannerStories} />\n\n# Alert Banner\n\nAlert banners show pressing and high-signal messages, such as system alerts. They are meant to be noticed and prompt users to take action.\n\n<Canvas of={AlertBannerStories.Overview} />\n\n### Import\n\n```js\nimport { AlertBanner } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Alert banners should have call for action and an option to dismiss.\",\n    \"Don't include more than one call to action in an alert banner.\",\n    \"Place the banner on the top of the screen, and push all other content below it.\"\n  ]}\n/>\n\n<TipWhenToUse />\n\n## Accessibility\n\n<UsageGuidelines\n  guidelines={[\n    <>\n      Use the <code>ariaLabel</code> prop to provide a descriptive accessible name for the banner that clearly indicates\n      the type and purpose of the alert.\n    </>,\n    <>\n      For dismissible AlertBanners, use the <code>closeButtonAriaLabel</code> prop to provide a descriptive accessible\n      name for the close button.\n    </>,\n    <>\n      When the banner text should be announced by screen readers (e.g., for dynamic updates), set the{\" \"}\n      <code>ariaLive</code> prop on AlertBannerText to control the live region behavior (\"polite\", \"assertive\", or\n      \"off\"). By default, AlertBannerText does not set a live region.\n    </>\n  ]}\n/>\n\n## Variants\n\n### Types\n\nThere are five types of alert banners: primary, positive, negative, warning and inverted.\n\n<Canvas of={AlertBannerStories.Types} />\n\n### Alert Banner with button\n\n<Canvas of={AlertBannerStories.AlertBannerWithButton} />\n\n### Alert Banner with link\n\n<Canvas of={AlertBannerStories.AlertBannerWithLink} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: (\n          <div style={{ width: \"392px\" }}>\n            <AlertBanner>\n              <AlertBannerText text=\"Join us at Elevate!\" />\n              <AlertBannerLink text=\"RSVP now\" href=\"https://monday.com\" />\n            </AlertBanner>\n          </div>\n        ),\n        description: \"Use banners for system messages, background processes, and general updates.\"\n      },\n      negative: {\n        component: (\n          <div style={{ width: \"392px\" }}>\n            <AlertBanner>\n              <AlertBannerText text=\"We successfully archived 1 item\" />\n            </AlertBanner>\n          </div>\n        ),\n        description: (\n          <>\n            Don’t use banners for notifying a user of an action they have taken. Instead, provide visual feedback with a{\" \"}\n            <StorybookLink page=\"Components/Toast\">Toast.</StorybookLink>\n          </>\n        )\n      }\n    },\n    {\n      positive: {\n        component: (\n          <div style={{ width: \"392px\" }}>\n            <AlertBanner backgroundColor=\"negative\">\n              <AlertBannerText text=\"No connection\" />\n              <AlertBannerLink text=\"Learn more\" href=\"https://monday.com\" />\n              <AlertBannerButton>Try again</AlertBannerButton>\n            </AlertBanner>\n          </div>\n        ),\n        description: \"If two actions are needed, use two different call to acitons.\"\n      },\n      negative: {\n        component: (\n          <Flex direction=\"column\" gap={16} style={{ width: \"392px\" }}>\n            <AlertBanner backgroundColor=\"negative\">\n              <AlertBannerText text=\"No connection\" />\n              <AlertBannerLink text=\"Learn more\" href=\"https://monday.com\" />\n              <AlertBannerLink text=\"Try again\" href=\"https://monday.com\" />\n            </AlertBanner>\n            <AlertBanner backgroundColor=\"negative\">\n              <AlertBannerText text=\"No connection\" />\n              <AlertBannerButton>Learn more</AlertBannerButton>\n              <AlertBannerButton>Try again</AlertBannerButton>\n            </AlertBanner>\n          </Flex>\n        ),\n        description: \"Don't include more than one action in an alert banner with the same type.\"\n      }\n    },\n    {\n      positive: {\n        component: (\n          <div style={{ width: \"392px\" }}>\n            <AlertBanner backgroundColor=\"dark\">\n              <AlertBannerText text=\"Join us at Elevate!\" />\n              <AlertBannerLink text=\"RSVP now\" href=\"https://monday.com\" />\n            </AlertBanner>\n          </div>\n        ),\n        description: \"Use only the 4 color types: primary, negative, positive, and inverted.\"\n      },\n      negative: {\n        component: (\n          <div style={{ width: \"392px\" }}>\n            <AlertBanner>\n              <AlertBannerText text=\"Join us at Elevate!\" />\n              <AlertBannerLink text=\"RSVP now\" href=\"https://monday.com\" />\n            </AlertBanner>\n          </div>\n        ),\n        description: \"Don’t choose other colors for alert banners. Keep it consistent.\"\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### Alert banner as an announcement\n\nUse when you'd like to notify about an event or cross-company announcment.\n\n<Canvas of={AlertBannerStories.AlertBannerAsAnAnnouncement} />\n\n### Alert banner as an opportunity to upgrade\n\nUse to show a trial user the number of remaining free days to use the platform.\n\n<Canvas of={AlertBannerStories.AlertBannerAsAnOpportunityToUpgrade} />\n\n### Overflow text\n\nIn case that there's not enough space for the content, use an ellipses (...).\n\n<Canvas of={AlertBannerStories.OverflowText} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Toast\", \"AttentionBox\", \"Tooltip\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/AlertBanner/AlertBanner.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const TipWhenToUse = () => (\n  <Tip title=\"When to use?\">\n    Alert banners should be reserved only for high-signal, system-level alert messages. For in-app notifications use a{\" \"}\n    <StorybookLink page=\"Components/Toast\" size=\"small\">\n      Toast.\n    </StorybookLink>\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/AlertBanner/AlertBanner.stories.tsx",
    "content": "import React from \"react\";\nimport {\n  AlertBanner,\n  type AlertBannerProps,\n  AlertBannerText,\n  AlertBannerLink,\n  AlertBannerButton,\n  Flex\n} from \"@vibe/core\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { type Meta, type StoryObj } from \"@storybook/react\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: AlertBanner,\n  actionPropsArray: [\"onClose\"]\n});\n\nconst alertBannerTemplate = (args: AlertBannerProps) => {\n  return (\n    <AlertBanner {...args}>\n      <AlertBannerText text=\"Alert banner message\" />\n      <AlertBannerLink text=\"this is a CTA\" href=\"https://monday.com\" />\n    </AlertBanner>\n  );\n};\n\nexport default {\n  title: \"Components/AlertBanner\",\n  component: AlertBanner,\n  subcomponents: {\n    AlertBannerText,\n    AlertBannerLink,\n    AlertBannerButton\n  },\n  argTypes: {\n    ...metaSettings.argTypes\n  },\n  decorators: [\n    ...metaSettings.decorators,\n    (Story: React.ComponentType) => (\n      <div style={{ width: \"610px\" }}>\n        <Story />\n      </div>\n    )\n  ]\n} as Meta<typeof AlertBanner>;\n\nexport const Overview = {\n  render: alertBannerTemplate.bind({}),\n  args: {\n    id: \"overview-alert-banner\",\n    \"aria-label\": \"Overview alert banner\"\n  },\n  name: \"Overview\"\n};\n\ntype Story = StoryObj<typeof AlertBanner>;\n\nexport const Types: Story = {\n  render: () => (\n    <Flex direction=\"column\" gap={16}>\n      <AlertBanner id=\"type-primary\" aria-label=\"Primary alert banner\">\n        <AlertBannerText text=\"Alert banner message\" />\n        <AlertBannerLink text=\"this is a CTA\" href=\"https://monday.com\" />\n      </AlertBanner>\n      <AlertBanner id=\"type-positive\" aria-label=\"Success alert banner\" backgroundColor=\"positive\">\n        <AlertBannerText text=\"Alert banner message\" />\n        <AlertBannerLink text=\"this is a CTA\" href=\"https://monday.com\" />\n      </AlertBanner>\n      <AlertBanner id=\"type-negative\" aria-label=\"Error alert banner\" backgroundColor=\"negative\">\n        <AlertBannerText text=\"Alert banner message\" />\n        <AlertBannerLink text=\"this is a CTA\" href=\"https://monday.com\" />\n      </AlertBanner>\n      <AlertBanner id=\"type-warning\" aria-label=\"Warning alert banner\" backgroundColor=\"warning\">\n        <AlertBannerText text=\"Alert banner message\" />\n        <AlertBannerLink text=\"this is a CTA\" href=\"https://monday.com\" />\n      </AlertBanner>\n      <AlertBanner id=\"type-dark\" aria-label=\"Dark alert banner\" backgroundColor=\"dark\">\n        <AlertBannerText text=\"Alert banner message\" />\n        <AlertBannerLink text=\"this is a CTA\" href=\"https://monday.com\" />\n      </AlertBanner>\n    </Flex>\n  ),\n  name: \"Types\"\n};\n\nexport const AlertBannerWithButton: Story = {\n  render: () => (\n    <AlertBanner id=\"with-button\" aria-label=\"Alert banner with action button\">\n      <AlertBannerText text=\"Lorem ipsum dolor sit amet\" />\n      <AlertBannerButton>Lorem Ipsum</AlertBannerButton>\n    </AlertBanner>\n  ),\n  name: \"Alert Banner with button\"\n};\n\nexport const AlertBannerWithLink: Story = {\n  render: () => (\n    <AlertBanner id=\"with-link\" aria-label=\"Alert banner with link\">\n      <AlertBannerText text=\"Alert banner message\" />\n      <AlertBannerLink text=\"this is a CTA\" href=\"https://monday.com\" />\n    </AlertBanner>\n  ),\n  name: \"Alert Banner with link\"\n};\n\nexport const AlertBannerAsAnAnnouncement: Story = {\n  render: () => (\n    <AlertBanner id=\"announcement\" aria-label=\"Event announcement\" backgroundColor=\"dark\">\n      <AlertBannerText text=\"Join us at Elevate 2022\" />\n      <AlertBannerLink text=\"RSVP now\" href=\"https://monday.com\" />\n    </AlertBanner>\n  ),\n  name: \"Alert banner as an announcement\"\n};\n\nexport const AlertBannerAsAnOpportunityToUpgrade: Story = {\n  render: () => (\n    <AlertBanner\n      id=\"upgrade-opportunity\"\n      aria-label=\"Trial upgrade opportunity\"\n      onClose={() => {}}\n      closeButtonAriaLabel=\"Close upgrade banner\"\n    >\n      <AlertBannerText text=\"7 days left on your monday CRM trial\" />\n      <AlertBannerLink text=\"Upgrade now\" href=\"https://monday.com\" />\n    </AlertBanner>\n  ),\n  name: \"Alert banner as an opportunity to upgrade\"\n};\n\nexport const OverflowText: Story = {\n  render: () => (\n    <AlertBanner id=\"overflow-text\" aria-label=\"Long text alert banner\">\n      <AlertBannerText text=\"This is a really long alert...\" />\n      <AlertBannerLink text=\"Call to action\" href=\"https://monday.com\" />\n    </AlertBanner>\n  ),\n  name: \"Overflow text\",\n  decorators: [\n    (Story: React.ComponentType) => (\n      <div style={{ width: \"320px\" }}>\n        <Story />\n      </div>\n    )\n  ]\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/AttentionBox/AttentionBox.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { ComponentRules, UsageGuidelines } from \"vibe-storybook-components\";\nimport * as AttentionBoxStories from \"./AttentionBox.stories\";\nimport { AttentionBox, Box, Heading, Text, Link } from \"@vibe/core\";\n\n<Meta of={AttentionBoxStories} />\n\n# AttentionBox\n\nAttention box lets users know important information within content areas, as close as possible to the content it’s about. An optional smooth entrance animation can be used to enhance visibility.\n\n## Overview\n\n<Canvas of={AttentionBoxStories.Overview} />\n\n## Import path\n\n```tsx\nimport { AttentionBox } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Use attention box if there is crucial information for user to finish or be acknowledged about a task.\",\n    \"Attention box do not dismiss automatically. They persist on the page until the user dismisses them or takes action that resolves the notification.\",\n    \"The width of attention box is based on content and layout. They can expand to the fill the container or content area they relate to.\"\n  ]}\n/>\n\n## Variants\n\n### Types\n\nThere are five types of attention boxes: primary, neutral, positive, warning and negative.\n\n<Canvas of={AttentionBoxStories.Types} />{\" \"}\n\n### Default\n\nThe default Attention Box presents content in multiple lines, with or without title. It can include a link, a button, or both.\n\n<Canvas of={AttentionBoxStories.Default} />\n\n### Compact\n\nThe compact Attention Box presents content in a single line. It can include a link, a button, or both. If the text exceeds the available space it display an ellipsis and tooltip, when necessary.\n\n<Canvas of={AttentionBoxStories.Compact} />\n\n### Link and Button\n\nBoth compact and default Attention Box can present CTA. They can include a link, a button, both, or be displayed without any CTA if none is needed.\n\n<Canvas of={AttentionBoxStories.LinkAndButton} />\n\n### Dismissible\n\nThe Attention Box may be configured to be dismissible or not, depending on the use case.\n\n<Canvas of={AttentionBoxStories.Dismissible} />\n\n### Icon\n\nAttention Box can include an icon to reinforce its purpose. Each type has a default icon, which you may replace or remove as needed.\n\n<Canvas of={AttentionBoxStories.IconStory} />\n\n## Do's and Don'ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: (\n          <Box style={{ width: \"90%\", marginRight: 0 }}>\n            <AttentionBox\n              title=\"Birthday/death rate\"\n              text=\"Studies show that 100% of people who celebrate birthdays will eventually die.\"\n              onClose={() => {}}\n            />\n          </Box>\n        ),\n        description: \"Provide a brief title, and explanation related to the title.\"\n      },\n      negative: {\n        component: (\n          <div style={{ width: \"90%\", marginRight: 0 }}>\n            <AttentionBox title=\"Birthday/death rate\" />\n          </div>\n        ),\n        description: \"Don't use only a title to explain something.\"\n      }\n    },\n    {\n      positive: {\n        component: (\n          <Box style={{ width: \"90%\", marginRight: 0 }}>\n            <Box marginBottom=\"medium\">\n              <Heading type=\"h1\" weight=\"bold\">\n                Inbox\n              </Heading>\n              <Text>Catch up on updates from all your boards.</Text>\n            </Box>\n            <AttentionBox\n              compact\n              icon={false}\n              text=\"Get your monday.com notifications\"\n              action={{ text: \"Subscribe\", onClick: () => {} }}\n            />\n          </Box>\n        ),\n        description:\n          \"Use when you are speaking directly to a piece of content and the notification can be positioned close to the content.\"\n      },\n      negative: {\n        component: (\n          <Box style={{ width: \"90%\", marginRight: 0 }}>\n            <Box marginBottom=\"medium\">\n              <Heading type=\"h1\" weight=\"bold\">\n                Inbox\n              </Heading>\n              <Text>Catch up on updates from all your boards.</Text>\n            </Box>\n            <AttentionBox\n              compact\n              icon={false}\n              text=\"7 days left on your free trial\"\n              link={{ href: \"#\", text: \"Upgrade\" }}\n            />\n          </Box>\n        ),\n        description: (\n          <>\n            Don’t use when not to a specific piece of content. If the message applies at a system level, use{\" \"}\n            <StorybookLink page=\"Components/AlertBanner\">Alert Banner</StorybookLink> instead.\n          </>\n        )\n      }\n    },\n    {\n      positive: {\n        component: (\n          <div style={{ width: \"90%\", marginRight: 0 }}>\n            <AttentionBox compact text=\"Need guidance?\" link={{ href: \"#\", text: \"View docs\" }} />\n          </div>\n        ),\n        description: \"If link is needed, keep it aligned to the right.\"\n      },\n      negative: {\n        component: (\n          <div style={{ width: \"90%\", marginRight: 0 }}>\n            <AttentionBox compact>\n              <Text>\n                Need guidance?{\" \"}\n                <Link\n                  href=\"#\"\n                  text=\"View docs\"\n                  inlineText\n                  style={{ color: \"var(--primary-color-text)\", textDecoration: \"underline\" }}\n                />\n              </Text>\n            </AttentionBox>\n          </div>\n        ),\n        description: \"Don’t use the link as an inline action.\"\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### Attention box within layouts\n\nThe width of the Attention Box adapts to its content and layout, expanding to fill the container or area it belongs to.\n\n<Canvas of={AttentionBoxStories.AttentionBoxWithLayouts} />\n\n### Attention box inside a dialog/combobox\n\nProvides contextual and related information.\n\n<Canvas of={AttentionBoxStories.AttentionBoxInsideADialogCombobox} />\n\n### Entry animation\n\nThe Attention box component consist of enter animation prop to increase user attention. It is highly recommended to use a delay before the attention box entry motion, once the page is fully loaded.\n\n<Canvas of={AttentionBoxStories.EntryAnimation} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"AlertBanner\", \"Tipseen\", \"Tooltip\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/AttentionBox/AttentionBox.stories.tsx",
    "content": "import React, { useState, useCallback, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Info, Invite } from \"@vibe/icons\";\nimport {\n  AttentionBox,\n  Button,\n  Flex,\n  Heading,\n  Icon,\n  Text,\n  DialogContentContainer,\n  Search,\n  Avatar,\n  Box,\n  Skeleton,\n  type AttentionBoxProps\n} from \"@vibe/core\";\nimport person from \"./assets/person.png\";\nimport contentImage from \"./assets/content-image.png\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\n\ntype Story = StoryObj<typeof AttentionBox>;\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: AttentionBox,\n  actionPropsArray: [\"onClose\"]\n});\n\nexport default {\n  title: \"Components/AttentionBox\",\n  component: AttentionBox,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n} satisfies Meta<typeof AttentionBox>;\n\nexport const Overview: Story = {\n  render: (args: AttentionBoxProps) => (\n    <div style={{ maxWidth: 600 }}>\n      <AttentionBox {...args} />\n    </div>\n  ),\n  args: {\n    title: \"Attention box title\",\n    text: \"This action will cause your team to lose access to the account until you use the correct SSO source.\",\n    action: {\n      text: \"Button\",\n      onClick: () => {}\n    },\n    link: {\n      href: \"#\",\n      text: \"Read more\"\n    },\n    onClose: () => {}\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const Types: Story = {\n  render: () => (\n    <div\n      style={{\n        display: \"grid\",\n        gridTemplateColumns: \"240px 600px\",\n        columnGap: \"var(--space-16)\",\n        rowGap: \"var(--space-24)\",\n        alignItems: \"center\"\n      }}\n    >\n      <Text type=\"text1\" weight=\"bold\">\n        Primary\n      </Text>\n      <AttentionBox\n        title=\"Heads up\"\n        text=\"This message gives you helpful context without requiring immediate action.\"\n        onClose={() => {}}\n      />\n      <Text type=\"text1\" weight=\"bold\">\n        Neutral\n      </Text>\n      <AttentionBox\n        type=\"neutral\"\n        title=\"General note\"\n        text=\"Use this style for more subtle visual emphasis, or for or neutral custom contexts.\"\n        onClose={() => {}}\n      />\n      <Text type=\"text1\" weight=\"bold\">\n        Positive\n      </Text>\n      <AttentionBox\n        type=\"positive\"\n        title=\"You're doing great\"\n        text=\"Indicates success , the user can keep working without interruptions.\"\n        onClose={() => {}}\n      />\n      <Text type=\"text1\" weight=\"bold\">\n        Warning\n      </Text>\n      <AttentionBox\n        type=\"warning\"\n        title=\"Caution\"\n        text=\"Shows important warnings the user should review before moving forward.\"\n        onClose={() => {}}\n      />\n      <Text type=\"text1\" weight=\"bold\">\n        Negative\n      </Text>\n      <AttentionBox\n        type=\"negative\"\n        title=\"Low on free space\"\n        text=\"Highlights errors or limitations the user should be aware of.\"\n        onClose={() => {}}\n      />\n    </div>\n  )\n};\n\nexport const Default: Story = {\n  render: () => (\n    <Flex gap=\"large\" align=\"start\">\n      <AttentionBox\n        title=\"Heads up\"\n        text=\"This message gives you helpful context without requiring immediate action.\"\n        action={{ text: \"Button\", onClick: () => {} }}\n        link={{ href: \"#\", text: \"Read more\" }}\n        onClose={() => {}}\n      />\n      <AttentionBox\n        text=\"This message gives you helpful context without requiring immediate action.\"\n        action={{ text: \"Button\", onClick: () => {} }}\n        link={{ href: \"#\", text: \"Read more\" }}\n        onClose={() => {}}\n      />\n    </Flex>\n  )\n};\n\nexport const Compact: Story = {\n  render: () => (\n    <div style={{ maxWidth: 600 }}>\n      <AttentionBox\n        compact\n        text=\"Here's something you might want to know. This message gives you helpful context without requiring immediate action.\"\n        action={{ text: \"Button\", onClick: () => {} }}\n        link={{ href: \"#\", text: \"Read more\" }}\n        onClose={() => {}}\n      />\n    </div>\n  )\n};\n\nexport const LinkAndButton: Story = {\n  render: () => (\n    <div style={{ maxWidth: 600 }}>\n      <AttentionBox\n        title=\"Heads up\"\n        text=\"Here's something you might want to know. This message gives you helpful context without requiring immediate action.\"\n        action={{ text: \"Button\", onClick: () => {} }}\n        link={{ href: \"#\", text: \"Read more\" }}\n        onClose={() => {}}\n      />\n    </div>\n  )\n};\n\nexport const Dismissible: Story = {\n  render: () => {\n    const [visible, setVisible] = useState(true);\n    return visible ? (\n      <div style={{ maxWidth: 600 }}>\n        <AttentionBox\n          compact\n          text=\"This message gives you helpful context without requiring immediate action.\"\n          onClose={() => setVisible(false)}\n        />\n      </div>\n    ) : (\n      <Button onClick={() => setVisible(true)}>Show AttentionBox</Button>\n    );\n  }\n};\n\nexport const IconStory: Story = {\n  render: () => (\n    <Flex gap=\"large\" align=\"start\">\n      <AttentionBox\n        icon={false}\n        text=\"This message gives you helpful context without requiring immediate action.\"\n        action={{ text: \"Button\", onClick: () => {} }}\n        link={{ href: \"#\", text: \"Read more\" }}\n        onClose={() => {}}\n      />\n      <AttentionBox\n        text=\"This message gives you helpful context without requiring immediate action.\"\n        action={{ text: \"Button\", onClick: () => {} }}\n        link={{ href: \"#\", text: \"Read more\" }}\n        onClose={() => {}}\n      />\n    </Flex>\n  ),\n  name: \"Icon\"\n};\n\nexport const AttentionBoxWithLayouts: Story = {\n  render: () => (\n    <Flex direction=\"column\" align=\"start\" gap=\"small\" style={{ width: \"100%\" }}>\n      <Heading type=\"h3\" weight=\"bold\">\n        Cross-Account Copier\n      </Heading>\n      <Text>Copy boards and dashboards to another account</Text>\n      <AttentionBox\n        compact\n        type=\"neutral\"\n        text=\"First, move the content you want to copy into folder. Only main boards and dashboards can be copied.\"\n        link={{ href: \"#\", text: \"Read more\" }}\n        onClose={() => {}}\n      />\n    </Flex>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Info }\n      }\n    }\n  }\n};\n\nexport const AttentionBoxInsideADialogCombobox: Story = {\n  render: () => {\n    return (\n      <DialogContentContainer style={{ padding: 0 }}>\n        <Box style={{ width: 380 }} padding=\"medium\">\n          <Flex direction=\"column\" gap=\"medium\" align=\"stretch\">\n            <Search placeholder=\"Search by name, role, team, or email\" />\n            <Text>Suggested people</Text>\n            <Flex direction=\"column\" gap=\"medium\" align=\"start\">\n              <Flex gap=\"small\">\n                <Avatar size=\"medium\" src={person} type=\"img\" />\n                <Flex gap=\"xs\">\n                  <Text element=\"span\">Julia Martinez </Text>\n                  <Text color=\"secondary\" element=\"span\">\n                    (UX/UI Product Designer)\n                  </Text>\n                </Flex>\n              </Flex>\n              <Flex gap=\"small\">\n                <Icon size=\"32\" icon={Invite} />\n                <Text>Invite new board member by email</Text>\n              </Flex>\n              <AttentionBox text=\"Hold ⌘ to select more than one person or team\" onClose={() => {}} />\n            </Flex>\n          </Flex>\n        </Box>\n      </DialogContentContainer>\n    );\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { person, Invite }\n      }\n    }\n  }\n};\n\nexport const EntryAnimation: Story = {\n  render: () => {\n    type Stage = \"button\" | \"skeleton\" | \"content\" | \"attention\";\n    const [stage, setStage] = useState<Stage>(\"button\");\n\n    const onClick = useCallback(() => {\n      setStage(\"skeleton\");\n\n      setTimeout(() => {\n        setStage(\"content\");\n      }, 2000);\n    }, []);\n\n    useEffect(() => {\n      if (stage === \"content\") {\n        setTimeout(() => {\n          setStage(\"attention\");\n        }, 750);\n      }\n    }, [stage]);\n\n    const reset = useCallback(() => {\n      setStage(\"button\");\n    }, []);\n\n    return (\n      <Flex align=\"start\" direction=\"column\" gap=\"medium\" style={{ width: \"100%\", maxWidth: 720, minHeight: 260 }}>\n        {/* Button Stage */}\n        {stage === \"button\" && (\n          <Button onClick={onClick} kind=\"secondary\">\n            Entry animation\n          </Button>\n        )}\n\n        {/* Skeleton Stage */}\n        {stage === \"skeleton\" && (\n          <Flex align=\"start\" direction=\"column\" gap=\"medium\" style={{ width: \"100%\" }}>\n            <Skeleton type=\"text\" size=\"h2\" width={300} />\n            <Flex align=\"start\" gap=\"medium\" style={{ width: \"100%\" }}>\n              <Skeleton width={150} height={150} />\n              <Flex direction=\"column\" align=\"stretch\" gap=\"small\" style={{ width: \"100%\" }}>\n                <Skeleton type=\"text\" size=\"h5\" fullWidth />\n                <Skeleton type=\"text\" size=\"h5\" fullWidth />\n                <Skeleton type=\"text\" size=\"h5\" fullWidth />\n                <Skeleton type=\"text\" size=\"h5\" width={200} />\n              </Flex>\n            </Flex>\n          </Flex>\n        )}\n\n        {/* Content Stage */}\n        {(stage === \"content\" || stage === \"attention\") && (\n          <Flex align=\"start\" direction=\"column\" gap=\"medium\" style={{ width: \"100%\" }}>\n            {stage === \"attention\" && (\n              <AttentionBox\n                compact\n                text=\"This action will cause your team to lose access to the account until you will use the correct SSO.\"\n                onClose={reset}\n              />\n            )}\n\n            {/* Main Content */}\n            <Flex align=\"start\" direction=\"column\" gap=\"medium\" style={{ width: \"100%\" }}>\n              <Heading type=\"h3\">Entry animation</Heading>\n              <Flex align=\"stretch\" gap=\"medium\" style={{ width: \"100%\" }}>\n                <Box style={{ width: 150, height: 150, flexShrink: 0 }} rounded=\"small\">\n                  <img\n                    src={contentImage}\n                    alt=\"Image placeholder\"\n                    style={{\n                      width: \"100%\",\n                      height: \"100%\",\n                      objectFit: \"cover\"\n                    }}\n                  />\n                </Box>\n                <Text ellipsis={false}>\n                  {\"Here's\"} a sneak peek at how it works. The entry animation is an integral part of the experience we\n                  provide. {\"It's\"} up to you to ensure that the surrounding layout shifts downward smoothly when the\n                  Attention Box enters the view.\n                </Text>\n              </Flex>\n            </Flex>\n          </Flex>\n        )}\n      </Flex>\n    );\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Info, contentImage }\n      }\n    }\n  }\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Avatar/Avatar.mdx",
    "content": "import { Avatar, AvatarGroup, Flex, Counter } from \"@vibe/core\";\nimport { Meta } from \"@storybook/blocks\";\nimport { ComponentRules, createComponentTemplate } from \"vibe-storybook-components\";\nimport person1 from \"./assets/person1.png\";\nimport person2 from \"./assets/person2.png\";\nimport person3 from \"./assets/person3.png\";\nimport maleIcon from \"./assets/maleIcon.png\";\nimport femaleIcon from \"./assets/femaleIcon.png\";\nimport { TipMultipleAvatarsTogether } from \"./Avatar.stories.helpers\";\nimport * as AvatarStories from \"./Avatar.stories\";\n\n<Meta of={AvatarStories} />\n\nexport const avatarTemplate = createComponentTemplate(Avatar);\n\n# Avatar\n\nAvatar is a graphical representation of a person through a profile picture, image, icon, or set of initials.\n\n<Canvas of={AvatarStories.Overview} />\n\n### Import\n\n```js\nimport { Avatar } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Use an avatar to help a user in the platform efficiently identify another person or a team.\",\n    \"When there is no personal photo to show, use initials.\",\n    \"If an image fails to load, fall back to the default user avatar.\",\n    \"An avatar may contain a status icon to indicate a user’s status (working from home, busy, etc.).\",\n    \"Use a tooltip or dialog when hovering over the avatar to offer more information. For example: with a person’s name.\"\n  ]}\n/>\n\n<TipMultipleAvatarsTogether />\n\n## Accessibility\n\n<UsageGuidelines\n  guidelines={[\n    <>\n      Always provide an <code>ariaLabel</code> prop to describe the person or entity represented by the avatar (e.g.,\n      \"John Smith\", \"Design Team\", \"Guest User\"). This label is automatically used as tooltip content.\n    </>,\n    <>\n      Use the <code>role</code> prop when the avatar represents something other than a person (e.g.,{\" \"}\n      <code>role=\"img\"</code> for team avatars, <code>role=\"button\"</code> for clickable workspace avatars).\n    </>,\n    <>\n      For clickable avatars, ensure the <code>ariaLabel</code> describes the action that will occur when clicked (e.g.,\n      \"Open John Smith's profile\", \"View Design Team details\").\n    </>,\n    <>\n      Use <code>ariaHidden</code> prop appropriately when the avatar is purely decorative and provides no meaningful\n      information to screen readers.\n    </>,\n    <>\n      For avatars with badges (status indicators), ensure the <code>ariaLabel</code> includes relevant status\n      information (e.g., \"John Smith (Away)\", \"Design Team (3 members online)\").\n    </>\n  ]}\n/>\n\n## Variants\n\n### Size\n\nAvatars appear in 4 sizes: XS, Small, Medium, and Large.\n\n<Canvas of={AvatarStories.Size} />\n\n### Disabled\n\nUse when a user is inactive in the system.\n\n<Canvas of={AvatarStories.Disable} />\n\n### Avatar with text\n\nUse when a user’s image is not available, use their initials.\n\n<Canvas of={AvatarStories.AvatarWithText} />\n\n### Square avatar with icon or text\n\nUse for non-person avatars, such as a workspace or team.\n\n<Canvas of={AvatarStories.SquareAvatar} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: (\n          <div className=\"monday-storybook-avatar_multiple\">\n            <Avatar className=\"multiple-avatar\" size=\"large\" src={person1} type=\"img\" />\n            <Avatar className=\"multiple-avatar\" size=\"large\" src={person2} type=\"img\" />\n            <Avatar className=\"multiple-avatar\" size=\"large\" src={person3} type=\"img\" />\n          </div>\n        ),\n        description: \"Use consistent avatar sizes for common use cases to convey their purpose.\"\n      },\n      negative: {\n        component: (\n          <div className=\"monday-storybook-avatar_multiple-reverse\">\n            <Avatar className=\"multiple-reverse-avatar\" size=\"small\" src={person1} type=\"img\" />\n            <Avatar className=\"multiple-reverse-avatar\" size=\"medium\" src={person2} type=\"img\" />\n            <Avatar className=\"multiple-reverse-avatar\" size=\"large\" src={person3} type=\"img\" />\n          </div>\n        ),\n        description: \"Avoid using a mix of avatar sizes that display together and create design imbalance.\"\n      }\n    },\n    {\n      positive: {\n        component: <Avatar src={maleIcon} type=\"img\" />,\n        description: \"Use branded generic avatars when a user has not set their avatar image.\"\n      },\n      negative: {\n        component: <Avatar src={femaleIcon} type=\"img\" />,\n        description: \"Don’t make assumptions and use gendered placeholder avatars.\"\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### Avatar with right badge\n\nUse to indicate the user’s permissions such as: Guest, owner.\n\n<Canvas of={AvatarStories.AvatarWithRightBadge} />\n\n### Avatar with left badge\n\nUse to indicate the status of a user such as: Working from home, out of office etc.\n\n<Canvas of={AvatarStories.AvatarWithLeftBadge} />\n\n### Avatar with tooltip\n\nUse to display tooltip on onHover Avatar event.\n\n<Canvas of={AvatarStories.AvatarWithTooltip} />\n\n### Clickable avatar\n\nUse to fire actions on avatar click event.\n\n<Canvas of={AvatarStories.ClickableAvatar} />\n\n### Multiple avatars\n\nTo group multiple Avatars together, use the <StorybookLink page=\"Components/AvatarGroup\">AvatarGroup</StorybookLink> component.\n\n<Canvas of={AvatarStories.MultipleAvatars} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"AvatarGroup\", \"Tooltip\", \"Badge\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Avatar/Avatar.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const TipMultipleAvatarsTogether = () => (\n  <Tip title=\"Mutiple avatars togethers?\">\n    If you want to stack multiple avatars together, check out{\" \"}\n    <StorybookLink page=\"Components/AvatarGroup\" size=\"small\">\n      AvatarGroup\n    </StorybookLink>{\" \"}\n    component\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/Avatar/Avatar.stories.scss",
    "content": ".monday-storybook-avatar {\n  &_multiple {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 10px 20px 10px 20px;\n    .multiple-avatar {\n      margin: -8px;\n    }\n  }\n\n  &_multiple-reverse {\n    display: flex;\n    align-items: flex-start;\n\n    .multiple-reverse-avatar {\n      margin: -5px;\n      &:first-child {\n        z-index: 2;\n      }\n      &:nth-child(2) {\n        z-index: 1;\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/pages/components/Avatar/Avatar.stories.tsx",
    "content": "import React from \"react\";\nimport { Avatar, AvatarGroup, Flex, Counter } from \"@vibe/core\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { createComponentTemplate, StoryDescription } from \"vibe-storybook-components\";\nimport guest from \"./assets/guest.svg\";\nimport home from \"./assets/home.svg\";\nimport minus from \"./assets/minus.svg\";\nimport owner from \"./assets/owner.svg\";\nimport person1 from \"./assets/person1.png\";\nimport person2 from \"./assets/person2.png\";\nimport person3 from \"./assets/person3.png\";\nimport { WhatsNew } from \"@vibe/icons\";\nimport { useCallback, useState } from \"react\";\nimport \"./Avatar.stories.scss\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: Avatar,\n  iconPropNamesArray: [\"icon\"],\n  actionPropsArray: [\"onClick\"]\n});\n\nconst avatarTemplate = createComponentTemplate(Avatar);\nconst AvatarBadgePropsType = {\n  summary: \"AvatarBadgeProps\",\n  detail: `{\n    src?: string;\n    icon?: SubIcon;\n    tabIndex?: number;\n    className?: string;\n    size?: \"xs\" | \"small\" | \"medium\" | \"large\";\n  }`\n};\n\nexport default {\n  title: \"Components/Avatar\",\n  component: Avatar,\n  argTypes: {\n    ...metaSettings.argTypes,\n    bottomRightBadgeProps: {\n      control: \"object\",\n      table: {\n        type: AvatarBadgePropsType\n      }\n    },\n    bottomLeftBadgeProps: {\n      control: \"object\",\n      table: {\n        type: AvatarBadgePropsType\n      }\n    },\n    topLeftBadgeProps: {\n      control: \"object\",\n      table: {\n        type: AvatarBadgePropsType\n      }\n    },\n    topRightBadgeProps: {\n      control: \"object\",\n      table: {\n        type: AvatarBadgePropsType\n      }\n    }\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { person1 }\n      }\n    }\n  }\n};\n\nexport const Overview = {\n  render: avatarTemplate.bind({}),\n  name: \"Overview\",\n  args: {\n    id: \"overview-avatar\",\n    size: \"large\",\n    src: person1,\n    type: \"img\",\n    \"aria-label\": \"Julia Martinez\"\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const Size = {\n  render: () => (\n    <Flex gap=\"medium\">\n      <Avatar id=\"size-xs\" size=\"xs\" src={person1} type=\"img\" aria-label=\"Julia Martinez\" />\n      <Avatar id=\"size-small\" size=\"small\" src={person1} type=\"img\" aria-label=\"Julia Martinez\" />\n      <Avatar id=\"size-medium\" size=\"medium\" src={person1} type=\"img\" aria-label=\"Julia Martinez\" />\n      <Avatar id=\"size-large\" size=\"large\" src={person1} type=\"img\" aria-label=\"Julia Martinez\" />\n    </Flex>\n  )\n};\n\nexport const Disable = {\n  render: () => (\n    <Flex gap=\"medium\">\n      <Avatar id=\"disabled-xs\" size=\"xs\" src={person1} type=\"img\" aria-label=\"Julia Martinez\" disabled />\n      <Avatar id=\"disabled-small\" size=\"small\" src={person1} type=\"img\" aria-label=\"Julia Martinez\" disabled />\n      <Avatar id=\"disabled-medium\" size=\"medium\" src={person1} type=\"img\" aria-label=\"Julia Martinez\" disabled />\n      <Avatar id=\"disabled-large\" size=\"large\" src={person1} type=\"img\" aria-label=\"Julia Martinez\" disabled />\n    </Flex>\n  )\n};\n\nexport const AvatarWithText = {\n  render: () => (\n    <Flex gap=\"medium\">\n      <Avatar id=\"text-xs\" size=\"xs\" type=\"text\" text=\"RM\" backgroundColor=\"lipstick\" aria-label=\"Ron Meir\" />\n      <Avatar id=\"text-small\" size=\"small\" type=\"text\" text=\"RM\" backgroundColor=\"lipstick\" aria-label=\"Ron Meir\" />\n      <Avatar id=\"text-medium\" size=\"medium\" type=\"text\" text=\"RM\" backgroundColor=\"lipstick\" aria-label=\"Ron Meir\" />\n      <Avatar id=\"text-large\" size=\"large\" type=\"text\" text=\"RM\" backgroundColor=\"done-green\" aria-label=\"Ron Meir\" />\n    </Flex>\n  )\n};\n\nexport const SquareAvatar = {\n  render: () => (\n    <Flex gap=\"medium\">\n      <Avatar id=\"square-xs\" size=\"xs\" type=\"text\" text=\"R\" backgroundColor=\"bright-blue\" square aria-label=\"Ron\" />\n      <Avatar\n        id=\"square-small\"\n        size=\"small\"\n        type=\"text\"\n        text=\"R\"\n        backgroundColor=\"bright-blue\"\n        square\n        aria-label=\"Ron\"\n      />\n      <Avatar\n        id=\"square-medium\"\n        size=\"medium\"\n        type=\"icon\"\n        icon={WhatsNew}\n        backgroundColor=\"aquamarine\"\n        square\n        aria-label=\"Present\"\n      />\n      <Avatar\n        id=\"square-large\"\n        size=\"large\"\n        type=\"text\"\n        text=\"RM\"\n        backgroundColor=\"working_orange\"\n        square\n        aria-label=\"Ron Meir\"\n      />\n    </Flex>\n  )\n};\n\nexport const AvatarWithRightBadge = {\n  render: () => (\n    <Flex gap=\"medium\">\n      <Avatar\n        id=\"right-badge-guest\"\n        size=\"large\"\n        type=\"img\"\n        src={person1}\n        bottomRightBadgeProps={{ src: guest }}\n        aria-label=\"Julia Martinez with guest badge\"\n      />\n      <Avatar\n        id=\"right-badge-owner\"\n        size=\"large\"\n        type=\"img\"\n        src={person1}\n        bottomRightBadgeProps={{ src: owner }}\n        aria-label=\"Julia Martinez with owner badge\"\n      />\n    </Flex>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { guest, owner }\n      }\n    }\n  }\n};\n\nexport const AvatarWithLeftBadge = {\n  render: () => (\n    <Flex gap=\"medium\">\n      <Avatar\n        id=\"left-badge-home\"\n        size=\"large\"\n        type=\"img\"\n        src={person1}\n        bottomLeftBadgeProps={{ src: home }}\n        aria-label=\"Julia Martinez with home badge\"\n      />\n      <Avatar\n        id=\"left-badge-minus\"\n        size=\"large\"\n        type=\"img\"\n        src={person1}\n        bottomLeftBadgeProps={{ src: minus }}\n        aria-label=\"Julia Martinez with minus badge\"\n      />\n    </Flex>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { home, minus }\n      }\n    }\n  }\n};\n\nexport const AvatarWithTooltip = {\n  render: () => (\n    <Flex direction=\"row\" gap=\"large\" align=\"start\">\n      <StoryDescription description=\"Aria label tooltip\" vertical align={StoryDescription.align.START}>\n        <Avatar id=\"tooltip-aria\" size=\"large\" type=\"img\" src={person1} aria-label={\"Julia Martinez\"} />\n      </StoryDescription>\n      <StoryDescription description=\"Text tooltip\" vertical align={StoryDescription.align.START}>\n        <Avatar\n          id=\"tooltip-text\"\n          size=\"large\"\n          type=\"img\"\n          src={person1}\n          tooltipProps={{\n            content: \"Julia Martinez\"\n          }}\n          aria-label={\"Julia Martinez\"}\n        />\n      </StoryDescription>\n      <StoryDescription description=\"JSX tooltip\" vertical align={StoryDescription.align.START}>\n        <Avatar\n          id=\"tooltip-jsx\"\n          size=\"large\"\n          type=\"img\"\n          src={person1}\n          tooltipProps={{\n            content: <b>Julia Martinez</b>,\n            position: \"bottom\"\n          }}\n          aria-label={\"Julia Martinez\"}\n        />\n      </StoryDescription>\n    </Flex>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { StoryDescription }\n      }\n    }\n  }\n};\n\nexport const ClickableAvatar = {\n  render: () => {\n    const [count, setCount] = useState(0);\n\n    const incrementCount = useCallback(() => {\n      setCount(prevState => prevState + 1);\n    }, []);\n\n    return (\n      <Flex>\n        <Flex direction=\"column\" gap=\"medium\">\n          <Avatar\n            id=\"clickable-avatar\"\n            size=\"large\"\n            type=\"img\"\n            src={person1}\n            aria-label=\"Julia Martinez (clickable)\"\n            onClick={incrementCount}\n          />\n          <Counter id=\"avatar-click-counter\" count={count} />\n        </Flex>\n      </Flex>\n    );\n  }\n};\n\nexport const MultipleAvatars = {\n  render: () => (\n    <AvatarGroup id=\"multiple-avatars-group\" max={2} size=\"large\">\n      <Avatar id=\"multiple-avatar-1\" type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n      <Avatar id=\"multiple-avatar-2\" type=\"img\" src={person2} aria-label=\"Marco DiAngelo\" />\n      <Avatar id=\"multiple-avatar-3\" type=\"img\" src={person3} aria-label=\"Liam Caldwell\" />\n    </AvatarGroup>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { person2, person3 }\n      }\n    }\n  }\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/AvatarGroup/AvatarGroup.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { UsageGuidelines } from \"vibe-storybook-components\";\nimport * as AvatarGroupStories from \"./AvatarGroup.stories\";\n\n<Meta of={AvatarGroupStories} />\n\n# AvatarGroup\n\nUse this component if you need to stack avatars as a group.\n\n<Canvas of={AvatarGroupStories.Overview} />\n\n### Import\n\n```js\nimport { AvatarGroup } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    <>\n      Use <StorybookLink page=\"Components/Tooltip\">tooltip</StorybookLink> component while hovering on the counter when\n      you need only to display the content\n    </>,\n    <>\n      If clickable and navigable list is required on counter, use{\" \"}\n      <StorybookLink page=\"Components/Menu/Menu\">Menu</StorybookLink> component\n    </>\n  ]}\n/>\n\n## Accessibility\n\n<UsageGuidelines\n  guidelines={[\n    <>\n      Use the <code>counterAriaLabel</code> prop to provide a descriptive accessible name for the counter (e.g., \"3\n      additional team members\", \"5 more participants\", \"2 hidden collaborators\").\n    </>,\n    <>\n      Ensure each <code>Avatar</code> in the group has a meaningful <code>ariaLabel</code> prop that describes the\n      person or entity (e.g., \"John Smith\", \"Sarah Johnson\", \"Design Team\").\n    </>\n  ]}\n/>\n\n## Variants\n\n### Size\n\nAvatar Group appears in 4 sizes: XS, Small, Medium, and Large.\n\n<Canvas of={AvatarGroupStories.Size} />\n\n### Color variants\n\nYou can use Light or Dark counter color to maintain visual hierarchy.\n\n<Canvas of={AvatarGroupStories.ColorVariants} />\n\n### Clickable vs. Hover\n\nIf avatars are clickable, they will be displayed via <StorybookLink page=\"Components/Menu/Menu\">Menu</StorybookLink> and user will be able to navigate each additional item.\nOtherwise, avatars will be displayed in a Tooltip with no item's navigation.\n\n<Canvas of={AvatarGroupStories.HoverVsClickable} />\n\n### Disabled\n\nUse when the avatar group is inactive in the specific context.\n\n<Canvas of={AvatarGroupStories.Disabled} />\n\n### Max avatars shown\n\nChoose the ammount of avatars you want to show\n\n<Canvas of={AvatarGroupStories.MaxAvatarsToDisplay} />\n\n### Custom counter\n\nYou can pass `counterProps` to specify counter params.\n\n<Canvas of={AvatarGroupStories.CustomCounter} />\n\n### Grid tooltip\n\nWhen tooltip text for additional avatars is not passed, extra avatars will be displayed in a grid mode.\n\n<Canvas of={AvatarGroupStories.GridTooltip} />\n\n### Virtualized list\n\nShould be used only to display large amount of avatars in default counter tooltip\n\n<Canvas of={AvatarGroupStories.VirtualizedList} />\n\n### Counter custom tooltip content\n\nCounter tooltip props can be specified in order to render tooltip with custom content.\n\n<Canvas of={AvatarGroupStories.CounterCustomTooltipContent} />\n\n## Use cases and examples\n\n### Last seen users\n\n<Canvas of={AvatarGroupStories.LastSeenUsers} />\n\n### Displaying teams\n\n<Canvas of={AvatarGroupStories.DisplayingTeams} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Avatar\", \"Badge\", \"Counter\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/AvatarGroup/AvatarGroup.stories.tsx",
    "content": "import React from \"react\";\nimport { useCallback, useState } from \"react\";\nimport { StoryDescription } from \"vibe-storybook-components\";\nimport { type Meta, type StoryObj } from \"@storybook/react\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport person1 from \"../Avatar/assets/person1.png\";\nimport person2 from \"../Avatar/assets/person2.png\";\nimport person3 from \"../Avatar/assets/person3.png\";\nimport person4 from \"../Avatar/assets/person4.png\";\nimport {\n  AvatarGroup,\n  type AvatarGroupProps,\n  Avatar,\n  Flex,\n  Slider,\n  Table,\n  TableHeader,\n  TableHeaderCell,\n  TableBody,\n  TableRow,\n  TableCell\n} from \"@vibe/core\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: AvatarGroup\n});\n\nexport default {\n  title: \"Components/AvatarGroup\",\n  component: AvatarGroup,\n  argTypes: {\n    ...metaSettings.argTypes,\n    counterProps: {\n      control: \"object\",\n      table: {\n        type: {\n          summary: \"AvatarGroupCounterVisualProps\",\n          detail: `{\n    color?: \"light\" | \"dark\";\n    count?: number;\n    prefix?: string;\n    maxDigits?: number;\n    ariaLabelItemsName?: string;\n    noAnimation?: boolean;\n    dialogContainerSelector?: string;\n}`\n        }\n      }\n    }\n  },\n  decorators: metaSettings.decorators,\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { StoryDescription, person1, person2, person3, person4 }\n      }\n    }\n  }\n} satisfies Meta<typeof AvatarGroup>;\n\ntype Story = StoryObj<typeof AvatarGroup>;\n\ninterface AvatarGroupTemplateProps extends AvatarGroupProps {\n  persons: Record<`person${1 | 2 | 3 | 4}`, string>;\n}\nconst avatarGroupTemplate = ({ persons, ...args }: AvatarGroupTemplateProps) => {\n  return (\n    <AvatarGroup size=\"large\" max={3} {...args}>\n      <Avatar type=\"img\" src={persons.person2} aria-label=\"Sophia Johnson\" />\n      <Avatar type=\"img\" src={persons.person3} aria-label=\"Marco DiAngelo\" />\n      <Avatar type=\"img\" src={persons.person4} aria-label=\"Liam Caldwell\" />\n      <Avatar type=\"img\" src={persons.person1} aria-label=\"Julia Martinez\" />\n      <Avatar type=\"img\" src={persons.person2} aria-label=\"Sophia Johnson\" />\n      <Avatar type=\"img\" src={persons.person3} aria-label=\"Marco DiAngelo\" />\n      <Avatar type=\"img\" src={persons.person4} aria-label=\"Liam Caldwell\" />\n      <Avatar type=\"img\" src={persons.person1} aria-label=\"Julia Martinez\" />\n      <Avatar type=\"img\" src={persons.person2} aria-label=\"Sophia Johnson\" />\n      <Avatar type=\"img\" src={persons.person3} aria-label=\"Marco DiAngelo\" />\n      <Avatar type=\"img\" src={persons.person4} aria-label=\"Liam Caldwell\" />\n      <Avatar type=\"img\" src={persons.person1} aria-label=\"Julia Martinez\" />\n      <Avatar type=\"text\" text=\"MR\" aria-label=\"Mark Roytstein\" />\n    </AvatarGroup>\n  );\n};\n\nexport const Overview: StoryObj<typeof avatarGroupTemplate> = {\n  render: avatarGroupTemplate.bind({}),\n  args: {\n    persons: {\n      person1: person1,\n      person2: person2,\n      person3: person3,\n      person4: person4\n    }\n  },\n  argTypes: {\n    persons: { table: { disable: true } }\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const Size: Story = {\n  render: () => (\n    <Flex direction=\"column\" gap=\"large\" align=\"start\">\n      <StoryDescription description=\"Large\" vertical align={StoryDescription.align.START}>\n        <AvatarGroup size=\"large\" type=\"img\" max={4}>\n          <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n          <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n          <Avatar type=\"img\" src={person3} aria-label=\"Marco DiAngelo\" />\n          <Avatar type=\"img\" src={person4} aria-label=\"Liam Caldwell\" />\n          <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n          <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n          <Avatar type=\"img\" src={person3} aria-label=\"Marco DiAngelo\" />\n          <Avatar type=\"img\" src={person4} aria-label=\"Liam Caldwell\" />\n          <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n          <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n          <Avatar type=\"img\" src={person3} aria-label=\"Marco DiAngelo\" />\n          <Avatar type=\"img\" src={person4} aria-label=\"Liam Caldwell\" />\n          <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n          <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n        </AvatarGroup>\n      </StoryDescription>\n      <StoryDescription description=\"Medium\" vertical align={StoryDescription.align.START}>\n        <AvatarGroup size=\"medium\" type=\"img\" max={4}>\n          <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n          <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n          <Avatar type=\"img\" src={person3} aria-label=\"Marco DiAngelo\" />\n          <Avatar type=\"img\" src={person4} aria-label=\"Liam Caldwell\" />\n          <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n          <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n          <Avatar type=\"img\" src={person3} aria-label=\"Marco DiAngelo\" />\n          <Avatar type=\"img\" src={person4} aria-label=\"Liam Caldwell\" />\n          <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n          <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n          <Avatar type=\"img\" src={person3} aria-label=\"Marco DiAngelo\" />\n          <Avatar type=\"img\" src={person4} aria-label=\"Liam Caldwell\" />\n          <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n          <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n        </AvatarGroup>\n      </StoryDescription>\n      <StoryDescription description=\"Small\" vertical align={StoryDescription.align.START}>\n        <AvatarGroup size=\"small\" type=\"img\" max={4}>\n          <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n          <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n          <Avatar type=\"img\" src={person3} aria-label=\"Marco DiAngelo\" />\n          <Avatar type=\"img\" src={person4} aria-label=\"Liam Caldwell\" />\n          <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n          <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n          <Avatar type=\"img\" src={person3} aria-label=\"Marco DiAngelo\" />\n          <Avatar type=\"img\" src={person4} aria-label=\"Liam Caldwell\" />\n          <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n          <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n          <Avatar type=\"img\" src={person3} aria-label=\"Marco DiAngelo\" />\n          <Avatar type=\"img\" src={person4} aria-label=\"Liam Caldwell\" />\n          <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n          <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n        </AvatarGroup>\n      </StoryDescription>\n      <StoryDescription description=\"XS\" vertical align={StoryDescription.align.START}>\n        <AvatarGroup size=\"xs\" type=\"img\" max={4}>\n          <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n          <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n          <Avatar type=\"img\" src={person3} aria-label=\"Marco DiAngelo\" />\n          <Avatar type=\"img\" src={person4} aria-label=\"Liam Caldwell\" />\n          <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n          <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n          <Avatar type=\"img\" src={person3} aria-label=\"Marco DiAngelo\" />\n          <Avatar type=\"img\" src={person4} aria-label=\"Liam Caldwell\" />\n          <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n          <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n          <Avatar type=\"img\" src={person3} aria-label=\"Marco DiAngelo\" />\n          <Avatar type=\"img\" src={person4} aria-label=\"Liam Caldwell\" />\n          <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n          <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n        </AvatarGroup>\n      </StoryDescription>\n    </Flex>\n  )\n};\n\nexport const ColorVariants: Story = {\n  render: () => (\n    <Flex direction=\"column\" gap=\"large\" align=\"start\">\n      <StoryDescription description=\"Light\" vertical align={StoryDescription.align.START}>\n        <AvatarGroup\n          size=\"large\"\n          type=\"img\"\n          max={4}\n          counterProps={{\n            color: \"light\"\n          }}\n        >\n          <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n          <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n          <Avatar type=\"img\" src={person3} aria-label=\"Marco DiAngelo\" />\n          <Avatar type=\"img\" src={person4} aria-label=\"Liam Caldwell\" />\n          <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n          <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n          <Avatar type=\"img\" src={person3} aria-label=\"Marco DiAngelo\" />\n          <Avatar type=\"img\" src={person4} aria-label=\"Liam Caldwell\" />\n          <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n          <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n          <Avatar type=\"img\" src={person3} aria-label=\"Marco DiAngelo\" />\n          <Avatar type=\"img\" src={person4} aria-label=\"Liam Caldwell\" />\n          <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n          <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n        </AvatarGroup>\n      </StoryDescription>\n      <StoryDescription description=\"Dark\" vertical align={StoryDescription.align.START}>\n        <AvatarGroup\n          size=\"large\"\n          type=\"img\"\n          max={4}\n          counterProps={{\n            color: \"dark\"\n          }}\n        >\n          <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n          <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n          <Avatar type=\"img\" src={person3} aria-label=\"Marco DiAngelo\" />\n          <Avatar type=\"img\" src={person4} aria-label=\"Liam Caldwell\" />\n          <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n          <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n          <Avatar type=\"img\" src={person3} aria-label=\"Marco DiAngelo\" />\n          <Avatar type=\"img\" src={person4} aria-label=\"Liam Caldwell\" />\n          <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n          <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n          <Avatar type=\"img\" src={person3} aria-label=\"Marco DiAngelo\" />\n          <Avatar type=\"img\" src={person4} aria-label=\"Liam Caldwell\" />\n          <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n          <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n        </AvatarGroup>\n      </StoryDescription>\n    </Flex>\n  )\n};\n\nexport const MaxAvatarsToDisplay: Story = {\n  render: () => {\n    const [max, setMax] = useState(4);\n\n    return (\n      <Flex direction=\"column\" gap=\"medium\" align=\"start\" style={{ width: \"100%\" }}>\n        <Slider\n          size=\"small\"\n          min={1}\n          max={14}\n          defaultValue={max}\n          onChange={value => setMax(value as number)}\n          valueText={`${max}`}\n        />\n        <AvatarGroup size=\"large\" max={max}>\n          <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n          <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n          <Avatar type=\"img\" src={person3} aria-label=\"Marco DiAngelo\" />\n          <Avatar type=\"img\" src={person4} aria-label=\"Liam Caldwell\" />\n          <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n          <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n          <Avatar type=\"img\" src={person3} aria-label=\"Marco DiAngelo\" />\n          <Avatar type=\"img\" src={person4} aria-label=\"Liam Caldwell\" />\n          <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n          <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n          <Avatar type=\"img\" src={person3} aria-label=\"Marco DiAngelo\" />\n          <Avatar type=\"img\" src={person4} aria-label=\"Liam Caldwell\" />\n          <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n          <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n        </AvatarGroup>\n      </Flex>\n    );\n  }\n};\n\nexport const HoverVsClickable: Story = {\n  render: () => {\n    const getDummyAvatarsProps = useCallback((numItems: number) => {\n      const avatarsProps = [\n        {\n          type: \"img\",\n          src: person1,\n          \"aria-label\": \"Julia Martinez\"\n        },\n        {\n          type: \"img\",\n          src: person2,\n          \"aria-label\": \"Sophia Johnson\"\n        },\n        {\n          type: \"img\",\n          src: person3,\n          \"aria-label\": \"Marco DiAngelo\"\n        },\n        {\n          type: \"img\",\n          src: person4,\n          \"aria-label\": \"Liam Caldwell\"\n        }\n      ];\n\n      const result = [];\n\n      for (let i = 0; i < numItems; i++) {\n        result.push(avatarsProps[i % avatarsProps.length]);\n      }\n\n      return result;\n    }, []);\n\n    return (\n      <Flex direction=\"row\" gap=\"large\">\n        <StoryDescription description=\"Counter hover\" vertical align={StoryDescription.align.START}>\n          <AvatarGroup\n            size=\"large\"\n            max={4}\n            counterTooltipCustomProps={{\n              position: \"bottom\"\n            }}\n          >\n            {getDummyAvatarsProps(14).map(avatarProps => (\n              <Avatar {...avatarProps} />\n            ))}\n          </AvatarGroup>\n        </StoryDescription>\n        <StoryDescription description=\"Counter click\" vertical align={StoryDescription.align.START}>\n          <Flex>\n            <AvatarGroup size=\"large\" max={4}>\n              {getDummyAvatarsProps(14).map((avatarProps, index) => (\n                <Avatar {...avatarProps} onClick={() => {}} id={String(index)} />\n              ))}\n            </AvatarGroup>\n          </Flex>\n        </StoryDescription>\n      </Flex>\n    );\n  }\n};\n\nexport const Disabled: Story = {\n  render: () => {\n    return (\n      <AvatarGroup size=\"large\" max={4} disabled>\n        <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n        <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n        <Avatar type=\"img\" src={person3} aria-label=\"Marco DiAngelo\" />\n        <Avatar type=\"img\" src={person4} aria-label=\"Liam Caldwell\" />\n        <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n        <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n        <Avatar type=\"img\" src={person3} aria-label=\"Marco DiAngelo\" />\n        <Avatar type=\"img\" src={person4} aria-label=\"Liam Caldwell\" />\n        <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n        <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n        <Avatar type=\"img\" src={person3} aria-label=\"Marco DiAngelo\" />\n        <Avatar type=\"img\" src={person4} aria-label=\"Liam Caldwell\" />\n        <Avatar type=\"img\" src={person1} aria-label=\"Julia Martinez\" />\n        <Avatar type=\"img\" src={person2} aria-label=\"Sophia Johnson\" />\n      </AvatarGroup>\n    );\n  }\n};\n\nexport const LastSeenUsers: Story = {\n  render: () => (\n    <Flex direction=\"row\" gap=\"medium\">\n      <div>Last seen</div>\n      <AvatarGroup size=\"medium\" max={4} counterProps={{ color: \"dark\" }} type=\"img\">\n        <Avatar src={person1} aria-label=\"Julia Martinez\" />\n        <Avatar src={person2} aria-label=\"Sophia Johnson\" />\n        <Avatar src={person3} aria-label=\"Marco DiAngelo\" />\n        <Avatar src={person4} aria-label=\"Liam Caldwell\" />\n        <Avatar src={person1} aria-label=\"Julia Martinez\" />\n        <Avatar src={person2} aria-label=\"Sophia Johnson\" />\n        <Avatar src={person3} aria-label=\"Marco DiAngelo\" />\n        <Avatar src={person4} aria-label=\"Liam Caldwell\" />\n        <Avatar src={person1} aria-label=\"Julia Martinez\" />\n        <Avatar src={person2} aria-label=\"Sophia Johnson\" />\n        <Avatar src={person3} aria-label=\"Marco DiAngelo\" />\n        <Avatar src={person4} aria-label=\"Liam Caldwell\" />\n        <Avatar src={person1} aria-label=\"Julia Martinez\" />\n        <Avatar src={person2} aria-label=\"Sophia Johnson\" />\n      </AvatarGroup>\n    </Flex>\n  )\n};\n\nexport const CustomCounter: Story = {\n  render: () => (\n    <AvatarGroup\n      size=\"large\"\n      type=\"img\"\n      max={4}\n      counterProps={{\n        count: 100500,\n        color: \"dark\",\n        prefix: \"\",\n        maxDigits: 5\n      }}\n    >\n      <Avatar src={person1} aria-label=\"Julia Martinez\" />\n      <Avatar src={person2} aria-label=\"Sophia Johnson\" />\n      <Avatar src={person3} aria-label=\"Marco DiAngelo\" />\n      <Avatar src={person4} aria-label=\"Liam Caldwell\" />\n    </AvatarGroup>\n  )\n};\n\nexport const GridTooltip: Story = {\n  render: () => (\n    <AvatarGroup size=\"large\" type=\"img\" max={4}>\n      <Avatar src={person1} />\n      <Avatar src={person2} />\n      <Avatar src={person3} />\n      <Avatar src={person4} />\n      <Avatar src={person1} />\n      <Avatar src={person2} />\n      <Avatar src={person3} />\n      <Avatar src={person4} />\n      <Avatar src={person1} />\n      <Avatar src={person2} />\n      <Avatar src={person3} />\n      <Avatar src={person4} />\n      <Avatar src={person1} />\n      <Avatar src={person2} />\n      <Avatar src={person3} />\n      <Avatar src={person4} />\n    </AvatarGroup>\n  )\n};\n\nexport const CounterCustomTooltipContent: Story = {\n  render: () => (\n    <AvatarGroup\n      size=\"large\"\n      type=\"img\"\n      max={4}\n      counterTooltipCustomProps={{\n        content: \"... and plenty more employees\"\n      }}\n    >\n      <Avatar src={person1} aria-label=\"Julia Martinez\" />\n      <Avatar src={person2} aria-label=\"Sophia Johnson\" />\n      <Avatar src={person3} aria-label=\"Marco DiAngelo\" />\n      <Avatar src={person4} aria-label=\"Liam Caldwell\" />\n      <Avatar src={person1} aria-label=\"Julia Martinez\" />\n      <Avatar src={person2} aria-label=\"Sophia Johnson\" />\n      <Avatar src={person3} aria-label=\"Marco DiAngelo\" />\n      <Avatar src={person4} aria-label=\"Liam Caldwell\" />\n    </AvatarGroup>\n  )\n};\n\nexport const VirtualizedList: Story = {\n  render: () => {\n    const avatars = [\n      <Avatar src={person1} aria-label=\"Julia Martinez\" />,\n      <Avatar src={person2} aria-label=\"Sophia Johnson\" />,\n      <Avatar src={person3} aria-label=\"Marco DiAngelo\" />,\n      <Avatar src={person4} aria-label=\"Liam Caldwell\" />\n    ];\n\n    const getDummyAvatars = (multiplier: number) => {\n      let result: typeof avatars = [];\n\n      for (let i = 0; i < multiplier; ++i) {\n        result = result.concat(avatars);\n      }\n\n      return result;\n    };\n\n    return (\n      <AvatarGroup size=\"large\" max={4} counterTooltipIsVirtualizedList type=\"img\">\n        {getDummyAvatars(334)}\n      </AvatarGroup>\n    );\n  }\n};\n\nexport const DisplayingTeams: Story = {\n  render: () => (\n    <Table\n      columns={[\n        {\n          id: \"name\",\n          title: \"Name\"\n        },\n        {\n          id: \"email\",\n          title: \"Email\"\n        },\n        {\n          id: \"title\",\n          title: \"Title\"\n        },\n        {\n          id: \"teams\",\n          title: \"Teams\"\n        }\n      ]}\n      errorState={<div />}\n      emptyState={<div />}\n    >\n      <TableHeader>\n        <TableHeaderCell title=\"Name\" />\n        <TableHeaderCell title=\"Email\" />\n        <TableHeaderCell title=\"Title\" />\n        <TableHeaderCell title=\"Teams\" />\n      </TableHeader>\n      <TableBody>\n        <TableRow>\n          <TableCell>\n            <Flex direction=\"row\" gap=\"small\">\n              <Avatar type=\"img\" src={person1} size=\"medium\" aria-label=\"Julia Martinez\" />\n              Julia Martinez\n            </Flex>\n          </TableCell>\n          <TableCell>julia@martinez.com</TableCell>\n          <TableCell>Developer</TableCell>\n          <TableCell>\n            <AvatarGroup\n              size=\"medium\"\n              max={2}\n              counterProps={{\n                ariaLabelItemsName: \"teams\"\n              }}\n            >\n              <Avatar type=\"text\" text=\"T1\" backgroundColor=\"peach\" aria-label=\"Team 1\" />\n              <Avatar type=\"text\" text=\"T2\" backgroundColor=\"bubble\" aria-label=\"Team 2\" />\n              <Avatar type=\"text\" text=\"T3\" backgroundColor=\"berry\" aria-label=\"Team 3\" />\n            </AvatarGroup>\n          </TableCell>\n        </TableRow>\n      </TableBody>\n    </Table>\n  )\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Badge/Badge.mdx",
    "content": "import { Badge, Link, Button, Avatar } from \"@vibe/core\";\nimport { Meta } from \"@storybook/blocks\";\nimport person from \"../Avatar/assets/person1.png\";\nimport { WhatsNew } from \"@vibe/icons\";\nimport * as BadgeStories from \"./Badge.stories\";\n\n<Meta of={BadgeStories} />\n\n# Badge\n\nBadge component is responsible for layout an indicator/counter on a child component\n\n<Canvas of={BadgeStories.Overview} />\n\n### Import\n\n```js\nimport { Badge } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Variants\n\n### States\n\nBadge can be of type Indicator or type Counter\n\n<Canvas of={BadgeStories.States} />\n\n### Button\n\nWhen using Badge on a Button element, use alignment of RECTANGULAR in order to attach it to the element\n\n<Canvas of={BadgeStories.ButtonStory} />\n\n### Avatar\n\nWhen using Badge on an Avatar element, use alignment of CIRCULAR in order to attach it to the element\n\n<Canvas of={BadgeStories.AvatarStory} />\n\n### Inline elements\n\nWhen using Badge on an inline element, use alignment of OUTSIDE in order to attach it to the element\n\n<Canvas of={BadgeStories.InlineElements} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: (\n          <Badge alignment=\"outside\">\n            <Link text=\"Read more\" />\n          </Badge>\n        ),\n        description: \"When using the badge on an inline component, apply OUTSIDE alignment to it\"\n      },\n      negative: {\n        component: (\n          <Badge>\n            <Link text=\"Read more\" />\n          </Badge>\n        ),\n        description: \"Do not leave the indicator inside the element boundaries\"\n      }\n    },\n    {\n      positive: {\n        component: (\n          <Badge>\n            <Button leftIcon={WhatsNew}>What's new</Button>\n          </Badge>\n        ),\n        description: \"Choose a color that does not blend with the one of the child component\"\n      },\n      negative: {\n        component: (\n          <Badge color=\"primary\">\n            <Button leftIcon={WhatsNew}>What's new</Button>\n          </Badge>\n        ),\n        description: \"Do not use a color that blends with the child component\"\n      }\n    },\n    {\n      positive: {\n        component: (\n          <Badge alignment=\"circular\">\n            <Avatar size=\"medium\" src={person} type=\"img\" />\n          </Badge>\n        ),\n        description: \"When using Indicator badge, anchor it at the top-right edge\"\n      },\n      negative: {\n        component: (\n          <Badge alignment=\"circular\" anchor=\"top-start\">\n            <Avatar size=\"medium\" src={person} type=\"img\" />\n          </Badge>\n        ),\n        description: \"Do not place it on any other edge\"\n      }\n    }\n  ]}\n/>\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Link\", \"Button\", \"Counter\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Badge/Badge.stories.tsx",
    "content": "import React from \"react\";\nimport { Badge, Flex, Button, Avatar, Link } from \"@vibe/core\";\nimport person from \"../Avatar/assets/person1.png\";\nimport { ExternalPage, WhatsNew } from \"@vibe/icons\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { createComponentTemplate } from \"vibe-storybook-components\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: Badge,\n  ignoreControlsPropNamesArray: [\"children\"],\n  actionPropsArray: [\"onMouseDown\"]\n});\n\nconst badgeTemplate = createComponentTemplate(Badge);\n\nexport default {\n  title: \"Components/Badge\",\n  component: Badge,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n};\n\nexport const Overview = {\n  render: badgeTemplate.bind({}),\n  name: \"Overview\",\n  args: {\n    id: \"overview-badge\",\n    children: (\n      <Button id=\"overview-badge-button\" aria-label=\"What's new button with badge\" leftIcon={WhatsNew}>\n        {\"What's new\"}\n      </Button>\n    )\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const States = {\n  render: () => (\n    <Flex gap=\"large\" justify=\"start\" align=\"start\">\n      <Flex direction=\"column\" gap=\"medium\" align=\"start\">\n        Indicator\n        <Badge id=\"indicator-badge\">\n          <Button id=\"indicator-button\" aria-label=\"What's new button with indicator\" leftIcon={WhatsNew}>\n            {\"What's new\"}\n          </Button>\n        </Badge>\n      </Flex>\n      <Flex direction=\"column\" gap=\"medium\" align=\"start\">\n        Counter\n        <Badge id=\"counter-badge\" type=\"counter\" count={100} maxDigits={2} aria-label=\"100 notifications\">\n          <Button id=\"counter-button\" aria-label=\"What's new button with counter\" leftIcon={WhatsNew}>\n            {\"What's new\"}\n          </Button>\n        </Badge>\n      </Flex>\n    </Flex>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { WhatsNew }\n      }\n    }\n  },\n  name: \"States\"\n};\n\nexport const ButtonStory = {\n  render: () => (\n    <Badge id=\"button-badge\" alignment=\"rectangular\">\n      <Button id=\"button-story-button\" aria-label=\"Button with external page icon and badge\" leftIcon={ExternalPage}>\n        Button\n      </Button>\n    </Badge>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { ExternalPage }\n      }\n    }\n  },\n  name: \"Button\"\n};\n\nexport const AvatarStory = {\n  render: () => (\n    <Badge id=\"avatar-badge\" alignment=\"circular\">\n      <Avatar id=\"badge-avatar\" size=\"large\" src={person} type=\"img\" />\n    </Badge>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { person }\n      }\n    }\n  },\n  name: \"Avatar\"\n};\n\nexport const InlineElements = {\n  render: () => (\n    <Flex direction=\"column\" gap=\"medium\" align=\"start\">\n      <Badge id=\"inline-badge-1\" alignment=\"outside\">\n        <Link id=\"inline-link-1\" text=\"Read more\" />\n      </Badge>\n      <Badge id=\"inline-badge-2\" alignment=\"outside\">\n        <Link id=\"inline-link-2\" text=\"What's new\" iconPosition=\"start\" icon={WhatsNew} />\n      </Badge>\n      <Badge id=\"inline-badge-3\" alignment=\"outside\">\n        <Link id=\"inline-link-3\" text=\"Learn more\" iconPosition=\"end\" icon={ExternalPage} />\n      </Badge>\n    </Flex>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { WhatsNew, ExternalPage }\n      }\n    }\n  },\n  name: \"Inline elements\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/BaseInput/BaseInput.stories.tsx",
    "content": "import { createComponentTemplate } from \"vibe-storybook-components\";\nimport { BaseInput } from \"@vibe/base\";\nimport { type Meta, type StoryObj } from \"@storybook/react\";\n\ntype Story = StoryObj<typeof BaseInput>;\n\nexport default {\n  title: \"Internal/BaseInput\",\n  component: BaseInput,\n  tags: [\"internal\"]\n} satisfies Meta<typeof BaseInput>;\n\nconst baseInputTemplate = createComponentTemplate(BaseInput);\n\nexport const Overview: Story = {\n  render: baseInputTemplate.bind({})\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/BaseList/BaseList.stories.tsx",
    "content": "import React, { useState } from \"react\";\nimport { type Meta, type StoryObj } from \"@storybook/react\";\nimport { BaseList } from \"../../../../../core/src/components/BaseList\";\nimport BaseItem from \"../../../../../core/src/components/BaseItem/BaseItem\";\nimport { Email, Favorite, Settings, Person, Search } from \"@vibe/icons\";\n\ntype Story = StoryObj<typeof BaseList>;\n\nexport default {\n  title: \"Internal/BaseList\",\n  component: BaseList,\n  tags: [\"internal\"]\n} satisfies Meta<typeof BaseList>;\n\nexport const Overview: Story = {\n  render: args => (\n    <BaseList {...args} aria-label=\"Example list\" style={{ width: 300 }}>\n      <BaseItem\n        item={{\n          value: \"1\",\n          label: \"First item\",\n          startElement: { type: \"icon\", value: Person }\n        }}\n      />\n      <BaseItem\n        item={{\n          value: \"2\",\n          label: \"Second item\",\n          startElement: { type: \"icon\", value: Email }\n        }}\n      />\n      <BaseItem\n        item={{\n          value: \"3\",\n          label: \"Third item\",\n          startElement: { type: \"icon\", value: Settings }\n        }}\n      />\n    </BaseList>\n  )\n};\n\nexport const WithSelectedItem: Story = {\n  render: () => (\n    <BaseList aria-label=\"List with selection\" style={{ width: 300 }} size=\"small\">\n      <BaseItem item={{ value: \"1\", label: \"Unselected item\" }} />\n      <BaseItem item={{ value: \"2\", label: \"Selected item\" }} selected />\n      <BaseItem item={{ value: \"3\", label: \"Another unselected item\" }} />\n    </BaseList>\n  )\n};\n\nexport const WithDisabledItems: Story = {\n  render: () => (\n    <BaseList aria-label=\"List with disabled items\" style={{ width: 300 }}>\n      <BaseItem item={{ value: \"1\", label: \"Enabled item\" }} />\n      <BaseItem item={{ value: \"2\", label: \"Disabled item\", disabled: true }} />\n      <BaseItem item={{ value: \"3\", label: \"Another enabled item\" }} />\n    </BaseList>\n  )\n};\n\nexport const ScrollableList: Story = {\n  render: () => (\n    <BaseList aria-label=\"Scrollable list\" maxHeight={200} style={{ width: 300 }}>\n      {Array.from({ length: 10 }, (_, i) => (\n        <BaseItem key={i} item={{ value: String(i), label: `Item ${i + 1}` }} />\n      ))}\n    </BaseList>\n  )\n};\n\nexport const WithFocusCallback: Story = {\n  render: function WithFocusCallbackExample() {\n    const [focusedIndex, setFocusedIndex] = useState(0);\n\n    return (\n      <div>\n        <p style={{ marginBottom: 16 }}>Currently focused index: {focusedIndex}</p>\n        <BaseList aria-label=\"List with focus callback\" onFocusChange={setFocusedIndex} style={{ width: 300 }}>\n          <BaseItem\n            item={{\n              value: \"1\",\n              label: \"First item\",\n              startElement: { type: \"icon\", value: Favorite }\n            }}\n          />\n          <BaseItem\n            item={{\n              value: \"2\",\n              label: \"Second item\",\n              startElement: { type: \"icon\", value: Search }\n            }}\n          />\n          <BaseItem\n            item={{\n              value: \"3\",\n              label: \"Third item\",\n              startElement: { type: \"icon\", value: Settings }\n            }}\n          />\n        </BaseList>\n      </div>\n    );\n  }\n};\n\nexport const Sizes: Story = {\n  render: () => (\n    <div style={{ display: \"flex\", gap: 24 }}>\n      <div>\n        <p style={{ marginBottom: 8 }}>Small</p>\n        <BaseList aria-label=\"Small list\" size=\"small\" style={{ width: 200 }}>\n          <BaseItem item={{ value: \"1\", label: \"Small item 1\" }} />\n          <BaseItem item={{ value: \"2\", label: \"Small item 2\" }} />\n        </BaseList>\n      </div>\n      <div>\n        <p style={{ marginBottom: 8 }}>Medium</p>\n        <BaseList aria-label=\"Medium list\" size=\"medium\" style={{ width: 200 }}>\n          <BaseItem item={{ value: \"1\", label: \"Medium item 1\" }} />\n          <BaseItem item={{ value: \"2\", label: \"Medium item 2\" }} />\n        </BaseList>\n      </div>\n      <div>\n        <p style={{ marginBottom: 8 }}>Large</p>\n        <BaseList aria-label=\"Large list\" size=\"large\" style={{ width: 200 }}>\n          <BaseItem item={{ value: \"1\", label: \"Large item 1\" }} />\n          <BaseItem item={{ value: \"2\", label: \"Large item 2\" }} />\n        </BaseList>\n      </div>\n    </div>\n  )\n};\n\nexport const AsMenu: Story = {\n  render: () => (\n    <BaseList aria-label=\"Menu example\" role=\"menu\" style={{ width: 250 }}>\n      <BaseItem\n        item={{\n          value: \"profile\",\n          label: \"View Profile\",\n          startElement: { type: \"icon\", value: Person }\n        }}\n        role=\"menuitem\"\n      />\n      <BaseItem\n        item={{\n          value: \"settings\",\n          label: \"Settings\",\n          startElement: { type: \"icon\", value: Settings }\n        }}\n        role=\"menuitem\"\n      />\n      <BaseItem\n        item={{\n          value: \"favorites\",\n          label: \"Favorites\",\n          startElement: { type: \"icon\", value: Favorite }\n        }}\n        role=\"menuitem\"\n      />\n    </BaseList>\n  )\n};\n\nexport const KeyboardNavigationWithLooping: Story = {\n  render: () => (\n    <div>\n      <p style={{ marginBottom: 16 }}>\n        Try using arrow keys to navigate. The focus will wrap from the last item to the first (and vice versa).\n      </p>\n      <BaseList aria-label=\"List with keyboard navigation\" style={{ width: 300 }}>\n        <BaseItem item={{ value: \"1\", label: \"First item - Press ↑ to wrap to last\" }} />\n        <BaseItem item={{ value: \"2\", label: \"Second item\" }} />\n        <BaseItem item={{ value: \"3\", label: \"Third item\" }} />\n        <BaseItem item={{ value: \"4\", label: \"Fourth item - Press ↓ to wrap to first\" }} />\n      </BaseList>\n    </div>\n  )\n};\n\nexport const HomeEndNavigation: Story = {\n  render: () => (\n    <div>\n      <p style={{ marginBottom: 16 }}>\n        Press <strong>Home</strong> to jump to the first item, or <strong>End</strong> to jump to the last item.\n      </p>\n      <BaseList aria-label=\"List with Home/End navigation\" style={{ width: 300 }}>\n        {Array.from({ length: 8 }, (_, i) => (\n          <BaseItem key={i} item={{ value: String(i), label: `Item ${i + 1}` }} />\n        ))}\n      </BaseList>\n    </div>\n  )\n};\n\nexport const PageUpDownNavigation: Story = {\n  render: () => (\n    <div>\n      <p style={{ marginBottom: 16 }}>\n        Press <strong>Page Up</strong> or <strong>Page Down</strong> to move by 10 items at a time.\n      </p>\n      <BaseList aria-label=\"List with PageUp/PageDown navigation\" maxHeight={300} style={{ width: 300 }}>\n        {Array.from({ length: 25 }, (_, i) => (\n          <BaseItem key={i} item={{ value: String(i), label: `Item ${i + 1}` }} />\n        ))}\n      </BaseList>\n    </div>\n  )\n};\n\nexport const DefaultFocusIndex: Story = {\n  render: () => (\n    <div>\n      <p style={{ marginBottom: 16 }}>This list starts with the third item focused (defaultFocusIndex=2).</p>\n      <BaseList aria-label=\"List with default focus\" defaultFocusIndex={2} style={{ width: 300 }}>\n        <BaseItem item={{ value: \"1\", label: \"First item\" }} />\n        <BaseItem item={{ value: \"2\", label: \"Second item\" }} />\n        <BaseItem item={{ value: \"3\", label: \"Third item (initially focused)\" }} />\n        <BaseItem item={{ value: \"4\", label: \"Fourth item\" }} />\n      </BaseList>\n    </div>\n  )\n};\n\nexport const WithAriaControls: Story = {\n  render: () => {\n    const detailsId = \"list-details\";\n    return (\n      <div>\n        <p style={{ marginBottom: 16 }}>\n          This list controls the details panel below (using <code>aria-controls</code>).\n        </p>\n        <BaseList aria-label=\"Navigation list\" aria-controls={detailsId} style={{ width: 300 }}>\n          <BaseItem\n            item={{\n              value: \"1\",\n              label: \"Settings\",\n              startElement: { type: \"icon\", value: Settings }\n            }}\n          />\n          <BaseItem\n            item={{\n              value: \"2\",\n              label: \"Profile\",\n              startElement: { type: \"icon\", value: Person }\n            }}\n          />\n          <BaseItem\n            item={{\n              value: \"3\",\n              label: \"Favorites\",\n              startElement: { type: \"icon\", value: Favorite }\n            }}\n          />\n        </BaseList>\n        <div id={detailsId} style={{ marginTop: 16, padding: 16, border: \"1px solid #ccc\", borderRadius: 4 }}>\n          <p>Details panel controlled by the list above</p>\n        </div>\n      </div>\n    );\n  }\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Box/Box.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { UsageGuidelines } from \"vibe-storybook-components\";\nimport { TipBenefits } from \"./Box.stories.helpers\";\nimport * as BoxStories from \"./Box.stories\";\n\n<Meta of={BoxStories} />\n\n# Box\n\nBox component is used as a wrapper component.\n\nIts purpose is to help scaffold compositions while using Vibe's prop keys without writing new CSS. <br />It can be used as a container for\natom based compositions, it can accept all Vibe style related props and have a semantic html tag.\n\n<Canvas of={BoxStories.Overview} />\n\n### Import\n\n```js\nimport { Box } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Use as a styled container\",\n    \"Use to add spacing, borders, and rounded corners to areas of content\",\n    \"Use as an inner component for spacing or styles\"\n  ]}\n/>\n\n<TipBenefits />\n\n## Utility props\n\n### BACKGROUNDS COLORS\n\n<Canvas of={BoxStories.BackgroundColors} />\n\n### TEXT COLORS\n\n<Canvas of={BoxStories.TextColors} />\n\n### BORDER\n\n<Canvas of={BoxStories.Border} />\n\n### BORDER COLOR\n\n<Canvas of={BoxStories.BorderColor} />\n\n### ROUNDED CORNERS\n\n#### Size props\n\n<Canvas of={BoxStories.RoundCorners} />\n\n### SHADOW\n\n<Canvas of={BoxStories.Shadow} />\n\n### MARGIN\n\n#### Size props\n\n<Canvas of={BoxStories.Margin} />\n\n#### Property variations per each size:\n\n```\nmargin\nmarginX (x axis: left, right)\nmarginY (y axis: top, bottom)\nmarginTop\nmarginEnd\nmarginBottom\nmarginStart\n```\n\n#### Aligning Auto and none\n\neach property variation can hold additional values for:\n\n```\nAUTO\nNONE\n```\n\n### PADDING\n\n#### Size props\n\n<Canvas of={BoxStories.Padding} />\n\n#### Property variations per each size:\n\n```\npadding\npaddingX (x axis: left, right)\npaddingY (y axis: top, bottom)\npaddingTop\npaddingEnd\npaddingBottom\npaddingStart\n```\n\n### Component Disabled\n\n<Canvas of={BoxStories.Disabled} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Flex\", \"Divider\", \"DialogContentContainer\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Box/Box.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { Tip } from \"vibe-storybook-components\";\n\nexport const TipBenefits = () => (\n  <Tip title=\"Benefits of the Box component\">Easily add Vibe styles without adding css</Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/Box/Box.stories.tsx",
    "content": "import React from \"react\";\nimport { Box, type BoxProps, Divider } from \"@vibe/core\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { type StoryFn } from \"@storybook/react\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: Box\n});\n\n//TODO remove when remove the flex class from the stories\nmetaSettings.decorators = [\n  ...(metaSettings.decorators || []),\n  (Story: StoryFn) => (\n    <div style={{ width: \"100%\" }}>\n      <Story />\n    </div>\n  )\n];\nexport default {\n  title: \"Layout/Box\",\n  component: Box,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n};\n\nconst boxTemplate = (args: BoxProps) => (\n  <Box border rounded=\"medium\" padding=\"large\" marginBottom=\"medium\" {...args} style={{ width: \"100%\" }}>\n    Box composite component\n  </Box>\n);\n\nexport const Overview = {\n  render: boxTemplate.bind({}),\n  name: \"Overview\",\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const BackgroundColors = {\n  render: () => (\n    <>\n      <Box backgroundColor=\"primaryBackgroundColor\" padding=\"large\" marginBottom=\"medium\">\n        primaryBackgroundColor\n      </Box>\n      <Box backgroundColor=\"secondaryBackgroundColor\" padding=\"large\" marginBottom=\"medium\">\n        secondaryBackgroundColor\n      </Box>\n      <Box backgroundColor=\"greyBackgroundColor\" padding=\"large\" marginBottom=\"medium\">\n        greyBackgroundColor\n      </Box>\n      <Box backgroundColor=\"allgreyBackgroundColor\" padding=\"large\" marginBottom=\"medium\">\n        allgreyBackgroundColor\n      </Box>\n      <Box\n        textColor=\"textColorOnInverted\"\n        backgroundColor=\"invertedColorBackground\"\n        padding=\"large\"\n        marginBottom=\"medium\"\n      >\n        invertedColorBackground\n      </Box>\n    </>\n  )\n};\n\nexport const TextColors = {\n  render: () => (\n    <>\n      <Box textColor=\"primaryTextColor\" padding=\"large\" marginBottom=\"medium\">\n        textPrimaryTextColor\n      </Box>\n      <Box\n        backgroundColor=\"invertedColorBackground\"\n        textColor=\"textColorOnInverted\"\n        padding=\"large\"\n        marginBottom=\"medium\"\n      >\n        textColorOnInverted\n      </Box>\n      <Box textColor=\"secondaryTextColor\" padding=\"large\" marginBottom=\"medium\">\n        secondaryTextColor\n      </Box>\n    </>\n  )\n};\n\nexport const Border = {\n  render: () => (\n    <>\n      <Box border padding=\"large\" marginBottom=\"medium\">\n        default\n      </Box>\n    </>\n  )\n};\n\nexport const BorderColor = {\n  render: () => (\n    <>\n      <Box border borderColor=\"uiBorderColor\" padding=\"large\" marginBottom=\"medium\">\n        uiBorderColor\n      </Box>\n      <Box border borderColor=\"layoutBorderColor\" padding=\"large\" marginBottom=\"medium\">\n        layoutBorderColor\n      </Box>\n    </>\n  )\n};\n\nexport const RoundCorners = {\n  render: () => (\n    <>\n      <Box border rounded=\"small\" padding=\"large\" marginBottom=\"medium\">\n        small\n      </Box>\n      <Box border rounded=\"medium\" padding=\"large\" marginBottom=\"medium\">\n        medium\n      </Box>\n      <Box border rounded=\"big\" padding=\"large\" marginBottom=\"medium\">\n        big\n      </Box>\n    </>\n  )\n};\n\nexport const Shadow = {\n  render: () => (\n    <>\n      <Box shadow=\"xs\" padding=\"large\" marginBottom=\"medium\">\n        xs\n      </Box>\n      <Box shadow=\"small\" padding=\"large\" marginBottom=\"medium\">\n        small\n      </Box>\n      <Box shadow=\"medium\" padding=\"large\" marginBottom=\"medium\">\n        medium\n      </Box>\n      <Box shadow=\"large\" padding=\"large\" marginBottom=\"medium\">\n        large\n      </Box>\n    </>\n  )\n};\n\nexport const Margin = {\n  render: () => (\n    <>\n      <Box backgroundColor=\"allgreyBackgroundColor\">\n        <Box backgroundColor=\"primaryBackgroundColor\" border margin=\"xs\">\n          xs\n        </Box>\n      </Box>\n      <Divider withoutMargin />\n      <Box backgroundColor=\"allgreyBackgroundColor\">\n        <Box backgroundColor=\"primaryBackgroundColor\" border margin=\"small\">\n          small\n        </Box>\n      </Box>\n      <Divider withoutMargin />\n      <Box backgroundColor=\"allgreyBackgroundColor\">\n        <Box backgroundColor=\"primaryBackgroundColor\" border margin=\"medium\">\n          medium\n        </Box>\n      </Box>\n      <Divider withoutMargin />\n      <Box backgroundColor=\"allgreyBackgroundColor\">\n        <Box backgroundColor=\"primaryBackgroundColor\" border margin=\"large\">\n          large\n        </Box>\n      </Box>\n      <Divider withoutMargin />\n      <Box backgroundColor=\"allgreyBackgroundColor\">\n        <Box backgroundColor=\"primaryBackgroundColor\" border margin=\"xl\">\n          xl\n        </Box>\n      </Box>\n      <Divider withoutMargin />\n      <Box backgroundColor=\"allgreyBackgroundColor\">\n        <Box backgroundColor=\"primaryBackgroundColor\" border margin=\"xxl\">\n          xxl\n        </Box>\n      </Box>\n      <Divider withoutMargin />\n      <Box backgroundColor=\"allgreyBackgroundColor\">\n        <Box backgroundColor=\"primaryBackgroundColor\" border margin=\"xxxl\">\n          xxxl\n        </Box>\n      </Box>\n      <Divider withoutMargin />\n    </>\n  )\n};\n\nexport const Padding = {\n  render: () => (\n    <>\n      <Box style={{ backgroundColor: \"var(--color-sky-selected)\" }} marginBottom=\"medium\" border padding=\"xs\">\n        <Box backgroundColor=\"primaryBackgroundColor\">xs</Box>\n      </Box>\n      <Box style={{ backgroundColor: \"var(--color-sky-selected)\" }} marginBottom=\"medium\" border padding=\"small\">\n        <Box backgroundColor=\"primaryBackgroundColor\">small</Box>\n      </Box>\n      <Box style={{ backgroundColor: \"var(--color-sky-selected)\" }} marginBottom=\"medium\" border padding=\"medium\">\n        <Box backgroundColor=\"primaryBackgroundColor\">medium</Box>\n      </Box>\n      <Box style={{ backgroundColor: \"var(--color-sky-selected)\" }} marginBottom=\"medium\" border padding=\"large\">\n        <Box backgroundColor=\"primaryBackgroundColor\">large</Box>\n      </Box>\n      <Divider withoutMargin />\n      <Box style={{ backgroundColor: \"var(--color-sky-selected)\" }} marginBottom=\"medium\" border padding=\"xl\">\n        <Box backgroundColor=\"primaryBackgroundColor\">xl</Box>\n      </Box>\n      <Box style={{ backgroundColor: \"var(--color-sky-selected)\" }} marginBottom=\"medium\" border padding=\"xxl\">\n        <Box backgroundColor=\"primaryBackgroundColor\">xxl</Box>\n      </Box>\n      <Box style={{ backgroundColor: \"var(--color-sky-selected)\" }} marginBottom=\"medium\" border padding=\"xxxl\">\n        <Box backgroundColor=\"primaryBackgroundColor\">xxxl</Box>\n      </Box>\n    </>\n  )\n};\n\nexport const Disabled = {\n  render: () => (\n    <Box backgroundColor=\"allgreyBackgroundColor\" border disabled padding=\"large\" marginBottom=\"medium\">\n      disabled\n    </Box>\n  )\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/BreadcrumbsBar/BreadcrumbItem.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport * as BreadcrumbItemStories from \"./BreadcrumbItem.stories\";\n\n<Meta of={BreadcrumbItemStories} />\n\n# BreadcrumbItem\n\n<Canvas of={BreadcrumbItemStories.Overview} />\n\n### Import\n\n```js\nimport { BreadcrumbItem } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Variants\n\n### States\n\n<Canvas of={BreadcrumbItemStories.States} />\n\n### With icon\n\n<Canvas of={BreadcrumbItemStories.WithIcon} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/BreadcrumbsBar/BreadcrumbItem.stories.scss",
    "content": ".monday-storybook-breadcrumb-item {\n  &_column-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 40px;\n    ol {\n      padding: 0;\n    }\n  }\n\n  &_row-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 50px;\n    span {\n      width: 100px;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/pages/components/BreadcrumbsBar/BreadcrumbItem.stories.tsx",
    "content": "import React from \"react\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { createComponentTemplate } from \"vibe-storybook-components\";\nimport { BreadcrumbsBar, BreadcrumbItem } from \"@vibe/core\";\nimport { Workspace } from \"@vibe/icons\";\nimport \"./BreadcrumbItem.stories.scss\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: BreadcrumbItem,\n  iconPropNamesArray: [\"icon\"]\n});\n\nconst breadcrumbItemTemplate = createComponentTemplate(BreadcrumbItem);\n\nexport default {\n  title: \"Components/BreadcrumbsBar/BreadcrumbItem\",\n  component: BreadcrumbItem,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators,\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Workspace }\n      }\n    }\n  }\n};\n\nexport const Overview = {\n  render: breadcrumbItemTemplate.bind({}),\n  name: \"Overview\",\n\n  args: {\n    text: \"Workspace\",\n    icon: Workspace\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const States = {\n  render: () => (\n    <div className=\"monday-storybook-breadcrumb-item_column-wrapper\">\n      <div className=\"monday-storybook-breadcrumb-item_row-wrapper\">\n        <span>Link</span>\n        <BreadcrumbsBar type=\"navigation\">\n          <BreadcrumbItem text=\"Workspace\" icon={Workspace} link=\"https://www.google.com\" />\n        </BreadcrumbsBar>\n      </div>\n      <div className=\"monday-storybook-breadcrumb-item_row-wrapper\">\n        <span>Function</span>\n        <BreadcrumbsBar type=\"navigation\">\n          <BreadcrumbItem\n            text=\"Workspace\"\n            icon={Workspace}\n            onClick={() => {\n              alert(\"Hello\");\n            }}\n          />\n        </BreadcrumbsBar>\n      </div>\n      <div className=\"monday-storybook-breadcrumb-item_row-wrapper\">\n        <span>Disabled</span>\n        <BreadcrumbsBar type=\"indication\">\n          <BreadcrumbItem text=\"Workspace\" icon={Workspace} disabled />\n        </BreadcrumbsBar>\n      </div>\n      <div className=\"monday-storybook-breadcrumb-item_row-wrapper\">\n        <span>Current</span>\n        <BreadcrumbsBar type=\"indication\">\n          <BreadcrumbItem text=\"Workspace\" icon={Workspace} isCurrent />\n        </BreadcrumbsBar>\n      </div>\n    </div>\n  ),\n\n  name: \"States\"\n};\n\nexport const WithIcon = {\n  render: () => (\n    <div className=\"monday-storybook-breadcrumb-item_column-wrapper\">\n      <div className=\"monday-storybook-breadcrumb-item_row-wrapper\">\n        <span>With Icon</span>\n        <BreadcrumbsBar type=\"indication\">\n          <BreadcrumbItem text=\"Workspace\" icon={Workspace} />\n        </BreadcrumbsBar>\n      </div>\n      <div className=\"monday-storybook-breadcrumb-item_row-wrapper\">\n        <span>Without Icon</span>\n        <BreadcrumbsBar type=\"indication\">\n          <BreadcrumbItem text=\"Workspace\" />\n        </BreadcrumbsBar>\n      </div>\n    </div>\n  ),\n\n  name: \"With icon\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/BreadcrumbsBar/BreadcrumbsBar.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { BreadcrumbsBar, BreadcrumbItem, Avatar, Text, DialogContentContainer } from \"@vibe/core\";\nimport { Board, Folder, Group, Workspace } from \"@vibe/icons\";\nimport person3 from \"./assets/person3.png\";\nimport do1 from \"./assets/do1.png\";\nimport dont1 from \"./assets/dont1.png\";\nimport { TipCheckYourself } from \"./BreadcrumbsBar.stories.helpers\";\nimport * as BreadcrumbsBarStories from \"./BreadcrumbsBar.stories\";\nimport styles from \"./BreadcrumbsBar.stories.module.scss\";\n\n<Meta of={BreadcrumbsBarStories} />\n\n# BreadcrumbsBar\n\nBreadcrumbs allow users to keep track and maintain awareness of their location as they navigate through pages, folders, files, etc.\n\n<Canvas of={BreadcrumbsBarStories.Overview} />\n\n### Import\n\n```js\nimport { BreadcrumbsBar } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Breadcrumbs show users their current location relative to the information architecture and enable them to quickly move up to a parent level or previous step\",\n    \"Effective in a hierarchy of more than two levels.\",\n    \"Start with the highest level parent page and move deeper into the information architecture as the breadcrumb trail progresses.\",\n    \"Use breadcrumbs when the user is most likely to have landed on the page from an external source.\",\n    \"Place breadcrumbs at the top left corner of the screen, above the page title.\"\n  ]}\n/>\n\n## Accessibility\n\n<UsageGuidelines\n  guidelines={[\n    <>\n      Use the <code>type=\"navigation\"</code> prop when breadcrumbs are clickable for navigation. This automatically\n      enables keyboard navigation and proper button/link semantics.\n    </>,\n    <>\n      For clickable breadcrumbs, ensure all items have descriptive <code>text</code> props that clearly indicate what\n      section or page they represent.\n    </>,\n    <>\n      When using icons in breadcrumbs, ensure they are purely decorative and don't replace the descriptive text, as\n      screen readers will announce the text content.\n    </>,\n    <>\n      Use the <code>isCurrent</code> prop on BreadcrumbItem to mark the current page. This ensures screen readers\n      understand the user's current location in the navigation hierarchy.\n    </>\n  ]}\n/>\n<TipCheckYourself />\n\n## Variants\n\n### Text only\n\n<Canvas of={BreadcrumbsBarStories.TextOnly} />\n\n### With icons\n\n<Canvas of={BreadcrumbsBarStories.WithIcons} />\n\n### With Breadcrumb Menu\n\n<Canvas of={BreadcrumbsBarStories.WithBreadcrumbMenu} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: <img src={do1} alt=\"do1\" style={{ width: \"250px\" }} />,\n        description:\n          \"Show the current step as the last item when using overflow behavior, and use only if content is overflowing and not as an aesthetic action.\"\n      },\n      negative: {\n        component: <img src={dont1} alt=\"dont1\" style={{ width: \"120px\" }} />,\n        description:\n          \"overflow on the last item causes disorientation. Moreover using overflow on individual items prevent the user of essential information unnecessarily..\"\n      }\n    },\n    {\n      positive: {\n        component: (\n          <BreadcrumbsBar type=\"navigation\">\n            <BreadcrumbItem text=\"Workspace\" icon={Workspace} isCurrent />\n            <BreadcrumbItem text=\"Folder\" icon={Folder} />\n            <BreadcrumbItem text=\"Board\" icon={Board} />\n            <BreadcrumbItem text=\"Group\" icon={Group} />\n          </BreadcrumbsBar>\n        ),\n        description: \"If there’s a need to insert an icon, use for all items.\"\n      },\n      negative: {\n        component: (\n          <BreadcrumbsBar type=\"navigation\">\n            <BreadcrumbItem text=\"Workspace\" icon={Workspace} isCurrent />\n            <BreadcrumbItem text=\"Folder\" />\n            <BreadcrumbItem text=\"Board\" />\n            <BreadcrumbItem text=\"Group\" />\n          </BreadcrumbsBar>\n        ),\n        description: \"Don’t use icons if not applied to all steps.\"\n      }\n    },\n    {\n      positive: {\n        component: (\n          <DialogContentContainer\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"var(--space-12)\"\n            }}\n          >\n            <Avatar size=\"medium\" src={person3} type=\"img\" />\n            <div className={styles.list}>\n              <Text type=\"text1\" weight=\"medium\">\n                Rotem Dekel\n              </Text>\n              <BreadcrumbsBar type=\"navigation\">\n                <BreadcrumbItem text=\"User research\" icon={Board} />\n                <BreadcrumbItem text=\"Video sessions\" icon={Group} />\n              </BreadcrumbsBar>\n            </div>\n          </DialogContentContainer>\n        ),\n        description: \"Use breadcrumbs when there is more than two levels of hierarchy.\"\n      },\n      negative: {\n        component: (\n          <DialogContentContainer\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"var(--space-12)\"\n            }}\n          >\n            <Avatar size=\"medium\" src={person3} type=\"img\" />\n            <div className={styles.list}>\n              <Text type=\"text1\" weight=\"medium\">\n                Rotem Dekel\n              </Text>\n              <BreadcrumbsBar type=\"navigation\">\n                <BreadcrumbItem text=\"User research\" icon={Board} />\n              </BreadcrumbsBar>\n            </div>\n          </DialogContentContainer>\n        ),\n        description: \"Don’t use breadcrumbs when there is only one level of navigation or hierachy.\"\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### Navigatable breadcrumbs\n\nUse when breadcrumbs are clickable and are used for information and navigation\n\n<Canvas of={BreadcrumbsBarStories.NavigatableBreadcrumbs} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"ButtonGroup\", \"MultiStepIndicator\", \"Tabs\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/BreadcrumbsBar/BreadcrumbsBar.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const TipCheckYourself = () => (\n  <Tip title=\"Check yourself\">\n    If you are taking users through a multistep process, use the{\" \"}\n    <StorybookLink page=\"Components/MultiStepIndicator\" size=\"small\">\n      MultiStepIndicator\n    </StorybookLink>{\" \"}\n    component instead.\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/BreadcrumbsBar/BreadcrumbsBar.stories.module.scss",
    "content": ".list ol {\n  padding-inline-start: 0;\n  padding: 0;\n  margin: 0;\n}\n"
  },
  {
    "path": "packages/docs/src/pages/components/BreadcrumbsBar/BreadcrumbsBar.stories.tsx",
    "content": "import React from \"react\";\nimport {\n  BreadcrumbsBar,\n  type BreadcrumbBarProps,\n  Avatar,\n  Flex,\n  Text,\n  BreadcrumbMenu,\n  BreadcrumbMenuItem,\n  BreadcrumbItem,\n  type BreadcrumbItemProps\n} from \"@vibe/core\";\nimport { Board, Folder, Group, Workspace, Item } from \"@vibe/icons\";\nimport person3 from \"./assets/person3.png\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport styles from \"./BreadcrumbsBar.stories.module.scss\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: BreadcrumbsBar\n});\n\nexport default {\n  title: \"Components/BreadcrumbsBar/BreadcrumbsBar\",\n  component: BreadcrumbsBar,\n  argTypes: {\n    ...metaSettings.argTypes,\n    children: {\n      description: \"Breadcrumb item, each containing text and an optional icon, or a BreadcrumbMenu\",\n      control: \"object\",\n      table: {\n        type: {\n          summary: \"(BreadcrumbItemProps | BreadcrumbMenuProps)[]\",\n          detail: `{\n            text: string;\n            icon?: React.ReactNode;\n            children?: BreadcrumbMenuItemProps[];\n          }[]`\n        },\n        defaultValue: {\n          summary: `[ { text: \"Workspace\", icon: <IconName /> } ]`\n        }\n      }\n    }\n  },\n  decorators: metaSettings.decorators,\n  parameters: {\n    docs: {\n      transformSource: (src: string) => {\n        return src.replace(/icon:\\s*function[^{]+\\{[^}]+\\}/g, \"icon: <Icon />\");\n      },\n      liveEdit: {\n        scope: { Board, Group, Item }\n      }\n    }\n  }\n};\n\nexport const Overview = {\n  render: (args: BreadcrumbBarProps) => (\n    <BreadcrumbsBar {...args}>\n      {args.children &&\n        (args.children as BreadcrumbItemProps[]).map(item => (\n          <BreadcrumbItem key={item.text} text={item.text} icon={item.icon} />\n        ))}\n    </BreadcrumbsBar>\n  ),\n  args: {\n    children: [\n      {\n        text: \"Workspace\",\n        icon: Workspace\n      },\n      {\n        text: \"Folder\",\n        icon: Folder\n      },\n      {\n        text: \"Board\",\n        icon: Board\n      },\n      {\n        text: \"Group\",\n        icon: Group\n      }\n    ]\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const TextOnly = {\n  render: () => (\n    <BreadcrumbsBar type=\"indication\">\n      <BreadcrumbItem text=\"Workspace\" isCurrent />\n      <BreadcrumbItem text=\"Folder\" />\n      <BreadcrumbItem text=\"Board\" />\n      <BreadcrumbItem text=\"Group\" />\n    </BreadcrumbsBar>\n  ),\n  name: \"Text only\"\n};\n\nexport const WithIcons = {\n  render: () => (\n    <BreadcrumbsBar type=\"navigation\">\n      <BreadcrumbItem text=\"Workspace\" icon={Workspace} isCurrent />\n      <BreadcrumbItem text=\"Folder\" icon={Folder} />\n      <BreadcrumbItem text=\"Board\" icon={Board} />\n      <BreadcrumbItem text=\"Group\" icon={Group} />\n    </BreadcrumbsBar>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Workspace, Folder }\n      }\n    }\n  },\n\n  name: \"With icons\"\n};\n\nexport const NavigatableBreadcrumbs = {\n  render: () => (\n    <Flex gap=\"small\">\n      <Avatar size=\"medium\" src={person3} type=\"img\" />\n      <div className={styles.list}>\n        <Text type=\"text1\" weight=\"medium\">\n          Rotem Dekel\n        </Text>\n        <BreadcrumbsBar type=\"navigation\">\n          <BreadcrumbItem text=\"User research\" icon={Board} />\n          <BreadcrumbItem text=\"Video sessions\" icon={Group} />\n        </BreadcrumbsBar>\n      </div>\n    </Flex>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { styles, person3 }\n      }\n    }\n  },\n\n  name: \"Navigatable breadcrumbs\"\n};\n\nexport const WithBreadcrumbMenu = {\n  render: () => (\n    <BreadcrumbsBar type=\"navigation\">\n      <BreadcrumbItem text=\"Board\" icon={Board} />\n      <BreadcrumbItem text=\"Group\" icon={Group} />\n      <BreadcrumbMenu>\n        <BreadcrumbMenuItem title=\"Item 1\" onClick={() => alert(\"Item 1 clicked\")} />\n        <BreadcrumbMenuItem title=\"Item 2\" link=\"https://www.monday.com\" />\n        <BreadcrumbMenuItem title=\"Item 3\" link=\"https://www.monday.com\" />\n      </BreadcrumbMenu>\n      <BreadcrumbItem text=\"My Item\" icon={Item} isCurrent />\n    </BreadcrumbsBar>\n  )\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Button/Button.mdx",
    "content": "import { Button } from \"@vibe/core\";\nimport { Meta } from \"@storybook/blocks\";\nimport { TipIconButton } from \"./Button.stories.helpers\";\nimport * as ButtonStories from \"./Button.stories\";\n\n<Meta of={ButtonStories} />\n\n# Button\n\nButtons allow users to trigger an action or event with a single click.\nFor example, you can use a button for allowing the functionality of submitting a form, opening a dialog, canceling an action,\nor performing a delete operation.\n\n<Canvas of={ButtonStories.Overview} />\n\n### Import\n\n```js\nimport { Button } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Buttons may contain icon, on the left or the right side\",\n    \"Use 8 px spacing between buttons\",\n    \"Replace text with a loader if action is submitted, but still processing\",\n    \"Button width is set by it’s content, avoid changing it width\",\n    \"Use only one primary button, and any remaining calls to action should be represented as lower emphasis buttons\"\n  ]}\n/>\n\n<TipIconButton />\n\n## Accessibility\n\n<UsageGuidelines\n  guidelines={[\n    <>\n      Using an <code>id</code> is recommended for all instances to ensure proper label association.\n    </>,\n    <>\n      Always provide descriptive text content for buttons, or use <code>ariaLabel</code> prop when buttons contain only\n      icons.\n    </>,\n    <>\n      Use <code>ariaLabel</code> prop when you need to provide a custom accessible name that differs from the visible\n      button text or for icon-only buttons.\n    </>,\n    <>\n      Use <code>ariaLabeledBy</code> prop when an external element provides the accessible name for the button.\n    </>,\n    <>\n      Use <code>ariaHasPopup</code> prop when the button triggers a popup menu or dialog.\n    </>,\n    <>\n      Use <code>ariaExpanded</code> prop to indicate when a popup triggered by the button is open or closed.\n    </>,\n    <>\n      Use <code>ariaControls</code> prop to link the button to the element it controls.\n    </>,\n    <>\n      Use <code>aria-describedby</code> prop when additional descriptive text is needed for the button.\n    </>,\n    <>\n      Use <code>aria-pressed</code> prop for toggle buttons to indicate their current pressed state.\n    </>\n  ]}\n/>\n\n## Variants\n\n### Button kinds\n\nThere can be more than one button in a screen, but to create the hierarchy of actions we need to use button kinds.\n\n<Canvas of={ButtonStories.ButtonKinds} />\n\n### Sizes\n\n<Canvas of={ButtonStories.Sizes} />\n\n### Disabled\n\nSet disable button for something that isn’t usable. Use a tooltip on hover in order to indicate the reason of the disabled action.\n\n<Canvas of={ButtonStories.Disabled} />\n\n### States\n\n<Canvas of={ButtonStories.States} />\n\n### Positive and Negative\n\n<Canvas of={ButtonStories.PositiveAndNegative} />\n\n### Icons\n\n<Canvas of={ButtonStories.Icons} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: <Button>Get started</Button>,\n        description: \"Use 1 or 2 words, no longer than 4 words, with fewer than 20 characters including spaces.\"\n      },\n      negative: {\n        component: <Button>Get started and enjoy discount!</Button>,\n        description: \"Don’t use punctuation marks such as periods or exclamation points.\"\n      }\n    },\n    {\n      positive: {\n        component: <Button>Get started</Button>,\n        description: \"Use sentence-case capitalization.\"\n      },\n      negative: {\n        component: [<Button>Get Started</Button>, <Button>GET STARTED</Button>],\n        description: \"Don’t use title case captalization or all caps.\"\n      }\n    },\n    {\n      positive: {\n        component: [<Button kind=\"tertiary\">Cancel</Button>, <Button>Get started</Button>],\n        description: \"Use primary button as the main action , put the tertiary as the second option.\"\n      },\n      negative: {\n        component: [<Button>Get started</Button>, <Button kind=\"secondary\">Cancel</Button>],\n        description: \"Use primary button next to secondary.\"\n      }\n    },\n    {\n      positive: {\n        component: [<Button kind=\"tertiary\">Cancel</Button>, <Button>Get started</Button>],\n        description: \"Use active verbs or phrases that clearly indicate action.\"\n      },\n      negative: {\n        component: [<Button kind=\"tertiary\">Yes</Button>, <Button>No</Button>],\n        description: \"Use vague and generic labels that make the user read the dialog before taking action.\"\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### Loading state\n\n<Canvas of={ButtonStories.LoadingState} />\n\n### Success state\n\n<Canvas of={ButtonStories.SuccessState} />\n\n### On color state\n\n<Canvas of={ButtonStories.OnColorStates} />\n\n### Adjacent buttons\n\n<Canvas of={ButtonStories.AdjacentButtons} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"SplitButton\", \"ButtonGroup\", \"Badge\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Button/Button.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const TipIconButton = () => (\n  <Tip>\n    If you need to use icon as button with no text, check out{\" \"}\n    <StorybookLink page=\"Components/IconButton\" size=\"small\">\n      IconButton\n    </StorybookLink>{\" \"}\n    component\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/Button/Button.stories.tsx",
    "content": "import React from \"react\";\nimport { useCallback, useState } from \"react\";\nimport { createComponentTemplate } from \"vibe-storybook-components\";\nimport { Add, Calendar, Check, Remove } from \"@vibe/icons\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { Button, Text } from \"@vibe/core\";\nimport { type Meta, type StoryObj } from \"@storybook/react\";\n\ntype Story = StoryObj<typeof Button>;\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: Button,\n  iconPropNamesArray: [\"leftIcon\", \"rightIcon\", \"successIcon\"],\n  actionPropsArray: [\"onClick\"]\n});\n\nexport default {\n  title: \"Components/Button\",\n  component: Button,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n} satisfies Meta<typeof Button>;\n\nconst buttonTemplate = createComponentTemplate(Button);\n\nexport const Overview: Story = {\n  render: buttonTemplate.bind({}),\n  args: {\n    id: \"overview-button\",\n    \"aria-label\": \"Button\",\n    children: \"Button\"\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const ButtonKinds: Story = {\n  render: () => (\n    <>\n      <Button id=\"button-kinds-primary\" aria-label=\"Primary button\">\n        Primary\n      </Button>\n      <Button id=\"button-kinds-secondary\" aria-label=\"Secondary button\" kind=\"secondary\">\n        Secondary\n      </Button>\n      <Button id=\"button-kinds-tertiary\" aria-label=\"Tertiary button\" kind=\"tertiary\">\n        Tertiary\n      </Button>\n    </>\n  ),\n  name: \"Button kinds\"\n};\n\nexport const Sizes: Story = {\n  render: () => (\n    <>\n      <Button id=\"sizes-large\" aria-label=\"Large button\" size=\"large\">\n        Large\n      </Button>\n      <Button id=\"sizes-medium\" aria-label=\"Medium button\" size=\"medium\">\n        Medium\n      </Button>\n      <Button id=\"sizes-small\" aria-label=\"Small button\" size=\"small\">\n        Small\n      </Button>\n    </>\n  )\n};\n\nexport const Disabled: Story = {\n  render: () => (\n    <>\n      <Button id=\"disabled-primary\" aria-label=\"Primary button disabled\" disabled>\n        Primary\n      </Button>\n      <Button id=\"disabled-secondary\" aria-label=\"Secondary button disabled\" kind=\"secondary\" disabled>\n        Secondary\n      </Button>\n      <Button id=\"disabled-tertiary\" aria-label=\"Tertiary button disabled\" kind=\"tertiary\" disabled>\n        Tertiary\n      </Button>\n    </>\n  )\n};\n\nexport const States: Story = {\n  render: () => (\n    <>\n      <Button id=\"state-regular\" aria-label=\"Regular button\">\n        Regular\n      </Button>\n      <Button id=\"state-active\" aria-label=\"Active button\" active>\n        Active\n      </Button>\n    </>\n  )\n};\n\nexport const PositiveAndNegative: Story = {\n  render: () => (\n    <>\n      <Button id=\"color-positive\" aria-label=\"Positive button\" color=\"positive\">\n        Positive\n      </Button>\n      <Button id=\"color-negative\" aria-label=\"Negative button\" color=\"negative\">\n        Negative\n      </Button>\n    </>\n  ),\n  name: \"Positive and Negative\"\n};\n\nexport const Icons: Story = {\n  render: () => (\n    <>\n      <Button id=\"icons-right\" rightIcon={Calendar} aria-label=\"Open calendar on the right icon button\">\n        Right icon\n      </Button>\n      <Button id=\"icons-left\" leftIcon={Calendar} aria-label=\"Open calendar on the left icon button\">\n        Left icon\n      </Button>\n    </>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Calendar }\n      }\n    }\n  }\n};\n\nexport const LoadingState: Story = {\n  render: () => {\n    const [loading, setLoading] = useState(false);\n    const onClick = useCallback(() => {\n      setLoading(true);\n    }, [setLoading]);\n    return (\n      <Button id=\"loading-state-button\" aria-label=\"Start loading\" loading={loading} onClick={onClick}>\n        Click here for loading\n      </Button>\n    );\n  },\n  name: \"Loading state\"\n};\n\nexport const SuccessState: Story = {\n  render: () => {\n    const [success, setSuccess] = useState(false);\n    const onClick = useCallback(() => {\n      setSuccess(true);\n    }, [setSuccess]);\n    return (\n      <Button\n        id=\"success-state-button\"\n        aria-label=\"Trigger success\"\n        success={success}\n        onClick={onClick}\n        successIcon={Check}\n        successText=\"Success\"\n      >\n        Click here for success\n      </Button>\n    );\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Check }\n      }\n    }\n  },\n  name: \"Success state\"\n};\n\nexport const OnColorStates: Story = {\n  render: () => (\n    <>\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"8px\" }}>\n        <Text type=\"text1\">Regular</Text>\n        <div style={{ backgroundColor: \"var(--sb-primary-color)\", padding: \"16px\" }}>\n          <Button id=\"on-color-primary\" aria-label=\"Primary on color\" color=\"on-primary-color\" marginRight>\n            Primary on color\n          </Button>\n          <Button\n            id=\"on-color-secondary\"\n            aria-label=\"Secondary on color\"\n            color=\"on-primary-color\"\n            kind=\"secondary\"\n            marginRight\n          >\n            Secondary on color\n          </Button>\n          <Button id=\"on-color-tertiary\" aria-label=\"Tertiary on color\" color=\"on-primary-color\" kind=\"tertiary\">\n            Tertiary on color\n          </Button>\n        </div>\n        <br />\n        <Text type=\"text1\" style={{ marginBottom: \"var(--sb-spacing-small)\" }}>\n          Disabled\n        </Text>\n        <div style={{ backgroundColor: \"var(--sb-primary-color)\", padding: \"16px\" }}>\n          <Button\n            id=\"on-color-primary-disabled\"\n            aria-label=\"Primary on color disabled\"\n            color=\"on-primary-color\"\n            disabled\n            marginRight\n          >\n            Primary on color\n          </Button>\n          <Button\n            id=\"on-color-secondary-disabled\"\n            aria-label=\"Secondary on color disabled\"\n            color=\"on-primary-color\"\n            disabled\n            marginRight\n            kind=\"secondary\"\n          >\n            Secondary on color\n          </Button>\n          <Button\n            id=\"on-color-tertiary-disabled\"\n            aria-label=\"Tertiary on color disabled\"\n            color=\"on-primary-color\"\n            disabled\n            kind=\"tertiary\"\n          >\n            Tertiary on color\n          </Button>\n        </div>\n      </div>\n    </>\n  ),\n  name: \"On color states\"\n};\n\nexport const AdjacentButtons: Story = {\n  render: () => (\n    <div>\n      <Button id=\"decrease-zoom-button\" kind=\"secondary\" size=\"small\" aria-label=\"Decrease zoom level\" rightFlat>\n        <Remove />\n      </Button>\n      <Button id=\"increase-zoom-button\" kind=\"secondary\" size=\"small\" aria-label=\"Increase zoom level\" leftFlat>\n        <Add />\n      </Button>\n    </div>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Remove, Add }\n      }\n    }\n  },\n  name: \"Adjacent buttons\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/ButtonGroup/ButtonGroup.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { ButtonGroup, Flex } from \"@vibe/core\";\nimport { Mobile } from \"@vibe/icons\";\nimport Desktop from \"./assets/Desktop\";\nimport { TipCheckYourself } from \"./ButtonGroup.stories.helpers\";\nimport * as ButtonGroupStories from \"./ButtonGroup.stories\";\n\n<Meta of={ButtonGroupStories} />\n\n# ButtonGroup\n\nButtonGroup can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.\n\n<Canvas of={ButtonGroupStories.Overview} />\n\n### Import\n\n```js\nimport { ButtonGroup } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Group together calls to action that are related to each other.\",\n    \"Use when all the actions in the group take place immediately in one click. If one or more actions does not immediately happen in one click, either use a different component, or remove those actions from the group.\",\n    \"Only should be used in groups of up to six buttons if the buttons contain an icon with no text.\",\n    \"The main action of a button group will be in selected mode.\",\n    <>\n      Keep the content short and actionable. For longer actions, use the{\" \"}\n      <StorybookLink page=\"Components/Dropdown\">Dropdown</StorybookLink> component.\n    </>,\n    <>\n      Button group is used to display the same content in different view, if you need to present different content, use{\" \"}\n      <StorybookLink page=\"Components/Tabs\">Tabs.</StorybookLink>\n    </>\n  ]}\n/>\n\n<TipCheckYourself />\n\n## Accessibility\n\n<UsageGuidelines\n  guidelines={[\n    <>\n      Always provide a <code>groupAriaLabel</code> prop to describe the purpose of the button group. This provides\n      context for screen readers about what the group represents (e.g., \"View options\", \"Sort options\", \"Display\n      settings\").\n    </>,\n    <>\n      For individual buttons, ensure each option has clear, descriptive <code>text</code> content, or provide\n      <code>ariaLabel</code> in the options array for icon-only buttons.\n    </>,\n    <>\n      Use <code>ariaLabel</code> in the options array when you need a different accessible name than the visible button\n      text, or for icon-only buttons (e.g., <code>ariaLabel: \"Grid view\"</code>).\n    </>\n  ]}\n/>\n\n## Variants\n\n### Default\n\n<Canvas of={ButtonGroupStories.Default} />\n\n### Tertiary\n\n<Canvas of={ButtonGroupStories.Tertiary} />\n\n### Disabled - all buttons\n\n<Canvas of={ButtonGroupStories.Disabled} />\n\n### Disabled - single button\n\n<Canvas of={ButtonGroupStories.DisabledSingeButton} />\n\n### Size\n\n<Canvas of={ButtonGroupStories.Size} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: (\n          <ButtonGroup\n            groupAriaLabel=\"button group aria label\"\n            value={1}\n            options={[\n              { value: 1, text: \"Month\" },\n              { value: 2, text: \"Week\" },\n              { value: 3, text: \"Year\" }\n            ]}\n          />\n        ),\n        description: \"Use when all the actions in the group take place immediately in one click.\"\n      },\n      negative: {\n        component: (\n          <ButtonGroup\n            groupAriaLabel=\"button group aria label\"\n            value={1}\n            options={[\n              { value: 1, text: \"Main table\" },\n              { value: 2, text: \"Hadas view\" },\n              { value: 3, text: \"Chart view\" }\n            ]}\n          />\n        ),\n        description: (\n          <>\n            Don’t use a button group when switching between content or object pages. Use{\" \"}\n            <StorybookLink page=\"Components/Tabs\">Tabs</StorybookLink> instead.\n          </>\n        )\n      }\n    },\n    {\n      positive: {\n        component: (\n          <Flex direction=\"column\" gap={16}>\n            <ButtonGroup\n              groupAriaLabel=\"button group aria label\"\n              size=\"medium\"\n              value={1}\n              options={[\n                { value: 1, leftIcon: Desktop },\n                { value: 2, leftIcon: Mobile }\n              ]}\n            />\n            <ButtonGroup\n              groupAriaLabel=\"button group aria label\"\n              size=\"medium\"\n              value={1}\n              options={[\n                { value: 1, text: \"Desktop\" },\n                { value: 2, text: \"Mobile\" }\n              ]}\n            />\n            <ButtonGroup\n              groupAriaLabel=\"button group aria label\"\n              size=\"medium\"\n              value={1}\n              options={[\n                { value: 1, text: \"Desktop\", leftIcon: Desktop },\n                { value: 2, text: \"Mobile\", leftIcon: Mobile }\n              ]}\n            />\n          </Flex>\n        ),\n        description: \"Always use buttons with a consistent style: Icons, text or icon with text.\"\n      },\n      negative: {\n        component: (\n          <ButtonGroup\n            groupAriaLabel=\"button group aria label\"\n            size=\"medium\"\n            value={1}\n            options={[\n              { value: 1, text: \"Desktop\" },\n              { value: 2, icon: Mobile }\n            ]}\n          />\n        ),\n        description: \"Avoid combining text buttons with icon buttons within the same button group.\"\n      }\n    },\n    {\n      positive: {\n        component: (\n          <ButtonGroup\n            groupAriaLabel=\"button group aria label\"\n            value={1}\n            options={[\n              { value: 1, text: \"Yearly plan\" },\n              { value: 2, text: \"Monthly plan\" },\n              { value: 3, text: \"Annual Plan\" }\n            ]}\n          />\n        ),\n        description: \"Keep button copy width as simillar as possible.\"\n      },\n      negative: {\n        component: (\n          <ButtonGroup\n            groupAriaLabel=\"button group aria label\"\n            value={1}\n            options={[\n              { value: 1, text: \"Yearly\" },\n              { value: 2, text: \"Monthly\" },\n              { value: 3, text: \"Annual-half year plan\" }\n            ]}\n          />\n        ),\n        description: \"Avoid mixing long button copy and short copy.\"\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### Button group in settings\n\nFor example: on the views settings you can choose only one option.\n\n<Canvas of={ButtonGroupStories.ButtonGroupInSettings} />\n\n### Button group as toggle\n\nUse button group as toggle for change the view between two states.\nFor on and off actions, use the <StorybookLink page=\"Components/Toggle\">Toggle</StorybookLink> component.\n\n<Canvas of={ButtonGroupStories.ButtonGroupAsToggle} />\n\n### Full width button group\n\nUse this option in order for the ButtonGroup to fill the entire width of its container\n\nThis feature is intended to be used within small containers like a side panel, menu or similar small floating elements\n\n<Canvas of={ButtonGroupStories.FullWidthButtonGroup} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Tabs\", \"Button\", \"Breadcrumbs\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/ButtonGroup/ButtonGroup.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const TipCheckYourself = () => (\n  <Tip title=\"Check yourself\">\n    Button group will always have one button selected. If you need to display adjacent buttons without selected mode,\n    use the{\" \"}\n    <StorybookLink page=\"Docs/Buttons/Button\" size=\"small\">\n      Button\n    </StorybookLink>\n    {` component with \"Flat\" props.`}\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/ButtonGroup/ButtonGroup.stories.tsx",
    "content": "import React from \"react\";\nimport { ButtonGroup, Flex, Text } from \"@vibe/core\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { createComponentTemplate } from \"vibe-storybook-components\";\nimport { type Meta, type StoryObj } from \"@storybook/react\";\n\ntype Story = StoryObj<typeof ButtonGroup>;\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: ButtonGroup,\n  actionPropsArray: [\"onSelect\"]\n});\n\nconst buttonGroupTemplate = createComponentTemplate(ButtonGroup);\n\nexport default {\n  title: \"Components/ButtonGroup\",\n  component: ButtonGroup,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n} satisfies Meta<typeof ButtonGroup>;\n\nexport const Overview: Story = {\n  render: buttonGroupTemplate.bind({}),\n\n  args: {\n    id: \"overview-button-group\",\n    groupAriaLabel: \"Overview button group\",\n    options: [\n      {\n        value: 1,\n        text: \"Alpha\"\n      },\n      {\n        value: 2,\n        text: \"Beta\"\n      },\n      {\n        value: 3,\n        text: \"Gamma\"\n      },\n      {\n        value: 4,\n        text: \"Delta\"\n      }\n    ],\n\n    value: 1\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const Default: Story = {\n  render: () => (\n    <ButtonGroup\n      id=\"default-button-group\"\n      groupAriaLabel=\"Default button group\"\n      value={1}\n      options={[\n        {\n          value: 1,\n          text: \"Alpha\"\n        },\n        {\n          value: 2,\n          text: \"Beta\"\n        },\n        {\n          value: 3,\n          text: \"Gamma\"\n        },\n        {\n          value: 4,\n          text: \"Delta\"\n        }\n      ]}\n    />\n  )\n};\n\nexport const Tertiary: Story = {\n  render: () => (\n    <ButtonGroup\n      id=\"tertiary-button-group\"\n      groupAriaLabel=\"Tertiary button group\"\n      value={1}\n      kind=\"tertiary\"\n      options={[\n        {\n          value: 1,\n          text: \"Alpha\"\n        },\n        {\n          value: 2,\n          text: \"Beta\"\n        },\n        {\n          value: 3,\n          text: \"Gamma\"\n        },\n        {\n          value: 4,\n          text: \"Delta\"\n        }\n      ]}\n    />\n  )\n};\n\nexport const Disabled: Story = {\n  render: () => (\n    <ButtonGroup\n      id=\"disabled-button-group\"\n      disabled\n      groupAriaLabel=\"Disabled button group\"\n      options={[\n        {\n          value: 1,\n          text: \"Alpha\"\n        },\n        {\n          value: 2,\n          text: \"Beta\"\n        },\n        {\n          value: 3,\n          text: \"Gamma\"\n        },\n        {\n          value: 4,\n          text: \"Delta\"\n        }\n      ]}\n    />\n  )\n};\n\nexport const DisabledSingeButton: Story = {\n  render: () => (\n    <ButtonGroup\n      id=\"disabled-single-button-group\"\n      groupAriaLabel=\"Button group with disabled option\"\n      options={[\n        {\n          value: 1,\n          text: \"Alpha\"\n        },\n        {\n          value: 2,\n          text: \"Beta\"\n        },\n        {\n          value: 3,\n          text: \"Gamma\"\n        },\n        {\n          value: 4,\n          text: \"Delta\",\n          disabled: true,\n          tooltipContent: \"I'm the worst variant ever\"\n        }\n      ]}\n    />\n  ),\n  name: \"Disabled - Singe Button\"\n};\n\nexport const Size: Story = {\n  render: () => (\n    <Flex gap={60}>\n      <Flex direction=\"column\" gap={16} align=\"start\">\n        <Text type=\"text1\">Medium</Text>\n        <ButtonGroup\n          id=\"size-medium-button-group\"\n          groupAriaLabel=\"Medium size button group\"\n          size=\"medium\"\n          value={1}\n          options={[\n            { value: 1, text: \"Alpha\" },\n            { value: 2, text: \"Beta\" },\n            { value: 3, text: \"Gamma\" },\n            { value: 4, text: \"Delta\" }\n          ]}\n        />\n      </Flex>\n      <Flex direction=\"column\" gap={16} align=\"start\">\n        <Text type=\"text1\">Small</Text>\n        <ButtonGroup\n          id=\"size-small-button-group\"\n          groupAriaLabel=\"Small size button group\"\n          size=\"small\"\n          value={1}\n          options={[\n            { value: 1, text: \"Alpha\" },\n            { value: 2, text: \"Beta\" },\n            { value: 3, text: \"Gamma\" },\n            { value: 4, text: \"Delta\" }\n          ]}\n        />\n      </Flex>\n    </Flex>\n  )\n};\n\nexport const ButtonGroupInSettings: Story = {\n  render: () => (\n    <Flex direction=\"column\" gap={16} align=\"start\">\n      <Text type=\"text1\">Function</Text>\n      <ButtonGroup\n        id=\"settings-button-group\"\n        groupAriaLabel=\"Function selection button group\"\n        size=\"small\"\n        value={1}\n        options={[\n          {\n            value: 1,\n            text: \"Sum\"\n          },\n          {\n            value: 2,\n            text: \"Average\"\n          },\n          {\n            value: 3,\n            text: \"Median\"\n          },\n          {\n            value: 4,\n            text: \"Min\"\n          }\n        ]}\n      />\n    </Flex>\n  ),\n  name: \"Button group in settings\"\n};\n\nexport const ButtonGroupAsToggle: Story = {\n  render: () => (\n    <ButtonGroup\n      id=\"toggle-button-group\"\n      groupAriaLabel=\"View toggle button group\"\n      value={1}\n      options={[\n        {\n          value: 1,\n          text: \"Grid\"\n        },\n        {\n          value: 2,\n          text: \"List\"\n        }\n      ]}\n    />\n  ),\n  name: \"Button group as toggle\"\n};\n\nexport const FullWidthButtonGroup: Story = {\n  render: () => (\n    <div style={{ width: \"100%\" }}>\n      <ButtonGroup\n        id=\"full-width-button-group\"\n        groupAriaLabel=\"Full width button group\"\n        fullWidth\n        value={1}\n        options={[\n          {\n            value: 1,\n            text: \"Grid\"\n          },\n          {\n            value: 2,\n            text: \"List\"\n          },\n          {\n            value: 3,\n            text: \"Table\"\n          },\n          {\n            value: 4,\n            text: \"Masonry\"\n          }\n        ]}\n      />\n    </div>\n  ),\n  name: \"Full width button group\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/ButtonGroup/assets/Desktop.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport PropTypes from \"prop-types\";\nimport React from \"react\";\nconst Desktop = ({ size = \"20\", ...props }: { size: string }) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width={size} height={size} viewBox=\"0 0 20 20\" fill=\"none\" {...props}>\n    <path\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n      d=\"M17.5 12.9626C17.5 13.6277 16.9163 14.1663 16.1957 14.1663H3.80435C3.08435 14.1663 2.5 13.6277 2.5 12.9626V4.53671C2.5 3.87227 3.08435 3.33301 3.80435 3.33301H16.1957C16.9163 3.33301 17.5 3.87227 17.5 4.53671V12.9626Z\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.5\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n    <path\n      d=\"M1.66797 16.666H18.3346\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.5\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n);\nDesktop.displayName = \"Desktop\";\nDesktop.propTypes = {\n  size: PropTypes.string\n};\nexport default Desktop;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/docs/src/pages/components/Checkbox/Checkbox.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { Checkbox, DialogContentContainer } from \"@vibe/core\";\nimport { createComponentTemplate, Link } from \"vibe-storybook-components\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { TipAmIUsingTheRightComponent } from \"./Checkbox.stories.helpers\";\nimport \"./Checkbox.stories.scss\";\nimport * as CheckboxStories from \"./Checkbox.stories\";\n\nexport const metaSettings = createStoryMetaSettingsDecorator({ component: Checkbox });\n\n<Meta of={CheckboxStories} />\n\nexport const checkboxTemplate = createComponentTemplate(Checkbox);\n\n# Checkbox\n\nCheckboxes allow users to select one or more items from a set of options.\n\n<Canvas of={CheckboxStories.Overview} />\n\n### Import\n\n```js\nimport { Checkbox } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    <span className=\"monday-storybook-checkbox_list\">\n      <span>Use checkboxes to:</span>\n      <span className=\"monday-storybook-checkbox_list-item\">1. Select one or more options from a list</span>\n      <span className=\"monday-storybook-checkbox_list-item\">2. Turn an item on or off in a desktop environment</span>\n    </span>,\n    \"Use checkboxes independently from each other: selecting one checkbox shouldn’t change the selection status of another checkbox in the list. The exception is when a checkbox is used to make a bulk selection.\",\n    \"Ensure both label and input are clickable to select the checkbox field. \",\n    \"Keep a positive tone of voice. For example: “Turn on notifications” instead of “Turn off notifications”.\",\n    \"Checkboxes should be listed according to a logical order.\",\n    \"Place checkboxes vertically, using 16px spacing.\",\n    \"Checkbox will always appear with a label.\"\n  ]}\n/>\n\n## Accessibility\n\n<UsageGuidelines\n  guidelines={[\n    <>\n      Using an <code>id</code> is highly recommended for all instances to ensure proper label association.\n    </>,\n    <>\n      Always provide a visible <code>label</code> prop to ensure the checkbox's purpose is clear to all users.\n    </>,\n    <>\n      It is recommended to use <code>separateLabel</code> mode for better screen reader support as it provides clearer,\n      more explicit label-input associations. When using this mode, the <code>id</code> prop is required for proper\n      label association.\n    </>,\n    <>\n      Use <code>ariaLabel</code> prop when you need to provide a custom accessible name.\n    </>,\n    <>\n      Use <code>ariaLabelledBy</code> prop when the checkbox is described by external elements.\n    </>,\n    <>\n      Use <code>indeterminate</code> prop for mixed selection states (e.g., when some but not all sub-items are\n      selected).\n    </>,\n    <>\n      Use <code>tabIndex</code> prop for custom keyboard navigation order.\n    </>,\n    <>\n      Use <code>autoFocus</code> prop when the checkbox should receive initial focus for keyboard navigation.\n    </>\n  ]}\n/>\n\n<TipAmIUsingTheRightComponent />\n\n## Variants\n\n### States\n\nHas 4 states: regular, hover, selected, and disabled.\n\n<Canvas of={CheckboxStories.States} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: (\n          <DialogContentContainer className=\"monday-storybook-checkbox_wrapper\">\n            <Checkbox label=\"Item 1\" name=\"Item 1\" />\n            <Checkbox label=\"Item 2\" name=\"Item 2\" checked />\n            <Checkbox label=\"Item 3\" name=\"Item 3\" checked />\n          </DialogContentContainer>\n        ),\n        description: \"Use checkboxes when one or more items can be selected.\"\n      },\n      negative: {\n        component: (\n          <DialogContentContainer className=\"monday-storybook-checkbox_wrapper\">\n            <Checkbox label=\"Item 1\" name=\"Item 1\" checked />\n            <Checkbox label=\"Item 2\" name=\"Item 2\" disabled />\n            <Checkbox label=\"Item 3\" name=\"Item 3\" disabled />\n          </DialogContentContainer>\n        ),\n        description: (\n          <>\n            Don't use checkboxes when only one item can be selected from a list. Use{\" \"}\n            <StorybookLink page=\"Components/RadioButton\">radio buttons</StorybookLink> instead.\n          </>\n        )\n      }\n    },\n    {\n      positive: {\n        component: (\n          <div className=\"monday-storybook-checkbox_border\">\n            <Checkbox label=\"Option\" checked />\n          </div>\n        ),\n        description: \"Use the checkbox label’s prop to describe the option purpse.\"\n      },\n      negative: {\n        component: [\n          <div className=\"monday-storybook-checkbox_border\">\n            <Checkbox className=\"monday-storybook-checkbox_minus-margin\" checked />\n          </div>,\n          <div className=\"monday-storybook-checkbox_border\">Option</div>\n        ],\n        description: \"Don’t use a separte div which is not related to the Checkbox component.\"\n      }\n    },\n    {\n      positive: {\n        component: (\n          <DialogContentContainer className=\"monday-storybook-checkbox_wrapper\">\n            <Checkbox label=\"Item 1\" name=\"Item 1\" />\n            <Checkbox label=\"Item 2\" name=\"Item 2\" checked />\n            <Checkbox label=\"Item 3\" name=\"Item 3\" checked />\n          </DialogContentContainer>\n        ),\n        description: \"Place the checkbox on the left side of the label.\"\n      },\n      negative: {\n        component: (\n          <DialogContentContainer className=\"monday-storybook-checkbox_wrapper\">\n            <div className=\"monday-storybook-checkbox_inline-wrapper\">\n              <span>Item 1</span>\n              <Checkbox className=\"monday-storybook-checkbox_minus-margin\" />\n            </div>\n            <div className=\"monday-storybook-checkbox_inline-wrapper\">\n              <span>Item 2</span>\n              <Checkbox className=\"monday-storybook-checkbox_minus-margin\" checked />\n            </div>\n            <div className=\"monday-storybook-checkbox_inline-wrapper\">\n              <span>Item 3</span>\n              <Checkbox className=\"monday-storybook-checkbox_minus-margin\" checked />\n            </div>\n          </DialogContentContainer>\n        ),\n        description: \"Don’t change the position of the checkbox. Keep it to the left side of the label.\"\n      }\n    },\n    {\n      positive: {\n        component: (\n          <DialogContentContainer className=\"monday-storybook-checkbox_wrapper\">\n            <Checkbox label=\"Only show incomplete items\" checked />\n          </DialogContentContainer>\n        ),\n        description: \"Always keep a positive tone of voice.\"\n      },\n      negative: {\n        component: (\n          <DialogContentContainer className=\"monday-storybook-checkbox_wrapper\">\n            <Checkbox label=\"Hide done items\" checked />\n          </DialogContentContainer>\n        ),\n        description: \"Avoid negative language that makes the user check the box in order for something not to happen.\"\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### Single checkbox\n\nAllows the user to choose a single option. For example: accept terms of use.\n\n<Canvas of={CheckboxStories.SingleCheckbox} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"RadioButton\", \"Toggle\", \"Dropdown\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Checkbox/Checkbox.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const TipAmIUsingTheRightComponent = () => (\n  <Tip title=\"Am I using the right component?\">\n    For settings that are immediately applied, consider using a{\" \"}\n    <StorybookLink page=\"Components/Toggle\" size=\"small\">\n      toggle switch\n    </StorybookLink>{\" \"}\n    instead.\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/Checkbox/Checkbox.stories.scss",
    "content": ".monday-storybook-checkbox {\n  &_border {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 1px dashed var(--sb-ui-border-color);\n    padding: 0 8px;\n    height: 38px;\n    margin-right: 3px;\n    &:nth-child(2) {\n      margin-left: 11px;\n      font-size: 14px;\n      line-height: 22px;\n    }\n  }\n\n  &_wrapper {\n    padding: 14px 16px;\n    width: 240px;\n    display: flex;\n    flex-direction: column;\n    row-gap: 16px;\n  }\n\n  &_inline-wrapper {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  &_minus-margin {\n    margin-right: -8px;\n  }\n\n  &_list {\n    display: flex;\n    flex-direction: column;\n  }\n\n  &_list-item {\n    display: inline-block;\n    width: 100%;\n  }\n\n  &_link {\n    display: initial;\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/pages/components/Checkbox/Checkbox.stories.tsx",
    "content": "import React from \"react\";\nimport { createComponentTemplate } from \"vibe-storybook-components\";\nimport { Link, Checkbox } from \"@vibe/core\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport \"./Checkbox.stories.scss\";\nimport { type Meta, type StoryObj } from \"@storybook/react\";\n\ntype Story = StoryObj<typeof Checkbox>;\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: Checkbox,\n  actionPropsArray: [\"onChange\"]\n});\nconst checkboxTemplate = createComponentTemplate(Checkbox);\n\nexport default {\n  title: \"Components/Checkbox\",\n  component: Checkbox,\n  decorators: metaSettings.decorators,\n  argTypes: metaSettings.argTypes\n} satisfies Meta<typeof Checkbox>;\n\nexport const Overview: Story = {\n  render: checkboxTemplate.bind({}),\n  args: {\n    label: \"Option\",\n    defaultChecked: true,\n    id: \"checkbox-1\",\n    \"aria-label\": \"Checkbox option\"\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const States: Story = {\n  render: () => (\n    <>\n      <Checkbox label=\"Regular\" id=\"checkbox-2\" aria-label=\"Regular checkbox\" />\n      <Checkbox label=\"Selected\" checked id=\"checkbox-3\" aria-label=\"Selected checkbox\" />\n      <Checkbox label=\"Indeterminate\" indeterminate id=\"checkbox-4\" aria-label=\"Indeterminate checkbox\" />\n      <Checkbox label=\"Disabled\" disabled id=\"checkbox-5\" aria-label=\"Disabled checkbox\" />\n      <Checkbox label=\"Disabled checked\" disabled checked id=\"checkbox-6\" aria-label=\"Disabled checked checkbox\" />\n      <Checkbox\n        label=\"Disabled indeterminate\"\n        disabled\n        indeterminate\n        id=\"checkbox-7\"\n        aria-label=\"Disabled indeterminate checkbox\"\n      />\n    </>\n  )\n};\n\nexport const SingleCheckbox: Story = {\n  render: () => (\n    <Checkbox\n      id=\"single-checkbox\"\n      aria-label=\"Agree to terms and privacy policy\"\n      checked\n      label={\n        <>\n          I agree to the <Link href={\"#\"} text=\"Terms of Service\" inlineText></Link> and{\" \"}\n          <Link href={\"#\"} text=\"Privacy Policy\" inlineText></Link>.\n        </>\n      }\n    />\n  ),\n  name: \"Single checkbox\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Chips/Chips.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { Chips } from \"@vibe/core\";\nimport { TipLabel } from \"./Chips.stories.helpers\";\nimport * as ChipsStories from \"./Chips.stories\";\n\n<Meta of={ChipsStories} />\n\n# Chip\n\nChips are compact elements that represent an input, attribute, or action. They may display text, icons, or both.\n\n<Canvas of={ChipsStories.Overview} />\n\n### Import\n\n```js\nimport { Chips } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Chips represent a complex piece of information in compact form, such as an entity (person, place, or thing) or text. They enable user input and verify that input by converting text into chips.\",\n    \"Use 8px spacing between chips.\",\n    \"Use chips when content is mapped to multiple categories, and the user needs a way to differentiate between them.\"\n  ]}\n/>\n\n## Accessibility\n\n<UsageGuidelines\n  guidelines={[\n    <>\n      Provide an <code>id</code> for the Chips to enable proper accessibility associations and unique identification.\n    </>,\n    <>\n      For removable chips, use the <code>closeButtonAriaLabel</code> prop to provide a descriptive accessible name for\n      the remove button (defaults to \"Remove\", but should be more specific like \"Remove John Smith\" or \"Delete tag\").\n    </>,\n    <>\n      Use the <code>ariaLabel</code> prop when the visible <code>label</code> text alone doesn't provide enough context\n      for screen readers to understand the chip's purpose or when chips contain complex content.\n    </>,\n    <>\n      For clickable chips, ensure the <code>ariaLabel</code> describes the action that will occur when clicked.\n    </>,\n    <>\n      When using icons or avatars in chips, ensure they are purely decorative and don't replace the descriptive text.\n      Screen readers will announce the text content, and icons should be hidden from assistive technologies.\n    </>\n  ]}\n/>\n<TipLabel />\n\n## Variants\n\n### With read only state\n\n<Canvas of={ChipsStories.ChipsWithReadOnlyState} />\n\n### With icons\n\n<Canvas of={ChipsStories.ChipsWithIcons} />\n\n### With avatars\n\n<Canvas of={ChipsStories.ChipsWithAvatars} />\n\n### Themes\n\n<Canvas of={ChipsStories.Themes} />\n\n### Clickable chips\n\n<Canvas of={ChipsStories.Clickable} />\n\n### Color coded chips\n\nUse chips with colors to indicate different categories.\ne.g.\n\n```jsx\n<Chips label=\"GRASS_GREEN\" color=\"grass_green\" />\n```\n\n<Canvas of={ChipsStories.ChipsPalette} />\n\n### Chips on colored backgrounds\n\nWhen a chip appears on a background color identical to its color, use `showBorder` prop in order to add a distinctive white border.\n\n<Canvas of={ChipsStories.OnColor} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: <Chips label=\"Jason Tal\" readOnly />,\n        description: \"When using a chip, the width will automatically size itself to fit the content.\"\n      },\n      negative: {\n        component: <Chips label=\"This is a chip\" className=\"monday-storybook-chips_chip-padding\" readOnly />,\n        description: \"Don’t change the chip width.\"\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### Colorful chips for different content\n\nSometimes when needed, chips can change fill color.\n\n<Canvas of={ChipsStories.ColorfulChipsForDifferentContent} />\n\n### Chips in a person picker combo box\n\nChips can be removable, and can be used in a multiple options selection use cases.\n\n<Canvas of={ChipsStories.ChipsInAPersonPickerComboBox} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Label\", \"Tooltip\", \"Counter\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Chips/Chips.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const TipLabel = () => (\n  <Tip>\n    Chips will always show up in context of a field. If you just need to add information, use{\" \"}\n    <StorybookLink page=\"Components/Label\" size=\"small\">\n      Label.\n    </StorybookLink>\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/Chips/Chips.stories.tsx",
    "content": "import React from \"react\";\nimport { chunk as _chunk } from \"es-toolkit\";\nimport { Chips, Text, Avatar, DialogContentContainer, Flex, Search, ColorUtils } from \"@vibe/core\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { createComponentTemplate } from \"vibe-storybook-components\";\nimport { Email } from \"@vibe/icons\";\nimport person1 from \"../Avatar/assets/person1.png\";\nimport person3 from \"../Avatar/assets/person3.png\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: Chips,\n  iconPropNamesArray: [\"rightIcon\", \"leftIcon\"],\n  actionPropsArray: [\"onDelete\", \"onMouseDown\", \"onClick\"]\n});\n\nconst chipsTemplate = createComponentTemplate(Chips);\n\nexport default {\n  title: \"Components/Chips\",\n  component: Chips,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n};\n\nexport const Overview = {\n  render: chipsTemplate.bind({}),\n  name: \"Overview\",\n\n  args: {\n    id: \"overview-chip\",\n    \"aria-label\": \"Overview chip\",\n    label: \"This is a chip\",\n    onMouseDown: () => {},\n    onClick: () => {}\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const ChipsWithReadOnlyState = {\n  render: () => <Chips id=\"readonly-chip\" aria-label=\"Read only chip\" label=\"Read only chip\" readOnly />,\n  name: \"Chips with read only state\"\n};\n\nexport const ChipsWithIcons = {\n  render: () => (\n    <Flex gap=\"medium\">\n      <Chips id=\"chip-left-icon\" aria-label=\"Chip with left email icon\" label=\"Chip with left icon\" leftIcon={Email} />\n      <Chips\n        id=\"chip-right-icon\"\n        aria-label=\"Chip with right email icon\"\n        label=\"Chip with right icon\"\n        rightIcon={Email}\n      />\n    </Flex>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Email }\n      }\n    }\n  },\n  name: \"Chips with icons\"\n};\n\nexport const ChipsWithAvatars = {\n  render: () => (\n    <Flex gap=\"medium\">\n      <Chips\n        id=\"chip-left-avatar\"\n        aria-label=\"Chip with left avatar\"\n        label=\"Chip with left avatar\"\n        leftAvatar={person1}\n      />\n      <Chips\n        id=\"chip-right-avatar\"\n        aria-label=\"Chip with right avatar\"\n        label=\"Chip with right avatar\"\n        rightAvatar={person1}\n      />\n    </Flex>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { person1 }\n      }\n    }\n  },\n  name: \"Chips with avatars\"\n};\n\nexport const Themes = {\n  render: () => (\n    <>\n      <Chips id=\"theme-long\" aria-label=\"Long chip\" label=\"This is a long chip\" />\n      <Chips id=\"theme-positive\" aria-label=\"Positive chip\" label=\"Chip positive\" color=\"positive\" />\n      <Chips id=\"theme-negative\" aria-label=\"Negative chip\" label=\"Chip negative\" color=\"negative\" />\n      <Chips id=\"theme-warning\" aria-label=\"Warning chip\" label=\"Chip warning\" color=\"warning\" />\n      <Chips id=\"theme-neutral\" aria-label=\"Neutral chip\" label=\"Chip neutral\" color=\"neutral\" />\n      <Chips id=\"theme-disabled\" aria-label=\"Disabled chip\" label=\"Disabled\" disabled />\n    </>\n  ),\n  name: \"Themes\"\n};\n\nexport const Clickable = {\n  render: () => {\n    return (\n      <Flex direction=\"row\" gap=\"medium\" align=\"start\">\n        <Chips\n          id=\"clickable-default\"\n          aria-label=\"Clickable default chip\"\n          label=\"Clickable default chip\"\n          readOnly\n          onClick={() => {}}\n        />\n        <Chips\n          id=\"clickable-removable\"\n          aria-label=\"Clickable removable chip\"\n          label=\"Clickable removable chip\"\n          onClick={() => {}}\n        />\n      </Flex>\n    );\n  },\n  name: \"Clickable\"\n};\n\nexport const ChipsPalette = {\n  render: () => {\n    const excludedColors = [\"dark_indigo\", \"blackish\"];\n    const stateColors = [\"positive\", \"negative\", \"primary\", \"warning\", \"neutral\"];\n    const allColors = [\n      ...ColorUtils.contentColors.filter((c: string) => !excludedColors.includes(c)),\n      ...stateColors\n    ];\n    const allowedColorsChunks = _chunk(allColors, 7);\n    return (\n      <Flex\n        style={{\n          width: \"100%\",\n          height: 300\n        }}\n        align=\"stretch\"\n      >\n        {allowedColorsChunks.map((colorChunk: any) => {\n          return (\n            <Flex direction=\"column\" key={colorChunk} justify=\"space-between\" align=\"stretch\">\n              {colorChunk.map((colorName: any) => (\n                <Chips label={colorName} key={colorName} color={colorName} readOnly allowTextSelection />\n              ))}\n            </Flex>\n          );\n        })}\n      </Flex>\n    );\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { _chunk, ColorUtils }\n      }\n    }\n  },\n  name: \"Chips palette\"\n};\n\nexport const OnColor = {\n  render: () => (\n    <Flex\n      style={{\n        width: \"100%\"\n      }}\n      align=\"stretch\"\n      justify=\"start\"\n    >\n      <Flex\n        align=\"center\"\n        justify=\"center\"\n        style={{\n          background: \"var(--sb-primary-selected-color)\",\n          width: \"124px\",\n          height: \"64px\",\n          margin: \"var(--sb-spacing-small)\",\n          borderRadius: \"var(--sb-border-radius-small)\"\n        }}\n      >\n        <Chips label=\"On selected\" showBorder readOnly />\n      </Flex>\n      <Flex\n        align=\"center\"\n        justify=\"center\"\n        style={{\n          background: \"var(--positive-color-selected)\",\n          width: \"124px\",\n          height: \"64px\",\n          margin: \"var(--sb-spacing-small)\",\n          borderRadius: \"var(--sb-border-radius-small)\"\n        }}\n      >\n        <Chips label=\"On positive\" showBorder color=\"positive\" readOnly />\n      </Flex>\n      <Flex\n        align=\"center\"\n        justify=\"center\"\n        style={{\n          background: \"var(--sb-negative-color-selected)\",\n          width: \"124px\",\n          height: \"64px\",\n          margin: \"var(--sb-spacing-small)\",\n          borderRadius: \"var(--sb-border-radius-small)\"\n        }}\n      >\n        <Chips label=\"On negative\" showBorder color=\"negative\" readOnly />\n      </Flex>\n      <Flex\n        align=\"center\"\n        justify=\"center\"\n        style={{\n          background: \"var(--ui-background-color)\",\n          width: \"124px\",\n          height: \"64px\",\n          margin: \"var(--sb-spacing-small)\",\n          borderRadius: \"var(--sb-border-radius-small)\"\n        }}\n      >\n        <Chips label=\"On neutral\" showBorder color=\"neutral\" readOnly />\n      </Flex>\n    </Flex>\n  ),\n\n  name: \"On color\"\n};\n\nexport const ColorfulChipsForDifferentContent = {\n  render: () => (\n    <Flex>\n      <DialogContentContainer>\n        <Flex direction=\"column\" align=\"start\" gap=\"medium\" style={{ padding: \"var(--space-8)\" }}>\n          <div>\n            <Chips label=\"January\" color=\"positive\" />\n          </div>\n          <Search />\n          <div>\n            <Chips label=\"August\" readOnly color=\"lipstick\" />\n          </div>\n          <div>\n            <Chips label=\"April\" readOnly color=\"bubble\" />\n          </div>\n          <div>\n            <Chips label=\"March\" readOnly color=\"egg_yolk\" />\n          </div>\n        </Flex>\n      </DialogContentContainer>\n    </Flex>\n  ),\n  name: \"Colorful chips for different content\"\n};\n\nexport const ChipsInAPersonPickerComboBox = {\n  render: () => (\n    <Flex>\n      <DialogContentContainer>\n        <Flex direction=\"column\" align=\"start\" gap=\"medium\" style={{ padding: \"var(--space-8)\" }}>\n          <Search placeholder=\"Search names, positions, or a team\" />\n          <Flex align=\"center\" justify=\"center\">\n            <Chips label=\"Julia Martinez\" leftAvatar={person1} />\n            <Chips label=\"Juan Rodriguez\" leftAvatar={person3} />\n          </Flex>\n          <Text style={{ paddingInlineStart: \"var(--space-4)\", marginTop: \"var(--space-4)\" }}>\n            Suggested people\n          </Text>\n          <Flex direction=\"column\" align=\"start\" gap=\"medium\">\n            <Flex align=\"center\" justify=\"center\" key=\"cont-1\" gap=\"small\">\n              <Avatar size=\"small\" src={person1} type=\"img\" />\n              <Flex gap=\"xs\">\n                <Text>May Kishon </Text>\n                <Text color=\"secondary\">(UX/UI Product Designer)</Text>\n              </Flex>\n            </Flex>\n            <Flex align=\"center\" justify=\"center\" key=\"cont-2\" gap=\"small\">\n              <Avatar size=\"small\" backgroundColor=\"dark_purple\" text=\"LC\" type=\"text\" />\n              <Flex gap=\"xs\">\n                <Text>Liron Cohen</Text>\n                <Text color=\"secondary\">(Customer Experience)</Text>\n              </Flex>\n            </Flex>\n            <Flex align=\"center\" justify=\"center\" key=\"cont-3\" gap=\"small\">\n              <Avatar size=\"small\" text=\"AL\" type=\"text\" />\n              <Flex gap=\"xs\">\n                <Text>Amanda Lawrence</Text>\n                <Text color=\"secondary\">(Customer Experience Designer)</Text>\n              </Flex>\n            </Flex>\n            <Flex align=\"center\" justify=\"center\" key=\"cont-4\" gap=\"small\">\n              <Avatar size=\"small\" text=\"DY\" type=\"text\" backgroundColor=\"peach\" />\n              <Flex gap=\"xs\">\n                <Text>Dor Yehuda</Text>\n                <Text color=\"secondary\">(Customer Experience Designer)</Text>\n              </Flex>\n            </Flex>\n          </Flex>\n        </Flex>\n      </DialogContentContainer>\n    </Flex>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { person1, person3 }\n      }\n    }\n  },\n  name: \"Chips in a person picker combo box\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Clickable/Clickable.interactions.ts",
    "content": "import { expect } from \"@storybook/jest\";\nimport {\n  getByLabelText,\n  pressNavigationKey,\n  interactionSuite,\n  NavigationCommand,\n  resetFocus\n} from \"@vibe/core/interactionsTests\";\n\nasync function states_onClickTabFocusElementTest(canvas) {\n  const CLICKABLE_LABEL = \"clickable button\";\n  const CLICKABLE_DISABLED_LABEL = \"disabled clickable button\";\n  const clickableElement = await getByLabelText(canvas, CLICKABLE_LABEL);\n  const disabledClickableElement = await getByLabelText(canvas, CLICKABLE_DISABLED_LABEL);\n  await pressNavigationKey(NavigationCommand.TAB);\n  expect(document.activeElement).toEqual(clickableElement);\n  await pressNavigationKey(NavigationCommand.TAB);\n  expect(document.activeElement).not.toEqual(disabledClickableElement);\n  expect(canvas).not.toContain(document.activeElement);\n}\n\nexport const statesPlaySuite = interactionSuite({\n  tests: [states_onClickTabFocusElementTest],\n  afterEach: async () => {\n    await resetFocus();\n  }\n});\n"
  },
  {
    "path": "packages/docs/src/pages/components/Clickable/Clickable.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport * as ClickableStories from \"./Clickable.stories\";\nimport { TipHookSolution } from \"./Clickable.stories.helpers\";\n\n<Meta of={ClickableStories} />\n\n# Clickable\n\nAn accessibility helper component, this component simulates a button on non button elements\n\n<Canvas of={ClickableStories.Overview} />\n\n### Import\n\n```js\nimport { Clickable } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Variants\n\n### States\n\nClickable component supports two different states: regular state and disabled state.\nThe state only affects the component functionality (a user cannot interact with a disabled clickable component) and not the component appearance.\nYou can use the component className and style props to change the component appearance.\n\n<Canvas of={ClickableStories.States} />\n\n<TipHookSolution />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"When you can't use button, but need to provide keyboard intractability\",\n    \"This component behaves like a button, treat it like one\"\n  ]}\n/>\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Button\", \"HiddenText\", \"IconButton\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Clickable/Clickable.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const TipHookSolution = () => (\n  <Tip title=\"Check out our hook solution for this use case\">\n    {`If you'd like to set clickable functionality on a specific element inside your React component instead of using a\n    wrapper, please, take a look on our `}\n    <StorybookLink size=\"small\" page=\"Hooks/useClickableProps\">\n      useClickableProps\n    </StorybookLink>{\" \"}\n    hook.\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/Clickable/Clickable.stories.tsx",
    "content": "import React from \"react\";\nimport { Clickable, type ClickableProps, Flex, Box } from \"@vibe/core\";\nimport { statesPlaySuite } from \"./Clickable.interactions\";\n\nexport default {\n  title: \"Accessibility/Clickable\",\n  component: Clickable\n};\n\nconst clickableTemplate = (args: ClickableProps) => {\n  return (\n    <Clickable onClick={() => alert(\"clicked\")} {...args}>\n      <Box border padding=\"small\" rounded=\"small\">\n        I act like a button\n      </Box>\n    </Clickable>\n  );\n};\n\nexport const Overview = {\n  render: clickableTemplate.bind({}),\n  name: \"Overview\",\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const States = {\n  render: () => (\n    <Flex gap=\"medium\">\n      <Clickable onClick={() => alert(\"clicked\")} aria-label=\"clickable button\">\n        <Box border padding=\"small\" rounded=\"small\">\n          Regular clickable element\n        </Box>\n      </Clickable>\n      <Clickable onClick={() => alert(\"clicked\")} disabled aria-label=\"disabled clickable button\">\n        <Box border backgroundColor=\"greyBackgroundColor\" padding=\"small\" rounded=\"small\">\n          Disabled clickable element\n        </Box>\n      </Clickable>\n    </Flex>\n  ),\n\n  name: \"States\",\n  play: statesPlaySuite\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/ColorPicker/ColorPicker.interactions.ts",
    "content": "import { userEvent, within } from \"@storybook/test\";\nimport { typeMultipleTimes, interactionSuite, resetFocus } from \"@vibe/core/interactionsTests\";\nimport { expect } from \"@storybook/jest\";\nimport { ComponentDefaultTestId, getTestId } from \"@vibe/shared\";\n\n// Color names used in tests\nconst ContentColorByName = {\n  BRIGHT_GREEN: \"bright-green\",\n  STEEL: \"steel\",\n  DARK_PURPLE: \"dark_purple\",\n  INDIGO: \"indigo\"\n};\n\nasync function selectAndResetWithKeyboard(canvas) {\n  await clickOnColor(canvas, ContentColorByName.BRIGHT_GREEN);\n  await expectColorToBeSelected(canvas, ContentColorByName.BRIGHT_GREEN);\n\n  //move to a color in the last row\n  await typeMultipleTimes(\"{arrowDown}\", 7);\n  await expectColorToBeActive(canvas, ContentColorByName.STEEL);\n\n  //move to a color in the last row\n  await userEvent.keyboard(\" \");\n  await expectColorToBeActive(canvas, ContentColorByName.STEEL);\n  await expectColorToBeSelected(canvas, ContentColorByName.STEEL);\n  await expectColorToBeNotSelected(canvas, ContentColorByName.BRIGHT_GREEN);\n\n  //move to the \"Clear color\" button\n  await userEvent.keyboard(\"{arrowDown}\");\n  await expectColorToBeNotActive(canvas, ContentColorByName.STEEL);\n  await userEvent.keyboard(\"{Enter}\");\n  await expectColorToBeNotSelected(canvas, ContentColorByName.STEEL);\n}\n\nexport const noColorInteractionSuite = interactionSuite({\n  tests: [selectAndResetWithKeyboard],\n  afterEach: async () => {\n    await resetFocus();\n  }\n});\n\nasync function selectMultiColorsWithKeyboardAndMouse(canvas) {\n  await clickOnColor(canvas, ContentColorByName.DARK_PURPLE);\n  await expectColorToBeSelected(canvas, ContentColorByName.DARK_PURPLE);\n\n  //move with keyboard to a different color\n  await typeMultipleTimes(\"{arrowRight}\", 3);\n  await expectColorToBeActive(canvas, ContentColorByName.INDIGO);\n\n  //select this color as well\n  await userEvent.keyboard(\"{Enter}\");\n  await expectColorToBeSelected(canvas, ContentColorByName.DARK_PURPLE);\n  await expectColorToBeSelected(canvas, ContentColorByName.INDIGO);\n  await expectColorToBeActive(canvas, ContentColorByName.INDIGO);\n\n  //cancel the selection of the first color\n  await clickOnColor(canvas, ContentColorByName.DARK_PURPLE);\n  await expectColorToBeNotSelected(canvas, ContentColorByName.DARK_PURPLE);\n  await expectColorToBeSelected(canvas, ContentColorByName.INDIGO);\n\n  //since we used the mouse, the \"active\" indicator should be removed\n  await expectColorToBeNotActive(canvas, ContentColorByName.DARK_PURPLE);\n  await expectColorToBeNotActive(canvas, ContentColorByName.INDIGO);\n}\n\nexport const multiSelectionInteractionSuite = interactionSuite({\n  tests: [selectMultiColorsWithKeyboardAndMouse],\n  afterEach: async () => {\n    await resetFocus();\n  }\n});\n\nfunction formatColorName(color: string) {\n  return color.replace(/-|_/g, \" \").replace(/(?:^|\\s)\\S/g, a => a.toUpperCase());\n}\n\nasync function clickOnColor(canvas, color) {\n  const element = await findColorItem(canvas, color);\n  const toClick = await within(element).findByLabelText(formatColorName(color));\n  await userEvent.click(toClick);\n}\n\nasync function expectColorToBeSelected(canvas, color) {\n  const element = await findColorItem(canvas, color);\n  expect(element.getAttribute(\"class\")).toContain(\"selectedColor\");\n}\n\nasync function expectColorToBeNotSelected(canvas, color) {\n  const element = await findColorItem(canvas, color);\n  expect(element.getAttribute(\"class\")).not.toContain(\"selectedColor\");\n}\n\nasync function expectColorToBeActive(canvas, color) {\n  const element = await findColorItem(canvas, color);\n  expect(element.getAttribute(\"class\")).toContain(\"active\");\n}\n\nasync function expectColorToBeNotActive(canvas, color) {\n  const element = await findColorItem(canvas, color);\n  expect(element.getAttribute(\"class\")).not.toContain(\"active\");\n}\n\nasync function findColorItem(canvas, color) {\n  return await canvas.findByTestId(getTestId(ComponentDefaultTestId.COLOR_PICKER_ITEM, color));\n}\n"
  },
  {
    "path": "packages/docs/src/pages/components/ColorPicker/ColorPicker.mdx",
    "content": "import { Canvas, Meta } from \"@storybook/blocks\";\nimport * as ColorPickerStories from \"./ColorPicker.stories\";\n\n<Meta of={ColorPickerStories} />\n\n# ColorPicker\n\nColorPicker is our component for selecting our content colors\n\n<Canvas of={ColorPickerStories.Overview} />\n\n### Import\n\n```js\nimport { ColorPicker } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Variants\n\n### With Indicator\n\n<Canvas of={ColorPickerStories.WithIndicator} />\n\n### Text Indication\n\n<Canvas of={ColorPickerStories.TextIndication} />\n\n### Selected\n\n<Canvas of={ColorPickerStories.Selected} />\n\n### No color\n\nAbility to revert to initial color\n\n<Canvas of={ColorPickerStories.NoColor} />\n\n### Selected icon\n\nSelected colors indication, when using multi-selection\n\n<Canvas of={ColorPickerStories.SelectedIcon} />\n\n### Shapes\n\nThe `ColorPicker` supports multiple shapes\n\n<Canvas of={ColorPickerStories.Shapes} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"colors\", \"Dropdown\", \"Dialog\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/ColorPicker/ColorPicker.stories.tsx",
    "content": "import { ColorPicker } from \"@vibe/core\";\nimport { TextColorIndicator, Check } from \"@vibe/icons\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { multiSelectionInteractionSuite, noColorInteractionSuite } from \"./ColorPicker.interactions\";\nimport { createComponentTemplate } from \"vibe-storybook-components\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: ColorPicker,\n  iconPropNamesArray: [\"ColorIndicatorIcon\", \"SelectedIndicatorIcon\", \"NoColorIcon\"],\n  actionPropsArray: [{ name: \"onSave\", linkedToPropValue: \"value\" }]\n});\n\nexport default {\n  title: \"Components/ColorPicker\",\n  component: ColorPicker,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n};\n\nconst colorPickerTemplate = createComponentTemplate(ColorPicker);\n\nexport const Overview = {\n  render: colorPickerTemplate.bind({}),\n  args: {\n    id: \"overview-color-picker\"\n  },\n  name: \"Overview\"\n};\n\nexport const WithIndicator = {\n  render: colorPickerTemplate.bind({}),\n  args: {\n    id: \"indicator-color-picker\",\n    ColorIndicatorIcon: TextColorIndicator\n  },\n  name: \"With Indicator\"\n};\n\nexport const TextIndication = {\n  render: colorPickerTemplate.bind({}),\n  args: {\n    id: \"text-indication-color-picker\",\n    ColorIndicatorIcon: TextColorIndicator,\n    value: \"peach\",\n    shouldRenderIndicatorWithoutBackground: true\n  },\n  name: \"Text Indication\"\n};\n\nexport const Selected = {\n  render: colorPickerTemplate.bind({}),\n  args: {\n    id: \"selected-color-picker\",\n    ColorIndicatorIcon: TextColorIndicator,\n    colorStyle: \"selected\"\n  },\n  name: \"Selected\"\n};\n\nexport const NoColor = {\n  render: colorPickerTemplate.bind({}),\n  args: {\n    id: \"no-color-picker\",\n    noColorText: \"Clear color\"\n  },\n  name: \"No color\",\n  play: noColorInteractionSuite\n};\n\nexport const SelectedIcon = {\n  render: colorPickerTemplate.bind({}),\n  args: {\n    id: \"multiselect-color-picker\",\n    isMultiselect: true,\n    SelectedIndicatorIcon: Check,\n    value: \"peach\"\n  },\n  name: \"Selected icon\",\n  play: multiSelectionInteractionSuite\n};\n\nexport const Shapes = {\n  render: colorPickerTemplate.bind({}),\n  args: {\n    id: \"shapes-color-picker\",\n    colorShape: \"circle\"\n  },\n  name: \"Shapes\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Combobox/Combobox.interactions.ts",
    "content": "import { expect } from \"@storybook/jest\";\nimport { queryByText, userEvent } from \"@storybook/test\";\nimport {\n  getByLabelText,\n  getByTestId,\n  getByText,\n  clickElement,\n  typeText,\n  interactionSuite,\n  pressNavigationKey,\n  NavigationCommand,\n  resetFocus\n} from \"@vibe/core/interactionsTests\";\nimport { ComponentDefaultTestId, getTestId } from \"@vibe/shared\";\n\nasync function getComponentElements(canvas) {\n  const comboboxElement = getByTestId(canvas, ComponentDefaultTestId.COMBOBOX);\n  const searchElement = getByLabelText(comboboxElement, \"Search for content\");\n  return { comboboxElement, searchElement };\n}\n\nasync function onTypeFilterComboboxOptionsTest(canvas) {\n  const { comboboxElement, searchElement } = await getComponentElements(canvas);\n  await typeText(searchElement, \"jjj\", 400);\n  expect(queryByText(comboboxElement, \"Option 1\")).toBeNull();\n}\n\nasync function onSelectExistFilterClearsFilterTest(canvas) {\n  const { comboboxElement, searchElement } = await getComponentElements(canvas);\n  await typeText(searchElement, \"jjj\", 400);\n  const cleanSearchButton = getByTestId(\n    comboboxElement,\n    getTestId(ComponentDefaultTestId.CLEAN_SEARCH_BUTTON, \"combobox-search\")\n  );\n  await clickElement(cleanSearchButton);\n  expect(searchElement).toHaveValue(\"\");\n  const option1 = getByText(comboboxElement, \"Option 1\");\n  expect(option1).toBeInTheDocument();\n}\n\nasync function onNavigateBetweenOptionsByArrowsAriaUpdates(canvas) {\n  const { comboboxElement, searchElement } = await getComponentElements(canvas);\n\n  // Press on list for initial focus\n  await clickElement(searchElement);\n\n  // Navigate to first option with down arrow\n  await pressNavigationKey(NavigationCommand.DOWN_ARROW);\n  const option1 = getByText(comboboxElement, \"Option 1\").parentElement;\n\n  // Check active option by aria is the one we navigate to it by keyboard\n  let ariaActiveDescendant = searchElement.getAttribute(\"aria-activedescendant\");\n  expect(ariaActiveDescendant).toEqual(option1.id);\n\n  // Navigate to second option with down arrow\n  await pressNavigationKey(NavigationCommand.DOWN_ARROW);\n  const option2 = getByText(comboboxElement, \"Option 2\").parentElement;\n\n  // Check active option by aria is the one we navigate to it by keyboard\n  ariaActiveDescendant = searchElement.getAttribute(\"aria-activedescendant\");\n  expect(ariaActiveDescendant).toEqual(option2.id);\n\n  // Navigate to first option with up arrow\n  await pressNavigationKey(NavigationCommand.UP_ARROW);\n\n  // Check active option by aria is the one we navigate to it by keyboard\n  ariaActiveDescendant = searchElement.getAttribute(\"aria-activedescendant\");\n  expect(ariaActiveDescendant).toEqual(option1.id);\n}\n\nexport const defaultPlaySuite = interactionSuite({\n  tests: [\n    onNavigateBetweenOptionsByArrowsAriaUpdates,\n    onTypeFilterComboboxOptionsTest,\n    onSelectExistFilterClearsFilterTest\n  ],\n  afterEach: async () => {\n    await resetFocus();\n  }\n});\n"
  },
  {
    "path": "packages/docs/src/pages/components/Combobox/Combobox.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { Combobox, DialogContentContainer } from \"@vibe/core\";\nimport { TipOtherComponents } from \"./Combobox.stories.helpers\";\nimport * as ComboboxStories from \"./Combobox.stories\";\n\n<Meta of={ComboboxStories} />\n\n# Combobox\n\n<DeprecatedWarning\n  alternativeName=\"Dropdown box mode\"\n  alternativeLink=\"/?path=/docs/components-dropdown-new-dropdown-box-mode--docs\"\n  additionalContent={\n    <>\n      {\" \"}\n      See the <StorybookLink page=\"Components/Combobox [Deprecated]/Migration Guide\">\n        Combobox migration guide\n      </StorybookLink> for detailed migration instructions.\n    </>\n  }\n/>\n\nCombobox allowing users to filter longer lists to only the selections matching a query.\n\n<Canvas of={ComboboxStories.Overview} />\n\n### Import\n\n```js\nimport { Combobox } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Allows the user to make a selection from a predefined list of options and is typically used when there are a large amount of options to choose from.\",\n    \"The menu opens by clicking anywhere in the field.\",\n    \"The option that best matches the typed characters is highlighted.\",\n    \"Limit the text content of Combobox items to a single line.\",\n    \"Could be used inside a dialog or as a standalone component.\"\n  ]}\n/>\n\n<TipOtherComponents />\n\n## Accessibility\n\n<UsageGuidelines\n  guidelines={[\n    <>\n      Using an <code>id</code> is highly recommended for all instances to ensure proper label association.\n    </>,\n    <>\n      Use <code>searchInputAriaLabel</code> prop when you need to provide a custom accessible name for the search input.\n    </>,\n    <>\n      Use <code>disabled</code> prop appropriately to indicate when the combobox is not available for interaction.\n    </>,\n    <>\n      Use <code>autoFocus</code> prop when the combobox should receive initial focus for keyboard navigation.\n    </>\n  ]}\n/>\n\n## Variants\n\n### Default\n\nDefault Combobox can be used without dialog or as part of the layout.\n\n<Canvas of={ComboboxStories.Default} />\n\n### Combobox inside a dialog\n\nUse this for Combobox that triggered by button.\n\n<Canvas of={ComboboxStories.ComboboxInsideADialog} />\n\n### Sizes\n\nWe have three pre-defined sizes for Combobox width size: Small 200px, Medium 240px, Large 260px.\n\n<Canvas of={ComboboxStories.Sizes} />\n\n### With categories\n\nWhen having a lot of options, you may use headings to categorize them.\n\n<Canvas of={ComboboxStories.WithCategories} />\n\n### With icons\n\n<Canvas of={ComboboxStories.WithIcons} />\n\n### With optionRenderer\n\n<Canvas of={ComboboxStories.WithOptionRenderer} />\n\n### With Button\n\nIf Combobox requires action, use button component at the end of the list.\n\n<Canvas of={ComboboxStories.WithButton} />\n\n### With creation when no items are available\n\n<Canvas of={ComboboxStories.WithCreation} />\n\n### With virtualization optimization\n\nWhen you display a large number of options, you may want to render only the options shown at a given moment to allow better performance and a\nbetter user experience.\n\n<Canvas of={ComboboxStories.WithVirtualizationOptimization} />\n\n### Loading state\n\nIf importing the Combobox options may take time, you reflect this to the user by using our Combobox loading mode.\n\n<Canvas of={ComboboxStories.LoadingState} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      className: \"combobox-stories-styles_big-figure\",\n      positive: {\n        component: (\n          <DialogContentContainer>\n            <Combobox\n              placeholder=\"Day\"\n              options={[\n                { id: \"1\", label: \"1 Days\" },\n                { id: \"2\", label: \"2 Days\" },\n                { id: \"3\", label: \"3 Days\" },\n                { id: \"4\", label: \"4 Days\" },\n                { id: \"5\", label: \"5 Days\" }\n              ]}\n            />\n          </DialogContentContainer>\n        ),\n        description: \"Use Combobox to make large lists easier to search.\"\n      },\n      negative: {\n        component: (\n          <DialogContentContainer>\n            <Combobox\n              placeholder=\"Day\"\n              options={[\n                { id: \"1\", label: \"1 Days\" },\n                { id: \"2\", label: \"2 Days\" },\n                { id: \"3\", label: \"3 Days\" }\n              ]}\n            />\n          </DialogContentContainer>\n        ),\n        description: (\n          <>\n            Don’t use Combobox if you have less than 5 list items. If it's not complex enough for a Combobox, use a{\" \"}\n            <StorybookLink page=\"Components/RadioButton\">Radio button</StorybookLink> or{\" \"}\n            <StorybookLink page=\"Components/Dropdown\">Dropdown.</StorybookLink>\n          </>\n        )\n      }\n    },\n    {\n      className: \"combobox-stories-styles_big-figure\",\n      positive: {\n        component: (\n          <DialogContentContainer>\n            <Combobox\n              placeholder=\"Search names\"\n              options={[\n                { id: \"1\", label: \"Hadas\" },\n                { id: \"2\", label: \"Orr\" },\n                { id: \"3\", label: \"Evgeniy\" },\n                { id: \"4\", label: \"Moshe\" },\n                { id: \"5\", label: \"Sahar\" }\n              ]}\n            />\n          </DialogContentContainer>\n        ),\n        description: \"Use the Combobox input to filter results from the list.\"\n      },\n      negative: {\n        component: (\n          <DialogContentContainer>\n            <Combobox\n              placeholder=\"Search everything\"\n              options={[\n                { id: \"1\", label: \"Hadas\" },\n                { id: \"2\", label: \"Orr\" },\n                { id: \"3\", label: \"Evgeniy\" },\n                { id: \"4\", label: \"Moshe\" },\n                { id: \"5\", label: \"Sahar\" }\n              ]}\n            />\n          </DialogContentContainer>\n        ),\n        description: \"Don’t use the Combobox as a search input to search results that are not within the list.\"\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### Combobox as person picker\n\nWe are using Combobox component for our board person picker.\n\n<Canvas of={ComboboxStories.ComboboxAsPersonPicker} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Dropdown\", \"Menu\", \"Search\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Combobox/Combobox.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const TipOtherComponents = () => (\n  <Tip>\n    When there are fewer than five items, consider using{\" \"}\n    <StorybookLink page=\"Components/RadioButton\" size=\"small\">\n      Radio buttons\n    </StorybookLink>{\" \"}\n    (if only one item can be selected) or{\" \"}\n    <StorybookLink page=\"Components/Checkbox\" size=\"small\">\n      Checkboxes\n    </StorybookLink>{\" \"}\n    (if multiple items can be selected).\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/Combobox/Combobox.stories.tsx",
    "content": "import React, { useMemo, useState } from \"react\";\nimport { StoryDescription } from \"vibe-storybook-components\";\nimport person1 from \"../Avatar/assets/person1.png\";\nimport person2 from \"../Avatar/assets/person2.png\";\nimport person3 from \"../Avatar/assets/person3.png\";\nimport { defaultPlaySuite } from \"./Combobox.interactions\";\nimport { Edit, Person, ThumbsUp, Time, Update, Upgrade, Wand } from \"@vibe/icons\";\nimport {\n  Avatar,\n  Flex,\n  Button,\n  Dialog,\n  Icon,\n  Text,\n  DialogContentContainer,\n  type ComboboxProps,\n  Combobox\n} from \"@vibe/core\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: Combobox,\n  iconPropNamesArray: [\"searchIcon\"],\n  actionPropsArray: [\"onOptionHover\", \"onOptionLeave\", \"onFilterChanged\"]\n});\n\nexport default {\n  title: \"Components/Combobox [Deprecated]\",\n  component: Combobox,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n};\n\nconst comboboxTemplate = (args: ComboboxProps) => {\n  return (\n    <DialogContentContainer>\n      <Combobox {...args} />\n    </DialogContentContainer>\n  );\n};\n\nexport const Overview = {\n  render: comboboxTemplate.bind({}),\n  args: {\n    options: [\n      {\n        id: \"1\",\n        label: \"Option 1\"\n      },\n      {\n        id: \"2\",\n        label: \"Option 2\"\n      },\n      {\n        id: \"3\",\n        label: \"Option 3\"\n      }\n    ],\n\n    onClick: () => alert(\"clicked\"),\n    placeholder: \"Placeholder text here\",\n    clearFilterOnSelection: true\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const Default = {\n  render: () => {\n    const options = useMemo(\n      () => [\n        {\n          id: \"1\",\n          label: \"Option 1\"\n        },\n        {\n          id: \"2\",\n          label: \"Option 2\"\n        },\n        {\n          id: \"3\",\n          label: \"Option 3\"\n        }\n      ],\n      []\n    );\n\n    return <Combobox placeholder=\"Placeholder text here\" options={options} />;\n  },\n  play: defaultPlaySuite\n};\n\nexport const ComboboxInsideADialog = {\n  render: () => {\n    const options = useMemo(\n      () => [\n        {\n          id: \"1\",\n          label: \"Option 1\"\n        },\n        {\n          id: \"2\",\n          label: \"Option 2\"\n        },\n        {\n          id: \"3\",\n          label: \"Option 3\"\n        },\n        {\n          id: \"4\",\n          label: \"Option 4\"\n        },\n        {\n          id: \"5\",\n          label: \"Option 5\"\n        }\n      ],\n      []\n    );\n\n    return (\n      <DialogContentContainer>\n        <Combobox options={options} placeholder=\"Placeholder text here\" />\n      </DialogContentContainer>\n    );\n  },\n  name: \"Combobox inside a dialog\"\n};\n\nexport const Sizes = {\n  render: () => {\n    const options = useMemo(\n      () => [\n        {\n          id: \"1\",\n          label: \"Option 1\"\n        },\n        {\n          id: \"2\",\n          label: \"Option 2\"\n        },\n        {\n          id: \"3\",\n          label: \"Option 3\"\n        },\n        {\n          id: \"4\",\n          label: \"Option 4\"\n        },\n        {\n          id: \"5\",\n          label: \"Option 5\"\n        }\n      ],\n      []\n    );\n\n    return (\n      <Flex gap=\"large\">\n        <DialogContentContainer>\n          <Combobox options={options} size=\"small\" placeholder=\"Placeholder text here\" />\n        </DialogContentContainer>\n        <DialogContentContainer>\n          <Combobox options={options} placeholder=\"Placeholder text here\" />\n        </DialogContentContainer>\n        <DialogContentContainer>\n          <Combobox options={options} size=\"large\" placeholder=\"Placeholder text here\" />\n        </DialogContentContainer>\n      </Flex>\n    );\n  }\n};\n\nexport const WithCategories = {\n  render: () => {\n    const options = useMemo(\n      () => [\n        {\n          id: \"1\",\n          label: \"Favorites\",\n          categoryId: \"favorites\"\n        },\n        {\n          id: \"2\",\n          label: \"Main workspace\",\n          categoryId: \"workspace\"\n        },\n        {\n          id: \"3\",\n          label: \"Client Foundations\",\n          categoryId: \"workspace\"\n        },\n        {\n          id: \"4\",\n          label: \"Design\",\n          categoryId: \"workspace\"\n        },\n        {\n          id: \"5\",\n          label: \"Marketing Cluster\",\n          categoryId: \"workspace\"\n        },\n        {\n          id: \"6\",\n          label: \"Mobile\",\n          categoryId: \"workspace\"\n        }\n      ],\n      []\n    );\n\n    const categories = useMemo(\n      () => ({\n        favorites: {\n          id: \"favorites\",\n          label: \"Favorites\"\n        },\n\n        workspace: {\n          id: \"Workspaces\",\n          label: \"Workspaces\"\n        }\n      }),\n      []\n    );\n\n    return (\n      <Flex gap=\"large\" justify=\"start\" align=\"start\">\n        <Flex direction=\"column\" gap=\"medium\" align=\"start\">\n          Regular\n          <DialogContentContainer\n            style={{\n              height: \"200px\"\n            }}\n          >\n            <Combobox options={options} categories={categories} placeholder=\"Placeholder text here\" />\n          </DialogContentContainer>\n        </Flex>\n        <Flex direction=\"column\" gap=\"medium\" align=\"start\">\n          Sticky mode\n          <DialogContentContainer\n            style={{\n              height: \"200px\"\n            }}\n          >\n            <Combobox stickyCategories options={options} categories={categories} placeholder=\"Placeholder text here\" />\n          </DialogContentContainer>\n        </Flex>\n        <Flex direction=\"column\" gap=\"medium\" align=\"start\">\n          With divider\n          <DialogContentContainer\n            style={{\n              height: \"200px\"\n            }}\n          >\n            <Combobox\n              stickyCategories\n              options={options}\n              categories={categories}\n              withCategoriesDivider\n              placeholder=\"Placeholder text here\"\n            />\n          </DialogContentContainer>\n        </Flex>\n      </Flex>\n    );\n  },\n  name: \"With categories\"\n};\n\nexport const WithIcons = {\n  render: () => {\n    const options = useMemo(\n      () => [\n        {\n          id: \"1\",\n          label: \"Option 1\",\n          leftIcon: Wand\n        },\n        {\n          id: \"2\",\n          label: \"Option 2\",\n          leftIcon: ThumbsUp\n        },\n        {\n          id: \"3\",\n          label: \"Option 3\",\n          leftIcon: Time\n        },\n        {\n          id: \"4\",\n          label: \"Option 4\",\n          leftIcon: Update\n        },\n        {\n          id: \"5\",\n          label: \"Option 5\",\n          leftIcon: Upgrade\n        }\n      ],\n      []\n    );\n\n    return (\n      <DialogContentContainer>\n        <Combobox options={options} placeholder=\"Placeholder text here\" />\n      </DialogContentContainer>\n    );\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Wand, ThumbsUp, Time, Update, Upgrade }\n      }\n    }\n  },\n  name: \"With icons\"\n};\n\nexport const WithOptionRenderer = {\n  render: () => {\n    const options = useMemo(\n      () => [\n        { id: \"1\", label: \"Option 1\" },\n        { id: \"2\", label: \"Option 2\" },\n        { id: \"3\", label: \"Option 3\" },\n        { id: \"4\", label: \"Option 4\" },\n        { id: \"5\", label: \"Option 5\" },\n        { id: \"6\", label: \"Option 6\" },\n        { id: \"7\", label: \"Option 7\" },\n        { id: \"8\", label: \"Option 8\" },\n        { id: \"9\", label: \"Option 9\" }\n      ],\n      []\n    );\n    const optionRenderer = (option: any) => (\n      <div>\n        <Icon icon={Person} /> I can render anything with {option.label}\n      </div>\n    );\n    return (\n      <DialogContentContainer>\n        <Combobox\n          options={options}\n          optionRenderer={optionRenderer}\n          placeholder=\"Placeholder text here\"\n          maxOptionsWithoutScroll={3}\n        />\n      </DialogContentContainer>\n    );\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Person }\n      }\n    }\n  },\n  name: \"With optionRenderer\"\n};\n\nexport const WithButton = {\n  render: () => {\n    const options = useMemo(\n      () => [\n        {\n          id: \"1\",\n          label: \"Option 1\",\n          leftIcon: Wand\n        },\n        {\n          id: \"2\",\n          label: \"Option 2\",\n          leftIcon: ThumbsUp\n        },\n        {\n          id: \"3\",\n          label: \"Option 3\",\n          leftIcon: Time\n        },\n        {\n          id: \"4\",\n          label: \"Option 4\",\n          leftIcon: Update\n        },\n        {\n          id: \"5\",\n          label: \"Option 5\",\n          leftIcon: Upgrade\n        }\n      ],\n      []\n    );\n\n    return (\n      <DialogContentContainer>\n        <Flex direction=\"column\" align=\"stretch\">\n          <Combobox options={options} placeholder=\"Placeholder text here\" />\n          <Button kind=\"tertiary\" leftIcon={Edit}>\n            Edit\n          </Button>\n        </Flex>\n      </DialogContentContainer>\n    );\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Wand, ThumbsUp, Time, Update, Upgrade, Edit }\n      }\n    }\n  }\n};\n\nexport const WithCreation = {\n  render: () => {\n    const [options, setOptions] = useState([]);\n\n    return (\n      <DialogContentContainer>\n        <Combobox\n          options={options}\n          placeholder=\"Type to create\"\n          addNewLabel=\"Create new item\"\n          onAddNew={() =>\n            setOptions([\n              ...options,\n              {\n                id: options.length + 1,\n                label: `Option: ${options.length + 1}`\n              }\n            ])\n          }\n        />\n      </DialogContentContainer>\n    );\n  }\n};\n\nexport const WithVirtualizationOptimization = {\n  render: () => {\n    const options = useMemo(\n      () => [\n        {\n          id: \"1\",\n          label: \"Option 1\",\n          categoryId: \"Group1\"\n        },\n        {\n          id: \"2\",\n          label: \"Option 2\",\n          categoryId: \"Group1\"\n        },\n        {\n          id: \"3\",\n          label: \"Option 3\",\n          categoryId: \"Group1\"\n        },\n        {\n          id: \"4\",\n          label: \"Option 4\",\n          categoryId: \"Group1\"\n        },\n        {\n          id: \"5\",\n          label: \"Option 5\",\n          categoryId: \"Group1\"\n        },\n        {\n          id: \"6\",\n          label: \"Option 6\",\n          categoryId: \"Group1\"\n        },\n        {\n          id: \"7\",\n          label: \"Option 7\",\n          categoryId: \"Group1\"\n        },\n        {\n          id: \"8\",\n          label: \"Option 8\",\n          categoryId: \"Group1\"\n        },\n        {\n          id: \"9\",\n          label: \"Option 9\",\n          categoryId: \"Group1\"\n        },\n        {\n          id: \"10\",\n          label: \"Option 10\",\n          categoryId: \"Group2\"\n        },\n        {\n          id: \"11\",\n          label: \"Option 11\",\n          categoryId: \"Group2\"\n        },\n        {\n          id: \"12\",\n          label: \"Option 12\",\n          categoryId: \"Group2\"\n        },\n        {\n          id: \"13\",\n          label: \"Option 13\",\n          categoryId: \"Group2\"\n        },\n        {\n          id: \"14\",\n          label: \"Option 14\",\n          categoryId: \"Group2\"\n        },\n        {\n          id: \"15\",\n          label: \"Option 15\",\n          categoryId: \"Group2\"\n        },\n        {\n          id: \"16\",\n          label: \"Option 16\",\n          categoryId: \"Group2\"\n        },\n        {\n          id: \"17\",\n          label: \"Option 17\",\n          categoryId: \"Group2\"\n        },\n        {\n          id: \"18\",\n          label: \"Option 18\",\n          categoryId: \"Group2\"\n        },\n        {\n          id: \"19\",\n          label: \"Option 19\",\n          categoryId: \"Group2\"\n        },\n        {\n          id: \"20\",\n          label: \"Option 20\",\n          categoryId: \"Group2\"\n        }\n      ],\n      []\n    );\n\n    const categories = useMemo(\n      () => ({\n        Group1: {\n          id: \"Group1\",\n          label: \"Group 1\"\n        },\n\n        Group2: {\n          id: \"Group2\",\n          label: \"Group 2\"\n        }\n      }),\n      []\n    );\n\n    return (\n      <Flex gap=\"large\" justify=\"center\" align=\"start\">\n        <Flex direction=\"column\" gap=\"small\" align=\"start\">\n          Virtualization without categories\n          <DialogContentContainer>\n            <Combobox\n              options={options}\n              renderOnlyVisibleOptions\n              placeholder=\"Placeholder text here\"\n              maxOptionsWithoutScroll={3}\n            />\n          </DialogContentContainer>\n        </Flex>\n        <Flex direction=\"column\" gap=\"small\" align=\"start\">\n          Virtualization with categories\n          <DialogContentContainer>\n            <Combobox\n              options={options}\n              renderOnlyVisibleOptions\n              categories={categories}\n              placeholder=\"Placeholder text here\"\n              maxOptionsWithoutScroll={3}\n            />\n          </DialogContentContainer>\n        </Flex>\n        <Flex direction=\"column\" gap=\"small\" align=\"start\">\n          Virtualization with sticky categories\n          <DialogContentContainer>\n            <Combobox\n              stickyCategories\n              options={options}\n              renderOnlyVisibleOptions\n              categories={categories}\n              placeholder=\"Placeholder text here\"\n              maxOptionsWithoutScroll={3}\n            />\n          </DialogContentContainer>\n        </Flex>\n      </Flex>\n    );\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { StoryDescription }\n      }\n    }\n  },\n  name: \"With virtualization optimization\"\n};\n\nexport const LoadingState = {\n  render: () => {\n    const options = useMemo(() => [], []);\n\n    return (\n      <DialogContentContainer>\n        <Combobox loading options={options} placeholder=\"Board name\" />\n      </DialogContentContainer>\n    );\n  },\n  name: \"Loading state\"\n};\n\nexport const ComboboxAsPersonPicker = {\n  render: () => {\n    const options = useMemo(\n      () => [\n        {\n          id: \"1\",\n          label: \"Julia Martinez\",\n          src: person1,\n          type: \"img\",\n          position: \"(Frontend Developer)\",\n          categoryId: \"suggestedPeople\"\n        },\n        {\n          id: \"2\",\n          label: \"Marco DiAngelo\",\n          src: person2,\n          type: \"img\",\n          position: \"(Product Designer)\",\n          categoryId: \"suggestedPeople\"\n        },\n        {\n          id: \"3\",\n          label: \"Liam Caldwell\",\n          src: person3,\n          type: \"img\",\n          position: \"(Brand Designer)\",\n          categoryId: \"suggestedPeople\"\n        }\n      ],\n      []\n    );\n\n    const categories = useMemo(\n      () => ({\n        suggestedPeople: {\n          id: \"suggestedPeople\",\n          label: \"Suggested people\"\n        }\n      }),\n      []\n    );\n\n    const optionRenderer = (option: any) => (\n      <Flex gap=\"xs\">\n        <Avatar customSize={22} src={option.src} type=\"img\" key={option.id} />\n        <Text>{option.label}</Text>\n        <Text color=\"secondary\">{option.position}</Text>\n      </Flex>\n    );\n\n    return (\n      <Flex\n        style={{\n          height: \"270px\"\n        }}\n        flex=\"1\"\n        justify=\"center\"\n        align=\"start\"\n      >\n        <Dialog\n          content={() => (\n            <DialogContentContainer>\n              <Combobox\n                options={options}\n                categories={categories}\n                optionRenderer={optionRenderer}\n                size=\"small\"\n                placeholder=\"Search\"\n              />\n            </DialogContentContainer>\n          )}\n          tooltip\n          position=\"bottom\"\n          open\n        >\n          <Button kind=\"secondary\" size=\"small\">\n            Select people\n          </Button>\n        </Dialog>\n      </Flex>\n    );\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { person1, person2, person3 }\n      }\n    }\n  },\n  name: \"Combobox as person picker\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Combobox/combobox-migration-guide.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { Link, Tip } from \"vibe-storybook-components\";\nimport { DiffCodeBlock } from \"../../migration-guide/DiffCodeBlock\";\n\n<Meta title=\"Components/Combobox [Deprecated]/Migration Guide\" />\n\n# Combobox Migration Guide\n\n<div style={{ lineHeight: \"1.8\" }}>\n\n- [Overview](#overview)\n- [Why Migrate? ✨](#why-migrate-)\n- [Migration Steps 🚀](#migration-steps-)\n- [Breaking Changes 🚨](#breaking-changes-)\n- [Complete Migration Examples](#complete-migration-examples)\n- [FAQ ❓](#faq-)\n- [Help 🙏](#help-)\n\n## Overview\n\nThe Combobox component is deprecated in favor of the new Dropdown's box mode. The box mode provides the same always-visible list functionality with significant improvements in accessibility, performance, and developer experience.\n\n## Why Migrate? ✨\n\n### Enhanced Accessibility\n\n- **Proper ARIA attributes** and keyboard navigation\n- **Screen reader optimized** with clear announcements\n- **Improved focus management** and visual indicators\n- **Better form integration** with proper label associations\n\n### Better Performance\n\n- **Smaller bundle size** through optimized implementation\n- **Improved rendering** for large datasets\n- **Automatic virtualization** for performance optimization\n- **Better memory usage** with optimized re-renders\n\n### Enhanced TypeScript Support\n\n- **Full generic type support** with `<Item>` type parameter\n- **Better type safety** for options and callbacks\n- **Comprehensive prop type definitions**\n- **IntelliSense improvements** for better developer experience\n\n### Improved Form Integration\n\n- **Built-in label, helper text, and error state support**\n- **Better validation** and required field handling\n- **Proper form field structure** and semantics\n- **Native form integration** without additional wrappers\n\n### Enhanced Features\n\n- **Sticky group headers** with `stickyGroupTitle`\n- **Custom filtering** with `filterOption` prop\n- **Richer option structures** with start/end elements\n- **Better tooltip integration** with `tooltipProps`\n\n## Migration Steps 🚀\n\n### Quick Migration Example\n\n<DiffCodeBlock\n  code={`- import { Combobox } from \"@vibe/core\";\n+ import { Dropdown } from \"@vibe/core\";\n\n- <Combobox\n- placeholder=\"Search options\"\n- options={[\n-     { id: \"1\", label: \"Option 1\" },\n-     { id: \"2\", label: \"Option 2\" }\n- ]}\n- onClick={(option) => console.log(option)}\n- />\n\n* <Dropdown\n* searchable\n* boxMode\n* placeholder=\"Search options\"\n* options={[\n*     { value: \"1\", label: \"Option 1\" },\n*     { value: \"2\", label: \"Option 2\" }\n* ]}\n* onChange={(option) => console.log(option)}\n* ariaLabel=\"Select an option\"\n* />`}\n  />\n\n### 1. Update Import Path\n\n<DiffCodeBlock\n  code={`- import { Combobox } from \"@vibe/core\";\n+ import { Dropdown } from \"@vibe/core\";`}\n/>\n\n### 2. Enable Box Mode and Search\n\nBox mode requires `searchable={true}` and `boxMode={true}`:\n\n<DiffCodeBlock\n  code={`- <Combobox options={options} />\n+ <Dropdown options={options} searchable boxMode />`}\n/>\n\n### 3. Update Option Data Structure\n\n<DiffCodeBlock\n  code={`- const options = [\n-   { id: \"1\", label: \"Option 1\" },\n-   { id: \"2\", label: \"Option 2\" }\n- ];\n+ const options = [\n+   { value: \"1\", label: \"Option 1\" },\n+   { value: \"2\", label: \"Option 2\" }\n+ ];`}\n/>\n\n### 4. Update Categories to Groups\n\n<DiffCodeBlock\n  code={`- const categories = {\n-   cat1: { id: \"cat1\", label: \"Category 1\" },\n-   cat2: { id: \"cat2\", label: \"Category 2\" }\n- };\n- const options = [\n-   { id: \"1\", label: \"Option 1\", categoryId: \"cat1\" },\n-   { id: \"2\", label: \"Option 2\", categoryId: \"cat2\" }\n- ];\n+ const options = [\n+   {\n+     label: \"Category 1\",\n+     options: [\n+       { value: \"1\", label: \"Option 1\" }\n+     ]\n+   },\n+   {\n+     label: \"Category 2\",\n+     options: [\n+       { value: \"2\", label: \"Option 2\" }\n+     ]\n+   }\n+ ];`}\n/>\n\n### 5. Update Callbacks\n\n<DiffCodeBlock\n  code={`- <Combobox\n-   onClick={(option) => handleSelect(option)}\n-   onFilterChanged={(value) => handleSearch(value)}\n- />\n+ <Dropdown\n+   onChange={(option) => handleSelect(option)}\n+   onInputChange={(value) => handleSearch(value)}\n+ />`}\n/>\n\n## Breaking Changes 🚨\n\n### Removed Props\n\nThese props are no longer available in the new Dropdown box mode:\n\n- **`onOptionHover`** - Not needed in new implementation\n- **`onOptionLeave`** - Not needed in new implementation\n- **`shouldScrollToSelectedItem`** - Handled automatically\n- **`renderOnlyVisibleOptions`** - Automatic virtualization built-in\n- **`searchIcon`** - Handled automatically\n- **`onAddNew`** - Use `menuRenderer` for custom \"add new\" functionality\n- **`addNewLabel`** - Use `menuRenderer` for custom \"add new\" functionality\n- **`noResultsRenderer`** - Use `noOptionsMessage` prop instead (accepts ReactNode)\n- **`searchWrapperClassName`** - Style via main `className` prop\n- **`optionClassName`** - Use `optionRenderer` for custom option styling\n- **`stickyCategoryClassName`** - Style via CSS\n- **`disableFilter`** - Simply don't use the `searchable` prop\n- **`optionLineHeight`** - Handled automatically by the component\n\n### Changed Props\n\nThese props have been renamed or changed behavior:\n\n- **`id` → `id`** - Update structure from `{id, label}` to `{value, label}` for options\n- **`onClick`** → **`onChange`** - Renamed for consistency with form inputs\n- **`onFilterChanged`** → **`onInputChange`** - Renamed for consistency\n- **`categories`** → **`options` (grouped)** - Categories become nested group structure\n- **`filter`** → **`filterOption`** - Custom filtering with different signature\n- **`filterValue`** → **`inputValue`** - For controlled search input\n- **`defaultFilter`** → **`defaultInputValue`** - For uncontrolled default search value\n- **`clearFilterOnSelection`** → **`clearInputOnChange`** - Renamed for consistency\n- **`noResultsMessage`** → **`noOptionsMessage`** - Renamed and accepts ReactNode\n- **`optionsListHeight`** → **`menuHeight`** - Renamed for consistency\n- **`stickyCategories`** → **`stickyGroupTitle`** - Renamed to match new terminology\n- **`withCategoriesDivider`** → **`withGroupDivider`** - Renamed to match new terminology\n- **`searchInputAriaLabel`** → **`inputAriaLabel`** - Renamed for consistency\n- **`maxOptionsWithoutScroll`** → **`maxMenuHeight`** - Different approach to limiting height\n\n### Required New Props\n\nYou must add these props to enable box mode:\n\n- **`searchable`** - **Required**: Set to `true` to enable search functionality\n- **`boxMode`** - **Required**: Set to `true` to display as always-visible box\n\n### New Props (Optional)\n\nThese new props provide enhanced functionality:\n\n- **`label`** - Built-in label support for form integration\n- **`helperText`** - Built-in helper text support\n- **`error`** - Built-in error state support\n- **`required`** - Built-in required field indicator\n- **`ariaLabel`** - Proper accessibility label for the dropdown\n- **`tooltipProps`** - Enhanced tooltip integration\n- **`dir`** - Text direction support (ltr/rtl)\n\n### Option Data Structure Changes\n\nThe most important breaking change is the option data structure:\n\n<DiffCodeBlock\n  code={`- // Combobox: uses \"id\" property\n- const options = [\n-   { id: \"1\", label: \"Option 1\" },\n-   { id: \"2\", label: \"Option 2\" }\n- ];\n+ // Dropdown: uses \"value\" property\n+ const options = [\n+   { value: \"1\", label: \"Option 1\" },\n+   { value: \"2\", label: \"Option 2\" }\n+ ];`}\n/>\n\n### Categories to Groups\n\nCategory structure has changed from a flat map to nested groups:\n\n<DiffCodeBlock\n  code={`- // Combobox: separate categories object\n- const categories = {\n-   cat1: { id: \"cat1\", label: \"Category 1\" }\n- };\n- const options = [\n-   { id: \"1\", label: \"Option 1\", categoryId: \"cat1\" }\n- ];\n+ // Dropdown: nested group structure\n+ const options = [\n+   {\n+     label: \"Category 1\",\n+     options: [\n+       { value: \"1\", label: \"Option 1\" }\n+     ]\n+   }\n+ ];`}\n/>\n\n## Complete Migration Examples\n\n### Basic Combobox to Box Mode\n\n<DiffCodeBlock\n  code={`- <Combobox\n-   id=\"basic-combobox\"\n-   placeholder=\"Search people\"\n-   options={[\n-     { id: \"1\", label: \"John Doe\" },\n-     { id: \"2\", label: \"Jane Smith\" }\n-   ]}\n-   onClick={(option) => setSelected(option)}\n-   searchInputAriaLabel=\"Search for people\"\n- />\n+ <Dropdown\n+   id=\"basic-dropdown\"\n+   searchable\n+   boxMode\n+   placeholder=\"Search people\"\n+   options={[\n+     { value: \"1\", label: \"John Doe\" },\n+     { value: \"2\", label: \"Jane Smith\" }\n+   ]}\n+   onChange={(option) => setSelected(option)}\n+   ariaLabel=\"Search for people\"\n+ />`}\n/>\n\n### Combobox with Categories to Grouped Dropdown\n\n<DiffCodeBlock\n  code={`- const categories = {\n-   suggested: { id: \"suggested\", label: \"Suggested\" },\n-   all: { id: \"all\", label: \"All People\" }\n- };\n-\n- <Combobox\n-   placeholder=\"Select person\"\n-   categories={categories}\n-   options={[\n-     { id: \"1\", label: \"John\", categoryId: \"suggested\" },\n-     { id: \"2\", label: \"Jane\", categoryId: \"suggested\" },\n-     { id: \"3\", label: \"Bob\", categoryId: \"all\" }\n-   ]}\n-   stickyCategories\n-   withCategoriesDivider\n-   onClick={(option) => setSelected(option)}\n- />\n+ <Dropdown\n+   searchable\n+   boxMode\n+   placeholder=\"Select person\"\n+   options={[\n+     {\n+       label: \"Suggested\",\n+       options: [\n+         { value: \"1\", label: \"John\" },\n+         { value: \"2\", label: \"Jane\" }\n+       ]\n+     },\n+     {\n+       label: \"All People\",\n+       options: [\n+         { value: \"3\", label: \"Bob\" }\n+       ]\n+     }\n+   ]}\n+   stickyGroupTitle\n+   withGroupDivider\n+   onChange={(option) => setSelected(option)}\n+   ariaLabel=\"Select person\"\n+ />`}\n/>\n\n### Combobox with Icons to Dropdown with Elements\n\n<DiffCodeBlock\n  code={`- <Combobox\n-   placeholder=\"Select option\"\n-   options={[\n-     {\n-       id: \"1\",\n-       label: \"Email\",\n-       leftRenderer: () => <Email />\n-     },\n-     {\n-       id: \"2\",\n-       label: \"Send\",\n-       leftRenderer: () => <Send />\n-     }\n-   ]}\n-   onClick={(option) => setSelected(option)}\n- />\n+ <Dropdown\n+   searchable\n+   boxMode\n+   placeholder=\"Select option\"\n+   options={[\n+     {\n+       value: \"1\",\n+       label: \"Email\",\n+       startElement: { type: \"icon\", value: Email }\n+     },\n+     {\n+       value: \"2\",\n+       label: \"Send\",\n+       startElement: { type: \"icon\", value: Send }\n+     }\n+   ]}\n+   onChange={(option) => setSelected(option)}\n+   ariaLabel=\"Select option\"\n+ />`}\n/>\n\n### Combobox with Custom Filter\n\n<DiffCodeBlock\n  code={`- <Combobox\n-   options={options}\n-   filter={(filterValue, options) => {\n-     return options.filter(opt =>\n-       opt.label.toLowerCase().includes(filterValue.toLowerCase())\n-     );\n-   }}\n-   onClick={(option) => setSelected(option)}\n- />\n+ <Dropdown\n+   searchable\n+   boxMode\n+   options={options}\n+   filterOption={(option, inputValue) => {\n+     return option.label.toLowerCase().includes(inputValue.toLowerCase());\n+   }}\n+   onChange={(option) => setSelected(option)}\n+   ariaLabel=\"Select option\"\n+ />`}\n/>\n\n### Combobox with \"Add New\" Functionality\n\n<DiffCodeBlock\n  code={`- <Combobox\n-   options={options}\n-   onAddNew={(value) => {\n-     const newOption = { id: Date.now(), label: value };\n-     setOptions([...options, newOption]);\n-   }}\n-   addNewLabel={(value) => \\`Add \"\\${value}\"\\`}\n-   onClick={(option) => setSelected(option)}\n- />\n+ <Dropdown\n+   searchable\n+   boxMode\n+   options={options}\n+   onChange={(option) => setSelected(option)}\n+   menuRenderer={({ children, filteredOptions }) => (\n+     <>\n+       {children}\n+       {filteredOptions.length === 0 && inputValue && (\n+         <Button onClick={() => {\n+           const newOption = { value: Date.now(), label: inputValue };\n+           setOptions([...options, newOption]);\n+         }}>\n+           Add \"{inputValue}\"\n+         </Button>\n+       )}\n+     </>\n+   )}\n+   ariaLabel=\"Select or create option\"\n+ />`}\n/>\n\n### Form Integration Example\n\nOne of the biggest improvements is built-in form field support:\n\n<DiffCodeBlock\n  code={`- <div>\n-   <label htmlFor=\"person-combobox\">Select Person</label>\n-   <Combobox\n-     id=\"person-combobox\"\n-     options={options}\n-     onClick={(option) => setSelected(option)}\n-   />\n-   <span className=\"helper-text\">Choose a person to assign</span>\n-   {error && <span className=\"error\">{error}</span>}\n- </div>\n+ <Dropdown\n+   id=\"person-dropdown\"\n+   searchable\n+   boxMode\n+   label=\"Select Person\"\n+   helperText=\"Choose a person to assign\"\n+   error={error}\n+   required\n+   options={options}\n+   onChange={(option) => setSelected(option)}\n+   ariaLabel=\"Select person\"\n+ />`}\n/>\n\n## FAQ ❓\n\n**Q: When should I migrate to Dropdown box mode?**\nA: We recommend migrating when updating your codebase or when you need the enhanced accessibility and performance features. The new implementation is production-ready.\n\n**Q: Will Combobox be removed?**\nA: Yes, Combobox will be removed in Vibe 4. We'll provide ample notice and migration support.\n\n**Q: Can I use both Combobox and Dropdown box mode during migration?**\nA: Yes, you can use both during the migration period. Migrate components incrementally at your own pace.\n\n**Q: What if I have a large number of Combobox instances?**\nA: Start with new features and gradually migrate existing ones. The migration is straightforward and can be done incrementally.\n\n**Q: Are there any features missing from Dropdown box mode?**\nA: Dropdown box mode covers all major use cases. If you're using advanced Combobox features, check the prop migration reference or reach out for help.\n\n</div>\n\n## Help 🙏\n\nIf you have any questions, feedback, or need help with migration, please don't hesitate to reach out:\n\n- **GitHub Issues**: [Report issues](https://github.com/mondaycom/vibe/issues/new/choose)\n- **GitHub Discussions**: [Ask questions](https://github.com/mondaycom/vibe/discussions)\n"
  },
  {
    "path": "packages/docs/src/pages/components/Counter/Counter.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { Link } from \"vibe-storybook-components\";\nimport { Counter } from \"@vibe/core\";\nimport { TipCheckYourself, Usage } from \"./Counter.stories.helpers\";\nimport * as CounterStories from \"./Counter.stories\";\n\n<Meta of={CounterStories} />\n\n# Counter\n\nCounters show the count of some adjacent data.\n\n<Canvas of={CounterStories.Overview} />\n\n### Import\n\n```js\nimport { Counter } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<Usage />\n\n<TipCheckYourself />\n\n## Variants\n\n### Sizes\n\nThere are 3 sizes of counters\n\n<Canvas of={CounterStories.Sizes} />\n\n### Colors\n\n<Canvas of={CounterStories.Colors} />\n\n### Outline\n\n<Canvas of={CounterStories.Outline} />\n\n### Limits\n\n<Canvas of={CounterStories.Limits} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: <Counter count={15} />,\n        description: \"Use counter to notify the number of items, such as notifications, updates, or inbox alerts.\"\n      },\n      negative: {\n        component: <Counter count=\"New\" />,\n        description: (\n          <>\n            Don’t include any text. If you need a text label, use a{\" \"}\n            <StorybookLink page=\"Components/Label\">Label.</StorybookLink>\n          </>\n        )\n      }\n    },\n    {\n      positive: {\n        component: <Counter count={1000} />,\n        description: \"Only use a maximum of 3 digits in a counter.\"\n      },\n      negative: {\n        component: <Counter count={1050} maxDigits={4} />,\n        description: \"Don’t use more than 3 digits in a counter.\"\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### Notification counter\n\nUsed on the notification icon to indicate the number of new notifications.\n\n<Canvas of={CounterStories.NotificationCounter} />\n\n### Counter on inbox filters\n\nThe counter represents the number of items on each topic.\n\n<Canvas of={CounterStories.CounterOnInboxFilters} />\n\n### Count the number of updates\n\nThe counter represents the number of items on each topic.\n\n<Canvas of={CounterStories.CountTheNumberOfUpdates} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Label\", \"Tooltip\", \"Chips\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Counter/Counter.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip, UsageGuidelines } from \"vibe-storybook-components\";\n\nexport const TipCheckYourself = () => (\n  <Tip title=\"Check yourself\">\n    Need to indicate information that is not numeric? Use the{\" \"}\n    <StorybookLink page=\"Components/Label\" size=\"small\">\n      Label\n    </StorybookLink>{\" \"}\n    component instead.\n  </Tip>\n);\n\nexport const Usage = () => (\n  <UsageGuidelines\n    guidelines={[\n      \"Counters are usually placed after the label of the item they're quantifying, such as the number of notifications. They should only be used to represent a number.\",\n      <div className=\"monday-storybook-counter_usage-link-line\">\n        The element the counter refers to should include{\" \"}\n        <StorybookLink page=\"Components/Tooltip\">Tooltip</StorybookLink>\n        {\" , where necessary, to enhance user understanding. For example, a badge is used in conjunction with an icon.\"}\n      </div>\n    ]}\n  />\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/Counter/Counter.stories.tsx",
    "content": "import React from \"react\";\nimport { Counter, Flex, Text, Icon, Avatar, Divider, type CounterProps } from \"@vibe/core\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { AddUpdate, Update, Notifications } from \"@vibe/icons\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: Counter\n});\n\nexport default {\n  title: \"Components/Counter\",\n  component: Counter,\n  decorators: metaSettings.decorators\n};\n\nexport const Overview = {\n  render: (args: CounterProps) => <Counter id=\"overview-counter\" aria-label=\"Count of 5 items\" count={5} {...args} />,\n  name: \"Overview\",\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const Sizes = {\n  render: () => (\n    <Flex gap={160}>\n      <Flex direction=\"column\" gap=\"large\" style={{ width: \"100px\" }} align=\"start\">\n        <Counter id=\"sizes-xs\" aria-label=\"Extra small counter showing 5\" count={5} size=\"xs\" />\n        <Text>XS</Text>\n      </Flex>\n      <Flex direction=\"column\" gap=\"large\" style={{ width: \"100px\" }} align=\"start\">\n        <Counter id=\"sizes-small\" aria-label=\"Small counter showing 5\" count={5} size=\"small\" />\n        <Text>Small</Text>\n      </Flex>\n      <Flex direction=\"column\" gap=\"large\" style={{ width: \"100px\" }} align=\"start\">\n        <Counter id=\"sizes-large\" aria-label=\"Large counter showing 5\" count={5} />\n        <Text>Large</Text>\n      </Flex>\n    </Flex>\n  )\n};\n\nexport const Colors = {\n  render: () => (\n    <Flex gap={160}>\n      <Flex direction=\"column\" gap=\"large\" style={{ width: \"100px\" }} align=\"start\">\n        <Counter id=\"colors-primary\" aria-label=\"Primary counter showing 5\" count={5} />\n        <Text>Primary</Text>\n      </Flex>\n      <Flex direction=\"column\" gap=\"large\" style={{ width: \"100px\" }} align=\"start\">\n        <Counter id=\"colors-negative\" aria-label=\"Negative counter showing 5 notifications\" count={5} color=\"negative\" />\n        <Text>Negative or notification</Text>\n      </Flex>\n      <Flex direction=\"column\" gap=\"large\" style={{ width: \"100px\" }} align=\"start\">\n        <Counter id=\"colors-dark\" aria-label=\"Dark counter showing 5\" count={5} color=\"dark\" />\n        <Text>Dark</Text>\n      </Flex>\n      <Flex direction=\"column\" gap=\"large\" style={{ width: \"100px\" }} align=\"start\">\n        <Counter id=\"colors-light\" aria-label=\"Light counter showing 5\" count={5} color=\"light\" />\n        <Text>Light</Text>\n      </Flex>\n    </Flex>\n  )\n};\n\nexport const Outline = {\n  render: () => (\n    <Flex gap={160}>\n      <Flex direction=\"column\" gap=\"large\" style={{ width: \"100px\" }} align=\"start\">\n        <Counter id=\"outline-primary\" aria-label=\"Primary outline counter showing 5\" count={5} kind=\"line\" />\n        <Text>Primary</Text>\n      </Flex>\n      <Flex direction=\"column\" gap=\"large\" style={{ width: \"100px\" }} align=\"start\">\n        <Counter\n          id=\"outline-negative\"\n          aria-label=\"Negative outline counter showing 5 notifications\"\n          count={5}\n          color=\"negative\"\n          kind=\"line\"\n        />\n        <Text>Negative or notification</Text>\n      </Flex>\n      <Flex direction=\"column\" gap=\"large\" style={{ width: \"100px\" }} align=\"start\">\n        <Counter id=\"outline-dark\" aria-label=\"Dark outline counter showing 5\" count={5} color=\"dark\" kind=\"line\" />\n        <Text>Dark</Text>\n      </Flex>\n      <Flex direction=\"column\" gap=\"large\" style={{ width: \"100px\" }} align=\"start\">\n        <Counter id=\"outline-light\" aria-label=\"Light outline counter showing 5\" count={5} color=\"light\" kind=\"line\" />\n        <Text>Light</Text>\n      </Flex>\n    </Flex>\n  )\n};\n\nexport const Limits = {\n  render: () => (\n    <Flex gap={160}>\n      <Flex direction=\"column\" gap=\"large\" style={{ width: \"100px\" }} align=\"start\">\n        <Counter\n          id=\"limits-one-digit\"\n          aria-label=\"Counter showing 9+ items (10 with 1 digit limit)\"\n          count={10}\n          maxDigits={1}\n        />\n        <Text>One digit limit</Text>\n      </Flex>\n      <Flex direction=\"column\" gap=\"large\" style={{ width: \"100px\" }} align=\"start\">\n        <Counter\n          id=\"limits-two-digit\"\n          aria-label=\"Counter showing 99+ items (100 with 2 digit limit)\"\n          count={100}\n          maxDigits={2}\n        />\n        <Text>Two digits limit</Text>\n      </Flex>\n      <Flex direction=\"column\" gap=\"large\" style={{ width: \"100px\" }} align=\"start\">\n        <Counter id=\"limits-three-digit\" aria-label=\"Counter showing 1000 items\" count={1000} />\n        <Text>Three digits limit</Text>\n      </Flex>\n    </Flex>\n  )\n};\n\nexport const NotificationCounter = {\n  render: () => {\n    return (\n      <div style={{ position: \"relative\" }}>\n        <Avatar\n          id=\"notification-avatar\"\n          type=\"icon\"\n          icon={Notifications}\n          backgroundColor=\"royal\"\n          aria-label=\"Notifications\"\n        />\n        <div style={{ position: \"absolute\", top: \"-5px\", right: \"-5px\" }}>\n          <Counter\n            id=\"notification-counter\"\n            aria-label=\"5 unread notifications\"\n            count={5}\n            maxDigits={1}\n            color=\"negative\"\n          />\n        </div>\n      </div>\n    );\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Notifications }\n      }\n    }\n  }\n};\n\nexport const CounterOnInboxFilters = {\n  render: () => (\n    <Flex gap={28}>\n      <Flex direction=\"column\" gap=\"large\" align=\"start\">\n        <Text>UX Writing & microcopy Re...</Text>\n        <Text>Mobile Data- Iteration Plan...</Text>\n        <Text>Q Plans.</Text>\n      </Flex>\n      <Flex direction=\"column\" gap=\"large\" align=\"start\">\n        <Counter id=\"inbox-counter-1\" aria-label=\"195 items in UX Writing & microcopy\" count={195} color=\"dark\" />\n        <Counter id=\"inbox-counter-2\" aria-label=\"141 items in Mobile Data Iteration Plan\" count={141} color=\"dark\" />\n        <Counter id=\"inbox-counter-3\" aria-label=\"99 items in Q Plans\" count={99} color=\"dark\" />\n      </Flex>\n    </Flex>\n  )\n};\n\nexport const CountTheNumberOfUpdates = {\n  render: () => (\n    <Flex gap={12} direction=\"column\" align=\"start\">\n      <Icon icon={AddUpdate} size=\"36\" />\n      <Divider />\n      <div style={{ position: \"relative\" }}>\n        <Icon icon={Update} size=\"36\" />\n        <div style={{ position: \"absolute\", bottom: 0, right: -3 }}>\n          <Counter count={5} size=\"small\" id=\"count-the-number-of-updates-1\" aria-label=\"5 updates\" />\n        </div>\n      </div>\n      <Divider />\n      <div style={{ position: \"relative\" }}>\n        <Icon icon={Update} size=\"36\" />\n        <div style={{ position: \"absolute\", bottom: 0, right: -3 }}>\n          <Counter count={5} color=\"dark\" size=\"small\" id=\"count-the-number-of-updates-2\" aria-label=\"5 updates\" />\n        </div>\n      </div>\n    </Flex>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { AddUpdate, Update }\n      }\n    }\n  }\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/DatePicker/DatePicker.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport * as DatepickerStories from \"./DatePicker.stories\";\n\n<Meta of={DatepickerStories} />\n\n# DatePicker\n\nA simple and reusable Datepicker component\n\n<Canvas of={DatepickerStories.Overview} />\n\n### Import\n\n```js\nimport { DatePicker } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\"When picking a single or range of dates is required\", \"Displaying past, present and future dates\"]}\n/>\n\n## Variants\n\n### Single day\n\nAllows users to select a single date\n\n<Canvas of={DatepickerStories.SingleDay} />\n\n### Date range\n\nAllows users to select a date range\n\n<Canvas of={DatepickerStories.DateRange} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"TextField\", \"Dropdown\", \"DialogContentContainer\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/DatePicker/DatePicker.stories.tsx",
    "content": "import React, { useState } from \"react\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { type DatePickerProps } from \"../DatePicker.types\";\nimport { ja } from \"date-fns/locale\";\nimport { DialogContentContainer, DatePicker } from \"@vibe/core\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: DatePicker,\n  actionPropsArray: [\"onDateChange\"]\n});\n\nexport default {\n  title: \"Components/DatePicker\",\n  component: DatePicker,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n};\n\nconst DatePickerTemplate = (args: DatePickerProps) => {\n  const [date, setDate] = useState(new Date(\"2023-05-01\"));\n  return <DatePicker id=\"overview-date-picker\" date={date} onDateChange={setDate} {...args} />;\n};\n\nexport const Overview = {\n  render: DatePickerTemplate.bind({}),\n  name: \"Overview\",\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const SingleDay = {\n  render: () => {\n    const [date, setDate] = useState(new Date(\"2023-05-01\"));\n\n    return (\n      <DialogContentContainer>\n        <DatePicker id=\"single-day-picker\" date={date} onDateChange={setDate} />\n      </DialogContentContainer>\n    );\n  },\n\n  name: \"Single Day\"\n};\n\nexport const DateRange = {\n  render: () => {\n    const [date, setDate] = useState({ start: new Date(\"2023-05-01\"), end: new Date(\"2023-05-03\") });\n\n    return (\n      <DialogContentContainer>\n        <DatePicker\n          id=\"date-range-picker\"\n          mode=\"range\"\n          date={date.start}\n          endDate={date.end}\n          onDateChange={range => setDate({ start: range.date, end: range.endDate })}\n        />\n      </DialogContentContainer>\n    );\n  },\n\n  name: \"Date Range\"\n};\n\nexport const WithLocale = {\n  render: () => {\n    // import ja from 'date-fns/locale/ja';\n    const [date, setDate] = useState(new Date(\"2023-05-01\"));\n\n    return <DatePicker id=\"ja-locale-picker\" date={date} onDateChange={setDate} locale={ja} />;\n  },\n\n  name: \"With Locale\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Dialog/Dialog.interactions.ts",
    "content": "import { expect } from \"@storybook/jest\";\nimport { type Screen } from \"@testing-library/react\";\nimport { type Canvas, getByTestId, interactionSuite } from \"@vibe/core/interactionsTests\";\nimport { userEvent, fireEvent, waitFor } from \"@storybook/test\";\n\n// Test data IDs\nexport const CLICK_OUTSIDE_DIALOG = \"click-outside-dialog\";\nexport const CONTEXT_MENU_DIALOG = \"context-menu-dialog\";\nexport const HIDE_TRIGGERS_CONTAINER = \"hide-triggers-container\";\nexport const CLICK_OUTSIDE_DIALOG_BUTTON = \"click-outside-button\";\n\nconst isDialogHiddenAfterClickOutside = createTestIfDialogHiddenAfterTrigger(CLICK_OUTSIDE_DIALOG, () =>\n  userEvent.click(getDialogContainer())\n);\nconst isDialogHiddenAfterContextMenu = createTestIfDialogHiddenAfterTrigger(CONTEXT_MENU_DIALOG, () =>\n  fireEvent.contextMenu(getDialogContainer())\n);\n\nexport const closeTriggersInteractionSuite: ReturnType<typeof interactionSuite> = interactionSuite({\n  tests: [isDialogHiddenAfterClickOutside, isDialogHiddenAfterContextMenu],\n  beforeAll: async canvas => {\n    // Workaround: Dialog rendering issue with containerSelector on initial mount\n    const clickOutsideButton = await getByTestId(canvas, CLICK_OUTSIDE_DIALOG_BUTTON);\n\n    try {\n      await getDialogElement(canvas, CLICK_OUTSIDE_DIALOG);\n    } catch {\n      await userEvent.click(clickOutsideButton);\n      await waitFor(\n        async () => {\n          const dialog = await getDialogElement(canvas, CLICK_OUTSIDE_DIALOG);\n          expect(dialog).toBeInTheDocument();\n        },\n        { timeout: 1000 }\n      );\n    }\n\n    await waitFor(\n      async () => {\n        const dialog = await getDialogElement(canvas, CLICK_OUTSIDE_DIALOG);\n        expect(dialog).toBeInTheDocument();\n      },\n      { timeout: 1000 }\n    );\n  },\n  afterEach: async () => {\n    const activeElement = document.activeElement as HTMLElement;\n    if (activeElement && activeElement.blur && activeElement !== document.body) {\n      activeElement.blur();\n    }\n  }\n});\n\nfunction getDialogContainer() {\n  return document.querySelector(`[data-testid=${HIDE_TRIGGERS_CONTAINER}]`);\n}\n\nasync function getDialogElement(canvas: Canvas, dataTestId: string) {\n  return await getByTestId(canvas, dataTestId);\n}\n\nasync function checkIfDialogHidden(dialogElement: HTMLElement) {\n  await waitFor(() => expect(dialogElement).not.toBeInTheDocument(), { timeout: 2000 });\n}\n\nfunction createTestIfDialogHiddenAfterTrigger(\n  dataTestId: string,\n  triggerCallback: (canvas: Screen, element: HTMLElement) => void\n) {\n  return async function (canvas: Screen) {\n    const dialog = await getDialogElement(canvas, dataTestId);\n\n    await waitFor(() => expect(dialog).toBeInTheDocument(), { timeout: 100 });\n    await new Promise(resolve => setTimeout(resolve, 50));\n\n    triggerCallback(canvas, dialog);\n    await checkIfDialogHidden(dialog);\n  };\n}\n"
  },
  {
    "path": "packages/docs/src/pages/components/Dialog/Dialog.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { AttentionBox } from \"@vibe/core\";\nimport {\n  TipDevTipFloatingUi,\n  TipDevTipTechnicalPattern,\n  TipDialogContentContainer,\n  TipModal\n} from \"./Dialog.stories.helpers\";\nimport * as DialogStories from \"./Dialog.stories\";\n\n<Meta of={DialogStories} />\n\n# Dialog\n\nThe dialog component's purpose is to position a popup component nearby another element, such as any kind of a button.\nPlease be aware that the dialog component is not responsible for the appearance features of the popup, such as its background color or size.\n\n<Canvas of={DialogStories.Overview} />\n\n<TipDialogContentContainer />\n\n### Import\n\n```js\nimport { Dialog } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n<TipDevTipFloatingUi />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Dialog can appear from top, bottom, left and right to an element\",\n    \"Usually, the dialog will be positioned next to the triggered element.\",\n    <>\n      The Dialog component is mainly used to create customized menus that cannot be developed using the{\" \"}\n      <StorybookLink page=\"Components/Menu/Menu\">Menu</StorybookLink> and{\" \"}\n      <StorybookLink page=\"Components/MenuButton\">MenuButton</StorybookLink> components.\n    </>\n  ]}\n/>\n\n<AttentionBox\n  title=\"Trying to implement your own customize menu?\"\n  text=\"Please be sure that what you try implement cannot be achieved by using already implemented simpler components - such as our Menu component, because creating an over-complicated UI can hurt user experience.\"\n  link={{ href: \"/?path=/docs/components-menu-menu--docs\", text: \"Menu component\" }}\n/>\n<br />\n<TipModal />\n\n## Variants\n\n### Positions\n\n<Canvas of={DialogStories.Positions} />\n\n### Dialog show triggers\n\nWe can choose what will be the related element's trigger which will be responsible for the dialog appearance\n\n<Canvas of={DialogStories.ShowTriggers} />\n\n### Dialog hide triggers\n\nWe can set the triggers which will be responsible for hide the dialog\n\n<Canvas of={DialogStories.HideTriggers} />\n\n### Controlled Dialog\n\nManage the open and close state of the dialog. Note that `isOpen` is used and `showTrigger` is set to `[]` to disable the default triggers.\n\n<Canvas of={DialogStories.ControlledDialog} />\n\n### Dialog with tooltip\n\nDialog has a <code>tooltip</code> prop which adds an arrow pointing toward the center of the reference element.\n\n<Canvas of={DialogStories.DialogWithTooltip} />\n\n### Dialog prevent container scroll\n\nPrevent containerSelector scroll when dialog open\n\n<Canvas of={DialogStories.DisableScrollWhenDialogOpen} />\n\n<TipDevTipTechnicalPattern />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Menu\", \"Tooltip\", \"DialogContentContainer\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Dialog/Dialog.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { Link, StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const TipDialogContentContainer = () => (\n  <Tip>\n    For setting the dialog UI appearance, use{\" \"}\n    <StorybookLink size=\"small\" page=\"Popover\" story=\"DialogContentContainer\">\n      DialogContentContainer\n    </StorybookLink>{\" \"}\n    component.\n  </Tip>\n);\n\nexport const TipDevTipFloatingUi = () => (\n  <Tip title=\"Dev tip\">\n    You can use{\" \"}\n    <Link size=\"small\" href=\"https://floating-ui.com/docs/middleware\">\n      Floating UI middleware\n    </Link>{\" \"}\n    for extended Dialog customization.\n  </Tip>\n);\n\nexport const TipModal = () => (\n  <Tip title=\"Wishing to position your popover in the center of the page?\">\n    Exactly for this purpose, we created the{\" \"}\n    <StorybookLink page=\"Components/Modal\" size=\"small\">\n      Modal\n    </StorybookLink>{\" \"}\n    component! Check it out.\n  </Tip>\n);\n\nexport const TipDevTipTechnicalPattern = () => (\n  <Tip title=\"Dev tip\">\n    If you wish to implement a{\" \"}\n    <StorybookLink page=\"Components/Dropdown\" size=\"small\">\n      Dropdown\n    </StorybookLink>{\" \"}\n    inside a Dialog container and need help displaying the Dropdowns popovers correctly, read more about our Dropdown in\n    popovers technical pattern{\" \"}\n    <StorybookLink page=\"Technical Patterns/Dropdowns inside pop-overs\" size=\"small\">\n      here\n    </StorybookLink>\n    .\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/Dialog/Dialog.stories.tsx",
    "content": "import React from \"react\";\nimport { shift } from \"@floating-ui/react-dom\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { Button, Flex, DialogContentContainer, IconButton, Skeleton, useSwitch, Dialog, type DialogTriggerEvent, type DialogProps } from \"@vibe/core\";\nimport { Info } from \"@vibe/icons\";\n\n// Floating UI middleware to prevent dialog from shifting along the main axis while scrolling\nconst preventMainAxisShift = [shift({ mainAxis: false })];\nimport {\n  closeTriggersInteractionSuite,\n  CLICK_OUTSIDE_DIALOG,\n  CLICK_OUTSIDE_DIALOG_BUTTON,\n  CONTEXT_MENU_DIALOG,\n  HIDE_TRIGGERS_CONTAINER\n} from \"./Dialog.interactions\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: Dialog\n});\n\nconst dialogTriggerEvents: DialogTriggerEvent[] = [\n  \"click\",\n  \"clickoutside\",\n  \"esckey\",\n  \"tab\",\n  \"mouseenter\",\n  \"mouseleave\",\n  \"enter\",\n  \"mousedown\",\n  \"focus\",\n  \"blur\",\n  \"onContentClick\",\n  \"contextmenu\"\n];\n\nconst showHideArgTypes = {\n  options: dialogTriggerEvents,\n  control: {\n    type: \"multi-select\"\n  },\n  table: {\n    type: {\n      summary: dialogTriggerEvents.join(\" | \")\n    }\n  }\n};\n\nexport default {\n  title: \"Components/Dialog\",\n  component: Dialog,\n  argTypes: {\n    ...metaSettings.argTypes,\n    hideTrigger: showHideArgTypes,\n    showTrigger: showHideArgTypes\n  },\n  decorators: metaSettings.decorators,\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { useSwitch, shift, preventMainAxisShift }\n      }\n    }\n  }\n};\n\nexport const Overview = {\n  render: (args: DialogProps) => {\n    return (\n      <div style={{ padding: \"80px var(--sb-spacing-small)\" }}>\n        <Dialog\n          id=\"overview-dialog\"\n          aria-label=\"Overview dialog\"\n          middleware={preventMainAxisShift}\n          shouldShowOnMount\n          showTrigger={[\"click\"]}\n          hideTrigger={[\"click\"]}\n          position={\"right\"}\n          content={\n            <DialogContentContainer>\n              <Flex\n                direction=\"column\"\n                align=\"start\"\n                gap=\"small\"\n                style={{ width: \"150px\", padding: \"var(--sb-spacing-small)\" }}\n              >\n                <Skeleton type=\"text\" size=\"h1\" fullWidth />\n                {Array.from({ length: 3 }, (_value, index: number) => (\n                  <Flex key={index} gap=\"small\" style={{ width: \"100%\" }}>\n                    <Skeleton type=\"circle\" width={20} height={20} />\n                    <Skeleton type=\"text\" size=\"small\" fullWidth />\n                  </Flex>\n                ))}\n              </Flex>\n            </DialogContentContainer>\n          }\n          {...args}\n        >\n          <IconButton\n            id=\"overview-dialog-trigger\"\n            aria-label=\"Open information dialog\"\n            icon={Info}\n            active\n            kind=\"secondary\"\n          />\n        </Dialog>\n      </div>\n    );\n  },\n  name: \"Overview\",\n  parameters: {\n    docs: {\n      liveEdit: { isEnabled: false }\n    }\n  }\n};\n\nexport const Positions = {\n  render:\n    // for prevent dialog to move while scrolling\n    () => {\n      // For maintain active state of each button according to the dialog open state (this hooks is available for your usage)\n      const { isChecked: checkedTop, onChange: onChangeTop } = useSwitch({\n        defaultChecked: false\n      });\n\n      const { isChecked: checkedBottom, onChange: onChangeBottom } = useSwitch({\n        defaultChecked: false\n      });\n\n      const { isChecked: checkedRight, onChange: onChangeRight } = useSwitch({\n        defaultChecked: false\n      });\n\n      const { isChecked: checkedLeft, onChange: onChangeLeft } = useSwitch({\n        defaultChecked: false\n      });\n\n      return (\n        <Flex style={{ padding: \"80px var(--sb-spacing-small)\" }} gap=\"medium\">\n          <Dialog\n            id=\"positions-top-dialog\"\n            aria-label=\"Top positioned dialog\"\n            middleware={preventMainAxisShift}\n            open={checkedTop}\n            position=\"top\"\n            showTrigger={[]}\n            hideTrigger={[]}\n            content={\n              <DialogContentContainer>\n                <Flex\n                  direction=\"column\"\n                  align=\"start\"\n                  gap=\"small\"\n                  style={{ width: \"150px\", padding: \"var(--sb-spacing-small)\" }}\n                >\n                  <Skeleton type=\"text\" size=\"h1\" fullWidth />\n                  {Array.from({ length: 3 }, (_value, index: number) => (\n                    <Flex key={index} gap=\"small\" style={{ width: \"100%\" }}>\n                      <Skeleton type=\"circle\" width={20} height={20} />\n                      <Skeleton type=\"text\" size=\"small\" fullWidth />\n                    </Flex>\n                  ))}\n                </Flex>\n              </DialogContentContainer>\n            }\n          >\n            <Button\n              id=\"positions-top-button\"\n              aria-label=\"Toggle top dialog\"\n              kind=\"secondary\"\n              onClick={onChangeTop}\n              active={checkedTop}\n            >\n              Top\n            </Button>\n          </Dialog>\n          <Dialog\n            id=\"positions-bottom-dialog\"\n            aria-label=\"Bottom positioned dialog\"\n            middleware={preventMainAxisShift}\n            position=\"bottom\"\n            showTrigger={[]}\n            hideTrigger={[]}\n            open={checkedBottom}\n            content={\n              <DialogContentContainer>\n                <Flex\n                  direction=\"column\"\n                  align=\"start\"\n                  gap=\"small\"\n                  style={{ width: \"150px\", padding: \"var(--sb-spacing-small)\" }}\n                >\n                  <Skeleton type=\"text\" size=\"h1\" fullWidth />\n                  {Array.from({ length: 3 }, (_value, index: number) => (\n                    <Flex key={index} gap=\"small\" style={{ width: \"100%\" }}>\n                      <Skeleton type=\"circle\" width={20} height={20} />\n                      <Skeleton type=\"text\" size=\"small\" fullWidth />\n                    </Flex>\n                  ))}\n                </Flex>\n              </DialogContentContainer>\n            }\n          >\n            <Button\n              id=\"positions-bottom-button\"\n              aria-label=\"Toggle bottom dialog\"\n              kind=\"secondary\"\n              onClick={onChangeBottom}\n              active={checkedBottom}\n            >\n              Bottom\n            </Button>\n          </Dialog>\n          <Dialog\n            id=\"positions-right-dialog\"\n            aria-label=\"Right positioned dialog\"\n            middleware={preventMainAxisShift}\n            showTrigger={[]}\n            hideTrigger={[]}\n            position=\"right\"\n            open={checkedRight}\n            content={\n              <DialogContentContainer>\n                <Flex\n                  direction=\"column\"\n                  align=\"start\"\n                  gap=\"small\"\n                  style={{ width: \"150px\", padding: \"var(--sb-spacing-small)\" }}\n                >\n                  <Skeleton type=\"text\" size=\"h1\" fullWidth />\n                  {Array.from({ length: 3 }, (_value, index: number) => (\n                    <Flex key={index} gap=\"small\" style={{ width: \"100%\" }}>\n                      <Skeleton type=\"circle\" width={20} height={20} />\n                      <Skeleton type=\"text\" size=\"small\" fullWidth />\n                    </Flex>\n                  ))}\n                </Flex>\n              </DialogContentContainer>\n            }\n          >\n            <Button\n              id=\"positions-right-button\"\n              aria-label=\"Toggle right dialog\"\n              kind=\"secondary\"\n              onClick={onChangeRight}\n              active={checkedRight}\n            >\n              Right\n            </Button>\n          </Dialog>\n          <Dialog\n            id=\"positions-left-dialog\"\n            aria-label=\"Left positioned dialog\"\n            middleware={preventMainAxisShift}\n            position=\"left\"\n            showTrigger={[]}\n            hideTrigger={[]}\n            open={checkedLeft}\n            content={\n              <DialogContentContainer>\n                <Flex\n                  direction=\"column\"\n                  align=\"start\"\n                  gap=\"small\"\n                  style={{ width: \"150px\", padding: \"var(--sb-spacing-small)\" }}\n                >\n                  <Skeleton type=\"text\" size=\"h1\" fullWidth />\n                  {Array.from({ length: 3 }, (_value, index: number) => (\n                    <Flex key={index} gap=\"small\" style={{ width: \"100%\" }}>\n                      <Skeleton type=\"circle\" width={20} height={20} />\n                      <Skeleton type=\"text\" size=\"small\" fullWidth />\n                    </Flex>\n                  ))}\n                </Flex>\n              </DialogContentContainer>\n            }\n          >\n            <Button\n              id=\"positions-left-button\"\n              aria-label=\"Toggle left dialog\"\n              kind=\"secondary\"\n              onClick={onChangeLeft}\n              active={checkedLeft}\n            >\n              Left\n            </Button>\n          </Dialog>\n        </Flex>\n      );\n    },\n\n  name: \"Positions\"\n};\n\nexport const ShowTriggers = {\n  render: () => {\n    const { isChecked: clickButtonActive, onChange: onClickClickButton } = useSwitch({\n      defaultChecked: false\n    });\n\n    const { isChecked: hoverButtonActive, onChange: onHoverButton } = useSwitch({\n      defaultChecked: false\n    });\n\n    const { isChecked: focusButtonActive, onChange: onFocusButton } = useSwitch({\n      defaultChecked: false\n    });\n\n    return (\n      <Flex style={{ padding: \"80px var(--sb-spacing-small)\" }} gap=\"medium\">\n        <Dialog\n          middleware={preventMainAxisShift}\n          showTrigger={[\"click\"]}\n          hideTrigger={[\"click\"]}\n          content={\n            <DialogContentContainer>\n              <Flex\n                direction=\"column\"\n                align=\"start\"\n                gap=\"small\"\n                style={{ width: \"150px\", padding: \"var(--sb-spacing-small)\" }}\n              >\n                <Skeleton type=\"text\" size=\"h1\" fullWidth />\n                {Array.from({ length: 3 }, (_value, index: number) => (\n                  <Flex key={index} gap=\"small\" style={{ width: \"100%\" }}>\n                    <Skeleton type=\"circle\" width={20} height={20} />\n                    <Skeleton type=\"text\" size=\"small\" fullWidth />\n                  </Flex>\n                ))}\n              </Flex>\n            </DialogContentContainer>\n          }\n        >\n          <Button kind=\"secondary\" active={clickButtonActive} onClick={onClickClickButton}>\n            On click\n          </Button>\n        </Dialog>\n        <Dialog\n          middleware={preventMainAxisShift}\n          showTrigger={[\"mouseenter\"]}\n          hideTrigger={[\"mouseleave\"]}\n          content={\n            <DialogContentContainer>\n              <Flex\n                direction=\"column\"\n                align=\"start\"\n                gap=\"small\"\n                style={{ width: \"150px\", padding: \"var(--sb-spacing-small)\" }}\n              >\n                <Skeleton type=\"text\" size=\"h1\" fullWidth />\n                {Array.from({ length: 3 }, (_value, index: number) => (\n                  <Flex key={index} gap=\"small\" style={{ width: \"100%\" }}>\n                    <Skeleton type=\"circle\" width={20} height={20} />\n                    <Skeleton type=\"text\" size=\"small\" fullWidth />\n                  </Flex>\n                ))}\n              </Flex>\n            </DialogContentContainer>\n          }\n        >\n          <div onMouseEnter={onHoverButton} onMouseLeave={onHoverButton}>\n            <Button kind=\"secondary\" active={hoverButtonActive}>\n              On mouse enter\n            </Button>\n          </div>\n        </Dialog>\n        <Dialog\n          middleware={preventMainAxisShift}\n          showTrigger={[\"focus\"]}\n          hideTrigger={[\"blur\"]}\n          content={\n            <DialogContentContainer>\n              <Flex\n                direction=\"column\"\n                align=\"start\"\n                gap=\"small\"\n                style={{ width: \"150px\", padding: \"var(--sb-spacing-small)\" }}\n              >\n                <Skeleton type=\"text\" size=\"h1\" fullWidth />\n                {Array.from({ length: 3 }, (_value, index: number) => (\n                  <Flex key={index} gap=\"small\" style={{ width: \"100%\" }}>\n                    <Skeleton type=\"circle\" width={20} height={20} />\n                    <Skeleton type=\"text\" size=\"small\" fullWidth />\n                  </Flex>\n                ))}\n              </Flex>\n            </DialogContentContainer>\n          }\n        >\n          <Button onFocus={onFocusButton} onBlur={onFocusButton} kind=\"secondary\" active={focusButtonActive}>\n            On focus\n          </Button>\n        </Dialog>\n        <Dialog\n          middleware={preventMainAxisShift}\n          shouldShowOnMount\n          showTrigger={[]}\n          hideTrigger={[]}\n          position=\"right\"\n          content={\n            <DialogContentContainer>\n              <Flex\n                direction=\"column\"\n                align=\"start\"\n                gap=\"small\"\n                style={{ width: \"150px\", padding: \"var(--sb-spacing-small)\" }}\n              >\n                <Skeleton type=\"text\" size=\"h1\" fullWidth />\n                {Array.from({ length: 3 }, (_value, index: number) => (\n                  <Flex key={index} gap=\"small\" style={{ width: \"100%\" }}>\n                    <Skeleton type=\"circle\" width={20} height={20} />\n                    <Skeleton type=\"text\" size=\"small\" fullWidth />\n                  </Flex>\n                ))}\n              </Flex>\n            </DialogContentContainer>\n          }\n        >\n          <Button kind=\"secondary\" active>\n            On mount\n          </Button>\n        </Dialog>\n      </Flex>\n    );\n  },\n\n  name: \"Show triggers\",\n\n  parameters: {\n    chromatic: {\n      pauseAnimationAtEnd: true\n    }\n  }\n};\n\nexport const HideTriggers = {\n  render: () => {\n    // For maintain active state of each button according to the dialog open state (this hooks is available for your usage)\n    const { isChecked: clickButtonActive, onChange: switchClickButtonActive } = useSwitch({\n      defaultChecked: true\n    });\n\n    const { isChecked: clickOutsideButtonActive, onChange: switchClickOutsideActive } = useSwitch({\n      defaultChecked: true\n    });\n\n    const { isChecked: mouseLeaveButtonActive, onChange: switchMouseLeaveActive } = useSwitch({\n      defaultChecked: true\n    });\n\n    const { isChecked: blurButtonActive, onChange: switchBlurButtonActive } = useSwitch({\n      defaultChecked: true\n    });\n\n    const { isChecked: contentClickButtonActive, onChange: switchContentClickActive } = useSwitch({\n      defaultChecked: true\n    });\n\n    const { isChecked: contextMenuButtonActive, onChange: switchContextMenuActive } = useSwitch({\n      defaultChecked: true\n    });\n\n    return (\n      <Flex\n        data-testid={HIDE_TRIGGERS_CONTAINER}\n        id={HIDE_TRIGGERS_CONTAINER}\n        style={{ paddingInline: \"var(--sb-spacing-small)\" }}\n        wrap\n        direction=\"column\"\n        justify=\"start\"\n        align=\"start\"\n      >\n        <Dialog\n          middleware={preventMainAxisShift}\n          shouldShowOnMount\n          containerSelector={`#${HIDE_TRIGGERS_CONTAINER}`}\n          onClickOutside={switchClickOutsideActive}\n          position=\"right\"\n          showTrigger={[\"click\"]}\n          hideTrigger={[\"clickoutside\"]}\n          content={\n            <DialogContentContainer data-testid={CLICK_OUTSIDE_DIALOG}>\n              <Flex\n                direction=\"column\"\n                align=\"start\"\n                gap=\"small\"\n                style={{ width: \"150px\", padding: \"var(--sb-spacing-small)\" }}\n              >\n                <Skeleton type=\"text\" size=\"h1\" fullWidth />\n                <Flex gap=\"small\" style={{ width: \"100%\" }}>\n                  <Skeleton type=\"circle\" width={20} height={20} />\n                  <Skeleton type=\"text\" size=\"small\" fullWidth />\n                </Flex>\n              </Flex>\n            </DialogContentContainer>\n          }\n        >\n          <Button\n            data-testid={CLICK_OUTSIDE_DIALOG_BUTTON}\n            kind=\"secondary\"\n            active={clickOutsideButtonActive}\n            onClick={switchClickOutsideActive}\n            style={{\n              marginBlock: \"54px\"\n            }}\n          >\n            On click outside\n          </Button>\n        </Dialog>\n        <Dialog\n          middleware={preventMainAxisShift}\n          shouldShowOnMount\n          position=\"right\"\n          showTrigger={[\"click\"]}\n          hideTrigger={[\"click\"]}\n          content={\n            <DialogContentContainer>\n              <Flex\n                direction=\"column\"\n                align=\"start\"\n                gap=\"small\"\n                style={{ width: \"150px\", padding: \"var(--sb-spacing-small)\" }}\n              >\n                <Skeleton type=\"text\" size=\"h1\" fullWidth />\n                <Flex gap=\"small\" style={{ width: \"100%\" }}>\n                  <Skeleton type=\"circle\" width={20} height={20} />\n                  <Skeleton type=\"text\" size=\"small\" fullWidth />\n                </Flex>\n              </Flex>\n            </DialogContentContainer>\n          }\n        >\n          <Button\n            kind=\"secondary\"\n            active={clickButtonActive}\n            onClick={switchClickButtonActive}\n            style={{\n              marginBlock: \"54px\"\n            }}\n          >\n            On click\n          </Button>\n        </Dialog>\n        <Dialog\n          middleware={preventMainAxisShift}\n          shouldShowOnMount\n          position=\"right\"\n          showTrigger={[\"focus\", \"click\"]}\n          hideTrigger={[\"blur\"]}\n          content={\n            <DialogContentContainer>\n              <Flex\n                direction=\"column\"\n                align=\"start\"\n                gap=\"small\"\n                style={{ width: \"150px\", padding: \"var(--sb-spacing-small)\" }}\n              >\n                <Skeleton type=\"text\" size=\"h1\" fullWidth />\n                <Flex gap=\"small\" style={{ width: \"100%\" }}>\n                  <Skeleton type=\"circle\" width={20} height={20} />\n                  <Skeleton type=\"text\" size=\"small\" fullWidth />\n                </Flex>\n              </Flex>\n            </DialogContentContainer>\n          }\n        >\n          <Button\n            kind=\"secondary\"\n            active={blurButtonActive}\n            onClick={switchBlurButtonActive}\n            style={{\n              marginBlock: \"54px\"\n            }}\n          >\n            On blur\n          </Button>\n        </Dialog>\n        <Dialog\n          middleware={preventMainAxisShift}\n          shouldShowOnMount\n          position=\"right\"\n          showTrigger={[\"click\"]}\n          hideTrigger={[\"onContentClick\"]}\n          onContentClick={switchContentClickActive}\n          content={\n            <DialogContentContainer>\n              <Flex\n                direction=\"column\"\n                align=\"start\"\n                gap=\"small\"\n                style={{ width: \"150px\", padding: \"var(--sb-spacing-small)\" }}\n              >\n                <Skeleton type=\"text\" size=\"h1\" fullWidth />\n                <Flex gap=\"small\" style={{ width: \"100%\" }}>\n                  <Skeleton type=\"circle\" width={20} height={20} />\n                  <Skeleton type=\"text\" size=\"small\" fullWidth />\n                </Flex>\n              </Flex>\n            </DialogContentContainer>\n          }\n        >\n          <Button\n            kind=\"secondary\"\n            active={contentClickButtonActive}\n            onClick={switchContentClickActive}\n            style={{\n              marginBlock: \"54px\"\n            }}\n          >\n            On content click\n          </Button>\n        </Dialog>\n        <Dialog\n          middleware={preventMainAxisShift}\n          shouldShowOnMount\n          showTrigger={[\"mouseenter\"]}\n          hideTrigger={[\"mouseleave\"]}\n          position=\"right\"\n          onDialogDidHide={switchMouseLeaveActive}\n          onDialogDidShow={switchMouseLeaveActive}\n          content={\n            <DialogContentContainer>\n              <Flex\n                direction=\"column\"\n                align=\"start\"\n                gap=\"small\"\n                style={{ width: \"150px\", padding: \"var(--sb-spacing-small)\" }}\n              >\n                <Skeleton type=\"text\" size=\"h1\" fullWidth />\n                <Flex gap=\"small\" style={{ width: \"100%\" }}>\n                  <Skeleton type=\"circle\" width={20} height={20} />\n                  <Skeleton type=\"text\" size=\"small\" fullWidth />\n                </Flex>\n              </Flex>\n            </DialogContentContainer>\n          }\n        >\n          <Button\n            kind=\"secondary\"\n            active={mouseLeaveButtonActive}\n            onClick={switchMouseLeaveActive}\n            style={{\n              marginBlock: \"54px\"\n            }}\n          >\n            On mouse leave\n          </Button>\n        </Dialog>\n        <Dialog\n          middleware={preventMainAxisShift}\n          shouldShowOnMount\n          showTrigger={[\"click\"]}\n          hideTrigger={[\"contextmenu\"]}\n          position=\"right\"\n          containerSelector={`#${HIDE_TRIGGERS_CONTAINER}`}\n          onDialogDidHide={switchContextMenuActive}\n          onDialogDidShow={switchContextMenuActive}\n          content={\n            <DialogContentContainer data-testid={CONTEXT_MENU_DIALOG}>\n              <Flex\n                direction=\"column\"\n                align=\"start\"\n                gap=\"small\"\n                style={{ width: \"150px\", padding: \"var(--sb-spacing-small)\" }}\n              >\n                <Skeleton type=\"text\" size=\"h1\" fullWidth />\n                <Flex gap=\"small\" style={{ width: \"100%\" }}>\n                  <Skeleton type=\"circle\" width={20} height={20} />\n                  <Skeleton type=\"text\" size=\"small\" fullWidth />\n                </Flex>\n              </Flex>\n            </DialogContentContainer>\n          }\n        >\n          <Button\n            kind=\"secondary\"\n            active={contextMenuButtonActive}\n            style={{\n              marginBlock: \"54px\"\n            }}\n          >\n            On right click\n          </Button>\n        </Dialog>\n      </Flex>\n    );\n  },\n\n  name: \"Hide triggers\",\n\n  play: closeTriggersInteractionSuite,\n\n  parameters: {\n    chromatic: {\n      pauseAnimationAtEnd: true\n    },\n    docs: {\n      liveEdit: {\n        scope: {\n          HIDE_TRIGGERS_CONTAINER,\n          CLICK_OUTSIDE_DIALOG,\n          CLICK_OUTSIDE_DIALOG_BUTTON,\n          CONTEXT_MENU_DIALOG\n        }\n      }\n    }\n  }\n};\n\nexport const ControlledDialog = {\n  render: () => {\n    const { isChecked: isOpen, onChange: setIsOpen } = useSwitch({\n      defaultChecked: false\n    });\n\n    return (\n      <Dialog\n        //disable default triggers\n        showTrigger={[]}\n        // manage the opening state in the app level\n        open={isOpen}\n        content={\n          <DialogContentContainer>\n            <DialogContentContainer>\n              <Button\n                kind=\"secondary\"\n                // @ts-ignore\n                onClick={() => setIsOpen(false)}\n              >\n                This will close as well\n              </Button>\n            </DialogContentContainer>\n          </DialogContentContainer>\n        }\n      >\n        <Button\n          // @ts-ignore\n          onClick={() => setIsOpen(!isOpen)}\n        >\n          Click me to toggle the Dialog\n        </Button>\n      </Dialog>\n    );\n  },\n\n  name: \"Controlled Dialog\"\n};\n\nexport const DialogWithTooltip = {\n  render: () => {\n    return (\n      <div style={{ padding: \"80px var(--sb-spacing-small)\" }}>\n        <Dialog\n          tooltip\n          middleware={preventMainAxisShift}\n          shouldShowOnMount\n          showTrigger={[\"click\"]}\n          hideTrigger={[\"click\"]}\n          position=\"right\"\n          content={\n            <DialogContentContainer>\n              <Flex\n                direction=\"column\"\n                align=\"start\"\n                gap=\"small\"\n                style={{ width: \"150px\", padding: \"var(--sb-spacing-small)\" }}\n              >\n                <Skeleton type=\"text\" size=\"h1\" fullWidth />\n                {Array.from({ length: 3 }, (_value, index: number) => (\n                  <Flex key={index} gap=\"small\" style={{ width: \"100%\" }}>\n                    <Skeleton type=\"circle\" width={20} height={20} />\n                    <Skeleton type=\"text\" size=\"small\" fullWidth />\n                  </Flex>\n                ))}\n              </Flex>\n            </DialogContentContainer>\n          }\n        >\n          <IconButton icon={Info} active kind=\"secondary\" />\n        </Dialog>\n      </div>\n    );\n  },\n\n  name: \"Dialog with tooltip\",\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Info, shift, preventMainAxisShift }\n      }\n    }\n  }\n};\n\nexport const DisableScrollWhenDialogOpen = {\n  render: () => {\n    // For maintain active state of each button according to the dialog open state (this hooks is available for your usage)\n    const { isChecked: checkedTop, onChange: onChangeTop } = useSwitch({\n      defaultChecked: false\n    });\n\n    return (\n      <Flex style={{ padding: \"80px var(--sb-spacing-small)\" }} gap=\"medium\">\n        <div\n          className={\"scrollable\"}\n          style={{\n            height: \"300px\",\n            width: \"400px\",\n            overflow: \"auto\"\n          }}\n        >\n          <div\n            style={{\n              height: \"800px\"\n            }}\n          >\n            <Dialog\n              open={checkedTop}\n              position=\"left\"\n              showTrigger={[]}\n              hideTrigger={[]}\n              containerSelector={\".scrollable\"}\n              disableContainerScroll\n              content={\n                <DialogContentContainer>\n                  <Flex\n                    direction=\"column\"\n                    align=\"start\"\n                    gap=\"small\"\n                    style={{ width: \"150px\", padding: \"var(--sb-spacing-small)\" }}\n                  >\n                    <Skeleton type=\"text\" size=\"h1\" fullWidth />\n                    {Array.from({ length: 3 }, (_value, index: number) => (\n                      <Flex key={index} gap=\"small\" style={{ width: \"100%\" }}>\n                        <Skeleton type=\"circle\" width={20} height={20} />\n                        <Skeleton type=\"text\" size=\"small\" fullWidth />\n                      </Flex>\n                    ))}\n                  </Flex>\n                </DialogContentContainer>\n              }\n            >\n              <Button kind=\"secondary\" onClick={onChangeTop} active={checkedTop}>\n                Click\n              </Button>\n            </Dialog>\n          </div>\n        </div>\n      </Flex>\n    );\n  },\n\n  name: \"Disable scroll when dialog open\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Dialog/DialogContentContainer.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport * as DialogContentContainerStories from \"./DialogContentContainer.stories\";\n\n<Meta of={DialogContentContainerStories} />\n\n# DialogContentContainer\n\nThis component is a style component, it provide the look and feel of elevation.\n\n<Canvas of={DialogContentContainerStories.Overview} />\n\n### Import\n\n```js\nimport { DialogContentContainer } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines guidelines={[\"Use this component in order to wrap components within Dialog or Modal\"]} />\n\n## Variants\n\n### Popover\n\n<Canvas of={DialogContentContainerStories.Popover} />\n\n### Modal\n\n<Canvas of={DialogContentContainerStories.Modal} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Dialog/DialogContentContainer.stories.tsx",
    "content": "import React from \"react\";\nimport { DialogContentContainer, Box } from \"@vibe/core\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { createComponentTemplate } from \"vibe-storybook-components\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: DialogContentContainer,\n  ignoreControlsPropNamesArray: [\"children\"]\n});\n\nconst dialogContentContainerTemplate = createComponentTemplate(DialogContentContainer);\n\nexport default {\n  title: \"Components/DialogContentContainer\",\n  component: DialogContentContainer,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n};\n\nexport const Overview = {\n  render: dialogContentContainerTemplate.bind({}),\n  name: \"Overview\",\n\n  args: {\n    children: <Box margin=\"medium\" padding=\"medium\" />\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const Popover = {\n  render: () => (\n    <DialogContentContainer type=\"popover\">\n      <Box margin=\"medium\" padding=\"medium\" />\n    </DialogContentContainer>\n  )\n};\n\nexport const Modal = {\n  render: () => (\n    <DialogContentContainer type=\"modal\">\n      <Box margin=\"medium\" padding=\"medium\" />\n    </DialogContentContainer>\n  )\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Divider/Divider.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport * as DividerStories from \"./Divider.stories\";\n\n<Meta of={DividerStories} />\n\n# Divider\n\nDivider create separation between two UI elements\n\n<Canvas of={DividerStories.Overview} />\n\n### Import\n\n```js\nimport { Divider } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Variants\n\n### Directions\n\n<Canvas of={DividerStories.Directions} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Label\", \"icons\", \"Chips\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Divider/Divider.stories.tsx",
    "content": "import React from \"react\";\nimport { Divider, type DividerProps } from \"@vibe/core\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: Divider\n});\n\nconst dividerTemplate = (args: DividerProps) => (\n  <div style={{ width: \"400px\", height: \"40px\" }}>\n    <Divider {...args} />\n  </div>\n);\n\nexport default {\n  title: \"Components/Divider\",\n  component: Divider,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n};\n\nexport const Overview = {\n  render: dividerTemplate.bind({}),\n  name: \"Overview\",\n  args: {},\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const Directions = {\n  render: () => (\n    <div\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        width: \"400px\"\n      }}\n    >\n      <div\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          height: 40\n        }}\n      >\n        <span\n          style={{\n            marginRight: \"var(--sb-spacing-large)\",\n            alignSelf: \"center\"\n          }}\n        >\n          Horizontal\n        </span>\n        <Divider direction=\"horizontal\" />\n      </div>\n      <div\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          height: 200\n        }}\n      >\n        <span\n          style={{\n            marginRight: \"var(--sb-spacing-large)\",\n            alignSelf: \"center\"\n          }}\n        >\n          Vertical\n        </span>\n        <Divider direction=\"vertical\" />\n      </div>\n    </div>\n  ),\n\n  name: \"Directions\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Dropdown/Dropdown.mdx",
    "content": "import { Canvas, Meta } from \"@storybook/blocks\";\nimport { Link, Tip, StorybookLink } from \"vibe-storybook-components\";\nimport { Overview as BasicDropdownPreview } from \"./DropdownBasicDropdown.stories\";\nimport { Overview as BoxModePreview } from \"./DropdownBoxMode.stories\";\nimport do1 from \"./assets/do1.png\";\nimport dont1 from \"./assets/dont1.png\";\n\n<Meta title=\"Components/Dropdown\" />\n\n# Dropdown\n\nSelect component present a list of options from which a user can select one or several.\n\n### Import\n\n```js\nimport { Dropdown } from \"@vibe/core\";\n```\n\n### Basic dropdown\n\nThe <StorybookLink page=\"Components/Dropdown/Basic dropdown\">Basic dropdown</StorybookLink> present a popup list of options from which a user can select one or several.\n\n<Canvas of={BasicDropdownPreview} sourceState=\"none\" />\n\n### Dropdown box mode\n\nThe <StorybookLink page=\"Components/Dropdown/Dropdown box mode\">Dropdown box mode</StorybookLink> is an always open Dropdown, with the same properties as the basic Dropdown.\n\n<Canvas of={BoxModePreview} sourceState=\"none\" />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"When the user needs to choose one or multiple values from a fixed set of options.\",\n    \"When the selected value needs to be visible after selection.\",\n    \"When the selection is part of a form, filter, or preference setting.\"\n  ]}\n/>\n\n## Do's and Don'ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: <img src={do1} alt=\"do1\" style={{ width: \"300px\" }} />,\n        description: \"Use the select when theres a need to choose one or multiple options from a predefined list.\"\n      },\n      negative: {\n        component: <img src={dont1} alt=\"dont1\" style={{ width: \"200px\" }} />,\n        description: (\n          <>\n            Use select when the purpose of the list is to provide actions or navigation options. Use a{\" \"}\n            <StorybookLink page=\"Components/Menu\">menu</StorybookLink> instead.\n          </>\n        )\n      }\n    }\n  ]}\n/>\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Combobox\", \"SplitButton\", \"Menu\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Dropdown/DropdownBasicDropdown.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport * as DropdownBasicDropdownStories from \"./DropdownBasicDropdown.stories\";\nimport basicSelectDo1 from \"./assets/basicSelectDo1.png\";\nimport basicSelectDont1 from \"./assets/basicSelectDont1.png\";\nimport basicSelectDo2 from \"./assets/basicSelectDo2.png\";\nimport basicSelectDont2 from \"./assets/basicSelectDont2.png\";\nimport dont1 from \"./assets/dont1.png\";\nimport { StorybookLink } from \"vibe-storybook-components\";\n\n<Meta of={DropdownBasicDropdownStories} />\n\n# Basic Dropdown\n\nThe basic dropdown is intended for quick value selection when space is limited and the list of options doesn't need to remain visible. It typically is used when you have 5-8 items to choose from where an action is initiated based on the selection.\n\n<Canvas of={DropdownBasicDropdownStories.Overview} />\n\n### Import\n\n```js\nimport { Dropdown } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Dropdown is typically used when you have 5-8 items to choose from. They are used for navigation or command menus, where an action is initiated based on the selection.\",\n    \"Use a consistent size of form components on the same page. For example, if you are using a medium size dropdown also use the same size text inputs, buttons, and so on.\",\n    \"Avoid having multiple lines of text in a dropdown. If the text is too long for one line, add an ellipsis (…).\",\n    \"When the menu is open, each option in the menu should be the same height as the field.\",\n    \"When organizing dropdown menu items, sort the list in a logical order by putting the most selected option at the top.\"\n  ]}\n/>\n\n## Accessibility\n\n<UsageGuidelines\n  guidelines={[\n    <>\n      Using an <code>id</code> is highly recommended for all instances to ensure proper label association.\n    </>,\n    <>\n      Always provide a <code>label</code> prop to ensure the dropdown's purpose is clear to all users.\n    </>,\n    <>\n      Use <code>ariaLabel</code> prop when you need to provide a custom accessible name for the dropdown.\n    </>,\n    <>\n      Use <code>clearAriaLabel</code> prop when dropdown is clearable.\n    </>,\n    <>\n      Use <code>inputAriaLabel</code> prop when you need to provide a specific accessible name for the input field in\n      searchable dropdowns.\n    </>,\n    <>\n      Use <code>menuAriaLabel</code> prop when you need to provide a custom accessible name for the dropdown menu.\n    </>,\n    <>\n      Use <code>autoFocus</code> prop when the dropdown should receive initial focus for keyboard navigation.\n    </>\n  ]}\n/>\n\n## Variants\n\n### Sizes\n\nThere are three sizes available: Small, Medium, and Large\n\n<Canvas of={DropdownBasicDropdownStories.Sizes} />\n\n### States\n\n<Canvas of={DropdownBasicDropdownStories.States} />\n\n### Multi select\n\nThe Dropdown component supports multi select option that display as chips. The selected items can be shown in either a single line (with additional option for hidden list), or multiple line. This mode also supports all standard dropdown states.\n\n<Canvas of={DropdownBasicDropdownStories.MultiSelect} />\n\n### Dropdown with icon or avatar\n\n<Canvas of={DropdownBasicDropdownStories.DropdownWithIconOrAvatar} />\n\n## Do's and Don'ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: <img src={basicSelectDo1} alt=\"do1\" style={{ width: \"300px\" }} />,\n        description: \"Use the searchable option when having a long list of options.\"\n      },\n      negative: {\n        component: <img src={basicSelectDont1} alt=\"dont1\" style={{ width: \"300px\" }} />,\n        description: <>Use a searchable select when the list is short. Use the select as is.</>\n      }\n    },\n    {\n      positive: {\n        component: <img src={basicSelectDo2} alt=\"do2\" style={{ width: \"300px\" }} />,\n        description:\n          \"Use the select as a closed component. Users should normally be allowed only to click on the items; search is not recommended, though possible.\"\n      },\n      negative: {\n        component: <img src={basicSelectDont2} alt=\"dont2\" style={{ width: \"300px\" }} />,\n        description: (\n          <>\n            Keep the select component in open mode as permanent state. If this is a design requirement consider use the\n            box mode instead <StorybookLink page=\"Components/Dropdown\">box mode</StorybookLink> instead.\n          </>\n        )\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### Searchable dropdown\n\nThe dropdown can also function as a search for a specific item within the list.\n\n<Canvas of={DropdownBasicDropdownStories.Searchable} />\n\n### Dropdown with groups\n\nDropdown can be organized into groups, either with titled sections or dividers. Group titles can be configured to remain sticky or non-sticky.\n\n<Canvas of={DropdownBasicDropdownStories.DropdownWithGroups} />\n\n### Dropdown with elements\n\nThe dropdown item can contain start element or end element. This are the options:\n\n<Canvas of={DropdownBasicDropdownStories.DropdownItemWithElements} />\n\n### Hide selected items\n\nYou can choose to hide selected items within the dropdown list, so users can see only the available options.\n\n<Canvas of={DropdownBasicDropdownStories.DropdownHideSelectedItems} />\n\n### Dropdown with tooltips\n\n<Canvas of={DropdownBasicDropdownStories.DropdownWithTooltips} />\n\n### Dropdown with virtualization\n\nFor performance optimization with large datasets, the Dropdown supports virtualization through the menuRenderer prop. You can integrate any virtualization library of your choice - this example demonstrates implementation using <a href=\"https://github.com/bvaughn/react-window\" target=\"_blank\">react-window</a>.\n\n<Canvas of={DropdownBasicDropdownStories.DropdownWithVirtualization} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"DropdownBoxMode\", \"Combobox\", \"Menu\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Dropdown/DropdownBasicDropdown.stories.tsx",
    "content": "import React, { useCallback, useMemo } from \"react\";\nimport { type Meta, type StoryObj } from \"@storybook/react\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport person1 from \"../Avatar/assets/person1.png\";\nimport person3 from \"../Avatar/assets/person3.png\";\nimport person2 from \"../Avatar/assets/person2.png\";\nimport { Attach, Email } from \"@vibe/icons\";\nimport { Dropdown, type BaseDropdownProps, type DropdownOption, Flex, Text } from \"@vibe/core\";\nimport { FixedSizeList as List } from \"react-window\";\n\ntype Story = StoryObj<typeof Dropdown>;\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: Dropdown,\n  actionPropsArray: [\n    \"onMenuOpen\",\n    \"onMenuClose\",\n    \"onFocus\",\n    \"onBlur\",\n    \"onChange\",\n    \"openMenuOnFocus\",\n    \"onOptionRemove\",\n    \"onOptionSelect\",\n    \"onClear\",\n    \"onInputChange\",\n    \"onKeyDown\"\n  ]\n});\n\nconst meta: Meta<typeof Dropdown> = {\n  title: \"Components/Dropdown/Basic dropdown\",\n  component: Dropdown,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n};\n\nexport default meta;\n\nconst dropdownTemplate = (props: BaseDropdownProps<any>) => {\n  const options = useMemo(\n    () => [\n      { value: 1, label: \"Option 1\" },\n      { value: 2, label: \"Option 2\" },\n      { value: 3, label: \"Option 3\" }\n    ],\n    []\n  );\n\n  return (\n    <div style={{ height: \"150px\", width: \"300px\" }}>\n      <Dropdown options={options} label=\"Label\" helperText=\"Helper text\" {...props} />\n    </div>\n  );\n};\n\nexport const Overview: Story = {\n  render: dropdownTemplate.bind({}),\n  args: {\n    id: \"overview-dropdown\",\n    \"aria-label\": \"Overview dropdown\",\n    placeholder: \"Placeholder text here\",\n    clearAriaLabel: \"Clear\"\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const Sizes: Story = {\n  render: () => {\n    const options = useMemo(\n      () => [\n        { value: 1, label: \"Option 1\" },\n        { value: 2, label: \"Option 2\" },\n        { value: 3, label: \"Option 3\" }\n      ],\n      []\n    );\n    return (\n      <Flex gap=\"medium\">\n        <div style={{ width: \"300px\" }}>\n          <Dropdown\n            id=\"sizes-large\"\n            aria-label=\"Large dropdown\"\n            options={options}\n            placeholder=\"Placeholder text here\"\n            label=\"Label\"\n            size=\"large\"\n            clearAriaLabel=\"Clear\"\n          />\n        </div>\n        <div style={{ width: \"300px\" }}>\n          <Dropdown\n            id=\"sizes-medium\"\n            aria-label=\"Medium dropdown\"\n            options={options}\n            placeholder=\"Placeholder text here\"\n            label=\"Label\"\n            size=\"medium\"\n            clearAriaLabel=\"Clear\"\n          />\n        </div>\n        <div style={{ width: \"300px\" }}>\n          <Dropdown\n            id=\"sizes-small\"\n            aria-label=\"Small dropdown\"\n            options={options}\n            placeholder=\"Placeholder text here\"\n            label=\"Label\"\n            size=\"small\"\n            clearAriaLabel=\"Clear\"\n          />\n        </div>\n      </Flex>\n    );\n  }\n};\n\nexport const States: Story = {\n  render: () => (\n    <Flex direction=\"row\" gap=\"medium\">\n      <Flex direction=\"column\" gap=\"medium\">\n        <div style={{ width: \"300px\" }}>\n          <Dropdown\n            id=\"states-default\"\n            aria-label=\"Default dropdown\"\n            options={[]}\n            placeholder=\"Default\"\n            clearAriaLabel=\"Clear\"\n          />\n        </div>\n        <div style={{ width: \"300px\" }}>\n          <Dropdown\n            id=\"states-disabled\"\n            aria-label=\"Disabled dropdown\"\n            options={[]}\n            placeholder=\"Disabled\"\n            disabled\n            clearAriaLabel=\"Clear\"\n          />\n        </div>\n      </Flex>\n      <Flex direction=\"column\" gap=\"medium\">\n        <div style={{ width: \"300px\" }}>\n          <Dropdown\n            id=\"states-error\"\n            aria-label=\"Error dropdown\"\n            options={[]}\n            placeholder=\"Error\"\n            error\n            clearAriaLabel=\"Clear\"\n          />\n        </div>\n        <div style={{ width: \"300px\" }}>\n          <Dropdown\n            id=\"states-readonly\"\n            aria-label=\"Readonly dropdown\"\n            options={[]}\n            placeholder=\"Readonly\"\n            readOnly\n            clearAriaLabel=\"Clear\"\n          />\n        </div>\n      </Flex>\n    </Flex>\n  )\n};\n\nexport const MultiSelect: Story = {\n  render: () => {\n    const options = useMemo(\n      () => [\n        {\n          value: \"1\",\n          label: \"Chip one\"\n        },\n        {\n          value: \"2\",\n          label: \"Chip two\"\n        },\n        {\n          value: \"3\",\n          label: \"Chip three\"\n        },\n        {\n          value: \"4\",\n          label: \"Chip four\"\n        }\n      ],\n      []\n    );\n\n    return (\n      <Flex gap=\"large\" align=\"start\" justify=\"start\">\n        <Flex direction=\"column\" gap=\"medium\">\n          <Text>Single line with hidden options</Text>\n          <div style={{ width: \"350px\", marginBottom: \"50px\" }}>\n            <Dropdown\n              placeholder=\"Single line multi state\"\n              defaultValue={[options[0], options[1], options[2]]}\n              options={options}\n              multi\n              clearAriaLabel=\"Clear\"\n            />\n          </div>\n        </Flex>\n        <Flex direction=\"column\" gap=\"medium\">\n          <Text>Multiple lines</Text>\n          <div style={{ width: \"350px\", marginBottom: \"50px\" }}>\n            <Dropdown\n              placeholder=\"Multiple line multi state\"\n              defaultValue={[options[0], options[1], options[2]]}\n              options={options}\n              multi\n              multiline\n              clearAriaLabel=\"Clear\"\n            />\n          </div>\n        </Flex>\n      </Flex>\n    );\n  }\n};\n\nexport const DropdownWithIconOrAvatar: Story = {\n  render: () => {\n    const optionsIcons: any = useMemo(\n      () => [\n        {\n          value: \"email\",\n          label: \"Email\",\n          startElement: {\n            type: \"icon\",\n            value: Email\n          }\n        },\n        {\n          value: \"attach\",\n          label: \"Attach\",\n          startElement: {\n            type: \"icon\",\n            value: Attach\n          }\n        }\n      ],\n      []\n    );\n    const optionsAvatar: any = useMemo(\n      () => [\n        {\n          value: \"Julia\",\n          label: \"Julia Martinez\",\n          startElement: {\n            type: \"avatar\",\n            value: person1\n          }\n        },\n        {\n          value: \"Sophia\",\n          label: \"Sophia Johnson\",\n          startElement: {\n            type: \"avatar\",\n            value: person2\n          }\n        },\n        {\n          value: \"Marco\",\n          label: \"Marco DiAngelo\",\n          startElement: {\n            type: \"avatar\",\n            value: person3\n          }\n        }\n      ],\n      []\n    );\n\n    return (\n      <Flex gap=\"large\" align=\"start\" justify=\"start\">\n        <Flex direction=\"column\" gap=\"medium\">\n          <Text>Single value</Text>\n          <div style={{ width: \"350px\", marginBottom: \"10px\" }}>\n            <Dropdown defaultValue={optionsIcons[0]} options={optionsIcons} clearAriaLabel=\"Clear\" />\n          </div>\n          <div style={{ width: \"350px\", marginBottom: \"10px\" }}>\n            <Dropdown defaultValue={optionsAvatar[0]} options={optionsAvatar} clearAriaLabel=\"Clear\" />\n          </div>\n        </Flex>\n        <Flex direction=\"column\" gap=\"medium\">\n          <Text>Multiple values</Text>\n          <div style={{ width: \"350px\", marginBottom: \"10px\" }}>\n            <Dropdown defaultValue={[optionsIcons[0]]} options={optionsIcons} multi clearAriaLabel=\"Clear\" />\n          </div>\n          <div style={{ width: \"350px\", marginBottom: \"10px\" }}>\n            <Dropdown defaultValue={[optionsAvatar[0]]} options={optionsAvatar} multi clearAriaLabel=\"Clear\" />\n          </div>\n        </Flex>\n      </Flex>\n    );\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { person1, person2, person3 }\n      }\n    }\n  }\n};\n\nexport const Searchable: Story = {\n  render: () => {\n    const options = useMemo(\n      () => [\n        { value: \"Item 1\", label: \"Item 1\" },\n        { value: \"Item 2\", label: \"Item 2\" },\n        { value: \"Item 3\", label: \"Item 3\" }\n      ],\n      []\n    );\n\n    return (\n      <div style={{ width: \"300px\" }}>\n        <Dropdown\n          placeholder={\"Search an item\"}\n          options={options}\n          searchable\n          maxMenuHeight={170}\n          clearAriaLabel=\"Clear\"\n        />\n      </div>\n    );\n  }\n};\n\nexport const DropdownWithGroups: Story = {\n  render: () => {\n    const options = useMemo(\n      () => [\n        {\n          label: \"Category 1\",\n          options: [\n            { value: \"1\", label: \"Item 1\" },\n            { value: \"2\", label: \"Item 2\" },\n            { value: \"3\", label: \"Item 3\" }\n          ]\n        },\n        {\n          label: \"Category 2\",\n          options: [\n            { value: \"4\", label: \"Item 1\" },\n            { value: \"5\", label: \"Item 2\" },\n            { value: \"6\", label: \"Item 3\" }\n          ]\n        }\n      ],\n      []\n    );\n\n    const optionsWithoutGroupLabel = useMemo(\n      () => [\n        {\n          options: [\n            { value: \"1\", label: \"Item 1\" },\n            { value: \"2\", label: \"Item 2\" },\n            { value: \"3\", label: \"Item 3\" }\n          ]\n        },\n        {\n          options: [\n            { value: \"4\", label: \"Item 1\" },\n            { value: \"5\", label: \"Item 2\" }\n          ]\n        }\n      ],\n      []\n    );\n\n    return (\n      <Flex gap=\"medium\" align=\"start\" justify=\"start\">\n        <Flex direction=\"column\" gap=\"medium\">\n          <Text>Group by divider</Text>\n          <div style={{ width: \"300px\" }}>\n            <Dropdown\n              placeholder=\"Group by divider\"\n              options={optionsWithoutGroupLabel}\n              withGroupDivider\n              maxMenuHeight={170}\n              clearAriaLabel=\"Clear\"\n            />\n          </div>\n        </Flex>\n        <Flex direction=\"column\" gap=\"medium\">\n          <Text>Group by category</Text>\n          <div style={{ width: \"300px\" }}>\n            <Dropdown placeholder=\"Group by category\" options={options} maxMenuHeight={170} clearAriaLabel=\"Clear\" />\n          </div>\n        </Flex>\n        <Flex direction=\"column\" gap=\"medium\">\n          <Text>Group by category title sticky</Text>\n          <div style={{ width: \"300px\" }}>\n            <Dropdown\n              placeholder=\"Group by category title sticky\"\n              options={options}\n              stickyGroupTitle\n              maxMenuHeight={170}\n              clearAriaLabel=\"Clear\"\n            />\n          </div>\n        </Flex>\n      </Flex>\n    );\n  }\n};\n\nexport const DropdownItemWithElements: Story = {\n  render: () => {\n    const startOptions: DropdownOption<Record<string, unknown>>[] = useMemo(\n      () => [\n        {\n          value: \"icon\",\n          label: \"Item with icon\",\n          startElement: {\n            type: \"icon\",\n            value: Email\n          }\n        },\n        {\n          value: \"avatar\",\n          label: \"Item with avatar\",\n          startElement: {\n            type: \"avatar\",\n            value: person1\n          }\n        },\n        {\n          value: \"indent\",\n          label: \"Item with insert\",\n          startElement: {\n            type: \"indent\"\n          }\n        }\n      ],\n      []\n    );\n\n    const endOptions: DropdownOption<Record<string, unknown>>[] = useMemo(\n      () => [\n        {\n          value: \"endIcon\",\n          label: \"Item with icon\",\n          endElement: {\n            type: \"icon\",\n            value: Email\n          }\n        },\n        {\n          value: \"hintText\",\n          label: \"Item with hint text\",\n          endElement: {\n            type: \"suffix\",\n            value: \"⌘C\"\n          }\n        }\n      ],\n      []\n    );\n\n    return (\n      <Flex gap=\"large\">\n        <div style={{ width: \"300px\" }}>\n          <Dropdown\n            placeholder={\"Start element\"}\n            options={startOptions}\n            label=\"Start element\"\n            required\n            clearAriaLabel=\"Clear\"\n          />\n        </div>\n        <div style={{ width: \"300px\" }}>\n          <Dropdown\n            placeholder={\"End element\"}\n            options={endOptions}\n            label=\"End element\"\n            required\n            clearAriaLabel=\"Clear\"\n          />\n        </div>\n      </Flex>\n    );\n  }\n};\n\nexport const DropdownHideSelectedItems: Story = {\n  render: () => {\n    const options = useMemo(\n      () => [\n        { value: \"Option 1\", label: \"Label\" },\n        { value: \"Option 2\", label: \"Label\" },\n        { value: \"Option 3\", label: \"Label\" },\n        { value: \"Option 4\", label: \"Label\" },\n        { value: \"Option 5\", label: \"Label\" },\n        { value: \"Option 6\", label: \"Label\" }\n      ],\n      []\n    );\n\n    return (\n      <div style={{ width: \"300px\" }}>\n        <Dropdown\n          placeholder={\"Placeholder text here\"}\n          options={options}\n          defaultValue={[options[0], options[2], options[3]]}\n          label=\"Label\"\n          required\n          multi\n          showSelectedOptions={false}\n          clearAriaLabel=\"Clear\"\n        />\n      </div>\n    );\n  }\n};\n\nexport const DropdownWithTooltips: Story = {\n  render: () => {\n    const optionsWithTooltips = useMemo(\n      () => [\n        {\n          value: \"Option 1\",\n          label: \"Tooltip\",\n          tooltipProps: {\n            content: \"This is a title message for further information will appear here.\"\n          }\n        },\n        {\n          value: \"Option 2\",\n          label: \"Chip\",\n          tooltipProps: {\n            content: \"This is a title message for further information will appear here.\"\n          }\n        },\n        {\n          value: \"Option 3\",\n          label: \"Button\"\n        }\n      ],\n      []\n    );\n\n    return (\n      <div style={{ width: \"300px\" }}>\n        <Dropdown placeholder={\"Placeholder text here\"} options={optionsWithTooltips} clearAriaLabel=\"Clear\" />\n      </div>\n    );\n  }\n};\n\nexport const DropdownWithVirtualization: Story = {\n  render: () => {\n    const options = useMemo(\n      () => [\n        {\n          options: Array.from({ length: 1000 }, (_, index) => ({\n            value: `option-${index + 1}`,\n            label: `Option ${index + 1}`\n          }))\n        }\n      ],\n      []\n    );\n\n    const groupedOptions = useMemo(\n      () =>\n        Array.from({ length: 10 }, (_, groupIndex) => ({\n          label: `Group ${groupIndex + 1}`,\n          options: Array.from({ length: 100 }, (_, optionIndex) => ({\n            value: `group-${groupIndex + 1}-option-${optionIndex + 1}`,\n            label: `Group ${groupIndex + 1} - Option ${optionIndex + 1}`\n          }))\n        })),\n      []\n    );\n\n    const virtualizedMenuRenderer = useCallback(({ children }: { children: React.ReactNode }) => {\n      const flattenedOptions: React.ReactElement[] = [];\n\n      const flattenOptions = (reactNode: React.ReactNode) => {\n        React.Children.forEach(reactNode, childElement => {\n          if (React.isValidElement(childElement)) {\n            if (childElement.type === \"li\" || childElement.props?.role) {\n              flattenedOptions.push(childElement);\n            } else if (childElement.props?.children) {\n              flattenOptions(childElement.props.children);\n            }\n          }\n        });\n      };\n      flattenOptions(children);\n\n      if (flattenedOptions.length === 0) {\n        return <div>No options available</div>;\n      }\n\n      const itemHeight = 40;\n      const containerHeight = 200;\n\n      // Row renderer that preserves original elements with all their downshift props\n      const VirtualizedRow = useCallback(\n        ({ index, style }: { index: number; style: React.CSSProperties }) => {\n          const option = flattenedOptions[index];\n          return <div style={style}>{option}</div>;\n        },\n        [flattenedOptions]\n      );\n\n      return (\n        <List\n          height={containerHeight}\n          width=\"100%\"\n          itemCount={flattenedOptions.length}\n          itemSize={itemHeight}\n          overscanCount={5}\n        >\n          {VirtualizedRow}\n        </List>\n      );\n    }, []);\n\n    return (\n      <Flex gap=\"large\" align=\"start\">\n        <div style={{ width: \"350px\" }}>\n          <Dropdown\n            placeholder=\"Search\"\n            options={options}\n            label=\"Virtualized\"\n            menuRenderer={virtualizedMenuRenderer}\n            searchable\n            maxMenuHeight={250}\n            clearAriaLabel=\"Clear\"\n          />\n        </div>\n        <div style={{ width: \"350px\" }}>\n          <Dropdown\n            placeholder=\"Search\"\n            options={groupedOptions}\n            label=\"Grouped Virtualized\"\n            menuRenderer={virtualizedMenuRenderer}\n            searchable\n            maxMenuHeight={250}\n            clearAriaLabel=\"Clear\"\n          />\n        </div>\n      </Flex>\n    );\n  },\n  name: \"Virtualized Dropdown\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Dropdown/DropdownBoxMode.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport * as DropdownBoxModeStories from \"./DropdownBoxMode.stories\";\nimport boxModeDo from \"./assets/boxModeDo.png\";\nimport boxModeDont from \"./assets/boxModeDont.png\";\n\n<Meta of={DropdownBoxModeStories} />\n\n# Dropdown box mode\n\nThe dropdown box mode is intended for cases where users need to view and compare options at all times, without opening or closing a dropdown. It allows the user to make a selection from a predefined list of options and is typically used when there are a large amount of options to choose from.\n\n<Tip title=\"Migration Guide Available\" emoji=\"🚀\">\n  Migrating from the Combobox? Check out our comprehensive{\" \"}\n  <StorybookLink page=\"Components/Combobox [Deprecated]/Migration Guide\">Combobox Migration Guide</StorybookLink> for\n  step-by-step instructions, breaking changes, and new features.\n</Tip>\n\n<Canvas of={DropdownBoxModeStories.Overview} />\n\n### Import\n\n```js\nimport { Dropdown } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Allows the user to make a selection from a predefined list of options and is typically used when there are a large amount of options to choose from.\",\n    \"Could be used inside a dialog or as part of a layout.\",\n    \"When users need to scan, compare, or evaluate multiple options at once.\",\n    \"The options list is considered primary content, not secondary UI.\"\n  ]}\n/>\n\n## Variants\n\n### Default state\n\nDropdown box mode can be used without dialog or as part of the layout by default.\n\n<Canvas of={DropdownBoxModeStories.DefaultState} />\n\n### Inside a dialog\n\nUse this for Dropdown box mode that triggered by button.\n\n<Canvas of={DropdownBoxModeStories.InsideADialog} />\n\n### Multi select\n\nThe box mode supports multi select option that display as chips. The selected items can be shown in either a single line (with additional option for hidden list), or multiple line. This mode also supports all standard dropdown states.\n\n<Canvas of={DropdownBoxModeStories.MultiSelect} />\n\n### With icons\n\n<Canvas of={DropdownBoxModeStories.WithIcons} />\n\n## Do's and don'ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: <img src={boxModeDo} alt=\"do1\" style={{ width: \"300px\" }} />,\n        description: \"Use when there’s a need for a select that displays the list in a persistent, always-open panel.\"\n      },\n      negative: {\n        component: <img src={boxModeDont} alt=\"dont1\" style={{ width: \"300px\" }} />,\n        description: (\n          <>\n            Use when there's need for a searchable menu, for navigation. Use a{\" \"}\n            <StorybookLink page=\"Components/Menu\">menu</StorybookLink> instead\n          </>\n        )\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### People picker\n\nCan be used when there is a need for selecting people to assign a column\n\n<Canvas of={DropdownBoxModeStories.PeoplePicker} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"DropdownBasicSelect\", \"Combobox\", \"Menu\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Dropdown/DropdownBoxMode.stories.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { type Meta, type StoryObj } from \"@storybook/react\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport person1 from \"../Avatar/assets/person1.png\";\nimport person2 from \"../Avatar/assets/person2.png\";\nimport person3 from \"../Avatar/assets/person3.png\";\nimport person4 from \"../Avatar/assets/person4.png\";\nimport { Email, Send, Mobile } from \"@vibe/icons\";\nimport { Dropdown, Flex, Text, DialogContentContainer, Button } from \"@vibe/core\";\n\ntype Story = StoryObj<typeof Dropdown>;\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: Dropdown,\n  actionPropsArray: [\n    \"onMenuOpen\",\n    \"onMenuClose\",\n    \"onFocus\",\n    \"onBlur\",\n    \"onChange\",\n    \"openMenuOnFocus\",\n    \"onOptionRemove\",\n    \"onOptionSelect\",\n    \"onClear\",\n    \"onInputChange\",\n    \"onKeyDown\"\n  ]\n});\n\nconst meta: Meta<typeof Dropdown> = {\n  title: \"Components/Dropdown/Dropdown box mode\",\n  component: Dropdown,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n};\n\nexport default meta;\n\nconst dropdownTemplate = props => {\n  const options = useMemo(\n    () => [\n      { value: 1, label: \"Label\" },\n      { value: 2, label: \"Label\" },\n      { value: 3, label: \"Label\" },\n      { value: 4, label: \"Label\" },\n      { value: 5, label: \"Label\" }\n    ],\n    []\n  );\n\n  return (\n    <div style={{ width: \"300px\" }}>\n      <Dropdown\n        id=\"box-mode-overview\"\n        aria-label=\"Box mode overview\"\n        options={options}\n        label=\"Label\"\n        placeholder=\"Placeholder text here\"\n        helperText=\"Helper text\"\n        searchable\n        boxMode\n        clearAriaLabel=\"Clear\"\n      />\n    </div>\n  );\n};\n\nexport const Overview: Story = {\n  render: dropdownTemplate.bind({}),\n  args: {\n    id: \"overview-dropdown\",\n    \"aria-label\": \"Overview dropdown\",\n    placeholder: \"Placeholder text here\",\n    clearAriaLabel: \"Clear\"\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const DefaultState: Story = {\n  render: () => {\n    const options = useMemo(\n      () => [\n        { value: 1, label: \"Label\" },\n        { value: 2, label: \"Label\" },\n        { value: 3, label: \"Label\" },\n        { value: 4, label: \"Label\" },\n        { value: 5, label: \"Label\" },\n        { value: 6, label: \"Label\" }\n      ],\n      []\n    );\n\n    return (\n      <div style={{ width: \"300px\" }}>\n        <Dropdown\n          id=\"box-mode-default-state\"\n          aria-label=\"Box mode default state\"\n          options={options}\n          label=\"Label\"\n          placeholder=\"Placeholder text\"\n          helperText=\"Helper text\"\n          searchable\n          boxMode\n          clearAriaLabel=\"Clear\"\n        />\n      </div>\n    );\n  }\n};\n\nexport const InsideADialog: Story = {\n  render: () => {\n    const options = useMemo(\n      () => [\n        { value: 1, label: \"Label\" },\n        { value: 2, label: \"Label\" },\n        { value: 3, label: \"Label\" },\n        { value: 4, label: \"Label\" },\n        { value: 5, label: \"Label\" },\n        { value: 6, label: \"Label\" }\n      ],\n      []\n    );\n\n    return (\n      <div style={{ width: \"300px\" }}>\n        <DialogContentContainer>\n          <Dropdown\n            id=\"box-mode-dialog\"\n            aria-label=\"Box mode inside dialog\"\n            options={options}\n            placeholder=\"Placeholder text\"\n            searchable\n            boxMode\n            clearAriaLabel=\"Clear\"\n          />\n          <Button style={{ width: \"100%\" }} kind=\"secondary\" size=\"small\">\n            Edit\n          </Button>\n        </DialogContentContainer>\n      </div>\n    );\n  }\n};\n\nexport const MultiSelect: Story = {\n  render: () => {\n    const options = useMemo(\n      () => [\n        { value: 1, label: \"Label\" },\n        { value: 2, label: \"Label\" },\n        { value: 3, label: \"Label\" },\n        { value: 4, label: \"Label\" },\n        { value: 5, label: \"Label\" }\n      ],\n      []\n    );\n\n    return (\n      <Flex gap=\"large\" align=\"start\" wrap>\n        <Flex direction=\"column\" gap=\"medium\">\n          <Text type=\"text1\" weight=\"bold\">\n            Single line with hidden options\n          </Text>\n          <div style={{ width: \"300px\" }}>\n            <Dropdown\n              id=\"box-mode-multi-single-line\"\n              aria-label=\"Box mode multi select single line\"\n              options={options}\n              placeholder=\"Placeholder text\"\n              searchable\n              multi\n              boxMode\n              clearAriaLabel=\"Clear\"\n            />\n          </div>\n        </Flex>\n\n        <Flex direction=\"column\" gap=\"medium\">\n          <Text type=\"text1\" weight=\"bold\">\n            Multiple lines\n          </Text>\n          <div style={{ width: \"300px\" }}>\n            <Dropdown\n              id=\"box-mode-multi-multiline\"\n              aria-label=\"Box mode multi select multiple lines\"\n              options={options}\n              placeholder=\"Placeholder text\"\n              searchable\n              multi\n              multiline\n              boxMode\n              clearAriaLabel=\"Clear\"\n            />\n          </div>\n        </Flex>\n      </Flex>\n    );\n  }\n};\n\nexport const WithIcons: Story = {\n  render: () => {\n    const optionsWithIcons: any = useMemo(\n      () => [\n        {\n          value: \"email\",\n          label: \"Email\",\n          startElement: {\n            type: \"icon\",\n            value: Email\n          }\n        },\n        {\n          value: \"send\",\n          label: \"Send\",\n          startElement: {\n            type: \"icon\",\n            value: Send\n          }\n        },\n        {\n          value: \"mobile\",\n          label: \"Mobile\",\n          startElement: {\n            type: \"icon\",\n            value: Mobile\n          }\n        },\n        {\n          value: \"notification\",\n          label: \"Send notification\"\n        }\n      ],\n      []\n    );\n\n    return (\n      <div style={{ width: \"300px\" }}>\n        <Dropdown\n          id=\"box-mode-with-icons\"\n          aria-label=\"Box mode with icons\"\n          options={optionsWithIcons}\n          label=\"Notify via\"\n          placeholder=\"You can choose multiple options\"\n          searchable\n          multi\n          boxMode\n          clearAriaLabel=\"Clear\"\n        />\n      </div>\n    );\n  }\n};\n\nexport const PeoplePicker: Story = {\n  render: () => {\n    const peopleOptions: any = useMemo(\n      () => [\n        {\n          label: \"Suggested people\",\n          options: [\n            {\n              value: \"Matt\",\n              label: \"Matt Gaman\",\n              startElement: {\n                type: \"avatar\",\n                value: person1\n              }\n            },\n            {\n              value: \"Jennifer\",\n              label: \"Jennifer Lawrence\",\n              startElement: {\n                type: \"avatar\",\n                value: person2\n              }\n            },\n            {\n              value: \"Emma\",\n              label: \"Emma Stone\",\n              startElement: {\n                type: \"avatar\",\n                value: person3\n              }\n            },\n            {\n              value: \"Johnny\",\n              label: \"Johnny Depp\",\n              startElement: {\n                type: \"avatar\",\n                value: person4\n              }\n            }\n          ]\n        }\n      ],\n      []\n    );\n\n    return (\n      <Flex gap=\"large\" align=\"start\" wrap>\n        <div style={{ width: \"350px\" }}>\n          <Dropdown\n            id=\"box-mode-people-picker\"\n            aria-label=\"Box mode people picker\"\n            options={peopleOptions}\n            label=\"Person\"\n            placeholder=\"Search for people\"\n            searchable\n            boxMode\n            multi\n            clearAriaLabel=\"Clear\"\n          />\n        </div>\n      </Flex>\n    );\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { person1, person2, person3, person4 }\n      }\n    }\n  }\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Dropdown/dropdown-migration-guide.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { Link, Tip } from \"vibe-storybook-components\";\nimport { Prism as SyntaxHighlighter } from \"react-syntax-highlighter\";\nimport { dark } from \"react-syntax-highlighter/dist/esm/styles/prism\";\nimport { DiffCodeBlock } from \"../../migration-guide/DiffCodeBlock\";\n\n<Meta title=\"Components/Dropdown/Migration Guide\" />\n\n# Dropdown Migration Guide\n\n<div style={{ lineHeight: \"1.8\" }} >\n\n- [Overview](#overview)\n- [Why Migrate? ✨](#why-migrate-)\n- [Migration Steps 🚀](#migration-steps-)\n- [Breaking Changes 🚨](#breaking-changes-)\n- [Enhanced Option Data Structure 🎯](#enhanced-option-data-structure-)\n- [Type Safety Improvements 🛡️](#type-safety-improvements-)\n- [FAQ ❓](#faq-)\n- [Help 🙏](#help-)\n\n## Overview\n\nThe Dropdown component has been completely rewritten from scratch to provide better accessibility, performance, and developer experience. The new implementation is built on top of the **Downshift library** instead of **react-select**, offering significant improvements across all areas.\n\n## Why Migrate? ✨\n\n### Enhanced Accessibility\n\n- **Proper ARIA attributes** and keyboard navigation\n- **Screen reader optimized** with clear announcements\n- **Single combobox role** to avoid confusion\n- **Improved focus management** and visual indicators\n\n### Better Performance\n\n- **Smaller bundle size** (no react-select dependency)\n- **Native implementation** with optimized rendering\n- **Improved performance** for large datasets\n- **Better memory usage** with optimized re-renders\n\n### Enhanced TypeScript Support\n\n- **Full generic type support** with `<Item>` type parameter\n- **Better type safety** for options and callbacks\n- **Comprehensive prop type definitions**\n- **IntelliSense improvements** for better developer experience\n\n### Improved Form Integration\n\n- **Built-in label, helper text, and error state support**\n- **Better validation** and required field handling\n- **Proper form field structure** and semantics\n- **Native form integration** without additional wrappers\n\n### Enhanced Features\n\n- **Sticky group headers** with `stickyGroupTitle`\n- **Custom filtering** with `filterOption` prop\n- **Control selected options visibility** with `showSelectedOptions`\n- **Better tooltip integration** with `tooltipProps`\n\n## Migration Steps 🚀\n\n### 1. Update Import Path\n\n<DiffCodeBlock\n  code={`// In v4, the new Dropdown is the default export from @vibe/core\nimport { Dropdown } from \"@vibe/core\";\n\n// The old react-select based Dropdown has been removed.\n// If you were using the alpha import path:\n// - import { Dropdown } from \"@vibe/core/next\";\n// + import { Dropdown } from \"@vibe/core\";`}\n/>\n\n### 2. Update Option Data Structure\n\nThe new Dropdown expects options with explicit `label` and `value` properties:\n\n<DiffCodeBlock\n  code={`- const options = [\n-   { id: 1, text: \"Option 1\" },\n-   { id: 2, text: \"Option 2\" }\n- ];\n+ const options = [\n+   { value: 1, label: \"Option 1\" },\n+   { value: 2, label: \"Option 2\" }\n+ ];`}\n/>\n\n### 3. Update Form Integration\n\n<DiffCodeBlock\n  code={`- <div>\n-   <label>Select an option</label>\n-   <Dropdown options={options} />\n-   <span>Helper text here</span>\n- </div>\n+ <Dropdown\n+  label=\"Select an option\"\n+  helperText=\"Helper text here\"\n+  required\n+  error={hasError}\n+  options={options}\n+ />`}\n/>\n\n## Breaking Changes 🚨\n\n### Removed Props\n\nThese props are no longer available in the new implementation:\n\n- **`extraStyles`** - Use CSS classes instead\n- **`menuPortalTarget`** - Handled automatically with better positioning\n- **`isVirtualized`** - Built-in performance optimization\n- **`asyncOptions`** - Use external data fetching with `options` prop\n- **`cacheOptions`** - Handle caching externally\n- **`loadingMessage`** - Use `helperText` with loading indicator\n- **`onMenuScrollToBottom`** - Use `onScroll` instead\n- **`captureMenuScroll`** - Handled automatically\n- **`insideOverflowContainer`** - Handled automatically\n- **`insideOverflowWithTransformContainer`** - Handled automatically\n- **`insideLayerContext`** - Handled automatically\n- **`popupsContainerSelector`** - Handled automatically\n- **`tooltipContent`** - Use `tooltipProps` instead for enhanced tooltip support\n\n### Changed Props\n\nThese props have different default values or behavior:\n\n- **`searchable`** - **BREAKING CHANGE**: Now defaults to `false` (was `true`).\n- **`showSelectedOptions`** - **BREAKING CHANGE**: Defaults to `true`. In the old Dropdown, selected options were always hidden in multi select mode.\n- **`multi`** - Better type safety and native chip display\n\n### New Props\n\nThese props are new and provide enhanced functionality:\n\n- **`label`** - Built-in label support\n- **`helperText`** - Built-in helper text support\n- **`error`** - Built-in error state support\n- **`required`** - Built-in required field support\n- **`stickyGroupTitle`** - Sticky group headers\n- **`showSelectedOptions`** - Control selected options visibility (defaults to `true`)\n- **`filterOption`** - Custom filtering logic\n- **`tooltipProps`** - Enhanced tooltip integration (replaces `tooltipContent`)\n- **`inputAriaLabel`** - ARIA label for input\n- **`menuAriaLabel`** - ARIA label for menu\n- **`dir`** - Text direction support instead of `rtl` prop\n\n### Tooltip Integration Changes\n\nThe tooltip integration has been improved in the new Dropdown:\n\n<DiffCodeBlock\n  code={`- // Old Dropdown: Simple string tooltip on the trigger\n- <Dropdown\n-   options={options}\n-   tooltipContent=\"Simple tooltip text\"\n- />\n+ // New Dropdown: Full tooltip props support\n+ <Dropdown\n+ options={options}\n+ tooltipProps={{\n+     content: \"Enhanced tooltip text\",\n+     position: \"top\",\n+     hideDelay: 0\n+ }}\n+ />\n+ // Option-level tooltips\n+ const optionsWithTooltips = [\n+ {\n+     value: \"option1\",\n+     label: \"Option 1\",\n+     tooltipProps: {\n+       content: \"Description for this option\"\n+     }\n+ }\n+ ];`}\n/>\n\n### Selected Options Visibility Behavior\n\n**BREAKING CHANGE**: The new Dropdown changes how selected options are displayed in the dropdown list:\n\n<DiffCodeBlock\n  code={`// Old Dropdown: Selected options always visible in list\n- <Dropdown options={options} value={selectedOption} />\n-   // Selected option still appears in the list when opened\n+ // New Dropdown: Selected options hidden by default\n+ <Dropdown options={options} value={selectedOption} />\n+ // Selected option is hidden from the list when opened\n+\n+ // To restore old behavior:\n+ <Dropdown\n+ options={options}\n+ value={selectedOption}\n+ showSelectedOptions\n+ />`}\n/>\n\n### Search Functionality Changes\n\n**BREAKING CHANGE**: The new Dropdown changes the default search behavior:\n\n<DiffCodeBlock\n  code={`// Old Dropdown: Searchable by default\n- <Dropdown options={options} />\n-   // Search input was enabled by default\n+ // New Dropdown: Not searchable by default\n+ <Dropdown options={options} />\n+ // No search input, simple select behavior\n+\n+ // To restore old search behavior:\n+ <Dropdown\n+ options={options}\n+ searchable\n+ />`}\n/>\n\n#### When to Enable Search\n\nEnable search for dropdowns with many options or when users need to filter:\n\n```tsx\n// Enable search for large option lists\n<Dropdown options={manyOptions} searchable placeholder=\"Search options...\" />\n```\n\n## Enhanced Option Data Structure 🎯\n\n### Start and End Elements\n\nThe new Dropdown supports rich option structures with start and end elements, allowing you to add icons, avatars, suffixes, and custom content to your options:\n\n<DiffCodeBlock\n  code={`- const options = [\n-   { value: 1, label: \"Option 1\" },\n-   { value: 2, label: \"Option 2\" }\n- ];\n+ const options = [\n+   {\n+     value: 1, \n+     label: \"Option 1\",\n+     startElement: { type: \"icon\", value: \"email\" },\n+     endElement: { type: \"suffix\", value: \"Beta\" }\n+   },\n+   {\n+     value: 2,\n+     label: \"Option 2\", \n+     startElement: { type: \"avatar\", value: \"user.jpg\", square: true },\n+     endElement: { type: \"icon\", value: \"check\" }\n+   }\n+ ];`}\n/>\n\n#### Available Element Types\n\n**Start Elements:**\n\n- **`avatar`** - Display user avatars: `{ type: \"avatar\", value: \"image.jpg\", square?: boolean }`\n- **`icon`** - Display icons: `{ type: \"icon\", value: \"iconName\" }`\n- **`indent`** - Add indentation: `{ type: \"indent\" }`\n- **`custom`** - Custom content: `{ type: \"custom\", render: () => <CustomComponent /> }`\n\n**End Elements:**\n\n- **`icon`** - Display icons: `{ type: \"icon\", value: \"iconName\" }`\n- **`suffix`** - Display text suffix: `{ type: \"suffix\", value: \"Hint text\" }`\n- **`custom`** - Custom content: `{ type: \"custom\", render: () => <CustomComponent /> }`\n\n#### Multi-Select Chip Integration\n\nElements are automatically integrated with chips in multi-select mode:\n\n```tsx\nconst optionsWithElements = [\n  {\n    value: \"user1\",\n    label: \"John Doe\",\n    startElement: { type: \"avatar\", value: \"john.jpg\" },\n    endElement: { type: \"suffix\", value: \"Admin\" },\n    chipColor: \"primary\" // Controls chip color in multi-select\n  }\n];\n\n<Dropdown\n  multi\n  options={optionsWithElements}\n  // Start elements become chip left icons/avatars\n  // Chip colors are controlled via chipColor property\n/>;\n```\n\n## Type Safety Improvements 🛡️\n\nThe new Dropdown provides full TypeScript support with generics:\n\n<DiffCodeBlock\n  code={`- interface Option {\n-   value: any;\n-   label: string;\n- }\n+ interface User {\n+  value: number;\n+  label: string;\n+  email: string;\n+ }\n+ <Dropdown<User>\n+ options={users}\n+ onChange={(user) => {\n+     // user is fully typed as User\n+     console.log(user.email);\n+ }}\n+ />`}\n/>\n\n### Enhanced Type Safety\n\n```tsx\n// Multi-select with proper typing\ninterface Task {\n  value: string;\n  label: string;\n  priority: \"high\" | \"medium\" | \"low\";\n}\n\n<Dropdown<Task>\n  multi\n  options={tasks}\n  onChange={selectedTasks => {\n    // selectedTasks is properly typed as Task[]\n    selectedTasks.forEach(task => {\n      console.log(task.priority); // TypeScript knows this exists\n    });\n  }}\n/>;\n```\n\n## FAQ ❓\n\n**Q: What happened to the old Dropdown?**\nA: The old react-select based Dropdown has been removed in Vibe 4. The new Dropdown (previously available via `@vibe/core/next`) is now the default export from `@vibe/core`.\n\n**Q: I was importing Dropdown from `@vibe/core/next`. What should I change?**\nA: Update your import to use `@vibe/core` instead of `@vibe/core/next`.\n\n**Q: Are there any features missing from the new Dropdown?**\nA: The new Dropdown covers all major use cases. If you're using `asyncOptions`, implement data fetching externally and pass the results to the `options` prop.\n\n**Q: How do I handle async data loading?**\nA: Implement your own data fetching logic and pass the results to the `options` prop. You can use the `helperText` prop to show loading states.\n\n**Q: Is the new Dropdown accessible?**\nA: Yes! The new Dropdown is built with accessibility as a core principle.\n\n**Q: How do I migrate tooltip functionality?**\nA: Replace `tooltipContent` with `tooltipProps` for dropdown-level tooltips. The new implementation also supports option-level tooltips via the `tooltipProps` property on individual options.\n\n**Q: Why is my dropdown no longer searchable?**\nA: The new Dropdown defaults to `searchable={false}` since most dropdowns don't need search functionality. Add the `searchable` prop to enable search: `<Dropdown searchable options={options} />`\n\n**Q: How do I add icons or avatars to dropdown options?**\nA: Use the `startElement` and `endElement` properties on option objects. The new Dropdown supports icons, avatars, indentation, suffixes, and custom elements.\n\n**Q: I'm migrating from Combobox, where should I look?**\nA: We have a dedicated <Link href=\"/?path=/docs/components-combobox-deprecated-migration-guide--docs\">Combobox Migration Guide</Link> that covers migrating from Combobox to Dropdown box mode.\n\n</div>\n\n## Help 🙏\n\nIf you have any questions, feedback, or need help with migration, please don't hesitate to reach out:\n\n- **GitHub Issues**: [Report issues](https://github.com/mondaycom/vibe/issues/new/choose)\n- **GitHub Discussions**: [Ask questions](https://github.com/mondaycom/vibe/discussions)\n\nThe new Dropdown represents a significant improvement in accessibility, performance, and developer experience. We're excited to see what you build with it! 🚀\n"
  },
  {
    "path": "packages/docs/src/pages/components/EditableHeading/EditableHeading.interactions.ts",
    "content": "import { expect } from \"@storybook/jest\";\nimport {\n  type Canvas,\n  clearText,\n  clickElement,\n  getByTestId,\n  getByRole,\n  interactionSuite,\n  typeText,\n  delay,\n  resetFocus\n} from \"@vibe/core/interactionsTests\";\nimport { ComponentDefaultTestId } from \"@vibe/shared\";\n\nconst CHANGES_DELAY = 200;\nconst text = \"This heading is an editable heading\";\n\nfunction getComponent(canvas: Canvas) {\n  return getByTestId(canvas, ComponentDefaultTestId.EDITABLE_HEADING);\n}\n\nfunction getInput(canvas: Canvas) {\n  return getByRole(canvas, \"input\");\n}\n\nasync function changeModes(canvas: Canvas) {\n  await delay(CHANGES_DELAY); // needed the tests would run correctly on page refresh\n  const compponent = getComponent(canvas);\n  clickElement(compponent);\n  await delay(CHANGES_DELAY);\n\n  const input = getInput(canvas);\n  expect(input).toHaveAttribute(\"value\", text);\n\n  await resetFocus();\n  const heading = getComponent(canvas);\n  expect(heading).toHaveTextContent(text);\n}\n\nasync function editAndChangeToValidText(canvas: Canvas) {\n  const compponent = getComponent(canvas);\n  clickElement(compponent);\n  await delay(CHANGES_DELAY);\n\n  const input = getInput(canvas);\n  await clearText(input);\n  await typeText(input, text);\n  expect(input).toHaveAttribute(\"value\", text);\n\n  await resetFocus();\n  const heading = getComponent(canvas);\n  expect(heading).toHaveTextContent(text);\n}\n\nasync function clearInput(canvas: Canvas) {\n  const compponent = getComponent(canvas);\n  clickElement(compponent);\n  await delay(CHANGES_DELAY);\n\n  const input = getInput(canvas);\n  await clearText(input);\n\n  await resetFocus();\n  const heading = getComponent(canvas);\n  expect(heading).toHaveTextContent(text);\n}\n\nasync function cancelEditing(canvas: Canvas) {\n  const compponent = getComponent(canvas);\n  clickElement(compponent);\n  await delay(CHANGES_DELAY);\n\n  const input = getInput(canvas);\n  await clearText(input);\n  await delay(CHANGES_DELAY);\n\n  const textToChange = \"test\";\n  await typeText(input, textToChange);\n  expect(input).toHaveAttribute(\"value\", textToChange);\n\n  await typeText(input, \"{Escape}\");\n\n  const heading = getComponent(canvas);\n  expect(heading).toHaveTextContent(text);\n}\n\nexport const overviewPlaySuite: ReturnType<typeof interactionSuite> = interactionSuite({\n  tests: [changeModes, editAndChangeToValidText, clearInput, cancelEditing]\n});\n"
  },
  {
    "path": "packages/docs/src/pages/components/EditableHeading/EditableHeading.mdx",
    "content": "import { EditableHeading } from \"@vibe/core\";\nimport { Meta } from \"@storybook/blocks\";\nimport { createComponentTemplate } from \"vibe-storybook-components\";\nimport { TipEditableText } from \"./EditableHeading.stories.helpers\";\nimport * as EditableHeadingStories from \"./EditableHeading.stories\";\n\n<Meta of={EditableHeadingStories} />\n\nexport const editableHeadingTemplate = createComponentTemplate(EditableHeading);\n\n# EditableHeading\n\nEditable Heading allows users to seamlessly and dynamically edit in-line content. Its default state is a read-view, based on the <StorybookLink page=\"Text/Heading\">Heading</StorybookLink> component, and it becomes editable after clicking on it.\n\n<Canvas of={EditableHeadingStories.Overview} />\n\n### Import\n\n```js\nimport { EditableHeading } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Use when you want to allow the user to edit an existing heading text\",\n    \"This component grows relative to its content, and its maximum width is 100% of its container\"\n  ]}\n/>\n\n<TipEditableText />\n\n## Variants\n\n### Heading types\n\nEditable heading can be used with any of the <StorybookLink page=\"Text/Heading\">Heading</StorybookLink> component sizes and weights.\n\n<Canvas of={EditableHeadingStories.Types} />\n\n### With placeholder\n\n<Canvas of={EditableHeadingStories.WithPlaceholder} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"EditableText\", \"Text\", \"Heading\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/EditableHeading/EditableHeading.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const TipEditableText = () => (\n  <Tip title=\"Am I using the right component?\">\n    This component is used for editing text size 18px and up. For editing smaller text sizes, consider using{\" \"}\n    <StorybookLink page=\"Components/EditableText\" size=\"small\">\n      EditableText\n    </StorybookLink>\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/EditableHeading/EditableHeading.stories.tsx",
    "content": "import React from \"react\";\nimport { EditableHeading, Flex } from \"@vibe/core\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { createComponentTemplate } from \"vibe-storybook-components\";\nimport { overviewPlaySuite } from \"./EditableHeading.interactions\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: EditableHeading,\n  actionPropsArray: [\"onChange\"]\n});\n\nexport default {\n  title: \"Components/EditableHeading\",\n  component: EditableHeading,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n};\n\nconst editableHeadingTemplate = createComponentTemplate(EditableHeading);\n\nexport const Overview = {\n  render: editableHeadingTemplate.bind({}),\n  args: {\n    value: \"This heading is an editable heading\"\n  },\n  play: overviewPlaySuite,\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const Types = {\n  render: () => (\n    <Flex direction=\"column\" gap=\"large\" align=\"start\">\n      <Flex gap=\"large\">\n        <EditableHeading id=\"h1-light\" aria-label=\"H1 light heading\" type=\"h1\" weight=\"light\" value=\"H1 Light\" />\n        <EditableHeading id=\"h1-normal\" aria-label=\"H1 normal heading\" type=\"h1\" weight=\"normal\" value=\"H1 Normal\" />\n        <EditableHeading id=\"h1-medium\" aria-label=\"H1 medium heading\" type=\"h1\" weight=\"medium\" value=\"H1 Medium\" />\n        <EditableHeading id=\"h1-bold\" aria-label=\"H1 bold heading\" type=\"h1\" weight=\"bold\" value=\"H1 Bold\" />\n      </Flex>\n      <Flex gap=\"large\">\n        <EditableHeading id=\"h2-light\" aria-label=\"H2 light heading\" type=\"h2\" weight=\"light\" value=\"H2 Light\" />\n        <EditableHeading id=\"h2-normal\" aria-label=\"H2 normal heading\" type=\"h2\" weight=\"normal\" value=\"H2 Normal\" />\n        <EditableHeading id=\"h2-medium\" aria-label=\"H2 medium heading\" type=\"h2\" weight=\"medium\" value=\"H2 Medium\" />\n        <EditableHeading id=\"h2-bold\" aria-label=\"H2 bold heading\" type=\"h2\" weight=\"bold\" value=\"H2 Bold\" />\n      </Flex>\n      <Flex gap=\"large\">\n        <EditableHeading id=\"h3-light\" aria-label=\"H3 light heading\" type=\"h3\" weight=\"light\" value=\"H3 Light\" />\n        <EditableHeading id=\"h3-normal\" aria-label=\"H3 normal heading\" type=\"h3\" weight=\"normal\" value=\"H3 Normal\" />\n        <EditableHeading id=\"h3-medium\" aria-label=\"H3 medium heading\" type=\"h3\" weight=\"medium\" value=\"H3 Medium\" />\n        <EditableHeading id=\"h3-bold\" aria-label=\"H3 bold heading\" type=\"h3\" weight=\"bold\" value=\"H3 Bold\" />\n      </Flex>\n    </Flex>\n  )\n};\n\nexport const WithPlaceholder = {\n  render: () => (\n    <EditableHeading\n      id=\"with-placeholder\"\n      aria-label=\"Editable heading with placeholder\"\n      value=\"Clear heading to see placeholder\"\n      placeholder=\"Enter your heading here...\"\n    />\n  )\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/EditableText/EditableText.interactions.ts",
    "content": "import { expect } from \"@storybook/jest\";\nimport {\n  type Canvas,\n  clearText,\n  clickElement,\n  getByTestId,\n  getByRole,\n  interactionSuite,\n  typeText,\n  delay,\n  resetFocus\n} from \"@vibe/core/interactionsTests\";\nimport { ComponentDefaultTestId } from \"@vibe/shared\";\n\nconst CHANGES_DELAY = 200;\nconst text = \"This text is an editable text\";\n\nfunction getComponent(canvas: Canvas) {\n  return getByTestId(canvas, ComponentDefaultTestId.EDITABLE_TEXT);\n}\n\nfunction getInput(canvas: Canvas) {\n  return getByRole(canvas, \"input\");\n}\n\nasync function changeModes(canvas: Canvas) {\n  await delay(CHANGES_DELAY);\n  const compponent = getComponent(canvas);\n  clickElement(compponent);\n  await delay(CHANGES_DELAY);\n\n  const input = getInput(canvas);\n  expect(input).toHaveAttribute(\"value\", text);\n\n  await resetFocus();\n  const textElement = getComponent(canvas);\n  expect(textElement).toHaveTextContent(text);\n}\n\nasync function editAndChangeToValidText(canvas: Canvas) {\n  const compponent = getComponent(canvas);\n  clickElement(compponent);\n  await delay(CHANGES_DELAY);\n\n  const input = getInput(canvas);\n  await clearText(input);\n  await typeText(input, text);\n  expect(input).toHaveAttribute(\"value\", text);\n\n  await resetFocus();\n  const textElement = getComponent(canvas);\n  expect(textElement).toHaveTextContent(text);\n}\n\nasync function clearInput(canvas: Canvas) {\n  const compponent = getComponent(canvas);\n  clickElement(compponent);\n  await delay(CHANGES_DELAY);\n\n  const input = getInput(canvas);\n  await clearText(input);\n\n  await resetFocus();\n  const textElement = getComponent(canvas);\n  expect(textElement).toHaveTextContent(text);\n}\n\nasync function cancelEditing(canvas: Canvas) {\n  const compponent = getComponent(canvas);\n  clickElement(compponent);\n  await delay(CHANGES_DELAY);\n\n  const input = getInput(canvas);\n  await clearText(input);\n\n  const textToChange = \"test\";\n  await typeText(input, textToChange);\n  expect(input).toHaveAttribute(\"value\", textToChange);\n\n  await typeText(input, \"{Escape}\");\n\n  const textElement = getComponent(canvas);\n  expect(textElement).toHaveTextContent(text);\n}\n\nexport const overviewPlaySuite: ReturnType<typeof interactionSuite> = interactionSuite({\n  tests: [changeModes, editAndChangeToValidText, clearInput, cancelEditing]\n});\n"
  },
  {
    "path": "packages/docs/src/pages/components/EditableText/EditableText.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { TipTextField } from \"./EditableText.stories.helpers\";\nimport * as EditableTextStories from \"./EditableText.stories\";\n\n<Meta of={EditableTextStories} />\n\n# EditableText\n\nEditable text allows users to seamlessly and dynamically edit in-line content. Its default state is a read-view, based on the <StorybookLink page=\"Text/Text\">Text</StorybookLink> component, and it becomes editable after clicking on it.\n\n<Canvas of={EditableTextStories.Overview} />\n\n### Import\n\n```js\nimport { EditableText } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Use when you want to allow the user to edit an existing text\",\n    \"This component grows relative to its content, and its maximum width is 100% of its container\"\n  ]}\n/>\n\n<TipTextField />\n\n## Variants\n\n### Text types\n\nEditable text can be used with any of the <StorybookLink page=\"Text/Text\">Text</StorybookLink> component sizes and weights.\n\n<Canvas of={EditableTextStories.Types} />\n\n### Multiline\n\nEditable text can be used to allow multiline input.\n\n<Canvas of={EditableTextStories.Multiline} />\n\n### With placeholder\n\n<Canvas of={EditableTextStories.WithPlaceholder} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Text\", \"Heading\", \"EditableHeading\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/EditableText/EditableText.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const TipTextField = () => (\n  <Tip title=\"Am I using the right component?\">\n    This component is used for editing existing text. To allow users to fill empty text fields, for example in a form,\n    consider using{\" \"}\n    <StorybookLink page=\"Components/TextField\" size=\"small\">\n      TextField\n    </StorybookLink>\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/EditableText/EditableText.stories.tsx",
    "content": "import React from \"react\";\nimport { createComponentTemplate } from \"vibe-storybook-components\";\nimport { EditableText, Flex } from \"@vibe/core\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { overviewPlaySuite } from \"./EditableText.interactions\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: EditableText,\n  actionPropsArray: [\"onChange\"]\n});\n\nexport default {\n  title: \"Components/EditableText\",\n  component: EditableText,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n};\n\nconst EditableTextTemplate = createComponentTemplate(EditableText);\n\nexport const Overview = {\n  render: EditableTextTemplate.bind({}),\n  args: {\n    \"aria-label\": \"Editable text\",\n    value: \"This text is an editable text\"\n  },\n  play: overviewPlaySuite,\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const Types = {\n  render: () => (\n    <Flex direction=\"column\" gap=\"large\" align=\"start\">\n      <Flex gap=\"large\">\n        <EditableText aria-label=\"Text1 normal editable text\" type=\"text1\" weight=\"normal\" value=\"Text1 Normal\" />\n        <EditableText aria-label=\"Text1 medium editable text\" type=\"text1\" weight=\"medium\" value=\"Text1 Medium\" />\n        <EditableText aria-label=\"Text1 bold editable text\" type=\"text1\" weight=\"bold\" value=\"Text1 Bold\" />\n      </Flex>\n      <Flex gap=\"large\">\n        <EditableText aria-label=\"Text2 normal editable text\" type=\"text2\" weight=\"normal\" value=\"Text2 Normal\" />\n        <EditableText aria-label=\"Text2 medium editable text\" type=\"text2\" weight=\"medium\" value=\"Text2 Medium\" />\n        <EditableText aria-label=\"Text2 bold editable text\" type=\"text2\" weight=\"bold\" value=\"Text2 Bold\" />\n      </Flex>\n      <Flex gap=\"large\">\n        <EditableText aria-label=\"Text3 normal editable text\" type=\"text3\" weight=\"normal\" value=\"Text3 Normal\" />\n        <EditableText aria-label=\"Text3 medium editable text\" type=\"text3\" weight=\"medium\" value=\"Text3 Medium\" />\n      </Flex>\n    </Flex>\n  )\n};\n\nexport const Multiline = {\n  render: () => (\n    <EditableText\n      aria-label=\"Multiline editable text\"\n      type=\"text1\"\n      weight=\"normal\"\n      multiline\n      value={`This is a multiline\nhere's the second line`}\n    />\n  )\n};\n\nexport const WithPlaceholder = {\n  render: () => (\n    <EditableText\n      aria-label=\"Editable text with placeholder\"\n      value=\"Clear text to see placeholder\"\n      placeholder=\"Enter your text here...\"\n    />\n  )\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/EmptyState/EmptyState.mdx",
    "content": "import { Meta, Controls } from \"@storybook/blocks\";\nimport { EmptyState } from \"@vibe/core\";\nimport * as EmptyStateStories from \"./EmptyState.stories\";\nimport { EmptyStateTip } from \"./EmptyState.stories.helpers\";\nimport mainActionDo from \"./assets/main-action-do.png\";\nimport mainActionDont from \"./assets/main-action-dont.png\";\nimport supportingDo from \"./assets/supporting-do.png\";\nimport supportingDont from \"./assets/supporting-dont.png\";\nimport supportingLinkDo from \"./assets/supporting-link-do.png\";\nimport supportingLinkDont from \"./assets/supporting-link-dont.png\";\nimport { StorybookLink } from \"vibe-storybook-components\";\nimport styles from \"./EmptyState.stories.module.scss\";\n\n<Meta of={EmptyStateStories} />\n\n# EmptyState\n\nAn empty state component is a user interface element that communicates to users that a particular section or feature contains no data or content at the moment. It often provides visual cues, prompts, or suggestions on what actions can be taken to fill the space.\n\n<Canvas of={EmptyStateStories.Overview} />\n\n## Props\n\n<Controls />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Provide a clear and concise message that informs the user about the expected outcome.\",\n    \"Handle errors and edge cases that might occur during data loading or rendering.\",\n    \"Use the empty state component to provide an initial state that prevents confusion when no data is available.\"\n  ]}\n/>\n\n<EmptyStateTip />\n\n## Actions\n\n### Main Action\n\nDesigners should be able to add custom action in specific situations. Like a primary and secondary with consideration to location and layout.\n\n<Canvas of={EmptyStateStories.ActionsComparison} />\n\n### Link\n\nLinks should guide users to troubleshoot the issue or learn more about how to populate the section.\nIf there’s no action to the section the link can stand alone.\n\n<Canvas of={EmptyStateStories.WithLinkOnly} />\n\n### Two buttons\n\nInstead of link you can use a supporting action as a button. The supporting action cannot be the only button. You should include a main action with it.\n\n<Canvas of={EmptyStateStories.WithTwoButtons} />\n\n## Typography\n\nEmpty state can be with or without a title.\n\n<Canvas of={EmptyStateStories.WithAndWithoutTitleComparison} />\n\n## Layout\n\n### Default\n\nThe Default layout is meant for most layouts and locations.\n\n<Canvas of={EmptyStateStories.Default} />\n\n### Compact\n\nInstead of link you can use a supporting action as a button. The supporting action cannot be the only button. You should include a main action with it.\n\n<Canvas of={EmptyStateStories.Compact} />\n\n## Do's and Don'ts\n\n<ComponentRules\n  rules={[\n    {\n      componentContainerClassName: styles.largeComponentRule,\n      positive: {\n        component: (\n          <img\n            src={mainActionDo}\n            alt=\"Empty state with clear guidance and helpful action\"\n            style={{ maxWidth: \"100%\" }}\n          />\n        ),\n        description: \"Provide clear guidance and an action to help users resolve the empty state.\"\n      },\n      negative: {\n        component: <img src={mainActionDont} alt=\"Empty state with vague messaging\" style={{ maxWidth: \"100%\" }} />,\n        description: \"Don't use vague messaging or unhelpful actions that don't guide users.\"\n      }\n    },\n    {\n      componentContainerClassName: styles.largeComponentRule,\n      positive: {\n        component: (\n          <img\n            src={supportingDo}\n            alt=\"Empty state with clear next steps and supporting information\"\n            style={{ maxWidth: \"100%\" }}\n          />\n        ),\n        description: \"Offer clear next steps with supporting information when needed.\"\n      },\n      negative: {\n        component: <img src={supportingDont} alt=\"Empty state with minimal information\" style={{ maxWidth: \"100%\" }} />,\n        description: \"Don't provide minimal or unclear information about how to proceed.\"\n      }\n    },\n    {\n      componentContainerClassName: styles.largeComponentRule,\n      positive: {\n        component: (\n          <img\n            src={supportingLinkDo}\n            alt=\"Empty state with clear next steps and supporting information\"\n            style={{ maxWidth: \"100%\" }}\n          />\n        ),\n        description: \"Offer clear next steps with supporting information when needed.\"\n      },\n      negative: {\n        component: (\n          <img src={supportingLinkDont} alt=\"Empty state with minimal information\" style={{ maxWidth: \"100%\" }} />\n        ),\n        description: \"Don't provide minimal or unclear information about how to proceed.\"\n      }\n    }\n  ]}\n/>\n\n## Related components\n\n<RelatedComponents componentsNames={[\"AlertBanner\", \"Tipseen\", \"AttentionBox\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/EmptyState/EmptyState.stories.helpers.tsx",
    "content": "import React from \"react\";\n\nimport { Tip } from \"vibe-storybook-components\";\nexport const EmptyStateTip = () => {\n  return (\n    <div>\n      <Tip title=\"When to use EmptyState\">\n        Actions help guide users towards the next steps they can take, ensuring that they remain engaged and know how to\n        proceed. Depending on the context and user needs, you can include a primary action, a link, both, or no actions\n        at all.\n      </Tip>\n    </div>\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/EmptyState/EmptyState.stories.module.scss",
    "content": ".largeComponentRule {\n  height: fit-content !important;\n  width: fit-content;\n  padding: var(--sb-spacing-large);\n}\n"
  },
  {
    "path": "packages/docs/src/pages/components/EmptyState/EmptyState.stories.tsx",
    "content": "import React from \"react\";\nimport { type Meta } from \"@storybook/react\";\nimport { EmptyState, Flex, Button, Link } from \"@vibe/core\";\nimport { type EmptyStateProps } from \"../EmptyState.types\";\nimport emptyStateImage from \"./assets/image.png\";\nimport { Download, Update } from \"@vibe/icons\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: EmptyState\n});\n\nexport default {\n  title: \"Components/EmptyState\",\n  component: EmptyState,\n  argTypes: {\n    title: {\n      control: \"text\",\n      description: \"Optional title for the empty state\"\n    },\n    description: {\n      control: \"text\",\n      description: \"Required description text explaining the empty state\"\n    },\n    visual: {\n      control: \"object\",\n      description: \"Optional visual element like image, animation, video, or illustration\"\n    },\n    layout: {\n      control: \"select\",\n      options: [\"default\", \"compact\"],\n      description: \"Layout style of the empty state\"\n    },\n    mainAction: {\n      control: \"object\",\n      description: \"Main action button configuration\"\n    },\n    supportingAction: {\n      control: \"object\",\n      description: \"Supporting action (link or tertiary button) configuration\"\n    }\n  },\n  decorators: metaSettings.decorators\n} satisfies Meta<typeof EmptyState>;\n\nexport const Overview = {\n  render: (args: EmptyStateProps) => (\n    <EmptyState\n      title=\"The title should be concise and reflect the purpose\"\n      description=\"This optional paragraph should be use to extend the title. Keep it short and to the point. For longer texts add a link below.\"\n      visual={<img src={emptyStateImage} alt=\"No items found\" width={280} height={184} />}\n      mainAction={{\n        text: \"Main Action\",\n        onClick: () => {\n          console.log(\"Main action clicked\");\n        }\n      }}\n      supportingAction={{\n        text: \"Read more\",\n        href: \"#\",\n        onClick: () => {\n          console.log(\"Supporting action clicked\");\n        }\n      }}\n      {...args}\n    />\n  ),\n  name: \"Overview\",\n  args: {},\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const Default = {\n  render: (args: EmptyStateProps) => (\n    <EmptyState\n      title=\"Visualize data from multiple boards\"\n      description=\"Use charts, timelines, and other widgets to see your data clearly.\"\n      visual={<img src={emptyStateImage} alt=\"No items found\" width={280} height={184} />}\n      mainAction={{\n        text: \"Add your first widget\",\n        onClick: () => {\n          console.log(\"Main action clicked\");\n        }\n      }}\n      supportingAction={{\n        text: \"Read more\",\n        href: \"#\",\n        onClick: () => {\n          console.log(\"Supporting action clicked\");\n        }\n      }}\n      {...args}\n    />\n  ),\n  name: \"Default\",\n  args: {},\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const WithoutTitle = {\n  render: (args: EmptyStateProps) => (\n    <EmptyState\n      description=\"No data available yet. Add some items to get started.\"\n      visual={<img src={emptyStateImage} alt=\"No data available\" width={280} height={184} />}\n      mainAction={{\n        text: \"Add item\",\n        onClick: () => {\n          console.log(\"Main action clicked\");\n        }\n      }}\n      supportingAction={{\n        text: \"Read more\",\n        href: \"#\",\n        onClick: () => {\n          console.log(\"Supporting action clicked\");\n        }\n      }}\n      {...args}\n    />\n  ),\n  name: \"Without title\"\n};\n\nexport const Compact = {\n  render: (args: EmptyStateProps) => (\n    <EmptyState\n      title=\"Visualize data from multiple boards\"\n      description=\"Use charts, timelines, and other widgets to see your data clearly.\"\n      visual={<img src={emptyStateImage} alt=\"No notifications\" width={280} height={184} />}\n      layout=\"compact\"\n      mainAction={{\n        text: \"Add your first widget\",\n        onClick: () => {\n          console.log(\"Main action clicked\");\n        }\n      }}\n      supportingAction={{\n        text: \"Read more\",\n        href: \"#\",\n        onClick: () => {\n          console.log(\"Supporting action clicked\");\n        }\n      }}\n      {...args}\n    />\n  ),\n  name: \"Compact\"\n};\n\nexport const WithButtonSupportingAction = {\n  render: (args: EmptyStateProps) => (\n    <EmptyState\n      title=\"No files uploaded\"\n      description=\"Upload files to share with your team members.\"\n      visual={<img src={emptyStateImage} alt=\"No files uploaded\" width={280} height={184} />}\n      mainAction={{\n        kind: \"primary\",\n        text: \"Upload files\",\n        leftIcon: Update,\n        onClick: () => {\n          console.log(\"Main action clicked\");\n        }\n      }}\n      supportingAction={{\n        text: \"Import from drive\",\n        leftIcon: Download,\n        onClick: () => {\n          console.log(\"Supporting action clicked\");\n        }\n      }}\n      {...args}\n    />\n  ),\n  name: \"With button supporting action\"\n};\n\nexport const WithDisabledActions = {\n  render: (args: EmptyStateProps) => (\n    <EmptyState\n      title=\"Processing data\"\n      description=\"Your data is being processed. This might take a few minutes.\"\n      visual={<img src={emptyStateImage} alt=\"Processing data\" width={280} height={184} />}\n      mainAction={{\n        kind: \"secondary\",\n        text: \"Refresh\",\n        disabled: true,\n        loading: true,\n        onClick: () => {\n          console.log(\"Main action clicked\");\n        }\n      }}\n      supportingAction={{\n        text: \"Cancel\",\n        disabled: true,\n        onClick: () => {\n          console.log(\"Supporting action clicked\");\n        }\n      }}\n      {...args}\n    />\n  ),\n  name: \"With disabled actions\"\n};\n\nexport const ActionsComparison = {\n  render: (args: EmptyStateProps) => (\n    <Flex direction=\"row\" gap=\"large\">\n      <EmptyState\n        title=\"Your favorites are empty\"\n        description=\"Add boards, docs, or dashboards to your favorites for quick access.\"\n        visual={<img src={emptyStateImage} alt=\"No items found\" width={280} height={184} />}\n        mainAction={{\n          kind: \"secondary\",\n          text: \"Add favorites\",\n          onClick: () => {\n            console.log(\"First view - Add item clicked\");\n          }\n        }}\n      />\n      <EmptyState\n        title=\"Your favorites are empty\"\n        description=\"Add boards, docs, or dashboards to your favorites for quick access.\"\n        visual={<img src={emptyStateImage} alt=\"No items found\" width={280} height={184} />}\n        mainAction={{\n          kind: \"primary\",\n          text: \"Add favorites\",\n          onClick: () => {\n            console.log(\"Second view - View details clicked\");\n          }\n        }}\n        {...args}\n      />\n    </Flex>\n  ),\n  name: \"Actions comparison\"\n};\n\nexport const WithLinkOnly = {\n  render: (args: EmptyStateProps) => (\n    <EmptyState\n      title=\"This workspace is empty\"\n      description='To get started, click the \"+\" above, then click \"add new board\".'\n      supportingAction={{\n        href: \"https://example.com/help\",\n        text: \"Read more\"\n      }}\n      {...args}\n    />\n  ),\n  name: \"With link only\"\n};\n\nexport const WithTwoButtons = {\n  render: (args: EmptyStateProps) => (\n    <EmptyState\n      title=\"This workspace is empty\"\n      description=\"Get started by choosing a board template or creating a board from scratch.\"\n      mainAction={{\n        kind: \"secondary\",\n        text: \"Browse templates\",\n        onClick: () => {\n          console.log(\"Main action clicked\");\n        }\n      }}\n      supportingAction={{\n        kind: \"tertiary\",\n        text: \"Start from scratch\",\n        onClick: () => {\n          console.log(\"Supporting action clicked\");\n        }\n      }}\n      {...args}\n    />\n  ),\n  name: \"With two buttons\"\n};\n\nexport const WithAndWithoutTitleComparison = {\n  render: (args: EmptyStateProps) => (\n    <Flex direction=\"row\" gap=\"large\" justify=\"space-between\" style={{ width: \"100%\" }}>\n      <EmptyState\n        title=\"Create your first Gantt chart\"\n        description=\"Gantt charts keep your projects organized.\"\n        mainAction={{\n          kind: \"secondary\",\n          text: \"Connect boards to start\",\n          onClick: () => {\n            console.log(\"Main action clicked\");\n          }\n        }}\n      />\n      <EmptyState\n        description=\"Create your first Gantt chart\"\n        mainAction={{\n          kind: \"secondary\",\n          text: \"Connect boards to start\",\n          onClick: () => {\n            console.log(\"Main action clicked\");\n          }\n        }}\n        {...args}\n      />\n    </Flex>\n  ),\n  name: \"With and without title comparison\"\n};\n\nexport const WithActionElementProps = {\n  render: (args: EmptyStateProps) => (\n    <EmptyState\n      title=\"No notifications\"\n      description=\"You're all caught up! Check back later for new notifications.\"\n      visual={<img src={emptyStateImage} alt=\"No notifications\" width={280} height={184} />}\n      mainAction={\n        <Button\n          kind=\"secondary\"\n          onClick={() => {\n            console.log(\"Main action clicked\");\n          }}\n        >\n          Check notifications\n        </Button>\n      }\n      supportingAction={\n        <Link\n          href=\"#\"\n          text=\"Manage notification settings\"\n          onClick={() => {\n            console.log(\"Supporting action clicked\");\n          }}\n        />\n      }\n      {...args}\n    />\n  ),\n  name: \"With action element props\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/ExpandCollapse/ExpandCollapse.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { TipCombineMultiple } from \"./ExpandCollapse.stories.helpers\";\nimport * as ExpandCollapseStories from \"./ExpandCollapse.stories\";\n\n<Meta of={ExpandCollapseStories} />\n\n# ExpandCollapse\n\nExpandCollapse is a component that allows you to hide and show content.\n\n<Canvas of={ExpandCollapseStories.Overview} />\n\n### Import\n\n```js\nimport { ExpandCollapse } from \"@vibe/core\";\n```\n\n<TipCombineMultiple />\n\n## Props\n\n<PropsTable />\n\n## Variants\n\n### Open by default\n\n<Canvas of={ExpandCollapseStories.OpenByDefault} />\n\n### Controlled open state\n\nYou can control the open state of the ExpandCollapse component by passing the <code>open</code> prop.\n\n<Canvas of={ExpandCollapseStories.ControlledOpenState} />\n\n### Custom header renderer\n\n<Canvas of={ExpandCollapseStories.CustomHeaderRenderer} />\n\n### Without borders\n\n<Canvas of={ExpandCollapseStories.WithoutBorders} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Accordion\", \"Dropdown\", \"Table\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/ExpandCollapse/ExpandCollapse.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const TipCombineMultiple = () => (\n  <Tip title=\"Want to combine multiple ExpandCollapse?\">\n    Use our{\" \"}\n    <StorybookLink size=\"small\" page=\"Components/Accordion\">\n      Accordion\n    </StorybookLink>{\" \"}\n    component\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/ExpandCollapse/ExpandCollapse.stories.tsx",
    "content": "import React from \"react\";\nimport { useState } from \"react\";\nimport { ExpandCollapse, type ExpandCollapseProps, Icon, Text, Heading } from \"@vibe/core\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { Robot } from \"@vibe/icons\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: ExpandCollapse,\n  ignoreControlsPropNamesArray: [\"headerComponentRenderer\"]\n});\n\nexport default {\n  title: \"Components/ExpandCollapse\",\n  component: ExpandCollapse,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators,\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: {}\n      }\n    }\n  }\n};\n\nexport const Overview = {\n  render: (args: ExpandCollapseProps) => {\n    return (\n      <div style={{ width: \"300px\" }}>\n        <ExpandCollapse title=\"Expand collapse\" {...args}>\n          <Text type=\"text2\" maxLines={2}>\n            Insert here any component that you want, here is a robot for you\n          </Text>\n          <Icon type=\"svg\" icon={Robot} size={40} />\n        </ExpandCollapse>\n      </div>\n    );\n  },\n  name: \"Overview\",\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const OpenByDefault = {\n  render: () => (\n    <div style={{ width: \"300px\" }}>\n      <ExpandCollapse title=\"Open by default\" defaultOpenState>\n        <Text type=\"text2\" maxLines={2}>\n          Insert here any component that you want\n        </Text>\n      </ExpandCollapse>\n    </div>\n  )\n};\n\nexport const ControlledOpenState = {\n  render: () => {\n    const [open, setOpen] = useState(false);\n\n    return (\n      <div style={{ width: \"300px\" }}>\n        <ExpandCollapse title=\"Controlled open state\" open={open} onClick={() => setOpen(prevState => !prevState)}>\n          <Text type=\"text2\" maxLines={2}>\n            Insert here any component that you want\n          </Text>\n        </ExpandCollapse>\n      </div>\n    );\n  }\n};\n\nexport const CustomHeaderRenderer = {\n  render: () => {\n    const ExpandCollapseCustomHeadingComponent = () => {\n      return <Heading type=\"h3\">Any component you want</Heading>;\n    };\n\n    return (\n      <div style={{ width: \"300px\" }}>\n        <ExpandCollapse headerComponentRenderer={ExpandCollapseCustomHeadingComponent}>\n          <Text type=\"text2\" maxLines={2}>\n            Insert here any component that you want\n          </Text>\n        </ExpandCollapse>\n      </div>\n    );\n  }\n};\n\nexport const WithoutBorders = {\n  render: () => (\n    <div style={{ width: \"300px\" }}>\n      <ExpandCollapse hideBorder title=\"Without borders\">\n        <Text type=\"text2\" maxLines={2}>\n          Insert here any component that you want\n        </Text>\n      </ExpandCollapse>\n    </div>\n  )\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Flex/Flex.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport * as FlexStories from \"./Flex.stories\";\n\n<Meta of={FlexStories} />\n\n# Flex\n\nUse Flex component to position group of sub-elements in one dimension, horizontal or vertical, without being dependent on a custom CSS file for positioning the sub-elements.\n\n<Canvas of={FlexStories.Overview} />\n\n### Import\n\n```js\nimport { Flex } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Use flex component whenever you want to define a layout with one dimension.\",\n    \"Flex layout can be either horizontal or vertical.\",\n    \"You can defined the spacing between the layout children by using our fixed sizes - xs (4px), small (8px), medium (16px) or large( 24px).\"\n  ]}\n/>\n\n## Variants\n\n### Directions\n\n<Canvas of={FlexStories.Directions} />\n\n### Horizontal spacing between items\n\n<Canvas of={FlexStories.HorizontalSpacingBetweenItems} />\n\n### Vertical spacing between items\n\n<Canvas of={FlexStories.VerticalSpacingBetweenItems} />\n\n### Horizontal positions\n\n<Canvas of={FlexStories.HorizontalPositions} />\n\n### Horizontal layout using flex\n\n<Canvas of={FlexStories.HorizontalFlex} />\n\n### Vertical positions\n\n<Canvas of={FlexStories.VerticalPositions} />\n\n### Vertical layout using flex\n\n<Canvas of={FlexStories.VerticalFlex} />\n\n### Support multi lines layout\n\nYou can display a layout that includes multiple lines using the flex component wrap mode.\nThis mode allows the layout to break into multiple lines if all the component children cannot fit into one only.\n\n<Canvas of={FlexStories.SupportMultiLinesLayout} />\n\n## Use cases and examples\n\n### Flex as toolbar container\n\nYou can use flex component for create responsive toolbars\n\n<Canvas of={FlexStories.FlexAsToolbarContainer} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Menu\", \"Tabs\", \"List\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Flex/Flex.stories.tsx",
    "content": "import React from \"react\";\nimport { Add, Filter, Person, Search, Sort } from \"@vibe/icons\";\nimport { Button, Flex, Text, Box, Chips, type FlexProps } from \"@vibe/core\";\nimport { StoryDescription } from \"vibe-storybook-components\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: Flex,\n  actionPropsArray: [\"onClick\"]\n});\n\nconst flexTemplate = (args: FlexProps) => {\n  return (\n    <Flex {...args}>\n      <Box padding=\"large\" border />\n      <Box padding=\"large\" border />\n      <Box padding=\"large\" border />\n    </Flex>\n  );\n};\n\nexport default {\n  title: \"Layout/Flex\",\n  component: Flex,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators,\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { StoryDescription }\n      }\n    }\n  }\n};\n\nexport const Overview = {\n  render: flexTemplate.bind({}),\n  name: \"Overview\",\n  args: {},\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const Directions = {\n  render: () => (\n    <div style={{ display: \"grid\", gridTemplateColumns: \"1fr 1fr\", alignItems: \"center\", gap: \"var(--space-32)\" }}>\n      <Text type=\"text1\" weight=\"medium\">\n        Horizontal\n      </Text>\n      <Flex>\n        <Box padding=\"large\" border />\n        <Box padding=\"large\" border />\n        <Box padding=\"large\" border />\n      </Flex>\n      <Text type=\"text1\" weight=\"medium\">\n        Vertical\n      </Text>\n      <Flex direction=\"column\">\n        <Box padding=\"large\" border />\n        <Box padding=\"large\" border />\n        <Box padding=\"large\" border />\n      </Flex>\n    </div>\n  )\n};\n\nexport const HorizontalSpacingBetweenItems = {\n  render: () => (\n    <div\n      style={{\n        display: \"grid\",\n        gridTemplateColumns: \"120px 1fr\",\n        alignItems: \"center\",\n        gap: \"var(--space-16) var(--space-24)\"\n      }}\n    >\n      <Text type=\"text1\" weight=\"medium\" ellipsis={false}>\n        No spacing between items\n      </Text>\n      <Flex>\n        <Box padding=\"large\" border />\n        <Box padding=\"large\" border />\n        <Box padding=\"large\" border />\n      </Flex>\n      <Text type=\"text1\" weight=\"medium\" ellipsis={false}>\n        Extra small spacing between items\n      </Text>\n      <Flex gap=\"xs\">\n        <Box padding=\"large\" border />\n        <Box padding=\"large\" border />\n        <Box padding=\"large\" border />\n      </Flex>\n      <Text type=\"text1\" weight=\"medium\" ellipsis={false}>\n        Small spacing between items\n      </Text>\n      <Flex gap=\"small\">\n        <Box padding=\"large\" border />\n        <Box padding=\"large\" border />\n        <Box padding=\"large\" border />\n      </Flex>\n      <Text type=\"text1\" weight=\"medium\" ellipsis={false}>\n        Medium spacing between items\n      </Text>\n      <Flex gap=\"medium\">\n        <Box padding=\"large\" border />\n        <Box padding=\"large\" border />\n        <Box padding=\"large\" border />\n      </Flex>\n      <Text type=\"text1\" weight=\"medium\" ellipsis={false}>\n        Large spacing between items\n      </Text>\n      <Flex gap=\"large\">\n        <Box padding=\"large\" border />\n        <Box padding=\"large\" border />\n        <Box padding=\"large\" border />\n      </Flex>\n      <Text type=\"text1\" weight=\"medium\" ellipsis={false}>\n        Custom spacing between items\n      </Text>\n      <Flex gap={32}>\n        <Box padding=\"large\" border />\n        <Box padding=\"large\" border />\n        <Box padding=\"large\" border />\n      </Flex>\n    </div>\n  )\n};\n\nexport const HorizontalFlex = {\n  render: () => (\n    <div\n      style={{\n        display: \"grid\",\n        gridTemplateColumns: \"120px 1fr\",\n        alignItems: \"center\",\n        gap: \"var(--space-24) var(--space-16)\"\n      }}\n    >\n      <Text type=\"text1\" weight=\"medium\" ellipsis={false}>\n        Equal size\n      </Text>\n      <Flex style={{ width: 300 }}>\n        <Flex flex={{ grow: 1, shrink: 1, basis: \"auto\" }}>\n          <Box padding=\"medium\" style={{ width: \"100%\" }} border>\n            First\n          </Box>\n        </Flex>\n        <Flex flex={{ grow: 1, shrink: 1, basis: \"auto\" }}>\n          <Box padding=\"medium\" style={{ width: \"100%\" }} border>\n            Second\n          </Box>\n        </Flex>\n        <Flex flex={{ grow: 1, shrink: 1, basis: \"auto\" }}>\n          <Box padding=\"medium\" style={{ width: \"100%\" }} border>\n            Third\n          </Box>\n        </Flex>\n      </Flex>\n      <Text type=\"text1\" weight=\"medium\" ellipsis={false}>\n        First item grows\n      </Text>\n      <Flex style={{ width: 300 }}>\n        <Flex flex={{ grow: 1, shrink: 0, basis: \"auto\" }}>\n          <Box padding=\"medium\" style={{ width: \"100%\" }} border>\n            First\n          </Box>\n        </Flex>\n        <Flex flex={{ grow: 0, shrink: 0, basis: \"auto\" }}>\n          <Box padding=\"medium\" style={{ width: \"100%\" }} border>\n            Second\n          </Box>\n        </Flex>\n        <Flex flex={{ grow: 0, shrink: 0, basis: \"auto\" }}>\n          <Box padding=\"medium\" style={{ width: \"100%\" }} border>\n            Third\n          </Box>\n        </Flex>\n      </Flex>\n      <Text type=\"text1\" weight=\"medium\" ellipsis={false}>\n        Third item grows\n      </Text>\n      <Flex style={{ width: 300 }}>\n        <Flex flex={{ grow: 0, shrink: 0, basis: \"auto\" }}>\n          <Box padding=\"medium\" style={{ width: \"100%\" }} border>\n            First\n          </Box>\n        </Flex>\n        <Flex flex={{ grow: 0, shrink: 0, basis: \"auto\" }}>\n          <Box padding=\"medium\" style={{ width: \"100%\" }} border>\n            Second\n          </Box>\n        </Flex>\n        <Flex flex={{ grow: 1, shrink: 0, basis: \"auto\" }}>\n          <Box padding=\"medium\" style={{ width: \"100%\" }} border>\n            Third\n          </Box>\n        </Flex>\n      </Flex>\n    </div>\n  ),\n\n  name: \"Horizontal layout using flex\"\n};\n\nexport const HorizontalFlexWithFlexShorthand = {\n  render: () => (\n    <div\n      style={{\n        display: \"grid\",\n        gridTemplateColumns: \"120px 1fr\",\n        alignItems: \"center\",\n        gap: \"var(--space-24) var(--space-16)\"\n      }}\n    >\n      <Text type=\"text1\" weight=\"medium\" ellipsis={false}>\n        Equal size\n      </Text>\n      <Flex style={{ width: 300 }}>\n        <Flex flex=\"1 1 auto\">\n          <Box style={{ width: \"100%\" }} border>\n            First\n          </Box>\n        </Flex>\n        <Flex flex=\"1 1 auto\">\n          <Box style={{ width: \"100%\" }} border>\n            Second\n          </Box>\n        </Flex>\n        <Flex flex=\"1 1 auto\">\n          <Box style={{ width: \"100%\" }} border>\n            Third\n          </Box>\n        </Flex>\n      </Flex>\n      <Text type=\"text1\" weight=\"medium\" ellipsis={false}>\n        First item grows\n      </Text>\n      <Flex style={{ width: 300 }}>\n        <Flex flex=\"1 0 auto\">\n          <Box style={{ width: \"100%\" }} border>\n            First\n          </Box>\n        </Flex>\n        <Flex flex=\"0 0 auto\">\n          <Box style={{ width: \"100%\" }} border>\n            Second\n          </Box>\n        </Flex>\n        <Flex flex=\"0 0 auto\">\n          <Box style={{ width: \"100%\" }} border>\n            Third\n          </Box>\n        </Flex>\n      </Flex>\n      <Text type=\"text1\" weight=\"medium\" ellipsis={false}>\n        Third item grows\n      </Text>\n      <Flex style={{ width: 300 }}>\n        <Flex flex=\"0 0 auto\">\n          <Box style={{ width: \"100%\" }} border>\n            First\n          </Box>\n        </Flex>\n        <Flex flex=\"0 0 auto\">\n          <Box style={{ width: \"100%\" }} border>\n            Second\n          </Box>\n        </Flex>\n        <Flex flex=\"1 0 auto\">\n          <Box style={{ width: \"100%\" }} border>\n            Third\n          </Box>\n        </Flex>\n      </Flex>\n    </div>\n  ),\n\n  name: \"Horizontal layout using flex shorthand\"\n};\n\nexport const VerticalSpacingBetweenItems = {\n  render: () => (\n    <div\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"space-around\",\n        width: \"100%\"\n      }}\n    >\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"var(--space-16)\", width: \"120px\" }}>\n        <Text align=\"center\" type=\"text1\" weight=\"medium\" ellipsis={false}>\n          No spacing between items\n        </Text>\n        <Flex direction=\"column\">\n          <Box padding=\"large\" border />\n          <Box padding=\"large\" border />\n          <Box padding=\"large\" border />\n        </Flex>\n      </div>\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"var(--space-16)\", width: \"120px\" }}>\n        <Text align=\"center\" type=\"text1\" weight=\"medium\" ellipsis={false}>\n          Extra small spacing between items\n        </Text>\n        <Flex gap=\"xs\" direction=\"column\">\n          <Box padding=\"large\" border />\n          <Box padding=\"large\" border />\n          <Box padding=\"large\" border />\n        </Flex>\n      </div>\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"var(--space-16)\", width: \"120px\" }}>\n        <Text align=\"center\" type=\"text1\" weight=\"medium\" ellipsis={false}>\n          Small spacing between items\n        </Text>\n        <Flex gap=\"small\" direction=\"column\">\n          <Box padding=\"large\" border />\n          <Box padding=\"large\" border />\n          <Box padding=\"large\" border />\n        </Flex>\n      </div>\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"var(--space-16)\", width: \"120px\" }}>\n        <Text align=\"center\" type=\"text1\" weight=\"medium\" ellipsis={false}>\n          Medium spacing between items\n        </Text>\n        <Flex gap=\"medium\" direction=\"column\">\n          <Box padding=\"large\" border />\n          <Box padding=\"large\" border />\n          <Box padding=\"large\" border />\n        </Flex>\n      </div>\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"var(--space-16)\", width: \"120px\" }}>\n        <Text align=\"center\" type=\"text1\" weight=\"medium\" ellipsis={false}>\n          Large spacing between items\n        </Text>\n        <Flex gap=\"large\" direction=\"column\">\n          <Box padding=\"large\" border />\n          <Box padding=\"large\" border />\n          <Box padding=\"large\" border />\n        </Flex>\n      </div>\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"var(--space-16)\", width: \"120px\" }}>\n        <Text align=\"center\" type=\"text1\" weight=\"medium\" ellipsis={false}>\n          Custom spacing between items\n        </Text>\n        <Flex gap={32} direction=\"column\">\n          <Box padding=\"large\" border />\n          <Box padding=\"large\" border />\n          <Box padding=\"large\" border />\n        </Flex>\n      </div>\n    </div>\n  )\n};\n\nexport const VerticalFlex = {\n  render: () => (\n    <div\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"space-around\",\n        width: \"100%\"\n      }}\n    >\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"var(--space-16)\", width: \"120px\" }}>\n        <Text align=\"center\" type=\"text1\" weight=\"medium\" ellipsis={false}>\n          Equal size\n        </Text>\n        <Flex direction=\"column\" style={{ height: 300 }}>\n          <Flex flex={{ grow: 1, shrink: 1, basis: \"auto\" }}>\n            <Box style={{ height: \"100%\", width: \"100%\" }} padding=\"medium\" border>\n              First\n            </Box>\n          </Flex>\n          <Flex flex={{ grow: 1, shrink: 1, basis: \"auto\" }}>\n            <Box style={{ height: \"100%\", width: \"100%\" }} padding=\"medium\" border>\n              Second\n            </Box>\n          </Flex>\n          <Flex flex={{ grow: 1, shrink: 1, basis: \"auto\" }}>\n            <Box style={{ height: \"100%\", width: \"100%\" }} padding=\"medium\" border>\n              Third\n            </Box>\n          </Flex>\n        </Flex>\n      </div>\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"var(--space-16)\", width: \"120px\" }}>\n        <Text align=\"center\" type=\"text1\" weight=\"medium\" ellipsis={false}>\n          First item grows\n        </Text>\n        <Flex direction=\"column\" style={{ height: 300 }}>\n          <Flex flex={{ grow: 1, shrink: 1, basis: \"auto\" }}>\n            <Box style={{ height: \"100%\", width: \"100%\" }} padding=\"medium\" border>\n              First\n            </Box>\n          </Flex>\n          <Flex flex={{ grow: 0, shrink: 1, basis: \"auto\" }}>\n            <Box style={{ height: \"100%\", width: \"100%\" }} padding=\"medium\" border>\n              Second\n            </Box>\n          </Flex>\n          <Flex flex={{ grow: 0, shrink: 1, basis: \"auto\" }}>\n            <Box style={{ height: \"100%\", width: \"100%\" }} padding=\"medium\" border>\n              Third\n            </Box>\n          </Flex>\n        </Flex>\n      </div>\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"var(--space-16)\", width: \"120px\" }}>\n        <Text align=\"center\" type=\"text1\" weight=\"medium\" ellipsis={false}>\n          Third item grows\n        </Text>\n        <Flex direction=\"column\" style={{ height: 300 }}>\n          <Flex flex={{ grow: 0, shrink: 1, basis: \"auto\" }}>\n            <Box style={{ height: \"100%\", width: \"100%\" }} padding=\"medium\" border>\n              First\n            </Box>\n          </Flex>\n          <Flex flex={{ grow: 0, shrink: 1, basis: \"auto\" }}>\n            <Box style={{ height: \"100%\", width: \"100%\" }} padding=\"medium\" border>\n              Second\n            </Box>\n          </Flex>\n          <Flex flex={{ grow: 1, shrink: 1, basis: \"auto\" }}>\n            <Box style={{ height: \"100%\", width: \"100%\" }} padding=\"medium\" border>\n              Third\n            </Box>\n          </Flex>\n        </Flex>\n      </div>\n    </div>\n  ),\n\n  name: \"Vertical layout using flex\"\n};\n\nexport const VerticalFlexWithFlexShorthand = {\n  render: () => (\n    <div\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"space-around\",\n        width: \"100%\"\n      }}\n    >\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"var(--space-16)\", width: \"120px\" }}>\n        <Text align=\"center\" type=\"text1\" weight=\"medium\" ellipsis={false}>\n          Equal size\n        </Text>\n        <Flex direction=\"column\" style={{ height: 300 }}>\n          <Flex flex=\"1 1 auto\">\n            <Box style={{ height: \"100%\", width: \"100%\" }} border>\n              First\n            </Box>\n          </Flex>\n          <Flex flex=\"1 1 auto\">\n            <Box style={{ height: \"100%\", width: \"100%\" }} border>\n              Second\n            </Box>\n          </Flex>\n          <Flex flex=\"1 1 auto\">\n            <Box style={{ height: \"100%\", width: \"100%\" }} border>\n              Third\n            </Box>\n          </Flex>\n        </Flex>\n      </div>\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"var(--space-16)\", width: \"120px\" }}>\n        <Text align=\"center\" type=\"text1\" weight=\"medium\" ellipsis={false}>\n          First item grows\n        </Text>\n        <Flex direction=\"column\" style={{ height: 300 }}>\n          <Flex flex=\"1 0 auto\">\n            <Box style={{ height: \"100%\", width: \"100%\" }} border>\n              First\n            </Box>\n          </Flex>\n          <Flex flex=\"0 1 auto\">\n            <Box style={{ height: \"100%\", width: \"100%\" }} border>\n              Second\n            </Box>\n          </Flex>\n          <Flex flex=\"0 1 auto\">\n            <Box style={{ height: \"100%\", width: \"100%\" }} border>\n              Third\n            </Box>\n          </Flex>\n        </Flex>\n      </div>\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"var(--space-16)\", width: \"120px\" }}>\n        <Text align=\"center\" type=\"text1\" weight=\"medium\" ellipsis={false}>\n          Third item grows\n        </Text>\n        <Flex direction=\"column\" style={{ height: 300 }}>\n          <Flex flex=\"0 1 auto\">\n            <Box style={{ height: \"100%\", width: \"100%\" }} border>\n              First\n            </Box>\n          </Flex>\n          <Flex flex=\"0 1 auto\">\n            <Box style={{ height: \"100%\", width: \"100%\" }} border>\n              Second\n            </Box>\n          </Flex>\n          <Flex flex=\"1 0 auto\">\n            <Box style={{ height: \"100%\", width: \"100%\" }} border>\n              Third\n            </Box>\n          </Flex>\n        </Flex>\n      </div>\n    </div>\n  ),\n\n  name: \"Vertical layout using flex shorthand\"\n};\n\nexport const HorizontalPositions = {\n  render: () => (\n    <div\n      style={{\n        display: \"grid\",\n        gridTemplateColumns: \"120px 1fr\",\n        alignItems: \"center\",\n        gap: \"var(--space-24) var(--space-16)\",\n        flex: 1\n      }}\n    >\n      <Text type=\"text1\" weight=\"medium\" ellipsis={false}>\n        Start position\n      </Text>\n      <Flex\n        justify=\"start\"\n        style={{\n          width: \"100%\"\n        }}\n      >\n        <Box padding=\"large\" border />\n        <Box padding=\"large\" border />\n        <Box padding=\"large\" border />\n      </Flex>\n      <Text type=\"text1\" weight=\"medium\" ellipsis={false}>\n        Center position\n      </Text>\n      <Flex\n        justify=\"center\"\n        style={{\n          width: \"100%\"\n        }}\n      >\n        <Box padding=\"large\" border />\n        <Box padding=\"large\" border />\n        <Box padding=\"large\" border />\n      </Flex>\n      <Text type=\"text1\" weight=\"medium\" ellipsis={false}>\n        End position\n      </Text>\n      <Flex\n        justify=\"end\"\n        style={{\n          width: \"100%\"\n        }}\n      >\n        <Box padding=\"large\" border />\n        <Box padding=\"large\" border />\n        <Box padding=\"large\" border />\n      </Flex>\n      <Text type=\"text1\" weight=\"medium\" ellipsis={false}>\n        Space between position\n      </Text>\n      <Flex\n        justify=\"space-between\"\n        style={{\n          width: \"100%\"\n        }}\n      >\n        <Box padding=\"large\" border />\n        <Box padding=\"large\" border />\n        <Box padding=\"large\" border />\n      </Flex>\n      <Text type=\"text1\" weight=\"medium\" ellipsis={false}>\n        Space around position\n      </Text>\n      <Flex\n        justify=\"space-around\"\n        style={{\n          width: \"100%\"\n        }}\n      >\n        <Box padding=\"large\" border />\n        <Box padding=\"large\" border />\n        <Box padding=\"large\" border />\n      </Flex>\n    </div>\n  )\n};\n\nexport const VerticalPositions = {\n  render: () => (\n    <div\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"space-around\",\n        width: \"100%\"\n      }}\n    >\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"var(--space-16)\", width: \"120px\" }}>\n        <Text align=\"center\" type=\"text1\" weight=\"medium\" ellipsis={false}>\n          Start position\n        </Text>\n        <Flex\n          justify=\"start\"\n          style={{\n            height: \"300px\"\n          }}\n          direction=\"column\"\n        >\n          <Box padding=\"large\" border />\n          <Box padding=\"large\" border />\n          <Box padding=\"large\" border />\n        </Flex>\n      </div>\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"var(--space-16)\", width: \"120px\" }}>\n        <Text align=\"center\" type=\"text1\" weight=\"medium\" ellipsis={false}>\n          Center position\n        </Text>\n        <Flex\n          justify=\"center\"\n          style={{\n            height: \"300px\"\n          }}\n          direction=\"column\"\n        >\n          <Box padding=\"large\" border />\n          <Box padding=\"large\" border />\n          <Box padding=\"large\" border />\n        </Flex>\n      </div>\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"var(--space-16)\", width: \"120px\" }}>\n        <Text align=\"center\" type=\"text1\" weight=\"medium\" ellipsis={false}>\n          End position\n        </Text>\n        <Flex\n          justify=\"end\"\n          style={{\n            height: \"300px\"\n          }}\n          direction=\"column\"\n        >\n          <Box padding=\"large\" border />\n          <Box padding=\"large\" border />\n          <Box padding=\"large\" border />\n        </Flex>\n      </div>\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"var(--space-16)\", width: \"120px\" }}>\n        <Text align=\"center\" type=\"text1\" weight=\"medium\" ellipsis={false}>\n          Space between position\n        </Text>\n        <Flex\n          justify=\"space-between\"\n          style={{\n            height: \"300px\"\n          }}\n          direction=\"column\"\n        >\n          <Box padding=\"large\" border />\n          <Box padding=\"large\" border />\n          <Box padding=\"large\" border />\n        </Flex>\n      </div>\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"var(--space-16)\", width: \"120px\" }}>\n        <Text align=\"center\" type=\"text1\" weight=\"medium\" ellipsis={false}>\n          Space around position\n        </Text>\n        <Flex\n          justify=\"space-around\"\n          style={{\n            height: \"300px\"\n          }}\n          direction=\"column\"\n        >\n          <Box padding=\"large\" border />\n          <Box padding=\"large\" border />\n          <Box padding=\"large\" border />\n        </Flex>\n      </div>\n    </div>\n  )\n};\n\nexport const SupportMultiLinesLayout = {\n  render: () => (\n    <Flex\n      wrap\n      style={{\n        width: \"300px\"\n      }}\n      gap=\"small\"\n    >\n      <Chips noMargin label=\"Chip 1\" />\n      <Chips noMargin label=\"Chip 2\" />\n      <Chips noMargin label=\"Chip 3\" />\n      <Chips noMargin label=\"Chip 4\" />\n      <Chips noMargin label=\"Chip 5\" />\n      <Chips noMargin label=\"Chip 6\" />\n      <Chips noMargin label=\"Chip 7\" />\n    </Flex>\n  )\n};\n\nexport const FlexAsToolbarContainer = {\n  render: () => (\n    <Flex gap=\"small\">\n      <Button leftIcon={Add}>Add</Button>\n      <Button kind=\"tertiary\" leftIcon={Search}>\n        Search\n      </Button>\n      <Button kind=\"tertiary\" leftIcon={Person}>\n        Person\n      </Button>\n      <Button kind=\"tertiary\" leftIcon={Filter}>\n        Filter\n      </Button>\n      <Button kind=\"tertiary\" leftIcon={Sort}>\n        Sort\n      </Button>\n    </Flex>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Add, Filter, Person, Search, Sort }\n      }\n    }\n  }\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/GridKeyboardNavigationContext/useGridKeyboardNavigationContext.interactions.ts",
    "content": "import { expect } from \"@storybook/jest\";\nimport { getByText, interactionSuite, clickElement, typeMultipleTimes, resetFocus } from \"@vibe/core/interactionsTests\";\n\n//NOTE: this test may fail if it runs when the storybook page isn't focused. (For example, during an HMR refresh without focusing the storybook tab)\nconst multiGridLayoutKeyboardNavigation = async canvas => {\n  const topLeft3Item = await getByText(canvas, \"TL 3\");\n  clickElement(topLeft3Item);\n\n  await typeMultipleTimes(\"{arrowRight}\", 2);\n  await assertElementWithTextToBeActive(\"TL 5\");\n\n  await typeMultipleTimes(\"{arrowRight}\", 2);\n  await assertElementWithTextToBeActive(\"TR 1\");\n\n  await typeMultipleTimes(\"{arrowDown}\", 2);\n  await assertElementWithTextToBeActive(\"TR 5\");\n\n  await typeMultipleTimes(\"{arrowLeft}\", 3);\n  await assertElementWithTextToBeActive(\"TL 1\");\n\n  await typeMultipleTimes(\"{arrowDown}\", 4);\n  await assertElementWithTextToBeActive(\"TB 5\");\n\n  await typeMultipleTimes(\"{arrowDown}\", 1);\n  await assertElementWithTextToBeActive(\"BL 1\");\n\n  await typeMultipleTimes(\"{arrowUp}\", 1);\n  await assertElementWithTextToBeActive(\"TB 5\");\n\n  await typeMultipleTimes(\"{arrowUp}\", 3);\n  await assertElementWithTextToBeActive(\"TL 4\");\n};\n\nexport const useGridContextMultipleDepthsPlaySuite = interactionSuite({\n  tests: [multiGridLayoutKeyboardNavigation],\n  afterEach: async () => {\n    await resetFocus();\n  }\n});\n\nasync function assertElementWithTextToBeActive(text) {\n  const activeElements = document.getElementsByClassName(\"active-item\");\n  expect(activeElements).toHaveLength(1);\n  expect(activeElements[0]).toHaveTextContent(text);\n}\n"
  },
  {
    "path": "packages/docs/src/pages/components/GridKeyboardNavigationContext/useGridKeyboardNavigationContext.mdx",
    "content": "import { Canvas, Meta } from \"@storybook/blocks\";\nimport * as UseGridKeyboardNavigationContextStories from \"./useGridKeyboardNavigationContext.stories\";\n\n<Meta of={UseGridKeyboardNavigationContextStories} />\n\n# useGridKeyboardNavigationContext\n\nA hook used to specify a connection between multiple navigable components, which are navigable between each other.\n\n<Canvas of={UseGridKeyboardNavigationContextStories.Overview} />\n\n### Import\n\n```js\nimport { useGridKeyboardNavigationContext } from \"@vibe/core\";\n```\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Use this hook when you want to add keyboard navigation between multiple grid-like components.\",\n    \"Each of the components should use `useGridKeyboardNavigation`.\",\n    \"The components should be wrapped with a single `GridKeyboardNavigationContext`.\"\n  ]}\n/>\n\n## Arguments\n\n<FunctionArguments>\n  <FunctionArgument\n    name=\"positions\"\n    type=\"Array[ { topElement: React.MutableRefObject, bottomElement: React.MutableRefObject } | { leftElement: React.MutableRefObject, rightElement: React.MutableRefObject } ]\"\n    description=\"An array of relations between pairs of elements\"\n    required\n  />\n  <FunctionArgument\n    name=\"wrapperRef\"\n    type=\"React.MutableRefObject\"\n    description={\n      <>\n        A React ref for an element which contains all the elements which are listed on the <code>positions</code>{\" \"}\n        argument.\n      </>\n    }\n    required\n  />\n</FunctionArguments>\n\n## Returns\n\n<FunctionArguments>\n  <FunctionArgument\n    name=\"result\"\n    type=\"Object\"\n    description={\n      <>\n        A <code>GridKeyboardNavigationContext</code> which should be provided to wrap all the elements from{\" \"}\n        <code>positions</code>\n      </>\n    }\n  />\n</FunctionArguments>\n\n## Variants\n\n### Disabled Elements\n\nDisabled components can be skipped by adding a `disabled` (or `data-disabled`) to the referenced element.\n\n<Canvas of={UseGridKeyboardNavigationContextStories.DisabledElements} />\n\n### Multiple Depths\n\nThe hook can be used inside multiple depths, in more complex layout requirements.\n\n<Canvas of={UseGridKeyboardNavigationContextStories.MultipleDepths} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/GridKeyboardNavigationContext/useGridKeyboardNavigationContext.stories.helpers.tsx",
    "content": "import { range } from \"es-toolkit\";\nimport React, { forwardRef, useMemo, useCallback, useRef, type RefObject } from \"react\";\nimport cx from \"classnames\";\nimport { action } from \"@storybook/addon-actions\";\nimport {\n  Button,\n  Flex,\n  useGridKeyboardNavigation,\n  GridKeyboardNavigationContext,\n  useGridKeyboardNavigationContext\n} from \"@vibe/core\";\nimport \"./useGridKeyboardNavigationContext.stories.scss\";\nconst ELEMENT_WIDTH_PX = 72;\nconst PADDING_PX = 24;\n\nconst ON_CLICK = action(\"Selected\");\n\ninterface DummyNavigableGridProps {\n  itemsCount: number;\n  numberOfItemsInLine: number;\n  itemPrefix?: string;\n  disabled?: boolean;\n  disabledIndexes?: number[];\n  withoutBorder?: boolean;\n}\nexport const DummyNavigableGrid: React.ForwardRefExoticComponent<DummyNavigableGridProps & React.RefAttributes<HTMLElement>> = forwardRef(\n  (\n    { itemsCount, numberOfItemsInLine, itemPrefix = \"\", disabled = false, disabledIndexes = [], withoutBorder = false },\n    ref: RefObject<HTMLDivElement>\n  ) => {\n    const width = useMemo(() => numberOfItemsInLine * ELEMENT_WIDTH_PX + 2 * PADDING_PX, [numberOfItemsInLine]);\n    const items = useMemo(() => range(itemsCount).map(num => `${itemPrefix} ${num}`), [itemPrefix, itemsCount]);\n    const getItemByIndex = useCallback((index: number) => items[index], [items]);\n    const { activeIndex, onSelectionAction } = useGridKeyboardNavigation({\n      ref,\n      itemsCount,\n      numberOfItemsInLine,\n      getItemByIndex,\n      onItemClicked: ON_CLICK,\n      disabledIndexes\n    });\n    const onClickByIndex = useCallback((index: number) => () => onSelectionAction(index), [onSelectionAction]);\n    return (\n      <div\n        className={cx(\"use-grid-keyboard-dummy-grid-wrapper\", { \"without-border\": withoutBorder })}\n        style={{ width }}\n        data-disabled={disabled}\n        ref={ref}\n        tabIndex={-1}\n      >\n        {items.map((item, index) => (\n          <Button\n            key={item}\n            kind=\"secondary\"\n            onClick={onClickByIndex(index)}\n            disabled={disabled || disabledIndexes?.includes(index)}\n            className={cx(\"use-grid-keyboard-dummy-grid-item\", { \"active-item\": index === activeIndex })}\n          >\n            {item}\n          </Button>\n        ))}\n      </div>\n    );\n  }\n);\n\ninterface LayoutWithInnerKeyboardNavigationProps {\n  id: string;\n  itemPrefix: string;\n}\n\nexport const LayoutWithInnerKeyboardNavigation = forwardRef<HTMLDivElement, LayoutWithInnerKeyboardNavigationProps>(\n  ({ id, itemPrefix }, ref: RefObject<HTMLDivElement>) => {\n    const leftElRef = useRef(null);\n    const rightElRef = useRef(null);\n    const bottomElRef = useRef(null);\n    const keyboardContext = useGridKeyboardNavigationContext(\n      [\n        { leftElement: leftElRef, rightElement: rightElRef },\n        { topElement: leftElRef, bottomElement: bottomElRef }\n      ],\n      ref\n    );\n    const innerPrefix = itemPrefix || \"\";\n    return (\n      <GridKeyboardNavigationContext.Provider value={keyboardContext}>\n        <Flex\n          ref={ref}\n          id={id}\n          direction=\"column\"\n          align=\"start\"\n          className=\"use-grid-keyboard-dummy-grid-wrapper\"\n          tabIndex={-1}\n        >\n          <Flex>\n            <DummyNavigableGrid ref={leftElRef} itemsCount={6} numberOfItemsInLine={3} itemPrefix={`${innerPrefix}L`} />\n            <DummyNavigableGrid\n              ref={rightElRef}\n              itemsCount={6}\n              numberOfItemsInLine={2}\n              itemPrefix={`${innerPrefix}R`}\n            />\n          </Flex>\n          <DummyNavigableGrid ref={bottomElRef} itemsCount={6} numberOfItemsInLine={2} itemPrefix={`${innerPrefix}B`} />\n        </Flex>\n      </GridKeyboardNavigationContext.Provider>\n    );\n  }\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/GridKeyboardNavigationContext/useGridKeyboardNavigationContext.stories.scss",
    "content": ".use-grid-keyboard-dummy-grid-wrapper {\n  padding: 12px;\n  display: flex;\n  flex-wrap: wrap;\n  outline: none;\n  text-align: center;\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--sb-primary-hover-color) inset;\n\n  &.without-border {\n    box-shadow: none;\n  }\n}\n\n.use-grid-keyboard-dummy-grid-item {\n  width: 60px;\n  margin: 6px;\n}\n"
  },
  {
    "path": "packages/docs/src/pages/components/GridKeyboardNavigationContext/useGridKeyboardNavigationContext.stories.tsx",
    "content": "import React, { useRef } from \"react\";\nimport { GridKeyboardNavigationContext, useGridKeyboardNavigationContext } from \"@vibe/core\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport {\n  DummyNavigableGrid,\n  LayoutWithInnerKeyboardNavigation\n} from \"./useGridKeyboardNavigationContext.stories.helpers\";\nimport { Flex } from \"@vibe/core\";\nimport { useGridContextMultipleDepthsPlaySuite } from \"./useGridKeyboardNavigationContext.interactions\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: useGridKeyboardNavigationContext\n});\n\nexport default {\n  title: \"Hooks/useGridKeyboardNavigationContext\",\n  component: useGridKeyboardNavigationContext,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n};\n\nexport const Overview = {\n  render: () => {\n    const wrapperRef = useRef(null);\n    const leftElRef = useRef(null);\n    const rightElRef = useRef(null);\n\n    const keyboardContext = useGridKeyboardNavigationContext(\n      [\n        {\n          leftElement: leftElRef,\n          rightElement: rightElRef\n        }\n      ],\n      wrapperRef\n    );\n\n    return (\n      <GridKeyboardNavigationContext.Provider value={keyboardContext}>\n        <Flex ref={wrapperRef}>\n          <DummyNavigableGrid ref={leftElRef} itemsCount={15} numberOfItemsInLine={4} itemPrefix=\"L\" />\n          <DummyNavigableGrid ref={rightElRef} itemsCount={7} numberOfItemsInLine={2} itemPrefix=\"R\" />\n        </Flex>\n      </GridKeyboardNavigationContext.Provider>\n    );\n  },\n\n  name: \"Overview\"\n};\n\nexport const DisabledElements = {\n  render: () => {\n    const wrapperRef = useRef(null);\n    const topElRef = useRef(null);\n    const middleElRef = useRef(null);\n    const bottomElRef = useRef(null);\n\n    const keyboardContext = useGridKeyboardNavigationContext(\n      [\n        {\n          topElement: topElRef,\n          bottomElement: middleElRef\n        },\n        {\n          topElement: middleElRef,\n          bottomElement: bottomElRef\n        }\n      ],\n      wrapperRef\n    );\n\n    return (\n      <GridKeyboardNavigationContext.Provider value={keyboardContext}>\n        <Flex ref={wrapperRef} direction=\"column\" justify=\"center\" className=\"use-grid-keyboard-dummy-grid-wrapper\">\n          <DummyNavigableGrid ref={topElRef} itemsCount={3} numberOfItemsInLine={3} itemPrefix=\"T\" />\n          <DummyNavigableGrid ref={middleElRef} itemsCount={3} numberOfItemsInLine={3} itemPrefix=\"M\" disabled />\n          <DummyNavigableGrid ref={bottomElRef} itemsCount={3} numberOfItemsInLine={3} itemPrefix=\"B\" />\n        </Flex>\n      </GridKeyboardNavigationContext.Provider>\n    );\n  },\n\n  name: \"Disabled Elements\"\n};\n\nexport const MultipleDepths = {\n  render: () => {\n    const wrapperRef = useRef(null);\n    const topElRef = useRef(null);\n    const bottomElRef = useRef(null);\n\n    const keyboardContext = useGridKeyboardNavigationContext(\n      [\n        {\n          topElement: topElRef,\n          bottomElement: bottomElRef\n        }\n      ],\n      wrapperRef\n    );\n\n    return (\n      <GridKeyboardNavigationContext.Provider value={keyboardContext}>\n        <Flex id=\"twoGridLayoutsWrapper\" ref={wrapperRef} direction=\"column\" tabIndex={-1}>\n          <LayoutWithInnerKeyboardNavigation id=\"gridLayoutTop\" itemPrefix=\"T\" ref={topElRef} />\n          <LayoutWithInnerKeyboardNavigation id=\"gridLayoutBottom\" itemPrefix=\"B\" ref={bottomElRef} />\n        </Flex>\n      </GridKeyboardNavigationContext.Provider>\n    );\n  },\n\n  name: \"Multiple Depths\",\n  play: useGridContextMultipleDepthsPlaySuite\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Heading/Heading.interactions.ts",
    "content": "import { type Screen } from \"@testing-library/react\";\nimport { interactionSuite } from \"@vibe/core/interactionsTests\";\nimport { testHoverTooltipTrigger } from \"../Tooltip/Tooltip.interactions\";\n\n// Test constants\nexport const ONE_LINE_ELLIPSIS_TEST_ID = \"ellipsis-title-example\";\nexport const OVERFLOW_TITLE_CONTAINER_ID = \"overflow-title-examples-container\";\n\nasync function isTooltipAppearOnHover(canvas: Screen) {\n  const getText = async () => await canvas.findByTestId(ONE_LINE_ELLIPSIS_TEST_ID);\n  await testHoverTooltipTrigger(canvas, getText);\n}\n\nexport const headingOverflowSuite: ReturnType<typeof interactionSuite> = interactionSuite({\n  tests: [isTooltipAppearOnHover]\n});\n"
  },
  {
    "path": "packages/docs/src/pages/components/Heading/Heading.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { Heading } from \"@vibe/core\";\nimport * as HeadingStories from \"./Heading.stories\";\nimport { TipEditableHeading } from \"./Heading.stories.helpers\";\n\n<Meta of={HeadingStories} />\n\n# Heading\n\nHeading components are used for titles at the top of pages and sub-sections.\n\n<Canvas of={HeadingStories.Overview} />\n\n### Import\n\n```js\nimport { Heading } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines guidelines={[\"Don't include more than one H1 title per web page.\"]} />\n\n<TipEditableHeading />\n\n## Variants\n\n### Types and weights\n\nHeading component comes in three types: H1 (32px), H2 (24px), H3 (18px) and four weights: bold (700), medium (600), normal (500), light (300)\n\n<Canvas of={HeadingStories.TypesAndWeights} />\n\n### Colors\n\nHeading component comes in four colors: primary, secondary, on primary, on inverted\n\n<Canvas of={HeadingStories.Colors} />\n\n### Overflow\n\nOur Heading component supports overflow state.\nWhen the text is longer than its container and the ellipsis flag is on, the end of the text will be truncated and will display \"...\"\n\nWe support two kinds of ellipsis: single-line ellipsis with a tooltip displayed in hover or ellipsis after multiple lines. You can see examples for both use cases below.\n\n<Canvas of={HeadingStories.Overflow} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: <Heading>Hello world</Heading>,\n        description: \"Always capitalize the first letter of the first word in the heading.\"\n      },\n      negative: {\n        component: <Heading>Hello World</Heading>,\n        description: \"Please avoid capitalizing the first letter of each word in the heading.\"\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### Built-in page header (not editable)\n\n<Canvas of={HeadingStories.BuiltInPageHeaderNotEditable} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"EditableHeading\", \"Text\", \"HiddenText\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Heading/Heading.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const TipEditableHeading = () => (\n  <Tip title=\"Heading components are not editable\">\n    Check out our{\" \"}\n    <StorybookLink page=\"Components/EditableHeading\" size=\"small\">\n      EditableHeading\n    </StorybookLink>{\" \"}\n    component if you would like to allow users to edit the title text.\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/Heading/Heading.stories.tsx",
    "content": "import React from \"react\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { Flex, Heading, Divider, Search, Checkbox, Button, Box } from \"@vibe/core\";\nimport { createComponentTemplate } from \"vibe-storybook-components\";\nimport { ONE_LINE_ELLIPSIS_TEST_ID, OVERFLOW_TITLE_CONTAINER_ID, headingOverflowSuite } from \"./Heading.interactions\";\nimport { Custom } from \"@vibe/icons\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: Heading\n});\n\nconst textTemplate = createComponentTemplate(Heading);\n\nexport default {\n  title: \"Text/Heading\",\n  component: Heading,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n};\n\nexport const Overview = {\n  render: textTemplate.bind({}),\n  name: \"Overview\",\n\n  args: {\n    children: \"Title\"\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const TypesAndWeights = {\n  render: () => (\n    <Flex gap=\"large\" direction=\"column\" justify=\"start\" align=\"start\">\n      <Flex gap=\"small\" direction=\"column\" justify=\"start\" align=\"start\">\n        <Heading type=\"h1\" weight=\"bold\">\n          Bold H1 title\n        </Heading>\n        <Heading type=\"h1\" weight=\"medium\">\n          Medium H1 title\n        </Heading>\n        <Heading type=\"h1\" weight=\"normal\">\n          Normal H1 title\n        </Heading>\n        <Heading type=\"h1\" weight=\"light\">\n          Light H1 title\n        </Heading>\n      </Flex>\n      <Flex gap=\"small\" direction=\"column\" justify=\"start\" align=\"start\">\n        <Heading type=\"h2\" weight=\"bold\">\n          Bold H2 title\n        </Heading>\n        <Heading type=\"h2\" weight=\"medium\">\n          Medium H2 title\n        </Heading>\n        <Heading type=\"h2\" weight=\"normal\">\n          Normal H2 title\n        </Heading>\n        <Heading type=\"h2\" weight=\"light\">\n          Light H2 title\n        </Heading>\n      </Flex>\n      <Flex gap=\"small\" direction=\"column\" justify=\"start\" align=\"start\">\n        <Heading type=\"h3\" weight=\"bold\">\n          Bold H3 title\n        </Heading>\n        <Heading type=\"h3\" weight=\"medium\">\n          Medium H3 title\n        </Heading>\n        <Heading type=\"h3\" weight=\"normal\">\n          Normal H3 title\n        </Heading>\n        <Heading type=\"h3\" weight=\"light\">\n          Light H3 title\n        </Heading>\n      </Flex>\n    </Flex>\n  )\n};\n\nexport const Colors = {\n  render: () => (\n    <Flex direction=\"column\" align=\"start\" gap=\"small\">\n      <Heading type=\"h2\" color=\"primary\">\n        Primary title\n      </Heading>\n      <Heading type=\"h2\" color=\"secondary\">\n        Secondary title\n      </Heading>\n      <Box style={{ backgroundColor: \"var(--primary-color)\" }} padding=\"small\">\n        <Heading element=\"div\" type=\"h2\" align=\"center\" color=\"onPrimary\">\n          On primary title\n        </Heading>\n      </Box>\n      <Box backgroundColor=\"invertedColorBackground\" padding=\"small\">\n        <Heading element=\"div\" type=\"h2\" align=\"center\" color=\"onInverted\">\n          On inverted title\n        </Heading>\n      </Box>\n    </Flex>\n  )\n};\n\nexport const Overflow = {\n  render: () => (\n    <Flex id={OVERFLOW_TITLE_CONTAINER_ID} direction=\"column\" gap=\"medium\" align=\"stretch\" style={{ width: \"480px\" }}>\n      <Heading type=\"h2\">Heading without overflow</Heading>\n      <Heading\n        type=\"h2\"\n        /**for testing purposes**/\n        data-testid={ONE_LINE_ELLIPSIS_TEST_ID}\n        tooltipProps={{\n          containerSelector: `#${OVERFLOW_TITLE_CONTAINER_ID}`\n        }}\n      >\n        Heading with ellipsis and tooltip when hovering\n      </Heading>\n      <div>\n        <Heading type=\"h2\" maxLines={2}>\n          Heading with two lines overflow and a tooltip. Heading with two lines overflow and a tooltip. Heading with two\n          lines overflow and a tooltip.\n        </Heading>\n      </div>\n    </Flex>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { OVERFLOW_TITLE_CONTAINER_ID, ONE_LINE_ELLIPSIS_TEST_ID }\n      }\n    }\n  },\n  play: headingOverflowSuite\n};\n\nexport const BuiltInPageHeaderNotEditable = {\n  render: () => (\n    <div\n      style={{\n        width: \"100%\"\n      }}\n    >\n      <Heading type=\"h1\" id=\"my-work-id\">\n        My work\n      </Heading>\n      <Divider />\n      <Flex align=\"center\" gap=\"small\" aria-labelledby=\"my-work-id\" style={{ marginTop: \"var(--space-16)\" }}>\n        <Box style={{ width: \"146px\" }}>\n          <Search placeholder=\"Search\" />\n        </Box>\n        <Checkbox label=\"Hide done items\" checked />\n        <Button leftIcon={Custom} kind=\"tertiary\">\n          Customize\n        </Button>\n      </Flex>\n    </div>\n  ),\n  name: \"Built-in page header (not editable)\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/HiddenText/HiddenText.mdx",
    "content": "import { Canvas, Meta } from \"@storybook/blocks\";\nimport { Tip } from \"vibe-storybook-components\";\nimport * as HiddenTextStories from \"./HiddenText.stories\";\n\n<Meta of={HiddenTextStories} />\n\n# HiddenText\n\nHidden text helps us to create a text which is accessible to screen reader users but not to users who see the screen.\n\n<Canvas of={HiddenTextStories.Overview} />\n\n### Import\n\n```js\nimport { HiddenText } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\"Use hidden text for writing a text which should be exposed to screen reader users only.\"]}\n/>\n\n<Tip>\n  If your text should be hidden from everyone please hide it by using CSS with \"display: none\" or \"visibility: hidden\".\n</Tip>\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Clickable\", \"Heading\", \"TextField\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/HiddenText/HiddenText.stories.tsx",
    "content": "import React from \"react\";\nimport { HiddenText, type HiddenTextProps } from \"@vibe/core\";\n\nexport default {\n  title: \"Accessibility/HiddenText\",\n  component: HiddenText\n};\n\nexport const Overview = {\n  render: (args: HiddenTextProps) => {\n    return <HiddenText text=\"Hello hidden text\" {...args} />;\n  }\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Icon/Icon.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport * as IconStories from \"./Icon.stories\";\n\n<Meta of={IconStories} />\n\n# Icon\n\nIcon component is our component to unify the supported icon types (Vibe Icons, FontIcon and Custom SVG Icons)\n\n<Canvas of={IconStories.Overview} />\n\n### Import\n\n```js\nimport { Icon } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Always wrap icons with Icon component\",\n    \"Try to always use icon alongside text or provide tooltip to accommodate the icon\"\n  ]}\n/>\n\n## Variants\n\n### Vibe Icon\n\n<Canvas of={IconStories.VibeIcon} />\n\n### FontIcon\n\n<Canvas of={IconStories.FontIcon} />\n\n### Custom SVG\n\n<Canvas of={IconStories.CustomSvg} />\n\n## States\n\n### Color\n\nAs a default the icon will inherit the color of it's parent container\n\n<Canvas of={IconStories.Color} />\n\n## Icons List\n\nIcons are exported by name from `@vibe/icons`:\n\n```javascript\nimport { DoubleCheck } from \"@vibe/icons\";\n```\n\n<Canvas of={IconStories.IconsListStory} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Icon/Icon.stories.tsx",
    "content": "import React, { useState } from \"react\";\nimport { Icon, SubIcon, Search, Flex } from \"@vibe/core\";\nimport { Bolt } from \"@vibe/icons\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { createComponentTemplate } from \"vibe-storybook-components\";\nimport * as allIcons from \"@vibe/icons\";\nimport iconsMetaData from \"@vibe/icons/meta\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: Icon,\n  iconPropNamesArray: [\"icon\"]\n});\n\nconst iconTemplate = createComponentTemplate(Icon);\n\nexport default {\n  title: \"Components/Icon\",\n  component: Icon,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n};\n\nexport const Overview = {\n  render: iconTemplate.bind({}),\n  name: \"Overview\",\n  args: {\n    id: \"overview-icon\",\n    icon: Bolt\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const VibeIcon = {\n  render: () => <Icon id=\"vibe-icon\" type=\"svg\" icon={Bolt} label=\"my bolt svg icon\" size={16} />,\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Bolt }\n      }\n    }\n  }\n};\n\nexport const FontIcon = {\n  render: () => <Icon id=\"font-icon\" type=\"font\" label=\"my font awesome start icon\" icon=\"fa fa-star\" />\n};\n\nexport const CustomSvg = {\n  render: () => (\n    <Icon\n      id=\"custom-svg-icon\"\n      type=\"src\"\n      icon=\"https://cdn.monday.com/images/apps/custom-icons/Form.svg\"\n      label=\"my src awesome icon\"\n      size={20}\n      useCurrentColor\n    />\n  )\n};\n\nexport const Color = {\n  render: () => (\n    <div\n      style={{\n        color: \"var(--sb-color-sofia_pink)\"\n      }}\n    >\n      <Icon id=\"colored-icon\" type=\"svg\" icon={Bolt} label=\"my bolt svg icon\" size={16} />\n    </div>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Bolt }\n      }\n    }\n  }\n};\n\nexport const IconsListStory = {\n  render: () => {\n    interface IconMeta {\n      name: string;\n      tags: string;\n      file: string;\n    }\n    const [query, setQuery] = useState(\"\");\n    return (\n      <section style={{ width: \"100%\" }}>\n        <Search value={query} onChange={setQuery} placeholder=\"Search for icons\" />\n        <div\n          style={{\n            display: \"grid\",\n            gridTemplateColumns: \"repeat(auto-fill, minmax(250px, 1fr))\",\n            gap: \"var(--sb-spacing-large)\",\n            marginTop: \"var(--sb-spacing-large)\"\n          }}\n        >\n          {iconsMetaData\n            .filter((icon: IconMeta) => {\n              return `${icon.tags},${icon.name}`.toLowerCase().includes(query.toLowerCase());\n            })\n            .map((icon: IconMeta) => {\n              const fileName = icon.file.split(\".\")[0] as string;\n              const Component = allIcons[fileName as keyof typeof allIcons] as SubIcon;\n              return (\n                <>\n                  <Flex style={{ color: \"var(--sb-icon-color)\" }} gap=\"small\">\n                    <Icon icon={Component} size={26} />\n                    <span>{icon.name}</span>\n                  </Flex>\n                </>\n              );\n            })}\n        </div>\n      </section>\n    );\n  }\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/IconButton/IconButton.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { IconButton, DialogContentContainer } from \"@vibe/core\";\nimport { Add, Bolt, Broom, HighlightColorBucket, Pin, Show } from \"@vibe/icons\";\nimport { TipCheckYourself, TipInfo, TipMenuButton } from \"./IconButton.stories.helpers\";\nimport * as IconButtonStories from \"./IconButton.stories\";\n\n<Meta of={IconButtonStories} />\n\n# IconButton\n\nIcon button is a square button contains only icon with no visible text labels used mostly in control bars.\n\n<Canvas of={IconButtonStories.Overview} />\n\n### Import\n\n```js\nimport { IconButton } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    <>\n      Icon button will always appear with a <StorybookLink page=\"Components/Tooltip\">tooltip</StorybookLink> while\n      hovering, defining the icon’s meaning.\n    </>,\n    \"Use an icon button when a user can perform an inline action on this page and there's no room for a default button.\",\n    \"Use icon button when you want to display an active state of a button.\",\n    \"Use a Primary icon button when it's the most important action to take.\",\n    \"Use icon button only when the icons is clear and understandable.\",\n    \"Icon buttons are often used when there are 2 or 3 adjacent icons buttons that perform actions on a single item presented in a row.\"\n  ]}\n/>\n\n<TipCheckYourself />\n\n## Accessibility\n\n<UsageGuidelines\n  guidelines={[\n    <>\n      Provide an <code>id</code> for the IconButton to enable proper accessibility associations and unique\n      identification.\n    </>,\n    <>\n      Always provide an accessible name using either <code>ariaLabel</code> prop or <code>tooltipContent</code> prop.\n      The component automatically uses <code>tooltipContent</code> as the accessible name if no <code>ariaLabel</code>{\" \"}\n      is provided.\n    </>,\n    <>\n      Use <code>ariaLabel</code> prop when you need a different accessible name than the tooltip text, or when the icon\n      button doesn't have a tooltip.\n    </>,\n    <>\n      Use <code>ariaLabeledBy</code> prop when an external element provides the accessible name for the icon button.\n      Pass the <code>id</code> of that external element.\n    </>,\n    <>\n      Use <code>ariaHasPopup</code> prop when the icon button opens a menu, dialog, or popup.\n    </>,\n    <>\n      Use <code>ariaExpanded</code> prop to indicate when a popup or menu opened by the icon button is currently open (\n      <code>true</code>) or closed (<code>false</code>).\n    </>,\n    <>\n      Use <code>ariaControls</code> prop to link the icon button to the element it controls. Pass the <code>id</code> of\n      the controlled element.\n    </>,\n    <>\n      Use <code>aria-describedby</code> prop to link the icon button to additional descriptive text. Pass the{\" \"}\n      <code>id</code> of the descriptive element.\n    </>,\n    <>\n      Use <code>aria-pressed</code> prop for toggle icon buttons to indicate their current pressed state (\n      <code>true</code>, <code>false</code>, or <code>mixed</code>).\n    </>,\n    <>\n      Use <code>aria-hidden</code> prop appropriately to hide the icon button from screen readers when necessary, but\n      use sparingly as it removes the button from the accessibility tree entirely.\n    </>,\n    <>\n      Use <code>tabIndex</code> prop to control the icon button's position in the keyboard navigation order. The default\n      value allows normal tab navigation.\n    </>,\n    <>\n      Provide <code>disabledReason</code> prop when disabling an icon button to give users context about why the button\n      is unavailable. This will be displayed in the tooltip.\n    </>\n  ]}\n/>\n\n<TipInfo />\n\n## Variants\n\n### Kinds\n\nThere can be more than one button in a screen, but to create the hierarchy of actions we need to use button kinds.\n\n<Canvas of={IconButtonStories.Kinds} />\n\n<TipMenuButton />\n### Sizes\n\n<Canvas of={IconButtonStories.Sizes} />\n\n### Active\n\n<Canvas of={IconButtonStories.Active} />\n\n### Disabled\n\nSet disable button for something that isn’t usable. Use a tooltip on hover in order to indicate the reason of the disabled action.\n\n<Canvas of={IconButtonStories.Disabled} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: (\n          <DialogContentContainer>\n            <IconButton icon={Pin} ariaLabel=\"Pin to top\" />\n            <IconButton icon={Show} ariaLabel=\"Show all\" />\n            <IconButton icon={HighlightColorBucket} ariaLabel=\"Show color\" />\n            <IconButton icon={Broom} ariaLabel=\"Clear style\" />\n          </DialogContentContainer>\n        ),\n        description:\n          \"Use Icon button when action is lower priority than a regular action or there’s no space available to place a button.\"\n      },\n      negative: {\n        component: <IconButton icon={Add} kind=\"primary\" ariaLabel=\"Add item\" />,\n        description: (\n          <>\n            Don’t use Icon button as the main action on the page. Instead, use the{\" \"}\n            <StorybookLink page=\"Components/Button\">Button component</StorybookLink> with an icon.\n          </>\n        )\n      }\n    },\n    {\n      positive: {\n        component: <IconButton icon={Bolt} ariaLabel=\"Quick Search\" />,\n        description: \"Always provide ariaLabel or tooltipContent\"\n      },\n      negative: {\n        component: <IconButton icon={Bolt} />,\n        description: \"Don’t use icon button without adding a tooltip while hovering.\"\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### Icon button as toolbar button\n\n<Canvas of={IconButtonStories.IconButtonAsToolbarButton} />\n\n### Icon button as close button\n\n<Canvas of={IconButtonStories.IconButtonAsCloseButton} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Button\", \"MenuButton\", \"Icon\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/IconButton/IconButton.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const TipCheckYourself = () => (\n  <Tip title=\"Check yourself\">\n    To display icons that do not have actions associated with them, use the{\" \"}\n    <StorybookLink page=\"Components/Icon\" size=\"small\">\n      Icon component\n    </StorybookLink>\n    .\n  </Tip>\n);\n\nexport const TipInfo = () => (\n  <Tip>\n    If you need to use an icon as a button that opens info dialog with additional information, check out{\" \"}\n    <StorybookLink page=\"Components/Info\" size=\"small\">\n      Info\n    </StorybookLink>{\" \"}\n    component.\n  </Tip>\n);\n\nexport const TipMenuButton = () => (\n  <Tip>\n    If you need to use an icon as a button that opens menu next to it, check out{\" \"}\n    <StorybookLink page=\"Components/MenuButton\" size=\"small\">\n      Menu button\n    </StorybookLink>{\" \"}\n    component.\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/IconButton/IconButton.stories.tsx",
    "content": "import React from \"react\";\nimport { createComponentTemplate, Link } from \"vibe-storybook-components\";\nimport { IconButton, Text, Flex, Button, Box, Divider, Avatar, Icon } from \"@vibe/core\";\nimport person1 from \"../Avatar/assets/person1.png\";\nimport { Add, Bolt, CloseSmall, Doc, Drag, Filter, Item, Robot, Time } from \"@vibe/icons\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { type Meta, type StoryObj } from \"@storybook/react\";\n\ntype Story = StoryObj<typeof IconButton>;\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: IconButton,\n  iconPropNamesArray: [\"icon\"],\n  actionPropsArray: [\"onClick\"]\n});\n\nconst iconButtonTemplate = createComponentTemplate(IconButton);\n\nexport default {\n  title: \"Components/IconButton\",\n  component: IconButton,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n} satisfies Meta<typeof IconButton>;\n\nexport const Overview: Story = {\n  render: iconButtonTemplate.bind({}),\n  args: {\n    id: \"overview-icon-button\",\n    \"aria-label\": \"Add\",\n    icon: Add\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const Kinds: Story = {\n  render: () => (\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent: \"space-evenly\",\n        alignItems: \"center\",\n        width: \"100%\"\n      }}\n    >\n      <IconButton id=\"kinds-primary\" icon={Bolt} kind=\"primary\" aria-label=\"My primary IconButton\" />\n      <IconButton id=\"kinds-secondary\" icon={Bolt} kind=\"secondary\" aria-label=\"My secondary IconButton\" />\n      <IconButton id=\"kinds-tertiary\" icon={Bolt} kind=\"tertiary\" aria-label=\"My tertiary IconButton\" />\n    </div>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Bolt }\n      }\n    }\n  }\n};\n\nexport const Sizes: Story = {\n  render: () => (\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent: \"space-evenly\",\n        alignItems: \"center\",\n        width: \"100%\"\n      }}\n    >\n      <IconButton key=\"xxs\" id=\"sizes-xxs\" icon={Robot} kind=\"secondary\" size=\"xxs\" aria-label=\"My xxs IconButton\" />\n      <IconButton key=\"xs\" id=\"sizes-xs\" icon={Robot} kind=\"secondary\" size=\"xs\" aria-label=\"My xs IconButton\" />\n      <IconButton\n        key=\"small\"\n        id=\"sizes-small\"\n        icon={Robot}\n        kind=\"secondary\"\n        size=\"small\"\n        aria-label=\"My small IconButton\"\n      />\n      <IconButton\n        key=\"medium\"\n        id=\"sizes-medium\"\n        icon={Robot}\n        kind=\"secondary\"\n        size=\"medium\"\n        aria-label=\"My medium IconButton\"\n      />\n      <IconButton\n        key=\"large\"\n        id=\"sizes-large\"\n        icon={Robot}\n        kind=\"secondary\"\n        size=\"large\"\n        aria-label=\"My large IconButton\"\n      />\n    </div>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Robot }\n      }\n    }\n  }\n};\n\nexport const Active: Story = {\n  render: () => (\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent: \"space-evenly\",\n        alignItems: \"center\",\n        width: \"100%\"\n      }}\n    >\n      <IconButton id=\"active-primary\" icon={Doc} kind=\"primary\" aria-label=\"My small active IconButton\" active />\n      <IconButton id=\"active-secondary\" icon={Doc} kind=\"secondary\" aria-label=\"My active medium IconButton\" active />\n      <IconButton id=\"active-tertiary\" icon={Doc} kind=\"tertiary\" aria-label=\"My active large IconButton\" active />\n    </div>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Doc }\n      }\n    }\n  }\n};\n\nexport const Disabled: Story = {\n  render: () => (\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent: \"space-evenly\",\n        alignItems: \"center\",\n        width: \"100%\"\n      }}\n    >\n      <IconButton\n        id=\"disabled-primary\"\n        icon={Doc}\n        kind=\"primary\"\n        aria-label=\"My small disabled IconButton\"\n        disabled\n        disabledReason=\"This function is not available\"\n      />\n      <IconButton\n        id=\"disabled-secondary\"\n        icon={Doc}\n        kind=\"secondary\"\n        aria-label=\"My disabled medium IconButton\"\n        disabled\n        disabledReason=\"This function is not available\"\n      />\n      <IconButton\n        id=\"disabled-tertiary\"\n        icon={Doc}\n        kind=\"tertiary\"\n        aria-label=\"My disabled large IconButton\"\n        disabled\n        disabledReason=\"This function is not available\"\n      />\n    </div>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Doc }\n      }\n    }\n  }\n};\n\nexport const IconButtonAsToolbarButton: Story = {\n  render: () => (\n    <Box\n      border\n      rounded=\"medium\"\n      style={{\n        width: \"50%\"\n      }}\n    >\n      <Flex direction=\"column\" align=\"start\">\n        <Flex gap=\"small\" style={{ padding: \"var(--sb-spacing-small)\" }}>\n          <Icon icon={Drag} />\n          <Text type=\"text1\">Widget name</Text>\n          <IconButton\n            id=\"toolbar-filter-button\"\n            icon={Filter}\n            aria-label=\"Filter the widget by everything\"\n            size=\"small\"\n          />\n        </Flex>\n        <Divider withoutMargin />\n        <div style={{ height: \"200px\", width: \"100%\", backgroundColor: \"var(--sb-primary-background-hover-color)\" }} />\n      </Flex>\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Drag, Filter }\n      }\n    }\n  },\n  name: \"Icon button as toolbar button\"\n};\n\nexport const IconButtonAsCloseButton: Story = {\n  render: () => (\n    <Flex gap=\"medium\" style={{ width: \"100%\" }}>\n      <Box\n        border\n        rounded=\"small\"\n        paddingX=\"large\"\n        style={{\n          width: \"100%\"\n        }}\n      >\n        <Flex justify=\"start\" gap=\"large\" style={{ height: \"94px\" }}>\n          <Flex direction=\"column\" justify=\"center\" style={{ color: \"var(--sb-icon-color)\" }}>\n            <Icon icon={Item} size={40} />\n            <Text type=\"text1\" id=\"monday-recycle-bin-title\">\n              Item\n            </Text>\n          </Flex>\n          <Divider direction=\"vertical\" />\n          <Avatar size=\"large\" src={person1} type=\"img\" />\n          <Flex direction=\"column\" align=\"start\" aria-labelledby=\"monday-recycle-bin-title\" style={{ flexGrow: 1 }}>\n            <Flex gap=\"xs\">\n              <Link withoutSpacing href=\"\">\n                Hadas Farhi\n              </Link>\n              <span>deleted the item</span>\n              <Text type=\"text1\" element=\"span\" weight=\"medium\">\n                Hello World\n              </Text>\n              <span>from the board</span>\n            </Flex>\n            <Text type=\"text1\" element=\"span\" weight=\"medium\">\n              Tasks\n            </Text>\n            <Flex gap=\"xs\">\n              <Icon icon={Time} />\n              <Text weight=\"medium\">13m</Text>\n              <Text>(Available for restore in the next 1M)</Text>\n            </Flex>\n          </Flex>\n          <Button id=\"restore-button\" aria-label=\"Restore deleted item\">\n            Restore\n          </Button>\n        </Flex>\n      </Box>\n      <IconButton id=\"close-recycle-button\" icon={CloseSmall} size=\"small\" aria-label=\"Remove from Recycle bin\" />\n    </Flex>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { person1, Item, Time, CloseSmall }\n      }\n    }\n  },\n  name: \"Icon button as close button\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Info/Info.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { Frame, ComponentRules, UsageGuidelines } from \"vibe-storybook-components\";\nimport * as InfoStories from \"./Info.stories\";\nimport do1 from \"./assets/do1.png\";\nimport do2 from \"./assets/do2.png\";\nimport dont1 from \"./assets/dont1.png\";\nimport dont2 from \"./assets/dont2.png\";\nimport usecaseboard from \"./assets/usecaseboard.png\";\nimport usecasecolumn from \"./assets/usecasecolumn.png\";\nimport styles from \"./Info.stories.module.scss\";\n\n<Meta of={InfoStories} />\n\n# Info\n\nAn info component is a contextual container that provides supplemental information to help users understand related content\n\n## Import path\n\n```tsx\nimport { Info } from \"@vibe/core\";\n```\n\n## Overview\n\n<Canvas of={InfoStories.Overview} />\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Use to provide supplemental or explanatory context that supports, but is not essential to, task completion.\",\n    \"Keep content informational, not instructional - avoid critical actions or blocking messages.\",\n    \"Prefer when tooltips are too limited or the explanation requires paragraph-like text.\",\n    \"Keep the message concise and scannable, linking out if more detail is needed.\"\n  ]}\n/>\n\n## Accessibility\n\n<UsageGuidelines\n  guidelines={[\n    <>\n      Provide an <code>id</code> for the Info component to enable proper accessibility associations and unique\n      identification.\n    </>,\n    <>\n      You should provide an accessible name using the <code>aria-label</code> prop to describe the purpose of the info\n      button (e.g., \"More information about this feature\").\n    </>,\n    <>\n      Use <code>aria-labelledby</code> prop when an external element provides the accessible name for the info button.\n      Pass the <code>id</code> of that external element (instead of using <code>aria-label</code>).\n    </>,\n    <>\n      The component automatically manages <code>aria-controls</code>, <code>aria-haspopup=\"dialog\"</code>, and{\" \"}\n      <code>aria-expanded</code> attributes to indicate the relationship with the dialog and its current state.\n    </>,\n    <>\n      Focus management is handled automatically - when the dialog opens, focus moves to the content, and when closed\n      with Escape, focus returns to the info button.\n    </>\n  ]}\n/>\n\n## Variants\n\n### Directions\n\nInfo component dialog can appear from top, bottom, left or right.\n\n<Canvas of={InfoStories.Directions} />\n\n## Do's and Don'ts\n\n<ComponentRules\n  rules={[\n    {\n      componentContainerClassName: styles.largeComponentRule,\n      positive: {\n        component: <img src={do1} alt=\"Info component with contextual information\" style={{ maxWidth: \"100%\" }} />,\n        description: \"Place Info component in location with context\"\n      },\n      negative: {\n        component: <img src={dont1} alt=\"Info component without proper context\" style={{ maxWidth: \"100%\" }} />,\n        description: \"Place it in an location without context\"\n      }\n    },\n    {\n      className: styles.container,\n      componentContainerClassName: styles.largeComponentRule,\n      positive: {\n        component: <img src={do2} alt=\"Info component used for supportive content\" style={{ maxWidth: \"100%\" }} />,\n        description: \"Use when the supporting text is longer than a few words and requires more context\"\n      },\n      negative: {\n        component: (\n          <img\n            src={dont2}\n            alt=\"Info component misused for brief content\"\n            className={styles.small}\n            style={{ maxWidth: \"100%\" }}\n          />\n        ),\n        description:\n          \"Use when the supporting text is brief and can be explained in just a few words. Use a tooltip instead.\"\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### In board header\n\nUsed for header description\n\n<Frame className={styles.useCase}>\n  <img src={usecaseboard} alt=\"Info component used in board header for description\" />\n</Frame>\n\n### In board column\n\nUsed for column description\n\n<Frame className={styles.useCase}>\n  <img src={usecasecolumn} alt=\"Info component used in board column for description\" />\n</Frame>\n\n## Related Components\n\n<RelatedComponents componentsNames={[\"AlertBanner\", \"Tooltip\", \"Tipseen\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Info/Info.stories.module.scss",
    "content": ".container {\n  display: flex;\n  flex-direction: column;\n}\n\n.largeComponentRule {\n  height: fit-content !important;\n  width: 100%;\n  padding: var(--sb-spacing-large);\n\n  &:has(.small) {\n    flex: 1;\n  }\n\n  img {\n    height: 250px;\n    width: 100%;\n    object-fit: contain;\n    object-position: center;\n\n    &.small {\n      height: 150px;\n    }\n  }\n}\n\n.useCase {\n  display: flex;\n\n  img {\n    max-width: 70%;\n    margin: auto;\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/pages/components/Info/Info.stories.tsx",
    "content": "import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { Info, Flex, Text, Box } from \"@vibe/core\";\n\ntype Story = StoryObj<typeof Info>;\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: Info,\n  enumPropNamesArray: [\"position\"],\n  actionPropsArray: [\"onDialogShow\", \"onDialogHide\"]\n});\n\nexport default {\n  title: \"Components/Info\",\n  component: Info,\n  argTypes: {\n    ...metaSettings.argTypes\n  },\n  decorators: metaSettings.decorators\n} satisfies Meta<typeof Info>;\n\nexport const Overview: Story = {\n  render: args => <Info {...args} />,\n  args: {\n    id: \"overview-info\",\n    body: \"Message will appear here, to give more context related information. This is meant for detailed supplemental information, where tooltips do not suffice. This is not the place for critical information for task-completion but rather paragraph-like text serving as supplemental info.\",\n    link: { text: \"Learn more about content\", href: \"#\" },\n    title: \"Placement: Bottom start\",\n    \"aria-label\": \"Overview information\"\n  },\n  parameters: {\n    docs: {\n      liveEdit: { isEnabled: false }\n    }\n  }\n};\n\nexport const Directions: Story = {\n  render: () => (\n    <Flex justify=\"center\" align=\"center\" style={{ minHeight: \"400px\", width: \"100%\" }}>\n      <Box\n        style={{\n          display: \"grid\",\n          gridTemplateColumns: \"1fr 1fr\",\n          gridTemplateRows: \"1fr 1fr\",\n          gap: \"var(--space-48)\",\n          alignItems: \"center\",\n          justifyItems: \"center\"\n        }}\n      >\n        <Flex direction=\"column\" gap=\"medium\" align=\"center\">\n          <Text id=\"bottom-direction\" align=\"center\" type=\"text1\" weight=\"medium\" ellipsis={false}>\n            Bottom\n          </Text>\n          <Info\n            id=\"bottom-direction-info-button\"\n            aria-labelledby=\"bottom-direction\"\n            title=\"Placement: Bottom\"\n            body=\"This dialog's direction is from the bottom\"\n            link={{ text: \"Learn more about dialog direction\", href: \"#\" }}\n            position=\"bottom-start\"\n          />\n        </Flex>\n        <Flex direction=\"column\" gap=\"medium\" align=\"center\">\n          <Text id=\"left-direction\" align=\"center\" type=\"text1\" weight=\"medium\" ellipsis={false}>\n            Left\n          </Text>\n          <Info\n            id=\"left-direction-info-button\"\n            aria-labelledby=\"left-direction\"\n            title=\"Placement: Left\"\n            body=\"This dialog's direction is from the left\"\n            link={{ text: \"Learn more about dialog direction\", href: \"#\" }}\n            position=\"left-start\"\n          />\n        </Flex>\n        <Flex direction=\"column\" gap=\"medium\" align=\"center\">\n          <Text id=\"right-direction\" align=\"center\" type=\"text1\" weight=\"medium\" ellipsis={false}>\n            Right\n          </Text>\n          <Info\n            id=\"right-direction-info-button\"\n            aria-labelledby=\"right-direction\"\n            title=\"Placement: Right\"\n            body=\"This dialog's direction is from the right\"\n            link={{ text: \"Learn more about dialog direction\", href: \"#\" }}\n            position=\"right-start\"\n          />\n        </Flex>\n        <Flex direction=\"column\" gap=\"medium\" align=\"center\">\n          <Text id=\"top-direction\" align=\"center\" type=\"text1\" weight=\"medium\" ellipsis={false}>\n            Top\n          </Text>\n          <Info\n            id=\"top-direction-info-button\"\n            aria-labelledby=\"top-direction\"\n            title=\"Placement: Top\"\n            body=\"This dialog's direction is from the top\"\n            link={{ text: \"Learn more about dialog direction\", href: \"#\" }}\n            position=\"top-start\"\n          />\n        </Flex>\n      </Box>\n    </Flex>\n  )\n};\n\nexport const WithCustomLink: Story = {\n  render: () => (\n    <Info\n      id=\"custom-link-info\"\n      aria-label=\"Information with external link\"\n      title=\"External link example\"\n      body=\"This info dialog contains a link that opens in a new tab.\"\n      link={{\n        text: \"Visit external site\",\n        href: \"https://www.example.com\",\n        target: \"_blank\",\n        rel: \"noopener noreferrer\"\n      }}\n    />\n  )\n};\n\nexport const Disabled: Story = {\n  render: () => (\n    <Info\n      id=\"disabled-info\"\n      aria-label=\"Disabled information\"\n      title=\"Disabled info\"\n      body=\"This info dialog is disabled and cannot be opened.\"\n      disabled\n    />\n  )\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Label/Label.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { Link } from \"vibe-storybook-components\";\nimport { Label } from \"@vibe/core\";\nimport * as LabelStories from \"./Label.stories\";\nimport { TipCheckYourself } from \"./Label.stories.helpers\";\n\n<Meta of={LabelStories} />\n\n# Label\n\nA label indicates the status of an item.\n\n<Canvas of={LabelStories.Overview} />\n\n### Import\n\n```js\nimport { Label } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Label will always appear in context next to the item it classifies.\",\n    \"Displays a short message like new, beta, coming soon.,etc.\",\n    \"Use only UI colors, not content colors (like status colors).\"\n  ]}\n/>\n\n<TipCheckYourself />\n\n## Variants\n\n### Kinds\n\n<Canvas of={LabelStories.Kinds} />\n\n### Size\n\nLabel can appear in 2 sizes: small and medium.\n\n<Canvas of={LabelStories.Sizes} />\n\n### Colors\n\n<Canvas of={LabelStories.Colors} />\n\n### Clickable\n\n<Canvas of={LabelStories.Clickable} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: <Label text=\"New\" />,\n        description: \"Use label to indicate the status of an item, for example: “New”.\"\n      },\n      negative: {\n        component: <Label text=\"123\" />,\n        description: (\n          <>\n            Don’t use the label component in order to indicate numbers, instead use the{\" \"}\n            <StorybookLink page=\"Components/Counter\">Counter.</StorybookLink>\n          </>\n        )\n      }\n    },\n    {\n      positive: {\n        component: (\n          <div className=\"monday-storybook-label_inline-block\">\n            <h5 className=\"monday-storybook-label_title\">Categories</h5>\n            <Label text=\"new\" />\n          </div>\n        ),\n        description: \"Use label only once per item.\"\n      },\n      negative: {\n        component: [\n          <div className=\"monday-storybook-label_block\">\n            <h5>Categories</h5>\n            <div className=\"monday-storybook-label_inline-block\">\n              <Label text=\"Featured\" />\n              <Label text=\"CRM\" />\n              <Label text=\"Export\" />\n            </div>\n          </div>\n        ],\n        description: (\n          <>\n            Don’t use multiple labels for one item. Instead, use{\" \"}\n            <StorybookLink page=\"Components/Chips\">Chips.</StorybookLink>\n          </>\n        )\n      }\n    },\n    {\n      positive: {\n        component: [<Label text=\"New\" kind=\"line\" />, <Label text=\"Beta\" />],\n        description: \"Use only the UI colors above.\"\n      },\n      negative: {\n        component: [\n          <Label className=\"monday-storybook-label_bad-lable monday-storybook-label_purple\" kind=\"line\" text=\"Beta\" />,\n          <Label className=\"monday-storybook-label_bad-lable monday-storybook-label_pink\" kind=\"line\" text=\"Beta\" />\n        ],\n        description: \"Don’t use any content colors for labels. If the page is full of CTAs, use the outline state.\"\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### Secondary label\n\nIn case of visual overload, use the secondary label in order to create hirarchy.\n\n<Canvas of={LabelStories.SecondaryLabel} />\n\n### Celebration\n\nTo celebrate new feature, outline label can be highlighted by adding celebrate animation.\n\n<Canvas of={LabelStories.Celebration} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Tooltip\", \"Counter\", \"Chips\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Label/Label.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const TipCheckYourself = () => (\n  <Tip title=\"Check yourself\">\n    Need to count or indicate numbers? Use the{\" \"}\n    <StorybookLink page=\"Components/Counter\" size=\"small\">\n      Counter\n    </StorybookLink>{\" \"}\n    component instead.\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/Label/Label.stories.tsx",
    "content": "import React from \"react\";\nimport { Label, Button, Flex, Box, Heading, Text } from \"@vibe/core\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { createComponentTemplate } from \"vibe-storybook-components\";\nimport { useEffect, useState } from \"react\";\nimport { type Decorator, type StoryObj } from \"@storybook/react\";\n\ntype Story = StoryObj<typeof Label>;\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: Label\n});\n\nexport default {\n  title: \"Components/Label\",\n  component: Label,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n};\n\nconst withGrid: Decorator = Story => (\n  <div\n    style={{\n      display: \"grid\",\n      gridTemplateColumns: \"repeat(4, 180px)\",\n      marginInlineStart: \"30px\",\n      marginTop: \"10px\",\n      gap: \"50px\",\n      width: \"100%\"\n    }}\n  >\n    <Story />\n  </div>\n);\n\nconst labelTemplate = createComponentTemplate(Label);\n\nexport const Overview = {\n  render: labelTemplate.bind({}),\n  name: \"Overview\",\n  args: {\n    id: \"overview-label\",\n    text: \"New\"\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const Kinds = {\n  render: () => (\n    <Flex style={{ marginLeft: \"30px\", marginTop: \"10px\", gap: \"184px\" }}>\n      <Flex direction=\"column\" align=\"start\" gap=\"large\">\n        <Label id=\"kinds-fill\" text=\"New\" />\n        <Text>Fill</Text>\n      </Flex>\n      <Flex direction=\"column\" align=\"start\" gap=\"large\">\n        <Label id=\"kinds-outline\" text=\"New\" kind=\"line\" />\n        <Text>Outline</Text>\n      </Flex>\n    </Flex>\n  ),\n  name: \"Kinds\"\n};\n\nexport const Sizes: Story = {\n  render: () => (\n    <>\n      <Label id=\"sizes-medium\" text=\"New\" />\n      <Label id=\"sizes-small\" text=\"New\" size=\"small\" />\n    </>\n  ),\n  decorators: [withGrid],\n  name: \"Sizes\"\n};\n\nexport const Colors = {\n  render: () => (\n    <>\n      <Label id=\"colors-default-fill\" text=\"New\" />\n      <Label id=\"colors-negative-fill\" text=\"New\" color=\"negative\" />\n      <Label id=\"colors-positive-fill\" text=\"New\" color=\"positive\" />\n      <Label id=\"colors-dark-fill\" text=\"New\" color=\"dark\" />\n      <Label id=\"colors-default-line\" text=\"New\" kind=\"line\" />\n      <Label id=\"colors-negative-line\" text=\"New\" color=\"negative\" kind=\"line\" />\n      <Label id=\"colors-positive-line\" text=\"New\" color=\"positive\" kind=\"line\" />\n      <Label id=\"colors-dark-line\" text=\"New\" color=\"dark\" kind=\"line\" />\n    </>\n  ),\n  decorators: [withGrid],\n  name: \"Colors\"\n};\n\nexport const Clickable = {\n  render: () => (\n    <>\n      <Label id=\"clickable-fill\" aria-label=\"Clickable new feature label\" text=\"New\" onClick={() => {}} />\n      <Label id=\"clickable-line\" aria-label=\"Clickable new feature label\" text=\"New\" kind=\"line\" onClick={() => {}} />\n    </>\n  ),\n  decorators: [withGrid],\n  name: \"Clickable\"\n};\n\nexport const SecondaryLabel = {\n  render: () => (\n    <Flex direction=\"column\" gap=\"large\">\n      <Box style={{ width: \"300px\" }}>\n        <Flex align=\"center\" gap=\"small\">\n          <Heading id=\"gantt-heading\" type=\"h3\">\n            Gannt\n          </Heading>\n          <Label id=\"gantt-label\" text=\"New\" kind=\"line\" />\n        </Flex>\n        <Text element=\"p\" type=\"text1\">\n          Plan, track and present your projects visually using the Gannt chart\n        </Text>\n      </Box>\n      <Box style={{ width: \"300px\", marginTop: \"8px\" }}>\n        <Flex align=\"center\" gap=\"small\">\n          <Heading id=\"apps-heading\" type=\"h3\" style={{ display: \"inline\" }}>\n            Apps\n          </Heading>\n          <Label id=\"apps-label\" text=\"New\" kind=\"line\" />\n        </Flex>\n        <Text element=\"p\" type=\"text1\" style={{ marginTop: \"8px\" }}>\n          Enhance your dashboard with widgets built on the monday apps framework\n        </Text>\n      </Box>\n    </Flex>\n  ),\n  name: \"Secondary label\"\n};\n\nexport const Celebration = {\n  render: () => {\n    const [animate, setAnimate] = useState(false);\n\n    useEffect(() => {\n      setTimeout(() => {\n        setAnimate(false);\n      }, 500);\n    }, [animate]);\n\n    return (\n      <>\n        <Label id=\"celebration-label\" text=\"New\" kind=\"line\" celebrationAnimation={animate} />\n        <Button\n          id=\"celebration-button\"\n          aria-label=\"Trigger celebration animation\"\n          size=\"small\"\n          kind=\"tertiary\"\n          onClick={() => setAnimate(true)}\n        >\n          Click to celebrate\n        </Button>\n      </>\n    );\n  },\n  parameters: {\n    chromatic: {\n      pauseAnimationAtEnd: true\n    }\n  }\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Link/Example.module.scss",
    "content": ".example {\n  margin: 0;\n  padding: 60px 40px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: auto;\n  border-radius: var(--sb-border-radius-medium);\n  background: var(--sb-dark-background-on-secondary-color);\n  flex-wrap: wrap;\n  gap: var(--sb-spacing-medium);\n}\n"
  },
  {
    "path": "packages/docs/src/pages/components/Link/Example.tsx",
    "content": "import React from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./Example.module.scss\";\nimport { type ElementContent } from \"../../../types\";\n\ninterface ComponentRuleProps {\n  children: ElementContent;\n  className?: string;\n}\n\nconst ComponentRule: React.FC<ComponentRuleProps> = ({ children, className }) => {\n  return <figure className={cx(styles.example, className)}>{children}</figure>;\n};\n\nexport default ComponentRule;\n"
  },
  {
    "path": "packages/docs/src/pages/components/Link/Link.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { Link } from \"@vibe/core\";\nimport { ExternalPage, Gallery } from \"@vibe/icons\";\nimport { TipButton } from \"./Link.stories.helpers\";\nimport * as LinkStories from \"./Link.stories\";\nimport Example from \"./Example\";\nimport tipseen1 from \"./assets/tipseen1.svg\";\nimport tipseen2 from \"./assets/tipseen2.svg\";\nimport tipseen3 from \"./assets/tipseen3.svg\";\nimport tipseen4 from \"./assets/tipseen4.svg\";\n\n<Meta of={LinkStories} />\n\n# Link\n\nLink is an actionable text component with connection to another web pages.\n\n<Canvas of={LinkStories.Overview} />\n\n### Import\n\n```js\nimport { Link } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Use links only as part of the text or scentence.\",\n    \"Use links in order to redirect people outside of the system.\",\n    \"Links should be short with a clear action name. read more, go to, etc...\"\n  ]}\n/>\n\n<TipButton />\n\n## Accessibility\n\n<UsageGuidelines\n  guidelines={[\n    <>\n      Use the <code>ariaLabelDescription</code> prop when the link text alone doesn't provide enough context for screen\n      readers to understand the link's purpose.\n    </>,\n    <>\n      Use <code>ariaDescribedby</code> prop to link the link to additional descriptive text that provides more context\n      about the link's destination or action.\n    </>,\n    <>\n      Use <code>ariaLabeledBy</code> prop when an external element provides the accessible name for the link. Pass the{\" \"}\n      <code>id</code> of that external element.\n    </>\n  ]}\n/>\n\n**Link's color on Primary**\n\n- The link on Primary surface should be `text-color-on-primary` with underline.\n\n- For hover state the cursor should transit to pointer to represent clickable area.\n\n<Example>\n  <img src={tipseen1} alt=\"Example of link on primary surface\" />\n  <img src={tipseen2} alt=\"Example of link on primary surface on hover\" />\n</Example>\n\n**Link's color on inverted**\n\n- The link on inverted surface should be `text-color-on-inverted` with underline.\n\n- For hover state the cursor should transit to pointer to represent clickable area.\n\n<Example>\n  <img src={tipseen3} alt=\"Example of link on inverted surface\" />\n  <img src={tipseen4} alt=\"Example of link on inverted surface on hover\" />\n</Example>\n\n## Variants\n\n### States\n\n<Canvas of={LinkStories.States} />\n\n### Right to left\n\n<Canvas of={LinkStories.RightToLeft} />\n\n### With icons\n\n<Canvas of={LinkStories.WithIcons} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: <Link text=\"Read more\" href=\"https://www.monday.com\" />,\n        description: \"Keep the copy short and to the point.\"\n      },\n      negative: {\n        component: <Link text=\"Go to this url and read all about it\" href=\"https://www.monday.com\" />,\n        description: \"Don’t write long messages that are clickable.\"\n      }\n    },\n    {\n      positive: {\n        component: <Link text=\"Read more\" iconPosition=\"start\" href=\"https://www.monday.com\" icon={ExternalPage} />,\n        description: \"Use icon from the left or right side of the link\"\n      },\n      negative: {\n        component: [\n          <Link icon={Gallery} iconPosition=\"end\" />,\n          <Link icon={ExternalPage} text=\"Read more\" iconPosition=\"end\" />\n        ],\n        description: \"Don’t use two icons for one link.\"\n      }\n    },\n    {\n      positive: {\n        component: <Link text=\"Read more\" href=\"https://www.monday.com\" />,\n        description: \"Use only one link in context in text\"\n      },\n      negative: {\n        component: [\n          <Link text=\"Read this\" href=\"https://www.monday.com\" />,\n          <span class=\"monday-storybook-link_text\">or</span>,\n          <Link text=\"this\" href=\"https://www.monday.com\" />,\n          <Link text=\"Nice article\" href=\"https://www.monday.com\" />\n        ],\n        description: \"Don’t use multiple links near each other\"\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### Reference link\n\nUse this menu to allow a user to either select one or more items from the list.\n\n<Canvas of={LinkStories.ReferenceLink} />\n\n### Shortening texts\n\nUse read more to shorten long paragraphs of text\n\n<Canvas of={LinkStories.ShorteningTexts} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Button\", \"Breadcrumbs\", \"Badge\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Link/Link.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const TipButton = () => (\n  <Tip>\n    If you need an action that does not have context with text{\" \"}\n    <StorybookLink page=\"Components/Combobox\" size=\"small\">\n      Button\n    </StorybookLink>\n    .\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/Link/Link.stories.tsx",
    "content": "import React from \"react\";\nimport { type Meta, type StoryObj } from \"@storybook/react\";\nimport { Link, type LinkProps } from \"@vibe/core\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { ExternalPage, Info, Link as IconLink } from \"@vibe/icons\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: Link,\n  iconPropNamesArray: [\"icon\"]\n});\n\nexport default {\n  title: \"Components/Link\",\n  component: Link,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n} satisfies Meta<typeof Link>;\n\ntype Story = StoryObj<typeof Link>;\n\nexport const Overview: Story = {\n  render: (args: LinkProps) => <Link id=\"overview-link\" text=\"Read more\" href=\"https://www.monday.com\" {...args} />,\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const States: Story = {\n  render: () => <Link id=\"states-default\" text=\"Default\" href=\"https://www.monday.com\" />\n};\n\nexport const RightToLeft: Story = {\n  render: () => (\n    <>\n      <Link id=\"rtl-arabic\" text=\"اقرأ أكثر\" href=\"https://www.monday.com\" icon={IconLink} />\n      <Link id=\"rtl-hebrew\" text=\"קרא עוד\" href=\"https://www.monday.com\" iconPosition=\"end\" icon={Info} />\n    </>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { IconLink, Info }\n      }\n    }\n  }\n};\n\nexport const WithIcons: Story = {\n  render: () => (\n    <>\n      <Link id=\"icon-start\" text=\"Read more\" href=\"https://www.monday.com\" icon={ExternalPage} />\n      <Link id=\"icon-end\" text=\"Read more\" href=\"https://www.monday.com\" iconPosition=\"end\" icon={ExternalPage} />\n    </>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { ExternalPage }\n      }\n    }\n  }\n};\n\nexport const ReferenceLink: Story = {\n  render: () => (\n    <div>\n      {`Lorem Ipsum has been the industry's `}\n      <Link id=\"reference-link\" inlineText inheritFontSize text=\"standard\" href=\"https://www.monday.com\" />\n      {` dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.`}\n    </div>\n  )\n};\n\nexport const ShorteningTexts: Story = {\n  render: () => (\n    <div>\n      {`Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a\n      galley of type and scrambled it to make a type specimen book. `}\n      <Link id=\"shortening-link\" text=\"Read more\" href=\"https://www.monday.com\" inheritFontSize inlineText />\n    </div>\n  )\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/List/List.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { Board, Add, Filter } from \"@vibe/icons\";\nimport { List, ListItem, ListTitle } from \"@vibe/core/next\";\nimport { DialogContentContainer, Divider, Flex } from \"@vibe/core\";\nimport { Link, Tip, StorybookLink } from \"vibe-storybook-components\";\nimport { TipCheckYourself } from \"./List.stories.helpers\";\nimport * as ListStories from \"./List.stories\";\n\n<Meta of={ListStories} />\n\n# List\n\nLists is a group of actionable items containing primary and supplemental actions, which are represented by icons and text.\n\n<Canvas of={ListStories.Overview} />\n\n### Import\n\nAll the List-related components can be imported from `@vibe/core/next`.\n\n```js\nimport { List, ListItem, ListTitle } from \"@vibe/core/next\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Use list component for display a list of navigable items in a column.\",\n    \"List purpose is usually allowing navigation in context to the navigable content.\",\n    \"Your list items can be either in regular, selected or disabled state. You can control a list item's component state by its attributes.\",\n    \"Use the ariaLabel prop to provide an accessible name for the list.\"\n  ]}\n/>\n\n<TipCheckYourself />\n\n## Accessibility\n\n<UsageGuidelines\n  guidelines={[\n    <>\n      Always provide an <code>ariaLabel</code> prop to give the list a meaningful accessible name that describes its\n      purpose (e.g., \"Navigation menu\", \"Settings options\").\n    </>,\n    <>\n      The List component provides comprehensive keyboard navigation: <strong>Arrow Up/Down</strong> to navigate between\n      items (wraps around), <strong>Home/End</strong> to jump to first/last item, <strong>PageUp/PageDown</strong> to\n      move by 10 items, and <strong>Enter/Space</strong> to activate the focused item.\n    </>,\n    <>\n      Use <code>defaultFocusIndex</code> to set which item should receive focus when the list first becomes focused.\n    </>,\n    <>\n      Use <code>onFocusChange</code> callback to track focus changes for custom focus management scenarios.\n    </>,\n    <>\n      Ensure individual <code>ListItem</code> components have descriptive <code>label</code> text. For items with only\n      icons, provide additional context through the label.\n    </>\n  ]}\n/>\n\n## Variants\n\n### List with icons\n\n<Canvas of={ListStories.ListWithIcons} />\n\n### List with avatars\n\n<Canvas of={ListStories.ListWithAvatars} />\n\n### List with title\n\nUse `ListTitle` to create section headers within your list. Titles are automatically skipped during keyboard navigation.\n\n<Canvas of={ListStories.ListWithTitle} />\n\n### Sticky title\n\nUse the `sticky` prop on `ListTitle` to keep section headers visible at the top while scrolling through a list.\n\n<Canvas of={ListStories.StickyTitle} />\n\n### Scrollable list\n\nUse `maxHeight` to create a scrollable list with a fixed height.\n\n<Canvas of={ListStories.ScrollableList} />\n\n### Sizes\n\n<Canvas of={ListStories.Sizes} />\n\n### States\n\n<Canvas of={ListStories.States} />\n\n### In dialog container\n\n<Canvas of={ListStories.InDialogContainer} />\n\n### With end elements\n\n<Canvas of={ListStories.WithEndElements} />\n\n### Virtualized list\n\nFor performance optimization with large datasets (thousands of items), you can implement virtualization by composing the List components with a virtualization library. This example demonstrates using <a href=\"https://github.com/bvaughn/react-window\" target=\"_blank\">react-window</a> to render only the visible items.\n\n<Canvas of={ListStories.VirtualizedList} />\n\n## Do's and Don'ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: (\n          <div>\n            <List ariaLabel=\"Actions\">\n              <ListItem label=\"Add\" value=\"add\" startElement={{ type: \"icon\", value: Add }} />\n              <ListItem label=\"Filter\" value=\"filter\" startElement={{ type: \"icon\", value: Filter }} />\n            </List>\n            <Divider />\n            <List ariaLabel=\"Boards\">\n              <ListItem label=\"Board name\" value=\"board1\" startElement={{ type: \"icon\", value: Board }} />\n              <ListItem label=\"Board name\" value=\"board2\" startElement={{ type: \"icon\", value: Board }} />\n            </List>\n          </div>\n        ),\n        description: \"Use a list component to create a menu displayed on one of the various sections of your web page.\"\n      },\n      negative: {\n        component: (\n          <DialogContentContainer>\n            <List ariaLabel=\"Actions\">\n              <ListItem label=\"Add\" value=\"add\" startElement={{ type: \"icon\", value: Add }} />\n              <ListItem label=\"Filter\" value=\"filter\" startElement={{ type: \"icon\", value: Filter }} />\n            </List>\n            <Divider />\n            <List ariaLabel=\"Boards\">\n              <ListItem label=\"Board name\" value=\"board1\" startElement={{ type: \"icon\", value: Board }} />\n              <ListItem label=\"Board name\" value=\"board2\" startElement={{ type: \"icon\", value: Board }} />\n            </List>\n          </DialogContentContainer>\n        ),\n        description: (\n          <>\n            Do not use the list to implement a menu displayed inside a dialog. See{\" \"}\n            <StorybookLink page=\"Components/Menu\">Menu</StorybookLink>.\n          </>\n        )\n      }\n    }\n  ]}\n/>\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Menu\", \"Tabs\", \"MultiStepIndicator\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/List/List.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const TipCheckYourself = () => (\n  <Tip title=\"Check yourself\">\n    For implementing a menu inside a dialog, please use our{\" \"}\n    <StorybookLink page=\"Components/Menu\" size=\"small\">\n      Menu\n    </StorybookLink>{\" \"}\n    component\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/List/List.stories.tsx",
    "content": "import React, { useState, useCallback } from \"react\";\nimport { type Meta, type StoryObj } from \"@storybook/react\";\nimport { List, ListItem, ListTitle, type ListProps } from \"@vibe/core/next\";\nimport { Board, Email, Favorite, Person, Settings, Team, ThumbsUp, Search } from \"@vibe/icons\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { Flex, DialogContentContainer, Text } from \"@vibe/core\";\nimport { FixedSizeList } from \"react-window\";\nimport person1 from \"../Avatar/assets/person1.png\";\nimport person2 from \"../Avatar/assets/person2.png\";\nimport person3 from \"../Avatar/assets/person3.png\";\n\ntype Story = StoryObj<typeof List>;\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: List\n});\n\nconst meta: Meta<typeof List> = {\n  title: \"Components/List [New]/List\",\n  component: List,\n  subcomponents: {\n    ListItem,\n    ListTitle\n  },\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n};\n\nexport default meta;\n\nconst listTemplate = (args: ListProps) => {\n  const onClick = useCallback(() => alert(\"On click!\"), []);\n  return (\n    <List {...args}>\n      <ListItem label=\"Board Power up\" onClick={onClick} />\n      <ListItem label=\"Team Power up\" onClick={onClick} />\n      <ListItem label=\"Essentials\" onClick={onClick} />\n    </List>\n  );\n};\n\nexport const Overview: Story = {\n  render: listTemplate,\n  name: \"Overview\",\n  args: {\n    \"aria-label\": \"Power ups list\"\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const ListWithIcons: Story = {\n  render: () => (\n    <List aria-label=\"List with icons\">\n      <ListItem label=\"List item 1\" value=\"list-1\" startElement={{ type: \"icon\", value: Board }} />\n      <ListItem label=\"List item 2\" value=\"list-2\" startElement={{ type: \"icon\", value: Team }} />\n      <ListItem label=\"List item 3\" value=\"list-3\" startElement={{ type: \"icon\", value: ThumbsUp }} />\n    </List>\n  ),\n  name: \"List with icons\",\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Board, Team, ThumbsUp }\n      }\n    }\n  }\n};\n\nexport const ListWithAvatars: Story = {\n  render: () => (\n    <List aria-label=\"List with avatars\">\n      <ListItem label=\"List item 1\" value=\"list-1\" startElement={{ type: \"avatar\", value: person1 }} />\n      <ListItem label=\"List item 2\" value=\"list-2\" startElement={{ type: \"avatar\", value: person2 }} />\n      <ListItem label=\"List item 3\" value=\"list-3\" startElement={{ type: \"avatar\", value: person3 }} />\n    </List>\n  ),\n  name: \"List with avatars\",\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { person1, person2, person3 }\n      }\n    }\n  }\n};\n\nexport const ListWithTitle: Story = {\n  render: () => (\n    <List aria-label=\"List with title\">\n      <ListTitle>Category A</ListTitle>\n      <ListItem label=\"List item 1\" value=\"list-1\" startElement={{ type: \"icon\", value: Board }} />\n      <ListItem label=\"List item 2\" value=\"list-2\" startElement={{ type: \"icon\", value: Team }} />\n      <ListTitle>Category B</ListTitle>\n      <ListItem label=\"List item 3\" value=\"list-3\" startElement={{ type: \"icon\", value: ThumbsUp }} />\n      <ListItem label=\"List item 4\" value=\"list-4\" startElement={{ type: \"icon\", value: Favorite }} />\n    </List>\n  ),\n  name: \"List with title\",\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Board, Team, ThumbsUp, Favorite }\n      }\n    }\n  }\n};\n\nexport const StickyTitle: Story = {\n  render: () => (\n    <DialogContentContainer style={{ width: \"250px\" }}>\n      <List aria-label=\"List with sticky titles\" maxHeight={200}>\n        <ListTitle sticky>Category A</ListTitle>\n        <ListItem label=\"List item 1\" value=\"1\" startElement={{ type: \"icon\", value: Board }} />\n        <ListItem label=\"List item 2\" value=\"2\" startElement={{ type: \"icon\", value: Board }} />\n        <ListItem label=\"List item 3\" value=\"3\" startElement={{ type: \"icon\", value: Board }} />\n        <ListItem label=\"List item 4\" value=\"4\" startElement={{ type: \"icon\", value: Board }} />\n        <ListTitle sticky>Category B</ListTitle>\n        <ListItem label=\"List item 5\" value=\"5\" startElement={{ type: \"icon\", value: Team }} />\n        <ListItem label=\"List item 6\" value=\"6\" startElement={{ type: \"icon\", value: Team }} />\n        <ListItem label=\"List item 7\" value=\"7\" startElement={{ type: \"icon\", value: Team }} />\n        <ListItem label=\"List item 8\" value=\"8\" startElement={{ type: \"icon\", value: Team }} />\n        <ListTitle sticky>Category C</ListTitle>\n        <ListItem label=\"List item 9\" value=\"9\" startElement={{ type: \"icon\", value: ThumbsUp }} />\n        <ListItem label=\"List item 10\" value=\"10\" startElement={{ type: \"icon\", value: ThumbsUp }} />\n        <ListItem label=\"List item 11\" value=\"11\" startElement={{ type: \"icon\", value: ThumbsUp }} />\n        <ListItem label=\"List item 12\" value=\"12\" startElement={{ type: \"icon\", value: ThumbsUp }} />\n      </List>\n    </DialogContentContainer>\n  ),\n  name: \"Sticky title\",\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Board, Team, ThumbsUp }\n      }\n    }\n  }\n};\n\nexport const ScrollableList: Story = {\n  render: () => (\n    <DialogContentContainer style={{ width: \"200px\" }}>\n      <List aria-label=\"Scrollable list\" maxHeight={162}>\n        <ListItem label=\"List item 1\" value=\"1\" />\n        <ListItem label=\"List item 2\" value=\"2\" />\n        <ListItem label=\"List item 3\" value=\"3\" />\n        <ListItem label=\"List item 4\" value=\"4\" />\n        <ListItem label=\"List item 5\" value=\"5\" />\n        <ListItem label=\"List item 6\" value=\"6\" />\n        <ListItem label=\"List item 7\" value=\"7\" />\n        <ListItem label=\"List item 8\" value=\"8\" />\n        <ListItem label=\"List item 9\" value=\"9\" />\n        <ListItem label=\"List item 10\" value=\"10\" />\n        <ListItem label=\"List item 11\" value=\"11\" />\n        <ListItem label=\"List item 12\" value=\"12\" />\n      </List>\n    </DialogContentContainer>\n  ),\n  name: \"Scrollable list\"\n};\n\nexport const Sizes: Story = {\n  render: () => (\n    <Flex gap=\"large\" align=\"start\">\n      <Flex direction=\"column\" gap=\"small\" align=\"start\">\n        <Text type=\"text1\" weight=\"bold\">\n          Small\n        </Text>\n        <div style={{ width: 200 }}>\n          <List aria-label=\"Small list\" size=\"small\">\n            <ListItem label=\"Small item 1\" value=\"1\" />\n            <ListItem label=\"Small item 2\" value=\"2\" />\n            <ListItem label=\"Small item 3\" value=\"3\" />\n          </List>\n        </div>\n      </Flex>\n      <Flex direction=\"column\" gap=\"small\" align=\"start\">\n        <Text type=\"text1\" weight=\"bold\">\n          Medium\n        </Text>\n        <div style={{ width: 200 }}>\n          <List aria-label=\"Medium list\" size=\"medium\">\n            <ListItem label=\"Medium item 1\" value=\"1\" />\n            <ListItem label=\"Medium item 2\" value=\"2\" />\n            <ListItem label=\"Medium item 3\" value=\"3\" />\n          </List>\n        </div>\n      </Flex>\n      <Flex direction=\"column\" gap=\"small\" align=\"start\">\n        <Text type=\"text1\" weight=\"bold\">\n          Large\n        </Text>\n        <div style={{ width: 200 }}>\n          <List aria-label=\"Large list\" size=\"large\">\n            <ListItem label=\"Large item 1\" value=\"1\" />\n            <ListItem label=\"Large item 2\" value=\"2\" />\n            <ListItem label=\"Large item 3\" value=\"3\" />\n          </List>\n        </div>\n      </Flex>\n    </Flex>\n  ),\n  name: \"Sizes\"\n};\n\nexport const States: Story = {\n  render: () => (\n    <Flex gap=\"large\" align=\"start\">\n      <List aria-label=\"States example\">\n        <ListItem label=\"Default state\" value=\"default\" />\n        <ListItem label=\"Disabled state\" value=\"disabled\" disabled />\n        <ListItem label=\"Selected state\" value=\"selected\" selected />\n      </List>\n    </Flex>\n  ),\n  name: \"States\"\n};\n\nexport const InDialogContainer: Story = {\n  render: () => (\n    <DialogContentContainer style={{ width: 250 }}>\n      <List aria-label=\"List in dialog\" maxHeight={200}>\n        <ListItem label=\"View Profile\" value=\"profile\" startElement={{ type: \"icon\", value: Person }} />\n        <ListItem label=\"Settings\" value=\"settings\" startElement={{ type: \"icon\", value: Settings }} />\n        <ListItem label=\"Favorites\" value=\"favorites\" startElement={{ type: \"icon\", value: Favorite }} />\n        <ListItem label=\"Email Preferences\" value=\"email\" startElement={{ type: \"icon\", value: Email }} />\n        <ListItem label=\"Team Settings\" value=\"team\" startElement={{ type: \"icon\", value: Team }} />\n      </List>\n    </DialogContentContainer>\n  ),\n  name: \"In dialog container\",\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Person, Settings, Favorite, Email, Team }\n      }\n    }\n  }\n};\n\nexport const WithClickHandler: Story = {\n  render: function WithClickHandlerExample() {\n    const [lastClicked, setLastClicked] = useState<string | null>(null);\n\n    return (\n      <div>\n        <p style={{ marginBottom: 16 }}>Last clicked: {lastClicked ?? \"None\"}</p>\n        <div style={{ width: 300 }}>\n          <List aria-label=\"Clickable list\">\n            <ListItem label=\"Click me\" value=\"1\" onClick={() => setLastClicked(\"Item 1\")} />\n            <ListItem label=\"Or click me\" value=\"2\" onClick={() => setLastClicked(\"Item 2\")} />\n            <ListItem label=\"Disabled (can't click)\" value=\"3\" disabled onClick={() => setLastClicked(\"Item 3\")} />\n          </List>\n        </div>\n      </div>\n    );\n  },\n  name: \"With click handler\"\n};\n\nexport const WithEndElements: Story = {\n  render: () => (\n    <div style={{ width: 300 }}>\n      <List aria-label=\"List with end elements\">\n        <ListItem\n          label=\"Settings\"\n          value=\"1\"\n          startElement={{ type: \"icon\", value: Settings }}\n          endElement={{ type: \"suffix\", value: \"⌘S\" }}\n        />\n        <ListItem\n          label=\"Favorites\"\n          value=\"2\"\n          startElement={{ type: \"icon\", value: Favorite }}\n          endElement={{ type: \"suffix\", value: \"⌘F\" }}\n        />\n        <ListItem\n          label=\"Search\"\n          value=\"3\"\n          startElement={{ type: \"icon\", value: Search }}\n          endElement={{ type: \"suffix\", value: \"⌘K\" }}\n        />\n      </List>\n    </div>\n  ),\n  name: \"With end elements\",\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Settings, Favorite, Search }\n      }\n    }\n  }\n};\n\nexport const VirtualizedList: Story = {\n  render: () => {\n    const items = Array.from({ length: 1000 }, (_, i) => ({ label: `Item ${i + 1}`, value: `${i + 1}` }));\n\n    return (\n      <FixedSizeList height={300} width={300} itemCount={items.length} itemSize={32}>\n        {({ index, style }) => (\n          <div style={style}>\n            <ListItem label={items[index].label} value={items[index].value} />\n          </div>\n        )}\n      </FixedSizeList>\n    );\n  },\n  name: \"Virtualized list\",\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { FixedSizeList }\n      }\n    }\n  }\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/List/ListItem.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { Tip, StorybookLink } from \"vibe-storybook-components\";\nimport * as ListItemStories from \"./ListItem.stories\";\n\n<Meta of={ListItemStories} />\n\n# ListItem\n\nAn item of a List component.\n\n<Canvas of={ListItemStories.Overview} />\n\n### Import\n\n```js\nimport { List, ListItem } from \"@vibe/core/next\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"ListItem uses a data-driven API with label, startElement, and endElement props.\",\n    \"Use startElement with type 'icon' or 'avatar' to add visual elements before the label.\",\n    \"Use endElement with type 'suffix' or 'icon' to add visual elements after the label.\",\n    \"ListItem must be used within a List component.\"\n  ]}\n/>\n\n## Variants\n\n### States\n\n<Canvas of={ListItemStories.States} />\n\n### List item with an icon\n\nUse `startElement` with `type: \"icon\"` to add an icon before the label.\n\n<Canvas of={ListItemStories.WithIcon} />\n\n### List item with an avatar\n\nUse `startElement` with `type: \"avatar\"` to add an avatar before the label.\n\n<Canvas of={ListItemStories.WithAvatar} />\n\n### List item with end element\n\nUse `endElement` to add content after the label, such as keyboard shortcuts.\n\n<Canvas of={ListItemStories.WithEndElement} />\n\n### With click handler\n\nUse `onClick` to handle click events on the list item.\n\n<Canvas of={ListItemStories.WithClickHandler} />\n\n### Read-only\n\nUse `readOnly` to make an item non-interactive.\n\n<Canvas of={ListItemStories.ReadOnly} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/List/ListItem.stories.tsx",
    "content": "import React, { useState, useCallback } from \"react\";\nimport { type Meta, type StoryObj } from \"@storybook/react\";\nimport { List, ListItem, type ListItemProps } from \"@vibe/core/next\";\nimport { Board, Favorite, Person, Settings, Team, ThumbsUp, Search, Send } from \"@vibe/icons\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { Flex } from \"@vibe/core\";\nimport { StoryDescription } from \"vibe-storybook-components\";\nimport person1 from \"../Avatar/assets/person1.png\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: ListItem\n});\n\nexport default {\n  title: \"Components/List [New]/ListItem\",\n  component: ListItem,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n} satisfies Meta<typeof ListItem>;\n\ntype Story = StoryObj<typeof ListItem>;\n\nexport const Overview: Story = {\n  render: (args: ListItemProps) => (\n    <List aria-label=\"List item overview\">\n      <ListItem {...args} />\n    </List>\n  ),\n  name: \"Overview\",\n  args: {\n    label: \"List item\",\n    value: \"item-1\"\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const States: Story = {\n  render: () => (\n    <List aria-label=\"States example\">\n      <ListItem label=\"Default state\" value=\"default\" />\n      <ListItem label=\"Disabled state\" value=\"disabled\" disabled />\n      <ListItem label=\"Selected state\" value=\"selected\" selected />\n    </List>\n  ),\n  name: \"States\"\n};\n\nexport const WithIcon: Story = {\n  render: () => (\n    <List aria-label=\"List with icon\">\n      <ListItem\n        label=\"Productivity\"\n        value=\"productivity\"\n        startElement={{ type: \"icon\", value: Send }}\n      />\n    </List>\n  ),\n  name: \"List item with an icon\",\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Send }\n      }\n    }\n  }\n};\n\nexport const WithAvatar: Story = {\n  render: () => (\n    <List aria-label=\"List with avatar\">\n      <ListItem\n        label=\"Sophia Johnson\"\n        value=\"sophia\"\n        startElement={{ type: \"avatar\", value: person1 }}\n      />\n    </List>\n  ),\n  name: \"List item with an avatar\",\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { person1 }\n      }\n    }\n  }\n};\n\nexport const WithEndElement: Story = {\n  render: () => (\n    <div style={{ width: 250 }}>\n      <List aria-label=\"List with end elements\">\n        <ListItem\n          label=\"Settings\"\n          value=\"settings\"\n          startElement={{ type: \"icon\", value: Settings }}\n          endElement={{ type: \"suffix\", value: \"⌘S\" }}\n        />\n        <ListItem\n          label=\"Favorites\"\n          value=\"favorites\"\n          startElement={{ type: \"icon\", value: Favorite }}\n          endElement={{ type: \"suffix\", value: \"⌘F\" }}\n        />\n      </List>\n    </div>\n  ),\n  name: \"List item with end element\",\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Settings, Favorite }\n      }\n    }\n  }\n};\n\nexport const WithClickHandler: Story = {\n  render: function WithClickHandlerExample() {\n    const [clickCount, setClickCount] = useState(0);\n    const handleClick = useCallback(() => {\n      setClickCount(prev => prev + 1);\n    }, []);\n\n    return (\n      <div>\n        <p style={{ marginBottom: 16 }}>Click count: {clickCount}</p>\n        <List aria-label=\"Clickable list\">\n          <ListItem label=\"Click me!\" value=\"clickable\" onClick={handleClick} />\n        </List>\n      </div>\n    );\n  },\n  name: \"With click handler\"\n};\n\nexport const ReadOnly: Story = {\n  render: () => (\n    <List aria-label=\"Read-only list\">\n      <ListItem label=\"Editable item\" value=\"editable\" />\n      <ListItem label=\"Read-only item\" value=\"readonly\" readOnly />\n    </List>\n  ),\n  name: \"Read-only\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/List/legacy/List.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { Board } from \"@vibe/icons\";\nimport { ListItem, ListItemIcon, List, DialogContentContainer, Divider } from \"@vibe/core\";\nimport { Filter, Add } from \"@vibe/icons\";\nimport { Link, Tip, StorybookLink } from \"vibe-storybook-components\";\nimport { TipCheckYourself } from \"./List.stories.helpers\";\nimport * as ListStories from \"./List.stories\";\n\n<Meta of={ListStories} />\n\n# List\n\n<Tip title=\"New List Available\" emoji=\"🚀\">\n  A new List component is available with improved keyboard navigation, accessibility features, and a cleaner API. Check\n  out the <StorybookLink page=\"Components/List [New]\">new List component</StorybookLink>.\n</Tip>\n\nLists is a group of actionable items containing primary and supplemental actions, which are represented by icons and text.\n\n<Canvas of={ListStories.Overview} />\n\n### Import\n\n```js\nimport { List } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Use list component for display a list of navigable items in a column.\",\n    \"List purpose is usually allowing navigation in context to the navigable  content.\",\n    \"Your list items can be either in regular, selected or disabled state. You can control a list item's component state by its attributes.\"\n  ]}\n/>\n\n<TipCheckYourself />\n\n## Variants\n\n### List with categories\n\n<Canvas of={ListStories.ListWithCategories} />\n\n### List with icons\n\n<Canvas of={ListStories.ListWithIcons} />\n\n### List with avatars\n\n<Canvas of={ListStories.ListWithAvatars} />\n\n### List with virtualization optimization\n\nWhen you display a large number of items, you may want to render only the options shown at a given moment to allow better performance and a\nbetter user experience.\n\n<Canvas of={ListStories.ListWithVirtualizationOptimization} />\n\n<Tip>\n  While using virtualization optimization on your list component, please be aware your list needs to contain a constant\n  height and width for function properly\n</Tip>\n\n## Do's and Don'ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: (\n          <div>\n            <List>\n              <ListItem>\n                <ListItemIcon icon={Add} />\n                Add\n              </ListItem>\n              <ListItem>\n                <ListItemIcon icon={Filter} />\n                Filter\n              </ListItem>\n            </List>\n            <Divider />\n            <List>\n              <ListItem>\n                <ListItemIcon icon={Board} />\n                Board name\n              </ListItem>\n              <ListItem>\n                <ListItemIcon icon={Board} />\n                Board name\n              </ListItem>\n            </List>\n          </div>\n        ),\n        description: \"Use a list component to create a menu displayed on one of the various sections of your web page.\"\n      },\n      negative: {\n        component: (\n          <DialogContentContainer>\n            <List>\n              <ListItem>\n                <ListItemIcon icon={Add} />\n                Add\n              </ListItem>\n              <ListItem>\n                <ListItemIcon icon={Filter} />\n                Filter\n              </ListItem>\n            </List>\n            <Divider />\n            <List>\n              <ListItem>\n                <ListItemIcon icon={Board} />\n                Board name\n              </ListItem>\n              <ListItem>\n                <ListItemIcon icon={Board} />\n                Board name\n              </ListItem>\n            </List>\n          </DialogContentContainer>\n        ),\n        description: (\n          <>\n            Do not use the list to implement a menu displayed inside a dialog. See{\" \"}\n            <StorybookLink page=\"Components/Menu\">Menu</StorybookLink>.\n          </>\n        )\n      }\n    }\n  ]}\n/>\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Menu\", \"Tabs\", \"MultiStepIndicator\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/List/legacy/List.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const TipCheckYourself = () => (\n  <Tip title=\"Check yourself\">\n    For implementing a menu inside a dialog, please use our{\" \"}\n    <StorybookLink page=\"Components/Menu\" size=\"small\">\n      Menu\n    </StorybookLink>{\" \"}\n    component\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/List/legacy/List.stories.tsx",
    "content": "import React from \"react\";\nimport {\n  List,\n  ListItem,\n  ListItemIcon,\n  ListItemAvatar,\n  type ListProps,\n  Flex,\n  ListTitle,\n  DialogContentContainer\n} from \"@vibe/core\";\nimport { Board, Team, ThumbsUp } from \"@vibe/icons\";\nimport { useCallback } from \"react\";\nimport { StoryDescription } from \"vibe-storybook-components\";\nimport { createStoryMetaSettingsDecorator } from \"../../../../utils/createStoryMetaSettingsDecorator\";\nimport person1 from \"../../Avatar/assets/person1.png\";\nimport person2 from \"../../Avatar/assets/person2.png\";\nimport person3 from \"../../Avatar/assets/person3.png\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: List\n});\n\nexport default {\n  title: \"Components/List/List\",\n  component: List,\n  subcomponents: {\n    ListItem,\n    ListItemIcon,\n    ListItemAvatar\n  },\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n};\n\nconst listTemplate = (args: ListProps) => {\n  const onClick = useCallback(() => alert(\"On click!\"), []);\n  return (\n    <List {...args}>\n      <ListItem onClick={onClick}>Board Power up</ListItem>\n      <ListItem onClick={onClick}>Team Power up</ListItem>\n      <ListItem onClick={onClick}>Essentials</ListItem>\n    </List>\n  );\n};\n\nexport const Overview = {\n  render: listTemplate.bind({}),\n  name: \"Overview\",\n  args: {},\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const ListWithCategories = {\n  render: () => (\n    <List>\n      <ListTitle>First category</ListTitle>\n      <ListItem>List item 1</ListItem>\n      <ListItem>List item 2</ListItem>\n      <ListTitle>Second category</ListTitle>\n      <ListItem>List item 3</ListItem>\n      <ListItem>List item 4</ListItem>\n    </List>\n  )\n};\n\nexport const ListWithIcons = {\n  render: () => (\n    <List>\n      <ListItem id=\"list-1\">\n        <ListItemIcon icon={Board} />\n        List item 1\n      </ListItem>\n      <ListItem id=\"list-2\">\n        <ListItemIcon icon={Team} />\n        List item 2\n      </ListItem>\n      <ListItem id=\"list-3\">\n        <ListItemIcon icon={ThumbsUp} />\n        List item 3\n      </ListItem>\n    </List>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Board, Team, ThumbsUp }\n      }\n    }\n  }\n};\n\nexport const ListWithAvatars = {\n  render: () => (\n    <List>\n      <ListItem id=\"list-1\">\n        <ListItemAvatar src={person1} />\n        List item 1\n      </ListItem>\n      <ListItem id=\"list-2\">\n        <ListItemAvatar src={person2} />\n        List item 2\n      </ListItem>\n      <ListItem id=\"list-3\">\n        <ListItemAvatar src={person3} />\n        List item 3\n      </ListItem>\n    </List>\n  ),\n\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { person1, person2, person3 }\n      }\n    }\n  }\n};\n\nexport const ListWithVirtualizationOptimization = {\n  render: () => (\n    <Flex\n      align=\"start\"\n      gap=\"large\"\n      style={{\n        width: \"100%\"\n      }}\n      direction=\"column\"\n    >\n      <StoryDescription description=\"Regular\">\n        <DialogContentContainer\n          style={{\n            height: \"162px\",\n            width: \"200px\"\n          }}\n        >\n          <List\n            renderOnlyVisibleItems\n            style={{\n              height: \"100%\",\n              width: \"100%\"\n            }}\n          >\n            <ListItem>List item 1</ListItem>\n            <ListItem>List item 2</ListItem>\n            <ListItem>List item 3</ListItem>\n            <ListItem>List item 4</ListItem>\n            <ListItem>List item 5</ListItem>\n            <ListItem>List item 6</ListItem>\n            <ListItem>List item 7</ListItem>\n            <ListItem>List item 8</ListItem>\n            <ListItem>List item 9</ListItem>\n            <ListItem>List item 10</ListItem>\n            <ListItem>List item 11</ListItem>\n            <ListItem>List item 12</ListItem>\n          </List>\n        </DialogContentContainer>\n      </StoryDescription>\n      <StoryDescription description=\"With categories\">\n        <DialogContentContainer\n          style={{\n            height: \"159px\",\n            width: \"200px\"\n          }}\n        >\n          <List\n            renderOnlyVisibleItems\n            style={{\n              height: \"100%\",\n              width: \"100%\"\n            }}\n          >\n            <ListTitle>First category</ListTitle>\n            <ListItem>List item 1</ListItem>\n            <ListItem>List item 2</ListItem>\n            <ListTitle>Second category</ListTitle>\n            <ListItem>List item 3</ListItem>\n            <ListItem>List item 4</ListItem>\n            <ListItem>List item 5</ListItem>\n            <ListItem>List item 6</ListItem>\n            <ListItem>List item 7</ListItem>\n            <ListItem>List item 8</ListItem>\n            <ListItem>List item 9</ListItem>\n            <ListItem>List item 10</ListItem>\n            <ListItem>List item 11</ListItem>\n            <ListItem>List item 12</ListItem>\n          </List>\n        </DialogContentContainer>\n      </StoryDescription>\n    </Flex>\n  ),\n\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { StoryDescription }\n      }\n    }\n  }\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/List/legacy/ListItem.mdx",
    "content": "import { Canvas, Meta } from \"@storybook/blocks\";\nimport { Tip, StorybookLink } from \"vibe-storybook-components\";\nimport * as ListItemStories from \"./ListItem.stories\";\n\n<Meta of={ListItemStories} />\n\n# ListItem\n\n<Tip title=\"New ListItem Available\" emoji=\"🚀\">\n  This component is deprecated. A new ListItem component is available with a cleaner, data-driven API. Check out the{\" \"}\n  <StorybookLink page=\"Components/List [New]/ListItem\">new ListItem component</StorybookLink>.\n</Tip>\n\nAn item of a List component\n\n<Canvas of={ListItemStories.Overview} />\n\n### Import\n\n```js\nimport { ListItem, ListItemIcon, ListItemAvatar } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"List item can include an ListItemIcon or text.\",\n    \"List item icon should always be displayed before the item's text (left or right depending on the item's text language)\"\n  ]}\n/>\n\n## Variants\n\n### States\n\n<Canvas of={ListItemStories.States} />\n\n### Sizes\n\n<Canvas of={ListItemStories.Sizes} />\n\n### List item with an icon\n\n<Canvas of={ListItemStories.WithIcon} />\n\n### List item with an avatar\n\n<Canvas of={ListItemStories.WithAvatar} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/List/legacy/ListItem.stories.tsx",
    "content": "import React from \"react\";\nimport { createComponentTemplate } from \"vibe-storybook-components\";\nimport { ListItem, ListItemIcon, ListItemAvatar, Flex } from \"@vibe/core\";\nimport { createStoryMetaSettingsDecorator } from \"../../../../utils/createStoryMetaSettingsDecorator\";\nimport person1 from \"../../Avatar/assets/person1.png\";\nimport { Send } from \"@vibe/icons\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: ListItem\n});\n\nexport default {\n  title: \"Components/List/ListItem\",\n  component: ListItem,\n  subcomponents: {\n    ListItemIcon,\n    ListItemAvatar\n  },\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n};\n\nconst listItemTemplate = createComponentTemplate(ListItem);\n\nexport const Overview = {\n  render: listItemTemplate.bind({}),\n  name: \"Overview\",\n  args: { children: \"List item\" }\n};\n\nexport const States = {\n  render: () => (\n    <Flex>\n      <ListItem>Default state</ListItem>\n      <ListItem disabled>Disabled state</ListItem>\n      <ListItem selected>Selected state</ListItem>\n    </Flex>\n  ),\n\n  name: \"States\"\n};\n\nexport const Sizes = {\n  render: () => (\n    <Flex>\n      <ListItem size=\"small\">Small item</ListItem>\n      <ListItem size=\"medium\">Medium item</ListItem>\n      <ListItem size=\"large\">Large item</ListItem>\n    </Flex>\n  ),\n\n  name: \"Sizes\"\n};\n\nexport const WithIcon = {\n  render: () => (\n    <Flex>\n      <ListItem>\n        <ListItemIcon icon={Send} />\n        Productivity\n      </ListItem>\n    </Flex>\n  ),\n\n  name: \"List item with an icon\"\n};\n\nexport const WithAvatar = {\n  render: () => (\n    <ListItem>\n      <ListItemAvatar src={person1} />\n      Sophia Johnson\n    </ListItem>\n  ),\n\n  name: \"List item with an avatar\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Loader/Loader.mdx",
    "content": "import { Loader, Flex, Heading } from \"@vibe/core\";\nimport { Meta } from \"@storybook/blocks\";\nimport { ComponentRules, UsageGuidelines, Tip } from \"vibe-storybook-components\";\nimport { TipSkeleton } from \"./Loader.stories.helpers\";\nimport * as LoaderStories from \"./Loader.stories\";\n\n<Meta of={LoaderStories} />\n\n# Loader\n\nCircular loader indicates to user waiting state.\n\n<Canvas of={LoaderStories.Overview} />\n\n### Import\n\n```js\nimport { Loader } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Use this loader to load small parts of the system, not the whole pages.\",\n    \"Use sizes of loader in context to its position. The bigger the loading area gets, the bigger loader should be used.\",\n    \"Always place loader in context to the loading content.\"\n  ]}\n/>\n\n<TipSkeleton />\n\n## Variants\n\n### Size variants\n\n<Canvas of={LoaderStories.SizeVariants} />\n\n### Color variants\n\n<Canvas of={LoaderStories.ColorVariants} />\n\n### Custom colors\n\nIf there is a need for color customization, css `color` attribute of a parent component can be used.\n\n<Canvas of={LoaderStories.CustomColors} />\n\n### Visual variants\n\n<Canvas of={LoaderStories.VisualVariants} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: (\n          <Flex direction=\"row\" gap=\"medium\">\n            <Heading>H1 heading component</Heading>\n            <Loader size=\"small\" hasBackground />\n          </Flex>\n        ),\n        description: \"Place loader in context to the loading content and keep its size proportional to the content.\"\n      },\n      negative: {\n        component: (\n          <Flex direction=\"row\" gap=\"medium\">\n            <Heading>H1 heading component</Heading>\n            <Loader size=\"large\" hasBackground />\n          </Flex>\n        ),\n        description: \"Don’t leave the size visually unmaintained.\"\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### Loader in text field\n\nUse loader in search field while filtering results.\n\n<Canvas of={LoaderStories.LoaderInTextField} />\n\n### Loader in button\n\nIndicate the loading status in button if content or an action is loading.\n\n<Canvas of={LoaderStories.LoaderInButton} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Skeleton\", \"ProgressBar\", \"Button\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Loader/Loader.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const TipSkeleton = () => (\n  <Tip>\n    While loading content consider using{\" \"}\n    <StorybookLink page=\"Components/Skeleton\" size=\"small\">\n      Skeleton loading\n    </StorybookLink>\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/Loader/Loader.stories.tsx",
    "content": "import React, { useCallback, useState } from \"react\";\nimport { Loader, type LoaderProps, Button, DialogContentContainer, Flex, Search, Text } from \"@vibe/core\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { type Meta, type StoryObj } from \"@storybook/react\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: Loader\n});\n\nexport default {\n  title: \"Components/Loader\",\n  component: Loader,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n} satisfies Meta<typeof Loader>;\n\ntype Story = StoryObj<typeof Loader>;\n\nexport const Overview: Story = {\n  render: (args: LoaderProps) => <Loader id=\"overview-loader\" size=\"medium\" {...args} />,\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const SizeVariants: Story = {\n  render: () => (\n    <Flex align=\"start\" gap={60}>\n      <Flex direction=\"column\" gap=\"small\">\n        <Text type=\"text1\" weight=\"medium\">\n          Xs\n        </Text>\n        <Loader id=\"loader-xs\" size=\"xs\" />\n      </Flex>\n      <Flex direction=\"column\" gap=\"small\">\n        <Text type=\"text1\" weight=\"medium\">\n          Small\n        </Text>\n        <Loader id=\"loader-small\" size=\"small\" />\n      </Flex>\n      <Flex direction=\"column\" gap=\"small\">\n        <Text type=\"text1\" weight=\"medium\">\n          Medium\n        </Text>\n        <Loader id=\"loader-medium\" size=\"medium\" />\n      </Flex>\n      <Flex direction=\"column\" gap=\"small\">\n        <Text type=\"text1\" weight=\"medium\">\n          Large\n        </Text>\n        <Loader id=\"loader-large\" size=\"large\" />\n      </Flex>\n    </Flex>\n  ),\n  name: \"Size variants\"\n};\n\nexport const ColorVariants: Story = {\n  render: () => (\n    <Flex direction=\"row\" gap={60}>\n      <Flex direction=\"column\" gap=\"small\">\n        <Text type=\"text1\" weight=\"medium\">\n          Primary\n        </Text>\n        <Loader id=\"loader-primary\" size=\"medium\" color=\"primary\" />\n      </Flex>\n      <Flex direction=\"column\" gap=\"small\">\n        <Text type=\"text1\" weight=\"medium\">\n          Secondary\n        </Text>\n        <Loader id=\"loader-secondary\" size=\"medium\" color=\"secondary\" />\n      </Flex>\n      <Flex direction=\"column\" gap=\"small\">\n        <Text type=\"text1\" weight=\"medium\">\n          Dark\n        </Text>\n        <Loader id=\"loader-dark\" size=\"medium\" color=\"dark\" />\n      </Flex>\n      <Flex direction=\"column\" gap=\"small\">\n        <Text type=\"text1\" weight=\"medium\">\n          OnPrimary\n        </Text>\n        <Flex direction=\"row\">\n          <div style={{ background: \"var(--sb-primary-text-color)\", padding: \"var(--space-4)\" }}>\n            <Loader id=\"loader-on-primary\" size=\"medium\" color=\"onPrimary\" />\n          </div>\n          <div style={{ background: \"var(--sb-negative-color)\", padding: \"var(--space-4)\" }}>\n            <Loader id=\"loader-on-negative\" size=\"medium\" color=\"onPrimary\" />\n          </div>\n          <div style={{ background: \"var(--sb-positive-color)\", padding: \"var(--space-4)\" }}>\n            <Loader id=\"loader-on-positive\" size=\"medium\" color=\"onPrimary\" />\n          </div>\n          <div style={{ background: \"var(--sb-primary-color)\", padding: \"var(--space-4)\" }}>\n            <Loader id=\"loader-on-primary-color\" size=\"medium\" color=\"onPrimary\" />\n          </div>\n        </Flex>\n      </Flex>\n    </Flex>\n  ),\n\n  name: \"Color variants\"\n};\n\nexport const CustomColors: Story = {\n  render: () => (\n    <div\n      style={{\n        color: \"var(--color-dark-red)\"\n      }}\n    >\n      <Loader id=\"loader-custom-color\" size=\"medium\" />\n    </div>\n  ),\n\n  name: \"Custom colors\"\n};\n\nexport const VisualVariants: Story = {\n  render: () => (\n    <Flex direction=\"row\" gap=\"large\">\n      <Flex direction=\"column\" gap=\"small\">\n        <Text type=\"text1\" weight=\"medium\">\n          Casual\n        </Text>\n        <div>\n          <Loader id=\"loader-casual\" size=\"medium\" />\n        </div>\n      </Flex>\n      <Flex direction=\"column\" gap=\"small\">\n        <Text type=\"text1\" weight=\"medium\">\n          With background\n        </Text>\n        <div>\n          <Loader id=\"loader-with-background\" size=\"medium\" hasBackground />\n        </div>\n      </Flex>\n    </Flex>\n  ),\n\n  name: \"Visual variants\"\n};\n\nexport const LoaderInTextField: Story = {\n  render: () => (\n    <DialogContentContainer>\n      <Search loading placeholder=\"Board name\" />\n    </DialogContentContainer>\n  ),\n  parameters: {\n    chromatic: {\n      pauseAnimationAtEnd: true\n    }\n  },\n\n  name: \"Loader in text field\"\n};\n\nexport const LoaderInButton: Story = {\n  render: () => {\n    const [loading, setLoading] = useState(false);\n\n    const onClick = useCallback(() => {\n      setLoading(true);\n    }, [setLoading]);\n\n    return (\n      <Button loading={loading} onClick={onClick}>\n        Click here for loading\n      </Button>\n    );\n  },\n\n  name: \"Loader in button\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Menu/Menu.interactions.ts",
    "content": "import { userEvent, within } from \"@storybook/test\";\nimport {\n  getByRole,\n  getByText,\n  clickElement,\n  waitForElementVisible,\n  interactionSuite,\n  expectActiveElementToHavePartialText,\n  pressNavigationKey,\n  NavigationCommand,\n  resetFocus\n} from \"@vibe/core/interactionsTests\";\nimport { expect } from \"@storybook/jest\";\n\nconst TWO_DEPTHS_MENU_TEXTS = {\n  TOP_MENU_SUB_MENU_ITEM: \"With Sub menu\",\n  SUB_MENU_ITEM: \"Sub Sub menu\",\n  SUB_SUB_MENU_ITEM: \"Sub sub item\",\n  TOP_MENU_NON_SUB_MENU_ITEM: \"Another item\"\n};\n\nconst HIDDEN_ELEMENT_SELECTOR = \"[aria-hidden]\";\n\nconst showSubSubMenusOnHover = async canvas => {\n  const menuElement = getMenuElement(canvas);\n\n  const topMenuItem = getByText(menuElement, TWO_DEPTHS_MENU_TEXTS.TOP_MENU_SUB_MENU_ITEM, {\n    ignore: HIDDEN_ELEMENT_SELECTOR\n  });\n  await userEvent.hover(topMenuItem);\n\n  const innerMenuItem = getByText(menuElement, TWO_DEPTHS_MENU_TEXTS.SUB_MENU_ITEM, {\n    ignore: HIDDEN_ELEMENT_SELECTOR\n  });\n  await userEvent.hover(innerMenuItem);\n\n  // validate showing sub sub item\n  const optionToSelect = await waitForElementVisible(() =>\n    within(menuElement).findByText(TWO_DEPTHS_MENU_TEXTS.SUB_SUB_MENU_ITEM, { ignore: HIDDEN_ELEMENT_SELECTOR })\n  );\n  await clickElement(optionToSelect);\n  expect(document.activeElement).toHaveTextContent(TWO_DEPTHS_MENU_TEXTS.SUB_SUB_MENU_ITEM);\n\n  //close the sub-menus on hovering the top-level menu\n  await userEvent.hover(\n    getByText(menuElement, TWO_DEPTHS_MENU_TEXTS.TOP_MENU_NON_SUB_MENU_ITEM, { ignore: HIDDEN_ELEMENT_SELECTOR })\n  );\n  expect(\n    canvas.queryByText(TWO_DEPTHS_MENU_TEXTS.SUB_MENU_ITEM, { ignore: HIDDEN_ELEMENT_SELECTOR })\n  ).not.toBeInTheDocument();\n  expect(\n    canvas.queryByText(TWO_DEPTHS_MENU_TEXTS.SUB_SUB_MENU_ITEM, { ignore: HIDDEN_ELEMENT_SELECTOR })\n  ).not.toBeInTheDocument();\n};\n\nconst showSubSubMenusWithKeyboard = async canvas => {\n  const menuElement = getMenuElement(canvas);\n\n  //set the initial focus, to make the keyboard events work\n  const topMenuItem = getByText(menuElement, TWO_DEPTHS_MENU_TEXTS.TOP_MENU_SUB_MENU_ITEM, {\n    ignore: HIDDEN_ELEMENT_SELECTOR\n  });\n  await userEvent.click(topMenuItem);\n\n  //open sub menu\n  await pressNavigationKey(NavigationCommand.DOWN_ARROW);\n  await pressNavigationKey(NavigationCommand.DOWN_ARROW);\n  await pressNavigationKey(NavigationCommand.RIGHT_ARROW);\n  await waitForElementVisible(() =>\n    within(menuElement).findByText(new RegExp(`^${TWO_DEPTHS_MENU_TEXTS.SUB_MENU_ITEM}$`), {\n      ignore: HIDDEN_ELEMENT_SELECTOR\n    })\n  );\n  expectActiveElementToHavePartialText(TWO_DEPTHS_MENU_TEXTS.SUB_MENU_ITEM);\n\n  //open sub sub menu\n  await pressNavigationKey(NavigationCommand.DOWN_ARROW);\n  await pressNavigationKey(NavigationCommand.DOWN_ARROW);\n  await pressNavigationKey(NavigationCommand.RIGHT_ARROW);\n  await waitForElementVisible(() =>\n    within(menuElement).findByText(new RegExp(`^${TWO_DEPTHS_MENU_TEXTS.SUB_SUB_MENU_ITEM}$`), {\n      ignore: HIDDEN_ELEMENT_SELECTOR\n    })\n  );\n  expectActiveElementToHavePartialText(TWO_DEPTHS_MENU_TEXTS.SUB_SUB_MENU_ITEM);\n\n  //close sub-sub-menu - using left arrow\n  await pressNavigationKey(NavigationCommand.LEFT_ARROW);\n  expect(\n    canvas.queryByText(menuElement, TWO_DEPTHS_MENU_TEXTS.SUB_SUB_MENU_ITEM, { ignore: HIDDEN_ELEMENT_SELECTOR })\n  ).not.toBeInTheDocument();\n  expectActiveElementToHavePartialText(TWO_DEPTHS_MENU_TEXTS.SUB_MENU_ITEM);\n\n  //close sub-menu - using escape\n  await userEvent.keyboard(\"{escape}\");\n  expect(canvas.queryByText(menuElement, TWO_DEPTHS_MENU_TEXTS.SUB_MENU_ITEM)).not.toBeInTheDocument();\n  expectActiveElementToHavePartialText(TWO_DEPTHS_MENU_TEXTS.TOP_MENU_SUB_MENU_ITEM);\n};\n\nexport const menuWithTwoDepthsSuite = interactionSuite({\n  tests: [showSubSubMenusOnHover, showSubSubMenusWithKeyboard],\n  afterEach: async () => {\n    await resetFocus();\n  }\n});\n\nfunction getMenuElement(canvas) {\n  return getByRole(canvas, \"menu\");\n}\n"
  },
  {
    "path": "packages/docs/src/pages/components/Menu/Menu.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport {\n  ComponentRuleDefaultWidth,\n  ComponentRuleLargeWidth,\n  ComponentRuleSimpleActions,\n  ComponentRuleWithSearch,\n  TipCombobox\n} from \"./Menu.stories.helpers\";\nimport * as MenuStories from \"./Menu.stories\";\n\n<Meta of={MenuStories} />\n\n# Menu\n\nA menu is a navigable contextual list of items that can be selected.\n\n<Canvas of={MenuStories.Overview} />\n\n### Import\n\n```js\nimport { Menu } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"A menu offers a list of actions or functions that a user can access.\",\n    \"Menu height is dynamic according to the content it contains and its location on the screen.\",\n    \"Closing menus can be done by selecting a value or clicking any where outside the menu.\",\n    \"Menu items can include icons, radio buttons, and checkboxes.\",\n    \"If a menu dropdown contains a mix of links and buttons, separate them with a content divider with links at the top and buttons at the bottom.\",\n    \"Menu should contains at least two menu items.\"\n  ]}\n/>\n\n<TipCombobox />\n\n## Accessibility\n\n<UsageGuidelines\n  guidelines={[\n    <>\n      Provide an <code>id</code> for the Menu to enable proper accessibility associations and unique identification.\n    </>,\n    <>\n      Use the <code>ariaLabel</code> prop to provide a meaningful accessible name for the menu that describes its\n      purpose (e.g., \"Navigation menu\", \"Actions menu\", \"Options menu\").\n    </>,\n    <>\n      Use the <code>ariaDescribedBy</code> prop to link the menu to additional descriptive text by providing the{\" \"}\n      <code>id</code> of the descriptive element.\n    </>,\n    <>\n      It is recommended to use <code>focusItemIndexOnMount={0}</code> to focus the first menu item when the menu opens.\n    </>,\n    <>\n      Ensure menu items have clear, descriptive text or use appropriate <code>ariaLabel</code> props on individual menu\n      items for icon-only items.\n    </>\n  ]}\n/>\n\n## Variants\n\n### Sizes\n\n<Canvas of={MenuStories.Sizes} />\n\n### Menu with icons\n\n<Canvas of={MenuStories.MenuWithIcons} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: <ComponentRuleSimpleActions />,\n        description: \"Use menus for simple actions.\"\n      },\n      negative: {\n        component: <ComponentRuleWithSearch />,\n        description: (\n          <>\n            Don’t place a search component near to menu for implement a filter capability. See{\" \"}\n            <StorybookLink page=\"Components/Combobox\">Combobox.</StorybookLink>\n          </>\n        )\n      }\n    },\n    {\n      positive: {\n        component: <ComponentRuleDefaultWidth />,\n        description: \"Keep to the default menu width.\"\n      },\n      negative: {\n        component: <ComponentRuleLargeWidth />,\n        description: \"Don’t change the width of the menu, only change the height.\"\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### Menu with sub menu\n\n<Canvas of={MenuStories.MenuWithSubMenu} />\n\n### Menu with 2-depth sub menu\n\n<Canvas of={MenuStories.MenuWith2DepthSubMenu} />\n\n### Menu with grid items and sub menu\n\nGrid menu items are navigable with a keyboard as well\n\n<Canvas of={MenuStories.MenuWithGridItemsAndSubMenu} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Combobox\", \"Dropdown\", \"SplitButton\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Menu/Menu.stories.helpers.tsx",
    "content": "import { StorybookLink, Tip } from \"vibe-storybook-components\";\nimport { DialogContentContainer, Menu, MenuItem, Search } from \"@vibe/core\";\nimport { Calendar, Filter, Wand } from \"@vibe/icons\";\nimport React from \"react\";\n\nexport const TipCombobox = () => (\n  <Tip>\n    Need to place a search field to filter results? Use the{\" \"}\n    <StorybookLink size=\"small\" page=\"Components/Combobox\">\n      Combobox\n    </StorybookLink>{\" \"}\n    component instead\n  </Tip>\n);\n\nexport const ComponentRuleSimpleActions = () => (\n  <DialogContentContainer>\n    <Menu>\n      <MenuItem title=\"Item 1\" icon={Calendar} />\n      <MenuItem title=\"Item 2\" icon={Wand} />\n      <MenuItem title=\"Item 3\" icon={Filter} />\n    </Menu>\n  </DialogContentContainer>\n);\n\nexport const ComponentRuleWithSearch = () => (\n  <DialogContentContainer>\n    <div style={{ marginBottom: \"var(--sb-spacing-small)\" }}>\n      <Search size=\"small\" />\n    </div>\n    <Menu>\n      <MenuItem title=\"Item 1\" icon={Calendar} />\n      <MenuItem title=\"Item 2\" icon={Wand} />\n      <MenuItem title=\"Item 3\" icon={Filter} />\n    </Menu>\n  </DialogContentContainer>\n);\n\nexport const ComponentRuleDefaultWidth = () => (\n  <DialogContentContainer>\n    <Menu>\n      <MenuItem title=\"Item 1\" icon={Calendar} />\n      <MenuItem title=\"Item 2\" icon={Filter} />\n    </Menu>\n  </DialogContentContainer>\n);\n\nexport const ComponentRuleLargeWidth = () => (\n  <DialogContentContainer style={{ width: \"348px\" }}>\n    <Menu>\n      <MenuItem title=\"Item 1\" icon={Calendar} />\n      <MenuItem title=\"Item 2\" icon={Filter} />\n    </Menu>\n  </DialogContentContainer>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/Menu/Menu.stories.tsx",
    "content": "import React from \"react\";\nimport { Activity, Code, Delete, Email, Emoji, Favorite, Feedback, Info, Invite, Settings } from \"@vibe/icons\";\nimport { DialogContentContainer, Flex, Menu, MenuDivider, MenuGridItem, MenuItem, MenuTitle } from \"@vibe/core\";\nimport { DummyNavigableGrid } from \"../GridKeyboardNavigationContext/useGridKeyboardNavigationContext.stories.helpers\";\nimport { menuWithTwoDepthsSuite } from \"./Menu.interactions\";\nimport { type MenuProps } from \"@vibe/core\";\n\nexport default {\n  title: \"Components/Menu/Menu\",\n  component: Menu\n};\n\nconst menuTemplate = (args: MenuProps) => (\n  <Menu {...args}>\n    <MenuItem title=\"Menu item 1\" />\n    <MenuItem title=\"Menu item 2\" disabled />\n    <MenuItem title=\"Menu item 3\" />\n  </Menu>\n);\n\nexport const Overview = {\n  render: menuTemplate.bind({}),\n  name: \"Overview\",\n  args: {},\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const Sizes = {\n  render: () => [\n    <Flex gap=\"medium\">\n      <DialogContentContainer key=\"small\">\n        <Menu size=\"small\">\n          <MenuTitle caption=\"Small menu\" />\n          <MenuDivider />\n          <MenuItem title=\"Menu item 1\" />\n          <MenuItem title=\"Menu item 2\" disabled />\n          <MenuItem title=\"Menu item 3\" />\n        </Menu>\n      </DialogContentContainer>\n      <DialogContentContainer key=\"md\">\n        <Menu size=\"medium\">\n          <MenuTitle caption=\"Medium menu\" />\n          <MenuDivider />\n          <MenuItem title=\"Menu item 1\" />\n          <MenuItem title=\"Menu item 2\" disabled />\n          <MenuItem title=\"Menu item 3\" />\n        </Menu>\n      </DialogContentContainer>\n      <DialogContentContainer key=\"lg\">\n        <Menu size=\"large\">\n          <MenuTitle caption=\"Large menu\" />\n          <MenuDivider />\n          <MenuItem title=\"Menu item 1\" />\n          <MenuItem title=\"Menu item 2\" disabled />\n          <MenuItem title=\"Menu item 3\" />\n        </Menu>\n      </DialogContentContainer>\n    </Flex>\n  ],\n  name: \"Sizes\",\n\n  args: {\n    size: \"small\"\n  }\n};\n\nexport const MenuWithIcons = {\n  render: () => (\n    <Flex>\n      <DialogContentContainer>\n        <Menu>\n          <MenuItem icon={Email} title=\"Send\" />\n          <MenuItem icon={Delete} title=\"Delete\" disabled />\n          <MenuItem icon={Info} title=\"More info\" />\n        </Menu>\n      </DialogContentContainer>\n    </Flex>\n  ),\n  name: \"Menu with icons\"\n};\n\nexport const MenuWithSubMenu = {\n  render: () => (\n    <Flex>\n      <DialogContentContainer>\n        <Menu>\n          <MenuItem title=\"Menu item without sub menu\" icon={Activity} />\n          <MenuItem title=\"With Sub menu\" icon={Activity}>\n            <Menu>\n              <MenuItem icon={Email} title=\"Send\" />\n              <MenuItem icon={Delete} title=\"Delete\" disabled />\n              <MenuItem icon={Info} title=\"More info\" />\n            </Menu>\n          </MenuItem>\n          <MenuItem title=\"Another item\" icon={Settings} />\n        </Menu>\n      </DialogContentContainer>\n    </Flex>\n  ),\n  name: \"Menu with sub menu\"\n};\n\nexport const MenuWithGridItemsAndSubMenu = {\n  render: () => (\n    <Flex align=\"start\" style={{ height: \"500px\" }}>\n      <DialogContentContainer>\n        <Menu>\n          <MenuItem title=\"Menu item\" icon={Favorite} />\n          <MenuTitle caption=\"Top level grid item\" />\n          <MenuItem title=\"With Sub menu\" icon={Activity}>\n            <Menu>\n              <MenuItem icon={Feedback} title=\"More info\" />\n              <MenuTitle caption=\"1st level grid item\" />\n              <MenuGridItem>\n                <DummyNavigableGrid itemsCount={6} numberOfItemsInLine={3} withoutBorder />\n              </MenuGridItem>\n              <MenuItem icon={Code} title=\"With Sub menu\">\n                <Menu>\n                  <MenuTitle caption=\"2nd level grid item\" />\n                  <MenuGridItem>\n                    <DummyNavigableGrid itemsCount={6} numberOfItemsInLine={3} withoutBorder />\n                  </MenuGridItem>\n                  <MenuItem icon={Invite} title=\"Another sub sub item\" />\n                  <MenuItem icon={Settings} title=\"More sub sub items\" />\n                </Menu>\n              </MenuItem>\n            </Menu>\n          </MenuItem>\n          <MenuItem title=\"Another item\" icon={Settings} />\n        </Menu>\n      </DialogContentContainer>\n    </Flex>\n  ),\n  name: \"Menu with grid items and sub menu\"\n};\n\nexport const MenuWith2DepthSubMenu = {\n  render: () => (\n    <Flex>\n      <DialogContentContainer>\n        <Menu>\n          <MenuItem title=\"Menu item\" icon={Favorite} />\n          <MenuItem title=\"With Sub menu\" icon={Activity}>\n            <Menu>\n              <MenuItem icon={Emoji} title=\"Send\" />\n              <MenuItem icon={Code} title=\"Sub Sub menu\">\n                <Menu>\n                  <MenuItem icon={Email} title=\"Sub sub item\" />\n                  <MenuItem icon={Invite} title=\"Another sub sub item\" />\n                  <MenuItem icon={Settings} title=\"More sub sub items\" />\n                </Menu>\n              </MenuItem>\n              <MenuItem icon={Feedback} title=\"More info\" />\n            </Menu>\n          </MenuItem>\n          <MenuItem title=\"Another item\" icon={Settings} />\n        </Menu>\n      </DialogContentContainer>\n    </Flex>\n  ),\n  name: \"Menu with 2-depth sub menu\",\n  play: menuWithTwoDepthsSuite\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Menu/MenuDivider.mdx",
    "content": "import { Canvas, Meta } from \"@storybook/blocks\";\nimport * as MenuDividerStories from \"./MenuDivider.stories\";\n\n<Meta of={MenuDividerStories} />\n\n# Menu Divider\n\nUse menu divider for create separation between to menu items inside a menu\n\n<Canvas of={MenuDividerStories.Overview} />\n\n### Import\n\n```js\nimport { MenuDivider } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Use cases and examples\n\n### Menu with divider\n\n<Canvas of={MenuDividerStories.MenuWithDivider} />\n\n### Sub menu with divider\n\n<Canvas of={MenuDividerStories.SubMenuWithDivider} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Menu/MenuDivider.stories.tsx",
    "content": "import React from \"react\";\nimport { MenuDivider, Menu, MenuItem } from \"@vibe/core\";\nimport { createComponentTemplate } from \"vibe-storybook-components\";\n\nexport default {\n  title: \"Components/Menu/MenuDivider\",\n  component: MenuDivider\n};\n\nconst menuDividerTemplate = createComponentTemplate(MenuDivider);\n\nexport const Overview = {\n  render: menuDividerTemplate.bind({}),\n  name: \"Overview\"\n};\n\nexport const MenuWithDivider = {\n  render: () => (\n    <div\n      style={{\n        width: 200\n      }}\n    >\n      <Menu>\n        <MenuItem title=\"Menu item 1\" />\n        <MenuDivider />\n        <MenuItem title=\"Menu item 2\" />\n      </Menu>\n    </div>\n  ),\n\n  name: \"Menu with divider\"\n};\n\nexport const SubMenuWithDivider = {\n  render: () => (\n    <div\n      style={{\n        width: 200,\n        height: 90\n      }}\n    >\n      <Menu>\n        <MenuItem title=\"Item with sub menu\">\n          <Menu>\n            <MenuItem title=\"Item 1\" />\n            <MenuDivider />\n            <MenuItem title=\"Item 2\" />\n          </Menu>\n        </MenuItem>\n      </Menu>\n    </div>\n  ),\n\n  name: \"Sub menu with divider\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Menu/MenuGridItem.mdx",
    "content": "import { Canvas, Meta } from \"@storybook/blocks\";\nimport { TipOtherMenuItemComponents } from \"./MenuGridItem.stories.helpers\";\nimport * as MenuGridItemStories from \"./MenuGridItem.stories\";\n\n<Meta of={MenuGridItemStories} />\n\n# MenuGridItem\n\n<code>MenuGridItem</code> can be used to place a grid-like, keyboard navigable container, inside a Menu. The user will be\nable to interact and navigate into and from the grid in a natural way.\n\n<Canvas of={MenuGridItemStories.Overview} />\n\n## Props\n\nSince <code>MenuGridItem</code> should be used only inside a <code>Menu</code>, almost all of the props below will be supplied automatically by the wrapping <code>Menu</code>.\n\n### Import\n\n```js\nimport { MenuGridItem } from \"@vibe/core\";\n```\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"MenuGridItem should always be used inside a Menu component\",\n    \"A MenuGridItem can only have a single child\",\n    \"The child of MenuGridItem should use the useGridKeyboardNavigation hook\",\n    \"The child should use forwardRef, and have the same referenced element for useGridKeyboardNavigation.\",\n    <>\n      Also, the referenced element should have a <code>tabIndex</code> value (probably -1).\n    </>,\n    <>\n      MenuGridItem will pass the <code>disabled</code> prop to the child. The child should handle this prop and disable\n      interactions.\n    </>,\n    <>\n      To support a \"disabled\" mode, the child must have a prop named <code>disabled</code> (it will be automatically\n      detected).\n    </>,\n    <>\n      NOTE: Due to technical limitations, <code>useDocumentEventListeners</code> is not fully supported.\n    </>\n  ]}\n/>\n\n<TipOtherMenuItemComponents />\n\n## Use cases and examples\n\n### With disabled states\n\nDisabled items will be \"skipped\" when using keyboard navigation. Try it for yourself!\n\n<Canvas of={MenuGridItemStories.WithDisabledStates} />\n\n### Inside sub-menus\n\nKeyboard navigation is also supported in sub-menus\n\n<Canvas of={MenuGridItemStories.InsideSubMenus} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Menu\", \"MenuButton\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Menu/MenuGridItem.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { Tip } from \"vibe-storybook-components\";\n\n// TODO add links to the components mentioned in the tip\nexport const TipOtherMenuItemComponents = () => (\n  <Tip title=\"Looking for a single button in a menu?\">\n    Check the <code>MenuItem</code> or <code>MenuItemButton</code> components\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/Menu/MenuGridItem.stories.scss",
    "content": ".storybook-menu-grid-item-long-story {\n  height: 500px;\n}\n"
  },
  {
    "path": "packages/docs/src/pages/components/Menu/MenuGridItem.stories.tsx",
    "content": "import React from \"react\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { DialogContentContainer, Menu, MenuItem, MenuTitle, MenuGridItem, type MenuGridItemProps } from \"@vibe/core\";\nimport { DummyNavigableGrid } from \"../GridKeyboardNavigationContext/useGridKeyboardNavigationContext.stories.helpers\";\nimport { Activity, Code, Favorite, Feedback, Invite, Settings } from \"@vibe/icons\";\nimport \"./MenuGridItem.stories.scss\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: MenuGridItem\n});\n\nexport default {\n  title: \"Components/Menu/MenuGridItem\",\n  component: MenuGridItem,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n};\n\nconst menuGridItemTemplate = (args: MenuGridItemProps) => (\n  <Menu>\n    <MenuItem title=\"This is a menu button\" />\n    <MenuTitle caption=\"Try keyboard navigation :)\" />\n    <MenuGridItem {...args}>\n      <DummyNavigableGrid itemsCount={8} numberOfItemsInLine={3} withoutBorder />\n    </MenuGridItem>\n  </Menu>\n);\n\nexport const Overview = {\n  render: menuGridItemTemplate.bind({}),\n  name: \"Overview\"\n};\n\nexport const WithDisabledStates = {\n  render: () => (\n    <DialogContentContainer>\n      <Menu>\n        <MenuTitle caption=\"This grid has disabled items\" />\n        <MenuGridItem>\n          <DummyNavigableGrid itemsCount={4} numberOfItemsInLine={2} disabledIndexes={[2]} withoutBorder />\n        </MenuGridItem>\n        <MenuItem title=\"I'm a regular item\" />\n        <MenuTitle caption=\"The grid below is disabled entirely\" />\n        <MenuGridItem disabled>\n          <DummyNavigableGrid itemsCount={4} numberOfItemsInLine={2} withoutBorder />\n        </MenuGridItem>\n      </Menu>\n    </DialogContentContainer>\n  ),\n  name: \"With disabled states\"\n};\n\nexport const InsideSubMenus = {\n  render: () => (\n    <div className=\"storybook-menu-grid-item-long-story\">\n      <DialogContentContainer>\n        <Menu>\n          <MenuItem title=\"Menu item\" icon={Favorite} />\n          <MenuTitle caption=\"Top level grid item\" />\n          <MenuItem title=\"Hover me to see the sub menu\" icon={Activity}>\n            <Menu>\n              <MenuItem icon={Feedback} title=\"More info\" />\n              <MenuTitle caption=\"1st level grid item\" />\n              <MenuGridItem>\n                <DummyNavigableGrid itemsCount={6} numberOfItemsInLine={3} withoutBorder />\n              </MenuGridItem>\n              <MenuItem icon={Code} title=\"Hover me to see the sub menu\">\n                <Menu>\n                  <MenuTitle caption=\"2nd level grid item\" />\n                  <MenuGridItem>\n                    <DummyNavigableGrid itemsCount={6} numberOfItemsInLine={3} withoutBorder />\n                  </MenuGridItem>\n                  <MenuItem icon={Invite} title=\"Another sub sub item\" />\n                  <MenuItem icon={Settings} title=\"More sub sub items\" />\n                </Menu>\n              </MenuItem>\n            </Menu>\n          </MenuItem>\n          <MenuItem title=\"Another item\" icon={Settings} />\n        </Menu>\n      </DialogContentContainer>\n    </div>\n  ),\n  name: \"Inside sub-menus\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Menu/MenuItem.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { ComponentRuleWithLabelDo, ComponentRuleWithLabelDont } from \"./MenuItem.stories.helpers\";\nimport * as MenuItemStories from \"./MenuItem.stories\";\n\n<Meta of={MenuItemStories} />\n\n# Menu Item\n\nUse menu item for drawing one options that displayed inside a menu.\n\n<Canvas of={MenuItemStories.Overview} />\n\n### Import\n\n```js\nimport { MenuItem } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Accessibility\n\n<UsageGuidelines\n  guidelines={[\n    <>\n      Use the <code>aria-label</code> prop when you need to provide a custom accessible name that differs from the\n      visible title text, especially for icon-only menu items.\n    </>,\n    <>\n      For menu items with submenus, ensure the submenu content is properly structured with descriptive menu item titles\n      for clear navigation hierarchy.\n    </>,\n    <>\n      Use the <code>disabled</code> prop appropriately with a <code>disableReason</code> to provide context for why a\n      menu item cannot be selected.\n    </>\n  ]}\n/>\n\n## Variants\n\n### States\n\n<Canvas of={MenuItemStories.States} />\n\n### Icons\n\n<Canvas of={MenuItemStories.Icons} />\n\n### Label\n\n<Canvas of={MenuItemStories.Label} />\n\n### SubMenu\n\n<Canvas of={MenuItemStories.SubMenu} />\n\n### Overflow\n\n<Canvas of={MenuItemStories.Overflow} />\n\n### Tooltips\n\n<Canvas of={MenuItemStories.TooltipStory} />\n\n## Do's and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: ComponentRuleWithLabelDo(),\n        description: \"Keep the label text in the menu item short and informative. Use 1 word only.\"\n      },\n      negative: {\n        component: ComponentRuleWithLabelDont(),\n        description: \"Dont use long text with more than 1 word, to ensure clarity and to avoid ellipsis.\"\n      }\n    }\n  ]}\n/>\n"
  },
  {
    "path": "packages/docs/src/pages/components/Menu/MenuItem.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { DialogContentContainer, Menu, MenuItem } from \"@vibe/core\";\n\nexport const ComponentRuleWithLabelDo = () => (\n  <DialogContentContainer>\n    <Menu>\n      <MenuItem title=\"Menu item 1\" label=\"New\" />\n      <MenuItem title=\"Menu item 2\" />\n      <MenuItem title=\"Menu item 3\" />\n    </Menu>\n  </DialogContentContainer>\n);\n\nexport const ComponentRuleWithLabelDont = () => (\n  <DialogContentContainer>\n    <Menu>\n      <MenuItem title=\"Menu Item 1\" label=\"Long menu item label\" />\n      <MenuItem title=\"Menu Item 2\" />\n      <MenuItem title=\"Menu Item 3\" />\n    </Menu>\n  </DialogContentContainer>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/Menu/MenuItem.stories.tsx",
    "content": "import React from \"react\";\nimport { Menu, MenuItem, type MenuItemProps, Flex, Text } from \"@vibe/core\";\nimport { Activity } from \"@vibe/icons\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { type Meta, type StoryObj } from \"@storybook/react\";\n\ntype Story = StoryObj<MenuItemProps>;\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: MenuItem,\n  iconPropNamesArray: [\"icon\", \"rightIcon\"]\n});\n\nexport default {\n  title: \"Components/Menu/MenuItem\",\n  component: MenuItem,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n} satisfies Meta<typeof MenuItem>;\n\nconst menuItemTemplate = (args: MenuItemProps) => (\n  <Menu>\n    <MenuItem {...args} />\n  </Menu>\n);\n\nexport const Overview: Story = {\n  render: menuItemTemplate.bind({}),\n  args: {\n    title: \"Menu item\"\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const States: Story = {\n  render: () => (\n    <Menu>\n      <MenuItem title=\"Regular menu item\" />\n      <MenuItem title=\"Selected menu item\" selected />\n      <MenuItem title=\"Disabled menu item\" disabled />\n    </Menu>\n  )\n};\n\nexport const Icons: Story = {\n  render: () => (\n    <Flex gap=\"large\" align=\"start\" justify=\"start\">\n      <Flex direction=\"column\" gap=\"medium\">\n        <Text>Left icon</Text>\n        <Menu>\n          <MenuItem title=\"SVG icon\" icon={Activity} />\n          <MenuItem title=\"Font icon\" icon=\"fa fa-star\" type=\"font\" />\n        </Menu>\n      </Flex>\n      <Flex direction=\"column\" gap=\"medium\">\n        <Text>Right icon</Text>\n        <Menu>\n          <MenuItem title=\"SVG right icon\" rightIcon={Activity} />\n          <MenuItem title=\"Font right icon\" rightIcon=\"fa fa-star\" rightType=\"font\" />\n        </Menu>\n      </Flex>\n    </Flex>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Activity }\n      }\n    }\n  }\n};\n\nexport const Label: Story = {\n  render: () => (\n    <Menu>\n      <MenuItem title=\"Menu item\" label=\"New\" />\n    </Menu>\n  ),\n  parameters: {\n    chromatic: {\n      pauseAnimationAtEnd: true\n    }\n  }\n};\n\nexport const SubMenu: Story = {\n  render: () => (\n    <Menu>\n      <MenuItem title=\"Opens on item hover\">\n        <Menu tabIndex={0} id=\"sub-menu\">\n          <MenuItem title=\"Sub menu item 1\" onClick={() => alert(\"clicked on sub menu item 1\")} />\n          <MenuItem title=\"Sub menu item 2\" onClick={() => alert(\"clicked on sub menu item 2\")} />\n          <MenuItem title=\"Sub menu item 3\" onClick={() => alert(\"clicked on sub menu item 3\")} />\n        </Menu>\n      </MenuItem>\n      <MenuItem title=\"Opens on icon hover\" splitMenuItem onClick={() => alert(\"clicked on menu item\")}>\n        <Menu tabIndex={0} id=\"sub-menu\">\n          <MenuItem title=\"Sub menu item 1\" onClick={() => alert(\"clicked on sub menu item 1\")} />\n          <MenuItem title=\"Sub menu item 2\" onClick={() => alert(\"clicked on sub menu item 2\")} />\n          <MenuItem title=\"Sub menu item 3\" onClick={() => alert(\"clicked on sub menu item 3\")} />\n        </Menu>\n      </MenuItem>\n    </Menu>\n  ),\n  name: \"Sub menu\"\n};\n\nexport const Overflow: Story = {\n  render: () => (\n    <Menu>\n      <MenuItem title=\"short text\" />\n      <MenuItem title=\"long text - bla bla bla bla bla bla bla bla bla bla bla\" />\n      <MenuItem title=\"long text with sub menu - bla bla bla bla bla bla bla bla bla bla bla\">\n        <Menu tabIndex={0} id=\"sub-menu\">\n          <MenuItem title=\"Sub menu item 1\" />\n          <MenuItem title=\"Sub menu item 2\" />\n          <MenuItem title=\"Sub menu item 3\" />\n        </Menu>\n      </MenuItem>\n    </Menu>\n  )\n};\n\nexport const TooltipStory: Story = {\n  render: () => (\n    <Menu>\n      <MenuItem title=\"Menu item with tooltip\" tooltipContent=\"I am tooltip\" />\n      <MenuItem title=\"Disabled menu item with tooltip\" disabled={true} disableReason=\"I am a disabled tooltip\" />\n      <MenuItem title=\"I am a very very very very long text please hover me to get a tooltip\" />\n      <MenuItem title=\"Menu item with bottom tooltip\" tooltipContent=\"I am tooltip\" tooltipPosition=\"bottom\" />\n      <MenuItem\n        title=\"Menu item with icon and tooltip\"\n        tooltipContent=\"Menu item with icon and tooltip\"\n        tooltipPosition=\"left\"\n        icon={Activity}\n        type=\"svg\"\n      />\n    </Menu>\n  ),\n  name: \"Tooltip\",\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Activity }\n      }\n    }\n  }\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Menu/MenuItemButton.mdx",
    "content": "import { Canvas, Meta } from \"@storybook/blocks\";\nimport { TipMenuGridItem } from \"./MenuItemButton.stories.helpers\";\nimport * as MenuItemButtonStories from \"./MenuItemButton.stories\";\n\n<Meta of={MenuItemButtonStories} />\n\n# Menu Item Button\n\n<Canvas of={MenuItemButtonStories.Overview} />\n\n### Import\n\n```js\nimport { MenuItemButton } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n<TipMenuGridItem />\n\n## Variants\n\n### States\n\n<Canvas of={MenuItemButtonStories.States} />\n\n### Disabled\n\n<Canvas of={MenuItemButtonStories.Disabled} />\n\n### Icons\n\n<Canvas of={MenuItemButtonStories.Icons} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Menu/MenuItemButton.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { Tip } from \"vibe-storybook-components\";\n\n// TODO add links to the components mentioned in the tip\nexport const TipMenuGridItem = () => (\n  <Tip>\n    Need to place multiple buttons in a grid-like layout inside a Menu? Consider using the <code>MenuGridItem</code>{\" \"}\n    component\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/Menu/MenuItemButton.stories.tsx",
    "content": "import React from \"react\";\nimport { createComponentTemplate } from \"vibe-storybook-components\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { MenuItemButton, Menu } from \"@vibe/core\";\nimport { Invite } from \"@vibe/icons\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: MenuItemButton,\n  iconPropNamesArray: [\"leftIcon\", \"rightIcon\"]\n});\n\nconst menuItemButtonTemplate = createComponentTemplate(MenuItemButton);\n\nexport default {\n  title: \"Components/Menu/MenuItemButton\",\n  component: MenuItemButton,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n};\n\nexport const Overview = {\n  render: menuItemButtonTemplate.bind({}),\n  name: \"Overview\",\n\n  args: {\n    children: \"Menu item children\"\n  }\n};\n\nexport const States = {\n  render: () => [\n    <Menu key=\"Primary\">\n      <MenuItemButton kind=\"primary\">Primary</MenuItemButton>\n    </Menu>,\n    <Menu key=\"Secondary\">\n      <MenuItemButton kind=\"secondary\">Secondary</MenuItemButton>\n    </Menu>,\n    <Menu key=\"Tertiary\">\n      <MenuItemButton kind=\"tertiary\">Tertiary</MenuItemButton>\n    </Menu>\n  ],\n  name: \"States\"\n};\n\nexport const Disabled = {\n  render: () => [\n    <Menu key=\"disabled-Primary\">\n      <MenuItemButton kind=\"primary\" disabled disableReason=\"Disabled reason\">\n        Primary\n      </MenuItemButton>\n    </Menu>,\n    <Menu key=\"disabled-Secondary\">\n      <MenuItemButton kind=\"secondary\" disabled disableReason=\"Disabled reason\">\n        Secondary\n      </MenuItemButton>\n    </Menu>,\n    <Menu key=\"disabled-Tertiary\">\n      <MenuItemButton kind=\"tertiary\" disabled disableReason=\"Disabled reason\">\n        Tertiary\n      </MenuItemButton>\n    </Menu>\n  ],\n  name: \"Disabled\"\n};\n\nexport const Icons = {\n  render: () => [\n    <Menu key=\"left\">\n      <MenuItemButton leftIcon={Invite}>Left icon</MenuItemButton>\n    </Menu>,\n    <Menu key=\"right\">\n      <MenuItemButton rightIcon={Invite}>Right icon</MenuItemButton>\n    </Menu>\n  ],\n  name: \"Icons\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Menu/MenuTitle.mdx",
    "content": "import { Canvas, Meta } from \"@storybook/blocks\";\nimport * as MenuTitleStories from \"./MenuTitle.stories\";\nimport menuDo from \"./assets/Menu-do.svg\";\nimport menuDont from \"./assets/Menu-dont.svg\";\n\n<Meta of={MenuTitleStories} />\n\n# Menu Title\n\n<Canvas of={MenuTitleStories.Overview} />\n\n### Import\n\n```js\nimport { MenuTitle } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Variants\n\n### Caption positions\n\n<Canvas of={MenuTitleStories.CaptionPlacements} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: <img src={menuDo} alt=\"Menu title with an icon on the right\" />,\n        description: \"Place the info icon inside an icon button and align it to the right.\"\n      },\n      negative: {\n        component: <img src={menuDont} alt=\"Menu title with an icon on the left\" />,\n        description: \"Don’t place the info icon to the left, top or bottom.\"\n      }\n    }\n  ]}\n/>\n"
  },
  {
    "path": "packages/docs/src/pages/components/Menu/MenuTitle.stories.tsx",
    "content": "import React from \"react\";\nimport { createComponentTemplate } from \"vibe-storybook-components\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { MenuTitle, Menu, Flex, MenuItem, DialogContentContainer } from \"@vibe/core\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: MenuTitle\n});\n\nexport default {\n  title: \"Components/Menu/MenuTitle\",\n  component: MenuTitle,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n};\n\nconst menuTitleTemplate = createComponentTemplate(MenuTitle);\n\nexport const Overview = {\n  render: menuTitleTemplate.bind({}),\n  name: \"Overview\",\n  args: {\n    caption: \"Menu title\"\n  }\n};\n\nexport const CaptionPlacements = {\n  render: () => (\n    <Flex gap={80}>\n      <DialogContentContainer>\n        <Menu>\n          <MenuTitle caption=\"Left menu title\" captionPosition=\"top\" />\n          <MenuItem title=\"Item 1\" />\n          <MenuItem title=\"Item 2\" />\n          <MenuItem title=\"Item 3\" />\n        </Menu>\n      </DialogContentContainer>\n      <DialogContentContainer>\n        <Menu>\n          <MenuTitle caption=\"Center menu title\" captionPosition=\"center\" />\n          <MenuItem title=\"Item 1\" />\n          <MenuItem title=\"Item 2\" />\n          <MenuItem title=\"Item 3\" />\n        </Menu>\n      </DialogContentContainer>\n    </Flex>\n  ),\n  name: \"Caption placements\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/MenuButton/MenuButton.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport * as MenuButtonStories from \"./MenuButton.stories\";\n\n<Meta of={MenuButtonStories} />\n\n# MenuButton\n\nMenuButton is a component that opens a Dialog next to a button, the content of the dialog could be anything you want.\n\n<Canvas of={MenuButtonStories.Overview} />\n\n### Import\n\n```js\nimport { MenuButton } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"When you want to place content next to an element\",\n    \"When the content needs to be on top of adjacent content \"\n  ]}\n/>\n\n## Accessibility\n\n<UsageGuidelines\n  guidelines={[\n    <>\n      Provide an <code>id</code> for the MenuButton to enable proper accessibility associations.\n    </>,\n    <>\n      Use descriptive <code>ariaLabel</code> values for MenuButtons that clearly indicate the menu's purpose.\n    </>,\n    <>\n      Use <code>ariaControls</code> prop to link the MenuButton to its menu content. Pass the <code>id</code> of the\n      menu element to establish the relationship between the button and its controlled menu.\n    </>\n  ]}\n/>\n\n## Variants\n\n### Sizes\n\n<Canvas of={MenuButtonStories.Sizes} />\n\n### Different Icon\n\n<Canvas of={MenuButtonStories.DifferentIcon} />\n\n### With Text\n\n<Canvas of={MenuButtonStories.WithText} />\n\n### With Text and Icon at the end\n\n<Canvas of={MenuButtonStories.WithTextAndIconAtTheEnd} />\n\n### Disabled\n\n<Canvas of={MenuButtonStories.Disabled} />\n\n### Custom trigger element\n\nYou can use any element as a trigger for the menu button, just pass it as a <code>triggerElement</code> to the <code>MenuButton</code> component.\n\n<Canvas of={MenuButtonStories.CustomTriggerElement} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Button\", \"IconButton\", \"SplitButton\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/MenuButton/MenuButton.stories.tsx",
    "content": "import { MenuButton, type MenuButtonProps, Button, Menu, MenuItem } from \"@vibe/core\";\nimport { noop as NOOP } from \"es-toolkit\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { DropdownChevronDown, Favorite, Moon, Sun, MoveArrowDown } from \"@vibe/icons\";\nimport React, { useRef } from \"react\";\nimport { type Meta, type StoryObj } from \"@storybook/react\";\n\ntype Story = StoryObj<typeof MenuButton>;\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: MenuButton,\n  iconPropNamesArray: [\"component\"],\n  actionPropsArray: [\"onMenuHide\", \"onMenuShow\"],\n  ignoreControlsPropNamesArray: [\"children\"]\n});\n\nexport default {\n  title: \"Components/MenuButton\",\n  component: MenuButton,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n} satisfies Meta<typeof MenuButton>;\n\nexport const Overview: Story = {\n  render: (args: MenuButtonProps) => (\n    <MenuButton id=\"overview-menu-button\" aria-label=\"Overview menu button\" {...args}>\n      <Menu id=\"overview-menu\" size=\"medium\">\n        <MenuItem id=\"overview-menu-sun\" icon={Sun} onClick={NOOP} type=\"svg\" title=\"The sun\" />\n        <MenuItem id=\"overview-menu-moon\" icon={Moon} onClick={NOOP} type=\"svg\" title=\"The moon\" />\n        <MenuItem id=\"overview-menu-stars\" icon={Favorite} onClick={NOOP} type=\"svg\" title=\"And the stars\" />\n      </Menu>\n    </MenuButton>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const Sizes: Story = {\n  render: () => (\n    <>\n      <MenuButton id=\"sizes-xxs\" aria-label=\"Extra extra small menu button\" size=\"xxs\">\n        <Menu id=\"sizes-xxs-menu\" size=\"medium\">\n          <MenuItem id=\"sizes-xxs-sun\" icon={Sun} onClick={NOOP} type=\"svg\" title=\"The sun\" />\n          <MenuItem id=\"sizes-xxs-moon\" icon={Moon} onClick={NOOP} type=\"svg\" title=\"The moon\" />\n          <MenuItem id=\"sizes-xxs-stars\" icon={Favorite} onClick={NOOP} type=\"svg\" title=\"And the stars\" />\n        </Menu>\n      </MenuButton>\n      <MenuButton id=\"sizes-xs\" aria-label=\"Extra small menu button\" size=\"xs\">\n        <Menu id=\"sizes-xs-menu\" size=\"medium\">\n          <MenuItem id=\"sizes-xs-sun\" icon={Sun} onClick={NOOP} type=\"svg\" title=\"The sun\" />\n          <MenuItem id=\"sizes-xs-moon\" icon={Moon} onClick={NOOP} type=\"svg\" title=\"The moon\" />\n          <MenuItem id=\"sizes-xs-stars\" icon={Favorite} onClick={NOOP} type=\"svg\" title=\"And the stars\" />\n        </Menu>\n      </MenuButton>\n      <MenuButton id=\"sizes-small\" aria-label=\"Small menu button\" size=\"small\">\n        <Menu id=\"sizes-small-menu\" size=\"medium\">\n          <MenuItem id=\"sizes-small-sun\" icon={Sun} onClick={NOOP} type=\"svg\" title=\"The sun\" />\n          <MenuItem id=\"sizes-small-moon\" icon={Moon} onClick={NOOP} type=\"svg\" title=\"The moon\" />\n          <MenuItem id=\"sizes-small-stars\" icon={Favorite} onClick={NOOP} type=\"svg\" title=\"And the stars\" />\n        </Menu>\n      </MenuButton>\n      <MenuButton id=\"sizes-medium\" aria-label=\"Medium menu button\" size=\"medium\">\n        <Menu id=\"sizes-medium-menu\" size=\"medium\">\n          <MenuItem id=\"sizes-medium-sun\" icon={Sun} onClick={NOOP} type=\"svg\" title=\"The sun\" />\n          <MenuItem id=\"sizes-medium-moon\" icon={Moon} onClick={NOOP} type=\"svg\" title=\"The moon\" />\n          <MenuItem id=\"sizes-medium-stars\" icon={Favorite} onClick={NOOP} type=\"svg\" title=\"And the stars\" />\n        </Menu>\n      </MenuButton>\n      <MenuButton id=\"sizes-large\" aria-label=\"Large menu button\" size=\"large\">\n        <Menu id=\"sizes-large-menu\" size=\"medium\">\n          <MenuItem id=\"sizes-large-sun\" icon={Sun} onClick={NOOP} type=\"svg\" title=\"The sun\" />\n          <MenuItem id=\"sizes-large-moon\" icon={Moon} onClick={NOOP} type=\"svg\" title=\"The moon\" />\n          <MenuItem id=\"sizes-large-stars\" icon={Favorite} onClick={NOOP} type=\"svg\" title=\"And the stars\" />\n        </Menu>\n      </MenuButton>\n    </>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { NOOP, Sun, Moon, Favorite }\n      }\n    }\n  }\n};\n\nexport const DifferentIcon: Story = {\n  render: () => (\n    <MenuButton id=\"different-icon\" aria-label=\"Menu button with different icon\" component={MoveArrowDown}>\n      <Menu id=\"different-icon-menu\" size=\"medium\">\n        <MenuItem id=\"different-icon-sun\" icon={Sun} onClick={NOOP} type=\"svg\" title=\"The sun\" />\n        <MenuItem id=\"different-icon-moon\" icon={Moon} onClick={NOOP} type=\"svg\" title=\"The moon\" />\n        <MenuItem id=\"different-icon-stars\" icon={Favorite} onClick={NOOP} type=\"svg\" title=\"And the stars\" />\n      </Menu>\n    </MenuButton>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { NOOP, MoveArrowDown, Sun, Moon, Favorite }\n      }\n    }\n  }\n};\n\nexport const WithText: Story = {\n  render: () => (\n    <div\n      style={{\n        width: 200\n      }}\n    >\n      <MenuButton text=\"Open\">\n        <Menu id=\"menu\" size=\"medium\">\n          <MenuItem icon={Sun} onClick={NOOP} type=\"svg\" title=\"The sun\" />\n          <MenuItem icon={Moon} onClick={NOOP} type=\"svg\" title=\"The moon\" />\n          <MenuItem icon={Favorite} onClick={NOOP} type=\"svg\" title=\"And the stars\" />\n        </Menu>\n      </MenuButton>\n    </div>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { NOOP, Sun, Moon, Favorite }\n      }\n    }\n  }\n};\n\nexport const WithTextAndIconAtTheEnd: Story = {\n  render: () => (\n    <div\n      style={{\n        width: 200\n      }}\n    >\n      <MenuButton text=\"Open\" component={DropdownChevronDown} componentPosition=\"end\">\n        <Menu id=\"menu\" size=\"medium\">\n          <MenuItem icon={Sun} onClick={NOOP} type=\"svg\" title=\"The sun\" />\n          <MenuItem icon={Moon} onClick={NOOP} type=\"svg\" title=\"The moon\" />\n          <MenuItem icon={Favorite} onClick={NOOP} type=\"svg\" title=\"And the stars\" />\n        </Menu>\n      </MenuButton>\n    </div>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { NOOP, DropdownChevronDown, Sun, Moon, Favorite }\n      }\n    }\n  },\n  name: \"With Text and Icon at the end\"\n};\n\nexport const Disabled: Story = {\n  render: () => (\n    <MenuButton disabled tooltipContent=\"This action is not available now\">\n      <Menu id=\"menu\" size=\"medium\">\n        <MenuItem icon={Sun} onClick={NOOP} type=\"svg\" title=\"The sun\" />\n        <MenuItem icon={Moon} onClick={NOOP} type=\"svg\" title=\"The moon\" />\n        <MenuItem icon={Favorite} onClick={NOOP} type=\"svg\" title=\"And the stars\" />\n      </Menu>\n    </MenuButton>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { NOOP, Sun, Moon, Favorite }\n      }\n    }\n  }\n};\n\nexport const CustomTriggerElement: Story = {\n  render: () => {\n    const ref = useRef(null);\n\n    return (\n      <MenuButton\n        triggerElement={props => (\n          <Button kind=\"secondary\" {...props} className={\"\"} ref={ref}>\n            Button\n          </Button>\n        )}\n      >\n        <Menu id=\"menu\" size=\"medium\">\n          <MenuItem icon={Sun} onClick={NOOP} type=\"svg\" title=\"The sun\" />\n          <MenuItem icon={Moon} onClick={NOOP} type=\"svg\" title=\"The moon\" />\n          <MenuItem icon={Favorite} onClick={NOOP} type=\"svg\" title=\"And the stars\" />\n        </Menu>\n      </MenuButton>\n    );\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { NOOP, Sun, Moon, Favorite }\n      }\n    }\n  }\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Modal/Modal.mdx",
    "content": "import { Canvas, Meta } from \"@storybook/blocks\";\nimport { ModalTip } from \"./Modal.stories.helpers\";\nimport { Overview as BasicModalPreview } from \"./ModalBasicLayout.stories\";\nimport { Overview as SideBySideModalPreview } from \"./ModalSideBySideLayout.stories\";\nimport { Overview as MediaModalPreview } from \"./ModalMediaLayout.stories\";\nimport backdropDo from \"./assets/backdrop-do.png\";\nimport backdropDont from \"./assets/backdrop-dont.png\";\nimport loadingDo from \"./assets/loading-do.png\";\nimport loadingDont from \"./assets/loading-dont.png\";\nimport ctaDo from \"./assets/cta-do.png\";\nimport ctaDont from \"./assets/cta-dont.png\";\nimport styles from \"./Modal.stories.module.scss\";\nimport { StorybookLink } from \"vibe-storybook-components\";\n\n<Meta title=\"Components/Modal\" />\n\n# Modal\n\n<p style={{ marginBlockEnd: \"var(--sb-spacing-xxxl)\" }}>\n  Modals help users focus on a single task or a piece of information by popping up and blocking the rest of the page's\n  content. Modals disappear when user complete a required action or dismiss it. Use modals for quick, infrequent tasks.\n  We have 3 different modal component, each one provide a different layout for a different use case:\n</p>\n\n### Import\n\nAll the Modal-related components can be imported from `@vibe/core`.\n\n```ts\nimport {\n  Modal,\n  ModalHeader,\n  ModalContent,\n  ModalMedia,\n  ModalFooter,\n  ModalFooterWizard,\n  ModalBasicLayout,\n  ModalSideBySideLayout,\n  ModalMediaLayout\n} from \"@vibe/core\";\n```\n\n### Basic modal\n\nThe <StorybookLink page=\"Components/Modal/Basic modal\">Basic Modal</StorybookLink> is intended for straightforward tasks, like selecting items or gathering basic information. Basic Modals help users focus on a single task without distractions. These modals do not support images or videos.\n\n<Canvas of={BasicModalPreview} sourceState=\"none\" />\n\n### Side by side modal\n\nThe <StorybookLink page=\"Components/Modal/Side by side modal\">Side-by-Side Modal</StorybookLink> offers two distinct sections: the left for text or inputs, and the right for supporting visuals.\nIt's ideal when users need to reference media alongside information.\n\n<Canvas of={SideBySideModalPreview} sourceState=\"none\" />\n\n### Media modal\n\nThe <StorybookLink page=\"Components/Modal/Media modal\">Media Modal</StorybookLink> includes a highlighted media section followed by text, perfect for grabbing attention with visuals before users interact with the content. Ideal for introducing new features or onboarding.\n\n<Canvas of={MediaModalPreview} sourceState=\"none\" />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Use modals only when you need the user's full, immediate attention.\",\n    \"Modals are centered on the page. To put the modal in focus, the rest of the page is dimmed.\",\n    \"All modals must have a title, a call to action, and a close button. The title and call to action should be simple and clear.\",\n    \"By default, users can close modals by clicking the close button, clicking outside the modal, or pressing the ESC key.\"\n  ]}\n/>\n\n<ModalTip />\n\n## Accessibility\n\nThe Modal component provides several built-in enhancements to simplify usage and improve accessibility:\n\n<UsageGuidelines\n  guidelines={[\n    <span>\n      <b>Scroll lock:</b> While the modal is open, it prevents background content from scrolling, ensuring user focus\n      remains on the modal.\",\n    </span>,\n    <span>\n      <b>Focus lock:</b> Keeps focus within the modal elements, preventing users from tabbing outside of the modal while\n      it is open. Focus also automatically returns to the last focused element upon closing.\n    </span>,\n    <span>\n      <b>Aria attributes:</b> For better screen reader support, using <code>ModalHeader</code> - with simple string\n      values for <code>title</code> and <code>description</code> props - automatically sets the necessary{\" \"}\n      <code>aria-labelledby</code> and <code>aria-describedby</code> attributes on the modal.\n    </span>,\n    <span>\n      <b>Manual ARIA for complex content:</b> If you pass a <b>ReactNode</b> (e.g., a custom component) as the{\" \"}\n      <code>title</code> or <code>description</code> prop to <code>ModalHeader</code>, you <b>must</b> assign a unique{\" \"}\n      <code>id</code> to your primary custom element within that ReactNode. Then, pass this <code>id</code> directly to\n      the parent <code>Modal</code> component using the <code>aria-labelledby</code> (for title) or{\" \"}\n      <code>aria-describedby</code> (for description) prop. This ensures assistive technologies can correctly identify\n      the modal's label and description. For example, if your custom title is{\" \"}\n      <code>&lt;CustomTitleComponent id=\"my-unique-title-id\" /&gt;</code>, you would pass{\" \"}\n      <code>aria-labelledby=\"my-unique-title-id\"</code> to the <code>&lt;Modal&gt;</code> component.\n    </span>,\n    <span>\n      <b>Overriding ARIA attributes:</b> Additionally, you can directly provide the <code>aria-labelledby</code> and{\" \"}\n      <code>aria-describedby</code> props to the <code>Modal</code> component itself, regardless of how you use the{\" \"}\n      <code>ModalHeader</code>. If provided, these props will <b>always override</b> any automatically generated values\n      from <code>ModalHeader</code>.\n    </span>\n  ]}\n/>\n\n## Do's and don'ts\n\n<ComponentRules\n  rules={[\n    {\n      componentContainerClassName: styles.largeComponentRule,\n      positive: {\n        component: <img src={backdropDo} alt=\"modal with a backdrop\" style={{ maxWidth: \"100%\" }} />,\n        description: \"Modal must include backdrop element.\"\n      },\n      negative: {\n        component: <img src={backdropDont} alt=\"modal without a backdrop\" style={{ maxWidth: \"100%\" }} />,\n        description: \"Don't remove the backdrop element of the modal or the modal's title.\"\n      }\n    },\n    {\n      componentContainerClassName: styles.largeComponentRule,\n      positive: {\n        component: (\n          <img\n            src={loadingDo}\n            alt=\"modal with skeleton components as a loading experience\"\n            style={{ maxWidth: \"100%\" }}\n          />\n        ),\n        description: (\n          <>\n            Use our <StorybookLink page=\"Feedback/Skeleton\">Skeleton</StorybookLink> component if loading is needed. Try\n            that at least the actions will appear immediately.\n          </>\n        )\n      },\n      negative: {\n        component: (\n          <img\n            src={loadingDont}\n            alt=\"modal with a spinner loading components as a loading experience\"\n            style={{ maxWidth: \"100%\" }}\n          />\n        ),\n        description: \"Don't use Loader component in case of necessary loading.\"\n      }\n    },\n    {\n      componentContainerClassName: styles.largeComponentRule,\n      positive: {\n        component: (\n          <img\n            src={ctaDo}\n            alt=\"modal with a footer that includes one primary action and one tertiary action\"\n            style={{ maxWidth: \"100%\" }}\n          />\n        ),\n        description: \"Use one primary button as your main call to action, for extra buttons use the tertiary button.\"\n      },\n      negative: {\n        component: (\n          <img src={ctaDont} alt=\"modal with a footer that includes two primary actions\" style={{ maxWidth: \"100%\" }} />\n        ),\n        description: \"Don't use more than one primary button, we don't want to distract the user from the main action.\"\n      }\n    }\n  ]}\n/>\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Tooltip\", \"Dialog\", \"Tipseen\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Modal/Modal.stories.helpers.tsx",
    "content": "import React, { forwardRef, useEffect, useState } from \"react\";\nimport { Button, IconButton } from \"@vibe/core\";\nimport { Fullscreen } from \"@vibe/icons\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\nimport cx from \"classnames\";\nimport styles from \"./Modal.stories.module.scss\";\nimport { getStyle } from \"@vibe/shared\";\n\nexport const OpenedModalPreview = forwardRef(\n  (\n    {\n      onOpenModalClick,\n      isDocsView,\n      isFullView,\n      size = \"small\",\n      showFullPreviewButton,\n      onFullPreviewClick,\n      children: modal\n    }: {\n      onOpenModalClick: () => void;\n      isDocsView?: boolean;\n      isFullView?: boolean;\n      size?: \"small\" | \"medium\" | \"large\";\n      showFullPreviewButton?: boolean;\n      onFullPreviewClick: () => void;\n      children: React.ReactNode;\n    },\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    return (\n      <div\n        className={cx(styles.preview, { [getStyle(styles, size)]: isDocsView })}\n        ref={ref}\n        // workaround to prevent modal from autofocusing on page load (unless on full view)\n        {...(isDocsView && !isFullView && { \"data-no-autofocus\": true })}\n      >\n        <Button onClick={onOpenModalClick}>Open Modal</Button>\n        {modal}\n        {showFullPreviewButton && (\n          <IconButton\n            wrapperClassName={styles.fullPreviewButtonWrapper}\n            className={styles.fullPreviewButton}\n            kind=\"secondary\"\n            icon={Fullscreen}\n            color=\"primary\"\n            onClick={onFullPreviewClick}\n            aria-label=\"Open modal in full preview mode\"\n          />\n        )}\n      </div>\n    );\n  }\n);\n\nexport const useRemoveModalScrollLock = (show: boolean, isDocsView?: boolean, isFullView?: boolean) => {\n  useEffect(() => {\n    if (show && document.body.attributes.getNamedItem(\"data-scroll-locked\") && isDocsView && !isFullView) {\n      requestAnimationFrame(() => {\n        document.body.attributes.removeNamedItem(\"data-scroll-locked\");\n        document.documentElement.addEventListener(\n          \"wheel\",\n          e => {\n            e.stopImmediatePropagation();\n          },\n          true\n        );\n      });\n    }\n  }, [show, isDocsView, isFullView]);\n};\n\nexport function withOpenedModalPreview(\n  Story: React.FunctionComponent<{\n    show: boolean;\n    setShow: (show: boolean) => void;\n    container?: Element | DocumentFragment;\n  }>,\n  {\n    size,\n    isDocsView,\n    allowFullViewInDocs\n  }: { size?: \"small\" | \"medium\" | \"large\"; isDocsView: boolean; allowFullViewInDocs?: boolean }\n) {\n  const [show, setShow] = useState(true);\n  const [isFullView, setFullView] = useState(false);\n  useRemoveModalScrollLock(show, isDocsView, isFullView); // internal hook, for documentation purposes, to enable page scroll on docs view\n\n  const [modalContainer, setModalContainer] = useState<Element | DocumentFragment>(null);\n\n  return (\n    // internal component, for documentation purposes, to open modal inside a container\n    <OpenedModalPreview\n      size={size}\n      onOpenModalClick={() => {\n        setShow(true);\n        setFullView(false);\n      }}\n      isDocsView={isDocsView}\n      isFullView={isFullView}\n      showFullPreviewButton={allowFullViewInDocs && isDocsView && !isFullView && show}\n      onFullPreviewClick={() => {\n        setShow(false);\n        setFullView(true);\n        setTimeout(() => setShow(true), 250);\n      }}\n      ref={element => {\n        if (!element || !isDocsView || isFullView) return;\n        setModalContainer(element);\n      }}\n    >\n      <Story show={show} setShow={setShow} container={isFullView ? document.body : modalContainer} />\n    </OpenedModalPreview>\n  );\n}\n\nexport const ModalTip = () => (\n  <div style={{ marginTop: 40 }}>\n    <Tip>\n      Since the modal is used for short and non-frequent tasks, consider using the main flow for common tasks. For\n      creating a popover positioned next to other components, like customized menus, check out our{\" \"}\n      <StorybookLink page=\"Popover/Dialog\" size=\"small\">\n        Dialog\n      </StorybookLink>{\" \"}\n      component.\n    </Tip>\n  </div>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/Modal/Modal.stories.module.scss",
    "content": ".largeComponentRule {\n  height: fit-content !important;\n  width: fit-content;\n  padding: var(--sb-spacing-large);\n}\n\n.preview {\n  padding-inline-start: 32px;\n  padding-block-start: 40px;\n  height: 100vh;\n  width: 100%;\n  container-type: inline-size;\n\n  .fullPreviewButtonWrapper {\n    position: absolute;\n    right: 8px;\n    top: 8px;\n    z-index: 10001;\n  }\n\n  .fullPreviewButton {\n    background: var(--sb-dark-background-color);\n\n    &:hover {\n      background: linear-gradient(\n          to right,\n          var(--sb-primary-background-hover-color),\n          var(--sb-primary-background-hover-color)\n        ),\n        linear-gradient(to right, var(--sb-dark-background-color), var(--sb-dark-background-color)) !important;\n    }\n  }\n\n  &.small {\n    height: 360px;\n  }\n\n  &.medium {\n    height: 416px;\n  }\n\n  &.large {\n    height: 530px;\n  }\n\n  /**\n    * The following css is to override the default dimensions of the modal component\n    * this is necessary because in the documentation, we're \"trapping\" the modal component inside the preview component\n    * so the modal component width and height be relative to the preview component and not the viewport\n   */\n  [aria-modal][role=\"dialog\"] {\n    &[class*=\"sizeSmall\"] {\n      --modal-max-height: 50%;\n      --modal-width: 460px;\n    }\n\n    &[class*=\"sizeMedium\"] {\n      --modal-max-height: 80%;\n      --modal-width: 540px;\n    }\n\n    &[class*=\"sizeLarge\"] {\n      --modal-max-height: 80%;\n      --modal-width: 800px;\n    }\n\n    &[class*=\"sizeFullView\"] {\n      --modal-max-height: 100%;\n      --modal-width: auto;\n    }\n\n    @container (min-width: 1280px) {\n      &[class*=\"sizeSmall\"] {\n        --modal-width: 480px;\n      }\n\n      &[class*=\"sizeMedium\"] {\n        --modal-width: 580px;\n      }\n\n      &[class*=\"sizeLarge\"] {\n        --modal-width: 840px;\n      }\n    }\n\n    @container (min-width: 1440px) {\n      &[class*=\"sizeSmall\"] {\n        --modal-width: 520px;\n      }\n\n      &[class*=\"sizeMedium\"] {\n        --modal-width: 620px;\n      }\n\n      &[class*=\"sizeLarge\"] {\n        --modal-width: 900px;\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/pages/components/Modal/ModalBasicLayout.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport * as ModalBasicLayoutStories from \"./ModalBasicLayout.stories\";\nimport actionDo from \"./assets/action-do.png\";\nimport actionDont from \"./assets/action-dont.png\";\nimport styles from \"./Modal.stories.module.scss\";\nimport { BasicModalTip } from \"./ModalBasicLayout.stories.helpers\";\n\n<Meta of={ModalBasicLayoutStories} />\n\n# Basic modal\n\nThe Basic Modal is intended for straightforward tasks, like selecting items or gathering basic information. Basic Modals help users focus on a single task without distractions. These modals do not support images or videos.\n\n<Canvas of={ModalBasicLayoutStories.Overview} />\n\n### Import\n\nAll the Basic Modal layout components can be imported from `@vibe/core`.\n\n```ts\nimport { Modal, ModalHeader, ModalContent, ModalFooter, ModalFooterWizard, ModalBasicLayout } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Use for straightforward tasks like confirming routine actions, gathering simple info, or displaying brief instructions.\",\n    \"Use when users need to choose from a long list of items or options, or when they need to fill out a long form.\",\n    \"Use when there is no need for media (images or videos).\",\n    \"Use when the content is scrollable.\"\n  ]}\n/>\n\n<BasicModalTip />\n\n## Variants\n\n### Sizes\n\nThe modal component has three sizes - small, medium, and large. The modal width is responsive and adjust in width based on screen size. Each size also has a maximum height to keep harmonic window ratio, while the content area adapting to fit.\n\n<Canvas of={ModalBasicLayoutStories.Sizes} />\n\n### Alert Modal\n\nUse the \"alertModal\" boolean prop in order to allow closing the modal only by the close buttons and not by ESC or by clicking outside. Use this variant in case of sensitive or important messages, and in modals that requires data from the user, such as forms.\n\n<Canvas of={ModalBasicLayoutStories.AlertModal} />\n\n## Scroll\n\nWhen the content of the modal is too large to fit within the viewport, the modal content should become scrollable while the header and footer stay sticky. If the scroll is too long, consider switching to a different modal size or a different layout.\n\n<Canvas of={ModalBasicLayoutStories.Scroll} />\n\n## Use cases and examples\n\n### Wizard modal\n\nFor modals with multiple steps, use the ModalFooterWizard.\n\n<Canvas of={ModalBasicLayoutStories.Wizard} />\n\n### Confirmation modal\n\nConfirmation modal ensure that users acknowledge the outcomes of their actions. It is based on the small size modal and comes with predefine properties. To use a confirmation modal, simply copy the code provided below.\n\n<Canvas of={ModalBasicLayoutStories.Confirmation} />\n\n### Footer with extra content\n\nThe footer has an option to include additional content on the left side when needed. This extra content can consist of a button, checkbox, or simple text for notes. Note that this option is only available with the default footer.\n\n<Canvas of={ModalBasicLayoutStories.FooterWithExtraContent} />\n\n### Header with icon button\n\nIn case of a need of an icon button in the modal header, you can use our default header \"Action slot\".\nYou can also use it as a <StorybookLink page=\"Buttons/MenuButton\">menu button</StorybookLink> component.\n\n<Canvas of={ModalBasicLayoutStories.HeaderWithIconButton} />\n\n### Animation\n\nEach modal includes an animation type based on its entrance point, with wizard modals also featuring transition animations. The default is the center pop animation, which can be replaced with an anchor animation if there is a specific trigger to open the modal. Transition animation is used exclusively for wizard modals and cannot be changed or removed.\n\n<Canvas of={ModalBasicLayoutStories.Animation} />\n\n## Do's and don'ts\n\n<ComponentRules\n  rules={[\n    {\n      componentContainerClassName: styles.largeComponentRule,\n      positive: {\n        component: (\n          <img\n            src={actionDo}\n            alt=\"modal featuring an extra action checkbox on the footer\"\n            style={{ maxWidth: \"100%\" }}\n          />\n        ),\n        description: \"Use button, checkbox, or simple text for notes as an extra content to the footer.\"\n      },\n      negative: {\n        component: (\n          <img\n            src={actionDont}\n            alt=\"modal featuring an extra action image on the footer\"\n            style={{ maxWidth: \"100%\" }}\n          />\n        ),\n        description: \"Don't use images, inputs or any kind of content that can overload the user.\"\n      }\n    }\n  ]}\n/>\n\n## Related components\n\n<RelatedComponents componentsNames={[\"ModalSideBySideLayout\", \"ModalMediaLayout\", \"Tipseen\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Modal/ModalBasicLayout.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const BasicModalTip = () => (\n  <div style={{ marginTop: 40 }}>\n    <Tip>\n      If your content is not scrollable and you need to add media as supporting element, consider using{\" \"}\n      <StorybookLink page=\"Components/Modal/Side by side modal\" size=\"small\">\n        Side-by-side modal\n      </StorybookLink>{\" \"}\n      or{\" \"}\n      <StorybookLink page=\"Components/Modal/Media modal\" size=\"small\">\n        Media modal\n      </StorybookLink>{\" \"}\n      depends on your use case.\n    </Tip>\n  </div>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/Modal/ModalBasicLayout.stories.tsx",
    "content": "import React, { useRef, useState } from \"react\";\nimport { type Meta, type StoryObj } from \"@storybook/react\";\nimport { TransitionView, useWizard, Checkbox, IconButton, Button, Text, Link, Flex } from \"@vibe/core\";\nimport { Modal, ModalBasicLayout, ModalHeader, ModalContent, ModalFooter, ModalFooterWizard } from \"@vibe/core\";\nimport { Menu } from \"@vibe/icons\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { withOpenedModalPreview } from \"./Modal.stories.helpers\";\n\ntype Story = StoryObj<typeof Modal>;\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: Modal\n});\n\nexport default {\n  title: \"Components/Modal/Basic modal\",\n  component: Modal,\n  subcomponents: { ModalBasicLayout, ModalHeader, ModalContent, ModalFooter, ModalFooterWizard, TransitionView },\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators,\n  parameters: {\n    layout: \"fullscreen\"\n  }\n} satisfies Meta<typeof Modal>;\n\nexport const Overview: Story = {\n  decorators: [\n    (Story, context) =>\n      withOpenedModalPreview(Story, { isDocsView: context.viewMode === \"docs\", allowFullViewInDocs: true })\n  ],\n  render: (args, { show, setShow, container }) => {\n    return (\n      <Modal id=\"modal-basic\" show={show} size=\"medium\" onClose={() => setShow(false)} container={container} {...args}>\n        <ModalBasicLayout>\n          <ModalHeader\n            title=\"Modal title\"\n            description={\n              <Text type=\"text1\">\n                Modal subtitle, can come with icon <Link inheritFontSize inlineText text=\"and link.\" />\n              </Text>\n            }\n          />\n          <ModalContent>\n            <Text type=\"text1\" align=\"inherit\" element=\"p\">\n              Modal content will appear here, you can custom it however you want, according to the user needs. Please\n              make sure that the content is clear for completing the relevant task.\n            </Text>\n          </ModalContent>\n        </ModalBasicLayout>\n        <ModalFooter\n          primaryButton={{ text: \"Confirm\", onClick: () => setShow(false) }}\n          secondaryButton={{ text: \"Cancel\", onClick: () => setShow(false) }}\n        />\n      </Modal>\n    );\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const Sizes: Story = {\n  render: () => {\n    const [showSmall, setShowSmall] = useState(false);\n    const [showMedium, setShowMedium] = useState(false);\n    const [showLarge, setShowLarge] = useState(false);\n\n    return (\n      <>\n        <Flex gap=\"large\" style={{ paddingBlock: 40 }}>\n          <Button onClick={() => setShowSmall(true)}>Small</Button>\n          <Button onClick={() => setShowMedium(true)}>Medium</Button>\n          <Button onClick={() => setShowLarge(true)}>Large</Button>\n        </Flex>\n\n        <Modal id=\"modal-basic-small\" show={showSmall} size=\"small\" onClose={() => setShowSmall(false)}>\n          <ModalBasicLayout>\n            <ModalHeader\n              title=\"Modal title\"\n              description={\n                <Text type=\"text1\">\n                  Modal subtitle, can come with icon <Link inheritFontSize inlineText text=\"and link.\" />\n                </Text>\n              }\n            />\n            <ModalContent>\n              <Text type=\"text1\" align=\"inherit\" element=\"p\">\n                Modal content will appear here, you can custom it however you want, according to the user needs. Please\n                make sure that the content is clear for completing the relevant task.\n              </Text>\n            </ModalContent>\n          </ModalBasicLayout>\n          <ModalFooter\n            primaryButton={{ text: \"Confirm\", onClick: () => setShowSmall(false) }}\n            secondaryButton={{ text: \"Cancel\", onClick: () => setShowSmall(false) }}\n          />\n        </Modal>\n\n        <Modal id=\"modal-basic-medium\" show={showMedium} size=\"medium\" onClose={() => setShowMedium(false)}>\n          <ModalBasicLayout>\n            <ModalHeader\n              title=\"Modal title\"\n              description={\n                <Text type=\"text1\">\n                  Modal subtitle, can come with icon <Link inheritFontSize inlineText text=\"and link.\" />\n                </Text>\n              }\n            />\n            <ModalContent>\n              <Text type=\"text1\" align=\"inherit\" element=\"p\">\n                Modal content will appear here, you can custom it however you want, according to the user needs. Please\n                make sure that the content is clear for completing the relevant task.\n              </Text>\n            </ModalContent>\n          </ModalBasicLayout>\n          <ModalFooter\n            primaryButton={{ text: \"Confirm\", onClick: () => setShowMedium(false) }}\n            secondaryButton={{ text: \"Cancel\", onClick: () => setShowMedium(false) }}\n          />\n        </Modal>\n\n        <Modal id=\"modal-basic-large\" show={showLarge} size=\"large\" onClose={() => setShowLarge(false)}>\n          <ModalBasicLayout>\n            <ModalHeader\n              title=\"Modal title\"\n              description={\n                <Text type=\"text1\">\n                  Modal subtitle, can come with icon <Link inheritFontSize inlineText text=\"and link.\" />\n                </Text>\n              }\n            />\n            <ModalContent>\n              <Text type=\"text1\" align=\"inherit\" element=\"p\">\n                Modal content will appear here, you can custom it however you want, according to the user needs. Please\n                make sure that the content is clear for completing the relevant task.\n              </Text>\n            </ModalContent>\n          </ModalBasicLayout>\n          <ModalFooter\n            primaryButton={{ text: \"Confirm\", onClick: () => setShowLarge(false) }}\n            secondaryButton={{ text: \"Cancel\", onClick: () => setShowLarge(false) }}\n          />\n        </Modal>\n      </>\n    );\n  }\n};\n\nexport const AlertModal: Story = {\n  decorators: [(Story, context) => withOpenedModalPreview(Story, { isDocsView: context.viewMode === \"docs\" })],\n  render: (_, { show, setShow, container }) => {\n    return (\n      <Modal id=\"modal-basic\" show={show} alertModal size=\"medium\" onClose={() => setShow(false)} container={container}>\n        <ModalBasicLayout>\n          <ModalHeader title=\"Alert modal\" />\n          <ModalContent>\n            <Text type=\"text1\" align=\"inherit\" element=\"p\">\n              This will allow closing the modal only by the close buttons and not by ESC or by clicking outside.\n            </Text>\n          </ModalContent>\n        </ModalBasicLayout>\n        <ModalFooter\n          primaryButton={{ text: \"Confirm\", onClick: () => setShow(false) }}\n          secondaryButton={{ text: \"Cancel\", onClick: () => setShow(false) }}\n        />\n      </Modal>\n    );\n  }\n};\n\nexport const Scroll: Story = {\n  decorators: [(Story, context) => withOpenedModalPreview(Story, { isDocsView: context.viewMode === \"docs\" })],\n  render: (_, { show, setShow, container }) => {\n    return (\n      <Modal\n        id=\"modal-basic\"\n        show={show}\n        size=\"medium\"\n        onClose={() => setShow(false)}\n        container={container}\n        style={{ height: 400 }}\n      >\n        <ModalBasicLayout>\n          <ModalHeader title=\"Scrollable modal\" />\n          <ModalContent>\n            <Text type=\"text1\" align=\"inherit\" element=\"p\">\n              Modal content will appear here, you can custom it however you want, according to the user needs. Please\n              make sure that the content is clear for completing the relevant task. The Basic Modal is intended for\n              straightforward tasks, like selecting items or gathering basic information. Basic Modals help users focus\n              on a single task without distractions. These modals do not support images or videos. When the content of\n              the modal is too large to fit within the viewport, the modal content should become scrollable while the\n              header and footer stay sticky. If the scroll is too long, consider switching to a different modal size or\n              a different layout. Modal content will appear here, you can custom it however you want, according to the\n              user needs. Please make sure that the content is clear for completing the relevant task.\n            </Text>\n          </ModalContent>\n        </ModalBasicLayout>\n        <ModalFooter\n          primaryButton={{ text: \"Confirm\", onClick: () => setShow(false) }}\n          secondaryButton={{ text: \"Cancel\", onClick: () => setShow(false) }}\n        />\n      </Modal>\n    );\n  }\n};\n\nexport const Wizard: Story = {\n  decorators: [(Story, context) => withOpenedModalPreview(Story, { isDocsView: context.viewMode === \"docs\" })],\n  render: (_, { show, setShow, container }) => {\n    const steps = [\n      <ModalBasicLayout>\n        <ModalHeader title=\"Modal with wizard\" />\n        <ModalContent>\n          <Text type=\"text1\" align=\"inherit\" element=\"p\">\n            Modal content will appear here, you can custom it however you want, according to the user needs. Please make\n            sure that the content is clear for completing the relevant task.\n          </Text>\n        </ModalContent>\n      </ModalBasicLayout>,\n      <ModalBasicLayout>\n        <ModalHeader title=\"Modal with wizard\" />\n        <ModalContent>\n          <Text type=\"text1\" align=\"inherit\" element=\"p\">\n            Modal content will appear here, you can custom it however you want, according to the user needs. Please make\n            sure that the content is clear for completing the relevant task.\n          </Text>\n        </ModalContent>\n      </ModalBasicLayout>,\n      <ModalBasicLayout>\n        <ModalHeader title=\"Modal with wizard\" />\n        <ModalContent>\n          <Text type=\"text1\" align=\"inherit\" element=\"p\">\n            Modal content will appear here, you can custom it however you want, according to the user needs. Please make\n            sure that the content is clear for completing the relevant task.\n          </Text>\n        </ModalContent>\n      </ModalBasicLayout>\n    ];\n\n    const { activeStep, direction, next, back, isFirstStep, isLastStep, goToStep } = useWizard({\n      stepCount: steps.length\n    });\n\n    const primaryButtonText = isLastStep ? \"Confirm\" : \"Next\";\n\n    return (\n      <Modal id=\"modal-basic\" show={show} size=\"medium\" onClose={() => setShow(false)} container={container}>\n        <TransitionView activeStep={activeStep} direction={direction}>\n          {steps}\n        </TransitionView>\n        <ModalFooterWizard\n          activeStep={activeStep}\n          stepCount={steps.length}\n          onStepClick={goToStep}\n          primaryButton={{ text: primaryButtonText, onClick: next }}\n          secondaryButton={{ text: \"Back\", onClick: back, disabled: isFirstStep }}\n        />\n      </Modal>\n    );\n  }\n};\n\nexport const FooterWithExtraContent: Story = {\n  decorators: [(Story, context) => withOpenedModalPreview(Story, { isDocsView: context.viewMode === \"docs\" })],\n  render: (_, { show, setShow, container }) => {\n    return (\n      <Modal id=\"modal-basic\" show={show} size=\"medium\" onClose={() => setShow(false)} container={container}>\n        <ModalBasicLayout>\n          <ModalHeader\n            title=\"Modal title\"\n            description={\n              <Text type=\"text1\">\n                Modal subtitle, can come with icon <Link inheritFontSize inlineText text=\"and link.\" />\n              </Text>\n            }\n          />\n          <ModalContent>\n            <Text type=\"text1\" align=\"inherit\" element=\"p\">\n              Modal content will appear here, you can custom it however you want, according to the user needs. Please\n              make sure that the content is clear for completing the relevant task.\n            </Text>\n          </ModalContent>\n        </ModalBasicLayout>\n        <ModalFooter\n          primaryButton={{ text: \"Confirm\", onClick: () => setShow(false) }}\n          secondaryButton={{ text: \"Cancel\", onClick: () => setShow(false) }}\n          renderSideAction={<Checkbox label=\"Don't show again\" />}\n        />\n      </Modal>\n    );\n  }\n};\n\nexport const Confirmation: Story = {\n  decorators: [\n    (Story, context) => withOpenedModalPreview(Story, { size: \"large\", isDocsView: context.viewMode === \"docs\" })\n  ],\n  render: (_, { show, setShow, container }) => {\n    return (\n      <Modal id=\"modal-basic\" show={show} size=\"small\" onClose={() => setShow(false)} container={container}>\n        <ModalBasicLayout>\n          <ModalHeader title=\"Want to delete?\" />\n          <ModalContent>\n            <Text type=\"text1\" align=\"inherit\" element=\"p\">\n              There are other tasks connected to this task. Deleting this task will remove any existing connections. It\n              will be kept in trash for 30 days.\n            </Text>\n          </ModalContent>\n        </ModalBasicLayout>\n        <ModalFooter\n          primaryButton={{ text: \"Confirm\", onClick: () => setShow(false) }}\n          secondaryButton={{ text: \"Cancel\", onClick: () => setShow(false) }}\n        />\n      </Modal>\n    );\n  }\n};\n\nexport const HeaderWithIconButton: Story = {\n  decorators: [(Story, context) => withOpenedModalPreview(Story, { isDocsView: context.viewMode === \"docs\" })],\n  render: (_, { show, setShow, container }) => {\n    return (\n      <Modal\n        id=\"modal-basic\"\n        show={show}\n        renderHeaderAction={<IconButton icon={Menu} size=\"small\" kind=\"tertiary\" aria-label=\"Open Menu\" />}\n        size=\"medium\"\n        onClose={() => setShow(false)}\n        container={container}\n      >\n        <ModalBasicLayout>\n          <ModalHeader\n            title=\"Modal title\"\n            description={\n              <Text type=\"text1\">\n                Modal subtitle, can come with icon <Link inheritFontSize inlineText text=\"and link.\" />\n              </Text>\n            }\n          />\n          <ModalContent>\n            <Text type=\"text1\" align=\"inherit\" element=\"p\">\n              Modal content will appear here, you can custom it however you want, according to the user needs. Please\n              make sure that the content is clear for completing the relevant task.\n            </Text>\n          </ModalContent>\n        </ModalBasicLayout>\n        <ModalFooter\n          primaryButton={{ text: \"Confirm\", onClick: () => setShow(false) }}\n          secondaryButton={{ text: \"Cancel\", onClick: () => setShow(false) }}\n          renderSideAction={<Checkbox label=\"Don't show again\" />}\n        />\n      </Modal>\n    );\n  }\n};\n\nexport const Animation: Story = {\n  render: () => {\n    const [showAnchor, setShowAnchor] = useState(false);\n    const [showCenterPop, setShowCenterPop] = useState(false);\n    const [showTransition, setShowTransition] = useState(false);\n\n    const anchorButtonRef = useRef<HTMLButtonElement>(null);\n\n    const transitionSteps = [\n      <ModalBasicLayout>\n        <ModalHeader title=\"Modal with wizard\" />\n        <ModalContent>\n          <Text type=\"text1\" align=\"inherit\" element=\"p\">\n            Modal content will appear here, you can custom it however you want, according to the user needs. Please make\n            sure that the content is clear for completing the relevant task.\n          </Text>\n        </ModalContent>\n      </ModalBasicLayout>,\n      <ModalBasicLayout>\n        <ModalHeader title=\"Modal with wizard\" />\n        <ModalContent>\n          <Text type=\"text1\" align=\"inherit\" element=\"p\">\n            Modal content will appear here, you can custom it however you want, according to the user needs. Please make\n            sure that the content is clear for completing the relevant task.\n          </Text>\n        </ModalContent>\n      </ModalBasicLayout>,\n      <ModalBasicLayout>\n        <ModalHeader title=\"Modal with wizard\" />\n        <ModalContent>\n          <Text type=\"text1\" align=\"inherit\" element=\"p\">\n            Modal content will appear here, you can custom it however you want, according to the user needs. Please make\n            sure that the content is clear for completing the relevant task.\n          </Text>\n        </ModalContent>\n      </ModalBasicLayout>\n    ];\n\n    const { activeStep, direction, next, back, isFirstStep, isLastStep, goToStep } = useWizard({\n      stepCount: transitionSteps.length\n    });\n\n    return (\n      <>\n        <Flex gap=\"large\" style={{ paddingBlock: 40 }}>\n          <Button ref={anchorButtonRef} onClick={() => setShowAnchor(true)}>\n            Anchor\n          </Button>\n          <Button onClick={() => setShowCenterPop(true)}>Center pop</Button>\n          <Button onClick={() => setShowTransition(true)}>Transition</Button>\n        </Flex>\n\n        <Modal\n          id=\"modal-basic-anchor\"\n          show={showAnchor}\n          anchorElementRef={anchorButtonRef}\n          size=\"medium\"\n          onClose={() => setShowAnchor(false)}\n        >\n          <ModalBasicLayout>\n            <ModalHeader\n              title=\"Modal title\"\n              description={\n                <Text type=\"text1\">\n                  Modal subtitle, can come with icon <Link inheritFontSize inlineText text=\"and link.\" />\n                </Text>\n              }\n            />\n            <ModalContent>\n              <Text type=\"text1\" align=\"inherit\" element=\"p\">\n                Modal content will appear here, you can custom it however you want, according to the user needs. Please\n                make sure that the content is clear for completing the relevant task.\n              </Text>\n            </ModalContent>\n          </ModalBasicLayout>\n          <ModalFooter\n            primaryButton={{ text: \"Confirm\", onClick: () => setShowAnchor(false) }}\n            secondaryButton={{ text: \"Cancel\", onClick: () => setShowAnchor(false) }}\n          />\n        </Modal>\n\n        <Modal id=\"modal-basic-center\" show={showCenterPop} size=\"medium\" onClose={() => setShowCenterPop(false)}>\n          <ModalBasicLayout>\n            <ModalHeader\n              title=\"Modal title\"\n              description={\n                <Text type=\"text1\">\n                  Modal subtitle, can come with icon <Link inheritFontSize inlineText text=\"and link.\" />\n                </Text>\n              }\n            />\n            <ModalContent>\n              <Text type=\"text1\" align=\"inherit\" element=\"p\">\n                Modal content will appear here, you can custom it however you want, according to the user needs. Please\n                make sure that the content is clear for completing the relevant task.\n              </Text>\n            </ModalContent>\n          </ModalBasicLayout>\n          <ModalFooter\n            primaryButton={{ text: \"Confirm\", onClick: () => setShowCenterPop(false) }}\n            secondaryButton={{ text: \"Cancel\", onClick: () => setShowCenterPop(false) }}\n          />\n        </Modal>\n\n        <Modal id=\"modal-basic-transition\" show={showTransition} size=\"medium\" onClose={() => setShowTransition(false)}>\n          <TransitionView activeStep={activeStep} direction={direction}>\n            {transitionSteps}\n          </TransitionView>\n          <ModalFooterWizard\n            activeStep={activeStep}\n            stepCount={transitionSteps.length}\n            onStepClick={goToStep}\n            primaryButton={{ text: isLastStep ? \"Confirm\" : \"Next\", onClick: next }}\n            secondaryButton={{ text: \"Back\", onClick: back, disabled: isFirstStep }}\n          />\n        </Modal>\n      </>\n    );\n  }\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Modal/ModalMediaLayout.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport * as MediaModalStories from \"./ModalMediaLayout.stories\";\nimport ratioDo from \"./assets/ratio-do.png\";\nimport ratioDont from \"./assets/ratio-dont.png\";\nimport styles from \"./Modal.stories.module.scss\";\nimport { MediaModalTip } from \"./ModalMediaLayout.stories.helpers\";\n\n<Meta of={MediaModalStories} />\n\n# Media Modal\n\nThe Media Modal includes a highlighted media section, followed by a textual content area. This modal is intended for cases when you need to catch the user’s attention using visual elements before they interact with the text. It’s ideal for introducing new features or short onboarding flows.\n\n<Canvas of={MediaModalStories.Overview} />\n\n### Import\n\nAll the Media Modal layout components can be imported from `@vibe/core`.\n\n```ts\nimport {\n  Modal,\n  ModalHeader,\n  ModalContent,\n  ModalMedia,\n  ModalFooter,\n  ModalFooterWizard,\n  ModalMediaLayout\n} from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Use when you want to prioritize images, videos, or other media before users engage with the text below.\",\n    \"Use for product highlights, feature releases, or any guides that require visuals first, followed by explanatory text.\"\n  ]}\n/>\n\n<MediaModalTip />\n\n## Use cases and examples\n\n### Wizard modal\n\nFor modals with multiple steps, use the ModalFooterWizard.\n\n<Canvas of={MediaModalStories.Wizard} />\n\n### Announcement modal\n\nAnnouncement modals used to effectively introduce new features or updates to users in a focused and engaging way. It is the media modal with predefine properties. To use an announcement modal, simply copy the code provided below.\n\n<Canvas of={MediaModalStories.Announcement} />\n\n### Header with extra icon button\n\nIn case of a need of an icon button in the modal header, you can use our default header \"Action slot\".\nYou can also use it as a <StorybookLink page=\"Buttons/MenuButton\">menu button</StorybookLink> component.\n\n<Canvas of={MediaModalStories.HeaderWithIconButton} />\n\n### Animation\n\nEach modal includes an animation type based on its entrance point, with wizard modals also featuring transition animations. The default is the element trigger animation, which can be replaced with a center pop animation if there's no specific trigger. Transition animation is used exclusively for wizard modals and cannot be changed or removed.\n\n<Canvas of={MediaModalStories.Animation} />\n\n## Do's and don'ts\n\n<ComponentRules\n  rules={[\n    {\n      componentContainerClassName: styles.largeComponentRule,\n      positive: {\n        component: (\n          <img\n            src={ratioDo}\n            alt=\"modal with nice ratio between image to content and footer\"\n            style={{ maxWidth: \"80%\" }}\n          />\n        ),\n        description: \"Keep a balanced ratio between the media section, to the content and footer section.\"\n      },\n      negative: {\n        component: (\n          <img\n            src={ratioDont}\n            alt=\"modal with bad ratio between image to content and footer, image is very small\"\n            style={{ maxWidth: \"100%\" }}\n          />\n        ),\n        description:\n          \"Don't create a media that will be too small or too big for the modal width, as it create unbalanced look.\"\n      }\n    }\n  ]}\n/>\n\n## Related components\n\n<RelatedComponents componentsNames={[\"ModalSideBySideLayout\", \"ModalBasicLayout\", \"Tipseen\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Modal/ModalMediaLayout.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const MediaModalTip = () => (\n  <div style={{ marginTop: 40 }}>\n    <Tip>\n      If your content is scrollable or wide (you need more space), consider using{\" \"}\n      <StorybookLink page=\"Components/Modal/Basic modal\" size=\"small\">\n        Basic modal\n      </StorybookLink>\n      .\n    </Tip>\n  </div>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/Modal/ModalMediaLayout.stories.tsx",
    "content": "import React, { useState } from \"react\";\nimport { type Meta, type StoryObj } from \"@storybook/react\";\nimport {\n  Modal,\n  ModalMediaLayout,\n  ModalMedia,\n  ModalHeader,\n  ModalContent,\n  ModalFooter,\n  ModalFooterWizard\n} from \"@vibe/core\";\nimport { useWizard, Button, Text, Link, Flex, IconButton, TransitionView } from \"@vibe/core\";\nimport { Menu } from \"@vibe/icons\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport mediaImage from \"./assets/media-image.png\";\nimport { withOpenedModalPreview } from \"./Modal.stories.helpers\";\n\ntype Story = StoryObj<typeof Modal>;\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: Modal\n});\n\nexport default {\n  title: \"Components/Modal/Media modal\",\n  component: Modal,\n  subcomponents: {\n    ModalMediaLayout,\n    ModalMedia,\n    ModalHeader,\n    ModalContent,\n    ModalFooter,\n    ModalFooterWizard,\n    TransitionView\n  },\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators,\n  parameters: {\n    layout: \"fullscreen\",\n    docs: {\n      liveEdit: {\n        scope: { mediaImage }\n      }\n    }\n  }\n} satisfies Meta<typeof Modal>;\n\nexport const Overview: Story = {\n  decorators: [\n    (Story, context) =>\n      withOpenedModalPreview(Story, {\n        size: \"large\",\n        isDocsView: context.viewMode === \"docs\",\n        allowFullViewInDocs: true\n      })\n  ],\n  render: (args, { show, setShow, container }) => {\n    return (\n      <Modal id=\"modal-media\" show={show} size=\"medium\" onClose={() => setShow(false)} container={container} {...args}>\n        <ModalMediaLayout>\n          <ModalMedia>\n            <img src={mediaImage} alt=\"media placeholder\" style={{ width: \"100%\", objectFit: \"cover\" }} />\n          </ModalMedia>\n          <ModalHeader title=\"Modal title\" />\n          <ModalContent>\n            <Text type=\"text1\" align=\"inherit\" element=\"p\">\n              The media modal is ideal for introducing new features or onboarding, the user can also{\" \"}\n              <Link inheritFontSize inlineText text=\"add a link\" />.\n            </Text>\n          </ModalContent>\n        </ModalMediaLayout>\n        <ModalFooter\n          primaryButton={{ text: \"Confirm\", onClick: () => setShow(false) }}\n          secondaryButton={{ text: \"Cancel\", onClick: () => setShow(false) }}\n        />\n      </Modal>\n    );\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const Wizard: Story = {\n  decorators: [\n    (Story, context) => withOpenedModalPreview(Story, { size: \"large\", isDocsView: context.viewMode === \"docs\" })\n  ],\n  render: (_, { show, setShow, container }) => {\n    const steps = [\n      <ModalMediaLayout>\n        <ModalMedia>\n          <img src={mediaImage} alt=\"media placeholder\" style={{ width: \"100%\", objectFit: \"cover\" }} />\n        </ModalMedia>\n        <ModalHeader title=\"Modal with wizard\" />\n        <ModalContent>\n          <Text type=\"text1\" align=\"inherit\" element=\"p\">\n            We have made some changes to our modal component. Keep reading to see what improvements we made.\n          </Text>\n        </ModalContent>\n      </ModalMediaLayout>,\n      <ModalMediaLayout>\n        <ModalMedia>\n          <img src={mediaImage} alt=\"media placeholder\" style={{ width: \"100%\", objectFit: \"cover\" }} />\n        </ModalMedia>\n        <ModalHeader title=\"Modal with wizard\" />\n        <ModalContent>\n          <Text type=\"text1\" align=\"inherit\" element=\"p\">\n            Now the modal can also allow wizard process, when including stepper in the modal footer, it also contain an\n            animation.\n          </Text>\n        </ModalContent>\n      </ModalMediaLayout>\n    ];\n\n    const { activeStep, direction, next, back, isFirstStep, isLastStep, goToStep } = useWizard({\n      stepCount: steps.length\n    });\n\n    const primaryButtonText = isLastStep ? \"Confirm\" : \"Next\";\n\n    return (\n      <Modal id=\"modal-media\" show={show} size=\"medium\" onClose={() => setShow(false)} container={container}>\n        <TransitionView activeStep={activeStep} direction={direction}>\n          {steps}\n        </TransitionView>\n        <ModalFooterWizard\n          activeStep={activeStep}\n          stepCount={steps.length}\n          onStepClick={goToStep}\n          primaryButton={{ text: primaryButtonText, onClick: next }}\n          secondaryButton={{ text: \"Back\", onClick: back, disabled: isFirstStep }}\n        />\n      </Modal>\n    );\n  }\n};\n\nexport const Announcement: Story = {\n  decorators: [\n    (Story, context) => withOpenedModalPreview(Story, { size: \"large\", isDocsView: context.viewMode === \"docs\" })\n  ],\n  render: (_, { show, setShow, container }) => {\n    return (\n      <Modal id=\"modal-media\" show={show} size=\"medium\" onClose={() => setShow(false)} container={container}>\n        <ModalMediaLayout>\n          <ModalMedia>\n            <img src={mediaImage} alt=\"media placeholder\" style={{ width: \"100%\", objectFit: \"cover\" }} />\n          </ModalMedia>\n          <ModalHeader title=\"Meet our new feature\" />\n          <ModalContent>\n            <Text type=\"text1\" align=\"inherit\" element=\"p\">\n              Introducing our latest feature designed to make your workflow faster and easier. For more details{\" \"}\n              <Link inheritFontSize inlineText text=\"click here\" />.\n            </Text>\n          </ModalContent>\n        </ModalMediaLayout>\n        <ModalFooter\n          primaryButton={{ text: \"Got it\", onClick: () => setShow(false) }}\n          secondaryButton={{ text: \"Dismiss\", onClick: () => setShow(false) }}\n        />\n      </Modal>\n    );\n  }\n};\n\nexport const HeaderWithIconButton: Story = {\n  decorators: [\n    (Story, context) => withOpenedModalPreview(Story, { size: \"large\", isDocsView: context.viewMode === \"docs\" })\n  ],\n  render: (_, { show, setShow, container }) => {\n    return (\n      <Modal\n        id=\"modal-media\"\n        show={show}\n        renderHeaderAction={<IconButton icon={Menu} size=\"small\" kind=\"tertiary\" aria-label=\"Open Menu\" />}\n        size=\"medium\"\n        onClose={() => setShow(false)}\n        container={container}\n      >\n        <ModalMediaLayout>\n          <ModalMedia>\n            <img src={mediaImage} alt=\"media placeholder\" style={{ width: \"100%\", objectFit: \"cover\" }} />\n          </ModalMedia>\n          <ModalHeader title=\"Modal title\" />\n          <ModalContent>\n            <Text type=\"text1\" align=\"inherit\" element=\"p\">\n              The media modal is ideal for introducing new features or onboarding, the user can also{\" \"}\n              <Link inheritFontSize inlineText text=\"add a link\" />.\n            </Text>\n          </ModalContent>\n        </ModalMediaLayout>\n        <ModalFooter\n          primaryButton={{ text: \"Confirm\", onClick: () => setShow(false) }}\n          secondaryButton={{ text: \"Cancel\", onClick: () => setShow(false) }}\n        />\n      </Modal>\n    );\n  }\n};\n\nexport const Animation: Story = {\n  render: () => {\n    const [showCenterPop, setShowCenterPop] = useState(false);\n    const [showTransition, setShowTransition] = useState(false);\n\n    const transitionSteps = [\n      <ModalMediaLayout>\n        <ModalMedia>\n          <img src={mediaImage} alt=\"media placeholder\" style={{ width: \"100%\", objectFit: \"cover\" }} />\n        </ModalMedia>\n        <ModalHeader title=\"Modal with wizard\" />\n        <ModalContent>\n          <Text type=\"text1\" align=\"inherit\" element=\"p\">\n            We have made some changes to our modal component. Keep reading to see what improvements we made.\n          </Text>\n        </ModalContent>\n      </ModalMediaLayout>,\n      <ModalMediaLayout>\n        <ModalMedia>\n          <img src={mediaImage} alt=\"media placeholder\" style={{ width: \"100%\", objectFit: \"cover\" }} />\n        </ModalMedia>\n        <ModalHeader title=\"Modal with wizard\" />\n        <ModalContent>\n          <Text type=\"text1\" align=\"inherit\" element=\"p\">\n            Now the modal can also allow wizard process, when including stepper in the modal footer, it also contain an\n            animation.\n          </Text>\n        </ModalContent>\n      </ModalMediaLayout>\n    ];\n\n    const { activeStep, direction, next, back, isFirstStep, isLastStep, goToStep } = useWizard({\n      stepCount: transitionSteps.length\n    });\n\n    return (\n      <>\n        <Flex gap=\"large\" style={{ paddingBlock: 40 }}>\n          <Button onClick={() => setShowCenterPop(true)}>Center pop</Button>\n          <Button onClick={() => setShowTransition(true)}>Transition</Button>\n        </Flex>\n\n        <Modal id=\"modal-media-center\" show={showCenterPop} size=\"medium\" onClose={() => setShowCenterPop(false)}>\n          <ModalMediaLayout>\n            <ModalMedia>\n              <img src={mediaImage} alt=\"media placeholder\" style={{ width: \"100%\", objectFit: \"cover\" }} />\n            </ModalMedia>\n            <ModalHeader title=\"Modal title\" />\n            <ModalContent>\n              <Text type=\"text1\" align=\"inherit\" element=\"p\">\n                The media modal is ideal for introducing new features or onboarding, the user can also{\" \"}\n                <Link inheritFontSize inlineText text=\"add a link\" />.\n              </Text>\n            </ModalContent>\n          </ModalMediaLayout>\n          <ModalFooter\n            primaryButton={{ text: \"Confirm\", onClick: () => setShowCenterPop(false) }}\n            secondaryButton={{ text: \"Cancel\", onClick: () => setShowCenterPop(false) }}\n          />\n        </Modal>\n\n        <Modal id=\"modal-media-transition\" show={showTransition} size=\"medium\" onClose={() => setShowTransition(false)}>\n          <TransitionView activeStep={activeStep} direction={direction}>\n            {transitionSteps}\n          </TransitionView>\n          <ModalFooterWizard\n            activeStep={activeStep}\n            stepCount={transitionSteps.length}\n            onStepClick={goToStep}\n            primaryButton={{ text: isLastStep ? \"Confirm\" : \"Next\", onClick: next }}\n            secondaryButton={{ text: \"Back\", onClick: back, disabled: isFirstStep }}\n          />\n        </Modal>\n      </>\n    );\n  }\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Modal/ModalSideBySideLayout.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport * as SideBySideModalStories from \"./ModalSideBySideLayout.stories\";\nimport breakdownDo from \"./assets/breakdown-do.png\";\nimport breakdownDont from \"./assets/breakdown-dont.png\";\nimport columnsDo from \"./assets/columns-do.png\";\nimport columnsDont from \"./assets/columns-dont.png\";\nimport wizardDo from \"./assets/wizard-do.png\";\nimport wizardDont from \"./assets/wizard-dont.png\";\nimport styles from \"./Modal.stories.module.scss\";\nimport { SideBySideModalTip } from \"./ModalSideBySideLayout.stories.helpers\";\n\n<Meta of={SideBySideModalStories} />\n\n# Side-by-side modal\n\nThe Side-by-side Modal offers a layout with two distinct sections. The left side is reserved for providing information or inputs, like text fields or dropdown. The right side is reserved for visual media that supports the content on the left, like an image that adds context. This layout works best when users need to reference visual elements alongside textual information.\n\n<Canvas of={SideBySideModalStories.Overview} />\n\n### Import\n\nAll the Side-by-side Modal layout components can be imported from `@vibe/core`.\n\n```ts\nimport {\n  Modal,\n  ModalHeader,\n  ModalContent,\n  ModalMedia,\n  ModalFooter,\n  ModalFooterWizard,\n  ModalSideBySideLayout\n} from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"This modal emphasis the balance between the textual inputs and visual media, so one doesn’t overpower the other.\",\n    \"Use when you need to support textual inputs with visual media, like a visual diagram or set of instructions.\",\n    \"Use when users need to compare textual information with visual media, like a preview or data visualization.\"\n  ]}\n/>\n\n<SideBySideModalTip />\n\n## Use cases and examples\n\n### Wizard modal\n\nFor modals with multiple steps, use the ModalFooterWizard. You can use it to break down the tasks. Not every step must include an image.\n\n<Canvas of={SideBySideModalStories.Wizard} />\n\n### Header with icon button\n\nIn case of a need of an icon button in the modal header, you can use our default header \"Action slot\".\nYou can also use it as a <StorybookLink page=\"Buttons/MenuButton\">menu button</StorybookLink> component.\n\n<Canvas of={SideBySideModalStories.HeaderWithIconButton} />\n\n### Animation\n\nEach modal includes an animation type based on its entrance point, with wizard modals also featuring transition animations. The default is the center pop animation, which can be replaced with an anchor animation if there is a specific trigger to open the modal. Transition animation is used exclusively for wizard modals and cannot be changed or removed.\n\n<Canvas of={SideBySideModalStories.Animation} />\n\n## Do's and don'ts\n\n<ComponentRules\n  rules={[\n    {\n      componentContainerClassName: styles.largeComponentRule,\n      positive: {\n        component: (\n          <img\n            src={breakdownDo}\n            alt=\"modal without scroll and without much content in left side\"\n            style={{ maxWidth: \"100%\" }}\n          />\n        ),\n        description: \"Split up processes with several tasks into distinct steps using our wizard modal footer.\"\n      },\n      negative: {\n        component: (\n          <img\n            src={breakdownDont}\n            alt=\"modal with scroll and with a lot of content in left side\"\n            style={{ maxWidth: \"100%\" }}\n          />\n        ),\n        description: \"Don't use scrolling for side-by-side modals in case of several tasks.\"\n      }\n    },\n    {\n      componentContainerClassName: styles.largeComponentRule,\n      positive: {\n        component: (\n          <img\n            src={columnsDo}\n            alt=\"modal with side by side layout without media content in its right side\"\n            style={{ maxWidth: \"100%\" }}\n          />\n        ),\n        description: \"The right side of the modal is for media content. You can remove it if you don't need it.\"\n      },\n      negative: {\n        component: (\n          <img\n            src={columnsDont}\n            alt=\"modal with side by side layout with extra content in its right side\"\n            style={{ maxWidth: \"100%\" }}\n          />\n        ),\n        description: (\n          <>\n            Don't turn this modal into a two-column grid. If you don't need an image, consider using the{\" \"}\n            <StorybookLink page=\"Components/Modal/Basic modal\">basic modal</StorybookLink>.\n          </>\n        )\n      }\n    },\n    {\n      componentContainerClassName: styles.largeComponentRule,\n      positive: {\n        component: (\n          <img\n            src={wizardDo}\n            alt=\"modal with a wizard footer with the last button enabled\"\n            style={{ maxWidth: \"100%\" }}\n          />\n        ),\n        description:\n          \"When using a wizard modal, allow the user to complete the process and close the modal by leaving the last CTA enabled. \"\n      },\n      negative: {\n        component: (\n          <img\n            src={wizardDont}\n            alt=\"modal with a wizard footer with the last button disabled\"\n            style={{ maxWidth: \"100%\" }}\n          />\n        ),\n        description:\n          \"Don’t finish the Tipseen wizard process with a disabled CTA. Also, when in first step, make sure the “Back” button is disabled.\"\n      }\n    }\n  ]}\n/>\n\n## Related components\n\n<RelatedComponents componentsNames={[\"ModalMediaLayout\", \"ModalBasicLayout\", \"Tipseen\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Modal/ModalSideBySideLayout.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const SideBySideModalTip = () => (\n  <div style={{ marginTop: 40 }}>\n    <Tip>\n      If your content is scrollable, consider using{\" \"}\n      <StorybookLink page=\"Components/Modal/Basic modal\" size=\"small\">\n        Basic modal\n      </StorybookLink>\n      .\n    </Tip>\n  </div>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/Modal/ModalSideBySideLayout.stories.tsx",
    "content": "import React, { useRef, useState } from \"react\";\nimport { type Meta, type StoryObj } from \"@storybook/react\";\nimport {\n  Modal,\n  ModalSideBySideLayout,\n  ModalMedia,\n  ModalHeader,\n  ModalContent,\n  ModalFooter,\n  ModalFooterWizard\n} from \"@vibe/core\";\nimport {\n  TransitionView,\n  useWizard,\n  Button,\n  Text,\n  Link,\n  Flex,\n  IconButton,\n  Dropdown,\n  Label,\n  TextField\n} from \"@vibe/core\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { withOpenedModalPreview } from \"./Modal.stories.helpers\";\nimport mediaImage from \"./assets/sbs-media-image.png\";\nimport { Menu } from \"@vibe/icons\";\n\ntype Story = StoryObj<typeof Modal>;\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: Modal\n});\n\nexport default {\n  title: \"Components/Modal/Side by side modal\",\n  component: Modal,\n  subcomponents: {\n    ModalSideBySideLayout,\n    ModalMedia,\n    ModalHeader,\n    ModalContent,\n    ModalFooter,\n    ModalFooterWizard,\n    TransitionView\n  },\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators,\n  parameters: {\n    layout: \"fullscreen\",\n    docs: {\n      liveEdit: {\n        scope: { mediaImage }\n      }\n    }\n  }\n} satisfies Meta<typeof Modal>;\n\nexport const Overview: Story = {\n  decorators: [\n    (Story, context) =>\n      withOpenedModalPreview(Story, {\n        size: \"medium\",\n        isDocsView: context.viewMode === \"docs\",\n        allowFullViewInDocs: true\n      })\n  ],\n  render: (args, { show, setShow, container }) => {\n    const steps = [\n      <ModalSideBySideLayout>\n        <ModalHeader\n          title=\"Side by side modal\"\n          description={\n            <Text type=\"text1\">\n              Modal subtitle, can come with icon <Link inheritFontSize inlineText text=\"and link.\" />\n            </Text>\n          }\n        />\n        <ModalContent>\n          <Text type=\"text1\" align=\"inherit\" element=\"p\">\n            Modal content will appear here, you can custom it however you want, according to the user needs. Please make\n            sure that the content is clear for completing the relevant task.\n          </Text>\n        </ModalContent>\n        <ModalMedia>\n          <img src={mediaImage} alt=\"side by side placeholder\" style={{ width: \"100%\", objectFit: \"cover\" }} />\n        </ModalMedia>\n      </ModalSideBySideLayout>,\n      <ModalSideBySideLayout>\n        <ModalHeader\n          title=\"Side by side modal\"\n          description={\n            <Text type=\"text1\">\n              Modal subtitle, can come with icon <Link inheritFontSize inlineText text=\"and link.\" />\n            </Text>\n          }\n        />\n        <ModalContent>\n          <Text type=\"text1\" align=\"inherit\" element=\"p\">\n            Modal content will appear here, you can custom it however you want, according to the user needs. Please make\n            sure that the content is clear for completing the relevant task.\n          </Text>\n        </ModalContent>\n        <ModalMedia>\n          <img src={mediaImage} alt=\"side by side placeholder\" style={{ width: \"100%\", objectFit: \"cover\" }} />\n        </ModalMedia>\n      </ModalSideBySideLayout>\n    ];\n\n    const { activeStep, direction, next, back, isFirstStep, isLastStep, goToStep } = useWizard({\n      stepCount: steps.length\n    });\n\n    const primaryButtonText = isLastStep ? \"Confirm\" : \"Next\";\n\n    return (\n      <Modal\n        id=\"modal-sbs\"\n        show={show}\n        size=\"large\"\n        onClose={() => setShow(false)}\n        style={{ height: 400 }}\n        container={container}\n        {...args}\n      >\n        <TransitionView activeStep={activeStep} direction={direction}>\n          {steps}\n        </TransitionView>\n        <ModalFooterWizard\n          activeStep={activeStep}\n          stepCount={steps.length}\n          onStepClick={goToStep}\n          primaryButton={{ text: primaryButtonText, onClick: next }}\n          secondaryButton={{ text: \"Back\", onClick: back, disabled: isFirstStep }}\n        />\n      </Modal>\n    );\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const Wizard: Story = {\n  decorators: [\n    (Story, context) => withOpenedModalPreview(Story, { size: \"medium\", isDocsView: context.viewMode === \"docs\" })\n  ],\n  render: (_, { show, setShow, container }) => {\n    const dropdownOptions = [\n      {\n        label: \"English\",\n        value: \"en\"\n      },\n      {\n        label: \"Hebrew\",\n        value: \"he\"\n      }\n    ];\n\n    const steps = [\n      <ModalSideBySideLayout>\n        <ModalHeader title=\"Modal with wizard\" description=\"Fill in the details\" />\n        <ModalContent>\n          <Flex direction=\"column\" gap=\"medium\">\n            <TextField title=\"Full name\" placeholder=\"John Dow\" />\n            <TextField title=\"Email\" placeholder=\"Email@monday.com\" />\n          </Flex>\n        </ModalContent>\n        <ModalMedia>\n          <img src={mediaImage} alt=\"side by side placeholder\" style={{ width: \"100%\", objectFit: \"cover\" }} />\n        </ModalMedia>\n      </ModalSideBySideLayout>,\n      <ModalSideBySideLayout>\n        <ModalHeader title=\"Modal with wizard\" description=\"Update your settings defenitions\" />\n        <ModalContent>\n          <Flex direction=\"column\" gap=\"medium\" align=\"stretch\">\n            <TextField title=\"Fill address\" placeholder=\"City, street, number\" />\n            <Flex direction=\"column\" align=\"stretch\">\n              <Label labelText=\"Language preferences\" />\n              <Dropdown\n                insideOverflowWithTransformContainer\n                insideLayerContext\n                size=\"small\"\n                placeholder={dropdownOptions[0].label}\n                options={dropdownOptions}\n              />\n            </Flex>\n          </Flex>\n        </ModalContent>\n        <ModalMedia>\n          <img src={mediaImage} alt=\"side by side placeholder\" style={{ width: \"100%\", objectFit: \"cover\" }} />\n        </ModalMedia>\n      </ModalSideBySideLayout>\n    ];\n\n    const { activeStep, direction, next, back, isFirstStep, isLastStep, goToStep } = useWizard({\n      stepCount: steps.length\n    });\n\n    const primaryButtonText = isLastStep ? \"Confirm\" : \"Next\";\n\n    return (\n      <Modal\n        id=\"modal-sbs\"\n        show={show}\n        size=\"large\"\n        onClose={() => setShow(false)}\n        container={container}\n        style={{ height: 400 }}\n      >\n        <TransitionView activeStep={activeStep} direction={direction}>\n          {steps}\n        </TransitionView>\n        <ModalFooterWizard\n          activeStep={activeStep}\n          stepCount={steps.length}\n          onStepClick={goToStep}\n          primaryButton={{ text: primaryButtonText, onClick: next }}\n          secondaryButton={{ text: \"Back\", onClick: back, disabled: isFirstStep }}\n        />\n      </Modal>\n    );\n  }\n};\n\nexport const HeaderWithIconButton: Story = {\n  decorators: [\n    (Story, context) => withOpenedModalPreview(Story, { size: \"medium\", isDocsView: context.viewMode === \"docs\" })\n  ],\n  render: (_, { show, setShow, container }) => {\n    return (\n      <Modal\n        id=\"modal-sbs\"\n        show={show}\n        renderHeaderAction={<IconButton icon={Menu} size=\"small\" kind=\"tertiary\" aria-label=\"Open Menu\" />}\n        size=\"large\"\n        onClose={() => setShow(false)}\n        container={container}\n        style={{ height: 400 }}\n      >\n        <ModalSideBySideLayout>\n          <ModalHeader title=\"Modal title\" />\n          <ModalContent>\n            <Text type=\"text1\" align=\"inherit\" element=\"p\">\n              Modal content will appear here, you can custom it however you want, according to the user needs. Please\n              make sure that the content is clear for completing the relevant task.\n            </Text>\n          </ModalContent>\n          <ModalMedia>\n            <img src={mediaImage} alt=\"side by side placeholder\" style={{ width: \"100%\", objectFit: \"cover\" }} />\n          </ModalMedia>\n        </ModalSideBySideLayout>\n        <ModalFooter\n          primaryButton={{ text: \"Confirm\", onClick: () => setShow(false) }}\n          secondaryButton={{ text: \"Cancel\", onClick: () => setShow(false) }}\n        />\n      </Modal>\n    );\n  }\n};\n\nexport const Animation: Story = {\n  render: () => {\n    const [showAnchor, setShowAnchor] = useState(false);\n    const [showCenterPop, setShowCenterPop] = useState(false);\n    const [showTransition, setShowTransition] = useState(false);\n\n    const anchorButtonRef = useRef<HTMLButtonElement>(null);\n\n    const transitionSteps = [\n      <ModalSideBySideLayout>\n        <ModalHeader title=\"Modal title\" />\n        <ModalContent>\n          <Text type=\"text1\" align=\"inherit\" element=\"p\">\n            Modal content will appear here, you can custom it however you want, according to the user needs. Please make\n            sure that the content is clear for completing the relevant task.\n          </Text>\n        </ModalContent>\n        <ModalMedia>\n          <img src={mediaImage} alt=\"side by side placeholder\" style={{ width: \"100%\", objectFit: \"cover\" }} />\n        </ModalMedia>\n      </ModalSideBySideLayout>,\n      <ModalSideBySideLayout>\n        <ModalHeader title=\"Modal title\" />\n        <ModalContent>\n          <Text type=\"text1\" align=\"inherit\" element=\"p\">\n            Modal content will appear here, you can custom it however you want, according to the user needs. Please make\n            sure that the content is clear for completing the relevant task.\n          </Text>\n        </ModalContent>\n        <ModalMedia>\n          <img src={mediaImage} alt=\"side by side placeholder\" style={{ width: \"100%\", objectFit: \"cover\" }} />\n        </ModalMedia>\n      </ModalSideBySideLayout>,\n      <ModalSideBySideLayout>\n        <ModalHeader title=\"Modal title\" />\n        <ModalContent>\n          <Text type=\"text1\" align=\"inherit\" element=\"p\">\n            Modal content will appear here, you can custom it however you want, according to the user needs. Please make\n            sure that the content is clear for completing the relevant task.\n          </Text>\n        </ModalContent>\n        <ModalMedia>\n          <img src={mediaImage} alt=\"side by side placeholder\" style={{ width: \"100%\", objectFit: \"cover\" }} />\n        </ModalMedia>\n      </ModalSideBySideLayout>\n    ];\n\n    const { activeStep, direction, next, back, isFirstStep, isLastStep, goToStep } = useWizard({\n      stepCount: transitionSteps.length\n    });\n\n    return (\n      <>\n        <Flex gap=\"large\" style={{ paddingBlock: 40 }}>\n          <Button ref={anchorButtonRef} onClick={() => setShowAnchor(true)}>\n            Anchor\n          </Button>\n          <Button onClick={() => setShowCenterPop(true)}>Center pop</Button>\n          <Button onClick={() => setShowTransition(true)}>Transition</Button>\n        </Flex>\n\n        <Modal\n          id=\"modal-sbs-anchor\"\n          show={showAnchor}\n          anchorElementRef={anchorButtonRef}\n          size=\"large\"\n          onClose={() => setShowAnchor(false)}\n          style={{ height: 400 }}\n        >\n          <ModalSideBySideLayout>\n            <ModalHeader title=\"Modal title\" />\n            <ModalContent>\n              <Text type=\"text1\" align=\"inherit\" element=\"p\">\n                Modal content will appear here, you can custom it however you want, according to the user needs. Please\n                make sure that the content is clear for completing the relevant task.\n              </Text>\n            </ModalContent>\n            <ModalMedia>\n              <img src={mediaImage} alt=\"side by side placeholder\" style={{ width: \"100%\", objectFit: \"cover\" }} />\n            </ModalMedia>\n          </ModalSideBySideLayout>\n          <ModalFooter\n            primaryButton={{ text: \"Confirm\", onClick: () => setShowAnchor(false) }}\n            secondaryButton={{ text: \"Cancel\", onClick: () => setShowAnchor(false) }}\n          />\n        </Modal>\n\n        <Modal\n          id=\"modal-sbs-center\"\n          show={showCenterPop}\n          size=\"large\"\n          onClose={() => setShowCenterPop(false)}\n          style={{ height: 400 }}\n        >\n          <ModalSideBySideLayout>\n            <ModalHeader title=\"Modal title\" />\n            <ModalContent>\n              <Text type=\"text1\" align=\"inherit\" element=\"p\">\n                Modal content will appear here, you can custom it however you want, according to the user needs. Please\n                make sure that the content is clear for completing the relevant task.\n              </Text>\n            </ModalContent>\n            <ModalMedia>\n              <img src={mediaImage} alt=\"side by side placeholder\" style={{ width: \"100%\", objectFit: \"cover\" }} />\n            </ModalMedia>\n          </ModalSideBySideLayout>\n          <ModalFooter\n            primaryButton={{ text: \"Confirm\", onClick: () => setShowCenterPop(false) }}\n            secondaryButton={{ text: \"Cancel\", onClick: () => setShowCenterPop(false) }}\n          />\n        </Modal>\n\n        <Modal\n          id=\"modal-sbs-transition\"\n          show={showTransition}\n          size=\"large\"\n          onClose={() => setShowTransition(false)}\n          style={{ height: 400 }}\n        >\n          <TransitionView activeStep={activeStep} direction={direction}>\n            {transitionSteps}\n          </TransitionView>\n          <ModalFooterWizard\n            activeStep={activeStep}\n            stepCount={transitionSteps.length}\n            onStepClick={goToStep}\n            primaryButton={{ text: isLastStep ? \"Confirm\" : \"Next\", onClick: next }}\n            secondaryButton={{ text: \"Back\", onClick: back, disabled: isFirstStep }}\n          />\n        </Modal>\n      </>\n    );\n  }\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/MultiStepIndicator/MultiStepIndicator.mdx",
    "content": "import { MultiStepIndicator } from \"@vibe/core\";\nimport { Meta } from \"@storybook/blocks\";\nimport { firstSteps, secondSteps, thirdSteps, TipNotWhatYouAreLookingFor } from \"./MultiStepIndicator.stories.helpers\";\nimport * as MultiStepIndicatorStories from \"./MultiStepIndicator.stories\";\n\n<Meta of={MultiStepIndicatorStories} />\n\n# MultiStepIndicator\n\nTabular navigation component that helps users visualize and interact with a multi-step process.\n\n<Canvas of={MultiStepIndicatorStories.Overview} />\n\n### Import\n\n```js\nimport { MultiStepIndicator } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Use wizard to break a larger goal into manageable steps.\",\n    \"If a workflow needs more than 6 steps, consider how you might simplify it or break it up into multiple tasks.\",\n    \"Always position the wizard at the top of the multi-step process so that the user has a common reference point as they move between steps.\"\n  ]}\n/>\n\n<TipNotWhatYouAreLookingFor />\n\n## Variants\n\n### Placements\n\nPlacements\n\n<Canvas of={MultiStepIndicatorStories.Placements} />\n\n### Types\n\nThere are 4 types: Primary, success, danger, dark.\n\n<Canvas of={MultiStepIndicatorStories.Types} />\n\n### Sizes\n\nCompact is a smaller version of the Regular Wizard Stepper, and is suitable for smaller containers. In case you need to display more content, use the Regular size. As of now, vertical placement is not supported.\n\n<Canvas of={MultiStepIndicatorStories.Sizes} />\n\n### Fulfilled Icons\n\n<Canvas of={MultiStepIndicatorStories.FulfilledIcons} />\n\n### Transition Animation\n\nState transition automatic example\n\n<Canvas of={MultiStepIndicatorStories.TransitionAnimation} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: (\n          <MultiStepIndicator\n            steps={firstSteps}\n            textPlacement=\"vertical\"\n            className=\"monday-storybook-multiStepIndicator_big-size\"\n          />\n        ),\n        description:\n          \"Be consistent with the information you include under each step. If you’re using a subtitle on one step, use for all steps.\"\n      },\n      negative: {\n        component: (\n          <MultiStepIndicator\n            steps={secondSteps}\n            textPlacement=\"vertical\"\n            className=\"monday-storybook-multiStepIndicator_big-size\"\n          />\n        ),\n        description: \"Don’t place subheader on one step only.\"\n      }\n    },\n    {\n      positive: {\n        component: (\n          <div className=\"monday-storybook-multiStepIndicator_box-wrapper\">\n            <MultiStepIndicator\n              steps={thirdSteps}\n              textPlacement=\"vertical\"\n              className=\"monday-storybook-multiStepIndicator_small-size\"\n            />\n            <div className=\"monday-storybook-multiStepIndicator_spacing\" />\n          </div>\n        ),\n        description:\n          \"While using the wizard component, keep the default spacing between the wizard steps, even if the wizard width is smaller than the page width.\"\n      },\n      className: \"monday-storybook-multiStepIndicator_overflow\",\n      negative: {\n        component: (\n          <div className=\"monday-storybook-multiStepIndicator_box-wrapper\">\n            <MultiStepIndicator\n              steps={thirdSteps}\n              textPlacement=\"vertical\"\n              className=\"monday-storybook-multiStepIndicator_line\"\n              dividerComponentClassName=\"monday-storybook-multiStepIndicator_line_divider\"\n            />\n            <div className=\"monday-storybook-multiStepIndicator_spacing\" />\n          </div>\n        ),\n        description: \"Do not override the spacing between the wizard steps according to the page width.\"\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### Multi step wizard\n\n<Canvas of={MultiStepIndicatorStories.MultiStepWizard} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Tabs\", \"Breadcrumbs\", \"Steps\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/MultiStepIndicator/MultiStepIndicator.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\nimport { type Step } from \"../MultiStep.types\";\n\nexport const firstSteps: Step[] = [\n  {\n    status: \"fulfilled\",\n    titleText: \"Plan options\",\n    subtitleText: \"Choose plan\"\n  },\n  {\n    status: \"pending\",\n    titleText: \"Seats\",\n    subtitleText: \"Number of users\"\n  },\n  {\n    status: \"pending\",\n    titleText: \"Paying method\",\n    subtitleText: \"How to pay\"\n  }\n];\n\nexport const secondSteps: Step[] = [\n  {\n    status: \"fulfilled\",\n    titleText: \"Plan options\",\n    subtitleText: \"\"\n  },\n  {\n    status: \"pending\",\n    titleText: \"Seats\",\n    subtitleText: \"Number of users\"\n  },\n  {\n    status: \"pending\",\n    titleText: \"Paying method\",\n    subtitleText: \"How to pay\"\n  }\n];\n\nexport const thirdSteps: Step[] = [\n  {\n    status: \"fulfilled\",\n    titleText: \"Plan\",\n    subtitleText: \"\"\n  },\n  {\n    status: \"pending\",\n    titleText: \"Seats\",\n    subtitleText: \"\"\n  },\n  {\n    status: \"pending\",\n    titleText: \"Method\",\n    subtitleText: \"\"\n  }\n];\n\nexport const TipNotWhatYouAreLookingFor = () => (\n  <Tip title=\"Not what you were looking for?\">\n    In order to navigate between content without a linear progress, use the{\" \"}\n    <StorybookLink page=\"Components/Tabs\" size=\"small\">\n      Tabs\n    </StorybookLink>{\" \"}\n    or{\" \"}\n    <StorybookLink page=\"Components/ButtonGroup\" size=\"small\">\n      Button group\n    </StorybookLink>{\" \"}\n    component.\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/MultiStepIndicator/MultiStepIndicator.stories.tsx",
    "content": "import React from \"react\";\nimport { useMemo, useState, useEffect } from \"react\";\nimport { MultiStepIndicator, type Step } from \"@vibe/core\";\nimport { createComponentTemplate } from \"vibe-storybook-components\";\nimport { Upgrade } from \"@vibe/icons\";\n\nexport default {\n  title: \"Components/MultiStepIndicator\",\n  component: MultiStepIndicator\n};\n\nconst multiStepIndicatorTemplate = createComponentTemplate(MultiStepIndicator);\n\nexport const Overview = {\n  render: multiStepIndicatorTemplate.bind({}),\n  name: \"Overview\",\n\n  args: {\n    id: \"overview-multi-step\",\n    steps: [\n      {\n        key: \"FULFILLED\",\n        status: \"fulfilled\",\n        titleText: \"Everything you can do with Monday\",\n        subtitleText: \"Subtitle\"\n      },\n      {\n        key: \"PENDING\",\n        status: \"pending\",\n        titleText: \"Everything you can do with Monday\",\n        subtitleText: \"Subtitle\"\n      },\n      {\n        key: \"PENDING-2\",\n        status: \"pending\",\n        titleText: \"Everything you can do with Monday\",\n        subtitleText: \"Subtitle\"\n      }\n    ]\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const Placements = {\n  render: () => {\n    const steps: Step[] = useMemo(\n      () => [\n        {\n          key: \"FULFILLED\",\n          status: \"fulfilled\",\n          titleText: \"Fulfilled title\",\n          subtitleText: \"Fulfilled subtitle\"\n        },\n        {\n          key: \"ACTIVE\",\n          status: \"active\",\n          titleText: \"Active title\",\n          subtitleText: \"Active subtitle\"\n        },\n        {\n          key: \"PENDING\",\n          status: \"pending\",\n          titleText: \"Pending title\",\n          subtitleText: \"Pending subtitle\"\n        }\n      ],\n      []\n    );\n\n    return (\n      <div>\n        Vertical\n        <MultiStepIndicator id=\"placements-vertical\" textPlacement=\"vertical\" steps={steps} />\n        Horizontal\n        <MultiStepIndicator id=\"placements-horizontal\" steps={steps} />\n      </div>\n    );\n  }\n};\n\nexport const Types = {\n  render: () => {\n    const steps: Step[] = useMemo(\n      () => [\n        {\n          key: \"FULFILLED\",\n          status: \"fulfilled\",\n          titleText: \"Fulfilled title\",\n          subtitleText: \"Fulfilled subtitle\"\n        },\n        {\n          key: \"ACTIVE\",\n          status: \"active\",\n          titleText: \"Active title\",\n          subtitleText: \"Active subtitle\"\n        },\n        {\n          key: \"PENDING\",\n          status: \"pending\",\n          titleText: \"Pending title\",\n          subtitleText: \"Pending subtitle\"\n        }\n      ],\n      []\n    );\n\n    return (\n      <div>\n        Primary\n        <MultiStepIndicator id=\"types-primary\" steps={steps} type=\"primary\" />\n        Success\n        <MultiStepIndicator id=\"types-success\" steps={steps} type=\"success\" />\n        Danger\n        <MultiStepIndicator id=\"types-danger\" steps={steps} type=\"danger\" />\n        Dark\n        <MultiStepIndicator id=\"types-dark\" aria-label=\"Dark type multi-step indicator\" steps={steps} type=\"dark\" />\n      </div>\n    );\n  }\n};\n\nexport const Sizes = {\n  render: () => {\n    const steps: Step[] = useMemo(\n      () => [\n        {\n          key: \"FULFILLED\",\n          status: \"fulfilled\",\n          titleText: \"Fulfilled title\",\n          subtitleText: \"Fulfilled subtitle\"\n        },\n        {\n          key: \"ACTIVE\",\n          status: \"active\",\n          titleText: \"Active title\",\n          subtitleText: \"Active subtitle\"\n        },\n        {\n          key: \"PENDING\",\n          status: \"pending\",\n          titleText: \"Pending\",\n          subtitleText: \"Pending subtitle\"\n        }\n      ],\n      []\n    );\n\n    return (\n      <div>\n        Regular\n        <MultiStepIndicator id=\"sizes-regular\" steps={steps} size=\"regular\" />\n        Compact\n        <MultiStepIndicator id=\"sizes-compact\" steps={steps} size=\"compact\" />\n      </div>\n    );\n  }\n};\n\nexport const FulfilledIcons = {\n  render: () => {\n    const steps: Step[] = useMemo(\n      () => [\n        {\n          key: \"FULFILLED\",\n          status: \"fulfilled\",\n          titleText: \"Fulfilled title\",\n          subtitleText: \"Fulfilled subtitle\"\n        },\n        {\n          key: \"ACTIVE\",\n          status: \"active\",\n          titleText: \"Active title\",\n          subtitleText: \"Active subtitle\"\n        },\n        {\n          key: \"PENDING\",\n          status: \"pending\",\n          titleText: \"Pending title\",\n          subtitleText: \"Pending subtitle\"\n        }\n      ],\n      []\n    );\n\n    return (\n      <div>\n        Default (check)\n        <MultiStepIndicator id=\"icons-default\" steps={steps} />\n        Number instead of icon\n        <MultiStepIndicator id=\"icons-numbers\" steps={steps} isFulfilledStepDisplayNumber={true} />\n        Custom\n        <MultiStepIndicator id=\"icons-custom\" steps={steps} fulfilledStepIcon={Upgrade} />\n      </div>\n    );\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Upgrade }\n      }\n    }\n  }\n};\n\nexport const TransitionAnimation = {\n  render: () => {\n    const initialSteps = useMemo<Step[]>(\n      () => [\n        {\n          key: \"PENDING\",\n          status: \"pending\",\n          titleText: \"First step title\",\n          subtitleText: \"First subtitle\"\n        },\n        {\n          key: \"PENDING-2\",\n          status: \"pending\",\n          titleText: \"Second step title\",\n          subtitleText: \"Second subtitle\"\n        },\n        {\n          key: \"PENDING-3\",\n          status: \"pending\",\n          titleText: \"Third step title\",\n          subtitleText: \"Third subtitle\"\n        }\n      ],\n      []\n    );\n\n    const [steps, setSteps] = useState<Step[]>(initialSteps);\n\n    useEffect(() => {\n      const getNextStepsState = (currentSteps: Step[]): Step[] => {\n        const currentStepIndex = currentSteps.findIndex(step => step.status !== \"fulfilled\");\n\n        if (currentStepIndex === -1) {\n          return initialSteps;\n        }\n\n        const newSteps = [...currentSteps];\n        const stepToUpdate = newSteps[currentStepIndex];\n\n        if (stepToUpdate.status === \"pending\") {\n          newSteps[currentStepIndex] = { ...stepToUpdate, status: \"active\" };\n        } else {\n          newSteps[currentStepIndex] = { ...stepToUpdate, status: \"fulfilled\" };\n        }\n\n        return newSteps;\n      };\n\n      const interval = setInterval(() => {\n        setSteps(prevSteps => getNextStepsState(prevSteps));\n      }, 2000);\n\n      return () => {\n        clearInterval(interval);\n      };\n    }, [initialSteps]);\n\n    return <MultiStepIndicator id=\"transition-animation\" steps={steps} />;\n  }\n};\n\nexport const MultiStepWizard = {\n  render: () => {\n    const steps: Step[] = useMemo(\n      () => [\n        {\n          key: \"FULFILLED\",\n          status: \"fulfilled\",\n          titleText: \"Step 1\",\n          subtitleText: \"Learn how to use monday CRM\"\n        },\n        {\n          key: \"PENDING\",\n          status: \"pending\",\n          titleText: \"Step 2\",\n          subtitleText: \"Integrate your email\"\n        },\n        {\n          key: \"PENDING-3\",\n          status: \"pending\",\n          titleText: \"Step 3\",\n          subtitleText: \"Import your data\"\n        }\n      ],\n      []\n    );\n\n    return <MultiStepIndicator id=\"multi-step-wizard\" steps={steps} textPlacement=\"vertical\" />;\n  }\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/NumberField/NumberField.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { ComponentRules, UsageGuidelines } from \"vibe-storybook-components\";\nimport * as NumberFieldStories from \"./NumberField.stories\";\nimport { NumberField } from \"@vibe/core\";\n\n<Meta of={NumberFieldStories} />\n\n# NumberField\n\n## Overview\n\nThe `NumberField` component provides an accessible, strictly numeric input with built-in vertical stepper controls for incrementing or decrementing values. It supports controlled usage, custom sizing, min/max clamping, and visual feedback states (error, success, disabled, read-only).\n\n<Canvas of={NumberFieldStories.Overview} />\n\n## Import path\n\n```tsx\nimport { NumberField } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Always pass both `value` and `onChange` props to use the component in controlled mode.\",\n    \"Use `min`, `max`, and `step` to enforce value boundaries and configure stepping behavior.\",\n    \"Use `allowOutOfBounds` when you want to allow users to enter invalid values and handle validation externally.\",\n    \"Leverage validation states (`error`, `success`) with `infoText` to provide clear feedback to users.\",\n    \"Apply `disabled` or `readOnly` states to prevent user interaction when necessary.\",\n    \"Use `step` to control increment/decrement granularity - defaults to 1 for whole numbers.\"\n  ]}\n/>\n\n## Accessibility\n\n<UsageGuidelines\n  guidelines={[\n    <>\n      Using an <code>id</code> is highly recommended for all instances to ensure the best accessibility.\n    </>,\n    <>\n      Always provide a visible <code>label</code> or an <code>aria-label</code> to ensure the input's purpose is clear\n      to all users.\n    </>,\n    <>\n      When using <code>label</code> or <code>infoText</code>, you must also provide an <code>id</code>. This is crucial,\n      as it allows screen readers to correctly associate the input with its label and description.\n    </>,\n    <>\n      Providing an <code>id</code> also automatically links the Increment and Decrement buttons to the input via the{\" \"}\n      <code>aria-controls</code> attribute, further improving the experience for users of assistive technologies.\n    </>\n  ]}\n/>\n\n## Variants\n\n### Size Variants\n\nThere are three sizes available: Small (32px), Medium (40px), and Large (48px).\n\n<Canvas of={NumberFieldStories.Sizes} />\n\n### States\n\nDifferent states including success, error, disabled, and read-only with reactive validation feedback.\n\n<Canvas of={NumberFieldStories.States} />\n\n### Additional Variants\n\nExamples with icons and informational text.\n\n<Canvas of={NumberFieldStories.Variants} />\n\n## Validation\n\nThe NumberField supports comprehensive validation with dynamic feedback. Use `allowOutOfBounds` to permit invalid entries while providing real-time validation feedback.\n\n<Canvas of={NumberFieldStories.Validation} />\n\n## Do's and Don'ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: (\n          <div style={{ width: \"80%\" }}>\n            <NumberField value={25} onChange={() => {}} label=\"Age\" min={0} max={120} infoText=\"Enter your age\" />\n          </div>\n        ),\n        description:\n          \"Provide specific, descriptive labels and helpful context with explanatory helper text to clarify the expected input.\"\n      },\n      negative: {\n        component: (\n          <div style={{ width: \"80%\" }}>\n            <NumberField value={25} label=\"Number\" onChange={() => {}} infoText=\"Enter a value\" />\n          </div>\n        ),\n        description: \"Avoid generic labels like 'Number' or 'Value'. The label should be specific about what the user needs to enter.\"\n      }\n    },\n    {\n      positive: {\n        component: (\n          <div style={{ width: \"80%\" }}>\n            <NumberField\n              value={-5}\n              onChange={() => {}}\n              label=\"Temperature (°C)\"\n              error\n              infoText=\"Temperature cannot be negative\"\n              min={0}\n              allowOutOfBounds\n            />\n          </div>\n        ),\n        description:\n          \"When input is invalid, provide immediate visual feedback but allow the user to see and correct their entry.\"\n      },\n      negative: {\n        component: (\n          <div style={{ width: \"80%\" }}>\n            <NumberField value={-5} onChange={() => {}} label=\"Temperature (°C)\" error min={0} allowOutOfBounds />\n          </div>\n        ),\n        description:\n          \"Don't show an error state without a clear explanation. Always provide a helpful message that guides the user to a valid input.\"\n      }\n    }\n\n]}\n/>\n\n## Related components\n\n<RelatedComponents componentsNames={[\"TextField\", \"Dropdown\", \"Search\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/NumberField/NumberField.stories.tsx",
    "content": "import React, { useState } from \"react\";\nimport { type Meta, type StoryObj } from \"@storybook/react\";\nimport { TextBig } from \"@vibe/icons\";\nimport { NumberField, Flex } from \"@vibe/core\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: NumberField,\n  actionPropsArray: [\"onChange\"],\n  iconPropNamesArray: [\"leftIcon\"]\n});\n\nexport default {\n  title: \"Components/NumberField\",\n  component: NumberField,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n} satisfies Meta<typeof NumberField>;\n\ntype Story = StoryObj<typeof NumberField>;\n\nexport const Overview: Story = {\n  render: args => {\n    const [value, setValue] = useState(args.value || 0);\n    return (\n      <div style={{ width: 300 }}>\n        <NumberField id=\"overview-number-field\" {...args} value={value} onChange={newValue => setValue(newValue)} />\n      </div>\n    );\n  },\n  decorators: [],\n  parameters: {\n    docs: {\n      liveEdit: {\n        enabled: false\n      }\n    }\n  }\n};\n\nexport const Sizes: Story = {\n  render: () => {\n    const [valueL, setValueL] = useState(2);\n    const [valueM, setValueM] = useState(2);\n    const [valueS, setValueS] = useState(2);\n    return (\n      <Flex gap=\"medium\" align=\"start\">\n        <NumberField id=\"size-large\" value={valueL} onChange={setValueL} label=\"Large\" size=\"large\" />\n        <NumberField id=\"size-medium\" value={valueM} onChange={setValueM} label=\"Medium\" size=\"medium\" />\n        <NumberField id=\"size-small\" value={valueS} onChange={setValueS} label=\"Small\" size=\"small\" />\n      </Flex>\n    );\n  }\n};\n\nexport const States: Story = {\n  render: () => {\n    const [successValue, setSuccessValue] = useState(10);\n    const [errorValue, setErrorValue] = useState(5);\n\n    return (\n      <Flex direction=\"column\" gap=\"medium\" align=\"start\">\n        <NumberField\n          id=\"success-state\"\n          value={successValue}\n          onChange={setSuccessValue}\n          label=\"Success State\"\n          success\n          infoText=\"This is a success message\"\n        />\n        <NumberField\n          id=\"error-state\"\n          value={errorValue}\n          onChange={setErrorValue}\n          label=\"Error State\"\n          error\n          infoText=\"This is an error message\"\n        />\n        <NumberField\n          id=\"readonly-state\"\n          value={42}\n          onChange={() => {}}\n          label=\"Read Only State\"\n          readOnly\n          infoText=\"Read-only field\"\n        />\n        <NumberField\n          id=\"disabled-state\"\n          value={5}\n          onChange={() => {}}\n          label=\"Disabled State\"\n          disabled\n          infoText=\"Cannot edit when disabled\"\n        />\n      </Flex>\n    );\n  }\n};\n\nexport const Validation: Story = {\n  render: () => {\n    const [value, setValue] = useState(50);\n    const [isValid, setIsValid] = useState(true);\n\n    const handleChange = (newValue: number) => {\n      setValue(newValue);\n    };\n\n    const handleValidityChange = (valid: boolean) => {\n      setIsValid(valid);\n    };\n\n    return (\n      <Flex direction=\"column\" gap=\"medium\" align=\"start\" style={{ width: 300 }}>\n        <NumberField\n          id=\"validation-example\"\n          value={value}\n          onChange={handleChange}\n          onValidityChange={handleValidityChange}\n          label=\"Validation Example (Range: 0-100)\"\n          min={0}\n          max={100}\n          allowOutOfBounds\n          success={isValid}\n          error={!isValid}\n          infoText={isValid ? \"Value is within valid range!\" : \"Value is outside the valid range (0-100)\"}\n        />\n      </Flex>\n    );\n  }\n};\n\nexport const Variants: Story = {\n  render: () => {\n    const [iconValue, setIconValue] = useState(1);\n    const [infoValue, setInfoValue] = useState(100);\n\n    return (\n      <Flex direction=\"column\" gap=\"medium\" align=\"start\">\n        <NumberField id=\"with-icon\" value={iconValue} onChange={setIconValue} label=\"With Icon\" leftIcon={TextBig} />\n        <NumberField\n          id=\"with-info\"\n          value={infoValue}\n          onChange={setInfoValue}\n          label=\"With Info Text\"\n          infoText=\"You are doing great!\"\n        />\n      </Flex>\n    );\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { TextBig }\n      }\n    }\n  }\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/ProgressBars/ProgressBar.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport {\n  ComponentRuleNegative,\n  ComponentRulePositive,\n  TipMultiStepIndicator\n} from \"./ProgressBar.stories.helpers\";\nimport * as ProgressBarStories from \"./ProgressBar.stories\";\n\n<Meta of={ProgressBarStories} />\n\n# ProgressBar\n\nProgress bars show continuous progress through a process, such as a percentage value. They show how much progress is complete and how much remains.\n\n<Canvas of={ProgressBarStories.Overview} />\n\n### Import\n\n```js\nimport { ProgressBar } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\"Give users an indication of how much of the task has been completed and how much is left.\"]}\n/>\n\n<TipMultiStepIndicator />\n\n## Variants\n\n### Regular\n\n<Canvas of={ProgressBarStories.Regular} />\n\n### With secondary value\n\n<Canvas of={ProgressBarStories.WithSecondaryValue} />\n\n### Multi progress bar\n\n<Canvas of={ProgressBarStories.MultiProgressBar} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: <ComponentRulePositive />,\n        description: \"Use a progress bar only process has start and finish point.\"\n      },\n      negative: {\n        component: <ComponentRuleNegative />,\n        description: \"Don’t use an infinite scalable indicator.\"\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### Progress bar as a counter\n\nThe user can see in a clear way the number of items used in the account.\n\n<Canvas of={ProgressBarStories.ProgressBarAsACounter} />\n\n### Progress bar as loading indicator\n\n<Canvas of={ProgressBarStories.ProgressBarAsLoadingIndicator} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Spinner\", \"Steps\", \"Skeleton\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/ProgressBars/ProgressBar.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\nimport { DialogContentContainer, Text, Flex, ProgressBar } from \"@vibe/core\";\n\nexport const TipMultiStepIndicator = () => (\n  <Tip>\n    If you need to lead a user through a progress, use the{\" \"}\n    <StorybookLink page=\"Components/MultiStepIndicator\" size=\"small\">\n      MultiStepIndicator\n    </StorybookLink>{\" \"}\n    instead.\n  </Tip>\n);\n\nexport const ComponentRulePositive = () => (\n  <div style={{ width: 250 }}>\n    <DialogContentContainer style={{ padding: \"var(--space-20)\" }}>\n      <Text type=\"text1\" weight=\"bold\" style={{ marginBottom: \"var(--space-4)\" }}>\n        Items usage\n      </Text>\n      <Flex justify=\"space-between\" style={{ marginBottom: \"var(--space-4)\" }}>\n        <Text>Items</Text>\n        <Text>142/200</Text>\n      </Flex>\n      <ProgressBar value={71} />\n    </DialogContentContainer>\n  </div>\n);\n\nexport const ComponentRuleNegative = () => (\n  <div style={{ width: 250 }}>\n    <DialogContentContainer style={{ padding: \"var(--space-20)\" }}>\n      <Text type=\"text1\" weight=\"bold\" style={{ marginBottom: \"var(--space-4)\" }}>\n        Storage\n      </Text>\n      <Flex gap=\"medium\">\n        <Text ellipsis={false} style={{ flexBasis: 80 }}>\n          Drive 1\n        </Text>\n        <ProgressBar value={88} />\n      </Flex>\n      <Flex gap=\"medium\">\n        <Text ellipsis={false} style={{ flexBasis: 80 }}>\n          Drive 2\n        </Text>\n        <ProgressBar value={46} />\n      </Flex>\n      <Flex gap=\"medium\">\n        <Text ellipsis={false} style={{ flexBasis: 80 }}>\n          Drive 3\n        </Text>\n        <ProgressBar value={72} />\n      </Flex>\n    </DialogContentContainer>\n  </div>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/ProgressBars/ProgressBar.stories.tsx",
    "content": "import React from \"react\";\nimport { ProgressBar, type ProgressBarProps, Flex, Text, Box } from \"@vibe/core\";\nimport { useMemo } from \"react\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { Info } from \"@vibe/icons\";\nimport { Icon } from \"@vibe/icon\";\nimport Logo from \"./assets/Logo.png\";\nimport { type Meta, type StoryObj } from \"@storybook/react\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: ProgressBar\n});\n\nexport default {\n  title: \"Components/ProgressBar\",\n  component: ProgressBar,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n} satisfies Meta<typeof ProgressBar>;\n\ntype Story = StoryObj<typeof ProgressBar>;\n\nexport const Overview: Story = {\n  render: (args: ProgressBarProps) => (\n    <div style={{ width: \"400px\" }}>\n      <ProgressBar\n        value={20}\n        size=\"large\"\n        id=\"overview-linear-progress-bar\"\n        aria-label=\"Overview linear progress bar\"\n        {...args}\n      />\n    </div>\n  ),\n\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const Regular: Story = {\n  render: () => (\n    <Flex direction=\"column\" gap=\"large\">\n      <Flex direction=\"column\" gap=\"small\" align=\"start\" style={{ width: \"400px\" }}>\n        <ProgressBar\n          id=\"regular-linear-progress-bar\"\n          aria-label=\"Regular linear progress bar\"\n          indicateProgress\n          value={30}\n          size=\"large\"\n        />\n        With label\n      </Flex>\n      <Flex direction=\"column\" gap=\"small\" align=\"start\" style={{ width: \"400px\" }}>\n        <ProgressBar id=\"regular-linear-progress-bar-without-label\" value={30} size=\"large\" />\n        Without label\n      </Flex>\n    </Flex>\n  )\n};\n\nexport const WithSecondaryValue: Story = {\n  render: () => (\n    <div style={{ width: \"400px\" }}>\n      <ProgressBar\n        id=\"with-secondary-value-linear-progress-bar\"\n        aria-label=\"With secondary value linear progress bar\"\n        value={50}\n        indicateProgress\n        valueSecondary={65}\n        size=\"large\"\n      />\n    </div>\n  )\n};\n\nexport const MultiProgressBar: Story = {\n  render: () => {\n    const multiValues = useMemo(\n      () => [\n        {\n          value: 25,\n          color: \"var(--primary-color)\"\n        },\n        {\n          value: 75,\n          color: \"var(--warning-color)\"\n        },\n        {\n          value: 100,\n          color: \"var(--positive-color)\"\n        }\n      ],\n      []\n    );\n\n    return (\n      <div style={{ width: \"600px\" }}>\n        <ProgressBar\n          id=\"multi-progress-bar\"\n          aria-label=\"Multi progress bar\"\n          value={25}\n          size=\"large\"\n          indicateProgress\n          multi\n          multiValues={multiValues}\n        />\n      </div>\n    );\n  },\n\n  name: \"Multi progress bar\"\n};\n\nexport const ProgressBarAsACounter: Story = {\n  render: () => (\n    <div style={{ width: 200 }}>\n      <Text type=\"text1\" weight=\"bold\" style={{ marginBottom: \"var(--space-48)\" }}>\n        Loading files\n      </Text>\n      <Flex justify=\"space-between\" style={{ marginBottom: \"var(--space-4)\" }}>\n        <Flex gap=\"xs\">\n          <Text>Items</Text>\n          <Icon icon={Info} style={{ color: \"var(--icon-color)\" }} />\n        </Flex>\n        <Text>142/200</Text>\n      </Flex>\n      <ProgressBar\n        id=\"progress-bar-as-a-counter\"\n        aria-label=\"Progress bar as a counter\"\n        value={71}\n        size=\"large\"\n        barStyle=\"positive\"\n      />\n    </div>\n  ),\n\n  name: \"Progress bar as a counter\"\n};\n\nexport const ProgressBarAsLoadingIndicator: Story = {\n  render: () => (\n    <Box border padding=\"medium\" style={{ width: 400 }}>\n      <Flex gap=\"small\" style={{ marginBottom: \"var(--space-8)\", height: 80 }}>\n        <Box style={{ flexShrink: 0, height: \"100%\" }}>\n          <img src={Logo} alt=\"Frame 697.jpg\" style={{ height: \"100%\" }} />\n        </Box>\n        <Flex direction=\"column\" align=\"stretch\" justify=\"space-between\" style={{ flex: 1, height: \"100%\" }}>\n          <Text type=\"text1\" weight=\"bold\">\n            Frame 697.jpg\n          </Text>\n          <Flex justify=\"space-between\">\n            <Text>2KB</Text>\n            <Text>Saving...</Text>\n          </Flex>\n        </Flex>\n      </Flex>\n      <ProgressBar\n        id=\"progress-bar-as-loading-indicator\"\n        aria-label=\"Progress bar as loading indicator\"\n        value={71}\n      />\n    </Box>\n  ),\n\n  name: \"Progress bar as loading indicator\"\n};\n\nexport const ExceedingMaxValue: Story = {\n  render: () => (\n    <Flex direction=\"column\" gap=\"large\" align=\"start\">\n      <Flex direction=\"column\" gap=\"small\" style={{ width: \"400px\" }}>\n        <Text type=\"text1\" weight=\"bold\">\n          Standard behavior (capped at 100%)\n        </Text>\n        <ProgressBar\n          id=\"standard-progress-bar\"\n          ariaLabel=\"Standard progress bar\"\n          value={120}\n          max={100}\n          indicateProgress\n          size=\"large\"\n        />\n        <Text type=\"text2\" color=\"secondary\">\n          Value: 120, Max: 100 → Shows 100%\n        </Text>\n      </Flex>\n\n      <Flex direction=\"column\" gap=\"small\" style={{ width: \"400px\" }}>\n        <Text type=\"text1\" weight=\"bold\">\n          Allowing exceeding max\n        </Text>\n        <ProgressBar\n          id=\"exceeding-progress-bar\"\n          ariaLabel=\"Exceeding progress bar\"\n          value={120}\n          max={100}\n          indicateProgress\n          allowExceedingMax\n          size=\"large\"\n          barStyle=\"positive\"\n        />\n        <Text type=\"text2\" color=\"secondary\">\n          Value: 120, Max: 100 → Shows 120%\n        </Text>\n      </Flex>\n    </Flex>\n  ),\n\n  name: \"Exceeding max value\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/RadioButton/RadioButton.interactions.ts",
    "content": "import { expect } from \"@storybook/jest\";\nimport { clickElement, delay, getByRole, getByText, interactionSuite } from \"@vibe/core/interactionsTests\";\n\nconst CHANGES_DELAY = 100;\n\nconst isRadioButtonSelected = (canvas: HTMLElement, text: string): boolean => {\n  const radioToClick = getByText(canvas, text) as HTMLElement;\n  const inputElement = radioToClick.parentElement.firstChild.firstChild as HTMLInputElement;\n  return inputElement.checked;\n};\n\nconst clickNextButton = async (canvas: HTMLElement): Promise<void> => {\n  const nextButton = getByRole(canvas, \"button\") as HTMLElement;\n  await clickElement(nextButton);\n  await delay(CHANGES_DELAY);\n};\n\nconst clickRadioButton = async (canvas: HTMLElement): Promise<void> => {\n  const radioToClick = getByText(canvas, \"I was mentioned\") as HTMLElement;\n  // Click the radio button\n  await clickElement(radioToClick);\n  await delay(CHANGES_DELAY);\n  // check it is selected\n  expect(isRadioButtonSelected(canvas, \"I was mentioned\")).toBe(true);\n};\n\nexport const controlRadioButton = async (canvas: HTMLElement): Promise<void> => {\n  // check first radio is selected\n  await expect(isRadioButtonSelected(canvas, \"Radio 1\")).toBe(true);\n\n  await clickNextButton(canvas);\n\n  // check first radio is not selected\n  await expect(isRadioButtonSelected(canvas, \"Radio 1\")).toBe(false);\n  await expect(isRadioButtonSelected(canvas, \"Radio 2\")).toBe(true);\n\n  await clickNextButton(canvas);\n\n  await expect(isRadioButtonSelected(canvas, \"Radio 2\")).toBe(false);\n  await expect(isRadioButtonSelected(canvas, \"Radio 3\")).toBe(true);\n\n  // Comeback to the first radio to cleanup\n  await clickNextButton(canvas);\n};\n\nexport const clickRadioButtonPlaySuite = interactionSuite({\n  tests: [clickRadioButton]\n});\n\nexport const controlRadioButtonPlaySuite = interactionSuite({\n  tests: [controlRadioButton]\n});\n"
  },
  {
    "path": "packages/docs/src/pages/components/RadioButton/RadioButton.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { RadioButton, Flex, Box, DialogContentContainer } from \"@vibe/core\";\nimport { TipDropdown } from \"./RadioButton.stories.helpers\";\nimport * as RadioButtonStories from \"./RadioButton.stories\";\n\n<Meta of={RadioButtonStories} />\n\n# RadioButton\n\nA radio represents an item in a single selection list.\n\n<Canvas of={RadioButtonStories.Overview} />\n\n### Import\n\n```js\nimport { RadioButton } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"A radio lets a user make exactly one selection from a set, which is all visible at the same time.\",\n    \"Set one radio group option as default. Select the most likely or convenient option.\",\n    \"Ensure both label and input are clickable to select the option.\",\n    \"Place radio buttons  can be placed vertically or horizontaly, using 16px spacing.\"\n  ]}\n/>\n\n## Accessibility\n\n<UsageGuidelines\n  guidelines={[\n    <>\n      Using an <code>id</code> is recommended for all instances to ensure proper label association.\n    </>,\n    <>\n      Always provide a <code>text</code> prop to ensure the radio button's purpose is clear to all users.\n    </>,\n    <>\n      Use the same <code>name</code> prop for all radio buttons in a group to ensure proper keyboard navigation and\n      screen reader grouping.\n    </>,\n    <>\n      Use <code>disabled</code> prop appropriately to indicate when radio buttons are not available for interaction.\n    </>,\n    <>\n      Use <code>disabledReason</code> prop to provide an explanation for disabled radio buttons, shown in a tooltip.\n    </>,\n    <>\n      Use <code>autoFocus</code> prop when a radio button should receive initial focus for keyboard navigation.\n    </>,\n    <>\n      Use <code>childrenTabIndex</code> prop to control the tab order when radio buttons have interactive children.\n    </>,\n    <>\n      Use <code>retainChildClick</code> prop to control whether clicking on children triggers radio button selection.\n    </>\n  ]}\n/>\n\n<TipDropdown />\n\n## Variants\n\n### States\n\nRadio buttons have 3 states: regular, selected, and disabled.\n\n<Canvas of={RadioButtonStories.States} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: (\n          <DialogContentContainer>\n            <Box margin=\"small\" style={{ width: \"200px\" }}>\n              <Flex direction=\"column\" gap=\"medium\" align=\"start\">\n                <RadioButton text=\"Item 1\" name=\"radio-buttons-group-1\" />\n                <RadioButton text=\"Item 2\" name=\"radio-buttons-group-1\" defaultChecked />\n              </Flex>\n            </Box>\n          </DialogContentContainer>\n        ),\n        description: \"Use radio buttons when only one item can be selected from a list.\"\n      },\n      negative: {\n        component: (\n          <DialogContentContainer>\n            <Box margin=\"small\" style={{ width: \"200px\" }}>\n              <Flex direction=\"column\" gap=\"medium\" align=\"start\">\n                <RadioButton text=\"Item 1\" checked />\n                <RadioButton text=\"Item 2\" checked />\n              </Flex>\n            </Box>\n          </DialogContentContainer>\n        ),\n        description: (\n          <>\n            Don't use radio buttons when allowing the user to select more than one item from a list. In this case, use{\" \"}\n            <StorybookLink page=\"Components/Checkbox\">checkboxes</StorybookLink> instead.\n          </>\n        )\n      }\n    },\n    {\n      positive: {\n        component: (\n          <DialogContentContainer>\n            <Box margin=\"small\" style={{ width: \"200px\" }}>\n              <Flex direction=\"column\" gap=\"medium\" align=\"start\">\n                <RadioButton text=\"Item 1\" name=\"radio-buttons-group-2\" defaultChecked />\n                <RadioButton text=\"Item 2\" name=\"radio-buttons-group-2\" />\n                <RadioButton text=\"Item 3\" name=\"radio-buttons-group-2\" />\n              </Flex>\n            </Box>\n          </DialogContentContainer>\n        ),\n        description: \"Mark the first item as selected, and make sure it’s the most common or popular action.\"\n      },\n      negative: {\n        component: (\n          <DialogContentContainer>\n            <Box margin=\"small\" style={{ width: \"200px\" }}>\n              <Flex direction=\"column\" gap=\"medium\" align=\"start\">\n                <RadioButton text=\"Item 1\" name=\"radio-buttons-group-3\" />\n                <RadioButton text=\"Item 2\" name=\"radio-buttons-group-3\" />\n                <RadioButton text=\"Item 3\" name=\"radio-buttons-group-3\" />\n              </Flex>\n            </Box>\n          </DialogContentContainer>\n        ),\n        description: (\n          <>\n            Don’t leave all radio buttons unselcted. If you can’t offer a smart default, consider using the{\" \"}\n            <StorybookLink page=\"Components/Dropdown\">dropdown component.</StorybookLink>\n          </>\n        )\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### Radio button in items list\n\nThe user needs to select only one option.\n\n<Canvas of={RadioButtonStories.RadioButtonInItemsList} />\n\nControlled externally.\n\n<Canvas of={RadioButtonStories.ControlledRadioButtons} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Checkbox\", \"Toggle\", \"Dropdown\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/RadioButton/RadioButton.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const TipDropdown = () => (\n  <Tip>\n    When there’s limited space or no default selection, consider using a select{\" \"}\n    <StorybookLink page=\"Components/Dropdown\" size=\"small\">\n      Dropdown\n    </StorybookLink>{\" \"}\n    instead.\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/RadioButton/RadioButton.stories.tsx",
    "content": "import React from \"react\";\nimport { useCallback, useState } from \"react\";\nimport { createComponentTemplate } from \"vibe-storybook-components\";\nimport { RadioButton, Button, Flex } from \"@vibe/core\";\nimport { clickRadioButtonPlaySuite, controlRadioButtonPlaySuite } from \"./RadioButton.interactions\";\n\nconst radioButtonTemplate = createComponentTemplate(RadioButton);\n\nexport default {\n  title: \"Components/RadioButton\",\n  component: RadioButton\n};\n\nexport const Overview = {\n  render: radioButtonTemplate.bind({}),\n  args: {\n    id: \"overview-radio\",\n    text: \"Selection\"\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const States = {\n  render: () => (\n    <Flex gap=\"medium\">\n      <RadioButton id=\"states-regular\" text=\"Regular\" />\n      <RadioButton id=\"states-selected\" text=\"Selected\" checked />\n      <RadioButton id=\"states-disabled\" text=\"Disabled\" disabled disabledReason=\"Disabled reason\" />\n      <RadioButton id=\"states-disabled-checked\" text=\"Disabled\" checked disabled />\n    </Flex>\n  )\n};\n\nexport const RadioButtonInItemsList = {\n  render: () => (\n    <Flex direction=\"column\" gap=\"medium\" align=\"start\">\n      <div id=\"inbox-view-label\">Inbox view options</div>\n      <RadioButton id=\"inbox-updates\" text=\"Inbox updates\" name=\"radio-buttons-group-4\" defaultChecked />\n      <RadioButton id=\"was-mentioned\" text=\"I was mentioned\" name=\"radio-buttons-group-4\" />\n      <RadioButton id=\"all-updates\" text=\"All updates\" name=\"radio-buttons-group-4\" />\n    </Flex>\n  ),\n  play: clickRadioButtonPlaySuite,\n  name: \"Radio button in items list\"\n};\n\nexport const ControlledRadioButtons = {\n  render: () => {\n    const [selectedIndex, setSelectedIndex] = useState(0);\n    const onClickCB = useCallback(() => {\n      setSelectedIndex(prev => (prev + 1) % 3);\n    }, [setSelectedIndex]);\n    const onChange = useCallback(() => {}, []);\n\n    return (\n      <Flex direction=\"column\" gap=\"medium\" align=\"start\">\n        <div id=\"controlled-radio-label\">Controlled radio buttons</div>\n        <Button id=\"select-next-button\" kind=\"secondary\" onClick={onClickCB}>{`Select next radio button (Radio ${\n          ((selectedIndex + 1) % 3) + 1\n        }) `}</Button>\n        <RadioButton\n          id=\"radio-1\"\n          text=\"Radio 1\"\n          name=\"radio-buttons-group-5\"\n          checked={selectedIndex === 0}\n          onSelect={onChange}\n        />\n        <RadioButton\n          id=\"radio-2\"\n          text=\"Radio 2\"\n          name=\"radio-buttons-group-5\"\n          checked={selectedIndex === 1}\n          onSelect={onChange}\n        />\n        <RadioButton\n          id=\"radio-3\"\n          text=\"Radio 3\"\n          name=\"radio-buttons-group-5\"\n          checked={selectedIndex === 2}\n          onSelect={onChange}\n        />\n      </Flex>\n    );\n  },\n  play: controlRadioButtonPlaySuite,\n  name: \"Controlled Radio buttons\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Search/Search.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { StorybookLink, Tip, UsageGuidelines } from \"vibe-storybook-components\";\nimport * as SearchStories from \"./Search.stories\";\nimport { Search } from \"@vibe/core\";\nimport { CloseSmall, Search as SearchIcon } from \"@vibe/icons\";\nimport styles from \"./Search.stories.module.scss\";\n\n<Meta of={SearchStories} />\n\n# Search\n\nSearch lets users quickly find relevant content. A search field allows a user to type a word or phrase to filter through a large amount of data without navigation.\n\n<Canvas of={SearchStories.Overview} />\n\n### Import\n\n```js\nimport { Search } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Search query input methods can be extended to include historical suggestions and auto-completion of queries.\",\n    \"Search results are displayed below the search bar.\",\n    \"Always use the search icon to help users identify search fields. Display the search icon as a presentational icon inside the search input.\",\n    \"Let users submit their search by hitting enter. For live-filtering search, update search results immediately without hitting enter and be mindful of performance.\",\n    \"Consider helping users understand what they can search for by offering placeholder examples or autosuggested results.\",\n    \"Once the user starts typing, clear button should appear and remain accessible, even after a search is performed.\"\n  ]}\n/>\n\n<Tip title=\"Not what you were looking for?\">\n  <span>If you need to filter results from a long list, consider using the </span>\n  <StorybookLink page=\"Components/Combobox\" size={StorybookLinkSize.small}>\n    <span>Combobox</span>\n  </StorybookLink>\n  <span> component.</span>\n</Tip>\n\n## Accessibility\n\n<UsageGuidelines\n  guidelines={[\n    <>\n      Using an <code>id</code> is highly recommended for all instances to ensure proper label association.\n    </>,\n    <>\n      Use <code>inputAriaLabel</code> prop when you need to provide a custom accessible name for the search input.\n    </>,\n    <>\n      Use <code>searchResultsContainerId</code> prop to link the search input to its results container for screen reader\n      navigation.\n    </>,\n    <>\n      Use <code>currentAriaResultId</code> prop to indicate the currently active/focused search result.\n    </>,\n    <>\n      Use <code>ariaExpanded</code> prop to indicate when search results dropdown is open or closed.\n    </>,\n    <>\n      Use <code>ariaHasPopup</code> prop to specify the type of popup (e.g., 'listbox', 'menu') for search results.\n    </>,\n    <>\n      Use <code>clearIconLabel</code> prop to provide a custom accessible name for the clear button.\n    </>\n  ]}\n/>\n\n## Variants\n\n### Sizes\n\nThere are three sizes available: Small (32px), Medium (40px), and Large (48px).\n\n<Canvas of={SearchStories.Sizes} />\n\n### With additional action\n\nThe search field can contain one more search-related action (like filtering). This action should be represented by an icon button on the right.\n\n<Canvas of={SearchStories.WithAdditionalAction} />\n\n## Do's and Don'ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: <Search value=\"User typing\" className={styles.fixedWidth} />,\n        description: \"Keep the search icon on the left side of the input, and the clear button on the right side.\"\n      },\n      negative: {\n        component: (\n          <Search\n            value=\"User typing\"\n            searchIconName={CloseSmall}\n            clearIconName={SearchIcon}\n            className={styles.fixedWidth}\n          />\n        ),\n        description: \"Don't place the search icon on the right side of the input, or the clear button on the left side.\"\n      }\n    },\n    {\n      positive: {\n        component: <Search value=\"User typing\" className={styles.fixedWidth} />,\n        description:\n          \"Show clear button when the user starts typing, and keep it visible even after a search is performed.\"\n      },\n      negative: {\n        component: <Search value=\"User typing\" clearIconName={null} className={styles.fixedWidth} />,\n        description: \"Don't remove the clear button after the user has performed the search.\"\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### Filter in combobox\n\n<Canvas of={SearchStories.FilterInCombobox} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Dropdown\", \"TextField\", \"Combobox\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Search/Search.stories.module.scss",
    "content": ".fixedWidth {\n  width: 75%;\n}\n"
  },
  {
    "path": "packages/docs/src/pages/components/Search/Search.stories.tsx",
    "content": "import React from \"react\";\nimport { createComponentTemplate } from \"vibe-storybook-components\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { DialogContentContainer, Combobox, Flex, IconButton, Search } from \"@vibe/core\";\nimport { type Decorator, type Meta, type StoryObj } from \"@storybook/react\";\nimport { Filter as FilterIcon } from \"@vibe/icons\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: Search,\n  iconPropNamesArray: [\"searchIconName\", \"clearIconName\"]\n});\n\nconst searchTemplate = createComponentTemplate(Search);\n\nexport default {\n  title: \"Components/Search\",\n  component: Search,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n} satisfies Meta<typeof Search>;\n\ntype Story = StoryObj<typeof Search>;\n\nconst withFixedWidth: Decorator = Story => (\n  <div style={{ width: 320 }}>\n    <Story />\n  </div>\n);\n\nexport const Overview: Story = {\n  render: searchTemplate.bind({}),\n  args: {\n    id: \"overview-search\",\n    inputAriaLabel: \"Search input\",\n    placeholder: \"Placeholder text here\"\n  },\n  decorators: [withFixedWidth],\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const Sizes: Story = {\n  render: () => (\n    <>\n      <Search id=\"sizes-small\" inputAriaLabel=\"Small search input\" placeholder=\"Small\" size=\"small\" />\n      <Search id=\"sizes-medium\" inputAriaLabel=\"Medium search input\" placeholder=\"Medium\" size=\"medium\" />\n      <Search id=\"sizes-large\" inputAriaLabel=\"Large search input\" placeholder=\"Large\" size=\"large\" />\n    </>\n  ),\n  decorators: [\n    Story => (\n      <Flex direction=\"column\" justify=\"start\" gap=\"medium\">\n        <Story />\n      </Flex>\n    ),\n    withFixedWidth\n  ],\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Search }\n      }\n    }\n  }\n};\n\nexport const WithAdditionalAction: Story = {\n  render: () => (\n    <Search\n      id=\"search-with-action\"\n      inputAriaLabel=\"Search with filter action\"\n      placeholder=\"Search with icon\"\n      renderAction={<IconButton id=\"filter-action-button\" icon={FilterIcon} aria-label=\"Filter results\" size=\"small\" />}\n    />\n  ),\n  decorators: [withFixedWidth],\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Search, FilterIcon }\n      }\n    }\n  }\n};\n\nconst options = [\n  {\n    id: \"1\",\n    label: \"Cheese Cake\"\n  },\n  {\n    id: \"2\",\n    label: \"Muffin\"\n  },\n  {\n    id: \"3\",\n    label: \"Cookie\"\n  },\n  {\n    id: \"4\",\n    label: \"Cup cake\"\n  },\n  {\n    id: \"5\",\n    label: \"Banana lottie\"\n  }\n];\n\nexport const FilterInCombobox: Story = {\n  render: () => (\n    <Combobox\n      id=\"filter-combobox\"\n      searchInputAriaLabel=\"Filter options\"\n      placeholder=\"Placeholder text here\"\n      options={options}\n      size=\"small\"\n      optionLineHeight={28}\n    />\n  ),\n  decorators: [\n    Story => (\n      <DialogContentContainer>\n        <Story />\n      </DialogContentContainer>\n    ),\n    withFixedWidth\n  ],\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { options }\n      }\n    }\n  }\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Skeleton/Skeleton.mdx",
    "content": "import { Skeleton, Flex } from \"@vibe/core\";\nimport { Meta } from \"@storybook/blocks\";\nimport { TipLoader } from \"./Skeleton.stories.helpers\";\nimport * as SkeletonStories from \"./Skeleton.stories\";\n\n<Meta of={SkeletonStories} />\n\n# Skeleton\n\nSkeleton loading component used to indicate content and ui loading that will appear after its loaded. It helps to decrease perceived duration time\n\n<Canvas of={SkeletonStories.Overview} />\n\n### Import\n\n```js\nimport { Skeleton } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Mimic the user interface that is going to be loaded as much as possible\",\n    \"Animation on the skeleton is a repeating color pulse should move from left to right to indicate the lading state\"\n  ]}\n/>\n\n<TipLoader />\n\n## Variants\n\n### Shapes\n\nUse shapes to mimic Avatars, images, buttons etc...\n\n<Canvas of={SkeletonStories.Shapes} />\n\n### Text\n\nPresents a classic menu or equivalent picker\n\n<Canvas of={SkeletonStories.TextSkeleton} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: (\n          <Flex gap=\"small\" direction=\"column\" align=\"start\">\n            <Flex gap=\"small\">\n              <Skeleton type=\"circle\" />\n              <Skeleton type=\"text\" size=\"small\" />\n            </Flex>\n            <Flex gap=\"small\">\n              <Skeleton type=\"circle\" />\n              <Skeleton type=\"text\" size=\"small\" />\n            </Flex>\n            <Flex gap=\"small\">\n              <Skeleton type=\"circle\" />\n              <Skeleton type=\"text\" size=\"small\" />\n            </Flex>\n          </Flex>\n        ),\n        description: \"Show only representation of ui.\"\n      },\n      negative: {\n        component: (\n          <Flex gap=\"small\" direction=\"column\" align=\"start\">\n            <Flex gap=\"small\">\n              <Skeleton type=\"circle\" />\n              <div>\n                <Skeleton type=\"text\" size=\"small\" />\n                Small text\n              </div>\n            </Flex>\n            <Flex gap=\"small\">\n              <Skeleton type=\"circle\" />\n              <div>\n                <Skeleton type=\"text\" size=\"small\" />\n                Small text\n              </div>\n            </Flex>\n            <Flex gap=\"small\">\n              <Skeleton type=\"circle\" />\n              <div>\n                <Skeleton type=\"text\" size=\"small\" />\n                Small text\n              </div>\n            </Flex>\n          </Flex>\n        ),\n        description: \"Show all the user interface exactly.\"\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### Complex Example\n\n<Canvas of={SkeletonStories.ComplexExample} />\n\n### Update in the system\n\nUse this menu to allow a user to either select one or more items from the list.\n\n<Canvas of={SkeletonStories.UpdateInTheSystem} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"ProgressBar\", \"Counter\", \"Spinner\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Skeleton/Skeleton.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const TipLoader = () => (\n  <Tip>\n    Using loader after the pages are fully loaded consider using the{\" \"}\n    <StorybookLink page=\"Components/Loader\" size=\"small\">\n      loader component.\n    </StorybookLink>\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/Skeleton/Skeleton.stories.tsx",
    "content": "import React, { useCallback, useState } from \"react\";\nimport { Skeleton, type SkeletonProps, Avatar, Button, Flex, Box, Text } from \"@vibe/core\";\nimport person from \"../Avatar/assets/person1.png\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { Reply, ThumbsUp } from \"@vibe/icons\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: Skeleton\n});\n\nexport default {\n  title: \"Components/Skeleton\",\n  component: Skeleton,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n};\n\nexport const Overview = {\n  render: (args: SkeletonProps) => (\n    <Flex direction=\"column\" gap=\"small\">\n      <Skeleton id=\"overview-skeleton-1\" {...args} />\n      <Skeleton id=\"overview-skeleton-2\" {...args} />\n      <Skeleton id=\"overview-skeleton-3\" {...args} />\n    </Flex>\n  ),\n  args: {\n    size: \"h1\",\n    type: \"text\"\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const Shapes = {\n  render: () => (\n    <Flex align=\"end\" gap=\"large\">\n      <Flex direction=\"column\" align=\"stretch\" gap=\"large\">\n        <Skeleton id=\"shapes-circle\" type=\"circle\" />\n        <Text type=\"text1\">Circle</Text>\n      </Flex>\n      <Flex direction=\"column\" align=\"stretch\" gap=\"large\">\n        <Skeleton id=\"shapes-square\" />\n        <Text type=\"text1\">Square</Text>\n      </Flex>\n      <Flex direction=\"column\" align=\"stretch\" gap=\"large\">\n        <Skeleton id=\"shapes-rectangle\" width={112} height={46} />\n        <Text type=\"text1\">Rectangle</Text>\n      </Flex>\n    </Flex>\n  )\n};\n\nexport const TextSkeleton = {\n  render: () => (\n    <Flex align=\"end\" gap=\"large\">\n      <Flex direction=\"column\" align=\"stretch\" gap=\"large\">\n        <Skeleton type=\"text\" size=\"h1\" />\n        <Text type=\"text1\">H1</Text>\n      </Flex>\n      <Flex direction=\"column\" align=\"stretch\" gap=\"large\">\n        <Skeleton type=\"text\" size=\"h2\" />\n        <Text type=\"text1\">H2</Text>\n      </Flex>\n      <Flex direction=\"column\" align=\"stretch\" gap=\"large\">\n        <Skeleton type=\"text\" size=\"small\" />\n        <Text type=\"text1\">Paragraph</Text>\n      </Flex>\n    </Flex>\n  ),\n  name: \"Text\"\n};\n\nexport const ComplexExample = {\n  render: () => {\n    return (\n      <Flex align=\"stretch\" direction=\"column\" gap=\"small\">\n        <Flex gap=\"small\">\n          <Skeleton type=\"circle\" />\n          <Skeleton type=\"text\" width={110} size=\"small\" />\n        </Flex>\n        <Flex align=\"stretch\" gap=\"medium\">\n          <Skeleton />\n          <Flex align=\"stretch\" direction=\"column\" gap=\"small\">\n            <Skeleton type=\"text\" size=\"h1\" />\n            <Skeleton type=\"text\" size=\"h4\" />\n            <Skeleton type=\"text\" size=\"h4\" />\n            <Skeleton type=\"text\" size=\"h4\" />\n            <Skeleton type=\"text\" size=\"h4\" width={82} />\n          </Flex>\n        </Flex>\n      </Flex>\n    );\n  }\n};\n\nexport const UpdateInTheSystem = {\n  render: () => {\n    const [showSkeleton, setShowSkeleton] = useState(false);\n    const [showBlock, setShowBlock] = useState(false);\n    const [showReload, setShowReload] = useState(true);\n\n    const onClickCallback = useCallback(() => {\n      setShowReload(false);\n      setShowBlock(false);\n      setShowSkeleton(true);\n\n      setTimeout(() => {\n        setShowSkeleton(false);\n      }, 4000);\n\n      setTimeout(() => {\n        setShowBlock(true);\n      }, 4000);\n    }, []);\n\n    return (\n      <Flex direction=\"column\" gap=\"large\" flex=\"1\">\n        {showBlock && (\n          <Box border>\n            <Flex direction=\"column\" align=\"start\" gap=\"medium\" style={{ width: \"730px\", padding: \"16px\" }}>\n              <Flex gap=\"small\">\n                <Avatar src={person} type=\"img\" />\n                <Text weight=\"bold\">Julia Martinez</Text>\n              </Flex>\n              <Text type=\"text1\" element=\"p\">\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et\n                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip\n                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu\n                fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia\n                deserunt mollit anim id est laborum.\n              </Text>\n            </Flex>\n            <Flex style={{ marginTop: \"var(--space-24)\", width: \"100%\" }}>\n              <Button\n                style={{\n                  flexGrow: 1,\n                  flexShrink: 1,\n                  borderBottom: \"none\",\n                  borderRight: \"none\",\n                  borderLeft: \"none\"\n                }}\n                leftIcon={ThumbsUp}\n                kind=\"secondary\"\n              >\n                Like\n              </Button>\n              <Button\n                style={{\n                  flexGrow: 1,\n                  flexShrink: 1,\n                  borderBottom: \"none\",\n                  borderRight: \"none\"\n                }}\n                leftIcon={Reply}\n                kind=\"secondary\"\n              >\n                Reply\n              </Button>\n            </Flex>\n          </Box>\n        )}\n        {showSkeleton && (\n          <Box border>\n            <Flex direction=\"column\" align=\"stretch\" gap=\"medium\" style={{ width: \"730px\", padding: \"16px\" }}>\n              <Flex align=\"center\" gap=\"small\">\n                <Skeleton type=\"circle\" width={50} height={50} />\n                <Skeleton type=\"text\" size=\"h5\" width={110} />\n              </Flex>\n              <Flex direction=\"column\" align=\"stretch\" gap=\"small\">\n                <Skeleton type=\"text\" size=\"small\" width={655} />\n                <Skeleton type=\"text\" size=\"small\" width={680} />\n                <Skeleton type=\"text\" size=\"small\" width={670} />\n                <Skeleton type=\"text\" size=\"small\" width={675} />\n                <Skeleton type=\"text\" size=\"small\" width={400} />\n              </Flex>\n            </Flex>\n            <Flex\n              justify=\"center\"\n              gap={300}\n              style={{ marginTop: \"var(--space-24)\", width: \"100%\", paddingBlock: \"var(--space-8)\" }}\n            >\n              <Skeleton type=\"text\" size=\"h2\" width={60} />\n              <Skeleton type=\"text\" size=\"h2\" width={60} />\n            </Flex>\n          </Box>\n        )}\n        <Button kind=\"secondary\" onClick={onClickCallback}>\n          {showReload ? \"Load update\" : \"Reload update\"}\n        </Button>\n      </Flex>\n    );\n  },\n\n  name: \"Update in the system\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Slider/Slider.interactions.ts",
    "content": "import { expect } from \"@storybook/jest\";\nimport { fireEvent, within } from \"@storybook/test\";\nimport { delay, interactionSuite, resetFocus } from \"@vibe/core/interactionsTests\";\n\nconst CHANGES_DELAY = 50;\nconst DRAG_STEPS = 20;\nconst DRAG_STEP_DELAY = 5;\n\nfunction clickAtX(element: HTMLElement, clientX: number): void {\n  const rect = element.getBoundingClientRect();\n  const clientY = rect.top + rect.height / 2;\n  fireEvent.click(element, { clientX, clientY });\n}\n\nasync function dragToX(element: HTMLElement, targetX: number): Promise<void> {\n  const rect = element.getBoundingClientRect();\n  const startX = rect.left + rect.width / 2;\n  const startY = rect.top + rect.height / 2;\n\n  const stepX = (targetX - startX) / DRAG_STEPS;\n  let currentX = startX;\n\n  // Start the drag\n  fireEvent.pointerDown(element, { clientX: currentX, clientY: startY });\n\n  // Move through steps\n  for (let i = 0; i < DRAG_STEPS; i++) {\n    currentX += stepX;\n    await delay(DRAG_STEP_DELAY);\n    fireEvent.pointerMove(document, { clientX: currentX, clientY: startY });\n  }\n\n  // End the drag\n  fireEvent.pointerUp(document, { clientX: currentX, clientY: startY });\n}\n\nasync function testNonRangedSliderClickOnRail(canvas: ReturnType<typeof within>): Promise<void> {\n  const elRail = await canvas.findByTestId(\"monday-slider-show-value-s__rail\");\n  const rect = elRail.getBoundingClientRect();\n  const elThumb = await within(elRail).findByRole(\"slider\");\n\n  // Click at start (0%)\n  clickAtX(elRail, rect.left);\n  await delay(CHANGES_DELAY);\n  expect(elThumb.getAttribute(\"aria-valuenow\")).toBe(\"0\");\n\n  // Click at end (100%)\n  clickAtX(elRail, rect.right);\n  await delay(CHANGES_DELAY);\n  expect(elThumb.getAttribute(\"aria-valuenow\")).toBe(\"100\");\n\n  // Click at middle (50%)\n  clickAtX(elRail, rect.left + rect.width * 0.5);\n  await delay(CHANGES_DELAY);\n  expect(elThumb.getAttribute(\"aria-valuenow\")).toBe(\"50\");\n}\n\nasync function testNonRangedSliderDragThumb(canvas: ReturnType<typeof within>): Promise<void> {\n  const elRail = await canvas.findByTestId(\"monday-slider-show-value-m__rail\");\n  const rect = elRail.getBoundingClientRect();\n  const elThumb = await within(elRail).findByRole(\"slider\");\n\n  // Drag to 25%\n  await dragToX(elThumb, rect.left + rect.width * 0.25);\n  await delay(CHANGES_DELAY);\n  expect(elThumb.getAttribute(\"aria-valuenow\")).toBe(\"25\");\n\n  // Drag to 75%\n  await dragToX(elThumb, rect.left + rect.width * 0.75);\n  await delay(CHANGES_DELAY);\n  expect(elThumb.getAttribute(\"aria-valuenow\")).toBe(\"75\");\n}\n\nasync function testRangedSliderClickOnRail(canvas: ReturnType<typeof within>): Promise<void> {\n  const elRail = await canvas.findByTestId(\"monday-ranged-slider-m__rail\");\n  const rect = elRail.getBoundingClientRect();\n  const elThumbStart = await within(elRail).findByTestId(\"monday-ranged-slider-m__thumb-0\");\n  const elThumbEnd = await within(elRail).findByTestId(\"monday-ranged-slider-m__thumb-1\");\n\n  // Click at start - moves start thumb to 0\n  clickAtX(elRail, rect.left);\n  await delay(CHANGES_DELAY);\n  expect(elThumbStart.getAttribute(\"aria-valuenow\")).toBe(\"0\");\n\n  // Click at end - moves end thumb to 100\n  clickAtX(elRail, rect.right);\n  await delay(CHANGES_DELAY);\n  expect(elThumbEnd.getAttribute(\"aria-valuenow\")).toBe(\"100\");\n\n  // Click at 25% - moves start thumb (nearest)\n  clickAtX(elRail, rect.left + rect.width * 0.25);\n  await delay(CHANGES_DELAY);\n  expect(elThumbStart.getAttribute(\"aria-valuenow\")).toBe(\"25\");\n\n  // Click at 75% - moves end thumb (nearest)\n  clickAtX(elRail, rect.left + rect.width * 0.75);\n  await delay(CHANGES_DELAY);\n  expect(elThumbEnd.getAttribute(\"aria-valuenow\")).toBe(\"75\");\n}\n\nasync function testRangedSliderDragThumbs(canvas: ReturnType<typeof within>): Promise<void> {\n  const elRail = await canvas.findByTestId(\"monday-ranged-slider-s__rail\");\n  const rect = elRail.getBoundingClientRect();\n  const elThumbStart = await within(elRail).findByTestId(\"monday-ranged-slider-s__thumb-0\");\n  const elThumbEnd = await within(elRail).findByTestId(\"monday-ranged-slider-s__thumb-1\");\n\n  // Drag start thumb to 25%\n  await dragToX(elThumbStart, rect.left + rect.width * 0.25);\n  await delay(CHANGES_DELAY);\n  expect(elThumbStart.getAttribute(\"aria-valuenow\")).toBe(\"25\");\n\n  // Drag end thumb to 65%\n  await dragToX(elThumbEnd, rect.left + rect.width * 0.65);\n  await delay(CHANGES_DELAY);\n  expect(elThumbEnd.getAttribute(\"aria-valuenow\")).toBe(\"65\");\n\n  // Drag start thumb past end thumb to 95% - thumbs should switch\n  await dragToX(elThumbStart, rect.left + rect.width * 0.95);\n  await delay(CHANGES_DELAY);\n  // After crossing, the end thumb should now be at 95%\n  expect(elThumbEnd.getAttribute(\"aria-valuenow\")).toBe(\"95\");\n\n  // Drag start thumb to 5%\n  await dragToX(elThumbStart, rect.left + rect.width * 0.05);\n  await delay(CHANGES_DELAY);\n  expect(elThumbStart.getAttribute(\"aria-valuenow\")).toBe(\"5\");\n}\n\nexport const nonRangedSliderMouseEventsPlaySuite = interactionSuite({\n  tests: [testNonRangedSliderClickOnRail, testNonRangedSliderDragThumb],\n  afterEach: async () => {\n    await resetFocus();\n  }\n});\n\nexport const rangedSliderMouseEventsPlaySuite = interactionSuite({\n  tests: [testRangedSliderClickOnRail, testRangedSliderDragThumbs],\n  afterEach: async () => {\n    await resetFocus();\n  }\n});\n"
  },
  {
    "path": "packages/docs/src/pages/components/Slider/Slider.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { UsageGuidelines } from \"vibe-storybook-components\";\nimport { TipMultiStepIndicator } from \"./Slider.stories.helpers\";\nimport * as SliderStories from \"./Slider.stories\";\n\n<Meta of={SliderStories} />\n\n# Slider\n\nSlider is a visual input component that reflects current state status in its appearance.\n\n<Canvas of={SliderStories.Overview} />\n\n### Import\n\n```js\nimport { Slider } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Slider adjustment makes immediate changes to its content without need of saving\",\n    \"Slider works best when the exact value does not matter for the user\",\n    \"Slider works best for adjusting volume, setting playback time within a music player, adjusting brightness.\",\n    \"If exact value is necessary use slider with label\"\n  ]}\n/>\n\n<TipMultiStepIndicator />\n\n## Variants\n\n### Sizes\n\nSizes small/medium/large are available.\n\n<Canvas of={SliderStories.Sizes} />\n\n### Ranged Slider\n\nSlider can define range instead of single value\n\n<Canvas of={SliderStories.Ranged} />\n\n### Colors\n\nColor Modes primary/positive/negative are available.\n\n<Canvas of={SliderStories.Colors} />\n\n### Disabled\n\nSlider can be disabled.\n\n<Canvas of={SliderStories.Disabled} />\n\n### With labels\n\nIndicate selection at Label, Add Prefix and/or Postfix Icons or Labels\n\n<Canvas of={SliderStories.WithLabels} />\n\n### Always show Slider's value\n\nAlways show value of slider (instead of Tooltip).\n\n<Canvas of={SliderStories.ShowValue} />\n\n### Limit and Step\n\nLimit and Step can be customized.\n\n<Canvas of={SliderStories.LimitsSteps} />\n\n### Customisation\n\nCustom ID, custom `data-testid` and Custom Class. Add Custom Items as Prefix and Postfix of Slider.\n\n**Important!** Please use customisation very careful, only if you really need it. Check twice with your Product/Designer.\n\n<Canvas of={SliderStories.Customisation} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"ProgressBar\", \"Toggle\", \"MultiStepIndicator\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Slider/Slider.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const TipMultiStepIndicator = () => (\n  <Tip title=\"Not what you were looking for?\">\n    If you need to visualize progress use{\" \"}\n    <StorybookLink page=\"Components/MultiStepIndicator\" size=\"small\">\n      MultiStepIndicator\n    </StorybookLink>{\" \"}\n    component instead\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/Slider/Slider.stories.tsx",
    "content": "import React from \"react\";\nimport { createComponentTemplate } from \"vibe-storybook-components\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { Slider, Chips, Flex } from \"@vibe/core\";\nimport { Sound, Video } from \"@vibe/icons\";\nimport { rangedSliderMouseEventsPlaySuite, nonRangedSliderMouseEventsPlaySuite } from \"./Slider.interactions\";\n\nconst argTypes = createStoryMetaSettingsDecorator({\n  component: Slider\n});\n\nexport default {\n  title: \"Components/Slider\",\n  component: Slider,\n  argTypes: argTypes\n};\n\nconst sliderTemplate = createComponentTemplate(Slider);\n\nexport const Overview = {\n  render: sliderTemplate.bind({}),\n  args: {\n    id: \"overview-slider\",\n    \"aria-label\": \"Overview slider\"\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const Sizes = {\n  render: () => (\n    <Flex gap=\"medium\" flex=\"1\">\n      <Slider id=\"sizes-small\" aria-label=\"Small slider\" size=\"small\" defaultValue={12} />\n      <Slider id=\"sizes-medium\" aria-label=\"Medium slider\" size=\"medium\" defaultValue={24} />\n      <Slider id=\"sizes-large\" aria-label=\"Large slider\" size=\"large\" defaultValue={35} />\n    </Flex>\n  )\n};\n\nexport const Ranged = {\n  render: () => (\n    <Flex gap=\"medium\" flex=\"1\">\n      <Slider\n        id=\"ranged-small\"\n        aria-label=\"Small ranged slider\"\n        data-testid={\"monday-ranged-slider-s\"}\n        size=\"small\"\n        ranged={true}\n      />\n      <Slider\n        id=\"ranged-medium\"\n        aria-label=\"Medium ranged slider\"\n        data-testid={\"monday-ranged-slider-m\"}\n        size=\"medium\"\n        ranged={true}\n        defaultValue={[12, 55]}\n      />\n      <Slider id=\"ranged-large\" aria-label=\"Large ranged slider\" size=\"large\" ranged={true} defaultValue={[25, 32]} />\n    </Flex>\n  ),\n  play: rangedSliderMouseEventsPlaySuite\n};\n\nexport const Colors = {\n  render: () => (\n    <Flex gap=\"medium\" flex=\"1\">\n      <Slider id=\"color-positive\" aria-label=\"Positive color slider\" color=\"positive\" defaultValue={34} size=\"medium\" />\n      <Slider\n        id=\"color-negative\"\n        aria-label=\"Negative color ranged slider\"\n        color=\"negative\"\n        ranged={true}\n        defaultValue={[12, 55]}\n        size=\"medium\"\n      />\n      <Slider id=\"color-primary\" aria-label=\"Primary color slider\" color=\"primary\" defaultValue={12} size=\"medium\" />\n    </Flex>\n  )\n};\n\nexport const Disabled = {\n  render: () => (\n    <Flex gap=\"medium\" flex=\"1\">\n      <Slider\n        id=\"disabled-positive\"\n        aria-label=\"Disabled positive slider\"\n        disabled={true}\n        defaultValue={24}\n        color=\"positive\"\n        size=\"medium\"\n      />\n      <Slider\n        id=\"disabled-negative\"\n        aria-label=\"Disabled negative slider\"\n        disabled={true}\n        color=\"negative\"\n        size=\"medium\"\n      />\n      <Slider\n        id=\"disabled-ranged\"\n        aria-label=\"Disabled ranged primary slider\"\n        disabled={true}\n        ranged={true}\n        defaultValue={[12, 55]}\n        color=\"primary\"\n        size=\"medium\"\n      />\n    </Flex>\n  )\n};\n\nexport const WithLabels = {\n  render: () => (\n    <Flex direction=\"column\" gap=\"large\" style={{ width: \"500px\" }}>\n      <Slider\n        id=\"labeled-simple\"\n        aria-label=\"Simple labeled slider\"\n        indicateSelection={true}\n        defaultValue={12}\n        size=\"small\"\n      />\n      <Slider\n        id=\"labeled-ranged\"\n        aria-label=\"Labeled ranged slider\"\n        indicateSelection={true}\n        ranged={true}\n        defaultValue={[12, 55]}\n        size=\"small\"\n      />\n      <Slider\n        id=\"labeled-sound\"\n        aria-label=\"Sound slider with icon\"\n        // @ts-ignore\n        prefix={{ icon: Sound }}\n        indicateSelection={true}\n        defaultValue={70}\n        size=\"small\"\n      />\n      <Slider\n        id=\"labeled-video\"\n        aria-label=\"Video slider with icons\"\n        // @ts-ignore\n        prefix={{ icon: Video }}\n        // @ts-ignore\n        postfix={{ icon: Sound }}\n        defaultValue={45}\n        size=\"medium\"\n      />\n      <Slider\n        id=\"labeled-volume\"\n        aria-label=\"Volume slider\"\n        prefix=\"Vol\"\n        indicateSelection={true}\n        defaultValue={0}\n        size=\"large\"\n      />\n    </Flex>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Sound, Video }\n      }\n    }\n  }\n};\n\nexport const ShowValue = {\n  render: () => (\n    <Flex gap=\"medium\" flex=\"1\">\n      <Slider\n        id=\"show-value-small\"\n        aria-label=\"Small slider showing value\"\n        data-testid={\"monday-slider-show-value-s\"}\n        showValue={true}\n        defaultValue={12}\n        size=\"small\"\n      />\n      <Slider\n        id=\"show-value-medium\"\n        aria-label=\"Medium slider showing value\"\n        data-testid={\"monday-slider-show-value-m\"}\n        showValue={true}\n        defaultValue={55}\n        size=\"medium\"\n      />\n      <Slider\n        id=\"show-value-large\"\n        aria-label=\"Large slider showing value\"\n        data-testid={\"monday-slider-show-value-l\"}\n        showValue={true}\n        defaultValue={89}\n        size=\"large\"\n      />\n    </Flex>\n  ),\n  play: nonRangedSliderMouseEventsPlaySuite\n};\n\nexport const LimitsSteps = {\n  render: () => (\n    <Flex direction=\"column\" gap=\"large\" style={{ width: \"500px\" }}>\n      <Slider\n        id=\"step-10\"\n        aria-label=\"Slider with step 10\"\n        prefix=\"Step 10\"\n        step={10}\n        indicateSelection={true}\n        defaultValue={10}\n        size=\"small\"\n      />\n      <Slider\n        id=\"step-2-max-20\"\n        aria-label=\"Slider with step 2 max 20\"\n        prefix=\"Step 2, Max: 20\"\n        max={20}\n        step={2}\n        indicateSelection={true}\n        defaultValue={4}\n        size=\"medium\"\n      />\n      <Slider\n        id=\"percentage-range\"\n        aria-label=\"Percentage range slider from 20% to 80%\"\n        prefix=\"from 20%\"\n        postfix=\"till 80%\"\n        min={20}\n        max={80}\n        showValue={true}\n        defaultValue={62}\n        size=\"large\"\n      />\n      <Slider\n        id=\"ranged-100-200\"\n        aria-label=\"Ranged slider from 100 to 200\"\n        ranged={true}\n        indicateSelection={true}\n        min={100}\n        max={200}\n        step={10}\n        size=\"large\"\n      />\n    </Flex>\n  ),\n\n  name: \"Limits, Steps\"\n};\n\nexport const Customisation = {\n  render: () => (\n    <Flex direction=\"column\" gap=\"large\" style={{ width: \"500px\" }}>\n      <Slider\n        id=\"my-app-slider\"\n        data-testid={\"my-app-slider\"}\n        className=\"my-custom-class\"\n        defaultValue={19}\n        prefix=\"Check Dev-Tools for Custom Classes\"\n        size=\"medium\"\n      />\n      <Slider\n        id=\"custom-value-formatter\"\n        className=\"my-custom-formatter\"\n        defaultValue={3}\n        min={1}\n        max={10}\n        indicateSelection={true}\n        valueFormatter={(value: number) => `${value}GB`}\n        prefix=\"Custom value formatter\"\n        size=\"medium\"\n      />\n      <Slider\n        id=\"custom-value-formatter\"\n        className=\"my-long-formatter\"\n        defaultValue={3}\n        min={1}\n        max={10}\n        indicateSelection={true}\n        selectionIndicatorWidth=\"120px\"\n        valueFormatter={(value: number) => `${value} meter/hour`}\n        prefix=\"Long value formatter\"\n        size=\"medium\"\n      />\n      <Slider\n        id=\"custom-prefix\"\n        className=\"my-slider-wide\"\n        defaultValue={50}\n        prefix={<Chips label=\"Custom component\" readOnly />}\n        postfix={(value: number, valueText: string) => {\n          // set css: .my-slider-wide { max-width: none }\n          return <span style={{ whiteSpace: \"nowrap\" }}>{`RenderProps: ${valueText} (${value}) `}</span>;\n        }}\n        size=\"medium\"\n      />\n    </Flex>\n  )\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/SplitButton/SplitButton.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { Link, UsageGuidelines } from \"vibe-storybook-components\";\nimport { SplitButton, Button } from \"@vibe/core\";\nimport { Filter, Group, Print, Search, Sort, Upload } from \"@vibe/icons\";\nimport { SplitButtonExampleDialog, TipMenu } from \"./SplitButton.stories.helpers\";\nimport * as SplitButtonStories from \"./SplitButton.stories\";\n\n<Meta of={SplitButtonStories} />\n\n# SplitButton\n\nA split button is a dual-function menu button that offers a default action as well as the possibility of choosing a secondary action, by selecting from a set of alternatives.\n\n<Canvas of={SplitButtonStories.Overview} />\n\n### Import\n\n```js\nimport { SplitButton, SplitButtonMenu } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Try limiting the overall number of choices within the menu to less than four.\",\n    \"Order the items within the menu by popularity for a small number of items, or alphabetically for a larger number of items.\",\n    \"Avoid submenus within split button menu.\",\n    \"Split button contains two actions: One primary action and a list of secondary actions.\"\n  ]}\n/>\n\n<TipMenu />\n\n## Variants\n\n### Types\n\nThe split button has three variants: primary, secondary, and tertiary.\n\n<Canvas of={SplitButtonStories.Types} />\n\n### Sizes\n\nThe split button has supports multiple sizes: small, medium and large.\n\n<Canvas of={SplitButtonStories.Sizes} />\n\n### Icon usage\n\n<Canvas of={SplitButtonStories.SplitButtonWithIcons} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: [\n          <SplitButton children=\"New item\" secondaryDialogContent={<SplitButtonExampleDialog />} />,\n          <SplitButton success kind=\"tertiary\" leftIcon={Search} secondaryDialogContent={<SplitButtonExampleDialog />}>\n            Search\n          </SplitButton>,\n          <Button kind=\"tertiary\" leftIcon={Filter}>\n            Filter\n          </Button>\n        ],\n        description: \"Use only one primary action within a single view.\"\n      },\n      negative: {\n        component: [\n          <SplitButton children=\"New item\" secondaryDialogContent={<SplitButtonExampleDialog />} />,\n          <Button>Search</Button>\n        ],\n        description: \"Don’t use multiple primary buttons within a single view.\"\n      }\n    },\n    {\n      positive: {\n        component: (\n          <SplitButton\n            children=\"New item\"\n            secondaryDialogContent={() =>\n              SplitButtonExampleDialog({ options: [{ text: \"New group\" }, { text: \"New board\" }] })\n            }\n          />\n        ),\n        description: \"Use split button if there are more than one action within the menu.\"\n      },\n      negative: {\n        component: (\n          <SplitButton\n            children=\"New item\"\n            secondaryDialogContent={() => SplitButtonExampleDialog({ options: [{ text: \"New group\" }] })}\n          />\n        ),\n        description: (\n          <>\n            Don’t use split button if there’s only one option within the menu. Use{\" \"}\n            <StorybookLink page=\"Components/Button\">Button</StorybookLink> instead (see example in the secondary\n            dialog).\n          </>\n        )\n      }\n    },\n    {\n      positive: {\n        component: (\n          <SplitButton\n            children=\"New item\"\n            secondaryDialogContent={() =>\n              SplitButtonExampleDialog({\n                options: [\n                  { icon: Group, text: \"New group\" },\n                  { icon: Upload, text: \"New board\" }\n                ]\n              })\n            }\n          />\n        ),\n        description:\n          \"Use a split button to display an action with related actions. The main action should be the most common.\"\n      },\n      negative: {\n        component: (\n          <SplitButton\n            children=\"New item\"\n            secondaryDialogContent={() =>\n              SplitButtonExampleDialog({\n                options: [\n                  { icon: Print, text: \"Print board\" },\n                  { icon: Sort, text: \"Sort items\" }\n                ]\n              })\n            }\n          />\n        ),\n        description: \"Don’t use a split button to group not related actions (see example in the secondary dialog).\"\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### Split button as the primary action\n\nUse template is the main action.\n\n<Canvas of={SplitButtonStories.SplitButtonAsThePrimaryAction} />\n\n### Secondary split button\n\nWhen there’s already a primary button in the view, use a secondary split button.\n\n<Canvas of={SplitButtonStories.SecondarySplitButton} />\n\n### Custom menu\n\nThe split button can accept a custom Menu in case there's a need to override the default behavior.\n\nNotice to always include `focusItemIndexOnMount` prop for accessibility reasons when using custom menus.\n\n<Canvas of={SplitButtonStories.CustomMenu} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Button\", \"ButtonGroup\", \"Menu\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/SplitButton/SplitButton.stories.helpers.tsx",
    "content": "import { StorybookLink, Tip } from \"vibe-storybook-components\";\nimport { Announcement, Check } from \"@vibe/icons\";\nimport { SplitButtonMenu, MenuItem } from \"@vibe/core\";\nimport React from \"react\";\n\nexport const TipMenu = () => (\n  <Tip>\n    If the actions in the menu are not related to each other, consider using a{\" \"}\n    <StorybookLink page=\"Components/Menu\" size=\"small\">\n      Menu\n    </StorybookLink>{\" \"}\n    component.\n  </Tip>\n);\n\nconst DialogDefault = [\n  { icon: Check, text: \"Hey\" },\n  { icon: Announcement, text: \"There\" }\n];\n\nexport const SplitButtonExampleDialog = ({ options = DialogDefault }) => {\n  return (\n    <div>\n      {!options ? (\n        <>I would be anything you want to be</>\n      ) : (\n        <SplitButtonMenu id=\"split-menu\">\n          {options.map(option => (\n            <MenuItem key={option.text} icon={option.icon} title={option.text} />\n          ))}\n        </SplitButtonMenu>\n      )}\n    </div>\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/SplitButton/SplitButton.stories.tsx",
    "content": "import React from \"react\";\nimport { SplitButton, SplitButtonMenu, MenuItem, Menu, MenuTitle, Button, type SplitButtonProps } from \"@vibe/core\";\nimport { Add, Announcement, Check, Download, Favorite, Moon, Sun, Upload } from \"@vibe/icons\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: SplitButton,\n  iconPropNamesArray: [\"leftIcon\", \"rightIcon\"],\n  actionPropsArray: [\"secondaryDialogContent\", \"onSecondaryDialogDidShow\", \"onSecondaryDialogDidHide\", \"onClick\"]\n});\n\nexport default {\n  title: \"Components/SplitButton\",\n  component: SplitButton,\n\n  subcomponents: {\n    SplitButtonMenu\n  },\n\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators,\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Add, Announcement, Check, Download, Favorite, Moon, Sun, Upload }\n      }\n    }\n  }\n};\n\nexport const Overview = {\n  render: (args: SplitButtonProps) => (\n    <SplitButton id=\"overview-split-button\" aria-label=\"Overview split button\" {...args}>\n      Button\n    </SplitButton>\n  ),\n  args: {\n    secondaryDialogContent: () => (\n      <SplitButtonMenu id=\"overview-split-menu\">\n        <MenuItem id=\"overview-menu-check\" icon={Check} title=\"Hey\" />\n        <MenuItem id=\"overview-menu-announcement\" icon={Announcement} title=\"There\" />\n      </SplitButtonMenu>\n    )\n  },\n  parameters: {\n    docs: {\n      liveEdit: { isEnabled: false }\n    }\n  }\n};\n\nexport const Types = {\n  render: () => (\n    <>\n      <SplitButton\n        id=\"types-primary\"\n        aria-label=\"Primary split button\"\n        secondaryDialogContent={\n          <SplitButtonMenu id=\"types-primary-menu\">\n            <MenuItem id=\"types-primary-check\" icon={Check} title=\"Hey\" />\n            <MenuItem id=\"types-primary-announcement\" icon={Announcement} title=\"There\" />\n          </SplitButtonMenu>\n        }\n      >\n        Primary\n      </SplitButton>\n      <SplitButton\n        id=\"types-secondary\"\n        aria-label=\"Secondary split button\"\n        kind=\"secondary\"\n        secondaryDialogContent={\n          <SplitButtonMenu id=\"types-secondary-menu\">\n            <MenuItem id=\"types-secondary-check\" icon={Check} title=\"Hey\" />\n            <MenuItem id=\"types-secondary-announcement\" icon={Announcement} title=\"There\" />\n          </SplitButtonMenu>\n        }\n      >\n        Secondary\n      </SplitButton>\n      <SplitButton\n        id=\"types-tertiary\"\n        aria-label=\"Tertiary split button\"\n        kind=\"tertiary\"\n        secondaryDialogContent={\n          <SplitButtonMenu id=\"types-tertiary-menu\">\n            <MenuItem id=\"types-tertiary-check\" icon={Check} title=\"Hey\" />\n            <MenuItem id=\"types-tertiary-announcement\" icon={Announcement} title=\"There\" />\n          </SplitButtonMenu>\n        }\n      >\n        Tertiary\n      </SplitButton>\n    </>\n  )\n};\n\nexport const Sizes = {\n  render: () => (\n    <>\n      <SplitButton\n        id=\"sizes-small\"\n        aria-label=\"Small split button\"\n        size=\"small\"\n        secondaryDialogContent={\n          <SplitButtonMenu id=\"sizes-small-menu\">\n            <MenuItem id=\"sizes-small-check\" icon={Check} title=\"Hey\" />\n            <MenuItem id=\"sizes-small-announcement\" icon={Announcement} title=\"There\" />\n          </SplitButtonMenu>\n        }\n      >\n        Small\n      </SplitButton>\n      <SplitButton\n        id=\"sizes-medium\"\n        aria-label=\"Medium split button\"\n        size=\"medium\"\n        secondaryDialogContent={\n          <SplitButtonMenu id=\"sizes-medium-menu\">\n            <MenuItem id=\"sizes-medium-check\" icon={Check} title=\"Hey\" />\n            <MenuItem id=\"sizes-medium-announcement\" icon={Announcement} title=\"There\" />\n          </SplitButtonMenu>\n        }\n      >\n        Medium\n      </SplitButton>\n      <SplitButton\n        id=\"sizes-large\"\n        aria-label=\"Large split button\"\n        size=\"large\"\n        secondaryDialogContent={\n          <SplitButtonMenu id=\"sizes-large-menu\">\n            <MenuItem id=\"sizes-large-check\" icon={Check} title=\"Hey\" />\n            <MenuItem id=\"sizes-large-announcement\" icon={Announcement} title=\"There\" />\n          </SplitButtonMenu>\n        }\n      >\n        Large\n      </SplitButton>\n    </>\n  )\n};\n\nexport const SplitButtonWithIcons = {\n  render: () => (\n    <>\n      <SplitButton\n        id=\"icons-left\"\n        aria-label=\"Split button with left icon\"\n        leftIcon={Add}\n        secondaryDialogContent={\n          <SplitButtonMenu id=\"icons-left-menu\">\n            <MenuItem id=\"icons-left-check\" icon={Check} title=\"Hey\" />\n            <MenuItem id=\"icons-left-announcement\" icon={Announcement} title=\"There\" />\n          </SplitButtonMenu>\n        }\n      >\n        Left icon\n      </SplitButton>\n      <SplitButton\n        id=\"icons-right\"\n        aria-label=\"Split button with right icon\"\n        rightIcon={Add}\n        secondaryDialogContent={\n          <SplitButtonMenu id=\"icons-right-menu\">\n            <MenuItem id=\"icons-right-check\" icon={Check} title=\"Hey\" />\n            <MenuItem id=\"icons-right-announcement\" icon={Announcement} title=\"There\" />\n          </SplitButtonMenu>\n        }\n      >\n        Right icon\n      </SplitButton>\n    </>\n  ),\n  name: \"Split button with icons\"\n};\n\nexport const SplitButtonAsThePrimaryAction = {\n  render: () => (\n    <SplitButton\n      id=\"primary-action\"\n      aria-label=\"Use template split button\"\n      secondaryDialogPosition=\"bottom-start\"\n      secondaryDialogContent={\n        <SplitButtonMenu id=\"primary-action-menu\">\n          <MenuItem id=\"primary-action-import\" icon={Download} title=\"Import template\" />\n          <MenuItem id=\"primary-action-export\" icon={Upload} title=\"Export template\" />\n        </SplitButtonMenu>\n      }\n    >\n      Use template\n    </SplitButton>\n  ),\n  name: \"Split button as the primary action\"\n};\n\nexport const SecondarySplitButton = {\n  render: () => (\n    <>\n      <SplitButton\n        id=\"secondary-export\"\n        aria-label=\"Export options split button\"\n        kind=\"secondary\"\n        secondaryDialogPosition=\"bottom-start\"\n        secondaryDialogContent={\n          <SplitButtonMenu id=\"secondary-export-menu\">\n            <MenuItem id=\"secondary-export-pdf\" title=\"Export to PDF\" />\n            <MenuItem id=\"secondary-export-docx\" title=\"Export to DOCX\" />\n            <MenuItem id=\"secondary-export-excel\" title=\"Export to Excel\" />\n          </SplitButtonMenu>\n        }\n      >\n        Export to CSV\n      </SplitButton>\n      <Button id=\"new-item-button\" aria-label=\"Create new item\">\n        New item\n      </Button>\n    </>\n  ),\n  name: \"Secondary split button\"\n};\n\nexport const CustomMenu = {\n  render: () => (\n    <SplitButton\n      id=\"custom-menu\"\n      aria-label=\"Custom menu split button\"\n      secondaryDialogContent={\n        <Menu focusItemIndexOnMount={2} id=\"custom-menu-content\" size=\"medium\">\n          <MenuTitle caption=\"Look up, you might see\" captionPosition=\"top\" />\n          <MenuItem id=\"custom-menu-sun\" icon={Sun} type=\"svg\" title=\"The sun\" />\n          <MenuItem id=\"custom-menu-moon\" icon={Moon} type=\"svg\" title=\"The moon\" />\n          <MenuItem id=\"custom-menu-stars\" icon={Favorite} type=\"svg\" title=\"And the stars\" />\n        </Menu>\n      }\n    >\n      Custom menu\n    </SplitButton>\n  ),\n  name: \"Custom menu\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Steps/Steps.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { StepsGalleryDontTemplate, StepsNumbersDoTemplate } from \"./Steps.stories.helpers\";\nimport { ComponentRules, UsageGuidelines } from \"vibe-storybook-components\";\nimport * as StepsStories from \"./Steps.stories\";\n\n<Meta of={StepsStories} />\n\n# Steps\n\nSteps display progress through a sequence of logical and numbered steps. They may also be used for navigation.\n\n<Canvas of={StepsStories.Overview} />\n\n### Import\n\n```js\nimport { Steps } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"The stepper shows users where they are in the process, and can be used to navigate through the process by selecting steps.\",\n    \"If a task needs more than six steps, consider simplifying the process or breaking it up into multiple tasks.\"\n  ]}\n/>\n\n## Variants\n\n### Types\n\nSteps with a number view or gallery view.\n\n<Canvas of={StepsStories.Types} />\n\n### On primary\n\n<Canvas of={StepsStories.OnPrimary} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: <StepsNumbersDoTemplate />,\n        description: \"Use steps with numbers type for use cases of steps with more than 5 steps.\"\n      },\n      negative: {\n        component: <StepsGalleryDontTemplate />,\n        description: \"Don't use the gallery type steps component for more than 5 steps.\"\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### Navigable Steps\n\nNavigable steps with proper code example.\n\n<Canvas of={StepsStories.NavigableSteps} />\n\n### Steps inside a tipseen\n\nOur Tipseen component includes support for steps as content.\n\n<Canvas of={StepsStories.StepsInsideATipseen} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"MultiStepIndicator\", \"Breadcrumbs\", \"Tabs\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Steps/Steps.stories.helpers.tsx",
    "content": "import React, { useCallback, useState } from \"react\";\nimport { Steps } from \"@vibe/core\";\n\nconst steps6 = [<div />, <div />, <div />, <div />, <div />, <div />];\n\nexport const modifiers = [\n  {\n    name: \"preventOverflow\",\n    options: {\n      mainAxis: false // true by default\n    }\n  },\n  {\n    name: \"flip\",\n    options: {\n      // @ts-ignore\n      fallbackPlacements: [] // true by default\n    }\n  }\n];\n\nexport const StepsNumbersDoTemplate = () => {\n  const [activeStepIndex, setActiveStepIndex] = useState(2);\n  const stepPrev = useCallback(() => {\n    setActiveStepIndex(prevState => prevState - 1);\n  }, []);\n  const stepNext = useCallback(() => {\n    setActiveStepIndex(prevState => prevState + 1);\n  }, []);\n  const onChangeActiveStep = useCallback((_e: any, stepIndex: React.SetStateAction<number>) => {\n    setActiveStepIndex(stepIndex);\n  }, []);\n  return (\n    <Steps\n      type=\"numbers\"\n      steps={steps6}\n      activeStepIndex={activeStepIndex}\n      onChangeActiveStep={onChangeActiveStep}\n      backButtonProps={{\n        onClick: stepPrev\n      }}\n      nextButtonProps={{\n        onClick: stepNext\n      }}\n      onFinish={() => {}}\n    />\n  );\n};\n\nexport const StepsGalleryDontTemplate = () => {\n  const [activeStepIndex, setActiveStepIndex] = useState(2);\n  const stepPrev = useCallback(() => {\n    setActiveStepIndex(prevState => prevState - 1);\n  }, []);\n  const stepNext = useCallback(() => {\n    setActiveStepIndex(prevState => prevState + 1);\n  }, []);\n  const onChangeActiveStep = useCallback((_e: any, stepIndex: React.SetStateAction<number>) => {\n    setActiveStepIndex(stepIndex);\n  }, []);\n  return (\n    <Steps\n      steps={steps6}\n      activeStepIndex={activeStepIndex}\n      onChangeActiveStep={onChangeActiveStep}\n      backButtonProps={{\n        onClick: stepPrev\n      }}\n      nextButtonProps={{\n        onClick: stepNext\n      }}\n      onFinish={() => {}}\n    />\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Steps/Steps.stories.tsx",
    "content": "import React, { useCallback, useState } from \"react\";\nimport { Steps, type StepsProps, Tipseen, TipseenWizard, Flex } from \"@vibe/core\";\nimport { modifiers } from \"./Steps.stories.helpers\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: Steps,\n  actionPropsArray: [\"onChangeActiveStep\"]\n});\n\nconst steps5 = [<div />, <div />, <div />, <div />, <div />];\n\nexport default {\n  title: \"Components/Steps\",\n  component: Steps,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators,\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { steps5 }\n      }\n    }\n  }\n};\n\nconst NavigableStepsTemplate = (args: StepsProps) => {\n  const [activeStepIndex, setActiveStepIndex] = useState(2);\n  const stepPrev = useCallback(() => {\n    setActiveStepIndex(prevState => prevState - 1);\n  }, []);\n  const stepNext = useCallback(() => {\n    setActiveStepIndex(prevState => prevState + 1);\n  }, []);\n  const onChangeActiveStep = useCallback((_e: any, stepIndex: React.SetStateAction<number>) => {\n    setActiveStepIndex(stepIndex);\n  }, []);\n\n  return (\n    <Steps\n      id=\"overview-steps\"\n      activeStepIndex={activeStepIndex}\n      backButtonProps={{\n        onClick: stepPrev\n      }}\n      nextButtonProps={{\n        onClick: stepNext\n      }}\n      {...args}\n      onChangeActiveStep={onChangeActiveStep}\n    />\n  );\n};\n\nexport const Overview = {\n  render: NavigableStepsTemplate.bind({}),\n  name: \"Overview\",\n  args: {\n    steps: steps5\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const Types = {\n  render: () => (\n    <Flex direction=\"column\" gap=\"medium\">\n      <Steps id=\"types-numbers\" type=\"numbers\" steps={steps5} activeStepIndex={2} />\n      <Steps id=\"types-default\" steps={steps5} activeStepIndex={2} />\n      <div style={{ padding: \"15px 103px 20px\" }}>\n        <Steps id=\"types-no-nav\" steps={steps5} activeStepIndex={2} areNavigationButtonsHidden />\n      </div>\n    </Flex>\n  )\n};\n\nexport const OnPrimary = {\n  render: () => (\n    <Flex\n      direction=\"column\"\n      gap=\"medium\"\n      style={{ padding: \"var(--sb-spacing-small)\", backgroundColor: \"var(--sb-primary-color)\" }}\n    >\n      <Steps id=\"primary-numbers\" steps={steps5} activeStepIndex={2} color=\"on-primary-color\" type=\"numbers\" />\n      <Steps id=\"primary-default\" steps={steps5} activeStepIndex={2} color=\"on-primary-color\" />\n      <div style={{ padding: \"15px 103px 20px\" }}>\n        <Steps\n          id=\"primary-no-nav\"\n          steps={steps5}\n          activeStepIndex={2}\n          color=\"on-primary-color\"\n          areNavigationButtonsHidden\n        />\n      </div>\n    </Flex>\n  )\n};\n\nexport const NavigableSteps = {\n  render: () => {\n    const [activeStepIndex, setActiveStepIndex] = useState(2);\n\n    const stepPrev = useCallback(() => {\n      setActiveStepIndex(prevState => prevState - 1);\n    }, []);\n\n    const stepNext = useCallback(() => {\n      setActiveStepIndex(prevState => prevState + 1);\n    }, []);\n\n    const onChangeActiveStep = useCallback((_e: any, stepIndex: React.SetStateAction<number>) => {\n      setActiveStepIndex(stepIndex);\n    }, []);\n\n    return (\n      <div>\n        <Steps\n          id=\"navigable-steps\"\n          steps={steps5}\n          isContentOnTop\n          activeStepIndex={activeStepIndex}\n          onChangeActiveStep={onChangeActiveStep}\n          backButtonProps={{\n            onClick: stepPrev\n          }}\n          nextButtonProps={{\n            onClick: stepNext\n          }}\n        />\n      </div>\n    );\n  }\n};\n\nexport const StepsInsideATipseen = {\n  render: () => {\n    const steps = [\n      <div>Message number 1</div>,\n      <div>Message number 2</div>,\n      <div>Message number 3</div>,\n      <div>Message number 4</div>,\n      <div>Message number 5</div>\n    ];\n\n    const [activeStepIndex, setActiveStepIndex] = useState(2);\n\n    const stepPrev = useCallback(() => {\n      setActiveStepIndex(prevState => prevState - 1);\n    }, []);\n\n    const stepNext = useCallback(() => {\n      setActiveStepIndex(prevState => prevState + 1);\n    }, []);\n\n    const onChangeActiveStep = useCallback((_e: any, stepIndex: React.SetStateAction<number>) => {\n      setActiveStepIndex(stepIndex);\n    }, []);\n\n    return (\n      <Tipseen\n        id=\"tipseen-with-steps\"\n        position=\"right\"\n        modifiers={modifiers}\n        animationType=\"opacity-and-slide\"\n        content={\n          <TipseenWizard\n            id=\"tipseen-wizard\"\n            title=\"This is a title\"\n            steps={steps}\n            onChangeActiveStep={onChangeActiveStep}\n            activeStepIndex={activeStepIndex}\n            backButtonProps={{\n              size: \"small\",\n              onClick: stepPrev\n            }}\n            nextButtonProps={{\n              kind: \"primary\",\n              size: \"small\",\n              onClick: stepNext\n            }}\n          />\n        }\n      >\n        <div style={{ width: \"10px\", height: \"150px\" }} />\n      </Tipseen>\n    );\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { modifiers }\n      }\n    }\n  }\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Table/Table.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell, Label } from \"@vibe/core\";\nimport {\n  doAndDontBordersRuleColumns,\n  doAndDontBordersRuleData,\n  doAndDontIconsRuleColumns,\n  doAndDontIconsRuleData,\n  statusColumnToLabelColor,\n  TableEmptyState,\n  TableErrorState\n} from \"./Table.stories.helpers\";\nimport * as TableStories from \"./Table.stories\";\n\n<Meta of={TableStories} />\n\n# Table\n\nTables are used to organize data, making it easier to understand.\n\n<Canvas of={TableStories.Overview} />\n\n### Import\n\n```js\nimport { Table, TableHeader, TableHeaderCell TableBody, TableRow, TableCell } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Variants\n\n### Sizes\n\nThe table is available in 3 different row heights: small (32px) medium (40px) and large (48 px). Medium size is the default size.\n\n<Canvas of={TableStories.Sizes} />\n\n### Borders\n\nThe table is available with or without an outer border. When using a table inside another component (like a modal or dialog), remove the table's outer border for a cleaner look.\n\n<Canvas of={TableStories.Borders} />\n\n## Table header functionality\n\nSorting, Icons and Information added to selected columns\n\n<Canvas of={TableStories.TableHeaderFunctionality} />\n\n## Loading\n\nUsing skeleton\n\n<Canvas of={TableStories.Loading} />\n\n## Scroll\n\nTable with both vertical and horizontal scroll\n\n<Canvas of={TableStories.Scroll} />\n\n## Virtualized Scroll\n\nThis is an example of a table with 5000 rows\n\n<Tip>\n  The row element returned by `rowRenderer` must accept a `style` prop. This is required for `react-window` to position\n  rows correctly. If rows appear stacked or scrolling breaks, ensure your row component doesn't ignore or override the\n  `style` prop.\n</Tip>\n\n<Canvas of={TableStories.VirtualizedScroll} />\n\n## Sticky column\n\nUse sticky column in your table when you want to keep specific column visible while the users scroll horizontally.\n\n<Canvas of={TableStories.StickyColumn} />\n\n## Highlighted row\n\nUse a highlighted row to mark a single row of the table.\nA highlighted row allows adding additional information for the entire row, using a system trigger such as a side-panel or model.\n\n<Canvas of={TableStories.HighlightedRow} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: (\n          <div style={{ width: \"95%\" }}>\n            <Table\n              errorState={<TableErrorState />}\n              emptyState={<TableEmptyState />}\n              columns={doAndDontIconsRuleColumns}\n            >\n              <TableHeader>\n                {doAndDontIconsRuleColumns.map(cell => (\n                  <TableHeaderCell key={cell.id} {...cell} />\n                ))}\n              </TableHeader>\n              <TableBody>\n                {doAndDontIconsRuleData.map(rowItem => (\n                  <TableRow key={rowItem.id}>\n                    <TableCell>{rowItem.sentOn}</TableCell>\n                    <TableCell>{rowItem.subject}</TableCell>\n                    <TableCell>\n                      <Label text={rowItem.status} color={statusColumnToLabelColor[rowItem.status]} />\n                    </TableCell>\n                  </TableRow>\n                ))}\n              </TableBody>\n            </Table>\n          </div>\n        ),\n        description: \"If there’s a need to insert an icon, use for all columns.\"\n      },\n      negative: {\n        component: (\n          <div style={{ width: \"95%\" }}>\n            <Table\n              errorState={<TableErrorState />}\n              emptyState={<TableEmptyState />}\n              columns={doAndDontIconsRuleColumns}\n            >\n              <TableHeader>\n                {doAndDontIconsRuleColumns.map(cell => (\n                  <TableHeaderCell key={cell.id} {...cell} icon={cell.id === \"subject\" ? cell.icon : undefined} />\n                ))}\n              </TableHeader>\n              <TableBody>\n                {doAndDontIconsRuleData.map(rowItem => (\n                  <TableRow key={rowItem.id}>\n                    <TableCell>{rowItem.sentOn}</TableCell>\n                    <TableCell>{rowItem.subject}</TableCell>\n                    <TableCell>\n                      <Label text={rowItem.status} color={statusColumnToLabelColor[rowItem.status]} />\n                    </TableCell>\n                  </TableRow>\n                ))}\n              </TableBody>\n            </Table>\n          </div>\n        ),\n        description: \"Don't use icons if not applied to all columns titles.\"\n      }\n    },\n    {\n      positive: {\n        component: (\n          <div style={{ width: \"95%\" }}>\n            <Table\n              errorState={<TableErrorState />}\n              emptyState={<TableEmptyState />}\n              columns={doAndDontBordersRuleColumns}\n              withoutBorder\n            >\n              <TableHeader>\n                {doAndDontBordersRuleColumns.map(cell => (\n                  <TableHeaderCell key={cell.id} {...cell} />\n                ))}\n              </TableHeader>\n              <TableBody>\n                {doAndDontBordersRuleData.map(rowItem => (\n                  <TableRow key={rowItem.id}>\n                    <TableCell>{rowItem.sentOn}</TableCell>\n                    <TableCell>{rowItem.subject}</TableCell>\n                    <TableCell>{rowItem.emailsSent}</TableCell>\n                  </TableRow>\n                ))}\n              </TableBody>\n            </Table>\n          </div>\n        ),\n        description: \"If there’s a need, remove only the outer border.\"\n      },\n      negative: {\n        component: (\n          <div style={{ width: \"95%\", \"--layout-border-color\": \"transparent\" }}>\n            <Table\n              errorState={<TableErrorState />}\n              emptyState={<TableEmptyState />}\n              columns={doAndDontBordersRuleColumns}\n              withoutBorder\n            >\n              <TableHeader>\n                {doAndDontBordersRuleColumns.map(cell => (\n                  <TableHeaderCell key={cell.id} {...cell} icon={cell.id === \"subject\" ? cell.icon : undefined} />\n                ))}\n              </TableHeader>\n              <TableBody>\n                {doAndDontBordersRuleData.map(rowItem => (\n                  <TableRow key={rowItem.id}>\n                    <TableCell>{rowItem.sentOn}</TableCell>\n                    <TableCell>{rowItem.subject}</TableCell>\n                    <TableCell>{rowItem.emailsSent}</TableCell>\n                  </TableRow>\n                ))}\n              </TableBody>\n            </Table>\n          </div>\n        ),\n        description: \"Don't remove border between the rows.\"\n      }\n    }\n\n]}\n/>\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Label\", \"IconButton\", \"Skeleton\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Table/Table.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { Avatar, type LabelColor, type TableColumn } from \"@vibe/core\";\nimport { Calendar, Doc, Status } from \"@vibe/icons\";\n\nexport const doAndDontIconsRuleColumns = [\n  {\n    id: \"sentOn\",\n    title: \"Sent on\",\n    icon: Calendar,\n    width: 95\n  },\n  {\n    id: \"subject\",\n    title: \"Subject\",\n    icon: Doc\n  },\n  {\n    id: \"status\",\n    title: \"Status\",\n    icon: Status,\n    width: 120\n  }\n];\n\nexport const doAndDontIconsRuleData = [\n  {\n    id: \"1\",\n    sentOn: \"Apr 22\",\n    subject: \"Limited time offer: AP Process\",\n    sentBy: \"John Doe\",\n    status: \"In progress\"\n  },\n  {\n    id: \"2\",\n    sentOn: \"Apr 22\",\n    subject: \"Action required: Update your AP\",\n    sentBy: \"Jane Doe\",\n    status: \"Queued\"\n  },\n  {\n    id: \"3\",\n    sentOn: \"Apr 22\",\n    subject: \"Limited time offer: AP Process\",\n    sentBy: \"Peter Smith\",\n    status: \"Sent\"\n  }\n];\n\nexport const doAndDontBordersRuleColumns = [\n  {\n    id: \"sentOn\",\n    title: \"Sent on\",\n    width: 150,\n    loadingStateType: \"medium-text\"\n  },\n  {\n    id: \"subject\",\n    title: \"Subject\",\n    loadingStateType: \"long-text\"\n  },\n  {\n    id: \"emailsSent\",\n    title: \"Emails sent\",\n    width: 150,\n    loadingStateType: \"medium-text\"\n  }\n];\n\nexport const doAndDontBordersRuleData = [\n  {\n    id: \"1\",\n    sentOn: \"2020-01-01\",\n    subject: \"Lorem ipsum dolor\",\n    emailsSent: 100\n  },\n  {\n    id: \"2\",\n    sentOn: \"2022-02-02\",\n    subject: \"This is the subject\",\n    emailsSent: 99\n  },\n  {\n    id: \"3\",\n    sentOn: \"2023-03-03\",\n    subject: \"This is another subject\",\n    emailsSent: 999\n  }\n];\n\nexport const emailTableData = [\n  {\n    id: \"1\",\n    sentOn: \"2020-01-01\",\n    sentBy: \"John Doe\",\n    subject: \"Lorem ipsum dolor\",\n    status: \"Sent\",\n    emailsSent: 100\n  },\n  {\n    id: \"2\",\n    sentOn: \"2022-02-02\",\n    sentBy: \"Other Name\",\n    subject: \"This is the subject\",\n    status: \"Sent\",\n    emailsSent: 99\n  },\n  {\n    id: \"3\",\n    sentOn: \"2023-03-03\",\n    sentBy: \"Some Person\",\n    subject:\n      \"This is the subject This is the subject This is the subject This is the subject This is the subject This is the subject\",\n    status: \"Sent\",\n    emailsSent: 999\n  }\n];\n\nexport const emailColumns: TableColumn[] = [\n  {\n    id: \"sentOn\",\n    title: \"Sent on\",\n    width: 150,\n    loadingStateType: \"medium-text\"\n  },\n  {\n    id: \"subject\",\n    title: \"Subject\",\n    loadingStateType: \"long-text\"\n  },\n  {\n    id: \"sentBy\",\n    title: \"Sent by\",\n    width: { min: 120, max: 200 },\n    infoContent: \"This is the sender\",\n    loadingStateType: \"circle\"\n  },\n  {\n    id: \"status\",\n    title: \"Status\",\n    width: 150,\n    infoContent: \"Info content for the status column\",\n    loadingStateType: \"medium-text\"\n  },\n  {\n    id: \"emailsSent\",\n    title: \"Emails sent\",\n    width: 150,\n    loadingStateType: \"medium-text\"\n  }\n];\n\nexport const scrollTableData = [\n  {\n    id: \"1\",\n    sentOn: \"2020-01-01\",\n    sentBy: \"John Doe\",\n    subject: \"Lorem ipsum dolor\",\n    status: \"In progress\",\n    priority: \"Urgent\",\n    emailsSent: 100\n  },\n  {\n    id: \"2\",\n    sentOn: \"2020-02-02\",\n    sentBy: \"Jane Doe\",\n    subject: \"Dolor sit amet\",\n    status: \"In progress\",\n    priority: \"High\",\n    emailsSent: 50\n  },\n  {\n    id: \"3\",\n    sentOn: \"2020-03-03\",\n    sentBy: \"Peter Smith\",\n    subject: \"Consectetur adipiscing elit\",\n    status: \"Queued\",\n    priority: \"Normal\",\n    emailsSent: 0\n  },\n  {\n    id: \"4\",\n    sentOn: \"2020-04-04\",\n    sentBy: \"Susan Jones\",\n    subject: \"Sed do eiusmod tempor incididunt\",\n    status: \"Failed\",\n    priority: \"Low\",\n    emailsSent: 200\n  },\n  {\n    id: \"5\",\n    sentOn: \"2020-05-05\",\n    sentBy: \"David Brown\",\n    subject: \"Ut labore et dolore magna aliqua\",\n    status: \"Sent\",\n    priority: \"Urgent\",\n    emailsSent: 150\n  },\n  {\n    id: \"6\",\n    sentOn: \"2020-06-06\",\n    sentBy: \"Michael Johnson\",\n    subject: \"Et harum quidem rerum facilis est et expedita distinctio\",\n    status: \"Sent\",\n    priority: \"High\",\n    emailsSent: 75\n  }\n];\n\nexport const stickyColumns: TableColumn[] = [\n  {\n    id: \"projectName\",\n    title: \"Project name\",\n    width: 200,\n    loadingStateType: \"medium-text\"\n  },\n  {\n    id: \"status\",\n    title: \"Status\",\n    width: 150,\n    loadingStateType: \"medium-text\"\n  },\n  {\n    id: \"description\",\n    title: \"Description\",\n    loadingStateType: \"long-text\"\n  },\n  {\n    id: \"createdOn\",\n    title: \"Created on\",\n    width: 150,\n    loadingStateType: \"medium-text\"\n  },\n  {\n    id: \"emailsSent\",\n    title: \"Emails sent\",\n    width: 150,\n    loadingStateType: \"medium-text\"\n  },\n  {\n    id: \"owner\",\n    title: \"Owner\",\n    width: 150,\n    loadingStateType: \"medium-text\"\n  },\n  {\n    id: \"priority\",\n    title: \"Priority\",\n    width: 150,\n    loadingStateType: \"medium-text\"\n  },\n  {\n    id: \"category\",\n    title: \"Category\",\n    width: 150,\n    loadingStateType: \"medium-text\"\n  },\n  {\n    id: \"dueDate\",\n    title: \"Due Date\",\n    width: 150,\n    loadingStateType: \"medium-text\"\n  },\n  {\n    id: \"comments\",\n    title: \"Comments\",\n    loadingStateType: \"long-text\"\n  }\n];\n\nexport const stickyTableData = [\n  {\n    id: \"1\",\n    projectName: \"Limited time offer\",\n    status: \"In progress\",\n    description: \"This is description 1\",\n    createdOn: \"2024-07-03\",\n    emailsSent: 100,\n    owner: \"John Doe\",\n    priority: \"High\",\n    category: \"Marketing\",\n    dueDate: \"2024-08-15\",\n    comments: \"This project needs to be prioritized due to upcoming deadline.\"\n  },\n  {\n    id: \"2\",\n    projectName: \"Action required\",\n    status: \"In progress\",\n    description: \"This is description 2\",\n    createdOn: \"2024-07-08\",\n    emailsSent: 150,\n    owner: \"Jane Smith\",\n    priority: \"Medium\",\n    category: \"Sales\",\n    dueDate: \"2024-08-20\",\n    comments: \"Waiting for client feedback.\"\n  },\n  {\n    id: \"3\",\n    projectName: \"Cancellation request\",\n    status: \"Done\",\n    description: \"This is description 3\",\n    createdOn: \"2024-07-12\",\n    emailsSent: 300,\n    owner: \"Mark Johnson\",\n    priority: \"Low\",\n    category: \"Support\",\n    dueDate: \"2024-07-25\",\n    comments: \"Completed without issues.\"\n  },\n  {\n    id: \"4\",\n    projectName: \"Limited time offer\",\n    status: \"Stuck\",\n    description: \"This is description 4\",\n    createdOn: \"2024-08-06\",\n    emailsSent: 50,\n    owner: \"Lucy Brown\",\n    priority: \"High\",\n    category: \"Marketing\",\n    dueDate: \"2024-09-01\",\n    comments: \"Blocked by vendor issues.\"\n  },\n  {\n    id: \"5\",\n    projectName: \"Cancellation request\",\n    status: \"Done\",\n    description: \"This is description 5\",\n    createdOn: \"2024-09-05\",\n    emailsSent: 400,\n    owner: \"Alan Turing\",\n    priority: \"Low\",\n    category: \"Support\",\n    dueDate: \"2024-09-10\",\n    comments: \"Resolved, no further action required.\"\n  }\n];\n\nexport const highlightableRowColumns = [\n  {\n    id: \"sentOn\",\n    title: \"Sent on\",\n    width: 150,\n    loadingStateType: \"medium-text\"\n  },\n  {\n    id: \"subject\",\n    title: \"Subject\",\n    loadingStateType: \"long-text\"\n  },\n  {\n    id: \"emailsSent\",\n    title: \"Emails sent\",\n    width: 150,\n    loadingStateType: \"medium-text\"\n  },\n  {\n    id: \"highlight\",\n    title: \"Highlight\",\n    width: 150,\n    infoContent: \"Info content for the highlight column\",\n    loadingStateType: \"medium-text\"\n  }\n];\n\nexport const highlightableTableData = [\n  {\n    id: \"1\",\n    sentOn: \"2020-01-01\",\n    subject: \"Lorem ipsum dolor\",\n    emailsSent: 100\n  },\n  {\n    id: \"2\",\n    sentOn: \"2022-02-02\",\n    subject: \"This is the subject\",\n    emailsSent: 99\n  },\n  {\n    id: \"3\",\n    sentOn: \"2023-03-03\",\n    subject:\n      \"This is the subject This is the subject This is the subject This is the subject This is the subject This is the subject\",\n    emailsSent: 999\n  }\n];\n\nexport const priorityColumnToLabelColor: { [key: string]: LabelColor } = {\n  Urgent: \"negative\",\n  High: \"dark\",\n  Normal: \"primary\",\n  Low: \"positive\"\n};\n\nexport const statusColumnToLabelColor: { [key: string]: LabelColor } = {\n  Sent: \"positive\",\n  Queued: \"dark\",\n  Failed: \"negative\",\n  \"In progress\": \"primary\",\n  Done: \"positive\",\n  Stuck: \"negative\"\n};\n\nexport const scrollTableColumns = [\n  {\n    id: \"sentOn\",\n    title: \"Sent on\",\n    width: 150\n  },\n  {\n    id: \"priority\",\n    title: \"Priority\",\n    width: 150\n  },\n  {\n    id: \"subject\",\n    title: \"Subject\",\n    width: { min: 300, max: 500 }\n  },\n  {\n    id: \"sentBy\",\n    title: \"Sent by\",\n    width: 150,\n    infoContent: \"This is the sender\"\n  },\n  {\n    id: \"status\",\n    title: \"Status\",\n    width: 150,\n    infoContent: \"Info content for the status column\"\n  },\n  {\n    id: \"emailsSent\",\n    title: \"Emails sent\",\n    width: 150\n  }\n];\n\nexport const virtualizedScrollTableData = [...new Array(5000)].map((_, index) => ({\n  id: index.toString(),\n  name: `User${index}`,\n  email: `user${index}@example.com`,\n  ...Object.fromEntries([...Array(10)].map((_, i) => [`column${i + 1}`, `Value ${index}-${i + 1}`]))\n}));\n\nexport const virtualizedScrollTableColumns: TableColumn[] = [\n  { id: \"id\", title: \"ID\", width: 100 },\n  { id: \"name\", title: \"Name\", width: 150 },\n  { id: \"email\", title: \"Email\", width: 200 },\n  ...[...Array(10)].map((_, i) => ({\n    id: `column${i + 1}`,\n    title: `Column ${i + 1}`,\n    width: 150\n  }))\n];\n\nexport function sort<T>(columnId: keyof T, sortState: \"asc\" | \"desc\" | \"none\", tableData: T[]) {\n  if (sortState === \"asc\") {\n    return [...tableData].sort((a, b) => {\n      return b[columnId] > a[columnId] ? 1 : -1;\n    });\n  } else if (sortState === \"desc\") {\n    return [...tableData].sort((a, b) => {\n      return b[columnId] < a[columnId] ? 1 : -1;\n    });\n  } else {\n    return emailTableData;\n  }\n}\n\nexport const TableEmptyState = () => <h1 style={{ textAlign: \"center\" }}>Empty State</h1>;\n\nexport const TableErrorState = () => <h1 style={{ textAlign: \"center\" }}>Error State</h1>;\n\nexport const TableAvatar = ({ text }: { text: string }) => (\n  <Avatar\n    text={text\n      .split(\" \")\n      .map(s => s[0])\n      .join(\"\")}\n    customSize={24}\n    size=\"small\"\n    aria-label={text}\n    backgroundColor=\"dark_purple\"\n  />\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/Table/Table.stories.tsx",
    "content": "import React, { useState } from \"react\";\nimport {\n  Table,\n  type TableColumn,\n  TableHeader,\n  TableHeaderCell,\n  TableBody,\n  TableVirtualizedBody,\n  TableRow,\n  TableCell,\n  Label,\n  Flex,\n  type TableProps\n} from \"@vibe/core\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport {\n  emailColumns,\n  emailTableData,\n  priorityColumnToLabelColor,\n  scrollTableColumns,\n  scrollTableData,\n  sort,\n  statusColumnToLabelColor,\n  stickyColumns,\n  stickyTableData,\n  TableAvatar,\n  virtualizedScrollTableColumns,\n  virtualizedScrollTableData\n} from \"./Table.stories.helpers\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: Table,\n  ignoreControlsPropNamesArray: [\"children\", \"errorState\", \"emptyState\"]\n});\n\nexport default {\n  title: \"Components/Table\",\n  component: Table,\n  subcomponents: {\n    TableHeader,\n    TableHeaderCell,\n    TableBody,\n    TableRow,\n    TableCell,\n    TableVirtualizedBody\n  },\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators,\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { TableAvatar }\n      }\n    }\n  }\n};\n\nexport const Overview = {\n  render: (args: TableProps) => {\n    const columns: TableColumn[] = [\n      {\n        id: \"sentOn\",\n        title: \"Sent on\",\n        width: 150,\n        loadingStateType: \"medium-text\"\n      },\n      {\n        id: \"subject\",\n        title: \"Subject\",\n        loadingStateType: \"long-text\"\n      },\n      {\n        id: \"sentBy\",\n        title: \"Sent by\",\n\n        width: {\n          min: 120,\n          max: 200\n        },\n\n        infoContent: \"This is the sender\",\n        loadingStateType: \"circle\"\n      },\n      {\n        id: \"status\",\n        title: \"Status\",\n        width: 150,\n        infoContent: \"Info content for the status column\",\n        loadingStateType: \"medium-text\"\n      },\n      {\n        id: \"emailsSent\",\n        title: \"Emails sent\",\n        width: 150,\n        loadingStateType: \"medium-text\"\n      }\n    ];\n\n    const data = [\n      {\n        id: \"1\",\n        sentOn: \"2020-01-01\",\n        sentBy: \"John Doe\",\n        subject: \"Lorem ipsum dolor\",\n        status: \"Sent\",\n        emailsSent: 100\n      },\n      {\n        id: \"3\",\n        sentOn: \"2023-03-03\",\n        sentBy: \"Some Person\",\n        subject:\n          \"This is the subject This is the subject This is the subject This is the subject This is the subject This is the subject\",\n        status: \"Sent\",\n        emailsSent: 999\n      },\n      {\n        id: \"2\",\n        sentOn: \"2022-02-02\",\n        sentBy: \"Other Name\",\n        subject: \"This is the subject\",\n        status: \"Sent\",\n        emailsSent: 99\n      }\n    ];\n\n    return (\n      <Table\n        id=\"overview-table\"\n        {...args}\n        errorState={<h1 style={{ textAlign: \"center\" }}>Error State</h1>}\n        emptyState={<h1 style={{ textAlign: \"center\" }}>Empty State</h1>}\n        columns={columns}\n      >\n        <TableHeader>\n          {columns.map((headerCell, index) => (\n            <TableHeaderCell key={index} title={headerCell.title} />\n          ))}\n        </TableHeader>\n        <TableBody>\n          {data.map(rowItem => (\n            <TableRow key={rowItem.id}>\n              <TableCell>{rowItem.sentOn}</TableCell>\n              <TableCell>{rowItem.subject}</TableCell>\n              <TableCell>\n                <TableAvatar text={rowItem.sentBy} />\n              </TableCell>\n              <TableCell>\n                <Label text={rowItem.status} color=\"positive\" />\n              </TableCell>\n              <TableCell>{rowItem.emailsSent}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    );\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  },\n  name: \"Overview\"\n};\n\nexport const Sizes = {\n  render: () => {\n    const columns: TableColumn[] = [\n      {\n        id: \"sentOn\",\n        title: \"Sent on\",\n        loadingStateType: \"medium-text\"\n      },\n      {\n        id: \"subject\",\n        title: \"Subject\",\n\n        loadingStateType: \"long-text\"\n      }\n    ];\n    const data = [\n      {\n        id: 1,\n        sentOn: \"2020-01-01\",\n        subject: \"Lorem ipsum dolor\"\n      },\n      {\n        id: 2,\n        sentOn: \"2022-02-02\",\n        subject: \"This is the subject\"\n      }\n    ];\n    return (\n      <>\n        <Table\n          id=\"sizes-small-table\"\n          style={{ width: \"auto\" }}\n          size=\"small\"\n          errorState={<h1 style={{ textAlign: \"center\" }}>Error State</h1>}\n          emptyState={<h1 style={{ textAlign: \"center\" }}>Empty State</h1>}\n          columns={columns}\n        >\n          <TableHeader>\n            {columns.map((headerCell, index) => (\n              <TableHeaderCell\n                key={index}\n                title={headerCell.title}\n                icon={headerCell.icon}\n                infoContent={headerCell.infoContent}\n              />\n            ))}\n          </TableHeader>\n          <TableBody>\n            {data.map(rowItem => (\n              <TableRow key={rowItem.id}>\n                <TableCell>{rowItem.sentOn}</TableCell>\n                <TableCell>{rowItem.subject}</TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n        <Table\n          style={{ width: \"auto\" }}\n          size=\"medium\"\n          errorState={<h1 style={{ textAlign: \"center\" }}>Error State</h1>}\n          emptyState={<h1 style={{ textAlign: \"center\" }}>Empty State</h1>}\n          columns={columns}\n        >\n          <TableHeader>\n            {columns.map((headerCell, index) => (\n              <TableHeaderCell\n                key={index}\n                title={headerCell.title}\n                icon={headerCell.icon}\n                infoContent={headerCell.infoContent}\n              />\n            ))}\n          </TableHeader>\n          <TableBody>\n            {data.map(rowItem => (\n              <TableRow key={rowItem.id}>\n                <TableCell>{rowItem.sentOn}</TableCell>\n                <TableCell>{rowItem.subject}</TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n        <Table\n          style={{ width: \"auto\" }}\n          size=\"large\"\n          errorState={<h1 style={{ textAlign: \"center\" }}>Error State</h1>}\n          emptyState={<h1 style={{ textAlign: \"center\" }}>Empty State</h1>}\n          columns={columns}\n        >\n          <TableHeader>\n            {columns.map((headerCell, index) => (\n              <TableHeaderCell\n                key={index}\n                title={headerCell.title}\n                icon={headerCell.icon}\n                infoContent={headerCell.infoContent}\n              />\n            ))}\n          </TableHeader>\n          <TableBody>\n            {data.map(rowItem => (\n              <TableRow key={rowItem.id}>\n                <TableCell>{rowItem.sentOn}</TableCell>\n                <TableCell>{rowItem.subject}</TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </>\n    );\n  },\n  decorators: [\n    (Story: typeof React.Component) => (\n      <Flex align=\"start\" justify=\"space-between\" gap=\"medium\" style={{ flex: 1 }}>\n        <Story />\n      </Flex>\n    )\n  ],\n  name: \"Sizes\"\n};\n\nexport const Borders = {\n  render: () => {\n    const columns: TableColumn[] = [\n      {\n        id: \"sentOn\",\n        title: \"Sent on\",\n        width: 150,\n        loadingStateType: \"medium-text\"\n      },\n      {\n        id: \"subject\",\n        title: \"Subject\",\n        loadingStateType: \"long-text\"\n      },\n      {\n        id: \"sentBy\",\n        title: \"Sent by\",\n\n        width: {\n          min: 120,\n          max: 200\n        },\n\n        infoContent: \"This is the sender\",\n        loadingStateType: \"circle\"\n      },\n      {\n        id: \"status\",\n        title: \"Status\",\n        width: 150,\n        infoContent: \"Info content for the status column\",\n        loadingStateType: \"medium-text\"\n      },\n      {\n        id: \"emailsSent\",\n        title: \"Emails sent\",\n        width: 150,\n        loadingStateType: \"medium-text\"\n      }\n    ];\n    const data = [\n      {\n        id: \"1\",\n        sentOn: \"2020-01-01\",\n        sentBy: \"John Doe\",\n        subject: \"Lorem ipsum dolor\",\n        status: \"Sent\",\n        emailsSent: 100\n      },\n      {\n        id: \"3\",\n        sentOn: \"2023-03-03\",\n        sentBy: \"Some Person\",\n        subject:\n          \"This is the subject This is the subject This is the subject This is the subject This is the subject This is the subject\",\n        status: \"Sent\",\n        emailsSent: 999\n      },\n      {\n        id: \"2\",\n        sentOn: \"2022-02-02\",\n        sentBy: \"Other Name\",\n        subject: \"This is the subject\",\n        status: \"Sent\",\n        emailsSent: 99\n      }\n    ];\n    return (\n      <>\n        <Table\n          errorState={<h1 style={{ textAlign: \"center\" }}>Error State</h1>}\n          emptyState={<h1 style={{ textAlign: \"center\" }}>Empty State</h1>}\n          columns={columns}\n        >\n          <TableHeader>\n            {columns.map((headerCell, index) => (\n              <TableHeaderCell key={index} title={headerCell.title} />\n            ))}\n          </TableHeader>\n          <TableBody>\n            {data.map(rowItem => (\n              <TableRow key={rowItem.id}>\n                <TableCell>{rowItem.sentOn}</TableCell>\n                <TableCell>{rowItem.subject}</TableCell>\n                <TableCell>\n                  <TableAvatar text={rowItem.sentBy} />\n                </TableCell>\n                <TableCell>\n                  <Label text={rowItem.status} color=\"positive\" />\n                </TableCell>\n                <TableCell>{rowItem.emailsSent}</TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n        <Table\n          errorState={<h1 style={{ textAlign: \"center\" }}>Error State</h1>}\n          emptyState={<h1 style={{ textAlign: \"center\" }}>Empty State</h1>}\n          columns={columns}\n          withoutBorder\n        >\n          <TableHeader>\n            {columns.map((headerCell, index) => (\n              <TableHeaderCell key={index} title={headerCell.title} />\n            ))}\n          </TableHeader>\n          <TableBody>\n            {data.map(rowItem => (\n              <TableRow key={rowItem.id}>\n                <TableCell>{rowItem.sentOn}</TableCell>\n                <TableCell>{rowItem.subject}</TableCell>\n                <TableCell>\n                  <TableAvatar text={rowItem.sentBy} />\n                </TableCell>\n                <TableCell>\n                  <Label text={rowItem.status} color=\"positive\" />\n                </TableCell>\n                <TableCell>{rowItem.emailsSent}</TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </>\n    );\n  },\n  decorators: [\n    (Story: typeof React.Component) => (\n      <Flex direction=\"column\" gap={40}>\n        <Story />\n      </Flex>\n    )\n  ],\n  name: \"Borders\"\n};\n\nexport const TableHeaderFunctionality = {\n  render: () => {\n    const [tableData, setTableData] = useState(emailTableData);\n    const [sorting, setSorting] = useState<{ [key: string]: \"asc\" | \"desc\" | \"none\" }>({});\n\n    const onSort = (columnId: string, sortState: \"asc\" | \"desc\" | \"none\") => {\n      setSorting({\n        [columnId]: sortState\n      });\n\n      setTableData(sort(columnId as keyof (typeof tableData)[number], sortState, tableData));\n    };\n\n    return (\n      <Table\n        errorState={<h1 style={{ textAlign: \"center\" }}>Error State</h1>}\n        emptyState={<h1 style={{ textAlign: \"center\" }}>Empty State</h1>}\n        columns={emailColumns}\n      >\n        <TableHeader>\n          {emailColumns.map((headerCell, index) => (\n            <TableHeaderCell\n              key={index}\n              title={headerCell.title}\n              icon={headerCell.icon}\n              infoContent={headerCell.infoContent}\n              onSortClicked={sortState => onSort(headerCell.id, sortState)}\n              sortState={sorting[headerCell.id]}\n            />\n          ))}\n        </TableHeader>\n        <TableBody>\n          {tableData.map(rowItem => (\n            <TableRow key={rowItem.id}>\n              <TableCell>{rowItem.sentOn}</TableCell>\n              <TableCell>{rowItem.subject}</TableCell>\n              <TableCell>\n                <TableAvatar text={rowItem.sentBy} />\n              </TableCell>\n              <TableCell>\n                <Label text={rowItem.status} color=\"positive\" />\n              </TableCell>\n              <TableCell>{rowItem.emailsSent}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    );\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { emailTableData, emailColumns }\n      }\n    }\n  },\n  name: \"Table Header Functionality\"\n};\n\nexport const Loading = {\n  render: () => (\n    <Table\n      dataState={{\n        isLoading: true\n      }}\n      errorState={<h1 style={{ textAlign: \"center\" }}>Error State</h1>}\n      emptyState={<h1 style={{ textAlign: \"center\" }}>Empty State</h1>}\n      columns={emailColumns}\n    >\n      <TableHeader>\n        {emailColumns.map((headerCell, index) => (\n          <TableHeaderCell key={index} title={headerCell.title} />\n        ))}\n      </TableHeader>\n      <TableBody>\n        {emailTableData.map(rowItem => (\n          <TableRow key={rowItem.id}>\n            <TableCell>{rowItem.sentOn}</TableCell>\n            <TableCell>{rowItem.subject}</TableCell>\n            <TableCell>\n              <TableAvatar text={rowItem.sentBy} />\n            </TableCell>\n            <TableCell>\n              <Label text={rowItem.status} color=\"positive\" />\n            </TableCell>\n            <TableCell>{rowItem.emailsSent}</TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n    </Table>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { emailTableData, emailColumns }\n      }\n    }\n  },\n  name: \"Loading\"\n};\n\nexport const Scroll = {\n  render: () => (\n    <div\n      style={{\n        height: 220,\n        width: \"100%\"\n      }}\n    >\n      <Table\n        errorState={<h1 style={{ textAlign: \"center\" }}>Error State</h1>}\n        emptyState={<h1 style={{ textAlign: \"center\" }}>Empty State</h1>}\n        columns={scrollTableColumns}\n      >\n        <TableHeader>\n          {scrollTableColumns.map((headerCell, index) => (\n            <TableHeaderCell key={index} title={headerCell.title} />\n          ))}\n        </TableHeader>\n        <TableBody>\n          {scrollTableData.map(rowItem => (\n            <TableRow key={rowItem.id}>\n              <TableCell>{rowItem.sentOn}</TableCell>\n              <TableCell>\n                <Label text={rowItem.priority} color={priorityColumnToLabelColor[rowItem.priority]} />\n              </TableCell>\n              <TableCell>{rowItem.subject}</TableCell>\n              <TableCell>\n                <TableAvatar text={rowItem.sentBy} />\n              </TableCell>\n              <TableCell>\n                <Label text={rowItem.status} color={statusColumnToLabelColor[rowItem.status]} />\n              </TableCell>\n              <TableCell>{rowItem.emailsSent}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </div>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { scrollTableColumns, scrollTableData, priorityColumnToLabelColor, statusColumnToLabelColor }\n      }\n    }\n  },\n  name: \"Scroll\"\n};\n\nexport const VirtualizedScroll = {\n  render: () => {\n    const Row = (data: (typeof virtualizedScrollTableData)[number]) => {\n      return (\n        <TableRow>\n          {virtualizedScrollTableColumns.map(column => {\n            return (\n              <TableCell sticky={column.id === \"id\"} key={column.id}>\n                {data[column.id as keyof typeof data]}\n              </TableCell>\n            );\n          })}\n        </TableRow>\n      );\n    };\n\n    const Header = React.useCallback((columns: TableColumn[]) => {\n      return (\n        <TableHeader>\n          {columns.map((cell, index) => (\n            <TableHeaderCell sticky={index === 0} key={index} {...cell} />\n          ))}\n        </TableHeader>\n      );\n    }, []);\n\n    return (\n      <Table\n        errorState={<h1 style={{ textAlign: \"center\" }}>Error State</h1>}\n        emptyState={<h1 style={{ textAlign: \"center\" }}>Empty State</h1>}\n        columns={virtualizedScrollTableColumns}\n        style={{\n          height: 250\n        }}\n      >\n        <TableVirtualizedBody\n          rowRenderer={Row}\n          items={virtualizedScrollTableData}\n          columns={virtualizedScrollTableColumns}\n          headerRenderer={Header}\n        />\n      </Table>\n    );\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { virtualizedScrollTableColumns, virtualizedScrollTableData }\n      }\n    }\n  },\n  name: \"Virtualized Scroll\"\n};\n\nexport const StickyColumn = {\n  render: () => {\n    return (\n      <Table\n        errorState={<h1 style={{ textAlign: \"center\" }}>Error State</h1>}\n        emptyState={<h1 style={{ textAlign: \"center\" }}>Empty State</h1>}\n        columns={stickyColumns}\n      >\n        <TableHeader>\n          {stickyColumns.map((headerCell, index) => (\n            <TableHeaderCell sticky={index === 0} key={index} title={headerCell.title} />\n          ))}\n        </TableHeader>\n        <TableBody>\n          {stickyTableData.map(rowItem => (\n            <TableRow key={rowItem.id}>\n              <TableCell sticky>{rowItem.projectName}</TableCell>\n              <TableCell>\n                <Label text={rowItem.status} color={statusColumnToLabelColor[rowItem.status]} />\n              </TableCell>\n              <TableCell>{rowItem.description}</TableCell>\n              <TableCell>{rowItem.createdOn}</TableCell>\n              <TableCell>{rowItem.emailsSent}</TableCell>\n              <TableCell>{rowItem.owner}</TableCell>\n              <TableCell>{rowItem.priority}</TableCell>\n              <TableCell>{rowItem.category}</TableCell>\n              <TableCell>{rowItem.dueDate}</TableCell>\n              <TableCell>{rowItem.comments}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    );\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { stickyColumns, stickyTableData, statusColumnToLabelColor }\n      }\n    }\n  },\n  name: \"Sticky column\"\n};\n\nexport const HighlightedRow = {\n  render: () => {\n    const shouldRowBeHighlighted = (rowItem: (typeof emailTableData)[number]) => {\n      return rowItem.id === \"2\";\n    };\n\n    return (\n      <Table\n        errorState={<h1 style={{ textAlign: \"center\" }}>Error State</h1>}\n        emptyState={<h1 style={{ textAlign: \"center\" }}>Empty State</h1>}\n        columns={emailColumns}\n      >\n        <TableHeader>\n          {emailColumns.map((headerCell, index) => (\n            <TableHeaderCell key={index} title={headerCell.title} />\n          ))}\n        </TableHeader>\n        <TableBody>\n          {emailTableData.map(rowItem => (\n            <TableRow key={rowItem.id} highlighted={shouldRowBeHighlighted(rowItem)}>\n              <TableCell>{rowItem.sentOn}</TableCell>\n              <TableCell>{rowItem.subject}</TableCell>\n              <TableCell>\n                <TableAvatar text={rowItem.sentBy} />\n              </TableCell>\n              <TableCell>\n                <Label text={rowItem.status} color=\"positive\" />\n              </TableCell>\n              <TableCell>{rowItem.emailsSent}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    );\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { emailColumns, emailTableData }\n      }\n    }\n  },\n  name: \"Highlighted row\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Tabs/Tabs.mdx",
    "content": "import { Tab, TabList, DialogContentContainer } from \"@vibe/core\";\nimport { Meta } from \"@storybook/blocks\";\nimport { Calendar, Chart, Gantt, NavigationChevronDown, NewTab, Table } from \"@vibe/icons\";\nimport { UsageGuidelines } from \"vibe-storybook-components\";\nimport * as TabsStories from \"./Tabs.stories\";\nimport { TipButtonGroup } from \"./Tabs.stories.helpers\";\n\n<Meta of={TabsStories} />\n\n# Tabs\n\nTabs allow users to navigate between related views of content while remaining in the context of the page.\n\n<Canvas of={TabsStories.Overview} />\n\n### Import\n\n```js\nimport { Tabs, TabPanel, TabPanels, TabList, Tab, TabsContext } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.\",\n    \"Align navigation tabs and content tabs left (in left-to-right languages) and never center within a page or content area.\",\n    \"The first tab is selected by default. The default tab is most important use case of the page.\",\n    \"Stick to only one row of tabs.\"\n  ]}\n/>\n\n<TipButtonGroup />\n\n## Accessibility\n\n<UsageGuidelines\n  guidelines={[\n    <>\n      Provide an <code>id</code> for the <code>TabList</code> and individual <code>Tab</code> components to enable\n      proper accessibility associations and unique identification.\n    </>,\n    <>\n      Ensure each <code>Tab</code> has clear, descriptive text content or appropriate icon with accessible name to\n      indicate what content will be displayed when selected.\n    </>,\n    <>\n      Use the <code>tabPanelIds</code> prop in <code>TabList</code> to establish proper relationships between tabs and\n      their corresponding tab panels. Pass an array of <code>TabPanel</code> IDs in the same order as the tabs.\n    </>,\n    <>\n      Provide unique <code>id</code> props for each <code>TabPanel</code> to enable the <code>aria-controls</code>\n      relationships established by the tabs.\n    </>\n  ]}\n/>\n\n## Variants\n\n### Default - compact tabs\n\n<Canvas of={TabsStories.Default} />\n\n### Stretched\n\nThe width of the list is responsive to the screen's width.\n\n<Canvas of={TabsStories.Stretched} />\n\n### Stretched Underline\n\n<Canvas of={TabsStories.StretchedUnderline} />\n\n### Motion\n\nTabs animation direction\n\n<Canvas of={TabsStories.Motion} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: (\n          <DialogContentContainer>\n            <TabList>\n              <Tab icon={Table}>Main Table</Tab>\n              <Tab icon={Chart}>Chart</Tab>\n              <Tab icon={Calendar}>Calendar</Tab>\n            </TabList>\n          </DialogContentContainer>\n        ),\n        description: \"Use either all text labels, all icon labels, or both, across all labels.\"\n      },\n      negative: {\n        component: (\n          <DialogContentContainer>\n            <TabList>\n              <Tab>Main Table</Tab>\n              <Tab icon={Gantt}> </Tab>\n            </TabList>\n          </DialogContentContainer>\n        ),\n        description: \"Don’t mix tabs that contain only text, with tabs that contain only icons. \"\n      }\n    },\n    {\n      positive: {\n        component: (\n          <DialogContentContainer>\n            <TabList>\n              <Tab icon={NewTab}>Main Table</Tab>\n              <Tab icon={Table}>Table</Tab>\n              <Tab icon={NavigationChevronDown} iconSide=\"right\">\n                More\n              </Tab>\n            </TabList>\n          </DialogContentContainer>\n        ),\n        description: \"When there are too many tabs to fit horizontally across the viewport, use a “More” dropdown.\"\n      },\n      negative: {\n        component: (\n          <DialogContentContainer>\n            <TabList>\n              <Tab>Main...</Tab>\n              <Tab>Table</Tab>\n              <Tab>Time...</Tab>\n              <Tab>Fir...</Tab>\n            </TabList>\n          </DialogContentContainer>\n        ),\n        description: \"Do not cut the tabs name just to make them fit horizontally.\"\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### Board views tabs\n\nThe tabs are presenting the same content, in a different view.\n\n<Canvas of={TabsStories.BoardViewsTabs} />\n\n### Admin section tabs\n\nIn the admin section tabs used to navigate between the different preferences\n\n<Canvas of={TabsStories.AdminSectionTabs} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Breadcrumbs\", \"ButtonGroup\", \"Steps\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Tabs/Tabs.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const TipButtonGroup = () => (\n  <Tip>\n    Use tabs to navigate between different contents, if switching between states within the same content use{\" \"}\n    <StorybookLink page=\"Components/ButtonGroup\" size=\"small\">\n      Button group\n    </StorybookLink>{\" \"}\n    instead\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/Tabs/Tabs.stories.tsx",
    "content": "import React from \"react\";\nimport { Tab, TabList, TabPanel, TabPanels, TabsContext, TextField, Box, Flex, type TabProps } from \"@vibe/core\";\nimport { Calendar, Chart, Table } from \"@vibe/icons\";\n\nexport default {\n  title: \"Components/Tabs\",\n  component: Tab,\n  subcomponents: {\n    TabPanel,\n    TabPanels,\n    TabList,\n    TabsContext\n  }\n};\n\nexport const Overview = {\n  render: (args: TabProps) => (\n    <TabsContext id=\"overview-tabs\" {...args}>\n      <TabList id=\"overview-tab-list\">\n        <Tab id=\"overview-tab-first\">First</Tab>\n        <Tab id=\"overview-tab-second\">Second</Tab>\n        <Tab id=\"overview-tab-third\">Third</Tab>\n      </TabList>\n      <TabPanels id=\"overview-tab-panels\">\n        <TabPanel id=\"overview-panel-first\">\n          <Box backgroundColor=\"greyBackgroundColor\" padding=\"medium\" style={{ width: \"480px\", height: \"111px\" }}>\n            First slide\n          </Box>\n        </TabPanel>\n        <TabPanel id=\"overview-panel-second\">\n          <Box backgroundColor=\"greyBackgroundColor\" padding=\"medium\" style={{ width: \"480px\", height: \"111px\" }}>\n            Second slide\n          </Box>\n        </TabPanel>\n        <TabPanel id=\"overview-panel-third\">\n          <Box backgroundColor=\"greyBackgroundColor\" padding=\"medium\" style={{ width: \"480px\", height: \"111px\" }}>\n            Third slide\n          </Box>\n        </TabPanel>\n      </TabPanels>\n    </TabsContext>\n  ),\n  name: \"Overview\",\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const Default = {\n  render: () => (\n    <TabsContext id=\"default-tabs\">\n      <TabList id=\"default-tab-list\">\n        <Tab id=\"default-tab-first\">First</Tab>\n        <Tab id=\"default-tab-second\">Second</Tab>\n        <Tab id=\"default-tab-third\">Third</Tab>\n        <Tab id=\"default-tab-disabled\" disabled>\n          Disabled\n        </Tab>\n      </TabList>\n      <TabPanels id=\"default-tab-panels\">\n        <TabPanel id=\"default-panel-first\">\n          <Box backgroundColor=\"greyBackgroundColor\" padding=\"medium\" style={{ width: \"480px\", height: \"111px\" }}>\n            First slide\n          </Box>\n        </TabPanel>\n        <TabPanel id=\"default-panel-second\">\n          <Box backgroundColor=\"greyBackgroundColor\" padding=\"medium\" style={{ width: \"480px\", height: \"111px\" }}>\n            Second slide\n          </Box>\n        </TabPanel>\n        <TabPanel id=\"default-panel-third\">\n          <Box backgroundColor=\"greyBackgroundColor\" padding=\"medium\" style={{ width: \"480px\", height: \"111px\" }}>\n            Third slide\n          </Box>\n        </TabPanel>\n        <TabPanel id=\"default-panel-fourth\">\n          <Box backgroundColor=\"greyBackgroundColor\" padding=\"medium\" style={{ width: \"480px\", height: \"111px\" }}>\n            Fourth slide\n          </Box>\n        </TabPanel>\n      </TabPanels>\n    </TabsContext>\n  )\n};\n\nexport const Stretched = {\n  render: () => (\n    <div\n      style={{\n        width: \"100%\"\n      }}\n    >\n      <TabList tabType=\"stretched\">\n        <Tab>First</Tab>\n        <Tab>Second</Tab>\n        <Tab>Third</Tab>\n        <Tab disabled>Disabled</Tab>\n      </TabList>\n    </div>\n  )\n};\n\nexport const StretchedUnderline = {\n  render: () => (\n    <div style={{ width: \"100%\" }}>\n      <TabList stretchedUnderline>\n        <Tab>First</Tab>\n        <Tab>Second</Tab>\n        <Tab>Third</Tab>\n        <Tab disabled>Disabled</Tab>\n      </TabList>\n    </div>\n  )\n};\n\nexport const Motion = {\n  render: () => (\n    <Flex direction=\"column\" gap=\"medium\">\n      <TabsContext>\n        <TabList>\n          <Tab>First</Tab>\n          <Tab>Second</Tab>\n          <Tab>Third</Tab>\n          <Tab disabled>Disabled</Tab>\n        </TabList>\n        <TabPanels animationDirection=\"ltr\">\n          <TabPanel>\n            <Box backgroundColor=\"greyBackgroundColor\" padding=\"medium\" style={{ width: \"480px\", height: \"111px\" }}>\n              First slide\n            </Box>\n          </TabPanel>\n          <TabPanel>\n            <Box backgroundColor=\"greyBackgroundColor\" padding=\"medium\" style={{ width: \"480px\", height: \"111px\" }}>\n              Second slide\n            </Box>\n          </TabPanel>\n          <TabPanel>\n            <Box backgroundColor=\"greyBackgroundColor\" padding=\"medium\" style={{ width: \"480px\", height: \"111px\" }}>\n              Third slide\n            </Box>\n          </TabPanel>\n          <TabPanel>\n            <Box backgroundColor=\"greyBackgroundColor\" padding=\"medium\" style={{ width: \"480px\", height: \"111px\" }}>\n              Fourth slide\n            </Box>\n          </TabPanel>\n        </TabPanels>\n      </TabsContext>\n      <TabsContext>\n        <TabList>\n          <Tab>First</Tab>\n          <Tab>Second</Tab>\n          <Tab>Third</Tab>\n          <Tab disabled>Disabled</Tab>\n        </TabList>\n        <TabPanels animationDirection=\"rtl\">\n          <TabPanel>\n            <Box backgroundColor=\"greyBackgroundColor\" padding=\"medium\" style={{ width: \"480px\", height: \"111px\" }}>\n              First slide\n            </Box>\n          </TabPanel>\n          <TabPanel>\n            <Box backgroundColor=\"greyBackgroundColor\" padding=\"medium\" style={{ width: \"480px\", height: \"111px\" }}>\n              Second slide\n            </Box>\n          </TabPanel>\n          <TabPanel>\n            <Box backgroundColor=\"greyBackgroundColor\" padding=\"medium\" style={{ width: \"480px\", height: \"111px\" }}>\n              Third slide\n            </Box>\n          </TabPanel>\n          <TabPanel>\n            <Box backgroundColor=\"greyBackgroundColor\" padding=\"medium\" style={{ width: \"480px\", height: \"111px\" }}>\n              Fourth slide\n            </Box>\n          </TabPanel>\n        </TabPanels>\n      </TabsContext>\n    </Flex>\n  )\n};\n\nexport const BoardViewsTabs = {\n  render: () => (\n    <TabList>\n      <Tab icon={Table}>Main Table</Tab>\n      <Tab icon={Chart}>Chart</Tab>\n      <Tab icon={Calendar}>Calendar</Tab>\n    </TabList>\n  ),\n\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Table, Chart, Calendar }\n      }\n    }\n  }\n};\n\nexport const AdminSectionTabs = {\n  render: () => (\n    <TabsContext>\n      <TabList>\n        <Tab>Profile</Tab>\n        <Tab>Account</Tab>\n      </TabList>\n      <TabPanels>\n        <TabPanel>\n          <h2>Login Details</h2>\n          <TextField title=\"Profile Name\" size=\"medium\" placeholder=\"Profile Name\" />\n        </TabPanel>\n        <TabPanel>\n          <h2>Account Details</h2>\n          <TextField title=\"Account Name\" size=\"medium\" placeholder=\"Account Name\" />\n        </TabPanel>\n      </TabPanels>\n    </TabsContext>\n  )\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Text/Text.interactions.ts",
    "content": "import { type Screen } from \"@testing-library/react\";\nimport { interactionSuite } from \"@vibe/core/interactionsTests\";\nimport { testHoverTooltipTrigger } from \"../Tooltip/Tooltip.interactions\";\n\n// Test constants\nexport const ONE_LINE_ELLIPSIS_TEST_ID = \"ellipsis-text-example\";\nexport const OVERFLOW_TEXT_CONTAINER_ID = \"overflow-text-examples-container\";\n\nasync function isTooltipAppearOnHover(canvas: Screen) {\n  const getText = () => canvas.findByTestId(ONE_LINE_ELLIPSIS_TEST_ID);\n\n  await testHoverTooltipTrigger(canvas, getText);\n}\n\nexport const textOverflowSuite: ReturnType<typeof interactionSuite> = interactionSuite({\n  tests: [isTooltipAppearOnHover]\n});\n"
  },
  {
    "path": "packages/docs/src/pages/components/Text/Text.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { Tip } from \"vibe-storybook-components\";\nimport { Text, Flex, Button, Box, Icon, Link } from \"@vibe/core\";\nimport { TipHeading, TipLink } from \"./Text.stories.helpers\";\nimport * as TextStories from \"./Text.stories\";\nimport { DialogContentContainer } from \"@vibe/core\";\n\n<Meta of={TextStories} />\n\n# Text\n\nThe text component serves as a wrapper for applying typography styles to the text it contains.\n\n<Canvas of={TextStories.Overview} />\n\n### Import\n\n```js\nimport { Text } from \"@vibe/core\";\n```\n\n<TipHeading />\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines guidelines={[\"Use it to display text formed from a single sentence, or multiple sentences.\"]} />\n<UsageGuidelines\n  guidelines={[\n    \"Use Text3 for short caption text, label or as explanation text in menus. In any other case, use Text1 or Text 2.\"\n  ]}\n/>\n\n## Variants\n\n### Sizes and weights\n\nText component comes in three sizes: text1 (16px), text2 (14px), text3 (12px) , and in three weights: bold (700), medium (600) and normal (400)\n\n<Canvas of={TextStories.SizesAndWeights} />\n\n### Colors\n\nText component comes in four colors: primary, secondary, on-primary and on-inverted\n\n<Canvas of={TextStories.Colors} />\n\n### Overflow\n\nOur Text component supports overflow state.\nWhen the text is longer than its container and the ellipsis flag is on, the end of the text will be truncated and will display \"...\"\n\nWe support two kinds of ellipsis: single-line ellipsis with a tooltip displayed in hover or ellipsis after multiple lines. You can see examples for both use cases below.\n\n<Canvas of={TextStories.Overflow} />\n\n<Tip>Ellipsis prop is true by default. If you wish to turn off ellipsis you can change the prop to false.</Tip>\n\n### Paragraph\n\nTo use the Text component for a paragraph, utilize the element prop with value of `\"p\"`.\nThis changes the text wrapper element to `p`, enabling the creation of paragraph-style text without ellipsis by default.\nThe paragraph will receive default top and bottom margins based on browser settings for `p` elements.\nCustomize ellipsis behavior using the \"ellipsis\" prop or override default margins with a custom class name.\n\n<Canvas of={TextStories.Paragraph} />\n\n### Links\n\nA Text component with a link skin can be used to create a link within running text that redirects to an external webpage, as demonstrated in the following example.\n\n<Canvas of={TextStories.LinksInsideRunningText} />\n\n<TipLink />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: (\n          <Text type=\"text1\" element=\"span\">\n            The quick brown fox jumps over the{\" \"}\n            <Text type=\"text1\" weight=\"bold\" element=\"span\">\n              lazy dog\n            </Text>\n          </Text>\n        ),\n        description: \"You can combine two font weights in one sentence to create an emphasis.\"\n      },\n      negative: {\n        component: (\n          <Text type=\"text2\" element=\"span\">\n            The quick brown fox jumps over the{\" \"}\n            <Text type=\"text1\" element=\"span\">\n              lazy dog\n            </Text>\n          </Text>\n        ),\n        description: \"Don't use more then one font size in a sentence.\"\n      }\n    },\n    {\n      positive: {\n        component: (\n          <Flex style={{ width: \"70%\" }} direction=\"column\" justify=\"center\" align=\"center\" gap=\"small\">\n            <Text maxLines={3}>\n              monday CRM lets you control your entire sales funnel and close more deals, faster. Automate manual work\n              and streamline sales activities from start to finish. Explore monday sales CRM templates\n            </Text>\n            <Button kind=\"tertiary\">Read more</Button>\n          </Flex>\n        ),\n        description: \"If ellipses are used in a paragraph, always use a CTA to reveal more information.\"\n      },\n      negative: {\n        component: (\n          <Text maxLines={3} style={{ width: \"70%\" }}>\n            monday CRM lets you control your entire sales funnel and close more deals, faster. Automate manual work and\n            streamline sales activities from start to finish. Explore monday sales CRM templates\n          </Text>\n        ),\n        description: \"Don't use ellipsis without providing a way for the user to read the full text.\"\n      }\n    },\n    {\n      positive: {\n        component: (\n          <DialogContentContainer size=\"medium\" style={{ width: \"60%\" }}>\n            <Flex gap=\"small\" align=\"start\">\n              <Box style={{ flexShrink: 0 }}>\n                <Icon icon={Link} />\n              </Box>\n              <Flex direction=\"column\" gap=\"small\" align=\"start\" justify=\"start\">\n                <Text color=\"secondary\" maxLines={3} type=\"text3\">\n                  Section title in text3\n                </Text>\n                <Text maxLines={3} type=\"text1\">\n                  Short info explanation about the feature will come here.\n                </Text>\n              </Flex>\n            </Flex>\n          </DialogContentContainer>\n        ),\n        description: \"Use text3 for section titles, short captions, and labels.\"\n      },\n      negative: {\n        component: (\n          <Text maxLines={5} type=\"text3\" style={{ width: \"70%\" }}>\n            monday CRM lets you control your entire sales funnel and close more deals, faster. Automate manual work and\n            streamline sales activities from start to finish. Explore monday sales CRM templates\n          </Text>\n        ),\n        description: \"Don't use text3 as body text.\"\n      }\n    },\n    {\n      positive: {\n        component: (\n          <DialogContentContainer size=\"medium\" style={{ width: \"60%\" }}>\n            <Flex gap=\"small\" align=\"start\">\n              <Box style={{ flexShrink: 0 }}>\n                <Icon icon={Link} />\n              </Box>\n              <Flex direction=\"column\" gap=\"small\" align=\"start\" justify=\"start\">\n                <Text color=\"secondary\" maxLines={3} type=\"text3\">\n                  Section title in text3\n                </Text>\n                <Text maxLines={3} type=\"text1\">\n                  Short info explanation about the feature will come here.\n                </Text>\n              </Flex>\n            </Flex>\n          </DialogContentContainer>\n        ),\n        description: \"Use only normal and medium weights for text3.\"\n      },\n      negative: {\n        component: (\n          <Text maxLines={5} weight=\"bold\" type=\"text3\" style={{ width: \"70%\" }}>\n            monday CRM lets you control your entire sales funnel and close more deals, faster. Automate manual work and\n            streamline sales activities from start to finish. Explore monday sales CRM templates\n          </Text>\n        ),\n        description: \"Don't use bold weight for text3, to ensure optimal readability.\"\n      }\n    }\n  ]}\n/>\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Heading\", \"EditableHeading\", \"Link\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Text/Text.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const TipHeading = () => (\n  <Tip>\n    Check out our{\" \"}\n    <StorybookLink page=\"Text/Heading\" size=\"small\">\n      Heading\n    </StorybookLink>{\" \"}\n    component for text headlines.\n  </Tip>\n);\n\nexport const TipLink = () => (\n  <Tip>\n    If you need to place a link outside of the textual flow, please use our{\" \"}\n    <StorybookLink page=\"Components/Link\" size=\"small\">\n      Link\n    </StorybookLink>{\" \"}\n    component.\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/Text/Text.stories.tsx",
    "content": "import React from \"react\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { Text, Link, Heading, Box, Flex } from \"@vibe/core\";\nimport { createComponentTemplate, StorybookLink } from \"vibe-storybook-components\";\nimport { ONE_LINE_ELLIPSIS_TEST_ID, OVERFLOW_TEXT_CONTAINER_ID, textOverflowSuite } from \"./Text.interactions\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: Text\n});\n\nexport default {\n  title: \"Text/Text\",\n  component: Text,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n};\n\nconst textTemplate = createComponentTemplate(Text);\n\nexport const Overview = {\n  render: textTemplate.bind({}),\n  name: \"Overview\",\n\n  args: {\n    children: \"Hi, I'm a text!\"\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const SizesAndWeights = {\n  render: () => (\n    <Flex gap=\"large\" direction=\"column\" justify=\"start\" align=\"start\">\n      <Flex gap=\"small\" direction=\"column\" justify=\"start\" align=\"start\">\n        <Text type=\"text1\" weight=\"bold\">\n          This is text1 bold\n        </Text>\n        <Text type=\"text1\" weight=\"medium\">\n          This is text1 medium\n        </Text>\n        <Text type=\"text1\" weight=\"normal\">\n          This is text1 normal\n        </Text>\n      </Flex>\n\n      <Flex gap=\"small\" direction=\"column\" justify=\"start\" align=\"start\">\n        <Text type=\"text2\" weight=\"bold\">\n          This is text2 bold\n        </Text>\n        <Text type=\"text2\" weight=\"medium\">\n          This is text2 medium\n        </Text>\n        <Text type=\"text2\" weight=\"normal\">\n          This is text2 normal\n        </Text>\n      </Flex>\n      <Flex gap=\"small\" direction=\"column\" justify=\"start\" align=\"start\">\n        <Text type=\"text3\" weight=\"medium\">\n          This is text3 medium\n        </Text>\n        <Text type=\"text3\" weight=\"normal\">\n          This is text3 normal\n        </Text>\n      </Flex>\n    </Flex>\n  )\n};\n\nexport const Colors = {\n  render: () => (\n    <Flex direction=\"column\" align=\"start\" gap=\"small\">\n      <Text color=\"primary\">Primary text</Text>\n      <Text color=\"secondary\">Secondary text</Text>\n      <Box style={{ backgroundColor: \"var(--primary-color)\", width: \"150px\" }} padding=\"small\">\n        <Text align=\"center\" color=\"onPrimary\">\n          On primary text\n        </Text>\n      </Box>\n      <Box style={{ width: \"150px\" }} backgroundColor=\"invertedColorBackground\" padding=\"small\">\n        <Text align=\"center\" color=\"onInverted\">\n          On inverted text\n        </Text>\n      </Box>\n      <Box style={{ width: \"150px\", backgroundColor: \"black\" }} padding=\"small\">\n        <Text align=\"center\" color=\"fixedLight\">\n          Fixed light\n        </Text>\n      </Box>\n      <Box style={{ width: \"150px\", backgroundColor: \"whitesmoke\" }} padding=\"small\">\n        <Text align=\"center\" color=\"fixedDark\">\n          Fixed dark\n        </Text>\n      </Box>\n    </Flex>\n  )\n};\n\nexport const Overflow = {\n  render: () => (\n    <Flex\n      direction=\"column\"\n      id={OVERFLOW_TEXT_CONTAINER_ID}\n      justify=\"start\"\n      align=\"initial\"\n      gap=\"small\"\n      style={{ width: \"480px\" }}\n    >\n      <Heading type=\"h3\">Text with 1 line</Heading>\n      <Text\n        data-testid={ONE_LINE_ELLIPSIS_TEST_ID}\n        /**for testing purposes**/\n        tooltipProps={{\n          containerSelector: `#${OVERFLOW_TEXT_CONTAINER_ID}`\n        }}\n      >\n        This is an example of text with overflow and a Tooltip to help or provide information about specific components\n        when a user hovers over them.\n      </Text>\n      <Heading type=\"h3\">Text with 2 lines</Heading>\n      <Text maxLines={2}>\n        This is an example of text with ellipsis which displayed after two full lines of content this is an example of\n        text with ellipsis which displayed after two full lines of content\n      </Text>\n      <Heading type=\"h3\">Text with array of elements</Heading>\n      <Text maxLines={1}>\n        {[\n          \"This is an example of array of texts and \",\n          <Link text=\"Other elements\" href=\"https://www.monday.com\" inheritFontSize inlineText />,\n          \" that are overflowing and create a tooltip with the correct information\"\n        ]}\n      </Text>\n    </Flex>\n  ),\n\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { OVERFLOW_TEXT_CONTAINER_ID, ONE_LINE_ELLIPSIS_TEST_ID }\n      }\n    }\n  },\n  play: textOverflowSuite\n};\n\nexport const Paragraph = {\n  render: () => (\n    <Flex direction=\"column\">\n      <Text element=\"p\">\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est\n        laborum.\n      </Text>\n      <Text element=\"p\" ellipsis maxLines={3}>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est\n        laborum.\n      </Text>\n    </Flex>\n  )\n};\n\nexport const LinksInsideRunningText = {\n  render: () => (\n    <Flex direction=\"column\" align=\"start\" gap=\"small\">\n      <Text align=\"center\">\n        This is the story of a{\" \"}\n        <StorybookLink page=\"Foundations/Typography\" size=\"small\">\n          link\n        </StorybookLink>{\" \"}\n        inside running text.\n      </Text>\n      <Box style={{ backgroundColor: \"var(--primary-color)\", width: \"420px\" }} padding=\"small\">\n        <Text align=\"center\" color=\"onPrimary\">\n          This is the story of a{\" \"}\n          <StorybookLink page=\"Foundations/Typography\" size=\"small\">\n            link\n          </StorybookLink>{\" \"}\n          inside running text on a primary color\n        </Text>\n      </Box>\n      <Box style={{ width: \"420px\" }} backgroundColor=\"invertedColorBackground\" padding=\"small\">\n        <Text align=\"center\" color=\"onInverted\">\n          This is the story of a{\" \"}\n          <StorybookLink page=\"Foundations/Typography\" size=\"small\">\n            link\n          </StorybookLink>{\" \"}\n          inside running text on an inverted color\n        </Text>\n      </Box>\n      <Box style={{ backgroundColor: \"black\", width: \"420px\" }} padding=\"small\">\n        <Text ellipsis={false} style={{}} align=\"center\" color=\"fixedLight\">\n          This is the story of a{\" \"}\n          <StorybookLink page=\"Foundations/Typography\" size=\"small\">\n            link\n          </StorybookLink>{\" \"}\n          inside running text with fixed light color\n        </Text>\n      </Box>\n      <Box style={{ backgroundColor: \"whitesmoke\", width: \"420px\" }} padding=\"small\">\n        <Text ellipsis={false} align=\"center\" color=\"fixedDark\">\n          This is the story of a{\" \"}\n          <StorybookLink page=\"Foundations/Typography\" size=\"small\">\n            link\n          </StorybookLink>{\" \"}\n          inside running text with fixed dark color\n        </Text>\n      </Box>\n    </Flex>\n  ),\n\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { StorybookLink }\n      }\n    }\n  },\n  name: \"Links inside running text\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/TextArea/TextArea.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { TextArea } from \"@vibe/core\";\nimport * as TextAreaStories from \"./TextArea.stories\";\nimport doImage from \"./assets/do.svg\";\nimport dontImage from \"./assets/dont.svg\";\n\n<Meta of={TextAreaStories} />\n\n# TextArea\n\nA field that allows users to write multiple lines of text. Text area includes a label and a field that users can type into. It can also come with helper text.\n\n<Canvas of={TextAreaStories.Overview} />\n\n### Import\n\n```js\nimport { TextArea } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Use text area to allow users to write multiple lines of text, usually for comments or descriptions.\",\n    \"Placeholders should only be used when necessary.\"\n  ]}\n/>\n\n## Accessibility\n\n<UsageGuidelines\n  guidelines={[\n    <>\n      Using an <code>id</code> is highly recommended for all instances to ensure the best accessibility.\n    </>,\n    <>\n      Always provide a visible <code>label</code> to ensure the textarea's purpose is clear to all users.\n    </>,\n    <>\n      When using <code>label</code> or <code>helpText</code>, you must also provide an <code>id</code>. This is crucial,\n      as it allows screen readers to correctly associate the textarea with its label and description.\n    </>,\n    <>\n      For required fields, use the <code>required</code> prop to ensure proper screen reader announcements and native\n      browser validation.\n    </>,\n    <>\n      Provide descriptive error messages using the <code>error</code> prop with <code>helpText</code> to help users\n      understand and correct validation issues.\n    </>,\n    <>\n      The component automatically sets <code>aria-invalid</code> when validation fails, including when character count\n      exceeds <code>maxLength</code>.\n    </>,\n    <>\n      Character counting with <code>showCharCount</code> automatically provides accessibility labels for screen readers.\n    </>,\n    <>\n      Use the <code>aria-label</code> prop when a visible label is not desired but accessibility support is still\n      needed.\n    </>,\n    <>\n      The component automatically handles <code>aria-describedby</code> attributes for help text and character limit\n      information when applicable.\n    </>\n  ]}\n/>\n\n## Variants\n\n### Sizes\n\nThere are two sizes available: small and large.\n\n<Canvas of={TextAreaStories.Sizes} />\n\n### States\n\nText areas have all the same states as text fields.\n\n<Canvas of={TextAreaStories.States} />\n\n### Validation\n\nIf a required text area is left empty, use validation text to give feedback to users. The validation error state should appear after users try to submit a form.\n\n<Canvas of={TextAreaStories.Validation} />\n\n## Do's and Don'ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: <img src={doImage} />,\n        description: \"Use text area if you want to ask an open question. Make sure the question is short and clear.\"\n      },\n      negative: {\n        component: <img src={dontImage} />,\n        description: \"Don't use a text area if you want short and specific info - use a text field instead. \"\n      }\n    }\n  ]}\n/>\n\n## Related components\n\n<RelatedComponents componentsNames={[\"TextField\", \"Dropdown\", \"Search\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/TextArea/TextArea.stories.tsx",
    "content": "import React from \"react\";\nimport { createComponentTemplate } from \"vibe-storybook-components\";\nimport { TextArea } from \"@vibe/core\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { type Decorator, type Meta, type StoryObj } from \"@storybook/react\";\n\ntype Story = StoryObj<typeof TextArea>;\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: TextArea\n});\n\nexport default {\n  title: \"Components/TextArea\",\n  component: TextArea,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n} satisfies Meta<typeof TextArea>;\n\nconst withFixedWidth: Decorator = Story => (\n  <div style={{ width: 300 }}>\n    <Story />\n  </div>\n);\n\nconst withGrid: Decorator = Story => (\n  <div\n    style={{\n      display: \"grid\",\n      gridTemplateColumns: \"repeat(2, 300px)\",\n      gap: \"16px\",\n      width: \"100%\"\n    }}\n  >\n    <Story />\n  </div>\n);\n\nconst textAreaTemplate = createComponentTemplate(TextArea);\n\nexport const Overview: Story = {\n  render: textAreaTemplate.bind({}),\n  args: {\n    id: \"overview-textarea\",\n    \"aria-label\": \"Overview text area\",\n    label: \"Text area label\",\n    helpText: \"Helper text\"\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  },\n  decorators: [withFixedWidth]\n};\n\nexport const Sizes: Story = {\n  render: () => (\n    <>\n      <TextArea id=\"sizes-large\" aria-label=\"Large text area\" size=\"large\" label=\"Large text area\" />\n      <TextArea id=\"sizes-small\" aria-label=\"Small text area\" size=\"small\" label=\"Small text area\" />\n    </>\n  ),\n  decorators: [withGrid]\n};\n\nexport const States: Story = {\n  render: () => (\n    <>\n      <TextArea id=\"states-success\" aria-label=\"Success text area\" size=\"small\" label=\"Success state\" success />\n      <TextArea id=\"states-error\" aria-label=\"Error text area\" size=\"small\" label=\"Error state\" error />\n      <TextArea id=\"states-disabled\" aria-label=\"Disabled text area\" size=\"small\" label=\"Disabled state\" disabled />\n      <TextArea id=\"states-readonly\" aria-label=\"Read only text area\" size=\"small\" label=\"Read only state\" readOnly />\n    </>\n  ),\n  decorators: [withGrid]\n};\n\nexport const Validation: Story = {\n  render: () => (\n    <TextArea\n      id=\"validation-textarea\"\n      aria-label=\"Text area with validation\"\n      size=\"small\"\n      label=\"Text area label\"\n      error\n      required\n      helpText=\"Validation text\"\n    />\n  ),\n  decorators: [withFixedWidth]\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/TextField/TextField.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { TextField } from \"@vibe/core\";\nimport { ComponentRules, UsageGuidelines } from \"vibe-storybook-components\";\nimport * as TextFieldStories from \"./TextField.stories\";\n\n<Meta of={TextFieldStories} />\n\n# TextField\n\nAn input field includes a label and a text field users can type text into. They typically appear in forms and dialogs.\n\n<Canvas of={TextFieldStories.Overview} />\n\n### Import\n\n```js\nimport { TextField } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Always use placeholder in input field\",\n    \"Icons can be used to message alerts as well. Pair them with error messages to provide redundant alerts.\",\n    \"Character or word counters should be used if there is a character or word limit.\"\n  ]}\n/>\n\n## Accessibility\n\n<UsageGuidelines\n  guidelines={[\n    <>\n      Using an <code>id</code> is highly recommended for all instances to ensure the best accessibility.\n    </>,\n    <>\n      Always provide a visible <code>title</code> or an <code>inputAriaLabel</code> to ensure the input's purpose is\n      clear to all users.\n    </>,\n    <>\n      When using <code>title</code> or validation text, you must also provide an <code>id</code>. This is crucial, as it\n      allows screen readers to correctly associate the input with its label and description.\n    </>,\n    <>\n      For required fields, use the <code>required</code> prop to ensure proper screen reader announcements and native\n      browser validation.\n    </>,\n    <>\n      Provide descriptive error messages using <code>validation</code> prop with status 'error' to help users understand\n      and correct validation issues.\n    </>,\n    <>\n      When using icons, provide meaningful labels through <code>iconLabel</code> and{\" \"}\n      <code>secondaryIconLabel</code> props for screen reader users.\n    </>,\n    <>\n      For search inputs, use <code>type='search'</code> and provide <code>searchResultsContainerId</code> to properly\n      associate with search results.\n    </>,\n    <>\n      Character counting with <code>showCharCount</code> automatically provides accessibility labels for screen readers.\n    </>\n  ]}\n/>\n\n## Variants\n\n### Sizes\n\nThere are three sizes available: Small (32px), Medium (40px) and Large (48px).\n\n<Canvas of={TextFieldStories.Sizes} />\n\n### States\n\n<Canvas of={TextFieldStories.States} />\n\n### Validation\n\nUse validation to give feedback to the user for a case where he has provided an invalid input. The validation error should appear when the user is done typing and getting out of the input’s focus.\n\n<code>The validation object has two status states - error, success</code>\n\n<Canvas of={TextFieldStories.Validation} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: (\n          <div style={{ width: 300 }}>\n            <TextField title=\"Email\" placeholder=\"email@monday.com\" size=\"medium\" />\n          </div>\n        ),\n        description:\n          \"Make sure your text field has a short, descriptive label above it that describes what the user should type into the box below.\"\n      },\n      negative: {\n        component: (\n          <div style={{ width: 300 }}>\n            <TextField title=\"What is your email address?\" placeholder=\"email@monday.com\" size=\"medium\" />\n          </div>\n        ),\n        description:\n          \"Avoid phrasing your labels as questions. Keep in mind that your label shouldn’t contain instructions. Reserve those for the helper text.\"\n      }\n    },\n    {\n      positive: {\n        component: (\n          <div style={{ width: 300 }}>\n            <TextField title=\"Email\" placeholder=\"email@monday.com\" size=\"medium\" />\n          </div>\n        ),\n        description:\n          \"Use the help text description to convey requirements or to show any formatting examples that would help user comprehension.\"\n      },\n      negative: {\n        component: (\n          <div style={{ width: 300 }}>\n            <TextField title=\"Email\" placeholder=\"email@monday.com\" size=\"medium\" />\n            For example: email@monday.com\n          </div>\n        ),\n        description:\n          \"Avoid repeating the field label. If the field label provides sufficient context for completing the action, then you likely don’t need to add help text.\"\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### Text field in a form\n\nUsers can insert text.\n\n<Canvas of={TextFieldStories.TextFieldInAForm} />\n\n### Input field with placeholder text\n\n<Canvas of={TextFieldStories.InputFieldWithPlaceholderText} />\n\n### Required input field\n\n<Canvas of={TextFieldStories.RequiredInputField} />\n\n### Input field with date\n\n<Canvas of={TextFieldStories.InputFieldWithDate} />\n\n### Input field with datetime\n\n<Canvas of={TextFieldStories.InputFieldWithDateAndTime} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Dropdown\", \"Search\", \"Combobox\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/TextField/TextField.stories.tsx",
    "content": "import React from \"react\";\nimport { TextField, type TextFieldProps, Heading, Flex } from \"@vibe/core\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { Check, CloseSmall, Email, Show, Duplicate } from \"@vibe/icons\";\nimport { type Meta, type StoryObj } from \"@storybook/react\";\n\ntype Story = StoryObj<typeof TextField>;\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: TextField,\n  iconPropNamesArray: [\"secondaryIconName\", \"icon\", \"labelIconName\"]\n});\n\nexport default {\n  title: \"Components/TextField\",\n  component: TextField,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n} satisfies Meta<typeof TextField>;\n\nexport const Overview: Story = {\n  render: (args: TextFieldProps) => (\n    <div style={{ width: 300 }}>\n      <TextField {...args} />\n    </div>\n  ),\n  args: {\n    id: \"overview-textfield\",\n    title: \"Name\",\n    icon: Show,\n\n    validation: {\n      text: \"Helper text\"\n    },\n\n    showCharCount: true,\n    placeholder: \"Placeholder text here\"\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const Sizes: Story = {\n  render: () => (\n    <Flex direction=\"column\" gap=\"medium\" style={{ width: 300 }}>\n      <TextField id=\"sizes-small\" inputAriaLabel=\"Small text field\" placeholder=\"Small\" />\n      <TextField id=\"sizes-medium\" inputAriaLabel=\"Medium text field\" placeholder=\"Medium\" size=\"medium\" />\n      <TextField id=\"sizes-large\" inputAriaLabel=\"Large text field\" placeholder=\"Large\" size=\"large\" />\n    </Flex>\n  )\n};\n\nexport const States: Story = {\n  render: () => (\n    <Flex gap=\"large\">\n      <Flex direction=\"column\" gap=\"medium\" style={{ marginTop: \"var(--space-32)\", width: 300 }}>\n        <TextField\n          id=\"states-disabled\"\n          inputAriaLabel=\"Disabled text field\"\n          placeholder=\"Disabled\"\n          size=\"medium\"\n          disabled\n        />\n        <TextField\n          id=\"states-with-icon\"\n          inputAriaLabel=\"Text field with icon\"\n          placeholder=\"With icon\"\n          icon={Email}\n          size=\"medium\"\n        />\n        <TextField\n          id=\"states-clickable-icon\"\n          inputAriaLabel=\"Text field with clickable icon\"\n          placeholder=\"With clickable icon\"\n          iconTooltipContent=\"Copy\"\n          icon={Duplicate}\n          onIconClick={() => {}}\n          size=\"medium\"\n        />\n      </Flex>\n      <Flex direction=\"column\" gap=\"medium\" style={{ width: 300 }}>\n        <TextField id=\"states-with-label\" placeholder=\"With field label\" title=\"Name\" size=\"medium\" />\n        <TextField\n          id=\"states-success\"\n          inputAriaLabel=\"Success text field\"\n          placeholder=\"Success\"\n          validation={{\n            status: \"success\"\n          }}\n          icon={Check}\n          size=\"medium\"\n        />\n        <TextField\n          id=\"states-error\"\n          inputAriaLabel=\"Error text field\"\n          placeholder=\"Error\"\n          validation={{\n            status: \"error\"\n          }}\n          icon={CloseSmall}\n          size=\"medium\"\n        />\n      </Flex>\n    </Flex>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Email, Check, CloseSmall, Duplicate }\n      }\n    }\n  }\n};\n\nexport const Validation: Story = {\n  render: () => (\n    <div style={{ width: 300 }}>\n      <TextField\n        id=\"validation-textfield\"\n        placeholder=\"Validate me\"\n        title=\"Name\"\n        size=\"medium\"\n        validation={{\n          status: \"error\",\n          text: \"Validation text\"\n        }}\n      />\n    </div>\n  )\n};\n\nexport const TextFieldInAForm: Story = {\n  render: () => (\n    <Flex align=\"stretch\" direction=\"column\" gap=\"large\" style={{ width: 300 }}>\n      <Heading type=\"h1\" weight=\"bold\" maxLines={2}>\n        Dark Mode Feedback Form\n      </Heading>\n      <Flex direction=\"column\" gap=\"medium\">\n        <TextField id=\"form-name\" title=\"Your Name\" size=\"medium\" placeholder=\"John Doe\" />\n        <TextField id=\"form-email\" title=\"Email\" size=\"medium\" placeholder=\"email@monday.com\" />\n      </Flex>\n    </Flex>\n  ),\n  name: \"Text field in a form\"\n};\n\nexport const InputFieldWithPlaceholderText: Story = {\n  render: () => (\n    <div style={{ width: 300 }}>\n      <TextField\n        id=\"placeholder-text-field\"\n        title=\"Invite with email\"\n        labelIconName={Email}\n        placeholder=\"Enter one or more email\"\n        size=\"medium\"\n      />\n    </div>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Email }\n      }\n    }\n  },\n  name: \"Input field with placeholder text\"\n};\n\nexport const RequiredInputField: Story = {\n  render: () => (\n    <div style={{ width: 300 }}>\n      <TextField id=\"required-field\" placeholder=\"Your email\" title=\"Email Address\" size=\"medium\" required />\n    </div>\n  ),\n  name: \"Required input field\"\n};\n\nexport const InputFieldWithDate: Story = {\n  render: () => (\n    <div style={{ width: 300 }}>\n      <TextField id=\"date-field\" inputAriaLabel=\"Select a date\" size=\"medium\" type=\"date\" />\n    </div>\n  ),\n  name: \"Input field with date\"\n};\n\nexport const InputFieldWithDateAndTime: Story = {\n  render: () => (\n    <div style={{ width: 300 }}>\n      <TextField id=\"datetime-field\" inputAriaLabel=\"Select date and time\" size=\"medium\" type=\"datetime-local\" />\n    </div>\n  ),\n  name: \"Input field with date and time\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/TextWithHighlight/TextWithHighlight.mdx",
    "content": "import { Canvas, Meta } from \"@storybook/blocks\";\nimport * as TextWithHighlightStories from \"./TextWithHighlight.stories\";\n\n<Meta of={TextWithHighlightStories} />\n\n# TextWithHighlight\n\nComponent for displaying highlighted text\n\n<Canvas of={TextWithHighlightStories.Overview} />\n\n### Import\n\n```js\nimport { TextWithHighlight } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"By using this component, you can display text with highlighted sub strings according to a given term and lines limit.\"\n  ]}\n/>\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Heading\", \"TextField\", \"EditableHeading\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/TextWithHighlight/TextWithHighlight.stories.tsx",
    "content": "import { TextWithHighlight } from \"@vibe/core\";\nimport { createComponentTemplate } from \"vibe-storybook-components\";\n\nexport default {\n  title: \"Text/TextWithHighlight\",\n  component: TextWithHighlight\n};\n\nconst textWithHighlightTemplate = createComponentTemplate(TextWithHighlight);\n\nexport const Overview = {\n  render: textWithHighlightTemplate.bind({}),\n  name: \"Overview\",\n\n  args: {\n    text: \"Hello world, hello world again\",\n    highlightTerm: \"Hello again\"\n  }\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/ThemeProvider/ThemeProvider.interactions.ts",
    "content": "import { type Screen } from \"@testing-library/react\";\nimport { userEvent } from \"@storybook/test\";\nimport { expect } from \"@storybook/jest\";\nimport { interactionSuite } from \"@vibe/core/interactionsTests\";\nimport { type SystemTheme } from \"@vibe/core\";\n\n// TODO: move to @vibe/shared\nconst APP_THEME_SUFFIX = \"-app-theme\";\n\nconst isAppThemeClassName = (className: string) => {\n  return className.endsWith(APP_THEME_SUFFIX);\n};\n\nexport const addAppThemeSuffix = (systemTheme: SystemTheme) => {\n  return `${systemTheme}${APP_THEME_SUFFIX}`;\n};\n\nexport const getBodySystemThemeClassName = () => {\n  const classList = document.body.classList;\n  for (const className of Array.from(classList)) {\n    if (isAppThemeClassName(className)) {\n      return className;\n    }\n  }\n  return null;\n};\n\n// These utilities are imported from the helper file which re-exports them\nconst getComputedVarColor = (element: HTMLElement, varName: string) => {\n  return getComputedStyle(element).getPropertyValue(`--${varName}`).trim();\n};\n\n// TODO: move these utilities to the colorUtils\nconst hexToRgb = (hex: string) => {\n  // Remove # if present\n  hex = hex.replace(/^#/, \"\");\n\n  // Parse hex to RGB\n  const bigint = parseInt(hex, 16);\n  const r = (bigint >> 16) & 255;\n  const g = (bigint >> 8) & 255;\n  const b = bigint & 255;\n\n  return `rgb(${r}, ${g}, ${b})`;\n};\n\nconst getVariableHexColor = (variableName: string) => {\n  return hexToRgb(getComputedVarColor(document.body, variableName));\n};\n\nconst getSystemThemeToggleButton = async (canvas: Screen) => {\n  return await canvas.findByTestId(\"system-theme-toggle-button\");\n};\n\nconst getElementBackgroundColor = async (element: HTMLElement) => {\n  return window.getComputedStyle(element).getPropertyValue(\"background-color\");\n};\n\nconst PRIMARY_COLOR = getVariableHexColor(\"primary-color\");\nconst POSITIVE_COLOR = getVariableHexColor(\"positive-color\");\nconst DARK_APP_THEME_CLASS_NAME = addAppThemeSuffix(\"dark\");\n\nasync function checkSystemTheme(canvas: Screen) {\n  expect(getBodySystemThemeClassName()).toBeNull();\n\n  const systemThemeToggleButton = await getSystemThemeToggleButton(canvas);\n  const colorBeforeToggle = await getElementBackgroundColor(systemThemeToggleButton);\n  expect(colorBeforeToggle).toBe(PRIMARY_COLOR);\n\n  await userEvent.click(systemThemeToggleButton);\n\n  const bodySystemThemeClassName = getBodySystemThemeClassName();\n  expect(bodySystemThemeClassName).toBe(DARK_APP_THEME_CLASS_NAME);\n\n  const systemThemeToggleButtonAfterToggle = await getSystemThemeToggleButton(canvas);\n  const colorAfterToggle = await getElementBackgroundColor(systemThemeToggleButtonAfterToggle);\n  expect(colorAfterToggle).toBe(POSITIVE_COLOR);\n}\n\nexport const themeProviderSystemThemeSuite: ReturnType<typeof interactionSuite> = interactionSuite({\n  tests: [checkSystemTheme]\n});\n"
  },
  {
    "path": "packages/docs/src/pages/components/ThemeProvider/ThemeProvider.mdx",
    "content": "import { Canvas, Meta } from \"@storybook/blocks\";\nimport {\n  DescriptionWithLinkMondaySdkIntegration,\n  ThemeProviderNegativeExampleTemplate,\n  ThemeProviderPositiveExampleTemplate,\n  TipDev,\n  UsageGuidelinesThemeProvider\n} from \"./ThemeProvider.stories.helpers\";\nimport * as ThemeProviderStories from \"./ThemeProvider.stories\";\nimport { Frame } from \"vibe-storybook-components\";\n\n<Meta of={ThemeProviderStories} />\n\n# ThemeProvider\n\nThis component helps to customize the colors of library's components by overriding a specific css variables with a values provided within <code>themeConfig</code> object.\nThere are 2 levels of theming: **system theme** and **product theme**.\nSystem theme is a one of a 3 predefined themes: <code>light</code>(<code>.light-app-theme</code>), <code>dark</code>(<code>.dark-app-theme</code>) and <code>black</code>(<code>.black-app-theme</code>).\nProduct theme is a custom theme that can be provided by a user, there you can specify the values of specific color tokens for each of the system themes.\n\n<Canvas of={ThemeProviderStories.Overview} />\n\n### Import\n\n```js\nimport { ThemeProvider } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelinesThemeProvider />\n\n<TipDev />\n\n## Variants\n\nThere are 3 system themes <code>light</code>, <code>dark</code> and <code>black</code>, and in each you can redefine the values of the following color tokens:\n\n### Colors eligible for theming\n\n<Frame>\n  <Canvas of={ThemeProviderStories.ColorsEligibleForTheming} />\n</Frame>\n\n## Use cases and examples\n\n### Theming scope\n\nOnly components wrapped with ThemeProvider will be affected by the <code>themeConfig</code>.\n\n<Canvas of={ThemeProviderStories.ThemingScope} />\n\n### Folded theming\n\nIf component is wrapped with multiple ThemeProviders, the most nested one will override the values of the outer one, but if the nested ThemeProvider doesn't provide a value for a specific color token, the outer ThemeProvider will be used.\n\n<Canvas of={ThemeProviderStories.FoldedTheming} />\n\n### Product theming\n\nThese are theme-definitions, which are used in monday.com products.\n\n<Canvas of={ThemeProviderStories.ProductTheming} />\n\n### Custom class selector\n\nIf you need to apply some of the tokens overrides only on elements under specific class you can declare theme like that:\n\n<Canvas of={ThemeProviderStories.CustomClassSelector} />\n\n### With systemTheme\n\nIn case there is not <b>system theme</b> defined on <code>body</code> tag (or on any other element upper in DOM hierarchy),\nyou can pass it as a prop to <code>ThemeProvider</code>.\nIt will set the <code>systemTheme</code> on <code>body</code> tag and will apply the corresponding theme.\n\n<Canvas of={ThemeProviderStories.WithSystemTheme} />\n\n### Integration with monday.com SDK in external applications\n\n<DescriptionWithLinkMondaySdkIntegration />\n\n<Canvas of={ThemeProviderStories.MondaySdkIntegration} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: [<ThemeProviderPositiveExampleTemplate />],\n        description: \"Pay attention and override all semantically close tokens, if needed.\"\n      },\n      negative: {\n        component: [<ThemeProviderNegativeExampleTemplate />],\n        description: \"Don’t override only specific tokens to avoid inconsistent appearance\"\n      }\n    }\n  ]}\n/>\n"
  },
  {
    "path": "packages/docs/src/pages/components/ThemeProvider/ThemeProvider.stories.helpers.tsx",
    "content": "import React, { useState } from \"react\";\nimport { ThemeProvider, type ThemeProviderProps, Button, Dropdown, Flex } from \"@vibe/core\";\nimport { productTheme1, productTheme2, productTheme3, productTheme4 } from \"./product-themes\";\nimport { ColorsDescription } from \"../../foundations/colors/colors-description/colors-description\";\nimport { Link, Tip, UsageGuidelines } from \"vibe-storybook-components\";\n\nenum ThemeColor {\n  primaryColor = \"primary-color\",\n  primaryHoverColor = \"primary-hover-color\",\n  primarySelectedColor = \"primary-selected-color\",\n  primarySelectedHoverColor = \"primary-selected-hover-color\",\n  primarySelectedOnSecondaryColor = \"primary-selected-on-secondary-color\",\n  textColorOnPrimary = \"text-color-on-primary\",\n  brandColor = \"brand-color\",\n  brandHoverColor = \"brand-hover-color\",\n  brandSelectedColor = \"brand-selected-color\",\n  brandSelectedHoverColor = \"brand-selected-hover-color\",\n  textColorOnBrand = \"text-color-on-brand\"\n}\n\nexport const ColorsEligibleForThemingTemplate = () => <ColorsDescription colorNames={Object.values(ThemeColor)} />;\n\nexport const ThemeProviderTemplateOverview = (args: JSX.IntrinsicAttributes & ThemeProviderProps) => {\n  return (\n    <>\n      <ThemeProvider {...args}>\n        <Button>Themed</Button>\n      </ThemeProvider>\n    </>\n  );\n};\n\nexport const ThemeProviderThemingScopeTemplate = (_args: JSX.IntrinsicAttributes & ThemeProviderProps) => {\n  return (\n    <>\n      <ThemeProvider\n        themeConfig={{\n          name: \"theming-scope-theme\",\n          colors: {\n            light: {\n              \"primary-color\": \"green\",\n              \"primary-hover-color\": \"darkgreen\"\n            },\n            dark: {\n              \"primary-color\": \"slateblue\",\n              \"primary-hover-color\": \"darkslateblue\"\n            },\n            black: {\n              \"primary-color\": \"salmon\",\n              \"primary-hover-color\": \"darksalmon\"\n            }\n          }\n        }}\n      >\n        <Button>Themed</Button>\n      </ThemeProvider>\n      <Button>Not themed</Button>\n    </>\n  );\n};\n\nexport const ThemeProviderFoldedThemingTemplate = (_args: JSX.IntrinsicAttributes & ThemeProviderProps) => {\n  return (\n    <ThemeProvider\n      themeConfig={{\n        name: \"outer-theme\",\n        colors: {\n          light: {\n            \"primary-color\": \"red\",\n            \"primary-hover-color\": \"darkred\"\n          }\n        }\n      }}\n    >\n      <div>\n        <ThemeProvider\n          themeConfig={{\n            name: \"inner-theme\",\n            colors: {\n              light: {\n                \"primary-color\": \"green\",\n                \"primary-hover-color\": \"darkgreen\"\n              }\n            }\n          }}\n        >\n          <Button>Themed</Button>\n        </ThemeProvider>\n      </div>\n    </ThemeProvider>\n  );\n};\n\nexport const ThemeProviderProductThemingTemplate = (_args: JSX.IntrinsicAttributes & ThemeProviderProps) => {\n  const dropdownOptions = [\n    { value: productTheme1, label: \"Product 1\" },\n    { value: productTheme2, label: \"Product 2\" },\n    { value: productTheme3, label: \"Product 3\" },\n    { value: productTheme4, label: \"Product 4\" }\n  ];\n  const [selectedTheme, setSelectedTheme] = useState(null);\n\n  return (\n    <ThemeProvider themeConfig={selectedTheme?.value}>\n      <Flex gap=\"large\" align=\"start\" wrap style={{ height: \"200px\" }}>\n        <div style={{ width: \"250px\" }}>\n          <Dropdown\n            placeholder={\"No theme selected\"}\n            options={dropdownOptions}\n            value={selectedTheme}\n            onClear={() => setSelectedTheme(null)}\n            onOptionSelect={(option: any) => setSelectedTheme(option)}\n          />\n        </div>\n        <Button>Themed</Button>\n        <div className=\"brand-colors\">\n          <Button color=\"brand\">Themed branded</Button>\n        </div>\n      </Flex>\n    </ThemeProvider>\n  );\n};\n\nexport const ThemeProviderCustomClassTemplate = (_args: JSX.IntrinsicAttributes & ThemeProviderProps) => {\n  return (\n    <ThemeProvider\n      themeConfig={{\n        name: \"theme-with-custom-class-selector\",\n        colors: {\n          light: {\n            \"primary-color\": \"green\",\n            \"primary-hover-color\": \"darkgreen\",\n            \"custom-class\": {\n              \"primary-color\": \"slateblue\",\n              \"primary-hover-color\": \"darkslateblue\"\n            }\n          }\n        }\n      }}\n    >\n      <Flex gap=\"large\" direction=\"row\">\n        <Button>Themed</Button>\n        <div className={\"custom-class\"}>\n          <Button>Themed by custom class</Button>\n        </div>\n      </Flex>\n    </ThemeProvider>\n  );\n};\n\nexport const ThemeProviderPositiveExampleTemplate = () => {\n  return (\n    <ThemeProvider\n      themeConfig={{\n        name: \"positive-example-theme\",\n        colors: {\n          light: {\n            \"primary-color\": \"green\",\n            \"primary-hover-color\": \"darkgreen\"\n          }\n        }\n      }}\n    >\n      <Button>Hover me</Button>\n    </ThemeProvider>\n  );\n};\n\nexport const ThemeProviderNegativeExampleTemplate = () => {\n  return (\n    <ThemeProvider\n      themeConfig={{\n        name: \"negative-example-theme\",\n        colors: {\n          light: {\n            \"primary-color\": \"green\"\n          }\n        }\n      }}\n    >\n      <Button>Hover me</Button>\n    </ThemeProvider>\n  );\n};\n\nexport const TipDev = () => (\n  <Tip title=\"Dev tip\">\n    Use <code>ThemeProvider.systemThemes</code> and <code>ThemeProvider.colors</code> enums to unleash the power of\n    auto-completion\n  </Tip>\n);\n\nexport const UsageGuidelinesThemeProvider = () => (\n  <UsageGuidelines\n    guidelines={[\n      <>\n        Control themes in your application by setting theme classes (e.g. <code>.light-app-theme</code>) on your{\" \"}\n        <code>body</code> and render everything else inside it. Or use <code>systemTheme</code> prop to make\n        ThemeProvider set the theme class on the <code>body</code> for you.\n      </>,\n      <>\n        In most common case ThemeProvider should be rendered only once on the root level of the application - below the{\" \"}\n        <code>body</code>.\n      </>,\n      <>\n        ThemeProvider is populating theme name <code>className</code> to the new added <code>div</code> container which\n        wraps the children.\n      </>\n    ]}\n  />\n);\n\nexport const DescriptionWithLinkMondaySdkIntegration = () => (\n  <>\n    When developing an external application for monday.com (iframe). You can use <code>ThemeProvider</code> in\n    combination with the{\" \"}\n    <Link\n      href=\"https://developer.monday.com/apps/docs/mondayget#sample-context-objects-for-each-feature-type\"\n      withoutSpacing\n    >\n      monday.com SDK\n    </Link>\n    , to apply monday.com <b>system</b> and <b>product</b> themes to your application. This will allow your application\n    to be consistent with the monday.com UI.\n  </>\n);\n\nexport const MondaySdkIntegrationSourceCode = `\nimport { ThemeProvider } from \"@vibe/core\";\nimport mondaySdk from \"monday-sdk-js\";\n\nconst monday = mondaySdk();\n\nconst useGetContext = () => {\n  const [context, setContext] = useState({});\n  \n  useEffect(() => {\n    monday.listen(\"context\", (res) => {\n      setContext(res.data);\n    });\n  }, []);\n  \n  return context;\n};\n\nconst AppWrapper = () => {\n  const context = useGetContext();\n\n  return (\n    <ThemeProvider themeConfig={context.themeConfig} systemTheme={context.theme}>\n      <App />\n    </ThemeProvider>\n  );\n};\n`;\n"
  },
  {
    "path": "packages/docs/src/pages/components/ThemeProvider/ThemeProvider.stories.tsx",
    "content": "import React, { useState } from \"react\";\nimport { Source } from \"@storybook/blocks7\";\nimport { ThemeProvider, Button, Flex } from \"@vibe/core\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport {\n  ColorsEligibleForThemingTemplate,\n  MondaySdkIntegrationSourceCode,\n  ThemeProviderCustomClassTemplate,\n  ThemeProviderFoldedThemingTemplate,\n  ThemeProviderProductThemingTemplate,\n  ThemeProviderTemplateOverview,\n  ThemeProviderThemingScopeTemplate\n} from \"./ThemeProvider.stories.helpers\";\nimport { themeProviderSystemThemeSuite } from \"./ThemeProvider.interactions\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: ThemeProvider\n});\n\nexport default {\n  title: \"Theming/ThemeProvider\",\n  component: ThemeProvider,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n};\n\nexport const Overview = {\n  render: ThemeProviderTemplateOverview.bind({}),\n  name: \"Overview\",\n\n  args: {\n    themeConfig: {\n      name: \"overview-theme\",\n      colors: {\n        light: {\n          \"primary-color\": \"green\",\n          \"primary-hover-color\": \"darkgreen\"\n        },\n        dark: {\n          \"primary-color\": \"salmon\",\n          \"primary-hover-color\": \"darksalmon\"\n        },\n        black: {\n          \"primary-color\": \"slateblue\",\n          \"primary-hover-color\": \"darkslateblue\"\n        }\n      }\n    }\n  }\n};\n\nexport const ColorsEligibleForTheming = {\n  render: () => <ColorsEligibleForThemingTemplate />,\n  name: \"Colors eligible for theming\"\n};\n\nexport const ThemingScope = {\n  render: ThemeProviderThemingScopeTemplate.bind({}),\n  name: \"Theming scope\"\n};\n\nexport const FoldedTheming = {\n  render: ThemeProviderFoldedThemingTemplate.bind({}),\n  name: \"Folded theming\"\n};\n\nexport const ProductTheming = {\n  render: ThemeProviderProductThemingTemplate.bind({}),\n  name: \"Product theming\"\n};\n\nexport const CustomClassSelector = {\n  render: ThemeProviderCustomClassTemplate.bind({}),\n  name: \"Custom class selector\"\n};\n\nexport const WithSystemTheme = {\n  render: () => {\n    const [systemTheme, setSystemTheme] = useState(null);\n\n    const onToggleButtonClick = () => {\n      switch (systemTheme) {\n        case \"light\":\n          setSystemTheme(\"dark\");\n          break;\n        case \"dark\":\n          setSystemTheme(\"light\");\n          break;\n        default:\n          setSystemTheme(\"dark\");\n      }\n    };\n\n    return (\n      <Flex direction=\"row\" gap=\"large\">\n        <ThemeProvider\n          themeConfig={{\n            name: \"with-system-theme\",\n            colors: {\n              dark: {\n                \"primary-color\": \"var(--positive-color)\",\n                \"primary-hover-color\": \"var(--positive-color-hover)\"\n              }\n            }\n          }}\n          systemTheme={systemTheme}\n        >\n          <Button onClick={onToggleButtonClick} data-testid={\"system-theme-toggle-button\"}>\n            Themed\n          </Button>\n        </ThemeProvider>\n      </Flex>\n    );\n  },\n  name: \"With systemTheme\",\n  play: themeProviderSystemThemeSuite\n};\n\nexport const MondaySdkIntegration = {\n  render: () => {\n    return <Source code={MondaySdkIntegrationSourceCode}></Source>;\n  },\n  name: \"monday.com SDK integration\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/ThemeProvider/product-themes/index.ts",
    "content": "export { productTheme1 } from \"./product-theme-1\";\nexport { productTheme2 } from \"./product-theme-2\";\nexport { productTheme4 } from \"./product-theme-4\";\nexport { productTheme3 } from \"./product-theme-3\";\n"
  },
  {
    "path": "packages/docs/src/pages/components/ThemeProvider/product-themes/product-theme-1.ts",
    "content": "import { type Theme } from \"../../ThemeProviderConstants\";\n\nexport const productTheme1: Theme = {\n  name: \"product-theme-1\",\n  colors: {\n    light: {\n      \"primary-color\": \"#007f9b\",\n      \"primary-hover-color\": \"#006278\",\n      \"primary-selected-color\": \"#bee3e8\",\n      \"primary-selected-hover-color\": \"#d4ebef\",\n      \"brand-colors\": {\n        \"brand-color\": \"#007f9b\",\n        \"brand-hover-color\": \"#006278\",\n        \"text-color-on-brand\": \"#ffffff\"\n      }\n    },\n    dark: {\n      \"primary-color\": \"#007f9b\",\n      \"primary-hover-color\": \"#006278\",\n      \"primary-selected-color\": \"#004858\",\n      \"primary-selected-hover-color\": \"#003844\",\n      \"brand-colors\": {\n        \"brand-color\": \"#007f9b\",\n        \"brand-hover-color\": \"#006278\",\n        \"text-color-on-brand\": \"#ffffff\"\n      }\n    },\n    black: {\n      \"primary-color\": \"#007f9b\",\n      \"primary-hover-color\": \"#006278\",\n      \"primary-selected-color\": \"#004858\",\n      \"primary-selected-hover-color\": \"#003844\",\n      \"brand-colors\": {\n        \"brand-color\": \"#007f9b\",\n        \"brand-hover-color\": \"#006278\",\n        \"text-color-on-brand\": \"#ffffff\"\n      }\n    }\n  }\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/ThemeProvider/product-themes/product-theme-2.ts",
    "content": "import { type Theme } from \"../../ThemeProviderConstants\";\n\nexport const productTheme2: Theme = {\n  name: \"product-theme-2\",\n  colors: {\n    light: {\n      \"primary-color\": \"#d14900\",\n      \"primary-hover-color\": \"#ad4005\",\n      \"primary-selected-color\": \"#f8dccf\",\n      \"primary-selected-hover-color\": \"#f1d3c4\"\n    },\n    dark: {\n      \"primary-color\": \"#d14900\",\n      \"primary-hover-color\": \"#ad4005\",\n      \"primary-selected-color\": \"#6d2702\",\n      \"primary-selected-hover-color\": \"#491b03\"\n    },\n    black: {\n      \"primary-color\": \"#d14900\",\n      \"primary-hover-color\": \"#ad4005\",\n      \"primary-selected-color\": \"#6d2702\",\n      \"primary-selected-hover-color\": \"#491b03\"\n    }\n  }\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/ThemeProvider/product-themes/product-theme-3.ts",
    "content": "import { type Theme } from \"../../ThemeProviderConstants\";\n\nexport const productTheme3: Theme = {\n  name: \"product-theme-3\",\n  colors: {\n    light: {\n      \"primary-color\": \"#00854d\",\n      \"primary-hover-color\": \"#025231\",\n      \"primary-selected-color\": \"#c6e9d5\",\n      \"primary-selected-hover-color\": \"#a7ddbe\",\n      \"primary-selected-on-secondary-color\": \"var(--primary-selected-color)\",\n      \"brand-colors\": {\n        \"primary-color\": \"#181b34\",\n        \"primary-hover-color\": \"#393d60\",\n        \"primary-selected-hover-color\": \"#d4d6de\",\n        \"brand-color\": \"#00854d\",\n        \"brand-hover-color\": \"#025231\",\n        \"brand-selected-color\": \"#c6e9d5\",\n        \"brand-selected-hover-color\": \"#a7ddbe\",\n        \"text-color-on-primary\": \"#ffffff\",\n        \"text-color-on-brand\": \"#ffffff\",\n        \"primary-selected-color\": \"var(--disabled-background-color)\"\n      }\n    },\n    dark: {\n      \"primary-color\": \"#00854d\",\n      \"primary-hover-color\": \"#025231\",\n      \"primary-selected-color\": \"#013c29\",\n      \"primary-selected-hover-color\": \"#0c3125\",\n      \"primary-selected-on-secondary-color\": \"var(--primary-selected-color)\",\n      \"brand-colors\": {\n        \"primary-color\": \"#ffffff\",\n        \"primary-hover-color\": \"#c5c7d0\",\n        \"primary-selected-hover-color\": \"#30324e\",\n        \"brand-color\": \"#00854d\",\n        \"brand-hover-color\": \"#025231\",\n        \"brand-selected-color\": \"#4b4e69\",\n        \"brand-selected-hover-color\": \"#30324e\",\n        \"text-color-on-primary\": \"#323338\",\n        \"text-color-on-brand\": \"#ffffff\",\n        \"primary-selected-color\": \"var(--disabled-background-color)\"\n      }\n    },\n    black: {\n      \"primary-color\": \"#00854d\",\n      \"primary-hover-color\": \"#025231\",\n      \"primary-selected-color\": \"#013c29\",\n      \"primary-selected-hover-color\": \"#0c3125\",\n      \"primary-selected-on-secondary-color\": \"var(--primary-selected-color)\",\n      \"brand-colors\": {\n        \"primary-color\": \"#ffffff\",\n        \"primary-hover-color\": \"#c5c7d0\",\n        \"primary-selected-hover-color\": \"#30324e\",\n        \"brand-color\": \"#00854d\",\n        \"brand-hover-color\": \"#025231\",\n        \"brand-selected-color\": \"#4b4e69\",\n        \"brand-selected-hover-color\": \"#30324e\",\n        \"text-color-on-primary\": \"#323338\",\n        \"text-color-on-brand\": \"#ffffff\",\n        \"primary-selected-color\": \"var(--disabled-background-color)\"\n      }\n    }\n  }\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/ThemeProvider/product-themes/product-theme-4.ts",
    "content": "import { type Theme } from \"../../ThemeProviderConstants\";\n\nexport const productTheme4: Theme = {\n  name: \"product-theme-4\",\n  colors: {\n    light: {\n      \"primary-color\": \"#e21277\",\n      \"primary-hover-color\": \"#bb0c61\",\n      \"primary-selected-color\": \"#f8d4e6\",\n      \"primary-selected-hover-color\": \"#f1d8dc\"\n    },\n    dark: {\n      \"primary-color\": \"#e21277\",\n      \"primary-hover-color\": \"#bb0c61\",\n      \"primary-selected-color\": \"#5c0631\",\n      \"primary-selected-hover-color\": \"#480627\"\n    },\n    black: {\n      \"primary-color\": \"#e21277\",\n      \"primary-hover-color\": \"#ae085a\",\n      \"primary-selected-color\": \"#5c0631\",\n      \"primary-selected-hover-color\": \"#480627\"\n    }\n  }\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Tipseen/Tipseen.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { Link } from \"vibe-storybook-components\";\nimport { Tipseen, TipseenContent, TipseenWizard } from \"@vibe/core\";\nimport { Icon } from \"@vibe/icon\";\nimport { Board, BoardPrivate } from \"@vibe/icons\";\nimport { TipCheckYourself, wizardContent } from \"./Tipseen.stories.helpers\";\nimport * as TipseenStories from \"./Tipseen.stories\";\nimport do1 from \"./assets/do1.png\";\nimport do2 from \"./assets/do2.png\";\nimport do3 from \"./assets/do3.png\";\nimport dont1 from \"./assets/dont1.png\";\nimport dont2 from \"./assets/dont2.png\";\nimport dont3 from \"./assets/dont3.png\";\n\n<Meta of={TipseenStories} />\n\n# Tipseen\n\nTipseen is a virtual unboxing experience that helps users get started with the system and discover new features.\n\n<Canvas of={TipseenStories.Overview} />\n\n### Import\n\n```js\nimport { Tipseen, TipseenMedia, TipseenContent, TipseenWizard } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Use for onboarding screens, new features discovery, or any guidance a user needs.\",\n    \"Use when the user is not yet familiar with the system’s UI or ready to learn about it.\",\n    \"The tip will appear until closed by an X button or call to action button.\"\n  ]}\n/>\n\n<TipCheckYourself />\n\n## Variants\n\n### Colors\n\nTipseens come in 2 colors: inverted and primary. \\\nThe inverted type is the default. \\\nUse the inverted color for feature discovery, or to give the user general guidance. \\\nUse the primary color to bring attention to updates about your product offering.\n\n<Canvas of={TipseenStories.Colors} />\n\n### Tipseen with a wizard\n\nUse Tipseen with a wizard when you want to teach something in steps.\n\n<Canvas of={TipseenStories.TipseenWithAWizard} />\n\n### Tipseen with image\n\n<Canvas of={TipseenStories.TipseenWithImage} />\n\n### Tipseen with custom media\n\nWrap your custom media with `TipseenMedia` component. This use case is good for when using Lottie animations or other media that is not necessarily an image.\n\n<Canvas of={TipseenStories.TipseenWithCustomMedia} />\n\n### Floating Tipseen\n\nUse Floating Tipseen in case where the guidance is not relevant to a specific UI element, but general.\nIn this case, the Tipseen position will be the right corner of the screen and without an arrow tip.\n\n<Canvas of={TipseenStories.FloatingTipseen} story={{ height: \"500px\" }} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: <img src={do1} alt=\"do1\" style={{ width: \"100%\" }} />,\n        description:\n          \"When using a Tipseen wizard, allow the user to complete the process and close the Tipseen by leaving the last CTA enabled.\"\n      },\n      negative: {\n        component: <img src={dont1} alt=\"dont1\" style={{ width: \"100%\" }} />,\n        description: \"Don’t finish the Tipseen wizard process with a disabled CTA.\"\n      }\n    },\n    {\n      positive: {\n        component: <img src={do2} alt=\"do2\" style={{ width: \"100%\" }} />,\n        description:\n          \"Use tipseen in order to guide the user through a new feature or a place they’re not familiar with in the system.\"\n      },\n      negative: {\n        component: <img src={dont2} alt=\"dont2\" style={{ width: \"100%\" }} />,\n        description: \"Don’t use tipseen to provide additional information on a familiar UI.\"\n      }\n    },\n    {\n      positive: {\n        component: <img src={do3} alt=\"do3\" style={{ width: \"100%\" }} />,\n        description: \"Add a pointer to indicate the specific component that the tipseen comes from.\"\n      },\n      negative: {\n        component: <img src={dont3} alt=\"dont3\" style={{ width: \"100%\" }} />,\n        description: \"Don’t use a tipseen without a pointer, unless it’s a general tipseen for an entire screen.\"\n      }\n    }\n  ]}\n/>\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Tooltip\", \"AttentionBox\", \"Chips\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Tipseen/Tipseen.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const wizardContent = [\n  <div>Message for the user will appear here, to give more information about the feature.</div>,\n  <div>Message for the user will appear here, to give more information about the feature.</div>,\n  <div>Message for the user will appear here, to give more information about the feature.</div>,\n  <div>Message for the user will appear here, to give more information about the feature.</div>,\n  <div>Message for the user will appear here, to give more information about the feature.</div>\n];\n\nexport const TipCheckYourself = () => (\n  <Tip title=\"Check yourself\">\n    If you need to provide additional information about a component, use the{\" \"}\n    <StorybookLink page=\"Components/Tooltip\" size=\"small\">\n      Tooltip\n    </StorybookLink>{\" \"}\n    or{\" \"}\n    <StorybookLink page=\"Components/AttentionBox\" size=\"small\">\n      Attention box.\n    </StorybookLink>\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/Tipseen/Tipseen.stories.tsx",
    "content": "import React, { useCallback, useState } from \"react\";\nimport { type Meta, type StoryObj } from \"@storybook/react\";\nimport {\n  Tipseen,\n  type TipseenProps,\n  TipseenContent,\n  type TipseenContentProps,\n  TipseenWizard,\n  TipseenMedia,\n  Flex\n} from \"@vibe/core\";\nimport { shift, flip } from \"@floating-ui/react-dom\";\nimport picture from \"./assets/picture.svg\";\nimport video from \"./assets/video.mp4\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\n\n// Middleware to prevent the tipseen from being displaced when the user scrolls the story.\n// Not needed in real implementations.\nconst storyMiddleware = [shift({ mainAxis: false }), flip({ fallbackPlacements: [] })];\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: Tipseen\n});\n\nexport default {\n  title: \"Components/Tipseen\",\n  component: Tipseen,\n  subcomponents: {\n    TipseenMedia,\n    TipseenContent,\n    TipseenWizard\n  },\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n} as Meta<typeof Tipseen>;\n\nconst tipseenTemplate = ({ title, children, position, ...otherArgs }: TipseenProps & TipseenContentProps) => {\n  return (\n    <Tipseen\n      middleware={storyMiddleware}\n      position={position}\n      content={<TipseenContent title={title}>{children}</TipseenContent>}\n      {...otherArgs}\n    >\n      <div style={{ height: \"160px\" }} />\n    </Tipseen>\n  );\n};\n\nexport const Overview: StoryObj<typeof Tipseen> = {\n  render: tipseenTemplate.bind({}),\n  name: \"Overview\",\n  args: {\n    id: \"overview-tipseen\",\n    title: \"Title\",\n    children: <div>Message for the user will appear here, to give more information about the feature.</div>,\n    position: \"right\"\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const Colors: StoryObj<typeof Tipseen> = {\n  render: () => {\n    return (\n      <Flex direction=\"column\">\n        <Tipseen\n          id=\"colors-tipseen-1\"\n          middleware={storyMiddleware}\n          position=\"right\"\n          content={\n            <TipseenContent id=\"colors-content-1\" title=\"This is a title\">\n              Message for the user will appear here, to give more information about the feature.\n            </TipseenContent>\n          }\n        >\n          <div style={{ height: \"180px\" }} />\n        </Tipseen>\n        <Tipseen\n          id=\"colors-tipseen-2\"\n          middleware={storyMiddleware}\n          position=\"right\"\n          color=\"primary\"\n          content={\n            <TipseenContent id=\"colors-content-2\" title=\"This is a title\">\n              Message for the user will appear here, to give more information about the feature.\n            </TipseenContent>\n          }\n        >\n          <div style={{ height: \"180px\" }} />\n        </Tipseen>\n      </Flex>\n    );\n  },\n  name: \"Colors\"\n};\n\nexport const TipseenWithAWizard: StoryObj<typeof Tipseen> = {\n  render: () => {\n    const content = [\n      <div>Popover message №1 will appear here</div>,\n      <div>Popover message №2 will appear here</div>,\n      <div>Popover message №3 will appear here</div>,\n      <div>Popover message №4 will appear here</div>,\n      <div>Popover message №5 will appear here</div>\n    ];\n\n    const [activeStepIndex, setActiveStepIndex] = useState(2);\n\n    const onChangeActiveStep = useCallback((_e: any, stepIndex: React.SetStateAction<number>) => {\n      setActiveStepIndex(stepIndex);\n    }, []);\n\n    return (\n      <Tipseen\n        middleware={storyMiddleware}\n        position=\"right\"\n        content={\n          <TipseenWizard\n            title=\"This is a title\"\n            steps={content}\n            activeStepIndex={activeStepIndex}\n            onChangeActiveStep={onChangeActiveStep}\n            onFinish={() => {}}\n          />\n        }\n      >\n        <div style={{ height: \"150px\" }} />\n      </Tipseen>\n    );\n  },\n\n  name: \"Tipseen with a wizard\"\n};\n\nexport const TipseenWithImage: StoryObj<typeof Tipseen> = {\n  render: () => {\n    const content = [\n      <div>Message for the user will appear here, to give more information about the feature.</div>,\n      <div>Message for the user will appear here, to give more information about the feature.</div>,\n      <div>Message for the user will appear here, to give more information about the feature.</div>,\n      <div>Message for the user will appear here, to give more information about the feature.</div>,\n      <div>Message for the user will appear here, to give more information about the feature.</div>\n    ];\n\n    return (\n      <Tipseen\n        middleware={storyMiddleware}\n        position=\"right\"\n        closeButtonTheme=\"light\"\n        content={\n          <>\n            <TipseenMedia>\n              <img src={picture} alt=\"\" style={{ objectFit: \"cover\", width: \"100%\" }} />\n            </TipseenMedia>\n            <TipseenWizard title=\"This is a title\" steps={content} activeStepIndex={2} />\n          </>\n        }\n      >\n        <div style={{ height: \"300px\" }} />\n      </Tipseen>\n    );\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { picture }\n      }\n    }\n  },\n\n  name: \"Tipseen with image\"\n};\n\nexport const TipseenWithCustomMedia: StoryObj<typeof Tipseen> = {\n  render: () => {\n    return (\n      <Tipseen\n        middleware={storyMiddleware}\n        position=\"right\"\n        closeButtonTheme=\"dark\"\n        content={\n          <>\n            <TipseenMedia>\n              <video\n                autoPlay\n                muted\n                loop\n                src={video}\n                style={{\n                  width: \"100%\"\n                }}\n              />\n            </TipseenMedia>\n            <TipseenContent title=\"This is a title\">\n              Message for the user will appear here, to give more information about the feature.\n            </TipseenContent>\n          </>\n        }\n      >\n        <div style={{ height: \"280px\" }} />\n      </Tipseen>\n    );\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { video }\n      }\n    }\n  },\n\n  name: \"Tipseen with custom media\"\n};\n\nexport const FloatingTipseen: StoryObj<typeof Tipseen> = {\n  render: () => {\n    return (\n      <Tipseen\n        closeButtonTheme=\"dark\"\n        floating\n        content={\n          <>\n            <TipseenMedia>\n              <img src={picture} alt=\"\" style={{ objectFit: \"cover\", width: \"100%\" }} />\n            </TipseenMedia>\n            <TipseenContent title=\"This is a Floating Tipseen\">\n              Message for the user will appear here, to give more information about the feature.\n            </TipseenContent>\n          </>\n        }\n        // You do not have to use containerSelector, in current use this is for story only\n        containerSelector=\"#tipseen-floating-container\"\n      />\n    );\n  },\n  decorators: [\n    Story => (\n      <div style={{ height: \"400px\" }} id=\"tipseen-floating-container\">\n        <Story />\n      </div>\n    )\n  ],\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { picture }\n      }\n    }\n  },\n  name: \"Floating Tipseen\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Toast/Toast.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { UsageGuidelines } from \"vibe-storybook-components\";\nimport { Toast, Flex } from \"@vibe/core\";\nimport * as ToastStories from \"./Toast.stories\";\nimport { TipAlertBanner } from \"./Toast.stories.helpers\";\nimport do1 from \"./assets/do1.png\";\nimport dont1 from \"./assets/dont1.png\";\nimport do2 from \"./assets/do2.png\";\nimport dont2 from \"./assets/dont2.png\";\nimport do3 from \"./assets/do3.png\";\nimport dont3 from \"./assets/dont3.png\";\n\n<Meta of={ToastStories} />\n\n# Toast\n\nA toast notification is a message object that presents timely information, including confirmation of actions, alerts, and errors.\n\n<Canvas of={ToastStories.Overview} />\n\n### Import\n\n```js\nimport { Toast } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Use toast notifications immediately after a specific event such as a user action that does not relate to an object on the page. Toast used as a feedback loop to a user’s action.\",\n    \"Toasts should appear one at a time, and only disappear when no longer required.\",\n    \"Always be concise, write a short and clear message.\",\n    \"Where possible, give follow up actions to allow the user to become more informed or resolve the issue.\",\n    \"Always provide an action button or option to undo.\",\n    \"Toast should overlay permanent UI elements without blocking important actions.\"\n  ]}\n/>\n\n<TipAlertBanner />\n\n## Accessibility\n\n<UsageGuidelines\n  guidelines={[\n    <>\n      For dismissible Toasts, use the <code>closeButtonAriaLabel</code> prop to provide a descriptive accessible name\n      for the close button (e.g., \"Dismiss notification\", \"Close success message\").\n    </>\n  ]}\n/>\n\n## Variants\n\n### Default with button\n\n<Canvas of={ToastStories.DefaultWithButton} />\n\n### Toast with link\n\n<Canvas of={ToastStories.ToastWithLink} />\n\n### Toast with loading\n\n<Canvas of={ToastStories.ToastWithLoading} />\n\n### Success message\n\nUse to providing a feedback loop. For example: Item copied.\n\n<Canvas of={ToastStories.SuccessMessage} />\n\n### Error message\n\nUse when something was deleted, a problem has occurred, etc.\n\n<Canvas of={ToastStories.ErrorMessage} />\n\n### Warning message\n\n<Canvas of={ToastStories.WarningMessage} />\n\n### Dark message\n\n<Canvas of={ToastStories.DarkMessage} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: <img src={do1} width=\"100%\" />,\n        description: \"Use only one toast on a screen at a time.\"\n      },\n      negative: {\n        component: <img src={dont1} width=\"100%\" />,\n        description: <>Don’t place more than one toast on a screen at a time.</>\n      }\n    },\n    {\n      positive: {\n        component: <img src={do2} width=\"100%\" />,\n        description: \"Always offer an option to undo the action. Keep the toast for 60 seconds before auto-removing it.\"\n      },\n      negative: {\n        component: <img src={dont2} width=\"100%\" />,\n        description: \"Don’t offer an action without letting the user undo it.\"\n      }\n    },\n    {\n      positive: {\n        component: <img src={do3} width=\"100%\" />,\n        description: \"If the toast message has 2 steps, make sure both toasts have roughly the same width.\"\n      },\n      negative: {\n        component: <img src={dont3} width=\"100%\" />,\n        description: \"If the toast message has 2 steps, don’t use toasts with very different widths.\"\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### Feedback loop\n\nAfter a user has done an action, provide feedback to close the loop. For example, when an item has been deleted, duplicated, etc.\n\n<Canvas of={ToastStories.FeedbackLoop} />\n\n### Animation\n\nOur toast includes 2 animations: slide-in and transform. The transform animation is triggered when the toast changes from one state to another (for example, from loading to success).\n\n<Canvas of={ToastStories.Animation} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"AlertBanner\", \"Tooltip\", \"AttentionBox\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Toast/Toast.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const TipAlertBanner = () => (\n  <Tip title=\"Check yourself\">\n    Need to inform the user about a system’s action? Use an{\" \"}\n    <StorybookLink page=\"Components/AlertBanner\" size=\"small\">\n      AlertBanner\n    </StorybookLink>{\" \"}\n    instead.\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/Toast/Toast.stories.tsx",
    "content": "import React from \"react\";\nimport { useCallback, useState } from \"react\";\nimport { createComponentTemplate } from \"vibe-storybook-components\";\nimport { Toast, Button, Flex } from \"@vibe/core\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { type Decorator, type Meta, type StoryObj } from \"@storybook/react\";\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: Toast,\n  iconPropNamesArray: [\"icon\"]\n});\n\nconst toastStoryDecorators: Decorator[] = [\n  Story => (\n    <div\n      style={{\n        padding: \"40px\",\n        position: \"static\",\n        transform: \"translate(0, 0)\",\n        marginRight: \"auto\",\n        marginLeft: \"auto\"\n      }}\n    >\n      <Story />\n    </div>\n  )\n];\n\nexport default {\n  title: \"Components/Toast\",\n  component: Toast,\n  argTypes: metaSettings.argTypes,\n  decorators: [...metaSettings.decorators, ...toastStoryDecorators]\n} as Meta<typeof Toast>;\n\nconst toastTemplate = createComponentTemplate(Toast);\n\nexport const Overview: StoryObj<typeof Toast> = {\n  render: toastTemplate.bind({}),\n  name: \"Overview\",\n  args: {\n    id: \"overview-toast\",\n    children: \"General message toast\",\n    open: true,\n    actions: [\n      {\n        type: \"button\",\n        content: \"Button\"\n      }\n    ]\n  },\n  parameters: {\n    chromatic: { pauseAnimationAtEnd: false },\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const DefaultWithButton = {\n  render: () => {\n    return (\n      <Toast id=\"default-with-button\" open actions={[{ type: \"button\", content: \"Button\" }]}>\n        General message toast\n      </Toast>\n    );\n  },\n  name: \"Default with button\",\n  parameters: { chromatic: { pauseAnimationAtEnd: false } }\n};\n\nexport const ToastWithLink = {\n  render: () => {\n    return (\n      <Toast id=\"toast-with-link\" open actions={[{ type: \"link\", text: \"Link to action\", href: \"https://monday.com\" }]}>\n        General message toast\n      </Toast>\n    );\n  },\n  name: \"Toast with link\"\n};\n\nexport const ToastWithLoading = {\n  render: () => {\n    return (\n      <Toast id=\"toast-loading\" open loading>\n        General message toast\n      </Toast>\n    );\n  },\n  name: \"Toast with loading\",\n  parameters: { chromatic: { pauseAnimationAtEnd: true } }\n};\n\nexport const SuccessMessage = {\n  render: () => {\n    return (\n      <Toast id=\"success-message\" open type=\"positive\" actions={[{ type: \"button\", content: \"Undo 5\" }]}>\n        Positive message toast\n      </Toast>\n    );\n  },\n  name: \"Success message\"\n};\n\nexport const ErrorMessage = {\n  render: () => {\n    return (\n      <Toast id=\"error-message\" open actions={[{ type: \"button\", content: \"Button\" }]} type=\"negative\">\n        Negative message toast\n      </Toast>\n    );\n  },\n  name: \"Error message\"\n};\n\nexport const WarningMessage = {\n  render: () => {\n    return (\n      <Toast id=\"warning-message\" open actions={[{ type: \"button\", content: \"Button\" }]} type=\"warning\">\n        Warning message toast\n      </Toast>\n    );\n  },\n  name: \"Warning message\",\n  parameters: { chromatic: { pauseAnimationAtEnd: false } }\n};\n\nexport const DarkMessage = {\n  render: () => {\n    return (\n      <Toast id=\"dark-message\" open actions={[{ type: \"button\", content: \"Button\" }]} type=\"dark\">\n        Dark message toast\n      </Toast>\n    );\n  },\n  name: \"Dark message\",\n  parameters: { chromatic: { pauseAnimationAtEnd: false } }\n};\n\nexport const FeedbackLoop = {\n  render: () => {\n    return (\n      <Toast id=\"feedback-loop\" open type=\"positive\" actions={[{ type: \"button\", content: \"Undo\" }]}>\n        We successfully deleted 1 item\n      </Toast>\n    );\n  },\n  parameters: { chromatic: { pauseAnimationAtEnd: false } }\n};\n\nexport const Animation = {\n  render: () => {\n    const [successToastOpen, setSuccessToastOpen] = useState(false);\n    const [failureToastOpen, setFailureToastOpen] = useState(false);\n    const [isDeleting, setIsDeleting] = useState(false);\n\n    const onSuccessClick = useCallback(() => {\n      setSuccessToastOpen(true);\n      setIsDeleting(true);\n\n      setTimeout(() => {\n        setIsDeleting(false);\n      }, 1000);\n    }, []);\n\n    const onFailureClick = useCallback(() => {\n      setFailureToastOpen(true);\n      setIsDeleting(true);\n\n      setTimeout(() => {\n        setIsDeleting(false);\n      }, 1000);\n    }, []);\n\n    return (\n      <Flex gap=\"medium\">\n        <Button\n          id=\"animation-success-button\"\n          aria-label=\"Trigger success toast\"\n          onClick={onSuccessClick}\n          kind=\"secondary\"\n        >\n          Success action\n        </Button>\n        <Button\n          id=\"animation-failure-button\"\n          aria-label=\"Trigger failure toast\"\n          onClick={onFailureClick}\n          kind=\"secondary\"\n        >\n          Failure action\n        </Button>\n        <Toast\n          id=\"animation-success-toast\"\n          open={successToastOpen}\n          type={isDeleting ? \"normal\" : \"positive\"}\n          actions={isDeleting ? [] : [{ type: \"button\", content: \"Undo\" }]}\n          onClose={() => setSuccessToastOpen(false)}\n          autoHideDuration={2000}\n          loading={isDeleting}\n        >\n          {isDeleting ? \"Deleting 1 selected item...\" : \"We successfully deleted 1 item\"}\n        </Toast>\n        <Toast\n          id=\"animation-failure-toast\"\n          open={failureToastOpen}\n          type={isDeleting ? \"normal\" : \"negative\"}\n          onClose={() => setFailureToastOpen(false)}\n          autoHideDuration={2000}\n          loading={isDeleting}\n        >\n          {isDeleting ? \"Deleting 1 selected item...\" : \"Something went wrong\"}\n        </Toast>\n      </Flex>\n    );\n  }\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Toggle/Toggle.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { Toggle, Flex } from \"@vibe/core\";\nimport { ComponentRules, Link, UsageGuidelines } from \"vibe-storybook-components\";\nimport { TipOtherComponents } from \"./Toggle.stories.helpers\";\nimport * as ToggleStories from \"./Toggle.stories\";\n\n<Meta of={ToggleStories} />\n\n# Toggle\n\nAllow users to turn an single option on or off. They are usually used to activate or deactivate a specific setting.\n\n<Canvas of={ToggleStories.Overview} />\n\n### Import\n\n```js\nimport { Toggle } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Use toggles when your intent is to turn something on or off instantly.\",\n    \"Let users know what happens when the toggle is switched by using a tooltip.\",\n    <>\n      Toggle can either be selected or not selected. They cannot be in an indeterminate state (unlike{\" \"}\n      <StorybookLink page=\"Components/Checkbox\">checkboxes</StorybookLink>).\n    </>,\n    \"Use labels such as “on” and “off” or “enable” and “disable” to communicate the state of the toggle.\"\n  ]}\n/>\n\n<TipOtherComponents />\n\n## Accessibility\n\n<UsageGuidelines\n  guidelines={[\n    <>\n      Using an <code>id</code> is highly recommended for all instances to ensure proper label association.\n    </>,\n    <>\n      Use <code>ariaLabel</code> prop when you need to provide additional context for screen readers.\n    </>,\n    <>\n      Use <code>ariaLabelledBy</code> prop when an external element provides the accessible name for the toggle.\n    </>,\n    <>\n      Use <code>ariaControls</code> prop when the toggle controls other elements on the page.\n    </>,\n    <>\n      Use <code>disabled</code> prop appropriately to indicate when toggles are not available for interaction.\n    </>\n  ]}\n/>\n\n## Variants\n\n### States\n\n<Canvas of={ToggleStories.States} />\n\n### Size\n\nToggle appear in 2 sizes: small and medium.\n\n<Canvas of={ToggleStories.Size} />\n\n### Disabled\n\n<Canvas of={ToggleStories.Disabled} />\n\n## Do’s and Don’ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: (\n          <Flex gap=\"large\">\n            Dark mode <Toggle />\n          </Flex>\n        ),\n        description: \"Use toggle only for on and off actions. We recommend not to change these lables values.\"\n      },\n      negative: {\n        component: (\n          <Flex gap=\"large\">\n            Theme <Toggle offOverrideText=\"Light mode\" onOverrideText=\"Dark mode\" />\n          </Flex>\n        ),\n        description: (\n          <>\n            Don’t use toggle for configurations. Instead, use{\" \"}\n            <StorybookLink page=\"Components/Checkbox\">Checkboxes</StorybookLink> or{\" \"}\n            <StorybookLink page=\"Components/RadioButton\">Radio buttons.</StorybookLink>{\" \"}\n          </>\n        )\n      }\n    },\n    {\n      positive: {\n        component: <Toggle />,\n        description: \"Toggle will always appear with labels\"\n      },\n      negative: {\n        component: (\n          <Flex direction=\"column\" gap=\"medium\" align=\"start\">\n            <Toggle offOverrideText=\"\" />\n            <Toggle areLabelsHidden />\n          </Flex>\n        ),\n        description: \"Don’t remove toggle labels, since users would not know what state it represents. \"\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### Turn on/ off an automation\n\nIn the automations center, a user can turn the automation on or off.\n\n<Canvas of={ToggleStories.TurnOnOffAnAutomation} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Checkbox\", \"RadioButton\", \"ButtonGroup\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Toggle/Toggle.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const TipOtherComponents = () => (\n  <Tip>\n    If the user needs to choose an item from a set of options, use{\" \"}\n    <StorybookLink page=\"Components/RadioButton\" size=\"small\">\n      Radio button\n    </StorybookLink>{\" \"}\n    or{\" \"}\n    <StorybookLink page=\"Components/Checkbox\" size=\"small\">\n      Checkboxes\n    </StorybookLink>{\" \"}\n    instead.\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/Toggle/Toggle.stories.tsx",
    "content": "import React from \"react\";\nimport { createComponentTemplate, MultipleStoryElementsWrapper } from \"vibe-storybook-components\";\nimport { Toggle, Flex, Text } from \"@vibe/core\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\nimport { type Meta, type StoryObj } from \"@storybook/react\";\n\ntype Story = StoryObj<typeof Toggle>;\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: Toggle,\n  actionPropsArray: [\"onChange\"]\n});\n\nexport default {\n  title: \"Components/Toggle\",\n  component: Toggle,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n} satisfies Meta<typeof Toggle>;\n\nconst toggleTemplate = createComponentTemplate(Toggle);\n\nexport const Overview: Story = {\n  render: toggleTemplate.bind({}),\n  args: {\n    id: \"overview-toggle\",\n    \"aria-label\": \"Toggle option\"\n  },\n  parameters: {\n    docs: {\n      liveEdit: {\n        isEnabled: false\n      }\n    }\n  }\n};\n\nexport const States: Story = {\n  render: () => (\n    <Flex direction=\"column\" gap=\"medium\">\n      <Toggle id=\"states-off\" aria-label=\"Toggle off state\" isDefaultSelected={false} />\n      <Toggle id=\"states-on\" aria-label=\"Toggle on state\" />\n    </Flex>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { MultipleStoryElementsWrapper }\n      }\n    }\n  }\n};\n\nexport const Size: Story = {\n  render: () => (\n    <Flex gap=\"large\">\n      <Toggle id=\"size-medium\" aria-label=\"Medium toggle\" size=\"medium\" />\n      <Toggle id=\"size-small\" aria-label=\"Small toggle\" size=\"small\" />\n    </Flex>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { MultipleStoryElementsWrapper }\n      }\n    }\n  }\n};\n\nexport const Disabled: Story = {\n  render: () => (\n    <Flex direction=\"column\" gap=\"large\">\n      <Toggle id=\"disabled-off\" aria-label=\"Disabled toggle off\" isDefaultSelected={false} disabled />\n      <Toggle id=\"disabled-on\" aria-label=\"Disabled toggle on\" disabled />\n    </Flex>\n  ),\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { MultipleStoryElementsWrapper }\n      }\n    }\n  }\n};\n\nexport const TurnOnOffAnAutomation: Story = {\n  render: () => (\n    <Flex gap=\"medium\">\n      <Text id=\"automation-label\">Board automations</Text>\n      <Toggle id=\"automation-toggle\" aria-label=\"Toggle board automations\" />\n    </Flex>\n  ),\n  name: \"Turn on/ off an automation\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/Tooltip/Tooltip.interactions.ts",
    "content": "import { expect } from \"@storybook/jest\";\nimport { type Screen } from \"@testing-library/react\";\nimport { userEvent, waitFor } from \"@storybook/test\";\nimport { ComponentDefaultTestId, getTestId } from \"@vibe/shared\";\n\nexport async function testHoverTooltipTrigger(\n  canvas: Screen,\n  getHoverableElement: () => Promise<HTMLElement>,\n  tooltipData: { id?: string; content?: string; showDelay?: number } = {}\n) {\n  /**\n   // If we try to access the text element before it finishes its initial render, we will receive the instance without the tooltip events.\n   // As a result, userEvent.hover will not work the first time. However, when we try to access the hoverable element for the second time, it will contain all the events\n   // and work as expected.\n  **/\n  await waitFor(\n    async () => {\n      const hoverableElement = await getHoverableElement();\n      userEvent.hover(hoverableElement);\n      const { id, content, showDelay = 100 } = tooltipData;\n\n      // Waiting for tooltip appearance delay (100ms by default)\n      await new Promise(resolve => {\n        setTimeout(resolve, showDelay);\n      });\n      const tooltipElement =\n        content !== undefined\n          ? canvas.getByText(content)\n          : canvas.getByTestId(getTestId(ComponentDefaultTestId.TOOLTIP, id));\n      expect(tooltipElement).toBeInTheDocument();\n      userEvent.unhover(hoverableElement);\n    },\n    { timeout: 1000 }\n  );\n}\n"
  },
  {
    "path": "packages/docs/src/pages/components/Tooltip/Tooltip.mdx",
    "content": "import { Tooltip, Icon, Button, TabList, Tab, Link, IconButton } from \"@vibe/core\";\nimport { Canvas, Meta } from \"@storybook/blocks\";\nimport { Bolt } from \"@vibe/icons\";\nimport * as TooltipStories from \"./Tooltip.stories\";\nimport { TipOtherComponents } from \"./Tooltip.stories.helpers\";\nimport image from \"./assets/tooltip-image.png\";\n\n<Meta of={TooltipStories} />\n\n# Tooltip\n\nTooltips provide helpful information and can include detailed context about a specific component when a user hovers on it.\n\n<Canvas of={TooltipStories.Overview} />\n\n### Import\n\n```js\nimport { Tooltip } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Should never contain critical information that a user would definitely need to proceed.\",\n    \"Use when the description content would be too much information to include inline or create too much clutter. For example, when expert users have seen it many times.\",\n    \"Only show 1 tooltip at a time.\",\n    \"Whenever text is shortened and an ellipsis (...) appears, add a tooltip that contains the full version of the text.\"\n  ]}\n/>\n\n<TipOtherComponents />\n\n## Accessibility\n\n<UsageGuidelines\n  guidelines={[\n    <>\n      Provide an <code>id</code> for the Tooltip to enable proper accessibility associations and unique identification.\n    </>,\n    <>\n      Ensure tooltip content is descriptive and provides meaningful information. Avoid using tooltips to repeat\n      information that's already visible in the UI.\n    </>,\n    <>\n      Configure <code>showTrigger</code> and <code>hideTrigger</code> events to ensure tooltips are accessible via both\n      mouse and keyboard interactions.\n    </>,\n    <>\n      Use <code>hideWhenReferenceHidden</code> prop to ensure tooltips disappear when their reference elements are\n      hidden or removed from the DOM.\n    </>,\n    <>\n      Avoid placing critical information only in tooltips - ensure the core functionality is accessible without tooltips\n      for users who cannot see them.\n    </>\n  ]}\n/>\n\n## Variants\n\n### Tooltip with title\n\nUse tooltip with title when you want to present more complex content and you need to add a heading to emphasize the main idea. Titles can also come with an icon.\n\n<Canvas of={TooltipStories.TooltipWithTitle} />\n\n### Tooltip with image\n\nUse tooltip with image to provide a preview for an image or when giving a closer look at a feature.\n\n<Canvas of={TooltipStories.TooltipWithImage} />\n\n### Positions\n\nTooltip's arrow can appear from top, bottom, left or right.\n\n<Canvas of={TooltipStories.Positions} />\n\n## Do's and Don'ts\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: (\n          <Tooltip shouldShowOnMount content=\"Quick search + B\">\n            <IconButton kind=\"secondary\" icon={Bolt} iconSize=\"32\" />\n          </Tooltip>\n        ),\n        description: \"Use tooltips for interactive imagery.\"\n      },\n      negative: {\n        component: (\n          <Tooltip shouldShowOnMount content=\"Quick search + B\">\n            <Button>Quick search</Button>\n          </Tooltip>\n        ),\n        description: \"Don't use tooltips to restate visible UI text.\"\n      }\n    },\n    {\n      positive: {\n        component: (\n          <TabList>\n            <Tab>Boards</Tab>\n            <Tab>Items</Tab>\n          </TabList>\n        ),\n        description: \"If an element doesn't need additional clarification, don't use a tooltip.\"\n      },\n      negative: {\n        component: (\n          <TabList>\n            <Tooltip shouldShowOnMount content=\"Boards\" position=\"bottom\">\n              <Tab>Boards</Tab>\n            </Tooltip>\n            <Tab>Items</Tab>\n          </TabList>\n        ),\n        description: \"Don't use tooltips to restate text that is already displayed within the element.\"\n      }\n    },\n    {\n      positive: {\n        component: (\n          <Tooltip\n            shouldShowOnMount\n            title=\"I'm a rich tooltip\"\n            open\n            content={\n              <div>\n                I have a title, text, image and I can come <Link text=\"with a link\" inlineText color=\"onPrimary\" />.\n              </div>\n            }\n          >\n            <div style={{ position: \"relative\", top: \"25%\" }} />\n          </Tooltip>\n        ),\n        description: \"Add links inline and in the same color of the text.\"\n      },\n      negative: {\n        component: (\n          <Tooltip\n            shouldShowOnMount\n            title=\"I'm a rich tooltip\"\n            open\n            content={\n              <div>\n                I have a title, text, image and I can come with a link. <Link text=\"Read more\" />\n              </div>\n            }\n          >\n            <div style={{ position: \"relative\", top: \"25%\" }} />\n          </Tooltip>\n        ),\n        description: \"Don't add links on a separate line or in a different color from the text.\"\n      }\n    },\n    {\n      positive: {\n        component: (\n          <Tooltip\n            content=\"Empower users to visualize data.\"\n            shouldShowOnMount\n            image={image}\n            position=\"right\"\n            open\n          >\n            <div style={{ position: \"relative\", left: \"-25%\" }} />\n          </Tooltip>\n        ),\n        description: \"Use this app to visualize data.\"\n      },\n      negative: {\n        component: (\n          <Tooltip\n            content=\"View our automation center.\"\n            shouldShowOnMount\n            image={image}\n            position=\"right\"\n            open\n          >\n            <div style={{ position: \"relative\", left: \"-25%\" }} />\n          </Tooltip>\n        ),\n        description: \"Don't add an image just for aesthetic reasons, or if it doesn't help the user.\"\n      }\n    }\n  ]}\n/>\n\n## Use cases and examples\n\n### Icon tooltip\n\nAn icon tooltip is used to clarify the action or name of an interactive icon button. Provide tooltips for all unlabelled icons.\n\n<Canvas of={TooltipStories.IconTooltip} />\n\n### Definition tooltip\n\nThe definition tooltip provides additional help or defines an item or term. It may be used on the label of a UI element, or on a word embedded in a paragraph.\n\n<Canvas of={TooltipStories.DefinitionTooltip} />\n\n### Immediate tooltips\n\nImmediately show when another is shown. The two left tooltips uses the immediate show prop, the right one ignores it and should always have show delay.\n\n<Canvas of={TooltipStories.ImmediateTooltips} />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Chips\", \"Label\", \"Tipseen\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/Tooltip/Tooltip.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const TipOtherComponents = () => (\n  <Tip>\n    As tooltips only surface from a hover, never include links or buttons in the copy. If your tooltip requires either\n    of these, considers putting your content in a{\" \"}\n    <StorybookLink page=\"Components/AttentionBox\" size=\"small\">\n      Attention box\n    </StorybookLink>{\" \"}\n    or{\" \"}\n    <StorybookLink page=\"Components/Dialog\" size=\"small\">\n      Dialog.\n    </StorybookLink>\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/Tooltip/Tooltip.stories.tsx",
    "content": "import React from \"react\";\nimport { Tooltip, type TooltipProps, Button, Flex, IconButton } from \"@vibe/core\";\nimport { Hide, Menu, Subitems } from \"@vibe/icons\";\nimport { shift, flip } from \"@floating-ui/react-dom\";\nimport image from \"./assets/tooltip-image.png\";\nimport { createStoryMetaSettingsDecorator } from \"../../../utils/createStoryMetaSettingsDecorator\";\n\n// Middleware to prevent the tooltip from being displaced when the user scrolls the story.\n// Not needed in real implementations.\nconst storyMiddleware = [shift({ mainAxis: false }), flip({ fallbackPlacements: [] })];\n\nconst metaSettings = createStoryMetaSettingsDecorator({\n  component: Tooltip,\n  iconPropNamesArray: [\"icon\"]\n});\n\nexport default {\n  title: \"Components/Tooltip\",\n  component: Tooltip,\n  argTypes: metaSettings.argTypes,\n  decorators: metaSettings.decorators\n};\n\nexport const Overview = {\n  render: (args: TooltipProps) => (\n    <div style={{ padding: \"40px 0 0 50px\" }}>\n      <Tooltip\n        id=\"overview-tooltip\"\n        {...args}\n        open\n        middleware={storyMiddleware}\n        hideWhenReferenceHidden\n      >\n        <div id=\"overview-tooltip-trigger\" />\n      </Tooltip>\n    </div>\n  ),\n  name: \"Overview\",\n  args: {\n    shouldShowOnMount: true,\n    content: \"I'm a tooltip\"\n  },\n  parameters: {\n    chromatic: {\n      pauseAnimationAtEnd: true\n    }\n  }\n};\n\nexport const TooltipWithTitle = () => (\n  <div style={{ padding: \"30px 0\" }}>\n    <Tooltip\n      id=\"tooltip-with-title\"\n      content=\"Hidden columns\"\n      title=\"Tooltip title\"\n      shouldShowOnMount\n      position=\"right\"\n      middleware={storyMiddleware}\n      hideWhenReferenceHidden\n      open\n    >\n      <div id=\"tooltip-with-title-trigger\" />\n    </Tooltip>\n  </div>\n);\n\nexport const TooltipWithImage = () => (\n  <div style={{ padding: \"120px 0\" }}>\n    <Tooltip\n      id=\"tooltip-with-image\"\n      content=\"Max width tooltip with a long text example\"\n      title=\"Tooltip title\"\n      shouldShowOnMount\n      image={image}\n      position=\"right\"\n      middleware={storyMiddleware}\n      hideWhenReferenceHidden\n      style={{ minHeight: \"135px\" }}\n      open\n    >\n      <div id=\"tooltip-with-image-trigger\" />\n    </Tooltip>\n  </div>\n);\n\nexport const Positions = {\n  render: () => {\n    return (\n      <Flex gap={16}>\n        <div style={{ padding: \"0 64px 68px 0\", margin: \"0 32px\" }}>\n          <Tooltip\n            id=\"position-top-tooltip\"\n            middleware={storyMiddleware}\n            hideWhenReferenceHidden\n            content=\"Top\"\n            shouldShowOnMount\n            position=\"bottom\"\n            open\n          >\n            <div />\n          </Tooltip>\n        </div>\n        <div style={{ padding: \"50px 0 0 0\", margin: \"0 32px\" }}>\n          <Tooltip\n            id=\"position-bottom-tooltip\"\n            middleware={storyMiddleware}\n            hideWhenReferenceHidden\n            content=\"Bottom\"\n            shouldShowOnMount\n            open\n          >\n            <div />\n          </Tooltip>\n        </div>\n        <div style={{ padding: \"0 32px 8px 32px\", margin: \"0 32px\" }}>\n          <Tooltip\n            id=\"position-left-tooltip\"\n            middleware={storyMiddleware}\n            hideWhenReferenceHidden\n            content=\"Left\"\n            position=\"right\"\n            shouldShowOnMount\n            open\n          >\n            <div />\n          </Tooltip>\n        </div>\n        <div style={{ padding: \"0 64px 8px 64px\", margin: \"0 64px\" }}>\n          <Tooltip\n            id=\"position-right-tooltip\"\n            middleware={storyMiddleware}\n            hideWhenReferenceHidden\n            content=\"Right\"\n            position=\"left\"\n            shouldShowOnMount\n            open\n          >\n            <div />\n          </Tooltip>\n        </div>\n      </Flex>\n    );\n  },\n  name: \"Positions\",\n  parameters: {\n    chromatic: {\n      pauseAnimationAtEnd: true\n    }\n  }\n};\n\nexport const IconTooltip = () => (\n  <Tooltip id=\"icon-tooltip\" hideWhenReferenceHidden content=\"Hidden columns\">\n    <IconButton id=\"icon-tooltip-trigger\" aria-label=\"Hide columns\" kind=\"secondary\" size=\"small\" icon={Hide} />\n  </Tooltip>\n);\n\nexport const DefinitionTooltip = () => (\n  <Tooltip id=\"definition-tooltip\" hideWhenReferenceHidden content=\"Item name: Bottom sheets\">\n    <Button id=\"definition-tooltip-trigger\" aria-label=\"View subitems\" kind=\"secondary\" size=\"small\" leftIcon={Subitems}>\n      Subitem\n    </Button>\n  </Tooltip>\n);\n\nexport const ImmediateTooltips = () => (\n  <Flex gap=\"small\">\n    <Tooltip id=\"immediate-tooltip-1\" hideWhenReferenceHidden immediateShowDelay={0} content=\"I'm a tooltip\">\n      <IconButton id=\"immediate-trigger-1\" aria-label=\"Menu button 1\" icon={Menu} kind=\"secondary\" size=\"small\" />\n    </Tooltip>\n    <Tooltip id=\"immediate-tooltip-2\" hideWhenReferenceHidden immediateShowDelay={0} content=\"I'm a tooltip\">\n      <IconButton id=\"immediate-trigger-2\" aria-label=\"Menu button 2\" icon={Menu} kind=\"secondary\" size=\"small\" />\n    </Tooltip>\n    <Tooltip id=\"immediate-tooltip-3\" hideWhenReferenceHidden content=\"I'm a tooltip\">\n      <IconButton id=\"immediate-trigger-3\" aria-label=\"Menu button 3\" icon={Menu} kind=\"secondary\" size=\"small\" />\n    </Tooltip>\n  </Flex>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/VirtualizedGrid/VirtualizedGrid.mdx",
    "content": "import { Canvas, Meta } from \"@storybook/blocks\";\nimport { UsageGuidelines } from \"vibe-storybook-components\";\nimport * as VirtualizedGridStories from \"./VirtualizedGrid.stories\";\n\n<Meta of={VirtualizedGridStories} />\n\n# VirtualizedGrid\n\nVirtualizedGrid is a component which only renders visible grid items, it is a logic component and doesn't change and look and feel\n\nUnder the hood we are using - [react-window](https://github.com/bvaughn/react-window) and [react-virtualized-auto-sizer](https://github.com/bvaughn/react-virtualized-auto-sizer)\n\n<Canvas of={VirtualizedGridStories.Overview} />\n\n### Import\n\n```js\nimport { VirtualizedGrid } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Use this component to implement a grid with many items or when each item render has heavy calculations.\",\n    \"Rendering only the visible grid items instead of all the grid's items will create better performance and a smoother experience for users while using the grid.\"\n  ]}\n/>\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Table\", \"VirtualizedList\", \"MenuGridItem\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/VirtualizedGrid/VirtualizedGrid.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { Text, type VirtualizedGridItemType } from \"@vibe/core\";\n\nexport const generateItems = (height = 30, width: number, itemsCount: number): VirtualizedGridItemType[] => {\n  const items: VirtualizedGridItemType[] = [];\n  for (let i = 0; i < itemsCount; i++) {\n    items.push({ value: `Item ${i}`, height, width, id: i.toString() });\n  }\n  return items;\n};\n\nexport const itemRenderer = (item: VirtualizedGridItemType, index: number, style: React.CSSProperties) => {\n  if (item) {\n    const backgroundColor = index % 2 === 0 ? \"#e1e1e1\" : \"#f8f8f0\";\n    return (\n      <div key={index} style={style}>\n        <Text\n          color=\"fixedDark\"\n          style={{\n            backgroundColor,\n            height: item.height,\n            width: item.width,\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\"\n          }}\n        >\n          {item.value}\n        </Text>\n      </div>\n    );\n  }\n  return <div key={index} style={style} />;\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/VirtualizedGrid/VirtualizedGrid.stories.tsx",
    "content": "import React, { useCallback, useMemo, useState } from \"react\";\nimport { VirtualizedGrid, type VirtualizedGridProps } from \"@vibe/core\";\nimport { Button, Flex } from \"@vibe/core\";\nimport { generateItems, itemRenderer } from \"./VirtualizedGrid.stories.helpers\";\n\nexport default {\n  title: \"Components/VirtualizedGrid\",\n  component: VirtualizedGrid\n};\n\nconst ITEMS_COUNT = 100;\n\nconst virtualizedGridTemplate = (args: VirtualizedGridProps) => {\n  const [scrollToId, setScrollToId] = useState(null);\n  const [lastScrolledId, setLastScrolledId] = useState(null);\n  const [scrollToDisabled, setScrollToDisabled] = useState(false);\n  const [nextScrollToId, setNextScrollToId] = useState(ITEMS_COUNT - 1);\n  const getColumnWidth = useCallback(() => {\n    return 100;\n  }, []);\n  const getRowHeight = useCallback(() => {\n    return 50;\n  }, []);\n  const items = useMemo(() => {\n    return generateItems(50, 100, ITEMS_COUNT);\n  }, []);\n  const onClickToScroll = useCallback(() => {\n    setScrollToId(nextScrollToId);\n    setLastScrolledId(\"\");\n    setScrollToDisabled(true);\n  }, [setScrollToId, setScrollToDisabled, nextScrollToId]);\n  const onScrollToFinished = useCallback(() => {\n    setLastScrolledId(nextScrollToId);\n    setScrollToId(null);\n    setNextScrollToId(Math.round(Math.random() * items.length));\n    setScrollToDisabled(false);\n  }, [nextScrollToId, items, setNextScrollToId, setLastScrolledId]);\n  return (\n    <Flex align=\"center\" style={{ width: 430, height: 300, overflow: \"hidden\" }}>\n      <div style={{ width: \"430px\", height: \"100%\" }}>\n        <VirtualizedGrid\n          scrollToId={scrollToId}\n          items={items}\n          itemRenderer={itemRenderer}\n          getColumnWidth={getColumnWidth}\n          getRowHeight={getRowHeight}\n          onScrollToFinished={onScrollToFinished}\n          {...args}\n        />\n      </div>\n      <Flex direction=\"column\" align=\"center\">\n        <Button size=\"medium\" kind=\"primary\" onClick={onClickToScroll} disabled={scrollToDisabled}>\n          {`Scroll to Item ${nextScrollToId}`}\n        </Button>\n        <div style={{ marginTop: 16, opacity: lastScrolledId ? 1 : 0 }}>{`Scrolled to Item ${lastScrolledId}`}</div>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport const Overview = {\n  render: virtualizedGridTemplate.bind({}),\n  name: \"Overview\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/components/VirtualizedList/VirtualizedList.mdx",
    "content": "import { Canvas, Meta } from \"@storybook/blocks\";\nimport { UsageGuidelines } from \"vibe-storybook-components\";\nimport { TipItemRenderer } from \"./VirtualizedList.stories.helpers\";\nimport * as VirtualizedListStories from \"./VirtualizedList.stories\";\n\n<Meta of={VirtualizedListStories} />\n\n# VirtualizedList\n\nVirtualizedList is a component which only renders visible list items, it is a logic component and doesn't change and look and feel\n\nThe VirtualizedList can be Vertical or Horizontal\n\nUnder the hood we are using - [react-window](https://github.com/bvaughn/react-window) and [react-virtualized-auto-sizer](https://github.com/bvaughn/react-virtualized-auto-sizer)\n\n<Canvas of={VirtualizedListStories.Overview} />\n\n### Import\n\n```js\nimport { VirtualizedList } from \"@vibe/core\";\n```\n\n## Props\n\n<PropsTable />\n\n## Usage\n\n<UsageGuidelines guidelines={[\"Use this when you expect to have many items in your list\"]} />\n\n<TipItemRenderer />\n\n## Related components\n\n<RelatedComponents componentsNames={[\"List\", \"VirtualizedGrid\", \"Table\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/components/VirtualizedList/VirtualizedList.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { Tip } from \"vibe-storybook-components\";\nimport { type VirtualizedListItem } from \"../VirtualizedList.types\";\n\nexport const generateItems = (defaultItemSize = 30, itemsCount: number, layout: string) => {\n  const items: VirtualizedListItem[] = [];\n  const isVertical = layout !== \"horizontal\";\n\n  for (let i = 0; i < itemsCount; i++) {\n    const width = (i > 0 && i % 15) === 0 ? defaultItemSize * 2 : defaultItemSize;\n    items.push({ value: `Item ${i}`, width, id: i.toString(), height: isVertical ? width : 30 });\n  }\n\n  return items;\n};\n\nexport const TipItemRenderer: React.FC = () => (\n  <Tip title=\"Are your list items not rendered correctly?\">\n    Please make sure you inject the style parameter of the <code>itemRenderer</code> function to the item {\"element's\"}\n    wrapper style.\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/components/VirtualizedList/VirtualizedList.stories.tsx",
    "content": "import React, { useCallback } from \"react\";\nimport { VirtualizedList, Flex, type VirtualizedListItem, Heading } from \"@vibe/core\";\nimport { generateItems } from \"./VirtualizedList.stories.helpers\";\n\nexport default {\n  title: \"Components/VirtualizedList\",\n  component: VirtualizedList\n};\n\nconst virtualizedListTemplate = (args: VirtualizedListItem) => {\n  const itemRenderer = useCallback((item: VirtualizedListItem, index: number, style: React.CSSProperties) => {\n    const backgroundColor = index % 2 === 0 ? \"#e1e1e1\" : \"#f8f8f0\";\n    return (\n      <div key={index} style={style}>\n        <Flex\n          align=\"center\"\n          justify=\"center\"\n          style={{\n            backgroundColor,\n            height: item.height\n          }}\n        >\n          {item.value as React.ReactNode}\n        </Flex>\n      </div>\n    );\n  }, []);\n  return (\n    <Flex align=\"start\" gap=\"large\" style={{ width: \"100%\" }} direction=\"row\">\n      <Flex\n        align=\"center\"\n        style={{\n          width: 330,\n          height: 300,\n          overflow: \"hidden\"\n        }}\n      >\n        <div style={{ width: 200, height: \"100%\" }}>\n          <Heading type=\"h3\">Vertical List</Heading>\n          <VirtualizedList\n            {...args}\n            items={generateItems(30, 1000, \"vertical\")}\n            itemRenderer={itemRenderer}\n            getItemSize={item => item.height}\n          />\n        </div>\n      </Flex>\n      <Flex\n        align=\"center\"\n        style={{\n          flexGrow: 1,\n          height: 300,\n          overflow: \"hidden\"\n        }}\n      >\n        <div style={{ height: \"100%\", width: \"100%\" }}>\n          <Heading type=\"h3\">Horizontal List</Heading>\n          <VirtualizedList\n            {...args}\n            items={generateItems(100, 1000, \"horizontal\")}\n            itemRenderer={itemRenderer}\n            getItemSize={item => item.width}\n            layout=\"horizontal\"\n          />\n        </div>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport const Overview = {\n  render: virtualizedListTemplate.bind({}),\n  name: \"Overview\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/contributing/contributing.mdx",
    "content": "import { Meta, Markdown } from \"@storybook/blocks\";\nimport contributing from \"../../../../../CONTRIBUTING.md?raw\";\n\n<Meta title=\"Contributing\" />\n\n# Contribution Guide\n\n<Markdown>{contributing.replace(\"# Contribution Guide\", \"\")}</Markdown>\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/accessibility/accessibility.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { Frame, UnstyledList, UnstyledListItem } from \"vibe-storybook-components\";\nimport { PrinciplesAccesability } from \"./principles/principlesAccesability\";\nimport {\n  colorContrastImage,\n  colorContrastText,\n  hierarchyOrder,\n  imageryAlt,\n  imageryDecorative,\n  imageryDescriptive,\n  navigationFocus,\n  navigationTabs\n} from \"./assets\";\nimport { TipChecklistLink, TipColorContrast, TipTabNavigation } from \"./accessibility.stories.helpers\";\nimport styles from \"./accessibility.stories.module.scss\";\n\n<Meta title=\"Foundations/Accessibility\" />\n\n# Accessibility\n\n- [Intro](#intro)\n- [Accessibility principles](#accessibility-principles)\n- [Color contrast](#color-contrast)\n- [Imagery](#imagery)\n- [Hierarchy and focus](#hierarchy-and-focus)\n- [Navigation](#navigation)\n- [Assistive Technology](#assistive-technology)\n- [Feedback](#feedback)\n\n## Intro\n\nWeb Accessibility is focused on ensuring people with disabilities can equally perceive, understand, navigate, and interact with digital content. It also means that they can contribute equally like anyone else.\nWeb Accessibility is based on guidelines published by The World Wide Web Consortium (W3C) for accessible content called Web Content Accessibility Guidelines or WCAG.\n\n[WCAG Quick Reference](https://www.w3.org/WAI/WCAG21/quickref/?currentsidebar=%23col_customize#principle1)\n\n<TipChecklistLink />\n\n## Accessibility principles\n\n<PrinciplesAccesability />\n\n## Color contrast\n\n### Text Color Contrast\n\nApplies to text in the page, including placeholder text, hover text and text shown on keyboard focus.\nThe visual presentation of text and images should have a contrast ratio of at least 4.5:1 with the background\n\n<Frame noBorder noGutter>\n  <img src={colorContrastText} alt=\"example for text color contrast\" className={styles.image} />\n</Frame>\n\nExcept for:\n\n<UnstyledList>\n  <UnstyledListItem>\n    Large Text - at least 18pt (typically 24px) or 14pt (typically 18.66px) and bold must have a contrast ratio of at\n    least 3:1\n  </UnstyledListItem>\n  <UnstyledListItem>\n    Incidental - inactive user interface (disabled items), decorative (icons, Illustartions) non-visible, insignificant\n    part of a picture\n  </UnstyledListItem>\n  <UnstyledListItem>Logotypes - Text that is part of a logo or brand name</UnstyledListItem>\n</UnstyledList>\n\n### Non-Text Color Contrast\n\nThe visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color\n\n<Frame noBorder noGutter>\n  <img src={colorContrastImage} alt=\"example for non text color contrast\" className={styles.image} />\n</Frame>\n\nUI Components - Visual information required to identify active UI components and states, including borders for input elements (text input, radio buttons, checkboxes, etc.) as well as Focus Indicator (visible focus around active elements when they receive keyboard focus)<br />\nGraphical Objects - Parts of graphics required to understand the content\n\n<TipColorContrast />\n\n## Imagery\n\nPeople with vision impairments or difficulties reading rely on text alternatives for most of the visual content.\n\n<Frame noBorder noGutter>\n  <img src={imageryAlt} alt=\"example for an accessible image\" className={styles.image} />\n</Frame>\n\nNote: Alternative text is very important since it is adaptable. Assistive technology can convey this content to the user in different ways: visually, enlarged, spoken aloud, and rendered in a tactile form.\n\n### Information Images\n\nAre all images that convey important information and communicate information visually:\n\n<UnstyledList>\n  <UnstyledListItem>The alt-text needs to convey the same information as the image</UnstyledListItem>\n  <UnstyledListItem>Ensure the alt-text is short and appropriate to the context</UnstyledListItem>\n  <UnstyledListItem>\n    If the same information already is present as text on the screen, the image becomes decorative\n  </UnstyledListItem>\n  <UnstyledListItem>Do not use the words like \"graphic\", \"An image of\", \"A picture of\", \"an icon of\"</UnstyledListItem>\n</UnstyledList>\n\n<Frame className=\"monday-storybook-frame--no-border monday-storybook-frame--no-gutter\">\n  <img src={imageryDescriptive} alt=\"example for an accessible information within image src\" className={styles.image} />\n</Frame>\n\n### Decorative Images\n\nSuch as borders, empty states, background ambience images:\n\n<UnstyledList>\n  <UnstyledListItem>Do not convey information</UnstyledListItem>\n  <UnstyledListItem>Should be ignored by the screen reader</UnstyledListItem>\n  <UnstyledListItem>Can be defined as background image in the stylesheet</UnstyledListItem>\n  <UnstyledListItem>Should use `role=\"presentation\"`</UnstyledListItem>\n</UnstyledList>\n\n<Frame noBorder noGutter>\n  <img src={imageryDecorative} alt=\"example decorative image\" role=\"presentation\" className={styles.image} />\n</Frame>\n\n## Hierarchy and focus\n\n### Reading Order\n\nThe reading and navigation order is determined by code order<br />\nThe reading order must be logical and intuitive.<br />\nWe arrange the order of the elements within the HTML so that the reading order follows the same order as the visual presentation of the screen.\n\n<Frame noBorder noGutter>\n  <img src={hierarchyOrder} alt=\"example decorative image\" role=\"presentation\" className={styles.image} />\n</Frame>\n\n### Semantic Markup\n\nSemantic markup is used to define: Headings, Regions/Landmarks, Lists, Emphasized or special text, Tables and\nText labels & form group labels\n\n### Headings\n\nHeadings communicate the structure of the content on the page. Assistive technologies users can use them as in-page navigation elements.\n\n<UnstyledList>\n  <UnstyledListItem>Arrange the headings on the page according to their level (`H1...H6`).</UnstyledListItem>\n  <UnstyledListItem>The most important heading on the page is heading level 1 (`H1`).</UnstyledListItem>\n  <UnstyledListItem>Only one heading level 1 `H1` is allowed on a page.</UnstyledListItem>\n  <UnstyledListItem>\n    Headings should be placed at the start of new sections of content not for decoration\n  </UnstyledListItem>\n  <UnstyledListItem>\n    void skipping heading levels. Ensure that a heading level 1 `H1` is not followed directly by an `H3`, for example.\n  </UnstyledListItem>\n</UnstyledList>\n\n## Navigation\n\n### Keyboard Access\n\nAll active elements that can be activated with a mouse have to be operable by keyboard, or have a keyboard equivalent.<br />\nDynamic components such as dialogs, not initially in the tab order must also receive keyboard focus.<br />\nElements that show content on mouse hover needs to be added to the tab-order and be operable with the keyboard.<br />\nIn your design, annotate the tab-order and number the tab stops.\n\n<Frame noBorder noGutter>\n  <img src={navigationTabs} alt=\"example for keyboard navigation\" role=\"presentation\" className={styles.image} />\n</Frame>\n\n### Focus Management\n\nKeyboard navigation in a rich internet application is different from tabbing in a website.<br />\nIn rich internet applications, users tab to complex components such as comboboxes, grids, menus etc. then use the arrow keys to navigate within the component.<br />\nDynamic components such as dialogs, not initially in the tab order have to receive keyboard focus.<br />\nWhen dynamic components are closed, focus shifts back to the point where interaction started.<br />\nReceiving focus or interacting with an input element must not result in a substantial change to the page like invoking a dialog or sending focus somewhere else on the page.\n\n<TipTabNavigation />\n\n### Focus Visible\n\nProvide a visible focus indicator to mark currently focused active elements.<br />\nAs keyboard users tab through the page, they can see where they are.\n\n<Frame noBorder noGutter>\n  <img\n    src={navigationFocus}\n    alt=\"example for an accessible navigational focus\"\n    role=\"presentation\"\n    className={styles.image}\n  />\n</Frame>\n\n## Assistive Technology\n\nSoftware and hardware that people with disabilities use to interact with digital content.\nA screen reader is a piece of software that makes digital content accessible to blind people. The software converts text to speach and helps blind people navigate and understand the content on the page.\nThe screen reader reads the DOM (Document Object Model) and transfers it into a Virtual Buffer (acts like a word document).\n\nScreen reader users navigate the virtual buffer in Virtual Mode or Browse Mode:\n\n<UnstyledList>\n  <UnstyledListItem>\n    With shortcut keys like H for the next heading, E for the next editable field, B for the next button, etc..\n  </UnstyledListItem>\n  <UnstyledListItem>With the keyboard arrow keys. The navigation is object by object.</UnstyledListItem>\n</UnstyledList>\n\nScreen reader users navigate the virtual buffer in Input Mode or Forms Mode:\n\n<UnstyledList>\n  <UnstyledListItem>The standard mode in which the users will type letters via the keyboard.</UnstyledListItem>\n</UnstyledList>\n\nFor example:\n\n<UnstyledList>\n  <UnstyledListItem>\n    Screen readers that read aloud web content for people who cannot read the text, usually blind people and people with\n    cognitive impairmants. For example: JAWS and NVDA on windows machines, VoiceOver for MacOS.\n  </UnstyledListItem>\n  <UnstyledListItem>Screen magnifiers for people with low vision. For example: Zoomtext</UnstyledListItem>\n  <UnstyledListItem>\n    Voice recognition software and selection switches for people who cannot use a keyboard or a mouse. For example:\n    Dragon Naturally Speaking\n  </UnstyledListItem>\n</UnstyledList>\n\n## Up next\n\n<RelatedComponents componentsNames={[\"colors\", \"typography\", \"HiddenText\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/accessibility/accessibility.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { Link, Tip } from \"vibe-storybook-components\";\nimport { accessibilityCheckList } from \"./assets\";\n\nexport const TipChecklistLink = () => (\n  <Tip title=\"Get our Accessibility checklist\">\n    <Link href={accessibilityCheckList} size=\"small\">\n      Download\n    </Link>\n    our accessibility checklist file.\n  </Tip>\n);\n\nexport const TipColorContrast = () => (\n  <Tip title=\"Use color contrast tools for code and design\">\n    <div>\n      To check color contrast in design use\n      <Link href=\"https://www.figma.com/community/plugin/748533339900865323/Contrast\" size=\"small\">\n        contrast figma plugin\n      </Link>\n      and inspect elements accessibility tab for live code verification\n    </div>\n  </Tip>\n);\n\nexport const TipTabNavigation = () => (\n  <Tip title=\"We got you covered with tab navigation\">\n    Use this keyboard navigation infra in any UI that requires it.\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/accessibility/accessibility.stories.module.scss",
    "content": ".image {\n  width: 100%;\n}\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/accessibility/assets/index.ts",
    "content": "import accessibilityCheckList from \"./accessibility-check-list.pdf\";\nimport colorContrastImage from \"./color-contrast_image.png\";\nimport colorContrastText from \"./color-contrast_text.png\";\nimport hierarchyOrder from \"./hierarchy_order.png\";\nimport imageryDecorative from \"./imagery_decorative.png\";\nimport imageryDescriptive from \"./imagery_descriptive.png\";\nimport imageryAlt from \"./imagery_alt.png\";\nimport navigationFocus from \"./navigation_focus-visible.png\";\nimport navigationTabs from \"./navigation_tabs.png\";\nimport principleClarity from \"./principle_clarity.png\";\nimport principleDelight from \"./principle_delight.png\";\nimport principleIntuative from \"./principle_Intutative.png\";\nimport principleSpeed from \"./principle_speed.png\";\n\nexport {\n  accessibilityCheckList,\n  colorContrastImage,\n  colorContrastText,\n  hierarchyOrder,\n  imageryDecorative,\n  imageryDescriptive,\n  imageryAlt,\n  navigationFocus,\n  navigationTabs,\n  principleClarity,\n  principleDelight,\n  principleIntuative,\n  principleSpeed\n};\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/accessibility/principles/principle.scss",
    "content": ".monday-storybook-principle {\n  &_visual-element {\n    background-color: var(--sb-color-purple);\n    border-radius: var(--sb-border-radius-small);\n    width: 100%;\n    height: 174px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/accessibility/principles/principle.tsx",
    "content": "import React from \"react\";\nimport { InformationBox } from \"vibe-storybook-components\";\nimport \"./principle.scss\";\n\nconst PRINCIPLE_VISUAL_ELEMENT = `monday-storybook-principle`;\n\ninterface PrincipleProps {\n  imgSrc: string;\n  title: string;\n  description: string;\n}\n\nexport const Principle = ({ imgSrc, title, description }: PrincipleProps) => {\n  const principleVisualElement = <img className={`${PRINCIPLE_VISUAL_ELEMENT}_visual-element`} src={imgSrc} alt=\"\" />;\n  return <InformationBox component={principleVisualElement} title={title} description={description} />;\n};\n\nexport default Principle;\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/accessibility/principles/principlesAccesability.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n$principles-cell-min-width: $grid-auto-fit-cell-width-medium;\n$principles-column-gap: var(--sb-spacing-large);\n$principles-row-gap: var(--sb-spacing-xxxl);\n$principles-grid-cell-array-calc: calc(25% - #{$principles-column-gap});\n\n.monday-storybook-principles {\n  margin-top: var(--sb-spacing-between-section-items);\n\n  @include grid-auto-fit(\n    $grid-column-gap: $principles-column-gap,\n    $grid-row-gap: $principles-row-gap,\n    $grid-cell-min-width: $principles-cell-min-width,\n    $grid-cell-array-calc: $principles-grid-cell-array-calc\n  );\n\n  * img {\n    object-fit: cover;\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/accessibility/principles/principlesAccesability.tsx",
    "content": "import React from \"react\";\nimport { principleClarity, principleSpeed, principleIntuative, principleDelight } from \"../assets\";\nimport { Principle } from \"./principle\";\nimport \"./principlesAccesability.scss\";\n\nconst BASE_CLASS = \"monday-storybook-principles\";\n\nexport const PrinciplesAccesability = () => (\n  <div className={BASE_CLASS}>\n    <Principle\n      imgSrc={principleClarity}\n      title=\"Clear\"\n      description=\"Create clear information and design components that will be easy to perceive to all users' senses.\"\n    />\n    <Principle\n      imgSrc={principleSpeed}\n      title=\"Operable\"\n      description=\"Design components and elements that users would be able to use with a keyboard or a keyboard equivalent.\"\n    />\n    <Principle\n      imgSrc={principleIntuative}\n      title=\"Understandable\"\n      description=\"Use simple language and design an easy to use interface that can be understood by all users.\"\n    />\n    <Principle\n      imgSrc={principleDelight}\n      title=\"Robust\"\n      description=\"Create robust content that can accommodate a wide variety of users.\"\n    />\n  </div>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/colors/Colors.mdx",
    "content": "import { Meta, Canvas, Story } from \"@storybook/blocks\";\nimport { Frame } from \"vibe-storybook-components\";\nimport { SemanticColors } from \"./semantic-colors/semantic-colors\";\nimport { BackgroundColors } from \"./background-colors/background-colors\";\nimport { TextColors } from \"./text-colors/text-colors\";\nimport { BorderColors } from \"./border-colors/border-colors\";\nimport { ContentColors } from \"./content-colors/content-colors\";\nimport { cardColorsExample, menuColorsExample } from \"./assets\";\nimport * as ColorsStories from \"./colors.stories\";\nimport styles from \"./colors.module.scss\";\n\n<Meta of={ColorsStories} />\n\n# Colors\n\nmonday.com tool is very visual and our color system helps users identify status, see actions, locate help, and to indicate next steps.\nThe consistent use of color in our product keeps cognitive loads low, and makes for a unified and engaging user experience.\nThe colors are designed to be clear and accessible. They come in three color themes.\n\n## Color keys\n\n### Semantic colors\n\n<Canvas of={ColorsStories.Semantic} sourceState=\"none\" />\n\n### Background colors\n\n<Canvas of={ColorsStories.Background} sourceState=\"none\" />\n\n### Text colors\n\n<Canvas of={ColorsStories.Text} sourceState=\"none\" />\n\n### Border colors\n\n<Canvas of={ColorsStories.Border} sourceState=\"none\" />\n\n### Content colors\n\nThese colors are used only for color coding purposes like groups colors, statuses timeline bars etc..\nthis gives understanding and indication of orientation and belonging.\nThe board's main strength is its simple and visual appearance. That's why the status colors should appear on the board and nowhere else in the UI.\n\n<Canvas of={ColorsStories.Content} sourceState=\"none\" />\n\n## Usage and examples\n\n### Menu\n\n<Frame className={styles[\"colors-example-frame\"]}>\n  <img className={styles[\"menu-colors-example-img\"]} src={menuColorsExample} alt=\"\" />\n</Frame>\n\n### Card\n\n<Frame className={styles[\"colors-example-frame\"]}>\n  <img className={styles[\"card-colors-example-img\"]} src={cardColorsExample} alt=\"\" />\n</Frame>\n\n## Up next\n\n<RelatedComponents componentsNames={[\"typography\", \"shadow\", \"spacing\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/colors/assets/index.ts",
    "content": "import cardColorsExample from \"./cardColorsExample.png\";\nimport menuColorsExample from \"./menuColorsExample.png\";\n\nexport { cardColorsExample, menuColorsExample };\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/colors/background-colors/background-colors.tsx",
    "content": "import React from \"react\";\nimport ColorsDescription from \"../colors-description/colors-description\";\n\nconst colorKeys = [\n  \"primary-background-color\",\n  \"secondary-background-color\",\n  \"primary-background-hover-color\",\n  \"inverted-color-background\",\n  \"grey-background-color\",\n  \"allgrey-background-color\",\n  \"ui-background-color\"\n];\n\nexport const BackgroundColors = () => <ColorsDescription colorNames={colorKeys} />;\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/colors/border-colors/border-colors.tsx",
    "content": "import React from \"react\";\nimport ColorsDescription from \"../colors-description/colors-description\";\n\nconst colorKeys = [\"ui-border-color\", \"layout-border-color\"];\n\nexport const BorderColors = () => <ColorsDescription colorNames={colorKeys} />;\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/colors/colors-description/colors-description.tsx",
    "content": "import React, { useMemo } from \"react\";\nimport { ColorDescription } from \"vibe-storybook-components\";\nimport { colorsHashMap } from \"@vibe/shared\";\n\nconst colorsWithBorder = new Set([\n  \"text-color-on-inverted\",\n  \"text-color-on-primary\",\n  \"fixed-light-color\",\n  \"text-color-on-brand\",\n  \"primary-background-color\",\n  \"secondary-background-color\"\n]);\n\ninterface ColorsDescriptionProps {\n  colorNames: string[];\n}\n\nexport const ColorsDescription: React.FC<ColorsDescriptionProps> = ({ colorNames }) => {\n  const descriptions = useMemo(\n    () =>\n      colorNames.map((color: string) => (\n        <ColorDescription\n          key={color}\n          colorName={color}\n          description={colorsHashMap.get(color)}\n          withBorder={colorsWithBorder.has(color)}\n        />\n      )),\n    [colorNames]\n  );\n  return <div>{descriptions}</div>;\n};\n\nexport default ColorsDescription;\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/colors/colors.module.scss",
    "content": ".colors-example-frame {\n  display: flex;\n  justify-content: center;\n}\n\n.content-colors-table {\n  width: 80%;\n}\n\n.card-colors-example-img {\n  width: 679px;\n}\n.menu-colors-example-img {\n  width: 699px;\n}"
  },
  {
    "path": "packages/docs/src/pages/foundations/colors/colors.stories.tsx",
    "content": "import { type Meta, type StoryObj } from \"@storybook/react\";\nimport { SemanticColors } from \"./semantic-colors/semantic-colors\";\nimport { BackgroundColors } from \"./background-colors/background-colors\";\nimport TextColors from \"./text-colors/text-colors\";\nimport { BorderColors } from \"./border-colors/border-colors\";\nimport { ContentColors } from \"./content-colors/content-colors\";\n\nconst meta: Meta = {\n  title: \"Foundations/Colors\"\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nexport const Semantic: Story = {\n  render: SemanticColors,\n  tags: [\"!dev\"]\n};\n\nexport const Background: Story = {\n  render: BackgroundColors,\n  tags: [\"!dev\"]\n};\n\nexport const Text: Story = {\n  render: TextColors,\n  tags: [\"!dev\"]\n};\n\nexport const Border: Story = {\n  render: BorderColors,\n  tags: [\"!dev\"]\n};\n\nexport const Content: Story = {\n  render: ContentColors,\n  tags: [\"!dev\"]\n};\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/colors/content-color-cell/content-color-cell.module.scss",
    "content": ".content-colors-cell {\n  height: 40px;\n  width: 25%;\n  padding: 0;\n  margin: 0;\n}"
  },
  {
    "path": "packages/docs/src/pages/foundations/colors/content-color-cell/content-color-cell.tsx",
    "content": "import React, { type ReactNode, type CSSProperties } from \"react\";\nimport classes from \"./content-color-cell.module.scss\";\n\ninterface ContentColorCellProps {\n  children?: ReactNode;\n  style?: CSSProperties;\n}\n\nexport const ContentColorCell: React.FC<ContentColorCellProps> = ({ children, style }) => {\n  return (\n    <td className={classes[\"content-colors-cell\"]} style={style}>\n      {children}\n    </td>\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/colors/content-color-row/content-color-row.tsx",
    "content": "import React from \"react\";\nimport { useMemo } from \"react\";\nimport { ColorUtils } from \"@vibe/shared\";\nimport { ContentColorCell } from \"../content-color-cell/content-color-cell\";\nimport { Text } from \"@vibe/core\";\n\ninterface ContentColorRowProps {\n  colorName: string;\n}\n\nexport const ContentColorRow: React.FC<ContentColorRowProps> = ({ colorName }) => {\n  const regularStyle = useMemo(\n    () => ({\n      backgroundColor: ColorUtils.getMondayColorAsStyle(colorName, \"regular\")\n    }),\n    [colorName]\n  );\n  const hoverStyle = useMemo(\n    () => ({\n      backgroundColor: ColorUtils.getMondayColorAsStyle(colorName, \"hover\")\n    }),\n    [colorName]\n  );\n  const selectedStyle = useMemo(\n    () => ({\n      backgroundColor: ColorUtils.getMondayColorAsStyle(colorName, \"selected\")\n    }),\n    [colorName]\n  );\n\n  return (\n    <tr className=\"content-color-row\">\n      <ContentColorCell>\n        <Text>{`--color-${colorName}`}</Text>\n      </ContentColorCell>\n      <ContentColorCell style={regularStyle} />\n      <ContentColorCell style={hoverStyle} />\n      <ContentColorCell style={selectedStyle} />\n    </tr>\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/colors/content-colors/content-colors.module.scss",
    "content": ".content-colors-table {\n  width: 60%;\n  justify-self: center;\n}"
  },
  {
    "path": "packages/docs/src/pages/foundations/colors/content-colors/content-colors.tsx",
    "content": "import React from \"react\";\nimport { useMemo } from \"react\";\nimport { ContentColorRow } from \"../content-color-row/content-color-row\";\nimport { ContentColorByName } from \"@vibe/shared\";\nimport { ContentColorCell } from \"../content-color-cell/content-color-cell\";\nimport classes from \"./content-colors.module.scss\";\nimport { Text } from \"@vibe/core\";\n\nexport const ContentColors = () => {\n  const colorsCells = useMemo(\n    () => Object.values(ContentColorByName).map(colorName => <ContentColorRow key={colorName} colorName={colorName} />),\n    []\n  );\n\n  return (\n    <table className={classes[\"content-colors-table\"]} cellSpacing={1}>\n      <tr>\n        <ContentColorCell />\n        <ContentColorCell>\n          <Text>Default</Text>\n        </ContentColorCell>\n        <ContentColorCell>\n          <Text>Hover</Text>\n        </ContentColorCell>\n        <ContentColorCell>\n          <Text>Selected</Text>\n        </ContentColorCell>\n      </tr>\n      {colorsCells}\n    </table>\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/colors/semantic-colors/semantic-colors.tsx",
    "content": "import React from \"react\";\nimport ColorsDescription from \"../colors-description/colors-description\";\n\nconst colorKeys = [\n  \"primary-color\",\n  \"primary-hover-color\",\n  \"primary-selected-color\",\n  \"primary-selected-hover-color\",\n  \"primary-highlighted-color\",\n  \"primary-surface-color\",\n  \"positive-color\",\n  \"positive-color-hover\",\n  \"positive-color-selected\",\n  \"positive-color-selected-hover\",\n  \"negative-color\",\n  \"negative-color-hover\",\n  \"negative-color-selected\",\n  \"negative-color-selected-hover\",\n  \"warning-color\",\n  \"warning-color-hover\",\n  \"warning-color-selected\",\n  \"warning-color-selected-hover\",\n  \"inverted-color-background\",\n  \"icon-color\",\n  \"fixed-light-color\",\n  \"fixed-dark-color\"\n];\n\nexport const SemanticColors = () => <ColorsDescription colorNames={colorKeys} />;\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/colors/text-colors/text-colors.jsx",
    "content": "import React from \"react\";\nimport { useMemo } from \"react\";\nimport { ColorsDescription } from \"../colors-description/colors-description\";\n\nexport const TextColors = () => {\n  const colorKeys = useMemo(\n    () => [\n      \"primary-text-color\",\n      \"secondary-text-color\",\n      \"secondary-text-on-secondary-color\",\n      \"text-color-on-inverted\",\n      \"text-color-on-primary\",\n      \"disabled-text-color\",\n      \"placeholder-color\",\n      \"link-color\"\n    ],\n    []\n  );\n  return <ColorsDescription colorNames={colorKeys} />;\n};\n\nexport default TextColors;\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/motion/animation-information-box/animation-information-box.module.scss",
    "content": ".video {\n  width: 100%;\n  height: 100%;\n}\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/motion/animation-information-box/animation-information-box.tsx",
    "content": "import React from \"react\";\nimport { InformationBox } from \"vibe-storybook-components\";\nimport styles from \"./animation-information-box.module.scss\";\n\ninterface AnimationInformationBoxProps {\n  videoSrc: string;\n  title: string;\n  description: string;\n}\n\nexport const AnimationInformationBox = ({ videoSrc, title, description }: AnimationInformationBoxProps) => {\n  const AnimationInformationBoxVideo = <video className={styles.video} controls loop src={videoSrc} />;\n  return <InformationBox component={AnimationInformationBoxVideo} title={title} description={description} />;\n};\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/motion/animation-overviews/animation-overviews.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n$animation-overview-grid-gap: 64px;\n$animation-overview-cell-min-width: $grid-auto-fit-cell-width-large;\n$animation-overview-grid-cell-array-calc: calc(50% - #{$animation-overview-grid-gap});\n\n.animationOverviewGrid {\n  @include grid-auto-fit(\n    $grid-gap: $animation-overview-grid-gap,\n    $grid-cell-min-width: $animation-overview-cell-min-width,\n    $grid-cell-array-calc: $animation-overview-grid-cell-array-calc\n  );\n}\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/motion/animation-overviews/animation-overviews.tsx",
    "content": "import React from \"react\";\nimport { AnimationInformationBox } from \"../animation-information-box/animation-information-box\";\nimport { Delight, Feedback, Focus, Orientation } from \"../assets\";\nimport styles from \"./animation-overviews.module.scss\";\n\nconst OVERVIEW = [\n  {\n    videoSrc: Orientation,\n    title: \"Orientation & Continuity\",\n    description:\n      \"We use motion to give a sense of familiarity by helping us understand where things are located, where they're coming from, and where to find them again.\"\n  },\n  {\n    videoSrc: Feedback,\n    title: \"feedback & status -  mediation\",\n    description:\n      \"We use motion to earn the feeling of reassurance and control.It informs us when actions are in process and make things appear to happen faster than they actually do.\"\n  },\n  {\n    videoSrc: Focus,\n    title: \"Focus\",\n    description:\n      \"We use motion to helps focus user attention on what's important, without adding unnecessary distractions.\"\n  },\n  {\n    videoSrc: Delight,\n    title: \"Delight\",\n    description:\n      \"We use motion to celebrate moments in the user's journey. Motion creates emotional commitment and expresses our brand's personality and style.\"\n  }\n];\n\nexport const AnimationOverviews = () => {\n  return (\n    <div className={styles.animationOverviewGrid}>\n      {OVERVIEW.map(({ videoSrc, title, description }) => (\n        <AnimationInformationBox key={title} videoSrc={videoSrc} title={title} description={description} />\n      ))}\n    </div>\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/motion/animation-types/animation-types.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n$animation-types-grid-gap: 64px;\n$animation-types-cell-min-width: $grid-auto-fit-cell-width-medium;\n$animation-types-grid-cell-array-calc: calc(50% - #{$animation-types-grid-gap});\n\n.animationTypesGrid {\n  @include grid-auto-fit(\n    $grid-gap: $animation-types-grid-gap,\n    $grid-cell-min-width: $animation-types-cell-min-width,\n    $grid-cell-array-calc: $animation-types-grid-cell-array-calc\n  );\n}\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/motion/animation-types/animation-types.tsx",
    "content": "import React from \"react\";\nimport { AnimationInformationBox } from \"../animation-information-box/animation-information-box\";\nimport { TypeCss, TypeEmpty, TypeLike, TypeStatus } from \"../assets\";\nimport styles from \"./animation-types.module.scss\";\n\nconst TYPES = [\n  {\n    videoSrc: TypeCss,\n    title: \"CSS - basic transitions (Position, Rotation, Scale)\",\n    description:\n      \"Use CSS animations and transitions primarily for UI elements and other basic transitions and animations.\"\n  },\n  {\n    videoSrc: TypeEmpty,\n    title: \"Lottie - complex and custom animations\",\n    description:\n      \"Lottie is a Json file exported directly from After Effects. The file is Lightweight and scaleable. To be used mainly in mobile, however, can be utilized also in unique or inteactive animations in the Descktop.\"\n  },\n  {\n    videoSrc: TypeLike,\n    title: \"SVG - lightweight, scalable, easy to replace\",\n    description:\n      \"SVG animated file, exported from an animation software. Ideally to be used on icons or multiple assets. Easy to replace and adjust over time.\"\n  },\n  {\n    videoSrc: TypeStatus,\n    title: \"Sprite\",\n    description:\n      \"A spritesheet is a PNG file that contains sequences of animation. It has improved performances when loading, but is not scaleable.\"\n  }\n];\n\nexport const AnimationTypes = () => {\n  return (\n    <div className={styles.animationTypesGrid}>\n      {TYPES.map(({ videoSrc, title, description }) => (\n        <AnimationInformationBox key={title} videoSrc={videoSrc} title={title} description={description} />\n      ))}\n    </div>\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/motion/assets/index.ts",
    "content": "import Delight from \"./delight.mp4\";\nimport Feedback from \"./feedback.mp4\";\nimport Focus from \"./focus.mp4\";\nimport Orientation from \"./orientation.mp4\";\nimport DurationProductiveShort from \"./duration-productive-short.mp4\";\nimport DurationProductiveMedium from \"./duration-productive-medium.mp4\";\nimport DurationProductiveLong from \"./duration-productive-long.mp4\";\nimport DurationExpressiveShort from \"./duration-expressive-short.mp4\";\nimport DurationExpressiveLong from \"./duration-expressive-long.mp4\";\nimport EmphesizeElasticEasing from \"./emphesize-elastic-easing.mp4\";\nimport EnterDeceleratedEasing from \"./enter-decelerated-easing.mp4\";\nimport ExitAcceleratedEasing from \"./exit-accelerated-easing.mp4\";\nimport TransitionStandardEasing from \"./transition-standard-easing.mp4\";\nimport EasingDo from \"./easing-do.mp4\";\nimport EasingDont from \"./easing-dont.mp4\";\nimport ConsistencyDo from \"./consistency-do.mp4\";\nimport ConsistencyDont from \"./consistency-dont.mp4\";\nimport SimplicityDo from \"./simplicity-do.mp4\";\nimport SimplicityDont from \"./simplicity-dont.mp4\";\nimport DontDelayDo from \"./dont-delay-user-do.mp4\";\nimport DontDelayDont from \"./dont-delay-user-dont.mp4\";\nimport TypeCss from \"./type-css.mp4\";\nimport TypeEmpty from \"./type-empty.mp4\";\nimport TypeLike from \"./type-like.mp4\";\nimport TypeStatus from \"./type-status.mp4\";\n\nexport {\n  Feedback,\n  Delight,\n  Focus,\n  Orientation,\n  DurationProductiveShort,\n  DurationProductiveMedium,\n  DurationProductiveLong,\n  DurationExpressiveShort,\n  DurationExpressiveLong,\n  EmphesizeElasticEasing,\n  EnterDeceleratedEasing,\n  ExitAcceleratedEasing,\n  TransitionStandardEasing,\n  EasingDo,\n  EasingDont,\n  ConsistencyDo,\n  ConsistencyDont,\n  SimplicityDo,\n  SimplicityDont,\n  DontDelayDo,\n  DontDelayDont,\n  TypeCss,\n  TypeEmpty,\n  TypeLike,\n  TypeStatus\n};\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/motion/duration-expressive-tokens/duaration-expressive-tokens.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n$duration-grid-column-gap: var(--sb-spacing-large);\n$duration-cell-min-width: $grid-auto-fit-cell-width-medium;\n$duration-grid-cell-array-calc: calc(33.3% - #{$duration-grid-column-gap});\n$duration-grid-row-gap: var(--sb-spacing-xxl);\n\n.durationTokensGrid {\n  @include grid-auto-fit(\n    $grid-column-gap: $duration-grid-column-gap,\n    $grid-row-gap: $duration-grid-row-gap,\n    $grid-cell-min-width: $duration-cell-min-width,\n    $grid-cell-array-calc: $duration-grid-cell-array-calc\n  );\n  margin-bottom: var(--sb-spacing-xxxl);\n\n  * video {\n    height: 100%;\n    width: 100%;\n    object-fit: cover;\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/motion/duration-expressive-tokens/duration-expressive-tokens.tsx",
    "content": "import React from \"react\";\nimport { TokenInformationBox } from \"../token-Information-box/token-information-box\";\nimport { DurationExpressiveShort, DurationExpressiveLong } from \"../assets\";\nimport styles from \"./duaration-expressive-tokens.module.scss\";\n\nconst DURATION_EXPRESSIVE = [\n  {\n    videoSrc: DurationExpressiveShort,\n    title: \"Small motion - 250ms\",\n    description: \"System alerts, notifications, attentions, and mediation.\",\n    tokenDescription: \"--motion-expressive-short\"\n  },\n  {\n    videoSrc: DurationExpressiveLong,\n    title: \"Large motion - 400ms\",\n    description: \"System alerts, notifications, attentions, and mediations that enter the screen with movement.\",\n    tokenDescription: \"--motion-expressive-long\"\n  },\n  {}\n];\n\nexport const DurationExpressiveTokens = () => {\n  return (\n    <div className={styles.durationTokensGrid}>\n      {DURATION_EXPRESSIVE.map(({ videoSrc, title, description, tokenDescription }) => (\n        <TokenInformationBox\n          key={title}\n          videoSrc={videoSrc}\n          title={title}\n          description={description}\n          tokenDescription={tokenDescription}\n        />\n      ))}\n    </div>\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/motion/duration-productive-tokens/duaration-productive-tokens.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n$duration-grid-column-gap: var(--sb-spacing-large);\n$duration-cell-min-width: $grid-auto-fit-cell-width-medium;\n$duration-grid-cell-array-calc: calc(33.3% - #{$duration-grid-column-gap});\n$duration-grid-row-gap: var(--sb-spacing-xxl);\n\n.durationTokensGrid {\n  @include grid-auto-fit(\n    $grid-column-gap: $duration-grid-column-gap,\n    $grid-row-gap: $duration-grid-row-gap,\n    $grid-cell-min-width: $duration-cell-min-width,\n    $grid-cell-array-calc: $duration-grid-cell-array-calc\n  );\n  margin-bottom: var(--sb-spacing-xxxl);\n\n  * video {\n    height: 100%;\n    width: 100%;\n    object-fit: cover;\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/motion/duration-productive-tokens/duration-productive-tokens.tsx",
    "content": "import React from \"react\";\nimport { TokenInformationBox } from \"../token-Information-box/token-information-box\";\nimport { DurationProductiveShort, DurationProductiveMedium, DurationProductiveLong } from \"../assets\";\nimport styles from \"./duaration-productive-tokens.module.scss\";\n\nconst DURATION_PRODUCIVE = [\n  {\n    videoSrc: DurationProductiveShort,\n    title: \"Small motion - 70ms\",\n    description: \"Use when components require minor changes, micro-Interactions, and fades.\",\n    tokenDescription: \"--motion-productive-small\"\n  },\n  {\n    videoSrc: DurationProductiveMedium,\n    title: \"Medium motion - 100ms\",\n    description: \"Use when components require medium changes, small expansions, and notifications.\",\n    tokenDescription: \"--motion-productive-medium\"\n  },\n  {\n    videoSrc: DurationProductiveLong,\n    title: \"Large motion - 150ms\",\n    description: \"Use when components require major changes, expansions, and distance movement.\",\n    tokenDescription: \"--motion-productive-long\"\n  }\n];\n\nexport const DurationProductiveTokens = () => {\n  return (\n    <div>\n      <div className={styles.durationTokensGrid}>\n        {DURATION_PRODUCIVE.map(({ videoSrc, title, description, tokenDescription }) => (\n          <TokenInformationBox\n            key={title}\n            videoSrc={videoSrc}\n            title={title}\n            description={description}\n            tokenDescription={tokenDescription}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/motion/duration-token-table/duration-token-table.tsx",
    "content": "import React from \"react\";\nimport { TokenTable } from \"vibe-storybook-components\";\n\nexport const DurationTokenTable = () => {\n  const theadData = [\"Token\", \"Usage\", \"Value\"];\n\n  const tbodyData = [\n    {\n      id: \"1\",\n      items: [\"--motion-productive-short\", \"Micro-Interactions\", \"70ms\"]\n    },\n    {\n      id: \"2\",\n      items: [\"--motion-productive-medium\", \"Small expansions, small notifications\", \"100ms\"]\n    },\n    {\n      id: \"3\",\n      items: [\"--motion-productive-long\", \"Expansions,  distance movment\", \"150ms\"]\n    },\n    { id: \"4\", items: [\"--motion-expressive-short\", \"Notification - elastic/bounce\", \"250ms\"] },\n    { id: \"5\", items: [\"--motion-expressive-long\", \"Notification - elastic/bounce + movment\", \"400ms\"] }\n  ];\n  return (\n    <div>\n      <TokenTable theadData={theadData} tbodyData={tbodyData} />\n    </div>\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/motion/easing-overview/easing-overview.module.scss",
    "content": ".row {\n  margin-bottom: var(--sb-spacing-xxl);\n}\n\n.video {\n  max-width: 100%;\n  flex-shrink: 1;\n}\n\n.easingInformationBox {\n  max-width: 330px;\n\n  p {\n    margin-top: 0;\n    margin-bottom: var(--sb-spacing-small);\n\n    &:not(:last-child) {\n      margin-top: var(--sb-spacing-xxl);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/motion/easing-overview/easing-overview.tsx",
    "content": "import React from \"react\";\nimport { TokenInformationBox } from \"../token-Information-box/token-information-box\";\nimport { Flex } from \"@vibe/core\";\nimport styles from \"./easing-overview.module.scss\";\n\ninterface EasingOverviewProps {\n  videoSrc: string;\n  title: string;\n  description: string;\n  tokenInfo: string;\n  tokenDescription: string;\n}\n\nexport const EasingOverview: React.FC<EasingOverviewProps> = ({\n  videoSrc,\n  title,\n  description,\n  tokenInfo,\n  tokenDescription\n}) => {\n  const EasingOverviewVideoSrc = <video className={styles.video} src={videoSrc} controls loop />;\n\n  return (\n    <div className={styles.row}>\n      <Flex justify=\"space-between\" align=\"start\" gap=\"large\" wrap>\n        <TokenInformationBox\n          className={styles.easingInformationBox}\n          title={title}\n          description={description}\n          tokenInfo={tokenInfo}\n          tokenDescription={tokenDescription}\n        />\n        {EasingOverviewVideoSrc}\n      </Flex>\n    </div>\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/motion/easing-overviews/easing-overviews.module.scss",
    "content": ".container {\n  margin-top: var(--sb-spacing-xxxl);\n}\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/motion/easing-overviews/easing-overviews.tsx",
    "content": "import React from \"react\";\nimport { EasingOverview } from \"../easing-overview/easing-overview\";\nimport {\n  EmphesizeElasticEasing,\n  EnterDeceleratedEasing,\n  ExitAcceleratedEasing,\n  TransitionStandardEasing\n} from \"../assets\";\n\nimport styles from \"./easing-overviews.module.scss\";\n\nconst EASING = [\n  {\n    videoSrc: EnterDeceleratedEasing,\n    title: \"Enter - Decelerated easing \",\n    description: \"Use when object enter from out of screen to reveal extra information.\",\n    tokenInfo: \"cubic-bezier(0,0,0.35,1) \",\n    tokenDescription: \"--motion-timing-enter\"\n  },\n  {\n    videoSrc: ExitAcceleratedEasing,\n    title: \"Exit - Accelerated easing\",\n    description: \"Use when object leaves the screen to hide element.\",\n    tokenInfo: \"cubic-bezier(0.4,0,1,1)\",\n    tokenDescription: \"--motion-timing-exit\"\n  },\n  {\n    videoSrc: TransitionStandardEasing,\n    title: \"Transition - Standard easing\",\n    description: \"Use to transition between different states of the same element in screen.\",\n    tokenInfo: \"cubic-bezier((0.4,0,0.2,1))\",\n    tokenDescription: \"--motion-timing-transition\"\n  },\n  {\n    videoSrc: EmphesizeElasticEasing,\n    title: \"Emphesize - Elastic easing\",\n    description: \"Use to draw attention to a specific action or specific information.\",\n    tokenInfo: \"cubic-bezier((0,0,0.2,1.4),(Duration must be over 200ms)\",\n    tokenDescription: \"--motion-timing-emphesize\"\n  }\n];\n\nexport const EasingOverviews = () => {\n  return (\n    <div className={styles.container}>\n      {EASING.map(({ videoSrc, title, description, tokenInfo, tokenDescription }) => (\n        <EasingOverview\n          key={title}\n          videoSrc={videoSrc}\n          title={title}\n          description={description}\n          tokenDescription={tokenDescription}\n          tokenInfo={tokenInfo}\n        />\n      ))}\n    </div>\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/motion/easing-token-table/easing-token-table.tsx",
    "content": "import React from \"react\";\nimport { TokenTable } from \"vibe-storybook-components\";\n\nexport const EasingTokenTable = () => {\n  const theadData = [\"Token\", \"Usage\", \"Cubic bezier\"];\n\n  const tbodyData = [\n    {\n      id: \"1\",\n      items: [\"--motion-timing-enter\", \"Entrence\", \"(0,0,0.35,1)\", null]\n    },\n    {\n      id: \"2\",\n      items: [\"--motion-timing-exit\", \"Exit\", \"(0.4,0,1,1)\", null]\n    },\n    {\n      id: \"3\",\n      items: [\"--motion-timing-transition\", \"Transition\", \"(0.4,0,0.2,1)\", null]\n    },\n    {\n      id: \"4\",\n      items: [\"--motion-timing-emphesize\", \"Emphasized easing draws extra attention\", \"(0,0,0.2,1.4)\", null]\n    }\n  ];\n  return (\n    <div>\n      <TokenTable theadData={theadData} tbodyData={tbodyData} />\n    </div>\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/motion/motion.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { AnimationOverviews } from \"./animation-overviews/animation-overviews\";\nimport { DurationProductiveTokens } from \"./duration-productive-tokens/duration-productive-tokens\";\nimport { DurationExpressiveTokens } from \"./duration-expressive-tokens/duration-expressive-tokens\";\nimport { DurationTokenTable } from \"./duration-token-table/duration-token-table\";\nimport { EasingOverviews } from \"./easing-overviews/easing-overviews\";\nimport { EasingTokenTable } from \"./easing-token-table/easing-token-table\";\nimport { AnimationTypes } from \"./animation-types/animation-types\";\nimport {\n  ConsistencyDo,\n  ConsistencyDont,\n  DontDelayDo,\n  DontDelayDont,\n  EasingDo,\n  EasingDont,\n  SimplicityDo,\n  SimplicityDont\n} from \"./assets\";\n\n<Meta title=\"Foundations/Motion\" />\n\n# Motion\n\nAnimation is a powerful tool for communication and is an integral part of the visual language of a product. It helps make the user interface easier to understand and navigate, intuitive to use, and more interactive to work with. Here are the four main processes that help bridge the gap between the virtual world we build and the physical world we know:\n\n<AnimationOverviews />\n\n## Implementation - Duration and Ease\n\n### Duration - how long a transition lasts\n\nEvery move should feel smooth and contribute to the feeling that our platform is responsive, efficient, and fast.\nWhen elements change their state or position, the duration of the animation should be slow enough to give users the chance to notice the change, but quick enough to not keep them waiting.\n\nThe style and size of the motion determine the duration. There are two styles; Productive motion and Expressive motion. The Productive motion duration range is between 70 - 150 ms, while Expressive motion scopes between 250 to 400 ms.\n\n#### Productive motion\n\nUse Productive motion for moments when the user needs to focus on completing tasks.\n\n<DurationProductiveTokens />\n\n#### Expressive motion\n\nUse expressive motion when the movement itself is crucial in conveying the meaning of the action.\n\n<DurationExpressiveTokens />\n\n#### Summary on duration\n\n<DurationTokenTable />\n\n### Ease - acceleration over time\n\nSince linear movements appear unnatural to a human eye, objects should always move with some acceleration or deceleration — just like all live objects in the physical world.\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: <video height=\"190px\" src={EasingDo} controls loop />,\n        description: \"Using ease to make movement feel natural.\"\n      },\n      negative: {\n        component: <video height=\"190px\" src={EasingDont} controls loop />,\n        description: \"Linear motion feels mechanical and unnatural.\"\n      }\n    }\n  ]}\n/>\n\n<EasingOverviews />\n\n#### Summary on easing\n\n<EasingTokenTable />\n\n## Do's and don'ts\n\n### Consistency\n\nSimilar elements must have similar moves. Implement easing curves and timing with a consistent rhythm to ensure motion is predictable and familiar to the user.\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: <video height=\"190px\" src={ConsistencyDo} controls loop />,\n        description: \"Using ease to make movement feel natural.\"\n      },\n      negative: {\n        component: <video height=\"190px\" src={ConsistencyDont} controls loop />,\n        description: \"Linear motion feels mechanical and unnatural.\"\n      }\n    }\n  ]}\n/>\n\n### Simplicity\n\nSimple movements make it easier for the user to follow along and convey a clear message. Keep it simple and clever.\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: <video height=\"190px\" src={SimplicityDo} controls loop />,\n        description: \"Use only one primary action within a single view.\"\n      },\n      negative: {\n        component: <video height=\"190px\" src={SimplicityDont} controls loop />,\n        description: \"Don’t use multiple primary buttons within a single view.\"\n      }\n    }\n  ]}\n/>\n\n### Don’t delay the user\n\nThe user should never get the feeling that they are waiting for the animation to end.\n\n<ComponentRules\n  rules={[\n    {\n      positive: {\n        component: <video height=\"190px\" src={DontDelayDo} controls loop />,\n        description: \"Use only one primary action within a single view.\"\n      },\n      negative: {\n        component: <video height=\"190px\" src={DontDelayDont} controls loop />,\n        description: \"Don’t use multiple primary buttons within a single view.\"\n      }\n    }\n  ]}\n/>\n\n## Animation Types\n\n<AnimationTypes />\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/motion/token-Information-box/token-information-box.tsx",
    "content": "import React from \"react\";\nimport { InformationBox } from \"vibe-storybook-components\";\n\ninterface TokenInformationBoxProps {\n  className?: string;\n  videoSrc?: string;\n  title?: string;\n  description?: string;\n  tokenInfo?: string;\n  tokenDescription?: string;\n}\n\nexport const TokenInformationBox: React.FC<TokenInformationBoxProps> = ({\n  className,\n  videoSrc,\n  title,\n  description,\n  tokenInfo,\n  tokenDescription\n}) => {\n  const TokenInformationBoxImg = videoSrc ? <video src={videoSrc} controls loop /> : null;\n\n  return (\n    <div className={className}>\n      <InformationBox component={TokenInformationBoxImg} title={title} description={description} />\n      {tokenInfo && <p>{tokenInfo}</p>}\n      {tokenDescription && <p>Token: {tokenDescription}</p>}\n    </div>\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/round-corners/corners-settings/corner-settings.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n.global-settings-general-component {\n  margin-top: var(--sb-spacing-between-section-items);\n  .global-settings-list {\n    .global-settings-list-header {\n      @include vibe-text(text1, bold);\n      color: var(--sb-primary-text-color);\n    }\n    .global-settings-list-item {\n      @include vibe-text(text2, normal);\n      color: var(--sb-secondary-text-color);\n    }\n  }\n  .global-settings-general-component-value {\n    margin-top: var(--sb-spacing-medium);\n    @include vibe-text(text2, normal);\n    color: var(--sb-secondary-text-color);\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/round-corners/corners-settings/corner-settings.tsx",
    "content": "import React from \"react\";\nimport \"./corner-settings.scss\";\n\ninterface CornersSettingsProps {\n  children: React.ReactNode;\n  title: string;\n  bullets: string[];\n  value?: string | number;\n}\n\nconst CornersSettings = ({ children, title, bullets, value }: CornersSettingsProps) => {\n  return (\n    <div className=\"global-settings-general-component\">\n      <div className=\"global-settings-child-container\">{children}</div>\n      <div className=\"global-settings-list\">\n        <div className=\"global-settings-list-header\">{title}</div>\n        {bullets.map(bullet => {\n          return (\n            <div key={bullet} className=\"global-settings-list-item\">\n              {bullet}\n            </div>\n          );\n        })}\n      </div>\n      {value && <div className=\"global-settings-general-component-value\">{value}</div>}\n    </div>\n  );\n};\n\nexport default CornersSettings;\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/round-corners/round-corners.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport CornersSettings from \"./corners-settings/corner-settings\";\nimport RoundedCorner from \"./rounded-corner/rounded-corner\";\nimport styles from \"./round-corners.stories.module.scss\";\n\n<Meta title=\"Foundations/Round Corners\" />\n\n# Round Corners\n\nOur design system contains various fixed units for radius of elements corners.\n\n<div className={styles[\"rounded-corners-container\"]}>\n  <CornersSettings title=\"Small\" bullets={[\"Forms\", \"Buttons\", \"Check boxes\", \"Selected mark\", \"Tooltips etc...\"]}>\n    <RoundedCorner roundedCornerSize=\"small\" number=\"4\" />\n  </CornersSettings>\n  <CornersSettings title=\"Medium\" bullets={[\"Dropdown\", \"Popovers\", \"Attention box\", \"Updates\"]}>\n    <RoundedCorner roundedCornerSize=\"medium\" number=\"8\" />\n  </CornersSettings>\n  <CornersSettings title=\"Large\" bullets={[\"Popups\"]}>\n    <RoundedCorner roundedCornerSize=\"big\" number=\"16\" />\n  </CornersSettings>\n</div>\n\n## Up next\n\n<RelatedComponents componentsNames={[\"typography\", \"spacing\", \"colors\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/round-corners/round-corners.stories.module.scss",
    "content": ".rounded-corners-container {\n  display: flex;\n  justify-content: space-around;\n}"
  },
  {
    "path": "packages/docs/src/pages/foundations/round-corners/rounded-corner/rounded-corner.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n.rounded-corner-component {\n  @include vibe-text(text1, bold);\n  color: var(--sb-primary-text-color);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n  border: 2px solid var(--sb-negative-color);\n  background-color: var(--sb-primary-background-color);\n  margin: 0 var(--sb-spacing-medium) var(--sb-spacing-large);\n\n  &--small {\n    border-radius: var(--sb-border-radius-small);\n  }\n\n  &--medium {\n    border-radius: var(--sb-border-radius-medium);\n  }\n\n  &--big {\n    border-radius: var(--sb-border-radius-big);\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/round-corners/rounded-corner/rounded-corner.tsx",
    "content": "import React from \"react\";\nimport cx from \"classnames\";\nimport classes from \"./rounded-corner.module.scss\";\n\ninterface RoundedCornerProps {\n  number: number;\n  roundedCornerSize: string;\n}\n\nconst RoundedCorner = ({ number, roundedCornerSize }: RoundedCornerProps) => {\n  return (\n    <div className={cx(classes[\"rounded-corner-component\"], classes[`rounded-corner-component--${roundedCornerSize}`])}>\n      {number}\n      <span className={classes[\"rounded-corner-component-px\"]}>px</span>\n    </div>\n  );\n};\n\nexport default RoundedCorner;\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/shadow/assets/index.ts",
    "content": "import shadowsSketch from \"./shadowsSketch.png\";\nimport peopleColumn from \"./peopleColumn.png\";\n\nexport { shadowsSketch, peopleColumn };\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/shadow/card-shadow-example/card-shadow-example.module.scss",
    "content": ".card-shadow-example {\n  border: 1px solid;\n  border-color: var(--sb-layout-border-color);\n  height: 317px;\n  width: 296px;\n  border-radius: 8px;\n  display: flex;\n  flex-direction: column;\n  padding: var(--sb-spacing-medium);\n  cursor: pointer;\n\n  &:hover {\n    box-shadow: var(--box-shadow-medium);\n  }\n\n  &-title {\n    margin-top: var(--sb-spacing-medium);\n    margin-bottom: 0;\n    font-size: 18px;\n    font-weight: 700;\n    line-height: 21px;\n  }\n\n  &-description {\n    margin-top: var(--sb-spacing-small);\n    font-size: 14px;\n    line-height: 18px;\n  }\n\n  &-button {\n    margin-top: var(--sb-spacing-large);\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/shadow/card-shadow-example/card-shadow-example.tsx",
    "content": "import React from \"react\";\nimport { Frame } from \"vibe-storybook-components\";\nimport { Button, Heading } from \"@vibe/core\";\nimport { peopleColumn } from \"../assets\";\nimport classes from \"./card-shadow-example.module.scss\";\n\nconst CSS_BASE_CLASS = \"card-shadow-example\";\n\nexport const CardShadowExample = () => {\n  return (\n    <Frame>\n      <div className={classes[CSS_BASE_CLASS]}>\n        <img src={peopleColumn} alt=\"\" />\n        <Heading className={classes[`${CSS_BASE_CLASS}-title`]} type=\"h3\">\n          People Column\n        </Heading>\n        <span className={`${CSS_BASE_CLASS}-description`}>Get an instant overview of where things stand</span>\n        <Button kind=\"secondary\" className={classes[`${CSS_BASE_CLASS}-button`]}>\n          Add to board\n        </Button>\n      </div>\n    </Frame>\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/shadow/drag-shadow-example/drag-shadow-example.module.scss",
    "content": ".drag-shadow-example {\n  &-frame {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n  }\n\n  &-draggable {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    margin-left: var(--sb-spacing-xs);\n    border: 1px solid;\n    border-color: var(--sb-layout-border-color);\n    border-radius: var(--sb-border-radius-small);\n    padding: var(--sb-spacing-small);\n    width: 234px;\n    height: 37px;\n  }\n\n  &-icon {\n    &:hover {\n      & + .drag-shadow-example-draggable {\n        box-shadow: var(--box-shadow-medium);\n        transform: rotate(1deg);\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/shadow/drag-shadow-example/drag-shadow-example.tsx",
    "content": "import React from \"react\";\nimport { Frame } from \"vibe-storybook-components\";\nimport { Drag } from \"@vibe/icons\";\nimport { Icon } from \"@vibe/icon\";\nimport classes from \"./drag-shadow-example.module.scss\";\n\nconst CSS_BASE_CLASS = \"drag-shadow-example\";\n\nexport const DragShadowExample = () => (\n  <Frame className={classes[`${CSS_BASE_CLASS}-frame`]}>\n    <Icon className={classes[`${CSS_BASE_CLASS}-icon`]} icon={Drag} />\n    <div className={classes[`${CSS_BASE_CLASS}-draggable`]}>Drag me</div>\n  </Frame>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/shadow/shadow-levels/shadow-example/shadow-example.module.scss",
    "content": "@mixin shadow-example-text {\n  font-size: var(--sb-small-text-font-size);\n  line-height: 22px;\n}\n.shadow {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  .example {\n    width: 81px;\n    height: 81px;\n\n    &.xs {\n      box-shadow: var(--box-shadow-xs);\n    }\n\n    &.small {\n      box-shadow: var(--box-shadow-small);\n    }\n\n    &.medium {\n      box-shadow: var(--box-shadow-medium);\n    }\n\n    &.large {\n      box-shadow: var(--box-shadow-large);\n    }\n  }\n\n  .title {\n    @include shadow-example-text;\n    font-weight: 500;\n    margin: var(--sb-spacing-small) 0;\n  }\n\n  .code {\n    @include shadow-example-text;\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/shadow/shadow-levels/shadow-example/shadow-example.tsx",
    "content": "import React from \"react\";\nimport cx from \"classnames\";\nimport { capitalize } from \"es-toolkit\";\nimport { useMemo } from \"react\";\nimport styles from \"./shadow-example.module.scss\";\n\ninterface ShadowExampleProps {\n  size: \"xs\" | \"small\" | \"medium\" | \"large\";\n}\n\nexport const ShadowExample = ({ size }: ShadowExampleProps) => {\n  const sizeName = useMemo(() => capitalize(size), [size]);\n  return (\n    <div className={styles.shadow}>\n      <div className={cx(styles.example, styles[size])} />\n      <span className={styles.title}>{sizeName}</span>\n      <span className={styles.code}>{`var(--box-shadow-${size})`}</span>\n    </div>\n  );\n};\n\nShadowExample.size = {\n  XS: \"xs\",\n  SMALL: \"small\",\n  MEDIUM: \"medium\",\n  LARGE: \"large\"\n} as const;\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/shadow/shadow-levels/shadow-levels.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n$shadow-level-grid-column-gap: var(--sb-spacing-large);\n$shadow-level-grid-row-gap: var(--sb-spacing-xl);\n$shadow-level-cell-min-width: $grid-auto-fit-cell-width-medium;\n$shadow-level-grid-cell-array-calc: calc(25% - #{$shadow-level-grid-column-gap});\n\n.monday-storybook-shadow-levels {\n  padding: 32px;\n\n  @include grid-auto-fit(\n    $grid-column-gap: $shadow-level-grid-column-gap,\n    $grid-row-gap: $shadow-level-grid-row-gap,\n    $grid-cell-min-width: $shadow-level-cell-min-width,\n    $grid-cell-array-calc: $shadow-level-grid-cell-array-calc\n  );\n}\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/shadow/shadow-levels/shadow-levels.tsx",
    "content": "import React from \"react\";\nimport { Frame } from \"vibe-storybook-components\";\nimport { ShadowExample } from \"./shadow-example/shadow-example\";\nimport \"./shadow-levels.scss\";\n\nexport const ShadowLevels = () => (\n  <Frame className=\"monday-storybook-shadow-levels\">\n    <ShadowExample size={ShadowExample.size.XS} />\n    <ShadowExample size={ShadowExample.size.SMALL} />\n    <ShadowExample size={ShadowExample.size.MEDIUM} />\n    <ShadowExample size={ShadowExample.size.LARGE} />\n  </Frame>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/shadow/shadow.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { ShadowLevels } from \"./shadow-levels/shadow-levels\";\nimport { shadowsSketch } from \"./assets\";\nimport { CardShadowExample } from \"./card-shadow-example/card-shadow-example\";\nimport { DragShadowExample } from \"./drag-shadow-example/drag-shadow-example\";\nimport \"./shadow.scss\";\n\n<Meta title=\"Foundations/Shadow\" />\n\n# Shadow\n\nVirtual light in monday platform always comes from the top and creates a shadows from layout and UI elements like in real world.\nShadows used to create the scenes of hierarchy and elevation withing the UI and layout.\n\n<img src={shadowsSketch} className=\"monday-storybook-shadow_overview-image\" alt=\"\" />\n\n## Shadow levels\n\n<ShadowLevels />\n\n## Usage and examples\n\n<UsageGuidelines\n  guidelines={[\n    \"Shadows express the level of elevation between surfaces, they must be used consistently throughout your product.\",\n    \"Use shadow to expain interactions.\",\n    \"Items with the same shadow cannot occupy the same space.\"\n  ]}\n/>\n\n### Interactions\n\nUse shadow to indicate the dragged elements are in the “air”\n\n<DragShadowExample />\n\nUse shadow to indicate the card hover is gets closer to the user\n\n<CardShadowExample />\n\n## Up next\n\n<RelatedComponents componentsNames={[\"typography\", \"spacing\", \"colors\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/shadow/shadow.scss",
    "content": ".monday-storybook-shadow {\n  &_overview-image {\n    margin-top: var(--sb-spacing-between-section-items);\n    width: 100%;\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/spacing/Spacing.mdx",
    "content": "import { Meta, Source } from \"@storybook/blocks\";\nimport { Frame } from \"vibe-storybook-components\";\nimport { FlexSpacingExample, Do1, Dont1, Do2, Dont2, Do3, Dont3 } from \"./assets\";\nimport { Text } from \"@vibe/core\";\nimport * as SpacingStories from \"./spacing.stories\";\nimport { SpacingSizes } from \"./spacing-sizes/spacing-sizes\";\nimport styles from \"./spacing.module.scss\";\n\n<Meta of={SpacingStories} />\n\n# Spacing\n\nA spacing scale is a foundational part of a design system,\nproviding a set of consistent spacing values for margins, padding, and gaps.\nClear spacing patterns enable designers and developers to build cohesive layouts while maintaining hierarchy and readability,\nand creating more intuitive user experiences.\n\n## The spacing scale\n\nOur spacing scale is modular, which ensures flexibility, alignment, and balance across our platform.\nIt includes both small increments for small components or detailed designs, and large increments for patterns or layouts.\n\nEach spacing value has its own token.\nThe tokens are used inside the components and should also be included between the components when building a layout.\n\n<SpacingSizes></SpacingSizes>\n\n## Applying the spacing scale\n\n#### Different use cases require different ranges of spacing to achieve the best outcomes. Here are a few guidelines to follow:\n\n<UsageGuidelines\n  guidelines={[\n    \"Stay consistent with paddings and sizes across similar UI patterns.\",\n    \"Group similar items together using similar spacing.\",\n    \"The distance between elements creates semantic meaning: elements that are placed close to one another are assumed to be related.\",\n    \"Use larger spacing around elements to emphasize their importance and draw more focus to them.\"\n  ]}\n/>\n\n## Code example\n\n<Source\n  language=\"css\"\n  dark\n  code={`\n  margin: var(--space-8);\nmargin: var(--space-8) var(--space-4);\nmargin: var(--space-32) 0 var(--space-16) 0;\nmargin-right: var(--space-12);\n          \npadding: var(--space-16);\npadding: var(--space-20) var(--space-8);\npadding: var(--space-32) var(--space-16) 0 var(--space-16);          \n`}\n/>\n\n## Usage and examples\n\n<Canvas of={SpacingStories.UsageExamples} sourceState=\"none\" />\n\n## Flex spacing\n\nFlex spacing is a form of spacing that creates equal distance between components. Vibe provides a flex component that utilizes the spacing scale to set consistent spacing between items.\n\nFor easier use, you can use our <StorybookLink page=\"Layout/Flex\">flex component</StorybookLink> to position sub-elements. This component works both horizontally and vertically, avoiding the need for a custom CSS file.\n\n<Frame className={styles.imageContainer}>\n  <img className={styles.imageFlex} src={FlexSpacingExample} alt=\"\" />\n</Frame>\n\n## Do’s and Dont’s\n\n<ComponentRules\n  rules={[\n    {\n      componentContainerClassName: styles.rulesImage,\n      positive: {\n        component: <img src={Do1} alt=\"\" style={{ maxWidth: \"100%\" }} />,\n        description: \"Use small-sized spacing to group related items together, so users can scan the content easily.\"\n      },\n      negative: {\n        component: <img src={Dont1} alt=\"\" style={{ maxWidth: \"100%\" }} />,\n        description: \"Don't use large-sized spacing between related items.\"\n      }\n    },\n    {\n      componentContainerClassName: styles.rulesImage,\n      positive: {\n        component: <img src={Do2} alt=\"\" style={{ maxWidth: \"100%\" }} />,\n        description: \"Use the same spacing for similar items or patterns.\"\n      },\n      negative: {\n        component: <img src={Dont2} alt=\"\" style={{ maxWidth: \"100%\" }} />,\n        description: \"Don't use different spacing for similar items or patterns.\"\n      }\n    },\n    {\n      componentContainerClassName: styles.rulesImage,\n      positive: {\n        component: <img src={Do3} alt=\"\" style={{ maxWidth: \"100%\" }} />,\n        description: \"Use larger spacing to emphasize key elements, such as headings and CTAs.\"\n      },\n      negative: {\n        component: <img src={Dont3} alt=\"\" style={{ maxWidth: \"100%\" }} />,\n        description: \"Don't use small spacing if you want to emphasize an element.\"\n      }\n    }\n  ]}\n/>\n\n## Up next\n\n<RelatedComponents componentsNames={[\"typography\", \"shadow\", \"colors\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/spacing/assets/index.ts",
    "content": "import FlexSpacingExample from \"./FlexSpacingExample.png\";\nimport SpacingWithinComponents from \"./SpacingWithinComponents.png\";\nimport SpacingWithinPatterns from \"./SpacingWithinPatterns.png\";\nimport SpacingWithinLayouts from \"./SpacingWithinLayouts.png\";\nimport Do1 from \"./Do1.png\";\nimport Dont1 from \"./Dont1.png\";\nimport Do2 from \"./Do2.png\";\nimport Dont2 from \"./Dont2.png\";\nimport Do3 from \"./Do3.png\";\nimport Dont3 from \"./Dont3.png\";\n\nexport {\n  SpacingWithinComponents,\n  SpacingWithinPatterns,\n  SpacingWithinLayouts,\n  FlexSpacingExample,\n  Do1,\n  Dont1,\n  Do2,\n  Dont2,\n  Do3,\n  Dont3\n};\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/spacing/spacing-sizes/spacing-sizes.tsx",
    "content": "import React from \"react\";\nimport { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell, Flex } from \"@vibe/core\";\nimport { TokenName } from \"../spacing-token-name/spacing-token-name\";\n\nconst spacingData = [\n  {\n    TokenName: \"space-2\",\n    Value: \"2px\",\n    Description: \"Use for small, compact components\"\n  },\n  {\n    TokenName: \"space-4\",\n    Value: \"4px\",\n    Description: \"Use for small, compact components\"\n  },\n  {\n    TokenName: \"space-8\",\n    Value: \"8px\",\n    Description: \"Use for small, compact components\"\n  },\n  {\n    TokenName: \"space-12\",\n    Value: \"12px\",\n    Description: \"Use for medium, less dense components\"\n  },\n  {\n    TokenName: \"space-16\",\n    Value: \"16px\",\n    Description: \"Use for larger components or dense layouts\"\n  },\n  {\n    TokenName: \"space-20\",\n    Value: \"20px\",\n    Description: \"Use for larger pieces of UI, patterns, or dense layouts\"\n  },\n  {\n    TokenName: \"space-24\",\n    Value: \"24px\",\n    Description: \"Use for larger pieces of UI, patterns, or layouts\"\n  },\n  {\n    TokenName: \"space-32\",\n    Value: \"32px\",\n    Description: \"Use for patterns or layouts\"\n  },\n  {\n    TokenName: \"space-40\",\n    Value: \"40px\",\n    Description: \"Use for patterns or layouts\"\n  },\n  {\n    TokenName: \"space-48\",\n    Value: \"48px\",\n    Description: \"Use for patterns or layouts with increased spacing\"\n  },\n  {\n    TokenName: \"space-64\",\n    Value: \"64px\",\n    Description: \"Use for layouts with increased spacing\"\n  },\n  {\n    TokenName: \"space-80\",\n    Value: \"80px\",\n    Description: \"Use for layouts with increased spacing\"\n  }\n];\nexport const SpacingSizes = () => (\n  <Table\n    columns={[\n      {\n        id: \"TokenName\",\n        title: \"Token name\",\n        width: \"240px\"\n      },\n      {\n        id: \"Value\",\n        title: \"Value\",\n        width: \"240px\"\n      },\n      {\n        id: \"Description\",\n        title: \"Description\"\n      }\n    ]}\n    errorState={<div />}\n    emptyState={<div />}\n    size=\"large\"\n  >\n    <TableHeader>\n      <TableHeaderCell title=\"Token name\" />\n      <TableHeaderCell title=\"Value\" />\n      <TableHeaderCell title=\"Description\" />\n    </TableHeader>\n    <TableBody>\n      {spacingData.map(rowItem => (\n        <TableRow key={rowItem.TokenName}>\n          <TableCell>\n            <TokenName>{rowItem.TokenName}</TokenName>\n          </TableCell>\n          <TableCell>\n            <Flex gap=\"small\">\n              <div\n                style={{\n                  backgroundColor: \"#6161FF\",\n                  height: \"var(--sb-space-20)\",\n                  width: \"var(--sb-\" + rowItem.TokenName + \")\"\n                }}\n              ></div>\n              {rowItem.Value}\n            </Flex>\n          </TableCell>\n          <TableCell>{rowItem.Description}</TableCell>\n        </TableRow>\n      ))}\n    </TableBody>\n  </Table>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/spacing/spacing-token-name/spacing-token-name.tsx",
    "content": "import React from \"react\";\nimport styles from \"./spacing-usage-examples.module.scss\";\n\nexport const TokenName = ({ children }: { children: React.ReactNode }) => (\n  <span className={styles.tokenName}>{children}</span>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/spacing/spacing-token-name/spacing-usage-examples.module.scss",
    "content": ".tokenName {\n  padding: var(--sb-space-4) var(--sb-space-8);\n  border-radius: 100px;\n  border: 1px solid #E3E3E3;\n  background: #F2F2F2;\n  font-size: 14px\n}\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/spacing/spacing-usage-examples/spacing-usage-examples.module.scss",
    "content": ".container {\n  width: 100%;\n  \n  .img {\n    width: 260px;\n    height: 180px;\n  }\n  \n  .tokenName {\n    margin: 0 8px;\n  }\n}"
  },
  {
    "path": "packages/docs/src/pages/foundations/spacing/spacing-usage-examples/spacing-usage-examples.tsx",
    "content": "import React from \"react\";\nimport styles from \"./spacing-usage-examples.module.scss\";\nimport { Flex, Text } from \"@vibe/core\";\nimport SpacingWithinComponents from \"../assets/SpacingWithinComponents.png\";\nimport SpacingWithinPatterns from \"../assets/SpacingWithinPatterns.png\";\nimport SpacingWithinLayouts from \"../assets/SpacingWithinLayouts.png\";\nimport { TokenName } from \"../spacing-token-name/spacing-token-name\";\n\nexport const SpacingUsageExamples = () => (\n  <Flex direction=\"column\" gap={40} className={styles.container}>\n    <Flex gap=\"large\" align=\"start\">\n      <img className={styles.img} src={SpacingWithinComponents} alt=\"Spacing within components\" />\n      <Flex direction=\"column\" gap=\"medium\" align=\"start\">\n        <Text type=\"text1\" weight=\"medium\">\n          Spacing within components\n        </Text>\n        <Text type=\"text1\" maxLines={4}>\n          Within components, smaller spacing is used to create a clear visual connection between small elements, while\n          ensuring each one remains distinct and easily recognizable.\n        </Text>\n        <span>\n          Use tokens from <TokenName>--space-2</TokenName> to <TokenName>--space-16</TokenName> for small, compact\n          components.\n        </span>\n      </Flex>\n    </Flex>\n    <Flex gap=\"large\" align=\"start\">\n      <img className={styles.img} src={SpacingWithinPatterns} alt=\"Spacing within patterns\" />\n      <Flex direction=\"column\" gap=\"medium\" align=\"start\">\n        <Text type=\"text1\" weight=\"medium\">\n          Spacing within patterns\n        </Text>\n        <Text type=\"text1\" maxLines={4}>\n          Within patterns, it is important to keep the spacing consistent. This helps to achieve familiar visual rhythm\n          with clear relationships between components, allowing the user to navigate the product with ease.\n        </Text>\n        <span>\n          Use tokens from <TokenName>--space-4</TokenName> to <TokenName>--space-24</TokenName> for small, compact\n          patterns.\n        </span>\n      </Flex>\n    </Flex>\n    <Flex gap=\"large\" align=\"start\">\n      <img className={styles.img} src={SpacingWithinLayouts} alt=\"Spacing within layouts\" />\n      <Flex direction=\"column\" gap=\"medium\" align=\"start\">\n        <Text type=\"text1\" weight=\"medium\">\n          Spacing within layouts\n        </Text>\n        <Text type=\"text1\" maxLines={4}>\n          Within page layouts, use spacing to create better hierarchy and readability, or draw the user’s attention to\n          highly important areas.\n        </Text>\n        <span>\n          Use tokens from <TokenName>--space-16</TokenName> to <TokenName>--space-80</TokenName> for page layout.\n        </span>\n      </Flex>\n    </Flex>\n  </Flex>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/spacing/spacing.module.scss",
    "content": ".imageContainer {\n  margin-top: 40px;\n  display: flex;\n  justify-content: center;\n}\n\n.imageFlex {\n  height: 400px;\n  margin-left: 110px;\n}\n\n.rulesImage {\n  height: fit-content !important;\n  width: fit-content;\n}\n\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/spacing/spacing.stories.tsx",
    "content": "import { SpacingSizes } from \"./spacing-sizes/spacing-sizes\";\nimport { type StoryObj, type Meta } from \"@storybook/react\";\nimport { SpacingUsageExamples } from \"./spacing-usage-examples/spacing-usage-examples\";\n\nconst meta: Meta = {\n  title: \"Foundations/Spacing\"\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nexport const Sizes: Story = {\n  render: SpacingSizes,\n  tags: [\"!dev\"]\n};\n\nexport const UsageExamples: Story = {\n  render: SpacingUsageExamples,\n  tags: [\"!dev\"]\n};\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/typography/assets/index.ts",
    "content": "export { default as typographyExample1 } from \"./typographyExample1.png\";\nexport { default as typographyExample2 } from \"./typographyExample2.png\";\nexport { default as typographyExample3 } from \"./typographyExample3.png\";\nexport { default as typographyExample4 } from \"./typographyExample4.png\";\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/typography/examples-table/example-table.module.scss",
    "content": ".table {\n  $border: 1px solid var(--sb-layout-border-color);\n  width: 100%;\n  margin-block: var(--space-16) var(--space-32);\n  border-inline: $border;\n  border-block-start: $border;\n  border-spacing: 0;\n\n  th,\n  td {\n    text-align: start !important;\n    padding: var(--space-8) var(--space-16);\n    height: 40px;\n    border-bottom: $border;\n    &:not(:last-child) {\n      border-right: $border; // Adds right border to all cells except the last ones in a row\n    }\n  }\n\n  thead tr th:first-of-type {\n    width: 270px;\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/typography/examples-table/examples-table.tsx",
    "content": "import React, { type FC } from \"react\";\nimport { Text } from \"@vibe/core\";\nimport styles from \"./example-table.module.scss\";\n\ninterface TableData {\n  name: string;\n  useFor: string;\n  sass: boolean;\n}\n\nconst ExamplesTable: FC = ({ data }: { data: Array<TableData> }) => {\n  return (\n    <table className={styles.table}>\n      <Text type=\"text2\" element=\"thead\" ellipsis={false} color=\"secondary\" weight=\"medium\" align=\"start\">\n        <tr>\n          <th>Name</th>\n          <th>SASS</th>\n        </tr>\n      </Text>\n      <Text type=\"text2\" element=\"tbody\" ellipsis={false} align=\"start\">\n        {data.map((item, index) => (\n          <tr key={index}>\n            <td>{item.name}</td>\n            <td>\n              <code>{item.sass}</code>\n            </td>\n          </tr>\n        ))}\n      </Text>\n    </table>\n  );\n};\n\nexport default ExamplesTable;\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/typography/typograpghy.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { Link, Tip } from \"vibe-storybook-components\";\n\nexport const TipHowToUseFonts = () => (\n  <Tip title=\"How to use the fonts?\">\n    Figtree and Poppins are both Google Fonts. Click\n    <Link size=\"small\" href=\"https://fonts.google.com/specimen/Figtree\">\n      here\n    </Link>\n    to download Figtree, and click\n    <Link size=\"small\" href=\"https://fonts.google.com/specimen/Poppins\">\n      here\n    </Link>\n    to download Poppins.\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/typography/typography.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { Frame } from \"vibe-storybook-components\";\nimport { Heading, Text } from \"@vibe/core\";\nimport TextColors from \"../colors/text-colors/text-colors\";\nimport { typographyExample1, typographyExample2, typographyExample3, typographyExample4 } from \"./assets\";\nimport ExamplesTable from \"./examples-table/examples-table\";\nimport { TipHowToUseFonts } from \"./typograpghy.stories.helpers\";\nimport styles from \"./typography.module.scss\";\n\n<Meta title=\"Foundations/Typography\" />\n\n# Typography\n\nLike in other UI in mondays interface, typography works by principle of accessibility before aesthetics.\nTherefore, the text should be readable and help the user understand what’s important by well contrasted size and colors hierarchy.\n\n## Fonts\n\nWe are using two fonts for our UI hierarchy: Poppins and Figtree.\nWe are using Poppins font for our main titles (heading), and Figtree for text, labels and paragraphs.\nWe don't import the font within our CSS in order to give full control of the fonts which you wish to bring to your client, the following code snippet is what we recommend in order to include our recommended fonts.\n\n```html\n<link\n  href=\"https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\"\n  rel=\"stylesheet\"\n/>\n```\n\nMore ever this is how we are building our css variable for our main font families\n\n```css\n--font-family: Figtree, Roboto, Noto Sans Hebrew, Noto Kufi Arabic, Noto Sans JP, sans-serif;\n--title-font-family: Poppins, Roboto, Noto Sans Hebrew, Noto Kufi Arabic, Noto Sans JP, sans-serif;\n```\n\n<TipHowToUseFonts />\n\n## Type styles\n\nWe use two key type styles: heading and text\n\n<Frame>\n  <Text type=\"text1\" weight=\"bold\">\n    H1 - 32px\n  </Text>\n  <ExamplesTable\n    data={[\n      {\n        name: (\n          <Heading type=\"h1\" weight=\"bold\">\n            H1 bold\n          </Heading>\n        ),\n        sass: \"@include vibe-heading(h1, bold);\"\n      },\n      {\n        name: (\n          <Heading type=\"h1\" weight=\"medium\">\n            H1 medium\n          </Heading>\n        ),\n        sass: \"@include vibe-heading(h1, medium);\"\n      },\n      {\n        name: (\n          <Heading type=\"h1\" weight=\"normal\">\n            H1 normal\n          </Heading>\n        ),\n        sass: \"@include vibe-heading(h1, normal);\"\n      },\n      {\n        name: (\n          <Heading type=\"h1\" weight=\"light\">\n            H1 light\n          </Heading>\n        ),\n        sass: \"@include vibe-heading(h1, light);\"\n      }\n    ]}\n  />\n  <Text type=\"text1\" weight=\"bold\">\n    H2 - 24px\n  </Text>\n  <ExamplesTable\n    data={[\n      {\n        name: (\n          <Heading type=\"h2\" weight=\"bold\">\n            H2 bold\n          </Heading>\n        ),\n        sass: \"@include vibe-heading(h2, bold);\"\n      },\n      {\n        name: (\n          <Heading type=\"h2\" weight=\"medium\">\n            H2 medium\n          </Heading>\n        ),\n        sass: \"@include vibe-heading(h2, medium);\"\n      },\n      {\n        name: (\n          <Heading type=\"h2\" weight=\"normal\">\n            H2 normal\n          </Heading>\n        ),\n        sass: \"@include vibe-heading(h2, normal);\"\n      },\n      {\n        name: (\n          <Heading type=\"h2\" weight=\"light\">\n            H2 light\n          </Heading>\n        ),\n        sass: \"@include vibe-heading(h2, light);\"\n      }\n    ]}\n  />\n  <Text type=\"text1\" weight=\"bold\">\n    H3 - 18px\n  </Text>\n  <ExamplesTable\n    data={[\n      {\n        name: (\n          <Heading type=\"h3\" weight=\"bold\">\n            H3 bold\n          </Heading>\n        ),\n        sass: \"@include vibe-heading(h3, bold);\"\n      },\n      {\n        name: (\n          <Heading type=\"h3\" weight=\"medium\">\n            H3 medium\n          </Heading>\n        ),\n        sass: \"@include vibe-heading(h3, medium);\"\n      },\n      {\n        name: (\n          <Heading type=\"h3\" weight=\"normal\">\n            H3 normal\n          </Heading>\n        ),\n        sass: \"@include vibe-heading(h3, normal);\"\n      },\n      {\n        name: (\n          <Heading type=\"h3\" weight=\"light\">\n            H3 light\n          </Heading>\n        ),\n        sass: \"@include vibe-heading(h3, light);\"\n      }\n    ]}\n  />\n  <Text type=\"text1\" weight=\"bold\">\n    Text1 - 16px\n  </Text>\n  <ExamplesTable\n    data={[\n      {\n        name: (\n          <Text type=\"text1\" weight=\"bold\">\n            Text1 bold\n          </Text>\n        ),\n        sass: \"@include vibe-text(text1, bold);\"\n      },\n      {\n        name: (\n          <Text type=\"text1\" weight=\"medium\">\n            Text1 medium\n          </Text>\n        ),\n        sass: \"@include vibe-text(text1, medium);\"\n      },\n      {\n        name: (\n          <Text type=\"text1\" weight=\"normal\">\n            Text1 normal\n          </Text>\n        ),\n        sass: \"@include vibe-text(text1, normal);\"\n      }\n    ]}\n  />\n  <Text type=\"text1\" weight=\"bold\">\n    Text2 - 14px\n  </Text>\n  <ExamplesTable\n    data={[\n      {\n        name: (\n          <Text type=\"text2\" weight=\"bold\">\n            Text2 bold\n          </Text>\n        ),\n        sass: \"@include vibe-text(text2, bold);\"\n      },\n      {\n        name: (\n          <Text type=\"text2\" weight=\"medium\">\n            Text2 medium\n          </Text>\n        ),\n        sass: \"@include vibe-text(text2, medium);\"\n      },\n      {\n        name: (\n          <Text type=\"text2\" weight=\"normal\">\n            Text2 normal\n          </Text>\n        ),\n        sass: \"@include vibe-text(text2, normal);\"\n      }\n    ]}\n  />\n  <Text type=\"text1\" weight=\"bold\">\n    Text3 - 12px\n  </Text>\n  <ExamplesTable\n    data={[\n      {\n        name: (\n          <Text type=\"text3\" weight=\"medium\">\n            Text3 medium\n          </Text>\n        ),\n        sass: \"@include vibe-text(text3, medium);\"\n      },\n      {\n        name: (\n          <Text type=\"text3\" weight=\"normal\">\n            Text3 normal\n          </Text>\n        ),\n        sass: \"@include vibe-text(text3, normal);\"\n      }\n    ]}\n  />\n</Frame>\n\n## Text colors\n\n<TextColors />\n\n## Usage and examples\n\n<UsageGuidelines\n  guidelines={[\n    \"Avoid using text size smaller than 14px.\",\n    \"Don't underline words. For typographic emphasis use bold text.\",\n    \"Don't use 2 different sizes of text in the same line.\"\n  ]}\n/>\n\n<Frame className={styles.usageImageFrame}>\n  <img src={typographyExample1} className={styles.bigImage} alt=\"\" role=\"presentation\" />\n</Frame>\n\n<Frame className={styles.usageImageFrame}>\n  <img src={typographyExample2} className={styles.smallImage} alt=\"\" role=\"presentation\" />\n</Frame>\n\n<Frame className={styles.usageImageFrame}>\n  <img src={typographyExample3} className={styles.smallImage} alt=\"\" role=\"presentation\" />\n</Frame>\n\n<Frame className={styles.usageImageFrame}>\n  <img src={typographyExample4} className={styles.smallImage} alt=\"\" role=\"presentation\" />\n</Frame>\n\n## Related components\n\n<RelatedComponents componentsNames={[\"Text\", \"Heading\", \"EditableHeading\"]} />\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/typography/typography.module.scss",
    "content": ".usageImageFrame {\n  display: flex;\n  justify-content: center;\n\n  &:first-of-type {\n    margin-bottom: var(--sb-spacing-between-section-items);\n  }\n\n  .bigImage {\n    width: 100%;\n  }\n\n  .smallImage {\n    max-width: 70%;\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/ux-writing-handbook/assets/index.ts",
    "content": "import gradual from \"./gradual.png\";\nimport bottomLine from \"./bottomLine.png\";\nimport getFull from \"./getFull.png\";\nimport userPointOfView from \"./userPointOfView.png\";\nimport oneCta from \"./oneCta.png\";\nimport specificCta from \"./specificCta.png\";\nimport cutTheFluff from \"./cutTheFluff.png\";\nimport stayConsistent from \"./stayConsistent.png\";\nimport stressFree from \"./stressFree.png\";\nimport thePen from \"./thePen.png\";\nimport tone from \"./tone.png\";\nimport weWorkFor from \"./weWorkFor.png\";\nimport writeFor from \"./writeFor.png\";\n\nexport {\n  bottomLine,\n  getFull,\n  gradual,\n  userPointOfView,\n  oneCta,\n  specificCta,\n  cutTheFluff,\n  stayConsistent,\n  stressFree,\n  thePen,\n  tone,\n  weWorkFor,\n  writeFor\n};\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/ux-writing-handbook/ux-writing-handbook.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { Frame, UnstyledList, UnstyledListItem } from \"vibe-storybook-components\";\nimport { RulesUXWriting } from \"./values/rulesUXWriting\";\nimport { ValuesUXWriting } from \"./values/valuesUXWriting\";\nimport { tone } from \"./assets\";\nimport styles from \"./ux-writing-handbook.stories.module.scss\";\n\n<Meta title=\"Foundations/UX Writing Handbook\" />\n\n# UX Writing Handbook\n\n- [Principles](#principles)\n- [Personality](#personality)\n- [Voice](#voice)\n- [Tone](#tone)\n- [Values & Golden Rules](#values--golden-rules)\n\n## Principles\n\nOur mission is to give everyone the power to build and improve how their organization runs.<br/>\nWith monday.com, anyone can easily create or customize software that suits their needs.\n\n### Clarity\n\n<ul>\n  <li>\n    Simple language - use language that’s easy to understand. Look for plain-language alternatives to technical terms\n    and jargon, and give explanations when there are no alternatives.\n  </li>\n  <li>Concision - keep messages short and direct, and eliminate any unnecessary information.</li>\n</ul>\n\n### Consistency\n\n<ul>\n  <li>Terminology - use approved and consistent terminology whenever you communicate with users.</li>\n  <li>\n    Formatting - use a consistent format for similar messages (error notifications, for example) across all features and\n    products.\n  </li>\n</ul>\n\n### Accessibility\n\n<ul>\n  <li>\n    Inclusive language - write respectfully for diverse audiences. Use gender-neutral terms and avoid exclusive\n    language.\n  </li>\n  <li>Readability - write short sentences with familiar terms to keep your content readable.</li>\n</ul>\n\n## Personality\n\nIf monday.com was a person, it would be the ultimate assistant.\n\n### Expert and reliable\n\nWe’re an approachable partner with deep knowledge. We know what we’re doing, and we communicate with reassuring confidence. We own our mistakes and show how we’ll fix them.\n\n### Proactive and supportive\n\nWe go out of our way to help users, so they can trust us completely. We anticipate their needs and provide thoughtful solutions before they even ask.\n\n## Voice\n\nOur voice is the consistent piece of how we communicate with users. It’s the style and emotional approach we always use while writing.\n\n### Empathetic and conversational\n\nOur voice is “human to human”. We speak with users honestly and directly to develop an emotional connection with them.\n\n### Positive and professional\n\nWe use affirmative language to motivate users. We encourage them to get the most out of monday.com, and we support them in doing their best work.\n\n## Tone\n\nWhile our voice is consistent, our tone exists on a spectrum. It’s emotionally nuanced, and it adapts to different situations.\n\n### Light and engaging\n\nWe gravitate toward a light and engaging tone for experiences where our message is simple and we have an opportunity to delight users, like new feature announcements or empty states.\n\n### Professional and reliable\n\nWe use a professional and reliable tone for experiences where our top priority is to reassure users that they’re in good hands, like system errors or anything involving payment.\n\n<Frame noBorder noGutter>\n  <img src={tone} alt=\"tone\" className={styles.image} />\n</Frame>\n\n## Values & Golden Rules\n\nIf our voice and tone are how we write, then our values are why we write in that way. At the most practical level, our golden rules help us write consistently every time.\n\n### UX writing values\n\n<ValuesUXWriting />\n\n### Golden rules of UX writing\n\n<RulesUXWriting />\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/ux-writing-handbook/ux-writing-handbook.stories.module.scss",
    "content": ".image {\n  width: 100%;\n}\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/ux-writing-handbook/values/rulesUXWriting.tsx",
    "content": "import React from \"react\";\nimport { bottomLine, getFull, userPointOfView, oneCta, specificCta, cutTheFluff } from \"../assets\";\nimport { Value } from \"./values\";\nimport styles from \"./valuesUXWriting.module.scss\";\n\nexport const RulesUXWriting = () => (\n  <div className={styles.principles}>\n    <Value\n      imgSrc={bottomLine}\n      title=\"Bottom line first\"\n      description=\"Start every message with the most important information.\"\n    />\n    <Value\n      imgSrc={getFull}\n      title=\"Give full context\"\n      description=\"Provide enough context so users know exactly where they are.\"\n    />\n    <Value\n      imgSrc={userPointOfView}\n      title=\"Focus on the user's point of view\"\n      description=\"Focus on what the user wants to do and what they stand to gain, not on your own perspective.\"\n    />\n    <Value\n      imgSrc={oneCta}\n      title=\"One CTA\"\n      description=\"Present only one CTA at a time. It makes decisions easier and faster.\"\n    />\n    <Value\n      imgSrc={specificCta}\n      title=\"Use specific CTAs\"\n      description=\"Ensure that CTAs respond directly to the header.\"\n    />\n    <Value imgSrc={cutTheFluff} title=\"Cut the fluff\" description=\"Write briefly and to the point.\" />\n  </div>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/ux-writing-handbook/values/values.module.scss",
    "content": ".principle {\n  .visualElement {\n    background-color: var(--sb-color-purple);\n    border-radius: var(--sb-border-radius-small);\n    width: 100%;\n    height: 174px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/ux-writing-handbook/values/values.tsx",
    "content": "import React from \"react\";\nimport { InformationBox } from \"vibe-storybook-components\";\nimport styles from \"./values.module.scss\";\n\ninterface ValueProps {\n  imgSrc: string;\n  title: string;\n  description: string;\n}\n\nexport const Value = ({ imgSrc, title, description }: ValueProps) => {\n  const valueElement = <img className={styles.visualElement} src={imgSrc} alt=\"\" />;\n  return <InformationBox component={valueElement} title={title} description={description} />;\n};\n\nexport default Value;\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/ux-writing-handbook/values/valuesUXWriting.module.scss",
    "content": ".principles {\n  margin: var(--sb-spacing-between-sections) auto;\n  max-width: 830px;\n\n  /* Grid layout replacing the mixin */\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  column-gap: var(--sb-spacing-large);\n  row-gap: var(--sb-spacing-xxxl);\n\n  * img {\n    width: 100%;\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/pages/foundations/ux-writing-handbook/values/valuesUXWriting.tsx",
    "content": "import React from \"react\";\nimport { weWorkFor, stayConsistent, stressFree, thePen, writeFor, gradual } from \"../assets\";\nimport { Value } from \"./values\";\nimport styles from \"./valuesUXWriting.module.scss\";\n\nexport const ValuesUXWriting = () => (\n  <div className={styles.principles}>\n    <Value\n      imgSrc={weWorkFor}\n      title=\"We work for the users\"\n      description=\"And they don’t work for us. That means we write copy that’s simple, intuitive, and relevant.\"\n    />\n    <Value\n      imgSrc={stayConsistent}\n      title=\"Stay consistent\"\n      description=\"Use consistent terminology across all features and products.\"\n    />\n    <Value\n      imgSrc={stressFree}\n      title=\"Keep it stress-free\"\n      description=\"Do not manipulate or guilt users, even if they choose to do something less profitable for you.\"\n    />\n    <Value\n      imgSrc={thePen}\n      title=\"Gradual complexity \"\n      description=\"Introduce new features one step at a time. Learning takes time.\"\n    />\n    <Value\n      imgSrc={writeFor}\n      title=\"The pen is mightier than the sword \"\n      description=\"Do not use passive-aggressive or offensive language.\"\n    />\n    <Value\n      imgSrc={gradual}\n      title=\"Write for all readers \"\n      description=\"Use clear language without technical jargon or narrow cultural references.\"\n    />\n  </div>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/getting-started/getting-started.mdx",
    "content": "import { Meta, Markdown, Source } from \"@storybook/blocks\";\nimport { Link } from \"vibe-storybook-components\";\nimport { Prism as SyntaxHighlighter } from \"react-syntax-highlighter\";\nimport { dark } from \"react-syntax-highlighter/dist/esm/styles/prism\";\nimport readme from \"../../../../core/README.md?raw\";\n\n<Meta title=\"Getting Started\" />\n\n# Getting Started\n\n<Markdown>{readme.replace(/^[\\s\\S]*?(?=## Overview)/, \"\")}</Markdown>\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useActiveDescendantListFocus/useActiveDescendantListFocus.interactions.ts",
    "content": "import { expect } from \"@storybook/jest\";\nimport {\n  getByTestId,\n  interactionSuite,\n  pressNavigationKey,\n  NavigationCommand,\n  resetFocus\n} from \"@vibe/core/interactionsTests\";\nimport styles from \"./useActiveDescendantListFocus.module.scss\";\nimport { getTestId, ComponentDefaultTestId } from \"@vibe/shared\";\n\nexport const overviewInteractionSuite = interactionSuite({\n  tests: [keyboardNavAndFocusForVerticalList],\n  afterEach: async () => {\n    await resetFocus();\n  }\n});\n\nasync function getSearchElement(canvas) {\n  return await getByTestId(canvas, getTestId(ComponentDefaultTestId.SEARCH));\n}\n\nasync function expectElementToBeNaturallyFocused(element) {\n  expect(document.activeElement).toEqual(element);\n}\nasync function expectElementVisuallyFocusedByText(text) {\n  const activeElements = document.getElementsByClassName(styles.visualFocus);\n  expect(activeElements).toHaveLength(1);\n  expect(activeElements[0]).toHaveTextContent(text);\n}\n\nasync function keyboardNavAndFocusForVerticalList(canvas) {\n  const element = await getSearchElement(canvas);\n\n  // set focus on the list's element which in charge on natural focus element\n  element.focus();\n  // move visual focus to first item\n  await pressNavigationKey(NavigationCommand.DOWN_ARROW);\n  await expectElementVisuallyFocusedByText(\"Item 1\");\n  await expectElementToBeNaturallyFocused(element);\n\n  // move visual focus to second item\n  await pressNavigationKey(NavigationCommand.DOWN_ARROW);\n  await expectElementVisuallyFocusedByText(\"Item 2\");\n  await expectElementToBeNaturallyFocused(element);\n\n  // move visual focus to first item again\n  await pressNavigationKey(NavigationCommand.UP_ARROW);\n  await expectElementVisuallyFocusedByText(\"Item 1\");\n  await expectElementToBeNaturallyFocused(element);\n\n  // move to last item by press up keyboard button\n  await pressNavigationKey(NavigationCommand.UP_ARROW);\n  await expectElementVisuallyFocusedByText(\"Item 3\");\n  await expectElementToBeNaturallyFocused(element);\n\n  // move to first item again by press down keyboard button while visual focus is on the last item\n  await pressNavigationKey(NavigationCommand.DOWN_ARROW);\n  await expectElementVisuallyFocusedByText(\"Item 1\");\n  await expectElementToBeNaturallyFocused(element);\n}\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useActiveDescendantListFocus/useActiveDescendantListFocus.mdx",
    "content": "import { Canvas, Meta } from \"@storybook/blocks\";\nimport { FunctionArgument, FunctionArguments, UnstyledList, UnstyledListItem } from \"vibe-storybook-components\";\nimport * as UseActiveDescendantListFocusStories from \"./useActiveDescendantListFocus.stories\";\n\n<Meta of={UseActiveDescendantListFocusStories} />\n\n# useActiveDescendantListFocus\n\n<p>\n  <b>Using this hook for not its intended purpose will hurt your component accessibility.</b> <br />\n</p>\n\n### Import\n\n```js\nimport { useActiveDescendantListFocus } from \"@vibe/core\";\n```\n\n<UnstyledList>\n  <UnstyledListItem>\n    Please use this hook only if your component role is one of the following: \"composite\" widget, \"combobox\", \"textbox\",\n    \"group\", or \"application\".\n  </UnstyledListItem>\n  <UnstyledListItem>\n    This hook is part of a group of hooks we implement for you to ease the development of accessible components in the\n    context of managing focus and keyboard navigation.\n  </UnstyledListItem>\n  <UnstyledListItem>\n    Use this hook only when you want the browser's natural focus to be on a specific element (usually text input or\n    search) when at the same time, the user will see a visual focus on one of the items in the list depending on the use\n    of the arrow keyboard buttons. Meanwhile, the user can navigate between items and select one of them by using the\n    keyboard. but the focus on the list's item is always only visual (the real focus always be on a specific element, as\n    explained before.)\n  </UnstyledListItem>\n</UnstyledList>\n\n<Canvas of={UseActiveDescendantListFocusStories.Overview} />\n\n## Arguments\n\n<FunctionArguments>\n  <FunctionArgument name=\"options\" type=\"Object\">\n    <FunctionArgument\n      name=\"focusedElementRef\"\n      type=\"MutableRefObject<HTMLElement>\"\n      description=\"The reference for the component that listens to keyboard\"\n      required\n    />\n    <FunctionArgument name=\"itemsIds\" type=\"string[]\" description=\"Array of elements ids\" required />\n    <FunctionArgument\n      name=\"isItemSelectable\"\n      type=\"(index: number) => boolean\"\n      description=\"If user can select index item\"\n      required\n    />\n    <FunctionArgument\n      name=\"onItemClick\"\n      type=\"(event: React.KeyboardEvent | React.MouseEvent, index: number) => void\"\n      description=\"Callback on item click\"\n      required\n    />\n    <FunctionArgument\n      name=\"defaultVisualFocusFirstIndex\"\n      type=\"boolean\"\n      default={\"false\"}\n      description=\"Default value of index of the first element, which will get visual focus.\"\n    />\n    <FunctionArgument\n      name=\"focusedElementRole\"\n      type=\"Role\"\n      description=\"Possible values: useActiveDescendantListFocus.roles.\"\n      default={\"useActiveDescendantListFocus.roles.GROUP\"}\n    />\n    <FunctionArgument name=\"isHorizontalList\" type=\"boolean\" description=\"\" default={\"false\"} />\n    <FunctionArgument name=\"isIgnoreSpaceAsItemSelection\" type=\"boolean\" description=\"\" default={\"false\"} />\n    <FunctionArgument name=\"useDocumentEventListeners\" type=\"boolean\" description=\"\" default={\"false\"} />\n    <FunctionArgument name=\"ignoreDocumentFallback\" type=\"boolean\" description=\"\" default={\"false\"} />\n  </FunctionArgument>\n</FunctionArguments>\n\n## Returns\n\n<FunctionArguments>\n  <FunctionArgument name=\"result\" type=\"Object\">\n    <FunctionArgument\n      name=\"visualFocusItemIndex\"\n      type=\"number\"\n      description=\"The index of the currently visually focused item element.\"\n    />\n    <FunctionArgument\n      name=\"visualFocusItemId\"\n      type=\"number\"\n      description=\"The id of the currently visually focused item element.\"\n    />\n    <FunctionArgument\n      name=\"createOnItemClickCallback\"\n      type=\"(itemId) => onItemClickCallback(event, itemId)\"\n      description={\n        <>\n          Higher order function which creates and returns a onclick callback function for item element according to the\n          item id which received as parameter. <br />\n          If you prefer to create the item's on click callback by yourself, you can use the onItemClickCallback field in\n          this hook return value.\n        </>\n      }\n    />\n    <FunctionArgument\n      name=\"onItemClickCallback\"\n      type=\"(event, itemId) => {}\"\n      description=\"Most in time you will not need to use this return value field. This function is the general function which will be activate for all items when clicked. you can set it directly as the item's element on click callback only if you make sure you pass the item index parameter correctly to the function.\"\n    />\n    <FunctionArgument\n      name=\"focusedElementProps\"\n      type=\"{role, aria-activedescendant}\"\n      description=\"All the required props which should be defined inside the naturally focused element inside your component according to the accessibility standards\"\n    />\n    <FunctionArgument\n      name=\"setVisualFocusItemId\"\n      type=\"(visualFocusItemId, isTriggeredByKeyboard) => {}\"\n      description=\"A function for controlling the visual focused item from outside (needed for cases such as exiting sub menu or dialog, when we want to return the focus to the last focused item.\"\n    />\n  </FunctionArgument>\n</FunctionArguments>\n\n## Usage\n\nThis hook contains the implementation of all the logic needed for managing the focus of a component that fits the following description:\n\n<UnstyledList>\n  <UnstyledListItem>\n    The component displays a list of values shown in one dimension - horizontal or vertical.\n  </UnstyledListItem>\n  <UnstyledListItem>\n    The user can interact with the component items, and therefore, the component is focusable.\n  </UnstyledListItem>\n  <UnstyledListItem>\n    When the user focuses on the component, the browser's real focus will always be on an element that is not one of the\n    component's items. Most of the time, the focus will be on the component's Search item or different Text input item.\n  </UnstyledListItem>\n  <UnstyledListItem>\n    Meanwhile, the user can navigate between items and select one of them by using the keyboard. but the focus on the\n    list's item is always only visual (the real focus always be on a specific element, as explained before.)\n  </UnstyledListItem>\n</UnstyledList>\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useActiveDescendantListFocus/useActiveDescendantListFocus.module.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n.visualFocus {\n  @include focus-style-css;\n}\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useActiveDescendantListFocus/useActiveDescendantListFocus.stories.tsx",
    "content": "/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport React, { useCallback, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { Flex, Search, useActiveDescendantListFocus } from \"@vibe/core\";\nimport { overviewInteractionSuite } from \"./useActiveDescendantListFocus.interactions\";\nimport { type Meta, type StoryObj } from \"@storybook/react\";\nimport styles from \"./useActiveDescendantListFocus.module.scss\";\n\ntype Story = StoryObj<typeof useActiveDescendantListFocus>;\n\nexport default {\n  title: \"Hooks/useActiveDescendantListFocus\"\n} satisfies Meta<typeof useActiveDescendantListFocus>;\n\nexport const Overview: Story = {\n  render: () => {\n    const focusedElementRef = useRef<HTMLInputElement | null>(null);\n    const itemsIds: string[] = [\"id-1\", \"id-2\", \"id-3\"];\n    const isItemSelectable = useCallback((): boolean => true, []);\n\n    const onItemClick = useCallback((): void => {\n      alert(\"clicked\");\n    }, []);\n\n    const { focusedElementProps, visualFocusItemId } = useActiveDescendantListFocus({\n      focusedElementRef,\n      focusedElementRole: useActiveDescendantListFocus.roles.COMBOBOX,\n      itemsIds,\n      onItemClick,\n      isItemSelectable,\n      isHorizontalList: false,\n      isIgnoreSpaceAsItemSelection: true\n    });\n\n    return (\n      <Flex direction=\"column\">\n        <Search\n          ref={focusedElementRef}\n          // @ts-ignore\n          role={focusedElementProps.role}\n          currentAriaResultId={focusedElementProps[\"aria-activedescendant\"]}\n        />\n        <ul>\n          <li\n            onClick={onItemClick}\n            className={cx({\n              [styles.visualFocus]: visualFocusItemId === \"id-1\"\n            })}\n            id=\"id-1\"\n            key=\"id-1\"\n          >\n            Item 1\n          </li>\n          <li\n            onClick={onItemClick}\n            className={cx({\n              [styles.visualFocus]: visualFocusItemId === \"id-2\"\n            })}\n            id=\"id-2\"\n            key=\"id-2\"\n          >\n            Item 2\n          </li>\n          <li\n            onClick={onItemClick}\n            className={cx({\n              [styles.visualFocus]: visualFocusItemId === \"id-3\"\n            })}\n            id=\"id-3\"\n            key=\"id-3\"\n          >\n            Item 3\n          </li>\n        </ul>\n      </Flex>\n    );\n  },\n\n  name: \"Overview\",\n  play: overviewInteractionSuite\n};\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useAfterFirstRender/useAfterFirstRender.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { FunctionArgument, FunctionArguments, UsageGuidelines } from \"vibe-storybook-components\";\nimport * as UseAfterFirstRenderStories from \"./useAfterFirstRender.stories\";\n\n<Meta of={UseAfterFirstRenderStories} />\n\n# useAfterFirstRender\n\nUse this hook to track whether the page has been rendered at least once.\n\n<Canvas of={UseAfterFirstRenderStories.Overview} />\n\n### Import\n\n```js\nimport { useAfterFirstRender } from \"@vibe/core\";\n```\n\n## Returns\n\n<FunctionArguments>\n  <FunctionArgument type=\"boolean\" description=\"Whether the first render happened or not.\" />\n</FunctionArguments>\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\"Use this hook when you want to wait for the page to load at least once before doing something.\"]}\n/>\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useAfterFirstRender/useAfterFirstRender.stories.tsx",
    "content": "import React, { useState } from \"react\";\nimport { useAfterFirstRender, Button, Flex, Heading } from \"@vibe/core\";\nimport { type Meta, type StoryObj } from \"@storybook/react\";\n\ntype Story = StoryObj<typeof useAfterFirstRender>;\n\nexport default {\n  title: \"Hooks/useAfterFirstRender\"\n} satisfies Meta<typeof useAfterFirstRender>;\n\nexport const Overview: Story = {\n  render: () => {\n    const isAfterFirstRender = useAfterFirstRender();\n    const [renderCount, setRenderCount] = useState(0);\n\n    const handleRerender = () => {\n      setRenderCount(prevCount => prevCount + 1);\n    };\n\n    return (\n      <>\n        <Heading type=\"h3\" weight=\"normal\">\n          {isAfterFirstRender.current ? \"It is after the first render!\" : \"This is the first render!\"}\n        </Heading>\n        <p>Rerender count: {renderCount}</p>\n        <Button onClick={handleRerender}>Rerender component</Button>\n      </>\n    );\n  },\n  decorators: [\n    Story => (\n      <Flex direction=\"column\" align=\"start\">\n        <Story />\n      </Flex>\n    )\n  ],\n  parameters: {\n    docs: {\n      liveEdit: {\n        scope: { Heading }\n      }\n    }\n  }\n};\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useClickOutside/useClickOutside.mdx",
    "content": "import { Canvas, Meta } from \"@storybook/blocks\";\nimport { FunctionArgument, FunctionArguments, Link, UsageGuidelines } from \"vibe-storybook-components\";\nimport * as UseClickOutsideStories from \"./useClickOutside.stories\";\n\n<Meta of={UseClickOutsideStories} />\n\n# useClickOutside\n\nThis hook is used when you want to capture click events outside your component.\n\n<Canvas of={UseClickOutsideStories.Overview} />\n\n### Import\n\n```js\nimport { useClickOutside } from \"@vibe/core\";\n```\n\n## Arguments\n\n<FunctionArguments>\n  <FunctionArgument name=\"options\" type=\"Object\">\n    <FunctionArgument\n      name=\"ref\"\n      type=\"React.MutableRefObject\"\n      description={\n        <>\n          A React\n          <Link href=\"https://react.dev/reference/react/useRef\">ref</Link>\n          object.\n        </>\n      }\n      required\n    />\n    <FunctionArgument\n      name=\"callback\"\n      type=\"(value: string) => void\"\n      description=\"Callback function to execute on outside clicks.\"\n      required\n    />\n    <FunctionArgument\n      name=\"ignoreClasses\"\n      type=\"string[]\"\n      description=\"A list of classes to ignore when checking if the click is outside the element.\"\n    />\n    <FunctionArgument\n      name=\"eventName\"\n      type=\"keyof HTMLElementEventMap | string\"\n      description={\n        <>\n          The event to listen to. See\n          <Link href=\"https://developer.mozilla.org/en-US/docs/Web/Events\">a full list</Link>\n          for more info.\n        </>\n      }\n      defaultValue=\"click\"\n    />\n  </FunctionArgument>\n</FunctionArguments>\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Use this hook when you want to listen on events outside of the element\",\n    \"Use this hook when you need to use events not from the react app\"\n  ]}\n/>\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useClickOutside/useClickOutside.stories.tsx",
    "content": "import React from \"react\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { useClickOutside, Box } from \"@vibe/core\";\n\nexport default {\n  title: \"Hooks/useClickOutside\"\n};\n\nexport const Overview = {\n  render: () => {\n    const [counter, setCounter] = useState(0);\n    const ref = useRef(null);\n\n    const onClick = useCallback(() => {\n      setCounter(currentCounter => {\n        return currentCounter + 1;\n      });\n    }, [setCounter]);\n\n    useClickOutside({\n      ref,\n      callback: onClick\n    });\n\n    return (\n      <Box ref={ref} border rounded=\"small\" padding=\"medium\">\n        Click outside {counter}\n      </Box>\n    );\n  },\n\n  name: \"Overview\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useClickableProps/useClickableProps.mdx",
    "content": "import { Canvas, Meta } from \"@storybook/blocks\";\nimport { Link } from \"vibe-storybook-components\";\nimport { TipClickable } from \"./useClickableProps.stories.helpers\";\nimport * as UseClickablePropsStories from \"./useClickableProps.stories\";\n\n<Meta of={UseClickablePropsStories} />\n\n# useClickableProps\n\nReturn props for making an element or component clickable by mouse and keyboard with screen reader support.\n\n<Canvas of={UseClickablePropsStories.Overview} />\n\n### Import\n\n```js\nimport { useClickableProps } from \"@vibe/core\";\n```\n\n<TipClickable />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Use this hook instead of Clickable component wrapper when you want to customize clickable styles by yourself.\"\n  ]}\n/>\n\n## Arguments\n\n<FunctionArguments>\n  <FunctionArgument\n    name=\"onClick\"\n    type=\"(event: React.MouseEvent | React.KeyboardEvent) => void\"\n    description={<>Click callback.</>}\n  />\n  <FunctionArgument\n    name=\"onMouseDown\"\n    type=\"(event: React.MouseEvent) => void\"\n    description={<>Mouse down callback.</>}\n  />\n  <FunctionArgument name=\"disabled\" type=\"boolean\" description={<>Whether element is disabled or not.</>} />\n  <FunctionArgument name=\"id\" type=\"string\" description={<>Id of the element.</>} />\n  <FunctionArgument name=\"dataTestId\" type=\"string\" description={<>Id of the element for test purposes.</>} />\n  <FunctionArgument\n    name=\"role\"\n    type=\"string\"\n    description={\n      <>\n        Provide semantic meaning to content.\n        <Link size=\"small\" href={\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles\"}>\n          More details.\n        </Link>\n      </>\n    }\n  />\n  <FunctionArgument\n    name=\"tabIndex\"\n    type=\"number\"\n    description={\n      <>\n        Specifies the tab order of the element. Default value is 0.\n        <Link\n          size=\"small\"\n          href={\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex\"}\n        >\n          More details.\n        </Link>\n      </>\n    }\n  />\n  <FunctionArgument\n    name=\"aria-label\"\n    type=\"string\"\n    description={\n      <>\n        Defines a string value that labels an interactive element for assistive technologies.\n        <Link\n          size=\"small\"\n          href={\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label\"}\n        >\n          More details.\n        </Link>\n      </>\n    }\n  />\n  <FunctionArgument\n    name=\"aria-hidden\"\n    type=\"boolean\"\n    description={\n      <>\n        HTML attribute for hiding content from screen readers and other assistive technologies.\n        <Link\n          size=\"small\"\n          href={\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden\"}\n        >\n          More details.\n        </Link>\n      </>\n    }\n  />\n  <FunctionArgument\n    name=\"aria-haspopup\"\n    type=\"boolean\"\n    description={\n      <>\n        Indicates the availability and type of interactive popup element that can be triggered by the element on which\n        the attribute is set.\n        <Link\n          size=\"small\"\n          href={\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup\"}\n        >\n          More details.\n        </Link>\n      </>\n    }\n  />\n  <FunctionArgument\n    name=\"aria-expanded\"\n    type=\"boolean\"\n    description={\n      <>\n        Indicate if a control is expanded or collapsed, and whether or not its child elements are displayed or hidden.\n        <Link\n          size=\"small\"\n          href={\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded\"}\n        >\n          More details.\n        </Link>\n      </>\n    }\n  />\n</FunctionArguments>\n\n## Returns\n\n<FunctionArguments>\n  <FunctionArgument\n    name=\"ref\"\n    type=\"(node: HTMLElement) => void\"\n    description={\n      <>\n        A React\n        <Link size=\"small\" href=\"https://react.dev/reference/react/useRef\">\n          ref\n        </Link>\n        object for the clickable element.\n      </>\n    }\n  />\n  <FunctionArgument\n    name=\"onClick\"\n    type=\"(event: React.MouseEvent | React.KeyboardEvent) => void\"\n    description={<>Click callback.</>}\n  />\n  <FunctionArgument\n    name=\"onMouseDown\"\n    type=\"(event: React.MouseEvent) => void\"\n    description={<>Mouse down callback.</>}\n  />\n  <FunctionArgument name=\"onKeyDown\" type=\"(event: React.MouseEvent) => void\" description={<>Key down callback.</>} />\n  <FunctionArgument name=\"id\" type=\"string\" description={<>Id of the element.</>} />\n  <FunctionArgument name=\"data-testid\" type=\"string\" description={<>Id of the element for test purposes.</>} />\n  <FunctionArgument\n    name=\"role\"\n    type=\"string\"\n    description={\n      <>\n        Provide semantic meaning to content.\n        <Link size=\"small\" href={\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles\"}>\n          More details.\n        </Link>\n      </>\n    }\n  />\n  <FunctionArgument\n    name=\"tabIndex\"\n    type=\"number\"\n    description={\n      <>\n        Specifies the tab order of an element.\n        <Link\n          size=\"small\"\n          href={\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex\"}\n        >\n          More details.\n        </Link>\n      </>\n    }\n  />\n  <FunctionArgument\n    name=\"aria-label\"\n    type=\"string\"\n    description={\n      <>\n        Defines a string value that labels an interactive element.\n        <Link\n          size=\"small\"\n          href={\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label\"}\n        >\n          More details.\n        </Link>\n      </>\n    }\n  />\n  <FunctionArgument\n    name=\"aria-hidden\"\n    type=\"boolean\"\n    description={\n      <>\n        Used to hide non-interactive content from the accessibility API.\n        <Link\n          size=\"small\"\n          href={\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden\"}\n        >\n          More details.\n        </Link>\n      </>\n    }\n  />\n  <FunctionArgument\n    name=\"aria-hasPopup\"\n    type=\"boolean\"\n    description={\n      <>\n        Indicates the availability and type of interactive popup element that can be triggered by the element on which\n        the attribute is set.\n        <Link\n          size=\"small\"\n          href={\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup\"}\n        >\n          More details.\n        </Link>\n      </>\n    }\n  />\n  <FunctionArgument\n    name=\"aria-expanded\"\n    type=\"boolean\"\n    description={\n      <>\n        Indicate if a control is expanded or collapsed, and whether or not its child elements are displayed or hidden.\n        <Link\n          size=\"small\"\n          href={\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded\"}\n        >\n          More details.\n        </Link>\n      </>\n    }\n  />\n</FunctionArguments>\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useClickableProps/useClickableProps.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const TipClickable = () => (\n  <Tip title=\"Check out our component solution for this use case\">\n    For more simple use cases, you also can use our{\" \"}\n    <StorybookLink size=\"small\" page=\"Accessibility/Clickable\">\n      Clickable\n    </StorybookLink>{\" \"}\n    component wrapper.\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useClickableProps/useClickableProps.stories.scss",
    "content": "@import \"~@vibe/style/dist/mixins\";\n\n.monday-storybook-use-clickable-props {\n  @include focus-style;\n  cursor: pointer;\n\n  background-color: var(--sb-primary-selected-color);\n  padding: var(--sb-spacing-small);\n  border-radius: var(--sb-border-radius-small);\n  width: 40%;\n}\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useClickableProps/useClickableProps.stories.tsx",
    "content": "import React, { useCallback, useRef } from \"react\";\nimport { useClickableProps } from \"@vibe/core\";\nimport \"./useClickableProps.stories.scss\";\n\nexport default {\n  title: \"Hooks/useClickableProps\"\n};\n\nexport const Overview = {\n  render: () => {\n    const ref = useRef<HTMLDivElement>(null);\n    const onClick = useCallback(() => alert(\"click!\"), []);\n\n    const clickableProps = useClickableProps(\n      {\n        onClick: onClick,\n        id: \"clickable-id\",\n        \"aria-hidden\": false,\n        \"aria-haspopup\": false,\n        \"aria-expanded\": false\n      },\n      ref\n    );\n\n    return (\n      <div {...clickableProps} className=\"monday-storybook-use-clickable-props\" ref={ref}>\n        I act like a button\n      </div>\n    );\n  },\n\n  name: \"Overview\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useDebounceEvent/useDebounceEvent.mdx",
    "content": "import { Canvas, Meta } from \"@storybook/blocks\";\nimport { FunctionArgument, FunctionArguments } from \"vibe-storybook-components\";\nimport * as UseDebounceEventStories from \"./useDebounceEvent.stories\";\n\n<Meta of={UseDebounceEventStories} />\n\n# useDebounceEvent\n\nThis hook generates an easy to use debounced value updater.\n\n<Canvas of={UseDebounceEventStories.Overview} />\n\n### Import\n\n```js\nimport { useDebounceEvent } from \"@vibe/core\";\n```\n\n## Arguments\n\n<FunctionArguments>\n  <FunctionArgument name=\"options\" type=\"Object\">\n    <FunctionArgument name=\"trim\" type=\"boolean\" description=\"Whether to trim the value or not.\" default=\"false\" />\n    <FunctionArgument\n      name=\"onChange\"\n      type=\"(value: string) => void\"\n      description=\"Callback function to execute on changes.\"\n      default=\"() => null\"\n    />\n    <FunctionArgument\n      name=\"delay\"\n      type=\"number\"\n      description=\"The amount of time (in ms) to delay the value's update.\"\n      default=\"0\"\n    />\n    <FunctionArgument name=\"initialStateValue\" type=\"any\" description=\"The initial value.\" />\n  </FunctionArgument>\n</FunctionArguments>\n\n## Returns\n\n<FunctionArguments>\n  <FunctionArgument name=\"result\" type=\"Object\">\n    <FunctionArgument name=\"inputValue\" type=\"any\" description=\"The hook's value.\" />\n    <FunctionArgument\n      name=\"onEventChanged\"\n      type=\"(event: Event) => void\"\n      description={\n        <>\n          A wrapper around the passed <code>onChange</code> function.\n        </>\n      }\n    />\n    <FunctionArgument name=\"clearValue\" type=\"() => void\" description=\"Clears the current value.\" />\n    <FunctionArgument name=\"updateValue\" type=\"(value: any) => void\" description=\"Updates the current value.\" />\n  </FunctionArgument>\n</FunctionArguments>\n\n## Usage\n\n<UsageGuidelines guidelines={[\"Use this hook when you need to debounce value updates (for example, text inputs).\"]} />\n\n## Use cases and examples\n\n### Passing an initial value\n\n<Canvas of={UseDebounceEventStories.PassingAnInitialValue} />\n\n### Passing an `onChange` handler\n\n<Canvas of={UseDebounceEventStories.PassingAnOnChangeHandler} />\n\n### Trimming the value\n\n<Canvas of={UseDebounceEventStories.WithTrim} />\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useDebounceEvent/useDebounceEvent.stories.tsx",
    "content": "import React, { useState } from \"react\";\nimport { useDebounceEvent, type UseDebounceResult } from \"@vibe/core\";\n\nexport default {\n  title: \"Hooks/useDebounceEvent\"\n};\n\nexport const Overview = {\n  render: () => {\n    const { inputValue, onEventChanged }: UseDebounceResult = useDebounceEvent({\n      delay: 100,\n      onChange: () => {}\n    });\n\n    return <input type=\"text\" value={inputValue} onChange={onEventChanged} />;\n  },\n\n  name: \"Overview\"\n};\n\nexport const PassingAnInitialValue = {\n  render: () => {\n    const { inputValue, onEventChanged }: UseDebounceResult = useDebounceEvent({\n      initialStateValue: \"bla bla bla\",\n      onChange: () => {}\n    });\n\n    return <input type=\"text\" value={inputValue} onChange={onEventChanged} />;\n  },\n\n  name: \"Passing an initial value\"\n};\n\nexport const PassingAnOnChangeHandler = {\n  render: () => {\n    const [length, setLength] = useState(0);\n\n    const { inputValue, onEventChanged }: UseDebounceResult = useDebounceEvent({\n      onChange: (value: string) => setLength(value.length)\n    });\n\n    return (\n      <>\n        <input type=\"text\" value={inputValue} onChange={onEventChanged} />\n        <span>Input has {length} characters</span>\n      </>\n    );\n  },\n\n  name: \"Passing an `onChange` handler\"\n};\n\nexport const WithTrim = {\n  render: () => {\n    const { inputValue, onEventChanged }: UseDebounceResult = useDebounceEvent({\n      trim: true,\n      onChange: () => {}\n    });\n\n    return <input type=\"text\" value={inputValue} onChange={onEventChanged} />;\n  },\n\n  name: \"With trim\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useEventListener/useEventListener.mdx",
    "content": "import { Canvas, Meta } from \"@storybook/blocks\";\nimport * as UseEventListenerStories from \"./useEventListener.stories\";\n\n<Meta of={UseEventListenerStories} />\n\n# useEventListener\n\nAttaches a listener to any DOM event on a specific element, firing a provided callback when the event is triggered.\n\n<Canvas of={UseEventListenerStories.Overview} />\n\n### Import\n\n```js\nimport { useEventListener } from \"@vibe/core\";\n```\n\n## Arguments\n\n<FunctionArguments>\n  <FunctionArgument name=\"options\" type=\"Object\">\n    <FunctionArgument\n      name=\"ref\"\n      type=\"React.MutableRefObject\"\n      description={\n        <>\n          A React\n          <Link href=\"https://react.dev/reference/react/useRef\">ref</Link>\n          object.\n        </>\n      }\n    />\n    <FunctionArgument\n      name=\"callback\"\n      type=\"(event: Event) => void\"\n      description=\"Callback function to execute when the event is fired.\"\n      required\n    />\n    <FunctionArgument\n      name=\"eventName\"\n      type=\"string\"\n      description={\n        <>\n          The event to listen to. See\n          <Link href=\"https://developer.mozilla.org/en-US/docs/Web/Events\">a full list</Link>\n          for more info.\n        </>\n      }\n      required\n    />\n    <FunctionArgument\n      name=\"capture\"\n      type=\"boolean\"\n      description=\"Whether to capture the event before bubbling up or not.\"\n      default=\"false\"\n    />\n  </FunctionArgument>\n</FunctionArguments>\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useEventListener/useEventListener.stories.tsx",
    "content": "import React from \"react\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { useEventListener, Box } from \"@vibe/core\";\n\nexport default {\n  title: \"Hooks/useEventListener\"\n};\n\nexport const Overview = {\n  render: () => {\n    const ref = useRef(null);\n    const [hovered, setHovered] = useState(false);\n\n    const callback = useCallback(() => {\n      setHovered(true);\n    }, [setHovered]);\n\n    useEventListener({\n      ref,\n      callback,\n      eventName: \"mouseenter\"\n    });\n\n    return (\n      <Box ref={ref} border rounded=\"small\" padding=\"medium\">\n        {hovered ? \"Boom!\" : \"Hover me\"}\n      </Box>\n    );\n  },\n\n  name: \"Overview\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.mdx",
    "content": "import { Canvas, Meta } from \"@storybook/blocks\";\nimport { action } from \"@storybook/addon-actions\";\nimport \"./useGridKeyboardNavigation.stories.scss\";\nimport * as UseGridKeyboardNavigationStories from \"./useGridKeyboardNavigation.stories\";\n\n<Meta of={UseGridKeyboardNavigationStories} />\n\n# useGridKeyboardNavigation\n\nUsed for accessible keyboard navigation. Useful for components rendering items that can be navigated and selected with a keyboard.\n\nexport const ELEMENT_WIDTH_PX = 72;\nexport const PADDING_PX = 24;\n\nexport const ON_CLICK = action(\"item selected\");\n\n<Canvas of={UseGridKeyboardNavigationStories.Overview} />\n\n### Import\n\n```js\nimport { useGridKeyboardNavigation } from \"@vibe/core\";\n```\n\n## Usage\n\n<UsageGuidelines guidelines={[\"Use this hook when you want to add keyboard navigation to a grid-like component.\"]} />\n\n## Arguments\n\n<FunctionArguments>\n  <FunctionArgument name=\"options\" type=\"Object\">\n    <FunctionArgument\n      name=\"ref\"\n      type=\"React.MutableRefObject<HTMLElement>\"\n      description={\n        <>\n          A React\n          <Link href=\"https://react.dev/reference/react/useRef\">\n            ref\n          </Link>\n          object. The reference for the component that listens to keyboard. <br />\n          <b>Important:</b> the referred element must have a <code>tabIndex={-1}</code> for the focus to work properly.\n        </>\n      }\n      required\n    />\n\n    <FunctionArgument name=\"itemsCount\" type=\"Number\" description=\"The number of items.\" required />\n\n    <FunctionArgument name=\"numberOfItemsInLine\" type=\"Number\" description=\"The number of items on each line of the grid.\" required />\n\n    <FunctionArgument name=\"onItemClicked\" type=\"(item, index) => void\" description=\"The callback for selecting an item. It will be called when an active item is selected, for example with 'Enter'.\" required />\n\n    <FunctionArgument name=\"getItemByIndex\" type=\"(index) => item\" description=\"A function which gets an index as a param, and returns the item on that index.\" />\n\n    <FunctionArgument name=\"focusOnMount\" type=\"boolean\" description=\"If true, the referenced element will be focused when mounted.\" />\n\n    <FunctionArgument\n      name=\"focusItemIndexOnMount\"\n      type=\"number\"\n      description={\n        <>\n          Optional item index to focus when mounted. Only works with <code>options.focusOnMount</code>.\n        </>\n      }\n    />\n\n    <FunctionArgument name=\"disabledIndexes\" type=\"number[]\" description=\"Optional array of disabled indices, which will be skipped while navigating.\" />\n\n  </FunctionArgument>\n</FunctionArguments>\n\n## Returns\n\n<FunctionArguments>\n  <FunctionArgument name=\"result\" type=\"Object\">\n    <FunctionArgument name=\"activeIndex\" type=\"number\" description=\"The index of the currently active item.\" />\n\n    <FunctionArgument\n      name=\"onSelectionAction\"\n      type=\"(itemIndex) => void\"\n      description={\n        <>\n          A wrapper around the passed <code>onItemClicked</code> function. Use it as the handler for selecting items\n          (e.g. <code>onClick</code>)\n        </>\n      }\n    />\n\n    <FunctionArgument\n      name=\"isInitialActiveState\"\n      type=\"boolean\"\n      description={\n        <>\n          If true, the currently active element was due to an initial mounting index option. See{\" \"}\n          <code>options.focusItemIndexOnMount</code>.\n        </>\n      }\n    />\n\n  </FunctionArgument>\n</FunctionArguments>\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.stories.scss",
    "content": ".use-grid-keyboard-nav-comp-wrapper {\n  padding: 24px;\n  display: flex;\n  flex-wrap: wrap;\n  outline: none;\n  text-align: center;\n}\n\n.use-grid-keyboard-nav-item {\n  width: 60px;\n  margin: 6px;\n}\n\n.use-grid-keyboard-nav-controls {\n  display: flex;\n\n  & :not(:first-child) {\n    margin-left: var(--sb-spacing-medium);\n  }\n\n  input {\n    width: 60px;\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.stories.tsx",
    "content": "import React, { useRef, useCallback, useState, useMemo } from \"react\";\nimport { action } from \"@storybook/addon-actions\";\nimport cx from \"classnames\";\nimport { range } from \"es-toolkit\";\nimport { useGridKeyboardNavigation, Button } from \"@vibe/core\";\nimport \"./useGridKeyboardNavigation.stories.scss\";\n\nconst ELEMENT_WIDTH_PX = 72;\nconst PADDING_PX = 24;\nconst ON_CLICK = action(\"item selected\");\n\nexport default {\n  title: \"Hooks/useGridKeyboardNavigation\"\n};\n\nexport const Overview = {\n  render: () => {\n    const ref = useRef(null);\n    const disabledIndexes = [2, 4, 6];\n    const [itemsCount, setItemsCount] = useState<number>(15);\n    const [numberOfItemsInLine, setNumberOfItemsInLine] = useState<number>(4);\n\n    const width = useMemo(() => numberOfItemsInLine * ELEMENT_WIDTH_PX + 2 * PADDING_PX, [numberOfItemsInLine]);\n\n    const items: string[] = useMemo(() => range(itemsCount).map((num: number) => `${num}.`), [itemsCount]);\n    const getItemByIndex = useCallback((index: number) => items[index], [items]);\n\n    const { activeIndex, onSelectionAction } = useGridKeyboardNavigation({\n      ref,\n      numberOfItemsInLine,\n      itemsCount,\n      getItemByIndex,\n      onItemClicked: ON_CLICK,\n      disabledIndexes\n    });\n\n    const onClickByIndex = useCallback((index: number) => () => onSelectionAction(index), [onSelectionAction]);\n\n    return (\n      <div>\n        <div\n          className=\"use-grid-keyboard-nav-comp-wrapper\"\n          style={{\n            width\n          }}\n          ref={ref}\n          tabIndex={-1}\n        >\n          {items.map((item, index) => (\n            <Button\n              key={item}\n              disabled={disabledIndexes.includes(index)}\n              onClick={onClickByIndex(index)}\n              kind=\"secondary\"\n              className={cx(\"use-grid-keyboard-nav-item\", {\n                \"active-item\": index === activeIndex\n              })}\n            >\n              {item}\n            </Button>\n          ))}\n        </div>\n        <div className=\"use-grid-keyboard-nav-controls\">\n          <div>\n            Items count:{\" \"}\n            <input value={itemsCount} onChange={e => setItemsCount(Number(e.target.value))} type=\"number\" min={1} />\n          </div>\n          <div>\n            Number of items in line:{\" \"}\n            <input\n              value={numberOfItemsInLine}\n              onChange={e => setNumberOfItemsInLine(Number(e.target.value))}\n              type=\"number\"\n              min={1}\n            />\n          </div>\n        </div>\n      </div>\n    );\n  },\n\n  name: \"Overview\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useHover/useHover.mdx",
    "content": "import { Canvas, Meta } from \"@storybook/blocks\";\nimport { Link, UsageGuidelines } from \"vibe-storybook-components\";\nimport * as UseHoverStories from \"./useHover.stories\";\n\n<Meta of={UseHoverStories} />\n\n# useHover\n\nDetect whether the mouse is hovering an element by returning its <code>isHovered</code> state.\n\n<Canvas of={UseHoverStories.Overview} />\n\n### Import\n\n```js\nimport { useHover } from \"@vibe/core\";\n```\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Use this hook to get element hovered state\",\n    \"Please assign the returned ref as the reference of the element\"\n  ]}\n/>\n\n## Returns\n\n<FunctionArguments>\n  <FunctionArgument\n    name=\"ref\"\n    type=\"React.MutableRefObject\"\n    description={\n      <>\n        A React\n        <Link size=\"medium\" href=\"https://react.dev/reference/react/useRef\">\n          ref\n        </Link>\n        object to assign to the element which hover state needs to be tracked.\n      </>\n    }\n  />\n  <FunctionArgument name=\"isHovered\" type=\"boolean\" description=\"Whether the element is hovered or not.\" />\n</FunctionArguments>\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useHover/useHover.stories.tsx",
    "content": "import React from \"react\";\nimport { Box, useHover } from \"@vibe/core\";\n\nexport default {\n  title: \"Hooks/useHover\"\n};\n\nexport const Overview = {\n  render: () => {\n    const [hoverRef, isHovered] = useHover<HTMLDivElement>();\n\n    return (\n      <Box\n        border\n        rounded=\"small\"\n        padding=\"medium\"\n        ref={hoverRef}\n        backgroundColor={isHovered ? \"greyBackgroundColor\" : \"primaryBackgroundColor\"}\n      >\n        {isHovered ? \"Boom!\" : \"Hover me\"}\n      </Box>\n    );\n  },\n\n  name: \"Overview\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useIsOverflowing/useIsOverflowing.mdx",
    "content": "import { Canvas, Meta } from \"@storybook/blocks\";\nimport { FunctionArgument, FunctionArguments, Link } from \"vibe-storybook-components\";\nimport { TipTooltip } from \"./useIsOverflowing.stories.helpers\";\nimport * as UseIsOverflowingStories from \"./useIsOverflowing.stories\";\n\n<Meta of={UseIsOverflowingStories} />\n\n# useIsOverflowing\n\nUse this hook, when there is a chance that content won't fit into the container, to track if overflow occurs.\n\n<Canvas of={UseIsOverflowingStories.Overview} />\n\n### Import\n\n```js\nimport { useIsOverflowing } from \"@vibe/core\";\n```\n\n## Usage\n\n<UsageGuidelines guidelines={[\"Use this when content might not fit into it's container.\"]} />\n\n<TipTooltip />\n\n## Arguments\n\n<FunctionArguments>\n  <FunctionArgument\n    name=\"ref\"\n    type=\"React.MutableRefObject\"\n    description={\n      <>\n        A React\n        <Link size=\"medium\" href=\"https://react.dev/reference/react/useRef\">\n          ref\n        </Link>\n        object for the container of likely to overflow content.\n      </>\n    }\n  />\n</FunctionArguments>\n\n## Returns\n\n<FunctionArguments>\n  <FunctionArgument name=\"isOverflowing\" type=\"bool\" description={<>Is content overflow the container.</>} />\n</FunctionArguments>\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useIsOverflowing/useIsOverflowing.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { StorybookLink, Tip } from \"vibe-storybook-components\";\n\nexport const TipTooltip = () => (\n  <Tip title={\"What to do when overflow is detected?\"}>\n    You might want to use{\" \"}\n    <StorybookLink size=\"small\" page=\"Components/Tooltip\">\n      Tooltip\n    </StorybookLink>{\" \"}\n    to display all the content.\n  </Tip>\n);\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useIsOverflowing/useIsOverflowing.stories.module.scss",
    "content": ".textContainer {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  width: 50px;\n  border: solid 1px var(--sb-layout-border-color);\n  padding: 1px 2px;\n  height: 24px;\n  cursor: not-allowed;\n}\n\n.input {\n  width: 110px;\n  padding: 1px 2px;\n}\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useIsOverflowing/useIsOverflowing.stories.tsx",
    "content": "import React, { useRef, useState } from \"react\";\nimport { useIsOverflowing, Flex, TextField, Tooltip } from \"@vibe/core\";\nimport styles from \"./useIsOverflowing.stories.module.scss\";\n\nexport default {\n  title: \"Hooks/useIsOverflowing\"\n};\n\nexport const Overview = {\n  render: () => {\n    const ComponentWithOverflow = ({ text }: { text: string }) => {\n      const ref = useRef(null);\n\n      const isOverflowing = useIsOverflowing({\n        ref\n      });\n\n      return (\n        <Flex direction=\"column\" gap=\"medium\" align=\"start\">\n          <div>Is overflowing: {isOverflowing.toString()}</div>\n          <Tooltip content={isOverflowing ? text : undefined}>\n            <div ref={ref} className={styles.textContainer}>\n              {text}\n            </div>\n          </Tooltip>\n        </Flex>\n      );\n    };\n\n    const [text, setText] = useState(\"\");\n\n    return (\n      <Flex direction=\"column\" gap=\"small\" align=\"start\">\n        <TextField onChange={setText} placeholder=\"Type text here\" className={styles.input} />\n        <ComponentWithOverflow text={text} />\n      </Flex>\n    );\n  },\n\n  name: \"Overview\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useKeyEvent/useKeyEvent.mdx",
    "content": "import { Canvas, Meta } from \"@storybook/blocks\";\nimport { FunctionArgument, FunctionArguments, UsageGuidelines } from \"vibe-storybook-components\";\nimport * as UseKeyEventStories from \"./useKeyEvent.stories\";\n\n<Meta of={UseKeyEventStories} />\n\n# useKeyEvent\n\nAttaches a listener to keyboard DOM events on a specific element, firing a provided callback when the event is triggered.\n\n<Canvas of={UseKeyEventStories.Overview} />\n\n### Import\n\n```js\nimport { useKeyEvent } from \"@vibe/core\";\n```\n\n## Arguments\n\n<FunctionArguments>\n  <FunctionArgument name=\"options\" type=\"Object\">\n    <FunctionArgument\n      name=\"keys\"\n      type=\"Array<string>\"\n      description={\n        <>\n          A list of keys to trigger the passed callback. See\n          <Link href=\"https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values\">a full list</Link>\n          for more info.\n        </>\n      }\n    />\n    <FunctionArgument\n      name=\"callback\"\n      type=\"(event: Event) => void\"\n      description=\"Callback function to execute when the event is fired.\"\n      required\n    />\n    <FunctionArgument\n      name=\"ref\"\n      type=\"React.MutableRefObject\"\n      description={\n        <>\n          A React\n          <Link href=\"https://react.dev/reference/react/useRef\">ref</Link>\n          object.\n        </>\n      }\n      default=\"document\"\n    />\n    <FunctionArgument\n      name=\"ignoreDocumentFallback\"\n      type=\"boolean\"\n      description={\n        <>\n          If <code>ref</code> is not passed, ignore the default <code>ref</code>.\n        </>\n      }\n      default=\"false\"\n    />\n    <FunctionArgument\n      name=\"capture\"\n      type=\"boolean\"\n      description=\"Whether to capture the event before bubbling up or not.\"\n      default=\"false\"\n    />\n    <FunctionArgument\n      name=\"preventDefault\"\n      type=\"boolean\"\n      description={\n        <>\n          Runs{\" \"}\n          <code>\n            <Link href=\"https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault\" withoutSpacing>\n              preventDefault\n            </Link>\n          </code>{\" \"}\n          on the fired events.\n        </>\n      }\n      default=\"false\"\n    />\n    <FunctionArgument\n      name=\"stopPropagation\"\n      type=\"boolean\"\n      description={\n        <>\n          Runs{\" \"}\n          <code>\n            <Link href=\"https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation\" withoutSpacing>\n              stopPropagation\n            </Link>\n          </code>{\" \"}\n          on the fired events.\n        </>\n      }\n      default=\"false\"\n    />\n    <FunctionArgument\n      name=\"eventName\"\n      type=\"string\"\n      description={\n        <>\n          The event to listen to. See\n          <Link href=\"https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#events\">a full list</Link>\n          for more info.\n        </>\n      }\n      default=\"keydown\"\n    />\n  </FunctionArgument>\n</FunctionArguments>\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    \"Use this hook to add custom logic when typing inside an element.\",\n    \"Use this hook to add keyboard shortcuts.\"\n  ]}\n/>\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useKeyEvent/useKeyEvent.stories.tsx",
    "content": "import React from \"react\";\nimport { useState } from \"react\";\nimport { useKeyEvent } from \"@vibe/core\";\n\nexport default {\n  title: \"Hooks/useKeyEvent\"\n};\n\nexport const Overview = {\n  render: () => {\n    const [keyName, setKeyName] = useState(\"-\");\n\n    useKeyEvent({\n      keys: [\"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"0\"],\n      callback: e => setKeyName(e.key)\n    });\n\n    return <div>Last pressed digit: {keyName}</div>;\n  },\n\n  name: \"Overview\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useMediaQuery/useMediaQuery.mdx",
    "content": "import { Canvas, Meta } from \"@storybook/blocks\";\nimport * as UseMediaQueryStories from \"./useMediaQuery.stories\";\n\n<Meta of={UseMediaQueryStories} />\n\n# useMediaQuery\n\nThis hook helps maps if a media query is matched or not\n\n### Import\n\n```js\nimport { useMediaQuery } from \"@vibe/core\";\n```\n\n<Canvas of={UseMediaQueryStories.SingleRule} />\n\n<Canvas of={UseMediaQueryStories.MultipleRules} />\n\n## Arguments\n\n<FunctionArguments>\n  <FunctionArgument\n    name=\"query\"\n    type=\"string | Array<string>\"\n    description={<>A string (or an array of strings) which represent a valid media query</>}\n  />\n</FunctionArguments>\n\n## Returns\n\n<FunctionArguments>\n  <FunctionArgument\n    name=\"result\"\n    type=\"Array<boolean>\"\n    description={\n      <>\n        An array with the matching media query set to true for example:\n        <br /> <code>[true, false]</code> - the first media query applies and the second is not\n      </>\n    }\n  />\n</FunctionArguments>\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useMediaQuery/useMediaQuery.stories.tsx",
    "content": "import React from \"react\";\nimport { useMediaQuery } from \"@vibe/core\";\n\nexport default {\n  title: \"Hooks/useMediaQuery\"\n};\n\nexport const SingleRule = {\n  render: () => {\n    const [mediaQueryIsMatching] = useMediaQuery([\"screen and (max-width: 1023px) and (min-width: 768px)\"]);\n\n    return (\n      <div>\n        {`media query - \"screen and (max-width: 1023px) and (min-width: 768px)\" is matching: `}\n        {mediaQueryIsMatching ? \"true\" : \"false\"}\n      </div>\n    );\n  },\n\n  name: \"Single Rule\"\n};\n\nexport const MultipleRules = {\n  render: () => {\n    const [screenSizeMediaQuery, preferDarkColorScheme] = useMediaQuery([\n      \"screen and (max-width: 1280px) and (min-width: 768px)\",\n      \"prefers-color-scheme: dark\"\n    ]);\n\n    return (\n      <div>\n        <div>\n          {`media query - \"screen and (max-width: 1280px) and (min-width: 768px)\" is matching: `}\n          {screenSizeMediaQuery ? \"true\" : \"false\"}\n        </div>\n        <div>media query - prefers-color-scheme: dark is matching: {preferDarkColorScheme ? \"true\" : \"false\"}</div>\n      </div>\n    );\n  },\n\n  name: \"Multiple Rules\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/usePrevious/usePrevious.mdx",
    "content": "import { Canvas, Meta } from \"@storybook/blocks\";\nimport { FunctionArgument, FunctionArguments } from \"vibe-storybook-components\";\nimport * as UsePreviousStories from \"./usePrevious.stories\";\n\n<Meta of={UsePreviousStories} />\n\n# usePrevious\n\nHook for keeping previous state value.\n\n<Canvas of={UsePreviousStories.Overview} />\n\n### Import\n\n```js\nimport { usePrevious } from \"@vibe/core\";\n```\n\n## Arguments\n\n<FunctionArguments>\n  <FunctionArgument name=\"value\" type=\"any\" description={<>State value to keep track of.</>} required />\n</FunctionArguments>\n\n## Returns\n\n<FunctionArguments>\n  <FunctionArgument name=\"value\" type=\"any\" description={<>Previous value of the argument.</>} />\n</FunctionArguments>\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/usePrevious/usePrevious.stories.module.scss",
    "content": ".counterContainer {\n  margin-bottom: 20px;\n}\n\n.counterLabel {\n  margin-bottom: 10px;\n}\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/usePrevious/usePrevious.stories.tsx",
    "content": "import React, { useState } from \"react\";\nimport { usePrevious, Button, Counter, Flex } from \"@vibe/core\";\nimport styles from \"./usePrevious.stories.module.scss\";\n\nexport default {\n  title: \"Hooks/usePrevious\"\n};\n\nexport const Overview = {\n  render: () => {\n    const [count, setCount] = useState(1);\n    const prevCount = usePrevious(count);\n\n    const incrementButtonOnClick = () => {\n      setCount(prevValue => prevValue + 1);\n    };\n\n    return (\n      <Flex direction=\"column\">\n        <Flex className={styles.counterContainer} direction=\"column\">\n          <div className={styles.counterLabel}>Current</div>\n          <Counter count={count} />\n        </Flex>\n        <Flex className={styles.counterContainer} direction=\"column\">\n          <div className={styles.counterLabel}>Previous</div>\n          <Counter count={prevCount} />\n        </Flex>\n        <Button onClick={incrementButtonOnClick}>Increment</Button>\n      </Flex>\n    );\n  },\n\n  name: \"Overview\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useSetFocus/useSetFocus.mdx",
    "content": "import { Canvas, Meta } from \"@storybook/blocks\";\nimport { FunctionArgument, FunctionArguments } from \"vibe-storybook-components\";\nimport * as UseSetFocusStories from \"./useSetFocus.stories\";\n\n<Meta of={UseSetFocusStories} />\n\n# useSetFocus\n\nHook for controlling focus on specific component e.g. Input.\n\n<Canvas of={UseSetFocusStories.Overview} />\n\n### Import\n\n```js\nimport { useSetFocus } from \"@vibe/core\";\n```\n\n## Arguments\n\n<FunctionArguments>\n  <FunctionArgument name=\"options\" type=\"Object\">\n    <FunctionArgument\n      name=\"ref\"\n      type=\"React.MutableRefObject\"\n      description={\n        <>\n          A React\n          <Link href=\"https://react.dev/reference/react/useRef\">ref</Link>\n          object.\n        </>\n      }\n      required\n    />\n    <FunctionArgument\n      name=\"focusCallback\"\n      type=\"() => void\"\n      description=\"Callback function to execute on the ref's element focus event.\"\n    />\n    <FunctionArgument\n      name=\"blurCallback\"\n      type=\"() => void\"\n      description=\"Callback function to execute on the ref's element blur event.\"\n    />\n  </FunctionArgument>\n</FunctionArguments>\n\n## Returns\n\n<FunctionArguments>\n  <FunctionArgument name=\"result\" type=\"Object\">\n    <FunctionArgument name=\"isFocused\" type=\"bool\" description=\"Is the element focused or not.\" />\n    <FunctionArgument name=\"focus\" type=\"() => void\" description=\"Function for focusing the element.\" />\n    <FunctionArgument name=\"blur\" type=\"() => void\" description=\"Function for blurring the element.\" />\n  </FunctionArgument>\n</FunctionArguments>\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useSetFocus/useSetFocus.stories.module.scss",
    "content": ".controlButton {\n  margin-top: var(--sb-spacing-medium);\n  width: 80px;\n}\n\n.focusLabel {\n  margin-top: var(--sb-spacing-medium);\n}\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useSetFocus/useSetFocus.stories.tsx",
    "content": "import React, { useRef } from \"react\";\nimport { Button, Flex, TextField, useSetFocus } from \"@vibe/core\";\nimport styles from \"./useSetFocus.stories.module.scss\";\n\nexport default {\n  title: \"Hooks/useSetFocus\"\n};\n\nexport const Overview = {\n  render: () => {\n    const focusCallback = () => {};\n    const blurCallback = () => {};\n    const ref = useRef(null);\n\n    const { isFocused, focus, blur } = useSetFocus({\n      ref,\n      focusCallback,\n      blurCallback\n    });\n\n    return (\n      <Flex direction=\"column\">\n        <TextField ref={ref} placeholder=\"Input...\" />\n        <Button onClick={focus} className={styles.controlButton}>\n          Focus\n        </Button>\n        <Button onClick={blur} className={styles.controlButton}>\n          Blur\n        </Button>\n        <div className={styles.focusLabel}>Is focused: {isFocused?.toString()}</div>\n      </Flex>\n    );\n  },\n\n  name: \"Overview\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useSwitch/useSwitch.mdx",
    "content": "import { Canvas, Meta } from \"@storybook/blocks\";\nimport { FunctionArgument, FunctionArguments } from \"vibe-storybook-components\";\nimport * as UseSwitchStories from \"./useSwitch.stories\";\n\n<Meta of={UseSwitchStories} />\n\n# useSwitch\n\nHook for controlling boolean state on components, e.g. Toggle, by exposing state and a handler\n\n<Canvas of={UseSwitchStories.Overview} />\n\n### Import\n\n```js\nimport { useSwitch } from \"@vibe/core\";\n```\n\n## Variants\n\n### Disabled\n\nHook can have argument of `isDisabled` to not allow trigger `onChange` (or the custom passed `onChange`) and change returned `isChecked` value.\n\n<Canvas of={UseSwitchStories.Disabled} />\n\n### Default (initial) value\n\nHook can have argument of `defaultChecked` to control the **_initial_** value returned from it.\n\n<Canvas of={UseSwitchStories.Default} />\n\n## Arguments\n\n<FunctionArguments>\n  <FunctionArgument name=\"options\" type=\"Object\">\n    <FunctionArgument name=\"isChecked\" type=\"boolean\" description=\"Value to override the hook state.\" />\n    <FunctionArgument\n      name=\"defaultChecked\"\n      type=\"boolean\"\n      description=\"Value to override the hook initial state (init hook with 'true' instead of 'false').\"\n    />\n    <FunctionArgument\n      name=\"onChange\"\n      type=\"(value: boolean) => void\"\n      description=\"Callback function to execute when hook 'change' triggered.\"\n    />\n    <FunctionArgument\n      name=\"isDisabled\"\n      type=\"boolean\"\n      description=\"Value that, if passed as 'true', prevents hook from trigger 'change' lifecycle.\"\n    />\n  </FunctionArgument>\n</FunctionArguments>\n\n## Returns\n\n<FunctionArguments>\n  <FunctionArgument name=\"result\" type=\"Object\">\n    <FunctionArgument name=\"isChecked\" type=\"boolean\" description=\"Returned value of current state.\" />\n    <FunctionArgument\n      name=\"onChange\"\n      type=\"() => void\"\n      description=\"Returned handler function to trigger the hook 'change' lifecycle.\"\n    />\n  </FunctionArgument>\n</FunctionArguments>\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useSwitch/useSwitch.stories.tsx",
    "content": "import React from \"react\";\nimport { useSwitch, Toggle, Flex } from \"@vibe/core\";\n\nexport default {\n  title: \"Hooks/useSwitch\"\n};\n\nexport const Overview = {\n  render: () => {\n    const { isChecked, onChange } = useSwitch();\n\n    return (\n      <Flex direction=\"column\" align=\"start\" gap=\"medium\">\n        <Toggle onChange={onChange} isSelected={isChecked} />\n        <code>isChecked: {isChecked.toString()}</code>\n      </Flex>\n    );\n  },\n\n  name: \"Overview\"\n};\n\nexport const Disabled = {\n  render: () => {\n    const { isChecked, onChange } = useSwitch({\n      isDisabled: true\n    });\n\n    return (\n      <Flex direction=\"column\" align=\"start\" gap=\"medium\">\n        <Toggle onChange={onChange} isSelected={isChecked} />\n        <code>isChecked: {isChecked.toString()}</code>\n      </Flex>\n    );\n  },\n\n  name: \"Disabled\"\n};\n\nexport const Default = {\n  render: () => {\n    const defaultChecked = true;\n\n    const { isChecked, onChange } = useSwitch({\n      defaultChecked\n    });\n\n    return (\n      <Flex direction=\"column\" align=\"start\" gap=\"medium\">\n        <Toggle onChange={onChange} isSelected={isChecked} />\n        <code>isChecked {isChecked.toString()}</code>\n        <code>defaultChecked: {defaultChecked.toString()}</code>\n      </Flex>\n    );\n  },\n\n  name: \"Default\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useTimeout/useTimeout.mdx",
    "content": "import { Canvas, Meta } from \"@storybook/blocks\";\nimport { FunctionArgument, FunctionArguments } from \"vibe-storybook-components\";\nimport * as UseTimeoutStories from \"./useTimeout.stories\";\n\n<Meta of={UseTimeoutStories} />\n\n# useTimeout\n\nUse this hook when you need to perform an action with timeout, this hook will cancel the timeout when the component unmounts.\n\n<Canvas of={UseTimeoutStories.Overview} />\n\n### Import\n\n```js\nimport { useTimeout } from \"@vibe/core\";\n```\n\n## Arguments\n\n<FunctionArguments>\n  <FunctionArgument name=\"options\" type=\"Object\">\n    <FunctionArgument name=\"time\" type=\"number\" description=\"The time (in ms) to wait before execution.\" default=\"0\" />\n    <FunctionArgument\n      name=\"callback\"\n      type=\"(value: string) => void\"\n      description=\"Callback function to execute when provided time has passed.\"\n      required\n    />\n    <FunctionArgument\n      name=\"ignoreZeroTime\"\n      type=\"boolean\"\n      description=\"If time provided is 0 (defer) ignore the callback.\"\n      default=\"false\"\n    />\n  </FunctionArgument>\n</FunctionArguments>\n\n## Returns\n\n<FunctionArguments>\n  <FunctionArgument name=\"result\" type=\"Array\">\n    <FunctionArgument type=\"() => void\" description=\"Cancels the timeout.\" />\n  </FunctionArgument>\n</FunctionArguments>\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useTimeout/useTimeout.stories.tsx",
    "content": "import React, { useCallback } from \"react\";\nimport { useTimeout } from \"@vibe/core\";\n\nexport default {\n  title: \"Hooks/useTimeout\"\n};\n\nexport const Overview = {\n  render: () => {\n    const callback = useCallback(() => {\n      alert(\"5s passed\");\n    }, []);\n\n    useTimeout({\n      time: 5000,\n      callback\n    });\n\n    return <div>Alert is coming!</div>;\n  },\n\n  name: \"Overview\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useVibeMediaQuery/useVibeMediaQuery.mdx",
    "content": "import { Canvas, Meta } from \"@storybook/blocks\";\nimport { FunctionArgument, FunctionArguments } from \"vibe-storybook-components\";\nimport { TableMediaQuery } from \"./useVibeMediaQuery.stories.helpers\";\nimport * as UseVibeMediaQueryStories from \"./useVibeMediaQuery.stories\";\n\n<Meta of={UseVibeMediaQueryStories} />\n\n# useVibeMediaQuery\n\nThis hook will return the value of the current vibe break point\n\n<TableMediaQuery />\n\n<Canvas of={UseVibeMediaQueryStories.Overview} />\n\n### Import\n\n```js\nimport { useVibeMediaQuery } from \"@vibe/core\";\n```\n\n## Arguments\n\nThis hook doesn't receive any parameters\n\n## Returns\n\n<FunctionArguments>\n  <FunctionArgument\n    name=\"result\"\n    type=\"number\"\n    description=\"The current number which reference the current applied breakpoint\"\n  />\n</FunctionArguments>\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useVibeMediaQuery/useVibeMediaQuery.stories.helpers.tsx",
    "content": "import React from \"react\";\nimport { TokenTable } from \"vibe-storybook-components\";\n\nexport const TableMediaQuery = () => {\n  const theadData = [\"Value\", \"Media query\"];\n\n  const tbodyData = [\n    {\n      id: \"1\",\n      items: [\"1\", \"screen and (max-width: 767px)\"]\n    },\n    {\n      id: \"2\",\n      items: [\"2\", \"screen and (max-width: 1023px) and (min-width: 768px) \"]\n    },\n    {\n      id: \"3\",\n      items: [\"3\", \"screen and (max-width: 1279px) and (min-width: 1024px)\"]\n    },\n    { id: \"4\", items: [\"4\", \"screen and (max-width: 1439px) and (min-width: 1280px)\"] },\n    { id: \"5\", items: [\"5\", \"screen and (max-width: 1919px) and (min-width: 1440px)\"] },\n    { id: \"6\", items: [\"6\", \"screen and (min-width: 1920px)\"] }\n  ];\n  return <TokenTable theadData={theadData} tbodyData={tbodyData} />;\n};\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useVibeMediaQuery/useVibeMediaQuery.stories.tsx",
    "content": "import React from \"react\";\nimport { useVibeMediaQuery, Box } from \"@vibe/core\";\n\nexport default {\n  title: \"Hooks/useVibeMediaQuery\"\n};\n\nexport const Overview = {\n  render: () => {\n    const currentSize = useVibeMediaQuery();\n    return (\n      <Box border rounded=\"small\" padding=\"medium\">\n        {currentSize}\n      </Box>\n    );\n  },\n\n  name: \"Overview\"\n};\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useWizard/useWizard.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { FunctionArgument, FunctionArguments } from \"vibe-storybook-components\";\nimport * as UseWizardStories from \"./useWizard.stories\";\n\n<Meta of={UseWizardStories} />\n\n# useWizard\n\nA custom hook for managing multi-step wizards. It provides state and functions to navigate between steps, along with directionality information.\n\n<Canvas of={UseWizardStories.Overview} />\n\n## Variants\n\n### With Initial Step\n\nStart the wizard from a custom initial step using the `initialStep` parameter.\n\n<Canvas of={UseWizardStories.WithInitialStep} />\n\n### With Steps component\n\n<Canvas of={UseWizardStories.WithStepsComponent} />\n\n## Arguments\n\n<FunctionArguments>\n  <FunctionArgument name=\"options\" type=\"Object\">\n    <FunctionArgument name=\"initialStep\" type=\"number\" description=\"The starting step of the wizard. Defaults to 0.\" />\n    <FunctionArgument name=\"stepCount\" type=\"number\" description=\"Total number of steps in the wizard.\" />\n    <FunctionArgument\n      name=\"onStepChange\"\n      type=\"(newStep: number, oldStep: number) => void\"\n      description=\"Callback invoked when the active step changes.\"\n    />\n    <FunctionArgument name=\"onFinish\" type=\"() => void\" description=\"Callback invoked when the wizard completes.\" />\n  </FunctionArgument>\n</FunctionArguments>\n\n## Returns\n\n<FunctionArguments>\n  <FunctionArgument name=\"result\" type=\"Object\">\n    <FunctionArgument name=\"activeStep\" type=\"number\" description=\"The current active step.\" />\n    <FunctionArgument\n      name=\"direction\"\n      type='\"forward\" | \"backward\"'\n      description=\"The direction of the last step change.\"\n    />\n    <FunctionArgument name=\"next\" type=\"() => void\" description=\"Function to proceed to the next step.\" />\n    <FunctionArgument name=\"back\" type=\"() => void\" description=\"Function to go back to the previous step.\" />\n    <FunctionArgument\n      name=\"goToStep\"\n      type=\"(newStep: number) => void\"\n      description=\"Function to navigate to a specific step.\"\n    />\n    <FunctionArgument\n      name=\"isFirstStep\"\n      type=\"boolean\"\n      description=\"Indicates if the current step is the first step.\"\n    />\n    <FunctionArgument name=\"isLastStep\" type=\"boolean\" description=\"Indicates if the current step is the last step.\" />\n  </FunctionArgument>\n</FunctionArguments>\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useWizard/useWizard.stories.module.scss",
    "content": ".stepper {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n"
  },
  {
    "path": "packages/docs/src/pages/hooks/useWizard/useWizard.stories.tsx",
    "content": "import React from \"react\";\nimport { useWizard, Button, Flex, Heading, Steps } from \"@vibe/core\";\nimport { type Decorator } from \"@storybook/react\";\nimport styles from \"./useWizard.stories.module.scss\";\n\nconst withUseWizardDecorator: Decorator = Story => (\n  <Flex direction=\"column\" gap=\"medium\">\n    <Story />\n  </Flex>\n);\n\nexport default {\n  title: \"Hooks/useWizard\",\n  decorators: [withUseWizardDecorator]\n};\n\nexport const Overview = {\n  render: () => {\n    const { activeStep, next, back, isFirstStep } = useWizard({\n      stepCount: 5,\n      onFinish: () => alert(\"Wizard Completed!\")\n    });\n\n    return (\n      <>\n        <Heading weight=\"medium\" type=\"h3\">\n          Active Step: {activeStep}\n        </Heading>\n        <Flex gap=\"small\">\n          <Button kind=\"tertiary\" onClick={back} disabled={isFirstStep}>\n            Back\n          </Button>\n          <Button onClick={next}>Next</Button>\n        </Flex>\n      </>\n    );\n  }\n};\n\nexport const WithInitialStep = {\n  render: () => {\n    const { activeStep, next, back, isFirstStep } = useWizard({\n      initialStep: 2,\n      stepCount: 5\n    });\n\n    return (\n      <>\n        <Heading weight=\"medium\" type=\"h3\">\n          Active Step: {activeStep}\n        </Heading>\n        <Flex gap=\"small\">\n          <Button kind=\"tertiary\" onClick={back} disabled={isFirstStep}>\n            Back\n          </Button>\n          <Button onClick={next}>Next</Button>\n        </Flex>\n      </>\n    );\n  }\n};\n\nexport const WithStepsComponent = {\n  render: () => {\n    const { activeStep, next, back, goToStep, isFirstStep } = useWizard({\n      stepCount: 5\n    });\n\n    const stepsContent = [\n      <div>Step 1</div>,\n      <div>Step 2</div>,\n      <div>Step 3</div>,\n      <div>Step 4</div>,\n      <div>Step 5</div>\n    ];\n\n    return (\n      <>\n        <Steps\n          className={styles.stepper}\n          areNavigationButtonsHidden\n          isContentOnTop\n          steps={stepsContent}\n          activeStepIndex={activeStep}\n          onChangeActiveStep={(_e, stepIndex) => goToStep(stepIndex)}\n        />\n        <Flex gap=\"small\">\n          <Button kind=\"tertiary\" onClick={back} disabled={isFirstStep}>\n            Back\n          </Button>\n          <Button onClick={next}>Next</Button>\n        </Flex>\n      </>\n    );\n  }\n};\n"
  },
  {
    "path": "packages/docs/src/pages/mcp/mcp.mdx",
    "content": "import { Meta, Source } from \"@storybook/blocks\";\nimport { Link, Tip, Frame, UsageGuidelines } from \"vibe-storybook-components\";\nimport { Text, Heading } from \"@vibe/core\";\nimport vibeXMcp from \"./assets/vibe-x-mcp.png\";\n\n<Meta title=\"MCP\" />\n\n# MCP Server\n\nThe Vibe MCP server enables AI assistants to interact intelligently with the Vibe Design System. Whether you're building components, migrating code, or exploring design tokens, MCP provides the context your AI needs to help you work more efficiently.\n\n<div style={{ width: \"100%\", display: \"flex\" }}>\n  <img\n    src={vibeXMcp}\n    alt=\"Vibe x MCP Integration\"\n    style={{ maxWidth: 800, width: \"100%\", borderRadius: \"var(--border-radius-medium)\", marginInline: \"auto\" }}\n  />\n</div>\n\n## Overview\n\nModel Context Protocol is an open standard that enables AI assistants to securely connect to external data sources and tools. The Vibe MCP server provides powerful tools that give AI assistants comprehensive access to the Vibe ecosystem.\n\n## Available Tools\n\n### Component Discovery\n\n- [`get-vibe-component-metadata`](#get-vibe-component-metadata) - Get comprehensive metadata for any Vibe component\n- [`list-vibe-public-components`](#list-vibe-public-components) - Browse all available public components in the Vibe ecosystem\n- [`get-vibe-component-accessibility`](#get-vibe-component-accessibility) - Get accessibility requirements and guidelines for Vibe components\n\n### Code Examples\n\n- [`get-vibe-component-examples`](#get-vibe-component-examples) - Access React implementation examples and best practices\n\n### Design System Resources\n\n- [`list-vibe-icons`](#list-vibe-icons) - Explore the complete Vibe icon library with smart filtering\n- [`list-vibe-tokens`](#list-vibe-tokens) - Access design tokens for consistent styling\n\n### Migration Assistant\n\n- [`v4-migration`](#v4-migration) - Advanced project analysis for Vibe 3 → Vibe 4 migration\n- [`v3-migration`](#v3-migration) - Advanced project analysis for Vibe 2 → Vibe 3 migration\n- [`dropdown-migration`](#dropdown-migration) - Tool for migrating from old Dropdown to new Dropdown\n\n## Tool Reference\n\n#### `get-vibe-component-metadata`\n\n**Use cases:**\n\n- Understand component APIs\n- Discover available props\n- Check component compatibility\n\n#### `list-vibe-public-components`\n\n**Use cases:**\n\n- Explore available components\n- Find alternatives to custom solutions\n- Discover new component releases\n- Component ecosystem overview\n\n#### `get-vibe-component-examples`\n\n**Perfect for:**\n\n- Learning component patterns\n- Understanding proper usage\n- Copy-paste ready code snippets\n- Implementation guidance\n\n#### `list-vibe-icons`\n\n**Features:**\n\n- 270+ available icons\n- Category filtering (Basic, Platform, View)\n- Text search across names and tags\n- Usage examples included\n- React component imports\n\n#### `list-vibe-tokens`\n\n**Includes:**\n\n- Color tokens (all themes)\n- Spacing and layout tokens\n- Border radius values\n- Motion and timing tokens\n\n#### `v4-migration`\n\nThis tool analyzes your entire project and provides:\n\n- **Comprehensive project scanning** - Identifies all Vibe component usage\n- **Breaking change detection** - Highlights components that need updates for Vibe 4\n- **Migration command generation** - Provides ready-to-run codemod commands\n- **Detailed migration report** - Complete analysis with recommendations\n\n<Tip title=\"Migration Made Easy\">\n  The migration tool follows the official Vibe 4 migration guide and generates precise codemod commands to automate most\n  of the migration process.\n</Tip>\n\n#### `v3-migration`\n\nThis tool analyzes your entire project and provides:\n\n- **Comprehensive project scanning** - Identifies all Vibe component usage\n- **Breaking change detection** - Highlights components that need updates\n- **Migration command generation** - Provides ready-to-run codemod commands\n- **Detailed migration report** - Complete analysis with recommendations\n\n<Tip title=\"Migration Made Easy\">\n  The migration tool follows the official Vibe 3 migration guide and generates precise codemod commands to automate most\n  of the migration process.\n</Tip>\n\n#### `dropdown-migration`\n\nSpecialized migration assistant for upgrading from the old Dropdown component to the new Dropdown available in `@vibe/core`.\n\n**Key capabilities:**\n\n- **Import path analysis** - Identifies old `@vibe/core` Dropdown imports that need updating\n- **Option structure detection** - Finds `{ id, text }` patterns that need conversion to `{ value, label }`\n- **Breaking changes identification** - Detects usage of removed props and changed behaviors\n- **Comprehensive project scanning** - Analyzes entire codebase for Dropdown-related code patterns\n- **Detailed migration recommendations** - Provides step-by-step guidance with specific file locations\n\n## Installation\n\n### For Cursor Users\n\n[![Install MCP Server](https://cursor.com/deeplink/mcp-install-dark.svg)](https://cursor.com/en/install-mcp?name=vibe&config=eyJjb21tYW5kIjoibnB4IC15IEB2aWJlL21jcCJ9)\n\nOr manually add to your `~/.cursor/mcp.json`:\n\n<Source\n  language=\"json\"\n  code={`{\n  \"mcpServers\": {\n    \"vibe\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@vibe/mcp\"]\n    }\n  }\n}`}\n/>\n\n### For VSCode Users\n\n[Click this link](vscode://mcp-server/add?config=%7B%22name%22%3A%22vibe%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22%40vibe%2Fmcp%22%5D%7D) to auto-configure, or manually add to your `.vscode/mcp.json`:\n\n<Source\n  language=\"json\"\n  code={`{\n  \"servers\": {\n    \"vibe\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@vibe/mcp\"]\n    }\n  }\n}`}\n/>\n\n## Usage Examples\n\n### Component Development\n\nAsk your AI assistant: _\"I need a button that shows a loading state\"_\n\nThe MCP will:\n\n1. Find Button component metadata\n2. Show loading prop usage examples\n3. Provide accessibility guidelines\n\n### Icon Discovery\n\nAsk your AI assistant: _\"Find icons related to calendar or scheduling\"_\n\nThe MCP will:\n\n1. Search icon library with \"calendar\" query\n2. Return matching icons with usage examples\n3. Include import statements and props\n\n### Design Token Usage\n\nAsk your AI assistant: _\"What spacing tokens are available for margins?\"_\n\nThe MCP will:\n\n1. Filter tokens by \"spacing\" category\n2. Show all margin-related design tokens\n3. Provide CSS custom property usage\n\n### Migration to v4\n\nAsk your AI assistant: _\"Help me migrate this React project from Vibe 3 to Vibe 4\"_\n\nThe MCP will:\n\n1. Analyze entire project structure\n2. Identify breaking changes and deprecated component usage\n3. Generate specific codemod commands\n4. Provide step-by-step recommendations\n\n### Migration to v3\n\nAsk your AI assistant: _\"Help me migrate this React project from Vibe 2 to Vibe 3\"_\n\nThe MCP will:\n\n1. Analyze entire project structure\n2. Identify deprecated component usage\n3. Generate specific migration commands\n4. Provide step-by-step recommendations\n\n### Dropdown Migration\n\nAsk your AI assistant: _\"Help me migrate my Dropdown components to the new version\"_\n\nThe MCP will:\n\n1. Scan for all Dropdown imports and usage patterns\n2. Detect removed props and changed behaviors\n3. Provide detailed migration steps with file-specific recommendations\n\n## Benefits\n\n<UsageGuidelines\n  guidelines={[\n    \"Faster development - Skip documentation lookup with instant access to component APIs\",\n    \"Accurate guidance - Get precise, up-to-date information directly from the source\",\n    \"Seamless migration - Automate complex migration tasks with intelligent analysis\",\n    \"Design consistency - Ensure proper design token usage across your application\"\n  ]}\n/>\n\n## Contributing\n\nThe [Vibe MCP server repository](https://github.com/mondaycom/vibe/tree/main/packages/mcp) is open source and welcomes contributions!\n\n**Ways to contribute:**\n\n- Report bugs or issues\n- Suggest new tools or features\n- Improve documentation\n- Submit pull requests for new features\n"
  },
  {
    "path": "packages/docs/src/pages/migration-guide/DiffCodeBlock.tsx",
    "content": "import React from \"react\";\nimport { Prism as SyntaxHighlighter } from \"react-syntax-highlighter\";\nimport { prism } from \"react-syntax-highlighter/dist/esm/styles/prism\";\n\nexport function DiffCodeBlock({ code }: { code: string }) {\n  return (\n    <SyntaxHighlighter\n      language=\"diff\"\n      style={{\n        ...prism,\n        deleted: {\n          color: \"#a31515\"\n        },\n        inserted: {\n          color: \"#09885a\"\n        }\n      }}\n      customStyle={{\n        backgroundColor: \"transparent\",\n        border: \"1px solid hsla(203, 50%, 30%, 0.15)\",\n        borderRadius: \"4px\"\n      }}\n      codeTagProps={{\n        style: {\n          margin: 0,\n          fontFamily: \"monospace\",\n          fontSize: \"13px\",\n          backgroundColor: \"transparent\",\n          border: \"none\",\n          lineHeight: \"19px\"\n        }\n      }}\n    >\n      {code}\n    </SyntaxHighlighter>\n  );\n}\n"
  },
  {
    "path": "packages/docs/src/pages/migration-guide/vibe-3-changelog.md",
    "content": "# Vibe 3 Changelog\n\nThis is the complete list of changes and deprecations in the Vibe 3 release. Changes that are marked with a 🔀 are covered by a migration script (codemod).\n\nFor the complete migration guide see the [Vibe 3 Migration Guide](https://vibe.monday.com/?path=/docs/migration-guide).\n\n## General\n\n- CommonJS support removed\n- Package rename - `monday-ui-react-core` renamed to `@vibe/core`: 🔀\n  - `/tokens` -> `@vibe/core/tokens` 🔀\n  - `/interactionsTests` -> `@vibe/core/interactionsTests` 🔀\n  - `/testIds` -> `@vibe/core/testIds` 🔀\n  - `/mockedClassNames` -> `@vibe/core/mockedClassNames`\n- Removed entry points:\n  - `/types` removed, import from `@vibe/core` instead 🔀\n- Entry points moved to a new package:\n  - `/icons` -> use `@vibe/icons` package instead 🔀\n  - `/storybookComponents` removed, use the `vibe-storybook-components` package instead\n- `monday-ui-react-core/dist/main.css` removed, use `@vibe/core/tokens` instead\n- Removed svg icons from `monday-ui-style/src/Icons/`, use `@vibe/icons/raw` instead\n- All components' props interfaces are exported\n\n## Colors\n\n- The `--shareable-color` and `--private-color` CSS variables were removed for all themes\n- The `color-warning`, `color-warning-hover`, `color-warning-select`, `color-warning-select-hover` colors were removed from the `colors.json` file (in `monday-ui-style` package), use `warning-color-*` respectively\n\n## Typography\n\n- Overhauled typography system, for more information check out the [Typography page](https://vibe.monday.com/?path=/docs/foundations-typography)\n- `Text` and `Heading` API and style changed\n\n## Components\n\n### AttentionBox\n\n> codemod: `AttentionBox-component-migration`\n\n- The `componentClassName` prop has been removed, use `className` instead 🔀\n\n### Avatar\n\n> codemod: `Avatar-component-migration`\n\n- The `isSquare` prop has been removed, use `square` instead 🔀\n- The `isDisabled` prop has been removed, use `disabled` instead 🔀\n\n### AvatarGroup\n\n> codemod: `AvatarGroup-component-migration`\n\n- The `removePadding` prop has been removed, and the component no longer gets a padding bottom 🔀\n\n### Box\n\n> codemod: `Box-component-migration`\n\n- The `border` prop type has been changed from string to boolean, and so the `Box.borders` static prop has been removed 🔀\n\n### BreadcrumbItem\n\n> codemod: `BreadcrumbItem-component-migration`\n\n- The `isDisabled` prop has been removed, use `disabled` instead 🔀\n\n### Button\n\n> codemod: `Button-component-migration`\n\n- The `dataTestId` prop has been removed, use `data-testid` instead 🔀\n- The `children` prop is now mandatory\n- The `sm`, `md`, `lg` sizes were removed, use `small`, `medium`, `large` respectively\n\n### ButtonGroup\n\n> codemod: `ButtonGroup-component-migration`\n\n- The `componentClassName` prop has been removed, use `className` instead 🔀\n\n### Checkbox\n\n> codemod: `Checkbox-component-migration`\n\n- The `componentClassName` prop has been removed, use `className` instead 🔀\n\n### Chips\n\n> codemod: `Chips-component-migration`\n\n- The `dataTestId` prop has been removed, use `data-testid` instead 🔀\n- The `DARK_INDIGO` and `BLACKISH` colors were removed from the `color` prop\n- The `clickable` and `isClickable` props were removed, use `onClick` instead, to get clickable behavior and style 🔀\n\n### Clickable\n\n> codemod: `Clickable-component-migration`\n\n- The `dataTestId` prop has been removed, use `data-testid` instead 🔀\n\n### Counter\n\n> codemod: `Counter-component-migration`\n\n- The `wrapperClassName` prop has been removed, use `className` instead 🔀\n- The `sm`, `md`, `lg` sizes were removed, use `small`, `medium`, `large` respectively\n\n### Dialog\n\n> codemod: `Dialog-component-migration`\n\n- The `shoudlCallbackOnMount` prop has been removed, use `shouldCallbackOnMount` instead 🔀\n\n### DialogContentContainer\n\n> codemod: `DialogContentContainer-component-migration`\n\n- The \"medium\" `size` now has an increased padding, correcting a previous sizing issue where \"medium\" and \"small\" had identical paddings. As a result, \"small\" is now the default size 🔀\n\n### Divider\n\n> codemod: `Divider-component-migration`\n\n- The `classname` prop has been removed, use `className` instead 🔀\n\n### Flex\n\n- The `Flex.gaps.NONE` property has been removed. To specify no gap simply omit the `gap` prop\n\n### Dropdown\n\n> codemod: `Dropdown-component-migration`\n\n- The `Dropdown.size` property was removed, use `Dropdown.sizes` instead 🔀\n- The `xxs`, `xs` sizes were acting as the `small` size and therefore removed. Use `small` instead\n- The `withReadOnlyStyle` prop was removed, new readonly style will be applied automatically when using the `readOnly` prop 🔀\n\n### EditableInput\n\n- `EditableInput` removed, use [EditableText](https://vibe.monday.com/?path=/docs/components-editabletext) instead\n\n### Heading\n\n- `Heading` component API and style changed, follow the [Heading](https://vibe.monday.com/?path=/docs/text-heading) docs for the new API.\n\n### Icon\n\n> codemod: `Icon-component-migration`\n\n- The `clickable`, `onClick` props were removed 🔀, use `<IconButton>` for clickable icons\n\n### IconButton\n\n> codemod: `IconButton-component-migration`\n\n- The `dataTestId` prop has been removed, use `data-testid` instead 🔀\n\n## Input\n\n> codemod: `InputField-component-import-migration`\n\n- `Input` removed - use [TextField](https://vibe.monday.com/?path=/docs/components-textfield) 🔀\n\n### Label\n\n> codemod: `Label-component-migration`\n\n- The `wrapperClassName` prop has been removed, use `className` instead 🔀\n- The \"Spin In\" animation was removed, and so the `isAnimationDisabled` prop has been removed 🔀\n\n### EditableHeading\n\n- API and style changed, follow the [EditableHeading](https://vibe.monday.com/?path=/docs/components-editableheading) docs for the new API\n\n### Link\n\n> codemod: `Link-component-migration`\n\n- The `componentClassName` prop has been removed, use `className` instead 🔀\n- The static `Link.target` property was removed, use `Link.targets` instead 🔀\n\n### Loader\n\n> codemod: `Loader-component-migration`\n\n- The `svgClassName` prop has been removed, use `className` instead 🔀\n\n### Menu\n\n> codemod: `Menu-component-migration`\n\n- The `classname` prop has been removed, use `className` instead 🔀\n\n### MenuDivider\n\n> codemod: `MenuDivider-component-migration`\n\n- The `classname` prop has been removed, use `className` instead 🔀\n\n### MenuItem\n\n> codemod: `MenuItem-component-migration`\n\n- The `classname` prop has been removed, use `className` instead 🔀\n- The provided tooltip (when the text is overflowing) now wraps the entire element so non-block layout given to the `title` prop may break\n\n### MenuItemButton\n\n> codemod: `MenuItemButton-component-migration`\n\n- The `classname` prop has been removed, use `className` instead 🔀\n\n### MenuTitle\n\n> codemod: `MenuTitle-component-migration`\n\n- The `classname` prop has been removed, use `className` instead 🔀\n\n### MenuButton\n\n> codemod: `MenuButton-component-migration`\n\n- The `componentClassName` prop has been removed, use `className` instead 🔀\n- The `disabledReason` prop has been removed, use `tooltipContent` instead 🔀\n- The `hideWhenReferenceHidden` prop default value changes to \"true\", meaning when the MenuButton is hidden hide the dialog and tooltip as well. To disable this behavior set `hideWhenReferenceHidden` to \"false\"\n\n\n### Modal\n\n> codemod: `Modal-component-migration`\n\n- The `hideCloseButton` has been removed since Modals should always have a close button 🔀\n- The `unmountOnClose` prop default value changes to \"true\", meaning the Modal will not render when `show` is \"false\". To disable this behavior set `unmountOnClose` to \"false\"\n- Tooltips, Tipseens, and Dialogs on Modals will now be rendered inside the Modal's container by default, without any z-index interference\n\n### ModalHeader\n\n> codemod: `ModalHeader-component-migration`\n\n- The `hideCloseButton` has been removed since Modals should always have a close button 🔀\n\n### RadioButton\n\n> codemod: `RadioButton-component-migration`\n\n- The `classname` prop has been removed, use `className` instead 🔀\n\n## Search\n\n- `Search` has changed - follow the [Search](https://vibe.monday.com/?path=/docs/components-search) docs for the new API.\n\n## SearchComponent\n\n> codemod: `SearchComponent-import-migration`\n\n- `SearchComponent` component removed - use [Search](https://vibe.monday.com/?path=/docs/components-search) 🔀\n\n## SplitButton\n\n- The `data-testId` prop will no longer be applied to the internal elements, only the root element\n\n### Steps\n\n> codemod: `Steps-component-migration`\n\n- The `isOnPrimary` prop was removed, use `color=\"primary` instead 🔀\n\n### Tabs\n\n- Browser's default margin/padding for ul, li elements was reset\n\n### TabList\n\n> codemod: `TabList-component-migration`\n\n- The component no longer gets a padding bottom, and so the `noPadding` prop was removed 🔀\n\n### TabPanels\n\n> codemod: `TabPanels-component-migration`\n\n- TabPanels will render only the active tab instead of rendering all the panels, and so the `renderOnlyActiveTab` was removed 🔀\n\n### TextField\n\n> codemod: `TextField-component-migration`\n\n- The `dataTestId` prop has been removed, use `data-testid` instead 🔀\n- The `iconsNames` prop no longer accepts the `layout` property\n- Providing the `required` prop will now show a red asterisk, implying that the field is mandatory, and so the `requiredAsterisk` prop was removed 🔀\n- The `withReadOnlyStyle` prop was removed, new readonly style will be applied automatically when using the `readOnly` prop 🔀\n- The `sm`, `md`, `lg` sizes were removed, use `small`, `medium`, `large` respectively\n\n### ThemeProvider\n\n> codemod: `ThemeProvider-component-migration`\n\n- The `theme` has been removed, use `themeConfig` instead 🔀\n\n### Tipseen\n\n> codemod: `Tipseen-component-migration`\n\n- The `content` prop is now mandatory\n- The default `color` has changed from 'primary' to 'inverted'. To keep the previous color, set the `color` prop to 'primary'\n- The `isCloseButtonHidden` prop has been removed, use `hideCloseButton` instead 🔀\n- The `showDelay` prop's default value has changed to 100\n- The `justify` prop was removed, and so the `Tipseen.justifyTypes` static property was removed as well\n\n### TipseenContent\n\n> codemod: `TipseenContent-component-migration`\n\n- The `isDismissHidden` prop has been removed, use `hideDismiss` instead 🔀\n- The `isSubmitHidden` prop has been removed, use `hideSubmit` instead 🔀\n- The `submitButtonProps`, `dismissButtonProps` props were removed, use `submitButtonText` and `dismissButtonText` to change the buttons' text\n\n### Toggle\n\n> codemod: `Toggle-component-migration`\n\n- The `componentClassName` prop has been removed, use `className` instead 🔀\n- The `isDisabled` prop has been removed, use `disabled` instead 🔀\n\n### Tooltip\n\n> codemod: `Tooltip-component-migration`\n\n- The `paddingSize`, `justify`, and `arrowPosition` props were removed. Accordingly the `Tooltip.paddingSizes`, `Tooltip.justifyTypes`, and `Tooltip.arrowPositions` static properties were removed as well\n- The `theme` prop can now accept only \"dark\" or \"primary\"\n- The `position` prop can now accept only \"top, right, bottom, left\"\n- The `showOnDialogEnter` props's default value has changed to `true`; now the tooltip will remain open be default when hovering over it\n- The `hideDelay` props's default value has changed to 100\n- The `addKeyboardHideShowTriggersByDefault` default changed to true, making it accessible with keyboard navigation\n- The tooltip's max-width is now set to 240px, and so the `withMaxWidth` prop removed 🔀\n- Tooltip's `content` is now wrapped in another `div`, meaning that non-block layouts inside the tooltip may break\n- The `containerSelector` will now fallback to `document.body` instead of `#tooltips-container` if not provided\n\n### ColorPicker\n\n> codemod: `ColorPicker-component-migration`\n\n- The static `ColorPicker.COLOR_STYLES` property has been removed, use `ColorPicker.colorStyles` instead 🔀\n\n### ColorPickerContent\n\n> codemod: `ColorPickerContent-component-migration`\n\n- The static `ColorPickerContent.COLOR_STYLES` property has been removed, use `ColorPickerContent.colorStyles` instead 🔀\n\n### ResponsiveList\n\n- Component was removed, use the [useIsOverflowing](https://vibe.monday.com/?path=/docs/hooks-useisoverflowing) hook instead\n\n## Icons\n\n- The `Upgrade` icon has been removed, and the `Featured` icon has been renamed to `Upgrade`\n- The `Replay` icon has been renamed to `Reply`\n\n## Hooks\n\n### useClickableProps\n\n> codemod: `useClickableProps-hook-migration`\n\n- The `dataTestId` prop has been removed, use `data-testid` instead 🔀\n"
  },
  {
    "path": "packages/docs/src/pages/migration-guide/vibe-4-changelog.md",
    "content": "# Vibe 4 Changelog\n\nThis is the complete list of changes in the Vibe 4 release. Changes that are marked with a 🔀 are covered by a migration script (codemod).\n\nFor the complete migration guide see the [Vibe 4 Migration Guide](https://vibe.monday.com/?path=/docs/vibe-4-migration-guide--docs).\n\n## General\n\n- React 19 support — all deprecated React APIs removed, including dependencies\n- `moment` removed as a peer dependency\n- `@vibe/core/next` consolidation — AttentionBox, Dropdown, DatePicker, and Modal promoted to `@vibe/core`. Only `List` remains in `@vibe/core/next` 🔀\n- All deprecated enum exports and static properties removed across all components 🔀 (see [Enums](#enums) section)\n- ARIA props renamed from camelCase to standard `aria-*` attributes across all components 🔀 (see [ARIA Props](#aria-props) section)\n- Internal Package rename — `monday-ui-style` renamed to `@vibe/style` (the package is included in @vibe/core) 🔀\n\n## Enums\n\n> codemod: `enums-migration`\n\nAll deprecated enum exports and static property accessors have been removed. Use string literals instead. 🔀\n\nAffected components: AlertBanner, AttentionBox, Avatar, Badge, Box, Button, Clickable, ColorPicker, Counter, Dialog, Divider, Dropdown, Flex, Heading, Icon, IconButton, Label, LinearProgressBar, List, ListItem, ListItemIcon, Loader, MenuButton, MenuTitle, MultiStepIndicator, Skeleton, Slider, Steps, TabPanels, Text, TextField, ThemeProvider, Tipseen, Toast, Tooltip.\n\nExample: `Button.sizes.LARGE` → `\"large\"`, `ButtonType.PRIMARY` → `\"primary\"`\n\n## ARIA Props\n\n> codemod: `aria-props-migration`\n\nAll custom camelCase ARIA props renamed to standard HTML `aria-*` attributes. 🔀\n\n- `ariaLabel` → `aria-label` 🔀\n- `ariaHidden` → `aria-hidden` 🔀\n- `ariaExpanded` → `aria-expanded` 🔀\n- `ariaControls` → `aria-controls` 🔀\n- `ariaHasPopup` → `aria-haspopup` 🔀\n- `ariaLabeledBy` / `ariaLabelledBy` → `aria-labelledby` 🔀\n- `ariaDescribedBy` / `ariaDescribedby` → `aria-describedby` 🔀\n- `ariaLabelDescription` (Link) → `aria-label` 🔀\n\nNote: Component-specific compound props like `inputAriaLabel`, `menuAriaLabel`, `closeButtonAriaLabel` are not affected.\n\n## Components\n\n### AttentionBox\n\n- Legacy `AttentionBox` removed, new implementation (from `@vibe/core/next`) promoted to `@vibe/core` 🔀\n- `AttentionBoxLink` removed as a public export — use the `link` prop instead\n- `AttentionBoxConstants` removed (deprecated enums: `AttentionBoxType`, `IconTypeEnum`) 🔀\n- Type values changed: `\"success\"` → `\"positive\"`, `\"danger\"` → `\"negative\"`, `\"dark\"` → `\"neutral\"`\n- `entryAnimation` prop → `animate`\n- `withoutIcon` / `withIconWithoutHeader` props removed — use `icon={false}`\n\n### Chips\n\n> codemod: `Chips-component-migration`\n\n- The `disableClickableBehavior` prop has been removed — Chips now always uses the clickable wrapper when click handlers are provided 🔀\n\n### Clickable\n\n- `ariaHasPopup` now accepts `boolean` only (was `boolean | string`)\n- `tabIndex` now accepts `number` only (was `string | number`)\n\n### DatePicker\n\n- Legacy DatePicker (`react-dates` + `moment`) replaced with new implementation (`react-day-picker` + `date-fns`) with an updated visual design\n- `date` prop type changed from `moment.Moment` to `Date`\n- `onPickDate` renamed to `onDateChange`\n- `range` boolean prop replaced with `mode: \"single\" | \"range\"`\n- `moment` no longer required as a peer dependency\n\n### Dialog\n\n> codemod: `Dialog-component-migration`\n\n- Legacy class-based Dialog (Popper.js) replaced with new functional Dialog (Floating UI)\n- `modifiers` prop removed — use `middleware` prop instead\n- `enableNestedDialogLayer` prop removed — layer handling is always used internally 🔀\n- `addKeyboardHideShowTriggersByDefault` default changed to `true`\n\n### Dropdown\n\n- Old `react-select`-based Dropdown removed, in favor of a new improved and customizable Dropdown\n- Import changed from `@vibe/core/next` to `@vibe/core` 🔀\n- Options structure changed from `{ id, text }` to `{ value, label }`\n- Sub-components removed: `DropdownMenu`, `DropdownOption`, `DropdownSingleValue`\n- `padding-inline-start` reduced from `16px` to `8px` on Dropdown Trigger\n- Placeholder now uses `var(--placeholder-color)` instead of `var(--secondary-text-color)`\n- See the [Dropdown Migration Guide](https://vibe.monday.com/?path=/docs/components-dropdown-migration-guide--docs)\n\n### Flex\n\n> codemod: `Flex-component-migration`\n\n- The `\"stretch\"` value removed from `justify` prop 🔀\n\n### Icon\n\n> codemod: `Icon-component-migration`\n\n- `iconLabel` prop renamed to `label` 🔀\n- `iconType` prop renamed to `type` 🔀\n- `iconSize` prop renamed to `size` 🔀\n- `size` prop now applies to `type=\"src\"` icons (previously only affected `type=\"svg\"`)\n- `onClick` and `clickable` props removed from internal `CustomSvgIcon` — wrap with a clickable element (e.g. `<IconButton>`) instead\n\n### LinearProgressBar (ProgressBar)\n\n> codemod: `LinearProgressBar-component-migration`\n\n- `LinearProgressBar` renamed to `ProgressBar` 🔀\n- `LinearProgressBarProps` renamed to `ProgressBarProps` 🔀\n\n### MenuButton\n\n- `focusItemIndexOnMount` now defaults to `0` for Menu children (first item focused on open)\n\n### MenuItem\n\n- `children` prop now accepts only a single `MenuChild`, not `MenuChild[]`\n\n### Modal\n\n- Legacy Modal removed and replaced with a completely new Modal component with a different API (previously available via `@vibe/core/next`) 🔀\n- Removed: `ModalFooterButtons`, `ModalWidth` type, legacy sub-component props\n- New: `ModalBasicLayout`, `ModalMediaLayout`, `ModalSideBySideLayout`, `ModalFooterWizard`\n- For more info see [Modal docs](https://vibe.monday.com/?path=/docs/components-modal-new--docs)\n\n### Steps\n\n- Finish button now renders by default on the last step\n\n### Tipseen\n\n- `modifiers` prop removed — use `middleware` instead (same as Dialog/Tooltip). For more info see [Floating UI docs](https://floating-ui.com/docs/middleware).\n\n### TextField\n\n> codemod: `TextField-component-migration`\n\n- `iconName` prop renamed to `icon` 🔀\n- `iconsNames` object prop replaced with flat `iconLabel` and `secondaryIconLabel` props 🔀\n- `padding-inline-start` reduced from `16px` to `8px`\n- Placeholder now uses `var(--placeholder-color)` instead of `var(--secondary-text-color)`\n\n### Search\n\n- `padding-inline-start` reduced from `16px` to `8px`\n- Placeholder now uses `var(--placeholder-color)` instead of `var(--secondary-text-color)`\n\n### TextArea\n\n- `padding-inline-start` reduced from `16px` to `8px`\n- Placeholder now uses `var(--placeholder-color)` instead of `var(--secondary-text-color)`\n\n### NumberField\n\n- `padding-inline-start` reduced from `16px` to `8px`\n- Placeholder now uses `var(--placeholder-color)` instead of `var(--secondary-text-color)`\n\n### Combobox\n\n- `padding-inline-start` reduced from `16px` to `8px`\n- Placeholder now uses `var(--placeholder-color)` instead of `var(--secondary-text-color)`\n\n### TextWithHighlight\n\n> codemod: `TextWithHighlight-component-migration`\n\n- The `tooltipPosition` prop has been removed, use `tooltipProps={{ position: \"value\" }}` instead 🔀\n\n### TipseenImage\n\n> codemod: `TipseenImage-component-migration`\n\n- `TipseenImage` component removed — use `TipseenMedia` with an `<img>` child instead 🔀\n\n### Toggle\n\n> codemod: `Toggle-component-migration`\n\n- The `noSpacing` prop has been removed — margin is auto-removed when `areLabelsHidden` is `true` 🔀\n- Duplicate `data-testid=\"toggle\"` removed from internal visual div — the test ID is now only on the input element\n\n### Tooltip\n\n- `modifiers` prop removed — use `middleware` instead (same as Dialog)\n\n### VirtualizedGrid\n\n- `itemRenderer` return type corrected to `ReactElement`\n\n### VirtualizedList\n\n> codemod: `VirtualizedList-component-migration`\n\n- `getItemHeight` prop renamed to `getItemSize` 🔀\n- `onVerticalScrollbarVisiblityChange` prop renamed to `onLayoutDirectionScrollbarVisibilityChange` 🔀\n\n## Hooks\n\n### useMergeRefs\n\n- Removed from `@vibe/core` — use `react-merge-refs` or implement your own\n\n### useListenFocusTriggers\n\n- Removed from `@vibe/core` — inline the logic using `useEventListener`\n\n### useActiveDescendantListFocus\n\n- `onItemClickCallback` and `createOnItemClickCallback` return values removed — use `onItemClick` directly\n\n### useKeyEvent\n\n- `callback` type changed from `GenericEventCallback` to `KeyboardEventCallback` (native `KeyboardEvent`)\n\n## CSS and Design Tokens\n\n### Spacing Tokens\n\n- Deprecated semantic spacing tokens removed from `@vibe/style` 🔀 (stylelint auto-fix via `@vibe/style/use-new-spacing-tokens`)\n  - `--spacing-xs` → `--space-4`\n  - `--spacing-small` → `--space-8`\n  - `--spacing-medium` → `--space-16`\n  - `--spacing-large` → `--space-24`\n  - `--spacing-xl` → `--space-32`\n  - `--spacing-xxl` → `--space-48`\n  - `--spacing-xxxl` → `--space-64`\n\nFor more info see the [Spacing page](https://vibe.monday.com/?path=/docs/foundations-spacing--spacing)\n"
  },
  {
    "path": "packages/docs/src/pages/migration-guide/vibe-4-migration-guide.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport { Link, Tip } from \"vibe-storybook-components\";\nimport { DiffCodeBlock } from \"./DiffCodeBlock\";\n\n<Meta title=\"Migration Guide\" />\n\n# Vibe 4 Migration Guide\n\n<br />\n\n<div style={{ lineHeight: \"1.8\" }}>\n\n- [What's New ✨](#whats-new-)\n- [Migration Steps 🚀](#migration-steps-)\n- [Breaking Changes 🚨](#breaking-changes-)\n  - [Components](#components)\n  - [Hooks](#hooks)\n  - [CSS and Design Tokens](#css-and-design-tokens)\n- [FAQ ❓](#faq-)\n- [Help 🙏](#help-)\n\nVibe 4 is a major update to the Vibe design system, built for **React 19 compatibility**. It also delivers a leaner bundle, modern APIs, and stronger type safety. Legacy components, deprecated enums, and outdated dependencies have been removed in favor of simpler, more consistent alternatives.\n\n<Tip title=\"Older versions migrations\" emoji={false}>\n\n- From v2 to v3 see [Vibe 3 migration guide](https://vibe.monday.com/v3/?path=/docs/migration-guide--docs)\n- From v1 to v2 see [Vibe 2 migration guide](https://github.com/mondaycom/vibe/tree/master/packages/docs/src/pages/migration-guide/vibe2-migration-guide.md)\n\n</Tip>\n\n## What's New ✨\n\n### React 19 support\n\nVibe 4 is fully compatible with React 19.\n\nIf your app is upgrading to React 19, you **must** upgrade to Vibe 4 — Vibe 3 is not compatible with React 19.\n\n### New component implementations\n\nSeveral components have been completely rewritten with new APIs:\n\n- **Dropdown** - New custom implementation replacing the old `react-select`-based Dropdown\n- **Modal** - New component with layout-based API (`ModalBasicLayout`, `ModalMediaLayout`, etc.)\n- **AttentionBox** - New implementation with simplified props\n- **DatePicker** - New implementation using native `Date` objects and `date-fns` instead of `moment`\n- **Dialog/Tooltip/Tipseen** - Now powered by Floating UI (replacing Popper.js)\n\n### Smaller bundle\n\nSeveral internal runtime dependencies have been removed resulting in a significantly smaller bundle.\n\n### No more enums or static properties\n\nAll deprecated enum exports (e.g. `ButtonType`, `DialogPositionEnum`) and static property accessors (e.g. `Button.sizes.LARGE`) have been removed in favor of string literals, which are type-safe, tree-shakeable, and provide the same IntelliSense experience.\n\n### Standard ARIA props\n\nCustom camelCase ARIA props (`ariaLabel`, `ariaHidden`, etc.) have been replaced with the standard HTML `aria-*` attributes that React natively supports, eliminating an unnecessary abstraction layer.\n\n## Migration Steps 🚀\n\n### With AI (recommended)\n\n<Tip emoji={false} type=\"success\" title=\"Install the Vibe MCP\">\n  To migrate faster and easier using AI, make sure you have the [Vibe MCP server](?path=/docs/mcp--docs) installed.\n</Tip>\n\n1. Ask your AI assistant:\n\n   ```\n   Help me migrate this project from Vibe 3 to Vibe 4 using the Vibe MCP v4 migration tool\n   ```\n\n2. This will scan your codebase, identify the breaking changes, run the codemods automatically, and will fix all the issues.\n\n3. **Review the changes and test your application thoroughly.**\n\n4. Run your code formatter to clean up any formatting changes from the codemod (optional).\n\n### Manually\n\nIf you prefer to migrate manually, follow these steps:\n\n1. Update `@vibe/core`:\n\n   ```bash\n   yarn add @vibe/core@^4.0.0\n   ```\n\n2. Run the automated migration codemod:\n\n   ```bash\n   npx @vibe/codemod -m v4\n   ```\n\n   The codemod handles enum-to-string-literal conversions, ARIA prop renames, Icon prop renames, and several component-specific migrations. For more options, see the [@vibe/codemod docs](https://github.com/mondaycom/vibe/blob/master/packages/codemod/README.md).\n\n3. Follow the [Breaking Changes](#breaking-changes-) section below and apply any remaining manual changes.\n\n4. **Review the changes and test your application thoroughly.**\n\n5. Run your code formatter to clean up any formatting changes from the codemod (optional).\n\n## Breaking Changes 🚨\n\nThe following changes are **complementary to the migration codemod** and may require manual intervention. If you prefer to migrate entirely by hand (without `@vibe/codemod`), refer to the [Complete Vibe 4 changelog](https://github.com/mondaycom/vibe/blob/master/packages/docs/src/pages/migration-guide/v4-changelog.md).\n\n### Components\n\n**AttentionBox**\n\n- The component has been completely rewritten with a new API. Legacy `AttentionBox` removed, new implementation (previously at `@vibe/core/next`) promoted to `@vibe/core`\n- `AttentionBoxLink` component removed, use the `link` prop instead\n- Type values changed: `\"success\"` → `\"positive\"`, `\"danger\"` → `\"negative\"`, `\"dark\"` → `\"neutral\"`\n- `entryAnimation` prop → `animate`\n- `withoutIcon` / `withIconWithoutHeader` props removed — use `icon={false}`\n\n**Clickable**\n\n- `ariaHasPopup` now accepts `boolean` only (was `boolean | string`)\n- `tabIndex` now accepts `number` only (was `string | number`)\n\n**DatePicker**\n\n- The legacy DatePicker (based on `react-dates` and `moment.js`) has been replaced with a completely new component (previously at `@vibe/core/next`) with a different visual design, and promoted to `@vibe/core`\n- `date` prop now uses native `Date` objects instead of `moment.Moment`\n- `onPickDate` prop renamed to `onDateChange`\n- `range` boolean prop replaced with `mode: \"single\" | \"range\"`\n- `moment` no longer required as a peer dependency\n\n**Dialog**\n\n- The legacy class-based Dialog (Popper.js) has been replaced with a new functional Dialog (Floating UI)\n- The `modifiers` prop (Popper.js) has been removed — use [middleware](https://floating-ui.com/docs/middleware) prop (Floating UI) instead\n- `addKeyboardHideShowTriggersByDefault` now defaults to `true` — set it explicitly to `false` if you relied on the previous default\n\n**Dropdown**\n\n- The old `react-select`-based Dropdown has been removed. The new custom Dropdown (previously at `@vibe/core/next`) is now the default with a completely different API. See the [Dropdown Migration Guide](?path=/docs/components-dropdown-migration-guide--docs) for full details\n\n**Combobox**\n\n- The `Combobox` component is marked as **deprecated** and will be removed in a future version. Use [Dropdown with box mode](?path=/docs/components-dropdown--docs) instead\n\n**Icon**\n\n- `size` prop now applies to `type=\"src\"` icons (previously only affected `type=\"svg\"`)\n\n**MenuButton**\n\n- MenuButton now passes `focusItemIndexOnMount={0}` to its Menu children by default, so the first menu item is focused when the menu opens\n\n**MenuItem**\n\n- The `children` prop now accepts only a single `MenuChild`, not `MenuChild[]` (passing an array was already a runtime error in v3)\n\n**Modal**\n\n- The legacy Modal has been removed and replaced with a completely new Modal component with a different API (previously at `@vibe/core/next`) and promoted to `@vibe/core`\n  See the [Modal documentation](?path=/docs/components-modal--docs) for the full API\n\n**Steps**\n\n- The finish button now renders by default on the last step\n\n**Tipseen**\n\n- The `modifiers` prop (Popper.js) has been removed — use [`middleware`](https://floating-ui.com/docs/middleware) instead (same as Dialog)\n\n**Tooltip**\n\n- The `modifiers` prop (Popper.js) has been removed — use [`middleware`](https://floating-ui.com/docs/middleware) instead (same as Dialog)\n\n**Toggle**\n\n- The duplicate `data-testid=\"toggle\"` has been removed from the internal visual `div` — the test ID is now only on the `<input>` element. Update any test selectors that targeted the visual div.\n\n**VirtualizedGrid**\n\n- `itemRenderer` return type corrected to `ReactElement` — if TypeScript reports errors, ensure your renderer explicitly returns `ReactElement`\n\n### Hooks\n\n- **`useMergeRefs`** removed from `@vibe/core` — use the [`react-merge-refs`](https://www.npmjs.com/package/react-merge-refs) package instead\n- **`useListenFocusTriggers`** removed from `@vibe/core` — inline the logic using `useEventListener`\n- **`useActiveDescendantListFocus`** — `onItemClickCallback` and `createOnItemClickCallback` return values removed, use `onItemClick` directly\n- **`useKeyEvent`** — `callback` type changed from `GenericEventCallback` to `KeyboardEventCallback` (native `KeyboardEvent`)\n\n### CSS and Design Tokens\n\n**Spacing Tokens**\n\nThe deprecated semantic spacing CSS custom properties have been removed. Replace with numeric tokens:\n\n| Removed Token      | Replacement  |\n| ------------------ | ------------ |\n| `--spacing-xs`     | `--space-4`  |\n| `--spacing-small`  | `--space-8`  |\n| `--spacing-medium` | `--space-16` |\n| `--spacing-large`  | `--space-24` |\n| `--spacing-xl`     | `--space-32` |\n| `--spacing-xxl`    | `--space-48` |\n| `--spacing-xxxl`   | `--space-64` |\n\n**Auto-fix available**: Run `npx stylelint --fix \"**/*.scss\"` with the `@vibe/style/use-new-spacing-tokens` rule enabled.\n\n**Input Padding**\n\n`padding-inline-start` reduced from `16px` to `8px` across TextField, BaseInput, TextArea, and Dropdown Trigger.\n\n**Input Placeholder Color**\n\nInputs now use `var(--placeholder-color)` instead of `var(--secondary-text-color)`.\n\n## FAQ ❓\n\n**What is the best way to migrate to Vibe 4?**\n\nFollow the [Migration Steps](#migration-steps-) above. It is highly recommended to use the Vibe MCP to handle all the changes.\n\n**I was using enums like `Button.sizes.LARGE` — what do I use now?**\n\nUse string literals: `\"large\"`. They are fully type-safe and provide the same IntelliSense autocomplete in your IDE. Run `npx @vibe/codemod -m enums` to migrate automatically.\n\n**I was importing components from `@vibe/core/next` — what changed?**\n\nMost components from `@vibe/core/next` (AttentionBox, Dropdown, DatePicker, Dialog, Modal) have been promoted to `@vibe/core`. Update your imports to use `@vibe/core` directly and follow the API changes (if any).\n\n**Is Vibe 4 compatible with React 19?**\n\nYes. Vibe 4 is fully compatible with React 19. Note that Vibe 3 is **not** compatible with React 19, so if you are upgrading to React 19, you must upgrade to Vibe 4.\n\n**What if I don't want to migrate to Vibe 4?**\n\nYou can continue using Vibe 3 with React 16–18, but it will only receive critical bug fixes. New features, improvements, and React 19 support are only available in Vibe 4.\n\n**The migration script failed — what should I do?**\n\nRun the script in the root of your project on a clean git branch. If issues persist, please [report an issue](https://github.com/mondaycom/vibe/issues/new/choose) with the error message and your environment details.\n\n</div>\n\n## Help 🙏\n\nIf you have any questions, feedback, or need help, please don't hesitate to reach out. You can provide [feedback](https://github.com/mondaycom/vibe/discussions) or [report issues](https://github.com/mondaycom/vibe/issues/new/choose) in the [Vibe repository](https://github.com/mondaycom/vibe) on GitHub.\n"
  },
  {
    "path": "packages/docs/src/pages/migration-guide/vibe2-migration-guide.md",
    "content": "# Vibe 2 Migration\n\n## What's changed?\n\n- CSS modules migration - all components are now using CSS modules instead of global CSS classes, this allows us to have better encapsulation and fewer conflicts with other CSS classes.\n- Global CSS classnames are no longer exposed, so you can't override or apply them anymore.\n- `data-testid` attributes were added, so you can target components by them instead of global class names.\n\n## Why migrate?\n\nVersion 1 won't receive new features, only critical bug fixes - so if you want to use new features you should migrate to version 2.\n\n## How to migrate?\n\n### Remove overrides of Vibe's global CSS classes\n\nRemove overrides of Vibe's global CSS classes (mostly prefixed with `monday-style-`). Some of them could be replaced with corresponding className props.  \nBefore:\n\n```diff\n- .monday-style-button {\n-   margin-left: var(--spacing-small);\n- }\n- <Button>Click me</button>\n```\n\nAfter:\n\n```diff\n+ .click-me-button {\n+     margin-left: var(--spacing-small);\n+ }\n+ <Button className=\"click-me-button\">Click me</Button>\n```\n\n### Remove direct usages of Vibe's global CSS classes\n\nBefore:\n\n```diff\n- <button className=\"monday-style-button ...\">Click me</button>\n```\n\nAfter:\n\n```diff\n+ <Button>Click me</Button>\n```\n\n### Fix jests selectors\n\nFix tests selectors to use `data-testid` instead of global CSS classes.  \nBefore:\n\n```diff\n- document.querySelector('monday-style-button').click();\n```\n\nAfter:\n\n```diff\n+ <Button data-testid=\"my-button\"/>\n+ document.querySelector(['data-testid=\"my-button\"']).click();\n```\n\n### Jest snapshot tests config\n\nIf you use jest snapshot testing, fix `jest.config.js` to use `moduleNameMapper` for package entry with mocked classnames - so they won't change names during snapshot testing.\n\n```diff\n+ moduleNameMapper: {\n+     \"monday-ui-react-core\": \"monday-ui-react-core/dist/mocked_classnames_esm/src/index.js\"\n+ }\n```\n\n### Component's imports\n\nCommonJS imports for components and hooks from the `dist` are going to be deprecated soon, so, please, consider using ESM type of imports.  \nBefore:\n\n```diff\n- import Button from \"monday-ui-react-core/dist/Button\";\n```\n\nAfter:\n\n```diff\n+ import { Button } from \"monday-ui-react-core\";\n```\n\n### Replace main.css import with tokens import\n\nPreviously `main.css` contained all the style definitions + `monday-ui-style` tokens and was required to import, now instead of this you should just load `monday-ui-style` tokens via separate endpoint.\n\nBefore:\n\n```diff\n- import \"monday-ui-react-core/dist/main.css\";\n```\n\nAfter:\n\n```diff\n+ import \"monday-ui-react-core/tokens\";\n```\n"
  },
  {
    "path": "packages/docs/src/pages/playground/Playground.stories.ts",
    "content": "import { withPlayground } from \"storybook-addon-playground\";\n\nexport default {\n  title: \"Playground\",\n  decorators: [withPlayground]\n};\n\nexport const Playground = {\n  parameters: {\n    chromatic: { disable: true },\n    a11y: {\n      manual: true\n    }\n  }\n};\n"
  },
  {
    "path": "packages/docs/src/pages/playground/playground-helpers.ts",
    "content": "import * as VibeComponents from \"@vibe/core\";\nimport * as VibeIcons from \"@vibe/icons\";\nimport * as VibeComponentsNext from \"@vibe/core/next\";\nimport React from \"react\";\n\nconst VibeLegacy = Object.fromEntries(Object.entries(VibeComponents).filter(([key]) => key in VibeComponentsNext));\nconst combinedComponents = { ...VibeComponents, ...VibeComponentsNext };\n\nexport const playgroundVibeComponents = { ...combinedComponents, VibeLegacy, VibeIcons };\nexport const playgroundReactCommonHooks = {\n  useState: React.useState,\n  useEffect: React.useEffect,\n  useCallback: React.useCallback,\n  useMemo: React.useMemo,\n  useRef: React.useRef\n};\n\nconst jsx = `() => {\n  const [timesClicked, setTimesClicked] = useState<number>(0);\n\n  function onButtonClick(): void {\n    setTimesClicked(prev => prev + 1);\n  }\n\n  return (\n    <Flex direction=\"column\" className=\"playground\">\n      <img\n        src=\"https://vibe.monday.com/logo.svg\"\n        alt=\"Vibe Logo\"\n        className=\"vibe-logo\"\n      />\n      <Flex direction=\"column\" align=\"center\" justify=\"center\" gap=\"xs\">\n        <Flex align=\"center\" gap=\"xs\">\n          <Icon icon={VibeIcons.Labs} size=\"16\" />\n          <Heading type=\"h3\" align=\"center\">\n            Playground\n          </Heading>\n        </Flex>\n        <Text type=\"text2\" ellipsis={false}>\n          Craft, Experiment, and Innovate with Vibe.\n        </Text>\n      </Flex>\n      <Button\n        kind=\"secondary\"\n        size=\"small\"\n        onClick={onButtonClick}\n        className=\"count-button\"\n      >\n        Clicked {timesClicked} time{timesClicked === 1 ? \"\" : \"s\"}\n      </Button>\n      <Text type=\"text3\" ellipsis={false} color=\"secondary\">\n        Can't see the editor? Click 'D' on your keyboard\n      </Text>\n    </Flex>\n  );\n}`;\n\nconst css = `.playground {\n  padding-block-start: 40px;\n  margin: 0;\n  width: 100vw;\n}\n\n.vibe-logo {\n  width: 150px;\n  margin-block-end: var(--space-24);\n  transition: transform 0.3s ease, filter 0.3s ease;\n}\n\n.vibe-logo:hover {\n  transform: scale(1.02);\n  filter: drop-shadow(0 0 32px rgba(80, 52, 255, 0.3));\n}\n\n.count-button {\n  margin-block: var(--space-16);\n}\n`;\n\nexport const introCode = { jsx, css };\n"
  },
  {
    "path": "packages/docs/src/pages/playground/react-docgen-output.json",
    "content": "{\n  \"src/components/AlertBanner/AlertBanner.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"AlertBanner\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Set external styling to the progress bar.\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"backgroundColor\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AlertBannerBackgroundColor\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"AlertBanner.backgroundColors.PRIMARY\",\n            \"computed\": true\n          }\n        },\n        \"isCloseHidden\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"ariaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"ARIA description for the progress bar\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"closeButtonAriaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"Close\\\"\",\n            \"computed\": false\n          }\n        },\n        \"onClose\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent<HTMLButtonElement>) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent<HTMLButtonElement>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"HTMLButtonElement\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ChildrenType | ChildrenType[]\",\n            \"elements\": [\n              {\n                \"name\": \"ReactElement\",\n                \"elements\": [\n                  {\n                    \"name\": \"union\",\n                    \"raw\": \"AlertBannerButtonProps | AlertBannerLinkProps | AlertBannerTextProps\",\n                    \"elements\": [\n                      {\n                        \"name\": \"AlertBannerButtonProps\"\n                      },\n                      {\n                        \"name\": \"AlertBannerLinkProps\"\n                      },\n                      {\n                        \"name\": \"AlertBannerTextProps\"\n                      }\n                    ]\n                  }\n                ],\n                \"raw\": \"ReactElement<AlertBannerButtonProps | AlertBannerLinkProps | AlertBannerTextProps>\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactElement\",\n                    \"elements\": [\n                      {\n                        \"name\": \"union\",\n                        \"raw\": \"AlertBannerButtonProps | AlertBannerLinkProps | AlertBannerTextProps\",\n                        \"elements\": [\n                          {\n                            \"name\": \"AlertBannerButtonProps\"\n                          },\n                          {\n                            \"name\": \"AlertBannerLinkProps\"\n                          },\n                          {\n                            \"name\": \"AlertBannerTextProps\"\n                          }\n                        ]\n                      }\n                    ],\n                    \"raw\": \"ReactElement<AlertBannerButtonProps | AlertBannerLinkProps | AlertBannerTextProps>\"\n                  }\n                ],\n                \"raw\": \"ChildrenType[]\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/AttentionBox/AttentionBox.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"AttentionBox\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"componentClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"@deprecated - use className instead\"\n        },\n        \"withIconWithoutHeader\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"type\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AttentionBoxType\"\n          },\n          \"description\": \"we support 5 types of attention boxes\",\n          \"defaultValue\": {\n            \"value\": \"AttentionBox.types.PRIMARY\",\n            \"computed\": true\n          }\n        },\n        \"icon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"Icon classname for icon font or SVG Icon Component for SVG Type\"\n        },\n        \"iconType\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"IconType.SVG | IconType.ICON_FONT\",\n            \"elements\": [\n              {\n                \"name\": \"IconType.SVG\"\n              },\n              {\n                \"name\": \"IconType.ICON_FONT\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"Icon.type.SVG\",\n            \"computed\": true\n          }\n        },\n        \"title\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"text\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ReactNode | ReactNode[]\",\n            \"elements\": [\n              {\n                \"name\": \"ReactNode\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactNode\"\n                  }\n                ],\n                \"raw\": \"ReactNode[]\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"withoutIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"onClose\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"compact\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"closeButtonAriaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"Close\\\"\",\n            \"computed\": false\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/Avatar/Avatar.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Avatar\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"src\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"text\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"tooltipProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"intersection\",\n            \"raw\": \"TooltipBaseProps & (TooltipWithChildrenProps | TooltipWithoutChildrenProps)\",\n            \"elements\": [\n              {\n                \"name\": \"TooltipBaseProps\"\n              },\n              {\n                \"name\": \"unknown\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"ariaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"withoutTooltip\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"icon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"type\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AvatarType\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"AvatarType.TEXT\",\n            \"computed\": true\n          }\n        },\n        \"textClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Class name for the avatar content of text type\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"avatarContentWrapperClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Class name for a div-wrapper of avatar content\"\n        },\n        \"backgroundColor\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"(typeof ElementAllowedColor)[keyof typeof ElementAllowedColor] | string\",\n            \"elements\": [\n              {\n                \"name\": \"unknown[unknown]\",\n                \"raw\": \"(typeof ElementAllowedColor)[keyof typeof ElementAllowedColor]\"\n              },\n              {\n                \"name\": \"string\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"chili-blue\",\n            \"computed\": true\n          }\n        },\n        \"customBackgroundColor\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"role\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AriaRole\"\n          },\n          \"description\": \"\"\n        },\n        \"size\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AvatarSize\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"AvatarSize.LARGE\",\n            \"computed\": true\n          }\n        },\n        \"customSize\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"tabIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"ariaHidden\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"disabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"isSquare\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"@deprecated - use square instead\"\n        },\n        \"isDisabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"@deprecated - use disabled instead\"\n        },\n        \"square\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"topLeftBadgeProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AvatarBadgeProps\"\n          },\n          \"description\": \"\"\n        },\n        \"topRightBadgeProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AvatarBadgeProps\"\n          },\n          \"description\": \"\"\n        },\n        \"bottomLeftBadgeProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AvatarBadgeProps\"\n          },\n          \"description\": \"\"\n        },\n        \"bottomRightBadgeProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AvatarBadgeProps\"\n          },\n          \"description\": \"\"\n        },\n        \"withoutBorder\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent | React.KeyboardEvent, avatarId: string) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"union\",\n                    \"raw\": \"React.MouseEvent | React.KeyboardEvent\",\n                    \"elements\": [\n                      {\n                        \"name\": \"ReactMouseEvent\",\n                        \"raw\": \"React.MouseEvent\"\n                      },\n                      {\n                        \"name\": \"ReactKeyboardEvent\",\n                        \"raw\": \"React.KeyboardEvent\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"string\"\n                  },\n                  \"name\": \"avatarId\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Avatar/AvatarBadge.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"AvatarBadge\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"src\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"icon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"Use to provide SVG Components\"\n        },\n        \"ariaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"tabIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | number\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"number\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"0\",\n            \"computed\": false\n          }\n        },\n        \"size\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"AvatarSize.LARGE\",\n            \"computed\": true\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/Avatar/AvatarContent.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"AvatarContent\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"src\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"type\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AvatarType\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"AvatarType.TEXT\",\n            \"computed\": true\n          }\n        },\n        \"size\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AvatarSize\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"AvatarSize.LARGE\",\n            \"computed\": true\n          }\n        },\n        \"role\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"ariaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"icon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"we support two types of icons - SVG and FONT (classname) so this prop is either the name of the icon or the component\"\n        },\n        \"textClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"text\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/AvatarGroup/AvatarGroupCounterTooltipHelper.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"avatarRenderer\",\n      \"props\": {\n        \"value\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"intersection\",\n            \"raw\": \"AvatarProps & { tooltipContent: ElementContent }\",\n            \"elements\": [\n              {\n                \"name\": \"AvatarProps\"\n              },\n              {\n                \"name\": \"signature\",\n                \"type\": \"object\",\n                \"raw\": \"{ tooltipContent: ElementContent }\",\n                \"signature\": {\n                  \"properties\": [\n                    {\n                      \"key\": \"tooltipContent\",\n                      \"value\": {\n                        \"name\": \"ElementContent\",\n                        \"required\": true\n                      }\n                    }\n                  ]\n                }\n              }\n            ]\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/AvatarGroup/AvatarGroup.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"AvatarGroup\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"avatarClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ReactElement<AvatarProps> | ReactElement<AvatarProps>[]\",\n            \"elements\": [\n              {\n                \"name\": \"ReactElement\",\n                \"elements\": [\n                  {\n                    \"name\": \"AvatarProps\"\n                  }\n                ],\n                \"raw\": \"ReactElement<AvatarProps>\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactElement\",\n                    \"elements\": [\n                      {\n                        \"name\": \"AvatarProps\"\n                      }\n                    ],\n                    \"raw\": \"ReactElement<AvatarProps>\"\n                  }\n                ],\n                \"raw\": \"ReactElement<AvatarProps>[]\"\n              }\n            ]\n          },\n          \"description\": \"Array of `Avatar` components\"\n        },\n        \"size\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AvatarSize\"\n          },\n          \"description\": \"\"\n        },\n        \"type\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AvatarType\"\n          },\n          \"description\": \"\"\n        },\n        \"max\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"5\",\n            \"computed\": false\n          }\n        },\n        \"counterProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"object\",\n            \"raw\": \"{\\n  color?: CounterColor.LIGHT | CounterColor.DARK;\\n  count?: number;\\n  prefix?: string;\\n  maxDigits?: number;\\n  ariaLabelItemsName?: string;\\n  noAnimation?: boolean;\\n}\",\n            \"signature\": {\n              \"properties\": [\n                {\n                  \"key\": \"color\",\n                  \"value\": {\n                    \"name\": \"union\",\n                    \"raw\": \"CounterColor.LIGHT | CounterColor.DARK\",\n                    \"elements\": [\n                      {\n                        \"name\": \"CounterColor.LIGHT\"\n                      },\n                      {\n                        \"name\": \"CounterColor.DARK\"\n                      }\n                    ],\n                    \"required\": false\n                  }\n                },\n                {\n                  \"key\": \"count\",\n                  \"value\": {\n                    \"name\": \"number\",\n                    \"required\": false\n                  }\n                },\n                {\n                  \"key\": \"prefix\",\n                  \"value\": {\n                    \"name\": \"string\",\n                    \"required\": false\n                  }\n                },\n                {\n                  \"key\": \"maxDigits\",\n                  \"value\": {\n                    \"name\": \"number\",\n                    \"required\": false\n                  }\n                },\n                {\n                  \"key\": \"ariaLabelItemsName\",\n                  \"value\": {\n                    \"name\": \"string\",\n                    \"required\": false\n                  }\n                },\n                {\n                  \"key\": \"noAnimation\",\n                  \"value\": {\n                    \"name\": \"boolean\",\n                    \"required\": false\n                  }\n                }\n              ]\n            }\n          },\n          \"description\": \"4 `Counter.props` for customization + ariaLabelItemsName for specifying the \\\"items\\\" name in aria label\"\n        },\n        \"counterTooltipCustomProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"intersection\",\n            \"raw\": \"TooltipBaseProps & (TooltipWithChildrenProps | TooltipWithoutChildrenProps)\",\n            \"elements\": [\n              {\n                \"name\": \"TooltipBaseProps\"\n              },\n              {\n                \"name\": \"unknown\"\n              }\n            ]\n          },\n          \"description\": \"`Tooltip.props`: props for custom counter tooltip\"\n        },\n        \"counterTooltipIsVirtualizedList\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Using counter default tooltip virtualized list for rendering only visible items (performance optimization)\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"removePadding\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"If true, padding will be removed from the container\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/AvatarGroup/AvatarGroupCounterTooltipContentVirtualizedList.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"AvatarGroupCounterTooltipContentVirtualizedList\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"avatarItems\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Array\",\n            \"elements\": [\n              {\n                \"name\": \"signature\",\n                \"type\": \"object\",\n                \"raw\": \"{\\n  value: AvatarProps & { tooltipContent: ElementContent };\\n}\",\n                \"signature\": {\n                  \"properties\": [\n                    {\n                      \"key\": \"value\",\n                      \"value\": {\n                        \"name\": \"intersection\",\n                        \"raw\": \"AvatarProps & { tooltipContent: ElementContent }\",\n                        \"elements\": [\n                          {\n                            \"name\": \"AvatarProps\"\n                          },\n                          {\n                            \"name\": \"signature\",\n                            \"type\": \"object\",\n                            \"raw\": \"{ tooltipContent: ElementContent }\",\n                            \"signature\": {\n                              \"properties\": [\n                                {\n                                  \"key\": \"tooltipContent\",\n                                  \"value\": {\n                                    \"name\": \"union\",\n                                    \"raw\": \"ReactNode | ReactNode[]\",\n                                    \"elements\": [\n                                      {\n                                        \"name\": \"ReactNode\"\n                                      },\n                                      {\n                                        \"name\": \"Array\",\n                                        \"elements\": [\n                                          {\n                                            \"name\": \"ReactNode\"\n                                          }\n                                        ],\n                                        \"raw\": \"ReactNode[]\"\n                                      }\n                                    ],\n                                    \"required\": true\n                                  }\n                                }\n                              ]\n                            }\n                          }\n                        ],\n                        \"required\": true\n                      }\n                    }\n                  ]\n                }\n              }\n            ],\n            \"raw\": \"AvatarItem[]\"\n          },\n          \"description\": \"Array of Avatar components\",\n          \"defaultValue\": {\n            \"value\": \"[]\",\n            \"computed\": false\n          }\n        },\n        \"avatarRenderer\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(\\n  item: AvatarItem,\\n  index: number,\\n  style: CSSProperties,\\n  type: AvatarType,\\n  displayAsGrid: boolean\\n) => ReactElement\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"signature\",\n                    \"type\": \"object\",\n                    \"raw\": \"{\\n  value: AvatarProps & { tooltipContent: ElementContent };\\n}\",\n                    \"signature\": {\n                      \"properties\": [\n                        {\n                          \"key\": \"value\",\n                          \"value\": {\n                            \"name\": \"intersection\",\n                            \"raw\": \"AvatarProps & { tooltipContent: ElementContent }\",\n                            \"elements\": [\n                              {\n                                \"name\": \"AvatarProps\"\n                              },\n                              {\n                                \"name\": \"signature\",\n                                \"type\": \"object\",\n                                \"raw\": \"{ tooltipContent: ElementContent }\",\n                                \"signature\": {\n                                  \"properties\": [\n                                    {\n                                      \"key\": \"tooltipContent\",\n                                      \"value\": {\n                                        \"name\": \"union\",\n                                        \"raw\": \"ReactNode | ReactNode[]\",\n                                        \"elements\": [\n                                          {\n                                            \"name\": \"ReactNode\"\n                                          },\n                                          {\n                                            \"name\": \"Array\",\n                                            \"elements\": [\n                                              {\n                                                \"name\": \"ReactNode\"\n                                              }\n                                            ],\n                                            \"raw\": \"ReactNode[]\"\n                                          }\n                                        ],\n                                        \"required\": true\n                                      }\n                                    }\n                                  ]\n                                }\n                              }\n                            ],\n                            \"required\": true\n                          }\n                        }\n                      ]\n                    }\n                  },\n                  \"name\": \"item\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"index\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"CSSProperties\"\n                  },\n                  \"name\": \"style\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"AvatarType\"\n                  },\n                  \"name\": \"type\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"boolean\"\n                  },\n                  \"name\": \"displayAsGrid\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"ReactElement\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"tooltipContainerAriaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"tooltipContentContainerRef\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Ref\",\n            \"elements\": [\n              {\n                \"name\": \"HTMLDivElement\"\n              }\n            ],\n            \"raw\": \"Ref<HTMLDivElement>\"\n          },\n          \"description\": \"\"\n        },\n        \"type\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AvatarType\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Badge/Badge.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Badge\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"anchor\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"BadgeAnchor\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"Badge.anchors.TOP_END\",\n            \"computed\": true\n          }\n        },\n        \"alignment\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"BadgeAlignments\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"Badge.alignments.RECTANGULAR\",\n            \"computed\": true\n          }\n        },\n        \"children\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"ReactReactNode\",\n            \"raw\": \"React.ReactNode\"\n          },\n          \"description\": \"\"\n        },\n        \"type\": {\n          \"defaultValue\": {\n            \"value\": \"Badge.types.INDICATOR\",\n            \"computed\": true\n          },\n          \"required\": false\n        }\n      }\n    }\n  ],\n  \"src/components/AvatarGroup/AvatarGroupCounterTooltipContainer.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"AvatarGroupCounterTooltipContainer\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"type\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AvatarType\"\n          },\n          \"description\": \"\"\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Array\",\n            \"elements\": [\n              {\n                \"name\": \"ReactElement\"\n              }\n            ],\n            \"raw\": \"ReactElement[]\"\n          },\n          \"description\": \"Counter element & focus placeholders\",\n          \"defaultValue\": {\n            \"value\": \"[]\",\n            \"computed\": false\n          }\n        },\n        \"avatars\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Array\",\n            \"elements\": [\n              {\n                \"name\": \"ReactElement\",\n                \"elements\": [\n                  {\n                    \"name\": \"AvatarProps\"\n                  }\n                ],\n                \"raw\": \"ReactElement<AvatarProps>\"\n              }\n            ],\n            \"raw\": \"ReactElement<AvatarProps>[]\"\n          },\n          \"description\": \"Array of Avatar elements\",\n          \"defaultValue\": {\n            \"value\": \"[]\",\n            \"computed\": false\n          }\n        },\n        \"counterTooltipCustomProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"intersection\",\n            \"raw\": \"TooltipBaseProps & (TooltipWithChildrenProps | TooltipWithoutChildrenProps)\",\n            \"elements\": [\n              {\n                \"name\": \"TooltipBaseProps\"\n              },\n              {\n                \"name\": \"unknown\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"counterTooltipIsVirtualizedList\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"focusPrevPlaceholderRef\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"RefObject\",\n            \"elements\": [\n              {\n                \"name\": \"HTMLDivElement\"\n              }\n            ],\n            \"raw\": \"RefObject<HTMLDivElement>\"\n          },\n          \"description\": \"\"\n        },\n        \"focusNextPlaceholderRef\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"RefObject\",\n            \"elements\": [\n              {\n                \"name\": \"HTMLDivElement\"\n              }\n            ],\n            \"raw\": \"RefObject<HTMLDivElement>\"\n          },\n          \"description\": \"\"\n        },\n        \"counterContainerRef\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"RefObject\",\n            \"elements\": [\n              {\n                \"name\": \"HTMLDivElement\"\n              }\n            ],\n            \"raw\": \"RefObject<HTMLDivElement>\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/AvatarGroup/AvatarGroupCounter.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"AvatarGroupCounter\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"counterTooltipAvatars\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Array\",\n            \"elements\": [\n              {\n                \"name\": \"ReactElement\",\n                \"elements\": [\n                  {\n                    \"name\": \"AvatarProps\"\n                  }\n                ],\n                \"raw\": \"ReactElement<AvatarProps>\"\n              }\n            ],\n            \"raw\": \"ReactElement<AvatarProps>[]\"\n          },\n          \"description\": \"Array of Avatar elements\",\n          \"defaultValue\": {\n            \"value\": \"[]\",\n            \"computed\": false\n          }\n        },\n        \"counterProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"object\",\n            \"raw\": \"{\\n  color?: CounterColor.LIGHT | CounterColor.DARK;\\n  count?: number;\\n  prefix?: string;\\n  maxDigits?: number;\\n  ariaLabelItemsName?: string;\\n  noAnimation?: boolean;\\n}\",\n            \"signature\": {\n              \"properties\": [\n                {\n                  \"key\": \"color\",\n                  \"value\": {\n                    \"name\": \"union\",\n                    \"raw\": \"CounterColor.LIGHT | CounterColor.DARK\",\n                    \"elements\": [\n                      {\n                        \"name\": \"CounterColor.LIGHT\"\n                      },\n                      {\n                        \"name\": \"CounterColor.DARK\"\n                      }\n                    ],\n                    \"required\": false\n                  }\n                },\n                {\n                  \"key\": \"count\",\n                  \"value\": {\n                    \"name\": \"number\",\n                    \"required\": false\n                  }\n                },\n                {\n                  \"key\": \"prefix\",\n                  \"value\": {\n                    \"name\": \"string\",\n                    \"required\": false\n                  }\n                },\n                {\n                  \"key\": \"maxDigits\",\n                  \"value\": {\n                    \"name\": \"number\",\n                    \"required\": false\n                  }\n                },\n                {\n                  \"key\": \"ariaLabelItemsName\",\n                  \"value\": {\n                    \"name\": \"string\",\n                    \"required\": false\n                  }\n                },\n                {\n                  \"key\": \"noAnimation\",\n                  \"value\": {\n                    \"name\": \"boolean\",\n                    \"required\": false\n                  }\n                }\n              ]\n            }\n          },\n          \"description\": \"AvatarGroupCounterVisualProps: props for counter\"\n        },\n        \"counterTooltipCustomProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"intersection\",\n            \"raw\": \"TooltipBaseProps & (TooltipWithChildrenProps | TooltipWithoutChildrenProps)\",\n            \"elements\": [\n              {\n                \"name\": \"TooltipBaseProps\"\n              },\n              {\n                \"name\": \"unknown\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"counterTooltipIsVirtualizedList\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"size\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AvatarSize\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"Avatar.sizes.MEDIUM\",\n            \"computed\": true\n          }\n        },\n        \"type\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AvatarType\"\n          },\n          \"description\": \"\"\n        },\n        \"counterAriaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/AvatarGroup/AvatarGroupCounterTooltipContent.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"AvatarGroupCounterTooltipContent\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"type\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AvatarType\"\n          },\n          \"description\": \"\"\n        },\n        \"avatars\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Array\",\n            \"elements\": [\n              {\n                \"name\": \"ReactElement\",\n                \"elements\": [\n                  {\n                    \"name\": \"AvatarProps\"\n                  }\n                ],\n                \"raw\": \"ReactElement<AvatarProps>\"\n              }\n            ],\n            \"raw\": \"ReactElement<AvatarProps>[]\"\n          },\n          \"description\": \"Array of Avatar components\",\n          \"defaultValue\": {\n            \"value\": \"[]\",\n            \"computed\": false\n          }\n        },\n        \"isVirtualizedList\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"tooltipContentContainerRef\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Ref\",\n            \"elements\": [\n              {\n                \"name\": \"HTMLDivElement\"\n              }\n            ],\n            \"raw\": \"Ref<HTMLDivElement>\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/BreadcrumbsBar/BreadcrumbsBar.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"BreadcrumbsBar\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"type\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"BreadcrumbsBarType\"\n          },\n          \"description\": \"The type of the bar is responsible for whether it will be navigational or for indication only\",\n          \"defaultValue\": {\n            \"value\": \"BreadcrumbsBar.types.INDICATION\",\n            \"computed\": true\n          }\n        },\n        \"children\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ReactElement<BreadcrumbItemProps> | ReactElement<BreadcrumbItemProps>[]\",\n            \"elements\": [\n              {\n                \"name\": \"ReactElement\",\n                \"elements\": [\n                  {\n                    \"name\": \"BreadcrumbItemProps\"\n                  }\n                ],\n                \"raw\": \"ReactElement<BreadcrumbItemProps>\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactElement\",\n                    \"elements\": [\n                      {\n                        \"name\": \"BreadcrumbItemProps\"\n                      }\n                    ],\n                    \"raw\": \"ReactElement<BreadcrumbItemProps>\"\n                  }\n                ],\n                \"raw\": \"ReactElement<BreadcrumbItemProps>[]\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Box/Box.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Box\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"elementType\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"keyof JSX.IntrinsicElements | string\",\n            \"elements\": [\n              {\n                \"name\": \"JSX.IntrinsicElements\"\n              },\n              {\n                \"name\": \"string\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"div\\\"\",\n            \"computed\": false\n          }\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ReactNode | ReactNode[]\",\n            \"elements\": [\n              {\n                \"name\": \"ReactNode\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactNode\"\n                  }\n                ],\n                \"raw\": \"ReactNode[]\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"disabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"border\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"BORDER[BORDER]\",\n            \"raw\": \"T[keyof T]\"\n          },\n          \"description\": \"\"\n        },\n        \"borderColor\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"BORDER_COLOR[BORDER_COLOR]\",\n            \"raw\": \"T[keyof T]\"\n          },\n          \"description\": \"\"\n        },\n        \"rounded\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ROUNDED[ROUNDED]\",\n            \"raw\": \"T[keyof T]\"\n          },\n          \"description\": \"\"\n        },\n        \"shadow\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"SHADOW[SHADOW]\",\n            \"raw\": \"T[keyof T]\"\n          },\n          \"description\": \"\"\n        },\n        \"margin\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"MARGIN[MARGIN]\",\n            \"raw\": \"T[keyof T]\"\n          },\n          \"description\": \"\"\n        },\n        \"marginX\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"MARGIN_X[MARGIN_X]\",\n            \"raw\": \"T[keyof T]\"\n          },\n          \"description\": \"\"\n        },\n        \"marginY\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"MARGIN_Y[MARGIN_Y]\",\n            \"raw\": \"T[keyof T]\"\n          },\n          \"description\": \"\"\n        },\n        \"marginTop\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"MARGIN_TOP[MARGIN_TOP]\",\n            \"raw\": \"T[keyof T]\"\n          },\n          \"description\": \"\"\n        },\n        \"marginEnd\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"MARGIN_END[MARGIN_END]\",\n            \"raw\": \"T[keyof T]\"\n          },\n          \"description\": \"\"\n        },\n        \"marginBottom\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"MARGIN_BOTTOM[MARGIN_BOTTOM]\",\n            \"raw\": \"T[keyof T]\"\n          },\n          \"description\": \"\"\n        },\n        \"marginStart\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"MARGIN_START[MARGIN_START]\",\n            \"raw\": \"T[keyof T]\"\n          },\n          \"description\": \"\"\n        },\n        \"padding\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"PADDING[PADDING]\",\n            \"raw\": \"T[keyof T]\"\n          },\n          \"description\": \"\"\n        },\n        \"paddingX\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"PADDING_X[PADDING_X]\",\n            \"raw\": \"T[keyof T]\"\n          },\n          \"description\": \"\"\n        },\n        \"paddingY\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"PADDING_Y[PADDING_Y]\",\n            \"raw\": \"T[keyof T]\"\n          },\n          \"description\": \"\"\n        },\n        \"paddingTop\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"PADDING_TOP[PADDING_TOP]\",\n            \"raw\": \"T[keyof T]\"\n          },\n          \"description\": \"\"\n        },\n        \"paddingEnd\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"PADDING_END[PADDING_END]\",\n            \"raw\": \"T[keyof T]\"\n          },\n          \"description\": \"\"\n        },\n        \"paddingBottom\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"PADDING_BOTTOM[PADDING_BOTTOM]\",\n            \"raw\": \"T[keyof T]\"\n          },\n          \"description\": \"\"\n        },\n        \"paddingStart\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"PADDING_START[PADDING_START]\",\n            \"raw\": \"T[keyof T]\"\n          },\n          \"description\": \"\"\n        },\n        \"backgroundColor\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"BACKGROUND_COLORS[BACKGROUND_COLORS]\",\n            \"raw\": \"T[keyof T]\"\n          },\n          \"description\": \"\"\n        },\n        \"textColor\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"COLORS[COLORS]\",\n            \"raw\": \"T[keyof T]\"\n          },\n          \"description\": \"\"\n        },\n        \"scrollable\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"TODO: make default in next major version\"\n        }\n      }\n    }\n  ],\n  \"src/components/Button/Button.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Button\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Custom class names to pass to the component\",\n          \"defaultValue\": {\n            \"value\": \"undefined\",\n            \"computed\": true\n          }\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"id to pass to the button\",\n          \"defaultValue\": {\n            \"value\": \"undefined\",\n            \"computed\": true\n          }\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactReactNode\",\n            \"raw\": \"React.ReactNode\"\n          },\n          \"description\": \"\"\n        },\n        \"activeButtonClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"kind\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ButtonType\"\n          },\n          \"description\": \"The button's kind\",\n          \"defaultValue\": {\n            \"value\": \"ButtonType.PRIMARY\",\n            \"computed\": true\n          }\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent<HTMLButtonElement>) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent<HTMLButtonElement>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"HTMLButtonElement\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"Callback function to run when the button is clicked\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"onMouseDown\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent<HTMLButtonElement>) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent<HTMLButtonElement>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"HTMLButtonElement\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"blurOnMouseUp\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Blur on button click\",\n          \"defaultValue\": {\n            \"value\": \"true\",\n            \"computed\": false\n          }\n        },\n        \"name\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Name of the button - for form submit usages\",\n          \"defaultValue\": {\n            \"value\": \"undefined\",\n            \"computed\": true\n          }\n        },\n        \"size\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"(typeof SIZES)[keyof typeof SIZES] | keyof typeof OLD_BUTTON_SIZES\",\n            \"elements\": [\n              {\n                \"name\": \"unknown[union]\",\n                \"raw\": \"(typeof SIZES)[keyof typeof SIZES]\"\n              },\n              {\n                \"name\": \"union\",\n                \"raw\": \"keyof typeof OLD_BUTTON_SIZES\",\n                \"elements\": [\n                  {\n                    \"name\": \"literal\",\n                    \"value\": \"sm\"\n                  },\n                  {\n                    \"name\": \"literal\",\n                    \"value\": \"md\"\n                  },\n                  {\n                    \"name\": \"literal\",\n                    \"value\": \"lg\"\n                  }\n                ]\n              }\n            ]\n          },\n          \"description\": \"The button's size\",\n          \"defaultValue\": {\n            \"value\": \"SIZES.MEDIUM\",\n            \"computed\": true\n          }\n        },\n        \"color\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ButtonColor\"\n          },\n          \"description\": \"The button's color\",\n          \"defaultValue\": {\n            \"value\": \"ButtonColor.PRIMARY\",\n            \"computed\": true\n          }\n        },\n        \"type\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ButtonInputType\"\n          },\n          \"description\": \"The button's type\",\n          \"defaultValue\": {\n            \"value\": \"ButtonInputType.BUTTON\",\n            \"computed\": true\n          }\n        },\n        \"disabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Whether the button should be disabled or not\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"rightIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"Icon to place on the right\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"leftIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"Icon to place on the left\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"success\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"the success props are used when you have async action and wants to display a success message\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"successIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"Success icon name\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"successText\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Success text\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"loading\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"loading boolean which switches the text to a loader\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"style\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactCSSProperties\",\n            \"raw\": \"React.CSSProperties\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"undefined\",\n            \"computed\": true\n          }\n        },\n        \"active\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"displays the active state\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"marginRight\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"adds 8px margin to the right\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"marginLeft\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"adds 8px margin to the left\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"ariaLabeledBy\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"element id to describe the button accordingly\",\n          \"defaultValue\": {\n            \"value\": \"undefined\",\n            \"computed\": true\n          }\n        },\n        \"ariaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"aria label to provide important when providing only Icon\",\n          \"defaultValue\": {\n            \"value\": \"undefined\",\n            \"computed\": true\n          }\n        },\n        \"ariaHasPopup\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactHTMLProps[\\\"aria-haspopup\\\"]\",\n            \"raw\": \"React.HTMLProps<HTMLButtonElement>[\\\"aria-haspopup\\\"]\"\n          },\n          \"description\": \"aria for a button popup\",\n          \"defaultValue\": {\n            \"value\": \"undefined\",\n            \"computed\": true\n          }\n        },\n        \"ariaExpanded\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"aria to be set if the popup is open\",\n          \"defaultValue\": {\n            \"value\": \"undefined\",\n            \"computed\": true\n          }\n        },\n        \"ariaControls\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"aria controls - receives id for the controlled region\",\n          \"defaultValue\": {\n            \"value\": \"undefined\",\n            \"computed\": true\n          }\n        },\n        \"aria-describedby\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AriaAttributes[\\\"aria-describedby\\\"]\",\n            \"raw\": \"AriaAttributes[\\\"aria-describedby\\\"]\"\n          },\n          \"description\": \"\"\n        },\n        \"aria-hidden\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AriaAttributes[\\\"aria-hidden\\\"]\",\n            \"raw\": \"AriaAttributes[\\\"aria-hidden\\\"]\"\n          },\n          \"description\": \"aria to be used for screen reader to know if the button is hidden\"\n        },\n        \"onFocus\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.FocusEvent<HTMLButtonElement>) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactFocusEvent\",\n                    \"raw\": \"React.FocusEvent<HTMLButtonElement>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"HTMLButtonElement\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"On Button Focus callback\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"onBlur\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.FocusEvent<HTMLButtonElement>) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactFocusEvent\",\n                    \"raw\": \"React.FocusEvent<HTMLButtonElement>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"HTMLButtonElement\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"On Button Blur callback\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"rightFlat\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"leftFlat\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"preventClickAnimation\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"noSidePadding\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"defaultTextColorOnPrimaryColor\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"default color for text color in ON_PRIMARY_COLOR kind (should be any type of css color (rbg, var, hex...)\",\n          \"defaultValue\": {\n            \"value\": \"\\\"rgba(0, 0, 0, 0)\\\"\",\n            \"computed\": false\n          }\n        },\n        \"dataTestId\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"@deprecated - use \\\"data-testid\\\" instead\",\n          \"defaultValue\": {\n            \"value\": \"undefined\",\n            \"computed\": true\n          }\n        },\n        \"insetFocus\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Change the focus indicator from around the button to within it\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"tabIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"Specifies the tab order of an element\"\n        }\n      }\n    }\n  ],\n  \"src/components/ButtonGroup/ButtonWrapper.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"ButtonWrapper\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Custom class names to pass to the component\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"id to pass to the button\"\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactReactNode\",\n            \"raw\": \"React.ReactNode\"\n          },\n          \"description\": \"\"\n        },\n        \"activeButtonClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"kind\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ButtonType\"\n          },\n          \"description\": \"The button's kind\"\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent<HTMLButtonElement>) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent<HTMLButtonElement>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"HTMLButtonElement\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"Callback function to run when the button is clicked\"\n        },\n        \"onMouseDown\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent<HTMLButtonElement>) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent<HTMLButtonElement>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"HTMLButtonElement\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"blurOnMouseUp\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Blur on button click\"\n        },\n        \"name\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Name of the button - for form submit usages\"\n        },\n        \"size\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"(typeof SIZES)[keyof typeof SIZES] | keyof typeof OLD_BUTTON_SIZES\",\n            \"elements\": [\n              {\n                \"name\": \"unknown[union]\",\n                \"raw\": \"(typeof SIZES)[keyof typeof SIZES]\"\n              },\n              {\n                \"name\": \"union\",\n                \"raw\": \"keyof typeof OLD_BUTTON_SIZES\",\n                \"elements\": [\n                  {\n                    \"name\": \"literal\",\n                    \"value\": \"sm\"\n                  },\n                  {\n                    \"name\": \"literal\",\n                    \"value\": \"md\"\n                  },\n                  {\n                    \"name\": \"literal\",\n                    \"value\": \"lg\"\n                  }\n                ]\n              }\n            ]\n          },\n          \"description\": \"The button's size\"\n        },\n        \"color\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ButtonColor\"\n          },\n          \"description\": \"The button's color\"\n        },\n        \"type\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ButtonInputType\"\n          },\n          \"description\": \"The button's type\"\n        },\n        \"disabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Whether the button should be disabled or not\"\n        },\n        \"rightIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"Icon to place on the right\"\n        },\n        \"leftIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"Icon to place on the left\"\n        },\n        \"success\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"the success props are used when you have async action and wants to display a success message\"\n        },\n        \"successIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"Success icon name\"\n        },\n        \"successText\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Success text\"\n        },\n        \"loading\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"loading boolean which switches the text to a loader\"\n        },\n        \"style\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactCSSProperties\",\n            \"raw\": \"React.CSSProperties\"\n          },\n          \"description\": \"\"\n        },\n        \"active\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"displays the active state\"\n        },\n        \"marginRight\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"adds 8px margin to the right\"\n        },\n        \"marginLeft\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"adds 8px margin to the left\"\n        },\n        \"ariaLabeledBy\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"element id to describe the button accordingly\"\n        },\n        \"ariaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"aria label to provide important when providing only Icon\"\n        },\n        \"ariaHasPopup\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactHTMLProps[\\\"aria-haspopup\\\"]\",\n            \"raw\": \"React.HTMLProps<HTMLButtonElement>[\\\"aria-haspopup\\\"]\"\n          },\n          \"description\": \"aria for a button popup\"\n        },\n        \"ariaExpanded\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"aria to be set if the popup is open\"\n        },\n        \"ariaControls\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"aria controls - receives id for the controlled region\"\n        },\n        \"aria-describedby\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AriaAttributes[\\\"aria-describedby\\\"]\",\n            \"raw\": \"AriaAttributes[\\\"aria-describedby\\\"]\"\n          },\n          \"description\": \"\"\n        },\n        \"aria-hidden\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AriaAttributes[\\\"aria-hidden\\\"]\",\n            \"raw\": \"AriaAttributes[\\\"aria-hidden\\\"]\"\n          },\n          \"description\": \"aria to be used for screen reader to know if the button is hidden\"\n        },\n        \"onFocus\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.FocusEvent<HTMLButtonElement>) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactFocusEvent\",\n                    \"raw\": \"React.FocusEvent<HTMLButtonElement>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"HTMLButtonElement\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"On Button Focus callback\"\n        },\n        \"onBlur\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.FocusEvent<HTMLButtonElement>) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactFocusEvent\",\n                    \"raw\": \"React.FocusEvent<HTMLButtonElement>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"HTMLButtonElement\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"On Button Blur callback\"\n        },\n        \"rightFlat\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"leftFlat\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"preventClickAnimation\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"noSidePadding\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"defaultTextColorOnPrimaryColor\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"default color for text color in ON_PRIMARY_COLOR kind (should be any type of css color (rbg, var, hex...)\"\n        },\n        \"dataTestId\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"@deprecated - use \\\"data-testid\\\" instead\"\n        },\n        \"insetFocus\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Change the focus indicator from around the button to within it\"\n        },\n        \"tabIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"Specifies the tab order of an element\"\n        },\n        \"tooltipContent\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"tooltipPosition\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"DialogPosition\"\n          },\n          \"description\": \"Where the tooltip should be in reference to the children: Top, Left, Right, Bottom ...\"\n        },\n        \"tooltipHideDelay\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"tooltipShowDelay\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"tooltipContainerSelector\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"tooltipMoveBy\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"object\",\n            \"raw\": \"{\\n  main?: number;\\n  secondary?: number;\\n}\",\n            \"signature\": {\n              \"properties\": [\n                {\n                  \"key\": \"main\",\n                  \"value\": {\n                    \"name\": \"number\",\n                    \"required\": false\n                  }\n                },\n                {\n                  \"key\": \"secondary\",\n                  \"value\": {\n                    \"name\": \"number\",\n                    \"required\": false\n                  }\n                }\n              ]\n            }\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Chips/Chips.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Chips\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"label\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ReactNode | ReactNode[]\",\n            \"elements\": [\n              {\n                \"name\": \"ReactNode\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactNode\"\n                  }\n                ],\n                \"raw\": \"ReactNode[]\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"disabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"readOnly\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"dataTestId\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"@deprecated - use \\\"data-testid\\\" instead\"\n        },\n        \"rightRenderer\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ReactNode | ReactNode[]\",\n            \"elements\": [\n              {\n                \"name\": \"ReactNode\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactNode\"\n                  }\n                ],\n                \"raw\": \"ReactNode[]\"\n              }\n            ]\n          },\n          \"description\": \"A React element that is positioned to the right of the text\"\n        },\n        \"leftRenderer\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ReactNode | ReactNode[]\",\n            \"elements\": [\n              {\n                \"name\": \"ReactNode\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactNode\"\n                  }\n                ],\n                \"raw\": \"ReactNode[]\"\n              }\n            ]\n          },\n          \"description\": \"A React element that is positioned to the left of the text\"\n        },\n        \"rightIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"Icon to place on the right\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"leftIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"Icon to place on the left\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"rightAvatar\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Img to place as avatar on the right\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"rightAvatarType\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AvatarType\"\n          },\n          \"description\": \"the type of right avatar\",\n          \"defaultValue\": {\n            \"value\": \"AvatarType.IMG\",\n            \"computed\": true\n          }\n        },\n        \"leftAvatar\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Img to place as avatar on the left\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"leftAvatarType\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AvatarType\"\n          },\n          \"description\": \"the type of left avatar\",\n          \"defaultValue\": {\n            \"value\": \"AvatarType.IMG\",\n            \"computed\": true\n          }\n        },\n        \"iconClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"ClassName for left or right icon\"\n        },\n        \"avatarClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"ClassName for left or right avatar\"\n        },\n        \"color\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"(typeof ElementAllowedColor)[keyof typeof ElementAllowedColor] | string\",\n            \"elements\": [\n              {\n                \"name\": \"unknown[unknown]\",\n                \"raw\": \"(typeof ElementAllowedColor)[keyof typeof ElementAllowedColor]\"\n              },\n              {\n                \"name\": \"string\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"Chips.colors.PRIMARY\",\n            \"computed\": true\n          }\n        },\n        \"iconSize\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"number | string\",\n            \"elements\": [\n              {\n                \"name\": \"number\"\n              },\n              {\n                \"name\": \"string\"\n              }\n            ]\n          },\n          \"description\": \"Size for font icon\",\n          \"defaultValue\": {\n            \"value\": \"18\",\n            \"computed\": false\n          }\n        },\n        \"onDelete\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(id: string, event: React.MouseEvent<HTMLSpanElement>) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"string\"\n                  },\n                  \"name\": \"id\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent<HTMLSpanElement>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"HTMLSpanElement\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"(_id: string, _e: React.MouseEvent<HTMLSpanElement>) => {}\",\n            \"computed\": false\n          }\n        },\n        \"noAnimation\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Disables the Chip's entry animation\",\n          \"defaultValue\": {\n            \"value\": \"true\",\n            \"computed\": false\n          }\n        },\n        \"allowTextSelection\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Allow user to select text\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"onMouseDown\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent<HTMLDivElement, MouseEvent>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"HTMLDivElement\"\n                      },\n                      {\n                        \"name\": \"MouseEvent\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"Callback function to be called when the user clicks the component.\"\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent<HTMLDivElement, MouseEvent>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"HTMLDivElement\"\n                      },\n                      {\n                        \"name\": \"MouseEvent\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"Callback function to be called when the user clicks the component.\"\n        },\n        \"ariaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Applies when element has onClick or onMouseDown props\"\n        },\n        \"clickable\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Deprecated, there is no need to use this prop for implementing clickable chips. Please use onClick for this purpose.\\n@deprecated\"\n        },\n        \"isClickable\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Deprecated, there is no need to use this prop for implementing clickable chips. Please use onClick for this purpose.\\n@deprecated\"\n        },\n        \"disableClickableBehavior\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Disable click behaviors\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"showBorder\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Show border, the border color is `--text-color-on-primary`, should be when the chip is a colored background like\\nselected-color\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"closeButtonAriaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"Remove\\\"\",\n            \"computed\": false\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/Checkbox/Checkbox.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Checkbox\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"A classname to be added to the wrapping element\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"An id to be added the input element\"\n        },\n        \"componentClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"@deprecated - use className instead\"\n        },\n        \"checkboxClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"A classname to be added to the checkbox element label\"\n        },\n        \"labelClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"A classname to be added to the label element\"\n        },\n        \"ariaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"A11y prop to describe the content for screen readers\"\n        },\n        \"label\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"React.ReactNode | Array<React.ReactNode>\",\n            \"elements\": [\n              {\n                \"name\": \"ReactReactNode\",\n                \"raw\": \"React.ReactNode\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactReactNode\",\n                    \"raw\": \"React.ReactNode\"\n                  }\n                ],\n                \"raw\": \"Array<React.ReactNode>\"\n              }\n            ]\n          },\n          \"description\": \"The content to be rendered within the option\"\n        },\n        \"ariaLabelledBy\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"A11y prop - An Id of an element which describes this option\"\n        },\n        \"onChange\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.ChangeEvent<HTMLInputElement>) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactChangeEvent\",\n                    \"raw\": \"React.ChangeEvent<HTMLInputElement>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"HTMLInputElement\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"callback function when the value changes\",\n          \"defaultValue\": {\n            \"value\": \"function noop() {\\n  // No operation performed.\\n}\",\n            \"computed\": false\n          }\n        },\n        \"checked\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Use this when you want to control the component, this will set the state of the component\"\n        },\n        \"indeterminate\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"An in between state to display a non selected\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"disabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Set the option to be disabled\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"defaultChecked\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"the default value which the checkbox will start from\"\n        },\n        \"value\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"The input control's value. When specified in the HTML, this is the initial value, and from then on it can be altered or retrieved at any time using JavaScript to access the respective HTMLInputElement object's value property. The value attribute is always optional, though should be considered mandatory for checkbox, radio, and hidden.l\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"name\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted.\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"tabIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"Specifies the tab order of the input element\"\n        }\n      }\n    }\n  ],\n  \"src/components/Clickable/ClickableWrapper.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"ClickableWrapper\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"children\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"ReactReactNode\",\n            \"raw\": \"React.ReactNode\"\n          },\n          \"description\": \"\"\n        },\n        \"isClickable\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"true\",\n            \"computed\": false\n          }\n        },\n        \"clickableProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ClickableProps\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"{}\",\n            \"computed\": false\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/Counter/Counter.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Counter\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Custom class names to pass to the component wrapper\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"id to pass to the element\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"ariaLabeledBy\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"element id to describe the counter accordingly\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"wrapperClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Use className instead\\n@deprecated\"\n        },\n        \"counterClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Custom class names to pass to the component\"\n        },\n        \"count\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"The numeric value of the counter\",\n          \"defaultValue\": {\n            \"value\": \"0\",\n            \"computed\": false\n          }\n        },\n        \"ariaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Counter description\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"size\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"CounterSize\"\n          },\n          \"description\": \"The size of the counter\",\n          \"defaultValue\": {\n            \"value\": \"Counter.sizes.LARGE\",\n            \"computed\": true\n          }\n        },\n        \"kind\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"CounterType\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"Counter.kinds.FILL\",\n            \"computed\": true\n          }\n        },\n        \"color\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"CounterColor\"\n          },\n          \"description\": \"The color of the counter\",\n          \"defaultValue\": {\n            \"value\": \"Counter.colors.PRIMARY\",\n            \"computed\": true\n          }\n        },\n        \"maxDigits\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"maximum number of digits to display (see relevant story)\",\n          \"defaultValue\": {\n            \"value\": \"3\",\n            \"computed\": false\n          }\n        },\n        \"prefix\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Text prepended to counter value\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"onMouseDown\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent<HTMLSpanElement>) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent<HTMLSpanElement>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"HTMLSpanElement\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"Callback to be called when the counter is clicked.\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"noAnimation\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Disables the component's animation\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/Combobox/Combobox.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Combobox\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Unique element id\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"optionClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"searchWrapperClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"placeholder\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Placeholder to show when no value was selected\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"noResultsMessage\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"A message that will be displayed inside the combo box when no results are found\",\n          \"defaultValue\": {\n            \"value\": \"\\\"No results found\\\"\",\n            \"computed\": false\n          }\n        },\n        \"disabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"options\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Array\",\n            \"elements\": [\n              {\n                \"name\": \"IComboboxOption\"\n              }\n            ],\n            \"raw\": \"IComboboxOption[]\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"[]\",\n            \"computed\": false\n          }\n        },\n        \"categories\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"IComboboxCategoryMap\"\n          },\n          \"description\": \"\"\n        },\n        \"withCategoriesDivider\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Divider between categories sections\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"size\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"unknown[union]\",\n            \"raw\": \"(typeof BASE_SIZES)[keyof typeof BASE_SIZES]\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"Combobox.sizes.MEDIUM\",\n            \"computed\": true\n          }\n        },\n        \"optionLineHeight\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"32\",\n            \"computed\": false\n          }\n        },\n        \"optionsListHeight\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"autoFocus\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"onAddNew\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(value: string) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"string\"\n                  },\n                  \"name\": \"value\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"Callback that called after clicking on the add new combo box button.\\n@param {string} _filterValue\"\n        },\n        \"addNewLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"((label: string) => ElementContent) | string\",\n            \"elements\": [\n              {\n                \"name\": \"unknown\"\n              },\n              {\n                \"name\": \"string\"\n              }\n            ]\n          },\n          \"description\": \"The label of the button that appears at the end of the combo box when the search does not return appropriate options\",\n          \"defaultValue\": {\n            \"value\": \"\\\"Add new\\\"\",\n            \"computed\": false\n          }\n        },\n        \"filter\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(filterValue: string, options: IComboboxOption[]) => IComboboxOption[]\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"string\"\n                  },\n                  \"name\": \"filterValue\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"Array\",\n                    \"elements\": [\n                      {\n                        \"name\": \"IComboboxOption\"\n                      }\n                    ],\n                    \"raw\": \"IComboboxOption[]\"\n                  },\n                  \"name\": \"options\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"IComboboxOption\"\n                  }\n                ],\n                \"raw\": \"IComboboxOption[]\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"(filterValue: string, options: IComboboxOption[]) =>\\noptions.filter(\\n  ({ label }: { label: string }) => !filterValue || label.toLowerCase().includes(filterValue.toLowerCase())\\n)\",\n            \"computed\": false\n          }\n        },\n        \"defaultFilter\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Default search input\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"disableFilter\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"onFilterChanged\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(value: string) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"string\"\n                  },\n                  \"name\": \"value\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"loading\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Display the combo box with loading state\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"onOptionHover\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent, index: number, option: IComboboxOption) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"index\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"IComboboxOption\"\n                  },\n                  \"name\": \"option\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"on mouse hover callback for option\",\n          \"defaultValue\": {\n            \"value\": \"function noop() {\\n  // No operation performed.\\n}\",\n            \"computed\": false\n          }\n        },\n        \"onOptionLeave\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"on mouse leave callback for option\",\n          \"defaultValue\": {\n            \"value\": \"function noop() {\\n  // No operation performed.\\n}\",\n            \"computed\": false\n          }\n        },\n        \"shouldScrollToSelectedItem\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Allowed to the following behavior: scrolling automatically to the combo box's selected option\",\n          \"defaultValue\": {\n            \"value\": \"true\",\n            \"computed\": false\n          }\n        },\n        \"noResultsRenderer\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => JSX.Element\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"JSX.Element\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"stickyCategories\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"defaultVisualFocusFirstIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"By default, the first option will be selected, when focusing selecting the first option, or when changing items\"\n        },\n        \"clearFilterOnSelection\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Clear the filter/search on selection (click or enter)\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"optionRenderer\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(option: IComboboxOption) => JSX.Element\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"IComboboxOption\"\n                  },\n                  \"name\": \"option\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"JSX.Element\"\n              }\n            }\n          },\n          \"description\": \"Replace the regular appearance of combo box option with custom renderer.\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"maxOptionsWithoutScroll\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"Maximum options count without scroll\"\n        },\n        \"renderOnlyVisibleOptions\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Using virtualized list for rendering only the items which visible to the user in any given user (performance optimization)\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(optionData: IComboboxOption) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"IComboboxOption\"\n                  },\n                  \"name\": \"optionData\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"On option click callback\",\n          \"defaultValue\": {\n            \"value\": \"(_optionData: IComboboxOption) => {}\",\n            \"computed\": false\n          }\n        },\n        \"searchIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"Custom search icon\"\n        },\n        \"searchInputAriaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"Search for content\\\"\",\n            \"computed\": false\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/DatePicker/DatePicker.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"DatePicker\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"firstDayOfWeek\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"DayOfWeekShape\"\n          },\n          \"description\": \"set the first day of the week to display\",\n          \"defaultValue\": {\n            \"value\": \"1\",\n            \"computed\": false\n          }\n        },\n        \"date\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"moment.Moment\"\n          },\n          \"description\": \"current start date\"\n        },\n        \"endDate\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"moment.Moment\"\n          },\n          \"description\": \"current end date\"\n        },\n        \"onPickDate\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(date: Moment | RangeDate) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"union\",\n                    \"raw\": \"Moment | RangeDate\",\n                    \"elements\": [\n                      {\n                        \"name\": \"moment.Moment\"\n                      },\n                      {\n                        \"name\": \"RangeDate\"\n                      }\n                    ]\n                  },\n                  \"name\": \"date\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"on date selected callback\"\n        },\n        \"hideNavigationKeys\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"hide the month navigations keys\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"enableOutsideDays\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"show days outside the cuurent month view\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"showWeekNumber\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"show week number column\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"daySize\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"set the size of single day element\",\n          \"defaultValue\": {\n            \"value\": \"40\",\n            \"computed\": false\n          }\n        },\n        \"shouldBlockDay\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(date: Moment) => boolean\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"moment.Moment\"\n                  },\n                  \"name\": \"date\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"boolean\"\n              }\n            }\n          },\n          \"description\": \"determine if day should be disabled\"\n        },\n        \"range\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"date range mode\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"numberOfMonths\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"number of month to display\",\n          \"defaultValue\": {\n            \"value\": \"1\",\n            \"computed\": false\n          }\n        },\n        \"shouldBlockYear\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(year: number) => boolean\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"year\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"boolean\"\n              }\n            }\n          },\n          \"description\": \"determine if year should be disabled\"\n        },\n        \"shouldBlockRange\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(date: Moment) => boolean\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"moment.Moment\"\n                  },\n                  \"name\": \"date\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"boolean\"\n              }\n            }\n          },\n          \"description\": \"determine if date range should be disabled\"\n        }\n      }\n    }\n  ],\n  \"src/components/Dialog/Dialog.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [\n        {\n          \"name\": \"closeDialogOnEscape\",\n          \"docblock\": null,\n          \"modifiers\": [],\n          \"params\": [\n            {\n              \"name\": \"event\",\n              \"optional\": false,\n              \"type\": {\n                \"name\": \"KeyboardEvent\",\n                \"alias\": \"KeyboardEvent\"\n              }\n            }\n          ],\n          \"returns\": null\n        },\n        {\n          \"name\": \"getContainer\",\n          \"docblock\": null,\n          \"modifiers\": [],\n          \"params\": [],\n          \"returns\": null\n        },\n        {\n          \"name\": \"showDialog\",\n          \"docblock\": null,\n          \"modifiers\": [],\n          \"params\": [\n            {\n              \"name\": \"options\",\n              \"optional\": true,\n              \"type\": null\n            }\n          ],\n          \"returns\": null\n        },\n        {\n          \"name\": \"onShowDialog\",\n          \"docblock\": null,\n          \"modifiers\": [],\n          \"params\": [],\n          \"returns\": null\n        },\n        {\n          \"name\": \"showDialogIfNeeded\",\n          \"docblock\": null,\n          \"modifiers\": [],\n          \"params\": [\n            {\n              \"name\": \"options\",\n              \"optional\": true,\n              \"type\": null\n            }\n          ],\n          \"returns\": null\n        },\n        {\n          \"name\": \"hideDialog\",\n          \"docblock\": null,\n          \"modifiers\": [],\n          \"params\": [\n            {\n              \"name\": \"event\",\n              \"optional\": false,\n              \"type\": {\n                \"name\": \"union\",\n                \"raw\": \"React.MouseEvent | React.KeyboardEvent | KeyboardEvent | React.FocusEvent | CustomEvent\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  {\n                    \"name\": \"ReactKeyboardEvent\",\n                    \"raw\": \"React.KeyboardEvent\"\n                  },\n                  {\n                    \"name\": \"KeyboardEvent\"\n                  },\n                  {\n                    \"name\": \"ReactFocusEvent\",\n                    \"raw\": \"React.FocusEvent\"\n                  },\n                  {\n                    \"name\": \"CustomEvent\"\n                  }\n                ],\n                \"alias\": \"DialogEvent\"\n              }\n            },\n            {\n              \"name\": \"eventName\",\n              \"optional\": false,\n              \"type\": {\n                \"name\": \"union\",\n                \"raw\": \"HideShowEvent | string\",\n                \"elements\": [\n                  {\n                    \"name\": \"HideShowEvent\"\n                  },\n                  {\n                    \"name\": \"string\"\n                  }\n                ]\n              }\n            }\n          ],\n          \"returns\": null\n        },\n        {\n          \"name\": \"onHideDialog\",\n          \"docblock\": null,\n          \"modifiers\": [],\n          \"params\": [\n            {\n              \"name\": \"event\",\n              \"optional\": false,\n              \"type\": {\n                \"name\": \"union\",\n                \"raw\": \"React.MouseEvent | React.KeyboardEvent | KeyboardEvent | React.FocusEvent | CustomEvent\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  {\n                    \"name\": \"ReactKeyboardEvent\",\n                    \"raw\": \"React.KeyboardEvent\"\n                  },\n                  {\n                    \"name\": \"KeyboardEvent\"\n                  },\n                  {\n                    \"name\": \"ReactFocusEvent\",\n                    \"raw\": \"React.FocusEvent\"\n                  },\n                  {\n                    \"name\": \"CustomEvent\"\n                  }\n                ],\n                \"alias\": \"DialogEvent\"\n              }\n            },\n            {\n              \"name\": \"eventName\",\n              \"optional\": false,\n              \"type\": {\n                \"name\": \"union\",\n                \"raw\": \"HideShowEvent | string\",\n                \"elements\": [\n                  {\n                    \"name\": \"HideShowEvent\"\n                  },\n                  {\n                    \"name\": \"string\"\n                  }\n                ]\n              }\n            }\n          ],\n          \"returns\": null\n        },\n        {\n          \"name\": \"hideDialogIfNeeded\",\n          \"docblock\": null,\n          \"modifiers\": [],\n          \"params\": [\n            {\n              \"name\": \"event\",\n              \"optional\": false,\n              \"type\": {\n                \"name\": \"union\",\n                \"raw\": \"React.MouseEvent | React.KeyboardEvent | KeyboardEvent | React.FocusEvent | CustomEvent\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  {\n                    \"name\": \"ReactKeyboardEvent\",\n                    \"raw\": \"React.KeyboardEvent\"\n                  },\n                  {\n                    \"name\": \"KeyboardEvent\"\n                  },\n                  {\n                    \"name\": \"ReactFocusEvent\",\n                    \"raw\": \"React.FocusEvent\"\n                  },\n                  {\n                    \"name\": \"CustomEvent\"\n                  }\n                ],\n                \"alias\": \"DialogEvent\"\n              }\n            },\n            {\n              \"name\": \"eventName\",\n              \"optional\": false,\n              \"type\": {\n                \"name\": \"union\",\n                \"raw\": \"HideShowEvent | string\",\n                \"elements\": [\n                  {\n                    \"name\": \"HideShowEvent\"\n                  },\n                  {\n                    \"name\": \"string\"\n                  }\n                ]\n              }\n            }\n          ],\n          \"returns\": null\n        },\n        {\n          \"name\": \"handleEvent\",\n          \"docblock\": null,\n          \"modifiers\": [],\n          \"params\": [\n            {\n              \"name\": \"eventName\",\n              \"optional\": false,\n              \"type\": {\n                \"name\": \"HideShowEvent\",\n                \"alias\": \"HideShowEvent\"\n              }\n            },\n            {\n              \"name\": \"target\",\n              \"optional\": false,\n              \"type\": {\n                \"name\": \"EventTarget\",\n                \"alias\": \"EventTarget\"\n              }\n            },\n            {\n              \"name\": \"event\",\n              \"optional\": false,\n              \"type\": {\n                \"name\": \"union\",\n                \"raw\": \"React.MouseEvent | React.KeyboardEvent | KeyboardEvent | React.FocusEvent | CustomEvent\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  {\n                    \"name\": \"ReactKeyboardEvent\",\n                    \"raw\": \"React.KeyboardEvent\"\n                  },\n                  {\n                    \"name\": \"KeyboardEvent\"\n                  },\n                  {\n                    \"name\": \"ReactFocusEvent\",\n                    \"raw\": \"React.FocusEvent\"\n                  },\n                  {\n                    \"name\": \"CustomEvent\"\n                  }\n                ],\n                \"alias\": \"DialogEvent\"\n              }\n            }\n          ],\n          \"returns\": null\n        },\n        {\n          \"name\": \"isShown\",\n          \"docblock\": null,\n          \"modifiers\": [],\n          \"params\": [],\n          \"returns\": null\n        },\n        {\n          \"name\": \"isShowTrigger\",\n          \"docblock\": null,\n          \"modifiers\": [],\n          \"params\": [\n            {\n              \"name\": \"eventName\",\n              \"optional\": false,\n              \"type\": {\n                \"name\": \"HideShowEvent\",\n                \"alias\": \"HideShowEvent\"\n              }\n            }\n          ],\n          \"returns\": null\n        },\n        {\n          \"name\": \"isHideTrigger\",\n          \"docblock\": null,\n          \"modifiers\": [],\n          \"params\": [\n            {\n              \"name\": \"eventName\",\n              \"optional\": false,\n              \"type\": {\n                \"name\": \"HideShowEvent\",\n                \"alias\": \"HideShowEvent\"\n              }\n            }\n          ],\n          \"returns\": null\n        },\n        {\n          \"name\": \"onMouseEnter\",\n          \"docblock\": null,\n          \"modifiers\": [],\n          \"params\": [\n            {\n              \"name\": \"e\",\n              \"optional\": false,\n              \"type\": {\n                \"name\": \"ReactMouseEvent\",\n                \"raw\": \"React.MouseEvent\",\n                \"alias\": \"React.MouseEvent\"\n              }\n            }\n          ],\n          \"returns\": null\n        },\n        {\n          \"name\": \"onMouseLeave\",\n          \"docblock\": null,\n          \"modifiers\": [],\n          \"params\": [\n            {\n              \"name\": \"e\",\n              \"optional\": false,\n              \"type\": {\n                \"name\": \"ReactMouseEvent\",\n                \"raw\": \"React.MouseEvent\",\n                \"alias\": \"React.MouseEvent\"\n              }\n            }\n          ],\n          \"returns\": null\n        },\n        {\n          \"name\": \"onClick\",\n          \"docblock\": null,\n          \"modifiers\": [],\n          \"params\": [\n            {\n              \"name\": \"e\",\n              \"optional\": false,\n              \"type\": {\n                \"name\": \"ReactMouseEvent\",\n                \"raw\": \"React.MouseEvent\",\n                \"alias\": \"React.MouseEvent\"\n              }\n            }\n          ],\n          \"returns\": null\n        },\n        {\n          \"name\": \"onKeyDown\",\n          \"docblock\": null,\n          \"modifiers\": [],\n          \"params\": [\n            {\n              \"name\": \"event\",\n              \"optional\": false,\n              \"type\": {\n                \"name\": \"ReactKeyboardEvent\",\n                \"raw\": \"React.KeyboardEvent\",\n                \"alias\": \"React.KeyboardEvent\"\n              }\n            }\n          ],\n          \"returns\": null\n        },\n        {\n          \"name\": \"onMouseDown\",\n          \"docblock\": null,\n          \"modifiers\": [],\n          \"params\": [\n            {\n              \"name\": \"e\",\n              \"optional\": false,\n              \"type\": {\n                \"name\": \"ReactMouseEvent\",\n                \"raw\": \"React.MouseEvent\",\n                \"alias\": \"React.MouseEvent\"\n              }\n            }\n          ],\n          \"returns\": null\n        },\n        {\n          \"name\": \"onFocus\",\n          \"docblock\": null,\n          \"modifiers\": [],\n          \"params\": [\n            {\n              \"name\": \"e\",\n              \"optional\": false,\n              \"type\": {\n                \"name\": \"ReactFocusEvent\",\n                \"raw\": \"React.FocusEvent\",\n                \"alias\": \"React.FocusEvent\"\n              }\n            }\n          ],\n          \"returns\": null\n        },\n        {\n          \"name\": \"onBlur\",\n          \"docblock\": null,\n          \"modifiers\": [],\n          \"params\": [\n            {\n              \"name\": \"e\",\n              \"optional\": false,\n              \"type\": {\n                \"name\": \"ReactFocusEvent\",\n                \"raw\": \"React.FocusEvent\",\n                \"alias\": \"React.FocusEvent\"\n              }\n            }\n          ],\n          \"returns\": null\n        },\n        {\n          \"name\": \"onEsc\",\n          \"docblock\": null,\n          \"modifiers\": [],\n          \"params\": [\n            {\n              \"name\": \"e\",\n              \"optional\": false,\n              \"type\": {\n                \"name\": \"ReactKeyboardEvent\",\n                \"raw\": \"React.KeyboardEvent\",\n                \"alias\": \"React.KeyboardEvent\"\n              }\n            }\n          ],\n          \"returns\": null\n        },\n        {\n          \"name\": \"onContextMenu\",\n          \"docblock\": null,\n          \"modifiers\": [],\n          \"params\": [\n            {\n              \"name\": \"e\",\n              \"optional\": false,\n              \"type\": {\n                \"name\": \"ReactMouseEvent\",\n                \"raw\": \"React.MouseEvent\",\n                \"alias\": \"React.MouseEvent\"\n              }\n            }\n          ],\n          \"returns\": null\n        },\n        {\n          \"name\": \"onClickOutside\",\n          \"docblock\": null,\n          \"modifiers\": [],\n          \"params\": [\n            {\n              \"name\": \"event\",\n              \"optional\": false,\n              \"type\": {\n                \"name\": \"ReactMouseEvent\",\n                \"raw\": \"React.MouseEvent\",\n                \"alias\": \"React.MouseEvent\"\n              }\n            }\n          ],\n          \"returns\": null\n        },\n        {\n          \"name\": \"onDialogEnter\",\n          \"docblock\": null,\n          \"modifiers\": [],\n          \"params\": [],\n          \"returns\": null\n        },\n        {\n          \"name\": \"onDialogLeave\",\n          \"docblock\": null,\n          \"modifiers\": [],\n          \"params\": [\n            {\n              \"name\": \"event\",\n              \"optional\": false,\n              \"type\": {\n                \"name\": \"ReactMouseEvent\",\n                \"raw\": \"React.MouseEvent\",\n                \"alias\": \"React.MouseEvent\"\n              }\n            }\n          ],\n          \"returns\": null\n        },\n        {\n          \"name\": \"onContentClick\",\n          \"docblock\": null,\n          \"modifiers\": [],\n          \"params\": [\n            {\n              \"name\": \"e\",\n              \"optional\": false,\n              \"type\": {\n                \"name\": \"ReactMouseEvent\",\n                \"raw\": \"React.MouseEvent\",\n                \"alias\": \"React.MouseEvent\"\n              }\n            }\n          ],\n          \"returns\": null\n        }\n      ],\n      \"displayName\": \"Dialog\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"referenceWrapperClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"A Classname to be added to <span> element which wraps the children\"\n        },\n        \"position\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"DialogPosition\"\n          },\n          \"description\": \"Where the dialog should be in reference to the children,\\nTop, Left, Right, Bottom ...\",\n          \"defaultValue\": {\n            \"value\": \"\\\"top\\\"\",\n            \"computed\": false\n          }\n        },\n        \"modifiers\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Array\",\n            \"elements\": [\n              {\n                \"name\": \"Modifier\",\n                \"elements\": [\n                  {\n                    \"name\": \"any\"\n                  }\n                ],\n                \"raw\": \"Modifier<any>\"\n              }\n            ],\n            \"raw\": \"Modifier<any>[]\"\n          },\n          \"description\": \"PopperJS Modifiers type\\nhttps://popper.js.org/docs/v2/modifiers/\",\n          \"defaultValue\": {\n            \"value\": \"[]\",\n            \"computed\": false\n          }\n        },\n        \"startingEdge\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"moveBy\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"object\",\n            \"raw\": \"{ main?: number; secondary?: number }\",\n            \"signature\": {\n              \"properties\": [\n                {\n                  \"key\": \"main\",\n                  \"value\": {\n                    \"name\": \"number\",\n                    \"required\": false\n                  }\n                },\n                {\n                  \"key\": \"secondary\",\n                  \"value\": {\n                    \"name\": \"number\",\n                    \"required\": false\n                  }\n                }\n              ]\n            }\n          },\n          \"description\": \"How much to move the dialog in relative to children\\nmain is the axis in which the position is aligned to\\nsecondary is the vertical axes to the position\",\n          \"defaultValue\": {\n            \"value\": \"{ main: 0, secondary: 0 }\",\n            \"computed\": false\n          }\n        },\n        \"showDelay\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"how much delay should the Dialog wait until it should trigger the show in MS\",\n          \"defaultValue\": {\n            \"value\": \"100\",\n            \"computed\": false\n          }\n        },\n        \"hideDelay\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"how much delay should the Dialog wait until it should trigger the hide in MS\",\n          \"defaultValue\": {\n            \"value\": \"100\",\n            \"computed\": false\n          }\n        },\n        \"showTrigger\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"HideShowEvent | HideShowEvent[]\",\n            \"elements\": [\n              {\n                \"name\": \"HideShowEvent\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"HideShowEvent\"\n                  }\n                ],\n                \"raw\": \"HideShowEvent[]\"\n              }\n            ]\n          },\n          \"description\": \"an array of hide/show trigger -\\nDialog.hideShowTriggers\",\n          \"defaultValue\": {\n            \"value\": \"Dialog.hideShowTriggers.MOUSE_ENTER\",\n            \"computed\": true\n          }\n        },\n        \"hideTrigger\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"HideShowEvent | HideShowEvent[]\",\n            \"elements\": [\n              {\n                \"name\": \"HideShowEvent\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"HideShowEvent\"\n                  }\n                ],\n                \"raw\": \"HideShowEvent[]\"\n              }\n            ]\n          },\n          \"description\": \"an array of hide/show trigger -\\nDialog.hideShowTriggers\",\n          \"defaultValue\": {\n            \"value\": \"Dialog.hideShowTriggers.MOUSE_LEAVE\",\n            \"computed\": true\n          }\n        },\n        \"showOnDialogEnter\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"If true, prevents open Dialog from closing on mouseEnter and closes Dialog, when  mouse leaves it\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"shouldShowOnMount\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Show the Dialog when the children are mounting\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"disable\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"disable the opening of the dialog\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"open\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"open is a controlled prop to open the dialog\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"isOpen\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"used when state is derived from props\"\n        },\n        \"showTriggerIgnoreClass\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | Array<string>\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"string\"\n                  }\n                ],\n                \"raw\": \"Array<string>\"\n              }\n            ]\n          },\n          \"description\": \"if this class exists on the children the show trigger will be ignored\"\n        },\n        \"hideTriggerIgnoreClass\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | Array<string>\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"string\"\n                  }\n                ],\n                \"raw\": \"Array<string>\"\n              }\n            ]\n          },\n          \"description\": \"if this class exists on the children the hide trigger will be ignored\"\n        },\n        \"animationType\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AnimationType\"\n          },\n          \"description\": \"Dialog animation type\",\n          \"defaultValue\": {\n            \"value\": \"Dialog.animationTypes.EXPAND\",\n            \"computed\": true\n          }\n        },\n        \"wrapperClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Classname to be added to the content container\"\n        },\n        \"preventAnimationOnMount\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Prevent Animation\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"containerSelector\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"the container selector in which to append the dialog\\nfor examples: \\\"body\\\" , \\\".my-class\\\", \\\"#my-id\\\"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"body\\\"\",\n            \"computed\": false\n          }\n        },\n        \"tooltip\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"should position the tooltip element\\nhttps://popper.js.org/docs/v2/modifiers/arrow/\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"tooltipClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"class name to add to the tooltip element\"\n        },\n        \"onDialogDidShow\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"callback to be called when the dialog is shown\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"onDialogDidHide\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: DialogEvent, eventName: HideShowEvent | string) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"union\",\n                    \"raw\": \"React.MouseEvent | React.KeyboardEvent | KeyboardEvent | React.FocusEvent | CustomEvent\",\n                    \"elements\": [\n                      {\n                        \"name\": \"ReactMouseEvent\",\n                        \"raw\": \"React.MouseEvent\"\n                      },\n                      {\n                        \"name\": \"ReactKeyboardEvent\",\n                        \"raw\": \"React.KeyboardEvent\"\n                      },\n                      {\n                        \"name\": \"KeyboardEvent\"\n                      },\n                      {\n                        \"name\": \"ReactFocusEvent\",\n                        \"raw\": \"React.FocusEvent\"\n                      },\n                      {\n                        \"name\": \"CustomEvent\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"union\",\n                    \"raw\": \"HideShowEvent | string\",\n                    \"elements\": [\n                      {\n                        \"name\": \"HideShowEvent\"\n                      },\n                      {\n                        \"name\": \"string\"\n                      }\n                    ]\n                  },\n                  \"name\": \"eventName\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"callback to be called when the dialog is hidden\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"onClickOutside\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"callback to be called when click outside is being triggered\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"onContentClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"callback to be called when click on the content is being triggered\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"zIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"z-index to add to the dialog\"\n        },\n        \"useDerivedStateFromProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"hideWhenReferenceHidden\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Make the dialog disappear when the element it is attached to becomes hidden\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"shoudlCallbackOnMount\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"@deprecated - use shouldCallbackOnMount instead\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"shouldCallbackOnMount\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"instantShowAndHide\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"getDynamicShowDelay\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => { showDelay: number; preventAnimation: boolean }\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"signature\",\n                \"type\": \"object\",\n                \"raw\": \"{ showDelay: number; preventAnimation: boolean }\",\n                \"signature\": {\n                  \"properties\": [\n                    {\n                      \"key\": \"showDelay\",\n                      \"value\": {\n                        \"name\": \"number\",\n                        \"required\": true\n                      }\n                    },\n                    {\n                      \"key\": \"preventAnimation\",\n                      \"value\": {\n                        \"name\": \"boolean\",\n                        \"required\": true\n                      }\n                    }\n                  ]\n                }\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"content\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"(() => JSX.Element) | JSX.Element\",\n            \"elements\": [\n              {\n                \"name\": \"unknown\"\n              },\n              {\n                \"name\": \"JSX.Element\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ReactElement | ReactElement[] | string\",\n            \"elements\": [\n              {\n                \"name\": \"ReactElement\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactElement\"\n                  }\n                ],\n                \"raw\": \"ReactElement[]\"\n              },\n              {\n                \"name\": \"string\"\n              }\n            ]\n          },\n          \"description\": \"The element where we will position the dialog beside.\"\n        },\n        \"addKeyboardHideShowTriggersByDefault\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Treats keyboard focus/blur events as mouse-enter/mouse-leave events\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"disableContainerScroll\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"boolean | string\",\n            \"elements\": [\n              {\n                \"name\": \"boolean\"\n              },\n              {\n                \"name\": \"string\"\n              }\n            ]\n          },\n          \"description\": \"If true disable the scroll for the containerSelector element.\\nIf string use it as selector to prevent scroll.\"\n        }\n      }\n    }\n  ],\n  \"src/components/Dropdown/Dropdown.jsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Dropdown\",\n      \"props\": {\n        \"multi\": {\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          },\n          \"description\": \"If set to true, the dropdown will be in multi-select mode.\\nWhen in multi-select mode, the selected value will be an array,\\nand it will be displayed as our [`<Chips>`](/?path=/docs/components-chips--sandbox) component.\",\n          \"type\": {\n            \"name\": \"bool\"\n          },\n          \"required\": false\n        },\n        \"multiline\": {\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          },\n          \"description\": \"If set to true together with `multi`, it will make the dropdown expand to multiple lines when new values are selected.\",\n          \"type\": {\n            \"name\": \"bool\"\n          },\n          \"required\": false\n        },\n        \"closeMenuOnSelect\": {\n          \"defaultValue\": {\n            \"value\": \"undefined\",\n            \"computed\": true\n          },\n          \"description\": \"Pass closeMenuOnSelect to close the multi choose any time an options is chosen.\",\n          \"type\": {\n            \"name\": \"bool\"\n          },\n          \"required\": false\n        },\n        \"tabSelectsValue\": {\n          \"defaultValue\": {\n            \"value\": \"true\",\n            \"computed\": false\n          },\n          \"description\": \"Overrides the built-in logic of tab selecting value (default: true)\",\n          \"type\": {\n            \"name\": \"bool\"\n          },\n          \"required\": false\n        },\n        \"className\": {\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          },\n          \"description\": \"Custom style\",\n          \"type\": {\n            \"name\": \"string\"\n          },\n          \"required\": false\n        },\n        \"optionWrapperClassName\": {\n          \"defaultValue\": {\n            \"value\": \"undefined\",\n            \"computed\": true\n          },\n          \"description\": \"ClassName to be added to dropdown option wrapper (dropdown-wrapper__option--reset)\",\n          \"type\": {\n            \"name\": \"string\"\n          },\n          \"required\": false\n        },\n        \"dropdownMenuWrapperClassName\": {\n          \"defaultValue\": {\n            \"value\": \"undefined\",\n            \"computed\": true\n          },\n          \"description\": \"ClassName to be added to dropdown menu wrapper (dropdown-menu-wrapper)\",\n          \"type\": {\n            \"name\": \"string\"\n          },\n          \"required\": false\n        },\n        \"singleValueWrapperClassName\": {\n          \"defaultValue\": {\n            \"value\": \"undefined\",\n            \"computed\": true\n          },\n          \"description\": \"ClassName to be added to dropdown single value wrapper (dropdown-wrapper__single-value--reset)\",\n          \"type\": {\n            \"name\": \"string\"\n          },\n          \"required\": false\n        },\n        \"placeholder\": {\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          },\n          \"description\": \"Placeholder to show when no value was selected\",\n          \"type\": {\n            \"name\": \"string\"\n          },\n          \"required\": false\n        },\n        \"onMenuOpen\": {\n          \"defaultValue\": {\n            \"value\": \"function noop() {\\n  // No operation performed.\\n}\",\n            \"computed\": false\n          },\n          \"description\": \"Called when menu is opened\",\n          \"type\": {\n            \"name\": \"func\"\n          },\n          \"required\": false\n        },\n        \"onMenuClose\": {\n          \"defaultValue\": {\n            \"value\": \"function noop() {\\n  // No operation performed.\\n}\",\n            \"computed\": false\n          },\n          \"description\": \"Called when menu is closed\",\n          \"type\": {\n            \"name\": \"func\"\n          },\n          \"required\": false\n        },\n        \"onKeyDown\": {\n          \"defaultValue\": {\n            \"value\": \"function noop() {\\n  // No operation performed.\\n}\",\n            \"computed\": false\n          },\n          \"description\": \"Called when key is pressed in the dropdown\",\n          \"type\": {\n            \"name\": \"func\"\n          },\n          \"required\": false\n        },\n        \"onFocus\": {\n          \"defaultValue\": {\n            \"value\": \"function noop() {\\n  // No operation performed.\\n}\",\n            \"computed\": false\n          },\n          \"description\": \"Called when focused\",\n          \"type\": {\n            \"name\": \"func\"\n          },\n          \"required\": false\n        },\n        \"onBlur\": {\n          \"defaultValue\": {\n            \"value\": \"function noop() {\\n  // No operation performed.\\n}\",\n            \"computed\": false\n          },\n          \"description\": \"Called when blurred\",\n          \"type\": {\n            \"name\": \"func\"\n          },\n          \"required\": false\n        },\n        \"onChange\": {\n          \"defaultValue\": {\n            \"value\": \"function noop() {\\n  // No operation performed.\\n}\",\n            \"computed\": false\n          },\n          \"description\": \"Called when selected value has changed\",\n          \"type\": {\n            \"name\": \"func\"\n          },\n          \"required\": false\n        },\n        \"onInputChange\": {\n          \"defaultValue\": {\n            \"value\": \"function noop() {\\n  // No operation performed.\\n}\",\n            \"computed\": false\n          },\n          \"description\": \"Called when the dropdown's input changes.\",\n          \"type\": {\n            \"name\": \"func\"\n          },\n          \"required\": false\n        },\n        \"searchable\": {\n          \"defaultValue\": {\n            \"value\": \"true\",\n            \"computed\": false\n          },\n          \"description\": \"If true, search in options will be enabled\",\n          \"type\": {\n            \"name\": \"bool\"\n          },\n          \"required\": false\n        },\n        \"options\": {\n          \"defaultValue\": {\n            \"value\": \"[]\",\n            \"computed\": false\n          },\n          \"description\": \"The dropdown options\",\n          \"type\": {\n            \"name\": \"arrayOf\",\n            \"value\": {\n              \"name\": \"object\"\n            }\n          },\n          \"required\": false\n        },\n        \"menuPlacement\": {\n          \"defaultValue\": {\n            \"value\": \"Dropdown.menuPlacements.BOTTOM\",\n            \"computed\": true\n          },\n          \"description\": \"Default placement of the Dropdown menu in relation to its control. Use \\\"auto\\\" to flip the menu when there isn't enough space below the control.\",\n          \"type\": {\n            \"name\": \"enum\",\n            \"value\": [\n              {\n                \"value\": \"\\\"top\\\"\",\n                \"computed\": false\n              },\n              {\n                \"value\": \"\\\"bottom\\\"\",\n                \"computed\": false\n              },\n              {\n                \"value\": \"\\\"auto\\\"\",\n                \"computed\": false\n              }\n            ]\n          },\n          \"required\": false\n        },\n        \"menuPosition\": {\n          \"defaultValue\": {\n            \"value\": \"Dropdown.menuPositions.ABSOLUTE\",\n            \"computed\": true\n          },\n          \"description\": \"The CSS position value of the menu, when \\\"fixed\\\" extra layout management might be required\\nFixed position can be used to solve the issue of positioning Dropdown inside overflow container like Modal or Dialog\",\n          \"type\": {\n            \"name\": \"enum\",\n            \"value\": [\n              {\n                \"value\": \"\\\"absolute\\\"\",\n                \"computed\": false\n              },\n              {\n                \"value\": \"\\\"fixed\\\"\",\n                \"computed\": false\n              }\n            ]\n          },\n          \"required\": false\n        },\n        \"noOptionsMessage\": {\n          \"defaultValue\": {\n            \"value\": \"function noop() {\\n  // No operation performed.\\n}\",\n            \"computed\": false\n          },\n          \"description\": \"Text to display when there are no options\",\n          \"type\": {\n            \"name\": \"func\"\n          },\n          \"required\": false\n        },\n        \"clearable\": {\n          \"defaultValue\": {\n            \"value\": \"true\",\n            \"computed\": false\n          },\n          \"description\": \"If set to true, clear button will be added\",\n          \"type\": {\n            \"name\": \"bool\"\n          },\n          \"required\": false\n        },\n        \"size\": {\n          \"defaultValue\": {\n            \"value\": \"SIZES.MEDIUM\",\n            \"computed\": true\n          },\n          \"description\": \"Select menu size from `Dropdown.size` - Dropdown.sizes.LARGE | Dropdown.sizes.MEDIUM | Dropdown.sizes.SMALL\",\n          \"type\": {\n            \"name\": \"string\"\n          },\n          \"required\": false\n        },\n        \"extraStyles\": {\n          \"defaultValue\": {\n            \"value\": \"baseStyles => baseStyles\",\n            \"computed\": false\n          },\n          \"description\": \"Custom function to override existing styles (similar to `react-select`'s `style` prop), for example: `base => ({...base, color: 'red'})`, where `base` is the component's default styles\",\n          \"type\": {\n            \"name\": \"func\"\n          },\n          \"required\": false\n        },\n        \"tabIndex\": {\n          \"defaultValue\": {\n            \"value\": \"\\\"0\\\"\",\n            \"computed\": false\n          },\n          \"description\": \"Tab index for keyboard navigation purposes\",\n          \"type\": {\n            \"name\": \"union\",\n            \"value\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"number\"\n              }\n            ]\n          },\n          \"required\": false\n        },\n        \"onOptionRemove\": {\n          \"defaultValue\": {\n            \"value\": \"undefined\",\n            \"computed\": true\n          },\n          \"description\": \"callback to be called when `multiline` is `true` and the option is removed\",\n          \"type\": {\n            \"name\": \"func\"\n          },\n          \"required\": false\n        },\n        \"id\": {\n          \"defaultValue\": {\n            \"value\": \"\\\"dropdown-menu-id\\\"\",\n            \"computed\": false\n          },\n          \"description\": \"ID for the select container\",\n          \"type\": {\n            \"name\": \"string\"\n          },\n          \"required\": false\n        },\n        \"autoFocus\": {\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          },\n          \"description\": \"focusAuto when component mount\",\n          \"type\": {\n            \"name\": \"bool\"\n          },\n          \"required\": false\n        },\n        \"closeMenuOnScroll\": {\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          },\n          \"description\": \"If menu should be closed on scroll - helpful for some tricky use cases\\n@default false, but true when insideOverflowContainer or insideOverflowWithTransformContainer are true\",\n          \"type\": {\n            \"name\": \"bool\"\n          },\n          \"required\": false\n        },\n        \"ref\": {\n          \"defaultValue\": {\n            \"value\": \"undefined\",\n            \"computed\": true\n          },\n          \"description\": \"Pass Ref for reference of the actual dropdown component\",\n          \"type\": {\n            \"name\": \"func\"\n          },\n          \"required\": false\n        },\n        \"withMandatoryDefaultOptions\": {\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          },\n          \"description\": \"The options set by default will be set as mandatory and the user will not be able to cancel their selection\",\n          \"type\": {\n            \"name\": \"bool\"\n          },\n          \"required\": false\n        },\n        \"insideOverflowContainer\": {\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          },\n          \"description\": \"For display the drop down menu in overflow hidden/scroll container.\",\n          \"type\": {\n            \"name\": \"bool\"\n          },\n          \"required\": false\n        },\n        \"insideOverflowWithTransformContainer\": {\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          },\n          \"description\": \"For display the drop down menu in overflow hidden/scroll container which contains transform css function usage.\",\n          \"type\": {\n            \"name\": \"bool\"\n          },\n          \"required\": false\n        },\n        \"tooltipContent\": {\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          },\n          \"description\": \"When content is passed, the dropdown will include a tooltip on the dropdown's value.\",\n          \"type\": {\n            \"name\": \"string\"\n          },\n          \"required\": false\n        },\n        \"disabled\": {\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          },\n          \"description\": \"If set to true, dropdown will be disabled\",\n          \"type\": {\n            \"name\": \"bool\"\n          },\n          \"required\": false\n        },\n        \"readOnly\": {\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          },\n          \"description\": \"If set to true, dropdown won't be editable\",\n          \"type\": {\n            \"name\": \"bool\"\n          },\n          \"required\": false\n        },\n        \"isLoading\": {\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          },\n          \"description\": \"Display the drop down with loading state.\",\n          \"type\": {\n            \"name\": \"bool\"\n          },\n          \"required\": false\n        },\n        \"loadingMessage\": {\n          \"defaultValue\": {\n            \"value\": \"undefined\",\n            \"computed\": true\n          },\n          \"description\": \"Overrides the built-in logic of loading message design\",\n          \"type\": {\n            \"name\": \"func\"\n          },\n          \"required\": false\n        },\n        \"ariaLabel\": {\n          \"defaultValue\": {\n            \"value\": \"undefined\",\n            \"computed\": true\n          },\n          \"description\": \"aria-label attribute for dropdown\",\n          \"type\": {\n            \"name\": \"string\"\n          },\n          \"required\": false\n        },\n        \"filterOption\": {\n          \"defaultValue\": {\n            \"value\": \"undefined\",\n            \"computed\": true\n          },\n          \"description\": \"Overrides the build-in search filter logic - https://react-select.com/advanced#custom-filter-logic\\ncreateFilter function is available at Dropdown.createFilter\",\n          \"type\": {\n            \"name\": \"union\",\n            \"value\": [\n              {\n                \"name\": \"func\"\n              },\n              {\n                \"name\": \"object\"\n              }\n            ]\n          },\n          \"required\": false\n        },\n        \"openMenuOnFocus\": {\n          \"description\": \"If set to true, the menu will open when focused\",\n          \"type\": {\n            \"name\": \"bool\"\n          },\n          \"required\": false\n        },\n        \"openMenuOnClick\": {\n          \"description\": \"If set to true, the menu will open when clicked\",\n          \"type\": {\n            \"name\": \"bool\"\n          },\n          \"required\": false\n        },\n        \"optionRenderer\": {\n          \"description\": \"custom option render function\",\n          \"type\": {\n            \"name\": \"union\",\n            \"value\": [\n              {\n                \"name\": \"func\"\n              },\n              {\n                \"name\": \"object\"\n              }\n            ]\n          },\n          \"required\": false\n        },\n        \"valueRenderer\": {\n          \"description\": \"custom value render function\",\n          \"type\": {\n            \"name\": \"func\"\n          },\n          \"required\": false\n        },\n        \"menuRenderer\": {\n          \"description\": \"custom menu render function\",\n          \"type\": {\n            \"name\": \"func\"\n          },\n          \"required\": false\n        },\n        \"rtl\": {\n          \"description\": \"If set to true, the dropdown will be in Right to Left mode\",\n          \"type\": {\n            \"name\": \"bool\"\n          },\n          \"required\": false\n        },\n        \"defaultValue\": {\n          \"description\": \"Set default selected value\",\n          \"type\": {\n            \"name\": \"union\",\n            \"value\": [\n              {\n                \"name\": \"arrayOf\",\n                \"value\": {\n                  \"name\": \"shape\",\n                  \"value\": {\n                    \"label\": {\n                      \"name\": \"string\",\n                      \"required\": true\n                    },\n                    \"value\": {\n                      \"name\": \"string\",\n                      \"required\": true\n                    }\n                  }\n                }\n              },\n              {\n                \"name\": \"shape\",\n                \"value\": {\n                  \"label\": {\n                    \"name\": \"string\",\n                    \"required\": true\n                  },\n                  \"value\": {\n                    \"name\": \"string\",\n                    \"required\": true\n                  }\n                }\n              }\n            ]\n          },\n          \"required\": false\n        },\n        \"value\": {\n          \"description\": \"The component's value.\\nWhen passed, makes this a [controlled](https://reactjs.org/docs/forms.html#controlled-components) component.\",\n          \"type\": {\n            \"name\": \"union\",\n            \"value\": [\n              {\n                \"name\": \"arrayOf\",\n                \"value\": {\n                  \"name\": \"shape\",\n                  \"value\": {\n                    \"label\": {\n                      \"name\": \"string\",\n                      \"required\": true\n                    },\n                    \"value\": {\n                      \"name\": \"string\",\n                      \"required\": true\n                    }\n                  }\n                }\n              },\n              {\n                \"name\": \"shape\",\n                \"value\": {\n                  \"label\": {\n                    \"name\": \"string\",\n                    \"required\": true\n                  },\n                  \"value\": {\n                    \"name\": \"string\",\n                    \"required\": true\n                  }\n                }\n              }\n            ]\n          },\n          \"required\": false\n        },\n        \"asyncOptions\": {\n          \"description\": \"If provided Dropdown will work in async mode. Can be either promise or callback\",\n          \"type\": {\n            \"name\": \"union\",\n            \"value\": [\n              {\n                \"name\": \"func\"\n              },\n              {\n                \"name\": \"shape\",\n                \"value\": {\n                  \"then\": {\n                    \"name\": \"func\",\n                    \"required\": true\n                  },\n                  \"catch\": {\n                    \"name\": \"func\",\n                    \"required\": true\n                  }\n                }\n              }\n            ]\n          },\n          \"required\": false\n        },\n        \"cacheOptions\": {\n          \"description\": \"If set to true, fetched async options will be cached\",\n          \"type\": {\n            \"name\": \"bool\"\n          },\n          \"required\": false\n        },\n        \"defaultOptions\": {\n          \"description\": \"If set, `asyncOptions` will be invoked with its value on mount and the resolved results will be loaded\",\n          \"type\": {\n            \"name\": \"union\",\n            \"value\": [\n              {\n                \"name\": \"bool\"\n              },\n              {\n                \"name\": \"arrayOf\",\n                \"value\": {\n                  \"name\": \"object\"\n                }\n              }\n            ]\n          },\n          \"required\": false\n        },\n        \"isVirtualized\": {\n          \"description\": \"If set to true, the menu will use virtualization. Virtualized async works only with\",\n          \"type\": {\n            \"name\": \"bool\"\n          },\n          \"required\": false\n        },\n        \"menuPortalTarget\": {\n          \"description\": \"Whether the menu should use a portal, and where it should attach\",\n          \"type\": {\n            \"name\": \"union\",\n            \"value\": [\n              {\n                \"name\": \"element\"\n              },\n              {\n                \"name\": \"object\"\n              }\n            ]\n          },\n          \"required\": false\n        },\n        \"maxMenuHeight\": {\n          \"description\": \"Maximum height of the menu before scrolling\",\n          \"type\": {\n            \"name\": \"number\"\n          },\n          \"required\": false\n        },\n        \"isOptionSelected\": {\n          \"description\": \"Override the built-in logic to detect whether an option is selected.\",\n          \"type\": {\n            \"name\": \"func\"\n          },\n          \"required\": false\n        }\n      }\n    }\n  ],\n  \"src/components/DialogContentContainer/DialogContentContainer.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"DialogContentContainer\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"getTestId(ComponentDefaultTestId.DIALOG_CONTENT_CONTAINER, id)\",\n            \"computed\": true\n          }\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactReactNode\",\n            \"raw\": \"React.ReactNode\"\n          },\n          \"description\": \"\"\n        },\n        \"ariaLabelledby\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"ariaDescribedby\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"type\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"DialogType\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"DialogType.POPOVER\",\n            \"computed\": true\n          }\n        },\n        \"size\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"DialogSize\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"DialogSize.MEDIUM\",\n            \"computed\": true\n          }\n        },\n        \"style\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactCSSProperties\",\n            \"raw\": \"React.CSSProperties\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Clickable/Clickable.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Clickable\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"elementType\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"keyof JSX.IntrinsicElements | string\",\n            \"elements\": [\n              {\n                \"name\": \"JSX.IntrinsicElements\"\n              },\n              {\n                \"name\": \"string\"\n              }\n            ]\n          },\n          \"description\": \"The type of the clickable element wrapper (for example div or span)\",\n          \"defaultValue\": {\n            \"value\": \"\\\"div\\\"\",\n            \"computed\": false\n          }\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactReactNode\",\n            \"raw\": \"React.ReactNode\"\n          },\n          \"description\": \"\"\n        },\n        \"role\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AriaRole\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"button\\\"\",\n            \"computed\": false\n          }\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent | React.KeyboardEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"union\",\n                    \"raw\": \"React.MouseEvent | React.KeyboardEvent\",\n                    \"elements\": [\n                      {\n                        \"name\": \"ReactMouseEvent\",\n                        \"raw\": \"React.MouseEvent\"\n                      },\n                      {\n                        \"name\": \"ReactKeyboardEvent\",\n                        \"raw\": \"React.KeyboardEvent\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function noop() {\\n  // No operation performed.\\n}\",\n            \"computed\": false\n          }\n        },\n        \"enableTextSelection\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"onMouseDown\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function noop() {\\n  // No operation performed.\\n}\",\n            \"computed\": false\n          }\n        },\n        \"onMouseEnter\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function noop() {\\n  // No operation performed.\\n}\",\n            \"computed\": false\n          }\n        },\n        \"onMouseLeave\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function noop() {\\n  // No operation performed.\\n}\",\n            \"computed\": false\n          }\n        },\n        \"ariaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"ariaHidden\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Is the element and its content should be hidden from screen readers and other assistive technologies\"\n        },\n        \"ariaHasPopup\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"boolean | string\",\n            \"elements\": [\n              {\n                \"name\": \"boolean\"\n              },\n              {\n                \"name\": \"string\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"ariaExpanded\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"tabIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | number\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"number\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"0\\\"\",\n            \"computed\": false\n          }\n        },\n        \"disabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"style\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactCSSProperties\",\n            \"raw\": \"React.CSSProperties\"\n          },\n          \"description\": \"\"\n        },\n        \"dataTestId\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"@deprecated - use \\\"data-testid\\\" instead\"\n        }\n      }\n    }\n  ],\n  \"src/components/Divider/Divider.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Divider\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"undefined\",\n            \"computed\": true\n          }\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"direction\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"DirectionType\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"DirectionType.HORIZONTAL\",\n            \"computed\": true\n          }\n        },\n        \"classname\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"@deprecated - use className instead\"\n        },\n        \"withoutMargin\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/EditableInput/EditableInput.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"EditableInput\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"value\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"placeholder\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"inputType\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"InputType\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"InputType.INPUT\",\n            \"computed\": true\n          }\n        },\n        \"autoSize\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"autoComplete\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"true\",\n            \"computed\": false\n          }\n        },\n        \"disabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"maxLength\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"shouldFocusOnMount\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"true\",\n            \"computed\": false\n          }\n        },\n        \"textareaSubmitOnEnter\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"ariaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"customColor\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"tabIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"isValidValue\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(value: string) => boolean\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"string\"\n                  },\n                  \"name\": \"value\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"boolean\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onFinishEditing\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(value: string, event: React.KeyboardEvent | React.FocusEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"string\"\n                  },\n                  \"name\": \"value\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"union\",\n                    \"raw\": \"React.KeyboardEvent | React.FocusEvent\",\n                    \"elements\": [\n                      {\n                        \"name\": \"ReactKeyboardEvent\",\n                        \"raw\": \"React.KeyboardEvent\"\n                      },\n                      {\n                        \"name\": \"ReactFocusEvent\",\n                        \"raw\": \"React.FocusEvent\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onArrowKeyDown\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(value: string, event: React.KeyboardEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"string\"\n                  },\n                  \"name\": \"value\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"ReactKeyboardEvent\",\n                    \"raw\": \"React.KeyboardEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent<HTMLInputElement | HTMLTextAreaElement>) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent<HTMLInputElement | HTMLTextAreaElement>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"union\",\n                        \"raw\": \"HTMLInputElement | HTMLTextAreaElement\",\n                        \"elements\": [\n                          {\n                            \"name\": \"HTMLInputElement\"\n                          },\n                          {\n                            \"name\": \"HTMLTextAreaElement\"\n                          }\n                        ]\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onKeyPress\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"selectOnMount\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"ignoreBlurClass\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"onIgnoreBlurEvent\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(value: string) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"string\"\n                  },\n                  \"name\": \"value\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onFocus\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.FocusEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactFocusEvent\",\n                    \"raw\": \"React.FocusEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onBlur\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.FocusEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactFocusEvent\",\n                    \"raw\": \"React.FocusEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onCancelEditing\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.KeyboardEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactKeyboardEvent\",\n                    \"raw\": \"React.KeyboardEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onChange\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(value: string) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"string\"\n                  },\n                  \"name\": \"value\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onError\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onSuccess\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onKeyDown\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.KeyboardEvent, value: string) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactKeyboardEvent\",\n                    \"raw\": \"React.KeyboardEvent\"\n                  },\n                  \"name\": \"event\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"string\"\n                  },\n                  \"name\": \"value\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onTabHandler\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(value: string, event: React.KeyboardEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"string\"\n                  },\n                  \"name\": \"value\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"ReactKeyboardEvent\",\n                    \"raw\": \"React.KeyboardEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/EditableText/EditableText.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"EditableText\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"value\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Value of the text\"\n        },\n        \"onChange\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(value: string) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"string\"\n                  },\n                  \"name\": \"value\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"Will be called whenever the current value changes to a non-empty value\"\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.KeyboardEvent | React.MouseEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"union\",\n                    \"raw\": \"React.KeyboardEvent | React.MouseEvent\",\n                    \"elements\": [\n                      {\n                        \"name\": \"ReactKeyboardEvent\",\n                        \"raw\": \"React.KeyboardEvent\"\n                      },\n                      {\n                        \"name\": \"ReactMouseEvent\",\n                        \"raw\": \"React.MouseEvent\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"Will be called whenever the component gets clicked\"\n        },\n        \"readOnly\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Disables editing mode - component will be just a typography element\"\n        },\n        \"placeholder\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Shown in edit mode when the text value is empty\"\n        },\n        \"ariaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"ARIA Label\"\n        },\n        \"isEditMode\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Controls the mode of the component (i.e. view/edit mode)\"\n        },\n        \"onEditModeChange\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(isEditMode: boolean) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"boolean\"\n                  },\n                  \"name\": \"isEditMode\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"Will be called when the mode of the component changes\"\n        },\n        \"tooltipProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Partial\",\n            \"elements\": [\n              {\n                \"name\": \"intersection\",\n                \"raw\": \"TooltipBaseProps & (TooltipWithChildrenProps | TooltipWithoutChildrenProps)\",\n                \"elements\": [\n                  {\n                    \"name\": \"TooltipBaseProps\"\n                  },\n                  {\n                    \"name\": \"unknown\"\n                  }\n                ]\n              }\n            ],\n            \"raw\": \"Partial<TooltipProps>\"\n          },\n          \"description\": \"Override Tooltip props when needed\"\n        },\n        \"type\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"TextType\"\n          },\n          \"description\": \"Sets the Text type\\n@type {TextType}\",\n          \"defaultValue\": {\n            \"value\": \"Text.types.TEXT2\",\n            \"computed\": true\n          }\n        },\n        \"weight\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"TextWeight\"\n          },\n          \"description\": \"Sets the Text weight\\n@type {TextWeight}\",\n          \"defaultValue\": {\n            \"value\": \"Text.weights.NORMAL\",\n            \"computed\": true\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/EditableTypography/EditableTypography.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"EditableTypography\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"value\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Value of the text\"\n        },\n        \"onChange\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(value: string) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"string\"\n                  },\n                  \"name\": \"value\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"Will be called whenever the current value changes to a non-empty value\"\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.KeyboardEvent | React.MouseEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"union\",\n                    \"raw\": \"React.KeyboardEvent | React.MouseEvent\",\n                    \"elements\": [\n                      {\n                        \"name\": \"ReactKeyboardEvent\",\n                        \"raw\": \"React.KeyboardEvent\"\n                      },\n                      {\n                        \"name\": \"ReactMouseEvent\",\n                        \"raw\": \"React.MouseEvent\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"Will be called whenever the component gets clicked\"\n        },\n        \"readOnly\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Disables editing mode - component will be just a typography element\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"placeholder\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Shown in edit mode when the text value is empty\"\n        },\n        \"ariaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"ARIA Label\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"isEditMode\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Controls the mode of the component (i.e. view/edit mode)\"\n        },\n        \"onEditModeChange\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(isEditMode: boolean) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"boolean\"\n                  },\n                  \"name\": \"isEditMode\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"Will be called when the mode of the component changes\"\n        },\n        \"tooltipProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Partial\",\n            \"elements\": [\n              {\n                \"name\": \"intersection\",\n                \"raw\": \"TooltipBaseProps & (TooltipWithChildrenProps | TooltipWithoutChildrenProps)\",\n                \"elements\": [\n                  {\n                    \"name\": \"TooltipBaseProps\"\n                  },\n                  {\n                    \"name\": \"unknown\"\n                  }\n                ]\n              }\n            ],\n            \"raw\": \"Partial<TooltipProps>\"\n          },\n          \"description\": \"Override Tooltip props when needed\"\n        },\n        \"component\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"ElementType\"\n          },\n          \"description\": \"A typography component that is being rendered in view mode\"\n        },\n        \"typographyClassName\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Controls the style of the typography component in view mode\"\n        },\n        \"clearable\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Shows placeholder when empty, if provided\"\n        }\n      }\n    }\n  ],\n  \"src/components/EditableHeading/EditableHeading.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"EditableHeading\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"value\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Value of the text\"\n        },\n        \"onChange\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(value: string) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"string\"\n                  },\n                  \"name\": \"value\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"Will be called whenever the current value changes to a non-empty value\"\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.KeyboardEvent | React.MouseEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"union\",\n                    \"raw\": \"React.KeyboardEvent | React.MouseEvent\",\n                    \"elements\": [\n                      {\n                        \"name\": \"ReactKeyboardEvent\",\n                        \"raw\": \"React.KeyboardEvent\"\n                      },\n                      {\n                        \"name\": \"ReactMouseEvent\",\n                        \"raw\": \"React.MouseEvent\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"Will be called whenever the component gets clicked\"\n        },\n        \"readOnly\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Disables editing mode - component will be just a typography element\"\n        },\n        \"placeholder\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Shown in edit mode when the text value is empty\"\n        },\n        \"ariaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"ARIA Label\"\n        },\n        \"isEditMode\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Controls the mode of the component (i.e. view/edit mode)\"\n        },\n        \"onEditModeChange\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(isEditMode: boolean) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"boolean\"\n                  },\n                  \"name\": \"isEditMode\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"Will be called when the mode of the component changes\"\n        },\n        \"tooltipProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Partial\",\n            \"elements\": [\n              {\n                \"name\": \"intersection\",\n                \"raw\": \"TooltipBaseProps & (TooltipWithChildrenProps | TooltipWithoutChildrenProps)\",\n                \"elements\": [\n                  {\n                    \"name\": \"TooltipBaseProps\"\n                  },\n                  {\n                    \"name\": \"unknown\"\n                  }\n                ]\n              }\n            ],\n            \"raw\": \"Partial<TooltipProps>\"\n          },\n          \"description\": \"Override Tooltip props when needed\"\n        },\n        \"type\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"HeadingType\"\n          },\n          \"description\": \"Sets the Heading type\\n@type {HeadingType}\",\n          \"defaultValue\": {\n            \"value\": \"Heading.types.H1\",\n            \"computed\": true\n          }\n        },\n        \"weight\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"HeadingWeight\"\n          },\n          \"description\": \"Sets the Heading weight\\n@type {HeadingWeight}\",\n          \"defaultValue\": {\n            \"value\": \"Heading.weights.NORMAL\",\n            \"computed\": true\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/FieldLabel/FieldLabel.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"FieldLabel\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"icon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FunctionComponent | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFunctionComponent\",\n                \"raw\": \"React.FunctionComponent\"\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"iconLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"labelText\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"labelFor\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"iconClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"labelClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"requiredAsterisk\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/FormattedNumber/FormattedNumber.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"FormattedNumber\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"value\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"number | string\",\n            \"elements\": [\n              {\n                \"name\": \"number\"\n              },\n              {\n                \"name\": \"string\"\n              }\n            ]\n          },\n          \"description\": \"A numeric value to format.\"\n        },\n        \"prefix\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"If included, will be added as a prefix to the number.\"\n        },\n        \"suffix\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"If included, will be added as a suffix to the number.\"\n        },\n        \"emptyPlaceHolder\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"The text that will be shown if no value is provided.\",\n          \"defaultValue\": {\n            \"value\": \"\\\"N/A\\\"\",\n            \"computed\": false\n          }\n        },\n        \"decimalPrecision\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"Determines the number of decimal numbers (0 ~ 20).\",\n          \"defaultValue\": {\n            \"value\": \"2\",\n            \"computed\": false\n          }\n        },\n        \"compact\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Format number into compact number and initial (if required).\",\n          \"defaultValue\": {\n            \"value\": \"true\",\n            \"computed\": false\n          }\n        },\n        \"local\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Determines the number's local (Unicode BCP 47 locale identifier).\",\n          \"defaultValue\": {\n            \"value\": \"FormattedNumber.localFallBack\",\n            \"computed\": true\n          }\n        },\n        \"rtl\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Determines suffix and prefix location\"\n        }\n      }\n    }\n  ],\n  \"src/components/Icon/Icon.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Icon\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"(_event: React.MouseEvent) => {}\",\n            \"computed\": false\n          }\n        },\n        \"icon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"We support three types of icons - SVG, FONT and SRC (classname) so this prop is either the name of the icon or the component\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"clickable\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Is icon is a button\",\n          \"defaultValue\": {\n            \"value\": \"true\",\n            \"computed\": false\n          }\n        },\n        \"iconLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"mo   * Icon aria label [aria label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)\"\n        },\n        \"iconType\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"IconType\"\n          },\n          \"description\": \"The type of the component - svg, font or custom svg (using [`react-inlinesvg`](https://github.com/gilbarbara/react-inlinesvg#readme))\",\n          \"defaultValue\": {\n            \"value\": \"IconType.SVG\",\n            \"computed\": true\n          }\n        },\n        \"iconSize\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"number | string\",\n            \"elements\": [\n              {\n                \"name\": \"number\"\n              },\n              {\n                \"name\": \"string\"\n              }\n            ]\n          },\n          \"description\": \"Size for font icon\",\n          \"defaultValue\": {\n            \"value\": \"16\",\n            \"computed\": false\n          }\n        },\n        \"ignoreFocusStyle\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Remove focus style\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"tabindex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"number | string\",\n            \"elements\": [\n              {\n                \"name\": \"number\"\n              },\n              {\n                \"name\": \"string\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"ariaHidden\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Hide icon asset from screen reader. No need to set value for this prop when `clickable` is false\"\n        },\n        \"style\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactCSSProperties\",\n            \"raw\": \"React.CSSProperties\"\n          },\n          \"description\": \"\"\n        },\n        \"useCurrentColor\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"When using svg from src (Icon.type.SRC) this boolean will transform the \\\"fill\\\" property to \\\"currentColor\\\"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"customColor\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Override the default color with a custom one\"\n        }\n      }\n    }\n  ],\n  \"src/components/ExpandCollapse/ExpandCollapse.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"ExpandCollapse\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"headerComponentRenderer\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => ReactElement\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"ReactElement\"\n              }\n            }\n          },\n          \"description\": \"Component as parameter to be rendered as header\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"headerClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Class name to add to the header of the expandable\"\n        },\n        \"contentClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Class name to add to the content of the expandable\"\n        },\n        \"componentClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Class name to add to the component\"\n        },\n        \"title\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ReactNode | ReactNode[]\",\n            \"elements\": [\n              {\n                \"name\": \"ReactNode\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactNode\"\n                  }\n                ],\n                \"raw\": \"ReactNode[]\"\n              }\n            ]\n          },\n          \"description\": \"Header title\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ReactNode | ReactNode[]\",\n            \"elements\": [\n              {\n                \"name\": \"ReactNode\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactNode\"\n                  }\n                ],\n                \"raw\": \"ReactNode[]\"\n              }\n            ]\n          },\n          \"description\": \"The value of the expandable section\"\n        },\n        \"iconSize\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"number | string\",\n            \"elements\": [\n              {\n                \"name\": \"number\"\n              },\n              {\n                \"name\": \"string\"\n              }\n            ]\n          },\n          \"description\": \"The expand icon font size\",\n          \"defaultValue\": {\n            \"value\": \"24\",\n            \"computed\": false\n          }\n        },\n        \"defaultOpenState\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Should be open or closed by default (when rendered)\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"open\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"hideBorder\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/Flex/Flex.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Flex\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"style\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"object\"\n          },\n          \"description\": \"\"\n        },\n        \"direction\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"FlexDirection\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"Flex.directions.ROW\",\n            \"computed\": true\n          }\n        },\n        \"elementType\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactElementType\",\n            \"raw\": \"React.ElementType\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"div\\\"\",\n            \"computed\": false\n          }\n        },\n        \"wrap\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ElementContent | ElementContent[]\",\n            \"elements\": [\n              {\n                \"name\": \"union\",\n                \"raw\": \"ReactNode | ReactNode[]\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactNode\"\n                  },\n                  {\n                    \"name\": \"Array\",\n                    \"elements\": [\n                      {\n                        \"name\": \"ReactNode\"\n                      }\n                    ],\n                    \"raw\": \"ReactNode[]\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"union\",\n                    \"raw\": \"ReactNode | ReactNode[]\",\n                    \"elements\": [\n                      {\n                        \"name\": \"ReactNode\"\n                      },\n                      {\n                        \"name\": \"Array\",\n                        \"elements\": [\n                          {\n                            \"name\": \"ReactNode\"\n                          }\n                        ],\n                        \"raw\": \"ReactNode[]\"\n                      }\n                    ]\n                  }\n                ],\n                \"raw\": \"ElementContent[]\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"justify\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"FlexJustify\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"Flex.justify.START\",\n            \"computed\": true\n          }\n        },\n        \"align\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"FlexAlign\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"Flex.align.CENTER\",\n            \"computed\": true\n          }\n        },\n        \"gap\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"FlexGap | number\",\n            \"elements\": [\n              {\n                \"name\": \"FlexGap\"\n              },\n              {\n                \"name\": \"number\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"Flex.gaps.NONE\",\n            \"computed\": true\n          }\n        },\n        \"ariaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"tabIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"onClick function - MouseEvent\"\n        },\n        \"ariaLabelledby\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"element id to describe the counter accordingly\"\n        }\n      }\n    }\n  ],\n  \"src/components/HiddenText/HiddenText.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"HiddenText\",\n      \"props\": {\n        \"className\": {\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          },\n          \"required\": false\n        },\n        \"id\": {\n          \"defaultValue\": {\n            \"value\": \"\\\"hiddenText\\\"\",\n            \"computed\": false\n          },\n          \"required\": false\n        }\n      }\n    }\n  ],\n  \"src/components/IconButton/IconButton.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"IconButton\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"id to be added to the element\"\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"callback function when clicking the icon button\",\n          \"defaultValue\": {\n            \"value\": \"function noop() {\\n  // No operation performed.\\n}\",\n            \"computed\": false\n          }\n        },\n        \"wrapperClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"the class name of the button wrapper\"\n        },\n        \"iconClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"the class name of the button icon\"\n        },\n        \"icon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"Icon to be rendered\",\n          \"defaultValue\": {\n            \"value\": \"({size, ...props}) => (\\n  <svg viewBox=\\\"0 0 20 20\\\" fill=\\\"currentColor\\\" width={ size || \\\"20\\\" } height={ size || \\\"20\\\" } {...props}>\\n    <path d=\\\"M10.75 6C10.75 5.58579 10.4142 5.25 10 5.25C9.58579 5.25 9.25 5.58579 9.25 6V9.25H6C5.58579 9.25 5.25 9.58579 5.25 10C5.25 10.4142 5.58579 10.75 6 10.75H9.25V14C9.25 14.4142 9.58579 14.75 10 14.75C10.4142 14.75 10.75 14.4142 10.75 14V10.75H14C14.4142 10.75 14.75 10.4142 14.75 10C14.75 9.58579 14.4142 9.25 14 9.25H10.75V6Z\\\"\\n      fill=\\\"currentColor\\\" fillRule=\\\"evenodd\\\" clipRule=\\\"evenodd\\\" />\\n  </svg>\\n)\",\n            \"computed\": false\n          }\n        },\n        \"ariaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"a11y property to be added, used for screen reader to know what kind of button it is\"\n        },\n        \"ariaExpanded\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"a11y property to be added, used for screen reader to know if the button is expanded\"\n        },\n        \"aria-hidden\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AriaAttributes[\\\"aria-hidden\\\"]\",\n            \"raw\": \"AriaAttributes[\\\"aria-hidden\\\"]\"\n          },\n          \"description\": \"a11y property to be added, used for screen reader to know if the button is hidden\"\n        },\n        \"size\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"unknown[union]\",\n            \"raw\": \"(typeof SIZES)[keyof typeof SIZES]\"\n          },\n          \"description\": \"Size of the icon\",\n          \"defaultValue\": {\n            \"value\": \"IconButton.sizes.MEDIUM\",\n            \"computed\": true\n          }\n        },\n        \"hideTooltip\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Whether the tooltip should be displayed or not\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"tooltipProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Partial\",\n            \"elements\": [\n              {\n                \"name\": \"intersection\",\n                \"raw\": \"TooltipBaseProps & (TooltipWithChildrenProps | TooltipWithoutChildrenProps)\",\n                \"elements\": [\n                  {\n                    \"name\": \"TooltipBaseProps\"\n                  },\n                  {\n                    \"name\": \"unknown\"\n                  }\n                ]\n              }\n            ],\n            \"raw\": \"Partial<TooltipProps>\"\n          },\n          \"description\": \"Props for Tooltip component\",\n          \"defaultValue\": {\n            \"value\": \"{}\",\n            \"computed\": false\n          }\n        },\n        \"tooltipContent\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Tooltip wraps the button icon, it will display in the tooltip, if not present the aria label will be shown\"\n        },\n        \"kind\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ButtonType\"\n          },\n          \"description\": \"Kind of button - like <Button />\",\n          \"defaultValue\": {\n            \"value\": \"IconButton.kinds.TERTIARY\",\n            \"computed\": true\n          }\n        },\n        \"active\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"color\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ButtonColor\"\n          },\n          \"description\": \"The button's color\"\n        },\n        \"disabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"disabled state\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"disabledReason\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"if disabled - this will be shown in the tooltip\"\n        },\n        \"dataTestId\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"@deprecated - use \\\"data-testid\\\" instead\"\n        },\n        \"insetFocus\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Change the focus indicator from around the button to within it\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"tabIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"Specifies the tab order of an element\"\n        }\n      }\n    }\n  ],\n  \"src/components/Label/Label.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Label\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"wrapperClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"@deprecated - use className instead\"\n        },\n        \"labelClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Class name for an inner text wrapper\"\n        },\n        \"kind\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"LabelKind\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"LabelKind.FILL\",\n            \"computed\": true\n          }\n        },\n        \"color\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"LabelColor\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"LabelColor.PRIMARY\",\n            \"computed\": true\n          }\n        },\n        \"text\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"isAnimationDisabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"isLegIncluded\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent<HTMLSpanElement, MouseEvent>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"HTMLSpanElement\"\n                      },\n                      {\n                        \"name\": \"MouseEvent\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/LegacyEditableHeading/LegacyEditableHeading.tsx\": [\n    {\n      \"description\": \"@deprecated - use EditableHeading from 'monday-ui-react-core/next'\",\n      \"methods\": [],\n      \"displayName\": \"LegacyEditableHeading\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"value\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"placeholder\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"inputType\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"InputType\"\n          },\n          \"description\": \"\"\n        },\n        \"autoSize\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"autoComplete\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"disabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"maxLength\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"shouldFocusOnMount\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"textareaSubmitOnEnter\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"ariaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"customColor\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"tabIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"isValidValue\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(value: string) => boolean\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"string\"\n                  },\n                  \"name\": \"value\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"boolean\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onFinishEditing\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(value: string, event: React.KeyboardEvent | React.FocusEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"string\"\n                  },\n                  \"name\": \"value\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"union\",\n                    \"raw\": \"React.KeyboardEvent | React.FocusEvent\",\n                    \"elements\": [\n                      {\n                        \"name\": \"ReactKeyboardEvent\",\n                        \"raw\": \"React.KeyboardEvent\"\n                      },\n                      {\n                        \"name\": \"ReactFocusEvent\",\n                        \"raw\": \"React.FocusEvent\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onArrowKeyDown\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(value: string, event: React.KeyboardEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"string\"\n                  },\n                  \"name\": \"value\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"ReactKeyboardEvent\",\n                    \"raw\": \"React.KeyboardEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent<HTMLInputElement | HTMLTextAreaElement>) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent<HTMLInputElement | HTMLTextAreaElement>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"union\",\n                        \"raw\": \"HTMLInputElement | HTMLTextAreaElement\",\n                        \"elements\": [\n                          {\n                            \"name\": \"HTMLInputElement\"\n                          },\n                          {\n                            \"name\": \"HTMLTextAreaElement\"\n                          }\n                        ]\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onKeyPress\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"selectOnMount\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"ignoreBlurClass\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"onIgnoreBlurEvent\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(value: string) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"string\"\n                  },\n                  \"name\": \"value\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onFocus\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.FocusEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactFocusEvent\",\n                    \"raw\": \"React.FocusEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onBlur\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.FocusEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactFocusEvent\",\n                    \"raw\": \"React.FocusEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onCancelEditing\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.KeyboardEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactKeyboardEvent\",\n                    \"raw\": \"React.KeyboardEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onChange\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(value: string) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"string\"\n                  },\n                  \"name\": \"value\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onError\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onSuccess\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onKeyDown\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.KeyboardEvent, value: string) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactKeyboardEvent\",\n                    \"raw\": \"React.KeyboardEvent\"\n                  },\n                  \"name\": \"event\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"string\"\n                  },\n                  \"name\": \"value\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onTabHandler\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(value: string, event: React.KeyboardEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"string\"\n                  },\n                  \"name\": \"value\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"ReactKeyboardEvent\",\n                    \"raw\": \"React.KeyboardEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"type\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"HeadingTypes\"\n          },\n          \"description\": \"\"\n        },\n        \"ellipsis\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"ellipsisMaxLines\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"suggestEditOnHover\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"nonEllipsisTooltip\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Tooltip to show when no overflow\"\n        },\n        \"size\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Sizes\"\n          },\n          \"description\": \"\"\n        },\n        \"highlightTerm\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"style\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactCSSProperties\",\n            \"raw\": \"React.CSSProperties\"\n          },\n          \"description\": \"\"\n        },\n        \"tooltipPosition\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"DialogPosition\"\n          },\n          \"description\": \"\"\n        },\n        \"displayPlaceholderInTextMode\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"inputAriaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"errorClass\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"headingClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"inputClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"dataTestId\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"@deprecated - use \\\"data-testid\\\" instead\"\n        },\n        \"editing\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"errorClassTimeout\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"onStartEditing\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.KeyboardEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactKeyboardEvent\",\n                    \"raw\": \"React.KeyboardEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"tooltip\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"insetFocus\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"contentRenderer\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactFC\",\n            \"raw\": \"React.FC\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Label/Leg.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Leg\"\n    }\n  ],\n  \"src/components/Link/Link.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Link\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"componentClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"@deprecated - use className instead\"\n        },\n        \"textClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Class name for overriding link text styles\"\n        },\n        \"href\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Specifies the location (URL) of the external resource\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"text\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"The link text\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"rel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Defines the relationship between a linked resource and the current document\",\n          \"defaultValue\": {\n            \"value\": \"\\\"noreferrer\\\"\",\n            \"computed\": false\n          }\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"onClick function - MouseEvent\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"target\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"LinkTarget\"\n          },\n          \"description\": \"Specifies where to open the linked document\",\n          \"defaultValue\": {\n            \"value\": \"Link.targets.NEW_WINDOW\",\n            \"computed\": true\n          }\n        },\n        \"ariaLabelDescription\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Aria label description\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"ariaDescribedby\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Identifies the element (or elements) that describes the element on which the attribute is set.\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"ariaLabeledBy\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"element id to describe the counter accordingly\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"icon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"Icon to add to the link element\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"iconPosition\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"IconPosition\"\n          },\n          \"description\": \"the position of the icon in relation to the etext\",\n          \"defaultValue\": {\n            \"value\": \"Link.position.START\",\n            \"computed\": true\n          }\n        },\n        \"disableNavigation\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"disable navigation\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"inheritFontSize\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"inherit text size\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"inlineText\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"if the link is in part of other text content\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/List/List.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"List\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"component\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ListWrapperComponentType | ListWrapperComponentStringType\",\n            \"elements\": [\n              {\n                \"name\": \"ListWrapperComponentType\"\n              },\n              {\n                \"name\": \"union\",\n                \"raw\": \"\\\"div\\\" | \\\"nav\\\" | \\\"ul\\\" | \\\"ol\\\"\",\n                \"elements\": [\n                  {\n                    \"name\": \"literal\",\n                    \"value\": \"\\\"div\\\"\"\n                  },\n                  {\n                    \"name\": \"literal\",\n                    \"value\": \"\\\"nav\\\"\"\n                  },\n                  {\n                    \"name\": \"literal\",\n                    \"value\": \"\\\"ul\\\"\"\n                  },\n                  {\n                    \"name\": \"literal\",\n                    \"value\": \"\\\"ol\\\"\"\n                  }\n                ]\n              }\n            ]\n          },\n          \"description\": \"the wrapping component to wrap the List Items [div, nav, ul, ol]\",\n          \"defaultValue\": {\n            \"value\": \"List.components.UL\",\n            \"computed\": true\n          }\n        },\n        \"ariaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"ARIA label string to describe to list\"\n        },\n        \"ariaDescribedBy\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"ARIA described by string to reference an id to describe by\"\n        },\n        \"aria-controls\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AriaAttributes[\\\"aria-controls\\\"]\",\n            \"raw\": \"AriaAttributes[\\\"aria-controls\\\"]\"\n          },\n          \"description\": \"\"\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ReactElement<ListItemProps | ListTitleProps> | ReactElement<ListItemProps | ListTitleProps>[]\",\n            \"elements\": [\n              {\n                \"name\": \"ReactElement\",\n                \"elements\": [\n                  {\n                    \"name\": \"union\",\n                    \"raw\": \"ListItemProps | ListTitleProps\",\n                    \"elements\": [\n                      {\n                        \"name\": \"ListItemProps\"\n                      },\n                      {\n                        \"name\": \"ListTitleProps\"\n                      }\n                    ]\n                  }\n                ],\n                \"raw\": \"ReactElement<ListItemProps | ListTitleProps>\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactElement\",\n                    \"elements\": [\n                      {\n                        \"name\": \"union\",\n                        \"raw\": \"ListItemProps | ListTitleProps\",\n                        \"elements\": [\n                          {\n                            \"name\": \"ListItemProps\"\n                          },\n                          {\n                            \"name\": \"ListTitleProps\"\n                          }\n                        ]\n                      }\n                    ],\n                    \"raw\": \"ReactElement<ListItemProps | ListTitleProps>\"\n                  }\n                ],\n                \"raw\": \"ReactElement<ListItemProps | ListTitleProps>[]\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"renderOnlyVisibleItems\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Using virtualized list for rendering only the items which visible to the user in any given user (performance optimization)\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"style\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"CSSProperties\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/ListItemAvatar/ListItemAvatar.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"ListItemAvatar\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"component\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ListItemComponentType\"\n          },\n          \"description\": \"the ListItem component [li, div, a]\",\n          \"defaultValue\": {\n            \"value\": \"ListItemAvatar.components.DIV\",\n            \"computed\": true\n          }\n        },\n        \"src\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"avatarClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/ListItem/ListItem.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"ListItem\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"A class name to be passed to the list item wrapper\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"An id to be passed to the list item wrapper\"\n        },\n        \"component\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ListItemComponentType\"\n          },\n          \"description\": \"the ListItem component [li, div, a]\",\n          \"defaultValue\": {\n            \"value\": \"ListItem.components.DIV\",\n            \"computed\": true\n          }\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ReactNode | ReactNode[]\",\n            \"elements\": [\n              {\n                \"name\": \"ReactNode\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactNode\"\n                  }\n                ],\n                \"raw\": \"ReactNode[]\"\n              }\n            ]\n          },\n          \"description\": \"The textual content of the list item\"\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent | React.KeyboardEvent, id: string) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"union\",\n                    \"raw\": \"React.MouseEvent | React.KeyboardEvent\",\n                    \"elements\": [\n                      {\n                        \"name\": \"ReactMouseEvent\",\n                        \"raw\": \"React.MouseEvent\"\n                      },\n                      {\n                        \"name\": \"ReactKeyboardEvent\",\n                        \"raw\": \"React.KeyboardEvent\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"string\"\n                  },\n                  \"name\": \"id\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"A callback function which is being called when the item is being clicked\\nIt will be called with the following params\\nevent (DomEvent)\\nid (the id which is being passed)\\nonClick(event, id)\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"onHover\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent | React.FocusEvent, id: string) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"union\",\n                    \"raw\": \"React.MouseEvent | React.FocusEvent\",\n                    \"elements\": [\n                      {\n                        \"name\": \"ReactMouseEvent\",\n                        \"raw\": \"React.MouseEvent\"\n                      },\n                      {\n                        \"name\": \"ReactFocusEvent\",\n                        \"raw\": \"React.FocusEvent\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"string\"\n                  },\n                  \"name\": \"id\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"A callback function which is being called when the item is being hovered\\nIt will be called with the following params\\nevent (DomEvent)\\nid (the id which is being passed)\\nonHover(event, id)\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"disabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"disabled state - callback will not be called and navigation will be skipped\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"selected\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Selected indication\"\n        },\n        \"size\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"unknown[union]\",\n            \"raw\": \"(typeof SIZES)[keyof typeof SIZES]\"\n          },\n          \"description\": \"The size of the list item\",\n          \"defaultValue\": {\n            \"value\": \"SIZES.SMALL\",\n            \"computed\": true\n          }\n        },\n        \"tabIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"Tabindex is used for keyboard navigation - if you want to skip \\\"Tab navigation\\\" please pass -1.\",\n          \"defaultValue\": {\n            \"value\": \"0\",\n            \"computed\": false\n          }\n        },\n        \"aria-current\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AriaAttributes[\\\"aria-current\\\"]\",\n            \"raw\": \"AriaAttributes[\\\"aria-current\\\"]\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/ListItemIcon/ListItemIcon.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"ListItemIcon\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"component\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ListItemComponentType\"\n          },\n          \"description\": \"the ListItem component [li, div, a]\",\n          \"defaultValue\": {\n            \"value\": \"ListItemIcon.components.DIV\",\n            \"computed\": true\n          }\n        },\n        \"icon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"margin\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ListItemIconMargin\"\n          },\n          \"description\": \"the position of the icon inside the list item (this sets the margins of the icon)\",\n          \"defaultValue\": {\n            \"value\": \"ListItemIcon.margin.START\",\n            \"computed\": true\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/ButtonGroup/ButtonGroup.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"ButtonGroup\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"componentClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"@deprecated - use className instead\"\n        },\n        \"options\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"Array\",\n            \"elements\": [\n              {\n                \"name\": \"signature\",\n                \"type\": \"object\",\n                \"raw\": \"{\\n  icon?: SubIcon;\\n  leftIcon?: SubIcon;\\n  ariaLabel?: string;\\n  subText?: string;\\n  value: ButtonValue;\\n  text: string;\\n  disabled?: boolean;\\n  tooltipContent?: string;\\n}\",\n                \"signature\": {\n                  \"properties\": [\n                    {\n                      \"key\": \"icon\",\n                      \"value\": {\n                        \"name\": \"union\",\n                        \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n                        \"elements\": [\n                          {\n                            \"name\": \"string\"\n                          },\n                          {\n                            \"name\": \"ReactFC\",\n                            \"raw\": \"React.FC<IconSubComponentProps>\",\n                            \"elements\": [\n                              {\n                                \"name\": \"IconSubComponentProps\"\n                              }\n                            ]\n                          },\n                          {\n                            \"name\": \"null\"\n                          }\n                        ],\n                        \"required\": false\n                      }\n                    },\n                    {\n                      \"key\": \"leftIcon\",\n                      \"value\": {\n                        \"name\": \"union\",\n                        \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n                        \"elements\": [\n                          {\n                            \"name\": \"string\"\n                          },\n                          {\n                            \"name\": \"ReactFC\",\n                            \"raw\": \"React.FC<IconSubComponentProps>\",\n                            \"elements\": [\n                              {\n                                \"name\": \"IconSubComponentProps\"\n                              }\n                            ]\n                          },\n                          {\n                            \"name\": \"null\"\n                          }\n                        ],\n                        \"required\": false\n                      }\n                    },\n                    {\n                      \"key\": \"ariaLabel\",\n                      \"value\": {\n                        \"name\": \"string\",\n                        \"required\": false\n                      }\n                    },\n                    {\n                      \"key\": \"subText\",\n                      \"value\": {\n                        \"name\": \"string\",\n                        \"required\": false\n                      }\n                    },\n                    {\n                      \"key\": \"value\",\n                      \"value\": {\n                        \"name\": \"union\",\n                        \"raw\": \"string | number\",\n                        \"elements\": [\n                          {\n                            \"name\": \"string\"\n                          },\n                          {\n                            \"name\": \"number\"\n                          }\n                        ],\n                        \"required\": true\n                      }\n                    },\n                    {\n                      \"key\": \"text\",\n                      \"value\": {\n                        \"name\": \"string\",\n                        \"required\": true\n                      }\n                    },\n                    {\n                      \"key\": \"disabled\",\n                      \"value\": {\n                        \"name\": \"boolean\",\n                        \"required\": false\n                      }\n                    },\n                    {\n                      \"key\": \"tooltipContent\",\n                      \"value\": {\n                        \"name\": \"string\",\n                        \"required\": false\n                      }\n                    }\n                  ]\n                }\n              }\n            ],\n            \"raw\": \"Array<ButtonGroupOption>\"\n          },\n          \"description\": \"\"\n        },\n        \"value\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | number\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"number\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"onSelect\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(value: ButtonValue, name: string) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"union\",\n                    \"raw\": \"string | number\",\n                    \"elements\": [\n                      {\n                        \"name\": \"string\"\n                      },\n                      {\n                        \"name\": \"number\"\n                      }\n                    ]\n                  },\n                  \"name\": \"value\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"string\"\n                  },\n                  \"name\": \"name\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"size\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"(typeof SIZES)[keyof typeof SIZES] | keyof typeof OLD_BUTTON_SIZES\",\n            \"elements\": [\n              {\n                \"name\": \"unknown[union]\",\n                \"raw\": \"(typeof SIZES)[keyof typeof SIZES]\"\n              },\n              {\n                \"name\": \"union\",\n                \"raw\": \"keyof typeof OLD_BUTTON_SIZES\",\n                \"elements\": [\n                  {\n                    \"name\": \"literal\",\n                    \"value\": \"sm\"\n                  },\n                  {\n                    \"name\": \"literal\",\n                    \"value\": \"md\"\n                  },\n                  {\n                    \"name\": \"literal\",\n                    \"value\": \"lg\"\n                  }\n                ]\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"small\\\"\",\n            \"computed\": false\n          }\n        },\n        \"kind\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ButtonType.SECONDARY | ButtonType.TERTIARY\",\n            \"elements\": [\n              {\n                \"name\": \"ButtonType.SECONDARY\"\n              },\n              {\n                \"name\": \"ButtonType.TERTIARY\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"ButtonType.SECONDARY\",\n            \"computed\": true\n          }\n        },\n        \"name\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"disabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"groupAriaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"tooltipPosition\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"DialogPosition\"\n          },\n          \"description\": \"Where the tooltip should be in reference to the children: Top, Left, Right, Bottom ...\"\n        },\n        \"tooltipHideDelay\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"tooltipShowDelay\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"tooltipContainerSelector\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"tooltipMoveBy\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"object\",\n            \"raw\": \"{\\n  main?: number;\\n  secondary?: number;\\n}\",\n            \"signature\": {\n              \"properties\": [\n                {\n                  \"key\": \"main\",\n                  \"value\": {\n                    \"name\": \"number\",\n                    \"required\": false\n                  }\n                },\n                {\n                  \"key\": \"secondary\",\n                  \"value\": {\n                    \"name\": \"number\",\n                    \"required\": false\n                  }\n                }\n              ]\n            }\n          },\n          \"description\": \"\"\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactReactNode\",\n            \"raw\": \"React.ReactNode\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Loader/Loader.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Loader\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"svgClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"@deprecated - use className instead\"\n        },\n        \"size\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"typeof LoaderSizes | number\",\n            \"elements\": [\n              {\n                \"name\": \"LoaderSizes\"\n              },\n              {\n                \"name\": \"number\"\n              }\n            ]\n          },\n          \"description\": \"The loader's size: `number` or `LoaderSizes`\"\n        },\n        \"color\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"LoaderColors\"\n          },\n          \"description\": \"\"\n        },\n        \"hasBackground\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"wrapperClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/ListTitle/ListTitle.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"ListTitle\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"tabIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/MenuButton/MenuButton.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"MenuButton\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"componentClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"@deprecated - use className instead\"\n        },\n        \"active\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Control the button's selected state\"\n        },\n        \"openDialogComponentClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Class name to add to the button when the dialog is open\"\n        },\n        \"component\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"(() => JSX.Element) | React.ElementType\",\n            \"elements\": [\n              {\n                \"name\": \"unknown\"\n              },\n              {\n                \"name\": \"ReactElementType\",\n                \"raw\": \"React.ElementType\"\n              }\n            ]\n          },\n          \"description\": \"Receives React Component\",\n          \"defaultValue\": {\n            \"value\": \"({size, ...props}) => (\\n  <svg viewBox=\\\"0 0 20 20\\\" fill=\\\"currentColor\\\" width={ size || \\\"20\\\" } height={ size || \\\"20\\\" } {...props}>\\n    <path d=\\\"M6 10.5C6 11.3284 5.32843 12 4.5 12 3.67157 12 3 11.3284 3 10.5 3 9.67157 3.67157 9 4.5 9 5.32843 9 6 9.67157 6 10.5zM11.8333 10.5C11.8333 11.3284 11.1618 12 10.3333 12 9.50492 12 8.83334 11.3284 8.83334 10.5 8.83334 9.67157 9.50492 9 10.3333 9 11.1618 9 11.8333 9.67157 11.8333 10.5zM17.6667 10.5C17.6667 11.3284 16.9951 12 16.1667 12 15.3383 12 14.6667 11.3284 14.6667 10.5 14.6667 9.67157 15.3383 9 16.1667 9 16.9951 9 17.6667 9.67157 17.6667 10.5z\\\"\\n      fill=\\\"currentColor\\\" />\\n  </svg>\\n)\",\n            \"computed\": false\n          }\n        },\n        \"size\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"MenuButtonSize\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"MenuButtonSize.SMALL\",\n            \"computed\": true\n          }\n        },\n        \"open\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"zIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"ariaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"Menu\\\"\",\n            \"computed\": false\n          }\n        },\n        \"closeDialogOnContentClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"@deprecated use closeMenuOnItemClick instead\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"dialogClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"dialogOffset\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"object\",\n            \"raw\": \"{\\n  main?: number;\\n  secondary?: number;\\n}\",\n            \"signature\": {\n              \"properties\": [\n                {\n                  \"key\": \"main\",\n                  \"value\": {\n                    \"name\": \"number\",\n                    \"required\": false\n                  }\n                },\n                {\n                  \"key\": \"secondary\",\n                  \"value\": {\n                    \"name\": \"number\",\n                    \"required\": false\n                  }\n                }\n              ]\n            }\n          },\n          \"description\": \"main - `dialogOffset.main` - main axis offset; `dialogOffset.secondary` secondary axis offset\",\n          \"defaultValue\": {\n            \"value\": \"{ main: 8, secondary: 0 }\",\n            \"computed\": false\n          }\n        },\n        \"dialogPaddingSize\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"DialogSize\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"DialogContentContainer.sizes.MEDIUM\",\n            \"computed\": true\n          }\n        },\n        \"dialogPosition\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"DialogPosition\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"Dialog.positions.BOTTOM_START\",\n            \"computed\": true\n          }\n        },\n        \"dialogShowTriggerIgnoreClass\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"dialogHideTriggerIgnoreClass\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"dialogContainerSelector\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"the container selector in which to append the dialog\\nfor examples: \\\"body\\\" , \\\".my-class\\\", \\\"#my-id\\\"\"\n        },\n        \"startingEdge\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Dialog Alignment\",\n          \"defaultValue\": {\n            \"value\": \"\\\"bottom\\\"\",\n            \"computed\": false\n          }\n        },\n        \"onMenuShow\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"onMenuHide\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"text\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Text to be displayed after the icon\"\n        },\n        \"disabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"tooltipContent\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"removeTabCloseTrigger\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Remove \\\"Tab\\\" key from the hide trigger\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"tooltipTriggers\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"HideShowEvent | HideShowEvent[]\",\n            \"elements\": [\n              {\n                \"name\": \"HideShowEvent\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"HideShowEvent\"\n                  }\n                ],\n                \"raw\": \"HideShowEvent[]\"\n              }\n            ]\n          },\n          \"description\": \"is an array with the content of types:\\n   CLICK, CLICK_OUTSIDE, ESCAPE_KEY, TAB_KEY, MOUSE_ENTER, MOUSE_LEAVE,\\n   ENTER, MOUSE_DOWN, FOCUS, BLUR, CONTENT_CLICK\",\n          \"defaultValue\": {\n            \"value\": \"[MenuButton.hideTriggers.MOUSE_LEAVE]\",\n            \"computed\": false\n          }\n        },\n        \"tooltipPosition\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"DialogPosition\"\n          },\n          \"description\": \"the disabled/tooltip position of the menu button - one of the MenuButton.dialogPositions\",\n          \"defaultValue\": {\n            \"value\": \"MenuButton.dialogPositions.RIGHT\",\n            \"computed\": true\n          }\n        },\n        \"tooltipReferenceClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Tooltip Element Wrapper ClassName\"\n        },\n        \"tooltipProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Partial\",\n            \"elements\": [\n              {\n                \"name\": \"intersection\",\n                \"raw\": \"TooltipBaseProps & (TooltipWithChildrenProps | TooltipWithoutChildrenProps)\",\n                \"elements\": [\n                  {\n                    \"name\": \"TooltipBaseProps\"\n                  },\n                  {\n                    \"name\": \"unknown\"\n                  }\n                ]\n              }\n            ],\n            \"raw\": \"Partial<TooltipProps>\"\n          },\n          \"description\": \"\"\n        },\n        \"hideWhenReferenceHidden\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"When the MenuButton is hidden hide the dialog and tooltip as well\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"disabledReason\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"@deprecated - use tooltipContent instead\"\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ReactNode | ReactNode[]\",\n            \"elements\": [\n              {\n                \"name\": \"ReactNode\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactNode\"\n                  }\n                ],\n                \"raw\": \"ReactNode[]\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"componentPosition\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"unknown[unknown]\",\n            \"raw\": \"(typeof MenuButtonComponentPosition)[keyof typeof MenuButtonComponentPosition]\"\n          },\n          \"description\": \"Specifies whether to render the component before or after the text\",\n          \"defaultValue\": {\n            \"value\": \"MenuButton.componentPositions.START\",\n            \"computed\": true\n          }\n        },\n        \"triggerElement\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactElementType\",\n            \"raw\": \"React.ElementType\"\n          },\n          \"description\": \"Element to be used as the trigger element for the Menu - default is button\",\n          \"defaultValue\": {\n            \"value\": \"\\\"button\\\"\",\n            \"computed\": false\n          }\n        },\n        \"closeMenuOnItemClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Close the menu when an item is clicked\"\n        },\n        \"showTooltipOnlyOnTriggerElement\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Whether tooltip should appear only when the trigger element is hovered and not the menu dialog\"\n        }\n      }\n    }\n  ],\n  \"src/components/MultiStepIndicator/MultiStepIndicator.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"MultiStepIndicator\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"steps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Array\",\n            \"elements\": [\n              {\n                \"name\": \"signature\",\n                \"type\": \"object\",\n                \"raw\": \"{\\n  titleText: string;\\n  subtitleText: string;\\n  status: StepStatus;\\n}\",\n                \"signature\": {\n                  \"properties\": [\n                    {\n                      \"key\": \"titleText\",\n                      \"value\": {\n                        \"name\": \"string\",\n                        \"required\": true\n                      }\n                    },\n                    {\n                      \"key\": \"subtitleText\",\n                      \"value\": {\n                        \"name\": \"string\",\n                        \"required\": true\n                      }\n                    },\n                    {\n                      \"key\": \"status\",\n                      \"value\": {\n                        \"name\": \"StepStatus\",\n                        \"required\": true\n                      }\n                    }\n                  ]\n                }\n              }\n            ],\n            \"raw\": \"Step[]\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"[]\",\n            \"computed\": false\n          }\n        },\n        \"type\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"MultiStepType\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"MultiStepType.PRIMARY\",\n            \"computed\": true\n          }\n        },\n        \"stepComponentClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"dividerComponentClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"fulfilledStepIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"({size, ...props}) => (\\n  <svg viewBox=\\\"0 0 20 20\\\" fill=\\\"currentColor\\\" width={ size || \\\"20\\\" } height={ size || \\\"20\\\" } {...props}>\\n    <path d=\\\"M8.53033 14.2478L8 13.7175L7.46967 14.2478C7.76256 14.5407 8.23744 14.5407 8.53033 14.2478ZM8 12.6569L4.53033 9.18718C4.23744 8.89429 3.76256 8.89429 3.46967 9.18718C3.17678 9.48008 3.17678 9.95495 3.46967 10.2478L7.46967 14.2478L8 13.7175L8.53033 14.2478L16.2478 6.53033C16.5407 6.23743 16.5407 5.76256 16.2478 5.46967C15.955 5.17677 15.4801 5.17677 15.1872 5.46967L8 12.6569Z\\\"\\n      fill=\\\"currentColor\\\" fillRule=\\\"evenodd\\\" clipRule=\\\"evenodd\\\" />\\n  </svg>\\n)\",\n            \"computed\": false\n          }\n        },\n        \"fulfilledStepIconType\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"IconType.SVG | IconType.ICON_FONT\",\n            \"elements\": [\n              {\n                \"name\": \"IconType.SVG\"\n              },\n              {\n                \"name\": \"IconType.ICON_FONT\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"IconType.SVG\",\n            \"computed\": true\n          }\n        },\n        \"isFulfilledStepDisplayNumber\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(stepNumber: number) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"stepNumber\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"textPlacement\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"TextPlacement\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"TextPlacement.HORIZONTAL\",\n            \"computed\": true\n          }\n        },\n        \"size\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Size\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/RadioButton/RadioButton.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"RadioButton\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"class to be added to wrapping component\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"componentClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"@deprecated - use className instead\"\n        },\n        \"labelClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"class to add to the  text/label\"\n        },\n        \"radioButtonClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"class to be added to the radiobutton\"\n        },\n        \"text\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"text value\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"value\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"The input control's value. When specified in the HTML, this is the initial value, and from then on it can be altered or retrieved at any time using JavaScript to access the respective HTMLInputElement object's value property. The value attribute is always optional, though should be considered mandatory for checkbox, radio, and hidden.l\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"name\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted.\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"disabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"is disabled\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"disabledReason\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"why the input is disabled\"\n        },\n        \"defaultChecked\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"default checked value\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactReactNode\",\n            \"raw\": \"React.ReactNode\"\n          },\n          \"description\": \"\"\n        },\n        \"onSelect\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.ChangeEvent<HTMLInputElement | null>) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactChangeEvent\",\n                    \"raw\": \"React.ChangeEvent<HTMLInputElement | null>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"union\",\n                        \"raw\": \"HTMLInputElement | null\",\n                        \"elements\": [\n                          {\n                            \"name\": \"HTMLInputElement\"\n                          },\n                          {\n                            \"name\": \"null\"\n                          }\n                        ]\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"callback function when value changed\"\n        },\n        \"checked\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"controlled the radio button state\"\n        },\n        \"retainChildClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"react to click on children\",\n          \"defaultValue\": {\n            \"value\": \"true\",\n            \"computed\": false\n          }\n        },\n        \"childrenTabIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"add tab index to the children\",\n          \"defaultValue\": {\n            \"value\": \"\\\"0\\\"\",\n            \"computed\": false\n          }\n        },\n        \"noLabelAnimation\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"disabled animation\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/Refable/Refable.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Refable\"\n    }\n  ],\n  \"src/components/LegacySearch/LegacySearch.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Search\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"search\\\"\",\n            \"computed\": false\n          }\n        },\n        \"secondaryIconName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"({size, ...props}) => (\\n  <svg viewBox=\\\"0 0 20 20\\\" fill=\\\"currentColor\\\" width={ size || \\\"20\\\" } height={ size || \\\"20\\\" } {...props}>\\n    <path d=\\\"M6.53033 5.46967C6.23744 5.17678 5.76256 5.17678 5.46967 5.46967C5.17678 5.76256 5.17678 6.23744 5.46967 6.53033L8.62562 9.68628L5.47045 12.8415C5.17756 13.1343 5.17756 13.6092 5.47045 13.9021C5.76334 14.195 6.23822 14.195 6.53111 13.9021L9.68628 10.7469L12.8415 13.9021C13.1343 14.195 13.6092 14.195 13.9021 13.9021C14.195 13.6092 14.195 13.1343 13.9021 12.8415L10.7469 9.68628L13.9029 6.53033C14.1958 6.23744 14.1958 5.76256 13.9029 5.46967C13.61 5.17678 13.1351 5.17678 12.8422 5.46967L9.68628 8.62562L6.53033 5.46967Z\\\"\\n      fill=\\\"currentColor\\\" fillRule=\\\"evenodd\\\" clipRule=\\\"evenodd\\\" />\\n  </svg>\\n)\",\n            \"computed\": false\n          }\n        },\n        \"iconName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"({size, ...props}) => (\\n  <svg viewBox=\\\"0 0 20 20\\\" fill=\\\"currentColor\\\" width={ size || \\\"20\\\" } height={ size || \\\"20\\\" } {...props}>\\n    <path d=\\\"M8.65191 2.37299C6.9706 2.37299 5.35814 3.04089 4.16927 4.22976C2.9804 5.41863 2.3125 7.03108 2.3125 8.7124C2.3125 10.3937 2.9804 12.0062 4.16927 13.195C5.35814 14.3839 6.9706 15.0518 8.65191 15.0518C10.0813 15.0518 11.4609 14.5691 12.5728 13.6939L16.4086 17.5303C16.7014 17.8232 17.1763 17.8232 17.4692 17.5303C17.7621 17.2375 17.7622 16.7626 17.4693 16.4697L13.6334 12.6333C14.5086 11.5214 14.9913 10.1418 14.9913 8.7124C14.9913 7.03108 14.3234 5.41863 13.1346 4.22976C11.9457 3.04089 10.3332 2.37299 8.65191 2.37299ZM12.091 12.1172C12.9878 11.2113 13.4913 9.98783 13.4913 8.7124C13.4913 7.42891 12.9815 6.19798 12.0739 5.29042C11.1663 4.38285 9.9354 3.87299 8.65191 3.87299C7.36842 3.87299 6.1375 4.38285 5.22993 5.29042C4.32237 6.19798 3.8125 7.42891 3.8125 8.7124C3.8125 9.99589 4.32237 11.2268 5.22993 12.1344C6.1375 13.0419 7.36842 13.5518 8.65191 13.5518C9.92736 13.5518 11.1509 13.0483 12.0568 12.1514C12.0623 12.1455 12.0679 12.1397 12.0737 12.134C12.0794 12.1283 12.0851 12.1227 12.091 12.1172Z\\\"\\n      fill=\\\"currentColor\\\" fillRule=\\\"evenodd\\\" clipRule=\\\"evenodd\\\" />\\n  </svg>\\n)\",\n            \"computed\": false\n          }\n        },\n        \"onChange\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(value: string) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"string\"\n                  },\n                  \"name\": \"value\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"autoFocus\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"value\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"placeholder\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"disabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"debounceRate\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"200\",\n            \"computed\": false\n          }\n        },\n        \"onBlur\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.FocusEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactFocusEvent\",\n                    \"raw\": \"React.FocusEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"onFocus\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.FocusEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactFocusEvent\",\n                    \"raw\": \"React.FocusEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"wrapperClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"setRef\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"autoComplete\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"off\\\"\",\n            \"computed\": false\n          }\n        },\n        \"size\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"unknown[union]\",\n            \"raw\": \"(typeof BASE_SIZES)[keyof typeof BASE_SIZES]\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"medium\\\"\",\n            \"computed\": false\n          }\n        },\n        \"type\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"SearchType\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"SearchType.SQUARE\",\n            \"computed\": true\n          }\n        },\n        \"validation\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"| {\\n    status: \\\"error\\\" | \\\"success\\\";\\n    text: string;\\n  }\\n| { text: string }\",\n            \"elements\": [\n              {\n                \"name\": \"signature\",\n                \"type\": \"object\",\n                \"raw\": \"{\\n  status: \\\"error\\\" | \\\"success\\\";\\n  text: string;\\n}\",\n                \"signature\": {\n                  \"properties\": [\n                    {\n                      \"key\": \"status\",\n                      \"value\": {\n                        \"name\": \"union\",\n                        \"raw\": \"\\\"error\\\" | \\\"success\\\"\",\n                        \"elements\": [\n                          {\n                            \"name\": \"literal\",\n                            \"value\": \"\\\"error\\\"\"\n                          },\n                          {\n                            \"name\": \"literal\",\n                            \"value\": \"\\\"success\\\"\"\n                          }\n                        ],\n                        \"required\": true\n                      }\n                    },\n                    {\n                      \"key\": \"text\",\n                      \"value\": {\n                        \"name\": \"string\",\n                        \"required\": true\n                      }\n                    }\n                  ]\n                }\n              },\n              {\n                \"name\": \"signature\",\n                \"type\": \"object\",\n                \"raw\": \"{ text: string }\",\n                \"signature\": {\n                  \"properties\": [\n                    {\n                      \"key\": \"text\",\n                      \"value\": {\n                        \"name\": \"string\",\n                        \"required\": true\n                      }\n                    }\n                  ]\n                }\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"inputAriaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"searchResultsContainerId\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"activeDescendant\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"iconNames\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"object\",\n            \"raw\": \"{\\n  layout: string;\\n  primary: string;\\n  secondary: string;\\n}\",\n            \"signature\": {\n              \"properties\": [\n                {\n                  \"key\": \"layout\",\n                  \"value\": {\n                    \"name\": \"string\",\n                    \"required\": true\n                  }\n                },\n                {\n                  \"key\": \"primary\",\n                  \"value\": {\n                    \"name\": \"string\",\n                    \"required\": true\n                  }\n                },\n                {\n                  \"key\": \"secondary\",\n                  \"value\": {\n                    \"name\": \"string\",\n                    \"required\": true\n                  }\n                }\n              ]\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"{\\n  layout: \\\"\\\",\\n  primary: \\\"Search\\\",\\n  secondary: \\\"Clear Search\\\"\\n}\",\n            \"computed\": false\n          }\n        },\n        \"loading\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"shows loading animation\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/SplitButton/SplitButton.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"SplitButton\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Custom class names to pass to the component\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"id to pass to the button\"\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactReactNode\",\n            \"raw\": \"React.ReactNode\"\n          },\n          \"description\": \"\"\n        },\n        \"activeButtonClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"kind\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ButtonType\"\n          },\n          \"description\": \"The button's kind\"\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent<HTMLButtonElement>) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent<HTMLButtonElement>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"HTMLButtonElement\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"Callback function to run when the button is clicked\"\n        },\n        \"onMouseDown\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent<HTMLButtonElement>) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent<HTMLButtonElement>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"HTMLButtonElement\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"blurOnMouseUp\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Blur on button click\"\n        },\n        \"name\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Name of the button - for form submit usages\"\n        },\n        \"size\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"(typeof SIZES)[keyof typeof SIZES] | keyof typeof OLD_BUTTON_SIZES\",\n            \"elements\": [\n              {\n                \"name\": \"unknown[union]\",\n                \"raw\": \"(typeof SIZES)[keyof typeof SIZES]\"\n              },\n              {\n                \"name\": \"union\",\n                \"raw\": \"keyof typeof OLD_BUTTON_SIZES\",\n                \"elements\": [\n                  {\n                    \"name\": \"literal\",\n                    \"value\": \"sm\"\n                  },\n                  {\n                    \"name\": \"literal\",\n                    \"value\": \"md\"\n                  },\n                  {\n                    \"name\": \"literal\",\n                    \"value\": \"lg\"\n                  }\n                ]\n              }\n            ]\n          },\n          \"description\": \"The button's size\"\n        },\n        \"color\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ButtonColor\"\n          },\n          \"description\": \"The button's color\"\n        },\n        \"type\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ButtonInputType\"\n          },\n          \"description\": \"The button's type\"\n        },\n        \"disabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Whether the button should be disabled or not\"\n        },\n        \"rightIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"Icon to place on the right\"\n        },\n        \"leftIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"Icon to place on the left\"\n        },\n        \"success\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"the success props are used when you have async action and wants to display a success message\"\n        },\n        \"successIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"Success icon name\"\n        },\n        \"successText\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Success text\"\n        },\n        \"loading\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"loading boolean which switches the text to a loader\"\n        },\n        \"style\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactCSSProperties\",\n            \"raw\": \"React.CSSProperties\"\n          },\n          \"description\": \"\"\n        },\n        \"active\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"displays the active state\"\n        },\n        \"marginRight\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"adds 8px margin to the right\"\n        },\n        \"marginLeft\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"adds 8px margin to the left\"\n        },\n        \"ariaLabeledBy\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"element id to describe the button accordingly\"\n        },\n        \"ariaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"aria label to provide important when providing only Icon\"\n        },\n        \"ariaHasPopup\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactHTMLProps[\\\"aria-haspopup\\\"]\",\n            \"raw\": \"React.HTMLProps<HTMLButtonElement>[\\\"aria-haspopup\\\"]\"\n          },\n          \"description\": \"aria for a button popup\"\n        },\n        \"ariaExpanded\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"aria to be set if the popup is open\"\n        },\n        \"ariaControls\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"aria controls - receives id for the controlled region\"\n        },\n        \"aria-describedby\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AriaAttributes[\\\"aria-describedby\\\"]\",\n            \"raw\": \"AriaAttributes[\\\"aria-describedby\\\"]\"\n          },\n          \"description\": \"\"\n        },\n        \"aria-hidden\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AriaAttributes[\\\"aria-hidden\\\"]\",\n            \"raw\": \"AriaAttributes[\\\"aria-hidden\\\"]\"\n          },\n          \"description\": \"aria to be used for screen reader to know if the button is hidden\"\n        },\n        \"onFocus\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.FocusEvent<HTMLButtonElement>) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactFocusEvent\",\n                    \"raw\": \"React.FocusEvent<HTMLButtonElement>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"HTMLButtonElement\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"On Button Focus callback\"\n        },\n        \"onBlur\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.FocusEvent<HTMLButtonElement>) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactFocusEvent\",\n                    \"raw\": \"React.FocusEvent<HTMLButtonElement>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"HTMLButtonElement\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"On Button Blur callback\"\n        },\n        \"rightFlat\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"leftFlat\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"preventClickAnimation\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"noSidePadding\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"defaultTextColorOnPrimaryColor\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"default color for text color in ON_PRIMARY_COLOR kind (should be any type of css color (rbg, var, hex...)\"\n        },\n        \"dataTestId\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"@deprecated - use \\\"data-testid\\\" instead\"\n        },\n        \"insetFocus\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Change the focus indicator from around the button to within it\"\n        },\n        \"tabIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"Specifies the tab order of an element\"\n        },\n        \"secondaryDialogContent\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ReactElement | (() => string | ReactElement)\",\n            \"elements\": [\n              {\n                \"name\": \"ReactElement\"\n              },\n              {\n                \"name\": \"unknown\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"onSecondaryDialogDidShow\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"onSecondaryDialogDidHide\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"zIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"secondaryDialogClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"secondaryDialogPosition\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"DialogPosition\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"DialogPosition.BOTTOM_START\",\n            \"computed\": true\n          }\n        },\n        \"dialogPaddingSize\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"unknown[unknown]\",\n            \"raw\": \"(typeof DialogContentContainer.sizes)[keyof typeof DialogContentContainer.sizes]\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"DialogContentContainer.sizes.MEDIUM\",\n            \"computed\": true\n          }\n        },\n        \"dialogContainerSelector\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"the container selector in which to append the dialog\\nfor examples: \\\"body\\\" , \\\".my-class\\\", \\\"#my-id\\\"\"\n        },\n        \"shouldCloseOnClickInsideDialog\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Steps/Steps.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Steps\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"activeStepIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"The index of the current displayed step\",\n          \"defaultValue\": {\n            \"value\": \"0\",\n            \"computed\": false\n          }\n        },\n        \"onChangeActiveStep\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(e: React.MouseEvent, stepIndex: number) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"e\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"stepIndex\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"A callback which called when the active step is changed\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"areNavigationButtonsHidden\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"steps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Array\",\n            \"elements\": [\n              {\n                \"name\": \"ReactElement\"\n              }\n            ],\n            \"raw\": \"ReactElement[]\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"[]\",\n            \"computed\": false\n          }\n        },\n        \"type\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"StepsType\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"StepsType.GALLERY\",\n            \"computed\": true\n          }\n        },\n        \"isOnPrimary\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"@deprecated - Use color instead\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"color\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"StepsColor\"\n          },\n          \"description\": \"\"\n        },\n        \"isContentOnTop\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"areButtonsIconsHidden\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"backButtonProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ButtonProps\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"{}\",\n            \"computed\": false\n          }\n        },\n        \"nextButtonProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ButtonProps\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"{}\",\n            \"computed\": false\n          }\n        },\n        \"finishButtonProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ButtonProps\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"{}\",\n            \"computed\": false\n          }\n        },\n        \"onFinish\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(e: React.MouseEvent | React.KeyboardEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"union\",\n                    \"raw\": \"React.MouseEvent | React.KeyboardEvent\",\n                    \"elements\": [\n                      {\n                        \"name\": \"ReactMouseEvent\",\n                        \"raw\": \"React.MouseEvent\"\n                      },\n                      {\n                        \"name\": \"ReactKeyboardEvent\",\n                        \"raw\": \"React.KeyboardEvent\"\n                      }\n                    ]\n                  },\n                  \"name\": \"e\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Skeleton/Skeleton.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Skeleton\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"type\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"SkeletonType\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"SkeletonType.RECTANGLE\",\n            \"computed\": true\n          }\n        },\n        \"size\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"TextSkeletonSize | typeof SKELETON_CUSTOM_SIZE\",\n            \"elements\": [\n              {\n                \"name\": \"TextSkeletonSize\"\n              },\n              {\n                \"name\": \"SKELETON_CUSTOM_SIZE\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"custom\\\"\",\n            \"computed\": false\n          }\n        },\n        \"width\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"height\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"wrapperClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"fullWidth\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Is the skeleton wrapper width equal to its container\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/Steps/StepsCommand.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"StepsCommand\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"isNext\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"onChangeActiveStep\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(e: React.MouseEvent, newStepIndex: number) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"e\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"newStepIndex\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"activeStepIndex\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"stepsCount\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"isIconHidden\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"buttonProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ButtonProps\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"{}\",\n            \"computed\": false\n          }\n        },\n        \"color\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"StepsColor\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"StepsColor.PRIMARY\",\n            \"computed\": true\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/Steps/StepsDot.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"StepsDot\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(e: React.MouseEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"e\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function noop() {\\n  // No operation performed.\\n}\",\n            \"computed\": false\n          }\n        },\n        \"ariaCurrent\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"StepsDotAriaCurrent | boolean\",\n            \"elements\": [\n              {\n                \"name\": \"StepsDotAriaCurrent\"\n              },\n              {\n                \"name\": \"boolean\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"StepsDotAriaCurrent.STEP\",\n            \"computed\": true\n          }\n        },\n        \"isActive\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"ariaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"color\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"StepsColor\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Steps/StepsHeader.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"StepsHeader\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"type\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"StepsType\"\n          },\n          \"description\": \"\"\n        },\n        \"activeStepIndex\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"onChangeActiveStep\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(e: React.MouseEvent, stepIndex: number) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"e\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"stepIndex\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"stepsCount\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"areNavigationButtonsHidden\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"backButtonProps\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"ButtonProps\"\n          },\n          \"description\": \"\"\n        },\n        \"nextButtonProps\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"ButtonProps\"\n          },\n          \"description\": \"\"\n        },\n        \"finishButtonProps\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"ButtonProps\"\n          },\n          \"description\": \"\"\n        },\n        \"areButtonsIconsHidden\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"color\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"StepsColor\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"StepsColor.PRIMARY\",\n            \"computed\": true\n          }\n        },\n        \"onFinish\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(e: React.MouseEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"e\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Steps/StepsGalleryHeader.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"StepsGalleryHeader\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"activeStepIndex\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"stepsCount\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"onChangeActiveStep\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(e: React.MouseEvent, stepIndex: number) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"e\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"stepIndex\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"stepDescriptionFunc\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(stepIndex: number) => string\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"stepIndex\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"string\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"color\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"StepsColor\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Slider/Slider.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Slider\",\n      \"props\": {\n        \"ariaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Define a string that labels the current element (Slider)\"\n        },\n        \"ariaLabelledby\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"ElementId of Node that have the text needed for labeling the current element (Slider)\"\n        },\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Custom `class name` to be added to the component-root-node\"\n        },\n        \"color\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"SliderColor\"\n          },\n          \"description\": \"Color Mode (primary/positive/negative) of the component (Slider)\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Unique TestId - can be used as Selector for integration tests and other needs (tracking, etc)\",\n          \"defaultValue\": {\n            \"value\": \"\\\"monday-slider\\\"\",\n            \"computed\": false\n          }\n        },\n        \"defaultValue\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"number | number[]\",\n            \"elements\": [\n              {\n                \"name\": \"number\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"number\"\n                  }\n                ],\n                \"raw\": \"number[]\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"0\",\n            \"computed\": false\n          }\n        },\n        \"disabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"If set to true, Component (Slider) will be disabled\\n - impossible to change value of component (Slider)\\n - visual changes (opacity)\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Attribute `id` to be added to the component-root-node\"\n        },\n        \"max\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"Max range value of the component (Slider)\",\n          \"defaultValue\": {\n            \"value\": \"100\",\n            \"computed\": false\n          }\n        },\n        \"min\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"Min range value of the component (Slider)\",\n          \"defaultValue\": {\n            \"value\": \"0\",\n            \"computed\": false\n          }\n        },\n        \"onChange\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(value: number | number[]) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"union\",\n                    \"raw\": \"number | number[]\",\n                    \"elements\": [\n                      {\n                        \"name\": \"number\"\n                      },\n                      {\n                        \"name\": \"Array\",\n                        \"elements\": [\n                          {\n                            \"name\": \"number\"\n                          }\n                        ],\n                        \"raw\": \"number[]\"\n                      }\n                    ]\n                  },\n                  \"name\": \"value\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"Optional onChange callback (for outer trigger or Controlled mode)\\n- required in Controlled Mode\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"ranged\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"If true switch slider to RRange mode (two Thumbs)\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"step\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"The granularity with which the slider can step through values.\\n(A \\\"discrete\\\" slider.) The min prop serves as the origin for the valid values.\\nWe recommend (max - min) to be evenly divisible by the step.\",\n          \"defaultValue\": {\n            \"value\": \"1\",\n            \"computed\": false\n          }\n        },\n        \"showValue\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Always show `value` instead of Tooltip\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"size\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"unknown[unknown]\",\n            \"raw\": \"(typeof Slider.sizes)[keyof typeof Slider.sizes]\"\n          },\n          \"description\": \"Size small/medium/large of the component (Slider)\",\n          \"defaultValue\": {\n            \"value\": \"Slider.sizes.SMALL\",\n            \"computed\": true\n          }\n        },\n        \"value\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"number | number[]\",\n            \"elements\": [\n              {\n                \"name\": \"number\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"number\"\n                  }\n                ],\n                \"raw\": \"number[]\"\n              }\n            ]\n          },\n          \"description\": \"Current/selected value of the range of the Component (Slider)\\n  - should be used in Controlled Mode only\\n  - in ranged mode should be an array of two numbers\"\n        },\n        \"valueFormatter\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(value: number) => string\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"value\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"string\"\n              }\n            }\n          },\n          \"description\": \"Function to format the value, e.g. add %. By default, returns `${value}%`\",\n          \"defaultValue\": {\n            \"value\": \"(value: number) => `${value}%`\",\n            \"computed\": false\n          }\n        },\n        \"valueText\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Text/presentation of current/selected value\\n - should be used in Controlled Mode only\"\n        },\n        \"indicateSelection\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Show selected from Slider range value\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"prefix\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"{ icon: IconType } | string | ((value: number, valueText: string) => void) | ReactElement\",\n            \"elements\": [\n              {\n                \"name\": \"signature\",\n                \"type\": \"object\",\n                \"raw\": \"{ icon: IconType }\",\n                \"signature\": {\n                  \"properties\": [\n                    {\n                      \"key\": \"icon\",\n                      \"value\": {\n                        \"name\": \"IconType\",\n                        \"required\": true\n                      }\n                    }\n                  ]\n                }\n              },\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"unknown\"\n              },\n              {\n                \"name\": \"ReactElement\"\n              }\n            ]\n          },\n          \"description\": \"Options for initial/start/prefix element, it can be one of:\\n - Any Component (react component, node, text, number etc.)\\n - Or it can be an object of options for Icons component (see Icon components props)\\n - Or it can be an object for Label (Icon, Heading - and other components)\\n - Or it can be Render Props Function witch are getting value and valueText\"\n        },\n        \"postfix\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"{ icon: IconType } | string | ((value: number, valueText: string) => void) | ReactElement\",\n            \"elements\": [\n              {\n                \"name\": \"signature\",\n                \"type\": \"object\",\n                \"raw\": \"{ icon: IconType }\",\n                \"signature\": {\n                  \"properties\": [\n                    {\n                      \"key\": \"icon\",\n                      \"value\": {\n                        \"name\": \"IconType\",\n                        \"required\": true\n                      }\n                    }\n                  ]\n                }\n              },\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"unknown\"\n              },\n              {\n                \"name\": \"ReactElement\"\n              }\n            ]\n          },\n          \"description\": \"Options for postfix/end/finishing element. Same as prefix element.\"\n        },\n        \"selectionIndicatorWidth\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Width of SelectionIndicator (i.e. TextField)\",\n          \"defaultValue\": {\n            \"value\": \"\\\"60px\\\"\",\n            \"computed\": false\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/Heading/Heading.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Heading\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"element\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"The element tag of the text component\"\n        },\n        \"children\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"ReactNode\"\n          },\n          \"description\": \"The textual content\"\n        },\n        \"color\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"TypographyColor\"\n          },\n          \"description\": \"\"\n        },\n        \"align\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"TypographyAlign\"\n          },\n          \"description\": \"\"\n        },\n        \"ellipsis\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"When the text is too long, cut the end of the text and display instead of it three dots (...)\"\n        },\n        \"maxLines\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"Use this prop combined with the boolean ellipsis prop for truncate the text and add an ellipsis after a certain number of lines\"\n        },\n        \"tooltipProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"intersection\",\n            \"raw\": \"TooltipBaseProps & (TooltipWithChildrenProps | TooltipWithoutChildrenProps)\",\n            \"elements\": [\n              {\n                \"name\": \"TooltipBaseProps\"\n              },\n              {\n                \"name\": \"unknown\"\n              }\n            ]\n          },\n          \"description\": \"All props are passed to the tooltip displayed when hovering over the text. By default, the tooltip will display when text contains an ellipsis and will show the full text\"\n        },\n        \"withoutTooltip\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Hide tooltip when hovering the text, by default the tooltip swill display when text contains an ellipsis\"\n        },\n        \"type\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"HeadingType\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"HeadingType.H1\",\n            \"computed\": true\n          }\n        },\n        \"weight\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"HeadingWeight\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"HeadingWeight.NORMAL\",\n            \"computed\": true\n          }\n        }\n      },\n      \"composes\": [\"HTMLAttributes\"]\n    }\n  ],\n  \"src/components/Switch/Switch.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Switch\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"name\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"value\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"role\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"disabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"ariaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"ariaLabelledBy\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"checked\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"inputClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"onChange\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(value: boolean) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"boolean\"\n                  },\n                  \"name\": \"value\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"ariaControls\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"defaultChecked\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactElement\",\n            \"elements\": [\n              {\n                \"name\": \"MockToggleProps\"\n              }\n            ],\n            \"raw\": \"ReactElement<MockToggleProps>\"\n          },\n          \"description\": \"\"\n        },\n        \"wrapperClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Slider/SelectionIndicator.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"SelectionIndicator\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"kind\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"InfixKind\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"InfixKind.PREFIX\",\n            \"computed\": true\n          }\n        },\n        \"key\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"InfixKind\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/LegacyHeading/LegacyHeading.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"LegacyHeading\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"type\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"HeadingTypes\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"HeadingTypes.h1\",\n            \"computed\": true\n          }\n        },\n        \"ariaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"value\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"ellipsis\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"true\",\n            \"computed\": false\n          }\n        },\n        \"ellipsisMaxLines\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"1\",\n            \"computed\": false\n          }\n        },\n        \"suggestEditOnHover\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"nonEllipsisTooltip\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Tooltip to show when no overflow\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"size\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Sizes\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"HeadingSizes.LARGE\",\n            \"computed\": true\n          }\n        },\n        \"highlightTerm\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"customColor\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"style\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"CSSProperties\"\n          },\n          \"description\": \"\"\n        },\n        \"tooltipPosition\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"DialogPosition\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Slider/SliderInfix.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"SliderInfix\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"kind\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"InfixKind\"\n          },\n          \"description\": \"kind (type/mode) of Infix prefix/postfix\\nInfix - additional inserted by Consumer - component/string/number etc.\",\n          \"defaultValue\": {\n            \"value\": \"SliderInfix.kinds.PREFIX\",\n            \"computed\": true\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/Text/Text.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Text\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"element\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"The element tag of the text component\",\n          \"defaultValue\": {\n            \"value\": \"\\\"div\\\"\",\n            \"computed\": false\n          }\n        },\n        \"children\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"ReactNode\"\n          },\n          \"description\": \"The textual content\"\n        },\n        \"color\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"TypographyColor\"\n          },\n          \"description\": \"\"\n        },\n        \"align\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"TypographyAlign\"\n          },\n          \"description\": \"\"\n        },\n        \"ellipsis\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"When the text is too long, cut the end of the text and display instead of it three dots (...)\"\n        },\n        \"maxLines\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"Use this prop combined with the boolean ellipsis prop for truncate the text and add an ellipsis after a certain number of lines\"\n        },\n        \"tooltipProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"intersection\",\n            \"raw\": \"TooltipBaseProps & (TooltipWithChildrenProps | TooltipWithoutChildrenProps)\",\n            \"elements\": [\n              {\n                \"name\": \"TooltipBaseProps\"\n              },\n              {\n                \"name\": \"unknown\"\n              }\n            ]\n          },\n          \"description\": \"All props are passed to the tooltip displayed when hovering over the text. By default, the tooltip will display when text contains an ellipsis and will show the full text\"\n        },\n        \"withoutTooltip\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Hide tooltip when hovering the text, by default the tooltip swill display when text contains an ellipsis\"\n        },\n        \"type\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"TextType\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"TextType.TEXT2\",\n            \"computed\": true\n          }\n        },\n        \"weight\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"TextWeight\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"TextWeight.NORMAL\",\n            \"computed\": true\n          }\n        }\n      },\n      \"composes\": [\"HTMLAttributes\"]\n    }\n  ],\n  \"src/components/TextWithHighlight/TextWithHighlight.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"TextWithHighlight\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"text\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Text to wrap\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"highlightTerm\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"limit\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"Number of highlighted parts\"\n        },\n        \"ignoreCase\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"true\",\n            \"computed\": false\n          }\n        },\n        \"useEllipsis\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Should use ellipsis\",\n          \"defaultValue\": {\n            \"value\": \"true\",\n            \"computed\": false\n          }\n        },\n        \"allowTermSplit\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Allow highlight every word as a separate term\",\n          \"defaultValue\": {\n            \"value\": \"true\",\n            \"computed\": false\n          }\n        },\n        \"linesToClamp\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"3\",\n            \"computed\": false\n          }\n        },\n        \"nonEllipsisTooltip\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Tooltip to show when there is no overflow\"\n        },\n        \"wrappingTextTag\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"JSX.IntrinsicElements\"\n          },\n          \"description\": \"HTML tag to wrap the selected text\",\n          \"defaultValue\": {\n            \"value\": \"\\\"em\\\"\",\n            \"computed\": false\n          }\n        },\n        \"wrappingElementClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"tooltipPosition\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"DialogPosition\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/ThemeProvider/ThemeProvider.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"ThemeProvider\",\n      \"props\": {\n        \"theme\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"object\",\n            \"raw\": \"{\\n  /**\\n   * The name of the theme - name of css class that will be added to the children - should be unique\\n   */\\n  name: string;\\n  colors: SystemThemeColorMap;\\n}\",\n            \"signature\": {\n              \"properties\": [\n                {\n                  \"key\": \"name\",\n                  \"value\": {\n                    \"name\": \"string\",\n                    \"required\": true\n                  },\n                  \"description\": \"The name of the theme - name of css class that will be added to the children - should be unique\"\n                },\n                {\n                  \"key\": \"colors\",\n                  \"value\": {\n                    \"name\": \"signature\",\n                    \"type\": \"object\",\n                    \"raw\": \"{\\n  [key in SystemTheme]?: ThemeColorTokenValueMap;\\n}\",\n                    \"signature\": {\n                      \"properties\": [\n                        {\n                          \"key\": {\n                            \"name\": \"SystemTheme\",\n                            \"required\": false\n                          },\n                          \"value\": {\n                            \"name\": \"union\",\n                            \"raw\": \"ThemeColorTokenValue | ThemeCustomClassValue\",\n                            \"elements\": [\n                              {\n                                \"name\": \"signature\",\n                                \"type\": \"object\",\n                                \"raw\": \"{\\n  [key in ThemeColor]?: string;\\n}\",\n                                \"signature\": {\n                                  \"properties\": [\n                                    {\n                                      \"key\": {\n                                        \"name\": \"ThemeColor\",\n                                        \"required\": false\n                                      },\n                                      \"value\": {\n                                        \"name\": \"string\"\n                                      }\n                                    }\n                                  ]\n                                }\n                              },\n                              {\n                                \"name\": \"signature\",\n                                \"type\": \"object\",\n                                \"raw\": \"{\\n  [key: string]: ThemeColorTokenValue | ThemeCustomClassValue;\\n}\",\n                                \"signature\": {\n                                  \"properties\": [\n                                    {\n                                      \"key\": {\n                                        \"name\": \"string\"\n                                      },\n                                      \"value\": {\n                                        \"name\": \"union\",\n                                        \"raw\": \"ThemeColorTokenValue | ThemeCustomClassValue\",\n                                        \"elements\": [\n                                          {\n                                            \"name\": \"signature\",\n                                            \"type\": \"object\",\n                                            \"raw\": \"{\\n  [key in ThemeColor]?: string;\\n}\",\n                                            \"signature\": {\n                                              \"properties\": [\n                                                {\n                                                  \"key\": {\n                                                    \"name\": \"ThemeColor\",\n                                                    \"required\": false\n                                                  },\n                                                  \"value\": {\n                                                    \"name\": \"string\"\n                                                  }\n                                                }\n                                              ]\n                                            }\n                                          },\n                                          {\n                                            \"name\": \"ThemeCustomClassValue\"\n                                          }\n                                        ],\n                                        \"required\": true\n                                      }\n                                    }\n                                  ]\n                                }\n                              }\n                            ]\n                          }\n                        }\n                      ]\n                    },\n                    \"required\": true\n                  }\n                }\n              ]\n            }\n          },\n          \"description\": \"@deprecated use themeConfig instead\"\n        },\n        \"themeConfig\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"object\",\n            \"raw\": \"{\\n  /**\\n   * The name of the theme - name of css class that will be added to the children - should be unique\\n   */\\n  name: string;\\n  colors: SystemThemeColorMap;\\n}\",\n            \"signature\": {\n              \"properties\": [\n                {\n                  \"key\": \"name\",\n                  \"value\": {\n                    \"name\": \"string\",\n                    \"required\": true\n                  },\n                  \"description\": \"The name of the theme - name of css class that will be added to the children - should be unique\"\n                },\n                {\n                  \"key\": \"colors\",\n                  \"value\": {\n                    \"name\": \"signature\",\n                    \"type\": \"object\",\n                    \"raw\": \"{\\n  [key in SystemTheme]?: ThemeColorTokenValueMap;\\n}\",\n                    \"signature\": {\n                      \"properties\": [\n                        {\n                          \"key\": {\n                            \"name\": \"SystemTheme\",\n                            \"required\": false\n                          },\n                          \"value\": {\n                            \"name\": \"union\",\n                            \"raw\": \"ThemeColorTokenValue | ThemeCustomClassValue\",\n                            \"elements\": [\n                              {\n                                \"name\": \"signature\",\n                                \"type\": \"object\",\n                                \"raw\": \"{\\n  [key in ThemeColor]?: string;\\n}\",\n                                \"signature\": {\n                                  \"properties\": [\n                                    {\n                                      \"key\": {\n                                        \"name\": \"ThemeColor\",\n                                        \"required\": false\n                                      },\n                                      \"value\": {\n                                        \"name\": \"string\"\n                                      }\n                                    }\n                                  ]\n                                }\n                              },\n                              {\n                                \"name\": \"signature\",\n                                \"type\": \"object\",\n                                \"raw\": \"{\\n  [key: string]: ThemeColorTokenValue | ThemeCustomClassValue;\\n}\",\n                                \"signature\": {\n                                  \"properties\": [\n                                    {\n                                      \"key\": {\n                                        \"name\": \"string\"\n                                      },\n                                      \"value\": {\n                                        \"name\": \"union\",\n                                        \"raw\": \"ThemeColorTokenValue | ThemeCustomClassValue\",\n                                        \"elements\": [\n                                          {\n                                            \"name\": \"signature\",\n                                            \"type\": \"object\",\n                                            \"raw\": \"{\\n  [key in ThemeColor]?: string;\\n}\",\n                                            \"signature\": {\n                                              \"properties\": [\n                                                {\n                                                  \"key\": {\n                                                    \"name\": \"ThemeColor\",\n                                                    \"required\": false\n                                                  },\n                                                  \"value\": {\n                                                    \"name\": \"string\"\n                                                  }\n                                                }\n                                              ]\n                                            }\n                                          },\n                                          {\n                                            \"name\": \"ThemeCustomClassValue\"\n                                          }\n                                        ],\n                                        \"required\": true\n                                      }\n                                    }\n                                  ]\n                                }\n                              }\n                            ]\n                          }\n                        }\n                      ]\n                    },\n                    \"required\": true\n                  }\n                }\n              ]\n            }\n          },\n          \"description\": \"The theme config to apply, consists of a \\\"name\\\" - the name of css class that will be added to the children, which should be unique, and the object of colors overrides for each system theme.\"\n        },\n        \"children\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"ReactElement\"\n          },\n          \"description\": \"The children to render with the theme\"\n        },\n        \"themeClassSpecifier\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"String which adds up to theme name selector to make it more specific (in case if themeConfig.name is colliding with some other class name)\"\n        },\n        \"systemTheme\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"SystemTheme\"\n          },\n          \"description\": \"The system theme to apply to the body element on mount, if there is no theme class name on the body element already\"\n        },\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"ClassName to add to the wrapping div\"\n        }\n      }\n    }\n  ],\n  \"src/components/TextField/TextField.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"TextField\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"input\\\"\",\n            \"computed\": false\n          }\n        },\n        \"placeholder\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"autoComplete\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete for all of the available options\",\n          \"defaultValue\": {\n            \"value\": \"\\\"off\\\"\",\n            \"computed\": false\n          }\n        },\n        \"value\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"onChange\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(value: string, event: Pick<React.ChangeEvent, \\\"target\\\">) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"string\"\n                  },\n                  \"name\": \"value\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"Pick\",\n                    \"elements\": [\n                      {\n                        \"name\": \"ReactChangeEvent\",\n                        \"raw\": \"React.ChangeEvent\"\n                      },\n                      {\n                        \"name\": \"literal\",\n                        \"value\": \"\\\"target\\\"\"\n                      }\n                    ],\n                    \"raw\": \"Pick<React.ChangeEvent, \\\"target\\\">\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"onBlur\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.FocusEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactFocusEvent\",\n                    \"raw\": \"React.FocusEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"onFocus\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.FocusEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactFocusEvent\",\n                    \"raw\": \"React.FocusEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"onKeyDown\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.KeyboardEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactKeyboardEvent\",\n                    \"raw\": \"React.KeyboardEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"onWheel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.WheelEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactWheelEvent\",\n                    \"raw\": \"React.WheelEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"debounceRate\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"0\",\n            \"computed\": false\n          }\n        },\n        \"autoFocus\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"disabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"readonly\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"setRef\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(node: HTMLElement) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"HTMLElement\"\n                  },\n                  \"name\": \"node\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"iconName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FunctionComponent | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFunctionComponent\",\n                \"raw\": \"React.FunctionComponent\"\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"secondaryIconName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FunctionComponent | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFunctionComponent\",\n                \"raw\": \"React.FunctionComponent\"\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"title\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"size\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"(typeof BASE_SIZES)[keyof typeof BASE_SIZES] | keyof typeof OLD_TEXT_FIELD_SIZES\",\n            \"elements\": [\n              {\n                \"name\": \"unknown[union]\",\n                \"raw\": \"(typeof BASE_SIZES)[keyof typeof BASE_SIZES]\"\n              },\n              {\n                \"name\": \"union\",\n                \"raw\": \"keyof typeof OLD_TEXT_FIELD_SIZES\",\n                \"elements\": [\n                  {\n                    \"name\": \"literal\",\n                    \"value\": \"s\"\n                  },\n                  {\n                    \"name\": \"literal\",\n                    \"value\": \"md\"\n                  },\n                  {\n                    \"name\": \"literal\",\n                    \"value\": \"l\"\n                  }\n                ]\n              }\n            ]\n          },\n          \"description\": \"SIZES is exposed on the component itself\",\n          \"defaultValue\": {\n            \"value\": \"TextField.sizes.SMALL\",\n            \"computed\": true\n          }\n        },\n        \"validation\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"object\",\n            \"raw\": \"{ status?: \\\"error\\\" | \\\"success\\\"; text?: string }\",\n            \"signature\": {\n              \"properties\": [\n                {\n                  \"key\": \"status\",\n                  \"value\": {\n                    \"name\": \"union\",\n                    \"raw\": \"\\\"error\\\" | \\\"success\\\"\",\n                    \"elements\": [\n                      {\n                        \"name\": \"literal\",\n                        \"value\": \"\\\"error\\\"\"\n                      },\n                      {\n                        \"name\": \"literal\",\n                        \"value\": \"\\\"success\\\"\"\n                      }\n                    ],\n                    \"required\": false\n                  }\n                },\n                {\n                  \"key\": \"text\",\n                  \"value\": {\n                    \"name\": \"string\",\n                    \"required\": false\n                  }\n                }\n              ]\n            }\n          },\n          \"description\": \"Don't provide status for plain assistant text\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"wrapperClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"onIconClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(icon: string | React.FunctionComponent | null) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"union\",\n                    \"raw\": \"string | React.FunctionComponent | null\",\n                    \"elements\": [\n                      {\n                        \"name\": \"string\"\n                      },\n                      {\n                        \"name\": \"ReactFunctionComponent\",\n                        \"raw\": \"React.FunctionComponent\"\n                      },\n                      {\n                        \"name\": \"null\"\n                      }\n                    ]\n                  },\n                  \"name\": \"icon\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"clearOnIconClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"labelIconName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FunctionComponent | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFunctionComponent\",\n                \"raw\": \"React.FunctionComponent\"\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"showCharCount\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"inputAriaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"searchResultsContainerId\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"activeDescendant\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"iconsNames\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"object\",\n            \"raw\": \"{\\n  layout: string;\\n  primary: string;\\n  secondary: string;\\n}\",\n            \"signature\": {\n              \"properties\": [\n                {\n                  \"key\": \"layout\",\n                  \"value\": {\n                    \"name\": \"string\",\n                    \"required\": true\n                  }\n                },\n                {\n                  \"key\": \"primary\",\n                  \"value\": {\n                    \"name\": \"string\",\n                    \"required\": true\n                  }\n                },\n                {\n                  \"key\": \"secondary\",\n                  \"value\": {\n                    \"name\": \"string\",\n                    \"required\": true\n                  }\n                }\n              ]\n            }\n          },\n          \"description\": \"Icon names labels for a11y\",\n          \"defaultValue\": {\n            \"value\": \"{ primary: \\\"\\\", secondary: \\\"\\\", layout: \\\"\\\" }\",\n            \"computed\": false\n          }\n        },\n        \"type\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"TextFieldTextType\"\n          },\n          \"description\": \"TEXT_TYPES is exposed on the component itself\",\n          \"defaultValue\": {\n            \"value\": \"TextFieldTextType.TEXT\",\n            \"computed\": true\n          }\n        },\n        \"maxLength\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"trim\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"role\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"ARIA role for container landmark\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"required\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"adds required to the input element\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"loading\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"shows loading animation\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"dataTestId\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"@deprecated - use \\\"data-testid\\\" instead\"\n        },\n        \"requiredAsterisk\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"secondaryDataTestId\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"tabIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"name\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"underline\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"withReadOnlyStyle\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Apply new style for read only, use along with `readonly` prop\"\n        }\n      }\n    }\n  ],\n  \"src/components/Tipseen/TipseenTitle.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"TipseenTitle\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"text\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Tipseen/TipseenWizard.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"TipseenWizard\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"activeStepIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"The index of the current displayed step\"\n        },\n        \"onChangeActiveStep\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(e: React.MouseEvent, stepIndex: number) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"e\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"stepIndex\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"A callback which called when the active step is changed\"\n        },\n        \"areNavigationButtonsHidden\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"steps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Array\",\n            \"elements\": [\n              {\n                \"name\": \"ReactElement\"\n              }\n            ],\n            \"raw\": \"ReactElement[]\"\n          },\n          \"description\": \"\"\n        },\n        \"type\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"StepsType\"\n          },\n          \"description\": \"\"\n        },\n        \"isOnPrimary\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"@deprecated - Use color instead\"\n        },\n        \"color\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"StepsColor\"\n          },\n          \"description\": \"\"\n        },\n        \"isContentOnTop\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"areButtonsIconsHidden\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"backButtonProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ButtonProps\"\n          },\n          \"description\": \"\"\n        },\n        \"nextButtonProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ButtonProps\"\n          },\n          \"description\": \"\"\n        },\n        \"finishButtonProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ButtonProps\"\n          },\n          \"description\": \"\"\n        },\n        \"onFinish\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(e: React.MouseEvent | React.KeyboardEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"union\",\n                    \"raw\": \"React.MouseEvent | React.KeyboardEvent\",\n                    \"elements\": [\n                      {\n                        \"name\": \"ReactMouseEvent\",\n                        \"raw\": \"React.MouseEvent\"\n                      },\n                      {\n                        \"name\": \"ReactKeyboardEvent\",\n                        \"raw\": \"React.KeyboardEvent\"\n                      }\n                    ]\n                  },\n                  \"name\": \"e\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"title\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"titleClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Classname for overriding TipseenTitle styles\"\n        }\n      }\n    }\n  ],\n  \"src/components/Tipseen/Tipseen.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Tipseen\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"titleClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Classname for overriding TipseenTitle styles\"\n        },\n        \"position\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"DialogPosition\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"DialogPosition.BOTTOM\",\n            \"computed\": true\n          }\n        },\n        \"animationType\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AnimationType\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"AnimationType.EXPAND\",\n            \"computed\": true\n          }\n        },\n        \"hideDelay\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"0\",\n            \"computed\": false\n          }\n        },\n        \"showDelay\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"0\",\n            \"computed\": false\n          }\n        },\n        \"title\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"isCloseButtonHidden\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"@deprecated - use hideCloseButton instead\"\n        },\n        \"hideCloseButton\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactElement\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"containerSelector\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"hideTrigger\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"HideShowEvent | Array<HideShowEvent>\",\n            \"elements\": [\n              {\n                \"name\": \"HideShowEvent\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"HideShowEvent\"\n                  }\n                ],\n                \"raw\": \"Array<HideShowEvent>\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"[]\",\n            \"computed\": false\n          }\n        },\n        \"showTrigger\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"HideShowEvent | Array<HideShowEvent>\",\n            \"elements\": [\n              {\n                \"name\": \"HideShowEvent\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"HideShowEvent\"\n                  }\n                ],\n                \"raw\": \"Array<HideShowEvent>\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"[]\",\n            \"computed\": false\n          }\n        },\n        \"justify\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"JustifyType\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"JustifyType.CENTER\",\n            \"computed\": true\n          }\n        },\n        \"width\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"moveBy\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"object\",\n            \"raw\": \"{\\n  main?: number;\\n  secondary?: number;\\n}\",\n            \"signature\": {\n              \"properties\": [\n                {\n                  \"key\": \"main\",\n                  \"value\": {\n                    \"name\": \"number\",\n                    \"required\": false\n                  }\n                },\n                {\n                  \"key\": \"secondary\",\n                  \"value\": {\n                    \"name\": \"number\",\n                    \"required\": false\n                  }\n                }\n              ]\n            }\n          },\n          \"description\": \"\"\n        },\n        \"hideWhenReferenceHidden\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"tip\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"when false, the arrow of the tooltip is hidden\",\n          \"defaultValue\": {\n            \"value\": \"true\",\n            \"computed\": false\n          }\n        },\n        \"tooltipArrowClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Class name for a tooltip's arrow\"\n        },\n        \"modifiers\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Array\",\n            \"elements\": [\n              {\n                \"name\": \"Modifier\",\n                \"elements\": [\n                  {\n                    \"name\": \"unknown\"\n                  }\n                ],\n                \"raw\": \"Modifier<unknown>\"\n              }\n            ],\n            \"raw\": \"Array<Modifier<unknown>>\"\n          },\n          \"description\": \"PopperJS Modifiers type\\nhttps://popper.js.org/docs/v2/modifiers/\",\n          \"defaultValue\": {\n            \"value\": \"[]\",\n            \"computed\": false\n          }\n        },\n        \"closeAriaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"onClose\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"content\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ReactNode | ReactNode[]\",\n            \"elements\": [\n              {\n                \"name\": \"ReactNode\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactNode\"\n                  }\n                ],\n                \"raw\": \"ReactNode[]\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"closeButtonTheme\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"TipseenCloseButtonTheme\"\n          },\n          \"description\": \"Control the color of the Tipseen close button. Dark theme can be usfull while presenting bright images under the tipseen image\",\n          \"defaultValue\": {\n            \"value\": \"TipseenCloseButtonTheme.LIGHT\",\n            \"computed\": true\n          }\n        },\n        \"floating\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"color\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"TipseenColor\"\n          },\n          \"description\": \"The color of the Tipseen\",\n          \"defaultValue\": {\n            \"value\": \"TipseenColor.PRIMARY\",\n            \"computed\": true\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/Tipseen/TipseenBasicContent.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"TipseenBasicContent\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"title\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"titleClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ElementContent | ElementContent[]\",\n            \"elements\": [\n              {\n                \"name\": \"union\",\n                \"raw\": \"ReactNode | ReactNode[]\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactNode\"\n                  },\n                  {\n                    \"name\": \"Array\",\n                    \"elements\": [\n                      {\n                        \"name\": \"ReactNode\"\n                      }\n                    ],\n                    \"raw\": \"ReactNode[]\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"union\",\n                    \"raw\": \"ReactNode | ReactNode[]\",\n                    \"elements\": [\n                      {\n                        \"name\": \"ReactNode\"\n                      },\n                      {\n                        \"name\": \"Array\",\n                        \"elements\": [\n                          {\n                            \"name\": \"ReactNode\"\n                          }\n                        ],\n                        \"raw\": \"ReactNode[]\"\n                      }\n                    ]\n                  }\n                ],\n                \"raw\": \"ElementContent[]\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/Steps/StepsNumbersHeader.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"StepsNumbersHeader\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"activeStepIndex\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"stepsCount\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"color\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"StepsColor\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Tipseen/TipseenImage.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"TipseenImage\",\n      \"props\": {\n        \"src\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | undefined\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"undefined\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"alt\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"tipseenMediaClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Toast/ToastHelpers.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"getIcon\"\n    }\n  ],\n  \"src/components/Typography/Typography.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Typography\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"getTestId(ComponentDefaultTestId.TEXT, id)\",\n            \"computed\": true\n          }\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"element\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"The element tag of the text component\",\n          \"defaultValue\": {\n            \"value\": \"\\\"span\\\"\",\n            \"computed\": false\n          }\n        },\n        \"children\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ReactNode | ReactNode[]\",\n            \"elements\": [\n              {\n                \"name\": \"ReactNode\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactNode\"\n                  }\n                ],\n                \"raw\": \"ReactNode[]\"\n              }\n            ]\n          },\n          \"description\": \"The textual content\"\n        },\n        \"color\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"TypographyColor\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"TypographyColor.PRIMARY\",\n            \"computed\": true\n          }\n        },\n        \"align\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"TypographyAlign\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"TypographyAlign.START\",\n            \"computed\": true\n          }\n        },\n        \"ellipsis\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"When the text is too long, cut the end of the text and display instead of it three dots (...)\",\n          \"defaultValue\": {\n            \"value\": \"true\",\n            \"computed\": false\n          }\n        },\n        \"maxLines\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"Use this prop combined with the boolean ellipsis prop for truncate the text and add an ellipsis after a certain number of lines\",\n          \"defaultValue\": {\n            \"value\": \"1\",\n            \"computed\": false\n          }\n        },\n        \"tooltipProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"intersection\",\n            \"raw\": \"TooltipBaseProps & (TooltipWithChildrenProps | TooltipWithoutChildrenProps)\",\n            \"elements\": [\n              {\n                \"name\": \"TooltipBaseProps\"\n              },\n              {\n                \"name\": \"unknown\"\n              }\n            ]\n          },\n          \"description\": \"All props are passed to the tooltip displayed when hovering over the text. By default, the tooltip will display when text contains an ellipsis and will show the full text\"\n        },\n        \"withoutTooltip\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Hide tooltip when hovering the text, by default the tooltip swill display when text contains an ellipsis\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        }\n      },\n      \"composes\": [\"HTMLAttributes\"]\n    }\n  ],\n  \"src/components/Toast/Toast.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Toast\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"actions\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Array\",\n            \"elements\": [\n              {\n                \"name\": \"signature\",\n                \"type\": \"object\",\n                \"raw\": \"{\\n  type: ToastActionType;\\n  content?: string;\\n  text?: string;\\n  href?: string;\\n}\",\n                \"signature\": {\n                  \"properties\": [\n                    {\n                      \"key\": \"type\",\n                      \"value\": {\n                        \"name\": \"ToastActionType\",\n                        \"required\": true\n                      }\n                    },\n                    {\n                      \"key\": \"content\",\n                      \"value\": {\n                        \"name\": \"string\",\n                        \"required\": false\n                      }\n                    },\n                    {\n                      \"key\": \"text\",\n                      \"value\": {\n                        \"name\": \"string\",\n                        \"required\": false\n                      }\n                    },\n                    {\n                      \"key\": \"href\",\n                      \"value\": {\n                        \"name\": \"string\",\n                        \"required\": false\n                      }\n                    }\n                  ]\n                }\n              }\n            ],\n            \"raw\": \"ToastAction[]\"\n          },\n          \"description\": \"\"\n        },\n        \"open\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"If true, Toast is open (visible)\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"loading\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"type\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ToastType\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"ToastType.NORMAL\",\n            \"computed\": true\n          }\n        },\n        \"icon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"Possible to override the default icon\"\n        },\n        \"hideIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"If true, won't show the icon\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"action\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"JSX.Element\"\n          },\n          \"description\": \"The action to display\"\n        },\n        \"closeable\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"If false, won't show the close button\",\n          \"defaultValue\": {\n            \"value\": \"true\",\n            \"computed\": false\n          }\n        },\n        \"onClose\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"autoHideDuration\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"The number of milliseconds to wait before\\nautomatically closing the Toast\\n(0 or null cancels this behaviour)\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ReactElement | ReactElement[] | string\",\n            \"elements\": [\n              {\n                \"name\": \"ReactElement\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactElement\"\n                  }\n                ],\n                \"raw\": \"ReactElement[]\"\n              },\n              {\n                \"name\": \"string\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"closeButtonAriaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"Close\\\"\",\n            \"computed\": false\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/Tooltip/Tooltip.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [\n        {\n          \"name\": \"getContainer\",\n          \"docblock\": null,\n          \"modifiers\": [],\n          \"params\": [],\n          \"returns\": null\n        },\n        {\n          \"name\": \"renderTooltipContent\",\n          \"docblock\": null,\n          \"modifiers\": [],\n          \"params\": [],\n          \"returns\": null\n        },\n        {\n          \"name\": \"onTooltipShow\",\n          \"docblock\": null,\n          \"modifiers\": [],\n          \"params\": [],\n          \"returns\": null\n        },\n        {\n          \"name\": \"onTooltipHide\",\n          \"docblock\": null,\n          \"modifiers\": [],\n          \"params\": [],\n          \"returns\": null\n        },\n        {\n          \"name\": \"getTimeSinceLastTooltip\",\n          \"docblock\": null,\n          \"modifiers\": [],\n          \"params\": [],\n          \"returns\": null\n        },\n        {\n          \"name\": \"getShowDelay\",\n          \"docblock\": null,\n          \"modifiers\": [],\n          \"params\": [],\n          \"returns\": null\n        }\n      ],\n      \"displayName\": \"Tooltip\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"content\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ReactNode | ReactNode[]\",\n            \"elements\": [\n              {\n                \"name\": \"ReactNode\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactNode\"\n                  }\n                ],\n                \"raw\": \"ReactNode[]\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"style\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"CSSProperties\"\n          },\n          \"description\": \"\"\n        },\n        \"arrowPosition\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"TooltipArrowPosition\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"TooltipArrowPosition.CENTER\",\n            \"computed\": true\n          }\n        },\n        \"arrowClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Class name for a tooltip's arrow\"\n        },\n        \"paddingSize\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"keyof typeof BASE_SIZES_WITH_NONE\",\n            \"elements\": [\n              {\n                \"name\": \"literal\",\n                \"value\": \"NONE\"\n              },\n              {\n                \"name\": \"literal\",\n                \"value\": \"SMALL\"\n              },\n              {\n                \"name\": \"literal\",\n                \"value\": \"MEDIUM\"\n              },\n              {\n                \"name\": \"literal\",\n                \"value\": \"LARGE\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"moveBy\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"object\",\n            \"raw\": \"{\\n  main?: number;\\n  secondary?: number;\\n}\",\n            \"signature\": {\n              \"properties\": [\n                {\n                  \"key\": \"main\",\n                  \"value\": {\n                    \"name\": \"number\",\n                    \"required\": false\n                  }\n                },\n                {\n                  \"key\": \"secondary\",\n                  \"value\": {\n                    \"name\": \"number\",\n                    \"required\": false\n                  }\n                }\n              ]\n            }\n          },\n          \"description\": \"How much to move the dialog in relative to children\\nmain is the axis in which the position is aligned to\\nsecondary is the vertical axes to the position\",\n          \"defaultValue\": {\n            \"value\": \"{ main: 4, secondary: 0 }\",\n            \"computed\": false\n          }\n        },\n        \"theme\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"TooltipTheme\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"TooltipTheme.Dark\",\n            \"computed\": true\n          }\n        },\n        \"justify\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"JustifyType\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"Tooltip.justifyTypes.CENTER\",\n            \"computed\": true\n          }\n        },\n        \"getContainer\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => HTMLElement\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"HTMLElement\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"hideDelay\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"how much delay should the Dialog wait until it should trigger the hide in MS\",\n          \"defaultValue\": {\n            \"value\": \"0\",\n            \"computed\": false\n          }\n        },\n        \"showDelay\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"how much delay should the Dialog wait until it should trigger the show in MS\",\n          \"defaultValue\": {\n            \"value\": \"300\",\n            \"computed\": false\n          }\n        },\n        \"disableDialogSlide\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"true\",\n            \"computed\": false\n          }\n        },\n        \"animationType\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AnimationType\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"AnimationType.EXPAND\",\n            \"computed\": true\n          }\n        },\n        \"withoutDialog\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"containerSelector\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"the container selector in which to append the dialog\\nfor examples: \\\"body\\\" , \\\".my-class\\\", \\\"#my-id\\\"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"#tooltips-container\\\"\",\n            \"computed\": false\n          }\n        },\n        \"immediateShowDelay\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"With which delay tooltip is going to be shown\"\n        },\n        \"tip\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"when false, the arrow of the tooltip is hidden\",\n          \"defaultValue\": {\n            \"value\": \"true\",\n            \"computed\": false\n          }\n        },\n        \"shouldShowOnMount\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Show the Dialog when the children is mounting\"\n        },\n        \"hideWhenReferenceHidden\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"onTooltipHide\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onTooltipShow\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"modifiers\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Array\",\n            \"elements\": [\n              {\n                \"name\": \"Modifier\",\n                \"elements\": [\n                  {\n                    \"name\": \"unknown\"\n                  }\n                ],\n                \"raw\": \"Modifier<unknown>\"\n              }\n            ],\n            \"raw\": \"Array<Modifier<unknown>>\"\n          },\n          \"description\": \"PopperJS Modifiers type\\nhttps://popper.js.org/docs/v2/modifiers/\",\n          \"defaultValue\": {\n            \"value\": \"new Array<Modifier<unknown>>()\",\n            \"computed\": false\n          }\n        },\n        \"position\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"DialogPosition\"\n          },\n          \"description\": \"Where the tooltip should be in reference to the children: Top, Left, Right, Bottom ...\",\n          \"defaultValue\": {\n            \"value\": \"Tooltip.positions.TOP\",\n            \"computed\": true\n          }\n        },\n        \"showTrigger\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"HideShowEvent | Array<HideShowEvent>\",\n            \"elements\": [\n              {\n                \"name\": \"HideShowEvent\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"HideShowEvent\"\n                  }\n                ],\n                \"raw\": \"Array<HideShowEvent>\"\n              }\n            ]\n          },\n          \"description\": \"an array of hide/show trigger - Tooltip.hideShowTriggers\",\n          \"defaultValue\": {\n            \"value\": \"Tooltip.hideShowTriggers.MOUSE_ENTER\",\n            \"computed\": true\n          }\n        },\n        \"hideTrigger\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"HideShowEvent | Array<HideShowEvent>\",\n            \"elements\": [\n              {\n                \"name\": \"HideShowEvent\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"HideShowEvent\"\n                  }\n                ],\n                \"raw\": \"Array<HideShowEvent>\"\n              }\n            ]\n          },\n          \"description\": \"an array of hide/show trigger - Tooltip.hideShowTriggers\",\n          \"defaultValue\": {\n            \"value\": \"Tooltip.hideShowTriggers.MOUSE_LEAVE\",\n            \"computed\": true\n          }\n        },\n        \"showOnDialogEnter\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"If true, prevents open Tooltip from closing on mouseEnter and closes Tooltip, when mouse leaves it\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"referenceWrapperClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"A Classname to be added to <spam> element which wraps the children\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"addKeyboardHideShowTriggersByDefault\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Treats keyboard focus/blur events as mouse-enter/mouse-leave events\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"open\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"set the state of the tooltip - open/close - controlled component\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"zIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"Overwrites z-index of the tooltip\"\n        },\n        \"withMaxWidth\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Limit tooltip to 240px\"\n        }\n      }\n    }\n  ],\n  \"src/components/Toggle/MockToggle.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"MockToggle\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"areLabelsHidden\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"checked\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"offOverrideText\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"onOverrideText\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"selectedClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"disabled\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Toggle/Toggle.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Toggle\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"componentClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"@deprecated - use className instead\"\n        },\n        \"toggleSelectedClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"ClassName to override styles of selected toggle\"\n        },\n        \"isDefaultSelected\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"true\",\n            \"computed\": false\n          }\n        },\n        \"isSelected\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"onChange\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(value: boolean) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"boolean\"\n                  },\n                  \"name\": \"value\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function noop() {\\n  // No operation performed.\\n}\",\n            \"computed\": false\n          }\n        },\n        \"value\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"name\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"isDisabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"@deprecated - use disabled instead\"\n        },\n        \"disabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"areLabelsHidden\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"onOverrideText\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"On\\\"\",\n            \"computed\": false\n          }\n        },\n        \"offOverrideText\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"Off\\\"\",\n            \"computed\": false\n          }\n        },\n        \"ariaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"ariaControls\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/VirtualizedList/VirtualizedList.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"VirtualizedList\",\n      \"props\": {\n        \"scrollableClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"class name to add to the component scrollable container\"\n        },\n        \"layout\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Layout\"\n          },\n          \"description\": \"Layout/orientation of the list.\\nAcceptable values are:\\n- \\\"vertical\\\" (default) - Up/down scrolling.\\n- \\\"horizontal\\\" - Left/right scrolling.\",\n          \"defaultValue\": {\n            \"value\": \"\\\"vertical\\\"\",\n            \"computed\": false\n          }\n        },\n        \"items\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Array\",\n            \"elements\": [\n              {\n                \"name\": \"signature\",\n                \"type\": \"object\",\n                \"raw\": \"{\\n  value?: string | Record<string, unknown>;\\n  height?: number;\\n  width?: number;\\n  id?: string;\\n  offsetTop?: number;\\n}\",\n                \"signature\": {\n                  \"properties\": [\n                    {\n                      \"key\": \"value\",\n                      \"value\": {\n                        \"name\": \"union\",\n                        \"raw\": \"string | Record<string, unknown>\",\n                        \"elements\": [\n                          {\n                            \"name\": \"string\"\n                          },\n                          {\n                            \"name\": \"Record\",\n                            \"elements\": [\n                              {\n                                \"name\": \"string\"\n                              },\n                              {\n                                \"name\": \"unknown\"\n                              }\n                            ],\n                            \"raw\": \"Record<string, unknown>\"\n                          }\n                        ],\n                        \"required\": false\n                      }\n                    },\n                    {\n                      \"key\": \"height\",\n                      \"value\": {\n                        \"name\": \"number\",\n                        \"required\": false\n                      }\n                    },\n                    {\n                      \"key\": \"width\",\n                      \"value\": {\n                        \"name\": \"number\",\n                        \"required\": false\n                      }\n                    },\n                    {\n                      \"key\": \"id\",\n                      \"value\": {\n                        \"name\": \"string\",\n                        \"required\": false\n                      }\n                    },\n                    {\n                      \"key\": \"offsetTop\",\n                      \"value\": {\n                        \"name\": \"number\",\n                        \"required\": false\n                      }\n                    }\n                  ]\n                }\n              }\n            ],\n            \"raw\": \"VirtualizedListItem[]\"\n          },\n          \"description\": \"A list of items to be rendered\",\n          \"defaultValue\": {\n            \"value\": \"[]\",\n            \"computed\": false\n          }\n        },\n        \"itemRenderer\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(item: VirtualizedListItem, index: number, style: CSSProperties) => ReactElement | JSX.Element\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"signature\",\n                    \"type\": \"object\",\n                    \"raw\": \"{\\n  value?: string | Record<string, unknown>;\\n  height?: number;\\n  width?: number;\\n  id?: string;\\n  offsetTop?: number;\\n}\",\n                    \"signature\": {\n                      \"properties\": [\n                        {\n                          \"key\": \"value\",\n                          \"value\": {\n                            \"name\": \"union\",\n                            \"raw\": \"string | Record<string, unknown>\",\n                            \"elements\": [\n                              {\n                                \"name\": \"string\"\n                              },\n                              {\n                                \"name\": \"Record\",\n                                \"elements\": [\n                                  {\n                                    \"name\": \"string\"\n                                  },\n                                  {\n                                    \"name\": \"unknown\"\n                                  }\n                                ],\n                                \"raw\": \"Record<string, unknown>\"\n                              }\n                            ],\n                            \"required\": false\n                          }\n                        },\n                        {\n                          \"key\": \"height\",\n                          \"value\": {\n                            \"name\": \"number\",\n                            \"required\": false\n                          }\n                        },\n                        {\n                          \"key\": \"width\",\n                          \"value\": {\n                            \"name\": \"number\",\n                            \"required\": false\n                          }\n                        },\n                        {\n                          \"key\": \"id\",\n                          \"value\": {\n                            \"name\": \"string\",\n                            \"required\": false\n                          }\n                        },\n                        {\n                          \"key\": \"offsetTop\",\n                          \"value\": {\n                            \"name\": \"number\",\n                            \"required\": false\n                          }\n                        }\n                      ]\n                    }\n                  },\n                  \"name\": \"item\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"index\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"CSSProperties\"\n                  },\n                  \"name\": \"style\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"union\",\n                \"raw\": \"ReactElement | JSX.Element\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactElement\"\n                  },\n                  {\n                    \"name\": \"JSX.Element\"\n                  }\n                ]\n              }\n            }\n          },\n          \"description\": \"Will return the element which represent an item in the virtualized list.\\nReturns `JSX.Element`\\n@param item - item data\\n@param _index - item index\\n@param style - item style, must be injected to the item element wrapper for correct presentation of the item\",\n          \"defaultValue\": {\n            \"value\": \"(item: VirtualizedListItem, _index: number, _style: CSSProperties) => item\",\n            \"computed\": false\n          }\n        },\n        \"getItemHeight\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(item: VirtualizedListItem, index: number) => number\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"signature\",\n                    \"type\": \"object\",\n                    \"raw\": \"{\\n  value?: string | Record<string, unknown>;\\n  height?: number;\\n  width?: number;\\n  id?: string;\\n  offsetTop?: number;\\n}\",\n                    \"signature\": {\n                      \"properties\": [\n                        {\n                          \"key\": \"value\",\n                          \"value\": {\n                            \"name\": \"union\",\n                            \"raw\": \"string | Record<string, unknown>\",\n                            \"elements\": [\n                              {\n                                \"name\": \"string\"\n                              },\n                              {\n                                \"name\": \"Record\",\n                                \"elements\": [\n                                  {\n                                    \"name\": \"string\"\n                                  },\n                                  {\n                                    \"name\": \"unknown\"\n                                  }\n                                ],\n                                \"raw\": \"Record<string, unknown>\"\n                              }\n                            ],\n                            \"required\": false\n                          }\n                        },\n                        {\n                          \"key\": \"height\",\n                          \"value\": {\n                            \"name\": \"number\",\n                            \"required\": false\n                          }\n                        },\n                        {\n                          \"key\": \"width\",\n                          \"value\": {\n                            \"name\": \"number\",\n                            \"required\": false\n                          }\n                        },\n                        {\n                          \"key\": \"id\",\n                          \"value\": {\n                            \"name\": \"string\",\n                            \"required\": false\n                          }\n                        },\n                        {\n                          \"key\": \"offsetTop\",\n                          \"value\": {\n                            \"name\": \"number\",\n                            \"required\": false\n                          }\n                        }\n                      ]\n                    }\n                  },\n                  \"name\": \"item\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"index\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"number\"\n              }\n            }\n          },\n          \"description\": \"Deprecated - use getItemSize\\nin order to calculate the number of items to render, the component needs the height of the items\\nreturn `number`\",\n          \"defaultValue\": {\n            \"value\": \"(item: VirtualizedListItem, _index: number) => item.height\",\n            \"computed\": false\n          }\n        },\n        \"getItemSize\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(item: VirtualizedListItem, index: number) => number\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"signature\",\n                    \"type\": \"object\",\n                    \"raw\": \"{\\n  value?: string | Record<string, unknown>;\\n  height?: number;\\n  width?: number;\\n  id?: string;\\n  offsetTop?: number;\\n}\",\n                    \"signature\": {\n                      \"properties\": [\n                        {\n                          \"key\": \"value\",\n                          \"value\": {\n                            \"name\": \"union\",\n                            \"raw\": \"string | Record<string, unknown>\",\n                            \"elements\": [\n                              {\n                                \"name\": \"string\"\n                              },\n                              {\n                                \"name\": \"Record\",\n                                \"elements\": [\n                                  {\n                                    \"name\": \"string\"\n                                  },\n                                  {\n                                    \"name\": \"unknown\"\n                                  }\n                                ],\n                                \"raw\": \"Record<string, unknown>\"\n                              }\n                            ],\n                            \"required\": false\n                          }\n                        },\n                        {\n                          \"key\": \"height\",\n                          \"value\": {\n                            \"name\": \"number\",\n                            \"required\": false\n                          }\n                        },\n                        {\n                          \"key\": \"width\",\n                          \"value\": {\n                            \"name\": \"number\",\n                            \"required\": false\n                          }\n                        },\n                        {\n                          \"key\": \"id\",\n                          \"value\": {\n                            \"name\": \"string\",\n                            \"required\": false\n                          }\n                        },\n                        {\n                          \"key\": \"offsetTop\",\n                          \"value\": {\n                            \"name\": \"number\",\n                            \"required\": false\n                          }\n                        }\n                      ]\n                    }\n                  },\n                  \"name\": \"item\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"index\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"number\"\n              }\n            }\n          },\n          \"description\": \"in order to calculate the number of items to render, the component needs the width/height of the items (according to layout)\\nreturn `number`\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"getItemId\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(item: VirtualizedListItem, index: number) => string\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"signature\",\n                    \"type\": \"object\",\n                    \"raw\": \"{\\n  value?: string | Record<string, unknown>;\\n  height?: number;\\n  width?: number;\\n  id?: string;\\n  offsetTop?: number;\\n}\",\n                    \"signature\": {\n                      \"properties\": [\n                        {\n                          \"key\": \"value\",\n                          \"value\": {\n                            \"name\": \"union\",\n                            \"raw\": \"string | Record<string, unknown>\",\n                            \"elements\": [\n                              {\n                                \"name\": \"string\"\n                              },\n                              {\n                                \"name\": \"Record\",\n                                \"elements\": [\n                                  {\n                                    \"name\": \"string\"\n                                  },\n                                  {\n                                    \"name\": \"unknown\"\n                                  }\n                                ],\n                                \"raw\": \"Record<string, unknown>\"\n                              }\n                            ],\n                            \"required\": false\n                          }\n                        },\n                        {\n                          \"key\": \"height\",\n                          \"value\": {\n                            \"name\": \"number\",\n                            \"required\": false\n                          }\n                        },\n                        {\n                          \"key\": \"width\",\n                          \"value\": {\n                            \"name\": \"number\",\n                            \"required\": false\n                          }\n                        },\n                        {\n                          \"key\": \"id\",\n                          \"value\": {\n                            \"name\": \"string\",\n                            \"required\": false\n                          }\n                        },\n                        {\n                          \"key\": \"offsetTop\",\n                          \"value\": {\n                            \"name\": \"number\",\n                            \"required\": false\n                          }\n                        }\n                      ]\n                    }\n                  },\n                  \"name\": \"item\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"index\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"string\"\n              }\n            }\n          },\n          \"description\": \"returns Id of an items\\nreturns `string`\",\n          \"defaultValue\": {\n            \"value\": \"(item: VirtualizedListItem, _index: number) => item.id\",\n            \"computed\": false\n          }\n        },\n        \"onScrollToFinished\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"callback to be called when the scroll is finished\",\n          \"defaultValue\": {\n            \"value\": \"function noop() {\\n  // No operation performed.\\n}\",\n            \"computed\": false\n          }\n        },\n        \"overscanCount\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"number of items to render (below/above the fold)\",\n          \"defaultValue\": {\n            \"value\": \"0\",\n            \"computed\": false\n          }\n        },\n        \"scrollDuration\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"the speed of the scroll (in ms)\",\n          \"defaultValue\": {\n            \"value\": \"200\",\n            \"computed\": false\n          }\n        },\n        \"onItemsRendered\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"({\\n  firstItemId,\\n  secondItemId,\\n  lastItemId,\\n  centerItemId,\\n  firstItemOffsetEnd,\\n  currentOffsetTop\\n}: {\\n  firstItemId: string;\\n  secondItemId: string;\\n  lastItemId: string;\\n  centerItemId: string;\\n  firstItemOffsetEnd: number;\\n  currentOffsetTop: number;\\n}) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"signature\",\n                    \"type\": \"object\",\n                    \"raw\": \"{\\n  firstItemId: string;\\n  secondItemId: string;\\n  lastItemId: string;\\n  centerItemId: string;\\n  firstItemOffsetEnd: number;\\n  currentOffsetTop: number;\\n}\",\n                    \"signature\": {\n                      \"properties\": [\n                        {\n                          \"key\": \"firstItemId\",\n                          \"value\": {\n                            \"name\": \"string\",\n                            \"required\": true\n                          }\n                        },\n                        {\n                          \"key\": \"secondItemId\",\n                          \"value\": {\n                            \"name\": \"string\",\n                            \"required\": true\n                          }\n                        },\n                        {\n                          \"key\": \"lastItemId\",\n                          \"value\": {\n                            \"name\": \"string\",\n                            \"required\": true\n                          }\n                        },\n                        {\n                          \"key\": \"centerItemId\",\n                          \"value\": {\n                            \"name\": \"string\",\n                            \"required\": true\n                          }\n                        },\n                        {\n                          \"key\": \"firstItemOffsetEnd\",\n                          \"value\": {\n                            \"name\": \"number\",\n                            \"required\": true\n                          }\n                        },\n                        {\n                          \"key\": \"currentOffsetTop\",\n                          \"value\": {\n                            \"name\": \"number\",\n                            \"required\": true\n                          }\n                        }\n                      ]\n                    }\n                  },\n                  \"name\": \"\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"a callback that is being called when the items are rendered\"\n        },\n        \"onItemsRenderedThrottleMs\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"200\",\n            \"computed\": false\n          }\n        },\n        \"onSizeUpdate\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(width: number, height: number) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"width\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"height\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"when the list size changes - `=> (width, height)`\",\n          \"defaultValue\": {\n            \"value\": \"function noop() {\\n  // No operation performed.\\n}\",\n            \"computed\": false\n          }\n        },\n        \"onVerticalScrollbarVisiblityChange\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(value: boolean) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"boolean\"\n                  },\n                  \"name\": \"value\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"Deprecated - use onLayoutDirectionScrollbarVisibilityChange\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"onLayoutDirectionScrollbarVisibilityChange\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(value: boolean) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"boolean\"\n                  },\n                  \"name\": \"value\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"Callback - called when the vertical/horizontal (depends on layout) scrollbar visibility changed\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"role\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"style\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"CSSProperties\"\n          },\n          \"description\": \"Custom style to pass to the component\"\n        },\n        \"scrollToId\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"index of the item to scroll to\"\n        },\n        \"virtualListRef\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ForwardedRef\",\n            \"elements\": [\n              {\n                \"name\": \"HTMLElement\"\n              }\n            ],\n            \"raw\": \"ForwardedRef<HTMLElement>\"\n          },\n          \"description\": \"\"\n        },\n        \"onScroll\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(horizontalScrollDirection: ScrollDirection, scrollTop: number, scrollUpdateWasRequested: boolean) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ScrollDirection\"\n                  },\n                  \"name\": \"horizontalScrollDirection\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"scrollTop\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"boolean\"\n                  },\n                  \"name\": \"scrollUpdateWasRequested\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        }\n      },\n      \"composes\": [\"VibeComponentProps\"]\n    }\n  ],\n  \"src/components/Toggle/ToggleText.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"ToggleText\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"children\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"disabled\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/ColorPicker/ColorPicker.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"ColorPicker\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"value\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ColorPickerValueOnly | ColorPickerArrayValueOnly\",\n            \"elements\": [\n              {\n                \"name\": \"union\",\n                \"raw\": \"CONTENT_COLORS_VALUES | string\",\n                \"elements\": [\n                  {\n                    \"name\": \"unknown[number]\",\n                    \"raw\": \"(typeof contentColors)[number]\"\n                  },\n                  {\n                    \"name\": \"string\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"union\",\n                \"raw\": \"CONTENT_COLORS_VALUES[] | string[]\",\n                \"elements\": [\n                  {\n                    \"name\": \"Array\",\n                    \"elements\": [\n                      {\n                        \"name\": \"unknown[number]\",\n                        \"raw\": \"(typeof contentColors)[number]\"\n                      }\n                    ],\n                    \"raw\": \"CONTENT_COLORS_VALUES[]\"\n                  },\n                  {\n                    \"name\": \"Array\",\n                    \"elements\": [\n                      {\n                        \"name\": \"string\"\n                      }\n                    ],\n                    \"raw\": \"string[]\"\n                  }\n                ]\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"onSave\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(value: ColorPickerArrayValueOnly) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"union\",\n                    \"raw\": \"CONTENT_COLORS_VALUES[] | string[]\",\n                    \"elements\": [\n                      {\n                        \"name\": \"Array\",\n                        \"elements\": [\n                          {\n                            \"name\": \"unknown[number]\",\n                            \"raw\": \"(typeof contentColors)[number]\"\n                          }\n                        ],\n                        \"raw\": \"CONTENT_COLORS_VALUES[]\"\n                      },\n                      {\n                        \"name\": \"Array\",\n                        \"elements\": [\n                          {\n                            \"name\": \"string\"\n                          }\n                        ],\n                        \"raw\": \"string[]\"\n                      }\n                    ]\n                  },\n                  \"name\": \"value\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"ColorIndicatorIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"SelectedIndicatorIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"NoColorIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"Hide color icon\",\n          \"defaultValue\": {\n            \"value\": \"({size, ...props}) => (\\n  <svg viewBox=\\\"0 0 20 20\\\" fill=\\\"currentColor\\\" width={ size || \\\"20\\\" } height={ size || \\\"20\\\" } {...props}>\\n    <path d=\\\"M9.99869 2.45479C10.29 2.1796 10.7462 2.18205 11.0346 2.46035 11.8801 3.27645 12.629 4.18707 13.2665 5.17427 13.4912 5.52224 13.3913 5.98648 13.0433 6.21118 12.6953 6.43589 12.2311 6.33596 12.0064 5.98799 11.5642 5.30318 11.0625 4.65922 10.5075 4.06347 8.55502 6.10494 6.79968 9.10384 6.79968 12.2306 6.79968 12.6448 6.4639 12.9806 6.04968 12.9806 5.63547 12.9806 5.29968 12.6448 5.29968 12.2306 5.29968 8.25797 7.68621 4.63918 9.99869 2.45479zM14.0817 8.2783C14.4692 8.13179 14.902 8.3271 15.0485 8.71454 15.4712 9.83227 15.7016 11.0135 15.7298 12.2081 15.7548 12.9019 15.6367 13.5934 15.3829 14.2396 15.1285 14.8874 14.7432 15.4758 14.251 15.9679 13.7589 16.4601 13.1705 16.8454 12.5227 17.0998 11.881 17.3518 11.1947 17.47 10.5059 17.4472 9.21585 17.4632 7.96422 17.0068 6.98717 16.1636 6.67359 15.893 6.63877 15.4194 6.9094 15.1058 7.18003 14.7922 7.65362 14.7574 7.9672 15.028 8.67056 15.635 9.57259 15.9622 10.5015 15.9471 10.5148 15.9469 10.5281 15.9471 10.5414 15.9476 11.0307 15.9657 11.5186 15.8826 11.9744 15.7036 12.4302 15.5246 12.8441 15.2535 13.1904 14.9073 13.5366 14.561 13.8077 14.1471 13.9867 13.6913 14.1657 13.2355 14.2487 12.7477 14.2306 12.2583L14.2303 12.248 14.2303 12.248C14.2065 11.2211 14.0088 10.2058 13.6455 9.2451 13.499 8.85766 13.6943 8.42481 14.0817 8.2783zM17.3142 3.38282C17.6071 3.67571 17.6071 4.15058 17.3142 4.44348L4.53033 17.2274C4.23744 17.5203 3.76256 17.5203 3.46967 17.2274 3.17678 16.9345 3.17678 16.4596 3.46967 16.1667L16.2536 3.38282C16.5465 3.08992 17.0214 3.08992 17.3142 3.38282z\\\"\\n      fill=\\\"currentColor\\\" fillRule=\\\"evenodd\\\" clipRule=\\\"evenodd\\\" />\\n  </svg>\\n)\",\n            \"computed\": false\n          }\n        },\n        \"colorStyle\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ColorStyle\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"ColorStyle.REGULAR\",\n            \"computed\": true\n          }\n        },\n        \"noColorText\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"shouldRenderIndicatorWithoutBackground\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"isBlackListMode\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"true\",\n            \"computed\": false\n          }\n        },\n        \"colorsList\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"CONTENT_COLORS_VALUES[] | string[]\",\n            \"elements\": [\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"unknown[number]\",\n                    \"raw\": \"(typeof contentColors)[number]\"\n                  }\n                ],\n                \"raw\": \"CONTENT_COLORS_VALUES[]\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"string\"\n                  }\n                ],\n                \"raw\": \"string[]\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"[]\",\n            \"computed\": false\n          }\n        },\n        \"isMultiselect\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"colorSize\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"BaseSizes\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"BaseSizes.MEDIUM\",\n            \"computed\": true\n          }\n        },\n        \"numberOfColorsInLine\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"5\",\n            \"computed\": false\n          }\n        },\n        \"focusOnMount\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"colorShape\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ColorShapes\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"ColorShapes.SQUARE\",\n            \"computed\": true\n          }\n        },\n        \"forceUseRawColorList\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Used to force the component render the colorList prop as is. Usually, this flag should not be used. It's intended only for edge cases.\\nUsually, only \\\"monday colors\\\" will be rendered (unless blacklist mode is used). This flag will override this behavior.\"\n        },\n        \"showColorNameTooltip\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Used to enable color name tooltip on each color in the component.\\nWhen \\\"tooltipContentByColor\\\" is supplied, it will override the color name tooltip.\"\n        }\n      }\n    }\n  ],\n  \"src/components/Badge/Indicator/Indicator.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Indicator\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"color\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"IndicatorColor\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"IndicatorColor.NOTIFICATION\",\n            \"computed\": true\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/Accordion/AccordionItem/AccordionItem.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"AccordionItem\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"title\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ReactNode | ReactNode[]\",\n            \"elements\": [\n              {\n                \"name\": \"ReactNode\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactNode\"\n                  }\n                ],\n                \"raw\": \"ReactNode[]\"\n              }\n            ]\n          },\n          \"description\": \"Header title\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ReactNode | ReactNode[]\",\n            \"elements\": [\n              {\n                \"name\": \"ReactNode\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactNode\"\n                  }\n                ],\n                \"raw\": \"ReactNode[]\"\n              }\n            ]\n          },\n          \"description\": \"The value of the expandable section\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"iconSize\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"number | string\",\n            \"elements\": [\n              {\n                \"name\": \"number\"\n              },\n              {\n                \"name\": \"string\"\n              }\n            ]\n          },\n          \"description\": \"The expand icon font size\",\n          \"defaultValue\": {\n            \"value\": \"24\",\n            \"computed\": false\n          }\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"On click callback\"\n        },\n        \"open\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"onClickAccordionCallback\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"hideBorder\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"headerClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"contentClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"expandCollapseComponentClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/AlertBanner/AlertBannerLink/AlertBannerLink.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"AlertBannerLink\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"componentClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"@deprecated - use className instead\"\n        },\n        \"textClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Class name for overriding link text styles\"\n        },\n        \"href\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Specifies the location (URL) of the external resource\"\n        },\n        \"text\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"The link text\"\n        },\n        \"rel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Defines the relationship between a linked resource and the current document\"\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"onClick function - MouseEvent\"\n        },\n        \"target\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"LinkTarget\"\n          },\n          \"description\": \"Specifies where to open the linked document\"\n        },\n        \"ariaLabelDescription\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Aria label description\"\n        },\n        \"ariaDescribedby\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Identifies the element (or elements) that describes the element on which the attribute is set.\"\n        },\n        \"ariaLabeledBy\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"element id to describe the counter accordingly\"\n        },\n        \"icon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"Icon to add to the link element\"\n        },\n        \"iconPosition\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"IconPosition\"\n          },\n          \"description\": \"the position of the icon in relation to the etext\"\n        },\n        \"disableNavigation\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"disable navigation\"\n        },\n        \"inheritFontSize\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"inherit text size\"\n        },\n        \"inlineText\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"if the link is in part of other text content\"\n        },\n        \"marginLeft\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/AlertBanner/AlertBannerButton/AlertBannerButton.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"AlertBannerButton\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Custom class names to pass to the component\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"id to pass to the button\"\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactReactNode\",\n            \"raw\": \"React.ReactNode\"\n          },\n          \"description\": \"\"\n        },\n        \"activeButtonClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"kind\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ButtonType\"\n          },\n          \"description\": \"The button's kind\"\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent<HTMLButtonElement>) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent<HTMLButtonElement>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"HTMLButtonElement\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"Callback function to run when the button is clicked\"\n        },\n        \"onMouseDown\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent<HTMLButtonElement>) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent<HTMLButtonElement>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"HTMLButtonElement\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"blurOnMouseUp\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Blur on button click\"\n        },\n        \"name\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Name of the button - for form submit usages\"\n        },\n        \"size\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"(typeof SIZES)[keyof typeof SIZES] | keyof typeof OLD_BUTTON_SIZES\",\n            \"elements\": [\n              {\n                \"name\": \"unknown[union]\",\n                \"raw\": \"(typeof SIZES)[keyof typeof SIZES]\"\n              },\n              {\n                \"name\": \"union\",\n                \"raw\": \"keyof typeof OLD_BUTTON_SIZES\",\n                \"elements\": [\n                  {\n                    \"name\": \"literal\",\n                    \"value\": \"sm\"\n                  },\n                  {\n                    \"name\": \"literal\",\n                    \"value\": \"md\"\n                  },\n                  {\n                    \"name\": \"literal\",\n                    \"value\": \"lg\"\n                  }\n                ]\n              }\n            ]\n          },\n          \"description\": \"The button's size\"\n        },\n        \"color\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ButtonColor\"\n          },\n          \"description\": \"The button's color\"\n        },\n        \"type\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ButtonInputType\"\n          },\n          \"description\": \"The button's type\"\n        },\n        \"disabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Whether the button should be disabled or not\"\n        },\n        \"rightIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"Icon to place on the right\"\n        },\n        \"leftIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"Icon to place on the left\"\n        },\n        \"success\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"the success props are used when you have async action and wants to display a success message\"\n        },\n        \"successIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"Success icon name\"\n        },\n        \"successText\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Success text\"\n        },\n        \"loading\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"loading boolean which switches the text to a loader\"\n        },\n        \"style\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactCSSProperties\",\n            \"raw\": \"React.CSSProperties\"\n          },\n          \"description\": \"\"\n        },\n        \"active\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"displays the active state\"\n        },\n        \"marginRight\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"adds 8px margin to the right\"\n        },\n        \"marginLeft\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"adds 8px margin to the left\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"ariaLabeledBy\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"element id to describe the button accordingly\"\n        },\n        \"ariaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"aria label to provide important when providing only Icon\"\n        },\n        \"ariaHasPopup\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactHTMLProps[\\\"aria-haspopup\\\"]\",\n            \"raw\": \"React.HTMLProps<HTMLButtonElement>[\\\"aria-haspopup\\\"]\"\n          },\n          \"description\": \"aria for a button popup\"\n        },\n        \"ariaExpanded\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"aria to be set if the popup is open\"\n        },\n        \"ariaControls\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"aria controls - receives id for the controlled region\"\n        },\n        \"aria-describedby\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AriaAttributes[\\\"aria-describedby\\\"]\",\n            \"raw\": \"AriaAttributes[\\\"aria-describedby\\\"]\"\n          },\n          \"description\": \"\"\n        },\n        \"aria-hidden\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AriaAttributes[\\\"aria-hidden\\\"]\",\n            \"raw\": \"AriaAttributes[\\\"aria-hidden\\\"]\"\n          },\n          \"description\": \"aria to be used for screen reader to know if the button is hidden\"\n        },\n        \"onFocus\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.FocusEvent<HTMLButtonElement>) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactFocusEvent\",\n                    \"raw\": \"React.FocusEvent<HTMLButtonElement>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"HTMLButtonElement\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"On Button Focus callback\"\n        },\n        \"onBlur\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.FocusEvent<HTMLButtonElement>) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactFocusEvent\",\n                    \"raw\": \"React.FocusEvent<HTMLButtonElement>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"HTMLButtonElement\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"On Button Blur callback\"\n        },\n        \"rightFlat\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"leftFlat\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"preventClickAnimation\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"noSidePadding\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"defaultTextColorOnPrimaryColor\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"default color for text color in ON_PRIMARY_COLOR kind (should be any type of css color (rbg, var, hex...)\"\n        },\n        \"dataTestId\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"@deprecated - use \\\"data-testid\\\" instead\"\n        },\n        \"insetFocus\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Change the focus indicator from around the button to within it\"\n        },\n        \"tabIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"Specifies the tab order of an element\"\n        },\n        \"isDarkBackground\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/AlertBanner/AlertBannerText/AlertBannerText.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"AlertBannerText\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"text\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"marginLeft\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbItem.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"BreadcrumbItem\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"text\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"The display text.\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"disabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Should item be disabled.\"\n        },\n        \"isDisabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"@deprecated - use disabled instead\"\n        },\n        \"isClickable\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Should item be clickable - this should be recieved from the breadcrumbsBar ( Navigation/Indication bar ).\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"link\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"If the item is clickable and the type of navigation is a link, this is the link\"\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"If the item is clickable and the type of navigation is a function, this is the function\"\n        },\n        \"isCurrent\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Should be the current Item - mainly effects the item`s style.\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"icon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"An Icon - If no icon needed then should be left empty.\"\n        }\n      }\n    }\n  ],\n  \"src/components/AttentionBox/AttentionBoxLink/AttentionBoxLink.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"AttentionBoxLink\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"componentClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"@deprecated - use className instead\"\n        },\n        \"textClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Class name for overriding link text styles\"\n        },\n        \"href\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Specifies the location (URL) of the external resource\"\n        },\n        \"text\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"The link text\"\n        },\n        \"rel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Defines the relationship between a linked resource and the current document\"\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"onClick function - MouseEvent\"\n        },\n        \"target\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"LinkTarget\"\n          },\n          \"description\": \"Specifies where to open the linked document\",\n          \"defaultValue\": {\n            \"value\": \"Link.target.SELF\",\n            \"computed\": true\n          }\n        },\n        \"ariaLabelDescription\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Aria label description\"\n        },\n        \"ariaDescribedby\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Identifies the element (or elements) that describes the element on which the attribute is set.\"\n        },\n        \"ariaLabeledBy\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"element id to describe the counter accordingly\"\n        },\n        \"icon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"Icon to add to the link element\"\n        },\n        \"iconPosition\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"IconPosition\"\n          },\n          \"description\": \"the position of the icon in relation to the etext\"\n        },\n        \"disableNavigation\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"disable navigation\"\n        },\n        \"inheritFontSize\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"inherit text size\"\n        },\n        \"inlineText\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"if the link is in part of other text content\"\n        }\n      }\n    }\n  ],\n  \"src/components/VirtualizedGrid/VirtualizedGrid.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"VirtualizedGrid\",\n      \"props\": {\n        \"items\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Array\",\n            \"elements\": [\n              {\n                \"name\": \"signature\",\n                \"type\": \"object\",\n                \"raw\": \"{\\n  value: string;\\n  height: number;\\n  width: number;\\n  id: string;\\n}\",\n                \"signature\": {\n                  \"properties\": [\n                    {\n                      \"key\": \"value\",\n                      \"value\": {\n                        \"name\": \"string\",\n                        \"required\": true\n                      }\n                    },\n                    {\n                      \"key\": \"height\",\n                      \"value\": {\n                        \"name\": \"number\",\n                        \"required\": true\n                      }\n                    },\n                    {\n                      \"key\": \"width\",\n                      \"value\": {\n                        \"name\": \"number\",\n                        \"required\": true\n                      }\n                    },\n                    {\n                      \"key\": \"id\",\n                      \"value\": {\n                        \"name\": \"string\",\n                        \"required\": true\n                      }\n                    }\n                  ]\n                }\n              }\n            ],\n            \"raw\": \"ItemType[]\"\n          },\n          \"description\": \"A list of items to be rendered\\n{\\n     item: ItemType,\\n    index: number,\\n    style: CSSProperties\\n}[]\",\n          \"defaultValue\": {\n            \"value\": \"[]\",\n            \"computed\": false\n          }\n        },\n        \"itemRenderer\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(\\n  item: ItemType,\\n  index: number,\\n  style: CSSProperties\\n) => ItemType | ComponentType<GridChildComponentProps<ItemType>>\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"signature\",\n                    \"type\": \"object\",\n                    \"raw\": \"{\\n  value: string;\\n  height: number;\\n  width: number;\\n  id: string;\\n}\",\n                    \"signature\": {\n                      \"properties\": [\n                        {\n                          \"key\": \"value\",\n                          \"value\": {\n                            \"name\": \"string\",\n                            \"required\": true\n                          }\n                        },\n                        {\n                          \"key\": \"height\",\n                          \"value\": {\n                            \"name\": \"number\",\n                            \"required\": true\n                          }\n                        },\n                        {\n                          \"key\": \"width\",\n                          \"value\": {\n                            \"name\": \"number\",\n                            \"required\": true\n                          }\n                        },\n                        {\n                          \"key\": \"id\",\n                          \"value\": {\n                            \"name\": \"string\",\n                            \"required\": true\n                          }\n                        }\n                      ]\n                    }\n                  },\n                  \"name\": \"item\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"index\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"CSSProperties\"\n                  },\n                  \"name\": \"style\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"union\",\n                \"raw\": \"ItemType | ComponentType<GridChildComponentProps<ItemType>>\",\n                \"elements\": [\n                  {\n                    \"name\": \"signature\",\n                    \"type\": \"object\",\n                    \"raw\": \"{\\n  value: string;\\n  height: number;\\n  width: number;\\n  id: string;\\n}\",\n                    \"signature\": {\n                      \"properties\": [\n                        {\n                          \"key\": \"value\",\n                          \"value\": {\n                            \"name\": \"string\",\n                            \"required\": true\n                          }\n                        },\n                        {\n                          \"key\": \"height\",\n                          \"value\": {\n                            \"name\": \"number\",\n                            \"required\": true\n                          }\n                        },\n                        {\n                          \"key\": \"width\",\n                          \"value\": {\n                            \"name\": \"number\",\n                            \"required\": true\n                          }\n                        },\n                        {\n                          \"key\": \"id\",\n                          \"value\": {\n                            \"name\": \"string\",\n                            \"required\": true\n                          }\n                        }\n                      ]\n                    }\n                  },\n                  {\n                    \"name\": \"ComponentType\",\n                    \"elements\": [\n                      {\n                        \"name\": \"GridChildComponentProps\",\n                        \"elements\": [\n                          {\n                            \"name\": \"signature\",\n                            \"type\": \"object\",\n                            \"raw\": \"{\\n  value: string;\\n  height: number;\\n  width: number;\\n  id: string;\\n}\",\n                            \"signature\": {\n                              \"properties\": [\n                                {\n                                  \"key\": \"value\",\n                                  \"value\": {\n                                    \"name\": \"string\",\n                                    \"required\": true\n                                  }\n                                },\n                                {\n                                  \"key\": \"height\",\n                                  \"value\": {\n                                    \"name\": \"number\",\n                                    \"required\": true\n                                  }\n                                },\n                                {\n                                  \"key\": \"width\",\n                                  \"value\": {\n                                    \"name\": \"number\",\n                                    \"required\": true\n                                  }\n                                },\n                                {\n                                  \"key\": \"id\",\n                                  \"value\": {\n                                    \"name\": \"string\",\n                                    \"required\": true\n                                  }\n                                }\n                              ]\n                            }\n                          }\n                        ],\n                        \"raw\": \"GridChildComponentProps<ItemType>\"\n                      }\n                    ],\n                    \"raw\": \"ComponentType<GridChildComponentProps<ItemType>>\"\n                  }\n                ]\n              }\n            }\n          },\n          \"description\": \"item render function\\nreturns `JSX.Element`\",\n          \"defaultValue\": {\n            \"value\": \"(item: ItemType, _index: number, _style: CSSProperties) => item\",\n            \"computed\": false\n          }\n        },\n        \"getRowHeight\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => number\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"number\"\n              }\n            }\n          },\n          \"description\": \"in order to calculate the number of rows to render in the grid, the component needs the height of the row\\nreturn `number`\",\n          \"defaultValue\": {\n            \"value\": \"() => 50\",\n            \"computed\": false\n          }\n        },\n        \"getColumnWidth\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => number\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"number\"\n              }\n            }\n          },\n          \"description\": \"in order to calculate the number of columns to render in the grid, the component needs the width of the column\\nreturn `number`\",\n          \"defaultValue\": {\n            \"value\": \"() => 100\",\n            \"computed\": false\n          }\n        },\n        \"getItemId\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(item: ItemType, index: number) => string\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"signature\",\n                    \"type\": \"object\",\n                    \"raw\": \"{\\n  value: string;\\n  height: number;\\n  width: number;\\n  id: string;\\n}\",\n                    \"signature\": {\n                      \"properties\": [\n                        {\n                          \"key\": \"value\",\n                          \"value\": {\n                            \"name\": \"string\",\n                            \"required\": true\n                          }\n                        },\n                        {\n                          \"key\": \"height\",\n                          \"value\": {\n                            \"name\": \"number\",\n                            \"required\": true\n                          }\n                        },\n                        {\n                          \"key\": \"width\",\n                          \"value\": {\n                            \"name\": \"number\",\n                            \"required\": true\n                          }\n                        },\n                        {\n                          \"key\": \"id\",\n                          \"value\": {\n                            \"name\": \"string\",\n                            \"required\": true\n                          }\n                        }\n                      ]\n                    }\n                  },\n                  \"name\": \"item\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"index\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"string\"\n              }\n            }\n          },\n          \"description\": \"returns Id of an items\\nreturns `string`\",\n          \"defaultValue\": {\n            \"value\": \"(item: ItemType, _index: number) => item.id\",\n            \"computed\": false\n          }\n        },\n        \"scrollToId\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"index of the item to scroll to\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"onScroll\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(horizontalScrollDirection: ScrollDirection, scrollTop: number, scrollUpdateWasRequested: boolean) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ScrollDirection\"\n                  },\n                  \"name\": \"horizontalScrollDirection\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"scrollTop\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"boolean\"\n                  },\n                  \"name\": \"scrollUpdateWasRequested\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onScrollToFinished\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"callback to be called when the scroll is finished\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"onItemsRendered\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"({\\n  firstItemId,\\n  secondItemId,\\n  lastItemId,\\n  centerItemId,\\n  firstItemOffsetEnd,\\n  currentOffsetTop\\n}: {\\n  firstItemId: string;\\n  secondItemId: string;\\n  lastItemId: string;\\n  centerItemId: string;\\n  firstItemOffsetEnd: number;\\n  currentOffsetTop: number;\\n}) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"signature\",\n                    \"type\": \"object\",\n                    \"raw\": \"{\\n  firstItemId: string;\\n  secondItemId: string;\\n  lastItemId: string;\\n  centerItemId: string;\\n  firstItemOffsetEnd: number;\\n  currentOffsetTop: number;\\n}\",\n                    \"signature\": {\n                      \"properties\": [\n                        {\n                          \"key\": \"firstItemId\",\n                          \"value\": {\n                            \"name\": \"string\",\n                            \"required\": true\n                          }\n                        },\n                        {\n                          \"key\": \"secondItemId\",\n                          \"value\": {\n                            \"name\": \"string\",\n                            \"required\": true\n                          }\n                        },\n                        {\n                          \"key\": \"lastItemId\",\n                          \"value\": {\n                            \"name\": \"string\",\n                            \"required\": true\n                          }\n                        },\n                        {\n                          \"key\": \"centerItemId\",\n                          \"value\": {\n                            \"name\": \"string\",\n                            \"required\": true\n                          }\n                        },\n                        {\n                          \"key\": \"firstItemOffsetEnd\",\n                          \"value\": {\n                            \"name\": \"number\",\n                            \"required\": true\n                          }\n                        },\n                        {\n                          \"key\": \"currentOffsetTop\",\n                          \"value\": {\n                            \"name\": \"number\",\n                            \"required\": true\n                          }\n                        }\n                      ]\n                    }\n                  },\n                  \"name\": \"\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"a callback that is being called when the items are rendered\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"onItemsRenderedThrottleMs\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"200\",\n            \"computed\": false\n          }\n        },\n        \"onSizeUpdate\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(width: number, height: number) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"width\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"height\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"when the grid size changes\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"onVerticalScrollbarVisiblityChange\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(value: boolean) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"boolean\"\n                  },\n                  \"name\": \"value\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"scrollableClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"class name to add to the component scrollable container\"\n        }\n      },\n      \"composes\": [\"VibeComponentProps\"]\n    }\n  ],\n  \"src/components/Dialog/DialogContent/DialogContent.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"DialogContent\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ReactElement | ReactElement[]\",\n            \"elements\": [\n              {\n                \"name\": \"ReactElement\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactElement\"\n                  }\n                ],\n                \"raw\": \"ReactElement[]\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"position\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"PopperJS.Placement\"\n          },\n          \"description\": \"\"\n        },\n        \"wrapperClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"isOpen\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"startingEdge\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"any\"\n          },\n          \"description\": \"\"\n        },\n        \"animationType\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"expand\\\"\",\n            \"computed\": false\n          }\n        },\n        \"onEsc\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.KeyboardEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactKeyboardEvent\",\n                    \"raw\": \"React.KeyboardEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"onMouseEnter\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"onMouseLeave\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"onClickOutside\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent, hideShowEvent: HideShowEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"HideShowEvent\"\n                  },\n                  \"name\": \"hideShowEvent\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"showDelay\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"styleObject\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"CSSProperties\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"{}\",\n            \"computed\": false\n          }\n        },\n        \"isReferenceHidden\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"hasTooltip\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"disableOnClickOutside\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"containerSelector\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"disableContainerScroll\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"boolean | string\",\n            \"elements\": [\n              {\n                \"name\": \"boolean\"\n              },\n              {\n                \"name\": \"string\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"onContextMenu\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(e: React.MouseEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"e\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"On context menu event (right click) outside of the dialog\\n@param e\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/DatePicker/DateNavigationItem/DateNavigationItem.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"DateNavigationItem\",\n      \"props\": {\n        \"kind\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"keyof typeof ICONS\",\n            \"elements\": [\n              {\n                \"name\": \"literal\",\n                \"value\": \"prev\"\n              },\n              {\n                \"name\": \"literal\",\n                \"value\": \"next\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/DatePicker/YearPicker/YearPicker.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"YearPicker\",\n      \"props\": {\n        \"selectedDate\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"moment.Moment\"\n          },\n          \"description\": \"\"\n        },\n        \"isYearBlocked\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(year: number) => boolean\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"year\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"boolean\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"changeCurrentDate\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(date: Moment) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"moment.Moment\"\n                  },\n                  \"name\": \"date\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Accordion/Accordion/Accordion.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Accordion\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Unique TestId - can be used as Selector for integration tests and other needs (tracking, etc.)\",\n          \"defaultValue\": {\n            \"value\": \"\\\"monday-accordion\\\"\",\n            \"computed\": false\n          }\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"Array<ReactElement> | ReactElement\",\n            \"elements\": [\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactElement\"\n                  }\n                ],\n                \"raw\": \"Array<ReactElement>\"\n              },\n              {\n                \"name\": \"ReactElement\"\n              }\n            ]\n          },\n          \"description\": \"List of AccordionItems\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"allowMultiple\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"is allowed multiple opened accordion items\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"defaultIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Array\",\n            \"elements\": [\n              {\n                \"name\": \"number\"\n              }\n            ],\n            \"raw\": \"Array<number>\"\n          },\n          \"description\": \"Array of initial expanded indexes\",\n          \"defaultValue\": {\n            \"value\": \"[]\",\n            \"computed\": false\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/DatePicker/DatePickerHeader/DatePickerHeader.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"DatePickerHeader\",\n      \"props\": {\n        \"currentDate\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"moment.Moment\"\n          },\n          \"description\": \"\"\n        },\n        \"isMonthYearSelection\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"onToggleMonthYearPicker\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"hideNavigationKeys\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Icon/CustomSvgIcon/CustomSvgIcon.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"CustomSvgIcon\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"src\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | object\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"object\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"ariaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"tabIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"role\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AriaRole\"\n          },\n          \"description\": \"\"\n        },\n        \"ariaHidden\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"clickable\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"replaceToCurrentColor\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"customColor\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"ref\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Ref\",\n            \"elements\": [\n              {\n                \"name\": \"SVGElement\"\n              }\n            ],\n            \"raw\": \"Ref<SVGElement>\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Icon/FontIcon/FontIcon.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"FontIcon\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent<HTMLSpanElement>) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent<HTMLSpanElement>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"HTMLSpanElement\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"aria-label\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"tabIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"icon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"role\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AriaRole\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"img\\\"\",\n            \"computed\": false\n          }\n        },\n        \"aria-hidden\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/DatePicker/YearPicker/YearsList.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"YearsList\",\n      \"props\": {\n        \"yearsItems\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"Array\",\n            \"elements\": [\n              {\n                \"name\": \"number\"\n              }\n            ],\n            \"raw\": \"number[]\"\n          },\n          \"description\": \"\"\n        },\n        \"isYearBlocked\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(year: number) => boolean\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"year\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"boolean\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onSelect\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(year: number) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"year\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"selectedYear\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/List/VirtualizedListItems/VirtualizedListItems.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"VirtualizedListItems\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"React.ReactElement<ListItemProps | ListTitleProps> | React.ReactElement<ListItemProps | ListTitleProps>[]\",\n            \"elements\": [\n              {\n                \"name\": \"ReactReactElement\",\n                \"raw\": \"React.ReactElement<ListItemProps | ListTitleProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"union\",\n                    \"raw\": \"ListItemProps | ListTitleProps\",\n                    \"elements\": [\n                      {\n                        \"name\": \"ListItemProps\"\n                      },\n                      {\n                        \"name\": \"ListTitleProps\"\n                      }\n                    ]\n                  }\n                ]\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactReactElement\",\n                    \"raw\": \"React.ReactElement<ListItemProps | ListTitleProps>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"union\",\n                        \"raw\": \"ListItemProps | ListTitleProps\",\n                        \"elements\": [\n                          {\n                            \"name\": \"ListItemProps\"\n                          },\n                          {\n                            \"name\": \"ListTitleProps\"\n                          }\n                        ]\n                      }\n                    ]\n                  }\n                ],\n                \"raw\": \"React.ReactElement<ListItemProps | ListTitleProps>[]\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Menu/Menu/Menu.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Menu\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"classname\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"@deprecated - use className instead\"\n        },\n        \"size\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"unknown[union]\",\n            \"raw\": \"(typeof SIZES)[keyof typeof SIZES]\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"Menu.sizes.MEDIUM\",\n            \"computed\": true\n          }\n        },\n        \"tabIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"0\",\n            \"computed\": false\n          }\n        },\n        \"ariaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"Menu\\\"\",\n            \"computed\": false\n          }\n        },\n        \"ariaDescribedBy\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"focusOnMount\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"isVisible\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"true\",\n            \"computed\": false\n          }\n        },\n        \"onClose\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(option: CloseMenuOption) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"signature\",\n                    \"type\": \"object\",\n                    \"raw\": \"{\\n  propagate?: boolean;\\n}\",\n                    \"signature\": {\n                      \"properties\": [\n                        {\n                          \"key\": \"propagate\",\n                          \"value\": {\n                            \"name\": \"boolean\",\n                            \"required\": false\n                          }\n                        }\n                      ]\n                    }\n                  },\n                  \"name\": \"option\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"focusItemIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"-1\",\n            \"computed\": false\n          }\n        },\n        \"isSubMenu\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"useDocumentEventListeners\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"focusItemIndexOnMount\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"-1\",\n            \"computed\": false\n          }\n        },\n        \"shouldScrollMenu\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ReactNode | ReactNode[]\",\n            \"elements\": [\n              {\n                \"name\": \"ReactNode\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactNode\"\n                  }\n                ],\n                \"raw\": \"ReactNode[]\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Menu/MenuItem/AvatarMenuItem.tsx\": [\n    {\n      \"description\": \"MenuItem with Avatar instead of Icon\",\n      \"methods\": [],\n      \"displayName\": \"AvatarMenuItem\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"avatarProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AvatarProps\"\n          },\n          \"description\": \"\"\n        },\n        \"menuItemProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"MenuItemProps\"\n          },\n          \"description\": \"\"\n        },\n        \"isMenuChild\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"isSelectable\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Menu/MenuItemButton/MenuItemButton.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"MenuItemButton\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"classname\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"@deprecated - use className instead\"\n        },\n        \"kind\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ButtonType\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"MenuItemButton.kinds.PRIMARY\",\n            \"computed\": true\n          }\n        },\n        \"leftIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"rightIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"index\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"activeItemIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"-1\",\n            \"computed\": false\n          }\n        },\n        \"disabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"disableReason\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent | React.KeyboardEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"union\",\n                    \"raw\": \"React.MouseEvent | React.KeyboardEvent\",\n                    \"elements\": [\n                      {\n                        \"name\": \"ReactMouseEvent\",\n                        \"raw\": \"React.MouseEvent\"\n                      },\n                      {\n                        \"name\": \"ReactKeyboardEvent\",\n                        \"raw\": \"React.KeyboardEvent\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"tooltipPosition\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"DialogPosition\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"MenuItemButton.tooltipPositions.RIGHT\",\n            \"computed\": true\n          }\n        },\n        \"tooltipShowDelay\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"300\",\n            \"computed\": false\n          }\n        },\n        \"resetOpenSubMenuIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"setSubMenuIsOpenByIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(index: number, isOpen: boolean) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"index\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"boolean\"\n                  },\n                  \"name\": \"isOpen\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"setActiveItemIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(index: number) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"index\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"menuRef\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactRefObject\",\n            \"raw\": \"React.RefObject<HTMLElement>\",\n            \"elements\": [\n              {\n                \"name\": \"HTMLElement\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"closeMenu\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"useDocumentEventListeners\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ElementContent | ElementContent[]\",\n            \"elements\": [\n              {\n                \"name\": \"union\",\n                \"raw\": \"ReactNode | ReactNode[]\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactNode\"\n                  },\n                  {\n                    \"name\": \"Array\",\n                    \"elements\": [\n                      {\n                        \"name\": \"ReactNode\"\n                      }\n                    ],\n                    \"raw\": \"ReactNode[]\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"union\",\n                    \"raw\": \"ReactNode | ReactNode[]\",\n                    \"elements\": [\n                      {\n                        \"name\": \"ReactNode\"\n                      },\n                      {\n                        \"name\": \"Array\",\n                        \"elements\": [\n                          {\n                            \"name\": \"ReactNode\"\n                          }\n                        ],\n                        \"raw\": \"ReactNode[]\"\n                      }\n                    ]\n                  }\n                ],\n                \"raw\": \"ElementContent[]\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Menu/MenuGridItem/MenuGridItem.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"MenuGridItem\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ReactElement | ReactElement[]\",\n            \"elements\": [\n              {\n                \"name\": \"ReactElement\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactElement\"\n                  }\n                ],\n                \"raw\": \"ReactElement[]\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"disabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"if true, keyboard navigation will skip on this item. Also, this prop will be passed on to the child *\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"closeMenu\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(option: CloseMenuOption) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"signature\",\n                    \"type\": \"object\",\n                    \"raw\": \"{\\n  propagate?: boolean;\\n}\",\n                    \"signature\": {\n                      \"properties\": [\n                        {\n                          \"key\": \"propagate\",\n                          \"value\": {\n                            \"name\": \"boolean\",\n                            \"required\": false\n                          }\n                        }\n                      ]\n                    }\n                  },\n                  \"name\": \"option\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"a callback to close the wrapping menu *\"\n        },\n        \"activeItemIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"the currently active index of the wrapping menu *\",\n          \"defaultValue\": {\n            \"value\": \"-1\",\n            \"computed\": false\n          }\n        },\n        \"setActiveItemIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(index: number) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"index\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"getNextSelectableIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(activeItemIndex: number) => number\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"activeItemIndex\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"number\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"getPreviousSelectableIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(activeItemIndex: number) => number\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"activeItemIndex\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"number\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"index\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"the index of this item *\"\n        },\n        \"isUnderSubMenu\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"true if this item is under a submenu, and not a top-level menu *\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"setSubMenuIsOpenByIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(index: number, isOpen: boolean) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"index\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"boolean\"\n                  },\n                  \"name\": \"isOpen\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"useDocumentEventListeners\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/Modal/ModalHeader/ModalHeader.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"ModalHeader\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Class name for the wrapper\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"/**\\nID for the title, needed for accessibility. No need to provide it, it is being provided by the modal\"\n        },\n        \"title\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"ElementContent\"\n          },\n          \"description\": \"Heading of the modal - using string is a recommended standard, as it provides well-defined styles. Using it with JSX content should be according to design guidelines.\"\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ElementContent\"\n          },\n          \"description\": \"Slot for the heading of the modal for maximum flexibility. Using it should be according to design and typography guidelines\"\n        },\n        \"description\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ElementContent\"\n          },\n          \"description\": \"Description of the modal - pure string description is a recommended standard, use JSX ability only if there is a need to add links\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"icon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FunctionComponent<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFunctionComponent\",\n                \"raw\": \"React.FunctionComponent<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"Icon to be rendered before the title\"\n        },\n        \"titleClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Class name for the title\"\n        },\n        \"closeModal\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"closes the Modal. No need to provide it, it is being provided by the modal\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"descriptionClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Class name for the description\"\n        },\n        \"iconSize\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"Size of the icon\",\n          \"defaultValue\": {\n            \"value\": \"24\",\n            \"computed\": false\n          }\n        },\n        \"iconClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"class name for the icon\"\n        },\n        \"closeButtonAriaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Aria label for the close button\",\n          \"defaultValue\": {\n            \"value\": \"\\\"close\\\"\",\n            \"computed\": false\n          }\n        },\n        \"hideCloseButton\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Should close button be hidden or not\"\n        }\n      }\n    }\n  ],\n  \"src/components/Menu/MenuDivider/MenuDivider.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"MenuDivider\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"classname\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"@deprecated - use className instead\"\n        }\n      }\n    }\n  ],\n  \"src/components/Modal/ModalContent/ModalContent.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"ModalContent\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"children\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ReactElement | ReactElement[] | string\",\n            \"elements\": [\n              {\n                \"name\": \"ReactElement\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactElement\"\n                  }\n                ],\n                \"raw\": \"ReactElement[]\"\n              },\n              {\n                \"name\": \"string\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Modal/ModalFooter/ModalFooter.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"ModalFooter\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"children\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ReactElement | ReactElement[] | string\",\n            \"elements\": [\n              {\n                \"name\": \"ReactElement\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactElement\"\n                  }\n                ],\n                \"raw\": \"ReactElement[]\"\n              },\n              {\n                \"name\": \"string\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/ProgressBars/PercentageLabel/PercentageLabel.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"PercentageLabel\",\n      \"props\": {\n        \"forElement\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Replacement to `htmlFor` | `for` attribute.\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"value\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"Determine the displayed percentage.\",\n          \"defaultValue\": {\n            \"value\": \"0\",\n            \"computed\": false\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/ProgressBars/LinearProgressBar/LinearProgressBar.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"LinearProgressBar\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Set external styling to the progress bar.\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"barStyle\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ProgressBarStyle\"\n          },\n          \"description\": \"Determine the progress bar style (Supported options exposed through `LinearProgressBar.styles`).\",\n          \"defaultValue\": {\n            \"value\": \"ProgressBarStyle.PRIMARY\",\n            \"computed\": true\n          }\n        },\n        \"min\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"The progress bar starting value.\",\n          \"defaultValue\": {\n            \"value\": \"0\",\n            \"computed\": false\n          }\n        },\n        \"max\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"The progress bar ending value.\",\n          \"defaultValue\": {\n            \"value\": \"100\",\n            \"computed\": false\n          }\n        },\n        \"value\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"The progress bar current value.\",\n          \"defaultValue\": {\n            \"value\": \"0\",\n            \"computed\": false\n          }\n        },\n        \"valueSecondary\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"The progress bar secondary value.\",\n          \"defaultValue\": {\n            \"value\": \"0\",\n            \"computed\": false\n          }\n        },\n        \"animated\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"If set to *true*, animations are used.\",\n          \"defaultValue\": {\n            \"value\": \"true\",\n            \"computed\": false\n          }\n        },\n        \"size\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"unknown[union]\",\n            \"raw\": \"(typeof SIZES)[keyof typeof SIZES]\"\n          },\n          \"description\": \"Determine the progress bar height (Supported options exposed through `LinearProgressBar.sizes`)\",\n          \"defaultValue\": {\n            \"value\": \"SIZES.SMALL\",\n            \"computed\": true\n          }\n        },\n        \"indicateProgress\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Show progress bar progression in percentages\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"multi\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Use multiple bars.\\n***Note:*** `value`, `valueSecondary` & `barStyle` won't be used\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"multiValues\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Array\",\n            \"elements\": [\n              {\n                \"name\": \"signature\",\n                \"type\": \"object\",\n                \"raw\": \"{\\n  /**\\n   * The progress bar current value.\\n   */\\n  value?: number;\\n  /**\\n   * The bar color in hex - #000000 ~ #ffffff\\n   */\\n  color?: string;\\n}\",\n                \"signature\": {\n                  \"properties\": [\n                    {\n                      \"key\": \"value\",\n                      \"value\": {\n                        \"name\": \"number\",\n                        \"required\": false\n                      },\n                      \"description\": \"The progress bar current value.\"\n                    },\n                    {\n                      \"key\": \"color\",\n                      \"value\": {\n                        \"name\": \"string\",\n                        \"required\": false\n                      },\n                      \"description\": \"The bar color in hex - #000000 ~ #ffffff\"\n                    }\n                  ]\n                }\n              }\n            ],\n            \"raw\": \"{\\n  /**\\n   * The progress bar current value.\\n   */\\n  value?: number;\\n  /**\\n   * The bar color in hex - #000000 ~ #ffffff\\n   */\\n  color?: string;\\n}[]\"\n          },\n          \"description\": \"Array of bar value objects {\\n`value` - The progress value,\\n`color` - hex [`#000000` ~ `#ffffff`] of the current bar\\n}\",\n          \"defaultValue\": {\n            \"value\": \"[]\",\n            \"computed\": false\n          }\n        },\n        \"ariaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"ARIA description for the progress bar\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"fullWidth\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Is the progress bar spread across the entire container width (width: 100%)\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/Menu/MenuTitle/MenuTitle.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"MenuTitle\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"classname\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"@deprecated - use className instead\"\n        },\n        \"caption\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"captionPosition\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"MenuTitleCaptionPosition\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"MenuTitle.positions.BOTTOM\",\n            \"computed\": true\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/Table/Table/Table.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Table\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"columns\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"Array\",\n            \"elements\": [\n              {\n                \"name\": \"ITableColumn\"\n              }\n            ],\n            \"raw\": \"ITableColumn[]\"\n          },\n          \"description\": \"\"\n        },\n        \"dataState\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"object\",\n            \"raw\": \"{\\n  isLoading?: boolean;\\n  isError?: boolean;\\n}\",\n            \"signature\": {\n              \"properties\": [\n                {\n                  \"key\": \"isLoading\",\n                  \"value\": {\n                    \"name\": \"boolean\",\n                    \"required\": false\n                  }\n                },\n                {\n                  \"key\": \"isError\",\n                  \"value\": {\n                    \"name\": \"boolean\",\n                    \"required\": false\n                  }\n                }\n              ]\n            }\n          },\n          \"description\": \"\"\n        },\n        \"errorState\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"ReactElement\"\n          },\n          \"description\": \"\"\n        },\n        \"emptyState\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"ReactElement\"\n          },\n          \"description\": \"\"\n        },\n        \"style\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactCSSProperties\",\n            \"raw\": \"React.CSSProperties\"\n          },\n          \"description\": \"\"\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"| ReactElement<ITableHeaderProps>\\n| ReactElement<ITableBodyProps>\\n| Array<ReactElement<ITableHeaderProps> | ReactElement<ITableBodyProps>>\",\n            \"elements\": [\n              {\n                \"name\": \"ReactElement\",\n                \"elements\": [\n                  {\n                    \"name\": \"ITableHeaderProps\"\n                  }\n                ],\n                \"raw\": \"ReactElement<ITableHeaderProps>\"\n              },\n              {\n                \"name\": \"ReactElement\",\n                \"elements\": [\n                  {\n                    \"name\": \"ITableBodyProps\"\n                  }\n                ],\n                \"raw\": \"ReactElement<ITableBodyProps>\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"union\",\n                    \"raw\": \"ReactElement<ITableHeaderProps> | ReactElement<ITableBodyProps>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"ReactElement\",\n                        \"elements\": [\n                          {\n                            \"name\": \"ITableHeaderProps\"\n                          }\n                        ],\n                        \"raw\": \"ReactElement<ITableHeaderProps>\"\n                      },\n                      {\n                        \"name\": \"ReactElement\",\n                        \"elements\": [\n                          {\n                            \"name\": \"ITableBodyProps\"\n                          }\n                        ],\n                        \"raw\": \"ReactElement<ITableBodyProps>\"\n                      }\n                    ]\n                  }\n                ],\n                \"raw\": \"Array<ReactElement<ITableHeaderProps> | ReactElement<ITableBodyProps>>\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"size\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"RowSizes\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"Table.sizes.MEDIUM\",\n            \"computed\": true\n          }\n        },\n        \"withoutBorder\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Table/TableHeader/TableHeader.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"TableHeader\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"React.ReactElement<ITableHeaderCellProps> | React.ReactElement<ITableHeaderCellProps>[]\",\n            \"elements\": [\n              {\n                \"name\": \"ReactReactElement\",\n                \"raw\": \"React.ReactElement<ITableHeaderCellProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"ITableHeaderCellProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactReactElement\",\n                    \"raw\": \"React.ReactElement<ITableHeaderCellProps>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"ITableHeaderCellProps\"\n                      }\n                    ]\n                  }\n                ],\n                \"raw\": \"React.ReactElement<ITableHeaderCellProps>[]\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Table/TableBody/TableBody.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"TableBody\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"| ReactElement<ITableRowProps>\\n| ReactElement<ITableRowProps>[]\\n| ReactElement<ComponentProps<typeof VirtualizedList>>\",\n            \"elements\": [\n              {\n                \"name\": \"ReactElement\",\n                \"elements\": [\n                  {\n                    \"name\": \"ITableRowProps\"\n                  }\n                ],\n                \"raw\": \"ReactElement<ITableRowProps>\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactElement\",\n                    \"elements\": [\n                      {\n                        \"name\": \"ITableRowProps\"\n                      }\n                    ],\n                    \"raw\": \"ReactElement<ITableRowProps>\"\n                  }\n                ],\n                \"raw\": \"ReactElement<ITableRowProps>[]\"\n              },\n              {\n                \"name\": \"ReactElement\",\n                \"elements\": [\n                  {\n                    \"name\": \"ComponentProps\",\n                    \"elements\": [\n                      {\n                        \"name\": \"VirtualizedList\"\n                      }\n                    ],\n                    \"raw\": \"ComponentProps<typeof VirtualizedList>\"\n                  }\n                ],\n                \"raw\": \"ReactElement<ComponentProps<typeof VirtualizedList>>\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Table/TableCellSkeleton/TableCellSkeleton.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"TableCellSkeleton\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"type\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"\\\"long-text\\\" | \\\"medium-text\\\" | \\\"circle\\\" | \\\"rectangle\\\"\",\n            \"elements\": [\n              {\n                \"name\": \"literal\",\n                \"value\": \"\\\"long-text\\\"\"\n              },\n              {\n                \"name\": \"literal\",\n                \"value\": \"\\\"medium-text\\\"\"\n              },\n              {\n                \"name\": \"literal\",\n                \"value\": \"\\\"circle\\\"\"\n              },\n              {\n                \"name\": \"literal\",\n                \"value\": \"\\\"rectangle\\\"\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"long-text\\\"\",\n            \"computed\": false\n          }\n        },\n        \"short\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/SplitButton/SplitButtonMenu/SplitButtonMenu.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"SplitButtonMenu\"\n    }\n  ],\n  \"src/components/Table/TableVirtualizedBody/TableVirtualizedBody.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"TableVirtualizedBody\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"items\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"ComponentProps[\\\"items\\\"]\",\n            \"raw\": \"ComponentProps<typeof VirtualizedList>[\\\"items\\\"]\"\n          },\n          \"description\": \"\"\n        },\n        \"rowRenderer\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(item: VirtualizedListItem[\\\"value\\\"]) => JSX.Element\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"union\",\n                    \"raw\": \"VirtualizedListItem[\\\"value\\\"]\"\n                  },\n                  \"name\": \"item\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"JSX.Element\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onScroll\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(horizontalScrollDirection: ScrollDirection, scrollTop: number, scrollUpdateWasRequested: boolean) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ScrollDirection\"\n                  },\n                  \"name\": \"horizontalScrollDirection\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"scrollTop\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"boolean\"\n                  },\n                  \"name\": \"scrollUpdateWasRequested\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Table/TableRow/TableRow.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"TableRow\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"highlighted\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Does the row have a highlighted style\"\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"React.ReactElement<ITableCellProps> | React.ReactElement<ITableCellProps>[]\",\n            \"elements\": [\n              {\n                \"name\": \"ReactReactElement\",\n                \"raw\": \"React.ReactElement<ITableCellProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"ITableCellProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactReactElement\",\n                    \"raw\": \"React.ReactElement<ITableCellProps>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"ITableCellProps\"\n                      }\n                    ]\n                  }\n                ],\n                \"raw\": \"React.ReactElement<ITableCellProps>[]\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"style\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactCSSProperties\",\n            \"raw\": \"React.CSSProperties\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Slider/SliderBase/SliderBase.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"SliderBase\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Slider/SliderBase/SliderTrack.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"SliderTrack\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Consumer/Custom/Extra `class names` to be added to the Component's-Root-Node\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"color\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"SliderColor\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Table/TableCell/TableCell.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"TableCell\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactReactNode\",\n            \"raw\": \"React.ReactNode\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Table/TableHeaderCell/TableHeaderCell.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"TableHeaderCell\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"title\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"icon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"infoContent\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"sortState\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"\\\"asc\\\" | \\\"desc\\\" | \\\"none\\\"\",\n            \"elements\": [\n              {\n                \"name\": \"literal\",\n                \"value\": \"\\\"asc\\\"\"\n              },\n              {\n                \"name\": \"literal\",\n                \"value\": \"\\\"desc\\\"\"\n              },\n              {\n                \"name\": \"literal\",\n                \"value\": \"\\\"none\\\"\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"none\\\"\",\n            \"computed\": false\n          }\n        },\n        \"onSortClicked\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(direction: \\\"asc\\\" | \\\"desc\\\" | \\\"none\\\") => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"union\",\n                    \"raw\": \"\\\"asc\\\" | \\\"desc\\\" | \\\"none\\\"\",\n                    \"elements\": [\n                      {\n                        \"name\": \"literal\",\n                        \"value\": \"\\\"asc\\\"\"\n                      },\n                      {\n                        \"name\": \"literal\",\n                        \"value\": \"\\\"desc\\\"\"\n                      },\n                      {\n                        \"name\": \"literal\",\n                        \"value\": \"\\\"none\\\"\"\n                      }\n                    ]\n                  },\n                  \"name\": \"direction\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"sortButtonAriaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"Sort\\\"\",\n            \"computed\": false\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/Slider/SliderBase/SliderRail.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"SliderRail\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Consumer/Custom/Extra `class names` to be added to the Component's-Root-Node\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"onClick callback function\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ReactElement | ReactElement[]\",\n            \"elements\": [\n              {\n                \"name\": \"ReactElement\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactElement\"\n                  }\n                ],\n                \"raw\": \"ReactElement[]\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"size\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"unknown[unknown]\",\n            \"raw\": \"(typeof Slider.sizes)[keyof typeof Slider.sizes]\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Slider/SliderBase/SliderFilledTrack.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"SliderFilledTrack\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Consumer/Custom/Extra `class names` to be added to the Component's-Root-Node\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"dimension\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"Size of filled track, according to selected value of component (Slider)\",\n          \"defaultValue\": {\n            \"value\": \"0\",\n            \"computed\": false\n          }\n        },\n        \"offset\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"Offset from start of track\",\n          \"defaultValue\": {\n            \"value\": \"0\",\n            \"computed\": false\n          }\n        },\n        \"reverse\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Start Filled Track from the end of the track\\n(`right` for LTR and `left` for RTL, `bottom` for vertical)\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"color\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"SliderColor\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Tabs/TabPanel/TabPanel.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"TabPanel\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ReactElement | ReactElement[] | string\",\n            \"elements\": [\n              {\n                \"name\": \"ReactElement\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactElement\"\n                  }\n                ],\n                \"raw\": \"ReactElement[]\"\n              },\n              {\n                \"name\": \"string\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"index\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Slider/SliderBase/SliderThumb.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"SliderThumb\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Consumer/Custom/Extra `class names` to be added to the Component's-Root-Node\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"index\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"Consumer/Custom/Extra `class names` to be added to the Component's-Root-Node\",\n          \"defaultValue\": {\n            \"value\": \"0\",\n            \"computed\": false\n          }\n        },\n        \"onMove\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: PointerEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"PointerEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"On SliderThumb move callback\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"position\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"Position (i.e. offset) from start of track/rail, according to value\",\n          \"defaultValue\": {\n            \"value\": \"0\",\n            \"computed\": false\n          }\n        },\n        \"size\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"unknown[unknown]\",\n            \"raw\": \"(typeof Slider.sizes)[keyof typeof Slider.sizes]\"\n          },\n          \"description\": \"\"\n        },\n        \"color\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"SliderColor\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Tabs/Tab/Tab.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Tab\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"tabInnerClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Class name for tab link-name\"\n        },\n        \"value\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"Tab index\",\n          \"defaultValue\": {\n            \"value\": \"0\",\n            \"computed\": false\n          }\n        },\n        \"disabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"active\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"focus\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"icon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FunctionComponent<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFunctionComponent\",\n                \"raw\": \"React.FunctionComponent<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"iconType\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"IconType\"\n          },\n          \"description\": \"\"\n        },\n        \"iconSide\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"left\\\"\",\n            \"computed\": false\n          }\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(value: number) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"value\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function noop() {\\n  // No operation performed.\\n}\",\n            \"computed\": false\n          }\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | ReactElement[]\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactElement\"\n                  }\n                ],\n                \"raw\": \"ReactElement[]\"\n              }\n            ]\n          },\n          \"description\": \"Tab link-name\"\n        }\n      }\n    }\n  ],\n  \"src/components/Tabs/TabList/TabList.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"TabList\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"onTabChange\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(tabId: number) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"tabId\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"activeTabId\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"0\",\n            \"computed\": false\n          }\n        },\n        \"tabType\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"Compact\\\"\",\n            \"computed\": false\n          }\n        },\n        \"size\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"noPadding\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Array\",\n            \"elements\": [\n              {\n                \"name\": \"ReactElement\",\n                \"elements\": [\n                  {\n                    \"name\": \"TabProps\"\n                  }\n                ],\n                \"raw\": \"ReactElement<TabProps>\"\n              }\n            ],\n            \"raw\": \"ReactElement<TabProps>[]\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Tabs/TabPanels/TabPanels.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"TabPanels\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"renderOnlyActiveTab\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"activeTabId\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"0\",\n            \"computed\": false\n          }\n        },\n        \"animationDirection\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"TabPanelsAnimationDirection\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"TabPanelsAnimationDirection.RTL\",\n            \"computed\": true\n          }\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ReactElement<TabPanelProps> | ReactElement<TabPanelProps>[]\",\n            \"elements\": [\n              {\n                \"name\": \"ReactElement\",\n                \"elements\": [\n                  {\n                    \"name\": \"TabPanelProps\"\n                  }\n                ],\n                \"raw\": \"ReactElement<TabPanelProps>\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactElement\",\n                    \"elements\": [\n                      {\n                        \"name\": \"TabPanelProps\"\n                      }\n                    ],\n                    \"raw\": \"ReactElement<TabPanelProps>\"\n                  }\n                ],\n                \"raw\": \"ReactElement<TabPanelProps>[]\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Tipseen/TipseenMedia/TipseenMedia.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"TipseenMedia\",\n      \"props\": {\n        \"children\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"ReactNode\"\n          },\n          \"description\": \"\"\n        }\n      },\n      \"composes\": [\"PropsWithChildren\"]\n    }\n  ],\n  \"src/components/Toast/ToastButton/ToastButton.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"ToastButton\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Custom class names to pass to the component\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"id to pass to the button\"\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactReactNode\",\n            \"raw\": \"React.ReactNode\"\n          },\n          \"description\": \"\"\n        },\n        \"activeButtonClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"kind\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ButtonType\"\n          },\n          \"description\": \"The button's kind\"\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent<HTMLButtonElement>) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent<HTMLButtonElement>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"HTMLButtonElement\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"Callback function to run when the button is clicked\"\n        },\n        \"onMouseDown\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent<HTMLButtonElement>) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent<HTMLButtonElement>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"HTMLButtonElement\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"blurOnMouseUp\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Blur on button click\"\n        },\n        \"name\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Name of the button - for form submit usages\"\n        },\n        \"size\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"(typeof SIZES)[keyof typeof SIZES] | keyof typeof OLD_BUTTON_SIZES\",\n            \"elements\": [\n              {\n                \"name\": \"unknown[union]\",\n                \"raw\": \"(typeof SIZES)[keyof typeof SIZES]\"\n              },\n              {\n                \"name\": \"union\",\n                \"raw\": \"keyof typeof OLD_BUTTON_SIZES\",\n                \"elements\": [\n                  {\n                    \"name\": \"literal\",\n                    \"value\": \"sm\"\n                  },\n                  {\n                    \"name\": \"literal\",\n                    \"value\": \"md\"\n                  },\n                  {\n                    \"name\": \"literal\",\n                    \"value\": \"lg\"\n                  }\n                ]\n              }\n            ]\n          },\n          \"description\": \"The button's size\"\n        },\n        \"color\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ButtonColor\"\n          },\n          \"description\": \"The button's color\"\n        },\n        \"type\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ButtonInputType\"\n          },\n          \"description\": \"The button's type\"\n        },\n        \"disabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Whether the button should be disabled or not\"\n        },\n        \"rightIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"Icon to place on the right\"\n        },\n        \"leftIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"Icon to place on the left\"\n        },\n        \"success\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"the success props are used when you have async action and wants to display a success message\"\n        },\n        \"successIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"Success icon name\"\n        },\n        \"successText\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Success text\"\n        },\n        \"loading\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"loading boolean which switches the text to a loader\"\n        },\n        \"style\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactCSSProperties\",\n            \"raw\": \"React.CSSProperties\"\n          },\n          \"description\": \"\"\n        },\n        \"active\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"displays the active state\"\n        },\n        \"marginRight\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"adds 8px margin to the right\"\n        },\n        \"marginLeft\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"adds 8px margin to the left\"\n        },\n        \"ariaLabeledBy\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"element id to describe the button accordingly\"\n        },\n        \"ariaLabel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"aria label to provide important when providing only Icon\"\n        },\n        \"ariaHasPopup\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactHTMLProps[\\\"aria-haspopup\\\"]\",\n            \"raw\": \"React.HTMLProps<HTMLButtonElement>[\\\"aria-haspopup\\\"]\"\n          },\n          \"description\": \"aria for a button popup\"\n        },\n        \"ariaExpanded\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"aria to be set if the popup is open\"\n        },\n        \"ariaControls\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"aria controls - receives id for the controlled region\"\n        },\n        \"aria-describedby\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AriaAttributes[\\\"aria-describedby\\\"]\",\n            \"raw\": \"AriaAttributes[\\\"aria-describedby\\\"]\"\n          },\n          \"description\": \"\"\n        },\n        \"aria-hidden\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AriaAttributes[\\\"aria-hidden\\\"]\",\n            \"raw\": \"AriaAttributes[\\\"aria-hidden\\\"]\"\n          },\n          \"description\": \"aria to be used for screen reader to know if the button is hidden\"\n        },\n        \"onFocus\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.FocusEvent<HTMLButtonElement>) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactFocusEvent\",\n                    \"raw\": \"React.FocusEvent<HTMLButtonElement>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"HTMLButtonElement\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"On Button Focus callback\"\n        },\n        \"onBlur\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.FocusEvent<HTMLButtonElement>) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactFocusEvent\",\n                    \"raw\": \"React.FocusEvent<HTMLButtonElement>\",\n                    \"elements\": [\n                      {\n                        \"name\": \"HTMLButtonElement\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"On Button Blur callback\"\n        },\n        \"rightFlat\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"leftFlat\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"preventClickAnimation\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"noSidePadding\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"defaultTextColorOnPrimaryColor\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"default color for text color in ON_PRIMARY_COLOR kind (should be any type of css color (rbg, var, hex...)\"\n        },\n        \"dataTestId\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"@deprecated - use \\\"data-testid\\\" instead\"\n        },\n        \"insetFocus\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Change the focus indicator from around the button to within it\"\n        },\n        \"tabIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"Specifies the tab order of an element\"\n        }\n      }\n    }\n  ],\n  \"src/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbContent/BreadcrumbContent.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"BreadcrumbContent\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"isClickable\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"link\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"text\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"icon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"isCurrent\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"disabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/Toast/ToastLink/ToastLink.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"ToastLink\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"componentClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"@deprecated - use className instead\"\n        },\n        \"textClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Class name for overriding link text styles\"\n        },\n        \"href\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Specifies the location (URL) of the external resource\"\n        },\n        \"text\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"The link text\"\n        },\n        \"rel\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Defines the relationship between a linked resource and the current document\"\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"onClick function - MouseEvent\"\n        },\n        \"target\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"LinkTarget\"\n          },\n          \"description\": \"Specifies where to open the linked document\"\n        },\n        \"ariaLabelDescription\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Aria label description\"\n        },\n        \"ariaDescribedby\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Identifies the element (or elements) that describes the element on which the attribute is set.\"\n        },\n        \"ariaLabeledBy\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"element id to describe the counter accordingly\"\n        },\n        \"icon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"Icon to add to the link element\"\n        },\n        \"iconPosition\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"IconPosition\"\n          },\n          \"description\": \"the position of the icon in relation to the etext\"\n        },\n        \"disableNavigation\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"disable navigation\"\n        },\n        \"inheritFontSize\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"inherit text size\"\n        },\n        \"inlineText\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"if the link is in part of other text content\"\n        }\n      }\n    }\n  ],\n  \"src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"ColorPickerClearButton\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"onClick\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"text\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"Icon\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/ColorPicker/components/ColorPickerContent/ColorPickerColorsGrid.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"ColorPickerColorsGrid\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"onColorClicked\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(color: ColorPickerValueOnly) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"union\",\n                    \"raw\": \"CONTENT_COLORS_VALUES | string\",\n                    \"elements\": [\n                      {\n                        \"name\": \"unknown[number]\",\n                        \"raw\": \"(typeof contentColors)[number]\"\n                      },\n                      {\n                        \"name\": \"string\"\n                      }\n                    ]\n                  },\n                  \"name\": \"color\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"colorsToRender\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"CONTENT_COLORS_VALUES[] | string[]\",\n            \"elements\": [\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"unknown[number]\",\n                    \"raw\": \"(typeof contentColors)[number]\"\n                  }\n                ],\n                \"raw\": \"CONTENT_COLORS_VALUES[]\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"string\"\n                  }\n                ],\n                \"raw\": \"string[]\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"ColorIndicatorIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"SelectedIndicatorIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"colorStyle\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ColorStyle\"\n          },\n          \"description\": \"\"\n        },\n        \"value\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | string[]\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"string\"\n                  }\n                ],\n                \"raw\": \"string[]\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"shouldRenderIndicatorWithoutBackground\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"colorSize\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"BaseSizes\"\n          },\n          \"description\": \"\"\n        },\n        \"numberOfColorsInLine\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"tooltipContentByColor\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Partial\",\n            \"elements\": [\n              {\n                \"name\": \"intersection\",\n                \"raw\": \"Record<CONTENT_COLORS_VALUES, string> & Record<string, string>\",\n                \"elements\": [\n                  {\n                    \"name\": \"Record\",\n                    \"elements\": [\n                      {\n                        \"name\": \"unknown[number]\",\n                        \"raw\": \"(typeof contentColors)[number]\"\n                      },\n                      {\n                        \"name\": \"string\"\n                      }\n                    ],\n                    \"raw\": \"Record<CONTENT_COLORS_VALUES, string>\"\n                  },\n                  {\n                    \"name\": \"Record\",\n                    \"elements\": [\n                      {\n                        \"name\": \"string\"\n                      },\n                      {\n                        \"name\": \"string\"\n                      }\n                    ],\n                    \"raw\": \"Record<string, string>\"\n                  }\n                ]\n              }\n            ],\n            \"raw\": \"Partial<Record<CONTENT_COLORS_VALUES, string> & Record<string, string>>\"\n          },\n          \"description\": \"\"\n        },\n        \"focusOnMount\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"colorShape\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ColorShapes\"\n          },\n          \"description\": \"\"\n        },\n        \"showColorNameTooltip\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"ColorPickerContent\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"value\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ColorPickerValueOnly | ColorPickerArrayValueOnly\",\n            \"elements\": [\n              {\n                \"name\": \"union\",\n                \"raw\": \"CONTENT_COLORS_VALUES | string\",\n                \"elements\": [\n                  {\n                    \"name\": \"unknown[number]\",\n                    \"raw\": \"(typeof contentColors)[number]\"\n                  },\n                  {\n                    \"name\": \"string\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"union\",\n                \"raw\": \"CONTENT_COLORS_VALUES[] | string[]\",\n                \"elements\": [\n                  {\n                    \"name\": \"Array\",\n                    \"elements\": [\n                      {\n                        \"name\": \"unknown[number]\",\n                        \"raw\": \"(typeof contentColors)[number]\"\n                      }\n                    ],\n                    \"raw\": \"CONTENT_COLORS_VALUES[]\"\n                  },\n                  {\n                    \"name\": \"Array\",\n                    \"elements\": [\n                      {\n                        \"name\": \"string\"\n                      }\n                    ],\n                    \"raw\": \"string[]\"\n                  }\n                ]\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"onValueChange\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(value: ColorPickerArrayValueOnly) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"union\",\n                    \"raw\": \"CONTENT_COLORS_VALUES[] | string[]\",\n                    \"elements\": [\n                      {\n                        \"name\": \"Array\",\n                        \"elements\": [\n                          {\n                            \"name\": \"unknown[number]\",\n                            \"raw\": \"(typeof contentColors)[number]\"\n                          }\n                        ],\n                        \"raw\": \"CONTENT_COLORS_VALUES[]\"\n                      },\n                      {\n                        \"name\": \"Array\",\n                        \"elements\": [\n                          {\n                            \"name\": \"string\"\n                          }\n                        ],\n                        \"raw\": \"string[]\"\n                      }\n                    ]\n                  },\n                  \"name\": \"value\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"colorsList\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"CONTENT_COLORS_VALUES[] | string[]\",\n            \"elements\": [\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"unknown[number]\",\n                    \"raw\": \"(typeof contentColors)[number]\"\n                  }\n                ],\n                \"raw\": \"CONTENT_COLORS_VALUES[]\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"string\"\n                  }\n                ],\n                \"raw\": \"string[]\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"ColorIndicatorIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"SelectedIndicatorIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"NoColorIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"({size, ...props}) => (\\n  <svg viewBox=\\\"0 0 20 20\\\" fill=\\\"currentColor\\\" width={ size || \\\"20\\\" } height={ size || \\\"20\\\" } {...props}>\\n    <path d=\\\"M9.99869 2.45479C10.29 2.1796 10.7462 2.18205 11.0346 2.46035 11.8801 3.27645 12.629 4.18707 13.2665 5.17427 13.4912 5.52224 13.3913 5.98648 13.0433 6.21118 12.6953 6.43589 12.2311 6.33596 12.0064 5.98799 11.5642 5.30318 11.0625 4.65922 10.5075 4.06347 8.55502 6.10494 6.79968 9.10384 6.79968 12.2306 6.79968 12.6448 6.4639 12.9806 6.04968 12.9806 5.63547 12.9806 5.29968 12.6448 5.29968 12.2306 5.29968 8.25797 7.68621 4.63918 9.99869 2.45479zM14.0817 8.2783C14.4692 8.13179 14.902 8.3271 15.0485 8.71454 15.4712 9.83227 15.7016 11.0135 15.7298 12.2081 15.7548 12.9019 15.6367 13.5934 15.3829 14.2396 15.1285 14.8874 14.7432 15.4758 14.251 15.9679 13.7589 16.4601 13.1705 16.8454 12.5227 17.0998 11.881 17.3518 11.1947 17.47 10.5059 17.4472 9.21585 17.4632 7.96422 17.0068 6.98717 16.1636 6.67359 15.893 6.63877 15.4194 6.9094 15.1058 7.18003 14.7922 7.65362 14.7574 7.9672 15.028 8.67056 15.635 9.57259 15.9622 10.5015 15.9471 10.5148 15.9469 10.5281 15.9471 10.5414 15.9476 11.0307 15.9657 11.5186 15.8826 11.9744 15.7036 12.4302 15.5246 12.8441 15.2535 13.1904 14.9073 13.5366 14.561 13.8077 14.1471 13.9867 13.6913 14.1657 13.2355 14.2487 12.7477 14.2306 12.2583L14.2303 12.248 14.2303 12.248C14.2065 11.2211 14.0088 10.2058 13.6455 9.2451 13.499 8.85766 13.6943 8.42481 14.0817 8.2783zM17.3142 3.38282C17.6071 3.67571 17.6071 4.15058 17.3142 4.44348L4.53033 17.2274C4.23744 17.5203 3.76256 17.5203 3.46967 17.2274 3.17678 16.9345 3.17678 16.4596 3.46967 16.1667L16.2536 3.38282C16.5465 3.08992 17.0214 3.08992 17.3142 3.38282z\\\"\\n      fill=\\\"currentColor\\\" fillRule=\\\"evenodd\\\" clipRule=\\\"evenodd\\\" />\\n  </svg>\\n)\",\n            \"computed\": false\n          }\n        },\n        \"colorStyle\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ColorStyle\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"ColorStyle.REGULAR\",\n            \"computed\": true\n          }\n        },\n        \"colorSize\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"BaseSizes\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"BaseSizes.MEDIUM\",\n            \"computed\": true\n          }\n        },\n        \"colorShape\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ColorShapes\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"ColorShapes.SQUARE\",\n            \"computed\": true\n          }\n        },\n        \"tooltipContentByColor\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Partial\",\n            \"elements\": [\n              {\n                \"name\": \"Record\",\n                \"elements\": [\n                  {\n                    \"name\": \"unknown[number]\",\n                    \"raw\": \"(typeof contentColors)[number]\"\n                  },\n                  {\n                    \"name\": \"string\"\n                  }\n                ],\n                \"raw\": \"Record<CONTENT_COLORS_VALUES, string>\"\n              }\n            ],\n            \"raw\": \"Partial<Record<CONTENT_COLORS_VALUES, string>>\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"{}\",\n            \"computed\": false\n          }\n        },\n        \"noColorText\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"shouldRenderIndicatorWithoutBackground\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"isBlackListMode\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"true\",\n            \"computed\": false\n          }\n        },\n        \"numberOfColorsInLine\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"5\",\n            \"computed\": false\n          }\n        },\n        \"focusOnMount\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"isMultiselect\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"forceUseRawColorList\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Used to force the component render the colorList prop as is. Usually, this flag should not be used. It's intended only for edge cases.\\nUsually, only \\\"monday colors\\\" will be rendered (unless blacklist mode is used). This flag will override this behavior.\"\n        },\n        \"showColorNameTooltip\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Used to enable color name tooltip on each color in the component.\\nWhen \\\"tooltipContentByColor\\\" is supplied, it will override the color name tooltip.\"\n        }\n      }\n    }\n  ],\n  \"src/components/Combobox/components/ComboboxCategory/ComboboxCategory.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"ComboboxCategory\",\n      \"props\": {\n        \"category\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"IComboboxCategory\"\n          },\n          \"description\": \"\"\n        },\n        \"className\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Combobox/components/ComboboxItems/ComboboxItems.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"ComboboxItems\",\n      \"props\": {\n        \"onOptionClick\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(\\n  event: React.MouseEvent | React.KeyboardEvent,\\n  index: number,\\n  option: IComboboxOption,\\n  mouseTriggered: boolean\\n) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"union\",\n                    \"raw\": \"React.MouseEvent | React.KeyboardEvent\",\n                    \"elements\": [\n                      {\n                        \"name\": \"ReactMouseEvent\",\n                        \"raw\": \"React.MouseEvent\"\n                      },\n                      {\n                        \"name\": \"ReactKeyboardEvent\",\n                        \"raw\": \"React.KeyboardEvent\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"index\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"IComboboxOption\"\n                  },\n                  \"name\": \"option\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"boolean\"\n                  },\n                  \"name\": \"mouseTriggered\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onOptionLeave\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent, index: number, option: IComboboxOption, mouseTriggered: boolean) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"index\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"IComboboxOption\"\n                  },\n                  \"name\": \"option\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"boolean\"\n                  },\n                  \"name\": \"mouseTriggered\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onOptionEnter\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent, index: number, option: IComboboxOption, mouseTriggered: boolean) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"index\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"IComboboxOption\"\n                  },\n                  \"name\": \"option\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"boolean\"\n                  },\n                  \"name\": \"mouseTriggered\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onOptionHover\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent, index: number, option: IComboboxOption, mouseTriggered: boolean) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"index\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"IComboboxOption\"\n                  },\n                  \"name\": \"option\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"boolean\"\n                  },\n                  \"name\": \"mouseTriggered\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"optionClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"categories\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"IComboboxCategoryMap\"\n          },\n          \"description\": \"\"\n        },\n        \"options\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Array\",\n            \"elements\": [\n              {\n                \"name\": \"IComboboxItem\"\n              }\n            ],\n            \"raw\": \"IComboboxItem[]\"\n          },\n          \"description\": \"\"\n        },\n        \"optionRenderer\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(option: IComboboxOption) => JSX.Element\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"IComboboxOption\"\n                  },\n                  \"name\": \"option\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"JSX.Element\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"activeItemIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"visualFocusItemIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"optionLineHeight\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"shouldScrollToSelectedItem\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"renderOnlyVisibleOptions\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"onActiveCategoryChanged\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(category: IComboboxItem) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"IComboboxItem\"\n                  },\n                  \"name\": \"category\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"maxOptionsWithoutScroll\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"itemsMap\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Map\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"IComboboxItem\"\n              }\n            ],\n            \"raw\": \"Map<string, IComboboxItem>\"\n          },\n          \"description\": \"\"\n        },\n        \"stickyCategories\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Combobox/components/StickyCategoryHeader/StickyCategoryHeader.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"StickyCategoryHeader\",\n      \"props\": {\n        \"label\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"ColorPickerItemComponent\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"color\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"CONTENT_COLORS_VALUES | string\",\n            \"elements\": [\n              {\n                \"name\": \"unknown[number]\",\n                \"raw\": \"(typeof contentColors)[number]\"\n              },\n              {\n                \"name\": \"string\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"onColorClicked\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(color: ColorPickerValueOnly) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"union\",\n                    \"raw\": \"CONTENT_COLORS_VALUES | string\",\n                    \"elements\": [\n                      {\n                        \"name\": \"unknown[number]\",\n                        \"raw\": \"(typeof contentColors)[number]\"\n                      },\n                      {\n                        \"name\": \"string\"\n                      }\n                    ]\n                  },\n                  \"name\": \"color\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"colorStyle\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ColorStyle\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"ColorStyle.REGULAR\",\n            \"computed\": true\n          }\n        },\n        \"shouldRenderIndicatorWithoutBackground\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"ColorIndicatorIcon\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"SelectedIndicatorIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"ColorIndicatorIcon\",\n            \"computed\": false\n          }\n        },\n        \"isSelected\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"colorSize\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"BaseSizes\"\n          },\n          \"description\": \"\"\n        },\n        \"tooltipContent\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ReactNode | ReactNode[]\",\n            \"elements\": [\n              {\n                \"name\": \"ReactNode\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactNode\"\n                  }\n                ],\n                \"raw\": \"ReactNode[]\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"isActive\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"colorShape\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"ColorShapes\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Dropdown/components/DropdownIndicator/DropdownIndicator.jsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"DropdownIndicator\"\n    }\n  ],\n  \"src/components/Dropdown/components/MultiValue/MultiValue.jsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"MultiValue\"\n    }\n  ],\n  \"src/components/Dropdown/components/Control/Control.jsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Control\"\n    }\n  ],\n  \"src/components/Combobox/components/ComboboxOption/ComboboxOption.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"ComboboxOption\",\n      \"props\": {\n        \"onOptionClick\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(\\n  event: React.MouseEvent | React.KeyboardEvent,\\n  index: number,\\n  option: IComboboxOption,\\n  mouseTriggered: boolean\\n) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"union\",\n                    \"raw\": \"React.MouseEvent | React.KeyboardEvent\",\n                    \"elements\": [\n                      {\n                        \"name\": \"ReactMouseEvent\",\n                        \"raw\": \"React.MouseEvent\"\n                      },\n                      {\n                        \"name\": \"ReactKeyboardEvent\",\n                        \"raw\": \"React.KeyboardEvent\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"index\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"IComboboxOption\"\n                  },\n                  \"name\": \"option\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"boolean\"\n                  },\n                  \"name\": \"mouseTriggered\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onOptionLeave\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent, index: number, option: IComboboxOption, mouseTriggered: boolean) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"index\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"IComboboxOption\"\n                  },\n                  \"name\": \"option\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"boolean\"\n                  },\n                  \"name\": \"mouseTriggered\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onOptionEnter\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent, index: number, option: IComboboxOption, mouseTriggered: boolean) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"index\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"IComboboxOption\"\n                  },\n                  \"name\": \"option\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"boolean\"\n                  },\n                  \"name\": \"mouseTriggered\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onOptionHover\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent, index: number, option: IComboboxOption, mouseTriggered: boolean) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"index\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"IComboboxOption\"\n                  },\n                  \"name\": \"option\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"boolean\"\n                  },\n                  \"name\": \"mouseTriggered\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"index\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"option\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"IComboboxOption\"\n          },\n          \"description\": \"\"\n        },\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"isActive\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"visualFocus\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"scrollRef\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"RefObject\",\n            \"elements\": [\n              {\n                \"name\": \"HTMLElement\"\n              }\n            ],\n            \"raw\": \"RefObject<HTMLElement>\"\n          },\n          \"description\": \"\"\n        },\n        \"scrollOffset\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"100\",\n            \"computed\": false\n          }\n        },\n        \"optionLineHeight\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"shouldScrollWhenActive\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"true\",\n            \"computed\": false\n          }\n        },\n        \"optionRenderer\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(option: IComboboxOption) => JSX.Element\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"IComboboxOption\"\n                  },\n                  \"name\": \"option\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"JSX.Element\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        }\n      }\n    }\n  ],\n  \"src/components/Dropdown/components/MultiValueContainer/MultiValueContainer.jsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Container\"\n    }\n  ],\n  \"src/components/Dropdown/components/option/option.jsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Option\"\n    }\n  ],\n  \"src/components/Dropdown/components/singleValue/singleValue.jsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"SingleValue\"\n    }\n  ],\n  \"src/components/Menu/MenuItem/MenuItem.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"MenuItem\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"title\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"label\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"icon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"\\\"\",\n            \"computed\": false\n          }\n        },\n        \"iconType\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"IconType\"\n          },\n          \"description\": \"\"\n        },\n        \"iconBackgroundColor\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"disabled\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"disableReason\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"selected\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent | React.KeyboardEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"union\",\n                    \"raw\": \"React.MouseEvent | React.KeyboardEvent\",\n                    \"elements\": [\n                      {\n                        \"name\": \"ReactMouseEvent\",\n                        \"raw\": \"React.MouseEvent\"\n                      },\n                      {\n                        \"name\": \"ReactKeyboardEvent\",\n                        \"raw\": \"React.KeyboardEvent\"\n                      }\n                    ]\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"activeItemIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"-1\",\n            \"computed\": false\n          }\n        },\n        \"setActiveItemIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(index: number) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"index\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"index\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\"\n        },\n        \"key\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"isParentMenuVisible\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"resetOpenSubMenuIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"hasOpenSubMenu\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"setSubMenuIsOpenByIndex\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(index: number, isOpen: boolean) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"index\"\n                },\n                {\n                  \"type\": {\n                    \"name\": \"boolean\"\n                  },\n                  \"name\": \"isOpen\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"useDocumentEventListeners\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"tooltipContent\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"tooltipPosition\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"unknown[unknown]\",\n            \"raw\": \"(typeof MenuItem.tooltipPositions)[keyof typeof MenuItem.tooltipPositions]\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"MenuItem.tooltipPositions.RIGHT\",\n            \"computed\": true\n          }\n        },\n        \"tooltipShowDelay\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"300\",\n            \"computed\": false\n          }\n        },\n        \"tooltipProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Partial\",\n            \"elements\": [\n              {\n                \"name\": \"intersection\",\n                \"raw\": \"TooltipBaseProps & (TooltipWithChildrenProps | TooltipWithoutChildrenProps)\",\n                \"elements\": [\n                  {\n                    \"name\": \"TooltipBaseProps\"\n                  },\n                  {\n                    \"name\": \"unknown\"\n                  }\n                ]\n              }\n            ],\n            \"raw\": \"Partial<TooltipProps>\"\n          },\n          \"description\": \"\"\n        },\n        \"onMouseLeave\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onMouseEnter\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"classname\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"@deprecated - use className instead\"\n        },\n        \"iconWrapperClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Class name which is added to div which wraps an Icon\"\n        },\n        \"isInitialSelectedState\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"shouldScrollMenu\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"closeMenu\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(option: CloseMenuOption) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"signature\",\n                    \"type\": \"object\",\n                    \"raw\": \"{\\n  propagate?: boolean;\\n}\",\n                    \"signature\": {\n                      \"properties\": [\n                        {\n                          \"key\": \"propagate\",\n                          \"value\": {\n                            \"name\": \"boolean\",\n                            \"required\": false\n                          }\n                        }\n                      ]\n                    }\n                  },\n                  \"name\": \"option\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"menuRef\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ReactRefObject\",\n            \"raw\": \"React.RefObject<HTMLElement>\",\n            \"elements\": [\n              {\n                \"name\": \"HTMLElement\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"MenuChild | MenuChild[]\",\n            \"elements\": [\n              {\n                \"name\": \"intersection\",\n                \"raw\": \"ReactElement & {\\n  type?: {\\n    isSelectable?: boolean;\\n    isMenuChild?: boolean;\\n    isMenu?: boolean;\\n    supportFocusOnMount?: boolean;\\n  };\\n}\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactElement\"\n                  },\n                  {\n                    \"name\": \"signature\",\n                    \"type\": \"object\",\n                    \"raw\": \"{\\n  type?: {\\n    isSelectable?: boolean;\\n    isMenuChild?: boolean;\\n    isMenu?: boolean;\\n    supportFocusOnMount?: boolean;\\n  };\\n}\",\n                    \"signature\": {\n                      \"properties\": [\n                        {\n                          \"key\": \"type\",\n                          \"value\": {\n                            \"name\": \"signature\",\n                            \"type\": \"object\",\n                            \"raw\": \"{\\n  isSelectable?: boolean;\\n  isMenuChild?: boolean;\\n  isMenu?: boolean;\\n  supportFocusOnMount?: boolean;\\n}\",\n                            \"signature\": {\n                              \"properties\": [\n                                {\n                                  \"key\": \"isSelectable\",\n                                  \"value\": {\n                                    \"name\": \"boolean\",\n                                    \"required\": false\n                                  }\n                                },\n                                {\n                                  \"key\": \"isMenuChild\",\n                                  \"value\": {\n                                    \"name\": \"boolean\",\n                                    \"required\": false\n                                  }\n                                },\n                                {\n                                  \"key\": \"isMenu\",\n                                  \"value\": {\n                                    \"name\": \"boolean\",\n                                    \"required\": false\n                                  }\n                                },\n                                {\n                                  \"key\": \"supportFocusOnMount\",\n                                  \"value\": {\n                                    \"name\": \"boolean\",\n                                    \"required\": false\n                                  }\n                                }\n                              ]\n                            },\n                            \"required\": false\n                          }\n                        }\n                      ]\n                    }\n                  }\n                ]\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"intersection\",\n                    \"raw\": \"ReactElement & {\\n  type?: {\\n    isSelectable?: boolean;\\n    isMenuChild?: boolean;\\n    isMenu?: boolean;\\n    supportFocusOnMount?: boolean;\\n  };\\n}\",\n                    \"elements\": [\n                      {\n                        \"name\": \"ReactElement\"\n                      },\n                      {\n                        \"name\": \"signature\",\n                        \"type\": \"object\",\n                        \"raw\": \"{\\n  type?: {\\n    isSelectable?: boolean;\\n    isMenuChild?: boolean;\\n    isMenu?: boolean;\\n    supportFocusOnMount?: boolean;\\n  };\\n}\",\n                        \"signature\": {\n                          \"properties\": [\n                            {\n                              \"key\": \"type\",\n                              \"value\": {\n                                \"name\": \"signature\",\n                                \"type\": \"object\",\n                                \"raw\": \"{\\n  isSelectable?: boolean;\\n  isMenuChild?: boolean;\\n  isMenu?: boolean;\\n  supportFocusOnMount?: boolean;\\n}\",\n                                \"signature\": {\n                                  \"properties\": [\n                                    {\n                                      \"key\": \"isSelectable\",\n                                      \"value\": {\n                                        \"name\": \"boolean\",\n                                        \"required\": false\n                                      }\n                                    },\n                                    {\n                                      \"key\": \"isMenuChild\",\n                                      \"value\": {\n                                        \"name\": \"boolean\",\n                                        \"required\": false\n                                      }\n                                    },\n                                    {\n                                      \"key\": \"isMenu\",\n                                      \"value\": {\n                                        \"name\": \"boolean\",\n                                        \"required\": false\n                                      }\n                                    },\n                                    {\n                                      \"key\": \"supportFocusOnMount\",\n                                      \"value\": {\n                                        \"name\": \"boolean\",\n                                        \"required\": false\n                                      }\n                                    }\n                                  ]\n                                },\n                                \"required\": false\n                              }\n                            }\n                          ]\n                        }\n                      }\n                    ]\n                  }\n                ],\n                \"raw\": \"MenuChild[]\"\n              }\n            ]\n          },\n          \"description\": \"\"\n        },\n        \"splitMenuItem\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"Type of menu item with sub menu, which has two click/hover options-\\n   1. click on the main menu item will trigger onClick\\n   2. click/hover on icon button will open the sub menu\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"aria-label\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"AriaAttributes[\\\"aria-label\\\"]\",\n            \"raw\": \"AriaAttributes[\\\"aria-label\\\"]\"\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Tipseen/TipseenContent.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"TipseenContent\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"title\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"titleClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"Classname for overriding TipseenTitle styles\"\n        },\n        \"isDismissHidden\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"@deprecated - use hideDismiss instead\"\n        },\n        \"hideDismiss\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"children\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"ReactNode | ReactNode[]\",\n            \"elements\": [\n              {\n                \"name\": \"ReactNode\"\n              },\n              {\n                \"name\": \"Array\",\n                \"elements\": [\n                  {\n                    \"name\": \"ReactNode\"\n                  }\n                ],\n                \"raw\": \"ReactNode[]\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"null\",\n            \"computed\": false\n          }\n        },\n        \"isSubmitHidden\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"@deprecated - use hideSubmit instead\"\n        },\n        \"hideSubmit\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"submitButtonText\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"submitButtonProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"intersection\",\n            \"raw\": \"ButtonProps & { content?: ElementContent }\",\n            \"elements\": [\n              {\n                \"name\": \"ButtonProps\"\n              },\n              {\n                \"name\": \"signature\",\n                \"type\": \"object\",\n                \"raw\": \"{ content?: ElementContent }\",\n                \"signature\": {\n                  \"properties\": [\n                    {\n                      \"key\": \"content\",\n                      \"value\": {\n                        \"name\": \"union\",\n                        \"raw\": \"ReactNode | ReactNode[]\",\n                        \"elements\": [\n                          {\n                            \"name\": \"ReactNode\"\n                          },\n                          {\n                            \"name\": \"Array\",\n                            \"elements\": [\n                              {\n                                \"name\": \"ReactNode\"\n                              }\n                            ],\n                            \"raw\": \"ReactNode[]\"\n                          }\n                        ],\n                        \"required\": false\n                      }\n                    }\n                  ]\n                }\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"{}\",\n            \"computed\": false\n          }\n        },\n        \"onSubmit\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"dismissButtonText\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"dismissButtonProps\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"intersection\",\n            \"raw\": \"ButtonProps & { content?: ElementContent }\",\n            \"elements\": [\n              {\n                \"name\": \"ButtonProps\"\n              },\n              {\n                \"name\": \"signature\",\n                \"type\": \"object\",\n                \"raw\": \"{ content?: ElementContent }\",\n                \"signature\": {\n                  \"properties\": [\n                    {\n                      \"key\": \"content\",\n                      \"value\": {\n                        \"name\": \"union\",\n                        \"raw\": \"ReactNode | ReactNode[]\",\n                        \"elements\": [\n                          {\n                            \"name\": \"ReactNode\"\n                          },\n                          {\n                            \"name\": \"Array\",\n                            \"elements\": [\n                              {\n                                \"name\": \"ReactNode\"\n                              }\n                            ],\n                            \"raw\": \"ReactNode[]\"\n                          }\n                        ],\n                        \"required\": false\n                      }\n                    }\n                  ]\n                }\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"{}\",\n            \"computed\": false\n          }\n        },\n        \"onDismiss\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(event: React.MouseEvent) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"ReactMouseEvent\",\n                    \"raw\": \"React.MouseEvent\"\n                  },\n                  \"name\": \"event\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/Dropdown/components/ChildrenContent/ChildrenContent.jsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"ChildrenContent\"\n    }\n  ],\n  \"src/components/Dropdown/components/ClearIndicator/ClearIndicator.jsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"ClearIndicator\"\n    }\n  ],\n  \"src/components/Dropdown/components/menu/menu.jsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Menu\"\n    }\n  ],\n  \"src/components/Modal/ModalFooter/ModalFooterButtons/ModalFooterButtons.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"ModalFooterButtons\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"primaryButtonText\": {\n          \"required\": true,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"secondaryButtonText\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"disablePrimaryButton\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\"\n        },\n        \"onPrimaryButtonClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        },\n        \"onSecondaryButtonClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"() => void\",\n            \"signature\": {\n              \"arguments\": [],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\"\n        }\n      }\n    }\n  ],\n  \"src/components/ProgressBars/LinearProgressBar/Bar/Bar.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"Bar\",\n      \"props\": {\n        \"barStyle\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ProgressBarStyle\"\n          },\n          \"description\": \"Determine the progress bar style (Supported options exposed through `LinearProgressBar.styles`).\"\n        },\n        \"min\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"The progress bar starting value.\"\n        },\n        \"max\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"The progress bar ending value.\"\n        },\n        \"value\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"The progress bar current value.\"\n        },\n        \"animated\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"If set to *true*, animations are used.\"\n        },\n        \"baseClass\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"barLabelName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"color\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"type\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"ProgressBarType\"\n          },\n          \"description\": \"\"\n        },\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        }\n      },\n      \"composes\": [\"VibeComponentProps\"]\n    }\n  ],\n  \"src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.tsx\": [\n    {\n      \"description\": \"\",\n      \"methods\": [],\n      \"displayName\": \"StepIndicator\",\n      \"props\": {\n        \"className\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"data-testid\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"id\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"status\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"StepStatus\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"StepStatus.PENDING\",\n            \"computed\": true\n          }\n        },\n        \"titleText\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"Heading text\\\"\",\n            \"computed\": false\n          }\n        },\n        \"subtitleText\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"\\\"Subtitle text\\\"\",\n            \"computed\": false\n          }\n        },\n        \"stepNumber\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"number\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"1\",\n            \"computed\": false\n          }\n        },\n        \"stepComponentClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"type\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"MultiStepType\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"MultiStepType.PRIMARY\",\n            \"computed\": true\n          }\n        },\n        \"fulfilledStepIcon\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"string | React.FC<IconSubComponentProps> | null\",\n            \"elements\": [\n              {\n                \"name\": \"string\"\n              },\n              {\n                \"name\": \"ReactFC\",\n                \"raw\": \"React.FC<IconSubComponentProps>\",\n                \"elements\": [\n                  {\n                    \"name\": \"IconSubComponentProps\"\n                  }\n                ]\n              },\n              {\n                \"name\": \"null\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"({size, ...props}) => (\\n  <svg viewBox=\\\"0 0 20 20\\\" fill=\\\"currentColor\\\" width={ size || \\\"20\\\" } height={ size || \\\"20\\\" } {...props}>\\n    <path d=\\\"M8.53033 14.2478L8 13.7175L7.46967 14.2478C7.76256 14.5407 8.23744 14.5407 8.53033 14.2478ZM8 12.6569L4.53033 9.18718C4.23744 8.89429 3.76256 8.89429 3.46967 9.18718C3.17678 9.48008 3.17678 9.95495 3.46967 10.2478L7.46967 14.2478L8 13.7175L8.53033 14.2478L16.2478 6.53033C16.5407 6.23743 16.5407 5.76256 16.2478 5.46967C15.955 5.17677 15.4801 5.17677 15.1872 5.46967L8 12.6569Z\\\"\\n      fill=\\\"currentColor\\\" fillRule=\\\"evenodd\\\" clipRule=\\\"evenodd\\\" />\\n  </svg>\\n)\",\n            \"computed\": false\n          }\n        },\n        \"fulfilledStepIconType\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"union\",\n            \"raw\": \"IconType.SVG | IconType.ICON_FONT\",\n            \"elements\": [\n              {\n                \"name\": \"IconType.SVG\"\n              },\n              {\n                \"name\": \"IconType.ICON_FONT\"\n              }\n            ]\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"IconType.SVG\",\n            \"computed\": true\n          }\n        },\n        \"isFulfilledStepDisplayNumber\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"onClick\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"signature\",\n            \"type\": \"function\",\n            \"raw\": \"(stepNumber: number) => void\",\n            \"signature\": {\n              \"arguments\": [\n                {\n                  \"type\": {\n                    \"name\": \"number\"\n                  },\n                  \"name\": \"stepNumber\"\n                }\n              ],\n              \"return\": {\n                \"name\": \"void\"\n              }\n            }\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"function NOOP() {}\",\n            \"computed\": false\n          }\n        },\n        \"isFollowedByDivider\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"stepDividerClassName\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"string\"\n          },\n          \"description\": \"\"\n        },\n        \"isVertical\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"boolean\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"false\",\n            \"computed\": false\n          }\n        },\n        \"size\": {\n          \"required\": false,\n          \"tsType\": {\n            \"name\": \"Size\"\n          },\n          \"description\": \"\",\n          \"defaultValue\": {\n            \"value\": \"Size.REGULAR\",\n            \"computed\": true\n          }\n        }\n      }\n    }\n  ]\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/EntranceAnimation.tsx",
    "content": "import React from \"react\";\nimport { motion } from \"framer-motion\";\n\ninterface EntranceAnimationProps {\n  children: React.ReactNode;\n  delay?: number;\n}\n\nconst EntranceAnimation: React.FC<EntranceAnimationProps> = ({ children, delay = 0.1 }) => {\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: 100 }}\n      whileInView={{ opacity: 1, y: 0 }}\n      viewport={{ once: true, amount: 0.2 }}\n      transition={{\n        type: \"spring\",\n        stiffness: 400,\n        damping: 50,\n        mass: 1,\n        delay\n      }}\n    >\n      {children}\n    </motion.div>\n  );\n};\n\nexport default EntranceAnimation;\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/Section.module.scss",
    "content": ".section {\n  color: var(--sb-primary-text-color);\n  -webkit-font-smoothing: initial;\n  font-family: var(--sb-title-font-family);\n  letter-spacing: -1px;\n  font-size: 32px;\n  line-height: 125%;\n  font-weight: 500;\n  margin-bottom: var(--sb-space-12);\n\n  @media (max-width: 1024px) {\n    font-size: 24px;\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/Section.tsx",
    "content": "import React from \"react\";\nimport styles from \"./Section.module.scss\";\nimport cx from \"classnames\";\nimport { motion, type MotionProps } from \"framer-motion\";\n\nexport default function Section({\n  children,\n  className,\n  ...motionProps\n}: {\n  children: React.ReactNode;\n  className?: string;\n} & MotionProps) {\n  return (\n    <motion.h2 className={cx(styles.section, className)} {...motionProps}>\n      {children}\n    </motion.h2>\n  );\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/Title.module.scss",
    "content": ".title {\n  color: var(--sb-primary-text-color);\n  -webkit-font-smoothing: initial;\n  letter-spacing: -1.333px;\n  font-size: 26px;\n  font-weight: 700;\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/Title.tsx",
    "content": "import React from \"react\";\nimport styles from \"./Title.module.scss\";\nimport cx from \"classnames\";\n\nexport default function Title({ children, className }: { children: React.ReactNode; className?: string }) {\n  return <h3 className={cx(styles.title, className)}>{children}</h3>;\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/banner/Vibe4Banner.module.scss",
    "content": ".vibe4Banner {\n  padding: var(--space-16);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: var(--space-8);\n  border-radius: var(--border-radius-medium);\n  position: relative;\n  overflow: hidden;\n\n  .content {\n    display: flex;\n    align-items: center;\n    gap: var(--space-8);\n    z-index: 1;\n\n    .text {\n      color: #323338;\n      font-family: Poppins;\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: 100%;\n      letter-spacing: -0.12px;\n      display: flex;\n      align-items: center;\n      align-self: center;\n      gap: var(--space-4);\n    }\n\n    .title {\n      color: #323338;\n      font-family: Poppins;\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 100%;\n      letter-spacing: -0.12px;\n    }\n\n    .link {\n      color: #323338;\n      text-decoration: underline;\n      font-size: 16px;\n      font-weight: 400;\n\n      &:hover {\n        opacity: 0.7;\n      }\n    }\n  }\n\n  .bubble1 {\n    width: 307.5px;\n    height: 232.5px;\n    position: absolute;\n    right: 518.5px;\n    bottom: -184.5px;\n    border-radius: 307.5px;\n    opacity: 0.4;\n    background: #d4b8ff;\n    filter: blur(120px);\n  }\n\n  .bubble2 {\n    width: 307.5px;\n    height: 232.5px;\n    position: absolute;\n    left: 358px;\n    top: -194px;\n    border-radius: 307.5px;\n    opacity: 0.4;\n    background: #90d0ff;\n    filter: blur(120px);\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/banner/Vibe4Banner.tsx",
    "content": "import React from \"react\";\nimport styles from \"./Vibe4Banner.module.scss\";\n\nconst Vibe4Banner: React.FC = () => {\n  return (\n    <div className={styles.vibe4Banner}>\n      <div className={styles.bubble1}></div>\n      <div className={styles.bubble2}></div>\n      <div className={styles.content}>\n        <div className={styles.text}>\n          <span className={styles.title}>Vibe 4 is here!</span> Check out the{\" \"}\n          <a\n            href=\"https://vibe.monday.com/?path=/docs/migration-guide--docs\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            className={styles.link}\n          >\n            migration guide\n          </a>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Vibe4Banner;\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/contributions/Contributor.module.scss",
    "content": ".contributor {\n  border-radius: 5px;\n  background-color: var(--sb-dark-background-color);\n  display: inline-block;\n  padding: 4px 10px;\n  margin: 0 12px 12px 0;\n  text-decoration: none;\n  vertical-align: middle;\n\n  &:hover {\n    background-color: var(--sb-primary-background-hover-color);\n  }\n\n  .image {\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/contributions/Contributor.tsx",
    "content": "import React from \"react\";\nimport { Flex, Text, Tooltip, type ElementContent } from \"@vibe/core\";\nimport styles from \"./Contributor.module.scss\";\n\nexport interface ContributorProps {\n  name: string;\n  image?: string;\n  href: string;\n  tooltip?: ElementContent;\n}\n\nexport default function Contributor({ name, image, href, tooltip }: ContributorProps) {\n  const contributor = (\n    <a href={href} target=\"_blank\" rel=\"noreferrer\" className={styles.contributor}>\n      <Flex gap=\"xs\">\n        {image && <img src={image} alt={name} className={styles.image} />}\n        <Text>{name}</Text>\n      </Flex>\n    </a>\n  );\n\n  if (tooltip) {\n    return <Tooltip content={tooltip}>{contributor}</Tooltip>;\n  }\n  return contributor;\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/contributions/Contributors.module.scss",
    "content": ".sectionName {\n  margin: 0;\n  position: sticky;\n  top: 40px;\n}\n\n.subtitle {\n  font-size: 20px;\n  line-height: 140%;\n  letter-spacing: 0.4px;\n  margin-bottom: 32px;\n  color: var(--sb-secondary-text-color);\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/contributions/Contributors.tsx",
    "content": "import React from \"react\";\nimport styles from \"./Contributors.module.scss\";\nimport { Flex } from \"@vibe/core\";\nimport Founders from \"./Founders\";\nimport ContributorsList from \"./ContributorsList\";\nimport Section from \"../Section\";\n\nexport default function Contributors() {\n  return (\n    <Flex align=\"start\" style={{ gap: \"200px\" }} className={styles.contributorsSection}>\n      <Section\n        className={styles.sectionName}\n        initial={{ opacity: 0, y: 100 }}\n        whileInView={{ opacity: 1, y: 0 }}\n        viewport={{ once: true, amount: 0.2 }}\n        transition={{\n          type: \"spring\",\n          stiffness: 400,\n          damping: 50,\n          mass: 1\n        }}\n      >\n        Our Contributors\n      </Section>\n\n      <div>\n        <div className={styles.subtitle}>Founders</div>\n        <Founders />\n        <div className={styles.subtitle}>Contributors</div>\n        <ContributorsList />\n      </div>\n    </Flex>\n  );\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/contributions/ContributorsList.tsx",
    "content": "import React from \"react\";\nimport Contributor from \"./Contributor\";\nimport useContributors from \"./useContributors\";\nimport Sergey from \"./assets/Sergey.png\";\nimport Rotem from \"./assets/Rotem.png\";\nimport Devorah from \"./assets/Devorah.png\";\nimport Dmitry from \"./assets/Dmitry.png\";\nimport Shay from \"./assets/Shay.png\";\nimport Eylon from \"./assets/Eylon.png\";\nimport Noa from \"./assets/Noa.png\";\nimport LeanyLabs from \"./assets/LeanyLabs.png\";\nimport Meytal from \"./assets/Meytal.png\";\nimport Hadas from \"./assets/Hadas.png\";\n\nconst CONTRIBUTORS = [\n  {\n    name: \"Meytal Badichi\",\n    href: \"https://www.linkedin.com/in/meytal-badichi-561439125/\",\n    image: Meytal,\n    tooltip: \"Product Designer\"\n  },\n  {\n    name: \"Hadas Farhi\",\n    href: \"https://www.linkedin.com/in/hadasfarhi/\",\n    image: Hadas,\n    tooltip: \"Software Engineer\"\n  },\n  {\n    name: \"Sergey Roytman\",\n    href: \"https://www.linkedin.com/in/sergey-roytman/\",\n    image: Sergey\n  },\n  {\n    name: \"Dmitry Kogan\",\n    href: \"mailto:dimako@monday.com\",\n    image: Dmitry\n  },\n  {\n    name: \"Eylon Goren\",\n    href: \"mailto:eylon@monday.com\",\n    image: Eylon\n  },\n  {\n    name: \"Rotem Dekel\",\n    href: \"https://www.linkedin.com/in/rotem-dekel-7a8b12133/\",\n    image: Rotem\n  },\n  {\n    name: \"Devorah Friedman\",\n    href: \"mailto:devorahfr@monday.com\",\n    image: Devorah\n  },\n  {\n    name: \"Shay Cohen\",\n    href: \"mailto:shay@monday.com\",\n    image: Shay\n  },\n  {\n    name: \"Noa Fenko\",\n    href: \"mailto:noafe@monday.com\",\n    image: Noa\n  },\n  {\n    name: \"LeanyLabs\",\n    href: \"https://github.com/LeanyLabs\",\n    image: LeanyLabs\n  }\n];\n\nconst excludedContributors = [\"dependabot[bot]\", \"github-actions[bot]\", \"snyk-bot\", \"vibe-gh\"];\n\nexport default function ContributorsList() {\n  const { contributors } = useContributors({\n    organizationName: \"mondaycom\",\n    packageName: \"vibe\",\n    excludedContributors\n  });\n  return (\n    <div>\n      {[...CONTRIBUTORS, ...contributors].map((founder, index) => (\n        <Contributor key={index} name={founder.name} image={founder.image} href={founder.href} />\n      ))}\n    </div>\n  );\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/contributions/Founders.module.scss",
    "content": ".founders {\n  margin-bottom: 104px;\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/contributions/Founders.tsx",
    "content": "import React from \"react\";\nimport Contributor from \"./Contributor\";\nimport Evgeniy from \"./assets/Evgeniy.png\";\nimport Orr from \"./assets/Orr.png\";\n\nimport styles from \"./Founders.module.scss\";\n\nconst FOUNDERS = [\n  {\n    name: \"Orr Gottlieb\",\n    href: \"https://www.linkedin.com/in/orrgottlieb/\",\n    image: Orr,\n    tooltip: \"Software Engineer\"\n  },\n  {\n    name: \"Evgeniy Kazinec\",\n    href: \"https://www.linkedin.com/in/evgeniy-kazinec/\",\n    image: Evgeniy,\n    tooltip: \"Product Designer\"\n  }\n];\n\nexport default function Founders() {\n  return (\n    <div className={styles.founders}>\n      {FOUNDERS.map((founder, index) => (\n        <Contributor\n          key={index}\n          name={founder.name}\n          image={founder.image}\n          href={founder.href}\n          tooltip={founder.tooltip}\n        />\n      ))}\n    </div>\n  );\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/contributions/Team.module.scss",
    "content": ".container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.text {\n  color: var(--sb-secondary-text-color);\n  font-size: 16px;\n  font-weight: 400;\n  letter-spacing: 0.44px;\n  line-height: 140%;\n  margin: 0;\n}\n\n.team {\n  display: grid;\n  grid-template-columns: repeat(5, 96px);\n  justify-content: space-between;\n  width: 100%;\n  gap: 60px 48px;\n  margin-bottom: 160px;\n\n  img {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n  }\n\n  @media screen and (max-width: 1200px) {\n    grid-template-columns: repeat(4, 96px);\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/contributions/Team.tsx",
    "content": "import React from \"react\";\nimport { TeamMember } from \"./TeamMember\";\nimport Meirav from \"./assets/Meirav.png\";\nimport Yossi from \"./assets/Yossi.png\";\nimport Rivka from \"./assets/Rivka.png\";\nimport Elad from \"./assets/Elad.png\";\nimport Dan from \"./assets/Dan.png\";\nimport Naama from \"./assets/Naama.png\";\nimport Yael from \"./assets/Yael.png\";\nimport Talko from \"./assets/Talko.png\";\nimport Anna from \"./assets/Anna.png\";\nimport Orr from \"./assets/Orr.png\";\nimport Ron from \"./assets/Ron.png\";\nimport { Flex } from \"@vibe/core\";\nimport styles from \"./Team.module.scss\";\nimport Section from \"../Section\";\nimport EntranceAnimation from \"../EntranceAnimation\";\n\nconst team = [\n  {\n    imgSrc: Orr,\n    name: \"Orr Gottlieb\",\n    linkedinUrl: \"https://www.linkedin.com/in/orrgottlieb/\",\n    title: \"Software Engineer\"\n  },\n  {\n    imgSrc: Yossi,\n    name: \"Yossi Saadi\",\n    linkedinUrl: \"https://www.linkedin.com/in/yossisaadi/\",\n    title: \"Software Engineer\"\n  },\n  {\n    imgSrc: Talko,\n    name: \"Tal Koren\",\n    linkedinUrl: \"https://www.linkedin.com/in/talkor/\",\n    title: \"Software Engineer\"\n  },\n  {\n    imgSrc: Rivka,\n    name: \"Rivka Ungar\",\n    linkedinUrl: \"https://www.linkedin.com/in/rivka-ungar/\",\n    title: \"Software Engineer\"\n  },\n  {\n    imgSrc: Meirav,\n    name: \"Meirav Ron\",\n    linkedinUrl: \"https://www.linkedin.com/in/meirav-ron-1903b0197/\",\n    title: \"Product Designer\"\n  },\n  {\n    imgSrc: Elad,\n    name: \"Elad Mizrahi\",\n    linkedinUrl: \"https://www.linkedin.com/in/elad-mizrahi/\",\n    title: \"Product Designer\"\n  },\n\n  {\n    imgSrc: Yael,\n    name: \"Yael Bein\",\n    linkedinUrl: \"https://www.linkedin.com/in/yaelbein/\",\n    title: \"Product Designer\"\n  },\n  {\n    imgSrc: Dan,\n    name: \"Dan Fishbein\",\n    linkedinUrl: \"https://www.linkedin.com/in/danfishbein90s/\",\n    title: \"Product Designer\"\n  },\n  {\n    imgSrc: Naama,\n    name: \"Naama Yeffet\",\n    linkedinUrl: \"https://il.linkedin.com/in/naama-yeffet-80280a242/\",\n    title: \"Product Designer\"\n  },\n  {\n    imgSrc: Anna,\n    name: \"Anna Hyatt\",\n    linkedinUrl: \"https://www.linkedin.com/in/anna-hyatt-design/\",\n    title: \"Product Designer\"\n  },\n  {\n    imgSrc: Ron,\n    name: \"Ron Yakar\",\n    linkedinUrl: \"https://www.linkedin.com/in/ronyakar\",\n    title: \"UX Writer\"\n  }\n];\n\nexport default function Team() {\n  return (\n    <>\n      <EntranceAnimation>\n        <Section>Our platform builders</Section>\n      </EntranceAnimation>\n      <EntranceAnimation>\n        <Flex direction=\"column\" align=\"start\" style={{ gap: \"42px\" }}>\n          <p className={styles.text}>\n            A team of thinkers, doers, and innovators\n            <br /> pushing the monday.com design experience forward.\n          </p>\n          <div className={styles.team}>\n            {team.map(({ imgSrc, name, linkedinUrl, title }) => (\n              <TeamMember\n                key={name}\n                image={imgSrc}\n                name={name}\n                linkedinUrl={linkedinUrl}\n                title={title}\n                className={styles.teamItem}\n              />\n            ))}\n          </div>\n        </Flex>\n      </EntranceAnimation>\n    </>\n  );\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/contributions/TeamMember.module.scss",
    "content": ".teamMember {\n  text-decoration: none;\n\n  .content {\n    width: 100%;\n    gap: 6px;\n\n    .name {\n      font-size: 16px;\n      line-height: normal;\n    }\n\n    .title {\n      font-size: 16px;\n      letter-spacing: 0.36px;\n      color: var(--sb-secondary-text-color);\n    }\n  }\n\n  .image {\n    width: 100%;\n    height: 100%;\n    border-radius: 16px;\n    object-fit: cover;\n  }\n\n  &:hover {\n    .name {\n      text-decoration: underline;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/contributions/TeamMember.tsx",
    "content": "import React from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./TeamMember.module.scss\";\nimport { Text, Flex } from \"@vibe/core\";\n\nexport interface TeamMemberProps {\n  image: string;\n  name: string;\n  title: string;\n  linkedinUrl: string;\n  className?: string;\n}\n\nexport const TeamMember = ({ image, name, title, linkedinUrl, className }: TeamMemberProps) => {\n  return (\n    <a href={linkedinUrl} className={cx(styles.teamMember, className)} target=\"_blank\" rel=\"noreferrer\">\n      <Flex direction=\"column\" gap=\"large\" align=\"start\">\n        <img src={image} alt={name} className={styles.image} />\n        <Flex className={styles.content} direction=\"column\" align=\"start\">\n          <Text type=\"text1\" weight=\"medium\" className={styles.name}>\n            {name}\n          </Text>\n          <Text className={styles.title}>{title}</Text>\n        </Flex>\n      </Flex>\n    </a>\n  );\n};\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/contributions/useContributors.ts",
    "content": "import { useEffect, useMemo, useState } from \"react\";\n\nexport type GithubContributor = {\n  name: string;\n  href: string;\n  id?: number;\n  key?: string;\n  contributions?: number;\n  image?: string;\n};\n\nexport type GithubContributorResponse = {\n  id: number;\n  login: string;\n  html_url: string;\n  contributions: number;\n  avatar_url: string;\n};\n\nexport async function fetchContributors(\n  organizationName: string,\n  packageName: string,\n  page: number\n): Promise<GithubContributorResponse[]> {\n  try {\n    const request = await fetch(\n      `https://api.github.com/repos/${organizationName}/${packageName}/contributors?per_page=100&page=${page}&order=desc`,\n      {\n        method: \"GET\",\n        headers: {\n          \"Content-Type\": \"application/json\"\n        }\n      }\n    );\n\n    const contributors = await request.json();\n    if (!contributors || !Array.isArray(contributors)) {\n      throw new Error(\"Unexpected API response, contributors = \", contributors);\n    }\n    return contributors;\n  } catch (e) {\n    console.error(\"Error while loading Github contributors, page \", page, \" - \", e);\n    return [];\n  }\n}\n\nexport async function fetchAllContributors(organizationName: string, packageName: string) {\n  let contributors: GithubContributorResponse[] = [];\n  let page = 1;\n  let list;\n  do {\n    list = await fetchContributors(organizationName, packageName, page++);\n    contributors = contributors.concat(list);\n  } while (list.length > 0);\n\n  return contributors;\n}\n\ninterface useContributorsProps {\n  organizationName: string;\n  packageName: string;\n  excludedContributors?: string[];\n}\n\nexport default function useContributors({ organizationName, packageName, excludedContributors }: useContributorsProps) {\n  const [contributorsJson, setContributorsJson] = useState<GithubContributorResponse[]>([]);\n  useEffect(() => {\n    fetchAllContributors(organizationName, packageName).then(contributors => setContributorsJson(contributors));\n  }, [organizationName, packageName]);\n\n  const contributors = useMemo(() => {\n    return contributorsJson\n      .filter(contributor => !excludedContributors.includes(contributor.login))\n      .sort((a, b) => (b?.contributions || 0) - (a?.contributions || 0))\n      .map(contributor => {\n        return {\n          id: contributor.id,\n          name: contributor.login,\n          href: contributor.html_url,\n          key: contributor.id.toString(),\n          contributions: contributor.contributions,\n          image: contributor.avatar_url\n        } as GithubContributor;\n      });\n  }, [contributorsJson, excludedContributors]);\n\n  return {\n    contributors\n  };\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/hero/FloatingObjects.module.scss",
    "content": ".floatingObjectsWrapper {\n  position: absolute;\n  width: 100%;\n  height: 100vh;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n.floatingObjects {\n  width: 100%;\n  position: absolute;\n  top: 100px;\n  left: 50%;\n  transform: translateX(-50%);\n  height: 100vh;\n  pointer-events: none;\n\n  @media (max-width: 1200px) {\n    width: 120%;\n  }\n}\n\n.object {\n  z-index: 3;\n  position: absolute;\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/hero/FloatingObjects.tsx",
    "content": "import React, { useEffect } from \"react\";\nimport { motion, useMotionValue, useSpring, useScroll, useTransform } from \"framer-motion\";\nimport styles from \"./FloatingObjects.module.scss\";\nimport HeroAbstractFluidShape from \"./icons/HeroAbstractFluidShape\";\nimport HeroHeartShape from \"./icons/HeroHeartShape\";\nimport HeroCloverShape from \"./icons/HeroCloverShape\";\nimport HeroCircleShape from \"./icons/HeroCircleShape\";\nimport HeroCloverShapeGreen from \"./icons/HeroCloverShapeGreen\";\nimport HeroArrowCrossShape from \"./icons/HeroArrowCrossShape\";\nimport HeroCircleShapeTeal from \"./icons/HeroCircleShapeTeal\";\nimport cx from \"classnames\";\n\nfunction mapRange(value: number, fromLow: number, fromHigh: number, toLow: number, toHigh: number) {\n  if (fromLow === fromHigh) {\n    return toLow;\n  }\n  const percentage = (value - fromLow) / (fromHigh - fromLow);\n  return toLow + percentage * (toHigh - toLow);\n}\n\ninterface FloatingObjectProps {\n  children: React.ReactNode;\n  className?: string;\n  distance?: number;\n  direction?: \"toward\" | \"away\";\n  smoothing?: number;\n  scrollSpeed?: number;\n  rotation?: number;\n  top?: number;\n  bottom?: number;\n  left?: number;\n  right?: number;\n}\n\nfunction FloatingObject({\n  children,\n  className,\n  distance = 25,\n  direction = \"toward\",\n  smoothing = 50,\n  scrollSpeed = 0,\n  rotation = 0,\n  top,\n  bottom,\n  left,\n  right\n}: FloatingObjectProps) {\n  const mouseX = useMotionValue(0);\n  const mouseY = useMotionValue(0);\n\n  const transition = {\n    damping: 100,\n    stiffness: mapRange(smoothing, 0, 100, 2000, 50),\n    mass: 1\n  };\n\n  const springX = useSpring(mouseX, transition);\n  const springY = useSpring(mouseY, transition);\n\n  const offset = distance * (direction === \"toward\" ? 1 : -1);\n\n  useEffect(() => {\n    const handleMouseMove = (event: MouseEvent) => {\n      const mouseXPos = event.clientX;\n      const mouseYPos = event.clientY;\n      const centerX = window.innerWidth / 2;\n      const centerY = window.innerHeight / 2;\n\n      // Normalize mouse position relative to center\n      const normalizedX = ((mouseXPos - centerX) / centerX) * offset;\n      const normalizedY = ((mouseYPos - centerY) / centerY) * offset;\n\n      mouseX.set(normalizedX);\n      mouseY.set(normalizedY);\n    };\n\n    window.addEventListener(\"mousemove\", handleMouseMove);\n    return () => window.removeEventListener(\"mousemove\", handleMouseMove);\n  }, [offset, mouseX, mouseY]);\n\n  const { scrollY } = useScroll();\n  const parallaxOffset = useTransform(scrollY, [0, 1000], [0, 1000 * scrollSpeed]);\n\n  const finalY = useTransform([springY, parallaxOffset], ([mouse, scroll]) => (mouse as number) + (scroll as number));\n\n  return (\n    <motion.div\n      className={cx(styles.object, className)}\n      style={{\n        x: smoothing === 0 ? mouseX : springX,\n        y: finalY,\n        rotate: rotation,\n        top: top === undefined ? undefined : `${top}%`,\n        bottom: bottom === undefined ? undefined : `${bottom}%`,\n        left: left === undefined ? undefined : `${left}%`,\n        right: right === undefined ? undefined : `${right}%`\n      }}\n    >\n      {children}\n    </motion.div>\n  );\n}\n\nexport default function FloatingObjects() {\n  return (\n    <div className={styles.floatingObjectsWrapper}>\n      <div className={styles.floatingObjects}>\n        <FloatingObject top={3} left={35} distance={35} direction=\"toward\" smoothing={50} scrollSpeed={-0.6}>\n          <HeroCircleShapeTeal />\n        </FloatingObject>\n\n        <FloatingObject\n          top={-10}\n          right={25}\n          distance={20}\n          direction=\"toward\"\n          smoothing={10}\n          scrollSpeed={-0.4}\n          rotation={-30}\n        >\n          <HeroHeartShape />\n        </FloatingObject>\n\n        <FloatingObject bottom={5} right={42} distance={50} direction=\"toward\" smoothing={40} scrollSpeed={-0.8}>\n          <HeroCloverShape />\n        </FloatingObject>\n\n        <FloatingObject bottom={20} left={20} distance={20} direction=\"toward\" smoothing={50} scrollSpeed={-0.6}>\n          <HeroCircleShape />\n        </FloatingObject>\n\n        <FloatingObject\n          top={12}\n          left={0}\n          distance={20}\n          direction=\"toward\"\n          smoothing={60}\n          scrollSpeed={-0.5}\n          rotation={60}\n        >\n          <HeroCloverShapeGreen />\n        </FloatingObject>\n\n        <FloatingObject\n          bottom={5}\n          right={5}\n          distance={25}\n          direction=\"toward\"\n          smoothing={30}\n          scrollSpeed={-0.45}\n          rotation={-45}\n        >\n          <HeroArrowCrossShape />\n        </FloatingObject>\n\n        <FloatingObject\n          top={40}\n          right={-5}\n          distance={30}\n          direction=\"toward\"\n          smoothing={25}\n          scrollSpeed={-0.6}\n          rotation={30}\n        >\n          <HeroAbstractFluidShape />\n        </FloatingObject>\n\n        <FloatingObject\n          bottom={0}\n          left={0}\n          distance={18}\n          direction=\"toward\"\n          smoothing={35}\n          scrollSpeed={-0.4}\n          rotation={30}\n        >\n          <HeroHeartShape />\n        </FloatingObject>\n\n        <FloatingObject\n          top={-8}\n          right={0}\n          distance={20}\n          direction=\"toward\"\n          smoothing={30}\n          scrollSpeed={-0.5}\n          rotation={20}\n        >\n          <HeroCloverShapeGreen />\n        </FloatingObject>\n\n        <FloatingObject\n          top={-10}\n          left={8}\n          distance={25}\n          direction=\"toward\"\n          smoothing={10}\n          scrollSpeed={-0.45}\n          rotation={-15}\n        >\n          <HeroArrowCrossShape />\n        </FloatingObject>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/hero/Hero.module.scss",
    "content": ".hero {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-height: 600px;\n  height: 100vh;\n  padding-bottom: 150px;\n\n  .content {\n    width: 1300px;\n    max-width: 100%;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    padding: 0 20px;\n  }\n\n  .header {\n    color: #121212;\n    text-align: center;\n    font-family: var(--sb-title-font-family);\n    font-weight: 500;\n    font-size: 64px;\n    line-height: 115%;\n    margin: 0;\n    -webkit-font-smoothing: var(--font-smoothing-webkit);\n    -moz-osx-font-smoothing: var(--font-smoothing-moz);\n\n    @media (max-width: 1200px) {\n      font-size: 56px;\n    }\n\n    @media (max-width: 1024px) {\n      font-size: 40px;\n    }\n  }\n\n  .subheader {\n    text-align: center;\n    font-size: 20px;\n    font-weight: 400;\n    line-height: 140%;\n    margin: 20px 0 40px 0;\n    -webkit-font-smoothing: var(--font-smoothing-webkit);\n    -moz-osx-font-smoothing: var(--font-smoothing-moz);\n\n    @media (max-width: 1200px) {\n      font-size: 18px;\n    }\n\n    @media (max-width: 1024px) {\n      font-size: 16px;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/hero/Hero.tsx",
    "content": "import React from \"react\";\nimport styles from \"./Hero.module.scss\";\nimport FigmaIcon from \"./icons/FigmaIcon\";\nimport GitHubIcon from \"./icons/GitHubIcon\";\nimport ResourceButton from \"./ResourceButton\";\nimport { Flex } from \"@vibe/core\";\nimport EntranceAnimation from \"../EntranceAnimation\";\n\nexport default function Hero() {\n  return (\n    <div className={styles.hero}>\n      <div className={styles.content}>\n        <EntranceAnimation delay={0}>\n          <h1 className={styles.header}>\n            <Flex align=\"center\" justify=\"center\" gap=\"medium\">\n              Vibe design system\n            </Flex>\n            <Flex align=\"center\" justify=\"center\" gap=\"medium\">\n              by monday.com\n            </Flex>\n          </h1>\n        </EntranceAnimation>\n\n        <EntranceAnimation delay={0.1}>\n          <p className={styles.subheader}>Resources for building great monday.com experiences.</p>\n        </EntranceAnimation>\n\n        <EntranceAnimation delay={0.2}>\n          <Flex gap=\"small\">\n            <ResourceButton\n              text=\"GitHub\"\n              icon={<GitHubIcon />}\n              href=\"https://github.com/mondaycom/vibe\"\n              tooltipContent=\"Become a contributor & join our GitHub community\"\n            />\n            <ResourceButton\n              text=\"Figma\"\n              icon={<FigmaIcon />}\n              href=\"https://www.figma.com/community/file/940242815162888749\"\n              tooltipContent=\"Our Figma file is free to use\"\n            />\n          </Flex>\n        </EntranceAnimation>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/hero/ResourceButton.module.scss",
    "content": ".resourceButton {\n  display: flex;\n  align-items: center;\n  gap: var(--sb-spacing-small);\n  padding: 8px 14px;\n  background: var(--sb-dark-background-color);\n  border-radius: 40px;\n  color: var(--sb-primary-text-color);\n  font-size: 16px;\n  font-weight: 500;\n  text-decoration: none;\n  cursor: pointer;\n\n  &:hover {\n    background-color: #e3e6f2;\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/hero/ResourceButton.tsx",
    "content": "import React from \"react\";\nimport styles from \"./ResourceButton.module.scss\";\nimport { Tooltip } from \"@vibe/core\";\n\nexport default function ResourceButton({\n  text,\n  icon,\n  href,\n  tooltipContent\n}: {\n  text: string;\n  icon: React.ReactNode;\n  href: string;\n  tooltipContent: string;\n}) {\n  return (\n    <Tooltip content={tooltipContent}>\n      <a className={styles.resourceButton} href={href} target=\"_blank\" rel=\"noopener noreferrer\">\n        {icon}\n        <span className={styles.text}>{text}</span>\n      </a>\n    </Tooltip>\n  );\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/hero/icons/FigmaIcon.tsx",
    "content": "import React from \"react\";\n\nexport default function FigmaIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M10.9333 11.2388C10.9333 10.3743 11.2767 9.54534 11.888 8.9341C12.4992 8.32288 13.3282 7.97949 14.1926 7.97949C15.057 7.97949 15.886 8.32288 16.4973 8.9341C17.1085 9.54534 17.4519 10.3743 17.4519 11.2388C17.4519 12.1032 17.1085 12.9322 16.4973 13.5434C15.886 14.1546 15.057 14.498 14.1926 14.498C13.3282 14.498 12.4992 14.1546 11.888 13.5434C11.2767 12.9322 10.9333 12.1032 10.9333 11.2388Z\"\n        fill=\"#1ABCFE\"\n      />\n      <path\n        d=\"M4.41455 17.7568C4.41455 16.8924 4.75794 16.0634 5.36917 15.4521C5.98039 14.8409 6.8094 14.4976 7.67381 14.4976H10.9331V17.7568C10.9331 18.6212 10.5897 19.4503 9.97846 20.0615C9.36723 20.6726 8.53822 21.0161 7.67381 21.0161C6.8094 21.0161 5.98039 20.6726 5.36917 20.0615C4.75794 19.4503 4.41455 18.6212 4.41455 17.7568Z\"\n        fill=\"#0ACF83\"\n      />\n      <path\n        d=\"M10.9333 1.46045V7.97897H14.1926C15.057 7.97897 15.886 7.63558 16.4973 7.02436C17.1085 6.41313 17.4519 5.58412 17.4519 4.71971C17.4519 3.8553 17.1085 3.02629 16.4973 2.41506C15.886 1.80383 15.057 1.46045 14.1926 1.46045H10.9333Z\"\n        fill=\"#FF7262\"\n      />\n      <path\n        d=\"M4.41455 4.71971C4.41455 5.58412 4.75794 6.41313 5.36917 7.02436C5.98039 7.63558 6.8094 7.97897 7.67381 7.97897H10.9331V1.46045H7.67381C6.8094 1.46045 5.98039 1.80383 5.36917 2.41506C4.75794 3.02629 4.41455 3.8553 4.41455 4.71971Z\"\n        fill=\"#F24E1E\"\n      />\n      <path\n        d=\"M4.41455 11.2388C4.41455 12.1032 4.75794 12.9322 5.36917 13.5434C5.98039 14.1546 6.8094 14.498 7.67381 14.498H10.9331V7.97949H7.67381C6.8094 7.97949 5.98039 8.32288 5.36917 8.9341C4.75794 9.54534 4.41455 10.3743 4.41455 11.2388Z\"\n        fill=\"#A259FF\"\n      />\n    </svg>\n  );\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/hero/icons/GitHubIcon.tsx",
    "content": "import React from \"react\";\n\nexport default function GitHubIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <g clipPath=\"url(#clip0_13045_6128)\">\n        <path\n          d=\"M10.6667 0.831055C4.77333 0.831055 0 5.60705 0 11.4977C0 16.2115 3.056 20.2088 7.29333 21.6177C7.82667 21.7182 8.02222 21.3884 8.02222 21.1048C8.02222 20.8515 8.01333 20.1804 8.00889 19.2915C5.04178 19.9351 4.416 17.8604 4.416 17.8604C3.93067 16.6293 3.22933 16.3004 3.22933 16.3004C2.26311 15.6391 3.304 15.6524 3.304 15.6524C4.37511 15.7271 4.93778 16.7511 4.93778 16.7511C5.88889 18.3822 7.43467 17.9111 8.04445 17.6382C8.14044 16.9484 8.41511 16.4782 8.72 16.2115C6.35111 15.9448 3.86133 15.0275 3.86133 10.9404C3.86133 9.77594 4.27467 8.82483 4.95911 8.07816C4.83911 7.80883 4.47911 6.72439 5.05244 5.25505C5.05244 5.25505 5.94578 4.96883 7.98578 6.34839C8.83911 6.11105 9.74578 5.99372 10.6524 5.98839C11.5591 5.99372 12.4658 6.11105 13.3191 6.34839C15.3458 4.96883 16.2391 5.25505 16.2391 5.25505C16.8124 6.72439 16.4524 7.80883 16.3458 8.07816C17.0258 8.82483 17.4391 9.77594 17.4391 10.9404C17.4391 15.0382 14.9458 15.9404 12.5724 16.2026C12.9458 16.5226 13.2924 17.1768 13.2924 18.1759C13.2924 19.6035 13.2791 20.7502 13.2791 21.0968C13.2791 21.3768 13.4658 21.7102 14.0124 21.6035C18.28 20.2044 21.3333 16.2044 21.3333 11.4977C21.3333 5.60705 16.5573 0.831055 10.6667 0.831055Z\"\n          fill=\"black\"\n        />\n      </g>\n      <defs>\n        <clipPath id=\"clip0_13045_6128\">\n          <rect width=\"21.3333\" height=\"21.3333\" fill=\"white\" transform=\"translate(0 0.571777)\" />\n        </clipPath>\n      </defs>\n    </svg>\n  );\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/hero/icons/HeroAbstractFluidShape.tsx",
    "content": "import React from \"react\";\n\nexport default function HeroAbstractFluidShape() {\n  return (\n    <svg width=\"150\" height=\"150\" viewBox=\"0 0 170 169\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M65.5597 38.5644C72.427 34.4787 79.8053 32.2462 87.2185 32.9964L87.4 33.0152C95.0735 33.8423 101.321 37.7335 105.724 43.1375L105.84 43.2813C106.863 44.5517 107.781 45.8959 108.6 47.2976C111.855 46.8155 115.221 46.6802 118.673 46.9684L118.884 46.9867C127.663 47.7629 136.227 51.2136 144.28 57.3811L144.666 57.6792L144.689 57.6972L145.033 57.9666L145.132 58.046L145.23 58.1252L145.303 58.1851C150.432 62.4565 151.279 70.0322 147.195 75.3319L147.098 75.4567C142.935 80.7201 135.378 81.7143 130.004 77.7857L129.878 77.6921C129.852 77.6727 129.826 77.6532 129.8 77.6335L129.701 77.5568C129.683 77.5434 129.666 77.5298 129.649 77.5162L129.384 77.3087C124.564 73.5583 120.349 72.1061 116.773 71.7739L116.603 71.759C115.818 71.6934 115.027 71.6784 114.229 71.7143C114.149 75.2698 113.754 78.883 113.062 82.4751L113.007 82.7591C110.176 97.122 102.396 112.366 88.7556 124.57L88.4323 124.858L88.1203 125.132C88.115 125.137 88.1097 125.142 88.1044 125.146C82.1499 130.36 75.4944 135.023 68.6466 136.015L68.4847 136.038C64.4386 136.589 59.4352 135.934 55.2437 132.352L55.2436 132.352C51.3639 129.035 49.9506 124.697 49.4387 121.591C48.4569 115.635 49.8889 109.023 51.7107 103.501L51.8034 103.222C53.767 97.3525 56.7488 91.0029 60.4809 84.8197L60.8157 84.2687C66.5627 74.8753 74.5967 64.9933 84.4861 57.7325C83.6313 57.7094 81.6234 57.9538 78.2853 59.9398L78.1087 60.0457C70.2656 64.7901 58.6352 77.0312 44.7728 102.582L44.4439 103.19C41.1797 109.229 33.6385 111.483 27.5956 108.222C21.5498 104.96 19.293 97.4151 22.5547 91.3695L22.559 91.3618L22.8986 90.7342L22.9026 90.7265C37.4915 63.8348 51.7267 46.9305 65.2331 38.7603L65.5597 38.5644Z\"\n        fill=\"#121212\"\n      />\n      <path\n        d=\"M69.153 45.2386C75.1516 41.6101 81.0104 39.9784 86.4577 40.5296C91.9927 41.0898 96.54 43.8513 99.8551 47.9202C101.742 50.2361 103.231 52.9627 104.33 55.9817C108.696 54.6905 113.292 54.117 118.045 54.5139C125.517 55.1381 133.036 58.1321 140.361 63.9241C142.469 65.5913 142.827 68.6525 141.16 70.761C139.492 72.8695 136.431 73.2272 134.323 71.5598C128.305 66.8016 122.566 64.6595 117.234 64.2141C113.594 63.9101 109.983 64.3849 106.434 65.5178C106.933 70.5221 106.643 75.8975 105.58 81.2952C103.015 94.3111 95.8517 108.3 83.1178 119.45C77.2254 124.61 71.9749 127.921 67.4625 128.536C64.967 128.877 62.3109 128.432 60.1637 126.597C58.1361 124.864 57.2586 122.475 56.9098 120.36C56.2304 116.237 57.1967 111.042 58.902 105.873C60.6626 100.537 63.4237 94.5975 66.9635 88.7327C73.6479 77.6581 83.4748 66.2498 95.3356 59.763C94.5566 57.4867 93.5254 55.5625 92.3082 54.0686C90.4389 51.7743 88.1606 50.4857 85.4772 50.2141C82.7058 49.9337 78.9511 50.6884 74.1911 53.5677C64.5475 59.4011 52.0042 73.2335 37.7858 99.5872L33.5026 97.2757L29.2194 94.9651C43.7162 68.0954 57.2782 52.4217 69.153 45.2386ZM96.942 70.1487C88.3958 75.7488 80.8339 84.5904 75.2975 93.763C72.0808 99.0924 69.6481 104.371 68.1461 108.923C66.5891 113.643 66.2236 117.012 66.5143 118.777C66.5165 118.79 66.5198 118.804 66.5221 118.817C68.1237 118.431 71.3977 116.774 76.7047 112.127C87.7547 102.451 93.8626 90.4058 96.0289 79.4134C96.6736 76.1422 96.9575 73.0322 96.942 70.1487ZM37.7858 99.5872C36.5094 101.953 33.5567 102.836 31.1911 101.56C28.8255 100.283 27.9431 97.3308 29.2194 94.9651L37.7858 99.5872Z\"\n        fill=\"#6E6EFF\"\n      />\n    </svg>\n  );\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/hero/icons/HeroArrowCrossShape.tsx",
    "content": "import React from \"react\";\n\nexport default function HeroArrowCrossShape() {\n  return (\n    <svg width=\"150\" height=\"150\" viewBox=\"0 0 170 169\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M73.3834 38.241C69.6768 32.347 61.977 30.3634 55.8724 33.7871L55.7273 33.8698C49.5521 37.435 47.3735 45.2618 50.7632 51.4922C50.7796 51.5225 50.7964 51.5527 50.8133 51.5828L50.8834 51.7076L50.9271 51.7843L62.4548 71.751L39.3987 71.7511L39.3079 71.7516L39.1647 71.7534L39.0637 71.7552C32.0288 71.9335 26.3733 77.6446 26.2854 84.6986L26.2843 84.8655L26.2854 85.0324C26.3733 92.0867 32.0292 97.7975 39.064 97.9757L39.1579 97.9774L39.3009 97.9792C39.3335 97.9797 39.3661 97.9799 39.3987 97.9799H62.4532L50.9262 117.945L50.8825 118.022L50.8124 118.147L50.7622 118.237C47.3726 124.468 49.5511 132.294 55.7263 135.86L55.8714 135.942C62.0245 139.393 69.7981 137.351 73.4699 131.347L73.5205 131.263L73.5935 131.14L73.6409 131.06L85.1687 111.092L96.6967 131.06L96.7824 131.206C100.443 137.365 108.388 139.453 114.611 135.86C120.835 132.266 122.999 124.342 119.495 118.092L119.411 117.945L107.884 97.9799H130.938L131.107 97.9789C138.272 97.8881 144.052 92.0519 144.052 84.8656V84.8654C144.052 77.6229 138.181 71.751 130.938 71.751H107.883L119.41 51.7843L119.494 51.6369C122.97 45.4361 120.868 37.5877 114.757 33.9554L114.61 33.8698C108.387 30.2768 100.443 32.3638 96.7815 38.5235L96.6958 38.6698L85.1687 58.6351L73.6418 38.6699L73.5944 38.5889L73.5214 38.466L73.4708 38.3822L73.3834 38.241Z\"\n        fill=\"#121212\"\n      />\n      <path\n        d=\"M103.968 42.5827C105.367 40.4206 108.23 39.7133 110.485 41.0153C112.741 42.3173 113.559 45.1508 112.387 47.4431L112.268 47.6628L93.5967 80.0026H130.938L131.188 80.0085C133.759 80.1387 135.804 82.2649 135.805 84.8688C135.805 87.4728 133.76 89.5996 131.189 89.7302L130.938 89.736H93.5997L112.269 122.072L112.389 122.293C113.561 124.585 112.742 127.418 110.487 128.72C108.232 130.022 105.369 129.315 103.97 127.153L103.839 126.939L85.168 94.6003L66.4981 126.938C65.1542 129.266 62.1775 130.064 59.8497 128.72C57.5219 127.376 56.7237 124.4 58.0674 122.072L76.7364 89.736H39.3985C36.7106 89.736 34.5316 87.5577 34.5313 84.8698C34.5313 82.1818 36.7105 80.0027 39.3985 80.0026H76.7403L58.0694 47.6638C56.7255 45.3359 57.5229 42.3594 59.8506 41.0153C62.1785 39.6714 65.155 40.4689 66.4991 42.7966L85.1671 75.1325L103.837 42.7966L103.968 42.5827Z\"\n        fill=\"#FFC300\"\n      />\n    </svg>\n  );\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/hero/icons/HeroCircleShape.tsx",
    "content": "import React from \"react\";\n\nexport default function HeroCircleShape() {\n  return (\n    <svg width=\"150\" height=\"150\" viewBox=\"0 0 170 169\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M135.943 84.7322C135.768 112.421 113.355 134.834 85.6664 135.009L85.3391 135.01C57.4999 135.01 34.9112 112.53 34.7351 84.7322L34.7341 84.4049C34.7341 56.4565 57.3907 33.7998 85.3391 33.7998L85.6664 33.8009C113.464 33.9769 135.944 56.5657 135.944 84.4049L135.943 84.7322Z\"\n        fill=\"#121212\"\n      />\n      <path\n        d=\"M85.3395 42.0498C108.733 42.0499 127.698 61.014 127.698 84.4072C127.698 107.801 108.733 126.765 85.3395 126.766C61.9461 126.765 42.9821 107.801 42.9821 84.4072C42.9825 61.0141 61.9464 42.05 85.3395 42.0498ZM85.3395 51.7842C67.3225 51.7844 52.7169 66.3903 52.7165 84.4072C52.7165 102.425 67.3223 117.031 85.3395 117.031C103.357 117.031 117.964 102.425 117.964 84.4072C117.963 66.3902 103.357 51.7843 85.3395 51.7842Z\"\n        fill=\"#6E6EFF\"\n      />\n    </svg>\n  );\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/hero/icons/HeroCircleShapeTeal.tsx",
    "content": "import React from \"react\";\n\nexport default function HeroCircleShapeTeal() {\n  return (\n    <svg width=\"150\" height=\"150\" viewBox=\"0 0 170 169\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M135.943 84.7322C135.768 112.421 113.355 134.834 85.6664 135.009L85.3391 135.01C57.4999 135.01 34.9112 112.53 34.7351 84.7322L34.7341 84.4049C34.7341 56.4565 57.3907 33.7998 85.3391 33.7998L85.6664 33.8009C113.464 33.9769 135.944 56.5657 135.944 84.4049L135.943 84.7322Z\"\n        fill=\"#121212\"\n      />\n      <path\n        d=\"M85.3395 42.0498C108.733 42.0499 127.698 61.014 127.698 84.4072C127.698 107.801 108.733 126.765 85.3395 126.766C61.9461 126.765 42.9821 107.801 42.9821 84.4072C42.9825 61.0141 61.9464 42.05 85.3395 42.0498ZM85.3395 51.7842C67.3225 51.7844 52.7169 66.3903 52.7165 84.4072C52.7165 102.425 67.3223 117.031 85.3395 117.031C103.357 117.031 117.964 102.425 117.964 84.4072C117.963 66.3902 103.357 51.7843 85.3395 51.7842Z\"\n        fill=\"#A6E5E2\"\n      />\n    </svg>\n  );\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/hero/icons/HeroCloverShape.tsx",
    "content": "import React from \"react\";\n\nexport default function HeroCloverShape() {\n  return (\n    <svg width=\"150\" height=\"150\" viewBox=\"0 0 170 169\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M138.376 61.437C138.317 70.659 134.095 78.8929 127.494 84.3534C134.095 89.8138 138.317 98.0477 138.376 107.27L138.376 107.464C138.376 123.956 125.059 137.337 108.592 137.441L108.398 137.442C99.0976 137.442 90.7865 133.207 85.2879 126.56C79.8274 133.161 71.5935 137.383 62.3716 137.441L62.1778 137.442C45.6858 137.442 32.3042 124.125 32.1999 107.657L32.1993 107.464C32.1993 98.1632 36.4345 89.852 43.0814 84.3534C36.4807 78.8929 32.2583 70.659 32.1999 61.437L32.1993 61.2431C32.1993 44.6865 45.6211 31.2647 62.1778 31.2646L62.3716 31.2653C71.5935 31.3237 79.8274 35.5459 85.2879 42.1465C90.7865 35.4997 99.0977 31.2647 108.398 31.2646L108.592 31.2653C125.059 31.3696 138.376 44.7511 138.376 61.2431L138.376 61.437Z\"\n        fill=\"#121212\"\n      />\n      <path\n        d=\"M62.1778 86.4082C73.806 86.4085 83.2323 95.8346 83.2325 107.463C83.2325 119.091 73.8061 128.518 62.1778 128.519C50.5493 128.519 41.1221 119.091 41.1221 107.463C41.1223 95.8345 50.5494 86.4082 62.1778 86.4082ZM108.398 86.4082C120.026 86.4083 129.452 95.8345 129.452 107.463C129.452 119.091 120.026 128.518 108.398 128.519C96.769 128.519 87.3419 119.091 87.3419 107.463C87.342 95.8345 96.7691 86.4082 108.398 86.4082ZM62.1778 94.79C55.1788 94.79 49.5051 100.464 49.5049 107.463C49.5049 114.462 55.1788 120.136 62.1778 120.136C69.1766 120.135 74.8506 114.462 74.8506 107.463C74.8505 100.464 69.1765 94.7903 62.1778 94.79ZM108.398 94.79C101.399 94.79 95.7248 100.464 95.7247 107.463C95.7247 114.462 101.398 120.136 108.398 120.136C115.396 120.136 121.07 114.462 121.07 107.463C121.07 100.464 115.396 94.7901 108.398 94.79ZM62.1778 40.1875C73.806 40.1878 83.2324 49.6139 83.2325 61.2422C83.2325 72.8705 73.8061 82.2976 62.1778 82.2979C50.5493 82.2979 41.1222 72.8707 41.1221 61.2422C41.1222 49.6138 50.5493 40.1875 62.1778 40.1875ZM108.398 40.1875C120.026 40.1876 129.452 49.6138 129.452 61.2422C129.452 72.8706 120.026 82.2978 108.398 82.2979C96.769 82.2979 87.3419 72.8707 87.3419 61.2422C87.3419 49.6137 96.7691 40.1875 108.398 40.1875ZM62.1778 48.5693C55.1788 48.5693 49.505 54.2432 49.5049 61.2422C49.505 68.2412 55.1788 73.915 62.1778 73.915C69.1766 73.9148 74.8506 68.241 74.8506 61.2422C74.8506 54.2434 69.1766 48.5696 62.1778 48.5693ZM108.398 48.5693C101.399 48.5693 95.7248 54.2432 95.7247 61.2422C95.7247 68.2412 101.398 73.915 108.398 73.915C115.396 73.9149 121.07 68.2411 121.07 61.2422C121.07 54.2433 115.396 48.5694 108.398 48.5693Z\"\n        fill=\"#A6E5E2\"\n      />\n    </svg>\n  );\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/hero/icons/HeroCloverShapeGreen.tsx",
    "content": "import React from \"react\";\n\nexport default function HeroCloverShapeGreen() {\n  return (\n    <svg width=\"150\" height=\"150\" viewBox=\"0 0 170 169\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M138.376 61.437C138.317 70.659 134.095 78.8929 127.494 84.3534C134.095 89.8138 138.317 98.0477 138.376 107.27L138.376 107.464C138.376 123.956 125.059 137.337 108.592 137.441L108.398 137.442C99.0976 137.442 90.7865 133.207 85.2879 126.56C79.8274 133.161 71.5935 137.383 62.3716 137.441L62.1778 137.442C45.6858 137.442 32.3042 124.125 32.1999 107.657L32.1993 107.464C32.1993 98.1632 36.4345 89.852 43.0814 84.3534C36.4807 78.8929 32.2583 70.659 32.1999 61.437L32.1993 61.2431C32.1993 44.6865 45.6211 31.2647 62.1778 31.2646L62.3716 31.2653C71.5935 31.3237 79.8274 35.5459 85.2879 42.1465C90.7865 35.4997 99.0977 31.2647 108.398 31.2646L108.592 31.2653C125.059 31.3696 138.376 44.7511 138.376 61.2431L138.376 61.437Z\"\n        fill=\"#121212\"\n      />\n      <path\n        d=\"M62.1778 86.4082C73.806 86.4085 83.2323 95.8346 83.2325 107.463C83.2325 119.091 73.8061 128.518 62.1778 128.519C50.5493 128.519 41.1221 119.091 41.1221 107.463C41.1223 95.8345 50.5494 86.4082 62.1778 86.4082ZM108.398 86.4082C120.026 86.4083 129.452 95.8345 129.452 107.463C129.452 119.091 120.026 128.518 108.398 128.519C96.769 128.519 87.3419 119.091 87.3419 107.463C87.342 95.8345 96.7691 86.4082 108.398 86.4082ZM62.1778 94.79C55.1788 94.79 49.5051 100.464 49.5049 107.463C49.5049 114.462 55.1788 120.136 62.1778 120.136C69.1766 120.135 74.8506 114.462 74.8506 107.463C74.8505 100.464 69.1765 94.7903 62.1778 94.79ZM108.398 94.79C101.399 94.79 95.7248 100.464 95.7247 107.463C95.7247 114.462 101.398 120.136 108.398 120.136C115.396 120.136 121.07 114.462 121.07 107.463C121.07 100.464 115.396 94.7901 108.398 94.79ZM62.1778 40.1875C73.806 40.1878 83.2324 49.6139 83.2325 61.2422C83.2325 72.8705 73.8061 82.2976 62.1778 82.2979C50.5493 82.2979 41.1222 72.8707 41.1221 61.2422C41.1222 49.6138 50.5493 40.1875 62.1778 40.1875ZM108.398 40.1875C120.026 40.1876 129.452 49.6138 129.452 61.2422C129.452 72.8706 120.026 82.2978 108.398 82.2979C96.769 82.2979 87.3419 72.8707 87.3419 61.2422C87.3419 49.6137 96.7691 40.1875 108.398 40.1875ZM62.1778 48.5693C55.1788 48.5693 49.505 54.2432 49.5049 61.2422C49.505 68.2412 55.1788 73.915 62.1778 73.915C69.1766 73.9148 74.8506 68.241 74.8506 61.2422C74.8506 54.2434 69.1766 48.5696 62.1778 48.5693ZM108.398 48.5693C101.399 48.5693 95.7248 54.2432 95.7247 61.2422C95.7247 68.2412 101.398 73.915 108.398 73.915C115.396 73.9149 121.07 68.2411 121.07 61.2422C121.07 54.2433 115.396 48.5694 108.398 48.5693Z\"\n        fill=\"#00B267\"\n      />\n    </svg>\n  );\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/hero/icons/HeroHeartShape.tsx",
    "content": "import React from \"react\";\n\nexport default function HeroHeartShape() {\n  return (\n    <svg width=\"150\" height=\"150\" viewBox=\"0 0 170 169\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M145.141 68.4917C145.141 78.5591 140.754 87.7711 136.181 94.8912L135.963 95.2287C135.96 95.2336 135.956 95.2384 135.953 95.2433L135.746 95.5608C135.743 95.5663 135.739 95.5718 135.735 95.5772C131.097 102.647 125.252 109.253 119.693 114.837L119.156 115.374L119.144 115.386L118.611 115.915C118.607 115.919 118.603 115.922 118.599 115.926C113.018 121.439 107.49 126.2 103.22 129.685L102.811 130.018L102.804 130.024L102.403 130.349C102.4 130.351 102.398 130.353 102.396 130.355C100.714 131.715 99.2404 132.869 98.0537 133.78L97.563 134.156L97.5523 134.164L97.0571 134.541C97.0536 134.544 97.0501 134.546 97.0466 134.549C96.8455 134.701 96.6578 134.836 96.5022 134.944L96.358 135.044C96.349 135.05 96.34 135.056 96.331 135.062L96.2232 135.135C96.2141 135.141 96.2048 135.148 96.1956 135.154C90.015 139.303 81.9426 139.398 75.6752 135.444L75.5276 135.35C75.5064 135.336 75.4852 135.322 75.4641 135.309L75.2864 135.192C75.2673 135.179 75.2483 135.166 75.2293 135.154C75.1241 135.083 74.9788 134.984 74.8119 134.866L74.6384 134.742L74.5819 134.7L74.4449 134.599C74.4226 134.582 74.4004 134.566 74.3783 134.549C73.3025 133.734 71.87 132.629 70.1777 131.278L69.4369 130.684L69.4304 130.679L69.0358 130.36C69.0335 130.358 69.0313 130.356 69.029 130.355C64.9273 127.037 59.4903 122.411 53.9229 117.001L53.3837 116.475C53.3798 116.472 53.3759 116.468 53.372 116.464L52.8362 115.937L52.8254 115.926C47.1229 110.294 41.0204 103.54 36.1544 96.2786L35.9236 95.9324L35.914 95.9177L35.7004 95.594L35.6894 95.5772C30.9519 88.3561 26.2843 78.8763 26.2843 68.4917C26.2843 47.2732 43.648 30.4199 64.6352 30.4199L64.8723 30.4206C72.5503 30.4669 79.7171 32.7622 85.7122 36.6824C91.7691 32.7217 99.0221 30.4199 106.79 30.4199L107.036 30.4207C127.912 30.5517 145.141 47.3562 145.141 68.4917Z\"\n        fill=\"#121212\"\n      />\n      <path\n        d=\"M106.79 38.6895C123.327 38.6895 136.894 51.9541 136.894 68.5137C136.894 76.5206 133.244 84.3633 128.841 91.0752C124.341 97.9338 118.471 104.484 112.804 110.081C107.108 115.707 101.439 120.544 97.2097 123.965C95.0894 125.68 93.3171 127.05 92.0662 127.998C91.8974 128.126 91.7274 128.243 91.5994 128.329C88.0526 130.71 83.3727 130.71 79.8259 128.329C79.698 128.243 79.5288 128.126 79.3601 127.998C78.1091 127.05 76.3359 125.68 74.2156 123.965C69.986 120.544 64.3172 115.707 58.6208 110.081C52.9544 104.484 47.0853 97.9337 42.5857 91.0752C38.1822 84.3632 34.532 76.5207 34.532 68.5137C34.5322 51.9541 48.0987 38.6895 64.6355 38.6895C72.8311 38.6895 80.2775 41.9391 85.7126 47.2197C91.1477 41.9391 98.5942 38.6896 106.79 38.6895ZM106.79 48.4238C99.6653 48.424 93.4039 52.0264 89.7615 57.4854C88.8586 58.8382 87.3392 59.6504 85.7126 59.6504C84.0861 59.6503 82.5666 58.8383 81.6638 57.4854C78.0213 52.0263 71.7602 48.4238 64.6355 48.4238C53.3574 48.4239 44.2665 57.447 44.2664 68.5137C44.2664 73.7138 46.7148 79.6237 50.7244 85.7354C54.7039 91.8011 60.0509 97.811 65.4617 103.155C70.863 108.49 76.2732 113.109 80.3376 116.396C82.3563 118.029 84.0395 119.33 85.2185 120.224L85.2517 120.246C85.5169 120.424 85.9084 120.424 86.1736 120.246C86.1872 120.237 86.199 120.23 86.2078 120.224H86.2068C87.3858 119.33 89.0689 118.029 91.0876 116.396C95.152 113.109 100.562 108.49 105.964 103.155C111.374 97.811 116.721 91.8011 120.701 85.7354C124.711 79.6237 127.16 73.7138 127.16 68.5137C127.16 57.447 118.068 48.4239 106.79 48.4238Z\"\n        fill=\"#FF5A85\"\n      />\n    </svg>\n  );\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/resources/ResourceCard.module.scss",
    "content": ".card {\n  min-width: 290px;\n  border-radius: 22px;\n  border: 1px solid var(--sb-layout-border-color);\n  padding: 32px;\n  color: var(--sb-primary-text-color);\n  text-decoration: none !important;\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  flex: 1 0 0;\n\n  .hoverIcon {\n    display: none;\n  }\n\n  .title {\n    font-size: 16px;\n    font-weight: 700;\n    margin: 12px 0;\n    letter-spacing: 0;\n  }\n\n  .description {\n    color: var(--sb-secondary-text-color);\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 140%;\n    letter-spacing: 0.44px;\n  }\n\n  &:hover {\n    background: var(--sb-allgrey-background-color);\n    mix-blend-mode: multiply;\n\n    .icon {\n      display: none;\n    }\n    .hoverIcon {\n      display: block;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/resources/ResourceCard.tsx",
    "content": "import React from \"react\";\nimport styles from \"./ResourceCard.module.scss\";\nimport { StorybookLink } from \"vibe-storybook-components\";\nimport Title from \"../Title\";\n\nexport default function ResourceCard({\n  icon,\n  hoverIcon,\n  title,\n  description,\n  page\n}: {\n  icon: React.ReactNode;\n  hoverIcon: React.ReactNode;\n  title: string;\n  description: string;\n  page: string;\n}) {\n  return (\n    <StorybookLink className={styles.card} page={page}>\n      <div>\n        <div className={styles.icon}>{icon}</div>\n        <div className={styles.hoverIcon}>{hoverIcon}</div>\n      </div>\n      <div>\n        <Title className={styles.title}>{title}</Title>\n        <div className={styles.description}>{description}</div>\n      </div>\n    </StorybookLink>\n  );\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/resources/Resources.module.scss",
    "content": ".resources {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  justify-content: stretch;\n  margin-top: 42px;\n  margin-bottom: 160px;\n  flex-flow: wrap;\n}\n\n.text {\n  color: var(--sb-secondary-text-color);\n  font-size: 16px;\n  font-weight: 400;\n  letter-spacing: 0.44px;\n  line-height: 140%;\n  margin: 0;\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/resources/Resources.tsx",
    "content": "import React from \"react\";\nimport styles from \"./Resources.module.scss\";\nimport ResourceCard from \"./ResourceCard\";\nimport IconFoundations from \"./icons/IconFoundations\";\nimport IconFoundationsColored from \"./icons/IconFoundationsColored\";\nimport IconComponents from \"./icons/IconComponents\";\nimport IconComponentsColored from \"./icons/IconComponentsColored\";\nimport IconPatterns from \"./icons/IconPatterns\";\nimport IconPatternsColored from \"./icons/IconPatternsColored\";\nimport Section from \"../Section\";\nimport EntranceAnimation from \"../EntranceAnimation\";\n\nexport default function Resources() {\n  return (\n    <>\n      <EntranceAnimation>\n        <Section>Our Resources</Section>\n      </EntranceAnimation>\n\n      <EntranceAnimation>\n        <p className={styles.text}>\n          Explore monday.com’s open-source <br />\n          design and development tools.\n        </p>\n        <div className={styles.resources}>\n          <ResourceCard\n            icon={<IconFoundations />}\n            hoverIcon={<IconFoundationsColored />}\n            title=\"Foundations\"\n            description=\"Colors, spacing, typography, and core design tokens.\"\n            page=\"Foundations/Accessibility\"\n          />\n          <ResourceCard\n            icon={<IconComponents />}\n            hoverIcon={<IconComponentsColored />}\n            title=\"Components\"\n            description=\"Reusable blocks for creating monday.com experiences.\"\n            page=\"Components/Accordion\"\n          />\n          <ResourceCard\n            icon={<IconPatterns />}\n            hoverIcon={<IconPatternsColored />}\n            title=\"Patterns\"\n            description=\"Best practices for solving common UX challenges.\"\n            page=\"\"\n          />\n        </div>\n      </EntranceAnimation>\n    </>\n  );\n}\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/resources/icons/IconComponents.tsx",
    "content": "import React from \"react\";\n\nconst IconComponents: React.FC<React.SVGProps<SVGSVGElement>> = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"33\" height=\"33\" viewBox=\"0 0 102 103\" fill=\"none\">\n    <path\n      d=\"M101.943 51.7322C101.768 79.4209 79.3555 101.834 51.6667 102.009L51.3394 102.01C23.5002 102.01 0.911436 79.53 0.73537 51.7322L0.734314 51.4049C0.734317 23.4565 23.391 0.799807 51.3394 0.799805L51.6667 0.800861C79.4645 0.976927 101.944 23.5657 101.944 51.4049L101.943 51.7322Z\"\n      fill=\"#121212\"\n    />\n    <path\n      d=\"M51.3398 9.0498C74.733 9.04994 93.6978 28.014 93.6982 51.4072C93.6982 74.8008 74.7333 93.7655 51.3398 93.7656C27.9464 93.7654 8.98236 74.8007 8.98236 51.4072C8.98277 28.0141 27.9466 9.05004 51.3398 9.0498ZM51.3398 18.7842C33.3228 18.7844 18.7171 33.3903 18.7167 51.4072C18.7167 69.4245 33.3225 84.031 51.3398 84.0312C69.3571 84.0311 83.9638 69.4246 83.9638 51.4072C83.9634 33.3902 69.3569 18.7843 51.3398 18.7842Z\"\n      fill=\"white\"\n    />\n  </svg>\n);\n\nexport default IconComponents;\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/resources/icons/IconComponentsColored.tsx",
    "content": "import React from \"react\";\n\nconst IconComponentsColored: React.FC<React.SVGProps<SVGSVGElement>> = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"33\" height=\"33\" viewBox=\"0 0 102 103\" fill=\"none\">\n    <path\n      d=\"M101.943 51.7322C101.768 79.4209 79.3555 101.834 51.6667 102.009L51.3394 102.01C23.5002 102.01 0.911436 79.53 0.73537 51.7322L0.734314 51.4049C0.734317 23.4565 23.391 0.799807 51.3394 0.799805L51.6667 0.800861C79.4645 0.976927 101.944 23.5657 101.944 51.4049L101.943 51.7322Z\"\n      fill=\"#121212\"\n    />\n    <path\n      d=\"M51.3398 9.0498C74.733 9.04994 93.6978 28.014 93.6982 51.4072C93.6982 74.8008 74.7333 93.7655 51.3398 93.7656C27.9464 93.7654 8.98236 74.8007 8.98236 51.4072C8.98277 28.0141 27.9466 9.05004 51.3398 9.0498ZM51.3398 18.7842C33.3228 18.7844 18.7171 33.3903 18.7167 51.4072C18.7167 69.4245 33.3225 84.031 51.3398 84.0312C69.3571 84.0311 83.9638 69.4246 83.9638 51.4072C83.9634 33.3902 69.3569 18.7843 51.3398 18.7842Z\"\n      fill=\"#FFC300\"\n    />\n  </svg>\n);\n\nexport default IconComponentsColored;\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/resources/icons/IconFoundations.tsx",
    "content": "import React from \"react\";\n\nconst IconFoundations: React.FC<React.SVGProps<SVGSVGElement>> = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"33\" height=\"33\" viewBox=\"0 0 120 109\" fill=\"none\">\n    <path\n      d=\"M119.206 38.4917C119.206 48.5591 114.82 57.7711 110.246 64.8912L110.029 65.2287C110.025 65.2336 110.022 65.2384 110.019 65.2433L109.812 65.5608C109.808 65.5663 109.805 65.5718 109.801 65.5772C105.163 72.6467 99.3178 79.2526 93.7585 84.837L93.2215 85.3742L93.2099 85.3857L92.6764 85.9149C92.6727 85.9186 92.6689 85.9223 92.6652 85.926C87.0839 91.4387 81.5554 96.1996 77.2859 99.6849L76.8767 100.018L76.87 100.024L76.4682 100.349C76.466 100.351 76.4638 100.353 76.4616 100.355C74.7798 101.715 73.306 102.869 72.1194 103.78L71.6286 104.156L71.6179 104.164L71.1228 104.541C71.1193 104.544 71.1158 104.546 71.1123 104.549C70.9112 104.701 70.7235 104.836 70.5679 104.944L70.4237 105.044C70.4147 105.05 70.4057 105.056 70.3966 105.062L70.2889 105.135C70.2797 105.141 70.2705 105.148 70.2613 105.154C64.0807 109.303 56.0082 109.398 49.7409 105.444L49.5933 105.35C49.5721 105.336 49.5508 105.322 49.5298 105.309L49.3521 105.192C49.333 105.179 49.314 105.166 49.295 105.154C49.1898 105.083 49.0445 104.984 48.8775 104.866L48.704 104.742L48.6475 104.7L48.5106 104.599C48.4883 104.582 48.4661 104.566 48.4439 104.549C47.3682 103.734 45.9357 102.629 44.2434 101.278L43.5025 100.684L43.4961 100.679L43.1014 100.36C43.0992 100.358 43.0969 100.356 43.0947 100.355C38.993 97.037 33.556 92.4113 27.9886 87.0013L27.4494 86.4754C27.4455 86.4715 27.4415 86.4676 27.4376 86.4638L26.9019 85.9367L26.891 85.926C21.1886 80.2936 15.0861 73.54 10.2201 66.2786L9.98931 65.9324L9.97967 65.9177L9.76605 65.594L9.75509 65.5772C5.01757 58.3561 0.349976 48.8763 0.349976 38.4917C0.349988 17.2732 17.7137 0.419922 38.7008 0.419922L38.938 0.420582C46.616 0.466923 53.7828 2.76221 59.7779 6.68243C65.8348 2.72174 73.0878 0.419922 80.8555 0.419922L81.1013 0.420714C101.978 0.551731 119.206 17.3562 119.206 38.4917Z\"\n      fill=\"#121212\"\n    />\n    <path\n      d=\"M80.8555 8.68945C97.3923 8.68949 110.96 21.9541 110.96 38.5137C110.96 46.5206 107.31 54.3633 102.906 61.0752C98.4066 67.9338 92.5366 74.4843 86.8701 80.0811C81.1737 85.7075 75.505 90.5437 71.2754 93.9648C69.1551 95.6799 67.3828 97.0501 66.1318 97.998C65.9631 98.1259 65.793 98.2432 65.665 98.3291C62.1183 100.71 57.4383 100.71 53.8916 98.3291C53.7637 98.2432 53.5944 98.1258 53.4258 97.998C52.1748 97.0501 50.4016 95.6799 48.2812 93.9648C44.0516 90.5436 38.3829 85.7074 32.6865 80.0811C27.0201 74.4843 21.151 67.9337 16.6514 61.0752C12.2479 54.3632 8.59766 46.5207 8.59766 38.5137C8.59783 21.9541 22.1644 8.6895 38.7012 8.68945C46.8968 8.68947 54.3432 11.9391 59.7783 17.2197C65.2134 11.9391 72.6599 8.68957 80.8555 8.68945ZM80.8555 18.4238C73.731 18.424 67.4696 22.0264 63.8271 27.4854C62.9243 28.8382 61.4048 29.6504 59.7783 29.6504C58.1518 29.6503 56.6323 28.8383 55.7295 27.4854C52.087 22.0263 45.8259 18.4238 38.7012 18.4238C27.423 18.4239 18.3322 27.447 18.332 38.5137C18.332 43.7138 20.7805 49.6237 24.79 55.7354C28.7696 61.8011 34.1166 67.811 39.5273 73.1553C44.9287 78.4902 50.3389 83.1089 54.4033 86.3965C56.422 88.0293 58.1051 89.3299 59.2842 90.2236L59.3174 90.2461C59.5826 90.4241 59.974 90.4241 60.2393 90.2461C60.2528 90.237 60.2647 90.2296 60.2734 90.2236H60.2725C61.4515 89.3299 63.1346 88.0294 65.1533 86.3965C69.2177 83.1089 74.628 78.4901 80.0293 73.1553C85.4401 67.811 90.7871 61.8011 94.7666 55.7354C98.7762 49.6237 101.226 43.7138 101.226 38.5137C101.225 27.447 92.1336 18.4239 80.8555 18.4238Z\"\n      fill=\"white\"\n    />\n  </svg>\n);\n\nexport default IconFoundations;\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/resources/icons/IconFoundationsColored.tsx",
    "content": "import React from \"react\";\n\nconst IconFoundationsColored: React.FC<React.SVGProps<SVGSVGElement>> = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"33\" height=\"33\" viewBox=\"0 0 120 109\" fill=\"none\">\n    <path\n      d=\"M119.206 38.4917C119.206 48.5591 114.82 57.7711 110.246 64.8912L110.029 65.2287C110.025 65.2336 110.022 65.2384 110.019 65.2433L109.812 65.5608C109.808 65.5663 109.805 65.5718 109.801 65.5772C105.163 72.6467 99.3178 79.2526 93.7585 84.837L93.2215 85.3742L93.2099 85.3857L92.6764 85.9149C92.6727 85.9186 92.6689 85.9223 92.6652 85.926C87.0839 91.4387 81.5554 96.1996 77.2859 99.6849L76.8767 100.018L76.87 100.024L76.4682 100.349C76.466 100.351 76.4638 100.353 76.4616 100.355C74.7798 101.715 73.306 102.869 72.1194 103.78L71.6286 104.156L71.6179 104.164L71.1228 104.541C71.1193 104.544 71.1158 104.546 71.1123 104.549C70.9112 104.701 70.7235 104.836 70.5679 104.944L70.4237 105.044C70.4147 105.05 70.4057 105.056 70.3966 105.062L70.2889 105.135C70.2797 105.141 70.2705 105.148 70.2613 105.154C64.0807 109.303 56.0082 109.398 49.7409 105.444L49.5933 105.35C49.5721 105.336 49.5508 105.322 49.5298 105.309L49.3521 105.192C49.333 105.179 49.314 105.166 49.295 105.154C49.1898 105.083 49.0445 104.984 48.8775 104.866L48.704 104.742L48.6475 104.7L48.5106 104.599C48.4883 104.582 48.4661 104.566 48.4439 104.549C47.3682 103.734 45.9357 102.629 44.2434 101.278L43.5025 100.684L43.4961 100.679L43.1014 100.36C43.0992 100.358 43.0969 100.356 43.0947 100.355C38.993 97.037 33.556 92.4113 27.9886 87.0013L27.4494 86.4754C27.4455 86.4715 27.4415 86.4676 27.4376 86.4638L26.9019 85.9367L26.891 85.926C21.1886 80.2936 15.0861 73.54 10.2201 66.2786L9.98931 65.9324L9.97967 65.9177L9.76605 65.594L9.75509 65.5772C5.01757 58.3561 0.349976 48.8763 0.349976 38.4917C0.349988 17.2732 17.7137 0.419922 38.7008 0.419922L38.938 0.420582C46.616 0.466923 53.7828 2.76221 59.7779 6.68243C65.8348 2.72174 73.0878 0.419922 80.8555 0.419922L81.1013 0.420714C101.978 0.551731 119.206 17.3562 119.206 38.4917Z\"\n      fill=\"#121212\"\n    />\n    <path\n      d=\"M80.8555 8.68945C97.3923 8.68949 110.96 21.9541 110.96 38.5137C110.96 46.5206 107.31 54.3633 102.906 61.0752C98.4066 67.9338 92.5366 74.4843 86.8701 80.0811C81.1737 85.7075 75.505 90.5437 71.2754 93.9648C69.1551 95.6799 67.3828 97.0501 66.1318 97.998C65.9631 98.1259 65.793 98.2432 65.665 98.3291C62.1183 100.71 57.4383 100.71 53.8916 98.3291C53.7637 98.2432 53.5944 98.1258 53.4258 97.998C52.1748 97.0501 50.4016 95.6799 48.2812 93.9648C44.0516 90.5436 38.3829 85.7074 32.6865 80.0811C27.0201 74.4843 21.151 67.9337 16.6514 61.0752C12.2479 54.3632 8.59766 46.5207 8.59766 38.5137C8.59783 21.9541 22.1644 8.6895 38.7012 8.68945C46.8968 8.68947 54.3432 11.9391 59.7783 17.2197C65.2134 11.9391 72.6599 8.68957 80.8555 8.68945ZM80.8555 18.4238C73.731 18.424 67.4696 22.0264 63.8271 27.4854C62.9243 28.8382 61.4048 29.6504 59.7783 29.6504C58.1518 29.6503 56.6323 28.8383 55.7295 27.4854C52.087 22.0263 45.8259 18.4238 38.7012 18.4238C27.423 18.4239 18.3322 27.447 18.332 38.5137C18.332 43.7138 20.7805 49.6237 24.79 55.7354C28.7696 61.8011 34.1166 67.811 39.5273 73.1553C44.9287 78.4902 50.3389 83.1089 54.4033 86.3965C56.422 88.0293 58.1051 89.3299 59.2842 90.2236L59.3174 90.2461C59.5826 90.4241 59.974 90.4241 60.2393 90.2461C60.2528 90.237 60.2647 90.2296 60.2734 90.2236H60.2725C61.4515 89.3299 63.1346 88.0294 65.1533 86.3965C69.2177 83.1089 74.628 78.4901 80.0293 73.1553C85.4401 67.811 90.7871 61.8011 94.7666 55.7354C98.7762 49.6237 101.226 43.7138 101.226 38.5137C101.225 27.447 92.1336 18.4239 80.8555 18.4238Z\"\n      fill=\"#FF5A85\"\n    />\n  </svg>\n);\n\nexport default IconFoundationsColored;\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/resources/icons/IconPatterns.tsx",
    "content": "import React from \"react\";\n\nconst IconPatterns: React.FC<React.SVGProps<SVGSVGElement>> = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"33\" height=\"33\" viewBox=\"0 0 107 107\" fill=\"none\">\n    <path\n      d=\"M106.376 30.437C106.318 39.659 102.095 47.8929 95.4944 53.3534C102.095 58.8138 106.318 67.0477 106.376 76.2698L106.377 76.4636C106.377 92.9556 93.0595 106.337 76.592 106.441L76.3982 106.442C67.0979 106.442 58.7868 102.207 53.2881 95.5601C47.8276 102.161 39.5938 106.383 30.3718 106.441L30.178 106.442C13.686 106.442 0.304446 93.1249 0.200184 76.6574L0.199524 76.4636C0.199524 67.1632 4.43474 58.852 11.0817 53.3534C4.48095 47.8929 0.258572 39.659 0.200184 30.437L0.199524 30.2431C0.199524 13.6865 13.6214 0.264651 30.178 0.264648L30.3718 0.265309C39.5937 0.323696 47.8276 4.54594 53.2881 11.1465C58.7868 4.49973 67.0979 0.264651 76.3982 0.264648L76.592 0.265309C93.0595 0.36957 106.377 13.7511 106.377 30.2431L106.376 30.437Z\"\n      fill=\"#121212\"\n    />\n    <path\n      d=\"M30.178 55.4082C41.8063 55.4085 51.2326 64.8346 51.2327 76.4629C51.2327 88.0912 41.8063 97.5183 30.178 97.5186C18.5495 97.5186 9.12238 88.0914 9.12238 76.4629C9.12251 64.8345 18.5496 55.4082 30.178 55.4082ZM76.3978 55.4082C88.0261 55.4083 97.4523 64.8345 97.4525 76.4629C97.4525 88.0913 88.0262 97.5185 76.3978 97.5186C64.7692 97.5186 55.3421 88.0914 55.3421 76.4629C55.3422 64.8345 64.7693 55.4082 76.3978 55.4082ZM30.178 63.79C23.1791 63.79 17.5053 69.464 17.5052 76.4629C17.5052 83.4619 23.179 89.1357 30.178 89.1357C37.1769 89.1355 42.8509 83.4618 42.8509 76.4629C42.8508 69.4641 37.1768 63.7903 30.178 63.79ZM76.3978 63.79C69.3988 63.79 63.725 69.464 63.7249 76.4629C63.7249 83.4619 69.3987 89.1357 76.3978 89.1357C83.3967 89.1356 89.0706 83.4619 89.0706 76.4629C89.0705 69.464 83.3966 63.7901 76.3978 63.79ZM30.178 9.1875C41.8063 9.18775 51.2326 18.6139 51.2327 30.2422C51.2327 41.8705 41.8063 51.2976 30.178 51.2979C18.5495 51.2979 9.12241 41.8707 9.12238 30.2422C9.12247 18.6138 18.5496 9.1875 30.178 9.1875ZM76.3978 9.1875C88.0261 9.1876 97.4524 18.6138 97.4525 30.2422C97.4524 41.8706 88.0262 51.2978 76.3978 51.2979C64.7693 51.2979 55.3421 41.8707 55.3421 30.2422C55.3422 18.6137 64.7693 9.1875 76.3978 9.1875ZM30.178 17.5693C23.1791 17.5693 17.5053 23.2432 17.5052 30.2422C17.5052 37.2412 23.179 42.915 30.178 42.915C37.1768 42.9148 42.8509 37.241 42.8509 30.2422C42.8508 23.2434 37.1768 17.5696 30.178 17.5693ZM76.3978 17.5693C69.3988 17.5693 63.725 23.2432 63.7249 30.2422C63.7249 37.2412 69.3987 42.915 76.3978 42.915C83.3967 42.9149 89.0706 37.2411 89.0706 30.2422C89.0705 23.2433 83.3967 17.5694 76.3978 17.5693Z\"\n      fill=\"white\"\n    />\n  </svg>\n);\n\nexport default IconPatterns;\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/resources/icons/IconPatternsColored.tsx",
    "content": "import React from \"react\";\n\nconst IconPatternsColored: React.FC<React.SVGProps<SVGSVGElement>> = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"33\" height=\"33\" viewBox=\"0 0 107 107\" fill=\"none\">\n    <path\n      d=\"M106.376 30.437C106.318 39.659 102.095 47.8929 95.4944 53.3534C102.095 58.8138 106.318 67.0477 106.376 76.2698L106.377 76.4636C106.377 92.9556 93.0595 106.337 76.592 106.441L76.3982 106.442C67.0979 106.442 58.7868 102.207 53.2881 95.5601C47.8276 102.161 39.5938 106.383 30.3718 106.441L30.178 106.442C13.686 106.442 0.304446 93.1249 0.200184 76.6574L0.199524 76.4636C0.199524 67.1632 4.43474 58.852 11.0817 53.3534C4.48095 47.8929 0.258572 39.659 0.200184 30.437L0.199524 30.2431C0.199524 13.6865 13.6214 0.264651 30.178 0.264648L30.3718 0.265309C39.5937 0.323696 47.8276 4.54594 53.2881 11.1465C58.7868 4.49973 67.0979 0.264651 76.3982 0.264648L76.592 0.265309C93.0595 0.36957 106.377 13.7511 106.377 30.2431L106.376 30.437Z\"\n      fill=\"#121212\"\n    />\n    <path\n      d=\"M30.178 55.4082C41.8063 55.4085 51.2326 64.8346 51.2327 76.4629C51.2327 88.0912 41.8063 97.5183 30.178 97.5186C18.5495 97.5186 9.12238 88.0914 9.12238 76.4629C9.12251 64.8345 18.5496 55.4082 30.178 55.4082ZM76.3978 55.4082C88.0261 55.4083 97.4523 64.8345 97.4525 76.4629C97.4525 88.0913 88.0262 97.5185 76.3978 97.5186C64.7692 97.5186 55.3421 88.0914 55.3421 76.4629C55.3422 64.8345 64.7693 55.4082 76.3978 55.4082ZM30.178 63.79C23.1791 63.79 17.5053 69.464 17.5052 76.4629C17.5052 83.4619 23.179 89.1357 30.178 89.1357C37.1769 89.1355 42.8509 83.4618 42.8509 76.4629C42.8508 69.4641 37.1768 63.7903 30.178 63.79ZM76.3978 63.79C69.3988 63.79 63.725 69.464 63.7249 76.4629C63.7249 83.4619 69.3987 89.1357 76.3978 89.1357C83.3967 89.1356 89.0706 83.4619 89.0706 76.4629C89.0705 69.464 83.3966 63.7901 76.3978 63.79ZM30.178 9.1875C41.8063 9.18775 51.2326 18.6139 51.2327 30.2422C51.2327 41.8705 41.8063 51.2976 30.178 51.2979C18.5495 51.2979 9.12241 41.8707 9.12238 30.2422C9.12247 18.6138 18.5496 9.1875 30.178 9.1875ZM76.3978 9.1875C88.0261 9.1876 97.4524 18.6138 97.4525 30.2422C97.4524 41.8706 88.0262 51.2978 76.3978 51.2979C64.7693 51.2979 55.3421 41.8707 55.3421 30.2422C55.3422 18.6137 64.7693 9.1875 76.3978 9.1875ZM30.178 17.5693C23.1791 17.5693 17.5053 23.2432 17.5052 30.2422C17.5052 37.2412 23.179 42.915 30.178 42.915C37.1768 42.9148 42.8509 37.241 42.8509 30.2422C42.8508 23.2434 37.1768 17.5696 30.178 17.5693ZM76.3978 17.5693C69.3988 17.5693 63.725 23.2432 63.7249 30.2422C63.7249 37.2412 69.3987 42.915 76.3978 42.915C83.3967 42.9149 89.0706 37.2411 89.0706 30.2422C89.0705 23.2433 83.3967 17.5694 76.3978 17.5693Z\"\n      fill=\"#6E6EFF\"\n    />\n  </svg>\n);\n\nexport default IconPatternsColored;\n"
  },
  {
    "path": "packages/docs/src/pages/welcome/welcome.mdx",
    "content": "import { Meta } from \"@storybook/blocks\";\nimport Team from \"./contributions/Team\";\nimport Founders from \"./contributions/Founders\";\nimport Contributors from \"./contributions/Contributors\";\nimport Resources from \"./resources/Resources\";\nimport Section from \"./Section\";\nimport Hero from \"./hero/Hero\";\n\n<Meta title=\"Welcome\" />\n\n<Hero />\n\n<Resources />\n\n<Team />\n\n<Contributors />\n"
  },
  {
    "path": "packages/docs/src/utils/createStoryMetaSettingsDecorator.ts",
    "content": "import iconsMetaData from \"@vibe/icons/meta\";\nimport { createStoryMetaSettings } from \"vibe-storybook-components\";\nimport { type CreateStoryMetaSettingsArgs } from \"vibe-storybook-components/types\";\nimport * as AllIcons from \"@vibe/icons\";\n\n/**\n * Decorator on createStoryMetaSettings from vibe-storybook-components - adds icons metadata and icons components to function arguments\n */\nexport function createStoryMetaSettingsDecorator({\n  component,\n  enumPropNamesArray,\n  iconPropNamesArray,\n  actionPropsArray,\n  ignoreControlsPropNamesArray\n}: Omit<CreateStoryMetaSettingsArgs, \"allIconsComponents\" | \"iconsMetaData\">) {\n  return createStoryMetaSettings({\n    component,\n    enumPropNamesArray,\n    iconPropNamesArray,\n    actionPropsArray,\n    ignoreControlsPropNamesArray,\n    iconsMetaData,\n    allIconsComponents: AllIcons\n  });\n}\n\nexport default createStoryMetaSettingsDecorator;\n"
  },
  {
    "path": "packages/docs/tsconfig.base.json",
    "content": "{\n  \"compilerOptions\": {\n    \"lib\": [\"esnext\", \"dom\"],\n    \"target\": \"es6\",\n    \"moduleResolution\": \"node\",\n    \"esModuleInterop\": true,\n    \"jsx\": \"react\",\n    \"skipLibCheck\": true,\n    \"noImplicitAny\": true,\n    \"baseUrl\": \".\"\n  }\n}\n"
  },
  {
    "path": "packages/docs/tsconfig.json",
    "content": "{\n  \"extends\": \"./tsconfig.base.json\",\n  \"compilerOptions\": {\n    \"module\": \"ESNext\",\n    \"declaration\": true,\n    \"sourceMap\": true,\n    \"allowJs\": true,\n    \"rootDir\": \"src\",\n    \"allowSyntheticDefaultImports\": true,\n    \"plugins\": [{ \"name\": \"typescript-plugin-css-modules\" }]\n  },\n  \"include\": [\"src/**/*\", \"types/**/*\", \"scripts/**/*.ts\"]\n}\n"
  },
  {
    "path": "packages/docs/tsconfig.storybook.json",
    "content": "{\n  \"extends\": \"./tsconfig.base.json\",\n  \"compilerOptions\": {\n    \"allowJs\": true,\n    \"resolveJsonModule\": true,\n    \"paths\": {\n      \"@vibe/core/next\": [\"../core/src/components/next.ts\"],\n      \"@vibe/core/interactionsTests\": [\"../core/src/tests/interactions-utils.ts\"],\n      \"@vibe/core\": [\"../core/src/index.ts\"],\n      \"@vibe/shared\": [\"../shared/src/index.ts\"],\n      \"@vibe/*\": [\"../components/*/src\", \"../*/src\"]\n    }\n  },\n  \"include\": [\"src/**/*\", \"types/**/*\", \"scripts/**/*.ts\", \".storybook/**/*\", \"../../components/*/src/**/*\"]\n}\n"
  },
  {
    "path": "packages/docs/vite.config.ts",
    "content": "import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({\n  plugins: [react()]\n});\n"
  },
  {
    "path": "packages/hooks/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [4.0.1](https://github.com/mondaycom/vibe/compare/@vibe/hooks@4.0.0...@vibe/hooks@4.0.1) (2026-04-16)\n\n**Note:** Version bump only for package @vibe/hooks\n\n\n\n\n\n## [3.0.3](https://github.com/mondaycom/vibe/compare/@vibe/hooks@3.0.2...@vibe/hooks@3.0.3) (2026-01-04)\n\n**Note:** Version bump only for package @vibe/hooks\n\n\n\n\n\n## [3.0.2](https://github.com/mondaycom/vibe/compare/@vibe/hooks@3.0.1...@vibe/hooks@3.0.2) (2025-11-26)\n\n**Note:** Version bump only for package @vibe/hooks\n\n\n\n\n\n## 3.0.1 (2025-11-25)\n\n**Note:** Version bump only for package @vibe/hooks\n"
  },
  {
    "path": "packages/hooks/package.json",
    "content": "{\n  \"name\": \"@vibe/hooks\",\n  \"version\": \"4.0.1\",\n  \"description\": \"Vibe sub-package for React hooks\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/mondaycom/vibe.git\",\n    \"directory\": \"packages/hooks\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/mondaycom/vibe/issues\"\n  },\n  \"homepage\": \"https://github.com/mondaycom/vibe#readme\",\n  \"author\": \"monday.com\",\n  \"license\": \"MIT\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.js\",\n  \"types\": \"dist/index.d.ts\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \".\": {\n      \"types\": \"./dist/index.d.ts\",\n      \"import\": \"./dist/index.js\",\n      \"default\": \"./dist/index.js\"\n    }\n  },\n  \"scripts\": {\n    \"build\": \"rollup -c\",\n    \"test\": \"vitest run\",\n    \"lint\": \"eslint \\\"./src/**/*.{js,jsx,ts,tsx}\\\"\"\n  },\n  \"dependencies\": {\n    \"@vibe/shared\": \"4.0.1\",\n    \"classnames\": \"^2.5.1\",\n    \"es-toolkit\": \"^1.39.10\"\n  },\n  \"devDependencies\": {\n    \"@testing-library/react\": \"^12.1.2\",\n    \"@testing-library/react-hooks\": \"^7.0.2\",\n    \"@testing-library/user-event\": \"^13.5.0\",\n    \"@vibe/config\": \"4.0.0\",\n    \"react\": \"^16.13.0\",\n    \"react-dom\": \"^16.13.0\",\n    \"react-test-renderer\": \"16\",\n    \"typescript\": \"^5.9.3\",\n    \"vitest\": \"^1.6.0\"\n  },\n  \"peerDependencies\": {\n    \"react\": \">=16.9.0\",\n    \"react-dom\": \">=16.9.0\"\n  },\n  \"sideEffects\": [\n    \"*.scss\",\n    \"*.css\",\n    \"*.scss.js\",\n    \"*.css.js\"\n  ],\n  \"eslintConfig\": {\n    \"extends\": [\n      \"../../node_modules/@vibe/config/.eslintrc.cjs\"\n    ]\n  }\n}\n"
  },
  {
    "path": "packages/hooks/rollup.config.mjs",
    "content": "import config from \"@vibe/config/rollup.config\";\n\nexport default config;\n"
  },
  {
    "path": "packages/hooks/src/index.ts",
    "content": "export { default as useClickOutside } from \"./useClickOutside\";\nexport { default as useIsOverflowing } from \"./useIsOverflowing\";\nexport { default as useResizeObserver } from \"./useResizeObserver\";\n"
  },
  {
    "path": "packages/hooks/src/types/files.d.ts",
    "content": "// SCSS\ndeclare module \"*.module.scss\" {\n  const classes: { [key: string]: string };\n  export default classes;\n}\n\n// SVG\ndeclare module \"*.svg\" {\n  const content: string;\n  export default content;\n}\n\ndeclare module \"*.png\";\ndeclare module \"*.mp4\";\ndeclare module \"*.pdf\";\n"
  },
  {
    "path": "packages/hooks/src/useClickOutside/__tests__/useClickOutside.test.ts",
    "content": "import { vi, beforeEach, afterEach, describe, it, expect, type Mock } from \"vitest\";\nimport { renderHook, cleanup, act } from \"@testing-library/react-hooks\";\nimport { fireEvent } from \"@testing-library/react\";\nimport useClickOutside from \"../index\";\n\ndescribe(\"useClickOutside\", () => {\n  let element: HTMLElement;\n  let callbackStub: Mock;\n\n  beforeEach(() => {\n    callbackStub = vi.fn();\n    element = document.createElement(\"div\");\n    document.body.appendChild(element);\n    renderHook(() => useClickOutside({ ref: { current: element }, callback: callbackStub }));\n  });\n\n  afterEach(() => {\n    element.remove();\n    cleanup();\n  });\n  describe(\"mouseDown\", () => {\n    it(\"should call the callback when click outside the element\", () => {\n      act(() => {\n        fireEvent.click(document.body);\n      });\n      return expect(callbackStub.mock.calls.length).toEqual(1);\n    });\n\n    it(\"should not call the callback when clicking the element\", () => {\n      act(() => {\n        fireEvent.click(element);\n      });\n      return expect(callbackStub.mock.calls.length).toEqual(0);\n    });\n  });\n\n  describe(\"touchStart\", () => {\n    it(\"should call the callback when click outside the element\", () => {\n      act(() => {\n        fireEvent.touchEnd(document.body);\n      });\n      return expect(callbackStub.mock.calls.length).toEqual(1);\n    });\n\n    it(\"should not call the callback when clicking the element\", () => {\n      act(() => {\n        fireEvent.touchEnd(element);\n      });\n      return expect(callbackStub.mock.calls.length).toEqual(0);\n    });\n  });\n\n  describe(\"contextMenu with overriding event name\", () => {\n    it(\"should not call the callback when click when overriding to differnet name\", () => {\n      element = document.createElement(\"div\");\n      document.body.appendChild(element);\n      renderHook(() =>\n        useClickOutside({ ref: { current: element }, callback: callbackStub, eventName: \"contextmenu\" })\n      );\n      act(() => {\n        fireEvent.mouseDown(document.body);\n      });\n      return expect(callbackStub.mock.calls.length).toEqual(0);\n    });\n\n    it(\"should call the callback for override when passing eventName parameter\", () => {\n      callbackStub = vi.fn();\n      element = document.createElement(\"div\");\n      document.body.appendChild(element);\n      renderHook(() =>\n        useClickOutside({ ref: { current: element }, callback: callbackStub, eventName: \"contextmenu\" })\n      );\n\n      act(() => {\n        fireEvent.contextMenu(document.body);\n      });\n      return expect(callbackStub.mock.calls.length).toEqual(1);\n    });\n  });\n});\n"
  },
  {
    "path": "packages/hooks/src/useClickOutside/index.ts",
    "content": "import { useCallback, useRef, type RefObject } from \"react\";\nimport { type GenericEventCallback, isClient, useEventListener } from \"@vibe/shared\";\n\nexport default function useClickOutside({\n  ref,\n  callback,\n  ignoreClasses,\n  eventName = \"click\"\n}: {\n  ref: RefObject<HTMLElement>;\n  callback: GenericEventCallback;\n  ignoreClasses?: string[];\n  eventName?: keyof HTMLElementEventMap | string;\n}) {\n  const onClickOutsideListener = useCallback(\n    (event: MouseEvent) => {\n      if (!ref || !ref.current || ref.current.contains(event.target as Node)) {\n        return;\n      }\n\n      const shouldIgnoreClasses = ignoreClasses && event.target instanceof HTMLElement;\n      if (shouldIgnoreClasses && event.target.closest(ignoreClasses.join(\",\"))) {\n        return;\n      }\n\n      callback(event);\n    },\n\n    [ref, callback, ignoreClasses]\n  );\n\n  const documentRef = useRef(isClient() ? document.body : null);\n\n  useEventListener({\n    eventName,\n    ref: documentRef,\n    callback: onClickOutsideListener,\n    capture: true\n  });\n\n  useEventListener({\n    eventName: \"touchend\",\n    ref: documentRef,\n    callback: onClickOutsideListener,\n    capture: true\n  });\n}\n"
  },
  {
    "path": "packages/hooks/src/useIsOverflowing/index.ts",
    "content": "import { type RefObject, useCallback, useState } from \"react\";\nimport useResizeObserver from \"../useResizeObserver\";\n\nfunction checkOverflow(element: HTMLElement, ignoreHeightOverflow: boolean, heightTolerance = 0, widthTolerance = 0) {\n  if (!element) {\n    return false;\n  }\n  const isOverflowingWidth = element.clientWidth + widthTolerance < element.scrollWidth;\n  const isOverflowingHeight = !ignoreHeightOverflow && element.clientHeight + heightTolerance < element.scrollHeight;\n  return isOverflowingWidth || isOverflowingHeight;\n}\n\nexport default function useIsOverflowing({\n  ref,\n  ignoreHeightOverflow = false,\n  tolerance: heightTolerance,\n  widthTolerance\n}: {\n  /**\n   * The ref of the element to check for overflow.\n   */\n  ref: RefObject<HTMLElement>;\n  /**\n   * Whether to ignore height overflow.\n   */\n  ignoreHeightOverflow?: boolean;\n  /**\n   * The tolerance value to consider the element as overflowing (height overflow).\n   */\n  tolerance?: number;\n  /**\n   * The tolerance value to consider the element as overflowing (width overflow).\n   */\n  widthTolerance?: number;\n}) {\n  const [isOverflowing, setIsOverflowing] = useState<boolean>(() =>\n    checkOverflow(ref?.current, ignoreHeightOverflow, heightTolerance, widthTolerance)\n  );\n  const callback = useCallback(() => {\n    const element = ref?.current;\n    if (!element) return;\n\n    const newOverflowState = checkOverflow(element, ignoreHeightOverflow, heightTolerance, widthTolerance);\n    setIsOverflowing(prevState => (prevState !== newOverflowState ? newOverflowState : prevState));\n  }, [ignoreHeightOverflow, ref, heightTolerance, widthTolerance]);\n\n  useResizeObserver({\n    ref,\n    callback,\n    debounceTime: 0\n  });\n\n  return isOverflowing;\n}\n"
  },
  {
    "path": "packages/hooks/src/useResizeObserver/index.ts",
    "content": "import { type RefObject, useCallback, useEffect } from \"react\";\nimport { debounce } from \"es-toolkit\";\n\ntype ResizeCallback = ({ borderBoxSize }: { borderBoxSize: ResizeObserverSize }) => void;\n\nexport default function useResizeObserver({\n  ref,\n  callback,\n  debounceTime = 200\n}: {\n  ref: RefObject<HTMLElement>;\n  callback: ResizeCallback;\n  debounceTime?: number;\n}) {\n  const debouncedCallback = useCallback(debounce<ResizeCallback>(callback, debounceTime), [callback, debounceTime]);\n\n  useEffect(() => {\n    if (!window.ResizeObserver) {\n      return;\n    }\n    if (!ref?.current) return;\n\n    function borderBoxSizeCallback(borderBoxSize: ResizeObserverSize | ReadonlyArray<ResizeObserverSize>): number {\n      const value = Array.isArray(borderBoxSize) ? borderBoxSize[0] : borderBoxSize;\n      return window.requestAnimationFrame(() => {\n        debouncedCallback({ borderBoxSize: value });\n      });\n    }\n\n    let animationFrameId: number | null = null;\n\n    const resizeObserver = new ResizeObserver(entries => {\n      const entry = entries[0];\n      if (entry && entry.borderBoxSize) {\n        // handle chrome (entry.borderBoxSize[0])\n        // handle ff (entry.borderBoxSize)\n        if (!Array.isArray(entry.borderBoxSize)) {\n          animationFrameId = borderBoxSizeCallback(entry.borderBoxSize);\n        } else {\n          const borderBoxEntry = entry.borderBoxSize[0];\n          animationFrameId = borderBoxSizeCallback(borderBoxEntry);\n        }\n      } else if (entry.contentRect) {\n        // handle safari (entry.contentRect)\n        const borderBoxSize = { blockSize: entry.contentRect.height, inlineSize: entry?.contentRect?.width || 0 };\n        animationFrameId = borderBoxSizeCallback(borderBoxSize);\n      } else {\n        return;\n      }\n    });\n\n    resizeObserver.observe(ref?.current);\n\n    return () => {\n      if (debounceTime !== 0) {\n        debouncedCallback.cancel();\n      }\n\n      if (animationFrameId) {\n        window.cancelAnimationFrame(animationFrameId);\n      }\n\n      resizeObserver.disconnect();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [ref?.current, callback, debounceTime, debouncedCallback]);\n}\n"
  },
  {
    "path": "packages/hooks/tsconfig.json",
    "content": "{\n  \"extends\": \"@vibe/config/tsconfig\",\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"rootDir\": \"src\"\n  },\n  \"include\": [\"src/**/*\"]\n}\n"
  },
  {
    "path": "packages/hooks/vitest.config.mjs",
    "content": "import config from \"@vibe/config/vitest.config\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n  ...config\n});\n"
  },
  {
    "path": "packages/hooks/vitest.setup.mjs",
    "content": "import { vi } from \"vitest\";\nimport \"@testing-library/jest-dom\";\nimport React from \"react\";\n\n// Mock ResizeObserver\nclass ResizeObserver {\n  observe() {}\n  unobserve() {}\n  disconnect() {}\n}\nglobal.ResizeObserver = ResizeObserver;\n\n// Mock react-inlinesvg\nvi.mock(\"react-inlinesvg\", () => ({\n  default: ({ src, ...props }) =>\n    React.createElement(\"div\", {\n      \"data-testid\": \"mock-svg\",\n      \"data-src\": src,\n      ...props\n    })\n}));\n"
  },
  {
    "path": "packages/icons/.cursor/rules/add-icon-from-monday-task.mdc",
    "content": "---\ndescription: \"Add a new icon to @vibe/icons package from a monday.com task. Automatically downloads the SVG file and integrates it into the icons package.\"\nglobs:\n  - \"src/**/*\"\nalwaysApply: false\n---\n\n# Add Icon from Monday.com Task\n\nWhen the user wants to add an icon from a monday.com task:\n\n1. **Extract the item ID** from the monday.com URL (last number in the path)\n2. **Use monday.com MCP tools** to get the task information and find the file attachment\n3. **Get the asset public URL** and download the SVG file\n4. **Extract and present the following information:**\n   - Task name\n   - Suggested icon name (PascalCase from task name, e.g., \"Monday Vibe Logo\" → \"MondayVibeLogo\")\n   - Task description\n   - Tags from task\n   - Icon category (Basic, Platform, or View) - determine from task name/description/tags\n5. **After data extraction is complete**, continue with the manual icon addition process (see `.cursor/rules/icon-generation-process.mdc`):\n   - Place SVG file in `src/svg/` directory\n   - Add metadata to `src/iconsMetaData.ts` using the extracted information\n   - Add before the closing `] satisfies Icon[];` bracket\n   - Add after the `// plop_marker:icon_metadata` comment\n   - Run `yarn lint && yarn build` from the package root\n   - Verify components were created successfully in `src/react/`\n\nThe build process automatically generates React components and lazy loaders.\n"
  },
  {
    "path": "packages/icons/.cursor/rules/icon-generation-process.mdc",
    "content": "---\nalwaysApply: false\n---\n\n# Icon Addition Process\n\nThis document outlines the steps required to add a new SVG icon to the `@vibe/icons` package. This ensures consistency and proper integration of new icons.\n\n## Quick Links\n\n- **For icons from monday.com tasks**: Use the Cursor rule `.cursor/rules/add-icon-from-monday-task.mdc` - simply ask Cursor: \"Add icon from task [monday.com URL]\". This will extract data from the task and then continue with the manual process below.\n- **For manual icon addition**: Follow the steps below\n\n## Manual Icon Addition Process\n\n## Steps\n\n1. **Prepare and Place the SVG File:**\n\n   - Add the SVG file to `src/svg/` directory\n   - Ensure the SVG filename matches the icon name in PascalCase (e.g., `MyNewIcon.svg`)\n\n2. **Add Metadata Entry:**\n\n   - Open `src/iconsMetaData.ts`\n   - Add a new metadata entry before the closing `] satisfies Icon[];` bracket\n   - Add after the `// plop_marker:icon_metadata` comment\n   - The entry should be an object with the following properties:\n     - `name`: The icon's name, matching the filename without the `.svg` extension (e.g., \"MyNewIcon\")\n     - `file`: The full SVG filename (e.g., `MyNewIcon.svg`)\n     - `description`: A brief, clear description of the icon\n     - `tags`: A comma-separated string of relevant keywords (e.g., `\"Tag1, Tag Two, Tag3\"`)\n\n   Example:\n\n   ```typescript\n   {\n     name: \"MyNewIcon\",\n     file: \"MyNewIcon.svg\",\n     description: \"A brief description of what this icon represents\",\n     tags: \"Tag1, Tag Two, Tag3\",\n   },\n   ```\n\n3. **Build and Verify:**\n\n   - Run `yarn lint && yarn build` from the package root\n   - Verify the React component was created in `src/react/`\n   - Verify the lazy loader was generated in `src/lazy/`\n   - Check that the icon is exported correctly\n\n4. **Test:**\n   - Import and use the icon in a test file or Storybook story\n   - Verify it renders correctly\n\nThe build process automatically:\n\n- Generates React components in `src/react/`\n- Generates lazy loaders in `src/lazy/`\n- Updates the main export files\n"
  },
  {
    "path": "packages/icons/.eslintrc.json",
    "content": "{\n  \"parser\": \"@typescript-eslint/parser\",\n  \"extends\": [\"eslint:recommended\", \"plugin:@typescript-eslint/recommended\"],\n  \"ignorePatterns\": [\"dist\", \".eslintrc.json\"],\n  \"plugins\": [\"@typescript-eslint\"],\n  \"rules\": {\n    \"no-unused-vars\": \"off\",\n    \"@typescript-eslint/no-var-requires\": \"off\",\n    \"@typescript-eslint/no-unused-vars\": [\n      \"warn\",\n      {\n        \"argsIgnorePattern\": \"^_\",\n        \"varsIgnorePattern\": \"^_\",\n        \"caughtErrorsIgnorePattern\": \"^_\"\n      }\n    ],\n    \"no-empty-function\": \"off\",\n    \"@typescript-eslint/no-empty-function\": [\"error\", { \"allow\": [\"arrowFunctions\"] }]\n  },\n  \"env\": {\n    \"node\": true\n  }\n}\n"
  },
  {
    "path": "packages/icons/.gitignore",
    "content": "src/lazy\nsrc/svg/index.ts\n"
  },
  {
    "path": "packages/icons/.prettierignore",
    "content": "src/react/*\n"
  },
  {
    "path": "packages/icons/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n# [1.16.0](https://github.com/mondaycom/vibe/compare/@vibe/icons@1.15.0...@vibe/icons@1.16.0) (2026-01-04)\n\n\n### Features\n\n* **Icons:** New zoom out icon ([#3227](https://github.com/mondaycom/vibe/issues/3227)) ([d480582](https://github.com/mondaycom/vibe/commit/d4805829ae79c9300a3a5767c84bc08db9cafa7c))\n\n\n\n\n\n# [1.15.0](https://github.com/mondaycom/vibe/compare/@vibe/icons@1.14.0...@vibe/icons@1.15.0) (2025-12-25)\n\n\n### Features\n\n* **icons:** allow a type-safe way to get all available icon names ([#3209](https://github.com/mondaycom/vibe/issues/3209)) ([473b47b](https://github.com/mondaycom/vibe/commit/473b47bc5ab39598d7d4060c4cd5c08732a365bc))\n\n\n\n\n\n# [1.14.0](https://github.com/mondaycom/vibe/compare/@vibe/icons@1.13.0...@vibe/icons@1.14.0) (2025-12-22)\n\n\n### Features\n\n* **icons:** update Image icon in Vibe icons ([#3206](https://github.com/mondaycom/vibe/issues/3206)) ([955d67d](https://github.com/mondaycom/vibe/commit/955d67dd6a662a3a298ab275afcdb4bf9e2204a7))\n\n\n\n\n\n# [1.13.0](https://github.com/mondaycom/vibe/compare/@vibe/icons@1.12.0...@vibe/icons@1.13.0) (2025-12-17)\n\n\n### Features\n\n* **icon:** add ZoomIn ([#3204](https://github.com/mondaycom/vibe/issues/3204)) ([0e97803](https://github.com/mondaycom/vibe/commit/0e97803418bb8b532030af13fd285acde674b044))\n\n\n\n\n\n# [1.12.0](https://github.com/mondaycom/vibe/compare/@vibe/icons@1.11.2...@vibe/icons@1.12.0) (2025-12-17)\n\n\n### Features\n\n* **Icon:** added NavigationArrow ([#3201](https://github.com/mondaycom/vibe/issues/3201)) ([c9cc5d0](https://github.com/mondaycom/vibe/commit/c9cc5d022743e328720f89582632eeed0084ae2b))\n\n\n\n\n\n## [1.11.2](https://github.com/mondaycom/vibe/compare/@vibe/icons@1.11.1...@vibe/icons@1.11.2) (2025-11-26)\n\n**Note:** Version bump only for package @vibe/icons\n\n\n\n\n\n## [1.11.1](https://github.com/mondaycom/vibe/compare/@vibe/icons@1.11.0...@vibe/icons@1.11.1) (2025-11-06)\n\n**Note:** Version bump only for package @vibe/icons\n\n\n\n\n\n# [1.11.0](https://github.com/mondaycom/vibe/compare/@vibe/icons@1.10.0...@vibe/icons@1.11.0) (2025-09-04)\n\n\n### Features\n\n* **icons:** add EnterArrow icon ([#3087](https://github.com/mondaycom/vibe/issues/3087)) ([add070a](https://github.com/mondaycom/vibe/commit/add070a533ad272f00ceda76c449920d74fa9839))\n\n\n\n\n\n# [1.10.0](https://github.com/mondaycom/vibe/compare/@vibe/icons@1.9.0...@vibe/icons@1.10.0) (2025-08-20)\n\n\n### Features\n\n* **icons:** add RemoveRound icon ([#3061](https://github.com/mondaycom/vibe/issues/3061)) ([d886fc0](https://github.com/mondaycom/vibe/commit/d886fc0e772056879bcdc927ad5f035b7a8bbae1))\n\n\n\n\n\n# [1.9.0](https://github.com/mondaycom/vibe/compare/@vibe/icons@1.8.0...@vibe/icons@1.9.0) (2025-07-03)\n\n\n### Bug Fixes\n\n* **icons:** update DropdownChevronDown and DropdownChevronUp ([#2965](https://github.com/mondaycom/vibe/issues/2965)) ([57d9704](https://github.com/mondaycom/vibe/commit/57d9704f04a643884a43bb3274228b3daa52412e))\n\n\n### Features\n\n* **icons:** add ScheduledSend icon ([#2964](https://github.com/mondaycom/vibe/issues/2964)) ([1488c40](https://github.com/mondaycom/vibe/commit/1488c406b74269490e355525aae41532af63433e))\n\n\n\n\n\n# [1.8.0](https://github.com/mondaycom/vibe/compare/@vibe/icons@1.7.2...@vibe/icons@1.8.0) (2025-06-01)\n\n\n### Features\n\n* **icons:** add NotificationChecked ([#2915](https://github.com/mondaycom/vibe/issues/2915)) ([c4f27a8](https://github.com/mondaycom/vibe/commit/c4f27a803212ca2cdd5a592394b967b6895fa72d))\n\n\n\n\n\n## [1.7.2](https://github.com/mondaycom/vibe/compare/@vibe/icons@1.7.1...@vibe/icons@1.7.2) (2025-05-13)\n\n\n### Bug Fixes\n\n* **icons:** change Subitems icon ([#2881](https://github.com/mondaycom/vibe/issues/2881)) ([0b06b9f](https://github.com/mondaycom/vibe/commit/0b06b9fb61986aa43b15963f6454062f579bb165))\n\n\n\n\n\n## [1.7.1](https://github.com/mondaycom/vibe/compare/@vibe/icons@1.7.0...@vibe/icons@1.7.1) (2025-05-04)\n\n\n### Bug Fixes\n\n* **icons:** fix Dependency icon ([#2861](https://github.com/mondaycom/vibe/issues/2861)) ([7f5fca3](https://github.com/mondaycom/vibe/commit/7f5fca3b8d5c56a8864b301c3ec38312f43755fe))\n\n\n\n\n\n# [1.7.0](https://github.com/mondaycom/vibe/compare/@vibe/icons@1.6.1...@vibe/icons@1.7.0) (2025-04-10)\n\n\n### Features\n\n* **icons:** add TextFormatting and Signature icons ([#2838](https://github.com/mondaycom/vibe/issues/2838)) ([2844680](https://github.com/mondaycom/vibe/commit/28446808053f596396729d8bea1104f7fe7c9932))\n\n\n\n\n\n## [1.6.1](https://github.com/mondaycom/vibe/compare/@vibe/icons@1.6.0...@vibe/icons@1.6.1) (2025-04-06)\n\n\n### Bug Fixes\n\n* **icons:** correct path for lazy types definition in package.json ([#2834](https://github.com/mondaycom/vibe/issues/2834)) ([1777b7d](https://github.com/mondaycom/vibe/commit/1777b7d03c8e74b298ea4edd6813154d9019226b))\n\n\n\n\n\n# [1.6.0](https://github.com/mondaycom/vibe/compare/@vibe/icons@1.5.1...@vibe/icons@1.6.0) (2025-03-24)\n\n\n### Features\n\n* **icons:** add WrapText, PDF icons ([#2814](https://github.com/mondaycom/vibe/issues/2814)) ([2b46289](https://github.com/mondaycom/vibe/commit/2b46289634ced60ec10dd551f310b12a80ae409e))\n\n\n\n\n\n## [1.5.1](https://github.com/mondaycom/vibe/compare/@vibe/icons@1.5.0...@vibe/icons@1.5.1) (2025-03-20)\n\n\n### Bug Fixes\n\n* **icons:** fix MondayLogoOutline svg ([#2808](https://github.com/mondaycom/vibe/issues/2808)) ([e97b71d](https://github.com/mondaycom/vibe/commit/e97b71db9945d83adf0084c3786fee697e6ea94d))\n\n\n\n\n\n# [1.5.0](https://github.com/mondaycom/vibe/compare/@vibe/icons@1.4.0...@vibe/icons@1.5.0) (2025-02-13)\n\n\n### Features\n\n* **Icons:** Add MinusSmall ([#2761](https://github.com/mondaycom/vibe/issues/2761)) ([df01e7f](https://github.com/mondaycom/vibe/commit/df01e7fadf94b9b337dce5cc50b4d99b834f35be))\n\n\n\n\n\n# [1.4.0](https://github.com/mondaycom/vibe/compare/@vibe/icons@1.3.3...@vibe/icons@1.4.0) (2025-01-27)\n\n\n### Features\n\n* **Icons:** add ClassicFolder icon ([#2731](https://github.com/mondaycom/vibe/issues/2731)) ([2c33612](https://github.com/mondaycom/vibe/commit/2c336127c38c492a0b91c514c6ee293c40f8a9dd))\n* **Icons:** add new icons ([#2726](https://github.com/mondaycom/vibe/issues/2726)) ([72a2b80](https://github.com/mondaycom/vibe/commit/72a2b8045defaac5ab9c0d6889012825bbcdbf9e))\n\n\n\n\n\n## [1.3.3](https://github.com/mondaycom/vibe/compare/@vibe/icons@1.3.2...@vibe/icons@1.3.3) (2025-01-20)\n\n\n### Bug Fixes\n\n* **icons:** update icons ([#2724](https://github.com/mondaycom/vibe/issues/2724)) ([0782cc9](https://github.com/mondaycom/vibe/commit/0782cc9f16fe3fe123bc45303312c2a7a9c17adc))\n\n\n\n\n\n## [1.3.2](https://github.com/mondaycom/vibe/compare/@vibe/icons@1.3.1...@vibe/icons@1.3.2) (2025-01-16)\n\n\n### Bug Fixes\n\n* **icons:** update icons ([#2720](https://github.com/mondaycom/vibe/issues/2720)) ([14998e1](https://github.com/mondaycom/vibe/commit/14998e1a911f87760cd053c9ab4e10c51ded6d74))\n* **Icon:** update icons ([#2717](https://github.com/mondaycom/vibe/issues/2717)) ([742d9c2](https://github.com/mondaycom/vibe/commit/742d9c20c0b906c667c847cca42c17124f15b15a))\n\n\n\n\n\n## [1.3.1](https://github.com/mondaycom/vibe/compare/@vibe/icons@1.3.0...@vibe/icons@1.3.1) (2025-01-13)\n\n\n### Bug Fixes\n\n* **Icons:** update icons ([#2711](https://github.com/mondaycom/vibe/issues/2711)) ([be229ad](https://github.com/mondaycom/vibe/commit/be229adf34bfd22154c1db4c9696fada25d16608))\n* **icons:** update person icon ([#2714](https://github.com/mondaycom/vibe/issues/2714)) ([5dc2a1b](https://github.com/mondaycom/vibe/commit/5dc2a1b6f9aa35dc9acf16d04a770d31e5ead27e))\n\n\n\n\n\n# [1.3.0](https://github.com/mondaycom/vibe/compare/@vibe/icons@1.2.0...@vibe/icons@1.3.0) (2024-12-26)\n\n\n### Features\n\n* **icons:** add WarningFull icon ([#2676](https://github.com/mondaycom/vibe/issues/2676)) ([24e9abd](https://github.com/mondaycom/vibe/commit/24e9abde7f886df3879ad01e696d3e8a6e1dd622))\n* **icons:** revise Warning icon ([#2677](https://github.com/mondaycom/vibe/issues/2677)) ([325895e](https://github.com/mondaycom/vibe/commit/325895ea304f0d75a2fd84674515c1f03ae3266e))\n\n\n\n\n\n# [1.2.0](https://github.com/mondaycom/vibe/compare/@vibe/icons@1.1.0...@vibe/icons@1.2.0) (2024-12-12)\n\n\n### Features\n\n* **Move:** new icon ([#2646](https://github.com/mondaycom/vibe/issues/2646)) ([12b5cd1](https://github.com/mondaycom/vibe/commit/12b5cd1f72e9546c9b27ec9a237f4e9a51143a88))\n\n\n\n\n\n# [1.1.0](https://github.com/mondaycom/vibe/compare/@vibe/icons@1.0.0...@vibe/icons@1.1.0) (2024-12-04)\n\n\n### Features\n\n* add ScheduledEmail and Downgrade icons ([#2623](https://github.com/mondaycom/vibe/issues/2623)) ([de041ae](https://github.com/mondaycom/vibe/commit/de041ae3a9db483ae42fe8fe779ba13c5deb477a))\n\n\n\n\n\n# [1.0.0](https://github.com/mondaycom/vibe/compare/@vibe/icons@0.1.0...@vibe/icons@1.0.0) (2024-11-24)\n\n\n### Bug Fixes\n\n* **Icon:** rename \"replay\" to \"reply\" ([#2567](https://github.com/mondaycom/vibe/issues/2567)) ([993b853](https://github.com/mondaycom/vibe/commit/993b853211ba8a6af31cb6304081e36e9de333d5))\n* lazy loading icons name ([#2581](https://github.com/mondaycom/vibe/issues/2581)) ([a594aaf](https://github.com/mondaycom/vibe/commit/a594aaf6b1e104278314efe7a66a71df7768c7d1))\n\n\n### Features\n\n* merge new icons from master ([95b6956](https://github.com/mondaycom/vibe/commit/95b6956e8f181b5bcfc6222f47b56252f0b46525))\n* new major version ([6a5598c](https://github.com/mondaycom/vibe/commit/6a5598ca6ad50c2a383fcbe0657a80f138383d57))\n\n\n### BREAKING CHANGES\n\n* new major version\n"
  },
  {
    "path": "packages/icons/README.md",
    "content": "# @vibe/icons\n\nThis package includes all of the icons of monday.com's [Vibe Design System](https://vibe.monday.com/?path=/story/media-icon--icons-list-story), available as React components and raw SVGs and with lazy loading support for optimized performance and flexible usage in your projects.\n\n\n## Installation\n\nTo install, use the following command:\n\n```bash\nnpm install @vibe/icons\n```\n\n## Usage\n\n#### Using React Components\n\n```javascript\nimport { Close } from \"@vibe/icons\";\n```\n\n#### Using Lazy React Components\n\n```javascript\nimport { Close } from \"@vibe/icons/lazy\";\n```\n\n#### Using Raw SVG Files\n\n```javascript\nimport { Close as CloseSvg } from \"@vibe/icons/raw\";\n```\n\n#### Using Meta Information\n\nThe meta export provides detailed metadata for each icon, including:\n\n- `name`: The name of the icon.\n- `file`: The SVG file name.\n- `description`: A description of the icon's purpose or usage.\n- `tags`: Associated tags as a comma-separated string.\n\nThis metadata can be used to programmatically work with icons, such as building custom icon pickers or managing icons in your project.\n\n```javascript\nimport iconsMetaData from \"@vibe/icons/meta\";\n```\n\n### Using Type-Safe Icon Names\n\nFor TypeScript users, the types export provides type-safe icon names:\n\n```typescript\nimport type { IconName } from \"@vibe/icons/types\";\n\n// Type-safe props\ninterface IconButtonProps {\n  icon: IconName; // Autocomplete works!\n}\n```\n\n## Peer dependencies\n\nWe are reliant on React and React DOM, we are using them as externals, and we don't package them to the package, so you must have them in your project\n"
  },
  {
    "path": "packages/icons/package.json",
    "content": "{\n  \"name\": \"@vibe/icons\",\n  \"version\": \"4.0.0\",\n  \"description\": \"Vibe's Icon Library\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/mondaycom/vibe.git\",\n    \"directory\": \"packages/icons\"\n  },\n  \"author\": \"monday.com\",\n  \"license\": \"MIT\",\n  \"main\": \"./dist/react/index.js\",\n  \"type\": \"module\",\n  \"exports\": {\n    \".\": {\n      \"types\": \"./dist/react/index.d.ts\",\n      \"import\": \"./dist/react/index.js\",\n      \"default\": \"./dist/react/index.js\"\n    },\n    \"./meta\": {\n      \"types\": \"./dist/iconsMetaData.d.ts\",\n      \"import\": \"./dist/iconsMetaData.js\",\n      \"default\": \"./dist/iconsMetaData.js\"\n    },\n    \"./raw\": {\n      \"types\": \"./dist/svg/index.d.ts\",\n      \"import\": \"./dist/svg/index.js\",\n      \"default\": \"./dist/svg/index.js\"\n    },\n    \"./lazy\": {\n      \"types\": \"./dist/lazy/index.d.ts\",\n      \"import\": \"./dist/lazy/index.js\",\n      \"default\": \"./dist/lazy/index.js\"\n    },\n    \"./types\": {\n      \"types\": \"./dist/types.d.ts\",\n      \"import\": \"./dist/types.js\",\n      \"default\": \"./dist/types.js\"\n    }\n  },\n  \"typesVersions\": {\n    \"*\": {\n      \".\": [\n        \"./dist/react/index.d.ts\"\n      ],\n      \"meta\": [\n        \"./dist/iconsMetaData.d.ts\"\n      ],\n      \"raw\": [\n        \"./dist/svg/index.d.ts\"\n      ],\n      \"lazy\": [\n        \"./dist/lazy/index.d.ts\"\n      ],\n      \"types\": [\n        \"./dist/types.d.ts\"\n      ]\n    }\n  },\n  \"files\": [\n    \"dist\"\n  ],\n  \"scripts\": {\n    \"plop\": \"plop\",\n    \"build\": \"yarn clean && yarn build:react-icons && yarn generate-lazy-icons && yarn generate-svg-index && rollup -c\",\n    \"build:react-icons\": \"svg2react-icon --typescript --keep-colors src/svg/ src/react/ --no-sub-dir\",\n    \"clean\": \"rm -rf dist\",\n    \"test\": \"vitest\",\n    \"lint\": \"eslint . --max-warnings 0 && yarn validate-icons\",\n    \"lint:fix\": \"yarn lint -- --fix\",\n    \"validate-icons\": \"node scripts/validate-meta.js && node scripts/validate-icons-colors.js\",\n    \"generate-meta\": \"node scripts/generate-meta.js\",\n    \"generate-svg-index\": \"node scripts/generate-svg-index.js\",\n    \"generate-lazy-icons\": \"node scripts/generate-lazy-icons.js\"\n  },\n  \"devDependencies\": {\n    \"@rollup/plugin-node-resolve\": \"^15.0.1\",\n    \"@typescript-eslint/eslint-plugin\": \"^6.21.0\",\n    \"@typescript-eslint/parser\": \"^6.21.0\",\n    \"eslint\": \"^8.57.0\",\n    \"plop\": \"4.0.1\",\n    \"rollup\": \"^2.79.1\",\n    \"rollup-plugin-copy\": \"^3.5.0\",\n    \"rollup-plugin-svg\": \"^2.0.0\",\n    \"rollup-plugin-terser\": \"^7.0.2\",\n    \"rollup-plugin-typescript2\": \"^0.34.1\",\n    \"svg2react-icon\": \"^3.1.178\",\n    \"typescript\": \"^5.9.3\",\n    \"vitest\": \"^1.6.0\"\n  },\n  \"peerDependencies\": {\n    \"react\": \">=16.9.0\",\n    \"react-dom\": \">=16.9.0\"\n  },\n  \"sideEffects\": false\n}\n"
  },
  {
    "path": "packages/icons/plop/icon/icon-metadata.txt",
    "content": "$1\n  {\n      name: \"{{iconName}}\",\n      file: \"{{fileName}}\",\n      description: \"{{description}}\",\n      tags: \"{{tags}}\"\n  },\n"
  },
  {
    "path": "packages/icons/plop/icon/index.js",
    "content": "import { exec } from \"child_process\";\nexport default {\n  description: \"Adding a new icon\",\n  prompts: [\n    {\n      type: \"input\",\n      name: \"iconName\",\n      message: \"What is the name of the icon\"\n    },\n    {\n      type: \"input\",\n      name: \"fileName\",\n      message: \"FileName including the suffix (including '.svg') suffix\",\n      validate: input => input.endsWith(\".svg\") || \"FileName must end with .svg\",\n      default: ({ iconName }) => `${iconName}.svg`\n    },\n    {\n      type: \"input\",\n      name: \"description\",\n      message: \"Enter the icon description\"\n    },\n    {\n      type: \"input\",\n      name: \"tags\",\n      message: \"Enter tags for the icon (separate with ',')\"\n    }\n  ],\n  actions: () => {\n    return [\n      {\n        type: \"modify\",\n        path: \"src/iconsMetaData.ts\",\n        templateFile: \"plop/icon/icon-metadata.txt\",\n        pattern: /(\\/\\/ plop_marker:icon_metadata)/g\n      },\n      () =>\n        new Promise((resolve, reject) => {\n          console.log(\"Adding icon...\");\n          exec(\"yarn validate-icons\", (lintErr, lintStdout) => {\n            if (lintErr) {\n              console.error(lintErr);\n              reject(lintErr);\n              return;\n            }\n            console.log(lintStdout);\n\n            exec(\"yarn build\", (buildErr, buildStdout) => {\n              if (buildErr) {\n                console.error(buildErr);\n                reject(buildErr);\n                return;\n              }\n              console.log(buildStdout);\n              resolve(\"Icon added and icons built successfully!\");\n            });\n          });\n        })\n    ];\n  }\n};\n"
  },
  {
    "path": "packages/icons/plopfile.js",
    "content": "import icon from \"./plop/icon/index.js\";\n\nexport default function (plop) {\n  plop.setGenerator(\"Icon\", icon);\n}\n"
  },
  {
    "path": "packages/icons/rollup.config.js",
    "content": "import resolve from \"@rollup/plugin-node-resolve\";\nimport typescript from \"rollup-plugin-typescript2\";\nimport { terser } from \"rollup-plugin-terser\";\nimport svg from \"rollup-plugin-svg\";\n\nexport default {\n  input: [\"src/react/index.ts\", \"src/lazy/index.ts\", \"src/svg/index.ts\", \"src/iconsMetaData.ts\", \"src/types.ts\"],\n  output: {\n    dir: \"dist\",\n    indent: false,\n    strict: false,\n    exports: \"named\",\n    preserveModules: true,\n    preserveModulesRoot: \"./src\",\n    format: \"esm\"\n  },\n  external: [/node_modules/],\n  plugins: [resolve(), typescript(), terser(), svg()]\n};\n"
  },
  {
    "path": "packages/icons/scripts/__tests__/__snapshots__/validate-icons-colors.test.ts.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`validate-icons-colors > validateColors > should throw an error for disallowed colors 1`] = `\n[Error: \u001b[31mvalidate-icons-colors: Invalid color - fill=\"#123456\" used in 'invalid-icon.svg'.\n      Should be one of the folowing values for outlined icons: [\"currentColor\",\"none\"].\n      If color='white' and it's declared in <rect> (when using <clipPath> element), delete it and check if the icon looks fine\u001b[0m]\n`;\n"
  },
  {
    "path": "packages/icons/scripts/__tests__/validate-icons-colors.test.ts",
    "content": "import {\n  ALLOWED_COLORS,\n  EXCEPTIONAL_ICONS,\n  extractColorsFromSvg,\n  isEligibleForValidation,\n  validateColors\n} from \"../utils\";\n\nconst mockRealSVGInvalid = `\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.6413 4.31058C11.6411 4.31074 11.6414 4.31043 11.6413 4.31058L10.1221 5.82974L14.5799 10.2875L16.0991 8.76837C16.0992 8.76824 16.0989 8.7685 16.0991 8.76837C16.1376 8.72937 16.1597 8.67635 16.1597 8.62149C16.1597 8.56664 16.138 8.514 16.0995 8.47501C16.0993 8.47488 16.0996 8.47514 16.0995 8.47501L11.935 4.31058C11.9349 4.31045 11.9352 4.31071 11.935 4.31058C11.896 4.27202 11.843 4.25 11.7882 4.25C11.7333 4.25 11.6803 4.27207 11.6413 4.31058ZM13.696 11.1714L9.23825 6.71362L3.31058 12.6413C3.31043 12.6414 3.31074 12.6411 3.31058 12.6413C3.27207 12.6803 3.25 12.7333 3.25 12.7882C3.25 12.843 3.27164 12.8957 3.3102 12.9346C3.31033 12.9348 3.31007 12.9345 3.3102 12.9346L6.45954 16.084H8.78344L13.696 11.1714ZM10.5512 16.084L16.9843 9.65094L16.9856 9.64962C17.2572 9.37638 17.4097 9.00676 17.4097 8.62149C17.4097 8.23622 17.2572 7.86661 16.9856 7.59337L12.8176 3.42538L12.8163 3.42407C12.543 3.15246 12.1734 3 11.7882 3C11.4029 3 11.0333 3.15246 10.76 3.42407L10.7587 3.42539L2.42539 11.7587L2.42407 11.76C2.15246 12.0333 2 12.4029 2 12.7882C2 13.1734 2.15246 13.543 2.42407 13.8163L2.42539 13.8176L5.75872 17.1509C5.87593 17.2681 6.0349 17.334 6.20066 17.334H15.3673C15.7125 17.334 15.9923 17.0542 15.9923 16.709C15.9923 16.3638 15.7125 16.084 15.3673 16.084H10.5512Z\" fill=\"#676879\"/>\n    </svg>\n  `;\n\nconst mockSVGInvalid = `\n    <svg fill=\"currentColor\" stroke=\"none\">\n      <rect fill=\"currentColor\" stroke=\"blue\"/>\n      <circle fill=\"none\" stroke=\"#123456\"/>\n      <path fill=\"green\" stroke=\"none\"/>\n    </svg>\n  `;\n\nconst mockSVGValid = `\n    <svg fill=\"none\" stroke=\"currentColor\">\n      <path stroke=\"none\"/>\n      <rect fill=\"currentColor\" stroke=\"currentColor\"/>\n      <circle fill=\"none\" stroke=\"currentColor\"/>\n    </svg>\n  `;\n\nconst mockSVGWithoutColors = `\n      <svg>\n        <path />\n        <circle />\n      </svg>\n    `;\n\ndescribe(\"validate-icons-colors\", () => {\n  describe(\"isEligibleForValidation\", () => {\n    it(\"should return true for a valid svg file\", () => {\n      expect(isEligibleForValidation(\"valid-icon.svg\")).toBe(true);\n    });\n\n    it(\"should return false for an svg file in the EXCEPTIONAL_ICONS list\", () => {\n      expect(isEligibleForValidation(EXCEPTIONAL_ICONS[0])).toBe(false);\n    });\n\n    it(\"should return false for a non-svg file\", () => {\n      expect(isEligibleForValidation(\"not-an-svg.png\")).toBe(false);\n    });\n  });\n\n  describe(\"validateColors\", () => {\n    const disallowedColors = [\"red\", \"#123456\", \"helloworld\"];\n    disallowedColors.forEach(color => {\n      it(`should throw an error for disallowed color ${disallowedColors}`, () => {\n        const colors = [\n          { attribute: \"fill\", color: \"currentColor\" },\n          { attribute: \"stroke\", color }\n        ];\n        const svgFileName = \"valid-icon.svg\";\n        expect(() => validateColors(colors, svgFileName)).toThrow();\n      });\n    });\n\n    const allowedColors = ALLOWED_COLORS;\n    allowedColors.forEach(color => {\n      it(`should not throw an error for allowed color ${color}`, () => {\n        const colors = [\n          { attribute: \"fill\", color },\n          { attribute: \"stroke\", color: \"none\" }\n        ];\n        const svgFileName = \"valid-icon.svg\";\n        expect(() => validateColors(colors, svgFileName)).not.toThrow();\n      });\n    });\n\n    it(\"should throw an error for disallowed colors\", () => {\n      const colors = [{ attribute: \"fill\", color: \"#123456\" }];\n      const svgFileName = \"invalid-icon.svg\";\n      expect(() => validateColors(colors, svgFileName)).toThrowErrorMatchingSnapshot();\n    });\n  });\n\n  describe(\"extractColorsFromSvg\", () => {\n    it(\"should extract colors from an invalid svg\", () => {\n      const colors = extractColorsFromSvg(mockSVGInvalid);\n      const expectedColors = [\n        { attribute: \"fill\", color: \"currentColor\" },\n        { attribute: \"stroke\", color: \"none\" },\n        { attribute: \"fill\", color: \"currentColor\" },\n        { attribute: \"stroke\", color: \"blue\" },\n        { attribute: \"fill\", color: \"none\" },\n        { attribute: \"stroke\", color: \"#123456\" },\n        { attribute: \"fill\", color: \"green\" },\n        { attribute: \"stroke\", color: \"none\" }\n      ];\n      expect(colors).toEqual(expectedColors);\n    });\n\n    it(\"should extract colors from a valid svg\", () => {\n      const colors = extractColorsFromSvg(mockSVGValid);\n      const expectedColors = [\n        { attribute: \"fill\", color: \"none\" },\n        { attribute: \"stroke\", color: \"currentColor\" },\n        { attribute: \"stroke\", color: \"none\" },\n        { attribute: \"fill\", color: \"currentColor\" },\n        { attribute: \"stroke\", color: \"currentColor\" },\n        { attribute: \"fill\", color: \"none\" },\n        { attribute: \"stroke\", color: \"currentColor\" }\n      ];\n      expect(colors).toEqual(expectedColors);\n    });\n\n    it(\"should extract colors from a real invalid svg\", () => {\n      const colors = extractColorsFromSvg(mockRealSVGInvalid);\n      const expectedColors = [\n        { attribute: \"fill\", color: \"none\" },\n        { attribute: \"fill\", color: \"#676879\" }\n      ];\n      expect(colors).toEqual(expectedColors);\n    });\n\n    it(\"should handle SVG without color attributes\", () => {\n      const colors = extractColorsFromSvg(mockSVGWithoutColors);\n      expect(colors).toEqual([]);\n    });\n  });\n});\n"
  },
  {
    "path": "packages/icons/scripts/generate-lazy-icons.js",
    "content": "import fs from \"fs\";\nimport path from \"path\";\n\nconst REACT_ICONS_FOLDER = path.resolve(\"./src/react\");\nconst LAZY_EXPORTS_FOLDER = path.resolve(\"./src/lazy\");\n\nif (!fs.existsSync(LAZY_EXPORTS_FOLDER)) {\n  fs.mkdirSync(LAZY_EXPORTS_FOLDER);\n}\n\nconst iconFiles = fs.readdirSync(REACT_ICONS_FOLDER).filter(file => file.endsWith(\".tsx\"));\n\niconFiles.forEach(file => {\n  const fileNameWithoutExtension = path.basename(file, \".tsx\");\n  const lazyComponentCode = `import React, { lazy, Suspense } from 'react';\n\nconst ${fileNameWithoutExtension}Icon = lazy(() => import('../react/${fileNameWithoutExtension}'));\n\nconst ${fileNameWithoutExtension} = ({ fallback = <div />, ...props }) => (\n  <Suspense fallback={fallback}>\n    <${fileNameWithoutExtension}Icon {...props} />\n  </Suspense>\n);\n\nexport default ${fileNameWithoutExtension};\n`;\n\n  fs.writeFileSync(path.join(LAZY_EXPORTS_FOLDER, `${fileNameWithoutExtension}.tsx`), lazyComponentCode);\n});\n\n// Create an index.js file that exports all lazy-loaded components\nconst indexContent = iconFiles\n  .map(file => {\n    const fileNameWithoutExtension = path.basename(file, \".tsx\");\n    return `export { default as ${fileNameWithoutExtension} } from './${fileNameWithoutExtension}';`;\n  })\n  .join(\"\\n\");\n\nfs.writeFileSync(path.join(LAZY_EXPORTS_FOLDER, \"index.ts\"), indexContent);\n\nconsole.log(`Generated lazy components and index.ts for ${iconFiles.length} icons.`);\n"
  },
  {
    "path": "packages/icons/scripts/generate-meta.js",
    "content": "const nodePlop = require(\"node-plop\");\nconst { getFilesWithNoMetadata } = require(\"./metadata-util\");\n\nconst plop = nodePlop(`./plopfile.js`);\nconst IconGenerator = plop.getGenerator(\"Icon\");\n\nconst { fileWithNoMeta } = getFilesWithNoMetadata();\n\nasync function addFiles() {\n  if (fileWithNoMeta && fileWithNoMeta.length > 0) {\n    for (const file of fileWithNoMeta) {\n      console.log(`generating meta for file: ${file}`);\n      const iconName = file.substr(0, file.indexOf(\".\"));\n      const answers = await IconGenerator.runPrompts([iconName, file]);\n      await IconGenerator.runActions(answers);\n    }\n  }\n}\n\naddFiles();\n"
  },
  {
    "path": "packages/icons/scripts/generate-svg-index.js",
    "content": "import fs from \"fs\";\nimport path from \"path\";\n\nconst SVG_FOLDER = \"./src/svg\";\nconst INDEX_FILE = `${SVG_FOLDER}/index.ts`;\n\nconst svgFiles = fs.readdirSync(SVG_FOLDER).filter(file => file.endsWith(\".svg\"));\n\nconst svgExports = svgFiles\n  .map(file => {\n    const fileNameWithoutExtension = path.basename(file, \".svg\");\n    return `export { default as ${fileNameWithoutExtension} } from './${file}';`;\n  })\n  .join(\"\\n\");\n\nfs.writeFileSync(INDEX_FILE, svgExports);\n\nconsole.log(`Generated index.ts for SVG exports in ${SVG_FOLDER}`);\n"
  },
  {
    "path": "packages/icons/scripts/metadata-util.js",
    "content": "import fs from \"fs\";\nimport path from \"path\";\nconst ICONS_FOLDERS = path.resolve(\"./src/svg/\");\nconst METADATA_FILENAME = \"iconsMetaData.ts\";\nconst METADATA_FILE_PATH = path.resolve(\"./src\") + \"/\" + METADATA_FILENAME;\n\nfunction getIconsFiles() {\n  return fs.readdirSync(ICONS_FOLDERS);\n}\n\nfunction getIconsMetaFiles() {\n  let file = fs.readFileSync(METADATA_FILE_PATH, { encoding: \"utf-8\" });\n  file.substr(file.indexOf(\"iconsMetaData\"));\n  return [...file.matchAll(/file: \"(?<name>.*?)\"/g)].map(f => f.groups.name);\n}\n\nfunction getFilesWithNoMetadata() {\n  const actualFiles = getIconsFiles().filter(f => f.endsWith(\".svg\"));\n  const actualFilesSet = new Set(actualFiles);\n  const metaFiles = getIconsMetaFiles();\n  const metaFilesSet = new Set(metaFiles);\n\n  const metaBadReferences = metaFiles.filter(f => !actualFilesSet.has(f));\n  const fileWithNoMeta = actualFiles.filter(f => !metaFilesSet.has(f));\n  return { metaBadReferences, fileWithNoMeta };\n}\n\nexport default getFilesWithNoMetadata;\n"
  },
  {
    "path": "packages/icons/scripts/utils.js",
    "content": "// Files on which the rule doesn't apply\nconst EXCEPTIONAL_ICONS = [\"ConnectedDoc.svg\"];\nconst ALLOWED_COLORS = [\"currentColor\", \"none\"];\n\nfunction isEligibleForValidation(svgFile) {\n  return svgFile.endsWith(\".svg\") && !EXCEPTIONAL_ICONS.includes(svgFile);\n}\n\nfunction validateColors(colors, svgFileName, allowedColors = ALLOWED_COLORS) {\n  colors.forEach(({ attribute, color }) => {\n    if (!allowedColors.includes(color)) {\n      throw Error(generateErrorMessage(attribute, color, svgFileName));\n    }\n  });\n}\n\nfunction extractColorsFromSvg(content) {\n  const colorMatches = content.match(/(fill|stroke)=[\"']([\\w#]+)[\"']/g) || [];\n  return colorMatches.map(match => {\n    const [, attribute, color] = match.match(/(fill|stroke)=[\"']([\\w#]+)[\"']/) || [];\n    return { attribute, color };\n  });\n}\n\nfunction colorErrorMessage(message) {\n  return `\\x1b[31m${message}\\x1b[0m`;\n}\n\nfunction generateErrorMessage(attribute, color, svgFileName) {\n  return colorErrorMessage(`validate-icons-colors: Invalid color - ${attribute}=\"${color}\" used in '${svgFileName}'.\n      Should be one of the folowing values for outlined icons: ${JSON.stringify(ALLOWED_COLORS)}.\n      If color='white' and it's declared in <rect> (when using <clipPath> element), delete it and check if the icon looks fine`);\n}\n\nexport { EXCEPTIONAL_ICONS, ALLOWED_COLORS, isEligibleForValidation, validateColors, extractColorsFromSvg };\n"
  },
  {
    "path": "packages/icons/scripts/validate-icons-colors.js",
    "content": "#!/usr/bin/env node\n\n// Validation rule for icons svg files, to make sure they use only allowed fill/stroke colors\n// Usage: node scripts/validate-icons-colors.js\n\nimport { extractColorsFromSvg, isEligibleForValidation, validateColors } from \"./utils.js\";\nimport fs from \"fs\";\n\nconst SVGS_PATH = \"src/svg\";\n\nfunction validateSvgFile(name, content) {\n  const colors = extractColorsFromSvg(content);\n  validateColors(colors, name);\n}\n\nfunction readSvgFileContent(svgFilePath) {\n  return fs.readFileSync(svgFilePath, \"utf8\").toString();\n}\n\nfunction validateAllSvgsInPath(path) {\n  const svgFiles = fs.readdirSync(path).filter(isEligibleForValidation);\n  svgFiles.forEach(svgFileName => validateSvgFile(svgFileName, readSvgFileContent(`${path}/${svgFileName}`)));\n}\n\nvalidateAllSvgsInPath(SVGS_PATH);\n"
  },
  {
    "path": "packages/icons/scripts/validate-meta.js",
    "content": "import getFilesWithNoMetadata from \"./metadata-util.js\";\n\nconst { metaBadReferences, fileWithNoMeta } = getFilesWithNoMetadata();\n\nif (metaBadReferences && metaBadReferences.length > 0) {\n  throw new Error(\"No matching file for metas: \" + metaBadReferences.join(\", \"));\n}\nif (fileWithNoMeta && fileWithNoMeta.length > 0) {\n  throw new Error(\"No matching meta for files: \" + fileWithNoMeta.join(\", \"));\n}\n"
  },
  {
    "path": "packages/icons/src/iconsMetaData.ts",
    "content": "const BASIC = \"Basic\";\nconst PLATFORM = \"Platform\";\nconst VIEW = \"View\";\ntype Icon = {\n  name: string;\n  file: string;\n  description: string;\n  tags: string;\n  category?: readonly (typeof BASIC | typeof PLATFORM | typeof VIEW)[];\n  ignore?: boolean;\n};\nexport default [\n  // DO NOT REMOVE THIS FOLLOWING LINE!\n  // plop_marker:icon_metadata\n  {\n    name: \"ZoomIn\",\n    file: \"ZoomIn.svg\",\n    description: \"Zoom In icon for external views\",\n    tags: \"Zoom, Magnification, Increase, Detail, View, Interface, Action\"\n  },\n\n  {\n    name: \"ZoomOut\",\n    file: \"ZoomOut.svg\",\n    description: \"Decreases magnification to view more of the layout\",\n    tags: \"Zoom, Decrease, Magnification, Layout, Detail, Interface, Canvas, Editor\"\n  },\n\n  {\n    name: \"NavigationArrow\",\n    file: \"NavigationArrow.svg\",\n    description: \"Primary tool for moving and selecting elements on the canvas\",\n    tags: \"Move, Tool, Navigation, Selection, Canvas, Cursor, Interaction\"\n  },\n  {\n    name: \"EnterArrow\",\n    file: \"EnterArrow.svg\",\n    description: \"Indicates &quot;enter&quot; action without a surrounding box\",\n    tags: \"Enter, Arrow, Indicate, Icon, Direction, Action\"\n  },\n\n  {\n    name: \"RemoveRound\",\n    file: \"RemoveRound.svg\",\n    description: \"Collapses text to hide details\",\n    tags: \"Remove, Collapse, Text, Reveal, Icon, Action\"\n  },\n\n  {\n    name: \"ScheduledSend\",\n    file: \"ScheduledSend.svg\",\n    description: \"Used for sending scheduled messages\",\n    tags: \"Scheduled, Send, Time, Notification, Message\"\n  },\n\n  {\n    name: \"NotificationChecked\",\n    file: \"NotificationChecked.svg\",\n    description: \"Represents active notification\",\n    tags: \"Notification, Bell, Checkmark, Alert, Timeline\"\n  },\n\n  {\n    name: \"TextFormatting\",\n    file: \"TextFormatting.svg\",\n    description: \"Opens a popover for text actions\",\n    tags: \"Formatting, Text, Actions, Popover, Composer, Editor\"\n  },\n\n  {\n    name: \"Signature\",\n    file: \"Signature.svg\",\n    description: \"When signature is needed\",\n    tags: \"Sign, Pencil, Document, Value\"\n  },\n\n  {\n    name: \"PDF\",\n    file: \"PDF.svg\",\n    description: \"Represents PDF documents\",\n    tags: \"Document, File, Format, Portable, Reader, Download, View, Share\"\n  },\n\n  {\n    name: \"WrapText\",\n    file: \"WrapText.svg\",\n    description: \"Icon for enabling the Wrap Text feature\",\n    tags: \"Wrap, Text, Wrapping, Text Edit, Line\"\n  },\n\n  {\n    name: \"MinusSmall\",\n    file: \"MinusSmall.svg\",\n    description: \"Minus icon for time counter\",\n    tags: \"Minus, Small, Counter, Remove, Divider, Subtract\"\n  },\n\n  {\n    name: \"ClassicFolder\",\n    file: \"ClassicFolder.svg\",\n    description: \"Typically used when grouping a few items together under one subject\",\n    tags: \"Folder, File, Classic, Binder\"\n  },\n\n  {\n    name: \"AlignRight\",\n    file: \"AlignRight.svg\",\n    description: \"Typically used to adjust the alignment of text to the right within a document or text field.\",\n    tags: \"Align, Right, Body, Paragraph, Text\"\n  },\n\n  {\n    name: \"AlignLeft\",\n    file: \"AlignLeft.svg\",\n    description: \"Typically used to adjust the alignment of text to the left within a document or text field.\",\n    tags: \"Align, Left, Body, Paragraph, Text\"\n  },\n\n  {\n    name: \"AlignCenter\",\n    file: \"AlignCenter.svg\",\n    description: \"Typically used to adjust the alignment of text to the center within a document or text field.\",\n    tags: \"Align, Center, Body, Paragraph, Text\"\n  },\n\n  {\n    name: \"MoveArrowLeftNarrow\",\n    file: \"MoveArrowLeftNarrow.svg\",\n    description: \"Move arrow left narrow\",\n    tags: \"Move, Arrow, Left, Narrow, Short\"\n  },\n\n  {\n    name: \"CollapseHorizontally\",\n    file: \"CollapseHorizontally.svg\",\n    description: \"Horizontal interfaces that can be collapse and expand\",\n    tags: \"Collapse, Horizontally, Minimize\"\n  },\n\n  {\n    name: \"MoveArrowRightNarrow\",\n    file: \"MoveArrowRightNarrow.svg\",\n    description: \"Move Arrow Right Narrow\",\n    tags: \"Move, Arrow, Right, Narrow, Short\"\n  },\n\n  {\n    name: \"Files\",\n    file: \"Files.svg\",\n    description: \"Multiple files\",\n    tags: \"File, Folder, Attachments\"\n  },\n\n  {\n    name: \"WarningFull\",\n    file: \"WarningFull.svg\",\n    description: \"Use for warning or when there is conflict of dependencies\",\n    tags: \"Warning, Caution, Conflict, Dependency\"\n  },\n\n  {\n    name: \"Move\",\n    file: \"Move.svg\",\n    description: \"Use when you need to indicate a reorder or move items in a list\",\n    tags: \"Reorder, Move, Change, Arrow, Expand\"\n  },\n\n  {\n    name: \"Downgrade\",\n    file: \"Downgrade.svg\",\n    description: \"Used for downgrading a version\",\n    tags: \"Arrow, Down, Version\"\n  },\n\n  {\n    name: \"ScheduledEmail\",\n    file: \"ScheduledEmail.svg\",\n    description: \"Editing scheduled email reports\",\n    tags: \"email, time, clock, watch, send, delay, schedule\"\n  },\n\n  {\n    name: \"PinFull\",\n    file: \"PinFull.svg\",\n    description: \"Use to mark item as pinned.\",\n    tags: \"Pinned, Pinning\"\n  },\n\n  {\n    name: \"ThumbsDown\",\n    file: \"ThumbsDown.svg\",\n    description:\n      \"Meant to indicate dislike in intake forms and feedback buttons. Can come as a supplement to thumbs up.\",\n    tags: \"Thumbs, Down, Dislike, Feedback\"\n  },\n\n  {\n    name: \"Clipboard\",\n    file: \"Clipboard.svg\",\n    description: \"Clipboard\",\n    tags: \"Clipboard, Board, Copy\"\n  },\n\n  {\n    name: \"Forward\",\n    file: \"Forward.svg\",\n    description: \"Forward\",\n    tags: \"Forward, Email, Send, Arrow, Right\"\n  },\n\n  {\n    name: \"Shuffle\",\n    file: \"Shuffle.svg\",\n    description: \"Use to describe shuffle of items.\",\n    tags: \"Arrows, Random, Question, Form\"\n  },\n\n  {\n    name: \"Upgrade\",\n    file: \"Upgrade.svg\",\n    description: \"Upgrade\",\n    tags: \"Upgrade\"\n  },\n\n  {\n    name: \"Key\",\n    file: \"Key.svg\",\n    description: \"Key\",\n    tags: \"Key, Authorization\"\n  },\n\n  {\n    name: \"CloseMedium\",\n    file: \"CloseMedium.svg\",\n    description: \"Close Medium\",\n    tags: \"Close, X, Cancel\"\n  },\n\n  {\n    name: \"ReplyAll\",\n    file: \"ReplyAll.svg\",\n    description: \"Use in a reply all button if needed\",\n    tags: \"Reply, All, Mail, Send\"\n  },\n\n  {\n    name: \"Baseline\",\n    file: \"Baseline.svg\",\n    description: \"Baseline\",\n    tags: \"Baseline, Platform, Gantt, Base, Widget\"\n  },\n\n  {\n    name: \"ItemHeightSingle\",\n    file: \"ItemHeightSingle.svg\",\n    description: \"Item height single spacing\",\n    tags: \"Height, Item, Line, Single\"\n  },\n\n  {\n    name: \"ItemHeightDouble\",\n    file: \"ItemHeightDouble.svg\",\n    description: \"Item height double spacing\",\n    tags: \"Height, Item, Line, Double\"\n  },\n\n  {\n    name: \"Prompt\",\n    file: \"Prompt.svg\",\n    description: \"Indicates a type of AI action - Custom prompt and for general prompt\",\n    tags: \"AI, custom, prompt, text\"\n  },\n\n  {\n    name: \"Heart\",\n    file: \"Heart.svg\",\n    description: \"Heart\",\n    tags: \"Favorite, Recommend, Love, Rating\"\n  },\n\n  {\n    name: \"Placeholder\",\n    file: \"Placeholder.svg\",\n    description: \"Placeholder\",\n    tags: \"Resource management, Resource, Effort, Placeholder, Portfolio\"\n  },\n\n  {\n    name: \"Translation\",\n    file: \"Translation.svg\",\n    description: \"Translation\",\n    tags: \"Platform, Translation, Translate, Language, Localization\"\n  },\n\n  {\n    name: \"Warning\",\n    file: \"Warning.svg\",\n    description: \"Warning\",\n    tags: \"warning, caution\"\n  },\n\n  {\n    name: \"SortDescending\",\n    file: \"SortDescending.svg\",\n    description: \"Sort Descending\",\n    tags: \"sort,descending\"\n  },\n\n  {\n    name: \"SortAscending\",\n    file: \"SortAscending.svg\",\n    description: \"Sort Ascending\",\n    tags: \"sort,ascending\"\n  },\n\n  {\n    name: \"Erase\",\n    file: \"Erase.svg\",\n    description: \"Erase\",\n    tags: \"erase, clear\"\n  },\n\n  {\n    name: \"Workflow\",\n    file: \"Workflow.svg\",\n    description: \"worfkflow builder icon\",\n    tags: \"autopilot, automations, workflow, workflows\"\n  },\n\n  {\n    name: \"ContentDirectory\",\n    file: \"ContentDirectory.svg\",\n    description: \"Content Directory icon\",\n    tags: \"\"\n  },\n\n  {\n    name: \"Form\",\n    file: \"Form.svg\",\n    description: \"Form icon\",\n    tags: \"form,note,page,views\"\n  },\n\n  {\n    name: \"Launch\",\n    file: \"Launch.svg\",\n    description: \"Launch icon\",\n    tags: \"launch,ship,rocket,start,blast,space\"\n  },\n\n  {\n    name: \"NotificationsMuted\",\n    file: \"NotificationsMuted.svg\",\n    description: \"muted notifications\",\n    tags: \"notifications, bell, mute\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Connect\",\n    file: \"Connect.svg\",\n    description: \"Diagonal arrow from the left bottom to the right top\",\n    tags: \"diagonal,connect,arrow\"\n  },\n\n  {\n    name: \"Idea\",\n    file: \"Idea.svg\",\n    description: \"Lightbulb that is on\",\n    tags: \"light,bulb,on,flash,idea,electricty,platform\"\n  },\n\n  {\n    name: \"Forum\",\n    file: \"Forum.svg\",\n    description: \"Two overlapping chat bubbles facing each other\",\n    tags: \"chat,forum,community,message,talk\"\n  },\n\n  {\n    name: \"Education\",\n    file: \"Education.svg\",\n    description: \"Open book with empty pages\",\n    tags: \"book,page,pages,open,learn,education\"\n  },\n\n  {\n    name: \"Academy\",\n    file: \"Academy.svg\",\n    description: \"Graduation cap with tassle\",\n    tags: \"graduation,hat,cap,academy,tassle,learn\"\n  },\n\n  {\n    name: \"Offline\",\n    file: \"Offline.svg\",\n    description: \"Offline\",\n    tags: \"Offline,Cloud,Internet\"\n  },\n\n  {\n    name: \"Timeline\",\n    file: \"Timeline.svg\",\n    description: \"Timeline\",\n    tags: \"Timeline\"\n  },\n\n  {\n    name: \"Tags\",\n    file: \"Tags.svg\",\n    description: \"Tags\",\n    tags: \"Hash Tag Mention\"\n  },\n\n  {\n    name: \"Dropdown\",\n    file: \"Dropdown.svg\",\n    description: \"Dropdown\",\n    tags: \"Dropdown, column\"\n  },\n\n  {\n    name: \"Country\",\n    file: \"Country.svg\",\n    description: \"Country, Flag\",\n    tags: \"Country,flag\"\n  },\n\n  {\n    name: \"MondayDoc\",\n    file: \"MondayDoc.svg\",\n    description: \"Monday Doc\",\n    tags: \"Doc, Document\"\n  },\n\n  {\n    name: \"MoveArrowLeftDouble\",\n    file: \"MoveArrowLeftDouble.svg\",\n    description: \"Move Arrow Left Double\",\n    tags: \"move,arrow,left,double,back\"\n  },\n\n  {\n    name: \"Formula\",\n    file: \"Formula.svg\",\n    description: \"Formula\",\n    tags: \"formula,math,equation\"\n  },\n\n  {\n    name: \"ItemDefaultValues\",\n    file: \"ItemDefaultValues.svg\",\n    description: \"Item default values\",\n    tags: \"item,default,values,edit,value,pencil\"\n  },\n\n  {\n    name: \"ConnectedDoc\",\n    file: \"ConnectedDoc.svg\",\n    description: \"Connect existing doc\",\n    tags: \"doc,attach,connect,link\"\n  },\n\n  {\n    name: \"AddNewDoc\",\n    file: \"AddNewDoc.svg\",\n    description: \"Add new doc\",\n    tags: \"doc,new\"\n  },\n\n  {\n    name: \"Switcher\",\n    file: \"Switcher.svg\",\n    description: \"Switching between products\",\n    tags: \"Switcher,SidePanel,Product,Platform\"\n  },\n\n  {\n    name: \"Description\",\n    file: \"Description.svg\",\n    description: \"Description\",\n    tags: \"description\"\n  },\n\n  {\n    name: \"LearnMore\",\n    file: \"LearnMore.svg\",\n    description: \"Learn More\",\n    tags: \"LearnMore,Learn More,Question\"\n  },\n\n  {\n    name: \"ItemHeightTriple\",\n    file: \"ItemHeightTriple.svg\",\n    description: \"Item height triple\",\n    tags: \"height,item,line,triple\"\n  },\n  {\n    name: \"TextMedium\",\n    file: \"TextMedium.svg\",\n    description: \"Text Medium\",\n    tags: \"Medium,Text,Design,Font,Text Medium\",\n    category: [BASIC]\n  },\n\n  {\n    name: \"NavigationDoubleChevronLeft\",\n    file: \"NavigationDoubleChevronLeft.svg\",\n    description: \"Navigation double chevron left\",\n    tags: \"nagivation,double,chevron,left,history\"\n  },\n\n  {\n    name: \"Night\",\n    file: \"Night.svg\",\n    description: \"Night\",\n    tags: \"night, stars, Night mode\"\n  },\n\n  {\n    name: \"Mirror\",\n    file: \"Mirror.svg\",\n    description: \"mirror\",\n    tags: \"mirror,connect\"\n  },\n\n  {\n    name: \"Minimize\",\n    file: \"Minimize.svg\",\n    description: \"minimize\",\n    tags: \"minimize,close,collapse\"\n  },\n\n  {\n    name: \"Layout\",\n    file: \"Layout.svg\",\n    description: \"Layout\",\n    tags: \"Layout, Grid\"\n  },\n\n  {\n    name: \"DocTemplate\",\n    file: \"DocTemplate.svg\",\n    description: \"Template Doc\",\n    tags: \"Template, Doc\"\n  },\n\n  {\n    name: \"ConvertToItem\",\n    file: \"ConvertToItem.svg\",\n    description: \"ConvertToItem\",\n    tags: \"convert,item\"\n  },\n\n  {\n    name: \"TextCopy\",\n    file: \"TextCopy.svg\",\n    description: \"Copy Text\",\n    tags: \"copy,text,t\"\n  },\n  {\n    name: \"Open\",\n    file: \"Open.svg\",\n    description: \"Open\",\n    tags: \"open,maximize,expand\"\n  },\n  {\n    name: \"Expand\",\n    file: \"Expand.svg\",\n    description: \"Expand\",\n    tags: \"expand\"\n  },\n  {\n    name: \"ConvertToSubitem\",\n    file: \"ConvertToSubitem.svg\",\n    description: \"Convert To Subitem\",\n    tags: \"convert, subitem\"\n  },\n  {\n    name: \"Clear\",\n    file: \"Clear.svg\",\n    description: \"Clear\",\n    tags: \"clear\"\n  },\n  {\n    name: \"TextColorIndicator\",\n    file: \"TextColorIndicator.svg\",\n    description: \"\",\n    tags: \"text, A, font\"\n  },\n\n  {\n    name: \"Bug\",\n    file: \"Bug.svg\",\n    description: \"Bug\",\n    tags: \"Bug,Platform\"\n  },\n\n  {\n    name: \"Battery\",\n    file: \"Battery.svg\",\n    description: \"Battery\",\n    tags: \"battery\"\n  },\n\n  {\n    name: \"Status\",\n    file: \"Status.svg\",\n    description: \"Status icon\",\n    tags: \"status, done, status category\"\n  },\n\n  {\n    name: \"Subitems\",\n    file: \"Subitems.svg\",\n    description: \"Subitems icon\",\n    tags: \"subitems, subitems category\"\n  },\n\n  {\n    name: \"Gantt\",\n    file: \"Gantt.svg\",\n    description: \"Gantt icon\",\n    tags: \"Single Marketing Project,Gantt,Timeline,Views\"\n  },\n\n  {\n    name: \"Counter\",\n    file: \"Counter.svg\",\n    description: \"counter icon\",\n    tags: \"numbers, 123, counter, digits\"\n  },\n\n  {\n    name: \"Widgets\",\n    file: \"Widgets.svg\",\n    description: \"Widgets icon\",\n    tags: \"widget, graph\"\n  },\n\n  {\n    name: \"Recurring\",\n    file: \"Recurring.svg\",\n    description: \"Recurring icon\",\n    tags: \"recurring, time, timebased, every, automation, cron\"\n  },\n\n  {\n    name: \"DueDate\",\n    file: \"DueDate.svg\",\n    description: \"DueDate icon\",\n    tags: \"duedate, date, deadline, automation, timebased, cron\"\n  },\n\n  {\n    name: \"Dependency\",\n    file: \"Dependency.svg\",\n    description: \"Dependencies icon\",\n    tags: \"dependency, category, dependencies, ensure, adjust, automations\"\n  },\n\n  {\n    name: \"Custom\",\n    file: \"Custom.svg\",\n    description: \"Custom categoty icon\",\n    tags: \"custom, recipe, automations, dynamic, builder\"\n  },\n\n  {\n    name: \"Basic\",\n    file: \"Basic.svg\",\n    description: \"Basic category icon\",\n    tags: \"basic, category, automations\"\n  },\n\n  {\n    name: \"Work\",\n    file: \"Work.svg\",\n    description: \"work\",\n    tags: \"Work,ProjectPortfolio,Suitcase,Business,Sales Materials,Platform\"\n  },\n\n  {\n    name: \"MoreBelowFilled\",\n    file: \"MoreBelowFilled.svg\",\n    description: \"More below filled\",\n    tags: \"more,below,filled\",\n    ignore: true\n  },\n\n  {\n    name: \"MoreBelow\",\n    file: \"MoreBelow.svg\",\n    description: \"more below\",\n    tags: \"more,below\",\n    ignore: true\n  },\n\n  {\n    name: \"CollapseRound\",\n    file: \"CollapseRound.svg\",\n    description: \"Collapse round\",\n    tags: \"collapse,round\",\n    ignore: true\n  },\n\n  {\n    name: \"CloseRound\",\n    file: \"CloseRound.svg\",\n    description: \"Close round\",\n    tags: \"close,round\",\n    ignore: true\n  },\n\n  {\n    name: \"Bulllet\",\n    file: \"Bulllet.svg\",\n    description: \"Bullet\",\n    tags: \"bullet\",\n    ignore: true\n  },\n\n  {\n    name: \"MoreActions\",\n    file: \"MoreActions.svg\",\n    description: \"Icons used for dropdown of more actions\",\n    tags: \"more,actions,dropdown,arrow\"\n  },\n  {\n    name: \"Apps\",\n    file: \"Apps.svg\",\n    description: \"monday apps section\",\n    tags: \"app,apps,apps marketplace,installed apps,puzzle,add\",\n    category: [PLATFORM]\n  },\n  {\n    name: \"Globe\",\n    file: \"Globe.svg\",\n    description: \"Globe\",\n    tags: \"Globe,earth,world,country\"\n  },\n\n  {\n    name: \"Radio\",\n    file: \"Radio.svg\",\n    description: \"RadioButton\",\n    tags: \"Radio,Radio button,select,single\"\n  },\n\n  {\n    name: \"LongText\",\n    file: \"LongText.svg\",\n    description: \"LongText\",\n    tags: \"text,long text,description,lines\"\n  },\n\n  {\n    name: \"ShortText\",\n    file: \"ShortText.svg\",\n    description: \"ShortText\",\n    tags: \"short text,text,title,line\"\n  },\n\n  {\n    name: \"Activity\",\n    file: \"Activity.svg\",\n    description: \"Activity\",\n    tags: \"Activity,Active,Platform,Up,Chart,Graph\",\n    category: [PLATFORM]\n  },\n  {\n    name: \"Add\",\n    file: \"Add.svg\",\n    description: \"Add\",\n    tags: \"Add, Plus\",\n    category: [BASIC]\n  },\n  {\n    name: \"AddSmall\",\n    file: \"AddSmall.svg\",\n    description: \"Add Small\",\n    tags: \"Add, Plus\",\n    category: [BASIC]\n  },\n  {\n    name: \"AddUpdate\",\n    file: \"AddUpdate.svg\",\n    description: \"Add Update\",\n    tags: \"Add, Plus, Update\",\n    category: [PLATFORM]\n  },\n  {\n    name: \"Alert\",\n    file: \"Alert.svg\",\n    description: \"Alert\",\n    tags: \"Alert, Warning, Danger\",\n    category: [BASIC]\n  },\n  {\n    name: \"Announcement\",\n    file: \"Announcement.svg\",\n    description: \"Announcement\",\n    tags: \"Announcement, New, Shout\",\n    category: [PLATFORM]\n  },\n  {\n    name: \"API\",\n    file: \"API.svg\",\n    description: \"API\",\n    tags: \"API\",\n    category: [PLATFORM]\n  },\n  {\n    name: \"Archive\",\n    file: \"Archive.svg\",\n    description: \"Archive\",\n    tags: \"Archive, Box\",\n    category: [PLATFORM]\n  },\n  {\n    name: \"Attach\",\n    file: \"Attach.svg\",\n    description: \"Attach\",\n    tags: \"Attach, Clip, Add Files\",\n    category: [PLATFORM]\n  },\n  {\n    name: \"BlockQuote\",\n    file: \"BlockQuote.svg\",\n    description: \"BlockQuote\",\n    tags: \"Blockquote, Block, Quote, Text, Design\",\n    category: [PLATFORM]\n  },\n  {\n    name: \"Board\",\n    file: \"Board.svg\",\n    description: \"Board\",\n    tags: \"Board\",\n    category: [PLATFORM]\n  },\n  {\n    name: \"BoardPrivate\",\n    file: \"BoardPrivate.svg\",\n    description: \"Private Board\",\n    tags: \"Board, Private\",\n    category: [PLATFORM]\n  },\n  {\n    name: \"BoardShareable\",\n    file: \"BoardShareable.svg\",\n    description: \"Shareable Board\",\n    tags: \"Board, Shareable, Share\",\n    category: [PLATFORM]\n  },\n  {\n    name: \"BoardTemplate\",\n    file: \"BoardTemplate.svg\",\n    description: \"Template Board\",\n    tags: \"Board, Template\",\n    category: [PLATFORM]\n  },\n  {\n    name: \"Bold\",\n    file: \"Bold.svg\",\n    description: \"Bold\",\n    tags: \"Bold, Text, Design\",\n    category: [PLATFORM]\n  },\n  {\n    name: \"Bolt\",\n    file: \"Bolt.svg\",\n    description: \"Bolt\",\n    tags: \"Bolt, Switch, Lightning, Fast\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Broadcast\",\n    file: \"Broadcast.svg\",\n    description: \"Broadcast\",\n    tags: \"Broadcast\",\n    category: [PLATFORM]\n  },\n  {\n    name: \"Broom\",\n    file: \"Broom.svg\",\n    description: \"Broom\",\n    tags: \"Broom, Brush, Clean, Spark\",\n    category: [PLATFORM]\n  },\n  {\n    name: \"Bullets\",\n    file: \"Bullets.svg\",\n    description: \"Bullets\",\n    tags: \"Bullets,List,Text,Design,Redactor\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Bullet\",\n    file: \"Bullet.svg\",\n    description: \"Bullet\",\n    tags: \"Bullet, List, Text, Design, Bullets\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Bookmark\",\n    file: \"Bookmark.svg\",\n    description: \"Bookmark\",\n    tags: \"Bookmark, Add, Favorite, Mark\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Calendar\",\n    file: \"Calendar.svg\",\n    description: \"Calendar\",\n    tags: \"Date,Content,Calendar,Event,Schedule,Week,Day,Campaign,Planning,Views,Columns\",\n    category: [VIEW]\n  },\n  {\n    name: \"Chart\",\n    file: \"Chart.svg\",\n    description: \"Chart\",\n    tags: \"Chart, Graph, Pie\",\n    category: [VIEW]\n  },\n\n  {\n    name: \"Check\",\n    file: \"Check.svg\",\n    description: \"Check\",\n    tags: \"Check, Done, V\",\n    category: [BASIC]\n  },\n\n  {\n    name: \"Checkbox\",\n    file: \"Checkbox.svg\",\n    description: \"Checkbox\",\n    tags: \"Design, Checkbox, Check\",\n    category: [BASIC]\n  },\n  {\n    name: \"CheckList\",\n    file: \"CheckList.svg\",\n    description: \"CheckList\",\n    tags: \"Check, Done, V, List, CheckList, My Work\",\n    category: [BASIC]\n  },\n\n  {\n    name: \"Close\",\n    file: \"Close.svg\",\n    description: \"Close\",\n    tags: \"Close, X, Cancel\",\n    category: [BASIC]\n  },\n  {\n    name: \"CloseSmall\",\n    file: \"CloseSmall.svg\",\n    description: \"Close Small\",\n    tags: \"Close, X, Cancel\",\n    category: [BASIC]\n  },\n\n  {\n    name: \"Code\",\n    file: \"Code.svg\",\n    description: \"Code\",\n    tags: \"Code, Design\",\n    category: [BASIC]\n  },\n\n  {\n    name: \"Collapse\",\n    file: \"Collapse.svg\",\n    description: \"Collapse Round\",\n    tags: \"Collapse, Round, Close\",\n    category: [BASIC]\n  },\n  {\n    name: \"Column\",\n    file: \"Column.svg\",\n    description: \"Column\",\n    tags: \"Column, Board\",\n    category: [PLATFORM]\n  },\n  {\n    name: \"Comment\",\n    file: \"Comment.svg\",\n    description: \"Use as indication for comment, review or writing assistant.\",\n    tags: \"Comment, Text, Speech, Speech bubble, Writing, Review, Assistant\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Completed\",\n    file: \"Completed.svg\",\n    description: \"Completed\",\n    tags: \"Completed, Done, Tick, V\"\n  },\n  {\n    name: \"CreditCard\",\n    file: \"CreditCard.svg\",\n    description: \"CreditCard\",\n    tags: \"Credit Card, Pay, Swipe\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Cut\",\n    file: \"Cut.svg\",\n    description: \"Cut\",\n    tags: \"Cut, Design\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Dashboard\",\n    file: \"Dashboard.svg\",\n    description: \"Dashboard\",\n    tags: \"Dashboard, Board\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"DashboardPrivate\",\n    file: \"DashboardPrivate.svg\",\n    description: \"Private Dashboard\",\n    tags: \"Dashboard, Board, Private\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Delete\",\n    file: \"Delete.svg\",\n    description: \"Delete\",\n    tags: \"Delete, Remove, Trash, Bin\",\n    category: [PLATFORM]\n  },\n  {\n    name: \"DisabledUser\",\n    file: \"DisabledUser.svg\",\n    description: \"Disabled User\",\n    tags: \"Disabled User, Remove User\",\n    category: [PLATFORM]\n  },\n  {\n    name: \"Divider\",\n    file: \"Divider.svg\",\n    description: \"Divider\",\n    tags: \"Divider, Design, Separator\",\n    category: [BASIC]\n  },\n\n  {\n    name: \"Doc\",\n    file: \"Doc.svg\",\n    description: \"Doc\",\n    tags: \"Doc, Document\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"DocPrivate\",\n    file: \"DocPrivate.svg\",\n    description: \"Private Doc\",\n    tags: \"Doc, Document, Private\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"DocShareable\",\n    file: \"DocShareable.svg\",\n    description: \"Shareable Doc\",\n    tags: \"Doc, Document, Shareable, Share\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"DoubleCheck\",\n    file: \"DoubleCheck.svg\",\n    description: \"Double Check\",\n    tags: \"Check, Done, Seen, Double\",\n    category: [BASIC]\n  },\n\n  {\n    name: \"Download\",\n    file: \"Download.svg\",\n    description: \"Download icon\",\n    tags: \"download, incoming, import\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Drag\",\n    file: \"Drag.svg\",\n    description: \"Drag\",\n    tags: \"Drag, Move\",\n    category: [BASIC]\n  },\n\n  {\n    name: \"DropdownChevronDown\",\n    file: \"DropdownChevronDown.svg\",\n    description: \"Chevron Down Arrow\",\n    tags: \"Chevron, Arrow, Down\",\n    category: [BASIC]\n  },\n\n  {\n    name: \"DropdownChevronLeft\",\n    file: \"DropdownChevronLeft.svg\",\n    description: \"Chevron Left Arrow\",\n    tags: \"Chevron, Arrow, Left\",\n    category: [BASIC]\n  },\n\n  {\n    name: \"DropdownChevronRight\",\n    file: \"DropdownChevronRight.svg\",\n    description: \"Chevron Right Arrow\",\n    tags: \"Chevron, Arrow, Right\",\n    category: [BASIC]\n  },\n\n  {\n    name: \"DropdownChevronUp\",\n    file: \"DropdownChevronUp.svg\",\n    description: \"Chevron Up Arrow\",\n    tags: \"Chevron, Arrow, Up\",\n    category: [BASIC]\n  },\n  {\n    name: \"Duplicate\",\n    file: \"Duplicate.svg\",\n    description: \"Duplicate\",\n    tags: \"Duplicate, Copy\",\n    category: [PLATFORM]\n  },\n  {\n    name: \"Edit\",\n    file: \"Edit.svg\",\n    description: \"Edit\",\n    tags: \"Edit, Change, Pencil\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Email\",\n    file: \"Email.svg\",\n    description: \"Email\",\n    tags: \"Email, Letter, Envelope\",\n    category: [PLATFORM]\n  },\n  {\n    name: \"Embed\",\n    file: \"Embed.svg\",\n    description: \"Embed\",\n    tags: \"Embed, Code\",\n    category: [PLATFORM]\n  },\n  {\n    name: \"Enter\",\n    file: \"Enter.svg\",\n    description: \"Enter\",\n    tags: \"Enter, Keyboard, Key\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Event\",\n    file: \"Event.svg\",\n    description: \"Event\",\n    tags: \"Event, Day, Calendar\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Emoji\",\n    file: \"Emoji.svg\",\n    description: \"Emoji\",\n    tags: \"Emoji, Smiley, Text, Design\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"ExternalPage\",\n    file: \"ExternalPage.svg\",\n    description: \"External Page\",\n    tags: \"External, Page, New Tab, Open\",\n    category: [PLATFORM]\n  },\n  {\n    name: \"Favorite\",\n    file: \"Favorite.svg\",\n    description: \"Favorite\",\n    tags: \"Favorite, Star\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Feedback\",\n    file: \"Feedback.svg\",\n    description: \"Feedback\",\n    tags: \"Feedback\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"File\",\n    file: \"File.svg\",\n    description: \"File\",\n    tags: \"File\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Filter\",\n    file: \"Filter.svg\",\n    description: \"Filter\",\n    tags: \"Filter, Funnel\",\n    category: [PLATFORM]\n  },\n  {\n    name: \"Folder\",\n    file: \"Folder.svg\",\n    description: \"Folder\",\n    tags: \"Folder\",\n    category: [PLATFORM]\n  },\n  {\n    name: \"Fullscreen\",\n    file: \"Fullscreen.svg\",\n    description: \"Fullscreen\",\n    tags: \"Fullscreen, Expand\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Graph\",\n    file: \"Graph.svg\",\n    description: \"Graph\",\n    tags: \"Graph, Change, Line, XY\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"FullscreenClose\",\n    file: \"FullscreenClose.svg\",\n    description: \"FullscreenClose\",\n    tags: \"Fullscreen, Close\",\n    category: [PLATFORM]\n  },\n  {\n    name: \"Gallery\",\n    file: \"Gallery.svg\",\n    description: \"Gallery\",\n    tags: \"Gallery, Files, Image gallery\",\n    category: [PLATFORM]\n  },\n  {\n    name: \"GIF\",\n    file: \"Gif.svg\",\n    description: \"Gif\",\n    tags: \"Gif\",\n    category: [PLATFORM]\n  },\n  {\n    name: \"Group\",\n    file: \"Group.svg\",\n    description: \"Group\",\n    tags: \"Group, Board\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Guest\",\n    file: \"Guest.svg\",\n    description: \"Guest\",\n    tags: \"Guest,Activity,CampaignPerformance,Graph,Line,Change,XY,Platform\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Help\",\n    file: \"Help.svg\",\n    description: \"Help\",\n    tags: \"help, question\"\n  },\n\n  {\n    name: \"Health\",\n    file: \"Health.svg\",\n    description: \"Health\",\n    tags: \"Health, Status, Heart\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Hide\",\n    file: \"Hide.svg\",\n    description: \"Hide\",\n    tags: \"Hide, Eye\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Highlight\",\n    file: \"Highlight.svg\",\n    description: \"Highlight\",\n    tags: \"Highlight, Text, Design\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"HighlightColorBucket\",\n    file: \"HighlightColorBucket.svg\",\n    description: \"Highlight\",\n    tags: \"Highlight, Text, Design, Bucket\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Home\",\n    file: \"Home.svg\",\n    description: \"Home\",\n    tags: \"Home, Plate\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Image\",\n    file: \"Image.svg\",\n    description: \"Image\",\n    tags: \"Image, Picture\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Inbox\",\n    file: \"Inbox.svg\",\n    description: \"Inbox\",\n    tags: \"Inbox, Incoming\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Info\",\n    file: \"Info.svg\",\n    description: \"Info\",\n    tags: \"Info, Information\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Integrations\",\n    file: \"Integrations.svg\",\n    description: \"Integrations\",\n    tags: \"Integrations, Plugin, Plugins\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Invite\",\n    file: \"Invite.svg\",\n    description: \"Invite\",\n    tags: \"Invite, User, Add\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"IPRestrictions\",\n    file: \"IPRestrictions.svg\",\n    description: \"IP Restrictions\",\n    tags: \"IP, Lock, Globe, Restrictions\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Italic\",\n    file: \"Italic.svg\",\n    description: \"Italic\",\n    tags: \"Italic, Text, Design\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Item\",\n    file: \"Item.svg\",\n    description: \"Item\",\n    tags: \"Item, Board\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Keyboard\",\n    file: \"Keyboard.svg\",\n    description: \"Keyboard\",\n    tags: \"Keyboard, Key\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Labs\",\n    file: \"Labs.svg\",\n    description: \"Labs\",\n    tags: \"Labs, Experiment, Tube\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Lines\",\n    file: \"Lines.svg\",\n    description: \"Lines\",\n    tags: \"Lines, Rows\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Link\",\n    file: \"Link.svg\",\n    description: \"Link\",\n    tags: \"Link, Chain\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Location\",\n    file: \"Location.svg\",\n    description: \"Location\",\n    tags: \"Location, Pin, Map\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Locked\",\n    file: \"Locked.svg\",\n    description: \"Locked\",\n    tags: \"Lock, Locked, Closed, Private\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"LogIn\",\n    file: \"LogIn.svg\",\n    description: \"Log In\",\n    tags: \"LogIn\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"LogOut\",\n    file: \"LogOut.svg\",\n    description: \"Log Out\",\n    tags: \"LogOut\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Mention\",\n    file: \"Mention.svg\",\n    description: \"Mention\",\n    tags: \"@, Mention, At, Tag\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Menu\",\n    file: \"Menu.svg\",\n    description: \"Menu\",\n    tags: \"Menu, 3 Dots, Dots\",\n    category: [BASIC]\n  },\n\n  {\n    name: \"Microphone\",\n    file: \"Microphone.svg\",\n    description: \"Microphone\",\n    tags: \"Microphone, voice, sound\",\n    category: [BASIC]\n  },\n\n  {\n    name: \"Mobile\",\n    file: \"Mobile.svg\",\n    description: \"Mobile\",\n    tags: \"Mobile, Phone, Touch\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"MondayLogoOutline\",\n    file: \"MondayLogoOutline.svg\",\n    description: \"MondayLogoOutline\",\n    tags: \"Monday, Logo, Outline\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Moon\",\n    file: \"Moon.svg\",\n    description: \"Moon\",\n    tags: \"Moon, Dark Mode\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"MoveArrowDown\",\n    file: \"MoveArrowDown.svg\",\n    description: \"Move Arrow Down\",\n    tags: \"Move, Arrow, Down\",\n    category: [BASIC]\n  },\n\n  {\n    name: \"MoveArrowLeft\",\n    file: \"MoveArrowLeft.svg\",\n    description: \"Move Arrow Left\",\n    tags: \"Move, Arrow, Left\",\n    category: [BASIC]\n  },\n  {\n    name: \"MoveArrowRight\",\n    file: \"MoveArrowRight.svg\",\n    description: \"Move Arrow Right\",\n    tags: \"Move, Arrow, Right\",\n    category: [BASIC]\n  },\n  {\n    name: \"MoveArrowUp\",\n    file: \"MoveArrowUp.svg\",\n    description: \"Move Arrow Up\",\n    tags: \"Move, Arrow, Up\",\n    category: [BASIC]\n  },\n\n  {\n    name: \"Mute\",\n    file: \"Mute.svg\",\n    description: \"Mute\",\n    tags: \"Mute\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"MyWeek\",\n    file: \"MyWeek.svg\",\n    description: \"My week\",\n    tags: \"my week, week, calendar\"\n  },\n\n  {\n    name: \"NavigationChevronDown\",\n    file: \"NavigationChevronDown.svg\",\n    description: \"Navigation Chevron Down\",\n    tags: \"Navigation, Arrow, Down\",\n    category: [BASIC]\n  },\n\n  {\n    name: \"NavigationChevronLeft\",\n    file: \"NavigationChevronLeft.svg\",\n    description: \"Navigation Chevron Left\",\n    tags: \"Navigation, Arrow, Left\",\n    category: [BASIC]\n  },\n  {\n    name: \"NavigationChevronRight\",\n    file: \"NavigationChevronRight.svg\",\n    description: \"Navigation Chevron Right\",\n    tags: \"Navigation, Arrow, Right\",\n    category: [BASIC]\n  },\n  {\n    name: \"NavigationChevronUp\",\n    file: \"NavigationChevronUp.svg\",\n    description: \"Navigation Chevron Up\",\n    tags: \"Navigation, Arrow, Up\",\n    category: [BASIC]\n  },\n\n  {\n    name: \"NewTab\",\n    file: \"NewTab.svg\",\n    description: \"New Tab\",\n    tags: \"New Tab, Open\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"NoColor\",\n    file: \"NoColor.svg\",\n    description: \"No Color\",\n    tags: \"No Color, Drop\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Note\",\n    file: \"Note.svg\",\n    description: \"Note\",\n    tags: \"Note, Page\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Notifications\",\n    file: \"Notifications.svg\",\n    description: \"Notifications\",\n    tags: \"Notifications, Bell\",\n    category: [PLATFORM]\n  },\n  {\n    name: \"Numbers\",\n    file: \"Numbers.svg\",\n    description: \"Numbers\",\n    tags: \"Numbers, List, Design\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Page\",\n    file: \"Page.svg\",\n    description: \"Page\",\n    tags: \"Page,Single Page,Blank,Platform\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Paste\",\n    file: \"Paste.svg\",\n    description: \"Paste\",\n    tags: \"Paste, Design\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Pause\",\n    file: \"Pause.svg\",\n    description: \"Pause\",\n    tags: \"Pause, Hold\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Person\",\n    file: \"Person.svg\",\n    description: \"Person\",\n    tags: \"Person, People\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Pin\",\n    file: \"Pin.svg\",\n    description: \"Pin\",\n    tags: \"Pin\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Play\",\n    file: \"Play.svg\",\n    description: \"Play\",\n    tags: \"Play, Start\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Print\",\n    file: \"Print.svg\",\n    description: \"Print\",\n    tags: \"Print, Printer\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"PushNotification\",\n    file: \"PushNotification.svg\",\n    description: \"Push Notifications\",\n    tags: \"Push, Notifications, Bar\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Quote\",\n    file: \"Quote.svg\",\n    description: \"Quote\",\n    tags: \"Quote\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"RecycleBin\",\n    file: \"RecycleBin.svg\",\n    description: \"Recycle bin\",\n    tags: \"Recycle bin, Trash, Recycle, Bin\"\n  },\n\n  {\n    name: \"Redo\",\n    file: \"Redo.svg\",\n    description: \"Redo\",\n    tags: \"Redo, Text, Design\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Remove\",\n    file: \"Remove.svg\",\n    description: \"Remove\",\n    tags: \"Remove, Line, Minus\",\n    category: [BASIC]\n  },\n\n  {\n    name: \"Reply\",\n    file: \"Reply.svg\",\n    description: \"Reply\",\n    tags: \"Reply, Message, Arrow\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Retry\",\n    file: \"Retry.svg\",\n    description: \"Retry\",\n    tags: \"Retry, Reload, Refresh\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Robot\",\n    file: \"Robot.svg\",\n    description: \"Robot\",\n    tags: \"Robot, Automations\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Rotate\",\n    file: \"Rotate.svg\",\n    description: \"Rotate\",\n    tags: \"Rotate, Clockwise retry, Clockwise reload, Clockwise refresh\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Search\",\n    file: \"Search.svg\",\n    description: \"Search\",\n    tags: \"Search, Find, Magnifying Glass\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Security\",\n    file: \"Security.svg\",\n    description: \"Security\",\n    tags: \"Security, Shield, Protect\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Send\",\n    file: \"Send.svg\",\n    description: \"Send\",\n    tags: \"Send, Message, Plane, Airplane, Paper\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Settings\",\n    file: \"Settings.svg\",\n    description: \"Settings\",\n    tags: \"Settings, Cog\",\n    category: [PLATFORM]\n  },\n  {\n    name: \"SettingsKnobs\",\n    file: \"SettingsKnobs.svg\",\n    description: \"Settings\",\n    tags: \"Settings, Knobs\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Share\",\n    file: \"Share.svg\",\n    description: \"Share\",\n    tags: \"Share, Social\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Show\",\n    file: \"Show.svg\",\n    description: \"Show\",\n    tags: \"Show, Eye\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Shredder\",\n    file: \"Shredder.svg\",\n    description: \"Shredder\",\n    tags: \"Shredder, Paper, Recycle\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Sort\",\n    file: \"Sort.svg\",\n    description: \"Sort\",\n    tags: \"Sort\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Sound\",\n    file: \"Sound.svg\",\n    description: \"Sound\",\n    tags: \"Sound, Audio, Speaker\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"StrikethroughS\",\n    file: \"StrikethroughS.svg\",\n    description: \"Strike Through\",\n    tags: \"Strike Through, Text, Design\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"StrikethroughT\",\n    file: \"StrikethroughT.svg\",\n    description: \"Strike Through\",\n    tags: \"Strike Through, Text, Design\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Sun\",\n    file: \"Sun.svg\",\n    description: \"Sun\",\n    tags: \"Sun, Light Mode, Mode\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Switch\",\n    file: \"Switch.svg\",\n    description: \"Switch\",\n    tags: \"Switch, Arrow\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Table\",\n    file: \"Table.svg\",\n    description: \"Table\",\n    tags: \"Table, Grid\",\n    category: [VIEW]\n  },\n  {\n    name: \"Team\",\n    file: \"Team.svg\",\n    description: \"Team\",\n    tags: \"Team, Person, People, User, Users\",\n    category: [BASIC]\n  },\n  {\n    name: \"Text\",\n    file: \"Text.svg\",\n    description: \"Text\",\n    tags: \"Regular, Text, Design, Font\",\n    category: [BASIC]\n  },\n\n  {\n    name: \"TextBig\",\n    file: \"TextBig.svg\",\n    description: \"Text Big\",\n    tags: \"Big, Text, Design, Font, Text Big\",\n    category: [BASIC]\n  },\n\n  {\n    name: \"Textcolor\",\n    file: \"Textcolor.svg\",\n    description: \"Text Color\",\n    tags: \"Text Color, Color, Text, Design\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"TextHuge\",\n    file: \"TextHuge.svg\",\n    description: \"Text Huge\",\n    tags: \"Huge, Text, Design, Font Text Huge\",\n    category: [BASIC]\n  },\n\n  {\n    name: \"TextSmall\",\n    file: \"TextSmall.svg\",\n    description: \"Text Small\",\n    tags: \"Small, Text, Design, Font, Text Small\",\n    category: [BASIC]\n  },\n\n  {\n    name: \"ThumbsUp\",\n    file: \"ThumbsUp.svg\",\n    description: \"ThumbsUp\",\n    tags: \"ThumbsUp, Like, Plus\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Time\",\n    file: \"Time.svg\",\n    description: \"Time\",\n    tags: \"Time, Clock\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Underline\",\n    file: \"Underline.svg\",\n    description: \"Underline\",\n    tags: \"Underline, Text, Design\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"TurnInto\",\n    file: \"TurnInto.svg\",\n    description: \"Turn Into\",\n    tags: \"Turn Into, Switch\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Undo\",\n    file: \"Undo.svg\",\n    description: \"Undo\",\n    tags: \"Undo, Text, Design\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Unlocked\",\n    file: \"Unlocked.svg\",\n    description: \"Unlock\",\n    tags: \"Unlock, Unlocked, Open, Public\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Update\",\n    file: \"Update.svg\",\n    description: \"Update\",\n    tags: \"Bubble, Update, Message, Talk\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Upload\",\n    file: \"Upload.svg\",\n    description: \"Upload\",\n    tags: \"Upload, Up, File, Outgoing, Export\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Versioning\",\n    file: \"Versioning.svg\",\n    description: \"Versioning\",\n    tags: \"Retrospective,Recurring,Time,Time Based,Every,Automation,Cron,Version,History,Platform\"\n  },\n\n  {\n    name: \"Video\",\n    file: \"Video.svg\",\n    description: \"Video icon\",\n    tags: \"video\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Wand\",\n    file: \"Wand.svg\",\n    description: \"Wand\",\n    tags: \"Wand, Star, Template\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"WhatsNew\",\n    file: \"WhatsNew.svg\",\n    description: \"Whats New\",\n    tags: \"WhatsNew, New, Gift\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Workspace\",\n    file: \"Workspace.svg\",\n    description: \"Workspace\",\n    tags: \"Workspace, Grid\",\n    category: [PLATFORM]\n  },\n\n  {\n    name: \"Deactivate\",\n    file: \"Deactivate.svg\",\n    description: \"Deactivate\",\n    tags: \"deactivate, active\"\n  },\n\n  {\n    name: \"AddToTeam\",\n    file: \"AddToTeam.svg\",\n    description: \"Add to team\",\n    tags: \"user, users, team, add\"\n  },\n\n  {\n    name: \"PersonRound\",\n    file: \"PersonRound.svg\",\n    description: \"Person round\",\n    tags: \"person, user\"\n  },\n\n  {\n    name: \"UserDomain\",\n    file: \"UserDomain.svg\",\n    description: \"User domain\",\n    tags: \"user, domain, email\"\n  },\n\n  {\n    name: \"UserStatus\",\n    file: \"UserStatus.svg\",\n    description: \"User status\",\n    tags: \"user, status\"\n  }\n] as const satisfies readonly Icon[];\n"
  },
  {
    "path": "packages/icons/src/react/API.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface APIProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst API: React.FC<APIProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M2.68243 2.68243C3.15127 2.21359 3.78715 1.9502 4.4502 1.9502C5.11324 1.9502 5.74912 2.21359 6.21796 2.68243C6.6868 3.15127 6.9502 3.78715 6.9502 4.4502C6.9502 4.85645 6.85131 5.25252 6.66687 5.60621L10.5135 9.45284C11.3188 8.86956 12.2928 8.5498 13.2998 8.5498L13.3252 8.54987L13.6921 6.71533C13.4308 6.59328 13.1901 6.42581 12.9822 6.21796C12.5134 5.74912 12.25 5.11324 12.25 4.4502C12.25 3.78715 12.5134 3.15127 12.9822 2.68243C13.4511 2.21359 14.087 1.9502 14.75 1.9502C15.413 1.9502 16.0489 2.21359 16.5178 2.68243C16.9866 3.15127 17.25 3.78715 17.25 4.4502C17.25 5.11324 16.9866 5.74912 16.5178 6.21796C16.1521 6.58362 15.6849 6.8243 15.1823 6.91254L14.8059 8.79489C15.4975 9.02612 16.1332 9.4157 16.6586 9.94105C17.5494 10.8318 18.0498 12.04 18.0498 13.2998C18.0498 14.5596 17.5494 15.7678 16.6586 16.6586C15.7678 17.5494 14.5596 18.0498 13.2998 18.0498C12.04 18.0498 10.8318 17.5494 9.94105 16.6586C9.4157 16.1332 9.02612 15.4975 8.79489 14.8059L6.91254 15.1823C6.8243 15.6849 6.58362 16.1521 6.21796 16.5178C5.74912 16.9866 5.11324 17.25 4.4502 17.25C3.78715 17.25 3.15127 16.9866 2.68243 16.5178C2.21359 16.0489 1.9502 15.413 1.9502 14.75C1.9502 14.087 2.21359 13.4511 2.68243 12.9822C3.15127 12.5134 3.78715 12.25 4.4502 12.25C5.11324 12.25 5.74912 12.5134 6.21796 12.9822C6.42581 13.1901 6.59328 13.4308 6.71533 13.6921L8.54987 13.3252C8.54983 13.3167 8.5498 13.3083 8.5498 13.2998C8.5498 12.2928 8.86956 11.3188 9.45284 10.5135L5.60621 6.66687C5.25252 6.85131 4.85645 6.9502 4.4502 6.9502C3.78715 6.9502 3.15127 6.6868 2.68243 6.21796C2.21359 5.74912 1.9502 5.11324 1.9502 4.4502C1.9502 3.78715 2.21359 3.15127 2.68243 2.68243ZM4.4502 3.4502C4.18498 3.4502 3.93062 3.55555 3.74309 3.74309C3.55555 3.93062 3.4502 4.18498 3.4502 4.4502C3.4502 4.71541 3.55555 4.96977 3.74309 5.1573C3.93062 5.34484 4.18498 5.4502 4.4502 5.4502C4.71541 5.4502 4.96977 5.34484 5.1573 5.1573C5.34484 4.96977 5.4502 4.71541 5.4502 4.4502C5.4502 4.18498 5.34484 3.93062 5.1573 3.74309C4.96977 3.55555 4.71541 3.4502 4.4502 3.4502ZM13.2998 10.0498C12.4379 10.0498 11.6112 10.3922 11.0017 11.0017C10.3922 11.6112 10.0498 12.4379 10.0498 13.2998C10.0498 14.1618 10.3922 14.9884 11.0017 15.5979C11.6112 16.2074 12.4379 16.5498 13.2998 16.5498C14.1618 16.5498 14.9884 16.2074 15.5979 15.5979C16.2074 14.9884 16.5498 14.1618 16.5498 13.2998C16.5498 12.4379 16.2074 11.6112 15.5979 11.0017C14.9884 10.3922 14.1618 10.0498 13.2998 10.0498ZM3.74309 14.0429C3.93062 13.8554 4.18498 13.75 4.4502 13.75C4.71541 13.75 4.96977 13.8554 5.1573 14.0429C5.34484 14.2304 5.4502 14.4848 5.4502 14.75C5.4502 15.0152 5.34484 15.2696 5.1573 15.4571C4.96977 15.6446 4.71541 15.75 4.4502 15.75C4.18498 15.75 3.93062 15.6446 3.74309 15.4571C3.55555 15.2696 3.4502 15.0152 3.4502 14.75C3.4502 14.4848 3.55555 14.2304 3.74309 14.0429ZM14.75 3.4502C14.4848 3.4502 14.2304 3.55555 14.0429 3.74309C13.8554 3.93062 13.75 4.18498 13.75 4.4502C13.75 4.71541 13.8554 4.96977 14.0429 5.1573C14.2304 5.34484 14.4848 5.4502 14.75 5.4502C15.0152 5.4502 15.2696 5.34484 15.4571 5.1573C15.6446 4.96977 15.75 4.71541 15.75 4.4502C15.75 4.18498 15.6446 3.93062 15.4571 3.74309C15.2696 3.55555 15.0152 3.4502 14.75 3.4502Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nAPI.displayName = 'API';\nexport default API;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Academy.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface AcademyProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Academy: React.FC<AcademyProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M9.63884 2.34268C9.86376 2.21911 10.1362 2.21911 10.3612 2.34268L18.3612 6.7382C18.601 6.86997 18.75 7.12188 18.75 7.39551C18.75 7.66915 18.601 7.92106 18.3612 8.05283L15.8731 9.41994L15.9082 13.8724C15.9082 14.1639 15.7858 14.4057 15.6772 14.5686C15.5615 14.7422 15.4107 14.9019 15.2486 15.0452C14.9231 15.3329 14.4827 15.6148 13.9708 15.8624C12.9445 16.3588 11.5413 16.76 9.98945 16.76C8.43763 16.76 7.03444 16.3588 6.00809 15.8624C5.49625 15.6148 5.05585 15.3329 4.73029 15.0452C4.56821 14.9019 4.41742 14.7422 4.30171 14.5686C4.19312 14.4057 4.07077 14.1639 4.07077 13.8724V9.38898L3.33509 8.98479C3.293 9.05241 3.25341 9.1217 3.21623 9.19266C2.91361 9.77034 2.75 10.4999 2.75 11.4108C2.75 11.4108 2.75 11.4108 2.75 11.4108L2.7501 13.5588C2.75012 13.973 2.41435 14.3088 2.00013 14.3088C1.58592 14.3088 1.25012 13.9731 1.2501 13.5589L1.25 11.4109C1.25 10.3249 1.44475 9.34178 1.88752 8.49659C1.92936 8.41672 1.97323 8.33844 2.01911 8.26177L1.63885 8.05284C1.39903 7.92108 1.25 7.66916 1.25 7.39553C1.25 7.12189 1.39902 6.86997 1.63884 6.7382L9.63884 2.34268ZM4.47158 7.89771L10.0003 10.9353L16.4425 7.39553L10 3.85575L5.37354 6.39771H9.91656C10.3308 6.39771 10.6666 6.7335 10.6666 7.14771C10.6666 7.56193 10.3308 7.89771 9.91656 7.89771H4.47158ZM5.57077 10.2131V13.7651C5.59922 13.8011 5.64767 13.8541 5.7236 13.9212C5.92115 14.0958 6.23767 14.3072 6.66119 14.512C7.50554 14.9204 8.68669 15.26 9.98945 15.26C11.2922 15.26 12.4734 14.9204 13.3177 14.512C13.7412 14.3072 14.0578 14.0958 14.2553 13.9212C14.3305 13.8548 14.3787 13.8022 14.4073 13.7662L14.3795 10.2406L10.3615 12.4484C10.1365 12.5719 9.86406 12.5719 9.63914 12.4484L5.57077 10.2131Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nAcademy.displayName = 'Academy';\nexport default Academy;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Activity.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ActivityProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Activity: React.FC<ActivityProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M9.98296 1.97614C7.85942 1.97614 5.82285 2.81971 4.32128 4.32128C2.81971 5.82285 1.97614 7.85942 1.97614 9.98296C1.97614 12.1065 2.81971 14.1431 4.32128 15.6446C5.82285 17.1462 7.85942 17.9898 9.98296 17.9898C12.1065 17.9898 14.1431 17.1462 15.6446 15.6446C17.1462 14.1431 17.9898 12.1065 17.9898 9.98296C17.9898 7.85942 17.1462 5.82285 15.6446 4.32128C14.1431 2.81971 12.1065 1.97614 9.98296 1.97614ZM5.38194 5.38194C6.6022 4.16167 8.25724 3.47614 9.98296 3.47614C11.7087 3.47614 13.3637 4.16167 14.584 5.38194C15.8042 6.6022 16.4898 8.25724 16.4898 9.98296C16.4898 11.7087 15.8042 13.3637 14.584 14.584C13.3637 15.8042 11.7087 16.4898 9.98296 16.4898C8.25724 16.4898 6.6022 15.8042 5.38194 14.584C4.16167 13.3637 3.47614 11.7087 3.47614 9.98296C3.47614 8.25724 4.16167 6.6022 5.38194 5.38194ZM7.29283 10.7453L8.48668 7.76067L10.3736 13.1057L10.3737 13.1058C10.4523 13.3285 10.5933 13.524 10.7798 13.669C10.9663 13.814 11.1905 13.9024 11.4257 13.9237C11.661 13.945 11.8974 13.8983 12.1069 13.7892C12.3165 13.6801 12.4902 13.5131 12.6076 13.3081L12.6078 13.3079L13.8044 11.2168H15.3047C15.7189 11.2168 16.0547 10.881 16.0547 10.4668C16.0547 10.0526 15.7189 9.71676 15.3047 9.71676H13.3695C13.1005 9.71676 12.8521 9.8608 12.7185 10.0943L11.5946 12.0583L9.66458 6.59126L9.66381 6.58909C9.57982 6.35351 9.4262 6.14904 9.2233 6.0028C9.02041 5.85656 8.77785 5.77547 8.5278 5.77029C8.27775 5.76511 8.03204 5.83609 7.82327 5.9738C7.61449 6.11151 7.45253 6.30945 7.35887 6.54134L7.35886 6.54134L7.35793 6.54368L6.08869 9.71676H4.66132C4.2471 9.71676 3.91132 10.0526 3.91132 10.4668C3.91132 10.881 4.2471 11.2168 4.66132 11.2168H6.59647C6.90315 11.2168 7.17893 11.0301 7.29283 10.7453Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nActivity.displayName = 'Activity';\nexport default Activity;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Add.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface AddProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Add: React.FC<AddProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <g id=\"Icon / Basic / Add\">\n      <path id=\"Union\" d=\"M10 2.25C10.4142 2.25 10.75 2.58579 10.75 3V9.25H17C17.4142 9.25 17.75 9.58579 17.75 10C17.75 10.4142 17.4142 10.75 17 10.75H10.75V17C10.75 17.4142 10.4142 17.75 10 17.75C9.58579 17.75 9.25 17.4142 9.25 17V10.75H3C2.58579 10.75 2.25 10.4142 2.25 10C2.25 9.58579 2.58579 9.25 3 9.25H9.25V3C9.25 2.58579 9.58579 2.25 10 2.25Z\"\n        fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    </g>\n  </svg>\n);\nAdd.displayName = 'Add';\nexport default Add;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/AddNewDoc.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface AddNewDocProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst AddNewDoc: React.FC<AddNewDocProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M15.547 7.285a.936.936 0 0 1-.9.68H12.95v.002h-2.238A1.723 1.723 0 0 1 8.99 6.243V3.155L3.723 3.1a.223.223 0 0 0-.223.223v12.654a.223.223 0 0 0 .223.223H9.15a.75.75 0 0 1 0 1.5H3.723A1.723 1.723 0 0 1 2 15.977V3.323A1.723 1.723 0 0 1 3.723 1.6H9.82c.457 0 .895.182 1.218.504l3.81 3.81.454.446c.245.24.34.595.245.925Zm-2.268-.818-2.79-2.79v2.566a.223.223 0 0 0 .223.224h2.567Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M5.618 9.5a.75.75 0 0 0 0 1.5h4.831a.75.75 0 0 0 0-1.5H5.618Zm0 3.2a.75.75 0 0 0 0 1.5H7.45a.75.75 0 0 0 0-1.5H5.618Zm10.832.095a.75.75 0 0 0-1.5 0v1.45H13.5a.75.75 0 0 0 0 1.5h1.45v1.45a.75.75 0 0 0 1.5 0v-1.45h1.45a.75.75 0 0 0 0-1.5h-1.45v-1.45Z\"\n    />\n  </svg>\n);\nAddNewDoc.displayName = 'AddNewDoc';\nexport default AddNewDoc;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/AddSmall.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface AddSmallProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst AddSmall: React.FC<AddSmallProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M10.75 6C10.75 5.58579 10.4142 5.25 10 5.25C9.58579 5.25 9.25 5.58579 9.25 6V9.25H6C5.58579 9.25 5.25 9.58579 5.25 10C5.25 10.4142 5.58579 10.75 6 10.75H9.25V14C9.25 14.4142 9.58579 14.75 10 14.75C10.4142 14.75 10.75 14.4142 10.75 14V10.75H14C14.4142 10.75 14.75 10.4142 14.75 10C14.75 9.58579 14.4142 9.25 14 9.25H10.75V6Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nAddSmall.displayName = 'AddSmall';\nexport default AddSmall;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/AddToTeam.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface AddToTeamProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst AddToTeam: React.FC<AddToTeamProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M6.61695 1.9502C5.84105 1.9502 5.09693 2.25842 4.54828 2.80707 3.99963 3.35571 3.69141 4.09984 3.69141 4.87574 3.69141 5.65165 3.99963 6.39577 4.54828 6.94442 4.75764 7.15378 4.99547 7.32813 5.25267 7.46371 4.62814 7.65229 4.04554 7.9726 3.54666 8.40911 2.69552 9.15386 2.1473 10.1851 2.00596 11.3072 1.9542 11.7181 2.24539 12.0933 2.65635 12.145 3.06732 12.1968 3.44244 11.9056 3.4942 11.4946 3.58962 10.737 3.95976 10.0408 4.53442 9.53798 5.10907 9.03516 5.84828 8.76071 6.61184 8.7667L6.62088 8.76671C7.3938 8.76345 8.14096 9.04438 8.72026 9.55607 9.03072 9.83028 9.50468 9.8009 9.77889 9.49045 10.0531 9.18 10.0237 8.70604 9.71328 8.43182 9.20728 7.98488 8.61451 7.65722 7.97845 7.46518 8.23671 7.3294 8.47551 7.15454 8.68563 6.94442 9.23427 6.39577 9.5425 5.65165 9.5425 4.87574 9.5425 4.09984 9.23427 3.35571 8.68563 2.80707 8.13698 2.25842 7.39286 1.9502 6.61695 1.9502zM5.60894 3.86773C5.87628 3.60039 6.23887 3.4502 6.61695 3.4502 6.99503 3.4502 7.35763 3.60039 7.62497 3.86773 7.89231 4.13507 8.0425 4.49766 8.0425 4.87574 8.0425 5.25382 7.89231 5.61641 7.62497 5.88376 7.35763 6.1511 6.99503 6.30129 6.61695 6.30129 6.23887 6.30129 5.87628 6.1511 5.60894 5.88376 5.3416 5.61641 5.19141 5.25382 5.19141 4.87574 5.19141 4.49766 5.3416 4.13507 5.60894 3.86773zM11.1762 2.66547C11.6342 2.20749 12.2553 1.9502 12.903 1.9502 13.5507 1.9502 14.1719 2.20749 14.6298 2.66547 15.0878 3.12345 15.3451 3.7446 15.3451 4.39229 15.3451 5.03997 15.0878 5.66113 14.6298 6.11911 14.6008 6.14817 14.5711 6.17643 14.5407 6.20386 14.6573 6.26231 14.771 6.32712 14.8813 6.39809 15.3695 6.71241 15.7756 7.13863 16.0661 7.64138 16.2733 8.00004 16.1505 8.45877 15.7919 8.66598 15.4332 8.87318 14.9745 8.75041 14.7673 8.39174 14.5961 8.09556 14.3569 7.84446 14.0693 7.65929 13.7817 7.47412 13.454 7.36022 13.1136 7.32704 12.7731 7.29386 12.4297 7.34236 12.1118 7.46851 11.7938 7.59467 11.5105 7.79484 11.2855 8.05241 11.0129 8.36431 10.5391 8.3962 10.2272 8.12364 9.9153 7.85108 9.8834 7.37728 10.156 7.06538 10.4677 6.70865 10.8452 6.41679 11.2667 6.20511 11.2359 6.17729 11.2057 6.14861 11.1762 6.11911 10.7182 5.66113 10.4609 5.03997 10.4609 4.39229 10.4609 3.7446 10.7182 3.12345 11.1762 2.66547zM12.903 3.4502C12.6532 3.4502 12.4135 3.54945 12.2369 3.72613 12.0602 3.9028 11.9609 4.14243 11.9609 4.39229 11.9609 4.64215 12.0602 4.88177 12.2369 5.05845 12.4135 5.23512 12.6532 5.33438 12.903 5.33438 13.1529 5.33438 13.3925 5.23512 13.5692 5.05845 13.7459 4.88177 13.8451 4.64215 13.8451 4.39229 13.8451 4.14243 13.7459 3.9028 13.5692 3.72613 13.3925 3.54945 13.1529 3.4502 12.903 3.4502z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M13.4478 11.0649C13.862 11.0652 14.1976 11.4011 14.1974 11.8153L14.197 12.564L14.9997 12.5641C15.4139 12.5641 15.7497 12.8999 15.7497 13.3141C15.7496 13.7283 15.4138 14.0641 14.9996 14.0641L14.1962 14.064L14.1958 14.8243C14.1956 15.2385 13.8596 15.5741 13.4454 15.5739C13.0312 15.5737 12.6956 15.2377 12.6958 14.8235L12.6962 14.0639L11.998 14.0638C11.5838 14.0638 11.248 13.728 11.248 13.3138C11.2481 12.8996 11.5839 12.5638 11.9981 12.5638L12.697 12.5639L12.6974 11.8145C12.6976 11.4003 13.0335 11.0647 13.4478 11.0649Z\"\n      fill=\"currentColor\" />\n    <path d=\"M10.1201 10.0673C10.986 9.20134 12.1605 8.71484 13.3852 8.71484C14.6099 8.71484 15.7844 9.20134 16.6504 10.0673C17.5164 10.9333 18.0029 12.1078 18.0029 13.3325C18.0029 14.5572 17.5164 15.7317 16.6504 16.5976C15.7844 17.4636 14.6099 17.9501 13.3852 17.9501C12.1605 17.9501 10.986 17.4636 10.1201 16.5976C9.25408 15.7317 8.76758 14.5572 8.76758 13.3325C8.76758 12.1078 9.25408 10.9333 10.1201 10.0673ZM13.3852 10.2148C12.5584 10.2148 11.7654 10.5433 11.1807 11.128C10.596 11.7127 10.2676 12.5056 10.2676 13.3325C10.2676 14.1593 10.596 14.9523 11.1807 15.537C11.7654 16.1217 12.5584 16.4501 13.3852 16.4501C14.2121 16.4501 15.0051 16.1217 15.5897 15.537C16.1744 14.9523 16.5029 14.1593 16.5029 13.3325C16.5029 12.5056 16.1744 11.7127 15.5897 11.128C15.0051 10.5433 14.2121 10.2148 13.3852 10.2148Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nAddToTeam.displayName = 'AddToTeam';\nexport default AddToTeam;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/AddUpdate.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface AddUpdateProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst AddUpdate: React.FC<AddUpdateProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M10.4339 1.94996C11.5976 1.94797 12.7458 2.21616 13.7882 2.7334C14.8309 3.25083 15.7393 4.00335 16.4416 4.93167C17.144 5.85999 17.6211 6.93874 17.8355 8.08291C18.0498 9.22707 17.9956 10.4054 17.6769 11.525C17.3583 12.6446 16.7839 13.6749 15.9992 14.5347C15.2145 15.3945 14.2408 16.0604 13.1549 16.4797C12.069 16.8991 10.9005 17.0605 9.7416 16.9513C8.72154 16.8552 7.7334 16.5518 6.83723 16.0612L4.29494 17.2723C3.23222 17.7785 2.12271 16.6692 2.62876 15.6064L3.83948 13.0636C3.26488 12.0144 2.94833 10.8411 2.91898 9.64114C2.88622 8.30169 3.21251 6.97789 3.86399 5.8071C4.51547 4.63631 5.4684 3.66119 6.62389 2.98294C7.77902 2.30491 9.09451 1.94825 10.4339 1.94996ZM10.4339 1.94996C10.4343 1.94996 10.4348 1.94996 10.4352 1.94996L10.4341 2.69996L10.4327 1.94996C10.4331 1.94996 10.4335 1.94996 10.4339 1.94996ZM13.1214 4.07707C12.2868 3.66289 11.3673 3.44821 10.4355 3.44996L10.433 3.44996C9.36086 3.44842 8.30784 3.73382 7.38321 4.27655C6.45858 4.81929 5.69605 5.59958 5.17473 6.53645C4.65341 7.47332 4.39232 8.53263 4.41853 9.60446C4.44475 10.6763 4.75732 11.7216 5.32382 12.6318C5.45888 12.8489 5.47411 13.1197 5.36422 13.3505L4.28601 15.615L6.55002 14.5365C6.78078 14.4266 7.05164 14.4418 7.26869 14.5768C8.05992 15.0689 8.95463 15.3706 9.88231 15.458C10.81 15.5454 11.7453 15.4161 12.6145 15.0805C13.4838 14.7448 14.2631 14.2118 14.8913 13.5236C15.5194 12.8353 15.9791 12.0106 16.2342 11.1144C16.4893 10.2182 16.5327 9.27499 16.3611 8.35913C16.1895 7.44328 15.8076 6.57978 15.2454 5.8367C14.6832 5.09362 13.9561 4.49125 13.1214 4.07707Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M11.25 6.5C11.25 6.08579 10.9142 5.75 10.5 5.75C10.0858 5.75 9.75 6.08579 9.75 6.5V8.75H7.5C7.08579 8.75 6.75 9.08579 6.75 9.5C6.75 9.91421 7.08579 10.25 7.5 10.25H9.75V12.5C9.75 12.9142 10.0858 13.25 10.5 13.25C10.9142 13.25 11.25 12.9142 11.25 12.5V10.25H13.5C13.9142 10.25 14.25 9.91421 14.25 9.5C14.25 9.08579 13.9142 8.75 13.5 8.75H11.25V6.5Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nAddUpdate.displayName = 'AddUpdate';\nexport default AddUpdate;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Alert.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface AlertProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Alert: React.FC<AlertProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M10 2.10596C9.661 2.10596 9.32868 2.20028 9.04023 2.37836C8.75177 2.55645 8.51855 2.81128 8.36665 3.11435L8.36633 3.11498L2.44277 14.9621L2.44269 14.9623C2.30353 15.2407 2.23784 15.5502 2.25185 15.8612C2.26586 16.1721 2.3591 16.4744 2.52272 16.7392C2.68635 17.0041 2.91493 17.2227 3.18678 17.3744C3.45863 17.5261 3.76473 17.6058 4.07604 17.606H4.07644H15.9236H15.924C16.2353 17.6058 16.5414 17.5261 16.8132 17.3744C17.0851 17.2227 17.3137 17.0041 17.4773 16.7392C17.6409 16.4744 17.7341 16.1721 17.7481 15.8612C17.7622 15.5502 17.6965 15.2407 17.5573 14.9623L17.5572 14.9621L11.6337 3.11498L11.6333 3.11435C11.4815 2.81128 11.2482 2.55645 10.9598 2.37836C10.6713 2.20028 10.339 2.10596 10 2.10596ZM9.82821 3.65471C9.87984 3.62284 9.93932 3.60596 10 3.60596C10.0607 3.60596 10.1202 3.62284 10.1718 3.65471C10.2233 3.68654 10.265 3.73207 10.2922 3.78622L10.2923 3.78645L16.2155 15.6328L16.2156 15.6329C16.2404 15.6827 16.2522 15.7381 16.2497 15.7937C16.2472 15.8493 16.2305 15.9034 16.2012 15.9508C16.1719 15.9982 16.131 16.0374 16.0823 16.0645C16.0337 16.0917 15.9789 16.1059 15.9232 16.106H4.07684C4.02112 16.1059 3.96633 16.0917 3.91767 16.0645C3.86901 16.0374 3.8281 15.9982 3.79881 15.9508C3.76953 15.9034 3.75284 15.8493 3.75033 15.7937C3.74783 15.7381 3.75956 15.6827 3.78441 15.6329L3.78449 15.6328L9.70765 3.78645L9.70777 3.7862C9.73496 3.73206 9.77666 3.68654 9.82821 3.65471ZM10 6.95135C10.4142 6.95135 10.75 7.28714 10.75 7.70135V10.9324C10.75 11.3466 10.4142 11.6824 10 11.6824C9.58579 11.6824 9.25 11.3466 9.25 10.9324V7.70135C9.25 7.28714 9.58579 6.95135 10 6.95135ZM9.2303 13.3937C9.43444 13.1896 9.7113 13.0749 9.99999 13.0749C10.2887 13.0749 10.5655 13.1896 10.7697 13.3937C10.9738 13.5979 11.0885 13.8747 11.0885 14.1634C11.0885 14.4521 10.9738 14.729 10.7697 14.9331C10.5655 15.1372 10.2887 15.2519 9.99999 15.2519C9.7113 15.2519 9.43444 15.1372 9.2303 14.9331C9.02617 14.729 8.91149 14.4521 8.91149 14.1634C8.91149 13.8747 9.02617 13.5979 9.2303 13.3937ZM9.99999 14.1749C10.003 14.1749 10.006 14.1737 10.0081 14.1715C10.0103 14.1694 10.0115 14.1665 10.0115 14.1634C10.0115 14.1604 10.0103 14.1574 10.0081 14.1553C10.006 14.1531 10.003 14.1519 9.99999 14.1519C9.99695 14.1519 9.99402 14.1531 9.99187 14.1553C9.98971 14.1574 9.9885 14.1604 9.9885 14.1634C9.9885 14.1665 9.98971 14.1694 9.99187 14.1715C9.99402 14.1737 9.99695 14.1749 9.99999 14.1749Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nAlert.displayName = 'Alert';\nexport default Alert;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/AlignCenter.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface AlignCenterProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst AlignCenter: React.FC<AlignCenterProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M4.896 4a1 1 0 0 1 1-1h8.211a1 1 0 1 1 0 2H5.896a1 1 0 0 1-1-1Zm0 8a1 1 0 0 1 1-1h8.211a1 1 0 1 1 0 2H5.896a1 1 0 0 1-1-1ZM2.277 8a1 1 0 0 1 1-1h13.449a1 1 0 1 1 0 2H3.277a1 1 0 0 1-1-1Zm0 8a1 1 0 0 1 1-1h13.449a1 1 0 1 1 0 2H3.277a1 1 0 0 1-1-1Z\"\n    />\n  </svg>\n);\nAlignCenter.displayName = 'AlignCenter';\nexport default AlignCenter;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/AlignLeft.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface AlignLeftProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst AlignLeft: React.FC<AlignLeftProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M2.25 4a1 1 0 0 1 1-1h8.212a1 1 0 1 1 0 2H3.25a1 1 0 0 1-1-1Zm0 8a1 1 0 0 1 1-1h8.212a1 1 0 1 1 0 2H3.25a1 1 0 0 1-1-1Zm0-4a1 1 0 0 1 1-1h13.449a1 1 0 1 1 0 2H3.25a1 1 0 0 1-1-1Zm0 8a1 1 0 0 1 1-1h13.449a1 1 0 1 1 0 2H3.25a1 1 0 0 1-1-1Z\"\n    />\n  </svg>\n);\nAlignLeft.displayName = 'AlignLeft';\nexport default AlignLeft;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/AlignRight.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface AlignRightProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst AlignRight: React.FC<AlignRightProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M7.534 4a1 1 0 0 1 1-1h8.211a1 1 0 1 1 0 2H8.534a1 1 0 0 1-1-1Zm0 8a1 1 0 0 1 1-1h8.211a1 1 0 1 1 0 2H8.534a1 1 0 0 1-1-1ZM2.297 8a1 1 0 0 1 1-1h13.448a1 1 0 1 1 0 2H3.297a1 1 0 0 1-1-1Zm0 8a1 1 0 0 1 1-1h13.448a1 1 0 1 1 0 2H3.297a1 1 0 0 1-1-1Z\"\n    />\n  </svg>\n);\nAlignRight.displayName = 'AlignRight';\nexport default AlignRight;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Announcement.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface AnnouncementProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Announcement: React.FC<AnnouncementProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M16.812 16.4614C16.6504 16.4614 16.4996 16.4183 16.3596 16.3213L15.5409 15.7827C13.2881 14.2776 10.694 13.4115 8.00303 13.2553C8.06205 13.5636 8.15447 13.8644 8.2803 14.1561C8.51729 14.7055 8.85123 15.1902 9.2929 15.6104C9.61607 15.9228 9.62684 16.4291 9.32522 16.7522C9.16363 16.9138 8.94818 17 8.73274 17C8.52806 17 8.33416 16.9246 8.17257 16.7738C7.58009 16.2136 7.11688 15.5457 6.79371 14.7917C6.57789 14.2881 6.43413 13.7653 6.36244 13.2297H5.50102C4.56383 13.2297 3.69126 12.8634 3.02338 12.2063C2.36626 11.5492 2 10.6658 2 9.72864C2 8.79145 2.36626 7.91888 3.02338 7.251C3.69126 6.59388 4.56383 6.22762 5.50102 6.22762L7.11688 6.22762H7.11847C10.1342 6.22731 13.0421 5.34399 15.5517 3.67457L16.3704 3.13595C16.6181 2.97436 16.9413 2.95282 17.1998 3.09286C17.4584 3.2329 17.6307 3.50221 17.6307 3.80384V15.6535C17.6307 15.9551 17.4691 16.2244 17.1998 16.3644C17.0706 16.4291 16.9413 16.4614 16.812 16.4614ZM16.0041 14.1561C13.5588 12.6372 10.7903 11.7754 7.92481 11.6354V7.82193C10.7903 7.68189 13.5588 6.8201 16.0041 5.3012V14.1561ZM5.50102 7.84348H6.30895V11.6138H5.50102C4.99472 11.6138 4.52074 11.4199 4.16525 11.0644C3.80976 10.7089 3.61586 10.2349 3.61586 9.72864C3.61586 9.22234 3.80976 8.74836 4.16525 8.39287C4.52074 8.03738 4.99472 7.84348 5.50102 7.84348Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nAnnouncement.displayName = 'Announcement';\nexport default Announcement;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Apps.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface AppsProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Apps: React.FC<AppsProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M5.6579 4.88C5.6579 3.28943 6.9472 2 8.53766 2C10.1281 2 11.4174 3.28943 11.4174 4.88C11.4174 4.89526 11.4173 4.91051 11.4171 4.92572H13.0502C14.1675 4.92572 15.0732 5.83153 15.0732 6.94891V8.58332C15.0889 8.58307 15.1045 8.58295 15.1202 8.58295C16.7107 8.58295 18 9.87237 18 11.4629C18 13.0535 16.7107 14.3429 15.1202 14.3429C15.1045 14.3429 15.0889 14.3428 15.0732 14.3426V15.9768C15.0732 17.0942 14.1675 18 13.0502 18H4.02304C2.90574 18 2 17.0942 2 15.9768V13.5322C2 13.3096 2.10806 13.1009 2.28982 12.9723C2.47157 12.8438 2.70441 12.8115 2.91427 12.8858C3.07072 12.9411 3.23976 12.9715 3.41737 12.9715C4.25045 12.9715 4.9258 12.2961 4.9258 11.4629C4.9258 10.6298 4.25045 9.95437 3.41737 9.95437C3.23975 9.95437 3.07072 9.98478 2.91427 10.0401C2.70441 10.1143 2.47157 10.0821 2.28982 9.95353C2.10806 9.82501 2 9.61625 2 9.39363V6.9489C2 5.83153 2.90575 4.92572 4.02304 4.92572H5.65825C5.65802 4.91051 5.6579 4.89526 5.6579 4.88ZM8.53766 3.37143C7.70458 3.37143 7.02923 4.04683 7.02923 4.88C7.02923 5.05755 7.05961 5.22652 7.11489 5.38292C7.18906 5.5928 7.15675 5.82562 7.02824 6.00736C6.89972 6.1891 6.69099 6.29715 6.46841 6.29715H4.02304C3.66311 6.29715 3.37133 6.58895 3.37133 6.9489V8.5833C3.38665 8.58306 3.402 8.58294 3.41737 8.58294C5.00783 8.58294 6.29714 9.87237 6.29714 11.4629C6.29714 13.0535 5.00783 14.3429 3.41737 14.3429C3.402 14.3429 3.38665 14.3428 3.37133 14.3426V15.9768C3.37133 16.3368 3.66311 16.6286 4.02304 16.6286H13.0502C13.4101 16.6286 13.7019 16.3368 13.7019 15.9768V13.5319C13.7019 13.3092 13.81 13.1004 13.9918 12.9719C14.1737 12.8434 14.4066 12.8112 14.6165 12.8855C14.7731 12.941 14.9424 12.9715 15.1202 12.9715C15.9533 12.9715 16.6287 12.2961 16.6287 11.4629C16.6287 10.6298 15.9533 9.95438 15.1202 9.95438C14.9424 9.95438 14.7731 9.98488 14.6165 10.0404C14.4066 10.1147 14.1737 10.0825 13.9918 9.95399C13.81 9.82548 13.7019 9.61667 13.7019 9.39399V6.94891C13.7019 6.58895 13.4101 6.29715 13.0502 6.29715H10.6069C10.3843 6.29715 10.1756 6.1891 10.0471 6.00736C9.91857 5.82562 9.88626 5.5928 9.96044 5.38292C10.0157 5.22652 10.0461 5.05755 10.0461 4.88C10.0461 4.04683 9.37074 3.37143 8.53766 3.37143Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nApps.displayName = 'Apps';\nexport default Apps;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Archive.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ArchiveProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Archive: React.FC<ArchiveProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M2.42943 3.16234C2.75328 2.83849 3.19251 2.65656 3.6505 2.65656H16.3496C16.8075 2.65656 17.2468 2.83849 17.5706 3.16234C17.8945 3.48618 18.0764 3.92542 18.0764 4.38341V6.33711C18.0764 6.75132 17.7406 7.08711 17.3264 7.08711H2.67365C2.25943 7.08711 1.92365 6.75132 1.92365 6.33711V4.38341C1.92365 3.92542 2.10558 3.48619 2.42943 3.16234ZM3.6505 4.15656C3.59033 4.15656 3.53263 4.18046 3.49009 4.223C3.44755 4.26554 3.42365 4.32324 3.42365 4.38341V5.58711H16.5764V4.38341C16.5764 4.32324 16.5525 4.26554 16.51 4.223C16.4674 4.18046 16.4097 4.15656 16.3496 4.15656H3.6505ZM3.58942 7.95349C4.00363 7.95349 4.33942 8.28928 4.33942 8.70349V14.621C4.33942 14.9452 4.46821 15.2561 4.69747 15.4854C4.92674 15.7146 5.23768 15.8434 5.5619 15.8434H14.4381C14.7623 15.8434 15.0733 15.7146 15.3025 15.4854C15.5318 15.2561 15.6606 14.9452 15.6606 14.621V8.70349C15.6606 8.28928 15.9964 7.95349 16.4106 7.95349C16.8248 7.95349 17.1606 8.28928 17.1606 8.70349V14.621C17.1606 15.343 16.8738 16.0355 16.3632 16.546C15.8526 17.0566 15.1601 17.3434 14.4381 17.3434H5.5619C4.83986 17.3434 4.14738 17.0566 3.63681 16.546C3.12625 16.0355 2.83942 15.343 2.83942 14.621V8.70349C2.83942 8.28928 3.1752 7.95349 3.58942 7.95349ZM8.91846 9.78302C8.50424 9.78302 8.16846 10.1188 8.16846 10.533C8.16846 10.9472 8.50424 11.283 8.91846 11.283H11.0816C11.4959 11.283 11.8316 10.9472 11.8316 10.533C11.8316 10.1188 11.4959 9.78302 11.0816 9.78302H8.91846Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nArchive.displayName = 'Archive';\nexport default Archive;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Attach.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface AttachProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Attach: React.FC<AttachProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M13.3715 16.2871C12.4839 17.2191 11.2719 17.75 10 17.75C8.72809 17.75 7.51613 17.2191 6.62847 16.2871C5.74199 15.3563 5.25 14.1013 5.25 12.8L5.25 8.61244C5.25 8.19822 5.58579 7.86244 6 7.86244C6.41421 7.86244 6.75 8.19822 6.75 8.61244L6.75 12.8C6.75 13.7265 7.10086 14.6081 7.71468 15.2526C8.32731 15.8959 9.15018 16.25 10 16.25C10.8498 16.25 11.6727 15.8959 12.2853 15.2526C12.8991 14.6081 13.25 13.7265 13.25 12.8L13.25 5.8C13.25 5.24482 13.0396 4.7193 12.6758 4.33734C12.3133 3.95663 11.8295 3.75 11.3333 3.75C10.8371 3.75 10.3534 3.95663 9.99082 4.33734C9.62705 4.7193 9.41667 5.24482 9.41667 5.8L9.41667 12.8C9.41667 12.9839 9.48658 13.1533 9.60029 13.2727C9.71283 13.3909 9.85742 13.45 10 13.45C10.1426 13.45 10.2872 13.3909 10.3997 13.2727C10.5134 13.1533 10.5833 12.9839 10.5833 12.8L10.5833 8.62363C10.5833 8.20942 10.9191 7.87363 11.3333 7.87363C11.7475 7.87363 12.0833 8.20942 12.0833 8.62363L12.0833 12.8C12.0833 13.3587 11.8723 13.9015 11.4859 14.3072C11.0983 14.7141 10.5647 14.95 10 14.95C9.43533 14.95 8.90165 14.7141 8.51409 14.3072C8.12771 13.9015 7.91667 13.3587 7.91667 12.8L7.91667 5.8C7.91667 4.86997 8.26818 3.97111 8.90461 3.30286C9.54222 2.63337 10.415 2.25 11.3333 2.25C12.2516 2.25 13.1244 2.63337 13.7621 3.30286C14.3985 3.97111 14.75 4.86997 14.75 5.8L14.75 12.8C14.75 14.1013 14.258 15.3563 13.3715 16.2871Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nAttach.displayName = 'Attach';\nexport default Attach;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Baseline.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface BaselineProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Baseline: React.FC<BaselineProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M2 13.0502C2 12.0837 2.7835 11.3002 3.75 11.3002H16.25C17.2165 11.3002 18 12.0837 18 13.0502V16.0502C18 17.0167 17.2165 17.8002 16.25 17.8002H3.75C2.7835 17.8002 2 17.0167 2 16.0502V13.0502zM3.75 12.8002C3.61193 12.8002 3.5 12.9122 3.5 13.0502V16.0502C3.5 16.1883 3.61193 16.3002 3.75 16.3002H16.25C16.3881 16.3002 16.5 16.1883 16.5 16.0502V13.0502C16.5 12.9122 16.3881 12.8002 16.25 12.8002H3.75zM2 3.95013C2 2.98363 2.7835 2.20013 3.75 2.20013H16.25C17.2165 2.20013 18 2.98363 18 3.95013V6.95013C18 7.91663 17.2165 8.70013 16.25 8.70013H3.75C2.7835 8.70013 2 7.91663 2 6.95013V3.95013zM3.75 3.70013C3.61193 3.70013 3.5 3.81206 3.5 3.95013V6.95013C3.5 7.0882 3.61193 7.20013 3.75 7.20013H16.25C16.3881 7.20013 16.5 7.0882 16.5 6.95013V3.95013C16.5 3.81206 16.3881 3.70013 16.25 3.70013H3.75z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nBaseline.displayName = 'Baseline';\nexport default Baseline;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Basic.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface BasicProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Basic: React.FC<BasicProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M2 11.4631C2 11.0844 2.30701 10.7773 2.68573 10.7773H8.53729C8.91601 10.7773 9.22302 11.0844 9.22302 11.4631V17.3146C9.22302 17.6934 8.91601 18.0004 8.53729 18.0004H2.68573C2.30701 18.0004 2 17.6934 2 17.3146V11.4631zM3.37146 12.1488V16.6289H7.85156V12.1488H3.37146zM10.7773 11.4631C10.7773 11.0844 11.0844 10.7773 11.4631 10.7773H17.3146C17.6934 10.7773 18.0004 11.0844 18.0004 11.4631V17.3146C18.0004 17.6934 17.6934 18.0004 17.3146 18.0004H11.4631C11.0844 18.0004 10.7773 17.6934 10.7773 17.3146V11.4631zM12.1488 12.1488V16.6289H16.6289V12.1488H12.1488zM6.87598 2.68573C6.87598 2.30701 7.18299 2 7.56171 2H13.4133C13.792 2 14.099 2.30701 14.099 2.68573V8.53729C14.099 8.91601 13.792 9.22302 13.4133 9.22302H7.56171C7.18299 9.22302 6.87598 8.91601 6.87598 8.53729V2.68573zM8.24744 3.37146V7.85156H12.7275V3.37146H8.24744z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nBasic.displayName = 'Basic';\nexport default Basic;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Battery.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface BatteryProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Battery: React.FC<BatteryProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M14.25 12.5V12V8V7.5H3.5L3.5 12.5H14.25ZM2 7.5C2 6.67157 2.67157 6 3.5 6H14.5C15.2432 6 15.8602 6.54057 15.9793 7.25H17.5C18.1904 7.25 18.75 7.80964 18.75 8.5V11.5C18.75 12.1904 18.1904 12.75 17.5 12.75H15.9793C15.8602 13.4594 15.2432 14 14.5 14H3.5C2.67157 14 2 13.3284 2 12.5V7.5ZM16 11.25H17.25V8.75H16V11.25Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nBattery.displayName = 'Battery';\nexport default Battery;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/BlockQuote.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface BlockQuoteProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst BlockQuote: React.FC<BlockQuoteProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <g stroke=\"currentColor\" strokeWidth=\"1.143\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <path d=\"M3.21943 10.0149C2.79433 9.32279 2.56929 8.52648 2.56929 7.71428 2.56929 6.90209 2.79433 6.10577 3.21943 5.41371M6.65944 10.0149C6.23433 9.32279 6.00929 8.52648 6.00929 7.71428 6.00929 6.90209 6.23433 6.10577 6.65944 5.41371M16.7806 14.5863C17.2057 13.8942 17.4307 13.0979 17.4307 12.2857 17.4307 11.4735 17.2057 10.6772 16.7806 9.98515M13.3406 14.5863C13.7657 13.8942 13.9907 13.0979 13.9907 12.2857 13.9907 11.4735 13.7657 10.6772 13.3406 9.98515\"\n      />\n    </g>\n  </svg>\n);\nBlockQuote.displayName = 'BlockQuote';\nexport default BlockQuote;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Board.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface BoardProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Board: React.FC<BoardProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M7.5 4.5H16C16.2761 4.5 16.5 4.72386 16.5 5V15C16.5 15.2761 16.2761 15.5 16 15.5H7.5L7.5 4.5ZM6 4.5H4C3.72386 4.5 3.5 4.72386 3.5 5V15C3.5 15.2761 3.72386 15.5 4 15.5H6L6 4.5ZM2 5C2 3.89543 2.89543 3 4 3H16C17.1046 3 18 3.89543 18 5V15C18 16.1046 17.1046 17 16 17H4C2.89543 17 2 16.1046 2 15V5Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nBoard.displayName = 'Board';\nexport default Board;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/BoardPrivate.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface BoardPrivateProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst BoardPrivate: React.FC<BoardPrivateProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M7.5 4.5H16C16.2761 4.5 16.5 4.72386 16.5 5V8.07833C17.0321 8.16476 17.5579 8.32923 18 8.60307V5C18 3.89543 17.1046 3 16 3H4C2.89543 3 2 3.89543 2 5V15C2 16.1046 2.89543 17 4 17H10.499V15.5H7.5L7.5 4.5ZM6 4.5H4C3.72386 4.5 3.5 4.72386 3.5 5V15C3.5 15.2761 3.72386 15.5 4 15.5H6L6 4.5ZM17.2933 12.4648V13.4775H14.3638V12.4648C14.3638 11.6558 15.0196 11 15.8285 11C16.6375 11 17.2933 11.6558 17.2933 12.4648ZM12.1693 13.4775H12.8638V12.4648C12.8638 10.8274 14.1911 9.5 15.8285 9.5C17.4659 9.5 18.7933 10.8274 18.7933 12.4648V13.4775H19.4924C19.7625 13.4775 19.9815 13.6965 19.9815 13.9667V19.5108C19.9815 19.781 19.7625 20 19.4924 20H12.1693C11.8992 20 11.6802 19.781 11.6802 19.5108V13.9667C11.6802 13.6965 11.8992 13.4775 12.1693 13.4775Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nBoardPrivate.displayName = 'BoardPrivate';\nexport default BoardPrivate;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/BoardShareable.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface BoardShareableProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst BoardShareable: React.FC<BoardShareableProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M7.5 4.5H16C16.2761 4.5 16.5 4.72386 16.5 5V7.88998C16.7908 7.83097 17.0917 7.79999 17.3999 7.79999C17.6034 7.79999 17.8037 7.81349 18 7.83965V5C18 3.89543 17.1046 3 16 3H4C2.89543 3 2 3.89543 2 5V15C2 16.1046 2.89543 17 4 17H9.34145C9.06468 16.5554 8.88215 16.0461 8.82178 15.5H7.5L7.5 4.5ZM6 4.5H4C3.72386 4.5 3.5 4.72386 3.5 5V15C3.5 15.2761 3.72386 15.5 4 15.5H6L6 4.5ZM15.4464 11.9979C15.4173 11.8516 15.4023 11.7017 15.4023 11.5502C15.4023 10.9406 15.6445 10.3558 16.0757 9.92472C16.5068 9.4936 17.0915 9.2514 17.7012 9.2514C18.3109 9.2514 18.8956 9.4936 19.3267 9.92472C19.7578 10.3558 20 10.9406 20 11.5502C20 12.1599 19.7578 12.7447 19.3267 13.1758C18.8956 13.6069 18.3109 13.8491 17.7012 13.8491C17.1494 13.8491 16.6182 13.6507 16.2027 13.2935L14.5247 14.309C14.5728 14.4951 14.5977 14.6881 14.5977 14.8836C14.5977 15.0813 14.5722 15.2765 14.5231 15.4646L16.016 16.0786C16.0355 16.0577 16.0554 16.0371 16.0757 16.0168C16.5068 15.5856 17.0915 15.3434 17.7012 15.3434C18.3109 15.3434 18.8956 15.5856 19.3267 16.0168C19.7578 16.4479 20 17.0326 20 17.6423C20 18.252 19.7578 18.8367 19.3267 19.2678C18.8956 19.6989 18.3109 19.9411 17.7012 19.9411C17.0915 19.9411 16.5068 19.6989 16.0757 19.2678C15.6445 18.8367 15.4023 18.252 15.4023 17.6423C15.4023 17.5783 15.405 17.5147 15.4103 17.4514L13.664 16.7332C13.2711 17.0232 12.7932 17.1824 12.2988 17.1824C11.6892 17.1824 11.1044 16.9402 10.6733 16.5091C10.2422 16.078 10 15.4933 10 14.8836C10 14.2739 10.2422 13.6891 10.6733 13.258C11.1044 12.8269 11.6892 12.5847 12.2988 12.5847C12.8064 12.5847 13.2967 12.7526 13.6955 13.0576L15.4464 11.9979Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nBoardShareable.displayName = 'BoardShareable';\nexport default BoardShareable;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/BoardTemplate.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface BoardTemplateProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst BoardTemplate: React.FC<BoardTemplateProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M2 5C2 3.89543 2.89543 3 4 3H16C17.1046 3 18 3.89543 18 5V7H16.5V5C16.5 4.72386 16.2761 4.5 16 4.5H7.5L7.5 15.5H10V17H4C2.89543 17 2 16.1046 2 15V5ZM6 4.5H4C3.72386 4.5 3.5 4.72386 3.5 5V15C3.5 15.2761 3.72386 15.5 4 15.5H6L6 4.5ZM11.918 8.3661C11.7265 8.25583 11.4917 8.41298 11.5207 8.63202L11.9013 11.5126C11.9128 11.5996 11.8808 11.6867 11.8156 11.7455L9.65844 13.6921C9.49441 13.8401 9.57131 14.112 9.78858 14.1521L12.6458 14.6803C12.7321 14.6962 12.805 14.7536 12.8408 14.8337L14.0255 17.4869C14.1156 17.6886 14.3979 17.6995 14.5033 17.5053L15.5846 15.5114L18.3925 19.39C18.6354 19.7255 19.1043 19.8006 19.4398 19.5577C19.7753 19.3148 19.8504 18.8459 19.6075 18.5104L16.8712 14.7306L18.9841 14.5062C19.2038 14.4828 19.3014 14.2177 19.1492 14.0575L17.1481 11.9508C17.0877 11.8872 17.0624 11.7979 17.0806 11.712L17.6816 8.86923C17.7273 8.65306 17.5052 8.47832 17.3059 8.57354L14.6839 9.82571C14.6047 9.86352 14.512 9.85995 14.436 9.81616L11.918 8.3661Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nBoardTemplate.displayName = 'BoardTemplate';\nexport default BoardTemplate;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Bold.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface BoldProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Bold: React.FC<BoldProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <g fill=\"currentColor\" clipPath=\"url(#clip0)\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n      <path d=\"M6.84395 2.7332H11.3773C12.4912 2.7332 13.5595 3.17571 14.3472 3.96339C15.1349 4.75107 15.5774 5.81939 15.5774 6.93333C15.5774 8.04727 15.1349 9.11559 14.3472 9.90327C13.5595 10.6909 12.4912 11.1335 11.3773 11.1335H5.77728C5.07765 11.1335 4.51048 10.5663 4.51048 9.86666V5.06666C4.51048 4.44779 4.75633 3.85426 5.19394 3.41666C5.63155 2.97905 6.22507 2.7332 6.84395 2.7332ZM7.04407 5.26679H11.3773C11.8193 5.26679 12.2432 5.44237 12.5557 5.75491C12.8682 6.06745 13.0438 6.49134 13.0438 6.93333C13.0438 7.37532 12.8682 7.79921 12.5557 8.11175C12.2432 8.42429 11.8193 8.59987 11.3773 8.59987H7.04407V5.26679Z\"\n      />\n      <path d=\"M4.51048 9.86666C4.51048 9.16703 5.07765 8.59987 5.77728 8.59987H11.3239C12.5793 8.59987 13.7833 9.09857 14.671 9.98627C15.5587 10.874 16.0574 12.0779 16.0574 13.3333C16.0574 14.5877 15.5595 15.7908 14.6731 16.6783C13.7866 17.5659 12.5842 18.0653 11.3298 18.0668L6.84821 18.0668C6.22934 18.0668 5.63581 17.821 5.1982 17.3833C4.7606 16.9457 4.51475 16.3522 4.51475 15.7333V9.97139C4.51192 9.93685 4.51048 9.90193 4.51048 9.86666ZM7.04834 11.1335V15.5332H11.3273C11.9101 15.5323 12.4686 15.3002 12.8805 14.8879C13.2924 14.4754 13.5238 13.9163 13.5238 13.3333C13.5238 12.7499 13.292 12.1903 12.8795 11.7778C12.4669 11.3652 11.9074 11.1335 11.3239 11.1335H7.04834Z\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"clip0\">\n        <path transform=\"translate(2 2)\" d=\"M0 0H16V16H0z\" />\n      </clipPath>\n    </defs>\n  </svg>\n);\nBold.displayName = 'Bold';\nexport default Bold;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Bolt.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface BoltProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Bolt: React.FC<BoltProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M11.3336 2.28375C11.6473 2.38119 11.8611 2.67147 11.8611 2.99999V7.80555H15C15.2785 7.80555 15.5341 7.95989 15.6638 8.20639C15.7934 8.45289 15.7758 8.75094 15.618 8.98045L9.50692 17.8693C9.32081 18.1401 8.98017 18.2581 8.66643 18.1607C8.35269 18.0632 8.13889 17.773 8.13889 17.4444V12.6389H5C4.72148 12.6389 4.4659 12.4845 4.33624 12.238C4.20657 11.9915 4.22418 11.6935 4.38197 11.464L10.4931 2.5751C10.6792 2.30438 11.0198 2.1863 11.3336 2.28375ZM6.42577 11.1389H8.88889C9.3031 11.1389 9.63889 11.4747 9.63889 11.8889V15.0297L13.5742 9.30555H11.1111C10.6969 9.30555 10.3611 8.96976 10.3611 8.55555V5.41475L6.42577 11.1389Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nBolt.displayName = 'Bolt';\nexport default Bolt;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Bookmark.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface BookmarkProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Bookmark: React.FC<BookmarkProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M6.5 3.75C6.4337 3.75 6.37011 3.77634 6.32322 3.82322C6.27634 3.87011 6.25 3.9337 6.25 4V16.5595L10.0699 13.8856C10.3281 13.7048 10.6719 13.7048 10.9301 13.8856L14.75 16.5595V4C14.75 3.9337 14.7237 3.87011 14.6768 3.82322C14.6299 3.77634 14.5663 3.75 14.5 3.75H6.5ZM14.2833 18.0638C14.4706 18.1949 14.6902 18.2721 14.9183 18.287C15.1464 18.3019 15.3742 18.254 15.577 18.1485C15.7798 18.043 15.9497 17.884 16.0684 17.6886C16.187 17.4932 16.2499 17.2691 16.25 17.0405V4C16.25 3.53587 16.0656 3.09075 15.7374 2.76256C15.4092 2.43437 14.9641 2.25 14.5 2.25H6.5C6.03587 2.25 5.59075 2.43437 5.26256 2.76256C4.93437 3.09075 4.75 3.53587 4.75 4V17.04C4.75015 17.2686 4.81297 17.4932 4.93163 17.6886C5.05029 17.8839 5.22025 18.043 5.42301 18.1485C5.62578 18.254 5.8536 18.3019 6.08168 18.287C6.30977 18.2721 6.52939 18.1949 6.71667 18.0638L10.5 15.4155L14.2833 18.0638Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nBookmark.displayName = 'Bookmark';\nexport default Bookmark;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Broadcast.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface BroadcastProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Broadcast: React.FC<BroadcastProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M12 3.75C14.3472 3.75 16.25 5.65279 16.25 8H17.75C17.75 4.82436 15.1756 2.25 12 2.25V3.75ZM3.75 5C3.75 4.86193 3.86193 4.75 4 4.75H6L6 15.25H4C3.86193 15.25 3.75 15.1381 3.75 15V5ZM7.5 15.25H15C15.1381 15.25 15.25 15.1381 15.25 15V10H16.75V15C16.75 15.9665 15.9665 16.75 15 16.75H4C3.0335 16.75 2.25 15.9665 2.25 15V5C2.25 4.0335 3.0335 3.25 4 3.25H10V4.75H7.5L7.5 15.25ZM13.25 8C13.25 7.30964 12.6904 6.75 12 6.75V5.25C13.5188 5.25 14.75 6.48122 14.75 8H13.25Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nBroadcast.displayName = 'Broadcast';\nexport default Broadcast;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Broom.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface BroomProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Broom: React.FC<BroomProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M3.28033 2.21967C2.98744 1.92678 2.51256 1.92678 2.21967 2.21967 1.92678 2.51256 1.92678 2.98744 2.21967 3.28033L7.63274 8.6934C7.54586 8.91276 7.5 9.14855 7.5 9.38906 7.5 9.89004 7.69898 10.3705 8.05318 10.7248L8.05313 10.7249 8.06059 10.7321 8.57806 11.2355C8.53993 11.4121 8.51546 11.5924 8.50533 11.7748 8.45874 12.6139 8.71862 13.4409 9.23579 14.1022L11.3521 17.3536C11.3651 17.3736 11.3791 17.3929 11.3939 17.4116 11.6302 17.7085 11.9667 17.909 12.3402 17.9757 12.7014 18.0402 13.0733 17.9753 13.3908 17.7932L16.1108 16.4505C16.2585 16.3776 16.3782 16.258 16.4512 16.1102L17.7949 13.3905C17.9759 13.0734 18.0401 12.7024 17.9755 12.3423 17.9088 11.9702 17.7092 11.6351 17.414 11.3992 17.3952 11.3842 17.3757 11.3701 17.3556 11.357L14.1044 9.23571C13.4429 8.7187 12.6158 8.45889 11.7767 8.50529 11.5922 8.51549 11.41 8.54033 11.2315 8.57911L10.7347 8.06331 10.7248 8.05318C10.3705 7.69898 9.89004 7.5 9.38906 7.5 9.14855 7.5 8.91277 7.54586 8.6934 7.63274L3.28033 2.21967zM9 9.38906C9 9.2859 9.04095 9.18696 9.11384 9.11398L9.11398 9.11384C9.18696 9.04095 9.2859 9 9.38906 9 9.49053 9 9.58792 9.03962 9.66054 9.11029L9.80322 9.25844C9.70337 9.33819 9.60757 9.42375 9.51638 9.51488L9.51636 9.51489C9.42441 9.60677 9.33811 9.70333 9.25771 9.80401L9.11127 9.66154C9.03998 9.58881 9 9.491 9 9.38906zM10.5766 10.576C10.772 10.3808 11.0045 10.2305 11.2581 10.1325 11.2671 10.1293 11.2761 10.1259 11.285 10.1223 11.468 10.0546 11.6615 10.014 11.8595 10.003 12.3431 9.97626 12.8196 10.1287 13.1978 10.4311 13.2166 10.4461 13.2361 10.4602 13.2563 10.4734L16.4883 12.5821C16.4937 12.5895 16.4974 12.598 16.4991 12.607 16.5016 12.6212 16.4989 12.6358 16.4915 12.6482 16.4808 12.666 16.4708 12.6842 16.4616 12.7027L16.2163 13.1993 14.1501 11.65C13.8187 11.4015 13.3487 11.4687 13.1002 11.8001 12.8517 12.1314 12.9189 12.6015 13.2503 12.85L15.4631 14.5093C15.489 14.5287 15.5157 14.5462 15.5431 14.5618L15.2189 15.218 14.5854 15.5307 12.8469 13.2456C12.5961 12.9159 12.1256 12.852 11.7959 13.1028 11.4662 13.3536 11.4023 13.8242 11.6531 14.1538L13.2152 16.2071 12.7025 16.4601C12.6832 16.4697 12.6643 16.4801 12.6458 16.4913 12.6333 16.4989 12.6184 16.5016 12.6039 16.4991 12.5946 16.4974 12.5859 16.4936 12.5785 16.488L10.4741 13.2551C10.4608 13.2345 10.4464 13.2147 10.4311 13.1956 10.1286 12.8175 9.97619 12.3413 10.003 11.858 10.0299 11.3747 10.234 10.9183 10.5766 10.576zM16.091 4.96953C16.3839 4.67664 16.3839 4.20176 16.091 3.90887 15.7981 3.61598 15.3232 3.61598 15.0303 3.90887L14.5 4.43921 13.9697 3.90887C13.6768 3.61598 13.2019 3.61598 12.909 3.90887 12.6161 4.20176 12.6161 4.67664 12.909 4.96953L13.4393 5.49987 12.909 6.03019C12.6161 6.32308 12.6161 6.79796 12.909 7.09085 13.2019 7.38374 13.6768 7.38374 13.9697 7.09085L14.5 6.56053 15.0303 7.09085C15.3232 7.38374 15.7981 7.38374 16.091 7.09085 16.3839 6.79796 16.3839 6.32308 16.091 6.03019L15.5607 5.49987 16.091 4.96953zM6.71209 14.5911C7.00499 14.2982 7.00499 13.8233 6.71209 13.5305 6.4192 13.2376 5.94433 13.2376 5.65143 13.5305L5.12109 14.0608 4.59075 13.5305C4.29786 13.2376 3.82299 13.2376 3.53009 13.5305 3.2372 13.8233 3.2372 14.2982 3.53009 14.5911L4.06043 15.1215 3.53011 15.6518C3.23722 15.9447 3.23722 16.4195 3.53011 16.7124 3.82301 17.0053 4.29788 17.0053 4.59077 16.7124L5.12109 16.1821 5.65142 16.7124C5.94431 17.0053 6.41918 17.0053 6.71208 16.7124 7.00497 16.4195 7.00497 15.9447 6.71208 15.6518L6.18175 15.1215 6.71209 14.5911z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nBroom.displayName = 'Broom';\nexport default Broom;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Bug.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface BugProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Bug: React.FC<BugProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M13.499 2.68583C13.499 2.30712 13.1921 2.00007 12.8134 2C12.4347 1.99993 12.1276 2.30688 12.1275 2.68559C12.1275 3.17163 12.0182 3.64398 11.8167 4.05354C11.6666 4.35855 11.4716 4.61643 11.2482 4.81815C10.8401 4.7131 10.4214 4.65937 9.99943 4.65937C9.57786 4.65937 9.15963 4.71299 8.75199 4.81782C8.52868 4.61615 8.3338 4.35838 8.18381 4.05354C7.98229 3.64398 7.87307 3.17163 7.87299 2.68559C7.87292 2.30688 7.56586 1.99993 7.18715 2C6.80845 2.00007 6.5015 2.30712 6.50156 2.68583C6.50168 3.37352 6.65555 4.05391 6.95327 4.659C7.07958 4.91571 7.2306 5.15634 7.40382 5.37605C6.84129 5.7056 6.33232 6.13856 5.89538 6.65494C5.76838 6.80503 5.64799 6.96153 5.53447 7.12385C5.2604 6.8757 4.96053 6.66223 4.6394 6.48933C4.03158 6.16208 3.36484 5.98965 2.68552 5.98984C2.30681 5.98995 1.99989 6.29704 2 6.67575C2.00011 7.05446 2.3072 7.36137 2.6859 7.36127C3.13038 7.36114 3.5744 7.47349 3.98925 7.69686C4.2988 7.86352 4.5884 8.09013 4.8453 8.37065C4.78365 8.51543 4.72652 8.66282 4.67405 8.81254C4.46817 9.39995 4.33611 10.0167 4.28039 10.6438H2.68571C2.307 10.6438 2 10.9508 2 11.3295C2 11.7082 2.307 12.0152 2.68571 12.0152H4.28038C4.33611 12.6423 4.46817 13.259 4.67405 13.8464C4.72657 13.9963 4.78375 14.1438 4.84545 14.2887C4.58852 14.5693 4.29886 14.7959 3.98925 14.9626C3.5744 15.186 3.13038 15.2984 2.6859 15.2982C2.3072 15.2981 2.00011 15.605 2 15.9837C1.99989 16.3625 2.30681 16.6695 2.68552 16.6697C3.36484 16.6698 4.03158 16.4974 4.6394 16.1702C4.96062 15.9972 5.26057 15.7837 5.5347 15.5354C5.64816 15.6976 5.76847 15.854 5.89538 16.004C6.42283 16.6274 7.05524 17.1291 7.76014 17.4742C8.46558 17.8195 9.2269 17.9996 9.99943 17.9996C10.772 17.9996 11.5333 17.8195 12.2387 17.4742C12.9436 17.1291 13.576 16.6274 14.1035 16.004C14.2305 15.8539 14.3509 15.6974 14.4644 15.5351C14.7386 15.7835 15.0387 15.9971 15.3601 16.1702C15.9679 16.4974 16.6347 16.6698 17.314 16.6697C17.6927 16.6695 17.9996 16.3625 17.9995 15.9837C17.9994 15.605 17.6923 15.2981 17.3136 15.2982C16.8691 15.2984 16.4251 15.186 16.0102 14.9626C15.7005 14.7958 15.4106 14.569 15.1536 14.2882C15.2152 14.1435 15.2723 13.9961 15.3248 13.8464C15.5307 13.259 15.6627 12.6423 15.7185 12.0152H17.3144C17.6931 12.0152 18.0001 11.7082 18.0001 11.3295C18.0001 10.9508 17.6931 10.6438 17.3144 10.6438H15.7185C15.6961 10.3926 15.6616 10.1431 15.6149 9.89652C15.6122 9.87807 15.6086 9.85987 15.6044 9.84194C15.5355 9.49163 15.4421 9.14732 15.3248 8.81254C15.2724 8.66299 15.2153 8.51575 15.1538 8.37113C15.4108 8.09039 15.7005 7.86361 16.0102 7.69686C16.4251 7.47349 16.8691 7.36114 17.3136 7.36127C17.6923 7.36137 17.9994 7.05446 17.9995 6.67575C17.9996 6.29704 17.6927 5.98995 17.314 5.98984C16.6346 5.98965 15.9679 6.16208 15.3601 6.48933C15.0388 6.66232 14.7388 6.8759 14.4646 7.1242C14.351 6.96176 14.2306 6.80514 14.1035 6.65494C13.6668 6.13891 13.1583 5.70619 12.5962 5.37672C12.7696 5.15683 12.9208 4.91597 13.0472 4.659C13.345 4.05391 13.4988 3.37352 13.499 2.68583ZM14.0471 9.31406C14.0417 9.29806 14.0362 9.2821 14.0306 9.26616C13.9528 9.04438 13.863 8.83026 13.7621 8.62503C13.7444 8.59557 13.7291 8.56497 13.7161 8.53351C13.5296 8.17125 13.308 7.83801 13.0566 7.5408C12.6436 7.05275 12.1596 6.67292 11.6357 6.4165C11.1125 6.16034 10.5569 6.0308 9.99943 6.0308C9.442 6.0308 8.88639 6.16034 8.36311 6.4165C7.83929 6.67292 7.35527 7.05275 6.9423 7.5408C6.69219 7.83639 6.47163 8.16762 6.28583 8.52759C6.27157 8.5631 6.25428 8.59754 6.23404 8.63051C6.1342 8.83407 6.04532 9.04635 5.96828 9.26616C5.96269 9.2821 5.95717 9.29806 5.95172 9.31406H14.0471ZM5.65401 10.6855C5.63324 10.89 5.62232 11.0963 5.62148 11.3034C5.6218 11.312 5.62196 11.3207 5.62196 11.3295C5.62196 11.3382 5.6218 11.3469 5.62148 11.3555C5.62434 12.057 5.7427 12.7492 5.96828 13.3928C6.04566 13.6136 6.135 13.8268 6.23538 14.0312C6.25458 14.0627 6.27108 14.0956 6.28482 14.1294C6.47083 14.4901 6.69174 14.822 6.9423 15.1181C7.35527 15.6062 7.83929 15.986 8.36311 16.2425C8.88639 16.4986 9.442 16.6282 9.99943 16.6282C10.5569 16.6282 11.1125 16.4986 11.6357 16.2425C12.1596 15.986 12.6436 15.6062 13.0566 15.1181C13.3085 14.8203 13.5306 14.4863 13.7172 14.1232C13.7296 14.0936 13.7441 14.0648 13.7606 14.037C13.8622 13.8308 13.9525 13.6157 14.0306 13.3928C14.259 12.7412 14.3774 12.0398 14.3774 11.3295C14.3774 11.1136 14.3665 10.8986 14.3448 10.6855H5.65401Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nBug.displayName = 'Bug';\nexport default Bug;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Bullet.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface BulletProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Bullet: React.FC<BulletProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <circle cx=\"10\" cy=\"10\" r=\"3\" fill=\"currentColor\" />\n  </svg>\n);\nBullet.displayName = 'Bullet';\nexport default Bullet;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Bullets.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface BulletsProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Bullets: React.FC<BulletsProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <g fill=\"currentColor\">\n      <path d=\"M3 5.53846C3 5.68127 3.05673 5.81823 3.15771 5.91921C3.25869 6.02019 3.39565 6.07692 3.53846 6.07692C3.68127 6.07692 3.81823 6.02019 3.91921 5.91921C4.02019 5.81823 4.07692 5.68127 4.07692 5.53846C4.07692 5.39565 4.02019 5.25869 3.91921 5.15771C3.81823 5.05673 3.68127 5 3.53846 5C3.39565 5 3.25869 5.05673 3.15771 5.15771C3.05673 5.25869 3 5.39565 3 5.53846V5.53846Z\"\n      />\n      <path d=\"M2.62738 4.62738C2.86901 4.38575 3.19674 4.25 3.53846 4.25 3.88018 4.25 4.20791 4.38575 4.44954 4.62738 4.69117 4.86902 4.82692 5.19674 4.82692 5.53846 4.82692 5.88018 4.69117 6.20791 4.44954 6.44954 4.20791 6.69117 3.88018 6.82692 3.53846 6.82692 3.19674 6.82692 2.86901 6.69117 2.62738 6.44954 2.38575 6.20791 2.25 5.88018 2.25 5.53846 2.25 5.19674 2.38575 4.86902 2.62738 4.62738zM3.53846 5.75C3.59457 5.75 3.64837 5.72771 3.68804 5.68804 3.72771 5.64837 3.75 5.59457 3.75 5.53846 3.75 5.48236 3.72771 5.42855 3.68804 5.38888 3.64837 5.34921 3.59457 5.32692 3.53846 5.32692 3.48236 5.32692 3.42855 5.34921 3.38888 5.38888 3.34921 5.42855 3.32692 5.48236 3.32692 5.53846 3.32692 5.59457 3.34921 5.64837 3.38888 5.68804 3.42855 5.72771 3.48236 5.75 3.53846 5.75zM6.55769 5.53845C6.55769 5.12424 6.89348 4.78845 7.30769 4.78845H17C17.4142 4.78845 17.75 5.12424 17.75 5.53845 17.75 5.95267 17.4142 6.28845 17 6.28845H7.30769C6.89348 6.28845 6.55769 5.95267 6.55769 5.53845z\"\n        fillRule=\"evenodd\" clipRule=\"evenodd\" />\n      <path d=\"M3 10.3846C3 10.5274 3.05673 10.6644 3.15771 10.7654C3.25869 10.8663 3.39565 10.9231 3.53846 10.9231C3.68127 10.9231 3.81823 10.8663 3.91921 10.7654C4.02019 10.6644 4.07692 10.5274 4.07692 10.3846C4.07692 10.2418 4.02019 10.1048 3.91921 10.0039C3.81823 9.90288 3.68127 9.84615 3.53846 9.84615C3.39565 9.84615 3.25869 9.90288 3.15771 10.0039C3.05673 10.1048 3 10.2418 3 10.3846V10.3846Z\"\n      />\n      <path d=\"M2.62738 9.47353C2.86901 9.23189 3.19674 9.09615 3.53846 9.09615 3.88018 9.09615 4.20791 9.23189 4.44954 9.47353 4.69117 9.71516 4.82692 10.0429 4.82692 10.3846 4.82692 10.7263 4.69117 11.0541 4.44954 11.2957 4.20791 11.5373 3.88018 11.6731 3.53846 11.6731 3.19674 11.6731 2.86901 11.5373 2.62738 11.2957 2.38575 11.0541 2.25 10.7263 2.25 10.3846 2.25 10.0429 2.38575 9.71516 2.62738 9.47353zM3.53846 10.5961C3.59457 10.5961 3.64837 10.5739 3.68804 10.5342 3.72771 10.4945 3.75 10.4407 3.75 10.3846 3.75 10.3285 3.72771 10.2747 3.68804 10.235 3.64837 10.1954 3.59457 10.1731 3.53846 10.1731 3.48236 10.1731 3.42855 10.1954 3.38888 10.235 3.34921 10.2747 3.32692 10.3285 3.32692 10.3846 3.32692 10.4407 3.34921 10.4945 3.38888 10.5342 3.42855 10.5739 3.48236 10.5961 3.53846 10.5961zM6.55769 10.3846C6.55769 9.9704 6.89348 9.63461 7.30769 9.63461H17C17.4142 9.63461 17.75 9.9704 17.75 10.3846 17.75 10.7988 17.4142 11.1346 17 11.1346H7.30769C6.89348 11.1346 6.55769 10.7988 6.55769 10.3846z\"\n        fillRule=\"evenodd\" clipRule=\"evenodd\" />\n      <path d=\"M3 15.2308C3 15.3736 3.05673 15.5105 3.15771 15.6115C3.25869 15.7125 3.39565 15.7692 3.53846 15.7692C3.68127 15.7692 3.81823 15.7125 3.91921 15.6115C4.02019 15.5105 4.07692 15.3736 4.07692 15.2308C4.07692 15.0879 4.02019 14.951 3.91921 14.85C3.81823 14.749 3.68127 14.6923 3.53846 14.6923C3.39565 14.6923 3.25869 14.749 3.15771 14.85C3.05673 14.951 3 15.0879 3 15.2308V15.2308Z\"\n      />\n      <path d=\"M2.62738 14.3197C2.86902 14.078 3.19674 13.9423 3.53846 13.9423 3.88018 13.9423 4.20791 14.078 4.44954 14.3197 4.69118 14.5613 4.82692 14.889 4.82692 15.2308 4.82692 15.5725 4.69118 15.9002 4.44954 16.1418 4.20791 16.3835 3.88018 16.5192 3.53846 16.5192 3.19674 16.5192 2.86902 16.3835 2.62738 16.1418 2.38575 15.9002 2.25 15.5725 2.25 15.2308 2.25 14.889 2.38575 14.5613 2.62738 14.3197zM3.53846 15.4423C3.59456 15.4423 3.64837 15.42 3.68804 15.3803 3.72771 15.3407 3.75 15.2869 3.75 15.2308 3.75 15.1747 3.72771 15.1208 3.68804 15.0812 3.64837 15.0415 3.59456 15.0192 3.53846 15.0192 3.48236 15.0192 3.42855 15.0415 3.38888 15.0812 3.34921 15.1208 3.32692 15.1747 3.32692 15.2308 3.32692 15.2869 3.34921 15.3407 3.38888 15.3803 3.42855 15.42 3.48236 15.4423 3.53846 15.4423zM6.55769 15.2308C6.55769 14.8166 6.89348 14.4808 7.30769 14.4808H17C17.4142 14.4808 17.75 14.8166 17.75 15.2308 17.75 15.645 17.4142 15.9808 17 15.9808H7.30769C6.89348 15.9808 6.55769 15.645 6.55769 15.2308z\"\n        fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    </g>\n  </svg>\n);\nBullets.displayName = 'Bullets';\nexport default Bullets;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Bulllet.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface BullletProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Bulllet: React.FC<BullletProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <circle cx=\"10\" cy=\"10\" r=\"3\" fill=\"currentColor\" />\n  </svg>\n);\nBulllet.displayName = 'Bulllet';\nexport default Bulllet;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Calendar.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface CalendarProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Calendar: React.FC<CalendarProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M6.83801 3C6.83801 2.58579 6.50223 2.25 6.08801 2.25C5.6738 2.25 5.33801 2.58579 5.33801 3V5.15381V7.30769C5.33801 7.72191 5.6738 8.05769 6.08801 8.05769C6.50223 8.05769 6.83801 7.72191 6.83801 7.30769V5.90381H11.4726C11.8868 5.90381 12.2226 5.56802 12.2226 5.15381C12.2226 4.73959 11.8868 4.40381 11.4726 4.40381H6.83801V3ZM2.64227 4.9389C2.98489 4.59629 3.44957 4.40381 3.9341 4.40381C4.34831 4.40381 4.6841 4.73959 4.6841 5.15381C4.6841 5.56802 4.34831 5.90381 3.9341 5.90381C3.8474 5.90381 3.76424 5.93825 3.70293 5.99956C3.64162 6.06087 3.60718 6.14403 3.60718 6.23073V8.71149H16.1072V6.23073C16.1072 6.14403 16.0727 6.06087 16.0114 5.99956C15.9501 5.93825 15.867 5.90381 15.7803 5.90381H14.3765V7.30769C14.3765 7.72191 14.0407 8.05769 13.6265 8.05769C13.2123 8.05769 12.8765 7.72191 12.8765 7.30769V5.16301L12.8764 5.15381L12.8765 5.1446V3C12.8765 2.58579 13.2123 2.25 13.6265 2.25C14.0407 2.25 14.3765 2.58579 14.3765 3V4.40381H15.7803C16.2648 4.40381 16.7295 4.59629 17.0721 4.9389C17.4147 5.28152 17.6072 5.7462 17.6072 6.23073V9.46149V15.923C17.6072 16.4076 17.4147 16.8723 17.0721 17.2149C16.7295 17.5575 16.2648 17.75 15.7803 17.75H3.9341C3.44957 17.75 2.98489 17.5575 2.64227 17.2149C2.29966 16.8723 2.10718 16.4076 2.10718 15.923V9.46149V6.23073C2.10718 5.7462 2.29966 5.28152 2.64227 4.9389ZM3.60718 15.923V10.2115H16.1072V15.923C16.1072 16.0097 16.0727 16.0929 16.0114 16.1542C15.9501 16.2155 15.867 16.25 15.7803 16.25H3.9341C3.8474 16.25 3.76424 16.2155 3.70293 16.1542C3.64162 16.0929 3.60718 16.0097 3.60718 15.923Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nCalendar.displayName = 'Calendar';\nexport default Calendar;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Chart.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ChartProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Chart: React.FC<ChartProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M4.34315 4.34315C5.84283 2.84346 7.87663 2.00068 9.99743 2C9.9977 2 9.99797 2 9.99823 2C9.99882 2 9.99941 2 10 2C12.1217 2 14.1566 2.84286 15.6569 4.34315C17.1571 5.84344 18 7.87827 18 10C18 12.1217 17.1571 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84285 14.1566 2 12.1217 2 10C2 7.87827 2.84285 5.84344 4.34315 4.34315ZM9.23498 3.57184C7.79989 3.7426 6.45484 4.39025 5.42255 5.42255C4.20853 6.63656 3.5265 8.28312 3.5265 10C3.5265 11.7169 4.20853 13.3634 5.42255 14.5775C6.63656 15.7915 8.28312 16.4735 10 16.4735C11.4601 16.4735 12.8693 15.9802 14.0049 15.086L9.45853 10.5397C9.3154 10.3966 9.23498 10.2024 9.23498 10V3.57184ZM15.0845 14.0068C15.9797 12.8709 16.4735 11.4609 16.4735 10C16.4735 8.28312 15.7915 6.63656 14.5775 5.42255C13.5443 4.3894 12.1979 3.74153 10.7615 3.57142V9.68385L15.0845 14.0068Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nChart.displayName = 'Chart';\nexport default Chart;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Check.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface CheckProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Check: React.FC<CheckProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M8.53033 14.2478L8 13.7175L7.46967 14.2478C7.76256 14.5407 8.23744 14.5407 8.53033 14.2478ZM8 12.6569L4.53033 9.18718C4.23744 8.89429 3.76256 8.89429 3.46967 9.18718C3.17678 9.48008 3.17678 9.95495 3.46967 10.2478L7.46967 14.2478L8 13.7175L8.53033 14.2478L16.2478 6.53033C16.5407 6.23743 16.5407 5.76256 16.2478 5.46967C15.955 5.17677 15.4801 5.17677 15.1872 5.46967L8 12.6569Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nCheck.displayName = 'Check';\nexport default Check;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/CheckList.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface CheckListProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst CheckList: React.FC<CheckListProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M2 3.88821C2 2.84538 2.84538 2 3.88821 2H16.1618C17.2046 2 18.05 2.84538 18.05 3.88821V16.1618C18.05 17.2046 17.2046 18.05 16.1618 18.05H3.88821C2.84538 18.05 2 17.2046 2 16.1618V3.88821ZM3.88821 3.5C3.67381 3.5 3.5 3.67381 3.5 3.88821V16.1618C3.5 16.3762 3.67381 16.55 3.88821 16.55H16.1618C16.3762 16.55 16.55 16.3762 16.55 16.1618V3.88821C16.55 3.67381 16.3762 3.5 16.1618 3.5H3.88821Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M9.32853 5.76801C9.62142 6.0609 9.62142 6.53578 9.32853 6.82867L7.03615 9.12105C6.74326 9.41394 6.26838 9.41394 5.97549 9.12105L5.05854 8.2041C4.76564 7.9112 4.76564 7.43633 5.05854 7.14344 5.35143 6.85054 5.8263 6.85054 6.1192 7.14344L6.50582 7.53006 8.26787 5.76801C8.56076 5.47512 9.03564 5.47512 9.32853 5.76801zM9.32755 11.0917C9.62045 11.3846 9.62045 11.8595 9.32755 12.1524L7.03517 14.4448C6.74228 14.7377 6.26741 14.7377 5.97451 14.4448L5.05756 13.5278C4.76467 13.2349 4.76467 12.7601 5.05756 12.4672 5.35045 12.1743 5.82533 12.1743 6.11822 12.4672L6.50484 12.8538 8.26689 11.0917C8.55979 10.7988 9.03466 10.7988 9.32755 11.0917zM10.5156 7.36279C10.5156 6.94858 10.8514 6.61279 11.2656 6.61279H14.8144C15.2286 6.61279 15.5644 6.94858 15.5644 7.36279 15.5644 7.77701 15.2286 8.11279 14.8144 8.11279H11.2656C10.8514 8.11279 10.5156 7.77701 10.5156 7.36279zM10.5146 13.042C10.5146 12.6278 10.8504 12.292 11.2646 12.292H14.8134C15.2276 12.292 15.5634 12.6278 15.5634 13.042 15.5634 13.4562 15.2276 13.792 14.8134 13.792H11.2646C10.8504 13.792 10.5146 13.4562 10.5146 13.042z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nCheckList.displayName = 'CheckList';\nexport default CheckList;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Checkbox.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface CheckboxProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Checkbox: React.FC<CheckboxProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <g fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n      <path d=\"M1.82141 4.57141C1.82141 3.05263 3.05263 1.82141 4.57141 1.82141H15.4286C16.9473 1.82141 18.1786 3.05263 18.1786 4.57141V15.4286C18.1786 16.9473 16.9473 18.1786 15.4286 18.1786H4.57141C3.05263 18.1786 1.82141 16.9473 1.82141 15.4286V4.57141ZM4.57141 3.32141C3.88105 3.32141 3.32141 3.88105 3.32141 4.57141V15.4286C3.32141 16.1189 3.88106 16.6786 4.57141 16.6786H15.4286C16.1189 16.6786 16.6786 16.1189 16.6786 15.4286V4.57141C16.6786 3.88106 16.1189 3.32141 15.4286 3.32141H4.57141Z\"\n      />\n      <path d=\"M14.6944 7.04273C14.986 7.33691 14.9839 7.81178 14.6897 8.10338L9.5215 13.226C9.38659 13.3594 9.22392 13.4628 9.04573 13.528C8.86753 13.5932 8.67739 13.6193 8.48823 13.6044C8.29906 13.5895 8.11532 13.5341 7.94949 13.4419C7.78371 13.3497 7.63972 13.2229 7.52731 13.0701C7.52728 13.0701 7.52735 13.0702 7.52731 13.0701L5.75101 10.6561C5.50551 10.3225 5.57696 9.85302 5.91058 9.60752C6.24421 9.36203 6.71367 9.43347 6.95917 9.7671L8.61294 12.0146L13.6338 7.03803C13.928 6.74643 14.4028 6.74854 14.6944 7.04273Z\"\n      />\n    </g>\n  </svg>\n);\nCheckbox.displayName = 'Checkbox';\nexport default Checkbox;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/ClassicFolder.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ClassicFolderProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst ClassicFolder: React.FC<ClassicFolderProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M16.5 13.935V9.554c0-.754-.61-1.365-1.365-1.365H12.23a3.013 3.013 0 0 1-2.724-1.724l-.29-.613A.615.615 0 0 0 8.66 5.5H4.667c-.645 0-1.167.522-1.167 1.167v7.268c0 .754.61 1.365 1.365 1.365h10.27c.754 0 1.365-.61 1.365-1.365ZM4.667 4A2.667 2.667 0 0 0 2 6.667v7.268A2.865 2.865 0 0 0 4.865 16.8h10.27A2.865 2.865 0 0 0 18 13.935V9.554a2.865 2.865 0 0 0-2.865-2.865H12.23a1.512 1.512 0 0 1-1.368-.866l-.29-.612A2.115 2.115 0 0 0 8.66 4H4.667Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nClassicFolder.displayName = 'ClassicFolder';\nexport default ClassicFolder;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Clear.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ClearProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Clear: React.FC<ClearProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M5.60855 3.61333C5.68084 3.54275 5.78263 3.5 5.89242 3.5H11.9876C12.0973 3.50006 12.199 3.54277 12.2712 3.61325L14.4584 5.74867C14.5298 5.81856 14.5666 5.90955 14.5667 6.00039V16.1346C14.5667 16.2256 14.5298 16.3167 14.4581 16.3867C14.3858 16.4572 14.284 16.5 14.1742 16.5H5.89242C5.78263 16.5 5.68084 16.4572 5.60855 16.3867C5.53687 16.3167 5.5 16.2256 5.5 16.1346V3.86538C5.5 3.77435 5.53687 3.68331 5.60855 3.61333ZM15.506 17.46C15.1498 17.8077 14.6704 18 14.1742 18H5.89242C5.39624 18 4.91687 17.8077 4.56067 17.46C4.20385 17.1116 4 16.6352 4 16.1346V3.86538C4 3.36478 4.20385 2.88841 4.56067 2.54005C4.91687 2.19227 5.39624 2 5.89242 2H11.9878C12.4836 2.0001 12.9628 2.19238 13.3189 2.53979L15.5064 4.67555C15.8629 5.02379 16.0666 5.49998 16.0667 6.00023V16.1346C16.0667 16.6352 15.8628 17.1116 15.506 17.46ZM12.5303 7.46967C12.8232 7.76256 12.8232 8.23744 12.5303 8.53033L11.0607 10L12.5303 11.4697C12.8232 11.7626 12.8232 12.2374 12.5303 12.5303C12.2374 12.8232 11.7626 12.8232 11.4697 12.5303L10 11.0607L8.53033 12.5303C8.23744 12.8232 7.76256 12.8232 7.46967 12.5303C7.17678 12.2374 7.17678 11.7626 7.46967 11.4697L8.93934 10L7.46967 8.53033C7.17678 8.23744 7.17678 7.76256 7.46967 7.46967C7.76256 7.17678 8.23744 7.17678 8.53033 7.46967L10 8.93934L11.4697 7.46967C11.7626 7.17678 12.2374 7.17678 12.5303 7.46967Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nClear.displayName = 'Clear';\nexport default Clear;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Clipboard.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ClipboardProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Clipboard: React.FC<ClipboardProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M6.438 9.069a.75.75 0 0 1 .75-.75h5.625a.75.75 0 0 1 0 1.5H7.186a.75.75 0 0 1-.75-.75Zm0 2.343a.75.75 0 0 1 .75-.75h5.625a.75.75 0 0 1 0 1.5H7.186a.75.75 0 0 1-.75-.75Zm0 2.344a.75.75 0 0 1 .75-.75h5.625a.75.75 0 1 1 0 1.5H7.186a.75.75 0 0 1-.75-.75Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M10 3.719a1.594 1.594 0 0 0-1.594 1.594.75.75 0 0 1-.75.75H5.313a.188.188 0 0 0-.188.187v9.844a.188.188 0 0 0 .188.187h9.375a.187.187 0 0 0 .187-.187V6.25a.188.188 0 0 0-.188-.188h-2.343a.75.75 0 0 1-.75-.75 1.59 1.59 0 0 0-.467-1.126M10 3.719c.423 0 .828.168 1.127.467Zm-2.188-.594a3.094 3.094 0 0 1 5.19 1.438h1.685a1.688 1.688 0 0 1 1.688 1.687v9.844a1.688 1.688 0 0 1-1.688 1.687H5.313a1.687 1.687 0 0 1-1.688-1.687V6.25a1.687 1.687 0 0 1 1.688-1.688h1.686a3.08 3.08 0 0 1 .813-1.437Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M10 5.6a.516.516 0 1 0 0-1.03V4.1a.984.984 0 1 0 0 1.97V5.6Z\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M10 4.1a.984.984 0 0 1 0 1.97V5.6a.516.516 0 0 1 0-1.03V4.1ZM6.438 9.069a.75.75 0 0 1 .75-.75h5.625a.75.75 0 0 1 0 1.5H7.186a.75.75 0 0 1-.75-.75Zm0 2.343a.75.75 0 0 1 .75-.75h5.625a.75.75 0 0 1 0 1.5H7.186a.75.75 0 0 1-.75-.75Zm0 2.344a.75.75 0 0 1 .75-.75h5.625a.75.75 0 1 1 0 1.5H7.186a.75.75 0 0 1-.75-.75Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M10 3.719a1.594 1.594 0 0 0-1.594 1.594.75.75 0 0 1-.75.75H5.313a.188.188 0 0 0-.188.187v9.844a.188.188 0 0 0 .188.187h9.375a.187.187 0 0 0 .187-.187V6.25a.188.188 0 0 0-.188-.188h-2.343a.75.75 0 0 1-.75-.75 1.59 1.59 0 0 0-.467-1.126M10 3.719c.423 0 .828.168 1.127.467Zm-2.188-.594a3.094 3.094 0 0 1 5.19 1.438h1.685a1.688 1.688 0 0 1 1.688 1.687v9.844a1.688 1.688 0 0 1-1.688 1.687H5.313a1.687 1.687 0 0 1-1.688-1.687V6.25a1.687 1.687 0 0 1 1.688-1.688h1.686a3.08 3.08 0 0 1 .813-1.437Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M10 5.6a.516.516 0 1 0 0-1.03V4.1a.984.984 0 1 0 0 1.97V5.6Z\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M10 4.1a.984.984 0 0 1 0 1.97V5.6a.516.516 0 0 1 0-1.03V4.1ZM6.438 9.069a.75.75 0 0 1 .75-.75h5.625a.75.75 0 0 1 0 1.5H7.186a.75.75 0 0 1-.75-.75Zm0 2.343a.75.75 0 0 1 .75-.75h5.625a.75.75 0 0 1 0 1.5H7.186a.75.75 0 0 1-.75-.75Zm0 2.344a.75.75 0 0 1 .75-.75h5.625a.75.75 0 1 1 0 1.5H7.186a.75.75 0 0 1-.75-.75Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M10 3.719a1.594 1.594 0 0 0-1.594 1.594.75.75 0 0 1-.75.75H5.313a.188.188 0 0 0-.188.187v9.844a.188.188 0 0 0 .188.187h9.375a.187.187 0 0 0 .187-.187V6.25a.188.188 0 0 0-.188-.188h-2.343a.75.75 0 0 1-.75-.75 1.59 1.59 0 0 0-.467-1.126M10 3.719c.423 0 .828.168 1.127.467Zm-2.188-.594a3.094 3.094 0 0 1 5.19 1.438h1.685a1.688 1.688 0 0 1 1.688 1.687v9.844a1.688 1.688 0 0 1-1.688 1.687H5.313a1.687 1.687 0 0 1-1.688-1.687V6.25a1.687 1.687 0 0 1 1.688-1.688h1.686a3.08 3.08 0 0 1 .813-1.437Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M10 5.6a.516.516 0 1 0 0-1.03V4.1a.984.984 0 1 0 0 1.97V5.6Z\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M10 4.1a.984.984 0 0 1 0 1.97V5.6a.516.516 0 0 1 0-1.03V4.1ZM6.438 9.069a.75.75 0 0 1 .75-.75h5.625a.75.75 0 0 1 0 1.5H7.186a.75.75 0 0 1-.75-.75Zm0 2.343a.75.75 0 0 1 .75-.75h5.625a.75.75 0 0 1 0 1.5H7.186a.75.75 0 0 1-.75-.75Zm0 2.344a.75.75 0 0 1 .75-.75h5.625a.75.75 0 1 1 0 1.5H7.186a.75.75 0 0 1-.75-.75Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M10 3.719a1.594 1.594 0 0 0-1.594 1.594.75.75 0 0 1-.75.75H5.313a.188.188 0 0 0-.188.187v9.844a.188.188 0 0 0 .188.187h9.375a.187.187 0 0 0 .187-.187V6.25a.188.188 0 0 0-.188-.188h-2.343a.75.75 0 0 1-.75-.75 1.59 1.59 0 0 0-.467-1.126M10 3.719c.423 0 .828.168 1.127.467Zm-2.188-.594a3.094 3.094 0 0 1 5.19 1.438h1.685a1.688 1.688 0 0 1 1.688 1.687v9.844a1.688 1.688 0 0 1-1.688 1.687H5.313a1.687 1.687 0 0 1-1.688-1.687V6.25a1.687 1.687 0 0 1 1.688-1.688h1.686a3.08 3.08 0 0 1 .813-1.437Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M10 5.6a.516.516 0 1 0 0-1.03V4.1a.984.984 0 1 0 0 1.97V5.6Z\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M10 4.1a.984.984 0 0 1 0 1.97V5.6a.516.516 0 0 1 0-1.03V4.1Z\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nClipboard.displayName = 'Clipboard';\nexport default Clipboard;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Close.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface CloseProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Close: React.FC<CloseProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M3.53033 2.46967C3.23744 2.17678 2.76256 2.17678 2.46967 2.46967C2.17678 2.76256 2.17678 3.23744 2.46967 3.53033L8.97639 10.037L2.47093 16.5425C2.17804 16.8354 2.17804 17.3103 2.47093 17.6032C2.76382 17.8961 3.2387 17.8961 3.53159 17.6032L10.037 11.0977L16.5425 17.6032C16.8354 17.8961 17.3103 17.8961 17.6032 17.6032C17.8961 17.3103 17.8961 16.8354 17.6032 16.5425L11.0977 10.037L17.6044 3.53033C17.8973 3.23744 17.8973 2.76256 17.6044 2.46967C17.3115 2.17678 16.8367 2.17678 16.5438 2.46967L10.037 8.97639L3.53033 2.46967Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nClose.displayName = 'Close';\nexport default Close;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/CloseMedium.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface CloseMediumProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst CloseMedium: React.FC<CloseMediumProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M5.28716 4.22653C4.99426 3.93364 4.51939 3.93365 4.2265 4.22654C3.93361 4.51944 3.93361 4.99431 4.22651 5.2872L8.9682 10.0288L4.22714 14.7698C3.93425 15.0626 3.93424 15.5375 4.22713 15.8304C4.52002 16.1233 4.9949 16.1233 5.28779 15.8304L10.0289 11.0894L14.7699 15.8304C15.0628 16.1233 15.5377 16.1233 15.8306 15.8304C16.1235 15.5375 16.1235 15.0626 15.8306 14.7698L11.0895 10.0288L15.8312 5.2872C16.1241 4.99431 16.1241 4.51944 15.8312 4.22654C15.5383 3.93365 15.0635 3.93364 14.7706 4.22653L10.0289 8.96815L5.28716 4.22653Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nCloseMedium.displayName = 'CloseMedium';\nexport default CloseMedium;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/CloseRound.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface CloseRoundProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst CloseRound: React.FC<CloseRoundProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M7.61 6.604 10 8.994l2.391-2.39A.713.713 0 1 1 13.4 7.612l-2.39 2.39 2.39 2.392a.713.713 0 1 1-1.007 1.008l-2.391-2.391L7.61 13.4a.713.713 0 0 1-1.008-1.007l2.39-2.391-2.39-2.391a.713.713 0 1 1 1.007-1.008Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M17.95 10.003a7.95 7.95 0 1 0-15.9 0 7.95 7.95 0 0 0 15.9 0Zm-14.474 0a6.525 6.525 0 1 1 13.05 0 6.525 6.525 0 0 1-13.05 0Z\" fillRule=\"evenodd\" clipRule=\"evenodd\"\n    />\n  </svg>\n);\nCloseRound.displayName = 'CloseRound';\nexport default CloseRound;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/CloseSmall.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface CloseSmallProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst CloseSmall: React.FC<CloseSmallProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M6.331 5.27a.75.75 0 0 0-1.06 1.06L8.94 10l-3.67 3.668a.75.75 0 1 0 1.06 1.06L10 11.06l3.668 3.669a.75.75 0 0 0 1.06-1.06l-3.668-3.67 3.67-3.669a.75.75 0 0 0-1.061-1.06L10 8.939l-3.669-3.67Z\"\n    />\n  </svg>\n);\nCloseSmall.displayName = 'CloseSmall';\nexport default CloseSmall;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Code.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface CodeProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Code: React.FC<CodeProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M7.29956 5.46967C7.59245 5.76256 7.59245 6.23744 7.29956 6.53033L4.06066 9.76923 7.29956 13.0081C7.59245 13.301 7.59245 13.7759 7.29956 14.0688 7.00667 14.3617 6.53179 14.3617 6.2389 14.0688L2.46967 10.2996C2.17678 10.0067 2.17678 9.53179 2.46967 9.2389L6.2389 5.46967C6.53179 5.17678 7.00667 5.17678 7.29956 5.46967zM12.7004 5.46967C12.9933 5.17678 13.4682 5.17678 13.7611 5.46967L17.5303 9.2389C17.8232 9.53179 17.8232 10.0067 17.5303 10.2996L13.7611 14.0688C13.4682 14.3617 12.9933 14.3617 12.7004 14.0688 12.4076 13.7759 12.4076 13.301 12.7004 13.0081L15.9393 9.76923 12.7004 6.53033C12.4076 6.23744 12.4076 5.76256 12.7004 5.46967z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nCode.displayName = 'Code';\nexport default Code;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Collapse.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface CollapseProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Collapse: React.FC<CollapseProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L9.46967 7.53033C9.76256 7.82322 10.2374 7.82322 10.5303 7.53033L14.5303 3.53033C14.8232 3.23744 14.8232 2.76256 14.5303 2.46967C14.2374 2.17678 13.7626 2.17678 13.4697 2.46967L10 5.93934L6.53033 2.46967ZM5.46967 16.5696C5.17678 16.8625 5.17678 17.3374 5.46967 17.6303C5.76256 17.9232 6.23744 17.9232 6.53033 17.6303L10 14.1606L13.4697 17.6303C13.7626 17.9232 14.2374 17.9232 14.5303 17.6303C14.8232 17.3374 14.8232 16.8625 14.5303 16.5696L10.5303 12.5696C10.2374 12.2768 9.76256 12.2768 9.46967 12.5696L5.46967 16.5696Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nCollapse.displayName = 'Collapse';\nexport default Collapse;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/CollapseHorizontally.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface CollapseHorizontallyProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst CollapseHorizontally: React.FC<CollapseHorizontallyProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M4.366 15.636A7.97 7.97 0 1 1 15.638 4.364 7.97 7.97 0 0 1 4.366 15.636ZM3.53 10a6.47 6.47 0 1 0 12.942 0A6.47 6.47 0 0 0 3.53 10Z\" fillRule=\"evenodd\" clipRule=\"evenodd\"\n    />\n    <path d=\"M5.996 7.19a.75.75 0 0 1 1.06.048l1.951 2.14a.883.883 0 0 1 .001 1.216l-1.95 2.152a.75.75 0 0 1-1.112-1.008l1.587-1.75-1.585-1.74a.75.75 0 0 1 .048-1.059Zm8.01 5.608a.75.75 0 0 1-1.06-.052l-1.95-2.152a.884.884 0 0 1 0-1.217l1.952-2.139a.75.75 0 1 1 1.108 1.011L12.47 9.987l1.588 1.751a.75.75 0 0 1-.052 1.06Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nCollapseHorizontally.displayName = 'CollapseHorizontally';\nexport default CollapseHorizontally;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/CollapseRound.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface CollapseRoundProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst CollapseRound: React.FC<CollapseRoundProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M4.343 4.343a8 8 0 1 1 11.314 11.314A8 8 0 0 1 4.343 4.343ZM10 3.506a6.494 6.494 0 1 0 0 12.988 6.494 6.494 0 0 0 0-12.988Z\" fillRule=\"evenodd\" clipRule=\"evenodd\"\n    />\n    <path d=\"M12.821 5.98a.753.753 0 0 1-.049 1.063l-2.147 1.958a.885.885 0 0 1-1.221.002l-2.16-1.958a.753.753 0 0 1 1.011-1.116l1.757 1.593 1.745-1.591a.753.753 0 0 1 1.064.049Zm-5.629 8.038a.753.753 0 0 1 .052-1.063l2.16-1.958a.885.885 0 0 1 1.221.001l2.147 1.959a.753.753 0 1 1-1.015 1.112l-1.744-1.592-1.758 1.594a.753.753 0 0 1-1.063-.053Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nCollapseRound.displayName = 'CollapseRound';\nexport default CollapseRound;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Column.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ColumnProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Column: React.FC<ColumnProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M6 4.5H4C3.72386 4.5 3.5 4.72386 3.5 5V15C3.5 15.2761 3.72386 15.5 4 15.5H6L6 4.5ZM7.5 4.5L7.5 15.5H16C16.2761 15.5 16.5 15.2761 16.5 15V5C16.5 4.72386 16.2761 4.5 16 4.5H7.5ZM4 3C2.89543 3 2 3.89543 2 5V15C2 16.1046 2.89543 17 4 17H16C17.1046 17 18 16.1046 18 15V5C18 3.89543 17.1046 3 16 3H4ZM12 6H15V14H12V6Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nColumn.displayName = 'Column';\nexport default Column;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Comment.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface CommentProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Comment: React.FC<CommentProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M3.71278 3.5C3.65814 3.5 3.60485 3.52177 3.56489 3.56193C3.52478 3.60223 3.50147 3.65781 3.50147 3.71667V12.3833C3.50147 12.4422 3.52478 12.4978 3.56489 12.5381C3.60486 12.5782 3.65814 12.6 3.71278 12.6H6.63786C7.05248 12.6 7.3886 12.9358 7.3886 13.35V15.4208L9.95142 12.8235C10.0925 12.6805 10.2851 12.6 10.4861 12.6H16.2872C16.3419 12.6 16.3951 12.5782 16.4351 12.5381C16.4752 12.4978 16.4985 12.4422 16.4985 12.3833V3.71667C16.4985 3.65781 16.4752 3.60224 16.4351 3.56193C16.3951 3.52177 16.3419 3.5 16.2872 3.5H3.71278ZM2.50014 2.50433C2.82101 2.18192 3.25712 2 3.71278 2H16.2872C16.7429 2 17.179 2.18192 17.4999 2.50433C17.8206 2.8266 18 3.26277 18 3.71667V12.3833C18 12.8372 17.8206 13.2734 17.4999 13.5957C17.179 13.9181 16.7429 14.1 16.2872 14.1H10.8002L7.34389 17.7422C6.80968 18.2836 5.88713 17.9057 5.88713 17.1455V14.1H3.71278C3.25712 14.1 2.82101 13.9181 2.50014 13.5957C2.17941 13.2734 2 12.8372 2 12.3833V3.71667C2 3.26277 2.17941 2.8266 2.50014 2.50433ZM4.88615 6.7875C4.88615 6.37328 5.22226 6.0375 5.63688 6.0375H14.2953C14.71 6.0375 15.0461 6.37328 15.0461 6.7875C15.0461 7.20171 14.71 7.5375 14.2953 7.5375H5.63688C5.22226 7.5375 4.88615 7.20171 4.88615 6.7875ZM4.88615 9.75781C4.88615 9.3436 5.22226 9.00781 5.63688 9.00781H12.3712C12.7859 9.00781 13.122 9.3436 13.122 9.75781C13.122 10.172 12.7859 10.5078 12.3712 10.5078H5.63688C5.22226 10.5078 4.88615 10.172 4.88615 9.75781Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nComment.displayName = 'Comment';\nexport default Comment;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Completed.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface CompletedProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Completed: React.FC<CompletedProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M15.2851 13.7726C16.071 12.6717 16.4935 11.3527 16.4935 10H16.5H17.9935H18C18 10.506 17.952 11.0081 17.8581 11.5C17.6427 12.6284 17.1856 13.7033 16.5113 14.6479C15.5431 16.0043 14.1754 17.0245 12.5993 17.566C11.0231 18.1074 9.31726 18.1432 7.71984 17.6682C6.12242 17.1932 4.71323 16.2312 3.68904 14.9165C2.66485 13.6018 2.0768 12.0001 2.00702 10.335C1.93724 8.66991 2.3892 7.0246 3.29979 5.62883C4.21038 4.23306 5.53414 3.15651 7.08621 2.54951C8.16708 2.1268 9.3211 1.94651 10.4679 2.01369C10.9675 2.04296 11.4656 2.11917 11.9558 2.24275L11.9571 2.24308L11.9555 2.24938L11.5901 3.6975L11.5885 3.70381C10.2769 3.37289 8.89471 3.45985 7.63492 3.95254C6.37512 4.44523 5.30064 5.31905 4.56153 6.45198C3.82241 7.58491 3.45556 8.92038 3.5122 10.2719C3.56884 11.6234 4.04615 12.9235 4.87747 13.9906C5.7088 15.0578 6.85262 15.8386 8.14922 16.2242C9.44583 16.6097 10.8305 16.5807 12.1098 16.1412C13.3891 15.7017 14.4992 14.8736 15.2851 13.7726ZM17.0496 5.01034C17.3315 4.70681 17.3139 4.23226 17.0104 3.95041C16.7068 3.66856 16.2323 3.68613 15.9504 3.98967L10.0305 10.365L8.07619 8.01987C7.81101 7.70166 7.33809 7.65867 7.01988 7.92384C6.70168 8.18901 6.65868 8.66194 6.92386 8.98014L9.42386 11.9801C9.56185 12.1457 9.76443 12.244 9.97991 12.2497C10.1954 12.2555 10.4029 12.1683 10.5496 12.0103L17.0496 5.01034Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nCompleted.displayName = 'Completed';\nexport default Completed;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Connect.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ConnectProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Connect: React.FC<ConnectProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M15.25 5.81066L4.03033 17.0303C3.73744 17.3232 3.26256 17.3232 2.96967 17.0303C2.67678 16.7374 2.67678 16.2626 2.96967 15.9697L14.1893 4.75L15.25 5.81066Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M7.75 4C7.75 3.58579 8.08579 3.25 8.5 3.25H16C16.4142 3.25 16.75 3.58579 16.75 4V11.5C16.75 11.9142 16.4142 12.25 16 12.25C15.5858 12.25 15.25 11.9142 15.25 11.5V5.81066L14.1893 4.75H8.5C8.08579 4.75 7.75 4.41421 7.75 4Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nConnect.displayName = 'Connect';\nexport default Connect;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/ConnectedDoc.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ConnectedDocProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst ConnectedDoc: React.FC<ConnectedDocProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M16.4033 7.62725C16.4049 7.60733 16.4057 7.58719 16.4057 7.56686C16.4057 7.54653 16.4049 7.5264 16.4033 7.50648V7.483C16.4032 7.02626 16.2217 6.58807 15.8988 6.265L12.0884 2.45456C11.7653 2.1317 11.3271 1.95029 10.8704 1.9502H4.97333C4.51628 1.9502 4.07794 2.13176 3.75475 2.45495C3.43157 2.77814 3.25 3.21647 3.25 3.67353V16.3269C3.25 16.7839 3.43157 17.2223 3.75475 17.5454C4.07794 17.8686 4.51627 18.0502 4.97333 18.0502H10.6562C10.1983 17.6482 9.82007 17.1365 9.5529 16.5502H4.97333C4.9141 16.5502 4.8573 16.5267 4.81541 16.4848C4.77353 16.4429 4.75 16.3861 4.75 16.3269V3.67353C4.75 3.6143 4.77353 3.55749 4.81541 3.51561C4.8573 3.47372 4.9141 3.4502 4.97333 3.4502L10.0391 3.50488V6.59353C10.0391 7.05059 10.2206 7.48892 10.5438 7.81211C10.867 8.1353 11.3053 8.31686 11.7624 8.31686H14V8.31512H16.4033V7.62725ZM11.5391 4.02658L14.3293 6.81686H11.7624C11.7032 6.81686 11.6464 6.79333 11.6045 6.75145C11.5626 6.70956 11.5391 6.65276 11.5391 6.59353V4.02658Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M5.91895 10.6002C5.91895 10.1859 6.25473 9.85016 6.66895 9.85016H9.90625C10.3205 9.85016 10.6562 10.1859 10.6562 10.6002 10.6562 11.0144 10.3205 11.3502 9.90625 11.3502H6.66895C6.25473 11.3502 5.91895 11.0144 5.91895 10.6002zM5.9191 13.8002C5.9191 13.3859 6.25489 13.0502 6.6691 13.0502H7.92565C8.33986 13.0502 8.67565 13.3859 8.67565 13.8002 8.67565 14.2144 8.33986 14.5502 7.92565 14.5502H6.6691C6.25489 14.5502 5.9191 14.2144 5.9191 13.8002z\"\n      fill=\"currentColor\" />\n    <mask id=\"path-2-outside-1_360_5868\" maskUnits=\"userSpaceOnUse\" x=\"10.082\" y=\"11.177\" width=\"10\" height=\"7\" fill=\"currentColor\">\n      <path fill=\"#fff\" d=\"M10.082 11.177H20.082V18.177H10.082z\" />\n      <path d=\"M13.8961 12.1768C14.1167 12.1768 14.2956 12.3556 14.2956 12.5763C14.2956 12.797 14.1167 12.9759 13.8961 12.9759H13.6297C12.6643 12.9759 11.8816 13.7585 11.8816 14.7239C11.8816 15.6894 12.6643 16.472 13.6297 16.472H13.8961C14.1167 16.472 14.2956 16.6509 14.2956 16.8716C14.2956 17.0922 14.1167 17.2711 13.8961 17.2711H13.6297C12.2229 17.2711 11.0825 16.1307 11.0825 14.7239C11.0825 13.3172 12.2229 12.1768 13.6297 12.1768H13.8961ZM16.3766 12.5763C16.3766 12.3556 16.5555 12.1768 16.7762 12.1768H17.0259C18.4326 12.1768 19.5731 13.3172 19.5731 14.7239C19.5731 16.1307 18.4326 17.2711 17.0259 17.2711H16.7762C16.5555 17.2711 16.3766 17.0922 16.3766 16.8716C16.3766 16.6509 16.5555 16.472 16.7762 16.472H17.0259C17.9913 16.472 18.7739 15.6894 18.7739 14.7239C18.7739 13.7585 17.9913 12.9759 17.0259 12.9759H16.7762C16.5555 12.9759 16.3766 12.797 16.3766 12.5763ZM13.1216 14.7156C13.1216 14.4949 13.3005 14.316 13.5211 14.316H17.1183C17.3389 14.316 17.5178 14.4949 17.5178 14.7156C17.5178 14.9362 17.3389 15.1151 17.1183 15.1151H13.5211C13.3005 15.1151 13.1216 14.9362 13.1216 14.7156Z\"\n        fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    </mask>\n    <path d=\"M13.8961 12.1768C14.1167 12.1768 14.2956 12.3556 14.2956 12.5763C14.2956 12.797 14.1167 12.9759 13.8961 12.9759H13.6297C12.6643 12.9759 11.8816 13.7585 11.8816 14.7239C11.8816 15.6894 12.6643 16.472 13.6297 16.472H13.8961C14.1167 16.472 14.2956 16.6509 14.2956 16.8716C14.2956 17.0922 14.1167 17.2711 13.8961 17.2711H13.6297C12.2229 17.2711 11.0825 16.1307 11.0825 14.7239C11.0825 13.3172 12.2229 12.1768 13.6297 12.1768H13.8961ZM16.3766 12.5763C16.3766 12.3556 16.5555 12.1768 16.7762 12.1768H17.0259C18.4326 12.1768 19.5731 13.3172 19.5731 14.7239C19.5731 16.1307 18.4326 17.2711 17.0259 17.2711H16.7762C16.5555 17.2711 16.3766 17.0922 16.3766 16.8716C16.3766 16.6509 16.5555 16.472 16.7762 16.472H17.0259C17.9913 16.472 18.7739 15.6894 18.7739 14.7239C18.7739 13.7585 17.9913 12.9759 17.0259 12.9759H16.7762C16.5555 12.9759 16.3766 12.797 16.3766 12.5763ZM13.1216 14.7156C13.1216 14.4949 13.3005 14.316 13.5211 14.316H17.1183C17.3389 14.316 17.5178 14.4949 17.5178 14.7156C17.5178 14.9362 17.3389 15.1151 17.1183 15.1151H13.5211C13.3005 15.1151 13.1216 14.9362 13.1216 14.7156Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M14.5087 12.5763C14.5087 12.238 14.2344 11.9637 13.8961 11.9637V12.3899C13.999 12.3899 14.0825 12.4733 14.0825 12.5763H14.5087ZM13.8961 13.189C14.2344 13.189 14.5087 12.9147 14.5087 12.5763H14.0825C14.0825 12.6793 13.999 12.7628 13.8961 12.7628V13.189ZM13.6297 13.189H13.8961V12.7628H13.6297V13.189ZM12.0947 14.7239C12.0947 13.8762 12.782 13.189 13.6297 13.189V12.7628C12.5466 12.7628 11.6685 13.6408 11.6685 14.7239H12.0947ZM13.6297 16.2589C12.782 16.2589 12.0947 15.5717 12.0947 14.7239H11.6685C11.6685 15.8071 12.5466 16.6851 13.6297 16.6851V16.2589ZM13.8961 16.2589H13.6297V16.6851H13.8961V16.2589ZM14.5087 16.8716C14.5087 16.5332 14.2344 16.2589 13.8961 16.2589V16.6851C13.999 16.6851 14.0825 16.7686 14.0825 16.8716H14.5087ZM13.8961 17.4842C14.2344 17.4842 14.5087 17.2099 14.5087 16.8716H14.0825C14.0825 16.9745 13.999 17.058 13.8961 17.058V17.4842ZM13.6297 17.4842H13.8961V17.058H13.6297V17.4842ZM10.8694 14.7239C10.8694 16.2484 12.1052 17.4842 13.6297 17.4842V17.058C12.3406 17.058 11.2956 16.013 11.2956 14.7239H10.8694ZM13.6297 11.9637C12.1052 11.9637 10.8694 13.1995 10.8694 14.7239H11.2956C11.2956 13.4349 12.3406 12.3899 13.6297 12.3899V11.9637ZM13.8961 11.9637H13.6297V12.3899H13.8961V11.9637ZM16.7762 11.9637C16.4378 11.9637 16.1635 12.238 16.1635 12.5763H16.5897C16.5897 12.4733 16.6732 12.3899 16.7762 12.3899V11.9637ZM17.0259 11.9637H16.7762V12.3899H17.0259V11.9637ZM19.7862 14.7239C19.7862 13.1995 18.5503 11.9637 17.0259 11.9637V12.3899C18.315 12.3899 19.36 13.4349 19.36 14.7239H19.7862ZM17.0259 17.4842C18.5503 17.4842 19.7862 16.2484 19.7862 14.7239H19.36C19.36 16.013 18.315 17.058 17.0259 17.058V17.4842ZM16.7762 17.4842H17.0259V17.058H16.7762V17.4842ZM16.1635 16.8716C16.1635 17.2099 16.4378 17.4842 16.7762 17.4842V17.058C16.6732 17.058 16.5897 16.9745 16.5897 16.8716H16.1635ZM16.7762 16.2589C16.4378 16.2589 16.1635 16.5332 16.1635 16.8716H16.5897C16.5897 16.7686 16.6732 16.6851 16.7762 16.6851V16.2589ZM17.0259 16.2589H16.7762V16.6851H17.0259V16.2589ZM18.5608 14.7239C18.5608 15.5717 17.8736 16.2589 17.0259 16.2589V16.6851C18.109 16.6851 18.987 15.8071 18.987 14.7239H18.5608ZM17.0259 13.189C17.8736 13.189 18.5608 13.8762 18.5608 14.7239H18.987C18.987 13.6408 18.109 12.7628 17.0259 12.7628V13.189ZM16.7762 13.189H17.0259V12.7628H16.7762V13.189ZM16.1635 12.5763C16.1635 12.9147 16.4378 13.189 16.7762 13.189V12.7628C16.6732 12.7628 16.5897 12.6793 16.5897 12.5763H16.1635ZM13.5211 14.1029C13.1828 14.1029 12.9085 14.3772 12.9085 14.7156H13.3347C13.3347 14.6126 13.4182 14.5291 13.5211 14.5291V14.1029ZM17.1183 14.1029H13.5211V14.5291H17.1183V14.1029ZM17.7309 14.7156C17.7309 14.3772 17.4566 14.1029 17.1183 14.1029V14.5291C17.2213 14.5291 17.3047 14.6126 17.3047 14.7156H17.7309ZM17.1183 15.3282C17.4566 15.3282 17.7309 15.0539 17.7309 14.7156H17.3047C17.3047 14.8186 17.2213 14.902 17.1183 14.902V15.3282ZM13.5211 15.3282H17.1183V14.902H13.5211V15.3282ZM12.9085 14.7156C12.9085 15.0539 13.1828 15.3282 13.5211 15.3282V14.902C13.4182 14.902 13.3347 14.8186 13.3347 14.7156H12.9085Z\"\n      fill=\"currentColor\" mask=\"url(#path-2-outside-1_360_5868)\" />\n  </svg>\n);\nConnectedDoc.displayName = 'ConnectedDoc';\nexport default ConnectedDoc;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/ContentDirectory.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ContentDirectoryProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst ContentDirectory: React.FC<ContentDirectoryProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M2.25 5C2.25 3.48122 3.48122 2.25 5 2.25H13C14.5188 2.25 15.75 3.48122 15.75 5V8.33333C15.75 8.74755 15.4142 9.08333 15 9.08333C14.5858 9.08333 14.25 8.74755 14.25 8.33333V5C14.25 4.30964 13.6904 3.75 13 3.75H5C4.30964 3.75 3.75 4.30964 3.75 5V13.25H9C9.41421 13.25 9.75 13.5858 9.75 14C9.75 14.4142 9.41421 14.75 9 14.75H3.75V16C3.75 16.6904 4.30964 17.25 5 17.25H7.5C7.91421 17.25 8.25 17.5858 8.25 18C8.25 18.4142 7.91421 18.75 7.5 18.75H5C3.48122 18.75 2.25 17.5188 2.25 16V14V5ZM16.6638 9C16.1112 9 15.5813 9.21949 15.1906 9.6102L9.53375 15.2671C9.41899 15.3818 9.34455 15.5307 9.32161 15.6914L9.00754 17.8911C8.97417 18.1248 9.05277 18.3605 9.21968 18.5275C9.38659 18.6944 9.62234 18.773 9.85602 18.7396L12.0557 18.4255C12.2164 18.4026 12.3653 18.3281 12.48 18.2134L18.1369 12.5565C18.5276 12.1658 18.7471 11.6359 18.7471 11.0833C18.7471 10.5308 18.5276 10.0009 18.1369 9.6102C17.7462 9.21949 17.2163 9 16.6638 9ZM16.2513 10.6709C16.3607 10.5615 16.5091 10.5 16.6638 10.5C16.8185 10.5 16.9669 10.5615 17.0763 10.6709C17.1857 10.7803 17.2471 10.9286 17.2471 11.0833C17.2471 11.2381 17.1857 11.3864 17.0763 11.4958L11.5962 16.9759L10.6338 17.1133L10.7712 16.1509L16.2513 10.6709Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nContentDirectory.displayName = 'ContentDirectory';\nexport default ContentDirectory;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/ConvertToItem.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ConvertToItemProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst ConvertToItem: React.FC<ConvertToItemProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M17.0835 17.75C17.4977 17.75 17.8335 17.4142 17.8335 17C17.8335 16.5858 17.4977 16.25 17.0835 16.25H11.6668C9.68781 16.25 8.0835 14.6457 8.0835 12.6667V4.8109L11.1362 7.86358C11.4291 8.15648 11.9039 8.15648 12.1968 7.86358C12.4897 7.57069 12.4897 7.09581 12.1968 6.80292L7.8635 2.46959C7.57061 2.17669 7.09573 2.17669 6.80284 2.46959L2.46951 6.80292C2.17661 7.09581 2.17661 7.57069 2.46951 7.86358C2.7624 8.15648 3.23727 8.15648 3.53017 7.86358L6.5835 4.81025V12.6667C6.5835 15.4741 8.85938 17.75 11.6668 17.75H17.0835Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nConvertToItem.displayName = 'ConvertToItem';\nexport default ConvertToItem;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/ConvertToSubitem.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ConvertToSubitemProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst ConvertToSubitem: React.FC<ConvertToSubitemProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M2.9165 2.25C2.50229 2.25 2.1665 2.58579 2.1665 3C2.1665 3.41421 2.50229 3.75 2.9165 3.75H8.33317C10.3122 3.75 11.9165 5.35431 11.9165 7.33333V15.1891L8.86383 12.1364C8.57093 11.8435 8.09606 11.8435 7.80317 12.1364C7.51027 12.4293 7.51027 12.9042 7.80317 13.1971L12.1365 17.5304C12.4294 17.8233 12.9043 17.8233 13.1972 17.5304L17.5305 13.1971C17.8234 12.9042 17.8234 12.4293 17.5305 12.1364C17.2376 11.8435 16.7627 11.8435 16.4698 12.1364L13.4165 15.1897V7.33333C13.4165 4.52589 11.1406 2.25 8.33317 2.25H2.9165Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nConvertToSubitem.displayName = 'ConvertToSubitem';\nexport default ConvertToSubitem;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Counter.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface CounterProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Counter: React.FC<CounterProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <g fill=\"currentColor\" clipPath=\"url(#clip0)\">\n      <path d=\"M4.86947 8.59888H3.56146V3.55694L2 4.04122V2.97761L4.72917 2H4.86947V8.59888zM11.7107 13.3678H7.19375V12.4717L9.32549 10.1997C9.61817 9.87983 9.83391 9.60072 9.97271 9.36236 10.1145 9.12399 10.1854 8.89769 10.1854 8.68346 10.1854 8.39078 10.1115 8.16146 9.96365 7.99551 9.81581 7.82654 9.60459 7.74205 9.33002 7.74205 9.03432 7.74205 8.80048 7.84464 8.62849 8.04982 8.45952 8.25198 8.37503 8.51901 8.37503 8.85092H7.0625C7.0625 8.44962 7.15755 8.08301 7.34764 7.75111 7.54075 7.4192 7.8123 7.15971 8.16231 6.97264 8.51232 6.78255 8.9091 6.6875 9.35265 6.6875 10.0315 6.6875 10.5581 6.85044 10.9322 7.17631 11.3094 7.50218 11.498 7.96232 11.498 8.55673 11.498 8.8826 11.4135 9.21451 11.2445 9.55245 11.0755 9.89039 10.7859 10.2841 10.3755 10.7337L8.87742 12.3133H11.7107V13.3678zM14.9265 14.0561H15.6235C15.9555 14.0561 16.2014 13.9731 16.3613 13.8072 16.5212 13.6412 16.6012 13.421 16.6012 13.1464 16.6012 12.8809 16.5212 12.6742 16.3613 12.5263 16.2044 12.3785 15.9871 12.3046 15.7095 12.3046 15.4591 12.3046 15.2494 12.374 15.0804 12.5127 14.9115 12.6485 14.827 12.8266 14.827 13.0468H13.519C13.519 12.7028 13.611 12.3951 13.7951 12.1235 13.9821 11.8489 14.2416 11.6347 14.5735 11.4808 14.9084 11.3269 15.2766 11.25 15.6779 11.25 16.3749 11.25 16.921 11.4175 17.3163 11.7524 17.7115 12.0843 17.9092 12.5429 17.9092 13.1283 17.9092 13.43 17.8171 13.7076 17.6331 13.9611 17.449 14.2145 17.2076 14.4091 16.9089 14.5449 17.2801 14.6777 17.5561 14.8768 17.7372 15.1423 17.9212 15.4079 18.0133 15.7217 18.0133 16.0837 18.0133 16.6691 17.799 17.1383 17.3706 17.4913 16.9451 17.8444 16.3809 18.0209 15.6779 18.0209 15.0201 18.0209 14.4815 17.8474 14.0621 17.5004 13.6457 17.1534 13.4375 16.6948 13.4375 16.1245H14.7455C14.7455 16.3719 14.8375 16.5741 15.0216 16.731 15.2087 16.8879 15.438 16.9663 15.7095 16.9663 16.0203 16.9663 16.2632 16.8848 16.4382 16.7219 16.6162 16.556 16.7053 16.3372 16.7053 16.0656 16.7053 15.4079 16.3432 15.079 15.619 15.079H14.9265V14.0561z\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"clip0\">\n        <path transform=\"translate(2 2)\" d=\"M0 0H16V16H0z\" />\n      </clipPath>\n    </defs>\n  </svg>\n);\nCounter.displayName = 'Counter';\nexport default Counter;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Country.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface CountryProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Country: React.FC<CountryProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M16.7831 4.0241C16.6867 3.83133 16.494 3.73494 16.3976 3.63855C16.2048 3.54217 16.012 3.44578 15.8193 3.44578C15.6265 3.44578 15.4337 3.44578 15.241 3.44578L13.8916 3.73494C13.3133 3.92771 12.6386 3.92771 12.0602 3.83133C11.3855 3.73494 10.8072 3.54217 10.2289 3.25301C9.45783 2.96386 8.68675 2.6747 7.81928 2.57831C6.95181 2.48193 6.08434 2.57831 5.31325 2.77108L4.44578 2.96386V2.77108C4.44578 2.28916 4.15663 2 3.77108 2C3.38554 2 3 2.28916 3 2.77108V3.92771V11.253V17.2289C3 17.6145 3.28916 18 3.77108 18C4.25301 18 4.54217 17.7108 4.54217 17.2289V11.8313L5.79518 11.5422C6.46988 11.3494 7.14458 11.3494 7.81928 11.3494C8.49398 11.4458 9.07229 11.6386 9.6506 11.9277C10.3253 12.3133 11.1928 12.506 11.9639 12.6024C12.253 12.6024 12.5422 12.6024 12.7349 12.6024C13.3133 12.6024 13.7952 12.506 14.3735 12.4096L16.012 12.0241C16.3012 11.9277 16.494 11.8313 16.6867 11.6386C16.8795 11.4458 16.9759 11.1566 16.9759 10.8675V4.6988C16.9759 4.40964 16.8795 4.21687 16.7831 4.0241ZM15.5301 10.6747L13.988 11.0602C13.3133 11.253 12.7349 11.253 12.0602 11.1566C11.3855 11.0602 10.8072 10.8675 10.2289 10.5783C9.45783 10.1928 8.68675 9.90361 7.81928 9.80723C7.53012 9.80723 7.33735 9.80723 7.04819 9.80723C6.46988 9.80723 5.89157 9.90361 5.31325 10L4.44578 10.1928V4.40964L5.6988 4.12048C6.27711 4.0241 6.95181 3.92771 7.62651 4.0241C8.3012 4.12048 8.87952 4.31325 9.45783 4.60241C10.1325 4.98795 11 5.18072 11.7711 5.27711C12.6386 5.37349 13.4096 5.27711 14.2771 5.08434L15.5301 4.79518V10.6747Z\"\n      fill=\"currentColor\" />\n  </svg>\n);\nCountry.displayName = 'Country';\nexport default Country;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/CreditCard.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface CreditCardProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst CreditCard: React.FC<CreditCardProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M2 4.7998C2 4.38559 2.33579 4.0498 2.75 4.0498H17.2553C17.6695 4.0498 18.0053 4.38559 18.0053 4.7998V8.70508V15.3998C18.0053 15.814 17.6695 16.1498 17.2553 16.1498H2.75C2.33579 16.1498 2 15.814 2 15.3998V8.70508V4.7998ZM16.5053 5.5498V7.95508H3.5V5.5498H16.5053ZM16.5053 9.45508H3.5V14.6498H16.5053V9.45508ZM5.53906 12.4185C5.12485 12.4185 4.78906 12.7542 4.78906 13.1685C4.78906 13.5827 5.12485 13.9185 5.53906 13.9185H6.09696C6.51117 13.9185 6.84696 13.5827 6.84696 13.1685C6.84696 12.7542 6.51117 12.4185 6.09696 12.4185H5.53906Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nCreditCard.displayName = 'CreditCard';\nexport default CreditCard;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Custom.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface CustomProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Custom: React.FC<CustomProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M8.94999 11C8.71836 12.1411 7.70948 13 6.5 13 5.29052 13 4.28164 12.1411 4.05001 11H2.75C2.33579 11 2 10.6642 2 10.25 2 9.83579 2.33579 9.5 2.75 9.5H4.20802C4.5938 8.61705 5.47484 8 6.5 8 7.52516 8 8.4062 8.61705 8.79198 9.5H17.25C17.6642 9.5 18 9.83579 18 10.25 18 10.6642 17.6642 11 17.25 11H8.94999zM6.5 11.5C7.05228 11.5 7.5 11.0523 7.5 10.5 7.5 9.94772 7.05228 9.5 6.5 9.5 5.94772 9.5 5.5 9.94772 5.5 10.5 5.5 11.0523 5.94772 11.5 6.5 11.5zM11.05 4C11.2816 2.85888 12.2905 2 13.5 2 14.7095 2 15.7184 2.85888 15.95 4L17.25 4C17.6642 4 18 4.33579 18 4.75 18 5.16421 17.6642 5.5 17.25 5.5L15.792 5.5C15.4062 6.38295 14.5252 7 13.5 7 12.4748 7 11.5938 6.38295 11.208 5.5L2.75 5.5C2.33579 5.5 2 5.16421 2 4.75 2 4.33579 2.33579 4 2.75 4L11.05 4zM13.5 3.5C12.9477 3.5 12.5 3.94772 12.5 4.5 12.5 5.05228 12.9477 5.5 13.5 5.5 14.0523 5.5 14.5 5.05228 14.5 4.5 14.5 3.94772 14.0523 3.5 13.5 3.5zM11.05 15C11.2816 13.8589 12.2905 13 13.5 13 14.7095 13 15.7184 13.8589 15.95 15L17.25 15C17.6642 15 18 15.3358 18 15.75 18 16.1642 17.6642 16.5 17.25 16.5L15.792 16.5C15.4062 17.383 14.5252 18 13.5 18 12.4748 18 11.5938 17.383 11.208 16.5L2.75 16.5C2.33579 16.5 2 16.1642 2 15.75 2 15.3358 2.33579 15 2.75 15L11.05 15zM13.5 14.5C12.9477 14.5 12.5 14.9477 12.5 15.5 12.5 16.0523 12.9477 16.5 13.5 16.5 14.0523 16.5 14.5 16.0523 14.5 15.5 14.5 14.9477 14.0523 14.5 13.5 14.5z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nCustom.displayName = 'Custom';\nexport default Custom;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Cut.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface CutProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Cut: React.FC<CutProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M2.85584 12.6768C2.97934 12.5533 3.11208 12.4412 3.25243 12.3411L4.0309 13.6266 6.52269 12.1138C6.80309 12.26 7.06225 12.4491 7.28999 12.6768 7.878 13.2648 8.20833 14.0623 8.20833 14.8939 8.20833 15.7254 7.878 16.523 7.28999 17.111 6.70199 17.699 5.90448 18.0293 5.07292 18.0293 4.24135 18.0293 3.44385 17.699 2.85584 17.111 2.26784 16.523 1.9375 15.7254 1.9375 14.8939 1.9375 14.0623 2.26784 13.2648 2.85584 12.6768zM5.07292 13.2585C4.63918 13.2585 4.2232 13.4308 3.9165 13.7375 3.6098 14.0442 3.4375 14.4601 3.4375 14.8939 3.4375 15.3276 3.6098 15.7436 3.9165 16.0503 4.2232 16.357 4.63918 16.5293 5.07292 16.5293 5.50666 16.5293 5.92263 16.357 6.22933 16.0503 6.53603 15.7436 6.70833 15.3276 6.70833 14.8939 6.70833 14.4601 6.53603 14.0442 6.22933 13.7375 5.92263 13.4308 5.50666 13.2585 5.07292 13.2585zM2.85584 3.13514C3.44385 2.54713 4.24135 2.2168 5.07292 2.2168 5.90448 2.2168 6.70199 2.54713 7.28999 3.13514 7.878 3.72314 8.20833 4.52065 8.20833 5.35221 8.20833 6.18378 7.878 6.98128 7.28999 7.56929 7.06225 7.79703 6.80309 7.98611 6.52269 8.13233L4.0309 6.61946 3.25243 7.90501C3.11208 7.80492 2.97934 7.69278 2.85584 7.56929 2.26784 6.98128 1.9375 6.18378 1.9375 5.35221 1.9375 4.52065 2.26784 3.72314 2.85584 3.13514zM5.07292 3.7168C4.63918 3.7168 4.2232 3.8891 3.9165 4.1958 3.6098 4.5025 3.4375 4.91847 3.4375 5.35221 3.4375 5.78595 3.6098 6.20193 3.9165 6.50863 4.2232 6.81533 4.63918 6.98763 5.07292 6.98763 5.50666 6.98763 5.92263 6.81533 6.22933 6.50863 6.53603 6.20193 6.70833 5.78595 6.70833 5.35221 6.70833 4.91847 6.53603 4.5025 6.22933 4.1958 5.92263 3.8891 5.50666 3.7168 5.07292 3.7168z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M3.25243 7.90164L4.0309 6.61946L6.52269 8.13233L8.35637 9.24564L8.35637 10.123H9.80152L17.3892 14.7299C17.7433 14.9448 17.8561 15.4061 17.6411 15.7602C17.4261 16.1143 16.9648 16.227 16.6108 16.0121L8.35637 11.0005V10.123L6.91123 10.123L3.25243 7.90164Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M17.6411 4.4859C17.8561 4.83996 17.7433 5.30125 17.3892 5.51622L9.80152 10.123H8.35637V11.0005L6.52269 12.1138L4.0309 13.6266L3.25243 12.3445L6.91123 10.123L8.35637 10.123L8.35637 9.24564L16.6108 4.23404C16.9648 4.01907 17.4261 4.13183 17.6411 4.4859Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nCut.displayName = 'Cut';\nexport default Cut;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Dashboard.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface DashboardProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Dashboard: React.FC<DashboardProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M4 3.5H16C16.2761 3.5 16.5 3.72386 16.5 4V16C16.5 16.2761 16.2761 16.5 16 16.5H4C3.72386 16.5 3.5 16.2761 3.5 16V4C3.5 3.72386 3.72386 3.5 4 3.5ZM2 4C2 2.89543 2.89543 2 4 2H16C17.1046 2 18 2.89543 18 4V16C18 17.1046 17.1046 18 16 18H4C2.89543 18 2 17.1046 2 16V4ZM5.5 14.25C5.5 14.6642 5.83579 15 6.25 15C6.66421 15 7 14.6642 7 14.25V10.75C7 10.3358 6.66421 10 6.25 10C5.83579 10 5.5 10.3358 5.5 10.75L5.5 14.25ZM10.25 15C9.83579 15 9.5 14.6642 9.5 14.25L9.5 7.75C9.5 7.33579 9.83579 7 10.25 7C10.6642 7 11 7.33579 11 7.75V14.25C11 14.6642 10.6642 15 10.25 15ZM13.5 14.25C13.5 14.6642 13.8358 15 14.25 15C14.6642 15 15 14.6642 15 14.25V5.75C15 5.33579 14.6642 5 14.25 5C13.8358 5 13.5 5.33579 13.5 5.75V14.25Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nDashboard.displayName = 'Dashboard';\nexport default Dashboard;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/DashboardPrivate.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface DashboardPrivateProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst DashboardPrivate: React.FC<DashboardPrivateProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M4.00012 2C2.89555 2 2.00012 2.89543 2.00012 4V16C2.00012 17.1046 2.89555 18 4.00012 18H10.0001V16.5H4.00012C3.72398 16.5 3.50012 16.2761 3.50012 16V4C3.50012 3.72386 3.72398 3.5 4.00012 3.5H16.0001C16.2763 3.5 16.5001 3.72386 16.5001 4V8.15342C17.0464 8.23781 17.5544 8.41921 18.0001 8.67655V4C18.0001 2.89543 17.1047 2 16.0001 2H4.00012ZM15.0001 5.75V8.16995C14.4509 8.26748 13.9425 8.46347 13.5001 8.73596V5.75C13.5001 5.33579 13.8359 5 14.2501 5C14.6643 5 15.0001 5.33579 15.0001 5.75ZM9.50012 14.25C9.50012 14.6642 9.83591 15 10.2501 15C10.6643 15 11.0001 14.6642 11.0001 14.25V7.75C11.0001 7.33579 10.6643 7 10.2501 7C9.83591 7 9.50012 7.33579 9.50012 7.75L9.50012 14.25ZM5.50012 14.25C5.50012 14.6642 5.83591 15 6.25012 15C6.66434 15 7.00012 14.6642 7.00012 14.25V10.75C7.00012 10.3358 6.66434 10 6.25012 10C5.83591 10 5.50012 10.3358 5.50012 10.75L5.50012 14.25ZM12.169 13.4775H12.8634V12.4648C12.8634 10.8274 14.1908 9.5 15.8282 9.5C17.4656 9.5 18.7929 10.8274 18.7929 12.4648V13.4775H19.492C19.7622 13.4775 19.9812 13.6965 19.9812 13.9667V19.5108C19.9812 19.781 19.7622 20 19.492 20H12.169C11.8988 20 11.6798 19.781 11.6798 19.5108V13.9667C11.6798 13.6965 11.8988 13.4775 12.169 13.4775ZM17.2929 12.4648V13.4775H14.3634V12.4648C14.3634 11.6558 15.0192 11 15.8282 11C16.6371 11 17.2929 11.6558 17.2929 12.4648Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nDashboardPrivate.displayName = 'DashboardPrivate';\nexport default DashboardPrivate;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Deactivate.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface DeactivateProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Deactivate: React.FC<DeactivateProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M16.5 10C16.5 13.5899 13.5899 16.5 10 16.5C8.47546 16.5 7.0735 15.9751 5.96497 15.0963L15.0964 5.96512C15.9752 7.07363 16.5 8.47552 16.5 10ZM4.90424 14.0357L14.0358 4.90436C12.9272 4.02511 11.5249 3.5 10 3.5C6.41015 3.5 3.5 6.41015 3.5 10C3.5 11.5248 4.02506 12.927 4.90424 14.0357ZM18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nDeactivate.displayName = 'Deactivate';\nexport default Deactivate;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Delete.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface DeleteProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Delete: React.FC<DeleteProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M8.30035 1.86462C7.77994 1.86462 7.29477 2.08976 6.94732 2.46719C6.60179 2.84253 6.41724 3.33927 6.41724 3.84552V4.32642H4.901H2.63477C2.22055 4.32642 1.88477 4.6622 1.88477 5.07642C1.88477 5.49063 2.22055 5.82642 2.63477 5.82642H4.151V16.1545C4.151 16.6608 4.33556 17.1575 4.68109 17.5328C5.02853 17.9103 5.51371 18.1354 6.03411 18.1354H13.9659C14.4863 18.1354 14.9715 17.9103 15.3189 17.5328C15.6645 17.1575 15.849 16.6608 15.849 16.1545V5.82642H17.3652C17.7794 5.82642 18.1152 5.49063 18.1152 5.07642C18.1152 4.6622 17.7794 4.32642 17.3652 4.32642H15.099H13.5828V3.84552C13.5828 3.33927 13.3982 2.84253 13.0527 2.46719C12.7053 2.08976 12.2201 1.86462 11.6997 1.86462H8.30035ZM7.16447 5.82642C7.16539 5.82642 7.16631 5.82642 7.16724 5.82642H12.8328C12.8337 5.82642 12.8346 5.82642 12.8356 5.82642H14.349V16.1545C14.349 16.3012 14.2948 16.4306 14.2153 16.5169C14.1378 16.6012 14.0465 16.6354 13.9659 16.6354H6.03411C5.95348 16.6354 5.86223 16.6012 5.78468 16.5169C5.7052 16.4306 5.651 16.3012 5.651 16.1545V5.82642H7.16447ZM12.0828 4.32642V3.84552C12.0828 3.69887 12.0286 3.56943 11.9491 3.4831C11.8716 3.39886 11.7803 3.36462 11.6997 3.36462H8.30035C8.21972 3.36462 8.12847 3.39886 8.05091 3.4831C7.97144 3.56943 7.91724 3.69887 7.91724 3.84552V4.32642L12.0828 4.32642Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nDelete.displayName = 'Delete';\nexport default Delete;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Dependency.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface DependencyProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Dependency: React.FC<DependencyProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M4.733 2c.505 0 1.002.11 1.464.318l.172.083c.394.204.75.478 1.053.809l.126.144c.286.346.515.74.676 1.166.182.484.273 1.002.27 1.522v4.919l.013.258c.058.597.306 1.149.691 1.562l.172.167a2.19 2.19 0 0 0 1.218.543l.222.012h4.433L13.266 11.8l-.056-.053a.755.755 0 0 1-.025-1.008.748.748 0 0 1 .996-.128l.06.047 3.497 3.009.059.057a.755.755 0 0 1-.059 1.085l-3.497 3.008-.06.048a.748.748 0 0 1-.996-.129.755.755 0 0 1 .025-1.007l.056-.053 1.94-1.67h-4.394A3.68 3.68 0 0 1 8.24 13.95l-.136-.14a4.197 4.197 0 0 1-1.102-2.641l-.006-.197V6.037a2.767 2.767 0 0 0-.098-.748l-.077-.237a2.585 2.585 0 0 0-.35-.64l-.153-.183a2.302 2.302 0 0 0-.536-.436l-.199-.103a2.092 2.092 0 0 0-.635-.174l-.217-.012H2.75A.75.75 0 0 1 2 2.752.75.75 0 0 1 2.749 2h1.984Z\"\n    />\n  </svg>\n);\nDependency.displayName = 'Dependency';\nexport default Dependency;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Description.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface DescriptionProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Description: React.FC<DescriptionProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M2.05 5.002a.75.75 0 0 1 .75-.75h14a.75.75 0 0 1 0 1.5h-14a.75.75 0 0 1-.75-.75Zm0 5a.75.75 0 0 1 .75-.75h14a.75.75 0 0 1 0 1.5h-14a.75.75 0 0 1-.75-.75Zm0 5a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5h-7a.75.75 0 0 1-.75-.75Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nDescription.displayName = 'Description';\nexport default Description;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/DisabledUser.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface DisabledUserProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst DisabledUser: React.FC<DisabledUserProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M8.75015 2.0498C8.24254 2.0498 7.7399 2.14979 7.27093 2.34404C6.80196 2.53829 6.37584 2.82302 6.01691 3.18195C5.65798 3.54088 5.37325 3.967 5.179 4.43597C4.98475 4.90494 4.88477 5.40758 4.88477 5.91519C4.88477 6.4228 4.98475 6.92544 5.179 7.39441C5.37325 7.86338 5.65798 8.28949 6.01691 8.64843C6.37584 9.00736 6.80196 9.29209 7.27093 9.48634C7.7399 9.68059 8.24254 9.78057 8.75015 9.78057C9.25776 9.78057 9.7604 9.68059 10.2294 9.48634C10.6983 9.29208 11.1245 9.00736 11.4834 8.64843C11.8423 8.28949 12.127 7.86338 12.3213 7.39441C12.5156 6.92544 12.6155 6.4228 12.6155 5.91519C12.6155 5.40758 12.5156 4.90494 12.3213 4.43597C12.127 3.967 11.8423 3.54088 11.4834 3.18195C11.1245 2.82302 10.6983 2.53829 10.2294 2.34404C9.7604 2.14979 9.25776 2.0498 8.75015 2.0498ZM7.84496 3.72986C8.13194 3.61099 8.43952 3.5498 8.75015 3.5498C9.06078 3.5498 9.36836 3.61099 9.65534 3.72986C9.94233 3.84873 10.2031 4.02296 10.4227 4.24261C10.6424 4.46226 10.8166 4.72301 10.9355 5.01C11.0544 5.29698 11.1155 5.60456 11.1155 5.91519C11.1155 6.22582 11.0544 6.5334 10.9355 6.82038C10.8166 7.10736 10.6424 7.36812 10.4227 7.58777C10.2031 7.80742 9.94232 7.98165 9.65534 8.10052C9.36836 8.21939 9.06078 8.28057 8.75015 8.28057C8.43952 8.28057 8.13194 8.21939 7.84496 8.10052C7.55798 7.98165 7.29722 7.80742 7.07757 7.58777C6.85792 7.36812 6.68369 7.10736 6.56482 6.82038C6.44595 6.5334 6.38477 6.22582 6.38477 5.91519C6.38477 5.60456 6.44595 5.29698 6.56482 5.01C6.68369 4.72301 6.85792 4.46226 7.07757 4.24261C7.29722 4.02296 7.55797 3.84873 7.84496 3.72986Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M8.37491 10.7305C8.36306 10.7305 8.3512 10.7307 8.33935 10.7312 7.20884 10.7762 6.1101 11.0767 5.14751 11.6041 4.18491 12.1314 3.39044 12.8682 2.83955 13.7443 2.2887 14.6203 1.9997 15.6068 2 16.6097V17.2981C2 17.6856 2.35443 17.9997 2.79163 17.9997H9.12014L9.12509 17.9997H9.203C9.67351 17.9997 9.96102 17.4465 9.78802 17.0089 9.69353 16.7699 9.47166 16.5965 9.21466 16.5965H9.12963L9.12469 16.5965H3.58328C3.58548 15.8372 3.80542 15.0907 4.22255 14.4273 4.64204 13.7602 5.24701 13.1992 5.97999 12.7977 6.70811 12.3988 7.53853 12.1703 8.39335 12.1337H9.10634C9.55476 12.1529 9.99646 12.2249 10.4202 12.3465 10.6558 12.4142 10.9063 12.3628 11.0942 12.2054 11.4963 11.8685 11.4913 11.1859 10.9888 11.0353 10.4024 10.8595 9.7888 10.7566 9.1655 10.7314 9.15198 10.7308 9.13838 10.7305 9.12469 10.7305H8.37491zM16.9973 14.2587C17.2902 13.9658 17.2902 13.4909 16.9973 13.198 16.7044 12.9051 16.2295 12.9051 15.9367 13.198L14.6992 14.4354 13.4618 13.198C13.1689 12.9051 12.694 12.9051 12.4011 13.198 12.1082 13.4909 12.1082 13.9658 12.4011 14.2587L13.6386 15.4961 12.4011 16.7335C12.1082 17.0264 12.1082 17.5013 12.4011 17.7942 12.694 18.0871 13.1689 18.0871 13.4618 17.7942L14.6992 16.5568 15.9367 17.7942C16.2295 18.0871 16.7044 18.0871 16.9973 17.7942 17.2902 17.5013 17.2902 17.0264 16.9973 16.7335L15.7599 15.4961 16.9973 14.2587z\"\n      fill=\"currentColor\" />\n  </svg>\n);\nDisabledUser.displayName = 'DisabledUser';\nexport default DisabledUser;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Divider.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface DividerProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Divider: React.FC<DividerProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M2.96484 9.57129C2.96484 9.15708 3.30063 8.82129 3.71484 8.82129H16.2863C16.7005 8.82129 17.0363 9.15708 17.0363 9.57129C17.0363 9.9855 16.7005 10.3213 16.2863 10.3213H3.71484C3.30063 10.3213 2.96484 9.9855 2.96484 9.57129Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nDivider.displayName = 'Divider';\nexport default Divider;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Doc.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface DocProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Doc: React.FC<DocProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M6.81934 9.8501C6.40512 9.8501 6.06934 10.1859 6.06934 10.6001 6.06934 11.0143 6.40512 11.3501 6.81934 11.3501H12.8413C13.2555 11.3501 13.5913 11.0143 13.5913 10.6001 13.5913 10.1859 13.2555 9.8501 12.8413 9.8501H6.81934zM6.81953 13.0501C6.40531 13.0501 6.06953 13.3859 6.06953 13.8001 6.06953 14.2143 6.40531 14.5501 6.81953 14.5501H10.6828C11.097 14.5501 11.4328 14.2143 11.4328 13.8001 11.4328 13.3859 11.097 13.0501 10.6828 13.0501H6.81953z\"\n      fill=\"currentColor\" />\n    <path d=\"M16.5561 7.56686C16.5561 7.58719 16.5553 7.60733 16.5537 7.62725V16.3269C16.5537 16.7839 16.3722 17.2223 16.049 17.5454C15.7258 17.8686 15.2874 18.0502 14.8304 18.0502H5.12372C4.66667 18.0502 4.22833 17.8686 3.90514 17.5454C3.58196 17.2223 3.40039 16.7839 3.40039 16.3269V3.67353C3.40039 3.21647 3.58196 2.77814 3.90514 2.45495C4.22833 2.13176 4.66667 1.9502 5.12372 1.9502H11.0208C11.4775 1.95029 11.9157 2.1317 12.2387 2.45456L16.0492 6.265C16.372 6.58807 16.5536 7.02626 16.5537 7.483V7.50648C16.5553 7.5264 16.5561 7.54653 16.5561 7.56686ZM5.12372 3.4502C5.06449 3.4502 5.00769 3.47372 4.9658 3.51561C4.92392 3.55749 4.90039 3.6143 4.90039 3.67353V16.3269C4.90039 16.3861 4.92392 16.4429 4.9658 16.4848C5.00769 16.5267 5.06449 16.5502 5.12372 16.5502H14.8304C14.8896 16.5502 14.9464 16.5267 14.9883 16.4848C15.0302 16.4429 15.0537 16.3861 15.0537 16.3269V8.31686H11.9128C11.4557 8.31686 11.0174 8.1353 10.6942 7.81211C10.371 7.48892 10.1895 7.05059 10.1895 6.59353V3.50488L5.12372 3.4502ZM14.4797 6.81686L11.6895 4.02658V6.59353C11.6895 6.65276 11.713 6.70956 11.7549 6.75145C11.7967 6.79333 11.8536 6.81686 11.9128 6.81686H14.4797Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nDoc.displayName = 'Doc';\nexport default Doc;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/DocPrivate.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface DocPrivateProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst DocPrivate: React.FC<DocPrivateProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M16.4057 7.56686C16.4057 7.58719 16.4049 7.60733 16.4033 7.62725V8.31519H14V8.31686H11.7624C11.3053 8.31686 10.867 8.1353 10.5438 7.81211C10.2206 7.48892 10.0391 7.05059 10.0391 6.59353V3.50488L4.97333 3.4502C4.9141 3.4502 4.8573 3.47372 4.81541 3.51561C4.77353 3.55749 4.75 3.6143 4.75 3.67353V16.3269C4.75 16.3861 4.77353 16.4429 4.81541 16.4848C4.8573 16.5267 4.9141 16.5502 4.97333 16.5502H10.3008V18.0502H4.97333C4.51627 18.0502 4.07794 17.8686 3.75475 17.5454C3.43157 17.2223 3.25 16.7839 3.25 16.3269V3.67353C3.25 3.21647 3.43157 2.77814 3.75475 2.45495C4.07794 2.13176 4.51628 1.9502 4.97333 1.9502H10.8704C11.3271 1.95029 11.7653 2.1317 12.0884 2.45456L15.8988 6.265C16.2217 6.58807 16.4032 7.02626 16.4033 7.483V7.50648C16.4049 7.5264 16.4057 7.54653 16.4057 7.56686ZM14.3293 6.81686L11.5391 4.02658V6.59353C11.5391 6.65276 11.5626 6.70956 11.6045 6.75145C11.6464 6.79333 11.7032 6.81686 11.7624 6.81686H14.3293Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M6.66895 9.85016C6.25473 9.85016 5.91895 10.1859 5.91895 10.6002 5.91895 11.0144 6.25473 11.3502 6.66895 11.3502H11C11.4142 11.3502 11.75 11.0144 11.75 10.6002 11.75 10.1859 11.4142 9.85016 11 9.85016H6.66895zM5.9191 13.8002C5.9191 13.3859 6.25489 13.0502 6.6691 13.0502H9C9.41421 13.0502 9.75 13.3859 9.75 13.8002 9.75 14.2144 9.41421 14.5502 9 14.5502H6.6691C6.25489 14.5502 5.9191 14.2144 5.9191 13.8002z\"\n      fill=\"currentColor\" />\n    <path d=\"M12.1689 13.4777H12.8633V12.465C12.8633 10.8276 14.1907 9.50018 15.8281 9.50018C17.4654 9.50018 18.7928 10.8276 18.7928 12.465V13.4777H19.4919C19.762 13.4777 19.981 13.6967 19.981 13.9668V19.511C19.981 19.7811 19.762 20.0002 19.4919 20.0002H12.1689C11.8987 20.0002 11.6797 19.7811 11.6797 19.511V13.9668C11.6797 13.6967 11.8987 13.4777 12.1689 13.4777ZM17.2928 12.465V13.4777H14.3633V12.465C14.3633 11.656 15.0191 11.0002 15.8281 11.0002C16.637 11.0002 17.2928 11.656 17.2928 12.465Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nDocPrivate.displayName = 'DocPrivate';\nexport default DocPrivate;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/DocShareable.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface DocShareableProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst DocShareable: React.FC<DocShareableProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M16.4033 7.62725C16.4049 7.60733 16.4057 7.58719 16.4057 7.56686C16.4057 7.54653 16.4049 7.5264 16.4033 7.50648V7.483C16.4032 7.02626 16.2217 6.58807 15.8988 6.265L12.0884 2.45456C11.7653 2.1317 11.3271 1.95029 10.8704 1.9502H4.97333C4.51628 1.9502 4.07794 2.13176 3.75475 2.45495C3.43157 2.77814 3.25 3.21647 3.25 3.67353V16.3269C3.25 16.7839 3.43157 17.2223 3.75475 17.5454C4.07794 17.8686 4.51627 18.0502 4.97333 18.0502H9.54158C9.08358 17.6482 8.70539 17.1365 8.43823 16.5502H4.97333C4.9141 16.5502 4.8573 16.5267 4.81541 16.4848C4.77353 16.4429 4.75 16.3861 4.75 16.3269V3.67353C4.75 3.6143 4.77353 3.55749 4.81541 3.51561C4.8573 3.47372 4.9141 3.4502 4.97333 3.4502L10.0391 3.50488V6.59353C10.0391 7.05059 10.2206 7.48892 10.5438 7.81211C10.867 8.1353 11.3053 8.31686 11.7624 8.31686H14V8.31512H16.4033V7.62725ZM11.5391 4.02658L14.3293 6.81686H11.7624C11.7032 6.81686 11.6464 6.79333 11.6045 6.75145C11.5626 6.70956 11.5391 6.65276 11.5391 6.59353V4.02658ZM5.91895 10.6002C5.91895 10.1859 6.25473 9.85016 6.66895 9.85016H11.5C11.9142 9.85016 12.25 10.1859 12.25 10.6002C12.25 11.0144 11.9142 11.3502 11.5 11.3502H6.66895C6.25473 11.3502 5.91895 11.0144 5.91895 10.6002ZM6.6691 13.0502C6.25489 13.0502 5.9191 13.3859 5.9191 13.8002C5.9191 14.2144 6.25489 14.5502 6.6691 14.5502H8.50098C8.91519 14.5502 9.25098 14.2144 9.25098 13.8002C9.25098 13.3859 8.91519 13.0502 8.50098 13.0502H6.6691ZM15.4463 12.0467C15.4172 11.9003 15.4023 11.7504 15.4023 11.599C15.4023 10.9893 15.6445 10.4046 16.0756 9.97349C16.5067 9.54237 17.0915 9.30017 17.7011 9.30017C18.3108 9.30017 18.8956 9.54237 19.3267 9.97349C19.7578 10.4046 20 10.9893 20 11.599C20 12.2087 19.7578 12.7934 19.3267 13.2245C18.8956 13.6557 18.3108 13.8979 17.7011 13.8979C17.1494 13.8979 16.6181 13.6995 16.2026 13.3423L14.5247 14.3577C14.5728 14.5439 14.5977 14.7368 14.5977 14.9323C14.5977 15.1301 14.5722 15.3252 14.523 15.5134L16.016 16.1274C16.0355 16.1065 16.0553 16.0858 16.0756 16.0655C16.5067 15.6344 17.0915 15.3922 17.7011 15.3922C18.3108 15.3922 18.8956 15.6344 19.3267 16.0655C19.7578 16.4967 20 17.0814 20 17.6911C20 18.3008 19.7578 18.8855 19.3267 19.3166C18.8956 19.7477 18.3108 19.9899 17.7011 19.9899C17.0915 19.9899 16.5067 19.7477 16.0756 19.3166C15.6445 18.8855 15.4023 18.3008 15.4023 17.6911C15.4023 17.6271 15.405 17.5634 15.4102 17.5002L13.6639 16.7819C13.271 17.0719 12.7931 17.2311 12.2988 17.2311C11.6892 17.2311 11.1044 16.9889 10.6733 16.5578C10.2422 16.1267 10 15.542 10 14.9323C10 14.3226 10.2422 13.7379 10.6733 13.3068C11.1044 12.8756 11.6892 12.6334 12.2988 12.6334C12.8064 12.6334 13.2967 12.8013 13.6955 13.1063L15.4463 12.0467Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nDocShareable.displayName = 'DocShareable';\nexport default DocShareable;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/DocTemplate.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface DocTemplateProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst DocTemplate: React.FC<DocTemplateProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M16.4033 7.62725C16.4049 7.60733 16.4057 7.58719 16.4057 7.56686C16.4057 7.54653 16.4049 7.5264 16.4033 7.50648V7.483C16.4032 7.02626 16.2217 6.58807 15.8988 6.265L12.0884 2.45456C11.7653 2.1317 11.3271 1.95029 10.8704 1.9502H4.97333C4.51628 1.9502 4.07794 2.13176 3.75475 2.45495C3.43157 2.77814 3.25 3.21647 3.25 3.67353V16.3269C3.25 16.7839 3.43157 17.2223 3.75475 17.5454C4.07794 17.8686 4.51627 18.0502 4.97333 18.0502H10.6562C10.1983 17.6482 9.82007 17.1365 9.5529 16.5502H4.97333C4.9141 16.5502 4.8573 16.5267 4.81541 16.4848C4.77353 16.4429 4.75 16.3861 4.75 16.3269V3.67353C4.75 3.6143 4.77353 3.55749 4.81541 3.51561C4.8573 3.47372 4.9141 3.4502 4.97333 3.4502L10.0391 3.50488V6.59353C10.0391 7.05059 10.2206 7.48892 10.5438 7.81211C10.867 8.1353 11.3053 8.31686 11.7624 8.31686H14V8.31512H16.4033V7.62725ZM11.5391 4.02658L14.3293 6.81686H11.7624C11.7032 6.81686 11.6464 6.79333 11.6045 6.75145C11.5626 6.70956 11.5391 6.65276 11.5391 6.59353V4.02658ZM5.91895 10.6002C5.91895 10.1859 6.25473 9.85016 6.66895 9.85016H9.90625C10.3205 9.85016 10.6562 10.1859 10.6562 10.6002C10.6562 11.0144 10.3205 11.3502 9.90625 11.3502H6.66895C6.25473 11.3502 5.91895 11.0144 5.91895 10.6002ZM6.6691 13.0502C6.25489 13.0502 5.9191 13.3859 5.9191 13.8002C5.9191 14.2144 6.25489 14.5502 6.6691 14.5502H7.92565C8.33986 14.5502 8.67565 14.2144 8.67565 13.8002C8.67565 13.3859 8.33986 13.0502 7.92565 13.0502H6.6691ZM11.9536 9.03283C11.7622 8.92257 11.5274 9.07972 11.5563 9.29876L11.937 12.1794C11.9485 12.2664 11.9164 12.3534 11.8513 12.4122L9.6941 14.3588C9.53007 14.5069 9.60697 14.7787 9.82424 14.8189L12.6815 15.347C12.7678 15.363 12.8407 15.4204 12.8764 15.5005L14.0612 18.1536C14.1513 18.3554 14.4336 18.3662 14.5389 18.172L15.6202 16.1783L18.0983 19.6015C18.3412 19.9371 18.8101 20.0121 19.1457 19.7692C19.4812 19.5264 19.5563 19.0575 19.3134 18.7219L16.9066 15.3974L19.0197 15.1729C19.2395 15.1496 19.337 14.8844 19.1849 14.7242L17.1837 12.6175C17.1233 12.5539 17.0981 12.4646 17.1162 12.3788L17.7172 9.53597C17.7629 9.3198 17.5409 9.14506 17.3415 9.24027L14.7195 10.4924C14.6404 10.5303 14.5476 10.5267 14.4716 10.4829L11.9536 9.03283Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nDocTemplate.displayName = 'DocTemplate';\nexport default DocTemplate;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/DoubleCheck.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface DoubleCheckProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst DoubleCheck: React.FC<DoubleCheckProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M17.7968 6.67468L10.8855 14.1903C10.6146 14.4802 10.1752 14.4802 9.90419 14.1903L8.39773 12.5791L6.88555 14.1903C6.61455 14.4802 6.17518 14.4802 5.90419 14.1903L2.20325 10.2321C1.93225 9.94224 1.93225 9.47233 2.20325 9.18249C2.47424 8.89265 2.91361 8.89265 3.18461 9.18249L6.39487 12.616L7.41603 11.5292L6.20325 10.2321C5.93225 9.94224 5.93225 9.47233 6.20325 9.18249C6.47424 8.89265 6.91361 8.89265 7.18461 9.18249L10.3949 12.616L16.8154 5.62509C17.0864 5.33526 17.5258 5.33526 17.7968 5.62509C18.0677 5.91493 18.0677 6.38485 17.7968 6.67468Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nDoubleCheck.displayName = 'DoubleCheck';\nexport default DoubleCheck;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Downgrade.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface DowngradeProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Downgrade: React.FC<DowngradeProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M10 5.8a.78.78 0 0 1 .781.781v5.15l1.644-1.395a.781.781 0 1 1 1.01 1.192l-2.93 2.486a.781.781 0 0 1-1.01 0l-2.93-2.486a.781.781 0 0 1 1.01-1.192l1.644 1.395V6.58c0-.431.35-.781.781-.781Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M2.25 5A2.75 2.75 0 0 1 5 2.25h10A2.75 2.75 0 0 1 17.75 5v10A2.75 2.75 0 0 1 15 17.75H5A2.75 2.75 0 0 1 2.25 15V5ZM5 3.75c-.69 0-1.25.56-1.25 1.25v10c0 .69.56 1.25 1.25 1.25h10c.69 0 1.25-.56 1.25-1.25V5c0-.69-.56-1.25-1.25-1.25H5Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nDowngrade.displayName = 'Downgrade';\nexport default Downgrade;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Download.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface DownloadProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Download: React.FC<DownloadProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M10.75 2.69922C10.75 2.28501 10.4142 1.94922 10 1.94922C9.58579 1.94922 9.25 2.28501 9.25 2.69922L9.25 10.5345L6.53236 7.79593C6.24059 7.50191 5.76572 7.50009 5.47171 7.79186C5.17769 8.08363 5.17587 8.5585 5.46764 8.85251L9.59471 13.0113C9.73552 13.1532 9.92716 13.2331 10.1271 13.2331C10.327 13.2331 10.5186 13.1532 10.6594 13.0113L14.7865 8.85251C15.0783 8.5585 15.0764 8.08363 14.7824 7.79186C14.4884 7.50009 14.0135 7.50191 13.7218 7.79593L10.75 10.7906L10.75 2.69922ZM3.75 16.3419L3.75 12.0183C3.75 11.6041 3.41421 11.2683 3 11.2683C2.58579 11.2683 2.25 11.6041 2.25 12.0183V16.3807C2.25 16.395 2.25041 16.4093 2.25123 16.4236C2.2777 16.885 2.51237 17.2905 2.85877 17.564C3.19773 17.8316 3.62517 17.9614 4.04876 17.9483L16.4514 17.9483C16.8749 17.9612 17.3022 17.8313 17.641 17.5638C17.9873 17.2905 18.2219 16.8853 18.2487 16.4242C18.2496 16.4097 18.25 16.3952 18.25 16.3807V12.0183C18.25 11.6041 17.9142 11.2683 17.5 11.2683C17.0858 11.2683 16.75 11.6041 16.75 12.0183V16.3414C16.7494 16.3429 16.7486 16.3448 16.7473 16.3471C16.7429 16.3552 16.7327 16.3698 16.7116 16.3865C16.6667 16.4219 16.5887 16.4526 16.4937 16.4489C16.4839 16.4485 16.4741 16.4483 16.4643 16.4483L4.03571 16.4483C4.02576 16.4483 4.01581 16.4485 4.00586 16.4489C3.91092 16.4527 3.83301 16.422 3.78822 16.3867C3.76714 16.37 3.75703 16.3555 3.75267 16.3475C3.75142 16.3452 3.75057 16.3433 3.75 16.3419Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nDownload.displayName = 'Download';\nexport default Download;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Drag.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface DragProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Drag: React.FC<DragProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M7.5 4C6.67157 4 6 3.32843 6 2.5 6 1.67157 6.67157 1 7.5 1 8.32843 1 9 1.67157 9 2.5 9 3.32843 8.32843 4 7.5 4zM12.5 4C11.6716 4 11 3.32843 11 2.5 11 1.67157 11.6716 1 12.5 1 13.3284 1 14 1.67157 14 2.5 14 3.32843 13.3284 4 12.5 4zM7.5 9C6.67157 9 6 8.32843 6 7.5 6 6.67157 6.67157 6 7.5 6 8.32843 6 9 6.67157 9 7.5 9 8.32843 8.32843 9 7.5 9zM12.5 9C11.6716 9 11 8.32843 11 7.5 11 6.67157 11.6716 6 12.5 6 13.3284 6 14 6.67157 14 7.5 14 8.32843 13.3284 9 12.5 9zM7.5 14C6.67157 14 6 13.3284 6 12.5 6 11.6716 6.67157 11 7.5 11 8.32843 11 9 11.6716 9 12.5 9 13.3284 8.32843 14 7.5 14zM7.5 19C6.67157 19 6 18.3284 6 17.5 6 16.6716 6.67157 16 7.5 16 8.32843 16 9 16.6716 9 17.5 9 18.3284 8.32843 19 7.5 19zM12.5 14C11.6716 14 11 13.3284 11 12.5 11 11.6716 11.6716 11 12.5 11 13.3284 11 14 11.6716 14 12.5 14 13.3284 13.3284 14 12.5 14zM12.5 19C11.6716 19 11 18.3284 11 17.5 11 16.6716 11.6716 16 12.5 16 13.3284 16 14 16.6716 14 17.5 14 18.3284 13.3284 19 12.5 19z\"\n      fill=\"currentColor\" />\n  </svg>\n);\nDrag.displayName = 'Drag';\nexport default Drag;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Dropdown.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface DropdownProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Dropdown: React.FC<DropdownProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M10.2002 10.2002C10.6144 10.2002 10.9502 10.536 10.9502 10.9502V15.4393H9.4502V10.9502C9.4502 10.536 9.78598 10.2002 10.2002 10.2002Z\" fill=\"currentColor\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M7.16987 14.2197C7.46276 13.9268 7.93763 13.9268 8.23053 14.2197L9.4502 15.4393H10.9502L12.1699 14.2197C12.4628 13.9268 12.9376 13.9268 13.2305 14.2197 13.5234 14.5126 13.5234 14.9874 13.2305 15.2803L10.7305 17.7803C10.4376 18.0732 9.96276 18.0732 9.66987 17.7803L7.16987 15.2803C6.87697 14.9874 6.87697 14.5126 7.16987 14.2197zM2 3.75C2 2.7835 2.7835 2 3.75 2H16.25C17.2165 2 18 2.7835 18 3.75V6.75C18 7.7165 17.2165 8.5 16.25 8.5H3.75C2.7835 8.5 2 7.7165 2 6.75V3.75zM3.75 3.5C3.61193 3.5 3.5 3.61193 3.5 3.75V6.75C3.5 6.88807 3.61193 7 3.75 7H16.25C16.3881 7 16.5 6.88807 16.5 6.75V3.75C16.5 3.61193 16.3881 3.5 16.25 3.5H3.75z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nDropdown.displayName = 'Dropdown';\nexport default Dropdown;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/DropdownChevronDown.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface DropdownChevronDownProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst DropdownChevronDown: React.FC<DropdownChevronDownProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M9.442 12.76a.77.77 0 0 0 1.116 0l4.21-4.363a.84.84 0 0 0 0-1.157.77.77 0 0 0-1.116 0L10 11.025 6.348 7.24a.77.77 0 0 0-1.117 0 .84.84 0 0 0 0 1.157l4.21 4.363Z\"\n    />\n  </svg>\n);\nDropdownChevronDown.displayName = 'DropdownChevronDown';\nexport default DropdownChevronDown;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/DropdownChevronLeft.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface DropdownChevronLeftProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst DropdownChevronLeft: React.FC<DropdownChevronLeftProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M7.24 9.444a.77.77 0 0 0 0 1.116l4.363 4.21a.84.84 0 0 0 1.157 0 .77.77 0 0 0 0-1.116l-3.785-3.652 3.785-3.653a.77.77 0 0 0 0-1.116.84.84 0 0 0-1.157 0L7.24 9.443Z\"\n    />\n  </svg>\n);\nDropdownChevronLeft.displayName = 'DropdownChevronLeft';\nexport default DropdownChevronLeft;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/DropdownChevronRight.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface DropdownChevronRightProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst DropdownChevronRight: React.FC<DropdownChevronRightProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path fill=\"currentColor\" d=\"M12.76 10.56a.77.77 0 0 0 0-1.116L8.397 5.233a.84.84 0 0 0-1.157 0 .77.77 0 0 0 0 1.116l3.785 3.653-3.785 3.652a.77.77 0 0 0 0 1.117.84.84 0 0 0 1.157 0l4.363-4.211Z\"\n    />\n  </svg>\n);\nDropdownChevronRight.displayName = 'DropdownChevronRight';\nexport default DropdownChevronRight;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/DropdownChevronUp.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface DropdownChevronUpProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst DropdownChevronUp: React.FC<DropdownChevronUpProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M10.558 7.24a.77.77 0 0 0-1.116 0l-4.21 4.363a.84.84 0 0 0 0 1.157.77.77 0 0 0 1.116 0L10 8.975l3.652 3.785a.77.77 0 0 0 1.117 0 .84.84 0 0 0 0-1.157l-4.21-4.363Z\"\n    />\n  </svg>\n);\nDropdownChevronUp.displayName = 'DropdownChevronUp';\nexport default DropdownChevronUp;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/DueDate.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface DueDateProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst DueDate: React.FC<DueDateProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M3.68158 5.23452C3.36795 5.48543 2.9103 5.43458 2.65939 5.12095C2.40848 4.80731 2.45933 4.34966 2.77297 4.09876L5.19718 2.15939C5.51081 1.90848 5.96846 1.95933 6.21937 2.27297C6.47027 2.5866 6.41942 3.04425 6.10579 3.29516L3.68158 5.23452ZM13.6846 2.27298C13.9355 1.95935 14.3932 1.9085 14.7068 2.1594L17.131 4.09877C17.4447 4.34968 17.4955 4.80733 17.2446 5.12096C16.9937 5.43459 16.5361 5.48544 16.2224 5.23454L13.7982 3.29517C13.4846 3.04426 13.4337 2.58661 13.6846 2.27298ZM7.38496 4.43758C8.17908 4.10865 9.03021 3.93935 9.88975 3.93935C10.7493 3.93935 11.6004 4.10865 12.3946 4.43758C13.1887 4.76652 13.9102 5.24865 14.518 5.85644C15.1258 6.46423 15.6079 7.18578 15.9369 7.9799C16.2658 8.77402 16.4351 9.62515 16.4351 10.4847C16.4351 11.3442 16.2658 12.1954 15.9369 12.9895C15.6079 13.7836 15.1258 14.5052 14.518 15.113C14.2959 15.3351 14.0586 15.5404 13.8081 15.7276L14.4179 16.9473C14.5975 17.3065 14.4519 17.7434 14.0927 17.923C13.7334 18.1026 13.2966 17.957 13.117 17.5977L12.5505 16.4648C12.4988 16.4878 12.4469 16.5102 12.3946 16.5318C11.6004 16.8608 10.7493 17.0301 9.88975 17.0301C9.03021 17.0301 8.17908 16.8608 7.38496 16.5318C7.33226 16.51 7.27988 16.4875 7.22784 16.4643L6.66083 17.5979C6.48116 17.9571 6.0443 18.1027 5.68508 17.923C5.32586 17.7433 5.18031 17.3065 5.35999 16.9473L5.97041 15.7269C5.72028 15.5399 5.48331 15.3348 5.26149 15.113C4.6537 14.5052 4.17157 13.7836 3.84264 12.9895C3.5137 12.1954 3.3444 11.3442 3.3444 10.4847C3.3444 9.62515 3.5137 8.77402 3.84264 7.9799C4.17157 7.18578 4.6537 6.46423 5.26149 5.85644C5.86928 5.24865 6.59084 4.76652 7.38496 4.43758ZM12.511 14.8489C12.5023 14.8538 12.4938 14.8589 12.4854 14.8641C12.278 14.9871 12.0617 15.0954 11.8379 15.188C11.2203 15.4439 10.5583 15.5756 9.88975 15.5756C9.22121 15.5756 8.55922 15.4439 7.94157 15.188C7.32392 14.9322 6.7627 14.5572 6.28997 14.0845C5.81724 13.6118 5.44225 13.0505 5.18641 12.4329C4.93057 11.8152 4.79889 11.1532 4.79889 10.4847C4.79889 9.81616 4.93057 9.15417 5.18641 8.53651C5.44225 7.91886 5.81724 7.35765 6.28997 6.88492C6.7627 6.41219 7.32392 6.0372 7.94157 5.78136C8.55922 5.52552 9.22121 5.39384 9.88975 5.39384C10.5583 5.39384 11.2203 5.52552 11.8379 5.78136C12.4556 6.0372 13.0168 6.41219 13.4895 6.88492C13.9623 7.35765 14.3373 7.91886 14.5931 8.53651C14.8489 9.15416 14.9806 9.81616 14.9806 10.4847C14.9806 11.1532 14.8489 11.8152 14.5931 12.4329C14.3373 13.0505 13.9623 13.6118 13.4895 14.0845C13.1951 14.3789 12.8664 14.6354 12.511 14.8489ZM7.71421 9.98328C7.27227 9.98328 6.91402 10.3089 6.91402 10.7105C6.91402 11.1122 7.27227 11.4378 7.71421 11.4378H10.1262C10.5681 11.4378 10.9264 11.1122 10.9264 10.7105C10.9264 10.6921 10.9257 10.6739 10.9242 10.6559V7.66756C10.9242 7.26592 10.5659 6.94032 10.124 6.94032C9.68206 6.94032 9.3238 7.26592 9.3238 7.66756V9.98328H7.71421Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nDueDate.displayName = 'DueDate';\nexport default DueDate;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Duplicate.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface DuplicateProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Duplicate: React.FC<DuplicateProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M7.82576 3.7273C7.82576 3.58922 7.93769 3.47729 8.07576 3.47729H9.76937H13.1567C13.2184 3.47729 13.278 3.50016 13.3239 3.54147L15.94 5.89592C15.9927 5.94334 16.0227 6.01088 16.0227 6.08175V13.3637C16.0227 13.5017 15.9108 13.6137 15.7727 13.6137H8.07576C7.93769 13.6137 7.82576 13.5017 7.82576 13.3637V3.7273ZM8.07576 1.97729C7.10926 1.97729 6.32576 2.7608 6.32576 3.7273V4.88639H5.16667C4.20017 4.88639 3.41667 5.66989 3.41667 6.63639V16.2727C3.41667 17.2392 4.20018 18.0228 5.16667 18.0228H11.8939C12.8604 18.0228 13.6439 17.2392 13.6439 16.2727V15.1137H15.7727C16.7392 15.1137 17.5227 14.3302 17.5227 13.3637V6.08175C17.5227 5.58565 17.3122 5.11286 16.9434 4.78098L14.3274 2.42653C14.006 2.13732 13.589 1.97729 13.1567 1.97729H9.76937H8.07576ZM12.1439 15.1137H8.07576C7.10927 15.1137 6.32576 14.3302 6.32576 13.3637V6.38639H5.16667C5.0286 6.38639 4.91667 6.49831 4.91667 6.63639V16.2727C4.91667 16.4108 5.0286 16.5227 5.16667 16.5227H11.8939C12.032 16.5227 12.1439 16.4108 12.1439 16.2727V15.1137Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nDuplicate.displayName = 'Duplicate';\nexport default Duplicate;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Edit.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface EditProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Edit: React.FC<EditProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M13.8542 3.59561C13.8541 3.59568 13.8542 3.59555 13.8542 3.59561L4.80915 12.6503L3.81363 16.189L7.35682 15.1957L16.4018 6.14C16.4746 6.06722 16.5161 5.96795 16.5161 5.86503C16.5161 5.76221 16.4753 5.6636 16.4026 5.59083C16.4025 5.59076 16.4026 5.59091 16.4026 5.59083L14.4038 3.59568C14.3309 3.52292 14.232 3.48197 14.1289 3.48197C14.026 3.48197 13.927 3.52297 13.8542 3.59561ZM12.8051 2.54754C13.1562 2.19695 13.6324 2 14.1289 2C14.6254 2 15.1016 2.19693 15.4527 2.54747C15.4527 2.5475 15.4527 2.54745 15.4527 2.54747L17.4515 4.54263C17.8026 4.89333 18 5.36914 18 5.86503C18 6.36091 17.8028 6.8365 17.4518 7.18719L8.26993 16.3799C8.17984 16.4701 8.06798 16.5356 7.94516 16.57L2.94244 17.9724C2.68418 18.0448 2.4069 17.9723 2.21725 17.7829C2.0276 17.5934 1.95512 17.3165 2.02768 17.0586L3.43296 12.0633C3.46728 11.9413 3.53237 11.8301 3.62199 11.7404L12.8051 2.54754Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nEdit.displayName = 'Edit';\nexport default Edit;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Education.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface EducationProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Education: React.FC<EducationProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M7.27004 3.99643C6.57254 3.812 5.9564 3.66541 5.42214 3.58017C4.88104 3.49384 4.47283 3.47901 4.17651 3.52687C3.89516 3.57232 3.7685 3.66386 3.69602 3.75824C3.61277 3.86666 3.5127 4.09478 3.5127 4.57376V11.8552C3.5127 11.8828 3.51117 11.9105 3.50812 11.9379C3.48035 12.1881 3.51831 12.5526 3.67583 12.8235C3.8002 13.0373 4.02895 13.2578 4.59457 13.2578C5.69407 13.2578 7.2167 13.4453 8.49422 13.9928C8.83987 14.1409 9.18324 14.3235 9.4999 14.5453V7.09814C9.4999 5.9831 9.36114 5.37648 9.08469 4.97963C8.82074 4.60075 8.33347 4.27761 7.27004 3.99643ZM10.2499 4.03171C9.67944 3.27435 8.79663 2.84852 7.65348 2.54626C6.94388 2.35864 6.2691 2.19633 5.65846 2.0989C5.05465 2.00257 4.46399 1.961 3.93732 2.04607C3.39567 2.13356 2.87523 2.36429 2.50635 2.84464C2.14824 3.31096 2.0127 3.91001 2.0127 4.57376V11.8172C1.96883 12.2844 2.02649 12.9712 2.37921 13.5776C2.77653 14.2607 3.50354 14.7578 4.59457 14.7578C5.56587 14.7578 6.87091 14.929 7.90335 15.3715C8.94514 15.818 9.4999 16.4318 9.4999 17.25C9.4999 17.6642 9.83569 18 10.2499 18C10.6641 18 10.9999 17.6642 10.9999 17.25C10.9999 16.4318 11.5547 15.818 12.5964 15.3715C13.6289 14.929 14.9339 14.7578 15.9052 14.7578C16.9963 14.7578 17.7233 14.2607 18.1206 13.5776C18.4733 12.9712 18.531 12.2844 18.4871 11.8172V4.57376C18.4871 3.91001 18.3516 3.31096 17.9935 2.84464C17.6246 2.36429 17.1041 2.13356 16.5625 2.04607C16.0358 1.961 15.4451 2.00257 14.8413 2.0989C14.2307 2.19633 13.5559 2.35864 12.8463 2.54626C11.7032 2.84852 10.8204 3.27435 10.2499 4.03171ZM10.9999 7.09814V14.5453C11.3166 14.3235 11.6599 14.1409 12.0056 13.9928C13.2831 13.4453 14.8057 13.2578 15.9052 13.2578C16.4708 13.2578 16.6996 13.0373 16.824 12.8235C16.9815 12.5526 17.0195 12.1881 16.9917 11.9379C16.9886 11.9105 16.9871 11.8828 16.9871 11.8552V4.57376C16.9871 4.09478 16.887 3.86666 16.8038 3.75824C16.7313 3.66386 16.6046 3.57232 16.3233 3.52687C16.027 3.47901 15.6188 3.49384 15.0777 3.58017C14.5434 3.66541 13.9273 3.812 13.2298 3.99643C12.1663 4.27761 11.6791 4.60075 11.4151 4.97963C11.1387 5.37648 10.9999 5.9831 10.9999 7.09814Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nEducation.displayName = 'Education';\nexport default Education;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Email.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface EmailProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Email: React.FC<EmailProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M3 4.25C2.58579 4.25 2.25 4.58579 2.25 5V15C2.25 15.4142 2.58579 15.75 3 15.75H17C17.4142 15.75 17.75 15.4142 17.75 15V5C17.75 4.58579 17.4142 4.25 17 4.25H3ZM3.75 6.71589V14.25H16.25V6.71591L11.802 10.1371C11.2854 10.5346 10.6518 10.75 10 10.75C9.3482 10.75 8.71468 10.5346 8.19805 10.1371L3.75 6.71589ZM15.0455 5.75H4.95456L9.1126 8.94818L9.11265 8.94821C9.36706 9.14393 9.67903 9.25004 10 9.25004C10.321 9.25004 10.633 9.14393 10.8874 8.94821L10.8874 8.94818L15.0455 5.75Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nEmail.displayName = 'Email';\nexport default Email;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Embed.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface EmbedProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Embed: React.FC<EmbedProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M11.6117 6.22411C11.6929 5.81793 11.4295 5.42282 11.0233 5.34161C10.6172 5.26039 10.222 5.52382 10.1408 5.92999L8.57199 13.7759C8.49078 14.1821 8.7542 14.5772 9.16038 14.6584C9.56655 14.7396 9.96166 14.4762 10.0429 14.07L11.6117 6.22411ZM13.4148 7.19635C13.6633 6.86497 14.1334 6.79779 14.4648 7.0463L17.6033 9.39999C17.7922 9.54163 17.9033 9.76393 17.9033 10C17.9033 10.2361 17.7922 10.4584 17.6033 10.6L14.4648 12.9537C14.1334 13.2022 13.6633 13.135 13.4148 12.8037C13.1663 12.4723 13.2334 12.0022 13.5648 11.7537L15.9033 10L13.5648 8.24634C13.2334 7.99783 13.1663 7.52773 13.4148 7.19635ZM6.76888 7.19627C7.01744 7.52762 6.95032 7.99773 6.61897 8.24628L4.2811 10L6.61897 11.7537C6.95032 12.0023 7.01744 12.4724 6.76888 12.8037C6.52032 13.1351 6.05022 13.2022 5.71887 12.9536L2.5812 10.6C2.39237 10.4583 2.28125 10.2361 2.28125 10C2.28125 9.76396 2.39237 9.54169 2.5812 9.40004L5.71887 7.04636C6.05022 6.79781 6.52032 6.86492 6.76888 7.19627Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nEmbed.displayName = 'Embed';\nexport default Embed;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Emoji.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface EmojiProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Emoji: React.FC<EmojiProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M4.57981 4.5798C6.04386 3.11575 8.02953 2.29326 10.1 2.29326C12.1705 2.29326 14.1561 3.11575 15.6202 4.5798C17.0842 6.04384 17.9067 8.02952 17.9067 10.1C17.9067 12.1705 17.0842 14.1561 15.6202 15.6202C14.1561 17.0842 12.1705 17.9067 10.1 17.9067C8.02953 17.9067 6.04386 17.0842 4.57981 15.6202C3.11576 14.1561 2.29327 12.1705 2.29327 10.1C2.29327 8.02952 3.11576 6.04384 4.57981 4.5798ZM10.1 3.70672C8.4044 3.70672 6.77825 4.38029 5.57928 5.57927C4.38031 6.77824 3.70673 8.40439 3.70673 10.1C3.70673 11.7956 4.38031 13.4217 5.57928 14.6207C6.77825 15.8197 8.4044 16.4933 10.1 16.4933C11.7956 16.4933 13.4218 15.8197 14.6207 14.6207C15.8197 13.4217 16.4933 11.7956 16.4933 10.1C16.4933 8.40439 15.8197 6.77824 14.6207 5.57927C13.4218 4.38029 11.7956 3.70672 10.1 3.70672Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M6.25644 10.5141C6.63105 10.4044 7.0236 10.6192 7.13324 10.9938C7.32099 11.6352 7.71156 12.1986 8.24643 12.5993C8.7813 13.0001 9.43165 13.2167 10.1 13.2167C10.7683 13.2167 11.4187 13.0001 11.9536 12.5993C12.4884 12.1986 12.879 11.6352 13.0668 10.9938C13.1764 10.6192 13.569 10.4044 13.9436 10.5141C14.3182 10.6237 14.5329 11.0163 14.4233 11.3909C14.1497 12.3256 13.5805 13.1465 12.8011 13.7305C12.0217 14.3145 11.074 14.6301 10.1 14.6301C9.12605 14.6301 8.17833 14.3145 7.39889 13.7305C6.61945 13.1465 6.05028 12.3256 5.77669 11.3909C5.66705 11.0163 5.88184 10.6237 6.25644 10.5141Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M13 8C13 8.55228 12.5523 9 12 9 11.4477 9 11 8.55228 11 8 11 7.44772 11.4477 7 12 7 12.5523 7 13 7.44772 13 8zM9 8C9 8.55228 8.55228 9 8 9 7.44772 9 7 8.55228 7 8 7 7.44772 7.44772 7 8 7 8.55228 7 9 7.44772 9 8z\"\n      fill=\"currentColor\" />\n  </svg>\n);\nEmoji.displayName = 'Emoji';\nexport default Emoji;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Enter.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface EnterProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Enter: React.FC<EnterProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M2.25 3C2.25 2.58579 2.58579 2.25 3 2.25H17C17.4142 2.25 17.75 2.58579 17.75 3V17C17.75 17.4142 17.4142 17.75 17 17.75H3C2.58579 17.75 2.25 17.4142 2.25 17V3ZM3.75 3.75V16.25H16.25V3.75H3.75ZM8.91495 8.93119C9.20784 9.22408 9.20784 9.69895 8.91495 9.99185L8.04143 10.8654H11.6154C11.7021 10.8654 11.7852 10.8309 11.8466 10.7696C11.9079 10.7083 11.9423 10.6252 11.9423 10.5384V7.30768C11.9423 6.89346 12.2781 6.55768 12.6923 6.55768C13.1065 6.55768 13.4423 6.89346 13.4423 7.30768V10.5384C13.4423 11.023 13.2498 11.4877 12.9072 11.8303C12.5646 12.1729 12.0999 12.3654 11.6154 12.3654H8.04144L8.91495 13.2389C9.20784 13.5318 9.20784 14.0066 8.91495 14.2995C8.62206 14.5924 8.14718 14.5924 7.85429 14.2995L5.70241 12.1477C5.6961 12.1414 5.68989 12.135 5.6838 12.1285C5.55837 11.9949 5.48136 11.8152 5.48078 11.6176C5.48078 11.6169 5.48077 11.6161 5.48077 11.6154C5.48077 11.6146 5.48078 11.6139 5.48078 11.6131C5.48107 11.5131 5.50096 11.4176 5.53681 11.3304C5.57342 11.2411 5.62796 11.1575 5.70044 11.085L7.85429 8.93119C8.14718 8.63829 8.62206 8.63829 8.91495 8.93119Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nEnter.displayName = 'Enter';\nexport default Enter;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/EnterArrow.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface EnterArrowProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst EnterArrow: React.FC<EnterArrowProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M16.519 2.603c.415 0 .752.336.752.751v5.438a4.378 4.378 0 0 1-4.377 4.378H4.506l2.943 2.943a.752.752 0 0 1-1.062 1.064l-4.21-4.21a.752.752 0 0 1-.08-.09.745.745 0 0 1-.16-.459.76.76 0 0 1 .03-.203c.008-.03.015-.059.027-.087.005-.013.013-.025.019-.037a.748.748 0 0 1 .144-.207l4.23-4.23a.75.75 0 1 1 1.062 1.063L4.5 11.666h8.394a2.874 2.874 0 0 0 2.873-2.874V3.354a.75.75 0 0 1 .752-.751Z\"\n    />\n  </svg>\n);\nEnterArrow.displayName = 'EnterArrow';\nexport default EnterArrow;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Erase.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface EraseProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Erase: React.FC<EraseProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M11.6413 4.31058C11.6411 4.31074 11.6414 4.31043 11.6413 4.31058L10.1221 5.82974L14.5799 10.2875L16.0991 8.76837C16.0992 8.76824 16.0989 8.7685 16.0991 8.76837C16.1376 8.72937 16.1597 8.67635 16.1597 8.62149C16.1597 8.56664 16.138 8.514 16.0995 8.47501C16.0993 8.47488 16.0996 8.47514 16.0995 8.47501L11.935 4.31058C11.9349 4.31045 11.9352 4.31071 11.935 4.31058C11.896 4.27202 11.843 4.25 11.7882 4.25C11.7333 4.25 11.6803 4.27207 11.6413 4.31058ZM13.696 11.1714L9.23825 6.71362L3.31058 12.6413C3.31043 12.6414 3.31074 12.6411 3.31058 12.6413C3.27207 12.6803 3.25 12.7333 3.25 12.7882C3.25 12.843 3.27164 12.8957 3.3102 12.9346C3.31033 12.9348 3.31007 12.9345 3.3102 12.9346L6.45954 16.084H8.78344L13.696 11.1714ZM10.5512 16.084L16.9843 9.65094L16.9856 9.64962C17.2572 9.37638 17.4097 9.00676 17.4097 8.62149C17.4097 8.23622 17.2572 7.86661 16.9856 7.59337L12.8176 3.42538L12.8163 3.42407C12.543 3.15246 12.1734 3 11.7882 3C11.4029 3 11.0333 3.15246 10.76 3.42407L10.7587 3.42539L2.42539 11.7587L2.42407 11.76C2.15246 12.0333 2 12.4029 2 12.7882C2 13.1734 2.15246 13.543 2.42407 13.8163L2.42539 13.8176L5.75872 17.1509C5.87593 17.2681 6.0349 17.334 6.20066 17.334H15.3673C15.7125 17.334 15.9923 17.0542 15.9923 16.709C15.9923 16.3638 15.7125 16.084 15.3673 16.084H10.5512Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nErase.displayName = 'Erase';\nexport default Erase;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Event.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface EventProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Event: React.FC<EventProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M6.85946 2.77441C6.85946 2.3602 6.52367 2.02441 6.10946 2.02441C5.69524 2.02441 5.35946 2.3602 5.35946 2.77441V4.99771V7.22108C5.35946 7.63529 5.69524 7.97108 6.10946 7.97108C6.52367 7.97108 6.85946 7.63529 6.85946 7.22108V5.74771H11.6678C12.082 5.74771 12.4178 5.41192 12.4178 4.99771C12.4178 4.58349 12.082 4.24771 11.6678 4.24771H6.85946V2.77441ZM2.56968 4.79298C2.91881 4.44385 3.39233 4.24771 3.88608 4.24771C4.30029 4.24771 4.63608 4.58349 4.63608 4.99771C4.63608 5.41192 4.30029 5.74771 3.88608 5.74771C3.79016 5.74771 3.69817 5.78581 3.63034 5.85363C3.56252 5.92146 3.52441 6.01345 3.52441 6.10937V8.69435H16.476V6.10937C16.476 6.01345 16.4379 5.92146 16.3701 5.85363C16.3023 5.78581 16.2103 5.74771 16.1144 5.74771H14.6411V7.22108C14.6411 7.63529 14.3053 7.97108 13.8911 7.97108C13.4769 7.97108 13.1411 7.63529 13.1411 7.22108V5.00782L13.141 4.99771L13.1411 4.9876V2.77441C13.1411 2.3602 13.4769 2.02441 13.8911 2.02441C14.3053 2.02441 14.6411 2.3602 14.6411 2.77441V4.24771H16.1144C16.6081 4.24771 17.0816 4.44385 17.4308 4.79298C17.7799 5.14211 17.976 5.61563 17.976 6.10937V9.44435V16.1144C17.976 16.6081 17.7799 17.0816 17.4308 17.4308C17.0816 17.7799 16.6081 17.976 16.1144 17.976H3.88608C3.39233 17.976 2.91881 17.7799 2.56968 17.4308C2.22055 17.0816 2.02441 16.6081 2.02441 16.1144V9.44435V6.10937C2.02441 5.61563 2.22055 5.14211 2.56968 4.79298ZM3.52441 16.1144V10.1944H16.476V16.1144C16.476 16.2103 16.4379 16.3023 16.3701 16.3701C16.3023 16.4379 16.2103 16.476 16.1144 16.476H3.88608C3.79016 16.476 3.69817 16.4379 3.63034 16.3701C3.56252 16.3023 3.52441 16.2103 3.52441 16.1144Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <rect x=\"7.41\" y=\"12.35\" width=\"4.94\" height=\"1.5\" rx=\".75\" fill=\"currentColor\" />\n  </svg>\n);\nEvent.displayName = 'Event';\nexport default Event;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Expand.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ExpandProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Expand: React.FC<ExpandProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M10.5303 2.46967C10.2374 2.17678 9.76256 2.17678 9.46967 2.46967L5.46967 6.46967C5.17678 6.76256 5.17678 7.23744 5.46967 7.53033C5.76256 7.82322 6.23744 7.82322 6.53033 7.53033L9.25 4.81066V15.1893L6.53033 12.4697C6.23744 12.1768 5.76256 12.1768 5.46967 12.4697C5.17678 12.7626 5.17678 13.2374 5.46967 13.5303L9.46967 17.5303C9.76256 17.8232 10.2374 17.8232 10.5303 17.5303L14.5303 13.5303C14.8232 13.2374 14.8232 12.7626 14.5303 12.4697C14.2374 12.1768 13.7626 12.1768 13.4697 12.4697L10.75 15.1893V4.81066L13.4697 7.53033C13.7626 7.82322 14.2374 7.82322 14.5303 7.53033C14.8232 7.23744 14.8232 6.76256 14.5303 6.46967L10.5303 2.46967Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nExpand.displayName = 'Expand';\nexport default Expand;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/ExternalPage.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ExternalPageProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst ExternalPage: React.FC<ExternalPageProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M4.07692 3.75C3.99022 3.75 3.90706 3.78444 3.84575 3.84575C3.78444 3.90706 3.75 3.99022 3.75 4.07692V15.9231C3.75 16.0098 3.78444 16.0929 3.84575 16.1542C3.90706 16.2156 3.99022 16.25 4.07692 16.25H15.9231C16.0098 16.25 16.0929 16.2156 16.1542 16.1542C16.2156 16.0929 16.25 16.0098 16.25 15.9231V11.0769C16.25 10.6627 16.5858 10.3269 17 10.3269C17.4142 10.3269 17.75 10.6627 17.75 11.0769V15.9231C17.75 16.4076 17.5575 16.8723 17.2149 17.2149C16.8723 17.5575 16.4076 17.75 15.9231 17.75H4.07692C3.59239 17.75 3.12771 17.5575 2.78509 17.2149C2.44248 16.8723 2.25 16.4076 2.25 15.9231V4.07692C2.25 3.59239 2.44248 3.12771 2.78509 2.78509C3.12771 2.44248 3.59239 2.25 4.07692 2.25H8.92308C9.33729 2.25 9.67308 2.58579 9.67308 3C9.67308 3.41421 9.33729 3.75 8.92308 3.75H4.07692ZM12.4808 3C12.4808 2.58579 12.8166 2.25 13.2308 2.25H17C17.2005 2.25 17.3825 2.32864 17.5171 2.45675C17.5262 2.46537 17.535 2.47422 17.5436 2.48328C17.6073 2.55021 17.6562 2.62602 17.6904 2.70659C17.7288 2.79671 17.75 2.89588 17.75 3V6.76923C17.75 7.18344 17.4142 7.51923 17 7.51923C16.5858 7.51923 16.25 7.18344 16.25 6.76923V4.81066L10.5303 10.5303C10.2374 10.8232 9.76256 10.8232 9.46967 10.5303C9.17678 10.2374 9.17678 9.76256 9.46967 9.46967L15.1893 3.75H13.2308C12.8166 3.75 12.4808 3.41421 12.4808 3Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nExternalPage.displayName = 'ExternalPage';\nexport default ExternalPage;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Favorite.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface FavoriteProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Favorite: React.FC<FavoriteProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M11.234 3.016a1.379 1.379 0 0 0-2.47 0l-1.78 3.61-3.99.584h-.003a1.376 1.376 0 0 0-.754 2.348v.001l2.878 2.813-.68 3.97v.001a1.376 1.376 0 0 0 2.005 1.45L10 15.921l3.549 1.866a1.377 1.377 0 0 0 2.005-1.45v-.001l-.68-3.97 2.882-2.81v-.001a1.377 1.377 0 0 0-.753-2.348l-3.989-.58-1.78-3.61Zm-1.235.888L8.3 7.35a1.378 1.378 0 0 1-1.034.752l-3.803.557 2.747 2.685a1.376 1.376 0 0 1 .395 1.22l-.649 3.79 3.404-1.79a1.377 1.377 0 0 1 1.28 0l3.395 1.785-.65-3.79v-.002a1.374 1.374 0 0 1 .396-1.218l2.751-2.683-3.796-.554a1.382 1.382 0 0 1-1.037-.752L10 3.904Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nFavorite.displayName = 'Favorite';\nexport default Favorite;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Feedback.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface FeedbackProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Feedback: React.FC<FeedbackProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M13.6787 2.81141C12.6 2.27571 11.4118 1.99795 10.2076 2.00001C8.82154 1.99824 7.46024 2.36762 6.26487 3.06986C5.06913 3.77232 4.08301 4.78224 3.40884 5.99482C2.73467 7.20739 2.39702 8.57845 2.43092 9.9657C2.46129 11.2085 2.78887 12.4237 3.38348 13.5103L2.13059 16.1439C1.60692 17.2446 2.75507 18.3935 3.8548 17.8692L6.48564 16.6149C7.41302 17.123 8.43558 17.4373 9.49117 17.5368C10.6905 17.6499 11.8996 17.4827 13.0234 17.0484C14.1471 16.614 15.1547 15.9245 15.9667 15.034C16.7788 14.1435 17.3731 13.0764 17.7029 11.9168C18.0326 10.7572 18.0888 9.53685 17.867 8.35185C17.6451 7.16685 17.1514 6.0496 16.4245 5.08814C15.6977 4.12669 14.7578 3.34731 13.6787 2.81141ZM10.2092 3.55355C11.1735 3.55174 12.125 3.77408 12.9887 4.20304C13.8525 4.632 14.6049 5.25587 15.1867 6.02547C15.7684 6.79508 16.1637 7.68939 16.3413 8.63794C16.5188 9.58648 16.4739 10.5633 16.2099 11.4915C15.946 12.4197 15.4702 13.2739 14.8202 13.9867C14.1702 14.6995 13.3637 15.2515 12.4642 15.5992C11.5647 15.9468 10.5968 16.0807 9.63678 15.9901C8.67679 15.8996 7.75091 15.5872 6.93213 15.0775C6.70752 14.9377 6.42723 14.922 6.18843 15.0358L3.84556 16.1528L4.96133 13.8075C5.07505 13.5685 5.05929 13.2879 4.91952 13.0631C4.33329 12.1204 4.00983 11.0378 3.9827 9.92771C3.95557 8.81763 4.22576 7.72051 4.76524 6.7502C5.30471 5.77989 6.09381 4.97175 7.05064 4.40964C8.00747 3.84754 9.09717 3.55195 10.2067 3.55355L10.2092 3.55355ZM8.52778 6.25C7.73406 6.25 7.0726 6.56336 6.62326 7.1071C6.18852 7.63317 6 8.31485 6 8.99682C6 9.81586 6.37377 10.5433 6.94786 11.0391L9.50267 13.4541C9.70771 13.648 9.97723 13.75 10.25 13.75C10.5228 13.75 10.7923 13.648 10.9974 13.4541L13.5527 11.0386C14.1265 10.5429 14.5 9.81561 14.5 8.99682C14.5 8.34659 14.3546 7.66909 13.9543 7.13505C13.5306 6.56971 12.8834 6.25 12.0833 6.25C11.5338 6.25 10.9995 6.47399 10.6238 6.67457C10.4982 6.7416 10.3783 6.81261 10.268 6.8833C10.1731 6.81772 10.0696 6.75121 9.95944 6.68734C9.60122 6.47969 9.08764 6.25 8.52778 6.25ZM7.5 8.99682C7.5 8.57599 7.61705 8.25925 7.77954 8.06262C7.92743 7.88365 8.15486 7.75 8.52778 7.75C8.70082 7.75 8.9408 7.83066 9.20716 7.98506C9.46185 8.1327 9.66288 8.30225 9.73432 8.37037C10.0223 8.64493 10.4745 8.64687 10.7648 8.37481C10.8184 8.32449 11.0375 8.15407 11.3302 7.99783C11.6327 7.83635 11.9037 7.75 12.0833 7.75C12.4499 7.75 12.6361 7.87729 12.754 8.03467C12.8954 8.22333 13 8.54424 13 8.99682C13 9.34907 12.8396 9.67594 12.5645 9.91005C12.5546 9.9185 12.5448 9.92721 12.5354 9.93617L10.25 12.0965L7.96509 9.93656C7.95556 9.92755 7.94579 9.91879 7.9358 9.91029C7.66055 9.67617 7.5 9.34919 7.5 8.99682Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nFeedback.displayName = 'Feedback';\nexport default Feedback;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/File.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface FileProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst File: React.FC<FileProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M4.93635 3.64999C4.82942 3.64999 4.72962 3.69182 4.65819 3.76193C4.58723 3.83158 4.54999 3.92303 4.54999 4.01538V16.2846C4.54999 16.377 4.58723 16.4684 4.65819 16.5381C4.72962 16.6082 4.82942 16.65 4.93635 16.65H15.1636C15.2706 16.65 15.3704 16.6082 15.4418 16.5381C15.5127 16.4684 15.55 16.377 15.55 16.2846V8.79168L10.3116 3.64999H4.93635ZM3.60745 2.69143C3.96224 2.34319 4.44052 2.14999 4.93635 2.14999H10.6182C10.8147 2.14999 11.0033 2.22711 11.1435 2.36475L16.8254 7.94167C16.969 8.0827 17.05 8.27558 17.05 8.47692V16.2846C17.05 16.7839 16.8478 17.2598 16.4925 17.6086C16.1377 17.9568 15.6595 18.15 15.1636 18.15H4.93635C4.44052 18.15 3.96224 17.9568 3.60745 17.6086C3.25219 17.2598 3.04999 16.7839 3.04999 16.2846V4.01538C3.04999 3.51609 3.25219 3.04014 3.60745 2.69143Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M10.6182 2.14999C11.0324 2.14999 11.3682 2.48578 11.3682 2.89999V7.72692H16.3C16.7143 7.72692 17.05 8.0627 17.05 8.47692C17.05 8.89113 16.7143 9.22692 16.3 9.22692H10.6182C10.204 9.22692 9.86823 8.89113 9.86823 8.47692V2.89999C9.86823 2.48578 10.204 2.14999 10.6182 2.14999Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nFile.displayName = 'File';\nexport default File;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Files.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface FilesProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Files: React.FC<FilesProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M8.871 6.767c0-.38.308-.688.688-.688h3.668a.688.688 0 0 1 0 1.376H9.559a.688.688 0 0 1-.688-.688Zm.688 2.063a.688.688 0 1 0 0 1.376h3.668a.688.688 0 0 0 0-1.376H9.559Z\"\n    />\n    <path d=\"M6.688 2A.688.688 0 0 0 6 2.688v11.798c0 .38.308.688.688.688h9.842c.38 0 .688-.308.688-.688V2.688A.688.688 0 0 0 16.53 2H6.688Zm.687 11.799V3.375h8.467V13.8H7.375Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M4.286 5.575a.688.688 0 0 0-1.376 0v10.76A1.666 1.666 0 0 0 4.576 18h8.803a.688.688 0 1 0 0-1.375H4.576a.29.29 0 0 1-.29-.29V5.574Z\" />\n  </svg>\n);\nFiles.displayName = 'Files';\nexport default Files;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Filter.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface FilterProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Filter: React.FC<FilterProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M17.8571 2.87669C18.107 3.41157 18.0246 4.04275 17.6457 4.49555L12.4892 10.6589V15.3856C12.4892 16.0185 12.097 16.5852 11.5048 16.8082L9.56669 17.5381C9.09976 17.7139 8.57627 17.6494 8.16598 17.3655C7.75569 17.0816 7.51084 16.6144 7.51084 16.1155V10.6589L2.35425 4.49555C1.97542 4.04275 1.89302 3.41157 2.14291 2.87669C2.39279 2.34182 2.92977 2 3.52013 2H16.4799C17.0702 2 17.6072 2.34182 17.8571 2.87669ZM16.4799 3.52012H3.52013L8.91611 9.96964C8.99036 10.0584 9.03096 10.1698 9.03096 10.2848V16.1155L10.969 15.3856V10.2848C10.969 10.1698 11.0096 10.0584 11.0839 9.96964L16.4799 3.52012Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nFilter.displayName = 'Filter';\nexport default Filter;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Folder.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface FolderProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Folder: React.FC<FolderProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M3 2.25C2.58579 2.25 2.25 2.58579 2.25 3V16.8571C2.25 17.2714 2.58579 17.6071 3 17.6071H16.8571C17.2714 17.6071 17.6071 17.2714 17.6071 16.8571V3C17.6071 2.58579 17.2714 2.25 16.8571 2.25H3ZM3.75 16.1071V3.75H16.1071V16.1071H3.75ZM10.5303 12.5303C10.2374 12.8232 9.76256 12.8232 9.46967 12.5303L9.46797 12.5286L6.46967 9.53033C6.17678 9.23744 6.17678 8.76256 6.46967 8.46967C6.76256 8.17678 7.23744 8.17678 7.53033 8.46967L10 10.9393L12.4697 8.46967C12.7626 8.17678 13.2374 8.17678 13.5303 8.46967C13.8232 8.76256 13.8232 9.23744 13.5303 9.53033L11.1947 11.8659L11.1903 11.8704L10.5303 12.5303Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nFolder.displayName = 'Folder';\nexport default Folder;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Form.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface FormProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Form: React.FC<FormProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M3.63889 3.5C3.60205 3.5 3.56673 3.51463 3.54068 3.54068C3.51463 3.56673 3.5 3.60205 3.5 3.63889V16.3056C3.5 16.3424 3.51463 16.3777 3.54068 16.4038C3.56673 16.4298 3.60205 16.4444 3.63889 16.4444H11.6389C11.6757 16.4444 11.711 16.4298 11.7371 16.4038C12.03 16.1109 12.5049 16.1109 12.7978 16.4038C13.0907 16.6967 13.0907 17.1715 12.7978 17.4644C12.4904 17.7718 12.0736 17.9444 11.6389 17.9444H3.63889C3.20423 17.9444 2.78737 17.7718 2.48002 17.4644C2.17267 17.1571 2 16.7402 2 16.3056V3.63889C2 3.20423 2.17267 2.78737 2.48002 2.48002C2.78737 2.17267 3.20423 2 3.63889 2H12.25C12.6642 2 13 2.33579 13 2.75C13 3.16421 12.6642 3.5 12.25 3.5H3.63889Z\"\n      fill=\"currentColor\" />\n    <path d=\"M14.4435 4.38852C14.8342 3.99781 15.3641 3.77832 15.9167 3.77832C16.4692 3.77832 16.9991 3.99781 17.3898 4.38852C17.7805 4.77922 18 5.30913 18 5.86166C18 6.4142 17.7805 6.94411 17.3898 7.33481L11.7329 12.9917C11.6182 13.1065 11.4693 13.1809 11.3086 13.2038L9.10889 13.5179C8.87521 13.5513 8.63946 13.4727 8.47255 13.3058C8.30564 13.1389 8.22705 12.9031 8.26041 12.6694L8.57448 10.4697C8.59742 10.3091 8.67186 10.1602 8.78662 10.0454L14.4435 4.38852ZM15.9167 5.27832C15.7619 5.27832 15.6136 5.33978 15.5042 5.44918L10.0241 10.9293L9.88668 11.8916L10.8491 11.7542L16.3291 6.27415C16.4385 6.16475 16.5 6.01637 16.5 5.86166C16.5 5.70695 16.4385 5.55857 16.3291 5.44918C16.2197 5.33978 16.0714 5.27832 15.9167 5.27832Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M5 6.68774C5 6.30791 5.30791 6 5.68774 6H9.35566C9.73549 6 10.0434 6.30791 10.0434 6.68774 10.0434 7.06756 9.73549 7.37547 9.35566 7.37547H5.68774C5.30791 7.37547 5 7.06756 5 6.68774zM5.68774 9C5.30791 9 5 9.30791 5 9.68774 5 10.0676 5.30791 10.3755 5.68774 10.3755H6.81226C7.19209 10.3755 7.5 10.0676 7.5 9.68774 7.5 9.30791 7.19209 9 6.81226 9H5.68774z\"\n      fill=\"currentColor\" />\n  </svg>\n);\nForm.displayName = 'Form';\nexport default Form;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Formula.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface FormulaProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Formula: React.FC<FormulaProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M10.8485 4.636C10.9933 4.23983 11.1638 3.97859 11.3367 3.82212 11.4934 3.68028 11.6764 3.59999 11.9423 3.59999H14.1667C14.6269 3.59999 15 3.24182 15 2.8 15 2.35817 14.6269 2 14.1667 2H11.9423C11.246 2 10.6556 2.23971 10.1935 2.65787 9.75109 3.05824 9.46075 3.5896 9.26369 4.13991L9.25464 4.16517 7.97024 8.72028H5.4992C5.03898 8.72028 4.6659 9.07846 4.6659 9.52028 4.6659 9.96211 5.03898 10.3203 5.4992 10.3203H7.51909L6.10475 15.3362C5.92773 15.964 5.33437 16.3999 4.65692 16.3999H2.8333C2.37308 16.3999 2 16.7581 2 17.1999 2 17.6417 2.37308 17.9999 2.8333 17.9999H4.65692C6.08709 17.9999 7.33974 17.0796 7.71344 15.7543L9.24566 10.3203H11.8323C12.2925 10.3203 12.6656 9.96211 12.6656 9.52028 12.6656 9.07846 12.2925 8.72028 11.8323 8.72028H9.69681L10.8485 4.636zM17.675 12.1124C18.0244 12.3999 18.0649 12.9049 17.7654 13.2404L16.2301 14.96 17.7652 16.6794C18.0647 17.0148 18.0242 17.5199 17.6748 17.8074 17.3254 18.0949 16.7993 18.0561 16.4998 17.7206L15.1326 16.1892 13.7656 17.7204C13.466 18.0558 12.94 18.0947 12.5906 17.8071 12.2411 17.5196 12.2007 17.0146 12.5002 16.6791L14.0351 14.96 12.5 13.2406C12.2005 12.9052 12.241 12.4002 12.5904 12.1126 12.9398 11.8251 13.4659 11.8639 13.7654 12.1994L15.1326 13.7307 16.5 12.1991C16.7995 11.8637 17.3256 11.8248 17.675 12.1124z\"\n      fill=\"currentColor\" />\n  </svg>\n);\nFormula.displayName = 'Formula';\nexport default Formula;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Forum.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ForumProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Forum: React.FC<ForumProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M7.14984 2.81681C7.51277 2.45389 8.00499 2.25 8.51825 2.25H16.8148C17.328 2.25 17.8203 2.45389 18.1832 2.81681C18.5461 3.17974 18.75 3.67197 18.75 4.18522V10.1113C18.75 10.6246 18.5461 11.1168 18.1832 11.4797C17.8203 11.8426 17.328 12.0465 16.8148 12.0465H16.399C16.395 12.0465 16.393 12.0472 16.3917 12.0478C16.3899 12.0485 16.3876 12.0499 16.3853 12.0522C16.3835 12.054 16.3823 12.0557 16.3815 12.0572C16.3812 12.0577 16.381 12.0582 16.3808 12.0587C16.3802 12.0599 16.3796 12.0619 16.3796 12.066C16.3796 13.3401 14.9058 14.0484 13.9109 13.2525L13.417 12.8574V13.9658C13.417 14.4791 13.2131 14.9713 12.8502 15.3342C12.4872 15.6971 11.995 15.901 11.4818 15.901H7.88093C7.69686 15.901 7.51826 15.9637 7.37453 16.0787L6.08911 17.107C5.09421 17.9029 3.62044 17.1946 3.62044 15.9205C3.62044 15.9164 3.61976 15.9144 3.61922 15.9132C3.61846 15.9114 3.61704 15.909 3.61474 15.9067C3.61243 15.9044 3.6101 15.903 3.60832 15.9023C3.60703 15.9017 3.60504 15.901 3.60097 15.901H3.18522C2.67197 15.901 2.17974 15.6971 1.81681 15.3342C1.45389 14.9713 1.25 14.4791 1.25 13.9658V8.03972C1.25 7.52647 1.45389 7.03424 1.81681 6.67131C2.17974 6.30839 2.67197 6.1045 3.18522 6.1045H6.58303V4.18522C6.58303 3.67197 6.78692 3.17974 7.14984 2.81681ZM8.08303 6.1045H11.4818C11.995 6.1045 12.4872 6.30839 12.8502 6.67131C13.2131 7.03424 13.417 7.52647 13.417 8.03972V10.9364L14.8479 12.0812C14.8511 12.0838 14.8534 12.0852 14.8547 12.086L14.8565 12.0869C14.8579 12.0869 14.8623 12.0865 14.8685 12.0835C14.8748 12.0806 14.8778 12.0773 14.8787 12.0763L14.8791 12.0743C14.8793 12.0728 14.8796 12.0701 14.8796 12.066C14.8796 11.2268 15.5598 10.5465 16.399 10.5465H16.8148C16.9302 10.5465 17.0409 10.5007 17.1225 10.4191C17.2041 10.3374 17.25 10.2267 17.25 10.1113V4.18522C17.25 4.06979 17.2041 3.95909 17.1225 3.87747C17.0409 3.79585 16.9302 3.75 16.8148 3.75H8.51825C8.40282 3.75 8.29212 3.79585 8.2105 3.87747C8.12888 3.95909 8.08303 4.06979 8.08303 4.18522V6.1045ZM11.917 11.269V8.03972C11.917 7.92429 11.8711 7.81359 11.7895 7.73197C11.7079 7.65035 11.5972 7.6045 11.4818 7.6045H3.18522C3.06979 7.6045 2.95909 7.65035 2.87747 7.73197C2.79585 7.81359 2.75 7.92429 2.75 8.03972V13.9658C2.75 14.0812 2.79585 14.1919 2.87747 14.2736C2.95909 14.3552 3.06979 14.401 3.18522 14.401H3.60097C4.44015 14.401 5.12044 15.0813 5.12044 15.9205C5.12044 15.9246 5.12073 15.9273 5.12095 15.9288L5.12135 15.9308C5.12221 15.9318 5.12525 15.9351 5.13147 15.938C5.1377 15.941 5.14213 15.9414 5.14348 15.9414L5.14528 15.9405C5.14657 15.9397 5.14886 15.9383 5.15206 15.9357L6.43748 14.9074C6.84719 14.5796 7.35625 14.401 7.88093 14.401H11.4818C11.5972 14.401 11.7079 14.3552 11.7895 14.2736C11.8711 14.1919 11.917 14.0812 11.917 13.9658V11.3231C11.9163 11.3051 11.9163 11.2871 11.917 11.269Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nForum.displayName = 'Forum';\nexport default Forum;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Forward.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ForwardProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Forward: React.FC<ForwardProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M11.258 3.307a.75.75 0 0 0-.462.693v2.523h-.341c-3.049 0-4.902 1.556-6.094 3.493-.925 1.504-1.485 3.3-1.938 4.754-.11.354-.215.688-.316.993a.75.75 0 0 0 1.196.81c.477-.404.892-.765 1.264-1.087.914-.795 1.565-1.36 2.222-1.771.845-.53 1.676-.783 3.12-.783h.886v2.523a.75.75 0 0 0 1.305.504l5.455-6a.75.75 0 0 0-.025-1.035L12.076 3.47a.75.75 0 0 0-.818-.163Zm4.706 6.172-3.668 4.036v-1.333a.75.75 0 0 0-.75-.75H9.909c-1.674 0-2.793.307-3.917 1.012-.523.328-1.053.749-1.646 1.25.342-.998.742-1.997 1.293-2.892.99-1.608 2.41-2.78 4.815-2.78h1.091a.75.75 0 0 0 .75-.75v-1.46l3.669 3.668Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nForward.displayName = 'Forward';\nexport default Forward;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Fullscreen.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface FullscreenProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Fullscreen: React.FC<FullscreenProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M3.482 12.779a.75.75 0 0 0-1.5 0v4.447c0 .414.336.75.75.75H7.18a.75.75 0 0 0 0-1.5H4.543l4.278-4.279a.75.75 0 1 0-1.06-1.06l-4.279 4.278v-2.636Zm7.696-3.916a.75.75 0 0 1 0-1.06l4.278-4.279H12.82a.75.75 0 1 1 0-1.5h4.447a.75.75 0 0 1 .75.75v4.447a.75.75 0 0 1-1.5 0V4.585l-4.278 4.278a.75.75 0 0 1-1.061 0Zm0 2.274a.75.75 0 0 1 1.06 0l4.279 4.278V12.78a.75.75 0 1 1 1.5 0v4.447a.75.75 0 0 1-.75.75H12.82a.75.75 0 0 1 0-1.5h2.636l-4.278-4.278a.75.75 0 0 1 0-1.06ZM8.822 8.863a.75.75 0 0 0 0-1.06l-4.278-4.28H7.18a.75.75 0 0 0 0-1.5H2.734a.75.75 0 0 0-.75.75V7.22a.75.75 0 0 0 1.5 0V4.585L7.76 8.863a.75.75 0 0 0 1.061 0Z\"\n    />\n  </svg>\n);\nFullscreen.displayName = 'Fullscreen';\nexport default Fullscreen;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/FullscreenClose.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface FullscreenCloseProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst FullscreenClose: React.FC<FullscreenCloseProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M3.28033 2.21967C2.98744 1.92678 2.51256 1.92678 2.21967 2.21967C1.92678 2.51256 1.92678 2.98744 2.21967 3.28033L5.43934 6.5H2.75C2.33579 6.5 2 6.83579 2 7.25C2 7.66421 2.33579 8 2.75 8H7.25H8V7.25V2.75C8 2.33579 7.66421 2 7.25 2C6.83579 2 6.5 2.33579 6.5 2.75V5.43934L3.28033 2.21967ZM13.5 14.5607L16.7197 17.7803C17.0126 18.0732 17.4874 18.0732 17.7803 17.7803C18.0732 17.4874 18.0732 17.0126 17.7803 16.7197L14.5607 13.5H17.25C17.6642 13.5 18 13.1642 18 12.75C18 12.3358 17.6642 12 17.25 12H12.75H12V12.75V17.25C12 17.6642 12.3358 18 12.75 18C13.1642 18 13.5 17.6642 13.5 17.25V14.5607ZM17.7803 2.21967C18.0732 2.51256 18.0732 2.98744 17.7803 3.28033L14.5607 6.5H17.25C17.6642 6.5 18 6.83579 18 7.25C18 7.66421 17.6642 8 17.25 8H12.75H12V7.25V2.75C12 2.33579 12.3358 2 12.75 2C13.1642 2 13.5 2.33579 13.5 2.75V5.43934L16.7197 2.21967C17.0126 1.92678 17.4874 1.92678 17.7803 2.21967ZM2.21967 16.7197C1.92678 17.0126 1.92678 17.4874 2.21967 17.7803C2.51256 18.0732 2.98744 18.0732 3.28033 17.7803L6.5 14.5607L6.5 17.25C6.5 17.6642 6.83579 18 7.25 18C7.66421 18 8 17.6642 8 17.25L8 12.75L8 12H7.25L2.75 12C2.33579 12 2 12.3358 2 12.75C2 13.1642 2.33579 13.5 2.75 13.5H5.43934L2.21967 16.7197Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nFullscreenClose.displayName = 'FullscreenClose';\nexport default FullscreenClose;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Gallery.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface GalleryProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Gallery: React.FC<GalleryProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path fill=\"currentColor\" d=\"M7.8 6.3a1.5 1.5 0 1 0 3 0 1.5 1.5 0 0 0-3 0Z\" />\n    <path fill=\"currentColor\" d=\"M7.67 1.95A2.75 2.75 0 0 0 4.92 4.7v7.6a2.75 2.75 0 0 0 2.75 2.75h7.6a2.75 2.75 0 0 0 2.75-2.75V4.7a2.75 2.75 0 0 0-2.75-2.75h-7.6ZM6.42 4.7c0-.69.56-1.25 1.25-1.25h7.6c.69 0 1.25.56 1.25 1.25v4.2l-2.238-1.72a1.15 1.15 0 0 0-1.525.057l-5.984 5.934a1.246 1.246 0 0 1-.353-.87V4.7Zm7.16 3.832 2.94 2.26V12.3c0 .69-.56 1.25-1.25 1.25H8.52l5.06-5.018Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path fill=\"currentColor\" d=\"M3.55 4.3a.75.75 0 0 0-1.5 0v12a1.75 1.75 0 0 0 1.75 1.75h12a.75.75 0 0 0 0-1.5h-12a.25.25 0 0 1-.25-.25v-12Z\" />\n  </svg>\n);\nGallery.displayName = 'Gallery';\nexport default Gallery;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Gantt.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface GanttProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Gantt: React.FC<GanttProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 21\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"21\" } {...props}>\n    <path fill=\"currentColor\" d=\"M2.25 5.41A.75.75 0 0 1 3 4.66h7.821a.75.75 0 0 1 0 1.5H3a.75.75 0 0 1-.75-.75Zm3 5.214a.75.75 0 0 1 .75-.75h7.821a.75.75 0 0 1 0 1.5H6a.75.75 0 0 1-.75-.75Zm2 5.214a.75.75 0 0 1 .75-.75h8.343a.75.75 0 0 1 0 1.5H8a.75.75 0 0 1-.75-.75Z\"\n    />\n  </svg>\n);\nGantt.displayName = 'Gantt';\nexport default Gantt;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Gif.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface GifProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Gif: React.FC<GifProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M8.38281 12.9091C8.09268 13.2549 7.68256 13.5241 7.15245 13.7166 6.62234 13.9055 6.03492 14 5.39019 14 4.71323 14 4.11865 13.8538 3.60645 13.5615 3.09783 13.2656 2.70383 12.8378 2.42445 12.2781 2.14865 11.7184 2.00716 11.0606 2 10.3048V9.7754C2 8.99822 2.13074 8.3262 2.39221 7.75936 2.65726 7.18895 3.03694 6.75401 3.53123 6.45455 4.0291 6.15152 4.61115 6 5.27737 6 6.20506 6 6.93038 6.22103 7.45332 6.6631 7.97627 7.1016 8.2861 7.74153 8.38281 8.58289H6.81397C6.74233 8.13725 6.58294 7.81105 6.3358 7.60428 6.09223 7.3975 5.75554 7.29412 5.32572 7.29412 4.7777 7.29412 4.36042 7.49911 4.07388 7.90909 3.78733 8.31907 3.64227 8.9287 3.63868 9.73797V10.2353C3.63868 11.0517 3.79449 11.6684 4.10611 12.0856 4.41773 12.5027 4.87441 12.7112 5.47616 12.7112 6.08149 12.7112 6.5131 12.5829 6.77099 12.3262V10.984H5.30423V9.80214H8.38281V12.9091zM11.4077 13.893H9.79584V6.10695H11.4077V13.893zM17.6132 10.7112H14.5185V13.893H12.9066V6.10695H18V7.40642H14.5185V9.41711H17.6132V10.7112z\"\n      fill=\"currentColor\" />\n  </svg>\n);\nGif.displayName = 'Gif';\nexport default Gif;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Globe.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface GlobeProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Globe: React.FC<GlobeProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M4.52 4.52a7.75 7.75 0 0 1 12.988 3.56 7.283 7.283 0 0 1 .242 1.89V10a7.75 7.75 0 0 1-15.296 1.768 5.989 5.989 0 0 1-.203-1.652L2.25 10a7.75 7.75 0 0 1 2.27-5.48Zm-.61 6.883a6.248 6.248 0 0 1-.159-1.284c.003-.123.01-.246.024-.369h2.788c.075 0 .136.022.175.047.025.017.034.03.035.034l.473 1.607-.001.002a.198.198 0 0 1-.07.045.348.348 0 0 1-.133.025h-.689a.75.75 0 0 0-.73.579l-.37 1.57a5.23 5.23 0 0 1-1.13-1.646 4.691 4.691 0 0 1-.213-.61Zm2.536 3.739.501-2.132h.095c.242 0 .483-.046.708-.14.224-.093.431-.233.6-.416a1.51 1.51 0 0 0 .357-.659c.062-.25.057-.511-.016-.76l-.48-1.63a1.566 1.566 0 0 0-.643-.857 1.82 1.82 0 0 0-1.005-.298H4a6.25 6.25 0 0 1 10.062-3h-.75a1.624 1.624 0 0 0-1.576 1.23l-.438 1.75a1.625 1.625 0 0 0 1.576 2.02h.285l.356 2.143a1.625 1.625 0 0 0 1.488 1.353 6.249 6.249 0 0 1-8.557 1.396ZM16.25 9.97a6.246 6.246 0 0 0-.194-1.514 5.783 5.783 0 0 0-.765-1.706h-1.98a.124.124 0 0 0-.12.094l-.437 1.75a.127.127 0 0 0 .023.107.124.124 0 0 0 .097.048h.92a.75.75 0 0 1 .74.627l.461 2.77a.125.125 0 0 0 .123.104h.651c.313-.72.477-1.496.48-2.28Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nGlobe.displayName = 'Globe';\nexport default Globe;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Graph.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface GraphProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Graph: React.FC<GraphProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M3.5 2.74512C3.5 2.3309 3.16421 1.99512 2.75 1.99512C2.33579 1.99512 2 2.3309 2 2.74512V17.2544C2 17.6686 2.33579 18.0044 2.75 18.0044H17.2593C17.6735 18.0044 18.0093 17.6686 18.0093 17.2544C18.0093 16.8402 17.6735 16.5044 17.2593 16.5044H3.5V2.74512ZM13.7888 4.925C13.6235 4.80694 13.4174 4.76097 13.2177 4.79758C13.0179 4.8342 12.8415 4.95028 12.7288 5.11927L8.7719 11.0547L6.62854 8.91132C6.33565 8.61843 5.86078 8.61843 5.56788 8.91132C5.27499 9.20421 5.27499 9.67909 5.56788 9.97198L8.35814 12.7622C8.51702 12.9211 8.73877 13.0004 8.96237 12.9783C9.18597 12.9561 9.38787 12.8349 9.51251 12.6479L13.5472 6.59581L16.8233 8.93585C17.1604 9.17661 17.6288 9.09854 17.8695 8.76148C18.1103 8.42442 18.0322 7.95601 17.6952 7.71525L13.7888 4.925Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nGraph.displayName = 'Graph';\nexport default Graph;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Group.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface GroupProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Group: React.FC<GroupProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M16 4.5H7.5L7.5 15.5H16C16.2761 15.5 16.5 15.2761 16.5 15V5C16.5 4.72386 16.2761 4.5 16 4.5ZM4 4.5H6L6 15.5H4C3.72386 15.5 3.5 15.2761 3.5 15V5C3.5 4.72386 3.72386 4.5 4 4.5ZM4 3C2.89543 3 2 3.89543 2 5V15C2 16.1046 2.89543 17 4 17H16C17.1046 17 18 16.1046 18 15V5C18 3.89543 17.1046 3 16 3H4ZM15 14V9H9V14H15Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nGroup.displayName = 'Group';\nexport default Group;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Guest.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface GuestProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Guest: React.FC<GuestProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M10.75 3a.75.75 0 0 0-1.5 0v1.25H3.923A1.673 1.673 0 0 0 2.25 5.923v8.308a1.673 1.673 0 0 0 1.673 1.673h12a1.673 1.673 0 0 0 1.673-1.673V5.923a1.673 1.673 0 0 0-1.673-1.673H10.75V3Zm-1.5 2.75V6a.75.75 0 0 0 1.5 0v-.25h5.173a.173.173 0 0 1 .173.173v8.308a.173.173 0 0 1-.173.173h-4.868a3.52 3.52 0 0 0-1.818-2.374l.051-.05a2.366 2.366 0 1 0-3.293.05 3.52 3.52 0 0 0-1.816 2.374h-.256a.173.173 0 0 1-.173-.173V5.923a.173.173 0 0 1 .173-.173H9.25Zm-3.06 7.976a2.019 2.019 0 0 0-.448.678h3.75a2.019 2.019 0 0 0-3.303-.678Zm1.094-4.218a.865.865 0 1 1 .663 1.6.865.865 0 0 1-.663-1.6Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nGuest.displayName = 'Guest';\nexport default Guest;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Health.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface HealthProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Health: React.FC<HealthProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M3.74957 7.76846C3.79144 6.5508 4.55992 5.3961 5.61803 4.94947C6.59683 4.53632 8.03165 4.65629 9.59416 6.4258C9.73655 6.58706 9.94134 6.67941 10.1565 6.67937C10.3716 6.67934 10.5764 6.58692 10.7187 6.42561C11.7569 5.24912 12.7373 4.81282 13.5308 4.75651C14.3242 4.70021 15.0444 5.01472 15.5937 5.56266C16.725 6.6911 16.9878 8.61528 15.7135 9.90176L10.1563 14.9837L6.34441 11.4984C6.03872 11.2189 5.56432 11.2401 5.28481 11.5458C5.00531 11.8515 5.02654 12.3259 5.33223 12.6054L9.65026 16.5535C9.93681 16.8155 10.376 16.8155 10.6625 16.5535L16.7388 10.9968C16.747 10.9893 16.755 10.9817 16.7629 10.9738C18.758 8.97937 18.245 6.08863 16.653 4.50067C15.8391 3.68877 14.7078 3.16922 13.4246 3.26028C12.3354 3.33757 11.2185 3.84823 10.156 4.85062C8.43061 3.22637 6.57897 2.9157 5.03471 3.56754C3.40038 4.25739 2.31096 5.95752 2.25045 7.7169C2.23621 8.13087 2.56026 8.478 2.97423 8.49224C3.3882 8.50647 3.73533 8.18243 3.74957 7.76846ZM8.09218 7.44723C7.97714 7.17881 7.71676 7.00158 7.42485 6.993C7.13294 6.98442 6.8626 7.14606 6.732 7.40726L5.83832 9.19462H4.09989C3.68568 9.19462 3.34989 9.53041 3.34989 9.94462C3.34989 10.3588 3.68568 10.6946 4.09989 10.6946H6.30184C6.58592 10.6946 6.84562 10.5341 6.97266 10.28L7.35046 9.52444L8.36492 11.8915C8.47041 12.1377 8.69913 12.3089 8.96502 12.3408C9.2309 12.3726 9.49361 12.2603 9.65428 12.0461L11.0807 10.1441H12.3572C12.7714 10.1441 13.1072 9.80835 13.1072 9.39414C13.1072 8.97992 12.7714 8.64414 12.3572 8.64414H10.7057C10.4697 8.64414 10.2474 8.75528 10.1057 8.94414L9.23263 10.1083L8.09218 7.44723Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nHealth.displayName = 'Health';\nexport default Health;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Heart.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface HeartProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Heart: React.FC<HeartProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M4.64486 10.3388C4.64977 10.3436 4.65466 10.3484 4.65951 10.3532L9.99574 15.6895L15.3329 10.3523C15.3377 10.3475 15.3426 10.3427 15.3475 10.3379C15.3785 10.3086 15.3899 10.2982 15.3785 10.3086C15.3823 10.3051 15.3861 10.3016 15.3899 10.2982C16.0674 9.68825 16.4914 8.80691 16.4914 7.8257C16.4914 5.98897 15.0024 4.5 13.1657 4.5C12.1647 4.5 11.5513 5.06987 11.0596 5.55744L11.0519 5.56512C10.7694 5.84526 10.3871 6.00169 9.98928 5.99999C9.59143 5.99829 9.21055 5.8386 8.93045 5.55606C8.45718 5.07868 7.84112 4.5 6.8257 4.5C4.98897 4.5 3.5 5.98897 3.5 7.8257C3.5 8.80725 3.92427 9.68887 4.60218 10.2988C4.60601 10.3023 4.60982 10.3058 4.61362 10.3093L4.64486 10.3388ZM10.5261 17.2805L16.3935 11.413C17.3735 10.5307 17.9914 9.24988 17.9914 7.8257C17.9914 5.16054 15.8308 3 13.1657 3C11.5326 3 10.5394 3.96129 10.0258 4.47012C10.0183 4.47762 10.0108 4.48502 10.0034 4.49232L9.99569 4.5C9.99174 4.49601 9.98775 4.49199 9.98373 4.48794C9.484 3.98411 8.48664 3 6.8257 3C4.16054 3 2 5.16054 2 7.8257C2 9.25038 2.61832 10.5316 3.59885 11.4139L9.46541 17.2805C9.60606 17.4211 9.79683 17.5001 9.99574 17.5001C10.1947 17.5001 10.3854 17.4211 10.5261 17.2805Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nHeart.displayName = 'Heart';\nexport default Heart;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Help.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface HelpProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Help: React.FC<HelpProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M10.4397 3.50655C9.93674 3.47178 9.43392 3.57593 8.98617 3.80762C8.53842 4.03931 8.16298 4.38962 7.90088 4.82027C7.63877 5.25092 7.5001 5.74533 7.5 6.24948C7.49992 6.66369 7.16407 6.99941 6.74986 6.99933C6.33564 6.99925 5.99992 6.6634 6 6.24919C6.00015 5.47006 6.21447 4.70597 6.61954 4.04042C7.02461 3.37487 7.60484 2.83347 8.29681 2.47541C8.98878 2.11734 9.76587 1.95638 10.5431 2.01012C11.3204 2.06386 12.068 2.33024 12.7041 2.78013C13.3402 3.23002 13.8404 3.84611 14.15 4.56107C14.4596 5.27604 14.5667 6.06236 14.4597 6.83409C14.3526 7.60582 14.0354 8.33327 13.5429 8.93693C13.0503 9.54059 12.4012 9.99723 11.6667 10.2569C11.4716 10.3259 11.3028 10.4537 11.1834 10.6226C11.064 10.7916 10.9999 10.9934 11 11.2003V12.3743C11 12.7885 10.6642 13.1243 10.25 13.1243C9.83579 13.1243 9.5 12.7885 9.5 12.3743V11.2011C9.49981 10.684 9.65995 10.1792 9.95838 9.75691C10.2569 9.33453 10.679 9.01513 11.1667 8.84273C11.642 8.67468 12.0619 8.37921 12.3807 7.9886C12.6994 7.598 12.9046 7.1273 12.9739 6.62794C13.0432 6.12858 12.9739 5.61979 12.7735 5.15717C12.5732 4.69454 12.2495 4.29589 11.8379 4.00479C11.4263 3.71368 10.9426 3.54132 10.4397 3.50655ZM10.25 15.1246C10.0151 15.1246 9.78555 15.1942 9.59026 15.3247C9.39498 15.4552 9.24277 15.6406 9.15289 15.8576C9.06301 16.0746 9.0395 16.3134 9.08532 16.5437C9.13114 16.7741 9.24423 16.9857 9.41031 17.1518C9.57639 17.3178 9.78798 17.4309 10.0183 17.4768C10.2487 17.5226 10.4874 17.4991 10.7044 17.4092C10.9214 17.3193 11.1069 17.1671 11.2374 16.9718C11.3679 16.7765 11.4375 16.5469 11.4375 16.3121C11.4375 15.9971 11.3124 15.6951 11.0897 15.4724C10.867 15.2497 10.5649 15.1246 10.25 15.1246Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nHelp.displayName = 'Help';\nexport default Help;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Hide.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface HideProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Hide: React.FC<HideProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M5.44 14.49c-.28.3-.27.78.03 1.06.3.28.78.27 1.06-.03l.97-1.02c.78.27 1.6.42 2.42.41 2.9.04 5.7-1.96 7.37-3.79l.02-.02c.08-.09.21-.23.31-.39.11-.17.27-.45.27-.79s-.15-.63-.27-.79c-.11-.16-.23-.3-.31-.39l-.02-.02c-.65-.72-1.46-1.44-2.37-2.06l1.29-1.37c.28-.3.27-.78-.03-1.06a.755.755 0 0 0-1.06.03L13.6 5.87c-1.16-.59-2.41-.96-3.68-.94-2.85-.04-5.66 1.91-7.37 3.79-.18.2-.54.64-.54 1.21s.36 1 .54 1.2c.89.98 2.11 2.01 3.49 2.75l-.6.63v-.02Zm3.22-1.22c.42.09.83.14 1.25.14h.03c2.26.04 4.69-1.59 6.25-3.3l.02-.02s.07-.08.1-.12c.02-.02.04-.04.05-.06a.265.265 0 0 0-.05-.06c-.03-.04-.07-.07-.1-.12l-.02-.02c-.65-.72-1.44-1.4-2.3-1.96l-5.22 5.53-.01-.01Zm1.2-5.88c.32 0 .64.06.94.19.27.11.52.27.73.47L12.52 7c-.85-.38-1.74-.6-2.59-.59H9.9c-2.22-.04-4.65 1.55-6.24 3.3-.07.07-.11.14-.14.18v.03c.03.05.07.11.14.18.92 1.01 2.14 1.99 3.45 2.62l1.06-1.13-.04-.04c-.34-.34-.57-.78-.67-1.25-.09-.47-.05-.97.14-1.41.18-.45.5-.83.9-1.1.4-.27.87-.41 1.36-.41m.36 1.57a.94.94 0 0 0-.88.09c-.16.1-.28.25-.35.42-.07.17-.09.36-.05.55.04.18.13.35.26.48v.01l1.3-1.37c-.08-.07-.17-.13-.28-.18Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nHide.displayName = 'Hide';\nexport default Hide;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Highlight.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface HighlightProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Highlight: React.FC<HighlightProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path fill=\"currentColor\" d=\"m9.58 13.9-3.23.58a.717.717 0 0 1-.62-.2.68.68 0 0 1-.2-.62l.57-3.24c.03-.15.1-.28.2-.38l7.22-7.22c.33-.33.79-.52 1.26-.52s.93.19 1.26.52l1.14 1.14c.33.33.52.79.52 1.26s-.19.93-.52 1.26L9.96 13.7a.74.74 0 0 1-.38.2Zm4.94-10.09-7.07 7.07h-.01l-.35 2.02 2.02-.36 7.07-7.07a.363.363 0 0 0 0-.52l-1.14-1.14a.363.363 0 0 0-.52 0Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path fill=\"currentColor\" d=\"M3 16h14c.55 0 1 .45 1 1s-.45 1-1 1H3c-.55 0-1-.45-1-1s.45-1 1-1Z\" />\n  </svg>\n);\nHighlight.displayName = 'Highlight';\nexport default Highlight;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/HighlightColorBucket.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface HighlightColorBucketProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst HighlightColorBucket: React.FC<HighlightColorBucketProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M6.34344 4.11612C6.57786 3.8817 6.8958 3.75 7.22732 3.75C7.39148 3.75 7.55402 3.78233 7.70568 3.84515C7.85734 3.90797 7.99514 4.00004 8.11121 4.11612C8.22728 4.23219 8.31936 4.36999 8.38217 4.52165C8.38681 4.53283 8.39127 4.54407 8.39557 4.55537C8.29619 4.61768 8.20333 4.69139 8.11905 4.77566L5.97733 6.918V5C5.97733 4.66848 6.10902 4.35054 6.34344 4.11612ZM4.47733 8.41843V5C4.47733 4.27065 4.76706 3.57118 5.28278 3.05546C5.79851 2.53973 6.49798 2.25 7.22732 2.25C7.58846 2.25 7.94606 2.32113 8.2797 2.45933C8.61335 2.59753 8.91651 2.8001 9.17187 3.05546C9.42723 3.31082 9.62979 3.61398 9.76799 3.94762C9.83894 4.1189 9.89221 4.2965 9.92726 4.47764C10.0798 4.55293 10.2204 4.65314 10.343 4.77566L16.1371 10.5711C16.2915 10.7258 16.3995 10.9214 16.448 11.1345C16.4964 11.3476 16.4837 11.5701 16.4114 11.7764C16.339 11.9826 16.2099 12.1642 16.039 12.3004C15.868 12.4365 15.6621 12.5217 15.4449 12.546L13.9384 12.7137L10.3433 16.3087C10.0447 16.6077 9.68966 16.8452 9.29927 17.007C8.90873 17.169 8.49011 17.2523 8.06734 17.2523C7.64457 17.2523 7.22594 17.169 6.8354 17.007C6.44499 16.8452 6.09029 16.608 5.7916 16.309L3.46525 13.9819C3.16639 13.6833 2.92898 13.3283 2.7672 12.938C2.60536 12.5476 2.52206 12.129 2.52206 11.7064C2.52206 11.2837 2.60536 10.8652 2.7672 10.4747C2.92904 10.0843 3.16624 9.72952 3.46525 9.43079L4.47733 8.41843ZM9.17963 5.8364L4.52574 10.4916C4.36617 10.651 4.23926 10.8407 4.15289 11.0491C4.06652 11.2574 4.02206 11.4808 4.02206 11.7064C4.02206 11.9319 4.06652 12.1553 4.15289 12.3637C4.23926 12.572 4.36585 12.7614 4.52542 12.9208L6.85241 15.2484C7.01185 15.4081 7.20146 15.535 7.40988 15.6214C7.6183 15.7078 7.84171 15.7523 8.06734 15.7523C8.29296 15.7523 8.51637 15.7078 8.72479 15.6214C8.93322 15.535 9.12256 15.4084 9.282 15.2487L13.0637 11.467C13.1841 11.3466 13.3418 11.2708 13.5111 11.252L14.578 11.1332L9.28238 5.8364C9.26877 5.82284 9.25023 5.81512 9.231 5.81512C9.21173 5.81512 9.19325 5.82278 9.17963 5.8364ZM15.4947 13.5053L14.392 15.7106C14.2763 15.942 14.2364 16.204 14.2779 16.4593C14.3194 16.7147 14.4403 16.9505 14.6233 17.1333C14.7377 17.2479 14.8736 17.3389 15.0231 17.4009C15.1727 17.463 15.3331 17.4949 15.495 17.4949C15.6569 17.4949 15.8173 17.463 15.9668 17.4009C16.1164 17.3389 16.2523 17.2479 16.3667 17.1333C16.5496 16.9504 16.6703 16.7146 16.7117 16.4592C16.7531 16.2039 16.7131 15.942 16.5973 15.7106L15.4947 13.5053Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nHighlightColorBucket.displayName = 'HighlightColorBucket';\nexport default HighlightColorBucket;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Home.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface HomeProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Home: React.FC<HomeProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M9.56992 2.1408C9.82591 1.95307 10.1741 1.95307 10.4301 2.1408L17.7028 7.47413C17.8896 7.61113 18 7.82894 18 8.06061V16.7879C18 17.1895 17.6744 17.5152 17.2727 17.5152H11.9394C11.5377 17.5152 11.2121 17.1895 11.2121 16.7879V13.1515H8.78788V16.7879C8.78788 17.1895 8.46227 17.5152 8.06061 17.5152H2.72727C2.32561 17.5152 2 17.1895 2 16.7879V8.06061C2 7.82894 2.11037 7.61113 2.29719 7.47413L9.56992 2.1408ZM3.45455 8.42914V16.0606H7.33333V12.4242C7.33333 12.0226 7.65894 11.697 8.06061 11.697H11.9394C12.3411 11.697 12.6667 12.0226 12.6667 12.4242V16.0606H16.5455V8.42914L10 3.62914L3.45455 8.42914Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nHome.displayName = 'Home';\nexport default Home;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/IPRestrictions.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface IPRestrictionsProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst IPRestrictions: React.FC<IPRestrictionsProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M8.4533 3.85294C9.62592 3.55032 10.8603 3.58661 12.0132 3.95759C12.7346 4.18975 13.4056 4.54703 13.9969 5.00977H13.1769C12.7971 5.00981 12.4282 5.13678 12.1289 5.37052C11.8295 5.60425 11.6168 5.93143 11.5246 6.29988L11.048 8.20661C10.9475 8.60846 11.1918 9.01566 11.5937 9.11612C11.9955 9.21658 12.4027 8.97226 12.5032 8.57041L12.9799 6.66368C12.9909 6.61973 13.0163 6.58072 13.052 6.55284C13.0877 6.52495 13.1318 6.50979 13.1771 6.50977H15.3845C15.9214 7.31842 16.2691 8.24138 16.3974 9.20973C16.4518 9.62035 16.8288 9.90914 17.2394 9.85475C17.65 9.80036 17.9388 9.42339 17.8844 9.01276C17.6881 7.53084 17.0754 6.13502 16.1175 4.98744C15.1595 3.83986 13.8956 2.98761 12.4726 2.5297C11.0496 2.07178 9.52593 2.02699 8.07849 2.40052C6.63104 2.77405 5.31928 3.55058 4.29557 4.63991C3.27186 5.72924 2.57822 7.08665 2.29522 8.55448C2.01221 10.0223 2.15146 11.5403 2.69679 12.9322C3.24211 14.324 4.17114 15.5326 5.37595 16.4175C6.58076 17.3024 8.0119 17.8273 9.50314 17.9313C9.91635 17.9601 10.2747 17.6484 10.3035 17.2352C10.3323 16.822 10.0207 16.4637 9.60746 16.4349C8.46486 16.3552 7.36581 15.9705 6.42424 15.3225L6.85189 13.1834H6.92286C7.18172 13.1834 7.43717 13.1244 7.6698 13.0108C7.90243 12.8973 8.10612 12.7322 8.2654 12.5282C8.42468 12.3241 8.53536 12.0864 8.58903 11.8332C8.6427 11.58 8.63794 11.3178 8.57513 11.0667L8.09844 9.15999C8.00628 8.79153 7.79361 8.46445 7.49425 8.23072C7.19488 7.99699 6.8259 7.87001 6.4461 7.86997H4.03511C4.33055 7.05454 4.78992 6.30424 5.38864 5.66714C6.21799 4.78464 7.28068 4.15555 8.4533 3.85294ZM5.13114 14.1392C4.7481 13.6791 4.43057 13.1664 4.18894 12.6154C4.15565 12.5393 4.1238 12.4625 4.09342 12.385C3.71718 11.4247 3.57954 10.3903 3.68859 9.36997H6.4461C6.49141 9.37 6.53542 9.38515 6.57114 9.41304C6.60686 9.44093 6.63226 9.48004 6.64328 9.52399L7.11996 11.4307C7.12746 11.4607 7.12803 11.492 7.12162 11.5222C7.11521 11.5525 7.102 11.5808 7.08298 11.6052C7.06397 11.6296 7.03965 11.6493 7.01187 11.6628C6.98413 11.6764 6.95357 11.6834 6.9227 11.6834H6.23699C5.87946 11.6834 5.57164 11.9358 5.50154 12.2864L5.13114 14.1392ZM15.1108 10.5C14.4062 10.5 13.7305 10.7799 13.2322 11.2781C12.734 11.7764 12.4541 12.4521 12.4541 13.1567V13.3604H12.25C11.8358 13.3604 11.5 13.6961 11.5 14.1104V18.8772C11.5 19.2914 11.8358 19.6272 12.25 19.6272H17.9702C18.3844 19.6272 18.7202 19.2914 18.7202 18.8772V14.1104C18.7202 13.6961 18.3844 13.3604 17.9702 13.3604H17.7676V13.1567C17.7676 12.4521 17.4877 11.7764 16.9894 11.2781C16.4912 10.7799 15.8154 10.5 15.1108 10.5ZM14.2929 12.3388C14.5098 12.1219 14.804 12 15.1108 12C15.4176 12 15.7118 12.1219 15.9288 12.3388C16.1457 12.5557 16.2676 12.8499 16.2676 13.1567V13.3601H13.9541V13.1567C13.9541 12.8499 14.076 12.5557 14.2929 12.3388ZM13 18.1272V14.8604H17.2202V18.1272H13ZM16.0695 16.5768C16.0695 17.0738 15.6666 17.4768 15.1695 17.4768C14.6725 17.4768 14.2695 17.0738 14.2695 16.5768C14.2695 16.0797 14.6725 15.6768 15.1695 15.6768C15.6666 15.6768 16.0695 16.0797 16.0695 16.5768Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nIPRestrictions.displayName = 'IPRestrictions';\nexport default IPRestrictions;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Idea.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface IdeaProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Idea: React.FC<IdeaProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path fill=\"currentColor\" d=\"M10.097 1.25a.75.75 0 0 1 .75.75v1.934a.75.75 0 0 1-1.5 0V2a.75.75 0 0 1 .75-.75ZM4.412 3.31a.75.75 0 0 1 1.06.005l1.367 1.38A.75.75 0 1 1 5.773 5.75L4.407 4.37a.75.75 0 0 1 .005-1.06Zm11.369 0a.75.75 0 0 1 .005 1.06L14.42 5.75a.75.75 0 1 1-1.066-1.055l1.367-1.38a.75.75 0 0 1 1.06-.005Z\"\n    />\n    <path fill=\"currentColor\" d=\"M9.986 5.99a5.264 5.264 0 0 1 5.373 5.283v.007a5.263 5.263 0 0 1-.945 2.944l-.141.201c-.357.51-.69.986-.953 1.484-.291.553-.462 1.096-.462 1.621a1.255 1.255 0 0 1-1.252 1.22H8.587a1.253 1.253 0 0 1-1.25-1.221c0-.514-.167-1.043-.453-1.584-.268-.506-.614-.992-.984-1.51l-.093-.132a5.264 5.264 0 0 1 4.18-8.313ZM8.827 17.25h2.54c.049-.753.307-1.434.626-2.04.31-.588.702-1.148 1.052-1.647l.138-.197a3.763 3.763 0 0 0 .676-2.102 3.763 3.763 0 1 0-6.83 2.17l.101.142c.36.503.763 1.069 1.08 1.668.315.595.568 1.265.617 2.006Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path fill=\"currentColor\" d=\"M1.25 7.84A.75.75 0 0 1 2 7.09h1.934a.75.75 0 1 1 0 1.5H2a.75.75 0 0 1-.75-.75Zm14.259 0a.75.75 0 0 1 .75-.75h1.934a.75.75 0 0 1 0 1.5H16.26a.75.75 0 0 1-.75-.75Z\"\n    />\n  </svg>\n);\nIdea.displayName = 'Idea';\nexport default Idea;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Image.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ImageProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Image: React.FC<ImageProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M6.997 4.382a2.615 2.615 0 1 0 0 5.23 2.615 2.615 0 0 0 0-5.23ZM6.21 6.209a1.115 1.115 0 1 1 1.577 1.577A1.115 1.115 0 0 1 6.21 6.209Z\" fillRule=\"evenodd\"\n      clipRule=\"evenodd\" />\n    <path d=\"M2.25 5A2.75 2.75 0 0 1 5 2.25h9.857A2.75 2.75 0 0 1 17.607 5v9.857a2.75 2.75 0 0 1-2.75 2.75H5a2.75 2.75 0 0 1-2.75-2.75V5Zm13.857 0v5.437L13.242 8.38a1.283 1.283 0 0 0-1.634.056l-7.663 7.093a1.245 1.245 0 0 1-.195-.672V5c0-.69.56-1.25 1.25-1.25h9.857c.69 0 1.25.56 1.25 1.25Zm-1.25 11.107H5.53l6.947-6.43 3.631 2.606v2.574c0 .69-.56 1.25-1.25 1.25Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nImage.displayName = 'Image';\nexport default Image;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Inbox.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface InboxProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Inbox: React.FC<InboxProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M1.91797 11.0667C1.91797 10.9801 1.93265 10.8969 1.95966 10.8195L2.84186 10.5681L3.72406 10.3167H7.45058C7.86479 10.3167 8.20058 10.6525 8.20058 11.0667V11.6763C8.20058 11.901 8.40642 12.1453 8.72594 12.1453H11.5955C11.915 12.1453 12.1209 11.901 12.1209 11.6763V11.0667C12.1209 10.6525 12.4567 10.3167 12.8709 10.3167H16.2792L18.0431 10.8195C18.07 10.8968 18.0846 10.9803 18.0846 11.0667V13.3334C18.0846 14.8522 16.8534 16.0834 15.3346 16.0834H4.66797C3.14919 16.0834 1.91797 14.8522 1.91797 13.3334V11.0667ZM3.41797 11.8167V13.3334C3.41797 14.0238 3.97761 14.5834 4.66797 14.5834H15.3346C16.025 14.5834 16.5846 14.0238 16.5846 13.3334V11.8167H13.6159C13.5408 12.8633 12.633 13.6453 11.5955 13.6453H8.72594C7.68848 13.6453 6.78069 12.8633 6.70559 11.8167H3.41797Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M5.84729 5.4165C5.59916 5.4165 5.37819 5.57347 5.29648 5.80776L3.72406 10.3167L2.84186 10.5681L1.95966 10.8195L3.88014 5.31383C4.17194 4.47709 4.96112 3.9165 5.84729 3.9165H14.156C15.0421 3.9165 15.8313 4.47709 16.1231 5.31383L18.0431 10.8195L16.2792 10.3167L14.7068 5.80776C14.6251 5.57347 14.4041 5.4165 14.156 5.4165H5.84729Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nInbox.displayName = 'Inbox';\nexport default Inbox;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Info.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface InfoProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Info: React.FC<InfoProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M4.5559 4.55593C5.99976 3.11206 7.95806 2.3009 10 2.3009C12.0419 2.3009 14.0002 3.11206 15.4441 4.55593C16.888 5.99979 17.6991 7.9581 17.6991 10C17.6991 12.042 16.888 14.0003 15.4441 15.4441C14.0002 16.888 12.0419 17.6992 10 17.6992C7.95806 17.6992 5.99976 16.888 4.5559 15.4441C3.11203 14.0003 2.30087 12.042 2.30087 10C2.30087 7.9581 3.11203 5.99979 4.5559 4.55593ZM10 3.8009C8.35589 3.8009 6.77912 4.45402 5.61656 5.61659C4.45399 6.77915 3.80087 8.35592 3.80087 10C3.80087 11.6441 4.45399 13.2209 5.61656 14.3835C6.77912 15.546 8.35589 16.1992 10 16.1992C11.6441 16.1992 13.2209 15.546 14.3834 14.3835C15.546 13.2209 16.1991 11.6441 16.1991 10C16.1991 8.35592 15.546 6.77915 14.3834 5.61659C13.2209 4.45402 11.6441 3.8009 10 3.8009ZM10 9.25006C10.4142 9.25006 10.75 9.58585 10.75 10.0001V13.4746C10.75 13.8888 10.4142 14.2246 10 14.2246C9.58579 14.2246 9.25 13.8888 9.25 13.4746V10.0001C9.25 9.58585 9.58579 9.25006 10 9.25006ZM9.54135 6.21669C9.7058 6.10681 9.89914 6.04816 10.0969 6.04816C10.3621 6.04816 10.6165 6.15351 10.804 6.34105C10.9916 6.52859 11.0969 6.78294 11.0969 7.04816C11.0969 7.24593 11.0383 7.43927 10.9284 7.60373C10.8185 7.76818 10.6623 7.89635 10.4796 7.97204C10.2969 8.04772 10.0958 8.06753 9.90183 8.02894C9.70786 7.99036 9.52967 7.89512 9.38982 7.75526C9.24996 7.61541 9.15472 7.43722 9.11614 7.24325C9.07755 7.04927 9.09736 6.8482 9.17304 6.66547C9.24873 6.48275 9.3769 6.32657 9.54135 6.21669Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nInfo.displayName = 'Info';\nexport default Info;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Integrations.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface IntegrationsProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Integrations: React.FC<IntegrationsProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M6.74671 2.32679C7.0396 2.03389 7.51448 2.03389 7.80737 2.32679L10.6482 5.16761L11.0899 4.72593L12.1505 3.66527L12.157 3.6717L12.9305 2.89822C13.2234 2.60532 13.6982 2.60532 13.9911 2.89822C14.284 3.19111 14.284 3.66598 13.9911 3.95888L13.2176 4.73236L16.4942 8.00894C17.6658 9.18052 17.6658 11.08 16.4942 12.2516L14.9032 13.8426L17.6732 16.6125C17.9661 16.9054 17.9661 17.3803 17.6732 17.6732C17.3803 17.9661 16.9054 17.9661 16.6125 17.6732L13.8426 14.9032L12.6556 16.0902C11.484 17.2618 9.58454 17.2618 8.41297 16.0902L5.13639 12.8136L4.46099 13.489C4.16809 13.7819 3.69322 13.7819 3.40033 13.489C3.10743 13.1961 3.10743 12.7212 3.40033 12.4283L4.07573 11.7529L4.0693 11.7465L5.01609 10.7997L2.17527 7.95889C1.88237 7.666 1.88237 7.19112 2.17527 6.89823C2.46816 6.60534 2.94303 6.60534 3.23593 6.89823L6.07675 9.73905L9.58753 6.22827L6.74671 3.38745C6.45382 3.09455 6.45382 2.61968 6.74671 2.32679ZM6.19705 11.7529L9.47363 15.0295C10.0594 15.6153 11.0092 15.6153 11.5949 15.0295L15.4336 11.1909C16.0193 10.6051 16.0193 9.65539 15.4336 9.0696L12.157 5.79302L6.19705 11.7529Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nIntegrations.displayName = 'Integrations';\nexport default Integrations;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Invite.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface InviteProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Invite: React.FC<InviteProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M7.27093 2.34404C7.7399 2.14979 8.24254 2.0498 8.75015 2.0498C9.25776 2.0498 9.7604 2.14979 10.2294 2.34404C10.6983 2.53829 11.1245 2.82302 11.4834 3.18195C11.8423 3.54088 12.127 3.967 12.3213 4.43597C12.5156 4.90494 12.6155 5.40758 12.6155 5.91519C12.6155 6.4228 12.5156 6.92544 12.3213 7.39441C12.127 7.86338 11.8423 8.28949 11.4834 8.64843C11.1245 9.00736 10.6983 9.29208 10.2294 9.48634C9.7604 9.68059 9.25776 9.78057 8.75015 9.78057C8.24254 9.78057 7.7399 9.68059 7.27093 9.48634C6.80196 9.29209 6.37584 9.00736 6.01691 8.64843C5.65798 8.28949 5.37325 7.86338 5.179 7.39441C4.98475 6.92544 4.88477 6.4228 4.88477 5.91519C4.88477 5.40758 4.98475 4.90494 5.179 4.43597C5.37325 3.967 5.65798 3.54088 6.01691 3.18195C6.37584 2.82302 6.80196 2.53829 7.27093 2.34404ZM8.75015 3.5498C8.43952 3.5498 8.13194 3.61099 7.84496 3.72986C7.55797 3.84873 7.29722 4.02296 7.07757 4.24261C6.85792 4.46226 6.68369 4.72301 6.56482 5.01C6.44595 5.29698 6.38477 5.60456 6.38477 5.91519C6.38477 6.22582 6.44595 6.5334 6.56482 6.82038C6.68369 7.10736 6.85792 7.36812 7.07757 7.58777C7.29722 7.80742 7.55798 7.98165 7.84496 8.10052C8.13194 8.21939 8.43952 8.28057 8.75015 8.28057C9.06078 8.28057 9.36836 8.21939 9.65534 8.10052C9.94232 7.98165 10.2031 7.80742 10.4227 7.58777C10.6424 7.36812 10.8166 7.10736 10.9355 6.82038C11.0544 6.5334 11.1155 6.22582 11.1155 5.91519C11.1155 5.60456 11.0544 5.29698 10.9355 5.01C10.8166 4.72301 10.6424 4.46226 10.4227 4.24261C10.2031 4.02296 9.94233 3.84873 9.65534 3.72986C9.36836 3.61099 9.06078 3.5498 8.75015 3.5498Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M8.33935 10.7312C8.3512 10.7307 8.36306 10.7305 8.37491 10.7305H9.12469C9.13838 10.7305 9.15198 10.7308 9.1655 10.7314 9.7888 10.7566 10.4024 10.8595 10.9888 11.0353 11.4913 11.1859 11.4963 11.8685 11.0942 12.2054 10.9063 12.3628 10.6558 12.4142 10.4202 12.3465 9.99646 12.2249 9.55476 12.1529 9.10634 12.1337H8.39335C7.53853 12.1703 6.70811 12.3988 5.97999 12.7977 5.24701 13.1992 4.64204 13.7602 4.22255 14.4273 3.80542 15.0907 3.58548 15.8372 3.58328 16.5965H9.12469L9.12963 16.5965H9.21466C9.47166 16.5965 9.69353 16.7699 9.78802 17.0089 9.96102 17.4465 9.67351 17.9997 9.203 17.9997H9.12509L9.12014 17.9997H2.79163C2.35443 17.9997 2 17.6856 2 17.2981V16.6097C1.9997 15.6068 2.2887 14.6203 2.83955 13.7443 3.39044 12.8682 4.18491 12.1314 5.14751 11.6041 6.1101 11.0767 7.20884 10.7762 8.33935 10.7312zM14.7002 11.5C15.1144 11.5 15.4502 11.8358 15.4502 12.25V14H17.2002C17.6144 14 17.9502 14.3358 17.9502 14.75 17.9502 15.1642 17.6144 15.5 17.2002 15.5H15.4502V17.25C15.4502 17.6642 15.1144 18 14.7002 18 14.286 18 13.9502 17.6642 13.9502 17.25V15.5H12.2002C11.786 15.5 11.4502 15.1642 11.4502 14.75 11.4502 14.3358 11.786 14 12.2002 14H13.9502V12.25C13.9502 11.8358 14.286 11.5 14.7002 11.5z\"\n      fill=\"currentColor\" />\n  </svg>\n);\nInvite.displayName = 'Invite';\nexport default Invite;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Italic.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ItalicProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Italic: React.FC<ItalicProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <g fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n      <path d=\"M13.2523 2.2937C13.6423 2.43301 13.8456 2.86218 13.7063 3.25226L8.70631 17.2523C8.567 17.6423 8.13784 17.8456 7.74775 17.7063C7.35767 17.567 7.15438 17.1378 7.2937 16.7478L12.2937 2.74775C12.433 2.35767 12.8622 2.15438 13.2523 2.2937Z\"\n      />\n      <path d=\"M7.25 3C7.25 2.58579 7.58579 2.25 8 2.25H17C17.4142 2.25 17.75 2.58579 17.75 3 17.75 3.41421 17.4142 3.75 17 3.75H8C7.58579 3.75 7.25 3.41421 7.25 3zM3.25 17C3.25 16.5858 3.58579 16.25 4 16.25H13C13.4142 16.25 13.75 16.5858 13.75 17 13.75 17.4142 13.4142 17.75 13 17.75H4C3.58579 17.75 3.25 17.4142 3.25 17z\"\n      />\n    </g>\n  </svg>\n);\nItalic.displayName = 'Italic';\nexport default Italic;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Item.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ItemProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Item: React.FC<ItemProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M16 4.5H7.5L7.5 15.5H16C16.2761 15.5 16.5 15.2761 16.5 15V5C16.5 4.72386 16.2761 4.5 16 4.5ZM4 4.5H6L6 15.5H4C3.72386 15.5 3.5 15.2761 3.5 15V5C3.5 4.72386 3.72386 4.5 4 4.5ZM4 3C2.89543 3 2 3.89543 2 5V15C2 16.1046 2.89543 17 4 17H16C17.1046 17 18 16.1046 18 15V5C18 3.89543 17.1046 3 16 3H4ZM15 9V7L9 7V9H15Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nItem.displayName = 'Item';\nexport default Item;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/ItemDefaultValues.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ItemDefaultValuesProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst ItemDefaultValues: React.FC<ItemDefaultValuesProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M14.9911 3.80698C15.0822 3.7693 15.1799 3.74994 15.2785 3.75C15.3771 3.75006 15.4747 3.76955 15.5658 3.80734C15.6569 3.84514 15.7397 3.90051 15.8093 3.97028C15.879 4.04006 15.9343 4.12288 15.972 4.21401C16.0097 4.30515 16.029 4.40281 16.029 4.50142C16.0289 4.60004 16.0094 4.69768 15.9716 4.78876C15.9338 4.87985 15.8781 4.96293 15.8083 5.03262L9.62114 11.2198L8.38365 11.3965L8.56051 10.1564L14.7473 3.96962C14.8171 3.89993 14.8999 3.84466 14.9911 3.80698ZM15.2794 2.25C14.9838 2.24981 14.6911 2.30785 14.4179 2.4208C14.1447 2.53375 13.8962 2.69973 13.687 2.90862L7.32301 9.27262C7.20822 9.38741 7.13378 9.53634 7.11085 9.69705L6.75752 12.1744C6.72419 12.408 6.80281 12.6438 6.96972 12.8107C7.13663 12.9775 7.37236 13.0561 7.60602 13.0228L10.0807 12.6694C10.2414 12.6465 10.3902 12.572 10.505 12.4573L16.8687 6.09362C17.0778 5.88473 17.2438 5.63669 17.3571 5.36366C17.4704 5.09063 17.5288 4.79796 17.529 4.50237C17.5291 4.20677 17.4711 3.91402 17.3582 3.64086C17.2452 3.36769 17.0796 3.11944 16.8707 2.91029C16.6618 2.70114 16.4137 2.53518 16.1407 2.42188C15.8677 2.30859 15.575 2.25019 15.2794 2.25ZM3.71667 9.5498C3.19004 9.5498 2.73812 9.82141 2.43984 10.2071C2.14494 10.5884 2 11.073 2 11.5498V15.0498C2 15.5266 2.14494 16.0112 2.43984 16.3925C2.73811 16.7782 3.19004 17.0498 3.71667 17.0498H16.2833C16.81 17.0498 17.2619 16.7782 17.5602 16.3925C17.8551 16.0112 18 15.5266 18 15.0498V11.5498C18 11.073 17.8551 10.5884 17.5602 10.2071C17.2619 9.82141 16.81 9.5498 16.2833 9.5498H15.6964C15.2822 9.5498 14.9464 9.88559 14.9464 10.2998C14.9464 10.714 15.2822 11.0498 15.6964 11.0498H16.2833C16.285 11.0501 16.2901 11.0512 16.2991 11.0561C16.3139 11.064 16.3415 11.0832 16.3736 11.1247C16.4413 11.2122 16.5 11.3636 16.5 11.5498V15.0498C16.5 15.236 16.4413 15.3874 16.3736 15.4749C16.3415 15.5164 16.3139 15.5356 16.2991 15.5435C16.2901 15.5484 16.285 15.5496 16.2833 15.5498H3.71669C3.715 15.5496 3.70991 15.5484 3.70086 15.5435C3.68608 15.5356 3.6585 15.5164 3.62642 15.4749C3.55875 15.3874 3.5 15.236 3.5 15.0498V11.5498C3.5 11.3636 3.55875 11.2122 3.62642 11.1247C3.6585 11.0832 3.68608 11.064 3.70086 11.0561C3.70991 11.0512 3.715 11.0501 3.71669 11.0498H4.5C4.91421 11.0498 5.25 10.714 5.25 10.2998C5.25 9.88559 4.91421 9.5498 4.5 9.5498H3.71667Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nItemDefaultValues.displayName = 'ItemDefaultValues';\nexport default ItemDefaultValues;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/ItemHeightDouble.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ItemHeightDoubleProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst ItemHeightDouble: React.FC<ItemHeightDoubleProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M4.72567 2.26357C5.01714 1.97855 5.48291 1.97855 5.77439 2.26357L8.02439 4.46377C8.32054 4.75337 8.32586 5.22821 8.03626 5.52436C7.74666 5.82051 7.27182 5.82583 6.97567 5.53623L6.00003 4.58219V15.7394L7.03154 14.9143C7.355 14.6556 7.82696 14.708 8.0857 15.0315C8.34444 15.355 8.29198 15.8269 7.96852 16.0857L5.71852 17.8855C5.44462 18.1046 5.05544 18.1046 4.78154 17.8855L2.53154 16.0857C2.20808 15.8269 2.15561 15.355 2.41435 15.0315C2.67309 14.708 3.14506 14.6556 3.46852 14.9143L4.50003 15.7394V4.58219L3.52439 5.53623C3.22824 5.82583 2.75339 5.82051 2.4638 5.52436C2.1742 5.22821 2.17951 4.75337 2.47567 4.46377L4.72567 2.26357ZM11.4502 6C11.4502 5.58579 11.786 5.25 12.2002 5.25H17.2002C17.6144 5.25 17.9502 5.58579 17.9502 6C17.9502 6.41421 17.6144 6.75 17.2002 6.75H12.2002C11.786 6.75 11.4502 6.41421 11.4502 6ZM11.45 10C11.45 9.58579 11.7858 9.25 12.2 9.25H17.2C17.6142 9.25 17.95 9.58579 17.95 10C17.95 10.4142 17.6142 10.75 17.2 10.75H12.2C11.7858 10.75 11.45 10.4142 11.45 10ZM11.4502 14C11.4502 13.5858 11.786 13.25 12.2002 13.25H17.2002C17.6144 13.25 17.9502 13.5858 17.9502 14C17.9502 14.4142 17.6144 14.75 17.2002 14.75H12.2002C11.786 14.75 11.4502 14.4142 11.4502 14Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nItemHeightDouble.displayName = 'ItemHeightDouble';\nexport default ItemHeightDouble;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/ItemHeightSingle.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ItemHeightSingleProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst ItemHeightSingle: React.FC<ItemHeightSingleProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M4.72567 2.26357C5.01714 1.97855 5.48291 1.97855 5.77439 2.26357L8.02439 4.46377C8.32054 4.75337 8.32586 5.22821 8.03626 5.52436C7.74666 5.82051 7.27182 5.82583 6.97567 5.53623L6.00003 4.58219V15.7394L7.03154 14.9143C7.355 14.6556 7.82696 14.708 8.0857 15.0315C8.34444 15.355 8.29198 15.8269 7.96852 16.0857L5.71852 17.8855C5.44462 18.1046 5.05544 18.1046 4.78154 17.8855L2.53154 16.0857C2.20808 15.8269 2.15561 15.355 2.41435 15.0315C2.67309 14.708 3.14506 14.6556 3.46852 14.9143L4.50003 15.7394V4.58219L3.52439 5.53623C3.22824 5.82583 2.75339 5.82051 2.4638 5.52436C2.1742 5.22821 2.17951 4.75337 2.47567 4.46377L4.72567 2.26357ZM11.4502 7C11.4502 6.58579 11.786 6.25 12.2002 6.25H17.2002C17.6144 6.25 17.9502 6.58579 17.9502 7C17.9502 7.41421 17.6144 7.75 17.2002 7.75H12.2002C11.786 7.75 11.4502 7.41421 11.4502 7ZM11.45 10C11.45 9.58579 11.7858 9.25 12.2 9.25H17.2C17.6142 9.25 17.95 9.58579 17.95 10C17.95 10.4142 17.6142 10.75 17.2 10.75H12.2C11.7858 10.75 11.45 10.4142 11.45 10ZM11.4502 13C11.4502 12.5858 11.786 12.25 12.2002 12.25H17.2002C17.6144 12.25 17.9502 12.5858 17.9502 13C17.9502 13.4142 17.6144 13.75 17.2002 13.75H12.2002C11.786 13.75 11.4502 13.4142 11.4502 13Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nItemHeightSingle.displayName = 'ItemHeightSingle';\nexport default ItemHeightSingle;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/ItemHeightTriple.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ItemHeightTripleProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst ItemHeightTriple: React.FC<ItemHeightTripleProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path fill=\"currentColor\" d=\"M4.726 2.264a.75.75 0 0 1 1.048 0l2.25 2.2a.75.75 0 1 1-1.048 1.072L6 4.582V15.74l1.032-.825a.75.75 0 1 1 .937 1.172l-2.25 1.8a.75.75 0 0 1-.937 0l-2.25-1.8a.75.75 0 0 1 .937-1.172l1.031.825V4.582l-.976.954a.75.75 0 1 1-1.048-1.072l2.25-2.2ZM11.45 5a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75Zm0 5a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75Zm0 5a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75Z\"\n    />\n  </svg>\n);\nItemHeightTriple.displayName = 'ItemHeightTriple';\nexport default ItemHeightTriple;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Key.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface KeyProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Key: React.FC<KeyProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M15.336 3.32813C15.535 3.32803 15.7259 3.40706 15.8667 3.5478L18.1054 5.78649C18.3983 6.07938 18.3983 6.55426 18.1054 6.84715C17.8125 7.14004 17.3376 7.14004 17.0447 6.84715L15.3369 5.13929L13.8163 6.66272L15.0669 7.91338C15.3598 8.20628 15.3598 8.68115 15.0669 8.97404C14.774 9.26694 14.2992 9.26694 14.0063 8.97404L12.7566 7.72438L9.89632 10.5901C10.415 11.3267 10.6988 12.2104 10.6988 13.1234C10.6988 14.2904 10.2352 15.4096 9.41003 16.2347C8.58486 17.0599 7.46569 17.5235 6.29873 17.5235C5.13176 17.5235 4.01259 17.0599 3.18743 16.2347C2.36226 15.4096 1.89868 14.2904 1.89868 13.1234C1.89868 11.9565 2.36226 10.8373 3.18743 10.0121C4.01259 9.18696 5.13176 8.72339 6.29873 8.72339C7.21347 8.72339 8.09885 9.00823 8.83628 9.5288L14.8055 3.5483C14.9461 3.40742 15.137 3.32822 15.336 3.32813ZM4.24809 11.0728C4.79195 10.5289 5.52959 10.2234 6.29873 10.2234C7.06787 10.2234 7.8055 10.5289 8.34937 11.0728C8.89323 11.6167 9.19877 12.3543 9.19877 13.1234C9.19877 13.8926 8.89323 14.6302 8.34937 15.1741C7.8055 15.7179 7.06787 16.0235 6.29873 16.0235C5.52959 16.0235 4.79195 15.7179 4.24809 15.1741C3.70422 14.6302 3.39868 13.8926 3.39868 13.1234C3.39868 12.3543 3.70422 11.6167 4.24809 11.0728Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nKey.displayName = 'Key';\nexport default Key;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Keyboard.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface KeyboardProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Keyboard: React.FC<KeyboardProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M16.3214 3C16.3214 2.58579 15.9857 2.25 15.5714 2.25C15.1572 2.25 14.8214 2.58579 14.8214 3C14.8214 3.4073 14.6596 3.79791 14.3716 4.08591C14.0836 4.37392 13.693 4.53571 13.2857 4.53571H8.7143C7.90918 4.53571 7.13704 4.85555 6.56773 5.42485C5.99842 5.99416 5.67859 6.76631 5.67859 7.57143V8.25H3C2.58579 8.25 2.25 8.58579 2.25 9V17C2.25 17.4142 2.58579 17.75 3 17.75H17C17.4142 17.75 17.75 17.4142 17.75 17V9C17.75 8.58579 17.4142 8.25 17 8.25H7.17859V7.57143C7.17859 7.16413 7.34039 6.77352 7.62839 6.48551C7.91639 6.19751 8.30701 6.03571 8.7143 6.03571H13.2857C14.0909 6.03571 14.863 5.71588 15.4323 5.14657C16.0016 4.57727 16.3214 3.80512 16.3214 3ZM3.75 9.75V16.25H16.25V9.75H3.75ZM5.25 14C5.25 13.5858 5.58579 13.25 6 13.25H14C14.4142 13.25 14.75 13.5858 14.75 14C14.75 14.4142 14.4142 14.75 14 14.75H6C5.58579 14.75 5.25 14.4142 5.25 14Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nKeyboard.displayName = 'Keyboard';\nexport default Keyboard;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Labs.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface LabsProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Labs: React.FC<LabsProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path fill=\"currentColor\" d=\"m8.672 9.859.16-.463a.75.75 0 0 1-.16.463Z\" />\n    <path fill=\"currentColor\" d=\"M7.332 3.75h-.849a.75.75 0 0 1 0-1.5h7.462a.75.75 0 0 1 0 1.5h-.85v5.386l3.67 4.67a2.348 2.348 0 0 1-1.846 3.801h-9.41a2.348 2.348 0 0 1-1.847-3.8l3.67-4.67V3.75Zm1.5 0v5.646l-.16.463-3.83 4.874a.85.85 0 0 0 .667 1.374h9.41a.849.849 0 0 0 .667-1.373l-3.83-4.875a.75.75 0 0 1-.16-.463V3.75H8.832Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nLabs.displayName = 'Labs';\nexport default Labs;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Launch.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface LaunchProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Launch: React.FC<LaunchProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <g clipPath=\"url(#clip0_26224_38435)\">\n      <path d=\"M14.2128 2.04144C15.3307 5.62227 14.2896 9.53829 11.5184 12.0918L11.3107 12.2828C11.0451 12.5271 10.9911 12.926 11.1823 13.2321C12.2391 14.9246 11.6797 17.1957 9.89746 18.1852C9.89751 18.1852 9.8974 18.1853 9.89746 18.1852L9.74441 18.2702L8.95049 15.3063C8.89902 15.1142 8.77331 14.9503 8.60103 14.8509L5.92541 13.3061C5.75313 13.2066 5.54839 13.1797 5.35624 13.2312L2.39253 14.0256L2.38955 13.8507C2.38955 13.8508 2.38955 13.8507 2.38955 13.8507C2.35542 11.8125 4.04251 10.1923 6.03672 10.2613C6.39728 10.2738 6.71563 10.0278 6.7945 9.67571L6.85633 9.39972C7.68196 5.72334 10.5528 2.86378 14.2128 2.04144ZM15.5436 1.28623C15.352 0.729332 14.7795 0.398795 14.2015 0.511372C9.9244 1.34396 6.52529 4.57222 5.46236 8.77941C2.90132 9.01016 0.844582 11.1859 0.889765 13.8759L0.899717 14.46C0.9135 15.2278 1.64428 15.7783 2.3853 15.5804L5.44447 14.7605L7.58196 15.9946L8.40126 19.0531C8.60026 19.7958 9.44311 20.152 10.114 19.7805L10.6252 19.4969C12.9774 18.191 13.8334 15.3219 12.7528 12.9886C15.8649 9.96423 16.961 5.4065 15.5436 1.28623ZM11.6828 6.42318C11.4229 6.27315 11.092 6.36177 10.9419 6.62171C10.7917 6.88177 10.8804 7.21248 11.1404 7.36263C11.4005 7.51277 11.7312 7.42416 11.8813 7.1641C12.0313 6.90436 11.9425 6.57314 11.6828 6.42318ZM9.64285 5.87171C10.2073 4.89409 11.4557 4.56004 12.4328 5.12414C13.41 5.68832 13.7445 6.93692 13.1804 7.9141C12.616 8.8916 11.3679 9.22603 10.3904 8.66167C9.41291 8.09731 9.07849 6.84921 9.64285 5.87171Z\"\n        fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    </g>\n    <defs>\n      <clipPath id=\"clip0_26224_38435\">\n        <path d=\"M0 0H20V20H0z\" />\n      </clipPath>\n    </defs>\n  </svg>\n);\nLaunch.displayName = 'Launch';\nexport default Launch;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Layout.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface LayoutProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Layout: React.FC<LayoutProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M16.0773 1.88965C17.1392 1.88965 18 2.75047 18 3.81234V16.0563C18 17.1182 17.1392 17.979 16.0773 17.979H3.83333C2.77146 17.979 1.91064 17.1182 1.91064 16.0563V3.81234C1.91064 2.75047 2.77146 1.88965 3.83334 1.88965H16.0773ZM10.8328 3.33167H16.0773C16.3428 3.33167 16.558 3.54687 16.558 3.81234V8.83594L10.8328 8.83594V3.33167ZM9.07764 16.537H3.83333C3.56787 16.537 3.35266 16.3218 3.35266 16.0563V3.81234C3.35266 3.54687 3.56787 3.33167 3.83334 3.33167H9.07764V16.537ZM10.8328 16.537H16.0773C16.3428 16.537 16.558 16.3218 16.558 16.0563V10.5911L10.8328 10.5911V16.537Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nLayout.displayName = 'Layout';\nexport default Layout;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/LearnMore.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface LearnMoreProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst LearnMore: React.FC<LearnMoreProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M10.0946 7.0028C9.84743 6.98784 9.60379 7.03316 9.39215 7.12898 9.18071 7.22472 9.01709 7.36333 8.9092 7.51843 8.80222 7.67224 8.75199 7.83853 8.75195 7.99983 8.75186 8.41404 8.416 8.74975 8.00179 8.74966 7.58758 8.74957 7.25186 8.41371 7.25195 7.9995 7.25206 7.51916 7.40354 7.0562 7.6778 6.66191 7.95116 6.26891 8.33363 5.96167 8.77346 5.76252 9.21309 5.56347 9.70083 5.47623 10.1852 5.50554 10.6695 5.53484 11.1422 5.68022 11.5515 5.93347 11.9611 6.18697 12.2971 6.54279 12.5094 6.97188 12.7225 7.40247 12.799 7.88326 12.7237 8.35797 12.6486 8.83184 12.4277 9.26655 12.1 9.61789 11.7732 9.96833 11.3525 10.2234 10.8903 10.3664 10.8264 10.3862 10.7875 10.4179 10.7688 10.4411 10.7597 10.4524 10.7556 10.461 10.7539 10.4659 10.7539 10.5 10.752 10.4749 10.752 10.4749V10.75C10.752 11.1642 10.4162 11.5 10.002 11.5 9.58774 11.5 9.25195 11.1642 9.25195 10.75V10.4758C9.25184 10.1143 9.38047 9.77272 9.60184 9.49863 9.82187 9.22621 10.1207 9.03434 10.447 8.93342 10.676 8.86255 10.8662 8.74157 11.003 8.59487 11.139 8.44908 11.2166 8.28472 11.2422 8.12305 11.2677 7.9622 11.2434 7.79544 11.1651 7.63724 11.086 7.47753 10.9512 7.32598 10.7621 7.20898 10.5727 7.09174 10.3418 7.01775 10.0946 7.0028zM9.44638 12.753C9.61083 12.6431 9.80417 12.5845 10.002 12.5845 10.2672 12.5845 10.5215 12.6898 10.7091 12.8774 10.8966 13.0649 11.002 13.3193 11.002 13.5845 11.002 13.7823 10.9433 13.9756 10.8334 14.14 10.7235 14.3045 10.5674 14.4327 10.3846 14.5084 10.2019 14.584 10.0008 14.6038 9.80686 14.5653 9.61288 14.5267 9.4347 14.4314 9.29485 14.2916 9.15499 14.1517 9.05975 13.9735 9.02117 13.7796 8.98258 13.5856 9.00239 13.3845 9.07807 13.2018 9.15376 13.0191 9.28193 12.8629 9.44638 12.753z\"\n      fill=\"currentColor\" />\n    <path d=\"M4.36581 4.36386C5.86061 2.86906 7.88798 2.0293 10.0019 2.0293C12.1159 2.0293 14.1433 2.86906 15.6381 4.36386C17.1329 5.85865 17.9726 7.88603 17.9726 9.99999C17.9726 12.1139 17.1329 14.1413 15.6381 15.6361C14.1433 17.1309 12.1159 17.9707 10.0019 17.9707C7.88798 17.9707 5.86061 17.1309 4.36581 15.6361C2.87102 14.1413 2.03125 12.1139 2.03125 9.99999C2.03125 7.88603 2.87102 5.85865 4.36581 4.36386ZM10.0019 3.5293C8.28581 3.5293 6.63996 4.21103 5.42647 5.42452C4.21298 6.63801 3.53125 8.28385 3.53125 9.99999C3.53125 11.7161 4.21298 13.362 5.42647 14.5755C6.63996 15.7889 8.28581 16.4707 10.0019 16.4707C11.7181 16.4707 13.3639 15.7889 14.5774 14.5755C15.7909 13.362 16.4726 11.7161 16.4726 9.99999C16.4726 8.28385 15.7909 6.63801 14.5774 5.42452C13.3639 4.21103 11.7181 3.5293 10.0019 3.5293Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nLearnMore.displayName = 'LearnMore';\nexport default LearnMore;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Lines.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface LinesProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Lines: React.FC<LinesProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path fill=\"currentColor\" d=\"M2.05 5a.75.75 0 0 1 .75-.75h14a.75.75 0 0 1 0 1.5h-14A.75.75 0 0 1 2.05 5Zm0 5a.75.75 0 0 1 .75-.75h14a.75.75 0 0 1 0 1.5h-14a.75.75 0 0 1-.75-.75Zm0 5a.75.75 0 0 1 .75-.75h14a.75.75 0 0 1 0 1.5h-14a.75.75 0 0 1-.75-.75Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nLines.displayName = 'Lines';\nexport default Lines;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Link.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface LinkProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Link: React.FC<LinkProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M7.3125 5.3125C7.72671 5.3125 8.0625 5.64829 8.0625 6.0625C8.0625 6.47671 7.72671 6.8125 7.3125 6.8125H6.8125C5.00032 6.8125 3.53125 8.28157 3.53125 10.0938C3.53125 11.9059 5.00032 13.375 6.8125 13.375H7.3125C7.72671 13.375 8.0625 13.7108 8.0625 14.125C8.0625 14.5392 7.72671 14.875 7.3125 14.875H6.8125C4.17189 14.875 2.03125 12.7344 2.03125 10.0938C2.03125 7.45314 4.17189 5.3125 6.8125 5.3125H7.3125ZM11.9688 6.0625C11.9688 5.64829 12.3045 5.3125 12.7188 5.3125H13.1875C15.8281 5.3125 17.9688 7.45314 17.9688 10.0938C17.9688 12.7344 15.8281 14.875 13.1875 14.875H12.7188C12.3045 14.875 11.9688 14.5392 11.9688 14.125C11.9688 13.7108 12.3045 13.375 12.7188 13.375H13.1875C14.9997 13.375 16.4688 11.9059 16.4688 10.0938C16.4688 8.28157 14.9997 6.8125 13.1875 6.8125H12.7188C12.3045 6.8125 11.9688 6.47671 11.9688 6.0625ZM5.85834 10.079C5.85834 9.66477 6.19412 9.32898 6.60834 9.32898H13.3604C13.7746 9.32898 14.1104 9.66477 14.1104 10.079C14.1104 10.4932 13.7746 10.829 13.3604 10.829H6.60834C6.19412 10.829 5.85834 10.4932 5.85834 10.079Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nLink.displayName = 'Link';\nexport default Link;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Location.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface LocationProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Location: React.FC<LocationProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M6.67605 4.81789C7.45777 3.99425 8.53466 3.51488 9.66982 3.48523C10.805 3.45559 11.9054 3.8781 12.7291 4.65982C13.5527 5.44154 14.0321 6.51843 14.0617 7.65359C14.0753 8.17222 13.8465 8.99132 13.4061 10.0142C12.9782 11.008 12.3949 12.0958 11.8003 13.1133C11.2071 14.1282 10.6105 15.0595 10.1616 15.7379C10.1039 15.8251 10.0487 15.908 9.99626 15.9864C9.93983 15.9109 9.88037 15.8309 9.81821 15.7469C9.3345 15.0928 8.69012 14.1939 8.04478 13.2113C7.3978 12.2263 6.7586 11.1704 6.27944 10.2003C5.78619 9.2018 5.515 8.39576 5.50146 7.87713C5.47182 6.74197 5.89433 5.64153 6.67605 4.81789ZM9.44093 17.7308C9.44102 17.7309 9.44108 17.731 10.0297 17.2662L9.44108 17.731C9.58758 17.9165 9.81296 18.0221 10.0493 18.016C10.2856 18.0098 10.5051 17.8926 10.6417 17.6997L10.0297 17.2662C10.6417 17.6997 10.6418 17.6996 10.6419 17.6995L10.6421 17.6991L10.643 17.698L10.6459 17.6937L10.657 17.678L10.6991 17.618C10.7356 17.5657 10.7888 17.4892 10.8562 17.3912C10.9909 17.1952 11.1828 16.9128 11.4125 16.5657C11.8715 15.872 12.484 14.9161 13.0953 13.8702C13.7051 12.8268 14.3219 11.6802 14.7838 10.6075C15.2331 9.56394 15.5839 8.48461 15.5612 7.61444C15.5212 6.08159 14.8739 4.62742 13.7617 3.57184C12.6495 2.51625 11.1635 1.94572 9.63066 1.98575C8.09781 2.02577 6.64365 2.67308 5.58806 3.78528C4.53248 4.89747 3.96194 6.38344 4.00197 7.91629C4.0247 8.78646 4.43139 9.84601 4.93456 10.8647C5.45182 11.9118 6.12758 13.0247 6.79102 14.0348C7.45611 15.0474 8.11762 15.9701 8.6122 16.6388C8.85973 16.9735 9.06605 17.2454 9.21087 17.4341C9.28329 17.5285 9.34037 17.6021 9.37957 17.6525L9.42467 17.7102L9.43658 17.7253L9.43977 17.7294L9.44066 17.7305L9.44093 17.7308ZM9.71823 5.33899C9.39959 5.34731 9.08572 5.41831 8.79452 5.54794C8.50333 5.67756 8.24051 5.86327 8.02109 6.09446C7.80166 6.32565 7.62992 6.5978 7.51567 6.89537C7.40142 7.19293 7.3469 7.51009 7.35522 7.82872C7.36354 8.14736 7.43454 8.46123 7.56417 8.75243C7.69379 9.04362 7.8795 9.30644 8.11069 9.52586C8.34188 9.74529 8.61403 9.91703 8.9116 10.0313C9.20916 10.1455 9.52632 10.2 9.84495 10.1917C10.1636 10.1834 10.4775 10.1124 10.7687 9.98279C11.0599 9.85316 11.3227 9.66745 11.5421 9.43626C11.7615 9.20507 11.9333 8.93292 12.0475 8.63535C12.1618 8.33779 12.2163 8.02064 12.208 7.702C12.1996 7.38337 12.1286 7.06949 11.999 6.77829C11.8694 6.4871 11.6837 6.22428 11.4525 6.00486C11.2213 5.78543 10.9491 5.61369 10.6516 5.49944C10.354 5.38519 10.0369 5.33067 9.71823 5.33899ZM9.40453 6.9183C9.51576 6.86878 9.63567 6.84166 9.75739 6.83848C9.87911 6.8353 10.0003 6.85613 10.1139 6.89977C10.2276 6.94342 10.3316 7.00902 10.4199 7.09284C10.5082 7.17666 10.5791 7.27706 10.6287 7.3883C10.6782 7.49954 10.7053 7.61944 10.7085 7.74116C10.7116 7.86288 10.6908 7.98403 10.6472 8.0977C10.6035 8.21137 10.5379 8.31533 10.4541 8.40365C10.3703 8.49196 10.2699 8.56291 10.1587 8.61242C10.0474 8.66194 9.92751 8.68906 9.80579 8.69224C9.68407 8.69542 9.56292 8.67459 9.44925 8.63095C9.33558 8.5873 9.23162 8.5217 9.1433 8.43788C9.05499 8.35406 8.98404 8.25366 8.93453 8.14242C8.88501 8.03119 8.85789 7.91128 8.85471 7.78956C8.85153 7.66784 8.87236 7.54669 8.916 7.43302C8.95965 7.31935 9.02525 7.21539 9.10907 7.12707C9.19289 7.03876 9.29329 6.96781 9.40453 6.9183Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nLocation.displayName = 'Location';\nexport default Location;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Locked.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface LockedProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Locked: React.FC<LockedProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M8.13563 4.26517C8.63009 3.77071 9.30073 3.49292 10 3.49292C10.6993 3.49292 11.3699 3.77071 11.8644 4.26517C12.3589 4.75964 12.6367 5.43028 12.6367 6.12956V7.79858H7.36337V6.12956C7.36337 5.43028 7.64116 4.75964 8.13563 4.26517ZM6.60927 9.29858C6.61064 9.29859 6.61201 9.29859 6.61337 9.29859C6.61474 9.29859 6.61611 9.29859 6.61747 9.29858H13.3826C13.3839 9.29859 13.3853 9.29859 13.3867 9.29859C13.388 9.29859 13.3894 9.29859 13.3908 9.29858H14.5719V16.5071H5.42813V9.29858H6.60927ZM5.86337 7.79858V6.12956C5.86337 5.03246 6.2992 3.98029 7.07497 3.20451C7.85074 2.42874 8.90291 1.99292 10 1.99292C11.0971 1.99292 12.1493 2.42874 12.9251 3.20451C13.7008 3.98029 14.1367 5.03246 14.1367 6.12956V7.79858H15.3219C15.7361 7.79858 16.0719 8.13437 16.0719 8.54858V17.2571C16.0719 17.6713 15.7361 18.0071 15.3219 18.0071H4.67813C4.26392 18.0071 3.92813 17.6713 3.92813 17.2571V8.54858C3.92813 8.13437 4.26392 7.79858 4.67813 7.79858H5.86337Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nLocked.displayName = 'Locked';\nexport default Locked;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/LogIn.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface LogInProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst LogIn: React.FC<LogInProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M3.55925 3.60927C3.62922 3.53931 3.72411 3.5 3.82306 3.5H11.6846C11.7835 3.5 11.8784 3.53931 11.9484 3.60927C12.0184 3.67924 12.0577 3.77413 12.0577 3.87308V6.68077C12.0577 7.09498 12.3935 7.43077 12.8077 7.43077C13.2219 7.43077 13.5577 7.09498 13.5577 6.68077V3.87308C13.5577 3.37631 13.3603 2.89988 13.0091 2.54861C12.6578 2.19734 12.1814 2 11.6846 2H3.82306C3.32629 2 2.84986 2.19734 2.49859 2.54861C2.14732 2.89988 1.94998 3.37631 1.94998 3.87308V16.2269C1.94998 16.7237 2.14732 17.2001 2.49859 17.5514C2.84986 17.9027 3.32629 18.1 3.82306 18.1H11.6846C12.1814 18.1 12.6578 17.9027 13.0091 17.5514C13.3603 17.2001 13.5577 16.7237 13.5577 16.2269V13.4192C13.5577 13.005 13.2219 12.6692 12.8077 12.6692C12.3935 12.6692 12.0577 13.005 12.0577 13.4192V16.2269C12.0577 16.3259 12.0184 16.4208 11.9484 16.4907C11.8784 16.5607 11.7835 16.6 11.6846 16.6H3.82306C3.72411 16.6 3.62922 16.5607 3.55925 16.4907C3.48929 16.4208 3.44998 16.3259 3.44998 16.2269V3.87308C3.44998 3.77413 3.48929 3.67924 3.55925 3.60927Z\"\n      fill=\"currentColor\" />\n    <path d=\"M10.6527 7.83503C10.3598 7.54213 9.88491 7.54213 9.59201 7.83503L7.91794 9.5091C7.77594 9.64557 7.68756 9.83743 7.68756 10.0499C7.68756 10.2611 7.77485 10.4519 7.91531 10.5882L9.59201 12.2649C9.88491 12.5578 10.3598 12.5578 10.6527 12.2649C10.9456 11.972 10.9456 11.4972 10.6527 11.2043L10.2483 10.7999H16.2991C16.7133 10.7999 17.0491 10.4641 17.0491 10.0499C17.0491 9.63571 16.7133 9.29993 16.2991 9.29993H10.2484L10.6527 8.89569C10.9456 8.60279 10.9456 8.12792 10.6527 7.83503Z\"\n      fill=\"currentColor\" />\n  </svg>\n);\nLogIn.displayName = 'LogIn';\nexport default LogIn;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/LogOut.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface LogOutProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst LogOut: React.FC<LogOutProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M3.55928 3.60927C3.62925 3.53931 3.72414 3.5 3.82309 3.5H11.6846C11.7836 3.5 11.8785 3.53931 11.9484 3.60927C12.0184 3.67924 12.0577 3.77413 12.0577 3.87308V6.68077C12.0577 7.09498 12.3935 7.43077 12.8077 7.43077C13.2219 7.43077 13.5577 7.09498 13.5577 6.68077V3.87308C13.5577 3.37631 13.3604 2.89988 13.0091 2.54861C12.6578 2.19734 12.1814 2 11.6846 2H3.82309C3.32632 2 2.84989 2.19734 2.49862 2.54861C2.14735 2.89988 1.95001 3.37631 1.95001 3.87308V16.2269C1.95001 16.7237 2.14735 17.2001 2.49862 17.5514C2.84989 17.9027 3.32632 18.1 3.82309 18.1H11.6846C12.1814 18.1 12.6578 17.9027 13.0091 17.5514C13.3604 17.2001 13.5577 16.7237 13.5577 16.2269V13.4192C13.5577 13.005 13.2219 12.6692 12.8077 12.6692C12.3935 12.6692 12.0577 13.005 12.0577 13.4192V16.2269C12.0577 16.3259 12.0184 16.4208 11.9484 16.4907C11.8785 16.5607 11.7836 16.6 11.6846 16.6H3.82309C3.72414 16.6 3.62925 16.5607 3.55928 16.4907C3.48932 16.4208 3.45001 16.3259 3.45001 16.2269V3.87308C3.45001 3.77413 3.48932 3.67924 3.55928 3.60927Z\"\n      fill=\"currentColor\" />\n    <path d=\"M15.0842 7.83509C15.3771 7.54219 15.852 7.54219 16.1449 7.83509L17.819 9.50916C17.961 9.64563 18.0493 9.83749 18.0493 10.05C18.0493 10.2612 17.9621 10.452 17.8216 10.5883L16.1449 12.265C15.852 12.5579 15.3771 12.5579 15.0842 12.265C14.7913 11.9721 14.7913 11.4972 15.0842 11.2043L15.4886 10.8H9.43781C9.02359 10.8 8.68781 10.4642 8.68781 10.05C8.68781 9.63577 9.02359 9.29999 9.43781 9.29999H15.4885L15.0842 8.89575C14.7913 8.60285 14.7913 8.12798 15.0842 7.83509Z\"\n      fill=\"currentColor\" />\n  </svg>\n);\nLogOut.displayName = 'LogOut';\nexport default LogOut;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/LongText.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface LongTextProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst LongText: React.FC<LongTextProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M2 3.25C2 2.83579 2.33579 2.5 2.75 2.5H17.25C17.6642 2.5 18 2.83579 18 3.25C18 3.66421 17.6642 4 17.25 4H2.75C2.33579 4 2 3.66421 2 3.25ZM2 7.25C2 6.83579 2.33579 6.5 2.75 6.5H17.25C17.6642 6.5 18 6.83579 18 7.25C18 7.66421 17.6642 8 17.25 8H2.75C2.33579 8 2 7.66421 2 7.25ZM2.75 10.5C2.33579 10.5 2 10.8358 2 11.25C2 11.6642 2.33579 12 2.75 12H9.5C9.91421 12 10.25 11.6642 10.25 11.25C10.25 10.8358 9.91421 10.5 9.5 10.5H2.75ZM13.9502 12H12.75V13.25C12.75 13.6642 12.4142 14 12 14C11.5858 14 11.25 13.6642 11.25 13.25V11.25C11.25 10.8358 11.5858 10.5 12 10.5H17.3C17.7142 10.5 18.05 10.8358 18.05 11.25V13.25C18.05 13.6642 17.7142 14 17.3 14C16.8858 14 16.55 13.6642 16.55 13.25V12H15.4502V16.25H16.2002C16.6144 16.25 16.9502 16.5858 16.9502 17C16.9502 17.4142 16.6144 17.75 16.2002 17.75H13.2002C12.786 17.75 12.4502 17.4142 12.4502 17C12.4502 16.5858 12.786 16.25 13.2002 16.25H13.9502V12Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nLongText.displayName = 'LongText';\nexport default LongText;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Mention.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface MentionProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Mention: React.FC<MentionProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path fill=\"currentColor\" d=\"M10.025 2.25h-.007a7.77 7.77 0 1 0 2.99 14.94.75.75 0 0 0-.578-1.384A6.27 6.27 0 1 1 10.015 3.75a6.377 6.377 0 0 1 5.44 3.15l.005.01c1.374 2.27.706 4.052-.123 4.856-.452.44-.845.506-1 .47-.053-.012-.103-.039-.155-.124-.062-.1-.138-.308-.138-.689v-1.404a4.026 4.026 0 1 0-1.167 2.835l.026.042a1.73 1.73 0 0 0 1.096.801c.856.198 1.746-.236 2.383-.854 1.348-1.308 2.083-3.86.364-6.705a7.877 7.877 0 0 0-6.721-3.888Zm2.52 7.765v.012a2.527 2.527 0 1 1 0-.012Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nMention.displayName = 'Mention';\nexport default Mention;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Menu.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface MenuProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Menu: React.FC<MenuProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M6 10.5C6 11.3284 5.32843 12 4.5 12 3.67157 12 3 11.3284 3 10.5 3 9.67157 3.67157 9 4.5 9 5.32843 9 6 9.67157 6 10.5zM11.8333 10.5C11.8333 11.3284 11.1618 12 10.3333 12 9.50492 12 8.83334 11.3284 8.83334 10.5 8.83334 9.67157 9.50492 9 10.3333 9 11.1618 9 11.8333 9.67157 11.8333 10.5zM17.6667 10.5C17.6667 11.3284 16.9951 12 16.1667 12 15.3383 12 14.6667 11.3284 14.6667 10.5 14.6667 9.67157 15.3383 9 16.1667 9 16.9951 9 17.6667 9.67157 17.6667 10.5z\"\n      fill=\"currentColor\" />\n  </svg>\n);\nMenu.displayName = 'Menu';\nexport default Menu;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Microphone.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface MicrophoneProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Microphone: React.FC<MicrophoneProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M11.4521 8.55267V4.97849C11.4521 4.16194 10.7901 3.5 9.9736 3.5C9.15706 3.5 8.49512 4.16194 8.49512 4.97848V8.55267C8.49512 9.36921 9.15706 10.0312 9.9736 10.0312C10.7901 10.0312 11.4521 9.36921 11.4521 8.55267ZM9.9736 2C8.32863 2 6.99512 3.33351 6.99512 4.97848V8.55267C6.99512 10.1976 8.32863 11.5312 9.9736 11.5312C11.6186 11.5312 12.9521 10.1976 12.9521 8.55267V4.97849C12.9521 3.33351 11.6186 2 9.9736 2ZM15.4595 8.40878C15.868 8.47695 16.144 8.86342 16.0758 9.27199C15.481 12.8371 12.7765 14.3114 10.749 14.6067V17.2C10.749 17.6142 10.4132 17.95 9.99902 17.95C9.58481 17.95 9.24902 17.6142 9.24902 17.2V14.6287C8.16946 14.5234 7.09077 14.1747 6.17073 13.4657C5.02857 12.5856 4.20878 11.2098 3.90002 9.26622C3.83504 8.85714 4.11399 8.47283 4.52307 8.40784C4.93215 8.34286 5.31646 8.62181 5.38145 9.03089C5.64047 10.6614 6.29596 11.6685 7.08633 12.2776C7.88838 12.8957 8.90814 13.1641 9.98808 13.1641C11.5155 13.1641 14.0769 12.1379 14.5963 9.02512C14.6644 8.61656 15.0509 8.34061 15.4595 8.40878Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nMicrophone.displayName = 'Microphone';\nexport default Microphone;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Minimize.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface MinimizeProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Minimize: React.FC<MinimizeProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M3.19197 16.2917C2.92331 16.5815 2.93863 17.0359 3.2262 17.3066 3.51377 17.5774 3.96468 17.5619 4.23334 17.2721L8.02995 13.1769 8.02995 15.4257C8.02995 15.8223 8.34898 16.1438 8.74251 16.1438 9.13605 16.1438 9.45508 15.8223 9.45508 15.4257L9.45508 11.3565C9.45508 11.2731 9.44096 11.193 9.41501 11.1185 9.37819 11.0125 9.31606 10.9137 9.22896 10.8317 9.08765 10.6986 8.9069 10.6347 8.7277 10.6385L4.97012 10.6385C4.57658 10.6385 4.25756 10.96 4.25756 11.3565 4.25756 11.7531 4.57658 12.0746 4.97012 12.0746L7.1015 12.0746 3.19197 16.2917zM15.0302 9.36157C15.4238 9.36157 15.7428 9.04007 15.7428 8.64349 15.7428 8.2469 15.4238 7.9254 15.0302 7.9254L12.8984 7.9254 16.8081 3.70817C17.0768 3.41838 17.0615 2.96398 16.7739 2.69324 16.4863 2.42249 16.0354 2.43794 15.7668 2.72773L11.9704 6.82271 11.9704 4.57434C11.9704 4.17775 11.6514 3.85625 11.2579 3.85625 10.8643 3.85625 10.5453 4.17775 10.5453 4.57434L10.5453 8.62321C10.5398 8.82187 10.6157 9.02186 10.7711 9.1682 10.9084 9.29744 11.0829 9.36147 11.257 9.36157L15.0302 9.36157z\"\n      fill=\"currentColor\" />\n  </svg>\n);\nMinimize.displayName = 'Minimize';\nexport default Minimize;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/MinusSmall.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface MinusSmallProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst MinusSmall: React.FC<MinusSmallProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M5 9.955a.75.75 0 0 1 .75-.75h8a.75.75 0 0 1 0 1.5h-8a.75.75 0 0 1-.75-.75Z\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nMinusSmall.displayName = 'MinusSmall';\nexport default MinusSmall;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Mirror.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface MirrorProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Mirror: React.FC<MirrorProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M4.08058 4.08058C2.90848 5.25269 2.25 6.8424 2.25 8.5C2.25 8.91421 2.58579 9.25 3 9.25C3.41421 9.25 3.75 8.91421 3.75 8.5C3.75 7.24022 4.25044 6.03204 5.14124 5.14124C6.03204 4.25045 7.24022 3.75 8.5 3.75C9.75978 3.75 10.968 4.25044 11.8588 5.14124C12.7496 6.03204 13.25 7.24022 13.25 8.5V15.1893H14.75V8.5C14.75 6.8424 14.0915 5.25268 12.9194 4.08058C11.7473 2.90848 10.1576 2.25 8.5 2.25C6.8424 2.25 5.25268 2.90848 4.08058 4.08058Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M10.4697 13.4697C10.1768 13.7626 10.1768 14.2374 10.4697 14.5303L13.4697 17.5303C13.6103 17.671 13.8011 17.75 14 17.75C14.1989 17.75 14.3897 17.671 14.5303 17.5303L17.5303 14.5303C17.8232 14.2374 17.8232 13.7626 17.5303 13.4697C17.2374 13.1768 16.7626 13.1768 16.4697 13.4697L14.75 15.1893H13.25L11.5303 13.4697C11.2374 13.1768 10.7626 13.1768 10.4697 13.4697Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nMirror.displayName = 'Mirror';\nexport default Mirror;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Mobile.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface MobileProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Mobile: React.FC<MobileProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M6.13327 4.12101C6.40332 3.89417 6.79359 3.75 7.22222 3.75H12.7778C13.2064 3.75 13.5967 3.89417 13.8667 4.12101C14.1329 4.34459 14.25 4.6169 14.25 4.86667V5.79627V15.1333C14.25 15.3831 14.1329 15.6554 13.8667 15.879C13.5967 16.1058 13.2064 16.25 12.7778 16.25H7.22222C6.79359 16.25 6.40332 16.1058 6.13327 15.879C5.8671 15.6554 5.75 15.3831 5.75 15.1333V4.86667C5.75 4.6169 5.8671 4.3446 6.13327 4.12101ZM7.22222 2.25C6.47212 2.25 5.73192 2.49917 5.16848 2.97246C4.60115 3.44901 4.25 4.12629 4.25 4.86667V15.1333C4.25 15.8737 4.60115 16.551 5.16848 17.0275C5.73192 17.5008 6.47212 17.75 7.22222 17.75H12.7778C13.5279 17.75 14.2681 17.5008 14.8315 17.0275C15.3988 16.551 15.75 15.8737 15.75 15.1333V5.79627V4.86667C15.75 4.12629 15.3988 3.44901 14.8315 2.97246C14.2681 2.49917 13.5279 2.25 12.7778 2.25H7.22222ZM9 13.25C8.58579 13.25 8.25 13.5858 8.25 14C8.25 14.4142 8.58579 14.75 9 14.75H11C11.4142 14.75 11.75 14.4142 11.75 14C11.75 13.5858 11.4142 13.25 11 13.25H9Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nMobile.displayName = 'Mobile';\nexport default Mobile;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/MondayDoc.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface MondayDocProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst MondayDoc: React.FC<MondayDocProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M16.5537 7.62725C16.5553 7.60733 16.5561 7.58719 16.5561 7.56686C16.5561 7.54653 16.5553 7.5264 16.5537 7.50648V7.483C16.5536 7.02626 16.372 6.58807 16.0492 6.265L12.2387 2.45456C11.9157 2.1317 11.4775 1.95029 11.0208 1.9502H5.12372C4.66667 1.9502 4.22833 2.13176 3.90514 2.45495C3.58196 2.77814 3.40039 3.21647 3.40039 3.67353V16.3269C3.40039 16.7839 3.58196 17.2223 3.90514 17.5454C4.22833 17.8686 4.66667 18.0502 5.12372 18.0502H14.8304C15.2874 18.0502 15.7258 17.8686 16.049 17.5454C16.3722 17.2223 16.5537 16.7839 16.5537 16.3269V7.62725ZM4.9658 3.51561C5.00769 3.47372 5.06449 3.4502 5.12372 3.4502L10.1895 3.50488V6.59353C10.1895 7.05059 10.371 7.48892 10.6942 7.81211C11.0174 8.1353 11.4557 8.31686 11.9128 8.31686H15.0537V16.3269C15.0537 16.3861 15.0302 16.4429 14.9883 16.4848C14.9464 16.5267 14.8896 16.5502 14.8304 16.5502H5.12372C5.06449 16.5502 5.00769 16.5267 4.9658 16.4848C4.92392 16.4429 4.90039 16.3861 4.90039 16.3269V3.67353C4.90039 3.6143 4.92392 3.55749 4.9658 3.51561ZM11.6895 4.02658L14.4797 6.81686H11.9128C11.8536 6.81686 11.7967 6.79333 11.7549 6.75145C11.713 6.70956 11.6895 6.65276 11.6895 6.59353V4.02658ZM6.34008 13.2473C6.49033 13.5118 6.77616 13.6761 7.0866 13.6764C7.38117 13.6768 7.65515 13.5293 7.81142 13.2862L9.34779 10.8966C9.51937 10.6447 9.53708 10.3221 9.39406 10.0538C9.25104 9.78562 8.96981 9.61406 8.65953 9.60578C8.34925 9.5975 8.05878 9.75379 7.90088 10.014L6.3636 12.4036C6.19884 12.6598 6.18984 12.9828 6.34008 13.2473ZM9.52758 13.6764C9.21765 13.6761 8.93229 13.5122 8.78229 13.2483C8.63229 12.9845 8.64128 12.6622 8.80577 12.4066L10.3401 10.0227C10.4955 9.7587 10.787 9.59866 11.0996 9.60569C11.4122 9.61272 11.6958 9.78568 11.8385 10.0564C11.9812 10.3271 11.9602 10.652 11.7837 10.9032L10.2494 13.2871C10.0937 13.5291 9.82103 13.6762 9.52758 13.6764ZM13.1537 12.7941C13.1537 13.2813 12.7588 13.6762 12.2717 13.6762C11.7845 13.6762 11.3896 13.2813 11.3896 12.7941C11.3896 12.307 11.7845 11.9121 12.2717 11.9121C12.7588 11.9121 13.1537 12.307 13.1537 12.7941Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nMondayDoc.displayName = 'MondayDoc';\nexport default MondayDoc;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/MondayLogoOutline.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface MondayLogoOutlineProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst MondayLogoOutline: React.FC<MondayLogoOutlineProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M15.79 9.456c-.16 0-.32.01-.47.04l.05-.08c.59-.91.65-2.08.17-3.05a3.012 3.012 0 0 0-2.61-1.68c-1.12-.03-2.13.58-2.67 1.53l-.3.5a2.75 2.75 0 0 0-.15-.36c-.5-.98-1.48-1.64-2.6-1.67-1.11-.03-2.12.56-2.67 1.5l-2.7 4.47c-.56.93-.59 2.1-.08 3.06.51.97 1.52 1.6 2.64 1.6 1.06 0 2.02-.57 2.56-1.46l.34-.57c.05.15.11.29.19.43.51.97 1.51 1.6 2.63 1.6 1.06 0 2.02-.57 2.56-1.46l.33-.54c.39 1.16 1.49 2 2.78 2 1.62 0 2.93-1.31 2.93-2.93s-1.31-2.93-2.93-2.93Zm-7.41-.85-2.7 4.48a1.463 1.463 0 0 1-2.36.24c-.08-.09-.16-.2-.22-.31a1.596 1.596 0 0 1 .04-1.58l2.7-4.48c.28-.49.79-.78 1.33-.77.55.02 1.04.34 1.29.84.25.5.22 1.11-.08 1.58Zm5.71.01-2.7 4.47c-.27.45-.75.73-1.27.73-.54 0-1.05-.31-1.31-.8-.26-.49-.25-1.1.04-1.58l2.7-4.47c.27-.5.79-.8 1.34-.78.55.02 1.05.34 1.3.85s.21 1.12-.1 1.59v-.01Zm1.7 5.21a1.43 1.43 0 1 1 0-2.86 1.43 1.43 0 0 1 0 2.86Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nMondayLogoOutline.displayName = 'MondayLogoOutline';\nexport default MondayLogoOutline;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Moon.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface MoonProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Moon: React.FC<MoonProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M10.1686 18C9.56977 18 8.97099 17.9381 8.38252 17.8038C7.06107 17.5045 5.81187 16.854 4.78981 15.9352C3.76774 15.0267 2.98313 13.8498 2.50823 12.549C2.03333 11.2482 1.8888 9.8338 2.08495 8.47105C2.2811 7.09797 2.80762 5.78684 3.61289 4.67186C4.4388 3.54656 5.52281 2.6587 6.75135 2.07024C7.03009 1.94635 7.35013 1.98765 7.58758 2.1838C7.81471 2.37996 7.90762 2.7 7.82503 2.98907C7.52564 4.01113 7.45337 5.09514 7.62888 6.13785C7.80439 7.19089 8.22767 8.19231 8.83677 9.03887C9.44588 9.88542 10.2615 10.5874 11.1803 11.0623C12.9457 11.9708 15.124 12.0121 16.9101 11.1656C17.1888 11.0314 17.5088 11.0727 17.7463 11.2791C17.9837 11.4753 18.0767 11.7953 17.9837 12.0844C17.5914 13.4059 16.8688 14.6241 15.8983 15.6049C14.9279 16.5856 13.7303 17.298 12.4192 17.68C11.6862 17.8968 10.9325 18 10.1686 18ZM6.00803 4.37247C5.58475 4.72348 5.20277 5.12611 4.88272 5.58036C4.222 6.48886 3.78839 7.56255 3.63353 8.67753C3.46835 9.80283 3.59224 10.9591 3.97422 12.0225C4.35621 13.0858 4.99629 14.0356 5.83252 14.7789C6.65843 15.5223 7.67018 16.0385 8.73354 16.2862C9.80722 16.534 10.9325 16.4927 11.9856 16.1933C13.0386 15.8836 14.0194 15.3055 14.804 14.5105C15.2066 14.1079 15.5576 13.6536 15.8467 13.1581C14.04 13.5504 12.1198 13.2923 10.4783 12.4457C9.34264 11.8573 8.34123 11.0004 7.58758 9.94737C6.83394 8.90465 6.31775 7.67611 6.10094 6.39595C5.98738 5.73522 5.95641 5.04352 6.00803 4.37247Z\"\n      fill=\"currentColor\" />\n  </svg>\n);\nMoon.displayName = 'Moon';\nexport default Moon;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/MoreActions.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface MoreActionsProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst MoreActions: React.FC<MoreActionsProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M6.53033 4.46967C6.23744 4.17678 5.76256 4.17678 5.46967 4.46967C5.17678 4.76256 5.17678 5.23744 5.46967 5.53033L9.46967 9.53033C9.76256 9.82322 10.2374 9.82322 10.5303 9.53033L14.5303 5.53033C14.8232 5.23744 14.8232 4.76256 14.5303 4.46967C14.2374 4.17678 13.7626 4.17678 13.4697 4.46967L10 7.93934L6.53033 4.46967ZM6.53033 10.4697C6.23744 10.1768 5.76256 10.1768 5.46967 10.4697C5.17678 10.7626 5.17678 11.2374 5.46967 11.5303L9.46967 15.5303C9.76256 15.8232 10.2374 15.8232 10.5303 15.5303L14.5303 11.5303C14.8232 11.2374 14.8232 10.7626 14.5303 10.4697C14.2374 10.1768 13.7626 10.1768 13.4697 10.4697L10 13.9393L6.53033 10.4697Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nMoreActions.displayName = 'MoreActions';\nexport default MoreActions;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/MoreBelow.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface MoreBelowProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst MoreBelow: React.FC<MoreBelowProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M2.25 5C2.25 3.48122 3.48122 2.25 5 2.25H15C16.5188 2.25 17.75 3.48122 17.75 5V15C17.75 16.5188 16.5188 17.75 15 17.75H5C3.48122 17.75 2.25 16.5188 2.25 15V5ZM5 3.75C4.30964 3.75 3.75 4.30964 3.75 5V15C3.75 15.6904 4.30964 16.25 5 16.25H15C15.6904 16.25 16.25 15.6904 16.25 15V5C16.25 4.30964 15.6904 3.75 15 3.75H5Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M12.0822 13.5678C11.7893 13.2749 11.7893 12.8 12.0822 12.5071L13.5643 11.025L12.0822 9.54281C11.7893 9.24991 11.7893 8.77504 12.0822 8.48215C12.3751 8.18925 12.8499 8.18925 13.1428 8.48215L15.1553 10.4946C15.4482 10.7875 15.4482 11.2624 15.1553 11.5553L13.1428 13.5678C12.8499 13.8607 12.3751 13.8607 12.0822 13.5678Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M15.375 11.025C15.375 11.4392 15.0392 11.775 14.625 11.775L6.575 11.775C6.22359 11.775 5.88657 11.6354 5.63808 11.3869C5.3896 11.1384 5.25 10.8014 5.25 10.45L5.25 6.99996C5.25 6.58575 5.58579 6.24996 6 6.24996C6.41421 6.24996 6.75 6.58575 6.75 6.99996L6.75 10.275L14.625 10.275C15.0392 10.275 15.375 10.6107 15.375 11.025Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nMoreBelow.displayName = 'MoreBelow';\nexport default MoreBelow;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/MoreBelowFilled.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface MoreBelowFilledProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst MoreBelowFilled: React.FC<MoreBelowFilledProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M4 2C2.89543 2 2 2.89543 2 4V16C2 17.1046 2.89543 18 4 18H16C17.1046 18 18 17.1046 18 16V4C18 2.89543 17.1046 2 16 2H4ZM12.0822 13.5678C11.7893 13.2749 11.7893 12.8 12.0822 12.5071L12.8143 11.775L6.575 11.775C6.22359 11.775 5.88657 11.6354 5.63808 11.3869C5.3896 11.1385 5.25 10.8014 5.25 10.45L5.25 7.00002C5.25 6.58581 5.58579 6.25002 6 6.25002C6.41421 6.25002 6.75 6.58581 6.75 7.00002V10.275L12.8144 10.275L12.0822 9.54281C11.7893 9.24991 11.7893 8.77504 12.0822 8.48214C12.3751 8.18925 12.8499 8.18925 13.1428 8.48215L15.1553 10.4946C15.2328 10.5721 15.2898 10.6623 15.3263 10.7585C15.3579 10.842 15.3742 10.93 15.375 11.0181L15.375 11.025C15.375 11.1359 15.3509 11.2412 15.3078 11.3359C15.281 11.3947 15.2462 11.4508 15.2034 11.5025C15.1867 11.5227 15.1689 11.5421 15.1502 11.5604L13.1428 13.5678C12.8499 13.8607 12.3751 13.8607 12.0822 13.5678Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nMoreBelowFilled.displayName = 'MoreBelowFilled';\nexport default MoreBelowFilled;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Move.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface MoveProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Move: React.FC<MoveProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M9.442 2.24a.77.77 0 0 1 1.116 0l4.21 4.363a.84.84 0 0 1 0 1.157.77.77 0 0 1-1.116 0L10 3.975 6.348 7.76a.77.77 0 0 1-1.117 0 .84.84 0 0 1 0-1.157l4.21-4.363Zm-3.094 10L10 16.025l3.652-3.785a.77.77 0 0 1 1.117 0 .84.84 0 0 1 0 1.157l-4.21 4.363a.77.77 0 0 1-1.117 0l-4.21-4.363a.84.84 0 0 1 0-1.157.77.77 0 0 1 1.116 0Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nMove.displayName = 'Move';\nexport default Move;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/MoveArrowDown.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface MoveArrowDownProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst MoveArrowDown: React.FC<MoveArrowDownProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M10.0711 2.24999C10.4853 2.24999 10.8211 2.58578 10.8211 2.99999L10.8211 15.3315L15.4494 10.7031C15.7423 10.4103 16.2172 10.4103 16.5101 10.7031C16.8029 10.996 16.8029 11.4709 16.5101 11.7638L10.6014 17.6725C10.3085 17.9653 9.83364 17.9653 9.54075 17.6725L3.6321 11.7638C3.3392 11.4709 3.3392 10.996 3.6321 10.7031C3.92499 10.4103 4.39986 10.4103 4.69276 10.7031L9.32108 15.3315L9.32108 2.99999C9.32108 2.58578 9.65686 2.24999 10.0711 2.24999Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nMoveArrowDown.displayName = 'MoveArrowDown';\nexport default MoveArrowDown;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/MoveArrowLeft.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface MoveArrowLeftProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst MoveArrowLeft: React.FC<MoveArrowLeftProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M17.8921 10.071C17.8921 10.4853 17.5563 10.821 17.1421 10.821L4.81065 10.821L9.43897 15.4494C9.73186 15.7423 9.73186 16.2171 9.43897 16.51C9.14608 16.8029 8.6712 16.8029 8.37831 16.51L2.46966 10.6014C2.17677 10.3085 2.17677 9.83361 2.46966 9.54071L8.37831 3.63207C8.67121 3.33917 9.14608 3.33917 9.43897 3.63207C9.73187 3.92496 9.73187 4.39983 9.43897 4.69273L4.81065 9.32104L17.1421 9.32104C17.5563 9.32104 17.8921 9.65683 17.8921 10.071Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nMoveArrowLeft.displayName = 'MoveArrowLeft';\nexport default MoveArrowLeft;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/MoveArrowLeftDouble.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface MoveArrowLeftDoubleProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst MoveArrowLeftDouble: React.FC<MoveArrowLeftDoubleProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <g clipPath=\"url(#clip0_441_96309)\">\n      <path d=\"M7.18898 15.037L2.56066 10.4086L1.84213 9.65865L2.56066 8.90865L7.18898 4.28033C7.48187 3.98744 7.48187 3.51256 7.18898 3.21967C7.16183 3.19252 7.13312 3.1679 7.10314 3.14578C6.80963 2.92929 6.39407 2.95392 6.12832 3.21967L0.21967 9.12832C-0.0732232 9.42121 -0.0732233 9.89608 0.21967 10.189L6.12832 16.0976C6.42121 16.3905 6.89608 16.3905 7.18898 16.0976C7.48187 15.8047 7.48187 15.3299 7.18898 15.037ZM18.8315 10.5034C19.2457 10.5034 19.5815 10.1676 19.5815 9.75337C19.5815 9.33916 19.2457 9.00337 18.8315 9.00337L6.5 9.00337L11.1283 4.37506C11.4212 4.08216 11.4212 3.60729 11.1283 3.3144C10.8354 3.0215 10.3606 3.0215 10.0677 3.3144L4.15901 9.22304C3.86612 9.51594 3.86612 9.99081 4.15901 10.2837L10.0677 16.1924C10.3605 16.4852 10.8354 16.4852 11.1283 16.1924C11.4212 15.8995 11.4212 15.4246 11.1283 15.1317L6.5 10.5034L18.8315 10.5034Z\"\n        fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    </g>\n    <defs>\n      <clipPath id=\"clip0_441_96309\">\n        <path d=\"M0 0H20V20H0z\" />\n      </clipPath>\n    </defs>\n  </svg>\n);\nMoveArrowLeftDouble.displayName = 'MoveArrowLeftDouble';\nexport default MoveArrowLeftDouble;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/MoveArrowLeftNarrow.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface MoveArrowLeftNarrowProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst MoveArrowLeftNarrow: React.FC<MoveArrowLeftNarrowProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M18 9.762a.75.75 0 0 0-.75-.75H4.394L6.5 6.28a.75.75 0 1 0-1.06-1.06L2.22 9.237a.75.75 0 0 0 0 1.06l3.22 3.922a.75.75 0 1 0 1.06-1.06l-2.1-2.648h12.85a.75.75 0 0 0 .75-.75Z\"\n    />\n  </svg>\n);\nMoveArrowLeftNarrow.displayName = 'MoveArrowLeftNarrow';\nexport default MoveArrowLeftNarrow;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/MoveArrowRight.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface MoveArrowRightProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst MoveArrowRight: React.FC<MoveArrowRightProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M2.24999 10.071C2.24999 9.65683 2.58578 9.32104 2.99999 9.32104L15.3315 9.32105L10.7031 4.69273C10.4103 4.39983 10.4103 3.92496 10.7031 3.63207C10.996 3.33917 11.4709 3.33917 11.7638 3.63207L17.6725 9.54071C17.9653 9.83361 17.9653 10.3085 17.6725 10.6014L11.7638 16.51C11.4709 16.8029 10.996 16.8029 10.7031 16.51C10.4103 16.2171 10.4103 15.7423 10.7031 15.4494L15.3315 10.821L2.99999 10.821C2.58578 10.821 2.24999 10.4853 2.24999 10.071Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nMoveArrowRight.displayName = 'MoveArrowRight';\nexport default MoveArrowRight;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/MoveArrowRightNarrow.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface MoveArrowRightNarrowProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst MoveArrowRightNarrow: React.FC<MoveArrowRightNarrowProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M2 9.678c0 .414.336.75.75.75h12.856L13.5 13.159a.75.75 0 0 0 1.06 1.06l3.22-4.017a.75.75 0 0 0 0-1.061L14.56 5.22a.75.75 0 0 0-1.06 1.06l2.1 2.648H2.75a.75.75 0 0 0-.75.75Z\"\n    />\n  </svg>\n);\nMoveArrowRightNarrow.displayName = 'MoveArrowRightNarrow';\nexport default MoveArrowRightNarrow;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/MoveArrowUp.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface MoveArrowUpProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst MoveArrowUp: React.FC<MoveArrowUpProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M10.0711 17.8922C9.65686 17.8922 9.32108 17.5564 9.32108 17.1422L9.32108 4.81068L4.69276 9.439C4.39986 9.7319 3.92499 9.7319 3.6321 9.439C3.3392 9.14611 3.3392 8.67124 3.6321 8.37834L9.54075 2.46969C9.83364 2.1768 10.3085 2.1768 10.6014 2.46969L16.5101 8.37834C16.8029 8.67124 16.8029 9.14611 16.5101 9.439C16.2172 9.7319 15.7423 9.7319 15.4494 9.439L10.8211 4.81068L10.8211 17.1422C10.8211 17.5564 10.4853 17.8922 10.0711 17.8922Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nMoveArrowUp.displayName = 'MoveArrowUp';\nexport default MoveArrowUp;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Mute.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface MuteProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Mute: React.FC<MuteProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M13.03 16.666h-.18a2.07 2.07 0 0 1-1-.37l-2.53-1.39a.75.75 0 1 1 .72-1.31l2.6 1.42a.83.83 0 0 0 .34.15.66.66 0 0 0 .28 0 .41.41 0 0 0 .19-.18.34.34 0 0 0 .07-.22v-4.62a.75.75 0 0 1 1.5 0v4.57a1.95 1.95 0 0 1-1.11 1.75c-.274.131-.575.2-.88.2Zm-6.6-3.7H3.95a2 2 0 0 1-1.4-.56 1.94 1.94 0 0 1-.59-1.39v-2.4a2 2 0 0 1 .59-1.39 2 2 0 0 1 1.4-.56h2.27l5.28-3.25a2 2 0 0 1 2.82.57c.202.358.309.76.31 1.17a.75.75 0 1 1-1.5 0 1.138 1.138 0 0 0-.08-.34.44.44 0 0 0-.19-.16.49.49 0 0 0-.27 0 .52.52 0 0 0-.26.1l-5.15 3.06v4.4a.75.75 0 0 1-.75.75Zm-2.48-4.8a.54.54 0 0 0-.36.14.44.44 0 0 0-.13.31v2.4a.41.41 0 0 0 .14.31.5.5 0 0 0 .35.14h1.76v-3.3H3.95Z\"\n    />\n    <path d=\"M17.92 4.186a.76.76 0 0 1-.16 1L5.48 16.816a.76.76 0 0 1-1-.16.75.75 0 0 1 .16-1.05l12.23-11.58a.76.76 0 0 1 1.05.16Z\" fillRule=\"evenodd\" clipRule=\"evenodd\"\n    />\n  </svg>\n);\nMute.displayName = 'Mute';\nexport default Mute;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/MyWeek.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface MyWeekProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst MyWeek: React.FC<MyWeekProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M5.99986 1.82129C6.41407 1.82129 6.74986 2.15708 6.74986 2.57129V4.10701H13.2499V2.57129C13.2499 2.15708 13.5856 1.82129 13.9999 1.82129C14.4141 1.82129 14.7499 2.15708 14.7499 2.57129V4.107H16.2856C16.7876 4.107 17.269 4.30643 17.624 4.66141C17.979 5.01639 18.1784 5.49784 18.1784 5.99986V16.2856C18.1784 16.7876 17.979 17.269 17.624 17.624C17.269 17.979 16.7876 18.1784 16.2856 18.1784H3.71415C3.21213 18.1784 2.73067 17.979 2.37569 17.624C2.02071 17.269 1.82129 16.7876 1.82129 16.2856V5.99986C1.82129 5.49784 2.02071 5.01639 2.37569 4.66141C2.73067 4.30643 3.21213 4.107 3.71415 4.107C3.763 4.107 3.81077 4.11168 3.85702 4.1206C3.90326 4.11168 3.95102 4.10701 3.99986 4.10701H5.24986V2.57129C5.24986 2.15708 5.58565 1.82129 5.99986 1.82129ZM5.24986 7.14272V5.60701H3.99986C3.95101 5.60701 3.90324 5.60234 3.85699 5.59342C3.81075 5.60233 3.76299 5.607 3.71415 5.607C3.60995 5.607 3.51003 5.64839 3.43635 5.72207C3.36268 5.79574 3.32129 5.89567 3.32129 5.99986V16.2856C3.32129 16.3898 3.36268 16.4897 3.43635 16.5634C3.51003 16.637 3.60995 16.6784 3.71415 16.6784H16.2856C16.3898 16.6784 16.4897 16.637 16.5634 16.5634C16.637 16.4897 16.6784 16.3898 16.6784 16.2856V5.99986C16.6784 5.89567 16.637 5.79574 16.5634 5.72207C16.4897 5.64839 16.3898 5.607 16.2856 5.607H14.7499V7.14272C14.7499 7.55693 14.4141 7.89272 13.9999 7.89272C13.5856 7.89272 13.2499 7.55693 13.2499 7.14272V5.60701H6.74986V7.14272C6.74986 7.55693 6.41407 7.89272 5.99986 7.89272C5.58565 7.89272 5.24986 7.55693 5.24986 7.14272ZM13.4214 9.92231C13.6942 9.61058 13.6626 9.13676 13.3509 8.864C13.0392 8.59124 12.5653 8.62283 12.2926 8.93455L8.75058 12.9825L7.02129 11.6856C6.68992 11.437 6.21982 11.5042 5.97129 11.8356C5.72276 12.1669 5.78992 12.637 6.12129 12.8856L8.407 14.5999C8.72086 14.8353 9.16309 14.789 9.42144 14.4937L13.4214 9.92231Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nMyWeek.displayName = 'MyWeek';\nexport default MyWeek;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/NavigationArrow.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface NavigationArrowProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst NavigationArrow: React.FC<NavigationArrowProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M3.26 2.005c.19-.016.383.01.566.072l13.227 4.578c1.27.436 1.209 2.223-.046 2.613l-5.919 1.825-1.821 5.913v.002c-.39 1.254-2.177 1.316-2.613.045v.001L2.076 3.827a1.376 1.376 0 0 1-.042-.756l.055-.186a1.37 1.37 0 0 1 .313-.482l.146-.126c.154-.116.332-.2.522-.243l.19-.029ZM7.946 16.2l1.731-5.62c.065-.216.184-.414.345-.572l.132-.113c.13-.098.277-.17.433-.216v-.001L16.2 7.947 3.577 3.577 7.946 16.2ZM3.376 3.373l-.003.002-.588.206.709-.245-.001-.003-.118.04Z\"\n    />\n  </svg>\n);\nNavigationArrow.displayName = 'NavigationArrow';\nexport default NavigationArrow;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/NavigationChevronDown.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface NavigationChevronDownProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst NavigationChevronDown: React.FC<NavigationChevronDownProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M10.5303 14.5303L10 14L9.46967 14.5303C9.76256 14.8232 10.2374 14.8232 10.5303 14.5303ZM10 12.9393L3.53033 6.46967C3.23744 6.17678 2.76256 6.17678 2.46967 6.46967C2.17678 6.76256 2.17678 7.23744 2.46967 7.53033L9.46967 14.5303L10 14L10.5303 14.5303L17.5303 7.53033C17.8232 7.23744 17.8232 6.76256 17.5303 6.46967C17.2374 6.17678 16.7626 6.17678 16.4697 6.46967L10 12.9393Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nNavigationChevronDown.displayName = 'NavigationChevronDown';\nexport default NavigationChevronDown;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/NavigationChevronLeft.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface NavigationChevronLeftProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst NavigationChevronLeft: React.FC<NavigationChevronLeftProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M5.46967 10.5303L6 10L5.46967 9.46967C5.17678 9.76256 5.17678 10.2374 5.46967 10.5303ZM7.06066 10L13.5303 3.53033C13.8232 3.23744 13.8232 2.76256 13.5303 2.46967C13.2374 2.17678 12.7626 2.17678 12.4697 2.46967L5.46967 9.46967L6 10L5.46967 10.5303L12.4697 17.5303C12.7626 17.8232 13.2374 17.8232 13.5303 17.5303C13.8232 17.2374 13.8232 16.7626 13.5303 16.4697L7.06066 10Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nNavigationChevronLeft.displayName = 'NavigationChevronLeft';\nexport default NavigationChevronLeft;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/NavigationChevronRight.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface NavigationChevronRightProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst NavigationChevronRight: React.FC<NavigationChevronRightProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303L13 10L13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nNavigationChevronRight.displayName = 'NavigationChevronRight';\nexport default NavigationChevronRight;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/NavigationChevronUp.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface NavigationChevronUpProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst NavigationChevronUp: React.FC<NavigationChevronUpProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M9.46967 5.46967L10 6L10.5303 5.46967C10.2374 5.17678 9.76256 5.17678 9.46967 5.46967ZM10 7.06066L16.4697 13.5303C16.7626 13.8232 17.2374 13.8232 17.5303 13.5303C17.8232 13.2374 17.8232 12.7626 17.5303 12.4697L10.5303 5.46967L10 6L9.46967 5.46967L2.46967 12.4697C2.17678 12.7626 2.17678 13.2374 2.46967 13.5303C2.76256 13.8232 3.23744 13.8232 3.53033 13.5303L10 7.06066Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nNavigationChevronUp.displayName = 'NavigationChevronUp';\nexport default NavigationChevronUp;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/NavigationDoubleChevronLeft.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface NavigationDoubleChevronLeftProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst NavigationDoubleChevronLeft: React.FC<NavigationDoubleChevronLeftProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M2.52045 9.51996C2.22756 9.81286 2.22756 10.2877 2.52045 10.5806L9.52045 17.5806C9.81334 17.8735 10.2882 17.8735 10.5811 17.5806C10.874 17.2877 10.874 16.8129 10.5811 16.52L4.11144 10.0503L10.5811 3.58062C10.874 3.28773 10.874 2.81286 10.5811 2.51996C10.2882 2.22707 9.81334 2.22707 9.52045 2.51996L2.52045 9.51996Z\"\n      fill=\"currentColor\" />\n    <path d=\"M9.52045 9.51996C9.22756 9.81286 9.22756 10.2877 9.52045 10.5806L16.5205 17.5806C16.8133 17.8735 17.2882 17.8735 17.5811 17.5806C17.874 17.2877 17.874 16.8129 17.5811 16.52L11.1114 10.0503L17.5811 3.58062C17.874 3.28773 17.874 2.81286 17.5811 2.51996C17.2882 2.22707 16.8133 2.22707 16.5205 2.51996L9.52045 9.51996Z\"\n      fill=\"currentColor\" />\n  </svg>\n);\nNavigationDoubleChevronLeft.displayName = 'NavigationDoubleChevronLeft';\nexport default NavigationDoubleChevronLeft;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/NewTab.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface NewTabProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst NewTab: React.FC<NewTabProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M3.66646 3H14.346C14.7681 3.00122 15.1821 3.15768 15.4953 3.4498C15.8103 3.74354 15.9985 4.15312 16 4.59258L16 4.59507L16 9.92688C16 10.3411 15.6642 10.6769 15.25 10.6769C14.8358 10.6769 14.5 10.3411 14.5 9.92688V8.07327H3.50583V14.2135C3.50583 14.2135 3.50899 14.2193 3.51509 14.225C3.52968 14.2386 3.55999 14.2545 3.60162 14.2545H10.1946C10.6088 14.2545 10.9446 14.5903 10.9446 15.0045C10.9446 15.4187 10.6088 15.7545 10.1946 15.7545H3.60162C3.19461 15.7545 2.79466 15.6042 2.49203 15.3219C2.18762 15.038 2.00583 14.6413 2.00583 14.2157V4.5968C2.00728 4.15622 2.19603 3.74556 2.51184 3.45103C2.82591 3.15812 3.24105 3.00122 3.66431 3L3.66646 3ZM3.50583 6.57327H14.5V4.59715C14.4999 4.58857 14.4964 4.56932 14.4722 4.54677C14.446 4.52232 14.4002 4.50034 14.3424 4.5H3.66791C3.60893 4.50035 3.56195 4.52277 3.5349 4.548C3.50987 4.57134 3.50597 4.59165 3.50583 4.60131V6.57327ZM15.7115 12.75C15.7115 12.3358 15.3757 12 14.9615 12C14.5473 12 14.2115 12.3358 14.2115 12.75V14.2115H12.75C12.3358 14.2115 12 14.5473 12 14.9615C12 15.3757 12.3358 15.7115 12.75 15.7115H14.2115V17.173C14.2115 17.5872 14.5473 17.923 14.9615 17.923C15.3757 17.923 15.7115 17.5872 15.7115 17.173V15.7115H17.173C17.5872 15.7115 17.923 15.3757 17.923 14.9615C17.923 14.5473 17.5872 14.2115 17.173 14.2115H15.7115V12.75Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nNewTab.displayName = 'NewTab';\nexport default NewTab;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Night.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface NightProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Night: React.FC<NightProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M14.7363 3C14.7363 2.58579 14.4005 2.25 13.9863 2.25 13.5721 2.25 13.2363 2.58579 13.2363 3V3.75635H12.5625C12.1483 3.75635 11.8125 4.09213 11.8125 4.50635 11.8125 4.92056 12.1483 5.25635 12.5625 5.25635H13.2363V6.01176C13.2363 6.42598 13.5721 6.76176 13.9863 6.76176 14.4005 6.76176 14.7363 6.42598 14.7363 6.01176V5.25635H15.4072C15.8215 5.25635 16.1572 4.92056 16.1572 4.50635 16.1572 4.09213 15.8215 3.75635 15.4072 3.75635H14.7363V3zM16.3281 13.9883C16.3281 13.5741 15.9923 13.2383 15.5781 13.2383 15.1639 13.2383 14.8281 13.5741 14.8281 13.9883V14.7446H14.1543C13.7401 14.7446 13.4043 15.0804 13.4043 15.4946 13.4043 15.9088 13.7401 16.2446 14.1543 16.2446H14.8281V17C14.8281 17.4143 15.1639 17.75 15.5781 17.75 15.9923 17.75 16.3281 17.4143 16.3281 17V16.2446H16.999C17.4132 16.2446 17.749 15.9088 17.749 15.4946 17.749 15.0804 17.4132 14.7446 16.999 14.7446H16.3281V13.9883zM7.60209 5C7.93343 5.00116 8.20111 5.27067 8.2 5.602 8.2 5.60206 8.2 5.60212 8.2 5.60217 8.2 5.60317 8.2 5.60416 8.19999 5.60516 8.19572 6.90826 8.48339 7.82264 9.00216 8.41553 9.51092 8.99699 10.3299 9.36856 11.6148 9.40019 11.9437 9.40828 12.2047 9.67971 12.2 10.0087 12.1952 10.3376 11.9264 10.6014 11.5975 10.6 10.4275 10.595 9.64424 10.9332 9.1273 11.5129 8.59489 12.1101 8.26175 13.0556 8.19939 14.4273 8.18463 14.7519 7.91408 15.0058 7.58916 14.9999 7.26423 14.994 7.00304 14.7305 7.00003 14.4056 6.98803 13.1086 6.71696 12.1711 6.20684 11.5635 5.71499 10.9776 4.91472 10.5982 3.60083 10.6 3.2711 10.6005 3.00279 10.3348 3.00002 10.005 2.99725 9.67533 3.26106 9.40516 3.59074 9.40008 4.77369 9.38182 5.59126 9.06172 6.12173 8.49809 6.65727 7.92906 6.99529 7.01139 7.00001 5.598 7.00001 5.59794 7.00001 5.59789 7.00001 5.59783 7.00121 5.26649 7.27076 4.99885 7.60209 5zM7.59649 8.47109C7.43178 8.7856 7.23202 9.06929 6.99558 9.32052 6.74598 9.58572 6.46419 9.80558 6.15425 9.98384 6.52655 10.1952 6.85092 10.4644 7.12588 10.7919 7.32943 11.0343 7.4997 11.3016 7.64025 11.5901 7.8033 11.2676 7.99949 10.9747 8.23162 10.7144 8.48516 10.43 8.77328 10.1936 9.09338 10.0035 8.71486 9.7946 8.38234 9.52949 8.09906 9.20573 7.90324 8.98193 7.73646 8.73632 7.59649 8.47109z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nNight.displayName = 'Night';\nexport default Night;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/NoColor.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface NoColorProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst NoColor: React.FC<NoColorProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M9.99869 2.45479C10.29 2.1796 10.7462 2.18205 11.0346 2.46035 11.8801 3.27645 12.629 4.18707 13.2665 5.17427 13.4912 5.52224 13.3913 5.98648 13.0433 6.21118 12.6953 6.43589 12.2311 6.33596 12.0064 5.98799 11.5642 5.30318 11.0625 4.65922 10.5075 4.06347 8.55502 6.10494 6.79968 9.10384 6.79968 12.2306 6.79968 12.6448 6.4639 12.9806 6.04968 12.9806 5.63547 12.9806 5.29968 12.6448 5.29968 12.2306 5.29968 8.25797 7.68621 4.63918 9.99869 2.45479zM14.0817 8.2783C14.4692 8.13179 14.902 8.3271 15.0485 8.71454 15.4712 9.83227 15.7016 11.0135 15.7298 12.2081 15.7548 12.9019 15.6367 13.5934 15.3829 14.2396 15.1285 14.8874 14.7432 15.4758 14.251 15.9679 13.7589 16.4601 13.1705 16.8454 12.5227 17.0998 11.881 17.3518 11.1947 17.47 10.5059 17.4472 9.21585 17.4632 7.96422 17.0068 6.98717 16.1636 6.67359 15.893 6.63877 15.4194 6.9094 15.1058 7.18003 14.7922 7.65362 14.7574 7.9672 15.028 8.67056 15.635 9.57259 15.9622 10.5015 15.9471 10.5148 15.9469 10.5281 15.9471 10.5414 15.9476 11.0307 15.9657 11.5186 15.8826 11.9744 15.7036 12.4302 15.5246 12.8441 15.2535 13.1904 14.9073 13.5366 14.561 13.8077 14.1471 13.9867 13.6913 14.1657 13.2355 14.2487 12.7477 14.2306 12.2583L14.2303 12.248 14.2303 12.248C14.2065 11.2211 14.0088 10.2058 13.6455 9.2451 13.499 8.85766 13.6943 8.42481 14.0817 8.2783zM17.3142 3.38282C17.6071 3.67571 17.6071 4.15058 17.3142 4.44348L4.53033 17.2274C4.23744 17.5203 3.76256 17.5203 3.46967 17.2274 3.17678 16.9345 3.17678 16.4596 3.46967 16.1667L16.2536 3.38282C16.5465 3.08992 17.0214 3.08992 17.3142 3.38282z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nNoColor.displayName = 'NoColor';\nexport default NoColor;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Note.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface NoteProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Note: React.FC<NoteProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M5.98813 3.5C5.87833 3.5 5.77654 3.54275 5.70425 3.61333C5.63257 3.68331 5.5957 3.77435 5.5957 3.86538V16.1346C5.5957 16.2256 5.63257 16.3167 5.70425 16.3867C5.77654 16.4572 5.87833 16.5 5.98813 16.5H14.2699C14.3797 16.5 14.4815 16.4572 14.5538 16.3867C14.6255 16.3167 14.6624 16.2256 14.6624 16.1346V6.00039C14.6623 5.90955 14.6255 5.81856 14.5541 5.74867L12.3669 3.61325C12.2947 3.54277 12.193 3.50006 12.0833 3.5H5.98813ZM14.2699 18C14.7661 18 15.2455 17.8077 15.6017 17.46C15.9585 17.1116 16.1624 16.6352 16.1624 16.1346V6.00023C16.1623 5.49998 15.9586 5.02379 15.6021 4.67555L13.4146 2.53979C13.0585 2.19238 12.5793 2.0001 12.0835 2H5.98813C5.49194 2 5.01257 2.19227 4.65637 2.54005C4.29956 2.88841 4.0957 3.36478 4.0957 3.86538V16.1346C4.0957 16.6352 4.29956 17.1116 4.65637 17.46C5.01257 17.8077 5.49194 18 5.98813 18H14.2699ZM7.20117 9.2998C7.20117 8.88559 7.53696 8.5498 7.95117 8.5498H9.98058C10.3948 8.5498 10.7306 8.88559 10.7306 9.2998C10.7306 9.71402 10.3948 10.0498 9.98058 10.0498H7.95117C7.53696 10.0498 7.20117 9.71402 7.20117 9.2998ZM7.95117 12.0791C7.53696 12.0791 7.20117 12.4149 7.20117 12.8291C7.20117 13.2433 7.53696 13.5791 7.95117 13.5791H12.3335C12.7477 13.5791 13.0835 13.2433 13.0835 12.8291C13.0835 12.4149 12.7477 12.0791 12.3335 12.0791H7.95117Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nNote.displayName = 'Note';\nexport default Note;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/NotificationChecked.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface NotificationCheckedProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst NotificationChecked: React.FC<NotificationCheckedProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M10 2.05a.75.75 0 0 1 .75.75v.81a5.83 5.83 0 0 1 5.172 5.792c0 2.339.251 3.653.474 4.356.111.35.213.54.269.629a.69.69 0 0 0 .039.056.75.75 0 0 1-.515 1.296h-3.236a.75.75 0 0 1-.03.196A2.945 2.945 0 0 1 10.1 18.05a2.938 2.938 0 0 1-2.821-2.115.752.752 0 0 1-.03-.196H4a.75.75 0 0 1-.601-1.2 1.726 1.726 0 0 0 .09-.158c.074-.146.185-.4.3-.79.23-.779.476-2.102.476-4.189A5.829 5.829 0 0 1 9.25 3.635V2.8a.75.75 0 0 1 .75-.75ZM8.807 15.74a1.445 1.445 0 0 0 1.294.81 1.438 1.438 0 0 0 1.295-.81H8.807Zm1.287-10.667a4.329 4.329 0 0 0-4.329 4.33c0 2.202-.26 3.672-.538 4.614a8.216 8.216 0 0 1-.07.222h9.817l-.008-.027c-.284-.897-.543-2.377-.543-4.81a4.329 4.329 0 0 0-4.329-4.329Zm1.807 3.345a.75.75 0 0 1 1.056 1.056l-.052.056-3.125 3.125a.75.75 0 0 1-.946.094l-.115-.094-1.25-1.25-.051-.056a.75.75 0 0 1 1.055-1.056l.057.052.72.72 2.594-2.595.057-.052Z\"\n    />\n  </svg>\n);\nNotificationChecked.displayName = 'NotificationChecked';\nexport default NotificationChecked;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Notifications.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface NotificationsProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Notifications: React.FC<NotificationsProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M10 2.04999C10.4143 2.04999 10.75 2.38577 10.75 2.79999V3.61058C12.0546 3.75821 13.2785 4.34336 14.2159 5.28079C15.309 6.37389 15.9231 7.85644 15.9231 9.4023C15.9231 11.7406 16.1727 13.0548 16.3959 13.758C16.5068 14.1075 16.6088 14.2984 16.6645 14.3868C16.6835 14.4168 16.697 14.435 16.7038 14.4435C16.9179 14.6455 16.9953 14.9565 16.8964 15.2377C16.7908 15.538 16.5072 15.7389 16.1889 15.7389H12.9529C12.9516 15.8038 12.9418 15.8695 12.9226 15.9348C12.7439 16.5449 12.3725 17.0809 11.864 17.4623C11.3554 17.8437 10.7371 18.05 10.1015 18.05C9.46584 18.05 8.84746 17.8437 8.33891 17.4623C7.83037 17.0809 7.45905 16.5449 7.28027 15.9348C7.26115 15.8695 7.2513 15.8038 7.24997 15.7389H4.00001C3.71313 15.7389 3.45138 15.5752 3.32575 15.3173C3.20248 15.0643 3.23145 14.764 3.39963 14.5394C3.40133 14.5369 3.40486 14.5316 3.41004 14.5235C3.42459 14.5005 3.45231 14.4542 3.48918 14.3812C3.56285 14.2352 3.67358 13.9813 3.78854 13.5917C4.01863 12.812 4.26574 11.4886 4.26574 9.4023C4.26574 7.85644 4.87984 6.37389 5.97293 5.28079C6.865 4.38872 8.01646 3.81567 9.25004 3.63507V2.79999C9.25004 2.38577 9.58582 2.04999 10 2.04999ZM8.80705 15.7389C8.90698 15.9443 9.05465 16.1241 9.2389 16.2623C9.488 16.4491 9.79062 16.55 10.1015 16.55C10.4123 16.55 10.7149 16.4491 10.964 16.2623C11.1483 16.1241 11.2959 15.9443 11.3959 15.7389H8.80705ZM7.03359 6.34145C7.84538 5.52967 8.9464 5.07361 10.0944 5.07361C11.2425 5.07361 12.3435 5.52967 13.1553 6.34145C13.9671 7.15324 14.4231 8.25426 14.4231 9.4023C14.4231 11.8353 14.6814 13.3144 14.9661 14.2117L14.9748 14.2389H5.15815C5.18119 14.1682 5.20426 14.0941 5.22721 14.0163C5.50499 13.075 5.76574 11.6052 5.76574 9.4023C5.76574 8.25426 6.2218 7.15324 7.03359 6.34145Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nNotifications.displayName = 'Notifications';\nexport default Notifications;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/NotificationsMuted.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface NotificationsMutedProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst NotificationsMuted: React.FC<NotificationsMutedProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M10.75 2a.75.75 0 0 0-1.5 0v1.27c-1.326.12-2.567.744-3.498 1.756-1.032 1.12-1.61 2.526-1.61 4.21 0 .709-.095 1.896-.193 2.934a105.025 105.025 0 0 1-.177 1.72l-.013.108-.004.037a.761.761 0 0 0-.003.032L1.941 15.65a.845.845 0 0 0-.233.236.777.777 0 0 0-.102.618.79.79 0 0 0 .147.288.914.914 0 0 0 .552.295.96.96 0 0 0 .625-.12L17.393 4.32a.815.815 0 0 0 .319-.51.775.775 0 0 0-.13-.578.91.91 0 0 0-.58-.32.953.953 0 0 0-.657.146L14.02 5.091l-.009-.01a7.021 7.021 0 0 0-1.122-.873 6.324 6.324 0 0 0-2.139-.858V2Zm2.136 4.082a5.518 5.518 0 0 0-.792-.6c-.601-.377-1.425-.732-2.38-.732-1.06 0-2.09.456-2.859 1.292-.776.843-1.214 1.886-1.214 3.195 0 .789-.101 2.044-.199 3.074l-.029.304 7.473-6.533ZM6.847 15.75h.304c.002.06.011.121.029.182a2.978 2.978 0 0 0 1.054 1.544 2.913 2.913 0 0 0 3.533 0c.508-.387.877-.93 1.054-1.544a.756.756 0 0 0 .03-.184h2.65a.75.75 0 0 0 .536-1.274.758.758 0 0 1-.04-.061 3.045 3.045 0 0 1-.26-.661c-.214-.735-.451-2.098-.451-4.515v-.004a8.17 8.17 0 0 0-.098-1.211 3.903 3.903 0 0 0-.014-.08l-.004-.023-.002-.007v-.005a.75.75 0 0 0-1.47.3l.002.01.008.05a6.649 6.649 0 0 1 .077.971c0 2.503.245 4.019.513 4.935l.022.075-7.474.002a.75.75 0 1 0 0 1.5Zm4.01.533c.185-.14.333-.324.434-.534h-2.58c.1.21.249.394.432.534a1.414 1.414 0 0 0 1.715 0Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nNotificationsMuted.displayName = 'NotificationsMuted';\nexport default NotificationsMuted;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Numbers.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface NumbersProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Numbers: React.FC<NumbersProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M4.95904 4.09424C4.95904 3.82078 4.80989 3.56899 4.56982 3.43715C4.32974 3.30531 4.03679 3.31433 3.80532 3.46068L2.55577 4.25068C2.20515 4.47235 2.10099 4.93571 2.32311 5.28561C2.54523 5.63552 3.00954 5.73947 3.36016 5.5178L3.45598 5.45722V8.09424C3.45598 8.50845 3.79245 8.84424 4.20751 8.84424C4.62257 8.84424 4.95904 8.50845 4.95904 8.09424V4.09424ZM3.48381 12.9888C3.53298 12.7818 3.72756 12.6438 3.92569 12.6571C4.0302 12.6641 4.11979 12.6914 4.18446 12.7266C4.24693 12.7605 4.27464 12.7948 4.28733 12.8185L4.28866 12.8209L4.28913 12.8219L4.29073 12.8254C4.29221 12.8288 4.29462 12.8349 4.29719 12.8436C4.30219 12.8603 4.30855 12.8886 4.30872 12.9294C4.30896 12.9979 4.29319 13.0846 4.16335 13.2632C4.02916 13.4476 3.8349 13.6499 3.5365 13.9606L3.5365 13.9606L3.43696 14.0643C3.14631 14.3676 2.716 14.8233 2.19264 15.4043C1.99428 15.6245 1.94432 15.9406 2.06511 16.2111C2.1859 16.4815 2.45483 16.6557 2.75154 16.6557H5.20955C5.62461 16.6557 5.96108 16.32 5.96108 15.9057C5.96108 15.4915 5.62461 15.1557 5.20955 15.1557H4.47089L4.52313 15.1012L4.63108 14.9889C4.90796 14.7013 5.18064 14.418 5.37972 14.1443C5.62338 13.8093 5.81353 13.4161 5.81177 12.9236C5.8101 12.5262 5.68474 12.2448 5.61271 12.111C5.26838 11.4686 4.59321 11.1987 4.02638 11.1604C3.0902 11.0977 2.23865 11.7277 2.02129 12.6427C1.92554 13.0458 2.17532 13.45 2.57918 13.5455C2.98305 13.6411 3.38806 13.3918 3.48381 12.9888ZM8.06327 4.38062C7.64821 4.38062 7.31174 4.7164 7.31174 5.13062C7.31174 5.54483 7.64821 5.88062 8.06327 5.88062H17.2486C17.6637 5.88062 18.0001 5.54483 18.0001 5.13062C18.0001 4.7164 17.6637 4.38062 17.2486 4.38062H8.06327ZM7.31174 10.1306C7.31174 9.7164 7.64821 9.38062 8.06327 9.38062H17.2486C17.6637 9.38062 18.0001 9.7164 18.0001 10.1306C18.0001 10.5448 17.6637 10.8806 17.2486 10.8806H8.06327C7.64821 10.8806 7.31174 10.5448 7.31174 10.1306ZM7.31174 15.1562C7.31174 14.742 7.64821 14.4062 8.06327 14.4062H17.2486C17.6637 14.4062 18.0001 14.742 18.0001 15.1562C18.0001 15.5705 17.6637 15.9062 17.2486 15.9062H8.06327C7.64821 15.9062 7.31174 15.5705 7.31174 15.1562Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nNumbers.displayName = 'Numbers';\nexport default Numbers;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Offline.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface OfflineProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Offline: React.FC<OfflineProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M15.9224 3.5777C16.2153 3.8706 16.2153 4.34547 15.9224 4.63836L4.13848 16.4223C3.84559 16.7152 3.37072 16.7152 3.07782 16.4223 2.78493 16.1294 2.78493 15.6545 3.07782 15.3616L14.8617 3.5777C15.1546 3.28481 15.6295 3.28481 15.9224 3.5777zM12.158 4.55997C11.4057 4.07023 10.5076 3.78571 9.54286 3.78571 7.23555 3.78571 5.30913 5.41319 4.84783 7.58317 3.20554 8.0374 2 9.54173 2 11.3286 2 12.3362 2.38358 13.2543 3.01269 13.9448 3.13876 14.0992 3.33063 14.1978 3.54554 14.1978 3.92524 14.1978 4.23304 13.89 4.23304 13.5103 4.23304 13.311 4.14824 13.1315 4.01274 13.006 3.61396 12.561 3.37143 11.9731 3.37143 11.3286 3.37143 10.0565 4.31673 9.00409 5.54293 8.83737L6.07722 8.76472 6.13263 8.22837C6.31087 6.50308 7.77012 5.15713 9.54286 5.15713 10.254 5.15713 10.9148 5.37375 11.4626 5.74458 11.4647 5.74604 11.4669 5.74739 11.4691 5.74865 11.5761 5.81727 11.7033 5.85706 11.8398 5.85706 12.2195 5.85706 12.5273 5.54926 12.5273 5.16956 12.5273 4.90468 12.3775 4.67478 12.158 4.55997zM14.1412 7.44025C14.1661 7.44025 14.1906 7.44156 14.2147 7.44412 16.3143 7.49738 18 9.21611 18 11.3286 18 13.4746 16.2603 15.2143 14.1143 15.2143 14.0545 15.2143 13.995 15.2129 13.9358 15.2102V15.2143H7.4232L7.42089 15.2143 7.41857 15.2143H7.36355L7.3618 15.2118C7.00976 15.1818 6.73339 14.8866 6.73339 14.5268 6.73339 14.1471 7.04119 13.8393 7.42089 13.8393 7.44468 13.8393 7.46819 13.8405 7.49136 13.8428H12.5644 12.9181 13.3153L14.1143 13.8428C15.5029 13.8428 16.6286 12.7172 16.6286 11.3286 16.6286 9.95729 15.5308 8.84241 14.1661 8.8148 14.1579 8.81509 14.1496 8.81525 14.1412 8.81525L14.1367 8.81523 13.8828 8.81525C13.5204 8.79596 13.2325 8.49498 13.2325 8.12775 13.2325 7.76051 13.5204 7.46053 13.8828 7.44123L13.9167 7.44025 13.92 7.44025 13.9232 7.44025H14.1367L14.1412 7.44025z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nOffline.displayName = 'Offline';\nexport default Offline;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Open.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface OpenProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Open: React.FC<OpenProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M12.5148 2.49976C12.1212 2.49976 11.8022 2.82125 11.8022 3.21784 11.8022 3.61443 12.1212 3.93593 12.5148 3.93593H14.6466L10.7369 8.15315C10.4682 8.44295 10.4836 8.89735 10.7711 9.16809 11.0587 9.43883 11.5096 9.42339 11.7783 9.1336L15.5746 5.03862V7.28699C15.5746 7.68358 15.8936 8.00507 16.2872 8.00507 16.6807 8.00507 16.9997 7.68358 16.9997 7.28699V3.23812C17.0052 3.03946 16.9293 2.83946 16.7739 2.69313 16.6366 2.56389 16.4621 2.49986 16.288 2.49976L12.5148 2.49976zM9.26311 11.8464C9.53177 11.5566 9.51644 11.1022 9.22888 10.8314 8.94131 10.5607 8.4904 10.5761 8.22174 10.8659L4.42513 14.9612V12.7124C4.42513 12.3158 4.1061 11.9943 3.71256 11.9943 3.31903 11.9943 3 12.3158 3 12.7124V16.7815C3 16.8649 3.01412 16.945 3.04007 17.0195 3.07689 17.1255 3.13902 17.2244 3.22611 17.3064 3.36743 17.4394 3.54818 17.5034 3.72738 17.4996H7.48496C7.8785 17.4996 8.19752 17.1781 8.19752 16.7815 8.19752 16.3849 7.8785 16.0634 7.48496 16.0634H5.35358L9.26311 11.8464z\"\n      fill=\"currentColor\" />\n  </svg>\n);\nOpen.displayName = 'Open';\nexport default Open;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/PDF.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface PDFProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst PDF: React.FC<PDFProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M16.575 7.627a.754.754 0 0 0 0-.12v-.024c0-.457-.181-.895-.504-1.218l-3.81-3.81a1.724 1.724 0 0 0-1.219-.505H5.145a1.723 1.723 0 0 0-1.723 1.723v12.654a1.723 1.723 0 0 0 1.723 1.723h9.707a1.724 1.724 0 0 0 1.723-1.723v-8.7ZM4.987 3.515a.223.223 0 0 1 .158-.065l5.066.055v3.088a1.723 1.723 0 0 0 1.723 1.724h3.141v8.01a.223.223 0 0 1-.223.223H5.145a.223.223 0 0 1-.223-.223V3.673c0-.059.023-.116.065-.158Zm6.724.511 2.79 2.79h-2.567a.223.223 0 0 1-.223-.223V4.026ZM7.384 15.34a1.03 1.03 0 0 1-.701-.252 1.045 1.045 0 0 1-.37-.608 1.007 1.007 0 0 1 .13-.694c.18-.312.505-.536.775-.691.11-.063.228-.125.354-.184a14.314 14.314 0 0 0 .453-2.808 8.05 8.05 0 0 1-.335-.579c-.167-.322-.317-.678-.356-1.01-.02-.167-.02-.397.086-.625a.946.946 0 0 1 .599-.515.942.942 0 0 1 .784.106c.215.137.338.335.41.487.141.3.2.68.226 1.036.015.215.02.45.017.697.245.355.536.734.848 1.102.36.425.73.817 1.072 1.133.166-.011.324-.016.473-.013.313.007.7.047 1.007.225.17.098.36.265.455.53.096.267.056.523-.02.721a1.015 1.015 0 0 1-.506.56 1.09 1.09 0 0 1-.675.08c-.35-.063-.695-.268-.981-.473a5.64 5.64 0 0 1-.21-.158 11.492 11.492 0 0 0-2.203.559 5.312 5.312 0 0 1-.086.214c-.135.316-.325.67-.601.902-.15.124-.368.248-.645.258Zm1.318-2.472a38.115 38.115 0 0 1 1.416-.364 45.25 45.25 0 0 1-1.123-1.27 45.17 45.17 0 0 1-.293 1.634Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nPDF.displayName = 'PDF';\nexport default PDF;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Page.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface PageProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Page: React.FC<PageProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path fill=\"currentColor\" d=\"m15.51 4.68-2.19-2.14A1.91 1.91 0 0 0 11.99 2h-6.1c-.5 0-.98.19-1.33.54-.36.35-.56.82-.56 1.33v12.27c0 .5.2.98.56 1.33.36.35.84.54 1.33.54h8.28c.5 0 .98-.19 1.33-.54.36-.35.56-.82.56-1.33V6c0-.5-.2-.98-.56-1.32h.01Zm-.94 11.46c0 .09-.04.18-.11.25s-.17.11-.28.11H5.89c-.11 0-.21-.04-.28-.11a.358.358 0 0 1-.11-.25V3.87c0-.09.04-.18.11-.25s.17-.11.28-.11h6.1c.11 0 .21.04.28.11l2.19 2.14c.07.07.11.16.11.25v10.13Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nPage.displayName = 'Page';\nexport default Page;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Paste.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface PasteProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Paste: React.FC<PasteProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M6.20999 8.91333C6.20999 8.49912 6.54578 8.16333 6.95999 8.16333H12.88C13.2942 8.16333 13.63 8.49912 13.63 8.91333 13.63 9.32754 13.2942 9.66333 12.88 9.66333H6.95999C6.54578 9.66333 6.20999 9.32754 6.20999 8.91333zM6.20999 11.38C6.20999 10.9658 6.54578 10.63 6.95999 10.63H12.88C13.2942 10.63 13.63 10.9658 13.63 11.38 13.63 11.7942 13.2942 12.13 12.88 12.13H6.95999C6.54578 12.13 6.20999 11.7942 6.20999 11.38zM6.20999 13.8467C6.20999 13.4325 6.54578 13.0967 6.95999 13.0967H12.88C13.2942 13.0967 13.63 13.4325 13.63 13.8467 13.63 14.2609 13.2942 14.5967 12.88 14.5967H6.95999C6.54578 14.5967 6.20999 14.2609 6.20999 13.8467z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M9.92 3.25C9.46471 3.25 9.02807 3.43086 8.70613 3.7528C8.3842 4.07474 8.20333 4.51138 8.20333 4.96667C8.20333 5.38088 7.86755 5.71667 7.45333 5.71667H4.98667C4.9239 5.71667 4.8637 5.7416 4.81932 5.78598C4.77493 5.83037 4.75 5.89057 4.75 5.95333V16.3133C4.75 16.3761 4.77493 16.4363 4.81932 16.4807C4.8637 16.5251 4.9239 16.55 4.98667 16.55H14.8533C14.9161 16.55 14.9763 16.5251 15.0207 16.4807C15.0651 16.4363 15.09 16.3761 15.09 16.3133V5.95333C15.09 5.89057 15.0651 5.83037 15.0207 5.78598C14.9763 5.7416 14.9161 5.71667 14.8533 5.71667H12.3867C11.9725 5.71667 11.6367 5.38088 11.6367 4.96667C11.6367 4.51138 11.4558 4.07474 11.1339 3.7528C10.8119 3.43086 10.3753 3.25 9.92 3.25ZM13.048 4.21667C12.9107 3.64415 12.6177 3.11527 12.1945 2.69214C11.5913 2.0889 10.7731 1.75 9.92 1.75C9.06689 1.75 8.24872 2.0889 7.64547 2.69214C7.22234 3.11527 6.92927 3.64415 6.79198 4.21667H4.98667C4.52607 4.21667 4.08435 4.39964 3.75866 4.72532C3.43297 5.05101 3.25 5.49274 3.25 5.95333V16.3133C3.25 16.7739 3.43297 17.2157 3.75866 17.5413C4.08435 17.867 4.52607 18.05 4.98667 18.05H14.8533C15.3139 18.05 15.7557 17.867 16.0813 17.5413C16.407 17.2157 16.59 16.7739 16.59 16.3133V5.95333C16.59 5.49274 16.407 5.05101 16.0813 4.72532C15.7557 4.39964 15.3139 4.21667 14.8533 4.21667H13.048Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M9.92001 3.72333C9.65567 3.72333 9.40217 3.82833 9.21526 4.01524C9.02834 4.20216 8.92334 4.45566 8.92334 4.71999C8.92334 4.91712 8.98179 5.10981 9.09131 5.27371C9.20082 5.43761 9.35648 5.56536 9.5386 5.64079C9.72072 5.71623 9.92111 5.73597 10.1144 5.69751C10.3078 5.65905 10.4854 5.56413 10.6248 5.42474C10.7641 5.28535 10.8591 5.10776 10.8975 4.91443C10.936 4.7211 10.9162 4.52071 10.8408 4.33859C10.7654 4.15647 10.6376 4.00081 10.4737 3.8913C10.3098 3.78178 10.1171 3.72333 9.92001 3.72333Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nPaste.displayName = 'Paste';\nexport default Paste;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Pause.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface PauseProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Pause: React.FC<PauseProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M4.34315 4.34315C5.84344 2.84285 7.87827 2 10 2C12.1217 2 14.1566 2.84285 15.6569 4.34315C17.1571 5.84344 18 7.87827 18 10C18 12.1217 17.1571 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84285 14.1566 2 12.1217 2 10C2 7.87827 2.84285 5.84344 4.34315 4.34315ZM10 3.49994C8.27608 3.49994 6.62276 4.18477 5.40377 5.40377C4.18477 6.62276 3.49994 8.27608 3.49994 10C3.49994 11.7239 4.18477 13.3772 5.40377 14.5962C6.62276 15.8152 8.27608 16.5001 10 16.5001C11.7239 16.5001 13.3772 15.8152 14.5962 14.5962C15.8152 13.3772 16.5001 11.7239 16.5001 10C16.5001 8.27608 15.8152 6.62276 14.5962 5.40377C13.3772 4.18477 11.7239 3.49994 10 3.49994ZM8.75 7.0835H7.91667C7.68655 7.0835 7.5 7.27004 7.5 7.50016V12.5002C7.5 12.7303 7.68655 12.9168 7.91667 12.9168H8.75C8.98012 12.9168 9.16667 12.7303 9.16667 12.5002V7.50016C9.16667 7.27004 8.98012 7.0835 8.75 7.0835ZM11.2507 7.0835H12.084C12.3141 7.0835 12.5007 7.27004 12.5007 7.50016V12.5002C12.5007 12.7303 12.3141 12.9168 12.084 12.9168H11.2507C11.0205 12.9168 10.834 12.7303 10.834 12.5002V7.50016C10.834 7.27004 11.0205 7.0835 11.2507 7.0835Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nPause.displayName = 'Pause';\nexport default Pause;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Person.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface PersonProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Person: React.FC<PersonProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M10.25 2.05a3.865 3.865 0 1 0 0 7.73 3.865 3.865 0 0 0 0-7.73Zm-.905 1.68a2.365 2.365 0 1 1 1.81 4.37 2.365 2.365 0 0 1-1.81-4.37Zm.495 7.001h.824a7.258 7.258 0 0 1 3.188.873 6.263 6.263 0 0 1 2.307 2.14c.551.876.84 1.863.84 2.866v.688c0 .388-.354.702-.792.702H4.292c-.438 0-.792-.314-.792-.702v-.688c0-1.003.289-1.99.84-2.866a6.264 6.264 0 0 1 2.308-2.14 7.257 7.257 0 0 1 3.191-.873Zm.053 1.403h.713a5.525 5.525 0 0 1 2.414.664 4.768 4.768 0 0 1 1.757 1.63c.418.663.638 1.41.64 2.168H5.083a4.09 4.09 0 0 1 .64-2.169 4.77 4.77 0 0 1 1.757-1.63 5.525 5.525 0 0 1 2.413-.663Zm-4.81 4.473v-.01.01Zm10.334 0v-.01.01Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nPerson.displayName = 'Person';\nexport default Person;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/PersonRound.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface PersonRoundProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst PersonRound: React.FC<PersonRoundProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M7.51318 5.43037C8.17316 4.77038 9.06829 4.39961 10.0017 4.39961C10.935 4.39961 11.8301 4.77038 12.4901 5.43037C13.1501 6.09035 13.5209 6.98548 13.5209 7.91884C13.5209 8.8522 13.1501 9.74733 12.4901 10.4073C11.8301 11.0673 10.935 11.4381 10.0017 11.4381C9.06829 11.4381 8.17316 11.0673 7.51318 10.4073C6.8532 9.74733 6.48242 8.8522 6.48242 7.91884C6.48242 6.98548 6.8532 6.09035 7.51318 5.43037ZM10.0017 5.89961C9.46612 5.89961 8.95252 6.11235 8.57384 6.49103C8.19516 6.86971 7.98242 7.38331 7.98242 7.91884C7.98242 8.45437 8.19516 8.96797 8.57384 9.34665C8.95252 9.72533 9.46612 9.93807 10.0017 9.93807C10.5372 9.93807 11.0508 9.72533 11.4295 9.34665C11.8081 8.96797 12.0209 8.45437 12.0209 7.91884C12.0209 7.38331 11.8081 6.86971 11.4295 6.49103C11.0508 6.11235 10.5372 5.89961 10.0017 5.89961Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M10.0008 2.0498C7.89231 2.0498 5.8702 2.88739 4.37928 4.37831C2.88837 5.86922 2.05078 7.89133 2.05078 9.9998C2.05078 12.1083 2.88837 14.1304 4.37928 15.6213C4.50318 15.7452 4.63075 15.8646 4.76173 15.9794C4.77108 15.9879 4.78069 15.9963 4.79055 16.0045C6.23158 17.255 8.08036 17.9498 10.0008 17.9498C12.1093 17.9498 14.1314 17.1122 15.6223 15.6213C17.1132 14.1304 17.9508 12.1083 17.9508 9.9998C17.9508 7.89133 17.1132 5.86922 15.6223 4.37831C14.1314 2.88739 12.1093 2.0498 10.0008 2.0498ZM6.2925 15.2773C7.37119 16.0352 8.66461 16.4498 10.0008 16.4498C11.3369 16.4498 12.6302 16.0353 13.7088 15.2774C13.3315 14.8156 12.8699 14.4267 12.3466 14.1326C11.6302 13.73 10.8223 13.5186 10.0006 13.5186C9.17886 13.5186 8.37096 13.73 7.6546 14.1326C7.13136 14.4267 6.66982 14.8155 6.2925 15.2773ZM14.8283 14.2774C15.8706 13.1011 16.4508 11.5804 16.4508 9.9998C16.4508 8.28916 15.7712 6.64858 14.5616 5.43897C13.352 4.22936 11.7114 3.5498 10.0008 3.5498C8.29013 3.5498 6.64955 4.22936 5.43994 5.43897C4.23033 6.64858 3.55078 8.28916 3.55078 9.9998C3.55078 11.5803 4.13084 13.1009 5.17307 14.2772C5.66065 13.6931 6.25191 13.2003 6.91971 12.825C7.86047 12.2963 8.92145 12.0186 10.0006 12.0186C11.0797 12.0186 12.1407 12.2963 13.0815 12.825C13.7494 13.2003 14.3407 13.6932 14.8283 14.2774Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nPersonRound.displayName = 'PersonRound';\nexport default PersonRound;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Pin.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface PinProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Pin: React.FC<PinProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M13.6948 2.36147C13.4306 2.26655 13.1486 2.23159 12.8692 2.25913C12.5898 2.28667 12.32 2.37602 12.0794 2.52071C11.8388 2.66539 11.6334 2.86179 11.4781 3.09566L11.4766 3.09792L9.17312 6.59363L4.33249 7.71144C4.08119 7.76694 3.84939 7.88899 3.66138 8.06484C3.47188 8.2421 3.33395 8.4674 3.26228 8.71679C3.1906 8.96618 3.18786 9.23033 3.25433 9.48116C3.32032 9.73017 3.45209 9.95681 3.63577 10.1373L6.61909 13.1211L2.46967 17.2706C2.17678 17.5634 2.17678 18.0383 2.46967 18.3312C2.76256 18.6241 3.23744 18.6241 3.53033 18.3312L7.67966 14.1819L10.665 17.1677L10.6654 17.1681C10.8474 17.3499 11.0747 17.4796 11.3238 17.5439C11.5728 17.6082 11.8346 17.6046 12.0818 17.5336C12.329 17.4627 12.5527 17.3268 12.7297 17.1402C12.9067 16.9536 13.0306 16.7231 13.0885 16.4724L13.0885 16.4723L14.2044 11.6351L17.7285 9.39994L17.729 9.39963C17.9683 9.24758 18.1704 9.04371 18.3204 8.80309C18.4704 8.56246 18.5643 8.29122 18.5954 8.00939C18.6265 7.72757 18.5938 7.44237 18.4999 7.17485C18.406 6.90734 18.2532 6.66434 18.0527 6.46381L18.0526 6.46369L14.3968 2.80795L14.3959 2.807C14.1981 2.60841 13.9586 2.45624 13.6948 2.36147ZM8.22793 12.6087L11.6507 16.032L12.812 10.998C12.8564 10.8058 12.9746 10.6389 13.1411 10.5332L16.9246 8.13355L16.9248 8.13342C16.9744 8.10188 17.0163 8.05962 17.0474 8.00974C17.0785 7.9598 17.098 7.9035 17.1045 7.84501C17.1109 7.78652 17.1041 7.72733 17.0846 7.67181C17.0651 7.61628 17.0334 7.56585 16.9918 7.52423L13.3348 3.86721L13.3334 3.8658C13.2923 3.82449 13.2425 3.79284 13.1877 3.77314C13.1328 3.75343 13.0743 3.74618 13.0163 3.7519C12.9583 3.75761 12.9023 3.77616 12.8524 3.80618C12.8028 3.83604 12.7603 3.8765 12.7282 3.92466L12.7276 3.92552L10.2605 7.66954C10.1545 7.8304 9.99071 7.9443 9.80301 7.98764L4.7697 9.14995L8.19223 12.573C8.19834 12.5788 8.20437 12.5846 8.21033 12.5906C8.21632 12.5965 8.22219 12.6026 8.22793 12.6087Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nPin.displayName = 'Pin';\nexport default Pin;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/PinFull.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface PinFullProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst PinFull: React.FC<PinFullProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M13.695 2.361a1.893 1.893 0 0 0-2.217.735l-.001.002-2.304 3.496-4.84 1.117a1.436 1.436 0 0 0-.697 2.426l2.983 2.984-4.15 4.15a.75.75 0 0 0 1.061 1.06l4.15-4.15 2.985 2.987a1.443 1.443 0 0 0 2.424-.696l1.115-4.837L17.728 9.4a1.895 1.895 0 0 0 .325-2.936l-3.656-3.656-.001-.001a1.893 1.893 0 0 0-.701-.446Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nPinFull.displayName = 'PinFull';\nexport default PinFull;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Placeholder.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface PlaceholderProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Placeholder: React.FC<PlaceholderProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M8.43952 2.15226C8.94482 2.05229 9.46668 2 10 2C10.5333 2 11.0552 2.05229 11.5605 2.15226C11.9668 2.23264 12.2311 2.62721 12.1507 3.03355C12.0703 3.43989 11.6757 3.70412 11.2694 3.62374C10.8594 3.54264 10.4351 3.5 10 3.5C9.56493 3.5 9.14057 3.54264 8.73063 3.62374C8.32429 3.70412 7.92972 3.43989 7.84933 3.03355C7.76895 2.62721 8.03319 2.23264 8.43952 2.15226ZM13.405 3.55391C13.6354 3.20971 14.1013 3.11749 14.4455 3.34792C15.3175 3.93177 16.0682 4.68246 16.6521 5.55455C16.8825 5.89874 16.7903 6.36458 16.4461 6.59501C16.1019 6.82545 15.6361 6.73322 15.4056 6.38903C14.9309 5.67987 14.3201 5.06915 13.611 4.59438C13.2668 4.36394 13.1746 3.89811 13.405 3.55391ZM6.59501 3.55391C6.82545 3.89811 6.73322 4.36394 6.38903 4.59438C5.67987 5.06915 5.06915 5.67987 4.59438 6.38903C4.36394 6.73322 3.89811 6.82545 3.55391 6.59501C3.20971 6.36458 3.11749 5.89874 3.34792 5.55455C3.93177 4.68246 4.68246 3.93177 5.55455 3.34792C5.89874 3.11749 6.36458 3.20971 6.59501 3.55391ZM3.03355 7.84933C3.43989 7.92972 3.70412 8.32429 3.62374 8.73063C3.54264 9.14057 3.5 9.56493 3.5 10C3.5 10.4351 3.54264 10.8594 3.62374 11.2694C3.70412 11.6757 3.43989 12.0703 3.03355 12.1507C2.62721 12.2311 2.23264 11.9668 2.15226 11.5605C2.05229 11.0552 2 10.5333 2 10C2 9.46668 2.05229 8.94482 2.15226 8.43952C2.23264 8.03319 2.62721 7.76895 3.03355 7.84933ZM16.9665 7.84933C17.3728 7.76895 17.7674 8.03319 17.8477 8.43952C17.9477 8.94482 18 9.46668 18 10C18 10.5333 17.9477 11.0552 17.8477 11.5605C17.7674 11.9668 17.3728 12.2311 16.9665 12.1507C16.5601 12.0703 16.2959 11.6757 16.3763 11.2694C16.4574 10.8594 16.5 10.4351 16.5 10C16.5 9.56493 16.4574 9.14057 16.3763 8.73063C16.2959 8.32429 16.5601 7.92972 16.9665 7.84933ZM3.55391 13.405C3.89811 13.1746 4.36394 13.2668 4.59438 13.611C5.06915 14.3201 5.67987 14.9309 6.38903 15.4056C6.73322 15.6361 6.82545 16.1019 6.59501 16.4461C6.36458 16.7903 5.89874 16.8825 5.55455 16.6521C4.68246 16.0682 3.93177 15.3175 3.34792 14.4455C3.11749 14.1013 3.20971 13.6354 3.55391 13.405ZM16.4461 13.405C16.7903 13.6354 16.8825 14.1013 16.6521 14.4455C16.0682 15.3175 15.3175 16.0682 14.4455 16.6521C14.1013 16.8825 13.6354 16.7903 13.405 16.4461C13.1746 16.1019 13.2668 15.6361 13.611 15.4056C14.3201 14.9309 14.9309 14.3201 15.4056 13.611C15.6361 13.2668 16.1019 13.1746 16.4461 13.405ZM7.84933 16.9665C7.92972 16.5601 8.32429 16.2959 8.73063 16.3763C9.14057 16.4574 9.56493 16.5 10 16.5C10.4351 16.5 10.8594 16.4574 11.2694 16.3763C11.6757 16.2959 12.0703 16.5601 12.1507 16.9665C12.2311 17.3728 11.9668 17.7674 11.5605 17.8477C11.0552 17.9477 10.5333 18 10 18C9.46668 18 8.94482 17.9477 8.43952 17.8477C8.03319 17.7674 7.76895 17.3728 7.84933 16.9665Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nPlaceholder.displayName = 'Placeholder';\nexport default Placeholder;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Play.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface PlayProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Play: React.FC<PlayProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M10 2C7.87827 2 5.84344 2.84285 4.34315 4.34315C2.84285 5.84344 2 7.87827 2 10C2 12.1217 2.84285 14.1566 4.34315 15.6569C5.84344 17.1571 7.87827 18 10 18C12.1217 18 14.1566 17.1571 15.6569 15.6569C17.1571 14.1566 18 12.1217 18 10C18 7.87827 17.1571 5.84344 15.6569 4.34315C14.1566 2.84285 12.1217 2 10 2ZM5.40377 5.40377C6.62276 4.18477 8.27608 3.49994 10 3.49994C11.7239 3.49994 13.3772 4.18477 14.5962 5.40377C15.8152 6.62276 16.5001 8.27608 16.5001 10C16.5001 11.7239 15.8152 13.3772 14.5962 14.5962C13.3772 15.8152 11.7239 16.5001 10 16.5001C8.27608 16.5001 6.62276 15.8152 5.40377 14.5962C4.18477 13.3772 3.49994 11.7239 3.49994 10C3.49994 8.27608 4.18477 6.62276 5.40377 5.40377ZM8.78947 12.9238L12.7368 10.4873C13.0877 10.2707 13.0877 9.72928 12.7368 9.5127L8.78947 7.07622C8.4386 6.85965 8 7.13037 8 7.56352L8 12.4365C8 12.8696 8.4386 13.1404 8.78947 12.9238Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nPlay.displayName = 'Play';\nexport default Play;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Print.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface PrintProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Print: React.FC<PrintProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M6.41525 3.72801C6.45803 3.68523 6.51606 3.66119 6.57656 3.66119H13.4234C13.4839 3.66119 13.542 3.68523 13.5847 3.72801C13.6275 3.77079 13.6516 3.82882 13.6516 3.88932V6.07367H6.34843V3.88932C6.34843 3.82882 6.37247 3.77079 6.41525 3.72801ZM4.84843 6.07367V3.88932C4.84843 3.43099 5.0305 2.99144 5.35459 2.66735C5.67868 2.34326 6.11823 2.16119 6.57656 2.16119H13.4234C13.8818 2.16119 14.3213 2.34326 14.6454 2.66735C14.9695 2.99144 15.1516 3.43099 15.1516 3.88932V6.07367H16.3578C16.8161 6.07367 17.2557 6.25574 17.5798 6.57983C17.9039 6.90391 18.0859 7.34347 18.0859 7.80179V12.6924C18.0859 13.1507 17.9039 13.5903 17.5798 13.9144C17.2557 14.2385 16.8161 14.4205 16.3578 14.4205H14.8338V17.0888C14.8338 17.503 14.4981 17.8388 14.0838 17.8388H5.91612C5.50191 17.8388 5.16612 17.503 5.16612 17.0888V14.4205H3.64219C3.18386 14.4205 2.7443 14.2385 2.42022 13.9144C2.09613 13.5903 1.91406 13.1507 1.91406 12.6924V7.80179C1.91406 7.34347 2.09613 6.90391 2.42022 6.57983C2.74431 6.25574 3.18386 6.07367 3.64219 6.07367H4.84843ZM5.59233 7.57367H3.64219C3.58168 7.57367 3.52366 7.5977 3.48088 7.64049C3.4381 7.68327 3.41406 7.74129 3.41406 7.80179V12.6924C3.41406 12.7529 3.4381 12.8109 3.48088 12.8537C3.52366 12.8965 3.58169 12.9205 3.64219 12.9205H5.16612V10.7361C5.16612 10.3219 5.50191 9.98615 5.91612 9.98615H14.0838C14.4981 9.98615 14.8338 10.3219 14.8338 10.7361V12.9205H16.3578C16.4183 12.9205 16.4763 12.8965 16.5191 12.8537C16.5619 12.8109 16.5859 12.7529 16.5859 12.6924V7.80179C16.5859 7.74129 16.5619 7.68327 16.5191 7.64049C16.4763 7.5977 16.4183 7.57367 16.3578 7.57367H14.4077C14.4056 7.57369 14.4036 7.57369 14.4016 7.57369H5.59843C5.5964 7.57369 5.59436 7.57369 5.59233 7.57367ZM6.66612 11.4861V16.3388H13.3338V11.4861H6.66612Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nPrint.displayName = 'Print';\nexport default Print;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Prompt.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface PromptProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Prompt: React.FC<PromptProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M3.28033 2.46967C2.98744 2.17678 2.51256 2.17678 2.21967 2.46967C1.92678 2.76256 1.92678 3.23744 2.21967 3.53033L4.34291 5.65357L2.21967 7.77681C1.92678 8.06971 1.92678 8.54458 2.21967 8.83747C2.51256 9.13037 2.98744 9.13037 3.28033 8.83747L5.9339 6.1839C6.22679 5.89101 6.22679 5.41613 5.9339 5.12324L3.28033 2.46967ZM2.68881 15.5176C2.30839 15.5176 2 15.8534 2 16.2676C2 16.6818 2.30839 17.0176 2.68881 17.0176H14.0164C14.3969 17.0176 14.7052 16.6818 14.7052 16.2676C14.7052 15.8534 14.3969 15.5176 14.0164 15.5176H2.68881ZM8.0625 8.30664C8.0625 7.89243 8.40046 7.55664 8.81735 7.55664H17.2764C17.6933 7.55664 18.0312 7.89243 18.0312 8.30664C18.0312 8.72085 17.6933 9.05664 17.2764 9.05664H8.81735C8.40046 9.05664 8.0625 8.72085 8.0625 8.30664ZM2.68881 11.5371C2.30839 11.5371 2 11.8729 2 12.2871C2 12.7013 2.30839 13.0371 2.68881 13.0371H17.3112C17.6916 13.0371 18 12.7013 18 12.2871C18 11.8729 17.6916 11.5371 17.3112 11.5371H2.68881Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nPrompt.displayName = 'Prompt';\nexport default Prompt;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/PushNotification.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface PushNotificationProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst PushNotification: React.FC<PushNotificationProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M2.461 9.284c0-.378.307-.685.686-.685h13.714c.378 0 .685.307.685.685v2.743a.686.686 0 0 1-.685.686H3.147a.686.686 0 0 1-.686-.686V9.284Z\" />\n    <path d=\"M20 4a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V4Zm-1.5 12V7.5h-17V16a.5.5 0 0 0 .5.5h16a.5.5 0 0 0 .5-.5Zm0-12v2h-17V4a.5.5 0 0 1 .5-.5h16a.5.5 0 0 1 .5.5Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nPushNotification.displayName = 'PushNotification';\nexport default PushNotification;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Quote.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface QuoteProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Quote: React.FC<QuoteProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M7.87936 10.0653C7.79616 10.0657 7.71613 10.0357 7.65667 9.98179C7.5972 9.92787 7.5631 9.85438 7.56176 9.77728C7.54943 8.73646 7.82544 7.7101 8.3634 6.79636C8.4531 6.66046 8.5122 6.50914 8.53711 6.35151C8.56203 6.19388 8.55226 6.03322 8.50839 5.87918C8.46452 5.72515 8.38746 5.58094 8.28185 5.45523C8.17623 5.32953 8.04426 5.22494 7.89387 5.14777C7.74347 5.07059 7.57778 5.02242 7.40677 5.00616C7.23575 4.98991 7.06296 5.00589 6.89879 5.05317C6.73462 5.10044 6.58247 5.17802 6.45152 5.28123C6.32057 5.38444 6.21351 5.51115 6.13681 5.65372C5.3933 6.78427 5 8.08268 5 9.40664C5 10.7306 5.3933 12.029 6.13681 13.1595C6.34576 13.4367 6.62825 13.6592 6.95701 13.8057C7.28578 13.9522 7.64973 14.0177 8.01377 13.9959C8.37781 13.9741 8.72965 13.8658 9.03537 13.6813C9.34108 13.4969 9.59034 13.2426 9.75912 12.9429C9.92789 12.6432 10.0105 12.3082 9.99893 11.9703C9.98738 11.6325 9.88207 11.303 9.69315 11.0138C9.50424 10.7246 9.23809 10.4854 8.92039 10.3193C8.60269 10.1532 8.24415 10.0657 7.87936 10.0653Z\"\n      fill=\"currentColor\" />\n    <path d=\"M6.56181 9.78913L6.56183 9.78913C6.5473 8.56232 6.87296 7.35688 7.50165 6.28901L7.51468 6.26689L7.52882 6.24547C7.54153 6.22621 7.54722 6.20905 7.54938 6.19536C7.55152 6.18181 7.55085 6.16789 7.54664 6.1531C7.54236 6.13808 7.53349 6.11907 7.51621 6.09851C7.49876 6.07773 7.47288 6.05572 7.4373 6.03746C7.40161 6.01914 7.35898 6.00613 7.31213 6.00167C7.26526 5.99722 7.21846 6.00175 7.1755 6.01412C7.13259 6.02648 7.09729 6.04552 7.07052 6.06662C7.04391 6.08759 7.02725 6.10929 7.01744 6.12752L6.99655 6.16635L6.97232 6.20319C6.33361 7.17439 6 8.28248 6 9.40664C6 10.519 6.32664 11.6156 6.95227 12.5794C7.05413 12.7068 7.19373 12.8164 7.36403 12.8923C7.54426 12.9726 7.74794 13.01 7.95406 12.9977C8.16015 12.9854 8.35467 12.9241 8.51876 12.8251C8.68252 12.7263 8.80702 12.5956 8.88779 12.4522C8.96817 12.3094 9.00469 12.1557 8.99952 12.0045C8.99435 11.8533 8.94728 11.7005 8.85595 11.5607C8.7642 11.4203 8.62911 11.2955 8.45698 11.2054C8.28504 11.1155 8.08611 11.0658 7.88003 11.0653C7.87946 11.0653 7.8789 11.0653 7.87833 11.0653L7.87936 10.0653C7.79616 10.0657 7.71613 10.0357 7.65667 9.98179C7.5972 9.92787 7.5631 9.85438 7.56176 9.77728C7.54943 8.73646 7.82544 7.7101 8.3634 6.79636C8.4531 6.66046 8.5122 6.50914 8.53711 6.35151C8.56203 6.19388 8.55226 6.03322 8.50839 5.87918C8.46452 5.72515 8.38746 5.58094 8.28185 5.45523C8.17623 5.32953 8.04426 5.22494 7.89387 5.14777C7.74347 5.07059 7.57778 5.02242 7.40677 5.00616C7.23575 4.98991 7.06296 5.00589 6.89879 5.05317C6.73462 5.10044 6.58247 5.17802 6.45152 5.28123C6.32057 5.38444 6.21351 5.51115 6.13681 5.65372C5.3933 6.78427 5 8.08268 5 9.40664C5 10.7306 5.3933 12.029 6.13681 13.1595C6.34576 13.4367 6.62825 13.6592 6.95701 13.8057C7.28578 13.9522 7.64973 14.0177 8.01377 13.9959C8.37781 13.9741 8.72965 13.8658 9.03537 13.6813C9.34108 13.4969 9.59034 13.2426 9.75912 12.9429C9.92789 12.6432 10.0105 12.3082 9.99893 11.9703C9.98738 11.6325 9.88207 11.303 9.69315 11.0138C9.50424 10.7246 9.23809 10.4854 8.92039 10.3193C8.60269 10.1532 8.24415 10.0657 7.87936 10.0653\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M13.2788 10.0577C13.1958 10.0578 13.1162 10.0275 13.0571 9.97352C12.998 9.91953 12.9641 9.84614 12.9628 9.76917C12.9513 8.72643 13.2273 7.6983 13.7646 6.78252C13.851 6.64639 13.907 6.49559 13.9295 6.33903C13.952 6.18247 13.9405 6.02331 13.8956 5.87095C13.8508 5.71858 13.7735 5.5761 13.6684 5.45191C13.5632 5.32772 13.4323 5.22434 13.2834 5.14787C13.1345 5.07139 12.9707 5.02337 12.8014 5.00665C12.6322 4.98992 12.4611 5.00483 12.2982 5.05048C12.1353 5.09614 11.9839 5.17162 11.853 5.27247C11.722 5.37332 11.6141 5.4975 11.5357 5.63768C10.7929 6.77071 10.4 8.07149 10.4 9.39781C10.4 10.7241 10.7929 12.0249 11.5357 13.1579C11.7447 13.4356 12.0273 13.6585 12.3562 13.8053C12.685 13.9521 13.0491 14.0177 13.4132 13.9959C13.7774 13.9741 14.1293 13.8655 14.4351 13.6807C14.7409 13.4959 14.9902 13.2411 15.1591 12.9408C15.3279 12.6406 15.4105 12.305 15.399 11.9664C15.3874 11.6279 15.2821 11.2978 15.0931 11.0081C14.9041 10.7183 14.6379 10.4787 14.3201 10.3122C14.0023 10.1458 13.6437 10.0581 13.2788 10.0577Z\"\n      fill=\"currentColor\" />\n    <path d=\"M11.9628 9.7802L11.9628 9.7802C11.9493 8.55236 12.2746 7.34591 12.9022 6.27645L12.9109 6.2616L12.9201 6.24705C12.9322 6.22793 12.9377 6.21078 12.9397 6.1968C12.9417 6.18294 12.9408 6.16859 12.9363 6.15334C12.9318 6.13789 12.9226 6.11866 12.9052 6.09807C12.8876 6.07728 12.8617 6.05547 12.8266 6.03739C12.7913 6.01927 12.7492 6.00636 12.7031 6.0018C12.6569 5.99724 12.6107 6.00144 12.5681 6.01338C12.5255 6.02531 12.4902 6.0439 12.4631 6.06477C12.4361 6.08553 12.4189 6.10726 12.4084 6.12588L12.3913 6.15656L12.372 6.18596C11.7336 7.15978 11.4 8.27069 11.4 9.39781C11.4 10.513 11.7265 11.6123 12.3518 12.5786C12.4539 12.7064 12.5935 12.8162 12.7637 12.8921C12.9439 12.9726 13.1475 13.01 13.3534 12.9977C13.5593 12.9854 13.7538 12.9241 13.9179 12.8249C14.0817 12.7259 14.2064 12.5948 14.2874 12.4507C14.368 12.3073 14.4047 12.1527 14.3995 12.0006C14.3943 11.8483 14.347 11.6948 14.2555 11.5544C14.1635 11.4133 14.0282 11.2882 13.8561 11.1981C13.6838 11.1078 13.4844 11.058 13.278 11.0577M11.5357 13.1579C10.7929 12.0249 10.4 10.7241 10.4 9.39781C10.4 8.07149 10.7929 6.77071 11.5357 5.63768C11.6141 5.4975 11.722 5.37332 11.853 5.27247C11.9839 5.17162 12.1353 5.09614 12.2982 5.05048C12.4611 5.00483 12.6322 4.98992 12.8014 5.00665C12.9707 5.02337 13.1345 5.07139 13.2834 5.14787C13.4323 5.22434 13.5632 5.32772 13.6684 5.45191C13.7735 5.5761 13.8508 5.71858 13.8956 5.87095C13.9405 6.02331 13.952 6.18247 13.9295 6.33903C13.907 6.49559 13.851 6.64639 13.7646 6.78252C13.2273 7.6983 12.9513 8.72643 12.9628 9.76917C12.9641 9.84614 12.998 9.91953 13.0571 9.97352C13.1162 10.0275 13.1958 10.0578 13.2788 10.0577C13.6437 10.0581 14.0023 10.1458 14.3201 10.3122C14.6379 10.4787 14.9041 10.7183 15.0931 11.0081C15.2821 11.2978 15.3874 11.6279 15.399 11.9664C15.4105 12.305 15.3279 12.6406 15.1591 12.9408C14.9902 13.2411 14.7409 13.4959 14.4351 13.6807C14.1293 13.8655 13.7774 13.9741 13.4132 13.9959C13.0491 14.0177 12.685 13.9521 12.3562 13.8053C12.0273 13.6585 11.7447 13.4356 11.5357 13.1579ZM11.9628 9.7802L11.9629 9.78655ZM13.2777 11.0577C12.9555 11.0575 12.633 10.9405 12.3828 10.7119C12.1298 10.4809 11.9693 10.1505 11.9629 9.78655\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nQuote.displayName = 'Quote';\nexport default Quote;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Radio.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface RadioProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Radio: React.FC<RadioProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M10 16.5C6.41015 16.5 3.5 13.5899 3.5 10C3.5 6.41015 6.41015 3.5 10 3.5C13.5899 3.5 16.5 6.41015 16.5 10C16.5 13.5899 13.5899 16.5 10 16.5ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10ZM10 13C11.6569 13 13 11.6569 13 10C13 8.34315 11.6569 7 10 7C8.34315 7 7 8.34315 7 10C7 11.6569 8.34315 13 10 13Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nRadio.displayName = 'Radio';\nexport default Radio;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Recurring.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface RecurringProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Recurring: React.FC<RecurringProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M16.1935 2C16.6211 2 16.9677 2.34662 16.9677 2.77419V5.87097C16.9677 6.29854 16.6211 6.64516 16.1935 6.64516H13.0968C12.6692 6.64516 12.3226 6.29854 12.3226 5.87097C12.3226 5.44339 12.6692 5.09677 13.0968 5.09677H14.1931C13.3335 4.36173 12.2903 3.86108 11.1651 3.65448C9.67105 3.38016 8.12812 3.64181 6.80804 4.39335C5.48795 5.1449 4.47539 6.33813 3.94866 7.76291C3.42194 9.1877 3.41484 10.7526 3.92862 12.1821C4.4424 13.6116 5.4441 14.814 6.75732 15.5775C8.07053 16.341 9.61103 16.6166 11.1075 16.3559C12.604 16.0951 13.9605 15.3147 14.938 14.152C15.9156 12.9894 16.4516 11.519 16.4516 10C16.4516 9.57244 16.7982 9.22582 17.2258 9.22582C17.6534 9.22582 18 9.57244 18 10C18 11.8836 17.3354 13.7068 16.1232 15.1485C14.911 16.5902 13.2289 17.5579 11.3733 17.8813C9.51767 18.2046 7.60746 17.8628 5.97907 16.9161C4.35069 15.9694 3.10858 14.4784 2.47149 12.7059C1.8344 10.9333 1.8432 8.99274 2.49634 7.22601C3.14948 5.45928 4.40506 3.97967 6.04197 3.04775C7.67887 2.11584 9.59211 1.79139 11.4447 2.13155C12.9375 2.40563 14.3137 3.09704 15.4194 4.11522V2.77419C15.4194 2.34662 15.766 2 16.1935 2ZM10.7742 7.93548C10.7742 7.50791 10.4276 7.16129 10 7.16129C9.57242 7.16129 9.22581 7.50791 9.22581 7.93548V10.5161C9.22581 10.7215 9.30737 10.9184 9.45256 11.0636L11.5171 13.1281C11.8194 13.4304 12.3096 13.4304 12.612 13.1281C12.9143 12.8257 12.9143 12.3355 12.612 12.0332L10.7742 10.1954V7.93548Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nRecurring.displayName = 'Recurring';\nexport default Recurring;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/RecycleBin.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface RecycleBinProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst RecycleBin: React.FC<RecycleBinProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M8.82321 9.29205C9.19893 9.04262 9.64643 8.9241 10.0964 8.95485 10.5463 8.98559 10.9735 9.1639 11.3118 9.46212 11.3985 9.53853 11.478 9.62171 11.55 9.71062H11.1602C10.7459 9.71062 10.4102 10.0464 10.4102 10.4606 10.4102 10.8748 10.7459 11.2106 11.1602 11.2106H13.0437C13.458 11.2106 13.7937 10.8748 13.7937 10.4606V8.57703C13.7937 8.16281 13.458 7.82703 13.0437 7.82703 12.706 7.82703 12.4205 8.05024 12.3265 8.35717L12.3037 8.33693C11.7178 7.82041 10.9779 7.51159 10.1986 7.45834 9.41938 7.40508 8.64432 7.61036 7.99358 8.04236 7.34285 8.47436 6.8528 9.10895 6.59937 9.84776 6.46498 10.2396 6.67365 10.6661 7.06546 10.8005 7.45726 10.9349 7.88383 10.7263 8.01822 10.3344 8.16455 9.90787 8.44749 9.54147 8.82321 9.29205zM7.73274 14.3711C7.63861 14.6778 7.35316 14.9008 7.01562 14.9008 6.60141 14.9008 6.26562 14.565 6.26562 14.1508V12.2672C6.26562 11.853 6.60141 11.5172 7.01562 11.5172H7.34293C7.35195 11.517 7.36095 11.517 7.36992 11.5172H8.89922C9.31343 11.5172 9.64922 11.853 9.64922 12.2672 9.64922 12.6814 9.31343 13.0172 8.89922 13.0172H8.50886C8.58076 13.1062 8.66035 13.1894 8.74701 13.2658 9.08532 13.5642 9.51265 13.7426 9.96269 13.7733 10.4127 13.804 10.8603 13.6853 11.236 13.4357 11.6118 13.1861 11.8946 12.8194 12.0406 12.3926 12.1747 12.0007 12.6011 11.7917 12.993 11.9258 13.3849 12.0599 13.5939 12.4863 13.4598 12.8782 13.2069 13.6175 12.717 14.2526 12.0662 14.685 11.4154 15.1175 10.6401 15.323 9.86055 15.2698 9.08101 15.2166 8.34082 14.9076 7.75482 14.3908L7.73274 14.3711z\"\n      fill=\"currentColor\" />\n    <path d=\"M14.9882 18H5.01179C4.59336 18.0001 4.18929 17.8474 3.87555 17.5705C3.56173 17.2935 3.35989 16.9115 3.308 16.4962L2.01337 6.13464C1.98504 5.90913 2.0021 5.68249 2.06105 5.46729C2.06409 5.45557 2.0674 5.44396 2.07099 5.43246C2.13038 5.23232 2.22629 5.0428 2.35586 4.8742L4.05273 2.6695C4.21312 2.46115 4.41923 2.29242 4.65516 2.17634C4.89103 2.06029 5.15041 1.99996 5.41328 2H14.5868C14.8496 1.99996 15.109 2.06029 15.3449 2.17634C15.5808 2.29242 15.7869 2.46115 15.9473 2.6695L17.6442 4.8742C17.9197 5.23275 18.043 5.68595 17.9867 6.13464L16.692 16.4962C16.6401 16.9115 16.4383 17.2935 16.1245 17.5705C15.8107 17.8474 15.4067 18.0001 14.9882 18ZM4.79642 16.3102L3.55893 6.40601H16.4411L15.2036 16.3102C15.1971 16.3626 15.1716 16.4108 15.132 16.4458C15.0924 16.4807 15.0411 16.5 14.9882 16.5H5.01179C4.95896 16.5 4.90766 16.4807 4.86805 16.4458C4.82845 16.4108 4.80298 16.3626 4.79642 16.3102ZM15.7758 4.90601H4.22423L5.24133 3.5845C5.26158 3.5582 5.28759 3.53691 5.31737 3.52226C5.34714 3.50761 5.37989 3.49999 5.41308 3.5H14.587C14.6201 3.49999 14.6529 3.50761 14.6827 3.52226C14.7124 3.53691 14.7385 3.5582 14.7587 3.5845L15.7758 4.90601Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nRecycleBin.displayName = 'RecycleBin';\nexport default RecycleBin;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Redo.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface RedoProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Redo: React.FC<RedoProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path fill=\"currentColor\" d=\"M13.372 4.485a.73.73 0 0 1 1.03 0l3.334 3.333a.73.73 0 0 1 0 1.031l-3.333 3.333a.73.73 0 1 1-1.031-1.03l2.088-2.09H7.22a3.715 3.715 0 0 0-3.715 3.716V15a.73.73 0 0 1-1.458 0v-2.222A5.174 5.174 0 0 1 7.22 7.604h8.24l-2.088-2.088a.73.73 0 0 1 0-1.031Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nRedo.displayName = 'Redo';\nexport default Redo;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Remove.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface RemoveProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Remove: React.FC<RemoveProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M2.25 10C2.25 9.58579 2.58579 9.25 3 9.25H17C17.4142 9.25 17.75 9.58579 17.75 10C17.75 10.4142 17.4142 10.75 17 10.75H3C2.58579 10.75 2.25 10.4142 2.25 10Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nRemove.displayName = 'Remove';\nexport default Remove;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/RemoveRound.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface RemoveRoundProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst RemoveRound: React.FC<RemoveRoundProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M13 9.251a.75.75 0 0 1 0 1.5H7a.75.75 0 0 1 0-1.5h6Z\" />\n    <path d=\"M10.005 2a8.006 8.006 0 1 1-.001 16.011 8.006 8.006 0 0 1 0-16.011Zm0 1.501a6.505 6.505 0 1 0-.002 13.01 6.505 6.505 0 0 0 .002-13.01Z\" fillRule=\"evenodd\"\n      clipRule=\"evenodd\" />\n  </svg>\n);\nRemoveRound.displayName = 'RemoveRound';\nexport default RemoveRound;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Reply.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ReplyProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Reply: React.FC<ReplyProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M8.74156 3.30708C9.02181 3.42317 9.20455 3.69664 9.20455 3.99999V6.52272H9.54546C12.594 6.52272 14.4466 8.07872 15.6387 10.016C16.5643 11.52 17.124 13.3156 17.5773 14.7702C17.6877 15.1243 17.7918 15.4582 17.8933 15.7628C17.9997 16.0818 17.8807 16.4325 17.6023 16.621C17.3239 16.8095 16.9541 16.7897 16.6974 16.5726C16.2203 16.1689 15.805 15.8083 15.4334 15.4856C14.5188 14.6914 13.8684 14.1267 13.2113 13.7146C12.3664 13.1848 11.5347 12.9318 10.0909 12.9318H9.20455V15.4545C9.20455 15.7644 9.014 16.0423 8.72499 16.1541C8.43599 16.2658 8.10802 16.1883 7.89959 15.959L2.44505 9.95904C2.17575 9.66281 2.18658 9.20729 2.46967 8.92421L7.92422 3.46966C8.13871 3.25516 8.4613 3.191 8.74156 3.30708ZM4.03601 9.47919L7.70455 13.5146V12.1818C7.70455 11.7676 8.04033 11.4318 8.45455 11.4318H10.0909C11.765 11.4318 12.8843 11.739 14.0082 12.4438C14.5309 12.7716 15.0614 13.1926 15.6536 13.6945C15.3125 12.696 14.9117 11.6967 14.3613 10.8022C13.3716 9.19399 11.9515 8.02272 9.54546 8.02272H8.45455C8.04033 8.02272 7.70455 7.68693 7.70455 7.27272V5.81065L4.03601 9.47919Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nReply.displayName = 'Reply';\nexport default Reply;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/ReplyAll.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ReplyAllProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst ReplyAll: React.FC<ReplyAllProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path fill=\"currentColor\" d=\"M8.175 3.428a.75.75 0 0 1 .053 1.06L3.747 9.444l4.506 5.508a.75.75 0 0 1-1.161.95L2.177 9.894a.75.75 0 0 1 .025-.978l4.914-5.434a.75.75 0 0 1 1.06-.054Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path fill=\"currentColor\" d=\"M11.25 3.215a.75.75 0 0 1 .48.7v2.694c1.75.254 3.178 1.386 4.207 2.88 1.172 1.702 1.889 3.95 2.06 6.216a.75.75 0 0 1-1.367.479c-.651-.957-1.817-1.782-3.012-2.376a11.42 11.42 0 0 0-1.64-.667 7.722 7.722 0 0 0-.249-.073v2.382a.75.75 0 0 1-1.322.484l-5.058-5.98a.75.75 0 0 1 .018-.99l5.058-5.554a.75.75 0 0 1 .825-.195ZM6.92 9.487l3.31 3.915v-1.225a.75.75 0 0 1 .75-.75c.385 0 .905.114 1.445.282.559.175 1.204.43 1.86.756.61.303 1.25.679 1.848 1.123-.316-1.216-.804-2.338-1.431-3.248-.996-1.446-2.277-2.285-3.723-2.285a.75.75 0 0 1-.75-.75V5.853L6.92 9.487Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nReplyAll.displayName = 'ReplyAll';\nexport default ReplyAll;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Retry.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface RetryProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Retry: React.FC<RetryProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M4.64896 6.91492C6.26045 4.1854 9.67945 2.99391 12.6868 4.25113C15.9729 5.62487 17.5229 9.40197 16.149 12.6875C14.7752 15.973 10.9975 17.523 7.7114 16.1492C5.76819 15.3369 4.4318 13.6848 3.94814 11.7877C3.84582 11.3863 3.43749 11.1439 3.03611 11.2462C2.63474 11.3485 2.39231 11.7569 2.49464 12.1582C3.08965 14.4922 4.73671 16.5315 7.13284 17.5332C11.1831 19.2264 15.8394 17.3161 17.5329 13.2662C19.2264 9.21619 17.3157 4.56043 13.2654 2.86719C9.78854 1.41371 5.86517 2.61558 3.75267 5.54681L3.75 4.45782C3.74898 4.04361 3.41237 3.70865 2.99816 3.70967C2.58395 3.71068 2.24899 4.04729 2.25 4.46151L2.25788 7.67079C2.2589 8.085 2.59551 8.41996 3.00972 8.41894L6.2194 8.41107C6.63362 8.41005 6.96858 8.07344 6.96756 7.65923C6.96655 7.24502 6.62994 6.91006 6.21572 6.91107L4.64896 6.91492Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nRetry.displayName = 'Retry';\nexport default Retry;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Robot.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface RobotProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Robot: React.FC<RobotProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M11.0151 4.16666C11.0151 3.75244 10.6794 3.41666 10.2651 3.41666C9.85093 3.41666 9.51514 3.75244 9.51514 4.16666V5.57575L6.66666 5.57575C5.14787 5.57575 3.91666 6.80697 3.91666 8.32575V8.48484H3.72726C2.76077 8.48484 1.97726 9.26834 1.97726 10.2348V12.1136C1.97726 13.0801 2.76077 13.8636 3.72727 13.8636H3.91666V14.0227C3.91666 15.5415 5.14788 16.7727 6.66666 16.7727H13.3333C14.8521 16.7727 16.0833 15.5415 16.0833 14.0227V13.8636H16.2727C17.2392 13.8636 18.0227 13.0801 18.0227 12.1136V10.2348C18.0227 9.26834 17.2392 8.48484 16.2727 8.48484H16.0833V8.32575C16.0833 6.80696 14.8521 5.57575 13.3333 5.57575L11.0151 5.57575V4.16666ZM14.5833 13.1136L14.5833 13.1148V14.0227C14.5833 14.7131 14.0237 15.2727 13.3333 15.2727H6.66666C5.9763 15.2727 5.41666 14.7131 5.41666 14.0227V13.1136V9.23484V8.32575C5.41666 7.63539 5.9763 7.07575 6.66666 7.07575H13.3333C14.0237 7.07575 14.5833 7.63539 14.5833 8.32575V9.23363L14.5833 9.23484V13.1136ZM16.2727 12.3636H16.0833V9.98484H16.2727C16.4108 9.98484 16.5227 10.0968 16.5227 10.2348V12.1136C16.5227 12.2517 16.4108 12.3636 16.2727 12.3636ZM3.91666 12.3636V9.98484H3.72726C3.58919 9.98484 3.47726 10.0968 3.47726 10.2348V12.1136C3.47726 12.2517 3.58919 12.3636 3.72727 12.3636H3.91666ZM9.07575 9.98484C9.07575 9.57062 8.73996 9.23484 8.32575 9.23484C7.91154 9.23484 7.57575 9.57062 7.57575 9.98484V11.3939C7.57575 11.8081 7.91154 12.1439 8.32575 12.1439C8.73996 12.1439 9.07575 11.8081 9.07575 11.3939V9.98484ZM12.2045 9.23484C12.6187 9.23484 12.9545 9.57062 12.9545 9.98484V11.3939C12.9545 11.8081 12.6187 12.1439 12.2045 12.1439C11.7903 12.1439 11.4545 11.8081 11.4545 11.3939V9.98484C11.4545 9.57062 11.7903 9.23484 12.2045 9.23484Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nRobot.displayName = 'Robot';\nexport default Robot;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Rotate.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface RotateProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Rotate: React.FC<RotateProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M15.351 6.91473C13.7396 4.18522 10.3205 2.99372 7.3132 4.25094C4.02713 5.62468 2.47712 9.40179 3.85098 12.6873C5.22485 15.9729 9.00248 17.5228 12.2886 16.1491C14.2318 15.3367 15.5682 13.6847 16.0519 11.7875C16.1542 11.3861 16.5625 11.1437 16.9639 11.246C17.3653 11.3484 17.6077 11.7567 17.5054 12.1581C16.9103 14.492 15.2633 16.5313 12.8672 17.533C8.81688 19.2262 4.16059 17.3159 2.46709 13.266C0.773577 9.216 2.68431 4.56025 6.73464 2.86701C10.2115 1.41353 14.1348 2.6154 16.2473 5.54663L16.25 4.45764C16.251 4.04343 16.5876 3.70847 17.0018 3.70948C17.4161 3.7105 17.751 4.04711 17.75 4.46132L17.7421 7.6706C17.7411 8.08482 17.4045 8.41978 16.9903 8.41876L13.7806 8.41088C13.3664 8.40987 13.0314 8.07326 13.0324 7.65905C13.0335 7.24483 13.3701 6.90987 13.7843 6.91089L15.351 6.91473Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nRotate.displayName = 'Rotate';\nexport default Rotate;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/ScheduledEmail.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ScheduledEmailProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst ScheduledEmail: React.FC<ScheduledEmailProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M2.25 3A.75.75 0 0 1 3 2.25h14a.75.75 0 0 1 .75.75v3.735c0 .504-.55.83-1.023.656a.706.706 0 0 1-.477-.65V4.716l-4.448 3.421a2.955 2.955 0 0 1-3.604 0L3.75 4.716v7.534h4.5a.75.75 0 0 1 0 1.5H3a.75.75 0 0 1-.75-.75V3Zm2.705.75h10.09l-4.158 3.198a1.455 1.455 0 0 1-1.774 0L4.955 3.75Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M15.65 11a.65.65 0 1 0-1.3 0v2.143c0 .438.355.793.793.793h1.57a.65.65 0 1 0 0-1.3H15.65V11Z\" />\n    <path d=\"M10.3 13a4.7 4.7 0 1 1 9.4 0 4.7 4.7 0 0 1-9.4 0ZM15 9.7a3.3 3.3 0 1 0 0 6.6 3.3 3.3 0 0 0 0-6.6Z\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nScheduledEmail.displayName = 'ScheduledEmail';\nexport default ScheduledEmail;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/ScheduledSend.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ScheduledSendProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst ScheduledSend: React.FC<ScheduledSendProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M13.54 9.682a4.052 4.052 0 1 1 0 8.104 4.052 4.052 0 0 1 0-8.104Zm1.874-7.331a2.016 2.016 0 0 1 2.071.454 1.914 1.914 0 0 1 .458 2.05l-1.244 3.649-.06.13a.731.731 0 0 1-.854.316.703.703 0 0 1-.455-.893l1.24-3.645-9.719 7.926-.061 2.355.952-.48a.73.73 0 0 1 .971.303.7.7 0 0 1-.308.95l-2.036 1.031a.737.737 0 0 1-.715-.03.704.704 0 0 1-.338-.616l.092-3.524-2.87-2.807a1.916 1.916 0 0 1-.492-.807 1.88 1.88 0 0 1-.044-.922c.063-.34.217-.658.447-.92s.528-.46.862-.571l.006-.001L15.414 2.35Zm-1.873 8.83a2.552 2.552 0 1 0 0 5.105 2.552 2.552 0 0 0 0-5.104Zm0 .533a.75.75 0 0 1 .75.75v.52h.671a.75.75 0 0 1 0 1.5h-1.421a.75.75 0 0 1-.75-.75v-1.27a.75.75 0 0 1 .75-.75ZM3.777 7.636v.002a.542.542 0 0 0-.338.337l-.019.068-.002.017a.5.5 0 0 0 .141.46l2.599 2.543 8.6-7.01L3.776 7.636Z\"\n    />\n  </svg>\n);\nScheduledSend.displayName = 'ScheduledSend';\nexport default ScheduledSend;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Search.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface SearchProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Search: React.FC<SearchProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M8.65191 2.37299C6.9706 2.37299 5.35814 3.04089 4.16927 4.22976C2.9804 5.41863 2.3125 7.03108 2.3125 8.7124C2.3125 10.3937 2.9804 12.0062 4.16927 13.195C5.35814 14.3839 6.9706 15.0518 8.65191 15.0518C10.0813 15.0518 11.4609 14.5691 12.5728 13.6939L16.4086 17.5303C16.7014 17.8232 17.1763 17.8232 17.4692 17.5303C17.7621 17.2375 17.7622 16.7626 17.4693 16.4697L13.6334 12.6333C14.5086 11.5214 14.9913 10.1418 14.9913 8.7124C14.9913 7.03108 14.3234 5.41863 13.1346 4.22976C11.9457 3.04089 10.3332 2.37299 8.65191 2.37299ZM12.091 12.1172C12.9878 11.2113 13.4913 9.98783 13.4913 8.7124C13.4913 7.42891 12.9815 6.19798 12.0739 5.29042C11.1663 4.38285 9.9354 3.87299 8.65191 3.87299C7.36842 3.87299 6.1375 4.38285 5.22993 5.29042C4.32237 6.19798 3.8125 7.42891 3.8125 8.7124C3.8125 9.99589 4.32237 11.2268 5.22993 12.1344C6.1375 13.0419 7.36842 13.5518 8.65191 13.5518C9.92736 13.5518 11.1509 13.0483 12.0568 12.1514C12.0623 12.1455 12.0679 12.1397 12.0737 12.134C12.0794 12.1283 12.0851 12.1227 12.091 12.1172Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nSearch.displayName = 'Search';\nexport default Search;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Security.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface SecurityProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Security: React.FC<SecurityProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M10.4114 17.9213C10.1387 18.026 9.83594 18.026 9.56321 17.9213L8.80471 17.6324C6.88623 16.8981 5.23825 15.6095 4.07729 13.936C2.91632 12.2624 2.2967 10.2823 2.29982 8.2556V5.32902C2.29982 5.02513 2.56878 4.79266 2.87192 4.81402C4.13696 4.90315 5.40854 4.70016 6.58415 4.21787C7.72219 3.75099 8.7348 3.03693 9.54812 2.13252C9.77572 1.87943 10.1876 1.888 10.4072 2.14805C11.9378 3.96046 14.2426 4.85746 17.1405 4.77877C17.4296 4.77092 17.6748 4.99878 17.6748 5.28798V8.2556C17.6779 10.2823 17.0583 12.2624 15.8973 13.936C14.7364 15.6095 13.0884 16.8981 11.1699 17.6324L10.4114 17.9213ZM9.34094 16.2315L9.33968 16.2311C7.70085 15.6035 6.29698 14.504 5.30976 13.081C4.3225 11.6578 3.79717 9.97654 3.79982 8.25791V8.2556V6.3283C4.94762 6.28751 6.08384 6.04444 7.15347 5.60563C8.1867 5.18175 9.13368 4.5851 9.9544 3.84535C11.5851 5.36934 13.7291 6.1568 16.1748 6.26937L16.1748 8.2556L16.1748 8.25791C16.1774 9.97654 15.6521 11.6578 14.6649 13.081C13.6777 14.504 12.2739 15.6034 10.6351 16.231L10.6337 16.2315L9.98731 16.4777L9.34094 16.2315ZM12.9409 9.21234C13.1964 8.88629 13.1392 8.41487 12.8131 8.15941C12.487 7.90395 12.0156 7.96118 11.7602 8.28724L9.83812 10.7404L8.9161 10.1258C8.57146 9.89599 8.10581 9.98912 7.87604 10.3338C7.64628 10.6784 7.73941 11.1441 8.08405 11.3738L9.58405 12.3738C9.91018 12.5912 10.3487 12.5209 10.5905 12.2123L12.9409 9.21234Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nSecurity.displayName = 'Security';\nexport default Security;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Send.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface SendProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Send: React.FC<SendProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path fill=\"currentColor\" d=\"M16.238 2.302a1.96 1.96 0 0 0-1.07.049L3.588 6.21h-.002a1.96 1.96 0 0 0-.766 3.24l.002.002 2.724 2.727-.092 3.41a.75.75 0 0 0 1.096.685l2.034-1.057 1.96 1.958a1.962 1.962 0 0 0 3.246-.766l3.857-11.58a1.959 1.959 0 0 0-1.41-2.528ZM14.33 4.211 4.064 7.633a.463.463 0 0 0-.297.562.46.46 0 0 0 .117.199l2.467 2.47 7.98-6.653Zm-7.286 8.027-.057 2.119 1.39-.724a.75.75 0 0 1 .877.135l2.35 2.347a.463.463 0 0 0 .636.015.46.46 0 0 0 .126-.195l3.75-11.26-9.072 7.563Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nSend.displayName = 'Send';\nexport default Send;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Settings.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface SettingsProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Settings: React.FC<SettingsProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M9.85532 3.75C9.77634 3.75 9.6992 3.7738 9.63396 3.8183C9.56871 3.86281 9.5184 3.92594 9.48957 3.99946L8.9889 5.27515C8.92686 5.43321 8.81303 5.56554 8.66603 5.6505L7.00888 6.60821C6.86142 6.69343 6.68935 6.72593 6.52097 6.70035L5.16775 6.4948C5.16763 6.49478 5.16787 6.49482 5.16775 6.4948C5.08965 6.48312 5.00948 6.4952 4.93837 6.52957C4.86716 6.56398 4.80799 6.6191 4.76861 6.68769L4.76695 6.69058L4.303 7.49048C4.30298 7.49051 4.30301 7.49045 4.303 7.49048C4.26333 7.55894 4.2452 7.63787 4.25109 7.71676C4.25698 7.7957 4.28657 7.87101 4.336 7.93284L5.19117 9.00409C5.29725 9.13698 5.35503 9.30196 5.35503 9.472V11.3851C5.35503 11.5549 5.29743 11.7197 5.19165 11.8524L4.3368 12.9256C4.28754 12.9873 4.25775 13.0629 4.25186 13.1417C4.24599 13.2202 4.26389 13.2988 4.30324 13.3671C4.30332 13.3672 4.30315 13.3669 4.30324 13.3671L4.76781 14.1681C4.8073 14.2365 4.86652 14.2915 4.93773 14.3257C5.00893 14.36 5.08882 14.372 5.16696 14.3602L6.52097 14.1545C6.68935 14.1289 6.86142 14.1614 7.00888 14.2466L8.66602 15.2044C8.81303 15.2893 8.92686 15.4217 8.9889 15.5797L9.48947 16.8551C9.5183 16.9287 9.56871 16.9921 9.63396 17.0366C9.6992 17.0811 9.77634 17.1049 9.85532 17.1049H10.7833C10.8623 17.1049 10.9394 17.0811 11.0047 17.0366C11.0699 16.9921 11.1202 16.9289 11.1491 16.8554L11.6497 15.5797C11.7118 15.4217 11.8256 15.2893 11.9726 15.2044L13.6297 14.2466C13.7772 14.1614 13.9493 14.1289 14.1177 14.1545L15.4717 14.3602C15.5498 14.372 15.6297 14.36 15.7009 14.3257C15.7721 14.2915 15.8313 14.2365 15.8708 14.1681L15.8717 14.1666L16.3356 13.3667C16.3753 13.2982 16.3934 13.2193 16.3875 13.1404C16.3816 13.0614 16.3521 12.9861 16.3026 12.9243L15.4475 11.8531C15.3414 11.7202 15.2836 11.5552 15.2836 11.3851V9.472C15.2836 9.3025 15.341 9.138 15.4465 9.00531L16.3021 7.9289C16.3514 7.86715 16.3809 7.79198 16.3868 7.71321C16.3926 7.63461 16.3747 7.55606 16.3354 7.48778C16.3353 7.48763 16.3355 7.48793 16.3354 7.48778L15.8708 6.68679C15.8313 6.61833 15.7721 6.56339 15.7009 6.52911C15.6297 6.49484 15.5498 6.48284 15.4717 6.49468L14.1177 6.70035C13.9493 6.72593 13.7772 6.69343 13.6297 6.60821L11.9726 5.6505C11.8256 5.56554 11.7118 5.43321 11.6497 5.27515L11.1492 3.99972C11.1203 3.92619 11.0699 3.86281 11.0047 3.8183C10.9394 3.7738 10.8623 3.75 10.7833 3.75H9.85532ZM8.78875 2.5791C9.10311 2.36469 9.47479 2.25 9.85531 2.25H10.7833C11.1638 2.25 11.5355 2.36469 11.8499 2.5791C12.1642 2.79347 12.4066 3.09755 12.5455 3.45171C12.5455 3.45179 12.5454 3.45162 12.5455 3.45171L12.9502 4.48301L14.1525 5.17785L15.2467 5.01165C15.6231 4.95461 16.0083 5.01239 16.3514 5.17751C16.6942 5.34248 16.9793 5.60687 17.1695 5.93622C17.1697 5.93655 17.1699 5.93688 17.1701 5.93721L17.6338 6.73667C17.8243 7.06618 17.911 7.44546 17.8826 7.82499C17.8542 8.20443 17.7122 8.56651 17.475 8.86401C17.4749 8.86409 17.475 8.86393 17.475 8.86401L16.7836 9.73377V11.1225L17.4743 11.9877C17.7124 12.2856 17.855 12.6485 17.8834 13.0288C17.9118 13.4091 17.8246 13.7891 17.6333 14.1191L17.1701 14.9176C17.1699 14.9179 17.1698 14.9182 17.1696 14.9185C16.9793 15.2479 16.6942 15.5124 16.3514 15.6773C16.0083 15.8425 15.6234 15.9003 15.247 15.8433L14.1525 15.677L12.9502 16.3718L12.5456 17.4029C12.5455 17.403 12.5456 17.4028 12.5456 17.4029C12.4067 17.757 12.1642 18.0614 11.8499 18.2758C11.5355 18.4902 11.1638 18.6049 10.7833 18.6049H9.85531C9.47479 18.6049 9.10311 18.4902 8.78875 18.2758C8.47446 18.0614 8.23206 17.7573 8.09316 17.4032C8.09313 17.4031 8.09319 17.4032 8.09316 17.4032L7.6884 16.3718L6.48611 15.677L5.39194 15.8432C5.01548 15.9003 4.63029 15.8425 4.2872 15.6773C3.94439 15.5124 3.65926 15.2479 3.46899 14.9185C3.46884 14.9182 3.46915 14.9187 3.46899 14.9185L3.00484 14.1182C2.81438 13.7887 2.72767 13.4094 2.75603 13.0299C2.78438 12.6505 2.9264 12.2885 3.16355 11.991L3.85503 11.1229V9.73465L3.16434 8.86945C2.92621 8.57155 2.78362 8.20867 2.75525 7.82836C2.72687 7.44804 2.81405 7.06802 3.00534 6.73809L3.46867 5.93925C3.65841 5.6095 3.94312 5.34456 4.28569 5.17901C4.62882 5.01319 5.01402 4.9548 5.39088 5.01149L5.39195 5.01165L6.48611 5.17785L7.6884 4.48301L8.09306 3.45196C8.23195 3.0977 8.47439 2.79352 8.78875 2.5791ZM8.17274 8.282C8.74205 7.71269 9.51419 7.39286 10.3193 7.39286C10.9197 7.39286 11.5066 7.5709 12.0059 7.90447C12.5051 8.23804 12.8942 8.71215 13.1239 9.26685C13.3537 9.82156 13.4138 10.4319 13.2967 11.0208C13.1796 11.6097 12.8904 12.1506 12.4659 12.5751C12.0413 12.9997 11.5004 13.2888 10.9116 13.406C10.3227 13.5231 9.7123 13.463 9.1576 13.2332C8.60289 13.0034 8.12878 12.6143 7.79521 12.1151C7.46164 11.6159 7.2836 11.029 7.2836 10.4286C7.2836 9.62345 7.60343 8.8513 8.17274 8.282ZM10.3193 8.89286C9.91202 8.89286 9.5214 9.05466 9.2334 9.34266C8.9454 9.63066 8.7836 10.0213 8.7836 10.4286C8.7836 10.7323 8.87367 11.0292 9.04241 11.2818C9.21116 11.5343 9.45101 11.7312 9.73162 11.8474C10.0122 11.9636 10.321 11.994 10.6189 11.9348C10.9168 11.8755 11.1905 11.7293 11.4052 11.5145C11.62 11.2997 11.7663 11.0261 11.8255 10.7282C11.8848 10.4303 11.8544 10.1215 11.7381 9.84088C11.6219 9.56026 11.4251 9.32042 11.1725 9.15167C10.92 8.98293 10.623 8.89286 10.3193 8.89286Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nSettings.displayName = 'Settings';\nexport default Settings;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/SettingsKnobs.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface SettingsKnobsProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst SettingsKnobs: React.FC<SettingsKnobsProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M3.52274 2.2153C3.81584 2.09389 4.12998 2.0314 4.44723 2.0314C4.76449 2.0314 5.07863 2.09389 5.37173 2.2153C5.66483 2.3367 5.93115 2.51465 6.15548 2.73898C6.37982 2.96331 6.55776 3.22963 6.67917 3.52274C6.70295 3.58014 6.72446 3.63834 6.74369 3.69722H17.2186C17.6328 3.69722 17.9686 4.03301 17.9686 4.44722C17.9686 4.86144 17.6328 5.19722 17.2186 5.19722H6.7437C6.72447 5.25611 6.70295 5.31433 6.67917 5.37173C6.55776 5.66483 6.37982 5.93115 6.15548 6.15548C5.93115 6.37981 5.66483 6.55776 5.37173 6.67917C5.07863 6.80058 4.76448 6.86306 4.44723 6.86306C4.12998 6.86306 3.81584 6.80058 3.52274 6.67917C3.22963 6.55776 2.96331 6.37981 2.73898 6.15548C2.51465 5.93115 2.3367 5.66483 2.2153 5.37173C2.09389 5.07863 2.0314 4.76449 2.0314 4.44723C2.0314 4.12998 2.09389 3.81584 2.2153 3.52274C2.3367 3.22963 2.51465 2.96331 2.73898 2.73898C2.96331 2.51465 3.22963 2.3367 3.52274 2.2153ZM4.44723 3.5314C4.32697 3.5314 4.20787 3.55509 4.09676 3.60112C3.98565 3.64714 3.88469 3.7146 3.79964 3.79964C3.7146 3.88469 3.64714 3.98565 3.60112 4.09676C3.55509 4.20787 3.5314 4.32697 3.5314 4.44723C3.5314 4.5675 3.55509 4.68659 3.60112 4.79771C3.64714 4.90882 3.7146 5.00978 3.79964 5.09482C3.88469 5.17987 3.98565 5.24733 4.09676 5.29335C4.20787 5.33938 4.32696 5.36306 4.44723 5.36306C4.5675 5.36306 4.68659 5.33938 4.79771 5.29335C4.90882 5.24733 5.00978 5.17987 5.09482 5.09482C5.17987 5.00978 5.24733 4.90882 5.29335 4.79771C5.33938 4.68659 5.36307 4.5675 5.36306 4.44723C5.36307 4.32697 5.33938 4.20787 5.29335 4.09676C5.24733 3.98565 5.17987 3.88469 5.09482 3.79964C5.00978 3.7146 4.90882 3.64714 4.79771 3.60112C4.68659 3.55509 4.5675 3.5314 4.44723 3.5314ZM10 7.58417C9.68275 7.58417 9.3686 7.64666 9.0755 7.76806C8.7824 7.88947 8.51608 8.06742 8.29175 8.29175C8.06742 8.51608 7.88947 8.7824 7.76806 9.0755C7.74428 9.13291 7.72277 9.19112 7.70354 9.25001H2.7814C2.36719 9.25001 2.0314 9.58579 2.0314 10C2.0314 10.4142 2.36719 10.75 2.7814 10.75H7.70354C7.72277 10.8089 7.74429 10.8671 7.76806 10.9245C7.88947 11.2176 8.06742 11.4839 8.29175 11.7083C8.51608 11.9326 8.7824 12.1105 9.0755 12.2319C9.3686 12.3533 9.68275 12.4158 10 12.4158C10.3173 12.4158 10.6314 12.3533 10.9245 12.2319C11.2176 12.1105 11.4839 11.9326 11.7083 11.7083C11.9326 11.4839 12.1105 11.2176 12.2319 10.9245C12.2557 10.8671 12.2772 10.8089 12.2965 10.75H17.2186C17.6328 10.75 17.9686 10.4142 17.9686 10C17.9686 9.58579 17.6328 9.25001 17.2186 9.25001H12.2965C12.2772 9.19112 12.2557 9.13291 12.2319 9.0755C12.1105 8.7824 11.9326 8.51608 11.7083 8.29175C11.4839 8.06742 11.2176 7.88947 10.9245 7.76806C10.6314 7.64666 10.3173 7.58417 10 7.58417ZM10.9158 9.99874C10.9157 9.8789 10.892 9.76025 10.8461 9.64953C10.8001 9.53841 10.7326 9.43745 10.6476 9.35241C10.5625 9.26737 10.4616 9.19991 10.3505 9.15388C10.2394 9.10786 10.1203 9.08417 10 9.08417C9.87973 9.08417 9.76064 9.10786 9.64953 9.15388C9.53841 9.19991 9.43745 9.26737 9.35241 9.35241C9.26737 9.43745 9.19991 9.53841 9.15388 9.64953C9.1081 9.76006 9.08442 9.87848 9.08417 9.99811L9.08417 10L9.08417 10.0019C9.08442 10.1215 9.1081 10.2399 9.15388 10.3505C9.19991 10.4616 9.26737 10.5625 9.35241 10.6476C9.43745 10.7326 9.53841 10.8001 9.64953 10.8461C9.76064 10.8921 9.87973 10.9158 10 10.9158C10.1203 10.9158 10.2394 10.8921 10.3505 10.8461C10.4616 10.8001 10.5625 10.7326 10.6476 10.6476C10.7326 10.5625 10.8001 10.4616 10.8461 10.3505C10.8921 10.2394 10.9158 10.1203 10.9158 10L10.9158 9.99874ZM13.8445 13.8445C14.2976 13.3915 14.9121 13.137 15.5528 13.137C16.1935 13.137 16.808 13.3915 17.261 13.8445C17.7141 14.2976 17.9686 14.9121 17.9686 15.5528C17.9686 16.1935 17.7141 16.808 17.261 17.261C16.808 17.7141 16.1935 17.9686 15.5528 17.9686C14.9121 17.9686 14.2976 17.7141 13.8445 17.261C13.5733 16.9898 13.3732 16.6607 13.2563 16.3028H2.7814C2.36719 16.3028 2.0314 15.967 2.0314 15.5528C2.0314 15.1386 2.36719 14.8028 2.7814 14.8028H13.2563C13.3732 14.4448 13.5733 14.1158 13.8445 13.8445ZM15.5528 14.637C15.3099 14.637 15.0769 14.7334 14.9052 14.9052C14.7334 15.0769 14.637 15.3099 14.637 15.5528C14.637 15.7957 14.7334 16.0286 14.9052 16.2004C15.0769 16.3721 15.3099 16.4686 15.5528 16.4686C15.7957 16.4686 16.0286 16.3721 16.2004 16.2004C16.3721 16.0286 16.4686 15.7957 16.4686 15.5528C16.4686 15.3099 16.3721 15.0769 16.2004 14.9052C16.0286 14.7334 15.7957 14.637 15.5528 14.637Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nSettingsKnobs.displayName = 'SettingsKnobs';\nexport default SettingsKnobs;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Share.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ShareProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Share: React.FC<ShareProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M14.4492 1.96875C13.5303 1.96875 12.6503 2.33703 12.0024 2.99045C11.3549 3.64365 10.9922 4.52822 10.9922 5.44922C10.9922 5.82872 11.0538 6.20203 11.1715 6.55553L7.93392 8.51488C7.91376 8.49348 7.8933 8.47231 7.87255 8.45138C7.22474 7.79796 6.34474 7.42969 5.42578 7.42969C4.50682 7.42969 3.62682 7.79796 2.97901 8.45138C2.33142 9.10459 1.96875 9.98915 1.96875 10.9102C1.96875 11.8312 2.33142 12.7157 2.97901 13.3689C3.62682 14.0223 4.50682 14.3906 5.42578 14.3906C6.34474 14.3906 7.22474 14.0223 7.87255 13.3689C8.02518 13.215 8.16198 13.0482 8.28193 12.8711L11.0384 13.9836C11.0078 14.1699 10.9922 14.3596 10.9922 14.5508C10.9922 15.4718 11.3549 16.3564 12.0024 17.0096C12.6503 17.663 13.5303 18.0312 14.4492 18.0312C15.3682 18.0312 16.2482 17.663 16.896 17.0096C17.5436 16.3564 17.9062 15.4718 17.9062 14.5508C17.9062 13.6298 17.5436 12.7452 16.896 12.092C16.2482 11.4386 15.3682 11.0703 14.4492 11.0703C13.5303 11.0703 12.6503 11.4386 12.0024 12.092C11.8498 12.246 11.713 12.4128 11.5931 12.5899L8.8366 11.4774C8.86718 11.291 8.88281 11.1014 8.88281 10.9102C8.88281 10.5302 8.8211 10.1565 8.70313 9.80267L11.9402 7.84359C11.9607 7.8653 11.9814 7.88677 12.0024 7.90799C12.6503 8.56141 13.5303 8.92969 14.4492 8.92969C15.3682 8.92969 16.2482 8.56141 16.896 7.90799C17.5436 7.25479 17.9062 6.37022 17.9062 5.44922C17.9062 4.52822 17.5436 3.64365 16.896 2.99045C16.2482 2.33703 15.3682 1.96875 14.4492 1.96875ZM7.25663 11.6098C7.33922 11.3885 7.38281 11.1517 7.38281 10.9102C7.38281 10.5769 7.29985 10.2528 7.14598 9.96578C7.12923 9.94394 7.11351 9.92096 7.09893 9.89687C7.08236 9.8695 7.06776 9.8415 7.05507 9.81302C6.98326 9.70381 6.90042 9.60136 6.80733 9.50746C6.43981 9.13676 5.94272 8.92969 5.42578 8.92969C4.90884 8.92969 4.41175 9.13676 4.04423 9.50746C3.67649 9.87839 3.46875 10.3828 3.46875 10.9102C3.46875 11.4375 3.67649 11.9419 4.04423 12.3128C4.41175 12.6836 4.90884 12.8906 5.42578 12.8906C5.94272 12.8906 6.43981 12.6836 6.80733 12.3128C6.98733 12.1313 7.12899 11.9177 7.22673 11.6852C7.2315 11.671 7.23672 11.6568 7.2424 11.6428C7.24691 11.6316 7.25166 11.6206 7.25663 11.6098ZM12.6184 13.8509C12.6234 13.8402 12.6281 13.8293 12.6326 13.8182C12.6382 13.8042 12.6434 13.7901 12.6482 13.776C12.7459 13.5433 12.8876 13.3297 13.0677 13.1481C13.4352 12.7774 13.9323 12.5703 14.4492 12.5703C14.9662 12.5703 15.4632 12.7774 15.8308 13.1481C16.1985 13.519 16.4062 14.0235 16.4062 14.5508C16.4062 15.0781 16.1985 15.5826 15.8308 15.9535C15.4632 16.3242 14.9662 16.5312 14.4492 16.5312C13.9323 16.5312 13.4352 16.3242 13.0677 15.9535C12.6999 15.5826 12.4922 15.0781 12.4922 14.5508C12.4922 14.3091 12.5358 14.0723 12.6184 13.8509ZM12.7736 6.46257C12.7877 6.48583 12.8004 6.50954 12.8116 6.53361C12.8853 6.6476 12.971 6.75437 13.0677 6.85191C13.4352 7.22262 13.9323 7.42969 14.4492 7.42969C14.9662 7.42969 15.4632 7.22262 15.8308 6.85191C16.1985 6.48099 16.4062 5.97655 16.4062 5.44922C16.4062 4.92189 16.1985 4.41745 15.8308 4.04653C15.4632 3.67582 14.9662 3.46875 14.4492 3.46875C13.9323 3.46875 13.4352 3.67582 13.0677 4.04653C12.6999 4.41745 12.4922 4.92189 12.4922 5.44922C12.4922 5.78705 12.5775 6.11549 12.7354 6.40544C12.7489 6.42372 12.7616 6.44277 12.7736 6.46257Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nShare.displayName = 'Share';\nexport default Share;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/ShortText.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ShortTextProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst ShortText: React.FC<ShortTextProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M2.75 5.5C2.33579 5.5 2 5.83579 2 6.25C2 6.66421 2.33579 7 2.75 7H17.25C17.6642 7 18 6.66421 18 6.25C18 5.83579 17.6642 5.5 17.25 5.5H2.75ZM2.75 9.5C2.33579 9.5 2 9.83579 2 10.25C2 10.6642 2.33579 11 2.75 11H9.5C9.91421 11 10.25 10.6642 10.25 10.25C10.25 9.83579 9.91421 9.5 9.5 9.5H2.75ZM13.9502 11H12.75V12.25C12.75 12.6642 12.4142 13 12 13C11.5858 13 11.25 12.6642 11.25 12.25V10.25C11.25 9.83579 11.5858 9.5 12 9.5H17.3C17.7142 9.5 18.05 9.83579 18.05 10.25V12.25C18.05 12.6642 17.7142 13 17.3 13C16.8858 13 16.55 12.6642 16.55 12.25V11H15.4502V15.25H16.2002C16.6144 15.25 16.9502 15.5858 16.9502 16C16.9502 16.4142 16.6144 16.75 16.2002 16.75H13.2002C12.786 16.75 12.4502 16.4142 12.4502 16C12.4502 15.5858 12.786 15.25 13.2002 15.25H13.9502V11Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nShortText.displayName = 'ShortText';\nexport default ShortText;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Show.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ShowProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Show: React.FC<ShowProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M14.1176 5.83908C12.8643 5.05635 11.4319 4.50553 9.97041 4.52918C8.50891 4.50553 7.07654 5.05635 5.82346 5.83911C4.56124 6.62759 3.42984 7.68258 2.55885 8.74485L2.55885 8.74485L2.55686 8.74729C2.36883 8.97859 2.03906 9.43301 2.03906 9.99895C2.03906 10.5649 2.36883 11.0193 2.55686 11.2506L2.55686 11.2506L2.55871 11.2529C3.41048 12.2923 4.53011 13.3478 5.7911 14.1425C7.04329 14.9316 8.48556 15.4948 9.97041 15.4708C11.4553 15.4948 12.8977 14.9317 14.1501 14.1426C15.4114 13.3479 16.5315 12.2925 17.3838 11.2531L17.3859 11.2506L17.4054 11.2267L17.4054 11.2267C17.4846 11.1295 17.6104 10.9754 17.7138 10.8049C17.8251 10.6213 17.9609 10.3405 17.9609 9.99895C17.9609 9.65745 17.8251 9.37655 17.7138 9.19303C17.6104 9.02248 17.4847 8.86839 17.4054 8.77123L17.4054 8.77121L17.3859 8.74729L17.3859 8.74728L17.3836 8.74452C16.5118 7.68243 15.38 6.62751 14.1176 5.83908ZM3.57017 9.91628C3.60219 9.85199 3.65278 9.77726 3.71983 9.69465C4.50341 8.73925 5.51496 7.80043 6.61815 7.1113C7.72696 6.41866 8.87788 6.009 9.9564 6.02916C9.96574 6.02933 9.97509 6.02933 9.98443 6.02916C11.0629 6.009 12.2139 6.41865 13.323 7.11133C14.4264 7.80049 15.4385 8.73937 16.2231 9.69493L16.2231 9.69495C16.3193 9.81326 16.3838 9.89256 16.4313 9.97088C16.4378 9.98162 16.4431 9.99096 16.4474 9.99895C16.4431 10.0069 16.4378 10.0163 16.4313 10.027C16.3838 10.1053 16.3193 10.1846 16.2231 10.303L16.2231 10.303L16.223 10.3031C15.4555 11.2388 14.4534 12.1786 13.3505 12.8734C12.2423 13.5717 11.0831 13.9913 9.9844 13.9708C9.97508 13.9707 9.96575 13.9707 9.95643 13.9708C8.85777 13.9913 7.69873 13.5717 6.59085 12.8735C5.4883 12.1787 4.48674 11.2389 3.71991 10.3033C3.65281 10.2207 3.6022 10.1459 3.57017 10.0816C3.54522 10.0315 3.54023 10.0051 3.53927 9.99895C3.54023 9.99278 3.54522 9.96639 3.57017 9.91628ZM10.8071 10C10.8071 10.4422 10.4476 10.804 9.99998 10.804C9.55237 10.804 9.1929 10.4422 9.1929 10C9.1929 9.55783 9.55237 9.19599 9.99998 9.19599C10.4476 9.19599 10.8071 9.55783 10.8071 10ZM12.3071 10C12.3071 11.2725 11.2741 12.304 9.99998 12.304C8.72582 12.304 7.6929 11.2725 7.6929 10C7.6929 8.72753 8.72582 7.69599 9.99998 7.69599C11.2741 7.69599 12.3071 8.72753 12.3071 10Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nShow.displayName = 'Show';\nexport default Show;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Shredder.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ShredderProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Shredder: React.FC<ShredderProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M10.8985 7.48036C11.1203 7.70216 11.4211 7.82676 11.7348 7.82676L14.879 7.82676L14.879 11.6944C14.879 12.1086 15.2148 12.4444 15.629 12.4444C16.0432 12.4444 16.379 12.1086 16.379 11.6944L16.379 7.07699C16.379 6.95189 16.3477 6.83002 16.2896 6.7218C16.2555 6.65831 16.2118 6.59911 16.1592 6.54643L11.8324 2.21969C11.6842 2.07145 11.4843 1.99501 11.2825 2.00025L5.24483 2.00025C4.81641 2.00025 4.40554 2.17044 4.1026 2.47338C3.79967 2.77631 3.62948 3.18718 3.62948 3.6156L3.62948 11.6944C3.62948 12.1086 3.96527 12.4444 4.37948 12.4444C4.79369 12.4444 5.12948 12.1086 5.12948 11.6944L5.12948 3.6156C5.12948 3.58501 5.14163 3.55567 5.16326 3.53404C5.1849 3.5124 5.21424 3.50025 5.24483 3.50025L10.5521 3.50025V6.64409C10.5521 6.95775 10.6767 7.25857 10.8985 7.48036ZM13.8181 6.32676L12.0521 4.56075V6.32676H13.8181ZM2.75 13.031C2.33579 13.031 2 13.3668 2 13.781C2 14.1952 2.33579 14.531 2.75 14.531H4.03709L4.03709 17.2593C4.03709 17.6735 4.37288 18.0093 4.78709 18.0093C5.2013 18.0093 5.53709 17.6735 5.53709 17.2593L5.53709 14.531H7.51538V16.365C7.51538 16.7792 7.85117 17.115 8.26538 17.115C8.6796 17.115 9.01538 16.7792 9.01538 16.365V14.531H10.9937V17.2593C10.9937 17.6735 11.3295 18.0093 11.7437 18.0093C12.1579 18.0093 12.4937 17.6735 12.4937 17.2593V14.531H14.472V16.365C14.472 16.7792 14.8078 17.115 15.222 17.115C15.6362 17.115 15.972 16.7792 15.972 16.365V14.531H17.2594C17.6737 14.531 18.0094 14.1952 18.0094 13.781C18.0094 13.3668 17.6737 13.031 17.2594 13.031L2.75 13.031Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nShredder.displayName = 'Shredder';\nexport default Shredder;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Shuffle.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ShuffleProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Shuffle: React.FC<ShuffleProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M15.7803 3.46967C15.4874 3.17678 15.0126 3.17678 14.7197 3.46967C14.4268 3.76256 14.4268 4.23744 14.7197 4.53033L15.4393 5.25H12C11.7639 5.25 11.5416 5.36115 11.4 5.55L9 8.75L6.6 5.55C6.45836 5.36115 6.23607 5.25 6 5.25H2.75C2.33579 5.25 2 5.58579 2 6C2 6.41421 2.33579 6.75 2.75 6.75H5.625L8.0625 10L5.625 13.25H2.75C2.33579 13.25 2 13.5858 2 14C2 14.4142 2.33579 14.75 2.75 14.75H6C6.23607 14.75 6.45836 14.6389 6.6 14.45L9 11.25L11.4 14.45C11.5416 14.6389 11.7639 14.75 12 14.75H15.4393L14.7197 15.4697C14.4268 15.7626 14.4268 16.2374 14.7197 16.5303C15.0126 16.8232 15.4874 16.8232 15.7803 16.5303L17.7803 14.5303C18.0732 14.2374 18.0732 13.7626 17.7803 13.4697L15.7803 11.4697C15.4874 11.1768 15.0126 11.1768 14.7197 11.4697C14.4268 11.7626 14.4268 12.2374 14.7197 12.5303L15.4393 13.25H12.375L9.9375 10L12.375 6.75H15.4393L14.7197 7.46967C14.4268 7.76256 14.4268 8.23744 14.7197 8.53033C15.0126 8.82322 15.4874 8.82322 15.7803 8.53033L17.7803 6.53033C18.0732 6.23744 18.0732 5.76256 17.7803 5.46967L15.7803 3.46967Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nShuffle.displayName = 'Shuffle';\nexport default Shuffle;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Signature.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface SignatureProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Signature: React.FC<SignatureProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M14.746 2.25c-.446 0-.874.177-1.19.493l-2.31 2.31a.732.732 0 0 0-.035.035L7.285 9.015a.747.747 0 0 0-.219.494 2.15 2.15 0 0 0-.77.495c-.27.27-.423.649-.518.945a7.055 7.055 0 0 0-.227.99 12.434 12.434 0 0 0-.134 1.195.75.75 0 0 0 .79.79l.103-.007.262-.022c.216-.02.512-.053.83-.105a7.05 7.05 0 0 0 .99-.227c.296-.095.675-.248.944-.518.22-.22.389-.484.495-.77a.747.747 0 0 0 .495-.22l3.96-3.96a.772.772 0 0 0 .023-.024l1.758-1.757.13.13a.184.184 0 0 1 0 .26l-2.97 2.97a.75.75 0 0 0 1.06 1.06l2.97-2.97a1.684 1.684 0 0 0 0-2.38l-.254-.256a1.682 1.682 0 0 0-.406-1.725l-.66-.66a1.684 1.684 0 0 0-1.19-.493Zm-5.41 7.754.035.036.425.425 2.9-2.9-.92-.92-2.9 2.9.425.425.035.034Zm-1.52.87a.65.65 0 0 1 .44.172l.039.039a.65.65 0 0 1-.02.9l.002-.002a.538.538 0 0 1-.08.048 1.849 1.849 0 0 1-.263.103 5.589 5.589 0 0 1-.926.199l.023-.153c.045-.277.104-.55.175-.774.036-.111.071-.199.104-.263a.485.485 0 0 1 .047-.079l-.001.001a.65.65 0 0 1 .46-.19Zm5.94-4.37 1.78-1.78a.184.184 0 0 0 0-.26l-.66-.66a.184.184 0 0 0-.26 0l-1.78 1.78.92.92Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M4.4 13.452a2.15 2.15 0 0 0 0 4.3h9.802a.75.75 0 0 0 0-1.5H4.4a.65.65 0 0 1 0-1.3h.465a.75.75 0 1 0 0-1.5H4.4Z\" />\n  </svg>\n);\nSignature.displayName = 'Signature';\nexport default Signature;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Sort.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface SortProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Sort: React.FC<SortProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M7.13869 2.75741C7.34727 2.75741 7.53593 2.84277 7.67174 2.98049L10.0716 5.38342C10.3641 5.67631 10.3641 6.15118 10.0716 6.44408 9.7791 6.73697 9.30483 6.73697 9.0123 6.44408L7.88775 5.3181V17.0578C7.88775 17.472 7.55238 17.8078 7.13869 17.8078 6.725 17.8078 6.38964 17.472 6.38964 17.0578V5.31805L5.26504 6.44408C4.97252 6.73697 4.49824 6.73697 4.20572 6.44408 3.9132 6.15118 3.9132 5.67631 4.20572 5.38342L6.60901 2.97708C6.62359 2.96249 6.63871 2.94855 6.65432 2.9353 6.78492 2.82434 6.954 2.75741 7.13869 2.75741zM14.4434 17.8075C14.652 17.8075 14.8406 17.7222 14.9764 17.5844L17.3763 15.1815C17.6688 14.8886 17.6688 14.4138 17.3763 14.1209 17.0838 13.828 16.6095 13.828 16.317 14.1209L15.1924 15.2468V3.50712C15.1924 3.09291 14.8571 2.75712 14.4434 2.75712 14.0297 2.75712 13.6943 3.09291 13.6943 3.50712V15.2469L12.5697 14.1209C12.2772 13.828 11.8029 13.828 11.5104 14.1209 11.2179 14.4138 11.2179 14.8886 11.5104 15.1815L13.9137 17.5879C13.9283 17.6025 13.9434 17.6164 13.959 17.6296 14.0896 17.7406 14.2587 17.8075 14.4434 17.8075z\"\n      fill=\"currentColor\" />\n  </svg>\n);\nSort.displayName = 'Sort';\nexport default Sort;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/SortAscending.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface SortAscendingProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst SortAscending: React.FC<SortAscendingProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M10 2.47494C10.2086 2.47494 10.3973 2.5603 10.5331 2.69802L12.933 5.10095C13.2255 5.39384 13.2255 5.86871 12.933 6.16161C12.6404 6.4545 12.1662 6.4545 11.8736 6.16161L10.7491 5.03562V16.7753C10.7491 17.1896 10.4137 17.5253 10 17.5253C9.58633 17.5253 9.25097 17.1896 9.25097 16.7753V5.03558L8.12637 6.16161C7.83384 6.4545 7.35957 6.4545 7.06705 6.16161C6.77453 5.86871 6.77453 5.39384 7.06705 5.10095L9.47034 2.69461C9.48492 2.68001 9.50004 2.66608 9.51565 2.65283C9.64625 2.54187 9.81533 2.47494 10 2.47494Z\"\n      fill=\"currentColor\" />\n  </svg>\n);\nSortAscending.displayName = 'SortAscending';\nexport default SortAscending;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/SortDescending.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface SortDescendingProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst SortDescending: React.FC<SortDescendingProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M10 17.5251C10.2086 17.5251 10.3973 17.4397 10.5331 17.302L12.933 14.8991C13.2255 14.6062 13.2255 14.1313 12.933 13.8384C12.6404 13.5455 12.1662 13.5455 11.8736 13.8384L10.7491 14.9644L10.7491 3.22465C10.7491 2.81044 10.4137 2.47465 10 2.47465C9.58633 2.47465 9.25097 2.81044 9.25097 3.22465L9.25097 14.9644L8.12637 13.8384C7.83384 13.5455 7.35957 13.5455 7.06705 13.8384C6.77453 14.1313 6.77453 14.6062 7.06705 14.8991L9.47034 17.3054C9.48492 17.32 9.50004 17.3339 9.51565 17.3472C9.64625 17.4581 9.81533 17.5251 10 17.5251Z\"\n      fill=\"currentColor\" />\n  </svg>\n);\nSortDescending.displayName = 'SortDescending';\nexport default SortDescending;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Sound.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface SoundProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Sound: React.FC<SoundProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path fill=\"currentColor\" d=\"M12.8 3.451c.33.15.61.4.81.71h.01c.19.3.3.66.3 1.03v9.64c0 .36-.1.72-.3 1.03-.2.3-.48.55-.81.71-.33.16-.7.22-1.06.19a2.05 2.05 0 0 1-.98-.36l-5.26-3.24H3.24c-.52 0-1.02-.2-1.4-.56-.37-.37-.59-.86-.59-1.39v-2.4c0-.53.21-1.03.59-1.39.38-.36.88-.56 1.4-.56H5.5l5.26-3.24c.29-.21.63-.33.98-.36.37-.04.73.03 1.06.19Zm-9.56 8.19h1.73v-3.3H3.24c-.14 0-.27.05-.36.14-.08.09-.13.2-.13.31v2.4c0 .11.04.22.13.31s.22.14.36.14Zm9.1 3.38a.39.39 0 0 0 .07-.23h-.01v-9.6c0-.08-.03-.16-.07-.23a.45.45 0 0 0-.19-.17c-.08-.05-.17-.05-.27-.05-.1.01-.19.05-.26.1-.02.01-.05.03-.05.03l-5.1 3.14v3.96l5.1 3.14.025.015a.22.22 0 0 0 .025.015c.08.06.16.1.26.1.09.01.19-.01.27-.05.09-.04.16-.1.2-.17Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path fill=\"currentColor\" d=\"M17.34 7.381c.44.33.8.75 1.04 1.24v-.02c.24.49.37 1.02.37 1.57s-.13 1.08-.37 1.57c-.25.49-.6.91-1.04 1.24a.749.749 0 1 1-.91-1.19c.25-.19.46-.44.6-.72.14-.28.21-.58.21-.89 0-.31-.07-.61-.21-.89-.14-.28-.34-.53-.6-.72a.749.749 0 1 1 .91-1.19Z\"\n    />\n  </svg>\n);\nSound.displayName = 'Sound';\nexport default Sound;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Status.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface StatusProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Status: React.FC<StatusProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M1.99609 2.77185C1.99609 2.34422 2.34275 1.99756 2.77038 1.99756H17.2238C17.6514 1.99756 17.998 2.34422 17.998 2.77185V17.2252C17.998 17.6529 17.6514 17.9995 17.2238 17.9995H2.77038C2.34275 17.9995 1.99609 17.6529 1.99609 17.2252V2.77185ZM3.54467 3.54613V6.81511V8.36369V11.6332V13.1817V16.4509H16.4495V13.1817V11.6332V8.36369V6.81511V3.54613H3.54467Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M3.54467 6.81511H16.4495V8.36369H3.54467V6.81511zM3.54467 11.6332H16.4495V13.1817H3.54467V11.6332z\" fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\"\n    />\n  </svg>\n);\nStatus.displayName = 'Status';\nexport default Status;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/StrikethroughS.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface StrikethroughSProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst StrikethroughS: React.FC<StrikethroughSProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path fill=\"currentColor\" d=\"M9.12 1.973c1.646-.1 3.427.394 4.647 1.005a.75.75 0 1 1-.671 1.34C12.059 3.8 10.54 3.39 9.209 3.47c-.658.04-1.228.197-1.668.477-.426.272-.767.68-.957 1.31a2.08 2.08 0 0 0 .42 1.955A12.783 12.783 0 0 0 9.73 8.817h7.701a.75.75 0 0 1 0 1.5H2.574a.75.75 0 0 1 0-1.5h4.084a14.277 14.277 0 0 1-.63-.463.75.75 0 0 1-.092-.085 3.58 3.58 0 0 1-.789-3.444v-.001c.294-.97.857-1.676 1.588-2.142.716-.456 1.554-.66 2.384-.71Zm3.911 9.231a.75.75 0 0 1 1.058.08 3.869 3.869 0 0 1-.625 5.62 6.537 6.537 0 0 1-6.936.282l-.004-.002-1.021-.592a.75.75 0 1 1 .753-1.298l1.018.591a5.035 5.035 0 0 0 5.327-.207 2.369 2.369 0 0 0 .35-3.417.75.75 0 0 1 .08-1.057Z\"\n    />\n  </svg>\n);\nStrikethroughS.displayName = 'StrikethroughS';\nexport default StrikethroughS;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/StrikethroughT.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface StrikethroughTProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst StrikethroughT: React.FC<StrikethroughTProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <g fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n      <path d=\"M10 1.82143C10.4142 1.82143 10.75 2.15721 10.75 2.57143V7.71428C10.75 8.1285 10.4142 8.46428 10 8.46428 9.58579 8.46428 9.25 8.1285 9.25 7.71428V2.57143C9.25 2.15721 9.58579 1.82143 10 1.82143zM6.39286 17.4286C6.39286 17.0143 6.72865 16.6786 7.14286 16.6786H12.8571C13.2714 16.6786 13.6071 17.0143 13.6071 17.4286 13.6071 17.8428 13.2714 18.1786 12.8571 18.1786H7.14286C6.72865 18.1786 6.39286 17.8428 6.39286 17.4286z\"\n      />\n      <path d=\"M4.85714 3.32143C4.75295 3.32143 4.65303 3.36282 4.57935 3.43649 4.50568 3.51017 4.46429 3.61009 4.46429 3.71428V5.42857C4.46429 5.84278 4.1285 6.17857 3.71429 6.17857 3.30007 6.17857 2.96429 5.84278 2.96429 5.42857V3.71428C2.96429 3.21227 3.16371 2.73081 3.51869 2.37583 3.87367 2.02085 4.35513 1.82143 4.85714 1.82143H15.1429C15.6449 1.82143 16.1263 2.02085 16.4813 2.37583 16.8363 2.73081 17.0357 3.21227 17.0357 3.71428V5.42857C17.0357 5.84278 16.6999 6.17857 16.2857 6.17857 15.8715 6.17857 15.5357 5.84278 15.5357 5.42857V3.71428C15.5357 3.61009 15.4943 3.51017 15.4207 3.43649 15.347 3.36282 15.2471 3.32143 15.1429 3.32143H4.85714zM2.96429 10.5714C2.96429 10.1572 3.30007 9.82143 3.71429 9.82143H16.2857C16.6999 9.82143 17.0357 10.1572 17.0357 10.5714 17.0357 10.9856 16.6999 11.3214 16.2857 11.3214H3.71429C3.30007 11.3214 2.96429 10.9856 2.96429 10.5714zM10 12.6786C10.4142 12.6786 10.75 13.0144 10.75 13.4286V17.4286C10.75 17.8428 10.4142 18.1786 10 18.1786 9.58579 18.1786 9.25 17.8428 9.25 17.4286V13.4286C9.25 13.0144 9.58579 12.6786 10 12.6786z\"\n      />\n    </g>\n  </svg>\n);\nStrikethroughT.displayName = 'StrikethroughT';\nexport default StrikethroughT;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Subitems.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface SubitemsProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Subitems: React.FC<SubitemsProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M6.75 13.2c0 .028.022.05.05.05H8v-1.61a.64.64 0 0 1 .51-.627L8.64 11h7.72l.13.013a.64.64 0 0 1 .51.627v4.72l-.013.13a.641.641 0 0 1-.498.497L16.36 17H8.64l-.13-.013a.641.641 0 0 1-.497-.498L8 16.36v-1.61H6.8a1.55 1.55 0 0 1-1.55-1.55V9H3.64l-.13-.013a.641.641 0 0 1-.497-.498L3 8.36V3.64a.64.64 0 0 1 .51-.627L3.64 3h7.72l.13.013a.64.64 0 0 1 .51.627v4.72l-.013.13a.641.641 0 0 1-.498.497L11.36 9H6.75v4.2Zm2.75 2.3h6v-3h-6v3Zm-5-8h6v-3h-6v3Z\"\n    />\n  </svg>\n);\nSubitems.displayName = 'Subitems';\nexport default Subitems;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Sun.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface SunProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Sun: React.FC<SunProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M10 2.25C10.4142 2.25 10.75 2.58579 10.75 3V5C10.75 5.41421 10.4142 5.75 10 5.75C9.58579 5.75 9.25 5.41421 9.25 5V3C9.25 2.58579 9.58579 2.25 10 2.25ZM7.34835 7.34835C8.05161 6.64509 9.00544 6.25 10 6.25C10.9946 6.25 11.9484 6.64509 12.6517 7.34835C13.3549 8.05161 13.75 9.00544 13.75 10C13.75 10.9946 13.3549 11.9484 12.6517 12.6517C11.9484 13.3549 10.9946 13.75 10 13.75C9.00544 13.75 8.05161 13.3549 7.34835 12.6517C6.64509 11.9484 6.25 10.9946 6.25 10C6.25 9.00544 6.64509 8.05161 7.34835 7.34835ZM10 7.75C9.40326 7.75 8.83097 7.98705 8.40901 8.40901C7.98705 8.83097 7.75 9.40326 7.75 10C7.75 10.5967 7.98705 11.169 8.40901 11.591C8.83097 12.0129 9.40326 12.25 10 12.25C10.5967 12.25 11.169 12.0129 11.591 11.591C12.0129 11.169 12.25 10.5967 12.25 10C12.25 9.40326 12.0129 8.83097 11.591 8.40901C11.169 7.98705 10.5967 7.75 10 7.75ZM10.75 15C10.75 14.5858 10.4142 14.25 10 14.25C9.58579 14.25 9.25 14.5858 9.25 15V17C9.25 17.4142 9.58579 17.75 10 17.75C10.4142 17.75 10.75 17.4142 10.75 17V15ZM14.25 10C14.25 9.58579 14.5858 9.25 15 9.25H17C17.4142 9.25 17.75 9.58579 17.75 10C17.75 10.4142 17.4142 10.75 17 10.75H15C14.5858 10.75 14.25 10.4142 14.25 10ZM3 9.25C2.58579 9.25 2.25 9.58579 2.25 10C2.25 10.4142 2.58579 10.75 3 10.75H5C5.41421 10.75 5.75 10.4142 5.75 10C5.75 9.58579 5.41421 9.25 5 9.25H3ZM15.4797 4.52033C15.7726 4.81322 15.7726 5.2881 15.4797 5.58099L14.0657 6.99499C13.7728 7.28788 13.2979 7.28788 13.005 6.99499C12.7121 6.7021 12.7121 6.22722 13.005 5.93433L14.419 4.52033C14.7119 4.22744 15.1868 4.22744 15.4797 4.52033ZM6.99432 14.0663C7.28721 13.7734 7.28721 13.2986 6.99432 13.0057C6.70142 12.7128 6.22655 12.7128 5.93366 13.0057L4.51966 14.4197C4.22676 14.7126 4.22676 15.1874 4.51966 15.4803C4.81255 15.7732 5.28742 15.7732 5.58032 15.4803L6.99432 14.0663ZM13.005 13.0057C13.2979 12.7128 13.7728 12.7128 14.0657 13.0057L15.4797 14.4197C15.7726 14.7126 15.7726 15.1874 15.4797 15.4803C15.1868 15.7732 14.7119 15.7732 14.419 15.4803L13.005 14.0663C12.7121 13.7734 12.7121 13.2986 13.005 13.0057ZM5.58032 4.52033C5.28742 4.22744 4.81255 4.22744 4.51966 4.52033C4.22676 4.81322 4.22676 5.2881 4.51966 5.58099L5.93366 6.99499C6.22655 7.28788 6.70142 7.28788 6.99432 6.99499C7.28721 6.7021 7.28721 6.22722 6.99432 5.93433L5.58032 4.52033Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nSun.displayName = 'Sun';\nexport default Sun;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Switch.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface SwitchProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Switch: React.FC<SwitchProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M5.44542 4.42902C5.73759 4.13541 5.73643 3.66054 5.44282 3.36836C5.1492 3.07619 4.67433 3.07736 4.38216 3.37097L2.17374 5.59026C1.88157 5.88387 1.88273 6.35874 2.17634 6.65091L4.39591 8.85961C4.68952 9.15179 5.16439 9.15062 5.45657 8.85701C5.74874 8.5634 5.74758 8.08853 5.45396 7.79635L4.50297 6.85001H17.1999C17.6141 6.85001 17.9499 6.51422 17.9499 6.10001C17.9499 5.6858 17.6141 5.35001 17.1999 5.35001H4.52894L5.44542 4.42902ZM15.3708 14.5833L14.4543 15.5043C14.1621 15.7979 14.1633 16.2728 14.4569 16.565C14.7505 16.8572 15.2254 16.856 15.5176 16.5624L17.726 14.3431C18.0182 14.0495 18.017 13.5746 17.7234 13.2824L15.5038 11.0737C15.2102 10.7816 14.7353 10.7827 14.4432 11.0763C14.151 11.37 14.1522 11.8448 14.4458 12.137L15.3968 13.0833L2.69995 13.0833C2.28574 13.0833 1.94995 13.4191 1.94995 13.8333C1.94995 14.2476 2.28574 14.5833 2.69995 14.5833L15.3708 14.5833Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nSwitch.displayName = 'Switch';\nexport default Switch;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Switcher.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface SwitcherProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Switcher: React.FC<SwitcherProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <g clipPath=\"url(#a)\">\n      <path d=\"M4.5 2.25a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm7.75 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm7.75 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0ZM4.5 10A2.25 2.25 0 1 1 0 10a2.25 2.25 0 0 1 4.5 0Zm7.75 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0ZM20 10a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0ZM4.5 17.75a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm7.75 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm7.75 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"a\">\n        <path d=\"M0 0h20v20H0z\" />\n      </clipPath>\n    </defs>\n  </svg>\n);\nSwitcher.displayName = 'Switcher';\nexport default Switcher;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Table.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface TableProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Table: React.FC<TableProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M13 4.5H10.5V7H13V4.5ZM14.5 4.5V7H16.5V5C16.5 4.72386 16.2761 4.5 16 4.5H14.5ZM13 8.5H10.5L10.5 11H13L13 8.5ZM14.5 11L14.5 8.5H16.5V11H14.5ZM13 12.5H10.5V15.5H13V12.5ZM14.5 15.5V12.5H16.5V15C16.5 15.2761 16.2761 15.5 16 15.5H14.5ZM4 4.5H9V7H3.5V5C3.5 4.72386 3.72386 4.5 4 4.5ZM3.5 8.5H9L9 11H3.5V8.5ZM3.5 12.5H9V15.5H4C3.72386 15.5 3.5 15.2761 3.5 15V12.5ZM4 3C2.89543 3 2 3.89543 2 5V15C2 16.1046 2.89543 17 4 17H16C17.1046 17 18 16.1046 18 15V5C18 3.89543 17.1046 3 16 3H4Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nTable.displayName = 'Table';\nexport default Table;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Tags.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface TagsProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Tags: React.FC<TagsProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M9.21715 3.12863C9.28812 2.72054 9.01483 2.33219 8.60675 2.26121C8.19866 2.19024 7.8103 2.46353 7.73933 2.87162L7.15932 6.20667H3C2.58579 6.20667 2.25 6.54245 2.25 6.95667C2.25 7.37088 2.58579 7.70667 3 7.70667H6.89845L6.10073 12.2936H3C2.58579 12.2936 2.25 12.6294 2.25 13.0436C2.25 13.4578 2.58579 13.7936 3 13.7936H5.83986L5.30455 16.8716C5.23358 17.2797 5.50686 17.6681 5.91495 17.739C6.32304 17.81 6.71139 17.5367 6.78237 17.1286L7.36237 13.7936H10.7964L10.2611 16.8719C10.1901 17.2799 10.4634 17.6683 10.8715 17.7393C11.2796 17.8102 11.6679 17.537 11.7389 17.1289L12.319 13.7936H17C17.4142 13.7936 17.75 13.4578 17.75 13.0436C17.75 12.6294 17.4142 12.2936 17 12.2936H12.5798L13.3776 7.70667H17C17.4142 7.70667 17.75 7.37088 17.75 6.95667C17.75 6.54245 17.4142 6.20667 17 6.20667H13.6384L14.1737 3.12887C14.2447 2.72078 13.9714 2.33243 13.5633 2.26146C13.1552 2.19048 12.7668 2.46377 12.6959 2.87186L12.1159 6.20667H8.68184L9.21715 3.12863ZM8.42097 7.70667L7.62324 12.2936H11.0573L11.855 7.70667H8.42097Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nTags.displayName = 'Tags';\nexport default Tags;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Team.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface TeamProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Team: React.FC<TeamProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path fill=\"currentColor\" d=\"M12.47 3.5c-.14 0-.28.02-.42.05-.4.09-.81-.16-.9-.56-.09-.4.16-.81.56-.9a3.33 3.33 0 0 1 3.12.88 3.33 3.33 0 0 1 0 4.7c-.62.62-1.47.97-2.35.97-.24 0-.48-.02-.71-.07a.745.745 0 0 1-.58-.89.75.75 0 0 1 .89-.58c.13.03.26.04.39.04.49 0 .95-.19 1.29-.53.34-.34.53-.8.53-1.29s-.19-.95-.53-1.29c-.34-.34-.81-.53-1.29-.53Zm1.28 5.49a5.93 5.93 0 0 1 3.32 2.07v-.01c.84 1.05 1.3 2.35 1.3 3.69v1.71c0 .41-.34.75-.75.75h-2.29c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h1.54v-.96c0-1-.34-1.97-.97-2.75a4.367 4.367 0 0 0-2.47-1.54.75.75 0 0 1-.57-.89c.08-.4.49-.66.89-.57Z\"\n    />\n    <path fill=\"currentColor\" d=\"M7.895 8.86a5.897 5.897 0 0 0-4.165 1.73A5.88 5.88 0 0 0 2 14.76v1.71c0 .41.34.75.75.75h10.29c.41 0 .75-.34.75-.75v-1.71c0-1.56-.62-3.06-1.73-4.17a5.88 5.88 0 0 0-4.165-1.73ZM3.51 15.72v-.96a4.406 4.406 0 0 1 4.4-4.4c1.17 0 2.28.46 3.11 1.29.83.83 1.29 1.94 1.29 3.11v.96h-8.8Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path fill=\"currentColor\" d=\"M7.895 8.86H7.89h.01-.005Z\" />\n    <path fill=\"currentColor\" d=\"M6.63 8.39a3.298 3.298 0 0 1-1.8-1.8c-.16-.4-.25-.83-.25-1.27 0-.44.08-.87.25-1.27a3.298 3.298 0 0 1 1.8-1.8c.4-.16.83-.25 1.27-.25.44 0 .87.08 1.27.25a3.298 3.298 0 0 1 1.8 1.8c.16.4.25.83.25 1.27 0 .44-.08.87-.25 1.27a3.298 3.298 0 0 1-1.8 1.8c-.4.16-.83.25-1.27.25-.44 0-.87-.08-1.27-.25Zm-.02-4.36c-.16.17-.3.37-.39.59-.09.22-.14.46-.14.7 0 .24.05.48.14.7.09.22.22.43.39.59.17.16.37.3.59.39.22.09.46.14.7.14.24 0 .48-.05.7-.14.22-.09.43-.22.59-.39.16-.17.3-.37.39-.59.09-.22.14-.46.14-.7 0-.24-.05-.48-.14-.7-.09-.22-.22-.43-.39-.59-.17-.16-.37-.3-.59-.39a1.86 1.86 0 0 0-.7-.14c-.24 0-.48.05-.7.14-.22.09-.43.22-.59.39Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nTeam.displayName = 'Team';\nexport default Team;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Text.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface TextProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Text: React.FC<TextProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M11.9016 12.6511H8.09212L7.23653 15H6L9.47229 6H10.5215L14 15H12.7697L11.9016 12.6511ZM8.45433 11.6745H11.5457L9.99688 7.46497L8.45433 11.6745Z\" fill=\"currentColor\"\n    />\n  </svg>\n);\nText.displayName = 'Text';\nexport default Text;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/TextBig.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface TextBigProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst TextBig: React.FC<TextBigProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M13.9499 16H13.95L12.7112 12.6374H12.7112L13.9499 16ZM5 16L9.5201 4H9.52007L4.99998 16H5ZM6.40768 16.5L7.63819 13.1374H12.3626L13.6013 16.5H15.7226L10.8258 3.5H9.17412L4.27734 16.5H6.40768ZM9.99589 5.2363L12.3913 11.772H12.3913L9.9959 5.23626L9.99589 5.2363ZM11.6755 11.272H8.31625L9.99587 6.68922L11.6755 11.272Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nTextBig.displayName = 'TextBig';\nexport default TextBig;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/TextColorIndicator.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface TextColorIndicatorProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst TextColorIndicator: React.FC<TextColorIndicatorProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M9.99989 6.26241L14.1665 15.2527C14.3565 15.6627 14.8428 15.841 15.2528 15.651C15.6627 15.461 15.8411 14.9746 15.6511 14.5647L11.2438 5.055L11.2432 5.05381C11.1305 4.80948 10.9475 4.61133 10.7268 4.47639C10.5062 4.34153 10.2536 4.27279 9.99989 4.27279C9.74616 4.27279 9.49354 4.34153 9.27298 4.47639C9.05229 4.61133 8.8693 4.80948 8.75654 5.0538L8.75599 5.055L4.34871 14.5647C4.15871 14.9746 4.33703 15.461 4.74699 15.651C5.15695 15.841 5.64332 15.6627 5.83331 15.2527L9.99989 6.26241Z\"\n    />\n    <path d=\"M9.13082 4.24377C9.39525 4.08208 9.69729 4.00012 10 4.00012C10.3027 4.00012 10.6047 4.08208 10.8692 4.24377C11.1337 4.40553 11.3545 4.64392 11.4909 4.9395M11.4909 4.9395L15.8986 14.45C16.1519 14.9967 15.9142 15.6451 15.3676 15.8985C14.821 16.1518 14.1725 15.914 13.9191 15.3674L10 6.91102L6.08086 15.3674C5.82753 15.914 5.17904 16.1518 4.63243 15.8985C4.08581 15.6451 3.84806 14.9967 4.10139 14.45L8.50839 4.94097L8.50903 4.93957C8.64546 4.64396 8.86624 4.40554 9.13082 4.24377M10 4.54555C9.79525 4.54555 9.59205 4.60106 9.41535 4.7091C9.23855 4.81721 9.09336 4.97508 9.00427 5.16813L9.00381 5.16913L4.59626 14.6794C4.46959 14.9527 4.58847 15.2769 4.86178 15.4036C5.13508 15.5303 5.45933 15.4114 5.58599 15.1381L9.75257 6.14778C9.79723 6.05141 9.89378 5.98974 10 5.98974C10.1062 5.98974 10.2028 6.05141 10.2474 6.14778L14.414 15.1381C14.5407 15.4114 14.8649 15.5303 15.1382 15.4036C15.4115 15.2769 15.5304 14.9527 15.4037 14.6794L10.9965 5.16972L10.9958 5.16821C10.9067 4.97516 10.7614 4.81721 10.5847 4.7091C10.4079 4.60106 10.2047 4.54555 10 4.54555ZM9.64284 5.49179C9.7795 5.42846 9.94162 5.4879 10.0049 5.62455L10.0057 5.62617C10.069 5.76282 10.0096 5.92494 9.87293 5.98828C9.73627 6.05161 9.57415 5.99216 9.51082 5.85551L9.51007 5.85389C9.44674 5.71724 9.50619 5.55512 9.64284 5.49179Z\"\n    />\n    <path d=\"M5.9089 11.6362C5.9089 11.1843 6.2752 10.818 6.72705 10.818H13.2722C13.7241 10.818 14.0904 11.1843 14.0904 11.6362C14.0904 12.088 13.7241 12.4543 13.2722 12.4543H6.72705C6.2752 12.4543 5.9089 12.088 5.9089 11.6362Z\"\n    />\n    <path d=\"M5.63623 11.6361C5.63623 11.0336 6.12463 10.5453 6.72709 10.5453H13.2723C13.8747 10.5453 14.3631 11.0336 14.3631 11.6361C14.3631 12.2386 13.8747 12.727 13.2723 12.727H6.72709C6.12463 12.727 5.63623 12.2386 5.63623 11.6361ZM6.72709 11.0907C6.42586 11.0907 6.18166 11.3349 6.18166 11.6361C6.18166 11.9373 6.42586 12.1815 6.72709 12.1815H13.2723C13.5735 12.1815 13.8177 11.9373 13.8177 11.6361C13.8177 11.3349 13.5735 11.0907 13.2723 11.0907H6.72709Z\"\n    />\n  </svg>\n);\nTextColorIndicator.displayName = 'TextColorIndicator';\nexport default TextColorIndicator;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/TextCopy.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface TextCopyProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst TextCopy: React.FC<TextCopyProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M4.75 5C4.75 4.86193 4.86193 4.75 5 4.75H9.24961V15.2498H7.5C7.08579 15.2498 6.75 15.5856 6.75 15.9998C6.75 16.414 7.08579 16.7498 7.5 16.7498H9.98232L9.99961 16.75L10.0169 16.7498H12.5C12.9142 16.7498 13.25 16.414 13.25 15.9998C13.25 15.5856 12.9142 15.2498 12.5 15.2498H10.7496V4.75H15C15.1381 4.75 15.25 4.86193 15.25 5V6C15.25 6.41421 15.5858 6.75 16 6.75C16.4142 6.75 16.75 6.41421 16.75 6V5C16.75 4.0335 15.9665 3.25 15 3.25H5C4.0335 3.25 3.25 4.0335 3.25 5V6C3.25 6.41421 3.58579 6.75 4 6.75C4.41421 6.75 4.75 6.41421 4.75 6V5Z\"\n      fill=\"currentColor\" />\n  </svg>\n);\nTextCopy.displayName = 'TextCopy';\nexport default TextCopy;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/TextFormatting.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface TextFormattingProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst TextFormatting: React.FC<TextFormattingProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"m10.242 11.422.01.032 1.062 3.317a.75.75 0 1 1-1.429.457l-.9-2.811h-4.77l-.9 2.812a.75.75 0 0 1-1.429-.458l1.062-3.317a.745.745 0 0 1 .01-.032l1.875-5.86A1.865 1.865 0 0 1 6.6 4.25c.82 0 1.522.545 1.767 1.312l1.875 5.86Zm-5.548-.505L6.26 6.019a.366.366 0 0 1 .339-.27c.135 0 .282.093.338.27l1.568 4.898H4.694Zm8.56-.642c0-.9.758-1.629 1.696-1.629.937 0 1.696.729 1.696 1.629v.22a3.326 3.326 0 0 1-1.824.552h-.318c-1.385 0-2.704.957-2.704 2.352 0 1.394 1.32 2.351 2.704 2.351v-.698.698h.043a3.154 3.154 0 0 0 .376-.032c.236-.03.561-.092.919-.216.256-.088.533-.21.808-.379a.717.717 0 0 0 .723.626c.401 0 .727-.313.727-.698v-4.776c0-1.671-1.41-3.025-3.15-3.025s-3.15 1.354-3.15 3.025c0 .385.325.698.727.698.401 0 .727-.313.727-.698Zm3.392 2.837v-1.03a4.818 4.818 0 0 1-1.824.361h-.318c-.784 0-1.25.513-1.25.956 0 .442.464.953 1.246.955h.005c.007 0 .021 0 .041-.002a3.196 3.196 0 0 0 .803-.163c.476-.165.989-.475 1.297-1.077Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nTextFormatting.displayName = 'TextFormatting';\nexport default TextFormatting;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/TextHuge.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface TextHugeProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst TextHuge: React.FC<TextHugeProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M11.1975 2.75H8.79337L3.646 17.25H6.55779L7.62406 13.9904H12.3584L13.4337 17.25H16.3543L11.1975 2.75ZM11.5524 11.5288H8.42957L9.99099 6.77265L11.5524 11.5288Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nTextHuge.displayName = 'TextHuge';\nexport default TextHuge;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/TextMedium.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface TextMediumProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst TextMedium: React.FC<TextMediumProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M11.9681 12.2787L12.9635 15H14.3743L14.3743 15H12.9636L11.9681 12.2786H7.59965L7.59964 12.2787H11.9681ZM9.18232 4.57293L5.20056 15H6.61846L6.61845 15H5.20049L9.18226 4.57293H9.18232ZM6.69205 15.1048L7.67317 12.3834H11.8948L12.8903 15.1048H14.5266L10.4575 4.46817H9.11012L5.04834 15.1048H6.69205ZM11.5599 11.1471L9.78385 6.27029L9.78389 6.27017L11.5599 11.1471H11.5599ZM11.4102 11.0424H8.16438L9.78402 6.5769L11.4102 11.0424Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nTextMedium.displayName = 'TextMedium';\nexport default TextMedium;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/TextSmall.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface TextSmallProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst TextSmall: React.FC<TextSmallProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M11.426 12.173H8.57L7.927 14H7l2.604-7h.787L13 14h-.923l-.65-1.827Zm-2.585-.76h2.318L9.998 8.14 8.84 11.414Z\" />\n  </svg>\n);\nTextSmall.displayName = 'TextSmall';\nexport default TextSmall;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Textcolor.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface TextcolorProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Textcolor: React.FC<TextcolorProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M18 17C18 17.5523 17.5523 18 17 18H3C2.44772 18 2 17.5523 2 17 2 16.4477 2.44772 16 3 16H17C17.5523 16 18 16.4477 18 17zM10.0001 4.04099L12.166 8.71436 12.9439 10.3929 14.2743 13.2634C14.4692 13.684 14.9681 13.8669 15.3886 13.672 15.8092 13.4771 15.9921 12.9782 15.7972 12.5576L11.2761 2.80241 11.2756 2.80119C11.1599 2.55055 10.9722 2.34728 10.7458 2.20886 10.5195 2.07051 10.2604 2 10.0001 2 9.73982 2 9.48068 2.07051 9.25442 2.20886 9.02803 2.34728 8.84032 2.55054 8.72465 2.80118L8.72408 2.80241 4.203 12.5576C4.0081 12.9782 4.19102 13.4771 4.61157 13.672 5.03212 13.8669 5.53104 13.684 5.72594 13.2634L7.0563 10.3929 7.83422 8.71436 10.0001 4.04099z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n    <path d=\"M7.83422 8.71436C9.52588 8.71436 10.4743 8.71436 12.166 8.71436L12.9439 10.3929H7.0563L7.83422 8.71436Z\" fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\"\n    />\n  </svg>\n);\nTextcolor.displayName = 'Textcolor';\nexport default Textcolor;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/ThumbsDown.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ThumbsDownProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst ThumbsDown: React.FC<ThumbsDownProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M12.19 10.213c.158-.125.32-.227.469-.274V6.106c0-.536-.172-1.019-.47-1.378a1.763 1.763 0 0 0-1.385-.642H5.55a.803.803 0 0 0-.56.228.696.696 0 0 0-.185.478c0 .147.041.293.125.396a.63.63 0 0 1-.414.98.708.708 0 0 0-.58.687c0 .146.04.292.146.417a.61.61 0 0 1-.208.937c-.248.125-.393.355-.372.625 0 .292.164.542.434.646a.582.582 0 0 1 .394.5.64.64 0 0 1-.27.584.732.732 0 0 0-.31.646c.04.333.394.623.745.623H7.35c.246 0 .495.126.66.314a.902.902 0 0 1 .207.708l-.186 1.458c-.042.271-.02.5.02.687a1.958 1.958 0 0 0 .578.992 1.919 1.919 0 0 0 1.306.508c.041 0 .082-.02.103-.042a.156.156 0 0 0 .041-.102v-1.71c0-.937.27-1.854.766-2.645l.724-1.167a4.07 4.07 0 0 1 .62-.62Zm.513 1.64c.36.395.878.643 1.455.643h1.874A1.968 1.968 0 0 0 18 10.527V3.968A1.968 1.968 0 0 0 16.032 2h-1.874c-.737 0-1.38.405-1.717 1.005a3.276 3.276 0 0 0-1.637-.42H5.55c-.59 0-1.183.232-1.62.668l-.004.004a2.195 2.195 0 0 0-.6 1.838 2.193 2.193 0 0 0-.82 2.316 2.083 2.083 0 0 0-.503 1.484 2.2 2.2 0 0 0 .466 1.301 2.19 2.19 0 0 0-.214 1.137l.003.028.003.028a2.19 2.19 0 0 0 .785 1.41 2.28 2.28 0 0 0 1.449.535h2.15l-.098.771a3.34 3.34 0 0 0 .041 1.219l.002.01.003.011A3.43 3.43 0 0 0 9.936 18c.468 0 .885-.2 1.167-.485.273-.274.477-.685.477-1.16v-1.708c0-.65.187-1.292.537-1.85l.586-.944Zm.986-1.326c0 .259.21.469.469.469h1.874c.259 0 .468-.21.468-.469V3.968a.468.468 0 0 0-.468-.468h-1.874a.469.469 0 0 0-.469.468v6.559Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nThumbsDown.displayName = 'ThumbsDown';\nexport default ThumbsDown;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/ThumbsUp.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ThumbsUpProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst ThumbsUp: React.FC<ThumbsUpProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M7.81081 9.78682C7.65275 9.91185 7.48976 10.0139 7.34144 10.0613V13.8937C7.34144 14.4296 7.51291 14.9129 7.81081 15.2725C8.13909 15.6686 8.6209 15.9144 9.19595 15.9144H14.4498C14.6563 15.9144 14.864 15.8312 15.0097 15.6857C15.1336 15.5609 15.1956 15.3737 15.1956 15.2085C15.1956 15.0606 15.1543 14.915 15.0705 14.8122C14.9466 14.625 14.9259 14.4159 15.0097 14.2068C15.0923 14 15.2782 13.874 15.4847 13.8313C15.8163 13.7701 16.0641 13.4777 16.0641 13.145C16.0641 12.9994 16.024 12.8527 15.9184 12.7279C15.7945 12.5823 15.7544 12.3952 15.7945 12.208C15.8358 12.0197 15.9609 11.8729 16.1261 11.7909C16.3739 11.6661 16.5197 11.4362 16.4979 11.1659C16.4979 10.8735 16.3338 10.624 16.0641 10.52C15.8358 10.4357 15.6912 10.2485 15.6706 10.0197C15.6499 9.79097 15.7544 9.56221 15.9402 9.43627C16.1468 9.2907 16.2707 9.03998 16.25 8.79042C16.2099 8.45652 15.8565 8.16653 15.5054 8.16653H12.6496C12.4029 8.16653 12.1539 8.04059 11.9887 7.85342C11.8234 7.6443 11.7408 7.39474 11.7821 7.14518L11.968 5.68711C12.0105 5.4156 11.9887 5.18684 11.9474 4.99967C11.8604 4.63132 11.6743 4.30724 11.4199 4.05547C11.4037 4.03943 11.3873 4.02368 11.3705 4.00823C11.2043 3.855 11.0117 3.73137 10.8003 3.64442C10.5734 3.55106 10.3249 3.5 10.0645 3.5C10.0232 3.5 9.9819 3.5208 9.96125 3.54159C9.9406 3.56239 9.91994 3.60283 9.91994 3.64442V5.35321C9.91994 6.29137 9.65031 7.20757 9.15464 7.999L8.43065 9.16592C8.28202 9.35146 8.05216 9.59593 7.81081 9.78682ZM7.29743 8.14722C6.93743 7.75231 6.41882 7.5045 5.84234 7.5045H3.96847C2.88131 7.5045 2 8.38582 2 9.47297V16.0315C2 17.1187 2.88131 18 3.96847 18H5.84234C6.5794 18 7.22185 17.5949 7.55919 16.9952C8.02476 17.2599 8.57465 17.4144 9.19595 17.4144H14.4498C15.0398 17.4144 15.6331 17.1832 16.0699 16.7468L16.074 16.7426C16.5266 16.287 16.6956 15.6934 16.6956 15.2085C16.6956 15.1133 16.6894 15.0112 16.6751 14.9051C17.2135 14.504 17.5641 13.8647 17.5641 13.145C17.5641 12.9702 17.5436 12.7814 17.4936 12.5887C17.8252 12.2015 18.0284 11.69 17.997 11.1055C17.9843 10.6295 17.8207 10.1726 17.5315 9.80373C17.6975 9.46075 17.7784 9.07098 17.7449 8.66671L17.7426 8.63896L17.7393 8.61131C17.6637 7.9828 17.316 7.50175 16.9539 7.20034C16.5888 6.89646 16.0821 6.66653 15.5054 6.66653H13.3553L13.4537 5.89493C13.5246 5.41968 13.4855 5.00879 13.4121 4.67642L13.4097 4.66566L13.4072 4.65494C13.0448 3.12005 11.6882 2 10.0645 2C9.59591 2 9.17905 2.20052 8.89692 2.48462C8.62401 2.75943 8.41994 3.17033 8.41994 3.64442V5.35321C8.41994 6.00355 8.23291 6.64473 7.88339 7.20282L7.29743 8.14722ZM17.0607 11.7556C17.0616 11.7568 17.0626 11.758 17.0636 11.7591L17.0607 11.7556ZM6.31081 9.47297C6.31081 9.21424 6.10107 9.0045 5.84234 9.0045H3.96847C3.70974 9.0045 3.5 9.21424 3.5 9.47297V16.0315C3.5 16.2903 3.70974 16.5 3.96847 16.5H5.84234C6.10107 16.5 6.31081 16.2903 6.31081 16.0315V9.47297Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nThumbsUp.displayName = 'ThumbsUp';\nexport default ThumbsUp;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Time.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface TimeProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Time: React.FC<TimeProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M9.95001 1.95C7.82828 1.95 5.79345 2.79285 4.29316 4.29314C2.79287 5.79343 1.95001 7.82827 1.95001 9.95C1.95001 12.0717 2.79287 14.1066 4.29316 15.6069C5.79345 17.1071 7.82828 17.95 9.95001 17.95C12.0717 17.95 14.1066 17.1071 15.6069 15.6069C17.1072 14.1066 17.95 12.0717 17.95 9.95C17.95 7.82827 17.1072 5.79343 15.6069 4.29314C14.1066 2.79285 12.0717 1.95 9.95001 1.95ZM5.35382 5.3538C6.5728 4.13482 8.22611 3.45 9.95001 3.45C11.6739 3.45 13.3272 4.13482 14.5462 5.3538C15.7652 6.57279 16.45 8.22609 16.45 9.95C16.45 11.6739 15.7652 13.3272 14.5462 14.5462C13.3272 15.7652 11.6739 16.45 9.95001 16.45C8.22611 16.45 6.5728 15.7652 5.35382 14.5462C4.13483 13.3272 3.45001 11.6739 3.45001 9.95C3.45001 8.22609 4.13483 6.57279 5.35382 5.3538ZM11.1834 6.56667C11.1834 6.15245 10.8476 5.81667 10.4334 5.81667C10.0192 5.81667 9.68338 6.15245 9.68338 6.56667V10.4333C9.68338 10.8475 10.0192 11.1833 10.4334 11.1833H13.3334C13.7476 11.1833 14.0834 10.8475 14.0834 10.4333C14.0834 10.0191 13.7476 9.68333 13.3334 9.68333H11.1834V6.56667Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nTime.displayName = 'Time';\nexport default Time;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Timeline.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface TimelineProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Timeline: React.FC<TimelineProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path fill=\"currentColor\" d=\"M3.93 5a.75.75 0 0 1 .75-.75H13a.75.75 0 0 1 0 1.5H4.68A.75.75 0 0 1 3.93 5Zm3.82 5.214a.75.75 0 0 1 .75-.75h7.822a.75.75 0 0 1 0 1.5H8.5a.75.75 0 0 1-.75-.75ZM4.251 15.43a.75.75 0 0 1 .75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1-.75-.75Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nTimeline.displayName = 'Timeline';\nexport default Timeline;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Translation.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface TranslationProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Translation: React.FC<TranslationProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M7.23521 5.24354L7.25273 5.24373L7.27025 5.24353H8.72135C8.55118 6.62377 8.02255 7.73589 7.28225 8.57637C6.77574 7.9905 6.38451 7.30765 6.13374 6.57955C5.99258 6.16968 5.55095 5.95362 5.14734 6.09697C4.74373 6.24032 4.53097 6.6888 4.67213 7.09867C4.98186 7.99799 5.46737 8.85136 6.09998 9.58971C5.10317 10.2281 3.93537 10.5373 2.79063 10.5127C2.36313 10.5035 2.00924 10.8479 2.00018 11.2821C1.99112 11.7162 2.33032 12.0756 2.75781 12.0848C4.32392 12.1185 5.93434 11.6458 7.26508 10.6865C8.25569 11.4335 9.45562 11.9372 10.8072 12.0586L8.47644 16.7924C8.28521 17.1808 8.44023 17.653 8.82267 17.8472C9.20512 18.0414 9.67017 17.884 9.86139 17.4956L10.8305 15.5274H15.4602L16.5442 17.5846C16.7459 17.9675 17.2151 18.1118 17.5921 17.9069C17.9691 17.7021 18.1112 17.2256 17.9095 16.8428L13.7262 8.9037C13.5897 8.64458 13.3222 8.48442 13.0329 8.48848C12.7435 8.49255 12.4805 8.66016 12.3511 8.92302L11.567 10.5155C11.5489 10.5144 11.5307 10.5139 11.5122 10.5142C10.3573 10.5278 9.31732 10.1858 8.45174 9.61031C9.41904 8.51048 10.0986 7.05062 10.2802 5.24353H11.7271C12.1547 5.24353 12.5014 4.89153 12.5014 4.45731C12.5014 4.0231 12.1547 3.6711 11.7271 3.6711L8.02695 3.6711L8.02695 2.78622C8.02695 2.352 7.68032 2 7.25273 2C6.82514 2 6.47852 2.352 6.47852 2.78622V3.6711L2.77422 3.6711C2.34663 3.6711 2 4.0231 2 4.45732C2 4.89153 2.34663 5.24354 2.77422 5.24354L7.23521 5.24354ZM14.6316 13.9549L13.0669 10.9853L11.6047 13.9549H14.6316Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nTranslation.displayName = 'Translation';\nexport default Translation;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/TurnInto.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface TurnIntoProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst TurnInto: React.FC<TurnIntoProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path fill=\"currentColor\" d=\"M17.071 8.27c.29-.29.77-.29 1.06 0 .29.29.29.77 0 1.06l-2.5 2.5c-.29.29-.77.29-1.06 0l-2.5-2.5a.754.754 0 0 1 0-1.06c.29-.29.77-.29 1.06 0l1.22 1.22V6.8c0-.33-.14-.65-.37-.88-.23-.24-.55-.37-.88-.37h-5.5c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h5.5c.72 0 1.42.29 1.94.81.52.51.81 1.21.81 1.94v2.69l1.22-1.22Zm-9.97 6.78h5.5c.41 0 .75.34.75.75s-.34.75-.75.75h-5.5c-.72 0-1.42-.29-1.94-.81-.52-.51-.81-1.21-.81-1.94v-2.69l-1.22 1.22c-.29.29-.77.29-1.06 0a.754.754 0 0 1 0-1.06l2.5-2.5c.29-.29.77-.29 1.06 0l2.5 2.5c.29.29.29.77 0 1.06-.29.29-.77.29-1.06 0l-1.22-1.22v2.69c0 .33.14.64.37.88.23.24.55.37.88.37Z\"\n    />\n  </svg>\n);\nTurnInto.displayName = 'TurnInto';\nexport default TurnInto;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Underline.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface UnderlineProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Underline: React.FC<UnderlineProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <g fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n      <path d=\"M5 1.96428C5.41421 1.96428 5.75 2.30007 5.75 2.71428V10.1428C5.75 11.2321 6.18272 12.2768 6.95295 13.047 7.72319 13.8173 8.76786 14.25 9.85714 14.25 10.3965 14.25 10.9306 14.1438 11.4289 13.9374 11.9272 13.731 12.38 13.4284 12.7613 13.047 13.1427 12.6657 13.4452 12.2129 13.6516 11.7146 13.8581 11.2163 13.9643 10.6822 13.9643 10.1428V2.71428C13.9643 2.30007 14.3001 1.96428 14.7143 1.96428 15.1285 1.96428 15.4643 2.30007 15.4643 2.71428V10.1428C15.4643 10.8792 15.3193 11.6083 15.0375 12.2886 14.7557 12.9689 14.3427 13.587 13.822 14.1077 13.3013 14.6284 12.6832 15.0414 12.0029 15.3232 11.3226 15.605 10.5935 15.75 9.85714 15.75 8.37004 15.75 6.94384 15.1592 5.89229 14.1077 4.84075 13.0562 4.25 11.63 4.25 10.1428V2.71428C4.25 2.30007 4.58579 1.96428 5 1.96428zM3.25 17C3.25 16.5858 3.58579 16.25 4 16.25H16.5714C16.9856 16.25 17.3214 16.5858 17.3214 17 17.3214 17.4142 16.9856 17.75 16.5714 17.75H4C3.58579 17.75 3.25 17.4142 3.25 17z\"\n      />\n    </g>\n  </svg>\n);\nUnderline.displayName = 'Underline';\nexport default Underline;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Undo.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface UndoProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Undo: React.FC<UndoProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path fill=\"currentColor\" d=\"M16.44 9.119a5.186 5.186 0 0 0-3.66-1.52H4.54l2.09-2.09c.28-.28.28-.75 0-1.03a.736.736 0 0 0-1.03 0l-3.34 3.34c-.28.28-.28.75 0 1.03l3.33 3.33c.28.28.75.28 1.03 0s.28-.75 0-1.03l-2.09-2.09h8.24c.99 0 1.93.39 2.63 1.09.7.7 1.09 1.64 1.09 2.63v2.22c0 .4.33.73.73.73.4 0 .73-.33.73-.73v-2.22c0-1.37-.55-2.69-1.52-3.66h.01Z\"\n    />\n  </svg>\n);\nUndo.displayName = 'Undo';\nexport default Undo;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Unlocked.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface UnlockedProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Unlocked: React.FC<UnlockedProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M11.9509 4.34017C11.4579 3.84116 10.7912 3.5625 10.0979 3.5625C9.40468 3.5625 8.73797 3.84116 8.24497 4.34017C7.75166 4.83949 7.47292 5.51863 7.47292 6.22865V8.29376H15.0937C15.508 8.29376 15.8437 8.62955 15.8437 9.04376V17.2188C15.8437 17.633 15.508 17.9688 15.0937 17.9688H5.10208C4.68787 17.9688 4.35208 17.633 4.35208 17.2188V9.04376C4.35208 8.62955 4.68787 8.29376 5.10208 8.29376H5.97292V6.22865C5.97292 5.12663 6.40534 4.06794 7.1779 3.28596C7.95077 2.50367 9.00095 2.0625 10.0979 2.0625C11.1949 2.0625 12.2451 2.50367 13.0179 3.28596C13.3091 3.58062 13.3062 4.05549 13.0115 4.3466C12.7169 4.63771 12.242 4.63484 11.9509 4.34017ZM5.85208 16.4688V9.79376H14.3437V16.4688H5.85208Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nUnlocked.displayName = 'Unlocked';\nexport default Unlocked;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Update.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface UpdateProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Update: React.FC<UpdateProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path fill=\"currentColor\" d=\"M10.437 1.95a7.512 7.512 0 0 1 6.006 2.982 7.517 7.517 0 0 1-9.604 11.13l-2.543 1.21c-1.062.507-2.172-.602-1.666-1.665l1.21-2.543A7.508 7.508 0 0 1 10.438 1.95Zm2.686 2.127a6.017 6.017 0 0 0-2.686-.627h-.003a6.007 6.007 0 0 0-5.109 9.182.75.75 0 0 1 .04.719l-1.078 2.264 2.264-1.078a.75.75 0 0 1 .719.04 6.018 6.018 0 1 0 5.853-10.5Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nUpdate.displayName = 'Update';\nexport default Update;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Upgrade.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface UpgradeProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Upgrade: React.FC<UpgradeProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M5.7205 3.22905C5.8506 3.08332 6.03668 3 6.23203 3H14.2113C14.4224 3 14.6217 3.09723 14.7516 3.26359L17.8547 7.23601C18.053 7.48988 18.0478 7.84757 17.8423 8.09563L10.528 16.9232C10.3977 17.0804 10.2042 17.1714 10 17.1714C9.79582 17.1714 9.60226 17.0804 9.47198 16.9232L2.1577 8.09563C1.94134 7.8345 1.94835 7.45444 2.17418 7.20147L5.7205 3.22905ZM5.95682 5.02365L6.60922 6.97241H4.21709L5.95682 5.02365ZM4.14439 8.34384H7.03991L8.48766 13.5857L4.14439 8.34384ZM11.5123 13.5857L15.8556 8.34384H12.9601L11.5123 13.5857ZM11.5373 8.34384L10 13.91L8.46268 8.34384H11.5373ZM13.4951 6.97241H15.9085L14.3727 5.00631L13.4951 6.97241ZM13.1542 4.37143H7.18472L8.05546 6.97241H11.9932L13.1542 4.37143Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nUpgrade.displayName = 'Upgrade';\nexport default Upgrade;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Upload.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface UploadProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Upload: React.FC<UploadProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M14.5285 7.3909C14.8225 7.09913 14.8244 6.62426 14.5326 6.33025L10.4055 2.17141C10.2647 2.02952 10.0731 1.94971 9.87316 1.94971C9.67325 1.94971 9.48162 2.02952 9.3408 2.17141L5.21373 6.33025C4.92197 6.62426 4.92379 7.09913 5.2178 7.3909C5.51181 7.68267 5.98668 7.68085 6.27845 7.38683L9.19554 4.44729L9.19554 12.484C9.19554 12.8982 9.53132 13.234 9.94554 13.234C10.3598 13.234 10.6955 12.8982 10.6955 12.484L10.6955 4.59317L13.4679 7.38683C13.7596 7.68085 14.2345 7.68267 14.5285 7.3909ZM3.5498 12.0188L3.5498 16.3423C3.55037 16.3438 3.55122 16.3457 3.55248 16.348C3.55683 16.356 3.56694 16.3705 3.58802 16.3871C3.63281 16.4225 3.71072 16.4532 3.80566 16.4494C3.81561 16.449 3.82556 16.4488 3.83552 16.4488L16.2641 16.4488C16.2739 16.4488 16.2837 16.449 16.2935 16.4494C16.3885 16.4531 16.4665 16.4224 16.5114 16.387C16.5325 16.3703 16.5427 16.3557 16.5471 16.3476C16.548 16.346 16.5486 16.3446 16.5492 16.3435C16.5494 16.3429 16.5496 16.3424 16.5498 16.3419V12.0188C16.5498 11.6046 16.8856 11.2688 17.2998 11.2688C17.714 11.2688 18.0498 11.6046 18.0498 12.0188V16.3812C18.0498 16.3957 18.0494 16.4102 18.0485 16.4247C18.0217 16.8858 17.7871 17.291 17.4408 17.5643C17.102 17.8318 16.6747 17.9617 16.2512 17.9488L3.84857 17.9488C3.42497 17.9619 2.99753 17.8321 2.65858 17.5645C2.31217 17.291 2.07751 16.8855 2.05104 16.4241C2.05022 16.4098 2.0498 16.3955 2.0498 16.3812V12.0188C2.0498 11.6046 2.38559 11.2688 2.7998 11.2688C3.21402 11.2688 3.5498 11.6046 3.5498 12.0188Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nUpload.displayName = 'Upload';\nexport default Upload;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/UserDomain.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface UserDomainProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst UserDomain: React.FC<UserDomainProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M4.70061 3.00164C5.34195 2.3603 6.21179 2 7.11877 2 8.02576 2 8.8956 2.3603 9.53694 3.00164 10.1783 3.64297 10.5386 4.51281 10.5386 5.4198 10.5386 6.32679 10.1783 7.19663 9.53694 7.83796 9.25214 8.12277 8.92227 8.35215 8.5641 8.51916 8.75529 8.57533 8.94355 8.64276 9.12789 8.7213 9.50896 8.88366 9.68625 9.3242 9.52389 9.70527 9.36153 10.0863 8.92099 10.2636 8.53993 10.1013 7.9895 9.86675 7.38953 9.77228 6.79367 9.82632 6.19781 9.88037 5.62463 10.0812 5.12537 10.4109 4.62612 10.7407 4.21635 11.189 3.93271 11.7158 3.64908 12.2426 3.50041 12.8315 3.5 13.4298 3.49972 13.844 3.1637 14.1795 2.74949 14.1793 2.33528 14.179 1.99972 13.843 2 13.4287 2.00058 12.5826 2.21084 11.7497 2.61198 11.0047 3.01312 10.2596 3.59265 9.6256 4.29874 9.15928 4.72472 8.87795 5.18876 8.66295 5.67494 8.51986 5.3162 8.35278 4.98581 8.12316 4.70061 7.83796 4.05927 7.19663 3.69897 6.32679 3.69897 5.4198 3.69897 4.51281 4.05927 3.64297 4.70061 3.00164zM7.11877 3.5C6.60961 3.5 6.1213 3.70226 5.76127 4.0623 5.40124 4.42233 5.19897 4.91064 5.19897 5.4198 5.19897 5.92896 5.40124 6.41727 5.76127 6.7773 6.1213 7.13734 6.60961 7.3396 7.11877 7.3396 7.62794 7.3396 8.11625 7.13734 8.47628 6.7773 8.83631 6.41727 9.03857 5.92896 9.03857 5.4198 9.03857 4.91064 8.83631 4.42233 8.47628 4.0623 8.11625 3.70226 7.62794 3.5 7.11877 3.5zM10.4107 9.89549C11.286 9.15298 12.4057 8.76177 13.553 8.79768L13.5707 8.79845C14.7976 8.86602 15.9506 9.40601 16.788 10.3052 17.624 11.2028 18.0806 12.3887 18.0625 13.615V14.1575C18.0622 14.6781 17.8553 15.1776 17.4872 15.5457 17.1191 15.9138 16.6199 16.1208 16.0994 16.121 15.5786 16.121 15.0788 15.9142 14.7105 15.5459 14.6459 15.4813 14.5862 15.4126 14.5317 15.3404 14.1993 15.5322 13.8196 15.6357 13.4292 15.6357 12.844 15.6357 12.2829 15.4032 11.8691 14.9895 11.4553 14.5757 11.2229 14.0145 11.2229 13.4294 11.2229 12.8443 11.4553 12.2831 11.8691 11.8693 12.2829 11.4556 12.844 11.2231 13.4292 11.2231 14.0143 11.2231 14.5755 11.4556 14.9892 11.8693 15.4012 12.2813 15.6334 12.8394 15.6354 13.4218L15.6354 13.4294V14.1575C15.6354 14.2804 15.6843 14.3983 15.7712 14.4853 15.858 14.5721 15.9758 14.6209 16.0986 14.621 16.2216 14.621 16.3396 14.5721 16.4266 14.4851 16.5136 14.3981 16.5625 14.2801 16.5625 14.1571V13.5972C16.576 12.7564 16.2635 11.9429 15.6903 11.3275 15.1192 10.7142 14.3336 10.345 13.4972 10.2967 12.7244 10.2747 11.9707 10.5391 11.381 11.0394 10.7891 11.5415 10.4047 12.2455 10.3021 13.0149 10.1996 13.7843 10.3863 14.5644 10.8261 15.204 11.2657 15.8434 11.9269 16.2969 12.6818 16.4768 13.1942 16.5978 13.7286 16.591 14.2379 16.4572 14.6385 16.352 15.0486 16.5914 15.1539 16.992 15.2591 17.3927 15.0197 17.8027 14.6191 17.908 13.872 18.1043 13.0881 18.1141 12.3364 17.9365L12.3352 17.9362C11.2185 17.6704 10.2403 16.9996 9.59004 16.0538 8.93974 15.108 8.66365 13.9545 8.81527 12.8167 8.96689 11.679 9.53541 10.638 10.4107 9.89549zM13.4292 12.7231C13.2418 12.7231 13.0622 12.7976 12.9298 12.93 12.7973 13.0625 12.7229 13.2421 12.7229 13.4294 12.7229 13.6167 12.7973 13.7963 12.9298 13.9288 13.0622 14.0612 13.2418 14.1357 13.4292 14.1357 13.6165 14.1357 13.7961 14.0612 13.9286 13.9288 14.061 13.7963 14.1354 13.6167 14.1354 13.4294 14.1354 13.2421 14.061 13.0625 13.9286 12.93 13.7961 12.7976 13.6165 12.7231 13.4292 12.7231z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nUserDomain.displayName = 'UserDomain';\nexport default UserDomain;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/UserStatus.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface UserStatusProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst UserStatus: React.FC<UserStatusProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M7.09905 1.9502C6.19525 1.9502 5.32847 2.30923 4.68939 2.94831 4.0503 3.58739 3.69127 4.45417 3.69127 5.35797 3.69127 6.26177 4.0503 7.12855 4.68939 7.76763 4.97027 8.04852 5.29515 8.27531 5.64782 8.4413 5.46833 8.49444 5.29132 8.55761 5.11764 8.63072 4.19271 9.02006 3.4034 9.67392 2.84875 10.5102 2.2941 11.3466 1.99883 12.3281 2 13.3316 2.00049 13.7458 2.33667 14.0812 2.75088 14.0807 3.16509 14.0802 3.50049 13.7441 3.5 13.3299 3.49917 12.6218 3.7075 11.9293 4.09882 11.3393 4.49014 10.7492 5.04703 10.2879 5.69959 10.0132 6.35216 9.73853 7.07132 9.66271 7.76682 9.79527 8.46232 9.92783 9.10317 10.2629 9.60895 10.7583 9.90484 11.0482 10.3797 11.0433 10.6696 10.7474 10.9594 10.4515 10.9545 9.97669 10.6586 9.68682 10.0644 9.10473 9.33868 8.67886 8.54632 8.44316 8.90052 8.27701 9.22677 8.04957 9.50871 7.76763 10.1478 7.12855 10.5068 6.26177 10.5068 5.35797 10.5068 4.45417 10.1478 3.58739 9.50871 2.94831 8.86963 2.30923 8.00285 1.9502 7.09905 1.9502zM5.75005 4.00897C6.10782 3.65119 6.59307 3.4502 7.09905 3.4502 7.60502 3.4502 8.09027 3.65119 8.44805 4.00897 8.80583 4.36675 9.00683 4.852 9.00683 5.35797 9.00683 5.86395 8.80583 6.3492 8.44805 6.70697 8.09027 7.06475 7.60502 7.26575 7.09905 7.26575 6.59307 7.26575 6.10782 7.06475 5.75005 6.70697 5.39227 6.3492 5.19127 5.86395 5.19127 5.35797 5.19127 4.852 5.39227 4.36675 5.75005 4.00897zM8.22515 13.014C7.67193 13.5672 7.36113 14.3175 7.36113 15.0999 7.36113 15.8823 7.67193 16.6326 8.22515 17.1858 8.77838 17.7391 9.52871 18.0499 10.3111 18.0499 11.0935 18.0499 11.8438 17.7391 12.397 17.1858 12.9502 16.6326 13.261 15.8823 13.261 15.0999 13.261 14.5728 13.12 14.0603 12.8588 13.6128L14.2001 12.2714 15.2254 13.2967C15.5183 13.5896 15.9932 13.5896 16.2861 13.2967 16.5789 13.0038 16.579 12.5289 16.2861 12.236L15.2608 11.2107 15.7556 10.7159 16.7809 11.7412C17.0738 12.0341 17.5487 12.0341 17.8416 11.7412 18.1345 11.4483 18.1345 10.9734 17.8416 10.6805L16.286 9.1249C15.9931 8.832 15.5182 8.832 15.2253 9.1249L11.7981 12.5521C11.3506 12.291 10.8381 12.1499 10.3111 12.1499 9.52871 12.1499 8.77838 12.4607 8.22515 13.014zM8.86113 15.0999C8.86113 14.7153 9.01389 14.3465 9.28581 14.0746 9.55773 13.8027 9.92653 13.6499 10.3111 13.6499 10.6956 13.6499 11.0644 13.8027 11.3364 14.0746 11.6083 14.3465 11.761 14.7153 11.761 15.0999 11.761 15.4845 11.6083 15.8533 11.3364 16.1252 11.0644 16.3971 10.6956 16.5499 10.3111 16.5499 9.92653 16.5499 9.55773 16.3971 9.28581 16.1252 9.01389 15.8533 8.86113 15.4845 8.86113 15.0999z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nUserStatus.displayName = 'UserStatus';\nexport default UserStatus;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Versioning.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface VersioningProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Versioning: React.FC<VersioningProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M12.5051 4.00447C9.47167 2.73636 6.02262 3.94066 4.40085 6.69696L5.98776 6.69306C6.40198 6.69205 6.73859 7.02701 6.7396 7.44122C6.74062 7.85543 6.40566 8.19204 5.99144 8.19306L2.75977 8.20099C2.34556 8.20201 2.00895 7.86704 2.00793 7.45283L2 4.22157C1.99899 3.80736 2.33395 3.47075 2.74816 3.46973C3.16237 3.46871 3.49898 3.80367 3.5 4.21789L3.50273 5.32956C5.62613 2.37086 9.58018 1.15592 13.0836 2.62053C17.1591 4.32428 19.0817 9.00891 17.3776 13.084C15.6736 17.1591 10.9885 19.0812 6.91306 17.3775C4.50207 16.3696 2.8448 14.3177 2.24608 11.9692C2.14376 11.5678 2.38618 11.1595 2.78756 11.0572C3.18893 10.9549 3.59726 11.1973 3.69959 11.5987C4.18694 13.5103 5.53354 15.175 7.49162 15.9936C10.8029 17.3778 14.6094 15.816 15.9938 12.5053C17.3781 9.1947 15.8163 5.38871 12.5051 4.00447ZM9.99511 6.74534C9.99511 6.33113 9.65932 5.99534 9.24511 5.99534C8.8309 5.99534 8.49511 6.33113 8.49511 6.74534V10.612C8.49511 11.0262 8.8309 11.362 9.24511 11.362H12.1451C12.5593 11.362 12.8951 11.0262 12.8951 10.612C12.8951 10.1978 12.5593 9.86201 12.1451 9.86201H9.99511V6.74534Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nVersioning.displayName = 'Versioning';\nexport default Versioning;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Video.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface VideoProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Video: React.FC<VideoProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <g fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n      <path d=\"M1.82141 4.56839C1.82141 3.04961 3.05263 1.81839 4.57141 1.81839H15.4286C16.9473 1.81839 18.1786 3.04961 18.1786 4.56839V15.4255C18.1786 16.9443 16.9473 18.1755 15.4286 18.1755H4.57141C3.05263 18.1755 1.82141 16.9443 1.82141 15.4255V4.56839ZM4.57141 3.31839C3.88105 3.31839 3.32141 3.87803 3.32141 4.56839V15.4255C3.32141 16.1159 3.88105 16.6755 4.57141 16.6755H15.4286C16.1189 16.6755 16.6786 16.1159 16.6786 15.4255V4.56839C16.6786 3.87803 16.1189 3.31839 15.4286 3.31839H4.57141Z\"\n      />\n      <path d=\"M13.0783 8.95959C13.8406 9.43013 13.8406 10.5699 13.0783 11.0404L9.13091 13.4769C8.28106 14.0015 7.35002 13.2991 7.35002 12.4365L7.35002 7.56353C7.35002 6.70086 8.28106 5.99855 9.13091 6.52311L13.0783 8.95959ZM12.2888 10L8.65002 7.75399L8.65002 12.246L12.2888 10Z\"\n      />\n    </g>\n  </svg>\n);\nVideo.displayName = 'Video';\nexport default Video;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Wand.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface WandProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Wand: React.FC<WandProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M16.9384 4.75694C17.4881 3.67802 16.3361 2.52596 15.2572 3.0757L12.7747 4.34056L10.8046 2.37049C9.94841 1.51425 8.49672 2.25392 8.68615 3.44991L9.12199 6.20172L6.63956 7.46658C5.56064 8.01632 5.8155 9.62552 7.0115 9.81495L8.88363 10.1115L2.21967 16.7754C1.92678 17.0683 1.92678 17.5432 2.21967 17.8361C2.51256 18.129 2.98744 18.129 3.28033 17.8361L9.91402 11.2024L10.1991 13.0026C10.3886 14.1986 11.9978 14.4535 12.5475 13.3745L13.8124 10.8921L16.5642 11.3279C17.7602 11.5174 18.4998 10.0657 17.6436 9.20945L15.6735 7.23938L16.9384 4.75694ZM13.2939 5.75953L15.2526 4.76152L14.2546 6.72023C14.0087 7.20274 14.1015 7.78868 14.4844 8.1716L16.0389 9.72605L13.8676 9.38216C13.3328 9.29744 12.8042 9.56677 12.5583 10.0493L11.5603 12.008L11.2164 9.83674C11.1317 9.30187 10.7122 8.88239 10.1774 8.79767L8.0061 8.45378L9.96482 7.45577C10.4473 7.20992 10.7167 6.68133 10.6319 6.14646L10.288 3.97521L11.8425 5.52966C12.2254 5.91258 12.8114 6.00538 13.2939 5.75953Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nWand.displayName = 'Wand';\nexport default Wand;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Warning.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface WarningProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Warning: React.FC<WarningProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M10 10.977c-.414 0-.75-.355-.75-.793V6.369c0-.438.336-.792.75-.792s.75.354.75.792v3.815c0 .438-.336.793-.75.793Zm0 3.1a1 1 0 1 0 0-2.002 1 1 0 0 0 0 2.002Z\"\n    />\n    <path d=\"M15.638 15.636A7.97 7.97 0 1 1 4.366 4.364a7.97 7.97 0 0 1 11.272 11.272Zm-5.636.835a6.471 6.471 0 1 0 0-12.942 6.471 6.471 0 0 0 0 12.942Z\" fillRule=\"evenodd\"\n      clipRule=\"evenodd\" />\n  </svg>\n);\nWarning.displayName = 'Warning';\nexport default Warning;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/WarningFull.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface WarningFullProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst WarningFull: React.FC<WarningFullProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M15.638 15.636A7.97 7.97 0 1 1 4.366 4.364a7.97 7.97 0 0 1 11.272 11.272ZM10 10.976a.796.796 0 0 1-.8-.792V6.369c0-.438.358-.792.8-.792.442 0 .8.354.8.792v3.815a.796.796 0 0 1-.8.793Zm0 3.101a1 1 0 1 0 0-2.002 1 1 0 0 0 0 2.002Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nWarningFull.displayName = 'WarningFull';\nexport default WarningFull;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/WhatsNew.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface WhatsNewProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst WhatsNew: React.FC<WhatsNewProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M10.778 2.657c.972-.928 2.576-.86 3.544-.027a2.482 2.482 0 0 1 .78 2.59h1.039c.966 0 1.75.783 1.75 1.75v1.677a1.75 1.75 0 0 1-1.75 1.75h-.124V16a1.75 1.75 0 0 1-1.75 1.75H5.7A1.75 1.75 0 0 1 3.951 16v-5.603h-.12a1.75 1.75 0 0 1-1.75-1.75V6.97c0-.967.783-1.75 1.75-1.75h.911a2.483 2.483 0 0 1 .78-2.586c.97-.833 2.573-.9 3.546.027.381.365.65.782.848 1.09l.005.008.009-.013c.197-.307.466-.725.848-1.089Zm2.566 1.11c-.449-.386-1.176-.363-1.53-.025-.25.238-.431.519-.646.852l-.038.059c-.102.158-.231.359-.396.549h2.325l.042.002c.29.016.488-.14.57-.435a.983.983 0 0 0-.327-1.002Zm-6.843.004c.45-.386 1.177-.363 1.531-.024.25.237.43.518.646.851l.037.06c.102.157.232.358.396.548H6.786l-.042.002c-.29.016-.488-.139-.57-.435a.983.983 0 0 1 .327-1.002Zm2.733 5.126H3.83a.25.25 0 0 1-.25-.25V6.97a.25.25 0 0 1 .25-.25h5.404v2.177Zm1.502 0V6.72h5.405a.25.25 0 0 1 .25.25v1.677a.25.25 0 0 1-.25.25h-5.405ZM5.451 16v-5.603h3.781v5.853h-3.53a.25.25 0 0 1-.25-.25Zm5.284.25v-5.853h3.782V16a.25.25 0 0 1-.25.25h-3.532Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nWhatsNew.displayName = 'WhatsNew';\nexport default WhatsNew;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Widgets.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface WidgetsProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Widgets: React.FC<WidgetsProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M16 4.5H4C3.72386 4.5 3.5 4.72386 3.5 5V7H16.5V5C16.5 4.72386 16.2761 4.5 16 4.5ZM3.5 15V8.5H16.5V15C16.5 15.2761 16.2761 15.5 16 15.5H13.75V10.75C13.75 10.3358 13.4142 10 13 10C12.5858 10 12.25 10.3358 12.25 10.75V15.5H10.75V12.25C10.75 11.8358 10.4142 11.5 10 11.5C9.58579 11.5 9.25 11.8358 9.25 12.25V15.5H7.75V13.75C7.75 13.3358 7.41421 13 7 13C6.58579 13 6.25 13.3358 6.25 13.75V15.5H4C3.72386 15.5 3.5 15.2761 3.5 15ZM7 17H4C2.89543 17 2 16.1046 2 15V5C2 3.89543 2.89543 3 4 3H16C17.1046 3 18 3.89543 18 5V15C18 16.1046 17.1046 17 16 17H13H10H7Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nWidgets.displayName = 'Widgets';\nexport default Widgets;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Work.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface WorkProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Work: React.FC<WorkProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M10.0417 3.25C8.98079 3.25 7.96338 3.67143 7.21323 4.42157C6.64233 4.99247 6.26183 5.71816 6.11258 6.5H3C2.58579 6.5 2.25 6.83579 2.25 7.25V11.5833V17C2.25 17.4142 2.58579 17.75 3 17.75H17.0833C17.4975 17.75 17.8333 17.4142 17.8333 17V11.5833V7.25C17.8333 6.83579 17.4975 6.5 17.0833 6.5H13.9707C13.8215 5.71816 13.441 4.99247 12.8701 4.42157C12.1199 3.67143 11.1025 3.25 10.0417 3.25ZM12.4265 6.5C12.3068 6.11948 12.0967 5.7695 11.8094 5.48223C11.3406 5.01339 10.7047 4.75 10.0417 4.75C9.37862 4.75 8.74273 5.01339 8.27389 5.48223C7.98662 5.7695 7.77648 6.11948 7.65681 6.5H12.4265ZM6.79166 8H13.2917H16.3333V10.8333H10.75V10.5C10.75 10.0858 10.4142 9.75 10 9.75C9.58579 9.75 9.25 10.0858 9.25 10.5V10.8333H3.75V8H6.79166ZM3.75 12.3333H9.25V12.6667C9.25 13.0809 9.58579 13.4167 10 13.4167C10.4142 13.4167 10.75 13.0809 10.75 12.6667V12.3333H16.3333V16.25H3.75V12.3333Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nWork.displayName = 'Work';\nexport default Work;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Workflow.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface WorkflowProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Workflow: React.FC<WorkflowProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path fill=\"currentColor\" d=\"M17.98 12.287h-1.97v-4.78c0-.67-.55-1.22-1.22-1.22h-.84l-3.51-3.51a.525.525 0 0 0-.75 0l-3.51 3.51h-.95c-.67 0-1.22.55-1.22 1.22v4.78H2.04c-.29 0-.53.24-.53.53v4.25c0 .29.24.53.53.53h5.31c.29 0 .53-.24.53-.53v-4.25c0-.29-.24-.53-.53-.53H5.38v-4.62h.9c.08 0 .16-.01.24-.04l3.17 3.17c.21.21.54.21.75 0l3.14-3.14s.09.02.14.02h.9v4.62h-1.97c-.29 0-.53.24-.53.53v4.25c0 .29.24.53.53.53h5.31c.29 0 .53-.24.53-.53v-4.25c0-.29-.24-.53-.53-.53l.02-.01ZM6.5 13.667v2.55H2.89v-2.55H6.5Zm3.57-4.46-2.43-2.43 2.43-2.43 2.43 2.43-2.43 2.43Zm7.06 7.01h-3.61v-2.55h3.61v2.55Z\"\n      fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nWorkflow.displayName = 'Workflow';\nexport default Workflow;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/Workspace.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface WorkspaceProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst Workspace: React.FC<WorkspaceProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M3 2.25C2.58579 2.25 2.25 2.58579 2.25 3V8.38462C2.25 8.79883 2.58579 9.13462 3 9.13462H8.38462C8.79883 9.13462 9.13462 8.79883 9.13462 8.38462V3C9.13462 2.58579 8.79883 2.25 8.38462 2.25H3ZM3.75 7.63462V3.75H7.63462V7.63462H3.75ZM11.6154 2.25C11.2012 2.25 10.8654 2.58579 10.8654 3V8.38462C10.8654 8.79883 11.2012 9.13462 11.6154 9.13462H17C17.4142 9.13462 17.75 8.79883 17.75 8.38462V3C17.75 2.58579 17.4142 2.25 17 2.25H11.6154ZM12.3654 7.63462V3.75H16.25V7.63462H12.3654ZM2.25 11.6154C2.25 11.2012 2.58579 10.8654 3 10.8654H8.38462C8.79883 10.8654 9.13462 11.2012 9.13462 11.6154V17C9.13462 17.4142 8.79883 17.75 8.38462 17.75H3C2.58579 17.75 2.25 17.4142 2.25 17V11.6154ZM3.75 12.3654V16.25H7.63462V12.3654H3.75ZM11.6154 10.8654C11.2012 10.8654 10.8654 11.2012 10.8654 11.6154V17C10.8654 17.4142 11.2012 17.75 11.6154 17.75H17C17.4142 17.75 17.75 17.4142 17.75 17V11.6154C17.75 11.2012 17.4142 10.8654 17 10.8654H11.6154ZM12.3654 16.25V12.3654H16.25V16.25H12.3654Z\"\n      fill=\"currentColor\" fillRule=\"evenodd\" clipRule=\"evenodd\" />\n  </svg>\n);\nWorkspace.displayName = 'Workspace';\nexport default Workspace;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/WrapText.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface WrapTextProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst WrapText: React.FC<WrapTextProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M3 14.209c0-.455.369-.824.824-.824h3.293a.824.824 0 1 1 0 1.648H3.824A.824.824 0 0 1 3 14.209Zm10.706-5.766H3.824a.824.824 0 0 0 0 1.647h10.088c.906 0 1.647.741 1.647 1.648 0 .906-.741 1.647-1.647 1.647h-1.853v-1.647l-2.47 2.47 2.47 2.472v-1.647h1.647A3.294 3.294 0 0 0 17 11.738a3.294 3.294 0 0 0-3.294-3.295ZM3 4.323c0-.454.369-.823.824-.823h11.529a.824.824 0 1 1 0 1.647H3.823A.824.824 0 0 1 3 4.325Z\"\n    />\n  </svg>\n);\nWrapText.displayName = 'WrapText';\nexport default WrapText;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/ZoomIn.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ZoomInProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst ZoomIn: React.FC<ZoomInProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M8.652 2.373a6.34 6.34 0 0 1 4.982 10.26l3.836 3.837a.75.75 0 0 1-1.062 1.06l-3.835-3.836a6.34 6.34 0 1 1-3.92-11.32Zm0 1.5a4.841 4.841 0 0 0-3.423 8.262 4.841 4.841 0 0 0 6.828.016l.016-.017.018-.017a4.84 4.84 0 0 0-3.439-8.244ZM8.7 6.05a.65.65 0 0 1 .65.65v1.35h1.35a.65.65 0 0 1 0 1.3H9.35v1.35a.651.651 0 0 1-1.3 0V9.35H6.7a.65.65 0 0 1 0-1.3h1.35V6.7a.65.65 0 0 1 .65-.65Z\"\n    />\n  </svg>\n);\nZoomIn.displayName = 'ZoomIn';\nexport default ZoomIn;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/ZoomOut.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport * as React from 'react';\nexport interface ZoomOutProps extends React.SVGAttributes<SVGElement> {\nsize?: string | number;\n}\nconst ZoomOut: React.FC<ZoomOutProps> = ({size, ...props}) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={ size || \"20\" } height={ size || \"20\" } {...props}>\n    <path d=\"M8.652 2.373a6.34 6.34 0 0 1 4.982 10.26l3.836 3.837a.75.75 0 0 1-1.062 1.06l-3.835-3.836a6.34 6.34 0 1 1-3.92-11.32Zm0 1.5a4.841 4.841 0 0 0-3.423 8.262 4.841 4.841 0 0 0 6.828.016l.016-.017.018-.017a4.84 4.84 0 0 0-3.439-8.244ZM10.7 8.05a.65.65 0 0 1 0 1.3h-4a.65.65 0 0 1 0-1.3h4Z\"\n    />\n  </svg>\n);\nZoomOut.displayName = 'ZoomOut';\nexport default ZoomOut;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/react/index.ts",
    "content": "/* eslint-disable */\n/* tslint:disable */\nexport {default as Academy} from './Academy';\nexport {default as Activity} from './Activity';\nexport {default as Add} from './Add';\nexport {default as AddNewDoc} from './AddNewDoc';\nexport {default as AddSmall} from './AddSmall';\nexport {default as AddToTeam} from './AddToTeam';\nexport {default as AddUpdate} from './AddUpdate';\nexport {default as Alert} from './Alert';\nexport {default as AlignCenter} from './AlignCenter';\nexport {default as AlignLeft} from './AlignLeft';\nexport {default as AlignRight} from './AlignRight';\nexport {default as Announcement} from './Announcement';\nexport {default as API} from './API';\nexport {default as Apps} from './Apps';\nexport {default as Archive} from './Archive';\nexport {default as Attach} from './Attach';\nexport {default as Baseline} from './Baseline';\nexport {default as Basic} from './Basic';\nexport {default as Battery} from './Battery';\nexport {default as BlockQuote} from './BlockQuote';\nexport {default as Board} from './Board';\nexport {default as BoardPrivate} from './BoardPrivate';\nexport {default as BoardShareable} from './BoardShareable';\nexport {default as BoardTemplate} from './BoardTemplate';\nexport {default as Bold} from './Bold';\nexport {default as Bolt} from './Bolt';\nexport {default as Bookmark} from './Bookmark';\nexport {default as Broadcast} from './Broadcast';\nexport {default as Broom} from './Broom';\nexport {default as Bug} from './Bug';\nexport {default as Bullet} from './Bullet';\nexport {default as Bullets} from './Bullets';\nexport {default as Bulllet} from './Bulllet';\nexport {default as Calendar} from './Calendar';\nexport {default as Chart} from './Chart';\nexport {default as Check} from './Check';\nexport {default as Checkbox} from './Checkbox';\nexport {default as CheckList} from './CheckList';\nexport {default as ClassicFolder} from './ClassicFolder';\nexport {default as Clear} from './Clear';\nexport {default as Clipboard} from './Clipboard';\nexport {default as Close} from './Close';\nexport {default as CloseMedium} from './CloseMedium';\nexport {default as CloseRound} from './CloseRound';\nexport {default as CloseSmall} from './CloseSmall';\nexport {default as Code} from './Code';\nexport {default as Collapse} from './Collapse';\nexport {default as CollapseHorizontally} from './CollapseHorizontally';\nexport {default as CollapseRound} from './CollapseRound';\nexport {default as Column} from './Column';\nexport {default as Comment} from './Comment';\nexport {default as Completed} from './Completed';\nexport {default as Connect} from './Connect';\nexport {default as ConnectedDoc} from './ConnectedDoc';\nexport {default as ContentDirectory} from './ContentDirectory';\nexport {default as ConvertToItem} from './ConvertToItem';\nexport {default as ConvertToSubitem} from './ConvertToSubitem';\nexport {default as Counter} from './Counter';\nexport {default as Country} from './Country';\nexport {default as CreditCard} from './CreditCard';\nexport {default as Custom} from './Custom';\nexport {default as Cut} from './Cut';\nexport {default as Dashboard} from './Dashboard';\nexport {default as DashboardPrivate} from './DashboardPrivate';\nexport {default as Deactivate} from './Deactivate';\nexport {default as Delete} from './Delete';\nexport {default as Dependency} from './Dependency';\nexport {default as Description} from './Description';\nexport {default as DisabledUser} from './DisabledUser';\nexport {default as Divider} from './Divider';\nexport {default as Doc} from './Doc';\nexport {default as DocPrivate} from './DocPrivate';\nexport {default as DocShareable} from './DocShareable';\nexport {default as DocTemplate} from './DocTemplate';\nexport {default as DoubleCheck} from './DoubleCheck';\nexport {default as Downgrade} from './Downgrade';\nexport {default as Download} from './Download';\nexport {default as Drag} from './Drag';\nexport {default as Dropdown} from './Dropdown';\nexport {default as DropdownChevronDown} from './DropdownChevronDown';\nexport {default as DropdownChevronLeft} from './DropdownChevronLeft';\nexport {default as DropdownChevronRight} from './DropdownChevronRight';\nexport {default as DropdownChevronUp} from './DropdownChevronUp';\nexport {default as DueDate} from './DueDate';\nexport {default as Duplicate} from './Duplicate';\nexport {default as Edit} from './Edit';\nexport {default as Education} from './Education';\nexport {default as Email} from './Email';\nexport {default as Embed} from './Embed';\nexport {default as Emoji} from './Emoji';\nexport {default as Enter} from './Enter';\nexport {default as EnterArrow} from './EnterArrow';\nexport {default as Erase} from './Erase';\nexport {default as Event} from './Event';\nexport {default as Expand} from './Expand';\nexport {default as ExternalPage} from './ExternalPage';\nexport {default as Favorite} from './Favorite';\nexport {default as Feedback} from './Feedback';\nexport {default as File} from './File';\nexport {default as Files} from './Files';\nexport {default as Filter} from './Filter';\nexport {default as Folder} from './Folder';\nexport {default as Form} from './Form';\nexport {default as Formula} from './Formula';\nexport {default as Forum} from './Forum';\nexport {default as Forward} from './Forward';\nexport {default as Fullscreen} from './Fullscreen';\nexport {default as FullscreenClose} from './FullscreenClose';\nexport {default as Gallery} from './Gallery';\nexport {default as Gantt} from './Gantt';\nexport {default as Gif} from './Gif';\nexport {default as Globe} from './Globe';\nexport {default as Graph} from './Graph';\nexport {default as Group} from './Group';\nexport {default as Guest} from './Guest';\nexport {default as Health} from './Health';\nexport {default as Heart} from './Heart';\nexport {default as Help} from './Help';\nexport {default as Hide} from './Hide';\nexport {default as Highlight} from './Highlight';\nexport {default as HighlightColorBucket} from './HighlightColorBucket';\nexport {default as Home} from './Home';\nexport {default as Idea} from './Idea';\nexport {default as Image} from './Image';\nexport {default as Inbox} from './Inbox';\nexport {default as Info} from './Info';\nexport {default as Integrations} from './Integrations';\nexport {default as Invite} from './Invite';\nexport {default as IPRestrictions} from './IPRestrictions';\nexport {default as Italic} from './Italic';\nexport {default as Item} from './Item';\nexport {default as ItemDefaultValues} from './ItemDefaultValues';\nexport {default as ItemHeightDouble} from './ItemHeightDouble';\nexport {default as ItemHeightSingle} from './ItemHeightSingle';\nexport {default as ItemHeightTriple} from './ItemHeightTriple';\nexport {default as Key} from './Key';\nexport {default as Keyboard} from './Keyboard';\nexport {default as Labs} from './Labs';\nexport {default as Launch} from './Launch';\nexport {default as Layout} from './Layout';\nexport {default as LearnMore} from './LearnMore';\nexport {default as Lines} from './Lines';\nexport {default as Link} from './Link';\nexport {default as Location} from './Location';\nexport {default as Locked} from './Locked';\nexport {default as LogIn} from './LogIn';\nexport {default as LogOut} from './LogOut';\nexport {default as LongText} from './LongText';\nexport {default as Mention} from './Mention';\nexport {default as Menu} from './Menu';\nexport {default as Microphone} from './Microphone';\nexport {default as Minimize} from './Minimize';\nexport {default as MinusSmall} from './MinusSmall';\nexport {default as Mirror} from './Mirror';\nexport {default as Mobile} from './Mobile';\nexport {default as MondayDoc} from './MondayDoc';\nexport {default as MondayLogoOutline} from './MondayLogoOutline';\nexport {default as Moon} from './Moon';\nexport {default as MoreActions} from './MoreActions';\nexport {default as MoreBelow} from './MoreBelow';\nexport {default as MoreBelowFilled} from './MoreBelowFilled';\nexport {default as Move} from './Move';\nexport {default as MoveArrowDown} from './MoveArrowDown';\nexport {default as MoveArrowLeft} from './MoveArrowLeft';\nexport {default as MoveArrowLeftDouble} from './MoveArrowLeftDouble';\nexport {default as MoveArrowLeftNarrow} from './MoveArrowLeftNarrow';\nexport {default as MoveArrowRight} from './MoveArrowRight';\nexport {default as MoveArrowRightNarrow} from './MoveArrowRightNarrow';\nexport {default as MoveArrowUp} from './MoveArrowUp';\nexport {default as Mute} from './Mute';\nexport {default as MyWeek} from './MyWeek';\nexport {default as NavigationArrow} from './NavigationArrow';\nexport {default as NavigationChevronDown} from './NavigationChevronDown';\nexport {default as NavigationChevronLeft} from './NavigationChevronLeft';\nexport {default as NavigationChevronRight} from './NavigationChevronRight';\nexport {default as NavigationChevronUp} from './NavigationChevronUp';\nexport {default as NavigationDoubleChevronLeft} from './NavigationDoubleChevronLeft';\nexport {default as NewTab} from './NewTab';\nexport {default as Night} from './Night';\nexport {default as NoColor} from './NoColor';\nexport {default as Note} from './Note';\nexport {default as NotificationChecked} from './NotificationChecked';\nexport {default as Notifications} from './Notifications';\nexport {default as NotificationsMuted} from './NotificationsMuted';\nexport {default as Numbers} from './Numbers';\nexport {default as Offline} from './Offline';\nexport {default as Open} from './Open';\nexport {default as Page} from './Page';\nexport {default as Paste} from './Paste';\nexport {default as Pause} from './Pause';\nexport {default as PDF} from './PDF';\nexport {default as Person} from './Person';\nexport {default as PersonRound} from './PersonRound';\nexport {default as Pin} from './Pin';\nexport {default as PinFull} from './PinFull';\nexport {default as Placeholder} from './Placeholder';\nexport {default as Play} from './Play';\nexport {default as Print} from './Print';\nexport {default as Prompt} from './Prompt';\nexport {default as PushNotification} from './PushNotification';\nexport {default as Quote} from './Quote';\nexport {default as Radio} from './Radio';\nexport {default as Recurring} from './Recurring';\nexport {default as RecycleBin} from './RecycleBin';\nexport {default as Redo} from './Redo';\nexport {default as Remove} from './Remove';\nexport {default as RemoveRound} from './RemoveRound';\nexport {default as Reply} from './Reply';\nexport {default as ReplyAll} from './ReplyAll';\nexport {default as Retry} from './Retry';\nexport {default as Robot} from './Robot';\nexport {default as Rotate} from './Rotate';\nexport {default as ScheduledEmail} from './ScheduledEmail';\nexport {default as ScheduledSend} from './ScheduledSend';\nexport {default as Search} from './Search';\nexport {default as Security} from './Security';\nexport {default as Send} from './Send';\nexport {default as Settings} from './Settings';\nexport {default as SettingsKnobs} from './SettingsKnobs';\nexport {default as Share} from './Share';\nexport {default as ShortText} from './ShortText';\nexport {default as Show} from './Show';\nexport {default as Shredder} from './Shredder';\nexport {default as Shuffle} from './Shuffle';\nexport {default as Signature} from './Signature';\nexport {default as Sort} from './Sort';\nexport {default as SortAscending} from './SortAscending';\nexport {default as SortDescending} from './SortDescending';\nexport {default as Sound} from './Sound';\nexport {default as Status} from './Status';\nexport {default as StrikethroughS} from './StrikethroughS';\nexport {default as StrikethroughT} from './StrikethroughT';\nexport {default as Subitems} from './Subitems';\nexport {default as Sun} from './Sun';\nexport {default as Switch} from './Switch';\nexport {default as Switcher} from './Switcher';\nexport {default as Table} from './Table';\nexport {default as Tags} from './Tags';\nexport {default as Team} from './Team';\nexport {default as Text} from './Text';\nexport {default as TextBig} from './TextBig';\nexport {default as Textcolor} from './Textcolor';\nexport {default as TextColorIndicator} from './TextColorIndicator';\nexport {default as TextCopy} from './TextCopy';\nexport {default as TextFormatting} from './TextFormatting';\nexport {default as TextHuge} from './TextHuge';\nexport {default as TextMedium} from './TextMedium';\nexport {default as TextSmall} from './TextSmall';\nexport {default as ThumbsDown} from './ThumbsDown';\nexport {default as ThumbsUp} from './ThumbsUp';\nexport {default as Time} from './Time';\nexport {default as Timeline} from './Timeline';\nexport {default as Translation} from './Translation';\nexport {default as TurnInto} from './TurnInto';\nexport {default as Underline} from './Underline';\nexport {default as Undo} from './Undo';\nexport {default as Unlocked} from './Unlocked';\nexport {default as Update} from './Update';\nexport {default as Upgrade} from './Upgrade';\nexport {default as Upload} from './Upload';\nexport {default as UserDomain} from './UserDomain';\nexport {default as UserStatus} from './UserStatus';\nexport {default as Versioning} from './Versioning';\nexport {default as Video} from './Video';\nexport {default as Wand} from './Wand';\nexport {default as Warning} from './Warning';\nexport {default as WarningFull} from './WarningFull';\nexport {default as WhatsNew} from './WhatsNew';\nexport {default as Widgets} from './Widgets';\nexport {default as Work} from './Work';\nexport {default as Workflow} from './Workflow';\nexport {default as Workspace} from './Workspace';\nexport {default as WrapText} from './WrapText';\nexport {default as ZoomIn} from './ZoomIn';\nexport {default as ZoomOut} from './ZoomOut';\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/icons/src/svg.d.ts",
    "content": "declare module \"*.svg\" {\n  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n  export default content;\n}\n"
  },
  {
    "path": "packages/icons/src/types.ts",
    "content": "import iconsMetaData from \"./iconsMetaData\";\n\n/**\n * Union type of all available icon names in @vibe/icons\n */\nexport type IconName = (typeof iconsMetaData)[number][\"name\"];\n"
  },
  {
    "path": "packages/icons/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"strict\": true,\n    \"lib\": [\"esnext\", \"dom\"],\n    \"target\": \"es6\",\n    \"moduleResolution\": \"node\",\n    \"esModuleInterop\": true,\n    \"jsx\": \"react\",\n    \"skipLibCheck\": true,\n    \"noImplicitAny\": true,\n    \"baseUrl\": \".\",\n    \"module\": \"ESNext\",\n    \"declaration\": true,\n    \"declarationDir\": \"dist\",\n    \"outDir\": \"dist\",\n    \"rootDir\": \"src\",\n    \"allowSyntheticDefaultImports\": true,\n    \"allowJs\": false,\n    \"isolatedModules\": true\n  },\n  \"include\": [\n    \"src/**/*\",\n    \"src/svg.d.ts\"\n  ],\n  \"exclude\": [\n    \"node_modules\",\n    \"dist/**/*\",\n    \"src/svg/*.svg\",\n    \"**/__tests__/**/*.test.ts\"\n  ]\n}\n"
  },
  {
    "path": "packages/icons/tsconfig.test.json",
    "content": "{\n  \"extends\": \"./tsconfig.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"./dist-test\",\n    \"noEmit\": false,\n    \"types\": [\"vitest/globals\"]\n  },\n  \"include\": [\"vitest.config.ts\", \"test/**/setup.ts\", \"**/*.test.ts\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/icons/vitest.config.ts",
    "content": "import { defineConfig } from \"vitest/config\";\n\nexport default defineConfig({\n  test: {\n    globals: true,\n    environment: \"node\",\n    include: [\"**/__tests__/**/*.test.ts\"],\n    clearMocks: true,\n    typecheck: {\n      enabled: true\n    }\n  }\n});\n"
  },
  {
    "path": "packages/mcp/.gitignore",
    "content": "src/vibe-metadata.json"
  },
  {
    "path": "packages/mcp/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [0.8.2](https://github.com/mondaycom/vibe/compare/@vibe/mcp@0.8.1...@vibe/mcp@0.8.2) (2026-02-09)\n\n\n### Bug Fixes\n\n* adjust mcp metadata source ([#3249](https://github.com/mondaycom/vibe/issues/3249)) ([db5fcc2](https://github.com/mondaycom/vibe/commit/db5fcc25cc037ab34945bb6095ee78e541df5be1))\n\n\n\n\n\n## [0.8.1](https://github.com/mondaycom/vibe/compare/@vibe/mcp@0.8.0...@vibe/mcp@0.8.1) (2026-01-18)\n\n**Note:** Version bump only for package @vibe/mcp\n\n\n\n\n\n# [0.8.0](https://github.com/mondaycom/vibe/compare/@vibe/mcp@0.7.0...@vibe/mcp@0.8.0) (2025-09-21)\n\n\n### Features\n\n* **DropdownMigration:** add migration tool for transitioning to new Dropdown component ([#3115](https://github.com/mondaycom/vibe/issues/3115)) ([7621260](https://github.com/mondaycom/vibe/commit/7621260cd0d8558eb6fdf5a651fc86c86ea786c2))\n\n\n\n\n\n# [0.7.0](https://github.com/mondaycom/vibe/compare/@vibe/mcp@0.6.0...@vibe/mcp@0.7.0) (2025-09-08)\n\n\n### Features\n\n* update mcp version ([#3097](https://github.com/mondaycom/vibe/issues/3097)) ([eb652c2](https://github.com/mondaycom/vibe/commit/eb652c2ab4407eded3ca6bf7aec25f75b16cd338))\n\n\n\n\n\n# [0.6.0](https://github.com/mondaycom/vibe/compare/@vibe/mcp@0.5.2...@vibe/mcp@0.6.0) (2025-09-04)\n\n\n### Features\n\n* add getVibeComponentAccessibility tool to retrieve a11y requirements ([#3084](https://github.com/mondaycom/vibe/issues/3084)) ([45314fb](https://github.com/mondaycom/vibe/commit/45314fba533f7ef920b6e325c29de6afe6a7bf22))\n\n\n\n\n\n## [0.5.2](https://github.com/mondaycom/vibe/compare/@vibe/mcp@0.5.1...@vibe/mcp@0.5.2) (2025-08-14)\n\n**Note:** Version bump only for package @vibe/mcp\n\n\n\n\n\n## [0.5.1](https://github.com/mondaycom/vibe/compare/@vibe/mcp@0.5.0...@vibe/mcp@0.5.1) (2025-08-12)\n\n\n### Bug Fixes\n\n* **TokenMetadataService:** fix missing colors in token tool ([#3046](https://github.com/mondaycom/vibe/issues/3046)) ([32dab41](https://github.com/mondaycom/vibe/commit/32dab41e1645bbc1e7c00853a32dad59f1bafb91))\n\n\n\n\n\n# [0.5.0](https://github.com/mondaycom/vibe/compare/@vibe/mcp@0.4.0...@vibe/mcp@0.5.0) (2025-08-05)\n\n\n### Features\n\n* **mcp:** implement token fetching with retry logic and categorize tokens ([#3035](https://github.com/mondaycom/vibe/issues/3035)) ([d0cc2b8](https://github.com/mondaycom/vibe/commit/d0cc2b8af8d350f13e7a503b0bf6e6547078d7d4))\n\n\n\n\n\n# [0.4.0](https://github.com/mondaycom/vibe/compare/@vibe/mcp@0.3.1...@vibe/mcp@0.4.0) (2025-08-04)\n\n\n### Features\n\n* **mcp:** add list-vibe-tokens tool for retrieving design tokens ([#3023](https://github.com/mondaycom/vibe/issues/3023)) ([1b3f2f1](https://github.com/mondaycom/vibe/commit/1b3f2f173affdca93870d394666da45f1f5836a0))\n\n\n\n\n\n## [0.3.1](https://github.com/mondaycom/vibe/compare/@vibe/mcp@0.3.0...@vibe/mcp@0.3.1) (2025-08-03)\n\n**Note:** Version bump only for package @vibe/mcp\n\n\n\n\n\n# [0.3.0](https://github.com/mondaycom/vibe/compare/@vibe/mcp@0.2.2...@vibe/mcp@0.3.0) (2025-06-08)\n\n\n### Features\n\n* **mcp:** add v3 migration tool ([#2916](https://github.com/mondaycom/vibe/issues/2916)) ([62b6d40](https://github.com/mondaycom/vibe/commit/62b6d403e5165b689245fd3300d1792110daf96f))\n\n\n\n\n\n## [0.2.2](https://github.com/mondaycom/vibe/compare/@vibe/mcp@0.2.1...@vibe/mcp@0.2.2) (2025-06-02)\n\n\n### Bug Fixes\n\n* **mcp:** update icon usage example ([#2919](https://github.com/mondaycom/vibe/issues/2919)) ([975fec6](https://github.com/mondaycom/vibe/commit/975fec6485d8ff3f2076e9beaca79876985b8407))\n\n\n\n\n\n## [0.2.1](https://github.com/mondaycom/vibe/compare/@vibe/mcp@0.2.0...@vibe/mcp@0.2.1) (2025-06-01)\n\n\n### Bug Fixes\n\n* **mcp:** readme ([#2913](https://github.com/mondaycom/vibe/issues/2913)) ([d864894](https://github.com/mondaycom/vibe/commit/d864894fb99471969d836db796a6a396653a5d2e))\n\n\n\n\n\n# [0.2.0](https://github.com/mondaycom/vibe/compare/@vibe/mcp@0.1.3...@vibe/mcp@0.2.0) (2025-05-29)\n\n\n### Features\n\n* **mcp:** Add \"Get component boilerplate\" tool ([#2901](https://github.com/mondaycom/vibe/issues/2901)) ([fc6d43e](https://github.com/mondaycom/vibe/commit/fc6d43eb33acbbb89f2eeed4f0e7bd20889e5f63))\n* **mcp:** add tool for icons  ([#2911](https://github.com/mondaycom/vibe/issues/2911)) ([ce4e817](https://github.com/mondaycom/vibe/commit/ce4e817bd06be874572c35efd5e2d9108808aea5))\n\n\n\n\n\n## [0.1.3](https://github.com/mondaycom/vibe/compare/@vibe/mcp@0.1.2...@vibe/mcp@0.1.3) (2025-05-25)\n\n\n### Bug Fixes\n\n* **mcp:** integrate metadata fetching from unpkg (with cache) instead of consuming @vibe/core ([#2905](https://github.com/mondaycom/vibe/issues/2905)) ([ef1dcd5](https://github.com/mondaycom/vibe/commit/ef1dcd59a8d0f3fff327658a8323ee92a2099312))\n\n\n\n\n\n## [0.1.2](https://github.com/mondaycom/vibe/compare/@vibe/mcp@0.1.1...@vibe/mcp@0.1.2) (2025-05-21)\n\n\n### Bug Fixes\n\n* **mcp:** handle metadata inside mcp instead of consuming @vibe/core as dep ([#2898](https://github.com/mondaycom/vibe/issues/2898)) ([9920a86](https://github.com/mondaycom/vibe/commit/9920a869204a077ef9924ed6c011f9b48417d8ce))\n\n\n\n\n\n## [0.1.1](https://github.com/mondaycom/vibe/compare/@vibe/mcp@0.1.0...@vibe/mcp@0.1.1) (2025-05-21)\n\n\n### Bug Fixes\n\n* **mcp:** fix tool call structure, fix bin for npx ([#2897](https://github.com/mondaycom/vibe/issues/2897)) ([5bdf744](https://github.com/mondaycom/vibe/commit/5bdf74450cd657b789d32fab4b1abdd2a1c5677e))\n\n\n\n\n\n# 0.1.0 (2025-05-20)\n\n\n### Features\n\n* **mcp:** add Model Context Protocol server for Vibe ecosystem ([#2894](https://github.com/mondaycom/vibe/issues/2894)) ([e0567c8](https://github.com/mondaycom/vibe/commit/e0567c8a4eb5fddd6bf5f4b785d4290e42a33730))\n"
  },
  {
    "path": "packages/mcp/LICENSE",
    "content": "MIT License\n\nCopyright (c) 2020 monday.com LTD\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "packages/mcp/README.md",
    "content": "# @vibe/mcp\n\nA Model Context Protocol (MCP) server for the Vibe Design System, enabling LLMs and other MCP clients to interact with Vibe component metadata, icon information, and perform migration analysis.\n\n## Usage\n\n### Connecting AI Clients\n\nConnect your AI client to the MCP server by following the instructions below.\n\n#### Cursor\n\n[![Install MCP Server](https://cursor.com/deeplink/mcp-install-light.svg)](https://cursor.com/en/install-mcp?name=vibe&config=eyJjb21tYW5kIjoibnB4IC15IEB2aWJlL21jcCJ9)\n\nOr manually update your Cursor MCP configuration file at `~/.cursor/mcp.json` (create it if it doesn't exist):\n\n```json\n{\n  \"mcpServers\": {\n    \"vibe\": {\n      \"command\": \"npx\",\n      \"args\": [\"@vibe/mcp\"]\n    }\n  }\n}\n```\n\n#### VSCode\n\nPaste this in your browser:\n\n```cli\nvscode://mcp-server/add?config=%7B%22name%22%3A%22vibe%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22%40vibe%2Fmcp%22%5D%7D\n```\n\nor manually update your VSCode MCP configuration file at `.vscode/mcp.json` (create it if it doesn't exist):\n\n```json\n{\n  \"servers\": {\n    \"vibe\": {\n      \"command\": \"npx\",\n      \"args\": [\"@vibe/mcp\"]\n    }\n  }\n}\n```\n\n### Tools\n\n#### Component Tools\n\n- `get-vibe-component-metadata`: Returns metadata for a specific Vibe component (or all components if no name is provided).\n- `list-vibe-public-components`: Get a list of all public @vibe/core & @vibe/core/next components names.\n- `get-vibe-component-examples`: Get React usage examples for Vibe components. Returns implementation examples and patterns for specific components or all components if none specified.\n- `get-vibe-component-accessibility`: Get accessibility requirements and guidelines for Vibe components. Returns structured accessibility information extracted from component documentation.\n\n#### Icon Tool\n\n- `list-vibe-icons`: Get a list of all available Vibe icons from the @vibe/icons package with their descriptions, categories, and tags. Supports optional filtering by text query, category, or tags, limiting results, and including React usage examples.\n\n#### Token Tool\n\n- `list-vibe-tokens`: Get a list of all available Vibe design tokens from the `@vibe/style` package. Supports optional filtering by text query, category, or limiting results. Returns token names, values, categories, and files, with optional CSS usage examples.\n\n#### Migration Tool\n\n- `v3-migration`: Evaluates your project for Vibe 2 to Vibe 3 migration needs according to the official migration guide. Conducts comprehensive project analysis, identifies breaking changes, and generates the necessary migration commands to resolve them.\n"
  },
  {
    "path": "packages/mcp/package.json",
    "content": "{\n  \"name\": \"@vibe/mcp\",\n  \"version\": \"4.0.0\",\n  \"description\": \"Vibe's MCP server to interact with the Vibe ecosystem\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/mondaycom/vibe.git\",\n    \"directory\": \"packages/mcp\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/mondaycom/vibe/issues\"\n  },\n  \"homepage\": \"https://github.com/mondaycom/vibe/tree/main/packages/mcp#readme\",\n  \"author\": \"monday.com\",\n  \"license\": \"MIT\",\n  \"type\": \"module\",\n  \"bin\": \"./dist/index.js\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"scripts\": {\n    \"test\": \"vitest --passWithNoTests\",\n    \"start\": \"node dist/index.js\",\n    \"clean\": \"rm -rf dist\",\n    \"build\": \"tsc && yarn run generate-boilerplate\",\n    \"debug\": \"npx @modelcontextprotocol/inspector node ./dist/index.js\",\n    \"generate-boilerplate\": \"yarn run extract-code-examples && yarn run extract-accessibility\",\n    \"extract-code-examples\": \"node scripts/extract-code-samples.js\",\n    \"extract-accessibility\": \"node scripts/extract-accessibility.js\"\n  },\n  \"dependencies\": {\n    \"@modelcontextprotocol/sdk\": \"^1.11.4\",\n    \"zod\": \"^3.24.4\"\n  },\n  \"devDependencies\": {\n    \"@types/node\": \"^20.0.0\",\n    \"prettier\": \"^3.3.2\",\n    \"vitest\": \"^1.6.0\"\n  }\n}\n"
  },
  {
    "path": "packages/mcp/scripts/extract-accessibility.js",
    "content": "import fs from \"fs\";\nimport path from \"path\";\nimport { fileURLToPath } from \"url\";\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\nconst componentsDir = path.join(__dirname, \"../../docs/src/pages/components/\");\nconst outputDir = path.join(__dirname, \"../dist/generated/accessibility/\");\n\nif (!fs.existsSync(outputDir)) {\n  fs.mkdirSync(outputDir, { recursive: true });\n}\n\nfunction getMdxFiles() {\n  const mdxFiles = [];\n\n  function traverseDirectory(dir) {\n    const entries = fs.readdirSync(dir, { withFileTypes: true });\n\n    for (const entry of entries) {\n      const fullPath = path.join(dir, entry.name);\n\n      if (entry.isDirectory()) {\n        // Recursively traverse subdirectories\n        traverseDirectory(fullPath);\n      } else if (entry.isFile()) {\n        // Check for MDX files\n        if (entry.name.endsWith(\".mdx\")) {\n          mdxFiles.push(path.relative(__dirname, fullPath));\n        }\n      }\n    }\n  }\n\n  traverseDirectory(componentsDir);\n  return mdxFiles;\n}\n\nfunction extractAccessibilityFromMdx(file) {\n  const inputFile = path.join(__dirname, file);\n  const inputFileComponentName = path.basename(inputFile).split(\".\")[0];\n  const outputFile = path.resolve(__dirname, outputDir, inputFileComponentName + \".md\");\n\n  const fileContent = fs.readFileSync(inputFile, \"utf-8\");\n\n  console.log(`Extracting accessibility for ${inputFileComponentName}`);\n\n  // Find accessibility section in MDX\n  const lines = fileContent.split(\"\\n\");\n  const accessibilityStartIndex = lines.findIndex(line => line.trim() === \"## Accessibility\");\n\n  if (accessibilityStartIndex === -1) {\n    console.log(`No accessibility section found in ${inputFileComponentName}`);\n    return;\n  }\n\n  // Find the next section (starts with ##)\n  let accessibilityEndIndex = lines.length;\n  for (let i = accessibilityStartIndex + 1; i < lines.length; i++) {\n    if (lines[i].trim().startsWith(\"##\")) {\n      accessibilityEndIndex = i;\n      break;\n    }\n  }\n\n  // Extract the accessibility section content (excluding the heading itself)\n  const accessibilityLines = lines.slice(accessibilityStartIndex + 1, accessibilityEndIndex);\n\n  // Clean up the content\n  let startIndex = 0;\n  let endIndex = accessibilityLines.length;\n\n  // Find first non-empty line\n  while (startIndex < accessibilityLines.length && accessibilityLines[startIndex].trim() === \"\") {\n    startIndex++;\n  }\n\n  // Find last non-empty line\n  while (endIndex > startIndex && accessibilityLines[endIndex - 1].trim() === \"\") {\n    endIndex--;\n  }\n\n  const rawContent = accessibilityLines.slice(startIndex, endIndex).join(\"\\n\");\n\n  // Clean up JSX/HTML content\n  const cleanContent = cleanUpAccessibilityContent(rawContent);\n\n  const markdown = `# ${inputFileComponentName} - Accessibility Requirements\\n\\n${cleanContent}`;\n\n  fs.writeFileSync(outputFile, markdown, \"utf-8\");\n  console.log(`Accessibility extracted for ${inputFileComponentName} at ${outputFile}`);\n}\n\nfunction cleanUpAccessibilityContent(content) {\n  // Extract guidelines from UsageGuidelines component\n  const guidelinesMatch = content.match(/guidelines=\\{(\\[[\\s\\S]*?\\])\\}/);\n\n  if (guidelinesMatch) {\n    const guidelinesArray = guidelinesMatch[1];\n\n    // Extract individual guideline strings\n    const guidelines = [];\n\n    // Match each guideline wrapped in <> ... </> or quotes\n    const guidelineMatches = guidelinesArray.match(/(?:<>[\\s\\S]*?<\\/>|\"[^\"]*\")/g);\n\n    if (guidelineMatches) {\n      guidelineMatches.forEach((match, index) => {\n        let cleanGuideline = match;\n\n        // Remove React fragments and JSX tags\n        cleanGuideline = cleanGuideline.replace(/<\\/?>/g, \"\"); // Remove <> and </>\n        cleanGuideline = cleanGuideline.replace(/<\\/?code>/g, \"`\"); // Replace <code> with backticks\n        cleanGuideline = cleanGuideline.replace(/^\\s*\"?(.+?)\"?\\s*,?\\s*$/, \"$1\"); // Remove quotes and trailing commas\n        cleanGuideline = cleanGuideline.trim();\n\n        // Skip empty guidelines and whitespace-only content\n        if (cleanGuideline && cleanGuideline.length > 0 && !/^\\s*$/.test(cleanGuideline)) {\n          guidelines.push(`${guidelines.length + 1}. ${cleanGuideline}`);\n        }\n      });\n    }\n\n    if (guidelines.length > 0) {\n      return guidelines.join(\"\\n\");\n    }\n  }\n\n  // Fallback: basic HTML/JSX cleanup\n  let cleaned = content;\n\n  // Remove common JSX components and HTML tags\n  cleaned = cleaned.replace(/<UsageGuidelines[\\s\\S]*?\\/>/g, \"\");\n  cleaned = cleaned.replace(/<\\/?code>/g, \"`\");\n  cleaned = cleaned.replace(/<\\/?>/g, \"\");\n  cleaned = cleaned.replace(/guidelines=\\{[\\s\\S]*?\\}/g, \"\");\n  cleaned = cleaned.replace(/^\\s*[\\[\\]{}(),]\\s*$/gm, \"\"); // Remove lines with just brackets/punctuation\n\n  // Clean up extra whitespace\n  cleaned = cleaned.replace(/\\n\\s*\\n\\s*\\n/g, \"\\n\\n\"); // Reduce multiple empty lines\n  cleaned = cleaned.trim();\n\n  return cleaned || \"No accessibility guidelines found in expected format.\";\n}\n\nfunction run() {\n  console.log(\"🔍 Extracting accessibility content from MDX files...\");\n\n  const mdxFiles = getMdxFiles();\n\n  if (mdxFiles.length === 0) {\n    console.log(\"⚠️  No MDX files found\");\n    return;\n  }\n\n  console.log(`📄 Found ${mdxFiles.length} MDX files to process`);\n\n  mdxFiles.forEach(file => {\n    extractAccessibilityFromMdx(file);\n  });\n\n  console.log(\"✅ Accessibility extraction completed!\");\n}\n\nrun();\n"
  },
  {
    "path": "packages/mcp/scripts/extract-code-samples.js",
    "content": "import fs from \"fs\";\nimport path from \"path\";\nimport parser from \"@babel/parser\";\nimport traverse from \"@babel/traverse\";\nimport generate from \"@babel/generator\";\nimport { fileURLToPath } from \"url\";\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\nconst componentsDir = path.join(__dirname, \"../../docs/src/pages/components/\");\nconst outputDir = path.join(__dirname, \"../dist/generated/\");\nif (!fs.existsSync(outputDir)) {\n  fs.mkdirSync(outputDir);\n}\n\nfunction getStoryFiles() {\n  const storyFiles = [];\n\n  function traverseDirectory(dir) {\n    const entries = fs.readdirSync(dir, { withFileTypes: true });\n\n    for (const entry of entries) {\n      const fullPath = path.join(dir, entry.name);\n\n      if (entry.isDirectory()) {\n        // Recursively traverse subdirectories\n        traverseDirectory(fullPath);\n      } else if (entry.isFile()) {\n        // Check for story files\n        if (entry.name.endsWith(\".stories.tsx\") || entry.name.endsWith(\".stories.js\")) {\n          storyFiles.push(path.relative(__dirname, fullPath));\n        }\n      }\n    }\n  }\n\n  traverseDirectory(componentsDir);\n  return storyFiles;\n}\n\nconst files = getStoryFiles();\n\nfunction generateCodeForOneLiner(ast, constName) {\n  let calleeCode = null;\n  traverse.default(ast, {\n    VariableDeclarator(path) {\n      if (path.node.id.name === constName) {\n        if (path.node.init?.callee?.name !== \"createComponentTemplate\") {\n          calleeCode = \"const \" + generate.default(path.node).code;\n        } else {\n          return (calleeCode = \"\");\n        }\n      }\n    }\n  });\n  return calleeCode;\n}\n\nfunction extractMarkdown(file) {\n  const inputFile = path.join(__dirname, file);\n  const inputFileComponentName = path.basename(inputFile).split(\".\")[0];\n  const outputFile = path.resolve(__dirname, outputDir, inputFileComponentName + \".md\");\n\n  const fileContent = fs.readFileSync(inputFile, \"utf-8\");\n\n  console.log(`Generating markdown for ${inputFileComponentName}`);\n\n  // Parse the file using Babel parser with TypeScript and JSX support\n  const ast = parser.parse(fileContent, {\n    sourceType: \"module\",\n    plugins: [\"typescript\", \"jsx\"]\n  });\n\n  let markdown = \"# Storybook Code Examples\\n\\n\";\n\n  let accordionTemplateCode = \"\";\n  traverse.default(ast, {\n    VariableDeclarator(path) {\n      // console.log(path.node);\n      if (path.node.id.name === \"accordionTemplate\" && path.node.init.type === \"ArrowFunctionExpression\") {\n        accordionTemplateCode = generate.default(path.node.init).code;\n      }\n    }\n  });\n\n  // Traverse the AST to find all exported story objects\n  traverse.default(ast, {\n    ExportNamedDeclaration(path) {\n      if (path.node.declaration && path.node.declaration.type === \"VariableDeclaration\") {\n        path.node.declaration.declarations.forEach(declarator => {\n          const storyName = declarator.id.name;\n          if (declarator.init && declarator.init.type === \"ObjectExpression\") {\n            let renderProp = null;\n            let nameProp = null;\n            let codeBlock = \"\";\n\n            // set name and render props\n            declarator.init.properties.forEach(prop => {\n              if (prop.key) {\n                if (prop.key.name === \"render\") {\n                  renderProp = prop.value;\n                }\n                if (prop.key.name === \"name\" && prop.value.type === \"StringLiteral\") {\n                  nameProp = prop.value.value;\n                }\n              }\n            });\n            if (renderProp) {\n              // If render is a function, generate its code\n              if (renderProp.type == \"ArrowFunctionExpression\") {\n                if (\n                  renderProp.body.type == \"JSXFragment\" ||\n                  renderProp.body.type == \"MemberExpression\" ||\n                  renderProp.body.type == \"JSXElement\"\n                ) {\n                  codeBlock = generate.default(renderProp.body).code;\n                } else if (renderProp.body.type == \"BlockStatement\") {\n                  codeBlock = renderProp.body.body.map(line => generate.default(line).code).join(\"\\n\");\n                } else {\n                  console.log(`${nameProp || storyName} is a ${renderProp.body.type}`);\n                  codeBlock = generate.default(renderProp.body).code;\n                }\n              } else if (renderProp.type == \"CallExpression\") {\n                // console.log(renderProp.callee.object.name);\n                const calleeName = renderProp.callee.object.name;\n                codeBlock = generateCodeForOneLiner(ast, calleeName);\n              } else {\n                console.log(`${nameProp || storyName} is a ${renderProp.type}`);\n              }\n            }\n            const displayName = nameProp || storyName;\n            if (codeBlock?.length > 0) {\n              markdown += `## ${displayName}\\n\\n\\`\\`\\`tsx\\n${codeBlock.trim()}\\n\\`\\`\\`\\n\\n`;\n            }\n          }\n        });\n      }\n    }\n  });\n\n  fs.writeFileSync(outputFile, markdown, \"utf-8\");\n  console.log(`Code samples generated for ${inputFileComponentName} at ${outputFile}`);\n}\n\nfunction run() {\n  files.forEach(file => {\n    extractMarkdown(file);\n  });\n}\n\nrun();\n"
  },
  {
    "path": "packages/mcp/src/index.ts",
    "content": "#!/usr/bin/env node\n\nimport { server, addServerTool } from \"./server/index.js\";\nimport { StdioServerTransport } from \"@modelcontextprotocol/sdk/server/stdio.js\";\nimport { getVibeComponentMetadataTool } from \"./server/tools/get-vibe-component-metadata.js\";\nimport { listVibePublicComponentsTool } from \"./server/tools/list-vibe-public-components.js\";\nimport { getVibeComponentExamples } from \"./server/tools/get-vibe-component-examples.js\";\nimport { getVibeComponentAccessibility } from \"./server/tools/get-vibe-component-accessibility.js\";\nimport { listVibeIconsTool } from \"./server/tools/list-vibe-icons.js\";\nimport { listVibeTokensTool } from \"./server/tools/list-vibe-tokens.js\";\nimport { v3MigrationTool } from \"./server/tools/v3-migration.js\";\nimport { dropdownMigrationTool } from \"./server/tools/dropdown-migration.js\";\nimport { v4MigrationTool } from \"./server/tools/v4-migration.js\";\n\nasync function main() {\n  const transport = new StdioServerTransport();\n  addServerTool(getVibeComponentMetadataTool);\n  addServerTool(listVibePublicComponentsTool);\n  addServerTool(getVibeComponentExamples);\n  addServerTool(getVibeComponentAccessibility);\n  addServerTool(listVibeIconsTool);\n  addServerTool(listVibeTokensTool);\n  addServerTool(v3MigrationTool);\n  addServerTool(dropdownMigrationTool);\n  addServerTool(v4MigrationTool);\n  await server.connect(transport);\n}\n\nmain().catch(() => {\n  process.exit(1);\n});\n"
  },
  {
    "path": "packages/mcp/src/server/index.ts",
    "content": "import { McpServer } from \"@modelcontextprotocol/sdk/server/mcp.js\";\nimport { z, ZodRawShape, ZodObject } from \"zod\";\n\nexport const server = new McpServer({\n  name: \"@vibe/mcp\",\n  version: \"0.0.1\",\n  capabilities: {\n    resources: {},\n    tools: {}\n  }\n});\n\ntype ExecuteResult = Promise<{\n  content: { type: \"text\"; text: string }[];\n  isError?: boolean;\n}>;\n\nexport interface MCPTool<T extends ZodRawShape> {\n  name: string;\n  description: string;\n  inputSchema: T;\n  execute: (input: z.infer<ZodObject<T>>) => ExecuteResult;\n}\n\nexport const addServerTool = (tool: MCPTool<any>) => {\n  server.tool(tool.name, tool.description, tool.inputSchema, tool.execute);\n};\n\nexport const getErrorMessage = (error: unknown): string => {\n  if (error instanceof Error) {\n    return error.message;\n  }\n  return String(error);\n};\n"
  },
  {
    "path": "packages/mcp/src/server/tools/dropdown-migration.ts",
    "content": "import { getErrorMessage, MCPTool } from \"../index.js\";\nimport { z } from \"zod\";\nimport { readFileSync, existsSync, readdirSync, statSync } from \"fs\";\nimport { join, resolve, extname } from \"path\";\n\nconst dropdownMigrationSchema = z.object({\n  projectPath: z.string().describe(\"Path to the project directory to analyze for Dropdown migration\")\n});\n\nexport const dropdownMigrationTool: MCPTool<typeof dropdownMigrationSchema.shape> = {\n  name: \"dropdown-migration\",\n  description:\n    \"Analyzes a project for migrating from old Dropdown to new Dropdown (Alpha) component based on the official migration guide. Helps identify usage patterns and provides migration steps.\",\n  inputSchema: dropdownMigrationSchema.shape,\n  execute: async input => {\n    try {\n      const { projectPath } = input;\n      const resolvedPath = resolve(projectPath);\n\n      if (!existsSync(resolvedPath)) {\n        return {\n          content: [\n            {\n              type: \"text\",\n              text: `Error: Project path \"${resolvedPath}\" does not exist.`\n            }\n          ],\n          isError: true\n        };\n      }\n\n      const projectInfo = {\n        targetDirectory: resolvedPath\n      };\n\n      const migrationData = getDropdownMigrationInstructions(projectInfo);\n      const analysis = await analyzeProject(resolvedPath);\n\n      const result = {\n        migrationGuide: migrationData,\n        projectInfo,\n        projectAnalysis: analysis,\n        recommendations: generateRecommendations(analysis, projectInfo)\n      };\n\n      return {\n        content: [\n          {\n            type: \"text\",\n            text: JSON.stringify(result, null, 2)\n          }\n        ]\n      };\n    } catch (e) {\n      const errorMessage = getErrorMessage(e);\n      return {\n        content: [\n          {\n            type: \"text\",\n            text: `Error in dropdown-migration-tool: ${errorMessage}`\n          }\n        ],\n        isError: true\n      };\n    }\n  }\n};\n\nfunction getDropdownMigrationInstructions(projectInfo: any) {\n  return {\n    overview: {\n      description: \"Migration from old Dropdown to new Dropdown (Alpha) component\",\n      keyChanges: [\n        \"Import path change: '@vibe/core' → '@vibe/core/next'\",\n        \"Option data structure: { id, text } → { value, label }\",\n        \"Built-in form field support (label, helperText, error, required)\",\n        \"Enhanced accessibility with ARIA attributes\",\n        \"Better TypeScript support with generics\",\n        \"Improved tooltip integration\",\n        \"Breaking changes in default behavior\"\n      ],\n      status: \"Alpha - Available under @vibe/core/next\"\n    },\n    benefits: {\n      accessibility: [\n        \"Proper ARIA attributes and keyboard navigation\",\n        \"Screen reader optimized with clear announcements\",\n        \"Single combobox role to avoid confusion\",\n        \"Improved focus management and visual indicators\"\n      ],\n      performance: [\n        \"Smaller bundle size (no react-select dependency)\",\n        \"Native implementation with optimized rendering\",\n        \"Improved performance for large datasets\",\n        \"Better memory usage with optimized re-renders\"\n      ],\n      developerExperience: [\n        \"Full generic type support with <Item> type parameter\",\n        \"Better type safety for options and callbacks\",\n        \"Comprehensive prop type definitions\",\n        \"IntelliSense improvements\"\n      ],\n      features: [\n        \"Built-in label, helper text, and error state support\",\n        \"Sticky group headers with stickyGroupTitle\",\n        \"Custom filtering with filterOption prop\",\n        \"Control selected options visibility with showSelectedOptions\",\n        \"Enhanced tooltip integration with tooltipProps\"\n      ]\n    },\n    migrationSteps: {\n      note: \"⚠️ IMPORTANT: The new Dropdown is in Alpha. Test thoroughly before production use.\",\n      steps: [\n        {\n          step: 1,\n          title: \"Analyze Current Dropdown Usage\",\n          action: \"Run this migration tool to understand current usage patterns\",\n          description: \"Identify all Dropdown components and their configuration in your project\",\n          important: \"Review the analysis results to understand the scope of changes needed\"\n        },\n        {\n          step: 2,\n          title: \"Update Import Statements\",\n          action: \"Import Dropdown from '@vibe/core'\",\n          example: \"import { Dropdown } from '@vibe/core';\",\n          description: \"In v4, the new Dropdown is the default export from @vibe/core. If you were using @vibe/core/next, update to @vibe/core.\",\n          command: \"Find and replace: 'from \\\"@vibe/core/next\\\"' → 'from \\\"@vibe/core\\\"' (for Dropdown imports)\"\n        },\n        {\n          step: 3,\n          title: \"Update Option Data Structure\",\n          action: \"Convert options from { id, text } to { value, label } format\",\n          description: \"The new Dropdown expects explicit 'label' and 'value' properties\",\n          important: \"This is a breaking change that requires manual updates to all option arrays\"\n        },\n        {\n          step: 4,\n          title: \"Update Form Integration\",\n          action: \"Replace external labels/helper text with built-in props\",\n          description: \"Use label, helperText, error, and required props instead of external elements\",\n          improvement: \"This provides better accessibility and form field semantics\"\n        },\n        {\n          step: 5,\n          title: \"Handle Breaking Changes\",\n          action: \"Review and update props that have changed behavior\",\n          description: \"Address searchable default change, showSelectedOptions behavior, and removed props\",\n          important: \"Pay special attention to searchable (now defaults to false) and removed props\"\n        },\n        {\n          step: 6,\n          title: \"Update Tooltip Integration\",\n          action: \"Replace tooltipContent with tooltipProps for enhanced tooltip support\",\n          description: \"The new implementation supports both dropdown-level and option-level tooltips\",\n          enhancement: \"More flexible tooltip configuration with full Tooltip component props\"\n        },\n        {\n          step: 7,\n          title: \"Testing and Validation\",\n          action: \"Thoroughly test all Dropdown functionality\",\n          description: \"Verify accessibility, keyboard navigation, form integration, and visual appearance\",\n          critical: \"Alpha status requires careful testing before production deployment\"\n        }\n      ]\n    },\n    breakingChanges: {\n      importPath: {\n        old: \"import { Dropdown } from '@vibe/core'; // v3 (react-select based)\",\n        new: \"import { Dropdown } from '@vibe/core'; // v4 (new implementation)\",\n        reason: \"The old react-select Dropdown has been removed in v4. The new Dropdown is now the default export.\"\n      },\n      optionStructure: {\n        old: \"{ id: 1, text: 'Option 1' }\",\n        new: \"{ value: 1, label: 'Option 1' }\",\n        reason: \"Explicit value and label properties for better type safety\"\n      },\n      searchableDefault: {\n        old: \"searchable defaults to true\",\n        new: \"searchable defaults to false\",\n        reason: \"Most dropdowns don't need search functionality\",\n        fix: \"Add searchable prop if search is needed\"\n      },\n      showSelectedOptions: {\n        old: \"Selected options always visible in list\",\n        new: \"showSelectedOptions defaults to true (selected options hidden by default in old Dropdown)\",\n        reason: \"Better UX by hiding already selected options\",\n        fix: \"Set showSelectedOptions={true} to restore old behavior if needed\"\n      },\n      removedProps: [\n        \"extraStyles\",\n        \"menuPortalTarget\",\n        \"isVirtualized\",\n        \"asyncOptions\",\n        \"cacheOptions\",\n        \"loadingMessage\",\n        \"onMenuScrollToBottom\",\n        \"captureMenuScroll\",\n        \"insideOverflowContainer\",\n        \"insideOverflowWithTransformContainer\",\n        \"insideLayerContext\",\n        \"popupsContainerSelector\",\n        \"tooltipContent\"\n      ],\n      newProps: [\n        \"label\",\n        \"helperText\",\n        \"error\",\n        \"required\",\n        \"stickyGroupTitle\",\n        \"showSelectedOptions\",\n        \"filterOption\",\n        \"tooltipProps\",\n        \"inputAriaLabel\",\n        \"menuAriaLabel\",\n        \"dir\"\n      ]\n    },\n    enhancedFeatures: {\n      typeScript: {\n        description: \"Full generic type support\",\n        example: \"<Dropdown<UserType> options={users} onChange={(user) => {...}} />\"\n      },\n      formIntegration: {\n        description: \"Built-in form field support\",\n        example: \"<Dropdown label='Select User' helperText='Choose from the list' required error={hasError} />\"\n      },\n      optionElements: {\n        description: \"Rich option structure with start/end elements\",\n        startElements: [\"avatar\", \"icon\", \"indent\", \"custom\"],\n        endElements: [\"icon\", \"suffix\", \"custom\"],\n        example:\n          \"{ value: 1, label: 'User', startElement: { type: 'avatar', value: 'user.jpg' }, endElement: { type: 'suffix', value: 'Admin' } }\"\n      },\n      tooltips: {\n        description: \"Enhanced tooltip support at dropdown and option level\",\n        example: \"tooltipProps={{ content: 'Help text', position: 'top' }}\"\n      }\n    }\n  };\n}\n\nasync function analyzeProject(projectPath: string) {\n  const analysis: any = {\n    dropdownUsage: null,\n    importAnalysis: null,\n    propUsage: null,\n    optionStructures: null,\n    potentialIssues: []\n  };\n\n  analysis.importAnalysis = await analyzeDropdownImports(projectPath);\n  analysis.dropdownUsage = await analyzeDropdownUsage(projectPath);\n  analysis.propUsage = await analyzePropUsage(projectPath);\n  analysis.optionStructures = await analyzeOptionStructures(projectPath);\n\n  return analysis;\n}\n\nasync function analyzeDropdownImports(projectPath: string): Promise<any> {\n  const importAnalysis: any = {\n    oldDropdownImports: [],\n    newDropdownImports: [],\n    mixedImports: [],\n    filesScanned: 0\n  };\n\n  try {\n    const files = await getAllTsFiles(projectPath);\n    importAnalysis.filesScanned = files.length;\n\n    for (const file of files) {\n      try {\n        const content = readFileSync(file, \"utf-8\");\n\n        const hasOldImport = content.includes(\"from '@vibe/core'\") && content.includes(\"Dropdown\");\n        const hasNewImport = content.includes(\"from '@vibe/core/next'\") && content.includes(\"Dropdown\");\n\n        if (hasOldImport && hasNewImport) {\n          importAnalysis.mixedImports.push(file);\n        } else if (hasOldImport) {\n          importAnalysis.oldDropdownImports.push(file);\n        } else if (hasNewImport) {\n          importAnalysis.newDropdownImports.push(file);\n        }\n      } catch (e) {\n        // Skip files that can't be read\n      }\n    }\n  } catch (e) {\n    importAnalysis.error = `Error scanning imports: ${getErrorMessage(e)}`;\n  }\n\n  return importAnalysis;\n}\n\nasync function analyzeDropdownUsage(projectPath: string): Promise<any> {\n  const dropdownUsage: any = {\n    dropdownComponents: [],\n    totalUsages: 0,\n    filesWithDropdowns: [],\n    filesScanned: 0\n  };\n\n  try {\n    const files = await getAllTsFiles(projectPath);\n    dropdownUsage.filesScanned = files.length;\n\n    for (const file of files) {\n      try {\n        const content = readFileSync(file, \"utf-8\");\n\n        const dropdownMatches = content.match(/<Dropdown\\s/g);\n        if (dropdownMatches) {\n          dropdownUsage.filesWithDropdowns.push(file);\n          dropdownUsage.totalUsages += dropdownMatches.length;\n        }\n      } catch (e) {\n        // Skip files that can't be read\n      }\n    }\n  } catch (e) {\n    dropdownUsage.error = `Error scanning Dropdown usage: ${getErrorMessage(e)}`;\n  }\n\n  return dropdownUsage;\n}\n\nasync function analyzePropUsage(projectPath: string): Promise<any> {\n  const propUsage: any = {\n    removedProps: {},\n    changedProps: {},\n    filesScanned: 0\n  };\n\n  const removedProps = [\n    \"extraStyles\",\n    \"menuPortalTarget\",\n    \"isVirtualized\",\n    \"asyncOptions\",\n    \"cacheOptions\",\n    \"loadingMessage\",\n    \"onMenuScrollToBottom\",\n    \"captureMenuScroll\",\n    \"insideOverflowContainer\",\n    \"insideOverflowWithTransformContainer\",\n    \"insideLayerContext\",\n    \"popupsContainerSelector\",\n    \"tooltipContent\"\n  ];\n\n  const changedProps = [\"searchable\", \"showSelectedOptions\"];\n\n  try {\n    const files = await getAllTsFiles(projectPath);\n    propUsage.filesScanned = files.length;\n\n    for (const file of files) {\n      try {\n        const content = readFileSync(file, \"utf-8\");\n\n        if (content.includes(\"<Dropdown\") || content.includes(\"Dropdown.\")) {\n          // Check for removed props\n          for (const prop of removedProps) {\n            if (content.includes(prop)) {\n              if (!propUsage.removedProps[prop]) {\n                propUsage.removedProps[prop] = [];\n              }\n              propUsage.removedProps[prop].push(file);\n            }\n          }\n\n          // Check for props with changed behavior\n          for (const prop of changedProps) {\n            if (content.includes(prop)) {\n              if (!propUsage.changedProps[prop]) {\n                propUsage.changedProps[prop] = [];\n              }\n              propUsage.changedProps[prop].push(file);\n            }\n          }\n        }\n      } catch (e) {\n        // Skip files that can't be read\n      }\n    }\n  } catch (e) {\n    propUsage.error = `Error scanning prop usage: ${getErrorMessage(e)}`;\n  }\n\n  return propUsage;\n}\n\nasync function analyzeOptionStructures(projectPath: string): Promise<any> {\n  const optionAnalysis: any = {\n    oldStructurePatterns: [],\n    newStructurePatterns: [],\n    unknownStructures: [],\n    filesScanned: 0\n  };\n\n  try {\n    const files = await getAllTsFiles(projectPath);\n    optionAnalysis.filesScanned = files.length;\n\n    for (const file of files) {\n      try {\n        const content = readFileSync(file, \"utf-8\");\n\n        // Look for common old structure patterns\n        if (content.includes(\"id:\") && content.includes(\"text:\")) {\n          optionAnalysis.oldStructurePatterns.push({\n            file,\n            pattern: \"{ id, text } structure detected\"\n          });\n        }\n\n        // Look for new structure patterns\n        if (content.includes(\"value:\") && content.includes(\"label:\")) {\n          optionAnalysis.newStructurePatterns.push({\n            file,\n            pattern: \"{ value, label } structure detected\"\n          });\n        }\n      } catch (e) {\n        // Skip files that can't be read\n      }\n    }\n  } catch (e) {\n    optionAnalysis.error = `Error scanning option structures: ${getErrorMessage(e)}`;\n  }\n\n  return optionAnalysis;\n}\n\nasync function getAllTsFiles(dir: string): Promise<string[]> {\n  const files: string[] = [];\n  const validExtensions = [\".ts\", \".tsx\", \".js\", \".jsx\"];\n\n  function scanDirectory(currentDir: string, depth = 0) {\n    if (depth > 5) return; // Prevent too deep recursion\n\n    try {\n      const entries = readdirSync(currentDir);\n\n      for (const entry of entries) {\n        if (entry.startsWith(\".\") || entry === \"node_modules\" || entry === \"dist\" || entry === \"build\") {\n          continue; // Skip hidden dirs and common build dirs\n        }\n\n        const fullPath = join(currentDir, entry);\n        try {\n          const stat = statSync(fullPath);\n\n          if (stat.isDirectory()) {\n            scanDirectory(fullPath, depth + 1);\n          } else if (stat.isFile() && validExtensions.includes(extname(entry))) {\n            files.push(fullPath);\n          }\n        } catch (e) {\n          // Skip if can't stat file\n        }\n      }\n    } catch (e) {\n      // Skip if can't read directory\n    }\n  }\n\n  scanDirectory(dir);\n  return files;\n}\n\nfunction generateRecommendations(analysis: any, projectInfo: any) {\n  const recommendations = [];\n\n  // Import recommendations\n  if (analysis.importAnalysis) {\n    const imports = analysis.importAnalysis;\n\n    if (imports.oldDropdownImports?.length > 0) {\n      recommendations.push({\n        type: \"import-migration\",\n        priority: \"high\",\n        action: \"Update Dropdown imports for v4\",\n        details: `Found ${imports.oldDropdownImports.length} files importing Dropdown from '@vibe/core'`,\n        files: imports.oldDropdownImports.slice(0, 10),\n        fix: \"The Dropdown API has changed in v4. Update usage to match the new API (see migration guide).\",\n        command: \"Find and replace in files with Dropdown imports\"\n      });\n    }\n\n    if (imports.mixedImports?.length > 0) {\n      recommendations.push({\n        type: \"mixed-imports\",\n        priority: \"medium\",\n        action: \"Resolve mixed import patterns\",\n        details: `Found ${imports.mixedImports.length} files with both old and new Dropdown imports`,\n        files: imports.mixedImports,\n        fix: \"Consolidate to use only '@vibe/core/next' imports\"\n      });\n    }\n\n    if (imports.newDropdownImports?.length > 0) {\n      recommendations.push({\n        type: \"already-migrated-imports\",\n        priority: \"info\",\n        message: `${imports.newDropdownImports.length} files already using new Dropdown imports`\n      });\n    }\n  }\n\n  // Usage recommendations\n  if (analysis.dropdownUsage) {\n    const usage = analysis.dropdownUsage;\n\n    if (usage.totalUsages > 0) {\n      recommendations.push({\n        type: \"dropdown-usage-found\",\n        priority: \"info\",\n        message: `Found ${usage.totalUsages} Dropdown components across ${usage.filesWithDropdowns?.length} files`,\n        files: usage.filesWithDropdowns?.slice(0, 10)\n      });\n    }\n  }\n\n  // Prop usage recommendations\n  if (analysis.propUsage) {\n    const props = analysis.propUsage;\n\n    Object.entries(props.removedProps || {}).forEach(([prop, files]: [string, any]) => {\n      recommendations.push({\n        type: \"removed-prop\",\n        priority: \"high\",\n        action: `Remove or replace '${prop}' prop`,\n        details: `Found ${files.length} files using removed prop '${prop}'`,\n        files: files.slice(0, 5),\n        fix: getRemovedPropFix(prop)\n      });\n    });\n\n    Object.entries(props.changedProps || {}).forEach(([prop, files]: [string, any]) => {\n      recommendations.push({\n        type: \"changed-prop\",\n        priority: \"medium\",\n        action: `Review '${prop}' prop usage`,\n        details: `Found ${files.length} files using '${prop}' - behavior has changed`,\n        files: files.slice(0, 5),\n        fix: getChangedPropFix(prop)\n      });\n    });\n  }\n\n  // Option structure recommendations\n  if (analysis.optionStructures) {\n    const options = analysis.optionStructures;\n\n    if (options.oldStructurePatterns?.length > 0) {\n      recommendations.push({\n        type: \"option-structure\",\n        priority: \"high\",\n        action: \"Update option data structure\",\n        details: `Found ${options.oldStructurePatterns.length} files with old { id, text } option structure`,\n        files: options.oldStructurePatterns.map((p: any) => p.file).slice(0, 10),\n        fix: \"Convert options from { id, text } format to { value, label } format\",\n        example: \"{ id: 1, text: 'Option 1' } → { value: 1, label: 'Option 1' }\"\n      });\n    }\n\n    if (options.newStructurePatterns?.length > 0) {\n      recommendations.push({\n        type: \"already-migrated-options\",\n        priority: \"info\",\n        message: `${options.newStructurePatterns.length} files already using new { value, label } option structure`\n      });\n    }\n  }\n\n  // General migration recommendations\n  recommendations.push({\n    type: \"form-integration\",\n    priority: \"medium\",\n    action: \"Consider upgrading to built-in form integration\",\n    details: \"Replace external labels/helper text with built-in label, helperText, error, and required props\",\n    benefits: [\"Better accessibility\", \"Improved form field semantics\", \"Consistent styling\"]\n  });\n\n  recommendations.push({\n    type: \"searchable-default\",\n    priority: \"medium\",\n    action: \"Review searchable prop usage\",\n    details: \"New Dropdown defaults to searchable=false (old default was true)\",\n    fix: \"Add 'searchable' prop if search functionality is needed\",\n    warning: \"This is a breaking change in default behavior\"\n  });\n\n  recommendations.push({\n    type: \"tooltip-enhancement\",\n    priority: \"low\",\n    action: \"Upgrade tooltip integration\",\n    details: \"Replace 'tooltipContent' with 'tooltipProps' for enhanced tooltip support\",\n    benefits: [\"Option-level tooltips\", \"Full Tooltip component props support\", \"Better positioning\"]\n  });\n\n  recommendations.push({\n    type: \"testing\",\n    priority: \"critical\",\n    action: \"Thorough testing required\",\n    details: [\n      \"Test all Dropdown functionality after migration\",\n      \"Verify accessibility and keyboard navigation\",\n      \"Check form integration and validation\",\n      \"Test with different option structures\",\n      \"Verify tooltip behavior\",\n      \"Test multi-select functionality\"\n    ],\n    warning: \"⚠️ New Dropdown is in Alpha - extensive testing required before production use\"\n  });\n\n  recommendations.push({\n    type: \"alpha-warning\",\n    priority: \"critical\",\n    action: \"Alpha release considerations\",\n    details: [\n      \"New Dropdown is currently in Alpha status\",\n      \"API may change before stable release\",\n      \"Not recommended for production without thorough testing\",\n      \"Will eventually replace current Dropdown in main package\"\n    ],\n    suggestion: \"Consider migrating incrementally, starting with non-critical components\"\n  });\n\n  return recommendations;\n}\n\nfunction getRemovedPropFix(prop: string): string {\n  const fixes: { [key: string]: string } = {\n    extraStyles: \"Use CSS classes instead of extraStyles\",\n    menuPortalTarget: \"Handled automatically with better positioning\",\n    isVirtualized: \"Built-in performance optimization, remove prop\",\n    asyncOptions: \"Use external data fetching with options prop\",\n    cacheOptions: \"Handle caching externally\",\n    loadingMessage: \"Use helperText with loading indicator\",\n    onMenuScrollToBottom: \"Use onScroll instead\",\n    captureMenuScroll: \"Handled automatically, remove prop\",\n    insideOverflowContainer: \"Handled automatically, remove prop\",\n    insideOverflowWithTransformContainer: \"Handled automatically, remove prop\",\n    insideLayerContext: \"Handled automatically, remove prop\",\n    popupsContainerSelector: \"Handled automatically, remove prop\",\n    tooltipContent: \"Replace with tooltipProps for enhanced tooltip support\"\n  };\n  return fixes[prop] || \"Check migration guide for replacement\";\n}\n\nfunction getChangedPropFix(prop: string): string {\n  const fixes: { [key: string]: string } = {\n    searchable: \"Now defaults to false. Add 'searchable' prop if search is needed\",\n    showSelectedOptions: \"Behavior changed. Review if current behavior meets your needs\"\n  };\n  return fixes[prop] || \"Check migration guide for behavior changes\";\n}\n"
  },
  {
    "path": "packages/mcp/src/server/tools/get-vibe-component-accessibility.ts",
    "content": "import { z } from \"zod\";\nimport { getErrorMessage, MCPTool } from \"../index.js\";\nimport fs from \"fs/promises\";\nimport path from \"path\";\nimport { fileURLToPath } from \"url\";\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\nconst ComponentNameParamsSchema = z.object({\n  componentName: z\n    .string()\n    .describe(\"The name of the component to get accessibility requirements for (e.g., Button, Checkbox, TextField)\")\n});\n\nexport const getVibeComponentAccessibility: MCPTool<typeof ComponentNameParamsSchema.shape> = {\n  name: \"get-vibe-component-accessibility\",\n  description:\n    \"Get accessibility requirements and guidelines for Vibe components. Returns structured accessibility information extracted from component documentation.\",\n  inputSchema: ComponentNameParamsSchema.shape,\n  execute: async (input: z.infer<typeof ComponentNameParamsSchema>) => {\n    const { componentName } = input;\n\n    if (!componentName) {\n      return {\n        content: [\n          {\n            type: \"text\",\n            text: \"Error: componentName is required\"\n          }\n        ],\n        isError: true\n      };\n    }\n\n    try {\n      // Read from pre-generated accessibility file\n      const accessibilityFilePath = path.resolve(\n        __dirname,\n        \"../../../dist/generated/accessibility/\",\n        `${componentName}.md`\n      );\n\n      let accessibilityContent: string;\n      try {\n        accessibilityContent = await fs.readFile(accessibilityFilePath, \"utf-8\");\n      } catch (readError) {\n        return {\n          content: [\n            {\n              type: \"text\",\n              text: `Error: Could not find accessibility documentation for component \"${componentName}\". Expected file: ${accessibilityFilePath}`\n            }\n          ],\n          isError: true\n        };\n      }\n\n      return {\n        content: [\n          {\n            type: \"text\",\n            text: accessibilityContent\n          }\n        ]\n      };\n    } catch (e) {\n      const message = getErrorMessage(e);\n      return {\n        content: [\n          {\n            type: \"text\",\n            text: `Error retrieving accessibility requirements for ${componentName}: ${message}`\n          }\n        ],\n        isError: true\n      };\n    }\n  }\n};\n"
  },
  {
    "path": "packages/mcp/src/server/tools/get-vibe-component-examples.ts",
    "content": "import { z } from \"zod\";\nimport { getErrorMessage, MCPTool } from \"../index.js\";\nimport fs from \"fs/promises\";\nimport path from \"path\";\nimport { fileURLToPath } from \"url\";\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\nconst ComponentNameParamsSchema = z.object({\n  componentName: z\n    .string()\n    .optional()\n    .describe(\n      \"Optional. The name of the component to get examples for (e.g., Button, TextField). If omitted, returns examples for all components.\"\n    )\n});\n\nexport const getVibeComponentExamples: MCPTool<typeof ComponentNameParamsSchema.shape> = {\n  name: \"get-vibe-component-examples\",\n  description:\n    \"Get React usage examples for Vibe components. Returns implementation examples and patterns for specific components or all components if none specified.\",\n  inputSchema: ComponentNameParamsSchema.shape,\n  execute: async (input: z.infer<typeof ComponentNameParamsSchema>) => {\n    const { componentName } = input;\n    try {\n      const contextFilePath = path.resolve(__dirname, \"../../../dist/generated/\", `${componentName}.md`);\n      const contextFileContents = await fs.readFile(contextFilePath, \"utf-8\");\n      return {\n        content: [\n          { type: \"text\", text: componentName ?? \"\" },\n          { type: \"text\", text: contextFileContents }\n        ]\n      };\n    } catch (e) {\n      const message = (e instanceof Error ? e.message : e) || \"Failed to get code samples\";\n      return {\n        content: [\n          {\n            type: \"text\",\n            text: `Error in getComponentExampleCode: ${message}`\n          }\n        ],\n        isError: true\n      };\n    }\n  }\n};\n"
  },
  {
    "path": "packages/mcp/src/server/tools/get-vibe-component-metadata.ts",
    "content": "import { z } from \"zod\";\nimport { getErrorMessage, MCPTool } from \"../index.js\";\nimport { MetadataService } from \"./metadata-service.js\";\n\nconst ComponentNameParamsSchema = z.object({\n  componentName: z.string().describe(\"The name of the public Vibe component to get metadata for.\")\n});\n\nexport const getVibeComponentMetadataTool: MCPTool<typeof ComponentNameParamsSchema.shape> = {\n  name: \"get-vibe-component-metadata\",\n  description: \"Get the metadata for a specific @vibe/core/next or @vibe/core component.\",\n  inputSchema: ComponentNameParamsSchema.shape,\n  execute: async (input: z.infer<typeof ComponentNameParamsSchema>): Promise<any> => {\n    const { componentName } = input;\n    try {\n      const allMetadata = await MetadataService.getMetadata();\n      const componentMatches = allMetadata.filter(component => component.displayName === componentName);\n\n      if (componentMatches.length === 0) {\n        return {\n          content: [\n            { type: \"text\", text: `Error in getVibeComponentMetadata: Component '${componentName}' not found.` }\n          ],\n          isError: true\n        };\n      }\n\n      // Prefer the 'next' version if it exists among matches\n      const nextComponent = componentMatches.find(component => component.aggregator === \"next\");\n      const result = nextComponent || componentMatches[0]; // Fallback to the first match\n\n      return {\n        content: [\n          {\n            type: \"text\",\n            text: JSON.stringify(result, null, 2)\n          }\n        ]\n      };\n    } catch (e) {\n      const errorMessage =\n        getErrorMessage(e) || `Failed to get metadata${componentName ? ` for ${componentName}` : \"\"}`;\n\n      return {\n        content: [{ type: \"text\", text: `Error in getVibeComponentMetadata: ${errorMessage}` }],\n        isError: true\n      };\n    }\n  }\n};\n"
  },
  {
    "path": "packages/mcp/src/server/tools/icon-metadata-service.ts",
    "content": "import { exec } from \"child_process\";\nimport { promisify } from \"util\";\nimport { createContext, runInContext } from \"vm\";\n\nconst execAsync = promisify(exec);\n\ninterface IconMetadata {\n  name: string;\n  file: string;\n  description: string;\n  tags: string;\n  category?: string[];\n  ignore?: boolean;\n}\n\nexport class IconMetadataService {\n  private static readonly UNPKG_URL = \"https://unpkg.com/@vibe/icons@latest/dist/iconsMetaData.js\";\n  private static cachedIconMetadata: IconMetadata[] | null = null;\n\n  static async getIconMetadata(): Promise<IconMetadata[]> {\n    if (this.cachedIconMetadata) {\n      return this.cachedIconMetadata;\n    }\n\n    try {\n      const metadata = await this.fetchWithRetry();\n      this.cachedIconMetadata = metadata;\n      return metadata;\n    } catch (error) {\n      throw new Error(\n        \"Unable to fetch icon metadata from remote sources. Please check your internet connection and try again.\"\n      );\n    }\n  }\n\n  private static async fetchWithRetry(): Promise<IconMetadata[]> {\n    // Try fetch first\n    try {\n      const response = await fetch(this.UNPKG_URL);\n\n      if (!response.ok) {\n        throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n      }\n\n      const jsCode = await response.text();\n\n      // Extract the icon data from the JavaScript module\n      // The new format is: const e=\"Basic\",t=\"Platform\",i=\"View\";var o=[...];export{o as default}\n      return this.parseJavaScriptModule(jsCode);\n    } catch (fetchError) {\n      // Fallback to curl for corporate networks\n      try {\n        const { stdout } = await execAsync(`curl -s -L \"${this.UNPKG_URL}\"`);\n\n        // Parse the JavaScript module output from curl\n        return this.parseJavaScriptModule(stdout);\n      } catch (curlError) {\n        throw fetchError; // Re-throw original fetch error\n      }\n    }\n  }\n\n  private static parseJavaScriptModule(jsCode: string): IconMetadata[] {\n    // Try the new format first: const e=\"Basic\",t=\"Platform\",i=\"View\";var o=[...];export{o as default}\n    const newFormatMatch = jsCode.match(/^const ([^;]+);var o=(\\[.*?\\]);export\\{o as default\\}/s);\n    if (newFormatMatch) {\n      const constantsString = newFormatMatch[1];\n      const arrayCode = newFormatMatch[2];\n\n      // Parse the constants - format: e=\"Basic\",t=\"Platform\",i=\"View\"\n      const constantsMap = new Map();\n      const constantPairs = constantsString.split(\",\");\n\n      for (const pair of constantPairs) {\n        const [variable, value] = pair.split(\"=\");\n        if (variable && value) {\n          const varName = variable.trim();\n          const varValue = value.trim().replace(/^\"(.*)\"$/, \"$1\"); // Remove quotes\n          constantsMap.set(varName, varValue);\n        }\n      }\n\n      // Create a safe evaluation environment by creating a function that returns the array\n      // We'll replace the variables with their actual values in the function body\n      let evalCode = arrayCode;\n\n      // Replace variable references with their actual values\n      // We need to be careful to only replace variables in array contexts, not inside strings\n      for (const [varName, varValue] of constantsMap) {\n        // Replace variables that appear in array contexts like category:[t] or category:[e,t,i]\n        const arrayContextRegex = new RegExp(`\\\\[([^\\\\]]*\\\\b${varName}\\\\b[^\\\\]]*)\\\\]`, \"g\");\n        evalCode = evalCode.replace(arrayContextRegex, (match, content) => {\n          const replacedContent = content.replace(new RegExp(`\\\\b${varName}\\\\b`, \"g\"), `\"${varValue}\"`);\n          return `[${replacedContent}]`;\n        });\n      }\n\n      // Replace JavaScript boolean shorthand: !0 = true, !1 = false\n      evalCode = evalCode.replace(/!0\\b/g, \"true\");\n      evalCode = evalCode.replace(/!1\\b/g, \"false\");\n\n      try {\n        // Use vm.runInContext for safer evaluation of the JavaScript array\n        // This avoids the JSON parsing issues with unquoted property names\n        const context = createContext({});\n        const result = runInContext(`(${evalCode})`, context);\n        return result;\n      } catch (evalError) {\n        throw new Error(\"Unable to parse icon metadata from JavaScript module\");\n      }\n    }\n\n    throw new Error(\"Unable to parse icon metadata from JavaScript module - unknown format\");\n  }\n}\n"
  },
  {
    "path": "packages/mcp/src/server/tools/list-vibe-icons.ts",
    "content": "import { z } from \"zod\";\nimport { getErrorMessage, MCPTool } from \"../index.js\";\nimport { IconMetadataService } from \"./icon-metadata-service.js\";\n\nconst SearchIconsParamsSchema = z.object({\n  query: z.string().optional().describe(\"Text to search for in icon names, descriptions, or tags\"),\n  category: z.string().optional().describe(\"Filter by category: 'Basic', 'Platform', or 'View'\"),\n  limit: z.number().optional().describe(\"Maximum number of results to return (default: 20)\"),\n  includeUsageExamples: z.boolean().optional().describe(\"Include React usage examples in the results (default: false)\")\n});\n\nexport const listVibeIconsTool: MCPTool<typeof SearchIconsParamsSchema.shape> = {\n  name: \"list-vibe-icons\",\n  description:\n    \"Get a list of all available Vibe icons from the @vibe/icons package. Supports optional filtering by text query, category, or tags. Returns icon names, descriptions, categories, and tags, with optional usage examples.\",\n  inputSchema: SearchIconsParamsSchema.shape,\n  execute: async (input: z.infer<typeof SearchIconsParamsSchema>): Promise<any> => {\n    const { query, category, limit, includeUsageExamples = false } = input;\n\n    try {\n      const allIcons = await IconMetadataService.getIconMetadata();\n      let filteredIcons = allIcons;\n\n      // Filter by category if provided\n      if (category) {\n        const normalizedCategory = category.charAt(0).toUpperCase() + category.slice(1).toLowerCase();\n        filteredIcons = filteredIcons.filter(icon => icon.category && icon.category.includes(normalizedCategory));\n      }\n\n      // Filter by text query if provided\n      if (query) {\n        const searchTerm = query.toLowerCase();\n        filteredIcons = filteredIcons.filter(\n          icon =>\n            icon.name.toLowerCase().includes(searchTerm) ||\n            icon.description.toLowerCase().includes(searchTerm) ||\n            icon.tags.toLowerCase().includes(searchTerm)\n        );\n      }\n\n      // Apply limit (default to 20 when filtering, unlimited when listing all)\n      const shouldApplyLimit = query || category || limit !== undefined;\n      const effectiveLimit = shouldApplyLimit ? limit || 20 : filteredIcons.length;\n      const limitedIcons = filteredIcons.slice(0, effectiveLimit);\n\n      // Format results\n      const formattedResults = limitedIcons.map(icon => {\n        const baseResult = {\n          name: icon.name,\n          description: icon.description,\n          category: icon.category || [],\n          tags: icon.tags.split(\", \").map(tag => tag.trim()),\n          file: icon.file\n        };\n\n        // Add usage examples if requested\n        if (includeUsageExamples) {\n          return {\n            ...baseResult,\n            importPath: \"@vibe/icons\",\n            usageExamples: {\n              \"Import Icon Component\": `import { Icon } from \"@vibe/core\";`,\n              \"Import Icon\": `import { ${icon.name} } from \"@vibe/icons\";`,\n              \"Basic Usage\": `<Icon icon={${icon.name}} />`,\n              \"With Props\": `<Icon icon={${icon.name}} size={24} label=\"${icon.description}\" />`\n            }\n          };\n        }\n\n        return baseResult;\n      });\n\n      const result = {\n        searchParams: {\n          query: query || null,\n          category: category || null,\n          limit: effectiveLimit,\n          includeUsageExamples\n        },\n        totalFound: filteredIcons.length,\n        showing: limitedIcons.length,\n        icons: formattedResults\n      };\n\n      return {\n        content: [\n          {\n            type: \"text\",\n            text: JSON.stringify(result, null, 2)\n          }\n        ]\n      };\n    } catch (e) {\n      const errorMessage = getErrorMessage(e) || `Failed to list vibe icons`;\n\n      return {\n        content: [{ type: \"text\", text: `Error in list-vibe-icons: ${errorMessage}` }],\n        isError: true\n      };\n    }\n  }\n};\n"
  },
  {
    "path": "packages/mcp/src/server/tools/list-vibe-public-components.ts",
    "content": "import { getErrorMessage, MCPTool } from \"../index.js\";\nimport { MetadataService } from \"./metadata-service.js\";\n\nexport const listVibePublicComponentsTool: MCPTool<{}> = {\n  name: \"list-vibe-public-components\",\n  description:\n    \"Get a list of all public @vibe/core & @vibe/core/next components names. Use this tool to get the names of components to use in the get-vibe-component-metadata tool.\",\n  inputSchema: {},\n  execute: async () => {\n    try {\n      const allMetadata = await MetadataService.getMetadata();\n      const componentNames = allMetadata.map(component => component.displayName);\n      // Remove duplicates if a component has a next version\n      const uniqueComponentNames = [...new Set(componentNames)];\n      \n      return {\n        content: [\n          {\n            type: \"text\",\n            text: JSON.stringify(uniqueComponentNames, null, 2)\n          }\n        ]\n      };\n    } catch (e) {\n      const errorMessage = getErrorMessage(e) || `Failed to list published components`;\n\n      return {\n        content: [\n          {\n            type: \"text\",\n            text: `Error in list-vibe-public-components: ${errorMessage}`\n          }\n        ],\n        isError: true\n      };\n    }\n  }\n};\n"
  },
  {
    "path": "packages/mcp/src/server/tools/list-vibe-tokens.ts",
    "content": "import { z } from \"zod\";\nimport { getErrorMessage, MCPTool } from \"../index.js\";\nimport { TokenMetadataService } from \"./token-metadata-service.js\";\n\nconst SearchTokensParamsSchema = z.object({\n  query: z.string().optional().describe(\"Text to search for in token names or values\"),\n  category: z\n    .string()\n    .optional()\n    .describe(\n      \"Filter by category: 'Spacing', 'Typography', 'Border Radius', 'Borders', 'Motion', or color themes like 'Colors (Light)'\"\n    ),\n  limit: z.number().optional().describe(\"Maximum number of results to return (default: 50)\"),\n  includeUsageExamples: z.boolean().optional().describe(\"Include CSS usage examples in the results (default: false)\")\n});\n\nexport const listVibeTokensTool: MCPTool<typeof SearchTokensParamsSchema.shape> = {\n  name: \"list-vibe-tokens\",\n  description:\n    \"Get a list of all available Vibe design tokens from the @vibe/style package. Supports optional filtering by text query, category, or limiting results. Returns token names, values, categories, and files, with optional CSS usage examples.\",\n  inputSchema: SearchTokensParamsSchema.shape,\n  execute: async (input: z.infer<typeof SearchTokensParamsSchema>): Promise<any> => {\n    const { query, category, limit, includeUsageExamples = false } = input;\n\n    try {\n      const allTokens = await TokenMetadataService.getTokenMetadata();\n      let filteredTokens = allTokens;\n\n      // Filter by category if provided\n      if (category) {\n        const normalizedCategory = category.toLowerCase();\n        filteredTokens = filteredTokens.filter(token => token.category.toLowerCase().includes(normalizedCategory));\n      }\n\n      // Filter by text query if provided\n      if (query) {\n        const searchTerm = query.toLowerCase();\n        filteredTokens = filteredTokens.filter(\n          token =>\n            token.name.toLowerCase().includes(searchTerm) ||\n            token.value.toLowerCase().includes(searchTerm) ||\n            (token.description && token.description.toLowerCase().includes(searchTerm))\n        );\n      }\n\n      // Apply limit (default to 50 when filtering, unlimited when listing all)\n      const shouldApplyLimit = query || category || limit !== undefined;\n      const effectiveLimit = shouldApplyLimit ? limit || 50 : filteredTokens.length;\n      const limitedTokens = filteredTokens.slice(0, effectiveLimit);\n\n      // Group tokens by category for better organization\n      const tokensByCategory = limitedTokens.reduce(\n        (acc, token) => {\n          if (!acc[token.category]) {\n            acc[token.category] = [];\n          }\n          acc[token.category].push(token);\n          return acc;\n        },\n        {} as Record<string, typeof limitedTokens>\n      );\n\n      // Format results\n      const formattedResults = Object.entries(tokensByCategory).map(([categoryName, tokens]) => ({\n        category: categoryName,\n        count: tokens.length,\n        tokens: tokens.map(token => {\n          const baseResult = {\n            name: token.name,\n            value: token.value,\n            description: token.description,\n            file: token.file\n          };\n\n          // Add usage examples if requested\n          if (includeUsageExamples) {\n            return {\n              ...baseResult,\n              usageExamples: {\n                \"CSS Custom Property\": `${token.name}: ${token.value};`,\n                \"CSS Usage\": `color: var(${token.name});`,\n                \"SCSS Usage\": `$my-variable: var(${token.name});`,\n                \"CSS Modules\": `.myClass { color: var(${token.name}); }`\n              }\n            };\n          }\n\n          return baseResult;\n        })\n      }));\n\n      const result = {\n        searchParams: {\n          query: query || null,\n          category: category || null,\n          limit: effectiveLimit,\n          includeUsageExamples\n        },\n        totalFound: filteredTokens.length,\n        showing: limitedTokens.length,\n        categoriesFound: Object.keys(tokensByCategory).length,\n        tokensByCategory: formattedResults,\n        availableCategories: [...new Set(allTokens.map(token => token.category))].sort()\n      };\n\n      return {\n        content: [\n          {\n            type: \"text\",\n            text: JSON.stringify(result, null, 2)\n          }\n        ]\n      };\n    } catch (e) {\n      const errorMessage = getErrorMessage(e) || `Failed to list vibe tokens`;\n\n      return {\n        content: [{ type: \"text\", text: `Error in list-vibe-tokens: ${errorMessage}` }],\n        isError: true\n      };\n    }\n  }\n};\n"
  },
  {
    "path": "packages/mcp/src/server/tools/metadata-service.ts",
    "content": "import { exec } from \"child_process\";\nimport { promisify } from \"util\";\n\nconst execAsync = promisify(exec);\n\ninterface ComponentMetadata {\n  displayName: string;\n  aggregator?: string;\n  [key: string]: any;\n}\n\nexport class MetadataService {\n  private static readonly UNPKG_URL = \"https://unpkg.com/@vibe/core@latest/dist/metadata.json\";\n  private static cachedMetadata: ComponentMetadata[] | null = null;\n\n  static async getMetadata(): Promise<ComponentMetadata[]> {\n    if (this.cachedMetadata) {\n      console.error(\"[Vibe MCP] Using cached metadata\");\n      return this.cachedMetadata;\n    }\n\n    try {\n      console.error(\"[Vibe MCP] Fetching metadata from unpkg...\");\n      const metadata = await this.fetchWithRetry();\n      console.error(`[Vibe MCP] Fetched ${metadata.length} components, caching for session`);\n      this.cachedMetadata = metadata;\n      return metadata;\n    } catch (error) {\n      console.error(\"[Vibe MCP] Failed to fetch metadata:\", error);\n      console.error(\"[Vibe MCP] Returning empty array as fallback\");\n      return [];\n    }\n  }\n\n  private static async fetchWithRetry(): Promise<ComponentMetadata[]> {\n    // Try fetch first\n    try {\n      const response = await fetch(this.UNPKG_URL);\n      \n      if (!response.ok) {\n        throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n      }\n      \n      return await response.json();\n    } catch (fetchError) {\n      console.error(\"[Vibe MCP] Fetch failed (likely corporate proxy/SSL), trying curl fallback...\");\n      \n      // Fallback to curl for corporate networks\n      try {\n        const { stdout } = await execAsync(`curl -s -L \"${this.UNPKG_URL}\"`);\n        return JSON.parse(stdout);\n      } catch (curlError) {\n        console.error(\"[Vibe MCP] Curl fallback also failed:\", curlError);\n        throw fetchError; // Re-throw original fetch error\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/mcp/src/server/tools/token-metadata-service.ts",
    "content": "import { exec } from \"child_process\";\nimport { promisify } from \"util\";\n\nconst execAsync = promisify(exec);\n\nexport interface TokenMetadata {\n  name: string;\n  value: string;\n  category: string;\n  description?: string;\n  file: string;\n}\n\nexport class TokenMetadataService {\n  private static tokenCache: TokenMetadata[] | null = null;\n  private static readonly TOKENS_URL = \"https://unpkg.com/@vibe/style@latest/dist/index.css\";\n\n  /**\n   * Get all design tokens from the style package\n   */\n  static async getTokenMetadata(): Promise<TokenMetadata[]> {\n    if (this.tokenCache) {\n      return this.tokenCache;\n    }\n\n    try {\n      console.error(\"[Vibe MCP] Fetching tokens from unpkg...\");\n      const cssContent = await this.fetchWithRetry();\n      const tokens = this.parseTokensFromContent(cssContent);\n      console.error(`[Vibe MCP] Parsed ${tokens.length} tokens, caching for session`);\n      this.tokenCache = tokens;\n      return tokens;\n    } catch (error) {\n      console.error(\"[Vibe MCP] Failed to fetch tokens:\", error);\n      console.error(\"[Vibe MCP] Returning empty array as fallback\");\n      return [];\n    }\n  }\n\n  /**\n   * Fetch CSS content from remote URL with retry logic\n   */\n  private static async fetchWithRetry(): Promise<string> {\n    // Try fetch first\n    try {\n      const response = await fetch(this.TOKENS_URL);\n\n      if (!response.ok) {\n        throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n      }\n\n      return await response.text();\n    } catch (fetchError) {\n      console.error(\"[Vibe MCP] Fetch failed (likely corporate proxy/SSL), trying curl fallback...\");\n\n      // Fallback to curl for corporate networks\n      try {\n        const { stdout } = await execAsync(`curl -s -L \"${this.TOKENS_URL}\"`);\n        return stdout;\n      } catch (curlError) {\n        console.error(\"[Vibe MCP] Curl fallback also failed:\", curlError);\n        throw fetchError; // Re-throw original fetch error\n      }\n    }\n  }\n\n  /**\n   * Parse CSS custom properties from CSS content\n   */\n  private static parseTokensFromContent(content: string): TokenMetadata[] {\n    const tokens: TokenMetadata[] = [];\n    const lines = content.split(\"\\n\");\n\n    // Regex to match CSS custom properties: --variable-name: value; (with optional inline comments)\n    const tokenRegex = /^\\s*--([a-zA-Z0-9-_]+):\\s*([^;]+);?\\s*(?:\\/\\*.*?\\*\\/)?\\s*$/;\n    const commentRegex = /^\\s*\\/\\*\\s*(.+?)\\s*\\*\\/\\s*$/;\n\n    let currentComment = \"\";\n\n    for (let i = 0; i < lines.length; i++) {\n      const line = lines[i].trim();\n\n      // Check for CSS comments that might describe the next token\n      const commentMatch = line.match(commentRegex);\n      if (commentMatch) {\n        currentComment = commentMatch[1];\n        continue;\n      }\n\n      // Check for CSS custom property\n      const tokenMatch = line.match(tokenRegex);\n      if (tokenMatch) {\n        const [, name, value] = tokenMatch;\n        const category = this.categorizeToken(name);\n\n        tokens.push({\n          name: `--${name}`,\n          value: value.trim(),\n          category,\n          description: currentComment || undefined,\n          file: \"index.css\"\n        });\n\n        // Clear comment after using it\n        currentComment = \"\";\n      } else if (line && !line.startsWith(\"/*\") && !line.endsWith(\"*/\") && !line.includes(\"{\") && !line.includes(\"}\")) {\n        // Clear comment if we hit a non-empty, non-comment line that's not a token\n        currentComment = \"\";\n      }\n    }\n\n    return tokens;\n  }\n\n  /**\n   * Categorize tokens based on their name patterns\n   */\n  private static categorizeToken(tokenName: string): string {\n    // Remove the -- prefix and convert to lowercase for pattern matching\n    const name = tokenName.toLowerCase().replace(/^--/, \"\");\n\n    // Motion tokens - start with motion-\n    if (name.startsWith(\"motion-\")) {\n      return \"Motion\";\n    }\n\n    // Spacing tokens - start with spacing- or space-\n    if (name.startsWith(\"spacing-\") || name.startsWith(\"space-\")) {\n      return \"Spacing\";\n    }\n\n    // Typography tokens - start with font- or letter-spacing-\n    if (name.startsWith(\"font-\") || name.startsWith(\"letter-spacing-\")) {\n      return \"Typography\";\n    }\n\n    // Border radius tokens\n    if (name.startsWith(\"border-radius-\")) {\n      return \"Border Radius\";\n    }\n\n    // Shadow tokens\n    if (name.startsWith(\"box-shadow-\")) {\n      return \"Shadows\";\n    }\n\n    // Color tokens - simplified to just check if \"color\" is included\n    if (name.includes(\"color\")) {\n      return \"Colors\";\n    }\n\n    // Animation/transition related\n    if (name.includes(\"animation\") || name.includes(\"transition\") || name.includes(\"timing\")) {\n      return \"Motion\";\n    }\n\n    // Default category\n    return \"Otherww\";\n  }\n\n  /**\n   * Clear the cache (useful for testing or development)\n   */\n  static clearCache(): void {\n    this.tokenCache = null;\n  }\n}\n"
  },
  {
    "path": "packages/mcp/src/server/tools/v3-migration.ts",
    "content": "import { getErrorMessage, MCPTool } from \"../index.js\";\nimport { z } from \"zod\";\nimport { readFileSync, existsSync, readdirSync, statSync } from \"fs\";\nimport { join, resolve, extname } from \"path\";\n\nconst migrationGuideSchema = z.object({\n  projectPath: z.string().describe(\"Path to the project directory to analyze for migration\")\n});\n\nexport const v3MigrationTool: MCPTool<typeof migrationGuideSchema.shape> = {\n  name: \"v3-migration\",\n  description:\n    \"Analyzes a project for Vibe 2 to Vibe 3 migration requirements based on the official migration guide. Generates migration commands using tsx and jsx file extensions.\",\n  inputSchema: migrationGuideSchema.shape,\n  execute: async input => {\n    try {\n      const { projectPath } = input;\n      const resolvedPath = resolve(projectPath);\n\n      if (!existsSync(resolvedPath)) {\n        return {\n          content: [\n            {\n              type: \"text\",\n              text: `Error: Project path \"${resolvedPath}\" does not exist.`\n            }\n          ],\n          isError: true\n        };\n      }\n\n      const projectInfo = {\n        targetDirectory: resolvedPath\n      };\n\n      const migrationData = getMigrationInstructions(projectInfo);\n      const analysis = await analyzeProject(resolvedPath);\n\n      const result = {\n        migrationGuide: migrationData,\n        projectInfo,\n        projectAnalysis: analysis,\n        recommendations: generateRecommendations(analysis, projectInfo)\n      };\n\n      return {\n        content: [\n          {\n            type: \"text\",\n            text: JSON.stringify(result, null, 2)\n          }\n        ]\n      };\n    } catch (e) {\n      const errorMessage = getErrorMessage(e);\n      return {\n        content: [\n          {\n            type: \"text\",\n            text: `Error in vibe-migration-tool: ${errorMessage}`\n          }\n        ],\n        isError: true\n      };\n    }\n  }\n};\n\nfunction getMigrationInstructions(projectInfo: any) {\n  return {\n    overview: {\n      description: \"Vibe 3 is a major update introducing new features, enhancements, and breaking changes\",\n      keyChanges: [\n        \"Package rename: monday-ui-react-core → @vibe/core + @vibe/icons\",\n        \"Enhanced TypeScript support\",\n        \"Improved prop type-checking with string literals\",\n        \"Better layering of floating components in modals\"\n      ]\n    },\n    packageChanges: {\n      remove: [\"monday-ui-react-core\"],\n      add: [\"@vibe/core\", \"@vibe/icons@^1.7.2\"],\n      description: \"Main package rename from monday-ui-react-core to @vibe/core and @vibe/icons\"\n    },\n    importChanges: {\n      cssImports: {\n        from: \"monday-ui-react-core/dist/main.css\",\n        to: \"@vibe/core/tokens\"\n      },\n      iconImports: {\n        from: \"monday-ui-style/src/Icons\",\n        to: \"@vibe/icons/raw\"\n      },\n      nextComponents: {\n        from: \"monday-ui-react-core/next\",\n        to: \"@vibe/core\",\n        components: [\"Heading\", \"EditableHeading\", \"Search\"]\n      },\n      storybookComponents: {\n        from: \"monday-ui-react-core/storybookComponents\",\n        to: \"vibe-storybook-components\"\n      }\n    },\n    removedComponents: [\n      { name: \"Input\", replacement: \"TextField\" },\n      { name: \"EditableInput\", replacement: \"EditableText\" },\n      { name: \"SearchComponent\", replacement: \"Search\" },\n      { name: \"ResponsiveList\", replacement: \"useIsOverflowing hook\" }\n    ],\n    breakingChanges: {\n      Button: {\n        changes: [\"children prop now required\", \"sm/md/lg sizes renamed to small/medium/large\"],\n        sizeMapping: { sm: \"small\", md: \"medium\", lg: \"large\" }\n      },\n      Chips: {\n        changes: [\"DARK_INDIGO and BLACKISH colors removed\", \"clickable/isClickable props removed, use onClick\"],\n        behaviorChanges: [\"Use onClick prop for clickable behavior instead of clickable prop\"]\n      },\n      Counter: {\n        changes: [\"sm/md/lg sizes renamed to small/medium/large\"],\n        sizeMapping: { sm: \"small\", md: \"medium\", lg: \"large\" }\n      },\n      Icon: {\n        changes: [\"clickable and onClick props removed\"],\n        replacement: \"Use IconButton for clickable icons\"\n      },\n      Modal: {\n        changes: [\"hideCloseButton removed\", \"unmountOnClose default changed to true\"],\n        behaviorChanges: [\"Modal will not render when show is false by default\"]\n      },\n      Search: {\n        changes: [\n          \"Component completely rewritten with new API\",\n          \"type prop removed (SQUARE, ROUND, UNDERLINE variants no longer available)\",\n          \"validation prop removed\",\n          \"wrapperClassName prop removed (use className instead)\",\n          \"setRef prop removed (use ref instead)\",\n          \"iconNames prop removed\",\n          \"iconName renamed to searchIconName\",\n          \"secondaryIconName renamed to clearIconName\",\n          \"activeDescendant renamed to currentAriaResultId\",\n          \"debounceRate default changed from 200 to 400\",\n          \"Size values changed from Search.sizes.SMALL/MEDIUM/LARGE to 'small'/'medium'/'large'\"\n        ],\n        renamedProps: {\n          iconName: \"searchIconName\",\n          secondaryIconName: \"clearIconName\",\n          activeDescendant: \"currentAriaResultId\"\n        },\n        removedProps: [\"type\", \"validation\", \"wrapperClassName\", \"setRef\", \"iconNames\"],\n        newProps: {\n          clearIconLabel: \"Accessibility label for clear button (defaults to 'Clear')\",\n          renderAction: \"Render additional action button in right section\",\n          hideRenderActionOnInput: \"Hide action when input has text\",\n          ariaExpanded: \"ARIA expanded state for popups\",\n          ariaHasPopup: \"ARIA popup type\",\n          onClear: \"Callback when clear button clicked\",\n          onKeyDown: \"Keyboard event handler\",\n          showClearIcon: \"Control clear button visibility (defaults to true)\"\n        },\n        behaviorChanges: [\"debounceRate default changed from 200 to 400\"],\n        note: \"Import from @vibe/core instead of monday-ui-react-core/next\"\n      },\n      TextField: {\n        changes: [\"requiredAsterisk prop removed\", \"sm/md/lg sizes renamed\", \"readonly style updated\"],\n        sizeMapping: { sm: \"small\", md: \"medium\", lg: \"large\" }\n      },\n      Tooltip: {\n        changes: [\n          \"paddingSize, justify, arrowPosition props removed\",\n          \"theme limited to dark/primary\",\n          \"position limited to top/right/bottom/left\"\n        ],\n        behaviorChanges: [\n          \"showOnDialogEnter default changed to true\",\n          \"addKeyboardHideShowTriggersByDefault default changed to true\"\n        ]\n      },\n      Dropdown: {\n        changes: [\"xxs, xs sizes removed (use small)\", \"new readonly style\"]\n      },\n      MenuButton: {\n        changes: [\"hideWhenReferenceHidden default changed to true\"]\n      },\n      Steps: {\n        changes: [\"isOnPrimary prop removed, use color='primary'\"]\n      },\n      Tabs: {\n        changes: [\"browser default margin/padding reset for ul/li elements\"]\n      },\n      Tipseen: {\n        changes: [\n          \"content prop now mandatory\",\n          \"default color changed from 'primary' to 'inverted'\",\n          \"showDelay default changed to 100\",\n          \"justify prop removed\"\n        ]\n      }\n    },\n    iconChanges: {\n      removed: [\"Upgrade\"],\n      renamed: [\n        { from: \"Featured\", to: \"Upgrade\" },\n        { from: \"Replay\", to: \"Reply\" }\n      ]\n    },\n    migrationSteps: {\n      note: \"⚠️ IMPORTANT: Follow these steps sequentially. Complete each step fully before proceeding to the next.\",\n      steps: [\n        {\n          step: 1,\n          title: \"Analyze Project\",\n          action: \"Run detailed analysis to understand what needs to be migrated\",\n          description:\n            \"Use this migration tool with 'detailed' analysis type to understand the scope of changes needed\",\n          details: [\n            \"Check package.json dependencies\",\n            \"Scan for old imports and component usage\",\n            \"Identify breaking changes that need manual attention\",\n            \"Review the analysis results and recommendations\"\n          ],\n          important: \"Understanding what needs to change before starting will save time and prevent issues\",\n          note: \"This analysis is already being performed by this tool - review the results carefully\"\n        },\n        {\n          step: 2,\n          title: \"Update Package Dependencies\",\n          action: \"Install @vibe/core and @vibe/icons, remove monday-ui-react-core\",\n          command: \"yarn add @vibe/core @vibe/icons && yarn remove monday-ui-react-core\",\n          description: \"This step updates your package.json and installs the new Vibe 3 packages\",\n          important:\n            \"Do NOT proceed to step 3 until this completes successfully and you verify the packages are installed\"\n        },\n        {\n          step: 3,\n          title: \"Run Automated Migration\",\n          action: `Run migration script: npx @vibe/codemod -m v3 --target \"${projectInfo.targetDirectory}\" --extensions tsx jsx -y`,\n          command: `npx @vibe/codemod -m v3 --target \"${projectInfo.targetDirectory}\" --extensions tsx jsx -y`,\n          description:\n            \"This automated script will handle most import and component transformations. The -y flag skips git confirmation since this tool already manages the process.\",\n          important: \"Let this script complete fully before making any manual changes\",\n          parameters: {\n            target: projectInfo.targetDirectory,\n            note: \"File extensions are auto-detected from your provided project path\"\n          }\n        },\n        {\n          step: 4,\n          title: \"Manual Review and Fixes\",\n          action: \"Review and apply manual changes for breaking changes\",\n          description: \"Check for components and props that require manual intervention\",\n          important: \"Use the breaking changes analysis from this tool to identify what needs manual fixes\"\n        },\n        {\n          step: 5,\n          title: \"Testing\",\n          action: \"Test application\",\n          description: \"Run tests and verify all functionality\",\n          important: \"Do not consider migration complete until all features work correctly\"\n        },\n        {\n          step: 6,\n          title: \"Migration Summary & Next Steps\",\n          action: \"Review migration completion and consider additional improvements\",\n          description: \"Congratulations! You've successfully migrated to Vibe 3. Consider these optional next steps:\",\n          nextSteps: [\n            {\n              title: \"Code Formatting (Optional)\",\n              description: \"Format your code according to your project's settings\",\n              userAction: \"Run your project's formatter if desired (e.g., 'npm run format' or 'yarn format')\",\n              note: \"Check your package.json scripts for available formatting commands\"\n            },\n            {\n              title: \"Show Your Support ⭐\",\n              description: \"If this migration helped you, consider giving the Vibe Design System a star!\",\n              action: \"Visit https://github.com/mondaycom/vibe and click the ⭐ Star button\",\n              note: \"Your support helps us continue improving the developer experience\"\n            }\n          ],\n          important:\n            \"🎉 Migration to Vibe 3 is now complete! Your application should be running with all the latest improvements.\"\n        }\n      ]\n    }\n  };\n}\n\nasync function analyzeProject(projectPath: string) {\n  const analysis: any = {\n    packageJsonAnalysis: null,\n    importAnalysis: null,\n    componentUsage: null,\n    potentialIssues: []\n  };\n\n  const packageJsonPath = join(projectPath, \"package.json\");\n  if (existsSync(packageJsonPath)) {\n    try {\n      const packageJson = JSON.parse(readFileSync(packageJsonPath, \"utf-8\"));\n      analysis.packageJsonAnalysis = analyzePackageJson(packageJson);\n    } catch (e) {\n      analysis.potentialIssues.push(`Could not parse package.json: ${getErrorMessage(e)}`);\n    }\n  }\n\n  analysis.importAnalysis = await analyzeImports(projectPath);\n  analysis.componentUsage = await analyzeComponentUsage(projectPath);\n\n  return analysis;\n}\n\nfunction analyzePackageJson(packageJson: any) {\n  const dependencies = { ...packageJson.dependencies, ...packageJson.devDependencies };\n  const hasOldPackage = !!dependencies[\"monday-ui-react-core\"];\n  const hasNewPackage = !!dependencies[\"@vibe/core\"];\n  const hasMondayUIStyle = !!dependencies[\"monday-ui-style\"];\n  const hasVibeIcons = !!dependencies[\"@vibe/icons\"];\n\n  return {\n    hasOldPackage,\n    hasNewPackage,\n    hasMondayUIStyle,\n    hasVibeIcons,\n    currentVersion: dependencies[\"monday-ui-react-core\"] || \"not found\",\n    newVersion: dependencies[\"@vibe/core\"] || \"not installed\",\n    iconsVersion: dependencies[\"@vibe/icons\"] || \"not installed\",\n    migrationStatus: hasNewPackage ? \"migrated\" : hasOldPackage ? \"needs-migration\" : \"not-using-vibe\"\n  };\n}\n\nasync function analyzeImports(projectPath: string): Promise<any> {\n  const importIssues: any = {\n    oldCSSImports: [],\n    oldIconImports: [],\n    nextComponentImports: [],\n    storybookImports: [],\n    filesScanned: 0\n  };\n\n  try {\n    const files = await getAllTsFiles(projectPath);\n    importIssues.filesScanned = files.length;\n\n    for (const file of files) {\n      try {\n        const content = readFileSync(file, \"utf-8\");\n\n        // Check for old CSS imports\n        if (content.includes(\"monday-ui-react-core/dist/main.css\")) {\n          importIssues.oldCSSImports.push(file);\n        }\n\n        // Check for old icon imports\n        if (content.includes(\"monday-ui-style/src/Icons\")) {\n          importIssues.oldIconImports.push(file);\n        }\n\n        // Check for next component imports\n        if (content.includes(\"monday-ui-react-core/next\")) {\n          importIssues.nextComponentImports.push(file);\n        }\n\n        // Check for storybook imports\n        if (content.includes(\"monday-ui-react-core/storybookComponents\")) {\n          importIssues.storybookImports.push(file);\n        }\n      } catch (e) {\n        // Skip files that can't be read\n      }\n    }\n  } catch (e) {\n    importIssues.error = `Error scanning files: ${getErrorMessage(e)}`;\n  }\n\n  return importIssues;\n}\n\nasync function analyzeComponentUsage(projectPath: string): Promise<any> {\n  const componentUsage: any = {\n    removedComponents: {},\n    breakingChangeComponents: {},\n    iconUsage: {},\n    filesScanned: 0\n  };\n\n  const removedComponents = [\"Input\", \"EditableInput\", \"SearchComponent\", \"ResponsiveList\"];\n  const breakingChangeComponents = [\n    \"Button\",\n    \"Chips\",\n    \"Counter\",\n    \"Icon\",\n    \"Modal\",\n    \"Search\",\n    \"TextField\",\n    \"Tooltip\",\n    \"Dropdown\"\n  ];\n  const removedIcons = [\"Upgrade\"];\n  const renamedIcons = [\"Featured\", \"Replay\"];\n\n  try {\n    const files = await getAllTsFiles(projectPath);\n    componentUsage.filesScanned = files.length;\n\n    for (const file of files) {\n      try {\n        const content = readFileSync(file, \"utf-8\");\n\n        // Check for removed components\n        for (const component of removedComponents) {\n          if (content.includes(`<${component}`) || content.includes(`${component}.`)) {\n            if (!componentUsage.removedComponents[component]) {\n              componentUsage.removedComponents[component] = [];\n            }\n            componentUsage.removedComponents[component].push(file);\n          }\n        }\n\n        // Check for components with breaking changes\n        for (const component of breakingChangeComponents) {\n          if (content.includes(`<${component}`) || content.includes(`${component}.`)) {\n            if (!componentUsage.breakingChangeComponents[component]) {\n              componentUsage.breakingChangeComponents[component] = [];\n            }\n            componentUsage.breakingChangeComponents[component].push(file);\n          }\n        }\n\n        // Check for icon usage\n        for (const icon of [...removedIcons, ...renamedIcons]) {\n          if (content.includes(icon)) {\n            if (!componentUsage.iconUsage[icon]) {\n              componentUsage.iconUsage[icon] = [];\n            }\n            componentUsage.iconUsage[icon].push(file);\n          }\n        }\n      } catch (e) {\n        // Skip files that can't be read\n      }\n    }\n  } catch (e) {\n    componentUsage.error = `Error scanning files: ${getErrorMessage(e)}`;\n  }\n\n  return componentUsage;\n}\n\nasync function getAllTsFiles(dir: string): Promise<string[]> {\n  const files: string[] = [];\n  const validExtensions = [\".ts\", \".tsx\", \".js\", \".jsx\"];\n\n  function scanDirectory(currentDir: string, depth = 0) {\n    if (depth > 5) return; // Prevent too deep recursion\n\n    try {\n      const entries = readdirSync(currentDir);\n\n      for (const entry of entries) {\n        if (entry.startsWith(\".\") || entry === \"node_modules\" || entry === \"dist\" || entry === \"build\") {\n          continue; // Skip hidden dirs and common build dirs\n        }\n\n        const fullPath = join(currentDir, entry);\n        try {\n          const stat = statSync(fullPath);\n\n          if (stat.isDirectory()) {\n            scanDirectory(fullPath, depth + 1);\n          } else if (stat.isFile() && validExtensions.includes(extname(entry))) {\n            files.push(fullPath);\n          }\n        } catch (e) {\n          // Skip if can't stat file\n        }\n      }\n    } catch (e) {\n      // Skip if can't read directory\n    }\n  }\n\n  scanDirectory(dir);\n  return files;\n}\n\nfunction generateRecommendations(analysis: any, projectInfo: any) {\n  const recommendations = [];\n\n  if (analysis.packageJsonAnalysis) {\n    const pkg = analysis.packageJsonAnalysis;\n\n    if (pkg.migrationStatus === \"needs-migration\") {\n      recommendations.push({\n        type: \"package-migration\",\n        priority: \"high\",\n        action: \"Update package.json dependencies\",\n        command: \"yarn add @vibe/core @vibe/icons && yarn remove monday-ui-react-core\",\n        details: \"This is the first and most important step in the migration process\"\n      });\n    }\n\n    if (pkg.migrationStatus === \"migrated\") {\n      recommendations.push({\n        type: \"already-migrated\",\n        priority: \"info\",\n        message: \"Package dependencies appear to be already migrated to Vibe 3\"\n      });\n    }\n\n    if (pkg.hasOldPackage && !pkg.hasVibeIcons) {\n      recommendations.push({\n        type: \"missing-icons\",\n        priority: \"medium\",\n        action: \"Install @vibe/icons package\",\n        command: \"yarn add @vibe/icons\",\n        details: \"Icons have been moved to a separate package\"\n      });\n    }\n  }\n\n  if (analysis.importAnalysis) {\n    const imports = analysis.importAnalysis;\n\n    if (imports.oldCSSImports?.length > 0) {\n      recommendations.push({\n        type: \"css-imports\",\n        priority: \"high\",\n        action: \"Update CSS imports\",\n        details: `Found ${imports.oldCSSImports.length} files with old CSS imports`,\n        files: imports.oldCSSImports.slice(0, 5),\n        fix: \"Replace 'monday-ui-react-core/dist/main.css' with '@vibe/core/tokens'\"\n      });\n    }\n\n    if (imports.oldIconImports?.length > 0) {\n      recommendations.push({\n        type: \"icon-imports\",\n        priority: \"high\",\n        action: \"Update icon imports\",\n        details: `Found ${imports.oldIconImports.length} files with old icon imports`,\n        files: imports.oldIconImports.slice(0, 5),\n        fix: \"Replace 'monday-ui-style/src/Icons' with '@vibe/icons/raw'\"\n      });\n    }\n  }\n\n  // Component usage recommendations\n  if (analysis.componentUsage) {\n    const usage = analysis.componentUsage;\n\n    Object.entries(usage.removedComponents || {}).forEach(([component, files]: [string, any]) => {\n      recommendations.push({\n        type: \"removed-component\",\n        priority: \"high\",\n        action: `Replace ${component} component`,\n        details: `Found ${files.length} files using removed component ${component}`,\n        files: files.slice(0, 5),\n        fix: getComponentReplacement(component)\n      });\n    });\n\n    Object.entries(usage.breakingChangeComponents || {}).forEach(([component, files]: [string, any]) => {\n      recommendations.push({\n        type: \"breaking-change\",\n        priority: \"medium\",\n        action: `Review ${component} usage`,\n        details: `Found ${files.length} files using ${component} - check for breaking changes`,\n        files: files.slice(0, 5),\n        fix: getBreakingChangeDetails(component)\n      });\n    });\n  }\n\n  recommendations.push({\n    type: \"migration-script\",\n    priority: \"high\",\n    action: \"Run automated migration script\",\n    command: `npx @vibe/codemod -m v3 --target \"${projectInfo.targetDirectory}\" --extensions tsx jsx -y`,\n    details:\n      \"This will handle most of the automated transformations. The -y flag auto-confirms to proceed with git changes.\",\n    warning: \"⚠️ ONLY run this AFTER completing package dependency updates (step 2)\",\n    parameters: {\n      target: projectInfo.targetDirectory,\n      note: \"Uses tsx and jsx file extensions for migration\"\n    }\n  });\n\n  recommendations.push({\n    type: \"manual-review\",\n    priority: \"medium\",\n    action: \"Manual review and fixes\",\n    details: \"Review breaking changes and apply manual fixes\",\n    warning: \"⚠️ ONLY do manual changes AFTER the automated migration script completes (step 3)\"\n  });\n\n  recommendations.push({\n    type: \"testing\",\n    priority: \"high\",\n    action: \"Thorough testing required\",\n    details: [\n      \"Test all components with breaking changes\",\n      \"Verify styling and behavior changes\",\n      \"Check floating components in modals\",\n      \"Test keyboard navigation with tooltips\",\n      \"Verify prop changes work correctly\"\n    ],\n    warning: \"⚠️ ONLY test AFTER completing manual fixes (step 4)\"\n  });\n\n  recommendations.push({\n    type: \"sequential-steps\",\n    priority: \"critical\",\n    action: \"Follow migration steps in order\",\n    details: \"Use the migrationSteps guide to follow the process sequentially\",\n    warning: \"🚨 DO NOT skip steps or work on multiple steps simultaneously\"\n  });\n\n  // Add post-migration recommendations\n  recommendations.push({\n    type: \"formatting\",\n    priority: \"info\",\n    action: \"Format code according to your project settings\",\n    details: \"Run your project's formatting commands after migration is complete\",\n    examples: [\"npm run format\", \"yarn format\", \"npm run lint:fix\"],\n    note: \"Check your package.json scripts for available formatting commands\"\n  });\n\n  recommendations.push({\n    type: \"github-star\",\n    priority: \"info\",\n    action: \"Show your support with a GitHub star ⭐\",\n    details: \"If this migration tool helped you, consider starring the Vibe repository\",\n    link: \"https://github.com/mondaycom/vibe\",\n    note: \"Your support helps us continue improving the developer experience\"\n  });\n\n  return recommendations;\n}\n\nfunction getComponentReplacement(component: string): string {\n  const replacements: { [key: string]: string } = {\n    Input: \"Use TextField instead\",\n    EditableInput: \"Use EditableText instead\",\n    SearchComponent: \"Use Search instead\",\n    ResponsiveList: \"Use useIsOverflowing hook instead\"\n  };\n  return replacements[component] || \"Check migration guide for replacement\";\n}\n\nfunction getBreakingChangeDetails(component: string): string {\n  const details: { [key: string]: string } = {\n    Button: \"Check size props (sm/md/lg → small/medium/large), ensure children prop is provided\",\n    Chips: \"Replace clickable prop with onClick, check removed colors\",\n    Counter: \"Check size props (sm/md/lg → small/medium/large)\",\n    Icon: \"Replace clickable icons with IconButton component\",\n    Modal: \"Remove hideCloseButton usage, check unmountOnClose behavior\",\n    Search:\n      \"Component rewritten with new API - type/validation/wrapperClassName/setRef/iconNames props removed, iconName→searchIconName, secondaryIconName→clearIconName, activeDescendant→currentAriaResultId, debounceRate default 200→400, size values now strings\",\n    TextField: \"Check size props, remove requiredAsterisk usage\",\n    Tooltip: \"Remove paddingSize, justify, arrowPosition props, check theme/position values\"\n  };\n  return details[component] || \"Check migration guide for specific changes\";\n}\n"
  },
  {
    "path": "packages/mcp/src/server/tools/v4-migration.ts",
    "content": "import { getErrorMessage, MCPTool } from \"../index.js\";\nimport { z } from \"zod\";\nimport { readFileSync, existsSync, readdirSync, statSync } from \"fs\";\nimport { join, resolve, extname } from \"path\";\n\n// ── Promoted Components (old @vibe/core → new @vibe/core/next in v3, now default in v4) ──\n\nconst PROMOTED_COMPONENTS = [\"Dropdown\", \"AttentionBox\", \"Modal\", \"DatePicker\", \"Dialog\"] as const;\n\ninterface OldComponentDetection {\n  component: string;\n  file: string;\n  line: number;\n  importSource: \"old\" | \"new\";\n  importStatement: string;\n}\n\ninterface PromotedComponentAnalysis {\n  oldApiUsage: OldComponentDetection[];\n  newApiUsage: OldComponentDetection[];\n  summary: Record<string, { oldCount: number; newCount: number; oldFiles: string[]; newFiles: string[] }>;\n}\n\nconst migrationGuideSchema = z.object({\n  projectPath: z.string().describe(\"Path to the project directory to analyze for migration\")\n});\n\nexport const v4MigrationTool: MCPTool<typeof migrationGuideSchema.shape> = {\n  name: \"v4-migration\",\n  description:\n    \"Analyzes a project for Vibe 3 to Vibe 4 migration requirements. Scans for deprecated APIs, removed props, renamed components, and generates migration commands with file-level before/after replacements.\",\n  inputSchema: migrationGuideSchema.shape,\n  execute: async input => {\n    try {\n      const { projectPath } = input;\n      const resolvedPath = resolve(projectPath);\n\n      if (!existsSync(resolvedPath)) {\n        return {\n          content: [\n            {\n              type: \"text\",\n              text: `Error: Project path \"${resolvedPath}\" does not exist.`\n            }\n          ],\n          isError: true\n        };\n      }\n\n      const projectInfo = {\n        targetDirectory: resolvedPath\n      };\n\n      const migrationData = getMigrationInstructions(projectInfo);\n      const analysis = await analyzeProject(resolvedPath);\n\n      const result = {\n        migrationGuide: migrationData,\n        promotedComponentMigrationGuide: getPromotedComponentMigrationGuide(),\n        projectInfo,\n        projectAnalysis: analysis,\n        recommendations: generateRecommendations(analysis, projectInfo)\n      };\n\n      return {\n        content: [\n          {\n            type: \"text\",\n            text: JSON.stringify(result, null, 2)\n          }\n        ]\n      };\n    } catch (e) {\n      const errorMessage = getErrorMessage(e);\n      return {\n        content: [\n          {\n            type: \"text\",\n            text: `Error in vibe-migration-tool: ${errorMessage}`\n          }\n        ],\n        isError: true\n      };\n    }\n  }\n};\n\n// ── Migration Instructions ───────────────────────────────────────────\n\nfunction getMigrationInstructions(projectInfo: { targetDirectory: string }) {\n  return {\n    overview: {\n      description: \"Vibe 4 is a major update focused on React 19 support, ~170KB smaller bundle, and modern API patterns\",\n      keyChanges: [\n        \"React 19 support — findDOMNode, class components, and framer-motion removed\",\n        \"~170KB smaller bundle (min+gzip) from removing 8 heavy dependencies\",\n        \"All deprecated enum exports and static properties removed — use string literals\",\n        \"ARIA props standardized from camelCase to aria-* attributes\",\n        \"Package rename: monday-ui-style → @vibe/style\",\n        \"@vibe/core/next components promoted to @vibe/core (except List)\",\n        \"moment removed as peer dependency — DatePicker uses native Date + date-fns\"\n      ]\n    },\n    packageChanges: {\n      upgrade: [\"@vibe/core@^4\"],\n      replace: [{ from: \"monday-ui-style\", to: \"@vibe/style\", note: \"Uncommon — only a few consumers use this directly\" }],\n      description: \"Upgrade @vibe/core. The project analysis below will detect any dependencies that need to be removed or replaced.\"\n    },\n    importChanges: {\n      styleImports: {\n        from: \"monday-ui-style\",\n        to: \"@vibe/style\"\n      },\n      nextComponents: {\n        from: \"@vibe/core/next\",\n        to: \"@vibe/core\",\n        components: [\"AttentionBox\", \"Dropdown\", \"DatePicker\", \"Dialog\", \"Modal\"],\n        exception: \"List remains in @vibe/core/next\"\n      }\n    },\n    removedComponents: [\n      { name: \"TipseenImage\", replacement: \"TipseenMedia with <img> child\" },\n      { name: \"AttentionBoxLink\", replacement: \"AttentionBox link prop\" },\n      { name: \"DropdownMenu\", replacement: \"New Dropdown API\" },\n      { name: \"DropdownOption\", replacement: \"New Dropdown API\" },\n      { name: \"DropdownSingleValue\", replacement: \"New Dropdown API\" },\n      { name: \"Combobox\", replacement: \"Dropdown with box mode (from @vibe/core)\" }\n    ],\n    breakingChanges: {\n      AttentionBox: {\n        changes: [\n          'type values: \"success\" → \"positive\", \"danger\" → \"negative\", \"dark\" → \"neutral\"',\n          \"entryAnimation → animate\",\n          \"withoutIcon / withIconWithoutHeader → icon={false}\",\n          \"AttentionBoxLink removed — use link prop\"\n        ]\n      },\n      Chips: {\n        changes: [\"disableClickableBehavior prop removed\"]\n      },\n      Clickable: {\n        changes: [\n          \"ariaHasPopup now accepts boolean only (was boolean | string)\",\n          \"tabIndex now accepts number only (was string | number)\"\n        ]\n      },\n      CustomSvgIcon: {\n        changes: [\"onClick and clickable props removed — wrap with a clickable element\"]\n      },\n      DatePicker: {\n        changes: [\n          \"date prop: moment.Moment → Date\",\n          \"onPickDate → onDateChange\",\n          'range boolean → mode: \"single\" | \"range\"',\n          \"moment no longer required as peer dependency\"\n        ]\n      },\n      Dialog: {\n        changes: [\n          \"modifiers prop removed — use middleware (Floating UI)\",\n          \"enableNestedDialogLayer removed — LayerProvider always used\",\n          \"addKeyboardHideShowTriggersByDefault default changed to true\",\n          \"Refable component removed from public exports\"\n        ]\n      },\n      Dropdown: {\n        changes: [\n          \"Options: { id, text } → { value, label }\",\n          \"Sub-components removed: DropdownMenu, DropdownOption, DropdownSingleValue\"\n        ]\n      },\n      Flex: {\n        changes: ['\"stretch\" value removed from justify prop']\n      },\n      Icon: {\n        changes: [\"iconLabel → label\", \"iconType → type\", \"iconSize → size\", 'size prop now applies to type=\"src\" icons']\n      },\n      LinearProgressBar: {\n        changes: [\"Renamed to ProgressBar\", \"LinearProgressBarProps → ProgressBarProps\"]\n      },\n      Link: {\n        changes: [\"@supports CSS fallback removed for logical properties\"]\n      },\n      MenuButton: {\n        changes: [\"focusItemIndexOnMount now defaults to 0\"]\n      },\n      MenuItem: {\n        changes: [\"children accepts only single MenuChild, not array\"]\n      },\n      Modal: {\n        changes: [\"Legacy Modal removed — new functional Modal promoted from @vibe/core/next\"]\n      },\n      Steps: {\n        changes: [\"Finish button renders by default on last step\"]\n      },\n      TextField: {\n        changes: [\"iconName → icon\", \"iconsNames → flat iconLabel and secondaryIconLabel props\"]\n      },\n      TextWithHighlight: {\n        changes: ['tooltipPosition removed — use tooltipProps={{ position }}']\n      },\n      Tipseen: {\n        changes: [\"modifiers prop removed — use middleware\"]\n      },\n      TipseenImage: {\n        changes: [\"Removed — use TipseenMedia with <img> child\"]\n      },\n      Toggle: {\n        changes: [\"noSpacing prop removed — auto-removed when areLabelsHidden is true\"]\n      },\n      Tooltip: {\n        changes: [\"TooltipProps extends DialogProps\", \"modifiers removed — use middleware\"]\n      },\n      VirtualizedList: {\n        changes: [\"getItemHeight prop removed\", \"onVerticalScrollbarVisiblityChange prop removed\"]\n      },\n      VirtualizedGrid: {\n        changes: [\"itemRenderer return type corrected to ReactElement\"]\n      }\n    },\n    hookChanges: {\n      useMergeRefs: { status: \"removed\", replacement: \"Use react-merge-refs or implement your own\" },\n      useListenFocusTriggers: { status: \"removed\", replacement: \"Inline the logic using useEventListener\" },\n      useActiveDescendantListFocus: {\n        status: \"changed\",\n        changes: [\"onItemClickCallback and createOnItemClickCallback removed — use onItemClick directly\"]\n      },\n      useKeyEvent: {\n        status: \"changed\",\n        changes: [\"callback type: GenericEventCallback → KeyboardEventCallback (native KeyboardEvent)\"]\n      }\n    },\n    typeChanges: {\n      VibeComponent: { status: \"removed\", replacement: \"Use forwardRef<P, T> and let TypeScript infer\" },\n      withStaticProps: { status: \"removed\", replacement: \"No replacement — static properties removed in v4\" },\n      withStaticPropsWithoutForwardRef: { status: \"removed\", replacement: \"No replacement\" }\n    },\n    cssChanges: {\n      spacingTokens: {\n        \"--spacing-xs\": \"--space-4\",\n        \"--spacing-small\": \"--space-8\",\n        \"--spacing-medium\": \"--space-16\",\n        \"--spacing-large\": \"--space-24\",\n        \"--spacing-xl\": \"--space-32\",\n        \"--spacing-xxl\": \"--space-48\",\n        \"--spacing-xxxl\": \"--space-64\"\n      },\n      inputPadding: \"padding-inline-start reduced from 16px to 8px\",\n      placeholderColor: \"Inputs use var(--placeholder-color) instead of var(--secondary-text-color)\"\n    },\n    migrationSteps: {\n      note: \"⚠️ IMPORTANT: Follow these steps sequentially. Complete each step fully before proceeding to the next.\",\n      steps: [\n        {\n          step: 1,\n          title: \"Analyze Project\",\n          action: \"Run detailed analysis to understand what needs to be migrated\",\n          description: \"Use this migration tool to understand the scope of changes needed\",\n          details: [\n            \"Check package.json dependencies\",\n            \"Scan for deprecated APIs, removed props, and enum usage\",\n            \"Identify components with breaking changes\",\n            \"Check for ARIA prop usage and CSS token changes\"\n          ],\n          note: \"This analysis is already being performed by this tool - review the results carefully\"\n        },\n        {\n          step: 2,\n          title: \"Update Package Dependencies\",\n          action: \"Upgrade @vibe/core, replace monday-ui-style, remove unused dependencies\",\n          command: \"yarn add @vibe/core@^4 && yarn remove moment react-select\",\n          description: \"Update package.json and install new Vibe 4 packages\",\n          important: \"Do NOT proceed to step 3 until this completes successfully\"\n        },\n        {\n          step: 3,\n          title: \"Migrate Old Components to New API\",\n          action: \"Identify and migrate components that had old/new versions in Vibe 3\",\n          description:\n            \"In Vibe 3, Dropdown, AttentionBox, Modal, DatePicker, and Dialog had OLD versions in @vibe/core and NEW versions in @vibe/core/next. \" +\n            \"In Vibe 4, the NEW versions are now the default in @vibe/core. If you were importing these from @vibe/core (old API), \" +\n            \"your code now silently uses a completely different component with a different API.\",\n          details: [\n            \"Check the promotedComponentAnalysis section in the project analysis output\",\n            \"Components imported from @vibe/core (old API) need manual migration to the new API\",\n            \"Components imported from @vibe/core/next (new API) only need the import path updated (handled by codemod)\",\n            \"For Dropdown migration, use the dedicated 'dropdown-migration' tool for detailed guidance\",\n            \"Review the promotedComponentMigrationGuide for before/after examples per component\"\n          ],\n          important: \"⚠️ This step MUST be completed BEFORE running codemods. The codemods update import paths but do NOT transform old API usage to new API usage.\"\n        },\n        {\n          step: 4,\n          title: \"Run Automated Migration\",\n          action: `Run migration script: npx @vibe/codemod -m v4 --target \"${projectInfo.targetDirectory}\" --extensions tsx jsx -y`,\n          command: `npx @vibe/codemod -m v4 --target \"${projectInfo.targetDirectory}\" --extensions tsx jsx -y`,\n          description: \"Handles enum→string, ARIA props, import renames, and component prop changes automatically.\",\n          important: \"⚠️ Complete step 3 (promoted component migration) BEFORE running this. After this script rewrites imports, old vs new API usage becomes indistinguishable.\",\n          codemods: [\n            \"Enums → string literals (Button.sizes.LARGE → \\\"large\\\")\",\n            \"ARIA camelCase → aria-* attributes\",\n            \"Icon prop renames (iconLabel → label, iconType → type, iconSize → size)\",\n            \"TextField prop renames (iconName → icon, iconsNames → flat props)\",\n            \"LinearProgressBar → ProgressBar rename\",\n            \"@vibe/core/next → @vibe/core import rewrite (List stays in /next)\",\n            \"monday-ui-style → @vibe/style import rewrite\",\n            \"Flex stretch removal, Toggle noSpacing removal, Chips disableClickableBehavior removal\",\n            \"Dialog enableNestedDialogLayer removal\",\n            \"TipseenImage → TipseenMedia, TextWithHighlight tooltipPosition → tooltipProps\"\n          ]\n        },\n        {\n          step: 5,\n          title: \"Manual Review and Fixes\",\n          action: \"Apply changes that codemods cannot handle\",\n          description: \"Use the projectAnalysis.manualChanges results to find and fix these issues\",\n          details: [\n            \"DatePicker: Replace moment objects with native Date, onPickDate → onDateChange, range → mode\",\n            \"Dropdown: Update options from { id, text } to { value, label }\",\n            \"Dialog/Tooltip/Tipseen: Replace modifiers with middleware (@floating-ui/react-dom)\",\n            \"CustomSvgIcon: Wrap with <button> or <Clickable> if onClick was used\",\n            \"AttentionBox: Update type values (success→positive, danger→negative, dark→neutral)\",\n            \"Modal: Review sub-component API changes (ModalHeader, ModalContent, ModalFooter)\",\n            \"useMergeRefs: Replace with react-merge-refs package\",\n            \"useListenFocusTriggers: Inline with useEventListener\",\n            \"VibeComponent type: Remove and use forwardRef directly\",\n            \"withStaticProps: Remove — static properties no longer used\",\n            \"CSS spacing tokens: Replace --spacing-* with --space-* in stylesheets\"\n          ],\n          important: \"Use the file:line references from projectAnalysis to locate each issue\"\n        },\n        {\n          step: 6,\n          title: \"Testing\",\n          action: \"Build and test application\",\n          description: \"Run build and tests to verify all functionality\",\n          details: [\n            \"Verify the project builds successfully (e.g., yarn build / npm run build)\",\n            \"Run all unit and integration tests\",\n            \"Verify the application works correctly in the browser\"\n          ],\n          important: \"Do not consider migration complete until build passes and all features work correctly\"\n        },\n        {\n          step: 7,\n          title: \"Migration Summary & Next Steps\",\n          action: \"Review migration completion\",\n          description: \"Congratulations! You've successfully migrated to Vibe 4.\",\n          nextSteps: [\n            {\n              title: \"Code Formatting (Optional)\",\n              description: \"Format your code according to your project's settings\",\n              note: \"Check your package.json scripts for available formatting commands\"\n            },\n            {\n              title: \"Show Your Support ⭐\",\n              description: \"If this migration helped you, consider giving the Vibe Design System a star!\",\n              action: \"Visit https://github.com/mondaycom/vibe and click the ⭐ Star button\"\n            }\n          ],\n          important: \"🎉 Migration to Vibe 4 is now complete!\"\n        }\n      ]\n    }\n  };\n}\n\n// ── Project Analysis ─────────────────────────────────────────────────\n\ninterface FileIssue {\n  file: string;\n  line: number;\n  match: string;\n  before: string;\n  after: string;\n}\n\nasync function analyzeProject(projectPath: string) {\n  const analysis: any = {\n    packageJsonAnalysis: null,\n    importAnalysis: null,\n    componentUsage: null,\n    manualChanges: null,\n    promotedComponentAnalysis: null,\n    potentialIssues: []\n  };\n\n  const packageJsonPath = join(projectPath, \"package.json\");\n  if (existsSync(packageJsonPath)) {\n    try {\n      const packageJson = JSON.parse(readFileSync(packageJsonPath, \"utf-8\"));\n      analysis.packageJsonAnalysis = analyzePackageJson(packageJson);\n    } catch (e) {\n      analysis.potentialIssues.push(`Could not parse package.json: ${getErrorMessage(e)}`);\n    }\n  }\n\n  const files = getAllSourceFiles(projectPath);\n  const scanResult = scanAllFiles(files);\n  analysis.importAnalysis = scanResult.importAnalysis;\n  analysis.componentUsage = scanResult.componentUsage;\n  analysis.manualChanges = scanResult.manualChanges;\n  analysis.promotedComponentAnalysis = scanResult.promotedComponentAnalysis;\n\n  return analysis;\n}\n\nfunction analyzePackageJson(packageJson: any) {\n  const dependencies = { ...packageJson.dependencies, ...packageJson.devDependencies };\n  const hasVibeCore = !!dependencies[\"@vibe/core\"];\n  const vibeCoreVersion = dependencies[\"@vibe/core\"] || \"not found\";\n  const hasMondayUIStyle = !!dependencies[\"monday-ui-style\"];\n\n  return {\n    hasVibeCore,\n    vibeCoreVersion,\n    hasMondayUIStyle,\n    migrationStatus: hasVibeCore ? \"needs-migration\" : \"not-using-vibe\",\n    dependencyActions: [\n      hasVibeCore && { action: \"upgrade\", package: \"@vibe/core\", from: vibeCoreVersion, to: \"^4\", command: \"yarn add @vibe/core@^4\" },\n      hasMondayUIStyle && { action: \"replace\", package: \"monday-ui-style\", with: \"@vibe/style\", command: \"yarn add @vibe/style && yarn remove monday-ui-style\" }\n    ].filter(Boolean)\n  };\n}\n\nfunction scanAllFiles(files: string[]) {\n  const importAnalysis: any = {\n    mondayUIStyleImports: [] as string[],\n    nextImports: [] as string[],\n    enumUsage: [] as string[],\n    ariaPropsUsage: [] as string[],\n    filesScanned: files.length\n  };\n\n  const componentUsage: any = {\n    renamedComponents: {} as Record<string, string[]>,\n    removedComponents: {} as Record<string, string[]>,\n    breakingChangeComponents: {} as Record<string, string[]>,\n    filesScanned: files.length\n  };\n\n  const manualChanges: Record<string, FileIssue[]> = {\n    datePickerMoment: [],\n    datePickerOnPickDate: [],\n    datePickerRange: [],\n    dropdownOldOptions: [],\n    dropdownSubComponents: [],\n    dialogModifiers: [],\n    tooltipModifiers: [],\n    tipseenModifiers: [],\n    customSvgIconOnClick: [],\n    attentionBoxTypeValues: [],\n    attentionBoxProps: [],\n    attentionBoxLink: [],\n    modalFromNext: [],\n    useMergeRefs: [],\n    useListenFocusTriggers: [],\n    vibeComponentType: [],\n    withStaticPropsUsage: [],\n    useActiveDescendantCallbacks: [],\n    useKeyEventCallback: [],\n    spacingTokens: []\n  };\n\n  const removedComponents = [\"TipseenImage\", \"AttentionBoxLink\", \"DropdownMenu\", \"DropdownOption\", \"DropdownSingleValue\", \"Combobox\"];\n  const breakingChangeComponents = [\n    \"AttentionBox\", \"Chips\", \"CustomSvgIcon\", \"DatePicker\", \"Dialog\", \"Dropdown\", \"Flex\",\n    \"Icon\", \"LinearProgressBar\", \"MenuButton\", \"MenuItem\", \"Modal\", \"Steps\",\n    \"TextField\", \"TextWithHighlight\", \"Tipseen\", \"Toggle\", \"Tooltip\",\n    \"VirtualizedList\", \"VirtualizedGrid\"\n  ];\n\n  for (const file of files) {\n    try {\n      const content = readFileSync(file, \"utf-8\");\n      const lines = content.split(\"\\n\");\n      const ext = extname(file);\n      const isStyleFile = ext === \".css\" || ext === \".scss\";\n\n      if (isStyleFile) {\n        scanStyleFile(file, lines, importAnalysis, manualChanges);\n        continue;\n      }\n\n      // Import analysis\n      if (content.includes(\"monday-ui-style\")) {\n        importAnalysis.mondayUIStyleImports.push(file);\n      }\n      if (content.includes(\"@vibe/core/next\")) {\n        importAnalysis.nextImports.push(file);\n      }\n      if (/\\.\\b(sizes|kinds|types|positions|colors|feedbacks)\\b\\.\\b[A-Z_]+\\b/.test(content)) {\n        importAnalysis.enumUsage.push(file);\n      }\n      if (/\\bariaLabel\\b|\\bariaHidden\\b|\\bariaExpanded\\b|\\bariaControls\\b|\\bariaHasPopup\\b|\\bariaLabelledBy\\b|\\bariaLabeledBy\\b|\\bariaDescribedBy\\b/.test(content)) {\n        importAnalysis.ariaPropsUsage.push(file);\n      }\n\n      // Component usage\n      if (content.includes(\"LinearProgressBar\")) {\n        if (!componentUsage.renamedComponents[\"LinearProgressBar\"]) componentUsage.renamedComponents[\"LinearProgressBar\"] = [];\n        componentUsage.renamedComponents[\"LinearProgressBar\"].push(file);\n      }\n\n      for (const comp of removedComponents) {\n        if (content.includes(comp)) {\n          if (!componentUsage.removedComponents[comp]) componentUsage.removedComponents[comp] = [];\n          componentUsage.removedComponents[comp].push(file);\n        }\n      }\n\n      for (const comp of breakingChangeComponents) {\n        if (content.includes(`<${comp}`) || content.includes(`${comp}.`)) {\n          if (!componentUsage.breakingChangeComponents[comp]) componentUsage.breakingChangeComponents[comp] = [];\n          componentUsage.breakingChangeComponents[comp].push(file);\n        }\n      }\n\n      // Manual changes — file:line level detection\n      scanManualChanges(file, lines, content, manualChanges);\n    } catch {\n      // Skip unreadable files\n    }\n  }\n\n  const promotedComponentAnalysis = detectPromotedComponentImports(files);\n\n  return { importAnalysis, componentUsage, manualChanges, promotedComponentAnalysis };\n}\n\nfunction scanStyleFile(file: string, lines: string[], importAnalysis: any, manualChanges: Record<string, FileIssue[]>) {\n  const spacingMap: Record<string, string> = {\n    \"--spacing-xs\": \"--space-4\",\n    \"--spacing-small\": \"--space-8\",\n    \"--spacing-medium\": \"--space-16\",\n    \"--spacing-large\": \"--space-24\",\n    \"--spacing-xl\": \"--space-32\",\n    \"--spacing-xxl\": \"--space-48\",\n    \"--spacing-xxxl\": \"--space-64\"\n  };\n\n  for (let i = 0; i < lines.length; i++) {\n    for (const [oldToken, newToken] of Object.entries(spacingMap)) {\n      if (lines[i].includes(oldToken)) {\n        manualChanges.spacingTokens.push({\n          file, line: i + 1, match: lines[i].trim(),\n          before: `var(${oldToken})`,\n          after: `var(${newToken})`\n        });\n      }\n    }\n    if (lines[i].includes(\"monday-ui-style\")) {\n      importAnalysis.mondayUIStyleImports.push(file);\n    }\n  }\n}\n\nfunction scanManualChanges(file: string, lines: string[], content: string, manualChanges: Record<string, FileIssue[]>) {\n  for (let i = 0; i < lines.length; i++) {\n    const line = lines[i];\n\n    // DatePicker: moment → Date\n    if (content.includes(\"DatePicker\") && /\\bmoment\\b/.test(line) && !line.trimStart().startsWith(\"//\")) {\n      manualChanges.datePickerMoment.push({\n        file, line: i + 1, match: line.trim(),\n        before: 'moment(\"2023-05-01\")',\n        after: 'new Date(\"2023-05-01\")'\n      });\n    }\n\n    // DatePicker: onPickDate → onDateChange\n    if (line.includes(\"onPickDate\")) {\n      manualChanges.datePickerOnPickDate.push({\n        file, line: i + 1, match: line.trim(),\n        before: \"onPickDate={(d) => setDate(d)}\",\n        after: \"onDateChange={(d) => setDate(d)}\"\n      });\n    }\n\n    // DatePicker: range → mode\n    if (content.includes(\"DatePicker\") && /\\brange\\b/.test(line) && !line.includes(\"mode\")) {\n      manualChanges.datePickerRange.push({\n        file, line: i + 1, match: line.trim(),\n        before: \"<DatePicker range />\",\n        after: '<DatePicker mode=\"range\" />'\n      });\n    }\n\n    // Dropdown: { id, text } → { value, label }\n    if (content.includes(\"Dropdown\") && (/\\{\\s*id\\s*:.*text\\s*:/.test(line) || /\\{\\s*text\\s*:.*id\\s*:/.test(line))) {\n      manualChanges.dropdownOldOptions.push({\n        file, line: i + 1, match: line.trim(),\n        before: '{ id: \"1\", text: \"Option 1\" }',\n        after: '{ value: \"1\", label: \"Option 1\" }'\n      });\n    }\n\n    // Dropdown sub-components\n    for (const subComp of [\"DropdownMenu\", \"DropdownOption\", \"DropdownSingleValue\"]) {\n      if (line.includes(subComp)) {\n        manualChanges.dropdownSubComponents.push({\n          file, line: i + 1, match: line.trim(),\n          before: subComp,\n          after: \"// removed — use new Dropdown API. See: https://vibe.monday.com/?path=/docs/components-dropdown-migration-guide--docs\"\n        });\n      }\n    }\n\n    // Dialog/Tooltip/Tipseen: modifiers → middleware\n    if (/\\bmodifiers\\b/.test(line)) {\n      if (content.includes(\"<Dialog\")) {\n        manualChanges.dialogModifiers.push({\n          file, line: i + 1, match: line.trim(),\n          before: 'modifiers={[{ name: \"offset\", options: { offset: [0, 8] } }]}',\n          after: 'middleware={[offset(8)]}  // import { offset } from \"@floating-ui/react-dom\"'\n        });\n      }\n      if (content.includes(\"<Tooltip\")) {\n        manualChanges.tooltipModifiers.push({\n          file, line: i + 1, match: line.trim(),\n          before: \"modifiers={...}\",\n          after: \"middleware={...}  // use @floating-ui/react-dom middleware\"\n        });\n      }\n      if (content.includes(\"<Tipseen\")) {\n        manualChanges.tipseenModifiers.push({\n          file, line: i + 1, match: line.trim(),\n          before: \"modifiers={...}\",\n          after: \"middleware={...}  // use @floating-ui/react-dom middleware\"\n        });\n      }\n    }\n\n    // CustomSvgIcon: onClick removed\n    if (content.includes(\"CustomSvgIcon\") && /\\bonClick\\b/.test(line)) {\n      manualChanges.customSvgIconOnClick.push({\n        file, line: i + 1, match: line.trim(),\n        before: \"<CustomSvgIcon onClick={handleClick} clickable />\",\n        after: '<button onClick={handleClick}><CustomSvgIcon /></button>  // or use <Clickable>'\n      });\n    }\n\n    // AttentionBox: type value changes\n    if (content.includes(\"AttentionBox\")) {\n      const typeMatch = line.match(/type\\s*=\\s*[\"'](success|danger|dark)[\"']/);\n      if (typeMatch) {\n        const oldType = typeMatch[1];\n        const newType = oldType === \"success\" ? \"positive\" : oldType === \"danger\" ? \"negative\" : \"neutral\";\n        manualChanges.attentionBoxTypeValues.push({\n          file, line: i + 1, match: line.trim(),\n          before: `type=\"${oldType}\"`,\n          after: `type=\"${newType}\"`\n        });\n      }\n      if (line.includes(\"entryAnimation\")) {\n        manualChanges.attentionBoxProps.push({\n          file, line: i + 1, match: line.trim(), before: \"entryAnimation\", after: \"animate\"\n        });\n      }\n      if (line.includes(\"withoutIcon\") || line.includes(\"withIconWithoutHeader\")) {\n        manualChanges.attentionBoxProps.push({\n          file, line: i + 1, match: line.trim(), before: \"withoutIcon\", after: \"icon={false}\"\n        });\n      }\n    }\n\n    // AttentionBoxLink\n    if (line.includes(\"AttentionBoxLink\")) {\n      manualChanges.attentionBoxLink.push({\n        file, line: i + 1, match: line.trim(),\n        before: '<AttentionBoxLink href=\"/docs\" text=\"Learn more\" />',\n        after: '// use AttentionBox link prop: link={{ href: \"/docs\", text: \"Learn more\" }}'\n      });\n    }\n\n    // Modal from @vibe/core/next\n    if (line.includes(\"Modal\") && line.includes(\"@vibe/core/next\")) {\n      manualChanges.modalFromNext.push({\n        file, line: i + 1, match: line.trim(),\n        before: 'import { Modal } from \"@vibe/core/next\"',\n        after: 'import { Modal } from \"@vibe/core\"  // review ModalHeader/ModalContent/ModalFooter API changes'\n      });\n    }\n\n    // useMergeRefs\n    if (line.includes(\"useMergeRefs\")) {\n      manualChanges.useMergeRefs.push({\n        file, line: i + 1, match: line.trim(),\n        before: 'import { useMergeRefs } from \"@vibe/core\";\\nconst ref = useMergeRefs({ refs: [ref1, ref2] });',\n        after: 'import { mergeRefs } from \"react-merge-refs\";\\nconst ref = mergeRefs([ref1, ref2]);'\n      });\n    }\n\n    // useListenFocusTriggers\n    if (line.includes(\"useListenFocusTriggers\")) {\n      manualChanges.useListenFocusTriggers.push({\n        file, line: i + 1, match: line.trim(),\n        before: \"useListenFocusTriggers({ ref, onFocusByKeyboard, onFocusByMouse })\",\n        after: 'Inline using useEventListener:\\nuseEventListener({ eventName: \"focusin\", callback: ..., ref });\\nuseEventListener({ eventName: \"mousedown\", callback: ..., ref });'\n      });\n    }\n\n    // VibeComponent type\n    if (/\\bVibeComponent\\b/.test(line) && !line.includes(\"VibeComponentProps\")) {\n      manualChanges.vibeComponentType.push({\n        file, line: i + 1, match: line.trim(),\n        before: \"const MyComp: VibeComponent<MyProps, HTMLDivElement> = forwardRef(...)\",\n        after: \"const MyComp = forwardRef<HTMLDivElement, MyProps>(...)  // let TS infer\"\n      });\n    }\n\n    // withStaticProps\n    if (line.includes(\"withStaticProps\")) {\n      manualChanges.withStaticPropsUsage.push({\n        file, line: i + 1, match: line.trim(),\n        before: \"export default withStaticProps(MyComponent, { sizes: MySizes })\",\n        after: \"export default MyComponent  // static properties removed in v4\"\n      });\n    }\n\n    // useActiveDescendantListFocus removed callbacks\n    if (line.includes(\"onItemClickCallback\") || line.includes(\"createOnItemClickCallback\")) {\n      manualChanges.useActiveDescendantCallbacks.push({\n        file, line: i + 1, match: line.trim(),\n        before: \"const { onItemClickCallback } = useActiveDescendantListFocus(...)\",\n        after: \"// use onItemClick directly instead\"\n      });\n    }\n\n    // useKeyEvent callback type\n    if (line.includes(\"GenericEventCallback\") && content.includes(\"useKeyEvent\")) {\n      manualChanges.useKeyEventCallback.push({\n        file, line: i + 1, match: line.trim(),\n        before: \"callback: GenericEventCallback\",\n        after: \"callback: KeyboardEventCallback  // native KeyboardEvent\"\n      });\n    }\n  }\n}\n\n// ── Promoted Component Detection ─────────────────────────────────────\n\n/**\n * Collapses multi-line imports into single logical lines, preserving the\n * start line number of the `import` keyword.\n *\n * e.g.\n *   import {         <- line 3\n *     Dropdown,\n *     Button\n *   } from \"@vibe/core\";\n *\n * becomes: { text: 'import { Dropdown, Button } from \"@vibe/core\";', line: 3 }\n */\nfunction collapseImportLines(lines: string[]): Array<{ text: string; line: number }> {\n  const result: Array<{ text: string; line: number }> = [];\n  let i = 0;\n\n  while (i < lines.length) {\n    const line = lines[i];\n\n    if (/^\\s*import\\s+\\{/.test(line)) {\n      const startLine = i + 1; // 1-based\n      let accumulated = line;\n\n      // If the closing brace and `from` are not on this line, keep accumulating\n      while (!/\\}\\s*from\\s+[\"']/.test(accumulated) && i + 1 < lines.length) {\n        i++;\n        accumulated = accumulated.trimEnd() + \" \" + lines[i].trim();\n      }\n\n      result.push({ text: accumulated, line: startLine });\n    } else {\n      result.push({ text: line, line: i + 1 });\n    }\n\n    i++;\n  }\n\n  return result;\n}\n\nfunction detectPromotedComponentImports(files: string[]): PromotedComponentAnalysis {\n  const oldApiUsage: OldComponentDetection[] = [];\n  const newApiUsage: OldComponentDetection[] = [];\n  const summary: PromotedComponentAnalysis[\"summary\"] = {};\n\n  for (const comp of PROMOTED_COMPONENTS) {\n    summary[comp] = { oldCount: 0, newCount: 0, oldFiles: [], newFiles: [] };\n  }\n\n  // Match import statements from @vibe/core or @vibe/core/next (both quote styles)\n  const importRegex = /import\\s+\\{([^}]+)\\}\\s+from\\s+[\"'](@vibe\\/core(?:\\/next)?)[\"']/;\n\n  for (const file of files) {\n    try {\n      const content = readFileSync(file, \"utf-8\");\n      const lines = content.split(\"\\n\");\n      const logicalLines = collapseImportLines(lines);\n\n      for (const { text, line } of logicalLines) {\n        const match = importRegex.exec(text);\n        if (!match) continue;\n\n        const importedNames = match[1].split(\",\").map(s => s.trim().split(/\\s+as\\s+/)[0].trim()).filter(Boolean);\n        const source = match[2];\n        const isNext = source === \"@vibe/core/next\";\n\n        for (const name of importedNames) {\n          if ((PROMOTED_COMPONENTS as readonly string[]).includes(name)) {\n            const detection: OldComponentDetection = {\n              component: name,\n              file,\n              line,\n              importSource: isNext ? \"new\" : \"old\",\n              importStatement: text.trim()\n            };\n\n            if (isNext) {\n              newApiUsage.push(detection);\n              summary[name].newCount++;\n              if (!summary[name].newFiles.includes(file)) {\n                summary[name].newFiles.push(file);\n              }\n            } else {\n              oldApiUsage.push(detection);\n              summary[name].oldCount++;\n              if (!summary[name].oldFiles.includes(file)) {\n                summary[name].oldFiles.push(file);\n              }\n            }\n          }\n        }\n      }\n    } catch {\n      // Skip unreadable files\n    }\n  }\n\n  return { oldApiUsage, newApiUsage, summary };\n}\n\nfunction getPromotedComponentMigrationGuide() {\n  return {\n    description:\n      \"In Vibe 3, these components had OLD versions in @vibe/core and NEW versions in @vibe/core/next. \" +\n      \"In Vibe 4, the NEW versions are now the default in @vibe/core. If you were using the OLD version \" +\n      \"from @vibe/core, your import path is now 'correct' but points to a completely different component with a different API.\",\n    components: {\n      Dropdown: {\n        severity: \"critical\" as const,\n        migrateTool: \"dropdown-migration\",\n        note: \"Use the 'dropdown-migration' tool for complete Dropdown migration guidance including API changes, before/after examples, and step-by-step instructions.\"\n      },\n      AttentionBox: {\n        severity: \"high\" as const,\n        apiChanges: [\n          'type values renamed: \"success\" → \"positive\", \"danger\" → \"negative\", \"dark\" → \"neutral\"',\n          \"entryAnimation → animate\",\n          \"withoutIcon / withIconWithoutHeader → icon={false}\",\n          \"AttentionBoxLink removed — use link prop\"\n        ],\n        before: `import { AttentionBox } from \"@vibe/core\";\\n<AttentionBox type=\"danger\" entryAnimation withoutIcon />`,\n        after: `import { AttentionBox } from \"@vibe/core\";\\n<AttentionBox type=\"negative\" animate icon={false} />`\n      },\n      Modal: {\n        severity: \"critical\" as const,\n        apiChanges: [\n          \"id prop is now required\",\n          \"show prop controls visibility (replaces external state pattern)\",\n          \"width → size (\\\"small\\\" | \\\"medium\\\" | \\\"large\\\")\",\n          \"Layout via ModalHeader, ModalContent, ModalFooter sub-components\",\n          \"ModalFooterButtons removed — use ModalFooter with Button children\"\n        ],\n        before: `import { Modal } from \"@vibe/core\";\\n<Modal title=\"My Modal\" width={500}>{content}</Modal>`,\n        after: `import { Modal } from \"@vibe/core\";\\n<Modal id=\"my-modal\" show={isOpen} onClose={onClose} size=\"medium\">\\n  <ModalHeader title=\"My Modal\" />\\n  <ModalContent>{content}</ModalContent>\\n</Modal>`\n      },\n      DatePicker: {\n        severity: \"critical\" as const,\n        apiChanges: [\n          \"date prop: moment.Moment → native Date\",\n          \"onPickDate → onDateChange\",\n          'range boolean → mode: \"single\" | \"range\"',\n          \"shouldBlockDay → isDateDisabled\",\n          \"moment no longer a peer dependency — uses date-fns internally\"\n        ],\n        before: `import { DatePicker } from \"@vibe/core\";\\n<DatePicker date={moment(\"2024-01-01\")} onPickDate={handler} range />`,\n        after: `import { DatePicker } from \"@vibe/core\";\\n<DatePicker date={new Date(\"2024-01-01\")} onDateChange={handler} mode=\"range\" />`\n      },\n      Dialog: {\n        severity: \"high\" as const,\n        apiChanges: [\n          \"modifiers → middleware (uses @floating-ui/react-dom)\",\n          \"enableNestedDialogLayer removed — LayerProvider is always used\",\n          \"addKeyboardHideShowTriggersByDefault default changed to true\"\n        ],\n        before: `import { Dialog } from \"@vibe/core\";\\n<Dialog modifiers={[{ name: \"offset\", options: { offset: [0, 8] } }]} enableNestedDialogLayer>`,\n        after: `import { Dialog } from \"@vibe/core\";\\n<Dialog middleware={[offset(8)]}>  // import { offset } from \"@floating-ui/react-dom\"`\n      }\n    }\n  };\n}\n\n// ── File Discovery ───────────────────────────────────────────────────\n\nfunction getAllSourceFiles(dir: string): string[] {\n  const files: string[] = [];\n  const validExtensions = [\".ts\", \".tsx\", \".js\", \".jsx\", \".css\", \".scss\"];\n\n  function scanDirectory(currentDir: string, depth = 0) {\n    if (depth > 5) return;\n    try {\n      const entries = readdirSync(currentDir);\n      for (const entry of entries) {\n        if (entry.startsWith(\".\") || entry === \"node_modules\" || entry === \"dist\" || entry === \"build\") continue;\n        const fullPath = join(currentDir, entry);\n        try {\n          const stat = statSync(fullPath);\n          if (stat.isDirectory()) {\n            scanDirectory(fullPath, depth + 1);\n          } else if (stat.isFile() && validExtensions.includes(extname(entry))) {\n            files.push(fullPath);\n          }\n        } catch { /* skip */ }\n      }\n    } catch { /* skip */ }\n  }\n\n  scanDirectory(dir);\n  return files;\n}\n\n// ── Recommendations ──────────────────────────────────────────────────\n\nfunction generateRecommendations(analysis: any, projectInfo: { targetDirectory: string }) {\n  const recommendations = [];\n\n  // Package recommendations\n  if (analysis.packageJsonAnalysis) {\n    const pkg = analysis.packageJsonAnalysis;\n\n    if (pkg.migrationStatus === \"needs-migration\") {\n      recommendations.push({\n        type: \"package-upgrade\",\n        priority: \"high\",\n        action: \"Upgrade @vibe/core to v4\",\n        command: \"yarn add @vibe/core@^4\",\n        details: \"This is the first step in the migration process\"\n      });\n    }\n\n    if (pkg.dependencyActions.length > 0) {\n      recommendations.push({\n        type: \"dependency-cleanup\",\n        priority: \"high\",\n        action: \"Remove/replace deprecated dependencies\",\n        details: `${pkg.dependencyActions.length} dependency changes needed`,\n        commands: pkg.dependencyActions.map((d: any) => d.command)\n      });\n    }\n  }\n\n  // Import recommendations\n  if (analysis.importAnalysis) {\n    const imports = analysis.importAnalysis;\n\n    if (imports.mondayUIStyleImports?.length > 0) {\n      recommendations.push({\n        type: \"style-imports\",\n        priority: \"medium\",\n        action: \"Update monday-ui-style imports to @vibe/style\",\n        details: `Found ${imports.mondayUIStyleImports.length} files. Note: most consumers don't use monday-ui-style directly.`,\n        files: imports.mondayUIStyleImports.slice(0, 5),\n        fix: \"Handled by codemod: packages-rename-migration\"\n      });\n    }\n\n    if (imports.nextImports?.length > 0) {\n      recommendations.push({\n        type: \"next-imports\",\n        priority: \"high\",\n        action: \"Update @vibe/core/next imports to @vibe/core\",\n        details: `Found ${imports.nextImports.length} files`,\n        files: imports.nextImports.slice(0, 5),\n        fix: \"Handled by codemod: next-imports-migration (List stays in /next)\"\n      });\n    }\n\n    if (imports.ariaPropsUsage?.length > 0) {\n      recommendations.push({\n        type: \"aria-props\",\n        priority: \"high\",\n        action: \"Update camelCase ARIA props to standard aria-* attributes\",\n        details: `Found ${imports.ariaPropsUsage.length} files`,\n        files: imports.ariaPropsUsage.slice(0, 5),\n        fix: \"Handled by codemod: Aria-props-migration\"\n      });\n    }\n\n    if (imports.enumUsage?.length > 0) {\n      recommendations.push({\n        type: \"enum-usage\",\n        priority: \"high\",\n        action: \"Replace enum static properties with string literals\",\n        details: `Found ${imports.enumUsage.length} files`,\n        files: imports.enumUsage.slice(0, 5),\n        fix: \"Handled by codemod: Enums-migration\"\n      });\n    }\n  }\n\n  // Component usage recommendations\n  if (analysis.componentUsage) {\n    const usage = analysis.componentUsage;\n\n    Object.entries(usage.renamedComponents || {}).forEach(([component, files]: [string, any]) => {\n      recommendations.push({\n        type: \"renamed-component\",\n        priority: \"high\",\n        action: `Rename ${component} → ${getComponentReplacement(component)}`,\n        details: `Found ${files.length} files`,\n        files: files.slice(0, 5),\n        fix: \"Handled by codemod\"\n      });\n    });\n\n    Object.entries(usage.removedComponents || {}).forEach(([component, files]: [string, any]) => {\n      recommendations.push({\n        type: \"removed-component\",\n        priority: \"high\",\n        action: `Replace removed component: ${component}`,\n        details: `Found ${files.length} files`,\n        files: files.slice(0, 5),\n        fix: getComponentReplacementDetails(component)\n      });\n    });\n\n    Object.entries(usage.breakingChangeComponents || {}).forEach(([component, files]: [string, any]) => {\n      recommendations.push({\n        type: \"breaking-change\",\n        priority: \"medium\",\n        action: `Review ${component} usage`,\n        details: `Found ${files.length} files using ${component} - check for breaking changes`,\n        files: files.slice(0, 5),\n        fix: getBreakingChangeDetails(component)\n      });\n    });\n  }\n\n  // Manual changes recommendations\n  if (analysis.manualChanges) {\n    const manual = analysis.manualChanges;\n    const manualIssueCount = Object.values(manual).reduce((sum: number, arr: any) => sum + arr.length, 0);\n\n    if (manualIssueCount > 0) {\n      recommendations.push({\n        type: \"manual-changes\",\n        priority: \"high\",\n        action: \"Apply manual changes that codemods cannot handle\",\n        details: `${manualIssueCount} issues found across ${Object.entries(manual).filter(([, arr]: [string, any]) => arr.length > 0).length} categories`,\n        categories: Object.entries(manual)\n          .filter(([, arr]: [string, any]) => arr.length > 0)\n          .map(([key, arr]: [string, any]) => `${key}: ${arr.length} issues`),\n        important: \"Review the manualChanges section for file:line locations and before/after replacements\"\n      });\n    }\n  }\n\n  // Promoted component recommendations\n  if (analysis.promotedComponentAnalysis) {\n    const promoted = analysis.promotedComponentAnalysis as PromotedComponentAnalysis;\n    const guide = getPromotedComponentMigrationGuide();\n\n    for (const [component, counts] of Object.entries(promoted.summary)) {\n      const componentGuide = guide.components[component as keyof typeof guide.components];\n      if (!componentGuide) continue;\n\n      if (counts.oldCount > 0) {\n        const recommendation: any = {\n          type: \"promoted-component-old-api\",\n          priority: componentGuide.severity,\n          action: `Migrate ${component} from old API to new API`,\n          details:\n            `Found ${counts.oldCount} import(s) of ${component} from @vibe/core (old API) across ${counts.oldFiles.length} file(s). ` +\n            `After upgrading to Vibe 4, these imports will silently point to the NEW ${component} which has a different API.`,\n          files: counts.oldFiles.slice(0, 10),\n          important: \"⚠️ Must be resolved BEFORE running codemods (step 3 must be done before step 4)\"\n        };\n\n        if (\"migrateTool\" in componentGuide) {\n          recommendation.migrateTool = componentGuide.migrateTool;\n          recommendation.note = componentGuide.note;\n        } else {\n          recommendation.apiChanges = componentGuide.apiChanges;\n          recommendation.before = componentGuide.before;\n          recommendation.after = componentGuide.after;\n        }\n\n        recommendations.push(recommendation);\n      }\n\n      if (counts.newCount > 0) {\n        recommendations.push({\n          type: \"promoted-component-new-api\",\n          priority: \"info\",\n          action: `${component}: already using new API from @vibe/core/next`,\n          details:\n            `Found ${counts.newCount} import(s) of ${component} from @vibe/core/next (new API) across ${counts.newFiles.length} file(s). ` +\n            `The codemod will automatically update the import path from @vibe/core/next to @vibe/core.`,\n          files: counts.newFiles.slice(0, 10),\n          fix: \"Handled by codemod: next-imports-migration\"\n        });\n      }\n    }\n  }\n\n  // Migration script\n  recommendations.push({\n    type: \"migration-script\",\n    priority: \"high\",\n    action: \"Run automated migration script\",\n    command: `npx @vibe/codemod -m v4 --target \"${projectInfo.targetDirectory}\" --extensions tsx jsx -y`,\n    details: \"Handles enums, ARIA props, import renames, and component prop migrations automatically\",\n    warning: \"⚠️ ONLY run this AFTER completing promoted component migration (step 3). After codemods rewrite imports, old vs new API usage becomes indistinguishable.\"\n  });\n\n  // CSS tokens\n  if (analysis.manualChanges?.spacingTokens?.length > 0) {\n    recommendations.push({\n      type: \"css-tokens\",\n      priority: \"medium\",\n      action: \"Update deprecated CSS spacing tokens\",\n      details: `Found ${analysis.manualChanges.spacingTokens.length} uses of deprecated --spacing-* tokens`,\n      fix: \"Replace --spacing-xs/small/medium/large/xl/xxl/xxxl with --space-4/8/16/24/32/48/64\"\n    });\n  }\n\n  recommendations.push({\n    type: \"manual-review\",\n    priority: \"medium\",\n    action: \"Manual review and fixes\",\n    details: \"Review breaking changes and apply manual fixes\",\n    warning: \"⚠️ Promoted component migration (step 3) must be done BEFORE codemods. Other manual fixes (step 5) should be done AFTER.\"\n  });\n\n  recommendations.push({\n    type: \"testing\",\n    priority: \"high\",\n    action: \"Thorough testing required\",\n    details: [\n      \"Test DatePicker with native Date objects\",\n      \"Verify Dialog/Tooltip/Tipseen positioning (Floating UI)\",\n      \"Check Dropdown options with new { value, label } structure\",\n      \"Test Modal behavior and sub-component APIs\",\n      \"Verify ARIA attributes render correctly\",\n      \"Check CSS spacing and layout\"\n    ],\n    warning: \"⚠️ ONLY test AFTER completing manual fixes (step 5)\"\n  });\n\n  recommendations.push({\n    type: \"sequential-steps\",\n    priority: \"critical\",\n    action: \"Follow migration steps in order\",\n    details: \"Use the migrationSteps guide to follow the process sequentially\",\n    warning: \"🚨 DO NOT skip steps or work on multiple steps simultaneously\"\n  });\n\n  recommendations.push({\n    type: \"formatting\",\n    priority: \"info\",\n    action: \"Format code according to your project settings\",\n    details: \"Run your project's formatting commands after migration is complete\"\n  });\n\n  recommendations.push({\n    type: \"github-star\",\n    priority: \"info\",\n    action: \"Show your support with a GitHub star ⭐\",\n    details: \"If this migration tool helped you, consider starring the Vibe repository\",\n    link: \"https://github.com/mondaycom/vibe\"\n  });\n\n  return recommendations;\n}\n\nfunction getComponentReplacement(component: string): string {\n  const replacements: Record<string, string> = {\n    LinearProgressBar: \"ProgressBar\"\n  };\n  return replacements[component] || component;\n}\n\nfunction getComponentReplacementDetails(component: string): string {\n  const replacements: Record<string, string> = {\n    TipseenImage: \"Use TipseenMedia with an <img> child\",\n    AttentionBoxLink: \"Use the AttentionBox link prop instead\",\n    DropdownMenu: \"Removed — use new Dropdown API\",\n    DropdownOption: \"Removed — use new Dropdown API\",\n    DropdownSingleValue: \"Removed — use new Dropdown API\",\n    Combobox: \"Deprecated — use Dropdown with box mode from @vibe/core\"\n  };\n  return replacements[component] || \"Check migration guide for replacement\";\n}\n\nfunction getBreakingChangeDetails(component: string): string {\n  const details: Record<string, string> = {\n    AttentionBox: 'Type values changed (success→positive, danger→negative, dark→neutral). entryAnimation→animate. withoutIcon→icon={false}',\n    Chips: \"disableClickableBehavior prop removed\",\n    CustomSvgIcon: \"onClick and clickable props removed — wrap with clickable element\",\n    DatePicker: \"moment→Date, onPickDate→onDateChange, range→mode. Requires manual migration.\",\n    Dialog: \"modifiers→middleware (Floating UI). enableNestedDialogLayer removed.\",\n    Dropdown: \"Options: { id, text } → { value, label }. Sub-components removed. Requires manual migration.\",\n    Flex: '\"stretch\" value removed from justify prop',\n    Icon: \"iconLabel→label, iconType→type, iconSize→size\",\n    LinearProgressBar: \"Renamed to ProgressBar\",\n    MenuButton: \"focusItemIndexOnMount now defaults to 0\",\n    MenuItem: \"children accepts only single MenuChild\",\n    Modal: \"Legacy Modal removed — review new API\",\n    Steps: \"Finish button renders by default on last step\",\n    TextField: \"iconName→icon, iconsNames→flat iconLabel/secondaryIconLabel props\",\n    TextWithHighlight: \"tooltipPosition→tooltipProps\",\n    Tipseen: \"modifiers→middleware\",\n    Toggle: \"noSpacing prop removed\",\n    Tooltip: \"modifiers→middleware\",\n    VirtualizedList: \"getItemHeight and onVerticalScrollbarVisiblityChange props removed\",\n    VirtualizedGrid: \"itemRenderer return type corrected to ReactElement\"\n  };\n  return details[component] || \"Check migration guide for specific changes\";\n}\n"
  },
  {
    "path": "packages/mcp/tsconfig.json",
    "content": "{\n    \"compilerOptions\": {\n      \"target\": \"ES2022\",\n      \"module\": \"ESNext\",\n      \"moduleResolution\": \"node\",\n      \"resolveJsonModule\": true,\n      \"outDir\": \"./dist\",\n      \"rootDir\": \"./src\",\n      \"strict\": true,\n      \"esModuleInterop\": true,\n      \"skipLibCheck\": true,\n      \"forceConsistentCasingInFileNames\": true\n    },\n    \"include\": [\"src/**/*\"],\n    \"exclude\": [\"node_modules\"]\n  }"
  },
  {
    "path": "packages/shared/.eslintrc.cjs",
    "content": "module.exports = {\n  extends: [require.resolve(\"@vibe/config/eslint.config\")],\n  rules: {\n    \"@typescript-eslint/no-explicit-any\": \"warn\"\n  }\n};\n"
  },
  {
    "path": "packages/shared/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [4.0.1](https://github.com/mondaycom/vibe/compare/@vibe/shared@4.0.0...@vibe/shared@4.0.1) (2026-04-16)\n\n**Note:** Version bump only for package @vibe/shared\n\n\n\n\n\n## [3.0.8](https://github.com/mondaycom/vibe/compare/@vibe/shared@3.0.7...@vibe/shared@3.0.8) (2025-11-26)\n\n**Note:** Version bump only for package @vibe/shared\n\n\n\n\n\n## [3.0.7](https://github.com/mondaycom/vibe/compare/@vibe/shared@3.0.6...@vibe/shared@3.0.7) (2025-11-25)\n\n**Note:** Version bump only for package @vibe/shared\n\n\n\n\n\n## [3.0.6](https://github.com/mondaycom/vibe/compare/@vibe/shared@3.0.5...@vibe/shared@3.0.6) (2025-11-19)\n\n**Note:** Version bump only for package @vibe/shared\n\n\n\n\n\n## [3.0.5](https://github.com/mondaycom/vibe/compare/@vibe/shared@3.0.4...@vibe/shared@3.0.5) (2025-11-06)\n\n**Note:** Version bump only for package @vibe/shared\n\n\n\n\n\n## [3.0.4](https://github.com/mondaycom/vibe/compare/@vibe/shared@3.0.3...@vibe/shared@3.0.4) (2025-10-30)\n\n**Note:** Version bump only for package @vibe/shared\n\n\n\n\n\n## [3.0.3](https://github.com/mondaycom/vibe/compare/@vibe/shared@3.0.2...@vibe/shared@3.0.3) (2025-10-26)\n\n**Note:** Version bump only for package @vibe/shared\n\n\n\n\n\n## [3.0.2](https://github.com/mondaycom/vibe/compare/@vibe/shared@3.0.1...@vibe/shared@3.0.2) (2025-10-25)\n\n**Note:** Version bump only for package @vibe/shared\n\n\n\n\n\n## 3.0.1 (2025-09-14)\n\n**Note:** Version bump only for package @vibe/shared\n"
  },
  {
    "path": "packages/shared/package.json",
    "content": "{\n  \"name\": \"@vibe/shared\",\n  \"version\": \"4.0.1\",\n  \"description\": \"Shared utilities for Vibe packages\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/mondaycom/vibe.git\",\n    \"directory\": \"packages/core\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/mondaycom/vibe/issues\"\n  },\n  \"homepage\": \"https://github.com/mondaycom/vibe#readme\",\n  \"author\": \"monday.com\",\n  \"license\": \"MIT\",\n  \"type\": \"module\",\n  \"main\": \"dist/index.js\",\n  \"types\": \"dist/index.d.ts\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \".\": {\n      \"types\": \"./dist/index.d.ts\",\n      \"import\": \"./dist/index.js\",\n      \"default\": \"./dist/index.js\"\n    }\n  },\n  \"scripts\": {\n    \"build\": \"tsc\",\n    \"build:watch\": \"tsc --watch\",\n    \"lint\": \"eslint \\\"./src/**/*.{js,jsx,ts,tsx}\\\"\",\n    \"lint:fix\": \"yarn lint -- --fix\"\n  },\n  \"devDependencies\": {\n    \"@vibe/config\": \"4.0.0\",\n    \"@vitejs/plugin-react\": \"^4.3.1\",\n    \"prettier\": \"^2.5.1\",\n    \"react\": \"^16.14.0\",\n    \"react-dom\": \"^16.14.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"react\": \">=16.9.0\",\n    \"vitest\": \">=1.6.0\"\n  },\n  \"dependencies\": {\n    \"es-toolkit\": \"^1.39.10\"\n  },\n  \"sideEffects\": false\n}\n"
  },
  {
    "path": "packages/shared/src/constants/index.ts",
    "content": "export * from \"./keyCodes\";\nexport * from \"./sizes\";\n"
  },
  {
    "path": "packages/shared/src/constants/keyCodes.ts",
    "content": "export const keyCodes = {\n  ENTER: \"Enter\",\n  SPACE: \" \",\n  ESCAPE: \"Escape\",\n  DOWN_ARROW: \"ArrowDown\",\n  UP_ARROW: \"ArrowUp\",\n  LEFT_ARROW: \"ArrowLeft\",\n  RIGHT_ARROW: \"ArrowRight\",\n  TAB: \"Tab\"\n};\n\nexport const SELECTION_KEYS = [keyCodes.ENTER, keyCodes.SPACE];\nexport const UP_DOWN_ARROWS = [keyCodes.UP_ARROW, keyCodes.DOWN_ARROW];\n"
  },
  {
    "path": "packages/shared/src/constants/sizes.ts",
    "content": "export const BASE_SIZES = {\n  SMALL: \"small\",\n  MEDIUM: \"medium\",\n  LARGE: \"large\"\n} as const;\n\nexport const SIZES = { XXS: \"xxs\", XS: \"xs\", ...BASE_SIZES } as const;\n\nexport enum BaseSizes {\n  SMALL = \"small\",\n  MEDIUM = \"medium\",\n  LARGE = \"large\"\n}\n\nexport enum Sizes {\n  XXS = \"xxs\",\n  XS = \"xs\",\n  SMALL = \"small\",\n  MEDIUM = \"medium\",\n  LARGE = \"large\"\n}\n\nexport type SIZES_VALUES = (typeof SIZES)[keyof typeof SIZES];\n"
  },
  {
    "path": "packages/shared/src/hooks/index.ts",
    "content": "export * from \"./useMergeRef\";\nexport * from \"./useKeyEvent\";\nexport * from \"./useEventListener\";\nexport * from \"./ssr/useIsMounted\";\nexport * from \"./ssr/useIsomorphicLayoutEffect\";\nexport * from \"./useKeyboardButtonPressedFunc\";\n"
  },
  {
    "path": "packages/shared/src/hooks/ssr/useIsMounted.ts",
    "content": "import { useEffect, useState } from \"react\";\n\n// The hook will return true only on client side and not on server side\nexport const useIsMounted = () => {\n  const [isMounted, setIsMounted] = useState(false);\n  useEffect(() => {\n    setIsMounted(true);\n    return () => {\n      setIsMounted(false);\n    };\n  }, []);\n  return isMounted;\n};\n"
  },
  {
    "path": "packages/shared/src/hooks/ssr/useIsomorphicLayoutEffect.ts",
    "content": "import { useEffect, useLayoutEffect } from \"react\";\nimport { isClient } from \"../../utils/ssr-utils\";\n\n// In server side rendering, useEffect is used instead of useLayoutEffect to avoid the console warnings\nexport const useIsomorphicLayoutEffect = isClient() ? useLayoutEffect : useEffect;\n"
  },
  {
    "path": "packages/shared/src/hooks/useEventListener.ts",
    "content": "import { type RefObject, useEffect } from \"react\";\nimport { type GenericEventCallback } from \"../types/events\";\n\nexport function useEventListener({\n  eventName,\n  callback,\n  ref,\n  capture = false\n}: {\n  eventName: keyof HTMLElementEventMap | string;\n  callback: GenericEventCallback;\n  ref: RefObject<HTMLElement | Document>;\n  capture?: boolean;\n}): void {\n  useEffect(() => {\n    const refElement = ref && ref.current;\n    if (!refElement) return;\n    const listenerOptions = { capture };\n\n    refElement.addEventListener(eventName, callback, listenerOptions);\n\n    return () => {\n      refElement.removeEventListener(eventName, callback, listenerOptions);\n    };\n  }, [eventName, ref, callback, capture]);\n}\n"
  },
  {
    "path": "packages/shared/src/hooks/useKeyEvent.ts",
    "content": "import type React from \"react\";\nimport { type RefObject, useCallback, useRef } from \"react\";\nimport { useEventListener } from \"./useEventListener\";\nimport { isClient } from \"../utils/ssr-utils\";\n\nconst CTRL_OR_META = \"ctrlOrMetaKey\";\n\nenum Modifier {\n  ALT = \"altKey\",\n  META = \"metaKey\",\n  CTRL = \"ctrlKey\",\n  SHIFT = \"shiftKey\",\n  CTRL_OR_META = \"ctrlOrMetaKey\"\n}\n\nconst checkModifierInEvent = (event: KeyboardEvent, modifier: Modifier) => {\n  if (modifier === Modifier.CTRL_OR_META) {\n    return event.ctrlKey || event.metaKey;\n  }\n\n  return event[modifier];\n};\nconst checkWithoutModifierInEvent = (event: KeyboardEvent) => {\n  return !Object.values(useKeyEvent.modifiers).some((m: Modifier) => {\n    if (m !== CTRL_OR_META) {\n      return !!event[m];\n    }\n  });\n};\n\nexport interface UseKeyEventArgs {\n  /**\n   * The list of keys that should trigger the event.\n   */\n  keys: KeyboardEvent[\"key\"][];\n  /**\n   * Callback fired when a specified key is pressed.\n   */\n  callback: (event: KeyboardEvent | React.KeyboardEvent) => void;\n  /**\n   * Modifier key that must be pressed along with the specified key.\n   */\n  modifier?: Modifier;\n  /**\n   * The keyboard event type to listen for (e.g., \"keydown\", \"keyup\").\n   */\n  keyEventName?: string;\n  /**\n   * If true, ensures no modifier keys are pressed when handling the event.\n   */\n  withoutAnyModifier?: boolean;\n  /**\n   * The element reference to listen for key events on.\n   */\n  ref?: RefObject<HTMLElement | Document>;\n  /**\n   * If true, prevents fallback to listening on the document when no ref is provided.\n   */\n  ignoreDocumentFallback?: boolean;\n  /**\n   * If true, uses capture phase instead of bubbling phase for event listening.\n   */\n  capture?: boolean;\n  /**\n   * If true, calls `preventDefault` on the key event.\n   */\n  preventDefault?: boolean;\n  /**\n   * If true, calls `stopPropagation` on the key event.\n   */\n  stopPropagation?: boolean;\n}\n\nexport function useKeyEvent({\n  keys = [],\n  callback,\n  modifier,\n  withoutAnyModifier,\n  ref,\n  ignoreDocumentFallback = false,\n  capture = false,\n  preventDefault = false,\n  stopPropagation = false,\n  keyEventName = \"keydown\" // need keydown and not keyup to prevent scrolling with prevent default, for example during menu keyboard navigation\n}: UseKeyEventArgs) {\n  const documentRef = useRef(isClient() ? document.body : null);\n  const onKeyUpPress = useCallback(\n    (event: KeyboardEvent) => {\n      const { key } = event;\n      if (!keys.includes(key)) {\n        return;\n      }\n      if (modifier && !checkModifierInEvent(event, modifier)) {\n        return;\n      }\n      if (withoutAnyModifier && !checkWithoutModifierInEvent(event)) {\n        return;\n      }\n\n      if (preventDefault) {\n        event.preventDefault();\n      }\n\n      if (stopPropagation) {\n        event.stopPropagation();\n      }\n\n      callback(event);\n    },\n    [keys, modifier, withoutAnyModifier, preventDefault, stopPropagation, callback]\n  );\n\n  let listenerRef;\n\n  if (ref) {\n    listenerRef = ref;\n  } else if (ignoreDocumentFallback) {\n    listenerRef = null;\n  } else {\n    listenerRef = documentRef;\n  }\n\n  useEventListener({\n    eventName: keyEventName,\n    callback: onKeyUpPress,\n    ref: listenerRef,\n    capture\n  });\n}\n\nuseKeyEvent.modifiers = Modifier;\n"
  },
  {
    "path": "packages/shared/src/hooks/useKeyboardButtonPressedFunc.ts",
    "content": "import type React from \"react\";\nimport { useCallback } from \"react\";\nimport { keyCodes } from \"../constants\";\n\nexport function useKeyboardButtonPressedFunc(onClick: (event: React.KeyboardEvent) => void) {\n  return useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === keyCodes.SPACE || e.key === keyCodes.ENTER) {\n        onClick(e);\n      }\n    },\n    [onClick]\n  );\n}\n"
  },
  {
    "path": "packages/shared/src/hooks/useMergeRef.ts",
    "content": "import { type ForwardedRef, type MutableRefObject, type RefObject, useRef } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"./ssr/useIsomorphicLayoutEffect\";\n/*\n * Example usage:\n * const Component = React.forwardRef((props, ref) => {\n *   const internalRef = React.useRef();\n *   const mergedRef = useMergeRef(ref, internalRef);\n *   return <div {...props} ref={mergedRef} />;\n * });\n */\n\n/**\n * Returns a single ref callback that merges multiple ref callbacks - internal replacement for `useMergeRefs` hook\n * @param refs\n */\nexport function useMergeRef<T>(...refs: (RefObject<T> | ForwardedRef<T> | null)[]): RefObject<T> {\n  const mergedRef = useRef<T>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    refs.forEach(ref => {\n      if (!ref) return;\n\n      if (typeof ref === \"function\") {\n        ref(mergedRef.current);\n      } else {\n        (ref as MutableRefObject<T>).current = mergedRef.current;\n      }\n    });\n  }, [refs]);\n\n  return mergedRef;\n}\n"
  },
  {
    "path": "packages/shared/src/index.ts",
    "content": "export * from \"./tests\";\nexport * from \"./types\";\nexport * from \"./utils\";\nexport * from \"./hooks\";\nexport * from \"./constants\";\n"
  },
  {
    "path": "packages/shared/src/tests/constants.ts",
    "content": "export enum ComponentDefaultTestId {\n  // Don't remove next line\n  // plop_marker:default-data-testid-declarations\n  EMPTY_STATE = \"empty-state\",\n  TRANSITION_VIEW = \"transition-view\",\n  TEXT_AREA = \"text-area\",\n  EDITABLE_TEXT = \"editable-text\",\n  TIPSEEN_MEDIA = \"tipseen-media\",\n  INDICATOR = \"indicator\",\n  BADGE = \"badge\",\n  TITLE = \"title\",\n  TEXT = \"text\",\n  COMBOBOX = \"combobox\",\n  COMBOBOX_CATEGORY = \"combobox-category\",\n  COMBOBOX_OPTION = \"combobox-option\",\n  COLOR_PICKER = \"color-picker\",\n  CHECKBOX = \"checkbox\",\n  CHECKBOX_LABEL = \"checkbox-label\",\n  CHECKBOX_CHECKBOX = \"checkbox-checkbox\",\n  DROPDOWN = \"dropdown\",\n  DROPDOWN_OPTION_CONTENT = \"dropdown-option-content\",\n  BUTTON = \"button\",\n  BUTTON_GROUP = \"button-group\",\n  CLICKABLE = \"clickable\",\n  VIRTUALIZED_LIST = \"virtualized-list\",\n  VIRTUALIZED_GRID = \"virtualized-grid\",\n  TEXT_FIELD = \"text-field\",\n  TEXT_FIELD_SECONDARY_BUTTON = \"text-field-secondary-button\",\n  SEARCH = \"search\",\n  CLEAN_SEARCH_BUTTON = \"clean-search-button\",\n  COLOR_PICKER_ITEM = \"color-picker-item\",\n  ICON_BUTTON = \"icon-button\",\n  SVG_ICON = \"svg-icon\",\n  CHIP = \"chip\",\n  RADIO_BUTTON = \"radio-button\",\n  RADIO_BUTTON_LABEL = \"radio-button-label\",\n  RADIO_BUTTON_CONTROL = \"radio-button-control\",\n  TAB = \"tab\",\n  TAB_PANEL = \"tab-panel\",\n  TAB_PANELS = \"tab-panels\",\n  TAB_LIST = \"tab-list\",\n  TABS_CONTEXT = \"tabs-context\",\n  ALERT_BANNER = \"alert-banner\",\n  ALERT_BANNER_BUTTON = \"alert-banner-button\",\n  ALERT_BANNER_LINK = \"alert-banner-link\",\n  ALERT_BANNER_TEXT = \"alert-banner-text\",\n  ATTENTION_BOX = \"attention-box\",\n  BOX = \"box\",\n  AVATAR = \"avatar\",\n  AVATAR_BADGE = \"avatar-badge\",\n  AVATAR_CONTENT = \"avatar-content\",\n  BREADCRUMB_ITEM = \"breadcrumb-item\",\n  BREADCRUMBS_BAR = \"breadcrumbs-bar\",\n  BREADCRUMB_MENU = \"breadcrumb-menu\",\n  BREADCRUMB_MENU_ITEM = \"breadcrumb-menu-item\",\n  PROGRESS_BAR = \"progress-bar\",\n  BAR = \"bar\",\n  BAR_PRIMARY = \"bar-primary\",\n  BAR_SECONDARY = \"bar-secondary\",\n  COLOR_PICKER_ITEM_COMPONENT = \"color-picker-item-component\",\n  COUNTER = \"counter\",\n  MENU = \"menu\",\n  OPTION = \"option\",\n  EXPAND_COLLAPSE = \"expand-collapse\",\n  EDITABLE_INPUT = \"editable-input\",\n  EDITABLE_HEADING = \"editable-heading\",\n  HEADING = \"heading\",\n  LABEL = \"label\",\n  LINK = \"link\",\n  MENU_DIVIDER = \"menu-divider\",\n  MENU_ITEM = \"menu-item\",\n  MENU_ITEM_BUTTON = \"menu-item-button\",\n  MENU_TITLE = \"menu-title\",\n  MENU_TITLE_CAPTION = \"menu-title-caption\",\n  MENU_GRID_ITEM = \"menu-grid-item\",\n  MENU_BUTTON = \"menu-button\",\n  STEP_INDICATOR = \"step-indicator\",\n  STEPS = \"steps\",\n  STEPS_FORWARD_COMMAND = \"steps-forward-command\",\n  STEPS_BACKWARD_COMMAND = \"steps-backward-command\",\n  MULTI_STEP_INDICATOR = \"multi-step-indicator\",\n  SKELETON = \"skeleton\",\n  SPLIT_BUTTON = \"split-button\",\n  SPLIT_BUTTON_PRIMARY_BUTTON = \"split-button-primary-button\",\n  SPLIT_BUTTON_SECONDARY_BUTTON = \"split-button-secondary-button\",\n  TEXT_WITH_HIGHLIGHT = \"text-with-highlight\",\n  TOAST = \"toast\",\n  TOAST_CONTENT = \"toast-content\",\n  TOAST_LINK = \"toast-link\",\n  TOAST_BUTTON = \"toast-button\",\n  TOAST_CLOSE_BUTTON = \"toast-close-button\",\n  TOGGLE = \"toggle\",\n  TIPSEEN = \"tipseen\",\n  TIPSEEN_CONTENT = \"tipseen-content\",\n  TIPSEEN_CONTENT_SUBMIT = \"tipseen-content-submit\",\n  TIPSEEN_CONTENT_DISMISS = \"tipseen-content-dismiss\",\n  TIPSEEN_TITLE = \"tipseen-title\",\n  DIVIDER = \"divider\",\n  DATEPICKER = \"date-picker\",\n  DATEPICKER_HEADER = \"date-picker-header\",\n  DATEPICKER_YEAR_SELECTION = \"date-picker-year-selection\",\n  LOADER = \"loader\",\n  ICON = \"icon\",\n  RESPONSIVE_LIST = \"responsive-list\",\n  LIST = \"list\",\n  MODAL = \"modal\",\n  MODAL_OVERLAY = \"modal-overlay\",\n  MODAL_HEADER = \"modal-header\",\n  MODAL_CLOSE_BUTTON = \"modal-close-button\",\n  MODAL_CONTENT = \"modal-content\",\n  MODAL_FOOTER = \"modal-footer\",\n  MODAL_MEDIA = \"modal-media\",\n  MODAL_BASIC_LAYOUT = \"modal-basic-layout\",\n  MODAL_SIDE_BY_SIDE_LAYOUT = \"modal-side-by-side-layout\",\n  MODAL_MEDIA_LAYOUT = \"modal-media-layout\",\n  FORMATTED_NUMBER = \"formatted-number\",\n  HIDDEN_TEXT = \"hidden-text\",\n  DIALOG_CONTENT_CONTAINER = \"dialog-content-container\",\n  FLEX = \"flex\",\n  TOOLTIP = \"tooltip\",\n  DIALOG = \"dialog\",\n  TABLE = \"table\",\n  TABLE_CONTAINER = \"table-container\",\n  TABLE_BODY = \"table-body\",\n  TABLE_VIRTUALIZED_BODY = \"table-virtualized-body\",\n  TABLE_CELL = \"table-cell\",\n  TABLE_HEADER = \"table-header\",\n  TABLE_HEADER_CELL = \"table-header-cell\",\n  TABLE_ROW = \"table-row\",\n  TABLE_ROW_MENU = \"table-row-menu\"\n}\n\nexport enum NavigationCommand {\n  RIGHT_ARROW = \"{arrowright}\",\n  LEFT_ARROW = \"{arrowleft}\",\n  UP_ARROW = \"{arrowup}\",\n  DOWN_ARROW = \"{arrowdown}\",\n  TAB = \"#TAB#\",\n  ENTER = \"{enter}\",\n  PAGE_UP = \"{pageup}\",\n  PAGE_DOWN = \"{pagedown}\"\n}\n\nexport enum ComponentVibeId {\n  ACCORDION = \"Accordion\",\n  ALERT_BANNER = \"AlertBanner\",\n  ATTENTION_BOX = \"AttentionBox\",\n  AVATAR = \"Avatar\",\n  AVATAR_GROUP = \"AvatarGroup\",\n  BADGE = \"Badge\",\n  BOX = \"Box\",\n  BREADCRUMBS_BAR = \"BreadcrumbsBar\",\n  BUTTON = \"Button\",\n  BUTTON_GROUP = \"ButtonGroup\",\n  CHECKBOX = \"Checkbox\",\n  CHIPS = \"Chips\",\n  COLOR_PICKER = \"ColorPicker\",\n  COMBOBOX = \"Combobox\",\n  COUNTER = \"Counter\",\n  DATE_PICKER = \"DatePicker\",\n  DIALOG = \"Dialog\",\n  DIVIDER = \"Divider\",\n  DROPDOWN = \"Dropdown\",\n  EDITABLE_HEADING = \"EditableHeading\",\n  EDITABLE_TEXT = \"EditableText\",\n  EXPAND_COLLAPSE = \"ExpandCollapse\",\n  FLEX = \"Flex\",\n  HEADING = \"Heading\",\n  ICON = \"Icon\",\n  ICON_BUTTON = \"IconButton\",\n  LABEL = \"Label\",\n  PROGRESS_BAR = \"ProgressBar\",\n  LINK = \"Link\",\n  LIST = \"List\",\n  LOADER = \"Loader\",\n  MENU = \"Menu\",\n  MENU_BUTTON = \"MenuButton\",\n  MODAL = \"Modal\",\n  MULTI_STEP_INDICATOR = \"MultiStepIndicator\",\n  RADIO_BUTTON = \"RadioButton\",\n  SEARCH = \"Search\",\n  SKELETON = \"Skeleton\",\n  SLIDER = \"Slider\",\n  SPLIT_BUTTON = \"SplitButton\",\n  STEPS = \"Steps\",\n  TAB = \"Tab\",\n  TABLE = \"Table\",\n  TEXT = \"Text\",\n  TEXT_AREA = \"TextArea\",\n  TEXT_FIELD = \"TextField\",\n  TEXT_WITH_HIGHLIGHT = \"TextWithHighlight\",\n  THEME_PROVIDER = \"ThemeProvider\",\n  TIPSEEN = \"Tipseen\",\n  TOAST = \"Toast\",\n  TOGGLE = \"Toggle\",\n  TOOLTIP = \"Tooltip\",\n  VIRTUALIZED_GRID = \"VirtualizedGrid\",\n  VIRTUALIZED_LIST = \"VirtualizedList\"\n}\n"
  },
  {
    "path": "packages/shared/src/tests/index.ts",
    "content": "export * from \"./test-utils\";\nexport * from \"./test-ids-utils\";\nexport * from \"./constants\";\n"
  },
  {
    "path": "packages/shared/src/tests/test-ids-utils.ts",
    "content": "import type { ComponentDefaultTestId } from \"./constants\";\n\nexport const getTestId = (elementType: ComponentDefaultTestId, id?: string | number) => {\n  const formattedId = (id ?? \"\").toString();\n  return `${elementType}${formattedId && `_${formattedId}`}`;\n};\n"
  },
  {
    "path": "packages/shared/src/tests/test-utils.ts",
    "content": "// @ts-nocheck\nlet rafSpy: ReturnType<typeof vi.spyOn>;\n\nexport const mockRequestAnimationFrame = () => {\n  rafSpy = vi.spyOn(window, \"requestAnimationFrame\").mockImplementation((cb: FrameRequestCallback) => {\n    cb(0);\n    return 0;\n  });\n};\n\nexport const restoreRequestAnimationFrameMock = () => {\n  rafSpy.mockRestore();\n};\n"
  },
  {
    "path": "packages/shared/src/types/ArrayLastElement.ts",
    "content": "export type ArrayLastElement<T extends unknown[]> = T extends [...unknown[], infer R] ? R : never;\n"
  },
  {
    "path": "packages/shared/src/types/Colors.ts",
    "content": "import { contentColors } from \"../utils/colors-vars-map\";\n\nconst MapStateSelectedColor = {\n  positive: \"--positive-color-selected\",\n  negative: \"--negative-color-selected\",\n  primary: \"--primary-selected-color\",\n  warning: \"--warning-color-selected\"\n};\n\nconst MapStateSelectedHoverColor = {\n  positive: \"--positive-color-selected-hover\",\n  negative: \"--negative-color-selected-hover\",\n  primary: \"--primary-selected-hover-color\"\n};\n\ntype ContentColor = (typeof contentColors)[number];\ntype StateSelectedColorKeys = keyof typeof MapStateSelectedColor;\ntype StateSelectedHoverColorKeys = keyof typeof MapStateSelectedHoverColor;\n\nexport type ElementAllowedColor = ContentColor | \"positive\" | \"negative\" | \"primary\" | \"warning\";\n\nexport function getElementColor(\n  colorValue: ContentColor | StateSelectedColorKeys | StateSelectedHoverColorKeys,\n  isSelectedPalette = false,\n  isSelectedHoverPalette = false\n): string {\n  if (contentColors.includes(colorValue as ContentColor)) {\n    return `var(--color-${colorValue}${isSelectedPalette ? \"-selected\" : \"\"})`;\n  }\n  if (\n    Object.keys(MapStateSelectedHoverColor).includes(colorValue as StateSelectedHoverColorKeys) &&\n    isSelectedHoverPalette\n  ) {\n    return `var(${MapStateSelectedHoverColor[colorValue as StateSelectedHoverColorKeys]})`;\n  }\n  if (Object.keys(MapStateSelectedColor).includes(colorValue as StateSelectedColorKeys) && isSelectedPalette) {\n    return `var(${MapStateSelectedColor[colorValue as StateSelectedColorKeys]})`;\n  }\n  return colorValue;\n}\n\nexport type ColorStyle = \"regular\" | \"hover\" | \"selected\";\n"
  },
  {
    "path": "packages/shared/src/types/ElementContent.ts",
    "content": "import { type ReactNode } from \"react\";\n\nexport type ElementContent = ReactNode | ReactNode[];\n"
  },
  {
    "path": "packages/shared/src/types/FormElement.ts",
    "content": "/**\n * Props for form fields, including label, info text, and ID requirements for accessibility.\n * Using this type for a component's props will enforce that if a `label` or `infoText` is provided, an `id` must also be provided.\n * This is important for accessibility, to link the input with its label and description.\n * If there's a need, you can extend this type to add more shapes or conditions inside your form component types file.\n */\nexport type FormElementProps =\n  | {\n      /**\n       * The label for the input.\n       */\n      label: string;\n      /**\n       * The id of the input.\n       * Required when `label` or `infoText` is provided for accessibility reasons.\n       */\n      id: string;\n      /**\n       * Informational text to display below the input.\n       */\n      infoText?: string;\n    }\n  | {\n      label?: never;\n      /**\n       * Informational text to display below the input.\n       * If provided, an `id` is also required for accessibility.\n       */\n      infoText: string;\n      /**\n       * The id of the input.\n       * Required when `infoText` or `label` is provided for accessibility reasons.\n       */\n      id: string;\n    }\n  | {\n      label?: never;\n      infoText?: never;\n      /**\n       * The id of the input.\n       */\n      id?: string;\n    };\n"
  },
  {
    "path": "packages/shared/src/types/MoveBy.ts",
    "content": "export type MoveBy = {\n  main?: number;\n  secondary?: number;\n};\n"
  },
  {
    "path": "packages/shared/src/types/SplitString.ts",
    "content": "export type SplitString<S extends string, D extends string> = string extends S\n  ? string[]\n  : S extends \"\"\n  ? []\n  : S extends `${infer T}${D}${infer U}`\n  ? [T, ...SplitString<U, D>]\n  : [S];\n"
  },
  {
    "path": "packages/shared/src/types/VibeComponentProps.ts",
    "content": "export default interface VibeComponentProps {\n  /**\n   * A CSS class name to apply to the component.\n   */\n  className?: string;\n  /**\n   * A unique identifier for testing purposes.\n   */\n  \"data-testid\"?: string;\n  /**\n   * An HTML id attribute for the component.\n   */\n  id?: string;\n}\n"
  },
  {
    "path": "packages/shared/src/types/events.ts",
    "content": "import type React from \"react\";\n\nexport type OnPressEventType<Element> = React.MouseEvent<Element> | React.FocusEvent<Element>;\nexport type GeneralEventType = Event | React.UIEvent;\nexport type GenericEventCallback = (ev: GeneralEventType) => unknown;\nexport type KeyboardEventCallback = (event: KeyboardEvent) => unknown;\n\n// Custom type for all mouse event callbacks\nexport type MouseEventCallBack = (event: React.MouseEvent<HTMLElement | SVGElement>) => void;\n"
  },
  {
    "path": "packages/shared/src/types/files.d.ts",
    "content": "// SCSS\ndeclare module \"*.module.scss\" {\n  const classes: { [key: string]: string };\n  export default classes;\n}\n\n// SVG\ndeclare module \"*.svg\" {\n  const content: string;\n  export default content;\n}\n\ndeclare module \"*.png\";\ndeclare module \"*.mp4\";\ndeclare module \"*.pdf\";\n"
  },
  {
    "path": "packages/shared/src/types/index.ts",
    "content": "export * from \"./events\";\nexport type { default as VibeComponentProps } from \"./VibeComponentProps\";\nexport * from \"./ArrayLastElement\";\nexport * from \"./SplitString\";\nexport * from \"./ElementContent\";\nexport * from \"./Colors\";\nexport * from \"./MoveBy\";\n"
  },
  {
    "path": "packages/shared/src/types/window.d.ts",
    "content": "type DocumentMode = 5 | 7 | 8 | 9 | 10 | 11;\n\nexport declare global {\n  interface Window {\n    MSInputMethodContext: unknown;\n  }\n\n  interface Document {\n    documentMode: DocumentMode;\n  }\n}\n"
  },
  {
    "path": "packages/shared/src/utils/colors-utils.ts",
    "content": "import { contentColors } from \"./colors-vars-map\";\nimport { type ColorStyle } from \"../types/Colors\";\n\nexport const ColorUtils = {\n  contentColors,\n  getMondayColorAsStyle: (color: string, mode: ColorStyle = \"regular\", withVar = true) => {\n    return `${withVar ? \"var(\" : \"\"}--color-${color}${mode !== \"regular\" ? `-${mode}` : \"\"}${withVar ? \")\" : \"\"}`;\n  }\n};\n"
  },
  {
    "path": "packages/shared/src/utils/colors-vars-map.ts",
    "content": "import type { ElementAllowedColor } from \"../types/Colors\";\n\nexport const colorsMap = [\n  { color: \"--primary-color\", description: \"Use to emphasise main ui components\" },\n  {\n    color: \"--primary-on-secondary-color\",\n    description: \"Use to emphasise main ui components on secondary background color\"\n  },\n  { color: \"--primary-hover-color\", description: \"Use only as a hover on primary color\" },\n  {\n    color: \"--primary-hover-on-secondary-color\",\n    description: \"Use only as a hover on primary color on secondary background color\"\n  },\n  { color: \"--primary-selected-color\", description: \"Use to indicate selected state of primary items\" },\n  {\n    color: \"--primary-selected-hover-color\",\n    description: \"Use to indicate hover state on a primary-selected-color items\"\n  },\n  {\n    color: \"--primary-highlighted-color\",\n    description: \"Use this to indicate highlighted components of primary items\"\n  },\n  {\n    color: \"--primary-surface-color\",\n    description: \"Use this as the surface of the main layout appearance\"\n  },\n  {\n    color: \"--primary-selected-on-secondary-color\",\n    description: \"Use to indicate selected state of primary items on secondary background color\"\n  },\n  { color: \"--primary-text-color\", description: \"Use for default text color\" },\n  {\n    color: \"--primary-text-on-secondary-color\",\n    description: \"Use for default text color on secondary background color\"\n  },\n  { color: \"--secondary-text-color\", description: \"Use when you need text with lesser importance\" },\n  {\n    color: \"--secondary-text-on-secondary-color\",\n    description: \"Use when you need text with lesser importance (on secondary background color)\"\n  },\n  { color: \"--primary-background-hover-color\", description: \"Use as hover color\" },\n  { color: \"--primary-background-hover-on-secondary-color\", description: \"Use as hover color on secondary color\" },\n  {\n    color: \"--inverted-color-background\",\n    description: \"Inverted background color (opposite of primary background color)\"\n  },\n  { color: \"--text-color-on-inverted\", description: \"Inverted text color (opposite of primary text color)\" },\n  { color: \"--text-color-on-primary\", description: \"Use for text on primary color\" },\n  { color: \"--fixed-light-color\", description: \"Use as color that should remain light in all themes\" },\n  { color: \"--fixed-dark-color\", description: \"Use as color that should remain dark in all themes\" },\n  // states\n  {\n    color: \"--positive-color\",\n    description: \"Use to indicate a positive action/state (success, completion, approval...)\"\n  },\n  { color: \"--positive-color-hover\", description: \"Use only as hover color on positive color\" },\n  { color: \"--positive-color-selected\", description: \"Use only as selected indication for a positive colors\" },\n  {\n    color: \"--positive-color-selected-hover\",\n    description: \"Use to indicate hover state on a positive-color-selected items\"\n  },\n  {\n    color: \"--negative-color\",\n    description: \"Use to indicate a negative action/state (delete, error...)\"\n  },\n  { color: \"--negative-color-hover\", description: \"Use only as hover color on negative color\" },\n  { color: \"--negative-color-selected\", description: \"Use as selected indication for negative colors\" },\n  {\n    color: \"--negative-color-selected-hover\",\n    description: \"Use to indicate hover state on a negative-selected items\"\n  },\n  {\n    color: \"--warning-color\",\n    description: \"Use to indicate a warning action/state (severity, alert, caution...)\"\n  },\n  { color: \"--warning-color-hover\", description: \"Use only as hover color on warning color\" },\n  { color: \"--warning-color-selected\", description: \"Use as selected indication for warning colors\" },\n  {\n    color: \"--warning-color-selected-hover\",\n    description: \"Use to indicate hover state on a warning-selected items\"\n  },\n  // borders\n  { color: \"--ui-border-color\", description: \"Border color for ui elements and components (Button, Input...)\" },\n  { color: \"--ui-border-on-secondary-color\", description: \"Border color for ui elements on secondary color\" },\n  {\n    color: \"--layout-border-color\",\n    description: \"Border color for general layout and separators (Leftpane, Menu Divider...)\"\n  },\n  {\n    color: \"--layout-border-on-secondary-color\",\n    description: \"Border color for general layout on secondary background color\"\n  },\n  { color: \"--placeholder-color\", description: \"Use for placeholder text in inputs fields\" },\n  {\n    color: \"--placeholder-on-secondary-color\",\n    description: \"Use for placeholder text in inputs fields on secondary background color\"\n  },\n  { color: \"--icon-color\", description: \"Default color for icons\" },\n  { color: \"--icon-on-secondary-color\", description: \"Default color for icons on secondary background color\" },\n  // disabled\n  {\n    color: \"--disabled-background-color\",\n    description: \"Use as background for disabled elements (ui hovers or elements)\"\n  },\n  { color: \"--disabled-text-color\", description: \"Use as text in disabled components\" },\n  {\n    color: \"--disabled-background-on-secondary-color\",\n    description: \"Use as background for disabled elements on secondary background\"\n  },\n  {\n    color: \"--disabled-text-on-secondary-color\",\n    description: \"Use as text in disabled components on secondary background color\"\n  },\n  // Link\n  { color: \"--link-color\", description: \"Use only for links\" },\n  { color: \"--link-on-secondary-color\", description: \"Use only for links on secondary colors\" },\n  // Backgrounds\n  { color: \"--primary-background-color\", description: \"Primary background color\" },\n  { color: \"--secondary-background-color\", description: \"Secondary background color\" },\n  { color: \"--grey-background-color\", description: \"Grey background color\" },\n  { color: \"--allgrey-background-color\", description: \"Grey background color, stays grey in dark and black themes\" },\n  { color: \"--ui-background-color\", description: \"Background color for UI elements and components\" }\n];\n\nexport const colorsHashMap = colorsMap.reduce((map, current) => {\n  const newColorName = current.color.substring(2);\n  map.set(newColorName, current.description);\n  return map;\n}, new Map());\n\nexport const contentColors = [\n  \"grass_green\",\n  \"done-green\",\n  \"bright-green\",\n  \"saladish\",\n  \"egg_yolk\",\n  \"working_orange\",\n  \"dark-orange\",\n  \"peach\",\n  \"sunset\",\n  \"stuck-red\",\n  \"dark-red\",\n  \"sofia_pink\",\n  \"lipstick\",\n  \"bubble\",\n  \"purple\",\n  \"dark_purple\",\n  \"berry\",\n  \"dark_indigo\",\n  \"indigo\",\n  \"navy\",\n  \"bright-blue\",\n  \"dark-blue\",\n  \"aquamarine\",\n  \"chili-blue\",\n  \"river\",\n  \"winter\",\n  \"explosive\",\n  \"american_gray\",\n  \"blackish\",\n  \"brown\",\n  \"orchid\",\n  \"tan\",\n  \"sky\",\n  \"coffee\",\n  \"royal\",\n  \"teal\",\n  \"lavender\",\n  \"steel\",\n  \"lilac\",\n  \"pecan\"\n] as const;\n\nexport type CONTENT_COLORS_VALUES = (typeof contentColors)[number];\n\nexport enum ContentColorByName {\n  GRASS_GREEN = \"grass_green\",\n  DONE_GREEN = \"done-green\",\n  BRIGHT_GREEN = \"bright-green\",\n  SALADISH = \"saladish\",\n  EGG_YOLK = \"egg_yolk\",\n  WORKING_ORANGE = \"working_orange\",\n  DARK_ORANGE = \"dark-orange\",\n  PEACH = \"peach\",\n  SUNSET = \"sunset\",\n  STUCK_RED = \"stuck-red\",\n  DARK_RED = \"dark-red\",\n  SOFIA_PINK = \"sofia_pink\",\n  LIPSTICK = \"lipstick\",\n  BUBBLE = \"bubble\",\n  PURPLE = \"purple\",\n  DARK_PURPLE = \"dark_purple\",\n  BERRY = \"berry\",\n  DARK_INDIGO = \"dark_indigo\",\n  INDIGO = \"indigo\",\n  NAVY = \"navy\",\n  BRIGHT_BLUE = \"bright-blue\",\n  DARK_BLUE = \"dark-blue\",\n  AQUAMARINE = \"aquamarine\",\n  CHILI_BLUE = \"chili-blue\",\n  RIVER = \"river\",\n  WINTER = \"winter\",\n  EXPLOSIVE = \"explosive\",\n  AMERICAN_GRAY = \"american_gray\",\n  BLACKISH = \"blackish\",\n  BROWN = \"brown\",\n  ORCHID = \"orchid\",\n  TAN = \"tan\",\n  SKY = \"sky\",\n  COFFEE = \"coffee\",\n  ROYAL = \"royal\",\n  TEAL = \"teal\",\n  LAVENDER = \"lavender\",\n  STEEL = \"steel\",\n  LILAC = \"lilac\",\n  PECAN = \"pecan\"\n}\n\n/**\n * @deprecated\n */\nexport enum StateSelectedColor {\n  POSITIVE = \"positive\",\n  NEGATIVE = \"negative\",\n  PRIMARY = \"primary\",\n  WARNING = \"warning\"\n}\n\n/**\n * @deprecated\n */\nexport enum StateSelectedHoverColor {\n  POSITIVE = \"positive\",\n  NEGATIVE = \"negative\",\n  PRIMARY = \"primary\"\n}\n\n/**\n * @deprecated\n */\nexport type ElementColor = ElementAllowedColor;\n"
  },
  {
    "path": "packages/shared/src/utils/dom-event-utils.ts",
    "content": "import type React from \"react\";\n\nconst ENTER_KEY_CODE = 13;\nconst ESCAPE_KEY_CODE = 27;\nconst BACKSPACE = 8;\nconst TAB = 9;\nconst SPACE = 32;\nconst PAGE_UP = 33;\nconst PAGE_DOWN = 34;\nconst END = 35;\nconst HOME = 36;\nconst ARROW_LEFT_KEY_CODE = 37;\nconst ARROW_UP_KEY_CODE = 38;\nconst ARROW_RIGHT_KEY_CODE = 39;\nconst ARROW_DOWN_KEY_CODE = 40;\n\nfunction validateEvent(\n  event: React.KeyboardEvent,\n  keyCode: React.KeyboardEvent[\"keyCode\"] | React.KeyboardEvent[\"which\"],\n  key?: React.KeyboardEvent[\"key\"]\n) {\n  if (!event) return false;\n  return event.keyCode === keyCode || event.which === keyCode || (key && event.key === key);\n}\n\nexport function isEnterEvent(event: React.KeyboardEvent) {\n  return validateEvent(event, ENTER_KEY_CODE);\n}\n\nexport function isShiftEnterEvent(event: React.KeyboardEvent) {\n  return event.shiftKey && isEnterEvent(event);\n}\n\nexport function isEscapeEvent(event: React.KeyboardEvent) {\n  return validateEvent(event, ESCAPE_KEY_CODE);\n}\n\nexport function isArrowUpEvent(event: React.KeyboardEvent) {\n  return validateEvent(event, ARROW_UP_KEY_CODE);\n}\n\nexport function isArrowDownEvent(event: React.KeyboardEvent) {\n  return validateEvent(event, ARROW_DOWN_KEY_CODE);\n}\n\nexport function isArrowRightEvent(event: React.KeyboardEvent) {\n  return validateEvent(event, ARROW_RIGHT_KEY_CODE);\n}\n\nexport function isArrowLeftEvent(event: React.KeyboardEvent) {\n  return validateEvent(event, ARROW_LEFT_KEY_CODE);\n}\n\nexport function isBackspaceEvent(event: React.KeyboardEvent) {\n  return validateEvent(event, BACKSPACE);\n}\n\nexport function isSpaceEvent(event: React.KeyboardEvent) {\n  return validateEvent(event, SPACE);\n}\n\nexport function isTabEvent(event: React.KeyboardEvent) {\n  return validateEvent(event, TAB);\n}\n\nexport function isPageUpEvent(event: React.KeyboardEvent) {\n  return validateEvent(event, PAGE_UP);\n}\n\nexport function isPageDownEvent(event: React.KeyboardEvent) {\n  return validateEvent(event, PAGE_DOWN);\n}\n\nexport function isEndEvent(event: React.KeyboardEvent) {\n  return validateEvent(event, END);\n}\n\nexport function isHomeEvent(event: React.KeyboardEvent) {\n  return validateEvent(event, HOME);\n}\n\nexport function isShiftTabEvent(event: React.KeyboardEvent) {\n  return event.shiftKey && isTabEvent(event);\n}\n"
  },
  {
    "path": "packages/shared/src/utils/dom-utils.ts",
    "content": "import { memoize } from \"es-toolkit/compat\";\n\nexport function isInsideClass(domElement: HTMLElement, classOrClassesName: Array<string> | string) {\n  if (!classOrClassesName) return false;\n  let selector;\n\n  if (Array.isArray(classOrClassesName)) {\n    selector = classOrClassesName.map(c => `.${c}`).join(\",\");\n  } else {\n    selector = `.${classOrClassesName}`;\n  }\n\n  return !!domElement.parentElement.closest(selector);\n}\n\nexport const getScrollableParent: (node: HTMLElement) => HTMLElement = memoize(\n  (node: HTMLElement): HTMLElement => {\n    if (!node) {\n      return null;\n    }\n    while (node.parentElement) {\n      if (isNodeVerticallyScrollable(node.parentElement)) {\n        return node.parentElement;\n      }\n      node = node.parentElement;\n    }\n    return document.body;\n  },\n  (node: HTMLElement) => node.outerHTML\n);\n\nconst isNodeVerticallyScrollable = (node: HTMLElement): boolean => {\n  return [\"auto\", \"scroll\"].includes(getComputedStyle(node).getPropertyValue(\"overflow-y\"));\n};\n"
  },
  {
    "path": "packages/shared/src/utils/function-utils.ts",
    "content": "import { isArray, isFunction } from \"es-toolkit/compat\";\nimport { type MutableRefObject } from \"react\";\n\nexport function chainRefFunctions(\n  funcsOrRefs: Array<MutableRefObject<HTMLElement> | ((_: HTMLElement) => void | boolean)>,\n  allowBreak = false\n) {\n  return (args: HTMLElement) => {\n    for (let i = 0; i < funcsOrRefs.length; i++) {\n      const funcOrRef = funcsOrRefs[i];\n      try {\n        let result;\n        if (isFunction(funcOrRef)) {\n          result = funcOrRef(args);\n        } else if (funcOrRef) {\n          funcOrRef.current = args;\n        }\n        if (result === false && allowBreak) {\n          return;\n        }\n      } catch (e) {\n        console.error(e);\n        return;\n      }\n    }\n  };\n}\n\nexport function chainFunctions(funcs: Array<(_: any) => void | boolean>, allowBreak = false) {\n  return (args: any) => {\n    for (let i = 0; i < funcs.length; i++) {\n      const func = funcs[i];\n      try {\n        const result = func && func(args);\n        if (result === false && allowBreak) {\n          return;\n        }\n      } catch (e) {\n        console.error(e);\n        return;\n      }\n    }\n  };\n}\n\nexport function convertToArray<T>(input: T | Array<T>): Array<T> {\n  return isArray(input) ? input : [input];\n}\n\nexport function NOOP() {}\n"
  },
  {
    "path": "packages/shared/src/utils/index.ts",
    "content": "export * from \"./colors-utils\";\nexport * from \"./colors-vars-map\";\nexport * from \"./dom-event-utils\";\nexport * from \"./dom-utils\";\nexport * from \"./function-utils\";\nexport * from \"./media-query-utils\";\nexport * from \"./ssr-utils\";\nexport * from \"./user-agent-utils\";\nexport * from \"./warn-deprecated\";\nexport * from \"./typesciptCssModulesHelper\";\nexport * from \"./screenReaderAccessHelper\";\nexport * from \"./testid-helper\";\n"
  },
  {
    "path": "packages/shared/src/utils/media-query-utils.ts",
    "content": "export const SMALL1 = 1;\nexport const SMALL2 = 2;\nexport const MEDIUM1 = 3;\nexport const MEDIUM2 = 4;\nexport const LARGE = 5;\nexport const XLARGE = 6;\n\nexport const MEDIA_QUERY_QUERIES = {\n  [SMALL1]: \"screen and (max-width: 767px)\",\n  [SMALL2]: \"screen and (max-width: 1023px) and (min-width: 768px)\",\n  [MEDIUM1]: \"screen and (max-width: 1279px) and (min-width: 1024px)\",\n  [MEDIUM2]: \"screen and (max-width: 1439px) and (min-width: 1280px)\",\n  [LARGE]: \"screen and (max-width: 1919px) and (min-width: 1440px)\",\n  [XLARGE]: \"screen and (min-width: 1920px)\"\n};\n\nexport const VIBE_MEDIA_QUERIES = [\n  MEDIA_QUERY_QUERIES[SMALL1],\n  MEDIA_QUERY_QUERIES[SMALL2],\n  MEDIA_QUERY_QUERIES[MEDIUM1],\n  MEDIA_QUERY_QUERIES[MEDIUM2],\n  MEDIA_QUERY_QUERIES[LARGE],\n  MEDIA_QUERY_QUERIES[XLARGE]\n];\n\nexport const MEDIA_QUERY_SIZES = {\n  SMALL1,\n  SMALL2,\n  MEDIUM1,\n  MEDIUM2,\n  LARGE,\n  XLARGE\n};\n"
  },
  {
    "path": "packages/shared/src/utils/screenReaderAccessHelper.ts",
    "content": "export function getClickableScreenReaderAccessProps({\n  isKeyboardAccessible = true,\n  isDecorationOnly = false,\n  isHoverOnly = false\n}: {\n  isKeyboardAccessible?: boolean;\n  isDecorationOnly?: boolean;\n  isHoverOnly: boolean;\n}) {\n  return {\n    role: isHoverOnly ? \"img\" : \"button\",\n    tabIndex: isKeyboardAccessible ? 0 : -1,\n    \"aria-hidden\": isDecorationOnly\n  };\n}\n\nexport function getClickableIconScreenReaderAccessProps({\n  label,\n  isDecorationOnly = false,\n  isKeyboardAccessible = true,\n  isHoverOnly = false\n}: {\n  label: string;\n  isDecorationOnly?: boolean;\n  isKeyboardAccessible?: boolean;\n  isHoverOnly?: boolean;\n}) {\n  return {\n    ...getClickableScreenReaderAccessProps({ isDecorationOnly, isKeyboardAccessible, isHoverOnly }),\n    \"aria-label\": label\n  };\n}\n"
  },
  {
    "path": "packages/shared/src/utils/ssr-utils.ts",
    "content": "export const isClient = () => typeof window !== \"undefined\";\nexport const isServer = () => !isClient();\n"
  },
  {
    "path": "packages/shared/src/utils/testid-helper.ts",
    "content": "export function createTestIdHelper(componentTestId: string) {\n  return function bem(subElement: string) {\n    return `${componentTestId}__${subElement}`;\n  };\n}\n"
  },
  {
    "path": "packages/shared/src/utils/textManipulations.ts",
    "content": "import { convertToArray } from \"../utils/function-utils\";\n\nconst MIN_PRECISION = 0;\nconst MAX_PRECISION = 20;\nconst DEFAULT_LOCAL = \"en-US\";\n\nfunction validateLocalSupported(local: string) {\n  let isLocalSupported;\n  try {\n    const options = { localeMatcher: \"lookup\" as const };\n    isLocalSupported = !!Intl.NumberFormat.supportedLocalesOf(convertToArray(local), options).length;\n  } catch (err) {\n    isLocalSupported = false;\n  }\n\n  return isLocalSupported;\n}\n\nfunction validatePrecision(precision: number) {\n  if (precision < MIN_PRECISION) return MIN_PRECISION;\n  if (precision > MAX_PRECISION) return MAX_PRECISION;\n  return precision;\n}\n\nexport const formatNumberConsts = Object.freeze({\n  MIN_PRECISION,\n  MAX_PRECISION,\n  DEFAULT_LOCAL\n});\n\nexport function formatNumber(\n  value: number,\n  {\n    local = DEFAULT_LOCAL,\n    isCompact = true,\n    precision = 2\n  }: { local?: Intl.Locale[\"language\"]; isCompact?: boolean; precision?: number } = {}\n) {\n  if (value === undefined || value === null) return;\n  const isLocalSupported = validateLocalSupported(local);\n  const normalizedPrecision = validatePrecision(precision);\n  const selectedLocal = isLocalSupported ? local : DEFAULT_LOCAL;\n  return new Intl.NumberFormat(selectedLocal, {\n    ...(isCompact && { notation: \"compact\" }),\n    maximumFractionDigits: normalizedPrecision\n  }).format(value);\n}\n"
  },
  {
    "path": "packages/shared/src/utils/typesciptCssModulesHelper.ts",
    "content": "/**\n * Return style by key - used to fix noImplicitAny errors when referencing modular styles from ts files via index accessor\n * @param styles modular styles object\n * @param key string classname\n */\nexport function getStyle<StylesType>(\n  styles: StylesType,\n  key: string | undefined | null\n): StylesType[keyof StylesType] | string {\n  if (!key || !styles[key as keyof typeof styles]) return \"\";\n  return styles[key as keyof typeof styles];\n}\n"
  },
  {
    "path": "packages/shared/src/utils/user-agent-utils.ts",
    "content": "export function isFirefox() {\n  return !!/Firefox\\/([0-9.]+)(?:\\s|$)/.exec(window.navigator.userAgent);\n}\n\nexport function isIE11() {\n  return !!window.MSInputMethodContext && !!document.documentMode;\n}\n"
  },
  {
    "path": "packages/shared/src/utils/warn-deprecated.ts",
    "content": "import { useEffect } from \"react\";\n\nexport function useWarnDeprecated({\n  component,\n  condition = true,\n  message\n}: {\n  component: string;\n  condition?: boolean;\n  message: string;\n}) {\n  useEffect(() => {\n    warnDeprecated({ component, condition, message });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n}\n\nexport function warnDeprecated({\n  component,\n  condition,\n  message\n}: {\n  component: string;\n  condition: boolean;\n  message: string;\n}) {\n  if (condition && process.env.NODE_ENV !== \"production\") {\n    const warningMessage = `[@vibe/core] ${component}: ${message}`;\n    console.warn(warningMessage);\n  }\n}\n"
  },
  {
    "path": "packages/shared/tsconfig.json",
    "content": "{\n  \"extends\": \"@vibe/config/tsconfig\",\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"rootDir\": \"src\",\n    \"outDir\": \"dist\"\n  },\n  \"include\": [\"src/**/*\"]\n}\n"
  },
  {
    "path": "packages/storybook-blocks/.babelrc.json",
    "content": "{\n  \"sourceType\": \"unambiguous\",\n  \"presets\": [\n    [\n      \"@babel/preset-env\",\n      {\n        \"targets\": {\n          \"chrome\": 100\n        }\n      }\n    ],\n    \"@babel/preset-typescript\",\n    \"@babel/preset-react\"\n  ],\n  \"plugins\": []\n}"
  },
  {
    "path": "packages/storybook-blocks/.eslintrc.js",
    "content": "const commonRules = {\n  'react/display-name': 'off',\n  'object-curly-newline': 'off',\n  'no-debugger': 'error',\n  'global-require': 'off',\n  'no-unused-expressions': 'off',\n  'react/forbid-foreign-prop-types': 'off',\n  'no-console': 'off',\n  'consistent-return': 'off',\n  'no-use-before-define': 'off',\n  'one-var': 'off',\n  'default-case': 'off',\n  'func-names': 'off',\n  'react/sort-comp': 'off',\n  'class-methods-use-this': 'off',\n  radix: 'off',\n  'no-underscore-dangle': 'off',\n  'import/prefer-default-export': 'off',\n  'no-plusplus': 'off',\n  'react/react-in-jsx-scope': 0,\n  'react/no-danger': 'error',\n  'react/jsx-one-expression-per-line': 'off',\n  'react/prop-types': 0,\n  'react/forbid-prop-types': 'off',\n  'react/function-component-definition': 'off',\n  'default-param-last': 'off',\n  'react/require-default-props': ['error'],\n  'react/jsx-props-no-spreading': 0,\n  'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],\n  'react/default-props-match-prop-types': 'error',\n  'react/jsx-boolean-value': 'off',\n  'arrow-parens': 'off',\n  'implicit-arrow-linebreak': 'off',\n  'import/no-extraneous-dependencies': ['error', { devDependencies: true }],\n};\nconst commonPlugins = ['import', 'react', 'json', 'markdown', 'jest'];\nconst commonExtends = ['plugin:react/recommended', 'plugin:prettier/recommended', 'plugin:storybook/recommended'];\n\nmodule.exports = {\n  overrides: [\n    {\n      files: ['*.test.js', 'jest.init.js'],\n      env: {\n        jest: true,\n        'jest/globals': true,\n      },\n    },\n    {\n      files: ['.eslintrc.js', 'scripts/**/*.js', '__mocks__/**/*.js', 'rollup.config.js'],\n      env: {\n        node: true,\n      },\n    },\n    {\n      files: ['*.ts', '*.tsx'],\n      parser: '@typescript-eslint/parser',\n      extends: [\n        ...commonExtends,\n        'plugin:@typescript-eslint/eslint-recommended',\n        'plugin:@typescript-eslint/recommended',\n      ],\n      plugins: [...commonPlugins, '@typescript-eslint'],\n      rules: {\n        ...commonRules,\n        '@typescript-eslint/ban-ts-comment': ['warn'],\n        'no-unused-vars': 'off',\n        'react/require-default-props': 'off',\n        '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],\n        '@typescript-eslint/no-empty-function': 'off',\n      },\n    },\n  ],\n  env: {\n    browser: true,\n    es2021: true,\n  },\n  settings: {\n    jest: {\n      version: 29,\n    },\n    react: {\n      version: 'detect',\n    },\n  },\n  extends: [...commonExtends, 'eslint:recommended'],\n  parserOptions: {\n    ecmaFeatures: {\n      jsx: true,\n    },\n    ecmaVersion: 13,\n    sourceType: 'module',\n  },\n  plugins: [...commonPlugins],\n  rules: {\n    ...commonRules,\n    'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],\n  },\n};\n"
  },
  {
    "path": "packages/storybook-blocks/.prettierrc",
    "content": "{\n  \"printWidth\": 120,\n  \"singleQuote\": true,\n  \"arrowParens\": \"avoid\"\n}\n"
  },
  {
    "path": "packages/storybook-blocks/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [1.0.7](https://github.com/mondaycom/vibe/compare/vibe-storybook-components@1.0.6...vibe-storybook-components@1.0.7) (2025-12-17)\n\n**Note:** Version bump only for package vibe-storybook-components\n\n\n\n\n\n## [1.0.6](https://github.com/mondaycom/vibe/compare/vibe-storybook-components@1.0.5...vibe-storybook-components@1.0.6) (2025-10-25)\n\n**Note:** Version bump only for package vibe-storybook-components\n\n\n\n\n\n## [1.0.5](https://github.com/mondaycom/vibe/compare/vibe-storybook-components@1.0.4...vibe-storybook-components@1.0.5) (2025-09-14)\n\n**Note:** Version bump only for package vibe-storybook-components\n\n\n\n\n\n## [1.0.4](https://github.com/mondaycom/vibe/compare/vibe-storybook-components@1.0.3...vibe-storybook-components@1.0.4) (2025-09-04)\n\n\n### Performance Improvements\n\n* replace lodash-es with es-toolkit compat ([#3072](https://github.com/mondaycom/vibe/issues/3072)) ([14dd2bb](https://github.com/mondaycom/vibe/commit/14dd2bb14112a07ce3e649937e281a20516ecb71))\n\n\n\n\n\n## [1.0.3](https://github.com/mondaycom/vibe/compare/vibe-storybook-components@1.0.2...vibe-storybook-components@1.0.3) (2025-08-13)\n\n**Note:** Version bump only for package vibe-storybook-components\n\n\n\n\n\n## [1.0.2](https://github.com/mondaycom/vibe/compare/vibe-storybook-components@1.0.1...vibe-storybook-components@1.0.2) (2025-07-24)\n\n**Note:** Version bump only for package vibe-storybook-components\n\n\n\n\n\n## [1.0.1](https://github.com/mondaycom/vibe/compare/vibe-storybook-components@0.22.0...vibe-storybook-components@1.0.1) (2025-07-22)\n\n**Note:** Version bump only for package vibe-storybook-components\n\n\n\n\n\n# [0.22.0](https://github.com/mondaycom/vibe/compare/vibe-storybook-components@0.21.1...vibe-storybook-components@0.22.0) (2025-03-11)\n\n\n### Features\n\n* **Spacing:** add new spacing tokens ([#2768](https://github.com/mondaycom/vibe/issues/2768)) ([a21f765](https://github.com/mondaycom/vibe/commit/a21f765ef376da00b5ed0992a41da1124fbd191c))\n\n\n\n\n\n## [0.21.1](https://github.com/mondaycom/vibe/compare/vibe-storybook-components@0.21.0...vibe-storybook-components@0.21.1) (2024-12-17)\n\n\n### Bug Fixes\n\n* StatusTag remove log, sort stories alphabetically, modal docs fixes ([#2659](https://github.com/mondaycom/vibe/issues/2659)) ([5b13f48](https://github.com/mondaycom/vibe/commit/5b13f48e57cdca2aadc7cc4a612f4e6fe016112d))\n\n\n\n\n\n# [0.21.0](https://github.com/mondaycom/vibe/compare/vibe-storybook-components@0.20.0...vibe-storybook-components@0.21.0) (2024-12-17)\n\n\n### Features\n\n* **Modal:** export new Modal component to /next ([#2641](https://github.com/mondaycom/vibe/issues/2641)) ([244c1cb](https://github.com/mondaycom/vibe/commit/244c1cbfa80641f8e3a07270a0dfb4fd3e488bc7))\n\n\n\n\n\n# [0.20.0](https://github.com/mondaycom/vibe/compare/vibe-storybook-components@0.19.3...vibe-storybook-components@0.20.0) (2024-11-24)\n\n\n### Features\n\n* layering floating components on modals ([#2383](https://github.com/mondaycom/vibe/issues/2383)) ([3fd084c](https://github.com/mondaycom/vibe/commit/3fd084c6a5d158cb442968188118988305b7a29b))\n\n\n\n\n\n## [0.19.3](https://github.com/mondaycom/vibe/compare/vibe-storybook-components@0.19.2...vibe-storybook-components@0.19.3) (2024-09-09)\n\n**Note:** Version bump only for package vibe-storybook-components\n\n\n\n\n\n## [0.19.2](https://github.com/mondaycom/vibe/compare/vibe-storybook-components@0.19.1...vibe-storybook-components@0.19.2) (2024-06-26)\n\n\n### Bug Fixes\n\n* Revert \"chore: add build step postinstall for vibe-storybook-components\" ([#2192](https://github.com/mondaycom/vibe/issues/2192)) ([cdb45d5](https://github.com/mondaycom/vibe/commit/cdb45d5fb467bae9af935212c714268e0eda4f2a))\n\n\n\n\n\n## [0.19.1](https://github.com/mondaycom/vibe/compare/vibe-storybook-components@0.19.0...vibe-storybook-components@0.19.1) (2024-06-26)\n\n**Note:** Version bump only for package vibe-storybook-components\n\n\n\n\n\n# [0.19.0](https://github.com/mondaycom/vibe/compare/vibe-storybook-components@0.18.4...vibe-storybook-components@0.19.0) (2024-05-26)\n\n\n### Features\n\n* **StatusTag:** Add Alpha style ([#2136](https://github.com/mondaycom/vibe/issues/2136)) ([118d83d](https://github.com/mondaycom/vibe/commit/118d83d8581e983c2daccefaa23d4fef3c1732d6))\n\n\n\n\n\n## [0.18.4](https://github.com/mondaycom/vibe/compare/vibe-storybook-components@0.18.3...vibe-storybook-components@0.18.4) (2024-05-07)\n\n**Note:** Version bump only for package vibe-storybook-components\n\n\n\n\n\n## [0.18.3](https://github.com/mondaycom/vibe/compare/vibe-storybook-components@0.18.2...vibe-storybook-components@0.18.3) (2024-04-30)\n\n\n### Bug Fixes\n\n* **types:** Decorator type should be taken from storybook, not custom ([#2090](https://github.com/mondaycom/vibe/issues/2090)) ([5485d6e](https://github.com/mondaycom/vibe/commit/5485d6e7284fa5a91f994e5a3d221fa3d1566391))\n\n\n\n\n\n## [0.18.2](https://github.com/mondaycom/vibe/compare/vibe-storybook-components@0.18.1...vibe-storybook-components@0.18.2) (2024-04-24)\n\n**Note:** Version bump only for package vibe-storybook-components\n\n\n\n\n\n## [0.18.1](https://github.com/mondaycom/monday-ui-react-core/compare/vibe-storybook-components@0.18.0...vibe-storybook-components@0.18.1) (2024-04-10)\n\n**Note:** Version bump only for package vibe-storybook-components\n\n\n\n\n\n# [0.18.0](https://github.com/mondaycom/monday-ui-react-core/compare/vibe-storybook-components@0.17.2...vibe-storybook-components@0.18.0) (2024-04-03)\n\n\n### Features\n\n* **Tooltip:** Rich tooltip ([#2040](https://github.com/mondaycom/monday-ui-react-core/issues/2040)) ([dc0c470](https://github.com/mondaycom/monday-ui-react-core/commit/dc0c470b23e38f93007c1518fc6cc3b07e913d47))\n\n\n\n\n\n## [0.17.2](https://github.com/mondaycom/monday-ui-react-core/compare/vibe-storybook-components@0.17.1...vibe-storybook-components@0.17.2) (2024-03-25)\n\n\n### Bug Fixes\n\n* **build:** dist ([#2038](https://github.com/mondaycom/monday-ui-react-core/issues/2038)) ([a919b7e](https://github.com/mondaycom/monday-ui-react-core/commit/a919b7e0bfdce44c8023e483acbbc404fe52cf01))\n\n\n\n\n\n## 0.17.1 (2024-03-19)\n\n**Note:** Version bump only for package vibe-storybook-components\n\n\n\n\n\n# Changelog\n\n## 0.16.1 (2023-12-05)\n\n#### Bug Fixes\n* [#133](https://github.com/mondaycom/vibe-storybook-components/pull/133) fix: types ([@talkor](https://github.com/talkor))\n\n## 0.16.0 (2023-12-04)\n\n#### New Features\n* [#132](https://github.com/mondaycom/vibe-storybook-components/pull/132) feat(StorybookLink): add size prop ([@talkor](https://github.com/talkor))\n\n## 0.15.1 (2023-12-03)\n\n#### Bug Fixes\n* [#131](https://github.com/mondaycom/vibe-storybook-components/pull/131) fix: export component ([@talkor](https://github.com/talkor))\n\n## 0.15.0 (2023-12-03)\n\n#### New Features\n* [#127](https://github.com/mondaycom/vibe-storybook-components/pull/127) feat: add storybook-link component ([@talkor](https://github.com/talkor))\n\n## 0.14.3 (2023-12-03)\n\n#### Bug Fixes\n* [#130](https://github.com/mondaycom/vibe-storybook-components/pull/130) fix(SidebarItem): add margin to the right ([@talkor](https://github.com/talkor))\n\n## 0.14.2 (2023-11-26)\n\n#### Bug Fixes\n* [#129](https://github.com/mondaycom/vibe-storybook-components/pull/129) fix: <Frame> make className, noBorder, noGutter props not required ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 0.14.1 (2023-11-24)\n\n#### Bug Fixes\n* [#128](https://github.com/mondaycom/vibe-storybook-components/pull/128) fix: <StoryDescription> make className and headerStyle props not required ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 0.14.0 (2023-11-20)\n\n#### New Features\n* [#126](https://github.com/mondaycom/vibe-storybook-components/pull/126) feat(DeprecatedWarning): add children ([@talkor](https://github.com/talkor))\n\n## 0.13.0 (2023-11-16)\n\n#### New Features\n* [#125](https://github.com/mondaycom/vibe-storybook-components/pull/125) feat: add linkTarget to <RelatedComponents> ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 0.12.0 (2023-11-15)\n\n#### New Features\n* [#124](https://github.com/mondaycom/vibe-storybook-components/pull/124) feat: <Link> add target prop ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 0.11.3 (2023-11-15)\n\n#### Bug Fixes\n* [#123](https://github.com/mondaycom/vibe-storybook-components/pull/123) fix: reduce <InformationBox> line-height from 24px to 20px ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 0.11.2 (2023-11-12)\n\n#### Bug Fixes\n* [#122](https://github.com/mondaycom/vibe-storybook-components/pull/122) fix: <InformationBoxTitle> Link withoutSpacing ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 0.11.1 (2023-11-12)\n\n#### Bug Fixes\n* [#120](https://github.com/mondaycom/vibe-storybook-components/pull/120) fix: <DocFooter> use <Link> ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#119](https://github.com/mondaycom/vibe-storybook-components/pull/119) fix: <InformationBoxTitle> use <Link> ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Documentation\n* [#121](https://github.com/mondaycom/vibe-storybook-components/pull/121) docs: remove hacker theme from storybook ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 0.11.0 (2023-10-31)\n\n#### New Features\n* [#117](https://github.com/mondaycom/vibe-storybook-components/pull/117) feat, docs: <GithubContributorsList>, use it on welcome page ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 0.10.3 (2023-10-30)\n\n#### Bug Fixes\n* [#116](https://github.com/mondaycom/vibe-storybook-components/pull/116) chore: cleanup ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Documentation\n* [#115](https://github.com/mondaycom/vibe-storybook-components/pull/115) docs: add story for < FunctionArguments /> and < InformationBox /> ([@Dhoni77](https://github.com/Dhoni77))\n* [#114](https://github.com/mondaycom/vibe-storybook-components/pull/114) Add story for < Title /> component ([@balajik](https://github.com/balajik))\n* [#112](https://github.com/mondaycom/vibe-storybook-components/pull/112) Created basic story for < SectionName />, < AnchorListItem /> ([@balajik](https://github.com/balajik))\n* [#111](https://github.com/mondaycom/vibe-storybook-components/pull/111) docs: add story for < Link /> and < StoryDescription /> ([@Dhoni77](https://github.com/Dhoni77))\n* [#109](https://github.com/mondaycom/vibe-storybook-components/pull/109) docs: add story for < ComponentRules />, < DocFooter /> ([@Dhoni77](https://github.com/Dhoni77))\n\n#### Internal Changes\n* [#113](https://github.com/mondaycom/vibe-storybook-components/pull/113) Add Tip to preview.tsx ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#110](https://github.com/mondaycom/vibe-storybook-components/pull/110) prettier fix + component-name.stories change text ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 0.10.2 (2023-10-23)\n\n#### Bug Fixes\n* [#108](https://github.com/mondaycom/vibe-storybook-components/pull/108) fix(SidebarItem): flex the container ([@talkor](https://github.com/talkor))\n\n## 0.10.1 (2023-10-23)\n\n#### Bug Fixes\n* [#100](https://github.com/mondaycom/vibe-storybook-components/pull/100) fix(SidebarItem): add ellipsis to item name ([@talkor](https://github.com/talkor))\n\n#### Documentation\n* [#99](https://github.com/mondaycom/vibe-storybook-components/pull/99) docs: replace logo in storybook ([@talkor](https://github.com/talkor))\n\n## 0.10.0 (2023-10-23)\n\n#### New Features\n* [#83](https://github.com/mondaycom/vibe-storybook-components/pull/83) feat: Migrate < Link />, < StoryDescription /> to ts ([@Dhoni77](https://github.com/Dhoni77))\n\n#### Internal Changes\n* [#106](https://github.com/mondaycom/vibe-storybook-components/pull/106) chore: prettier fix ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#105](https://github.com/mondaycom/vibe-storybook-components/pull/105) chore: migrate <ColorDescription/> to css modules ([@Dhoni77](https://github.com/Dhoni77))\n\n## 0.9.5 (2023-10-23)\n\n#### Bug Fixes\n* [#98](https://github.com/mondaycom/vibe-storybook-components/pull/98) fix createStoryMettasettings fix types ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Documentation\n* [#93](https://github.com/mondaycom/vibe-storybook-components/pull/93) docs: create basic story for < ComponentDescription />, < UnstyledList /> + < UnstyledListItem /> ([@Dhoni77](https://github.com/Dhoni77))\n* [#95](https://github.com/mondaycom/vibe-storybook-components/pull/95) docs: add story for < TokenTable /> ([@Dhoni77](https://github.com/Dhoni77))\n* [#97](https://github.com/mondaycom/vibe-storybook-components/pull/97) Created story from Paragraph and Frame components ([@balajik](https://github.com/balajik))\n* [#94](https://github.com/mondaycom/vibe-storybook-components/pull/94) docs: Create basic story for < VisualDescription />, < ColorDescription /> ([@Dhoni77](https://github.com/Dhoni77))\n\n#### Internal Changes\n* [#96](https://github.com/mondaycom/vibe-storybook-components/pull/96) Migrated the component to TS ([@balajik](https://github.com/balajik))\n* [#32](https://github.com/mondaycom/vibe-storybook-components/pull/32) ci: add storybook and chromatic workflows ([@talkor](https://github.com/talkor))\n\n## 0.9.4 (2023-10-18)\n\n#### Bug Fixes\n* [#88](https://github.com/mondaycom/vibe-storybook-components/pull/88) fix: dependency issue, upgrade storybook ^7.5.0 ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 0.9.3 (2023-10-18)\n\n#### Bug Fixes\n* [#87](https://github.com/mondaycom/vibe-storybook-components/pull/87) fix: < ComponentName /> use text-color-fixed-dark ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 0.9.2 (2023-10-17)\n\n#### Bug Fixes\n* [#86](https://github.com/mondaycom/vibe-storybook-components/pull/86) chore: fix theme switcher type error ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Documentation\n* [#79](https://github.com/mondaycom/vibe-storybook-components/pull/79) Feat: add theme switching to storybook ([@pedaars](https://github.com/pedaars))\n* [#84](https://github.com/mondaycom/vibe-storybook-components/pull/84) docs: Add story for < ComponentName /> component ([@Dhoni77](https://github.com/Dhoni77))\n\n#### Internal Changes\n* [#85](https://github.com/mondaycom/vibe-storybook-components/pull/85) chore: fix package-lock.json ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#81](https://github.com/mondaycom/vibe-storybook-components/pull/81) Migrated < AnchorListItem />, < ComponentName />, < DocFooter /> to CSS modules ([@balajik](https://github.com/balajik))\n* [#82](https://github.com/mondaycom/vibe-storybook-components/pull/82) Migrated < TokenTable /> , < ColorDescription /> to TS ([@balajik](https://github.com/balajik))\n* [#73](https://github.com/mondaycom/vibe-storybook-components/pull/73) feat: Migrate < ComponentRule />, < ComponentRules /> to css modules ([@Dhoni77](https://github.com/Dhoni77))\n* [#75](https://github.com/mondaycom/vibe-storybook-components/pull/75) Migrated < InformationBox />, < InformationBoxTitle /> to TS ([@balajik](https://github.com/balajik))\n* [#74](https://github.com/mondaycom/vibe-storybook-components/pull/74) Migrated < FunctionArgument />, < FunctionArguments />, < MultipleStoryElementsWrapper /> to TS ([@balajik](https://github.com/balajik))\n* [#65](https://github.com/mondaycom/vibe-storybook-components/pull/65) Convert UnstyledList UnstyledListItem Title to TSX ([@Ryan-Biondo](https://github.com/Ryan-Biondo))\n* [#70](https://github.com/mondaycom/vibe-storybook-components/pull/70) TS migration: < SectionName />, < RelatedComponent />, < RelatedComponents /> ([@Kritik-J](https://github.com/Kritik-J))\n* [#72](https://github.com/mondaycom/vibe-storybook-components/pull/72) infra: add build into test-workflow.yml ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 0.9.1 (2023-10-16)\n\n#### Bug Fixes\n* [#71](https://github.com/mondaycom/vibe-storybook-components/pull/71) fix: build issues ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#59](https://github.com/mondaycom/vibe-storybook-components/pull/59) feat: migrated < Paragrapgh />, < MultipleStoryElementsWrapper />, < Link /> to scss modules ([@Dhoni77](https://github.com/Dhoni77))\n* [#67](https://github.com/mondaycom/vibe-storybook-components/pull/67) TS migration: < UsageGuidelines />, < VisualDescription /> ([@Kritik-J](https://github.com/Kritik-J))\n* [#58](https://github.com/mondaycom/vibe-storybook-components/pull/58) Migrated <AnchorListItem>, <ComponentDescription>, <ComponentName> components to TS ([@balajik](https://github.com/balajik))\n* [#60](https://github.com/mondaycom/vibe-storybook-components/pull/60) TS migration: < ComponentRule />, < ComponentRules /> ([@Kritik-J](https://github.com/Kritik-J))\n* [#57](https://github.com/mondaycom/vibe-storybook-components/pull/57) Migrated < DocFooter />, < Frame />, < Paragraph /> and also child component <SectionName /> to TS ([@balajik](https://github.com/balajik))\n* [#55](https://github.com/mondaycom/vibe-storybook-components/pull/55) Migrated < InformationBox />, < InformationBoxTitle />, < Frame /> to CSS modules ([@balajik](https://github.com/balajik))\n* [#54](https://github.com/mondaycom/vibe-storybook-components/pull/54) CSS modules migration: < SectionName />, < RelatedComponent />, < RelatedComponents /> ([@Kritik-J](https://github.com/Kritik-J))\n* [#53](https://github.com/mondaycom/vibe-storybook-components/pull/53) chore: prettier cleanup ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#51](https://github.com/mondaycom/vibe-storybook-components/pull/51) CSS modules migration: < UnstyledList />, < UnstyledListItem />, < Title />  ([@Kritik-J](https://github.com/Kritik-J))\n* [#52](https://github.com/mondaycom/vibe-storybook-components/pull/52) CSS modules migration: < UsageGuidelines />, < VisualDescription /> ([@Kritik-J](https://github.com/Kritik-J))\n\n## 0.9.0 (2023-10-10)\n\n#### New Features\n* [#48](https://github.com/mondaycom/vibe-storybook-components/pull/48) Add sidebar item ([@talkor](https://github.com/talkor))\n\n## 0.8.0 (2023-10-09)\n\n#### New Features\n* [#47](https://github.com/mondaycom/vibe-storybook-components/pull/47) feat: mixin sb-basic-text - disable font smoothing ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 0.7.1 (2023-10-09)\n\n#### Bug Fixes\n* [#34](https://github.com/mondaycom/vibe-storybook-components/pull/34) Export Tip, AlphaWarning, DeprecatedWarning components ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Documentation\n* [#36](https://github.com/mondaycom/vibe-storybook-components/pull/36) docs: TYPESCRIPT_MIGRATION.md ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#46](https://github.com/mondaycom/vibe-storybook-components/pull/46) docs: CSS_MODULES_MIGRATION.md ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#35](https://github.com/mondaycom/vibe-storybook-components/pull/35) Export components withStaticProps ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 0.7.0 (2023-10-05)\n\n#### New Features\n* [#33](https://github.com/mondaycom/vibe-storybook-components/pull/33) feat: add StatusTag ([@talkor](https://github.com/talkor))\n\n## 0.6.0 (2023-10-05)\n\n#### New Features\n* [#30](https://github.com/mondaycom/vibe-storybook-components/pull/30) feat: createMetastorySettings - string type for ContentElement controls, disable action controls ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 0.5.0 (2023-10-05)\n\n#### New Features\n* [#28](https://github.com/mondaycom/vibe-storybook-components/pull/28) createStoryMetaSettings.js add ignoreControlsPropNamesArray ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Documentation\n* [#26](https://github.com/mondaycom/vibe-storybook-components/pull/26) docs: contibuting.md + components_documentation_guidelines.md ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#23](https://github.com/mondaycom/vibe-storybook-components/pull/23) docs(Storybook): document UsageGuidelines ([@talkor](https://github.com/talkor))\n\n#### Internal Changes\n* [#27](https://github.com/mondaycom/vibe-storybook-components/pull/27) infra: test-workflow.yml - remove push trigger ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 0.4.0 (2023-10-02)\n\n#### New Features\n* [#22](https://github.com/mondaycom/vibe-storybook-components/pull/22) Replace Rubik with Noto Sans Hebrew ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 0.3.0 (2023-10-01)\n\n#### New Features\n* [#20](https://github.com/mondaycom/vibe-storybook-components/pull/20) Add mising color tokens ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 0.2.2 (2023-10-01)\n\n#### Bug Fixes\n* [#19](https://github.com/mondaycom/vibe-storybook-components/pull/19) fix(UsageGuidelines): wrap content in a span ([@talkor](https://github.com/talkor))\n\n## 0.2.1 (2023-08-28)\n\n#### Bug Fixes\n* [#18](https://github.com/mondaycom/vibe-storybook-components/pull/18) fix: export sb-icon-color ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 0.2.0 (2023-08-23)\n\n#### New Features\n* [#17](https://github.com/mondaycom/vibe-storybook-components/pull/17) Export scss tokens and mixins ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#16](https://github.com/mondaycom/vibe-storybook-components/pull/16) Chore: storybook infra cleanup + variables cleanup ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#15](https://github.com/mondaycom/vibe-storybook-components/pull/15) infra: tests in ci/cd ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 0.1.0 (2023-08-01)\n\n#### Internal Changes\n* [#14](https://github.com/mondaycom/vibe-storybook-components/pull/14) fix: release process - remove require statement from release.mjs script ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#13](https://github.com/mondaycom/vibe-storybook-components/pull/13) fix: release process - __dirname ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#12](https://github.com/mondaycom/vibe-storybook-components/pull/12) fix: Remove boxt from release.mjs ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 0.0.2 (2023-07-23)\n\n#### Documentation\n* [#9](https://github.com/mondaycom/vibe-storybook-components/pull/9) Changelog story ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n#### Internal Changes\n* [#8](https://github.com/mondaycom/vibe-storybook-components/pull/8) Install lerna-changelog ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#7](https://github.com/mondaycom/vibe-storybook-components/pull/7) Remove test:coverage, prerelease, improve eslint ([@SergeyRoyt](https://github.com/SergeyRoyt))\n* [#6](https://github.com/mondaycom/vibe-storybook-components/pull/6) Fix eslint issues ([@SergeyRoyt](https://github.com/SergeyRoyt))\n\n## 0.0.1 (2023-07-20)\n\n* [Initial PR](https://github.com/mondaycom/vibe-storybook-components/pull/1)\n"
  },
  {
    "path": "packages/storybook-blocks/LICENSE",
    "content": "MIT License\n\nCopyright (c) 2023 monday.com\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "packages/storybook-blocks/README.md",
    "content": "# Vibe Storybook Components\n\n![image](https://user-images.githubusercontent.com/60314759/147566893-63c5209a-8b83-4f32-af61-8b4c350ec770.png)\n\n[monday.com](https://www.monday.com) Collection of Storybook components, with which [Vibe](https://github.com/mondaycom/vibe) storybook is built - [vibe.monday.com](https://vibe.monday.com).\n\n## Installation\n\nInstall the component library\n\n```\n$ npm install vibe-storybook-components\n```\n\n## Usage\n\n**Styles**: Import the library's styles in your storybook `preview.js` file:\n\n```javascript\nimport 'vibe-storybook-components/index.css';\n```\n\n**Components**:\nThere are 2 ways to use the components:\n\n1. Import the components from the library's main entry, like this:\n\n```javascript\nimport { ComponentName } from 'vibe-storybook-components';\n```\n\nand then use in a story like this:\n\n```mdxjs\n<ComponentName>Button</ComponentName>\n```\n\n2. Import and map the components once in the storybook's `preview.js` file, like this:\n\n```javascript\nimport { ComponentName } from 'vibe-storybook-components';\n```\n\n```javascript\nimport { ComponentName } from 'vibe-storybook-components';\n...\naddParameters({\n  docs: {\n    components: {\n      h1: ComponentName,\n      ComponentName\n    },\n  },\n});\n```\n\nand then use in the storybook's markdown files like this:\n\n```mdxjs\n# Button\n```\n\nor like this\n\n```mdxjs\n<h1>Button</h1>\n```\n\nor like this without a corresponding import\n\n```mdxjs\n<ComponentName>Button</ComponentName>\n```\n\n### Styling\n\nMost of the components have a `className` prop that can be used to style them. The className prop is a string that is added to the component's class list. The className prop is not required, but it's recommended to use it for styling.\n\n## Storybook\n\n![Work in Progress](https://img.shields.io/badge/status-WIP-orange.svg)  \n<b>[Storybook content is in active development.]</b>\n\nTo run the storybook locally run this command:\n\n```\nyarn storybook\n```\n\nthe storybook will hosted on http://localhost:6005\n\n## Developing locally with your consumer application\n\nWhen developing locally we are using a npm functionality called yarn link, this allows us to\nwork locally on our package and use it in a different project without publishing.\nThis functionality basically overrides the npm mapping between package name to its repo, and points it to where the package is located locally.\n\n### Troubleshooting local development\n\n- If you are using NVM, make sure both packages are using the same version.\n- Because we are using react hooks and having react as a peerDependency - if you want to develop locally and encounter issues with \"invalid hook call\" [See this github thread](https://github.com/facebook/react/issues/13991). The quick fix is in your webpack config file alias react to resolve the node_modules path\n\ngo to the project's directory and run:\n\n```\nnvm use\nyarn unlink\nyarn link\nnpm start\n```\n"
  },
  {
    "path": "packages/storybook-blocks/__mocks__/fileMock.js",
    "content": "const path = require('path');\n\nmodule.exports = {\n  process(src, filename) {\n    return { code: `module.exports = ${JSON.stringify(path.basename(filename))};` };\n  },\n};\n"
  },
  {
    "path": "packages/storybook-blocks/__mocks__/styleMock.js",
    "content": "module.exports = {\n  process(src, filename) {\n    return { code: '' };\n  },\n};\n"
  },
  {
    "path": "packages/storybook-blocks/eslint/resolver.js",
    "content": "const path = require('path');\nconst { resolve: resolveExports } = require('resolve.exports');\n\n// optionally handle NodeJS built-ins just in case not handled by another ESLint module resolver in the chain\nconst { builtinModules } = require('module');\nconst builtins = new Set(builtinModules);\n\n/**\n * @param {string} source source\n * @param {string} file file\n * @param {Object} _config config\n */\nconst resolve = (source, file, _config) => {\n  if (builtins.has(source)) {\n    // return { found: false }; // this also works?\n    return { found: true, path: null };\n  }\n  try {\n    const moduleId = require.resolve(source, { paths: [path.dirname(file)] });\n\n    if (builtinModules.includes(moduleId)) {\n      return { found: false };\n    }\n\n    return { found: true, path: moduleId };\n  } catch (/** @type {any} */ err) {\n    if (err.code === 'MODULE_NOT_FOUND' && err.path?.endsWith('/package.json')) {\n      const { name, module, main, exports } = require(err.path);\n      const resolved = resolveExports({ name, module, main, exports }, source);\n      const moduleId = path.join(path.dirname(err.path), resolved);\n      return { found: true, path: moduleId };\n    }\n    return { found: false };\n  }\n};\n\nmodule.exports = {\n  interfaceVersion: 2,\n  resolve,\n};\n"
  },
  {
    "path": "packages/storybook-blocks/jest.config.ts",
    "content": "const rootDir = process.cwd();\n\nmodule.exports = {\n  rootDir,\n  clearMocks: true,\n  coverageDirectory: 'coverage',\n  moduleFileExtensions: ['js', 'json', 'jsx', 'ts', 'tsx', 'node', 'mdx'],\n  moduleNameMapper: {\n    '\\\\.module\\\\.scss$': 'identity-obj-proxy',\n    '\\\\.(css|less|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',\n  },\n  modulePathIgnorePatterns: ['<rootDir>/dist', '<rootDir>/build'],\n  preset: 'ts-jest/presets/default',\n  testEnvironment: 'jest-environment-jsdom',\n  testMatch: ['**/__tests__/**/*.test.[jt]s?(x)'],\n  transform: {\n    '^.+\\\\.jsx?$': 'babel-jest',\n    '^.+\\\\.(tx|tsx)$': 'ts-jest',\n    '\\\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|svg)$':\n      '<rootDir>/__mocks__/fileMock.js',\n  },\n};\n"
  },
  {
    "path": "packages/storybook-blocks/package.json",
    "content": "{\n  \"name\": \"vibe-storybook-components\",\n  \"version\": \"4.0.0\",\n  \"description\": \"Collection of Vibe's Storybook components\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/mondaycom/vibe.git\",\n    \"directory\": \"packages/storybook-blocks\"\n  },\n  \"author\": \"monday.com\",\n  \"license\": \"MIT\",\n  \"sideEffects\": [\n    \"*.scss\",\n    \"*.css\"\n  ],\n  \"main\": \"dist/index.js\",\n  \"files\": [\n    \"dist/\",\n    \"src/\",\n    \"README.md\"\n  ],\n  \"exports\": {\n    \".\": \"./dist/index.js\",\n    \"./index.css\": \"./dist/index.css\",\n    \"./mixins\": \"./dist/_mixins.scss\",\n    \"./types\": \"./dist/types/published-types.d.ts\",\n    \"./package.json\": \"./package.json\",\n    \"./dist/\": \"./dist/\"\n  },\n  \"typesVersions\": {\n    \"*\": {\n      \"types\": [\n        \"./dist/types/published-types.d.ts\"\n      ]\n    }\n  },\n  \"scripts\": {\n    \"build\": \"rollup -c --bundleConfigAsCjs && yarn copy-mixins-to-dist\",\n    \"copy-mixins-to-dist\": \"scripts/copy-mixins-to-dist.sh\",\n    \"lint\": \"eslint \\\"./src/**/*.{js,jsx,ts,tsx}\\\"\",\n    \"lint:fix\": \"eslint \\\"./src/**/*.{js,jsx,ts,tsx}\\\" --fix\",\n    \"prettier:fix\": \"prettier --write \\\"{,!(node_modules)/**/}*.{js,jsx,ts,tsx}\\\"\",\n    \"test\": \"jest --passWithNoTests\",\n    \"test:update\": \"yarn test -u\"\n  },\n  \"dependencies\": {\n    \"@storybook/types\": \"^7.5.0\",\n    \"browserslist-config-monday\": \"^1.0.6\",\n    \"classnames\": \"^2.3.2\"\n  },\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.22.9\",\n    \"@babel/plugin-proposal-class-properties\": \"^7.16.7\",\n    \"@babel/plugin-transform-react-jsx\": \"^7.22.5\",\n    \"@babel/preset-env\": \"^7.22.9\",\n    \"@babel/preset-react\": \"^7.22.5\",\n    \"@babel/preset-typescript\": \"^7.22.5\",\n    \"@rollup/plugin-babel\": \"^6.0.2\",\n    \"@rollup/plugin-commonjs\": \"^25.0.3\",\n    \"@rollup/plugin-json\": \"^6.0.0\",\n    \"@rollup/plugin-node-resolve\": \"^15.1.0\",\n    \"@rollup/plugin-terser\": \"^0.4.3\",\n    \"@storybook/addon-actions\": \"^8.6.15\",\n    \"@storybook/addon-links\": \"^8.6.15\",\n    \"@storybook/react\": \"^8.6.15\",\n    \"@testing-library/jest-dom\": \"^5.17.0\",\n    \"@testing-library/react\": \"^12.1.2\",\n    \"@typescript-eslint/eslint-plugin\": \"^6.2.0\",\n    \"@typescript-eslint/parser\": \"^6.2.0\",\n    \"autoprefixer\": \"^10.4.14\",\n    \"chalk\": \"^5.3.0\",\n    \"eslint\": \"^8.45.0\",\n    \"eslint-config-airbnb\": \"^19.0.4\",\n    \"eslint-config-prettier\": \"^8.9.0\",\n    \"eslint-import-resolver-typescript\": \"^3.5.5\",\n    \"eslint-plugin-import\": \"^2.26.0\",\n    \"eslint-plugin-jest\": \"^27.2.3\",\n    \"eslint-plugin-json\": \"^3.1.0\",\n    \"eslint-plugin-markdown\": \"^3.0.0\",\n    \"eslint-plugin-prettier\": \"^5.0.0\",\n    \"eslint-plugin-react\": \"^7.33.0\",\n    \"execa\": \"^7.2.0\",\n    \"identity-obj-proxy\": \"^3.0.0\",\n    \"jest\": \"^29.7.0\",\n    \"jest-environment-jsdom\": \"^29.7.0\",\n    \"mini-css-extract-plugin\": \"^2.6.0\",\n    \"mocha\": \"^10.2.0\",\n    \"postcss\": \"^8.4.27\",\n    \"prettier\": \"^3.0.0\",\n    \"prop-types\": \"^15.8.1\",\n    \"react\": \"^16.14.0\",\n    \"react-dom\": \"^16.14.0\",\n    \"react-test-renderer\": \"^16.14.0\",\n    \"rollup\": \"^3.26.3\",\n    \"rollup-plugin-postcss\": \"^4.0.2\",\n    \"rollup-plugin-svg\": \"^2.0.0\",\n    \"rollup-plugin-typescript2\": \"^0.35.0\",\n    \"ts-jest\": \"^29.1.2\",\n    \"typescript\": \"^5.9.3\",\n    \"typescript-plugin-css-modules\": \"^5.0.1\"\n  },\n  \"peerDependencies\": {\n    \"react\": \">=16.9.0\",\n    \"react-dom\": \">=16.9.0\"\n  },\n  \"browserslist\": [\n    \"extends browserslist-config-monday\"\n  ]\n}\n"
  },
  {
    "path": "packages/storybook-blocks/rollup.config.js",
    "content": "import * as path from 'path';\nimport nodeResolve from '@rollup/plugin-node-resolve';\nimport babel from '@rollup/plugin-babel';\nimport commonjs from '@rollup/plugin-commonjs';\nimport json from '@rollup/plugin-json';\nimport typescript from 'rollup-plugin-typescript2';\nimport terser from '@rollup/plugin-terser';\nimport postcss from 'rollup-plugin-postcss';\nimport autoprefixer from 'autoprefixer';\nimport svg from 'rollup-plugin-svg';\n\nconst EXTENSIONS = ['.js', '.jsx', '.ts', '.tsx'];\nconst ROOT_PATH = path.join(__dirname);\nconst SRC_PATH = path.join(ROOT_PATH, 'src');\nconst DIST_PATH = path.join(ROOT_PATH, 'dist');\n\nexport default {\n  output: {\n    dir: DIST_PATH,\n    indent: false,\n    strict: false,\n    exports: 'named',\n    preserveModules: true,\n    preserveModulesRoot: '.',\n  },\n  input: {\n    index: path.join(SRC_PATH, 'index.ts'),\n  },\n  external: [/node_modules/],\n  plugins: [\n    svg(),\n    commonjs(),\n    json(),\n    nodeResolve({\n      extensions: [...EXTENSIONS, '.json', '.css'],\n    }),\n    typescript({\n      tsconfig: path.join(ROOT_PATH, 'tsconfig.json'),\n    }),\n    babel({\n      babelHelpers: 'bundled',\n      presets: ['@babel/preset-react'],\n      extensions: EXTENSIONS,\n    }),\n    terser({\n      compress: {\n        pure_getters: true,\n        unsafe: true,\n        unsafe_comps: true,\n      },\n    }),\n    postcss({\n      use: [\n        [\n          'sass',\n          {\n            includePaths: ['src'],\n          },\n        ],\n      ],\n      extensions: ['.css', '.scss'],\n      extract: true,\n      minimize: true,\n      plugins: [autoprefixer()],\n      autoModules: true,\n    }),\n  ],\n};\n"
  },
  {
    "path": "packages/storybook-blocks/scripts/copy-mixins-to-dist.sh",
    "content": "#!/bin/bash\n\n# Define the source and destination paths\nsource_folder=\"./src/styles/mixins\"\ndestination_folder=\"./dist/styles\"\n\n# Create folder if doesn't exist\nif [ ! -d \"$destination_folder\" ]; then\n    mkdir -p \"$destination_folder\"\nfi\n\n# Copy the styles folder and its contents\ncp -r \"$source_folder\" \"$destination_folder\"\n\n# Create index file in the dist root\necho \"@import './styles/mixins';\" >> \"./dist/_mixins.scss\"\n\n# Display success message\necho \"File ./dist/_mixins.scss successfully created.\"\necho \"Folder $source_folder successfully copied to $destination_folder.\""
  },
  {
    "path": "packages/storybook-blocks/src/components/alpha-warning/__stories__/alpha-warning.mdx",
    "content": "import { Controls, Canvas, Meta } from '@storybook/blocks';\nimport * as AlphaWarningStories from './alpha-warning.stories';\n\n<Meta of={AlphaWarningStories} />\n\n# AlphaWarning\n\n## Overview\n\nThis component is a version of the <Link href=\"?path=/docs/components-tip--docs\">Tip</Link> component with constanst props.\n\n<Canvas of={AlphaWarningStories.Overview} />\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/alpha-warning/__stories__/alpha-warning.stories.tsx",
    "content": "import type { Meta, StoryObj } from '@storybook/react';\nimport AlphaWarning from '../alpha-warning';\n\nconst meta: Meta<typeof AlphaWarning> = {\n  component: AlphaWarning,\n  title: 'Storybook Blocks/AlphaWarning',\n};\nexport default meta;\n\ntype Story = StoryObj<typeof AlphaWarning>;\n\nexport const Overview: Story = {};\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/alpha-warning/alpha-warning.tsx",
    "content": "import { FC } from 'react';\nimport Tip from '../tip/tip';\n\nconst AlphaWarning: FC = () => (\n  <Tip emoji=\"🚧\" title=\"Alpha component\" type={Tip.types.WARNING}>\n    This component is currently being developed and is ready for exploratory usage. Please note that there may be\n    breaking changes in future minor version updates and use with caution.\n  </Tip>\n);\n\nexport default AlphaWarning;\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/anchor-list-item/README.md",
    "content": "# AnchorListItem\nThis component is displayed whenever a component's mdx file displays an item in the list.\nIn practice, we use lists in these files when we want to build table of contents.\n\n## Guidelines\n- Each anchor list item in a component MDX file should be linked to a section name title with the same name as the anchor list item.\n- For creating an item in the table of contents in an MDX file, which is called \"Section name\" and linked to a section name with the same value, please create a table of contents item with the following syntax: [Section name] (# section-name)\n- When anchor list item name contains multiple words - use a capital letter only for the first letter of the first word.\n\n## Props\nnot relevant for mdx files\n\nProp | Description\n--- | ---\nChildren | Anchor list item content\n\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/anchor-list-item/__stories__/anchor-list-item.mdx",
    "content": "import { Controls, Canvas, Meta } from '@storybook/blocks';\nimport * as AnchorListItemStory from './anchor-list-item.stories';\n\n<Meta of={AnchorListItemStory} />\n\n# AnchorListItem\n\n## Overview\n\nAnchorListItem is a component that display an item in the list. Can be used as a replacement for `li` tag in `preview` file - serves to build story page navigation.\n\n<Canvas of={AnchorListItemStory.Overview} />\n\n## Props\n\n<Controls />\n\n<Tip title=\"Not what you were looking for?\">\n  If you need to render list in the story text check out the<Link href=\"/?path=/docs/components-unstyledlist--docs\" size={Link.sizes.SMALL}>UnstyledList</Link>component.\n</Tip>\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/anchor-list-item/__stories__/anchor-list-item.stories.tsx",
    "content": "import type { Meta, StoryObj } from '@storybook/react';\nimport AnchorListItem from '../anchor-list-item';\n\nconst meta: Meta<typeof AnchorListItem> = {\n  component: AnchorListItem,\n  title: 'Storybook Blocks/AnchorListItem',\n};\nexport default meta;\n\ntype Story = StoryObj<typeof AnchorListItem>;\n\nexport const Overview: Story = {\n  args: {\n    children: 'This is a anchor list item',\n  },\n};\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/anchor-list-item/anchor-list-item.module.scss",
    "content": ".anchorListItem {\n  line-height: var(--sb-text-line-height);\n\n  &:not(:last-child) {\n    margin-bottom: var(--sb-spacing-small);\n  }\n\n  a {\n    color: var(--sb-link-color);\n  }\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/anchor-list-item/anchor-list-item.tsx",
    "content": "import { FC } from 'react';\nimport styles from './anchor-list-item.module.scss';\nimport { ElementContent } from '../../types';\n\ntype AnchorListItemProps = {\n  children?: ElementContent;\n};\n\nconst AnchorListItem: FC<AnchorListItemProps> = ({ children = null }) => (\n  <li className={styles.anchorListItem}>{children}</li>\n);\n\nexport default AnchorListItem;\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/color-description/__stories__/color-description.mdx",
    "content": "import { Controls, Canvas, Meta } from '@storybook/blocks';\nimport * as ColorDescription from './color-description.stories';\n\n<Meta of={ColorDescription} />\n\n# ColorDescription\n\n## Overview\n\nColorDescription component is used to display a color description.\nIt combines the<Link href={\"/?path=/docs/components-visualdescription--docs\"}>VisualDescription</Link>component with a colored square to visually represent a specific color.\n\n<Canvas of={ColorDescription.Overview} />\n\n## Props\n\n<Controls />\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/color-description/__stories__/color-description.stories.tsx",
    "content": "import type { Meta, StoryObj } from '@storybook/react';\nimport ColorDescription from '../color-description';\n\nconst meta: Meta<typeof ColorDescription> = {\n  component: ColorDescription,\n  title: 'Storybook Blocks/ColorDescription',\n};\nexport default meta;\n\ntype Story = StoryObj<typeof ColorDescription>;\n\nexport const Overview: Story = {\n  args: {\n    colorName: 'sb-positive-color',\n    description: 'This is a description',\n    withBorder: false,\n  },\n};\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/color-description/color-description.module.scss",
    "content": ".colorDescription {\n  border-radius: var(--sb-border-radius-extra-small);\n  &.withBorder {\n    border: 1px solid;\n    border-color: var(--sb-ui-border-color);\n  }\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/color-description/color-description.tsx",
    "content": "import { FC } from 'react';\nimport cx from 'classnames';\nimport VisualDescription from '../visual-description/visual-description';\nimport styles from './color-description.module.scss';\n\ntype ColorDescriptionProps = {\n  colorName: string;\n  description: string;\n  withBorder: boolean;\n};\n\nconst ColorDescription: FC<ColorDescriptionProps> = ({ colorName, description, withBorder }) => {\n  const color = (\n    <div\n      className={cx(styles.colorDescription, {\n        [styles.withBorder]: withBorder,\n      })}\n      style={{ backgroundColor: `var(--${colorName})` }}\n    />\n  );\n\n  return (\n    <VisualDescription title={colorName} description={description} ariaLabel={description}>\n      {color}\n    </VisualDescription>\n  );\n};\n\nexport default ColorDescription;\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/component-name/__stories__/component-name.mdx",
    "content": "import { Controls, Canvas, Meta } from '@storybook/blocks';\nimport * as ComponentNameStory from './component-name.stories';\n\n<Meta of={ComponentNameStory} />\n\n# ComponentName\n\n## Overview\n\nComponentName is a component that displays the name of the component.\nThis component can be used as a replacement for `h1` using storybook `preview` file.\n\n<Canvas of={ComponentNameStory.Overview} />\n\n## Props\n\n<Controls />\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/component-name/__stories__/component-name.stories.tsx",
    "content": "import type { Meta, StoryObj } from '@storybook/react';\nimport ComponentName from '../component-name';\n\nconst meta: Meta<typeof ComponentName> = {\n  component: ComponentName,\n  title: 'Storybook Blocks/ComponentName',\n};\nexport default meta;\n\ntype Story = StoryObj<typeof ComponentName>;\n\nexport const Overview: Story = {\n  args: {\n    children: 'Component Name',\n  },\n};\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/component-name/component-name.module.scss",
    "content": "@import '../../styles/mixins/typography';\n\n.componentName {\n  @include sb-basic-text;\n  font-family: var(--sb-title-font-family);\n  font-size: var(--sb-h1-font-size);\n  line-height: 48px;\n  font-weight: 700;\n  letter-spacing: -0.24px;\n  text-align: left;\n  color: var(--sb-primary-text-color);\n  margin: 0;\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/component-name/component-name.tsx",
    "content": "import { FC } from 'react';\nimport cx from 'classnames';\nimport styles from './component-name.module.scss';\n\ntype ComponentNameProps = {\n  children: string;\n  className: string;\n};\n\nconst ComponentName: FC<ComponentNameProps> = ({ children, className }) => (\n  <h1 className={cx(styles.componentName, className)}>{children}</h1>\n);\n\nexport default ComponentName;\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/component-rule/component-rule-constants.ts",
    "content": "export const COMPONENT_RULE_BASE_CSS_CLASS = 'vibe-sb-comps-component-rule';\nexport const RECOMMENDED_TITLE = 'Do';\nexport const NOT_RECOMMENDED_TITLE = \"Don't\";\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/component-rule/component-rule.module.scss",
    "content": "@import '../../styles/mixins/typography';\n\n.componentRule {\n  .component {\n    margin: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 200px;\n    border-radius: var(--sb-border-radius-medium);\n    background: var(--sb-dark-background-on-secondary-color);\n    & > * {\n      margin-right: var(--sb-spacing-small);\n    }\n\n    & > video {\n      object-fit: contain;\n      object-position: center;\n      width: calc(100% - 10px);\n      height: calc(100% - 10px);\n    }\n  }\n\n  .title {\n    @include sb-content-text;\n    margin-bottom: var(--sb-spacing-small);\n    margin-top: var(--sb-spacing-medium);\n    font-weight: 700;\n    display: flex;\n    align-items: center;\n  }\n\n  .icon {\n    width: 20px;\n    height: 20px;\n    border-radius: var(--sb-border-radius-small);\n    margin-right: var(--sb-spacing-small-medium);\n    color: var(--sb-text-color-on-primary);\n  }\n\n  .description {\n    @include sb-content-text;\n    font-weight: 400;\n  }\n\n  &.recommended {\n    .icon {\n      background: var(--sb-positive-color);\n    }\n  }\n\n  &.notRecommended {\n    .icon {\n      background: var(--sb-negative-color);\n    }\n  }\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/component-rule/component-rule.tsx",
    "content": "import React from 'react';\nimport cx from 'classnames';\nimport Check from '../../helpers/components/Icons/Check';\nimport CloseSmall from '../../helpers/components/Icons/CloseSmall';\nimport { RECOMMENDED_TITLE, NOT_RECOMMENDED_TITLE } from './component-rule-constants';\nimport { ElementContent } from '../../types';\nimport styles from './component-rule.module.scss';\n\ninterface ComponentRuleProps {\n  component: ElementContent;\n  description: ElementContent;\n  isRecommended: boolean;\n  className?: string;\n  componentContainerClassName?: string;\n}\n\nconst ComponentRule: React.FC<ComponentRuleProps> = ({\n  component,\n  description = '',\n  isRecommended = false,\n  className,\n  componentContainerClassName,\n}) => {\n  const titleIcon = isRecommended ? <Check className={styles.icon} /> : <CloseSmall className={styles.icon} />;\n  const title = isRecommended ? RECOMMENDED_TITLE : NOT_RECOMMENDED_TITLE;\n\n  return (\n    <section\n      className={cx(\n        styles.componentRule,\n        {\n          [styles.recommended]: isRecommended,\n          [styles.notRecommended]: !isRecommended,\n        },\n        className,\n      )}\n    >\n      <figure className={cx(styles.component, componentContainerClassName)}>{component}</figure>\n      <h5 className={styles.title}>\n        {titleIcon}\n        {title}\n      </h5>\n      <section className={styles.description}>{description}</section>\n    </section>\n  );\n};\n\nexport default ComponentRule;\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/component-rules/__stories__/component-rules.mdx",
    "content": "import { Controls, Canvas, Meta } from '@storybook/blocks';\nimport * as ComponentRules from './component-rules.stories';\n\n<Meta of={ComponentRules} />\n\n# ComponentRules\n\n## Overview\n\nThe ComponentRules component serves as a guide to illustrate the recommended practices and common pitfalls when utilizing a specific component.\n\n<Canvas of={ComponentRules.Overview} />\n\n## Props\n\n<Controls />\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/component-rules/__stories__/component-rules.stories.tsx",
    "content": "import type { Meta, StoryObj } from '@storybook/react';\nimport ComponentRules from '../component-rules';\nimport ComponentName from '../../component-name/component-name';\n\nconst meta: Meta<typeof ComponentRules> = {\n  component: ComponentRules,\n  title: 'Storybook Blocks/ComponentRules',\n};\nexport default meta;\n\ntype Story = StoryObj<typeof ComponentRules>;\n\nexport const Overview: Story = {\n  args: {\n    rules: [\n      {\n        positive: {\n          component: <ComponentName className=\"\">Hello world</ComponentName>,\n          description: 'Always capitalize the first letter of the first word in the heading.',\n        },\n        negative: {\n          component: <ComponentName className=\"\">Hello World</ComponentName>,\n          description: 'Please avoid capitalizing the first letter of each word in the heading.',\n        },\n      },\n    ],\n  },\n};\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/component-rules/component-rules.module.scss",
    "content": "@import '../../styles/mixins/layout';\n\n$component-rules-grid-gap: var(--sb-spacing-xxl);\n$component-rules-cell-min-width: $sb-grid-auto-fit-cell-width-xl;\n$component-rules-grid-cell-array-calc: calc(50% - #{$component-rules-grid-gap});\n\n.componentRules {\n  .pair {\n    margin-bottom: 80px;\n    @include sb-grid-auto-fit(\n      $grid-gap: $component-rules-grid-gap,\n      $grid-cell-min-width: $component-rules-cell-min-width,\n      $grid-cell-array-calc: $component-rules-grid-cell-array-calc\n    );\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/component-rules/component-rules.tsx",
    "content": "import React, { useMemo } from 'react';\nimport cx from 'classnames';\nimport ComponentRule from '../component-rule/component-rule';\nimport { ElementContent } from '../../types';\nimport styles from './component-rules.module.scss';\n\ninterface ComponentRulesProps {\n  rules: {\n    positive: {\n      component: ElementContent;\n      description: string | ElementContent;\n    };\n    negative: {\n      component: ElementContent;\n      description: string | ElementContent;\n    };\n    className?: string;\n    componentContainerClassName?: string;\n  }[];\n  className?: string;\n}\n\nconst ComponentRules: React.FC<ComponentRulesProps> = ({ rules = [], className }) => {\n  const componentRulesElements = useMemo(\n    () =>\n      rules.map((rule, index) => {\n        const key = `rule-${index}`;\n\n        return (\n          <section className={cx(styles.pair, className)} key={key}>\n            <ComponentRule\n              component={rule.positive.component}\n              description={rule.positive.description}\n              className={rule.className}\n              componentContainerClassName={rule.componentContainerClassName}\n              isRecommended\n            />\n            <ComponentRule\n              component={rule.negative.component}\n              description={rule.negative.description}\n              className={rule.className}\n              componentContainerClassName={rule.componentContainerClassName}\n              isRecommended={false}\n            />\n          </section>\n        );\n      }),\n    [className, rules],\n  );\n\n  return <article className={styles.componentRules}>{componentRulesElements}</article>;\n};\n\nexport default ComponentRules;\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/deprecated-warning/__stories__/deprecated-warning.mdx",
    "content": "import { Controls, Canvas, Meta } from '@storybook/blocks';\nimport * as DeprecatedWarningStories from './deprecated-warning.stories';\n\n<Meta of={DeprecatedWarningStories} />\n\n# DeprecatedWarning\n\n## Overview\n\nThis component is a version of the <Link href=\"?path=/docs/components-tip--docs\">Tip</Link> component with constanst props.\n\n<Canvas of={DeprecatedWarningStories.Overview} />\n\n## Props\n\n<Controls />\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/deprecated-warning/__stories__/deprecated-warning.stories.tsx",
    "content": "import type { Meta, StoryObj } from '@storybook/react';\nimport DeprecatedWarning from '../deprecated-warning';\n\nconst meta: Meta<typeof DeprecatedWarning> = {\n  component: DeprecatedWarning,\n  title: 'Storybook Blocks/DeprecatedWarning',\n};\nexport default meta;\n\ntype Story = StoryObj<typeof DeprecatedWarning>;\n\nexport const Overview: Story = {\n  args: {\n    alternativeName: 'NewComponent',\n    alternativeLink: '#',\n  },\n};\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/deprecated-warning/deprecated-warning.tsx",
    "content": "import { FC } from 'react';\nimport Link from '../link/link';\nimport Tip from '../tip/tip';\nimport { ElementContent } from '../../types';\n\ninterface DeprecatedWarningProps {\n  alternativeName: string;\n  alternativeLink: string;\n  additionalContent: ElementContent;\n}\n\nconst DeprecatedWarning: FC<DeprecatedWarningProps> = ({ alternativeName, alternativeLink, additionalContent }) => (\n  <Tip emoji=\"🚨\" title=\"Deprecated component\" type={Tip.types.DANGER}>\n    <>\n      This is a legacy component and will be deprecated in the next major version. Please consider using the\n      <Link href={alternativeLink} size={Link.sizes.SMALL}>\n        {alternativeName}\n      </Link>\n      component for your needs instead.\n      {additionalContent}\n    </>\n  </Tip>\n);\n\nexport default DeprecatedWarning;\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/frame/__stories__/frame.mdx",
    "content": "import { Controls, Canvas, Meta } from '@storybook/blocks';\nimport * as FrameStory from './frame.stories';\n\n<Meta of={FrameStory} />\n\n# Frame\n\n## Overview\n\nFrame is a component that showcases the content with in a frame.\n\n<Canvas of={FrameStory.Overview} />\n\n## Props\n\n<Controls />\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/frame/__stories__/frame.stories.tsx",
    "content": "import type { Meta, StoryObj } from '@storybook/react';\nimport Frame from '../frame';\n\nconst meta: Meta<typeof Frame> = {\n  component: Frame,\n  title: 'Storybook Blocks/Frame',\n};\nexport default meta;\n\ntype Story = StoryObj<typeof Frame>;\n\nexport const Overview: Story = {\n  args: {\n    children: 'This is a frame',\n  },\n};\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/frame/frame.module.scss",
    "content": "@import \"../../styles/mixins/layout\";\n\n.frame {\n  @include sb-frame;\n  padding: 32px;\n  margin: var(--sb-spacing-between-section-items) 0;\n\n  &.noBorder {\n    border: 0;\n  }\n\n  &.noGutter {\n    padding-right: 0;\n    padding-left: 0;\n  }\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/frame/frame.tsx",
    "content": "import { FC } from 'react';\nimport cx from 'classnames';\nimport { ElementContent } from '../../types';\nimport styles from './frame.module.scss';\n\ntype FrameProps = {\n  children: ElementContent;\n  className?: string;\n  noGutter?: boolean;\n  noBorder?: boolean;\n};\n\nconst Frame: FC<FrameProps> = ({ children, className, noGutter = false, noBorder = false }) => (\n  <div\n    className={cx(styles.frame, className, {\n      [styles.noGutter]: noGutter,\n      [styles.noBorder]: noBorder,\n    })}\n  >\n    {children}\n  </div>\n);\n\nexport default Frame;\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/function-arguments/README.md",
    "content": "# FunctionArguments\n\nA list that documents a function's signature.\n\n## Guidelines\n\n- There is no unique syntax for creating a UsageGuideline component in MDX files. Therefore, use the component as you would in a regular JSX file.\n\n## Props\n\n| Prop       | Description                                      |\n| ---------- | ------------------------------------------------ |\n| `children` | `<li>`s that represent the function's arguments. |\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/function-arguments/__stories__/function-arguments.mdx",
    "content": "import { Controls, Canvas, Meta } from '@storybook/blocks';\nimport * as FunctionArguments from './function-arguments.stories';\n\n<Meta of={FunctionArguments} />\n\n# FunctionArguments\n\n## Overview\n\nThe FunctionArgument component is used to display details of function arguments in a react component.\nIt allows you to provide the name, type, and description of the argument.\nAdditionally, you can specify whether the argument is required and provide a default value if applicable.\n\n<Canvas of={FunctionArguments.Overview} />\n\n## Props\n\n<Controls />\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/function-arguments/__stories__/function-arguments.stories.tsx",
    "content": "import type { Meta, StoryObj } from '@storybook/react';\nimport FunctionArguments from '../function-arguments';\nimport FunctionArgument from '../function-argument';\n\nconst meta: Meta<typeof FunctionArguments> = {\n  component: FunctionArguments,\n  title: 'Storybook Blocks/FunctionArguments',\n};\nexport default meta;\n\ntype Story = StoryObj<typeof FunctionArguments>;\n\nexport const Overview: Story = {\n  args: {\n    children: (\n      <FunctionArgument name=\"argument\" type=\"type\" description=\"Description of the argument\">\n        <FunctionArgument\n          name=\"callback\"\n          type=\"(event: Event) => void\"\n          description=\"Callback function to execute when the event is fired.\"\n          required\n        />\n        <FunctionArgument\n          name=\"count\"\n          type=\"number\"\n          description=\"The number of items to process.\"\n          default=\"0\"\n          required\n        />\n      </FunctionArgument>\n    ),\n  },\n};\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/function-arguments/function-argument.tsx",
    "content": "import { FC } from 'react';\nimport classes from './index.module.scss';\nimport { ElementContent } from '../../types';\n\ntype FunctionArgumentProps = {\n  children?: ElementContent;\n  name?: string;\n  type: string;\n  description?: string;\n  default?: string;\n  required?: boolean;\n};\n\nconst FunctionArgument: FC<FunctionArgumentProps> = ({\n  children,\n  name,\n  type,\n  description,\n  default: defaultValue,\n  required,\n}) => (\n  <li className={classes.argument}>\n    {name && <code className={classes['argument-name']}>{name}</code>}\n    <code className={classes['argument-type']}>{type}</code>\n    {required && <span className={classes.required}>*</span>}\n    {description && <> - {description}</>}\n    {defaultValue && (\n      <>\n        {' '}\n        Defaults to: <code>{defaultValue}</code>\n      </>\n    )}\n    {children && <ul>{children}</ul>}\n  </li>\n);\n\nexport default FunctionArgument;\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/function-arguments/function-arguments.tsx",
    "content": "import { FC } from 'react';\nimport { ElementContent } from '../../types';\n\ntype FunctionArgumentsProps = {\n  children: ElementContent;\n};\n\nconst FunctionArguments: FC<FunctionArgumentsProps> = ({ children = [] }) => <ul>{children}</ul>;\n\nexport default FunctionArguments;\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/function-arguments/index.module.scss",
    "content": ".argument {\n  ul {\n    padding: 0;\n  }\n\n  .argument {\n    margin-left: 20px;\n  }\n}\n\n.argument-name,\n.argument-type,\n.default-value {\n  font-family: monaco, monospace;\n  font-size: 85%;\n}\n\n.argument-name {\n  margin-right: 5px;\n}\n\n.argument-type {\n  color: var(--sb-color-purple);\n\n  &:before,\n  &:after {\n    color: var(--sb-color-winter);\n  }\n\n  &:before {\n    content: \"<\";\n  }\n\n  &:after {\n    content: \">\";\n  }\n}\n\n.required {\n  color: var(--sb-color-sofia_pink);\n  font-size: 80%;\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/github-contributors-list/contributors-list.tsx",
    "content": "import { FC } from 'react';\nimport cx from 'classnames';\nimport Link from '../../../src/components/link/link';\nimport { GithubContributor } from './github-contributors-types';\nimport styles from './contributors.module.scss';\n\ninterface ContributorsListProps {\n  contributorsData: Array<GithubContributor>;\n  showContributionAmount?: boolean;\n}\n\nconst ContributorsList: FC<ContributorsListProps> = ({ contributorsData, showContributionAmount = false }) => {\n  const lastIndex = contributorsData.length - 1;\n  return (\n    <>\n      {contributorsData.map(({ name, href, key, contributions }, index) => (\n        <Link key={key || href} href={href} className={cx({ [styles.contributor]: index < lastIndex })}>\n          {`${name}${showContributionAmount ? ` (${contributions})` : ''}`}\n        </Link>\n      ))}\n    </>\n  );\n};\n\nexport default ContributorsList;\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/github-contributors-list/contributors.module.scss",
    "content": "@import '../../../src/styles/mixins/typography';\n\n.contributor::after {\n  @include sb-small-text;\n  content: ',';\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/github-contributors-list/github-contributors-list.tsx",
    "content": "import { FC, useEffect, useMemo, useState } from 'react';\nimport ContributorsList from './contributors-list';\nimport Paragraph from '../../../src/components/paragraph/paragraph';\nimport { fetchAllContributors } from './github-contributors-utils';\nimport { GithubContributor, GithubContributorResponse } from './github-contributors-types';\n\ninterface GithubContributorsListProps {\n  organizationName: string;\n  packageName: string;\n  text?: string;\n  showContributionAmount?: boolean;\n  excludedContributorsIds?: Set<number>;\n  staticContributors?: GithubContributor[];\n}\n\nconst GithubContributorsList: FC<GithubContributorsListProps> = ({\n  organizationName,\n  packageName,\n  excludedContributorsIds = new Set(),\n  staticContributors = [],\n  text = 'Thanks to all of our contributors: ',\n  showContributionAmount = false,\n}) => {\n  const [contributorsJson, setContributorsJson] = useState<GithubContributorResponse[]>([]);\n  useEffect(() => {\n    fetchAllContributors(organizationName, packageName).then(contributors => setContributorsJson(contributors));\n  }, [organizationName, packageName]);\n\n  const contributors = useMemo(() => {\n    const developerContributors = contributorsJson\n      .filter(contributor => !excludedContributorsIds.has(contributor.id))\n      .sort((a, b) => (b?.contributions || 0) - (a?.contributions || 0))\n      .map(\n        contributor =>\n          ({\n            id: contributor.id,\n            name: contributor.login,\n            href: contributor.html_url,\n            key: contributor.id.toString(),\n            contributions: contributor.contributions,\n          }) as GithubContributor,\n      );\n    const contributorsData = staticContributors.concat(developerContributors);\n    return <ContributorsList contributorsData={contributorsData} showContributionAmount={showContributionAmount} />;\n  }, [contributorsJson, excludedContributorsIds, showContributionAmount, staticContributors]);\n\n  return (\n    <Paragraph>\n      <>\n        {text}\n        {contributors}\n      </>\n    </Paragraph>\n  );\n};\n\nexport default GithubContributorsList;\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/github-contributors-list/github-contributors-types.ts",
    "content": "export type GithubContributor = {\n  name: string;\n  href: string;\n  id?: number;\n  key?: string;\n  contributions?: number;\n};\n\nexport type GithubContributorResponse = {\n  id: number;\n  login: string;\n  html_url: string;\n  contributions: number;\n};\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/github-contributors-list/github-contributors-utils.ts",
    "content": "import { GithubContributorResponse } from './github-contributors-types';\n\nexport async function fetchContributors(\n  organizationName: string,\n  packageName: string,\n  page: number,\n): Promise<GithubContributorResponse[]> {\n  try {\n    const request = await fetch(\n      `https://api.github.com/repos/${organizationName}/${packageName}/contributors?per_page=100&page=${page}&order=desc`,\n      {\n        method: 'GET',\n        headers: {\n          'Content-Type': 'application/json',\n        },\n      },\n    );\n\n    const contributors = await request.json();\n    if (!contributors || !Array.isArray(contributors)) {\n      throw new Error('Unexpected API response, contributors = ', contributors);\n    }\n    return contributors;\n  } catch (e) {\n    console.error('Error while loading Github contributors, page ', page, ' - ', e);\n    return [];\n  }\n}\n\nexport async function fetchAllContributors(organizationName: string, packageName: string) {\n  let contributors: GithubContributorResponse[] = [];\n  let page = 1;\n  let list;\n  do {\n    list = await fetchContributors(organizationName, packageName, page++);\n    contributors = contributors.concat(list);\n  } while (list.length > 0);\n\n  return contributors;\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/index.ts",
    "content": "export { default as AlphaWarning } from './alpha-warning/alpha-warning';\nexport { default as AnchorListItem } from './anchor-list-item/anchor-list-item';\nexport { default as ColorDescription } from './color-description/color-description';\nexport { default as ComponentName } from './component-name/component-name';\nexport { default as ComponentRules } from './component-rules/component-rules';\nexport { default as DeprecatedWarning } from './deprecated-warning/deprecated-warning';\nexport { default as Frame } from './frame/frame';\nexport { default as FunctionArgument } from './function-arguments/function-argument';\nexport { default as FunctionArguments } from './function-arguments/function-arguments';\nexport { default as ContributorsList } from './github-contributors-list/contributors-list';\nexport { default as GithubContributorsList } from './github-contributors-list/github-contributors-list';\nexport { default as InformationBox } from './information-box/information-box';\nexport { default as InformationBoxTitle } from './information-box-title/information-box-title';\nexport { default as Link } from './link/link';\nexport { default as MultipleStoryElementsWrapper } from './multiple-story-elements-wrapper/multiple-story-elements-wrapper';\nexport { default as Paragraph } from './paragraph/paragraph';\nexport { default as RelatedComponent } from './related-component/related-component';\nexport { default as RelatedComponents } from './related-components/related-components';\nexport { default as SectionName } from './section-name/section-name';\nexport { default as StatusTag } from './status-tag/status-tag';\nexport { default as SidebarItem } from './sidebar-item/sidebar-item';\nexport { default as StorybookLink } from './storybook-link/storybook-link';\nexport { default as StoryDescription } from './story-description/story-description';\nexport { default as Tip } from './tip/tip';\nexport { default as Title } from './title/title';\nexport { default as TokenTable } from './token-table/token-table';\nexport { default as UnstyledList } from './unstyled-list/unstyled-list';\nexport { default as UnstyledListItem } from './unstyled-list-item/unstyled-list-item';\nexport { default as UsageGuidelines } from './usage-guidelines/usage-guidelines';\nexport { default as VisualDescription } from './visual-description/visual-description';\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/information-box/__stories__/information-box.mdx",
    "content": "import { Controls, Canvas, Meta } from '@storybook/blocks';\nimport * as InformationBox from './information-box.stories';\n\n<Meta of={InformationBox} />\n\n# InformationBox\n\n## Overview\n\nThe InformationBox component is used to display an information box.\nIt allows you to provide the title, component, link and description.\n\n<Canvas of={InformationBox.Overview} />\n\n## Props\n\n<Controls />\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/information-box/__stories__/information-box.stories.tsx",
    "content": "import type { Meta, StoryObj } from '@storybook/react';\nimport InformationBox from '../information-box';\n\nconst meta: Meta<typeof InformationBox> = {\n  component: InformationBox,\n  title: 'Storybook Blocks/InformationBox',\n};\nexport default meta;\n\ntype Story = StoryObj<typeof InformationBox>;\n\nexport const Overview: Story = {\n  args: {\n    title: 'Title',\n    component: <img src=\"/visual-description.png\" alt=\"Example Image\" width={100} />,\n    description: 'This is a description.',\n    href: '/?path=/docs/welcome--docs',\n  },\n};\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/information-box/information-box.module.scss",
    "content": "@import '../../styles/mixins/typography';\n\n.informationBox {\n  .component {\n    width: 100%;\n    height: fit-content;\n    margin: 0 0 var(--sb-spacing-medium);\n  }\n\n  .description {\n    @include sb-content-text;\n    line-height: var(--sb-text-line-height-small);\n    font-size: var(--sb-small-text-font-size);\n  }\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/information-box/information-box.tsx",
    "content": "import { FC } from 'react';\nimport InformationBoxTitle from '../information-box-title/information-box-title';\nimport { ElementContent, withStaticProps } from '../../types';\nimport { LinkTarget } from '../link/LinkConstants';\nimport styles from './information-box.module.scss';\n\ntype InformationBoxProps = {\n  component?: ElementContent;\n  title?: ElementContent;\n  description?: string;\n  href?: string;\n  linkTarget?: LinkTarget;\n};\n\nconst InformationBox: FC<InformationBoxProps> & { linkTargets?: typeof LinkTarget } = ({\n  component = null,\n  title = '',\n  description = '',\n  href,\n  linkTarget,\n}) => {\n  const overrideTitle =\n    typeof title === 'string' ? (\n      <InformationBoxTitle href={href} linkTarget={linkTarget}>\n        {title}\n      </InformationBoxTitle>\n    ) : (\n      title\n    );\n\n  return (\n    <section className={styles.informationBox}>\n      {component && <figure className={styles.component}>{component}</figure>}\n      {overrideTitle}\n      <section className={styles.description}>{description}</section>\n    </section>\n  );\n};\n\nexport default withStaticProps(InformationBox, { linkTargets: LinkTarget });\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/information-box-title/information-box-title.module.scss",
    "content": "@import '../../styles/mixins/typography';\n\n.informationBoxTitle {\n  margin-bottom: var(--sb-spacing-xs);\n  margin-top: var(--sb-spacing-xs);\n  display: inline;\n\n  &.informationBoxTitle {\n    display: flex;\n    font-weight: 700;\n  }\n\n  &.titleLink {\n    cursor: pointer;\n  }\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/information-box-title/information-box-title.tsx",
    "content": "import { FC } from 'react';\nimport cx from 'classnames';\nimport { ElementContent, withStaticProps } from '../../types';\nimport Link from '../link/link';\nimport { LinkTarget } from '../link/LinkConstants';\nimport styles from './information-box-title.module.scss';\n\ntype InformationBoxTitleProps = {\n  children: ElementContent;\n  href?: string;\n  linkTarget?: LinkTarget;\n};\n\nconst InformationBoxTitle: FC<InformationBoxTitleProps> & { linkTargets?: typeof LinkTarget } = ({\n  children,\n  href,\n  linkTarget,\n}) => {\n  return href && typeof children === 'string' ? (\n    <Link className={cx(styles.informationBoxTitle)} href={href} withoutSpacing target={linkTarget}>\n      {children}\n    </Link>\n  ) : (\n    <h4 className={cx(styles.informationBoxTitle, { [styles.titleLink]: href })}>{children}</h4>\n  );\n};\n\nexport default withStaticProps(InformationBoxTitle, { linkTargets: LinkTarget });\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/link/LinkConstants.ts",
    "content": "export enum LinkSize {\n  SMALL = 'small',\n  MEDIUM = 'medium',\n}\n\nexport enum LinkTarget {\n  NEW_WINDOW = '_blank',\n  SELF = '_self',\n  PARENT = '_parent',\n  TOP = '_top',\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/link/__stories__/link.mdx",
    "content": "import { Controls, Canvas, Meta } from '@storybook/blocks';\nimport * as Link from './link.stories';\n\n<Meta of={Link} />\n\n# Link\n\n## Overview\n\nThe Link component is used to link between pages.\nIt can be used as a replacement for `a` tag.\n\n<Canvas of={Link.Overview} />\n\n## Props\n\n<Controls />\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/link/__stories__/link.stories.tsx",
    "content": "import type { Meta, StoryObj } from '@storybook/react';\nimport Link from '../link';\n\nconst meta: Meta<typeof Link> = {\n  component: Link,\n  title: 'Storybook Blocks/Link',\n};\nexport default meta;\n\ntype Story = StoryObj<typeof Link>;\n\nexport const Overview: Story = {\n  args: {\n    href: '/?path=/docs/welcome--docs',\n    size: Link.sizes.MEDIUM,\n    children: 'This is a link to welcome page',\n  },\n};\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/link/link.module.scss",
    "content": "@import \"../../styles/mixins/typography\";\n\n.compsLink {\n  display: inline-flex;\n  &.small {\n    @include sb-small-text-without-color;\n  }\n  &.medium {\n    @include sb-content-text-without-color;\n  }\n  &.withSpacing {\n    margin: 0 var(--sb-spacing-xs);\n  }\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/link/link.tsx",
    "content": "import { FC, ReactNode } from 'react';\nimport cx from 'classnames';\nimport CoreLink from '../../helpers/components/Link/Link';\nimport { LinkSize, LinkTarget } from './LinkConstants';\nimport { withStaticProps } from '../../types';\nimport styles from './link.module.scss';\n\nexport type LinkProps = {\n  className?: string;\n  children: ReactNode | ReactNode[] | string;\n  href: string;\n  size?: LinkSize;\n  withoutSpacing?: boolean;\n  target?: LinkTarget;\n};\n\nconst Link: FC<LinkProps> & { sizes?: typeof LinkSize; targets?: typeof LinkTarget } = ({\n  children,\n  href,\n  size = Link.sizes?.MEDIUM,\n  withoutSpacing = false,\n  target = Link.targets?.NEW_WINDOW,\n  className,\n}) => (\n  <CoreLink\n    text={children}\n    href={href}\n    target={target}\n    className={cx(styles.compsLink, className, {\n      [styles.small]: size === Link.sizes?.SMALL,\n      [styles.medium]: size === Link.sizes?.MEDIUM,\n      [styles.withSpacing]: !withoutSpacing,\n    })}\n  />\n);\n\nexport default withStaticProps(Link, { sizes: LinkSize, targets: LinkTarget });\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/multiple-story-elements-wrapper/multiple-story-elements-wrapper.module.scss",
    "content": ".multipleStoryElementsWrapper {\n  display: flex;\n  align-items: center;\n  box-shadow: none;\n\n  & > * {\n    margin-right: var(--sb-spacing-medium);\n  }\n}\n\n.focusTrap {\n  position: fixed;\n  top: -2000px;\n  left: -2000px;\n  width: 2px;\n  height: 2px;\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/multiple-story-elements-wrapper/multiple-story-elements-wrapper.tsx",
    "content": "import { FC } from 'react';\nimport cx from 'classnames';\nimport styles from './multiple-story-elements-wrapper.module.scss';\nimport { ElementContent } from '../../types';\n\ntype MultipleStoryElementsWrapperProps = {\n  className: string;\n  children: ElementContent;\n};\n\nconst MultipleStoryElementsWrapper: FC<MultipleStoryElementsWrapperProps> = ({ className, children }) => (\n  <div className={cx(styles.multipleStoryElementsWrapper, className)}>\n    <div data-testid=\"focusTrap\" className={styles.focusTrap} />\n    {children}\n  </div>\n);\n\nexport default MultipleStoryElementsWrapper;\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/paragraph/__stories__/paragraph.mdx",
    "content": "import { Controls, Canvas, Meta } from '@storybook/blocks';\nimport * as ParagraphStory from './paragraph.stories';\n\n<Meta of={ParagraphStory} />\n\n# Paragraph\n\n## Overview\n\nParagraph is a component that displays the blocks of text.\nThis component can be used as a replacement for `p`.\n\n<Canvas of={ParagraphStory.Overview} />\n\n## Props\n\n<Controls />\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/paragraph/__stories__/paragraph.stories.tsx",
    "content": "import type { Meta, StoryObj } from '@storybook/react';\nimport Paragraph from '../paragraph';\n\nconst meta: Meta<typeof Paragraph> = {\n  component: Paragraph,\n  title: 'Storybook Blocks/Paragraph',\n};\nexport default meta;\n\ntype Story = StoryObj<typeof Paragraph>;\n\nexport const Overview: Story = {\n  args: {\n    children: 'This is a paragraph',\n  },\n};\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/paragraph/paragraph.module.scss",
    "content": "@import '../../styles/mixins/typography';\n\n.paragraph {\n  @include sb-content-text;\n  // line-height: 1.5;\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/paragraph/paragraph.tsx",
    "content": "import { FC } from 'react';\nimport cx from 'classnames';\nimport { ElementContent } from '../../types';\nimport styles from './paragraph.module.scss';\n\ntype ParagraphProps = {\n  children: ElementContent;\n  className?: string;\n};\n\nconst Paragraph: FC<ParagraphProps> = ({ children, className }) => (\n  <p className={cx(styles.paragraph, className)}>{children}</p>\n);\n\nexport default Paragraph;\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/related-component/README.md",
    "content": "# RelatedComponent\nComponent description - will contain a textual description alongside a basic live example of the component.\n\n## Guidelines\n- There is no unique syntax for creating a RelatedComponent component in MDX files. Therefore, use the component as you would in a regular JSX file.\n- Each description must contain both a textual description and a visual example (not one of them).\n- The visual example must be an instance of the component itself and not an image or a different element.\n\n## Props\n\nProp | Description\n--- | ---\ntitle | The described component name\ncomponent | an instance of the described component\ndescription / a textual description of the component purpose\n\n## Technical notes\n- Please add mapping between component name and corresponding `RelatedComponent` into the `descriptionComponentsMap` which you pass to the `RelatedComponents` component.\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/related-component/related-component.module.scss",
    "content": ".relatedComponentComponent {\n  width: 100%;\n  height: 174px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 8px;\n  border: 1px solid var(--sb-ui-border-color);\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/related-component/related-component.tsx",
    "content": "import React, { useContext } from 'react';\nimport InformationBox from '../information-box/information-box';\nimport { LinkTarget } from '../link/LinkConstants';\nimport { ElementContent, withStaticProps } from '../../types';\nimport { RelatedComponentsContext } from '../related-components/related-components-context';\nimport styles from './related-component.module.scss';\n\ninterface RelatedComponentProps {\n  component?: ElementContent;\n  title?: string;\n  description?: string;\n  href: string;\n  linkTarget?: LinkTarget;\n}\n\nconst RelatedComponent: React.FC<RelatedComponentProps> & { linkTargets?: typeof LinkTarget } = ({\n  component,\n  title = '',\n  description = '',\n  href,\n  linkTarget,\n}) => {\n  const contextLinkTarget = useContext(RelatedComponentsContext)?.linkTarget;\n  const overrideLinkTarget = linkTarget || contextLinkTarget;\n  return (\n    <InformationBox\n      component={<div className={styles.relatedComponentComponent}>{component}</div>}\n      title={title}\n      description={description}\n      href={href}\n      linkTarget={overrideLinkTarget}\n    />\n  );\n};\n\nexport default withStaticProps(RelatedComponent, { linkTargets: LinkTarget });\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/related-components/README.md",
    "content": "# RelatedComponents\nA list of components are similar in appearance or functionality to the documented component, and therefore, sometimes readers can easily confuse them.\n\n## Guidelines\n- There is no unique syntax for creating a RelatedComponents component in MDX files. Therefore, use the component as you would in a regular JSX file.\n- Each instance of RelatedComponents should contain descriptions of only three components.\n\n\n## Props\n\nProp | Description\n--- | ---\ntitle | the tip title\ncomponentsNames | An array of strings so that each string is a constant representing the name of the component we want to display its description.\ndescriptionComponentsMap | A Map object that maps between the component name and the <RelatedComponent> instance that describes it.\n\n## Technical notes\n- For each component that `RelatedComponents` support, there is a constant that describes the component's name in the `descriptionComponentsMap`.\n- The description component should be a RelatedComponent instance - read the component's readme for more details.\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/related-components/related-components-context.ts",
    "content": "import React from 'react';\nimport { LinkTarget } from '../link/LinkConstants';\n\ntype RelatedComponentsContextType = {\n  linkTarget?: LinkTarget;\n};\n\nexport const RelatedComponentsContext = React.createContext<RelatedComponentsContextType>({\n  linkTarget: LinkTarget.NEW_WINDOW,\n});\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/related-components/related-components.module.scss",
    "content": "@import '../../styles/mixins/layout';\n\n$related-components-grid-gap: var(--sb-spacing-large);\n$related-components-cell-min-width: $sb-grid-auto-fit-cell-width-medium;\n$related-components-grid-cell-array-calc: calc(33.3% - #{$related-components-grid-gap});\n\n.relatedComponents {\n  @include sb-grid-auto-fit(\n    $grid-gap: $related-components-grid-gap,\n    $grid-cell-min-width: $related-components-cell-min-width,\n    $grid-cell-array-calc: $related-components-grid-cell-array-calc\n  );\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/related-components/related-components.tsx",
    "content": "import React, { useMemo } from 'react';\nimport { LinkTarget } from '../link/LinkConstants';\nimport { withStaticProps } from '../../types';\nimport { RelatedComponentsContext } from './related-components-context';\nimport styles from './related-components.module.scss';\n\ninterface RelatedComponentsProps {\n  componentsNames: string[];\n  descriptionComponentsMap: Map<string, JSX.Element>;\n  linkTarget?: LinkTarget;\n}\n\nconst RelatedComponents: React.FC<RelatedComponentsProps> & { linkTargets?: typeof LinkTarget } = ({\n  componentsNames = [],\n  descriptionComponentsMap,\n  linkTarget,\n}) => {\n  const componentsDataElements = useMemo(\n    () =>\n      componentsNames.map((componentName, index) => {\n        const key = `${componentName}_${index}`;\n\n        return <section key={key}>{descriptionComponentsMap.get(componentName)}</section>;\n      }),\n    [componentsNames, descriptionComponentsMap],\n  );\n\n  return (\n    <RelatedComponentsContext.Provider value={{ linkTarget }}>\n      <article className={styles.relatedComponents}>{componentsDataElements}</article>\n    </RelatedComponentsContext.Provider>\n  );\n};\n\nexport default withStaticProps(RelatedComponents, { linkTargets: LinkTarget });\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/section-name/__stories__/section-name.mdx",
    "content": "import { Controls, Canvas, Meta } from '@storybook/blocks';\nimport * as SectionNameStory from './section-name.stories';\n\n<Meta of={SectionNameStory} />\n\n# SectionName\n\n## Overview\n\nSectionName is a component that display the name of a section. This component can be used as a replacement for `h2` in storybook `preview` file.\n\n<Canvas of={SectionNameStory.Overview} />\n\n## Props\n\n<Controls />\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/section-name/__stories__/section-name.stories.tsx",
    "content": "import type { Meta, StoryObj } from '@storybook/react';\nimport SectionName from '../section-name';\n\nconst meta: Meta<typeof SectionName> = {\n  component: SectionName,\n  title: 'Storybook Blocks/SectionName',\n};\nexport default meta;\n\ntype Story = StoryObj<typeof SectionName>;\n\nexport const Overview: Story = {\n  args: {\n    children: 'This is a section name',\n  },\n};\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/section-name/section-name.module.scss",
    "content": "@import '../../styles/mixins/typography';\n\n.sectionName {\n  @include sb-basic-text;\n  font-family: var(--sb-title-font-family);\n  font-weight: 600;\n  font-size: var(--sb-h2-font-size);\n  line-height: 30px;\n  letter-spacing: -0.1px;\n  text-align: left;\n  margin-top: 72px;\n  margin-bottom: var(--sb-space-24);\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/section-name/section-name.tsx",
    "content": "import React, { useMemo } from 'react';\nimport cx from 'classnames';\nimport styles from './section-name.module.scss';\n\ninterface SectionNameProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  className?: string;\n  children: string;\n}\n\nconst SectionName: React.FC<SectionNameProps> = ({ className, children, ...props }) => {\n  const id = useMemo(\n    () => children.toLowerCase().replaceAll('’', '').replaceAll(\"'\", '').split(' ').join('-'),\n    [children],\n  );\n\n  return (\n    <h2 id={id} className={cx(styles.sectionName, className)} {...props}>\n      {children}\n    </h2>\n  );\n};\n\nexport default SectionName;\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/sidebar-item/__stories__/sidebar-item.mdx",
    "content": "import { Controls, Canvas, Meta } from '@storybook/blocks';\nimport * as SidebarItemStories from './sidebar-item.stories';\n\n<Meta of={SidebarItemStories} />\n\n# SidebarItem\n\nA layout container for the sidebar items for showing a component link in the Storybook sidebar along with a <Link href=\"/?path=/docs/components-statustag--docs\" withoutSpacing>StatugTag</Link> that shows the status of the component.\n\n## Overview\n\n<Canvas of={SidebarItemStories.Overview} />\n\n## Props\n\n<Controls />\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/sidebar-item/__stories__/sidebar-item.stories.tsx",
    "content": "import type { Meta, StoryObj } from '@storybook/react';\nimport SidebarItem from '../sidebar-item';\n\nconst meta: Meta<typeof SidebarItem> = {\n  component: SidebarItem,\n  title: 'Storybook Blocks/SidebarItem',\n};\nexport default meta;\n\ntype Story = StoryObj<typeof SidebarItem>;\n\nexport const Overview: Story = {\n  args: {\n    status: 'beta',\n    children: 'Sidebar Item',\n  },\n};\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/sidebar-item/sidebar-item.module.scss",
    "content": ".sidebarItem {\n  flex: 1;\n  min-width: 0;\n  margin-right: var(--sb-spacing-medium);\n\n  .name {\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    min-width: 0;\n  }\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/sidebar-item/sidebar-item.tsx",
    "content": "import React from 'react';\nimport StatusTag from '../status-tag/status-tag';\nimport { type StatusTagType } from '../status-tag/status-tag';\nimport Flex from '../../../src/helpers/components/Flex/Flex';\nimport { ElementContent } from '../../types';\nimport styles from './sidebar-item.module.scss';\n\ninterface SidebarItemProps {\n  children: ElementContent;\n  status: StatusTagType;\n}\n\nconst SidebarItem: React.FC<SidebarItemProps> = ({ children, status }) => {\n  return (\n    <Flex className={styles.sidebarItem} justify={Flex.justify.SPACE_BETWEEN} gap={Flex.gaps.MEDIUM}>\n      <span className={styles.name}>{children}</span>\n      <StatusTag type={status} />\n    </Flex>\n  );\n};\n\nexport default SidebarItem;\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/status-tag/__stories__/status-tag.mdx",
    "content": "import { Controls, Canvas, Meta } from '@storybook/blocks';\nimport * as StatusTagStories from './status-tag.stories';\n\n<Meta of={StatusTagStories} />\n\n# StatusTag\n\n## Overview\n\n<Canvas of={StatusTagStories.Overview} />\n\n## Props\n\n<Controls />\n\n## Variants\n\n### Types\n\n<Canvas of={StatusTagStories.Types} />\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/status-tag/__stories__/status-tag.stories.tsx",
    "content": "import type { Meta, StoryObj } from '@storybook/react';\nimport StatusTag from '../status-tag';\nimport Flex from '../../../helpers/components/Flex/Flex';\n\nconst meta: Meta<typeof StatusTag> = {\n  component: StatusTag,\n  title: 'Storybook Blocks/StatusTag',\n};\nexport default meta;\n\ntype Story = StoryObj<typeof StatusTag>;\n\nexport const Overview: Story = {\n  args: {\n    type: 'beta',\n  },\n};\n\nexport const Types: Story = {\n  render: () => (\n    <Flex direction={Flex.directions.COLUMN} gap={Flex.gaps.MEDIUM} align={Flex.align.START}>\n      <StatusTag type=\"alpha\" />\n      <StatusTag type=\"beta\" />\n      <StatusTag type=\"new\" />\n      <StatusTag type=\"deprecated\" />\n    </Flex>\n  ),\n};\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/status-tag/status-tag.module.scss",
    "content": ".statusTag {\n  border-radius: var(--sb-border-radius-small);\n  border: 1px solid;\n  padding: 0 var(--sb-spacing-small);\n  text-transform: capitalize;\n\n  &.alpha,\n  &.beta {\n    color: var(--sb-brand-color);\n    border-color: var(--sb-brand-color);\n  }\n\n  &.new {\n    color: var(--sb-positive-color);\n    border-color: var(--sb-positive-color);\n  }\n\n  &.deprecated {\n    color: var(--sb-negative-color);\n    border-color: var(--sb-negative-color);\n  }\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/status-tag/status-tag.tsx",
    "content": "import { FC } from 'react';\nimport styles from './status-tag.module.scss';\nimport cx from 'classnames';\n\nexport type StatusTagType = 'alpha' | 'beta' | 'new' | 'deprecated';\n\ninterface StatusTagProps {\n  type: StatusTagType;\n}\n\nconst StatusTag: FC<StatusTagProps> = ({ type }) => {\n  return <label className={cx(styles.statusTag, styles[type])}>{type}</label>;\n};\n\nexport default StatusTag;\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/story-description/__stories__/story-description.mdx",
    "content": "import { Controls, Canvas, Meta } from '@storybook/blocks';\nimport * as StoryDescription from './story-description.stories';\n\n<Meta of={StoryDescription} />\n\n# StoryDescription\n\n## Overview\n\nThe StoryDescription component is used to add titles to the component states displayed in a story.\n\n<Canvas of={StoryDescription.Overview} />\n\n## Props\n\n<Controls />\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/story-description/__stories__/story-description.stories.tsx",
    "content": "import type { Meta, StoryObj } from '@storybook/react';\nimport StoryDescription from '../story-description';\nimport StatusTag from '../../status-tag/status-tag';\nimport { FlexJustify } from '../../../helpers/components/Flex/FlexConstants';\n\nconst meta: Meta<typeof StoryDescription> = {\n  component: StoryDescription,\n  title: 'Storybook Blocks/StoryDescription',\n};\nexport default meta;\n\ntype Story = StoryObj<typeof StoryDescription>;\n\nexport const Overview: Story = {\n  args: {\n    description: 'Deprecated',\n    children: <StatusTag type=\"deprecated\" />,\n    justify: FlexJustify.CENTER,\n  },\n};\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/story-description/story-description.module.scss",
    "content": ".description {\n  font-weight: 500;\n\n  &.vertical {\n    text-align: center;\n  }\n}"
  },
  {
    "path": "packages/storybook-blocks/src/components/story-description/story-description.tsx",
    "content": "import React, { FC, useMemo } from 'react';\nimport cx from 'classnames';\nimport { ElementContent, withStaticProps } from '../../types';\nimport { FlexAlign, FlexDirection, FlexGap, FlexJustify } from '../../helpers/components/Flex/FlexConstants';\nimport Flex from '../../helpers/components/Flex/Flex';\nimport styles from './story-description.module.scss';\n\ntype StoryDescriptionProps = {\n  align?: FlexAlign;\n  description?: ElementContent;\n  children: ElementContent;\n  className?: string;\n  headerAlign?: FlexAlign;\n  headerJustify?: FlexJustify;\n  headerStyle?: React.CSSProperties;\n  justify?: FlexJustify;\n  vertical?: boolean;\n};\n\nconst StoryDescription: FC<StoryDescriptionProps> & {\n  justify?: typeof FlexJustify;\n  align?: typeof FlexAlign;\n  gaps?: typeof FlexGap;\n  directions?: typeof FlexDirection;\n} = ({\n  description = '',\n  headerStyle,\n  children,\n  vertical = false,\n  className,\n  align,\n  justify = StoryDescription.justify?.START,\n  headerAlign,\n  headerJustify,\n}) => {\n  const direction = useMemo(\n    () => (vertical ? StoryDescription.directions?.COLUMN : StoryDescription.directions?.ROW),\n    [vertical],\n  );\n\n  return (\n    <Flex\n      direction={direction}\n      gap={StoryDescription.gaps?.MEDIUM}\n      justify={justify}\n      align={align || undefined}\n      className={className}\n    >\n      <Flex\n        className={cx(styles.description, { [styles.vertical]: vertical })}\n        style={{ width: '120px', ...headerStyle }}\n        justify={headerJustify}\n        align={headerAlign || StoryDescription.align?.CENTER}\n      >\n        {description}\n      </Flex>\n      {children}\n    </Flex>\n  );\n};\n\nexport default withStaticProps(StoryDescription, {\n  justify: FlexJustify,\n  align: FlexAlign,\n  gaps: FlexGap,\n  directions: FlexDirection,\n});\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/storybook-link/__stories__/storybook-link.mdx",
    "content": "import { Controls, Canvas, Meta } from '@storybook/blocks';\nimport * as StorybookLink from './storybook-link.stories';\n\n<Meta of={StorybookLink} />\n\n# StorybookLink\n\n## Overview\n\nThe StorybookLink component is an internal link to navigate between components/stories inside storybook.\n\n<Canvas of={StorybookLink.Overview} />\n\n## Props\n\n<Controls />\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/storybook-link/__stories__/storybook-link.stories.tsx",
    "content": "import type { Meta, StoryObj } from '@storybook/react';\nimport StorybookLink from '../storybook-link';\n\nconst meta: Meta<typeof StorybookLink> = {\n  component: StorybookLink,\n  title: 'Storybook Blocks/StorybookLink',\n};\nexport default meta;\n\ntype Story = StoryObj<typeof StorybookLink>;\n\nexport const Overview: Story = {\n  args: {\n    page: 'Components/Paragraph',\n    children: 'Navigate to \"Paragraph\"',\n  },\n};\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/storybook-link/storybook-link.tsx",
    "content": "import { FC, useEffect, useState, ReactNode } from 'react';\nimport Link from '../link/link';\nimport { hrefTo } from '@storybook/addon-links';\nimport { LinkSize } from '../link/LinkConstants';\nimport { withStaticProps } from '../../types';\n\ninterface StorybookLinkProps {\n  page: string;\n  children: ReactNode | ReactNode[] | string;\n  story?: string;\n  size?: LinkSize;\n  className?: string;\n}\n\nconst StorybookLink: FC<StorybookLinkProps> & { sizes?: typeof LinkSize } = ({\n  page,\n  story = '',\n  children,\n  size,\n  className,\n}) => {\n  const [url, setUrl] = useState('');\n\n  useEffect(() => {\n    fetchLink();\n    async function fetchLink() {\n      const href = await hrefTo(page, story);\n      setUrl(href);\n    }\n  }, [page, story]);\n\n  return (\n    <Link href={url} target={Link.targets.TOP} withoutSpacing size={size} className={className}>\n      {children}\n    </Link>\n  );\n};\n\nexport default withStaticProps(StorybookLink, { sizes: LinkSize });\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/tip/__stories__/tip.mdx",
    "content": "import { Controls, Canvas, Meta } from '@storybook/blocks';\nimport * as TipStories from './tip.stories';\n\n<Meta of={TipStories} />\n\n# Tip\n\n## Overview\n\nEmphasize an essential recommendation about a component.\nWe will often use the tip to show a use case for which the documented component is inappropriate (even though many readers may mistake it).\nWe will direct the readers to the most appropriate component to use for the case described.\n\n<Canvas of={TipStories.Overview} />\n\n## Props\n\n<Controls />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    'There is no unique syntax for creating a Tip component in MDX files. Therefore, use the component as you would in a regular JSX file.',\n    'If the tip contains a recommendation to use a different component, please add a link to the other component documentation MDX file.',\n    'A tip will always be placed at the end of a section.',\n  ]}\n/>\n\n## Variants\n\n### Types\n\n<Canvas of={TipStories.Types} />\n\n### Emoji\n\n<Canvas of={TipStories.Emoji} />\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/tip/__stories__/tip.stories.tsx",
    "content": "import type { Meta, StoryObj } from '@storybook/react';\nimport Tip from '../tip';\nimport Flex from '../../../helpers/components/Flex/Flex';\nimport Link from '../../../helpers/components/Link/Link';\n\nconst meta: Meta<typeof Tip> = {\n  component: Tip,\n  title: 'Storybook Blocks/Tip',\n};\nexport default meta;\n\ntype Story = StoryObj<typeof Tip>;\n\nexport const Overview: Story = {\n  args: {\n    children: (\n      <>\n        This tip shows some helpful information. It can also show <Link text=\"links\" href=\"#\" inlineText /> to more\n        information\n      </>\n    ),\n  },\n};\n\nexport const Emoji: Story = {\n  args: {\n    title: 'Completed',\n    children: 'This tip shows some helpful information.',\n    emoji: '✅',\n  },\n};\n\nexport const Types: Story = {\n  render: () => (\n    <Flex gap={Flex.gaps.SMALL} direction={Flex.directions.COLUMN} align={Flex.align.START}>\n      <Tip type={Tip.types.PRIMARY}>This is a primary tip.</Tip>\n      <Tip type={Tip.types.SUCCESS}>This is a success tip.</Tip>\n      <Tip type={Tip.types.WARNING}>This is a warning tip.</Tip>\n      <Tip type={Tip.types.DANGER}>This is a danger tip.</Tip>\n      <Tip type={Tip.types.DARK}>This is a dark tip.</Tip>\n    </Flex>\n  ),\n};\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/tip/tip.module.scss",
    "content": ".tip {\n  padding: var(--sb-spacing-medium);\n  border-radius: var(--sb-border-radius-medium);\n  width: 100%;\n  height: fit-content;\n  color: var(--sb-primary-text-color);\n\n  .title {\n    font-weight: 700;\n    margin-bottom: var(--sb-spacing-small);\n    display: flex;\n    gap: var(--sb-spacing-small);\n    align-items: center;\n  }\n\n  .body {\n    font-size: var(--sb-small-text-font-size);\n  }\n\n  &.primary {\n    color: var(--sb-primary-text-color);\n    background-color: var(--sb-primary-selected-color);\n  }\n\n  &.danger {\n    background-color: var(--sb-negative-color-selected);\n  }\n\n  &.success {\n    background-color: var(--sb-positive-color-selected);\n  }\n\n  &.dark {\n    background-color: var(--sb-primary-background-hover-color);\n    color: var(--sb-primary-text-color);\n  }\n\n  &.warning {\n    background-color: var(--sb-warning-color-selected);\n    color: var(--sb-primary-text-color);\n  }\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/tip/tip.tsx",
    "content": "import cx from 'classnames';\nimport React from 'react';\nimport Flex from '../../helpers/components/Flex/Flex';\nimport { ElementContent, withStaticProps } from '../../types';\nimport { TipTypes } from './tipConstants';\nimport styles from './tip.module.scss';\n\ninterface TipProps {\n  children: ElementContent;\n  title?: string;\n  type?: TipTypes;\n  emoji?: string;\n}\n\nconst Tip: React.FC<TipProps> & {\n  types?: typeof TipTypes;\n} = ({ title = 'Tip', children, emoji = '🤓', type = TipTypes.DARK }) => {\n  return (\n    <div className={cx(styles.tip, styles[type])}>\n      <div className={styles.title}>\n        <Flex gap={Flex.gaps.XS} align={Flex.align.CENTER}>\n          <span>{emoji}</span>\n          <span>{title}</span>\n        </Flex>\n      </div>\n      <div className={styles.body}>{children}</div>\n    </div>\n  );\n};\n\nexport default withStaticProps(Tip, {\n  types: TipTypes,\n});\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/tip/tipConstants.ts",
    "content": "export enum TipTypes {\n  PRIMARY = 'primary',\n  SUCCESS = 'success',\n  DANGER = 'danger',\n  DARK = 'dark',\n  WARNING = 'warning',\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/title/README.md",
    "content": "# Title\nA name of a story title which belong to a section in the component storybook documentation MDX file.\n\n## Guidelines\n- In MDX documents, you can create a title name by using this syntax: `### title name`.\n- We will use a title component for giving a title to a story that belongs to the variants section or the use cases and examples section.\n\n## Props\nnot relevant for mdx files\n\nProp | Description\n--- | ---\nChildren | title name\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/title/__stories__/title.mdx",
    "content": "import { Controls, Canvas, Meta } from '@storybook/blocks';\nimport * as TitleStory from './title.stories';\n\n<Meta of={TitleStory} />\n\n# Title\n\n## Overview\n\nTitle is a component that display the title of a stories in a section. This component can be used as a replacement for `h3` in storybook `preview` file.\n\n<Canvas of={TitleStory.Overview} />\n\n## Props\n\n<Controls />\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/title/__stories__/title.stories.tsx",
    "content": "import type { Meta, StoryObj } from '@storybook/react';\nimport Title from '../title';\n\nconst meta: Meta<typeof Title> = {\n  component: Title,\n  title: 'Storybook Blocks/Title',\n};\nexport default meta;\n\ntype Story = StoryObj<typeof Title>;\n\nexport const Overview: Story = {\n  args: {\n    children: 'This is a story title',\n  },\n};\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/title/title.module.scss",
    "content": "@import '../../styles/mixins/typography';\n\n.title {\n  margin-bottom: var(--sb-space-8);\n  font-family: var(--sb-title-font-family);\n  @include sb-basic-text;\n  font-size: var(--sb-h3-font-size);\n  line-height: 24px;\n  letter-spacing: -0.1px;\n  text-align: left;\n  font-weight: 600;\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/title/title.tsx",
    "content": "import React from 'react';\nimport cx from 'classnames';\nimport styles from './title.module.scss';\n\ninterface TitleProps extends React.HTMLProps<HTMLHeadingElement> {\n  className?: string;\n}\n\nconst Title: React.FC<TitleProps> = ({ className, ...props }) => {\n  return <h3 className={cx(styles.title, className)} {...props} />;\n};\n\nexport default Title;\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/token-table/__stories__/token-table.mdx",
    "content": "import { Controls, Canvas, Meta } from '@storybook/blocks';\nimport * as TokenTable from './token-table.stories';\n\n<Meta of={TokenTable} />\n\n# TokenTable\n\n## Overview\n\nTokenTable component is used to display a table with rows and columns and is designed to display tokens values. \n\n<Canvas of={TokenTable.Overview} />\n\n## Props\n\n<Controls />\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/token-table/__stories__/token-table.stories.tsx",
    "content": "import type { Meta, StoryObj } from '@storybook/react';\nimport TokenTable from '../token-table';\n\nconst meta: Meta<typeof TokenTable> = {\n  component: TokenTable,\n  title: 'Storybook Blocks/TokenTable',\n};\nexport default meta;\n\ntype Story = StoryObj<typeof TokenTable>;\n\nexport const Overview: Story = {\n  args: {\n    theadData: ['Token', 'Value'],\n    tbodyData: [\n      { id: '1', items: ['--token-1', '#111'] },\n      { id: '2', items: ['--token-2', '#222'] },\n    ],\n  },\n};\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/token-table/token-table-head-item.tsx",
    "content": "import { FC } from 'react';\n\ntype TableHeadItemProps = {\n  item: string;\n};\n\nconst TableHeadItem: FC<TableHeadItemProps> = ({ item }) => <th title={item}>{item}</th>;\n\nexport default TableHeadItem;\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/token-table/token-table-row.tsx",
    "content": "import { FC } from 'react';\n\ntype TableRowProps = {\n  data: string[];\n};\n\nconst TableRow: FC<TableRowProps> = ({ data }) => (\n  <tr>\n    {data.map((item, index) => (\n      <td key={index}>{item}</td>\n    ))}\n  </tr>\n);\n\nexport default TableRow;\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/token-table/token-table.module.scss",
    "content": ".tableWrapper {\n  width: 100%;\n  overflow-x: scroll;\n  margin-bottom: var(--sb-spacing-xxxl);\n\n  .table {\n    width: 100%;\n    border-radius: 4px;\n\n    tbody {\n      border-radius: var(--sb-border-radius-small);\n      overflow: hidden;\n    }\n\n    thead {\n      box-shadow:\n        rgb(0 0 0 / 10%) 0 -1px 1px 1px,\n        rgb(0 0 0 / 7%) 0 0 0 1px;\n\n      th {\n        &:first-child {\n          border-top-left-radius: var(--sb-border-radius-small);\n        }\n        &:last-child {\n          border-top-right-radius: var(--sb-border-radius-small);\n        }\n      }\n    }\n\n    th,\n    td {\n      font-size: 13px;\n      line-height: 20px;\n      text-align: left;\n      padding: 10px;\n    }\n\n    tbody {\n      box-shadow:\n        rgb(0 0 0 / 10%) 0 1px 3px 1px,\n        rgb(0 0 0 / 7%) 0 0 0 1px;\n    }\n\n    td {\n      border-collapse: collapse;\n      border-spacing: 0;\n      color: #333333;\n      border-top-width: 1px;\n      border-top-style: solid;\n      border-top-color: #e6e6e6;\n\n      &:first-child {\n        font-weight: bold;\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/token-table/token-table.tsx",
    "content": "import { FC } from 'react';\nimport TableRow from './token-table-row';\nimport TableHeadItem from './token-table-head-item';\nimport styles from './token-table.module.scss';\n\ntype TableBody = {\n  id: string;\n  items: string[];\n};\n\ntype TokenTableProps = {\n  theadData: string[];\n  tbodyData: TableBody[];\n};\n\nconst TokenTable: FC<TokenTableProps> = ({ theadData, tbodyData }) => (\n  <div className={styles.tableWrapper}>\n    <table className={styles.table}>\n      <thead>\n        <tr>\n          {theadData.map(h => (\n            <TableHeadItem key={h} item={h} />\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {tbodyData.map(item => (\n          <TableRow key={item.id} data={item.items} />\n        ))}\n      </tbody>\n    </table>\n  </div>\n);\n\nexport default TokenTable;\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/unstyled-list/__stories__/unstyled-list.mdx",
    "content": "import { Controls, Canvas, Meta } from '@storybook/blocks';\nimport * as UnstyledListStory from './unstyled-list.stories';\n\n<Meta of={UnstyledListStory} />\n\n# UnstyledList\n\n## Overview\n\nUnstyledList is a component that displays the items in an unordered list.\nThis component can be used as a replacement for `ul` and it's child component `UnstyledListItem` can be used as a replacement for `li`.\n\n<Canvas of={UnstyledListStory.Overview} />\n\n## Props\n\n<Controls />\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/unstyled-list/__stories__/unstyled-list.stories.tsx",
    "content": "import React from 'react';\nimport type { Meta, StoryObj } from '@storybook/react';\nimport UnstyledList from '../unstyled-list';\nimport UnstyledListItem from '../../unstyled-list-item/unstyled-list-item';\n\nconst meta: Meta<typeof UnstyledList> = {\n  component: UnstyledList,\n  title: 'Storybook Blocks/UnstyledList',\n};\nexport default meta;\n\ntype Story = StoryObj<typeof UnstyledList>;\n\nexport const Overview: Story = {\n  args: {\n    children: (\n      <>\n        <UnstyledListItem key=\"1\">Item one</UnstyledListItem>\n        <UnstyledListItem key=\"2\">Item two</UnstyledListItem>\n      </>\n    ),\n  },\n};\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/unstyled-list/unstyled-list.tsx",
    "content": "import React from 'react';\n\ninterface UnstyledListProps {\n  children?: React.ReactNode;\n}\n\nconst UnstyledList: React.FC<UnstyledListProps> = ({ children }) => {\n  return <ul>{children}</ul>;\n};\n\nexport default UnstyledList;\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/unstyled-list-item/unstyled-list-item.module.scss",
    "content": ".unstyledListItem {\n  font-size: 1rem;\n  line-height: var(--sb-text-line-height);\n\n  &:not(:last-child) {\n    margin-bottom: var(--sb-spacing-small);\n  }\n\n  a {\n    color: inherit;\n  }\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/unstyled-list-item/unstyled-list-item.tsx",
    "content": "import React from 'react';\nimport styles from './unstyled-list-item.module.scss';\n\ninterface UnstyledListItemProps {\n  children?: React.ReactNode;\n}\n\nconst UnstyledListItem: React.FC<UnstyledListItemProps> = ({ children }) => {\n  return <li className={styles.unstyledListItem}>{children}</li>;\n};\n\nexport default UnstyledListItem;\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/usage-guidelines/__stories__/usage-guidelines.mdx",
    "content": "import { Controls, Canvas, Meta } from '@storybook/blocks';\nimport * as UsageGuidelinesStory from './usage-guidelines.stories';\n\n<Meta of={UsageGuidelinesStory} />\n\n# UsageGuidelines\n\n## Overview\n\nChecklist of detailed technical and “copy” guidelines that we are expecting developers using this component to follow.\n\n<Canvas of={UsageGuidelinesStory.Overview} />\n\n## Props\n\n<Controls />\n\n## Usage\n\n<UsageGuidelines\n  guidelines={[\n    'There is no unique syntax for creating a UsageGuideline component in MDX files. Therefore, use the component as you would in a regular JSX file.',\n    'Write down between three and five guidelines (technical or “copy”).',\n    'Guideline content can contain JSX elements, not only strings',\n  ]}\n/>\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/usage-guidelines/__stories__/usage-guidelines.stories.tsx",
    "content": "import type { Meta, StoryObj } from '@storybook/react';\nimport UsageGuidelines from '../usage-guidelines';\nimport Link from '../../link/link';\nimport React from 'react';\n\nconst meta: Meta<typeof UsageGuidelines> = {\n  component: UsageGuidelines,\n  title: 'Storybook Blocks/UsageGuidelines',\n};\nexport default meta;\n\ntype Story = StoryObj<typeof UsageGuidelines>;\n\nexport const Overview: Story = {\n  args: {\n    guidelines: [\n      'Usage guideline #1',\n      <>\n        <b>Usage guideline #2 - with JSX element</b>\n      </>,\n      <>\n        Usage guideline #3 -<Link href=\"/?path=/docs/welcome--docs\">with link</Link>\n      </>,\n    ],\n  },\n};\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/usage-guidelines/usage-guidelines.module.scss",
    "content": "@import '../../styles/mixins/typography';\n\n.usageGuidelines {\n  margin: 0;\n  padding-inline-start: var(--sb-spacing-large);\n\n  .usageGuideline {\n    color: var(--sb-primary-text-color);\n    margin: var(--sb-spacing-medium) 0;\n    @include sb-content-text;\n    &:first-child {\n      margin-top: 0;\n    }\n  }\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/usage-guidelines/usage-guidelines.tsx",
    "content": "import React, { useMemo } from 'react';\nimport styles from './usage-guidelines.module.scss';\nimport { ElementContent } from '../../types';\n\ninterface UsageGuidelinesProps {\n  guidelines: Array<ElementContent>;\n}\n\nconst UsageGuidelines: React.FC<UsageGuidelinesProps> = ({ guidelines = [] }) => {\n  const guidelinesElements = useMemo(\n    () =>\n      guidelines.map((guideline, index) => (\n        // eslint-disable-next-line react/no-array-index-key\n        <li key={index} className={styles.usageGuideline}>\n          {guideline}\n        </li>\n      )),\n    [guidelines],\n  );\n\n  return <ul className={styles.usageGuidelines}>{guidelinesElements}</ul>;\n};\n\nexport default UsageGuidelines;\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/visual-description/__stories__/visual-description.mdx",
    "content": "import { Controls, Canvas, Meta } from '@storybook/blocks';\nimport * as VisualDescription from './visual-description.stories';\n\n<Meta of={VisualDescription} />\n\n# VisualDescription\n\n## Overview\n\nThe VisualDescription component is used to display a visual description with a title, accompanying text and an optional code block.\nIt can be used to provide visual explanations along with textual descriptions.\n\n<Canvas of={VisualDescription.Overview} />\n\n## Props\n\n<Controls />\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/visual-description/__stories__/visual-description.stories.tsx",
    "content": "import type { Meta, StoryObj } from '@storybook/react';\nimport VisualDescription from '../visual-description';\n\nconst meta: Meta<typeof VisualDescription> = {\n  component: VisualDescription,\n  title: 'Storybook Blocks/VisualDescription',\n};\nexport default meta;\n\ntype Story = StoryObj<typeof VisualDescription>;\n\nexport const Overview: Story = {\n  args: {\n    title: 'Example Title',\n    ariaLabel: 'Example Visual Description',\n    children: <img src=\"/visual-description.png\" alt=\"Example Image\" width={200} />,\n    description: 'This is an example visual description.',\n    code: 'const exampleCode = \"Hello, world!\";',\n    className: '',\n    visualDescriptionClassName: '',\n  },\n};\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/visual-description/visual-description.module.scss",
    "content": "@import \"../../styles/mixins/typography\";\n\n.visualDescription {\n  display: flex;\n\n  &:not(:last-child) {\n    margin-bottom: 24px;\n  }\n\n  &Visual {\n    height: 40px;\n    width: 40px;\n    margin: 0 var(--sb-spacing-medium) 0 0;\n    & > * {\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  &Text {\n    display: flex;\n    flex-direction: column;\n    @include sb-content-text;\n    color: var(--sb-secondary-text-color);\n    &:not(:last-child) {\n      margin-bottom: 24px;\n    }\n  }\n\n  &Title {\n    @include sb-content-text;\n    font-weight: 500;\n    margin: 0;\n    color: var(--sb-primary-text-color);\n  }\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/components/visual-description/visual-description.tsx",
    "content": "import React from 'react';\nimport cx from 'classnames';\nimport styles from './visual-description.module.scss';\n\ninterface VisualDescriptionProps {\n  title: string;\n  ariaLabel: string;\n  children: React.ReactNode;\n  description: string;\n  code?: string;\n  className?: string;\n  visualDescriptionClassName?: string;\n}\n\nconst VisualDescription: React.FC<VisualDescriptionProps> = ({\n  title,\n  ariaLabel,\n  children,\n  description,\n  code,\n  className,\n  visualDescriptionClassName,\n}) => (\n  <div className={cx(styles.visualDescription, className)} aria-label={ariaLabel}>\n    <figure className={cx(styles.visualDescriptionVisual, visualDescriptionClassName)} aria-hidden>\n      {children}\n    </figure>\n    <section className={styles.visualDescriptionText}>\n      <h5 className={styles.visualDescriptionTitle}>{title}</h5>\n      {description}\n      {code && <code>{code}</code>}\n    </section>\n  </div>\n);\n\nexport default VisualDescription;\n"
  },
  {
    "path": "packages/storybook-blocks/src/decorators/index.ts",
    "content": "import { withMemoryStats } from './memory-stats';\nimport { VerticalStories } from './vertical-stories';\n\nexport { withMemoryStats, VerticalStories };\n"
  },
  {
    "path": "packages/storybook-blocks/src/decorators/memory-stats.jsx",
    "content": "import React from 'react';\nimport { startMemoryStats, stopMemoryStats } from '../functions/memory-stats';\n\nexport function withMemoryStats(Story, options) {\n  const {\n    globals: { memoryStats },\n  } = options;\n  if (memoryStats === 'yes') {\n    startMemoryStats();\n  } else {\n    stopMemoryStats();\n  }\n\n  return <Story />;\n}\n\nexport default withMemoryStats;\n"
  },
  {
    "path": "packages/storybook-blocks/src/decorators/vertical-stories.jsx",
    "content": "import React from 'react';\n\nexport function VerticalStories(Story) {\n  return (\n    <div\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: '50px',\n        width: '100%',\n      }}\n    >\n      <Story />\n    </div>\n  );\n}\n\nexport default VerticalStories;\n"
  },
  {
    "path": "packages/storybook-blocks/src/functions/createComponentTemplate.tsx",
    "content": "import { ComponentType, ReactElement } from 'react';\n\ntype ArgsType = {\n  [key: string]: unknown;\n};\n\nexport function createComponentTemplate(ComponentClass: ComponentType) {\n  // eslint-disable-next-line react/display-name\n  return (args: ArgsType): ReactElement => <ComponentClass {...args} />;\n}\n\nexport default createComponentTemplate;\n"
  },
  {
    "path": "packages/storybook-blocks/src/functions/createStoryMetaSettings/createStoryMetaSettings.ts",
    "content": "import { useCallback, useMemo, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { AllowedIcons, IconMetaData, StoryMetaSettingsArgs, StoryMetaSettingsResult } from './types';\nimport { ArgTypes } from '@storybook/types';\nimport { Decorator } from '@storybook/react';\n\nfunction parseStringForEnums(componentName: string, enumName: string, enumObj: { [key: string]: unknown }) {\n  let returnValue;\n  for (const key of Object.keys(enumObj)) {\n    if (returnValue) returnValue = `${returnValue} | ${parseStringForEnum(componentName, enumName, key)}`;\n    else returnValue = parseStringForEnum(componentName, enumName, key);\n  }\n\n  return returnValue;\n}\n\nfunction parseStringForEnum(componentName: string, enumName: string, enumKey: string) {\n  return `${componentName}.${enumName}.${enumKey}`;\n}\n\n/**\n * Creates a decorator which maps a callback prop to an input prop.\n * For example: mapping the onChange callback of a Select component to its currentValue prop.\n * Useful for adding interactivity to stories of controlled components.\n * Additionally, the callback will trigger a Storybook action, that can be seen on the Actions tab.\n * @param {string} actionName - the name of the action prop of the component in the story. For example, \"setValue\" or \"onChange\".\n * @param {string} linkedToPropValue - the name of the prop which should be updated when the prop of \"actionName\" is called. For example, \"value\".\n * @returns A decorate for storybook which updates the {@link linkedToPropValue} input of the component, whenever {@link actionName} is called.\n */\nfunction createMappedActionToInputPropDecorator(actionName: string, linkedToPropValue: string): Decorator {\n  return (Story, context) => {\n    const [propValue, setPropValue] = useState(context.initialArgs[linkedToPropValue]);\n    const createAction = useMemo(() => action(actionName), []);\n\n    const injectedCallback = useCallback(\n      (newPropValue: unknown) => {\n        setPropValue(newPropValue);\n        createAction(newPropValue);\n      },\n      [setPropValue, createAction],\n    );\n\n    context.args[actionName] = injectedCallback;\n    context.args[linkedToPropValue] = propValue;\n\n    return Story();\n  };\n}\n\nexport function createStoryMetaSettings({\n  component,\n  enumPropNamesArray,\n  iconPropNamesArray,\n  actionPropsArray,\n  iconsMetaData,\n  allIconsComponents,\n  ignoreControlsPropNamesArray,\n}: StoryMetaSettingsArgs): StoryMetaSettingsResult {\n  const argTypes: ArgTypes = {};\n  const decorators: Decorator[] = [];\n  const allowedIcons = iconsMetaData?.reduce(\n    (acc: AllowedIcons, icon: IconMetaData) => {\n      const Component = allIconsComponents[icon.file.split('.')[0]];\n      acc.options.push(icon.name);\n      acc.mapping[icon.name] = Component;\n\n      return acc;\n    },\n    { options: [], mapping: {} },\n  );\n\n  // set enum allowed values inside argsTypes object\n  enumPropNamesArray?.forEach(prop => {\n    let enumName;\n    if (prop instanceof Object) {\n      enumName = prop.enumName;\n      prop = prop.propName;\n    } else {\n      enumName = `${prop}s`;\n    }\n    const enums = component[enumName];\n    if (enums && enums instanceof Object) {\n      // docgen is the parser we using for parsing all our component prop types, default props and\n      // other component data (it's configure under storybook main.js file)\n      // eslint-disable-next-line no-underscore-dangle\n      const componentName = component.__docgenInfo.displayName;\n      argTypes[prop] = {\n        options: enums,\n        labels: enums,\n        table: {\n          type: {\n            summary: parseStringForEnums(componentName, enumName, enums),\n            // For not displaying box for enumns in controls of js not converted components\n            detail: null,\n          },\n        },\n      };\n    }\n  });\n\n  // set icon allowed values inside argsTypes object\n  iconPropNamesArray?.forEach(propName => {\n    argTypes[propName] = {\n      options: allowedIcons?.options,\n      mapping: allowedIcons?.mapping,\n      control: {\n        type: 'select',\n      },\n    };\n  });\n\n  actionPropsArray?.forEach(actionProp => {\n    if (typeof actionProp === 'string') {\n      argTypes[actionProp] = { action: actionProp, control: false };\n    } else if (actionProp?.name && actionProp.linkedToPropValue) {\n      // we assume that actionPropsArray is static. If it changes, things may break, since internally we call React.useState for the story decorator.\n      decorators.push(createMappedActionToInputPropDecorator(actionProp.name, actionProp.linkedToPropValue));\n    }\n  });\n\n  // If prop type is ElementContent, set text control, otherwise it's displaying as object\n  const componentProps = component?.__docgenInfo?.props;\n  if (componentProps) {\n    Object.keys(componentProps)?.forEach(propName => {\n      const prop = componentProps[propName];\n      if (prop?.type?.name === 'ElementContent') {\n        argTypes[propName] = { control: { type: 'text' } };\n      }\n    });\n  }\n\n  // Disable controls for specific props\n  ignoreControlsPropNamesArray?.forEach((propName: string) => {\n    if (argTypes[propName] instanceof Object) {\n      argTypes[propName] = { ...argTypes[propName], control: false };\n    } else {\n      argTypes[propName] = { control: false };\n    }\n  });\n\n  return { argTypes, decorators };\n}\n\nexport default createStoryMetaSettings;\n"
  },
  {
    "path": "packages/storybook-blocks/src/functions/createStoryMetaSettings/types.ts",
    "content": "import { ArgTypes } from '@storybook/types';\nimport { Decorator } from '@storybook/react';\n\nexport type EnumPropNames = {\n  propName: string;\n  enumName: string;\n};\n\nexport type ActionProps = {\n  name: string;\n  linkedToPropValue: string;\n};\n\nexport type IconMetaData = {\n  file: string;\n  name: string;\n};\n\nexport type AllowedIcons = {\n  options: string[];\n  mapping: { [key: string]: unknown };\n};\n\nexport type StoryMetaSettingsArgs = {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  component: any;\n  enumPropNamesArray?: Array<string | EnumPropNames>;\n  iconPropNamesArray?: string[];\n  actionPropsArray?: Array<string | ActionProps>;\n  allIconsComponents: { [key: string]: unknown };\n  iconsMetaData?: IconMetaData[];\n  ignoreControlsPropNamesArray?: string[];\n};\n\nexport type StoryMetaSettingsResult = {\n  argTypes: Partial<ArgTypes>;\n  decorators: Decorator[];\n};\n"
  },
  {
    "path": "packages/storybook-blocks/src/functions/index.ts",
    "content": "import { createStoryMetaSettings } from './createStoryMetaSettings/createStoryMetaSettings';\nimport { createComponentTemplate } from './createComponentTemplate';\n\nexport { createStoryMetaSettings, createComponentTemplate };\n"
  },
  {
    "path": "packages/storybook-blocks/src/functions/memory-stats/index.js",
    "content": "import MemoryStats from './memory-stats-lib';\n\nlet stats = null;\n\nexport function startMemoryStats() {\n  if (!stats) {\n    stats = new MemoryStats();\n\n    stats.domElement.style.position = 'fixed';\n    stats.domElement.style.right = '0px';\n    stats.domElement.style.bottom = '0px';\n\n    document.body.appendChild(stats.domElement);\n\n    requestAnimationFrame(function rAFloop() {\n      if (!stats) {\n        return;\n      }\n      stats.update();\n      requestAnimationFrame(rAFloop);\n    });\n  }\n}\n\nexport function stopMemoryStats() {\n  if (stats) {\n    stats.domElement.remove();\n    stats = null;\n  }\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/functions/memory-stats/memory-stats-lib.js",
    "content": "/* eslint-disable no-undef */\n/**\n * @author mrdoob / http://mrdoob.com/\n * @author jetienne / http://jetienne.com/\n * @author paulirish / http://paulirish.com/\n * @url https://github.com/paulirish/memory-stats.js\n */\nexport default function MemoryStats() {\n  let msMin = 100;\n  let msMax = 0;\n  const GRAPH_HEIGHT = 30;\n  let redrawMBThreshold = GRAPH_HEIGHT;\n\n  const container = document.createElement('div');\n  container.id = 'stats';\n  container.style.cssText =\n    'width:80px;height:48px;opacity:0.9;cursor:pointer;overflow:hidden;z-index:10000;will-change:transform;';\n\n  const msDiv = document.createElement('div');\n  msDiv.id = 'ms';\n  msDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#020;';\n  container.appendChild(msDiv);\n\n  const msText = document.createElement('div');\n  msText.id = 'msText';\n  msText.style.cssText =\n    'color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';\n  msText.innerHTML = 'Memory';\n  msDiv.appendChild(msText);\n\n  const msGraph = document.createElement('div');\n  msGraph.id = 'msGraph';\n  msGraph.style.cssText = `position:relative;width:74px;height:${GRAPH_HEIGHT}px;background-color:#0f0`;\n  msDiv.appendChild(msGraph);\n\n  while (msGraph.children.length < 74) {\n    const bar = document.createElement('span');\n    bar.style.cssText = `width:1px;height:${GRAPH_HEIGHT}px;float:left;background-color:#131`;\n    msGraph.appendChild(bar);\n  }\n\n  const updateGraph = function (dom, height, color) {\n    const child = dom.appendChild(dom.firstChild);\n    child.style.height = `${height}px`;\n    if (color) child.style.backgroundColor = color;\n  };\n\n  const redrawGraph = function (dom, oHFactor, hFactor) {\n    [].forEach.call(dom.children, c => {\n      const cHeight = c.style.height.substring(0, c.style.height.length - 2);\n\n      // Convert to MB, change factor\n      const newVal = GRAPH_HEIGHT - ((GRAPH_HEIGHT - cHeight) / oHFactor) * hFactor;\n\n      c.style.height = `${newVal}px`;\n    });\n  };\n\n  // polyfill usedJSHeapSize\n  if (window.performance && !performance.memory) {\n    performance.memory = { usedJSHeapSize: 0, totalJSHeapSize: 0 };\n  }\n\n  // support of the API?\n  if (performance.memory.totalJSHeapSize === 0) {\n    console.warn('totalJSHeapSize === 0... performance.memory is only available in Chrome .');\n  }\n\n  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];\n  let precision;\n  let i;\n  function bytesToSize(bytes, nFractDigit) {\n    if (bytes === 0) return 'n/a';\n    nFractDigit = nFractDigit !== undefined ? nFractDigit : 0;\n    precision = 10 ** nFractDigit;\n    i = Math.floor(Math.log(bytes) / Math.log(1024));\n\n    return `${Math.round((bytes * precision) / 1024 ** i) / precision} ${sizes[i]}`;\n  }\n\n  // TODO, add a sanity check to see if values are bucketed.\n  // If so, remind user to adopt the --enable-precise-memory-info flag.\n  // open -a \"/Applications/Google Chrome.app\" --args --enable-precise-memory-info\n\n  let lastTime = Date.now();\n  let lastUsedHeap = performance.memory.usedJSHeapSize;\n  let delta = 0;\n  let color = '#131';\n  let ms = 0;\n  let mbValue = 0;\n  let factor = 0;\n  let newThreshold = 0;\n\n  return {\n    domElement: container,\n\n    update() {\n      // update at 30fps\n      if (Date.now() - lastTime < 1000 / 30) return;\n      lastTime = Date.now();\n\n      delta = performance.memory.usedJSHeapSize - lastUsedHeap;\n      lastUsedHeap = performance.memory.usedJSHeapSize;\n\n      // if memory has gone down, consider it a GC and draw a red bar.\n      color = delta < 0 ? '#830' : '#131';\n\n      ms = lastUsedHeap;\n      msMin = Math.min(msMin, ms);\n      msMax = Math.max(msMax, ms);\n      msText.textContent = `Mem: ${bytesToSize(ms, 2)}`;\n\n      mbValue = ms / (1024 * 1024);\n\n      if (mbValue > redrawMBThreshold) {\n        factor = (mbValue - (mbValue % GRAPH_HEIGHT)) / GRAPH_HEIGHT;\n        newThreshold = GRAPH_HEIGHT * (factor + 1);\n        redrawGraph(msGraph, GRAPH_HEIGHT / redrawMBThreshold, GRAPH_HEIGHT / newThreshold);\n        redrawMBThreshold = newThreshold;\n      }\n\n      updateGraph(msGraph, GRAPH_HEIGHT - mbValue * (GRAPH_HEIGHT / redrawMBThreshold), color);\n    },\n  };\n}\n\nif (typeof module !== 'undefined' && module.exports) {\n  module.exports = MemoryStats;\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/global.d.ts",
    "content": "// SCSS\ndeclare module '*.module.scss' {\n  const classes: { [key: string]: string };\n  export default classes;\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/helpers/components/Flex/Flex.module.scss",
    "content": ".container {\n  display: flex;\n  flex-direction: row;\n  &.justify {\n    &Start {\n      justify-content: flex-start;\n    }\n\n    &End {\n      justify-content: flex-end;\n    }\n\n    &Center {\n      justify-content: center;\n    }\n\n    &SpaceBetween {\n      justify-content: space-between;\n    }\n\n    &SpaceAround {\n      justify-content: space-around;\n    }\n  }\n  &.align {\n    &Start {\n      align-items: flex-start;\n    }\n\n    &End {\n      align-items: flex-end;\n    }\n\n    &Center {\n      align-items: center;\n    }\n\n    &Stretch {\n      align-items: stretch;\n    }\n  }\n  &.direction {\n    &Column {\n      flex-direction: column;\n    }\n  }\n  &.wrap {\n    flex-wrap: wrap;\n  }\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/helpers/components/Flex/Flex.tsx",
    "content": "import React, { useMemo } from 'react';\nimport cx from 'classnames';\nimport { FlexAlign, FlexDirection, FlexGap, FlexJustify } from './FlexConstants';\nimport { getStyle } from '../../utils/typesciptCssModulesHelper';\nimport { ElementContent, withStaticProps } from '../../../types';\nimport { VibeComponentProps } from '../../types';\nimport styles from './Flex.module.scss';\n\ninterface FlexProps extends VibeComponentProps {\n  style?: object;\n  direction?: FlexDirection;\n  elementType?: React.ElementType;\n  wrap?: boolean;\n  children?: ElementContent | Array<ElementContent>;\n  justify?: FlexJustify;\n  align?: FlexAlign;\n  gap?: FlexGap | number;\n  ariaLabel?: string;\n  tabIndex?: number;\n  /** onClick function - MouseEvent */\n  onClick?: (event: React.MouseEvent) => void;\n  /** element id to describe the counter accordingly */\n  ariaLabelledby?: string;\n}\n\nconst Flex: React.FC<FlexProps> & {\n  justify?: typeof FlexJustify;\n  align?: typeof FlexAlign;\n  gaps?: typeof FlexGap;\n  directions?: typeof FlexDirection;\n} = ({\n  className,\n  id,\n  elementType = 'div',\n  direction = Flex.directions?.ROW,\n  wrap = false,\n  children,\n  justify = Flex.justify?.START,\n  align = Flex.align?.CENTER,\n  gap = Flex.gaps?.NONE,\n  onClick,\n  style,\n  ariaLabelledby,\n  ariaLabel,\n  tabIndex,\n  'data-testid': dataTestId,\n}) => {\n  const overrideStyle = useMemo(() => ({ ...style, gap: `${gap}px` }), [style, gap]);\n  const onClickProps = useMemo(() => {\n    if (onClick) return { elementType, ariaLabelledby };\n\n    return { 'aria-labelledby': ariaLabelledby };\n  }, [onClick, elementType, ariaLabelledby]);\n  const Element = elementType;\n\n  return (\n    <Element\n      id={id}\n      data-testid={dataTestId}\n      {...onClickProps}\n      className={cx(\n        styles.container,\n        getStyle(styles, `direction${direction}`),\n        getStyle(styles, `justify${justify}`),\n        getStyle(styles, `align${align}`),\n        className,\n        {\n          [styles.wrap]: wrap,\n        },\n      )}\n      tabIndex={tabIndex}\n      onClick={onClick}\n      style={overrideStyle}\n      aria-label={ariaLabel}\n    >\n      {children}\n    </Element>\n  );\n};\n\nexport default withStaticProps(Flex, {\n  justify: FlexJustify,\n  align: FlexAlign,\n  gaps: FlexGap,\n  directions: FlexDirection,\n});\n"
  },
  {
    "path": "packages/storybook-blocks/src/helpers/components/Flex/FlexConstants.ts",
    "content": "export enum FlexAlign {\n  START = 'Start',\n  CENTER = 'Center',\n  END = 'End',\n  STRETCH = 'Stretch',\n}\n\nexport enum FlexJustify {\n  START = 'Start',\n  CENTER = 'Center',\n  END = 'End',\n  STRETCH = 'Stretch',\n  SPACE_AROUND = 'SpaceAround',\n  SPACE_BETWEEN = 'SpaceBetween',\n}\n\nexport enum FlexGap {\n  XS = 4,\n  SMALL = 8,\n  MEDIUM = 16,\n  LARGE = 24,\n  NONE = 0,\n}\n\nexport enum FlexDirection {\n  ROW = 'Row',\n  COLUMN = 'Column',\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/helpers/components/Icons/Check.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport React from 'react';\ninterface CheckProps extends React.SVGAttributes<SVGElement> {\n  size?: string | number;\n}\nconst Check: React.FC<CheckProps> = ({ size, ...props }) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={size || '20'} height={size || '20'} {...props}>\n    <path\n      d=\"M8.53033 14.2478L8 13.7175L7.46967 14.2478C7.76256 14.5407 8.23744 14.5407 8.53033 14.2478ZM8 12.6569L4.53033 9.18718C4.23744 8.89429 3.76256 8.89429 3.46967 9.18718C3.17678 9.48008 3.17678 9.95495 3.46967 10.2478L7.46967 14.2478L8 13.7175L8.53033 14.2478L16.2478 6.53033C16.5407 6.23743 16.5407 5.76256 16.2478 5.46967C15.955 5.17677 15.4801 5.17677 15.1872 5.46967L8 12.6569Z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n);\nCheck.displayName = 'Check';\nexport default Check;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/storybook-blocks/src/helpers/components/Icons/CloseSmall.tsx",
    "content": "/* eslint-disable */\n/* tslint:disable */\nimport React from 'react';\ninterface CloseSmallProps extends React.SVGAttributes<SVGElement> {\n  size?: string | number;\n}\nconst CloseSmall: React.FC<CloseSmallProps> = ({ size, ...props }) => (\n  <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width={size || '20'} height={size || '20'} {...props}>\n    <path\n      d=\"M6.53033 5.46967C6.23744 5.17678 5.76256 5.17678 5.46967 5.46967C5.17678 5.76256 5.17678 6.23744 5.46967 6.53033L8.62562 9.68628L5.47045 12.8415C5.17756 13.1343 5.17756 13.6092 5.47045 13.9021C5.76334 14.195 6.23822 14.195 6.53111 13.9021L9.68628 10.7469L12.8415 13.9021C13.1343 14.195 13.6092 14.195 13.9021 13.9021C14.195 13.6092 14.195 13.1343 13.9021 12.8415L10.7469 9.68628L13.9029 6.53033C14.1958 6.23744 14.1958 5.76256 13.9029 5.46967C13.61 5.17678 13.1351 5.17678 12.8422 5.46967L9.68628 8.62562L6.53033 5.46967Z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n);\nCloseSmall.displayName = 'CloseSmall';\nexport default CloseSmall;\n/* tslint:enable */\n/* eslint-enable */\n"
  },
  {
    "path": "packages/storybook-blocks/src/helpers/components/Link/Link.module.scss",
    "content": "@import '../../../styles/mixins/typography';\n@import '../../../styles/mixins/focus';\n\n.link {\n  display: flex;\n  align-items: center;\n  color: var(--sb-link-color);\n  @include sb-font-link();\n  text-decoration: none;\n  writing-mode: horizontal-tb;\n  @include sb-focus-style();\n}\n\n.link:hover {\n  text-decoration: underline;\n}\n\n.link.inlineText {\n  display: inline-flex;\n  align-items: unset;\n}\n\n.link.inheritFontSize {\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.iconStart {\n  line-height: 24px;\n  margin-inline-end: var(--sb-spacing-xs);\n}\n\n.iconEnd {\n  line-height: 24px;\n  margin-inline-start: var(--sb-spacing-xs);\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/helpers/components/Link/Link.tsx",
    "content": "import cx from 'classnames';\nimport React, { forwardRef, useCallback } from 'react';\nimport { NOOP } from '../../utils/function-utils';\nimport { LinkTarget } from './LinkConsts';\nimport { VibeComponentProps, VibeComponent } from '../../types';\nimport { withStaticProps } from '../../../types';\nimport styles from './Link.module.scss';\n\ninterface LinkProps extends VibeComponentProps {\n  /**\n   * Class name for overriding link text styles\n   */\n  textClassName?: string;\n  /** Specifies the location (URL) of the external resource */\n  href?: string;\n  /** The link text */\n  text?: React.ReactNode | React.ReactNode[] | string;\n  /** Defines the relationship between a linked resource and the current document */\n  rel?: string;\n  /** onClick function - MouseEvent */\n  onClick?: (event: React.MouseEvent) => void;\n  /** Specifies where to open the linked document */\n  target?: LinkTarget;\n  /** Aria label description */\n  ariaLabelDescription?: string;\n  /** element id to describe the counter accordingly */\n  ariaLabeledBy?: string;\n  /** disable navigation */\n  disableNavigation?: boolean;\n  /** inherit text size */\n  inheritFontSize?: boolean;\n  /** if the link is in part of other text content */\n  inlineText?: boolean;\n}\n\nconst Link: VibeComponent<LinkProps, HTMLAnchorElement> & {\n  targets?: typeof LinkTarget;\n  target?: typeof LinkTarget;\n} = forwardRef(\n  (\n    {\n      className,\n      textClassName,\n      href = '',\n      text = '',\n      rel = 'noreferrer',\n      onClick = NOOP,\n      target = Link.targets?.NEW_WINDOW,\n      ariaLabelDescription = '',\n      id = '',\n      ariaLabeledBy = '',\n      disableNavigation = false,\n      inheritFontSize = false,\n      inlineText = false,\n    },\n    ref: React.ForwardedRef<HTMLAnchorElement>,\n  ) => {\n    const onClickWrapper = useCallback(\n      (e: React.MouseEvent<HTMLElement>) => {\n        if (disableNavigation) {\n          e.preventDefault();\n        }\n        onClick && onClick(e);\n      },\n      [disableNavigation, onClick],\n    );\n\n    return (\n      <a\n        id={id}\n        href={href}\n        rel={rel}\n        ref={ref}\n        onClick={onClickWrapper}\n        target={target}\n        className={cx(styles.link, className, {\n          [styles.inheritFontSize]: inheritFontSize,\n          [styles.inlineText]: inlineText,\n        })}\n        aria-label={ariaLabelDescription}\n        aria-labelledby={ariaLabeledBy}\n      >\n        <span className={cx(styles.text, textClassName)}>{text}</span>\n      </a>\n    );\n  },\n);\n\nexport default withStaticProps(Link, {\n  target: LinkTarget,\n  targets: LinkTarget,\n});\n"
  },
  {
    "path": "packages/storybook-blocks/src/helpers/components/Link/LinkConsts.ts",
    "content": "export enum LinkTarget {\n  NEW_WINDOW = '_blank',\n  SELF = '_self',\n  PARENT = '_parent',\n  TOP = '_top',\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/helpers/types/VibeComponent.ts",
    "content": "import React from 'react';\n\nexport type VibeComponent<T, P = HTMLElement> = React.ForwardRefExoticComponent<T & React.RefAttributes<P>>;\n"
  },
  {
    "path": "packages/storybook-blocks/src/helpers/types/VibeComponentProps.ts",
    "content": "export interface VibeComponentProps {\n  className?: string;\n  'data-testid'?: string;\n  id?: string;\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/helpers/types/index.ts",
    "content": "export * from './VibeComponent';\nexport * from './VibeComponentProps';\n"
  },
  {
    "path": "packages/storybook-blocks/src/helpers/utils/bem-helper.ts",
    "content": "export function BEMClass(componentName: string) {\n  return ({ element, state }: { element?: string; state?: string }) => {\n    let className = componentName;\n    if (element) className = `${className}_${element}`;\n    if (state) className = `${className}--${state}`;\n\n    return className;\n  };\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/helpers/utils/function-utils.ts",
    "content": "// eslint-disable-next-line no-empty-function\nexport function NOOP() {}\n"
  },
  {
    "path": "packages/storybook-blocks/src/helpers/utils/typesciptCssModulesHelper.ts",
    "content": "/**\n * Return style by key - used to fix noImplicitAny errors when referencing modular styles from ts files via index accessor\n * @param styles modular styles object\n * @param key string classname\n */\nexport function getStyle<StylesType>(\n  styles: StylesType,\n  key: string | undefined | null,\n): StylesType[keyof StylesType] | string {\n  if (!key || !styles[key as keyof typeof styles]) return '';\n\n  return styles[key as keyof typeof styles];\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/index.ts",
    "content": "import './styles/tokens/index.scss';\n\nexport * from './components';\nexport * from './decorators';\nexport * from './functions';\n"
  },
  {
    "path": "packages/storybook-blocks/src/styles/mixins/_focus.scss",
    "content": "@mixin sb-focus-style($focus-radius: 4px) {\n  &:focus-visible,\n  &.focus-visible {\n    @include sb-focus-style-css($focus-radius);\n  }\n\n  &:focus:not(.focus-visible) {\n    outline: none;\n  }\n}\n\n@mixin sb-focus-style-css($focus-radius: 4px, $shadow-depth: 3px) {\n  @include sb-focus-style-base($focus-radius);\n\n  box-shadow:\n    0 0 0 $shadow-depth hsl(209deg 100% 50% / 50%),\n    0 0 0 1px var(--sb-primary-hover-color) inset;\n}\n\n@mixin sb-focus-style-base($focus-radius: 4px) {\n  outline: none;\n  z-index: 11;\n  border-radius: $focus-radius;\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/styles/mixins/_index.scss",
    "content": "@import 'layout';\n@import 'focus';\n@import 'typography';\n"
  },
  {
    "path": "packages/storybook-blocks/src/styles/mixins/_layout.scss",
    "content": "@mixin sb-frame() {\n  border: var(--sb-layout-border-color) 1px solid;\n  border-radius: var(--sb-border-radius-medium);\n  border-color: var(--sb-layout-border-color);\n}\n\n// Grid auto fit\n// - This mixin defines a grid with auto fit repeat cells using min-max funtion.\n// -- This allows grid to accommodate container width without media queries.\n// -- it uses a repeat grid function with auto fix and minmax.\n// -- grid adaptation is due to the min value along with auto-fit and 1fr max value.\n\n// Grid auto fit sizes\n$sb-grid-auto-fit-cell-width-small: 120px;\n$sb-grid-auto-fit-cell-width-medium: 180px;\n$sb-grid-auto-fit-cell-width-large: 240px;\n$sb-grid-auto-fit-cell-width-xl: 300px;\n\n// @params:\n// - $grid-gap: null , defines grid \"gap\" attribute.\n// - $grid-column-gap: null,  defines grid \"column-gap\" attribute.\n// - $grid-row-gap: null,  defines grid \"row-gap\" attribute.\n// - $grid-cell-min-width: {mandatory}, defined min value in for grid-template-columns\n// - $grid-cell-array-calc: {mandatory}, defined max num of items using calc\n\n@mixin sb-grid-auto-fit(\n  $grid-gap: null,\n  $grid-column-gap: null,\n  $grid-row-gap: null,\n  $grid-cell-min-width,\n  $grid-cell-array-calc: null,\n  $important: false\n) {\n  display: grid;\n  @if $important {\n    grid-template-columns: repeat(\n      auto-fit,\n      minmax(clamp(#{$grid-cell-array-calc}, #{$grid-cell-min-width}, 100%), 1fr)\n    ) !important;\n    gap: $grid-gap !important;\n    column-gap: $grid-column-gap !important;\n    row-gap: $grid-row-gap !important;\n  } @else {\n    grid-template-columns: repeat(\n      auto-fit,\n      minmax(clamp(#{$grid-cell-array-calc}, #{$grid-cell-min-width}, 100%), 1fr)\n    );\n    gap: $grid-gap;\n    column-gap: $grid-column-gap;\n    row-gap: $grid-row-gap;\n  }\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/styles/mixins/_typography.scss",
    "content": "@mixin sb-basic-text {\n  color: var(--sb-primary-text-color);\n  -webkit-font-smoothing: initial;\n}\n\n@mixin sb-content-text-without-color {\n  font-family: var(--sb-font-family);\n  font-size: var(--sb-text-font-size);\n  line-height: var(--sb-text-line-height);\n  font-weight: 400;\n}\n\n@mixin sb-content-text {\n  @include sb-content-text-without-color;\n  @include sb-basic-text;\n}\n\n@mixin sb-small-text-without-color {\n  font-size: var(--sb-small-text-font-size);\n  font-weight: 400;\n  line-height: var(--sb-text-line-height);\n}\n\n@mixin sb-small-text {\n  @include sb-basic-text;\n  @include sb-small-text-without-color;\n}\n\n@mixin sb-font-link {\n  font: var(--sb-font-general-label);\n  text-decoration: none;\n  color: var(--sb-link-color);\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/styles/tokens/border-radius.scss",
    "content": ":root {\n  --sb-border-radius-extra-small: 2px;\n  --sb-border-radius-small: 4px;\n  --sb-border-radius-medium: 8px;\n  --sb-border-radius-big: 16px;\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/styles/tokens/colors.scss",
    "content": ":root,\n.light-app-theme,\n.default-app-theme {\n  --sb-link-color: #1f76c2;\n  --sb-primary-background-color: #ffffff;\n  --sb-primary-text-color: #323338;\n  --sb-ui-border-color: #c3c6d4;\n  --sb-dark-background-on-secondary-color: #f6f7fb;\n  --sb-text-color-on-primary: #ffffff;\n  --sb-positive-color: #00854d;\n  --sb-negative-color: #d83a52;\n  --sb-color-purple: #a25ddc;\n  --sb-color-winter: #9aadbd;\n  --sb-color-sofia_pink: #ff158a;\n  --sb-layout-border-color: #d0d4e4;\n  --sb-secondary-background-color: #ffffff;\n  --sb-primary-hover-color: #0060b9;\n  --sb-secondary-text-color: #676879;\n  --sb-primary-color: #0073ea;\n  --sb-primary-selected-color: #cce5ff;\n  --sb-positive-color-selected: #bbdbc9;\n  --sb-warning-color-selected: #fceba1;\n  --sb-negative-color-selected: #f4c3cb;\n  --sb-icon-color: #676879;\n  --sb-text-color-fixed-light: #ffffff;\n  --sb-text-color-fixed-dark: #323338;\n  --sb-inverted-color-background: #323338;\n  --sb-disabled-background-color: #ecedf5;\n  --sb-primary-background-hover-color: rgba(103, 104, 121, 0.1);\n  --sb-dark-background-color: #f6f7fb;\n  --sb-brand-color: #5034ff;\n  --sb-allgrey-background-color: #f6f7fb;\n}\n\n.dark-app-theme {\n  --sb-link-color: #69a7ef;\n  --sb-primary-background-color: #181b34;\n  --sb-primary-text-color: #d5d8df;\n  --sb-ui-border-color: #797e93;\n  --sb-dark-background-on-secondary-color: #4b4e69;\n  --sb-text-color-on-primary: #ffffff;\n  --sb-positive-color: #00854d;\n  --sb-negative-color: #d83a52;\n  --sb-color-purple: #b57de3;\n  --sb-color-winter: #aebdca;\n  --sb-color-sofia_pink: #ff44a1;\n  --sb-layout-border-color: #4b4e69;\n  --sb-secondary-background-color: #30324e;\n  --sb-primary-hover-color: #0060b9;\n  --sb-secondary-text-color: #9699a6;\n  --sb-primary-color: #0073ea;\n  --sb-primary-selected-color: #133774;\n  --sb-negative-color-selected: #642830;\n  --sb-icon-color: #c3c6d4;\n  --sb-text-color-fixed-light: #ffffff;\n  --sb-text-color-fixed-dark: #323338;\n  --sb-inverted-color-background: #ffffff;\n  --sb-disabled-background-color: #3c3f59;\n  --sb-primary-background-hover-color: #4b4e69;\n  --sb-dark-background-color: #393b53;\n  --sb-allgrey-background-color: #30324e;\n}\n\n.black-app-theme {\n  --sb-link-color: #69a7ef;\n  --sb-primary-background-color: #111111;\n  --sb-primary-text-color: #eeeeee;\n  --sb-ui-border-color: #8d8d8d;\n  --sb-dark-background-on-secondary-color: #4b4e69;\n  --sb-text-color-on-primary: #ffffff;\n  --sb-positive-color: #00854d;\n  --sb-negative-color: #d83a52;\n  --sb-color-purple: #b57de3;\n  --sb-color-winter: #aebdca;\n  --sb-color-sofia_pink: #ff44a1;\n  --sb-layout-border-color: #636363;\n  --sb-secondary-background-color: #2c2c2c;\n  --sb-primary-hover-color: #0060b9;\n  --sb-secondary-text-color: #aaaaaa;\n  --sb-primary-color: #0073ea;\n  --sb-primary-selected-color: #133774;\n  --sb-negative-color-selected: #642830;\n  --sb-icon-color: #aaaaaa;\n  --sb-text-color-fixed-light: #ffffff;\n  --sb-text-color-fixed-dark: #323338;\n  --sb-inverted-color-background: #eeeeee;\n  --sb-disabled-background-color: #3a3a3a;\n  --sb-primary-background-hover-color: #636363;\n  --sb-dark-background-color: #2c2c2c;\n  --sb-allgrey-background-color: #2c2c2c;\n}\n\n.hacker_theme-app-theme {\n  --sb-link-color: #bd93f9;\n  --sb-primary-background-color: #282a36;\n  --sb-primary-text-color: #d5d8df;\n  --sb-ui-border-color: #797e93;\n  --sb-dark-background-on-secondary-color: #595959;\n  --sb-text-color-on-primary: #ffffff;\n  --sb-positive-color: #50fa7b;\n  --sb-negative-color: #ff5555;\n  --sb-color-purple: #b57de3;\n  --sb-color-winter: #aebdca;\n  --sb-color-sofia_pink: #ff44a1;\n  --sb-layout-border-color: #414458;\n  --sb-secondary-background-color: #30324e;\n  --sb-primary-hover-color: #fe5ab9;\n  --sb-secondary-text-color: #9699a6;\n  --sb-primary-color: #fe78c6;\n  --sb-primary-selected-color: #9f4077;\n  --sb-negative-color-selected: #642830;\n  --sb-icon-color: #c3c6d4;\n  --sb-text-color-fixed-light: #ffffff;\n  --sb-text-color-fixed-dark: #323338;\n  --sb-inverted-color-background: #ffffff;\n  --sb-disabled-background-color: #3a3a3a;\n  --sb-primary-background-hover-color: #4b4e69;\n  --sb-dark-background-color: #303241;\n  --sb-allgrey-background-color: #282a36;\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/styles/tokens/index.scss",
    "content": "@import './colors';\n@import './typography';\n@import './spacing';\n@import './border-radius';\n"
  },
  {
    "path": "packages/storybook-blocks/src/styles/tokens/spacing.scss",
    "content": ":root {\n  --sb-spacing-xxs: 2px;\n  --sb-spacing-xs: 4px;\n  --sb-spacing-xs-small: 6px;\n  --sb-spacing-small: 8px;\n  --sb-spacing-small-medium: 12px;\n  --sb-spacing-medium: 16px;\n  --sb-spacing-large: 24px;\n  --sb-spacing-xl: 32px;\n  --sb-spacing-xxl: 48px;\n  --sb-spacing-xxxl: 64px;\n\n  --sb-spacing-between-sections: 72px;\n  --sb-spacing-between-section-items: 32px;\n  --sb-spacing-between-title-to-content: 16px;\n\n  --sb-space-2: 2px;\n  --sb-space-4: 4px;\n  --sb-space-8: 8px;\n  --sb-space-12: 12px;\n  --sb-space-16: 16px;\n  --sb-space-20: 20px;\n  --sb-space-24: 24px;\n  --sb-space-32: 32px;\n  --sb-space-40: 40px;\n  --sb-space-48: 48px;\n  --sb-space-64: 64px;\n  --sb-space-80: 80px;\n\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/styles/tokens/typography.scss",
    "content": ":root {\n  // Line height\n  --sb-text-line-height-small: 20px;\n  --sb-text-line-height: 24px;\n  // Font weight\n  --sb-font-weight-normal: 400;\n  // Font size\n  --sb-h1-font-size: 40px;\n  --sb-h2-font-size: 28px;\n  --sb-h3-font-size: 18px;\n  --sb-text-font-size: 16px;\n  --sb-small-text-font-size: 14px;\n  // Font family\n  --sb-font-family: 'Figtree', 'Roboto', 'Noto Sans Hebrew', 'Noto Kufi Arabic', 'Noto Sans JP', sans-serif;\n  --sb-title-font-family: 'Poppins', 'Roboto', 'Noto Sans Hebrew', 'Noto Kufi Arabic', 'Noto Sans JP', sans-serif;\n  // Font definition\n  --sb-font-general-label: var(--sb-font-weight-normal) var(--sb-small-text-font-size) / var(--sb-text-line-height)\n    var(--sb-font-family);\n}\n"
  },
  {
    "path": "packages/storybook-blocks/src/types/ElementContent.ts",
    "content": "import { ReactNode } from 'react';\n\nexport type ElementContent = ReactNode | ReactNode[];\n"
  },
  {
    "path": "packages/storybook-blocks/src/types/index.ts",
    "content": "export * from './ElementContent';\nexport * from './withStaticProps';\n"
  },
  {
    "path": "packages/storybook-blocks/src/types/published-types.ts",
    "content": "// Types published publicly to the /types endpoint\nexport {\n  StoryMetaSettingsArgs as CreateStoryMetaSettingsArgs,\n  StoryMetaSettingsResult as CreateStoryMetaSettingsArgsResult,\n} from '../functions/createStoryMetaSettings/types';\n"
  },
  {
    "path": "packages/storybook-blocks/src/types/withStaticProps.ts",
    "content": "import React from 'react';\n\ntype Required<T> = {\n  [P in keyof T]-?: T[P];\n};\n\nexport const withStaticProps = <T, S>(forwarded: React.FC<T> & Partial<S>, staticProps: Required<S>) =>\n  Object.assign(forwarded, staticProps);\n"
  },
  {
    "path": "packages/storybook-blocks/tsconfig.json",
    "content": "{\n  \"include\": [\"src/**/*\"],\n  \"compilerOptions\": {\n    \"rootDir\": \"./src\",\n    \"lib\": [\"esnext\", \"dom\"],\n    \"allowJs\": true,\n    \"target\": \"es6\",\n    \"module\": \"ESNext\",\n    \"sourceMap\": false,\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"experimentalDecorators\": true,\n    \"emitDecoratorMetadata\": true,\n    \"declaration\": true,\n    \"skipLibCheck\": true,\n    \"noImplicitAny\": true,\n    \"strict\": true,\n    \"baseUrl\": \".\",\n    \"allowSyntheticDefaultImports\": true,\n    \"jsx\": \"react-jsx\",\n    \"plugins\": [{ \"name\": \"typescript-plugin-css-modules\" }],\n    \"esModuleInterop\": true\n  }\n}\n"
  },
  {
    "path": "packages/style/.babelrc.json",
    "content": "{\n  \"sourceType\": \"unambiguous\",\n  \"presets\": [\n    [\n      \"@babel/preset-env\",\n      {\n        \"targets\": {\n          \"chrome\": 100\n        }\n      }\n    ],\n    \"@babel/preset-typescript\"\n  ],\n  \"plugins\": []\n}\n"
  },
  {
    "path": "packages/style/.cursor/rules/color-token-management.mdc",
    "content": "---\ndescription: \"Comprehensive guide for adding, modifying, and managing color tokens in the @vibe/style package. Covers SCSS theme files, build process, naming conventions, and special handling for hacker theme.\"\nglobs: \"packages/style/**/*\"\n---\n\n# Color Token Management for @vibe/style\n\nThis rule provides a complete guide for managing color tokens in the `@style` package, which publishes as `@vibe/style`.\n\n## Package Structure Overview\n\nThe `@style` package uses a **two-layer system** for color tokens:\n\n1. **SCSS Theme Files** (source of truth) - Define CSS custom properties (`--token-name`)\n2. **JSON Files** (auto-generated) - Generated from compiled CSS for programmatic access\n\n### Key Files and Directories\n\n- **Theme SCSS Files**: [src/themes/](mdc:packages/style/src/themes/)\n\n  - [light-theme.scss](mdc:packages/style/src/themes/light-theme.scss) - Default/light theme\n  - [dark-theme.scss](mdc:packages/style/src/themes/dark-theme.scss) - Dark theme\n  - [black-theme.scss](mdc:packages/style/src/themes/black-theme.scss) - Black theme\n  - [hacker-theme.scss](mdc:packages/style/src/themes/hacker-theme.scss) - Hacker theme\n\n- **Build Script**: [scripts/generate-colors.ts](mdc:packages/style/scripts/generate-colors.ts)\n- **Generated Files**:\n  - [src/files/tokens.json](mdc:packages/style/src/files/tokens.json) - Resolved token values\n  - [src/files/colors.json](mdc:packages/style/src/files/colors.json) - Raw color values\n  - [dist/index.css](mdc:packages/style/dist/index.css) - Compiled CSS\n\n## Step-by-Step Process for Adding/Modifying Tokens\n\n### 1. Add Token to ALL Theme SCSS Files\n\nYou **must** add the new token to all four theme files to ensure consistency:\n\n```css\n// Example: Adding --info-color token\n\n// In light-theme.scss\n:root,\n.light-app-theme,\n.default-app-theme {\n  // ... existing tokens\n  --info-color: #0084ff;\n  --info-color-hover: #006bd6;\n  --info-color-selected: #b3d9ff;\n}\n\n// In dark-theme.scss\n.dark-app-theme {\n  // ... existing tokens\n  --info-color: #0084ff;\n  --info-color-hover: #4da3ff;\n  --info-color-selected: #1a3d5c;\n}\n\n// In black-theme.scss\n.black-app-theme {\n  // ... existing tokens\n  --info-color: #0084ff;\n  --info-color-hover: #4da3ff;\n  --info-color-selected: #1a3d5c;\n}\n\n// In hacker-theme.scss\n.hacker_theme-app-theme {\n  // ... existing tokens\n  --info-color: #8be9fd; // Hacker theme specific OR same as black theme\n  --info-color-hover: #6be7fb;\n  --info-color-selected: #2d4a5c;\n}\n```\n\n### 2. Special Rule for Hacker Theme\n\n**IMPORTANT**: If no specific value is provided for the hacker theme, **always use the same value as the black theme**. Do not create arbitrary values.\n\n```css\n// ✅ CORRECT: When no hacker-specific value is given\n.black-app-theme {\n  --ui-background-hover-color: #3b3b3b;\n}\n\n.hacker_theme-app-theme {\n  --ui-background-hover-color: #3b3b3b; // Same as black theme\n}\n\n// ❌ INCORRECT: Don't create arbitrary values\n.hacker_theme-app-theme {\n  --ui-background-hover-color: #3a3f56; // Don't make up colors\n}\n```\n\n### 3. Build and Generate JSON Files\n\nAfter adding tokens to SCSS files, run the build process:\n\n```bash\ncd packages/style\nyarn build\n```\n\nThis will:\n\n1. Compile SCSS to CSS (`dist/index.css`)\n2. Run [generate-colors.ts](mdc:packages/style/scripts/generate-colors.ts)\n3. Generate updated JSON files in `src/files/` and `dist/`\n\n### 4. Verify Implementation\n\nCheck that your tokens appear correctly:\n\n```bash\n# Verify token exists in all themes\ngrep \"your-token-name\" packages/style/src/files/tokens.json\n\n# Check CSS compilation\ngrep \"your-token-name\" packages/style/dist/index.css\n```\n\n## Naming Conventions (if names weren't included in human's request)\n\n### Token Naming Patterns\n\n- Use **kebab-case**: `--info-color`, `--primary-background-color`\n- Include **state variants**: `-hover`, `-selected`, `-selected-hover`\n- For branded colors: `--color-ocean-blue`, `--color-forest-green`\n- Add stylelint disable comments for underscores: `/* stylelint-disable-line custom-property-pattern */`\n\n### Token Categories\n\n**Semantic Tokens** (preferred for new additions):\n\n```css\n--primary-color, --secondary-color\n--positive-color, --negative-color, --warning-color\n--text-color-on-primary, --background-color\n--ui-background-color, --ui-background-hover-color\n```\n\n**Branded Colors** (specific color values):\n\n```css\n--color-grass-green, --color-sofia-pink\n--color-working-orange, --color-done-green\n```\n\n### Token Positioning\n\nPlace new tokens **logically** near related existing tokens:\n\n```css\n// ✅ Good: Group related tokens together\n--ui-border-color: #c3c6d4;\n--ui-background-color: #e7e9ef;\n--ui-background-hover-color: #d8d9e0; // ← New token placed logically\n--layout-border-color: #d0d4e4;\n```\n\n## Usage After Implementation\n\n```css\n.my-component {\n  background-color: var(--ui-background-color);\n\n  &:hover {\n    background-color: var(--ui-background-hover-color);\n  }\n}\n```\n\n## Best Practices\n\n1. **Always add tokens to ALL theme files** - Never skip a theme\n2. **Position tokens logically** near related tokens in SCSS files\n3. **Use black theme values for hacker theme** when no specific value is provided by human\n4. **Test in all themes** to verify proper contrast and accessibility\n5. **Use semantic names** over specific color names when possible\n6. **Follow existing patterns** for state variants\n7. **Run build process** after making changes\n\n## Common Mistakes to Avoid\n\n- ❌ Adding tokens to only some theme files\n- ❌ Creating arbitrary colors for hacker theme\n- ❌ Forgetting to run the build process\n- ❌ Using inconsistent naming conventions\n- ❌ Not testing across all themes\n\n## Build Process Details\n\nThe [generate-colors.ts](mdc:packages/style/scripts/generate-colors.ts) script:\n\n1. Reads compiled CSS from `dist/index.css`\n2. Extracts color tokens using PostCSS\n3. Resolves CSS custom property references\n4. Generates `tokens.json` with final hex/rgba values\n5. Outputs count: \"✓ light-app-theme: 283 colors\" etc.\n\n## Example: Complete Token Addition\n\nHere's a complete example of adding `--info-color` across all themes:\n\n```css\n// light-theme.scss\n--info-color: #0084ff;\n--info-color-hover: #006bd6;\n--info-color-selected: #b3d9ff;\n\n// dark-theme.scss\n--info-color: #0084ff;\n--info-color-hover: #4da3ff;\n--info-color-selected: #1a3d5c;\n\n// black-theme.scss\n--info-color: #0084ff;\n--info-color-hover: #4da3ff;\n--info-color-selected: #1a3d5c;\n\n// hacker-theme.scss\n--info-color: #0084ff; // Same as black if no specific value\n--info-color-hover: #4da3ff; // Same as black if no specific value\n--info-color-selected: #1a3d5c; // Same as black if no specific value\n```\n\nAfter running `yarn build`, the token will be available throughout the design system!\n"
  },
  {
    "path": "packages/style/.prettierrc",
    "content": "{\n  \"printWidth\": 120,\n  \"trailingComma\": \"none\",\n  \"arrowParens\": \"avoid\"\n}\n"
  },
  {
    "path": "packages/style/.stylelintignore",
    "content": "dist/**/*.scss\n"
  },
  {
    "path": "packages/style/.stylelintrc.json",
    "content": "{\n  \"extends\": \"stylelint-config-recommended-scss\",\n  \"rules\": {\n    \"selector-class-pattern\": [\n      \"^[a-z0-9]+(?:-[a-z0-9]+)*$\",\n      {\n        \"message\": \"Selector should be in kebab-case (e.g. .my-selector)\"\n      }\n    ],\n    \"custom-property-pattern\": [\n      \"^[a-z][a-z0-9]*(-[a-z0-9]+)*$\",\n      {\n        \"message\": \"CSS custom properties should use kebab-case (e.g. --primary-color)\"\n      }\n    ],\n    \"scss/dollar-variable-pattern\": [\n      \"^[a-z0-9]+(?:-[a-z0-9]+)*$\",\n      {\n        \"message\": \"Variable name should be in kebab-case (e.g. $my-variable)\"\n      }\n    ],\n    \"scss/at-mixin-pattern\": [\n      \"^[a-z0-9]+(?:-[a-z0-9]+)*$\",\n      {\n        \"message\": \"Mixin name should be in kebab-case (e.g. @mixin my-mixin)\"\n      }\n    ],\n    \"scss/at-function-pattern\": [\n      \"^[a-z][a-z0-9]*(-[a-z0-9]+)*$\",\n      {\n        \"message\": \"Function names should be kebab-case (e.g. my-function)\"\n      }\n    ],\n    \"scss/comment-no-empty\": true,\n\n    \"max-nesting-depth\": [\n      3,\n      {\n        \"ignore\": [\"pseudo-classes\"]\n      }\n    ],\n\n    \"declaration-no-important\": true,\n    \"declaration-block-no-duplicate-properties\": true,\n    \"shorthand-property-no-redundant-values\": true,\n    \"color-hex-case\": \"lower\",\n    \"color-hex-length\": \"long\",\n    \"number-leading-zero\": \"always\",\n    \"property-no-vendor-prefix\": true,\n    \"at-rule-no-vendor-prefix\": true\n  }\n}\n"
  },
  {
    "path": "packages/style/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n## [0.26.2](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.26.1...monday-ui-style@0.26.2) (2025-11-26)\n\n**Note:** Version bump only for package monday-ui-style\n\n\n\n\n\n## [0.26.1](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.26.0...monday-ui-style@0.26.1) (2025-10-25)\n\n**Note:** Version bump only for package monday-ui-style\n\n\n\n\n\n# [0.26.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.25.2...monday-ui-style@0.26.0) (2025-09-28)\n\n\n### Features\n\n* **style:** add --ui-background-hover-color token ([#3125](https://github.com/mondaycom/vibe/issues/3125)) ([92a84af](https://github.com/mondaycom/vibe/commit/92a84af73c58b77eb4989fdc10615b323d136906))\n\n\n\n\n\n## [0.25.2](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.25.1...monday-ui-style@0.25.2) (2025-07-24)\n\n\n### Bug Fixes\n\n* add missing deps ([#3010](https://github.com/mondaycom/vibe/issues/3010)) ([4d99f1d](https://github.com/mondaycom/vibe/commit/4d99f1d055baf8d6c5736149fe77eca311842622))\n\n\n\n\n\n## [0.25.1](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.25.0...monday-ui-style@0.25.1) (2025-07-24)\n\n**Note:** Version bump only for package monday-ui-style\n\n\n\n\n\n# [0.25.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.24.2...monday-ui-style@0.25.0) (2025-07-23)\n\n\n### Features\n\n* **stylelint:** add new stylelint rule for new spacing tokens system and update configuration ([#2991](https://github.com/mondaycom/vibe/issues/2991)) ([b4a07cb](https://github.com/mondaycom/vibe/commit/b4a07cbc30c9adcf081e8311d1be503adeeca1b4))\n\n\n\n\n\n## [0.24.2](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.24.1...monday-ui-style@0.24.2) (2025-07-23)\n\n\n### Bug Fixes\n\n* **style:** revise dependencies ([#3005](https://github.com/mondaycom/vibe/issues/3005)) ([f45f579](https://github.com/mondaycom/vibe/commit/f45f579f625e4865ac83f00e3d4bee801f34d99f))\n\n\n\n\n\n## [0.24.1](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.24.0...monday-ui-style@0.24.1) (2025-07-20)\n\n**Note:** Version bump only for package monday-ui-style\n\n\n\n\n\n# [0.24.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.23.0...monday-ui-style@0.24.0) (2025-05-04)\n\n\n### Features\n\n* **colors:** update ui-background-color ([#2860](https://github.com/mondaycom/vibe/issues/2860)) ([e4b97b2](https://github.com/mondaycom/vibe/commit/e4b97b28cdb8a0db5dfc37f6090df2372c755fd9))\n\n\n\n\n\n# [0.23.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.22.0...monday-ui-style@0.23.0) (2025-04-03)\n\n\n### Features\n\n* **colors:** define color-surface in dark and black themes, add backdrop-color token for all themes ([#2825](https://github.com/mondaycom/vibe/issues/2825)) ([7e20396](https://github.com/mondaycom/vibe/commit/7e20396e8eff4a5f4d1c2f9b7355c554f9edf9fa))\n\n\n\n\n\n# [0.22.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.21.1...monday-ui-style@0.22.0) (2025-03-11)\n\n\n### Features\n\n* **Spacing:** add new spacing tokens ([#2768](https://github.com/mondaycom/vibe/issues/2768)) ([a21f765](https://github.com/mondaycom/vibe/commit/a21f765ef376da00b5ed0992a41da1124fbd191c))\n\n\n\n\n\n## [0.21.1](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.21.0...monday-ui-style@0.21.1) (2025-02-02)\n\n\n### Bug Fixes\n\n* change fixed-dark-color to be fixed on all themes ([#2745](https://github.com/mondaycom/vibe/issues/2745)) ([f113746](https://github.com/mondaycom/vibe/commit/f113746d2b1e741f4edfff6c535bdb811be9d2dc))\n\n\n\n\n\n# [0.21.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.20.1...monday-ui-style@0.21.0) (2024-11-24)\n\n\n### Features\n\n* **colors::** remove shareable-color and private-color ([#2315](https://github.com/mondaycom/vibe/issues/2315)) ([87e880c](https://github.com/mondaycom/vibe/commit/87e880c4e6f224a9fac78dbbf754e63ebcbbfa61))\n\n\n\n\n\n## [0.20.1](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.20.0...monday-ui-style@0.20.1) (2024-11-24)\n\n\n### Bug Fixes\n\n* **PushNotifications:** fix icon ([#2607](https://github.com/mondaycom/vibe/issues/2607)) ([5b831a4](https://github.com/mondaycom/vibe/commit/5b831a47a8f2705a63e24b9ef18eec3a5853153d))\n* **TextSmall:** fix icon ([#2604](https://github.com/mondaycom/vibe/issues/2604)) ([9a7bad7](https://github.com/mondaycom/vibe/commit/9a7bad770bd5966210684236663de577345c5a5a))\n* **TextSmall:** fix icon ([#2605](https://github.com/mondaycom/vibe/issues/2605)) ([34b439b](https://github.com/mondaycom/vibe/commit/34b439b0e128ab1294e43dfa8eba639618fb3fef))\n\n\n\n\n\n# [0.20.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.19.0...monday-ui-style@0.20.0) (2024-11-20)\n\n\n### Features\n\n* **Switcher:** update icon ([#2599](https://github.com/mondaycom/vibe/issues/2599)) ([cdac401](https://github.com/mondaycom/vibe/commit/cdac401ee11c14c2ae3ca2d4fe62aa579b2dd1c0))\n\n\n\n\n\n# [0.19.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.18.1...monday-ui-style@0.19.0) (2024-11-19)\n\n\n### Features\n\n* **Switcher:** update icon ([#2597](https://github.com/mondaycom/vibe/issues/2597)) ([3c045b1](https://github.com/mondaycom/vibe/commit/3c045b18caf3dad36787c5ee9e84ebb3f71425b2))\n\n\n\n\n\n## [0.18.1](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.18.0...monday-ui-style@0.18.1) (2024-11-18)\n\n\n### Bug Fixes\n\n* **Switcher:** revert icon change to older version ([#2596](https://github.com/mondaycom/vibe/issues/2596)) ([202e5a6](https://github.com/mondaycom/vibe/commit/202e5a6a1e20b3fc9c9e20185d8d46fc713650b6))\n\n\n\n\n\n# [0.18.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.17.0...monday-ui-style@0.18.0) (2024-11-18)\n\n\n### Bug Fixes\n\n* **WhatsNew:** update icon ([#2592](https://github.com/mondaycom/vibe/issues/2592)) ([fbcb99f](https://github.com/mondaycom/vibe/commit/fbcb99f257b624ee7a64eb270c30292b25f6e2ef))\n\n\n### Features\n\n* **PinFull:** new icon ([#2589](https://github.com/mondaycom/vibe/issues/2589)) ([1e34a3c](https://github.com/mondaycom/vibe/commit/1e34a3cff3ee9d1be3d62643258fbca20a2bed83))\n\n\n\n\n\n# [0.17.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.16.0...monday-ui-style@0.17.0) (2024-11-14)\n\n\n### Bug Fixes\n\n* **icons:** update icons ([#2583](https://github.com/mondaycom/vibe/issues/2583)) ([0d6803c](https://github.com/mondaycom/vibe/commit/0d6803cc2e65cae0cc175f672a2c625ac69fc1d4))\n\n\n### Features\n\n* **ThumbsDown:** new icon ([#2582](https://github.com/mondaycom/vibe/issues/2582)) ([5395753](https://github.com/mondaycom/vibe/commit/53957534f8a28feb6c8345df088b1dc5f5cf02e7))\n\n\n\n\n\n# [0.16.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.15.0...monday-ui-style@0.16.0) (2024-10-31)\n\n\n### Features\n\n* **Clipboard:** new icon ([#2570](https://github.com/mondaycom/vibe/issues/2570)) ([da71c1b](https://github.com/mondaycom/vibe/commit/da71c1bc6ca23a5321b2ea6e177633da6d2e01cf))\n* **Forward:** new icon ([#2569](https://github.com/mondaycom/vibe/issues/2569)) ([2034fd5](https://github.com/mondaycom/vibe/commit/2034fd51e30e2c32425e0e06322739d3526c22eb))\n\n\n\n\n\n# [0.15.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.14.1...monday-ui-style@0.15.0) (2024-10-29)\n\n\n### Features\n\n* **Wand:** add \"Template\" tag to icon ([#2565](https://github.com/mondaycom/vibe/issues/2565)) ([9909743](https://github.com/mondaycom/vibe/commit/99097433d742bd77a94b72968b3ed2008dbf769e))\n\n\n\n\n\n## [0.14.1](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.14.0...monday-ui-style@0.14.1) (2024-09-29)\n\n**Note:** Version bump only for package monday-ui-style\n\n\n\n\n\n# [0.14.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.13.0...monday-ui-style@0.14.0) (2024-09-26)\n\n\n### Bug Fixes\n\n* **LearnMode:** fix icon's dimensions ([#2444](https://github.com/mondaycom/vibe/issues/2444)) ([7bcdd53](https://github.com/mondaycom/vibe/commit/7bcdd538dfdfa0becdc91cf51c3db84a766793cf))\n\n\n### Features\n\n* **Key:** add new icon ([#2443](https://github.com/mondaycom/vibe/issues/2443)) ([0c7bdef](https://github.com/mondaycom/vibe/commit/0c7bdeff1c7cc29a9e7b3daa37747f69d42c9822))\n\n\n\n\n\n# [0.13.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.12.0...monday-ui-style@0.13.0) (2024-09-15)\n\n\n### Features\n\n* **CloseMedium:** add new icon ([#2431](https://github.com/mondaycom/vibe/issues/2431)) ([6fefb43](https://github.com/mondaycom/vibe/commit/6fefb4331f4ef5a89f9badd71357cc92c5f9f4cb))\n\n\n\n\n\n# [0.12.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.11.1...monday-ui-style@0.12.0) (2024-09-09)\n\n\n### Features\n\n* **Icon:** add reply all icon ([#2418](https://github.com/mondaycom/vibe/issues/2418)) ([031f65d](https://github.com/mondaycom/vibe/commit/031f65d500098c0f34ede3316503aa3fceea0123))\n\n\n\n\n\n## [0.11.1](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.11.0...monday-ui-style@0.11.1) (2024-08-22)\n\n**Note:** Version bump only for package monday-ui-style\n\n\n\n\n\n# [0.11.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.10.0...monday-ui-style@0.11.0) (2024-08-07)\n\n\n### Features\n\n* **icons:** add Items Count icon ([#2294](https://github.com/mondaycom/vibe/issues/2294)) ([da16f1e](https://github.com/mondaycom/vibe/commit/da16f1e56be9f6233b0c5fe7514ff1fb72ef19d5))\n* **Icon:** update numbers icon ([#2296](https://github.com/mondaycom/vibe/issues/2296)) ([847d2c8](https://github.com/mondaycom/vibe/commit/847d2c840ffcee68a00b157f0dd6d907328aebe2))\n* **primary-surface-color:** new color token ([#2300](https://github.com/mondaycom/vibe/issues/2300)) ([780fdf7](https://github.com/mondaycom/vibe/commit/780fdf7be027bfba3aa4a643969e024263e80ec6))\n\n\n\n\n\n# [0.10.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.9.0...monday-ui-style@0.10.0) (2024-07-18)\n\n\n### Features\n\n* **Baseline:** add new icon ([#2245](https://github.com/mondaycom/vibe/issues/2245)) ([0bd7424](https://github.com/mondaycom/vibe/commit/0bd7424498362f5f0c9a00eed7c4fb2ca4d86fc4))\n\n\n\n\n\n# [0.9.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.8.0...monday-ui-style@0.9.0) (2024-07-14)\n\n\n### Features\n\n* **icons:** Add Item Height Double Icon ([#2227](https://github.com/mondaycom/vibe/issues/2227)) ([42b3f1f](https://github.com/mondaycom/vibe/commit/42b3f1f899528fbaa89d328eabcc4c6e13604c1f))\n* **icons:** Add Item Height Single Icon ([#2228](https://github.com/mondaycom/vibe/issues/2228)) ([32dc7c2](https://github.com/mondaycom/vibe/commit/32dc7c2c49715670d2e87d8095ee3830154cea20))\n* **icons:** Add Prompt icon ([#2222](https://github.com/mondaycom/vibe/issues/2222)) ([eeff132](https://github.com/mondaycom/vibe/commit/eeff13295730eef13f92c5d7d7f6ea95c361af9b))\n\n\n\n\n\n# [0.8.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.7.1...monday-ui-style@0.8.0) (2024-07-04)\n\n\n### Features\n\n* **colors:** remove overrides of content colors in black and dark themes ([#2195](https://github.com/mondaycom/vibe/issues/2195)) ([bba292c](https://github.com/mondaycom/vibe/commit/bba292c6351856d0eea4f9e99a9baf0fe6cc79b2))\n\n\n\n\n\n## [0.7.1](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.7.0...monday-ui-style@0.7.1) (2024-06-25)\n\n**Note:** Version bump only for package monday-ui-style\n\n\n\n\n\n# [0.7.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.6.1...monday-ui-style@0.7.0) (2024-06-09)\n\n\n### Features\n\n* **icons:** Add Heart icon ([#2166](https://github.com/mondaycom/vibe/issues/2166)) ([896871b](https://github.com/mondaycom/vibe/commit/896871b9ab4c0f1340987f3379a767652fb41420))\n\n\n\n\n\n## [0.6.1](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.6.0...monday-ui-style@0.6.1) (2024-05-07)\n\n**Note:** Version bump only for package monday-ui-style\n\n\n\n\n\n# [0.6.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.5.1...monday-ui-style@0.6.0) (2024-05-01)\n\n\n### Features\n\n* **colors-json:** add correct warning colors syntax ([#2095](https://github.com/mondaycom/vibe/issues/2095)) ([0e67814](https://github.com/mondaycom/vibe/commit/0e67814c9c5031d11ca1b1106e34563a6e7f9243))\n\n\n\n\n\n## [0.5.1](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.5.0...monday-ui-style@0.5.1) (2024-04-24)\n\n**Note:** Version bump only for package monday-ui-style\n\n\n\n\n\n# [0.5.0](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-style@0.4.2...monday-ui-style@0.5.0) (2024-04-18)\n\n\n### Features\n\n* **Text:** Add new 12px font size (Text3) ([#2072](https://github.com/mondaycom/monday-ui-react-core/issues/2072)) ([cd4af2f](https://github.com/mondaycom/monday-ui-react-core/commit/cd4af2fd3a3443197234a608e9b6460fce80b488))\n\n\n\n\n\n## [0.4.2](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-style@0.4.1...monday-ui-style@0.4.2) (2024-04-15)\n\n**Note:** Version bump only for package monday-ui-style\n\n\n\n\n\n## [0.4.1](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-style@0.4.0...monday-ui-style@0.4.1) (2024-04-10)\n\n**Note:** Version bump only for package monday-ui-style\n\n\n\n\n\n# [0.4.0](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-style@0.3.0...monday-ui-style@0.4.0) (2024-04-03)\n\n\n### Features\n\n* **colors:** change colors ([#2042](https://github.com/mondaycom/monday-ui-react-core/issues/2042)) ([5f510c1](https://github.com/mondaycom/monday-ui-react-core/commit/5f510c19155ec7f4575b2bfaa03162a0a5d509a5))\n\n\n\n\n\n# [0.3.0](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-style@0.2.1...monday-ui-style@0.3.0) (2024-03-13)\n\n\n### Features\n\n* Align vibe's colors to new a11y based colors ([#2009](https://github.com/mondaycom/monday-ui-react-core/issues/2009)) ([6c6e156](https://github.com/mondaycom/monday-ui-react-core/commit/6c6e156b875d06a17ba4697c92cfcdf7dba4d020))\n\n\n\n\n\n## [0.2.1](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-style@0.2.0...monday-ui-style@0.2.1) (2024-03-12)\n\n**Note:** Version bump only for package monday-ui-style\n\n\n\n\n\n# [0.2.0](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-style@0.1.215...monday-ui-style@0.2.0) (2024-02-28)\n\n\n### Features\n\n* **colors:** add --primary-highlighted-color token ([#1986](https://github.com/mondaycom/monday-ui-react-core/issues/1986)) ([1207a4a](https://github.com/mondaycom/monday-ui-react-core/commit/1207a4a7bac5d00b90dcd0792396e0c82df7131c))\n* **colors:** change primary-background-hover-color for all themes ([#1980](https://github.com/mondaycom/monday-ui-react-core/issues/1980)) ([2b9cbda](https://github.com/mondaycom/monday-ui-react-core/commit/2b9cbdad1e70b1542450d8c61a08228b7cb63550))\n\n\n\n\n\n## [0.1.215](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-style@0.1.214...monday-ui-style@0.1.215) (2024-02-14)\n\n\n### Bug Fixes\n\n* fix build in release ([#1965](https://github.com/mondaycom/monday-ui-react-core/issues/1965)) ([8177d9a](https://github.com/mondaycom/monday-ui-react-core/commit/8177d9a799c4fb469316f4cdeefc15250eea4c61))\n\n\n\n\n\n## [0.1.214](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-style@0.1.213...monday-ui-style@0.1.214) (2024-02-14)\n\n\n### Bug Fixes\n\n* release ([#1963](https://github.com/mondaycom/monday-ui-react-core/issues/1963)) ([1817e5a](https://github.com/mondaycom/monday-ui-react-core/commit/1817e5a663f00b000e547f2f5d5aabbb5c25cd15))\n\n\n\n\n\n## 0.1.213 (2024-02-14)\n\n\n### Bug Fixes\n\n* docs ([#1960](https://github.com/mondaycom/monday-ui-react-core/issues/1960)) ([ed0d787](https://github.com/mondaycom/monday-ui-react-core/commit/ed0d7872462e83b72557c8dbc8ff0c48b3d23752))\n\n\n\n\n\n## 0.1.212 (2024-02-14)\n\n**Note:** Version bump only for package monday-ui-style\n\n\n\n\n\n## 0.1.211 (2024-02-13)\n\n**Note:** Version bump only for package monday-ui-style\n\n\n\n\n\n\n0.1.209 / 2024-01-21\n====================\n  * feat(Icons): add Translation icon ([#268](https://github.com/mondaycom/monday-ui-style/issues/268))\n\n0.1.208 / 2024-01-11\n====================\n  * feat(colors): add ui-background-color token ([#267](https://github.com/mondaycom/monday-ui-style/issues/267))\n    * feat(colors): add ui-background-color token\n    * docs: change token description\n    * docs: change token description\n\n0.1.207 / 2023-12-26\n====================\n  * Prettify everything ([#265](https://github.com/mondaycom/monday-ui-style/issues/265))\n\n0.1.206 / 2023-12-14\n====================\n  * fix(icons): change feedback svg ([#264](https://github.com/mondaycom/monday-ui-style/issues/264))\n\n0.1.205 / 2023-12-11\n====================\n  * fix(icons): replace DoubleCheck icon ([#263](https://github.com/mondaycom/monday-ui-style/issues/263))\n\n0.1.204 / 2023-11-28\n====================\n  * Remove deprecated text-color-fixed-light and text-color-fixed-dark ([#260](https://github.com/mondaycom/monday-ui-style/issues/260))\n\n0.1.203 / 2023-11-23\n====================\n  * Add fixed-light-color and fixed-dark-color tokens ([#259](https://github.com/mondaycom/monday-ui-style/issues/259))\n\n0.1.202 / 2023-10-26\n====================\n  * feat(mixins): export mixins ([#256](https://github.com/mondaycom/monday-ui-style/issues/256))\n    * feat(mixins): export mixins\n    * refactor: remove redundant mixins\n    * docs: restructure mixins list in README\n\n0.1.201 / 2023-10-19\n====================\n  * Update postcss, postcss-scss, postcss-value-parser, styleint due to dependabot recommendations ([#254](https://github.com/mondaycom/monday-ui-style/issues/254))\n\n0.1.200 / 2023-10-19\n====================\n  * docs: add theme-switcher ([#253](https://github.com/mondaycom/monday-ui-style/issues/253))\n    * docs: add theme-switcher\n    * Remove TODO\n\n0.1.199 / 2023-10-18\n====================\n  * chore: update storybook packages ([#252](https://github.com/mondaycom/monday-ui-style/issues/252))\n    * Fix preview file TS issue\n    * Upgrade storybook packages to ^7.5.0\n\n0.1.198 / 2023-10-17\n====================\n  * infra: use nvmrc file in test.yml ([#251](https://github.com/mondaycom/monday-ui-style/issues/251))\n    * infra: use nvmrc file in test.yml\n    * Upgrade version of actions/setup-node@3\n\n0.1.197 / 2023-10-17\n====================\n  * infra: add build test in test.yml ([#250](https://github.com/mondaycom/monday-ui-style/issues/250))\n\n0.1.196 / 2023-10-03\n====================\n  * feat(Icons): add warning icon ([#248](https://github.com/mondaycom/monday-ui-style/issues/248))\n\n0.1.195 / 2023-10-02\n====================\n  * Replace Rubik with Noto Sans Hebrew ([#247](https://github.com/mondaycom/monday-ui-style/issues/247))\n    * Replace Rubik with Noto Sans Hebrew\n    * preview-head.html - replace Rubik with Noto Sans Hebrew\n\n0.1.194 / 2023-09-13\n====================\n  * Remove duplications from colors.json ([#246](https://github.com/mondaycom/monday-ui-style/issues/246))\n\n0.1.193 / 2023-09-10\n====================\n  * build(validate-icons-colors): fix script to catch multiple fill/stroke usages ([#245](https://github.com/mondaycom/monday-ui-style/issues/245))\n\n0.1.192 / 2023-09-07\n====================\n  * Publish storybook workflow ([#244](https://github.com/mondaycom/monday-ui-style/issues/244))\n\n0.1.191 / 2023-09-07\n====================\n  * Replace text-color-on-positive, text-color-on-negative, text-color-on-warning with text-color-fixed-light, text-color-fixed-dark ([#242](https://github.com/mondaycom/monday-ui-style/issues/242))\n\n0.1.190 / 2023-09-07\n====================\n  * fix(Erase): replace hard coded color ([#243](https://github.com/mondaycom/monday-ui-style/issues/243))\n\n0.1.189 / 2023-09-06\n====================\n  * fix(Lines): replace hard coded color ([#241](https://github.com/mondaycom/monday-ui-style/issues/241))\n\n0.1.188 / 2023-08-31\n====================\n  * feat: add sort ascending and sort descending icons ([#240](https://github.com/mondaycom/monday-ui-style/issues/240))\n\n0.1.187 / 2023-08-31\n====================\n  * icon: Add tags for Versioning ([#239](https://github.com/mondaycom/monday-ui-style/issues/239))\n\n0.1.186 / 2023-08-31\n====================\n  * feat: replace sort icon ([#238](https://github.com/mondaycom/monday-ui-style/issues/238))\n\n0.1.185 / 2023-08-31\n====================\n  * Storybook content - Welcome, Changelog, Colors, Spacing ([#228](https://github.com/mondaycom/monday-ui-style/issues/228))\n    * Storybook content - Welcome, Changelog, Colors, Spacing\n    * Remove spacing, border-radius, box-shadows variables from the global-css-settings.scss\n    * Prettier refactor\n    * Remove mixins.scss, states.scss\n    * Remove unused variable from content-spacing.scss\n    * Remove content-spacing.scss\n    * Remove @title-appereance mixin\n    * Remove commented contributor.scss definitions\n    * TODO added\n    * TODO added\n    * Remove inner storybook styles, change spacing tokens to reference sb tokens\n    * Replace tokens used for documentation with sb tokens\n    * Install prerelease vibe-storybook-components version\n    * Remove TODO\n    * Remove unrelevant tsconfig.json\n    * Update vibe-storybook-components version\n    * Move import index.scss to colors.stories.mdx\n    * Fix package.json merge conflicts\n    * Change --icon-color token to --sb-icon-color\n    * Update vibe-storybook-components version (^0.2.1)\n    * Convert welcome files to use modular styles\n    * Fix intro text appereance\n    * Move color utils to colors.stories folder\n\n0.1.184 / 2023-08-28\n====================\n  * Notes and readme about mixins and functions ([#237](https://github.com/mondaycom/monday-ui-style/issues/237))\n    * notes and readme\n    * Update README.md\n    * Update scripts/copy-public-folder.sh\n    * Update scripts/copy-public-folder.sh\n\n0.1.183 / 2023-08-27\n====================\n  * test: validate-icons-colors script  ([#236](https://github.com/mondaycom/monday-ui-style/issues/236))\n    * test on lint: validate-icons-colors script\n    * Run stylelint on test workflow\n    * Remove console.logs from metadata-util.js\n    * Run validate-icons-colors on validate-icons\n    * Remove fill=white in rect inside clipPath\n\n0.1.182 / 2023-08-27\n====================\n  * Add text-color-on-positive, text-color-on-negative, text-color-on-warning tokens ([#235](https://github.com/mondaycom/monday-ui-style/issues/235))\n\n0.1.181 / 2023-08-16\n====================\n  * icons: Add tags to Open icon ([#232](https://github.com/mondaycom/monday-ui-style/issues/232))\n\n0.1.180 / 2023-08-16\n====================\n  * Move required dev dependencies to dependencies ([#231](https://github.com/mondaycom/monday-ui-style/issues/231))\n\n0.1.179 / 2023-08-09\n====================\n  * Storybook infra ([#223](https://github.com/mondaycom/monday-ui-style/issues/223))\n    * Init storybook\n    * Storybook Vibe infra\n    * Install vibe-storybook-components\n    * Refactor\n    * TODO added\n    * Copy Colors page\n    * Add theming\n    * RelatedComponents infrastructure\n    * Rename storybook classes\n    * Change local port of storybook\n    * Rename classnames\n    * Git ignore storybook-static\n    * Fix stories files location\n    * Remove up-next links\n    * Fix foundation-background.png and component-background.png\n    * Refactor\n    * vibe-storybook-components prerelease version\n    * update vibe-storybook-components version\n    * Changelog added\n    * Chromatic dependencies\n    * Chromatic workflow\n    * Upgrade storybook packages\n    * accessibility.stories.mdx\n    * Remove TODO\n    * Welcome page story\n    * Update vibe-storybook-components version\n    * Convert colors to stories format\n    * Refactor\n    * Refactor colors-vars-map.ts - remove unrelevant\n    * Move postcss to devDependencies\n    * Fix todo\n    * Delete storybook-content related files\n    * Delete font-awesome\n    * Remove google analytics\n    * Cleanup already loaded font from preview-head.html\n    * Remove not used preconnect fonts.gstatic.com\n    * Remove resize of left panel - doesn't work\n\n0.1.178 / 2023-08-06\n====================\n  * fix letter spacing ([#227](https://github.com/mondaycom/monday-ui-style/issues/227))\n\n0.1.177 / 2023-07-26\n====================\n  * Breaking changes for heading and text ([#219](https://github.com/mondaycom/monday-ui-style/issues/219))\n    * change naming\n    * breaking changes in new typography: tokens for texts, mixins for heading and texts\n    * breaking changes in new typography: tokens for texts, mixins for heading and texts\n    * fix tests\n\n0.1.176 / 2023-07-26\n====================\n  * Fix changelog - only last 50 versions ([#225](https://github.com/mondaycom/monday-ui-style/issues/225))\n\n0.1.175 / 2023-07-26\n====================\n  * Add changelog ([#224](https://github.com/mondaycom/monday-ui-style/issues/224))\n    * Script to generate changelog\n    * Initial CHANGELOG.md\n    * npm-publish.yml: update changelog\n\n0.1.174 / 2023-07-19\n====================\n  * Support mixin with default margin ([#221](https://github.com/mondaycom/monday-ui-style/issues/221))\n\n0.1.173 / 2023-07-18\n====================\n  * icon: fix Country icon - not filled ([#220](https://github.com/mondaycom/monday-ui-style/issues/220))\n\n0.1.172 / 2023-07-12\n====================\n  * revert switcher ([#218](https://github.com/mondaycom/monday-ui-style/issues/218))\n\n0.1.171 / 2023-07-12\n====================\n  * Create mixins for typography ([#217](https://github.com/mondaycom/monday-ui-style/issues/217))\n    * add support in export mixins in monday ui styles\n    * Update src/internal-mixins/_utilities.scss\n    * fix mixins\n    * change mixins script\n    * change mixins script name\n\n0.1.170 / 2023-07-12\n====================\n  * Origin/sergeyro/feature/change green colors ([#210](https://github.com/mondaycom/monday-ui-style/issues/210))\n    * Change color-basic_green\n    * Change color-forest_green\n\n0.1.169 / 2023-07-09\n====================\n  * Prerelease flow: fix test workflow name ([#216](https://github.com/mondaycom/monday-ui-style/issues/216))\n    * Prerelease flow: fix test workflow name\n    * Prerelease - reduce interval and timeout\n\n0.1.168 / 2023-07-09\n====================\n  * Prerelease process: .nvmrc file added, prerelease without git tag ([#215](https://github.com/mondaycom/monday-ui-style/issues/215))\n    * .nvmrc file added, prerelease without git tag\n    * Remove node version from npm-publish.yml\n\n0.1.167 / 2023-07-09\n====================\n  * Prerelease workflow ([#214](https://github.com/mondaycom/monday-ui-style/issues/214))\n\n0.1.166 / 2023-07-03\n====================\n  * Add Work icon tags ([#211](https://github.com/mondaycom/monday-ui-style/issues/211))\n"
  },
  {
    "path": "packages/style/LICENSE",
    "content": "MIT License\n\nCopyright (c) 2020 monday.com LTD\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "packages/style/README.md",
    "content": "# monday.com UI styles\n\n> Vibe Design System's styling foundations: Theme definition, colors, shadows, dimensions, etc.\n\n## Installation\n\n```bash\nnpm install @vibe/style\n# or\nyarn add @vibe/style\n```\n\n## Usage\n\n**Styles**: Import the css file in order to have the css variables exposed on the root level\n\n```scss\n@import \"~@vibe/style/dist/index.min.css\";\n```\n\nor if you want to import it in your JS files\n\n```javascript\nimport \"@vibe/style/dist/index.min.css\";\n```\n\n**Mixins and functions**: We export multiple SCSS mixins and function helpers that can be used in your application if you use SASS. All helpers can be imported as demonstrated below.\n\n```scss\n@import \"~@vibe/style/dist/mixins\";\n@import \"~@vibe/style/dist/functions\";\n```\n\n## Stylelint rules\n\nIt is recommended to extend our [Stylelint](https://stylelint.io/) config in order to ensure proper usage of this library.  \nTo use the supplied config, add `@vibe/style/stylelint-config` as a [Stylelint config extension](https://stylelint.io/user-guide/configure/#extends):\n\n```js\n// Your .stylelintrc\n{\n  ...\n  \"extends\": \"@vibe/style/stylelint-config\",\n  ...\n}\n```\n\n## Functions\n\nThe following SCSS functions are exported:\n\n- `camelize`: camelcase string\n- `capitalize`: capitalize string\n- `contain`: returns whether `$value` is contained in `$list` as a Boolean\n- `map-collect`: merges maps from different scopes into one\n- `extract-rgb`: returns a comma separated list of rgb values from a color\n\n## Mixins\n\nThe following SCSS mixins are exported:\n\n- Common:\n  - `hidden-element`\n  - `grid-auto-fit($grid-gap, $grid-column-gap, $grid-row-gap. $grid-cell-min-width, $grid-cell-array-calc, $important)`\n  - `scroller($width, $height, $color)`\n- States:\n  - `disabled`\n  - `reset-button`\n  - `focus-style($focus-radius)`\n- Typography:\n  - `vibe-text($type, $weight)`\n  - `vibe-heading($type, $weight)`\n  - `line-clamp($lines)`\n  - `ellipsis`\n"
  },
  {
    "path": "packages/style/package.json",
    "content": "{\n  \"name\": \"@vibe/style\",\n  \"version\": \"4.0.0\",\n  \"description\": \"Monday UI CSS Foundations\",\n  \"keywords\": [\n    \"CSS\",\n    \"THEMES\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/mondaycom/vibe.git\",\n    \"directory\": \"packages/style\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/mondaycom/vibe/issues\"\n  },\n  \"homepage\": \"https://github.com/mondaycom/vibe#readme\",\n  \"author\": \"monday.com\",\n  \"license\": \"MIT\",\n  \"main\": \"dist/index.css\",\n  \"files\": [\n    \"src/\",\n    \"dist/\",\n    \"stylelint-config/\"\n  ],\n  \"scripts\": {\n    \"test\": \"yarn build && yarn test:without-build\",\n    \"test:without-build\": \"jest\",\n    \"compile-styles\": \"sass --style=expanded ./src/index.scss dist/index.css\",\n    \"copy-files\": \"cp -r src/functions/ dist/functions/ && cp -r src/mixins/ dist/mixins/ && cp -r src/files/ dist/\",\n    \"css-minify\": \"cleancss --level 1 --format breaksWith=lf --output dist/index.min.css dist/index.css\",\n    \"generate-colors\": \"ts-node scripts/generate-colors.ts\",\n    \"build\": \"yarn compile-styles && yarn css-minify && yarn generate-colors && yarn copy-files\",\n    \"stylelint\": \"stylelint \\\"**/*.scss\\\"\",\n    \"stylelint:fix\": \"stylelint \\\"**/*.scss\\\" --fix\",\n    \"fix-lint\": \"prettier --write \\\"{,!(node_modules)/**/}*.{js,jsx,ts,tsx,scss}\\\"\"\n  },\n  \"dependencies\": {\n    \"postcss\": \"8.4.31\",\n    \"postcss-scss\": \"^4.0.9\",\n    \"postcss-value-parser\": \"4.2.0\",\n    \"stylelint\": \"^14.16.1\"\n  },\n  \"devDependencies\": {\n    \"@babel/preset-env\": \"^7.22.9\",\n    \"@babel/preset-typescript\": \"^7.22.5\",\n    \"@types/jest\": \"^27.4.1\",\n    \"clean-css-cli\": \"^4.3.0\",\n    \"execa\": \"^5.1.1\",\n    \"jest\": \"^27.5.1\",\n    \"postcss-custom-properties\": \"^14.0.6\",\n    \"prettier\": \"^2.0.5\",\n    \"sass\": \"^1.70.0\",\n    \"stylelint-config-recommended-scss\": \"^6.0.0\",\n    \"ts-node\": \"^10.9.2\",\n    \"typescript-plugin-css-modules\": \"^5.0.1\"\n  },\n  \"peerDependencies\": {\n    \"stylelint\": \"^14.1.0\"\n  }\n}\n"
  },
  {
    "path": "packages/style/plopfile.js",
    "content": "const Icon = require(\"./plop/icon\");\n\nmodule.exports = plop => {\n  Icon(plop);\n};\n"
  },
  {
    "path": "packages/style/scripts/generate-colors.ts",
    "content": "#!/usr/bin/env node\n\nimport * as fs from \"fs\";\nimport * as path from \"path\";\nimport postcss from \"postcss\";\n// @ts-ignore: Missing type declarations\nimport postcssCustomProperties from \"postcss-custom-properties\";\n\nconst CSS_FILE = path.join(__dirname, \"../dist/index.css\");\nconst OUTPUT_FILE = path.join(__dirname, \"../src/files/tokens.json\");\n\ninterface ThemeColors {\n  [key: string]: string;\n}\n\ninterface Themes {\n  [themeName: string]: ThemeColors;\n}\n\nconst THEME_PATTERNS = {\n  \"light-app-theme\": [\":root\", \".light-app-theme\", \".default-app-theme\"],\n  \"dark-app-theme\": [\".dark-app-theme\"],\n  \"black-app-theme\": [\".black-app-theme\"],\n  \"hacker_theme-app-theme\": [\".hacker_theme-app-theme\"]\n};\n\nasync function generateColors(): Promise<void> {\n  const css = fs.readFileSync(CSS_FILE, \"utf8\");\n\n  const themes: Themes = {};\n\n  for (const [themeName, patterns] of Object.entries(THEME_PATTERNS)) {\n    const themeColors = await resolveThemeColors(css, patterns);\n    if (Object.keys(themeColors).length > 0) {\n      themes[themeName] = themeColors;\n    }\n  }\n\n  for (const [themeName, colors] of Object.entries(themes)) {\n    const resolvedColors: ThemeColors = {};\n\n    for (const [key, value] of Object.entries(colors)) {\n      // Only include values that don't contain var() references\n      if (!value.includes(\"var(\")) {\n        resolvedColors[key] = value;\n      }\n    }\n\n    themes[themeName] = resolvedColors;\n  }\n\n  fs.writeFileSync(OUTPUT_FILE, JSON.stringify(themes, null, 2));\n\n  Object.entries(themes).forEach(([theme, colors]) => {\n    console.log(`✓ ${theme}: ${Object.keys(colors).length} colors`);\n  });\n  console.log(`✓ Generated ${OUTPUT_FILE} - all values are final hex/rgb/rgba`);\n}\n\nasync function resolveThemeColors(css: string, themePatterns: string[]): Promise<ThemeColors> {\n  const themeFlattened = flattenThemeToRoot(css, themePatterns);\n\n  const resolved = await postcss([\n    postcssCustomProperties({\n      preserve: false\n    })\n  ]).process(themeFlattened, { from: undefined });\n\n  // Extract resolved color values\n  const colors: ThemeColors = {};\n  const ast = postcss.parse(resolved.css);\n\n  ast.walkDecls(decl => {\n    if (isColorProperty(decl.prop)) {\n      const key = decl.prop.replace(\"--\", \"\");\n      colors[key] = decl.value;\n    }\n  });\n\n  return colors;\n}\n\nfunction flattenThemeToRoot(css: string, themePatterns: string[]): string {\n  const ast = postcss.parse(css);\n  const themeVariables: string[] = [];\n  const allVariables: string[] = [];\n\n  ast.walkRules(rule => {\n    const isThemeRule = themePatterns.some(pattern => rule.selector.includes(pattern));\n\n    rule.walkDecls(decl => {\n      if (isColorProperty(decl.prop)) {\n        const variableDecl = `${decl.prop}: ${decl.value};`;\n\n        if (isThemeRule) {\n          themeVariables.push(variableDecl);\n        } else {\n          allVariables.push(variableDecl);\n        }\n      }\n    });\n  });\n\n  const flattenedVariables = [...allVariables, ...themeVariables];\n  return `:root {\\n  ${flattenedVariables.join(\"\\n  \")}\\n}`;\n}\n\nfunction isColorProperty(prop: string): boolean {\n  return prop.startsWith(\"--\") && prop.includes(\"color\");\n}\n\nif (require.main === module) {\n  generateColors().catch(console.error);\n}\n\nexport { generateColors };\n"
  },
  {
    "path": "packages/style/src/border-radius.scss",
    "content": ":root {\n  --border-radius-small: 4px;\n  --border-radius-medium: 8px;\n  --border-radius-big: 16px;\n}\n"
  },
  {
    "path": "packages/style/src/borders.scss",
    "content": ":root {\n  --border-width: 1px;\n  --border-style: solid;\n}\n"
  },
  {
    "path": "packages/style/src/common.scss",
    "content": ":root {\n  --disabled-component-opacity: 0.38;\n}\n"
  },
  {
    "path": "packages/style/src/files/colors.json",
    "content": "{\n  \"light-app-theme\": {\n    \"color-highlight_blue\": \"#cce5ff\",\n    \"color-basic_blue\": \"#0073ea\",\n    \"color-dark_blue\": \"#0060b9\",\n    \"color-sky_blue\": \"#aed4fc\",\n    \"color-bazooka\": \"#f65f7c\",\n    \"color-snow_white\": \"#ffffff\",\n    \"color-riverstone_gray\": \"#f6f7fb\",\n    \"color-ui_grey\": \"#dcdfec\",\n    \"color-wolf_gray\": \"#c3c6d4\",\n    \"color-asphalt\": \"#676879\",\n    \"color-mud_black\": \"#323338\",\n    \"color-success\": \"#00854d\",\n    \"color-success-hover\": \"#007038\",\n    \"color-success-highlight\": \"#bbdbc9\",\n    \"color-olive_green\": \"#b5cec0\",\n    \"color-error\": \"#d83a52\",\n    \"color-error-hover\": \"#b63546\",\n    \"color-error-highlight\": \"#f4c3cb\",\n    \"color-pinky_red\": \"#ecb7bf\",\n    \"color-link_color\": \"#1f76c2\",\n    \"color-surface\": \"#292f4c\",\n    \"primary-color\": \"#0073ea\",\n    \"primary-hover-color\": \"#0060b9\",\n    \"primary-selected-color\": \"#cce5ff\",\n    \"primary-selected-hover-color\": \"#aed4fc\",\n    \"primary-highlighted-color\": \"#f0f7ff\",\n    \"primary-surface-color\": \"#eceff8\",\n    \"primary-text-color\": \"#323338\",\n    \"secondary-text-color\": \"#676879\",\n    \"text-color-on-primary\": \"#ffffff\",\n    \"text-color-on-inverted\": \"#ffffff\",\n    \"placeholder-color\": \"#676879\",\n    \"icon-color\": \"#676879\",\n    \"link-color\": \"#1f76c2\",\n    \"fixed-light-color\": \"#ffffff\",\n    \"fixed-dark-color\": \"#111111\",\n    \"primary-background-color\": \"#ffffff\",\n    \"primary-background-hover-color\": \"#dcdfec\",\n    \"secondary-background-color\": \"#ffffff\",\n    \"grey-background-color\": \"#f6f7fb\",\n    \"allgrey-background-color\": \"#f6f7fb\",\n    \"inverted-color-background\": \"#323338\",\n    \"disabled-background-color\": \"#ecedf5\",\n    \"positive-color\": \"#00854d\",\n    \"positive-color-hover\": \"#007038\",\n    \"positive-color-selected\": \"#bbdbc9\",\n    \"positive-color-selected-hover\": \"#b5cec0\",\n    \"negative-color\": \"#d83a52\",\n    \"negative-color-hover\": \"#b63546\",\n    \"negative-color-selected\": \"#f4c3cb\",\n    \"negative-color-selected-hover\": \"#ecb7bf\",\n    \"ui-border-color\": \"#c3c6d4\",\n    \"ui-background-color\": \"#e7e9ef\",\n    \"layout-border-color\": \"#d0d4e4\",\n    \"color-grass_green\": \"#037f4c\",\n    \"color-grass_green-hover\": \"#116846\",\n    \"color-grass_green-selected\": \"#81bfa5\",\n    \"color-done-green\": \"#00c875\",\n    \"color-done-green-hover\": \"#0f9b63\",\n    \"color-done-green-selected\": \"#80e3ba\",\n    \"color-bright-green\": \"#9cd326\",\n    \"color-bright-green-hover\": \"#7ca32b\",\n    \"color-bright-green-selected\": \"#cde992\",\n    \"color-saladish\": \"#cab641\",\n    \"color-saladish-hover\": \"#9d8f3e\",\n    \"color-saladish-selected\": \"#e4daa0\",\n    \"color-egg_yolk\": \"#ffcb00\",\n    \"color-egg_yolk-hover\": \"#eaaa15\",\n    \"color-egg_yolk-selected\": \"#ffe580\",\n    \"color-working_orange\": \"#fdab3d\",\n    \"color-working_orange-hover\": \"#c0873c\",\n    \"color-working_orange-selected\": \"#fed59e\",\n    \"color-dark-orange\": \"#ff6d3b\",\n    \"color-dark-orange-hover\": \"#c25531\",\n    \"color-dark-orange-selected\": \"#ffb196\",\n    \"color-peach\": \"#ffadad\",\n    \"color-peach-hover\": \"#c2888a\",\n    \"color-peach-selected\": \"#ffd6d6\",\n    \"color-sunset\": \"#ff7575\",\n    \"color-sunset-hover\": \"#c26163\",\n    \"color-sunset-selected\": \"#ffbaba\",\n    \"color-stuck-red\": \"#df2f4a\",\n    \"color-stuck-red-hover\": \"#ad3f51\",\n    \"color-stuck-red-selected\": \"#f0a1ad\",\n    \"color-dark-red\": \"#bb3354\",\n    \"color-dark-red-hover\": \"#92334c\",\n    \"color-dark-red-selected\": \"#dd99a9\",\n    \"color-sofia_pink\": \"#e50073\",\n    \"color-sofia_pink-hover\": \"#c20062\",\n    \"color-sofia_pink-selected\": \"#ff8ac4\",\n    \"color-lipstick\": \"#ff5ac4\",\n    \"color-lipstick-hover\": \"#c24e9a\",\n    \"color-lipstick-selected\": \"#fface1\",\n    \"color-bubble\": \"#faa1f1\",\n    \"color-bubble-hover\": \"#be80ba\",\n    \"color-bubble-selected\": \"#fcd0f8\",\n    \"color-purple\": \"#9d50dd\",\n    \"color-purple-hover\": \"#7d45b0\",\n    \"color-purple-selected\": \"#d0aeed\",\n    \"color-dark_purple\": \"#784bd1\",\n    \"color-dark_purple-hover\": \"#6344a3\",\n    \"color-dark_purple-selected\": \"#bba5e8\",\n    \"color-berry\": \"#7e3b8a\",\n    \"color-berry-hover\": \"#673971\",\n    \"color-berry-selected\": \"#be9dc4\",\n    \"color-dark_indigo\": \"#401694\",\n    \"color-dark_indigo-hover\": \"#3c1f78\",\n    \"color-dark_indigo-selected\": \"#a08bc9\",\n    \"color-indigo\": \"#5559df\",\n    \"color-indigo-hover\": \"#4b4ead\",\n    \"color-indigo-selected\": \"#aaacef\",\n    \"color-navy\": \"#225091\",\n    \"color-navy-hover\": \"#274776\",\n    \"color-navy-selected\": \"#90a7c8\",\n    \"color-bright-blue\": \"#579bfc\",\n    \"color-bright-blue-hover\": \"#4c7cc1\",\n    \"color-bright-blue-selected\": \"#abcdfd\",\n    \"color-dark-blue\": \"#007eb5\",\n    \"color-dark-blue-hover\": \"#0f6d97\",\n    \"color-dark-blue-selected\": \"#80c2df\",\n    \"color-aquamarine\": \"#4eccc6\",\n    \"color-aquamarine-hover\": \"#469e9b\",\n    \"color-aquamarine-selected\": \"#a6e5e2\",\n    \"color-chili-blue\": \"#66ccff\",\n    \"color-chili-blue-hover\": \"#569ec3\",\n    \"color-chili-blue-selected\": \"#b2e5ff\",\n    \"color-river\": \"#74afcc\",\n    \"color-river-hover\": \"#588095\",\n    \"color-river-selected\": \"#b3d0de\",\n    \"color-winter\": \"#9aadbd\",\n    \"color-winter-hover\": \"#7b8895\",\n    \"color-winter-selected\": \"#ccd6de\",\n    \"color-explosive\": \"#c4c4c4\",\n    \"color-explosive-hover\": \"#98999a\",\n    \"color-explosive-selected\": \"#e1e1e1\",\n    \"color-american_gray\": \"#757575\",\n    \"color-american_gray-hover\": \"#69696a\",\n    \"color-american_gray-selected\": \"#bfbfbf\",\n    \"color-blackish\": \"#333333\",\n    \"color-brown\": \"#7f5347\",\n    \"color-brown-hover\": \"#684943\",\n    \"color-brown-selected\": \"#bfa9a3\",\n    \"color-orchid\": \"#e484bd\",\n    \"color-orchid-hover\": \"#ae5d8d\",\n    \"color-orchid-selected\": \"#ecbad7\",\n    \"color-tan\": \"#bca58a\",\n    \"color-tan-hover\": \"#8a7862\",\n    \"color-tan-selected\": \"#d6cabc\",\n    \"color-sky\": \"#a1e3f6\",\n    \"color-sky-hover\": \"#81b6c5\",\n    \"color-sky-selected\": \"#d0f1fa\",\n    \"color-coffee\": \"#cd9282\",\n    \"color-coffee-hover\": \"#976758\",\n    \"color-coffee-selected\": \"#dec0b7\",\n    \"color-royal\": \"#216edf\",\n    \"color-royal-hover\": \"#225eb7\",\n    \"color-royal-selected\": \"#95bbf2\",\n    \"color-teal\": \"#175a63\",\n    \"color-teal-hover\": \"#12484f\",\n    \"color-teal-selected\": \"#8bacb1\",\n    \"color-lavender\": \"#bda8f9\",\n    \"color-lavender-hover\": \"#9786c7\",\n    \"color-lavender-selected\": \"#ded4fc\",\n    \"color-steel\": \"#a9bee8\",\n    \"color-steel-hover\": \"#8798ba\",\n    \"color-steel-selected\": \"#d4dff4\",\n    \"color-lilac\": \"#9d99b9\",\n    \"color-lilac-hover\": \"#7e7a94\",\n    \"color-lilac-selected\": \"#ceccdc\",\n    \"color-pecan\": \"#563e3e\",\n    \"color-pecan-hover\": \"#453232\",\n    \"color-pecan-selected\": \"#ab9f9f\",\n    \"warning-color\": \"#ffcb00\",\n    \"warning-color-hover\": \"#eaaa15\",\n    \"warning-color-selected\": \"#fceba1\",\n    \"warning-color-selected-hover\": \"#f2d973\"\n  },\n  \"dark-app-theme\": {\n    \"primary-color\": \"#0073ea\",\n    \"primary-on-secondary-color\": \"#0073ea\",\n    \"primary-hover-color\": \"#0060b9\",\n    \"primary-selected-color\": \"#133774\",\n    \"primary-selected-hover-color\": \"#0d2e65\",\n    \"primary-highlighted-color\": \"#0d2753\",\n    \"primary-surface-color\": \"#181b34\",\n    \"primary-text-color\": \"#d5d8df\",\n    \"text-color-on-primary\": \"#ffffff\",\n    \"text-color-on-inverted\": \"#323338\",\n    \"secondary-text-color\": \"#9699a6\",\n    \"placeholder-color\": \"#c3c6d4\",\n    \"icon-color\": \"#c3c6d4\",\n    \"link-color\": \"#69a7ef\",\n    \"fixed-light-color\": \"#ffffff\",\n    \"fixed-dark-color\": \"#111111\",\n    \"primary-background-color\": \"#181b34\",\n    \"primary-background-hover-color\": \"#4b4e69\",\n    \"secondary-background-color\": \"#30324e\",\n    \"grey-background-color\": \"#181b34\",\n    \"allgrey-background-color\": \"#30324e\",\n    \"inverted-color-background\": \"#ffffff\",\n    \"disabled-background-color\": \"#3c3f59\",\n    \"positive-color\": \"#00854d\",\n    \"positive-color-hover\": \"#007038\",\n    \"positive-color-selected\": \"#025231\",\n    \"positive-color-selected-hover\": \"#194733\",\n    \"negative-color\": \"#d83a52\",\n    \"negative-color-hover\": \"#b63546\",\n    \"negative-color-selected\": \"#642830\",\n    \"negative-color-selected-hover\": \"#5a2027\",\n    \"ui-border-color\": \"#797e93\",\n    \"ui-background-color\": \"#434660\",\n    \"layout-border-color\": \"#4b4e69\",\n    \"color-grass_green\": \"#359970\",\n    \"color-grass_green-hover\": \"#116846\",\n    \"color-grass_green-selected\": \"#0f4f43\",\n    \"color-done-green\": \"#33d391\",\n    \"color-done-green-hover\": \"#0f9b63\",\n    \"color-done-green-selected\": \"#0e7358\",\n    \"color-bright-green\": \"#b0dc51\",\n    \"color-bright-green-hover\": \"#7ca32b\",\n    \"color-bright-green-selected\": \"#5c7930\",\n    \"color-saladish\": \"#d5c567\",\n    \"color-saladish-hover\": \"#9d8f3e\",\n    \"color-saladish-selected\": \"#736a3e\",\n    \"color-egg_yolk\": \"#ffd533\",\n    \"color-egg_yolk-hover\": \"#c29e11\",\n    \"color-egg_yolk-selected\": \"#8d751e\",\n    \"color-working_orange\": \"#fdbc64\",\n    \"color-working_orange-hover\": \"#c0873c\",\n    \"color-working_orange-selected\": \"#8c653c\",\n    \"color-dark-orange\": \"#ff6d3b\",\n    \"color-dark-orange-hover\": \"#c25531\",\n    \"color-dark-orange-selected\": \"#8d4134\",\n    \"color-peach\": \"#ffbdbd\",\n    \"color-peach-hover\": \"#c2888a\",\n    \"color-peach-selected\": \"#8d6674\",\n    \"color-sunset\": \"#ff9191\",\n    \"color-sunset-hover\": \"#c26163\",\n    \"color-sunset-selected\": \"#8d4a58\",\n    \"color-stuck-red\": \"#e8697d\",\n    \"color-stuck-red-hover\": \"#ad3f51\",\n    \"color-stuck-red-selected\": \"#7f314b\",\n    \"color-dark-red\": \"#c95c76\",\n    \"color-dark-red-hover\": \"#92334c\",\n    \"color-dark-red-selected\": \"#6b2947\",\n    \"color-sofia_pink\": \"#ff44a1\",\n    \"color-sofia_pink-hover\": \"#c21e71\",\n    \"color-sofia_pink-selected\": \"#8d1a62\",\n    \"color-lipstick\": \"#ff7bd0\",\n    \"color-lipstick-hover\": \"#c24e9a\",\n    \"color-lipstick-selected\": \"#8d3c7f\",\n    \"color-bubble\": \"#fbb4f4\",\n    \"color-bubble-hover\": \"#be80ba\",\n    \"color-bubble-selected\": \"#8b6096\",\n    \"color-purple\": \"#b57de3\",\n    \"color-purple-hover\": \"#8050ab\",\n    \"color-purple-selected\": \"#5f3e8b\",\n    \"color-dark_purple\": \"#936fda\",\n    \"color-dark_purple-hover\": \"#6344a3\",\n    \"color-dark_purple-selected\": \"#4a3586\",\n    \"color-berry\": \"#9862a1\",\n    \"color-berry-hover\": \"#673971\",\n    \"color-berry-selected\": \"#4d2d62\",\n    \"color-dark_indigo\": \"#6645a9\",\n    \"color-dark_indigo-hover\": \"#3c1f78\",\n    \"color-dark_indigo-selected\": \"#2e1b67\",\n    \"color-indigo\": \"#777ae5\",\n    \"color-indigo-hover\": \"#4b4ead\",\n    \"color-indigo-selected\": \"#383c8d\",\n    \"color-navy\": \"#4e73a7\",\n    \"color-navy-hover\": \"#274776\",\n    \"color-navy-selected\": \"#1f3866\",\n    \"color-bright-blue\": \"#79affd\",\n    \"color-bright-blue-hover\": \"#4c7cc1\",\n    \"color-bright-blue-selected\": \"#395d9b\",\n    \"color-dark-blue\": \"#339ecd\",\n    \"color-dark-blue-hover\": \"#0f6d97\",\n    \"color-dark-blue-selected\": \"#0e527e\",\n    \"color-aquamarine\": \"#71d6d1\",\n    \"color-aquamarine-hover\": \"#469e9b\",\n    \"color-aquamarine-selected\": \"#357580\",\n    \"color-chili-blue\": \"#85d6ff\",\n    \"color-chili-blue-hover\": \"#569ec3\",\n    \"color-chili-blue-selected\": \"#41759d\",\n    \"color-river\": \"#86b4ca\",\n    \"color-river-hover\": \"#588095\",\n    \"color-river-selected\": \"#42607c\",\n    \"color-winter\": \"#aebdca\",\n    \"color-winter-hover\": \"#7b8895\",\n    \"color-winter-selected\": \"#5b667c\",\n    \"color-explosive\": \"#d0d0d0\",\n    \"color-explosive-hover\": \"#98999a\",\n    \"color-explosive-selected\": \"#70717f\",\n    \"color-american_gray\": \"#999999\",\n    \"color-american_gray-hover\": \"#69696a\",\n    \"color-american_gray-selected\": \"#4e505e\",\n    \"color-blackish\": \"#5c5c5c\",\n    \"color-brown\": \"#99756c\",\n    \"color-brown-hover\": \"#684943\",\n    \"color-brown-selected\": \"#4d3941\",\n    \"color-orchid\": \"#e190c0\",\n    \"color-orchid-hover\": \"#b4739a\",\n    \"color-orchid-selected\": \"#85597b\",\n    \"color-tan\": \"#bdab95\",\n    \"color-tan-hover\": \"#978977\",\n    \"color-tan-selected\": \"#716863\",\n    \"color-sky\": \"#b4e9f8\",\n    \"color-sky-hover\": \"#90bac6\",\n    \"color-sky-selected\": \"#6c8a9a\",\n    \"color-coffee\": \"#ca9a8b\",\n    \"color-coffee-hover\": \"#a27b6f\",\n    \"color-coffee-selected\": \"#795e5d\",\n    \"color-royal\": \"#5591ea\",\n    \"color-royal-hover\": \"#4474bb\",\n    \"color-royal-selected\": \"#375993\",\n    \"color-teal\": \"#457b82\",\n    \"color-teal-hover\": \"#376268\",\n    \"color-teal-selected\": \"#2e4d58\",\n    \"color-lavender\": \"#cab9fa\",\n    \"color-lavender-hover\": \"#a294c8\",\n    \"color-lavender-selected\": \"#79709c\",\n    \"color-steel\": \"#bacbed\",\n    \"color-steel-hover\": \"#95a2be\",\n    \"color-steel-selected\": \"#707a95\",\n    \"color-lilac\": \"#b1adc7\",\n    \"color-lilac-hover\": \"#8e8a9f\",\n    \"color-lilac-selected\": \"#6b697f\",\n    \"color-pecan\": \"#786565\",\n    \"color-pecan-hover\": \"#605151\",\n    \"color-pecan-selected\": \"#4a4148\",\n    \"warning-color\": \"#ffcb00\",\n    \"warning-color-hover\": \"#eaaa15\",\n    \"warning-color-selected\": \"#503e02\",\n    \"warning-color-selected-hover\": \"#402f00\"\n  },\n  \"black-app-theme\": {\n    \"primary-color\": \"#0073ea\",\n    \"primary-on-secondary-color\": \"#0073ea\",\n    \"primary-hover-color\": \"#0060b9\",\n    \"primary-selected-color\": \"#133774\",\n    \"primary-selected-hover-color\": \"#0d2e65\",\n    \"primary-highlighted-color\": \"#0b2858\",\n    \"primary-surface-color\": \"#111111\",\n    \"primary-text-color\": \"#eeeeee\",\n    \"text-color-on-primary\": \"#ffffff\",\n    \"text-color-on-inverted\": \"#111111\",\n    \"secondary-text-color\": \"#aaaaaa\",\n    \"placeholder-color\": \"#aaaaaa\",\n    \"icon-color\": \"#aaaaaa\",\n    \"link-color\": \"#69a7ef\",\n    \"fixed-light-color\": \"#ffffff\",\n    \"fixed-dark-color\": \"#111111\",\n    \"primary-background-color\": \"#111111\",\n    \"primary-background-hover-color\": \"#636363\",\n    \"secondary-background-color\": \"#2c2c2c\",\n    \"grey-background-color\": \"#111111\",\n    \"allgrey-background-color\": \"#2c2c2c\",\n    \"inverted-color-background\": \"#eeeeee\",\n    \"disabled-background-color\": \"#3a3a3a\",\n    \"positive-color\": \"#00854d\",\n    \"positive-color-hover\": \"#007038\",\n    \"positive-color-selected\": \"#025231\",\n    \"positive-color-selected-hover\": \"#194733\",\n    \"negative-color\": \"#d83a52\",\n    \"negative-color-hover\": \"#b63546\",\n    \"negative-color-selected\": \"#642830\",\n    \"negative-color-selected-hover\": \"#5a2027\",\n    \"ui-border-color\": \"#8d8d8d\",\n    \"ui-background-color\": \"#4d4d4d\",\n    \"layout-border-color\": \"#636363\",\n    \"color-grass_green\": \"#359970\",\n    \"color-grass_green-hover\": \"#116846\",\n    \"color-grass_green-selected\": \"#0a482e\",\n    \"color-done-green\": \"#33d391\",\n    \"color-done-green-hover\": \"#0f9b63\",\n    \"color-done-green-selected\": \"#096c43\",\n    \"color-bright-green\": \"#b0dc51\",\n    \"color-bright-green-hover\": \"#7ca32b\",\n    \"color-bright-green-selected\": \"#56721b\",\n    \"color-saladish\": \"#d5c567\",\n    \"color-saladish-hover\": \"#9d8f3e\",\n    \"color-saladish-selected\": \"#6d6329\",\n    \"color-egg_yolk\": \"#ffd533\",\n    \"color-egg_yolk-hover\": \"#c29e11\",\n    \"color-egg_yolk-selected\": \"#886e09\",\n    \"color-working_orange\": \"#fdbc64\",\n    \"color-working_orange-hover\": \"#c0873c\",\n    \"color-working_orange-selected\": \"#875e27\",\n    \"color-dark-orange\": \"#ff6d3b\",\n    \"color-dark-orange-hover\": \"#c25531\",\n    \"color-dark-orange-selected\": \"#883a1f\",\n    \"color-peach\": \"#ffbdbd\",\n    \"color-peach-hover\": \"#c2888a\",\n    \"color-peach-selected\": \"#885f5f\",\n    \"color-sunset\": \"#ff9191\",\n    \"color-sunset-hover\": \"#c26163\",\n    \"color-sunset-selected\": \"#884343\",\n    \"color-stuck-red\": \"#e8697d\",\n    \"color-stuck-red-hover\": \"#ad3f51\",\n    \"color-stuck-red-selected\": \"#792a36\",\n    \"color-dark-red\": \"#c95c76\",\n    \"color-dark-red-hover\": \"#92334c\",\n    \"color-dark-red-selected\": \"#662232\",\n    \"color-sofia_pink\": \"#ff44a1\",\n    \"color-sofia_pink-hover\": \"#c21e71\",\n    \"color-sofia_pink-selected\": \"#88134d\",\n    \"color-lipstick\": \"#ff7bd0\",\n    \"color-lipstick-hover\": \"#c24e9a\",\n    \"color-lipstick-selected\": \"#88356a\",\n    \"color-bubble\": \"#fbb4f4\",\n    \"color-bubble-hover\": \"#be80ba\",\n    \"color-bubble-selected\": \"#855981\",\n    \"color-purple\": \"#b57de3\",\n    \"color-purple-hover\": \"#8050ab\",\n    \"color-purple-selected\": \"#593776\",\n    \"color-dark_purple\": \"#936fda\",\n    \"color-dark_purple-hover\": \"#6344a3\",\n    \"color-dark_purple-selected\": \"#442e71\",\n    \"color-berry\": \"#9862a1\",\n    \"color-berry-hover\": \"#673971\",\n    \"color-berry-selected\": \"#47264d\",\n    \"color-dark_indigo\": \"#6645a9\",\n    \"color-dark_indigo-hover\": \"#3c1f78\",\n    \"color-dark_indigo-selected\": \"#291452\",\n    \"color-indigo\": \"#777ae5\",\n    \"color-indigo-hover\": \"#4b4ead\",\n    \"color-indigo-selected\": \"#333578\",\n    \"color-navy\": \"#4e73a7\",\n    \"color-navy-hover\": \"#274776\",\n    \"color-navy-selected\": \"#193151\",\n    \"color-bright-blue\": \"#79affd\",\n    \"color-bright-blue-hover\": \"#4c7cc1\",\n    \"color-bright-blue-selected\": \"#345686\",\n    \"color-dark-blue\": \"#339ecd\",\n    \"color-dark-blue-hover\": \"#0f6d97\",\n    \"color-dark-blue-selected\": \"#094b69\",\n    \"color-aquamarine\": \"#71d6d1\",\n    \"color-aquamarine-hover\": \"#469e9b\",\n    \"color-aquamarine-selected\": \"#2f6e6b\",\n    \"color-chili-blue\": \"#85d6ff\",\n    \"color-chili-blue-hover\": \"#569ec3\",\n    \"color-chili-blue-selected\": \"#3b6e88\",\n    \"color-river\": \"#86b4ca\",\n    \"color-river-hover\": \"#588095\",\n    \"color-river-selected\": \"#3c5967\",\n    \"color-winter\": \"#aebdca\",\n    \"color-winter-hover\": \"#7b8895\",\n    \"color-winter-selected\": \"#555f67\",\n    \"color-explosive\": \"#d0d0d0\",\n    \"color-explosive-hover\": \"#98999a\",\n    \"color-explosive-selected\": \"#6a6a6a\",\n    \"color-american_gray\": \"#999999\",\n    \"color-american_gray-hover\": \"#69696a\",\n    \"color-american_gray-selected\": \"#494949\",\n    \"color-blackish\": \"#5c5c5c\",\n    \"color-brown\": \"#99756c\",\n    \"color-brown-hover\": \"#684943\",\n    \"color-brown-selected\": \"#48322c\",\n    \"color-orchid\": \"#e190c0\",\n    \"color-orchid-hover\": \"#b4739a\",\n    \"color-orchid-selected\": \"#7e516c\",\n    \"color-tan\": \"#bdab95\",\n    \"color-tan-hover\": \"#978977\",\n    \"color-tan-selected\": \"#6a6053\",\n    \"color-sky\": \"#b4e9f8\",\n    \"color-sky-hover\": \"#90bac6\",\n    \"color-sky-selected\": \"#65828b\",\n    \"color-coffee\": \"#ca9a8b\",\n    \"color-coffee-hover\": \"#a27b6f\",\n    \"color-coffee-selected\": \"#71564e\",\n    \"color-royal\": \"#5591ea\",\n    \"color-royal-hover\": \"#4474bb\",\n    \"color-royal-selected\": \"#305183\",\n    \"color-teal\": \"#457b82\",\n    \"color-teal-hover\": \"#376268\",\n    \"color-teal-selected\": \"#274549\",\n    \"color-lavender\": \"#cab9fa\",\n    \"color-lavender-hover\": \"#a294c8\",\n    \"color-lavender-selected\": \"#71688c\",\n    \"color-steel\": \"#bacbed\",\n    \"color-steel-hover\": \"#95a2be\",\n    \"color-steel-selected\": \"#687185\",\n    \"color-lilac\": \"#b1adc7\",\n    \"color-lilac-hover\": \"#8e8a9f\",\n    \"color-lilac-selected\": \"#63616f\",\n    \"color-pecan\": \"#786565\",\n    \"color-pecan-hover\": \"#605151\",\n    \"color-pecan-selected\": \"#433939\",\n    \"warning-color\": \"#ffcb00\",\n    \"warning-color-hover\": \"#eaaa15\",\n    \"warning-color-selected\": \"#503e02\",\n    \"warning-color-selected-hover\": \"#402f00\"\n  },\n  \"hacker_theme-app-theme\": {\n    \"primary-color\": \"#fe78c6\",\n    \"primary-on-secondary-color\": \"#fe78c6\",\n    \"primary-hover-color\": \"#fe5ab9\",\n    \"primary-hover-on-secondary-color\": \"#fe5ab9\",\n    \"primary-selected-color\": \"#9f4077\",\n    \"primary-selected-color-rgb\": \"#9f4077\",\n    \"primary-selected-hover-color\": \"#0d2e65\",\n    \"primary-highlighted-color\": \"#0b2858\",\n    \"primary-surface-color\": \"#111111\",\n    \"primary-selected-on-secondary-color\": \"#9f4077\",\n    \"primary-text-color\": \"#d5d8df\",\n    \"primary-text-on-secondary-color\": \"#d5d8df\",\n    \"fixed-light-color\": \"#ffffff\",\n    \"fixed-dark-color\": \"#111111\",\n    \"primary-background-color\": \"#282a36\",\n    \"primary-background-color-rgb\": \"#282a36\",\n    \"primary-background-hover-color\": \"#4b4e69\",\n    \"primary-background-hover-on-secondary-color\": \"#4b4e69\",\n    \"grey-background-color\": \"#282a36\",\n    \"allgrey-background-color\": \"#282a36\",\n    \"inverted-color-background\": \"#ffffff\",\n    \"text-color-on-inverted\": \"#323338\",\n    \"modal-background-color\": \"#282a36\",\n    \"color-error\": \"#ff5555\",\n    \"color-success\": \"#50fa7b\",\n    \"positive-color\": \"#00854d\",\n    \"positive-color-hover\": \"#007038\",\n    \"positive-color-selected\": \"#26503e\",\n    \"positive-color-selected-hover\": \"#194733\",\n    \"negative-color\": \"#d83a52\",\n    \"negative-color-hover\": \"#b63546\",\n    \"negative-color-selected\": \"#642830\",\n    \"negative-color-selected-hover\": \"#5a2027\",\n    \"ui-border-color\": \"#797e93\",\n    \"ui-background-color\": \"#4b4e69\",\n    \"ui-border-on-secondary-color\": \"#797e93\",\n    \"layout-border-color\": \"#414458\",\n    \"layout-border-on-secondary-color\": \"#414458\",\n    \"placeholder-color\": \"#c3c6d4\",\n    \"placeholder-on-secondary-color\": \"#c3c6d4\",\n    \"icon-color\": \"#c3c6d4\",\n    \"icon-on-secondary-color\": \"#c3c6d4\",\n    \"disabled-background-color\": \"#3a3a3a\",\n    \"disabled-background-on-secondary-color\": \"#3a3a3a\",\n    \"dark-background-color\": \"#303241\",\n    \"dark-background-on-secondary-color\": \"#595959\",\n    \"secondary-background-color\": \"#30324e\",\n    \"secondary-background-color-rgb\": \"#30324e\",\n    \"dialog-background-color\": \"#30324e\",\n    \"label-background-color\": \"#404b69\",\n    \"label-background-on-secondary-color\": \"#404b69\",\n    \"secondary-text-color\": \"#9699a6\",\n    \"secondary-text-on-secondary-color\": \"#9699a6\",\n    \"link-color\": \"#bd93f9\",\n    \"link-on-secondary-color\": \"#bd93f9\",\n    \"color-grass_green\": \"#359970\",\n    \"color-grass_green-hover\": \"#116846\",\n    \"color-grass_green-selected\": \"#0a482e\",\n    \"color-done-green\": \"#33d391\",\n    \"color-done-green-hover\": \"#0f9b63\",\n    \"color-done-green-selected\": \"#096c43\",\n    \"color-bright-green\": \"#b0dc51\",\n    \"color-bright-green-hover\": \"#7ca32b\",\n    \"color-bright-green-selected\": \"#56721b\",\n    \"color-saladish\": \"#d5c567\",\n    \"color-saladish-hover\": \"#9d8f3e\",\n    \"color-saladish-selected\": \"#6d6329\",\n    \"color-egg_yolk\": \"#ffd533\",\n    \"color-egg_yolk-hover\": \"#c29e11\",\n    \"color-egg_yolk-selected\": \"#886e09\",\n    \"color-working_orange\": \"#fdbc64\",\n    \"color-working_orange-hover\": \"#c0873c\",\n    \"color-working_orange-selected\": \"#875e27\",\n    \"color-dark-orange\": \"#ff6d3b\",\n    \"color-dark-orange-hover\": \"#c25531\",\n    \"color-dark-orange-selected\": \"#883a1f\",\n    \"color-peach\": \"#ffbdbd\",\n    \"color-peach-hover\": \"#c2888a\",\n    \"color-peach-selected\": \"#885f5f\",\n    \"color-sunset\": \"#ff9191\",\n    \"color-sunset-hover\": \"#c26163\",\n    \"color-sunset-selected\": \"#884343\",\n    \"color-stuck-red\": \"#e8697d\",\n    \"color-stuck-red-hover\": \"#ad3f51\",\n    \"color-stuck-red-selected\": \"#792a36\",\n    \"color-dark-red\": \"#c95c76\",\n    \"color-dark-red-hover\": \"#92334c\",\n    \"color-dark-red-selected\": \"#662232\",\n    \"color-sofia_pink\": \"#ff44a1\",\n    \"color-sofia_pink-hover\": \"#c21e71\",\n    \"color-sofia_pink-selected\": \"#88134d\",\n    \"color-lipstick\": \"#ff7bd0\",\n    \"color-lipstick-hover\": \"#c24e9a\",\n    \"color-lipstick-selected\": \"#88356a\",\n    \"color-bubble\": \"#fbb4f4\",\n    \"color-bubble-hover\": \"#be80ba\",\n    \"color-bubble-selected\": \"#855981\",\n    \"color-purple\": \"#b57de3\",\n    \"color-purple-hover\": \"#8050ab\",\n    \"color-purple-selected\": \"#593776\",\n    \"color-dark_purple\": \"#936fda\",\n    \"color-dark_purple-hover\": \"#6344a3\",\n    \"color-dark_purple-selected\": \"#442e71\",\n    \"color-berry\": \"#9862a1\",\n    \"color-berry-hover\": \"#673971\",\n    \"color-berry-selected\": \"#47264d\",\n    \"color-dark_indigo\": \"#6645a9\",\n    \"color-dark_indigo-hover\": \"#3c1f78\",\n    \"color-dark_indigo-selected\": \"#291452\",\n    \"color-indigo\": \"#777ae5\",\n    \"color-indigo-hover\": \"#4b4ead\",\n    \"color-indigo-selected\": \"#333578\",\n    \"color-navy\": \"#4e73a7\",\n    \"color-navy-hover\": \"#274776\",\n    \"color-navy-selected\": \"#193151\",\n    \"color-bright-blue\": \"#79affd\",\n    \"color-bright-blue-hover\": \"#4c7cc1\",\n    \"color-bright-blue-selected\": \"#345686\",\n    \"color-dark-blue\": \"#339ecd\",\n    \"color-dark-blue-hover\": \"#0f6d97\",\n    \"color-dark-blue-selected\": \"#094b69\",\n    \"color-aquamarine\": \"#71d6d1\",\n    \"color-aquamarine-hover\": \"#469e9b\",\n    \"color-aquamarine-selected\": \"#2f6e6b\",\n    \"color-chili-blue\": \"#85d6ff\",\n    \"color-chili-blue-hover\": \"#569ec3\",\n    \"color-chili-blue-selected\": \"#3b6e88\",\n    \"color-river\": \"#86b4ca\",\n    \"color-river-hover\": \"#588095\",\n    \"color-river-selected\": \"#3c5967\",\n    \"color-winter\": \"#aebdca\",\n    \"color-winter-hover\": \"#7b8895\",\n    \"color-winter-selected\": \"#555f67\",\n    \"color-explosive\": \"#d0d0d0\",\n    \"color-explosive-hover\": \"#98999a\",\n    \"color-explosive-selected\": \"#6a6a6a\",\n    \"color-american_gray\": \"#999999\",\n    \"color-american_gray-hover\": \"#69696a\",\n    \"color-american_gray-selected\": \"#494949\",\n    \"color-blackish\": \"#5c5c5c\",\n    \"color-brown\": \"#99756c\",\n    \"color-brown-hover\": \"#684943\",\n    \"color-brown-selected\": \"#48322c\",\n    \"color-orchid\": \"#e190c0\",\n    \"color-orchid-hover\": \"#b4739a\",\n    \"color-orchid-selected\": \"#7e516c\",\n    \"color-tan\": \"#bdab95\",\n    \"color-tan-hover\": \"#978977\",\n    \"color-tan-selected\": \"#6a6053\",\n    \"color-sky\": \"#b4e9f8\",\n    \"color-sky-hover\": \"#90bac6\",\n    \"color-sky-selected\": \"#65828b\",\n    \"color-coffee\": \"#ca9a8b\",\n    \"color-coffee-hover\": \"#a27b6f\",\n    \"color-coffee-selected\": \"#71564e\",\n    \"color-royal\": \"#5591ea\",\n    \"color-royal-hover\": \"#4474bb\",\n    \"color-royal-selected\": \"#305183\",\n    \"color-teal\": \"#457b82\",\n    \"color-teal-hover\": \"#376268\",\n    \"color-teal-selected\": \"#274549\",\n    \"color-lavender\": \"#cab9fa\",\n    \"color-lavender-hover\": \"#a294c8\",\n    \"color-lavender-selected\": \"#71688c\",\n    \"color-steel\": \"#bacbed\",\n    \"color-steel-hover\": \"#95a2be\",\n    \"color-steel-selected\": \"#687185\",\n    \"color-lilac\": \"#687185\",\n    \"color-lilac-hover\": \"#8e8a9f\",\n    \"color-lilac-selected\": \"#63616f\",\n    \"color-pecan\": \"#786565\",\n    \"color-pecan-hover\": \"#605151\",\n    \"color-pecan-selected\": \"#433939\",\n    \"warning-color\": \"#ffcb00\",\n    \"warning-color-hover\": \"#eaaa15\",\n    \"warning-color-selected\": \"#503e02\",\n    \"warning-color-selected-hover\": \"#402f00\"\n  }\n}\n"
  },
  {
    "path": "packages/style/src/files/tokens.json",
    "content": "{\n  \"light-app-theme\": {\n    \"primary-color\": \"#0073ea\",\n    \"primary-hover-color\": \"#0060b9\",\n    \"primary-selected-color\": \"#cce5ff\",\n    \"primary-selected-hover-color\": \"#aed4fc\",\n    \"primary-highlighted-color\": \"#f0f7ff\",\n    \"primary-surface-color\": \"#eceff8\",\n    \"primary-text-color\": \"#323338\",\n    \"secondary-text-color\": \"#676879\",\n    \"text-color-on-inverted\": \"#ffffff\",\n    \"text-color-on-primary\": \"#ffffff\",\n    \"inverted-color-background\": \"#323338\",\n    \"fixed-dark-color\": \"#323338\",\n    \"fixed-light-color\": \"#ffffff\",\n    \"primary-background-color\": \"#ffffff\",\n    \"primary-background-hover-color\": \"rgba(103, 104, 121, 0.1)\",\n    \"secondary-background-color\": \"#ffffff\",\n    \"allgrey-background-color\": \"#f6f7fb\",\n    \"backdrop-color\": \"rgba(41, 47, 76, 0.7)\",\n    \"ui-border-color\": \"#c3c6d4\",\n    \"ui-background-color\": \"#e7e9ef\",\n    \"ui-background-hover-color\": \"#d8d9e0\",\n    \"layout-border-color\": \"#d0d4e4\",\n    \"placeholder-color\": \"#676879\",\n    \"icon-color\": \"#676879\",\n    \"disabled-background-color\": \"#ecedf5\",\n    \"link-color\": \"#1f76c2\",\n    \"brand-color\": \"#0073ea\",\n    \"brand-hover-color\": \"#0060b9\",\n    \"brand-selected-color\": \"#cce5ff\",\n    \"brand-selected-hover-color\": \"#aed4fc\",\n    \"positive-color\": \"#00854d\",\n    \"positive-color-hover\": \"#007038\",\n    \"positive-color-selected\": \"#bbdbc9\",\n    \"positive-color-selected-hover\": \"#b5cec0\",\n    \"negative-color\": \"#d83a52\",\n    \"negative-color-hover\": \"#b63546\",\n    \"negative-color-selected\": \"#f4c3cb\",\n    \"negative-color-selected-hover\": \"#ecb7bf\",\n    \"warning-color\": \"#ffcb00\",\n    \"warning-color-hover\": \"#eaaa15\",\n    \"warning-color-selected\": \"#fceba1\",\n    \"warning-color-selected-hover\": \"#f2d973\",\n    \"grey-background-color\": \"#f6f7fb\",\n    \"text-color-on-brand\": \"#ffffff\",\n    \"color-surface\": \"#292f4c\",\n    \"color-grass_green-hover\": \"#116846\",\n    \"color-grass_green-selected\": \"#81bfa5\",\n    \"color-done-green-hover\": \"#0f9b63\",\n    \"color-done-green-selected\": \"#80e3ba\",\n    \"color-done-green-selected-with-opacity\": \"rgba(128, 227, 186, 0.6)\",\n    \"color-bright-green-hover\": \"#7ca32b\",\n    \"color-bright-green-selected\": \"#cde992\",\n    \"color-saladish-hover\": \"#9d8f3e\",\n    \"color-saladish-selected\": \"#e4daa0\",\n    \"color-egg_yolk-hover\": \"#eaaa15\",\n    \"color-egg_yolk-selected\": \"#ffe580\",\n    \"color-egg_yolk-rgb\": \"255, 213, 51\",\n    \"color-working_orange-hover\": \"#c0873c\",\n    \"color-working_orange-selected\": \"#fed59e\",\n    \"color-dark-orange-hover\": \"#c25531\",\n    \"color-dark-orange-selected\": \"#ffb196\",\n    \"color-peach-hover\": \"#c2888a\",\n    \"color-peach-selected\": \"#ffd6d6\",\n    \"color-sunset-hover\": \"#c26163\",\n    \"color-sunset-selected\": \"#ffbaba\",\n    \"color-sunset-selected-with-opacity\": \"rgba(255, 186, 186, 0.6)\",\n    \"color-stuck-red-hover\": \"#ad3f51\",\n    \"color-stuck-red-selected\": \"#f0a1ad\",\n    \"color-dark-red-hover\": \"#92334c\",\n    \"color-dark-red-selected\": \"#dd99a9\",\n    \"color-sofia_pink-hover\": \"#c20062\",\n    \"color-sofia_pink-selected\": \"#ff8ac4\",\n    \"color-lipstick-hover\": \"#c24e9a\",\n    \"color-lipstick-selected\": \"#fface1\",\n    \"color-bubble-hover\": \"#be80ba\",\n    \"color-bubble-selected\": \"#fcd0f8\",\n    \"color-purple-hover\": \"#7d45b0\",\n    \"color-purple-selected\": \"#d0aeed\",\n    \"color-dark_purple-hover\": \"#6344a3\",\n    \"color-dark_purple-selected\": \"#bba5e8\",\n    \"color-berry-hover\": \"#673971\",\n    \"color-berry-selected\": \"#be9dc4\",\n    \"color-dark_indigo\": \"#401694\",\n    \"color-dark_indigo-hover\": \"#3c1f78\",\n    \"color-dark_indigo-selected\": \"#a08bc9\",\n    \"color-indigo-hover\": \"#4b4ead\",\n    \"color-indigo-selected\": \"#aaacef\",\n    \"color-navy\": \"#225091\",\n    \"color-navy-hover\": \"#274776\",\n    \"color-navy-selected\": \"#90a7c8\",\n    \"color-bright-blue-hover\": \"#4c7cc1\",\n    \"color-bright-blue-selected\": \"#abcdfd\",\n    \"color-dark-blue-hover\": \"#0f6d97\",\n    \"color-dark-blue-selected\": \"#80c2df\",\n    \"color-aquamarine-hover\": \"#469e9b\",\n    \"color-aquamarine-selected\": \"#a6e5e2\",\n    \"color-chili-blue-hover\": \"#569ec3\",\n    \"color-chili-blue-selected\": \"#b2e5ff\",\n    \"color-river-hover\": \"#588095\",\n    \"color-river-selected\": \"#b3d0de\",\n    \"color-winter-hover\": \"#7b8895\",\n    \"color-winter-selected\": \"#ccd6de\",\n    \"color-explosive-hover\": \"#98999a\",\n    \"color-explosive-selected\": \"#e1e1e1\",\n    \"color-american_gray-hover\": \"#69696a\",\n    \"color-american_gray-selected\": \"#bfbfbf\",\n    \"color-blackish\": \"#333333\",\n    \"color-blackish-hover\": \"#222222\",\n    \"color-blackish-selected\": \"#999999\",\n    \"color-brown-hover\": \"#684943\",\n    \"color-brown-selected\": \"#bfa9a3\",\n    \"color-orchid-hover\": \"#ae5d8d\",\n    \"color-orchid-selected\": \"#ecbad7\",\n    \"color-tan-hover\": \"#8a7862\",\n    \"color-tan-selected\": \"#d6cabc\",\n    \"color-sky-hover\": \"#81b6c5\",\n    \"color-sky-selected\": \"#d0f1fa\",\n    \"color-coffee-hover\": \"#976758\",\n    \"color-coffee-selected\": \"#dec0b7\",\n    \"color-royal-hover\": \"#225eb7\",\n    \"color-royal-selected\": \"#95bbf2\",\n    \"color-teal\": \"#175a63\",\n    \"color-teal-hover\": \"#12484f\",\n    \"color-teal-selected\": \"#8bacb1\",\n    \"color-lavender-hover\": \"#9786c7\",\n    \"color-lavender-selected\": \"#ded4fc\",\n    \"color-steel-hover\": \"#8798ba\",\n    \"color-steel-selected\": \"#d4dff4\",\n    \"color-lilac-hover\": \"#7e7a94\",\n    \"color-lilac-selected\": \"#ceccdc\",\n    \"color-pecan\": \"#563e3e\",\n    \"color-pecan-hover\": \"#453232\",\n    \"color-pecan-selected\": \"#ab9f9f\",\n    \"primary-on-secondary-color\": \"#0073ea\",\n    \"primary-hover-on-secondary-color\": \"#0060b9\",\n    \"primary-selected-color-rgb\": \"204, 229, 255\",\n    \"primary-selected-on-secondary-color\": \"#cce5ff\",\n    \"primary-text-on-secondary-color\": \"#323338\",\n    \"primary-background-color-rgb\": \"255, 255, 255\",\n    \"primary-background-hover-on-secondary-color\": \"#dcdfec\",\n    \"secondary-background-color-rgb\": \"255, 255, 255\",\n    \"secondary-text-on-secondary-color\": \"#676879\",\n    \"link-on-secondary-color\": \"#1f76c2\",\n    \"modal-background-color\": \"#ffffff\",\n    \"dark-background-color\": \"#f6f7fb\",\n    \"dark-background-on-secondary-color\": \"#f6f7fb\",\n    \"dialog-background-color\": \"#ffffff\",\n    \"label-background-color\": \"#cce5ff\",\n    \"label-background-on-secondary-color\": \"#cce5ff\",\n    \"icon-on-secondary-color\": \"#676879\",\n    \"placeholder-color-with-opacity\": \"rgba(103, 104, 121, 0.1)\",\n    \"placeholder-on-secondary-color\": \"#676879\",\n    \"ui-border-on-secondary-color\": \"#c3c6d4\",\n    \"layout-border-on-secondary-color\": \"#d0d4e4\",\n    \"disabled-background-on-secondary-color\": \"#ecedf5\",\n    \"color-grass_green\": \"#037f4c\",\n    \"color-done-green\": \"#00c875\",\n    \"color-bright-green\": \"#9cd326\",\n    \"color-saladish\": \"#cab641\",\n    \"color-egg_yolk\": \"#ffcb00\",\n    \"color-working_orange\": \"#fdab3d\",\n    \"color-dark-orange\": \"#ff6d3b\",\n    \"color-peach\": \"#ffadad\",\n    \"color-sunset\": \"#ff7575\",\n    \"color-stuck-red\": \"#df2f4a\",\n    \"color-dark-red\": \"#bb3354\",\n    \"color-sofia_pink\": \"#e50073\",\n    \"color-lipstick\": \"#ff5ac4\",\n    \"color-bubble\": \"#faa1f1\",\n    \"color-purple\": \"#9d50dd\",\n    \"color-dark_purple\": \"#784bd1\",\n    \"color-berry\": \"#7e3b8a\",\n    \"color-indigo\": \"#5559df\",\n    \"color-bright-blue\": \"#579bfc\",\n    \"color-dark-blue\": \"#007eb5\",\n    \"color-aquamarine\": \"#4eccc6\",\n    \"color-chili-blue\": \"#66ccff\",\n    \"color-river\": \"#74afcc\",\n    \"color-winter\": \"#9aadbd\",\n    \"color-explosive\": \"#c4c4c4\",\n    \"color-american_gray\": \"#757575\",\n    \"color-brown\": \"#7f5347\",\n    \"color-orchid\": \"#e484bd\",\n    \"color-tan\": \"#bca58a\",\n    \"color-sky\": \"#a1e3f6\",\n    \"color-coffee\": \"#cd9282\",\n    \"color-royal\": \"#216edf\",\n    \"color-lavender\": \"#bda8f9\",\n    \"color-steel\": \"#a9bee8\",\n    \"color-lilac\": \"#9d99b9\",\n    \"color-success\": \"#00854d\",\n    \"color-error\": \"#d83a52\",\n    \"color-highlight_blue\": \"#cce5ff\",\n    \"color-basic_blue\": \"#0073ea\",\n    \"color-dark_blue\": \"#0060b9\",\n    \"color-bazooka\": \"#f65f7c\",\n    \"color-snow_white\": \"#ffffff\",\n    \"color-riverstone_gray\": \"#f6f7fb\",\n    \"color-ui_grey\": \"#dcdfec\",\n    \"color-wolf_gray\": \"#c3c6d4\",\n    \"color-asphalt\": \"#676879\",\n    \"color-mud_black\": \"#323338\",\n    \"color-black\": \"#000000\",\n    \"color-success-hover\": \"#007038\",\n    \"color-success-highlight\": \"#bbdbc9\",\n    \"color-error-hover\": \"#b63546\",\n    \"color-error-highlight\": \"#f4c3cb\",\n    \"color-link_color\": \"#1f76c2\",\n    \"color-dark_marble\": \"#f1f1f1\",\n    \"color-marble\": \"#f7f7f7\",\n    \"color-gainsboro\": \"#e1e1e1\",\n    \"color-extra_light_gray\": \"#edeef0\",\n    \"color-glitter\": \"#d9f0ff\",\n    \"color-ultra_light_gray\": \"#ebebeb\",\n    \"color-very_light_gray\": \"#a1a1a1\",\n    \"color-jaco_gray\": \"#9699a6\",\n    \"color-storm_gray\": \"#6b6d77\",\n    \"color-trolley-grey\": \"#757575\",\n    \"color-basic_light_blue\": \"#c7e6fa\",\n    \"color-light_blue\": \"#61caf7\",\n    \"color-turquoise\": \"#66ccff\",\n    \"color-aqua\": \"#00d1d1\",\n    \"color-live_blue\": \"#009aff\",\n    \"color-jeans\": \"#597bfc\",\n    \"color-burned_eggplant\": \"#181d37\",\n    \"color-light-pink\": \"#ff5ac4\",\n    \"color-dark-pink\": \"#ff007f\",\n    \"color-dark_red\": \"#bb3354\",\n    \"color-yellow\": \"#ffcb00\",\n    \"color-mustered\": \"#cab641\",\n    \"color-orange\": \"#fdab3d\",\n    \"color-lime-green\": \"#9cd326\",\n    \"color-jade\": \"#03c875\",\n    \"color-green-haze\": \"#00a359\",\n    \"color-grass-green\": \"#037f4c\",\n    \"color-amethyst\": \"#9d50dd\",\n    \"color-dark-purple\": \"#784bd1\",\n    \"color-blue_links\": \"#007eb5\",\n    \"color-blue-links\": \"#007eb5\",\n    \"color-private\": \"#f65f7c\",\n    \"color-public\": \"#009aff\",\n    \"color-board_views_grey\": \"#6e6f8f\",\n    \"color-board_views_grey_hover\": \"#b2b3d0\",\n    \"color-board_views_blue\": \"#1c1f3b\",\n    \"color-board_views_blue_secondary\": \"#363a52\",\n    \"color-border_light_gray\": \"#f5f6f8\",\n    \"color-brand-blue\": \"#00a9ff\",\n    \"color-brand-charcoal\": \"#2b2c5c\",\n    \"color-brand-gold\": \"#ffcc00\",\n    \"color-brand-green\": \"#11dd80\",\n    \"color-brand-iris\": \"#595ad4\",\n    \"color-brand-light-blue\": \"#00cff4\",\n    \"color-brand-malachite\": \"#00cd6f\",\n    \"color-brand-purple\": \"#a358d0\",\n    \"color-brand-red\": \"#f74875\",\n    \"color-deadline_upcoming_indication\": \"#5d6387\",\n    \"color-default_group_color\": \"#579bfc\",\n    \"color-form_btn_hover\": \"#0083d9\",\n    \"color-form_purple\": \"#575c96\",\n    \"color-highlight\": \"#dff0ff\",\n    \"color-green_shadow\": \"#00c875\",\n    \"color-green-shadow\": \"#00c875\",\n    \"color-red_shadow\": \"#df2f4a\",\n    \"color-red-shadow\": \"#df2f4a\",\n    \"color-pulse_bg\": \"#f0f0f0\",\n    \"color-pulse_text_color\": \"#333333\",\n    \"color-placholder_gray\": \"#d8d8d8\",\n    \"color-placeholder_light_gray\": \"#efefef\",\n    \"color-excel-green\": \"#207245\",\n    \"color-media-blue\": \"#2ea2e9\",\n    \"color-pdf-red\": \"#bb0706\",\n    \"color-ppt-orange\": \"#d64e2a\",\n    \"color-word-blue\": \"#2a5699\",\n    \"color-zip-orange\": \"#e4901c\",\n    \"color-like_red\": \"#fb275d\",\n    \"color-scrollbar_gray\": \"#b2b2b2\",\n    \"color-timeline_grid_blue\": \"#454662\",\n    \"color-timeline_blue\": \"#1c1f3b\",\n    \"color-highlight_blue-rgb\": \"204, 229, 255\",\n    \"color-snow_white-with-opacity\": \"rgba(255, 255, 255, 0.4)\",\n    \"color-wolf_gray-with-opacity\": \"rgba(195, 198, 212, 0.1)\",\n    \"color-asphalt-with-opacity\": \"rgba(103, 104, 121, 0.1)\",\n    \"text-color-on-primary-with-opacity\": \"rgba(255, 255, 255, 0.4)\"\n  },\n  \"dark-app-theme\": {\n    \"primary-color\": \"#0073ea\",\n    \"primary-hover-color\": \"#0060b9\",\n    \"primary-selected-color\": \"#133774\",\n    \"primary-selected-hover-color\": \"#0d2e65\",\n    \"primary-highlighted-color\": \"#0d2753\",\n    \"primary-surface-color\": \"#181b34\",\n    \"primary-text-color\": \"#d5d8df\",\n    \"secondary-text-color\": \"#9699a6\",\n    \"text-color-on-inverted\": \"#323338\",\n    \"text-color-on-primary\": \"#ffffff\",\n    \"inverted-color-background\": \"#ffffff\",\n    \"fixed-dark-color\": \"#323338\",\n    \"fixed-light-color\": \"#ffffff\",\n    \"primary-background-color\": \"#181b34\",\n    \"primary-background-hover-color\": \"rgba(103, 104, 121, 0.3)\",\n    \"secondary-background-color\": \"#30324e\",\n    \"allgrey-background-color\": \"#30324e\",\n    \"backdrop-color\": \"rgba(41, 47, 76, 0.7)\",\n    \"ui-border-color\": \"#797e93\",\n    \"ui-background-color\": \"#434660\",\n    \"ui-background-hover-color\": \"#35384d\",\n    \"layout-border-color\": \"#4b4e69\",\n    \"placeholder-color\": \"#c3c6d4\",\n    \"icon-color\": \"#c3c6d4\",\n    \"disabled-background-color\": \"#3c3f59\",\n    \"link-color\": \"#69a7ef\",\n    \"brand-color\": \"#0073ea\",\n    \"brand-hover-color\": \"#0060b9\",\n    \"brand-selected-color\": \"#133774\",\n    \"brand-selected-hover-color\": \"#0d2e65\",\n    \"positive-color\": \"#00854d\",\n    \"positive-color-hover\": \"#007038\",\n    \"positive-color-selected\": \"#025231\",\n    \"positive-color-selected-hover\": \"#194733\",\n    \"negative-color\": \"#d83a52\",\n    \"negative-color-hover\": \"#b63546\",\n    \"negative-color-selected\": \"#642830\",\n    \"negative-color-selected-hover\": \"#5a2027\",\n    \"warning-color\": \"#ffcb00\",\n    \"warning-color-hover\": \"#eaaa15\",\n    \"warning-color-selected\": \"#503e02\",\n    \"warning-color-selected-hover\": \"#402f00\",\n    \"color-highlight_blue\": \"#cce5ff\",\n    \"color-basic_blue\": \"#0073ea\",\n    \"color-dark_blue\": \"#0060b9\",\n    \"color-bazooka\": \"#f65f7c\",\n    \"color-snow_white\": \"#ffffff\",\n    \"color-riverstone_gray\": \"#f6f7fb\",\n    \"color-ui_grey\": \"#dcdfec\",\n    \"color-wolf_gray\": \"#c3c6d4\",\n    \"color-asphalt\": \"#676879\",\n    \"color-mud_black\": \"#323338\",\n    \"color-black\": \"#000000\",\n    \"color-success\": \"#50fa7b\",\n    \"color-success-hover\": \"#007038\",\n    \"color-success-highlight\": \"#bbdbc9\",\n    \"color-error\": \"#ff5555\",\n    \"color-error-hover\": \"#b63546\",\n    \"color-error-highlight\": \"#f4c3cb\",\n    \"color-link_color\": \"#1f76c2\",\n    \"color-surface\": \"#292f4c\",\n    \"grey-background-color\": \"#181b34\",\n    \"text-color-on-brand\": \"#ffffff\",\n    \"color-grass_green\": \"#359970\",\n    \"color-grass_green-hover\": \"#116846\",\n    \"color-grass_green-selected\": \"#0f4f43\",\n    \"color-done-green\": \"#33d391\",\n    \"color-done-green-hover\": \"#0f9b63\",\n    \"color-done-green-selected\": \"#0e7358\",\n    \"color-done-green-selected-with-opacity\": \"rgba(14, 115, 88, 0.6)\",\n    \"color-bright-green\": \"#b0dc51\",\n    \"color-bright-green-hover\": \"#7ca32b\",\n    \"color-bright-green-selected\": \"#5c7930\",\n    \"color-saladish\": \"#d5c567\",\n    \"color-saladish-hover\": \"#9d8f3e\",\n    \"color-saladish-selected\": \"#736a3e\",\n    \"color-egg_yolk\": \"#ffd533\",\n    \"color-egg_yolk-hover\": \"#c29e11\",\n    \"color-egg_yolk-selected\": \"#8d751e\",\n    \"color-egg_yolk-rgb\": \"255, 213, 51\",\n    \"color-working_orange\": \"#fdbc64\",\n    \"color-working_orange-hover\": \"#c0873c\",\n    \"color-working_orange-selected\": \"#8c653c\",\n    \"color-dark-orange\": \"#ff6d3b\",\n    \"color-dark-orange-hover\": \"#c25531\",\n    \"color-dark-orange-selected\": \"#8d4134\",\n    \"color-peach\": \"#ffbdbd\",\n    \"color-peach-hover\": \"#c2888a\",\n    \"color-peach-selected\": \"#8d6674\",\n    \"color-sunset\": \"#ff9191\",\n    \"color-sunset-hover\": \"#c26163\",\n    \"color-sunset-selected\": \"#8d4a58\",\n    \"color-sunset-selected-with-opacity\": \"rgba(141, 74, 88, 0.6)\",\n    \"color-stuck-red\": \"#e8697d\",\n    \"color-stuck-red-hover\": \"#ad3f51\",\n    \"color-stuck-red-selected\": \"#7f314b\",\n    \"color-dark-red\": \"#c95c76\",\n    \"color-dark-red-hover\": \"#92334c\",\n    \"color-dark-red-selected\": \"#6b2947\",\n    \"color-sofia_pink\": \"#ff44a1\",\n    \"color-sofia_pink-hover\": \"#c21e71\",\n    \"color-sofia_pink-selected\": \"#8d1a62\",\n    \"color-lipstick\": \"#ff7bd0\",\n    \"color-lipstick-hover\": \"#c24e9a\",\n    \"color-lipstick-selected\": \"#8d3c7f\",\n    \"color-bubble\": \"#fbb4f4\",\n    \"color-bubble-hover\": \"#be80ba\",\n    \"color-bubble-selected\": \"#8b6096\",\n    \"color-purple\": \"#b57de3\",\n    \"color-purple-hover\": \"#8050ab\",\n    \"color-purple-selected\": \"#5f3e8b\",\n    \"color-dark_purple\": \"#936fda\",\n    \"color-dark_purple-hover\": \"#6344a3\",\n    \"color-dark_purple-selected\": \"#4a3586\",\n    \"color-berry\": \"#9862a1\",\n    \"color-berry-hover\": \"#673971\",\n    \"color-berry-selected\": \"#4d2d62\",\n    \"color-dark_indigo\": \"#6129ff\",\n    \"color-dark_indigo-hover\": \"#4c18dc\",\n    \"color-dark_indigo-selected\": \"#3c13ae\",\n    \"color-indigo\": \"#777ae5\",\n    \"color-indigo-hover\": \"#4b4ead\",\n    \"color-indigo-selected\": \"#383c8d\",\n    \"color-navy\": \"#5684c5\",\n    \"color-navy-hover\": \"#3468b2\",\n    \"color-navy-selected\": \"#24508f\",\n    \"color-bright-blue\": \"#79affd\",\n    \"color-bright-blue-hover\": \"#4c7cc1\",\n    \"color-bright-blue-selected\": \"#395d9b\",\n    \"color-dark-blue\": \"#339ecd\",\n    \"color-dark-blue-hover\": \"#0f6d97\",\n    \"color-dark-blue-selected\": \"#0e527e\",\n    \"color-aquamarine\": \"#71d6d1\",\n    \"color-aquamarine-hover\": \"#469e9b\",\n    \"color-aquamarine-selected\": \"#357580\",\n    \"color-chili-blue\": \"#85d6ff\",\n    \"color-chili-blue-hover\": \"#569ec3\",\n    \"color-chili-blue-selected\": \"#41759d\",\n    \"color-river\": \"#86b4ca\",\n    \"color-river-hover\": \"#588095\",\n    \"color-river-selected\": \"#42607c\",\n    \"color-winter\": \"#aebdca\",\n    \"color-winter-hover\": \"#7b8895\",\n    \"color-winter-selected\": \"#5b667c\",\n    \"color-explosive\": \"#d0d0d0\",\n    \"color-explosive-hover\": \"#98999a\",\n    \"color-explosive-selected\": \"#70717f\",\n    \"color-american_gray\": \"#999999\",\n    \"color-american_gray-hover\": \"#69696a\",\n    \"color-american_gray-selected\": \"#4e505e\",\n    \"color-blackish\": \"#7a7a7a\",\n    \"color-blackish-hover\": \"#525252\",\n    \"color-blackish-selected\": \"#383838\",\n    \"color-brown\": \"#99756c\",\n    \"color-brown-hover\": \"#684943\",\n    \"color-brown-selected\": \"#4d3941\",\n    \"color-orchid\": \"#e190c0\",\n    \"color-orchid-hover\": \"#b4739a\",\n    \"color-orchid-selected\": \"#85597b\",\n    \"color-tan\": \"#bdab95\",\n    \"color-tan-hover\": \"#978977\",\n    \"color-tan-selected\": \"#716863\",\n    \"color-sky\": \"#b4e9f8\",\n    \"color-sky-hover\": \"#90bac6\",\n    \"color-sky-selected\": \"#6c8a9a\",\n    \"color-coffee\": \"#ca9a8b\",\n    \"color-coffee-hover\": \"#a27b6f\",\n    \"color-coffee-selected\": \"#795e5d\",\n    \"color-royal\": \"#5591ea\",\n    \"color-royal-hover\": \"#4474bb\",\n    \"color-royal-selected\": \"#375993\",\n    \"color-teal\": \"#4a8f98\",\n    \"color-teal-hover\": \"#347179\",\n    \"color-teal-selected\": \"#245960\",\n    \"color-lavender\": \"#cab9fa\",\n    \"color-lavender-hover\": \"#a294c8\",\n    \"color-lavender-selected\": \"#79709c\",\n    \"color-steel\": \"#bacbed\",\n    \"color-steel-hover\": \"#95a2be\",\n    \"color-steel-selected\": \"#707a95\",\n    \"color-lilac\": \"#687185\",\n    \"color-lilac-hover\": \"#8e8a9f\",\n    \"color-lilac-selected\": \"#6b697f\",\n    \"color-pecan\": \"#806363\",\n    \"color-pecan-hover\": \"#674c4c\",\n    \"color-pecan-selected\": \"#513939\",\n    \"color-dark_marble\": \"#f1f1f1\",\n    \"color-marble\": \"#f7f7f7\",\n    \"color-gainsboro\": \"#e1e1e1\",\n    \"color-extra_light_gray\": \"#edeef0\",\n    \"color-glitter\": \"#d9f0ff\",\n    \"color-ultra_light_gray\": \"#ebebeb\",\n    \"color-very_light_gray\": \"#a1a1a1\",\n    \"color-jaco_gray\": \"#9699a6\",\n    \"color-storm_gray\": \"#6b6d77\",\n    \"color-trolley-grey\": \"#757575\",\n    \"color-basic_light_blue\": \"#c7e6fa\",\n    \"color-light_blue\": \"#61caf7\",\n    \"color-turquoise\": \"#66ccff\",\n    \"color-aqua\": \"#00d1d1\",\n    \"color-live_blue\": \"#009aff\",\n    \"color-jeans\": \"#597bfc\",\n    \"color-burned_eggplant\": \"#181d37\",\n    \"color-light-pink\": \"#ff5ac4\",\n    \"color-dark-pink\": \"#ff007f\",\n    \"color-dark_red\": \"#bb3354\",\n    \"color-yellow\": \"#ffcb00\",\n    \"color-mustered\": \"#cab641\",\n    \"color-orange\": \"#fdab3d\",\n    \"color-lime-green\": \"#9cd326\",\n    \"color-jade\": \"#03c875\",\n    \"color-green-haze\": \"#00a359\",\n    \"color-grass-green\": \"#037f4c\",\n    \"color-amethyst\": \"#9d50dd\",\n    \"color-dark-purple\": \"#784bd1\",\n    \"color-blue_links\": \"#007eb5\",\n    \"color-blue-links\": \"#007eb5\",\n    \"color-private\": \"#f65f7c\",\n    \"color-public\": \"#009aff\",\n    \"color-board_views_grey\": \"#6e6f8f\",\n    \"color-board_views_grey_hover\": \"#b2b3d0\",\n    \"color-board_views_blue\": \"#1c1f3b\",\n    \"color-board_views_blue_secondary\": \"#363a52\",\n    \"color-border_light_gray\": \"#f5f6f8\",\n    \"color-brand-blue\": \"#00a9ff\",\n    \"color-brand-charcoal\": \"#2b2c5c\",\n    \"color-brand-gold\": \"#ffcc00\",\n    \"color-brand-green\": \"#11dd80\",\n    \"color-brand-iris\": \"#595ad4\",\n    \"color-brand-light-blue\": \"#00cff4\",\n    \"color-brand-malachite\": \"#00cd6f\",\n    \"color-brand-purple\": \"#a358d0\",\n    \"color-brand-red\": \"#f74875\",\n    \"color-deadline_upcoming_indication\": \"#5d6387\",\n    \"color-default_group_color\": \"#579bfc\",\n    \"color-form_btn_hover\": \"#0083d9\",\n    \"color-form_purple\": \"#575c96\",\n    \"color-highlight\": \"#dff0ff\",\n    \"color-green_shadow\": \"#00c875\",\n    \"color-green-shadow\": \"#00c875\",\n    \"color-red_shadow\": \"#df2f4a\",\n    \"color-red-shadow\": \"#df2f4a\",\n    \"color-pulse_bg\": \"#f0f0f0\",\n    \"color-pulse_text_color\": \"#333333\",\n    \"color-placholder_gray\": \"#d8d8d8\",\n    \"color-placeholder_light_gray\": \"#efefef\",\n    \"color-excel-green\": \"#207245\",\n    \"color-media-blue\": \"#2ea2e9\",\n    \"color-pdf-red\": \"#bb0706\",\n    \"color-ppt-orange\": \"#d64e2a\",\n    \"color-word-blue\": \"#2a5699\",\n    \"color-zip-orange\": \"#e4901c\",\n    \"color-like_red\": \"#fb275d\",\n    \"color-scrollbar_gray\": \"#b2b2b2\",\n    \"color-timeline_grid_blue\": \"#454662\",\n    \"color-timeline_blue\": \"#1c1f3b\",\n    \"color-highlight_blue-rgb\": \"204, 229, 255\",\n    \"color-snow_white-with-opacity\": \"rgba(255, 255, 255, 0.4)\",\n    \"color-wolf_gray-with-opacity\": \"rgba(195, 198, 212, 0.1)\",\n    \"color-asphalt-with-opacity\": \"rgba(103, 104, 121, 0.1)\",\n    \"primary-on-secondary-color\": \"#0073ea\",\n    \"primary-hover-on-secondary-color\": \"#0060b9\",\n    \"primary-selected-color-rgb\": \"19, 55, 116\",\n    \"primary-selected-on-secondary-color\": \"#133774\",\n    \"primary-text-on-secondary-color\": \"#d5d8df\",\n    \"text-color-on-primary-with-opacity\": \"rgba(255, 255, 255, 0.4)\",\n    \"secondary-text-on-secondary-color\": \"#9699a6\",\n    \"placeholder-color-with-opacity\": \"rgba(195, 198, 212, 0.1)\",\n    \"placeholder-on-secondary-color\": \"#c3c6d4\",\n    \"icon-on-secondary-color\": \"#c3c6d4\",\n    \"link-on-secondary-color\": \"#69a7ef\",\n    \"label-background-color\": \"#404b69\",\n    \"label-background-on-secondary-color\": \"#404b69\",\n    \"primary-background-color-rgb\": \"24, 27, 52\",\n    \"primary-background-hover-on-secondary-color\": \"#4b4e69\",\n    \"modal-background-color\": \"#181b34\",\n    \"secondary-background-color-rgb\": \"48, 50, 78\",\n    \"disabled-background-on-secondary-color\": \"#3c3f59\",\n    \"ui-border-on-secondary-color\": \"#797e93\",\n    \"layout-border-on-secondary-color\": \"#4b4e69\",\n    \"dark-background-color\": \"#393b53\",\n    \"dark-background-on-secondary-color\": \"#4b4e69\",\n    \"dialog-background-color\": \"#30324e\"\n  },\n  \"black-app-theme\": {\n    \"primary-color\": \"#0073ea\",\n    \"primary-hover-color\": \"#0060b9\",\n    \"primary-selected-color\": \"#133774\",\n    \"primary-selected-hover-color\": \"#0d2e65\",\n    \"primary-highlighted-color\": \"#0b2858\",\n    \"primary-surface-color\": \"#111111\",\n    \"primary-text-color\": \"#eeeeee\",\n    \"secondary-text-color\": \"#aaaaaa\",\n    \"text-color-on-inverted\": \"#111111\",\n    \"text-color-on-primary\": \"#ffffff\",\n    \"inverted-color-background\": \"#eeeeee\",\n    \"fixed-dark-color\": \"#111111\",\n    \"fixed-light-color\": \"#ffffff\",\n    \"primary-background-color\": \"#111111\",\n    \"primary-background-hover-color\": \"rgba(103, 104, 121, 0.3)\",\n    \"secondary-background-color\": \"#2c2c2c\",\n    \"allgrey-background-color\": \"#2c2c2c\",\n    \"backdrop-color\": \"rgba(33, 33, 33, 0.7)\",\n    \"ui-border-color\": \"#8d8d8d\",\n    \"ui-background-color\": \"#4d4d4d\",\n    \"ui-background-hover-color\": \"#3b3b3b\",\n    \"layout-border-color\": \"#636363\",\n    \"placeholder-color\": \"#aaaaaa\",\n    \"icon-color\": \"#aaaaaa\",\n    \"disabled-background-color\": \"#3a3a3a\",\n    \"link-color\": \"#69a7ef\",\n    \"brand-color\": \"#0073ea\",\n    \"brand-hover-color\": \"#0060b9\",\n    \"brand-selected-color\": \"#133774\",\n    \"brand-selected-hover-color\": \"#0d2e65\",\n    \"positive-color\": \"#00854d\",\n    \"positive-color-hover\": \"#007038\",\n    \"positive-color-selected\": \"#025231\",\n    \"positive-color-selected-hover\": \"#194733\",\n    \"negative-color\": \"#d83a52\",\n    \"negative-color-hover\": \"#b63546\",\n    \"negative-color-selected\": \"#642830\",\n    \"negative-color-selected-hover\": \"#5a2027\",\n    \"warning-color\": \"#ffcb00\",\n    \"warning-color-hover\": \"#eaaa15\",\n    \"warning-color-selected\": \"#503e02\",\n    \"warning-color-selected-hover\": \"#402f00\",\n    \"color-highlight_blue\": \"#cce5ff\",\n    \"color-basic_blue\": \"#0073ea\",\n    \"color-dark_blue\": \"#0060b9\",\n    \"color-bazooka\": \"#f65f7c\",\n    \"color-snow_white\": \"#ffffff\",\n    \"color-riverstone_gray\": \"#f6f7fb\",\n    \"color-ui_grey\": \"#dcdfec\",\n    \"color-wolf_gray\": \"#c3c6d4\",\n    \"color-asphalt\": \"#676879\",\n    \"color-mud_black\": \"#323338\",\n    \"color-black\": \"#000000\",\n    \"color-success\": \"#50fa7b\",\n    \"color-success-hover\": \"#007038\",\n    \"color-success-highlight\": \"#bbdbc9\",\n    \"color-error\": \"#ff5555\",\n    \"color-error-hover\": \"#b63546\",\n    \"color-error-highlight\": \"#f4c3cb\",\n    \"color-link_color\": \"#1f76c2\",\n    \"color-surface\": \"#212121\",\n    \"grey-background-color\": \"#111111\",\n    \"text-color-on-brand\": \"#ffffff\",\n    \"color-grass_green\": \"#359970\",\n    \"color-grass_green-hover\": \"#116846\",\n    \"color-grass_green-selected\": \"#0a482e\",\n    \"color-done-green\": \"#33d391\",\n    \"color-done-green-hover\": \"#0f9b63\",\n    \"color-done-green-selected\": \"#096c43\",\n    \"color-done-green-selected-with-opacity\": \"rgba(9, 108, 67, 0.6)\",\n    \"color-bright-green\": \"#b0dc51\",\n    \"color-bright-green-hover\": \"#7ca32b\",\n    \"color-bright-green-selected\": \"#56721b\",\n    \"color-saladish\": \"#d5c567\",\n    \"color-saladish-hover\": \"#9d8f3e\",\n    \"color-saladish-selected\": \"#6d6329\",\n    \"color-egg_yolk\": \"#ffd533\",\n    \"color-egg_yolk-hover\": \"#c29e11\",\n    \"color-egg_yolk-selected\": \"#886e09\",\n    \"color-egg_yolk-rgb\": \"255, 213, 51\",\n    \"color-working_orange\": \"#fdbc64\",\n    \"color-working_orange-hover\": \"#c0873c\",\n    \"color-working_orange-selected\": \"#875e27\",\n    \"color-dark-orange\": \"#ff6d3b\",\n    \"color-dark-orange-hover\": \"#c25531\",\n    \"color-dark-orange-selected\": \"#883a1f\",\n    \"color-peach\": \"#ffbdbd\",\n    \"color-peach-hover\": \"#c2888a\",\n    \"color-peach-selected\": \"#885f5f\",\n    \"color-sunset\": \"#ff9191\",\n    \"color-sunset-hover\": \"#c26163\",\n    \"color-sunset-selected\": \"#884343\",\n    \"color-sunset-selected-with-opacity\": \"rgba(136, 67, 67, 0.6)\",\n    \"color-stuck-red\": \"#e8697d\",\n    \"color-stuck-red-hover\": \"#ad3f51\",\n    \"color-stuck-red-selected\": \"#792a36\",\n    \"color-dark-red\": \"#c95c76\",\n    \"color-dark-red-hover\": \"#92334c\",\n    \"color-dark-red-selected\": \"#662232\",\n    \"color-sofia_pink\": \"#ff44a1\",\n    \"color-sofia_pink-hover\": \"#c21e71\",\n    \"color-sofia_pink-selected\": \"#88134d\",\n    \"color-lipstick\": \"#ff7bd0\",\n    \"color-lipstick-hover\": \"#c24e9a\",\n    \"color-lipstick-selected\": \"#88356a\",\n    \"color-bubble\": \"#fbb4f4\",\n    \"color-bubble-hover\": \"#be80ba\",\n    \"color-bubble-selected\": \"#855981\",\n    \"color-purple\": \"#b57de3\",\n    \"color-purple-hover\": \"#8050ab\",\n    \"color-purple-selected\": \"#593776\",\n    \"color-dark_purple\": \"#936fda\",\n    \"color-dark_purple-hover\": \"#6344a3\",\n    \"color-dark_purple-selected\": \"#442e71\",\n    \"color-berry\": \"#9862a1\",\n    \"color-berry-hover\": \"#673971\",\n    \"color-berry-selected\": \"#47264d\",\n    \"color-dark_indigo\": \"#6129ff\",\n    \"color-dark_indigo-hover\": \"#4c18dc\",\n    \"color-dark_indigo-selected\": \"#3c13ae\",\n    \"color-indigo\": \"#777ae5\",\n    \"color-indigo-hover\": \"#4b4ead\",\n    \"color-indigo-selected\": \"#333578\",\n    \"color-navy\": \"#5684c5\",\n    \"color-navy-hover\": \"#3468b2\",\n    \"color-navy-selected\": \"#24508f\",\n    \"color-bright-blue\": \"#79affd\",\n    \"color-bright-blue-hover\": \"#4c7cc1\",\n    \"color-bright-blue-selected\": \"#345686\",\n    \"color-dark-blue\": \"#339ecd\",\n    \"color-dark-blue-hover\": \"#0f6d97\",\n    \"color-dark-blue-selected\": \"#094b69\",\n    \"color-aquamarine\": \"#71d6d1\",\n    \"color-aquamarine-hover\": \"#469e9b\",\n    \"color-aquamarine-selected\": \"#2f6e6b\",\n    \"color-chili-blue\": \"#85d6ff\",\n    \"color-chili-blue-hover\": \"#569ec3\",\n    \"color-chili-blue-selected\": \"#3b6e88\",\n    \"color-river\": \"#86b4ca\",\n    \"color-river-hover\": \"#588095\",\n    \"color-river-selected\": \"#3c5967\",\n    \"color-winter\": \"#aebdca\",\n    \"color-winter-hover\": \"#7b8895\",\n    \"color-winter-selected\": \"#555f67\",\n    \"color-explosive\": \"#d0d0d0\",\n    \"color-explosive-hover\": \"#98999a\",\n    \"color-explosive-selected\": \"#6a6a6a\",\n    \"color-american_gray\": \"#999999\",\n    \"color-american_gray-hover\": \"#69696a\",\n    \"color-american_gray-selected\": \"#494949\",\n    \"color-blackish\": \"#7a7a7a\",\n    \"color-blackish-hover\": \"#525252\",\n    \"color-blackish-selected\": \"#383838\",\n    \"color-brown\": \"#99756c\",\n    \"color-brown-hover\": \"#684943\",\n    \"color-brown-selected\": \"#48322c\",\n    \"color-orchid\": \"#e190c0\",\n    \"color-orchid-hover\": \"#b4739a\",\n    \"color-orchid-selected\": \"#7e516c\",\n    \"color-tan\": \"#bdab95\",\n    \"color-tan-hover\": \"#978977\",\n    \"color-tan-selected\": \"#6a6053\",\n    \"color-sky\": \"#b4e9f8\",\n    \"color-sky-hover\": \"#90bac6\",\n    \"color-sky-selected\": \"#65828b\",\n    \"color-coffee\": \"#ca9a8b\",\n    \"color-coffee-hover\": \"#a27b6f\",\n    \"color-coffee-selected\": \"#71564e\",\n    \"color-royal\": \"#5591ea\",\n    \"color-royal-hover\": \"#4474bb\",\n    \"color-royal-selected\": \"#305183\",\n    \"color-teal\": \"#4a8f98\",\n    \"color-teal-hover\": \"#347179\",\n    \"color-teal-selected\": \"#245960\",\n    \"color-lavender\": \"#cab9fa\",\n    \"color-lavender-hover\": \"#a294c8\",\n    \"color-lavender-selected\": \"#71688c\",\n    \"color-steel\": \"#bacbed\",\n    \"color-steel-hover\": \"#95a2be\",\n    \"color-steel-selected\": \"#687185\",\n    \"color-lilac\": \"#687185\",\n    \"color-lilac-hover\": \"#8e8a9f\",\n    \"color-lilac-selected\": \"#63616f\",\n    \"color-pecan\": \"#806363\",\n    \"color-pecan-hover\": \"#674c4c\",\n    \"color-pecan-selected\": \"#513939\",\n    \"color-dark_marble\": \"#f1f1f1\",\n    \"color-marble\": \"#f7f7f7\",\n    \"color-gainsboro\": \"#e1e1e1\",\n    \"color-extra_light_gray\": \"#edeef0\",\n    \"color-glitter\": \"#d9f0ff\",\n    \"color-ultra_light_gray\": \"#ebebeb\",\n    \"color-very_light_gray\": \"#a1a1a1\",\n    \"color-jaco_gray\": \"#9699a6\",\n    \"color-storm_gray\": \"#6b6d77\",\n    \"color-trolley-grey\": \"#757575\",\n    \"color-basic_light_blue\": \"#c7e6fa\",\n    \"color-light_blue\": \"#61caf7\",\n    \"color-turquoise\": \"#66ccff\",\n    \"color-aqua\": \"#00d1d1\",\n    \"color-live_blue\": \"#009aff\",\n    \"color-jeans\": \"#597bfc\",\n    \"color-burned_eggplant\": \"#181d37\",\n    \"color-light-pink\": \"#ff5ac4\",\n    \"color-dark-pink\": \"#ff007f\",\n    \"color-dark_red\": \"#bb3354\",\n    \"color-yellow\": \"#ffcb00\",\n    \"color-mustered\": \"#cab641\",\n    \"color-orange\": \"#fdab3d\",\n    \"color-lime-green\": \"#9cd326\",\n    \"color-jade\": \"#03c875\",\n    \"color-green-haze\": \"#00a359\",\n    \"color-grass-green\": \"#037f4c\",\n    \"color-amethyst\": \"#9d50dd\",\n    \"color-dark-purple\": \"#784bd1\",\n    \"color-blue_links\": \"#007eb5\",\n    \"color-blue-links\": \"#007eb5\",\n    \"color-private\": \"#f65f7c\",\n    \"color-public\": \"#009aff\",\n    \"color-board_views_grey\": \"#6e6f8f\",\n    \"color-board_views_grey_hover\": \"#b2b3d0\",\n    \"color-board_views_blue\": \"#1c1f3b\",\n    \"color-board_views_blue_secondary\": \"#363a52\",\n    \"color-border_light_gray\": \"#f5f6f8\",\n    \"color-brand-blue\": \"#00a9ff\",\n    \"color-brand-charcoal\": \"#2b2c5c\",\n    \"color-brand-gold\": \"#ffcc00\",\n    \"color-brand-green\": \"#11dd80\",\n    \"color-brand-iris\": \"#595ad4\",\n    \"color-brand-light-blue\": \"#00cff4\",\n    \"color-brand-malachite\": \"#00cd6f\",\n    \"color-brand-purple\": \"#a358d0\",\n    \"color-brand-red\": \"#f74875\",\n    \"color-deadline_upcoming_indication\": \"#5d6387\",\n    \"color-default_group_color\": \"#579bfc\",\n    \"color-form_btn_hover\": \"#0083d9\",\n    \"color-form_purple\": \"#575c96\",\n    \"color-highlight\": \"#dff0ff\",\n    \"color-green_shadow\": \"#00c875\",\n    \"color-green-shadow\": \"#00c875\",\n    \"color-red_shadow\": \"#df2f4a\",\n    \"color-red-shadow\": \"#df2f4a\",\n    \"color-pulse_bg\": \"#f0f0f0\",\n    \"color-pulse_text_color\": \"#333333\",\n    \"color-placholder_gray\": \"#d8d8d8\",\n    \"color-placeholder_light_gray\": \"#efefef\",\n    \"color-excel-green\": \"#207245\",\n    \"color-media-blue\": \"#2ea2e9\",\n    \"color-pdf-red\": \"#bb0706\",\n    \"color-ppt-orange\": \"#d64e2a\",\n    \"color-word-blue\": \"#2a5699\",\n    \"color-zip-orange\": \"#e4901c\",\n    \"color-like_red\": \"#fb275d\",\n    \"color-scrollbar_gray\": \"#b2b2b2\",\n    \"color-timeline_grid_blue\": \"#454662\",\n    \"color-timeline_blue\": \"#1c1f3b\",\n    \"color-highlight_blue-rgb\": \"204, 229, 255\",\n    \"color-snow_white-with-opacity\": \"rgba(255, 255, 255, 0.4)\",\n    \"color-wolf_gray-with-opacity\": \"rgba(195, 198, 212, 0.1)\",\n    \"color-asphalt-with-opacity\": \"rgba(103, 104, 121, 0.1)\",\n    \"primary-on-secondary-color\": \"#0073ea\",\n    \"primary-hover-on-secondary-color\": \"#0060b9\",\n    \"primary-selected-color-rgb\": \"19, 55, 116\",\n    \"primary-selected-on-secondary-color\": \"#133774\",\n    \"primary-text-on-secondary-color\": \"#eeeeee\",\n    \"text-color-on-primary-with-opacity\": \"rgba(255, 255, 255, 0.4)\",\n    \"secondary-text-on-secondary-color\": \"#9699a6\",\n    \"placeholder-color-with-opacity\": \"rgba(170, 170, 170, 0.1)\",\n    \"placeholder-on-secondary-color\": \"#aaaaaa\",\n    \"icon-on-secondary-color\": \"#aaaaaa\",\n    \"link-on-secondary-color\": \"#69a7ef\",\n    \"label-background-color\": \"#404b69\",\n    \"label-background-on-secondary-color\": \"#404b69\",\n    \"primary-background-color-rgb\": \"17, 17, 17\",\n    \"primary-background-hover-on-secondary-color\": \"#636363\",\n    \"modal-background-color\": \"#181b34\",\n    \"secondary-background-color-rgb\": \"44, 44, 44\",\n    \"disabled-background-on-secondary-color\": \"#3a3a3a\",\n    \"ui-border-on-secondary-color\": \"#8d8d8d\",\n    \"layout-border-on-secondary-color\": \"#636363\",\n    \"dark-background-color\": \"#2c2c2c\",\n    \"dark-background-on-secondary-color\": \"#4b4e69\",\n    \"dialog-background-color\": \"#2c2c2c\"\n  },\n  \"hacker_theme-app-theme\": {\n    \"primary-color\": \"#fe78c6\",\n    \"primary-hover-color\": \"#fe5ab9\",\n    \"primary-selected-color\": \"#9f4077\",\n    \"primary-selected-hover-color\": \"#0d2e65\",\n    \"primary-highlighted-color\": \"#0b2858\",\n    \"primary-surface-color\": \"#111111\",\n    \"primary-text-color\": \"#d5d8df\",\n    \"secondary-text-color\": \"#9699a6\",\n    \"text-color-on-inverted\": \"#323338\",\n    \"text-color-on-primary\": \"#ffffff\",\n    \"inverted-color-background\": \"#ffffff\",\n    \"fixed-dark-color\": \"#323338\",\n    \"fixed-light-color\": \"#ffffff\",\n    \"primary-background-color\": \"#282a36\",\n    \"primary-background-hover-color\": \"#4b4e69\",\n    \"secondary-background-color\": \"#30324e\",\n    \"allgrey-background-color\": \"#282a36\",\n    \"backdrop-color\": \"rgba(33, 33, 33, 0.7)\",\n    \"ui-border-color\": \"#797e93\",\n    \"ui-background-color\": \"#4b4e69\",\n    \"ui-background-hover-color\": \"#3b3b3b\",\n    \"layout-border-color\": \"#414458\",\n    \"placeholder-color\": \"#c3c6d4\",\n    \"icon-color\": \"#c3c6d4\",\n    \"disabled-background-color\": \"#3a3a3a\",\n    \"link-color\": \"#bd93f9\",\n    \"brand-color\": \"#fe78c6\",\n    \"brand-hover-color\": \"#fe5ab9\",\n    \"brand-selected-color\": \"#9f4077\",\n    \"brand-selected-hover-color\": \"#0d2e65\",\n    \"positive-color\": \"#50fa7b\",\n    \"positive-color-hover\": \"#007038\",\n    \"positive-color-selected\": \"#26503e\",\n    \"positive-color-selected-hover\": \"#194733\",\n    \"negative-color\": \"#ff5555\",\n    \"negative-color-hover\": \"#b63546\",\n    \"negative-color-selected\": \"#642830\",\n    \"negative-color-selected-hover\": \"#5a2027\",\n    \"warning-color\": \"#ffcb00\",\n    \"warning-color-hover\": \"#eaaa15\",\n    \"warning-color-selected\": \"#503e02\",\n    \"warning-color-selected-hover\": \"#402f00\",\n    \"color-highlight_blue\": \"#cce5ff\",\n    \"color-basic_blue\": \"#0073ea\",\n    \"color-dark_blue\": \"#0060b9\",\n    \"color-bazooka\": \"#f65f7c\",\n    \"color-snow_white\": \"#ffffff\",\n    \"color-riverstone_gray\": \"#f6f7fb\",\n    \"color-ui_grey\": \"#dcdfec\",\n    \"color-wolf_gray\": \"#c3c6d4\",\n    \"color-asphalt\": \"#676879\",\n    \"color-mud_black\": \"#323338\",\n    \"color-black\": \"#000000\",\n    \"color-success\": \"#50fa7b\",\n    \"color-success-hover\": \"#007038\",\n    \"color-success-highlight\": \"#bbdbc9\",\n    \"color-error\": \"#ff5555\",\n    \"color-error-hover\": \"#b63546\",\n    \"color-error-highlight\": \"#f4c3cb\",\n    \"color-link_color\": \"#1f76c2\",\n    \"color-surface\": \"#212121\",\n    \"grey-background-color\": \"#282a36\",\n    \"text-color-on-brand\": \"#ffffff\",\n    \"color-grass_green\": \"#359970\",\n    \"color-grass_green-hover\": \"#116846\",\n    \"color-grass_green-selected\": \"#0a482e\",\n    \"color-done-green\": \"#33d391\",\n    \"color-done-green-hover\": \"#0f9b63\",\n    \"color-done-green-selected\": \"#096c43\",\n    \"color-done-green-selected-with-opacity\": \"rgba(9, 108, 67, 0.6)\",\n    \"color-bright-green\": \"#b0dc51\",\n    \"color-bright-green-hover\": \"#7ca32b\",\n    \"color-bright-green-selected\": \"#56721b\",\n    \"color-saladish\": \"#d5c567\",\n    \"color-saladish-hover\": \"#9d8f3e\",\n    \"color-saladish-selected\": \"#6d6329\",\n    \"color-egg_yolk\": \"#ffd533\",\n    \"color-egg_yolk-hover\": \"#c29e11\",\n    \"color-egg_yolk-selected\": \"#886e09\",\n    \"color-egg_yolk-rgb\": \"255, 213, 51\",\n    \"color-working_orange\": \"#fdbc64\",\n    \"color-working_orange-hover\": \"#c0873c\",\n    \"color-working_orange-selected\": \"#875e27\",\n    \"color-dark-orange\": \"#ff6d3b\",\n    \"color-dark-orange-hover\": \"#c25531\",\n    \"color-dark-orange-selected\": \"#883a1f\",\n    \"color-peach\": \"#ffbdbd\",\n    \"color-peach-hover\": \"#c2888a\",\n    \"color-peach-selected\": \"#885f5f\",\n    \"color-sunset\": \"#ff9191\",\n    \"color-sunset-hover\": \"#c26163\",\n    \"color-sunset-selected\": \"#884343\",\n    \"color-sunset-selected-with-opacity\": \"rgba(136, 67, 67, 0.6)\",\n    \"color-stuck-red\": \"#e8697d\",\n    \"color-stuck-red-hover\": \"#ad3f51\",\n    \"color-stuck-red-selected\": \"#792a36\",\n    \"color-dark-red\": \"#c95c76\",\n    \"color-dark-red-hover\": \"#92334c\",\n    \"color-dark-red-selected\": \"#662232\",\n    \"color-sofia_pink\": \"#ff44a1\",\n    \"color-sofia_pink-hover\": \"#c21e71\",\n    \"color-sofia_pink-selected\": \"#88134d\",\n    \"color-lipstick\": \"#ff7bd0\",\n    \"color-lipstick-hover\": \"#c24e9a\",\n    \"color-lipstick-selected\": \"#88356a\",\n    \"color-bubble\": \"#fbb4f4\",\n    \"color-bubble-hover\": \"#be80ba\",\n    \"color-bubble-selected\": \"#855981\",\n    \"color-purple\": \"#b57de3\",\n    \"color-purple-hover\": \"#8050ab\",\n    \"color-purple-selected\": \"#593776\",\n    \"color-dark_purple\": \"#936fda\",\n    \"color-dark_purple-hover\": \"#6344a3\",\n    \"color-dark_purple-selected\": \"#442e71\",\n    \"color-berry\": \"#9862a1\",\n    \"color-berry-hover\": \"#673971\",\n    \"color-berry-selected\": \"#47264d\",\n    \"color-dark_indigo\": \"#6645a9\",\n    \"color-dark_indigo-hover\": \"#3c1f78\",\n    \"color-dark_indigo-selected\": \"#291452\",\n    \"color-indigo\": \"#777ae5\",\n    \"color-indigo-hover\": \"#4b4ead\",\n    \"color-indigo-selected\": \"#333578\",\n    \"color-navy\": \"#4e73a7\",\n    \"color-navy-hover\": \"#274776\",\n    \"color-navy-selected\": \"#193151\",\n    \"color-bright-blue\": \"#79affd\",\n    \"color-bright-blue-hover\": \"#4c7cc1\",\n    \"color-bright-blue-selected\": \"#345686\",\n    \"color-dark-blue\": \"#339ecd\",\n    \"color-dark-blue-hover\": \"#0f6d97\",\n    \"color-dark-blue-selected\": \"#094b69\",\n    \"color-aquamarine\": \"#71d6d1\",\n    \"color-aquamarine-hover\": \"#469e9b\",\n    \"color-aquamarine-selected\": \"#2f6e6b\",\n    \"color-chili-blue\": \"#85d6ff\",\n    \"color-chili-blue-hover\": \"#569ec3\",\n    \"color-chili-blue-selected\": \"#3b6e88\",\n    \"color-river\": \"#86b4ca\",\n    \"color-river-hover\": \"#588095\",\n    \"color-river-selected\": \"#3c5967\",\n    \"color-winter\": \"#aebdca\",\n    \"color-winter-hover\": \"#7b8895\",\n    \"color-winter-selected\": \"#555f67\",\n    \"color-explosive\": \"#d0d0d0\",\n    \"color-explosive-hover\": \"#98999a\",\n    \"color-explosive-selected\": \"#6a6a6a\",\n    \"color-american_gray\": \"#999999\",\n    \"color-american_gray-hover\": \"#69696a\",\n    \"color-american_gray-selected\": \"#494949\",\n    \"color-blackish\": \"#5c5c5c\",\n    \"color-blackish-hover\": \"#222222\",\n    \"color-blackish-selected\": \"#111111\",\n    \"color-brown\": \"#99756c\",\n    \"color-brown-hover\": \"#684943\",\n    \"color-brown-selected\": \"#48322c\",\n    \"color-orchid\": \"#e190c0\",\n    \"color-orchid-hover\": \"#b4739a\",\n    \"color-orchid-selected\": \"#7e516c\",\n    \"color-tan\": \"#bdab95\",\n    \"color-tan-hover\": \"#978977\",\n    \"color-tan-selected\": \"#6a6053\",\n    \"color-sky\": \"#b4e9f8\",\n    \"color-sky-hover\": \"#90bac6\",\n    \"color-sky-selected\": \"#65828b\",\n    \"color-coffee\": \"#ca9a8b\",\n    \"color-coffee-hover\": \"#a27b6f\",\n    \"color-coffee-selected\": \"#71564e\",\n    \"color-royal\": \"#5591ea\",\n    \"color-royal-hover\": \"#4474bb\",\n    \"color-royal-selected\": \"#305183\",\n    \"color-teal\": \"#457b82\",\n    \"color-teal-hover\": \"#376268\",\n    \"color-teal-selected\": \"#274549\",\n    \"color-lavender\": \"#cab9fa\",\n    \"color-lavender-hover\": \"#a294c8\",\n    \"color-lavender-selected\": \"#71688c\",\n    \"color-steel\": \"#bacbed\",\n    \"color-steel-hover\": \"#95a2be\",\n    \"color-steel-selected\": \"#687185\",\n    \"color-lilac\": \"#687185\",\n    \"color-lilac-hover\": \"#8e8a9f\",\n    \"color-lilac-selected\": \"#63616f\",\n    \"color-pecan\": \"#786565\",\n    \"color-pecan-hover\": \"#605151\",\n    \"color-pecan-selected\": \"#433939\",\n    \"color-dark_marble\": \"#f1f1f1\",\n    \"color-marble\": \"#f7f7f7\",\n    \"color-gainsboro\": \"#e1e1e1\",\n    \"color-extra_light_gray\": \"#edeef0\",\n    \"color-glitter\": \"#d9f0ff\",\n    \"color-ultra_light_gray\": \"#ebebeb\",\n    \"color-very_light_gray\": \"#a1a1a1\",\n    \"color-jaco_gray\": \"#9699a6\",\n    \"color-storm_gray\": \"#6b6d77\",\n    \"color-trolley-grey\": \"#757575\",\n    \"color-basic_light_blue\": \"#c7e6fa\",\n    \"color-light_blue\": \"#61caf7\",\n    \"color-turquoise\": \"#66ccff\",\n    \"color-aqua\": \"#00d1d1\",\n    \"color-live_blue\": \"#009aff\",\n    \"color-jeans\": \"#597bfc\",\n    \"color-burned_eggplant\": \"#181d37\",\n    \"color-light-pink\": \"#ff5ac4\",\n    \"color-dark-pink\": \"#ff007f\",\n    \"color-dark_red\": \"#bb3354\",\n    \"color-yellow\": \"#ffcb00\",\n    \"color-mustered\": \"#cab641\",\n    \"color-orange\": \"#fdab3d\",\n    \"color-lime-green\": \"#9cd326\",\n    \"color-jade\": \"#03c875\",\n    \"color-green-haze\": \"#00a359\",\n    \"color-grass-green\": \"#037f4c\",\n    \"color-amethyst\": \"#9d50dd\",\n    \"color-dark-purple\": \"#784bd1\",\n    \"color-blue_links\": \"#007eb5\",\n    \"color-blue-links\": \"#007eb5\",\n    \"color-private\": \"#f65f7c\",\n    \"color-public\": \"#009aff\",\n    \"color-board_views_grey\": \"#6e6f8f\",\n    \"color-board_views_grey_hover\": \"#b2b3d0\",\n    \"color-board_views_blue\": \"#1c1f3b\",\n    \"color-board_views_blue_secondary\": \"#363a52\",\n    \"color-border_light_gray\": \"#f5f6f8\",\n    \"color-brand-blue\": \"#00a9ff\",\n    \"color-brand-charcoal\": \"#2b2c5c\",\n    \"color-brand-gold\": \"#ffcc00\",\n    \"color-brand-green\": \"#11dd80\",\n    \"color-brand-iris\": \"#595ad4\",\n    \"color-brand-light-blue\": \"#00cff4\",\n    \"color-brand-malachite\": \"#00cd6f\",\n    \"color-brand-purple\": \"#a358d0\",\n    \"color-brand-red\": \"#f74875\",\n    \"color-deadline_upcoming_indication\": \"#5d6387\",\n    \"color-default_group_color\": \"#579bfc\",\n    \"color-form_btn_hover\": \"#0083d9\",\n    \"color-form_purple\": \"#575c96\",\n    \"color-highlight\": \"#dff0ff\",\n    \"color-green_shadow\": \"#00c875\",\n    \"color-green-shadow\": \"#00c875\",\n    \"color-red_shadow\": \"#df2f4a\",\n    \"color-red-shadow\": \"#df2f4a\",\n    \"color-pulse_bg\": \"#f0f0f0\",\n    \"color-pulse_text_color\": \"#333333\",\n    \"color-placholder_gray\": \"#d8d8d8\",\n    \"color-placeholder_light_gray\": \"#efefef\",\n    \"color-excel-green\": \"#207245\",\n    \"color-media-blue\": \"#2ea2e9\",\n    \"color-pdf-red\": \"#bb0706\",\n    \"color-ppt-orange\": \"#d64e2a\",\n    \"color-word-blue\": \"#2a5699\",\n    \"color-zip-orange\": \"#e4901c\",\n    \"color-like_red\": \"#fb275d\",\n    \"color-scrollbar_gray\": \"#b2b2b2\",\n    \"color-timeline_grid_blue\": \"#454662\",\n    \"color-timeline_blue\": \"#1c1f3b\",\n    \"color-highlight_blue-rgb\": \"204, 229, 255\",\n    \"color-snow_white-with-opacity\": \"rgba(255, 255, 255, 0.4)\",\n    \"color-wolf_gray-with-opacity\": \"rgba(195, 198, 212, 0.1)\",\n    \"color-asphalt-with-opacity\": \"rgba(103, 104, 121, 0.1)\",\n    \"primary-on-secondary-color\": \"#fe78c6\",\n    \"primary-hover-on-secondary-color\": \"#fe5ab9\",\n    \"primary-selected-color-rgb\": \"159, 64, 119\",\n    \"primary-selected-on-secondary-color\": \"#9f4077\",\n    \"primary-text-on-secondary-color\": \"#d5d8df\",\n    \"text-color-on-primary-with-opacity\": \"rgba(255, 255, 255, 0.4)\",\n    \"secondary-text-on-secondary-color\": \"#9699a6\",\n    \"placeholder-color-with-opacity\": \"rgba(195, 198, 212, 0.1)\",\n    \"placeholder-on-secondary-color\": \"#c3c6d4\",\n    \"icon-on-secondary-color\": \"#c3c6d4\",\n    \"link-on-secondary-color\": \"#bd93f9\",\n    \"label-background-color\": \"#404b69\",\n    \"label-background-on-secondary-color\": \"#404b69\",\n    \"primary-background-color-rgb\": \"40, 42, 54\",\n    \"primary-background-hover-on-secondary-color\": \"#4b4e69\",\n    \"modal-background-color\": \"#282a36\",\n    \"secondary-background-color-rgb\": \"48, 50, 78\",\n    \"disabled-background-on-secondary-color\": \"#3a3a3a\",\n    \"ui-border-on-secondary-color\": \"#797e93\",\n    \"layout-border-on-secondary-color\": \"#414458\",\n    \"dark-background-color\": \"#303241\",\n    \"dark-background-on-secondary-color\": \"#595959\",\n    \"dialog-background-color\": \"#30324e\"\n  }\n}"
  },
  {
    "path": "packages/style/src/functions/_camelize.scss",
    "content": "// FUNCTIONS: Camelize string\n\n// Modules imports\n@use \"sass:string\";\n\n// @arguments [string] $string\n// @return camelcase string\n@function camelize($string) {\n  $progress: $string;\n  $result: \"\";\n  $exclude: \" \", \"-\", \"–\", \"—\", \"_\", \",\", \";\", \":\", \".\";\n\n  @while str-length($progress) > 0 {\n    $char: string.slice($progress, 1, 1);\n\n    @if contain($exclude, $char) {\n      $progress: capitalize(string.slice($progress, 2, 2)) + string.slice($progress, 3);\n    } @else {\n      $result: $result + $char;\n      $progress: string.slice($progress, 2);\n    }\n  }\n\n  @return $result;\n}\n"
  },
  {
    "path": "packages/style/src/functions/_capitalize.scss",
    "content": "// MIXINS: Capitalize\n// - Helper function\n\n// Modules imports\n@use \"sass:string\";\n\n// @arguments: $string\n// @return capitalize string\n@function capitalize($string) {\n  @return to-upper-case(string.slice($string, 1, 1)) + string.slice($string, 2);\n}\n"
  },
  {
    "path": "packages/style/src/functions/_contain.scss",
    "content": "// FUNCTIONS: Contain\n// - Helper function\n// @arguments [list] $list\n// @arguments [$value] $value\n// Return whether `$value` is contained in `$list` , Boolean\n@function contain($list, $value) {\n  @return not not index($list, $value);\n}\n"
  },
  {
    "path": "packages/style/src/functions/_extract-rgb.scss",
    "content": "// MIXINS: Extract Rgb\n// @arguments $color (can be hardcoded or $color)\n// @return: comma separated RGB values\n// Use: We use \"extract-rgb\" when we want to return a comma separated list of rgb values from a color.\n// - We use it in some of our token assignments and their custom-properties output.\n@function extract-rgb($color) {\n  @return red($color), green($color), blue($color);\n}\n"
  },
  {
    "path": "packages/style/src/functions/_map-collect.scss",
    "content": "// MIXINS: Map Collect\n\n// Modules imports\n@use \"sass:map\";\n\n// @arguments: multiple coma separated $maps.\n// @return: a single map with merged values.\n// Use: we use \"map-collect\" to merge maps from different scopes.\n// - We assume there will be no key duplication since scopes are separated.\n@function map-collect($maps...) {\n  $collection: ();\n\n  @each $map in $maps {\n    $collection: map.merge($collection, $map);\n  }\n  @return $collection;\n}\n"
  },
  {
    "path": "packages/style/src/functions/index.scss",
    "content": "@import \"camelize\";\n@import \"capitalize\";\n@import \"contain\";\n@import \"map-collect\";\n@import \"extract-rgb\";\n"
  },
  {
    "path": "packages/style/src/index.scss",
    "content": "@import \"motion\";\n@import \"spacing\";\n@import \"borders\";\n@import \"border-radius\";\n@import \"common\";\n@import \"typography\";\n@import \"themes\";\n"
  },
  {
    "path": "packages/style/src/mixins/_common.scss",
    "content": "$expand-animation-timing: cubic-bezier(0, 0, 0.35, 1);\n\n// Grid auto fit sizes\n$grid-auto-fit-cell-width-small: 120px;\n$grid-auto-fit-cell-width-medium: 180px;\n$grid-auto-fit-cell-width-large: 240px;\n$grid-auto-fit-cell-width-xl: 300px;\n\n@mixin hidden-element() {\n  opacity: 0;\n  width: 0;\n  height: 0;\n  position: absolute;\n}\n\n// Grid auto fit\n// - This mixin defines a grid with auto fit repeat cells using min-max funtion.\n// -- This allows grid to accommodate container width without media queries.\n// -- it uses a repeat grid function with auto fix and minmax.\n// -- grid adaptation is due to the min value along with auto-fit and 1fr max value.\n\n// @params:\n// - $grid-gap: null , defines grid \"gap\" attribute.\n// - $grid-column-gap: null,  defines grid \"column-gap\" attribute.\n// - $grid-row-gap: null,  defines grid \"row-gap\" attribute.\n// - $grid-cell-min-width: {mandatory}, defined min value in for grid-template-columns\n// - $grid-cell-array-calc: {mandatory}, defined max num of items using calc\n\n@mixin grid-auto-fit(\n  $grid-gap: null,\n  $grid-column-gap: null,\n  $grid-row-gap: null,\n  $grid-cell-min-width,\n  $grid-cell-array-calc: null,\n  $important: false\n) {\n  display: grid;\n  @if $important {\n    grid-template-columns: repeat(\n      auto-fit,\n      minmax(clamp(#{$grid-cell-array-calc}, #{$grid-cell-min-width}, 100%), 1fr)\n    ) !important; /* stylelint-disable-line declaration-no-important */\n    gap: $grid-gap !important; /* stylelint-disable-line declaration-no-important */\n    column-gap: $grid-column-gap !important; /* stylelint-disable-line declaration-no-important */\n    row-gap: $grid-row-gap !important; /* stylelint-disable-line declaration-no-important */\n  } @else {\n    grid-template-columns: repeat(\n      auto-fit,\n      minmax(clamp(#{$grid-cell-array-calc}, #{$grid-cell-min-width}, 100%), 1fr)\n    );\n    gap: $grid-gap;\n    column-gap: $grid-column-gap;\n    row-gap: $grid-row-gap;\n  }\n}\n\n@mixin scroller($width: 4px, $height: 6px, $color: var(--ui-border-color)) {\n  &::-webkit-scrollbar {\n    width: $width;\n    height: $height;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: $color;\n    border-radius: 4px;\n  }\n}\n"
  },
  {
    "path": "packages/style/src/mixins/_states.scss",
    "content": "@mixin disabled {\n  border-color: var(--disabled-background-color);\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n\n  &:hover {\n    background-color: transparent;\n  }\n}\n\n@mixin reset-button {\n  border: none;\n  margin: 0;\n  padding: 0;\n  width: auto;\n  overflow: visible;\n  background: transparent;\n\n  /* inherit font & color from ancestor */\n  color: inherit;\n  font: inherit;\n\n  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */\n  line-height: normal;\n\n  /* Corrects font smoothing for webkit */\n  -webkit-font-smoothing: inherit;\n  -moz-osx-font-smoothing: inherit;\n\n  /* Corrects inability to style clickable `input` types in iOS */\n  appearance: none;\n\n  @include focus-style;\n}\n\n@mixin focus-style($focus-radius: 4px) {\n  &:focus-visible,\n  &.focus-visible {\n    outline: none;\n    z-index: 11;\n    border-radius: $focus-radius;\n    box-shadow: 0 0 0 3px hsl(209deg 100% 50% / 50%), 0 0 0 1px var(--primary-hover-color) inset;\n  }\n\n  &:focus:not(.focus-visible) {\n    outline: none;\n  }\n}\n\n@mixin focus-style-inset($focus-radius: 4px, $shadow-depth: 3px) {\n  &:focus-visible,\n  &.focus-visible {\n    @include focus-style-css-inset($focus-radius, $shadow-depth);\n  }\n\n  &:focus:not(.focus-visible) {\n    outline: none;\n  }\n}\n\n@mixin focus-style-on-primary($focus-radius: 4px) {\n  &:focus-visible,\n  &.focus-visible {\n    @include focus-style-css-on-primary($focus-radius);\n  }\n\n  &:focus:not(.focus-visible) {\n    outline: none;\n  }\n}\n\n@mixin focus-style-base($focus-radius: 4px) {\n  outline: none;\n  z-index: 11;\n  border-radius: $focus-radius;\n}\n\n@mixin focus-style-css($focus-radius: 4px, $shadow-depth: 3px) {\n  @include focus-style-base($focus-radius);\n\n  box-shadow: 0 0 0 $shadow-depth hsl(209deg 100% 50% / 50%), 0 0 0 1px var(--primary-hover-color) inset;\n}\n\n@mixin focus-style-css-inset($focus-radius: 4px, $shadow-depth: 3px) {\n  @include focus-style-base($focus-radius);\n\n  box-shadow: 0 0 0 $shadow-depth hsl(209deg 100% 50% / 50%) inset, 0 0 0 1px var(--primary-hover-color) inset;\n}\n\n@mixin focus-style-css-on-primary($focus-radius: 4px) {\n  @include focus-style-base($focus-radius);\n\n  box-shadow: 0 0 0 3px var(--text-color-on-primary-with-opacity), 0 0 0 1px var(--text-color-on-primary) inset;\n}\n\n@mixin clickable() {\n  @include focus-style;\n  cursor: pointer;\n}\n\n@mixin clickable-disabled() {\n  cursor: default;\n}\n\n/* stylelint-disable */\n@mixin clickable-disable-text-selection() {\n  -webkit-touch-callout: none; /* iOS Safari */\n  -webkit-user-select: none; /* Safari */\n  -khtml-user-select: none; /* Konqueror HTML */\n  -moz-user-select: none; /* Old versions of Firefox */\n  -ms-user-select: none; /* Internet Explorer/Edge */\n  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */\n}\n/* stylelint-enable */\n"
  },
  {
    "path": "packages/style/src/mixins/_typography.scss",
    "content": "@mixin vibe-text($type-prefix, $weight-type) {\n  font: var(--font-#{$type-prefix}-#{$weight-type});\n}\n\n@mixin vibe-heading($type-prefix, $weight-type) {\n  font: var(--font-#{$type-prefix}-#{$weight-type});\n  letter-spacing: var(--letter-spacing-#{$type-prefix}-#{$weight-type});\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n\n@mixin line-clamp($lines: 1le) {\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: $lines;\n  -webkit-box-orient: vertical;\n  white-space: initial; // doesn't work with white-space: no-wrap\n}\n\n@mixin ellipsis {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n@mixin smoothing-text {\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n"
  },
  {
    "path": "packages/style/src/mixins/index.scss",
    "content": "@import \"common\";\n@import \"states\";\n@import \"typography\";\n"
  },
  {
    "path": "packages/style/src/motion.scss",
    "content": ":root {\n  --motion-productive-short: 70ms;\n  --motion-productive-medium: 100ms;\n  --motion-productive-long: 150ms;\n  --motion-expressive-short: 250ms;\n  --motion-expressive-long: 400ms;\n  --motion-timing-enter: cubic-bezier(0, 0, 0.35, 1);\n  --motion-timing-exit: cubic-bezier(0.4, 0, 1, 1);\n  --motion-timing-transition: cubic-bezier(0.4, 0, 0.2, 1);\n  --motion-timing-emphasize: cubic-bezier(0, 0, 0.2, 1.4);\n  --expand-animation-timing: var(--motion-timing-enter);\n}\n"
  },
  {
    "path": "packages/style/src/spacing.scss",
    "content": ":root {\n  --space-2: 2px;\n  --space-4: 4px;\n  --space-8: 8px;\n  --space-12: 12px;\n  --space-16: 16px;\n  --space-20: 20px;\n  --space-24: 24px;\n  --space-32: 32px;\n  --space-40: 40px;\n  --space-48: 48px;\n  --space-64: 64px;\n  --space-80: 80px;\n}\n"
  },
  {
    "path": "packages/style/src/themes/black-theme.scss",
    "content": ".black-app-theme {\n  --primary-color: #0073ea;\n  --primary-hover-color: #0060b9;\n  --primary-selected-color: #133774;\n  --primary-selected-hover-color: #0d2e65;\n  --primary-highlighted-color: #0b2858;\n  --primary-surface-color: #111111;\n\n  --primary-text-color: #eeeeee;\n  --secondary-text-color: #aaaaaa;\n  --text-color-on-inverted: #111111;\n  --text-color-on-primary: #ffffff;\n  --disabled-text-color: rgba(238, 238, 238, var(--disabled-component-opacity));\n  --inverted-color-background: #eeeeee;\n\n  --fixed-dark-color: #111111;\n  --fixed-light-color: #ffffff;\n\n  --primary-background-color: #111111;\n  --primary-background-hover-color: rgba(103, 104, 121, 0.3);\n  --secondary-background-color: #2c2c2c;\n  --allgrey-background-color: #2c2c2c;\n  --backdrop-color: rgba(33, 33, 33, 0.7);\n  --ui-border-color: #8d8d8d;\n  --ui-background-color: #4d4d4d;\n  --ui-background-hover-color: #3b3b3b;\n  --layout-border-color: #636363;\n\n  --placeholder-color: #aaaaaa;\n  --icon-color: #aaaaaa;\n  --disabled-background-color: #3a3a3a;\n  --link-color: #69a7ef;\n\n  --brand-color: #0073ea;\n  --brand-hover-color: #0060b9;\n  --brand-selected-color: #133774;\n  --brand-selected-hover-color: #0d2e65;\n\n  --positive-color: #00854d;\n  --positive-color-hover: #007038;\n  --positive-color-selected: #025231;\n  --positive-color-selected-hover: #194733;\n  --negative-color: #d83a52;\n  --negative-color-hover: #b63546;\n  --negative-color-selected: #642830;\n  --negative-color-selected-hover: #5a2027;\n  --warning-color: #ffcb00;\n  --warning-color-hover: #eaaa15;\n  --warning-color-selected: #503e02;\n  --warning-color-selected-hover: #402f00;\n\n  --text-color-on-brand: #ffffff;\n  --color-surface: #212121;\n  --grey-background-color: #111111;\n\n  --box-shadow-xs: 0px 4px 6px -4px #000000;\n  --box-shadow-small: 0px 4px 8px #000000;\n  --box-shadow-medium: 0px 6px 20px #000000;\n  --box-shadow-large: 0px 15px 50px #000000;\n\n  --color-grass_green-hover: #116846; /* stylelint-disable-line custom-property-pattern */\n  --color-grass_green-selected: #0a482e; /* stylelint-disable-line custom-property-pattern */\n  --color-done-green-hover: #0f9b63;\n  --color-done-green-selected: #096c43;\n  --color-done-green-selected-with-opacity: rgba(9, 108, 67, 0.6);\n  --color-bright-green-hover: #7ca32b;\n  --color-bright-green-selected: #56721b;\n  --color-saladish-hover: #9d8f3e;\n  --color-saladish-selected: #6d6329;\n  --color-egg_yolk-hover: #c29e11; /* stylelint-disable-line custom-property-pattern */\n  --color-egg_yolk-selected: #886e09; /* stylelint-disable-line custom-property-pattern */\n  --color-egg_yolk-rgb: 255, 213, 51; /* stylelint-disable-line custom-property-pattern */\n  --color-working_orange-hover: #c0873c; /* stylelint-disable-line custom-property-pattern */\n  --color-working_orange-selected: #875e27; /* stylelint-disable-line custom-property-pattern */\n  --color-dark-orange-hover: #c25531;\n  --color-dark-orange-selected: #883a1f;\n  --color-peach-hover: #c2888a;\n  --color-peach-selected: #885f5f;\n  --color-sunset-hover: #c26163;\n  --color-sunset-selected: #884343;\n  --color-sunset-selected-with-opacity: rgba(136, 67, 67, 0.6);\n  --color-stuck-red-hover: #ad3f51;\n  --color-stuck-red-selected: #792a36;\n  --color-dark-red-hover: #92334c;\n  --color-dark-red-selected: #662232;\n  --color-sofia_pink-hover: #c21e71; /* stylelint-disable-line custom-property-pattern */\n  --color-sofia_pink-selected: #88134d; /* stylelint-disable-line custom-property-pattern */\n  --color-lipstick-hover: #c24e9a;\n  --color-lipstick-selected: #88356a;\n  --color-bubble-hover: #be80ba;\n  --color-bubble-selected: #855981;\n  --color-purple-hover: #8050ab;\n  --color-purple-selected: #593776;\n  --color-dark_purple-hover: #6344a3; /* stylelint-disable-line custom-property-pattern */\n  --color-dark_purple-selected: #442e71; /* stylelint-disable-line custom-property-pattern */\n  --color-berry-hover: #673971;\n  --color-berry-selected: #47264d;\n  --color-dark_indigo: #6129ff; /* stylelint-disable-line custom-property-pattern */\n  --color-dark_indigo-hover: #4c18dc; /* stylelint-disable-line custom-property-pattern */\n  --color-dark_indigo-selected: #3c13ae; /* stylelint-disable-line custom-property-pattern */\n  --color-indigo-hover: #4b4ead;\n  --color-indigo-selected: #333578;\n  --color-navy: #5684c5;\n  --color-navy-hover: #3468b2;\n  --color-navy-selected: #24508f;\n  --color-bright-blue-hover: #4c7cc1;\n  --color-bright-blue-selected: #345686;\n  --color-dark-blue-hover: #0f6d97;\n  --color-dark-blue-selected: #094b69;\n  --color-aquamarine-hover: #469e9b;\n  --color-aquamarine-selected: #2f6e6b;\n  --color-chili-blue-hover: #569ec3;\n  --color-chili-blue-selected: #3b6e88;\n  --color-river-hover: #588095;\n  --color-river-selected: #3c5967;\n  --color-winter-hover: #7b8895;\n  --color-winter-selected: #555f67;\n  --color-explosive-hover: #98999a;\n  --color-explosive-selected: #6a6a6a;\n  --color-american_gray-hover: #69696a; /* stylelint-disable-line custom-property-pattern */\n  --color-american_gray-selected: #494949; /* stylelint-disable-line custom-property-pattern */\n  --color-blackish: #7a7a7a;\n  --color-blackish-hover: #525252;\n  --color-blackish-selected: #383838;\n  --color-brown-hover: #684943;\n  --color-brown-selected: #48322c;\n  --color-orchid-hover: #b4739a;\n  --color-orchid-selected: #7e516c;\n  --color-tan-hover: #978977;\n  --color-tan-selected: #6a6053;\n  --color-sky-hover: #90bac6;\n  --color-sky-selected: #65828b;\n  --color-coffee-hover: #a27b6f;\n  --color-coffee-selected: #71564e;\n  --color-royal-hover: #4474bb;\n  --color-royal-selected: #305183;\n  --color-teal: #4a8f98;\n  --color-teal-hover: #347179;\n  --color-teal-selected: #245960;\n  --color-lavender-hover: #a294c8;\n  --color-lavender-selected: #71688c;\n  --color-steel-hover: #95a2be;\n  --color-steel-selected: #687185;\n  --color-lilac-hover: #8e8a9f;\n  --color-lilac-selected: #63616f;\n  --color-pecan: #806363;\n  --color-pecan-hover: #674c4c;\n  --color-pecan-selected: #513939;\n  /*\n\n  LEGACY VALUES\n\n  These values are not within Vibe's UI definitions and are on a deprecation path.\n  Please stop using them and make efforts to replace theme with their Vibe corresponding keys.\n\n  */\n  --primary-on-secondary-color: #0073ea;\n  --primary-hover-on-secondary-color: #0060b9;\n  --primary-selected-color-rgb: 19, 55, 116;\n  --primary-selected-on-secondary-color: #133774;\n  --primary-text-on-secondary-color: #eeeeee;\n  --primary-background-color-rgb: 17, 17, 17;\n  --primary-background-hover-on-secondary-color: #636363;\n  --secondary-background-color-rgb: 44, 44, 44;\n  --secondary-text-on-secondary-color: #9699a6;\n  --link-on-secondary-color: #69a7ef;\n  --modal-background-color: #181b34;\n  --dark-background-color: #2c2c2c;\n  --dark-background-on-secondary-color: #4b4e69;\n  --dialog-background-color: #2c2c2c;\n  --label-background-color: #404b69;\n  --label-background-on-secondary-color: #404b69;\n  --icon-on-secondary-color: #aaaaaa;\n  --placeholder-color-with-opacity: rgba(170, 170, 170, 0.1);\n  --placeholder-on-secondary-color: #aaaaaa;\n  --ui-border-on-secondary-color: #8d8d8d;\n  --layout-border-on-secondary-color: #636363;\n  --disabled-background-on-secondary-color: #3a3a3a;\n  --disabled-text-on-secondary-color: rgba(238, 238, 238, var(--disabled-component-opacity));\n  --box-shadow-mediun: 0px 6px 20px rgba(0, 0, 0, 0.2);\n}\n"
  },
  {
    "path": "packages/style/src/themes/dark-theme.scss",
    "content": ".dark-app-theme {\n  --primary-color: #0073ea;\n  --primary-hover-color: #0060b9;\n  --primary-selected-color: #133774;\n  --primary-selected-hover-color: #0d2e65;\n  --primary-highlighted-color: #0d2753;\n  --primary-surface-color: #181b34;\n\n  --primary-text-color: #d5d8df;\n  --secondary-text-color: #9699a6;\n  --text-color-on-inverted: #323338;\n  --text-color-on-primary: #ffffff;\n  --disabled-text-color: rgba(213, 216, 223, var(--disabled-component-opacity));\n  --inverted-color-background: #ffffff;\n\n  --fixed-dark-color: #323338;\n  --fixed-light-color: #ffffff;\n\n  --primary-background-color: #181b34;\n  --primary-background-hover-color: rgba(103, 104, 121, 0.3);\n  --secondary-background-color: #30324e;\n  --allgrey-background-color: #30324e;\n  --backdrop-color: rgba(41, 47, 76, 0.7);\n  --ui-border-color: #797e93;\n  --ui-background-color: #434660;\n  --ui-background-hover-color: #35384d;\n  --layout-border-color: #4b4e69;\n\n  --placeholder-color: #c3c6d4;\n  --icon-color: #c3c6d4;\n  --disabled-background-color: #3c3f59;\n  --link-color: #69a7ef;\n\n  --brand-color: #0073ea;\n  --brand-hover-color: #0060b9;\n  --brand-selected-color: #133774;\n  --brand-selected-hover-color: #0d2e65;\n\n  --positive-color: #00854d;\n  --positive-color-hover: #007038;\n  --positive-color-selected: #025231;\n  --positive-color-selected-hover: #194733;\n  --negative-color: #d83a52;\n  --negative-color-hover: #b63546;\n  --negative-color-selected: #642830;\n  --negative-color-selected-hover: #5a2027;\n  --warning-color: #ffcb00;\n  --warning-color-hover: #eaaa15;\n  --warning-color-selected: #503e02;\n  --warning-color-selected-hover: #402f00;\n\n  --grey-background-color: #181b34;\n  --text-color-on-brand: #ffffff;\n  --color-surface: #292f4c;\n\n  --box-shadow-xs: 0px 4px 6px -4px rgba(9, 11, 25, 0.5);\n  --box-shadow-small: 0px 4px 8px rgba(9, 11, 25, 0.5);\n  --box-shadow-medium: 0px 6px 20px rgba(9, 11, 25, 0.5);\n  --box-shadow-large: 0px 15px 50px rgba(9, 11, 25, 0.5);\n\n  --color-grass_green-hover: #116846; /* stylelint-disable-line custom-property-pattern */\n  --color-grass_green-selected: #0f4f43; /* stylelint-disable-line custom-property-pattern */\n  --color-done-green-hover: #0f9b63;\n  --color-done-green-selected: #0e7358;\n  --color-done-green-selected-with-opacity: rgba(14, 115, 88, 0.6);\n  --color-bright-green-hover: #7ca32b;\n  --color-bright-green-selected: #5c7930;\n  --color-saladish-hover: #9d8f3e;\n  --color-saladish-selected: #736a3e;\n  --color-egg_yolk-hover: #c29e11; /* stylelint-disable-line custom-property-pattern */\n  --color-egg_yolk-selected: #8d751e; /* stylelint-disable-line custom-property-pattern */\n  --color-egg_yolk-rgb: 255, 213, 51; /* stylelint-disable-line custom-property-pattern */\n  --color-working_orange-hover: #c0873c; /* stylelint-disable-line custom-property-pattern */\n  --color-working_orange-selected: #8c653c; /* stylelint-disable-line custom-property-pattern */\n  --color-dark-orange-hover: #c25531;\n  --color-dark-orange-selected: #8d4134;\n  --color-peach-hover: #c2888a;\n  --color-peach-selected: #8d6674;\n  --color-sunset-hover: #c26163;\n  --color-sunset-selected: #8d4a58;\n  --color-sunset-selected-with-opacity: rgba(141, 74, 88, 0.6);\n  --color-stuck-red-hover: #ad3f51;\n  --color-stuck-red-selected: #7f314b;\n  --color-dark-red-hover: #92334c;\n  --color-dark-red-selected: #6b2947;\n  --color-sofia_pink-hover: #c21e71; /* stylelint-disable-line custom-property-pattern */\n  --color-sofia_pink-selected: #8d1a62; /* stylelint-disable-line custom-property-pattern */\n  --color-lipstick-hover: #c24e9a;\n  --color-lipstick-selected: #8d3c7f;\n  --color-bubble-hover: #be80ba;\n  --color-bubble-selected: #8b6096;\n  --color-purple-hover: #8050ab;\n  --color-purple-selected: #5f3e8b;\n  --color-dark_purple-hover: #6344a3; /* stylelint-disable-line custom-property-pattern */\n  --color-dark_purple-selected: #4a3586; /* stylelint-disable-line custom-property-pattern */\n  --color-berry-hover: #673971;\n  --color-berry-selected: #4d2d62;\n  --color-dark_indigo: #6129ff; /* stylelint-disable-line custom-property-pattern */\n  --color-dark_indigo-hover: #4c18dc; /* stylelint-disable-line custom-property-pattern */\n  --color-dark_indigo-selected: #3c13ae; /* stylelint-disable-line custom-property-pattern */\n  --color-indigo-hover: #4b4ead;\n  --color-indigo-selected: #383c8d;\n  --color-navy: #5684c5;\n  --color-navy-hover: #3468b2;\n  --color-navy-selected: #24508f;\n  --color-bright-blue-hover: #4c7cc1;\n  --color-bright-blue-selected: #395d9b;\n  --color-dark-blue-hover: #0f6d97;\n  --color-dark-blue-selected: #0e527e;\n  --color-aquamarine-hover: #469e9b;\n  --color-aquamarine-selected: #357580;\n  --color-chili-blue-hover: #569ec3;\n  --color-chili-blue-selected: #41759d;\n  --color-river-hover: #588095;\n  --color-river-selected: #42607c;\n  --color-winter-hover: #7b8895;\n  --color-winter-selected: #5b667c;\n  --color-explosive-hover: #98999a;\n  --color-explosive-selected: #70717f;\n  --color-american_gray-hover: #69696a; /* stylelint-disable-line custom-property-pattern */\n  --color-american_gray-selected: #4e505e; /* stylelint-disable-line custom-property-pattern */\n  --color-blackish: #7a7a7a;\n  --color-blackish-hover: #525252;\n  --color-blackish-selected: #383838;\n  --color-brown-hover: #684943;\n  --color-brown-selected: #4d3941;\n  --color-orchid-hover: #b4739a;\n  --color-orchid-selected: #85597b;\n  --color-tan-hover: #978977;\n  --color-tan-selected: #716863;\n  --color-sky-hover: #90bac6;\n  --color-sky-selected: #6c8a9a;\n  --color-coffee-hover: #a27b6f;\n  --color-coffee-selected: #795e5d;\n  --color-royal-hover: #4474bb;\n  --color-royal-selected: #375993;\n  --color-teal: #4a8f98;\n  --color-teal-hover: #347179;\n  --color-teal-selected: #245960;\n  --color-lavender-hover: #a294c8;\n  --color-lavender-selected: #79709c;\n  --color-steel-hover: #95a2be;\n  --color-steel-selected: #707a95;\n  --color-lilac-hover: #8e8a9f;\n  --color-lilac-selected: #6b697f;\n  --color-pecan: #806363;\n  --color-pecan-hover: #674c4c;\n  --color-pecan-selected: #513939;\n  /*\n\n  LEGACY VALUES\n\n  These values are not within Vibe's UI definitions and are on a deprecation path.\n  Please stop using them and make efforts to replace theme with their Vibe corresponding keys.\n\n  */\n  --primary-on-secondary-color: #0073ea;\n  --primary-hover-on-secondary-color: #0060b9;\n  --primary-selected-color-rgb: 19, 55, 116;\n  --primary-selected-on-secondary-color: #133774;\n  --primary-text-on-secondary-color: #d5d8df;\n  --primary-background-color-rgb: 24, 27, 52;\n  --primary-background-hover-on-secondary-color: #4b4e69;\n  --secondary-background-color-rgb: 48, 50, 78;\n  --secondary-text-on-secondary-color: #9699a6;\n  --link-on-secondary-color: #69a7ef;\n  --modal-background-color: #181b34;\n  --dark-background-color: #393b53;\n  --dark-background-on-secondary-color: #4b4e69;\n  --dialog-background-color: #30324e;\n  --label-background-color: #404b69;\n  --label-background-on-secondary-color: #404b69;\n  --icon-on-secondary-color: #c3c6d4;\n  --placeholder-color-with-opacity: rgba(195, 198, 212, 0.1);\n  --placeholder-on-secondary-color: #c3c6d4;\n  --ui-border-on-secondary-color: #797e93;\n  --layout-border-on-secondary-color: #4b4e69;\n  --disabled-background-on-secondary-color: #3c3f59;\n  --disabled-text-on-secondary-color: rgba(213, 216, 223, var(--disabled-component-opacity));\n  --box-shadow-mediun: 0px 6px 20px rgba(0, 0, 0, 0.2);\n}\n"
  },
  {
    "path": "packages/style/src/themes/hacker-theme.scss",
    "content": ".hacker_theme-app-theme { /* stylelint-disable-line selector-class-pattern */\n  --primary-color: #fe78c6;\n  --primary-hover-color: #fe5ab9;\n  --primary-selected-color: #9f4077;\n  --primary-selected-hover-color: #0d2e65;\n  --primary-highlighted-color: #0b2858;\n  --primary-surface-color: #111111;\n\n  --primary-text-color: #d5d8df;\n  --secondary-text-color: #9699a6;\n  --text-color-on-inverted: #323338;\n  --disabled-text-color: rgba(238, 238, 238, var(--disabled-component-opacity));\n  --inverted-color-background: #ffffff;\n\n  --fixed-dark-color: #323338;\n  --fixed-light-color: #ffffff;\n\n  --primary-background-color: #282a36;\n  --primary-background-hover-color: #4b4e69;\n  --secondary-background-color: #30324e;\n  --allgrey-background-color: #282a36;\n  --ui-border-color: #797e93;\n  --ui-background-color: #4b4e69;\n  --ui-background-hover-color: #3b3b3b;\n  --layout-border-color: #414458;\n\n  --placeholder-color: #c3c6d4;\n  --icon-color: #c3c6d4;\n  --disabled-background-color: #3a3a3a;\n  --link-color: #bd93f9;\n\n  --brand-color: #fe78c6;\n  --brand-hover-color: #fe5ab9;\n  --brand-selected-color: #9f4077;\n  --brand-selected-hover-color: #0d2e65;\n\n  --positive-color: #50fa7b;\n  --positive-color-hover: #007038;\n  --positive-color-selected: #26503e;\n  --positive-color-selected-hover: #194733;\n  --negative-color: #ff5555;\n  --negative-color-hover: #b63546;\n  --negative-color-selected: #642830;\n  --negative-color-selected-hover: #5a2027;\n  --warning-color: #ffcb00;\n  --warning-color-hover: #eaaa15;\n  --warning-color-selected: #503e02;\n  --warning-color-selected-hover: #402f00;\n\n  --grey-background-color: #282a36;\n\n  --box-shadow-xs: 0px 4px 6px -4px #000000;\n  --box-shadow-small: 0px 4px 8px #000000;\n  --box-shadow-medium: 0px 6px 20px #000000;\n  --box-shadow-large: 0px 15px 50px #000000;\n\n  --color-grass_green: #359970; /* stylelint-disable-line custom-property-pattern */\n  --color-grass_green-hover: #116846; /* stylelint-disable-line custom-property-pattern */\n  --color-grass_green-selected: #0a482e; /* stylelint-disable-line custom-property-pattern */\n  --color-done-green: #33d391;\n  --color-done-green-hover: #0f9b63;\n  --color-done-green-selected: #096c43;\n  --color-done-green-selected-with-opacity: rgba(9, 108, 67, 0.6);\n  --color-bright-green: #b0dc51;\n  --color-bright-green-hover: #7ca32b;\n  --color-bright-green-selected: #56721b;\n  --color-saladish: #d5c567;\n  --color-saladish-hover: #9d8f3e;\n  --color-saladish-selected: #6d6329;\n  --color-egg_yolk: #ffd533; /* stylelint-disable-line custom-property-pattern */\n  --color-egg_yolk-hover: #c29e11; /* stylelint-disable-line custom-property-pattern */\n  --color-egg_yolk-selected: #886e09; /* stylelint-disable-line custom-property-pattern */\n  --color-egg_yolk-rgb: 255, 213, 51; /* stylelint-disable-line custom-property-pattern */\n  --color-working_orange: #fdbc64; /* stylelint-disable-line custom-property-pattern */\n  --color-working_orange-hover: #c0873c; /* stylelint-disable-line custom-property-pattern */\n  --color-working_orange-selected: #875e27; /* stylelint-disable-line custom-property-pattern */\n  --color-dark-orange: #ff6d3b;\n  --color-dark-orange-hover: #c25531;\n  --color-dark-orange-selected: #883a1f;\n  --color-peach: #ffbdbd;\n  --color-peach-hover: #c2888a;\n  --color-peach-selected: #885f5f;\n  --color-sunset: #ff9191;\n  --color-sunset-hover: #c26163;\n  --color-sunset-selected: #884343;\n  --color-sunset-selected-with-opacity: rgba(136, 67, 67, 0.6);\n  --color-stuck-red: #e8697d;\n  --color-stuck-red-hover: #ad3f51;\n  --color-stuck-red-selected: #792a36;\n  --color-dark-red: #c95c76;\n  --color-dark-red-hover: #92334c;\n  --color-dark-red-selected: #662232;\n  --color-sofia_pink: #ff44a1; /* stylelint-disable-line custom-property-pattern */\n  --color-sofia_pink-hover: #c21e71; /* stylelint-disable-line custom-property-pattern */\n  --color-sofia_pink-selected: #88134d; /* stylelint-disable-line custom-property-pattern */\n  --color-lipstick: #ff7bd0;\n  --color-lipstick-hover: #c24e9a;\n  --color-lipstick-selected: #88356a;\n  --color-bubble: #fbb4f4;\n  --color-bubble-hover: #be80ba;\n  --color-bubble-selected: #855981;\n  --color-purple: #b57de3;\n  --color-purple-hover: #8050ab;\n  --color-purple-selected: #593776;\n  --color-dark_purple: #936fda; /* stylelint-disable-line custom-property-pattern */\n  --color-dark_purple-hover: #6344a3; /* stylelint-disable-line custom-property-pattern */\n  --color-dark_purple-selected: #442e71; /* stylelint-disable-line custom-property-pattern */\n  --color-berry: #9862a1;\n  --color-berry-hover: #673971;\n  --color-berry-selected: #47264d;\n  --color-dark_indigo: #6645a9; /* stylelint-disable-line custom-property-pattern */\n  --color-dark_indigo-hover: #3c1f78; /* stylelint-disable-line custom-property-pattern */\n  --color-dark_indigo-selected: #291452; /* stylelint-disable-line custom-property-pattern */\n  --color-indigo: #777ae5;\n  --color-indigo-hover: #4b4ead;\n  --color-indigo-selected: #333578;\n  --color-navy: #4e73a7;\n  --color-navy-hover: #274776;\n  --color-navy-selected: #193151;\n  --color-bright-blue: #79affd;\n  --color-bright-blue-hover: #4c7cc1;\n  --color-bright-blue-selected: #345686;\n  --color-dark-blue: #339ecd;\n  --color-dark-blue-hover: #0f6d97;\n  --color-dark-blue-selected: #094b69;\n  --color-aquamarine: #71d6d1;\n  --color-aquamarine-hover: #469e9b;\n  --color-aquamarine-selected: #2f6e6b;\n  --color-chili-blue: #85d6ff;\n  --color-chili-blue-hover: #569ec3;\n  --color-chili-blue-selected: #3b6e88;\n  --color-river: #86b4ca;\n  --color-river-hover: #588095;\n  --color-river-selected: #3c5967;\n  --color-winter: #aebdca;\n  --color-winter-hover: #7b8895;\n  --color-winter-selected: #555f67;\n  --color-explosive: #d0d0d0;\n  --color-explosive-hover: #98999a;\n  --color-explosive-selected: #6a6a6a;\n  --color-american_gray: #999999; /* stylelint-disable-line custom-property-pattern */\n  --color-american_gray-hover: #69696a; /* stylelint-disable-line custom-property-pattern */\n  --color-american_gray-selected: #494949; /* stylelint-disable-line custom-property-pattern */\n  --color-blackish: #5c5c5c;\n  --color-blackish-hover: #222222;\n  --color-blackish-selected: #111111;\n  --color-brown: #99756c;\n  --color-brown-hover: #684943;\n  --color-brown-selected: #48322c;\n  --color-orchid: #e190c0;\n  --color-orchid-hover: #b4739a;\n  --color-orchid-selected: #7e516c;\n  --color-tan: #bdab95;\n  --color-tan-hover: #978977;\n  --color-tan-selected: #6a6053;\n  --color-sky: #b4e9f8;\n  --color-sky-hover: #90bac6;\n  --color-sky-selected: #65828b;\n  --color-coffee: #ca9a8b;\n  --color-coffee-hover: #a27b6f;\n  --color-coffee-selected: #71564e;\n  --color-royal: #5591ea;\n  --color-royal-hover: #4474bb;\n  --color-royal-selected: #305183;\n  --color-teal: #457b82;\n  --color-teal-hover: #376268;\n  --color-teal-selected: #274549;\n  --color-lavender: #cab9fa;\n  --color-lavender-hover: #a294c8;\n  --color-lavender-selected: #71688c;\n  --color-steel: #bacbed;\n  --color-steel-hover: #95a2be;\n  --color-steel-selected: #687185;\n  --color-lilac: #687185;\n  --color-lilac-hover: #8e8a9f;\n  --color-lilac-selected: #63616f;\n  --color-pecan: #786565;\n  --color-pecan-hover: #605151;\n  --color-pecan-selected: #433939;\n  /*\n\n  LEGACY VALUES\n\n  These values are not within Vibe's UI definitions and are on a deprecation path.\n  Please stop using them and make efforts to replace theme with their Vibe corresponding keys.\n\n  */\n  --color-success: #50fa7b;\n  --color-error: #ff5555;\n  --primary-on-secondary-color: #fe78c6;\n  --primary-hover-on-secondary-color: #fe5ab9;\n  --primary-selected-color-rgb: 159, 64, 119;\n  --primary-selected-on-secondary-color: #9f4077;\n  --primary-text-on-secondary-color: #d5d8df;\n  --primary-background-color-rgb: 40, 42, 54;\n  --primary-background-hover-on-secondary-color: #4b4e69;\n  --secondary-background-color-rgb: 48, 50, 78;\n  --secondary-text-on-secondary-color: #9699a6;\n  --link-on-secondary-color: #bd93f9;\n  --modal-background-color: #282a36;\n  --dark-background-color: #303241;\n  --dark-background-on-secondary-color: #595959;\n  --dialog-background-color: #30324e;\n  --label-background-color: #404b69;\n  --label-background-on-secondary-color: #404b69;\n  --icon-on-secondary-color: #c3c6d4;\n  --placeholder-color-with-opacity: rgba(195, 198, 212, 0.1);\n  --placeholder-on-secondary-color: #c3c6d4;\n  --ui-border-on-secondary-color: #797e93;\n  --layout-border-on-secondary-color: #414458;\n  --disabled-background-on-secondary-color: #3a3a3a;\n  --disabled-text-on-secondary-color: rgba(238, 238, 238, var(--disabled-component-opacity));\n  --box-shadow-mediun: 0px 6px 20px rgba(0, 0, 0, 0.2);\n}\n"
  },
  {
    "path": "packages/style/src/themes/index.scss",
    "content": "@import \"light-theme\";\n@import \"dark-theme\";\n@import \"black-theme\";\n@import \"hacker-theme\";\n"
  },
  {
    "path": "packages/style/src/themes/light-theme.scss",
    "content": ":root,\n.light-app-theme,\n.default-app-theme {\n  --primary-color: #0073ea;\n  --primary-hover-color: #0060b9;\n  --primary-selected-color: #cce5ff;\n  --primary-selected-hover-color: #aed4fc;\n  --primary-highlighted-color: #f0f7ff;\n  --primary-surface-color: #eceff8;\n\n  --primary-text-color: #323338;\n  --secondary-text-color: #676879;\n  --text-color-on-inverted: #ffffff;\n  --text-color-on-primary: #ffffff;\n  --disabled-text-color: rgba(50, 51, 56, var(--disabled-component-opacity));\n  --inverted-color-background: #323338;\n\n  --fixed-dark-color: #323338;\n  --fixed-light-color: #ffffff;\n\n  --primary-background-color: #ffffff;\n  --primary-background-hover-color: rgba(103, 104, 121, 0.1);\n  --secondary-background-color: #ffffff;\n  --allgrey-background-color: #f6f7fb;\n  --backdrop-color: rgba(41, 47, 76, 0.7);\n  --ui-border-color: #c3c6d4;\n  --ui-background-color: #e7e9ef;\n  --ui-background-hover-color: #d8d9e0;\n  --layout-border-color: #d0d4e4;\n\n  --placeholder-color: #676879;\n  --icon-color: #676879;\n  --disabled-background-color: #ecedf5;\n  --link-color: #1f76c2;\n\n  --brand-color: #0073ea;\n  --brand-hover-color: #0060b9;\n  --brand-selected-color: #cce5ff;\n  --brand-selected-hover-color: #aed4fc;\n\n  --positive-color: #00854d;\n  --positive-color-hover: #007038;\n  --positive-color-selected: #bbdbc9;\n  --positive-color-selected-hover: #b5cec0;\n  --negative-color: #d83a52;\n  --negative-color-hover: #b63546;\n  --negative-color-selected: #f4c3cb;\n  --negative-color-selected-hover: #ecb7bf;\n  --warning-color: #ffcb00;\n  --warning-color-hover: #eaaa15;\n  --warning-color-selected: #fceba1;\n  --warning-color-selected-hover: #f2d973;\n\n  --color-highlight_blue: #cce5ff; /* stylelint-disable-line custom-property-pattern */\n  --color-basic_blue: #0073ea; /* stylelint-disable-line custom-property-pattern */\n  --color-dark_blue: #0060b9; /* stylelint-disable-line custom-property-pattern */\n  --color-bazooka: #f65f7c;\n  --color-snow_white: #ffffff; /* stylelint-disable-line custom-property-pattern */\n  --color-riverstone_gray: #f6f7fb; /* stylelint-disable-line custom-property-pattern */\n  --color-ui_grey: #dcdfec; /* stylelint-disable-line custom-property-pattern */\n  --color-wolf_gray: #c3c6d4; /* stylelint-disable-line custom-property-pattern */\n  --color-asphalt: #676879;\n  --color-mud_black: #323338; /* stylelint-disable-line custom-property-pattern */\n  --color-black: #000000;\n  --color-success: #00854d;\n  --color-success-hover: #007038;\n  --color-success-highlight: #bbdbc9;\n  --color-error: #d83a52;\n  --color-error-hover: #b63546;\n  --color-error-highlight: #f4c3cb;\n  --color-link_color: #1f76c2; /* stylelint-disable-line custom-property-pattern */\n  --color-surface: #292f4c;\n  --grey-background-color: #f6f7fb;\n  --text-color-on-brand: #ffffff;\n\n  --box-shadow-xs: 0px 4px 6px -4px rgba(0, 0, 0, 0.1);\n  --box-shadow-small: 0px 4px 8px rgba(0, 0, 0, 0.2);\n  --box-shadow-medium: 0px 6px 20px rgba(0, 0, 0, 0.2);\n  --box-shadow-large: 0px 15px 50px rgba(0, 0, 0, 0.3);\n\n  --color-grass_green: #037f4c; /* stylelint-disable-line custom-property-pattern */\n  --color-grass_green-hover: #116846; /* stylelint-disable-line custom-property-pattern */\n  --color-grass_green-selected: #81bfa5; /* stylelint-disable-line custom-property-pattern */\n  --color-done-green: #00c875;\n  --color-done-green-hover: #0f9b63;\n  --color-done-green-selected: #80e3ba;\n  --color-done-green-selected-with-opacity: rgba(128, 227, 186, 0.6);\n  --color-bright-green: #9cd326;\n  --color-bright-green-hover: #7ca32b;\n  --color-bright-green-selected: #cde992;\n  --color-saladish: #cab641;\n  --color-saladish-hover: #9d8f3e;\n  --color-saladish-selected: #e4daa0;\n  --color-egg_yolk: #ffcb00; /* stylelint-disable-line custom-property-pattern */\n  --color-egg_yolk-hover: #eaaa15; /* stylelint-disable-line custom-property-pattern */\n  --color-egg_yolk-selected: #ffe580; /* stylelint-disable-line custom-property-pattern */\n  --color-egg_yolk-rgb: 255, 213, 51; /* stylelint-disable-line custom-property-pattern */\n  --color-working_orange: #fdab3d; /* stylelint-disable-line custom-property-pattern */\n  --color-working_orange-hover: #c0873c; /* stylelint-disable-line custom-property-pattern */\n  --color-working_orange-selected: #fed59e; /* stylelint-disable-line custom-property-pattern */\n  --color-dark-orange: #ff6d3b;\n  --color-dark-orange-hover: #c25531;\n  --color-dark-orange-selected: #ffb196;\n  --color-peach: #ffadad;\n  --color-peach-hover: #c2888a;\n  --color-peach-selected: #ffd6d6;\n  --color-sunset: #ff7575;\n  --color-sunset-hover: #c26163;\n  --color-sunset-selected: #ffbaba;\n  --color-sunset-selected-with-opacity: rgba(255, 186, 186, 0.6);\n  --color-stuck-red: #df2f4a;\n  --color-stuck-red-hover: #ad3f51;\n  --color-stuck-red-selected: #f0a1ad;\n  --color-dark-red: #bb3354;\n  --color-dark-red-hover: #92334c;\n  --color-dark-red-selected: #dd99a9;\n  --color-sofia_pink: #e50073; /* stylelint-disable-line custom-property-pattern */\n  --color-sofia_pink-hover: #c20062; /* stylelint-disable-line custom-property-pattern */\n  --color-sofia_pink-selected: #ff8ac4; /* stylelint-disable-line custom-property-pattern */\n  --color-lipstick: #ff5ac4;\n  --color-lipstick-hover: #c24e9a;\n  --color-lipstick-selected: #fface1;\n  --color-bubble: #faa1f1;\n  --color-bubble-hover: #be80ba;\n  --color-bubble-selected: #fcd0f8;\n  --color-purple: #9d50dd;\n  --color-purple-hover: #7d45b0;\n  --color-purple-selected: #d0aeed;\n  --color-dark_purple: #784bd1; /* stylelint-disable-line custom-property-pattern */\n  --color-dark_purple-hover: #6344a3; /* stylelint-disable-line custom-property-pattern */\n  --color-dark_purple-selected: #bba5e8; /* stylelint-disable-line custom-property-pattern */\n  --color-berry: #7e3b8a;\n  --color-berry-hover: #673971;\n  --color-berry-selected: #be9dc4;\n  --color-dark_indigo: #401694; /* stylelint-disable-line custom-property-pattern */\n  --color-dark_indigo-hover: #3c1f78; /* stylelint-disable-line custom-property-pattern */\n  --color-dark_indigo-selected: #a08bc9; /* stylelint-disable-line custom-property-pattern */\n  --color-indigo: #5559df;\n  --color-indigo-hover: #4b4ead;\n  --color-indigo-selected: #aaacef;\n  --color-navy: #225091;\n  --color-navy-hover: #274776;\n  --color-navy-selected: #90a7c8;\n  --color-bright-blue: #579bfc;\n  --color-bright-blue-hover: #4c7cc1;\n  --color-bright-blue-selected: #abcdfd;\n  --color-dark-blue: #007eb5;\n  --color-dark-blue-hover: #0f6d97;\n  --color-dark-blue-selected: #80c2df;\n  --color-aquamarine: #4eccc6;\n  --color-aquamarine-hover: #469e9b;\n  --color-aquamarine-selected: #a6e5e2;\n  --color-chili-blue: #66ccff;\n  --color-chili-blue-hover: #569ec3;\n  --color-chili-blue-selected: #b2e5ff;\n  --color-river: #74afcc;\n  --color-river-hover: #588095;\n  --color-river-selected: #b3d0de;\n  --color-winter: #9aadbd;\n  --color-winter-hover: #7b8895;\n  --color-winter-selected: #ccd6de;\n  --color-explosive: #c4c4c4;\n  --color-explosive-hover: #98999a;\n  --color-explosive-selected: #e1e1e1;\n  --color-american_gray: #757575; /* stylelint-disable-line custom-property-pattern */\n  --color-american_gray-hover: #69696a; /* stylelint-disable-line custom-property-pattern */\n  --color-american_gray-selected: #bfbfbf; /* stylelint-disable-line custom-property-pattern */\n  --color-blackish: #333333;\n  --color-blackish-hover: #222222;\n  --color-blackish-selected: #999999;\n  --color-brown: #7f5347;\n  --color-brown-hover: #684943;\n  --color-brown-selected: #bfa9a3;\n  --color-orchid: #e484bd;\n  --color-orchid-hover: #ae5d8d;\n  --color-orchid-selected: #ecbad7;\n  --color-tan: #bca58a;\n  --color-tan-hover: #8a7862;\n  --color-tan-selected: #d6cabc;\n  --color-sky: #a1e3f6;\n  --color-sky-hover: #81b6c5;\n  --color-sky-selected: #d0f1fa;\n  --color-coffee: #cd9282;\n  --color-coffee-hover: #976758;\n  --color-coffee-selected: #dec0b7;\n  --color-royal: #216edf;\n  --color-royal-hover: #225eb7;\n  --color-royal-selected: #95bbf2;\n  --color-teal: #175a63;\n  --color-teal-hover: #12484f;\n  --color-teal-selected: #8bacb1;\n  --color-lavender: #bda8f9;\n  --color-lavender-hover: #9786c7;\n  --color-lavender-selected: #ded4fc;\n  --color-steel: #a9bee8;\n  --color-steel-hover: #8798ba;\n  --color-steel-selected: #d4dff4;\n  --color-lilac: #9d99b9;\n  --color-lilac-hover: #7e7a94;\n  --color-lilac-selected: #ceccdc;\n  --color-pecan: #563e3e;\n  --color-pecan-hover: #453232;\n  --color-pecan-selected: #ab9f9f;\n  /*\n\n  LEGACY VALUES\n\n  These values are not within Vibe's UI definitions and are on a deprecation path.\n  Please stop using them and make efforts to replace theme with their Vibe corresponding keys.\n\n  */\n  --color-dark_marble: #f1f1f1; /* stylelint-disable-line custom-property-pattern */\n  --color-marble: #f7f7f7;\n  --color-gainsboro: #e1e1e1;\n  --color-extra_light_gray: #edeef0; /* stylelint-disable-line custom-property-pattern */\n  --color-glitter: #d9f0ff;\n  --color-ultra_light_gray: #ebebeb; /* stylelint-disable-line custom-property-pattern */\n  --color-very_light_gray: #a1a1a1; /* stylelint-disable-line custom-property-pattern */\n  --color-jaco_gray: #9699a6; /* stylelint-disable-line custom-property-pattern */\n  --color-storm_gray: #6b6d77; /* stylelint-disable-line custom-property-pattern */\n  --color-trolley-grey: #757575;\n  --color-basic_light_blue: #c7e6fa; /* stylelint-disable-line custom-property-pattern */\n  --color-light_blue: #61caf7; /* stylelint-disable-line custom-property-pattern */\n  --color-turquoise: #66ccff;\n  --color-aqua: #00d1d1;\n  --color-live_blue: #009aff; /* stylelint-disable-line custom-property-pattern */\n  --color-jeans: #597bfc;\n  --color-burned_eggplant: #181d37; /* stylelint-disable-line custom-property-pattern */\n  --color-light-pink: #ff5ac4;\n  --color-dark-pink: #ff007f;\n  --color-dark_red: #bb3354; /* stylelint-disable-line custom-property-pattern */\n  --color-yellow: #ffcb00;\n  --color-mustered: #cab641;\n  --color-orange: #fdab3d;\n  --color-lime-green: #9cd326;\n  --color-jade: #03c875;\n  --color-green-haze: #00a359;\n  --color-grass-green: #037f4c;\n  --color-amethyst: #9d50dd;\n  --color-dark-purple: #784bd1;\n  --color-blue_links: #007eb5; /* stylelint-disable-line custom-property-pattern */\n  --color-blue-links: #007eb5;\n  --color-private: #f65f7c;\n  --color-public: #009aff;\n  --color-board_views_grey: #6e6f8f; /* stylelint-disable-line custom-property-pattern */\n  --color-board_views_grey_hover: #b2b3d0; /* stylelint-disable-line custom-property-pattern */\n  --color-board_views_blue: #1c1f3b; /* stylelint-disable-line custom-property-pattern */\n  --color-board_views_blue_secondary: #363a52; /* stylelint-disable-line custom-property-pattern */\n  --color-border_light_gray: #f5f6f8; /* stylelint-disable-line custom-property-pattern */\n  --color-brand-blue: #00a9ff;\n  --color-brand-charcoal: #2b2c5c;\n  --color-brand-gold: #ffcc00;\n  --color-brand-green: #11dd80;\n  --color-brand-iris: #595ad4;\n  --color-brand-light-blue: #00cff4;\n  --color-brand-malachite: #00cd6f;\n  --color-brand-purple: #a358d0;\n  --color-brand-red: #f74875;\n  --color-deadline_upcoming_indication: #5d6387; /* stylelint-disable-line custom-property-pattern */\n  --color-default_group_color: #579bfc; /* stylelint-disable-line custom-property-pattern */\n  --color-form_btn_hover: #0083d9; /* stylelint-disable-line custom-property-pattern */\n  --color-form_purple: #575c96; /* stylelint-disable-line custom-property-pattern */\n  --color-highlight: #dff0ff;\n  --color-green_shadow: #00c875; /* stylelint-disable-line custom-property-pattern */\n  --color-green-shadow: #00c875;\n  --color-red_shadow: #df2f4a; /* stylelint-disable-line custom-property-pattern */\n  --color-red-shadow: #df2f4a;\n  --color-pulse_bg: #f0f0f0; /* stylelint-disable-line custom-property-pattern */\n  --color-pulse_text_color: #333333; /* stylelint-disable-line custom-property-pattern */\n  --color-placholder_gray: #d8d8d8; /* stylelint-disable-line custom-property-pattern */\n  --color-placeholder_light_gray: #efefef; /* stylelint-disable-line custom-property-pattern */\n  --color-excel-green: #207245;\n  --color-media-blue: #2ea2e9;\n  --color-pdf-red: #bb0706;\n  --color-ppt-orange: #d64e2a;\n  --color-word-blue: #2a5699;\n  --color-zip-orange: #e4901c;\n  --color-like_red: #fb275d; /* stylelint-disable-line custom-property-pattern */\n  --color-scrollbar_gray: #b2b2b2; /* stylelint-disable-line custom-property-pattern */\n  --color-timeline_grid_blue: #454662; /* stylelint-disable-line custom-property-pattern */\n  --color-timeline_blue: #1c1f3b; /* stylelint-disable-line custom-property-pattern */\n  --color-highlight_blue-rgb: 204, 229, 255; /* stylelint-disable-line custom-property-pattern */\n  --color-snow_white-with-opacity: rgba(255, 255, 255, 0.4); /* stylelint-disable-line custom-property-pattern */\n  --color-wolf_gray-with-opacity: rgba(195, 198, 212, 0.1); /* stylelint-disable-line custom-property-pattern */\n  --color-asphalt-with-opacity: rgba(103, 104, 121, 0.1);\n  --primary-on-secondary-color: #0073ea;\n  --primary-hover-on-secondary-color: #0060b9;\n  --primary-selected-color-rgb: 204, 229, 255;\n  --primary-selected-on-secondary-color: #cce5ff;\n  --primary-text-on-secondary-color: #323338;\n  --text-color-on-primary-with-opacity: rgba(255, 255, 255, 0.4);\n  --secondary-text-on-secondary-color: #676879;\n  --placeholder-color-with-opacity: rgba(103, 104, 121, 0.1);\n  --placeholder-on-secondary-color: #676879;\n  --icon-on-secondary-color: #676879;\n  --link-on-secondary-color: #1f76c2;\n  --label-background-color: #cce5ff;\n  --label-background-on-secondary-color: #cce5ff;\n  --primary-background-color-rgb: 255, 255, 255;\n  --primary-background-hover-on-secondary-color: #dcdfec;\n  --modal-background-color: #ffffff;\n  --secondary-background-color-rgb: 255, 255, 255;\n  --disabled-background-on-secondary-color: #ecedf5;\n  --disabled-text-on-secondary-color: rgba(50, 51, 56, var(--disabled-component-opacity));\n  --ui-border-on-secondary-color: #c3c6d4;\n  --layout-border-on-secondary-color: #d0d4e4;\n  --dark-background-color: #f6f7fb;\n  --dark-background-on-secondary-color: #f6f7fb;\n  --dialog-background-color: #ffffff;\n  --box-shadow-mediun: 0px 6px 20px rgba(0, 0, 0, 0.2);\n}\n"
  },
  {
    "path": "packages/style/src/typography.scss",
    "content": ":root {\n  // Font family\n  --font-family: Figtree, Roboto, Noto Sans Hebrew, Noto Kufi Arabic, Noto Sans JP, sans-serif;\n  --title-font-family: Poppins, Roboto, Noto Sans Hebrew, Noto Kufi Arabic, Noto Sans JP, sans-serif;\n  --h1-font-family: var(--title-font-family);\n\n  // Font smoothing\n  --font-smoothing-webkit: antialiased;\n  --font-smoothing-moz: grayscale;\n\n  // Font weight\n  --font-weight-very-light: 200;\n  --font-weight-light: 300;\n  --font-weight-normal: 400;\n  --font-weight-bold: 500;\n\n  // Line height\n  --font-line-height-10: 18px;\n  --font-line-height-20: 24px;\n  --font-line-height-30: 24px;\n  --font-line-height-40: 24px;\n  --font-line-height-50: 32px;\n  --font-line-height-60: 42px;\n\n  // Font size\n  --font-size-10: 14px;\n  --font-size-20: 14px;\n  --font-size-30: 16px;\n  --font-size-40: 18px;\n  --font-size-50: 24px;\n  --font-size-60: 30px;\n  --font-size-h1: var(--font-size-60);\n  --font-size-h2: var(--font-size-50);\n  --font-size-h3: var(--font-size-50);\n  --font-size-h4: var(--font-size-40);\n  --font-size-h5: var(--font-size-30);\n  --font-size-general-label: var(--font-size-20);\n  --font-size-paragraph: var(--font-size-30);\n  --font-size-subtext: var(--font-size-10);\n\n  // Line height\n  --font-line-height-h1: var(--font-line-height-60);\n  --font-line-height-h2: var(--font-line-height-50);\n  --font-line-height-h3: var(--font-line-height-50);\n  --font-line-height-h4: var(--font-line-height-40);\n  --font-line-height-h5: var(--font-line-height-30);\n  --font-line-height-general-label: var(--font-line-height-20);\n  --font-line-height-paragraph: var(--font-line-height-30);\n  --font-line-height-subtext: var(--font-line-height-10);\n\n  // Font styles\n  --font-h1: var(--font-weight-bold) var(--font-size-h1) / var(--font-line-height-h1) var(--title-font-family);\n  --font-h2: var(--font-weight-bold) var(--font-size-h2) / var(--font-line-height-h2) var(--title-font-family);\n  --font-h3: var(--font-weight-light) var(--font-size-h3) / var(--font-line-height-h3) var(--title-font-family);\n  --font-h4: var(--font-weight-bold) var(--font-size-h4) / var(--font-line-height-h4) var(--title-font-family);\n  --font-h5: var(--font-weight-bold) var(--font-size-h5) / var(--font-line-height-h5) var(--font-family);\n\n  --font-general-label: var(--font-weight-normal) var(--font-size-general-label) / var(--font-line-height-general-label)\n    var(--font-family);\n  --font-paragraph: var(--font-weight-normal) var(--font-size-paragraph) / var(--font-line-height-paragraph)\n    var(--font-family);\n  --font-subtext: var(--font-weight-normal) var(--font-size-subtext) / var(--font-line-height-subtext)\n    var(--font-family);\n\n  --font-h1-bold: 700 32px/40px var(--title-font-family);\n  --font-h1-medium: 600 32px/40px var(--title-font-family);\n  --font-h1-normal: 500 32px/40px var(--title-font-family);\n  --font-h1-light: 300 32px/40px var(--title-font-family);\n  --font-h2-bold: 700 24px/30px var(--title-font-family);\n  --font-h2-medium: 600 24px/30px var(--title-font-family);\n  --font-h2-normal: 500 24px/30px var(--title-font-family);\n  --font-h2-light: 300 24px/30px var(--title-font-family);\n  --font-h3-bold: 700 18px/24px var(--title-font-family);\n  --font-h3-medium: 600 18px/24px var(--title-font-family);\n  --font-h3-normal: 500 18px/24px var(--title-font-family);\n  --font-h3-light: 300 18px/24px var(--title-font-family);\n\n  --font-text1-bold: 700 16px/22px var(--font-family);\n  --font-text1-medium: 600 16px/22px var(--font-family);\n  --font-text1-normal: 400 16px/22px var(--font-family);\n  --font-text2-bold: 700 14px/20px var(--font-family);\n  --font-text2-medium: 600 14px/20px var(--font-family);\n  --font-text2-normal: 400 14px/20px var(--font-family);\n  --font-text3-bold: 700 12px/16px var(--font-family);\n  --font-text3-medium: 600 12px/16px var(--font-family);\n  --font-text3-normal: 400 12px/16px var(--font-family);\n\n  // Letter spacing\n  --letter-spacing-h1-bold: -0.5px;\n  --letter-spacing-h1-normal: -0.5px;\n  --letter-spacing-h1-light: -0.5px;\n  --letter-spacing-h2-bold: -0.1px;\n  --letter-spacing-h2-normal: -0.1px;\n  --letter-spacing-h2-light: -0.1px;\n  --letter-spacing-h3-bold: -0.1px;\n  --letter-spacing-h3-normal: -0.1px;\n  --letter-spacing-h3-light: -0.1px;\n}\n"
  },
  {
    "path": "packages/style/stylelint-config/index.js",
    "content": "module.exports = {\n  customSyntax: require.resolve(\"postcss-scss\"),\n  plugins: [\"./rules/use-defined-css-var-when-available/index.js\", \"./rules/use-new-spacing-tokens/index.js\"],\n  rules: {\n    \"@vibe/style/use-defined-css-var-when-available\": true\n  }\n};\n"
  },
  {
    "path": "packages/style/stylelint-config/rules/use-defined-css-var-when-available/__tests__/fixtures/contains-values-with-multiple-replacements.scss",
    "content": ".some-font-class {\n  width: 16px;\n  font-family: sans-serif;\n}\n"
  },
  {
    "path": "packages/style/stylelint-config/rules/use-defined-css-var-when-available/__tests__/fixtures/contains-values-with-single-replacement.scss",
    "content": ".some-class {\n  width: 16px;\n  margin-top: 16px;\n}\n\n#id {\n  border-radius: 16px 14px;\n}\n"
  },
  {
    "path": "packages/style/stylelint-config/rules/use-defined-css-var-when-available/__tests__/index.test.js",
    "content": "const { lint } = require(\"stylelint\");\nconst path = require(\"path\");\nconst fs = require(\"fs\");\n\nconst config = {\n  plugins: [path.resolve(__dirname, \"../index.js\")],\n  customSyntax: \"postcss-scss\",\n  rules: {\n    \"@vibe/style/use-defined-css-var-when-available\": true\n  }\n};\n\nconst configWithUseRecommendation = {\n  ...config,\n  rules: {\n    \"@vibe/style/use-defined-css-var-when-available\": [\n      true,\n      {\n        useRecommendedFixes: true\n      }\n    ]\n  }\n};\n\ndescribe(\"@vibe/style/use-defined-css-var-when-available\", () => {\n  // since we run tests that actually perform code fixes, the fixtures are expected to change\n  const fixturesContentBeforeTests = new Map();\n\n  beforeAll(() => {\n    const allFiles = fs.readdirSync(path.resolve(__dirname, \"fixtures\"));\n\n    allFiles.forEach(fixture => {\n      const fixturePath = path.resolve(__dirname, \"fixtures\", fixture);\n      const fixtureContent = fs.readFileSync(fixturePath).toString();\n      fixturesContentBeforeTests.set(fixturePath, fixtureContent);\n    });\n  });\n\n  afterEach(() => {\n    for (const [filePath, content] of fixturesContentBeforeTests) {\n      try {\n        fs.writeFileSync(filePath, content, { encoding: \"utf-8\" });\n      } catch (e) {\n        console.error(\n          `Failed resetting file content for file: ${filePath}. This may result in changes that should have been reverted automatically. You will need to manually revert this, sorry.`\n        );\n        throw e;\n      }\n    }\n  });\n\n  it(\"warns for values that can be replaced with single CSS vars\", async () => {\n    const {\n      results: [{ warnings }]\n    } = await lint({\n      files: path.resolve(__dirname, \"./fixtures/contains-values-with-single-replacement.scss\"),\n      config\n    });\n\n    expect(warnings).toHaveLength(2);\n    const [firstWarning, secondWarning] = warnings;\n\n    expect(firstWarning.text).toBe(\n      `Expected \\\"16px\\\" to be \\\"var(--space-16)\\\" (@vibe/style/use-defined-css-var-when-available)`\n    );\n    expect(firstWarning.line).toBe(3);\n    expect(firstWarning.column).toBe(15);\n\n    expect(secondWarning.text).toBe(\n      `Expected \\\"16px\\\" to be \\\"var(--border-radius-big)\\\" (@vibe/style/use-defined-css-var-when-available)`\n    );\n    expect(secondWarning.line).toBe(7);\n    expect(secondWarning.column).toBe(18);\n  });\n\n  it(\"fixes values that can be replaced with single CSS vars\", async () => {\n    const { results } = await lint({\n      files: path.resolve(__dirname, \"./fixtures/contains-values-with-single-replacement.scss\"),\n      config: configWithUseRecommendation,\n      fix: true\n    });\n    const file = results[0]._postcssResult.opts.from;\n    const expectedOutputAfterFix = `\n.some-class {\n  width: 16px;\n  margin-top: var(--space-16);\n}\n\n#id {\n  border-radius: var(--border-radius-big) 14px;\n}`.trim();\n\n    const contentAfterFix = fs.readFileSync(file).toString().trim();\n\n    expect(contentAfterFix).toEqual(expectedOutputAfterFix);\n  });\n\n  // We currently not supporting this use case after stop recommending use font size variables\n  it.skip(\"warns for values that can be replaced with multiple CSS vars\", async () => {\n    const {\n      results: [{ warnings }]\n    } = await lint({\n      files: path.resolve(__dirname, \"./fixtures/contains-values-with-multiple-replacements.scss\"),\n      config\n    });\n\n    expect(warnings).toHaveLength(1);\n    const [firstWarning] = warnings;\n\n    expect(firstWarning.text).toBe(\n      `Expected \"14px\" to be one of vars: \n--font-size-20\n--font-size-general-label\n--font-size-subtext\n (@vibe/style/use-defined-css-var-when-available)`\n    );\n    expect(firstWarning.line).toBe(3);\n    expect(firstWarning.column).toBe(14);\n  });\n\n  // We currently not supporting this use case after stop recommending use font size variables\n  it.skip(\"perform fixes when there are multiple var replacements, when specifying the useRecommendedFixes flag\", async () => {\n    const { results } = await lint({\n      files: path.resolve(__dirname, \"./fixtures/contains-values-with-multiple-replacements.scss\"),\n      config: configWithUseRecommendation,\n      fix: true\n    });\n    const file = results[0]._postcssResult.opts.from;\n    const expectedOutputAfterFix = `\n.some-font-class {\n  width: 16px;\n  font-size: var(--font-size-general-label);\n}`.trim();\n\n    const contentAfterFix = fs.readFileSync(file).toString().trim();\n\n    expect(contentAfterFix).toEqual(expectedOutputAfterFix);\n  });\n\n  it(\"does not perform fixes when there are multiple var replacements, when not specifying the useRecommendedFixes flag\", async () => {\n    const { results } = await lint({\n      files: path.resolve(__dirname, \"./fixtures/contains-values-with-multiple-replacements.scss\"),\n      config,\n      fix: true\n    });\n    const originalContent = results[0]._postcssResult.css;\n    const file = results[0]._postcssResult.opts.from;\n    const expectedOutputAfterFix = originalContent;\n\n    const contentAfterFix = fs.readFileSync(file).toString();\n\n    expect(contentAfterFix).toEqual(expectedOutputAfterFix);\n  });\n\n  [\"disabled\", \"DiSaBlE\", \"off\", 0, false, \"false\", \"0\"].forEach(ruleConfigValue => {\n    it(`does not lint if the rule is disabled by config value of \"${ruleConfigValue}\"`, async () => {\n      const { results } = await lint({\n        files: path.resolve(__dirname, \"./fixtures/contains-values-with-multiple-replacements.scss\"),\n        config: {\n          ...config,\n          rules: {\n            \"@vibe/style/use-defined-css-var-when-available\": ruleConfigValue\n          }\n        }\n      });\n      expect(results).toHaveLength(1);\n      expect(results[0].warnings).toHaveLength(0); // the errors were ignored\n    });\n  });\n});\n"
  },
  {
    "path": "packages/style/stylelint-config/rules/use-defined-css-var-when-available/__tests__/props-to-allowed-vars.test.js",
    "content": "const { parseMondayUiCss, getPropsToAllowedCssVars } = require(\"../parse-monday-css\");\nconst { PROPS_TO_ALLOWED_VARS } = require(\"../props-to-allowed-vars\");\n\nconst ALLOWED_CSS_VARS_PREFIX_WITHOUT_MAPPING = [\n  \"--font-h\",\n  \"--font-text\",\n  \"--font-general-label\",\n  \"--font-subtext\",\n  \"--font-paragraph\",\n  \"--font-weight\",\n  \"--font-size\",\n  \"--font-line-height\",\n  \"--letter-spacing\"\n];\n\ndescribe(\"props-to-allowed-vars\", () => {\n  const { allVarsToCanonicalValue } = parseMondayUiCss();\n  const propsToAllowedCssVars = getPropsToAllowedCssVars();\n\n  describe(\"PROPS_TO_ALLOWED_VARS\", () => {\n    const allRootCssVarsFromGeneratedCss = Object.keys(allVarsToCanonicalValue);\n    const allMappedCssVars = [\n      ...new Set(\n        Object.values(PROPS_TO_ALLOWED_VARS).reduce((acc, { allowedVars, recommended }) => [...acc, ...allowedVars], [])\n      )\n    ];\n\n    allMappedCssVars.forEach(cssVarName => {\n      it(`should only include css vars that are under :root, without additional selectors - checking ${cssVarName} `, () => {\n        //if this fails, this means that we mapped a css prop to a css var that doesn't exist in our CSS output\n        const isExistingInCssOutput = allRootCssVarsFromGeneratedCss.includes(cssVarName);\n\n        expect(isExistingInCssOutput).toBeTruthy();\n      });\n    });\n\n    allRootCssVarsFromGeneratedCss.forEach(varFromGeneratedCss => {\n      it(`should map the css var ${varFromGeneratedCss} to valid css props that can use it`, () => {\n        const isCssVarMapped = allMappedCssVars.includes(varFromGeneratedCss);\n\n        if (!ALLOWED_CSS_VARS_PREFIX_WITHOUT_MAPPING.some(prefix => varFromGeneratedCss.startsWith(prefix))) {\n          // If this fails, a CSS var was added without mapping it to recommended CSS props.\n          // Without this mapping, we won't be able to recommend the proper usage of the CSS var.\n          // Please add your var to PROPS_TO_ALLOWED_VARS\n          expect(isCssVarMapped).toBeTruthy();\n        } else {\n          // If this fails, a CSS var was whitelisted as a variable without mapping, but it has mapping in PROPS_TO_ALLOWED_VARS.\n          // Either remove the CSS var from ALLOWED_CSS_VARS_WITHOUT_MAPPINGS, or remove the CSS var mapping from PROPS_TO_ALLOWED_VARS.\n          expect(isCssVarMapped).toBeFalsy();\n        }\n      });\n    });\n\n    Object.keys(PROPS_TO_ALLOWED_VARS).forEach(cssProp => {\n      const { allowedVars, recommended } = PROPS_TO_ALLOWED_VARS[cssProp];\n      const valuesToMatchingVars = {};\n      allowedVars.forEach(varName => {\n        const varValue = allVarsToCanonicalValue[varName];\n        valuesToMatchingVars[varValue] = valuesToMatchingVars[varValue] || [];\n        valuesToMatchingVars[varValue].push(varName);\n      });\n\n      Object.keys(valuesToMatchingVars).forEach(value => {\n        it(`should have a recommended var for each value that has multiple variables, for CSS prop ${cssProp} and value ${value}`, () => {\n          const matchingVars = valuesToMatchingVars[value];\n          if (matchingVars.length === 1) {\n            // only one option, no need for a recommendation\n            return;\n          }\n          const recommendationsToApply = intersect(matchingVars, recommended);\n          if (recommendationsToApply.length === 1) {\n            //only one recommendation, that's good\n            return;\n          }\n          if (recommendationsToApply.length === 0) {\n            fail(`Expected \"${value}\" to have a recommendation when being used in the CSS prop \"${cssProp}\", since it has multiple options: ${matchingVars.join(\n              \", \"\n            )}\n            Please choose a single variable which should be used as a recommendation.`);\n          } else {\n            fail(`Expected \"${value}\" to have a single recommendation when being used in the CSS prop \"${cssProp}\", since it has multiple options: ${matchingVars.join(\n              \", \"\n            )}\n            Instead, there were multiple recommendations with the same value: ${recommendationsToApply.join(\", \")}. \n            Please choose a single variable which should be used as a recommendation.`);\n          }\n        });\n      });\n\n      Object.keys(propsToAllowedCssVars[cssProp]).forEach(value => {\n        it(`should only have recommendations for values that have multiple possible variables, for CSS prop ${cssProp} and value ${value}`, () => {\n          const { recommended } = propsToAllowedCssVars[cssProp][value];\n          if (!recommended) {\n            return;\n          }\n\n          const matchingVarsCount = valuesToMatchingVars[value].length;\n          if (matchingVarsCount === 0) {\n            fail(`Found a recommendation for css prop \"${cssProp}\" and value \"${value}\", even though there are no matching variables.\n            Recommendations should only be added in cases that there are multiple variables that can be used, and have the same value.`);\n          }\n          if (matchingVarsCount === 1) {\n            fail(`Found a recommendation for css prop \"${cssProp}\" and value \"${value}\", even though only one variables matches this value: \"${valuesToMatchingVars[value]}\".\n            Recommendations should only be added in cases that there are multiple variables that can be used, and have the same value.`);\n          }\n        });\n      });\n    });\n  });\n});\n\n//shamelessly copied from https://stackoverflow.com/a/37041756/17779778\nfunction intersect(arr1, arr2) {\n  var set1 = new Set(arr1);\n  var set2 = new Set(arr2);\n  var intersection = new Set([...set1].filter(x => set2.has(x)));\n  return Array.from(intersection);\n}\n\nfunction fail(message) {\n  throw new Error(message);\n}\n"
  },
  {
    "path": "packages/style/stylelint-config/rules/use-defined-css-var-when-available/index.js",
    "content": "const stylelint = require(\"stylelint\");\nconst valueParser = require(\"postcss-value-parser\");\nconst { getPropsToAllowedCssVars } = require(\"./parse-monday-css\");\n\nconst { report, ruleMessages, validateOptions } = stylelint.utils;\n\nconst RULE_NAME = \"@vibe/style/use-defined-css-var-when-available\";\nconst CONFIGS_THAT_MEAN_IGNORE_FILE = [\"disabled\", \"disable\", \"off\", \"0\"];\n\nconst messages = ruleMessages(RULE_NAME, {\n  expected: (original, expected) => {\n    const asArray = Array.isArray(expected) ? expected : [expected];\n    const multipleValues = asArray.length > 1;\n    const expectedMsg = multipleValues ? `one of vars: \\n${asArray.join(\"\\n\")}\\n` : `\"var(${asArray[0]})\"`;\n    return `Expected \"${original}\" to be ${expectedMsg}`;\n  }\n});\n\nmodule.exports = stylelint.createPlugin(RULE_NAME, (primaryOption, secondaryOptionObject, context) => {\n  const propsToAllowedCssVars = getPropsToAllowedCssVars();\n\n  return function lint(postcssRoot, postcssResult) {\n    const validOptions = validateOptions(\n      postcssResult,\n      RULE_NAME,\n      {\n        actual: primaryOption,\n        possible: [...CONFIGS_THAT_MEAN_IGNORE_FILE, true, \"true\"],\n        optional: true\n      },\n      {\n        actual: secondaryOptionObject && secondaryOptionObject.useRecommendedFixes,\n        possible: [true, \"true\", false, \"false\"],\n        optional: true\n      }\n    );\n\n    primaryOption = primaryOption || true;\n    const shouldNotLint =\n      !validOptions || CONFIGS_THAT_MEAN_IGNORE_FILE.includes(primaryOption.toString().toLowerCase());\n    if (shouldNotLint) {\n      return;\n    }\n\n    const isAutoFixing = Boolean(context.fix);\n    postcssRoot.walkDecls(decl => {\n      // Iterate CSS declarations\n\n      const valuesToVars = propsToAllowedCssVars[decl.prop];\n      if (!valuesToVars) {\n        return;\n      }\n\n      const parsedValue = valueParser(decl.value);\n      parsedValue.walk(node => {\n        // iterate nodes inside values, e.g. \"padding: 16px 20px\" will have two value nodes: \"16px\" and \"20px\"\n        if (node.type !== \"word\") {\n          return;\n        }\n\n        const { allowedVars: varReplacementsForValue, recommended } = valuesToVars[node.value] || {};\n\n        if (!varReplacementsForValue || !varReplacementsForValue.length) {\n          return;\n        }\n        const hasSingleReplacement = varReplacementsForValue.length === 1;\n\n        const useRecommendedFixes = secondaryOptionObject && secondaryOptionObject.useRecommendedFixes;\n\n        if (isAutoFixing) {\n          // We are in “fix” mode\n          let replacementVar;\n          if (hasSingleReplacement) {\n            replacementVar = varReplacementsForValue[0];\n          } else if (useRecommendedFixes) {\n            replacementVar = recommended;\n          } else {\n            // we have multiple options, but the user chose not to follow recommendations\n            return;\n          }\n          const replacement = `var(${replacementVar})`;\n          const newValue = decl.value.replace(node.value, replacement);\n          // Apply the fix. It's not pretty, but that's the way to do it\n          if (decl.raws.value) {\n            decl.raws.value.raw = newValue;\n          } else {\n            decl.value = newValue;\n          }\n        } else {\n          // We are in “report only” mode\n          report({\n            ruleName: RULE_NAME,\n            result: postcssResult,\n            message: messages.expected(node.value, varReplacementsForValue), // Build the reported message\n            node: decl, // Specify the reported node\n            word: node.value // Which exact word caused the error? This positions the error properly\n          });\n        }\n      });\n    });\n  };\n});\n\nmodule.exports.ruleName = RULE_NAME;\nmodule.exports.messages = messages;\n"
  },
  {
    "path": "packages/style/stylelint-config/rules/use-defined-css-var-when-available/parse-monday-css.js",
    "content": "const postcss = require(\"postcss\");\nconst fs = require(\"fs\");\nconst path = require(\"path\");\nconst { PROPS_TO_ALLOWED_VARS } = require(\"./props-to-allowed-vars\");\n\nfunction getReferencedPropFromVar(value) {\n  // var(--my-var) => --my-var\n  const VAR_REGEX = /var\\(\\s*(--[\\w-]+)\\s*\\)/g;\n  return VAR_REGEX.exec(value)[1];\n}\n\nfunction readCssFromDefaultPath() {\n  const stylesCssPath = path.resolve(__dirname, \"../../../dist/index.min.css\");\n  return fs.readFileSync(stylesCssPath).toString();\n}\n\nfunction parseMondayUiCss(css = readCssFromDefaultPath()) {\n  const ast = postcss.parse(css);\n\n  const varsToCanonicalValue = {}; // css vars that are mapped to canonical values. e.g. {\"--color-primary\": \"#131313\"}\n  const canonicalValuesToVars = {}; // matching css vars for each canonical value. e.g. {\"16px\": [\"--font-size-h3\", \"--space-16\"]}\n  const referenceTokens = {}; // css vars that are pointing to other css vars. e.g. {\"--color-primary\": \"--color-red\"}\n  const referenceTokensToCanonicalValue = {}; // maps between reference token names to canonical values. e.g. if \"--font-size-h5: var(--font-size-30)\" and \"--font-size-30: 16px\", then {\"--font-size-h5\": \"16px\"}\n\n  ast.walkDecls(/^--/, decl => {\n    if (!decl.parent || decl.parent.selector !== \":root\") {\n      return; // we only care about truly global variables\n    }\n    const { prop, value } = decl;\n    const isValueCssProp = value.includes(\"var(--\");\n    if (!isValueCssProp) {\n      // this is a declaration of a new css var\n      varsToCanonicalValue[prop] = value;\n      canonicalValuesToVars[value] = canonicalValuesToVars[value] || [];\n      if (!canonicalValuesToVars[value].includes(prop)) {\n        canonicalValuesToVars[value].push(prop);\n      }\n    } else {\n      referenceTokens[prop] = value;\n    }\n  });\n\n  Object.keys(referenceTokens).forEach(referenceToken => {\n    const tokenValue = referenceTokens[referenceToken];\n    let referencedVar = getReferencedPropFromVar(tokenValue);\n    while (referenceTokens[referencedVar]) {\n      referencedVar = referenceTokens[referencedVar];\n    }\n    const referencedCanonicalValue = varsToCanonicalValue[referencedVar];\n    if (referencedCanonicalValue) {\n      referenceTokensToCanonicalValue[referenceToken] = referencedCanonicalValue;\n    }\n  });\n\n  const allVarsToCanonicalValue = {}; //maps between all vars (reference or not) to the canonical value\n\n  Object.keys(varsToCanonicalValue).forEach(varName => {\n    allVarsToCanonicalValue[varName] = varsToCanonicalValue[varName];\n  });\n  Object.keys(referenceTokensToCanonicalValue).forEach(varName => {\n    allVarsToCanonicalValue[varName] = referenceTokensToCanonicalValue[varName];\n  });\n\n  return { allVarsToCanonicalValue };\n}\n\n/**\n * @returns {{[cssProp: string]: {[value: string]: {allowedVars: string[], recommended: string | undefined}}}}: a map between a css prop to expected CSS vars replacements per values, and a recommendation if exists.\n * For example:\n {\n    padding: {\n      {\n        \"8px\": { allowedVars: [ \"--space-8\" ] },\n        \"16px\": { allowedVars: [ \"--space-16\" ] },\n      }\n    },\n    \"font-size\":{\n      \"14px\": { \n        allowedVars: [ \"--font-size-general-label\", \"--font-size-subtext\" ],\n        recommended: \"--font-size-general-label\"\n      },\n    }\n  }\n */\nfunction getPropsToAllowedCssVars() {\n  const { allVarsToCanonicalValue } = parseMondayUiCss();\n  const propsToReplacementConfig = {};\n  Object.keys(PROPS_TO_ALLOWED_VARS).forEach(prop => {\n    const { allowedVars, recommended } = PROPS_TO_ALLOWED_VARS[prop];\n    if (!allowedVars) {\n      return;\n    }\n    propsToReplacementConfig[prop] = {};\n    allowedVars.forEach(varName => {\n      const varCanonicalValue = allVarsToCanonicalValue[varName];\n      if (!varCanonicalValue) {\n        return;\n      }\n      propsToReplacementConfig[prop][varCanonicalValue] = propsToReplacementConfig[prop][varCanonicalValue] || {\n        allowedVars: []\n      };\n      propsToReplacementConfig[prop][varCanonicalValue].allowedVars.push(varName);\n      if (recommended && recommended.includes(varName)) {\n        propsToReplacementConfig[prop][varCanonicalValue].recommended = varName;\n      }\n    });\n  });\n\n  return propsToReplacementConfig;\n}\n\nmodule.exports = {\n  parseMondayUiCss,\n  getPropsToAllowedCssVars\n};\n"
  },
  {
    "path": "packages/style/stylelint-config/rules/use-defined-css-var-when-available/props-to-allowed-vars.js",
    "content": "const SPACINGS = [\n  \"--space-2\",\n  \"--space-4\",\n  \"--space-8\",\n  \"--space-12\",\n  \"--space-16\",\n  \"--space-20\",\n  \"--space-24\",\n  \"--space-32\",\n  \"--space-40\",\n  \"--space-48\",\n  \"--space-64\",\n  \"--space-80\"\n];\n\nconst BORDER_RADIUSES = [\"--border-radius-small\", \"--border-radius-medium\", \"--border-radius-big\"];\n\nconst BORDER_WIDTHS = [\"--border-width\"];\n\nconst BORDER_STYLES = [\"--border-style\"];\n\nconst FONT_SIZES = [\n  // since \"--font-size-10\" and \"--font-size-20\" have the same value, we need to pick only one of them as \"valid value\", to allow autofix\n  // \"--font-size-10\",\n  \"--font-size-20\",\n  \"--font-size-30\",\n  \"--font-size-40\",\n  \"--font-size-50\",\n  \"--font-size-60\",\n  \"--font-size-h1\",\n  \"--font-size-h2\",\n  \"--font-size-h3\",\n  \"--font-size-h4\",\n  \"--font-size-h5\",\n  \"--font-size-general-label\",\n  \"--font-size-paragraph\",\n  \"--font-size-subtext\"\n];\n\nconst FONT_FAMILIES = [\"--font-family\", \"--title-font-family\", \"--h1-font-family\"];\n\nconst FONT_WEIGHTS = [\"--font-weight-very-light\", \"--font-weight-light\", \"--font-weight-normal\", \"--font-weight-bold\"];\n\nconst FONT_LINE_HEIGHTS = [\n  \"--font-line-height-10\",\n  // since \"--font-line-height-20\", \"--font-line-height-30\" and \"--font-line-height-40\" have the same value, we need to pick only one of them as \"valid value\", to allow autofix\n  // \"--font-line-height-20\",\n  // \"--font-line-height-30\",\n  \"--font-line-height-40\",\n  \"--font-line-height-50\",\n  \"--font-line-height-60\",\n  \"--font-line-height-h1\",\n  \"--font-line-height-h2\",\n  \"--font-line-height-h3\",\n  \"--font-line-height-h4\",\n  \"--font-line-height-h5\",\n  \"--font-line-height-general-label\",\n  \"--font-line-height-paragraph\",\n  \"--font-line-height-subtext\"\n];\n\nconst ANIMATION_TIMING = [\n  \"--motion-timing-enter\",\n  \"--motion-timing-exit\",\n  \"--motion-timing-transition\",\n  \"--motion-timing-emphasize\",\n  \"--expand-animation-timing\"\n];\n\nconst ANIMATION_DURATION = [\n  \"--motion-productive-short\",\n  \"--motion-productive-medium\",\n  \"--motion-productive-long\",\n  \"--motion-expressive-short\",\n  \"--motion-expressive-long\"\n];\n\nconst SPACING_PROPS = [\n  \"padding\",\n  \"padding-top\",\n  \"padding-bottom\",\n  \"padding-left\",\n  \"padding-right\",\n  \"padding-inline\",\n  \"padding-inline-end\",\n  \"padding-inline-start\",\n  \"padding-block\",\n  \"padding-block-end\",\n  \"padding-block-start\",\n\n  \"margin\",\n  \"margin-top\",\n  \"margin-bottom\",\n  \"margin-left\",\n  \"margin-right\",\n  \"margin-inline\",\n  \"margin-inline-end\",\n  \"margin-inline-start\",\n  \"margin-block\",\n  \"margin-block-end\",\n  \"margin-block-start\",\n\n  \"inset\",\n  \"inset-end\",\n  \"inset-start\"\n];\n\nconst BORDER_RADIUSES_PROPS = [\n  \"border-radius\",\n  \"border-top-left-radius\",\n  \"border-top-right-radius\",\n  \"border-bottom-left-radius\",\n  \"border-bottom-right-radius\",\n  \"border-start-start-radius\",\n  \"border-start-end-radius\",\n  \"border-end-start-radius\",\n  \"border-end-end-radius\"\n];\n\nconst FONT_FAMILIES_PROPS = [\"font\", \"font-family\"];\n\nconst BORDER_WIDTHS_PROPS = [\"border\", \"border-width\"];\n\nconst BORDER_STYLES_PROPS = [\"border\", \"border-style\"];\n\nconst TIMING_FUNCTION_PROPS = [\"transition\", \"transition-timing\", \"animation\", \"animation-timing-function\"];\n\nconst DURATION_FUNCTION_PROPS = [\"transition\", \"transition-duration\", \"animation\", \"animation-duration\"];\n\nconst OPACITY_PROPS = [\"opacity\"];\n\nfunction mapPropsToAllowedVars(propNames, allowedVars, recommended = undefined) {\n  allowedVars = Array.isArray(allowedVars) ? allowedVars : [allowedVars];\n  propNames = Array.isArray(propNames) ? propNames : [propNames];\n\n  return propNames.reduce(\n    (result, propName) => ({\n      ...result,\n      [propName]: { allowedVars, recommended }\n    }),\n    {}\n  );\n}\n\n// List the CSS props we want to lint, and map each one to the values we would prefer to use.\n// For example, let's say that the key \"border-radius\" is mapped to --border-radius-small and --border-radius-medium.\n// This means that if --border-radius-small or --border-radius-medium can be used while linting a rule with the property \"border-radius\", we will show an error\n\nconst PROPS_TO_ALLOWED_VARS = {\n  ...mapPropsToAllowedVars(SPACING_PROPS, SPACINGS),\n    ...mapPropsToAllowedVars(BORDER_RADIUSES_PROPS, BORDER_RADIUSES),\n  ...mapPropsToAllowedVars(BORDER_WIDTHS_PROPS, BORDER_WIDTHS),\n  ...mapPropsToAllowedVars(BORDER_STYLES_PROPS, BORDER_STYLES),\n  ...mapPropsToAllowedVars(FONT_FAMILIES_PROPS, FONT_FAMILIES, [\"--title-font-family\"]),\n  ...mapPropsToAllowedVars(TIMING_FUNCTION_PROPS, ANIMATION_TIMING, [\"--expand-animation-timing\"]),\n  ...mapPropsToAllowedVars(DURATION_FUNCTION_PROPS, ANIMATION_DURATION, [\"--animation-expressive-short\"]),\n  ...mapPropsToAllowedVars(OPACITY_PROPS, \"--disabled-component-opacity\"),\n  \"-webkit-font-smoothing\": { allowedVars: [\"--font-smoothing-webkit\"] },\n  \"-moz-osx-font-smoothing\": { allowedVars: [\"--font-smoothing-moz\"] }\n};\n\nmodule.exports = {\n  PROPS_TO_ALLOWED_VARS\n};\n"
  },
  {
    "path": "packages/style/stylelint-config/rules/use-new-spacing-tokens/__tests__/index.test.js",
    "content": "const { lint } = require(\"stylelint\");\nconst path = require(\"path\");\n\nconst config = {\n  plugins: [path.resolve(__dirname, \"../index.js\")],\n  customSyntax: \"postcss-scss\",\n  rules: {\n    \"@vibe/style/use-new-spacing-tokens\": [true, { severity: \"warning\" }]\n  }\n};\n\nconst configWithError = {\n  ...config,\n  rules: {\n    \"@vibe/style/use-new-spacing-tokens\": true // Default severity is error\n  }\n};\n\ndescribe(\"@vibe/style/use-new-spacing-tokens\", () => {\n  it(\"should warn for legacy spacing tokens by default\", async () => {\n    const result = await lint({\n      code: `\n        .element {\n          margin: var(--spacing-small);\n          padding: var(--spacing-medium);\n        }\n      `,\n      config\n    });\n\n    expect(result.errored).toBe(false);\n    expect(result.results[0].warnings).toHaveLength(2);\n    expect(result.results[0].warnings[0].severity).toBe(\"warning\");\n    expect(result.results[0].warnings[0].text).toContain(\"var(--spacing-small)\");\n    expect(result.results[0].warnings[0].text).toContain(\"var(--space-8)\");\n  });\n\n  it(\"should error when configured with error severity\", async () => {\n    const result = await lint({\n      code: `\n        .element {\n          margin: var(--spacing-small);\n        }\n      `,\n      config: configWithError\n    });\n\n    expect(result.errored).toBe(true);\n    expect(result.results[0].warnings[0].severity).toBe(\"error\");\n  });\n\n  it(\"should auto-fix legacy spacing tokens\", async () => {\n    const result = await lint({\n      code: `\n        .element {\n          margin: var(--spacing-small);\n          padding: var(--spacing-medium) var(--spacing-xs);\n          gap: var(--spacing-large);\n        }\n      `,\n      config,\n      fix: true\n    });\n\n    const fixedCode = result.output;\n    expect(fixedCode).toContain(\"var(--space-8)\");\n    expect(fixedCode).toContain(\"var(--space-16)\");\n    expect(fixedCode).toContain(\"var(--space-4)\");\n    expect(fixedCode).toContain(\"var(--space-24)\");\n    expect(fixedCode).not.toContain(\"var(--spacing-\");\n  });\n\n  it(\"should not auto-fix when fix flag is not passed\", async () => {\n    const result = await lint({\n      code: `\n        .element {\n          margin: var(--spacing-small);\n        }\n      `,\n      config,\n      fix: false\n    });\n\n    // When not fixing, warnings should be reported\n    expect(result.results[0].warnings).toHaveLength(1);\n    expect(result.results[0].warnings[0].severity).toBe(\"warning\");\n  });\n\n  it(\"should handle complex values with multiple tokens\", async () => {\n    const result = await lint({\n      code: `\n        .element {\n          padding: var(--spacing-small) var(--spacing-medium) var(--spacing-large) var(--spacing-xs);\n        }\n      `,\n      config,\n      fix: true\n    });\n\n    const fixedCode = result.output;\n    expect(fixedCode).toContain(\"var(--space-8) var(--space-16) var(--space-24) var(--space-4)\");\n  });\n\n  it(\"should not affect non-legacy spacing tokens\", async () => {\n    const result = await lint({\n      code: `\n        .element {\n          margin: var(--space-8);\n          padding: var(--primary-color);\n          gap: 16px;\n        }\n      `,\n      config\n    });\n\n    expect(result.results[0].warnings).toHaveLength(0);\n  });\n\n  it(\"should handle all legacy token mappings\", async () => {\n    const legacyTokens = [\n      \"var(--spacing-xs)\",\n      \"var(--spacing-small)\",\n      \"var(--spacing-medium)\",\n      \"var(--spacing-large)\",\n      \"var(--spacing-xl)\",\n      \"var(--spacing-xxl)\",\n      \"var(--spacing-xxxl)\"\n    ];\n\n    const expectedTokens = [\n      \"var(--space-4)\",\n      \"var(--space-8)\",\n      \"var(--space-16)\",\n      \"var(--space-24)\",\n      \"var(--space-32)\",\n      \"var(--space-48)\",\n      \"var(--space-64)\"\n    ];\n\n    for (let i = 0; i < legacyTokens.length; i++) {\n      const result = await lint({\n        code: `.element { margin: ${legacyTokens[i]}; }`,\n        config,\n        fix: true\n      });\n\n      expect(result.output).toContain(expectedTokens[i]);\n      expect(result.output).not.toContain(legacyTokens[i]);\n    }\n  });\n});\n"
  },
  {
    "path": "packages/style/stylelint-config/rules/use-new-spacing-tokens/index.js",
    "content": "const stylelint = require(\"stylelint\");\n\nconst ruleName = \"@vibe/style/use-new-spacing-tokens\";\nconst messages = stylelint.utils.ruleMessages(ruleName, {\n  rejected: (_property, value, replacement) =>\n    `Use new spacing tokens instead of legacy ones. Replace \"${value}\" with \"${replacement}\".`\n});\n\nconst legacyToNewSpacingMap = {\n  \"var(--spacing-xs)\": \"var(--space-4)\",\n  \"var(--spacing-small)\": \"var(--space-8)\",\n  \"var(--spacing-medium)\": \"var(--space-16)\",\n  \"var(--spacing-large)\": \"var(--space-24)\",\n  \"var(--spacing-xl)\": \"var(--space-32)\",\n  \"var(--spacing-xxl)\": \"var(--space-48)\",\n  \"var(--spacing-xxxl)\": \"var(--space-64)\"\n};\n\nconst meta = {\n  fixable: true\n};\n\nconst rule = stylelint.createPlugin(ruleName, (primaryOption, secondaryOptions, context) => {\n  return (root, result) => {\n    const validOptions = stylelint.utils.validateOptions(result, ruleName, {\n      actual: primaryOption,\n      possible: [true, false]\n    });\n\n    if (!validOptions || primaryOption === false) {\n      return;\n    }\n\n    root.walkDecls(decl => {\n      const { prop, value } = decl;\n      let hasLegacyTokens = false;\n      let newValue = value;\n\n      // Check for legacy spacing tokens in the value\n      Object.keys(legacyToNewSpacingMap).forEach(legacyToken => {\n        if (value.includes(legacyToken)) {\n          hasLegacyTokens = true;\n          newValue = newValue.replace(\n            new RegExp(legacyToken.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\"), \"g\"),\n            legacyToNewSpacingMap[legacyToken]\n          );\n        }\n      });\n\n      if (hasLegacyTokens) {\n        // Support for deprecated context.fix approach (backward compatibility)\n        if (context && context.fix) {\n          decl.value = newValue;\n          return;\n        }\n\n        // Modern fix callback approach (fix())\n        stylelint.utils.report({\n          result,\n          ruleName,\n          message: messages.rejected(prop, value, newValue),\n          node: decl,\n          fix: () => {\n            decl.value = newValue;\n          }\n        });\n      }\n    });\n  };\n});\n\nrule.ruleName = ruleName;\nrule.messages = messages;\nrule.meta = meta;\n\nmodule.exports = rule;\n"
  },
  {
    "path": "packages/style/tsconfig.json",
    "content": "{\n  \"include\": [\"src/**/*\"],\n  \"compilerOptions\": {\n    \"lib\": [\"esnext\", \"dom\"],\n    \"allowJs\": true,\n    \"target\": \"es6\",\n    \"module\": \"CommonJS\",\n    \"sourceMap\": true,\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"experimentalDecorators\": true,\n    \"emitDecoratorMetadata\": true,\n    \"declaration\": true,\n    \"skipLibCheck\": true,\n    \"noImplicitAny\": true,\n    \"baseUrl\": \".\",\n    \"allowSyntheticDefaultImports\": true,\n    \"plugins\": [{ \"name\": \"typescript-plugin-css-modules\" }],\n    \"esModuleInterop\": true\n  }\n}\n"
  },
  {
    "path": "packages/style/types/styles.d.ts",
    "content": "// SCSS\ndeclare module \"*.module.scss\" {\n  const classes: { [key: string]: string };\n  export default classes;\n}\n"
  },
  {
    "path": "packages/testkit/.eslintrc.js",
    "content": "const defaultPlugins = [\"prettier\"];\nconst defaultExtends = [\"eslint:recommended\", \"plugin:prettier/recommended\"];\nconst defaultRules = {\n  \"prettier/prettier\": \"error\"\n};\n\nconst commonJsPlugins = defaultPlugins;\nconst commonJsExtends = defaultExtends;\nconst commonJsRules = {\n  ...defaultRules,\n  \"no-unused-vars\": [\"error\", { argsIgnorePattern: \"^_\" }]\n};\n\nconst commonTsPlugins = [...defaultPlugins, \"@typescript-eslint\"];\nconst commonTsExtends = [...defaultExtends, \"plugin:@typescript-eslint/recommended\"];\nconst commonTsRules = {\n  ...defaultRules,\n  \"@typescript-eslint/no-unused-vars\": [\"error\", { argsIgnorePattern: \"^_\" }],\n  \"@typescript-eslint/no-explicit-any\": \"warn\"\n};\n\nmodule.exports = {\n  ignorePatterns: [\"node_modules\", \"dist\"],\n  parserOptions: {\n    sourceType: \"module\"\n  },\n  env: {\n    es2021: true,\n    node: true\n  },\n  overrides: [\n    {\n      files: [\"**/*.js\"],\n      extends: commonJsExtends,\n      plugins: commonJsPlugins,\n      rules: commonJsRules\n    },\n    {\n      files: [\"**/*.ts\"],\n      parser: \"@typescript-eslint/parser\",\n      plugins: commonTsPlugins,\n      extends: commonTsExtends,\n      rules: commonTsRules\n    },\n    {\n      files: [\"./__tests__/*.test.js\"],\n      plugins: [...commonJsPlugins, \"playwright\"],\n      extends: [...commonJsExtends, \"plugin:playwright/recommended\"],\n      rules: commonJsRules\n    },\n    {\n      files: [\"./__tests__/*.test.ts\"],\n      parser: \"@typescript-eslint/parser\",\n      plugins: [...commonTsPlugins, \"playwright\"],\n      extends: [...commonTsExtends, \"plugin:playwright/recommended\"],\n      rules: commonTsRules\n    }\n  ]\n};\n"
  },
  {
    "path": "packages/testkit/CHANGELOG.md",
    "content": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n\n# [1.16.0](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.15.1...@vibe/testkit@1.16.0) (2026-02-04)\n\n\n### Features\n\n* add new text components ([#3244](https://github.com/mondaycom/vibe/issues/3244)) ([e47ce0b](https://github.com/mondaycom/vibe/commit/e47ce0bdfa25510e40ae5b2b3b2b9ffbb5b57f7e))\n\n\n\n\n\n## [1.15.1](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.15.0...@vibe/testkit@1.15.1) (2025-12-04)\n\n\n### Bug Fixes\n\n* update dropdown and toggle testkit components ([#3197](https://github.com/mondaycom/vibe/issues/3197)) ([32ed679](https://github.com/mondaycom/vibe/commit/32ed6791e4d92692daa5aed3bfc9cf5c590d833b))\n\n\n\n\n\n# [1.15.0](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.14.3...@vibe/testkit@1.15.0) (2025-10-19)\n\n\n### Features\n\n* **testkit:** change playwright peer dep version ([#3142](https://github.com/mondaycom/vibe/issues/3142)) ([14ff73e](https://github.com/mondaycom/vibe/commit/14ff73e2514b50243e681c9561c2b1e13ac657ae))\n\n\n\n\n\n## [1.14.3](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.14.2...@vibe/testkit@1.14.3) (2025-08-10)\n\n\n### Bug Fixes\n\n* pin playwright version ([#3038](https://github.com/mondaycom/vibe/issues/3038)) ([e48c55a](https://github.com/mondaycom/vibe/commit/e48c55a5804665fc53fa78440163a9cec2853aeb))\n\n\n\n\n\n## [1.14.2](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.14.1...@vibe/testkit@1.14.2) (2025-07-28)\n\n\n### Bug Fixes\n\n* **testkit:** improvements + fix for unit tests ([#3018](https://github.com/mondaycom/vibe/issues/3018)) ([24e792b](https://github.com/mondaycom/vibe/commit/24e792b444d56aebb2d58aebea5a30297b25b1cf))\n\n\n\n\n\n## [1.14.1](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.14.0...@vibe/testkit@1.14.1) (2025-07-27)\n\n**Note:** Version bump only for package @vibe/testkit\n\n\n\n\n\n# [1.14.0](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.13.0...@vibe/testkit@1.14.0) (2025-07-27)\n\n\n### Features\n\n* **testkit:** added deprecated base element functions ([#3013](https://github.com/mondaycom/vibe/issues/3013)) ([43fb64c](https://github.com/mondaycom/vibe/commit/43fb64c14fe130c0a199aff1c87fd83accd29d9d))\n\n\n\n\n\n# [1.13.0](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.12.0...@vibe/testkit@1.13.0) (2025-07-23)\n\n\n### Features\n\n* **testkit:** refactoring testkit components ([#2984](https://github.com/mondaycom/vibe/issues/2984)) ([4e2759c](https://github.com/mondaycom/vibe/commit/4e2759cdec6530c98e0fc49caa1d16c61ade500d))\n* **testkit:** unit tests for testkit ([#2989](https://github.com/mondaycom/vibe/issues/2989)) ([86f19df](https://github.com/mondaycom/vibe/commit/86f19df2095a3679ef9b333f161b7d6aeb8c42b6))\n\n\n\n\n\n# [1.12.0](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.11.2...@vibe/testkit@1.12.0) (2025-07-13)\n\n\n### Features\n\n* **testkit:** Add expand collapse component ([#2960](https://github.com/mondaycom/vibe/issues/2960)) ([9c701b1](https://github.com/mondaycom/vibe/commit/9c701b1e9536d551b3b060a03182db7ca3fae68e))\n\n\n\n\n\n## [1.11.2](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.11.1...@vibe/testkit@1.11.2) (2025-07-03)\n\n\n### Bug Fixes\n\n* update steps component to testkit ([#2936](https://github.com/mondaycom/vibe/issues/2936)) ([30923b1](https://github.com/mondaycom/vibe/commit/30923b1f2e3169856ea8bc2ef63b07ca077137fa))\n\n\n\n\n\n## [1.11.1](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.11.0...@vibe/testkit@1.11.1) (2025-07-01)\n\n\n### Bug Fixes\n\n* getText function in testkit ([#2959](https://github.com/mondaycom/vibe/issues/2959)) ([57b9437](https://github.com/mondaycom/vibe/commit/57b9437836594e0b485931164f94448e1c813e78))\n\n\n\n\n\n# [1.11.0](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.10.0...@vibe/testkit@1.11.0) (2025-06-19)\n\n\n### Features\n\n* **testkit:** common actions improvements ([#2930](https://github.com/mondaycom/vibe/issues/2930)) ([c0eb7be](https://github.com/mondaycom/vibe/commit/c0eb7be7aed6f78901e0011faefe0bb04e2d7cd9))\n\n\n\n\n\n# [1.10.0](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.9.2...@vibe/testkit@1.10.0) (2025-06-18)\n\n\n### Features\n\n* **Steps:** Add Steps component to testkit ([#2934](https://github.com/mondaycom/vibe/issues/2934)) ([0322f49](https://github.com/mondaycom/vibe/commit/0322f4944102921d54a64e922be4275bfcc42eba))\n\n\n\n\n\n## [1.9.2](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.9.1...@vibe/testkit@1.9.2) (2025-05-21)\n\n\n### Bug Fixes\n\n* drag and drop ([#2893](https://github.com/mondaycom/vibe/issues/2893)) ([d688140](https://github.com/mondaycom/vibe/commit/d688140b12be2eb8421c00b51866ca1e44de21e2))\n\n\n\n\n\n## [1.9.1](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.9.0...@vibe/testkit@1.9.1) (2025-03-27)\n\n\n### Bug Fixes\n\n* **testkit:** Fixing selectItem function ([#2822](https://github.com/mondaycom/vibe/issues/2822)) ([06c3dc5](https://github.com/mondaycom/vibe/commit/06c3dc5071f615abe6523d7069635156042a2b1e))\n\n\n\n\n\n# [1.9.0](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.8.0...@vibe/testkit@1.9.0) (2025-03-25)\n\n\n### Features\n\n* add data-vibe attribute to components ([#2783](https://github.com/mondaycom/vibe/issues/2783)) ([e3e2043](https://github.com/mondaycom/vibe/commit/e3e2043a12f0c3d3c367261879d0accde1fdd61c))\n\n\n\n\n\n# [1.8.0](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.7.0...@vibe/testkit@1.8.0) (2025-03-24)\n\n\n### Features\n\n* **Menu:** change locator handling ([#2816](https://github.com/mondaycom/vibe/issues/2816)) ([f478cec](https://github.com/mondaycom/vibe/commit/f478cecf2c0f6976e1ff828af70c4becc9917b96))\n\n\n\n\n\n# [1.7.0](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.5.1...@vibe/testkit@1.7.0) (2025-03-23)\n\n\n### Features\n\n* **Menu:** update selectItem method to be more strict ([#2813](https://github.com/mondaycom/vibe/issues/2813)) ([56a9b26](https://github.com/mondaycom/vibe/commit/56a9b26240bf657ca9166a3273a8f0352617b2ff))\n\n\n\n\n\n# [1.6.0](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.5.1...@vibe/testkit@1.6.0) (2025-03-23)\n\n\n### Features\n\n* **Menu:** update selectItem method to be more strict ([#2813](https://github.com/mondaycom/vibe/issues/2813)) ([56a9b26](https://github.com/mondaycom/vibe/commit/56a9b26240bf657ca9166a3273a8f0352617b2ff))\n\n\n\n\n\n## [1.5.1](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.5.0...@vibe/testkit@1.5.1) (2025-02-13)\n\n**Note:** Version bump only for package @vibe/testkit\n\n\n\n\n\n# [1.5.0](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.3.0...@vibe/testkit@1.5.0) (2025-02-11)\n\n\n### Features\n\n* testkit - playwright should be a peer dependency ([#2758](https://github.com/mondaycom/vibe/issues/2758)) ([758cc08](https://github.com/mondaycom/vibe/commit/758cc0835576076cd8c323a24f3db8fe2a5ba812))\n\n\n\n\n\n# [1.4.0](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.3.0...@vibe/testkit@1.4.0) (2025-02-11)\n\n\n### Features\n\n* testkit - playwright should be a peer dependency ([#2758](https://github.com/mondaycom/vibe/issues/2758)) ([758cc08](https://github.com/mondaycom/vibe/commit/758cc0835576076cd8c323a24f3db8fe2a5ba812))\n\n\n\n\n\n# [1.3.0](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.2.1...@vibe/testkit@1.3.0) (2025-02-05)\n\n\n### Features\n\n* Remove Dialog's testkit class ([#2756](https://github.com/mondaycom/vibe/issues/2756)) ([174a8c1](https://github.com/mondaycom/vibe/commit/174a8c1309a42004c4bc5ef0f0931a5df159f1cb))\n\n\n\n\n\n## [1.2.1](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.2.0...@vibe/testkit@1.2.1) (2025-01-19)\n\n\n### Bug Fixes\n\n* **testkit:** Add missing exported component ([#2723](https://github.com/mondaycom/vibe/issues/2723)) ([bc72061](https://github.com/mondaycom/vibe/commit/bc720614d34dc5acef0955047c2469d4564d0345))\n\n\n\n\n\n# [1.2.0](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.1.0...@vibe/testkit@1.2.0) (2025-01-12)\n\n\n### Features\n\n* **testkit:** add new components ([#2710](https://github.com/mondaycom/vibe/issues/2710)) ([baa7804](https://github.com/mondaycom/vibe/commit/baa780423e66cb010a9430648a7019d13d51253f))\n\n\n\n\n\n# [1.1.0](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.0.7...@vibe/testkit@1.1.0) (2024-12-03)\n\n\n### Features\n\n* **BaseElement:** add isVisible method ([#2616](https://github.com/mondaycom/vibe/issues/2616)) ([8c7458e](https://github.com/mondaycom/vibe/commit/8c7458eb694aed0c9e740abae668968eb063d40f))\n\n\n\n\n\n## [1.0.7](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.0.6...@vibe/testkit@1.0.7) (2024-11-24)\n\n**Note:** Version bump only for package @vibe/testkit\n\n\n\n\n\n## [1.0.6](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.0.5...@vibe/testkit@1.0.6) (2024-11-24)\n\n**Note:** Version bump only for package @vibe/testkit\n\n\n\n\n\n## [1.0.5](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.0.4...@vibe/testkit@1.0.5) (2024-11-20)\n\n**Note:** Version bump only for package @vibe/testkit\n\n\n\n\n\n## [1.0.4](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.0.3...@vibe/testkit@1.0.4) (2024-11-19)\n\n**Note:** Version bump only for package @vibe/testkit\n\n\n\n\n\n## [1.0.3](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.0.2...@vibe/testkit@1.0.3) (2024-11-14)\n\n**Note:** Version bump only for package @vibe/testkit\n\n\n\n\n\n## [1.0.2](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.0.1...@vibe/testkit@1.0.2) (2024-11-06)\n\n**Note:** Version bump only for package @vibe/testkit\n\n\n\n\n\n## 1.0.1 (2024-10-31)\n\n**Note:** Version bump only for package @vibe/testkit\n"
  },
  {
    "path": "packages/testkit/README.md",
    "content": "# `@vibe/testkit`\n\n> TODO: description\n\n## Usage\n\n```\nconst testingKit = require('@vibe/testkit');\n\n// TODO: DEMONSTRATE API\n```\n"
  },
  {
    "path": "packages/testkit/__tests__/Button.test.ts",
    "content": "import { test, expect, FrameLocator } from \"@playwright/test\";\nimport { Button } from \"../components\";\nimport { buttonStory } from \"./utils/url-helper\";\n\nlet frame: FrameLocator;\nlet button: Button;\nconst buttonLocator = 'button[data-testid^=\"button\"]';\nconst frameLocator = \"[id='storybook-preview-iframe']\";\n\ntest.describe(\"Testkit - Unit Tests - Button\", () => {\n  test.beforeEach(async ({ page }) => {\n    await page.goto(buttonStory);\n    frame = page.frameLocator(frameLocator);\n    button = new Button(page, frame.locator(buttonLocator), \"Button\");\n    await page.reload();\n    await button.waitForElementToBeVisible();\n  });\n\n  test(\"should be enabled by default\", async () => {\n    await expect(button.getLocator()).toBeEnabled();\n  });\n\n  test(\"should be visible by default\", async () => {\n    await expect(button.getLocator()).toBeVisible();\n  });\n\n  test(\"should be clickable\", async () => {\n    await button.click();\n    await expect(button.getLocator()).toBeEnabled();\n  });\n\n  test(\"should handle multiple clicks\", async () => {\n    await button.click();\n    await button.click();\n    await button.click();\n    await expect.soft(button.getLocator()).toBeEnabled();\n    await expect(button.getLocator()).toBeVisible();\n  });\n\n  test(\"should be hoverable\", async () => {\n    await button.hover();\n    await expect(button.getLocator()).toBeVisible();\n  });\n\n  test(\"should have proper text content\", async () => {\n    const text = await button.getText();\n    expect.soft(text).toBe(\"Button\");\n    expect.soft(text).toBeTruthy();\n    expect(text.length).toBeGreaterThan(0);\n  });\n\n  test(\"should maintain enabled state after interactions\", async () => {\n    await button.hover();\n    await button.click();\n    await expect(button.getLocator()).toBeEnabled();\n  });\n\n  test(\"should maintain visibility after interactions\", async () => {\n    await button.hover();\n    await button.click();\n    await expect(button.getLocator()).toBeVisible();\n  });\n\n  test(\"should scroll into view when needed\", async () => {\n    await button.scrollIntoView();\n    await expect(button.getLocator()).toBeVisible();\n  });\n\n  test(\"should count elements correctly\", async () => {\n    const count = await button.count();\n    expect(count).toBeGreaterThanOrEqual(1);\n  });\n\n  test(\"should handle attribute retrieval\", async () => {\n    const attributeValue = await button.getAttributeValue(\"data-vibe\");\n    expect(attributeValue).toContain(\"Button\");\n  });\n\n  test(\"should handle waiting for visibility states\", async () => {\n    await button.waitForElementToBeVisible();\n    await expect(button.getLocator()).toBeVisible();\n  });\n\n  test(\"should handle waiting for element attachment\", async () => {\n    await button.waitForElementToBeAttached();\n    await expect(button.getLocator()).toBeVisible();\n  });\n});\n"
  },
  {
    "path": "packages/testkit/__tests__/ButtonGroup.test.ts",
    "content": "import { test, expect, FrameLocator } from \"@playwright/test\";\nimport { ButtonGroup } from \"../components\";\nimport { buttonGroupStory } from \"./utils/url-helper\";\n\nlet frame: FrameLocator;\nlet buttonGroup: ButtonGroup;\nconst buttonGroupLocator = 'div[data-testid^=\"button-group\"]';\nconst frameLocator = \"[id='storybook-preview-iframe']\";\n\ntest.describe(\"Testkit - Unit Tests - ButtonGroup\", () => {\n  test.beforeEach(async ({ page }) => {\n    await page.goto(buttonGroupStory);\n    frame = page.frameLocator(frameLocator);\n    buttonGroup = new ButtonGroup(page, frame.locator(buttonGroupLocator), \"ButtonGroup\");\n    await page.reload();\n    await buttonGroup.waitForElementToBeVisible();\n  });\n\n  test(\"should be able to click button by name\", async () => {\n    await buttonGroup.clickButton(\"Delta\");\n    expect(await buttonGroup.isButtonSelected(\"Delta\")).toBe(true);\n  });\n\n  test(\"should correctly identify default selected button\", async () => {\n    expect(await buttonGroup.isButtonSelected(\"Alpha\")).toBe(true);\n  });\n\n  test(\"should return selected button name\", async () => {\n    const selectedButtonName = await buttonGroup.getSelectedButtonName();\n    expect(selectedButtonName).toBe(\"Alpha\");\n  });\n\n  test(\"should handle button selection changes\", async () => {\n    await buttonGroup.clickButton(\"Beta\");\n    expect.soft(await buttonGroup.isButtonSelected(\"Beta\")).toBe(true);\n    expect.soft(await buttonGroup.getSelectedButtonName()).toBe(\"Beta\");\n    await buttonGroup.clickButton(\"Gamma\");\n    expect.soft(await buttonGroup.isButtonSelected(\"Gamma\")).toBe(true);\n    expect(await buttonGroup.getSelectedButtonName()).toBe(\"Gamma\");\n  });\n\n  test(\"should maintain single selection\", async () => {\n    await buttonGroup.clickButton(\"Beta\");\n    expect.soft(await buttonGroup.isButtonSelected(\"Beta\")).toBe(true);\n    await buttonGroup.clickButton(\"Gamma\");\n    expect.soft(await buttonGroup.isButtonSelected(\"Gamma\")).toBe(true);\n    expect(await buttonGroup.isButtonSelected(\"Beta\")).toBe(false);\n  });\n\n  test(\"should be enabled by default\", async () => {\n    await expect(buttonGroup.getLocator()).toBeEnabled();\n  });\n\n  test(\"should be visible by default\", async () => {\n    await expect(buttonGroup.getLocator()).toBeVisible();\n  });\n\n  test(\"should handle button clicks in sequence\", async () => {\n    await buttonGroup.clickButton(\"Beta\");\n    expect.soft(await buttonGroup.getSelectedButtonName()).toBe(\"Beta\");\n    await buttonGroup.clickButton(\"Gamma\");\n    expect.soft(await buttonGroup.getSelectedButtonName()).toBe(\"Gamma\");\n    await buttonGroup.clickButton(\"Delta\");\n    expect.soft(await buttonGroup.getSelectedButtonName()).toBe(\"Delta\");\n    await buttonGroup.clickButton(\"Alpha\");\n    expect(await buttonGroup.getSelectedButtonName()).toBe(\"Alpha\");\n  });\n\n  test(\"should count elements correctly\", async () => {\n    const count = await buttonGroup.count();\n    expect(count).toBeGreaterThanOrEqual(1);\n  });\n\n  test(\"should handle attribute retrieval\", async () => {\n    const attributeValue = await buttonGroup.getAttributeValue(\"data-vibe\");\n    expect(attributeValue).toContain(\"ButtonGroup\");\n  });\n});\n"
  },
  {
    "path": "packages/testkit/__tests__/Checkbox.test.ts",
    "content": "import { test, expect, FrameLocator } from \"@playwright/test\";\nimport { Checkbox } from \"../components\";\nimport { checkboxStory } from \"./utils/url-helper\";\n\nlet frame: FrameLocator;\nlet checkbox: Checkbox;\nconst checkboxLocator = 'label[data-testid^=\"checkbox\"]';\nconst frameLocator = \"[id='storybook-preview-iframe']\";\n\ntest.describe(\"Testkit - Unit Tests - Checkbox\", () => {\n  test.beforeEach(async ({ page }) => {\n    await page.goto(checkboxStory);\n    frame = page.frameLocator(frameLocator);\n    checkbox = new Checkbox(page, frame.locator(checkboxLocator), \"Checkbox\");\n    await page.reload();\n    await checkbox.waitForElementToBeVisible();\n  });\n\n  test(\"Checkbox should be initially checked\", async () => {\n    await expect(checkbox.getLocator().locator(\"input\")).toBeChecked();\n  });\n\n  test(\"Checkbox should be able to be unchecked\", async () => {\n    await checkbox.setUnchecked();\n    await expect(checkbox.getLocator().locator(\"input\")).not.toBeChecked();\n  });\n\n  test(\"Checkbox should be able to be checked after being unchecked\", async () => {\n    await checkbox.setUnchecked();\n    await expect.soft(checkbox.getLocator().locator(\"input\")).not.toBeChecked();\n    await checkbox.setChecked();\n    await expect(checkbox.getLocator().locator(\"input\")).toBeChecked();\n  });\n\n  test(\"Checkbox should return its label text\", async () => {\n    const label = await checkbox.getLabel();\n    expect.soft(label).toBe(\"Option\");\n    expect.soft(label).toBeTruthy();\n    expect(typeof label).toBe(\"string\");\n  });\n\n  test(\"Checkbox should toggle correctly with multiple check/uncheck operations\", async () => {\n    await expect.soft(checkbox.getLocator().locator(\"input\")).toBeChecked();\n    await checkbox.setUnchecked();\n    await expect.soft(checkbox.getLocator().locator(\"input\")).not.toBeChecked();\n    await checkbox.setChecked();\n    await expect.soft(checkbox.getLocator().locator(\"input\")).toBeChecked();\n    await checkbox.setUnchecked();\n    await expect(checkbox.getLocator().locator(\"input\")).not.toBeChecked();\n  });\n\n  test(\"Checkbox should be enabled by default\", async () => {\n    await expect(checkbox.getLocator()).toBeEnabled();\n  });\n\n  test(\"Checkbox should be visible by default\", async () => {\n    await expect(checkbox.getLocator()).toBeVisible();\n  });\n\n  test(\"should count elements correctly\", async () => {\n    const count = await checkbox.count();\n    expect(count).toBeGreaterThanOrEqual(1);\n  });\n\n  test(\"should handle attribute retrieval\", async () => {\n    const attributeValue = await checkbox.getAttributeValue(\"data-vibe\");\n    expect(attributeValue).toContain(\"Checkbox\");\n  });\n});\n"
  },
  {
    "path": "packages/testkit/__tests__/ColorPicker.test.ts",
    "content": "import { test, expect, FrameLocator } from \"@playwright/test\";\nimport { ColorPicker } from \"../components\";\nimport { colorPickerStory } from \"./utils/url-helper\";\nimport { ColorPickerColor } from \"../utils/enums\";\n\nlet frame: FrameLocator;\nlet colorPicker: ColorPicker;\nconst colorPickerLocator = 'div[data-testid=\"dialog-content-container\"]';\nconst frameLocator = \"[id='storybook-preview-iframe']\";\n\ntest.describe(\"Testkit - Unit Tests - ColorPicker\", () => {\n  test.beforeEach(async ({ page }) => {\n    await page.goto(colorPickerStory);\n    frame = page.frameLocator(frameLocator);\n    colorPicker = new ColorPicker(page, frame.locator(colorPickerLocator), \"ColorPicker\");\n    await page.reload();\n    await colorPicker.waitForElementToBeVisible();\n  });\n\n  test(\"should be able to select a color\", async () => {\n    await colorPicker.selectColor(ColorPickerColor.STUCK_RED);\n    expect(await colorPicker.isColorSelected(ColorPickerColor.STUCK_RED)).toBe(true);\n  });\n\n  test(\"should return selected color\", async () => {\n    await colorPicker.selectColor(ColorPickerColor.GRASS_GREEN);\n    const selectedColor = await colorPicker.getSelectedColor();\n    expect(selectedColor).toBe(ColorPickerColor.GRASS_GREEN);\n  });\n\n  test(\"should handle color selection changes\", async () => {\n    await colorPicker.selectColor(ColorPickerColor.STUCK_RED);\n    expect.soft(await colorPicker.isColorSelected(ColorPickerColor.STUCK_RED)).toBe(true);\n    expect.soft(await colorPicker.getSelectedColor()).toBe(ColorPickerColor.STUCK_RED);\n    await colorPicker.selectColor(ColorPickerColor.BRIGHT_BLUE);\n    expect.soft(await colorPicker.isColorSelected(ColorPickerColor.BRIGHT_BLUE)).toBe(true);\n    expect.soft(await colorPicker.getSelectedColor()).toBe(ColorPickerColor.BRIGHT_BLUE);\n    expect(await colorPicker.isColorSelected(ColorPickerColor.STUCK_RED)).toBe(false);\n  });\n\n  test(\"should handle multiple color selections\", async () => {\n    const colors = [\n      ColorPickerColor.STUCK_RED,\n      ColorPickerColor.GRASS_GREEN,\n      ColorPickerColor.BRIGHT_BLUE,\n      ColorPickerColor.EGG_YOLK\n    ];\n\n    for (const color of colors) {\n      await colorPicker.selectColor(color);\n      expect.soft(await colorPicker.isColorSelected(color)).toBe(true);\n      expect(await colorPicker.getSelectedColor()).toBe(color);\n    }\n  });\n\n  test(\"should be enabled by default\", async () => {\n    await expect(colorPicker.getLocator()).toBeEnabled();\n  });\n\n  test(\"should be visible by default\", async () => {\n    await expect(colorPicker.getLocator()).toBeVisible();\n  });\n\n  test(\"should handle color selection sequence\", async () => {\n    await colorPicker.selectColor(ColorPickerColor.STUCK_RED);\n    expect(await colorPicker.getSelectedColor()).toBe(ColorPickerColor.STUCK_RED);\n\n    await colorPicker.selectColor(ColorPickerColor.GRASS_GREEN);\n    expect(await colorPicker.getSelectedColor()).toBe(ColorPickerColor.GRASS_GREEN);\n\n    await colorPicker.selectColor(ColorPickerColor.BRIGHT_BLUE);\n    expect(await colorPicker.getSelectedColor()).toBe(ColorPickerColor.BRIGHT_BLUE);\n\n    await colorPicker.selectColor(ColorPickerColor.STUCK_RED);\n    expect(await colorPicker.getSelectedColor()).toBe(ColorPickerColor.STUCK_RED);\n  });\n\n  test(\"should count elements correctly\", async () => {\n    const count = await colorPicker.count();\n    expect(count).toBeGreaterThanOrEqual(1);\n  });\n\n  test(\"should handle attribute retrieval\", async () => {\n    const ariaLabeledBy = await colorPicker.getAttributeValue(\"aria-labelledby\");\n    expect(ariaLabeledBy).toContain(\"Color Picker Dialog\");\n  });\n});\n"
  },
  {
    "path": "packages/testkit/__tests__/Combobox.test.ts",
    "content": "import { test, expect, FrameLocator, Dialog } from \"@playwright/test\";\nimport { BaseElement, Combobox } from \"../components\";\nimport { comboboxStory } from \"./utils/url-helper\";\n\nlet frame: FrameLocator;\nlet combobox: Combobox;\nconst comboboxLocator = 'div[data-testid=\"dialog-content-container\"]';\nconst frameLocator = \"[id='storybook-preview-iframe']\";\n\ntest.describe(\"Testkit - Unit Tests - Combobox\", () => {\n  test.beforeEach(async ({ page }) => {\n    await page.goto(comboboxStory);\n    frame = page.frameLocator(frameLocator);\n    combobox = new Combobox(page, frame.locator(comboboxLocator), \"Combobox\");\n    await page.reload();\n    await combobox.waitForElementToBeVisible();\n  });\n\n  test(\"should be able to select an option\", async ({ page }) => {\n    let alertText: string | null = null;\n    page.on(\"dialog\", async (dialog: Dialog) => {\n      alertText = dialog.message();\n      await dialog.accept();\n    });\n    await combobox.selectItem(\"Option 1\");\n    expect(alertText).toBe(\"clicked\");\n  });\n\n  test(\"should be enabled by default\", async () => {\n    await expect(combobox.getLocator()).toBeEnabled();\n  });\n\n  test(\"should be visible by default\", async () => {\n    await expect(combobox.getLocator()).toBeVisible();\n  });\n\n  test(\"should count elements correctly\", async () => {\n    const count = await combobox.count();\n    expect(count).toBeGreaterThanOrEqual(1);\n  });\n\n  test(\"should handle attribute retrieval\", async () => {\n    const attributeValue = await new BaseElement(\n      combobox.getPage(),\n      combobox.getLocator().locator(\"div\").first(),\n      \"Combobox\"\n    ).getAttributeValue(\"data-testid\");\n    expect(attributeValue).toContain(\"combobox\");\n  });\n\n  test(\"should be able to search for an option\", async () => {\n    await combobox.search(\"Option 1\");\n    expect(await combobox.isSearchResultVisible(\"Option 1\")).toBe(true);\n  });\n\n  test(\"should be able to clear search\", async () => {\n    await combobox.search(\"Option 1\");\n    expect.soft(await combobox.isSearchResultVisible(\"Option 1\")).toBe(true);\n    let searchInputValue = await combobox.getSearchInputValue();\n    expect.soft(searchInputValue).toBe(\"Option 1\");\n    await combobox.clearSearch();\n    searchInputValue = await combobox.getSearchInputValue();\n    expect(searchInputValue).toBe(\"\");\n  });\n\n  test(\"should handle empty search\", async () => {\n    await combobox.search(\"\");\n    const searchInputValue = await combobox.getSearchInputValue();\n    expect(searchInputValue).toBe(\"\");\n  });\n\n  test(\"should handle special characters in search\", async () => {\n    const specialSearch = \"Special!@#$%\";\n    await combobox.search(specialSearch);\n    const searchInputValue = await combobox.getSearchInputValue();\n    expect(searchInputValue).toBe(specialSearch);\n  });\n\n  test(\"should handle long search\", async () => {\n    const longSearch = \"This is a very long search text that tests the combobox's ability to handle longer strings\";\n    await combobox.search(longSearch);\n    const searchInputValue = await combobox.getSearchInputValue();\n    expect(searchInputValue).toBe(longSearch);\n  });\n\n  test(\"should handle numeric search\", async () => {\n    const numericSearch = \"12345\";\n    await combobox.search(numericSearch);\n    const searchInputValue = await combobox.getSearchInputValue();\n    expect(searchInputValue).toBe(numericSearch);\n  });\n});\n"
  },
  {
    "path": "packages/testkit/__tests__/Dropdown.test.ts",
    "content": "import { test, expect, FrameLocator } from \"@playwright/test\";\nimport { Dropdown } from \"../components\";\nimport { dropdownStory } from \"./utils/url-helper\";\n\nlet frame: FrameLocator;\nlet dropdown: Dropdown;\nconst dropdownLocator = '[data-vibe=\"Dropdown\"]';\nconst frameLocator = \"[id='storybook-preview-iframe']\";\n\ntest.describe(\"Testkit - Unit Tests - Dropdown\", () => {\n  test.beforeEach(async ({ page }) => {\n    await page.goto(dropdownStory);\n    frame = page.frameLocator(frameLocator);\n    dropdown = new Dropdown(page, frame.locator(dropdownLocator), \"Dropdown\");\n    await page.reload();\n    await dropdown.waitForElementToBeVisible();\n    await dropdown.close();\n  });\n\n  test(\"should be able to open\", async () => {\n    await dropdown.open();\n    const isOpen = await dropdown.isDropdownOpen();\n    expect(isOpen).toBe(true);\n  });\n\n  test(\"should be enabled by default\", async () => {\n    await expect(dropdown.getLocator()).toBeEnabled();\n  });\n\n  test(\"should be visible by default\", async () => {\n    await expect(dropdown.getLocator()).toBeVisible();\n  });\n\n  test(\"should count elements correctly\", async () => {\n    const count = await dropdown.count();\n    expect(count).toBeGreaterThanOrEqual(1);\n  });\n\n  test(\"should handle attribute retrieval\", async () => {\n    const attributeValue = await dropdown.getAttributeValue(\"data-vibe\");\n    expect(attributeValue).toContain(\"Dropdown\");\n  });\n});\n"
  },
  {
    "path": "packages/testkit/__tests__/EditableHeading.test.ts",
    "content": "/* eslint-disable playwright/no-wait-for-selector */\nimport { test, expect, FrameLocator } from \"@playwright/test\";\nimport { EditableHeading } from \"../components\";\nimport { editableHeadingStory } from \"./utils/url-helper\";\nlet frame: FrameLocator;\nlet editableHeading: EditableHeading;\nconst editableHeadingLocator = '[data-testid=\"editable-heading\"]';\nconst frameLocator = \"[id='storybook-preview-iframe']\";\n\ntest.describe(\"Testkit - Unit Tests - EditableHeading\", () => {\n  test.beforeEach(async ({ page }) => {\n    await page.goto(editableHeadingStory);\n    frame = page.frameLocator(frameLocator);\n    editableHeading = new EditableHeading(page, frame.locator(editableHeadingLocator), \"EditableHeading\");\n    await editableHeading.waitForElementToBeVisible();\n  });\n\n  test(\"should be visible by default\", async () => {\n    await expect(editableHeading.getLocator()).toBeVisible();\n  });\n\n  test(\"should be enabled by default\", async () => {\n    await expect(editableHeading.getLocator()).toBeEnabled();\n  });\n\n  test(\"should enter edit mode when clicked\", async () => {\n    await editableHeading.enterEditMode();\n    expect(await editableHeading.isInEditMode()).toBe(true);\n  });\n\n  test(\"should exit edit mode with Enter key\", async () => {\n    await editableHeading.enterEditMode();\n    expect.soft(await editableHeading.isInEditMode()).toBe(true);\n    await editableHeading.exitEditModeWithEnter();\n    expect(await editableHeading.isInEditMode()).toBe(false);\n  });\n\n  test(\"should exit edit mode with Escape key\", async () => {\n    await editableHeading.enterEditMode();\n    expect.soft(await editableHeading.isInEditMode()).toBe(true);\n    await editableHeading.exitEditModeWithEscape();\n    expect(await editableHeading.isInEditMode()).toBe(false);\n  });\n\n  test(\"should exit edit mode with blur\", async () => {\n    await editableHeading.enterEditMode();\n    expect.soft(await editableHeading.isInEditMode()).toBe(true);\n    await editableHeading.exitEditModeWithBlur();\n    expect(await editableHeading.isInEditMode()).toBe(false);\n  });\n\n  test(\"should count elements correctly\", async () => {\n    const count = await editableHeading.count();\n    expect(count).toBeGreaterThanOrEqual(1);\n  });\n\n  test(\"should handle attribute retrieval\", async () => {\n    const attributeValue = await editableHeading.getAttributeValue(\"data-testid\");\n    expect(attributeValue).toContain(\"editable-heading\");\n  });\n});\n"
  },
  {
    "path": "packages/testkit/__tests__/EditableText.test.ts",
    "content": "import { test, expect, FrameLocator } from \"@playwright/test\";\nimport { EditableText } from \"../components\";\nimport { editableTextStory } from \"./utils/url-helper\";\nlet frame: FrameLocator;\nlet editableText: EditableText;\nconst editableTextLocator = '[data-testid=\"editable-text\"]';\nconst frameLocator = \"[id='storybook-preview-iframe']\";\n\ntest.describe(\"Testkit - Unit Tests - EditableText\", () => {\n  test.beforeEach(async ({ page }) => {\n    await page.goto(editableTextStory);\n    frame = page.frameLocator(frameLocator);\n    editableText = new EditableText(page, frame.locator(editableTextLocator), \"EditableText\");\n    await editableText.waitForElementToBeVisible();\n  });\n\n  test(\"should be visible by default\", async () => {\n    await expect(editableText.getLocator()).toBeVisible();\n  });\n\n  test(\"should be enabled by default\", async () => {\n    await expect(editableText.getLocator()).toBeEnabled();\n  });\n\n  test(\"should enter edit mode when clicked\", async () => {\n    await editableText.enterEditMode();\n    expect(await editableText.isInEditMode()).toBe(true);\n  });\n\n  test(\"should exit edit mode with Escape key\", async () => {\n    await editableText.enterEditMode();\n    expect.soft(await editableText.isInEditMode()).toBe(true);\n    await editableText.exitEditModeWithEscape();\n    expect(await editableText.isInEditMode()).toBe(false);\n  });\n\n  test(\"should exit edit mode with blur\", async () => {\n    await editableText.enterEditMode();\n    expect.soft(await editableText.isInEditMode()).toBe(true);\n    await editableText.exitEditModeWithBlur();\n    expect(await editableText.isInEditMode()).toBe(false);\n  });\n\n  test(\"should check if multiline mode\", async () => {\n    const isMultiline = await editableText.isMultiline();\n    expect(typeof isMultiline).toBe(\"boolean\");\n  });\n\n  test(\"should count elements correctly\", async () => {\n    const count = await editableText.count();\n    expect(count).toBeGreaterThanOrEqual(1);\n  });\n\n  test(\"should handle attribute retrieval\", async () => {\n    const attributeValue = await editableText.getAttributeValue(\"data-testid\");\n    expect(attributeValue).toContain(\"editable-text\");\n  });\n});\n"
  },
  {
    "path": "packages/testkit/__tests__/ExpandCollapse.test.ts",
    "content": "import { test, expect, FrameLocator } from \"@playwright/test\";\nimport { ExpandCollapse } from \"../components/ExpandCollapse\";\nimport { expandCollapseStory } from \"./utils/url-helper\";\nimport { BaseElement } from \"../components\";\n\nlet frame: FrameLocator;\nlet expandCollapse: ExpandCollapse;\nconst expandCollapseLocator = 'div[data-testid=\"expand-collapse\"]';\nconst frameLocator = \"[id='storybook-preview-iframe']\";\n\ntest.describe(\"Testkit - Unit Tests - ExpandCollapse\", () => {\n  test.beforeEach(async ({ page }) => {\n    await page.goto(expandCollapseStory);\n    frame = page.frameLocator(frameLocator);\n    expandCollapse = new ExpandCollapse(page, frame.locator(expandCollapseLocator), \"ExpandCollapse\");\n    await page.reload();\n    await expandCollapse.waitForElementToBeVisible();\n  });\n\n  test(\"should be visible by default\", async () => {\n    await expect(expandCollapse.getLocator()).toBeVisible();\n  });\n\n  test(\"should be enabled by default\", async () => {\n    await expect(expandCollapse.getLocator()).toBeEnabled();\n  });\n\n  test(\"should be hoverable\", async () => {\n    await expandCollapse.hover();\n    await expect(expandCollapse.getLocator()).toBeEnabled();\n  });\n\n  test(\"should scroll into view when needed\", async () => {\n    await expandCollapse.scrollIntoView();\n    await expect(expandCollapse.getLocator()).toBeEnabled();\n  });\n\n  test(\"should count elements correctly\", async () => {\n    const count = await expandCollapse.count();\n    expect(count).toBeGreaterThanOrEqual(1);\n  });\n\n  test(\"should handle attribute retrieval\", async () => {\n    const attributeValue = await new BaseElement(\n      expandCollapse.getPage(),\n      expandCollapse.getLocator().locator(\"button[aria-expanded]\").locator(\"div\"),\n      \"ExpandCollapse\"\n    ).getAttributeValue(\"data-testid\");\n    expect(attributeValue).toContain(\"text\");\n  });\n\n  test(\"should get header text\", async () => {\n    const headerText = await expandCollapse.getHeaderText();\n    expect(headerText).toBe(\"Expand collapse\");\n  });\n\n  test(\"should expand the expand collapse\", async () => {\n    await expandCollapse.expand();\n    expect(await expandCollapse.isCollapsed()).toBe(false);\n  });\n\n  test(\"should collapse the expand collapse\", async () => {\n    await expandCollapse.collapse();\n    expect(await expandCollapse.isCollapsed()).toBe(true);\n  });\n\n  test(\"should get content text\", async () => {\n    await expandCollapse.expand();\n    const contentText = await expandCollapse.getContentText();\n    expect(contentText).toBe(\"Insert here any component that you want, here is a robot for you\");\n  });\n\n  test(\"should get content element\", async () => {\n    await expandCollapse.expand();\n    const contentElement = expandCollapse.getContentElement();\n    await expect(contentElement.getLocator()).toBeVisible();\n  });\n\n  test(\"should toggle the expand collapse\", async () => {\n    await expandCollapse.toggle();\n    expect.soft(await expandCollapse.isCollapsed()).toBe(false);\n    await expandCollapse.toggle();\n    expect(await expandCollapse.isCollapsed()).toBe(true);\n  });\n\n  test(\"should handle multiple expand collapse interactions\", async () => {\n    await expandCollapse.expand();\n    expect.soft(await expandCollapse.isContentVisible()).toBe(true);\n    await expandCollapse.collapse();\n    expect(await expandCollapse.isContentVisible()).toBe(false);\n  });\n});\n"
  },
  {
    "path": "packages/testkit/__tests__/IconButton.test.ts",
    "content": "import { test, expect, FrameLocator } from \"@playwright/test\";\nimport { IconButton } from \"../components/IconButton\";\nimport { iconButtonStory } from \"./utils/url-helper\";\n\nlet frame: FrameLocator;\nlet iconButton: IconButton;\nconst iconButtonLocator = 'button[data-testid^=\"icon-button\"]';\nconst frameLocator = \"[id='storybook-preview-iframe']\";\n\ntest.describe(\"Testkit - Unit Tests - IconButton\", () => {\n  test.beforeEach(async ({ page }) => {\n    await page.goto(iconButtonStory);\n    frame = page.frameLocator(frameLocator);\n    iconButton = new IconButton(page, frame.locator(iconButtonLocator), \"Icon Button\");\n    await page.reload();\n    await iconButton.waitForElementToBeVisible();\n  });\n\n  test(\"should be enabled by default\", async () => {\n    await expect(iconButton.getLocator()).toBeEnabled();\n  });\n\n  test(\"should be visible by default\", async () => {\n    await expect(iconButton.getLocator()).toBeVisible();\n  });\n\n  test(\"should be clickable\", async () => {\n    await iconButton.click();\n    await expect(iconButton.getLocator()).toBeEnabled();\n  });\n\n  test(\"should handle multiple clicks\", async () => {\n    await iconButton.click();\n    await iconButton.click();\n    await iconButton.click();\n    await expect.soft(iconButton.getLocator()).toBeEnabled();\n    await expect(iconButton.getLocator()).toBeVisible();\n  });\n\n  test(\"should be hoverable\", async () => {\n    await iconButton.hover();\n    await expect(iconButton.getLocator()).toBeVisible();\n  });\n\n  test(\"should maintain enabled state after interactions\", async () => {\n    await iconButton.hover();\n    await iconButton.click();\n    await expect(iconButton.getLocator()).toBeEnabled();\n  });\n\n  test(\"should maintain visibility after interactions\", async () => {\n    await iconButton.hover();\n    await iconButton.click();\n    await expect(iconButton.getLocator()).toBeVisible();\n  });\n\n  test(\"should scroll into view when needed\", async () => {\n    await iconButton.scrollIntoView();\n    await expect(iconButton.getLocator()).toBeVisible();\n  });\n\n  test(\"should count elements correctly\", async () => {\n    const count = await iconButton.count();\n    expect(count).toBeGreaterThanOrEqual(1);\n  });\n\n  test(\"should handle attribute retrieval\", async () => {\n    const attributeValue = await iconButton.getAttributeValue(\"data-vibe\");\n    expect(attributeValue).toContain(\"Button\");\n  });\n\n  test(\"should handle waiting for visibility states\", async () => {\n    await iconButton.waitForElementToBeVisible();\n    await expect(iconButton.getLocator()).toBeVisible();\n  });\n\n  test(\"should handle waiting for element attachment\", async () => {\n    await iconButton.waitForElementToBeAttached();\n    await expect(iconButton.getLocator()).toBeVisible();\n  });\n});\n"
  },
  {
    "path": "packages/testkit/__tests__/Link.test.ts",
    "content": "import { test, expect, FrameLocator } from \"@playwright/test\";\nimport { Link } from \"../components/Link\";\nimport { linkStory } from \"./utils/url-helper\";\n\nlet frame: FrameLocator;\nlet link: Link;\nconst linkLocator = 'a[data-testid^=\"link\"]';\nconst frameLocator = \"[id='storybook-preview-iframe']\";\n\ntest.describe(\"Testkit - Unit Tests - Link\", () => {\n  test.beforeEach(async ({ page }) => {\n    await page.goto(linkStory);\n    frame = page.frameLocator(frameLocator);\n    link = new Link(page, frame.locator(linkLocator), \"Link\");\n    await page.reload();\n    await link.waitForElementToBeVisible();\n  });\n\n  test(\"should be visible by default\", async () => {\n    await expect(link.getLocator()).toBeVisible();\n  });\n\n  test(\"should be enabled by default\", async () => {\n    await expect(link.getLocator()).toBeEnabled();\n  });\n\n  test(\"should be hoverable\", async () => {\n    await link.hover();\n    await expect(link.getLocator()).toBeEnabled();\n  });\n\n  test(\"should scroll into view when needed\", async () => {\n    await link.scrollIntoView();\n    await expect(link.getLocator()).toBeEnabled();\n  });\n\n  test(\"should count elements correctly\", async () => {\n    const count = await link.count();\n    expect(count).toBeGreaterThanOrEqual(1);\n  });\n\n  test(\"should handle attribute retrieval\", async () => {\n    const attributeValue = await link.getAttributeValue(\"target\");\n    expect(attributeValue).toContain(\"_blank\");\n  });\n\n  test(\"should click the link\", async () => {\n    await link.click();\n    await expect(link.getLocator()).toBeEnabled();\n  });\n\n  test(\"should handle multiple link clicks\", async () => {\n    await link.click();\n    await link.click();\n    await link.click();\n    await expect(link.getLocator()).toBeEnabled();\n  });\n\n  test(\"should get link text\", async () => {\n    const linkText = await link.getText();\n    expect.soft(linkText).toBe(\"Read more\");\n    expect.soft(linkText).toBeTruthy();\n    expect(linkText.length).toBeGreaterThan(0);\n  });\n\n  test(\"should get link href\", async () => {\n    const href = await link.getLinkHref();\n    expect.soft(href).toBe(\"https://www.monday.com\");\n    expect.soft(href).toBeTruthy();\n    expect(href.length).toBeGreaterThan(0);\n  });\n\n  test(\"should navigate to the link\", async ({ page }) => {\n    const newPagePromise = page.waitForEvent(\"popup\");\n    await link.click();\n    const newPage = await newPagePromise;\n    expect(newPage.url()).toContain(\"https://www.monday.com/\");\n    await newPage.close();\n  });\n\n  test(\"should handle waiting for visibility states\", async () => {\n    await link.waitForElementToBeVisible();\n    await expect(link.getLocator()).toBeVisible();\n  });\n\n  test(\"should handle complex interaction sequences\", async () => {\n    const text1 = await link.getText();\n    await link.click();\n    await link.hover();\n    const text2 = await link.getText();\n    expect(text1).toBe(text2);\n  });\n\n  test(\"should maintain enabled state after interactions\", async () => {\n    await link.click();\n    await link.hover();\n    await expect(link.getLocator()).toBeEnabled();\n  });\n\n  test(\"should maintain visibility after link interactions\", async () => {\n    await link.click();\n    await link.hover();\n    await expect(link.getLocator()).toBeVisible();\n  });\n});\n"
  },
  {
    "path": "packages/testkit/__tests__/List.test.ts",
    "content": "import { test, expect, FrameLocator, Dialog } from \"@playwright/test\";\nimport { List } from \"../components/List\";\nimport { listStory } from \"./utils/url-helper\";\n\nlet frame: FrameLocator;\nlet list: List;\nconst listLocator = 'ul[data-testid=\"list\"]';\nconst frameLocator = \"[id='storybook-preview-iframe']\";\n\ntest.describe(\"Testkit - Unit Tests - List\", () => {\n  test.beforeEach(async ({ page }) => {\n    await page.goto(listStory);\n    frame = page.frameLocator(frameLocator);\n    list = new List(page, frame.locator(listLocator), \"List\");\n    await page.reload();\n    await list.waitForElementToBeVisible();\n  });\n\n  test(\"should be enabled by default\", async () => {\n    await expect(list.getLocator()).toBeEnabled();\n  });\n\n  test(\"should be visible by default\", async () => {\n    await expect(list.getLocator()).toBeVisible();\n  });\n\n  test(\"should click list item by name\", async ({ page }) => {\n    let alertText: string | null = null;\n    page.on(\"dialog\", async (dialog: Dialog) => {\n      alertText = dialog.message();\n      await dialog.accept();\n    });\n    await list.selectItem(\"Board Power up\");\n    expect(alertText).toBe(\"On click!\");\n  });\n\n  test(\"should handle multiple list item clicks by name\", async ({ page }) => {\n    let alertText: string | null = null;\n    page.on(\"dialog\", async (dialog: Dialog) => {\n      alertText = dialog.message();\n      await dialog.accept();\n    });\n    await list.selectItem(\"Board Power up\");\n    expect.soft(alertText).toBe(\"On click!\");\n    await list.selectItem(\"Team Power up\");\n    expect(alertText).toBe(\"On click!\");\n  });\n\n  test(\"should click list item by index\", async ({ page }) => {\n    let alertText: string | null = null;\n    page.on(\"dialog\", async (dialog: Dialog) => {\n      alertText = dialog.message();\n      await dialog.accept();\n    });\n    await list.clickItemByIndex(0);\n    expect(alertText).toBe(\"On click!\");\n  });\n\n  test(\"should handle multiple list item clicks by index\", async ({ page }) => {\n    let alertText: string | null = null;\n    page.on(\"dialog\", async (dialog: Dialog) => {\n      alertText = dialog.message();\n      await dialog.accept();\n    });\n    await list.clickItemByIndex(0);\n    expect.soft(alertText).toBe(\"On click!\");\n    await list.clickItemByIndex(1);\n    expect(alertText).toBe(\"On click!\");\n  });\n\n  test(\"should handle hover operations\", async () => {\n    await list.hover();\n    await expect(list.getLocator()).toBeEnabled();\n  });\n\n  test(\"should count elements correctly\", async () => {\n    const count = await list.count();\n    expect(count).toBeGreaterThanOrEqual(1);\n  });\n\n  test(\"should handle attribute retrieval\", async () => {\n    const attributeValue = await list.getAttributeValue(\"data-vibe\");\n    expect(attributeValue).toContain(\"List\");\n  });\n\n  test(\"should check if list items are enabled by default\", async () => {\n    const isDisabled = await list.isItemDisabled(\"Board Power up\");\n    expect.soft(isDisabled).toBe(false);\n    const isDisabled2 = await list.isItemDisabled(\"Team Power up\");\n    expect.soft(isDisabled2).toBe(false);\n    const isDisabled3 = await list.isItemDisabled(\"Essentials\");\n    expect(isDisabled3).toBe(false);\n  });\n\n  test(\"should get list item text by index\", async () => {\n    const text = await list.getItemTextByIndex(0);\n    expect.soft(text).toBe(\"Board Power up\");\n    const text2 = await list.getItemTextByIndex(1);\n    expect.soft(text2).toBe(\"Team Power up\");\n    const text3 = await list.getItemTextByIndex(2);\n    expect(text3).toBe(\"Essentials\");\n  });\n\n  test(\"should get list item name by index\", async () => {\n    const name = await list.getItemTextByIndex(0);\n    expect.soft(name).toBe(\"Board Power up\");\n    const name2 = await list.getItemTextByIndex(1);\n    expect.soft(name2).toBe(\"Team Power up\");\n    const name3 = await list.getItemTextByIndex(2);\n    expect(name3).toBe(\"Essentials\");\n  });\n});\n"
  },
  {
    "path": "packages/testkit/__tests__/ListItem.test.ts",
    "content": "import { test, expect, FrameLocator } from \"@playwright/test\";\nimport { ListItem } from \"../components/ListItem\";\nimport { listItemStory } from \"./utils/url-helper\";\n\nlet frame: FrameLocator;\nlet listItem: ListItem;\nconst listItemLocator = 'div[role=\"option\"]';\nconst frameLocator = \"[id='storybook-preview-iframe']\";\n\ntest.describe(\"Testkit - Unit Tests - ListItem\", () => {\n  test.beforeEach(async ({ page }) => {\n    await page.goto(listItemStory);\n    frame = page.frameLocator(frameLocator);\n    listItem = new ListItem(page, frame.locator(listItemLocator), \"List Item\");\n    await page.reload();\n    await listItem.waitForElementToBeVisible();\n  });\n\n  test(\"should be enabled by default\", async () => {\n    await expect(listItem.getLocator()).toBeEnabled();\n  });\n\n  test(\"should be visible by default\", async () => {\n    await expect(listItem.getLocator()).toBeVisible();\n  });\n\n  test(\"should be clickable\", async () => {\n    await listItem.click();\n    await expect(listItem.getLocator()).toBeEnabled();\n  });\n\n  test(\"should handle multiple clicks\", async () => {\n    await listItem.click();\n    await listItem.click();\n    await listItem.click();\n    await expect(listItem.getLocator()).toBeEnabled();\n  });\n\n  test(\"should be hoverable\", async () => {\n    await listItem.hover();\n    await expect(listItem.getLocator()).toBeEnabled();\n  });\n\n  test(\"should have proper text content\", async () => {\n    const text = await listItem.getText();\n    expect(text).toBe(\"List item\");\n    expect(text).toBeTruthy();\n    expect(text.length).toBeGreaterThan(0);\n  });\n\n  test(\"should maintain enabled state after interactions\", async () => {\n    await listItem.hover();\n    await listItem.click();\n    await expect(listItem.getLocator()).toBeEnabled();\n  });\n\n  test(\"should maintain visibility after interactions\", async () => {\n    await listItem.hover();\n    await listItem.click();\n    await expect(listItem.getLocator()).toBeVisible();\n  });\n\n  test(\"should scroll into view when needed\", async () => {\n    await listItem.scrollIntoView();\n    await expect(listItem.getLocator()).toBeEnabled();\n  });\n\n  test(\"should count elements correctly\", async () => {\n    const count = await listItem.count();\n    expect(count).toBeGreaterThanOrEqual(1);\n  });\n\n  test(\"should handle attribute retrieval\", async () => {\n    const attributeValue = await listItem.getAttributeValue(\"role\");\n    expect(attributeValue).toContain(\"option\");\n  });\n\n  test(\"should check if list item is enabled by default\", async () => {\n    await expect(listItem.getLocator()).toBeEnabled();\n  });\n});\n"
  },
  {
    "path": "packages/testkit/__tests__/Loader.test.ts",
    "content": "import { test, expect, FrameLocator } from \"@playwright/test\";\nimport { Loader } from \"../components/Loader\";\nimport { loaderStory } from \"./utils/url-helper\";\n\nlet frame: FrameLocator;\nlet loader: Loader;\nconst loaderLocator = 'div[data-testid^=\"loader\"]';\nconst frameLocator = \"[id='storybook-preview-iframe']\";\n\ntest.describe(\"Testkit - Unit Tests - Loader\", () => {\n  test.beforeEach(async ({ page }) => {\n    await page.goto(loaderStory);\n    frame = page.frameLocator(frameLocator);\n    loader = new Loader(page, frame.locator(loaderLocator), \"Loader\");\n    await page.reload();\n    await loader.waitForElementToBeVisible();\n  });\n\n  test(\"should be enabled by default\", async () => {\n    await expect(loader.getLocator()).toBeEnabled();\n  });\n\n  test(\"should be visible by default\", async () => {\n    await expect(loader.getLocator()).toBeVisible();\n  });\n\n  test(\"should be hoverable\", async () => {\n    await loader.hover();\n    await expect(loader.getLocator()).toBeEnabled();\n  });\n\n  test(\"should scroll into view when needed\", async () => {\n    await loader.scrollIntoView();\n    await expect(loader.getLocator()).toBeEnabled();\n  });\n\n  test(\"should count elements correctly\", async () => {\n    const count = await loader.count();\n    expect(count).toBeGreaterThanOrEqual(1);\n  });\n\n  test(\"should handle attribute retrieval\", async () => {\n    const attributeValue = await loader.getAttributeValue(\"role\");\n    expect(attributeValue).toContain(\"alert\");\n  });\n\n  test(\"should handle waiting for visibility states\", async () => {\n    await loader.waitForElementToBeVisible();\n    await expect(loader.getLocator()).toBeVisible();\n  });\n});\n"
  },
  {
    "path": "packages/testkit/__tests__/Menu.test.ts",
    "content": "import { test, expect, FrameLocator } from \"@playwright/test\";\nimport { Menu } from \"../components/Menu\";\nimport { menuStory } from \"./utils/url-helper\";\n\nlet frame: FrameLocator;\nlet menu: Menu;\nconst menuLocator = 'ul[data-testid=\"menu\"]';\nconst frameLocator = \"[id='storybook-preview-iframe']\";\n\ntest.describe(\"Testkit - Unit Tests - Menu\", () => {\n  test.beforeEach(async ({ page }) => {\n    await page.goto(menuStory);\n    frame = page.frameLocator(frameLocator);\n    menu = new Menu(page, frame.locator(menuLocator), \"Menu\");\n    await page.reload();\n    await menu.waitForElementToBeVisible();\n  });\n\n  test(\"should be enabled by default\", async () => {\n    await expect(menu.getLocator()).toBeEnabled();\n  });\n\n  test(\"should be visible by default\", async () => {\n    await expect(menu.getLocator()).toBeVisible();\n  });\n\n  test(\"should click menu item by name\", async () => {\n    await menu.selectItem(\"Item 1\");\n    await expect(menu.getLocator()).toBeEnabled();\n  });\n\n  test(\"should handle clicking multiple menu items\", async () => {\n    await menu.selectItem(\"Item 1\");\n    await menu.selectItem(\"Item 2\");\n    await expect.soft(menu.getLocator()).toBeEnabled();\n    await expect(menu.getLocator()).toBeVisible();\n  });\n\n  test(\"should handle hover operations\", async () => {\n    await menu.hover();\n    await expect(menu.getLocator()).toBeVisible();\n  });\n\n  test(\"should count elements correctly\", async () => {\n    const count = await menu.count();\n    expect(count).toBeGreaterThanOrEqual(1);\n  });\n\n  test(\"should handle attribute retrieval\", async () => {\n    const attributeValue = await menu.getAttributeValue(\"aria-label\");\n    expect(attributeValue).toContain(\"Menu\");\n  });\n\n  test(\"should check if menu items are enabled by default\", async () => {\n    const isDisabled = await menu.isMenuItemDisabled(\"Menu item 1\");\n    expect.soft(isDisabled).toBe(false);\n    const isDisabled2 = await menu.isMenuItemDisabled(\"Menu item 2\");\n    expect.soft(isDisabled2).toBe(true);\n    const isDisabled3 = await menu.isMenuItemDisabled(\"Menu item 3\");\n    expect(isDisabled3).toBe(false);\n  });\n\n  test(\"should get menu item name by index\", async () => {\n    const name = await menu.getMenuItemNameByIndex(0);\n    expect.soft(name).toBe(\"Menu item 1\");\n    const name2 = await menu.getMenuItemNameByIndex(1);\n    expect.soft(name2).toBe(\"Menu item 2\");\n    const name3 = await menu.getMenuItemNameByIndex(2);\n    expect(name3).toBe(\"Menu item 3\");\n  });\n});\n"
  },
  {
    "path": "packages/testkit/__tests__/MenuButton.test.ts",
    "content": "import { test, expect, FrameLocator } from \"@playwright/test\";\nimport { MenuButton } from \"../components/MenuButton\";\nimport { menuButtonStory } from \"./utils/url-helper\";\nimport { Menu } from \"../components/Menu\";\n\nlet frame: FrameLocator;\nlet menuButton: MenuButton;\nconst menuButtonLocator = 'button[data-testid^=\"menu-button\"]';\nconst menuLocator = 'ul[role=\"menu\"]';\nconst frameLocator = \"[id='storybook-preview-iframe']\";\n\ntest.describe(\"Testkit - Unit Tests - MenuButton\", () => {\n  test.beforeEach(async ({ page }) => {\n    await page.goto(menuButtonStory);\n    frame = page.frameLocator(frameLocator);\n    const menu = new Menu(page, frame.locator(menuLocator), \"Menu\");\n    menuButton = new MenuButton(page, frame.locator(menuButtonLocator), \"Menu Button\", menu);\n    await page.reload();\n    await menuButton.waitForElementToBeVisible();\n    await menuButton.closeMenu();\n  });\n\n  test(\"should be enabled by default\", async () => {\n    await expect(menuButton.getLocator()).toBeEnabled();\n  });\n\n  test(\"should be visible by default\", async () => {\n    await expect(menuButton.getLocator()).toBeVisible();\n  });\n\n  test(\"should open menu when calling openMenu()\", async () => {\n    await menuButton.openMenu();\n    await expect(menuButton.getLocator()).toBeVisible();\n  });\n\n  test(\"should close menu when calling closeMenu()\", async () => {\n    await menuButton.openMenu();\n    await menuButton.closeMenu();\n    expect(await menuButton.isMenuExpanded()).toBe(false);\n  });\n\n  test(\"should not change state when calling openMenu() on already opened menu\", async () => {\n    await menuButton.openMenu();\n    await menuButton.openMenu();\n    expect(await menuButton.isMenuExpanded()).toBe(true);\n  });\n\n  test(\"should not change state when calling closeMenu() on already closed menu\", async () => {\n    await menuButton.openMenu();\n    await menuButton.closeMenu();\n    await menuButton.closeMenu();\n    expect(await menuButton.isMenuExpanded()).toBe(false);\n  });\n\n  test(\"should toggle menu state correctly with multiple open/close operations\", async () => {\n    await menuButton.openMenu();\n    await menuButton.closeMenu();\n    await menuButton.openMenu();\n    await menuButton.closeMenu();\n    expect.soft(await menuButton.isMenuExpanded()).toBe(false);\n    await menuButton.openMenu();\n    expect.soft(await menuButton.isMenuExpanded()).toBe(true);\n    await menuButton.closeMenu();\n    expect(await menuButton.isMenuExpanded()).toBe(false);\n  });\n\n  test(\"should handle hover operations\", async () => {\n    await menuButton.hover();\n    await expect(menuButton.getLocator()).toBeVisible();\n  });\n\n  test(\"should count elements correctly\", async () => {\n    const count = await menuButton.count();\n    expect(count).toBeGreaterThanOrEqual(1);\n  });\n\n  test(\"should handle attribute retrieval\", async () => {\n    const attributeValue = await menuButton.getAttributeValue(\"data-vibe\");\n    expect(attributeValue).toContain(\"MenuButton\");\n  });\n});\n"
  },
  {
    "path": "packages/testkit/__tests__/MenuItem.test.ts",
    "content": "import { test, expect, FrameLocator } from \"@playwright/test\";\nimport { MenuItem } from \"../components/MenuItem\";\nimport { menuItemStory } from \"./utils/url-helper\";\n\nlet frame: FrameLocator;\nlet menuItem: MenuItem;\nconst menuItemLocator = 'li[role=\"menuitem\"]';\nconst frameLocator = \"[id='storybook-preview-iframe']\";\n\ntest.describe(\"Testkit - Unit Tests - MenuItem\", () => {\n  test.beforeEach(async ({ page }) => {\n    await page.goto(menuItemStory);\n    frame = page.frameLocator(frameLocator);\n    menuItem = new MenuItem(page, frame.locator(menuItemLocator), \"Menu Item\");\n    await page.reload();\n    await menuItem.waitForElementToBeVisible();\n  });\n\n  test(\"should be enabled by default\", async () => {\n    await expect(menuItem.getLocator()).toBeEnabled();\n  });\n\n  test(\"should be visible by default\", async () => {\n    await expect(menuItem.getLocator()).toBeVisible();\n  });\n\n  test(\"should be clickable\", async () => {\n    await menuItem.click();\n    await expect(menuItem.getLocator()).toBeEnabled();\n  });\n\n  test(\"should handle multiple clicks\", async () => {\n    await menuItem.click();\n    await menuItem.click();\n    await menuItem.click();\n    await expect(menuItem.getLocator()).toBeEnabled();\n  });\n\n  test(\"should be hoverable\", async () => {\n    await menuItem.hover();\n    await expect(menuItem.getLocator()).toBeEnabled();\n  });\n\n  test(\"should have proper text content\", async () => {\n    const text = await menuItem.getText();\n    expect.soft(text).toBe(\"Menu item\");\n    expect.soft(text).toBeTruthy();\n    expect(text.length).toBeGreaterThan(0);\n  });\n\n  test(\"should maintain enabled state after interactions\", async () => {\n    await menuItem.hover();\n    await menuItem.click();\n    await expect(menuItem.getLocator()).toBeEnabled();\n  });\n\n  test(\"should maintain visibility after interactions\", async () => {\n    await menuItem.hover();\n    await menuItem.click();\n    await expect(menuItem.getLocator()).toBeVisible();\n  });\n\n  test(\"should scroll into view when needed\", async () => {\n    await menuItem.scrollIntoView();\n    await expect(menuItem.getLocator()).toBeEnabled();\n  });\n\n  test(\"should count elements correctly\", async () => {\n    const count = await menuItem.count();\n    expect(count).toBeGreaterThanOrEqual(1);\n  });\n\n  test(\"should handle attribute retrieval\", async () => {\n    const attributeValue = await menuItem.getAttributeValue(\"aria-selected\");\n    expect(attributeValue).toContain(\"false\");\n  });\n\n  test(\"should check if menu item is enabled by default\", async () => {\n    await expect(menuItem.getLocator()).toBeEnabled();\n  });\n});\n"
  },
  {
    "path": "packages/testkit/__tests__/Modal.test.ts",
    "content": "import { test, expect, FrameLocator } from \"@playwright/test\";\nimport { Modal } from \"../components\";\nimport { modalStory } from \"./utils/url-helper\";\n\nlet frame: FrameLocator;\nlet modal: Modal;\nconst modalLocator = \"#modal-basic\";\nconst frameLocator = \"[id='storybook-preview-iframe']\";\n\ntest.describe(\"Testkit - Unit Tests - Modal\", () => {\n  test.beforeEach(async ({ page }) => {\n    await page.goto(modalStory);\n    frame = page.frameLocator(frameLocator);\n    modal = new Modal(page, frame.locator(modalLocator), \"Modal\");\n    await page.reload();\n    await modal.waitForElementToBeVisible();\n  });\n\n  test(\"Modal should be able to close modal\", async () => {\n    await modal.closeModal();\n    await expect(modal.getLocator()).toBeHidden();\n  });\n\n  test(\"should be visible by default\", async () => {\n    await expect(modal.getLocator()).toBeVisible();\n  });\n\n  test(\"should be hoverable\", async () => {\n    await modal.hover();\n    await expect(modal.getLocator()).toBeVisible();\n  });\n\n  test(\"should count elements correctly\", async () => {\n    const count = await modal.count();\n    expect(count).toBeGreaterThanOrEqual(1);\n  });\n\n  test(\"should handle attribute retrieval\", async () => {\n    const attributeValue = await modal.getAttributeValue(\"role\");\n    expect(attributeValue).toContain(\"dialog\");\n  });\n});\n"
  },
  {
    "path": "packages/testkit/__tests__/RadioButton.test.ts",
    "content": "import { test, expect, FrameLocator } from \"@playwright/test\";\nimport { BaseElement, RadioButton } from \"../components\";\nimport { radioButtonStory } from \"./utils/url-helper\";\n\nlet frame: FrameLocator;\nlet radioButton: RadioButton;\nconst radioButtonLocator = 'label[data-testid^=\"radio-button\"]';\nconst frameLocator = \"[id='storybook-preview-iframe']\";\n\ntest.describe(\"Testkit - Unit Tests - RadioButton\", () => {\n  test.beforeEach(async ({ page }) => {\n    await page.goto(radioButtonStory);\n    frame = page.frameLocator(frameLocator);\n    radioButton = new RadioButton(page, frame.locator(radioButtonLocator), \"RadioButton\");\n    await page.reload();\n    await radioButton.waitForElementToBeVisible();\n  });\n\n  test(\"should be initially unchecked\", async () => {\n    await expect(radioButton.getLocator()).not.toBeChecked();\n  });\n\n  test(\"should be able to be checked\", async () => {\n    await radioButton.select();\n    await expect(radioButton.getLocator()).toBeChecked();\n  });\n\n  test(\"should be enabled by default\", async () => {\n    await expect(radioButton.getLocator()).toBeEnabled();\n  });\n\n  test(\"should be visible by default\", async () => {\n    await expect(radioButton.getLocator()).toBeVisible();\n  });\n\n  test(\"should be hoverable\", async () => {\n    await radioButton.hover();\n    await expect(radioButton.getLocator()).toBeEnabled();\n  });\n\n  test(\"should count elements correctly\", async () => {\n    const count = await radioButton.count();\n    expect(count).toBeGreaterThanOrEqual(1);\n  });\n\n  test(\"should handle attribute retrieval\", async () => {\n    const attributeValue = await new BaseElement(\n      radioButton.getPage(),\n      radioButton.getLocator().locator(\"input\"),\n      \"RadioButton\"\n    ).getAttributeValue(\"type\");\n    expect(attributeValue).toContain(\"radio\");\n  });\n});\n"
  },
  {
    "path": "packages/testkit/__tests__/Search.test.ts",
    "content": "import { test, expect, FrameLocator } from \"@playwright/test\";\nimport { BaseElement, Search } from \"../components\";\nimport { searchStory } from \"./utils/url-helper\";\n\nlet frame: FrameLocator;\nlet search: Search;\nconst searchLocator = \"div[role='search']\";\nconst frameLocator = \"[id='storybook-preview-iframe']\";\n\ntest.describe(\"Testkit - Unit Tests - Search\", () => {\n  test.beforeEach(async ({ page }) => {\n    await page.goto(searchStory);\n    frame = page.frameLocator(frameLocator);\n    search = new Search(page, frame.locator(searchLocator), \"Search\");\n    await page.reload();\n    await search.waitForElementToBeVisible();\n  });\n\n  test(\"should be initially empty\", async () => {\n    expect(await search.isEmpty()).toBe(true);\n  });\n\n  test(\"should be able to set text\", async () => {\n    const testText = \"Hello World\";\n    await search.setText(testText);\n    expect.soft(await search.isEmpty()).toBe(false);\n    expect(await search.getText()).toBe(testText);\n  });\n\n  test(\"should be able to clear text\", async () => {\n    await search.setText(\"Some text\");\n    expect.soft(await search.isEmpty()).toBe(false);\n    await search.clear();\n    expect(await search.isEmpty()).toBe(true);\n  });\n\n  test(\"should correctly identify empty state\", async () => {\n    expect.soft(await search.isEmpty()).toBe(true);\n    await search.setText(\"Not empty\");\n    expect.soft(await search.isEmpty()).toBe(false);\n    await search.clear();\n    expect(await search.isEmpty()).toBe(true);\n  });\n\n  test(\"should handle multiple text changes\", async () => {\n    await search.setText(\"First text\");\n    expect.soft(await search.getText()).toBe(\"First text\");\n    await search.setText(\"Second text\");\n    expect.soft(await search.getText()).toBe(\"Second text\");\n    await search.clear();\n    expect(await search.isEmpty()).toBe(true);\n  });\n\n  test(\"should handle empty string input\", async () => {\n    await search.setText(\"\");\n    expect(await search.isEmpty()).toBe(true);\n  });\n\n  test(\"should handle special characters\", async () => {\n    const specialText = \"!@#$%^&*()_+-=[]{}|;':\\\",./<>?\";\n    await search.setText(specialText);\n    expect.soft(await search.isEmpty()).toBe(false);\n    expect(await search.getText()).toBe(specialText);\n  });\n\n  test(\"should handle numbers\", async () => {\n    const numberText = \"123456789\";\n    await search.setText(numberText);\n    expect.soft(await search.isEmpty()).toBe(false);\n    expect(await search.getText()).toBe(numberText);\n  });\n\n  test(\"should handle long text\", async () => {\n    const longText =\n      \"This is a very long text that contains many characters and words to test the TextField component's ability to handle longer input values without any issues.\";\n    await search.setText(longText);\n    expect.soft(await search.isEmpty()).toBe(false);\n    expect(await search.getText()).toBe(longText);\n  });\n\n  test(\"should be enabled by default\", async () => {\n    await expect(search.getLocator()).toBeEnabled();\n  });\n\n  test(\"should be visible by default\", async () => {\n    await expect(search.getLocator()).toBeVisible();\n  });\n\n  test(\"should count elements correctly\", async () => {\n    const count = await search.count();\n    expect(count).toBeGreaterThanOrEqual(1);\n  });\n\n  test(\"should handle attribute retrieval\", async () => {\n    const attributeValue = await new BaseElement(\n      search.getPage(),\n      search.getLocator().locator(\"input\"),\n      \"Search\"\n    ).getAttributeValue(\"type\");\n    expect(attributeValue).toContain(\"search\");\n  });\n\n  test(\"should be able to clear search using the clear search button\", async () => {\n    await search.setText(\"Hello World\");\n    expect.soft(await search.isEmpty()).toBe(false);\n    expect.soft(await search.getText()).toBe(\"Hello World\");\n    await search.clickClearSearchButton();\n    expect(await search.isEmpty()).toBe(true);\n    expect(await search.getText()).toBe(\"\");\n  });\n});\n"
  },
  {
    "path": "packages/testkit/__tests__/SplitButton.test.ts",
    "content": "import { test, expect, FrameLocator } from \"@playwright/test\";\nimport { SplitButton } from \"../components/SplitButton\";\nimport { splitButtonStory } from \"./utils/url-helper\";\nimport { Menu } from \"../components/Menu\";\n\nlet frame: FrameLocator;\nlet splitButton: SplitButton;\nconst splitButtonLocator = 'div[data-testid^=\"split-button\"]';\nconst menuLocator = 'ul[role=\"menu\"]';\nconst frameLocator = \"[id='storybook-preview-iframe']\";\n\ntest.describe(\"Testkit - Unit Tests - SplitButton\", () => {\n  test.beforeEach(async ({ page }) => {\n    await page.goto(splitButtonStory);\n    frame = page.frameLocator(frameLocator);\n    const menu = new Menu(page, frame.locator(menuLocator), \"Menu\");\n    splitButton = new SplitButton(page, frame.locator(splitButtonLocator), \"Split Button\", menu);\n    await page.reload();\n    await splitButton.waitForElementToBeVisible();\n  });\n\n  test(\"should be enabled by default\", async () => {\n    await expect(splitButton.getLocator()).toBeEnabled();\n  });\n\n  test(\"should be visible by default\", async () => {\n    await expect(splitButton.getLocator()).toBeVisible();\n  });\n\n  test(\"should click primary button\", async () => {\n    await splitButton.clickPrimaryButton();\n    await expect(splitButton.getLocator()).toBeEnabled();\n  });\n\n  test(\"should handle multiple primary button clicks\", async () => {\n    await splitButton.clickPrimaryButton();\n    await splitButton.clickPrimaryButton();\n    await splitButton.clickPrimaryButton();\n    await expect(splitButton.getLocator()).toBeEnabled();\n  });\n\n  test(\"should be hoverable\", async () => {\n    await splitButton.hover();\n    await expect(splitButton.getLocator()).toBeEnabled();\n  });\n\n  test(\"should get primary button text\", async () => {\n    const text = await splitButton.getPrimaryButtonText();\n    expect.soft(text).toBe(\"Button\");\n    expect.soft(text).toBeTruthy();\n    expect(text.length).toBeGreaterThan(0);\n  });\n\n  test(\"should scroll into view when needed\", async () => {\n    await splitButton.scrollIntoView();\n    await expect(splitButton.getLocator()).toBeEnabled();\n  });\n\n  test(\"should count elements correctly\", async () => {\n    const count = await splitButton.count();\n    expect(count).toBeGreaterThanOrEqual(1);\n  });\n\n  test(\"should handle attribute retrieval\", async () => {\n    const attributeValue = await splitButton.getAttributeValue(\"data-vibe\");\n    expect(attributeValue).toContain(\"SplitButton\");\n  });\n\n  test(\"should handle waiting for visibility states\", async () => {\n    await splitButton.waitForElementToBeVisible();\n    await expect(splitButton.getLocator()).toBeVisible();\n  });\n\n  test(\"should open secondary button menu\", async () => {\n    await splitButton.openMenu();\n    expect(await splitButton.isMenuExpanded()).toBe(true);\n  });\n\n  test(\"should close secondary button menu\", async () => {\n    await splitButton.closeMenu();\n    expect(await splitButton.isMenuExpanded()).toBe(false);\n  });\n});\n"
  },
  {
    "path": "packages/testkit/__tests__/Steps.test.ts",
    "content": "import { test, expect, FrameLocator } from \"@playwright/test\";\nimport { BaseElement, Steps } from \"../components\";\nimport { stepsStory } from \"./utils/url-helper\";\n\nlet frame: FrameLocator;\nlet steps: Steps;\nconst stepsLocator = 'div[data-testid^=\"steps\"]';\nconst frameLocator = \"[id='storybook-preview-iframe']\";\n\ntest.describe(\"Testkit - Unit Tests - Steps\", () => {\n  test.beforeEach(async ({ page }) => {\n    await page.goto(stepsStory);\n    frame = page.frameLocator(frameLocator);\n    steps = new Steps(page, frame.locator(stepsLocator), \"Steps\");\n    await page.reload();\n    await steps.waitForElementToBeVisible();\n  });\n\n  test(\"should be clickable when back button is enabled\", async () => {\n    await steps.goToPreviousStep();\n    expect(await steps.isBackButtonEnabled()).toBe(true);\n  });\n\n  test(\"should be clickable when next button is enabled\", async () => {\n    await steps.goToNextStep();\n    expect(await steps.isForwardButtonEnabled()).toBe(true);\n  });\n\n  test(\"should be able to click step by index\", async () => {\n    await steps.clickStepDot(1);\n    expect(await steps.isStepDotActive(1)).toBe(true);\n  });\n\n  test(\"should be able to navigate to first step\", async () => {\n    await steps.navigateToBeginning();\n    expect(await steps.isStepDotActive(0)).toBe(true);\n  });\n\n  test(\"should be able to navigate to last step\", async () => {\n    await steps.navigateToEnd();\n    expect(await steps.isStepDotActive(4)).toBe(true);\n  });\n\n  test(\"should handle step navigation correctly\", async () => {\n    await steps.clickStepDot(0);\n    expect(await steps.isStepDotActive(0)).toBe(true);\n    await steps.clickStepDot(1);\n    expect(await steps.isStepDotActive(1)).toBe(true);\n    await steps.clickStepDot(2);\n    expect(await steps.isStepDotActive(2)).toBe(true);\n    await steps.clickStepDot(3);\n    expect(await steps.isStepDotActive(3)).toBe(true);\n    await steps.clickStepDot(4);\n    expect(await steps.isStepDotActive(4)).toBe(true);\n  });\n\n  test(\"should handle back and next button navigation\", async () => {\n    await steps.navigateToBeginning();\n    await steps.goToNextStep();\n    await steps.goToPreviousStep();\n    expect(await steps.isStepDotActive(0)).toBe(true);\n  });\n\n  test(\"Steps should be enabled by default\", async () => {\n    await expect(steps.getLocator()).toBeEnabled();\n  });\n\n  test(\"Steps should be visible by default\", async () => {\n    await expect(steps.getLocator()).toBeVisible();\n  });\n\n  test(\"should handle go to first and last step operations\", async () => {\n    await steps.navigateToEnd();\n    expect(await steps.isStepDotActive(4)).toBe(true);\n    await steps.navigateToBeginning();\n    expect(await steps.isStepDotActive(0)).toBe(true);\n  });\n\n  test(\"should correctly report active step index\", async () => {\n    await steps.clickStepDot(1);\n    const activeIndex = await steps.getActiveStepDotIndex();\n    expect(activeIndex).toBe(1);\n  });\n\n  test(\"should correctly report active step index after each step change\", async () => {\n    await steps.clickStepDot(1);\n    let activeIndex = await steps.getActiveStepDotIndex();\n    expect.soft(activeIndex).toBe(1);\n    await steps.clickStepDot(2);\n    activeIndex = await steps.getActiveStepDotIndex();\n    expect.soft(activeIndex).toBe(2);\n    await steps.clickStepDot(3);\n    activeIndex = await steps.getActiveStepDotIndex();\n    expect.soft(activeIndex).toBe(3);\n    await steps.clickStepDot(4);\n    activeIndex = await steps.getActiveStepDotIndex();\n    expect(activeIndex).toBe(4);\n  });\n\n  test(\"should count elements correctly\", async () => {\n    const count = await steps.count();\n    expect(count).toBeGreaterThanOrEqual(1);\n  });\n\n  test(\"should handle attribute retrieval\", async () => {\n    const attributeValue = await new BaseElement(\n      steps.getPage(),\n      steps.getLocator().locator(\"button\").first(),\n      \"Steps\"\n    ).getAttributeValue(\"data-vibe\");\n    expect(attributeValue).toContain(\"Button\");\n  });\n\n  test(\"should wait for steps to load\", async () => {\n    await steps.waitForStepsToLoad();\n    await expect(steps.getLocator()).toBeVisible();\n  });\n\n  test(\"should get total steps count\", async () => {\n    const totalStepsCount = await steps.getTotalStepsCount();\n    expect(totalStepsCount).toBe(5);\n  });\n\n  test(\"should get step by index\", async () => {\n    const step = await steps.getStepByIndex(1);\n    await expect(step.getLocator()).toBeVisible();\n  });\n\n  test(\"should get step dots\", async () => {\n    const stepDots = await steps.getStepDots();\n    expect(stepDots.length).toBe(5);\n  });\n\n  test(\"should get active step dot index\", async () => {\n    const activeStepDotIndex = await steps.getActiveStepDotIndex();\n    expect(activeStepDotIndex).toBe(2);\n  });\n\n  test(\"should check if step dot is active\", async () => {\n    const isStepDotActive = await steps.isStepDotActive(2);\n    expect(isStepDotActive).toBe(true);\n  });\n\n  test(\"should check if back button is enabled\", async () => {\n    const isBackButtonEnabled = await steps.isBackButtonEnabled();\n    expect(isBackButtonEnabled).toBe(true);\n  });\n\n  test(\"should check if forward button is enabled\", async () => {\n    const isForwardButtonEnabled = await steps.isForwardButtonEnabled();\n    expect(isForwardButtonEnabled).toBe(true);\n  });\n\n  test(\"should check if back button is visible\", async () => {\n    const isBackButtonVisible = await steps.isBackButtonVisible();\n    expect(isBackButtonVisible).toBe(true);\n  });\n\n  test(\"should check if forward button is visible\", async () => {\n    const isForwardButtonVisible = await steps.isForwardButtonVisible();\n    expect(isForwardButtonVisible).toBe(true);\n  });\n\n  test(\"should click step dot by index\", async () => {\n    await steps.clickStepDot(2);\n    expect(await steps.isStepDotActive(2)).toBe(true);\n  });\n});\n"
  },
  {
    "path": "packages/testkit/__tests__/TabList.test.ts",
    "content": "import { test, expect, FrameLocator } from \"@playwright/test\";\nimport { BaseElement, TabList } from \"../components\";\nimport { tabsStory } from \"./utils/url-helper\";\n\nlet frame: FrameLocator;\nlet tabList: TabList;\nconst tabsLocator = 'ul[role=\"tablist\"]';\nconst frameLocator = \"[id='storybook-preview-iframe']\";\n\ntest.describe(\"Testkit - Unit Tests - TabList\", () => {\n  test.beforeEach(async ({ page }) => {\n    await page.goto(tabsStory);\n    frame = page.frameLocator(frameLocator);\n    tabList = new TabList(page, frame.locator(tabsLocator), \"Tabs\");\n    await page.reload();\n    await tabList.waitForElementToBeVisible();\n  });\n\n  test(\"should be able to select a tab\", async () => {\n    await tabList.selectTab(\"Second\");\n    expect(await tabList.isTabSelected(\"Second\")).toBe(true);\n  });\n\n  test(\"should correctly identify selected tab\", async () => {\n    await tabList.selectTab(\"Second\");\n    expect.soft(await tabList.isTabSelected(\"Second\")).toBe(true);\n    expect(await tabList.isTabSelected(\"First\")).toBe(false);\n  });\n\n  test(\"should return selected tab name\", async () => {\n    await tabList.selectTab(\"Third\");\n    const selectedTabName = await tabList.getSelectedTabName();\n    expect(selectedTabName).toBe(\"Third\");\n  });\n\n  test(\"should handle tab selection changes\", async () => {\n    await tabList.selectTab(\"First\");\n    expect.soft(await tabList.isTabSelected(\"First\")).toBe(true);\n    expect.soft(await tabList.getSelectedTabName()).toBe(\"First\");\n    expect.soft(await tabList.isTabSelected(\"Second\")).toBe(false);\n    await tabList.selectTab(\"Second\");\n    expect.soft(await tabList.isTabSelected(\"Second\")).toBe(true);\n    expect.soft(await tabList.getSelectedTabName()).toBe(\"Second\");\n    expect(await tabList.isTabSelected(\"First\")).toBe(false);\n  });\n\n  test(\"should be enabled by default\", async () => {\n    await expect(tabList.getLocator()).toBeEnabled();\n  });\n\n  test(\"should be visible by default\", async () => {\n    await expect(tabList.getLocator()).toBeVisible();\n  });\n\n  test(\"should get tab name by index\", async () => {\n    const tabName = await tabList.getTabNameByIndex(0);\n    expect.soft(tabName).toBe(\"First\");\n    const tabName2 = await tabList.getTabNameByIndex(1);\n    expect.soft(tabName2).toBe(\"Second\");\n    const tabName3 = await tabList.getTabNameByIndex(2);\n    expect(tabName3).toBe(\"Third\");\n  });\n\n  test(\"should handle selecting the same tab multiple times\", async () => {\n    await tabList.selectTab(\"First\");\n    expect.soft(await tabList.isTabSelected(\"First\")).toBe(true);\n    await tabList.selectTab(\"First\");\n    expect.soft(await tabList.isTabSelected(\"First\")).toBe(true);\n    expect(await tabList.getSelectedTabName()).toBe(\"First\");\n  });\n\n  test(\"should count elements correctly\", async () => {\n    const count = await tabList.count();\n    expect(count).toBeGreaterThanOrEqual(1);\n  });\n\n  test(\"should handle attribute retrieval\", async () => {\n    const attributeValue = await new BaseElement(\n      tabList.getPage(),\n      tabList.getLocator().locator(\"li\").first(),\n      \"TabList\"\n    ).getAttributeValue(\"role\");\n    expect(attributeValue).toContain(\"tab\");\n  });\n});\n"
  },
  {
    "path": "packages/testkit/__tests__/Text.test.ts",
    "content": "import { test, expect, FrameLocator } from \"@playwright/test\";\nimport { Text } from \"../components\";\nimport { textStory } from \"./utils/url-helper\";\n\nlet frame: FrameLocator;\nlet text: Text;\nconst textLocator = 'div[data-testid=\"text\"]';\nconst frameLocator = \"[id='storybook-preview-iframe']\";\n\ntest.describe(\"Testkit - Unit Tests - Text\", () => {\n  test.beforeEach(async ({ page }) => {\n    await page.goto(textStory);\n    frame = page.frameLocator(frameLocator);\n    text = new Text(page, frame.locator(textLocator), \"Text\");\n    await page.reload();\n    await text.waitForElementToBeVisible();\n  });\n\n  test(\"should be enabled by default\", async () => {\n    await expect(text.getLocator()).toBeEnabled();\n  });\n\n  test(\"should be visible by default\", async () => {\n    await expect(text.getLocator()).toBeVisible();\n  });\n\n  test(\"should be hoverable\", async () => {\n    await text.hover();\n    await expect(text.getLocator()).toBeVisible();\n  });\n\n  test(\"should have proper text content\", async () => {\n    const textContent = await text.getText();\n    expect.soft(textContent).toBe(\"Hi, I'm a text!\");\n    expect.soft(textContent).toBeTruthy();\n    expect(textContent.length).toBeGreaterThan(0);\n  });\n\n  test(\"should maintain enabled state after interactions\", async () => {\n    await text.hover();\n    await text.click();\n    await expect(text.getLocator()).toBeEnabled();\n  });\n\n  test(\"should maintain visibility after interactions\", async () => {\n    await text.hover();\n    await text.click();\n    await expect(text.getLocator()).toBeVisible();\n  });\n\n  test(\"should scroll into view when needed\", async () => {\n    await text.scrollIntoView();\n    await expect(text.getLocator()).toBeVisible();\n  });\n\n  test(\"should count elements correctly\", async () => {\n    const count = await text.count();\n    expect(count).toBeGreaterThanOrEqual(1);\n  });\n\n  test(\"should handle waiting for visibility states\", async () => {\n    await text.waitForElementToBeVisible();\n    await expect(text.getLocator()).toBeVisible();\n  });\n\n  test(\"should handle waiting for element attachment\", async () => {\n    await text.waitForElementToBeAttached();\n    await expect(text.getLocator()).toBeVisible();\n  });\n});\n"
  },
  {
    "path": "packages/testkit/__tests__/TextArea.test.ts",
    "content": "import { test, expect, FrameLocator } from \"@playwright/test\";\nimport { TextArea } from \"../components\";\nimport { textAreaStory } from \"./utils/url-helper\";\n\nlet frame: FrameLocator;\nlet textArea: TextArea;\nconst textAreaLocator = 'div[data-testid^=\"text-area\"]';\nconst frameLocator = \"[id='storybook-preview-iframe']\";\n\ntest.describe(\"Testkit - Unit Tests - TextArea\", () => {\n  test.beforeEach(async ({ page }) => {\n    await page.goto(textAreaStory);\n    frame = page.frameLocator(frameLocator);\n    textArea = new TextArea(page, frame.locator(textAreaLocator), \"TextArea\");\n    await page.reload();\n    await textArea.waitForElementToBeVisible();\n  });\n\n  test(\"should be able to set text\", async () => {\n    const testText = \"Hello World\";\n    await textArea.setText(testText);\n    expect(await textArea.getText()).toBe(testText);\n  });\n\n  test(\"should handle multiline text\", async () => {\n    const multilineText = \"Line 1\\nLine 2\\nLine 3\";\n    await textArea.setText(multilineText);\n    expect(await textArea.getText()).toBe(multilineText);\n  });\n\n  test(\"should handle empty string input\", async () => {\n    await textArea.setText(\"\");\n    expect(await textArea.getText()).toBe(\"\");\n  });\n\n  test(\"should handle special characters\", async () => {\n    const specialText = \"!@#$%^&*()_+-=[]{}|;':\\\",./<>?\";\n    await textArea.setText(specialText);\n    expect(await textArea.getText()).toBe(specialText);\n  });\n\n  test(\"should handle numbers\", async () => {\n    const numberText = \"123456789\";\n    await textArea.setText(numberText);\n    expect(await textArea.getText()).toBe(numberText);\n  });\n\n  test(\"should handle long text\", async () => {\n    const longText =\n      \"This is a very long text that contains many characters and words to test the TextArea component's ability to handle longer input values without any issues. It should be able to accommodate multiple lines and extensive content.\";\n    await textArea.setText(longText);\n    expect(await textArea.getText()).toBe(longText);\n  });\n\n  test(\"should handle multiple text changes\", async () => {\n    await textArea.setText(\"First text\");\n    expect.soft(await textArea.getText()).toBe(\"First text\");\n    await textArea.setText(\"Second text\");\n    expect(await textArea.getText()).toBe(\"Second text\");\n  });\n\n  test(\"should handle text with tabs\", async () => {\n    const textWithTabs = \"Line 1\\tTabbed text\\nLine 2\\tAnother tab\";\n    await textArea.setText(textWithTabs);\n    expect(await textArea.getText()).toBe(textWithTabs);\n  });\n\n  test(\"should be enabled by default\", async () => {\n    await expect(textArea.getLocator()).toBeEnabled();\n  });\n\n  test(\"should be visible by default\", async () => {\n    await expect(textArea.getLocator()).toBeVisible();\n  });\n\n  test(\"should count elements correctly\", async () => {\n    const count = await textArea.count();\n    expect(count).toBeGreaterThanOrEqual(1);\n  });\n\n  test(\"should handle attribute retrieval\", async () => {\n    const attributeValue = await textArea.getAttributeValue(\"data-vibe\");\n    expect(attributeValue).toContain(\"TextArea\");\n  });\n\n  test(\"should be able to clear text\", async () => {\n    await textArea.setText(\"Hello World\");\n    expect.soft(await textArea.getText()).toBe(\"Hello World\");\n    await textArea.clearText();\n    expect(await textArea.getText()).toBe(\"\");\n  });\n\n  test(\"should be able to check if text area is empty\", async () => {\n    expect(await textArea.isEmpty()).toBe(true);\n    await textArea.setText(\"Hello World\");\n    expect(await textArea.isEmpty()).toBe(false);\n    await textArea.clearText();\n    expect(await textArea.isEmpty()).toBe(true);\n  });\n});\n"
  },
  {
    "path": "packages/testkit/__tests__/TextField.test.ts",
    "content": "import { test, expect, FrameLocator } from \"@playwright/test\";\nimport { TextField } from \"../components\";\nimport { textfieldStory } from \"./utils/url-helper\";\n\nlet frame: FrameLocator;\nlet textField: TextField;\nconst textFieldLocator = 'input[data-testid^=\"text-field\"]';\nconst frameLocator = \"[id='storybook-preview-iframe']\";\n\ntest.describe(\"Testkit - Unit Tests - TextField\", () => {\n  test.beforeEach(async ({ page }) => {\n    await page.goto(textfieldStory);\n    frame = page.frameLocator(frameLocator);\n    textField = new TextField(page, frame.locator(textFieldLocator), \"TextField\");\n    await page.reload();\n    await textField.waitForElementToBeVisible();\n  });\n\n  test(\"should be initially empty\", async () => {\n    expect(await textField.isEmpty()).toBe(true);\n  });\n\n  test(\"should be able to set text\", async () => {\n    const testText = \"Hello World\";\n    await textField.setText(testText);\n    expect.soft(await textField.isEmpty()).toBe(false);\n    expect(await textField.getText()).toBe(testText);\n  });\n\n  test(\"should be able to clear text\", async () => {\n    await textField.setText(\"Some text\");\n    expect.soft(await textField.isEmpty()).toBe(false);\n    await textField.clearText();\n    expect(await textField.isEmpty()).toBe(true);\n  });\n\n  test(\"should correctly identify empty state\", async () => {\n    expect.soft(await textField.isEmpty()).toBe(true);\n    await textField.setText(\"Not empty\");\n    expect.soft(await textField.isEmpty()).toBe(false);\n    await textField.clearText();\n    expect(await textField.isEmpty()).toBe(true);\n  });\n\n  test(\"should handle multiple text changes\", async () => {\n    await textField.setText(\"First text\");\n    expect.soft(await textField.getText()).toBe(\"First text\");\n    await textField.setText(\"Second text\");\n    expect.soft(await textField.getText()).toBe(\"Second text\");\n    await textField.clearText();\n    expect(await textField.isEmpty()).toBe(true);\n  });\n\n  test(\"should handle empty string input\", async () => {\n    await textField.setText(\"\");\n    expect(await textField.isEmpty()).toBe(true);\n  });\n\n  test(\"should handle special characters\", async () => {\n    const specialText = \"!@#$%^&*()_+-=[]{}|;':\\\",./<>?\";\n    await textField.setText(specialText);\n    expect.soft(await textField.isEmpty()).toBe(false);\n    expect(await textField.getText()).toBe(specialText);\n  });\n\n  test(\"should handle numbers\", async () => {\n    const numberText = \"123456789\";\n    await textField.setText(numberText);\n    expect.soft(await textField.isEmpty()).toBe(false);\n    expect(await textField.getText()).toBe(numberText);\n  });\n\n  test(\"should handle long text\", async () => {\n    const longText =\n      \"This is a very long text that contains many characters and words to test the TextField component's ability to handle longer input values without any issues.\";\n    await textField.setText(longText);\n    expect.soft(await textField.isEmpty()).toBe(false);\n    expect(await textField.getText()).toBe(longText);\n  });\n\n  test(\"should be enabled by default\", async () => {\n    await expect(textField.getLocator()).toBeEnabled();\n  });\n\n  test(\"should be visible by default\", async () => {\n    await expect(textField.getLocator()).toBeVisible();\n  });\n\n  test(\"should count elements correctly\", async () => {\n    const count = await textField.count();\n    expect(count).toBeGreaterThanOrEqual(1);\n  });\n\n  test(\"should handle attribute retrieval\", async () => {\n    const attributeValue = await textField.getAttributeValue(\"type\");\n    expect(attributeValue).toContain(\"text\");\n  });\n\n  test(\"should be able to check if text field is empty\", async () => {\n    expect(await textField.isEmpty()).toBe(true);\n    await textField.setText(\"Hello World\");\n    expect(await textField.isEmpty()).toBe(false);\n    await textField.clearText();\n    expect(await textField.isEmpty()).toBe(true);\n  });\n});\n"
  },
  {
    "path": "packages/testkit/__tests__/Toast.test.ts",
    "content": "import { test, expect, FrameLocator } from \"@playwright/test\";\nimport { linkToastStory, buttonToastStory, loadingToastStory } from \"./utils/url-helper\";\nimport { Toast } from \"../components/Toast\";\n\nconst toastLocator = 'div[data-testid^=\"toast_\"]';\nconst frameLocator = \"[id='storybook-preview-iframe']\";\n\ntest.describe(\"Testkit - Unit Tests - Button Toast\", () => {\n  let frame: FrameLocator;\n  let toast: Toast;\n\n  test.beforeEach(async ({ page }) => {\n    await page.goto(buttonToastStory);\n    frame = page.frameLocator(frameLocator);\n    toast = new Toast(page, frame.locator(toastLocator), \"Toast\");\n    await page.reload();\n    await toast.waitForElementToBeVisible();\n  });\n\n  test(\"should be enabled by default\", async () => {\n    await expect(toast.getLocator()).toBeEnabled();\n  });\n\n  test(\"should be visible by default\", async () => {\n    await expect(toast.getLocator()).toBeVisible();\n  });\n\n  test(\"should click the button\", async () => {\n    await toast.clickButton();\n    await expect(toast.getLocator()).toBeEnabled();\n  });\n\n  test(\"should get button text\", async () => {\n    const buttonText = await toast.getButtonText();\n    expect.soft(buttonText).toBe(\"Button\");\n    expect.soft(buttonText).toBeTruthy();\n    expect(buttonText.length).toBeGreaterThan(0);\n  });\n\n  test(\"should click close button\", async () => {\n    await toast.close();\n    await expect(toast.getLocator()).toBeEnabled();\n  });\n\n  test(\"should handle combination of button and close button clicks\", async () => {\n    await toast.clickButton();\n    await toast.close();\n    await expect(toast.getLocator()).toBeEnabled();\n  });\n\n  test(\"should be hoverable\", async () => {\n    await toast.hover();\n    await expect(toast.getLocator()).toBeEnabled();\n  });\n\n  test(\"should maintain enabled state after interactions\", async () => {\n    await toast.clickButton();\n    await toast.hover();\n    await expect(toast.getLocator()).toBeEnabled();\n  });\n\n  test(\"should maintain visibility after button interactions\", async () => {\n    await toast.clickButton();\n    await toast.hover();\n    await expect(toast.getLocator()).toBeVisible();\n  });\n\n  test(\"should maintain visibility after scrolling\", async () => {\n    await toast.scrollIntoView();\n    await expect(toast.getLocator()).toBeVisible();\n  });\n\n  test(\"should count elements correctly\", async () => {\n    const count = await toast.count();\n    expect(count).toBeGreaterThanOrEqual(1);\n  });\n\n  test(\"should handle attribute retrieval\", async () => {\n    const attributeValue = await toast.getAttributeValue(\"role\");\n    expect(attributeValue).toContain(\"alert\");\n  });\n\n  test(\"should handle waiting for visibility states\", async () => {\n    await toast.waitForElementToBeVisible();\n    await expect(toast.getLocator()).toBeVisible();\n  });\n\n  test(\"should have close button\", async () => {\n    expect(await toast.hasCloseButton()).toBe(true);\n  });\n\n  test(\"should have type\", async () => {\n    const type = await toast.getType();\n    expect(type).toBe(\"normal\");\n  });\n});\n\ntest.describe(\"Testkit - Unit Tests - Link Toast\", () => {\n  let frame: FrameLocator;\n  let toast: Toast;\n\n  test.beforeEach(async ({ page }) => {\n    await page.goto(linkToastStory);\n    frame = page.frameLocator(frameLocator);\n    toast = new Toast(page, frame.locator(toastLocator), \"Toast\");\n    await page.reload();\n    await toast.waitForElementToBeVisible();\n  });\n\n  test(\"should be enabled by default\", async () => {\n    await expect(toast.getLocator()).toBeEnabled();\n  });\n\n  test(\"should be visible by default\", async () => {\n    await expect(toast.getLocator()).toBeVisible();\n  });\n\n  test(\"should click the link\", async () => {\n    await toast.clickLink();\n    await expect(toast.getLocator()).toBeEnabled();\n  });\n\n  test(\"should handle multiple link clicks\", async () => {\n    await toast.clickLink();\n    await toast.clickLink();\n    await toast.clickLink();\n    await expect(toast.getLocator()).toBeEnabled();\n  });\n\n  test(\"should get link text\", async () => {\n    const linkText = await toast.getLinkText();\n    expect.soft(linkText).toBe(\"Link to action\");\n    expect.soft(linkText).toBeTruthy();\n    expect(linkText.length).toBeGreaterThan(0);\n  });\n\n  test(\"should get link href\", async () => {\n    const linkHref = await toast.getLinkHref();\n    expect.soft(linkHref).toBe(\"https://monday.com\");\n    expect.soft(linkHref).toBeTruthy();\n    expect(linkHref.length).toBeGreaterThan(0);\n  });\n\n  test(\"should click close button\", async () => {\n    await toast.close();\n    await expect(toast.getLocator()).toBeEnabled();\n  });\n\n  test(\"should handle combination of link and close button clicks\", async () => {\n    await toast.clickLink();\n    await toast.close();\n    await expect(toast.getLocator()).toBeEnabled();\n  });\n\n  test(\"should be hoverable\", async () => {\n    await toast.hover();\n    await expect(toast.getLocator()).toBeEnabled();\n  });\n\n  test(\"should maintain enabled state after interactions\", async () => {\n    await toast.clickLink();\n    await toast.hover();\n    await expect(toast.getLocator()).toBeEnabled();\n  });\n\n  test(\"should maintain visibility after link interactions\", async () => {\n    await toast.clickLink();\n    await toast.hover();\n    await expect(toast.getLocator()).toBeVisible();\n  });\n\n  test(\"should scroll into view when needed\", async () => {\n    await toast.scrollIntoView();\n    await expect(toast.getLocator()).toBeEnabled();\n  });\n\n  test(\"should count elements correctly\", async () => {\n    const count = await toast.count();\n    expect(count).toBeGreaterThanOrEqual(1);\n  });\n\n  test(\"should handle attribute retrieval\", async () => {\n    const attributeValue = await toast.getAttributeValue(\"role\");\n    expect(attributeValue).toContain(\"alert\");\n  });\n\n  test(\"should handle waiting for visibility states\", async () => {\n    await toast.waitForElementToBeVisible();\n    await expect(toast.getLocator()).toBeVisible();\n  });\n\n  test(\"should navigate to the link\", async ({ page }) => {\n    const newPagePromise = page.waitForEvent(\"popup\");\n    await toast.clickLink();\n    const newPage = await newPagePromise;\n    expect(newPage.url()).toContain(\"https://monday.com/\");\n    await newPage.close();\n  });\n\n  test(\"should have close button\", async () => {\n    expect(await toast.hasCloseButton()).toBe(true);\n  });\n\n  test(\"should have type\", async () => {\n    const type = await toast.getType();\n    expect(type).toBe(\"normal\");\n  });\n});\n\ntest.describe(\"Testkit - Unit Tests - Loading Toast\", () => {\n  let frame: FrameLocator;\n  let toast: Toast;\n\n  test.beforeEach(async ({ page }) => {\n    await page.goto(loadingToastStory);\n    frame = page.frameLocator(frameLocator);\n    toast = new Toast(page, frame.locator(toastLocator), \"Toast\");\n    await page.reload();\n    await toast.waitForElementToBeVisible();\n  });\n\n  test(\"should be enabled by default\", async () => {\n    await expect(toast.getLocator()).toBeEnabled();\n  });\n\n  test(\"should be visible by default\", async () => {\n    await expect(toast.getLocator()).toBeVisible();\n  });\n\n  test(\"should click close button\", async () => {\n    await toast.close();\n    await expect(toast.getLocator()).toBeEnabled();\n  });\n\n  test(\"should be hoverable\", async () => {\n    await toast.hover();\n    await expect(toast.getLocator()).toBeEnabled();\n  });\n\n  test(\"should maintain enabled state after interactions\", async () => {\n    await toast.hover();\n    await toast.click();\n    await expect(toast.getLocator()).toBeEnabled();\n  });\n\n  test(\"should maintain visibility after interactions\", async () => {\n    await toast.hover();\n    await toast.click();\n    await expect(toast.getLocator()).toBeVisible();\n  });\n\n  test(\"should scroll into view when needed\", async () => {\n    await toast.scrollIntoView();\n    await expect(toast.getLocator()).toBeEnabled();\n  });\n\n  test(\"should count elements correctly\", async () => {\n    const count = await toast.count();\n    expect(count).toBeGreaterThanOrEqual(1);\n  });\n\n  test(\"should handle attribute retrieval\", async () => {\n    const attributeValue = await toast.getAttributeValue(\"role\");\n    expect(attributeValue).toContain(\"alert\");\n  });\n\n  test(\"should handle waiting for visibility states\", async () => {\n    await toast.waitForElementToBeVisible();\n    await expect(toast.getLocator()).toBeVisible();\n  });\n\n  test(\"should have close button\", async () => {\n    expect(await toast.hasCloseButton()).toBe(true);\n  });\n\n  test(\"should have type\", async () => {\n    const type = await toast.getType();\n    expect(type).toBe(\"normal\");\n  });\n\n  test(\"should be loading\", async () => {\n    expect(await toast.isLoading()).toBe(true);\n  });\n});\n"
  },
  {
    "path": "packages/testkit/__tests__/Toggle.test.ts",
    "content": "import { test, expect, FrameLocator } from \"@playwright/test\";\nimport { BaseElement, Toggle } from \"../components\";\nimport { toggleStory } from \"./utils/url-helper\";\n\nlet frame: FrameLocator;\nlet toggle: Toggle;\nconst toggleLocator = \"input[data-testid='toggle']\";\nconst frameLocator = \"[id='storybook-preview-iframe']\";\n\ntest.describe(\"Testkit - Unit Tests - Toggle\", () => {\n  test.beforeEach(async ({ page }) => {\n    await page.goto(toggleStory);\n    frame = page.frameLocator(frameLocator);\n    toggle = new Toggle(page, frame.locator(toggleLocator).locator(\"..\"), \"Toggle\");\n    await page.reload();\n    await toggle.waitForElementToBeVisible();\n  });\n\n  test(\"should be initially on\", async () => {\n    expect(await toggle.isOn()).toBe(true);\n  });\n\n  test(\"should be able to turn on\", async () => {\n    await toggle.set(false);\n    await toggle.set(true);\n    expect(await toggle.isOn()).toBe(true);\n  });\n\n  test(\"should be able to turn off\", async () => {\n    await toggle.set(false);\n    expect.soft(await toggle.isOn()).toBe(false);\n    await toggle.set(true);\n    expect.soft(await toggle.isOn()).toBe(true);\n    await toggle.set(false);\n    expect(await toggle.isOn()).toBe(false);\n  });\n\n  test(\"should maintain state when set to same value\", async () => {\n    await toggle.set(true);\n    expect.soft(await toggle.isOn()).toBe(true);\n    await toggle.set(true);\n    expect.soft(await toggle.isOn()).toBe(true);\n    await toggle.set(false);\n    expect.soft(await toggle.isOn()).toBe(false);\n    await toggle.set(false);\n    expect(await toggle.isOn()).toBe(false);\n  });\n\n  test(\"should be enabled by default\", async () => {\n    await expect(toggle.getLocator()).toBeEnabled();\n  });\n\n  test(\"should be visible by default\", async () => {\n    await expect(toggle.getLocator()).toBeVisible();\n  });\n\n  test(\"should count elements correctly\", async () => {\n    const count = await toggle.count();\n    expect(count).toBeGreaterThanOrEqual(1);\n  });\n\n  test(\"should handle attribute retrieval\", async () => {\n    const attributeValue = await new BaseElement(\n      toggle.getPage(),\n      toggle.getLocator().locator(\"input\"),\n      \"Toggle\"\n    ).getAttributeValue(\"type\");\n    expect(attributeValue).toContain(\"checkbox\");\n  });\n});\n"
  },
  {
    "path": "packages/testkit/__tests__/utils/url-helper.js",
    "content": "export const buttonStory = \"/?path=/story/components-button--overview\";\nexport const buttonGroupStory = \"/?path=/story/components-buttongroup--overview\";\nexport const buttonToastStory = \"/?path=/story/components-toast--default-with-button\";\nexport const checkboxStory = \"/?path=/story/components-checkbox--overview\";\nexport const colorPickerStory = \"/?path=/story/components-colorpicker--overview\";\nexport const comboboxStory = \"/?path=/story/components-combobox-deprecated--overview\";\nexport const dropdownStory = \"/?path=/story/components-dropdown-basic-dropdown--searchable\";\nexport const editableHeadingStory = \"/?path=/story/components-editableheading--overview\";\nexport const editableTextStory = \"/?path=/story/components-editabletext--overview\";\nexport const expandCollapseStory = \"/?path=/story/components-expandcollapse--overview\";\nexport const iconButtonStory = \"/?path=/story/components-iconbutton--overview\";\nexport const linkStory = \"/?path=/story/components-link--overview\";\nexport const linkToastStory = \"/?path=/story/components-toast--toast-with-link\";\nexport const listStory = \"/?path=/story/components-list-list--overview\";\nexport const listItemStory = \"/?path=/story/components-list-listitem--overview\";\nexport const loaderStory = \"/?path=/story/components-loader--overview\";\nexport const loadingToastStory = \"/?path=/story/components-toast--toast-with-loading\";\nexport const menuStory = \"/?path=/story/components-menu-menu--overview\";\nexport const menuItemStory = \"/?path=/story/components-menu-menuitem--overview\";\nexport const menuButtonStory = \"/?path=/story/components-menubutton--overview\";\nexport const modalStory = \"/?path=/story/components-modal-basic-modal--overview\";\nexport const radioButtonStory = \"/?path=/story/components-radiobutton--overview\";\nexport const searchStory = \"/?path=/story/components-search--overview\";\nexport const splitButtonStory = \"/?path=/story/components-splitbutton--overview\";\nexport const stepsStory = \"/?path=/story/components-steps--overview\";\nexport const tabsStory = \"/?path=/story/components-tabs--overview\";\nexport const textStory = \"/?path=/story/text-text--overview\";\nexport const textAreaStory = \"/?path=/story/components-textarea--overview\";\nexport const textfieldStory = \"/?path=/story/components-textfield--overview\";\nexport const toggleStory = \"/?path=/story/components-toggle--overview\";\n"
  },
  {
    "path": "packages/testkit/components/BaseElement.ts",
    "content": "import { test, Page, Locator } from \"@playwright/test\";\n\n/**\n * Class representing a base element for Playwright tests.\n */\nexport class BaseElement {\n  page: Page;\n  locator: Locator;\n  elementReportName: string;\n\n  private readonly DEFAULT_TIMEOUT = 30000; // 30 seconds\n\n  /**\n   * Create a BaseElement.\n   * @param {Page} page - The Playwright page object.\n   * @param {Locator} locator - The locator for the element.\n   * @param {string} elementReportName - The name for reporting purposes.\n   */\n  constructor(page: Page, locator: Locator, elementReportName: string) {\n    this.page = page;\n    this.locator = locator;\n    this.elementReportName = elementReportName;\n  }\n\n  /**\n   * Get the page object.\n   * @returns {Page} - The page object.\n   */\n  getPage(): Page {\n    return this.page;\n  }\n\n  /**\n   * Get the locator of the element.\n   * @returns {Locator} - The locator of the element.\n   */\n  getLocator(): Locator {\n    return this.locator;\n  }\n\n  /**\n   * Get the element report name.\n   * @returns {string} - The element report name.\n   */\n  getElementReportName(): string {\n    return this.elementReportName;\n  }\n\n  /**\n   * Hover the element.\n   * @returns {Promise<void>}\n   */\n  async hover(): Promise<void> {\n    await test.step(`Hover ${this.getElementReportName()}`, async () => {\n      await this.getLocator().hover();\n    });\n  }\n\n  /**\n   * Click the element.\n   * @returns {Promise<void>}\n   */\n  async click(): Promise<void> {\n    await test.step(`Click ${this.getElementReportName()}`, async () => {\n      await this.getLocator().click();\n    });\n  }\n\n  /**\n   * Get the text of the element.\n   * @returns {Promise<string>} - The text of the element (empty string if only whitespace or empty, throws if all are null/undefined).\n   */\n  async getText(): Promise<string> {\n    return await test.step(`Get text of ${this.getElementReportName()}`, async () => {\n      const texts = [\n        await this.getLocator().innerText(),\n        await this.getLocator().textContent(),\n        await this.getAttributeValue(\"value\")\n      ];\n\n      // If all are null/undefined, throw error\n      if (texts.every(value => value == null || value === undefined)) {\n        throw new Error(`Could not retrieve text for ${this.getElementReportName()}: all texts are null/undefined`);\n      }\n\n      // Trim all string values, keep null/undefined as is\n      const trimmed = texts.map(value => (typeof value === \"string\" ? value.trim() : value));\n\n      // Filter out null/undefined values\n      const nonNullValues = trimmed.filter(value => value != null);\n\n      // If all non-null are empty string, return \"\"\n      if (nonNullValues.every(value => value === \"\")) {\n        return \"\";\n      }\n\n      // Otherwise, return the first non-empty string by priority\n      const firstNonEmpty = nonNullValues.find(value => typeof value === \"string\" && value !== \"\");\n      if (typeof firstNonEmpty === \"string\") {\n        return firstNonEmpty;\n      }\n\n      // Fallback: if only empty string(s) and null/undefined remain, return \"\"\n      return \"\";\n    });\n  }\n\n  /**\n   * Scroll the element into view if needed.\n   * @returns {Promise<void>}\n   */\n  async scrollIntoView(): Promise<void> {\n    await test.step(`Scroll ${this.getElementReportName()} into view`, async () => {\n      await this.getLocator().scrollIntoViewIfNeeded();\n    });\n  }\n\n  /**\n   * Get the value of an attribute of the element.\n   * @param {string} attributeName - The name of the attribute.\n   * @param {number} timeout - The timeout for the attribute value. Defaults to 30 seconds.\n   * @returns {Promise<string | null>} - The value of the attribute.\n   */\n  async getAttributeValue(attributeName: string, timeout: number = this.DEFAULT_TIMEOUT): Promise<string> {\n    return await test.step(`Get attribute ${attributeName} of ${this.getElementReportName()}`, async () => {\n      const attributeValue = await this.getLocator().getAttribute(attributeName, { timeout });\n      if (attributeValue === null || attributeValue === undefined) {\n        return \"\";\n      }\n      return attributeValue;\n    });\n  }\n\n  /**\n   * Wait for the element to be visible.\n   * @param {number} timeout - The timeout for the element to be visible. Defaults to 30 seconds.\n   * @returns {Promise<void>}\n   */\n  async waitForElementToBeVisible(timeout: number = this.DEFAULT_TIMEOUT): Promise<void> {\n    await test.step(`Wait for ${this.getElementReportName()} to be visible`, async () => {\n      await this.getLocator().waitFor({ state: \"visible\", timeout });\n    });\n  }\n\n  /**\n   * Wait for the element to be hidden.\n   * @param {number} timeout - The timeout for the element to be hidden. Defaults to 30 seconds.\n   * @returns {Promise<void>}\n   */\n  async waitForElementToBeHidden(timeout: number = this.DEFAULT_TIMEOUT): Promise<void> {\n    await test.step(`Wait for ${this.getElementReportName()} to be hidden`, async () => {\n      await this.getLocator().waitFor({ state: \"hidden\", timeout });\n    });\n  }\n\n  /**\n   * Wait for the element to be absent.\n   * @param {number} timeout - The timeout for the element to be absent. Defaults to 30 seconds.\n   * @returns {Promise<void>}\n   */\n  async waitForElementToBeDetached(timeout: number = this.DEFAULT_TIMEOUT): Promise<void> {\n    await test.step(`Wait for ${this.getElementReportName()} to be absent`, async () => {\n      await this.getLocator().waitFor({ state: \"detached\", timeout });\n    });\n  }\n\n  /**\n   * Wait for the element to be attached.\n   * @param {number} timeout - The timeout for the element to be attached. Defaults to 30 seconds.\n   * @returns {Promise<void>}\n   */\n  async waitForElementToBeAttached(timeout: number = this.DEFAULT_TIMEOUT): Promise<void> {\n    await test.step(`Wait for ${this.getElementReportName()} to be attached`, async () => {\n      await this.getLocator().waitFor({ state: \"attached\", timeout });\n    });\n  }\n\n  /**\n   * Count the number of elements matching the locator.\n   * @returns {Promise<number>} - The number of elements matching the locator.\n   */\n  async count(): Promise<number> {\n    return await test.step(`Count elements matching ${this.getElementReportName()}`, async () => {\n      return await this.getLocator().count();\n    });\n  }\n\n  /**\n   * Check if the element is enabled.\n   * @param {number} timeout - The timeout for the element to be enabled. Defaults to 30 seconds.\n   * @returns {Promise<boolean>} - Returns true if the element is enabled, otherwise false.\n   */\n  async isEnabled(timeout: number = this.DEFAULT_TIMEOUT): Promise<boolean> {\n    return await test.step(`Check if ${this.getElementReportName()} is enabled`, async () => {\n      return await this.getLocator().isEnabled({ timeout });\n    });\n  }\n\n  /**\n   * Check if the element is disabled.\n   * @param {number} timeout - The timeout for the element to be disabled. Defaults to 30 seconds.\n   * @returns {Promise<boolean>} - Returns true if the element is disabled, otherwise false.\n   */\n  async isDisabled(timeout: number = this.DEFAULT_TIMEOUT): Promise<boolean> {\n    return await test.step(`Check if ${this.getElementReportName()} is disabled`, async () => {\n      return await this.getLocator().isDisabled({ timeout });\n    });\n  }\n\n  /**\n   * Check if the element is visible.\n   * @param {number} timeout - The timeout for the element to be visible. Defaults to 30 seconds.\n   * @returns {Promise<boolean>} - Returns true if the element is visible, otherwise false.\n   */\n  async isVisible(timeout: number = this.DEFAULT_TIMEOUT): Promise<boolean> {\n    return await test.step(`Check if ${this.getElementReportName()} is visible`, async () => {\n      return await this.getLocator().isVisible({ timeout });\n    });\n  }\n\n  /**\n   * Check if the element is hidden.\n   * @param {number} timeout - The timeout for the element to be hidden. Defaults to 30 seconds.\n   * @returns {Promise<boolean>} - Returns true if the element is hidden, otherwise false.\n   */\n  async isHidden(timeout: number = this.DEFAULT_TIMEOUT): Promise<boolean> {\n    return await test.step(`Check if ${this.getElementReportName()} is hidden`, async () => {\n      return await this.getLocator().isHidden({ timeout });\n    });\n  }\n\n  /**\n   * Remove focus from the element.\n   * @returns {Promise<void>}\n   */\n  async removeFocus(): Promise<void> {\n    await test.step(`Remove focus from ${this.getElementReportName()}`, async () => {\n      await this.getPage().locator(\"body\").click();\n    });\n  }\n\n  /**\n   * Get the computed style of an element.\n   * @param {string} property - The property to get the computed style of.\n   * @returns {Promise<string>} - The computed style of the element.\n   */\n  async getComputedStyle(property: string): Promise<string> {\n    return await test.step(`Get computed style of ${property} for ${this.getElementReportName()}`, async () => {\n      return await this.getLocator().evaluate(\n        (el, property) => window.getComputedStyle(el).getPropertyValue(property),\n        property\n      );\n    });\n  }\n\n  /**\n   * Check if the element is expanded.\n   * @returns {Promise<boolean>} True if the element is expanded, false otherwise.\n   */\n  async isExpanded(): Promise<boolean> {\n    return await test.step(`Check if ${this.getElementReportName()} is expanded`, async () => {\n      return (await this.getAttributeValue(\"aria-expanded\")) === \"true\";\n    });\n  }\n\n  /**\n   * Check if the element is checked.\n   * @returns {Promise<boolean>} True if the element is checked, false otherwise.\n   */\n  async isChecked(): Promise<boolean> {\n    return await test.step(`Check if ${this.getElementReportName()} is checked`, async () => {\n      return (await this.getAttributeValue(\"aria-checked\")) === \"true\";\n    });\n  }\n\n  /**\n   * Check if the element is selected.\n   * @returns {Promise<boolean>} True if the element is selected, false otherwise.\n   */\n  async isSelected(): Promise<boolean> {\n    return await test.step(`Check if ${this.getElementReportName()} is selected`, async () => {\n      return (await this.getAttributeValue(\"aria-selected\")) === \"true\";\n    });\n  }\n\n  /**\n   * Wait for the element to be in a certain state.\n   * @param {Object} options - The options for the wait.\n   * @returns {Promise<void>}\n   * @deprecated Use waitForElementToBeVisible, waitForElementToBeHidden, waitForElementToBeDetached, waitForElementToBeAttached instead.\n   */\n  async waitFor(options = {}): Promise<void> {\n    await test.step(`Wait for ${this.getElementReportName()}`, async () => {\n      await this.getLocator().waitFor(options);\n    });\n  }\n\n  /**\n   * Wait for the element to be visible.\n   * @returns {Promise<void>}\n   * @deprecated Use waitForElementToBeVisible instead.\n   */\n  async waitForVisible(): Promise<void> {\n    await test.step(`Wait for ${this.getElementReportName()} to be visible`, async () => {\n      await this.getLocator().waitFor({ state: \"visible\" });\n    });\n  }\n\n  /**\n   * Wait for the element to be absent.\n   * @returns {Promise<void>}\n   * @deprecated Use waitForElementToBeDetached instead.\n   */\n  async waitForAbsence(): Promise<void> {\n    await test.step(`Wait for ${this.getElementReportName()} to be absent`, async () => {\n      await this.getLocator().waitFor({ state: \"detached\" });\n    });\n  }\n\n  /**\n   * Wait for the list elements to stabilize (i.e., the count of items remains constant for a specified duration).\n   * @param {Locator} locator - The locator for the elements.\n   * @returns {Promise<void>}\n   * @deprecated\n   */\n  protected async waitForAndVerifyElements(locator: Locator): Promise<void> {\n    await test.step(`Wait for ${this.getElementReportName()} items to stabilize and verify existence`, async () => {\n      let previousCount = 0;\n      let stableCountTime = 0;\n      const stabilizationTimeMs = 500;\n\n      // eslint-disable-next-line no-constant-condition\n      while (true) {\n        const currentCount = await locator.count();\n\n        // Verify we have at least one element\n        if (currentCount === 0) {\n          await this.getPage().waitForTimeout(100);\n          continue;\n        }\n\n        // Check if all elements are visible\n        const elements = await locator.all();\n        const visibleStates = await Promise.all(elements.map(el => el.isVisible()));\n        const allVisible = visibleStates.every(state => state === true);\n\n        if (!allVisible) {\n          await this.getPage().waitForTimeout(100);\n          continue;\n        }\n\n        if (currentCount === previousCount) {\n          stableCountTime += 100;\n        } else {\n          stableCountTime = 0;\n        }\n\n        if (stableCountTime >= stabilizationTimeMs) {\n          break;\n        }\n\n        previousCount = currentCount;\n        await this.getPage().waitForTimeout(100);\n      }\n\n      if ((await locator.count()) === 0) {\n        throw new Error(`No ${this.getElementReportName()} elements found after stabilization`);\n      }\n    });\n  }\n}\n"
  },
  {
    "path": "packages/testkit/components/Button.ts",
    "content": "import { Locator, Page } from \"@playwright/test\";\nimport { BaseElement } from \"./BaseElement\";\n\n/**\n * Class representing a Button element.\n * Extends the BaseElement class.\n */\nexport class Button extends BaseElement {\n  /**\n   * Create a Button element.\n   * @param {Page} page - The Playwright page object.\n   * @param {Locator} locator - The locator for the Button element.\n   * @param {string} elementReportName - The name for reporting purposes.\n   */\n  constructor(page: Page, locator: Locator, elementReportName: string) {\n    super(page, locator, elementReportName);\n  }\n}\n"
  },
  {
    "path": "packages/testkit/components/ButtonGroup.ts",
    "content": "import { test, Page, Locator } from \"@playwright/test\";\nimport { BaseElement } from \"./BaseElement\";\nimport { Button } from \"./Button\";\n\n/**\n * Class representing a ButtonGroup element.\n * Extends the BaseElement class.\n */\nexport class ButtonGroup extends BaseElement {\n  /**\n   * Create a ButtonGroup element.\n   * @param {Page} page - The Playwright page object.\n   * @param {Locator} locator - The locator for the ButtonGroup element.\n   * @param {string} elementReportName - The name for reporting purposes.\n   */\n  constructor(page: Page, locator: Locator, elementReportName: string) {\n    super(page, locator, elementReportName);\n  }\n\n  /**\n   * Get all buttons.\n   * @returns {Promise<Button[]>} An array of buttons.\n   */\n  async getAllButtons(): Promise<Button[]> {\n    return await test.step(`Get all buttons for ${this.getElementReportName()}`, async () => {\n      return (await this.getLocator().locator(\"button\").all()).map(\n        (button, index) => new Button(this.getPage(), button, `Button ${index + 1}`)\n      );\n    });\n  }\n\n  /**\n   * Get a button by its name.\n   * @param {string} buttonName - The name of the button to get.\n   * @returns {Promise<Button>} The button object.\n   */\n  async getButtonByName(buttonName: string): Promise<Button> {\n    return await test.step(`Get button by name ${buttonName} for ${this.getElementReportName()}`, async () => {\n      return new Button(\n        this.getPage(),\n        this.getLocator().locator(\"button\").filter({ hasText: buttonName }),\n        `Button: ${buttonName}`\n      );\n    });\n  }\n\n  /**\n   * Click a button by its name.\n   * @param {string} buttonName - The name of the button to click.\n   * @returns {Promise<void>}\n   */\n  async clickButton(buttonName: string): Promise<void> {\n    await test.step(`Click button by name ${buttonName} for ${this.getElementReportName()}`, async () => {\n      const button = await this.getButtonByName(buttonName);\n      await button.click();\n    });\n  }\n\n  /**\n   * Check if a button is selected.\n   * @param {string} buttonName - The name of the button to check.\n   * @returns {Promise<boolean>} True if the button is selected, false otherwise.\n   */\n  async isButtonSelected(buttonName: string): Promise<boolean> {\n    return await test.step(`Check if button ${buttonName} is selected for ${this.getElementReportName()}`, async () => {\n      const button = await this.getButtonByName(buttonName);\n      return (await button.getAttributeValue(\"class\")).includes(\"selected\");\n    });\n  }\n\n  /**\n   * Get the name of the selected button.\n   * @returns {Promise<string>} The name of the selected button.\n   */\n  async getSelectedButtonName(): Promise<string> {\n    return await test.step(`Get selected button name for ${this.getElementReportName()}`, async () => {\n      const buttons = await this.getAllButtons();\n\n      // Find the selected button\n      for (const button of buttons) {\n        if ((await button.getAttributeValue(\"class\")).includes(\"selected\")) {\n          return await button.getText();\n        }\n      }\n\n      // If no selected button found, throw error\n      throw new Error(\"No selected button found\");\n    });\n  }\n}\n"
  },
  {
    "path": "packages/testkit/components/Checkbox.ts",
    "content": "import { Page, Locator, test } from \"@playwright/test\";\nimport { BaseElement } from \"./BaseElement\";\nimport { TextField } from \"./TextField\";\nimport { Text } from \"./Text\";\n\n/**\n * Class representing a Checkbox element.\n * Extends the BaseElement class.\n */\nexport class Checkbox extends BaseElement {\n  private checkbox: TextField;\n  private label: Text;\n\n  /**\n   * Create a Checkbox element.\n   * @param {Page} page - The Playwright page object.\n   * @param {Locator} locator - The locator for the Checkbox element.\n   * @param {string} elementReportName - The name for reporting purposes.\n   */\n  constructor(page: Page, locator: Locator, elementReportName: string) {\n    super(page, locator, elementReportName);\n    this.checkbox = new TextField(page, locator.locator(\"input\"), `${elementReportName} - Checkbox`);\n    this.label = new Text(page, locator.locator(\"span\"), `${elementReportName} - Label`);\n  }\n\n  /**\n   * Set the checkbox to checked.\n   * @returns {Promise<void>}\n   */\n  async setChecked(): Promise<void> {\n    await test.step(`Check checkbox for ${this.getElementReportName()}`, async () => {\n      if (!(await this.isChecked())) {\n        await this.getLocator().click();\n      }\n    });\n  }\n\n  /**\n   * Set the checkbox to unchecked.\n   * @returns {Promise<void>}\n   */\n  async setUnchecked(): Promise<void> {\n    await test.step(`Uncheck checkbox for ${this.getElementReportName()}`, async () => {\n      if (await this.isChecked()) {\n        await this.getLocator().click();\n      }\n    });\n  }\n\n  /**\n   * Check if the checkbox is checked.\n   * @returns {Promise<boolean>} True if the checkbox is checked, false otherwise.\n   */\n  async isChecked(): Promise<boolean> {\n    return await test.step(`Check if checkbox is checked for ${this.getElementReportName()}`, async () => {\n      return await this.checkbox.getLocator().isChecked();\n    });\n  }\n\n  /**\n   * Get the label of the checkbox.\n   * @returns {Promise<string>} The label of the checkbox.\n   */\n  async getLabel(): Promise<string> {\n    return await test.step(`Get checkbox label for ${this.getElementReportName()}`, async () => {\n      return await this.label.getText();\n    });\n  }\n}\n"
  },
  {
    "path": "packages/testkit/components/ColorPicker.ts",
    "content": "import { Page, Locator, test } from \"@playwright/test\";\nimport { BaseElement } from \"./BaseElement\";\nimport { ListItem } from \"./ListItem\";\nimport { ColorPickerColor } from \"../utils/enums\";\n\n/**\n * Class representing a ColorPicker element.\n * Extends the BaseElement class.\n */\nexport class ColorPicker extends BaseElement {\n  /**\n   * Create a ColorPicker element.\n   * @param {Page} page - The Playwright page object.\n   * @param {Locator} locator - The locator for the ColorPicker element.\n   * @param {string} elementReportName - The name for reporting purposes.\n   */\n  constructor(page: Page, locator: Locator, elementReportName: string) {\n    super(page, locator, elementReportName);\n  }\n\n  /**\n   * Get all color picker items.\n   * @returns {Promise<ListItem[]>} An array of color picker items.\n   */\n  async getAllColorPickerItems(): Promise<ListItem[]> {\n    return await test.step(`Get all color picker items for ${this.getElementReportName()}`, async () => {\n      return (await this.getLocator().locator(\"li\").all()).map(\n        (listItem, index) => new ListItem(this.getPage(), listItem, `Color Picker Item ${index + 1}`)\n      );\n    });\n  }\n\n  /**\n   * Get a color picker item by color.\n   * @param {ColorPickerColor} color - The color to get the color picker item for.\n   * @returns {Promise<ListItem>} The color picker item.\n   */\n  async getColorPickerItemByColor(color: ColorPickerColor): Promise<ListItem> {\n    return await test.step(`Get color picker item by color ${color} for ${this.getElementReportName()}`, async () => {\n      return new ListItem(this.getPage(), this.getLocator().getByTestId(`color-picker-item_${color}`), color);\n    });\n  }\n\n  /**\n   * Select a color from the color picker.\n   * @param {ColorPickerColor} color - The color to select.\n   * @returns {Promise<void>}\n   */\n  async selectColor(color: ColorPickerColor): Promise<void> {\n    await test.step(`Select color ${color} for ${this.getElementReportName()}`, async () => {\n      const colorItem = await this.getColorPickerItemByColor(color);\n      await colorItem.click();\n    });\n  }\n\n  /**\n   * Check if a color is selected.\n   * @param {ColorPickerColor} color - The color to check.\n   * @returns {Promise<boolean>} True if the color is selected, false otherwise.\n   */\n  async isColorSelected(color: ColorPickerColor): Promise<boolean> {\n    return await test.step(`Check if color ${color} is selected for ${this.getElementReportName()}`, async () => {\n      const colorItem = await this.getColorPickerItemByColor(color);\n      return (await colorItem.getAttributeValue(\"class\")).includes(\"selectedColor\");\n    });\n  }\n\n  /**\n   * Get the currently selected color.\n   * @returns {Promise<string>} The selected color.\n   */\n  async getSelectedColor(): Promise<string> {\n    return await test.step(`Get selected color for ${this.getElementReportName()}`, async () => {\n      const listItems = await this.getAllColorPickerItems();\n\n      // Find the selected color\n      for (const listItem of listItems) {\n        if ((await listItem.getAttributeValue(\"class\")).includes(\"selectedColor\")) {\n          const dataTestId = await listItem.getAttributeValue(\"data-testid\");\n          return dataTestId.replace(\"color-picker-item_\", \"\");\n        }\n      }\n\n      // If no selected color found, throw error\n      throw new Error(\"No selected color found\");\n    });\n  }\n}\n"
  },
  {
    "path": "packages/testkit/components/Combobox.ts",
    "content": "import { Locator, Page, test } from \"@playwright/test\";\nimport { BaseElement } from \"./BaseElement\";\nimport { ListItem } from \"./ListItem\";\nimport { Search } from \"./Search\";\n\n/**\n * Class representing a Combobox element.\n * Extends the BaseElement class.\n */\nexport class Combobox extends BaseElement {\n  private searchField: Search;\n\n  /**\n   * Create a Combobox element.\n   * @param {Page} page - The Playwright page object.\n   * @param {Locator} locator - The locator for the Combobox element.\n   * @param {string} elementReportName - The name for reporting purposes.\n   */\n  constructor(page: Page, locator: Locator, elementReportName: string) {\n    super(page, locator, elementReportName);\n    this.searchField = new Search(page, locator, `${elementReportName} - Search Field`);\n  }\n\n  /**\n   * Get a combobox item by option.\n   * @param {string} option - The name of the option to get the combobox item for.\n   * @returns {Promise<ListItem>} The combobox item.\n   */\n  async getComboboxItemByOption(option: string): Promise<ListItem> {\n    return await test.step(`Get combobox item by option ${option} for ${this.getElementReportName()}`, async () => {\n      return new ListItem(this.getPage(), this.getLocator().getByText(option), option);\n    });\n  }\n\n  /**\n   * Select an item from the combobox.\n   * @param {string} item - The name of the item to select.\n   * @returns {Promise<void>}\n   */\n  async selectItem(item: string): Promise<void> {\n    await test.step(`Select item ${item} for ${this.getElementReportName()}`, async () => {\n      await this.search(item);\n      const comboBoxItem = await this.getComboboxItemByOption(item);\n      await comboBoxItem.click();\n    });\n  }\n\n  /**\n   * Search for an option in the combobox.\n   * @param {string} option - The name of the option to search for.\n   * @returns {Promise<void>}\n   */\n  async search(option: string): Promise<void> {\n    await test.step(`Search for ${option} for ${this.getElementReportName()}`, async () => {\n      await this.searchField.setText(option);\n    });\n  }\n\n  /**\n   * Clear the search.\n   * @returns {Promise<void>}\n   */\n  async clearSearch(): Promise<void> {\n    await test.step(`Clear search for ${this.getElementReportName()}`, async () => {\n      await this.searchField.clickClearSearchButton();\n    });\n  }\n\n  /**\n   * Get the search input value.\n   * @returns {Promise<string>} The search input value.\n   */\n  async getSearchInputValue(): Promise<string> {\n    return await test.step(`Get search input value for ${this.getElementReportName()}`, async () => {\n      return await this.searchField.getText();\n    });\n  }\n\n  /**\n   * Check if the search result is visible.\n   * @param {string} item - The name of the item to check if the search result is visible for.\n   * @returns {Promise<boolean>} True if the search result is visible, false otherwise.\n   */\n  async isSearchResultVisible(item: string): Promise<boolean> {\n    return await test.step(`Check if search result is visible for ${item} for ${this.getElementReportName()}`, async () => {\n      return (await this.getComboboxItemByOption(item)).isVisible(2000);\n    });\n  }\n}\n"
  },
  {
    "path": "packages/testkit/components/Dropdown.ts",
    "content": "import { Page, Locator, test } from \"@playwright/test\";\nimport { TextField } from \"./TextField\";\nimport { BaseElement } from \"./BaseElement\";\nimport { ListItem } from \"./ListItem\";\nimport { IconButton } from \"./IconButton\";\n\n/**\n * Class representing a Dropdown element.\n * Extends the BaseElement class.\n */\nexport class Dropdown extends BaseElement {\n  private inputField: TextField;\n  private clearSelectionIconButton: IconButton;\n\n  /**\n   * Create a Dropdown element.\n   * @param {Page} page - The Playwright page object.\n   * @param {Locator} locator - The locator for the Dropdown element.\n   * @param {string} elementReportName - The name for reporting purposes.\n   */\n  constructor(page: Page, locator: Locator, elementReportName: string) {\n    super(page, locator, elementReportName);\n    this.inputField = new TextField(page, locator.locator(\"input\"), `${elementReportName} - Input Field`);\n    this.clearSelectionIconButton = new IconButton(\n      page,\n      locator.locator(\".clear-indicator\"),\n      `${elementReportName} - Clear Selection Icon Button`\n    );\n  }\n\n  /**\n   * Get a dropdown item by item.\n   * @param {string} item - The name of the item to get the dropdown item for.\n   * @returns {Promise<ListItem>} The dropdown item.\n   */\n  async getDropdownItemByItem(item: string): Promise<ListItem> {\n    return await test.step(`Get dropdown item by item ${item} for ${this.getElementReportName()}`, async () => {\n      return new ListItem(this.getPage(), this.getLocator().getByRole(\"option\", { name: item }), item);\n    });\n  }\n\n  /**\n   * Check if the dropdown is open.\n   * @returns {Promise<boolean>} True if the dropdown is open, false otherwise.\n   */\n  async isDropdownOpen(): Promise<boolean> {\n    return await test.step(`Check if dropdown is open for ${this.getElementReportName()}`, async () => {\n      return await this.inputField.isExpanded();\n    });\n  }\n\n  /**\n   * Open the dropdown.\n   * @returns {Promise<void>}\n   */\n  async open(): Promise<void> {\n    await test.step(`Open dropdown for ${this.getElementReportName()}`, async () => {\n      if (!(await this.isDropdownOpen())) {\n        await this.click();\n        // Wait for the dropdown to open\n        await this.getPage().waitForTimeout(200);\n      }\n    });\n  }\n\n  /**\n   * Close the dropdown.\n   * @returns {Promise<void>}\n   */\n  async close(): Promise<void> {\n    await test.step(`Close dropdown for ${this.getElementReportName()}`, async () => {\n      if (await this.isDropdownOpen()) {\n        await this.click();\n        // Wait for the dropdown to close\n        await this.getPage().waitForTimeout(200);\n      }\n    });\n  }\n\n  /**\n   * Select an item from a dropdown.\n   * @param {string} item - The value text to be selected in the dropdown.\n   * @returns {Promise<void>}\n   */\n  async selectItem(item: string): Promise<void> {\n    await test.step(`Select item ${item} for ${this.getElementReportName()}`, async () => {\n      await this.open();\n\n      // If dropdown has search functionality, use it\n      if (await this.inputField.isVisible(1000)) {\n        await this.search(item);\n        const listItem = await this.getDropdownItemByItem(item);\n        await listItem.click();\n        return;\n      }\n\n      // For dropdowns without search, scroll through options to find the item\n      const targetOption = this.getPage().getByRole(\"option\", { name: item });\n\n      try {\n        // Check if the item is already visible\n        await targetOption.waitFor({ timeout: 1000 });\n        await targetOption.scrollIntoViewIfNeeded();\n        await targetOption.click();\n        return;\n      } catch {\n        // Item not immediately visible, need to scroll through options\n      }\n\n      // Scroll through options to find the target item\n      const allOptions = this.getPage().getByRole(\"option\");\n      let found = false;\n      let attempts = 0;\n      const maxAttempts = 50;\n      let previousOptionCount = 0;\n\n      while (!found && attempts < maxAttempts) {\n        const optionCount = await allOptions.count();\n\n        // If no new options loaded after scrolling, we might have reached the end\n        if (attempts > 0 && optionCount === previousOptionCount) {\n          break;\n        }\n\n        previousOptionCount = optionCount;\n\n        // Check each visible option\n        for (let i = 0; i < optionCount; i++) {\n          const option = allOptions.nth(i);\n          const optionText = await option.textContent();\n\n          if (optionText?.trim() === item) {\n            await option.scrollIntoViewIfNeeded();\n            await option.click();\n            found = true;\n            break;\n          }\n        }\n\n        if (!found && optionCount > 0) {\n          // Scroll down to load more options\n          const lastOption = allOptions.nth(optionCount - 1);\n          await lastOption.scrollIntoViewIfNeeded();\n\n          try {\n            await lastOption.press(\"ArrowDown\");\n          } catch {\n            await lastOption.hover();\n            await this.getPage().mouse.wheel(0, 100);\n          }\n\n          await this.getPage().waitForTimeout(200);\n        }\n\n        attempts++;\n      }\n\n      if (!found) {\n        throw new Error(`Could not find dropdown option \"${item}\" after scrolling through ${maxAttempts} attempts`);\n      }\n    });\n  }\n\n  /**\n   * Search for an item in the dropdown.\n   * @param {string} item - The value text to be searched in the dropdown.\n   * @returns {Promise<void>}\n   */\n  async search(item: string): Promise<void> {\n    await test.step(`Search for ${item} for ${this.getElementReportName()}`, async () => {\n      await this.inputField.setText(item);\n    });\n  }\n\n  /**\n   * Select multiple items from a dropdown.\n   * @param items - The values text to be selected in the dropdown.\n   * @returns {Promise<void>}\n   */\n  async selectMultipleItems(items: string[]): Promise<void> {\n    await test.step(`Select multiple items ${items} for ${this.getElementReportName()}`, async () => {\n      await this.open();\n      for (const item of items) {\n        await this.selectItem(item);\n      }\n    });\n  }\n\n  /**\n   * Clear the selection.\n   * @returns {Promise<void>}\n   */\n  async clearSelection(): Promise<void> {\n    await test.step(`Clear selection for ${this.getElementReportName()}`, async () => {\n      await this.clearSelectionIconButton.click();\n    });\n  }\n}\n"
  },
  {
    "path": "packages/testkit/components/EditableHeading.ts",
    "content": "import { Page, Locator, test } from \"@playwright/test\";\nimport { BaseElement } from \"./BaseElement\";\nimport { pressKey } from \"../utils/common-actions\";\n\n/**\n * Class representing an EditableHeading element.\n * Extends the BaseElement class.\n */\nexport class EditableHeading extends BaseElement {\n  /**\n   * Create an EditableHeading element.\n   * @param {Page} page - The Playwright page object.\n   * @param {Locator} locator - The locator for the EditableHeading element.\n   * @param {string} elementReportName - The name for reporting purposes.\n   */\n  constructor(page: Page, locator: Locator, elementReportName: string) {\n    super(page, locator, elementReportName);\n  }\n\n  /**\n   * Get the input element locator (visible in edit mode).\n   * @returns {Locator} The input element locator.\n   */\n  private getInputLocator(): Locator {\n    return this.getLocator().locator(\"input\");\n  }\n\n  /**\n   * Enter edit mode by clicking on the component.\n   * @returns {Promise<void>}\n   */\n  async enterEditMode(): Promise<void> {\n    await test.step(`Enter edit mode for ${this.getElementReportName()}`, async () => {\n      if (!(await this.isInEditMode())) {\n        await this.click();\n        await this.getInputLocator().waitFor({ state: \"visible\", timeout: 5000 });\n      }\n    });\n  }\n\n  /**\n   * Exit edit mode by pressing Enter key.\n   * @returns {Promise<void>}\n   */\n  async exitEditModeWithEnter(): Promise<void> {\n    await test.step(`Exit edit mode with Enter for ${this.getElementReportName()}`, async () => {\n      await pressKey(this.getPage(), \"Enter\");\n      await this.getInputLocator().waitFor({ state: \"hidden\", timeout: 5000 });\n      // Wait for view mode to be ready\n      await this.getPage().waitForTimeout(50);\n    });\n  }\n\n  /**\n   * Exit edit mode by pressing Escape key (cancels changes).\n   * @returns {Promise<void>}\n   */\n  async exitEditModeWithEscape(): Promise<void> {\n    await test.step(`Exit edit mode with Escape for ${this.getElementReportName()}`, async () => {\n      await pressKey(this.getPage(), \"Escape\");\n      await this.getInputLocator().waitFor({ state: \"hidden\", timeout: 5000 });\n      // Wait for view mode to be ready\n      await this.getPage().waitForTimeout(50);\n    });\n  }\n\n  /**\n   * Exit edit mode by clicking outside the component.\n   * @returns {Promise<void>}\n   */\n  async exitEditModeWithBlur(): Promise<void> {\n    await test.step(`Exit edit mode with blur for ${this.getElementReportName()}`, async () => {\n      await this.removeFocus();\n      await this.getInputLocator().waitFor({ state: \"hidden\", timeout: 5000 });\n      // Wait for view mode to be ready\n      await this.getPage().waitForTimeout(50);\n    });\n  }\n\n  /**\n   * Set the text value in the editable heading component.\n   * Enters edit mode, clears existing text, types new text, and confirms with Enter.\n   * @param {string} text - The text to set.\n   * @returns {Promise<void>}\n   */\n  async setText(text: string): Promise<void> {\n    await test.step(`Set text: \"${text}\" for ${this.getElementReportName()}`, async () => {\n      await this.enterEditMode();\n      const input = this.getInputLocator();\n      await input.clear();\n      await input.fill(text);\n      await this.exitEditModeWithEnter();\n    });\n  }\n\n  /**\n   * Clear the text and set new text value.\n   * @param {string} text - The text to set.\n   * @returns {Promise<void>}\n   */\n  async clearAndSetText(text: string): Promise<void> {\n    await test.step(`Clear and set text: \"${text}\" for ${this.getElementReportName()}`, async () => {\n      await this.enterEditMode();\n      const input = this.getInputLocator();\n      await input.clear();\n      await input.fill(text);\n      await this.exitEditModeWithEnter();\n    });\n  }\n\n  /**\n   * Get the current text value of the editable heading component.\n   * @returns {Promise<string>} The current text value.\n   */\n  async getText(): Promise<string> {\n    return await test.step(`Get text for ${this.getElementReportName()}`, async () => {\n      // If in edit mode, get value from input\n      if (await this.isInEditMode()) {\n        return await this.getInputLocator().inputValue();\n      }\n      // If in view mode, get text from the typography element\n      return await this.getLocator().innerText();\n    });\n  }\n\n  /**\n   * Get the input value when in edit mode.\n   * @returns {Promise<string>} The input value.\n   */\n  async getInputValue(): Promise<string> {\n    return await test.step(`Get input value for ${this.getElementReportName()}`, async () => {\n      return await this.getInputLocator().inputValue();\n    });\n  }\n\n  /**\n   * Check if the component is currently in edit mode.\n   * @returns {Promise<boolean>} True if in edit mode, false otherwise.\n   */\n  async isInEditMode(): Promise<boolean> {\n    return await test.step(`Check if ${this.getElementReportName()} is in edit mode`, async () => {\n      return await this.getInputLocator().isVisible();\n    });\n  }\n\n  /**\n   * Check if the component is read-only.\n   * @returns {Promise<boolean>} True if read-only, false otherwise.\n   */\n  async isReadOnly(): Promise<boolean> {\n    return await test.step(`Check if ${this.getElementReportName()} is read-only`, async () => {\n      // Try to enter edit mode\n      await this.click();\n\n      // Wait for either input to appear or confirm it doesn't\n      try {\n        await this.getInputLocator().waitFor({ state: \"visible\", timeout: 500 });\n        // If we got here, we entered edit mode - exit and return false\n        await this.exitEditModeWithEscape();\n        return false;\n      } catch {\n        // Input didn't appear, it's read-only\n        return true;\n      }\n    });\n  }\n\n  /**\n   * Type text character by character (useful for testing IME or special input scenarios).\n   * @param {string} text - The text to type.\n   * @returns {Promise<void>}\n   */\n  async typeText(text: string): Promise<void> {\n    await test.step(`Type text: \"${text}\" for ${this.getElementReportName()}`, async () => {\n      await this.enterEditMode();\n      const input = this.getInputLocator();\n      await input.clear();\n      await input.pressSequentially(text);\n    });\n  }\n\n  /**\n   * Get the placeholder text.\n   * @returns {Promise<string>} The placeholder text.\n   */\n  async getPlaceholder(): Promise<string> {\n    return await test.step(`Get placeholder for ${this.getElementReportName()}`, async () => {\n      await this.enterEditMode();\n      const placeholder = await this.getInputLocator().getAttribute(\"placeholder\");\n      await this.exitEditModeWithEscape();\n      return placeholder || \"\";\n    });\n  }\n}\n"
  },
  {
    "path": "packages/testkit/components/EditableText.ts",
    "content": "import { Page, Locator, test } from \"@playwright/test\";\nimport { BaseElement } from \"./BaseElement\";\nimport { pressKey } from \"../utils/common-actions\";\n\n/**\n * Class representing an EditableText element.\n * Extends the BaseElement class.\n */\nexport class EditableText extends BaseElement {\n  /**\n   * Create an EditableText element.\n   * @param {Page} page - The Playwright page object.\n   * @param {Locator} locator - The locator for the EditableText element.\n   * @param {string} elementReportName - The name for reporting purposes.\n   */\n  constructor(page: Page, locator: Locator, elementReportName: string) {\n    super(page, locator, elementReportName);\n  }\n\n  /**\n   * Get the input element locator (visible in edit mode).\n   * @returns {Locator} The input element locator.\n   */\n  private getInputLocator(): Locator {\n    return this.getLocator().locator(\"input\");\n  }\n\n  /**\n   * Get the textarea element locator (visible in edit mode for multiline).\n   * @returns {Locator} The textarea element locator.\n   */\n  private getTextareaLocator(): Locator {\n    return this.getLocator().locator(\"textarea\");\n  }\n\n  /**\n   * Get the active input element (input or textarea based on multiline mode).\n   * @returns {Locator} The active input element locator.\n   */\n  private getActiveInputLocator(): Locator {\n    return this.getLocator().locator(\"input, textarea\");\n  }\n\n  /**\n   * Enter edit mode by clicking on the component.\n   * @returns {Promise<void>}\n   */\n  async enterEditMode(): Promise<void> {\n    await test.step(`Enter edit mode for ${this.getElementReportName()}`, async () => {\n      if (!(await this.isInEditMode())) {\n        await this.click();\n        await this.getActiveInputLocator().waitFor({ state: \"visible\", timeout: 5000 });\n      }\n    });\n  }\n\n  /**\n   * Exit edit mode by pressing Enter key.\n   * @returns {Promise<void>}\n   */\n  async exitEditModeWithEnter(): Promise<void> {\n    await test.step(`Exit edit mode with Enter for ${this.getElementReportName()}`, async () => {\n      const isMultiline = await this.getTextareaLocator().isVisible();\n      await pressKey(this.getPage(), \"Enter\");\n\n      // For single-line input, wait for edit mode to exit\n      if (!isMultiline) {\n        await this.getActiveInputLocator().waitFor({ state: \"hidden\", timeout: 5000 });\n        // Wait for view mode to be ready\n        await this.getPage().waitForTimeout(50);\n      }\n      // For multiline, Enter doesn't exit edit mode\n    });\n  }\n\n  /**\n   * Exit edit mode by pressing Escape key (cancels changes).\n   * @returns {Promise<void>}\n   */\n  async exitEditModeWithEscape(): Promise<void> {\n    await test.step(`Exit edit mode with Escape for ${this.getElementReportName()}`, async () => {\n      await pressKey(this.getPage(), \"Escape\");\n      await this.getActiveInputLocator().waitFor({ state: \"hidden\", timeout: 5000 });\n      // Wait for view mode to be ready\n      await this.getPage().waitForTimeout(50);\n    });\n  }\n\n  /**\n   * Exit edit mode by clicking outside the component.\n   * @returns {Promise<void>}\n   */\n  async exitEditModeWithBlur(): Promise<void> {\n    await test.step(`Exit edit mode with blur for ${this.getElementReportName()}`, async () => {\n      await this.removeFocus();\n      await this.getActiveInputLocator().waitFor({ state: \"hidden\", timeout: 5000 });\n      // Wait for view mode to be ready\n      await this.getPage().waitForTimeout(50);\n    });\n  }\n\n  /**\n   * Set the text value in the editable text component.\n   * Enters edit mode, clears existing text, types new text, and confirms with Enter.\n   * @param {string} text - The text to set.\n   * @returns {Promise<void>}\n   */\n  async setText(text: string): Promise<void> {\n    await test.step(`Set text: \"${text}\" for ${this.getElementReportName()}`, async () => {\n      await this.enterEditMode();\n      const input = this.getActiveInputLocator();\n      await input.clear();\n      await input.fill(text);\n\n      // Press Enter to exit (for single-line) or Tab+Escape for multiline\n      const isMultiline = await this.getTextareaLocator().isVisible();\n      if (isMultiline) {\n        await this.exitEditModeWithEscape();\n      } else {\n        await this.exitEditModeWithEnter();\n      }\n    });\n  }\n\n  /**\n   * Clear the text and set new text value.\n   * @param {string} text - The text to set.\n   * @returns {Promise<void>}\n   */\n  async clearAndSetText(text: string): Promise<void> {\n    await test.step(`Clear and set text: \"${text}\" for ${this.getElementReportName()}`, async () => {\n      await this.enterEditMode();\n      const input = this.getActiveInputLocator();\n      await input.clear();\n      await input.fill(text);\n\n      // Press Enter to exit (for single-line) or Escape for multiline\n      const isMultiline = await this.getTextareaLocator().isVisible();\n      if (isMultiline) {\n        await this.exitEditModeWithEscape();\n      } else {\n        await this.exitEditModeWithEnter();\n      }\n    });\n  }\n\n  /**\n   * Get the current text value of the editable text component.\n   * @returns {Promise<string>} The current text value.\n   */\n  async getText(): Promise<string> {\n    return await test.step(`Get text for ${this.getElementReportName()}`, async () => {\n      // If in edit mode, get value from input\n      if (await this.isInEditMode()) {\n        return await this.getActiveInputLocator().inputValue();\n      }\n      // If in view mode, get text from the typography element\n      return await this.getLocator().innerText();\n    });\n  }\n\n  /**\n   * Get the input value when in edit mode.\n   * @returns {Promise<string>} The input value.\n   */\n  async getInputValue(): Promise<string> {\n    return await test.step(`Get input value for ${this.getElementReportName()}`, async () => {\n      return await this.getActiveInputLocator().inputValue();\n    });\n  }\n\n  /**\n   * Check if the component is currently in edit mode.\n   * @returns {Promise<boolean>} True if in edit mode, false otherwise.\n   */\n  async isInEditMode(): Promise<boolean> {\n    return await test.step(`Check if ${this.getElementReportName()} is in edit mode`, async () => {\n      const inputVisible = await this.getInputLocator().isVisible();\n      const textareaVisible = await this.getTextareaLocator().isVisible();\n      return inputVisible || textareaVisible;\n    });\n  }\n\n  /**\n   * Check if the component is in multiline mode.\n   * @returns {Promise<boolean>} True if in multiline mode, false otherwise.\n   */\n  async isMultiline(): Promise<boolean> {\n    return await test.step(`Check if ${this.getElementReportName()} is multiline`, async () => {\n      await this.enterEditMode();\n      const isMultiline = await this.getTextareaLocator().isVisible();\n      await this.exitEditModeWithEscape();\n      return isMultiline;\n    });\n  }\n\n  /**\n   * Check if the component is read-only.\n   * @returns {Promise<boolean>} True if read-only, false otherwise.\n   */\n  async isReadOnly(): Promise<boolean> {\n    return await test.step(`Check if ${this.getElementReportName()} is read-only`, async () => {\n      // Try to enter edit mode\n      await this.click();\n\n      // Wait for either input to appear or confirm it doesn't\n      try {\n        await this.getActiveInputLocator().waitFor({ state: \"visible\", timeout: 500 });\n        // If we got here, we entered edit mode - exit and return false\n        await this.exitEditModeWithEscape();\n        return false;\n      } catch {\n        // Input didn't appear, it's read-only\n        return true;\n      }\n    });\n  }\n\n  /**\n   * Type text character by character (useful for testing IME or special input scenarios).\n   * @param {string} text - The text to type.\n   * @returns {Promise<void>}\n   */\n  async typeText(text: string): Promise<void> {\n    await test.step(`Type text: \"${text}\" for ${this.getElementReportName()}`, async () => {\n      await this.enterEditMode();\n      const input = this.getActiveInputLocator();\n      await input.clear();\n      await input.pressSequentially(text);\n    });\n  }\n\n  /**\n   * Get the placeholder text.\n   * @returns {Promise<string>} The placeholder text.\n   */\n  async getPlaceholder(): Promise<string> {\n    return await test.step(`Get placeholder for ${this.getElementReportName()}`, async () => {\n      await this.enterEditMode();\n      const placeholder = await this.getActiveInputLocator().getAttribute(\"placeholder\");\n      await this.exitEditModeWithEscape();\n      return placeholder || \"\";\n    });\n  }\n}\n"
  },
  {
    "path": "packages/testkit/components/ExpandCollapse.ts",
    "content": "import { Page, Locator, test } from \"@playwright/test\";\nimport { BaseElement } from \"./BaseElement\";\nimport { Button } from \"./Button\";\nimport { Link } from \"./Link\";\n\n/**\n * Class representing an ExpandCollapse element.\n * Extends the BaseElement class.\n */\nexport class ExpandCollapse extends BaseElement {\n  private headerButton: Button;\n  private content: BaseElement;\n\n  /**\n   * Create an ExpandCollapse element.\n   * @param {Page} page - The Playwright page object.\n   * @param {Locator} locator - The locator for the ExpandCollapse element.\n   * @param {string} elementReportName - The name for reporting purposes.\n   */\n  constructor(page: Page, locator: Locator, elementReportName: string) {\n    super(page, locator, elementReportName);\n    this.headerButton = new Button(\n      page,\n      locator.locator(\"button[aria-expanded]\"),\n      `${elementReportName} - Header Button`\n    );\n    this.content = new BaseElement(page, locator.locator(\"[role='region']\"), `${elementReportName} - Content`);\n  }\n\n  /**\n   * Click the header to toggle expand/collapse state.\n   * @returns {Promise<void>}\n   */\n  async toggle(): Promise<void> {\n    await test.step(`Toggle ${this.getElementReportName()}`, async () => {\n      await this.headerButton.click();\n    });\n  }\n\n  /**\n   * Expand the component if it's currently collapsed.\n   * @returns {Promise<void>}\n   */\n  async expand(): Promise<void> {\n    await test.step(`Expand ${this.getElementReportName()}`, async () => {\n      if (await this.isCollapsed()) {\n        await this.headerButton.click();\n      }\n    });\n  }\n\n  /**\n   * Collapse the component if it's currently expanded.\n   * @returns {Promise<void>}\n   */\n  async collapse(): Promise<void> {\n    await test.step(`Collapse ${this.getElementReportName()}`, async () => {\n      if (!(await this.isCollapsed())) {\n        await this.headerButton.click();\n      }\n    });\n  }\n\n  /**\n   * Check if the component is collapsed.\n   * @returns {Promise<boolean>} True if collapsed, false if expanded.\n   */\n  async isCollapsed(): Promise<boolean> {\n    return await test.step(`Check if ${this.getElementReportName()} is collapsed`, async () => {\n      return !(await this.headerButton.isExpanded());\n    });\n  }\n\n  /**\n   * Get the header/title text.\n   * @returns {Promise<string>} The header text content.\n   */\n  async getHeaderText(): Promise<string> {\n    return await test.step(`Get header text of ${this.getElementReportName()}`, async () => {\n      return await this.headerButton.getText();\n    });\n  }\n\n  /**\n   * Check if the content section is visible.\n   * @returns {Promise<boolean>} True if content is visible, false otherwise.\n   */\n  async isContentVisible(): Promise<boolean> {\n    return await test.step(`Check if content of ${this.getElementReportName()} is visible`, async () => {\n      return await this.content.isVisible();\n    });\n  }\n\n  /**\n   * Get the content element for further interactions.\n   * @returns {BaseElement} The content element wrapped in BaseElement.\n   */\n  getContentElement(): BaseElement {\n    return new BaseElement(this.getPage(), this.content.getLocator(), `content of ${this.getElementReportName()}`);\n  }\n\n  /**\n   * Get the content text.\n   * @returns {Promise<string>} The content text.\n   */\n  async getContentText(): Promise<string> {\n    return await test.step(`Get content text of ${this.getElementReportName()}`, async () => {\n      await this.content.waitForElementToBeVisible();\n      return await this.content.getText();\n    });\n  }\n\n  /**\n   * Click on an item within the content area by its text.\n   * @param {string} itemText - The text of the item to click.\n   * @returns {Promise<void>}\n   */\n  async clickItemByText(itemText: string): Promise<void> {\n    await test.step(`Click item \"${itemText}\" in ${this.getElementReportName()} content`, async () => {\n      // Ensure the component is expanded first\n      await this.expand();\n\n      // Wait for content to be visible\n      await this.content.waitForElementToBeVisible();\n\n      // Find and click the item\n      const item = new BaseElement(\n        this.getPage(),\n        this.content.getLocator().getByText(itemText, { exact: false }),\n        `item \"${itemText}\" in ${this.getElementReportName()} content`\n      );\n      await item.click();\n    });\n  }\n\n  /**\n   * Click on an item within the content area by exact text match.\n   * @param {string} itemText - The exact text of the item to click.\n   * @returns {Promise<void>}\n   */\n  async clickItemByExactText(itemText: string): Promise<void> {\n    await test.step(`Click item with exact text \"${itemText}\" in ${this.getElementReportName()} content`, async () => {\n      // Ensure the component is expanded first\n      await this.expand();\n\n      // Wait for content to be visible\n      await this.content.waitForElementToBeVisible();\n\n      // Find and click the item with exact text match\n      const item = new BaseElement(\n        this.getPage(),\n        this.content.getLocator().getByText(itemText, { exact: true }),\n        `item with exact text \"${itemText}\" in ${this.getElementReportName()} content`\n      );\n      await item.click();\n    });\n  }\n\n  /**\n   * Click on a link within the content area by its text.\n   * @param {string} linkText - The text of the link to click.\n   * @returns {Promise<void>}\n   */\n  async clickLinkInContent(linkText: string): Promise<void> {\n    await test.step(`Click link \"${linkText}\" in ${this.getElementReportName()} content`, async () => {\n      // Ensure the component is expanded first\n      await this.expand();\n\n      // Wait for content to be visible\n      await this.content.waitForElementToBeVisible();\n\n      // Find and click the link\n      const link = new Link(\n        this.getPage(),\n        this.content.getLocator().locator(\"a\").filter({ hasText: linkText }),\n        `link \"${linkText}\" in ${this.getElementReportName()} content`\n      );\n      await link.click();\n    });\n  }\n}\n"
  },
  {
    "path": "packages/testkit/components/IconButton.ts",
    "content": "import { Locator, Page, test } from \"@playwright/test\";\nimport { BaseElement } from \"./BaseElement\";\nimport { Menu } from \"./Menu\";\n\n/**\n * Class representing an IconButton element.\n * Extends the BaseElement class.\n */\nexport class IconButton extends BaseElement {\n  private menu?: Menu;\n\n  /**\n   * Create an IconButton element.\n   * @param {Page} page - The Playwright page object.\n   * @param {Locator} locator - The locator for the IconButton element.\n   * @param {string} elementReportName - The name for reporting purposes.\n   */\n  constructor(page: Page, locator: Locator, elementReportName: string, menu?: Menu) {\n    super(page, locator, elementReportName);\n    this.menu = menu;\n  }\n\n  /**\n   * Select an item from the menu.\n   * @param {string} itemName - The name of the item to select.\n   * @returns {Promise<void>}\n   */\n  async selectItem(itemName: string): Promise<void> {\n    await test.step(`Click menu item by name ${itemName} for ${this.getElementReportName()}`, async () => {\n      await this.click();\n      if (this.menu) {\n        await this.menu.selectItem(itemName);\n      }\n    });\n  }\n}\n"
  },
  {
    "path": "packages/testkit/components/Link.ts",
    "content": "import { Locator, Page, test } from \"@playwright/test\";\nimport { BaseElement } from \"./BaseElement\";\n\n/**\n * Class representing a Link element.\n * Extends the BaseElement class.\n */\nexport class Link extends BaseElement {\n  /**\n   * Create a Link element.\n   * @param {Page} page - The Playwright page object.\n   * @param {Locator} locator - The locator for the Link element.\n   * @param {string} elementReportName - The name for reporting purposes.\n   */\n  constructor(page: Page, locator: Locator, elementReportName: string) {\n    super(page, locator, elementReportName);\n  }\n\n  /**\n   * Get the href attribute of the link.\n   * @returns {Promise<string>} The href attribute of the link.\n   */\n  async getLinkHref(): Promise<string> {\n    return await test.step(`Get link href of ${this.getElementReportName()}`, async () => {\n      return await this.getAttributeValue(\"href\");\n    });\n  }\n}\n"
  },
  {
    "path": "packages/testkit/components/List.ts",
    "content": "import { test, Page, Locator } from \"@playwright/test\";\nimport { ListItem } from \"./ListItem\";\nimport { BaseElement } from \"./BaseElement\";\n\n/**\n * Class representing a List element.\n * Extends the BaseElement class.\n */\nexport class List extends BaseElement {\n  /**\n   * Create a List element.\n   * @param {Page} page - The Playwright page object.\n   * @param {Locator} locator - The locator for the List element.\n   * @param {string} elementReportName - The name for reporting purposes.\n   */\n  constructor(page: Page, locator: Locator, elementReportName: string) {\n    super(page, locator, elementReportName);\n  }\n\n  /**\n   * Get a list item by its name.\n   * @param {string} itemName - The name of the item to retrieve.\n   * @returns {Promise<ListItem>} The list item with the specified name.\n   */\n  async getItemByName(itemName: string): Promise<ListItem> {\n    return await test.step(`Get list item by name ${itemName} for ${this.getElementReportName()}`, async () => {\n      return new ListItem(this.getPage(), this.getLocator().getByText(`${itemName}`), itemName);\n    });\n  }\n\n  /**\n   * Get a list item by its index.\n   * @param {number} index - The index of the item to retrieve.\n   * @returns {Promise<ListItem>} The list item with the specified index.\n   */\n  async getItemByIndex(index: number): Promise<ListItem> {\n    return await test.step(`Get list item by index ${index} for ${this.getElementReportName()}`, async () => {\n      return new ListItem(\n        this.getPage(),\n        this.getLocator().getByRole(\"option\").nth(index),\n        `${this.getElementReportName()} - List Item ${index}`\n      );\n    });\n  }\n\n  /**\n   * Click a list item by its name.\n   * @param {string} itemName - The name of the item to click.\n   * @returns {Promise<void>}\n   */\n  async selectItem(itemName: string): Promise<void> {\n    await test.step(`Click list item by name ${itemName} for ${this.getElementReportName()}`, async () => {\n      const listItem = await this.getItemByName(itemName);\n      await listItem.scrollIntoView();\n      await listItem.click();\n    });\n  }\n\n  /**\n   * Check if a list item is disabled.\n   * @param {string} itemName - The name of the item to check.\n   * @returns {Promise<boolean>} True if the item is disabled, false otherwise.\n   */\n  async isItemDisabled(itemName: string): Promise<boolean> {\n    return await test.step(`Check if list item ${itemName} is disabled for ${this.getElementReportName()}`, async () => {\n      const listItem = await this.getItemByName(itemName);\n      return await listItem.isDisabled();\n    });\n  }\n\n  /**\n   * Get the text of a list item by its index.\n   * @param {number} index - The index of the item to retrieve.\n   * @returns {Promise<string>} The text of the list item with the specified index.\n   */\n  async getItemTextByIndex(index: number): Promise<string> {\n    return await test.step(`Get list item text by index ${index} for ${this.getElementReportName()}`, async () => {\n      const listItem = await this.getItemByIndex(index);\n      return await listItem.getText();\n    });\n  }\n\n  /**\n   * Click a list item by its index.\n   * @param {number} index - The index of the item to click.\n   * @returns {Promise<void>}\n   */\n  async clickItemByIndex(index: number): Promise<void> {\n    await test.step(`Click list item by index ${index} for ${this.getElementReportName()}`, async () => {\n      const listItem = await this.getItemByIndex(index);\n      await listItem.click();\n    });\n  }\n}\n"
  },
  {
    "path": "packages/testkit/components/ListItem.ts",
    "content": "import { Page, Locator } from \"@playwright/test\";\nimport { BaseElement } from \"./BaseElement\";\n\n/**\n * Class representing a ListItem element.\n * Extends the BaseElement class.\n */\nexport class ListItem extends BaseElement {\n  /**\n   * Create a ListItem element.\n   * @param {Page} page - The Playwright page object.\n   * @param {Locator} locator - The locator for the ListItem element.\n   * @param {string} elementReportName - The name for reporting purposes.\n   */\n  constructor(page: Page, locator: Locator, elementReportName: string) {\n    super(page, locator, elementReportName);\n  }\n}\n"
  },
  {
    "path": "packages/testkit/components/Loader.ts",
    "content": "import { Page, Locator } from \"@playwright/test\";\nimport { BaseElement } from \"./BaseElement\";\n\n/**\n * Class representing a Loader element.\n * Extends the BaseElement class.\n */\nexport class Loader extends BaseElement {\n  /**\n   * Create a Loader element.\n   * @param {Page} page - The Playwright page object.\n   * @param {Locator} locator - The locator for the Loader element.\n   * @param {string} elementReportName - The name for reporting purposes.\n   */\n  constructor(page: Page, locator: Locator, elementReportName: string) {\n    super(page, locator, elementReportName);\n  }\n}\n"
  },
  {
    "path": "packages/testkit/components/Menu.ts",
    "content": "import { test, Page, Locator } from \"@playwright/test\";\nimport { MenuItem } from \"./MenuItem\";\nimport { BaseElement } from \"./BaseElement\";\n\n/**\n * Class representing a Menu element.\n * Extends the BaseElement class.\n */\nexport class Menu extends BaseElement {\n  /**\n   * Create a Menu element.\n   * @param {Page} page - The Playwright page object.\n   * @param {Locator} locator - The locator for the Menu element.\n   * @param {string} elementReportName - The name for reporting purposes.\n   */\n  constructor(page: Page, locator: Locator, elementReportName: string) {\n    super(page, locator, elementReportName);\n  }\n\n  /**\n   * Get all menu items.\n   * @returns {Promise<MenuItem[]>} An array of menu items.\n   */\n  async getAllMenuItems(): Promise<MenuItem[]> {\n    return await test.step(`Get all menu items for ${this.getElementReportName()}`, async () => {\n      const items = await this.getLocator().getByRole(\"menuitem\").all();\n      return items.map((item, index) => new MenuItem(this.getPage(), item, `Menu item ${index}`));\n    });\n  }\n\n  /**\n   * Get a menu item by its name.\n   * @param {string} itemName - The name of the item to retrieve.\n   * @returns {Promise<MenuItem>} The menu item with the specified name.\n   */\n  async getItemByName(itemName: string): Promise<MenuItem> {\n    return await test.step(`Get menu item by name ${itemName} for ${this.getElementReportName()}`, async () => {\n      return new MenuItem(this.getPage(), this.getLocator().getByRole(\"menuitem\", { name: itemName }), itemName);\n    });\n  }\n\n  /**\n   * Get a menu item by its index.\n   * @param {number} index - The index of the item to retrieve.\n   * @returns {Promise<MenuItem>} The menu item with the specified index.\n   */\n  async getItemByIndex(index: number): Promise<MenuItem> {\n    return await test.step(`Get menu item by index ${index} for ${this.getElementReportName()}`, async () => {\n      return new MenuItem(this.getPage(), this.getLocator().getByRole(\"menuitem\").nth(index), `Menu item ${index}`);\n    });\n  }\n\n  /**\n   * Click a menu item by its name.\n   * @param {string} itemName - The name of the item to click.\n   * @returns {Promise<void>}\n   */\n  async selectItem(itemName: string): Promise<void> {\n    await test.step(`Click menu item by name ${itemName} for ${this.getElementReportName()}`, async () => {\n      const menuItem = await this.getItemByName(itemName);\n      await menuItem.hover();\n      await menuItem.click();\n    });\n  }\n\n  /**\n   * Select a sub menu item.\n   * @param {string} rootItem - The name of the root item.\n   * @param {string} subItem - The name of the sub item.\n   * @returns {Promise<void>}\n   */\n  async selectSubItem(rootItem: string, subItem: string): Promise<void> {\n    await test.step(`Select sub menu item ${subItem} in ${rootItem} in ${this.getElementReportName()}`, async () => {\n      const rootMenuItem = await this.getItemByName(rootItem);\n      await rootMenuItem.hover();\n      const secondaryMenu = new Menu(\n        this.getPage(),\n        this.getPage().locator(`.secondary-menu-enter-done`),\n        `Secondary Menu`\n      );\n      await secondaryMenu.selectItem(subItem);\n    });\n  }\n\n  /**\n   * Check if a menu item is disabled.\n   * @param {string} itemName - The name of the item to check.\n   * @returns {Promise<boolean>} True if the menu item is disabled, false otherwise.\n   */\n  async isMenuItemDisabled(itemName: string): Promise<boolean> {\n    return await test.step(`Check if menu item is disabled for ${itemName} for ${this.getElementReportName()}`, async () => {\n      const menuItem = await this.getItemByName(itemName);\n      return (await menuItem.getComputedStyle(\"cursor\")) === \"not-allowed\";\n    });\n  }\n\n  /**\n   * Get the name of a menu item by its index.\n   * @param {number} index - The index of the item to retrieve.\n   * @returns {Promise<string>} The name of the menu item with the specified index.\n   */\n  async getMenuItemNameByIndex(index: number): Promise<string> {\n    return await test.step(`Get menu item name by index ${index} for ${this.getElementReportName()}`, async () => {\n      const menuItem = await this.getItemByIndex(index);\n      return await menuItem.getText();\n    });\n  }\n}\n"
  },
  {
    "path": "packages/testkit/components/MenuButton.ts",
    "content": "import { Page, Locator, test } from \"@playwright/test\";\nimport { BaseElement } from \"./BaseElement\";\nimport { Menu } from \"./Menu\";\n\n/**\n * Class representing a MenuButton element.\n * Extends the BaseElement class.\n */\nexport class MenuButton extends BaseElement {\n  private menu: Menu;\n\n  /**\n   * Create a MenuButton element.\n   * @param {Page} page - The Playwright page object.\n   * @param {Locator} locator - The locator for the MenuButton element.\n   * @param {string} elementReportName - The name for reporting purposes.\n   */\n  constructor(page: Page, locator: Locator, elementReportName: string, menu: Menu) {\n    super(page, locator, elementReportName);\n    this.menu = menu;\n  }\n\n  /**\n   * Select an item from the menu.\n   * @param {string} itemName - The name of the item to select.\n   * @returns {Promise<void>}\n   */\n  async selectItem(itemName: string): Promise<void> {\n    await test.step(`Select menu item by name ${itemName} for ${this.getElementReportName()}`, async () => {\n      await this.openMenu();\n      await this.menu.selectItem(itemName);\n    });\n  }\n\n  /**\n   * Open the menu if it is not already expanded.\n   * @returns {Promise<void>}\n   */\n  async openMenu(): Promise<void> {\n    await test.step(`Open menu for ${this.getElementReportName()}`, async () => {\n      if (!(await this.isExpanded())) {\n        await this.click();\n        // Wait for the menu to open\n        await this.getPage().waitForTimeout(200);\n      }\n    });\n  }\n\n  /**\n   * Close the menu if it is currently expanded.\n   * @returns {Promise<void>}\n   */\n  async closeMenu(): Promise<void> {\n    await test.step(`Close menu for ${this.getElementReportName()}`, async () => {\n      if (await this.isExpanded()) {\n        await this.click();\n        // Wait for the menu to close\n        await this.getPage().waitForTimeout(200);\n      }\n    });\n  }\n\n  /**\n   * Check if the secondary button menu is expanded.\n   * @returns {Promise<boolean>} True if the secondary button menu is expanded, false otherwise.\n   */\n  async isMenuExpanded(): Promise<boolean> {\n    return await test.step(`Check if menu is expanded for ${this.getElementReportName()}`, async () => {\n      return await this.isExpanded();\n    });\n  }\n\n  /**\n   * Select a sub menu item.\n   * @param {string} rootItem - The name of the root item.\n   * @param {string} subItem - The name of the sub item.\n   * @returns {Promise<void>}\n   */\n  async selectSubItem(rootItem: string, subItem: string): Promise<void> {\n    await test.step(`Select sub menu item ${subItem} in ${rootItem} in ${this.getElementReportName()}`, async () => {\n      await this.menu.selectSubItem(rootItem, subItem);\n    });\n  }\n}\n"
  },
  {
    "path": "packages/testkit/components/MenuItem.ts",
    "content": "import { Page, Locator } from \"@playwright/test\";\nimport { BaseElement } from \"./BaseElement\";\n\n/**\n * Class representing a MenuItem element.\n * Extends the BaseElement class.\n */\nexport class MenuItem extends BaseElement {\n  /**\n   * Create a MenuItem element.\n   * @param {Page} page - The Playwright page object.\n   * @param {Locator} locator - The locator for the MenuItem element.\n   * @param {string} elementReportName - The name for reporting purposes.\n   */\n  constructor(page: Page, locator: Locator, elementReportName: string) {\n    super(page, locator, elementReportName);\n  }\n}\n"
  },
  {
    "path": "packages/testkit/components/Modal.ts",
    "content": "import { Page, Locator, test } from \"@playwright/test\";\nimport { BaseElement } from \"./BaseElement\";\nimport { IconButton } from \"./IconButton\";\n\n/**\n * Class representing a Modal element.\n * Extends the BaseElement class.\n */\nexport class Modal extends BaseElement {\n  private closeModalButton: IconButton;\n\n  /**\n   * Create a Modal element.\n   * @param {Page} page - The Playwright page object.\n   * @param {Locator} locator - The locator for the Modal element.\n   * @param {string} elementReportName - The name for reporting purposes.\n   */\n  constructor(page: Page, locator: Locator, elementReportName: string) {\n    super(page, locator, elementReportName);\n    this.closeModalButton = new IconButton(\n      page,\n      locator.getByTestId(\"modal-close-button\"),\n      `${elementReportName} - X Button`\n    );\n  }\n\n  /**\n   * Close the modal.\n   * @returns {Promise<void>}\n   */\n  async closeModal(): Promise<void> {\n    await test.step(`Close modal for ${this.getElementReportName()}`, async () => {\n      if (await this.closeModalButton.isVisible()) {\n        await this.closeModalButton.click();\n      } else {\n        await this.getPage().keyboard.press(\"Escape\");\n      }\n      // Wait for the modal to close\n      await this.getPage().waitForTimeout(200);\n    });\n  }\n}\n"
  },
  {
    "path": "packages/testkit/components/RadioButton.ts",
    "content": "import { test, Locator, Page } from \"@playwright/test\";\nimport { BaseElement } from \"./BaseElement\";\n\n/**\n * Class representing a RadioButton element.\n * Extends the BaseElement class.\n */\nexport class RadioButton extends BaseElement {\n  /**\n   * Create a RadioButton element.\n   * @param {Page} page - The Playwright page object.\n   * @param {Locator} locator - The locator for the RadioButton element.\n   * @param {string} elementReportName - The name for reporting purposes.\n   */\n  constructor(page: Page, locator: Locator, elementReportName: string) {\n    super(page, locator, elementReportName);\n  }\n\n  /**\n   * Check the radio button.\n   * @returns {Promise<void>}\n   */\n  async select(): Promise<void> {\n    await test.step(`Check radio button for ${this.getElementReportName()}`, async () => {\n      if (!(await this.isChecked())) {\n        await this.getLocator().check();\n      }\n    });\n  }\n\n  /**\n   * Uncheck the radio button.\n   * @returns {Promise<void>}\n   */\n  async unselect(): Promise<void> {\n    await test.step(`Uncheck radio button for ${this.getElementReportName()}`, async () => {\n      if (await this.isChecked()) {\n        await this.getLocator().uncheck();\n      }\n    });\n  }\n\n  /**\n   * Check if the radio button is checked.\n   * @returns {Promise<boolean>} True if the radio button is checked, false otherwise.\n   */\n  async isChecked(): Promise<boolean> {\n    return await test.step(`Check if radio button is checked for ${this.getElementReportName()}`, async () => {\n      return await this.getLocator().isChecked();\n    });\n  }\n}\n"
  },
  {
    "path": "packages/testkit/components/Search.ts",
    "content": "import { Page, Locator, test } from \"@playwright/test\";\nimport { BaseElement } from \"./BaseElement\";\nimport { TextField } from \"./TextField\";\nimport { IconButton } from \"./IconButton\";\nimport { Button } from \"./Button\";\nimport { Menu } from \"./Menu\";\nimport { MenuButton } from \"./MenuButton\";\n\n/**\n * Class representing a Search element.\n * Extends the BaseElement class.\n */\nexport class Search extends BaseElement {\n  private input: TextField;\n  private clearSearchIconButton: IconButton;\n  private filterButton: Button | undefined;\n\n  /**\n   * Create a Search element.\n   * @param {Page} page - The Playwright page object.\n   * @param {Locator} locator - The locator for the Search element.\n   * @param {string} elementReportName - The name for reporting purposes.\n   */\n  constructor(page: Page, locator: Locator, elementReportName: string, filterMenuType?: Menu) {\n    super(page, locator, elementReportName);\n    this.input = new TextField(page, locator.locator(\"[type='search']\"), `${elementReportName} - Input`);\n    this.clearSearchIconButton = new IconButton(\n      page,\n      locator.locator(\"[aria-label='Clear']\"),\n      `${elementReportName} - Clear Search Icon Button`\n    );\n    if (filterMenuType) {\n      this.filterButton = new MenuButton(\n        this.getPage(),\n        this.getLocator().locator(\"[aria-label='Filters']\").nth(1),\n        \"Filter Button\",\n        filterMenuType\n      );\n    }\n  }\n\n  /**\n   * Set specified text in search field.\n   * @param {string} text - Text to be filled in the search field.\n   * @returns {Promise<void>}\n   */\n  async setText(text: string): Promise<void> {\n    await test.step(`Set text: ${text} for ${this.getElementReportName()}`, async () => {\n      await this.input.setText(text);\n    });\n  }\n\n  /**\n   * Clear the text in the search field.\n   */\n  async clear(): Promise<void> {\n    await test.step(`Clear text for ${this.getElementReportName()}`, async () => {\n      await this.input.clearText();\n    });\n  }\n\n  /**\n   * Get the text from the search field.\n   * @returns {Promise<string>} The text from the search field.\n   */\n  async getText(): Promise<string> {\n    return await test.step(`Get text for ${this.getElementReportName()}`, async () => {\n      return await this.input.getText();\n    });\n  }\n\n  /**\n   * Check if the search field is empty.\n   * @returns {Promise<string>}\n   */\n  async isEmpty(): Promise<boolean> {\n    return await test.step(`Check if search field is empty for ${this.getElementReportName()}`, async () => {\n      return await this.input.isEmpty();\n    });\n  }\n\n  /**\n   * Click the clear search button.\n   * @returns {Promise<void>}\n   */\n  async clickClearSearchButton(): Promise<void> {\n    await test.step(`Clear search for ${this.getElementReportName()}`, async () => {\n      await this.clearSearchIconButton.click();\n    });\n  }\n}\n"
  },
  {
    "path": "packages/testkit/components/SplitButton.ts",
    "content": "import { Page, Locator, test } from \"@playwright/test\";\nimport { BaseElement } from \"./BaseElement\";\nimport { Button } from \"./Button\";\nimport { Menu } from \"./Menu\";\n\n/**\n * Class representing a SplitButton element.\n * Extends the BaseElement class.\n */\nexport class SplitButton extends BaseElement {\n  private primaryButton: Button;\n  private secondaryButton: Button;\n  private menu: Menu;\n\n  /**\n   * Create a SplitButton element.\n   * @param {Page} page - The Playwright page object.\n   * @param {Locator} locator - The locator for the SplitButton element.\n   * @param {string} elementReportName - The name for reporting purposes.\n   */\n  constructor(page: Page, locator: Locator, elementReportName: string, menu: Menu) {\n    super(page, locator, elementReportName);\n    this.primaryButton = new Button(page, locator.locator(\"button\").first(), `${elementReportName} - Primary Button`);\n    this.secondaryButton = new Button(\n      page,\n      locator.locator(\"button\").last(),\n      `${elementReportName} - Secondary Button`\n    );\n    this.menu = menu;\n  }\n\n  /**\n   * Select an item from the menu.\n   * @param {string} itemName - The name of the item to select.\n   * @returns {Promise<void>}\n   */\n  async selectItem(itemName: string): Promise<void> {\n    await test.step(`Select item by name ${itemName} for ${this.getElementReportName()}`, async () => {\n      await this.openMenu();\n      await this.menu.selectItem(itemName);\n    });\n  }\n\n  /**\n   * Open the secondary button menu.\n   */\n  async openMenu(): Promise<void> {\n    await test.step(`Open menu for ${this.getElementReportName()}`, async () => {\n      if (!(await this.isMenuExpanded())) {\n        await this.secondaryButton.click();\n        // Wait for the menu to open\n        await this.getPage().waitForTimeout(100);\n      }\n    });\n  }\n\n  /**\n   * Close the secondary button menu.\n   */\n  async closeMenu(): Promise<void> {\n    await test.step(`Close menu for ${this.getElementReportName()}`, async () => {\n      if (await this.isMenuExpanded()) {\n        await this.secondaryButton.click();\n        // Wait for the menu to close\n        await this.getPage().waitForTimeout(100);\n      }\n    });\n  }\n\n  /**\n   * Click the primary button.\n   */\n  async clickPrimaryButton(): Promise<void> {\n    await test.step(`Click primary button for ${this.getElementReportName()}`, async () => {\n      await this.primaryButton.click();\n    });\n  }\n\n  /**\n   * Get the text of the primary button.\n   * @returns {Promise<string>} The text of the primary button.\n   */\n  async getPrimaryButtonText(): Promise<string> {\n    return await test.step(`Get primary button text for ${this.getElementReportName()}`, async () => {\n      return await this.primaryButton.getText();\n    });\n  }\n\n  /**\n   * Check if the secondary button menu is expanded.\n   * @returns {Promise<boolean>} True if the secondary button menu is expanded, false otherwise.\n   */\n  async isMenuExpanded(): Promise<boolean> {\n    return await test.step(`Check if menu is expanded for ${this.getElementReportName()}`, async () => {\n      return await this.secondaryButton.isExpanded();\n    });\n  }\n}\n"
  },
  {
    "path": "packages/testkit/components/Steps.ts",
    "content": "import { test, Locator, Page } from \"@playwright/test\";\nimport { BaseElement } from \"./BaseElement\";\nimport { Button } from \"./Button\";\n\n/**\n * Class representing a Steps element.\n * Extends the BaseElement class.\n */\nexport class Steps extends BaseElement {\n  private backButton: Button;\n  private forwardButton: Button;\n\n  /**\n   * Create a Steps element.\n   * @param {Page} page - The Playwright page object.\n   * @param {Locator} locator - The locator for the Steps element.\n   * @param {string} elementReportName - The name for reporting purposes.\n   */\n  constructor(page: Page, locator: Locator, elementReportName: string) {\n    super(page, locator, elementReportName);\n    this.backButton = new Button(\n      page,\n      this.getLocator().locator(\"button\").first(),\n      `${elementReportName} - Back Button`\n    );\n    this.forwardButton = new Button(\n      page,\n      this.getLocator().locator(\"button\").last(),\n      `${elementReportName} - Forward Button`\n    );\n  }\n\n  /**\n   * Get a step by its index.\n   * @param {number} index - The index of the step to retrieve.\n   * @returns {Promise<Button>} The step with the specified index.\n   */\n  async getStepByIndex(index: number): Promise<Button> {\n    return await test.step(`Get step by index ${index} for ${this.getElementReportName()}`, async () => {\n      return new Button(\n        this.getPage(),\n        this.getLocator().getByRole(\"group\").locator(\"button\").nth(index),\n        `${this.getElementReportName()} - Step ${index}`\n      );\n    });\n  }\n\n  /**\n   * Get all step dots.\n   * @returns {Promise<Button[]>} An array of step dots.\n   */\n  async getStepDots(): Promise<Button[]> {\n    return await test.step(`Get all steps for ${this.getElementReportName()}`, async () => {\n      const steps = await this.getLocator().getByRole(\"group\").locator(\"button\").all();\n      return steps.map(\n        (step, index) => new Button(this.getPage(), step, `${this.getElementReportName()} - Step ${index}`)\n      );\n    });\n  }\n\n  /**\n   * Go to the previous step.\n   */\n  async goToPreviousStep(): Promise<void> {\n    await test.step(`Click back button for ${this.getElementReportName()}`, async () => {\n      await this.backButton.click();\n    });\n  }\n\n  /**\n   * Go to the next step.\n   */\n  async goToNextStep(): Promise<void> {\n    await test.step(`Click next button for ${this.getElementReportName()}`, async () => {\n      await this.forwardButton.click();\n    });\n  }\n\n  /**\n   * Check if the back button is enabled.\n   * @returns {Promise<boolean>} True if the back button is enabled, false otherwise.\n   */\n  async isBackButtonEnabled(): Promise<boolean> {\n    return await test.step(`Check if back button is enabled for ${this.getElementReportName()}`, async () => {\n      return await this.backButton.isEnabled();\n    });\n  }\n\n  /**\n   * Check if the forward button is enabled.\n   * @returns {Promise<boolean>} True if the forward button is enabled, false otherwise.\n   */\n  async isForwardButtonEnabled(): Promise<boolean> {\n    return await test.step(`Check if forward button is enabled for ${this.getElementReportName()}`, async () => {\n      return await this.forwardButton.isEnabled();\n    });\n  }\n\n  /**\n   * Check if the back button is visible.\n   * @returns {Promise<boolean>} True if the back button is visible, false otherwise.\n   */\n  async isBackButtonVisible(): Promise<boolean> {\n    return await test.step(`Check if back button is visible for ${this.getElementReportName()}`, async () => {\n      return await this.backButton.isVisible();\n    });\n  }\n\n  /**\n   * Check if the forward button is visible.\n   * @returns {Promise<boolean>} True if the forward button is visible, false otherwise.\n   */\n  async isForwardButtonVisible(): Promise<boolean> {\n    return await test.step(`Check if forward button is visible for ${this.getElementReportName()}`, async () => {\n      return await this.forwardButton.isVisible();\n    });\n  }\n\n  /**\n   * Get the number of steps.\n   * @returns {Promise<number>} The number of steps.\n   */\n  async getTotalStepsCount(): Promise<number> {\n    return await test.step(`Get number of steps for ${this.getElementReportName()}`, async () => {\n      const steps = await this.getStepDots();\n      return steps.length;\n    });\n  }\n\n  /**\n   * Click a step dot by its index.\n   * @param {number} stepIndex - The index of the step dot to click.\n   * @returns {Promise<void>}\n   */\n  async clickStepDot(stepIndex: number): Promise<void> {\n    await test.step(`Click step dot by index ${stepIndex} for ${this.getElementReportName()}`, async () => {\n      const step = await this.getStepByIndex(stepIndex);\n      await step.click();\n    });\n  }\n\n  /**\n   * Get the active step dot index.\n   * @returns {Promise<number>} The active step dot index.\n   */\n  async getActiveStepDotIndex(): Promise<number> {\n    return await test.step(`Get active step dot index for ${this.getElementReportName()}`, async () => {\n      const steps = await this.getStepDots();\n      let activeStepIndex = -1;\n      for (const step of steps) {\n        if ((await step.getAttributeValue(\"aria-current\")) === \"step\") {\n          activeStepIndex = steps.indexOf(step);\n          break;\n        }\n      }\n      return activeStepIndex;\n    });\n  }\n\n  /**\n   * Check if a step dot is active.\n   * @param {number} stepIndex - The index of the step dot to check.\n   * @returns {Promise<boolean>} True if the step dot is active.\n   */\n  async isStepDotActive(stepIndex: number): Promise<boolean> {\n    return await test.step(`Check if step dot ${stepIndex} is active for ${this.getElementReportName()}`, async () => {\n      const step = await this.getStepByIndex(stepIndex);\n      return (await step.getAttributeValue(\"aria-current\")) === \"step\";\n    });\n  }\n\n  /**\n   * Navigate to the first step.\n   * @returns {Promise<void>}\n   */\n  async navigateToBeginning(): Promise<void> {\n    await test.step(`Navigate to first step for ${this.getElementReportName()}`, async () => {\n      await this.clickStepDot(0);\n    });\n  }\n\n  /**\n   * Navigate to the last step.\n   * @returns {Promise<void>}\n   */\n  async navigateToEnd(): Promise<void> {\n    await test.step(`Navigate to last step for ${this.getElementReportName()}`, async () => {\n      const numberOfSteps = await this.getTotalStepsCount();\n      await this.clickStepDot(numberOfSteps - 1);\n    });\n  }\n\n  /**\n   * Get the current step content.\n   * @returns {Promise<BaseElement>} The current step content.\n   */\n  async getCurrentStepContent(): Promise<BaseElement> {\n    return await test.step(`Get current step content for ${this.getElementReportName()}`, async () => {\n      const locatorsToAvoid = this.getLocator()\n        .locator('.header, [data-testid*=\"steps-forward-command\"], [data-testid*=\"steps-backward-command\"]')\n        .first();\n\n      const stepContent = this.getLocator().locator(\"> *\").filter({ hasNot: locatorsToAvoid });\n      return new BaseElement(this.getPage(), stepContent, `${this.getElementReportName()} - Step Content`);\n    });\n  }\n\n  /**\n   * Get the current step index from the steps numbers header (for numbers type steps).\n   * @returns {Promise<number>} The current step index (0-based).\n   */\n  async getCurrentStepIndex(): Promise<number> {\n    let currentStepIndex = 0;\n    await test.step(`Get current step index from ${this.elementReportName}`, async () => {\n      const numbersText = await this.locator\n        .locator(\"span\")\n        .filter({ hasText: /\\d+\\s*\\\\\\s*\\d+/ })\n        .innerText();\n      const match = numbersText.match(/(\\d+)\\s*\\\\\\s*(\\d+)/);\n      if (match) {\n        currentStepIndex = parseInt(match[1]) - 1; // Convert to 0-based index\n      }\n    });\n    return currentStepIndex;\n  }\n\n  /**\n   * Wait for the steps to load.\n   * @returns {Promise<void>}\n   */\n  async waitForStepsToLoad(): Promise<void> {\n    await test.step(`Wait for steps to load for ${this.getElementReportName()}`, async () => {\n      await this.waitForElementToBeVisible();\n    });\n  }\n}\n"
  },
  {
    "path": "packages/testkit/components/Tab.ts",
    "content": "import { Locator, Page } from \"@playwright/test\";\nimport { BaseElement } from \"./BaseElement\";\n\n/**\n * Class representing a Tab element.\n * Extends the BaseElement class.\n */\nexport class Tab extends BaseElement {\n  /**\n   * Create a Tab element.\n   * @param {Page} page - The Playwright page object.\n   * @param {Locator} locator - The locator for the Tab element.\n   * @param {string} elementReportName - The name for reporting purposes.\n   */\n  constructor(page: Page, locator: Locator, elementReportName: string) {\n    super(page, locator, elementReportName);\n  }\n}\n"
  },
  {
    "path": "packages/testkit/components/TabList.ts",
    "content": "import { Page, Locator, test } from \"@playwright/test\";\nimport { BaseElement } from \"./BaseElement\";\nimport { Tab } from \"./Tab\";\n\n/**\n * Class representing a TabList element.\n * Extends the BaseElement class.\n */\nexport class TabList extends BaseElement {\n  /**\n   * Create a TabList element.\n   * @param {Page} page - The Playwright page object.\n   * @param {Locator} locator - The locator for the TabList element.\n   * @param {string} elementReportName - The name for reporting purposes.\n   */\n  constructor(page: Page, locator: Locator, elementReportName: string) {\n    super(page, locator, elementReportName);\n  }\n\n  /**\n   * Get a tab by its name.\n   * @param {string} tabName - The name of the tab to retrieve.\n   * @returns {Promise<Tab>} The tab with the specified name.\n   */\n  async getTabByName(tabName: string): Promise<Tab> {\n    return await test.step(`Get tab by name ${tabName} for ${this.getElementReportName()}`, async () => {\n      return new Tab(this.getPage(), this.getLocator().getByRole(\"tab\", { name: tabName }), tabName);\n    });\n  }\n\n  /**\n   * Get all tabs.\n   * @returns {Promise<Tab[]>} An array of tabs.\n   */\n  async getAllTabs(): Promise<Tab[]> {\n    return await test.step(`Get all tabs for ${this.getElementReportName()}`, async () => {\n      const tabs = await this.getLocator().getByRole(\"tab\").all();\n      return tabs.map((tab, index) => new Tab(this.getPage(), tab, `${this.getElementReportName()} - Tab ${index}`));\n    });\n  }\n\n  /**\n   * Get a tab by its index.\n   * @param {number} index - The index of the tab to retrieve.\n   * @returns {Promise<Tab>} The tab with the specified index.\n   */\n  async getTabByIndex(index: number): Promise<Tab> {\n    return await test.step(`Get tab by index ${index} for ${this.getElementReportName()}`, async () => {\n      return new Tab(\n        this.getPage(),\n        this.getLocator().getByRole(\"tab\").nth(index),\n        `${this.getElementReportName()} - Tab ${index}`\n      );\n    });\n  }\n\n  /**\n   * Select a tab by its name.\n   * @param {string} tabName - The name of the tab to select.\n   * @returns {Promise<void>}\n   */\n  async selectTab(tabName: string): Promise<void> {\n    await test.step(`Select tab ${tabName} for ${this.getElementReportName()}`, async () => {\n      const tab = await this.getTabByName(tabName);\n      await tab.click();\n    });\n  }\n\n  /**\n   * Get the name of the selected tab.\n   * @returns {Promise<string>} The name of the selected tab.\n   */\n  async getSelectedTabName(): Promise<string> {\n    return await test.step(`Get selected tab name for ${this.getElementReportName()}`, async () => {\n      const tabs = await this.getAllTabs();\n      let selectedTab: Tab | null = null;\n\n      for (const tab of tabs) {\n        if (await tab.isSelected()) {\n          selectedTab = tab;\n          break;\n        }\n      }\n\n      if (!selectedTab) {\n        throw new Error(\"No selected tab found\");\n      }\n\n      return await selectedTab.getText();\n    });\n  }\n\n  /**\n   * Check if a tab is selected.\n   * @param {string} tabName - The name of the tab to check.\n   * @returns {Promise<boolean>} True if the tab is selected.\n   */\n  async isTabSelected(tabName: string): Promise<boolean> {\n    return await test.step(`Check if tab ${tabName} is selected for ${this.getElementReportName()}`, async () => {\n      const tab = await this.getTabByName(tabName);\n      return await tab.isSelected();\n    });\n  }\n\n  /**\n   * Get the name of a tab by its index.\n   * @param {number} index - The index of the tab to retrieve.\n   * @returns {Promise<string>} The name of the tab with the specified index.\n   */\n  async getTabNameByIndex(index: number): Promise<string> {\n    return await test.step(`Get tab name by index ${index} for ${this.getElementReportName()}`, async () => {\n      const tab = await this.getTabByIndex(index);\n      return await tab.getText();\n    });\n  }\n}\n"
  },
  {
    "path": "packages/testkit/components/Text.ts",
    "content": "import { Page, Locator } from \"@playwright/test\";\nimport { BaseElement } from \"./BaseElement\";\n\n/**\n * Class representing a Text element.\n * Extends the BaseElement class.\n */\nexport class Text extends BaseElement {\n  /**\n   * Create a Text element.\n   * @param {Page} page - The Playwright page object.\n   * @param {Locator} locator - The locator for the Text element.\n   * @param {string} elementReportName - The name for reporting purposes.\n   */\n  constructor(page: Page, locator: Locator, elementReportName: string) {\n    super(page, locator, elementReportName);\n  }\n}\n"
  },
  {
    "path": "packages/testkit/components/TextArea.ts",
    "content": "import { Page, Locator, test } from \"@playwright/test\";\nimport { pressKey } from \"../utils/common-actions\";\nimport { BaseElement } from \"./BaseElement\";\nimport { Button } from \"./Button\";\nimport { Text } from \"./Text\";\n\n/**\n * Class representing a TextArea element.\n * Extends the BaseElement class.\n */\nexport class TextArea extends BaseElement {\n  private wrapper: Button;\n  private input: Text;\n\n  /**\n   * Create a TextArea element.\n   * @param {Page} page - The Playwright page object.\n   * @param {Locator} locator - The locator for the TextArea element.\n   * @param {string} elementReportName - The name for reporting purposes.\n   */\n  constructor(page: Page, locator: Locator, elementReportName: string) {\n    super(page, locator, elementReportName);\n    this.wrapper = new Button(page, locator, `${elementReportName} - Wrapper`);\n    this.input = new Text(page, locator.locator(\"textarea\"), `${elementReportName} - Input`);\n  }\n\n  /**\n   * Set specified text in text area.\n   * @param {string} text - Text to be filled in the text area.\n   * @returns {Promise<void>}\n   */\n  async setText(text: string): Promise<void> {\n    await test.step(`Set text: ${text} for ${this.getElementReportName()}`, async () => {\n      await this.wrapper.click();\n      await this.input.waitForElementToBeVisible();\n      await this.input.getLocator().fill(text);\n      await this.exitEditMode();\n    });\n  }\n\n  /**\n   * Clear the text from the text area.\n   * @returns {Promise<void>}\n   */\n  async clearText(): Promise<void> {\n    await test.step(`Clear text for ${this.getElementReportName()}`, async () => {\n      await this.input.getLocator().clear();\n    });\n  }\n\n  /**\n   * Get the text from the text area.\n   * @returns {Promise<string>} The text from the text area.\n   */\n  async getText(): Promise<string> {\n    return await test.step(`Get text for ${this.getElementReportName()}`, async () => {\n      return await this.input.getLocator().inputValue();\n    });\n  }\n\n  /**\n   * Check if the text area is empty.\n   * @returns {Promise<boolean>} True if the text area is empty.\n   */\n  async isEmpty(): Promise<boolean> {\n    return await test.step(`Check if text area is empty for ${this.getElementReportName()}`, async () => {\n      return (await this.input.getLocator().inputValue()) === \"\";\n    });\n  }\n\n  /**\n   * Exit the edit mode by pressing the Escape key.\n   * @returns {Promise<void>}\n   */\n  async exitEditMode(): Promise<void> {\n    await test.step(\"Exit edit mode\", async () => {\n      await pressKey(this.getPage(), \"Escape\");\n    });\n  }\n}\n"
  },
  {
    "path": "packages/testkit/components/TextField.ts",
    "content": "import { Page, Locator, test } from \"@playwright/test\";\nimport { BaseElement } from \"./BaseElement\";\nimport { pressKey } from \"../utils/common-actions\";\n\n/**\n * Class representing a TextField element.\n * Extends the BaseElement class.\n */\nexport class TextField extends BaseElement {\n  /**\n   * Create a TextField element.\n   * @param {Page} page - The Playwright page object.\n   * @param {Locator} locator - The locator for the TextField element.\n   * @param {string} elementReportName - The name for reporting purposes.\n   */\n  constructor(page: Page, locator: Locator, elementReportName: string) {\n    super(page, locator, elementReportName);\n  }\n\n  /**\n   * Set specified text in input element.\n   * @param {string} text - Text to be filled in the input.\n   * @returns {Promise<void>}\n   */\n  async setText(text: string): Promise<void> {\n    await test.step(`Set text: ${text} for ${this.getElementReportName()}`, async () => {\n      await this.clearText();\n      await this.getLocator().fill(text);\n    });\n  }\n\n  /**\n   * Clear the text in the input element.\n   */\n  async clearText(): Promise<void> {\n    await test.step(`Clear text for ${this.getElementReportName()}`, async () => {\n      await this.getLocator().clear();\n    });\n  }\n\n  /**\n   * Get the text from the input element.\n   * @returns {Promise<string>} The text from the input element.\n   */\n  async getText(): Promise<string> {\n    return await test.step(`Get text for ${this.getElementReportName()}`, async () => {\n      return await this.getLocator().inputValue();\n    });\n  }\n\n  /**\n   * Get the value of the input element.\n   * @returns {Promise<string>}\n   */\n  async isEmpty(): Promise<boolean> {\n    return await test.step(`Check if text field is empty for ${this.getElementReportName()}`, async () => {\n      return (await this.getLocator().inputValue()) === \"\";\n    });\n  }\n\n  /**\n   * Exit the edit mode by pressing the Escape key.\n   * @returns {Promise<void>}\n   */\n  async exitEditMode(): Promise<void> {\n    await test.step(\"Exit edit mode\", async () => {\n      await pressKey(this.getPage(), \"Escape\");\n    });\n  }\n}\n"
  },
  {
    "path": "packages/testkit/components/Toast.ts",
    "content": "import { Page, Locator, test } from \"@playwright/test\";\nimport { BaseElement } from \"./BaseElement\";\nimport { IconButton } from \"./IconButton\";\nimport { Link } from \"./Link\";\nimport { Loader } from \"./Loader\";\nimport { Button } from \"./Button\";\n\n/**\n * Class representing a Toast element.\n * Extends the BaseElement class.\n */\nexport class Toast extends BaseElement {\n  private closeButton: IconButton;\n  private link: Link;\n  private loader: Loader;\n  private button: Button;\n\n  /**\n   * Create a Toast element.\n   * @param {Page} page - The Playwright page object.\n   * @param {Locator} locator - The locator for the Toast element.\n   * @param {string} elementReportName - The name for reporting purposes.\n   */\n  constructor(page: Page, locator: Locator, elementReportName: string) {\n    super(page, locator, elementReportName);\n    this.closeButton = new IconButton(page, locator.locator(\"button\").last(), `${elementReportName} - Close Button`);\n    this.link = new Link(page, locator.locator(\"a\"), `${elementReportName} - Link`);\n    this.loader = new Loader(page, locator.getByRole(\"alert\"), `${elementReportName} - Loader`);\n    this.button = new Button(page, locator.locator(\"button\").first(), `${elementReportName} - Button`);\n  }\n\n  /**\n   * Close the toast.\n   * @returns {Promise<void>}\n   */\n  async close(): Promise<void> {\n    await test.step(`Click close button for ${this.getElementReportName()}`, async () => {\n      await this.closeButton.click();\n    });\n  }\n\n  /**\n   * Check if the toast has a close button.\n   * @returns {Promise<boolean>} True if the toast has a close button, false otherwise.\n   */\n  async hasCloseButton(): Promise<boolean> {\n    return await test.step(`Check if toast has close button for ${this.getElementReportName()}`, async () => {\n      return await this.closeButton.isVisible();\n    });\n  }\n\n  /**\n   * Get the type of the toast.\n   * @returns {Promise<string | null>} The type of the toast.\n   */\n  async getType(): Promise<string | null> {\n    return await test.step(`Get toast type: ${this.getElementReportName()}`, async () => {\n      const classList = await this.getAttributeValue(\"class\");\n\n      if (!classList) return null;\n\n      const types = [\"normal\", \"positive\", \"negative\", \"warning\", \"dark\"];\n\n      for (const type of types) {\n        if (classList.includes(`type${type.charAt(0).toUpperCase() + type.slice(1)}`)) {\n          return type;\n        }\n      }\n      return \"normal\";\n    });\n  }\n\n  /**\n   * Check if the toast is loading.\n   * @returns {Promise<boolean>} True if the toast is loading, false otherwise.\n   */\n  async isLoading(): Promise<boolean> {\n    return await test.step(`Check if toast is loading: ${this.getElementReportName()}`, async () => {\n      return await this.loader.isVisible();\n    });\n  }\n\n  /**\n   * Get the text of the link.\n   * @returns {Promise<string>} The text of the link.\n   */\n  async getLinkText(): Promise<string> {\n    return await test.step(`Get link text for ${this.getElementReportName()}`, async () => {\n      return await this.link.getText();\n    });\n  }\n\n  /**\n   * Get the href of the link.\n   * @returns {Promise<string>} The href of the link.\n   */\n  async getLinkHref(): Promise<string> {\n    return await test.step(`Get link href for ${this.getElementReportName()}`, async () => {\n      return await this.link.getLinkHref();\n    });\n  }\n\n  /**\n   * Click the link.\n   * @returns {Promise<void>}\n   */\n  async clickLink(): Promise<void> {\n    return await test.step(`Click link for ${this.getElementReportName()}`, async () => {\n      await this.link.click();\n    });\n  }\n\n  /**\n   * Click the button.\n   * @returns {Promise<void>}\n   */\n  async clickButton(): Promise<void> {\n    return await test.step(`Click button for ${this.getElementReportName()}`, async () => {\n      await this.button.click();\n    });\n  }\n\n  /**\n   * Get the text of the button.\n   * @returns {Promise<string>} The text of the button.\n   */\n  async getButtonText(): Promise<string> {\n    return await test.step(`Get button text for ${this.getElementReportName()}`, async () => {\n      return await this.button.getText();\n    });\n  }\n\n  /**\n   * Get the content of the toast.\n   * @returns {Promise<string>} The content of the toast.\n   */\n  async getContent(): Promise<string> {\n    return await test.step(`Get content for ${this.getElementReportName()}`, async () => {\n      return await this.getText();\n    });\n  }\n}\n"
  },
  {
    "path": "packages/testkit/components/Toggle.ts",
    "content": "import { Page, Locator, test } from \"@playwright/test\";\nimport { BaseElement } from \"./BaseElement\";\nimport { Button } from \"./Button\";\nimport { TextField } from \"./TextField\";\n\n/**\n * Class representing a Toggle element.\n * Extends the BaseElement class.\n */\nexport class Toggle extends BaseElement {\n  private inputLocator: Locator;\n  private buttonLocator: Locator;\n\n  /**\n   * Create a Toggle element. Can handle both wrapper elements that contain input and button elements,\n   * or direct input elements.\n   * @param {Page} page - The Playwright page object.\n   * @param {Locator} locator - The locator for either the wrapper element or the input element directly.\n   * @param {string} elementReportName - The name for reporting purposes.\n   */\n  constructor(page: Page, locator: Locator, elementReportName: string) {\n    super(page, locator, elementReportName);\n\n    // Store locators for dynamic resolution\n    this.inputLocator = locator;\n    this.buttonLocator = locator;\n  }\n\n  /**\n   * Get the input element, dynamically determining the correct locator.\n   * @private\n   */\n  private async getInput(): Promise<TextField> {\n    // Try to determine if the main locator is an input or wrapper\n    try {\n      // First, try if the locator itself is an input\n      const tagName = await this.inputLocator.evaluate(el => el.tagName.toLowerCase());\n      if (tagName === \"input\") {\n        return new TextField(this.getPage(), this.inputLocator, `${this.getElementReportName()} - Input`);\n      }\n    } catch {\n      // If evaluation fails, continue to try child input\n    }\n\n    // If not an input, try to find input as child\n    const childInput = this.inputLocator.locator(\"input\");\n    return new TextField(this.getPage(), childInput, `${this.getElementReportName()} - Input`);\n  }\n\n  /**\n   * Get the button element, dynamically determining the correct locator.\n   * @private\n   */\n  private async getButton(): Promise<Button> {\n    // Try to determine if the main locator is an input or wrapper\n    try {\n      const tagName = await this.buttonLocator.evaluate(el => el.tagName.toLowerCase());\n      if (tagName === \"input\") {\n        // If main locator is input, look for sibling div\n        const siblingDiv = this.buttonLocator.locator(\"+ div\");\n        return new Button(this.getPage(), siblingDiv, `${this.getElementReportName()} - Button`);\n      }\n    } catch {\n      // If evaluation fails, continue to try child div\n    }\n\n    // If not an input, try to find div as child (wrapper scenario)\n    const childDiv = this.buttonLocator.locator(\"div\");\n    return new Button(this.getPage(), childDiv, `${this.getElementReportName()} - Button`);\n  }\n\n  /**\n   * Set the toggle state.\n   * @param {boolean} isToCheck - True to turn on the toggle, false to turn off.\n   * @returns {Promise<void>}\n   */\n  async set(isToCheck: boolean): Promise<void> {\n    await test.step(`Set toggle to ${isToCheck} for ${this.getElementReportName()}`, async () => {\n      if ((await this.isOn()) !== isToCheck) {\n        const button = await this.getButton();\n        await button.click();\n      }\n    });\n  }\n\n  /**\n   * Check if the toggle is on.\n   * @returns {Promise<boolean>} True if the toggle is on, false otherwise.\n   */\n  async isOn(): Promise<boolean> {\n    return await test.step(`Check if toggle is on for ${this.getElementReportName()}`, async () => {\n      const input = await this.getInput();\n      return await input.isChecked();\n    });\n  }\n}\n"
  },
  {
    "path": "packages/testkit/components/index.ts",
    "content": "export * from \"./BaseElement\";\nexport * from \"./Button\";\nexport * from \"./ButtonGroup\";\nexport * from \"./Checkbox\";\nexport * from \"./ColorPicker\";\nexport * from \"./Combobox\";\nexport * from \"./Dropdown\";\nexport * from \"./EditableHeading\";\nexport * from \"./EditableText\";\nexport * from \"./ExpandCollapse\";\nexport * from \"./IconButton\";\nexport * from \"./Link\";\nexport * from \"./List\";\nexport * from \"./ListItem\";\nexport * from \"./Loader\";\nexport * from \"./Menu\";\nexport * from \"./MenuButton\";\nexport * from \"./MenuItem\";\nexport * from \"./Modal\";\nexport * from \"./RadioButton\";\nexport * from \"./Search\";\nexport * from \"./SplitButton\";\nexport * from \"./Steps\";\nexport * from \"./Tab\";\nexport * from \"./TabList\";\nexport * from \"./Text\";\nexport * from \"./TextArea\";\nexport * from \"./TextField\";\nexport * from \"./Toast\";\nexport * from \"./Toggle\";\n"
  },
  {
    "path": "packages/testkit/index.ts",
    "content": "export * from \"./components\";\nexport * from \"./utils/common-actions\";\n"
  },
  {
    "path": "packages/testkit/package.json",
    "content": "{\n  \"name\": \"@vibe/testkit\",\n  \"version\": \"4.0.0\",\n  \"description\": \"Vibe e2e testing toolkit\",\n  \"keywords\": [\n    \"TESTING\",\n    \"E2E\"\n  ],\n  \"module\": \"dist/esm/index.js\",\n  \"types\": \"dist/index.d.ts\",\n  \"exports\": {\n    \".\": {\n      \"require\": \"./dist/index.js\",\n      \"import\": \"./dist/esm/index.js\",\n      \"types\": \"./dist/index.d.ts\"\n    }\n  },\n  \"author\": \"monday.com\",\n  \"homepage\": \"https://github.com/mondaycom/vibe#readme\",\n  \"license\": \"ISC\",\n  \"main\": \"dist/index.js\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/mondaycom/vibe.git\",\n    \"directory\": \"packages/testkit\"\n  },\n  \"scripts\": {\n    \"test:all\": \"npx playwright test\",\n    \"test:changed\": \"node scripts/run-changed-tests.js\",\n    \"build:cjs\": \"tsc\",\n    \"build:esm\": \"tsc --project tsconfig.esm.json\",\n    \"build\": \"yarn build:cjs && yarn build:esm\",\n    \"start-server\": \"yarn lerna run storybook --scope=@vibe/docs\",\n    \"lint\": \"eslint . --max-warnings=0\",\n    \"lint:fix\": \"yarn lint -- --fix\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/mondaycom/vibe/issues\"\n  },\n  \"devDependencies\": {\n    \"@playwright/test\": \"1.49.1\",\n    \"@typescript-eslint/eslint-plugin\": \"^5.36.1\",\n    \"@typescript-eslint/parser\": \"^5.36.1\",\n    \"eslint\": \"^8.23.0\",\n    \"eslint-config-prettier\": \"^8.3.0\",\n    \"eslint-plugin-playwright\": \"^2.1.0\",\n    \"eslint-plugin-prettier\": \"^4.0.0\",\n    \"prettier\": \"^2.5.1\"\n  },\n  \"peerDependencies\": {\n    \"@playwright/test\": \"*\"\n  }\n}\n"
  },
  {
    "path": "packages/testkit/playwright.config.ts",
    "content": "import { defineConfig } from \"@playwright/test\";\nimport path from \"path\";\n\n// Optimize test timeout based on environment\nconst getTestTimeout = () => {\n  return process.env.CI ? 240 * 1000 : 180 * 1000; // 4 min in CI, 3 min locally\n};\n\n// Optimize web server timeout based on environment\nconst getWebServerTimeout = () => {\n  return process.env.CI ? 180 * 1000 : 120 * 1000; // 3 min in CI, 2 min locally\n};\n\n// Optimize action timeout based on environment\nconst getActionTimeout = () => {\n  return process.env.CI ? 45000 : 30000; // 45 sec in CI, 30 sec locally\n};\n\n// Optimize retries count based on environment\nconst getRetriesCount = () => {\n  return process.env.CI ? 1 : 0; // 1 retry in CI, 0 retries locally\n};\n\n// Optimize global timeout based on environment\nconst getGlobalTimeout = () => {\n  return process.env.CI ? 60 * 60 * 1000 : 30 * 60 * 1000; // 1 hr in CI, 30 min locally\n};\n\n/**\n * @see https://playwright.dev/docs/test-configuration\n */\nexport default defineConfig({\n  // Reporter to use\n  reporter: [\n    [\"html\", { open: \"never\", outputFolder: path.join(process.cwd(), \"/reports\") }],\n    [\n      \"list\",\n      {\n        printSteps: true\n      }\n    ]\n  ],\n\n  // Web server to use\n  webServer: {\n    command: \"yarn start-server\",\n    url: \"http://127.0.0.1:7008\",\n    reuseExistingServer: !process.env.CI,\n    timeout: getWebServerTimeout(),\n    stdout: \"ignore\",\n    stderr: \"pipe\"\n  },\n\n  // Test configuration\n  use: {\n    headless: true,\n    baseURL: \"http://127.0.0.1:7008\",\n    trace: \"retain-on-failure\",\n    video: \"retain-on-failure\",\n    actionTimeout: getActionTimeout(),\n    bypassCSP: true,\n    launchOptions: {\n      args: [\"--disable-web-security\"]\n    }\n  },\n\n  // Timeout for tests\n  timeout: getTestTimeout(),\n\n  // Retries for tests\n  retries: getRetriesCount(),\n\n  // Global timeout for whole test suites\n  globalTimeout: getGlobalTimeout()\n});\n"
  },
  {
    "path": "packages/testkit/scripts/run-changed-tests.js",
    "content": "#!/usr/bin/env node\n\nconst { execSync, execFileSync } = require(\"child_process\");\nconst fs = require(\"fs\");\nconst path = require(\"path\");\n\nfunction getChangedFiles() {\n  try {\n    // Get committed changes since origin/master\n    const committedOutput = execSync(\"git diff --name-only origin/master...HEAD\", {\n      encoding: \"utf8\",\n      cwd: path.join(__dirname, \"../../../\")\n    });\n\n    // Get working directory changes (unstaged)\n    const workingOutput = execSync(\"git diff --name-only\", {\n      encoding: \"utf8\",\n      cwd: path.join(__dirname, \"../../../\")\n    });\n\n    // Get staged changes\n    const stagedOutput = execSync(\"git diff --name-only --cached\", {\n      encoding: \"utf8\",\n      cwd: path.join(__dirname, \"../../../\")\n    });\n\n    // Combine all changes and remove duplicates\n    const allChanges = [\n      ...committedOutput.split(\"\\n\"),\n      ...workingOutput.split(\"\\n\"),\n      ...stagedOutput.split(\"\\n\")\n    ].filter(Boolean);\n\n    const uniqueChanges = [...new Set(allChanges)];\n\n    return uniqueChanges.filter(\n      file =>\n        (file.startsWith(\"packages/core/src/components/\") || file.startsWith(\"packages/testkit/components/\")) &&\n        (file.endsWith(\".tsx\") || file.endsWith(\".ts\")) &&\n        !file.includes(\"__tests__\") &&\n        !file.includes(\".stories.\")\n    );\n  } catch (error) {\n    console.log(\"Could not get changed files, skipping tests\");\n    return [];\n  }\n}\n\nfunction mapComponentsToTests(changedFiles) {\n  const testFiles = [];\n  const testDir = path.join(__dirname, \"../__tests__\");\n\n  console.log(\"Checking for corresponding tests in testkit package:\");\n\n  changedFiles.forEach(file => {\n    let componentName;\n\n    if (file.startsWith(\"packages/core/src/components/\")) {\n      // Extract component name from path like packages/core/src/components/Button/Button.tsx\n      const pathParts = file.split(\"/\");\n      const componentIndex = pathParts.findIndex(part => part === \"components\");\n      if (componentIndex !== -1 && componentIndex + 1 < pathParts.length) {\n        componentName = pathParts[componentIndex + 1];\n      }\n    } else if (file.startsWith(\"packages/testkit/components/\")) {\n      // Extract component name from path like packages/testkit/components/Text.ts\n      const fileName = path.basename(file);\n      componentName = fileName.replace(/\\.(ts|tsx)$/, \"\");\n    }\n\n    if (componentName) {\n      const testFile = path.join(testDir, `${componentName}.test.ts`);\n\n      if (fs.existsSync(testFile)) {\n        testFiles.push(testFile);\n        console.log(`  ✓ ${componentName} - test file found`);\n      } else {\n        console.log(`  ✗ ${componentName} - no corresponding test file in testkit`);\n      }\n    }\n  });\n\n  return testFiles;\n}\n\nfunction runTests(testFiles) {\n  if (testFiles.length === 0) {\n    console.log(\"No test files found for changed components, skipping tests\");\n    return;\n  }\n\n  console.log(`Running ${testFiles.length} test files for changed components:`);\n  testFiles.forEach(file => console.log(`  - ${path.basename(file)}`));\n\n  const testFileArgs = testFiles.map(file => path.relative(process.cwd(), file));\n  const testFileNames = testFileArgs.map(file => path.basename(file));\n\n  console.log(`\\nExecuting: npx playwright test`, testFileNames);\n  execFileSync(\"npx\", [\"playwright\", \"test\", ...testFileArgs], { stdio: \"inherit\" });\n}\n\n// Main execution\nconst changedFiles = getChangedFiles();\nconsole.log(\n  `Found ${changedFiles.length} changed component files in packages/core/src/components/ and packages/testkit/components/`\n);\n\nif (changedFiles.length > 0) {\n  changedFiles.forEach(file => console.log(`  - ${file}`));\n  console.log(\"\");\n\n  const testFiles = mapComponentsToTests(changedFiles);\n\n  if (testFiles.length > 0) {\n    console.log(`\\nFound ${testFiles.length} corresponding test files to run.`);\n  } else {\n    console.log(\"\\nNo corresponding test files found in testkit package.\");\n  }\n\n  runTests(testFiles);\n} else {\n  console.log(\n    \"No changed component files detected in packages/core/src/components/ or packages/testkit/components/, skipping tests\"\n  );\n}\n"
  },
  {
    "path": "packages/testkit/tsconfig.esm.json",
    "content": "{\n    \"extends\": \"./tsconfig.json\",\n    \"compilerOptions\": {\n      \"outDir\": \"dist/esm\",\n      \"module\": \"esnext\"\n    },\n    \"include\": [\"./**/*.ts\"]\n  }"
  },
  {
    "path": "packages/testkit/tsconfig.json",
    "content": "\n{\n  \"compilerOptions\": {\n    \"lib\": [\"ESNext\"],\n    \"target\": \"es6\",\n    \"module\": \"commonjs\",\n    \"moduleResolution\": \"node\",\n    \"strict\": true,\n    \"skipLibCheck\": true,\n    \"noImplicitAny\": true,\n    \"outDir\": \"dist\",\n    \"baseUrl\": \".\",\n    \"allowSyntheticDefaultImports\": true,\n    \"declaration\": true,\n    \"declarationMap\": true,\n    \"sourceMap\": true\n  },\n  \"include\": [\"./**/*.ts\"],\n  \"exclude\": [\"__tests__\", \"./playwright.config.ts\", \"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/testkit/utils/common-actions.ts",
    "content": "import { Locator, Page, test } from \"@playwright/test\";\nimport { BoundingBox, Coordinates, MouseButton, WheelScrollPixels } from \"./types\";\n\n/**\n * Presses a key on the page (e.g., Escape)\n * @param {Page} page - The Playwright page object\n * @param {string} key - The key to press (e.g., 'Escape', 'Enter')\n * @param {number} delay - The delay between each key press (default: 100)\n * @returns {Promise<void>}\n */\nexport const pressKey = async (page: Page, key: string, delay = 100): Promise<void> => {\n  await test.step(`Pressing key ${key}`, async () => {\n    await page.keyboard.press(key, { delay });\n  });\n};\n\n/**\n * Moves the mouse to the center of the element\n * @param {Page} page - The Playwright page object\n * @param {BoundingBox} boundingBox - The bounding box of the element to move to\n * @param {number} steps - The number of steps to take when moving (default: 1)\n * @returns {Promise<void>}\n */\nexport const mouseMove = async (page: Page, boundingBox: BoundingBox, steps = 1): Promise<void> => {\n  await test.step(`Moving mouse to ${boundingBox.x}, ${boundingBox.y}`, async () => {\n    await page.mouse.move(boundingBox.x + boundingBox.width / 2, boundingBox.y + boundingBox.height / 2, { steps });\n  });\n};\n\n/**\n * Mouses down at the center of the element\n * @param {Page} page - The Playwright page object\n * @param {MouseButton} button - The mouse button to click (default: \"left\")\n * @param {number} clickCount - The number of clicks to perform (default: 1)\n * @returns {Promise<void>}\n */\nexport const mouseDown = async (page: Page, button: MouseButton = \"left\", clickCount = 1): Promise<void> => {\n  await test.step(`Mouse down ${button} ${clickCount} times`, async () => {\n    await page.mouse.down({ button, clickCount });\n  });\n};\n\n/**\n * Mouses up at the center of the element\n * @param {Page} page - The Playwright page object\n * @param {MouseButton} button - The mouse button to click (default: \"left\")\n * @param {number} clickCount - The number of clicks to perform (default: 1)\n * @returns {Promise<void>}\n */\nexport const mouseUp = async (page: Page, button: MouseButton = \"left\", clickCount = 1): Promise<void> => {\n  await test.step(`Mouse up ${button} ${clickCount} times`, async () => {\n    await page.mouse.up({ button, clickCount });\n  });\n};\n\n/**\n * Drags an element from one location and drops it to another\n * @param {Page} page - The Playwright page object\n * @param {Locator} sourceLocator - The locator of the element to drag\n * @param {Locator} targetLocator - The locator of the element to drop to\n * @param {number} steps - The number of steps to take when dragging (default: 5)\n * @returns {Promise<void>}\n */\nexport const dragAndDrop = async (\n  page: Page,\n  sourceLocator: Locator,\n  targetLocator: Locator,\n  steps = 5\n): Promise<void> => {\n  await test.step(`Dragging and dropping ${sourceLocator.toString()} to ${targetLocator.toString()}`, async () => {\n    const sourceBox = await sourceLocator.boundingBox();\n    const targetBox = await targetLocator.boundingBox();\n\n    if (!sourceBox || !targetBox) {\n      throw new Error(\"Source or target locator is not visible\");\n    }\n\n    await mouseMove(page, sourceBox);\n    await mouseDown(page);\n    await mouseMove(page, targetBox, steps);\n    await mouseUp(page);\n  });\n};\n\n/**\n * Scrolls the mouse wheel by a given number of pixels\n * @param {Page} page - The Playwright page object\n * @param {WheelScrollPixels} wheelScrollPixels - The number of pixels to scroll by\n * @returns {Promise<void>}\n */\nexport const mouseWheelScroll = async (page: Page, wheelScrollPixels: WheelScrollPixels): Promise<void> => {\n  await test.step(`Scrolling ${wheelScrollPixels.deltaX}, ${wheelScrollPixels.deltaY}`, async () => {\n    await page.mouse.wheel(wheelScrollPixels.deltaX, wheelScrollPixels.deltaY);\n  });\n};\n\n/**\n * Double clicks at the given coordinates\n * @param {Page} page - The Playwright page object\n * @param {Coordinates} coordinates - The coordinates to double click at\n * @param {MouseButton} button - The mouse button to click (default: \"left\")\n * @param {number} delay - The delay between each click (default: 100)\n * @returns {Promise<void>}\n */\nexport const mouseDoubleClick = async (\n  page: Page,\n  coordinates: Coordinates,\n  button: MouseButton = \"left\",\n  delay = 100\n): Promise<void> => {\n  await test.step(`Double clicking ${coordinates.x}, ${coordinates.y}`, async () => {\n    await page.mouse.dblclick(coordinates.x, coordinates.y, { button, delay });\n  });\n};\n\n/**\n * Clicks at the given coordinates\n * @param {Page} page - The Playwright page object\n * @param {Coordinates} coordinates - The coordinates to click at\n * @param {MouseButton} button - The mouse button to click (default: \"left\")\n * @param {number} delay - The delay between each click (default: 100)\n * @param {number} clickCount - The number of clicks to perform (default: 1)\n * @returns {Promise<void>}\n */\nexport const mouseClick = async (\n  page: Page,\n  coordinates: Coordinates,\n  button: MouseButton = \"left\",\n  delay = 100,\n  clickCount = 1\n): Promise<void> => {\n  await test.step(`Clicking ${coordinates.x}, ${coordinates.y}`, async () => {\n    await page.mouse.click(coordinates.x, coordinates.y, { button, clickCount, delay });\n  });\n};\n"
  },
  {
    "path": "packages/testkit/utils/enums.ts",
    "content": "export enum ColorPickerColor {\n  GRASS_GREEN = \"grass_green\",\n  DONE_GREEN = \"done-green\",\n  BRIGHT_GREEN = \"bright-green\",\n  SALADISH = \"saladish\",\n  EGG_YOLK = \"egg_yolk\",\n  WORKING_ORANGE = \"working_orange\",\n  DARK_ORANGE = \"dark-orange\",\n  PEACH = \"peach\",\n  SUNSET = \"sunset\",\n  STUCK_RED = \"stuck-red\",\n  DARK_RED = \"dark-red\",\n  SOFIA_PINK = \"sofia_pink\",\n  LIPSTICK = \"lipstick\",\n  BUBBLE = \"bubble\",\n  PURPLE = \"purple\",\n  DARK_PURPLE = \"dark_purple\",\n  BERRY = \"berry\",\n  DARK_INDIGO = \"dark_indigo\",\n  INDIGO = \"indigo\",\n  NAVY = \"navy\",\n  BRIGHT_BLUE = \"bright-blue\",\n  DARK_BLUE = \"dark-blue\",\n  AQUAMARINE = \"aquamarine\",\n  CHILI_BLUE = \"chili-blue\",\n  RIVER = \"river\",\n  WINTER = \"winter\",\n  EXPLOSIVE = \"explosive\",\n  AMERICAN_GRAY = \"american_gray\",\n  BLACKISH = \"blackish\",\n  BROWN = \"brown\",\n  ORCHID = \"orchid\",\n  TAN = \"tan\",\n  SKY = \"sky\",\n  COFFEE = \"coffee\",\n  ROYAL = \"royal\",\n  TEAL = \"teal\",\n  LAVENDER = \"lavender\",\n  STEEL = \"steel\",\n  LILAC = \"lilac\",\n  PECAN = \"pecan\"\n}\n"
  },
  {
    "path": "packages/testkit/utils/types.ts",
    "content": "export type BoundingBox = {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n};\n\nexport type MouseButton = \"left\" | \"right\" | \"middle\";\n\nexport type WheelScrollPixels = {\n  deltaX: number;\n  deltaY: number;\n};\n\nexport type Coordinates = {\n  x: number;\n  y: number;\n};\n"
  },
  {
    "path": "scripts/build-dependencies.sh",
    "content": "lerna run build --scope=$1 --include-dependencies"
  },
  {
    "path": "scripts/bundle-check/compare-bundles.js",
    "content": "const fs = require(\"fs\");\nconst path = require(\"path\");\nconst bytes = require(\"bytes\");\n\nfunction extractJson(content) {\n  const jsonMatch = content.match(/^\\[[\\s\\S]*\\]$/m);\n\n  if (!jsonMatch) {\n    throw new Error(\"No JSON array found in content\");\n  }\n\n  return jsonMatch[0];\n}\n\nconst baseContent = fs.readFileSync(\"scripts/bundle-check/reports/base.json\", \"utf8\");\nconst prContent = fs.readFileSync(\"scripts/bundle-check/reports/pr.json\", \"utf8\");\n\nconst base = JSON.parse(extractJson(baseContent));\nconst pr = JSON.parse(extractJson(prContent));\n\nlet md = \"📦 **Bundle Size Analysis**\\n\\n\";\n\nconst tableHeader = \"| Component | Base | PR | Diff |\\n|-----------|------|----|------|\\n\";\n\nconst baseMap = new Map();\nbase.forEach(entry => {\n  baseMap.set(entry.name, entry);\n});\n\nconst prMap = new Map();\npr.forEach(entry => {\n  prMap.set(entry.name, entry);\n});\n\nconst allComponents = new Set([...baseMap.keys(), ...prMap.keys()]);\n\nconst changedRows = [];\nconst unchangedRows = [];\n\nArray.from(allComponents)\n  .sort()\n  .forEach(componentName => {\n    const baseEntry = baseMap.get(componentName);\n    const prEntry = prMap.get(componentName);\n\n    let displayName;\n    if (componentName.startsWith(\"packages/components/\")) {\n      const packageName = componentName.split(\"/\")[2];\n      displayName = `@vibe/${packageName}`;\n    } else if (componentName.includes(\"/next/\")) {\n      const baseName = path.basename(componentName, path.extname(componentName));\n      displayName = `${baseName} (Next)`;\n    } else {\n      displayName = path.basename(componentName, path.extname(componentName));\n    }\n\n    if (!baseEntry && prEntry) {\n      // New component\n      const prSize = bytes(prEntry.size);\n      changedRows.push(`| \\`${displayName}\\` | - | ${prSize} | **+${prSize}** 🆕 |`);\n    } else if (baseEntry && !prEntry) {\n      // Removed component\n      const baseSize = bytes(baseEntry.size);\n      changedRows.push(`| \\`${displayName}\\` | ${baseSize} | - | **-${baseSize}** ❌ |`);\n    } else if (baseEntry && prEntry) {\n      // Existing component\n      const baseSize = bytes(baseEntry.size);\n      const prSize = bytes(prEntry.size);\n      const diffBytes = prEntry.size - baseEntry.size;\n      const diffFormatted = bytes(Math.abs(diffBytes));\n\n      let emoji = \"➖\";\n      let diffText = diffFormatted;\n\n      if (diffBytes > 0) {\n        emoji = \"🔺\";\n        diffText = `+${diffFormatted}`;\n      } else if (diffBytes < 0) {\n        emoji = \"🟢\";\n        diffText = `-${diffFormatted}`;\n      }\n\n      const row = `| \\`${displayName}\\` | ${baseSize} | ${prSize} | ${diffText} ${emoji} |`;\n\n      // Highlight significant changes (>5KB) and ignore changes under 5KB\n      if (Math.abs(diffBytes) > 5120) {\n        changedRows.push(row.replace(`| ${diffText} `, `| **${diffText}** `));\n        // Treat changes under 1KB as unchanged\n      } else if (Math.abs(diffBytes) >= 1024) {\n        changedRows.push(row);\n      } else {\n        unchangedRows.push(row);\n      }\n    }\n  });\n\nif (changedRows.length > 0) {\n  md += \"### Changed Components\\n\";\n  md += tableHeader;\n  md += changedRows.join(\"\\n\") + \"\\n\";\n} else {\n  md += \"✅ No bundle size changes detected.\\n\";\n}\n\nif (unchangedRows.length > 0) {\n  md += \"\\n<details><summary>Unchanged Components</summary>\\n\\n\";\n  md += tableHeader;\n  md += unchangedRows.join(\"\\n\") + \"\\n\";\n  md += \"\\n</details>\\n\";\n}\n\nconst totalBaseSize = base.reduce((sum, entry) => sum + entry.size, 0);\nconst totalPrSize = pr.reduce((sum, entry) => sum + entry.size, 0);\n\nmd += \"\\n---\\n\\n\";\nmd += \"**📊 Summary:**\\n\";\nmd += `- **Total Base Size:** ${bytes(totalBaseSize)}\\n`;\nmd += `- **Total PR Size:** ${bytes(totalPrSize)}\\n`;\nconst totalDiffBytes = totalPrSize - totalBaseSize;\nmd += `- **Total Difference:** ${totalDiffBytes >= 0 ? \"+\" : \"\"}${bytes(Math.abs(totalDiffBytes))}\\n`;\n\n// 5KB in bytes\nif (Math.abs(totalDiffBytes) > 5120) {\n  md += `\\n⚠️ **Significant size change detected!** Please review the changes carefully.\\n`;\n}\n\nfs.writeFileSync(\"scripts/bundle-check/reports/bundle-sizes.md\", md);\nconsole.log(\"Bundle size Analysis generated successfully!\");\n"
  },
  {
    "path": "scripts/bundle-check/generate-size-limit-config.js",
    "content": "const fs = require(\"fs\");\nconst path = require(\"path\");\n\nconst rootPath = process.cwd();\nconst distIndexPath = path.join(rootPath, \"packages/core/dist/src/index.js\");\nconst distNextPath = path.join(rootPath, \"packages/core/dist/src/components/next.js\");\nconst componentsPath = path.join(rootPath, \"packages/components\");\nconst sizeLimitConfigPath = path.join(rootPath, \".size-limit.js\");\n\nfunction generateSizeLimitConfig() {\n  const allComponents = [];\n\n  // Process core package components\n  if (fs.existsSync(distIndexPath)) {\n    const indexContent = fs.readFileSync(distIndexPath, \"utf8\");\n    const exportRegex = /export\\{.*?\\}from\"(\\.\\/components\\/[^\"]+\\.js)\";/g;\n\n    let match;\n    while ((match = exportRegex.exec(indexContent)) !== null) {\n      const relativePath = match[1];\n      const fullPath = path.join(\"packages/core/dist/src/\", relativePath).replace(/\\\\/g, \"/\");\n      allComponents.push({\n        path: fullPath\n      });\n    }\n    console.log(`Found ${allComponents.length} core components.`);\n  } else {\n    console.log(`Core dist index file not found at ${distIndexPath}.`);\n  }\n\n  // Process @next components\n  if (fs.existsSync(distNextPath)) {\n    const nextContent = fs.readFileSync(distNextPath, \"utf8\");\n    const exportRegex = /export\\{.*?\\}from\"(\\.\\/[^\"]+\\.js)\";/g;\n\n    let match;\n    let nextComponentsCount = 0;\n    while ((match = exportRegex.exec(nextContent)) !== null) {\n      const relativePath = match[1];\n      const fullPath = path.join(\"packages/core/dist/src/components/\", relativePath).replace(/\\\\/g, \"/\");\n      allComponents.push({\n        path: fullPath\n      });\n      nextComponentsCount++;\n    }\n    console.log(`Found ${nextComponentsCount} @next components.`);\n  } else {\n    console.log(`@next dist file not found at ${distNextPath}.`);\n  }\n\n  // Process component packages\n  if (fs.existsSync(componentsPath)) {\n    const componentPackages = fs\n      .readdirSync(componentsPath, { withFileTypes: true })\n      .filter(dirent => dirent.isDirectory())\n      .map(dirent => dirent.name);\n\n    for (const packageName of componentPackages) {\n      const packageDistPath = path.join(componentsPath, packageName, \"dist/index.js\");\n      if (fs.existsSync(packageDistPath)) {\n        const relativePath = path.join(\"packages/components\", packageName, \"dist/index.js\").replace(/\\\\/g, \"/\");\n        allComponents.push({\n          path: relativePath\n        });\n        console.log(`Added component package: ${packageName}`);\n      } else {\n        console.log(`Dist file not found for component package: ${packageName}`);\n      }\n    }\n  } else {\n    console.log(`Components directory not found at ${componentsPath}.`);\n  }\n\n  if (allComponents.length === 0) {\n    console.log(\"No components found, writing empty size-limit config.\");\n    fs.writeFileSync(sizeLimitConfigPath, \"module.exports = [];\");\n    return;\n  }\n\n  const configContent = `module.exports = ${JSON.stringify(allComponents, null, 2)};`;\n  fs.writeFileSync(sizeLimitConfigPath, configContent);\n  console.log(`Generated .size-limit.js with ${allComponents.length} total components (core + component packages).`);\n}\n\ngenerateSizeLimitConfig();\n"
  },
  {
    "path": "scripts/performance/aggregate-metrics.js",
    "content": "#!/usr/bin/env node\n/**\n * Aggregates performance metrics from temp .jsonl file into final JSON report.\n * Called by CI after test-storybook completes.\n */\nconst fs = require(\"fs\");\nconst path = require(\"path\");\n\nconst METRICS_DIR = path.join(__dirname, \"reports\");\nconst TEMP_METRICS_FILE = path.join(METRICS_DIR, \".metrics-temp.jsonl\");\nconst METRICS_FILE = path.join(METRICS_DIR, \"metrics.json\");\n\nfunction aggregate() {\n  if (!fs.existsSync(METRICS_DIR)) {\n    fs.mkdirSync(METRICS_DIR, { recursive: true });\n  }\n\n  if (!fs.existsSync(TEMP_METRICS_FILE)) {\n    console.log(\"[perf] No temp metrics file found at:\", TEMP_METRICS_FILE);\n    const emptyReport = {\n      timestamp: new Date().toISOString(),\n      commit: process.env.GIT_COMMIT || \"unknown\",\n      components: {},\n      _note: \"No metrics were collected\"\n    };\n    fs.writeFileSync(METRICS_FILE, JSON.stringify(emptyReport, null, 2), \"utf-8\");\n    console.log(\"[perf] Created empty report at:\", METRICS_FILE);\n    return;\n  }\n\n  const content = fs.readFileSync(TEMP_METRICS_FILE, \"utf-8\").trim();\n  const lines = content ? content.split(\"\\n\") : [];\n  const components = {};\n  let parsed = 0, failed = 0;\n\n  for (const line of lines) {\n    if (!line) continue;\n    try {\n      const { title, name, data } = JSON.parse(line);\n      if (!components[title]) components[title] = {};\n      components[title][name] = data;\n      parsed++;\n    } catch (e) { failed++; }\n  }\n\n  const report = {\n    timestamp: new Date().toISOString(),\n    commit: process.env.GIT_COMMIT || \"unknown\",\n    components\n  };\n\n  fs.writeFileSync(METRICS_FILE, JSON.stringify(report, null, 2), \"utf-8\");\n  try { fs.unlinkSync(TEMP_METRICS_FILE); } catch { }\n\n  const componentCount = Object.keys(components).length;\n  let storyCount = 0;\n  Object.values(components).forEach(stories => {\n    storyCount += Object.keys(stories).length;\n  });\n\n  console.log(\"\\n📊 Performance metrics aggregated\");\n  console.log(\"   Lines parsed:\", parsed, \"failed:\", failed);\n  console.log(\"   Components:\", componentCount, \"Stories:\", storyCount);\n  console.log(\"   Report:\", METRICS_FILE, \"\\n\");\n}\n\naggregate();\n"
  },
  {
    "path": "scripts/performance/compare-metrics.js",
    "content": "const fs = require(\"fs\");\nconst path = require(\"path\");\n\nconst THRESHOLDS = {\n  /** Minimum percentage change to report (below this is considered noise) */\n  NOISE_FLOOR: 5,\n  /** Mount time regression threshold (%) */\n  MOUNT_TIME_REGRESSION: 20,\n  /** Memory regression threshold (%) - higher because memory is more variable */\n  MEMORY_REGRESSION: 50,\n  /** DOM nodes regression threshold (%) */\n  DOM_NODES_REGRESSION: 15\n};\n\nconst REPORTS_DIR = path.join(__dirname, \"reports\");\n\nfunction formatTime(ms) {\n  if (ms < 1) {\n    return `${(ms * 1000).toFixed(2)}μs`;\n  } else if (ms < 1000) {\n    return `${ms.toFixed(2)}ms`;\n  }\n  return `${(ms / 1000).toFixed(2)}s`;\n}\n\nfunction formatBytes(bytes) {\n  if (bytes === 0) return \"0 B\";\n  const k = 1024;\n  const sizes = [\"B\", \"KB\", \"MB\", \"GB\"];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n  return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}`;\n}\n\nfunction calculatePercentChange(base, current) {\n  if (base === 0) return current > 0 ? 100 : 0;\n  return ((current - base) / base) * 100;\n}\n\nfunction getPerformanceEmoji(percentChange, regressionThreshold) {\n  if (Math.abs(percentChange) < THRESHOLDS.NOISE_FLOOR) return \"➖\"; // Insignificant\n  if (percentChange > regressionThreshold) return \"⚠️\"; // Regression\n  if (percentChange > 0) return \"🔺\"; // Minor increase\n  if (percentChange < -regressionThreshold) return \"✨\"; // Significant improvement\n  return \"🟢\"; // Minor improvement\n}\n\nfunction compareStoryMetrics(baseMetrics, prMetrics, componentName, storyName) {\n  const results = {\n    component: componentName,\n    story: storyName,\n    changes: [],\n    hasRegression: false,\n    hasImprovement: false\n  };\n\n  // Compare mount time\n  const mountPercent = calculatePercentChange(baseMetrics.renderMetrics.mountTime, prMetrics.renderMetrics.mountTime);\n\n  if (Math.abs(mountPercent) > THRESHOLDS.NOISE_FLOOR) {\n    const emoji = getPerformanceEmoji(mountPercent, THRESHOLDS.MOUNT_TIME_REGRESSION);\n    results.changes.push({\n      metric: \"Mount Time\",\n      base: formatTime(baseMetrics.renderMetrics.mountTime),\n      pr: formatTime(prMetrics.renderMetrics.mountTime),\n      diff: `${mountPercent >= 0 ? \"+\" : \"\"}${mountPercent.toFixed(1)}%`,\n      emoji,\n      isRegression: mountPercent > THRESHOLDS.MOUNT_TIME_REGRESSION\n    });\n\n    if (mountPercent > THRESHOLDS.MOUNT_TIME_REGRESSION) results.hasRegression = true;\n    if (mountPercent < -THRESHOLDS.MOUNT_TIME_REGRESSION) results.hasImprovement = true;\n  }\n\n  // Compare memory\n  const memPercent = calculatePercentChange(baseMetrics.memoryMetrics.heapUsed, prMetrics.memoryMetrics.heapUsed);\n\n  if (Math.abs(memPercent) > THRESHOLDS.NOISE_FLOOR) {\n    const emoji = getPerformanceEmoji(memPercent, THRESHOLDS.MEMORY_REGRESSION);\n    results.changes.push({\n      metric: \"Memory\",\n      base: formatBytes(baseMetrics.memoryMetrics.heapUsed),\n      pr: formatBytes(prMetrics.memoryMetrics.heapUsed),\n      diff: `${memPercent >= 0 ? \"+\" : \"\"}${memPercent.toFixed(1)}%`,\n      emoji,\n      isRegression: memPercent > THRESHOLDS.MEMORY_REGRESSION\n    });\n\n    if (memPercent > THRESHOLDS.MEMORY_REGRESSION) results.hasRegression = true;\n    if (memPercent < -THRESHOLDS.MEMORY_REGRESSION) results.hasImprovement = true;\n  }\n\n  // Compare DOM nodes\n  const domDiff = prMetrics.memoryMetrics.domNodes - baseMetrics.memoryMetrics.domNodes;\n  const domPercent = calculatePercentChange(baseMetrics.memoryMetrics.domNodes, prMetrics.memoryMetrics.domNodes);\n\n  if (Math.abs(domPercent) > THRESHOLDS.NOISE_FLOOR * 2) {\n    // Higher threshold for DOM\n    const emoji = getPerformanceEmoji(domPercent, THRESHOLDS.DOM_NODES_REGRESSION);\n    results.changes.push({\n      metric: \"DOM Nodes\",\n      base: baseMetrics.memoryMetrics.domNodes.toString(),\n      pr: prMetrics.memoryMetrics.domNodes.toString(),\n      diff: `${domDiff >= 0 ? \"+\" : \"\"}${domDiff} (${domPercent >= 0 ? \"+\" : \"\"}${domPercent.toFixed(1)}%)`,\n      emoji,\n      isRegression: domPercent > THRESHOLDS.DOM_NODES_REGRESSION\n    });\n\n    if (domPercent > THRESHOLDS.DOM_NODES_REGRESSION) results.hasRegression = true;\n  }\n\n  return results;\n}\n\nfunction generateMarkdownReport(prReport, baseReport, regressions, improvements, unchanged) {\n  let md = \"## ⚡ Performance Report\\n\\n\";\n\n  // Summary counts\n  let totalStories = 0;\n  Object.values(prReport.components).forEach(stories => {\n    totalStories += Object.keys(stories).length;\n  });\n\n  md += `| Metric | Count |\\n`;\n  md += `|--------|-------|\\n`;\n  md += `| Stories tested | ${totalStories} |\\n`;\n  md += `| Regressions | ${regressions.length} |\\n`;\n  md += `| Improvements | ${improvements.length} |\\n`;\n  md += `| Unchanged | ${unchanged.length} |\\n\\n`;\n\n  // Performance changes table\n  const allChanges = [...regressions, ...improvements];\n\n  if (allChanges.length > 0) {\n    md += \"## 📈 Performance Changes\\n\\n\";\n    md += \"| Story | Mount Time | Memory | DOM Nodes |\\n\";\n    md += \"|-------|------------|--------|------------|\\n\";\n\n    allChanges.forEach(result => {\n      const storyName = `${result.component} / ${result.story}`;\n\n      const mountChange = result.changes.find(c => c.metric === \"Mount Time\");\n      const memoryChange = result.changes.find(c => c.metric === \"Memory\");\n      const domChange = result.changes.find(c => c.metric === \"DOM Nodes\");\n\n      const formatCell = change => {\n        if (!change) return \"-\";\n        const bold = change.isRegression ? \"**\" : \"\";\n        return `${bold}${change.diff}${bold} ${change.emoji}`;\n      };\n\n      md += `| ${storyName} | ${formatCell(mountChange)} | ${formatCell(memoryChange)} | ${formatCell(domChange)} |\\n`;\n    });\n\n    md += \"\\n\";\n  } else {\n    md += \"### ✅ No Significant Performance Changes\\n\\n\";\n    md += \"All components are performing within acceptable thresholds.\\n\\n\";\n  }\n\n  // Collapsible unchanged section (like bundle-check)\n  if (unchanged.length > 0) {\n    md += \"<details><summary>📋 Unchanged Stories (\" + unchanged.length + \")</summary>\\n\\n\";\n    md += \"These stories showed no significant performance changes.\\n\\n\";\n    md += \"</details>\\n\\n\";\n  }\n\n  // Collapsible thresholds info\n  md += \"<details><summary>ℹ️ About this report</summary>\\n\\n\";\n  md += \"**📏 Thresholds:**\\n\";\n  md += `- Mount time: ±${THRESHOLDS.MOUNT_TIME_REGRESSION}% for regression\\n`;\n  md += `- Memory usage: ±${THRESHOLDS.MEMORY_REGRESSION}% for regression\\n`;\n  md += `- DOM nodes: ±${THRESHOLDS.DOM_NODES_REGRESSION}% for regression\\n`;\n  md += `- Changes under ${THRESHOLDS.NOISE_FLOOR}% are not reported\\n\\n`;\n  md +=\n    \"**Legend:** ⚠️ Regression | 🔺 Minor increase | ✨ Significant improvement | 🟢 Minor improvement | ➖ No change\\n\\n\";\n  md += \"</details>\\n\";\n\n  return md;\n}\n\ntry {\n  // Check if reports exist\n  const basePath = path.join(REPORTS_DIR, \"base.json\");\n  const prPath = path.join(REPORTS_DIR, \"pr.json\");\n\n  if (!fs.existsSync(basePath) || !fs.existsSync(prPath)) {\n    console.error(\"❌ Missing performance reports. Run performance tests first.\");\n    console.error(`   Expected: ${basePath}`);\n    console.error(`   Expected: ${prPath}`);\n    process.exit(1);\n  }\n\n  const baseReport = JSON.parse(fs.readFileSync(basePath, \"utf8\"));\n  const prReport = JSON.parse(fs.readFileSync(prPath, \"utf8\"));\n\n  const regressions = [];\n  const improvements = [];\n  const unchanged = [];\n\n  // Compare all components and stories\n  Object.keys(prReport.components).forEach(componentName => {\n    const prComponent = prReport.components[componentName];\n    const baseComponent = baseReport.components[componentName];\n\n    if (!baseComponent) {\n      // New component - skip (can't compare)\n      return;\n    }\n\n    Object.keys(prComponent).forEach(storyName => {\n      const prStory = prComponent[storyName];\n      const baseStory = baseComponent[storyName];\n\n      if (!baseStory) {\n        // New story - skip (can't compare)\n        return;\n      }\n\n      const comparison = compareStoryMetrics(baseStory, prStory, componentName, storyName);\n\n      if (comparison.changes.length === 0) {\n        unchanged.push(comparison);\n      } else if (comparison.hasRegression) {\n        regressions.push(comparison);\n      } else if (comparison.hasImprovement) {\n        improvements.push(comparison);\n      } else {\n        // Has minor changes but not significant enough for regression/improvement\n        unchanged.push(comparison);\n      }\n    });\n  });\n\n  // Generate and write report\n  const markdown = generateMarkdownReport(prReport, baseReport, regressions, improvements, unchanged);\n  const reportPath = path.join(REPORTS_DIR, \"comparison.md\");\n  fs.writeFileSync(reportPath, markdown);\n\n  // Console output\n  console.log(\"\\n✅ Performance comparison completed!\");\n  console.log(`📁 Report: ${reportPath}`);\n  console.log(`\\n📊 Results:`);\n  console.log(`   Regressions: ${regressions.length}`);\n  console.log(`   Improvements: ${improvements.length}`);\n  console.log(`   Unchanged: ${unchanged.length}`);\n\n  // Always exit 0 (non-blocking)\n  process.exit(0);\n} catch (error) {\n  console.error(\"❌ Error comparing performance metrics:\", error.message);\n  console.error(error.stack);\n  process.exit(1);\n}\n"
  }
]