@codacy/ui-components 0.66.25 → 0.66.27

package/lib/theme/ColorSchemes/primitives/grey.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.grey = void 0;
-var grey = exports.grey = {
+export const grey = {
   'grey-00': '#0B0E13',
   'grey-05': '#11151D',
   'grey-10': '#171D26',

package/lib/theme/ColorSchemes/primitives/index.d.ts

@@ -1,7 +1,7 @@
 export declare const primitiveColors: {
+    "yellow-00": string;
     "yellow-10": string;
     "yellow-20": string;
-    "yellow-00": string;
     "yellow-30": string;
     "yellow-40": string;
     "yellow-50": string;
@@ -11,9 +11,9 @@ export declare const primitiveColors: {
     "yellow-90": string;
     "yellow-95": string;
     "yellow-98": string;
+    "teal-00": string;
     "teal-10": string;
     "teal-20": string;
-    "teal-00": string;
     "teal-30": string;
     "teal-40": string;
     "teal-50": string;
@@ -23,9 +23,9 @@ export declare const primitiveColors: {
     "teal-90": string;
     "teal-95": string;
     "teal-98": string;
+    "red-00": string;
     "red-10": string;
     "red-20": string;
-    "red-00": string;
     "red-30": string;
     "red-40": string;
     "red-50": string;
@@ -47,9 +47,9 @@ export declare const primitiveColors: {
     "purple-95": string;
     "purple-98": string;
     "purple-08": string;
+    "orange-00": string;
     "orange-10": string;
     "orange-20": string;
-    "orange-00": string;
     "orange-30": string;
     "orange-40": string;
     "orange-50": string;
@@ -59,9 +59,9 @@ export declare const primitiveColors: {
     "orange-90": string;
     "orange-95": string;
     "orange-98": string;
+    "magenta-00": string;
     "magenta-10": string;
     "magenta-20": string;
-    "magenta-00": string;
     "magenta-30": string;
     "magenta-40": string;
     "magenta-50": string;
@@ -71,10 +71,9 @@ export declare const primitiveColors: {
     "magenta-90": string;
     "magenta-95": string;
     "magenta-98": string;
+    "grey-00": string;
     "grey-10": string;
-    "grey-15": string;
     "grey-20": string;
-    "grey-00": string;
     "grey-30": string;
     "grey-40": string;
     "grey-50": string;
@@ -85,10 +84,11 @@ export declare const primitiveColors: {
     "grey-95": string;
     "grey-98": string;
     "grey-05": string;
+    "grey-15": string;
     "grey-100": string;
+    "green-00": string;
     "green-10": string;
     "green-20": string;
-    "green-00": string;
     "green-30": string;
     "green-40": string;
     "green-50": string;
@@ -98,9 +98,9 @@ export declare const primitiveColors: {
     "green-90": string;
     "green-95": string;
     "green-98": string;
+    "blue-00": string;
     "blue-10": string;
     "blue-20": string;
-    "blue-00": string;
     "blue-30": string;
     "blue-40": string;
     "blue-50": string;

package/lib/theme/ColorSchemes/primitives/index.js

@@ -1,18 +1,20 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.primitiveColors = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _blue = require("./blue");
-var _green = require("./green");
-var _grey = require("./grey");
-var _magenta = require("./magenta");
-var _orange = require("./orange");
-var _purple = require("./purple");
-var _red = require("./red");
-var _teal = require("./teal");
-var _yellow = require("./yellow");
-var primitiveColors = exports.primitiveColors = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _blue.blue), _green.green), _grey.grey), _magenta.magenta), _orange.orange), _purple.purple), _red.red), _teal.teal), _yellow.yellow);
+import { blue } from './blue';
+import { green } from './green';
+import { grey } from './grey';
+import { magenta } from './magenta';
+import { orange } from './orange';
+import { purple } from './purple';
+import { red } from './red';
+import { teal } from './teal';
+import { yellow } from './yellow';
+export const primitiveColors = {
+  ...blue,
+  ...green,
+  ...grey,
+  ...magenta,
+  ...orange,
+  ...purple,
+  ...red,
+  ...teal,
+  ...yellow
+};

package/lib/theme/ColorSchemes/primitives/magenta.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.magenta = void 0;
-var magenta = exports.magenta = {
+export const magenta = {
   'magenta-00': '#21071D',
   'magenta-10': '#3A0D33',
   'magenta-20': '#5C1450',

package/lib/theme/ColorSchemes/primitives/orange.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.orange = void 0;
-var orange = exports.orange = {
+export const orange = {
   'orange-00': '#281401',
   'orange-10': '#462301',
   'orange-20': '#884201',

package/lib/theme/ColorSchemes/primitives/purple.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.purple = void 0;
-var purple = exports.purple = {
+export const purple = {
   'purple-08': '#130722',
   'purple-10': '#290F47',
   'purple-20': '#401971',

package/lib/theme/ColorSchemes/primitives/red.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.red = void 0;
-var red = exports.red = {
+export const red = {
   'red-00': '#290002',
   'red-10': '#3D0003',
   'red-20': '#8A000B',

package/lib/theme/ColorSchemes/primitives/teal.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.teal = void 0;
-var teal = exports.teal = {
+export const teal = {
   'teal-00': '#0A1E1F',
   'teal-10': '#123436',
   'teal-20': '#194A4D',

package/lib/theme/ColorSchemes/primitives/yellow.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.yellow = void 0;
-var yellow = exports.yellow = {
+export const yellow = {
   'yellow-00': '#291A00',
   'yellow-10': '#472D00',
   'yellow-20': '#8A5600',

package/lib/theme/ColorSchemes/semantics.js

@@ -1,14 +1,8 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.semanticFunctionalColorsFx = void 0;
-var _primitives = require("./primitives");
-var semantics = ['danger', 'success', 'warning', 'info', 'attention', 'critical', 'high', 'medium', 'minor'];
-var semanticFunctionalColorsFx = exports.semanticFunctionalColorsFx = function semanticFunctionalColorsFx(prefix, number) {
-  var colors = {};
-  var semanticMapToColor = {
+import { primitiveColors } from './primitives';
+const semantics = ['danger', 'success', 'warning', 'info', 'attention', 'critical', 'high', 'medium', 'minor'];
+export const semanticFunctionalColorsFx = (prefix, number) => {
+  const colors = {};
+  const semanticMapToColor = {
     danger: 'red',
     success: 'green',
     warning: 'yellow',
@@ -19,8 +13,8 @@ var semanticFunctionalColorsFx = exports.semanticFunctionalColorsFx = function s
     medium: 'yellow',
     minor: 'blue'
   };
-  semantics.map(function (semantic) {
-    return colors["".concat(prefix, "-").concat(semantic)] = _primitives.primitiveColors["".concat(semanticMapToColor[semantic], "-").concat(number)];
+  semantics.map(semantic => {
+    return colors[`${prefix}-${semantic}`] = primitiveColors[`${semanticMapToColor[semantic]}-${number}`];
   });
   return colors;
 };

package/lib/theme/index.js

@@ -1,27 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _ColorSchemes = require("./ColorSchemes");
-Object.keys(_ColorSchemes).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ColorSchemes[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _ColorSchemes[key];
-    }
-  });
-});
-var _theme = require("./theme");
-Object.keys(_theme).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _theme[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _theme[key];
-    }
-  });
-});
+export * from './ColorSchemes';
+export * from './theme';

package/lib/theme/theme.js

@@ -1,30 +1,19 @@
-"use strict";
+import { codacyThemeColors, darkCodacyThemeColors } from './';
+import { rgba } from 'polished';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.transition = exports.generateTheme = exports.darkCodacyTheme = exports.codacyTheme = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _ = require("./");
-var _polished = require("polished");
 // Types
 
 // *** Theme Standard Values ***********************
-var fontStack = function fontStack(fonts) {
-  return fonts.map(function (font) {
-    return font.includes(' ') ? "\"".concat(font, "\"") : font;
-  }).join(', ');
-};
-var remScale = 16;
-var gridSize = 0.5; /* rem */
-var borderWidths = ['1px', '0.125rem', '0.25rem'];
-var fonts = {
+const fontStack = fonts => fonts.map(font => font.includes(' ') ? `"${font}"` : font).join(', ');
+const remScale = 16;
+const gridSize = 0.5; /* rem */
+const borderWidths = ['1px', '0.125rem', '0.25rem'];
+const fonts = {
   normal: fontStack(['Inter', 'arial', 'system-ui', 'sans-serif']),
   display: fontStack(['Inter', 'arial', 'system-ui', 'sans-serif']),
   monospace: fontStack(['Menlo', 'Consolas', 'ui-monospace', 'monospace'])
 };
-var fontSizes = [/** fontSize-00 */'0.5rem',
+const fontSizes = [/** fontSize-00 */'0.5rem',
 // 8px: xxs
 /** fontSize-01 */
 '0.625rem',
@@ -50,41 +39,51 @@ var fontSizes = [/** fontSize-00 */'0.5rem',
 /** fontSize-08 */
 '2.25rem' // 36px: xh
 ];
-var space = [/** space-00 */'0', /** space-01 */"".concat(gridSize * 0.5, "rem"), // 4px
+const space = [/** space-00 */'0', /** space-01 */`${gridSize * 0.5}rem`,
+// 4px
 /** space-02 */
-"".concat(gridSize, "rem"), // 8px
+`${gridSize}rem`,
+// 8px
 /** space-03 */
-"".concat(gridSize * 1.5, "rem"), // 12px
+`${gridSize * 1.5}rem`,
+// 12px
 /** space-04 */
-"".concat(gridSize * 2, "rem"), // 16px
+`${gridSize * 2}rem`,
+// 16px
 /** space-05 */
-"".concat(gridSize * 3, "rem"), // 24px
+`${gridSize * 3}rem`,
+// 24px
 /** space-06 */
-"".concat(gridSize * 4, "rem"), // 32px
+`${gridSize * 4}rem`,
+// 32px
 /** space-07 */
-"".concat(gridSize * 5, "rem"), // 40px
+`${gridSize * 5}rem`,
+// 40px
 /** space-08 */
-"".concat(gridSize * 6, "rem"), // 48px
+`${gridSize * 6}rem`,
+// 48px
 /** space-09 */
-"".concat(gridSize * 8, "rem") // 64px
+`${gridSize * 8}rem` // 64px
 ];
-var sizes = [/** size-00 */"".concat(gridSize * 9, "rem"), // 72px
+const sizes = [/** size-00 */`${gridSize * 9}rem`,
+// 72px
 /** size-01 */
-"".concat(gridSize * 19, "rem"), // 152px
+`${gridSize * 19}rem`,
+// 152px
 /** size-02 */
-"".concat(gridSize * 31, "rem"), // 248px
+`${gridSize * 31}rem`,
+// 248px
 /** size-03 */
-"".concat(gridSize * 44.5, "rem"), // 356px
+`${gridSize * 44.5}rem`,
+// 356px
 /** size-04 */
-"".concat(gridSize * 56.5, "rem") // 452px
+`${gridSize * 56.5}rem` // 452px
 ];
-var radii = ['0.125rem' /* 2px */, '0.25rem' /* 4px */, '0.5rem' /* 8px */];
-var shadowsFx = function shadowsFx(scheme) {
-  return ["0 0.0625rem 0.125rem ".concat((0, _polished.rgba)(scheme['border-subtle-hover'], 0.2)), "0 0.125rem 0.375rem ".concat((0, _polished.rgba)(scheme['border-subtle-hover'], 0.3)), "0 0.125rem 0.375rem ".concat((0, _polished.rgba)(scheme['border-subtle-hover'], 0.2), ", 0 0.125rem 0.5rem ").concat((0, _polished.rgba)(scheme['border-subtle-hover'], 0.1)), "0 0.25rem 0.5rem ".concat((0, _polished.rgba)(scheme['border-subtle-hover'], 0.2), ", 0 0.25rem 0.75rem ").concat((0, _polished.rgba)(scheme['border-subtle-hover'], 0.1)), "0 0.75rem 1rem ".concat((0, _polished.rgba)(scheme['border-subtle-hover'], 0.2), ", 0 0.75rem 1.5rem ").concat((0, _polished.rgba)(scheme['border-subtle-hover'], 0.1))];
-};
-var transitions = ['0.2s ease-in-out', '0.35s ease-in-out', '0.75s ease-in-out'];
-var breakpoints = ['85.1rem' /* > 1360px */, '90.1rem' /* > 1440px */, '105.1rem' /* > 1680px */];
-var zIndices = {
+const radii = ['0.125rem' /* 2px */, '0.25rem' /* 4px */, '0.5rem' /* 8px */];
+const shadowsFx = scheme => [`0 0.0625rem 0.125rem ${rgba(scheme['border-subtle-hover'], 0.2)}`, `0 0.125rem 0.375rem ${rgba(scheme['border-subtle-hover'], 0.3)}`, `0 0.125rem 0.375rem ${rgba(scheme['border-subtle-hover'], 0.2)}, 0 0.125rem 0.5rem ${rgba(scheme['border-subtle-hover'], 0.1)}`, `0 0.25rem 0.5rem ${rgba(scheme['border-subtle-hover'], 0.2)}, 0 0.25rem 0.75rem ${rgba(scheme['border-subtle-hover'], 0.1)}`, `0 0.75rem 1rem ${rgba(scheme['border-subtle-hover'], 0.2)}, 0 0.75rem 1.5rem ${rgba(scheme['border-subtle-hover'], 0.1)}`];
+const transitions = ['0.2s ease-in-out', '0.35s ease-in-out', '0.75s ease-in-out'];
+const breakpoints = ['85.1rem' /* > 1360px */, '90.1rem' /* > 1440px */, '105.1rem' /* > 1680px */];
+const zIndices = {
   inactive: -1,
   body: 1000,
   modal: 1010,
@@ -96,14 +95,14 @@ var zIndices = {
   navbar: 1060,
   tooltip: 1070
 };
-var lineHeights = ['1.1875rem', '1.9375rem', '2.75rem'];
-var fontWeights = ['200', '400', '500', '600'];
-var letterSpacings = ['normal'];
-var baseTheme = {
-  gridSize: gridSize,
-  remScale: remScale,
-  borderWidths: borderWidths,
-  fonts: fonts,
+const lineHeights = ['1.1875rem', '1.9375rem', '2.75rem'];
+const fontWeights = ['200', '400', '500', '600'];
+const letterSpacings = ['normal'];
+const baseTheme = {
+  gridSize,
+  remScale,
+  borderWidths,
+  fonts,
   fontSizes: {
     xxs: fontSizes[0],
     xs: fontSizes[1],
@@ -121,18 +120,18 @@ var baseTheme = {
     medium: fontWeights[2],
     'semi-bold': fontWeights[3]
   }),
-  lineHeights: lineHeights,
-  space: space,
-  sizes: sizes,
-  radii: radii,
+  lineHeights,
+  space,
+  sizes,
+  radii,
   transitions: Object.assign(transitions, {
     fast: transitions[0],
     normal: transitions[1],
     slow: transitions[2]
   }),
-  breakpoints: breakpoints,
-  zIndices: zIndices,
-  letterSpacings: letterSpacings,
+  breakpoints,
+  zIndices,
+  letterSpacings,
   controlSize: {
     xs: sizes[0],
     sm: sizes[1],
@@ -147,27 +146,19 @@ var baseTheme = {
 };
 
 // Helper functions
-var transition = exports.transition = function transition(properties, speed) {
-  var refTheme = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : baseTheme;
-  return properties.map(function (p) {
-    return "".concat(p, " ").concat(refTheme.transitions[speed || 'normal']);
-  }).join(', ');
-};
-var generateTheme = exports.generateTheme = function generateTheme(scheme) {
-  return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, baseTheme), {}, {
-    colors: scheme,
-    borders: borderWidths.map(function (w) {
-      return "solid ".concat(w, " ").concat(scheme['border-primary']);
-    }),
-    shadows: shadowsFx(scheme),
-    effects: {
-      elevation: ["0 0.1875rem 0.375rem 0 ".concat(scheme['effect-elevation-1']), "0 0.75rem 1.5rem 0 ".concat(scheme['effect-elevation-2'])],
-      focus: ["0 0 0 0.25rem ".concat(scheme['background-brand-subtle']), "0 0 0 0.25rem ".concat(scheme['background-brand-enabled'], "33")],
-      error: ["0 0 0 0.25rem ".concat(scheme['background-danger']), "0 0 0 0.25rem ".concat(scheme['background-danger-disabled'])]
-    }
-  });
-};
+export const transition = (properties, speed, refTheme = baseTheme) => properties.map(p => `${p} ${refTheme.transitions[speed || 'normal']}`).join(', ');
+export const generateTheme = scheme => ({
+  ...baseTheme,
+  colors: scheme,
+  borders: borderWidths.map(w => `solid ${w} ${scheme['border-primary']}`),
+  shadows: shadowsFx(scheme),
+  effects: {
+    elevation: [`0 0.1875rem 0.375rem 0 ${scheme['effect-elevation-1']}`, `0 0.75rem 1.5rem 0 ${scheme['effect-elevation-2']}`],
+    focus: [`0 0 0 0.25rem ${scheme['background-brand-subtle']}`, `0 0 0 0.25rem ${scheme['background-brand-enabled']}33`],
+    error: [`0 0 0 0.25rem ${scheme['background-danger']}`, `0 0 0 0.25rem ${scheme['background-danger-disabled']}`]
+  }
+});
 
 // Themes
-var codacyTheme = exports.codacyTheme = generateTheme(_.codacyThemeColors);
-var darkCodacyTheme = exports.darkCodacyTheme = generateTheme(_.darkCodacyThemeColors);
+export const codacyTheme = generateTheme(codacyThemeColors);
+export const darkCodacyTheme = generateTheme(darkCodacyThemeColors);

package/lib/types.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};

package/lib/utils/hash.js

@@ -1,11 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.hash = void 0;
-var hash = exports.hash = function hash(s) {
-  var h = 9;
-  for (var i = 0; i < s.length;) h = Math.imul(h ^ s.charCodeAt(i++), Math.pow(9, 9));
+export const hash = s => {
+  let h = 9;
+  for (let i = 0; i < s.length;) h = Math.imul(h ^ s.charCodeAt(i++), 9 ** 9);
   return h ^ h >>> 9;
 };

package/lib/utils/reactNodeToText.js

@@ -1,16 +1,8 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.reactNodeToText = void 0;
-var _react = require("react");
 // From https://github.com/fernandopasik/react-children-utilities
 
-var hasChildren = function hasChildren(element) {
-  return /*#__PURE__*/(0, _react.isValidElement)(element) && Boolean(element.props.children);
-};
-var childToString = function childToString(child) {
+import { Children, isValidElement } from 'react';
+const hasChildren = element => /*#__PURE__*/isValidElement(element) && Boolean(element.props.children);
+const childToString = child => {
   if (typeof child === 'undefined' || child === null || typeof child === 'boolean') {
     return '';
   }
@@ -19,15 +11,15 @@ var childToString = function childToString(child) {
   }
   return child.toString();
 };
-var reactNodeToText = exports.reactNodeToText = function reactNodeToText(children) {
-  if (!(children instanceof Array) && ! /*#__PURE__*/(0, _react.isValidElement)(children)) {
+export const reactNodeToText = children => {
+  if (!(children instanceof Array) && ! /*#__PURE__*/isValidElement(children)) {
     return childToString(children);
   }
-  return _react.Children.toArray(children).reduce(function (text, child) {
-    var newText = '';
-    if ( /*#__PURE__*/(0, _react.isValidElement)(child) && hasChildren(child)) {
+  return Children.toArray(children).reduce((text, child) => {
+    let newText = '';
+    if ( /*#__PURE__*/isValidElement(child) && hasChildren(child)) {
       newText = reactNodeToText(child.props.children);
-    } else if ( /*#__PURE__*/(0, _react.isValidElement)(child) && !hasChildren(child)) {
+    } else if ( /*#__PURE__*/isValidElement(child) && !hasChildren(child)) {
       newText = '';
     } else {
       newText = childToString(child);

package/package.json

@@ -1,10 +1,19 @@
 {
   "name": "@codacy/ui-components",
-  "version": "0.66.25",
+  "version": "0.66.27",
   "description": "",
   "license": "ISC",
   "author": "",
+  "type": "module",
   "main": "lib/index.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js"
+    }
+  },
   "files": [
     "lib/"
   ],
@@ -12,7 +21,7 @@
   "scripts": {
     "build": "rimraf lib && npm run build:types && npm run build:js",
     "build-storybook": "storybook build",
-    "build:js": "NODE_ENV=production babel src -d lib --extensions \".ts,.tsx,.jsx\" --ignore src/jestSetup.ts,src/test-utils,\"src/**/*.spec.ts\",\"src/**/*.test.tsx\"",
+    "build:js": "NODE_ENV=production babel src -d lib --extensions \".ts,.tsx,.jsx\" --ignore src/vitestSetup.ts,src/test-utils,\"src/**/*.spec.ts\",\"src/**/*.test.tsx\"",
     "build:types": "tsc -p tsconfig.prod.json --emitDeclarationOnly",
     "check-types": "tsc --noEmit",
     "check-types:watch": "npm run check-types -- --watch",
@@ -22,9 +31,8 @@
     "lint-cmd": "eslint --ignore-path .eslintignore --ext .js,.jsx,.ts,.tsx",
     "lint-staged": "lint-staged",
     "storybook": "storybook dev -p 6006",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage --maxWorkers=4"
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.6",
@@ -56,11 +64,11 @@
     "@testing-library/dom": "^8.16.0",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^13.3.0",
-    "@testing-library/react-hooks": "^3.4.2",
     "@types/autosize": "^3.0.7",
-    "@types/jest": "^28.0.0",
+    "@types/jsdom": "^21.1.7",
     "@types/lodash": "^4.14.165",
     "@types/md5": "^2.2.1",
+    "@types/node": "^20.0.0",
     "@types/numeral": "^2.0.2",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
@@ -69,6 +77,8 @@
     "@types/styled-system__should-forward-prop": "^5.1.4",
     "@typescript-eslint/eslint-plugin": "^6.13.2",
     "@typescript-eslint/parser": "^6.13.2",
+    "@vitejs/plugin-react": "^4.7.0",
+    "@vitest/coverage-v8": "^3.2.4",
     "babel-loader": "^9.1.3",
     "babel-preset-react-app": "^10.0.1",
     "copy-to-clipboard": "^3.3.1",
@@ -85,9 +95,7 @@
     "eslint-plugin-react-hooks": "^1.7.0",
     "fontsource-inter": "^4.0.0",
     "husky": "^4.3.0",
-    "jest": "^28.0.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-watch-typeahead": "^1.0.0",
+    "jsdom": "^26.1.0",
     "lint-staged": "^12.5.0",
     "lodash": "^4.17.20",
     "numeral": "^2.0.6",
@@ -102,7 +110,9 @@
     "rimraf": "^3.0.2",
     "storybook": "^8.1.9",
     "styled-system": "^5.1.5",
-    "typescript": "^4.5.4"
+    "typescript": "^4.5.4",
+    "vite": "^7.0.6",
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "@emotion/react": "^11.11.1",