Showing preview only (7,543K chars total). Download the full file or copy to clipboard to get everything.
Repository: mondaycom/vibe
Branch: master
Commit: 3c078dc65eb5
Files: 2520
Total size: 6.6 MB
Directory structure:
gitextract_zqgb6goh/
├── .claude/
│ └── skills/
│ └── vibe-breaking-change/
│ ├── SKILL.md
│ └── references/
│ ├── codemod-best-practices.md
│ ├── codemod-examples.md
│ ├── dependency-analysis.md
│ ├── pr-templates.md
│ ├── testing-validation.md
│ └── workflow-checklist.md
├── .cursor/
│ ├── rules/
│ │ ├── accessibility-guidelines.mdc
│ │ ├── base-components.mdc
│ │ ├── ci-cd-workflows.mdc
│ │ ├── component-internal-structure.mdc
│ │ ├── dependency-management.mdc
│ │ ├── file-structures.mdc
│ │ ├── layout-components.mdc
│ │ ├── monorepo-structure.mdc
│ │ ├── naming-conventions.mdc
│ │ ├── new-component-implementation.mdc
│ │ ├── package-separation.mdc
│ │ ├── playground-reproduce.mdc
│ │ ├── react-context.mdc
│ │ ├── storybook-stories.mdc
│ │ └── styling-conventions.mdc
│ └── templates/
│ └── package-separation/
│ ├── QUICK_REFERENCE.md
│ ├── README.md
│ ├── files.d.ts
│ ├── main-index.ts
│ ├── package.json
│ ├── rollup.config.mjs
│ ├── subdirectory-index.ts
│ ├── tsconfig.json
│ ├── vitest.config.mjs
│ └── vitest.setup.mjs
├── .github/
│ ├── CODEOWNERS
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.yml
│ │ └── config.yml
│ ├── PULL_REQUEST_TEMPLATE.md
│ ├── actions/
│ │ ├── check-changed-packages/
│ │ │ └── action.yml
│ │ ├── determine-lerna-since-flag/
│ │ │ └── action.yml
│ │ ├── download-builds/
│ │ │ └── action.yml
│ │ ├── git-creds/
│ │ │ └── action.yml
│ │ └── setup/
│ │ └── action.yml
│ └── workflows/
│ ├── build-and-upload.yml
│ ├── bundle-size.yml
│ ├── chromatic.yml
│ ├── merge-queue.yml
│ ├── performance.yml
│ ├── pr.yml
│ ├── prerelease.yml
│ ├── publish-storybook.yml
│ ├── release-v2.yml
│ ├── release.yml
│ └── test.yml
├── .gitignore
├── .nvmrc
├── .prettierrc
├── CLAUDE.md
├── CNAME
├── CONTRIBUTING.md
├── README.md
├── lerna.json
├── package.json
├── packages/
│ ├── base/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ ├── rollup.config.mjs
│ │ ├── src/
│ │ │ ├── BaseInput/
│ │ │ │ ├── BaseInput.module.scss
│ │ │ │ ├── BaseInput.tsx
│ │ │ │ ├── BaseInput.types.ts
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── BaseInput.test.tsx
│ │ │ │ └── index.ts
│ │ │ ├── index.ts
│ │ │ └── types/
│ │ │ └── files.d.ts
│ │ ├── tsconfig.json
│ │ ├── vitest.config.mjs
│ │ └── vitest.setup.mjs
│ ├── codemod/
│ │ ├── .eslintrc.json
│ │ ├── .prettierignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── bin/
│ │ │ └── vibe-codemod.ts
│ │ ├── package.json
│ │ ├── plop/
│ │ │ └── component/
│ │ │ ├── test.hbs
│ │ │ ├── transform-remove-props.hbs
│ │ │ ├── transform-update-prop-values.hbs
│ │ │ ├── transform-update-props.hbs
│ │ │ ├── transform-update-static-prop-key.hbs
│ │ │ └── transform.hbs
│ │ ├── plopfile.js
│ │ ├── src/
│ │ │ ├── consts/
│ │ │ │ ├── index.ts
│ │ │ │ └── vibe-import-paths.ts
│ │ │ └── utils/
│ │ │ ├── __tests__/
│ │ │ │ ├── import-utils.test.ts
│ │ │ │ └── prop-utils.test.ts
│ │ │ ├── component-jsx-utils.ts
│ │ │ ├── import-utils.ts
│ │ │ ├── index.ts
│ │ │ ├── prop-utils.ts
│ │ │ ├── report-utils.ts
│ │ │ └── wrap-transformation.ts
│ │ ├── test/
│ │ │ └── setup.ts
│ │ ├── transformations/
│ │ │ └── core/
│ │ │ ├── v2-to-v3/
│ │ │ │ ├── AttentionBox-component-migration.ts
│ │ │ │ ├── Avatar-component-migration.ts
│ │ │ │ ├── AvatarGroup-component-migration.ts
│ │ │ │ ├── Box-component-migration.ts
│ │ │ │ ├── BreadcrumbItem-component-migration.ts
│ │ │ │ ├── Button-component-migration.ts
│ │ │ │ ├── ButtonGroup-component-migration.ts
│ │ │ │ ├── Checkbox-component-migration.ts
│ │ │ │ ├── Chips-component-migration.ts
│ │ │ │ ├── Clickable-component-migration.ts
│ │ │ │ ├── ColorPicker-component-migration.ts
│ │ │ │ ├── ColorPickerContent-component-migration.ts
│ │ │ │ ├── Counter-component-migration.ts
│ │ │ │ ├── Dialog-component-migration.ts
│ │ │ │ ├── DialogContent-container-component-migration.ts
│ │ │ │ ├── Divider-component-migration.ts
│ │ │ │ ├── Dropdown-component-migration.ts
│ │ │ │ ├── Icon-component-migration.ts
│ │ │ │ ├── IconButton-component-migration.ts
│ │ │ │ ├── InputField-component-import-migration.ts
│ │ │ │ ├── Label-component-migration.ts
│ │ │ │ ├── Link-component-migration.ts
│ │ │ │ ├── Loader-component-migration.ts
│ │ │ │ ├── Menu-component-migration.ts
│ │ │ │ ├── MenuButton-component-migration.ts
│ │ │ │ ├── MenuDivider-component-migration.ts
│ │ │ │ ├── MenuItem-component-migration.ts
│ │ │ │ ├── MenuItemButton-component-migration.ts
│ │ │ │ ├── MenuTitle-component-migration.ts
│ │ │ │ ├── Modal-component-migration.ts
│ │ │ │ ├── ModalHeader-component-migration.ts
│ │ │ │ ├── RadioButton-component-migration.ts
│ │ │ │ ├── Search-component-import-migration.ts
│ │ │ │ ├── Steps-component-migration.ts
│ │ │ │ ├── TabList-component-migration.ts
│ │ │ │ ├── TabPanels-component-migration.ts
│ │ │ │ ├── TextField-component-migration.ts
│ │ │ │ ├── ThemeProvider-component-migration.ts
│ │ │ │ ├── Tipseen-component-migration.ts
│ │ │ │ ├── TipseenContent-component-migration.ts
│ │ │ │ ├── Toggle-component-migration.ts
│ │ │ │ ├── Tooltip-component-migration.ts
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── AttentionBox-component-migration.test.ts
│ │ │ │ │ ├── Avatar-component-migration.test.ts
│ │ │ │ │ ├── AvatarGroup-component-migration.test.ts
│ │ │ │ │ ├── Box-component-migration.test.ts
│ │ │ │ │ ├── BreadcrumbItem-component-migration.test.ts
│ │ │ │ │ ├── Button-component-migration.test.ts
│ │ │ │ │ ├── ButtonGroup-component-migration.test.ts
│ │ │ │ │ ├── Checkbox-component-migration.test.ts
│ │ │ │ │ ├── Chips-component-migration.test.ts
│ │ │ │ │ ├── Clickable-component-migration.test.ts
│ │ │ │ │ ├── ColorPicker-component-migration.test.ts
│ │ │ │ │ ├── ColorPickerContent-component-migration.test.ts
│ │ │ │ │ ├── Counter-component-migration.test.ts
│ │ │ │ │ ├── Dialog-component-migration.test.ts
│ │ │ │ │ ├── DialogContent-container-component-migration.test.ts
│ │ │ │ │ ├── Divider-component-migration.test.ts
│ │ │ │ │ ├── Dropdown-component-migration.test.ts
│ │ │ │ │ ├── Icon-component-migration.test.ts
│ │ │ │ │ ├── IconButton-component-migration.test.ts
│ │ │ │ │ ├── InputField-component-import-migration.test.ts
│ │ │ │ │ ├── Label-component-migration.test.ts
│ │ │ │ │ ├── Link-component-migration.test.ts
│ │ │ │ │ ├── Loader-component-migration.test.ts
│ │ │ │ │ ├── Menu-component-migration.test.ts
│ │ │ │ │ ├── MenuButton-component-migration.test.ts
│ │ │ │ │ ├── MenuDivider-component-migration.test.ts
│ │ │ │ │ ├── MenuItem-component-migration.test.ts
│ │ │ │ │ ├── MenuItemButton-component-migration.test.ts
│ │ │ │ │ ├── MenuTitle-component-migration.test.ts
│ │ │ │ │ ├── Modal-component-migration.test.ts
│ │ │ │ │ ├── ModalHeader-component-migration.test.ts
│ │ │ │ │ ├── RadioButton-component-migration.test.ts
│ │ │ │ │ ├── Search-component-import-migration.test.ts
│ │ │ │ │ ├── Steps-component-migration.test.ts
│ │ │ │ │ ├── TabList-component-migration.test.ts
│ │ │ │ │ ├── TabPanels-component-migration.test.ts
│ │ │ │ │ ├── TextField-component-migration.test.ts
│ │ │ │ │ ├── ThemeProvider-component-migration.test.ts
│ │ │ │ │ ├── Tipseen-component-migration.test.ts
│ │ │ │ │ ├── TipseenContent-component-migration.test.ts
│ │ │ │ │ ├── Toggle-component-migration.test.ts
│ │ │ │ │ ├── Tooltip-component-migration.test.ts
│ │ │ │ │ ├── next-imports-migration.test.ts
│ │ │ │ │ ├── packages-rename-migration.test.ts
│ │ │ │ │ ├── type-imports-migration.test.ts
│ │ │ │ │ └── useClickableProps-hook-migration.test.ts
│ │ │ │ ├── enums/
│ │ │ │ │ ├── Enums-migration.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── Enums-migration.test.ts
│ │ │ │ │ └── enumMappings.json
│ │ │ │ ├── next-imports-migration.ts
│ │ │ │ ├── packages-rename-migration.ts
│ │ │ │ ├── type-imports-migration.ts
│ │ │ │ └── useClickableProps-hook-migration.ts
│ │ │ └── v3-to-v4/
│ │ │ ├── Chips-component-migration.ts
│ │ │ ├── Dialog-component-migration.ts
│ │ │ ├── Flex-component-migration.ts
│ │ │ ├── Icon-component-migration.ts
│ │ │ ├── LinearProgressBar-component-migration.ts
│ │ │ ├── README.md
│ │ │ ├── TextField-component-migration.ts
│ │ │ ├── TextWithHighlight-component-migration.ts
│ │ │ ├── TipseenImage-component-migration.ts
│ │ │ ├── Toggle-component-migration.ts
│ │ │ ├── VirtualizedList-component-migration.ts
│ │ │ ├── __tests__/
│ │ │ │ ├── Chips-component-migration.test.ts
│ │ │ │ ├── Dialog-component-migration.test.ts
│ │ │ │ ├── Flex-component-migration.test.ts
│ │ │ │ ├── Icon-component-migration.test.ts
│ │ │ │ ├── LinearProgressBar-component-migration.test.ts
│ │ │ │ ├── TextField-component-migration.test.ts
│ │ │ │ ├── TextWithHighlight-component-migration.test.ts
│ │ │ │ ├── TipseenImage-component-migration.test.ts
│ │ │ │ ├── Toggle-component-migration.test.ts
│ │ │ │ ├── VirtualizedList-component-migration.test.ts
│ │ │ │ ├── aria-props-migration.test.ts
│ │ │ │ ├── enums-migration.test.ts
│ │ │ │ ├── next-imports-migration.test.ts
│ │ │ │ └── packages-rename-migration.test.ts
│ │ │ ├── aria-props-migration.ts
│ │ │ ├── enums/
│ │ │ │ └── enumMappings.json
│ │ │ ├── enums-migration.ts
│ │ │ ├── next-imports-migration.ts
│ │ │ └── packages-rename-migration.ts
│ │ ├── tsconfig.json
│ │ ├── tsconfig.test.json
│ │ ├── types/
│ │ │ ├── index.ts
│ │ │ └── transformation-context.types.ts
│ │ └── vitest.config.ts
│ ├── components/
│ │ ├── button/
│ │ │ ├── CHANGELOG.md
│ │ │ ├── package.json
│ │ │ ├── rollup.config.mjs
│ │ │ ├── src/
│ │ │ │ ├── Button/
│ │ │ │ │ ├── Button.module.scss
│ │ │ │ │ ├── Button.tsx
│ │ │ │ │ ├── Button.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Button.snapshot.test.tsx
│ │ │ │ │ │ ├── Button.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Button.snapshot.test.tsx.snap
│ │ │ │ │ ├── helper/
│ │ │ │ │ │ ├── dom-helpers.ts
│ │ │ │ │ │ └── useButtonLoading.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── types/
│ │ │ │ └── files.d.ts
│ │ │ ├── tsconfig.json
│ │ │ ├── vitest.config.mjs
│ │ │ └── vitest.setup.mjs
│ │ ├── clickable/
│ │ │ ├── CHANGELOG.md
│ │ │ ├── package.json
│ │ │ ├── rollup.config.mjs
│ │ │ ├── src/
│ │ │ │ ├── Clickable/
│ │ │ │ │ ├── Clickable.module.scss
│ │ │ │ │ ├── Clickable.tsx
│ │ │ │ │ ├── ClickableWrapper.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Clickable.snapshot.test.tsx
│ │ │ │ │ │ ├── Clickable.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Clickable.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── types/
│ │ │ │ │ └── files.d.ts
│ │ │ │ └── useClickableProps/
│ │ │ │ └── useClickableProps.ts
│ │ │ ├── tsconfig.json
│ │ │ ├── vitest.config.mjs
│ │ │ └── vitest.setup.mjs
│ │ ├── dialog/
│ │ │ ├── CHANGELOG.md
│ │ │ ├── package.json
│ │ │ ├── rollup.config.mjs
│ │ │ ├── src/
│ │ │ │ ├── Dialog/
│ │ │ │ │ ├── Dialog.module.scss
│ │ │ │ │ ├── Dialog.tsx
│ │ │ │ │ ├── Dialog.types.ts
│ │ │ │ │ ├── DialogConstants.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Dialog.test.tsx
│ │ │ │ │ │ └── useDisableScroll.test.ts
│ │ │ │ │ ├── components/
│ │ │ │ │ │ ├── DialogContent/
│ │ │ │ │ │ │ ├── DialogContent.module.scss
│ │ │ │ │ │ │ └── DialogContent.tsx
│ │ │ │ │ │ └── Refable/
│ │ │ │ │ │ ├── Refable.tsx
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ └── Refable.test.tsx
│ │ │ │ │ ├── hooks/
│ │ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ │ └── useDisableScroll.test.ts
│ │ │ │ │ │ └── useDisableScroll.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── DialogContentContainer/
│ │ │ │ │ ├── DialogContentContainer.module.scss
│ │ │ │ │ ├── DialogContentContainer.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── DialogContentContainer.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── DialogContentContainer.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── types/
│ │ │ │ └── files.d.ts
│ │ │ ├── tsconfig.json
│ │ │ ├── vitest.config.mjs
│ │ │ └── vitest.setup.mjs
│ │ ├── icon/
│ │ │ ├── CHANGELOG.md
│ │ │ ├── package.json
│ │ │ ├── rollup.config.mjs
│ │ │ ├── src/
│ │ │ │ ├── Icon/
│ │ │ │ │ ├── CustomSvgIcon/
│ │ │ │ │ │ └── CustomSvgIcon.tsx
│ │ │ │ │ ├── FontIcon/
│ │ │ │ │ │ └── FontIcon.tsx
│ │ │ │ │ ├── Icon.module.scss
│ │ │ │ │ ├── Icon.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── allIcons.test.ts
│ │ │ │ │ ├── hooks/
│ │ │ │ │ │ ├── useIconProps.tsx
│ │ │ │ │ │ └── useIconScreenReaderAccessProps.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── types.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── types/
│ │ │ │ └── files.d.ts
│ │ │ └── tsconfig.json
│ │ ├── icon-button/
│ │ │ ├── CHANGELOG.md
│ │ │ ├── package.json
│ │ │ ├── rollup.config.mjs
│ │ │ ├── src/
│ │ │ │ ├── IconButton/
│ │ │ │ │ ├── IconButton.module.scss
│ │ │ │ │ ├── IconButton.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── IconButton.snapshot.test.tsx
│ │ │ │ │ │ ├── IconButton.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── IconButton.snapshot.test.tsx.snap
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── services/
│ │ │ │ │ └── IconButton-helpers.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── types/
│ │ │ │ └── files.d.ts
│ │ │ ├── tsconfig.json
│ │ │ ├── vitest.config.mjs
│ │ │ └── vitest.setup.mjs
│ │ ├── layer/
│ │ │ ├── CHANGELOG.md
│ │ │ ├── package.json
│ │ │ ├── rollup.config.mjs
│ │ │ ├── src/
│ │ │ │ ├── LayerProvider/
│ │ │ │ │ ├── LayerContext.ts
│ │ │ │ │ ├── LayerProvider.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── LayerProvider.test.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── types/
│ │ │ │ └── files.d.ts
│ │ │ ├── tsconfig.json
│ │ │ ├── vitest.config.mjs
│ │ │ └── vitest.setup.mjs
│ │ ├── layout/
│ │ │ ├── CHANGELOG.md
│ │ │ ├── package.json
│ │ │ ├── rollup.config.mjs
│ │ │ ├── src/
│ │ │ │ ├── Box/
│ │ │ │ │ ├── Box.module.scss
│ │ │ │ │ ├── Box.tsx
│ │ │ │ │ ├── Box.types.ts
│ │ │ │ │ ├── BoxConstants.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Box.snapshot.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Box.snapshot.test.tsx.snap
│ │ │ │ │ ├── _utilities.scss
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Flex/
│ │ │ │ │ ├── Flex.module.scss
│ │ │ │ │ ├── Flex.tsx
│ │ │ │ │ ├── Flex.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Flex.snapshot.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Flex.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── types/
│ │ │ │ └── files.d.ts
│ │ │ ├── tsconfig.json
│ │ │ ├── vitest.config.mjs
│ │ │ └── vitest.setup.mjs
│ │ ├── loader/
│ │ │ ├── CHANGELOG.md
│ │ │ ├── package.json
│ │ │ ├── rollup.config.mjs
│ │ │ ├── src/
│ │ │ │ ├── Loader/
│ │ │ │ │ ├── Loader.module.scss
│ │ │ │ │ ├── Loader.tsx
│ │ │ │ │ ├── Loader.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Loader.snapshot.test.tsx
│ │ │ │ │ │ ├── Loader.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Loader.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── types/
│ │ │ │ └── files.d.ts
│ │ │ ├── tsconfig.json
│ │ │ ├── vitest.config.mjs
│ │ │ └── vitest.setup.mjs
│ │ ├── tooltip/
│ │ │ ├── CHANGELOG.md
│ │ │ ├── package.json
│ │ │ ├── rollup.config.mjs
│ │ │ ├── src/
│ │ │ │ ├── Tooltip/
│ │ │ │ │ ├── Tooltip.module.scss
│ │ │ │ │ ├── Tooltip.tsx
│ │ │ │ │ ├── Tooltip.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Tooltip.snapshot.test.tsx
│ │ │ │ │ │ ├── Tooltip.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Tooltip.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── types/
│ │ │ │ └── files.d.ts
│ │ │ ├── tsconfig.json
│ │ │ ├── vitest.config.mjs
│ │ │ └── vitest.setup.mjs
│ │ └── typography/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ ├── rollup.config.mjs
│ │ ├── src/
│ │ │ ├── Heading/
│ │ │ │ ├── Heading.module.scss
│ │ │ │ ├── Heading.tsx
│ │ │ │ ├── Heading.types.ts
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── Heading.snapshot.test.tsx
│ │ │ │ │ └── __snapshots__/
│ │ │ │ │ └── Heading.snapshot.test.tsx.snap
│ │ │ │ └── index.ts
│ │ │ ├── Text/
│ │ │ │ ├── Text.module.scss
│ │ │ │ ├── Text.tsx
│ │ │ │ ├── Text.types.ts
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── Text.snapshot.test.tsx
│ │ │ │ │ └── __snapshots__/
│ │ │ │ │ └── Text.snapshot.test.tsx.snap
│ │ │ │ └── index.ts
│ │ │ ├── Typography/
│ │ │ │ ├── Typography.module.scss
│ │ │ │ ├── Typography.tsx
│ │ │ │ ├── Typography.types.ts
│ │ │ │ ├── TypographyContext.ts
│ │ │ │ ├── TypographyHooks.tsx
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── Typography.snapshot.test.tsx
│ │ │ │ │ └── __snapshots__/
│ │ │ │ │ └── Typography.snapshot.test.tsx.snap
│ │ │ │ └── index.ts
│ │ │ ├── index.ts
│ │ │ ├── styles/
│ │ │ │ └── typography.scss
│ │ │ └── types/
│ │ │ └── files.d.ts
│ │ ├── tsconfig.json
│ │ ├── vitest.config.mjs
│ │ └── vitest.setup.mjs
│ ├── config/
│ │ ├── .eslintrc.cjs
│ │ ├── CHANGELOG.md
│ │ ├── eslint.config.cjs
│ │ ├── package.json
│ │ ├── rollup.config.mjs
│ │ ├── scripts/
│ │ │ └── styleInject.ejs
│ │ ├── tsconfig.json
│ │ └── vitest.config.mjs
│ ├── core/
│ │ ├── .eslintrc.cjs
│ │ ├── .stylelintignore
│ │ ├── .stylelintrc.json
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── __mocks__/
│ │ │ └── fileMock.cjs
│ │ ├── babel.config.cjs
│ │ ├── package.json
│ │ ├── plop/
│ │ │ └── component/
│ │ │ ├── component-index.txt
│ │ │ ├── component-scss.txt
│ │ │ ├── component-stories-mdx.txt
│ │ │ ├── component-stories-tsx.txt
│ │ │ ├── component-tests.txt
│ │ │ ├── component-ts.txt
│ │ │ ├── component-types.txt
│ │ │ └── index.js
│ │ ├── plopfile.js
│ │ ├── rollup.config.js
│ │ ├── scripts/
│ │ │ └── styleInject.ejs
│ │ ├── src/
│ │ │ ├── __tests__/
│ │ │ │ ├── __snapshots__/
│ │ │ │ │ └── exports.test.ts.snap
│ │ │ │ └── exports.test.ts
│ │ │ ├── components/
│ │ │ │ ├── Accordion/
│ │ │ │ │ ├── Accordion/
│ │ │ │ │ │ ├── Accordion.module.scss
│ │ │ │ │ │ ├── Accordion.tsx
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ ├── Accordion.snapshot.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Accordion.snapshot.test.tsx.snap
│ │ │ │ │ ├── AccordionItem/
│ │ │ │ │ │ ├── AccordionItem.tsx
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ ├── AccordionItem.snapshot.test.tsx
│ │ │ │ │ │ ├── AccordionItem.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── AccordionItem.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── AlertBanner/
│ │ │ │ │ ├── AlertBanner.module.scss
│ │ │ │ │ ├── AlertBanner.tsx
│ │ │ │ │ ├── AlertBanner.types.ts
│ │ │ │ │ ├── AlertBannerButton/
│ │ │ │ │ │ ├── AlertBannerButton.module.scss
│ │ │ │ │ │ └── AlertBannerButton.tsx
│ │ │ │ │ ├── AlertBannerContext.ts
│ │ │ │ │ ├── AlertBannerLink/
│ │ │ │ │ │ ├── AlertBannerLink.module.scss
│ │ │ │ │ │ └── AlertBannerLink.tsx
│ │ │ │ │ ├── AlertBannerText/
│ │ │ │ │ │ ├── AlertBannerText.module.scss
│ │ │ │ │ │ └── AlertBannerText.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── AlertBanner.snapshot.test.tsx
│ │ │ │ │ │ ├── AlertBanner.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── AlertBanner.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── AttentionBox/
│ │ │ │ │ ├── AttentionBox.module.scss
│ │ │ │ │ ├── AttentionBox.tsx
│ │ │ │ │ ├── AttentionBox.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── AttentionBox.test.tsx
│ │ │ │ │ ├── components/
│ │ │ │ │ │ ├── AttentionBoxButton/
│ │ │ │ │ │ │ └── AttentionBoxButton.tsx
│ │ │ │ │ │ ├── AttentionBoxCloseButton/
│ │ │ │ │ │ │ ├── AttentionBoxCloseButton.module.scss
│ │ │ │ │ │ │ └── AttentionBoxCloseButton.tsx
│ │ │ │ │ │ ├── AttentionBoxLeadingIcon/
│ │ │ │ │ │ │ ├── AttentionBoxLeadingIcon.module.scss
│ │ │ │ │ │ │ └── AttentionBoxLeadingIcon.tsx
│ │ │ │ │ │ └── AttentionBoxLink/
│ │ │ │ │ │ ├── AttentionBoxLink.module.scss
│ │ │ │ │ │ └── AttentionBoxLink.tsx
│ │ │ │ │ ├── consts/
│ │ │ │ │ │ └── icons.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── layouts/
│ │ │ │ │ │ ├── AttentionBoxCompact/
│ │ │ │ │ │ │ ├── AttentionBoxCompact.module.scss
│ │ │ │ │ │ │ ├── AttentionBoxCompact.tsx
│ │ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ │ └── AttentionBoxCompact.test.tsx
│ │ │ │ │ │ └── AttentionBoxDefault/
│ │ │ │ │ │ ├── AttentionBoxDefault.module.scss
│ │ │ │ │ │ ├── AttentionBoxDefault.tsx
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ └── AttentionBoxDefault.test.tsx
│ │ │ │ │ └── utils/
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── iconUtils.test.ts
│ │ │ │ │ └── iconUtils.ts
│ │ │ │ ├── Avatar/
│ │ │ │ │ ├── Avatar.module.scss
│ │ │ │ │ ├── Avatar.tsx
│ │ │ │ │ ├── Avatar.types.ts
│ │ │ │ │ ├── AvatarBadge.module.scss
│ │ │ │ │ ├── AvatarBadge.tsx
│ │ │ │ │ ├── AvatarConstants.scss
│ │ │ │ │ ├── AvatarContent.module.scss
│ │ │ │ │ ├── AvatarContent.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Avatar.snapshot.test.tsx
│ │ │ │ │ │ ├── Avatar.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Avatar.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── AvatarGroup/
│ │ │ │ │ ├── AvatarGroup.module.scss
│ │ │ │ │ ├── AvatarGroup.tsx
│ │ │ │ │ ├── AvatarGroup.types.ts
│ │ │ │ │ ├── AvatarGroupConstants.ts
│ │ │ │ │ ├── AvatarGroupCounter.module.scss
│ │ │ │ │ ├── AvatarGroupCounter.tsx
│ │ │ │ │ ├── AvatarGroupCounterTooltipContainer.tsx
│ │ │ │ │ ├── AvatarGroupCounterTooltipContent.module.scss
│ │ │ │ │ ├── AvatarGroupCounterTooltipContent.tsx
│ │ │ │ │ ├── AvatarGroupCounterTooltipContentVirtualizedList.module.scss
│ │ │ │ │ ├── AvatarGroupCounterTooltipContentVirtualizedList.tsx
│ │ │ │ │ ├── AvatarGroupCounterTooltipHelper.tsx
│ │ │ │ │ ├── AvatarGroupHelper.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── AvatarGroup.snapshot.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ ├── AvatarGroup.snapshot.test.jsx.snap
│ │ │ │ │ │ └── AvatarGroup.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Badge/
│ │ │ │ │ ├── Badge.module.scss
│ │ │ │ │ ├── Badge.tsx
│ │ │ │ │ ├── Badge.types.ts
│ │ │ │ │ ├── Indicator/
│ │ │ │ │ │ ├── Indicator.module.scss
│ │ │ │ │ │ ├── Indicator.tsx
│ │ │ │ │ │ ├── Indicator.types.ts
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ ├── Indicator.snapshot.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Indicator.snapshot.test.tsx.snap
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Badge.snapshot.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Badge.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── BaseItem/
│ │ │ │ │ ├── BaseItem.module.scss
│ │ │ │ │ ├── BaseItem.tsx
│ │ │ │ │ ├── BaseItem.types.ts
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ └── BaseItem.stories.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── BaseItem.test.tsx
│ │ │ │ │ ├── hooks/
│ │ │ │ │ │ └── useListItemProps.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── utils.tsx
│ │ │ │ ├── BaseList/
│ │ │ │ │ ├── BaseList.module.scss
│ │ │ │ │ ├── BaseList.tsx
│ │ │ │ │ ├── BaseList.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── BaseList.test.tsx
│ │ │ │ │ ├── context/
│ │ │ │ │ │ └── BaseListContext.tsx
│ │ │ │ │ ├── hooks/
│ │ │ │ │ │ ├── useBaseListFocus.ts
│ │ │ │ │ │ └── useBaseListKeyboard.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── utils/
│ │ │ │ │ └── baseListUtils.ts
│ │ │ │ ├── BreadcrumbsBar/
│ │ │ │ │ ├── BreadcrumbItem/
│ │ │ │ │ │ ├── BreadcrumbContent/
│ │ │ │ │ │ │ ├── BreadcrumbContent.module.scss
│ │ │ │ │ │ │ └── BreadcrumbContent.tsx
│ │ │ │ │ │ ├── BreadcrumbItem.module.scss
│ │ │ │ │ │ ├── BreadcrumbItem.tsx
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ ├── BreadcrumbItem.snapshot.test.tsx
│ │ │ │ │ │ ├── BreadcrumbItem.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ ├── BreadcrumbItem.snapshot.test.jsx.snap
│ │ │ │ │ │ └── BreadcrumbItem.snapshot.test.tsx.snap
│ │ │ │ │ ├── BreadcrumbMenu/
│ │ │ │ │ │ ├── BreadcrumbMenu.tsx
│ │ │ │ │ │ ├── BreadcrumbMenuItem/
│ │ │ │ │ │ │ └── BreadcrumbMenuItem.tsx
│ │ │ │ │ │ ├── BreadcrumbsMenu.module.scss
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ ├── BreadcrumbMenu.snapshot.test.tsx
│ │ │ │ │ │ ├── BreadcrumbMenu.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ ├── BreadcrumbMenu.snapshot.test.jsx.snap
│ │ │ │ │ │ └── BreadcrumbMenu.snapshot.test.tsx.snap
│ │ │ │ │ ├── Breadcrumbs.types.ts
│ │ │ │ │ ├── BreadcrumbsBar.module.scss
│ │ │ │ │ ├── BreadcrumbsBar.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── BreadcrumbsBar.snapshot.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ ├── BreadcrumbsBar.snapshot.test.jsx.snap
│ │ │ │ │ │ └── BreadcrumbsBar.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── ButtonGroup/
│ │ │ │ │ ├── ButtonGroup.module.scss
│ │ │ │ │ ├── ButtonGroup.tsx
│ │ │ │ │ ├── ButtonGroupConstants.ts
│ │ │ │ │ ├── ButtonWrapper.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── ButtonGroup.snapshot.test.tsx
│ │ │ │ │ │ ├── ButtonGroup.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ ├── ButtonGroup.snapshot.test.tsx.snap
│ │ │ │ │ │ └── ButtonGroup.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Checkbox/
│ │ │ │ │ ├── Checkbox.module.scss
│ │ │ │ │ ├── Checkbox.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Checkbox.snapshot.test.tsx
│ │ │ │ │ │ ├── Checkbox.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Checkbox.snapshot.test.tsx.snap
│ │ │ │ │ ├── hooks/
│ │ │ │ │ │ └── useSupportFirefoxLabelClick.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Chips/
│ │ │ │ │ ├── Chips.module.scss
│ │ │ │ │ ├── Chips.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Chips.snapshot.test.tsx
│ │ │ │ │ │ ├── Chips.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Chips.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── ColorPicker/
│ │ │ │ │ ├── ColorPicker.module.scss
│ │ │ │ │ ├── ColorPicker.tsx
│ │ │ │ │ ├── ColorPicker.types.ts
│ │ │ │ │ ├── ColorPickerConstants.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── ColorPicker.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── ColorPicker.test.tsx.snap
│ │ │ │ │ ├── components/
│ │ │ │ │ │ ├── ColorPickerContent/
│ │ │ │ │ │ │ ├── ColorPickerClearButton.module.scss
│ │ │ │ │ │ │ ├── ColorPickerClearButton.tsx
│ │ │ │ │ │ │ ├── ColorPickerColorsGrid.module.scss
│ │ │ │ │ │ │ ├── ColorPickerColorsGrid.tsx
│ │ │ │ │ │ │ └── ColorPickerContent.tsx
│ │ │ │ │ │ └── ColorPickerItemComponent/
│ │ │ │ │ │ ├── ColorPickerItemComponent.module.scss
│ │ │ │ │ │ └── ColorPickerItemComponent.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── services/
│ │ │ │ │ └── ColorPickerStyleService.ts
│ │ │ │ ├── Combobox/
│ │ │ │ │ ├── Combobox.module.scss
│ │ │ │ │ ├── Combobox.tsx
│ │ │ │ │ ├── Combobox.types.ts
│ │ │ │ │ ├── ComboboxHelpers/
│ │ │ │ │ │ ├── ComboboxHelpers.module.scss
│ │ │ │ │ │ └── ComboboxHelpers.tsx
│ │ │ │ │ ├── ComboboxService.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Combobox.snapshot.test.tsx
│ │ │ │ │ │ ├── Combobox.test.tsx
│ │ │ │ │ │ ├── ComboboxService.test.ts
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Combobox.snapshot.test.tsx.snap
│ │ │ │ │ ├── components/
│ │ │ │ │ │ ├── ComboboxCategory/
│ │ │ │ │ │ │ ├── ComboboxCategory.module.scss
│ │ │ │ │ │ │ └── ComboboxCategory.tsx
│ │ │ │ │ │ ├── ComboboxConstants.ts
│ │ │ │ │ │ ├── ComboboxItems/
│ │ │ │ │ │ │ ├── ComboboxItems.module.scss
│ │ │ │ │ │ │ └── ComboboxItems.tsx
│ │ │ │ │ │ ├── ComboboxOption/
│ │ │ │ │ │ │ ├── ComboboxOption.module.scss
│ │ │ │ │ │ │ └── ComboboxOption.tsx
│ │ │ │ │ │ └── StickyCategoryHeader/
│ │ │ │ │ │ ├── StickyCategoryHeader.module.scss
│ │ │ │ │ │ └── StickyCategoryHeader.tsx
│ │ │ │ │ ├── helpers.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Counter/
│ │ │ │ │ ├── Counter.module.scss
│ │ │ │ │ ├── Counter.tsx
│ │ │ │ │ ├── Counter.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Counter.snapshot.test.tsx
│ │ │ │ │ │ ├── Counter.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Counter.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── DatePicker/
│ │ │ │ │ ├── DateContentHoverContext.tsx
│ │ │ │ │ ├── DatePicker.module.scss
│ │ │ │ │ ├── DatePicker.tsx
│ │ │ │ │ ├── DatePicker.types.ts
│ │ │ │ │ ├── DatePickerHeader.module.scss
│ │ │ │ │ ├── DatePickerHeader.tsx
│ │ │ │ │ ├── RangeDayContent.tsx
│ │ │ │ │ ├── SingleDayContent.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── DatePicker.test.tsx
│ │ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ │ ├── DatePicker.test.jsx.snap
│ │ │ │ │ │ │ └── DatePicker.test.tsx.snap
│ │ │ │ │ │ └── utils.test.ts
│ │ │ │ │ ├── datePickerHooks.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── types/
│ │ │ │ │ │ └── files.d.ts
│ │ │ │ │ └── utils.ts
│ │ │ │ ├── Divider/
│ │ │ │ │ ├── Divider.module.scss
│ │ │ │ │ ├── Divider.tsx
│ │ │ │ │ ├── Divider.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Divider.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Divider.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Dropdown/
│ │ │ │ │ ├── Dropdown.tsx
│ │ │ │ │ ├── Dropdown.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── BaseList.test.tsx
│ │ │ │ │ │ └── Dropdown.test.tsx
│ │ │ │ │ ├── components/
│ │ │ │ │ │ ├── DropdownBase/
│ │ │ │ │ │ │ ├── DropdownBase.module.scss
│ │ │ │ │ │ │ └── DropdownBase.tsx
│ │ │ │ │ │ ├── DropdownBaseList/
│ │ │ │ │ │ │ ├── DropdownBaseList.module.scss
│ │ │ │ │ │ │ ├── DropdownBaseList.tsx
│ │ │ │ │ │ │ └── DropdownBaseList.types.ts
│ │ │ │ │ │ ├── DropdownBoxMode/
│ │ │ │ │ │ │ ├── DropdownBoxMode.module.scss
│ │ │ │ │ │ │ └── DropdownBoxMode.tsx
│ │ │ │ │ │ ├── DropdownPopup/
│ │ │ │ │ │ │ └── DropdownPopup.tsx
│ │ │ │ │ │ ├── DropdownWrapperUI.tsx
│ │ │ │ │ │ ├── Menu/
│ │ │ │ │ │ │ ├── Menu.module.scss
│ │ │ │ │ │ │ ├── Menu.tsx
│ │ │ │ │ │ │ └── MenuList.tsx
│ │ │ │ │ │ ├── MultiSelectedValues/
│ │ │ │ │ │ │ ├── MultiSelectedValues.module.scss
│ │ │ │ │ │ │ └── MultiSelectedValues.tsx
│ │ │ │ │ │ └── Trigger/
│ │ │ │ │ │ ├── DropdownChip.tsx
│ │ │ │ │ │ ├── DropdownInput.tsx
│ │ │ │ │ │ ├── MultiSelectTrigger.tsx
│ │ │ │ │ │ ├── SingleSelectTrigger.tsx
│ │ │ │ │ │ ├── Trigger.module.scss
│ │ │ │ │ │ └── TriggerActions.tsx
│ │ │ │ │ ├── context/
│ │ │ │ │ │ ├── DropdownContext.ts
│ │ │ │ │ │ └── DropdownContext.types.ts
│ │ │ │ │ ├── hooks/
│ │ │ │ │ │ ├── useDropdownCombobox.ts
│ │ │ │ │ │ ├── useDropdownFiltering.ts
│ │ │ │ │ │ ├── useDropdownMultiCombobox.ts
│ │ │ │ │ │ ├── useDropdownMultiSelect.ts
│ │ │ │ │ │ └── useDropdownSelect.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── modes/
│ │ │ │ │ │ ├── DropdownComboboxController.tsx
│ │ │ │ │ │ ├── DropdownMultiComboboxController.tsx
│ │ │ │ │ │ ├── DropdownMultiSelectController.tsx
│ │ │ │ │ │ └── DropdownSelectController.tsx
│ │ │ │ │ └── utils/
│ │ │ │ │ ├── dropdown-modifiers.ts
│ │ │ │ │ └── dropdownUtils.ts
│ │ │ │ ├── EditableHeading/
│ │ │ │ │ ├── EditableHeading.module.scss
│ │ │ │ │ ├── EditableHeading.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── EditableHeading.test.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── EditableText/
│ │ │ │ │ ├── EditableText.module.scss
│ │ │ │ │ ├── EditableText.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── EditableText.test.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── EditableTypography/
│ │ │ │ │ ├── EditableTypography.module.scss
│ │ │ │ │ ├── EditableTypography.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── EditableTypography.test.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── EmptyState/
│ │ │ │ │ ├── EmptyState.module.scss
│ │ │ │ │ ├── EmptyState.tsx
│ │ │ │ │ ├── EmptyState.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── EmptyState.test.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── ExpandCollapse/
│ │ │ │ │ ├── ExpandCollapse.module.scss
│ │ │ │ │ ├── ExpandCollapse.tsx
│ │ │ │ │ ├── ExpandCollapse.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── ExpandCollapse.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── ExpandCollapse.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── FieldLabel/
│ │ │ │ │ ├── FieldLabel.module.scss
│ │ │ │ │ ├── FieldLabel.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── FormattedNumber/
│ │ │ │ │ ├── FormattedNumber.module.scss
│ │ │ │ │ ├── FormattedNumber.tsx
│ │ │ │ │ ├── FormattedNumberHelpers.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── FormattedNumber.test.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── GridKeyboardNavigationContext/
│ │ │ │ │ ├── GridKeyboardNavigationContext.ts
│ │ │ │ │ ├── GridKeyboardNavigationContextConstants.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── GridKeyboardNavigationContext.test.tsx
│ │ │ │ │ │ └── helper.test.ts
│ │ │ │ │ ├── helper.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── HiddenText/
│ │ │ │ │ ├── HiddenText.module.scss
│ │ │ │ │ ├── HiddenText.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── HiddenText.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── HiddenText.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Info/
│ │ │ │ │ ├── Info.tsx
│ │ │ │ │ ├── Info.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── Info.test.tsx
│ │ │ │ │ ├── components/
│ │ │ │ │ │ ├── InfoDialogContent/
│ │ │ │ │ │ │ ├── InfoDialogContent.module.scss
│ │ │ │ │ │ │ ├── InfoDialogContent.tsx
│ │ │ │ │ │ │ ├── InfoDialogContent.types.ts
│ │ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ │ └── InfoDialogContent.test.tsx
│ │ │ │ │ │ ├── InfoLink/
│ │ │ │ │ │ │ ├── InfoLink.module.scss
│ │ │ │ │ │ │ ├── InfoLink.tsx
│ │ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ │ └── InfoLink.test.tsx
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── InfoText/
│ │ │ │ │ ├── InfoText.module.scss
│ │ │ │ │ ├── InfoText.tsx
│ │ │ │ │ ├── InfoText.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── InfoText.test.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Label/
│ │ │ │ │ ├── Label.module.scss
│ │ │ │ │ ├── Label.tsx
│ │ │ │ │ ├── Label.types.ts
│ │ │ │ │ ├── LabelCelebrationAnimation.module.scss
│ │ │ │ │ ├── LabelCelebrationAnimation.tsx
│ │ │ │ │ ├── LabelConstants.ts
│ │ │ │ │ ├── Leg.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Label.snapshot.test.tsx
│ │ │ │ │ │ ├── Label.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Label.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Link/
│ │ │ │ │ ├── Link.module.scss
│ │ │ │ │ ├── Link.tsx
│ │ │ │ │ ├── Link.types.ts
│ │ │ │ │ ├── LinkConsts.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Link.snapshot.test.tsx
│ │ │ │ │ │ ├── Link.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Link.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── List/
│ │ │ │ │ ├── List.module.scss
│ │ │ │ │ ├── List.tsx
│ │ │ │ │ ├── List.types.ts
│ │ │ │ │ ├── VirtualizedListItems/
│ │ │ │ │ │ ├── VirtualizedListItems.module.scss
│ │ │ │ │ │ └── VirtualizedListItems.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── List.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ ├── List.test.jsx.snap
│ │ │ │ │ │ └── List.test.tsx.snap
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── utils/
│ │ │ │ │ ├── ListContext.ts
│ │ │ │ │ └── ListUtils.ts
│ │ │ │ ├── ListItem/
│ │ │ │ │ ├── ListItem.module.scss
│ │ │ │ │ ├── ListItem.tsx
│ │ │ │ │ ├── ListItem.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── ListItem.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── ListItem.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── ListItemAvatar/
│ │ │ │ │ ├── ListItemAvatar.module.scss
│ │ │ │ │ ├── ListItemAvatar.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── ListItemAvatar.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── ListItemAvatar.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── ListItemIcon/
│ │ │ │ │ ├── ListItemIcon.module.scss
│ │ │ │ │ ├── ListItemIcon.tsx
│ │ │ │ │ ├── ListItemIcon.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── ListItemIcon.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── ListItemIcon.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── ListTitle/
│ │ │ │ │ ├── ListTitle.module.scss
│ │ │ │ │ ├── ListTitle.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── ListTitle.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── ListTitle.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Menu/
│ │ │ │ │ ├── Menu/
│ │ │ │ │ │ ├── Menu.module.scss
│ │ │ │ │ │ ├── Menu.tsx
│ │ │ │ │ │ ├── MenuConstants.ts
│ │ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ │ ├── Menu.test.tsx
│ │ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ │ └── Menu.test.tsx.snap
│ │ │ │ │ │ ├── hooks/
│ │ │ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ │ │ ├── useAdjacentSelectableMenuIndex.test.tsx
│ │ │ │ │ │ │ │ ├── useFocusOnMount.test.tsx
│ │ │ │ │ │ │ │ └── useLastNavigationDirection.test.tsx
│ │ │ │ │ │ │ ├── useAdjacentSelectableMenuIndex.tsx
│ │ │ │ │ │ │ ├── useCloseMenuOnKeyEvent.tsx
│ │ │ │ │ │ │ ├── useFocusOnMount.tsx
│ │ │ │ │ │ │ ├── useLastNavigationDirection.tsx
│ │ │ │ │ │ │ ├── useMenuId.tsx
│ │ │ │ │ │ │ ├── useMenuKeyboardNavigation.tsx
│ │ │ │ │ │ │ ├── useMouseLeave.tsx
│ │ │ │ │ │ │ ├── useOnCloseMenu.tsx
│ │ │ │ │ │ │ └── useSubMenuIndex.tsx
│ │ │ │ │ │ └── utils/
│ │ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ │ └── utils.test.ts
│ │ │ │ │ │ └── utils.ts
│ │ │ │ │ ├── MenuDivider/
│ │ │ │ │ │ ├── MenuDivider.module.scss
│ │ │ │ │ │ └── MenuDivider.tsx
│ │ │ │ │ ├── MenuGridItem/
│ │ │ │ │ │ ├── MenuGridItem.tsx
│ │ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ │ ├── MenuGridItem.snapshot.test.tsx
│ │ │ │ │ │ │ ├── MenuGridItem.test.tsx
│ │ │ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ │ │ ├── MenuGridItem.snapshot.test.jsx.snap
│ │ │ │ │ │ │ │ └── MenuGridItem.snapshot.test.tsx.snap
│ │ │ │ │ │ │ ├── useFocusGridItemByActiveStatus.test.ts
│ │ │ │ │ │ │ └── useMenuGridItemNavContext.test.ts
│ │ │ │ │ │ ├── useFocusGridItemByActiveStatus.tsx
│ │ │ │ │ │ └── useMenuGridItemNavContext.tsx
│ │ │ │ │ ├── MenuItem/
│ │ │ │ │ │ ├── AvatarMenuItem.tsx
│ │ │ │ │ │ ├── MenuItem.module.scss
│ │ │ │ │ │ ├── MenuItem.tsx
│ │ │ │ │ │ ├── MenuItem.types.ts
│ │ │ │ │ │ ├── MenuItemConstants.ts
│ │ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ │ ├── MenuItem.snapshot.test.tsx
│ │ │ │ │ │ │ ├── MenuItem.test.tsx
│ │ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ │ └── MenuItem.snapshot.test.tsx.snap
│ │ │ │ │ │ ├── components/
│ │ │ │ │ │ │ ├── BaseMenuItem/
│ │ │ │ │ │ │ │ ├── BaseMenuItem.module.scss
│ │ │ │ │ │ │ │ ├── BaseMenuItem.tsx
│ │ │ │ │ │ │ │ ├── BaseMenuItem.types.ts
│ │ │ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ │ │ └── BaseMenuItem.test.tsx
│ │ │ │ │ │ │ ├── MenuItemIcon/
│ │ │ │ │ │ │ │ ├── MenuItemIcon.module.scss
│ │ │ │ │ │ │ │ ├── MenuItemIcon.tsx
│ │ │ │ │ │ │ │ ├── MenuItemIcon.types.ts
│ │ │ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ │ │ └── MenuItemIcon.test.tsx
│ │ │ │ │ │ │ ├── MenuItemSubMenu/
│ │ │ │ │ │ │ │ ├── MenuItemSubMenu.tsx
│ │ │ │ │ │ │ │ ├── MenuItemSubMenu.types.ts
│ │ │ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ │ │ └── MenuItemSubMenu.test.tsx
│ │ │ │ │ │ │ └── MenuItemSubMenuIcon/
│ │ │ │ │ │ │ ├── MenuItemSubMenuIcon.module.scss
│ │ │ │ │ │ │ ├── MenuItemSubMenuIcon.tsx
│ │ │ │ │ │ │ ├── MenuItemSubMenuIcon.types.ts
│ │ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ │ └── MenuItemSubMenuIcon.test.tsx
│ │ │ │ │ │ └── hooks/
│ │ │ │ │ │ ├── useMenuItemKeyboardEvents.ts
│ │ │ │ │ │ └── useMenuItemMouseEvents.ts
│ │ │ │ │ ├── MenuItemButton/
│ │ │ │ │ │ ├── MenuItemButton.module.scss
│ │ │ │ │ │ ├── MenuItemButton.tsx
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ ├── MenuItemButton.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ ├── MenuItemButton.test.jsx.snap
│ │ │ │ │ │ └── MenuItemButton.test.tsx.snap
│ │ │ │ │ ├── MenuTitle/
│ │ │ │ │ │ ├── MenuTitle.module.scss
│ │ │ │ │ │ ├── MenuTitle.tsx
│ │ │ │ │ │ ├── MenuTitle.type.ts
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ ├── MenuTitle.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── MenuTitle.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── MenuButton/
│ │ │ │ │ ├── MenuButton.module.scss
│ │ │ │ │ ├── MenuButton.tsx
│ │ │ │ │ ├── MenuButton.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── MenuButton.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── MenuButton.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Modal/
│ │ │ │ │ ├── Modal/
│ │ │ │ │ │ ├── Modal.module.scss
│ │ │ │ │ │ ├── Modal.tsx
│ │ │ │ │ │ ├── Modal.types.tsx
│ │ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ │ └── Modal.test.tsx
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── ModalContent/
│ │ │ │ │ │ ├── ModalContent.tsx
│ │ │ │ │ │ ├── ModalContent.types.ts
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── ModalHeader/
│ │ │ │ │ │ ├── ModalHeader.module.scss
│ │ │ │ │ │ ├── ModalHeader.tsx
│ │ │ │ │ │ ├── ModalHeader.types.ts
│ │ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ │ └── ModalHeader.test.tsx
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── ModalMedia/
│ │ │ │ │ │ ├── ModalMedia.module.scss
│ │ │ │ │ │ ├── ModalMedia.tsx
│ │ │ │ │ │ ├── ModalMedia.types.ts
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── ModalTopActions/
│ │ │ │ │ │ ├── ModalTopActions.module.scss
│ │ │ │ │ │ ├── ModalTopActions.tsx
│ │ │ │ │ │ ├── ModalTopActions.types.ts
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ └── ModalTopActions.test.tsx
│ │ │ │ │ ├── context/
│ │ │ │ │ │ ├── ModalContext.tsx
│ │ │ │ │ │ └── ModalContext.types.ts
│ │ │ │ │ ├── footers/
│ │ │ │ │ │ ├── ModalFooter/
│ │ │ │ │ │ │ ├── ModalFooter.module.scss
│ │ │ │ │ │ │ ├── ModalFooter.tsx
│ │ │ │ │ │ │ └── ModalFooter.types.ts
│ │ │ │ │ │ ├── ModalFooterBase/
│ │ │ │ │ │ │ ├── ModalFooterBase.module.scss
│ │ │ │ │ │ │ ├── ModalFooterBase.tsx
│ │ │ │ │ │ │ ├── ModalFooterBase.types.ts
│ │ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ │ └── ModalFooterBase.test.tsx
│ │ │ │ │ │ ├── ModalFooterWizard/
│ │ │ │ │ │ │ ├── ModalFooterWizard.module.scss
│ │ │ │ │ │ │ ├── ModalFooterWizard.tsx
│ │ │ │ │ │ │ └── ModalFooterWizard.types.ts
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ └── utils/
│ │ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ │ └── getPropsForButton.test.ts
│ │ │ │ │ │ └── getPropsForButton.ts
│ │ │ │ │ ├── hooks/
│ │ │ │ │ │ ├── useFocusEscapeTargets/
│ │ │ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ │ │ └── useFocusEscapeTargets.test.ts
│ │ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ │ ├── useFocusEscapeTargets.ts
│ │ │ │ │ │ │ └── useFocusEscapeTargets.types.ts
│ │ │ │ │ │ └── usePortalTarget/
│ │ │ │ │ │ ├── usePortalTarget.ts
│ │ │ │ │ │ └── usePortalTarget.types.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── layouts/
│ │ │ │ │ ├── ModalBasicLayout/
│ │ │ │ │ │ ├── ModalBasicLayout.module.scss
│ │ │ │ │ │ ├── ModalBasicLayout.tsx
│ │ │ │ │ │ └── ModalBasicLayout.types.ts
│ │ │ │ │ ├── ModalFooterShadow.module.scss
│ │ │ │ │ ├── ModalFooterShadow.tsx
│ │ │ │ │ ├── ModalFooterShadow.types.ts
│ │ │ │ │ ├── ModalLayoutScrollableContent.module.scss
│ │ │ │ │ ├── ModalLayoutScrollableContent.tsx
│ │ │ │ │ ├── ModalLayoutScrollableContent.types.ts
│ │ │ │ │ ├── ModalMediaLayout/
│ │ │ │ │ │ ├── ModalMediaLayout.module.scss
│ │ │ │ │ │ ├── ModalMediaLayout.tsx
│ │ │ │ │ │ └── ModalMediaLayout.types.ts
│ │ │ │ │ ├── ModalSideBySideLayout/
│ │ │ │ │ │ ├── ModalSideBySideLayout.module.scss
│ │ │ │ │ │ ├── ModalSideBySideLayout.tsx
│ │ │ │ │ │ └── ModalSideBySideLayout.types.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── useLayoutScrolledContent.ts
│ │ │ │ ├── MultiStepIndicator/
│ │ │ │ │ ├── MultiStep.types.ts
│ │ │ │ │ ├── MultiStepIndicator.module.scss
│ │ │ │ │ ├── MultiStepIndicator.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── MultiStepIndicator.snapshot.test.tsx
│ │ │ │ │ │ ├── MultiStepIndicator.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── MultiStepIndicator.snapshot.test.tsx.snap
│ │ │ │ │ ├── components/
│ │ │ │ │ │ └── StepIndicator/
│ │ │ │ │ │ ├── StepIndicator.module.scss
│ │ │ │ │ │ └── StepIndicator.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── NumberField/
│ │ │ │ │ ├── NumberField.module.scss
│ │ │ │ │ ├── NumberField.tsx
│ │ │ │ │ ├── NumberField.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── NumberField.test.tsx
│ │ │ │ │ ├── components/
│ │ │ │ │ │ └── NumberFieldSpinButton/
│ │ │ │ │ │ ├── NumberFieldSpinButton.module.scss
│ │ │ │ │ │ ├── NumberFieldSpinButton.tsx
│ │ │ │ │ │ ├── NumberFieldSpinButton.types.ts
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ └── NumberFieldSpinButton.test.tsx
│ │ │ │ │ ├── hooks/
│ │ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ │ ├── useNumberFieldState.test.ts
│ │ │ │ │ │ │ └── useSpinButtonHandlers.test.ts
│ │ │ │ │ │ ├── useNumberFieldState.ts
│ │ │ │ │ │ └── useSpinButtonHandlers.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── utils/
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── calcValue.test.ts
│ │ │ │ │ └── calcValue.ts
│ │ │ │ ├── ProgressBars/
│ │ │ │ │ ├── PercentageLabel/
│ │ │ │ │ │ ├── PercentageLabel.module.scss
│ │ │ │ │ │ └── PercentageLabel.tsx
│ │ │ │ │ ├── ProgressBar/
│ │ │ │ │ │ ├── Bar/
│ │ │ │ │ │ │ ├── Bar.module.scss
│ │ │ │ │ │ │ └── Bar.tsx
│ │ │ │ │ │ ├── ProgressBar.module.scss
│ │ │ │ │ │ ├── ProgressBar.tsx
│ │ │ │ │ │ ├── ProgressBar.types.ts
│ │ │ │ │ │ ├── ProgressBarHelpers.ts
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ ├── ProgressBar.snapshot.test.tsx
│ │ │ │ │ │ ├── ProgressBar.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── ProgressBar.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── RadioButton/
│ │ │ │ │ ├── RadioButton.module.scss
│ │ │ │ │ ├── RadioButton.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── RadioButton.snapshot.test.tsx
│ │ │ │ │ │ ├── RadioButton.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── RadioButton.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Search/
│ │ │ │ │ ├── Search.module.scss
│ │ │ │ │ ├── Search.tsx
│ │ │ │ │ ├── Search.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── Search.test.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Skeleton/
│ │ │ │ │ ├── Skeleton.module.scss
│ │ │ │ │ ├── Skeleton.tsx
│ │ │ │ │ ├── SkeletonConstants.ts
│ │ │ │ │ ├── SkeletonVariables.scss
│ │ │ │ │ ├── Skelton.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Skeleton.snapshot.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ ├── Skeleton.snapshot.test.jsx.snap
│ │ │ │ │ │ └── Skeleton.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── SlideTransition/
│ │ │ │ │ ├── SlideTransition.module.scss
│ │ │ │ │ ├── SlideTransition.tsx
│ │ │ │ │ └── SlideTransition.types.ts
│ │ │ │ ├── Slider/
│ │ │ │ │ ├── SelectionIndicator.module.scss
│ │ │ │ │ ├── SelectionIndicator.tsx
│ │ │ │ │ ├── Slider.module.scss
│ │ │ │ │ ├── Slider.tsx
│ │ │ │ │ ├── Slider.types.ts
│ │ │ │ │ ├── SliderBase/
│ │ │ │ │ │ ├── SliderBase.module.scss
│ │ │ │ │ │ ├── SliderBase.tsx
│ │ │ │ │ │ ├── SliderFilledTrack.module.scss
│ │ │ │ │ │ ├── SliderFilledTrack.tsx
│ │ │ │ │ │ ├── SliderRail.module.scss
│ │ │ │ │ │ ├── SliderRail.tsx
│ │ │ │ │ │ ├── SliderThumb.module.scss
│ │ │ │ │ │ ├── SliderThumb.tsx
│ │ │ │ │ │ ├── SliderTrack.module.scss
│ │ │ │ │ │ └── SliderTrack.tsx
│ │ │ │ │ ├── SliderConstants.ts
│ │ │ │ │ ├── SliderContext.tsx
│ │ │ │ │ ├── SliderHelpers.ts
│ │ │ │ │ ├── SliderHooks.ts
│ │ │ │ │ ├── SliderInfix.module.scss
│ │ │ │ │ ├── SliderInfix.tsx
│ │ │ │ │ ├── SliderInfixHooks.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Slider-helpers.test.ts
│ │ │ │ │ │ ├── Slider-non-ranged.test.tsx
│ │ │ │ │ │ ├── Slider-ranged.test.tsx
│ │ │ │ │ │ ├── Slider.snapshot.test.tsx
│ │ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ │ ├── Slider-non-ranged.test.jsx.snap
│ │ │ │ │ │ │ ├── Slider-non-ranged.test.tsx.snap
│ │ │ │ │ │ │ ├── Slider-ranged.test.jsx.snap
│ │ │ │ │ │ │ ├── Slider-ranged.test.tsx.snap
│ │ │ │ │ │ │ ├── Slider.snapshot.test.jsx.snap
│ │ │ │ │ │ │ └── Slider.snapshot.test.tsx.snap
│ │ │ │ │ │ └── sliderTestUtils.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── SplitButton/
│ │ │ │ │ ├── SplitButton.module.scss
│ │ │ │ │ ├── SplitButton.tsx
│ │ │ │ │ ├── SplitButtonConstants.ts
│ │ │ │ │ ├── SplitButtonMenu/
│ │ │ │ │ │ ├── SplitButtonMenu.tsx
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ ├── SplitButtonMenu.snapshot.test.tsx
│ │ │ │ │ │ ├── SplitButtonMenu.test.tsx
│ │ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ │ └── SplitButtonMenu.snapshot.test.tsx.snap
│ │ │ │ │ │ └── test-utils.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── SplitButton.snapshot.test.tsx
│ │ │ │ │ │ ├── SplitButton.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── SplitButton.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Steps/
│ │ │ │ │ ├── Steps.module.scss
│ │ │ │ │ ├── Steps.tsx
│ │ │ │ │ ├── Steps.types.ts
│ │ │ │ │ ├── StepsCommand.module.scss
│ │ │ │ │ ├── StepsCommand.tsx
│ │ │ │ │ ├── StepsConstants.ts
│ │ │ │ │ ├── StepsDot.module.scss
│ │ │ │ │ ├── StepsDot.tsx
│ │ │ │ │ ├── StepsGalleryHeader.module.scss
│ │ │ │ │ ├── StepsGalleryHeader.tsx
│ │ │ │ │ ├── StepsHeader.module.scss
│ │ │ │ │ ├── StepsHeader.tsx
│ │ │ │ │ ├── StepsNumbersHeader.module.scss
│ │ │ │ │ ├── StepsNumbersHeader.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Steps.snapshot.test.tsx
│ │ │ │ │ │ ├── Steps.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Steps.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Switch/
│ │ │ │ │ ├── Switch.module.scss
│ │ │ │ │ ├── Switch.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── Table/
│ │ │ │ │ ├── Table/
│ │ │ │ │ │ ├── Table.module.scss
│ │ │ │ │ │ ├── Table.tsx
│ │ │ │ │ │ ├── Table.types.ts
│ │ │ │ │ │ ├── TableConsts.ts
│ │ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ │ ├── Table.test.tsx
│ │ │ │ │ │ │ ├── TableHelpers.test.tsx
│ │ │ │ │ │ │ └── tableTestUtils.tsx
│ │ │ │ │ │ └── tableHelpers.ts
│ │ │ │ │ ├── TableBody/
│ │ │ │ │ │ ├── TableBody.module.scss
│ │ │ │ │ │ └── TableBody.tsx
│ │ │ │ │ ├── TableCell/
│ │ │ │ │ │ ├── TableCell.module.scss
│ │ │ │ │ │ └── TableCell.tsx
│ │ │ │ │ ├── TableCellSkeleton/
│ │ │ │ │ │ ├── TableCellSkeleton.module.scss
│ │ │ │ │ │ └── TableCellSkeleton.tsx
│ │ │ │ │ ├── TableContainer/
│ │ │ │ │ │ ├── TableContainer.module.scss
│ │ │ │ │ │ ├── TableContainer.tsx
│ │ │ │ │ │ └── TableContainer.types.ts
│ │ │ │ │ ├── TableHeader/
│ │ │ │ │ │ ├── TableHeader.module.scss
│ │ │ │ │ │ └── TableHeader.tsx
│ │ │ │ │ ├── TableHeaderCell/
│ │ │ │ │ │ ├── TableHeaderCell.module.scss
│ │ │ │ │ │ └── TableHeaderCell.tsx
│ │ │ │ │ ├── TableRow/
│ │ │ │ │ │ ├── TableRow.module.scss
│ │ │ │ │ │ └── TableRow.tsx
│ │ │ │ │ ├── TableRowMenu/
│ │ │ │ │ │ ├── TableRowMenu.module.scss
│ │ │ │ │ │ ├── TableRowMenu.tsx
│ │ │ │ │ │ └── TableRowMenu.types.ts
│ │ │ │ │ ├── TableVirtualizedBody/
│ │ │ │ │ │ ├── TableVirtualizedBody.module.scss
│ │ │ │ │ │ └── TableVirtualizedBody.tsx
│ │ │ │ │ ├── context/
│ │ │ │ │ │ ├── TableContainerContext/
│ │ │ │ │ │ │ ├── TableContainerContext.tsx
│ │ │ │ │ │ │ └── TableContainerContext.types.ts
│ │ │ │ │ │ ├── TableContext/
│ │ │ │ │ │ │ ├── TableContext.tsx
│ │ │ │ │ │ │ └── TableContext.types.ts
│ │ │ │ │ │ └── TableRowMenuContext/
│ │ │ │ │ │ ├── TableRowMenuContext.tsx
│ │ │ │ │ │ └── TableRowMenuContext.types.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Tabs/
│ │ │ │ │ ├── Tab/
│ │ │ │ │ │ ├── Tab.module.scss
│ │ │ │ │ │ ├── Tab.tsx
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ ├── Tab.snapshot.test.tsx
│ │ │ │ │ │ ├── Tab.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Tab.snapshot.test.tsx.snap
│ │ │ │ │ ├── TabList/
│ │ │ │ │ │ ├── TabList.module.scss
│ │ │ │ │ │ ├── TabList.tsx
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ ├── TabList.snapshot.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ ├── TabList.snapshot.test.jsx.snap
│ │ │ │ │ │ └── TabList.snapshot.test.tsx.snap
│ │ │ │ │ ├── TabPanel/
│ │ │ │ │ │ ├── TabPanel.module.scss
│ │ │ │ │ │ ├── TabPanel.tsx
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ ├── TabPanel.snapshot.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── TabPanel.snapshot.test.tsx.snap
│ │ │ │ │ ├── TabPanels/
│ │ │ │ │ │ ├── TabPanels.module.scss
│ │ │ │ │ │ ├── TabPanels.tsx
│ │ │ │ │ │ ├── TabPanels.types.ts
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ ├── TabPanels.snapshot.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ ├── TabPanels.snapshot.test.jsx.snap
│ │ │ │ │ │ └── TabPanels.snapshot.test.tsx.snap
│ │ │ │ │ ├── TabsContext/
│ │ │ │ │ │ ├── TabsContext.tsx
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ ├── TabsContext.snapshot.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ ├── TabsContext.snapshot.test.jsx.snap
│ │ │ │ │ │ └── TabsContext.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── TextArea/
│ │ │ │ │ ├── TextArea.module.scss
│ │ │ │ │ ├── TextArea.tsx
│ │ │ │ │ ├── TextArea.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── TextArea.test.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── TextField/
│ │ │ │ │ ├── TextField.module.scss
│ │ │ │ │ ├── TextField.tsx
│ │ │ │ │ ├── TextField.types.ts
│ │ │ │ │ ├── TextFieldConstants.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── TextField-tests.test.tsx
│ │ │ │ │ │ ├── TextField.snapshot.test.tsx
│ │ │ │ │ │ ├── TextField.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── TextField.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── TextWithHighlight/
│ │ │ │ │ ├── TextWithHighlight.module.scss
│ │ │ │ │ ├── TextWithHighlight.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── TextWithHighlight.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── TextWithHighlight.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── ThemeProvider/
│ │ │ │ │ ├── ThemeProvider.tsx
│ │ │ │ │ ├── ThemeProvider.types.ts
│ │ │ │ │ ├── ThemeProviderConstants.ts
│ │ │ │ │ ├── ThemeProviderUtils.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── ThemeProvider.test.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Tipseen/
│ │ │ │ │ ├── Tipseen.module.scss
│ │ │ │ │ ├── Tipseen.tsx
│ │ │ │ │ ├── Tipseen.types.ts
│ │ │ │ │ ├── TipseenBasicContent.module.scss
│ │ │ │ │ ├── TipseenBasicContent.tsx
│ │ │ │ │ ├── TipseenConstants.ts
│ │ │ │ │ ├── TipseenContent.module.scss
│ │ │ │ │ ├── TipseenContent.tsx
│ │ │ │ │ ├── TipseenMedia/
│ │ │ │ │ │ ├── TipseenMedia.module.scss
│ │ │ │ │ │ └── TipseenMedia.tsx
│ │ │ │ │ ├── TipseenTitle.module.scss
│ │ │ │ │ ├── TipseenTitle.tsx
│ │ │ │ │ ├── TipseenWizard.module.scss
│ │ │ │ │ ├── TipseenWizard.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Tipseen.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Tipseen.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Toast/
│ │ │ │ │ ├── Toast.module.scss
│ │ │ │ │ ├── Toast.tsx
│ │ │ │ │ ├── Toast.types.ts
│ │ │ │ │ ├── ToastButton/
│ │ │ │ │ │ └── ToastButton.tsx
│ │ │ │ │ ├── ToastConstants.ts
│ │ │ │ │ ├── ToastHelpers.tsx
│ │ │ │ │ ├── ToastLink/
│ │ │ │ │ │ ├── ToastLink.module.scss
│ │ │ │ │ │ └── ToastLink.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Toast.snapshot.test.tsx
│ │ │ │ │ │ ├── Toast.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Toast.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Toggle/
│ │ │ │ │ ├── MockToggle.module.scss
│ │ │ │ │ ├── MockToggle.tsx
│ │ │ │ │ ├── Toggle.module.scss
│ │ │ │ │ ├── Toggle.tsx
│ │ │ │ │ ├── Toggle.types.ts
│ │ │ │ │ ├── ToggleConstants.ts
│ │ │ │ │ ├── ToggleText.module.scss
│ │ │ │ │ ├── ToggleText.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Toggle.snapshot.test.tsx
│ │ │ │ │ │ ├── Toggle.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Toggle.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── TransitionView/
│ │ │ │ │ ├── TransitionView.module.scss
│ │ │ │ │ ├── TransitionView.tsx
│ │ │ │ │ ├── TransitionView.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── TransitionView.test.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── VirtualizedGrid/
│ │ │ │ │ ├── VirtualizedGrid.module.scss
│ │ │ │ │ ├── VirtualizedGrid.tsx
│ │ │ │ │ ├── VirtualizedGrid.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── VirtualizedGrid.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ ├── VirtualizedGrid.test.jsx.snap
│ │ │ │ │ │ └── VirtualizedGrid.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── VirtualizedList/
│ │ │ │ │ ├── VirtualizedList.module.scss
│ │ │ │ │ ├── VirtualizedList.tsx
│ │ │ │ │ ├── VirtualizedList.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── VirtualizedList.snapshot.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ ├── VirtualizedList.snapshot.test.jsx.snap
│ │ │ │ │ │ └── VirtualizedList.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── next/
│ │ │ │ │ ├── List/
│ │ │ │ │ │ ├── List.module.scss
│ │ │ │ │ │ ├── List.tsx
│ │ │ │ │ │ ├── List.types.ts
│ │ │ │ │ │ ├── ListItem/
│ │ │ │ │ │ │ ├── ListItem.tsx
│ │ │ │ │ │ │ ├── ListItem.types.ts
│ │ │ │ │ │ │ └── index.ts
│ │ │ │ │ │ ├── ListTitle/
│ │ │ │ │ │ │ ├── ListTitle.module.scss
│ │ │ │ │ │ │ ├── ListTitle.tsx
│ │ │ │ │ │ │ ├── ListTitle.types.ts
│ │ │ │ │ │ │ └── index.ts
│ │ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ │ └── List.test.tsx
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ └── index.ts
│ │ │ │ └── next.ts
│ │ │ ├── constants/
│ │ │ │ ├── index.ts
│ │ │ │ ├── keyCodes.ts
│ │ │ │ └── sizes.ts
│ │ │ ├── helpers/
│ │ │ │ └── textManipulations.ts
│ │ │ ├── hooks/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── useDebounceEvent.test.ts
│ │ │ │ │ ├── useEventListener.test.ts
│ │ │ │ │ └── useKeyEvent.test.ts
│ │ │ │ ├── createEventHandler.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── useActiveDescendantListFocus/
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── useActiveDescendantListFocus.test.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── useActiveDescendantListFocusHelpers.ts
│ │ │ │ │ └── useActiveDescendantListFocusHooks.ts
│ │ │ │ ├── useAfterFirstRender/
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── useAfterFirstRender.test.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── useDebounceEvent/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── useElementsOverflowingIndex.ts
│ │ │ │ ├── useEventListener/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── useFocusWithin.ts
│ │ │ │ ├── useFullKeyboardListeners.ts
│ │ │ │ ├── useGridKeyboardNavigation/
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── gridKeyboardNavigationHelper.test.ts
│ │ │ │ │ │ └── useGridKeyboardNavigation.test.ts
│ │ │ │ │ ├── gridKeyboardNavigationHelper.ts
│ │ │ │ │ └── useGridKeyboardNavigation.ts
│ │ │ │ ├── useHover/
│ │ │ │ │ └── useHover.ts
│ │ │ │ ├── useIsMouseEnter.ts
│ │ │ │ ├── useIsMouseOver.ts
│ │ │ │ ├── useItemsOverflow/
│ │ │ │ │ └── useItemsOverflow.ts
│ │ │ │ ├── useKeyEvent/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── useKeyboard.ts
│ │ │ │ ├── useListenFocusTriggers/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── useMediaQuery/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── usePrevious/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── useRefWithCallback.ts
│ │ │ │ ├── useSetFocus/
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── useSetFocus.test.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── useStyle.ts
│ │ │ │ ├── useSwitch/
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── useSwitch.test.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── useThrottledCallback.ts
│ │ │ │ ├── useTimeout/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── useVibeMediaQuery/
│ │ │ │ │ └── index.ts
│ │ │ │ └── useWizard/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── useWizard.test.ts
│ │ │ │ ├── useWizard.ts
│ │ │ │ └── useWizard.types.ts
│ │ │ ├── index.ts
│ │ │ ├── scripts/
│ │ │ │ └── generate-metadata.ts
│ │ │ ├── services/
│ │ │ │ ├── themes.ts
│ │ │ │ └── virtualized-service.ts
│ │ │ ├── style-imports.ts
│ │ │ ├── styles/
│ │ │ │ ├── _keyframes.scss
│ │ │ │ ├── keyframes/
│ │ │ │ │ ├── pop/
│ │ │ │ │ │ ├── _pop-elastic.scss
│ │ │ │ │ │ ├── _pop-in-elastic-bold.scss
│ │ │ │ │ │ ├── _pop-in-elastic.scss
│ │ │ │ │ │ ├── _pop-in-emphasized.scss
│ │ │ │ │ │ ├── _pop-in-from-trigger.scss
│ │ │ │ │ │ ├── _pop-in.scss
│ │ │ │ │ │ └── _pop-out-from-trigger.scss
│ │ │ │ │ ├── slide/
│ │ │ │ │ │ ├── _slide-in-elastic.scss
│ │ │ │ │ │ ├── _slide-in.scss
│ │ │ │ │ │ └── _slide-out.scss
│ │ │ │ │ └── spin/
│ │ │ │ │ └── _spin-in-emphasized.scss
│ │ │ │ ├── states.scss
│ │ │ │ ├── typography.scss
│ │ │ │ └── utilities/
│ │ │ │ └── _utilities-settings.scss
│ │ │ ├── tests/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── test-utils.ts
│ │ │ │ ├── constants.ts
│ │ │ │ ├── interactions-utils.ts
│ │ │ │ └── test-ids-utils.ts
│ │ │ ├── types/
│ │ │ │ ├── ArrayLastElement.ts
│ │ │ │ ├── Colors.ts
│ │ │ │ ├── ElementContent.ts
│ │ │ │ ├── FormElement.ts
│ │ │ │ ├── MoveBy.ts
│ │ │ │ ├── SplitString.ts
│ │ │ │ ├── VibeComponentProps.ts
│ │ │ │ ├── events.ts
│ │ │ │ └── index.ts
│ │ │ └── utils/
│ │ │ ├── colors-utils.ts
│ │ │ └── colors-vars-map.ts
│ │ ├── tsconfig.base.json
│ │ ├── tsconfig.json
│ │ ├── types/
│ │ │ ├── files.d.ts
│ │ │ ├── packages.d.ts
│ │ │ ├── tokens.d.ts
│ │ │ └── window.d.ts
│ │ ├── vite.config.ts
│ │ ├── vitest.config.ts
│ │ └── vitest.setup.ts
│ ├── docs/
│ │ ├── .storybook/
│ │ │ ├── art.ts
│ │ │ ├── main.ts
│ │ │ ├── manager-head.html
│ │ │ ├── manager.jsx
│ │ │ ├── modes.ts
│ │ │ ├── preview-body.html
│ │ │ ├── preview-head.html
│ │ │ ├── preview.tsx
│ │ │ ├── storybook-title-fix.js
│ │ │ ├── test-runner.cjs
│ │ │ ├── theme.js
│ │ │ └── tsconfig.json
│ │ ├── CHANGELOG.md
│ │ ├── chromatic.config.json
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── decorators/
│ │ │ │ ├── withGlobalStyle/
│ │ │ │ │ ├── withGlobalStyle.module.scss
│ │ │ │ │ └── withGlobalStyle.tsx
│ │ │ │ ├── withLiveEdit/
│ │ │ │ │ ├── components/
│ │ │ │ │ │ ├── LiveContent/
│ │ │ │ │ │ │ ├── LiveContent.module.scss
│ │ │ │ │ │ │ ├── LiveContent.tsx
│ │ │ │ │ │ │ └── LiveContent.types.ts
│ │ │ │ │ │ └── LiveEditorAction/
│ │ │ │ │ │ ├── LiveEditorAction.module.scss
│ │ │ │ │ │ ├── LiveEditorAction.tsx
│ │ │ │ │ │ └── LiveEditorAction.types.ts
│ │ │ │ │ ├── hooks/
│ │ │ │ │ │ ├── useApplyDecorators.ts
│ │ │ │ │ │ └── useLiveEditorActions.ts
│ │ │ │ │ ├── utils/
│ │ │ │ │ │ ├── parse-csf-utils.ts
│ │ │ │ │ │ └── prettier-utils.ts
│ │ │ │ │ ├── withLiveEdit.module.scss
│ │ │ │ │ └── withLiveEdit.tsx
│ │ │ │ └── withPerformanceProfiler/
│ │ │ │ └── withPerformanceProfiler.tsx
│ │ │ ├── layout/
│ │ │ │ ├── canvas-wrapper/
│ │ │ │ │ ├── CanvasWrapper.module.scss
│ │ │ │ │ └── CanvasWrapper.tsx
│ │ │ │ ├── footer/
│ │ │ │ │ ├── ArrowIcon.tsx
│ │ │ │ │ ├── Footer.module.scss
│ │ │ │ │ ├── Footer.tsx
│ │ │ │ │ ├── FooterCard.module.scss
│ │ │ │ │ └── FooterCard.tsx
│ │ │ │ ├── live-editor/
│ │ │ │ │ └── LiveEditor.tsx
│ │ │ │ ├── live-preview/
│ │ │ │ │ ├── LivePreview.module.scss
│ │ │ │ │ └── LivePreview.tsx
│ │ │ │ ├── props-table/
│ │ │ │ │ └── props-table.jsx
│ │ │ │ ├── related-components/
│ │ │ │ │ ├── component-description-map.tsx
│ │ │ │ │ ├── descriptions/
│ │ │ │ │ │ ├── accordion-description/
│ │ │ │ │ │ │ ├── accordion-description.module.scss
│ │ │ │ │ │ │ └── accordion-description.tsx
│ │ │ │ │ │ ├── alert-banner-description.tsx
│ │ │ │ │ │ ├── attention-box-description.jsx
│ │ │ │ │ │ ├── avatar-description.tsx
│ │ │ │ │ │ ├── avatar-group-description.tsx
│ │ │ │ │ │ ├── badge-description.tsx
│ │ │ │ │ │ ├── box-description.tsx
│ │ │ │ │ │ ├── breadcrumbs-description.tsx
│ │ │ │ │ │ ├── button-description.tsx
│ │ │ │ │ │ ├── button-group-description.tsx
│ │ │ │ │ │ ├── checkbox-description.tsx
│ │ │ │ │ │ ├── chips-description.tsx
│ │ │ │ │ │ ├── clickable-description/
│ │ │ │ │ │ │ ├── clickable-description.stories.module.scss
│ │ │ │ │ │ │ └── clickable-description.tsx
│ │ │ │ │ │ ├── color-picker-description.tsx
│ │ │ │ │ │ ├── colors-description/
│ │ │ │ │ │ │ ├── colors-description.scss
│ │ │ │ │ │ │ └── colors-description.tsx
│ │ │ │ │ │ ├── combobox-description.tsx
│ │ │ │ │ │ ├── counter-description.tsx
│ │ │ │ │ │ ├── dialog-content-container.tsx
│ │ │ │ │ │ ├── dialog-description/
│ │ │ │ │ │ │ ├── dialog-description.module.scss
│ │ │ │ │ │ │ └── dialog-description.tsx
│ │ │ │ │ │ ├── divider.tsx
│ │ │ │ │ │ ├── dropdown-description.tsx
│ │ │ │ │ │ ├── editable-heading-description.tsx
│ │ │ │ │ │ ├── editable-text-description.tsx
│ │ │ │ │ │ ├── expand-collapse-description/
│ │ │ │ │ │ │ ├── expand-collapse-description.module.scss
│ │ │ │ │ │ │ └── expand-collapse-description.tsx
│ │ │ │ │ │ ├── flex-description.tsx
│ │ │ │ │ │ ├── heading-description.tsx
│ │ │ │ │ │ ├── icon-button-description.tsx
│ │ │ │ │ │ ├── icon-description.tsx
│ │ │ │ │ │ ├── icons-description.tsx
│ │ │ │ │ │ ├── label-description.tsx
│ │ │ │ │ │ ├── linear-progress-bar-description.tsx
│ │ │ │ │ │ ├── link-description.tsx
│ │ │ │ │ │ ├── list-description.tsx
│ │ │ │ │ │ ├── menu-button-description.tsx
│ │ │ │ │ │ ├── menu-description.tsx
│ │ │ │ │ │ ├── menu-grid-item-description.tsx
│ │ │ │ │ │ ├── modal/
│ │ │ │ │ │ │ ├── ModalBasicLayoutRelatedComponent.tsx
│ │ │ │ │ │ │ ├── ModalMediaLayoutRelatedComponent.tsx
│ │ │ │ │ │ │ └── ModalSideBySideLayoutRelatedComponent.tsx
│ │ │ │ │ │ ├── multi-step-indicator-description.tsx
│ │ │ │ │ │ ├── number-field-description.tsx
│ │ │ │ │ │ ├── radio-button-description.tsx
│ │ │ │ │ │ ├── search-description.tsx
│ │ │ │ │ │ ├── shadow-description/
│ │ │ │ │ │ │ ├── shadow-description.module.scss
│ │ │ │ │ │ │ └── shadow-description.tsx
│ │ │ │ │ │ ├── skeleton-description.tsx
│ │ │ │ │ │ ├── slider-description.tsx
│ │ │ │ │ │ ├── spacing-description/
│ │ │ │ │ │ │ ├── spacing-description.module.scss
│ │ │ │ │ │ │ └── spacing-description.tsx
│ │ │ │ │ │ ├── spinner-description.tsx
│ │ │ │ │ │ ├── split-button-description.tsx
│ │ │ │ │ │ ├── steps-description.tsx
│ │ │ │ │ │ ├── tab-description.tsx
│ │ │ │ │ │ ├── table-description.tsx
│ │ │ │ │ │ ├── text-description.tsx
│ │ │ │ │ │ ├── text-field-description.tsx
│ │ │ │ │ │ ├── tipseen-description.tsx
│ │ │ │ │ │ ├── toast-description.tsx
│ │ │ │ │ │ ├── toggle-description.tsx
│ │ │ │ │ │ ├── tooltip-description.tsx
│ │ │ │ │ │ ├── typography-description/
│ │ │ │ │ │ │ └── typography-description.tsx
│ │ │ │ │ │ ├── virtualized-grid-description/
│ │ │ │ │ │ │ ├── virtualized-grid-description.jsx
│ │ │ │ │ │ │ └── virtualizedGrid.module.scss
│ │ │ │ │ │ └── virtualized-list-description/
│ │ │ │ │ │ ├── virtualized-list-description.jsx
│ │ │ │ │ │ └── virtualized-list.module.scss
│ │ │ │ │ └── related-components-decorator.jsx
│ │ │ │ └── toc/
│ │ │ │ ├── TableOfContents.module.scss
│ │ │ │ └── TableOfContents.tsx
│ │ │ ├── pages/
│ │ │ │ ├── catalog/
│ │ │ │ │ ├── Catalog.stories.templates.tsx
│ │ │ │ │ ├── EmptyState/
│ │ │ │ │ │ ├── CatalogEmptyState.module.scss
│ │ │ │ │ │ └── CatalogEmptyState.tsx
│ │ │ │ │ ├── catalog.mdx
│ │ │ │ │ └── catalog.stories.tsx
│ │ │ │ ├── changelog/
│ │ │ │ │ └── changelog.mdx
│ │ │ │ ├── components/
│ │ │ │ │ ├── Accordion/
│ │ │ │ │ │ ├── Accordion.interactions.ts
│ │ │ │ │ │ ├── Accordion.mdx
│ │ │ │ │ │ └── Accordion.stories.tsx
│ │ │ │ │ ├── AlertBanner/
│ │ │ │ │ │ ├── AlertBanner.mdx
│ │ │ │ │ │ ├── AlertBanner.stories.helpers.tsx
│ │ │ │ │ │ └── AlertBanner.stories.tsx
│ │ │ │ │ ├── AttentionBox/
│ │ │ │ │ │ ├── AttentionBox.mdx
│ │ │ │ │ │ └── AttentionBox.stories.tsx
│ │ │ │ │ ├── Avatar/
│ │ │ │ │ │ ├── Avatar.mdx
│ │ │ │ │ │ ├── Avatar.stories.helpers.tsx
│ │ │ │ │ │ ├── Avatar.stories.scss
│ │ │ │ │ │ └── Avatar.stories.tsx
│ │ │ │ │ ├── AvatarGroup/
│ │ │ │ │ │ ├── AvatarGroup.mdx
│ │ │ │ │ │ └── AvatarGroup.stories.tsx
│ │ │ │ │ ├── Badge/
│ │ │ │ │ │ ├── Badge.mdx
│ │ │ │ │ │ └── Badge.stories.tsx
│ │ │ │ │ ├── BaseInput/
│ │ │ │ │ │ └── BaseInput.stories.tsx
│ │ │ │ │ ├── BaseList/
│ │ │ │ │ │ └── BaseList.stories.tsx
│ │ │ │ │ ├── Box/
│ │ │ │ │ │ ├── Box.mdx
│ │ │ │ │ │ ├── Box.stories.helpers.tsx
│ │ │ │ │ │ └── Box.stories.tsx
│ │ │ │ │ ├── BreadcrumbsBar/
│ │ │ │ │ │ ├── BreadcrumbItem.mdx
│ │ │ │ │ │ ├── BreadcrumbItem.stories.scss
│ │ │ │ │ │ ├── BreadcrumbItem.stories.tsx
│ │ │ │ │ │ ├── BreadcrumbsBar.mdx
│ │ │ │ │ │ ├── BreadcrumbsBar.stories.helpers.tsx
│ │ │ │ │ │ ├── BreadcrumbsBar.stories.module.scss
│ │ │ │ │ │ └── BreadcrumbsBar.stories.tsx
│ │ │ │ │ ├── Button/
│ │ │ │ │ │ ├── Button.mdx
│ │ │ │ │ │ ├── Button.stories.helpers.tsx
│ │ │ │ │ │ └── Button.stories.tsx
│ │ │ │ │ ├── ButtonGroup/
│ │ │ │ │ │ ├── ButtonGroup.mdx
│ │ │ │ │ │ ├── ButtonGroup.stories.helpers.tsx
│ │ │ │ │ │ ├── ButtonGroup.stories.tsx
│ │ │ │ │ │ └── assets/
│ │ │ │ │ │ └── Desktop.tsx
│ │ │ │ │ ├── Checkbox/
│ │ │ │ │ │ ├── Checkbox.mdx
│ │ │ │ │ │ ├── Checkbox.stories.helpers.tsx
│ │ │ │ │ │ ├── Checkbox.stories.scss
│ │ │ │ │ │ └── Checkbox.stories.tsx
│ │ │ │ │ ├── Chips/
│ │ │ │ │ │ ├── Chips.mdx
│ │ │ │ │ │ ├── Chips.stories.helpers.tsx
│ │ │ │ │ │ └── Chips.stories.tsx
│ │ │ │ │ ├── Clickable/
│ │ │ │ │ │ ├── Clickable.interactions.ts
│ │ │ │ │ │ ├── Clickable.mdx
│ │ │ │ │ │ ├── Clickable.stories.helpers.tsx
│ │ │ │ │ │ └── Clickable.stories.tsx
│ │ │ │ │ ├── ColorPicker/
│ │ │ │ │ │ ├── ColorPicker.interactions.ts
│ │ │ │ │ │ ├── ColorPicker.mdx
│ │ │ │ │ │ └── ColorPicker.stories.tsx
│ │ │ │ │ ├── Combobox/
│ │ │ │ │ │ ├── Combobox.interactions.ts
│ │ │ │ │ │ ├── Combobox.mdx
│ │ │ │ │ │ ├── Combobox.stories.helpers.tsx
│ │ │ │ │ │ ├── Combobox.stories.tsx
│ │ │ │ │ │ └── combobox-migration-guide.mdx
│ │ │ │ │ ├── Counter/
│ │ │ │ │ │ ├── Counter.mdx
│ │ │ │ │ │ ├── Counter.stories.helpers.tsx
│ │ │ │ │ │ └── Counter.stories.tsx
│ │ │ │ │ ├── DatePicker/
│ │ │ │ │ │ ├── DatePicker.mdx
│ │ │ │ │ │ └── DatePicker.stories.tsx
│ │ │ │ │ ├── Dialog/
│ │ │ │ │ │ ├── Dialog.interactions.ts
│ │ │ │ │ │ ├── Dialog.mdx
│ │ │ │ │ │ ├── Dialog.stories.helpers.tsx
│ │ │ │ │ │ ├── Dialog.stories.tsx
│ │ │ │ │ │ ├── DialogContentContainer.mdx
│ │ │ │ │ │ └── DialogContentContainer.stories.tsx
│ │ │ │ │ ├── Divider/
│ │ │ │ │ │ ├── Divider.mdx
│ │ │ │ │ │ └── Divider.stories.tsx
│ │ │ │ │ ├── Dropdown/
│ │ │ │ │ │ ├── Dropdown.mdx
│ │ │ │ │ │ ├── DropdownBasicDropdown.mdx
│ │ │ │ │ │ ├── DropdownBasicDropdown.stories.tsx
│ │ │ │ │ │ ├── DropdownBoxMode.mdx
│ │ │ │ │ │ ├── DropdownBoxMode.stories.tsx
│ │ │ │ │ │ └── dropdown-migration-guide.mdx
│ │ │ │ │ ├── EditableHeading/
│ │ │ │ │ │ ├── EditableHeading.interactions.ts
│ │ │ │ │ │ ├── EditableHeading.mdx
│ │ │ │ │ │ ├── EditableHeading.stories.helpers.tsx
│ │ │ │ │ │ └── EditableHeading.stories.tsx
│ │ │ │ │ ├── EditableText/
│ │ │ │ │ │ ├── EditableText.interactions.ts
│ │ │ │ │ │ ├── EditableText.mdx
│ │ │ │ │ │ ├── EditableText.stories.helpers.tsx
│ │ │ │ │ │ └── EditableText.stories.tsx
│ │ │ │ │ ├── EmptyState/
│ │ │ │ │ │ ├── EmptyState.mdx
│ │ │ │ │ │ ├── EmptyState.stories.helpers.tsx
│ │ │ │ │ │ ├── EmptyState.stories.module.scss
│ │ │ │ │ │ └── EmptyState.stories.tsx
│ │ │ │ │ ├── ExpandCollapse/
│ │ │ │ │ │ ├── ExpandCollapse.mdx
│ │ │ │ │ │ ├── ExpandCollapse.stories.helpers.tsx
│ │ │ │ │ │ └── ExpandCollapse.stories.tsx
│ │ │ │ │ ├── Flex/
│ │ │ │ │ │ ├── Flex.mdx
│ │ │ │ │ │ └── Flex.stories.tsx
│ │ │ │ │ ├── GridKeyboardNavigationContext/
│ │ │ │ │ │ ├── useGridKeyboardNavigationContext.interactions.ts
│ │ │ │ │ │ ├── useGridKeyboardNavigationContext.mdx
│ │ │ │ │ │ ├── useGridKeyboardNavigationContext.stories.helpers.tsx
│ │ │ │ │ │ ├── useGridKeyboardNavigationContext.stories.scss
│ │ │ │ │ │ └── useGridKeyboardNavigationContext.stories.tsx
│ │ │ │ │ ├── Heading/
│ │ │ │ │ │ ├── Heading.interactions.ts
│ │ │ │ │ │ ├── Heading.mdx
│ │ │ │ │ │ ├── Heading.stories.helpers.tsx
│ │ │ │ │ │ └── Heading.stories.tsx
│ │ │ │ │ ├── HiddenText/
│ │ │ │ │ │ ├── HiddenText.mdx
│ │ │ │ │ │ └── HiddenText.stories.tsx
│ │ │ │ │ ├── Icon/
│ │ │ │ │ │ ├── Icon.mdx
│ │ │ │ │ │ └── Icon.stories.tsx
│ │ │ │ │ ├── IconButton/
│ │ │ │ │ │ ├── IconButton.mdx
│ │ │ │ │ │ ├── IconButton.stories.helpers.tsx
│ │ │ │ │ │ └── IconButton.stories.tsx
│ │ │ │ │ ├── Info/
│ │ │ │ │ │ ├── Info.mdx
│ │ │ │ │ │ ├── Info.stories.module.scss
│ │ │ │ │ │ └── Info.stories.tsx
│ │ │ │ │ ├── Label/
│ │ │ │ │ │ ├── Label.mdx
│ │ │ │ │ │ ├── Label.stories.helpers.tsx
│ │ │ │ │ │ └── Label.stories.tsx
│ │ │ │ │ ├── Link/
│ │ │ │ │ │ ├── Example.module.scss
│ │ │ │ │ │ ├── Example.tsx
│ │ │ │ │ │ ├── Link.mdx
│ │ │ │ │ │ ├── Link.stories.helpers.tsx
│ │ │ │ │ │ └── Link.stories.tsx
│ │ │ │ │ ├── List/
│ │ │ │ │ │ ├── List.mdx
│ │ │ │ │ │ ├── List.stories.helpers.tsx
│ │ │ │ │ │ ├── List.stories.tsx
│ │ │ │ │ │ ├── ListItem.mdx
│ │ │ │ │ │ ├── ListItem.stories.tsx
│ │ │ │ │ │ └── legacy/
│ │ │ │ │ │ ├── List.mdx
│ │ │ │ │ │ ├── List.stories.helpers.tsx
│ │ │ │ │ │ ├── List.stories.tsx
│ │ │ │ │ │ ├── ListItem.mdx
│ │ │ │ │ │ └── ListItem.stories.tsx
│ │ │ │ │ ├── Loader/
│ │ │ │ │ │ ├── Loader.mdx
│ │ │ │ │ │ ├── Loader.stories.helpers.tsx
│ │ │ │ │ │ └── Loader.stories.tsx
│ │ │ │ │ ├── Menu/
│ │ │ │ │ │ ├── Menu.interactions.ts
│ │ │ │ │ │ ├── Menu.mdx
│ │ │ │ │ │ ├── Menu.stories.helpers.tsx
│ │ │ │ │ │ ├── Menu.stories.tsx
│ │ │ │ │ │ ├── MenuDivider.mdx
│ │ │ │ │ │ ├── MenuDivider.stories.tsx
│ │ │ │ │ │ ├── MenuGridItem.mdx
│ │ │ │ │ │ ├── MenuGridItem.stories.helpers.tsx
│ │ │ │ │ │ ├── MenuGridItem.stories.scss
│ │ │ │ │ │ ├── MenuGridItem.stories.tsx
│ │ │ │ │ │ ├── MenuItem.mdx
│ │ │ │ │ │ ├── MenuItem.stories.helpers.tsx
│ │ │ │ │ │ ├── MenuItem.stories.tsx
│ │ │ │ │ │ ├── MenuItemButton.mdx
│ │ │ │ │ │ ├── MenuItemButton.stories.helpers.tsx
│ │ │ │ │ │ ├── MenuItemButton.stories.tsx
│ │ │ │ │ │ ├── MenuTitle.mdx
│ │ │ │ │ │ └── MenuTitle.stories.tsx
│ │ │ │ │ ├── MenuButton/
│ │ │ │ │ │ ├── MenuButton.mdx
│ │ │ │ │ │ └── MenuButton.stories.tsx
│ │ │ │ │ ├── Modal/
│ │ │ │ │ │ ├── Modal.mdx
│ │ │ │ │ │ ├── Modal.stories.helpers.tsx
│ │ │ │ │ │ ├── Modal.stories.module.scss
│ │ │ │ │ │ ├── ModalBasicLayout.mdx
│ │ │ │ │ │ ├── ModalBasicLayout.stories.helpers.tsx
│ │ │ │ │ │ ├── ModalBasicLayout.stories.tsx
│ │ │ │ │ │ ├── ModalMediaLayout.mdx
│ │ │ │ │ │ ├── ModalMediaLayout.stories.helpers.tsx
│ │ │ │ │ │ ├── ModalMediaLayout.stories.tsx
│ │ │ │ │ │ ├── ModalSideBySideLayout.mdx
│ │ │ │ │ │ ├── ModalSideBySideLayout.stories.helpers.tsx
│ │ │ │ │ │ └── ModalSideBySideLayout.stories.tsx
│ │ │ │ │ ├── MultiStepIndicator/
│ │ │ │ │ │ ├── MultiStepIndicator.mdx
│ │ │ │ │ │ ├── MultiStepIndicator.stories.helpers.tsx
│ │ │ │ │ │ └── MultiStepIndicator.stories.tsx
│ │ │ │ │ ├── NumberField/
│ │ │ │ │ │ ├── NumberField.mdx
│ │ │ │ │ │ └── NumberField.stories.tsx
│ │ │ │ │ ├── ProgressBars/
│ │ │ │ │ │ ├── ProgressBar.mdx
│ │ │ │ │ │ ├── ProgressBar.stories.helpers.tsx
│ │ │ │ │ │ └── ProgressBar.stories.tsx
│ │ │ │ │ ├── RadioButton/
│ │ │ │ │ │ ├── RadioButton.interactions.ts
│ │ │ │ │ │ ├── RadioButton.mdx
│ │ │ │ │ │ ├── RadioButton.stories.helpers.tsx
│ │ │ │ │ │ └── RadioButton.stories.tsx
│ │ │ │ │ ├── Search/
│ │ │ │ │ │ ├── Search.mdx
│ │ │ │ │ │ ├── Search.stories.module.scss
│ │ │ │ │ │ └── Search.stories.tsx
│ │ │ │ │ ├── Skeleton/
│ │ │ │ │ │ ├── Skeleton.mdx
│ │ │ │ │ │ ├── Skeleton.stories.helpers.tsx
│ │ │ │ │ │ └── Skeleton.stories.tsx
│ │ │ │ │ ├── Slider/
│ │ │ │ │ │ ├── Slider.interactions.ts
│ │ │ │ │ │ ├── Slider.mdx
│ │ │ │ │ │ ├── Slider.stories.helpers.tsx
│ │ │ │ │ │ └── Slider.stories.tsx
│ │ │ │ │ ├── SplitButton/
│ │ │ │ │ │ ├── SplitButton.mdx
│ │ │ │ │ │ ├── SplitButton.stories.helpers.tsx
│ │ │ │ │ │ └── SplitButton.stories.tsx
│ │ │ │ │ ├── Steps/
│ │ │ │ │ │ ├── Steps.mdx
│ │ │ │ │ │ ├── Steps.stories.helpers.tsx
│ │ │ │ │ │ └── Steps.stories.tsx
│ │ │ │ │ ├── Table/
│ │ │ │ │ │ ├── Table.mdx
│ │ │ │ │ │ ├── Table.stories.helpers.tsx
│ │ │ │ │ │ └── Table.stories.tsx
│ │ │ │ │ ├── Tabs/
│ │ │ │ │ │ ├── Tabs.mdx
│ │ │ │ │ │ ├── Tabs.stories.helpers.tsx
│ │ │ │ │ │ └── Tabs.stories.tsx
│ │ │ │ │ ├── Text/
│ │ │ │ │ │ ├── Text.interactions.ts
│ │ │ │ │ │ ├── Text.mdx
│ │ │ │ │ │ ├── Text.stories.helpers.tsx
│ │ │ │ │ │ └── Text.stories.tsx
│ │ │ │ │ ├── TextArea/
│ │ │ │ │ │ ├── TextArea.mdx
│ │ │ │ │ │ └── TextArea.stories.tsx
│ │ │ │ │ ├── TextField/
│ │ │ │ │ │ ├── TextField.mdx
│ │ │ │ │ │ └── TextField.stories.tsx
│ │ │ │ │ ├── TextWithHighlight/
│ │ │ │ │ │ ├── TextWithHighlight.mdx
│ │ │ │ │ │ └── TextWithHighlight.stories.tsx
│ │ │ │ │ ├── ThemeProvider/
│ │ │ │ │ │ ├── ThemeProvider.interactions.ts
│ │ │ │ │ │ ├── ThemeProvider.mdx
│ │ │ │ │ │ ├── ThemeProvider.stories.helpers.tsx
│ │ │ │ │ │ ├── ThemeProvider.stories.tsx
│ │ │ │ │ │ └── product-themes/
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ ├── product-theme-1.ts
│ │ │ │ │ │ ├── product-theme-2.ts
│ │ │ │ │ │ ├── product-theme-3.ts
│ │ │ │ │ │ └── product-theme-4.ts
│ │ │ │ │ ├── Tipseen/
│ │ │ │ │ │ ├── Tipseen.mdx
│ │ │ │ │ │ ├── Tipseen.stories.helpers.tsx
│ │ │ │ │ │ └── Tipseen.stories.tsx
│ │ │ │ │ ├── Toast/
│ │ │ │ │ │ ├── Toast.mdx
│ │ │ │ │ │ ├── Toast.stories.helpers.tsx
│ │ │ │ │ │ └── Toast.stories.tsx
│ │ │ │ │ ├── Toggle/
│ │ │ │ │ │ ├── Toggle.mdx
│ │ │ │ │ │ ├── Toggle.stories.helpers.tsx
│ │ │ │ │ │ └── Toggle.stories.tsx
│ │ │ │ │ ├── Tooltip/
│ │ │ │ │ │ ├── Tooltip.interactions.ts
│ │ │ │ │ │ ├── Tooltip.mdx
│ │ │ │ │ │ ├── Tooltip.stories.helpers.tsx
│ │ │ │ │ │ └── Tooltip.stories.tsx
│ │ │ │ │ ├── VirtualizedGrid/
│ │ │ │ │ │ ├── VirtualizedGrid.mdx
│ │ │ │ │ │ ├── VirtualizedGrid.stories.helpers.tsx
│ │ │ │ │ │ └── VirtualizedGrid.stories.tsx
│ │ │ │ │ └── VirtualizedList/
│ │ │ │ │ ├── VirtualizedList.mdx
│ │ │ │ │ ├── VirtualizedList.stories.helpers.tsx
│ │ │ │ │ └── VirtualizedList.stories.tsx
│ │ │ │ ├── contributing/
│ │ │ │ │ └── contributing.mdx
│ │ │ │ ├── foundations/
│ │ │ │ │ ├── accessibility/
│ │ │ │ │ │ ├── accessibility.mdx
│ │ │ │ │ │ ├── accessibility.stories.helpers.tsx
│ │ │ │ │ │ ├── accessibility.stories.module.scss
│ │ │ │ │ │ ├── assets/
│ │ │ │ │ │ │ └── index.ts
│ │ │ │ │ │ └── principles/
│ │ │ │ │ │ ├── principle.scss
│ │ │ │ │ │ ├── principle.tsx
│ │ │ │ │ │ ├── principlesAccesability.scss
│ │ │ │ │ │ └── principlesAccesability.tsx
│ │ │ │ │ ├── colors/
│ │ │ │ │ │ ├── Colors.mdx
│ │ │ │ │ │ ├── assets/
│ │ │ │ │ │ │ └── index.ts
│ │ │ │ │ │ ├── background-colors/
│ │ │ │ │ │ │ └── background-colors.tsx
│ │ │ │ │ │ ├── border-colors/
│ │ │ │ │ │ │ └── border-colors.tsx
│ │ │ │ │ │ ├── colors-description/
│ │ │ │ │ │ │ └── colors-description.tsx
│ │ │ │ │ │ ├── colors.module.scss
│ │ │ │ │ │ ├── colors.stories.tsx
│ │ │ │ │ │ ├── content-color-cell/
│ │ │ │ │ │ │ ├── content-color-cell.module.scss
│ │ │ │ │ │ │ └── content-color-cell.tsx
│ │ │ │ │ │ ├── content-color-row/
│ │ │ │ │ │ │ └── content-color-row.tsx
│ │ │ │ │ │ ├── content-colors/
│ │ │ │ │ │ │ ├── content-colors.module.scss
│ │ │ │ │ │ │ └── content-colors.tsx
│ │ │ │ │ │ ├── semantic-colors/
│ │ │ │ │ │ │ └── semantic-colors.tsx
│ │ │ │ │ │ └── text-colors/
│ │ │ │ │ │ └── text-colors.jsx
│ │ │ │ │ ├── motion/
│ │ │ │ │ │ ├── animation-information-box/
│ │ │ │ │ │ │ ├── animation-information-box.module.scss
│ │ │ │ │ │ │ └── animation-information-box.tsx
│ │ │ │ │ │ ├── animation-overviews/
│ │ │ │ │ │ │ ├── animation-overviews.module.scss
│ │ │ │ │ │ │ └── animation-overviews.tsx
│ │ │ │ │ │ ├── animation-types/
│ │ │ │ │ │ │ ├── animation-types.module.scss
│ │ │ │ │ │ │ └── animation-types.tsx
│ │ │ │ │ │ ├── assets/
│ │ │ │ │ │ │ └── index.ts
│ │ │ │ │ │ ├── duration-expressive-tokens/
│ │ │ │ │ │ │ ├── duaration-expressive-tokens.module.scss
│ │ │ │ │ │ │ └── duration-expressive-tokens.tsx
│ │ │ │ │ │ ├── duration-productive-tokens/
│ │ │ │ │ │ │ ├── duaration-productive-tokens.module.scss
│ │ │ │ │ │ │ └── duration-productive-tokens.tsx
│ │ │ │ │ │ ├── duration-token-table/
│ │ │ │ │ │ │ └── duration-token-table.tsx
│ │ │ │ │ │ ├── easing-overview/
│ │ │ │ │ │ │ ├── easing-overview.module.scss
│ │ │ │ │ │ │ └── easing-overview.tsx
│ │ │ │ │ │ ├── easing-overviews/
│ │ │ │ │ │ │ ├── easing-overviews.module.scss
│ │ │ │ │ │ │ └── easing-overviews.tsx
│ │ │ │ │ │ ├── easing-token-table/
│ │ │ │ │ │ │ └── easing-token-table.tsx
│ │ │ │ │ │ ├── motion.mdx
│ │ │ │ │ │ └── token-Information-box/
│ │ │ │ │ │ └── token-information-box.tsx
│ │ │ │ │ ├── round-corners/
│ │ │ │ │ │ ├── corners-settings/
│ │ │ │ │ │ │ ├── corner-settings.scss
│ │ │ │ │ │ │ └── corner-settings.tsx
│ │ │ │ │ │ ├── round-corners.mdx
│ │ │ │ │ │ ├── round-corners.stories.module.scss
│ │ │ │ │ │ └── rounded-corner/
│ │ │ │ │ │ ├── rounded-corner.module.scss
│ │ │ │ │ │ └── rounded-corner.tsx
│ │ │ │ │ ├── shadow/
│ │ │ │ │ │ ├── assets/
│ │ │ │ │ │ │ └── index.ts
│ │ │ │ │ │ ├── card-shadow-example/
│ │ │ │ │ │ │ ├── card-shadow-example.module.scss
│ │ │ │ │ │ │ └── card-shadow-example.tsx
│ │ │ │ │ │ ├── drag-shadow-example/
│ │ │ │ │ │ │ ├── drag-shadow-example.module.scss
│ │ │ │ │ │ │ └── drag-shadow-example.tsx
│ │ │ │ │ │ ├── shadow-levels/
│ │ │ │ │ │ │ ├── shadow-example/
│ │ │ │ │ │ │ │ ├── shadow-example.module.scss
│ │ │ │ │ │ │ │ └── shadow-example.tsx
│ │ │ │ │ │ │ ├── shadow-levels.scss
│ │ │ │ │ │ │ └── shadow-levels.tsx
│ │ │ │ │ │ ├── shadow.mdx
│ │ │ │ │ │ └── shadow.scss
│ │ │ │ │ ├── spacing/
│ │ │ │ │ │ ├── Spacing.mdx
│ │ │ │ │ │ ├── assets/
│ │ │ │ │ │ │ └── index.ts
│ │ │ │ │ │ ├── spacing-sizes/
│ │ │ │ │ │ │ └── spacing-sizes.tsx
│ │ │ │ │ │ ├── spacing-token-name/
│ │ │ │ │ │ │ ├── spacing-token-name.tsx
│ │ │ │ │ │ │ └── spacing-usage-examples.module.scss
│ │ │ │ │ │ ├── spacing-usage-examples/
│ │ │ │ │ │ │ ├── spacing-usage-examples.module.scss
│ │ │ │ │ │ │ └── spacing-usage-examples.tsx
│ │ │ │ │ │ ├── spacing.module.scss
│ │ │ │ │ │ └── spacing.stories.tsx
│ │ │ │ │ ├── typography/
│ │ │ │ │ │ ├── assets/
│ │ │ │ │ │ │ └── index.ts
│ │ │ │ │ │ ├── examples-table/
│ │ │ │ │ │ │ ├── example-table.module.scss
│ │ │ │ │ │ │ └── examples-table.tsx
│ │ │ │ │ │ ├── typograpghy.stories.helpers.tsx
│ │ │ │ │ │ ├── typography.mdx
│ │ │ │ │ │ └── typography.module.scss
│ │ │ │ │ └── ux-writing-handbook/
│ │ │ │ │ ├── assets/
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── ux-writing-handbook.mdx
│ │ │ │ │ ├── ux-writing-handbook.stories.module.scss
│ │ │ │ │ └── values/
│ │ │ │ │ ├── rulesUXWriting.tsx
│ │ │ │ │ ├── values.module.scss
│ │ │ │ │ ├── values.tsx
│ │ │ │ │ ├── valuesUXWriting.module.scss
│ │ │ │ │ └── valuesUXWriting.tsx
│ │ │ │ ├── getting-started/
│ │ │ │ │ └── getting-started.mdx
│ │ │ │ ├── hooks/
│ │ │ │ │ ├── useActiveDescendantListFocus/
│ │ │ │ │ │ ├── useActiveDescendantListFocus.interactions.ts
│ │ │ │ │ │ ├── useActiveDescendantListFocus.mdx
│ │ │ │ │ │ ├── useActiveDescendantListFocus.module.scss
│ │ │ │ │ │ └── useActiveDescendantListFocus.stories.tsx
│ │ │ │ │ ├── useAfterFirstRender/
│ │ │ │ │ │ ├── useAfterFirstRender.mdx
│ │ │ │ │ │ └── useAfterFirstRender.stories.tsx
│ │ │ │ │ ├── useClickOutside/
│ │ │ │ │ │ ├── useClickOutside.mdx
│ │ │ │ │ │ └── useClickOutside.stories.tsx
│ │ │ │ │ ├── useClickableProps/
│ │ │ │ │ │ ├── useClickableProps.mdx
│ │ │ │ │ │ ├── useClickableProps.stories.helpers.tsx
│ │ │ │ │ │ ├── useClickableProps.stories.scss
│ │ │ │ │ │ └── useClickableProps.stories.tsx
│ │ │ │ │ ├── useDebounceEvent/
│ │ │ │ │ │ ├── useDebounceEvent.mdx
│ │ │ │ │ │ └── useDebounceEvent.stories.tsx
│ │ │ │ │ ├── useEventListener/
│ │ │ │ │ │ ├── useEventListener.mdx
│ │ │ │ │ │ └── useEventListener.stories.tsx
│ │ │ │ │ ├── useGridKeyboardNavigation/
│ │ │ │ │ │ ├── useGridKeyboardNavigation.mdx
│ │ │ │ │ │ ├── useGridKeyboardNavigation.stories.scss
│ │ │ │ │ │ └── useGridKeyboardNavigation.stories.tsx
│ │ │ │ │ ├── useHover/
│ │ │ │ │ │ ├── useHover.mdx
│ │ │ │ │ │ └── useHover.stories.tsx
│ │ │ │ │ ├── useIsOverflowing/
│ │ │ │ │ │ ├── useIsOverflowing.mdx
│ │ │ │ │ │ ├── useIsOverflowing.stories.helpers.tsx
│ │ │ │ │ │ ├── useIsOverflowing.stories.module.scss
│ │ │ │ │ │ └── useIsOverflowing.stories.tsx
│ │ │ │ │ ├── useKeyEvent/
│ │ │ │ │ │ ├── useKeyEvent.mdx
│ │ │ │ │ │ └── useKeyEvent.stories.tsx
│ │ │ │ │ ├── useMediaQuery/
│ │ │ │ │ │ ├── useMediaQuery.mdx
│ │ │ │ │ │ └── useMediaQuery.stories.tsx
│ │ │ │ │ ├── usePrevious/
│ │ │ │ │ │ ├── usePrevious.mdx
│ │ │ │ │ │ ├── usePrevious.stories.module.scss
│ │ │ │ │ │ └── usePrevious.stories.tsx
│ │ │ │ │ ├── useSetFocus/
│ │ │ │ │ │ ├── useSetFocus.mdx
│ │ │ │ │ │ ├── useSetFocus.stories.module.scss
│ │ │ │ │ │ └── useSetFocus.stories.tsx
│ │ │ │ │ ├── useSwitch/
│ │ │ │ │ │ ├── useSwitch.mdx
│ │ │ │ │ │ └── useSwitch.stories.tsx
│ │ │ │ │ ├── useTimeout/
│ │ │ │ │ │ ├── useTimeout.mdx
│ │ │ │ │ │ └── useTimeout.stories.tsx
│ │ │ │ │ ├── useVibeMediaQuery/
│ │ │ │ │ │ ├── useVibeMediaQuery.mdx
│ │ │ │ │ │ ├── useVibeMediaQuery.stories.helpers.tsx
│ │ │ │ │ │ └── useVibeMediaQuery.stories.tsx
│ │ │ │ │ └── useWizard/
│ │ │ │ │ ├── useWizard.mdx
│ │ │ │ │ ├── useWizard.stories.module.scss
│ │ │ │ │ └── useWizard.stories.tsx
│ │ │ │ ├── mcp/
│ │ │ │ │ └── mcp.mdx
│ │ │ │ ├── migration-guide/
│ │ │ │ │ ├── DiffCodeBlock.tsx
│ │ │ │ │ ├── vibe-3-changelog.md
│ │ │ │ │ ├── vibe-4-changelog.md
│ │ │ │ │ ├── vibe-4-migration-guide.mdx
│ │ │ │ │ └── vibe2-migration-guide.md
│ │ │ │ ├── playground/
│ │ │ │ │ ├── Playground.stories.ts
│ │ │ │ │ ├── playground-helpers.ts
│ │ │ │ │ └── react-docgen-output.json
│ │ │ │ └── welcome/
│ │ │ │ ├── EntranceAnimation.tsx
│ │ │ │ ├── Section.module.scss
│ │ │ │ ├── Section.tsx
│ │ │ │ ├── Title.module.scss
│ │ │ │ ├── Title.tsx
│ │ │ │ ├── banner/
│ │ │ │ │ ├── Vibe4Banner.module.scss
│ │ │ │ │ └── Vibe4Banner.tsx
│ │ │ │ ├── contributions/
│ │ │ │ │ ├── Contributor.module.scss
│ │ │ │ │ ├── Contributor.tsx
│ │ │ │ │ ├── Contributors.module.scss
│ │ │ │ │ ├── Contributors.tsx
│ │ │ │ │ ├── ContributorsList.tsx
│ │ │ │ │ ├── Founders.module.scss
│ │ │ │ │ ├── Founders.tsx
│ │ │ │ │ ├── Team.module.scss
│ │ │ │ │ ├── Team.tsx
│ │ │ │ │ ├── TeamMember.module.scss
│ │ │ │ │ ├── TeamMember.tsx
│ │ │ │ │ └── useContributors.ts
│ │ │ │ ├── hero/
│ │ │ │ │ ├── FloatingObjects.module.scss
│ │ │ │ │ ├── FloatingObjects.tsx
│ │ │ │ │ ├── Hero.module.scss
│ │ │ │ │ ├── Hero.tsx
│ │ │ │ │ ├── ResourceButton.module.scss
│ │ │ │ │ ├── ResourceButton.tsx
│ │ │ │ │ └── icons/
│ │ │ │ │ ├── FigmaIcon.tsx
│ │ │ │ │ ├── GitHubIcon.tsx
│ │ │ │ │ ├── HeroAbstractFluidShape.tsx
│ │ │ │ │ ├── HeroArrowCrossShape.tsx
│ │ │ │ │ ├── HeroCircleShape.tsx
│ │ │ │ │ ├── HeroCircleShapeTeal.tsx
│ │ │ │ │ ├── HeroCloverShape.tsx
│ │ │ │ │ ├── HeroCloverShapeGreen.tsx
│ │ │ │ │ └── HeroHeartShape.tsx
│ │ │ │ ├── resources/
│ │ │ │ │ ├── ResourceCard.module.scss
│ │ │ │ │ ├── ResourceCard.tsx
│ │ │ │ │ ├── Resources.module.scss
│ │ │ │ │ ├── Resources.tsx
│ │ │ │ │ └── icons/
│ │ │ │ │ ├── IconComponents.tsx
│ │ │ │ │ ├── IconComponentsColored.tsx
│ │ │ │ │ ├── IconFoundations.tsx
│ │ │ │ │ ├── IconFoundationsColored.tsx
│ │ │ │ │ ├── IconPatterns.tsx
│ │ │ │ │ └── IconPatternsColored.tsx
│ │ │ │ └── welcome.mdx
│ │ │ └── utils/
│ │ │ └── createStoryMetaSettingsDecorator.ts
│ │ ├── tsconfig.base.json
│ │ ├── tsconfig.json
│ │ ├── tsconfig.storybook.json
│ │ └── vite.config.ts
│ ├── hooks/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ ├── rollup.config.mjs
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ ├── types/
│ │ │ │ └── files.d.ts
│ │ │ ├── useClickOutside/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── useClickOutside.test.ts
│ │ │ │ └── index.ts
│ │ │ ├── useIsOverflowing/
│ │ │ │ └── index.ts
│ │ │ └── useResizeObserver/
│ │ │ └── index.ts
│ │ ├── tsconfig.json
│ │ ├── vitest.config.mjs
│ │ └── vitest.setup.mjs
│ ├── icons/
│ │ ├── .cursor/
│ │ │ └── rules/
│ │ │ ├── add-icon-from-monday-task.mdc
│ │ │ └── icon-generation-process.mdc
│ │ ├── .eslintrc.json
│ │ ├── .gitignore
│ │ ├── .prettierignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── plop/
│ │ │ └── icon/
│ │ │ ├── icon-metadata.txt
│ │ │ └── index.js
│ │ ├── plopfile.js
│ │ ├── rollup.config.js
│ │ ├── scripts/
│ │ │ ├── __tests__/
│ │ │ │ ├── __snapshots__/
│ │ │ │ │ └── validate-icons-colors.test.ts.snap
│ │ │ │ └── validate-icons-colors.test.ts
│ │ │ ├── generate-lazy-icons.js
│ │ │ ├── generate-meta.js
│ │ │ ├── generate-svg-index.js
│ │ │ ├── metadata-util.js
│ │ │ ├── utils.js
│ │ │ ├── validate-icons-colors.js
│ │ │ └── validate-meta.js
│ │ ├── src/
│ │ │ ├── iconsMetaData.ts
│ │ │ ├── react/
│ │ │ │ ├── API.tsx
│ │ │ │ ├── Academy.tsx
│ │ │ │ ├── Activity.tsx
│ │ │ │ ├── Add.tsx
│ │ │ │ ├── AddNewDoc.tsx
│ │ │ │ ├── AddSmall.tsx
│ │ │ │ ├── AddToTeam.tsx
│ │ │ │ ├── AddUpdate.tsx
│ │ │ │ ├── Alert.tsx
│ │ │ │ ├── AlignCenter.tsx
│ │ │ │ ├── AlignLeft.tsx
│ │ │ │ ├── AlignRight.tsx
│ │ │ │ ├── Announcement.tsx
│ │ │ │ ├── Apps.tsx
│ │ │ │ ├── Archive.tsx
│ │ │ │ ├── Attach.tsx
│ │ │ │ ├── Baseline.tsx
│ │ │ │ ├── Basic.tsx
│ │ │ │ ├── Battery.tsx
│ │ │ │ ├── BlockQuote.tsx
│ │ │ │ ├── Board.tsx
│ │ │ │ ├── BoardPrivate.tsx
│ │ │ │ ├── BoardShareable.tsx
│ │ │ │ ├── BoardTemplate.tsx
│ │ │ │ ├── Bold.tsx
│ │ │ │ ├── Bolt.tsx
│ │ │ │ ├── Bookmark.tsx
│ │ │ │ ├── Broadcast.tsx
│ │ │ │ ├── Broom.tsx
│ │ │ │ ├── Bug.tsx
│ │ │ │ ├── Bullet.tsx
│ │ │ │ ├── Bullets.tsx
│ │ │ │ ├── Bulllet.tsx
│ │ │ │ ├── Calendar.tsx
│ │ │ │ ├── Chart.tsx
│ │ │ │ ├── Check.tsx
│ │ │ │ ├── CheckList.tsx
│ │ │ │ ├── Checkbox.tsx
│ │ │ │ ├── ClassicFolder.tsx
│ │ │ │ ├── Clear.tsx
│ │ │ │ ├── Clipboard.tsx
│ │ │ │ ├── Close.tsx
│ │ │ │ ├── CloseMedium.tsx
│ │ │ │ ├── CloseRound.tsx
│ │ │ │ ├── CloseSmall.tsx
│ │ │ │ ├── Code.tsx
│ │ │ │ ├── Collapse.tsx
│ │ │ │ ├── CollapseHorizontally.tsx
│ │ │ │ ├── CollapseRound.tsx
│ │ │ │ ├── Column.tsx
│ │ │ │ ├── Comment.tsx
│ │ │ │ ├── Completed.tsx
│ │ │ │ ├── Connect.tsx
│ │ │ │ ├── ConnectedDoc.tsx
│ │ │ │ ├── ContentDirectory.tsx
│ │ │ │ ├── ConvertToItem.tsx
│ │ │ │ ├── ConvertToSubitem.tsx
│ │ │ │ ├── Counter.tsx
│ │ │ │ ├── Country.tsx
│ │ │ │ ├── CreditCard.tsx
│ │ │ │ ├── Custom.tsx
│ │ │ │ ├── Cut.tsx
│ │ │ │ ├── Dashboard.tsx
│ │ │ │ ├── DashboardPrivate.tsx
│ │ │ │ ├── Deactivate.tsx
│ │ │ │ ├── Delete.tsx
│ │ │ │ ├── Dependency.tsx
│ │ │ │ ├── Description.tsx
│ │ │ │ ├── DisabledUser.tsx
│ │ │ │ ├── Divider.tsx
│ │ │ │ ├── Doc.tsx
│ │ │ │ ├── DocPrivate.tsx
│ │ │ │ ├── DocShareable.tsx
│ │ │ │ ├── DocTemplate.tsx
│ │ │ │ ├── DoubleCheck.tsx
│ │ │ │ ├── Downgrade.tsx
│ │ │ │ ├── Download.tsx
│ │ │ │ ├── Drag.tsx
│ │ │ │ ├── Dropdown.tsx
│ │ │ │ ├── DropdownChevronDown.tsx
│ │ │ │ ├── DropdownChevronLeft.tsx
│ │ │ │ ├── DropdownChevronRight.tsx
│ │ │ │ ├── DropdownChevronUp.tsx
│ │ │ │ ├── DueDate.tsx
│ │ │ │ ├── Duplicate.tsx
│ │ │ │ ├── Edit.tsx
│ │ │ │ ├── Education.tsx
│ │ │ │ ├── Email.tsx
│ │ │ │ ├── Embed.tsx
│ │ │ │ ├── Emoji.tsx
│ │ │ │ ├── Enter.tsx
│ │ │ │ ├── EnterArrow.tsx
│ │ │ │ ├── Erase.tsx
│ │ │ │ ├── Event.tsx
│ │ │ │ ├── Expand.tsx
│ │ │ │ ├── ExternalPage.tsx
│ │ │ │ ├── Favorite.tsx
│ │ │ │ ├── Feedback.tsx
│ │ │ │ ├── File.tsx
│ │ │ │ ├── Files.tsx
│ │ │ │ ├── Filter.tsx
│ │ │ │ ├── Folder.tsx
│ │ │ │ ├── Form.tsx
│ │ │ │ ├── Formula.tsx
│ │ │ │ ├── Forum.tsx
│ │ │ │ ├── Forward.tsx
│ │ │ │ ├── Fullscreen.tsx
│ │ │ │ ├── FullscreenClose.tsx
│ │ │ │ ├── Gallery.tsx
│ │ │ │ ├── Gantt.tsx
│ │ │ │ ├── Gif.tsx
│ │ │ │ ├── Globe.tsx
│ │ │ │ ├── Graph.tsx
│ │ │ │ ├── Group.tsx
│ │ │ │ ├── Guest.tsx
│ │ │ │ ├── Health.tsx
│ │ │ │ ├── Heart.tsx
│ │ │ │ ├── Help.tsx
│ │ │ │ ├── Hide.tsx
│ │ │ │ ├── Highlight.tsx
│ │ │ │ ├── HighlightColorBucket.tsx
│ │ │ │ ├── Home.tsx
│ │ │ │ ├── IPRestrictions.tsx
│ │ │ │ ├── Idea.tsx
│ │ │ │ ├── Image.tsx
│ │ │ │ ├── Inbox.tsx
│ │ │ │ ├── Info.tsx
│ │ │ │ ├── Integrations.tsx
│ │ │ │ ├── Invite.tsx
│ │ │ │ ├── Italic.tsx
│ │ │ │ ├── Item.tsx
│ │ │ │ ├── ItemDefaultValues.tsx
│ │ │ │ ├── ItemHeightDouble.tsx
│ │ │ │ ├── ItemHeightSingle.tsx
│ │ │ │ ├── ItemHeightTriple.tsx
│ │ │ │ ├── Key.tsx
│ │ │ │ ├── Keyboard.tsx
│ │ │ │ ├── Labs.tsx
│ │ │ │ ├── Launch.tsx
│ │ │ │ ├── Layout.tsx
│ │ │ │ ├── LearnMore.tsx
│ │ │ │ ├── Lines.tsx
│ │ │ │ ├── Link.tsx
│ │ │ │ ├── Location.tsx
│ │ │ │ ├── Locked.tsx
│ │ │ │ ├── LogIn.tsx
│ │ │ │ ├── LogOut.tsx
│ │ │ │ ├── LongText.tsx
│ │ │ │ ├── Mention.tsx
│ │ │ │ ├── Menu.tsx
│ │ │ │ ├── Microphone.tsx
│ │ │ │ ├── Minimize.tsx
│ │ │ │ ├── MinusSmall.tsx
│ │ │ │ ├── Mirror.tsx
│ │ │ │ ├── Mobile.tsx
│ │ │ │ ├── MondayDoc.tsx
│ │ │ │ ├── MondayLogoOutline.tsx
│ │ │ │ ├── Moon.tsx
│ │ │ │ ├── MoreActions.tsx
│ │ │ │ ├── MoreBelow.tsx
│ │ │ │ ├── MoreBelowFilled.tsx
│ │ │ │ ├── Move.tsx
│ │ │ │ ├── MoveArrowDown.tsx
│ │ │ │ ├── MoveArrowLeft.tsx
│ │ │ │ ├── MoveArrowLeftDouble.tsx
│ │ │ │ ├── MoveArrowLeftNarrow.tsx
│ │ │ │ ├── MoveArrowRight.tsx
│ │ │ │ ├── MoveArrowRightNarrow.tsx
│ │ │ │ ├── MoveArrowUp.tsx
│ │ │ │ ├── Mute.tsx
│ │ │ │ ├── MyWeek.tsx
│ │ │ │ ├── NavigationArrow.tsx
│ │ │ │ ├── NavigationChevronDown.tsx
│ │ │ │ ├── NavigationChevronLeft.tsx
│ │ │ │ ├── NavigationChevronRight.tsx
│ │ │ │ ├── NavigationChevronUp.tsx
│ │ │ │ ├── NavigationDoubleChevronLeft.tsx
│ │ │ │ ├── NewTab.tsx
│ │ │ │ ├── Night.tsx
│ │ │ │ ├── NoColor.tsx
│ │ │ │ ├── Note.tsx
│ │ │ │ ├── NotificationChecked.tsx
│ │ │ │ ├── Notifications.tsx
│ │ │ │ ├── NotificationsMuted.tsx
│ │ │ │ ├── Numbers.tsx
│ │ │ │ ├── Offline.tsx
│ │ │ │ ├── Open.tsx
│ │ │ │ ├── PDF.tsx
│ │ │ │ ├── Page.tsx
│ │ │ │ ├── Paste.tsx
│ │ │ │ ├── Pause.tsx
│ │ │ │ ├── Person.tsx
│ │ │ │ ├── PersonRound.tsx
│ │ │ │ ├── Pin.tsx
│ │ │ │ ├── PinFull.tsx
│ │ │ │ ├── Placeholder.tsx
│ │ │ │ ├── Play.tsx
│ │ │ │ ├── Print.tsx
│ │ │ │ ├── Prompt.tsx
│ │ │ │ ├── PushNotification.tsx
│ │ │ │ ├── Quote.tsx
│ │ │ │ ├── Radio.tsx
│ │ │ │ ├── Recurring.tsx
│ │ │ │ ├── RecycleBin.tsx
│ │ │ │ ├── Redo.tsx
│ │ │ │ ├── Remove.tsx
│ │ │ │ ├── RemoveRound.tsx
│ │ │ │ ├── Reply.tsx
│ │ │ │ ├── ReplyAll.tsx
│ │ │ │ ├── Retry.tsx
│ │ │ │ ├── Robot.tsx
│ │ │ │ ├── Rotate.tsx
│ │ │ │ ├── ScheduledEmail.tsx
│ │ │ │ ├── ScheduledSend.tsx
│ │ │ │ ├── Search.tsx
│ │ │ │ ├── Security.tsx
│ │ │ │ ├── Send.tsx
│ │ │ │ ├── Settings.tsx
│ │ │ │ ├── SettingsKnobs.tsx
│ │ │ │ ├── Share.tsx
│ │ │ │ ├── ShortText.tsx
│ │ │ │ ├── Show.tsx
│ │ │ │ ├── Shredder.tsx
│ │ │ │ ├── Shuffle.tsx
│ │ │ │ ├── Signature.tsx
│ │ │ │ ├── Sort.tsx
│ │ │ │ ├── SortAscending.tsx
│ │ │ │ ├── SortDescending.tsx
│ │ │ │ ├── Sound.tsx
│ │ │ │ ├── Status.tsx
│ │ │ │ ├── StrikethroughS.tsx
│ │ │ │ ├── StrikethroughT.tsx
│ │ │ │ ├── Subitems.tsx
│ │ │ │ ├── Sun.tsx
│ │ │ │ ├── Switch.tsx
│ │ │ │ ├── Switcher.tsx
│ │ │ │ ├── Table.tsx
│ │ │ │ ├── Tags.tsx
│ │ │ │ ├── Team.tsx
│ │ │ │ ├── Text.tsx
│ │ │ │ ├── TextBig.tsx
│ │ │ │ ├── TextColorIndicator.tsx
│ │ │ │ ├── TextCopy.tsx
│ │ │ │ ├── TextFormatting.tsx
│ │ │ │ ├── TextHuge.tsx
│ │ │ │ ├── TextMedium.tsx
│ │ │ │ ├── TextSmall.tsx
│ │ │ │ ├── Textcolor.tsx
│ │ │ │ ├── ThumbsDown.tsx
│ │ │ │ ├── ThumbsUp.tsx
│ │ │ │ ├── Time.tsx
│ │ │ │ ├── Timeline.tsx
│ │ │ │ ├── Translation.tsx
│ │ │ │ ├── TurnInto.tsx
│ │ │ │ ├── Underline.tsx
│ │ │ │ ├── Undo.tsx
│ │ │ │ ├── Unlocked.tsx
│ │ │ │ ├── Update.tsx
│ │ │ │ ├── Upgrade.tsx
│ │ │ │ ├── Upload.tsx
│ │ │ │ ├── UserDomain.tsx
│ │ │ │ ├── UserStatus.tsx
│ │ │ │ ├── Versioning.tsx
│ │ │ │ ├── Video.tsx
│ │ │ │ ├── Wand.tsx
│ │ │ │ ├── Warning.tsx
│ │ │ │ ├── WarningFull.tsx
│ │ │ │ ├── WhatsNew.tsx
│ │ │ │ ├── Widgets.tsx
│ │ │ │ ├── Work.tsx
│ │ │ │ ├── Workflow.tsx
│ │ │ │ ├── Workspace.tsx
│ │ │ │ ├── WrapText.tsx
│ │ │ │ ├── ZoomIn.tsx
│ │ │ │ ├── ZoomOut.tsx
│ │ │ │ └── index.ts
│ │ │ ├── svg.d.ts
│ │ │ └── types.ts
│ │ ├── tsconfig.json
│ │ ├── tsconfig.test.json
│ │ └── vitest.config.ts
│ ├── mcp/
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── scripts/
│ │ │ ├── extract-accessibility.js
│ │ │ └── extract-code-samples.js
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── server/
│ │ │ ├── index.ts
│ │ │ └── tools/
│ │ │ ├── dropdown-migration.ts
│ │ │ ├── get-vibe-component-accessibility.ts
│ │ │ ├── get-vibe-component-examples.ts
│ │ │ ├── get-vibe-component-metadata.ts
│ │ │ ├── icon-metadata-service.ts
│ │ │ ├── list-vibe-icons.ts
│ │ │ ├── list-vibe-public-components.ts
│ │ │ ├── list-vibe-tokens.ts
│ │ │ ├── metadata-service.ts
│ │ │ ├── token-metadata-service.ts
│ │ │ ├── v3-migration.ts
│ │ │ └── v4-migration.ts
│ │ └── tsconfig.json
│ ├── shared/
│ │ ├── .eslintrc.cjs
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── constants/
│ │ │ │ ├── index.ts
│ │ │ │ ├── keyCodes.ts
│ │ │ │ └── sizes.ts
│ │ │ ├── hooks/
│ │ │ │ ├── index.ts
│ │ │ │ ├── ssr/
│ │ │ │ │ ├── useIsMounted.ts
│ │ │ │ │ └── useIsomorphicLayoutEffect.ts
│ │ │ │ ├── useEventListener.ts
│ │ │ │ ├── useKeyEvent.ts
│ │ │ │ ├── useKeyboardButtonPressedFunc.ts
│ │ │ │ └── useMergeRef.ts
│ │ │ ├── index.ts
│ │ │ ├── tests/
│ │ │ │ ├── constants.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── test-ids-utils.ts
│ │ │ │ └── test-utils.ts
│ │ │ ├── types/
│ │ │ │ ├── ArrayLastElement.ts
│ │ │ │ ├── Colors.ts
│ │ │ │ ├── ElementContent.ts
│ │ │ │ ├── FormElement.ts
│ │ │ │ ├── MoveBy.ts
│ │ │ │ ├── SplitString.ts
│ │ │ │ ├── VibeComponentProps.ts
│ │ │ │ ├── events.ts
│ │ │ │ ├── files.d.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── window.d.ts
│ │ │ └── utils/
│ │ │ ├── colors-utils.ts
│ │ │ ├── colors-vars-map.ts
│ │ │ ├── dom-event-utils.ts
│ │ │ ├── dom-utils.ts
│ │ │ ├── function-utils.ts
│ │ │ ├── index.ts
│ │ │ ├── media-query-utils.ts
│ │ │ ├── screenReaderAccessHelper.ts
│ │ │ ├── ssr-utils.ts
│ │ │ ├── testid-helper.ts
│ │ │ ├── textManipulations.ts
│ │ │ ├── typesciptCssModulesHelper.ts
│ │ │ ├── user-agent-utils.ts
│ │ │ └── warn-deprecated.ts
│ │ └── tsconfig.json
│ ├── storybook-blocks/
│ │ ├── .babelrc.json
│ │ ├── .eslintrc.js
│ │ ├── .prettierrc
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── __mocks__/
│ │ │ ├── fileMock.js
│ │ │ └── styleMock.js
│ │ ├── eslint/
│ │ │ └── resolver.js
│ │ ├── jest.config.ts
│ │ ├── package.json
│ │ ├── rollup.config.js
│ │ ├── scripts/
│ │ │ └── copy-mixins-to-dist.sh
│ │ ├── src/
│ │ │ ├── components/
│ │ │ │ ├── alpha-warning/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── alpha-warning.mdx
│ │ │ │ │ │ └── alpha-warning.stories.tsx
│ │ │ │ │ └── alpha-warning.tsx
│ │ │ │ ├── anchor-list-item/
│ │ │ │ │ ├── README.md
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── anchor-list-item.mdx
│ │ │ │ │ │ └── anchor-list-item.stories.tsx
│ │ │ │ │ ├── anchor-list-item.module.scss
│ │ │ │ │ └── anchor-list-item.tsx
│ │ │ │ ├── color-description/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── color-description.mdx
│ │ │ │ │ │ └── color-description.stories.tsx
│ │ │ │ │ ├── color-description.module.scss
│ │ │ │ │ └── color-description.tsx
│ │ │ │ ├── component-name/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── component-name.mdx
│ │ │ │ │ │ └── component-name.stories.tsx
│ │ │ │ │ ├── component-name.module.scss
│ │ │ │ │ └── component-name.tsx
│ │ │ │ ├── component-rule/
│ │ │ │ │ ├── component-rule-constants.ts
│ │ │ │ │ ├── component-rule.module.scss
│ │ │ │ │ └── component-rule.tsx
│ │ │ │ ├── component-rules/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── component-rules.mdx
│ │ │ │ │ │ └── component-rules.stories.tsx
│ │ │ │ │ ├── component-rules.module.scss
│ │ │ │ │ └── component-rules.tsx
│ │ │ │ ├── deprecated-warning/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── deprecated-warning.mdx
│ │ │ │ │ │ └── deprecated-warning.stories.tsx
│ │ │ │ │ └── deprecated-warning.tsx
│ │ │ │ ├── frame/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── frame.mdx
│ │ │ │ │ │ └── frame.stories.tsx
│ │ │ │ │ ├── frame.module.scss
│ │ │ │ │ └── frame.tsx
│ │ │ │ ├── function-arguments/
│ │ │ │ │ ├── README.md
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── function-arguments.mdx
│ │ │ │ │ │ └── function-arguments.stories.tsx
│ │ │ │ │ ├── function-argument.tsx
│ │ │ │ │ ├── function-arguments.tsx
│ │ │ │ │ └── index.module.scss
│ │ │ │ ├── github-contributors-list/
│ │ │ │ │ ├── contributors-list.tsx
│ │ │ │ │ ├── contributors.module.scss
│ │ │ │ │ ├── github-contributors-list.tsx
│ │ │ │ │ ├── github-contributors-types.ts
│ │ │ │ │ └── github-contributors-utils.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── information-box/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── information-box.mdx
│ │ │ │ │ │ └── information-box.stories.tsx
│ │ │ │ │ ├── information-box.module.scss
│ │ │ │ │ └── information-box.tsx
│ │ │ │ ├── information-box-title/
│ │ │ │ │ ├── information-box-title.module.scss
│ │ │ │ │ └── information-box-title.tsx
│ │ │ │ ├── link/
│ │ │ │ │ ├── LinkConstants.ts
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── link.mdx
│ │ │ │ │ │ └── link.stories.tsx
│ │ │ │ │ ├── link.module.scss
│ │ │ │ │ └── link.tsx
│ │ │ │ ├── multiple-story-elements-wrapper/
│ │ │ │ │ ├── multiple-story-elements-wrapper.module.scss
│ │ │ │ │ └── multiple-story-elements-wrapper.tsx
│ │ │ │ ├── paragraph/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── paragraph.mdx
│ │ │ │ │ │ └── paragraph.stories.tsx
│ │ │ │ │ ├── paragraph.module.scss
│ │ │ │ │ └── paragraph.tsx
│ │ │ │ ├── related-component/
│ │ │ │ │ ├── README.md
│ │ │ │ │ ├── related-component.module.scss
│ │ │ │ │ └── related-component.tsx
│ │ │ │ ├── related-components/
│ │ │ │ │ ├── README.md
│ │ │ │ │ ├── related-components-context.ts
│ │ │ │ │ ├── related-components.module.scss
│ │ │ │ │ └── related-components.tsx
│ │ │ │ ├── section-name/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── section-name.mdx
│ │ │ │ │ │ └── section-name.stories.tsx
│ │ │ │ │ ├── section-name.module.scss
│ │ │ │ │ └── section-name.tsx
│ │ │ │ ├── sidebar-item/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── sidebar-item.mdx
│ │ │ │ │ │ └── sidebar-item.stories.tsx
│ │ │ │ │ ├── sidebar-item.module.scss
│ │ │ │ │ └── sidebar-item.tsx
│ │ │ │ ├── status-tag/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── status-tag.mdx
│ │ │ │ │ │ └── status-tag.stories.tsx
│ │ │ │ │ ├── status-tag.module.scss
│ │ │ │ │ └── status-tag.tsx
│ │ │ │ ├── story-description/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── story-description.mdx
│ │ │ │ │ │ └── story-description.stories.tsx
│ │ │ │ │ ├── story-description.module.scss
│ │ │ │ │ └── story-description.tsx
│ │ │ │ ├── storybook-link/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── storybook-link.mdx
│ │ │ │ │ │ └── storybook-link.stories.tsx
│ │ │ │ │ └── storybook-link.tsx
│ │ │ │ ├── tip/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── tip.mdx
│ │ │ │ │ │ └── tip.stories.tsx
│ │ │ │ │ ├── tip.module.scss
│ │ │ │ │ ├── tip.tsx
│ │ │ │ │ └── tipConstants.ts
│ │ │ │ ├── title/
│ │ │ │ │ ├── README.md
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── title.mdx
│ │ │ │ │ │ └── title.stories.tsx
│ │ │ │ │ ├── title.module.scss
│ │ │ │ │ └── title.tsx
│ │ │ │ ├── token-table/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── token-table.mdx
│ │ │ │ │ │ └── token-table.stories.tsx
│ │ │ │ │ ├── token-table-head-item.tsx
│ │ │ │ │ ├── token-table-row.tsx
│ │ │ │ │ ├── token-table.module.scss
│ │ │ │ │ └── token-table.tsx
│ │ │ │ ├── unstyled-list/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── unstyled-list.mdx
│ │ │ │ │ │ └── unstyled-list.stories.tsx
│ │ │ │ │ └── unstyled-list.tsx
│ │ │ │ ├── unstyled-list-item/
│ │ │ │ │ ├── unstyled-list-item.module.scss
│ │ │ │ │ └── unstyled-list-item.tsx
│ │ │ │ ├── usage-guidelines/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── usage-guidelines.mdx
│ │ │ │ │ │ └── usage-guidelines.stories.tsx
│ │ │ │ │ ├── usage-guidelines.module.scss
│ │ │ │ │ └── usage-guidelines.tsx
│ │ │ │ └── visual-description/
│ │ │ │ ├── __stories__/
│ │ │ │ │ ├── visual-description.mdx
│ │ │ │ │ └── visual-description.stories.tsx
│ │ │ │ ├── visual-description.module.scss
│ │ │ │ └── visual-description.tsx
│ │ │ ├── decorators/
│ │ │ │ ├── index.ts
│ │ │ │ ├── memory-stats.jsx
│ │ │ │ └── vertical-stories.jsx
│ │ │ ├── functions/
│ │ │ │ ├── createComponentTemplate.tsx
│ │ │ │ ├── createStoryMetaSettings/
│ │ │ │ │ ├── createStoryMetaSettings.ts
│ │ │ │ │ └── types.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── memory-stats/
│ │ │ │ ├── index.js
│ │ │ │ └── memory-stats-lib.js
│ │ │ ├── global.d.ts
│ │ │ ├── helpers/
│ │ │ │ ├── components/
│ │ │ │ │ ├── Flex/
│ │ │ │ │ │ ├── Flex.module.scss
│ │ │ │ │ │ ├── Flex.tsx
│ │ │ │ │ │ └── FlexConstants.ts
│ │ │ │ │ ├── Icons/
│ │ │ │ │ │ ├── Check.tsx
│ │ │ │ │ │ └── CloseSmall.tsx
│ │ │ │ │ └── Link/
│ │ │ │ │ ├── Link.module.scss
│ │ │ │ │ ├── Link.tsx
│ │ │ │ │ └── LinkConsts.ts
│ │ │ │ ├── types/
│ │ │ │ │ ├── VibeComponent.ts
│ │ │ │ │ ├── VibeComponentProps.ts
│ │ │ │ │ └── index.ts
│ │ │ │ └── utils/
│ │ │ │ ├── bem-helper.ts
│ │ │ │ ├── function-utils.ts
│ │ │ │ └── typesciptCssModulesHelper.ts
│ │ │ ├── index.ts
│ │ │ ├── styles/
│ │ │ │ ├── mixins/
│ │ │ │ │ ├── _focus.scss
│ │ │ │ │ ├── _index.scss
│ │ │ │ │ ├── _layout.scss
│ │ │ │ │ └── _typography.scss
│ │ │ │ └── tokens/
│ │ │ │ ├── border-radius.scss
│ │ │ │ ├── colors.scss
│ │ │ │ ├── index.scss
│ │ │ │ ├── spacing.scss
│ │ │ │ └── typography.scss
│ │ │ └── types/
│ │ │ ├── ElementContent.ts
│ │ │ ├── index.ts
│ │ │ ├── published-types.ts
│ │ │ └── withStaticProps.ts
│ │ └── tsconfig.json
│ ├── style/
│ │ ├── .babelrc.json
│ │ ├── .cursor/
│ │ │ └── rules/
│ │ │ └── color-token-management.mdc
│ │ ├── .prettierrc
│ │ ├── .stylelintignore
│ │ ├── .stylelintrc.json
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── plopfile.js
│ │ ├── scripts/
│ │ │ └── generate-colors.ts
│ │ ├── src/
│ │ │ ├── border-radius.scss
│ │ │ ├── borders.scss
│ │ │ ├── common.scss
│ │ │ ├── files/
│ │ │ │ ├── colors.json
│ │ │ │ └── tokens.json
│ │ │ ├── functions/
│ │ │ │ ├── _camelize.scss
│ │ │ │ ├── _capitalize.scss
│ │ │ │ ├── _contain.scss
│ │ │ │ ├── _extract-rgb.scss
│ │ │ │ ├── _map-collect.scss
│ │ │ │ └── index.scss
│ │ │ ├── index.scss
│ │ │ ├── mixins/
│ │ │ │ ├── _common.scss
│ │ │ │ ├── _states.scss
│ │ │ │ ├── _typography.scss
│ │ │ │ └── index.scss
│ │ │ ├── motion.scss
│ │ │ ├── spacing.scss
│ │ │ ├── themes/
│ │ │ │ ├── black-theme.scss
│ │ │ │ ├── dark-theme.scss
│ │ │ │ ├── hacker-theme.scss
│ │ │ │ ├── index.scss
│ │ │ │ └── light-theme.scss
│ │ │ └── typography.scss
│ │ ├── stylelint-config/
│ │ │ ├── index.js
│ │ │ └── rules/
│ │ │ ├── use-defined-css-var-when-available/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── fixtures/
│ │ │ │ │ │ ├── contains-values-with-multiple-replacements.scss
│ │ │ │ │ │ └── contains-values-with-single-replacement.scss
│ │ │ │ │ ├── index.test.js
│ │ │ │ │ └── props-to-allowed-vars.test.js
│ │ │ │ ├── index.js
│ │ │ │ ├── parse-monday-css.js
│ │ │ │ └── props-to-allowed-vars.js
│ │ │ └── use-new-spacing-tokens/
│ │ │ ├── __tests__/
│ │ │ │ └── index.test.js
│ │ │ └── index.js
│ │ ├── tsconfig.json
│ │ └── types/
│ │ └── styles.d.ts
│ └── testkit/
│ ├── .eslintrc.js
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── __tests__/
│ │ ├── Button.test.ts
│ │ ├── ButtonGroup.test.ts
│ │ ├── Checkbox.test.ts
│ │ ├── ColorPicker.test.ts
│ │ ├── Combobox.test.ts
│ │ ├── Dropdown.test.ts
│ │ ├── EditableHeading.test.ts
│ │ ├── EditableText.test.ts
│ │ ├── ExpandCollapse.test.ts
│ │ ├── IconButton.test.ts
│ │ ├── Link.test.ts
│ │ ├── List.test.ts
│ │ ├── ListItem.test.ts
│ │ ├── Loader.test.ts
│ │ ├── Menu.test.ts
│ │ ├── MenuButton.test.ts
│ │ ├── MenuItem.test.ts
│ │ ├── Modal.test.ts
│ │ ├── RadioButton.test.ts
│ │ ├── Search.test.ts
│ │ ├── SplitButton.test.ts
│ │ ├── Steps.test.ts
│ │ ├── TabList.test.ts
│ │ ├── Text.test.ts
│ │ ├── TextArea.test.ts
│ │ ├── TextField.test.ts
│ │ ├── Toast.test.ts
│ │ ├── Toggle.test.ts
│ │ └── utils/
│ │ └── url-helper.js
│ ├── components/
│ │ ├── BaseElement.ts
│ │ ├── Button.ts
│ │ ├── ButtonGroup.ts
│ │ ├── Checkbox.ts
│ │ ├── ColorPicker.ts
│ │ ├── Combobox.ts
│ │ ├── Dropdown.ts
│ │ ├── EditableHeading.ts
│ │ ├── EditableText.ts
│ │ ├── ExpandCollapse.ts
│ │ ├── IconButton.ts
│ │ ├── Link.ts
│ │ ├── List.ts
│ │ ├── ListItem.ts
│ │ ├── Loader.ts
│ │ ├── Menu.ts
│ │ ├── MenuButton.ts
│ │ ├── MenuItem.ts
│ │ ├── Modal.ts
│ │ ├── RadioButton.ts
│ │ ├── Search.ts
│ │ ├── SplitButton.ts
│ │ ├── Steps.ts
│ │ ├── Tab.ts
│ │ ├── TabList.ts
│ │ ├── Text.ts
│ │ ├── TextArea.ts
│ │ ├── TextField.ts
│ │ ├── Toast.ts
│ │ ├── Toggle.ts
│ │ └── index.ts
│ ├── index.ts
│ ├── package.json
│ ├── playwright.config.ts
│ ├── scripts/
│ │ └── run-changed-tests.js
│ ├── tsconfig.esm.json
│ ├── tsconfig.json
│ └── utils/
│ ├── common-actions.ts
│ ├── enums.ts
│ └── types.ts
└── scripts/
├── build-dependencies.sh
├── bundle-check/
│ ├── compare-bundles.js
│ └── generate-size-limit-config.js
└── performance/
├── aggregate-metrics.js
└── compare-metrics.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .claude/skills/vibe-breaking-change/SKILL.md
================================================
---
name: vibe-breaking-change
description: 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.
---
# Vibe Breaking Change Implementation
## Overview
Implements breaking changes to Vibe Design System components following the established workflow with automated validation, documentation updates, and codemod generation where applicable.
## When to Use
**Use this skill when:**
- Implementing breaking API changes to Vibe components
- Deprecating component props or methods
- Changing component behavior that affects dependent components
- Updating component interfaces that require migration documentation
- Making changes that need coordinated updates across the design system
**Do NOT use for:**
- Non-breaking enhancements or bug fixes
- Internal refactoring that doesn't affect public APIs
- Style-only changes without behavioral impact
- Emergency hotfixes that bypass normal workflow
## Quick Reference
| Phase | Actions | Validation |
|-------|---------|------------|
| 1. Analysis | Identify affected components, dependencies | Component mapping complete |
| 2. Implementation | Apply breaking change, update dependents | Tests pass locally |
| 3. Testing | Run full test suite, update failing tests | All tests green |
| 4. Documentation | Update migration guide, add codemod if deterministic | Documentation complete |
| 5. Cleanup & Delivery | lint:fix, lint, build, test → commit, push, PR with task link | All checks pass, PR ready for review |
## Core Workflow
### Phase 1: Analysis and Planning
**🔍 Comprehensive Dependency Analysis:**
```bash
# 1. Find all imports and usage across packages
grep -r "import.*ComponentName" packages/
grep -r "ComponentName" packages/ --include="*.tsx" --include="*.ts" --include="*.jsx" --include="*.js"
# 2. Find specific prop usage being changed (comprehensive search)
grep -r "oldProp=" packages/ --include="*.tsx" --include="*.ts" --include="*.jsx" --include="*.js"
find packages -name "*.tsx" -o -name "*.ts" -o -name "*.jsx" -o -name "*.js" | xargs grep -l "oldProp\|deprecatedMethod"
# 3. Analyze by package structure
find packages/components -name "*.tsx" | xargs grep -l "ComponentName" # Standalone packages
find packages/core/src -name "*.tsx" | xargs grep -l "ComponentName" # Core package
find packages/docs -name "*.tsx" | xargs grep -l "ComponentName" # Documentation
find packages/mcp -name "*.ts" | xargs grep -l "ComponentName" # MCP examples
```
**📋 Analysis Checklist:**
1. **Map Dependencies:**
- [ ] Components that import the target component
- [ ] Components that use the target component inline
- [ ] Hook or utility functions that reference the component
- [ ] Documentation and example files
2. **Assess Impact Scope:**
- [ ] Standalone component packages (packages/components/*)
- [ ] Core package components (packages/core/src/components/*)
- [ ] Supporting packages (docs, mcp, testkit)
- [ ] Test files and stories
3. **Plan Migration Strategy:**
- [ ] Order of updates (component first, then dependents)
- [ ] TypeScript interface changes needed
- [ ] Codemod feasibility (deterministic vs manual)
- [ ] Documentation updates required
See `references/dependency-analysis.md` for advanced dependency mapping techniques.
**📊 Expected Findings:**
- **20-40 component files** typically need updates for major component changes
- **Multiple package types** - standalone, core, docs, examples
- **Mixed file types** - .tsx, .ts, .jsx, .js all may need updates
- **Hidden dependencies** - MCP tools, test utilities, etc.
### Phase 2: Implementation
**🏗️ Systematic Update Approach:**
**Step 1: Source Component Updates**
```typescript
// 1. Update component interface
interface ComponentProps {
// ❌ Remove deprecated props
// oldProp?: string;
// deprecatedMethod?: () => void;
// ✅ Add new props with better API
newProp?: string;
improvedMethod?: () => void;
}
// 2. Update component implementation
const Component = ({ newProp, ...props }: ComponentProps) => {
// Implementation with new API
};
```
**Step 2: Internal Dependencies (same package)**
```typescript
// Update hooks, utilities, and helpers in the same package
// Example: Icon component's useIconProps hook
export default function useIconProps({
label, // ✅ Updated from iconLabel
// iconLabel, // ❌ Removed
}) {
// Implementation
}
```
**Step 3: Cross-Package Updates (systematic)**
```bash
# Process 20-40 files systematically
# Group by package for efficient updates:
# A. Standalone component packages
packages/components/tooltip/src/Tooltip/Tooltip.tsx
packages/components/button/src/Button/Button.tsx
# B. Core package components (bulk of changes)
packages/core/src/components/AttentionBox/AttentionBox.tsx
packages/core/src/components/Checkbox/Checkbox.tsx
# ... (typically 20-30 files)
# C. Supporting files
packages/mcp/src/server/tools/list-vibe-icons.ts
packages/docs/src/pages/components/ComponentName/ComponentName.stories.tsx
```
**🔄 Implementation Order:**
1. **Component Package** - Update source component and internal dependencies
2. **Individual Packages** - Update standalone packages that use the component
3. **Core Package** - Systematically update all core components (largest effort)
4. **Build Fix** - Address any TypeScript errors revealed by changes
5. **Supporting Files** - Update docs, examples, MCP tools
**✅ Implementation Checklist:**
- [ ] Source component interface updated
- [ ] Internal component dependencies updated (hooks, utilities)
- [ ] Standalone packages updated (5-10 files typically)
- [ ] Core package components updated (20-30 files typically)
- [ ] TypeScript build errors resolved
- [ ] Documentation and examples updated
- [ ] All updates maintain semantic consistency
### Phase 3: Testing and Validation
```bash
# Run comprehensive tests
yarn workspace @vibe/core test
lerna run test
# Run specific component tests
yarn workspace @vibe/core test -- Component
# Update snapshots if needed
yarn workspace @vibe/core test -- --updateSnapshot
```
See `references/testing-validation.md` for detailed testing patterns and examples.
**Testing requirements:**
- All existing tests pass or are updated appropriately
- New tests cover breaking change scenarios
- Integration tests verify dependent components work
- No TypeScript errors across the monorepo
### Phase 4: Documentation Updates
#### Migration Guide Update (VIBE4_MIGRATION_GUIDE.md)
```markdown
## ComponentName API Changes
### Breaking Changes
**Removed `oldProp` prop**
- **Before:** `<ComponentName oldProp="value" />`
- **After:** `<ComponentName newProp="value" />`
- **Reason:** Better API consistency and performance
### Migration Path
1. Replace `oldProp` with `newProp` in all usages
2. Update prop value format if needed
3. Test component behavior matches expected outcome
### Codemod Available
```bash
npx @vibe/codemod componentname-old-prop-to-new-prop
```
```
#### Codemod Generation (if deterministic)
⚠️ **CRITICAL**: Follow established Vibe codemod patterns to avoid common pitfalls.
See `references/codemod-best-practices.md` and `references/codemod-examples.md` for detailed patterns and real examples.
```typescript
// packages/codemod/transformations/core/v3-to-v4/ComponentName-component-migration.ts
import {
wrap,
getImports,
getComponentNameOrAliasFromImports,
findComponentElements,
migratePropsNames
} from "../../../src/utils";
import { NEW_CORE_IMPORT_PATH } from "../../../src/consts";
import { TransformationContext } from "../../../types";
/**
* ComponentName migration for v3 to v4:
* 1. Rename oldProp1 to newProp1
* 2. Rename oldProp2 to newProp2
*/
function transform({ j, root, filePath }: TransformationContext) {
// ✅ Use correct import path detection
const imports = getImports(root, NEW_CORE_IMPORT_PATH);
const componentName = getComponentNameOrAliasFromImports(j, imports, "ComponentName");
if (!componentName) return;
const elements = findComponentElements(root, componentName);
if (!elements.length) return;
// ✅ Single efficient call handles all prop renames
elements.forEach(elementPath => {
migratePropsNames(j, elementPath, filePath, componentName, {
oldProp1: "newProp1",
oldProp2: "newProp2",
oldProp3: "newProp3"
});
});
}
export default wrap(transform);
```
**Key Pattern Elements:**
- ✅ Use `getImports(root, NEW_CORE_IMPORT_PATH)` not `getCoreImportsForFile()`
- ✅ Use `migratePropsNames()` not non-existent `renameProp()`
- ✅ Single loop with batch prop updates
- ✅ Include `filePath` parameter for error reporting
- ✅ Use established utility imports
### Phase 5: Cleanup, Validation, and PR Creation
**⚠️ 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.**
**Step 1: Validation gate — run each command, fix failures, repeat until all pass**
Run these commands **sequentially**. If ANY command fails, fix the issue and **restart from that command**. Do NOT skip ahead.
```bash
# 1. Fix lint issues across all packages
yarn lint:fix
# 2. Verify lint passes with zero errors
yarn lint
# 3. Build all packages — must exit 0
yarn build
# 4. Run full test suite — must exit 0
yarn test
```
**If a step fails:**
1. Read the error output carefully
2. Fix the root cause (do not suppress or skip)
3. Re-run **from that step** through the remaining steps
4. Repeat until all 4 steps pass cleanly in sequence
**Only proceed to Step 2 when lint, build, AND tests all pass with zero errors.**
**Step 2: Create branch and commit only after all checks pass**
See `references/pr-templates.md` for PR description, commit message, and migration guide templates.
See `references/workflow-checklist.md` for a comprehensive checklist of all phases.
**📋 Monday.com Task Link:**
Extract the Monday.com task link from the user's original prompt if provided.
The link format is: `https://monday.monday.com/boards/<BOARD_ID>/pulses/<PULSE_ID>`
Include this link in the PR description under the "Task Link" section.
If no task link was provided in the original prompt, ask the user for it before creating the PR.
**Commit and PR titles MUST follow [Conventional Commits](https://www.conventionalcommits.org/).**
Use the appropriate type based on the nature of the change:
- `feat:` — new feature or capability change
- `fix:` — bug fix
- `refactor:` — refactor without behavior change
Always include a `BREAKING CHANGE:` footer in the commit body.
```bash
# Create feature branch from vibe4
git checkout vibe4
git pull origin vibe4
git checkout -b breaking-change/component-name-api-update
# Commit changes (only after all checks above pass)
git add .
git commit -m "feat(ComponentName): remove oldProp in favor of newProp
- Remove deprecated oldProp in favor of newProp
- Update all dependent components
- Add migration guide and codemod
- Update tests for new API
BREAKING CHANGE: ComponentName.oldProp has been removed.
Use ComponentName.newProp instead.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>"
# Push and create PR
git push -u origin breaking-change/component-name-api-update
gh pr create \
--title "feat(ComponentName): remove oldProp in favor of newProp" \
--body "## Summary
• Remove deprecated \`oldProp\` from ComponentName
• Update all dependent components to use \`newProp\`
• Add comprehensive migration guide
• Include codemod for automated migration
## Breaking Changes
- \`ComponentName.oldProp\` → \`ComponentName.newProp\`
## Task Link
[Monday.com Task](https://monday.monday.com/boards/<BOARD_ID>/pulses/<PULSE_ID>)
## Test Plan
- [ ] All component tests pass
- [ ] Dependent components work correctly
- [ ] Codemod transforms existing usage
- [ ] Migration guide tested
- [ ] Build and lint checks pass
🤖 Generated with [Claude Code](https://claude.com/claude-code)"
```
## Common Patterns
### Comprehensive Component Updates
**Pattern: Systematic Cross-Package Updates**
```bash
# Real example from Icon migration (28 files updated):
# 1. Component package (source)
packages/components/icon/src/Icon/Icon.tsx # Main component
packages/components/icon/src/Icon/hooks/useIconProps.tsx # Internal hooks
# 2. Related component packages
packages/components/tooltip/src/Tooltip/Tooltip.tsx # Uses Icon
packages/components/icon-button/src/IconButton/IconButton.tsx # Uses Icon internally
# 3. Core package components (bulk updates)
packages/core/src/components/AttentionBox/AttentionBox.tsx # 2 Icon instances
packages/core/src/components/Checkbox/Checkbox.tsx # 2 Icon instances
packages/core/src/components/Chips/Chips.tsx # 2 Icon instances
# ... 20+ more core components
# 4. Supporting updates
packages/mcp/src/server/tools/list-vibe-icons.ts # Documentation examples
packages/core/src/components/DatePicker/DatePickerHeader.tsx # Related component fixes
```
**🔧 Batch Update Strategy:**
1. Use `replace_all=true` for simple prop renames across files
2. Use `replace_all=false` for context-specific updates
3. Group similar changes together for efficiency
4. Verify build after each logical group of changes
### Deterministic Changes (Add Codemod)
- Simple prop renames (`iconSize` → `size`)
- Enum value updates
- Import path changes
- Method signature changes with clear mapping
### Non-Deterministic Changes (No Codemod)
- Complex behavioral changes requiring human judgment
- Context-dependent prop usage
- Changes requiring business logic updates
- Multi-step migration requiring staged approach
### Mixed Changes (Partial Codemod + Manual)
- Prop renames (codemod) + related component fixes (manual)
- API changes (codemod) + TypeScript error fixes (manual)
- Interface updates (codemod) + documentation updates (manual)
### Error Recovery
- If tests fail: Fix broken components, don't skip tests
- If build fails: Check import/export consistency
- If codemod fails: Validate transform logic with test cases
- If PR blocked: Address review feedback before merging
## ⚠️ Common Pitfalls & Lessons Learned
### Codemod Implementation Issues
**❌ Wrong Function Usage:**
```typescript
// WRONG - this function doesn't exist
renameProp(j, elementPath, "oldProp", "newProp");
// CORRECT - use established utility
migratePropsNames(j, elementPath, filePath, componentName, {
oldProp: "newProp"
});
```
**❌ Wrong Import Path:**
```typescript
// WRONG - looks for old package name
const imports = getCoreImportsForFile(root);
// CORRECT - specify the right import path
const imports = getImports(root, NEW_CORE_IMPORT_PATH); // "@vibe/core"
```
**❌ Inefficient Multiple Loops:**
```typescript
// WRONG - separate loops for each prop
if (isPropExists(j, elementPath, "prop1")) {
// handle prop1
}
if (isPropExists(j, elementPath, "prop2")) {
// handle prop2
}
// CORRECT - single efficient call
migratePropsNames(j, elementPath, filePath, componentName, {
prop1: "newProp1",
prop2: "newProp2",
prop3: "newProp3"
});
```
### JSCodeshift Formatting Artifacts
**⚠️ Problem:** jscodeshift adds unnecessary parentheses around JSX elements in files that don't even use the target component.
**Example Artifacts:**
```jsx
// Before codemod
<div className="wrapper">
// After codemod (WRONG!)
(<div className="wrapper">
```
**🔧 Prevention:**
1. **Target specific files** instead of entire directories
2. **Use `--dry` run first** to verify only expected files change
3. **Review all diffs carefully** before committing
4. **Create cleanup commits** if formatting issues slip through
**🔧 Cleanup Pattern:**
```typescript
// Find files with formatting artifacts
git diff HEAD~1 HEAD --name-only | grep -v "target-component"
// Manual cleanup needed for unintended changes
```
### Documentation Reversion Issues
**⚠️ Problem:** Linters, formatters, or branch switches can revert documentation changes.
**🔧 Prevention:**
- **Commit documentation separately** from code changes
- **Verify documentation persists** after all code changes
- **Check git status** before final PR creation
- **Re-add documentation** if reverted by automation
### Component Package Dependencies
**⚠️ Problem:** Components in different packages need different import handling.
```typescript
// Icon is in @vibe/icon but also re-exported from @vibe/core
// Both need to be handled correctly
```
**🔧 Solution:**
- Check component package structure first
- Handle both direct imports and re-exports
- Test codemod on actual usage patterns
### Build System Validation
**⚠️ Problem:** Not all components build even before changes, causing false positives.
**🔧 Approach:**
- **Test individual packages** first (`yarn workspace @vibe/icon build`)
- **Focus on changed packages** rather than full monorepo build
- **Separate build issues** from breaking change issues
### Cross-Package Component Updates
**⚠️ Problem:** Breaking changes often affect components across multiple packages, not just the main @vibe/core package.
**Real Example - Icon Migration:**
Icon component is in `@vibe/icon` but used throughout:
- `packages/components/tooltip/` - standalone package using Icon
- `packages/core/src/components/` - 25+ core components using Icon
- `packages/components/icon-button/` - IconButton using Icon internally
- `packages/mcp/` - documentation and examples
**🔧 Comprehensive Search Strategy:**
```bash
# 1. Find ALL files with old prop usage across entire monorepo
grep -r "iconType\|iconSize\|iconLabel" packages/ --include="*.tsx" --include="*.ts" --include="*.jsx" --include="*.js"
# 2. Identify usage by package type
find packages/components -name "*.tsx" -o -name "*.ts" | xargs grep -l "iconType="
find packages/core/src -name "*.tsx" -o -name "*.ts" | xargs grep -l "iconSize="
# 3. Check supporting files (docs, examples, tests)
grep -r "iconLabel=" packages/mcp packages/docs
```
**🔧 Update Strategy:**
1. **Component Package First** - Update the source component and its internal hooks
2. **Core Package Components** - Systematically update all core components (20-30 files typical)
3. **Standalone Packages** - Update components that depend on the changed component
4. **Supporting Files** - Update documentation, examples, and MCP tools
5. **Build Verification** - Test each package individually before full build
### TypeScript Build Errors in Related Components
**⚠️ Problem:** Breaking changes can reveal existing TypeScript errors in related components.
**Real Example - IconButton Props:**
```typescript
// DatePickerHeader was using deprecated Button static properties
<IconButton
kind={Button.kinds.TERTIARY} // ❌ Error: Property 'kind' does not exist
size={Button.sizes.SMALL} // ❌ Error: Property 'size' does not exist
/>
// Fixed to use string literals
<IconButton
kind="tertiary" // ✅ Correct
size="small" // ✅ Correct
/>
```
**🔧 Resolution Approach:**
1. **Isolate the error** - determine if it's related to your breaking change or pre-existing
2. **Check component API** - verify correct prop values for the component
3. **Use string literals** instead of deprecated static enum properties
4. **Test build** after each fix to catch additional issues
### Documentation and Example Updates
**⚠️ Problem:** Code examples in documentation and MCP tools need updating with new API.
**🔧 Required Updates:**
- **MCP Documentation** - Update usage examples with new props
- **Component Stories** - Storybook examples using the component
- **README files** - Any inline code examples
- **Test files** - Update snapshot tests and component tests
## Quality Gates
**⚠️ These are hard gates, not suggestions. Do NOT proceed past a gate until every item passes.**
**Before committing (all must pass with exit code 0):**
- [ ] `yarn lint` — zero errors
- [ ] `yarn build` — zero errors
- [ ] `yarn test` — zero failures
- [ ] Migration guide entry complete
**Before creating PR:**
- [ ] All of the above still pass after final commit
- [ ] Codemod tested (if applicable)
- [ ] Documentation updated
## Integration Points
- **Package Dependencies:** Update `package.json` files as needed
- **TypeScript:** Ensure type consistency across packages
- **Build System:** Verify Rollup configurations handle changes
- **Storybook:** Update stories to reflect new API
- **Documentation:** Sync with component documentation site
================================================
FILE: .claude/skills/vibe-breaking-change/references/codemod-best-practices.md
================================================
# Codemod Best Practices for Vibe Breaking Changes
## Lessons Learned from Real Implementation
This guide covers critical lessons learned from implementing the Icon component prop renames codemod, including major pitfalls to avoid.
## ❌ Common Mistakes to Avoid
### 1. Using Non-Existent Functions
**WRONG:**
```typescript
import { renameProp } from "../../../src/utils"; // ❌ Doesn't exist
elements.forEach(elementPath => {
if (isPropExists(j, elementPath, "oldProp")) {
renameProp(j, elementPath, "oldProp", "newProp"); // ❌ Function doesn't exist
}
});
```
**CORRECT:**
```typescript
import { migratePropsNames } from "../../../src/utils"; // ✅ Real function
elements.forEach(elementPath => {
migratePropsNames(j, elementPath, filePath, componentName, {
oldProp: "newProp",
anotherOld: "anotherNew"
}); // ✅ Handles all props in one efficient call
});
```
### 2. Wrong Import Path Detection
**WRONG:**
```typescript
// This only finds "monday-ui-react-core" imports, not "@vibe/core"
const imports = getCoreImportsForFile(root);
```
**CORRECT:**
```typescript
import { NEW_CORE_IMPORT_PATH } from "../../../src/consts";
// This finds "@vibe/core" imports correctly
const imports = getImports(root, NEW_CORE_IMPORT_PATH);
```
### 3. Inefficient Multiple Loops
**WRONG:**
```typescript
elements.forEach(elementPath => {
// Separate check for each prop - inefficient!
if (isPropExists(j, elementPath, "iconLabel")) {
renameProp(j, elementPath, "iconLabel", "label");
}
if (isPropExists(j, elementPath, "iconType")) {
renameProp(j, elementPath, "iconType", "type");
}
if (isPropExists(j, elementPath, "iconSize")) {
renameProp(j, elementPath, "iconSize", "size");
}
});
```
**CORRECT:**
```typescript
elements.forEach(elementPath => {
// Single call handles all prop renames efficiently
migratePropsNames(j, elementPath, filePath, componentName, {
iconLabel: "label",
iconType: "type",
iconSize: "size"
});
});
```
## 🔧 Proven Codemod Pattern
Based on successful v2-v3 codemods, use this proven pattern:
```typescript
import {
wrap,
getImports,
getComponentNameOrAliasFromImports,
findComponentElements,
migratePropsNames
} from "../../../src/utils";
import { NEW_CORE_IMPORT_PATH } from "../../../src/consts";
import { TransformationContext } from "../../../types";
function transform({ j, root, filePath }: TransformationContext) {
// 1. Find imports from correct package
const imports = getImports(root, NEW_CORE_IMPORT_PATH);
// 2. Check if component is imported
const componentName = getComponentNameOrAliasFromImports(j, imports, "ComponentName");
if (!componentName) return;
// 3. Find all component elements
const elements = findComponentElements(root, componentName);
if (!elements.length) return;
// 4. Migrate props efficiently
elements.forEach(elementPath => {
migratePropsNames(j, elementPath, filePath, componentName, {
oldProp1: "newProp1",
oldProp2: "newProp2",
oldProp3: "newProp3"
});
});
}
export default wrap(transform);
```
## ⚠️ JSCodeshift Formatting Artifacts
### The Problem
JSCodeshift can add unnecessary parentheses around JSX elements, even in files that **don't use the target component**.
**Example:**
```jsx
// Original code
<div className="wrapper">
<span>Content</span>
</div>
// After codemod (WRONG!)
(<div className="wrapper">
<span>Content</span>
</div>)
```
### Root Cause
JSCodeshift parses and rebuilds the AST, which can introduce formatting changes even when no transforms are applied.
### Prevention Strategies
#### 1. Target Specific Files
```bash
# WRONG - transforms entire directory
npx jscodeshift -t transform.js packages/core/src/components/
# BETTER - target specific files known to use the component
npx jscodeshift -t transform.js packages/core/src/components/Button/Button.tsx packages/core/src/components/IconButton/IconButton.tsx
```
#### 2. Use Dry Run First
```bash
# Always run dry first to see what changes
npx jscodeshift -t transform.js packages/ --dry
# Review the output carefully
# Only proceed if changes look correct
npx jscodeshift -t transform.js packages/
```
#### 3. Filter by Import Detection
```typescript
function transform({ j, root, filePath }: TransformationContext) {
// Only proceed if file actually imports the component
const imports = getImports(root, NEW_CORE_IMPORT_PATH);
const componentName = getComponentNameOrAliasFromImports(j, imports, "ComponentName");
if (!componentName) return; // ✅ Exit early, no changes
// ... rest of transform
}
```
### Cleanup Process
If formatting artifacts slip through:
```bash
# 1. Identify files with unintended changes
git diff HEAD~1 HEAD --name-only | grep -E "(Checkbox|AvatarGroup|Dropdown)"
# 2. Review each file
git diff HEAD~1 HEAD -- path/to/file.tsx
# 3. Manual cleanup
# Remove extra parentheses: (<div> → <div>
# Fix indentation as needed
# 4. Commit cleanup
git add .
git commit -m "fix: remove codemod formatting artifacts"
```
## 🧪 Testing Best Practices
### Test Development
```typescript
// Cover edge cases in tests
defineInlineTest(
transform,
{},
prependImport('const element = <Icon icon={Home} iconLabel="Home" iconType="svg" iconSize={24} />;'),
prependImport('const element = <Icon icon={Home} label="Home" type="svg" size={24} />;'),
"should rename all three props"
);
// Test aliased imports
defineInlineTest(
transform,
{},
`import { Icon as VibeIcon } from "@vibe/core";
const element = <VibeIcon icon={Home} iconLabel="Home" />;`,
`import { Icon as VibeIcon } from "@vibe/core";
const element = <VibeIcon icon={Home} label="Home" />;`,
"should work with aliased imports"
);
```
### Expected Results
- **7-8 out of 8 tests pass** - indicates working codemod
- **1 formatting test failure** - expected jscodeshift artifact (acceptable)
- **0 tests pass** - indicates broken codemod logic
## 📝 Documentation Integration
### Migration Guide Entry
```markdown
## ComponentName API Changes
### Breaking Changes
**Props Renamed:**
- `oldProp` → `newProp`
- `anotherOld` → `anotherNew`
### Automated Migration
```bash
npx @vibe/codemod component-name-props-update src/
```
### Manual Migration
[Include before/after examples]
```
### Changelog Entry
```markdown
#### ComponentName v2.0.0
- **BREAKING**: Renamed props for better consistency
- **Migration**: Use `npx @vibe/codemod component-name-props-update`
- **Task**: Monday.com #[task-id]
```
## 🚀 Success Criteria
A successful codemod implementation should:
1. **✅ Follow established patterns** from v2-v3 codemods
2. **✅ Use correct utility functions** (migratePropsNames, getImports)
3. **✅ Handle import paths correctly** (NEW_CORE_IMPORT_PATH)
4. **✅ Be efficient** (single loop, batch prop updates)
5. **✅ Have comprehensive tests** (7+ passing test cases)
6. **✅ Minimize formatting artifacts** (targeted file updates)
7. **✅ Include cleanup process** (for any artifacts that slip through)
## 🔄 Iteration Process
1. **RED**: Write failing tests first
2. **GREEN**: Implement minimal working codemod
3. **REFACTOR**: Fix issues, improve efficiency
4. **CLEANUP**: Remove formatting artifacts
5. **DOCUMENT**: Update migration guide and changelog
6. **VALIDATE**: Test on real codebase examples
================================================
FILE: .claude/skills/vibe-breaking-change/references/codemod-examples.md
================================================
# Codemod Examples for Vibe Breaking Changes
## Simple Prop Rename
```typescript
// Transform: oldProp → newProp
import type { Transform } from 'jscodeshift';
const transform: Transform = (file, api) => {
const j = api.jscodeshift;
const root = j(file.source);
// Transform JSX prop usage
root
.find(j.JSXElement)
.filter(path => {
const name = path.value.openingElement?.name;
return name && name.type === 'JSXIdentifier' && name.name === 'ComponentName';
})
.forEach(path => {
const attributes = path.value.openingElement?.attributes || [];
attributes.forEach(attr => {
if (
attr.type === 'JSXAttribute' &&
attr.name?.type === 'JSXIdentifier' &&
attr.name.name === 'oldProp'
) {
attr.name.name = 'newProp';
}
});
});
return root.toSource();
};
export default transform;
```
## Enum to String Union Migration
```typescript
// Transform: ComponentName.SIZE.LARGE → "large"
import type { Transform } from 'jscodeshift';
const transform: Transform = (file, api) => {
const j = api.jscodeshift;
const root = j(file.source);
// Replace enum member access with string literal
root
.find(j.MemberExpression, {
object: {
type: 'MemberExpression',
object: { name: 'ComponentName' },
property: { name: 'SIZE' }
}
})
.forEach(path => {
const property = path.value.property;
if (property.type === 'Identifier') {
const stringValue = property.name.toLowerCase();
j(path).replaceWith(j.literal(stringValue));
}
});
return root.toSource();
};
export default transform;
```
## Complex Import Path Update
```typescript
// Transform: from old package to new package structure
import type { Transform } from 'jscodeshift';
const transform: Transform = (file, api) => {
const j = api.jscodeshift;
const root = j(file.source);
// Update import declarations
root
.find(j.ImportDeclaration)
.filter(path => {
return path.value.source.value?.includes('@vibe/core/components/ComponentName');
})
.forEach(path => {
if (path.value.source.type === 'Literal') {
path.value.source.value = '@vibe/component-name';
}
});
return root.toSource();
};
export default transform;
```
## Testing Codemod Changes
```bash
# Test codemod on specific file
npx jscodeshift -t packages/codemod/src/transforms/component-prop-rename.ts packages/core/src/components/Button/__tests__/Button.test.tsx --dry
# Test on directory
npx jscodeshift -t packages/codemod/src/transforms/component-prop-rename.ts packages/core/src/components/ --dry
# Apply transformation
npx jscodeshift -t packages/codemod/src/transforms/component-prop-rename.ts packages/core/src/components/
# Add to codemod CLI
# Edit packages/codemod/src/index.ts to include new transform
```
## Codemod Integration Checklist
- [ ] Transform handles JSX usage
- [ ] Transform handles TypeScript interfaces
- [ ] Transform handles prop destructuring
- [ ] Transform handles spread props appropriately
- [ ] Test cases cover edge cases
- [ ] Dry run shows expected changes
- [ ] Added to codemod CLI interface
- [ ] Documentation includes usage example
================================================
FILE: .claude/skills/vibe-breaking-change/references/dependency-analysis.md
================================================
# Dependency Analysis for Breaking Changes
## Component Dependency Mapping
### Finding Direct Dependencies
```bash
# Find components importing the target component
grep -r "import.*ComponentName" packages/core/src/components/
grep -r "import.*ComponentName" packages/components/
# Find usage in TypeScript files
grep -r "ComponentName" packages/*/src/**/*.tsx
grep -r "ComponentName" packages/*/src/**/*.ts
# Find usage in test files
grep -r "ComponentName" packages/*/src/**/__tests__/*.tsx
grep -r "ComponentName" packages/*/src/**/__stories__/*.tsx
```
### Finding Indirect Dependencies
```bash
# Check for components that extend or compose target component
grep -r "extends.*ComponentNameProps" packages/
grep -r "ComponentName.*Props" packages/
# Find re-exports
grep -r "export.*ComponentName" packages/*/src/index.ts
grep -r "export.*from.*ComponentName" packages/
```
### Analyzing Package Dependencies
```bash
# Check package.json dependencies
find packages/ -name "package.json" -exec grep -l "@vibe/component-name\|ComponentName" {} \;
# Check workspace dependencies
yarn workspace @vibe/core info
yarn workspaces info
```
## Impact Assessment Matrix
| Component | Import Type | Usage Pattern | Breaking Impact | Update Required |
|-----------|-------------|---------------|-----------------|-----------------|
| ButtonGroup | Direct | Props passed through | High | Yes - API change |
| Dialog | Indirect | Used in composition | Medium | Yes - prop update |
| Form | Test only | Test utilities | Low | Maybe - test update |
## Component Relationship Types
### Direct Usage
- Component imports and uses target component
- Props passed directly to target component
- **Impact:** High - requires immediate update
### Composed Usage
- Component wraps or extends target component
- May add additional props or behavior
- **Impact:** Medium - requires careful testing
### Re-export Usage
- Package re-exports target component
- May not use component directly
- **Impact:** Low - update exports only
### Test/Story Usage
- Only used in test files or Storybook
- No runtime impact on users
- **Impact:** Minimal - update tests/stories
## Dependency Update Strategy
### Phase 1: Core Component Update
1. Update target component with breaking change
2. Update component types and interfaces
3. Ensure component builds and basic tests pass
### Phase 2: Direct Dependencies
1. Update components with direct imports
2. Update prop passing and usage patterns
3. Fix compilation errors
### Phase 3: Indirect Dependencies
1. Update composed components
2. Update complex usage patterns
3. Verify behavioral consistency
### Phase 4: Package Dependencies
1. Update package.json versions if needed
2. Update workspace dependencies
3. Verify cross-package compatibility
## Validation Commands
```bash
# Check TypeScript compilation across all packages
lerna run type-check
# Check for remaining references to old API
grep -r "oldProp" packages/ --include="*.ts" --include="*.tsx"
# Verify no broken imports
yarn workspace @vibe/core build
lerna run build
# Check for usage in Storybook
grep -r "oldProp" packages/**/__stories__/
```
## Common Dependency Patterns
### Button Dependencies
- ButtonGroup, IconButton, SplitButton
- Form components (FieldButton, FormButton)
- Dialog components (DialogButton)
### Icon Dependencies
- All components using icons
- IconButton, Button with icons
- Menu items, navigation components
### Layout Dependencies
- Grid system components
- Container components
- Responsive utilities
### Hook Dependencies
- Components using shared hooks
- Custom hook implementations
- Test utilities using hooks
## Risk Mitigation
### High-Risk Changes
- Core utility changes (hooks, constants)
- Base component changes (Button, Icon)
- Type system changes (VibeComponentProps)
### Medium-Risk Changes
- Layout component changes
- Form component changes
- Complex composite components
### Low-Risk Changes
- Leaf components (no dependencies)
- Style-only changes
- Test utility changes
================================================
FILE: .claude/skills/vibe-breaking-change/references/pr-templates.md
================================================
# PR and Documentation Templates
## PR Template for Breaking Changes
### PR Title Format
Follow [Conventional Commits](https://www.conventionalcommits.org/). Use the appropriate type (`feat`, `fix`, `refactor`, etc.):
```
<type>(<scope>): brief description
Examples:
feat(Button): remove deprecated size prop
refactor(Dialog): update API for better accessibility
fix(Form): replace onSubmit with onFormSubmit
```
### PR Description Template
```markdown
## Summary
• Brief description of the breaking change
• Why this change was necessary
• Impact on existing users
## Breaking Changes
**[ComponentName] API Changes:**
- ❌ Removed: `oldProp` prop
- ✅ Added: `newProp` prop with enhanced functionality
- 🔄 Changed: `existingProp` now requires different value format
## Migration Path
### Automated Migration (Codemod Available)
```bash
npx @vibe/codemod component-name-api-update
```
### Manual Migration
**Before:**
```jsx
<ComponentName
oldProp="value"
existingProp={oldFormat}
/>
```
**After:**
```jsx
<ComponentName
newProp="value"
existingProp={newFormat}
/>
```
## Task Link
[Monday.com Task](https://monday.monday.com/boards/<BOARD_ID>/pulses/<PULSE_ID>)
## Testing
- [ ] All component tests pass
- [ ] Integration tests updated and passing
- [ ] Dependent components tested
- [ ] Storybook stories render correctly
- [ ] Codemod tested on real codebase examples
- [ ] Performance impact assessed
## Documentation
- [ ] Migration guide updated
- [ ] API documentation updated
- [ ] Changelog entry added
- [ ] Codemod documentation added
## Validation
- [ ] Full monorepo build passes
- [ ] All linting checks pass
- [ ] TypeScript compilation successful
- [ ] No broken imports or exports
- [ ] Manual testing completed
## Reviewer Notes
- Focus on [specific areas of concern]
- Pay attention to [migration complexity/edge cases]
- Verify [specific functionality still works]
---
🤖 Generated with [Claude Code](https://claude.com/claude-code)
```
## Commit Message Template
Follow [Conventional Commits](https://www.conventionalcommits.org/). Use the appropriate type (`feat`, `fix`, `refactor`, etc.):
```
<type>(<scope>): brief description
Detailed explanation of what changed and why.
Include context about the problem being solved.
BREAKING CHANGE: Specific description of what breaks.
Explain the old behavior vs new behavior.
Migration:
- Old usage: ComponentName.oldProp
- New usage: ComponentName.newProp
- Codemod: npx @vibe/codemod component-migration
Affects:
- ComponentName API
- Dependent components: ButtonGroup, Dialog
- Documentation: Migration guide updated
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
```
## Migration Guide Entry Template
```markdown
## [ComponentName] API Changes
### Overview
Brief explanation of what changed and why the breaking change was necessary.
### Breaking Changes
#### Removed `oldProp` prop
- **Impact**: High - affects all usage
- **Reason**: Simplifies API and improves performance
- **Migration**: Replace with `newProp`
#### Changed `existingProp` format
- **Impact**: Medium - affects complex usage
- **Reason**: Better type safety and validation
- **Migration**: Convert values using utility function
### Before and After
#### Basic Usage
```jsx
// Before
<ComponentName
oldProp="value"
existingProp={complexOldFormat}
size="large"
/>
// After
<ComponentName
newProp="value"
existingProp={simpleNewFormat}
size="large"
/>
```
#### Advanced Usage
```jsx
// Before
<ComponentName
oldProp={dynamicValue}
onOldEvent={(data) => handleOldWay(data)}
/>
// After
<ComponentName
newProp={transformValue(dynamicValue)}
onNewEvent={(data) => handleNewWay(data)}
/>
```
### Migration Strategies
#### Automated Migration
Use the provided codemod for straightforward cases:
```bash
npx @vibe/codemod componentname-api-update src/
```
The codemod handles:
- Simple prop renames
- Basic value transformations
- Import statement updates
#### Manual Migration
For complex cases requiring human judgment:
1. **Dynamic prop values**: Review logic and update calculations
2. **Event handlers**: Update to match new event signature
3. **Conditional usage**: Verify new API handles all conditions
4. **Tests**: Update test assertions and mocks
#### Gradual Migration
For large codebases, consider a phased approach:
1. **Phase 1**: Update critical components first
2. **Phase 2**: Update high-traffic components
3. **Phase 3**: Update remaining components
4. **Phase 4**: Remove any compatibility shims
### Common Issues
#### TypeScript Errors
```typescript
// Error: Property 'oldProp' does not exist
<ComponentName oldProp="value" />
// Solution: Use new prop name
<ComponentName newProp="value" />
```
#### Runtime Errors
```javascript
// Error: onOldEvent is not a function
props.onOldEvent?.(data);
// Solution: Use new event name
props.onNewEvent?.(data);
```
### Validation
After migration, verify:
- [ ] No TypeScript compilation errors
- [ ] Component renders as expected
- [ ] Event handlers work correctly
- [ ] Tests pass
- [ ] No console warnings
```
## Changelog Entry Template
```markdown
### BREAKING CHANGES
#### ComponentName v2.0.0
- **BREAKING**: Removed `oldProp` in favor of `newProp` for better API consistency
- **BREAKING**: Changed `existingProp` format from object to string for improved performance
- **Migration**: Use `npx @vibe/codemod componentname-api-update` for automated migration
- **Affects**: All ComponentName usage, ButtonGroup, Dialog components
##### Migration Example
```jsx
// Before
<ComponentName oldProp="value" existingProp={{key: "value"}} />
// After
<ComponentName newProp="value" existingProp="value" />
```
See [Migration Guide](./VIBE4_MIGRATION_GUIDE.md#componentname-api-changes) for detailed instructions.
```
## Code Review Checklist Template
```markdown
## Breaking Change Review Checklist
### API Design
- [ ] Breaking change is necessary and well-justified
- [ ] New API is more intuitive than old API
- [ ] API follows Vibe design system conventions
- [ ] TypeScript types are accurate and helpful
### Implementation
- [ ] Target component updated correctly
- [ ] All dependent components updated
- [ ] No lingering references to old API
- [ ] Error handling updated appropriately
### Testing
- [ ] Component tests updated and comprehensive
- [ ] Integration tests cover dependent components
- [ ] Edge cases tested
- [ ] Performance impact assessed
### Documentation
- [ ] Migration guide entry is clear and complete
- [ ] Code examples work correctly
- [ ] Codemod documented and tested
- [ ] Breaking change clearly flagged
### Developer Experience
- [ ] TypeScript errors are helpful
- [ ] Runtime errors (if any) are clear
- [ ] Migration path is straightforward
- [ ] Documentation is discoverable
### Build System
- [ ] All packages build successfully
- [ ] No circular dependencies introduced
- [ ] Import/export structure clean
- [ ] Version bumps appropriate
```
================================================
FILE: .claude/skills/vibe-breaking-change/references/testing-validation.md
================================================
# Testing and Validation for Breaking Changes
## Testing Strategy
### 1. Unit Tests
Test individual component behavior with new API
```typescript
// Before: Test with old API
it('should handle oldProp correctly', () => {
render(<ComponentName oldProp="value" />);
expect(screen.getByRole('button')).toHaveAttribute('data-old', 'value');
});
// After: Test with new API
it('should handle newProp correctly', () => {
render(<ComponentName newProp="value" />);
expect(screen.getByRole('button')).toHaveAttribute('data-new', 'value');
});
// Migration test: Ensure old API no longer works
it('should not accept oldProp', () => {
// TypeScript should prevent this at compile time
// @ts-expect-error - oldProp no longer exists
render(<ComponentName oldProp="value" />);
});
```
### 2. Integration Tests
Test dependent components work with changes
```typescript
// Test component that uses the changed component
it('should work with updated ComponentName API', () => {
render(
<ParentComponent>
<ComponentName newProp="value" />
</ParentComponent>
);
// Verify integration works
expect(screen.getByTestId('parent-wrapper')).toBeInTheDocument();
expect(screen.getByRole('button')).toHaveAttribute('data-new', 'value');
});
```
### 3. Snapshot Testing
Update snapshots for visual regression testing
```bash
# Update component snapshots
yarn workspace @vibe/core test -- ComponentName --updateSnapshot
# Update all affected snapshots
yarn workspace @vibe/core test -- --updateSnapshot
# Check snapshot diffs are intentional
git diff packages/core/src/components/ComponentName/__tests__/__snapshots__/
```
## Validation Checklist
### Pre-Implementation Validation
- [ ] Impact analysis complete
- [ ] Dependent components identified
- [ ] Migration strategy defined
- [ ] Breaking change justified and approved
### Implementation Validation
- [ ] Target component updated correctly
- [ ] TypeScript compilation passes
- [ ] Component tests updated and passing
- [ ] No console errors in development
### Dependency Validation
- [ ] All dependent components updated
- [ ] Integration tests passing
- [ ] No broken imports or exports
- [ ] Cross-package dependencies resolved
### Build Validation
```bash
# Full monorepo build
lerna run build
# Individual package builds
yarn workspace @vibe/core build
yarn workspace @vibe/components build
# TypeScript validation
lerna run type-check
# Lint validation
lerna run lint
```
### Runtime Validation
```bash
# Storybook validation
yarn storybook
# Manually verify affected stories render correctly
# Test app validation (if available)
yarn start
# Test breaking changes in demo application
```
### Documentation Validation
- [ ] Migration guide updated with clear examples
- [ ] Breaking change documented with before/after
- [ ] Codemod usage documented (if applicable)
- [ ] API documentation updated
## Test Update Patterns
### Props Interface Changes
```typescript
// Old interface
interface OldComponentProps {
oldProp?: string;
size?: 'small' | 'medium' | 'large';
}
// New interface
interface NewComponentProps {
newProp?: string;
size?: ComponentSize; // enum to string union
}
// Test updates needed:
// 1. Update prop names in test cases
// 2. Update enum values to string literals
// 3. Add tests for new API behavior
// 4. Remove tests for deprecated functionality
```
### Behavior Changes
```typescript
// Test behavioral changes
describe('ComponentName behavior changes', () => {
it('should trigger callback on new event', () => {
const mockCallback = jest.fn();
render(<ComponentName onNewEvent={mockCallback} />);
// Trigger new behavior
fireEvent.click(screen.getByRole('button'));
expect(mockCallback).toHaveBeenCalledWith(/* new signature */);
});
it('should not trigger old callback', () => {
// Ensure old behavior is removed
const mockOldCallback = jest.fn();
// @ts-expect-error - old callback should not exist
render(<ComponentName onOldEvent={mockOldCallback} />);
});
});
```
## Common Testing Pitfalls
### 1. Incomplete Test Updates
- **Problem:** Tests still use old API but pass due to lenient typing
- **Solution:** Enable strict TypeScript checking in tests
- **Validation:** `yarn workspace @vibe/core test --typecheck`
### 2. Missing Integration Tests
- **Problem:** Individual components work but integration breaks
- **Solution:** Test component composition scenarios
- **Validation:** Create test cases for typical usage patterns
### 3. Snapshot Pollution
- **Problem:** Snapshots updated but changes not reviewed
- **Solution:** Review snapshot diffs before committing
- **Validation:** `git diff --no-index old-snapshot new-snapshot`
### 4. Performance Regressions
- **Problem:** New API performs worse than old API
- **Solution:** Add performance benchmarks for critical components
- **Validation:** Use React DevTools Profiler
## Automated Validation Scripts
### Pre-commit Validation
```bash
#!/bin/bash
# scripts/validate-breaking-change.sh
echo "🔍 Validating breaking change implementation..."
# 1. Check TypeScript compilation
echo "Checking TypeScript..."
lerna run type-check || exit 1
# 2. Run tests
echo "Running tests..."
lerna run test || exit 1
# 3. Check for old API usage
echo "Checking for old API usage..."
if grep -r "oldProp" packages/ --include="*.ts" --include="*.tsx"; then
echo "❌ Found old API usage"
exit 1
fi
# 4. Build validation
echo "Validating build..."
lerna run build || exit 1
echo "✅ Breaking change validation passed"
```
================================================
FILE: .claude/skills/vibe-breaking-change/references/workflow-checklist.md
================================================
# Complete Breaking Change Workflow Checklist
## Pre-Implementation Phase
### Planning and Analysis
- [ ] Breaking change request approved by team
- [ ] Impact analysis completed
- [ ] Alternative solutions considered and ruled out
- [ ] Migration strategy defined
- [ ] Timeline established
### Dependency Mapping
- [ ] Direct dependencies identified
- [ ] Indirect dependencies mapped
- [ ] Cross-package impacts assessed
- [ ] Test dependencies catalogued
- [ ] Documentation dependencies noted
## Implementation Phase
### Code Changes
- [ ] Target component updated with breaking change
- [ ] TypeScript interfaces updated
- [ ] Component logic implements new API
- [ ] Old API removed or deprecated appropriately
- [ ] Component constants updated
### Dependent Components
- [ ] Direct dependents updated
- [ ] Prop passing updated
- [ ] Event handling updated
- [ ] Composition patterns maintained
- [ ] Integration points verified
### Type System
- [ ] Component props interfaces updated
- [ ] Export types updated
- [ ] Enum to string union conversions (if applicable)
- [ ] Generic constraints updated
- [ ] Utility type helpers updated
## Testing Phase
### Unit Testing
- [ ] Component tests updated for new API
- [ ] Old API tests removed
- [ ] Edge cases covered
- [ ] Error conditions tested
- [ ] Accessibility tests updated
### Integration Testing
- [ ] Dependent component tests updated
- [ ] Cross-package integration tested
- [ ] Composition scenarios tested
- [ ] Event flow tested
- [ ] State management tested
### Build and Compilation
- [ ] TypeScript compilation passes
- [ ] All packages build successfully
- [ ] No circular dependencies
- [ ] Import/export consistency verified
- [ ] Bundle size impact assessed
### Quality Assurance
- [ ] Linting passes
- [ ] Style linting passes
- [ ] Prettier formatting applied
- [ ] No console errors/warnings
- [ ] Performance benchmarks within acceptable range
## Documentation Phase
### Migration Guide
- [ ] Clear before/after examples
- [ ] Migration strategies documented
- [ ] Common issues addressed
- [ ] Validation steps provided
- [ ] Timeline for migration suggested
### API Documentation
- [ ] Component API docs updated
- [ ] Props documentation current
- [ ] Examples reflect new API
- [ ] TypeScript signatures accurate
- [ ] Deprecation notices removed
### Changelog
- [ ] Breaking change clearly flagged
- [ ] Version bump appropriate
- [ ] Impact description clear
- [ ] Migration instructions included
- [ ] Related issues referenced
## Codemod Phase (If Applicable)
### Codemod Development
- [ ] Transform logic implements correctly
- [ ] Edge cases handled
- [ ] TypeScript compatibility maintained
- [ ] JSX patterns covered
- [ ] Test cases comprehensive
### Codemod Testing
- [ ] Dry run on real examples
- [ ] Before/after comparison reviewed
- [ ] Complex scenarios tested
- [ ] Error handling validated
- [ ] Performance acceptable
### Codemod Integration
- [ ] Added to codemod CLI
- [ ] Documentation written
- [ ] Usage examples provided
- [ ] Integration tests added
- [ ] Release notes updated
## Validation Phase
### Comprehensive Testing
- [ ] Full test suite passes
- [ ] Storybook stories render correctly
- [ ] Example applications work
- [ ] Performance tests pass
- [ ] Accessibility tests pass
### Build Verification
- [ ] All packages build
- [ ] Linting checks pass
- [ ] Type checking passes
- [ ] Bundle analysis clean
- [ ] No build warnings
### Manual Testing
- [ ] Component behavior verified in browser
- [ ] Responsive behavior tested
- [ ] Keyboard navigation tested
- [ ] Screen reader compatibility verified
- [ ] Cross-browser testing completed
## Release Phase
### Branch and Commit
- [ ] Feature branch created from vibe4
- [ ] Meaningful commit messages
- [ ] Breaking change flagged in commit
- [ ] Co-authored appropriately
- [ ] Commit history clean
### Pull Request
- [ ] PR title follows convention
- [ ] Description comprehensive and clear
- [ ] Breaking changes highlighted
- [ ] Migration instructions included
- [ ] Task/issue linked
- [ ] Reviewers assigned
### Code Review
- [ ] API design reviewed
- [ ] Implementation reviewed
- [ ] Test coverage reviewed
- [ ] Documentation reviewed
- [ ] Migration path validated
### CI/CD Pipeline
- [ ] All automated tests pass
- [ ] Build artifacts generated
- [ ] Quality gates passed
- [ ] Security scans clean
- [ ] Performance benchmarks acceptable
## Post-Implementation Phase
### Merge and Deploy
- [ ] PR approved and merged
- [ ] Branch cleaned up
- [ ] Version tagged appropriately
- [ ] Release notes published
- [ ] Team notified of changes
### Monitoring
- [ ] Error rates monitored
- [ ] Performance impact tracked
- [ ] User feedback collected
- [ ] Migration adoption tracked
- [ ] Support requests handled
### Follow-up Actions
- [ ] Migration deadline set and communicated
- [ ] Deprecated API removal scheduled
- [ ] Backward compatibility plan finalized
- [ ] Success metrics defined
- [ ] Lessons learned documented
================================================
FILE: .cursor/rules/accessibility-guidelines.mdc
================================================
---
description: 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.
globs:
alwaysApply: false
---
# Web Accessibility Guidelines
This 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.
## 1. WCAG Compliance
- **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.
## 2. Semantic HTML
- **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.
- **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.
## 3. ARIA (Accessible Rich Internet Applications)
- **Use ARIA When Necessary:** Employ ARIA attributes to enhance the accessibility of custom components or dynamic content where semantic HTML alone is insufficient.
- **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"`.
- **Valid ARIA:** Ensure all ARIA attributes and roles are used according to their specifications. Incorrect ARIA can create more barriers than it solves.
## 4. Keyboard Navigation
- **Ensure Keyboard Accessibility:** All interactive elements (links, buttons, form controls, custom components) **must** be operable via a keyboard.
- **Logical Tab Order:** The tab order should be logical and intuitive, typically following the visual flow of the page.
- **Visible Focus Indicators:** Ensure that keyboard focus is clearly visible on all focusable elements.
- **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.
## 5. Focus Management
- **Manage Focus Appropriately:** For dynamic content changes, such as opening modals, pop-ups, or expanding sections, manage focus programmatically.
- When a modal dialog opens, focus should move to an element within the dialog.
- When the dialog closes, focus should return to the element that triggered its opening.
- **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.
## 6. Form Input Labeling (Component Library Context)
- **Associate Labels with Inputs:** All form inputs (`<input>`, `<textarea>`, `<select>`) should generally have associated labels to describe their purpose.
- **Component Flexibility:** Since these are guidelines for a component library (`@vibe/core`):
- **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:
- A dedicated `label` prop that renders a visible `<label>` element correctly associated with the input.
- Props like `aria-label` or `aria-labelledby` to allow consumers to provide accessible names if a visible label is not desired or managed externally.
- **Guidance for Consumers:** Component documentation should guide users on how to provide accessible names for inputs, emphasizing the importance of labels.
- **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.
- **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.
================================================
FILE: .cursor/rules/base-components.mdc
================================================
---
description: "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."
globs:
alwaysApply: false
---
# Base Components Guide
This 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`.
## Component Overview
### BaseInput
**Purpose**: Low-level input wrapper that provides consistent styling, accessibility, and extensibility for form inputs.
**What it provides out of the box**:
- Consistent visual states (success, error, disabled, readonly)
- Size variants (small, medium, large)
- Left/right element rendering slots
- Basic accessibility attributes (`aria-invalid`, roles)
- Input focus management and styling
**What consumers must provide for optimal experience**:
- Proper `aria-label` or associated `<label>` element
- Error handling and validation feedback
- Appropriate `wrapperRole`/`inputRole` for complex components
- Clear placeholder text when appropriate
### BaseList
**Purpose**: Generic list component for dropdown menus, autocomplete results, and other option lists.
**What it provides out of the box**:
- Grouped options with optional dividers
- Selection and highlighting states
- Scrollable container with max height
- RTL support
- Sticky group titles
- Custom renderers for items and menu content
- "No results" message handling
**What consumers must provide for optimal experience**:
- Proper `menuAriaLabel` for screen readers
- Keyboard navigation handling (via parent component)
- Focus management integration
### BaseListItem
**Purpose**: Individual items within lists with consistent styling and interaction patterns.
**What it provides out of the box**:
- Selection and highlighting visual states
- Disabled and readonly states
- Start/end element slots for icons, avatars, etc.
- Tooltip integration
- Size variants consistent with parent list
- RTL support
**What consumers must provide for optimal experience**:
- Proper `role` attribute (usually "option" or "menuitem")
- Click handlers and keyboard event management
- Meaningful `tooltipProps` when needed
### InfoText
**Purpose**: Helper text component for forms that provides contextual information and validation feedback.
**What it provides out of the box**:
- Consistent styling for helper text
- Error, success, disabled, and readonly states
- Conditional rendering (null when no text provided)
- Proper text sizing and color variants
**What consumers must provide for optimal experience**:
- Proper `id` for `aria-describedby` association with an input
### FieldLabel
**Purpose**: Form label component with consistent styling and accessibility features.
**What it provides out of the box**:
- Icon support with proper positioning
- Required field indicator (asterisk)
- Proper `htmlFor`/`labelFor` association
- Consistent typography and spacing
**What consumers must provide for optimal experience**:
- Proper `htmlFor` or `labelFor` matching input `id`
- Clear, descriptive label text
- Appropriate `required` flag for form validation
## Accessibility Requirements
### BaseInput Accessibility
**MUST implement**:
- `aria-label` or associated `<label>` element
- `aria-invalid` for error states (automatically provided)
- `aria-describedby` linking to helper text
- `aria-labelledby` when using external labels
**SHOULD implement**:
- `aria-required` for required fields
- `wrapperRole` for complex widgets (e.g., "search", "combobox")
- `inputRole` for specialized inputs (e.g., "spinbutton", "combobox")
**Example Integration**:
```typescript
<FieldLabel
id="email-label"
labelText="Email Address"
required={true}
labelFor="email-input"
/>
<BaseInput
id="email-input"
type="email"
required={true}
aria-labelledby="email-label"
aria-describedby="email-info"
error={hasError}
placeholder="Enter your email"
/>
<InfoText
id="email-info"
text={errorText || "We'll never share your email"}
error={hasError}
/>
```
### BaseList Accessibility
**SHOULD implement**:
- `aria-activedescendant` for keyboard navigation
- `aria-multiselectable` for multi-select lists
- Proper focus management with parent component
**Example Integration**:
```typescript
const { getMenuProps, getItemProps } = useCombobox({
// ... combobox configuration
});
<BaseList
options={filteredOptions}
selectedItems={selectedItems}
highlightedIndex={highlightedIndex}
menuAriaLabel="Available options"
getMenuProps={getMenuProps}
getItemProps={getItemProps}
size="medium"
/>;
```
### BaseListItem Accessibility
**MUST implement**:
- Proper `role` attribute ("option" for listbox, "menuitem" for menu)
- `itemProps` with selection and navigation handlers
- `aria-selected` state
**SHOULD implement**:
- `aria-disabled` for disabled items
- Meaningful tooltip content for complex items
- Proper focus management
## Form Integration Patterns
### Complete Form Field Pattern
The base components work together to create accessible, complete form fields:
```typescript
const FormField = ({ label, value, onChange, error, helperText, required, id }) => {
const labelId = `${id}-label`;
const infoId = `${id}-info`;
return (
<div>
<FieldLabel id={labelId} labelText={label} required={required} labelFor={id} />
<BaseInput
id={id}
value={value}
onChange={onChange}
error={!!error}
required={required}
aria-labelledby={labelId}
aria-describedby={infoId}
/>
<InfoText id={infoId} text={error || helperText} error={!!error} />
</div>
);
};
```
## UI Features and Capabilities
### Visual States
All base components support consistent visual states:
- **Normal**: Default appearance
- **Disabled**: Reduced opacity, no pointer events
- **Readonly**: Subdued appearance, no user interaction
The BaseInput base component support the following visual states:
- **Error**: Red border/text for validation errors
- **Success**: Green border/text for successful validation
### Size Variants
Components support various size variants.
### Theming Support
Components use CSS custom properties for theming:
- Design tokens from Vibe's styling library (`@vibe/style`)
- Automatic dark/light mode support
- Consistent spacing and typography scales
## Common Patterns and Best Practices
### 1. Use className Prop for Styling Base Components
When 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.
```typescript
// ✅ Good - Use className prop
<BaseInput className={styles.myCustomInput} />
// ❌ Bad - Don't target with element or attribute selectors
// In CSS: button { ... } or [data-testid] { ... }
```
### 2. Always Provide Labels
```typescript
// ✅ Good
<FieldLabel labelText="Username" labelFor="username" />
<BaseInput id="username" aria-labelledby="username-label" />
// ❌ Bad
<BaseInput placeholder="Username" /> // Placeholder is not a label
```
### 2. Use InfoText for Contextual Information
```typescript
// ✅ Good
<BaseInput
id="password"
type="password"
aria-describedby="password-info"
/>
<InfoText
id="password-info"
text="Must be at least 8 characters"
/>
// ❌ Bad - no contextual information provided
<BaseInput type="password" />
```
### 3. Implement Proper Error Handling
```typescript
// ✅ Good
<BaseInput
error={!!validationError}
aria-describedby="field-error"
/>
<InfoText
id="field-error"
text={validationError}
error={!!validationError}
/>
// ❌ Bad - error state not properly communicated
<BaseInput style={{ borderColor: 'red' }} />
```
## Testing Accessibility
1. **Screen Reader**: Ensure proper label associations
2. **Keyboard Navigation**: Test tab order and key handlers
3. **Focus Management**: Verify focus states and trapping
4. **ARIA Attributes**: Check for proper roles and states
================================================
FILE: .cursor/rules/ci-cd-workflows.mdc
================================================
---
description: 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.
globs:
- ".github/workflows/**"
- ".github/actions/**"
alwaysApply: false
---
# CI/CD Workflows (GitHub Actions)
This project uses GitHub Actions for its Continuous Integration (CI) and Continuous Deployment (CD) pipelines.
## Workflow Definitions
The main workflow definitions are located in the `.github/workflows/` directory. Key workflows include:
- `pr.yml`: Runs checks on every Pull Request.
- `test.yml`: A reusable workflow to run unit tests, e2e, bundle size checks, linting, etc. Gets called on PRs and Release.
- `build-and-upload.yml`: Probably handles building artifacts and uploading them.
- `release.yml`: Manages the release process of Vibe v3 (@vibe/core@3) for new versions.
- `release-v2.yml`: Manages the release process of Vibe v2 (monday-ui-react-core@2) for critical bug fixes.
- `prerelease.yml`: Handles pre-release versions.
- `publish-storybook.yml`: Publishes new versions of Storybook. Gets called automatically after release or by calling it manually.
- `chromatic.yml`: Creates a Chromatic build to check for visual regression testing of the library's UI components.
## Custom Actions
The 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:
- `setup/`: Setting up the environment, installing dependencies.
- `determine-lerna-since-flag/`: Calculates whether we're running on master or on a branch, to determine the "--since" flag value for lerna.
- `check-changed-packages/`: Identifies which packages were modified in a PR to run targeted tests or builds only if changes were found.
- `download-builds/`: Downloads build artifacts. Used in workflows that uses `build-and-upload.yml` to download the uploaded build artifact.
- `git-creds/`: Handles Git credentials setup.
When 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).
================================================
FILE: .cursor/rules/component-internal-structure.mdc
================================================
---
description: "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."
globs:
- packages/core/src/components/**/*.tsx
alwaysApply: false
---
# Components Internal Structure
## General Guidelines
1. **Functional Components**: Always use functional components with React Hooks.
2. **TypeScript**: All components must be written in TypeScript.
3. **`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.
4. **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.
## File Structure (within the `.tsx` file)
### 1. Import Order
Imports should be ordered as follows:
1. **React Import**: `import React, { ... } from "react";`.
2. **Third-party Libraries**: e.g., `import cx from "classnames";`.
3. **Vibe Libraries (@vibe)**: e.g., `import { MyIcon } from "@vibe/icons";`.
4. **Internal Components/Hooks/Utils from the library**: e.g., `import useMergeRef from "../../hooks/useMergeRef";`.
5. **Type Imports**: e.g., `import { MyComponentProps } from "./MyComponent.types";`.
6. **Rest of the imports**: e.g., everything other than styles should be here.
7. **Style Imports**: Should always be the last import. e.g., `import styles from "./MyComponent.module.scss";`.
### 2. Component Definition
1. **`const` Declaration**: Define components using a `const` assignment with an arrow function.
```typescript
const MyComponent = React.forwardRef(...)
```
2. **Props**:
- Props interface/type must be defined in a separate `ComponentName.types.ts` file and imported.
- Destructure props directly in the function component's signature.
- The destructured props object should be typed with the imported props type. Example:
```typescript
import { MyComponentProps } from "./MyComponent.types";
const MyComponent = React.forwardRef(
({ prop1, prop2, ...rest }: MyComponentProps, ref: React.ForwardedRef<HTMLDivElement>) => {
// Component logic
}
);
```
#### Dismissible Component Props Pattern
**If your component can be dismissed/closed**, follow this established pattern to avoid redundant props:
- **Use `onClose` prop as both handler and boolean indicator** - don't add separate `dismissible` or `closable` props
- **Conditional rendering based on `onClose` presence**: `{onClose && <CloseButton onClick={onClose} />}`
**Implementation Example**:
```typescript
const MyComponent = ({ onClose, closeButtonAriaLabel = "Close", ...otherProps }: MyComponentProps) => {
return (
<div>
{/* ...Component content */}
{onClose && <IconButton ariaLabel={closeButtonAriaLabel} icon={CloseIcon} onClick={onClose} />}
</div>
);
};
```
**Why This Pattern**:
- **Simplifies API**: No need for separate boolean props like `dismissible={true}`
- **Clear Intent**: If user wants dismissible behavior, they pass `onClose`
### 3. State and Hooks
- **`useState`**: Use `useState` for simple local state.
- **`useCallback` and `useMemo`**: Use `useCallback` for memoizing functions passed as props or dependencies to other hooks. Use `useMemo` for memoizing computationally expensive values.
- **`useRef`**: Use `useRef` for accessing DOM elements or storing mutable values that don't trigger re-renders.
### 4. Styling
- **CSS Modules**: Import styles from `ComponentName.module.scss` as a named import. The named import should be `styles`.
```typescript
import styles from "./MyComponent.module.scss";
```
- **`classnames` (cx)**: Use the `classnames` utility (imported as `cx`) for conditionally applying or merging CSS classes.
```typescript
<div className={cx(styles.myClass, { [styles.active]: isActive }, classNameFromProps)} />
```
### 5. Sub-components
- 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.
- 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.
- 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.
### 6. Context
- Utilize React Context for sharing state that needs to be accessed by many components at different levels in the component tree.
- Define context in a `context` directory (e.g., `Modal/context/ModalContext.ts`). The file itself should typically be named `ComponentNameContext.ts` or `ComponentNameContext.tsx`.
- Provide context value using `Provider` that is exported from `ComponentNameContext.ts` or `ComponentName.tsx`.
This structure ensures that context logic is well-organized, type-safe, and easy to consume.
### 7. Default Export
- Export the component as a default export at the bottom of the file.
```typescript
export default MyComponent;
```
## Boilerplate for a New Component
Use this boilerplate as a starting point for creating new components:
```typescript
import React, { forwardRef, useState, useCallback, useMemo, useRef } from "react";
import cx from "classnames";
// import OtherInternalComponents from "...";
// import useMyCustomHook from "../../hooks/useMyCustomHook";
import { MyComponentProps } from "./MyComponent.types";
import styles from "./MyComponent.module.scss";
const MyComponent = forwardRef(
(
{
// Destructure props here
id,
className,
"data-testid": dataTestId
}: // ...other props
MyComponentProps,
ref: React.ForwardedRef<HTMLDivElement> // Adjust HTML element type
) => {
// const internalRef = useRef<HTMLDivElement>(null); // Adjust HTML element type
// const mergedRef = useMergeRef(ref, internalRef); // If using useMergeRef (if internalRef is required)
// const [myState, setMyState] = useState<StateType>();
// const memoizedValue = useMemo(() => {
// // ...
// }, [/* dependencies */]);
// const handleClick = useCallback(() => {
// // ...
// }, [/* dependencies */]);
// useEffect(() => {
// // ...
// return () => {
// // cleanup
// };
// }, [/* dependencies */]);
return (
<div
ref={ref} // or mergedRef
id={id}
className={cx(styles.myComponentBaseClass, className)}
data-testid={dataTestId}
>
{/* Component JSX */}
</div>
);
}
);
export default MyComponent;
```
Remember to consult specific component files or other relevant rules like `styling-conventions.mdc` or `naming-conventions.mdc` for more detailed guidance.
================================================
FILE: .cursor/rules/dependency-management.mdc
================================================
---
description: 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.
globs:
- "**/package.json"
- "package.json"
alwaysApply: false
---
# Dependency Management Guidelines
When managing dependencies for this monorepo, please adhere to the following principles to keep the library lean and efficient:
## 1. Minimize New Dependencies
Our primary goal is to avoid adding new dependencies unless they are absolutely essential. The component library should remain as lightweight as possible.
## 2. Prioritize Existing Dependencies
Before 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.
## 3. React Version Constraints
We 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.
## 4. Criteria for Adding New Dependencies
Only suggest installing a new package if:
- It is an absolute must for the functionality.
- It would significantly simplify development or reduce a considerable amount of overhead compared to using existing tools or custom solutions.
- The benefits clearly outweigh the cost of adding another dependency.
- It is a very popular library and considered the best practice for the requested use case.
Always justify the need for any new dependency by explaining why existing solutions are not adequate.
================================================
FILE: .cursor/rules/file-structures.mdc
================================================
---
description: "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)."
globs:
alwaysApply: false
---
# File Structure Conventions for @vibe/core
This 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.
## Top-Level Structure within `packages/core/src`
The `packages/core/src` directory generally contains the following:
- **`components/`**: Houses all UI components. Each component resides in its own subdirectory.
- **`hooks/`**: Contains custom React hooks that are reusable across multiple components.
- **`utils/`**: Includes utility functions that are not specific to any single component or hook.
- **`types/`**: Defines shared TypeScript types and interfaces used throughout the `@vibe/core` library.
- **`constants/`**: Stores constant values used across the library.
- **`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.
- **`index.ts`**: The main export file for the `@vibe/core` library, re-exporting key modules and components.
## Component-Specific Structure (`packages/core/src/components/ComponentName/`)
Each component within `packages/core/src/components/` should follow a consistent structure:
### Core Files
- **`ComponentName.tsx`**: The main React component file.
- **`ComponentName.types.ts`**: TypeScript type definitions and interfaces specific to the component.
- **`ComponentName.module.scss`**: SCSS module for styling the component.
- **`index.ts`**: Exports the component and related types/interfaces.
### Subdirectories
- **`__tests__/`**: Contains unit and integration tests **only for the main component files** in the root directory.
- Files within this directory follow the pattern `ComponentName.test.ts`.
- **DO NOT** place tests for subcomponents, hooks, utils, or context in this directory.
- **`components/`**: For more complex components, this directory can house sub-components that are only used by `ComponentName`.
- **Each subcomponent should have its own `__tests__/` directory** if tests are needed.
- Structure: `ComponentName/components/SubComponent/__tests__/SubComponent.test.tsx`
- **`hooks/`**: Custom React hooks that are specific to `ComponentName` and not intended for reuse elsewhere.
- **Should contain a `__tests__/` subdirectory** if hook tests are needed.
- Structure: `ComponentName/hooks/__tests__/useHookName.test.ts`
- **`utils/`**: Utility functions specific to `ComponentName`.
- **Should contain a `__tests__/` subdirectory** if utility tests are needed.
- Structure: `ComponentName/utils/__tests__/utilityName.test.ts`
- **`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`).
- **Should contain a `__tests__/` subdirectory** if context tests are needed.
- Structure: `ComponentName/context/__tests__/ComponentNameContext.test.ts`
- **`consts/`**: Component-specific constant values that are not intended for reuse elsewhere.
- **DO NOT** place constants files at the root of the component directory.
- **Use meaningful file names** that describe the purpose, not generic names like `MyComponentConstants.ts` or `consts.ts`.
- Examples: `ComponentName/consts/variants.ts`, `ComponentName/consts/validate-colors.ts`, `ComponentName/consts/sizes.ts`
- **Should contain a `__tests__/` subdirectory** if constants tests are needed.
- Structure: `ComponentName/consts/__tests__/sizes.test.ts`
### General Guidelines
- **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.
- **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.
- **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.
================================================
FILE: .cursor/rules/layout-components.mdc
================================================
---
description: Guidelines for using Box and Flex layout components in the @vibe/core library instead of custom CSS for spacing, borders, and flexbox layouts.
globs: *.tsx,*.ts
---
# Layout Components Guidelines
This 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.
## Core Principle: Props Over CSS
**Always prefer component props over custom CSS** for layout properties that Box and Flex provide. This ensures:
- Consistent design token usage
- Better maintainability
- Type safety
- Reduced CSS bundle size
- Design system compliance
## Box Component Usage
### When to Use Box
- **Container styling**: Backgrounds, borders, shadows, padding, margins
- **Scrollable containers**: Use `scrollable` prop instead of `overflow: auto` in CSS
- **Bordered containers**: Use `border` props instead of CSS border
- **Spacing containers**: Use margin/padding props instead of CSS spacing
- **Styled wrappers**: Any div that needs visual styling
### Box Props Reference
#### Spacing Props
```tsx
// ❌ Avoid CSS
<div className={styles.container}>
<Content />
</div>
// .container { padding: var(--space-16); margin-bottom: var(--space-24); }
// ✅ Prefer Box props
<Box padding="medium" marginBottom="large">
<Content />
</Box>
```
**Available spacing values**: `xs`, `small`, `medium`, `large`, `xl`, `xxl`, `xxxl`.
If 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.
- Margin props also support: `auto`, `none`
- Directional props: `marginX`, `marginY`, `marginTop`, `marginEnd`, `marginBottom`, `marginStart`
- Directional props: `paddingX`, `paddingY`, `paddingTop`, `paddingEnd`, `paddingBottom`, `paddingStart`
#### Border & Visual Props
```tsx
// ❌ Avoid CSS
<div className={styles.bordered}>
<Content />
</div>
// .bordered { border: 1px solid var(--border-color); border-radius: 8px; }
// ✅ Prefer Box props
<Box border borderColor="uiBorderColor" rounded="medium">
<Content />
</Box>
```
**Border colors**: `uiBorderColor`, `layoutBorderColor`
**Rounded values**: `small`, `medium`, `big`
**Shadow values**: `xs`, `small`, `medium`, `large`
#### Scrollable Containers
```tsx
// ❌ Avoid CSS
<div className={styles.scrollableContainer}>
<Content />
</div>
// .scrollableContainer { overflow: auto; }
// ✅ Prefer Box scrollable prop
<Box scrollable>
<Content />
</Box>
```
#### Background & Text Colors
```tsx
// ❌ Avoid CSS
<div className={styles.cardContainer}>
<Content />
</div>
// .cardContainer { background-color: var(--secondary-background-color); }
// ✅ Prefer Box props
<Box backgroundColor="secondaryBackgroundColor" textColor="primaryTextColor">
<Content />
</Box>
```
**Background colors**: `primaryBackgroundColor`, `secondaryBackgroundColor`, `greyBackgroundColor`, `allgreyBackgroundColor`, `invertedColorBackground`
**Text colors**: `primaryTextColor`, `textColorOnInverted`, `secondaryTextColor`
## Flex Component Usage
### When to Use Flex
- **Layout positioning**: Arrange elements horizontally or vertically
- **Gap spacing**: Space between flex items
- **Alignment**: Justify and align flex items
- **Responsive layouts**: Wrapping flex containers
- **Toolbar/header layouts**: Horizontal arrangements with spacing
### Flex Props Reference
#### Basic Layout
```tsx
// ❌ Avoid CSS
<div className={styles.flexContainer}>
<Item1 />
<Item2 />
<Item3 />
</div>
// .flexContainer { display: flex; gap: 16px; justify-content: space-between; }
// ✅ Prefer Flex props
<Flex gap="medium" justify="space-between">
<Item1 />
<Item2 />
<Item3 />
</Flex>
```
**Direction values**: `row` (default), `column`
**Gap values**: `xs` (4px), `small` (8px), `medium` (16px), `large` (24px), or custom number in px
**Justify values**: `start`, `center`, `end`, `stretch`, `space-around`, `space-between`, `initial`
**Align values**: `start`, `center`, `end`, `stretch`, `baseline`, `initial`
#### Common Patterns
```tsx
// Horizontal toolbar
<Flex gap="small" justify="space-between" align="center">
<Button>Action 1</Button>
<Button>Action 2</Button>
</Flex>
// Vertical stack
<Flex direction="column" gap="medium">
<Item1 />
<Item2 />
<Item3 />
</Flex>
// Centered content
<Flex justify="center" align="center">
<Content />
</Flex>
// With custom gap (px value)
<Flex gap={32} direction="column">
<Item1 />
<Item2 />
</Flex>
```
#### Clickable Flex
When providing `onClick`, Flex automatically wraps with Clickable component:
```tsx
<Flex gap="small" onClick={handleClick} ariaLabel="Clickable toolbar" tabIndex={0}>
<Item1 />
<Item2 />
</Flex>
```
## Component Combination Patterns
### Box + Flex for Complex Layouts
```tsx
// Container with border and internal flex layout
<Box border rounded="medium" padding="medium">
<Flex gap="small" justify="space-between" align="center">
<Text>Title</Text>
<Button>Action</Button>
</Flex>
</Box>
// Scrollable flex container
<Box scrollable>
<Flex direction="column" gap="small">
{items.map(item => <Item key={item.id} {...item} />)}
</Flex>
</Box>
```
### Nested Layout Structure
```tsx
// Page layout example
<Box padding="large">
<Flex direction="column" gap="large">
{/* Header */}
<Flex justify="space-between" align="center">
<Heading>Page Title</Heading>
<Button>Action</Button>
</Flex>
{/* Content cards */}
<Flex gap="medium" wrap>
{cards.map(card => (
<Box key={card.id} border rounded="medium" padding="medium" backgroundColor="secondaryBackgroundColor">
<Card {...card} />
</Box>
))}
</Flex>
</Flex>
</Box>
```
## Migration Guidelines
### From CSS to Box
1. **Replace border CSS**: `border: 1px solid var(--border-color)` → `border` prop
2. **Replace padding/margin CSS**: `padding: var(--spacing-medium)` → `padding="medium"`
3. **Replace overflow CSS**: `overflow: auto` → `scrollable` prop
4. **Replace background CSS**: `background-color: var(--secondary-bg)` → `backgroundColor="secondaryBackgroundColor"`
### From CSS to Flex
1. **Replace display flex**: `display: flex` → `<Flex>`
2. **Replace gap CSS**: `gap: 16px` → `gap="medium"` or `gap={16}`
3. **Replace justify-content**: `justify-content: space-between` → `justify="space-between"`
4. **Replace align-items**: `align-items: center` → `align="center"`
5. **Replace flex-direction**: `flex-direction: column` → `direction="column"`
## Anti-Patterns to Avoid
### ❌ Don't Use CSS When Props Are Available
```tsx
// ❌ Bad
<div className={styles.container}>
<Content />
</div>
// .container {
// display: flex;
// gap: 16px;
// padding: 24px;
// border: 1px solid var(--border-color);
// }
// ✅ Good
<Box border padding="large">
<Flex gap="medium">
<Content />
</Flex>
</Box>
```
### ❌ Don't Mix CSS Layout with Component Props
```tsx
// ❌ Bad - mixing CSS flex with Flex props
<Flex className={styles.customFlex} gap="medium">
<Content />
</Flex>
// .customFlex { justify-content: space-between; } // Use justify prop instead
// ✅ Good
<Flex gap="medium" justify="space-between">
<Content />
</Flex>
```
### ❌ Don't Use Plain Divs for Styled Containers
```tsx
// ❌ Bad
<div className={styles.card}>
<div className={styles.scrollableContent}>
<Content />
</div>
</div>
// ✅ Good
<Box border rounded="medium" padding="medium">
<Box scrollable>
<Content />
</Box>
</Box>
```
## Element Types
Both Box and Flex support `elementType` prop to render as different HTML elements:
```tsx
<Box elementType="section" padding="large">
<Content />
</Box>
<Flex elementType="header" justify="space-between">
<Logo />
<Navigation />
</Flex>
```
## Accessibility
- Use `ariaLabel` and `ariaLabelledby` props on Flex when it's a meaningful container
- Box and Flex support all standard HTML accessibility attributes
- When using `onClick` on Flex, proper accessibility attributes are automatically handled
## Examples from Codebase
See usage examples in:
- [Box Stories](mdc:packages/core/src/components/Box/__stories__/Box.stories.tsx)
- [Flex Stories](mdc:packages/core/src/components/Flex/__stories__/Flex.stories.tsx)
================================================
FILE: .cursor/rules/monorepo-structure.mdc
================================================
---
description: 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.
globs:
- "lerna.json"
- "package.json"
alwaysApply: false
---
# Monorepo Navigation & Structure
This project is a Lerna monorepo that utilizes Yarn Workspaces for managing packages.
- **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.
- **Yarn Workspaces**:
- 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.
- To add a dependency to a specific package: `yarn workspace <package-name> add <dependency-name>`
- To add a dev dependency to a specific package: `yarn workspace <package-name> add -D <dependency-name>`
- To add a dependency to the root (for global tools like Lerna): `yarn add -W <dependency-name>`
- **Running Scripts**:
- 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`).
- You can run a script for all packages using: `yarn workspaces run <script-name>` or `lerna run <script-name>`.
- To run a script in a specific package: `yarn workspace <package-name> run <script-name>`.
- **Lerna**: Lerna is used for tasks like versioning, publishing, and running commands across multiple packages. Key commands you might encounter:
- `lerna run <script>`: Runs an npm script in each package that contains that script.
- `lerna exec -- <command>`: Executes an arbitrary command in each package.
- **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.
================================================
FILE: .cursor/rules/naming-conventions.mdc
================================================
---
description: "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."
globs:
alwaysApply: false
---
# Naming Conventions for @vibe/core
This 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.
## General Principles
- **Clarity and Predictability**: Names should be clear, unambiguous, and predictable.
- **Consistency**: Follow established patterns consistently across all files and components.
## File and Directory Naming
### Component Folders
- Each component resides in its own directory within `packages/core/src/components/`.
- Component directory names MUST use `PascalCase`.
- Example: `packages/core/src/components/MyNewComponent/`
### Component Files
- **Main Component File**: The main React component file MUST be named `ComponentName.tsx`, where `ComponentName` matches the directory name (`PascalCase`).
- Example: `packages/core/src/components/MyNewComponent/MyNewComponent.tsx`
- **Style Files**: SCSS module files for components MUST be named `ComponentName.module.scss`.
- Example: `packages/core/src/components/MyNewComponent/MyNewComponent.module.scss`
- Refer to the styling-conventions.mdc file in the monorepo for CSS/SCSS specific conventions.
- **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.
- Example: `packages/core/src/components/MyNewComponent/MyNewComponent.types.ts`
- **Constants**: Files exporting constants specific to a component SHOULD be named `ComponentNameConstants.ts`.
- Example: `packages/core/src/components/MyNewComponent/MyNewComponentConstants.ts`
- **Index File**: Each component directory MUST have an `index.ts` file that exports the main component and any other relevant modules (types, constants, etc.).
- Example: `packages/core/src/components/MyNewComponent/index.ts`
### Sub-directories (within a component folder)
- **Tests**: Test files SHOULD be co-located with the code they test in respective `__tests__` subdirectories.
- **Main Component Tests**: Place in `ComponentName/__tests__/ComponentName.test.tsx`
- **Subcomponent Tests**: Place in `ComponentName/components/SubComponent/__tests__/SubComponent.test.tsx`
- **Hook Tests**: Place in `ComponentName/hooks/__tests__/useHookName.test.ts`
- **Utility Tests**: Place in `ComponentName/utils/__tests__/utilityName.test.ts`
- **Context Tests**: Place in `ComponentName/context/__tests__/ComponentNameContext.test.ts`
- **DO NOT** centralize all tests in the component root `__tests__` directory.
- **Stories**: Storybook files SHOULD be placed in a `packages/docs` subdirectory.
- Story files typically follow the pattern `ComponentName.stories.tsx`.
- Refer to the storybook-stories.mdc file in the monorepo for Storybook specific conventions.
- **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.
- File names SHOULD be `camelCase.ts` for utils/helpers or `PascalCase.ts` if they export React components.
- **Custom Hooks**: Component-specific custom hooks SHOULD be placed in a `hooks` subdirectory.
- Hook files SHOULD follow the pattern `useHookName.ts` and use camelCase.
- 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`.
### General File Naming
- 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.
- Directory names for common utilities or hooks (e.g., `packages/core/src/hooks/`, `packages/core/src/utils/`) SHOULD be `camelCase`.
## Code Naming Conventions
### Component Names
- React component names MUST use `PascalCase`.
- Example: `const MyNewComponent = (props) => { /* ... */ }`.
### Prop Names
- Prop names for React components MUST use `camelCase`.
- Example: `<MyNewComponent isLoading={true} userName=\"DefaultUser\" />`.
- For boolean props, the name SHOULD clearly indicate the positive case.
- Prefer prefixes like `is` or `has` for clarity (e.g., `isEnabled` or `isVisible` rather than just `enabled`).
- Common, unambiguous adjective props like `loading`, `active`, `open`, `checked`, or `required` are also acceptable.
- However, if the HTML attribute is `disabled`, using `disabled` is acceptable for consistency.
#### Prop Values
- **String Literals**: Component prop values should use string literals rather than static properties
- Example: `<Button size="small" />` instead of `<Button size={Button.sizes.SMALL} />`
### Variable and Function Names
- Local variables and function names SHOULD use `camelCase`.
- Example: `const itemCount = 5;`.
- Example: `function calculateTotal() { /* ... */ }`.
- Constants (values that do not change) SHOULD be named in `UPPER_SNAKE_CASE`.
- Example: `const MAX_USERS = 100;`.
### Enum Names
- Enum names SHOULD use `PascalCase`.
- Enum members SHOULD use `PascalCase` or `UPPER_SNAKE_CASE` depending on the context.
### Type and Interface Names
- TypeScript type aliases and interface names MUST use `PascalCase`.
- Example: `type UserProfile = { /* ... */ };`.
- Example: `interface ComponentProps { /* ... */ }`.
### Vibe Standard Types
When working with Vibe components, always use the established standard types for common prop patterns:
- **Icon Props**: Always use `SubIcon` type for any prop that accept icons.
- Example: `icon?: SubIcon;` instead of generic types like `ReactNode` or custom icon types.
- **Component Props**: Extend `VibeComponentProps` for component props (to get `className`, `id`, `data-testid`).
- **Consistent Typing**: Always check existing similar components to see what Vibe standard types they use before creating custom types.
### CSS Class Names
- CSS class names within `.module.scss` files MUST use `camelCase`.
- Refer to the styling-conventions.mdc file in the monorepo for more details.
### Context Naming
Context-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/`).
- **Context File**: The file containing the context definition, provider, and consumer hook SHOULD be named `ComponentNameContext.ts` or `ComponentNameContext.tsx` (e.g., `ModalContext.tsx`).
- **Context Object**: The context object created by `React.createContext` SHOULD be named `ComponentNameContext` (e.g., `const ModalContext = createContext(...)`).
- **Provider Component**: The React component that provides the context value SHOULD be named `ComponentNameProvider` (e.g., `export const ModalProvider = (...)`).
- **Consumer Hook**: The custom hook for consuming the context SHOULD be named `useComponentName` (e.g., `export const useModal = () => ...`).
- **Context Props Type/Interface**: The type or interface defining the shape of the context value SHOULD be named `ComponentNameContextProps` (e.g., `interface ModalContextProps { ... }`).
- **Provider Props Type/Interface**: The type or interface for the Provider component's props SHOULD be named `ComponentNameProviderProps` (e.g., `interface ModalProviderProps { ... }`).
================================================
FILE: .cursor/rules/new-component-implementation.mdc
================================================
---
description: "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."
globs:
alwaysApply: false
---
# New Component Implementation Workflow
**Purpose**: Provides a systematic approach to implementing new Vibe components, ensuring consistency, efficiency, and adherence to project standards.
## Pre-Implementation Research Phase
### Study Similar Components
Before writing any code, examine 2-3 existing components that share similar functionality or patterns. For example:
- For informational components: [AttentionBox.tsx](mdc:packages/core/src/components/next/AttentionBox/AttentionBox.tsx), [AlertBanner.tsx](mdc:packages/core/src/components/AlertBanner/AlertBanner.tsx)
- For action-oriented components: [Button.tsx](mdc:packages/core/src/components/Button/Button.tsx), [SplitButton.tsx](mdc:packages/core/src/components/SplitButton/SplitButton.tsx)
- For layout components: [Flex.tsx](mdc:packages/core/src/components/Flex/Flex.tsx), [Box.tsx](mdc:packages/core/src/components/Box/Box.tsx)
**Reference**: [component-internal-structure](mdc:.cursor/rules/component-internal-structure.mdc) for detailed component structure patterns and conventions.
### Identify Dependencies
Research the exact APIs of Vibe components you'll integrate with:
- **Typography**: [Text.tsx](mdc:packages/core/src/components/Text/Text.tsx), [Heading.tsx](mdc:packages/core/src/components/Heading/Heading.tsx)
- **Actions**: [Button.tsx](mdc:packages/core/src/components/Button/Button.tsx), [Link.tsx](mdc:packages/core/src/components/Link/Link.tsx)
- **Layout**: [Flex.tsx](mdc:packages/core/src/components/Flex/Flex.tsx)
- Check component types files (e.g., [Button.types.ts](mdc:packages/core/src/components/Button/Button.types.ts)) for available props
**Reference**: [dependency-management](mdc:.cursor/rules/dependency-management.mdc) for guidelines on choosing and managing dependencies.
### Understand Project Structure
- Base types: [VibeComponentProps.ts](mdc:packages/core/src/types/VibeComponentProps.ts)
- Test utilities: [test-ids-utils.ts](mdc:packages/core/src/tests/test-ids-utils.ts)
- Constants: [constants.ts](mdc:packages/core/src/tests/constants.ts)
- Design tokens: Check existing SCSS files for available CSS custom properties
**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.
## Implementation Order
### 1. Types First (`ComponentName.types.ts`)
- Extend [VibeComponentProps.ts](mdc:packages/core/src/types/VibeComponentProps.ts)
- Define clear interfaces before implementation
- Use `ReactNode` for flexible content props
- Follow existing patterns from similar components
**Reference**: [naming-conventions](mdc:.cursor/rules/naming-conventions.mdc) for proper naming patterns for types and interfaces.
### 2. Core Component (`ComponentName.tsx`)
- Use `forwardRef` pattern. For example following [Button.tsx](mdc:packages/core/src/components/Button/Button.tsx)
- Import from established Vibe components
- Follow existing test ID patterns from [constants.ts](mdc:packages/core/src/tests/constants.ts)
- Use CSS Modules for styling
- **MANDATORY**: Add `[data-vibe]` attribute for component identification
#### Essential `[data-vibe]` Attribute Implementation
**CRITICAL**: Every new component MUST include the `[data-vibe]` attribute on its root element for component identification in the DOM.
**Import Pattern**:
```tsx
import { ComponentVibeId } from "../../tests/constants";
```
**Usage Pattern**:
Add to the root element's props:
```tsx
data-vibe={ComponentVibeId.ATTENTION_BOX}
```
**Implementation Examples**:
**Enum Naming Pattern**:
The `ComponentVibeId` enum follows SCREAMING_SNAKE_CASE format. For example:
- `Button` → `ComponentVibeId.BUTTON`
- `AttentionBox` → `ComponentVibeId.ATTENTION_BOX`
- `MenuButton` → `ComponentVibeId.MENU_BUTTON`
- `LinearProgressBar` → `ComponentVibeId.LINEAR_PROGRESS_BAR`
**References**:
- [component-internal-structure](mdc:.cursor/rules/component-internal-structure.mdc) for detailed component structure conventions
- [accessibility-guidelines](mdc:.cursor/rules/accessibility-guidelines.mdc) for ensuring proper accessibility implementation
- [react-context](mdc:.cursor/rules/react-context.mdc) if your component needs to use or provide React Context
- [naming-conventions](mdc:.cursor/rules/naming-conventions.mdc) for component and prop naming patterns
### 3. Component Constants (Optional: `consts/` directory)
**If your component needs constant values**, organize them properly:
- **MANDATORY**: Place constants files inside a `consts/` folder, never at the component root
- **MANDATORY**: Use meaningful file names that describe purpose, not generic names like `MyComponentConstants.ts` or `consts.ts`
- **Examples of good names**: `variants.ts`, `validate-colors.ts`, `events.ts`, `sizes.ts`
**Reusability Rule**: If constants are used across multiple components, place them in the top-level `packages/core/src/constants/` directory instead.
**Reference**: [file-structures](mdc:.cursor/rules/file-structures.mdc) for detailed constants organization patterns.
### 4. Styles (`ComponentName.module.scss`)
- NEVER Import anything inside the module scss file
- Use established design tokens and spacing variables
**Reference**: [styling-conventions](mdc:.cursor/rules/styling-conventions.mdc) for comprehensive CSS Modules guidelines, design token usage, and styling best practices.
### 5. Index Exports (`index.ts`)
- On the same root directory of the component (e.g., `packages/core/src/components/MyComponent/index.ts`)
- Export both component and types
- Follow pattern: `export { default as ComponentName } from "./ComponentName"`
**Reference**: [file-structures](mdc:.cursor/rules/file-structures.mdc) for export patterns and file organization conventions.
### 6. Add to Global Exports
- Update [components/index.ts](mdc:packages/core/src/components/index.ts) in alphabetical order
- Add test IDs to [constants.ts](mdc:packages/core/src/tests/constants.ts) enum
- **MANDATORY**: Add your component to the `ComponentVibeId` enum in [constants.ts](mdc:packages/core/src/tests/constants.ts)
#### Adding ComponentVibeId Enum Value
**CRITICAL**: Every new component MUST have a corresponding entry in the `ComponentVibeId` enum.
**Steps**:
1. Find the `ComponentVibeId` enum
2. Add your component in alphabetical order using SCREAMING_SNAKE_CASE format
**Naming Convention**: Use the exact component name as the enum value, but the key should be in SCREAMING_SNAKE_CASE:
- `Button` → `BUTTON = "Button"`
- `MenuButton` → `MENU_BUTTON = "MenuButton"`
- `LinearProgressBar` → `LINEAR_PROGRESS_BAR = "LinearProgressBar"`
**References**:
- [file-structures](mdc:.cursor/rules/file-structures.mdc) for global export patterns
- [monorepo-structure](mdc:.cursor/rules/monorepo-structure.mdc) for understanding where and how to add global exports
### 7. Tests (`__tests__/ComponentName.test.tsx`)
- Follow testing patterns from similar components
- Test actual component behavior, not assumptions
- Check for proper test ID assignments
- Verify accessibility attributes (e.g., `aria-hidden`, `aria-disabled`)
**Reference**:
- [accessibility-guidelines](mdc:.cursor/rules/accessibility-guidelines.mdc) for comprehensive accessibility testing requirements and patterns.
- [file-structures](mdc:.cursor/rules/file-structures.mdc) for detailed test organization patterns.
### 8. Stories (`__stories__/ComponentName.stories.tsx`)
- Create comprehensive examples covering all variants
**Reference**: [storybook-stories](mdc:.cursor/rules/storybook-stories.mdc) for detailed Storybook conventions, story structure, and MDX documentation requirements.
## Validation and Quality Phase
### Development Validation
1. **TypeScript Check**
2. **Test Suite**: `yarn test src/components/ComponentName/` (will recursively run all tests in subdirectories)
3. **Lint and Format**: `yarn prettier --write src/components/ComponentName/` then `yarn lint src/components/ComponentName/ --fix`
### Integration Verification
- Verify component exports work by importing in test file
- Check that all test IDs are properly defined in [constants.ts](mdc:packages/core/src/tests/constants.ts)
- Ensure component follows established Vibe patterns
## Key Principles
### Research-Driven Development
- **Don't Guess APIs**: Always check actual component implementations
- **Study Patterns**: Look at how similar components handle similar problems
- **Understand Context**: Review existing test patterns and story structures
### Modern Prop Patterns
- **Use String Literals**: Define prop values as string literals instead of static properties
- ✅ Prefer: `<MyComponent size="large" variant="primary" />`
- ❌ Avoid: `<MyComponent size={MyComponent.sizes.LARGE} variant={MyComponent.variants.PRIMARY} />`
- **Backward Compatibility**: While legacy static properties may exist in the codebase, new components should not include them
### Systematic Progression
- **Follow Order**: Complete each phase before moving to next
- **Validate Early**: Run TypeScript and tests frequently
- **Defer Formatting**: Focus on functionality first, format as final step
### Quality Standards
- **Test Real Behavior**: Verify actual DOM output and accessibility attributes
- **Follow Conventions**: Use established patterns for file structure and naming
- **Integrate Properly**: Ensure component works within the existing Vibe ecosystem
## Common Pitfalls to Avoid
1. **API Assumptions**: Don't assume component APIs (e.g., Link uses `text` prop, not children)
2. **Premature Formatting**: Don't interrupt development flow with linting - batch it at the end
3. **Test Assumptions**: Test actual behavior (disabled buttons may use `aria-disabled` vs `disabled`)
4. **Missing Integration**: Forgetting to add exports to main index files or test constants
5. **Design Token Guessing**: Check existing SCSS files for available CSS custom properties
6. **Missing `[data-vibe]` Attribute**: Forgetting to add the mandatory `[data-vibe]` attribute or missing the corresponding `ComponentVibeId` enum entry
This workflow ensures consistent, high-quality component implementation that integrates seamlessly with the Vibe design system.
================================================
FILE: .cursor/rules/package-separation.mdc
================================================
# Package Separation Guide
This 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.
## When to Use This Rule
Use this rule when:
- Separating a component from `packages/core/src/components/` into a new package under `packages/components/`
- The component has deprecated enums that need special export handling
- You need to maintain backward compatibility while avoiding enum exposure
## How AI Assistants Should Use This Rule
When a user asks to separate a component:
1. **Gather Information:**
- Component name (e.g., `Badge`)
- Package name (typically kebab-case of component name, e.g., `badge`)
- Check if component has enums (look for `ComponentNameConstants.ts`)
- Identify dependencies (check imports in the component)
2. **Use Templates:**
- Copy files from `.cursor/templates/package-separation/`
- Replace all placeholders (see Template Files section below)
- Create the necessary directory structure
3. **Follow the Step-by-Step Process:**
- Create directories
- Move component files
- Set up exports (this is CRITICAL - see section 4)
- Update core package
- Update imports
- Build and verify
4. **Verify:**
- Run build commands
- Check for TypeScript errors
- Confirm enum imports are correct (no renaming in consumer code)
## Package Structure Pattern
All separated packages should follow this structure (using Tooltip as the reference example):
```
packages/components/tooltip/
├── src/
│ ├── Tooltip/
│ │ ├── Tooltip.tsx # Main component
│ │ ├── Tooltip.types.ts # Type definitions (string unions)
│ │ ├── TooltipConstants.ts # Deprecated enums
│ │ ├── Tooltip.module.scss # Styles
│ │ ├── __tests__/ # Tests
│ │ └── index.ts # Subdirectory exports (CRITICAL)
│ ├── index.ts # Main package exports
│ └── types/
│ └── files.d.ts # Module declarations
├── package.json
├── tsconfig.json
├── rollup.config.mjs
└── vitest.config.mjs
```
## Template Files
Template files are available in `.cursor/templates/package-separation/`:
- `package.json` - Package configuration with placeholders
- `tsconfig.json` - TypeScript configuration
- `rollup.config.mjs` - Rollup bundler configuration
- `vitest.config.mjs` - Test configuration
- `vitest.setup.mjs` - Test setup file
- `subdirectory-index.ts` - Template for component subdirectory exports
- `main-index.ts` - Template for main package exports
- `files.d.ts` - TypeScript module declarations
**Placeholders to replace:**
- `{{PACKAGE_NAME}}` - kebab-case package name (e.g., `my-component`)
- `{{ComponentName}}` - PascalCase component name (e.g., `MyComponent`)
- `{{EnumName1}}`, `{{EnumName2}}` - Enum names if component has deprecated enums
## Step-by-Step Separation Process
### 1. Create Package Directory Structure
Create the new package under `packages/components/[component-name]/`:
```bash
# Create directories
mkdir -p packages/components/[component-name]/src/[ComponentName]
mkdir -p packages/components/[component-name]/src/types
# Copy template files and replace placeholders
cp .cursor/templates/package-separation/package.json packages/components/[component-name]/
cp .cursor/templates/package-separation/tsconfig.json packages/components/[component-name]/
cp .cursor/templates/package-separation/rollup.config.mjs packages/components/[component-name]/
cp .cursor/templates/package-separation/vitest.config.mjs packages/components/[component-name]/
cp .cursor/templates/package-separation/vitest.setup.mjs packages/components/[component-name]/
cp .cursor/templates/package-separation/files.d.ts packages/components/[component-name]/src/types/
# Then replace {{PACKAGE_NAME}} and {{ComponentName}} in these files
```
**AI Assistant Instructions:**
When helping with package separation:
1. Copy the template files from `.cursor/templates/package-separation/`
2. Replace all `{{PACKAGE_NAME}}` with the actual package name (kebab-case)
3. Replace all `{{ComponentName}}` with the actual component name (PascalCase)
4. Replace enum placeholders with actual enum names from the component
5. Update dependencies in `package.json` based on what the component imports
### 2. Move Component Files
Move these files from `packages/core/src/components/[ComponentName]/` to the new package:
- Component source files (`.tsx`, `.ts`)
- Types files (`.types.ts`)
- Constants files (with enums)
- Styles (`.module.scss`)
- Tests (`__tests__/`)
- Stories (`__stories__/`) if applicable
**Important:** Do **NOT** create `CHANGELOG.md` files for new packages. The changelog is managed automatically by the build/release system (Lerna).
### 3. Set Up Package Configuration
#### package.json
Follow the pattern from existing separated packages. Key fields:
```json
{
"name": "@vibe/[component-name]",
"version": "3.0.0",
"type": "module",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"exports": {
"./package.json": "./package.json",
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.js",
"default": "./dist/index.js"
}
}
}
```
#### tsconfig.json, rollup.config.mjs, vitest.config.mjs
Copy these from an existing separated package (e.g., `@vibe/tooltip` or `@vibe/dialog`) and adjust as needed.
### 4. Configure Exports (CRITICAL)
This is the most important step to avoid enum/type naming conflicts.
#### Component Subdirectory Index (`src/ComponentName/index.ts`)
**Pattern:**
```typescript
// Export the component (as named export, NOT default)
export { default as ComponentName, type ComponentNameProps } from "./ComponentName";
// Export enums with "Enum" suffix to avoid conflicts with types
export { EnumName1 as EnumName1Enum, EnumName2 as EnumName2Enum } from "./ComponentNameConstants";
// Export types (string unions)
export * from "./ComponentName.types";
```
**Real Example (Tooltip):**
```typescript
export { default as Tooltip, type TooltipProps } from "./Tooltip";
export { TooltipPositions as TooltipPositionsEnum, TooltipTheme as TooltipThemeEnum } from "./TooltipConstants";
export * from "./Tooltip.types";
```
**Real Example (Dialog):**
```typescript
export { default as Dialog, type DialogProps } from "./Dialog";
export {
HideShowEvent as DialogTriggerEventEnum,
AnimationType as DialogAnimationTypeEnum,
DialogPosition as DialogPositionEnum,
DialogSize as DialogSizeEnum
} from "./DialogConstants";
export * from "./Dialog.types";
```
#### Main Package Index (`src/index.ts`)
**Pattern:**
```typescript
export * from "./ComponentName";
```
This simple wildcard re-export works because the subdirectory index already handles the enum naming.
### 5. Update Core Package Exports
Edit `packages/core/src/components/index.ts`:
**Pattern:**
```typescript
// TODO: export * after removing enums
export {
ComponentName,
type ComponentNameProps,
type TypeName1,
type TypeName2
// ... other types, but NOT enums
} from "@vibe/component-name";
```
**Why:** This prevents deprecated enums from being exposed in the core package's public API while still exporting the types that consumers need.
**Real Example (Dialog):**
```typescript
// TODO: export * after removing enums
export {
Dialog,
DialogContentContainer,
type DialogProps,
type DialogContentContainerProps,
type DialogType,
type DialogSize,
type DialogPosition,
type DialogTriggerEvent,
type DialogAnimationType,
type DialogOffset,
type DialogEvent
} from "@vibe/dialog";
```
### 6. Update Consumer Imports in Core Package
Find all files in `packages/core/src/` that import from the component and update them:
#### Component Import
**Before:**
```typescript
import ComponentName from "../ComponentName/ComponentName";
```
**After:**
```typescript
import { ComponentName } from "@vibe/component-name";
```
#### Enum Import
**CRITICAL:** Import enums with their "Enum" suffix directly, do NOT rename them.
**Wrong ❌:**
```typescript
import { EnumName as EnumNameEnum } from "@vibe/component-name";
```
**Correct ✅:**
```typescript
import { EnumNameEnum } from "@vibe/component-name";
```
**Real Example (Dialog):**
```typescript
import { DialogPositionEnum, DialogTriggerEventEnum, DialogSizeEnum } from "@vibe/dialog";
```
### 7. Link Workspace Packages
Run `yarn install` at the root to create symlinks automatically:
```bash
# From anywhere in the monorepo
cd $(git rev-parse --show-toplevel)
yarn install
```
This will automatically create symlinks in `node_modules/@vibe/` for all packages defined in the `workspaces` field of the root `package.json`. You'll see:
```
node_modules/@vibe/component-name -> ../../packages/components/component-name
```
**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.
### 8. Update Dependencies
#### In the new package's package.json
Add dependencies for any Vibe packages it uses:
```json
{
"dependencies": {
"@vibe/shared": "3.0.x",
"@vibe/icon": "3.0.x"
// ... other dependencies
}
}
```
#### In core package's package.json
Add the new package as a dependency:
```json
{
"dependencies": {
"@vibe/component-name": "3.0.0"
}
}
```
### 9. Build and Test
```bash
# Build the new package
cd packages/components/component-name
yarn build
# Build core package
cd packages/core
rm -rf .rpt2_cache # Clear TypeScript cache
yarn build
# Run tests
yarn test
```
## Common Patterns and Gotchas
### Pattern: Type and Enum with Same Name
When you have a type and enum with the same name (e.g., `DialogSize` type and `DialogSize` enum):
1. **In Types file:** Define as string union
```typescript
export type DialogSize = "none" | "small" | "medium" | "large";
```
2. **In Constants file:** Define as deprecated enum
```typescript
/** @deprecated */
export enum DialogSize {
NONE = "none",
SMALL = "small",
MEDIUM = "medium",
LARGE = "large"
}
```
3. **In Subdirectory index:** Export enum with "Enum" suffix
```typescript
export { DialogSize as DialogSizeEnum } from "./DialogConstants";
export * from "./Dialog.types"; // Exports DialogSize type
```
4. **In Consumer code:** Import both explicitly
```typescript
import { type DialogSize, DialogSizeEnum } from "@vibe/dialog";
```
### Gotcha: Default vs Named Exports
**Always use named exports** for components in separated packages, not default exports at the package level.
**Why:** This maintains consistency with other separated packages and allows for cleaner import patterns.
### Gotcha: Wildcard Exports and Enums
**Never** use `export * from "./ComponentConstants"` in the subdirectory index if you need to rename enums. Always use explicit named exports with aliases.
### Gotcha: TypeScript Cache
After making export changes, always clear the TypeScript cache:
```bash
rm -rf .rpt2_cache
rm -rf node_modules/.cache
```
### Gotcha: Module Resolution
If TypeScript can't find the new package, check:
1. Is the package built? (`dist/` folder exists)
2. Did you run `yarn install` at the root? (creates workspace symlinks)
3. Is the symlink created? Check with `ls -la node_modules/@vibe/component-name`
4. Is `package.json` configured with correct `main` and `types` fields?
5. Did you clear the TypeScript cache?
**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.
## Checklist for Package Separation
Use this checklist when separating a component:
- [ ] Created package directory structure under `packages/components/`
- [ ] Moved all component files (source, types, constants, styles, tests)
- [ ] Created `package.json` with correct exports configuration (DO NOT create CHANGELOG.md)
- [ ] Copied/configured `tsconfig.json`, `rollup.config.mjs`, `vitest.config.mjs`
- [ ] Set up subdirectory index with enum renaming (`src/ComponentName/index.ts`)
- [ ] Set up main package index (`src/index.ts`)
- [ ] Updated core package's `components/index.ts` with explicit exports
- [ ] Updated all consumer imports in core package (component and enums)
- [ ] Added dependencies to both packages' `package.json`
- [ ] Ran `yarn install` at root to create workspace symlinks
- [ ] Built the new package successfully
- [ ] Cleared TypeScript cache and built core package successfully
- [ ] Verified no TypeScript errors related to the component
- [ ] Updated or verified tests pass
- [ ] Verified Storybook stories work (if applicable)
## Example Command Sequence
```bash
# 1. Create package structure
mkdir -p packages/components/my-component/src/MyComponent
# 2. Move files (adjust paths as needed)
mv packages/core/src/components/MyComponent/* packages/components/my-component/src/MyComponent/
# 3. Copy config files from templates
cp .cursor/templates/package-separation/package.json packages/components/my-component/
cp .cursor/templates/package-separation/tsconfig.json packages/components/my-component/
cp .cursor/templates/package-separation/rollup.config.mjs packages/components/my-component/
# ... edit package.json to replace {{PACKAGE_NAME}} and {{COMPONENT_NAME}}
# 4. Link workspace packages (creates symlinks automatically)
cd <VIBE_ROOT> # Root of the monorepo
yarn install
# 5. Build and test
cd packages/components/my-component
yarn build
cd ../../core
rm -rf .rpt2_cache
yarn build
```
## Related Rules
- See `naming-conventions.mdc` for component naming standards
- See `file-structures.mdc` for component file organization
- See `monorepo-structure.mdc` for overall monorepo architecture
## References
Existing separated packages to use as examples:
- `packages/components/tooltip/` - Simple component with enums
- `packages/components/dialog/` - Complex component with multiple enums
- `packages/components/button/` - Simple component
- `packages/components/icon/` - Component with special considerations
================================================
FILE: .cursor/rules/playground-reproduce.mdc
================================================
---
description: 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".
alwaysApply: false
---
# Playground Reproduce
## Overview
Vibe supports a Playground in its Storybook, accessible at `vibe.monday.com/playground`.
Your goal is to output a working playground code *directly in the chat* (do not write it to a file).
Behind the scenes, this playground uses:
- **CodeMirror** for the editor interface (via `storybook-addon-playground` addon)
- **React Live** for rendering the code in real-time
## When to Use the Playground
The Playground is for **one-time usage scenarios**:
- Creating bug reproductions for issue reports
- Testing component combinations and integrations
- Validating if a feature is feasible with current or updated code
- Demonstrating to consumers how to achieve specific behaviors
- Helping consumers understand usage patterns
**Important**: Playground examples are NOT for documentation or long-term storage. They are ephemeral demonstrations.
## React Live Constraints
React Live has strict requirements for the code format:
### ✅ MUST: Single Anonymous Component
The code MUST be wrapped in a single anonymous arrow function component:
```javascript
() => {
const [timesClicked, setTimesClicked] = useState(0);
function onButtonClick() {
setTimesClicked(prev => prev + 1);
}
return (
<Flex direction="column" gap="medium">
<Button onClick={onButtonClick}>
Clicked {timesClicked} time{timesClicked === 1 ? "" : "s"}
</Button>
</Flex>
);
};
```
### ❌ CANNOT: Multiple Root Components
React Live cannot render multiple components at the root level. This will NOT work:
```javascript
// ❌ Bad - Multiple root components
const ComponentA = () => <div>A</div>;
const ComponentB = () => <div>B</div>;
```
### ✅ WORKAROUND: Define Components Inside
For multi-component bugs (e.g., re-render issues), define child components INSIDE the root anonymous component:
```javascript
() => {
const ChildComponent = ({ value }) => {
console.log("ChildComponent rendered");
return <div>{value}</div>;
};
const AnotherComponent = () => {
return <Text>Another component</Text>;
};
return (
<Flex direction="column" gap="small">
<ChildComponent value="test" />
<AnotherComponent />
</Flex>
);
};
```
## Available Components
### Default Components (Vibe 3.0 / Next)
All Vibe components are available by their standard names and default to the "next" versions:
```javascript
<Button />
<Dropdown />
<Modal />
<TextField />
```
### Icons
Access all Vibe icons via the `VibeIcons` prefix:
```javascript
<VibeIcons.RemoveRound />
<VibeIcons.Check />
<VibeIcons.Close />
```
### Legacy Components (Vibe 2.0)
To use older versions of components, use the `VibeLegacy` prefix:
```javascript
<VibeLegacy.Modal />
<VibeLegacy.Dropdown />
```
### React Hooks
All standard React hooks are available (`useState`, `useEffect`, `useCallback`, etc.).
## Editor Tabs
The Playground has two tabs:
### JSX Tab
Write your component code here using the anonymous component format.
### CSS Tab
Write CSS styles here. Reference these styles in the JSX tab using `className`:
```javascript
// JSX tab
() => {
return <div className="my-custom-class">Styled content</div>;
}
// CSS tab
.my-custom-class {
background: red;
padding: 16px;
}
```
**Note**: CSS Modules are NOT supported. Use plain class names as strings.
## Best Practices
### Keep It Simple
Focus ONLY on reproducing the specific issue. Don't add unrelated complexity.
```javascript
// ❌ Bad - Bug about Menu text, but adding unnecessary icons
() => {
return (
<Menu>
<MenuItem icon={<VibeIcons.Check />}>Item with icon</MenuItem>
<MenuItem icon={<VibeIcons.Star />}>Another with icon</MenuItem>
</Menu>
);
};
// ✅ Good - Focus on the Menu text issue
() => {
return (
<Menu>
<MenuItem>Simple menu item text</MenuItem>
<MenuItem>Another menu item</MenuItem>
</Menu>
);
};
```
### Ask Questions
Before generating playground code, ask human:
- What is the specific behavior they're trying to reproduce?
- Which components are involved?
- What should the expected vs. actual behavior be?
- Are there any specific props or states that trigger the issue?
- More related questions you think are worth asking.
- Do not bug human with too many questions if you think you already understood most of the issue and what human wants.
### Use JavaScript, Not TypeScript
TypeScript types are valid code but add no value in the Playground. Keep code simple by using Javascript only.
### Minimal Reproduction
Strip away everything not essential to demonstrating the issue:
```javascript
// ❌ Too complex for a simple button bug
() => {
const [state, setState] = useState({ count: 0, enabled: true, label: "Click" });
const handleClick = useCallback(() => {
setState(prev => ({ ...prev, count: prev.count + 1 }));
}, []);
return (
<Flex direction="column" gap="large" padding="large">
<Heading>Button Test</Heading>
<Button onClick={handleClick}>
{state.label} {state.count}
</Button>
</Flex>
);
};
// ✅ Minimal reproduction
() => {
return <Button>Test button label</Button>;
};
```
## Accessing the Playground
Users can access the playground directly at: **vibe.monday.com/playground**
Or navigate through Storybook UI to the "Playground" story.
Press `D` on the keyboard to toggle the editor visibility in Storybook.
================================================
FILE: .cursor/rules/react-context.mdc
================================================
---
description: "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."
globs:
- packages/core/src/components/**/context/*Context.ts
- packages/core/src/components/**/context/*Context.tsx
alwaysApply: false
---
# Context File Structure and Usage
A 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:
1. **Define Types**: Define interfaces for the context props/state and the provider component's props.
2. **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.
3. **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.
4. **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.
**Example: `MyComponentContext.ts`**
```typescript
import React, { createContext, useContext, useState, useMemo, ReactNode } from "react";
// 1. Define the shape of your context data and Provider props
interface MyComponentContextProps {
someValue: string;
updateValue: (value: string) => void;
// Add other states or functions you want to share
}
interface MyComponentProviderProps {
children: ReactNode;
initialValue?: string; // Example: if you want to pass initial state to provider
}
// 2. Create the context with a default value (often undefined, handle null case in hook)
const MyComponentContext = createContext<MyComponentContextProps | undefined>(undefined);
// 3. Create the Provider component
export const MyComponentProvider = ({ children, initialValue = "default" }: MyComponentProviderProps) => {
const [someValue, setSomeValue] = useState<string>(initialValue);
const updateValue = useCallback(setSomeValue, []);
// Memoize the context value to prevent unnecessary re-renders
// This is crucial if the context value is an object or array
const contextValue = useMemo(
() => ({
someValue,
updateValue
}),
[someValue]
);
return <MyComponentContext.Provider value={contextValue}>{children}</MyComponentContext.Provider>;
};
// 4. Create the custom hook for consuming the context
export const useMyComponent = (): MyComponentContextProps => {
const context = useContext(MyComponentContext);
if (context === undefined) {
// This error message helps developers realize they've used the hook outside the provider
throw new Error("useMyComponent must be used within a MyComponentProvider");
}
return context;
};
```
**Using the Context in `MyComponent.tsx`:**
The Provider should wrap all components that need to access its context.
```typescript
// ... imports
// Assuming your context file is in a 'context' subdirectory
import { MyComponentProvider, useMyComponent } from "./context/MyComponentContext";
// Example of a child component that consumes the context
const DisplayValueComponent = () => {
const { someValue } = useMyComponent(); // Use the custom hook
return <p>The current context value is: {someValue}</p>;
};
// Example of a child component that updates the context
const UpdateValueComponent = () => {
const { updateValue } = useMyComponent();
return <button onClick={() => updateValue("new value " + Math.random().toFixed(2))}>Update Value</button>;
};
const MyComponent = forwardRef(({}: /* ...props... */ MyComponentProps, ref: React.ForwardedRef<HTMLDivElement>) => {
return (
// Wrap the part of the component tree that needs access to this context
// The Provider can be here or at a higher level in the tree if needed by other components.
<MyComponentProvider initialValue="hello from MyComponent">
<div ref={ref} className={styles.myComponentBaseClass}>
{/* ... other component content ... */}
<DisplayValueComponent />
<UpdateValueComponent />
{/* <SubComponentNeedsContext /> */}
</div>
</MyComponentProvider>
);
});
export default MyComponent;
```
================================================
FILE: .cursor/rules/storybook-stories.mdc
================================================
---
description: "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'."
globs:
- "packages/docs/**/*.stories.tsx"
- "packages/docs/**/*.mdx"
alwaysApply: false
---
# Storybook Stories for @vibe/docs library
This document outlines the rules and best practices for creating and maintaining Storybook stories for the `@vibe/docs` library.
## 1. File Structure and Naming Conventions
- **Location:** Component stories are located in the `@vibe/docs` package, organized by component type in `packages/docs/src/pages/`.
- Example for components: `packages/docs/src/pages/components/ComponentName/`
- Example for hooks: `packages/docs/src/pages/hooks/hookName/`
- **Story File:** The main story file **must** be named after the component, using PascalCase, followed by the `.stories.tsx` extension.
- Example: `packages/docs/src/pages/components/ComponentName/ComponentName.stories.tsx`
- **MDX File:** An accompanying MDX documentation file **must** also be created in the same directory, named after the component.
- Example: `packages/docs/src/pages/components/ComponentName/ComponentName.mdx`
## 2. `.stories.tsx` File Structure and Content
All `.stories.tsx` files **must** adhere to Component Story Format (CSF) 3.0 and utilize TypeScript strictly.
### 2.1. Imports
- Import `React`.
- Import the Component itself.
- Import `Meta` and `StoryObj` from `@storybook/react`.
- Import any other necessary Vibe components or primitive types.
- **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.
### 2.2. Meta Configuration (Default Export)
The default export defines the component's metadata for Storybook.
```typescript
import React from "react";
import { Meta, StoryObj } from "@storybook/react";
import { ComponentName } from "@vibe/core";
// Import other Vibe components or types if needed for stories
export default {
title: "Components/ComponentName", // Or "Components/ComponentGroup/ComponentName" for grouped components
component: ComponentName
// args: { prop1: "initialValueForControls" }, // Optional: Define default args for controls panel here
// Decorators are defined in section 2.5
// subcomponents: { ComponentSubComponent, ComponentHeader } // etc. subcomponents can be listed here if applicable - only if needed
} satisfies Meta<typeof ComponentName>;
```
- **`title`**: A string that determines the component's path in the Storybook navigation sidebar (e.g., "Components/Button", "Components/Input/TextField").
- **`component`**: The component itself. This is used by Storybook for automatic documentation generation (props table) and linking stories.
- **`satisfies Meta<typeof ComponentName>`**: This TypeScript construct ensures the meta object conforms to the expected shape for the component.
### 2.3. Story Definition
Each named export in the file represents a single story.
```typescript
// Define the `Story` type for convenience and strict typing at the top of the file, right before the default exported metadata
type Story = StoryObj<typeof ComponentName>;
export const Overview: Story = {
// All stories, including Overview, MUST have a render function.
// The Overview story's render function should pass the args from controls directly to the component
// to make it fully interactive with the Storybook Controls panel.
render: args => <ComponentName {...args} />
// DO NOT define story-specific args here. Props are set in the render function.
};
export const ComplexExample: Story = {
// Props for this story are set directly within the render function.
render: () => (
<div>
{/* args from controls can be used if needed, or overridden/ignored */}
<ComponentName specificProp="fixedValueForThisStory" anotherProp={anotherPropFromControls || "default"} />
{/* Other components or elements to showcase a specific scenario */}
</div>
)
// DO NOT define story-specific args.
};
```
- **`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.
- **Story Naming:** Story exports should be in PascalCase (e.g., `PrimaryButton`, `WithIcon`).
- **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.
- **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).
### 2.4. Render Function
- **All stories MUST define an explicit `render` function.** This ensures consistency and clarity in how components are presented.
- **DO NOT USE `createComponentTemplate` or any other template/utility function for generating render functions.**
- 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.
- **`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.
- **Other Stories Render:** For other stories that showcase specific states or compositions:
- They define their specific props directly when rendering the component within the `render` function.
- 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.
- Keep render functions as simple as possible, focusing on the component being storied.
#### Prop Value Best Practices
When writing stories, always use string literal prop values instead of static properties:
```typescript
// ✅ Preferred approach
export const PrimaryButton: Story = {
render: () => (
<Button kind="primary" size="small">
Click me
</Button>
)
};
// ❌ Avoid (legacy pattern)
export const PrimaryButton: Story = {
render: () => (
<Button kind={Button.kinds.PRIMARY} size={Button.sizes.SMALL}>
Click me
</Button>
)
};
```
This approach provides better IntelliSense, type safety, and follows modern Vibe conventions.
Example of an `Overview` story's render function:
```typescript
export const Overview: Story = {
render: args => <ComponentName {...args} />
};
```
Example of a specific state story's render function:
```typescript
export const DisabledState: Story = {
render: () => <ComponentName disabled label="Cannot proceed" />
};
```
### 2.5. Decorators
Decorators are functions that wrap a story to provide additional context, styling, or behavior.
- Define decorators as an array in the `decorators` property of the `default` meta export (for global decorators) or on individual story objects.
- 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**.
- 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`.
Example of a simple decorator:
```typescript
// In default export:
decorators: [
(Story) => (
<div style={{ margin: "1em", padding: "1em", border: "1px dashed #ccc" }}>
<Story />
</div>
),
// Other decorators
],
```
#### Applying Decorators to Specific Stories
You 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.
**Example:**
First, 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):
```typescript
import { Decorator } from "@storybook/react";
const withGridDisplay: Decorator = Story => (
<div
style={{
display: "grid",
gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))", // Example grid styling
gap: "20px",
padding: "20px",
border: "1px dashed lightgray"
}}
>
<Story />
</div>
);
```
Then, apply it to a specific story:
```typescript
export const Sizes: Story = {
render: () => (
<>
<Label text="Regular Size Label" />
<Label text="Small Size Label" size="small" />
{/* Add more Label instances to demonstrate different sizes */}
</>
),
decorators: [withGridDisplay] // Decorator applied only to this 'Sizes' story
};
```
This 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.
## 3. Styling in Stories
- **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.
```typescript
export const Highlighted: Story = {
render: () => (
<div style={{ backgroundColor: "yellow", padding: "8px" }}>
<ComponentName style={{ marginBottom: 4 }} disabled withAnimation />
</div>
),
args: {
/* ... */
}
};
```
- **NO external CSS files (`.scss`, `.css`, `.module.scss`) for individual stories.** The goal is for story code to be self-contained and easily copyable.
- **Exceptions for CSS files:**
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.
2. If a component **does not support the `style` prop** for the required modifications - and it is a must to add styling to it.
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).
- 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).
## 4. Story Content and Best Practices
- **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).
- **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.
- **Focus on one feature/state per story:** Each story should clearly demonstrate a specific aspect, prop, feature, or state of the component.
- **Clarity over brevity (if complex):** While stories should be concise, ensure they are clear and easy to understand.
- **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.
## 5. MDX Documentation (`ComponentName.mdx`)
An 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`.
### 5.1. MDX File Structure Template
The following is a template for `ComponentName.mdx`:
````mdx
import { Meta } from "@storybook/blocks";
import * as ComponentStories from "./ComponentName.stories"; // Import the stories
import { ComponentName } from "@vibe/core";
<Meta of={ComponentStories} />
# ComponentName
Brief overview of the component, its purpose, and when to use it. This can be multi-line.
## Import path
```tsx
import { ComponentName } from "@vibe/core"; // Or the correct export path for the component
```
## Overview
<Canvas of={ComponentStories.Overview} />
## Props
<PropsTable />
## Usage
<UsageGuidelines
guidelines={[
"Guideline 1: Describe a primary use case or when to use this component.",
"Guideline 2: Mention another important scenario or condition for its use.",
"Guideline 3: Add a specific 'do' or 'don't' related to its application.",
"..."
]}
/>
## Accessibility
{/_
Include an Accessibility section when the component has significant accessibility features.
Use the <UsageGuidelines /> component with accessibility-specific guidelines.
Focus on ARIA attributes, keyboard navigation, focus management, and screen reader support.
Write guidelines as JSX elements when code examples are needed.
_/}
<UsageGuidelines
guidelines={[
// example for optional accessibility usage guidelines
<>
Provide an <code>id</code> for the component to enable proper accessibility associations and unique
identification.
</>,
<>
Always provide an accessible name using either <code>ariaLabel</code> or <code>aria-labelledby</code> props.
</>,
<>
Use <code>ariaLabel</code> prop when you need to provide a custom accessible name for the component.
</>,
<>
Use <code>aria-labelledby</code> prop when an external element provides the accessible name. Pass the{" "}
<code>id</code> of that external element.
</>
// Add more accessibility guidelines specific to the component
]}
/>
## Variants
{/_
Showcase various important stories using <Canvas>.
Provide a brief description for each use case.
Focus on distinct functionalities or appearances.
_/}
### Specific Use Case 1 Title
{/_ Description of this use case. _/}
<Canvas of={ComponentStories.SpecificUseCaseStoryName} />
### Specific Use Case 2 Title
{/_ Description of this use case. _/}
<Canvas of={ComponentStories.AnotherUseCaseStoryName} />
## Do's and Don'ts
{/*
ALWAYS use the <ComponentRules /> component for this section.
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.
Each rule object within the `rules` array should have a `positive` and a `negative` aspect.
- For each aspect (`positive`/`negative`):
- The `component` prop is for the visual example (e.g., <img src={...} /> or a React component).
- 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>`).
- The `description` prop (string) is mandatory and should clearly explain the point.
*/}
<ComponentRules
rules={[
{
componentContainerClassName: styles.largeComponentRule,
positive: {
component: (
// Example with a visual component. Replace with your actual component or img tag.
// <img src={exampleDoImage} alt="Visual example of what to do" />
),
description: "Example Do: Clearly explain why this is a good practice. Be specific."
},
negative: {
component: (
// Example with an empty component when no visual is available.
<></>
),
description: "Example Don't: Clearly explain this pitfall or misuse. Be specific."
}
},
{
positive: {
component: (
// Another example
<></>
),
description: "Another Do: Focus on accessibility or a key integration point."
},
negative: {
component: (
// <img src={exampleDontImage} alt="Visual example of what not to do" />
),
description: "Another Don't: Warn about potential issues or anti-patterns."
}
}
]}
/>
````
### 5.2. MDX Content Requirements
- **Imports**:
- 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.
- `import * as ComponentStories from "./ComponentName.stories";`: Import all stories from the corresponding `.stories.tsx` file.
- `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.
- **`<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.
- **Main Title (`# ComponentName`)**: The component's name.
- **Description**: A brief overview of the component. Use a simple string in the markdown.
- **Import Path**: Show users how to import the component from `@vibe/core`.
- **Overview Story**: **Must** display the `Overview` story from `ComponentName.stories.tsx` using `<Canvas of={ComponentStories.Overview}/>`. Add a brief contextual description.
- **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} />`.
- **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.
- **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.
- **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.
- **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>`).
- This section is crucial for communicating best practices to **designers and product managers**, not just developers. When writing the descriptions, follow these principles:
- **Focus on the Why, Not the How:** Explain the user experience principle or design best practice. Avoid implementation details.
- **Speak in Plain Language:** Use clear, non-technical language. Avoid jargon and prop names.
- **Be Specific and Actionable:** Provide clear, actionable advice that a designer can use when creating mockups or specifications.
**Bad Example (Developer-Focused):**
> "Use the `infoText` prop to add helpful context."
**Good Example (Designer-Focused):**
> "Provide supplementary helper text to guide the user on the expected input and its format."
By following these rules, we can ensure that the Storybook for `@vibe/core` is consistent, maintainable, and provides maximum value to its consumers.
================================================
FILE: .cursor/rules/styling-conventions.mdc
================================================
---
description: "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."
globs:
- "packages/core/src/components/**/*.module.scss"
alwaysApply: false
---
# Styling Conventions for @vibe/core
This 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/`).
## 1. SCSS Modules Exclusivity
- **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.
- **File Naming Convention:** SCSS Module files **must** be named after the component they style, using PascalCase, followed by the `.module.scss` extension.
- Example: For a component named `MyComponent`, the style file will be `MyComponent.module.scss`.
- This file should be co-located with its respective component (e.g., `packages/core/src/components/MyComponent/MyComponent.module.scss`).
## 2. CSS Best Practices & Browser Support
- **Nested CSS:** Prefer using nested CSS selectors for better readability and to scope styles effectively under the parent component class.
- Example:
```scss
.myComponent {
// styles for the component root
.childElement {
// styles for a child
}
&.modifierClass {
// styles for a modified state
}
}
```
- **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.
- **Chrome 85+ Compatibility:** All styling **must** be compatible with Chrome version 85 and newer. Avoid using CSS features not supported by this baseline.
- **Handling Newer CSS APIs:**
- 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.
- The goal is to provide the modern styling for newer browsers while ensuring an equivalent fallback for older browsers (like Chrome 85).
- **The visual appearance must remain consistent across all supported browsers.**
- Clearly comment such implementations, indicating the modern API and the fallback.
- Example:
```scss
.myElement {
// Fallback for older browsers
display: -webkit-box;
-webkit-box-orient: vertical;
// Modern API for newer browsers
@supports (display: grid) {
display: grid;
grid-template-rows: auto 1fr auto; // Example modern styling
}
}
```
## 3. Design Tokens
- **Utilize Design Tokens:** Always prefer design tokens over hardcoded values (e.g., pixel values for spacing, specific hex codes for colors).
- **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.
- Tokens are typically used as CSS custom properties: `var(--token-name)`.
- Example: `color: var(--primary-text-color);`, `margin-bottom: var(--space-8);`
- **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.
- **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.
- **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.
## 4. Mixins from `@vibe/style`
- **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.**
## 5. Typography
- **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.
- 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.
## 6. Class Naming Conventions
- **camelCase for Classes:** Class names defined within SCSS Modules **must** use camelCase.
- Example: `.myButton`, `.tabActiveState`, `.loaderWrapper`.
- **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.
## 7. Anti-Patterns and Considerations
- **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.
- **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.
- **Never Use !important:** The use of `!important` in CSS is strictly prohibited. Instead of using `!important`, resolve specificity issues other way.
- **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.
- **Responsiveness:** Do not implement responsive styles (e.g., using media queries, container queries) unless explicitly requested by the user or task.
- **Focus on Maintainability:** Write styles that are maintainable. Avoid overly specific selectors that might break easily with small markup changes.
================================================
FILE: .cursor/templates/package-separation/QUICK_REFERENCE.md
================================================
# Package Separation Quick Reference
## For AI: Prompt to Use
```
@.cursor/rules/package-separation.mdc Separate the [ComponentName] component into @vibe/[package-name]
```
## Full Example: Separating Badge Component
### 1. Inspect the Component
```bash
# Check what files exist
ls -la packages/core/src/components/Badge/
# Check for enums
cat packages/core/src/components/Badge/BadgeConstants.ts
# Check dependencies (look at imports)
head -20 packages/core/src/components/Badge/Badge.tsx
```
**Found:**
- Component: `Badge.tsx`
- Types: `Badge.types.ts`
- Constants: `BadgeConstants.ts` (has `BadgeColor`, `BadgeSize` enums)
- Styles: `Badge.module.scss`
- Tests: `__tests__/`
### 2. Create Package Structure
```bash
# Set variables
COMPONENT="Badge"
PACKAGE="badge"
# Create directories
mkdir -p packages/components/$PACKAGE/src/$COMPONENT
mkdir -p packages/components/$PACKAGE/src/types
# Copy templates
cd packages/components/$PACKAGE
cp ../../../.cursor/templates/package-separation/package.json .
cp ../../../.cursor/templates/package-separation/tsconfig.json .
cp ../../../.cursor/templates/package-separation/rollup.config.mjs .
cp ../../../.cursor/templates/package-separation/vitest.config.mjs .
cp ../../../.cursor/templates/package-separation/vitest.setup.mjs .
cp ../../../.cursor/templates/package-separation/files.d.ts src/types/
```
### 3. Update package.json
Replace placeholders:
- `{{PACKAGE_NAME}}` → `badge`
- `{{ComponentName}}` → `Badge`
Add dependencies (based on imports found):
```json
{
"dependencies": {
"@vibe/shared": "3.0.8",
"@vibe/icon": "3.0.9",
"classnames": "^2.5.1",
"es-toolkit": "^1.39.10"
}
}
```
### 4. Move Component Files
```bash
cd packages/core/src/components/Badge
mv * ../../../../components/badge/src/Badge/
# (keep the directory, we'll delete it later)
```
### 5. Create src/Badge/index.ts
Using `subdirectory-index.ts` template:
```typescript
export { default as Badge, type BadgeProps } from "./Badge";
export {
BadgeColor as BadgeColorEnum,
BadgeSize as BadgeSizeEnum
} from "./BadgeConstants";
export * from "./Badge.types";
```
### 6. Create src/index.ts
Using `main-index.ts` template:
```typescript
export * from "./Badge";
```
### 7. Update Core Package
#### packages/core/package.json
Add dependency:
```json
{
"dependencies": {
"@vibe/badge": "3.0.0"
}
}
```
#### packages/core/src/components/index.ts
Replace the line `export * from "./Badge";` with:
```typescript
// TODO: export * after removing enums
export {
Badge,
type BadgeProps,
type BadgeColor,
type BadgeSize
} from "@vibe/badge";
```
### 8. Find and Update All Imports
```bash
# Find all files importing Badge
grep -r "from.*Badge" packages/core/src/components/
# Update imports:
# Before: import Badge from "../Badge/Badge";
# After: import { Badge } from "@vibe/badge";
# Before: import { BadgeColor as BadgeColorEnum } from "../Badge/BadgeConstants";
# After: import { BadgeColorEnum } from "@vibe/badge";
```
### 9. Link Workspace Packages
```bash
# Run at root - Yarn Workspaces creates symlinks automatically
cd <VIBE_ROOT> # Root of the monorepo
yarn install
```
This creates: `node_modules/@vibe/badge -> ../../packages/components/badge`
### 10. Build
```bash
# Build badge package
cd packages/components/badge
yarn build
# Build core package
cd ../../../packages/core
rm -rf .rpt2_cache
yarn build
```
### 11. Verify
```bash
# Check no errors related to Badge
yarn build 2>&1 | grep -i badge
# Check tests still pass
yarn test Badge
```
## Common Commands
### Check what enums a component has
```bash
grep "export enum" packages/core/src/components/[ComponentName]/[ComponentName]Constants.ts
```
### Check dependencies
```bash
grep "^import.*from" packages/core/src/components/[ComponentName]/[ComponentName].tsx | grep "@vibe"
```
### Find all imports to update
```bash
grep -r "from.*[ComponentName]" packages/core/src/ --include="*.tsx" --include="*.ts"
```
### Verify symlink (should be created automatically by yarn install)
```bash
ls -la node_modules/@vibe/[package-name]
# Should show: lrwxr-xr-x ... [package-name] -> ../../packages/components/[package-name]
```
### Check build output
```bash
cat packages/components/[package-name]/dist/index.d.ts
```
## Validation Checklist
After separation, verify:
- [ ] Package builds successfully (`yarn build` in package dir)
- [ ] Core builds successfully (`yarn build` in core dir)
- [ ] No TypeScript errors mentioning the component
- [ ] Tests pass
- [ ] Ran `yarn install` at root (creates symlinks)
- [ ] Symlink exists in `node_modules/@vibe/`
- [ ] Component exports correctly (check `dist/index.d.ts`)
- [ ] Enums have "Enum" suffix in exports
- [ ] Consumer code imports enums directly (no renaming)
- [ ] Core package explicitly exports types (not enums)
- [ ] Stories/docs still work (if applicable)
## Rollback
If something goes wrong:
```bash
# Move files back
mv packages/components/[package-name]/src/[ComponentName]/* \
packages/core/src/components/[ComponentName]/
# Remove package directory
rm -rf packages/components/[package-name]
# Revert changes to core package
git checkout packages/core/package.json
git checkout packages/core/src/components/index.ts
# Revert import changes
git checkout packages/core/src/components/
```
================================================
FILE: .cursor/templates/package-separation/README.md
================================================
# Package Separation Templates
These templates are used when separating a component from `@vibe/core` into its own package.
## Template Files
### Configuration Files (Copy as-is, then replace placeholders)
- **package.json** - Package configuration
- **tsconfig.json** - TypeScript configuration
- **rollup.config.mjs** - Build configuration
- **vitest.config.mjs** - Test runner configuration
- **vitest.setup.mjs** - Test setup
- **files.d.ts** - Module type declarations
### Code Templates (Use as reference, replace placeholders)
- **subdirectory-index.ts** - Component subdirectory export pattern
- **main-index.ts** - Main package export pattern
## Placeholders to Replace
| Placeholder | Example | Description |
|------------|---------|-------------|
| `{{PACKAGE_NAME}}` | `badge` | Kebab-case package name |
| `{{ComponentName}}` | `Badge` | PascalCase component name |
| `{{EnumName1}}` | `BadgeColor` | First enum name (if exists) |
| `{{EnumName2}}` | `BadgeSize` | Second enum name (if exists) |
## Quick Start
### For AI Assistants
When separating a component named "Badge":
```typescript
// 1. Gather info
const componentName = "Badge"; // PascalCase
const packageName = "badge"; // kebab-case
const enums = ["BadgeColor", "BadgeSize"]; // if component has enums
// 2. Create directories
packages/components/badge/
src/
Badge/
Badge.tsx
Badge.types.ts
BadgeConstants.ts // if has enums
Badge.module.scss
__tests__/
index.ts ← use subdirectory-index.ts template
types/
files.d.ts ← copy from template
index.ts ← use main-index.ts template
package.json ← copy and replace placeholders
tsconfig.json ← copy as-is
rollup.config.mjs ← copy as-is
vitest.config.mjs ← copy as-is
vitest.setup.mjs ← copy as-is
// 3. Replace in subdirectory-index.ts:
{{ComponentName}} → Badge
{{EnumName1}} → BadgeColor
{{EnumName2}} → BadgeSize
// 4. Replace in main-index.ts:
{{ComponentName}} → Badge
// 5. Replace in package.json:
{{PACKAGE_NAME}} → badge
{{ComponentName}} → Badge
```
### For Developers
```bash
# 1. Create structure
COMPONENT_NAME="Badge"
PACKAGE_NAME="badge"
mkdir -p packages/components/$PACKAGE_NAME/src/$COMPONENT_NAME
mkdir -p packages/components/$PACKAGE_NAME/src/types
# 2. Copy templates
cp .cursor/templates/package-separation/{package.json,tsconfig.json,rollup.config.mjs,vitest.config.mjs,vitest.setup.mjs} \
packages/components/$PACKAGE_NAME/
cp .cursor/templates/package-separation/files.d.ts \
packages/components/$PACKAGE_NAME/src/types/
# 3. Replace placeholders (macOS)
sed -i '' "s/{{PACKAGE_NAME}}/$PACKAGE_NAME/g" packages/components/$PACKAGE_NAME/package.json
sed -i '' "s/{{ComponentName}}/$COMPONENT_NAME/g" packages/components/$PACKAGE_NAME/package.json
# 4. Move component files
mv packages/core/src/components/$COMPONENT_NAME/* \
packages/components/$PACKAGE_NAME/src/$COMPONENT_NAME/
# 5. Link workspace packages
cd <VIBE_ROOT> # Root of the monorepo
yarn install
# 6. Continue with rule file instructions...
```
## Dependencies to Add
Common dependencies to add to `package.json`:
```json
{
"dependencies": {
"@vibe/shared": "3.0.8", // Almost always needed
"@vibe/icon": "3.0.x", // If component uses icons
"@vibe/dialog": "3.0.x", // If uses Dialog/Popover
"@vibe/layout": "3.0.x", // If uses Box/Flex
"classnames": "^2.5.1", // Usually needed
"es-toolkit": "^1.39.10" // For utilities
}
}
```
Check the component's imports to determine which dependencies are needed.
## Reference Examples
Real packages to reference:
- **Simple component:** `packages/components/button/`
- **Component with enums:** `packages/components/tooltip/`
- **Complex component:** `packages/components/dialog/`
## Common Issues
### Issue: TypeScript can't find the package
**Solution:**
```bash
# Run yarn install at root - Yarn Workspaces creates symlinks automatically
cd <VIBE_ROOT> # Root of the monorepo
yarn install
```
This automatically creates symlinks for all packages in `packages/components/*`. You should see:
```
node_modules/@vibe/[package-name] -> ../../packages/components/[package-name]
```
**Note:** Manual symlink creation with `ln -s` is NOT needed - Yarn Workspaces handles this automatically.
### Issue: Build fails with enum errors
**Solution:** Check that:
1. Subdirectory `index.ts` exports enums with "Enum" suffix
2. Consumer code imports enums directly (not renaming them)
3. Types and enums don't have conflicting names
### Issue: Component import fails
**Solution:** Make sure component is exported as **named export**, not default:
```typescript
// ✅ Correct
export { default as Component, ... } from "./Component";
// ❌ Wrong
export { default } from "./Component";
```
## See Also
- Main guide: `.cursor/rules/package-separation.mdc`
- Monorepo structure: `.cursor/rules/monorepo-structure.mdc`
- Naming conventions: `.cursor/rules/naming-conventions.mdc`
================================================
FILE: .cursor/templates/package-separation/files.d.ts
================================================
// SCSS
declare module "*.module.scss" {
const classes: { [key: string]: string };
export default classes;
}
// SVG
declare module "*.svg" {
const content: string;
export default content;
}
declare module "*.png";
declare module "*.mp4";
declare module "*.pdf";
================================================
FILE: .cursor/templates/package-separation/main-index.ts
================================================
// Template for src/index.ts
// This file simply re-exports everything from the component subdirectory
export * from "./{{ComponentName}}";
================================================
FILE: .cursor/templates/package-separation/package.json
================================================
{
"name": "@vibe/{{PACKAGE_NAME}}",
"version": "3.0.0",
"description": "Vibe sub-package for {{COMPONENT_NAME}} component",
"repository": {
"type": "git",
"url": "git+https://github.com/mondaycom/vibe.git",
"directory": "packages/components/{{PACKAGE_NAME}}"
},
"bugs": {
"url": "https://github.com/mondaycom/vibe/issues"
},
"homepage": "https://github.com/mondaycom/vibe#readme",
"author": "monday.com",
"license": "MIT",
"type": "module",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"files": [
"dist"
],
"exports": {
"./package.json": "./package.json",
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.js",
"default": "./dist/index.js"
},
"./mockedClassNames": {
"import": "./dist/mocked_classnames/index.js",
"default": "./dist/mocked_classnames/index.js"
}
},
"scripts": {
"build": "rollup -c && mock_classnames=on rollup -c",
"test": "vitest run",
"lint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\""
},
"dependencies": {
"@vibe/shared": "3.0.8",
"classnames": "^2.5.1",
"es-toolkit": "^1.39.10"
},
"devDependencies": {
"@testing-library/react": "^12.1.2",
"@vibe/config": "3.0.5",
"@vibe/icons": "1.15.0",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-test-renderer": "16",
"typescript": "^5.9.3",
"vitest": "^1.6.0"
},
"peerDependencies": {
"react": ">=16.9.0",
"react-dom": ">=16.9.0"
},
"sideEffects": [
"*.scss",
"*.css",
"*.scss.js",
"*.css.js"
],
"eslintConfig": {
"extends": [
"../../../node_modules/@vibe/config/.eslintrc.cjs"
]
}
}
================================================
FILE: .cursor/templates/package-separation/rollup.config.mjs
================================================
import config from "@vibe/config/rollup.config";
export default config;
================================================
FILE: .cursor/templates/package-separation/subdirectory-index.ts
================================================
// Template for src/{{ComponentName}}/index.ts
// Replace {{ComponentName}}, {{EnumName1}}, {{EnumName2}}, etc. with actual names
export { default as {{ComponentName}}, type {{ComponentName}}Props } from "./{{ComponentName}}";
// If component has deprecated enums, export them with "Enum" suffix
// Example: TooltipPositions -> TooltipPositionsEnum
export {
{{EnumName1}} as {{EnumName1}}Enum,
{{EnumName2}} as {{EnumName2}}Enum
} from "./{{ComponentName}}Constants";
// Export all types (string unions)
export * from "./{{ComponentName}}.types";
================================================
FILE: .cursor/templates/package-separation/tsconfig.json
================================================
{
"extends": "@vibe/config/tsconfig",
"compilerOptions": {
"baseUrl": ".",
"rootDir": "src"
},
"include": ["src/**/*"]
}
================================================
FILE: .cursor/templates/package-separation/vitest.config.mjs
================================================
import config from "@vibe/config/vitest.config";
import { defineConfig } from "vite";
export default defineConfig({
...config
});
================================================
FILE: .cursor/templates/package-separation/vitest.setup.mjs
================================================
import { vi } from "vitest";
import "@testing-library/jest-dom";
import React from "react";
// Mock ResizeObserver
class ResizeObserver {
observe() {}
unobserve() {}
disconnect() {}
}
global.ResizeObserver = ResizeObserver;
// Mock react-inlinesvg
vi.mock("react-inlinesvg", () => ({
default: ({ src, ...props }) =>
React.createElement("div", {
"data-testid": "mock-svg",
"data-src": src,
...props
})
}));
================================================
FILE: .github/CODEOWNERS
================================================
# Default codeowners for all files
* @mondaycom/vibe
# Testkit package - testing utilities and Playwright configuration
packages/testkit/ @hanan-monday
================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.yml
================================================
name: "\U0001F41E Bug report"
description: Create a bug report
title: "[Bug]: "
labels: ["bug"]
body:
- type: markdown
attributes:
value: |
**Before You Start...**
Thank you for taking the time to report a bug!
Please make sure to fill as much details as possible to help us better understand the bug.
If you have a question, suggestion, feature request, or need for help, please ask on [GitHub Discussions](https://github.com/mondaycom/vibe/discussions).
Thanks!
- type: input
id: version
attributes:
label: Vibe version
placeholder: e.g. 2.84.0
validations:
required: true
- type: textarea
id: description
attributes:
label: Describe the bug
description: A clear and concise description of what the bug is
validations:
required: true
- type: textarea
id: expected-behavior
attributes:
label: Expected behavior
description: A clear description of what you expect to happen
validations:
required: true
- type: textarea
id: steps-to-reproduce
attributes:
label: Steps to reproduce
placeholder: |
e.g.
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See '....'
validations:
required: true
- type: input
id: reproduction-example-link
attributes:
label: Reproduction example link
description: |
Please provide a simple minimal example that reproduces the bug. Use this [StackBlitz](https://stackblitz.com/edit/vibe-bug-report) or anything similar
- type: textarea
id: system-info
attributes:
label: System Info
description: Please run and copy the output of `npx envinfo --system --npmPackages monday-ui-react-core,@vibe/core,react --binaries --browsers`
render: shell
placeholder: Operating System, Browsers, React version
- type: textarea
id: additional-context
attributes:
label: Additional context, Screenshots
description: Add any other context. If applicable, add screenshots or a video to further explain the bug
================================================
FILE: .github/ISSUE_TEMPLATE/config.yml
================================================
blank_issues_enabled: false
contact_links:
- name: Feature Request
url: https://github.com/mondaycom/vibe/discussions
about: Suggest new features
- name: Questions & Discussions
url: https://github.com/mondaycom/vibe/discussions
about: Use GitHub discussions for questions and suggestions
================================================
FILE: .github/PULL_REQUEST_TEMPLATE.md
================================================
<!-- Thank you for contributing!
Before we can review your submission, please fill the information below:
Please 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. -->
- [ ] I have read the [Contribution Guide](../CONTRIBUTING.md) for this project.
<!-- Please add the issue number that this PR closes: -->
Resolves #
================================================
FILE: .github/actions/check-changed-packages/action.yml
================================================
name: Check Changed Packages
description: Check if there are any changed packages in the monorepo
inputs:
exit_on_no_changes:
description: Whether to exit with a non-zero code if there are no changes.
required: false
default: "false"
outputs:
has_changes:
description: Whether there are any changes in the monorepo.
value: ${{ steps.check-changed-packages.outputs.has_changes }}
runs:
using: "composite"
steps:
- id: determine-since-flag
uses: ./.github/actions/determine-lerna-since-flag
- id: check-changed-packages
shell: bash
env:
SINCE_FLAG: ${{ steps.determine-since-flag.outputs.since_flag }}
run: |
changed_packages=$(yarn -s lerna ls $SINCE_FLAG --json --loglevel=error)
if [[ $changed_packages = "[]" ]]; then
echo "has_changes=false" >> $GITHUB_OUTPUT
echo "No packages to process as Lerna didn't detect any changes."
if [[ "${{ inputs.exit_on_no_changes }}" == "true" ]]; then
exit 1
else
echo "Continuing because exit_on_no_changes is not used."
fi
else
echo "has_changes=true" >> $GITHUB_OUTPUT
echo "Change detected:"
echo "$changed_packages"
fi
================================================
FILE: .github/actions/determine-lerna-since-flag/action.yml
================================================
name: Determine Lerna since flag
description: 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.
outputs:
since_flag:
description: The --since flag value to use with Lerna commands.
value: ${{ steps.get-since-flag.outputs.since_flag }}
runs:
using: "composite"
steps:
- id: get-since-flag
shell: bash
run: |
if [[ "$GITHUB_REF" == "refs/heads/master" ]]; then
since_flag="--since"
echo "Running on master branch, checking for all changes."
else
since_flag="--since=origin/master...HEAD"
echo "Not running on master branch, checking for changes since origin/master."
fi
echo "since_flag=$since_flag" >> $GITHUB_OUTPUT
================================================
FILE: .github/actions/download-builds/action.yml
================================================
name: Download and Extract Build Artifacts
description: Download build artifacts for all the packages and extract them to the correct location
runs:
using: "composite"
steps:
- name: Download and Extract
uses: actions/download-artifact@v4
with:
name: ci-builds-${{ github.run_id }}-${{ github.run_attempt }}
================================================
FILE: .github/actions/git-creds/action.yml
================================================
name: "Git credentials setup"
description: "Set up git credentials"
runs:
using: "composite"
steps:
- name: Set up git credentials
shell: bash
run: |
git config --global user.name 'vibe-bot'
git config --global user.email 'vibe@monday.com'
================================================
FILE: .github/actions/setup/action.yml
================================================
name: "CI/CD setup"
description: "Setup the CI/CD environment"
inputs:
npm_token:
description: "NPM token secret"
required: true
runs:
using: "composite"
steps:
- uses: actions/setup-node@v4
with:
node-version-file: ".nvmrc"
registry-url: https://registry.npmjs.org/
cache: "yarn"
- name: Install
run: yarn
shell: bash
env:
NODE_AUTH_TOKEN: ${{ inputs.npm_token }}
- name: Check for uncommitted changes in yarn.lock
shell: bash
run: |
if [[ -n "$(git status --porcelain yarn.lock)" ]]; then
echo "Error: yarn.lock has uncommitted changes. Please commit it."
exit 1
fi
================================================
FILE: .github/workflows/build-and-upload.yml
================================================
name: Build and Upload Artifacts
on:
workflow_call:
inputs:
skip_release_artifacts:
description: Whether to skip release-only build artifacts (mocked classnames, metadata) to speed up CI checks.
type: boolean
default: false
secrets:
npm_token:
required: true
outputs:
has_changes:
description: Whether there are any changes in the monorepo.
value: ${{ jobs.build-and-upload.outputs.has_changes }}
jobs:
build-and-upload:
name: Build and Upload
runs-on: ubuntu-latest
outputs:
has_changes: ${{ steps.check-changed-packages.outputs.has_changes }}
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Run Setup
uses: ./.github/actions/setup
with:
npm_token: ${{ secrets.npm_token }}
- id: check-changed-packages
uses: ./.github/actions/check-changed-packages
- id: determine-since-flag
if: ${{ steps.check-changed-packages.outputs.has_changes == 'true' }}
uses: ./.github/actions/determine-lerna-since-flag
- name: Build
if: ${{ steps.check-changed-packages.outputs.has_changes == 'true' }}
shell: bash
env:
SINCE_FLAG: ${{ steps.determine-since-flag.outputs.since_flag }}
SKIP_RELEASE_ARTIFACTS: ${{ inputs.skip_release_artifacts }}
run: yarn lerna run build $SINCE_FLAG --include-dependencies
- name: Upload
if: ${{ steps.check-changed-packages.outputs.has_changes == 'true' }}
uses: actions/upload-artifact@v4
with:
name: ci-builds-${{ github.run_id }}-${{ github.run_attempt }}
path: |
./packages/*/dist/
./packages/components/*/dist/
./package.json
if-no-files-found: ignore
================================================
FILE: .github/workflows/bundle-size.yml
================================================
name: Bundle Size Analysis
on:
pull_request:
paths:
- "packages/core/src/components/**"
- "packages/core/package.json"
- "packages/components/**"
permissions:
pull-requests: write
jobs:
build:
name: Build
uses: ./.github/workflows/build-and-upload.yml
with:
skip_release_artifacts: true
secrets:
npm_token: ${{ secrets.npm_token }}
bundle-size:
runs-on: ubuntu-latest
needs: build
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Run Setup
uses: ./.github/actions/setup
- name: Download build artifacts
uses: ./.github/actions/download-builds
- name: Run size-limit on PR
run: |
node scripts/bundle-check/generate-size-limit-config.js
mkdir -p scripts/bundle-check/reports
./node_modules/.bin/size-limit --json > "scripts/bundle-check/reports/pr.json"
- name: Run size-limit on base commit
run: |
PR_HEAD_SHA=$(git rev-parse HEAD)
trap "echo 'Checking out back to PR commit'; git checkout --force $PR_HEAD_SHA" EXIT
BASE=$(git merge-base origin/master HEAD)
echo "Base commit: $BASE"
git checkout $BASE
yarn install --frozen-lockfile
yarn build
yarn add --dev -W size-limit @size-limit/preset-small-lib
./node_modules/.bin/size-limit --json > scripts/bundle-check/reports/base.json
continue-on-error: true
- name: Compare sizes
run: node scripts/bundle-check/compare-bundles.js
- name: Post comment
uses: marocchino/sticky-pull-request-comment@v2
with:
header: bundle-size
path: scripts/bundle-check/reports/bundle-sizes.md
- name: Upload artifacts
uses: actions/upload-artifact@v4
if: always()
with:
name: bundle-analysis
path: |
scripts/bundle-check/reports/base.json
scripts/bundle-check/reports/pr.json
scripts/bundle-check/reports/bundle-sizes.md
retention-days: 7
================================================
FILE: .github/workflows/chromatic.yml
================================================
name: Chromatic
on:
pull_request:
types: [opened, synchronize]
push:
branches:
- master
jobs:
build:
name: Build
uses: ./.github/workflows/build-and-upload.yml
with:
skip_release_artifacts: true
secrets:
npm_token: ${{ secrets.npm_token }}
publish-chromatic:
name: Publish Chromatic
needs: build
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Run Setup
uses: ./.github/actions/setup
with:
npm_token: ${{ secrets.npm_token }}
- uses: ./.github/actions/download-builds
if: ${{ needs.build.outputs.has_changes == 'true' }}
- name: Publish to Chromatic
uses: chromaui/action@v11
with:
token: ${{ secrets.GITHUB_TOKEN }}
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
workingDir: packages/docs
exitOnceUploaded: true
onlyChanged: false
skip: ${{ needs.build.outputs.has_changes == 'false' }}
================================================
FILE: .github/workflows/merge-queue.yml
================================================
name: Merge Queue Checks
on:
merge_group:
types:
- checks_requested
jobs:
commitlint:
name: Commit Lint
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
ref: ${{ github.sha }}
- uses: YossiSaadi/commitlint-github-action@vibe-fork/support-merge_group-event
================================================
FILE: .github/workflows/performance.yml
================================================
name: Performance Testing
on:
workflow_dispatch:
# pull_request:
# paths:
# - "packages/core/src/components/**"
# - "packages/components/**"
permissions:
pull-requests: write
jobs:
build:
name: Build
uses: ./.github/workflows/build-and-upload.yml
with:
skip_release_artifacts: true
secrets:
npm_token: ${{ secrets.npm_token }}
performance:
runs-on: ubuntu-latest
needs: build
timeout-minutes: 30
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Run Setup
uses: ./.github/actions/setup
with:
npm_token: ${{ secrets.npm_token }}
- name: Download build artifacts
uses: ./.github/actions/download-builds
if: ${{ needs.build.outputs.has_changes == 'true' }}
- name: Install Playwright
# Use root playwright directly (not npx) due to version mismatch with @playwright/test
run: ./node_modules/playwright/cli.js install --with-deps chromium
- name: Test PR branch
run: |
mkdir -p scripts/performance/reports
cd packages/docs
yarn storybook &
STORYBOOK_PID=$!
trap 'kill $STORYBOOK_PID 2>/dev/null || true' EXIT
npx wait-on http://localhost:7008 --timeout 120000 || exit 1
PERFORMANCE_TEST=true ./node_modules/.bin/test-storybook --url http://localhost:7008 --maxWorkers=4 || true
continue-on-error: true
- name: Save PR metrics
run: |
node scripts/performance/aggregate-metrics.js
cp scripts/performance/reports/metrics.json scripts/performance/reports/pr.json 2>/dev/null || \
echo '{"timestamp":"'$(date -u +%Y-%m-%dT%H:%M:%SZ)'","compo
gitextract_zqgb6goh/
├── .claude/
│ └── skills/
│ └── vibe-breaking-change/
│ ├── SKILL.md
│ └── references/
│ ├── codemod-best-practices.md
│ ├── codemod-examples.md
│ ├── dependency-analysis.md
│ ├── pr-templates.md
│ ├── testing-validation.md
│ └── workflow-checklist.md
├── .cursor/
│ ├── rules/
│ │ ├── accessibility-guidelines.mdc
│ │ ├── base-components.mdc
│ │ ├── ci-cd-workflows.mdc
│ │ ├── component-internal-structure.mdc
│ │ ├── dependency-management.mdc
│ │ ├── file-structures.mdc
│ │ ├── layout-components.mdc
│ │ ├── monorepo-structure.mdc
│ │ ├── naming-conventions.mdc
│ │ ├── new-component-implementation.mdc
│ │ ├── package-separation.mdc
│ │ ├── playground-reproduce.mdc
│ │ ├── react-context.mdc
│ │ ├── storybook-stories.mdc
│ │ └── styling-conventions.mdc
│ └── templates/
│ └── package-separation/
│ ├── QUICK_REFERENCE.md
│ ├── README.md
│ ├── files.d.ts
│ ├── main-index.ts
│ ├── package.json
│ ├── rollup.config.mjs
│ ├── subdirectory-index.ts
│ ├── tsconfig.json
│ ├── vitest.config.mjs
│ └── vitest.setup.mjs
├── .github/
│ ├── CODEOWNERS
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.yml
│ │ └── config.yml
│ ├── PULL_REQUEST_TEMPLATE.md
│ ├── actions/
│ │ ├── check-changed-packages/
│ │ │ └── action.yml
│ │ ├── determine-lerna-since-flag/
│ │ │ └── action.yml
│ │ ├── download-builds/
│ │ │ └── action.yml
│ │ ├── git-creds/
│ │ │ └── action.yml
│ │ └── setup/
│ │ └── action.yml
│ └── workflows/
│ ├── build-and-upload.yml
│ ├── bundle-size.yml
│ ├── chromatic.yml
│ ├── merge-queue.yml
│ ├── performance.yml
│ ├── pr.yml
│ ├── prerelease.yml
│ ├── publish-storybook.yml
│ ├── release-v2.yml
│ ├── release.yml
│ └── test.yml
├── .gitignore
├── .nvmrc
├── .prettierrc
├── CLAUDE.md
├── CNAME
├── CONTRIBUTING.md
├── README.md
├── lerna.json
├── package.json
├── packages/
│ ├── base/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ ├── rollup.config.mjs
│ │ ├── src/
│ │ │ ├── BaseInput/
│ │ │ │ ├── BaseInput.module.scss
│ │ │ │ ├── BaseInput.tsx
│ │ │ │ ├── BaseInput.types.ts
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── BaseInput.test.tsx
│ │ │ │ └── index.ts
│ │ │ ├── index.ts
│ │ │ └── types/
│ │ │ └── files.d.ts
│ │ ├── tsconfig.json
│ │ ├── vitest.config.mjs
│ │ └── vitest.setup.mjs
│ ├── codemod/
│ │ ├── .eslintrc.json
│ │ ├── .prettierignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── bin/
│ │ │ └── vibe-codemod.ts
│ │ ├── package.json
│ │ ├── plop/
│ │ │ └── component/
│ │ │ ├── test.hbs
│ │ │ ├── transform-remove-props.hbs
│ │ │ ├── transform-update-prop-values.hbs
│ │ │ ├── transform-update-props.hbs
│ │ │ ├── transform-update-static-prop-key.hbs
│ │ │ └── transform.hbs
│ │ ├── plopfile.js
│ │ ├── src/
│ │ │ ├── consts/
│ │ │ │ ├── index.ts
│ │ │ │ └── vibe-import-paths.ts
│ │ │ └── utils/
│ │ │ ├── __tests__/
│ │ │ │ ├── import-utils.test.ts
│ │ │ │ └── prop-utils.test.ts
│ │ │ ├── component-jsx-utils.ts
│ │ │ ├── import-utils.ts
│ │ │ ├── index.ts
│ │ │ ├── prop-utils.ts
│ │ │ ├── report-utils.ts
│ │ │ └── wrap-transformation.ts
│ │ ├── test/
│ │ │ └── setup.ts
│ │ ├── transformations/
│ │ │ └── core/
│ │ │ ├── v2-to-v3/
│ │ │ │ ├── AttentionBox-component-migration.ts
│ │ │ │ ├── Avatar-component-migration.ts
│ │ │ │ ├── AvatarGroup-component-migration.ts
│ │ │ │ ├── Box-component-migration.ts
│ │ │ │ ├── BreadcrumbItem-component-migration.ts
│ │ │ │ ├── Button-component-migration.ts
│ │ │ │ ├── ButtonGroup-component-migration.ts
│ │ │ │ ├── Checkbox-component-migration.ts
│ │ │ │ ├── Chips-component-migration.ts
│ │ │ │ ├── Clickable-component-migration.ts
│ │ │ │ ├── ColorPicker-component-migration.ts
│ │ │ │ ├── ColorPickerContent-component-migration.ts
│ │ │ │ ├── Counter-component-migration.ts
│ │ │ │ ├── Dialog-component-migration.ts
│ │ │ │ ├── DialogContent-container-component-migration.ts
│ │ │ │ ├── Divider-component-migration.ts
│ │ │ │ ├── Dropdown-component-migration.ts
│ │ │ │ ├── Icon-component-migration.ts
│ │ │ │ ├── IconButton-component-migration.ts
│ │ │ │ ├── InputField-component-import-migration.ts
│ │ │ │ ├── Label-component-migration.ts
│ │ │ │ ├── Link-component-migration.ts
│ │ │ │ ├── Loader-component-migration.ts
│ │ │ │ ├── Menu-component-migration.ts
│ │ │ │ ├── MenuButton-component-migration.ts
│ │ │ │ ├── MenuDivider-component-migration.ts
│ │ │ │ ├── MenuItem-component-migration.ts
│ │ │ │ ├── MenuItemButton-component-migration.ts
│ │ │ │ ├── MenuTitle-component-migration.ts
│ │ │ │ ├── Modal-component-migration.ts
│ │ │ │ ├── ModalHeader-component-migration.ts
│ │ │ │ ├── RadioButton-component-migration.ts
│ │ │ │ ├── Search-component-import-migration.ts
│ │ │ │ ├── Steps-component-migration.ts
│ │ │ │ ├── TabList-component-migration.ts
│ │ │ │ ├── TabPanels-component-migration.ts
│ │ │ │ ├── TextField-component-migration.ts
│ │ │ │ ├── ThemeProvider-component-migration.ts
│ │ │ │ ├── Tipseen-component-migration.ts
│ │ │ │ ├── TipseenContent-component-migration.ts
│ │ │ │ ├── Toggle-component-migration.ts
│ │ │ │ ├── Tooltip-component-migration.ts
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── AttentionBox-component-migration.test.ts
│ │ │ │ │ ├── Avatar-component-migration.test.ts
│ │ │ │ │ ├── AvatarGroup-component-migration.test.ts
│ │ │ │ │ ├── Box-component-migration.test.ts
│ │ │ │ │ ├── BreadcrumbItem-component-migration.test.ts
│ │ │ │ │ ├── Button-component-migration.test.ts
│ │ │ │ │ ├── ButtonGroup-component-migration.test.ts
│ │ │ │ │ ├── Checkbox-component-migration.test.ts
│ │ │ │ │ ├── Chips-component-migration.test.ts
│ │ │ │ │ ├── Clickable-component-migration.test.ts
│ │ │ │ │ ├── ColorPicker-component-migration.test.ts
│ │ │ │ │ ├── ColorPickerContent-component-migration.test.ts
│ │ │ │ │ ├── Counter-component-migration.test.ts
│ │ │ │ │ ├── Dialog-component-migration.test.ts
│ │ │ │ │ ├── DialogContent-container-component-migration.test.ts
│ │ │ │ │ ├── Divider-component-migration.test.ts
│ │ │ │ │ ├── Dropdown-component-migration.test.ts
│ │ │ │ │ ├── Icon-component-migration.test.ts
│ │ │ │ │ ├── IconButton-component-migration.test.ts
│ │ │ │ │ ├── InputField-component-import-migration.test.ts
│ │ │ │ │ ├── Label-component-migration.test.ts
│ │ │ │ │ ├── Link-component-migration.test.ts
│ │ │ │ │ ├── Loader-component-migration.test.ts
│ │ │ │ │ ├── Menu-component-migration.test.ts
│ │ │ │ │ ├── MenuButton-component-migration.test.ts
│ │ │ │ │ ├── MenuDivider-component-migration.test.ts
│ │ │ │ │ ├── MenuItem-component-migration.test.ts
│ │ │ │ │ ├── MenuItemButton-component-migration.test.ts
│ │ │ │ │ ├── MenuTitle-component-migration.test.ts
│ │ │ │ │ ├── Modal-component-migration.test.ts
│ │ │ │ │ ├── ModalHeader-component-migration.test.ts
│ │ │ │ │ ├── RadioButton-component-migration.test.ts
│ │ │ │ │ ├── Search-component-import-migration.test.ts
│ │ │ │ │ ├── Steps-component-migration.test.ts
│ │ │ │ │ ├── TabList-component-migration.test.ts
│ │ │ │ │ ├── TabPanels-component-migration.test.ts
│ │ │ │ │ ├── TextField-component-migration.test.ts
│ │ │ │ │ ├── ThemeProvider-component-migration.test.ts
│ │ │ │ │ ├── Tipseen-component-migration.test.ts
│ │ │ │ │ ├── TipseenContent-component-migration.test.ts
│ │ │ │ │ ├── Toggle-component-migration.test.ts
│ │ │ │ │ ├── Tooltip-component-migration.test.ts
│ │ │ │ │ ├── next-imports-migration.test.ts
│ │ │ │ │ ├── packages-rename-migration.test.ts
│ │ │ │ │ ├── type-imports-migration.test.ts
│ │ │ │ │ └── useClickableProps-hook-migration.test.ts
│ │ │ │ ├── enums/
│ │ │ │ │ ├── Enums-migration.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── Enums-migration.test.ts
│ │ │ │ │ └── enumMappings.json
│ │ │ │ ├── next-imports-migration.ts
│ │ │ │ ├── packages-rename-migration.ts
│ │ │ │ ├── type-imports-migration.ts
│ │ │ │ └── useClickableProps-hook-migration.ts
│ │ │ └── v3-to-v4/
│ │ │ ├── Chips-component-migration.ts
│ │ │ ├── Dialog-component-migration.ts
│ │ │ ├── Flex-component-migration.ts
│ │ │ ├── Icon-component-migration.ts
│ │ │ ├── LinearProgressBar-component-migration.ts
│ │ │ ├── README.md
│ │ │ ├── TextField-component-migration.ts
│ │ │ ├── TextWithHighlight-component-migration.ts
│ │ │ ├── TipseenImage-component-migration.ts
│ │ │ ├── Toggle-component-migration.ts
│ │ │ ├── VirtualizedList-component-migration.ts
│ │ │ ├── __tests__/
│ │ │ │ ├── Chips-component-migration.test.ts
│ │ │ │ ├── Dialog-component-migration.test.ts
│ │ │ │ ├── Flex-component-migration.test.ts
│ │ │ │ ├── Icon-component-migration.test.ts
│ │ │ │ ├── LinearProgressBar-component-migration.test.ts
│ │ │ │ ├── TextField-component-migration.test.ts
│ │ │ │ ├── TextWithHighlight-component-migration.test.ts
│ │ │ │ ├── TipseenImage-component-migration.test.ts
│ │ │ │ ├── Toggle-component-migration.test.ts
│ │ │ │ ├── VirtualizedList-component-migration.test.ts
│ │ │ │ ├── aria-props-migration.test.ts
│ │ │ │ ├── enums-migration.test.ts
│ │ │ │ ├── next-imports-migration.test.ts
│ │ │ │ └── packages-rename-migration.test.ts
│ │ │ ├── aria-props-migration.ts
│ │ │ ├── enums/
│ │ │ │ └── enumMappings.json
│ │ │ ├── enums-migration.ts
│ │ │ ├── next-imports-migration.ts
│ │ │ └── packages-rename-migration.ts
│ │ ├── tsconfig.json
│ │ ├── tsconfig.test.json
│ │ ├── types/
│ │ │ ├── index.ts
│ │ │ └── transformation-context.types.ts
│ │ └── vitest.config.ts
│ ├── components/
│ │ ├── button/
│ │ │ ├── CHANGELOG.md
│ │ │ ├── package.json
│ │ │ ├── rollup.config.mjs
│ │ │ ├── src/
│ │ │ │ ├── Button/
│ │ │ │ │ ├── Button.module.scss
│ │ │ │ │ ├── Button.tsx
│ │ │ │ │ ├── Button.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Button.snapshot.test.tsx
│ │ │ │ │ │ ├── Button.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Button.snapshot.test.tsx.snap
│ │ │ │ │ ├── helper/
│ │ │ │ │ │ ├── dom-helpers.ts
│ │ │ │ │ │ └── useButtonLoading.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── types/
│ │ │ │ └── files.d.ts
│ │ │ ├── tsconfig.json
│ │ │ ├── vitest.config.mjs
│ │ │ └── vitest.setup.mjs
│ │ ├── clickable/
│ │ │ ├── CHANGELOG.md
│ │ │ ├── package.json
│ │ │ ├── rollup.config.mjs
│ │ │ ├── src/
│ │ │ │ ├── Clickable/
│ │ │ │ │ ├── Clickable.module.scss
│ │ │ │ │ ├── Clickable.tsx
│ │ │ │ │ ├── ClickableWrapper.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Clickable.snapshot.test.tsx
│ │ │ │ │ │ ├── Clickable.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Clickable.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── types/
│ │ │ │ │ └── files.d.ts
│ │ │ │ └── useClickableProps/
│ │ │ │ └── useClickableProps.ts
│ │ │ ├── tsconfig.json
│ │ │ ├── vitest.config.mjs
│ │ │ └── vitest.setup.mjs
│ │ ├── dialog/
│ │ │ ├── CHANGELOG.md
│ │ │ ├── package.json
│ │ │ ├── rollup.config.mjs
│ │ │ ├── src/
│ │ │ │ ├── Dialog/
│ │ │ │ │ ├── Dialog.module.scss
│ │ │ │ │ ├── Dialog.tsx
│ │ │ │ │ ├── Dialog.types.ts
│ │ │ │ │ ├── DialogConstants.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Dialog.test.tsx
│ │ │ │ │ │ └── useDisableScroll.test.ts
│ │ │ │ │ ├── components/
│ │ │ │ │ │ ├── DialogContent/
│ │ │ │ │ │ │ ├── DialogContent.module.scss
│ │ │ │ │ │ │ └── DialogContent.tsx
│ │ │ │ │ │ └── Refable/
│ │ │ │ │ │ ├── Refable.tsx
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ └── Refable.test.tsx
│ │ │ │ │ ├── hooks/
│ │ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ │ └── useDisableScroll.test.ts
│ │ │ │ │ │ └── useDisableScroll.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── DialogContentContainer/
│ │ │ │ │ ├── DialogContentContainer.module.scss
│ │ │ │ │ ├── DialogContentContainer.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── DialogContentContainer.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── DialogContentContainer.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── types/
│ │ │ │ └── files.d.ts
│ │ │ ├── tsconfig.json
│ │ │ ├── vitest.config.mjs
│ │ │ └── vitest.setup.mjs
│ │ ├── icon/
│ │ │ ├── CHANGELOG.md
│ │ │ ├── package.json
│ │ │ ├── rollup.config.mjs
│ │ │ ├── src/
│ │ │ │ ├── Icon/
│ │ │ │ │ ├── CustomSvgIcon/
│ │ │ │ │ │ └── CustomSvgIcon.tsx
│ │ │ │ │ ├── FontIcon/
│ │ │ │ │ │ └── FontIcon.tsx
│ │ │ │ │ ├── Icon.module.scss
│ │ │ │ │ ├── Icon.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── allIcons.test.ts
│ │ │ │ │ ├── hooks/
│ │ │ │ │ │ ├── useIconProps.tsx
│ │ │ │ │ │ └── useIconScreenReaderAccessProps.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── types.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── types/
│ │ │ │ └── files.d.ts
│ │ │ └── tsconfig.json
│ │ ├── icon-button/
│ │ │ ├── CHANGELOG.md
│ │ │ ├── package.json
│ │ │ ├── rollup.config.mjs
│ │ │ ├── src/
│ │ │ │ ├── IconButton/
│ │ │ │ │ ├── IconButton.module.scss
│ │ │ │ │ ├── IconButton.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── IconButton.snapshot.test.tsx
│ │ │ │ │ │ ├── IconButton.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── IconButton.snapshot.test.tsx.snap
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── services/
│ │ │ │ │ └── IconButton-helpers.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── types/
│ │ │ │ └── files.d.ts
│ │ │ ├── tsconfig.json
│ │ │ ├── vitest.config.mjs
│ │ │ └── vitest.setup.mjs
│ │ ├── layer/
│ │ │ ├── CHANGELOG.md
│ │ │ ├── package.json
│ │ │ ├── rollup.config.mjs
│ │ │ ├── src/
│ │ │ │ ├── LayerProvider/
│ │ │ │ │ ├── LayerContext.ts
│ │ │ │ │ ├── LayerProvider.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── LayerProvider.test.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── types/
│ │ │ │ └── files.d.ts
│ │ │ ├── tsconfig.json
│ │ │ ├── vitest.config.mjs
│ │ │ └── vitest.setup.mjs
│ │ ├── layout/
│ │ │ ├── CHANGELOG.md
│ │ │ ├── package.json
│ │ │ ├── rollup.config.mjs
│ │ │ ├── src/
│ │ │ │ ├── Box/
│ │ │ │ │ ├── Box.module.scss
│ │ │ │ │ ├── Box.tsx
│ │ │ │ │ ├── Box.types.ts
│ │ │ │ │ ├── BoxConstants.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Box.snapshot.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Box.snapshot.test.tsx.snap
│ │ │ │ │ ├── _utilities.scss
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Flex/
│ │ │ │ │ ├── Flex.module.scss
│ │ │ │ │ ├── Flex.tsx
│ │ │ │ │ ├── Flex.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Flex.snapshot.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Flex.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── types/
│ │ │ │ └── files.d.ts
│ │ │ ├── tsconfig.json
│ │ │ ├── vitest.config.mjs
│ │ │ └── vitest.setup.mjs
│ │ ├── loader/
│ │ │ ├── CHANGELOG.md
│ │ │ ├── package.json
│ │ │ ├── rollup.config.mjs
│ │ │ ├── src/
│ │ │ │ ├── Loader/
│ │ │ │ │ ├── Loader.module.scss
│ │ │ │ │ ├── Loader.tsx
│ │ │ │ │ ├── Loader.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Loader.snapshot.test.tsx
│ │ │ │ │ │ ├── Loader.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Loader.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── types/
│ │ │ │ └── files.d.ts
│ │ │ ├── tsconfig.json
│ │ │ ├── vitest.config.mjs
│ │ │ └── vitest.setup.mjs
│ │ ├── tooltip/
│ │ │ ├── CHANGELOG.md
│ │ │ ├── package.json
│ │ │ ├── rollup.config.mjs
│ │ │ ├── src/
│ │ │ │ ├── Tooltip/
│ │ │ │ │ ├── Tooltip.module.scss
│ │ │ │ │ ├── Tooltip.tsx
│ │ │ │ │ ├── Tooltip.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Tooltip.snapshot.test.tsx
│ │ │ │ │ │ ├── Tooltip.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Tooltip.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── types/
│ │ │ │ └── files.d.ts
│ │ │ ├── tsconfig.json
│ │ │ ├── vitest.config.mjs
│ │ │ └── vitest.setup.mjs
│ │ └── typography/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ ├── rollup.config.mjs
│ │ ├── src/
│ │ │ ├── Heading/
│ │ │ │ ├── Heading.module.scss
│ │ │ │ ├── Heading.tsx
│ │ │ │ ├── Heading.types.ts
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── Heading.snapshot.test.tsx
│ │ │ │ │ └── __snapshots__/
│ │ │ │ │ └── Heading.snapshot.test.tsx.snap
│ │ │ │ └── index.ts
│ │ │ ├── Text/
│ │ │ │ ├── Text.module.scss
│ │ │ │ ├── Text.tsx
│ │ │ │ ├── Text.types.ts
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── Text.snapshot.test.tsx
│ │ │ │ │ └── __snapshots__/
│ │ │ │ │ └── Text.snapshot.test.tsx.snap
│ │ │ │ └── index.ts
│ │ │ ├── Typography/
│ │ │ │ ├── Typography.module.scss
│ │ │ │ ├── Typography.tsx
│ │ │ │ ├── Typography.types.ts
│ │ │ │ ├── TypographyContext.ts
│ │ │ │ ├── TypographyHooks.tsx
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── Typography.snapshot.test.tsx
│ │ │ │ │ └── __snapshots__/
│ │ │ │ │ └── Typography.snapshot.test.tsx.snap
│ │ │ │ └── index.ts
│ │ │ ├── index.ts
│ │ │ ├── styles/
│ │ │ │ └── typography.scss
│ │ │ └── types/
│ │ │ └── files.d.ts
│ │ ├── tsconfig.json
│ │ ├── vitest.config.mjs
│ │ └── vitest.setup.mjs
│ ├── config/
│ │ ├── .eslintrc.cjs
│ │ ├── CHANGELOG.md
│ │ ├── eslint.config.cjs
│ │ ├── package.json
│ │ ├── rollup.config.mjs
│ │ ├── scripts/
│ │ │ └── styleInject.ejs
│ │ ├── tsconfig.json
│ │ └── vitest.config.mjs
│ ├── core/
│ │ ├── .eslintrc.cjs
│ │ ├── .stylelintignore
│ │ ├── .stylelintrc.json
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── __mocks__/
│ │ │ └── fileMock.cjs
│ │ ├── babel.config.cjs
│ │ ├── package.json
│ │ ├── plop/
│ │ │ └── component/
│ │ │ ├── component-index.txt
│ │ │ ├── component-scss.txt
│ │ │ ├── component-stories-mdx.txt
│ │ │ ├── component-stories-tsx.txt
│ │ │ ├── component-tests.txt
│ │ │ ├── component-ts.txt
│ │ │ ├── component-types.txt
│ │ │ └── index.js
│ │ ├── plopfile.js
│ │ ├── rollup.config.js
│ │ ├── scripts/
│ │ │ └── styleInject.ejs
│ │ ├── src/
│ │ │ ├── __tests__/
│ │ │ │ ├── __snapshots__/
│ │ │ │ │ └── exports.test.ts.snap
│ │ │ │ └── exports.test.ts
│ │ │ ├── components/
│ │ │ │ ├── Accordion/
│ │ │ │ │ ├── Accordion/
│ │ │ │ │ │ ├── Accordion.module.scss
│ │ │ │ │ │ ├── Accordion.tsx
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ ├── Accordion.snapshot.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Accordion.snapshot.test.tsx.snap
│ │ │ │ │ ├── AccordionItem/
│ │ │ │ │ │ ├── AccordionItem.tsx
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ ├── AccordionItem.snapshot.test.tsx
│ │ │ │ │ │ ├── AccordionItem.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── AccordionItem.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── AlertBanner/
│ │ │ │ │ ├── AlertBanner.module.scss
│ │ │ │ │ ├── AlertBanner.tsx
│ │ │ │ │ ├── AlertBanner.types.ts
│ │ │ │ │ ├── AlertBannerButton/
│ │ │ │ │ │ ├── AlertBannerButton.module.scss
│ │ │ │ │ │ └── AlertBannerButton.tsx
│ │ │ │ │ ├── AlertBannerContext.ts
│ │ │ │ │ ├── AlertBannerLink/
│ │ │ │ │ │ ├── AlertBannerLink.module.scss
│ │ │ │ │ │ └── AlertBannerLink.tsx
│ │ │ │ │ ├── AlertBannerText/
│ │ │ │ │ │ ├── AlertBannerText.module.scss
│ │ │ │ │ │ └── AlertBannerText.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── AlertBanner.snapshot.test.tsx
│ │ │ │ │ │ ├── AlertBanner.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── AlertBanner.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── AttentionBox/
│ │ │ │ │ ├── AttentionBox.module.scss
│ │ │ │ │ ├── AttentionBox.tsx
│ │ │ │ │ ├── AttentionBox.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── AttentionBox.test.tsx
│ │ │ │ │ ├── components/
│ │ │ │ │ │ ├── AttentionBoxButton/
│ │ │ │ │ │ │ └── AttentionBoxButton.tsx
│ │ │ │ │ │ ├── AttentionBoxCloseButton/
│ │ │ │ │ │ │ ├── AttentionBoxCloseButton.module.scss
│ │ │ │ │ │ │ └── AttentionBoxCloseButton.tsx
│ │ │ │ │ │ ├── AttentionBoxLeadingIcon/
│ │ │ │ │ │ │ ├── AttentionBoxLeadingIcon.module.scss
│ │ │ │ │ │ │ └── AttentionBoxLeadingIcon.tsx
│ │ │ │ │ │ └── AttentionBoxLink/
│ │ │ │ │ │ ├── AttentionBoxLink.module.scss
│ │ │ │ │ │ └── AttentionBoxLink.tsx
│ │ │ │ │ ├── consts/
│ │ │ │ │ │ └── icons.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── layouts/
│ │ │ │ │ │ ├── AttentionBoxCompact/
│ │ │ │ │ │ │ ├── AttentionBoxCompact.module.scss
│ │ │ │ │ │ │ ├── AttentionBoxCompact.tsx
│ │ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ │ └── AttentionBoxCompact.test.tsx
│ │ │ │ │ │ └── AttentionBoxDefault/
│ │ │ │ │ │ ├── AttentionBoxDefault.module.scss
│ │ │ │ │ │ ├── AttentionBoxDefault.tsx
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ └── AttentionBoxDefault.test.tsx
│ │ │ │ │ └── utils/
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── iconUtils.test.ts
│ │ │ │ │ └── iconUtils.ts
│ │ │ │ ├── Avatar/
│ │ │ │ │ ├── Avatar.module.scss
│ │ │ │ │ ├── Avatar.tsx
│ │ │ │ │ ├── Avatar.types.ts
│ │ │ │ │ ├── AvatarBadge.module.scss
│ │ │ │ │ ├── AvatarBadge.tsx
│ │ │ │ │ ├── AvatarConstants.scss
│ │ │ │ │ ├── AvatarContent.module.scss
│ │ │ │ │ ├── AvatarContent.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Avatar.snapshot.test.tsx
│ │ │ │ │ │ ├── Avatar.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Avatar.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── AvatarGroup/
│ │ │ │ │ ├── AvatarGroup.module.scss
│ │ │ │ │ ├── AvatarGroup.tsx
│ │ │ │ │ ├── AvatarGroup.types.ts
│ │ │ │ │ ├── AvatarGroupConstants.ts
│ │ │ │ │ ├── AvatarGroupCounter.module.scss
│ │ │ │ │ ├── AvatarGroupCounter.tsx
│ │ │ │ │ ├── AvatarGroupCounterTooltipContainer.tsx
│ │ │ │ │ ├── AvatarGroupCounterTooltipContent.module.scss
│ │ │ │ │ ├── AvatarGroupCounterTooltipContent.tsx
│ │ │ │ │ ├── AvatarGroupCounterTooltipContentVirtualizedList.module.scss
│ │ │ │ │ ├── AvatarGroupCounterTooltipContentVirtualizedList.tsx
│ │ │ │ │ ├── AvatarGroupCounterTooltipHelper.tsx
│ │ │ │ │ ├── AvatarGroupHelper.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── AvatarGroup.snapshot.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ ├── AvatarGroup.snapshot.test.jsx.snap
│ │ │ │ │ │ └── AvatarGroup.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Badge/
│ │ │ │ │ ├── Badge.module.scss
│ │ │ │ │ ├── Badge.tsx
│ │ │ │ │ ├── Badge.types.ts
│ │ │ │ │ ├── Indicator/
│ │ │ │ │ │ ├── Indicator.module.scss
│ │ │ │ │ │ ├── Indicator.tsx
│ │ │ │ │ │ ├── Indicator.types.ts
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ ├── Indicator.snapshot.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Indicator.snapshot.test.tsx.snap
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Badge.snapshot.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Badge.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── BaseItem/
│ │ │ │ │ ├── BaseItem.module.scss
│ │ │ │ │ ├── BaseItem.tsx
│ │ │ │ │ ├── BaseItem.types.ts
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ └── BaseItem.stories.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── BaseItem.test.tsx
│ │ │ │ │ ├── hooks/
│ │ │ │ │ │ └── useListItemProps.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── utils.tsx
│ │ │ │ ├── BaseList/
│ │ │ │ │ ├── BaseList.module.scss
│ │ │ │ │ ├── BaseList.tsx
│ │ │ │ │ ├── BaseList.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── BaseList.test.tsx
│ │ │ │ │ ├── context/
│ │ │ │ │ │ └── BaseListContext.tsx
│ │ │ │ │ ├── hooks/
│ │ │ │ │ │ ├── useBaseListFocus.ts
│ │ │ │ │ │ └── useBaseListKeyboard.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── utils/
│ │ │ │ │ └── baseListUtils.ts
│ │ │ │ ├── BreadcrumbsBar/
│ │ │ │ │ ├── BreadcrumbItem/
│ │ │ │ │ │ ├── BreadcrumbContent/
│ │ │ │ │ │ │ ├── BreadcrumbContent.module.scss
│ │ │ │ │ │ │ └── BreadcrumbContent.tsx
│ │ │ │ │ │ ├── BreadcrumbItem.module.scss
│ │ │ │ │ │ ├── BreadcrumbItem.tsx
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ ├── BreadcrumbItem.snapshot.test.tsx
│ │ │ │ │ │ ├── BreadcrumbItem.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ ├── BreadcrumbItem.snapshot.test.jsx.snap
│ │ │ │ │ │ └── BreadcrumbItem.snapshot.test.tsx.snap
│ │ │ │ │ ├── BreadcrumbMenu/
│ │ │ │ │ │ ├── BreadcrumbMenu.tsx
│ │ │ │ │ │ ├── BreadcrumbMenuItem/
│ │ │ │ │ │ │ └── BreadcrumbMenuItem.tsx
│ │ │ │ │ │ ├── BreadcrumbsMenu.module.scss
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ ├── BreadcrumbMenu.snapshot.test.tsx
│ │ │ │ │ │ ├── BreadcrumbMenu.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ ├── BreadcrumbMenu.snapshot.test.jsx.snap
│ │ │ │ │ │ └── BreadcrumbMenu.snapshot.test.tsx.snap
│ │ │ │ │ ├── Breadcrumbs.types.ts
│ │ │ │ │ ├── BreadcrumbsBar.module.scss
│ │ │ │ │ ├── BreadcrumbsBar.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── BreadcrumbsBar.snapshot.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ ├── BreadcrumbsBar.snapshot.test.jsx.snap
│ │ │ │ │ │ └── BreadcrumbsBar.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── ButtonGroup/
│ │ │ │ │ ├── ButtonGroup.module.scss
│ │ │ │ │ ├── ButtonGroup.tsx
│ │ │ │ │ ├── ButtonGroupConstants.ts
│ │ │ │ │ ├── ButtonWrapper.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── ButtonGroup.snapshot.test.tsx
│ │ │ │ │ │ ├── ButtonGroup.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ ├── ButtonGroup.snapshot.test.tsx.snap
│ │ │ │ │ │ └── ButtonGroup.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Checkbox/
│ │ │ │ │ ├── Checkbox.module.scss
│ │ │ │ │ ├── Checkbox.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Checkbox.snapshot.test.tsx
│ │ │ │ │ │ ├── Checkbox.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Checkbox.snapshot.test.tsx.snap
│ │ │ │ │ ├── hooks/
│ │ │ │ │ │ └── useSupportFirefoxLabelClick.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Chips/
│ │ │ │ │ ├── Chips.module.scss
│ │ │ │ │ ├── Chips.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Chips.snapshot.test.tsx
│ │ │ │ │ │ ├── Chips.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Chips.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── ColorPicker/
│ │ │ │ │ ├── ColorPicker.module.scss
│ │ │ │ │ ├── ColorPicker.tsx
│ │ │ │ │ ├── ColorPicker.types.ts
│ │ │ │ │ ├── ColorPickerConstants.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── ColorPicker.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── ColorPicker.test.tsx.snap
│ │ │ │ │ ├── components/
│ │ │ │ │ │ ├── ColorPickerContent/
│ │ │ │ │ │ │ ├── ColorPickerClearButton.module.scss
│ │ │ │ │ │ │ ├── ColorPickerClearButton.tsx
│ │ │ │ │ │ │ ├── ColorPickerColorsGrid.module.scss
│ │ │ │ │ │ │ ├── ColorPickerColorsGrid.tsx
│ │ │ │ │ │ │ └── ColorPickerContent.tsx
│ │ │ │ │ │ └── ColorPickerItemComponent/
│ │ │ │ │ │ ├── ColorPickerItemComponent.module.scss
│ │ │ │ │ │ └── ColorPickerItemComponent.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── services/
│ │ │ │ │ └── ColorPickerStyleService.ts
│ │ │ │ ├── Combobox/
│ │ │ │ │ ├── Combobox.module.scss
│ │ │ │ │ ├── Combobox.tsx
│ │ │ │ │ ├── Combobox.types.ts
│ │ │ │ │ ├── ComboboxHelpers/
│ │ │ │ │ │ ├── ComboboxHelpers.module.scss
│ │ │ │ │ │ └── ComboboxHelpers.tsx
│ │ │ │ │ ├── ComboboxService.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Combobox.snapshot.test.tsx
│ │ │ │ │ │ ├── Combobox.test.tsx
│ │ │ │ │ │ ├── ComboboxService.test.ts
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Combobox.snapshot.test.tsx.snap
│ │ │ │ │ ├── components/
│ │ │ │ │ │ ├── ComboboxCategory/
│ │ │ │ │ │ │ ├── ComboboxCategory.module.scss
│ │ │ │ │ │ │ └── ComboboxCategory.tsx
│ │ │ │ │ │ ├── ComboboxConstants.ts
│ │ │ │ │ │ ├── ComboboxItems/
│ │ │ │ │ │ │ ├── ComboboxItems.module.scss
│ │ │ │ │ │ │ └── ComboboxItems.tsx
│ │ │ │ │ │ ├── ComboboxOption/
│ │ │ │ │ │ │ ├── ComboboxOption.module.scss
│ │ │ │ │ │ │ └── ComboboxOption.tsx
│ │ │ │ │ │ └── StickyCategoryHeader/
│ │ │ │ │ │ ├── StickyCategoryHeader.module.scss
│ │ │ │ │ │ └── StickyCategoryHeader.tsx
│ │ │ │ │ ├── helpers.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Counter/
│ │ │ │ │ ├── Counter.module.scss
│ │ │ │ │ ├── Counter.tsx
│ │ │ │ │ ├── Counter.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Counter.snapshot.test.tsx
│ │ │ │ │ │ ├── Counter.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Counter.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── DatePicker/
│ │ │ │ │ ├── DateContentHoverContext.tsx
│ │ │ │ │ ├── DatePicker.module.scss
│ │ │ │ │ ├── DatePicker.tsx
│ │ │ │ │ ├── DatePicker.types.ts
│ │ │ │ │ ├── DatePickerHeader.module.scss
│ │ │ │ │ ├── DatePickerHeader.tsx
│ │ │ │ │ ├── RangeDayContent.tsx
│ │ │ │ │ ├── SingleDayContent.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── DatePicker.test.tsx
│ │ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ │ ├── DatePicker.test.jsx.snap
│ │ │ │ │ │ │ └── DatePicker.test.tsx.snap
│ │ │ │ │ │ └── utils.test.ts
│ │ │ │ │ ├── datePickerHooks.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── types/
│ │ │ │ │ │ └── files.d.ts
│ │ │ │ │ └── utils.ts
│ │ │ │ ├── Divider/
│ │ │ │ │ ├── Divider.module.scss
│ │ │ │ │ ├── Divider.tsx
│ │ │ │ │ ├── Divider.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Divider.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Divider.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Dropdown/
│ │ │ │ │ ├── Dropdown.tsx
│ │ │ │ │ ├── Dropdown.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── BaseList.test.tsx
│ │ │ │ │ │ └── Dropdown.test.tsx
│ │ │ │ │ ├── components/
│ │ │ │ │ │ ├── DropdownBase/
│ │ │ │ │ │ │ ├── DropdownBase.module.scss
│ │ │ │ │ │ │ └── DropdownBase.tsx
│ │ │ │ │ │ ├── DropdownBaseList/
│ │ │ │ │ │ │ ├── DropdownBaseList.module.scss
│ │ │ │ │ │ │ ├── DropdownBaseList.tsx
│ │ │ │ │ │ │ └── DropdownBaseList.types.ts
│ │ │ │ │ │ ├── DropdownBoxMode/
│ │ │ │ │ │ │ ├── DropdownBoxMode.module.scss
│ │ │ │ │ │ │ └── DropdownBoxMode.tsx
│ │ │ │ │ │ ├── DropdownPopup/
│ │ │ │ │ │ │ └── DropdownPopup.tsx
│ │ │ │ │ │ ├── DropdownWrapperUI.tsx
│ │ │ │ │ │ ├── Menu/
│ │ │ │ │ │ │ ├── Menu.module.scss
│ │ │ │ │ │ │ ├── Menu.tsx
│ │ │ │ │ │ │ └── MenuList.tsx
│ │ │ │ │ │ ├── MultiSelectedValues/
│ │ │ │ │ │ │ ├── MultiSelectedValues.module.scss
│ │ │ │ │ │ │ └── MultiSelectedValues.tsx
│ │ │ │ │ │ └── Trigger/
│ │ │ │ │ │ ├── DropdownChip.tsx
│ │ │ │ │ │ ├── DropdownInput.tsx
│ │ │ │ │ │ ├── MultiSelectTrigger.tsx
│ │ │ │ │ │ ├── SingleSelectTrigger.tsx
│ │ │ │ │ │ ├── Trigger.module.scss
│ │ │ │ │ │ └── TriggerActions.tsx
│ │ │ │ │ ├── context/
│ │ │ │ │ │ ├── DropdownContext.ts
│ │ │ │ │ │ └── DropdownContext.types.ts
│ │ │ │ │ ├── hooks/
│ │ │ │ │ │ ├── useDropdownCombobox.ts
│ │ │ │ │ │ ├── useDropdownFiltering.ts
│ │ │ │ │ │ ├── useDropdownMultiCombobox.ts
│ │ │ │ │ │ ├── useDropdownMultiSelect.ts
│ │ │ │ │ │ └── useDropdownSelect.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── modes/
│ │ │ │ │ │ ├── DropdownComboboxController.tsx
│ │ │ │ │ │ ├── DropdownMultiComboboxController.tsx
│ │ │ │ │ │ ├── DropdownMultiSelectController.tsx
│ │ │ │ │ │ └── DropdownSelectController.tsx
│ │ │ │ │ └── utils/
│ │ │ │ │ ├── dropdown-modifiers.ts
│ │ │ │ │ └── dropdownUtils.ts
│ │ │ │ ├── EditableHeading/
│ │ │ │ │ ├── EditableHeading.module.scss
│ │ │ │ │ ├── EditableHeading.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── EditableHeading.test.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── EditableText/
│ │ │ │ │ ├── EditableText.module.scss
│ │ │ │ │ ├── EditableText.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── EditableText.test.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── EditableTypography/
│ │ │ │ │ ├── EditableTypography.module.scss
│ │ │ │ │ ├── EditableTypography.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── EditableTypography.test.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── EmptyState/
│ │ │ │ │ ├── EmptyState.module.scss
│ │ │ │ │ ├── EmptyState.tsx
│ │ │ │ │ ├── EmptyState.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── EmptyState.test.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── ExpandCollapse/
│ │ │ │ │ ├── ExpandCollapse.module.scss
│ │ │ │ │ ├── ExpandCollapse.tsx
│ │ │ │ │ ├── ExpandCollapse.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── ExpandCollapse.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── ExpandCollapse.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── FieldLabel/
│ │ │ │ │ ├── FieldLabel.module.scss
│ │ │ │ │ ├── FieldLabel.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── FormattedNumber/
│ │ │ │ │ ├── FormattedNumber.module.scss
│ │ │ │ │ ├── FormattedNumber.tsx
│ │ │ │ │ ├── FormattedNumberHelpers.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── FormattedNumber.test.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── GridKeyboardNavigationContext/
│ │ │ │ │ ├── GridKeyboardNavigationContext.ts
│ │ │ │ │ ├── GridKeyboardNavigationContextConstants.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── GridKeyboardNavigationContext.test.tsx
│ │ │ │ │ │ └── helper.test.ts
│ │ │ │ │ ├── helper.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── HiddenText/
│ │ │ │ │ ├── HiddenText.module.scss
│ │ │ │ │ ├── HiddenText.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── HiddenText.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── HiddenText.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Info/
│ │ │ │ │ ├── Info.tsx
│ │ │ │ │ ├── Info.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── Info.test.tsx
│ │ │ │ │ ├── components/
│ │ │ │ │ │ ├── InfoDialogContent/
│ │ │ │ │ │ │ ├── InfoDialogContent.module.scss
│ │ │ │ │ │ │ ├── InfoDialogContent.tsx
│ │ │ │ │ │ │ ├── InfoDialogContent.types.ts
│ │ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ │ └── InfoDialogContent.test.tsx
│ │ │ │ │ │ ├── InfoLink/
│ │ │ │ │ │ │ ├── InfoLink.module.scss
│ │ │ │ │ │ │ ├── InfoLink.tsx
│ │ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ │ └── InfoLink.test.tsx
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── InfoText/
│ │ │ │ │ ├── InfoText.module.scss
│ │ │ │ │ ├── InfoText.tsx
│ │ │ │ │ ├── InfoText.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── InfoText.test.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Label/
│ │ │ │ │ ├── Label.module.scss
│ │ │ │ │ ├── Label.tsx
│ │ │ │ │ ├── Label.types.ts
│ │ │ │ │ ├── LabelCelebrationAnimation.module.scss
│ │ │ │ │ ├── LabelCelebrationAnimation.tsx
│ │ │ │ │ ├── LabelConstants.ts
│ │ │ │ │ ├── Leg.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Label.snapshot.test.tsx
│ │ │ │ │ │ ├── Label.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Label.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Link/
│ │ │ │ │ ├── Link.module.scss
│ │ │ │ │ ├── Link.tsx
│ │ │ │ │ ├── Link.types.ts
│ │ │ │ │ ├── LinkConsts.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Link.snapshot.test.tsx
│ │ │ │ │ │ ├── Link.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Link.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── List/
│ │ │ │ │ ├── List.module.scss
│ │ │ │ │ ├── List.tsx
│ │ │ │ │ ├── List.types.ts
│ │ │ │ │ ├── VirtualizedListItems/
│ │ │ │ │ │ ├── VirtualizedListItems.module.scss
│ │ │ │ │ │ └── VirtualizedListItems.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── List.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ ├── List.test.jsx.snap
│ │ │ │ │ │ └── List.test.tsx.snap
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── utils/
│ │ │ │ │ ├── ListContext.ts
│ │ │ │ │ └── ListUtils.ts
│ │ │ │ ├── ListItem/
│ │ │ │ │ ├── ListItem.module.scss
│ │ │ │ │ ├── ListItem.tsx
│ │ │ │ │ ├── ListItem.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── ListItem.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── ListItem.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── ListItemAvatar/
│ │ │ │ │ ├── ListItemAvatar.module.scss
│ │ │ │ │ ├── ListItemAvatar.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── ListItemAvatar.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── ListItemAvatar.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── ListItemIcon/
│ │ │ │ │ ├── ListItemIcon.module.scss
│ │ │ │ │ ├── ListItemIcon.tsx
│ │ │ │ │ ├── ListItemIcon.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── ListItemIcon.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── ListItemIcon.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── ListTitle/
│ │ │ │ │ ├── ListTitle.module.scss
│ │ │ │ │ ├── ListTitle.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── ListTitle.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── ListTitle.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Menu/
│ │ │ │ │ ├── Menu/
│ │ │ │ │ │ ├── Menu.module.scss
│ │ │ │ │ │ ├── Menu.tsx
│ │ │ │ │ │ ├── MenuConstants.ts
│ │ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ │ ├── Menu.test.tsx
│ │ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ │ └── Menu.test.tsx.snap
│ │ │ │ │ │ ├── hooks/
│ │ │ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ │ │ ├── useAdjacentSelectableMenuIndex.test.tsx
│ │ │ │ │ │ │ │ ├── useFocusOnMount.test.tsx
│ │ │ │ │ │ │ │ └── useLastNavigationDirection.test.tsx
│ │ │ │ │ │ │ ├── useAdjacentSelectableMenuIndex.tsx
│ │ │ │ │ │ │ ├── useCloseMenuOnKeyEvent.tsx
│ │ │ │ │ │ │ ├── useFocusOnMount.tsx
│ │ │ │ │ │ │ ├── useLastNavigationDirection.tsx
│ │ │ │ │ │ │ ├── useMenuId.tsx
│ │ │ │ │ │ │ ├── useMenuKeyboardNavigation.tsx
│ │ │ │ │ │ │ ├── useMouseLeave.tsx
│ │ │ │ │ │ │ ├── useOnCloseMenu.tsx
│ │ │ │ │ │ │ └── useSubMenuIndex.tsx
│ │ │ │ │ │ └── utils/
│ │ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ │ └── utils.test.ts
│ │ │ │ │ │ └── utils.ts
│ │ │ │ │ ├── MenuDivider/
│ │ │ │ │ │ ├── MenuDivider.module.scss
│ │ │ │ │ │ └── MenuDivider.tsx
│ │ │ │ │ ├── MenuGridItem/
│ │ │ │ │ │ ├── MenuGridItem.tsx
│ │ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ │ ├── MenuGridItem.snapshot.test.tsx
│ │ │ │ │ │ │ ├── MenuGridItem.test.tsx
│ │ │ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ │ │ ├── MenuGridItem.snapshot.test.jsx.snap
│ │ │ │ │ │ │ │ └── MenuGridItem.snapshot.test.tsx.snap
│ │ │ │ │ │ │ ├── useFocusGridItemByActiveStatus.test.ts
│ │ │ │ │ │ │ └── useMenuGridItemNavContext.test.ts
│ │ │ │ │ │ ├── useFocusGridItemByActiveStatus.tsx
│ │ │ │ │ │ └── useMenuGridItemNavContext.tsx
│ │ │ │ │ ├── MenuItem/
│ │ │ │ │ │ ├── AvatarMenuItem.tsx
│ │ │ │ │ │ ├── MenuItem.module.scss
│ │ │ │ │ │ ├── MenuItem.tsx
│ │ │ │ │ │ ├── MenuItem.types.ts
│ │ │ │ │ │ ├── MenuItemConstants.ts
│ │ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ │ ├── MenuItem.snapshot.test.tsx
│ │ │ │ │ │ │ ├── MenuItem.test.tsx
│ │ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ │ └── MenuItem.snapshot.test.tsx.snap
│ │ │ │ │ │ ├── components/
│ │ │ │ │ │ │ ├── BaseMenuItem/
│ │ │ │ │ │ │ │ ├── BaseMenuItem.module.scss
│ │ │ │ │ │ │ │ ├── BaseMenuItem.tsx
│ │ │ │ │ │ │ │ ├── BaseMenuItem.types.ts
│ │ │ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ │ │ └── BaseMenuItem.test.tsx
│ │ │ │ │ │ │ ├── MenuItemIcon/
│ │ │ │ │ │ │ │ ├── MenuItemIcon.module.scss
│ │ │ │ │ │ │ │ ├── MenuItemIcon.tsx
│ │ │ │ │ │ │ │ ├── MenuItemIcon.types.ts
│ │ │ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ │ │ └── MenuItemIcon.test.tsx
│ │ │ │ │ │ │ ├── MenuItemSubMenu/
│ │ │ │ │ │ │ │ ├── MenuItemSubMenu.tsx
│ │ │ │ │ │ │ │ ├── MenuItemSubMenu.types.ts
│ │ │ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ │ │ └── MenuItemSubMenu.test.tsx
│ │ │ │ │ │ │ └── MenuItemSubMenuIcon/
│ │ │ │ │ │ │ ├── MenuItemSubMenuIcon.module.scss
│ │ │ │ │ │ │ ├── MenuItemSubMenuIcon.tsx
│ │ │ │ │ │ │ ├── MenuItemSubMenuIcon.types.ts
│ │ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ │ └── MenuItemSubMenuIcon.test.tsx
│ │ │ │ │ │ └── hooks/
│ │ │ │ │ │ ├── useMenuItemKeyboardEvents.ts
│ │ │ │ │ │ └── useMenuItemMouseEvents.ts
│ │ │ │ │ ├── MenuItemButton/
│ │ │ │ │ │ ├── MenuItemButton.module.scss
│ │ │ │ │ │ ├── MenuItemButton.tsx
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ ├── MenuItemButton.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ ├── MenuItemButton.test.jsx.snap
│ │ │ │ │ │ └── MenuItemButton.test.tsx.snap
│ │ │ │ │ ├── MenuTitle/
│ │ │ │ │ │ ├── MenuTitle.module.scss
│ │ │ │ │ │ ├── MenuTitle.tsx
│ │ │ │ │ │ ├── MenuTitle.type.ts
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ ├── MenuTitle.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── MenuTitle.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── MenuButton/
│ │ │ │ │ ├── MenuButton.module.scss
│ │ │ │ │ ├── MenuButton.tsx
│ │ │ │ │ ├── MenuButton.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── MenuButton.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── MenuButton.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Modal/
│ │ │ │ │ ├── Modal/
│ │ │ │ │ │ ├── Modal.module.scss
│ │ │ │ │ │ ├── Modal.tsx
│ │ │ │ │ │ ├── Modal.types.tsx
│ │ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ │ └── Modal.test.tsx
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── ModalContent/
│ │ │ │ │ │ ├── ModalContent.tsx
│ │ │ │ │ │ ├── ModalContent.types.ts
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── ModalHeader/
│ │ │ │ │ │ ├── ModalHeader.module.scss
│ │ │ │ │ │ ├── ModalHeader.tsx
│ │ │ │ │ │ ├── ModalHeader.types.ts
│ │ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ │ └── ModalHeader.test.tsx
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── ModalMedia/
│ │ │ │ │ │ ├── ModalMedia.module.scss
│ │ │ │ │ │ ├── ModalMedia.tsx
│ │ │ │ │ │ ├── ModalMedia.types.ts
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── ModalTopActions/
│ │ │ │ │ │ ├── ModalTopActions.module.scss
│ │ │ │ │ │ ├── ModalTopActions.tsx
│ │ │ │ │ │ ├── ModalTopActions.types.ts
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ └── ModalTopActions.test.tsx
│ │ │ │ │ ├── context/
│ │ │ │ │ │ ├── ModalContext.tsx
│ │ │ │ │ │ └── ModalContext.types.ts
│ │ │ │ │ ├── footers/
│ │ │ │ │ │ ├── ModalFooter/
│ │ │ │ │ │ │ ├── ModalFooter.module.scss
│ │ │ │ │ │ │ ├── ModalFooter.tsx
│ │ │ │ │ │ │ └── ModalFooter.types.ts
│ │ │ │ │ │ ├── ModalFooterBase/
│ │ │ │ │ │ │ ├── ModalFooterBase.module.scss
│ │ │ │ │ │ │ ├── ModalFooterBase.tsx
│ │ │ │ │ │ │ ├── ModalFooterBase.types.ts
│ │ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ │ └── ModalFooterBase.test.tsx
│ │ │ │ │ │ ├── ModalFooterWizard/
│ │ │ │ │ │ │ ├── ModalFooterWizard.module.scss
│ │ │ │ │ │ │ ├── ModalFooterWizard.tsx
│ │ │ │ │ │ │ └── ModalFooterWizard.types.ts
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ └── utils/
│ │ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ │ └── getPropsForButton.test.ts
│ │ │ │ │ │ └── getPropsForButton.ts
│ │ │ │ │ ├── hooks/
│ │ │ │ │ │ ├── useFocusEscapeTargets/
│ │ │ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ │ │ └── useFocusEscapeTargets.test.ts
│ │ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ │ ├── useFocusEscapeTargets.ts
│ │ │ │ │ │ │ └── useFocusEscapeTargets.types.ts
│ │ │ │ │ │ └── usePortalTarget/
│ │ │ │ │ │ ├── usePortalTarget.ts
│ │ │ │ │ │ └── usePortalTarget.types.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── layouts/
│ │ │ │ │ ├── ModalBasicLayout/
│ │ │ │ │ │ ├── ModalBasicLayout.module.scss
│ │ │ │ │ │ ├── ModalBasicLayout.tsx
│ │ │ │ │ │ └── ModalBasicLayout.types.ts
│ │ │ │ │ ├── ModalFooterShadow.module.scss
│ │ │ │ │ ├── ModalFooterShadow.tsx
│ │ │ │ │ ├── ModalFooterShadow.types.ts
│ │ │ │ │ ├── ModalLayoutScrollableContent.module.scss
│ │ │ │ │ ├── ModalLayoutScrollableContent.tsx
│ │ │ │ │ ├── ModalLayoutScrollableContent.types.ts
│ │ │ │ │ ├── ModalMediaLayout/
│ │ │ │ │ │ ├── ModalMediaLayout.module.scss
│ │ │ │ │ │ ├── ModalMediaLayout.tsx
│ │ │ │ │ │ └── ModalMediaLayout.types.ts
│ │ │ │ │ ├── ModalSideBySideLayout/
│ │ │ │ │ │ ├── ModalSideBySideLayout.module.scss
│ │ │ │ │ │ ├── ModalSideBySideLayout.tsx
│ │ │ │ │ │ └── ModalSideBySideLayout.types.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── useLayoutScrolledContent.ts
│ │ │ │ ├── MultiStepIndicator/
│ │ │ │ │ ├── MultiStep.types.ts
│ │ │ │ │ ├── MultiStepIndicator.module.scss
│ │ │ │ │ ├── MultiStepIndicator.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── MultiStepIndicator.snapshot.test.tsx
│ │ │ │ │ │ ├── MultiStepIndicator.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── MultiStepIndicator.snapshot.test.tsx.snap
│ │ │ │ │ ├── components/
│ │ │ │ │ │ └── StepIndicator/
│ │ │ │ │ │ ├── StepIndicator.module.scss
│ │ │ │ │ │ └── StepIndicator.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── NumberField/
│ │ │ │ │ ├── NumberField.module.scss
│ │ │ │ │ ├── NumberField.tsx
│ │ │ │ │ ├── NumberField.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── NumberField.test.tsx
│ │ │ │ │ ├── components/
│ │ │ │ │ │ └── NumberFieldSpinButton/
│ │ │ │ │ │ ├── NumberFieldSpinButton.module.scss
│ │ │ │ │ │ ├── NumberFieldSpinButton.tsx
│ │ │ │ │ │ ├── NumberFieldSpinButton.types.ts
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ └── NumberFieldSpinButton.test.tsx
│ │ │ │ │ ├── hooks/
│ │ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ │ ├── useNumberFieldState.test.ts
│ │ │ │ │ │ │ └── useSpinButtonHandlers.test.ts
│ │ │ │ │ │ ├── useNumberFieldState.ts
│ │ │ │ │ │ └── useSpinButtonHandlers.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── utils/
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── calcValue.test.ts
│ │ │ │ │ └── calcValue.ts
│ │ │ │ ├── ProgressBars/
│ │ │ │ │ ├── PercentageLabel/
│ │ │ │ │ │ ├── PercentageLabel.module.scss
│ │ │ │ │ │ └── PercentageLabel.tsx
│ │ │ │ │ ├── ProgressBar/
│ │ │ │ │ │ ├── Bar/
│ │ │ │ │ │ │ ├── Bar.module.scss
│ │ │ │ │ │ │ └── Bar.tsx
│ │ │ │ │ │ ├── ProgressBar.module.scss
│ │ │ │ │ │ ├── ProgressBar.tsx
│ │ │ │ │ │ ├── ProgressBar.types.ts
│ │ │ │ │ │ ├── ProgressBarHelpers.ts
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ ├── ProgressBar.snapshot.test.tsx
│ │ │ │ │ │ ├── ProgressBar.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── ProgressBar.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── RadioButton/
│ │ │ │ │ ├── RadioButton.module.scss
│ │ │ │ │ ├── RadioButton.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── RadioButton.snapshot.test.tsx
│ │ │ │ │ │ ├── RadioButton.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── RadioButton.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Search/
│ │ │ │ │ ├── Search.module.scss
│ │ │ │ │ ├── Search.tsx
│ │ │ │ │ ├── Search.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── Search.test.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Skeleton/
│ │ │ │ │ ├── Skeleton.module.scss
│ │ │ │ │ ├── Skeleton.tsx
│ │ │ │ │ ├── SkeletonConstants.ts
│ │ │ │ │ ├── SkeletonVariables.scss
│ │ │ │ │ ├── Skelton.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Skeleton.snapshot.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ ├── Skeleton.snapshot.test.jsx.snap
│ │ │ │ │ │ └── Skeleton.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── SlideTransition/
│ │ │ │ │ ├── SlideTransition.module.scss
│ │ │ │ │ ├── SlideTransition.tsx
│ │ │ │ │ └── SlideTransition.types.ts
│ │ │ │ ├── Slider/
│ │ │ │ │ ├── SelectionIndicator.module.scss
│ │ │ │ │ ├── SelectionIndicator.tsx
│ │ │ │ │ ├── Slider.module.scss
│ │ │ │ │ ├── Slider.tsx
│ │ │ │ │ ├── Slider.types.ts
│ │ │ │ │ ├── SliderBase/
│ │ │ │ │ │ ├── SliderBase.module.scss
│ │ │ │ │ │ ├── SliderBase.tsx
│ │ │ │ │ │ ├── SliderFilledTrack.module.scss
│ │ │ │ │ │ ├── SliderFilledTrack.tsx
│ │ │ │ │ │ ├── SliderRail.module.scss
│ │ │ │ │ │ ├── SliderRail.tsx
│ │ │ │ │ │ ├── SliderThumb.module.scss
│ │ │ │ │ │ ├── SliderThumb.tsx
│ │ │ │ │ │ ├── SliderTrack.module.scss
│ │ │ │ │ │ └── SliderTrack.tsx
│ │ │ │ │ ├── SliderConstants.ts
│ │ │ │ │ ├── SliderContext.tsx
│ │ │ │ │ ├── SliderHelpers.ts
│ │ │ │ │ ├── SliderHooks.ts
│ │ │ │ │ ├── SliderInfix.module.scss
│ │ │ │ │ ├── SliderInfix.tsx
│ │ │ │ │ ├── SliderInfixHooks.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Slider-helpers.test.ts
│ │ │ │ │ │ ├── Slider-non-ranged.test.tsx
│ │ │ │ │ │ ├── Slider-ranged.test.tsx
│ │ │ │ │ │ ├── Slider.snapshot.test.tsx
│ │ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ │ ├── Slider-non-ranged.test.jsx.snap
│ │ │ │ │ │ │ ├── Slider-non-ranged.test.tsx.snap
│ │ │ │ │ │ │ ├── Slider-ranged.test.jsx.snap
│ │ │ │ │ │ │ ├── Slider-ranged.test.tsx.snap
│ │ │ │ │ │ │ ├── Slider.snapshot.test.jsx.snap
│ │ │ │ │ │ │ └── Slider.snapshot.test.tsx.snap
│ │ │ │ │ │ └── sliderTestUtils.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── SplitButton/
│ │ │ │ │ ├── SplitButton.module.scss
│ │ │ │ │ ├── SplitButton.tsx
│ │ │ │ │ ├── SplitButtonConstants.ts
│ │ │ │ │ ├── SplitButtonMenu/
│ │ │ │ │ │ ├── SplitButtonMenu.tsx
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ ├── SplitButtonMenu.snapshot.test.tsx
│ │ │ │ │ │ ├── SplitButtonMenu.test.tsx
│ │ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ │ └── SplitButtonMenu.snapshot.test.tsx.snap
│ │ │ │ │ │ └── test-utils.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── SplitButton.snapshot.test.tsx
│ │ │ │ │ │ ├── SplitButton.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── SplitButton.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Steps/
│ │ │ │ │ ├── Steps.module.scss
│ │ │ │ │ ├── Steps.tsx
│ │ │ │ │ ├── Steps.types.ts
│ │ │ │ │ ├── StepsCommand.module.scss
│ │ │ │ │ ├── StepsCommand.tsx
│ │ │ │ │ ├── StepsConstants.ts
│ │ │ │ │ ├── StepsDot.module.scss
│ │ │ │ │ ├── StepsDot.tsx
│ │ │ │ │ ├── StepsGalleryHeader.module.scss
│ │ │ │ │ ├── StepsGalleryHeader.tsx
│ │ │ │ │ ├── StepsHeader.module.scss
│ │ │ │ │ ├── StepsHeader.tsx
│ │ │ │ │ ├── StepsNumbersHeader.module.scss
│ │ │ │ │ ├── StepsNumbersHeader.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Steps.snapshot.test.tsx
│ │ │ │ │ │ ├── Steps.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Steps.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Switch/
│ │ │ │ │ ├── Switch.module.scss
│ │ │ │ │ ├── Switch.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── index.tsx
│ │ │ │ ├── Table/
│ │ │ │ │ ├── Table/
│ │ │ │ │ │ ├── Table.module.scss
│ │ │ │ │ │ ├── Table.tsx
│ │ │ │ │ │ ├── Table.types.ts
│ │ │ │ │ │ ├── TableConsts.ts
│ │ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ │ ├── Table.test.tsx
│ │ │ │ │ │ │ ├── TableHelpers.test.tsx
│ │ │ │ │ │ │ └── tableTestUtils.tsx
│ │ │ │ │ │ └── tableHelpers.ts
│ │ │ │ │ ├── TableBody/
│ │ │ │ │ │ ├── TableBody.module.scss
│ │ │ │ │ │ └── TableBody.tsx
│ │ │ │ │ ├── TableCell/
│ │ │ │ │ │ ├── TableCell.module.scss
│ │ │ │ │ │ └── TableCell.tsx
│ │ │ │ │ ├── TableCellSkeleton/
│ │ │ │ │ │ ├── TableCellSkeleton.module.scss
│ │ │ │ │ │ └── TableCellSkeleton.tsx
│ │ │ │ │ ├── TableContainer/
│ │ │ │ │ │ ├── TableContainer.module.scss
│ │ │ │ │ │ ├── TableContainer.tsx
│ │ │ │ │ │ └── TableContainer.types.ts
│ │ │ │ │ ├── TableHeader/
│ │ │ │ │ │ ├── TableHeader.module.scss
│ │ │ │ │ │ └── TableHeader.tsx
│ │ │ │ │ ├── TableHeaderCell/
│ │ │ │ │ │ ├── TableHeaderCell.module.scss
│ │ │ │ │ │ └── TableHeaderCell.tsx
│ │ │ │ │ ├── TableRow/
│ │ │ │ │ │ ├── TableRow.module.scss
│ │ │ │ │ │ └── TableRow.tsx
│ │ │ │ │ ├── TableRowMenu/
│ │ │ │ │ │ ├── TableRowMenu.module.scss
│ │ │ │ │ │ ├── TableRowMenu.tsx
│ │ │ │ │ │ └── TableRowMenu.types.ts
│ │ │ │ │ ├── TableVirtualizedBody/
│ │ │ │ │ │ ├── TableVirtualizedBody.module.scss
│ │ │ │ │ │ └── TableVirtualizedBody.tsx
│ │ │ │ │ ├── context/
│ │ │ │ │ │ ├── TableContainerContext/
│ │ │ │ │ │ │ ├── TableContainerContext.tsx
│ │ │ │ │ │ │ └── TableContainerContext.types.ts
│ │ │ │ │ │ ├── TableContext/
│ │ │ │ │ │ │ ├── TableContext.tsx
│ │ │ │ │ │ │ └── TableContext.types.ts
│ │ │ │ │ │ └── TableRowMenuContext/
│ │ │ │ │ │ ├── TableRowMenuContext.tsx
│ │ │ │ │ │ └── TableRowMenuContext.types.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Tabs/
│ │ │ │ │ ├── Tab/
│ │ │ │ │ │ ├── Tab.module.scss
│ │ │ │ │ │ ├── Tab.tsx
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ ├── Tab.snapshot.test.tsx
│ │ │ │ │ │ ├── Tab.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Tab.snapshot.test.tsx.snap
│ │ │ │ │ ├── TabList/
│ │ │ │ │ │ ├── TabList.module.scss
│ │ │ │ │ │ ├── TabList.tsx
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ ├── TabList.snapshot.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ ├── TabList.snapshot.test.jsx.snap
│ │ │ │ │ │ └── TabList.snapshot.test.tsx.snap
│ │ │ │ │ ├── TabPanel/
│ │ │ │ │ │ ├── TabPanel.module.scss
│ │ │ │ │ │ ├── TabPanel.tsx
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ ├── TabPanel.snapshot.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── TabPanel.snapshot.test.tsx.snap
│ │ │ │ │ ├── TabPanels/
│ │ │ │ │ │ ├── TabPanels.module.scss
│ │ │ │ │ │ ├── TabPanels.tsx
│ │ │ │ │ │ ├── TabPanels.types.ts
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ ├── TabPanels.snapshot.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ ├── TabPanels.snapshot.test.jsx.snap
│ │ │ │ │ │ └── TabPanels.snapshot.test.tsx.snap
│ │ │ │ │ ├── TabsContext/
│ │ │ │ │ │ ├── TabsContext.tsx
│ │ │ │ │ │ └── __tests__/
│ │ │ │ │ │ ├── TabsContext.snapshot.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ ├── TabsContext.snapshot.test.jsx.snap
│ │ │ │ │ │ └── TabsContext.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── TextArea/
│ │ │ │ │ ├── TextArea.module.scss
│ │ │ │ │ ├── TextArea.tsx
│ │ │ │ │ ├── TextArea.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── TextArea.test.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── TextField/
│ │ │ │ │ ├── TextField.module.scss
│ │ │ │ │ ├── TextField.tsx
│ │ │ │ │ ├── TextField.types.ts
│ │ │ │ │ ├── TextFieldConstants.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── TextField-tests.test.tsx
│ │ │ │ │ │ ├── TextField.snapshot.test.tsx
│ │ │ │ │ │ ├── TextField.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── TextField.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── TextWithHighlight/
│ │ │ │ │ ├── TextWithHighlight.module.scss
│ │ │ │ │ ├── TextWithHighlight.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── TextWithHighlight.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── TextWithHighlight.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── ThemeProvider/
│ │ │ │ │ ├── ThemeProvider.tsx
│ │ │ │ │ ├── ThemeProvider.types.ts
│ │ │ │ │ ├── ThemeProviderConstants.ts
│ │ │ │ │ ├── ThemeProviderUtils.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── ThemeProvider.test.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Tipseen/
│ │ │ │ │ ├── Tipseen.module.scss
│ │ │ │ │ ├── Tipseen.tsx
│ │ │ │ │ ├── Tipseen.types.ts
│ │ │ │ │ ├── TipseenBasicContent.module.scss
│ │ │ │ │ ├── TipseenBasicContent.tsx
│ │ │ │ │ ├── TipseenConstants.ts
│ │ │ │ │ ├── TipseenContent.module.scss
│ │ │ │ │ ├── TipseenContent.tsx
│ │ │ │ │ ├── TipseenMedia/
│ │ │ │ │ │ ├── TipseenMedia.module.scss
│ │ │ │ │ │ └── TipseenMedia.tsx
│ │ │ │ │ ├── TipseenTitle.module.scss
│ │ │ │ │ ├── TipseenTitle.tsx
│ │ │ │ │ ├── TipseenWizard.module.scss
│ │ │ │ │ ├── TipseenWizard.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Tipseen.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Tipseen.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Toast/
│ │ │ │ │ ├── Toast.module.scss
│ │ │ │ │ ├── Toast.tsx
│ │ │ │ │ ├── Toast.types.ts
│ │ │ │ │ ├── ToastButton/
│ │ │ │ │ │ └── ToastButton.tsx
│ │ │ │ │ ├── ToastConstants.ts
│ │ │ │ │ ├── ToastHelpers.tsx
│ │ │ │ │ ├── ToastLink/
│ │ │ │ │ │ ├── ToastLink.module.scss
│ │ │ │ │ │ └── ToastLink.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Toast.snapshot.test.tsx
│ │ │ │ │ │ ├── Toast.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Toast.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Toggle/
│ │ │ │ │ ├── MockToggle.module.scss
│ │ │ │ │ ├── MockToggle.tsx
│ │ │ │ │ ├── Toggle.module.scss
│ │ │ │ │ ├── Toggle.tsx
│ │ │ │ │ ├── Toggle.types.ts
│ │ │ │ │ ├── ToggleConstants.ts
│ │ │ │ │ ├── ToggleText.module.scss
│ │ │ │ │ ├── ToggleText.tsx
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── Toggle.snapshot.test.tsx
│ │ │ │ │ │ ├── Toggle.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ └── Toggle.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── TransitionView/
│ │ │ │ │ ├── TransitionView.module.scss
│ │ │ │ │ ├── TransitionView.tsx
│ │ │ │ │ ├── TransitionView.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── TransitionView.test.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── VirtualizedGrid/
│ │ │ │ │ ├── VirtualizedGrid.module.scss
│ │ │ │ │ ├── VirtualizedGrid.tsx
│ │ │ │ │ ├── VirtualizedGrid.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── VirtualizedGrid.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ ├── VirtualizedGrid.test.jsx.snap
│ │ │ │ │ │ └── VirtualizedGrid.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── VirtualizedList/
│ │ │ │ │ ├── VirtualizedList.module.scss
│ │ │ │ │ ├── VirtualizedList.tsx
│ │ │ │ │ ├── VirtualizedList.types.ts
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── VirtualizedList.snapshot.test.tsx
│ │ │ │ │ │ └── __snapshots__/
│ │ │ │ │ │ ├── VirtualizedList.snapshot.test.jsx.snap
│ │ │ │ │ │ └── VirtualizedList.snapshot.test.tsx.snap
│ │ │ │ │ └── index.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── next/
│ │ │ │ │ ├── List/
│ │ │ │ │ │ ├── List.module.scss
│ │ │ │ │ │ ├── List.tsx
│ │ │ │ │ │ ├── List.types.ts
│ │ │ │ │ │ ├── ListItem/
│ │ │ │ │ │ │ ├── ListItem.tsx
│ │ │ │ │ │ │ ├── ListItem.types.ts
│ │ │ │ │ │ │ └── index.ts
│ │ │ │ │ │ ├── ListTitle/
│ │ │ │ │ │ │ ├── ListTitle.module.scss
│ │ │ │ │ │ │ ├── ListTitle.tsx
│ │ │ │ │ │ │ ├── ListTitle.types.ts
│ │ │ │ │ │ │ └── index.ts
│ │ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ │ └── List.test.tsx
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ └── index.ts
│ │ │ │ └── next.ts
│ │ │ ├── constants/
│ │ │ │ ├── index.ts
│ │ │ │ ├── keyCodes.ts
│ │ │ │ └── sizes.ts
│ │ │ ├── helpers/
│ │ │ │ └── textManipulations.ts
│ │ │ ├── hooks/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── useDebounceEvent.test.ts
│ │ │ │ │ ├── useEventListener.test.ts
│ │ │ │ │ └── useKeyEvent.test.ts
│ │ │ │ ├── createEventHandler.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── useActiveDescendantListFocus/
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── useActiveDescendantListFocus.test.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── useActiveDescendantListFocusHelpers.ts
│ │ │ │ │ └── useActiveDescendantListFocusHooks.ts
│ │ │ │ ├── useAfterFirstRender/
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── useAfterFirstRender.test.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── useDebounceEvent/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── useElementsOverflowingIndex.ts
│ │ │ │ ├── useEventListener/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── useFocusWithin.ts
│ │ │ │ ├── useFullKeyboardListeners.ts
│ │ │ │ ├── useGridKeyboardNavigation/
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ ├── gridKeyboardNavigationHelper.test.ts
│ │ │ │ │ │ └── useGridKeyboardNavigation.test.ts
│ │ │ │ │ ├── gridKeyboardNavigationHelper.ts
│ │ │ │ │ └── useGridKeyboardNavigation.ts
│ │ │ │ ├── useHover/
│ │ │ │ │ └── useHover.ts
│ │ │ │ ├── useIsMouseEnter.ts
│ │ │ │ ├── useIsMouseOver.ts
│ │ │ │ ├── useItemsOverflow/
│ │ │ │ │ └── useItemsOverflow.ts
│ │ │ │ ├── useKeyEvent/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── useKeyboard.ts
│ │ │ │ ├── useListenFocusTriggers/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── useMediaQuery/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── usePrevious/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── useRefWithCallback.ts
│ │ │ │ ├── useSetFocus/
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── useSetFocus.test.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── useStyle.ts
│ │ │ │ ├── useSwitch/
│ │ │ │ │ ├── __tests__/
│ │ │ │ │ │ └── useSwitch.test.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── useThrottledCallback.ts
│ │ │ │ ├── useTimeout/
│ │ │ │ │ └── index.ts
│ │ │ │ ├── useVibeMediaQuery/
│ │ │ │ │ └── index.ts
│ │ │ │ └── useWizard/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── useWizard.test.ts
│ │ │ │ ├── useWizard.ts
│ │ │ │ └── useWizard.types.ts
│ │ │ ├── index.ts
│ │ │ ├── scripts/
│ │ │ │ └── generate-metadata.ts
│ │ │ ├── services/
│ │ │ │ ├── themes.ts
│ │ │ │ └── virtualized-service.ts
│ │ │ ├── style-imports.ts
│ │ │ ├── styles/
│ │ │ │ ├── _keyframes.scss
│ │ │ │ ├── keyframes/
│ │ │ │ │ ├── pop/
│ │ │ │ │ │ ├── _pop-elastic.scss
│ │ │ │ │ │ ├── _pop-in-elastic-bold.scss
│ │ │ │ │ │ ├── _pop-in-elastic.scss
│ │ │ │ │ │ ├── _pop-in-emphasized.scss
│ │ │ │ │ │ ├── _pop-in-from-trigger.scss
│ │ │ │ │ │ ├── _pop-in.scss
│ │ │ │ │ │ └── _pop-out-from-trigger.scss
│ │ │ │ │ ├── slide/
│ │ │ │ │ │ ├── _slide-in-elastic.scss
│ │ │ │ │ │ ├── _slide-in.scss
│ │ │ │ │ │ └── _slide-out.scss
│ │ │ │ │ └── spin/
│ │ │ │ │ └── _spin-in-emphasized.scss
│ │ │ │ ├── states.scss
│ │ │ │ ├── typography.scss
│ │ │ │ └── utilities/
│ │ │ │ └── _utilities-settings.scss
│ │ │ ├── tests/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── test-utils.ts
│ │ │ │ ├── constants.ts
│ │ │ │ ├── interactions-utils.ts
│ │ │ │ └── test-ids-utils.ts
│ │ │ ├── types/
│ │ │ │ ├── ArrayLastElement.ts
│ │ │ │ ├── Colors.ts
│ │ │ │ ├── ElementContent.ts
│ │ │ │ ├── FormElement.ts
│ │ │ │ ├── MoveBy.ts
│ │ │ │ ├── SplitString.ts
│ │ │ │ ├── VibeComponentProps.ts
│ │ │ │ ├── events.ts
│ │ │ │ └── index.ts
│ │ │ └── utils/
│ │ │ ├── colors-utils.ts
│ │ │ └── colors-vars-map.ts
│ │ ├── tsconfig.base.json
│ │ ├── tsconfig.json
│ │ ├── types/
│ │ │ ├── files.d.ts
│ │ │ ├── packages.d.ts
│ │ │ ├── tokens.d.ts
│ │ │ └── window.d.ts
│ │ ├── vite.config.ts
│ │ ├── vitest.config.ts
│ │ └── vitest.setup.ts
│ ├── docs/
│ │ ├── .storybook/
│ │ │ ├── art.ts
│ │ │ ├── main.ts
│ │ │ ├── manager-head.html
│ │ │ ├── manager.jsx
│ │ │ ├── modes.ts
│ │ │ ├── preview-body.html
│ │ │ ├── preview-head.html
│ │ │ ├── preview.tsx
│ │ │ ├── storybook-title-fix.js
│ │ │ ├── test-runner.cjs
│ │ │ ├── theme.js
│ │ │ └── tsconfig.json
│ │ ├── CHANGELOG.md
│ │ ├── chromatic.config.json
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── decorators/
│ │ │ │ ├── withGlobalStyle/
│ │ │ │ │ ├── withGlobalStyle.module.scss
│ │ │ │ │ └── withGlobalStyle.tsx
│ │ │ │ ├── withLiveEdit/
│ │ │ │ │ ├── components/
│ │ │ │ │ │ ├── LiveContent/
│ │ │ │ │ │ │ ├── LiveContent.module.scss
│ │ │ │ │ │ │ ├── LiveContent.tsx
│ │ │ │ │ │ │ └── LiveContent.types.ts
│ │ │ │ │ │ └── LiveEditorAction/
│ │ │ │ │ │ ├── LiveEditorAction.module.scss
│ │ │ │ │ │ ├── LiveEditorAction.tsx
│ │ │ │ │ │ └── LiveEditorAction.types.ts
│ │ │ │ │ ├── hooks/
│ │ │ │ │ │ ├── useApplyDecorators.ts
│ │ │ │ │ │ └── useLiveEditorActions.ts
│ │ │ │ │ ├── utils/
│ │ │ │ │ │ ├── parse-csf-utils.ts
│ │ │ │ │ │ └── prettier-utils.ts
│ │ │ │ │ ├── withLiveEdit.module.scss
│ │ │ │ │ └── withLiveEdit.tsx
│ │ │ │ └── withPerformanceProfiler/
│ │ │ │ └── withPerformanceProfiler.tsx
│ │ │ ├── layout/
│ │ │ │ ├── canvas-wrapper/
│ │ │ │ │ ├── CanvasWrapper.module.scss
│ │ │ │ │ └── CanvasWrapper.tsx
│ │ │ │ ├── footer/
│ │ │ │ │ ├── ArrowIcon.tsx
│ │ │ │ │ ├── Footer.module.scss
│ │ │ │ │ ├── Footer.tsx
│ │ │ │ │ ├── FooterCard.module.scss
│ │ │ │ │ └── FooterCard.tsx
│ │ │ │ ├── live-editor/
│ │ │ │ │ └── LiveEditor.tsx
│ │ │ │ ├── live-preview/
│ │ │ │ │ ├── LivePreview.module.scss
│ │ │ │ │ └── LivePreview.tsx
│ │ │ │ ├── props-table/
│ │ │ │ │ └── props-table.jsx
│ │ │ │ ├── related-components/
│ │ │ │ │ ├── component-description-map.tsx
│ │ │ │ │ ├── descriptions/
│ │ │ │ │ │ ├── accordion-description/
│ │ │ │ │ │ │ ├── accordion-description.module.scss
│ │ │ │ │ │ │ └── accordion-description.tsx
│ │ │ │ │ │ ├── alert-banner-description.tsx
│ │ │ │ │ │ ├── attention-box-description.jsx
│ │ │ │ │ │ ├── avatar-description.tsx
│ │ │ │ │ │ ├── avatar-group-description.tsx
│ │ │ │ │ │ ├── badge-description.tsx
│ │ │ │ │ │ ├── box-description.tsx
│ │ │ │ │ │ ├── breadcrumbs-description.tsx
│ │ │ │ │ │ ├── button-description.tsx
│ │ │ │ │ │ ├── button-group-description.tsx
│ │ │ │ │ │ ├── checkbox-description.tsx
│ │ │ │ │ │ ├── chips-description.tsx
│ │ │ │ │ │ ├── clickable-description/
│ │ │ │ │ │ │ ├── clickable-description.stories.module.scss
│ │ │ │ │ │ │ └── clickable-description.tsx
│ │ │ │ │ │ ├── color-picker-description.tsx
│ │ │ │ │ │ ├── colors-description/
│ │ │ │ │ │ │ ├── colors-description.scss
│ │ │ │ │ │ │ └── colors-description.tsx
│ │ │ │ │ │ ├── combobox-description.tsx
│ │ │ │ │ │ ├── counter-description.tsx
│ │ │ │ │ │ ├── dialog-content-container.tsx
│ │ │ │ │ │ ├── dialog-description/
│ │ │ │ │ │ │ ├── dialog-description.module.scss
│ │ │ │ │ │ │ └── dialog-description.tsx
│ │ │ │ │ │ ├── divider.tsx
│ │ │ │ │ │ ├── dropdown-description.tsx
│ │ │ │ │ │ ├── editable-heading-description.tsx
│ │ │ │ │ │ ├── editable-text-description.tsx
│ │ │ │ │ │ ├── expand-collapse-description/
│ │ │ │ │ │ │ ├── expand-collapse-description.module.scss
│ │ │ │ │ │ │ └── expand-collapse-description.tsx
│ │ │ │ │ │ ├── flex-description.tsx
│ │ │ │ │ │ ├── heading-description.tsx
│ │ │ │ │ │ ├── icon-button-description.tsx
│ │ │ │ │ │ ├── icon-description.tsx
│ │ │ │ │ │ ├── icons-description.tsx
│ │ │ │ │ │ ├── label-description.tsx
│ │ │ │ │ │ ├── linear-progress-bar-description.tsx
│ │ │ │ │ │ ├── link-description.tsx
│ │ │ │ │ │ ├── list-description.tsx
│ │ │ │ │ │ ├── menu-button-description.tsx
│ │ │ │ │ │ ├── menu-description.tsx
│ │ │ │ │ │ ├── menu-grid-item-description.tsx
│ │ │ │ │ │ ├── modal/
│ │ │ │ │ │ │ ├── ModalBasicLayoutRelatedComponent.tsx
│ │ │ │ │ │ │ ├── ModalMediaLayoutRelatedComponent.tsx
│ │ │ │ │ │ │ └── ModalSideBySideLayoutRelatedComponent.tsx
│ │ │ │ │ │ ├── multi-step-indicator-description.tsx
│ │ │ │ │ │ ├── number-field-description.tsx
│ │ │ │ │ │ ├── radio-button-description.tsx
│ │ │ │ │ │ ├── search-description.tsx
│ │ │ │ │ │ ├── shadow-description/
│ │ │ │ │ │ │ ├── shadow-description.module.scss
│ │ │ │ │ │ │ └── shadow-description.tsx
│ │ │ │ │ │ ├── skeleton-description.tsx
│ │ │ │ │ │ ├── slider-description.tsx
│ │ │ │ │ │ ├── spacing-description/
│ │ │ │ │ │ │ ├── spacing-description.module.scss
│ │ │ │ │ │ │ └── spacing-description.tsx
│ │ │ │ │ │ ├── spinner-description.tsx
│ │ │ │ │ │ ├── split-button-description.tsx
│ │ │ │ │ │ ├── steps-description.tsx
│ │ │ │ │ │ ├── tab-description.tsx
│ │ │ │ │ │ ├── table-description.tsx
│ │ │ │ │ │ ├── text-description.tsx
│ │ │ │ │ │ ├── text-field-description.tsx
│ │ │ │ │ │ ├── tipseen-description.tsx
│ │ │ │ │ │ ├── toast-description.tsx
│ │ │ │ │ │ ├── toggle-description.tsx
│ │ │ │ │ │ ├── tooltip-description.tsx
│ │ │ │ │ │ ├── typography-description/
│ │ │ │ │ │ │ └── typography-description.tsx
│ │ │ │ │ │ ├── virtualized-grid-description/
│ │ │ │ │ │ │ ├── virtualized-grid-description.jsx
│ │ │ │ │ │ │ └── virtualizedGrid.module.scss
│ │ │ │ │ │ └── virtualized-list-description/
│ │ │ │ │ │ ├── virtualized-list-description.jsx
│ │ │ │ │ │ └── virtualized-list.module.scss
│ │ │ │ │ └── related-components-decorator.jsx
│ │ │ │ └── toc/
│ │ │ │ ├── TableOfContents.module.scss
│ │ │ │ └── TableOfContents.tsx
│ │ │ ├── pages/
│ │ │ │ ├── catalog/
│ │ │ │ │ ├── Catalog.stories.templates.tsx
│ │ │ │ │ ├── EmptyState/
│ │ │ │ │ │ ├── CatalogEmptyState.module.scss
│ │ │ │ │ │ └── CatalogEmptyState.tsx
│ │ │ │ │ ├── catalog.mdx
│ │ │ │ │ └── catalog.stories.tsx
│ │ │ │ ├── changelog/
│ │ │ │ │ └── changelog.mdx
│ │ │ │ ├── components/
│ │ │ │ │ ├── Accordion/
│ │ │ │ │ │ ├── Accordion.interactions.ts
│ │ │ │ │ │ ├── Accordion.mdx
│ │ │ │ │ │ └── Accordion.stories.tsx
│ │ │ │ │ ├── AlertBanner/
│ │ │ │ │ │ ├── AlertBanner.mdx
│ │ │ │ │ │ ├── AlertBanner.stories.helpers.tsx
│ │ │ │ │ │ └── AlertBanner.stories.tsx
│ │ │ │ │ ├── AttentionBox/
│ │ │ │ │ │ ├── AttentionBox.mdx
│ │ │ │ │ │ └── AttentionBox.stories.tsx
│ │ │ │ │ ├── Avatar/
│ │ │ │ │ │ ├── Avatar.mdx
│ │ │ │ │ │ ├── Avatar.stories.helpers.tsx
│ │ │ │ │ │ ├── Avatar.stories.scss
│ │ │ │ │ │ └── Avatar.stories.tsx
│ │ │ │ │ ├── AvatarGroup/
│ │ │ │ │ │ ├── AvatarGroup.mdx
│ │ │ │ │ │ └── AvatarGroup.stories.tsx
│ │ │ │ │ ├── Badge/
│ │ │ │ │ │ ├── Badge.mdx
│ │ │ │ │ │ └── Badge.stories.tsx
│ │ │ │ │ ├── BaseInput/
│ │ │ │ │ │ └── BaseInput.stories.tsx
│ │ │ │ │ ├── BaseList/
│ │ │ │ │ │ └── BaseList.stories.tsx
│ │ │ │ │ ├── Box/
│ │ │ │ │ │ ├── Box.mdx
│ │ │ │ │ │ ├── Box.stories.helpers.tsx
│ │ │ │ │ │ └── Box.stories.tsx
│ │ │ │ │ ├── BreadcrumbsBar/
│ │ │ │ │ │ ├── BreadcrumbItem.mdx
│ │ │ │ │ │ ├── BreadcrumbItem.stories.scss
│ │ │ │ │ │ ├── BreadcrumbItem.stories.tsx
│ │ │ │ │ │ ├── BreadcrumbsBar.mdx
│ │ │ │ │ │ ├── BreadcrumbsBar.stories.helpers.tsx
│ │ │ │ │ │ ├── BreadcrumbsBar.stories.module.scss
│ │ │ │ │ │ └── BreadcrumbsBar.stories.tsx
│ │ │ │ │ ├── Button/
│ │ │ │ │ │ ├── Button.mdx
│ │ │ │ │ │ ├── Button.stories.helpers.tsx
│ │ │ │ │ │ └── Button.stories.tsx
│ │ │ │ │ ├── ButtonGroup/
│ │ │ │ │ │ ├── ButtonGroup.mdx
│ │ │ │ │ │ ├── ButtonGroup.stories.helpers.tsx
│ │ │ │ │ │ ├── ButtonGroup.stories.tsx
│ │ │ │ │ │ └── assets/
│ │ │ │ │ │ └── Desktop.tsx
│ │ │ │ │ ├── Checkbox/
│ │ │ │ │ │ ├── Checkbox.mdx
│ │ │ │ │ │ ├── Checkbox.stories.helpers.tsx
│ │ │ │ │ │ ├── Checkbox.stories.scss
│ │ │ │ │ │ └── Checkbox.stories.tsx
│ │ │ │ │ ├── Chips/
│ │ │ │ │ │ ├── Chips.mdx
│ │ │ │ │ │ ├── Chips.stories.helpers.tsx
│ │ │ │ │ │ └── Chips.stories.tsx
│ │ │ │ │ ├── Clickable/
│ │ │ │ │ │ ├── Clickable.interactions.ts
│ │ │ │ │ │ ├── Clickable.mdx
│ │ │ │ │ │ ├── Clickable.stories.helpers.tsx
│ │ │ │ │ │ └── Clickable.stories.tsx
│ │ │ │ │ ├── ColorPicker/
│ │ │ │ │ │ ├── ColorPicker.interactions.ts
│ │ │ │ │ │ ├── ColorPicker.mdx
│ │ │ │ │ │ └── ColorPicker.stories.tsx
│ │ │ │ │ ├── Combobox/
│ │ │ │ │ │ ├── Combobox.interactions.ts
│ │ │ │ │ │ ├── Combobox.mdx
│ │ │ │ │ │ ├── Combobox.stories.helpers.tsx
│ │ │ │ │ │ ├── Combobox.stories.tsx
│ │ │ │ │ │ └── combobox-migration-guide.mdx
│ │ │ │ │ ├── Counter/
│ │ │ │ │ │ ├── Counter.mdx
│ │ │ │ │ │ ├── Counter.stories.helpers.tsx
│ │ │ │ │ │ └── Counter.stories.tsx
│ │ │ │ │ ├── DatePicker/
│ │ │ │ │ │ ├── DatePicker.mdx
│ │ │ │ │ │ └── DatePicker.stories.tsx
│ │ │ │ │ ├── Dialog/
│ │ │ │ │ │ ├── Dialog.interactions.ts
│ │ │ │ │ │ ├── Dialog.mdx
│ │ │ │ │ │ ├── Dialog.stories.helpers.tsx
│ │ │ │ │ │ ├── Dialog.stories.tsx
│ │ │ │ │ │ ├── DialogContentContainer.mdx
│ │ │ │ │ │ └── DialogContentContainer.stories.tsx
│ │ │ │ │ ├── Divider/
│ │ │ │ │ │ ├── Divider.mdx
│ │ │ │ │ │ └── Divider.stories.tsx
│ │ │ │ │ ├── Dropdown/
│ │ │ │ │ │ ├── Dropdown.mdx
│ │ │ │ │ │ ├── DropdownBasicDropdown.mdx
│ │ │ │ │ │ ├── DropdownBasicDropdown.stories.tsx
│ │ │ │ │ │ ├── DropdownBoxMode.mdx
│ │ │ │ │ │ ├── DropdownBoxMode.stories.tsx
│ │ │ │ │ │ └── dropdown-migration-guide.mdx
│ │ │ │ │ ├── EditableHeading/
│ │ │ │ │ │ ├── EditableHeading.interactions.ts
│ │ │ │ │ │ ├── EditableHeading.mdx
│ │ │ │ │ │ ├── EditableHeading.stories.helpers.tsx
│ │ │ │ │ │ └── EditableHeading.stories.tsx
│ │ │ │ │ ├── EditableText/
│ │ │ │ │ │ ├── EditableText.interactions.ts
│ │ │ │ │ │ ├── EditableText.mdx
│ │ │ │ │ │ ├── EditableText.stories.helpers.tsx
│ │ │ │ │ │ └── EditableText.stories.tsx
│ │ │ │ │ ├── EmptyState/
│ │ │ │ │ │ ├── EmptyState.mdx
│ │ │ │ │ │ ├── EmptyState.stories.helpers.tsx
│ │ │ │ │ │ ├── EmptyState.stories.module.scss
│ │ │ │ │ │ └── EmptyState.stories.tsx
│ │ │ │ │ ├── ExpandCollapse/
│ │ │ │ │ │ ├── ExpandCollapse.mdx
│ │ │ │ │ │ ├── ExpandCollapse.stories.helpers.tsx
│ │ │ │ │ │ └── ExpandCollapse.stories.tsx
│ │ │ │ │ ├── Flex/
│ │ │ │ │ │ ├── Flex.mdx
│ │ │ │ │ │ └── Flex.stories.tsx
│ │ │ │ │ ├── GridKeyboardNavigationContext/
│ │ │ │ │ │ ├── useGridKeyboardNavigationContext.interactions.ts
│ │ │ │ │ │ ├── useGridKeyboardNavigationContext.mdx
│ │ │ │ │ │ ├── useGridKeyboardNavigationContext.stories.helpers.tsx
│ │ │ │ │ │ ├── useGridKeyboardNavigationContext.stories.scss
│ │ │ │ │ │ └── useGridKeyboardNavigationContext.stories.tsx
│ │ │ │ │ ├── Heading/
│ │ │ │ │ │ ├── Heading.interactions.ts
│ │ │ │ │ │ ├── Heading.mdx
│ │ │ │ │ │ ├── Heading.stories.helpers.tsx
│ │ │ │ │ │ └── Heading.stories.tsx
│ │ │ │ │ ├── HiddenText/
│ │ │ │ │ │ ├── HiddenText.mdx
│ │ │ │ │ │ └── HiddenText.stories.tsx
│ │ │ │ │ ├── Icon/
│ │ │ │ │ │ ├── Icon.mdx
│ │ │ │ │ │ └── Icon.stories.tsx
│ │ │ │ │ ├── IconButton/
│ │ │ │ │ │ ├── IconButton.mdx
│ │ │ │ │ │ ├── IconButton.stories.helpers.tsx
│ │ │ │ │ │ └── IconButton.stories.tsx
│ │ │ │ │ ├── Info/
│ │ │ │ │ │ ├── Info.mdx
│ │ │ │ │ │ ├── Info.stories.module.scss
│ │ │ │ │ │ └── Info.stories.tsx
│ │ │ │ │ ├── Label/
│ │ │ │ │ │ ├── Label.mdx
│ │ │ │ │ │ ├── Label.stories.helpers.tsx
│ │ │ │ │ │ └── Label.stories.tsx
│ │ │ │ │ ├── Link/
│ │ │ │ │ │ ├── Example.module.scss
│ │ │ │ │ │ ├── Example.tsx
│ │ │ │ │ │ ├── Link.mdx
│ │ │ │ │ │ ├── Link.stories.helpers.tsx
│ │ │ │ │ │ └── Link.stories.tsx
│ │ │ │ │ ├── List/
│ │ │ │ │ │ ├── List.mdx
│ │ │ │ │ │ ├── List.stories.helpers.tsx
│ │ │ │ │ │ ├── List.stories.tsx
│ │ │ │ │ │ ├── ListItem.mdx
│ │ │ │ │ │ ├── ListItem.stories.tsx
│ │ │ │ │ │ └── legacy/
│ │ │ │ │ │ ├── List.mdx
│ │ │ │ │ │ ├── List.stories.helpers.tsx
│ │ │ │ │ │ ├── List.stories.tsx
│ │ │ │ │ │ ├── ListItem.mdx
│ │ │ │ │ │ └── ListItem.stories.tsx
│ │ │ │ │ ├── Loader/
│ │ │ │ │ │ ├── Loader.mdx
│ │ │ │ │ │ ├── Loader.stories.helpers.tsx
│ │ │ │ │ │ └── Loader.stories.tsx
│ │ │ │ │ ├── Menu/
│ │ │ │ │ │ ├── Menu.interactions.ts
│ │ │ │ │ │ ├── Menu.mdx
│ │ │ │ │ │ ├── Menu.stories.helpers.tsx
│ │ │ │ │ │ ├── Menu.stories.tsx
│ │ │ │ │ │ ├── MenuDivider.mdx
│ │ │ │ │ │ ├── MenuDivider.stories.tsx
│ │ │ │ │ │ ├── MenuGridItem.mdx
│ │ │ │ │ │ ├── MenuGridItem.stories.helpers.tsx
│ │ │ │ │ │ ├── MenuGridItem.stories.scss
│ │ │ │ │ │ ├── MenuGridItem.stories.tsx
│ │ │ │ │ │ ├── MenuItem.mdx
│ │ │ │ │ │ ├── MenuItem.stories.helpers.tsx
│ │ │ │ │ │ ├── MenuItem.stories.tsx
│ │ │ │ │ │ ├── MenuItemButton.mdx
│ │ │ │ │ │ ├── MenuItemButton.stories.helpers.tsx
│ │ │ │ │ │ ├── MenuItemButton.stories.tsx
│ │ │ │ │ │ ├── MenuTitle.mdx
│ │ │ │ │ │ └── MenuTitle.stories.tsx
│ │ │ │ │ ├── MenuButton/
│ │ │ │ │ │ ├── MenuButton.mdx
│ │ │ │ │ │ └── MenuButton.stories.tsx
│ │ │ │ │ ├── Modal/
│ │ │ │ │ │ ├── Modal.mdx
│ │ │ │ │ │ ├── Modal.stories.helpers.tsx
│ │ │ │ │ │ ├── Modal.stories.module.scss
│ │ │ │ │ │ ├── ModalBasicLayout.mdx
│ │ │ │ │ │ ├── ModalBasicLayout.stories.helpers.tsx
│ │ │ │ │ │ ├── ModalBasicLayout.stories.tsx
│ │ │ │ │ │ ├── ModalMediaLayout.mdx
│ │ │ │ │ │ ├── ModalMediaLayout.stories.helpers.tsx
│ │ │ │ │ │ ├── ModalMediaLayout.stories.tsx
│ │ │ │ │ │ ├── ModalSideBySideLayout.mdx
│ │ │ │ │ │ ├── ModalSideBySideLayout.stories.helpers.tsx
│ │ │ │ │ │ └── ModalSideBySideLayout.stories.tsx
│ │ │ │ │ ├── MultiStepIndicator/
│ │ │ │ │ │ ├── MultiStepIndicator.mdx
│ │ │ │ │ │ ├── MultiStepIndicator.stories.helpers.tsx
│ │ │ │ │ │ └── MultiStepIndicator.stories.tsx
│ │ │ │ │ ├── NumberField/
│ │ │ │ │ │ ├── NumberField.mdx
│ │ │ │ │ │ └── NumberField.stories.tsx
│ │ │ │ │ ├── ProgressBars/
│ │ │ │ │ │ ├── ProgressBar.mdx
│ │ │ │ │ │ ├── ProgressBar.stories.helpers.tsx
│ │ │ │ │ │ └── ProgressBar.stories.tsx
│ │ │ │ │ ├── RadioButton/
│ │ │ │ │ │ ├── RadioButton.interactions.ts
│ │ │ │ │ │ ├── RadioButton.mdx
│ │ │ │ │ │ ├── RadioButton.stories.helpers.tsx
│ │ │ │ │ │ └── RadioButton.stories.tsx
│ │ │ │ │ ├── Search/
│ │ │ │ │ │ ├── Search.mdx
│ │ │ │ │ │ ├── Search.stories.module.scss
│ │ │ │ │ │ └── Search.stories.tsx
│ │ │ │ │ ├── Skeleton/
│ │ │ │ │ │ ├── Skeleton.mdx
│ │ │ │ │ │ ├── Skeleton.stories.helpers.tsx
│ │ │ │ │ │ └── Skeleton.stories.tsx
│ │ │ │ │ ├── Slider/
│ │ │ │ │ │ ├── Slider.interactions.ts
│ │ │ │ │ │ ├── Slider.mdx
│ │ │ │ │ │ ├── Slider.stories.helpers.tsx
│ │ │ │ │ │ └── Slider.stories.tsx
│ │ │ │ │ ├── SplitButton/
│ │ │ │ │ │ ├── SplitButton.mdx
│ │ │ │ │ │ ├── SplitButton.stories.helpers.tsx
│ │ │ │ │ │ └── SplitButton.stories.tsx
│ │ │ │ │ ├── Steps/
│ │ │ │ │ │ ├── Steps.mdx
│ │ │ │ │ │ ├── Steps.stories.helpers.tsx
│ │ │ │ │ │ └── Steps.stories.tsx
│ │ │ │ │ ├── Table/
│ │ │ │ │ │ ├── Table.mdx
│ │ │ │ │ │ ├── Table.stories.helpers.tsx
│ │ │ │ │ │ └── Table.stories.tsx
│ │ │ │ │ ├── Tabs/
│ │ │ │ │ │ ├── Tabs.mdx
│ │ │ │ │ │ ├── Tabs.stories.helpers.tsx
│ │ │ │ │ │ └── Tabs.stories.tsx
│ │ │ │ │ ├── Text/
│ │ │ │ │ │ ├── Text.interactions.ts
│ │ │ │ │ │ ├── Text.mdx
│ │ │ │ │ │ ├── Text.stories.helpers.tsx
│ │ │ │ │ │ └── Text.stories.tsx
│ │ │ │ │ ├── TextArea/
│ │ │ │ │ │ ├── TextArea.mdx
│ │ │ │ │ │ └── TextArea.stories.tsx
│ │ │ │ │ ├── TextField/
│ │ │ │ │ │ ├── TextField.mdx
│ │ │ │ │ │ └── TextField.stories.tsx
│ │ │ │ │ ├── TextWithHighlight/
│ │ │ │ │ │ ├── TextWithHighlight.mdx
│ │ │ │ │ │ └── TextWithHighlight.stories.tsx
│ │ │ │ │ ├── ThemeProvider/
│ │ │ │ │ │ ├── ThemeProvider.interactions.ts
│ │ │ │ │ │ ├── ThemeProvider.mdx
│ │ │ │ │ │ ├── ThemeProvider.stories.helpers.tsx
│ │ │ │ │ │ ├── ThemeProvider.stories.tsx
│ │ │ │ │ │ └── product-themes/
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ ├── product-theme-1.ts
│ │ │ │ │ │ ├── product-theme-2.ts
│ │ │ │ │ │ ├── product-theme-3.ts
│ │ │ │ │ │ └── product-theme-4.ts
│ │ │ │ │ ├── Tipseen/
│ │ │ │ │ │ ├── Tipseen.mdx
│ │ │ │ │ │ ├── Tipseen.stories.helpers.tsx
│ │ │ │ │ │ └── Tipseen.stories.tsx
│ │ │ │ │ ├── Toast/
│ │ │ │ │ │ ├── Toast.mdx
│ │ │ │ │ │ ├── Toast.stories.helpers.tsx
│ │ │ │ │ │ └── Toast.stories.tsx
│ │ │ │ │ ├── Toggle/
│ │ │ │ │ │ ├── Toggle.mdx
│ │ │ │ │ │ ├── Toggle.stories.helpers.tsx
│ │ │ │ │ │ └── Toggle.stories.tsx
│ │ │ │ │ ├── Tooltip/
│ │ │ │ │ │ ├── Tooltip.interactions.ts
│ │ │ │ │ │ ├── Tooltip.mdx
│ │ │ │ │ │ ├── Tooltip.stories.helpers.tsx
│ │ │ │ │ │ └── Tooltip.stories.tsx
│ │ │ │ │ ├── VirtualizedGrid/
│ │ │ │ │ │ ├── VirtualizedGrid.mdx
│ │ │ │ │ │ ├── VirtualizedGrid.stories.helpers.tsx
│ │ │ │ │ │ └── VirtualizedGrid.stories.tsx
│ │ │ │ │ └── VirtualizedList/
│ │ │ │ │ ├── VirtualizedList.mdx
│ │ │ │ │ ├── VirtualizedList.stories.helpers.tsx
│ │ │ │ │ └── VirtualizedList.stories.tsx
│ │ │ │ ├── contributing/
│ │ │ │ │ └── contributing.mdx
│ │ │ │ ├── foundations/
│ │ │ │ │ ├── accessibility/
│ │ │ │ │ │ ├── accessibility.mdx
│ │ │ │ │ │ ├── accessibility.stories.helpers.tsx
│ │ │ │ │ │ ├── accessibility.stories.module.scss
│ │ │ │ │ │ ├── assets/
│ │ │ │ │ │ │ └── index.ts
│ │ │ │ │ │ └── principles/
│ │ │ │ │ │ ├── principle.scss
│ │ │ │ │ │ ├── principle.tsx
│ │ │ │ │ │ ├── principlesAccesability.scss
│ │ │ │ │ │ └── principlesAccesability.tsx
│ │ │ │ │ ├── colors/
│ │ │ │ │ │ ├── Colors.mdx
│ │ │ │ │ │ ├── assets/
│ │ │ │ │ │ │ └── index.ts
│ │ │ │ │ │ ├── background-colors/
│ │ │ │ │ │ │ └── background-colors.tsx
│ │ │ │ │ │ ├── border-colors/
│ │ │ │ │ │ │ └── border-colors.tsx
│ │ │ │ │ │ ├── colors-description/
│ │ │ │ │ │ │ └── colors-description.tsx
│ │ │ │ │ │ ├── colors.module.scss
│ │ │ │ │ │ ├── colors.stories.tsx
│ │ │ │ │ │ ├── content-color-cell/
│ │ │ │ │ │ │ ├── content-color-cell.module.scss
│ │ │ │ │ │ │ └── content-color-cell.tsx
│ │ │ │ │ │ ├── content-color-row/
│ │ │ │ │ │ │ └── content-color-row.tsx
│ │ │ │ │ │ ├── content-colors/
│ │ │ │ │ │ │ ├── content-colors.module.scss
│ │ │ │ │ │ │ └── content-colors.tsx
│ │ │ │ │ │ ├── semantic-colors/
│ │ │ │ │ │ │ └── semantic-colors.tsx
│ │ │ │ │ │ └── text-colors/
│ │ │ │ │ │ └── text-colors.jsx
│ │ │ │ │ ├── motion/
│ │ │ │ │ │ ├── animation-information-box/
│ │ │ │ │ │ │ ├── animation-information-box.module.scss
│ │ │ │ │ │ │ └── animation-information-box.tsx
│ │ │ │ │ │ ├── animation-overviews/
│ │ │ │ │ │ │ ├── animation-overviews.module.scss
│ │ │ │ │ │ │ └── animation-overviews.tsx
│ │ │ │ │ │ ├── animation-types/
│ │ │ │ │ │ │ ├── animation-types.module.scss
│ │ │ │ │ │ │ └── animation-types.tsx
│ │ │ │ │ │ ├── assets/
│ │ │ │ │ │ │ └── index.ts
│ │ │ │ │ │ ├── duration-expressive-tokens/
│ │ │ │ │ │ │ ├── duaration-expressive-tokens.module.scss
│ │ │ │ │ │ │ └── duration-expressive-tokens.tsx
│ │ │ │ │ │ ├── duration-productive-tokens/
│ │ │ │ │ │ │ ├── duaration-productive-tokens.module.scss
│ │ │ │ │ │ │ └── duration-productive-tokens.tsx
│ │ │ │ │ │ ├── duration-token-table/
│ │ │ │ │ │ │ └── duration-token-table.tsx
│ │ │ │ │ │ ├── easing-overview/
│ │ │ │ │ │ │ ├── easing-overview.module.scss
│ │ │ │ │ │ │ └── easing-overview.tsx
│ │ │ │ │ │ ├── easing-overviews/
│ │ │ │ │ │ │ ├── easing-overviews.module.scss
│ │ │ │ │ │ │ └── easing-overviews.tsx
│ │ │ │ │ │ ├── easing-token-table/
│ │ │ │ │ │ │ └── easing-token-table.tsx
│ │ │ │ │ │ ├── motion.mdx
│ │ │ │ │ │ └── token-Information-box/
│ │ │ │ │ │ └── token-information-box.tsx
│ │ │ │ │ ├── round-corners/
│ │ │ │ │ │ ├── corners-settings/
│ │ │ │ │ │ │ ├── corner-settings.scss
│ │ │ │ │ │ │ └── corner-settings.tsx
│ │ │ │ │ │ ├── round-corners.mdx
│ │ │ │ │ │ ├── round-corners.stories.module.scss
│ │ │ │ │ │ └── rounded-corner/
│ │ │ │ │ │ ├── rounded-corner.module.scss
│ │ │ │ │ │ └── rounded-corner.tsx
│ │ │ │ │ ├── shadow/
│ │ │ │ │ │ ├── assets/
│ │ │ │ │ │ │ └── index.ts
│ │ │ │ │ │ ├── card-shadow-example/
│ │ │ │ │ │ │ ├── card-shadow-example.module.scss
│ │ │ │ │ │ │ └── card-shadow-example.tsx
│ │ │ │ │ │ ├── drag-shadow-example/
│ │ │ │ │ │ │ ├── drag-shadow-example.module.scss
│ │ │ │ │ │ │ └── drag-shadow-example.tsx
│ │ │ │ │ │ ├── shadow-levels/
│ │ │ │ │ │ │ ├── shadow-example/
│ │ │ │ │ │ │ │ ├── shadow-example.module.scss
│ │ │ │ │ │ │ │ └── shadow-example.tsx
│ │ │ │ │ │ │ ├── shadow-levels.scss
│ │ │ │ │ │ │ └── shadow-levels.tsx
│ │ │ │ │ │ ├── shadow.mdx
│ │ │ │ │ │ └── shadow.scss
│ │ │ │ │ ├── spacing/
│ │ │ │ │ │ ├── Spacing.mdx
│ │ │ │ │ │ ├── assets/
│ │ │ │ │ │ │ └── index.ts
│ │ │ │ │ │ ├── spacing-sizes/
│ │ │ │ │ │ │ └── spacing-sizes.tsx
│ │ │ │ │ │ ├── spacing-token-name/
│ │ │ │ │ │ │ ├── spacing-token-name.tsx
│ │ │ │ │ │ │ └── spacing-usage-examples.module.scss
│ │ │ │ │ │ ├── spacing-usage-examples/
│ │ │ │ │ │ │ ├── spacing-usage-examples.module.scss
│ │ │ │ │ │ │ └── spacing-usage-examples.tsx
│ │ │ │ │ │ ├── spacing.module.scss
│ │ │ │ │ │ └── spacing.stories.tsx
│ │ │ │ │ ├── typography/
│ │ │ │ │ │ ├── assets/
│ │ │ │ │ │ │ └── index.ts
│ │ │ │ │ │ ├── examples-table/
│ │ │ │ │ │ │ ├── example-table.module.scss
│ │ │ │ │ │ │ └── examples-table.tsx
│ │ │ │ │ │ ├── typograpghy.stories.helpers.tsx
│ │ │ │ │ │ ├── typography.mdx
│ │ │ │ │ │ └── typography.module.scss
│ │ │ │ │ └── ux-writing-handbook/
│ │ │ │ │ ├── assets/
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── ux-writing-handbook.mdx
│ │ │ │ │ ├── ux-writing-handbook.stories.module.scss
│ │ │ │ │ └── values/
│ │ │ │ │ ├── rulesUXWriting.tsx
│ │ │ │ │ ├── values.module.scss
│ │ │ │ │ ├── values.tsx
│ │ │ │ │ ├── valuesUXWriting.module.scss
│ │ │ │ │ └── valuesUXWriting.tsx
│ │ │ │ ├── getting-started/
│ │ │ │ │ └── getting-started.mdx
│ │ │ │ ├── hooks/
│ │ │ │ │ ├── useActiveDescendantListFocus/
│ │ │ │ │ │ ├── useActiveDescendantListFocus.interactions.ts
│ │ │ │ │ │ ├── useActiveDescendantListFocus.mdx
│ │ │ │ │ │ ├── useActiveDescendantListFocus.module.scss
│ │ │ │ │ │ └── useActiveDescendantListFocus.stories.tsx
│ │ │ │ │ ├── useAfterFirstRender/
│ │ │ │ │ │ ├── useAfterFirstRender.mdx
│ │ │ │ │ │ └── useAfterFirstRender.stories.tsx
│ │ │ │ │ ├── useClickOutside/
│ │ │ │ │ │ ├── useClickOutside.mdx
│ │ │ │ │ │ └── useClickOutside.stories.tsx
│ │ │ │ │ ├── useClickableProps/
│ │ │ │ │ │ ├── useClickableProps.mdx
│ │ │ │ │ │ ├── useClickableProps.stories.helpers.tsx
│ │ │ │ │ │ ├── useClickableProps.stories.scss
│ │ │ │ │ │ └── useClickableProps.stories.tsx
│ │ │ │ │ ├── useDebounceEvent/
│ │ │ │ │ │ ├── useDebounceEvent.mdx
│ │ │ │ │ │ └── useDebounceEvent.stories.tsx
│ │ │ │ │ ├── useEventListener/
│ │ │ │ │ │ ├── useEventListener.mdx
│ │ │ │ │ │ └── useEventListener.stories.tsx
│ │ │ │ │ ├── useGridKeyboardNavigation/
│ │ │ │ │ │ ├── useGridKeyboardNavigation.mdx
│ │ │ │ │ │ ├── useGridKeyboardNavigation.stories.scss
│ │ │ │ │ │ └── useGridKeyboardNavigation.stories.tsx
│ │ │ │ │ ├── useHover/
│ │ │ │ │ │ ├── useHover.mdx
│ │ │ │ │ │ └── useHover.stories.tsx
│ │ │ │ │ ├── useIsOverflowing/
│ │ │ │ │ │ ├── useIsOverflowing.mdx
│ │ │ │ │ │ ├── useIsOverflowing.stories.helpers.tsx
│ │ │ │ │ │ ├── useIsOverflowing.stories.module.scss
│ │ │ │ │ │ └── useIsOverflowing.stories.tsx
│ │ │ │ │ ├── useKeyEvent/
│ │ │ │ │ │ ├── useKeyEvent.mdx
│ │ │ │ │ │ └── useKeyEvent.stories.tsx
│ │ │ │ │ ├── useMediaQuery/
│ │ │ │ │ │ ├── useMediaQuery.mdx
│ │ │ │ │ │ └── useMediaQuery.stories.tsx
│ │ │ │ │ ├── usePrevious/
│ │ │ │ │ │ ├── usePrevious.mdx
│ │ │ │ │ │ ├── usePrevious.stories.module.scss
│ │ │ │ │ │ └── usePrevious.stories.tsx
│ │ │ │ │ ├── useSetFocus/
│ │ │ │ │ │ ├── useSetFocus.mdx
│ │ │ │ │ │ ├── useSetFocus.stories.module.scss
│ │ │ │ │ │ └── useSetFocus.stories.tsx
│ │ │ │ │ ├── useSwitch/
│ │ │ │ │ │ ├── useSwitch.mdx
│ │ │ │ │ │ └── useSwitch.stories.tsx
│ │ │ │ │ ├── useTimeout/
│ │ │ │ │ │ ├── useTimeout.mdx
│ │ │ │ │ │ └── useTimeout.stories.tsx
│ │ │ │ │ ├── useVibeMediaQuery/
│ │ │ │ │ │ ├── useVibeMediaQuery.mdx
│ │ │ │ │ │ ├── useVibeMediaQuery.stories.helpers.tsx
│ │ │ │ │ │ └── useVibeMediaQuery.stories.tsx
│ │ │ │ │ └── useWizard/
│ │ │ │ │ ├── useWizard.mdx
│ │ │ │ │ ├── useWizard.stories.module.scss
│ │ │ │ │ └── useWizard.stories.tsx
│ │ │ │ ├── mcp/
│ │ │ │ │ └── mcp.mdx
│ │ │ │ ├── migration-guide/
│ │ │ │ │ ├── DiffCodeBlock.tsx
│ │ │ │ │ ├── vibe-3-changelog.md
│ │ │ │ │ ├── vibe-4-changelog.md
│ │ │ │ │ ├── vibe-4-migration-guide.mdx
│ │ │ │ │ └── vibe2-migration-guide.md
│ │ │ │ ├── playground/
│ │ │ │ │ ├── Playground.stories.ts
│ │ │ │ │ ├── playground-helpers.ts
│ │ │ │ │ └── react-docgen-output.json
│ │ │ │ └── welcome/
│ │ │ │ ├── EntranceAnimation.tsx
│ │ │ │ ├── Section.module.scss
│ │ │ │ ├── Section.tsx
│ │ │ │ ├── Title.module.scss
│ │ │ │ ├── Title.tsx
│ │ │ │ ├── banner/
│ │ │ │ │ ├── Vibe4Banner.module.scss
│ │ │ │ │ └── Vibe4Banner.tsx
│ │ │ │ ├── contributions/
│ │ │ │ │ ├── Contributor.module.scss
│ │ │ │ │ ├── Contributor.tsx
│ │ │ │ │ ├── Contributors.module.scss
│ │ │ │ │ ├── Contributors.tsx
│ │ │ │ │ ├── ContributorsList.tsx
│ │ │ │ │ ├── Founders.module.scss
│ │ │ │ │ ├── Founders.tsx
│ │ │ │ │ ├── Team.module.scss
│ │ │ │ │ ├── Team.tsx
│ │ │ │ │ ├── TeamMember.module.scss
│ │ │ │ │ ├── TeamMember.tsx
│ │ │ │ │ └── useContributors.ts
│ │ │ │ ├── hero/
│ │ │ │ │ ├── FloatingObjects.module.scss
│ │ │ │ │ ├── FloatingObjects.tsx
│ │ │ │ │ ├── Hero.module.scss
│ │ │ │ │ ├── Hero.tsx
│ │ │ │ │ ├── ResourceButton.module.scss
│ │ │ │ │ ├── ResourceButton.tsx
│ │ │ │ │ └── icons/
│ │ │ │ │ ├── FigmaIcon.tsx
│ │ │ │ │ ├── GitHubIcon.tsx
│ │ │ │ │ ├── HeroAbstractFluidShape.tsx
│ │ │ │ │ ├── HeroArrowCrossShape.tsx
│ │ │ │ │ ├── HeroCircleShape.tsx
│ │ │ │ │ ├── HeroCircleShapeTeal.tsx
│ │ │ │ │ ├── HeroCloverShape.tsx
│ │ │ │ │ ├── HeroCloverShapeGreen.tsx
│ │ │ │ │ └── HeroHeartShape.tsx
│ │ │ │ ├── resources/
│ │ │ │ │ ├── ResourceCard.module.scss
│ │ │ │ │ ├── ResourceCard.tsx
│ │ │ │ │ ├── Resources.module.scss
│ │ │ │ │ ├── Resources.tsx
│ │ │ │ │ └── icons/
│ │ │ │ │ ├── IconComponents.tsx
│ │ │ │ │ ├── IconComponentsColored.tsx
│ │ │ │ │ ├── IconFoundations.tsx
│ │ │ │ │ ├── IconFoundationsColored.tsx
│ │ │ │ │ ├── IconPatterns.tsx
│ │ │ │ │ └── IconPatternsColored.tsx
│ │ │ │ └── welcome.mdx
│ │ │ └── utils/
│ │ │ └── createStoryMetaSettingsDecorator.ts
│ │ ├── tsconfig.base.json
│ │ ├── tsconfig.json
│ │ ├── tsconfig.storybook.json
│ │ └── vite.config.ts
│ ├── hooks/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ ├── rollup.config.mjs
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ ├── types/
│ │ │ │ └── files.d.ts
│ │ │ ├── useClickOutside/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── useClickOutside.test.ts
│ │ │ │ └── index.ts
│ │ │ ├── useIsOverflowing/
│ │ │ │ └── index.ts
│ │ │ └── useResizeObserver/
│ │ │ └── index.ts
│ │ ├── tsconfig.json
│ │ ├── vitest.config.mjs
│ │ └── vitest.setup.mjs
│ ├── icons/
│ │ ├── .cursor/
│ │ │ └── rules/
│ │ │ ├── add-icon-from-monday-task.mdc
│ │ │ └── icon-generation-process.mdc
│ │ ├── .eslintrc.json
│ │ ├── .gitignore
│ │ ├── .prettierignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── plop/
│ │ │ └── icon/
│ │ │ ├── icon-metadata.txt
│ │ │ └── index.js
│ │ ├── plopfile.js
│ │ ├── rollup.config.js
│ │ ├── scripts/
│ │ │ ├── __tests__/
│ │ │ │ ├── __snapshots__/
│ │ │ │ │ └── validate-icons-colors.test.ts.snap
│ │ │ │ └── validate-icons-colors.test.ts
│ │ │ ├── generate-lazy-icons.js
│ │ │ ├── generate-meta.js
│ │ │ ├── generate-svg-index.js
│ │ │ ├── metadata-util.js
│ │ │ ├── utils.js
│ │ │ ├── validate-icons-colors.js
│ │ │ └── validate-meta.js
│ │ ├── src/
│ │ │ ├── iconsMetaData.ts
│ │ │ ├── react/
│ │ │ │ ├── API.tsx
│ │ │ │ ├── Academy.tsx
│ │ │ │ ├── Activity.tsx
│ │ │ │ ├── Add.tsx
│ │ │ │ ├── AddNewDoc.tsx
│ │ │ │ ├── AddSmall.tsx
│ │ │ │ ├── AddToTeam.tsx
│ │ │ │ ├── AddUpdate.tsx
│ │ │ │ ├── Alert.tsx
│ │ │ │ ├── AlignCenter.tsx
│ │ │ │ ├── AlignLeft.tsx
│ │ │ │ ├── AlignRight.tsx
│ │ │ │ ├── Announcement.tsx
│ │ │ │ ├── Apps.tsx
│ │ │ │ ├── Archive.tsx
│ │ │ │ ├── Attach.tsx
│ │ │ │ ├── Baseline.tsx
│ │ │ │ ├── Basic.tsx
│ │ │ │ ├── Battery.tsx
│ │ │ │ ├── BlockQuote.tsx
│ │ │ │ ├── Board.tsx
│ │ │ │ ├── BoardPrivate.tsx
│ │ │ │ ├── BoardShareable.tsx
│ │ │ │ ├── BoardTemplate.tsx
│ │ │ │ ├── Bold.tsx
│ │ │ │ ├── Bolt.tsx
│ │ │ │ ├── Bookmark.tsx
│ │ │ │ ├── Broadcast.tsx
│ │ │ │ ├── Broom.tsx
│ │ │ │ ├── Bug.tsx
│ │ │ │ ├── Bullet.tsx
│ │ │ │ ├── Bullets.tsx
│ │ │ │ ├── Bulllet.tsx
│ │ │ │ ├── Calendar.tsx
│ │ │ │ ├── Chart.tsx
│ │ │ │ ├── Check.tsx
│ │ │ │ ├── CheckList.tsx
│ │ │ │ ├── Checkbox.tsx
│ │ │ │ ├── ClassicFolder.tsx
│ │ │ │ ├── Clear.tsx
│ │ │ │ ├── Clipboard.tsx
│ │ │ │ ├── Close.tsx
│ │ │ │ ├── CloseMedium.tsx
│ │ │ │ ├── CloseRound.tsx
│ │ │ │ ├── CloseSmall.tsx
│ │ │ │ ├── Code.tsx
│ │ │ │ ├── Collapse.tsx
│ │ │ │ ├── CollapseHorizontally.tsx
│ │ │ │ ├── CollapseRound.tsx
│ │ │ │ ├── Column.tsx
│ │ │ │ ├── Comment.tsx
│ │ │ │ ├── Completed.tsx
│ │ │ │ ├── Connect.tsx
│ │ │ │ ├── ConnectedDoc.tsx
│ │ │ │ ├── ContentDirectory.tsx
│ │ │ │ ├── ConvertToItem.tsx
│ │ │ │ ├── ConvertToSubitem.tsx
│ │ │ │ ├── Counter.tsx
│ │ │ │ ├── Country.tsx
│ │ │ │ ├── CreditCard.tsx
│ │ │ │ ├── Custom.tsx
│ │ │ │ ├── Cut.tsx
│ │ │ │ ├── Dashboard.tsx
│ │ │ │ ├── DashboardPrivate.tsx
│ │ │ │ ├── Deactivate.tsx
│ │ │ │ ├── Delete.tsx
│ │ │ │ ├── Dependency.tsx
│ │ │ │ ├── Description.tsx
│ │ │ │ ├── DisabledUser.tsx
│ │ │ │ ├── Divider.tsx
│ │ │ │ ├── Doc.tsx
│ │ │ │ ├── DocPrivate.tsx
│ │ │ │ ├── DocShareable.tsx
│ │ │ │ ├── DocTemplate.tsx
│ │ │ │ ├── DoubleCheck.tsx
│ │ │ │ ├── Downgrade.tsx
│ │ │ │ ├── Download.tsx
│ │ │ │ ├── Drag.tsx
│ │ │ │ ├── Dropdown.tsx
│ │ │ │ ├── DropdownChevronDown.tsx
│ │ │ │ ├── DropdownChevronLeft.tsx
│ │ │ │ ├── DropdownChevronRight.tsx
│ │ │ │ ├── DropdownChevronUp.tsx
│ │ │ │ ├── DueDate.tsx
│ │ │ │ ├── Duplicate.tsx
│ │ │ │ ├── Edit.tsx
│ │ │ │ ├── Education.tsx
│ │ │ │ ├── Email.tsx
│ │ │ │ ├── Embed.tsx
│ │ │ │ ├── Emoji.tsx
│ │ │ │ ├── Enter.tsx
│ │ │ │ ├── EnterArrow.tsx
│ │ │ │ ├── Erase.tsx
│ │ │ │ ├── Event.tsx
│ │ │ │ ├── Expand.tsx
│ │ │ │ ├── ExternalPage.tsx
│ │ │ │ ├── Favorite.tsx
│ │ │ │ ├── Feedback.tsx
│ │ │ │ ├── File.tsx
│ │ │ │ ├── Files.tsx
│ │ │ │ ├── Filter.tsx
│ │ │ │ ├── Folder.tsx
│ │ │ │ ├── Form.tsx
│ │ │ │ ├── Formula.tsx
│ │ │ │ ├── Forum.tsx
│ │ │ │ ├── Forward.tsx
│ │ │ │ ├── Fullscreen.tsx
│ │ │ │ ├── FullscreenClose.tsx
│ │ │ │ ├── Gallery.tsx
│ │ │ │ ├── Gantt.tsx
│ │ │ │ ├── Gif.tsx
│ │ │ │ ├── Globe.tsx
│ │ │ │ ├── Graph.tsx
│ │ │ │ ├── Group.tsx
│ │ │ │ ├── Guest.tsx
│ │ │ │ ├── Health.tsx
│ │ │ │ ├── Heart.tsx
│ │ │ │ ├── Help.tsx
│ │ │ │ ├── Hide.tsx
│ │ │ │ ├── Highlight.tsx
│ │ │ │ ├── HighlightColorBucket.tsx
│ │ │ │ ├── Home.tsx
│ │ │ │ ├── IPRestrictions.tsx
│ │ │ │ ├── Idea.tsx
│ │ │ │ ├── Image.tsx
│ │ │ │ ├── Inbox.tsx
│ │ │ │ ├── Info.tsx
│ │ │ │ ├── Integrations.tsx
│ │ │ │ ├── Invite.tsx
│ │ │ │ ├── Italic.tsx
│ │ │ │ ├── Item.tsx
│ │ │ │ ├── ItemDefaultValues.tsx
│ │ │ │ ├── ItemHeightDouble.tsx
│ │ │ │ ├── ItemHeightSingle.tsx
│ │ │ │ ├── ItemHeightTriple.tsx
│ │ │ │ ├── Key.tsx
│ │ │ │ ├── Keyboard.tsx
│ │ │ │ ├── Labs.tsx
│ │ │ │ ├── Launch.tsx
│ │ │ │ ├── Layout.tsx
│ │ │ │ ├── LearnMore.tsx
│ │ │ │ ├── Lines.tsx
│ │ │ │ ├── Link.tsx
│ │ │ │ ├── Location.tsx
│ │ │ │ ├── Locked.tsx
│ │ │ │ ├── LogIn.tsx
│ │ │ │ ├── LogOut.tsx
│ │ │ │ ├── LongText.tsx
│ │ │ │ ├── Mention.tsx
│ │ │ │ ├── Menu.tsx
│ │ │ │ ├── Microphone.tsx
│ │ │ │ ├── Minimize.tsx
│ │ │ │ ├── MinusSmall.tsx
│ │ │ │ ├── Mirror.tsx
│ │ │ │ ├── Mobile.tsx
│ │ │ │ ├── MondayDoc.tsx
│ │ │ │ ├── MondayLogoOutline.tsx
│ │ │ │ ├── Moon.tsx
│ │ │ │ ├── MoreActions.tsx
│ │ │ │ ├── MoreBelow.tsx
│ │ │ │ ├── MoreBelowFilled.tsx
│ │ │ │ ├── Move.tsx
│ │ │ │ ├── MoveArrowDown.tsx
│ │ │ │ ├── MoveArrowLeft.tsx
│ │ │ │ ├── MoveArrowLeftDouble.tsx
│ │ │ │ ├── MoveArrowLeftNarrow.tsx
│ │ │ │ ├── MoveArrowRight.tsx
│ │ │ │ ├── MoveArrowRightNarrow.tsx
│ │ │ │ ├── MoveArrowUp.tsx
│ │ │ │ ├── Mute.tsx
│ │ │ │ ├── MyWeek.tsx
│ │ │ │ ├── NavigationArrow.tsx
│ │ │ │ ├── NavigationChevronDown.tsx
│ │ │ │ ├── NavigationChevronLeft.tsx
│ │ │ │ ├── NavigationChevronRight.tsx
│ │ │ │ ├── NavigationChevronUp.tsx
│ │ │ │ ├── NavigationDoubleChevronLeft.tsx
│ │ │ │ ├── NewTab.tsx
│ │ │ │ ├── Night.tsx
│ │ │ │ ├── NoColor.tsx
│ │ │ │ ├── Note.tsx
│ │ │ │ ├── NotificationChecked.tsx
│ │ │ │ ├── Notifications.tsx
│ │ │ │ ├── NotificationsMuted.tsx
│ │ │ │ ├── Numbers.tsx
│ │ │ │ ├── Offline.tsx
│ │ │ │ ├── Open.tsx
│ │ │ │ ├── PDF.tsx
│ │ │ │ ├── Page.tsx
│ │ │ │ ├── Paste.tsx
│ │ │ │ ├── Pause.tsx
│ │ │ │ ├── Person.tsx
│ │ │ │ ├── PersonRound.tsx
│ │ │ │ ├── Pin.tsx
│ │ │ │ ├── PinFull.tsx
│ │ │ │ ├── Placeholder.tsx
│ │ │ │ ├── Play.tsx
│ │ │ │ ├── Print.tsx
│ │ │ │ ├── Prompt.tsx
│ │ │ │ ├── PushNotification.tsx
│ │ │ │ ├── Quote.tsx
│ │ │ │ ├── Radio.tsx
│ │ │ │ ├── Recurring.tsx
│ │ │ │ ├── RecycleBin.tsx
│ │ │ │ ├── Redo.tsx
│ │ │ │ ├── Remove.tsx
│ │ │ │ ├── RemoveRound.tsx
│ │ │ │ ├── Reply.tsx
│ │ │ │ ├── ReplyAll.tsx
│ │ │ │ ├── Retry.tsx
│ │ │ │ ├── Robot.tsx
│ │ │ │ ├── Rotate.tsx
│ │ │ │ ├── ScheduledEmail.tsx
│ │ │ │ ├── ScheduledSend.tsx
│ │ │ │ ├── Search.tsx
│ │ │ │ ├── Security.tsx
│ │ │ │ ├── Send.tsx
│ │ │ │ ├── Settings.tsx
│ │ │ │ ├── SettingsKnobs.tsx
│ │ │ │ ├── Share.tsx
│ │ │ │ ├── ShortText.tsx
│ │ │ │ ├── Show.tsx
│ │ │ │ ├── Shredder.tsx
│ │ │ │ ├── Shuffle.tsx
│ │ │ │ ├── Signature.tsx
│ │ │ │ ├── Sort.tsx
│ │ │ │ ├── SortAscending.tsx
│ │ │ │ ├── SortDescending.tsx
│ │ │ │ ├── Sound.tsx
│ │ │ │ ├── Status.tsx
│ │ │ │ ├── StrikethroughS.tsx
│ │ │ │ ├── StrikethroughT.tsx
│ │ │ │ ├── Subitems.tsx
│ │ │ │ ├── Sun.tsx
│ │ │ │ ├── Switch.tsx
│ │ │ │ ├── Switcher.tsx
│ │ │ │ ├── Table.tsx
│ │ │ │ ├── Tags.tsx
│ │ │ │ ├── Team.tsx
│ │ │ │ ├── Text.tsx
│ │ │ │ ├── TextBig.tsx
│ │ │ │ ├── TextColorIndicator.tsx
│ │ │ │ ├── TextCopy.tsx
│ │ │ │ ├── TextFormatting.tsx
│ │ │ │ ├── TextHuge.tsx
│ │ │ │ ├── TextMedium.tsx
│ │ │ │ ├── TextSmall.tsx
│ │ │ │ ├── Textcolor.tsx
│ │ │ │ ├── ThumbsDown.tsx
│ │ │ │ ├── ThumbsUp.tsx
│ │ │ │ ├── Time.tsx
│ │ │ │ ├── Timeline.tsx
│ │ │ │ ├── Translation.tsx
│ │ │ │ ├── TurnInto.tsx
│ │ │ │ ├── Underline.tsx
│ │ │ │ ├── Undo.tsx
│ │ │ │ ├── Unlocked.tsx
│ │ │ │ ├── Update.tsx
│ │ │ │ ├── Upgrade.tsx
│ │ │ │ ├── Upload.tsx
│ │ │ │ ├── UserDomain.tsx
│ │ │ │ ├── UserStatus.tsx
│ │ │ │ ├── Versioning.tsx
│ │ │ │ ├── Video.tsx
│ │ │ │ ├── Wand.tsx
│ │ │ │ ├── Warning.tsx
│ │ │ │ ├── WarningFull.tsx
│ │ │ │ ├── WhatsNew.tsx
│ │ │ │ ├── Widgets.tsx
│ │ │ │ ├── Work.tsx
│ │ │ │ ├── Workflow.tsx
│ │ │ │ ├── Workspace.tsx
│ │ │ │ ├── WrapText.tsx
│ │ │ │ ├── ZoomIn.tsx
│ │ │ │ ├── ZoomOut.tsx
│ │ │ │ └── index.ts
│ │ │ ├── svg.d.ts
│ │ │ └── types.ts
│ │ ├── tsconfig.json
│ │ ├── tsconfig.test.json
│ │ └── vitest.config.ts
│ ├── mcp/
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── scripts/
│ │ │ ├── extract-accessibility.js
│ │ │ └── extract-code-samples.js
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── server/
│ │ │ ├── index.ts
│ │ │ └── tools/
│ │ │ ├── dropdown-migration.ts
│ │ │ ├── get-vibe-component-accessibility.ts
│ │ │ ├── get-vibe-component-examples.ts
│ │ │ ├── get-vibe-component-metadata.ts
│ │ │ ├── icon-metadata-service.ts
│ │ │ ├── list-vibe-icons.ts
│ │ │ ├── list-vibe-public-components.ts
│ │ │ ├── list-vibe-tokens.ts
│ │ │ ├── metadata-service.ts
│ │ │ ├── token-metadata-service.ts
│ │ │ ├── v3-migration.ts
│ │ │ └── v4-migration.ts
│ │ └── tsconfig.json
│ ├── shared/
│ │ ├── .eslintrc.cjs
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── constants/
│ │ │ │ ├── index.ts
│ │ │ │ ├── keyCodes.ts
│ │ │ │ └── sizes.ts
│ │ │ ├── hooks/
│ │ │ │ ├── index.ts
│ │ │ │ ├── ssr/
│ │ │ │ │ ├── useIsMounted.ts
│ │ │ │ │ └── useIsomorphicLayoutEffect.ts
│ │ │ │ ├── useEventListener.ts
│ │ │ │ ├── useKeyEvent.ts
│ │ │ │ ├── useKeyboardButtonPressedFunc.ts
│ │ │ │ └── useMergeRef.ts
│ │ │ ├── index.ts
│ │ │ ├── tests/
│ │ │ │ ├── constants.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── test-ids-utils.ts
│ │ │ │ └── test-utils.ts
│ │ │ ├── types/
│ │ │ │ ├── ArrayLastElement.ts
│ │ │ │ ├── Colors.ts
│ │ │ │ ├── ElementContent.ts
│ │ │ │ ├── FormElement.ts
│ │ │ │ ├── MoveBy.ts
│ │ │ │ ├── SplitString.ts
│ │ │ │ ├── VibeComponentProps.ts
│ │ │ │ ├── events.ts
│ │ │ │ ├── files.d.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── window.d.ts
│ │ │ └── utils/
│ │ │ ├── colors-utils.ts
│ │ │ ├── colors-vars-map.ts
│ │ │ ├── dom-event-utils.ts
│ │ │ ├── dom-utils.ts
│ │ │ ├── function-utils.ts
│ │ │ ├── index.ts
│ │ │ ├── media-query-utils.ts
│ │ │ ├── screenReaderAccessHelper.ts
│ │ │ ├── ssr-utils.ts
│ │ │ ├── testid-helper.ts
│ │ │ ├── textManipulations.ts
│ │ │ ├── typesciptCssModulesHelper.ts
│ │ │ ├── user-agent-utils.ts
│ │ │ └── warn-deprecated.ts
│ │ └── tsconfig.json
│ ├── storybook-blocks/
│ │ ├── .babelrc.json
│ │ ├── .eslintrc.js
│ │ ├── .prettierrc
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── __mocks__/
│ │ │ ├── fileMock.js
│ │ │ └── styleMock.js
│ │ ├── eslint/
│ │ │ └── resolver.js
│ │ ├── jest.config.ts
│ │ ├── package.json
│ │ ├── rollup.config.js
│ │ ├── scripts/
│ │ │ └── copy-mixins-to-dist.sh
│ │ ├── src/
│ │ │ ├── components/
│ │ │ │ ├── alpha-warning/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── alpha-warning.mdx
│ │ │ │ │ │ └── alpha-warning.stories.tsx
│ │ │ │ │ └── alpha-warning.tsx
│ │ │ │ ├── anchor-list-item/
│ │ │ │ │ ├── README.md
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── anchor-list-item.mdx
│ │ │ │ │ │ └── anchor-list-item.stories.tsx
│ │ │ │ │ ├── anchor-list-item.module.scss
│ │ │ │ │ └── anchor-list-item.tsx
│ │ │ │ ├── color-description/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── color-description.mdx
│ │ │ │ │ │ └── color-description.stories.tsx
│ │ │ │ │ ├── color-description.module.scss
│ │ │ │ │ └── color-description.tsx
│ │ │ │ ├── component-name/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── component-name.mdx
│ │ │ │ │ │ └── component-name.stories.tsx
│ │ │ │ │ ├── component-name.module.scss
│ │ │ │ │ └── component-name.tsx
│ │ │ │ ├── component-rule/
│ │ │ │ │ ├── component-rule-constants.ts
│ │ │ │ │ ├── component-rule.module.scss
│ │ │ │ │ └── component-rule.tsx
│ │ │ │ ├── component-rules/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── component-rules.mdx
│ │ │ │ │ │ └── component-rules.stories.tsx
│ │ │ │ │ ├── component-rules.module.scss
│ │ │ │ │ └── component-rules.tsx
│ │ │ │ ├── deprecated-warning/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── deprecated-warning.mdx
│ │ │ │ │ │ └── deprecated-warning.stories.tsx
│ │ │ │ │ └── deprecated-warning.tsx
│ │ │ │ ├── frame/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── frame.mdx
│ │ │ │ │ │ └── frame.stories.tsx
│ │ │ │ │ ├── frame.module.scss
│ │ │ │ │ └── frame.tsx
│ │ │ │ ├── function-arguments/
│ │ │ │ │ ├── README.md
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── function-arguments.mdx
│ │ │ │ │ │ └── function-arguments.stories.tsx
│ │ │ │ │ ├── function-argument.tsx
│ │ │ │ │ ├── function-arguments.tsx
│ │ │ │ │ └── index.module.scss
│ │ │ │ ├── github-contributors-list/
│ │ │ │ │ ├── contributors-list.tsx
│ │ │ │ │ ├── contributors.module.scss
│ │ │ │ │ ├── github-contributors-list.tsx
│ │ │ │ │ ├── github-contributors-types.ts
│ │ │ │ │ └── github-contributors-utils.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── information-box/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── information-box.mdx
│ │ │ │ │ │ └── information-box.stories.tsx
│ │ │ │ │ ├── information-box.module.scss
│ │ │ │ │ └── information-box.tsx
│ │ │ │ ├── information-box-title/
│ │ │ │ │ ├── information-box-title.module.scss
│ │ │ │ │ └── information-box-title.tsx
│ │ │ │ ├── link/
│ │ │ │ │ ├── LinkConstants.ts
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── link.mdx
│ │ │ │ │ │ └── link.stories.tsx
│ │ │ │ │ ├── link.module.scss
│ │ │ │ │ └── link.tsx
│ │ │ │ ├── multiple-story-elements-wrapper/
│ │ │ │ │ ├── multiple-story-elements-wrapper.module.scss
│ │ │ │ │ └── multiple-story-elements-wrapper.tsx
│ │ │ │ ├── paragraph/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── paragraph.mdx
│ │ │ │ │ │ └── paragraph.stories.tsx
│ │ │ │ │ ├── paragraph.module.scss
│ │ │ │ │ └── paragraph.tsx
│ │ │ │ ├── related-component/
│ │ │ │ │ ├── README.md
│ │ │ │ │ ├── related-component.module.scss
│ │ │ │ │ └── related-component.tsx
│ │ │ │ ├── related-components/
│ │ │ │ │ ├── README.md
│ │ │ │ │ ├── related-components-context.ts
│ │ │ │ │ ├── related-components.module.scss
│ │ │ │ │ └── related-components.tsx
│ │ │ │ ├── section-name/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── section-name.mdx
│ │ │ │ │ │ └── section-name.stories.tsx
│ │ │ │ │ ├── section-name.module.scss
│ │ │ │ │ └── section-name.tsx
│ │ │ │ ├── sidebar-item/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── sidebar-item.mdx
│ │ │ │ │ │ └── sidebar-item.stories.tsx
│ │ │ │ │ ├── sidebar-item.module.scss
│ │ │ │ │ └── sidebar-item.tsx
│ │ │ │ ├── status-tag/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── status-tag.mdx
│ │ │ │ │ │ └── status-tag.stories.tsx
│ │ │ │ │ ├── status-tag.module.scss
│ │ │ │ │ └── status-tag.tsx
│ │ │ │ ├── story-description/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── story-description.mdx
│ │ │ │ │ │ └── story-description.stories.tsx
│ │ │ │ │ ├── story-description.module.scss
│ │ │ │ │ └── story-description.tsx
│ │ │ │ ├── storybook-link/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── storybook-link.mdx
│ │ │ │ │ │ └── storybook-link.stories.tsx
│ │ │ │ │ └── storybook-link.tsx
│ │ │ │ ├── tip/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── tip.mdx
│ │ │ │ │ │ └── tip.stories.tsx
│ │ │ │ │ ├── tip.module.scss
│ │ │ │ │ ├── tip.tsx
│ │ │ │ │ └── tipConstants.ts
│ │ │ │ ├── title/
│ │ │ │ │ ├── README.md
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── title.mdx
│ │ │ │ │ │ └── title.stories.tsx
│ │ │ │ │ ├── title.module.scss
│ │ │ │ │ └── title.tsx
│ │ │ │ ├── token-table/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── token-table.mdx
│ │ │ │ │ │ └── token-table.stories.tsx
│ │ │ │ │ ├── token-table-head-item.tsx
│ │ │ │ │ ├── token-table-row.tsx
│ │ │ │ │ ├── token-table.module.scss
│ │ │ │ │ └── token-table.tsx
│ │ │ │ ├── unstyled-list/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── unstyled-list.mdx
│ │ │ │ │ │ └── unstyled-list.stories.tsx
│ │ │ │ │ └── unstyled-list.tsx
│ │ │ │ ├── unstyled-list-item/
│ │ │ │ │ ├── unstyled-list-item.module.scss
│ │ │ │ │ └── unstyled-list-item.tsx
│ │ │ │ ├── usage-guidelines/
│ │ │ │ │ ├── __stories__/
│ │ │ │ │ │ ├── usage-guidelines.mdx
│ │ │ │ │ │ └── usage-guidelines.stories.tsx
│ │ │ │ │ ├── usage-guidelines.module.scss
│ │ │ │ │ └── usage-guidelines.tsx
│ │ │ │ └── visual-description/
│ │ │ │ ├── __stories__/
│ │ │ │ │ ├── visual-description.mdx
│ │ │ │ │ └── visual-description.stories.tsx
│ │ │ │ ├── visual-description.module.scss
│ │ │ │ └── visual-description.tsx
│ │ │ ├── decorators/
│ │ │ │ ├── index.ts
│ │ │ │ ├── memory-stats.jsx
│ │ │ │ └── vertical-stories.jsx
│ │ │ ├── functions/
│ │ │ │ ├── createComponentTemplate.tsx
│ │ │ │ ├── createStoryMetaSettings/
│ │ │ │ │ ├── createStoryMetaSettings.ts
│ │ │ │ │ └── types.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── memory-stats/
│ │ │ │ ├── index.js
│ │ │ │ └── memory-stats-lib.js
│ │ │ ├── global.d.ts
│ │ │ ├── helpers/
│ │ │ │ ├── components/
│ │ │ │ │ ├── Flex/
│ │ │ │ │ │ ├── Flex.module.scss
│ │ │ │ │ │ ├── Flex.tsx
│ │ │ │ │ │ └── FlexConstants.ts
│ │ │ │ │ ├── Icons/
│ │ │ │ │ │ ├── Check.tsx
│ │ │ │ │ │ └── CloseSmall.tsx
│ │ │ │ │ └── Link/
│ │ │ │ │ ├── Link.module.scss
│ │ │ │ │ ├── Link.tsx
│ │ │ │ │ └── LinkConsts.ts
│ │ │ │ ├── types/
│ │ │ │ │ ├── VibeComponent.ts
│ │ │ │ │ ├── VibeComponentProps.ts
│ │ │ │ │ └── index.ts
│ │ │ │ └── utils/
│ │ │ │ ├── bem-helper.ts
│ │ │ │ ├── function-utils.ts
│ │ │ │ └── typesciptCssModulesHelper.ts
│ │ │ ├── index.ts
│ │ │ ├── styles/
│ │ │ │ ├── mixins/
│ │ │ │ │ ├── _focus.scss
│ │ │ │ │ ├── _index.scss
│ │ │ │ │ ├── _layout.scss
│ │ │ │ │ └── _typography.scss
│ │ │ │ └── tokens/
│ │ │ │ ├── border-radius.scss
│ │ │ │ ├── colors.scss
│ │ │ │ ├── index.scss
│ │ │ │ ├── spacing.scss
│ │ │ │ └── typography.scss
│ │ │ └── types/
│ │ │ ├── ElementContent.ts
│ │ │ ├── index.ts
│ │ │ ├── published-types.ts
│ │ │ └── withStaticProps.ts
│ │ └── tsconfig.json
│ ├── style/
│ │ ├── .babelrc.json
│ │ ├── .cursor/
│ │ │ └── rules/
│ │ │ └── color-token-management.mdc
│ │ ├── .prettierrc
│ │ ├── .stylelintignore
│ │ ├── .stylelintrc.json
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── plopfile.js
│ │ ├── scripts/
│ │ │ └── generate-colors.ts
│ │ ├── src/
│ │ │ ├── border-radius.scss
│ │ │ ├── borders.scss
│ │ │ ├── common.scss
│ │ │ ├── files/
│ │ │ │ ├── colors.json
│ │ │ │ └── tokens.json
│ │ │ ├── functions/
│ │ │ │ ├── _camelize.scss
│ │ │ │ ├── _capitalize.scss
│ │ │ │ ├── _contain.scss
│ │ │ │ ├── _extract-rgb.scss
│ │ │ │ ├── _map-collect.scss
│ │ │ │ └── index.scss
│ │ │ ├── index.scss
│ │ │ ├── mixins/
│ │ │ │ ├── _common.scss
│ │ │ │ ├── _states.scss
│ │ │ │ ├── _typography.scss
│ │ │ │ └── index.scss
│ │ │ ├── motion.scss
│ │ │ ├── spacing.scss
│ │ │ ├── themes/
│ │ │ │ ├── black-theme.scss
│ │ │ │ ├── dark-theme.scss
│ │ │ │ ├── hacker-theme.scss
│ │ │ │ ├── index.scss
│ │ │ │ └── light-theme.scss
│ │ │ └── typography.scss
│ │ ├── stylelint-config/
│ │ │ ├── index.js
│ │ │ └── rules/
│ │ │ ├── use-defined-css-var-when-available/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── fixtures/
│ │ │ │ │ │ ├── contains-values-with-multiple-replacements.scss
│ │ │ │ │ │ └── contains-values-with-single-replacement.scss
│ │ │ │ │ ├── index.test.js
│ │ │ │ │ └── props-to-allowed-vars.test.js
│ │ │ │ ├── index.js
│ │ │ │ ├── parse-monday-css.js
│ │ │ │ └── props-to-allowed-vars.js
│ │ │ └── use-new-spacing-tokens/
│ │ │ ├── __tests__/
│ │ │ │ └── index.test.js
│ │ │ └── index.js
│ │ ├── tsconfig.json
│ │ └── types/
│ │ └── styles.d.ts
│ └── testkit/
│ ├── .eslintrc.js
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── __tests__/
│ │ ├── Button.test.ts
│ │ ├── ButtonGroup.test.ts
│ │ ├── Checkbox.test.ts
│ │ ├── ColorPicker.test.ts
│ │ ├── Combobox.test.ts
│ │ ├── Dropdown.test.ts
│ │ ├── EditableHeading.test.ts
│ │ ├── EditableText.test.ts
│ │ ├── ExpandCollapse.test.ts
│ │ ├── IconButton.test.ts
│ │ ├── Link.test.ts
│ │ ├── List.test.ts
│ │ ├── ListItem.test.ts
│ │ ├── Loader.test.ts
│ │ ├── Menu.test.ts
│ │ ├── MenuButton.test.ts
│ │ ├── MenuItem.test.ts
│ │ ├── Modal.test.ts
│ │ ├── RadioButton.test.ts
│ │ ├── Search.test.ts
│ │ ├── SplitButton.test.ts
│ │ ├── Steps.test.ts
│ │ ├── TabList.test.ts
│ │ ├── Text.test.ts
│ │ ├── TextArea.test.ts
│ │ ├── TextField.test.ts
│ │ ├── Toast.test.ts
│ │ ├── Toggle.test.ts
│ │ └── utils/
│ │ └── url-helper.js
│ ├── components/
│ │ ├── BaseElement.ts
│ │ ├── Button.ts
│ │ ├── ButtonGroup.ts
│ │ ├── Checkbox.ts
│ │ ├── ColorPicker.ts
│ │ ├── Combobox.ts
│ │ ├── Dropdown.ts
│ │ ├── EditableHeading.ts
│ │ ├── EditableText.ts
│ │ ├── ExpandCollapse.ts
│ │ ├── IconButton.ts
│ │ ├── Link.ts
│ │ ├── List.ts
│ │ ├── ListItem.ts
│ │ ├── Loader.ts
│ │ ├── Menu.ts
│ │ ├── MenuButton.ts
│ │ ├── MenuItem.ts
│ │ ├── Modal.ts
│ │ ├── RadioButton.ts
│ │ ├── Search.ts
│ │ ├── SplitButton.ts
│ │ ├── Steps.ts
│ │ ├── Tab.ts
│ │ ├── TabList.ts
│ │ ├── Text.ts
│ │ ├── TextArea.ts
│ │ ├── TextField.ts
│ │ ├── Toast.ts
│ │ ├── Toggle.ts
│ │ └── index.ts
│ ├── index.ts
│ ├── package.json
│ ├── playwright.config.ts
│ ├── scripts/
│ │ └── run-changed-tests.js
│ ├── tsconfig.esm.json
│ ├── tsconfig.json
│ └── utils/
│ ├── common-actions.ts
│ ├── enums.ts
│ └── types.ts
└── scripts/
├── build-dependencies.sh
├── bundle-check/
│ ├── compare-bundles.js
│ └── generate-size-limit-config.js
└── performance/
├── aggregate-metrics.js
└── compare-metrics.js
Showing preview only (260K chars total). Download the full file or copy to clipboard to get everything.
SYMBOL INDEX (2188 symbols across 1105 files)
FILE: .cursor/templates/package-separation/vitest.setup.mjs
class ResizeObserver (line 6) | class ResizeObserver {
method observe (line 7) | observe() {}
method unobserve (line 8) | unobserve() {}
method disconnect (line 9) | disconnect() {}
FILE: packages/base/src/BaseInput/BaseInput.types.ts
type InputSize (line 4) | type InputSize = (typeof BASE_SIZES)[keyof typeof BASE_SIZES];
type BaseInputNativeInputProps (line 5) | type BaseInputNativeInputProps = Omit<InputHTMLAttributes<HTMLInputEleme...
type Renderer (line 6) | type Renderer = ReactNode | ReactNode[];
type BaseInputProps (line 8) | interface BaseInputProps extends BaseInputNativeInputProps, VibeComponen...
FILE: packages/base/src/BaseInput/__tests__/BaseInput.test.tsx
function renderBaseInput (line 8) | function renderBaseInput(props?: Partial<BaseInputProps>) {
FILE: packages/base/vitest.setup.mjs
class ResizeObserver (line 6) | class ResizeObserver {
method observe (line 7) | observe() {}
method unobserve (line 8) | unobserve() {}
method disconnect (line 9) | disconnect() {}
FILE: packages/codemod/bin/vibe-codemod.ts
function runWizard (line 55) | async function runWizard() {
function printReport (line 81) | function printReport(successCount: number, failureCount: number, errorsC...
function main (line 97) | async function main() {
function checkIfPackageExists (line 290) | function checkIfPackageExists(packageName: string): boolean {
FILE: packages/codemod/src/consts/vibe-import-paths.ts
constant CORE_IMPORT_PATH (line 1) | const CORE_IMPORT_PATH = "monday-ui-react-core";
constant CORE_NEXT_IMPORT_PATH (line 2) | const CORE_NEXT_IMPORT_PATH = "monday-ui-react-core/next";
constant NEW_CORE_IMPORT_PATH (line 4) | const NEW_CORE_IMPORT_PATH = "@vibe/core";
constant NEW_ICONS_IMPORT_PATH (line 5) | const NEW_ICONS_IMPORT_PATH = "@vibe/icons";
FILE: packages/codemod/src/utils/__tests__/prop-utils.test.ts
function getElementPath (line 11) | function getElementPath(source: string): ASTPath<JSXElement> {
FILE: packages/codemod/src/utils/component-jsx-utils.ts
function findComponentElements (line 6) | function findComponentElements(root: Collection, componentName: string):...
function updateComponentName (line 13) | function updateComponentName(j: JSCodeshift, elementPath: ASTPath<JSXEle...
FILE: packages/codemod/src/utils/import-utils.ts
function getImports (line 7) | function getImports(root: Collection, path: string): Collection<ImportDe...
function getCoreImportsForFile (line 18) | function getCoreImportsForFile(root: Collection, path = CORE_IMPORT_PATH...
function getCoreNextImportsForFile (line 25) | function getCoreNextImportsForFile(root: Collection): Collection<ImportD...
function findImportsThatIncludesSpecifier (line 29) | function findImportsThatIncludesSpecifier(
function updateImportSpecifierName (line 43) | function updateImportSpecifierName(
function removeSpecifierFromImport (line 65) | function removeSpecifierFromImport(j: JSCodeshift, path: ASTPath<ImportD...
function extractSpecifiersFromImport (line 78) | function extractSpecifiersFromImport(j: JSCodeshift, path: ASTPath<Impor...
function getComponentNameOrAliasFromImports (line 93) | function getComponentNameOrAliasFromImports(
function renameImportPath (line 110) | function renameImportPath(path: ASTPath<ImportDeclaration>, newPathName:...
FILE: packages/codemod/src/utils/prop-utils.ts
function updatePropName (line 16) | function updatePropName(
function isPropExists (line 33) | function isPropExists(j: JSCodeshift, elementPath: ASTPath<JSXElement>, ...
function findProps (line 42) | function findProps(j: JSCodeshift, elementPath: ASTPath<JSXElement>, ......
function removeProp (line 60) | function removeProp(j: JSCodeshift, elementPath: ASTPath<JSXElement>, .....
function getPropValue (line 67) | function getPropValue(j: JSCodeshift, prop: JSXAttribute) {
function setPropValue (line 100) | function setPropValue(
function addNewProp (line 122) | function addNewProp(
function propsValueMatch (line 139) | function propsValueMatch(j: JSCodeshift, propsCollection: Collection<JSX...
function migratePropsNames (line 151) | function migratePropsNames(
function updatePropValues (line 177) | function updatePropValues(
function updateStaticPropKeys (line 200) | function updateStaticPropKeys(
function updateComponentNamespaceProps (line 225) | function updateComponentNamespaceProps(
FILE: packages/codemod/src/utils/report-utils.ts
function logPropMigrationError (line 5) | function logPropMigrationError(
FILE: packages/codemod/src/utils/wrap-transformation.ts
function wrapTransformation (line 4) | function wrapTransformation(transform: (context: TransformationContext) ...
FILE: packages/codemod/transformations/core/v2-to-v3/AttentionBox-component-migration.ts
function transform (line 13) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/Avatar-component-migration.ts
function transform (line 14) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/AvatarGroup-component-migration.ts
function transform (line 13) | function transform({ j, root }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/Box-component-migration.ts
function transform (line 13) | function transform({ j, root }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/BreadcrumbItem-component-migration.ts
function transform (line 13) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/Button-component-migration.ts
function transform (line 13) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/ButtonGroup-component-migration.ts
function transform (line 13) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/Checkbox-component-migration.ts
function transform (line 13) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/Chips-component-migration.ts
function transform (line 17) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/Clickable-component-migration.ts
function transform (line 13) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/ColorPicker-component-migration.ts
function transform (line 13) | function transform({ j, root }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/ColorPickerContent-component-migration.ts
function transform (line 13) | function transform({ j, root }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/Counter-component-migration.ts
function transform (line 13) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/Dialog-component-migration.ts
function transform (line 13) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/DialogContent-container-component-migration.ts
function transform (line 13) | function transform({ j, root }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/Divider-component-migration.ts
function transform (line 13) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/Dropdown-component-migration.ts
function transform (line 15) | function transform({ j, root }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/Icon-component-migration.ts
function transform (line 16) | function transform({ j, root }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/IconButton-component-migration.ts
function transform (line 13) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/InputField-component-import-migration.ts
function transform (line 20) | function transform({ j, root }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/Label-component-migration.ts
function transform (line 14) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/Link-component-migration.ts
function transform (line 15) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/Loader-component-migration.ts
function transform (line 13) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/Menu-component-migration.ts
function transform (line 13) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/MenuButton-component-migration.ts
function transform (line 14) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/MenuDivider-component-migration.ts
function transform (line 13) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/MenuItem-component-migration.ts
function transform (line 13) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/MenuItemButton-component-migration.ts
function transform (line 13) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/MenuTitle-component-migration.ts
function transform (line 13) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/Modal-component-migration.ts
function transform (line 13) | function transform({ j, root }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/ModalHeader-component-migration.ts
function transform (line 13) | function transform({ j, root }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/RadioButton-component-migration.ts
function transform (line 13) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/Search-component-import-migration.ts
function transform (line 20) | function transform({ j, root }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/Steps-component-migration.ts
function transform (line 17) | function transform({ j, root }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/TabList-component-migration.ts
function transform (line 13) | function transform({ j, root }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/TabPanels-component-migration.ts
function transform (line 13) | function transform({ j, root }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/TextField-component-migration.ts
function transform (line 17) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/ThemeProvider-component-migration.ts
function transform (line 13) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/Tipseen-component-migration.ts
function transform (line 13) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/TipseenContent-component-migration.ts
function transform (line 14) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/Toggle-component-migration.ts
function transform (line 14) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/Tooltip-component-migration.ts
function transform (line 13) | function transform({ j, root }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/AttentionBox-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/Avatar-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/AvatarGroup-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/Box-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/BreadcrumbItem-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/Button-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/ButtonGroup-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/Checkbox-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/Chips-component-migration.test.ts
function prependImport (line 5) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/Clickable-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/ColorPicker-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/ColorPickerContent-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/Counter-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/Dialog-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/DialogContent-container-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/Divider-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/Dropdown-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/Icon-component-migration.test.ts
function prependImport (line 5) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/IconButton-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/Label-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/Link-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/Loader-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/Menu-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/MenuButton-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/MenuDivider-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/MenuItem-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/MenuItemButton-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/MenuTitle-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/Modal-component-migration.test.ts
function prependImport (line 5) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/ModalHeader-component-migration.test.ts
function prependImport (line 5) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/RadioButton-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/Steps-component-migration.test.ts
function prependImport (line 5) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/TabList-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/TabPanels-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/TextField-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/ThemeProvider-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/Tipseen-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/TipseenContent-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/Toggle-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/Tooltip-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/__tests__/useClickableProps-hook-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/enums/Enums-migration.ts
function transform (line 11) | function transform({ j, root }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/enums/__tests__/Enums-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v2-to-v3/next-imports-migration.ts
function transform (line 8) | function transform({ root }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/packages-rename-migration.ts
function transform (line 13) | function transform({ root }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/type-imports-migration.ts
function transform (line 8) | function transform({ root }: TransformationContext) {
FILE: packages/codemod/transformations/core/v2-to-v3/useClickableProps-hook-migration.ts
function transform (line 7) | function transform({ j, root }: TransformationContext) {
FILE: packages/codemod/transformations/core/v3-to-v4/Chips-component-migration.ts
function transform (line 15) | function transform({ j, root }: TransformationContext) {
FILE: packages/codemod/transformations/core/v3-to-v4/Dialog-component-migration.ts
function transform (line 16) | function transform({ j, root }: TransformationContext) {
FILE: packages/codemod/transformations/core/v3-to-v4/Flex-component-migration.ts
function transform (line 20) | function transform({ j, root }: TransformationContext) {
FILE: packages/codemod/transformations/core/v3-to-v4/Icon-component-migration.ts
function transform (line 17) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v3-to-v4/LinearProgressBar-component-migration.ts
function transform (line 11) | function transform({ j, root }: TransformationContext) {
FILE: packages/codemod/transformations/core/v3-to-v4/TextField-component-migration.ts
function transform (line 19) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v3-to-v4/TextWithHighlight-component-migration.ts
function transform (line 18) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v3-to-v4/TipseenImage-component-migration.ts
function transform (line 20) | function transform({ j, root }: TransformationContext) {
FILE: packages/codemod/transformations/core/v3-to-v4/Toggle-component-migration.ts
function transform (line 16) | function transform({ j, root }: TransformationContext) {
FILE: packages/codemod/transformations/core/v3-to-v4/VirtualizedList-component-migration.ts
function transform (line 16) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v3-to-v4/__tests__/Chips-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v3-to-v4/__tests__/Dialog-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v3-to-v4/__tests__/Icon-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v3-to-v4/__tests__/LinearProgressBar-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string, importName = "LinearProgressBar")...
FILE: packages/codemod/transformations/core/v3-to-v4/__tests__/TextField-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v3-to-v4/__tests__/Toggle-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v3-to-v4/__tests__/VirtualizedList-component-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v3-to-v4/__tests__/aria-props-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
function prependLinkImport (line 11) | function prependLinkImport(source: string): string {
function prependMultiImport (line 18) | function prependMultiImport(source: string): string {
FILE: packages/codemod/transformations/core/v3-to-v4/__tests__/enums-migration.test.ts
function prependImport (line 4) | function prependImport(source: string): string {
FILE: packages/codemod/transformations/core/v3-to-v4/aria-props-migration.ts
constant ARIA_PROPS_MAPPING (line 11) | const ARIA_PROPS_MAPPING: Record<string, string> = {
constant LINK_ARIA_PROPS_MAPPING (line 24) | const LINK_ARIA_PROPS_MAPPING: Record<string, string> = {
constant COMPONENTS_WITH_ARIA_PROPS (line 29) | const COMPONENTS_WITH_ARIA_PROPS = [
function transform (line 58) | function transform({ j, root, filePath }: TransformationContext) {
FILE: packages/codemod/transformations/core/v3-to-v4/enums-migration.ts
function transform (line 11) | function transform({ j, root }: TransformationContext) {
FILE: packages/codemod/transformations/core/v3-to-v4/next-imports-migration.ts
constant NEXT_ONLY_COMPONENTS (line 6) | const NEXT_ONLY_COMPONENTS = ["List"];
function transform (line 14) | function transform({ j, root }: TransformationContext) {
FILE: packages/codemod/transformations/core/v3-to-v4/packages-rename-migration.ts
constant OLD_STYLE_IMPORT_PATH (line 5) | const OLD_STYLE_IMPORT_PATH = "monday-ui-style";
constant NEW_STYLE_IMPORT_PATH (line 6) | const NEW_STYLE_IMPORT_PATH = "@vibe/style";
function transform (line 11) | function transform({ root }: TransformationContext) {
FILE: packages/codemod/types/transformation-context.types.ts
type TransformationContext (line 3) | type TransformationContext = {
FILE: packages/codemod/vitest.config.ts
method onConsoleLog (line 13) | onConsoleLog(log) {
FILE: packages/components/button/src/Button/Button.tsx
type ButtonProps (line 15) | interface ButtonProps extends VibeComponentProps {
FILE: packages/components/button/src/Button/Button.types.ts
type ButtonType (line 1) | type ButtonType = "primary" | "secondary" | "tertiary";
type ButtonInputType (line 3) | type ButtonInputType = "button" | "submit" | "reset";
type ButtonColor (line 5) | type ButtonColor =
type ButtonSize (line 16) | type ButtonSize = "xxs" | "xs" | "small" | "medium" | "large";
FILE: packages/components/button/src/Button/__tests__/Button.snapshot.test.tsx
constant BUTTON_COLORS (line 9) | const BUTTON_COLORS: ButtonColor[] = [
constant BUTTON_KINDS (line 21) | const BUTTON_KINDS: ButtonType[] = ["primary", "secondary", "tertiary"];
FILE: packages/components/button/src/Button/helper/dom-helpers.ts
constant TRANSPARENT_COLOR (line 1) | const TRANSPARENT_COLOR = "rgba(0, 0, 0, 0)";
function getParentBackgroundColorNotTransparent (line 3) | function getParentBackgroundColorNotTransparent(element: HTMLElement, de...
FILE: packages/components/button/src/Button/helper/useButtonLoading.ts
function useButtonLoading (line 3) | function useButtonLoading({ isLoading }: { isLoading: boolean }): { load...
FILE: packages/components/button/vitest.setup.mjs
class ResizeObserver (line 6) | class ResizeObserver {
method observe (line 7) | observe() {}
method unobserve (line 8) | unobserve() {}
method disconnect (line 9) | disconnect() {}
FILE: packages/components/clickable/src/Clickable/Clickable.tsx
type ClickableProps (line 8) | interface ClickableProps extends VibeComponentProps {
FILE: packages/components/clickable/src/Clickable/ClickableWrapper.tsx
type ClickableWrapperProps (line 6) | interface ClickableWrapperProps extends VibeComponentProps {
FILE: packages/components/clickable/src/useClickableProps/useClickableProps.ts
function useClickableProps (line 9) | function useClickableProps(
FILE: packages/components/clickable/vitest.setup.mjs
class ResizeObserver (line 6) | class ResizeObserver {
method observe (line 7) | observe() {}
method unobserve (line 8) | unobserve() {}
method disconnect (line 9) | disconnect() {}
FILE: packages/components/dialog/src/Dialog/Dialog.tsx
function Dialog (line 32) | function Dialog({
FILE: packages/components/dialog/src/Dialog/Dialog.types.ts
type DialogType (line 6) | type DialogType = "modal" | "popover";
type DialogSize (line 8) | type DialogSize = "none" | "small" | "medium" | "large";
type DialogPosition (line 10) | type DialogPosition =
type DialogTriggerEvent (line 24) | type DialogTriggerEvent =
type DialogAnimationType (line 38) | type DialogAnimationType = "opacity-and-slide" | "expand";
type DialogStartingEdge (line 40) | type DialogStartingEdge = "top" | "bottom";
type DialogOffset (line 42) | type DialogOffset = {
type DialogEvent (line 47) | type DialogEvent = React.MouseEvent | React.KeyboardEvent | KeyboardEven...
type DialogMiddleware (line 49) | type DialogMiddleware = Middleware;
type DialogPlacement (line 51) | type DialogPlacement = Placement;
type DialogProps (line 53) | interface DialogProps extends VibeComponentProps {
FILE: packages/components/dialog/src/Dialog/DialogConstants.ts
type DialogPlacement (line 1) | enum DialogPlacement {
FILE: packages/components/dialog/src/Dialog/__tests__/Dialog.test.tsx
function renderVisibleDialogOnMount (line 7) | function renderVisibleDialogOnMount(dialogProps: DialogProps) {
function renderDialogOnMount (line 11) | function renderDialogOnMount(dialogProps: DialogProps) {
FILE: packages/components/dialog/src/Dialog/components/DialogContent/DialogContent.tsx
constant EMPTY_OBJECT (line 34) | const EMPTY_OBJECT: CSSProperties = {};
constant ESCAPE_KEYS (line 35) | const ESCAPE_KEYS = [keyCodes.ESCAPE];
type DialogContentProps (line 37) | interface DialogContentProps extends VibeComponentProps {
FILE: packages/components/dialog/src/Dialog/components/Refable/Refable.tsx
type RefableProps (line 4) | interface RefableProps extends React.PropsWithChildren<HTMLProps<HTMLEle...
function getChainedFunction (line 57) | function getChainedFunction(
FILE: packages/components/dialog/src/DialogContentContainer/DialogContentContainer.tsx
type DialogContentContainerProps (line 8) | interface DialogContentContainerProps extends VibeComponentProps {
FILE: packages/components/dialog/vitest.setup.mjs
class ResizeObserver (line 6) | class ResizeObserver {
method observe (line 7) | observe() {}
method unobserve (line 8) | unobserve() {}
method disconnect (line 9) | disconnect() {}
FILE: packages/components/icon-button/src/IconButton/IconButton.tsx
type IconButtonProps (line 19) | interface IconButtonProps extends VibeComponentProps {
FILE: packages/components/icon-button/src/IconButton/services/IconButton-helpers.ts
type Size (line 11) | type Size = (typeof SIZES)[keyof typeof SIZES];
function getWidthHeight (line 13) | function getWidthHeight(size: Size) {
FILE: packages/components/icon-button/vitest.setup.mjs
class ResizeObserver (line 6) | class ResizeObserver {
method observe (line 7) | observe() {}
method unobserve (line 8) | unobserve() {}
method disconnect (line 9) | disconnect() {}
FILE: packages/components/icon/src/Icon/CustomSvgIcon/CustomSvgIcon.tsx
function modifySvgCode (line 12) | function modifySvgCode(svg: string, color = "currentColor") {
type CustomSvgIconProps (line 16) | interface CustomSvgIconProps extends VibeComponentProps {
FILE: packages/components/icon/src/Icon/FontIcon/FontIcon.tsx
type FontIconProps (line 6) | interface FontIconProps extends VibeComponentProps {
FILE: packages/components/icon/src/Icon/Icon.tsx
function renderIcon (line 9) | function renderIcon(Icon: React.FC<IconSubComponentProps>, props: IconSu...
type IconProps (line 20) | interface IconProps extends VibeComponentProps {
FILE: packages/components/icon/src/Icon/hooks/useIconProps.tsx
constant KEYS (line 8) | const KEYS = [keyCodes.ENTER, keyCodes.SPACE];
function useIconProps (line 10) | function useIconProps({
FILE: packages/components/icon/src/Icon/hooks/useIconScreenReaderAccessProps.ts
function getIconScreenReaderAccessProps (line 4) | function getIconScreenReaderAccessProps({
function useIconScreenReaderAccessProps (line 32) | function useIconScreenReaderAccessProps({
FILE: packages/components/icon/src/Icon/types.ts
type IconSubComponentProps (line 3) | interface IconSubComponentProps {
type SubIcon (line 30) | type SubIcon = string | React.FC<IconSubComponentProps> | null;
type IconType (line 31) | type IconType = "svg" | "font" | "src";
FILE: packages/components/layer/src/LayerProvider/LayerContext.ts
type LayersContextType (line 3) | interface LayersContextType {
FILE: packages/components/layer/src/LayerProvider/LayerProvider.tsx
type LayerProviderType (line 4) | interface LayerProviderType {
FILE: packages/components/layer/vitest.setup.mjs
class ResizeObserver (line 6) | class ResizeObserver {
method observe (line 7) | observe() {}
method unobserve (line 8) | unobserve() {}
method disconnect (line 9) | disconnect() {}
FILE: packages/components/layout/src/Box/Box.tsx
type BoxProps (line 23) | interface BoxProps extends VibeComponentProps {
FILE: packages/components/layout/src/Box/Box.types.ts
type BorderColor (line 1) | type BorderColor = "uiBorderColor" | "layoutBorderColor";
type BackgroundColor (line 3) | type BackgroundColor =
type BoxTextColor (line 10) | type BoxTextColor = "primaryTextColor" | "textColorOnInverted" | "second...
type BaseBoxSize (line 12) | type BaseBoxSize = "xs" | "small" | "medium" | "large" | "xl" | "xxl" | ...
type BoxSize (line 14) | type BoxSize = "auto" | BaseBoxSize;
type Shadow (line 16) | type Shadow = Extract<BaseBoxSize, "xs" | "small" | "medium" | "large">;
type RoundedSize (line 18) | type RoundedSize = "small" | "medium" | "big";
FILE: packages/components/layout/src/Flex/Flex.tsx
type FlexProps (line 9) | interface FlexProps extends VibeComponentProps {
FILE: packages/components/layout/src/Flex/Flex.types.ts
type FlexAlign (line 3) | type FlexAlign = "start" | "center" | "end" | "stretch" | "baseline" | "...
type FlexJustify (line 5) | type FlexJustify = "start" | "center" | "end" | "space-around" | "space-...
type FlexGap (line 7) | type FlexGap = "xs" | "small" | "medium" | "large";
type FlexDirection (line 9) | type FlexDirection = "row" | "column";
type FlexShorthand (line 11) | type FlexShorthand =
FILE: packages/components/layout/vitest.setup.mjs
class ResizeObserver (line 6) | class ResizeObserver {
method observe (line 7) | observe() {}
method unobserve (line 8) | unobserve() {}
method disconnect (line 9) | disconnect() {}
FILE: packages/components/loader/src/Loader/Loader.tsx
type LoaderProps (line 21) | interface LoaderProps extends VibeComponentProps {
FILE: packages/components/loader/src/Loader/Loader.types.ts
type LoaderColors (line 1) | type LoaderColors = "primary" | "secondary" | "onPrimary" | "dark";
type LoaderSizes (line 3) | type LoaderSizes = "xs" | "small" | "medium" | "large";
type LoaderSize (line 5) | type LoaderSize = LoaderSizes | number;
FILE: packages/components/loader/vitest.setup.mjs
class ResizeObserver (line 6) | class ResizeObserver {
method observe (line 7) | observe() {}
method unobserve (line 8) | unobserve() {}
method disconnect (line 9) | disconnect() {}
FILE: packages/components/tooltip/src/Tooltip/Tooltip.tsx
type TooltipProps (line 13) | type TooltipProps = TooltipBaseProps & (TooltipWithChildrenProps | Toolt...
type TooltipWithoutChildrenProps (line 15) | interface TooltipWithoutChildrenProps {
type TooltipWithChildrenProps (line 26) | interface TooltipWithChildrenProps {
type TooltipBaseProps (line 37) | interface TooltipBaseProps extends Omit<DialogProps, "position" | "conte...
constant IMMEDIATE_SHOW_THRESHOLD_MS (line 108) | const IMMEDIATE_SHOW_THRESHOLD_MS = 1500;
class Tooltip (line 116) | class Tooltip extends PureComponent<TooltipProps> {
method constructor (line 138) | constructor(props: TooltipProps) {
method renderTooltipContent (line 148) | renderTooltipContent() {
method onTooltipShow (line 190) | onTooltipShow() {
method onTooltipHide (line 199) | onTooltipHide() {
method getTimeSinceLastTooltip (line 209) | getTimeSinceLastTooltip() {
method getShowDelay (line 216) | getShowDelay() {
method render (line 232) | render() {
FILE: packages/components/tooltip/src/Tooltip/Tooltip.types.ts
type TooltipPositions (line 1) | type TooltipPositions = "top" | "right" | "bottom" | "left";
type TooltipTheme (line 3) | type TooltipTheme = "dark" | "primary";
FILE: packages/components/tooltip/vitest.setup.mjs
class ResizeObserver (line 6) | class ResizeObserver {
method observe (line 7) | observe() {}
method unobserve (line 8) | unobserve() {}
method disconnect (line 9) | disconnect() {}
FILE: packages/components/typography/src/Heading/Heading.tsx
constant OVERFLOW_TOLERANCE_IN_PX (line 11) | const OVERFLOW_TOLERANCE_IN_PX = 4;
type HeadingProps (line 13) | interface HeadingProps extends TypographyProps {
FILE: packages/components/typography/src/Heading/Heading.types.ts
type HeadingType (line 1) | type HeadingType = "h1" | "h2" | "h3";
type HeadingWeight (line 2) | type HeadingWeight = "bold" | "medium" | "normal" | "light";
FILE: packages/components/typography/src/Text/Text.tsx
type TextProps (line 9) | interface TextProps extends TypographyProps {
FILE: packages/components/typography/src/Text/Text.types.ts
type TextType (line 1) | type TextType = "text1" | "text2" | "text3";
type TextWeight (line 2) | type TextWeight = "bold" | "medium" | "normal";
FILE: packages/components/typography/src/Typography/Typography.tsx
type TypographyProps (line 16) | interface TypographyProps extends VibeComponentProps, HTMLAttributes<HTM...
FILE: packages/components/typography/src/Typography/Typography.types.ts
type TypographyColor (line 1) | type TypographyColor =
type TypographyAlign (line 11) | type TypographyAlign = "start" | "center" | "end" | "inherit";
FILE: packages/components/typography/src/Typography/TypographyContext.ts
type TypographyContext (line 3) | type TypographyContext = {
FILE: packages/components/typography/src/Typography/TypographyHooks.tsx
function useEllipsisClass (line 7) | function useEllipsisClass(ellipsis: boolean, maxLines = 1) {
function useTooltipProps (line 25) | function useTooltipProps(
FILE: packages/components/typography/vitest.setup.mjs
class ResizeObserver (line 6) | class ResizeObserver {
method observe (line 7) | observe() {}
method unobserve (line 8) | unobserve() {}
method disconnect (line 9) | disconnect() {}
FILE: packages/config/rollup.config.mjs
constant EXTENSIONS (line 14) | const EXTENSIONS = [".js", ".jsx", ".ts", ".tsx"];
constant ROOT_PATH (line 15) | const ROOT_PATH = process.cwd();
constant SRC_PATH (line 16) | const SRC_PATH = path.join(ROOT_PATH, "src");
constant DIST_PATH (line 17) | const DIST_PATH = path.join(ROOT_PATH, "dist");
function replaceDotWithUnderscore (line 23) | function replaceDotWithUnderscore(verNum) {
function getShortSha (line 27) | function getShortSha(content, length = 10) {
function loadPackageJson (line 31) | function loadPackageJson() {
function generateCssModulesScopedName (line 36) | function generateCssModulesScopedName(name, filename, css) {
function onwarn (line 44) | function onwarn(message, handler) {
FILE: packages/config/vitest.config.mjs
function generateVibeComponentAliases (line 10) | function generateVibeComponentAliases() {
FILE: packages/core/__mocks__/fileMock.cjs
method process (line 4) | process(src, filename) {
FILE: packages/core/babel.config.cjs
constant TESTING_STORYBOOK (line 1) | const TESTING_STORYBOOK = process.env.testing === "storybook";
FILE: packages/core/rollup.config.js
constant EXTENSIONS (line 15) | const EXTENSIONS = [".js", ".jsx", ".ts", ".tsx"];
constant ROOT_PATH (line 16) | const ROOT_PATH = path.join(__dirname);
constant SRC_PATH (line 17) | const SRC_PATH = path.join(ROOT_PATH, "src");
constant DIST_PATH (line 18) | const DIST_PATH = path.join(ROOT_PATH, "dist");
function replaceDotWithUnderscore (line 23) | function replaceDotWithUnderscore(verNum) {
function getShortSha (line 27) | function getShortSha(content, length = 10) {
function loadPackageJson (line 31) | function loadPackageJson() {
function generateCssModulesScopedName (line 36) | function generateCssModulesScopedName(name, filename, css) {
function onwarn (line 44) | function onwarn(message) {
function generateCssModulesMockName (line 52) | function generateCssModulesMockName(name) {
function getVibePackagesWithMockedClassNames (line 56) | function getVibePackagesWithMockedClassNames() {
method handler (line 111) | handler(source) {
FILE: packages/core/src/components/Accordion/Accordion/Accordion.tsx
constant COMPONENT_ID (line 8) | const COMPONENT_ID = "monday-accordion";
function defineChildId (line 10) | function defineChildId(index: number, props: { id: string }, accordionId...
type AccordionProps (line 20) | interface AccordionProps extends VibeComponentProps {
FILE: packages/core/src/components/Accordion/AccordionItem/AccordionItem.tsx
type AccordionItemProps (line 7) | interface AccordionItemProps extends VibeComponentProps {
FILE: packages/core/src/components/AlertBanner/AlertBanner.tsx
type ChildrenType (line 18) | type ChildrenType = ReactElement<AlertBannerButtonProps | AlertBannerLin...
type AlertBannerProps (line 20) | interface AlertBannerProps extends VibeComponentProps {
FILE: packages/core/src/components/AlertBanner/AlertBanner.types.ts
type AlertBannerBackgroundColor (line 1) | type AlertBannerBackgroundColor = "primary" | "positive" | "negative" | ...
FILE: packages/core/src/components/AlertBanner/AlertBannerButton/AlertBannerButton.tsx
type AlertBannerButtonProps (line 7) | interface AlertBannerButtonProps extends ButtonProps {
FILE: packages/core/src/components/AlertBanner/AlertBannerContext.ts
type AlertBannerContextType (line 4) | type AlertBannerContextType = {
FILE: packages/core/src/components/AlertBanner/AlertBannerLink/AlertBannerLink.tsx
type AlertBannerLinkProps (line 8) | interface AlertBannerLinkProps extends LinkProps {
FILE: packages/core/src/components/AlertBanner/AlertBannerText/AlertBannerText.tsx
type AlertBannerTextProps (line 10) | interface AlertBannerTextProps extends VibeComponentProps {
FILE: packages/core/src/components/AttentionBox/AttentionBox.types.ts
type AttentionBoxType (line 7) | type AttentionBoxType = "primary" | "positive" | "negative" | "warning" ...
type AttentionBoxContentProps (line 10) | type AttentionBoxContentProps =
type AttentionBoxLayoutSharedProps (line 27) | interface AttentionBoxLayoutSharedProps
type AttentionBoxCompactTitleProps (line 33) | type AttentionBoxCompactTitleProps =
type AttentionBoxRole (line 49) | type AttentionBoxRole = "alert" | "status";
type AttentionBoxProps (line 51) | type AttentionBoxProps = VibeComponentProps &
FILE: packages/core/src/components/AttentionBox/components/AttentionBoxButton/AttentionBoxButton.tsx
type AttentionBoxButtonProps (line 4) | interface AttentionBoxButtonProps extends Omit<ButtonProps, "size" | "ki...
FILE: packages/core/src/components/AttentionBox/components/AttentionBoxCloseButton/AttentionBoxCloseButton.tsx
type AttentionBoxCloseButtonProps (line 7) | interface AttentionBoxCloseButtonProps {
FILE: packages/core/src/components/AttentionBox/components/AttentionBoxLeadingIcon/AttentionBoxLeadingIcon.tsx
type AttentionBoxLeadingIconProps (line 6) | interface AttentionBoxLeadingIconProps {
FILE: packages/core/src/components/AttentionBox/components/AttentionBoxLink/AttentionBoxLink.tsx
type AttentionBoxLinkProps (line 7) | type AttentionBoxLinkProps = LinkProps;
FILE: packages/core/src/components/AttentionBox/consts/icons.ts
constant ATTENTION_BOX_DEFAULT_ICONS (line 5) | const ATTENTION_BOX_DEFAULT_ICONS: Record<AttentionBoxType, SubIcon> = {
FILE: packages/core/src/components/AttentionBox/layouts/AttentionBoxCompact/AttentionBoxCompact.tsx
type AttentionBoxCompactProps (line 11) | type AttentionBoxCompactProps = AttentionBoxLayoutSharedProps;
FILE: packages/core/src/components/AttentionBox/layouts/AttentionBoxDefault/AttentionBoxDefault.tsx
type AttentionBoxDefaultProps (line 12) | type AttentionBoxDefaultProps = AttentionBoxLayoutSharedProps & Pick<Att...
FILE: packages/core/src/components/Avatar/Avatar.tsx
type AvatarProps (line 18) | interface AvatarProps extends VibeComponentProps {
FILE: packages/core/src/components/Avatar/Avatar.types.ts
type AvatarType (line 1) | type AvatarType = "img" | "icon" | "text";
type AvatarSize (line 3) | type AvatarSize = "xs" | "small" | "medium" | "large";
FILE: packages/core/src/components/Avatar/AvatarBadge.tsx
type AvatarBadgeProps (line 13) | interface AvatarBadgeProps extends VibeComponentProps {
FILE: packages/core/src/components/Avatar/AvatarContent.tsx
type AvatarContentProps (line 11) | interface AvatarContentProps extends VibeComponentProps {
FILE: packages/core/src/components/Avatar/__tests__/Avatar.snapshot.test.tsx
constant IMG_SRC (line 12) | const IMG_SRC =
constant BADGE_SRC (line 14) | const BADGE_SRC = "https://cdn7.monday.com/images/working-status/wfh.svg";
FILE: packages/core/src/components/AvatarGroup/AvatarGroup.tsx
type AvatarGroupProps (line 13) | interface AvatarGroupProps extends VibeComponentProps {
FILE: packages/core/src/components/AvatarGroup/AvatarGroup.types.ts
type AvatarGroupCounterVisualProps (line 3) | type AvatarGroupCounterVisualProps = {
FILE: packages/core/src/components/AvatarGroup/AvatarGroupConstants.ts
constant AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY (line 1) | const AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY = 200;
constant AVATAR_GROUP_COUNTER_AVATAR_SIZE (line 2) | const AVATAR_GROUP_COUNTER_AVATAR_SIZE = 22;
FILE: packages/core/src/components/AvatarGroup/AvatarGroupCounter.tsx
type AvatarGroupCounterProps (line 18) | interface AvatarGroupCounterProps extends VibeComponentProps {
FILE: packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipContainer.tsx
type AvatarGroupCounterTooltipContainerProps (line 10) | interface AvatarGroupCounterTooltipContainerProps extends VibeComponentP...
FILE: packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipContent.tsx
type AvatarGroupCounterTooltipContentProps (line 11) | interface AvatarGroupCounterTooltipContentProps extends VibeComponentPro...
FILE: packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipContentVirtualizedList.tsx
constant LIST_OPTIONS (line 9) | const LIST_OPTIONS = Object.freeze({
type AvatarItem (line 15) | type AvatarItem = {
type AvatarGroupCounterTooltipContentVirtualizedListProps (line 19) | interface AvatarGroupCounterTooltipContentVirtualizedListProps extends V...
FILE: packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipHelper.tsx
constant TAB (line 14) | const TAB = [keyCodes.TAB];
constant ESC (line 15) | const ESC = [keyCodes.ESCAPE];
function useTooltipContentTabNavigation (line 17) | function useTooltipContentTabNavigation({
FILE: packages/core/src/components/Badge/Badge.tsx
type BadgeBaseProps (line 16) | interface BadgeBaseProps extends VibeComponentProps {
type CounterBadgeProps (line 31) | interface CounterBadgeProps extends CounterProps {
type IndicatorBadgeProps (line 38) | interface IndicatorBadgeProps extends IndicatorProps {
type BadgeProps (line 45) | type BadgeProps = BadgeBaseProps & (CounterBadgeProps | IndicatorBadgePr...
FILE: packages/core/src/components/Badge/Badge.types.ts
type BadgeType (line 1) | type BadgeType = "indicator" | "counter";
type BadgeAnchor (line 3) | type BadgeAnchor = "top-start" | "top-end" | "bottom-start" | "bottom-end";
type BadgeAlignments (line 5) | type BadgeAlignments = "rectangular" | "outside" | "circular";
FILE: packages/core/src/components/Badge/Indicator/Indicator.tsx
type IndicatorProps (line 9) | interface IndicatorProps extends VibeComponentProps {
FILE: packages/core/src/components/Badge/Indicator/Indicator.types.ts
type IndicatorColor (line 1) | type IndicatorColor = "primary" | "notification";
FILE: packages/core/src/components/BaseItem/BaseItem.types.ts
type BaseItemSizes (line 8) | type BaseItemSizes = "small" | "medium" | "large";
type BaseItemDirection (line 9) | type BaseItemDirection = "ltr" | "rtl" | "auto";
type BaseItemProps (line 11) | interface BaseItemProps<Item extends Record<string, unknown>>
type BaseItemData (line 60) | type BaseItemData<Item = Record<string, unknown>> = Item & {
type SideElement (line 95) | type SideElement =
type StartElement (line 102) | type StartElement = Extract<SideElement, { type: "avatar" | "icon" | "in...
type EndElement (line 104) | type EndElement = Extract<SideElement, { type: "icon" | "suffix" | "cust...
FILE: packages/core/src/components/BaseItem/__stories__/BaseItem.stories.tsx
type Story (line 7) | type Story = StoryObj<typeof BaseItem>;
FILE: packages/core/src/components/BaseItem/__tests__/BaseItem.test.tsx
function renderBaseItem (line 18) | function renderBaseItem(props?: Partial<BaseItemProps<Record<string, unk...
type CustomItemType (line 107) | type CustomItemType = {
type ExplicitType (line 155) | type ExplicitType = {
FILE: packages/core/src/components/BaseItem/hooks/useListItemProps.ts
type ListItemPropsInput (line 4) | type ListItemPropsInput<Item extends Record<string, unknown>> = Pick<
type ListItemPropsOutput (line 9) | interface ListItemPropsOutput {
function useListItemProps (line 26) | function useListItemProps<Item extends Record<string, unknown>>(
FILE: packages/core/src/components/BaseItem/utils.tsx
function renderSideElement (line 8) | function renderSideElement(
FILE: packages/core/src/components/BaseList/BaseList.types.ts
type BaseListElement (line 6) | type BaseListElement = "div" | "nav" | "ul" | "ol";
type BaseListSizes (line 8) | type BaseListSizes = BaseItemSizes;
type BaseListProps (line 10) | interface BaseListProps extends Omit<React.HTMLAttributes<HTMLElement>, ...
FILE: packages/core/src/components/BaseList/__tests__/BaseList.test.tsx
function renderBaseList (line 9) | function renderBaseList(props?: Partial<Omit<BaseListProps, "id">> & { i...
FILE: packages/core/src/components/BaseList/context/BaseListContext.tsx
type BaseListItemContextProps (line 5) | interface BaseListItemContextProps {
type BaseListContextProps (line 40) | interface BaseListContextProps {
type BaseListProviderProps (line 59) | interface BaseListProviderProps {
type BaseListItemProviderProps (line 64) | interface BaseListItemProviderProps {
FILE: packages/core/src/components/BaseList/hooks/useBaseListFocus.ts
type UseBaseListFocusProps (line 4) | interface UseBaseListFocusProps {
type UseBaseListFocusResult (line 23) | interface UseBaseListFocusResult {
FILE: packages/core/src/components/BaseList/hooks/useBaseListKeyboard.ts
type UseBaseListKeyboardProps (line 12) | interface UseBaseListKeyboardProps {
constant NAVIGATION_KEYS (line 39) | const NAVIGATION_KEYS: string[] = [
constant PAGE_JUMP_SIZE (line 48) | const PAGE_JUMP_SIZE = 10;
FILE: packages/core/src/components/BaseList/utils/baseListUtils.ts
constant VALID_ROLES (line 1) | const VALID_ROLES = ["option", "listitem", "menuitem", "tab", "treeitem"];
constant ROLE_MAPPING (line 3) | const ROLE_MAPPING: Record<string, string> = {
constant ELEMENT_MAPPING (line 27) | const ELEMENT_MAPPING: Record<string, string> = {
FILE: packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbContent/BreadcrumbContent.tsx
type BreadcrumbContentProps (line 8) | interface BreadcrumbContentProps extends VibeComponentProps {
FILE: packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbItem.tsx
type BreadcrumbItemProps (line 11) | interface BreadcrumbItemProps extends VibeComponentProps {
FILE: packages/core/src/components/BreadcrumbsBar/BreadcrumbMenu/BreadcrumbMenu.tsx
type BreadcrumbMenuProps (line 9) | interface BreadcrumbMenuProps extends VibeComponentProps {
FILE: packages/core/src/components/BreadcrumbsBar/BreadcrumbMenu/BreadcrumbMenuItem/BreadcrumbMenuItem.tsx
type BreadcrumbMenuItemProps (line 6) | interface BreadcrumbMenuItemProps extends MenuItemProps {
type BreadcrumbMenuItemComponent (line 11) | interface BreadcrumbMenuItemComponent
FILE: packages/core/src/components/BreadcrumbsBar/Breadcrumbs.types.ts
type BreadcrumbsBarType (line 1) | type BreadcrumbsBarType = "navigation" | "indication";
FILE: packages/core/src/components/BreadcrumbsBar/BreadcrumbsBar.tsx
type BreadcrumbBarProps (line 12) | interface BreadcrumbBarProps extends VibeComponentProps {
FILE: packages/core/src/components/ButtonGroup/ButtonGroup.tsx
type ButtonGroupOption (line 18) | type ButtonGroupOption = {
type ButtonGroupProps (line 29) | interface ButtonGroupProps extends VibeComponentProps {
FILE: packages/core/src/components/ButtonGroup/ButtonGroupConstants.ts
type ButtonValue (line 1) | type ButtonValue = string | number;
FILE: packages/core/src/components/ButtonGroup/ButtonWrapper.tsx
type ButtonWrapperProps (line 9) | interface ButtonWrapperProps extends ButtonProps {
FILE: packages/core/src/components/Checkbox/Checkbox.tsx
type CheckBoxProps (line 14) | interface CheckBoxProps extends VibeComponentProps {
FILE: packages/core/src/components/Checkbox/__tests__/Checkbox.test.tsx
function createCheckboxesVariables (line 14) | function createCheckboxesVariables() {
type RenderHelper (line 29) | type RenderHelper = {
function renderCheckboxes (line 47) | function renderCheckboxes({
function testUnselectFirstOption (line 80) | function testUnselectFirstOption(
FILE: packages/core/src/components/Checkbox/hooks/useSupportFirefoxLabelClick.tsx
function useSupportFirefoxLabelClick (line 5) | function useSupportFirefoxLabelClick({ inputRef }: { inputRef: React.Ref...
FILE: packages/core/src/components/Chips/Chips.tsx
constant CHIPS_AVATAR_SIZE (line 20) | const CHIPS_AVATAR_SIZE = 18;
type ChipsProps (line 22) | interface ChipsProps extends VibeComponentProps {
FILE: packages/core/src/components/ColorPicker/ColorPicker.tsx
type ColorPickerProps (line 24) | interface ColorPickerProps extends VibeComponentProps {
FILE: packages/core/src/components/ColorPicker/ColorPicker.types.ts
type ColorShapes (line 3) | type ColorShapes = "square" | "circle";
type ColorPickerSizes (line 5) | type ColorPickerSizes = "small" | "medium" | "large";
type ColorPickerValueOnly (line 7) | type ColorPickerValueOnly = CONTENT_COLORS_VALUES | string;
type ColorPickerArrayValueOnly (line 8) | type ColorPickerArrayValueOnly = CONTENT_COLORS_VALUES[] | string[];
type ColorPickerValue (line 9) | type ColorPickerValue = ColorPickerValueOnly | ColorPickerArrayValueOnly;
FILE: packages/core/src/components/ColorPicker/ColorPickerConstants.ts
constant DEFAULT_NUMBER_OF_COLORS_IN_LINE (line 3) | const DEFAULT_NUMBER_OF_COLORS_IN_LINE = 5;
constant COLOR_SIZES (line 5) | const COLOR_SIZES: Record<BaseSizes, number> = {
constant COLOR_PADDING (line 11) | const COLOR_PADDING = 8;
constant DIALOG_WIDTH_PADDING (line 12) | const DIALOG_WIDTH_PADDING = 24;
FILE: packages/core/src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.tsx
type ColorPickerClearButtonProps (line 9) | interface ColorPickerClearButtonProps extends VibeComponentProps {
FILE: packages/core/src/components/ColorPicker/components/ColorPickerContent/ColorPickerColorsGrid.tsx
type ColorPickerColorsGridProps (line 41) | interface ColorPickerColorsGridProps extends VibeComponentProps {
FILE: packages/core/src/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.tsx
type ColorPickerContentProps (line 25) | interface ColorPickerContentProps extends VibeComponentProps {
FILE: packages/core/src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.tsx
type ColorPickerItemComponentProps (line 18) | interface ColorPickerItemComponentProps extends VibeComponentProps {
FILE: packages/core/src/components/Combobox/Combobox.tsx
type ComboboxProps (line 32) | interface ComboboxProps extends VibeComponentProps {
function getAddNewLabel (line 294) | function getAddNewLabel() {
function renderNoResults (line 301) | function renderNoResults() {
FILE: packages/core/src/components/Combobox/Combobox.types.ts
type ComboboxOptionIconType (line 1) | type ComboboxOptionIconType = "default" | "renderer";
type ComboboxSizes (line 3) | type ComboboxSizes = "small" | "medium" | "large";
FILE: packages/core/src/components/Combobox/ComboboxHelpers/ComboboxHelpers.tsx
constant DIVIDER_HEIGHT (line 22) | const DIVIDER_HEIGHT = 17;
constant CATEGORY_HEIGHT (line 23) | const CATEGORY_HEIGHT = 32;
function useItemsData (line 25) | function useItemsData({
function useKeyboardNavigation (line 98) | function useKeyboardNavigation({
function createDividerItemObject (line 130) | function createDividerItemObject({ categoryId }: { categoryId: string })...
function createCategoryItemObject (line 134) | function createCategoryItemObject({
function createOptionItemObject (line 155) | function createOptionItemObject({
function comboboxItemRenderer (line 189) | function comboboxItemRenderer({
function dividerItemRenderer (line 240) | function dividerItemRenderer({ id, height }: { id: string; height: numbe...
function categoryItemRenderer (line 248) | function categoryItemRenderer({
function optionItemRenderer (line 260) | function optionItemRenderer({
FILE: packages/core/src/components/Combobox/ComboboxService.ts
type OptionsByCategories (line 3) | type OptionsByCategories = {
FILE: packages/core/src/components/Combobox/__tests__/Combobox.test.tsx
function clickValueCheckCallback (line 6) | function clickValueCheckCallback(getByLabelText, onClickMock, labelText,...
FILE: packages/core/src/components/Combobox/__tests__/ComboboxService.test.ts
constant OPTIONS (line 4) | const OPTIONS = [
constant CATEGORIES (line 9) | const CATEGORIES = {
constant EMPTY_FILTER_VALUE (line 14) | const EMPTY_FILTER_VALUE = "";
FILE: packages/core/src/components/Combobox/components/ComboboxCategory/ComboboxCategory.tsx
type ComboboxCategoryProps (line 7) | interface ComboboxCategoryProps {
FILE: packages/core/src/components/Combobox/components/ComboboxConstants.ts
constant COMBOBOX_DIVIDER_ITEM (line 5) | const COMBOBOX_DIVIDER_ITEM = "combobox-divider";
constant COMBOBOX_CATEGORY_ITEM (line 6) | const COMBOBOX_CATEGORY_ITEM = "combobox-category";
constant COMBOBOX_OPTION_ITEM (line 7) | const COMBOBOX_OPTION_ITEM = "combobox-option";
constant COMBOBOX_LISTBOX_ID (line 8) | const COMBOBOX_LISTBOX_ID = "combobox-listbox";
type ComboboxOptionIconType (line 13) | enum ComboboxOptionIconType {
type IComboboxCategoryMap (line 18) | interface IComboboxCategoryMap {
type IComboboxCategory (line 25) | interface IComboboxCategory {
type IComboboxOption (line 48) | interface IComboboxOption {
type IComboboxItem (line 108) | interface IComboboxItem {
type IComboboxOptionEvents (line 167) | interface IComboboxOptionEvents {
type IOptionItemRendererArgs (line 191) | interface IOptionItemRendererArgs extends IComboboxOptionEvents {
FILE: packages/core/src/components/Combobox/components/ComboboxItems/ComboboxItems.tsx
type ComboboxItemsProps (line 15) | interface ComboboxItemsProps extends IComboboxOptionEvents {
FILE: packages/core/src/components/Combobox/components/ComboboxOption/ComboboxOption.tsx
type ComboboxOptionProps (line 13) | interface ComboboxOptionProps extends IComboboxOptionEvents {
FILE: packages/core/src/components/Combobox/helpers.ts
function getOptionId (line 1) | function getOptionId(id: string, index: number) {
FILE: packages/core/src/components/Counter/Counter.tsx
type CounterProps (line 15) | interface CounterProps extends VibeComponentProps {
FILE: packages/core/src/components/Counter/Counter.types.ts
type CounterType (line 1) | type CounterType = "fill" | "line";
type CounterColor (line 3) | type CounterColor = "primary" | "dark" | "negative" | "light";
type CounterSize (line 5) | type CounterSize = "xs" | "small" | "large";
FILE: packages/core/src/components/DatePicker/DatePicker.tsx
constant DEFAULT_TIME (line 21) | const DEFAULT_TIME = { hours: 9, minutes: 0 };
constant MODIFIERS_CLASS_NAMES (line 23) | const MODIFIERS_CLASS_NAMES = {
FILE: packages/core/src/components/DatePicker/DatePicker.types.ts
type DatePickerBaseProps (line 4) | interface DatePickerBaseProps extends VibeComponentProps {
type DatePickerSingleProps (line 23) | interface DatePickerSingleProps extends DatePickerBaseProps {
type DatePickerRange (line 28) | type DatePickerRange = {
type DatePickerRangeProps (line 33) | interface DatePickerRangeProps extends DatePickerBaseProps {
type DatePickerProps (line 38) | type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
FILE: packages/core/src/components/DatePicker/DatePickerHeader.tsx
type DatePickerHeaderProps (line 12) | interface DatePickerHeaderProps {
function getYearButtonLabel (line 127) | function getYearButtonLabel(displayMonth: Date, locale: Locale) {
function getMonthButtonLabel (line 131) | function getMonthButtonLabel(displayMonth: Date, locale: Locale) {
FILE: packages/core/src/components/DatePicker/datePickerHooks.tsx
type DatePickerDropdownItem (line 4) | interface DatePickerDropdownItem {
constant YEARS_AGO (line 23) | const YEARS_AGO = 100;
constant YEARS_IN_FUTURE (line 24) | const YEARS_IN_FUTURE = 100;
FILE: packages/core/src/components/DatePicker/utils.ts
type Intent (line 4) | type Intent = "to" | "from";
function addToRange (line 6) | function addToRange(day: Date, { from, to }: DateRange, intent: Intent):...
type GetDateNextStateResult (line 96) | type GetDateNextStateResult =
function addToRangeNextState (line 103) | function addToRangeNextState(
function addToRangeModifiers (line 146) | function addToRangeModifiers(dayToAdd: Date, range: DateRange, intent: I...
FILE: packages/core/src/components/Divider/Divider.tsx
type DividerProps (line 10) | interface DividerProps extends VibeComponentProps {
FILE: packages/core/src/components/Divider/Divider.types.ts
type DividerDirection (line 1) | type DividerDirection = "vertical" | "horizontal";
FILE: packages/core/src/components/Dropdown/Dropdown.tsx
function isMultiType (line 48) | function isMultiType(dropdownProps: BaseDropdownProps<any>): dropdownPro...
function isSingleType (line 52) | function isSingleType(dropdownProps: BaseDropdownProps<any>): dropdownPr...
FILE: packages/core/src/components/Dropdown/Dropdown.types.ts
type DropdownOption (line 7) | type DropdownOption<Item = Record<string, unknown>> = BaseItemData<Item>;
type DropdownGroupOption (line 8) | type DropdownGroupOption<Item = Record<string, unknown>> = DropdownListG...
type MultiSelectSpecifics (line 10) | interface MultiSelectSpecifics<Item extends BaseItemData<Record<string, ...
type SingleSelectSpecifics (line 45) | interface SingleSelectSpecifics<Item extends BaseItemData<Record<string,...
type BoxModeConstraint (line 80) | type BoxModeConstraint =
type BaseDropdownProps (line 102) | type BaseDropdownProps<Item extends BaseItemData<Record<string, unknown>...
type DropdownSizes (line 272) | type DropdownSizes = "small" | "medium" | "large";
type DropdownDirection (line 274) | type DropdownDirection = "ltr" | "rtl" | "auto";
type DropdownMultiControllerProps (line 276) | type DropdownMultiControllerProps<Item extends BaseItemData<Record<strin...
type DropdownSingleControllerProps (line 285) | type DropdownSingleControllerProps<Item extends BaseItemData<Record<stri...
FILE: packages/core/src/components/Dropdown/__tests__/BaseList.test.tsx
function renderBaseList (line 7) | function renderBaseList(props?: Partial<DropdownBaseListProps<any>>) {
type ExplicitType (line 157) | type ExplicitType = Record<string, unknown> & {
type ComplexType (line 204) | type ComplexType = Record<string, unknown> & {
FILE: packages/core/src/components/Dropdown/__tests__/Dropdown.test.tsx
function renderDropdown (line 26) | function renderDropdown<T extends BaseItemData<Record<string, unknown>>>...
type SimpleOptionType (line 754) | type SimpleOptionType = BaseItemData<{
type InlineType (line 780) | interface InlineType extends Record<string, unknown> {
type InlineItemType (line 785) | type InlineItemType = BaseItemData<InlineType>;
type RenderedType (line 862) | interface RenderedType extends Record<string, unknown> {
type RenderedItemType (line 867) | type RenderedItemType = BaseItemData<RenderedType>;
type FilterTestOptionType (line 912) | type FilterTestOptionType = BaseItemData<{
FILE: packages/core/src/components/Dropdown/components/DropdownBase/DropdownBase.tsx
type DropdownBaseProps (line 12) | interface DropdownBaseProps {
FILE: packages/core/src/components/Dropdown/components/DropdownBaseList/DropdownBaseList.types.ts
type DropdownBaseListProps (line 6) | interface DropdownBaseListProps<Item = Record<string, unknown>>
type DropdownListGroup (line 80) | interface DropdownListGroup<Item = Record<string, unknown>> {
FILE: packages/core/src/components/Dropdown/components/DropdownWrapperUI.tsx
type DropdownWrapperUIProps (line 9) | interface DropdownWrapperUIProps<Item extends BaseItemData<Record<string...
FILE: packages/core/src/components/Dropdown/components/MultiSelectedValues/MultiSelectedValues.tsx
constant INPUT_DEDUCTED_WIDTH (line 11) | const INPUT_DEDUCTED_WIDTH = 48;
type MultiSelectedValuesProps (line 13) | type MultiSelectedValuesProps<Item> = {
function MultiSelectedValues (line 22) | function MultiSelectedValues<Item extends BaseItemData<Record<string, un...
FILE: packages/core/src/components/Dropdown/components/Trigger/DropdownChip.tsx
type DropdownChipProps (line 38) | interface DropdownChipProps<Item extends BaseItemData<Record<string, unk...
FILE: packages/core/src/components/Dropdown/context/DropdownContext.ts
type PropGetter (line 8) | type PropGetter = (options?: any) => Record<string, any>;
type ItemPropGetter (line 9) | type ItemPropGetter<Item> = (options: { item: Item; index: number }) => ...
type DropdownContextValue (line 11) | interface DropdownContextValue<Item extends BaseItemData<Record<string, ...
function useDropdownContext (line 63) | function useDropdownContext<Item extends BaseItemData<Record<string, unk...
FILE: packages/core/src/components/Dropdown/context/DropdownContext.types.ts
type PropGetter (line 6) | type PropGetter = (options?: any) => Record<string, any>;
type ItemPropGetter (line 7) | type ItemPropGetter<Item> = (options: { item: Item; index: number }) => ...
type InheritedDropdownProps (line 9) | type InheritedDropdownProps<Item extends BaseItemData<Record<string, unk...
type DropdownContextProps (line 54) | interface DropdownContextProps<Item extends BaseItemData<Record<string, ...
FILE: packages/core/src/components/Dropdown/hooks/useDropdownCombobox.ts
function useDropdownCombobox (line 7) | function useDropdownCombobox<T extends BaseItemData<Record<string, unkno...
FILE: packages/core/src/components/Dropdown/hooks/useDropdownFiltering.ts
function useDropdownFiltering (line 7) | function useDropdownFiltering<Item extends BaseItemData>(
FILE: packages/core/src/components/Dropdown/hooks/useDropdownMultiCombobox.ts
function useDropdownMultiCombobox (line 7) | function useDropdownMultiCombobox<T extends BaseItemData<Record<string, ...
FILE: packages/core/src/components/Dropdown/hooks/useDropdownMultiSelect.ts
function useDropdownMultiSelect (line 7) | function useDropdownMultiSelect<T extends BaseItemData<Record<string, un...
FILE: packages/core/src/components/Dropdown/hooks/useDropdownSelect.ts
function useDropdownSelect (line 7) | function useDropdownSelect<T extends BaseItemData<Record<string, unknown...
FILE: packages/core/src/components/Dropdown/utils/dropdownUtils.ts
function normalizeOptions (line 4) | function normalizeOptions<Item extends BaseItemData>(
FILE: packages/core/src/components/EditableHeading/EditableHeading.tsx
type EditableHeadingProps (line 13) | interface EditableHeadingProps extends VibeComponentProps, EditableTypog...
FILE: packages/core/src/components/EditableText/EditableText.tsx
type EditableTextProps (line 13) | interface EditableTextProps extends VibeComponentProps, EditableTypograp...
FILE: packages/core/src/components/EditableTypography/EditableTypography.tsx
type EditableTypographyImplementationProps (line 13) | interface EditableTypographyImplementationProps {
type EditableTypographyProps (line 60) | interface EditableTypographyProps extends VibeComponentProps, EditableTy...
constant PADDING_OFFSET (line 87) | const PADDING_OFFSET = 2;
function onTypographyClick (line 136) | function onTypographyClick(event: React.KeyboardEvent | React.MouseEvent) {
function toggleEditMode (line 141) | function toggleEditMode(event: React.KeyboardEvent | React.MouseEvent) {
function handleEditModeChange (line 149) | function handleEditModeChange(value: boolean) {
function handleInputValueChange (line 154) | function handleInputValueChange() {
function handleBlur (line 170) | function handleBlur() {
function handleKeyDown (line 174) | function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement | HTM...
function handleChange (line 198) | function handleChange(event: React.ChangeEvent<HTMLInputElement | HTMLTe...
function focus (line 204) | function focus() {
function selectAllInputText (line 214) | function selectAllInputText() {
FILE: packages/core/src/components/EmptyState/EmptyState.tsx
function renderMainAction (line 73) | function renderMainAction(mainAction: EmptyStateProps["mainAction"], isC...
function renderSupportingAction (line 85) | function renderSupportingAction(supportingAction: EmptyStateProps["suppo...
FILE: packages/core/src/components/EmptyState/EmptyState.types.ts
type EmptyStateLayout (line 6) | type EmptyStateLayout = "default" | "compact";
type EmptyStateProps (line 8) | interface EmptyStateProps extends VibeComponentProps {
FILE: packages/core/src/components/ExpandCollapse/ExpandCollapse.tsx
type ExpandCollapseProps (line 13) | interface ExpandCollapseProps extends VibeComponentProps {
FILE: packages/core/src/components/ExpandCollapse/ExpandCollapse.types.ts
type ExpandCollapseIconPosition (line 1) | type ExpandCollapseIconPosition = "left" | "right";
FILE: packages/core/src/components/FieldLabel/FieldLabel.tsx
type FieldLabelProps (line 7) | interface FieldLabelProps extends VibeComponentProps {
FILE: packages/core/src/components/FormattedNumber/FormattedNumber.tsx
type FormattedNumberProps (line 9) | interface FormattedNumberProps extends VibeComponentProps {
FILE: packages/core/src/components/GridKeyboardNavigationContext/GridKeyboardNavigationContextConstants.ts
type GridElementRef (line 4) | type GridElementRef = MutableRefObject<HTMLElement> & { current?: HTMLEl...
type DirectionMap (line 5) | type DirectionMap = Map<GridElementRef, GridElementRef>;
type DirectionMaps (line 6) | type DirectionMaps = Record<NavDirections, DirectionMap>;
type Position (line 8) | type Position = VerticalPosition & HorizontalPosition;
type VerticalPosition (line 10) | type VerticalPosition = {
type HorizontalPosition (line 15) | type HorizontalPosition = {
type GridKeyboardNavigationContextType (line 20) | interface GridKeyboardNavigationContextType {
FILE: packages/core/src/components/GridKeyboardNavigationContext/__tests__/GridKeyboardNavigationContext.test.tsx
function renderHookForTest (line 115) | function renderHookForTest(positions, disabled = false) {
function renderHookWithContext (line 120) | function renderHookWithContext(positions, contextValue) {
function focusWrapperElement (line 128) | function focusWrapperElement() {
function createElementRef (line 135) | function createElementRef(id) {
FILE: packages/core/src/components/GridKeyboardNavigationContext/helper.ts
function throwIfCausingCircularDependency (line 9) | function throwIfCausingCircularDependency(directionMaps: DirectionMaps, ...
function getLastFocusableElementFromElementInDirection (line 108) | function getLastFocusableElementFromElementInDirection(directionMap: Dir...
FILE: packages/core/src/components/HiddenText/HiddenText.tsx
type HiddenTextProps (line 8) | interface HiddenTextProps extends VibeComponentProps {
FILE: packages/core/src/components/Info/Info.types.ts
type InfoProps (line 5) | type InfoProps = BaseInfoProps & VibeComponentProps & InfoAriaLabelProps;
type BaseInfoProps (line 7) | interface BaseInfoProps {
type InfoAriaLabelProps (line 51) | type InfoAriaLabelProps =
FILE: packages/core/src/components/Info/components/InfoDialogContent/InfoDialogContent.types.ts
type InfoDialogContentProps (line 4) | interface InfoDialogContentProps extends VibeComponentProps {
FILE: packages/core/src/components/Info/components/InfoLink/InfoLink.tsx
type InfoLinkProps (line 6) | type InfoLinkProps = LinkProps;
FILE: packages/core/src/components/InfoText/InfoText.types.ts
type InfoTextProps (line 1) | interface InfoTextProps {
FILE: packages/core/src/components/Label/Label.tsx
type LabelProps (line 19) | interface LabelProps extends VibeComponentProps {
FILE: packages/core/src/components/Label/Label.types.ts
type LabelSizes (line 3) | type LabelSizes = "small" | "medium";
type LabelKind (line 5) | type LabelKind = "fill" | "line";
type ContentColor (line 7) | type ContentColor = (typeof contentColors)[number];
type LabelColor (line 8) | type LabelColor = "primary" | "dark" | "negative" | "positive" | Content...
FILE: packages/core/src/components/Label/LabelCelebrationAnimation.tsx
constant DEFAULT_BORDER_RADIUS (line 6) | const DEFAULT_BORDER_RADIUS = 4;
constant DEFAULT_STROKE_WIDTH (line 7) | const DEFAULT_STROKE_WIDTH = 1;
type LabelCelebrationAnimationProps (line 9) | interface LabelCelebrationAnimationProps {
function LabelCelebrationAnimation (line 20) | function LabelCelebrationAnimation({ children, onAnimationEnd }: LabelCe...
function getPath (line 68) | function getPath({
function getPerimeter (line 92) | function getPerimeter({
FILE: packages/core/src/components/Link/Link.tsx
type LinkProps (line 13) | interface LinkProps extends VibeComponentProps {
function getIcon (line 142) | function getIcon(shouldShow: boolean, icon: string | React.FunctionCompo...
FILE: packages/core/src/components/Link/Link.types.ts
type LinkTarget (line 1) | type LinkTarget = "_blank" | "_self" | "_parent" | "_top";
type LinkIconPosition (line 3) | type LinkIconPosition = "start" | "end";
type LinkColor (line 5) | type LinkColor = "primary" | "onPrimary" | "onInverted";
FILE: packages/core/src/components/Link/LinkConsts.ts
type LinkTarget (line 4) | enum LinkTarget {
type IconPosition (line 14) | enum IconPosition {
FILE: packages/core/src/components/List/List.tsx
type ListProps (line 36) | interface ListProps extends VibeComponentProps {
FILE: packages/core/src/components/List/List.types.ts
type ListElement (line 1) | type ListElement = "div" | "nav" | "ul" | "ol";
FILE: packages/core/src/components/List/VirtualizedListItems/VirtualizedListItems.tsx
constant ITEM_CHILDREN_TYPES (line 10) | const ITEM_CHILDREN_TYPES = {
constant LIST_TITLE_HEIGHT (line 15) | const LIST_TITLE_HEIGHT = 48;
constant LIST_ITEM_HEIGHT (line 16) | const LIST_ITEM_HEIGHT = 32;
type VirtualizedListItemsProps (line 18) | interface VirtualizedListItemsProps extends VibeComponentProps {
FILE: packages/core/src/components/List/utils/ListContext.ts
type ListContextType (line 4) | type ListContextType = {
FILE: packages/core/src/components/List/utils/ListUtils.ts
constant VALID_ROLES (line 11) | const VALID_ROLES = ["option", "listitem", "menuitem", "tab", "treeitem"];
FILE: packages/core/src/components/ListItem/ListItem.tsx
type ListItemProps (line 24) | interface ListItemProps extends VibeComponentProps {
FILE: packages/core/src/components/ListItem/ListItem.types.ts
type ListItemElement (line 3) | type ListItemElement = "div" | "li" | "a";
type ListItemSize (line 5) | type ListItemSize = (typeof SIZES)[keyof typeof SIZES];
FILE: packages/core/src/components/ListItemAvatar/ListItemAvatar.tsx
type ListItemAvatarProps (line 9) | interface ListItemAvatarProps extends VibeComponentProps {
FILE: packages/core/src/components/ListItemIcon/ListItemIcon.tsx
constant LIST_ITEM_ICON_SIZE (line 11) | const LIST_ITEM_ICON_SIZE = 18;
type ListItemIconProps (line 13) | interface ListItemIconProps extends VibeComponentProps {
FILE: packages/core/src/components/ListItemIcon/ListItemIcon.types.ts
type ListItemIconMargin (line 1) | type ListItemIconMargin = "start" | "end";
FILE: packages/core/src/components/ListTitle/ListTitle.tsx
type ListTitleProps (line 8) | interface ListTitleProps extends VibeComponentProps {
FILE: packages/core/src/components/Menu/Menu/Menu.tsx
type MenuProps (line 25) | interface MenuProps extends VibeComponentProps {
FILE: packages/core/src/components/Menu/Menu/MenuConstants.ts
type CloseMenuOption (line 3) | type CloseMenuOption = {
type MenuChild (line 7) | type MenuChild = ReactElement & {
FILE: packages/core/src/components/Menu/Menu/hooks/__tests__/useAdjacentSelectableMenuIndex.test.tsx
function renderHookForTest (line 124) | function renderHookForTest(children: React.ReactElement[]) {
FILE: packages/core/src/components/Menu/Menu/hooks/__tests__/useFocusOnMount.test.tsx
function renderHookWithProps (line 12) | function renderHookWithProps(props: Partial<UseFocusOnMountProps>) {
FILE: packages/core/src/components/Menu/Menu/hooks/__tests__/useLastNavigationDirection.test.tsx
function renderHookForTest (line 85) | function renderHookForTest() {
FILE: packages/core/src/components/Menu/Menu/hooks/useCloseMenuOnKeyEvent.tsx
constant KEYS (line 7) | const KEYS = [keyCodes.ESCAPE, keyCodes.LEFT_ARROW, keyCodes.TAB];
function useCloseMenuOnKeyEvent (line 9) | function useCloseMenuOnKeyEvent({
FILE: packages/core/src/components/Menu/Menu/hooks/useFocusOnMount.tsx
type UseFocusOnMountProps (line 5) | interface UseFocusOnMountProps {
FILE: packages/core/src/components/Menu/Menu/hooks/useLastNavigationDirection.tsx
constant NAVIGATION_KEYS (line 12) | const NAVIGATION_KEYS = [...ARROW_UP_KEYS, ...ARROW_RIGHT_KEYS, ...ARROW...
FILE: packages/core/src/components/Menu/Menu/hooks/useMenuKeyboardNavigation.tsx
function useMenuKeyboardNavigation (line 13) | function useMenuKeyboardNavigation({
FILE: packages/core/src/components/Menu/Menu/hooks/useMouseLeave.tsx
function useMouseLeave (line 6) | function useMouseLeave({
FILE: packages/core/src/components/Menu/Menu/hooks/useOnCloseMenu.tsx
function useOnCloseMenu (line 4) | function useOnCloseMenu({
FILE: packages/core/src/components/Menu/Menu/hooks/useSubMenuIndex.tsx
function useSubMenuIndex (line 3) | function useSubMenuIndex() {
FILE: packages/core/src/components/Menu/Menu/utils/utils.ts
function isMenuChildSelectable (line 4) | function isMenuChildSelectable(child: MenuChild): boolean {
FILE: packages/core/src/components/Menu/MenuDivider/MenuDivider.tsx
type MenuDividerProps (line 8) | type MenuDividerProps = VibeComponentProps;
FILE: packages/core/src/components/Menu/MenuGridItem/MenuGridItem.tsx
type MenuGridItemProps (line 11) | interface MenuGridItemProps extends VibeComponentProps {
FILE: packages/core/src/components/Menu/MenuGridItem/__tests__/useFocusGridItemByActiveStatus.test.ts
function mockLastNavigationDirection (line 84) | function mockLastNavigationDirection(currentDirectionValue) {
FILE: packages/core/src/components/Menu/MenuGridItem/__tests__/useMenuGridItemNavContext.test.ts
function renderHookForTest (line 82) | function renderHookForTest({
FILE: packages/core/src/components/Menu/MenuItem/AvatarMenuItem.tsx
type AvatarMenuItemProps (line 6) | interface AvatarMenuItemProps extends VibeComponentProps {
FILE: packages/core/src/components/Menu/MenuItem/MenuItem.tsx
type MenuItemProps (line 15) | interface MenuItemProps extends VibeComponentProps {
type MenuItemTitleComponentProps (line 171) | interface MenuItemTitleComponentProps extends Omit<MenuItemProps, "title...
FILE: packages/core/src/components/Menu/MenuItem/MenuItem.types.ts
type SubmenuPosition (line 1) | type SubmenuPosition = "right" | "left";
FILE: packages/core/src/components/Menu/MenuItem/MenuItemConstants.ts
constant TAB_INDEX_FOCUS_WITH_JS_ONLY (line 1) | const TAB_INDEX_FOCUS_WITH_JS_ONLY = -1;
FILE: packages/core/src/components/Menu/MenuItem/components/BaseMenuItem/BaseMenuItem.types.ts
type LossMenuItemProps (line 6) | type LossMenuItemProps = Omit<
type BaseMenuItemProps (line 26) | interface BaseMenuItemProps extends LossMenuItemProps, VibeComponentProps {
FILE: packages/core/src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.types.ts
type MenuItemIconProps (line 3) | interface MenuItemIconProps {
FILE: packages/core/src/components/Menu/MenuItem/components/MenuItemIcon/__tests__/MenuItemIcon.test.tsx
function renderMenuItemIcon (line 8) | function renderMenuItemIcon(props: Partial<MenuItemIconProps> = {}) {
FILE: packages/core/src/components/Menu/MenuItem/components/MenuItemSubMenu/MenuItemSubMenu.tsx
constant DEFAULT_FALLBACK_PLACEMENTS (line 8) | const DEFAULT_FALLBACK_PLACEMENTS: Placement[] = ["right-end", "left-sta...
FILE: packages/core/src/components/Menu/MenuItem/components/MenuItemSubMenu/MenuItemSubMenu.types.ts
type MenuItemSubMenuProps (line 6) | interface MenuItemSubMenuProps extends Pick<MenuItemProps, "autoAdjustOn...
FILE: packages/core/src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.types.ts
type SplitMenuItemSubMenuIconProps (line 1) | interface SplitMenuItemSubMenuIconProps {
type SimpleMenuItemSubMenuIconProps (line 17) | interface SimpleMenuItemSubMenuIconProps {
type MenuItemSubMenuIconProps (line 33) | type MenuItemSubMenuIconProps = SimpleMenuItemSubMenuIconProps | SplitMe...
FILE: packages/core/src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/__tests__/MenuItemSubMenuIcon.test.tsx
function renderMenuItemSubMenuIcon (line 8) | function renderMenuItemSubMenuIcon(props: Partial<MenuItemSubMenuIconPro...
FILE: packages/core/src/components/Menu/MenuItem/hooks/useMenuItemKeyboardEvents.ts
constant KEYS (line 7) | const KEYS = [keyCodes.ENTER, keyCodes.RIGHT_ARROW];
function useMenuItemKeyboardEvents (line 9) | function useMenuItemKeyboardEvents({
FILE: packages/core/src/components/Menu/MenuItem/hooks/useMenuItemMouseEvents.ts
function useMenuItemMouseEvents (line 6) | function useMenuItemMouseEvents({
FILE: packages/core/src/components/Menu/MenuItemButton/MenuItemButton.tsx
type MenuItemButtonProps (line 15) | interface MenuItemButtonProps extends VibeComponentProps {
FILE: packages/core/src/components/Menu/MenuTitle/MenuTitle.tsx
type MenuTitleProps (line 11) | interface MenuTitleProps extends VibeComponentProps {
FILE: packages/core/src/components/Menu/MenuTitle/MenuTitle.type.ts
type MenuTitleCaptionPosition (line 1) | type MenuTitleCaptionPosition = "top" | "bottom" | "center";
FILE: packages/core/src/components/MenuButton/MenuButton.tsx
constant MOVE_BY (line 27) | const MOVE_BY = { main: 8, secondary: 0 };
constant CLOSE_KEYS (line 28) | const CLOSE_KEYS: DialogTriggerEvent[] = ["esckey", "tab"];
type MenuButtonProps (line 30) | interface MenuButtonProps extends VibeComponentProps {
FILE: packages/core/src/components/MenuButton/MenuButton.types.ts
type MenuButtonSize (line 1) | type MenuButtonSize = "xxs" | "xs" | "small" | "medium" | "large";
type MenuButtonComponentPosition (line 3) | type MenuButtonComponentPosition = "start" | "end";
FILE: packages/core/src/components/Modal/Modal/Modal.types.tsx
type ModalSize (line 7) | type ModalSize = "small" | "medium" | "large" | "full-view";
type ModalCloseEvent (line 9) | type ModalCloseEvent =
type ModalProps (line 13) | interface ModalProps extends VibeComponentProps {
FILE: packages/core/src/components/Modal/ModalContent/ModalContent.types.ts
type ModalContentProps (line 4) | interface ModalContentProps extends VibeComponentProps {
FILE: packages/core/src/components/Modal/ModalHeader/ModalHeader.types.ts
type WithoutDescription (line 5) | interface WithoutDescription {
type WithDescription (line 10) | interface WithDescription {
type ModalHeaderProps (line 32) | type ModalHeaderProps = {
FILE: packages/core/src/components/Modal/ModalMedia/ModalMedia.types.ts
type ModalMediaProps (line 4) | interface ModalMediaProps extends VibeComponentProps {
FILE: packages/core/src/components/Modal/ModalTopActions/ModalTopActions.types.ts
type ModalTopActionsTheme (line 6) | type ModalTopActionsTheme = "light" | "dark";
type ModalTopActionsButtonColor (line 7) | type ModalTopActionsButtonColor = Extract<ButtonColor, "primary" | "fixe...
type ModalTopActionsProps (line 9) | interface ModalTopActionsProps {
FILE: packages/core/src/components/Modal/context/ModalContext.types.ts
type ModalContextProps (line 3) | type ModalContextProps = ModalProviderValue;
type ModalProviderValue (line 5) | type ModalProviderValue = {
type ModalProviderProps (line 25) | interface ModalProviderProps {
FILE: packages/core/src/components/Modal/footers/ModalFooter/ModalFooter.types.ts
type ModalFooterProps (line 4) | interface ModalFooterProps extends Omit<ModalFooterBaseProps, "renderAct...
FILE: packages/core/src/components/Modal/footers/ModalFooterBase/ModalFooterBase.types.ts
type ModalFooterActionProps (line 6) | interface ModalFooterActionProps extends Omit<ButtonProps, "children" | ...
type ModalFooterBaseProps (line 17) | interface ModalFooterBaseProps extends VibeComponentProps {
FILE: packages/core/src/components/Modal/footers/ModalFooterWizard/ModalFooterWizard.types.ts
type ModalFooterWizardProps (line 4) | interface ModalFooterWizardProps
FILE: packages/core/src/components/Modal/footers/utils/getPropsForButton.ts
function getPropsForButton (line 4) | function getPropsForButton(button?: ModalFooterActionProps, buttonClassN...
FILE: packages/core/src/components/Modal/hooks/useFocusEscapeTargets/useFocusEscapeTargets.types.ts
type FocusEscapeTarget (line 3) | type FocusEscapeTarget = string | HTMLElement | React.RefObject<HTMLElem...
FILE: packages/core/src/components/Modal/hooks/usePortalTarget/usePortalTarget.ts
function warn (line 43) | function warn(message: string): void {
FILE: packages/core/src/components/Modal/hooks/usePortalTarget/usePortalTarget.types.ts
type PortalTarget (line 3) | type PortalTarget = string | React.RefObject<Element> | Element | Docume...
FILE: packages/core/src/components/Modal/layouts/ModalBasicLayout/ModalBasicLayout.types.ts
type ModalBasicLayoutProps (line 4) | interface ModalBasicLayoutProps extends VibeComponentProps {
FILE: packages/core/src/components/Modal/layouts/ModalFooterShadow.types.ts
type ModalFooterShadowProps (line 1) | interface ModalFooterShadowProps {
FILE: packages/core/src/components/Modal/layouts/ModalLayoutScrollableContent.types.ts
type ModalLayoutScrollableContentProps (line 3) | interface ModalLayoutScrollableContentProps {
FILE: packages/core/src/components/Modal/layouts/ModalMediaLayout/ModalMediaLayout.types.ts
type ModalMediaLayoutProps (line 4) | interface ModalMediaLayoutProps extends VibeComponentProps {
FILE: packages/core/src/components/Modal/layouts/ModalSideBySideLayout/ModalSideBySideLayout.types.ts
type ModalSideBySideLayoutProps (line 4) | interface ModalSideBySideLayoutProps extends VibeComponentProps {
FILE: packages/core/src/components/MultiStepIndicator/MultiStep.types.ts
type MultiStepType (line 1) | type MultiStepType = "primary" | "success" | "danger" | "dark";
type StepStatus (line 3) | type StepStatus = "pending" | "active" | "fulfilled";
type TextPlacement (line 5) | type TextPlacement = "horizontal" | "vertical";
type MultiStepSize (line 7) | type MultiStepSize = "regular" | "compact";
type Step (line 9) | type Step = {
FILE: packages/core/src/components/MultiStepIndicator/MultiStepIndicator.tsx
type MultiStepIndicatorProps (line 14) | interface MultiStepIndicatorProps extends VibeComponentProps {
FILE: packages/core/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.tsx
constant KEYS (line 22) | const KEYS = [keyCodes.ENTER, keyCodes.SPACE];
type StepCircleDisplayProps (line 24) | interface StepCircleDisplayProps {
type StepIndicatorProps (line 67) | interface StepIndicatorProps extends VibeComponentProps {
FILE: packages/core/src/components/NumberField/NumberField.types.ts
type NumberFieldNativeInputProps (line 6) | type NumberFieldNativeInputProps = Omit<
type NumberFieldBaseProps (line 27) | interface NumberFieldBaseProps extends NumberFieldNativeInputProps, Omit...
type NumberFieldValidityChangeProps (line 87) | type NumberFieldValidityChangeProps =
type NumberFieldProps (line 107) | type NumberFieldProps = NumberFieldBaseProps & FormElementProps & Number...
FILE: packages/core/src/components/NumberField/components/NumberFieldSpinButton/NumberFieldSpinButton.types.ts
type NumberFieldSpinButtonProps (line 1) | interface NumberFieldSpinButtonProps {
FILE: packages/core/src/components/NumberField/hooks/useNumberFieldState.ts
type UseNumberFieldStateProps (line 5) | type UseNumberFieldStateProps = Pick<
FILE: packages/core/src/components/NumberField/hooks/useSpinButtonHandlers.ts
type UseSpinButtonHandlersProps (line 5) | type UseSpinButtonHandlersProps = Pick<
FILE: packages/core/src/components/NumberField/utils/calcValue.ts
type CalculateSteppedValueProps (line 3) | type CalculateSteppedValueProps = Pick<NumberFieldProps, "value" | "step...
FILE: packages/core/src/components/ProgressBars/PercentageLabel/PercentageLabel.tsx
type PercentageLabelProps (line 4) | interface PercentageLabelProps {
FILE: packages/core/src/components/ProgressBars/ProgressBar/Bar/Bar.tsx
type BarType (line 11) | type BarType = "primary" | "secondary";
type BarProps (line 13) | interface BarProps extends VibeComponentProps {
FILE: packages/core/src/components/ProgressBars/ProgressBar/ProgressBar.tsx
type ProgressBarProps (line 13) | interface ProgressBarProps extends VibeComponentProps {
FILE: packages/core/src/components/ProgressBars/ProgressBar/ProgressBar.types.ts
type ProgressBarStyle (line 3) | type ProgressBarStyle = "primary" | "secondary" | "positive" | "negative...
type ProgressBarSize (line 5) | type ProgressBarSize = (typeof SIZES)[keyof typeof SIZES];
FILE: packages/core/src/components/ProgressBars/ProgressBar/ProgressBarHelpers.ts
type Size (line 5) | type Size = (typeof SIZES)[keyof typeof SIZES];
FILE: packages/core/src/components/RadioButton/RadioButton.tsx
type RadioButtonProps (line 12) | interface RadioButtonProps extends VibeComponentProps {
FILE: packages/core/src/components/Search/Search.types.ts
type SearchProps (line 8) | interface SearchProps extends VibeComponentProps {
FILE: packages/core/src/components/Search/__tests__/Search.test.tsx
function renderSearch (line 8) | function renderSearch(props?: Partial<SearchProps>) {
FILE: packages/core/src/components/Skeleton/Skeleton.tsx
type SkeletonProps (line 11) | interface SkeletonProps extends VibeComponentProps {
FILE: packages/core/src/components/Skeleton/SkeletonConstants.ts
constant SKELETON_CUSTOM_SIZE (line 2) | const SKELETON_CUSTOM_SIZE = "custom";
FILE: packages/core/src/components/Skeleton/Skelton.types.ts
type SkeletonType (line 1) | type SkeletonType = "circle" | "rectangle" | "text";
type TextSkeletonSize (line 3) | type TextSkeletonSize = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | ...
type SkeletonSizeType (line 5) | type SkeletonSizeType = TextSkeletonSize | "custom";
FILE: packages/core/src/components/SlideTransition/SlideTransition.types.ts
type SlideTransitionProps (line 4) | interface SlideTransitionProps extends VibeComponentProps {
type SlideDirection (line 22) | type SlideDirection = "forward" | "backward";
FILE: packages/core/src/components/Slider/SelectionIndicator.tsx
constant VALUE_UPDATE_DELAY (line 9) | const VALUE_UPDATE_DELAY = 300;
function getCurrentLabel (line 11) | function getCurrentLabel(isPostfix: boolean, ranged: boolean, value: num...
function parseValue (line 21) | function parseValue(valueText: string) {
type SelectionIndicatorProps (line 25) | interface SelectionIndicatorProps extends VibeComponentProps {
FILE: packages/core/src/components/Slider/Slider.tsx
type SliderProps (line 15) | type SliderProps = {
FILE: packages/core/src/components/Slider/Slider.types.ts
type SliderColor (line 5) | type SliderColor = "primary" | "negative" | "positive";
type SliderLabelColor (line 7) | type SliderLabelColor = Extract<TypographyColor, "primary" | "secondary">;
type SliderLabelPosition (line 9) | type SliderLabelPosition = Extract<DialogPosition, "top" | "bottom">;
type SliderSize (line 11) | type SliderSize = (typeof BASE_SIZES)[keyof typeof BASE_SIZES];
type InfixKind (line 13) | type InfixKind = "prefix" | "postfix";
FILE: packages/core/src/components/Slider/SliderBase/SliderBase.tsx
type SliderBaseProps (line 24) | type SliderBaseProps = VibeComponentProps;
function handleKeyDown (line 52) | function handleKeyDown(e: React.KeyboardEvent) {
FILE: packages/core/src/components/Slider/SliderBase/SliderFilledTrack.tsx
function defineFilledTrackProps (line 8) | function defineFilledTrackProps(dimension: number, offset: number, rever...
type SliderFilledTrackProps (line 21) | interface SliderFilledTrackProps extends VibeComponentProps {
FILE: packages/core/src/components/Slider/SliderBase/SliderRail.tsx
type SliderRailProps (line 10) | interface SliderRailProps extends VibeComponentProps {
function handleClick (line 28) | function handleClick(e: React.MouseEvent) {
FILE: packages/core/src/components/Slider/SliderBase/SliderThumb.tsx
type SliderThumbProps (line 13) | interface SliderThumbProps extends VibeComponentProps {
function handleBlur (line 55) | function handleBlur() {
function handleFocus (line 60) | function handleFocus() {
function handlePointerLeave (line 65) | function handlePointerLeave() {
function handlePointerDown (line 69) | function handlePointerDown(e: React.PointerEvent) {
function stopMove (line 76) | function stopMove() {
FILE: packages/core/src/components/Slider/SliderBase/SliderTrack.tsx
type SliderTrackProps (line 8) | interface SliderTrackProps extends VibeComponentProps {
FILE: packages/core/src/components/Slider/SliderConstants.ts
constant BEM_PREFIX (line 10) | const BEM_PREFIX = "monday";
constant COMPONENT_ID (line 12) | const COMPONENT_ID = "slider";
constant UPDATE_SLIDER_SIZE_DEBOUNCE (line 14) | const UPDATE_SLIDER_SIZE_DEBOUNCE = 200;
constant TOOLTIP_SHOW_DELAY (line 16) | const TOOLTIP_SHOW_DELAY = 300;
type SliderContextSelection (line 18) | type SliderContextSelection = {
type SliderContextUI (line 27) | type SliderContextUI = {
type SliderContextActions (line 42) | type SliderContextActions = {
type SliderContextInfix (line 52) | type SliderContextInfix = {
FILE: packages/core/src/components/Slider/SliderContext.tsx
type SliderProviderProps (line 18) | interface SliderProviderProps extends SliderProps {
function SliderProvider (line 49) | function SliderProvider({
function useSliderUi (line 153) | function useSliderUi(): SliderContextUI {
function useSliderInfix (line 157) | function useSliderInfix(): SliderContextInfix {
function useSliderSelection (line 161) | function useSliderSelection(): SliderContextSelection {
function useSliderActions (line 165) | function useSliderActions(): SliderContextActions {
FILE: packages/core/src/components/Slider/SliderHelpers.ts
function _calcDimension (line 1) | function _calcDimension(max: number, min: number, value: number): [numbe...
function _ensureSingleValueText (line 7) | function _ensureSingleValueText(valueText: string, value: number, format...
function _ensureStepModulo (line 20) | function _ensureStepModulo(pageStep: number, step: number) {
function calcDimensions (line 28) | function calcDimensions(max: number, min: number, ranged: boolean, value...
function calculatePageStep (line 39) | function calculatePageStep(max: number, min: number, step: number) {
function ensureDefaultValue (line 54) | function ensureDefaultValue(
function ensureValueText (line 75) | function ensureValueText(
function getNearest (line 89) | function getNearest(newValue: number, ranged: boolean, value: number | n...
function moveToPx (line 98) | function moveToPx(offsetInPx: number, min: number, max: number, railCoor...
FILE: packages/core/src/components/Slider/SliderHooks.ts
function _useIsStateControlledFromOutside (line 7) | function _useIsStateControlledFromOutside(value: number | number[]): boo...
function _useSliderValue (line 12) | function _useSliderValue(
function useSliderActionsContextValue (line 25) | function useSliderActionsContextValue(
function useDragging (line 168) | function useDragging(): [number, (value: number) => void, () => number] {
function useSliderRail (line 183) | function useSliderRail() {
function useSliderValues (line 209) | function useSliderValues(
FILE: packages/core/src/components/Slider/SliderInfix.tsx
type SliderInfixProps (line 9) | interface SliderInfixProps extends VibeComponentProps {
FILE: packages/core/src/components/Slider/SliderInfixHooks.tsx
function useSliderInfixComponent (line 13) | function useSliderInfixComponent(kind: InfixKind): [boolean, string[], R...
FILE: packages/core/src/components/Slider/__tests__/sliderTestUtils.tsx
constant SLIDER_LABEL (line 5) | const SLIDER_LABEL = "my-slider";
function renderSliderInNonRangeMode (line 7) | async function renderSliderInNonRangeMode(props = {}) {
function renderSliderInRangeMode (line 14) | async function renderSliderInRangeMode(props = {}) {
function renderSliderForSnapshots (line 23) | async function renderSliderForSnapshots(props, dataTestId = "monday-slid...
FILE: packages/core/src/components/SplitButton/SplitButton.tsx
type SplitButtonProps (line 38) | interface SplitButtonProps extends ButtonProps {
FILE: packages/core/src/components/SplitButton/SplitButtonConstants.ts
constant DIALOG_MOVE_BY (line 5) | const DIALOG_MOVE_BY = { main: 8, secondary: 0 };
constant DEFAULT_DIALOG_SHOW_TRIGGER (line 6) | const DEFAULT_DIALOG_SHOW_TRIGGER: DialogTriggerEvent[] = ["click"];
constant DEFAULT_DIALOG_HIDE_TRIGGER (line 7) | const DEFAULT_DIALOG_HIDE_TRIGGER: DialogTriggerEvent[] = ["clickoutside...
constant SECONDARY_BUTTON_WRAPPER_CLASSNAME (line 8) | const SECONDARY_BUTTON_WRAPPER_CLASSNAME = "monday-style-split-button__s...
constant EMPTY_ARR (line 9) | const EMPTY_ARR: string[] = [];
constant ENTER_KEYS (line 11) | const ENTER_KEYS = [keyCodes.ENTER];
type SplitButtonSecondaryContentPositionType (line 26) | type SplitButtonSecondaryContentPositionType =
constant SECONDARY_BUTTON_ARIA_LABEL (line 29) | const SECONDARY_BUTTON_ARIA_LABEL = "additional actions";
FILE: packages/core/src/components/SplitButton/SplitButtonMenu/SplitButtonMenu.tsx
type SplitButtonMenuProps (line 5) | type SplitButtonMenuProps = Omit<MenuProps, "focusItemIndexOnMount"> & {...
FILE: packages/core/src/components/SplitButton/__tests__/SplitButton.test.tsx
constant ENTER_KEY (line 26) | const ENTER_KEY = "{Enter}";
FILE: packages/core/src/components/Steps/Steps.tsx
type StepsProps (line 13) | interface StepsProps extends VibeComponentProps {
FILE: packages/core/src/components/Steps/Steps.types.ts
type StepsType (line 1) | type StepsType = "numbers" | "gallery";
type StepsDotAriaCurrent (line 3) | type StepsDotAriaCurrent = "page" | "step" | "location" | "date" | "time";
type StepsColor (line 5) | type StepsColor = "primary" | "on-primary-color" | "on-inverted-backgrou...
FILE: packages/core/src/components/Steps/StepsCommand.tsx
type StepsCommandProps (line 14) | interface StepsCommandProps extends VibeComponentProps {
FILE: packages/core/src/components/Steps/StepsConstants.ts
constant NEXT_TEXT (line 1) | const NEXT_TEXT = "Next";
constant BACK_TEXT (line 2) | const BACK_TEXT = "Back";
constant FINISH_TEXT (line 3) | const FINISH_TEXT = "Finish";
FILE: packages/core/src/components/Steps/StepsDot.tsx
type StepsDotProps (line 9) | interface StepsDotProps extends VibeComponentProps {
FILE: packages/core/src/components/Steps/StepsGalleryHeader.tsx
type StepsGalleryHeaderProps (line 9) | interface StepsGalleryHeaderProps extends VibeComponentProps {
FILE: packages/core/src/components/Steps/StepsHeader.tsx
type StepsHeaderProps (line 12) | interface StepsHeaderProps extends VibeComponentProps {
FILE: packages/core/src/components/Steps/StepsNumbersHeader.tsx
type StepsNumbersHeaderProps (line 8) | interface StepsNumbersHeaderProps extends VibeComponentProps {
FILE: packages/core/src/components/Switch/Switch.tsx
type SwitchProps (line 9) | interface SwitchProps extends VibeComponentProps {
FILE: packages/core/src/components/Switch/index.tsx
function useHiddenSwitch (line 6) | function useHiddenSwitch({
FILE: packages/core/src/components/Table/Table/Table.tsx
type TableLoadingStateType (line 27) | type TableLoadingStateType = "long-text" | "medium-text" | "circle" | "r...
type Width (line 29) | type Width = number | `${number}%` | `${number}px` | `${number}fr`;
type TableColumn (line 31) | interface TableColumn {
type TableProps (line 58) | interface TableProps extends VibeComponentProps {
FILE: packages/core/src/components/Table/Table/Table.types.ts
type RowSizes (line 1) | type RowSizes = "small" | "medium" | "large";
FILE: packages/core/src/components/Table/Table/TableConsts.ts
constant SKELETON_ROWS_AMOUNT (line 1) | const SKELETON_ROWS_AMOUNT = 5;
type RowSizes (line 6) | enum RowSizes {
FILE: packages/core/src/components/Table/Table/__tests__/Table.test.tsx
type TableNode (line 14) | interface TableNode {
function traverse (line 19) | function traverse(element: Element, acc: TableNode[] = []): TableNode[] {
FILE: packages/core/src/components/Table/Table/__tests__/tableTestUtils.tsx
function mockUseTable (line 9) | function mockUseTable() {
function mockUseTableRowMenu (line 32) | function mockUseTableRowMenu() {
FILE: packages/core/src/components/Table/Table/tableHelpers.ts
function generateWidth (line 8) | function generateWidth(width: TableColumn["width"]): string {
function getTableRowLayoutStyles (line 20) | function getTableRowLayoutStyles(columns: TableColumn[], style: React.CS...
function getSortIcon (line 28) | function getSortIcon(sortState: TableHeaderCellProps["sortState"]) {
function getNextSortState (line 38) | function getNextSortState(sortState: TableHeaderCellProps["sortState"]):...
function getAriaSort (line 48) | function getAriaSort(sortState: TableHeaderCellProps["sortState"]): Aria...
function getSkeletonType (line 58) | function getSkeletonType(loadingStateType: TableLoadingStateType): Skele...
function getLoadingTypeForCell (line 68) | function getLoadingTypeForCell(
FILE: packages/core/src/components/Table/TableBody/TableBody.tsx
type TableBodyProps (line 14) | interface TableBodyProps extends VibeComponentProps {
FILE: packages/core/src/components/Table/TableCell/TableCell.tsx
type TableCellProps (line 9) | interface TableCellProps extends VibeComponentProps {
FILE: packages/core/src/components/Table/TableCellSkeleton/TableCellSkeleton.tsx
type TableCellSkeletonProps (line 12) | interface TableCellSkeletonProps extends VibeComponentProps {
FILE: packages/core/src/components/Table/TableContainer/TableContainer.types.ts
type TableContainerProps (line 4) | interface TableContainerProps extends VibeComponentProps {
FILE: packages/core/src/components/Table/TableHeader/TableHeader.tsx
type TableHeaderProps (line 11) | interface TableHeaderProps extends VibeComponentProps {
FILE: packages/core/src/components/Table/TableHeaderCell/TableHeaderCell.tsx
type TableHeaderCellProps (line 16) | interface TableHeaderCellProps extends VibeComponentProps {
FILE: packages/core/src/components/Table/TableRow/TableRow.tsx
type TableRowProps (line 11) | interface TableRowProps extends VibeComponentProps {
FILE: packages/core/src/components/Table/TableRowMenu/TableRowMenu.types.ts
type TableMenuProps (line 4) | interface TableMenuProps extends VibeComponentProps {
FILE: packages/core/src/components/Table/TableVirtualizedBody/TableVirtualizedBody.tsx
type TableVirtualizedRow (line 15) | type TableVirtualizedRow = Record<string, unknown> & { id: string };
type TableVirtualizedBodyProps (line 17) | interface TableVirtualizedBodyProps<T extends TableVirtualizedRow = Tabl...
FILE: packages/core/src/components/Table/context/TableContainerContext/TableContainerContext.types.ts
type TableContainerContext (line 3) | type TableContainerContext = TableContainerProviderValue;
type TableContainerProviderValue (line 5) | interface TableContainerProviderValue {
type TableContainerProviderProps (line 9) | interface TableContainerProviderProps {
FILE: packages/core/src/components/Table/context/TableContext/TableContext.types.ts
type TableContext (line 5) | interface TableContext extends TableProviderValue {
type TableProviderForwardedProps (line 12) | interface TableProviderForwardedProps {
type TableProviderValue (line 20) | interface TableProviderValue extends TableProviderForwardedProps {
type TableProviderProps (line 28) | type TableProviderProps = {
FILE: packages/core/src/components/Table/context/TableRowMenuContext/TableRowMenuContext.types.ts
type TableRowMenuContext (line 3) | interface TableRowMenuContext extends Pick<TableRowMenuProviderValue, "r...
type TableRowMenuProviderValue (line 14) | interface TableRowMenuProviderValue {
type TableRowMenuProviderProps (line 23) | type TableRowMenuProviderProps = {
FILE: packages/core/src/components/Tabs/Tab/Tab.tsx
type TabProps (line 14) | interface TabProps extends VibeComponentProps {
function renderIconAndChildren (line 99) | function renderIconAndChildren() {
function handleKeyDown (line 122) | function handleKeyDown(event: React.KeyboardEvent) {
FILE: packages/core/src/components/Tabs/TabList/TabList.tsx
type TabListProps (line 23) | interface TabListProps extends VibeComponentProps {
FILE: packages/core/src/components/Tabs/TabPanel/TabPanel.tsx
type TabPanelProps (line 8) | interface TabPanelProps extends VibeComponentProps {
FILE: packages/core/src/components/Tabs/TabPanels/TabPanels.tsx
type TabPanelsProps (line 12) | interface TabPanelsProps extends VibeComponentProps {
FILE: packages/core/src/components/Tabs/TabPanels/TabPanels.types.ts
type TabPanelsAnimationDirection (line 1) | type TabPanelsAnimationDirection = "rtl" | "ltr";
FILE: packages/core/src/components/Tabs/TabsContext/TabsContext.tsx
type TabsContextProps (line 16) | interface TabsContextProps extends VibeComponentProps {
type TabsChild (line 27) | type TabsChild = ReactElement & {
FILE: packages/core/src/components/TextArea/TextArea.tsx
constant DEFAULT_ROWS (line 11) | const DEFAULT_ROWS: Record<TextAreaSize, number> = {
FILE: packages/core/src/components/TextArea/TextArea.types.ts
type TextAreaSize (line 4) | type TextAreaSize = "small" | "large";
type TextAreaNativeInputProps (line 5) | type TextAreaNativeInputProps = Omit<
type TextAreaProps (line 10) | interface TextAreaProps extends TextAreaNativeInputProps, VibeComponentP...
FILE: packages/core/src/components/TextField/TextField.tsx
type TextFieldProps (line 20) | interface TextFieldProps extends VibeComponentProps {
FILE: packages/core/src/components/TextField/TextField.types.ts
type TextFieldType (line 1) | type TextFieldType =
type TextFieldFeedbackState (line 12) | type TextFieldFeedbackState = "error" | "success";
type TextFieldSize (line 14) | type TextFieldSize = "small" | "medium" | "large";
FILE: packages/core/src/components/TextField/TextFieldConstants.ts
type TextFieldAriaLabel (line 4) | enum TextFieldAriaLabel {
constant OLD_TEXT_FIELD_SIZES (line 9) | const OLD_TEXT_FIELD_SIZES = {
type TextFieldSize (line 15) | type TextFieldSize = (typeof BASE_SIZES)[keyof typeof BASE_SIZES] | keyo...
constant FEEDBACK_CLASSES (line 17) | const FEEDBACK_CLASSES = {
constant SIZE_MAPPER (line 22) | const SIZE_MAPPER = {
FILE: packages/core/src/components/TextField/__tests__/TextField-tests.test.tsx
constant TEST_ID (line 8) | const TEST_ID = "test-text-field";
FILE: packages/core/src/components/TextWithHighlight/TextWithHighlight.tsx
type TextWithHighlightProps (line 29) | interface TextWithHighlightProps extends VibeComponentProps {
function escapeRegExp (line 160) | function escapeRegExp(string: string) {
FILE: packages/core/src/components/ThemeProvider/ThemeProvider.tsx
type ThemeProviderProps (line 14) | interface ThemeProviderProps {
FILE: packages/core/src/components/ThemeProvider/ThemeProvider.types.ts
type SystemTheme (line 1) | type SystemTheme = "light" | "dark" | "black";
type ThemeColor (line 6) | type ThemeColor =
FILE: packages/core/src/components/ThemeProvider/ThemeProviderConstants.ts
type Theme (line 3) | type Theme = {
type SystemThemeColorMap (line 11) | type SystemThemeColorMap = {
type ThemeColorTokenValueMap (line 15) | type ThemeColorTokenValueMap = ThemeColorTokenValue | ThemeCustomClassVa...
type ThemeColorTokenValue (line 17) | type ThemeColorTokenValue = {
type ThemeCustomClassValue (line 21) | type ThemeCustomClassValue = {
type SystemThemeClassMapType (line 31) | type SystemThemeClassMapType = {
FILE: packages/core/src/components/ThemeProvider/ThemeProviderUtils.ts
constant APP_THEME_SUFFIX (line 59) | const APP_THEME_SUFFIX = "-app-theme";
FILE: packages/core/src/components/ThemeProvider/__tests__/ThemeProvider.test.tsx
constant THEME_NAME (line 7) | const THEME_NAME = "test-theme-name";
constant ADDITIONAL_STRING_SELECTOR (line 8) | const ADDITIONAL_STRING_SELECTOR = "test-random-string-selector";
FILE: packages/core/src/components/Tipseen/Tipseen.tsx
type TipseenProps (line 20) | interface TipseenProps extends VibeComponentProps {
FILE: packages/core/src/components/Tipseen/Tipseen.types.ts
type TipseenCloseButtonTheme (line 1) | type TipseenCloseButtonTheme = "light" | "dark" | "fixed-light" | "fixed...
type TipseenColor (line 3) | type TipseenColor = "primary" | "inverted";
FILE: packages/core/src/components/Tipseen/TipseenBasicContent.tsx
type TipseenBasicContentProps (line 10) | interface TipseenBasicContentProps extends VibeComponentProps {
FILE: packages/core/src/components/Tipseen/TipseenConstants.ts
constant SUBMIT_BUTTON_TEXT (line 1) | const SUBMIT_BUTTON_TEXT = "Submit";
constant DISMISS_BUTTON_TEXT (line 2) | const DISMISS_BUTTON_TEXT = "Dismiss";
constant TIPSEEN_CLOSE_BUTTON_TEST_ID (line 3) | const TIPSEEN_CLOSE_BUTTON_TEST_ID = "close-tipseen";
constant TIPSEEN_CLOSE_BUTTON_ARIA_LABEL (line 4) | const TIPSEEN_CLOSE_BUTTON_ARIA_LABEL = "Close";
FILE: packages/core/src/components/Tipseen/TipseenContent.tsx
type TipseenContentProps (line 14) | interface TipseenContentProps extends VibeComponentProps {
FILE: packages/core/src/components/Tipseen/TipseenMedia/TipseenMedia.tsx
type TipseenMediaProps (line 12) | interface TipseenMediaProps extends PropsWithChildren<VibeComponentProps> {
FILE: packages/core/src/components/Tipseen/TipseenTitle.tsx
type TipseenTitleProps (line 9) | interface TipseenTitleProps extends VibeComponentProps {
FILE: packages/core/src/components/Tipseen/TipseenWizard.tsx
constant FINISH_TEXT (line 9) | const FINISH_TEXT = "Got it";
type TipseenWizardProps (line 11) | interface TipseenWizardProps extends StepsProps {
FILE: packages/core/src/components/Toast/Toast.tsx
type ToastProps (line 22) | interface ToastProps extends VibeComponentProps {
FILE: packages/core/src/components/Toast/Toast.types.ts
type ToastType (line 1) | type ToastType = "normal" | "positive" | "negative" | "warning" | "dark";
type ToastActionType (line 3) | type ToastActionType = "link" | "button";
type ToastAction (line 5) | type ToastAction = {
FILE: packages/core/src/components/Toast/ToastButton/ToastButton.tsx
type ToastButtonProps (line 6) | type ToastButtonProps = ButtonProps;
FILE: packages/core/src/components/Toast/ToastLink/ToastLink.tsx
type ToastLinkProps (line 8) | type ToastLinkProps = LinkProps;
FILE: packages/core/src/components/Toggle/MockToggle.tsx
type MockToggleProps (line 9) | interface MockToggleProps extends VibeComponentProps {
FILE: packages/core/src/components/Toggle/Toggle.tsx
type ToggleProps (line 12) | interface ToggleProps extends VibeComponentProps {
FILE: packages/core/src/components/Toggle/Toggle.types.ts
type ToggleSize (line 1) | type ToggleSize = "small" | "medium";
FILE: packages/core/src/components/Toggle/ToggleConstants.ts
constant BASE_TOGGLE_CLASS_NAME (line 1) | const BASE_TOGGLE_CLASS_NAME = "monday-style-toggle";
FILE: packages/core/src/components/Toggle/ToggleText.tsx
type ToggleTextProps (line 7) | interface ToggleTextProps extends VibeComponentProps {
FILE: packages/core/src/components/TransitionView/TransitionView.types.ts
type TransitionViewProps (line 5) | interface TransitionViewProps extends VibeComponentProps {
type TransitionViewDirection (line 20) | type TransitionViewDirection = SlideDirection;
FILE: packages/core/src/components/VirtualizedGrid/VirtualizedGrid.tsx
type VirtualizedGridProps (line 34) | interface VirtualizedGridProps extends VibeComponentProps {
FILE: packages/core/src/components/VirtualizedGrid/VirtualizedGrid.types.ts
type VirtualizedGridItemType (line 1) | type VirtualizedGridItemType = {
FILE: packages/core/src/components/VirtualizedList/VirtualizedList.tsx
type VirtualizedListProps (line 43) | interface VirtualizedListProps extends VibeComponentProps {
FILE: packages/core/src/components/VirtualizedList/VirtualizedList.types.ts
type VirtualizedListItem (line 1) | type VirtualizedListItem = {
FILE: packages/core/src/components/next/List/List.types.ts
type ListSize (line 5) | type ListSize = BaseListSizes;
type ListElement (line 6) | type ListElement = BaseListElement;
type ListProps (line 8) | interface ListProps extends VibeComponentProps {
FILE: packages/core/src/components/next/List/ListItem/ListItem.types.ts
type ListItemDirection (line 9) | type ListItemDirection = BaseItemDirection;
type ListItemStartElement (line 10) | type ListItemStartElement = StartElement;
type ListItemEndElement (line 11) | type ListItemEndElement = EndElement;
type ListItemProps (line 17) | interface ListItemProps
FILE: packages/core/src/components/next/List/ListTitle/ListTitle.types.ts
type ListTitleProps (line 4) | interface ListTitleProps extends VibeComponentProps {
FILE: packages/core/src/components/next/List/__tests__/List.test.tsx
function renderList (line 8) | function renderList(props?: Partial<ListProps>) {
function CustomWrapper (line 281) | function CustomWrapper({ children }: { children: React.ReactNode }) {
FILE: packages/core/src/constants/keyCodes.ts
constant SELECTION_KEYS (line 16) | const SELECTION_KEYS = [keyCodes.ENTER, keyCodes.SPACE];
constant UP_DOWN_ARROWS (line 17) | const UP_DOWN_ARROWS = [keyCodes.UP_ARROW, keyCodes.DOWN_ARROW];
FILE: packages/core/src/constants/sizes.ts
constant BASE_SIZES (line 1) | const BASE_SIZES = {
constant SIZES (line 7) | const SIZES = { XXS: "xxs", XS: "xs", ...BASE_SIZES } as const;
type BaseSizes (line 9) | enum BaseSizes {
type Sizes (line 15) | enum Sizes {
type SIZES_VALUES (line 23) | type SIZES_VALUES = (typeof SIZES)[keyof typeof SIZES];
FILE: packages/core/src/helpers/textManipulations.ts
constant MIN_PRECISION (line 3) | const MIN_PRECISION = 0;
constant MAX_PRECISION (line 4) | const MAX_PRECISION = 20;
constant DEFAULT_LOCAL (line 5) | const DEFAULT_LOCAL = "en-US";
function validateLocalSupported (line 7) | function validateLocalSupported(local: string) {
function validatePrecision (line 19) | function validatePrecision(precision: number) {
function formatNumber (line 31) | function formatNumber(
FILE: packages/core/src/hooks/__tests__/useDebounceEvent.test.ts
function getEventObject (line 148) | function getEventObject(value: string): ChangeEvent<Partial<HTMLInputEle...
FILE: packages/core/src/hooks/createEventHandler.ts
function createEventHandler (line 1) | function createEventHandler(handler: (event: UIEvent) => void) {
FILE: packages/core/src/hooks/useActiveDescendantListFocus/__tests__/useActiveDescendantListFocus.test.ts
constant FIRST_ITEM_ID (line 7) | const FIRST_ITEM_ID = "id-1";
constant SECOND_ITEM_ID (line 8) | const SECOND_ITEM_ID = "id-2";
constant THIRD_ITEM_ID (line 9) | const THIRD_ITEM_ID = "id-3";
constant FOURTH_ITEM_ID (line 10) | const FOURTH_ITEM_ID = "id-4";
constant FIFTH_ITEM_ID (line 11) | const FIFTH_ITEM_ID = "id-5";
constant ITEM_IDS (line 12) | const ITEM_IDS = [FIRST_ITEM_ID, SECOND_ITEM_ID, THIRD_ITEM_ID, FOURTH_I...
function renderHookForTest (line 14) | function renderHookForTest({
function runListUnitTest (line 37) | function runListUnitTest({ isHorizontal, defaultVisualFocusFirstIndex }) {
FILE: packages/core/src/hooks/useActiveDescendantListFocus/index.ts
type Role (line 12) | enum Role {
function useActiveDescendantListFocus (line 21) | function useActiveDescendantListFocus({
FILE: packages/core/src/hooks/useActiveDescendantListFocus/useActiveDescendantListFocusHelpers.ts
type ActiveDependentHelper (line 1) | type ActiveDependentHelper = {
function getNextSelectableIndex (line 7) | function getNextSelectableIndex({ isItemSelectable, visualFocusItemIndex...
function getPreviousSelectableIndex (line 17) | function getPreviousSelectableIndex({
FILE: packages/core/src/hooks/useActiveDescendantListFocus/useActiveDescendantListFocusHooks.ts
type ArrowDirection (line 10) | enum ArrowDirection {
constant ENTER_KEY (line 17) | const ENTER_KEY = "Enter";
constant SPACE_KEY (line 18) | const SPACE_KEY = " ";
function useSupportArrowsKeyboardNavigation (line 20) | function useSupportArrowsKeyboardNavigation({
function useSupportPressItemKeyboardNavigation (line 105) | function useSupportPressItemKeyboardNavigation({
function useCleanVisualFocusOnBlur (line 157) | function useCleanVisualFocusOnBlur({
function useSetDefaultItemOnFocusEvent (line 190) | function useSetDefaultItemOnFocusEvent({
function useKeepFocusOnItemWhenListChanged (line 238) | function useKeepFocusOnItemWhenListChanged({
FILE: packages/core/src/hooks/useAfterFirstRender/index.ts
function useAfterFirstRender (line 3) | function useAfterFirstRender(): RefObject<boolean> {
FILE: packages/core/src/hooks/useDebounceEvent/index.ts
type UseDebounceResult (line 14) | type UseDebounceResult = {
function useDebounceEvent (line 21) | function useDebounceEvent({
FILE: packages/core/src/hooks/useElementsOverflowingIndex.ts
type AggregatedChildResult (line 6) | type AggregatedChildResult = { childLength: number; totalLength: number };
function useElementsOverflowingIndex (line 8) | function useElementsOverflowingIndex({
FILE: packages/core/src/hooks/useFocusWithin.ts
type Result (line 3) | type Result = {
function useFocusWithin (line 10) | function useFocusWithin({
FILE: packages/core/src/hooks/useFullKeyboardListeners.ts
type NavDirections (line 6) | enum NavDirections {
constant ARROW_DOWN_KEYS (line 13) | const ARROW_DOWN_KEYS = ["ArrowDown"];
constant ARROW_UP_KEYS (line 14) | const ARROW_UP_KEYS = ["ArrowUp"];
constant ARROW_RIGHT_KEYS (line 15) | const ARROW_RIGHT_KEYS = ["ArrowRight"];
constant ARROW_LEFT_KEYS (line 16) | const ARROW_LEFT_KEYS = ["ArrowLeft"];
constant SELECTION_KEYS (line 17) | const SELECTION_KEYS = ["Enter", " "];
constant ENTER_KEYS (line 18) | const ENTER_KEYS = ["Enter"];
constant ESCAPE_KEYS (line 19) | const ESCAPE_KEYS = ["Escape"];
constant END_KEYS (line 20) | const END_KEYS = ["End"];
constant HOME_KEYS (line 21) | const HOME_KEYS = ["Home"];
function useFullKeyboardListeners (line 23) | function useFullKeyboardListeners({
FILE: packages/core/src/hooks/useGridKeyboardNavigation/__tests__/useGridKeyboardNavigation.test.ts
function itemsArray (line 199) | function itemsArray(length) {
function renderHookForTest (line 203) | function renderHookForTest({
FILE: packages/core/src/hooks/useGridKeyboardNavigation/gridKeyboardNavigationHelper.ts
function getActiveIndexFromInboundNavigation (line 3) | function getActiveIndexFromInboundNavigation({
function calcRawNewIndexAfterArrowNavigation (line 47) | function calcRawNewIndexAfterArrowNavigation({
function calcActiveIndexAfterArrowNavigation (line 106) | function calcActiveIndexAfterArrowNavigation({
FILE: packages/core/src/hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.ts
constant NO_ACTIVE_INDEX (line 11) | const NO_ACTIVE_INDEX = -1;
function useGridKeyboardNavigation (line 37) | function useGridKeyboardNavigation({
FILE: packages/core/src/hooks/useHover/useHover.ts
function useHover (line 4) | function useHover<T extends HTMLElement = HTMLElement>(): [MutableRefObj...
FILE: packages/core/src/hooks/useIsMouseEnter.ts
function useIsMouseEnter (line 5) | function useIsMouseEnter({ ref }: { ref: RefObject<HTMLElement> }) {
FILE: packages/core/src/hooks/useIsMouseOver.ts
function useIsMouseOver (line 5) | function useIsMouseOver({ ref }: { ref: RefObject<HTMLElement> }): boole...
FILE: packages/core/src/hooks/useItemsOverflow/useItemsOverflow.ts
function useItemsOverflow (line 7) | function useItemsOverflow({
FILE: packages/core/src/hooks/useKeyboard.ts
function useKeyboard (line 4) | function useKeyboard({
FILE: packages/core/src/hooks/useListenFocusTriggers/index.ts
function useListenFocusTriggers (line 4) | function useListenFocusTriggers({
FILE: packages/core/src/hooks/useMediaQuery/index.ts
function useMediaQuery (line 4) | function useMediaQuery(query: string | string[]) {
FILE: packages/core/src/hooks/usePrevious/index.ts
function usePrevious (line 4) | function usePrevious<Type>(value: Type): Type {
FILE: packages/core/src/hooks/useRefWithCallback.ts
function useRefWithCallback (line 3) | function useRefWithCallback(
FILE: packages/core/src/hooks/useSetFocus/__tests__/useSetFocus.test.ts
function renderHookForTest (line 105) | function renderHookForTest() {
FILE: packages/core/src/hooks/useSetFocus/index.ts
function useSetFocus (line 6) | function useSetFocus({
FILE: packages/core/src/hooks/useStyle.ts
function removeEmpty (line 25) | function removeEmpty(obj: CSSProperties) {
function useStyle (line 36) | function useStyle(currentStyle: CSSProperties, additionalProps?: CSSProp...
FILE: packages/core/src/hooks/useSwitch/__tests__/useSwitch.test.ts
function renderHookForTest (line 79) | function renderHookForTest(props?: UseSwitchProps) {
function callOnChange (line 83) | function callOnChange(result: RenderResult<ReturnType<typeof useSwitch>>) {
FILE: packages/core/src/hooks/useSwitch/index.ts
type SwitchRole (line 3) | enum SwitchRole {
type UseSwitchProps (line 8) | interface UseSwitchProps {
function useSwitch (line 27) | function useSwitch({ isChecked, defaultChecked, onChange, isDisabled }: ...
FILE: packages/core/src/hooks/useThrottledCallback.ts
function useThrottledCallback (line 4) | function useThrottledCallback(
FILE: packages/core/src/hooks/useTimeout/index.ts
function useTimeout (line 4) | function useTimeout({
FILE: packages/core/src/hooks/useVibeMediaQuery/index.ts
function useVibeMediaQuery (line 15) | function useVibeMediaQuery() {
FILE: packages/core/src/hooks/useWizard/useWizard.ts
function useWizard (line 4) | function useWizard({ initialStep = 0, stepCount, onStepChange, onFinish ...
FILE: packages/core/src/hooks/useWizard/useWizard.types.ts
type UseWizardProps (line 1) | interface UseWizardProps {
type UseWizardReturnValue (line 20) | interface UseWizardReturnValue {
type WizardDirection (line 51) | type WizardDirection = "forward" | "backward";
FILE: packages/core/src/scripts/generate-metadata.ts
constant CACHE_FILE (line 10) | const CACHE_FILE = path.resolve(__dirname, ".metadata-cache.json");
constant STORYBOOK_BASE_URL (line 13) | const STORYBOOK_BASE_URL = "https://vibe.monday.com";
constant IS_CI (line 15) | const IS_CI = process.env.CI === "true" || process.env.CI === "True";
constant CPU_COUNT (line 24) | const CPU_COUNT = cpus().length;
constant BATCH_SIZE (line 25) | const BATCH_SIZE = Math.max(30, Math.ceil(CPU_COUNT * 4));
type AggregatorRecord (line 30) | interface AggregatorRecord {
type DocgenResult (line 37) | interface DocgenResult {
type FinalOutput (line 46) | type FinalOutput = Array<{
function isIndexFile (line 60) | function isIndexFile(filePath: string): boolean {
function findMatchingPaths (line 67) | function findMatchingPaths(baseDir: string, moduleSpecifier: string): st...
function getExportedSymbolsFromDecl (line 83) | function getExportedSymbolsFromDecl(decl: ExportDeclaration): string[] {
function expandAllExportedSymbols (line 114) | function expandAllExportedSymbols(sf: SourceFile, visited: Set<string>):...
function toRelativePath (line 147) | function toRelativePath(filePath: string): string {
function resolveExportsRecursively (line 158) | function resolveExportsRecursively(
function aggregatorMain (line 213) | function aggregatorMain(): AggregatorRecord[] {
function runReactDocgenOnFiles (line 261) | async function runReactDocgenOnFiles(filePaths: string[]): Promise<Docge...
function getParentComponent (line 356) | function getParentComponent(filePath: string): string | undefined {
function findSubComponents (line 372) | function findSubComponents(filePath: string, allFiles: string[]): string...
type StoryMeta (line 397) | interface StoryMeta {
function toStorySlug (line 402) | function toStorySlug(exportName: string): string {
function findFirstStoryExport (line 409) | function findFirstStoryExport(content: string): string | null {
function buildStoryMap (line 419) | function buildStoryMap(): Map<string, StoryMeta> {
function mergeResults (line 465) | function mergeResults(
function unifyTypesWithComponents (line 516) | function unifyTypesWithComponents(records: AggregatorRecord[]): Aggregat...
function main (line 543) | async function main() {
FILE: packages/core/src/services/themes.ts
function isThemesSupported (line 1) | function isThemesSupported() {
function getCSSVar (line 11) | function getCSSVar(varName: string, fallback?: string) {
function hexToRgb (line 21) | function hexToRgb(hex: string) {
FILE: packages/core/src/services/virtualized-service.ts
constant LAST_ITEM_ID (line 1) | const LAST_ITEM_ID = "~~~lastItem~~~";
constant EMPTY_OBJECT (line 2) | const EMPTY_OBJECT: Record<string, never> = {};
type NormalizedItem (line 4) | type NormalizedItem<T> = {
type NormalizedItems (line 13) | type NormalizedItems<T> = Record<string, NormalizedItem<T>>;
type IdGetter (line 14) | type IdGetter<T> = (item: T, index: number) => string;
type SizeGetter (line 15) | type SizeGetter<T> = (item: T, index: number) => number;
function findItemAtOffset (line 55) | function findItemAtOffset<T>(
function isEmptyObject (line 92) | function isEmptyObject(obj: unknown) {
FILE: packages/core/src/tests/constants.ts
type ComponentDefaultTestId (line 1) | enum ComponentDefaultTestId {
type NavigationCommand (line 135) | enum NavigationCommand {
type ComponentVibeId (line 146) | enum ComponentVibeId {
FILE: packages/core/src/tests/interactions-utils.ts
type Canvas (line 6) | type Canvas = HTMLElement | BoundFunctions<typeof queries>;
type TestFunction (line 7) | type TestFunction = (canvas: Canvas, args: Record<string, any>) => unknown;
type Coordinates (line 8) | type Coordinates = { x: number; y: number };
function logFunctionStart (line 23) | function logFunctionStart(name: string) {
function getElementClientCenter (line 27) | function getElementClientCenter(element: HTMLElement) {
function getWithin (line 64) | function getWithin(canvasOrValidTestElement: HTMLElement | BoundFunction...
function delay (line 215) | function delay(timeout: number) {
function drag (line 239) | async function drag(
FILE: packages/core/src/types/ArrayLastElement.ts
type ArrayLastElement (line 1) | type ArrayLastElement<T extends unknown[]> = T extends [...unknown[], in...
FILE: packages/core/src/types/Colors.ts
type ContentColor (line 19) | type ContentColor = (typeof contentColors)[number];
type StateSelectedColorKeys (line 20) | type StateSelectedColorKeys = keyof typeof MapStateSelectedColor;
type StateSelectedHoverColorKeys (line 21) | type StateSelectedHoverColorKeys = keyof typeof MapStateSelectedHoverColor;
type ElementAllowedColor (line 23) | type ElementAllowedColor = ContentColor | "positive" | "negative" | "pri...
function getElementColor (line 25) | function getElementColor(
type ColorStyle (line 45) | type ColorStyle = "regular" | "hover" | "selected";
FILE: packages/core/src/types/ElementContent.ts
type ElementContent (line 3) | type ElementContent = ReactNode | ReactNode[];
FILE: packages/core/src/types/FormElement.ts
type FormElementProps (line 7) | type FormElementProps =
FILE: packages/core/src/types/MoveBy.ts
type MoveBy (line 1) | type MoveBy = {
FILE: packages/core/src/types/SplitString.ts
type SplitString (line 1) | type SplitString<S extends string, D extends string> = string extends S
FILE: packages/core/src/types/VibeComponentProps.ts
type VibeComponentProps (line 1) | interface VibeComponentProps {
FILE: packages/core/src/types/events.ts
type OnPressEventType (line 3) | type OnPressEventType<Element> = React.MouseEvent<Element> | React.Focus...
type GeneralEventType (line 4) | type GeneralEventType = Event | React.UIEvent;
type GenericEventCallback (line 5) | type GenericEventCallback = (ev: GeneralEventType) => unknown;
type KeyboardEventCallback (line 6) | type KeyboardEventCallback = (event: KeyboardEvent) => unknown;
type MouseEventCallBack (line 9) | type MouseEventCallBack = (event: React.MouseEvent<HTMLElement | SVGElem...
FILE: packages/core/src/utils/colors-vars-map.ts
type CONTENT_COLORS_VALUES (line 172) | type CONTENT_COLORS_VALUES = (typeof contentColors)[number];
type ColorStyle (line 177) | enum ColorStyle {
type ContentColorByName (line 183) | enum ContentColorByName {
type StateSelectedColor (line 229) | enum StateSelectedColor {
type StateSelectedHoverColor (line 240) | enum StateSelectedHoverColor {
type ElementColor (line 259) | type ElementColor = (typeof ElementAllowedColor)[keyof typeof ElementAll...
function getElementColor (line 270) | function getElementColor(
FILE: packages/core/types/window.d.ts
type DocumentMode (line 1) | type DocumentMode = 5 | 7 | 8 | 9 | 10 | 11;
type Window (line 4) | interface Window {
type Document (line 8) | interface Document {
FILE: packages/core/vitest.setup.ts
class ResizeObserver (line 10) | class ResizeObserver {
method observe (line 11) | observe() {}
method unobserve (line 12) | unobserve() {}
method disconnect (line 13) | disconnect() {}
FILE: packages/docs/.storybook/art.ts
function paintToConsole (line 16) | function paintToConsole() {
FILE: packages/docs/.storybook/main.ts
method viteFinal (line 74) | async viteFinal(config, { configType }) {
FILE: packages/docs/.storybook/manager.jsx
function shouldShowStory (line 42) | function shouldShowStory(item) {
FILE: packages/docs/.storybook/storybook-title-fix.js
function updateHtmlTitle (line 4) | function updateHtmlTitle(file, newTitle) {
function updateStorybookHtmlTitles (line 10) | function updateStorybookHtmlTitles(storybookDir) {
FILE: packages/docs/.storybook/test-runner.cjs
constant METRICS_DIR (line 7) | const METRICS_DIR = path.join(process.cwd(), "../../scripts/performance/...
constant TEMP_METRICS_FILE (line 8) | const TEMP_METRICS_FILE = path.join(METRICS_DIR, ".metrics-temp.jsonl");
function ensureDir (line 10) | function ensureDir() {
function appendMetric (line 16) | function appendMetric(title, name, data) {
method preVisit (line 27) | async preVisit(page) {
method postVisit (line 34) | async postVisit(page, context) {
FILE: packages/docs/src/decorators/withLiveEdit/components/LiveContent/LiveContent.types.ts
type LiveContentProps (line 3) | interface LiveContentProps {
FILE: packages/docs/src/decorators/withLiveEdit/components/LiveEditorAction/LiveEditorAction.types.ts
type LiveEditorActionProps (line 1) | interface LiveEditorActionProps {
FILE: packages/docs/src/decorators/withLiveEdit/hooks/useLiveEditorActions.ts
function format (line 5) | function format(source: string): string {
FILE: packages/docs/src/decorators/withLiveEdit/utils/parse-csf-utils.ts
function findRenderProperty (line 27) | function findRenderProperty(body: Statement[]): ObjectProperty {
function prepareTransformTarget (line 35) | function prepareTransformTarget(renderProperty: ObjectProperty): Program {
function transformAstToCode (line 65) | function transformAstToCode(ast: File): string {
function extractRenderAttributeFromCsf (line 71) | function extractRenderAttributeFromCsf(csfString: string) {
FILE: packages/docs/src/decorators/withLiveEdit/utils/prettier-utils.ts
function formatCode (line 5) | function formatCode(code: string): string {
FILE: packages/docs/src/decorators/withPerformanceProfiler/withPerformanceProfiler.tsx
type RenderMetric (line 4) | interface RenderMetric {
type VibePerformanceData (line 19) | interface VibePerformanceData {
type Window (line 24) | interface Window {
function initializeStore (line 29) | function initializeStore(): void {
function createOnRenderCallback (line 39) | function createOnRenderCallback(storyId: string): ProfilerOnRenderCallba...
FILE: packages/docs/src/layout/canvas-wrapper/CanvasWrapper.tsx
type CanvasWrapper (line 6) | type CanvasWrapper = ComponentProps<typeof Canvas>;
FILE: packages/docs/src/layout/footer/ArrowIcon.tsx
function ArrowIcon (line 3) | function ArrowIcon() {
FILE: packages/docs/src/layout/footer/Footer.tsx
function Footer (line 7) | function Footer() {
FILE: packages/docs/src/layout/footer/FooterCard.tsx
function FooterCard (line 7) | function FooterCard({
FILE: packages/docs/src/layout/live-editor/LiveEditor.tsx
type EditorProps (line 4) | interface EditorProps {
type EditorComponent (line 15) | type EditorComponent = React.ForwardRefExoticComponent<EditorProps & Rea...
FILE: packages/docs/src/layout/live-preview/LivePreview.tsx
type LivePreview (line 5) | interface LivePreview {
FILE: packages/docs/src/layout/related-components/component-description-map.tsx
constant COMPONENTS_DESCRIPTIONS_ENTRIES (line 66) | const COMPONENTS_DESCRIPTIONS_ENTRIES = [
constant GENERAL_DESCRIPTIONS_ENTRIES (line 126) | const GENERAL_DESCRIPTIONS_ENTRIES = [
type ComponentDescriptionName (line 133) | type ComponentDescriptionName =
constant DESCRIPTION_COMPONENTS_WITHOUT_GENERAL_DESCRIPTION_MAP (line 137) | const DESCRIPTION_COMPONENTS_WITHOUT_GENERAL_DESCRIPTION_MAP = new Map<C...
constant DESCRIPTION_COMPONENTS_MAP (line 140) | const DESCRIPTION_COMPONENTS_MAP = new Map<ComponentDescriptionName, JSX...
FILE: packages/docs/src/layout/related-components/descriptions/color-picker-description.tsx
constant COLORS_LIST (line 5) | const COLORS_LIST = [
FILE: packages/docs/src/layout/toc/TableOfContents.tsx
function TableOfContents (line 7) | function TableOfContents() {
FILE: packages/docs/src/pages/catalog/Catalog.stories.templates.tsx
constant RELATED_COMPONENT_NAMES (line 8) | const RELATED_COMPONENT_NAMES: string[] = Array.from(
FILE: packages/docs/src/pages/catalog/catalog.stories.tsx
type Story (line 5) | type Story = StoryObj<typeof CatalogTemplate>;
FILE: packages/docs/src/pages/components/Accordion/Accordion.interactions.ts
constant CHANGES_DELAY (line 6) | const CHANGES_DELAY = 100;
function getAccordionHeadingByText (line 8) | function getAccordionHeadingByText(canvas: Screen, title: string) {
function getOpenedAccordionItem (line 12) | function getOpenedAccordionItem(canvas: Screen) {
function getOpenedAccordionItems (line 18) | function getOpenedAccordionItems(canvas: Screen) {
function openAndCheckAccordionItem (line 26) | async function openAndCheckAccordionItem(canvas: Screen, title: string) {
function closeAndCheckMultiAccordionItem (line 37) | async function closeAndCheckMultiAccordionItem(canvas: Screen, expectedO...
function openAndCheckMultiAccordionItem (line 46) | async function openAndCheckMultiAccordionItem(canvas: Screen, title: str...
FILE: packages/docs/src/pages/components/AlertBanner/AlertBanner.stories.tsx
type Story (line 57) | type Story = StoryObj<typeof AlertBanner>;
FILE: packages/docs/src/pages/components/AttentionBox/AttentionBox.stories.tsx
type Story (line 22) | type Story = StoryObj<typeof AttentionBox>;
type Stage (line 274) | type Stage = "button" | "skeleton" | "content" | "attention";
FILE: packages/docs/src/pages/components/AvatarGroup/AvatarGroup.stories.tsx
type Story (line 61) | type Story = StoryObj<typeof AvatarGroup>;
type AvatarGroupTemplateProps (line 63) | interface AvatarGroupTemplateProps extends AvatarGroupProps {
FILE: packages/docs/src/pages/components/BaseInput/BaseInput.stories.tsx
type Story (line 5) | type Story = StoryObj<typeof BaseInput>;
FILE: packages/docs/src/pages/components/BaseList/BaseList.stories.tsx
type Story (line 7) | type Story = StoryObj<typeof BaseList>;
FILE: packages/docs/src/pages/components/Button/Button.stories.tsx
type Story (line 9) | type Story = StoryObj<typeof Button>;
FILE: packages/docs/src/pages/components/ButtonGroup/ButtonGroup.stories.tsx
type Story (line 7) | type Story = StoryObj<typeof ButtonGroup>;
FILE: packages/docs/src/pages/components/Checkbox/Checkbox.stories.tsx
type Story (line 8) | type Story = StoryObj<typeof Checkbox>;
FILE: packages/docs/src/pages/components/Clickable/Clickable.interactions.ts
function states_onClickTabFocusElementTest (line 10) | async function states_onClickTabFocusElementTest(canvas) {
FILE: packages/docs/src/pages/components/ColorPicker/ColorPicker.interactions.ts
function selectAndResetWithKeyboard (line 14) | async function selectAndResetWithKeyboard(canvas) {
function selectMultiColorsWithKeyboardAndMouse (line 42) | async function selectMultiColorsWithKeyboardAndMouse(canvas) {
function formatColorName (line 73) | function formatColorName(color: string) {
function clickOnColor (line 77) | async function clickOnColor(canvas, color) {
function expectColorToBeSelected (line 83) | async function expectColorToBeSelected(canvas, color) {
function expectColorToBeNotSelected (line 88) | async function expectColorToBeNotSelected(canvas, color) {
function expectColorToBeActive (line 93) | async function expectColorToBeActive(canvas, color) {
function expectColorToBeNotActive (line 98) | async function expectColorToBeNotActive(canvas, color) {
function findColorItem (line 103) | async function findColorItem(canvas, color) {
FILE: packages/docs/src/pages/components/Combobox/Combobox.interactions.ts
function getComponentElements (line 16) | async function getComponentElements(canvas) {
function onTypeFilterComboboxOptionsTest (line 22) | async function onTypeFilterComboboxOptionsTest(canvas) {
function onSelectExistFilterClearsFilterTest (line 28) | async function onSelectExistFilterClearsFilterTest(canvas) {
function onNavigateBetweenOptionsByArrowsAriaUpdates (line 41) | async function onNavigateBetweenOptionsByArrowsAriaUpdates(canvas) {
FILE: packages/docs/src/pages/components/Dialog/Dialog.interactions.ts
constant CLICK_OUTSIDE_DIALOG (line 7) | const CLICK_OUTSIDE_DIALOG = "click-outside-dialog";
constant CONTEXT_MENU_DIALOG (line 8) | const CONTEXT_MENU_DIALOG = "context-menu-dialog";
constant HIDE_TRIGGERS_CONTAINER (line 9) | const HIDE_TRIGGERS_CONTAINER = "hide-triggers-container";
constant CLICK_OUTSIDE_DIALOG_BUTTON (line 10) | const CLICK_OUTSIDE_DIALOG_BUTTON = "click-outside-button";
function getDialogContainer (line 54) | function getDialogContainer() {
function getDialogElement (line 58) | async function getDialogElement(canvas: Canvas, dataTestId: string) {
function checkIfDialogHidden (line 62) | async function checkIfDialogHidden(dialogElement: HTMLElement) {
function createTestIfDialogHiddenAfterTrigger (line 66) | function createTestIfDialogHiddenAfterTrigger(
FILE: packages/docs/src/pages/components/Dropdown/DropdownBasicDropdown.stories.tsx
type Story (line 11) | type Story = StoryObj<typeof Dropdown>;
FILE: packages/docs/src/pages/components/Dropdown/DropdownBoxMode.stories.tsx
type Story (line 11) | type Story = StoryObj<typeof Dropdown>;
FILE: packages/docs/src/pages/components/EditableHeading/EditableHeading.interactions.ts
constant CHANGES_DELAY (line 15) | const CHANGES_DELAY = 200;
function getComponent (line 18) | function getComponent(canvas: Canvas) {
function getInput (line 22) | function getInput(canvas: Canvas) {
function changeModes (line 26) | async function changeModes(canvas: Canvas) {
function editAndChangeToValidText (line 40) | async function editAndChangeToValidText(canvas: Canvas) {
function clearInput (line 55) | async function clearInput(canvas: Canvas) {
function cancelEditing (line 68) | async function cancelEditing(canvas: Canvas) {
FILE: packages/docs/src/pages/components/EditableText/EditableText.interactions.ts
constant CHANGES_DELAY (line 15) | const CHANGES_DELAY = 200;
function getComponent (line 18) | function getComponent(canvas: Canvas) {
function getInput (line 22) | function getInput(canvas: Canvas) {
function changeModes (line 26) | async function changeModes(canvas: Canvas) {
function editAndChangeToValidText (line 40) | async function editAndChangeToValidText(canvas: Canvas) {
function clearInput (line 55) | async function clearInput(canvas: Canvas) {
function cancelEditing (line 68) | async function cancelEditing(canvas: Canvas) {
FILE: packages/docs/src/pages/components/GridKeyboardNavigationContext/useGridKeyboardNavigationContext.interactions.ts
function assertElementWithTextToBeActive (line 41) | async function assertElementWithTextToBeActive(text) {
FILE: packages/docs/src/pages/components/GridKeyboardNavigationContext/useGridKeyboardNavigationContext.stories.helpers.tsx
constant ELEMENT_WIDTH_PX (line 13) | const ELEMENT_WIDTH_PX = 72;
constant PADDING_PX (line 14) | const PADDING_PX = 24;
constant ON_CLICK (line 16) | const ON_CLICK = action("Selected");
type DummyNavigableGridProps (line 18) | interface DummyNavigableGridProps {
type LayoutWithInnerKeyboardNavigationProps (line 67) | interface LayoutWithInnerKeyboardNavigationProps {
FILE: packages/docs/src/pages/components/Heading/Heading.interactions.ts
constant ONE_LINE_ELLIPSIS_TEST_ID (line 6) | const ONE_LINE_ELLIPSIS_TEST_ID = "ellipsis-title-example";
constant OVERFLOW_TITLE_CONTAINER_ID (line 7) | const OVERFLOW_TITLE_CONTAINER_ID = "overflow-title-examples-container";
function isTooltipAppearOnHover (line 9) | async function isTooltipAppearOnHover(canvas: Screen) {
FILE: packages/docs/src/pages/components/Icon/Icon.stories.tsx
type IconMeta (line 88) | interface IconMeta {
FILE: packages/docs/src/pages/components/IconButton/IconButton.stories.tsx
type Story (line 9) | type Story = StoryObj<typeof IconButton>;
FILE: packages/docs/src/pages/components/Info/Info.stories.tsx
type Story (line 6) | type Story = StoryObj<typeof Info>;
FILE: packages/docs/src/pages/components/Label/Label.stories.tsx
type Story (line 8) | type Story = StoryObj<typeof Label>;
FILE: packages/docs/src/pages/components/Link/Example.tsx
type ComponentRuleProps (line 6) | interface ComponentRuleProps {
FILE: packages/docs/src/pages/components/Link/Link.stories.tsx
type Story (line 19) | type Story = StoryObj<typeof Link>;
FILE: packages/docs/src/pages/components/List/List.stories.tsx
type Story (line 12) | type Story = StoryObj<typeof List>;
FILE: packages/docs/src/pages/components/List/ListItem.stories.tsx
type Story (line 21) | type Story = StoryObj<typeof ListItem>;
FILE: packages/docs/src/pages/components/Loader/Loader.stories.tsx
type Story (line 17) | type Story = StoryObj<typeof Loader>;
FILE: packages/docs/src/pages/components/Menu/Menu.interactions.ts
constant TWO_DEPTHS_MENU_TEXTS (line 15) | const TWO_DEPTHS_MENU_TEXTS = {
constant HIDDEN_ELEMENT_SELECTOR (line 22) | const HIDDEN_ELEMENT_SELECTOR = "[aria-hidden]";
function getMenuElement (line 107) | function getMenuElement(canvas) {
FILE: packages/docs/src/pages/components/Menu/MenuItem.stories.tsx
type Story (line 7) | type Story = StoryObj<MenuItemProps>;
FILE: packages/docs/src/pages/components/MenuButton/MenuButton.stories.tsx
type Story (line 8) | type Story = StoryObj<typeof MenuButton>;
FILE: packages/docs/src/pages/components/Modal/Modal.stories.helpers.tsx
function withOpenedModalPreview (line 72) | function withOpenedModalPreview(
FILE: packages/docs/src/pages/components/Modal/ModalBasicLayout.stories.tsx
type Story (line 9) | type Story = StoryObj<typeof Modal>;
FILE: packages/docs/src/pages/components/Modal/ModalMediaLayout.stories.tsx
type Story (line 18) | type Story = StoryObj<typeof Modal>;
FILE: packages/docs/src/pages/components/Modal/ModalSideBySideLayout.stories.tsx
type Story (line 29) | type Story = StoryObj<typeof Modal>;
FILE: packages/docs/src/pages/components/NumberField/NumberField.stories.tsx
type Story (line 20) | type Story = StoryObj<typeof NumberField>;
FILE: packages/docs/src/pages/components/ProgressBars/ProgressBar.stories.tsx
type Story (line 21) | type Story = StoryObj<typeof ProgressBar>;
FILE: packages/docs/src/pages/components/RadioButton/RadioButton.interactions.ts
constant CHANGES_DELAY (line 4) | const CHANGES_DELAY = 100;
FILE: packages/docs/src/pages/components/Search/Search.stories.tsx
type Story (line 22) | type Story = StoryObj<typeof Search>;
FILE: packages/docs/src/pages/components/Slider/Slider.interactions.ts
constant CHANGES_DELAY (line 5) | const CHANGES_DELAY = 50;
constant DRAG_STEPS (line 6) | const DRAG_STEPS = 20;
constant DRAG_STEP_DELAY (line 7) | const DRAG_STEP_DELAY = 5;
function clickAtX (line 9) | function clickAtX(element: HTMLElement, clientX: number): void {
function dragToX (line 15) | async function dragToX(element: HTMLElement, targetX: number): Promise<v...
function testNonRangedSliderClickOnRail (line 37) | async function testNonRangedSliderClickOnRail(canvas: ReturnType<typeof ...
function testNonRangedSliderDragThumb (line 58) | async function testNonRangedSliderDragThumb(canvas: ReturnType<typeof wi...
function testRangedSliderClickOnRail (line 74) | async function testRangedSliderClickOnRail(canvas: ReturnType<typeof wit...
function testRangedSliderDragThumbs (line 101) | async function testRangedSliderDragThumbs(canvas: ReturnType<typeof with...
FILE: packages/docs/src/pages/components/Table/Table.stories.helpers.tsx
function sort (line 456) | function sort<T>(columnId: keyof T, sortState: "asc" | "desc" | "none", ...
FILE: packages/docs/src/pages/components/Text/Text.interactions.ts
constant ONE_LINE_ELLIPSIS_TEST_ID (line 6) | const ONE_LINE_ELLIPSIS_TEST_ID = "ellipsis-text-example";
constant OVERFLOW_TEXT_CONTAINER_ID (line 7) | const OVERFLOW_TEXT_CONTAINER_ID = "overflow-text-examples-container";
function isTooltipAppearOnHover (line 9) | async function isTooltipAppearOnHover(canvas: Screen) {
FILE: packages/docs/src/pages/components/TextArea/TextArea.stories.tsx
type Story (line 7) | type Story = StoryObj<typeof TextArea>;
FILE: packages/docs/src/pages/components/TextField/TextField.stories.tsx
type Story (line 7) | type Story = StoryObj<typeof TextField>;
FILE: packages/docs/src/pages/components/ThemeProvider/ThemeProvider.interactions.ts
constant APP_THEME_SUFFIX (line 8) | const APP_THEME_SUFFIX = "-app-theme";
constant PRIMARY_COLOR (line 59) | const PRIMARY_COLOR = getVariableHexColor("primary-color");
constant POSITIVE_COLOR (line 60) | const POSITIVE_COLOR = getVariableHexColor("positive-color");
constant DARK_APP_THEME_CLASS_NAME (line 61) | const DARK_APP_THEME_CLASS_NAME = addAppThemeSuffix("dark");
function checkSystemTheme (line 63) | async function checkSystemTheme(canvas: Screen) {
FILE: packages/docs/src/pages/components/ThemeProvider/ThemeProvider.stories.helpers.tsx
type ThemeColor (line 7) | enum ThemeColor {
FILE: packages/docs/src/pages/components/Toggle/Toggle.stories.tsx
type Story (line 7) | type Story = StoryObj<typeof Toggle>;
FILE: packages/docs/src/pages/components/Tooltip/Tooltip.interactions.ts
function testHoverTooltipTrigger (line 6) | async function testHoverTooltipTrigger(
FILE: packages/docs/src/pages/components/VirtualizedGrid/VirtualizedGrid.stories.tsx
constant ITEMS_COUNT (line 11) | const ITEMS_COUNT = 100;
FILE: packages/docs/src/pages/foundations/accessibility/principles/principle.tsx
constant PRINCIPLE_VISUAL_ELEMENT (line 5) | const PRINCIPLE_VISUAL_ELEMENT = `monday-storybook-principle`;
type PrincipleProps (line 7) | interface PrincipleProps {
FILE: packages/docs/src/pages/foundations/accessibility/principles/principlesAccesability.tsx
constant BASE_CLASS (line 6) | const BASE_CLASS = "monday-storybook-principles";
FILE: packages/docs/src/pages/foundations/colors/colors-description/colors-description.tsx
type ColorsDescriptionProps (line 14) | interface ColorsDescriptionProps {
FILE: packages/docs/src/pages/foundations/colors/colors.stories.tsx
type Story (line 13) | type Story = StoryObj;
FILE: packages/docs/src/pages/foundations/colors/content-color-cell/content-color-cell.tsx
type ContentColorCellProps (line 4) | interface ContentColorCellProps {
FILE: packages/docs/src/pages/foundations/colors/content-color-row/content-color-row.tsx
type ContentColorRowProps (line 7) | interface ContentColorRowProps {
FILE: packages/docs/src/pages/foundations/motion/animation-information-box/animation-information-box.tsx
type AnimationInformationBoxProps (line 5) | interface AnimationInformationBoxProps {
FILE: packages/docs/src/pages/foundations/motion/animation-overviews/animation-overviews.tsx
constant OVERVIEW (line 6) | const OVERVIEW = [
FILE: packages/docs/src/pages/foundations/motion/animation-types/animation-types.tsx
constant TYPES (line 6) | const TYPES = [
FILE: packages/docs/src/pages/foundations/motion/duration-expressive-tokens/duration-expressive-tokens.tsx
constant DURATION_EXPRESSIVE (line 6) | const DURATION_EXPRESSIVE = [
FILE: packages/docs/src/pages/foundations/motion/duration-productive-tokens/duration-productive-tokens.tsx
constant DURATION_PRODUCIVE (line 6) | const DURATION_PRODUCIVE = [
FILE: packages/docs/src/pages/foundations/motion/easing-overview/easing-overview.tsx
type EasingOverviewProps (line 6) | interface EasingOverviewProps {
FILE: packages/docs/src/pages/foundations/motion/easing-overviews/easing-overviews.tsx
constant EASING (line 12) | const EASING = [
FILE: packages/docs/src/pages/foundations/motion/token-Information-box/token-information-box.tsx
type TokenInformationBoxProps (line 4) | interface TokenInformationBoxProps {
FILE: packages/docs/src/pages/foundations/round-corners/corners-settings/corner-settings.tsx
type CornersSettingsProps (line 4) | interface CornersSettingsProps {
FILE: packages/docs/src/pages/foundations/round-corners/rounded-corner/rounded-corner.tsx
type RoundedCornerProps (line 5) | interface RoundedCornerProps {
FILE: packages/docs/src/pages/foundations/shadow/card-shadow-example/card-shadow-example.tsx
constant CSS_BASE_CLASS (line 7) | const CSS_BASE_CLASS = "card-shadow-example";
FILE: packages/docs/src/pages/foundations/shadow/drag-shadow-example/drag-shadow-example.tsx
constant CSS_BASE_CLASS (line 7) | const CSS_BASE_CLASS = "drag-shadow-example";
FILE: packages/docs/src/pages/foundations/shadow/shadow-levels/shadow-example/shadow-example.tsx
type ShadowExampleProps (line 7) | interface ShadowExampleProps {
FILE: packages/docs/src/pages/foundations/spacing/spacing.stories.tsx
type Story (line 10) | type Story = StoryObj;
FILE: packages/docs/src/pages/foundations/typography/examples-table/examples-table.tsx
type TableData (line 5) | interface TableData {
FILE: packages/docs/src/pages/foundations/ux-writing-handbook/values/values.tsx
type ValueProps (line 5) | interface ValueProps {
FILE: packages/docs/src/pages/hooks/useActiveDescendantListFocus/useActiveDescendantListFocus.interactions.ts
function getSearchElement (line 19) | async function getSearchElement(canvas) {
function expectElementToBeNaturallyFocused (line 23) | async function expectElementToBeNaturallyFocused(element) {
function expectElementVisuallyFocusedByText (line 26) | async function expectElementVisuallyFocusedByText(text) {
function keyboardNavAndFocusForVerticalList (line 32) | async function keyboardNavAndFocusForVerticalList(canvas) {
FILE: packages/docs/src/pages/hooks/useActiveDescendantListFocus/useActiveDescendantListFocus.stories.tsx
type Story (line 10) | type Story = StoryObj<typeof useActiveDescendantListFocus>;
FILE: packages/docs/src/pages/hooks/useAfterFirstRender/useAfterFirstRender.stories.tsx
type Story (line 5) | type Story = StoryObj<typeof useAfterFirstRender>;
FILE: packages/docs/src/pages/hooks/useGridKeyboardNavigation/useGridKeyboardNavigation.stories.tsx
constant ELEMENT_WIDTH_PX (line 8) | const ELEMENT_WIDTH_PX = 72;
constant PADDING_PX (line 9) | const PADDING_PX = 24;
constant ON_CLICK (line 10) | const ON_CLICK = action("item selected");
FILE: packages/docs/src/pages/migration-guide/DiffCodeBlock.tsx
function DiffCodeBlock (line 5) | function DiffCodeBlock({ code }: { code: string }) {
FILE: packages/docs/src/pages/welcome/EntranceAnimation.tsx
type EntranceAnimationProps (line 4) | interface EntranceAnimationProps {
FILE: packages/docs/src/pages/welcome/Section.tsx
function Section (line 6) | function Section({
FILE: packages/docs/src/pages/welcome/Title.tsx
function Title (line 5) | function Title({ children, className }: { children: React.ReactNode; cla...
FILE: packages/docs/src/pages/welcome/contributions/Contributor.tsx
type ContributorProps (line 5) | interface ContributorProps {
function Contributor (line 12) | function Contributor({ name, image, href, tooltip }: ContributorProps) {
FILE: packages/docs/src/pages/welcome/contributions/Contributors.tsx
function Contributors (line 8) | function Contributors() {
FILE: packages/docs/src/pages/welcome/contributions/ContributorsList.tsx
constant CONTRIBUTORS (line 15) | const CONTRIBUTORS = [
function ContributorsList (line 72) | function ContributorsList() {
FILE: packages/docs/src/pages/welcome/contributions/Founders.tsx
constant FOUNDERS (line 8) | const FOUNDERS = [
function Founders (line 23) | function Founders() {
FILE: packages/docs/src/pages/welcome/contributions/Team.tsx
function Team (line 89) | function Team() {
FILE: packages/docs/src/pages/welcome/contributions/TeamMember.tsx
type TeamMemberProps (line 6) | interface TeamMemberProps {
FILE: packages/docs/src/pages/welcome/contributions/useContributors.ts
type GithubContributor (line 3) | type GithubContributor = {
type GithubContributorResponse (line 12) | type GithubContributorResponse = {
function fetchContributors (line 20) | async function fetchContributors(
function fetchAllContributors (line 47) | async function fetchAllContributors(organizationName: string, packageNam...
type useContributorsProps (line 59) | interface useContributorsProps {
function useContributors (line 65) | function useContributors({ organizationName, packageName, excludedContri...
FILE: packages/docs/src/pages/welcome/hero/FloatingObjects.tsx
function mapRange (line 13) | function mapRange(value: number, fromLow: number, fromHigh: number, toLo...
type FloatingObjectProps (line 21) | interface FloatingObjectProps {
function FloatingObject (line 35) | function FloatingObject({
function FloatingObjects (line 104) | function FloatingObjects() {
FILE: packages/docs/src/pages/welcome/hero/Hero.tsx
function Hero (line 9) | function Hero() {
FILE: packages/docs/src/pages/welcome/hero/ResourceButton.tsx
function ResourceButton (line 5) | function ResourceButton({
FILE: packages/docs/src/pages/welcome/hero/icons/FigmaIcon.tsx
function FigmaIcon (line 3) | function FigmaIcon() {
FILE: packages/docs/src/pages/welcome/hero/icons/GitHubIcon.tsx
function GitHubIcon (line 3) | function GitHubIcon() {
FILE: packages/docs/src/pages/welcome/hero/icons/HeroAbstractFluidShape.tsx
function HeroAbstractFluidShape (line 3) | function HeroAbstractFluidShape() {
FILE: packages/docs/src/pages/welcome/hero/icons/HeroArrowCrossShape.tsx
function HeroArrowCrossShape (line 3) | function HeroArrowCrossShape() {
FILE: packages/docs/src/pages/welcome/hero/icons/HeroCircleShape.tsx
function HeroCircleShape (line 3) | function HeroCircleShape() {
FILE: packages/docs/src/pages/welcome/hero/icons/HeroCircleShapeTeal.tsx
function HeroCircleShapeTeal (line 3) | function HeroCircleShapeTeal() {
FILE: packages/docs/src/pages/welcome/hero/icons/HeroCloverShape.tsx
function HeroCloverShape (line 3) | function HeroCloverShape() {
FILE: packages/docs/src/pages/welcome/hero/icons/HeroCloverShapeGreen.tsx
function HeroCloverShapeGreen (line 3) | function HeroCloverShapeGreen() {
FILE: packages/docs/src/pages/welcome/hero/icons/HeroHeartShape.tsx
function HeroHeartShape (line 3) | function HeroHeartShape() {
FILE: packages/docs/src/pages/welcome/resources/ResourceCard.tsx
function ResourceCard (line 6) | function ResourceCard({
FILE: packages/docs/src/pages/welcome/resources/Resources.tsx
function Resources (line 13) | function Resources() {
FILE: packages/docs/src/utils/createStoryMetaSettingsDecorator.ts
function createStoryMetaSettingsDecorator (line 9) | function createStoryMetaSettingsDecorator({
FILE: packages/hooks/src/useClickOutside/index.ts
function useClickOutside (line 4) | function useClickOutside({
FILE: packages/hooks/src/useIsOverflowing/index.ts
function checkOverflow (line 4) | function checkOverflow(element: HTMLElement, ignoreHeightOverflow: boole...
function useIsOverflowing (line 13) | function useIsOverflowing({
FILE: packages/hooks/src/useResizeObserver/index.ts
type ResizeCallback (line 4) | type ResizeCallback = ({ borderBoxSize }: { borderBoxSize: ResizeObserve...
function useResizeObserver (line 6) | function useResizeObserver({
FILE: packages/hooks/vitest.setup.mjs
class ResizeObserver (line 6) | class ResizeObserver {
method observe (line 7) | observe() {}
method unobserve (line 8) | unobserve() {}
method disconnect (line 9) | disconnect() {}
FILE: packages/icons/scripts/generate-lazy-icons.js
constant REACT_ICONS_FOLDER (line 4) | const REACT_ICONS_FOLDER = path.resolve("./src/react");
constant LAZY_EXPORTS_FOLDER (line 5) | const LAZY_EXPORTS_FOLDER = path.resolve("./src/lazy");
FILE: packages/icons/scripts/generate-meta.js
function addFiles (line 9) | async function addFiles() {
FILE: packages/icons/scripts/generate-svg-index.js
constant SVG_FOLDER (line 4) | const SVG_FOLDER = "./src/svg";
constant INDEX_FILE (line 5) | const INDEX_FILE = `${SVG_FOLDER}/index.ts`;
FILE: packages/icons/scripts/metadata-util.js
constant ICONS_FOLDERS (line 3) | const ICONS_FOLDERS = path.resolve("./src/svg/");
constant METADATA_FILENAME (line 4) | const METADATA_FILENAME = "iconsMetaData.ts";
constant METADATA_FILE_PATH (line 5) | const METADATA_FILE_PATH = path.resolve("./src") + "/" + METADATA_FILENAME;
function getIconsFiles (line 7) | function getIconsFiles() {
function getIconsMetaFiles (line 11) | function getIconsMetaFiles() {
function getFilesWithNoMetadata (line 17) | function getFilesWithNoMetadata() {
FILE: packages/icons/scripts/utils.js
constant EXCEPTIONAL_ICONS (line 2) | const EXCEPTIONAL_ICONS = ["ConnectedDoc.svg"];
constant ALLOWED_COLORS (line 3) | const ALLOWED_COLORS = ["currentColor", "none"];
function isEligibleForValidation (line 5) | function isEligibleForValidation(svgFile) {
function validateColors (line 9) | function validateColors(colors, svgFileName, allowedColors = ALLOWED_COL...
function extractColorsFromSvg (line 17) | function extractColorsFromSvg(content) {
function colorErrorMessage (line 25) | function colorErrorMessage(message) {
function generateErrorMessage (line 29) | function generateErrorMessage(attribute, color, svgFileName) {
FILE: packages/icons/scripts/validate-icons-colors.js
constant SVGS_PATH (line 9) | const SVGS_PATH = "src/svg";
function validateSvgFile (line 11) | function validateSvgFile(name, content) {
function readSvgFileContent (line 16) | function readSvgFileContent(svgFilePath) {
function validateAllSvgsInPath (line 20) | function validateAllSvgsInPath(path) {
FILE: packages/icons/src/iconsMetaData.ts
constant BASIC (line 1) | const BASIC = "Basic";
constant PLATFORM (line 2) | const PLATFORM = "Platform";
constant VIEW (line 3) | const VIEW = "View";
type Icon (line 4) | type Icon = {
FILE: packages/icons/src/react/API.tsx
type APIProps (line 4) | interface APIProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Academy.tsx
type AcademyProps (line 4) | interface AcademyProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Activity.tsx
type ActivityProps (line 4) | interface ActivityProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Add.tsx
type AddProps (line 4) | interface AddProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/AddNewDoc.tsx
type AddNewDocProps (line 4) | interface AddNewDocProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/AddSmall.tsx
type AddSmallProps (line 4) | interface AddSmallProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/AddToTeam.tsx
type AddToTeamProps (line 4) | interface AddToTeamProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/AddUpdate.tsx
type AddUpdateProps (line 4) | interface AddUpdateProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Alert.tsx
type AlertProps (line 4) | interface AlertProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/AlignCenter.tsx
type AlignCenterProps (line 4) | interface AlignCenterProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/AlignLeft.tsx
type AlignLeftProps (line 4) | interface AlignLeftProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/AlignRight.tsx
type AlignRightProps (line 4) | interface AlignRightProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Announcement.tsx
type AnnouncementProps (line 4) | interface AnnouncementProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Apps.tsx
type AppsProps (line 4) | interface AppsProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Archive.tsx
type ArchiveProps (line 4) | interface ArchiveProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Attach.tsx
type AttachProps (line 4) | interface AttachProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Baseline.tsx
type BaselineProps (line 4) | interface BaselineProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Basic.tsx
type BasicProps (line 4) | interface BasicProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Battery.tsx
type BatteryProps (line 4) | interface BatteryProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/BlockQuote.tsx
type BlockQuoteProps (line 4) | interface BlockQuoteProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Board.tsx
type BoardProps (line 4) | interface BoardProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/BoardPrivate.tsx
type BoardPrivateProps (line 4) | interface BoardPrivateProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/BoardShareable.tsx
type BoardShareableProps (line 4) | interface BoardShareableProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/BoardTemplate.tsx
type BoardTemplateProps (line 4) | interface BoardTemplateProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Bold.tsx
type BoldProps (line 4) | interface BoldProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Bolt.tsx
type BoltProps (line 4) | interface BoltProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Bookmark.tsx
type BookmarkProps (line 4) | interface BookmarkProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Broadcast.tsx
type BroadcastProps (line 4) | interface BroadcastProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Broom.tsx
type BroomProps (line 4) | interface BroomProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Bug.tsx
type BugProps (line 4) | interface BugProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Bullet.tsx
type BulletProps (line 4) | interface BulletProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Bullets.tsx
type BulletsProps (line 4) | interface BulletsProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Bulllet.tsx
type BullletProps (line 4) | interface BullletProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Calendar.tsx
type CalendarProps (line 4) | interface CalendarProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Chart.tsx
type ChartProps (line 4) | interface ChartProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Check.tsx
type CheckProps (line 4) | interface CheckProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/CheckList.tsx
type CheckListProps (line 4) | interface CheckListProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Checkbox.tsx
type CheckboxProps (line 4) | interface CheckboxProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/ClassicFolder.tsx
type ClassicFolderProps (line 4) | interface ClassicFolderProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Clear.tsx
type ClearProps (line 4) | interface ClearProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Clipboard.tsx
type ClipboardProps (line 4) | interface ClipboardProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Close.tsx
type CloseProps (line 4) | interface CloseProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/CloseMedium.tsx
type CloseMediumProps (line 4) | interface CloseMediumProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/CloseRound.tsx
type CloseRoundProps (line 4) | interface CloseRoundProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/CloseSmall.tsx
type CloseSmallProps (line 4) | interface CloseSmallProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Code.tsx
type CodeProps (line 4) | interface CodeProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Collapse.tsx
type CollapseProps (line 4) | interface CollapseProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/CollapseHorizontally.tsx
type CollapseHorizontallyProps (line 4) | interface CollapseHorizontallyProps extends React.SVGAttributes<SVGEleme...
FILE: packages/icons/src/react/CollapseRound.tsx
type CollapseRoundProps (line 4) | interface CollapseRoundProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Column.tsx
type ColumnProps (line 4) | interface ColumnProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Comment.tsx
type CommentProps (line 4) | interface CommentProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Completed.tsx
type CompletedProps (line 4) | interface CompletedProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Connect.tsx
type ConnectProps (line 4) | interface ConnectProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/ConnectedDoc.tsx
type ConnectedDocProps (line 4) | interface ConnectedDocProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/ContentDirectory.tsx
type ContentDirectoryProps (line 4) | interface ContentDirectoryProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/ConvertToItem.tsx
type ConvertToItemProps (line 4) | interface ConvertToItemProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/ConvertToSubitem.tsx
type ConvertToSubitemProps (line 4) | interface ConvertToSubitemProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Counter.tsx
type CounterProps (line 4) | interface CounterProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Country.tsx
type CountryProps (line 4) | interface CountryProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/CreditCard.tsx
type CreditCardProps (line 4) | interface CreditCardProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Custom.tsx
type CustomProps (line 4) | interface CustomProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Cut.tsx
type CutProps (line 4) | interface CutProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Dashboard.tsx
type DashboardProps (line 4) | interface DashboardProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/DashboardPrivate.tsx
type DashboardPrivateProps (line 4) | interface DashboardPrivateProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Deactivate.tsx
type DeactivateProps (line 4) | interface DeactivateProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Delete.tsx
type DeleteProps (line 4) | interface DeleteProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Dependency.tsx
type DependencyProps (line 4) | interface DependencyProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Description.tsx
type DescriptionProps (line 4) | interface DescriptionProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/DisabledUser.tsx
type DisabledUserProps (line 4) | interface DisabledUserProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Divider.tsx
type DividerProps (line 4) | interface DividerProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Doc.tsx
type DocProps (line 4) | interface DocProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/DocPrivate.tsx
type DocPrivateProps (line 4) | interface DocPrivateProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/DocShareable.tsx
type DocShareableProps (line 4) | interface DocShareableProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/DocTemplate.tsx
type DocTemplateProps (line 4) | interface DocTemplateProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/DoubleCheck.tsx
type DoubleCheckProps (line 4) | interface DoubleCheckProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Downgrade.tsx
type DowngradeProps (line 4) | interface DowngradeProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Download.tsx
type DownloadProps (line 4) | interface DownloadProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Drag.tsx
type DragProps (line 4) | interface DragProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Dropdown.tsx
type DropdownProps (line 4) | interface DropdownProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/DropdownChevronDown.tsx
type DropdownChevronDownProps (line 4) | interface DropdownChevronDownProps extends React.SVGAttributes<SVGElemen...
FILE: packages/icons/src/react/DropdownChevronLeft.tsx
type DropdownChevronLeftProps (line 4) | interface DropdownChevronLeftProps extends React.SVGAttributes<SVGElemen...
FILE: packages/icons/src/react/DropdownChevronRight.tsx
type DropdownChevronRightProps (line 4) | interface DropdownChevronRightProps extends React.SVGAttributes<SVGEleme...
FILE: packages/icons/src/react/DropdownChevronUp.tsx
type DropdownChevronUpProps (line 4) | interface DropdownChevronUpProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/DueDate.tsx
type DueDateProps (line 4) | interface DueDateProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Duplicate.tsx
type DuplicateProps (line 4) | interface DuplicateProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Edit.tsx
type EditProps (line 4) | interface EditProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Education.tsx
type EducationProps (line 4) | interface EducationProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Email.tsx
type EmailProps (line 4) | interface EmailProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Embed.tsx
type EmbedProps (line 4) | interface EmbedProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Emoji.tsx
type EmojiProps (line 4) | interface EmojiProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Enter.tsx
type EnterProps (line 4) | interface EnterProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/EnterArrow.tsx
type EnterArrowProps (line 4) | interface EnterArrowProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Erase.tsx
type EraseProps (line 4) | interface EraseProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Event.tsx
type EventProps (line 4) | interface EventProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Expand.tsx
type ExpandProps (line 4) | interface ExpandProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/ExternalPage.tsx
type ExternalPageProps (line 4) | interface ExternalPageProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Favorite.tsx
type FavoriteProps (line 4) | interface FavoriteProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Feedback.tsx
type FeedbackProps (line 4) | interface FeedbackProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/File.tsx
type FileProps (line 4) | interface FileProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Files.tsx
type FilesProps (line 4) | interface FilesProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Filter.tsx
type FilterProps (line 4) | interface FilterProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Folder.tsx
type FolderProps (line 4) | interface FolderProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Form.tsx
type FormProps (line 4) | interface FormProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Formula.tsx
type FormulaProps (line 4) | interface FormulaProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Forum.tsx
type ForumProps (line 4) | interface ForumProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Forward.tsx
type ForwardProps (line 4) | interface ForwardProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Fullscreen.tsx
type FullscreenProps (line 4) | interface FullscreenProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/FullscreenClose.tsx
type FullscreenCloseProps (line 4) | interface FullscreenCloseProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Gallery.tsx
type GalleryProps (line 4) | interface GalleryProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Gantt.tsx
type GanttProps (line 4) | interface GanttProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Gif.tsx
type GifProps (line 4) | interface GifProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Globe.tsx
type GlobeProps (line 4) | interface GlobeProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Graph.tsx
type GraphProps (line 4) | interface GraphProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Group.tsx
type GroupProps (line 4) | interface GroupProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Guest.tsx
type GuestProps (line 4) | interface GuestProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Health.tsx
type HealthProps (line 4) | interface HealthProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Heart.tsx
type HeartProps (line 4) | interface HeartProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Help.tsx
type HelpProps (line 4) | interface HelpProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Hide.tsx
type HideProps (line 4) | interface HideProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Highlight.tsx
type HighlightProps (line 4) | interface HighlightProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/HighlightColorBucket.tsx
type HighlightColorBucketProps (line 4) | interface HighlightColorBucketProps extends React.SVGAttributes<SVGEleme...
FILE: packages/icons/src/react/Home.tsx
type HomeProps (line 4) | interface HomeProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/IPRestrictions.tsx
type IPRestrictionsProps (line 4) | interface IPRestrictionsProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Idea.tsx
type IdeaProps (line 4) | interface IdeaProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Image.tsx
type ImageProps (line 4) | interface ImageProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Inbox.tsx
type InboxProps (line 4) | interface InboxProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Info.tsx
type InfoProps (line 4) | interface InfoProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Integrations.tsx
type IntegrationsProps (line 4) | interface IntegrationsProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Invite.tsx
type InviteProps (line 4) | interface InviteProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Italic.tsx
type ItalicProps (line 4) | interface ItalicProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Item.tsx
type ItemProps (line 4) | interface ItemProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/ItemDefaultValues.tsx
type ItemDefaultValuesProps (line 4) | interface ItemDefaultValuesProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/ItemHeightDouble.tsx
type ItemHeightDoubleProps (line 4) | interface ItemHeightDoubleProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/ItemHeightSingle.tsx
type ItemHeightSingleProps (line 4) | interface ItemHeightSingleProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/ItemHeightTriple.tsx
type ItemHeightTripleProps (line 4) | interface ItemHeightTripleProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Key.tsx
type KeyProps (line 4) | interface KeyProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Keyboard.tsx
type KeyboardProps (line 4) | interface KeyboardProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Labs.tsx
type LabsProps (line 4) | interface LabsProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Launch.tsx
type LaunchProps (line 4) | interface LaunchProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Layout.tsx
type LayoutProps (line 4) | interface LayoutProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/LearnMore.tsx
type LearnMoreProps (line 4) | interface LearnMoreProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Lines.tsx
type LinesProps (line 4) | interface LinesProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Link.tsx
type LinkProps (line 4) | interface LinkProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Location.tsx
type LocationProps (line 4) | interface LocationProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Locked.tsx
type LockedProps (line 4) | interface LockedProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/LogIn.tsx
type LogInProps (line 4) | interface LogInProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/LogOut.tsx
type LogOutProps (line 4) | interface LogOutProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/LongText.tsx
type LongTextProps (line 4) | interface LongTextProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Mention.tsx
type MentionProps (line 4) | interface MentionProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Menu.tsx
type MenuProps (line 4) | interface MenuProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Microphone.tsx
type MicrophoneProps (line 4) | interface MicrophoneProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Minimize.tsx
type MinimizeProps (line 4) | interface MinimizeProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/MinusSmall.tsx
type MinusSmallProps (line 4) | interface MinusSmallProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Mirror.tsx
type MirrorProps (line 4) | interface MirrorProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Mobile.tsx
type MobileProps (line 4) | interface MobileProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/MondayDoc.tsx
type MondayDocProps (line 4) | interface MondayDocProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/MondayLogoOutline.tsx
type MondayLogoOutlineProps (line 4) | interface MondayLogoOutlineProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Moon.tsx
type MoonProps (line 4) | interface MoonProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/MoreActions.tsx
type MoreActionsProps (line 4) | interface MoreActionsProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/MoreBelow.tsx
type MoreBelowProps (line 4) | interface MoreBelowProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/MoreBelowFilled.tsx
type MoreBelowFilledProps (line 4) | interface MoreBelowFilledProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Move.tsx
type MoveProps (line 4) | interface MoveProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/MoveArrowDown.tsx
type MoveArrowDownProps (line 4) | interface MoveArrowDownProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/MoveArrowLeft.tsx
type MoveArrowLeftProps (line 4) | interface MoveArrowLeftProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/MoveArrowLeftDouble.tsx
type MoveArrowLeftDoubleProps (line 4) | interface MoveArrowLeftDoubleProps extends React.SVGAttributes<SVGElemen...
FILE: packages/icons/src/react/MoveArrowLeftNarrow.tsx
type MoveArrowLeftNarrowProps (line 4) | interface MoveArrowLeftNarrowProps extends React.SVGAttributes<SVGElemen...
FILE: packages/icons/src/react/MoveArrowRight.tsx
type MoveArrowRightProps (line 4) | interface MoveArrowRightProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/MoveArrowRightNarrow.tsx
type MoveArrowRightNarrowProps (line 4) | interface MoveArrowRightNarrowProps extends React.SVGAttributes<SVGEleme...
FILE: packages/icons/src/react/MoveArrowUp.tsx
type MoveArrowUpProps (line 4) | interface MoveArrowUpProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Mute.tsx
type MuteProps (line 4) | interface MuteProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/MyWeek.tsx
type MyWeekProps (line 4) | interface MyWeekProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/NavigationArrow.tsx
type NavigationArrowProps (line 4) | interface NavigationArrowProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/NavigationChevronDown.tsx
type NavigationChevronDownProps (line 4) | interface NavigationChevronDownProps extends React.SVGAttributes<SVGElem...
FILE: packages/icons/src/react/NavigationChevronLeft.tsx
type NavigationChevronLeftProps (line 4) | interface NavigationChevronLeftProps extends React.SVGAttributes<SVGElem...
FILE: packages/icons/src/react/NavigationChevronRight.tsx
type NavigationChevronRightProps (line 4) | interface NavigationChevronRightProps extends React.SVGAttributes<SVGEle...
FILE: packages/icons/src/react/NavigationChevronUp.tsx
type NavigationChevronUpProps (line 4) | interface NavigationChevronUpProps extends React.SVGAttributes<SVGElemen...
FILE: packages/icons/src/react/NavigationDoubleChevronLeft.tsx
type NavigationDoubleChevronLeftProps (line 4) | interface NavigationDoubleChevronLeftProps extends React.SVGAttributes<S...
FILE: packages/icons/src/react/NewTab.tsx
type NewTabProps (line 4) | interface NewTabProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Night.tsx
type NightProps (line 4) | interface NightProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/NoColor.tsx
type NoColorProps (line 4) | interface NoColorProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Note.tsx
type NoteProps (line 4) | interface NoteProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/NotificationChecked.tsx
type NotificationCheckedProps (line 4) | interface NotificationCheckedProps extends React.SVGAttributes<SVGElemen...
FILE: packages/icons/src/react/Notifications.tsx
type NotificationsProps (line 4) | interface NotificationsProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/NotificationsMuted.tsx
type NotificationsMutedProps (line 4) | interface NotificationsMutedProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Numbers.tsx
type NumbersProps (line 4) | interface NumbersProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Offline.tsx
type OfflineProps (line 4) | interface OfflineProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Open.tsx
type OpenProps (line 4) | interface OpenProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/PDF.tsx
type PDFProps (line 4) | interface PDFProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Page.tsx
type PageProps (line 4) | interface PageProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Paste.tsx
type PasteProps (line 4) | interface PasteProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Pause.tsx
type PauseProps (line 4) | interface PauseProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Person.tsx
type PersonProps (line 4) | interface PersonProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/PersonRound.tsx
type PersonRoundProps (line 4) | interface PersonRoundProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Pin.tsx
type PinProps (line 4) | interface PinProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/PinFull.tsx
type PinFullProps (line 4) | interface PinFullProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Placeholder.tsx
type PlaceholderProps (line 4) | interface PlaceholderProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Play.tsx
type PlayProps (line 4) | interface PlayProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Print.tsx
type PrintProps (line 4) | interface PrintProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Prompt.tsx
type PromptProps (line 4) | interface PromptProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/PushNotification.tsx
type PushNotificationProps (line 4) | interface PushNotificationProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Quote.tsx
type QuoteProps (line 4) | interface QuoteProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Radio.tsx
type RadioProps (line 4) | interface RadioProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Recurring.tsx
type RecurringProps (line 4) | interface RecurringProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/RecycleBin.tsx
type RecycleBinProps (line 4) | interface RecycleBinProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Redo.tsx
type RedoProps (line 4) | interface RedoProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Remove.tsx
type RemoveProps (line 4) | interface RemoveProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/RemoveRound.tsx
type RemoveRoundProps (line 4) | interface RemoveRoundProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Reply.tsx
type ReplyProps (line 4) | interface ReplyProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/ReplyAll.tsx
type ReplyAllProps (line 4) | interface ReplyAllProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Retry.tsx
type RetryProps (line 4) | interface RetryProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Robot.tsx
type RobotProps (line 4) | interface RobotProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Rotate.tsx
type RotateProps (line 4) | interface RotateProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/ScheduledEmail.tsx
type ScheduledEmailProps (line 4) | interface ScheduledEmailProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/ScheduledSend.tsx
type ScheduledSendProps (line 4) | interface ScheduledSendProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Search.tsx
type SearchProps (line 4) | interface SearchProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Security.tsx
type SecurityProps (line 4) | interface SecurityProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Send.tsx
type SendProps (line 4) | interface SendProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Settings.tsx
type SettingsProps (line 4) | interface SettingsProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/SettingsKnobs.tsx
type SettingsKnobsProps (line 4) | interface SettingsKnobsProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Share.tsx
type ShareProps (line 4) | interface ShareProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/ShortText.tsx
type ShortTextProps (line 4) | interface ShortTextProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Show.tsx
type ShowProps (line 4) | interface ShowProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Shredder.tsx
type ShredderProps (line 4) | interface ShredderProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Shuffle.tsx
type ShuffleProps (line 4) | interface ShuffleProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Signature.tsx
type SignatureProps (line 4) | interface SignatureProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Sort.tsx
type SortProps (line 4) | interface SortProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/SortAscending.tsx
type SortAscendingProps (line 4) | interface SortAscendingProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/SortDescending.tsx
type SortDescendingProps (line 4) | interface SortDescendingProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Sound.tsx
type SoundProps (line 4) | interface SoundProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Status.tsx
type StatusProps (line 4) | interface StatusProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/StrikethroughS.tsx
type StrikethroughSProps (line 4) | interface StrikethroughSProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/StrikethroughT.tsx
type StrikethroughTProps (line 4) | interface StrikethroughTProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Subitems.tsx
type SubitemsProps (line 4) | interface SubitemsProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Sun.tsx
type SunProps (line 4) | interface SunProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Switch.tsx
type SwitchProps (line 4) | interface SwitchProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Switcher.tsx
type SwitcherProps (line 4) | interface SwitcherProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Table.tsx
type TableProps (line 4) | interface TableProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Tags.tsx
type TagsProps (line 4) | interface TagsProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Team.tsx
type TeamProps (line 4) | interface TeamProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Text.tsx
type TextProps (line 4) | interface TextProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/TextBig.tsx
type TextBigProps (line 4) | interface TextBigProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/TextColorIndicator.tsx
type TextColorIndicatorProps (line 4) | interface TextColorIndicatorProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/TextCopy.tsx
type TextCopyProps (line 4) | interface TextCopyProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/TextFormatting.tsx
type TextFormattingProps (line 4) | interface TextFormattingProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/TextHuge.tsx
type TextHugeProps (line 4) | interface TextHugeProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/TextMedium.tsx
type TextMediumProps (line 4) | interface TextMediumProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/TextSmall.tsx
type TextSmallProps (line 4) | interface TextSmallProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Textcolor.tsx
type TextcolorProps (line 4) | interface TextcolorProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/ThumbsDown.tsx
type ThumbsDownProps (line 4) | interface ThumbsDownProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/ThumbsUp.tsx
type ThumbsUpProps (line 4) | interface ThumbsUpProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Time.tsx
type TimeProps (line 4) | interface TimeProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Timeline.tsx
type TimelineProps (line 4) | interface TimelineProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Translation.tsx
type TranslationProps (line 4) | interface TranslationProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/TurnInto.tsx
type TurnIntoProps (line 4) | interface TurnIntoProps extends React.SVGAttributes<SVGElement> {
FILE: packages/icons/src/react/Underline.tsx
type UnderlineProps (line 4) | interface UnderlineProps extends React.SVGAttributes<SV
Condensed preview — 2520 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (7,548K chars).
[
{
"path": ".claude/skills/vibe-breaking-change/SKILL.md",
"chars": 20641,
"preview": "---\nname: vibe-breaking-change\ndescription: Implements Vibe Design System breaking changes with full workflow automation"
},
{
"path": ".claude/skills/vibe-breaking-change/references/codemod-best-practices.md",
"chars": 7316,
"preview": "# Codemod Best Practices for Vibe Breaking Changes\n\n## Lessons Learned from Real Implementation\n\nThis guide covers criti"
},
{
"path": ".claude/skills/vibe-breaking-change/references/codemod-examples.md",
"chars": 3264,
"preview": "# Codemod Examples for Vibe Breaking Changes\n\n## Simple Prop Rename\n\n```typescript\n// Transform: oldProp → newProp\nimpor"
},
{
"path": ".claude/skills/vibe-breaking-change/references/dependency-analysis.md",
"chars": 4032,
"preview": "# Dependency Analysis for Breaking Changes\n\n## Component Dependency Mapping\n\n### Finding Direct Dependencies\n\n```bash\n# "
},
{
"path": ".claude/skills/vibe-breaking-change/references/pr-templates.md",
"chars": 6978,
"preview": "# PR and Documentation Templates\n\n## PR Template for Breaking Changes\n\n### PR Title Format\n\nFollow [Conventional Commits"
},
{
"path": ".claude/skills/vibe-breaking-change/references/testing-validation.md",
"chars": 5566,
"preview": "# Testing and Validation for Breaking Changes\n\n## Testing Strategy\n\n### 1. Unit Tests\nTest individual component behavior"
},
{
"path": ".claude/skills/vibe-breaking-change/references/workflow-checklist.md",
"chars": 5042,
"preview": "# Complete Breaking Change Workflow Checklist\n\n## Pre-Implementation Phase\n\n### Planning and Analysis\n- [ ] Breaking cha"
},
{
"path": ".cursor/rules/accessibility-guidelines.mdc",
"chars": 4631,
"preview": "---\ndescription: Provides general web accessibility guidelines for developing components in the `@vibe/core` library (un"
},
{
"path": ".cursor/rules/base-components.mdc",
"chars": 8599,
"preview": "---\ndescription: \"Comprehensive guide for base components in `@vibe/core` library (BaseInput, BaseList, BaseListItem, In"
},
{
"path": ".cursor/rules/ci-cd-workflows.mdc",
"chars": 2533,
"preview": "---\ndescription: This rule provides guidance on the CI/CD pipeline, GitHub Actions workflows (defined in .github/workflo"
},
{
"path": ".cursor/rules/component-internal-structure.mdc",
"chars": 7309,
"preview": "---\ndescription: \"This rule defines conventions for the internal structure of React components within the `@vibe/core` l"
},
{
"path": ".cursor/rules/dependency-management.mdc",
"chars": 1749,
"preview": "---\ndescription: Provides guidelines for managing dependencies in this monorepo. Use this rule when you are considering "
},
{
"path": ".cursor/rules/file-structures.mdc",
"chars": 4813,
"preview": "---\ndescription: \"Outlines file and directory structure conventions within the `@vibe/core` package (located in `package"
},
{
"path": ".cursor/rules/layout-components.mdc",
"chars": 8371,
"preview": "---\ndescription: Guidelines for using Box and Flex layout components in the @vibe/core library instead of custom CSS for"
},
{
"path": ".cursor/rules/monorepo-structure.mdc",
"chars": 2400,
"preview": "---\ndescription: This rule explains the monorepo's structure, including package locations, file organization conventions"
},
{
"path": ".cursor/rules/naming-conventions.mdc",
"chars": 7816,
"preview": "---\ndescription: \"Defines naming conventions for files, directories, components, props, variables, types, and CSS classe"
},
{
"path": ".cursor/rules/new-component-implementation.mdc",
"chars": 10745,
"preview": "---\ndescription: \"Provides a systematic, research-driven workflow for implementing new Vibe components - for the @vibe/c"
},
{
"path": ".cursor/rules/package-separation.mdc",
"chars": 14307,
"preview": "# Package Separation Guide\n\nThis rule provides a systematic approach for separating components from the `@vibe/core` pac"
},
{
"path": ".cursor/rules/playground-reproduce.mdc",
"chars": 5768,
"preview": "---\ndescription: Use when creating interactive examples for Vibe's Storybook Playground (vibe.monday.com/playground) - i"
},
{
"path": ".cursor/rules/react-context.mdc",
"chars": 5045,
"preview": "---\ndescription: \"This rule outlines the standard practices for creating, structuring, and utilizing React Context, prim"
},
{
"path": ".cursor/rules/storybook-stories.mdc",
"chars": 20804,
"preview": "---\ndescription: \"Guides the creation and modification of Storybook files specifically within the 'packages/docs' packag"
},
{
"path": ".cursor/rules/styling-conventions.mdc",
"chars": 7901,
"preview": "---\ndescription: \"Provides comprehensive guidelines for writing CSS Modules specifically for UI components within the `@"
},
{
"path": ".cursor/templates/package-separation/QUICK_REFERENCE.md",
"chars": 5330,
"preview": "# Package Separation Quick Reference\n\n## For AI: Prompt to Use\n\n```\n@.cursor/rules/package-separation.mdc Separate the ["
},
{
"path": ".cursor/templates/package-separation/README.md",
"chars": 5034,
"preview": "# Package Separation Templates\n\nThese templates are used when separating a component from `@vibe/core` into its own pack"
},
{
"path": ".cursor/templates/package-separation/files.d.ts",
"chars": 272,
"preview": "// SCSS\ndeclare module \"*.module.scss\" {\n const classes: { [key: string]: string };\n export default classes;\n}\n\n// SVG"
},
{
"path": ".cursor/templates/package-separation/main-index.ts",
"chars": 142,
"preview": "// Template for src/index.ts\n// This file simply re-exports everything from the component subdirectory\n\nexport * from \"."
},
{
"path": ".cursor/templates/package-separation/package.json",
"chars": 1692,
"preview": "{\n \"name\": \"@vibe/{{PACKAGE_NAME}}\",\n \"version\": \"3.0.0\",\n \"description\": \"Vibe sub-package for {{COMPONENT_NAME}} co"
},
{
"path": ".cursor/templates/package-separation/rollup.config.mjs",
"chars": 73,
"preview": "import config from \"@vibe/config/rollup.config\";\n\nexport default config;\n"
},
{
"path": ".cursor/templates/package-separation/subdirectory-index.ts",
"chars": 555,
"preview": "// Template for src/{{ComponentName}}/index.ts\n// Replace {{ComponentName}}, {{EnumName1}}, {{EnumName2}}, etc. with act"
},
{
"path": ".cursor/templates/package-separation/tsconfig.json",
"chars": 137,
"preview": "{\n \"extends\": \"@vibe/config/tsconfig\",\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"rootDir\": \"src\"\n },\n \"include\""
},
{
"path": ".cursor/templates/package-separation/vitest.config.mjs",
"chars": 133,
"preview": "import config from \"@vibe/config/vitest.config\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n ."
},
{
"path": ".cursor/templates/package-separation/vitest.setup.mjs",
"chars": 442,
"preview": "import { vi } from \"vitest\";\nimport \"@testing-library/jest-dom\";\nimport React from \"react\";\n\n// Mock ResizeObserver\nclas"
},
{
"path": ".github/CODEOWNERS",
"chars": 153,
"preview": "# Default codeowners for all files\n* @mondaycom/vibe\n\n# Testkit package - testing utilities and Playwright configuration"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.yml",
"chars": 2138,
"preview": "name: \"\\U0001F41E Bug report\"\ndescription: Create a bug report\ntitle: \"[Bug]: \"\nlabels: [\"bug\"]\nbody:\n - type: markdown"
},
{
"path": ".github/ISSUE_TEMPLATE/config.yml",
"chars": 309,
"preview": "blank_issues_enabled: false\ncontact_links:\n - name: Feature Request\n url: https://github.com/mondaycom/vibe/discussi"
},
{
"path": ".github/PULL_REQUEST_TEMPLATE.md",
"chars": 478,
"preview": "<!-- Thank you for contributing!\nBefore we can review your submission, please fill the information below:\n\nPlease descri"
},
{
"path": ".github/actions/check-changed-packages/action.yml",
"chars": 1268,
"preview": "name: Check Changed Packages\ndescription: Check if there are any changed packages in the monorepo\n\ninputs:\n exit_on_no_"
},
{
"path": ".github/actions/determine-lerna-since-flag/action.yml",
"chars": 841,
"preview": "name: Determine Lerna since flag\ndescription: Determine the --since flag value for Lerna commands based on the branch. S"
},
{
"path": ".github/actions/download-builds/action.yml",
"chars": 337,
"preview": "name: Download and Extract Build Artifacts\ndescription: Download build artifacts for all the packages and extract them t"
},
{
"path": ".github/actions/git-creds/action.yml",
"chars": 277,
"preview": "name: \"Git credentials setup\"\ndescription: \"Set up git credentials\"\n\nruns:\n using: \"composite\"\n steps:\n - name: Set"
},
{
"path": ".github/actions/setup/action.yml",
"chars": 701,
"preview": "name: \"CI/CD setup\"\ndescription: \"Setup the CI/CD environment\"\n\ninputs:\n npm_token:\n description: \"NPM token secret\""
},
{
"path": ".github/workflows/build-and-upload.yml",
"chars": 1841,
"preview": "name: Build and Upload Artifacts\n\non:\n workflow_call:\n inputs:\n skip_release_artifacts:\n description: Wh"
},
{
"path": ".github/workflows/bundle-size.yml",
"chars": 2128,
"preview": "name: Bundle Size Analysis\n\non:\n pull_request:\n paths:\n - \"packages/core/src/components/**\"\n - \"packages/c"
},
{
"path": ".github/workflows/chromatic.yml",
"chars": 1054,
"preview": "name: Chromatic\n\non:\n pull_request:\n types: [opened, synchronize]\n push:\n branches:\n - master\n\njobs:\n buil"
},
{
"path": ".github/workflows/merge-queue.yml",
"chars": 330,
"preview": "name: Merge Queue Checks\n\non:\n merge_group:\n types:\n - checks_requested\n\njobs:\n commitlint:\n name: Commit L"
},
{
"path": ".github/workflows/performance.yml",
"chars": 3535,
"preview": "name: Performance Testing\n\non:\n workflow_dispatch:\n # pull_request:\n # paths:\n # - \"packages/core/src/componen"
},
{
"path": ".github/workflows/pr.yml",
"chars": 598,
"preview": "name: PR Checks\n\non:\n pull_request:\n types: [opened, synchronize]\n\njobs:\n build:\n name: Build\n uses: ./.githu"
},
{
"path": ".github/workflows/prerelease.yml",
"chars": 2773,
"preview": "name: Prerelease\n\non:\n push:\n branches-ignore:\n - \"master\"\n\njobs:\n build:\n name: Build\n if: contains(git"
},
{
"path": ".github/workflows/publish-storybook.yml",
"chars": 1081,
"preview": "name: Publish Storybooks\n\non:\n workflow_run:\n workflows: [\"Release new version\"]\n types:\n - completed\n work"
},
{
"path": ".github/workflows/release-v2.yml",
"chars": 2008,
"preview": "name: Release v2 version\n\non: workflow_dispatch\n\njobs:\n notify-release-start:\n name: Notify Slack - Release Started\n"
},
{
"path": ".github/workflows/release.yml",
"chars": 2741,
"preview": "name: Release new version\n\non: workflow_dispatch\n\njobs:\n validate-branch:\n name: Validate Branch\n runs-on: ubuntu"
},
{
"path": ".github/workflows/test.yml",
"chars": 2465,
"preview": "# Notice that for this workflow to run properly, you need to first run the build-and-upload workflow.\n# This is because "
},
{
"path": ".gitignore",
"chars": 348,
"preview": "node_modules\n.vscode\n.idea\nnpm-debug.log\nbuild-storybook.log\n./build-storybook.log\nchromatic.log\nstorybook-static\nstatic"
},
{
"path": ".nvmrc",
"chars": 7,
"preview": "v20.12\n"
},
{
"path": ".prettierrc",
"chars": 77,
"preview": "{\n \"printWidth\": 120,\n \"trailingComma\": \"none\",\n \"arrowParens\": \"avoid\"\n}\n"
},
{
"path": "CLAUDE.md",
"chars": 5654,
"preview": "# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## "
},
{
"path": "CNAME",
"chars": 24,
"preview": "https://vibe.monday.com\n"
},
{
"path": "CONTRIBUTING.md",
"chars": 2316,
"preview": "# Contribution Guide\n\nHi there! We're really excited that you're interested in contributing to Vibe. Before submitting y"
},
{
"path": "README.md",
"chars": 4288,
"preview": "<p align=\"center\">\n <img src=\"https://user-images.githubusercontent.com/60314759/147566893-63c5209a-8b83-4f32-af61-8b4c"
},
{
"path": "lerna.json",
"chars": 92,
"preview": "{\n \"$schema\": \"node_modules/lerna/schemas/lerna-schema.json\",\n \"version\": \"independent\"\n}\n"
},
{
"path": "package.json",
"chars": 685,
"preview": "{\n \"version\": \"0.0.0\",\n \"private\": true,\n \"description\": \"Vibe monorepo\",\n \"scripts\": {\n \"build\": \"lerna run buil"
},
{
"path": "packages/base/CHANGELOG.md",
"chars": 1041,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "packages/base/package.json",
"chars": 1765,
"preview": "{\n \"name\": \"@vibe/base\",\n \"version\": \"4.0.1\",\n \"description\": \"Vibe sub-package for base components\",\n \"repository\":"
},
{
"path": "packages/base/rollup.config.mjs",
"chars": 73,
"preview": "import config from \"@vibe/config/rollup.config\";\n\nexport default config;\n"
},
{
"path": "packages/base/src/BaseInput/BaseInput.module.scss",
"chars": 3491,
"preview": "@import \"~@vibe/style/dist/mixins\";\n\n.wrapper {\n width: 100%;\n position: relative;\n display: flex;\n align-items: cen"
},
{
"path": "packages/base/src/BaseInput/BaseInput.tsx",
"chars": 1194,
"preview": "import React, { forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./BaseInput.module.scss\";\nim"
},
{
"path": "packages/base/src/BaseInput/BaseInput.types.ts",
"chars": 1127,
"preview": "import { type AriaRole, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport { type VibeComponentProps, type "
},
{
"path": "packages/base/src/BaseInput/__tests__/BaseInput.test.tsx",
"chars": 4442,
"preview": "import { vi, describe, it, expect } from \"vitest\";\nimport React from \"react\";\nimport { render } from \"@testing-library/r"
},
{
"path": "packages/base/src/BaseInput/index.ts",
"chars": 87,
"preview": "export { default as BaseInput } from \"./BaseInput\";\nexport * from \"./BaseInput.types\";\n"
},
{
"path": "packages/base/src/index.ts",
"chars": 29,
"preview": "export * from \"./BaseInput\";\n"
},
{
"path": "packages/base/src/types/files.d.ts",
"chars": 272,
"preview": "// SCSS\ndeclare module \"*.module.scss\" {\n const classes: { [key: string]: string };\n export default classes;\n}\n\n// SVG"
},
{
"path": "packages/base/tsconfig.json",
"chars": 137,
"preview": "{\n \"extends\": \"@vibe/config/tsconfig\",\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"rootDir\": \"src\"\n },\n \"include\""
},
{
"path": "packages/base/vitest.config.mjs",
"chars": 133,
"preview": "import config from \"@vibe/config/vitest.config\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n ."
},
{
"path": "packages/base/vitest.setup.mjs",
"chars": 442,
"preview": "import { vi } from \"vitest\";\nimport \"@testing-library/jest-dom\";\nimport React from \"react\";\n\n// Mock ResizeObserver\nclas"
},
{
"path": "packages/codemod/.eslintrc.json",
"chars": 675,
"preview": "{\n \"parser\": \"@typescript-eslint/parser\",\n \"extends\": [\"eslint:recommended\", \"plugin:@typescript-eslint/recommended\", "
},
{
"path": "packages/codemod/.prettierignore",
"chars": 14,
"preview": "plop/**/*.hbs\n"
},
{
"path": "packages/codemod/CHANGELOG.md",
"chars": 1157,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "packages/codemod/README.md",
"chars": 2410,
"preview": "# @vibe/codemod\n\n> Vibe Design System's Codemods and CLI tools for automating migrations and transformations\n\nThe @vibe/"
},
{
"path": "packages/codemod/bin/vibe-codemod.ts",
"chars": 9466,
"preview": "#!/usr/bin/env node\nimport { join, resolve } from \"path\";\nimport { spawn, spawnSync } from \"child_process\";\nimport * as "
},
{
"path": "packages/codemod/package.json",
"chars": 1039,
"preview": "{\n \"name\": \"@vibe/codemod\",\n \"version\": \"4.0.0\",\n \"description\": \"Vibe's component library migration tool\",\n \"reposi"
},
{
"path": "packages/codemod/plop/component/test.hbs",
"chars": 517,
"preview": "import transform from \"../{{kebabCase componentName}}-component-migration\";\nimport { defineInlineTest } from \"jscodeshif"
},
{
"path": "packages/codemod/plop/component/transform-remove-props.hbs",
"chars": 769,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n removeProp\n} "
},
{
"path": "packages/codemod/plop/component/transform-update-prop-values.hbs",
"chars": 884,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n updatePropVal"
},
{
"path": "packages/codemod/plop/component/transform-update-props.hbs",
"chars": 831,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n migratePropsN"
},
{
"path": "packages/codemod/plop/component/transform-update-static-prop-key.hbs",
"chars": 817,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n updateStaticP"
},
{
"path": "packages/codemod/plop/component/transform.hbs",
"chars": 761,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n isPropExists,"
},
{
"path": "packages/codemod/plopfile.js",
"chars": 5768,
"preview": "module.exports = function (plop) {\n plop.setGenerator(\"component\", {\n description: \"Generate a codemod template and "
},
{
"path": "packages/codemod/src/consts/index.ts",
"chars": 37,
"preview": "export * from \"./vibe-import-paths\";\n"
},
{
"path": "packages/codemod/src/consts/vibe-import-paths.ts",
"chars": 225,
"preview": "export const CORE_IMPORT_PATH = \"monday-ui-react-core\";\nexport const CORE_NEXT_IMPORT_PATH = \"monday-ui-react-core/next\""
},
{
"path": "packages/codemod/src/utils/__tests__/import-utils.test.ts",
"chars": 7680,
"preview": "import jscodeshift from \"jscodeshift\";\nimport {\n findImportsThatIncludesSpecifier,\n getComponentNameOrAliasFromImports"
},
{
"path": "packages/codemod/src/utils/__tests__/prop-utils.test.ts",
"chars": 9452,
"preview": "import {\n isPropExists,\n migratePropsNames,\n removeProp,\n updateComponentNamespaceProps,\n updatePropValues,\n updat"
},
{
"path": "packages/codemod/src/utils/component-jsx-utils.ts",
"chars": 649,
"preview": "import { ASTPath, Collection, JSCodeshift, JSXElement } from \"jscodeshift\";\n\n/**\n * Finds all JSX elements that match a "
},
{
"path": "packages/codemod/src/utils/import-utils.ts",
"chars": 3792,
"preview": "import { ASTPath, Collection, ImportDeclaration, ImportSpecifier, JSCodeshift } from \"jscodeshift\";\nimport { CORE_IMPORT"
},
{
"path": "packages/codemod/src/utils/index.ts",
"chars": 190,
"preview": "export { default as wrap } from \"./wrap-transformation\";\nexport * from \"./import-utils\";\nexport * from \"./component-jsx-"
},
{
"path": "packages/codemod/src/utils/prop-utils.ts",
"chars": 7873,
"preview": "import {\n ASTPath,\n Collection,\n JSCodeshift,\n JSXAttribute,\n JSXElement,\n JSXExpressionContainer,\n JSXOpeningEle"
},
{
"path": "packages/codemod/src/utils/report-utils.ts",
"chars": 923,
"preview": "import chalk from \"chalk\";\n/**\n * Logs an error message about the usage of both deprecated and new props in same compone"
},
{
"path": "packages/codemod/src/utils/wrap-transformation.ts",
"chars": 419,
"preview": "import { Transform } from \"jscodeshift\";\nimport { TransformationContext } from \"../../types\";\n\nexport default function w"
},
{
"path": "packages/codemod/test/setup.ts",
"chars": 0,
"preview": ""
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/AttentionBox-component-migration.ts",
"chars": 784,
"preview": "import {\n findComponentElements,\n getComponentNameOrAliasFromImports,\n getCoreImportsForFile,\n migratePropsNames,\n "
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/Avatar-component-migration.ts",
"chars": 825,
"preview": "import {\n findComponentElements,\n getComponentNameOrAliasFromImports,\n getCoreImportsForFile,\n migratePropsNames,\n "
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/AvatarGroup-component-migration.ts",
"chars": 694,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n removeProp\n} "
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/Box-component-migration.ts",
"chars": 812,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n updatePropVal"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/BreadcrumbItem-component-migration.ts",
"chars": 768,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n migratePropsN"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/Button-component-migration.ts",
"chars": 766,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n migratePropsN"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/ButtonGroup-component-migration.ts",
"chars": 783,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n migratePropsN"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/Checkbox-component-migration.ts",
"chars": 780,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n migratePropsN"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/Chips-component-migration.ts",
"chars": 1039,
"preview": "import {\n findComponentElements,\n getCoreImportsForFile,\n removeProp,\n isPropExists,\n wrap,\n getComponentNameOrAli"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/Clickable-component-migration.ts",
"chars": 769,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n migratePropsN"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/ColorPicker-component-migration.ts",
"chars": 790,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n updateStaticP"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/ColorPickerContent-component-migration.ts",
"chars": 797,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n updateStaticP"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/Counter-component-migration.ts",
"chars": 775,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n migratePropsN"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/Dialog-component-migration.ts",
"chars": 808,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n migratePropsN"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/DialogContent-container-component-migration.ts",
"chars": 901,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n updatePropVal"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/Divider-component-migration.ts",
"chars": 760,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n migratePropsN"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/Dropdown-component-migration.ts",
"chars": 866,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n updateStaticP"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/Icon-component-migration.ts",
"chars": 970,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n removeProp,\n "
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/IconButton-component-migration.ts",
"chars": 770,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n migratePropsN"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/InputField-component-import-migration.ts",
"chars": 2528,
"preview": "import { ImportDeclaration } from \"jscodeshift\";\nimport {\n getCoreImportsForFile,\n wrap,\n getComponentNameOrAliasFrom"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/Label-component-migration.ts",
"chars": 842,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n migratePropsN"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/Link-component-migration.ts",
"chars": 945,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n updateStaticP"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/Loader-component-migration.ts",
"chars": 766,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n migratePropsN"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/Menu-component-migration.ts",
"chars": 758,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n migratePropsN"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/MenuButton-component-migration.ts",
"chars": 882,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n migratePropsN"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/MenuDivider-component-migration.ts",
"chars": 765,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n migratePropsN"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/MenuItem-component-migration.ts",
"chars": 762,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n migratePropsN"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/MenuItemButton-component-migration.ts",
"chars": 768,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n migratePropsN"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/MenuTitle-component-migration.ts",
"chars": 763,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n migratePropsN"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/Modal-component-migration.ts",
"chars": 692,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n removeProp\n} "
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/ModalHeader-component-migration.ts",
"chars": 698,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n removeProp\n} "
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/RadioButton-component-migration.ts",
"chars": 783,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n migratePropsN"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/Search-component-import-migration.ts",
"chars": 2517,
"preview": "import { ImportDeclaration } from \"jscodeshift\";\nimport {\n getCoreImportsForFile,\n wrap,\n getComponentNameOrAliasFrom"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/Steps-component-migration.ts",
"chars": 1112,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n removeProp,\n "
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/TabList-component-migration.ts",
"chars": 682,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n removeProp\n} "
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/TabPanels-component-migration.ts",
"chars": 704,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n removeProp\n} "
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/TextField-component-migration.ts",
"chars": 1065,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n migratePropsN"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/ThemeProvider-component-migration.ts",
"chars": 763,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n migratePropsN"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/Tipseen-component-migration.ts",
"chars": 793,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n migratePropsN"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/TipseenContent-component-migration.ts",
"chars": 885,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n migratePropsN"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/Toggle-component-migration.ts",
"chars": 867,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n migratePropsN"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/Tooltip-component-migration.ts",
"chars": 688,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n removeProp\n} "
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/AttentionBox-component-migration.test.ts",
"chars": 7405,
"preview": "import transform from \"../AttentionBox-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Avatar-component-migration.test.ts",
"chars": 4092,
"preview": "import transform from \"../Avatar-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfu"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/AvatarGroup-component-migration.test.ts",
"chars": 2974,
"preview": "import transform from \"../AvatarGroup-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\""
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Box-component-migration.test.ts",
"chars": 3160,
"preview": "import transform from \"../Box-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunct"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/BreadcrumbItem-component-migration.test.ts",
"chars": 2787,
"preview": "import transform from \"../BreadcrumbItem-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUti"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Button-component-migration.test.ts",
"chars": 4959,
"preview": "import transform from \"../Button-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfu"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/ButtonGroup-component-migration.test.ts",
"chars": 5778,
"preview": "import transform from \"../ButtonGroup-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\""
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Checkbox-component-migration.test.ts",
"chars": 5662,
"preview": "import transform from \"../Checkbox-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\n"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Chips-component-migration.test.ts",
"chars": 4251,
"preview": "import transform from \"../Chips-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\nimpo"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Clickable-component-migration.test.ts",
"chars": 4731,
"preview": "import transform from \"../Clickable-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/ColorPicker-component-migration.test.ts",
"chars": 3970,
"preview": "import transform from \"../ColorPicker-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\""
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/ColorPickerContent-component-migration.test.ts",
"chars": 4362,
"preview": "import transform from \"../ColorPickerContent-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/tes"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Counter-component-migration.test.ts",
"chars": 5534,
"preview": "import transform from \"../Counter-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nf"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Dialog-component-migration.test.ts",
"chars": 3332,
"preview": "import transform from \"../Dialog-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfu"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/DialogContent-container-component-migration.test.ts",
"chars": 4242,
"preview": "import transform from \"../DialogContent-container-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/sr"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Divider-component-migration.test.ts",
"chars": 5256,
"preview": "import transform from \"../Divider-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nf"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Dropdown-component-migration.test.ts",
"chars": 3575,
"preview": "import transform from \"../Dropdown-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\n"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Icon-component-migration.test.ts",
"chars": 1875,
"preview": "import transform from \"../Icon-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\nimpor"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/IconButton-component-migration.test.ts",
"chars": 4775,
"preview": "import transform from \"../IconButton-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/InputField-component-import-migration.test.ts",
"chars": 5377,
"preview": "import { defineInlineTest } from \"jscodeshift/src/testUtils\";\nimport transform from \"../InputField-component-import-migr"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Label-component-migration.test.ts",
"chars": 5575,
"preview": "import transform from \"../Label-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfun"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Link-component-migration.test.ts",
"chars": 5742,
"preview": "import transform from \"../Link-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunc"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Loader-component-migration.test.ts",
"chars": 5326,
"preview": "import transform from \"../Loader-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfu"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Menu-component-migration.test.ts",
"chars": 5786,
"preview": "import transform from \"../Menu-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunc"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/MenuButton-component-migration.test.ts",
"chars": 6285,
"preview": "import transform from \"../MenuButton-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/MenuDivider-component-migration.test.ts",
"chars": 5436,
"preview": "import transform from \"../MenuDivider-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\""
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/MenuItem-component-migration.test.ts",
"chars": 5298,
"preview": "import transform from \"../MenuItem-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\n"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/MenuItemButton-component-migration.test.ts",
"chars": 5574,
"preview": "import transform from \"../MenuItemButton-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUti"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/MenuTitle-component-migration.test.ts",
"chars": 5344,
"preview": "import transform from \"../MenuTitle-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Modal-component-migration.test.ts",
"chars": 3224,
"preview": "import transform from \"../Modal-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\nimpo"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/ModalHeader-component-migration.test.ts",
"chars": 3392,
"preview": "import transform from \"../ModalHeader-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\""
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/RadioButton-component-migration.test.ts",
"chars": 5778,
"preview": "import transform from \"../RadioButton-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\""
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Search-component-import-migration.test.ts",
"chars": 5441,
"preview": "import { defineInlineTest } from \"jscodeshift/src/testUtils\";\nimport transform from \"../Search-component-import-migratio"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Steps-component-migration.test.ts",
"chars": 2382,
"preview": "import transform from \"../Steps-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\nimpo"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/TabList-component-migration.test.ts",
"chars": 2766,
"preview": "import transform from \"../TabList-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nf"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/TabPanels-component-migration.test.ts",
"chars": 3030,
"preview": "import transform from \"../TabPanels-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/TextField-component-migration.test.ts",
"chars": 9519,
"preview": "import transform from \"../TextField-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/ThemeProvider-component-migration.test.ts",
"chars": 5746,
"preview": "import transform from \"../ThemeProvider-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtil"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Tipseen-component-migration.test.ts",
"chars": 2801,
"preview": "import transform from \"../Tipseen-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nf"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/TipseenContent-component-migration.test.ts",
"chars": 3603,
"preview": "import transform from \"../TipseenContent-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUti"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Toggle-component-migration.test.ts",
"chars": 5732,
"preview": "import transform from \"../Toggle-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfu"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/Tooltip-component-migration.test.ts",
"chars": 2826,
"preview": "import transform from \"../Tooltip-component-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nf"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/next-imports-migration.test.ts",
"chars": 1961,
"preview": "import transform from \"../next-imports-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\ndescri"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/packages-rename-migration.test.ts",
"chars": 3239,
"preview": "import transform from \"../packages-rename-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\ndes"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/type-imports-migration.test.ts",
"chars": 1681,
"preview": "import transform from \"../type-imports-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\ndescri"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/__tests__/useClickableProps-hook-migration.test.ts",
"chars": 2662,
"preview": "import transform from \"../useClickableProps-hook-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/enums/Enums-migration.ts",
"chars": 1656,
"preview": "import { TransformationContext } from \"../../../../types\";\nimport { getCoreImportsForFile, getPropValue, setPropValue, w"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/enums/__tests__/Enums-migration.test.ts",
"chars": 993,
"preview": "import transform from \"../Enums-migration\";\nimport { defineInlineTest } from \"jscodeshift/src/testUtils\";\n\nfunction prep"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/enums/enumMappings.json",
"chars": 28593,
"preview": "{\n \"TabPanels.animationDirections.RTL\": \"rtl\",\n \"TabPanels.animationDirections.LTR\": \"ltr\",\n \"Dropdown.sizes.SMALL\": "
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/next-imports-migration.ts",
"chars": 523,
"preview": "import { CORE_IMPORT_PATH } from \"../../../src/consts\";\nimport { wrap, renameImportPath, getCoreNextImportsForFile } fro"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/packages-rename-migration.ts",
"chars": 1666,
"preview": "import { CORE_IMPORT_PATH, NEW_CORE_IMPORT_PATH, NEW_ICONS_IMPORT_PATH } from \"../../../src/consts\";\nimport { wrap, rena"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/type-imports-migration.ts",
"chars": 523,
"preview": "import { CORE_IMPORT_PATH } from \"../../../src/consts\";\nimport { wrap, renameImportPath, getImports } from \"../../../src"
},
{
"path": "packages/codemod/transformations/core/v2-to-v3/useClickableProps-hook-migration.ts",
"chars": 821,
"preview": "import { getComponentNameOrAliasFromImports, getCoreImportsForFile, wrap } from \"../../../src/utils\";\nimport { Transform"
},
{
"path": "packages/codemod/transformations/core/v3-to-v4/Chips-component-migration.ts",
"chars": 811,
"preview": "import {\n wrap,\n getImports,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n removeProp\n} from \"../.."
},
{
"path": "packages/codemod/transformations/core/v3-to-v4/Dialog-component-migration.ts",
"chars": 867,
"preview": "import {\n wrap,\n getImports,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n removeProp\n} from \"../.."
},
{
"path": "packages/codemod/transformations/core/v3-to-v4/Flex-component-migration.ts",
"chars": 1317,
"preview": "import {\n wrap,\n getCoreImportsForFile,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n isPropExists,"
},
{
"path": "packages/codemod/transformations/core/v3-to-v4/Icon-component-migration.ts",
"chars": 972,
"preview": "import {\n wrap,\n getImports,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n migratePropsNames\n} from"
},
{
"path": "packages/codemod/transformations/core/v3-to-v4/LinearProgressBar-component-migration.ts",
"chars": 2051,
"preview": "import { wrap, getImports } from \"../../../src/utils\";\nimport { NEW_CORE_IMPORT_PATH } from \"../../../src/consts\";\nimpor"
},
{
"path": "packages/codemod/transformations/core/v3-to-v4/README.md",
"chars": 3281,
"preview": "# Vibe v3 to v4 Migration Transformations\n\nThis directory contains all transformation files for migrating from Vibe v3 t"
},
{
"path": "packages/codemod/transformations/core/v3-to-v4/TextField-component-migration.ts",
"chars": 3082,
"preview": "import {\n wrap,\n getImports,\n getComponentNameOrAliasFromImports,\n findComponentElements,\n isPropExists,\n findProp"
}
]
// ... and 2320 more files (download for full content)
About this extraction
This page contains the full source code of the mondaycom/vibe GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 2520 files (6.6 MB), approximately 1.9M tokens, and a symbol index with 2188 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.