colibri-ui 0.7.23 → 0.7.24

package/Button/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { type ButtonProps } from "./index.props";
-declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

package/Button/index.js

@@ -27,7 +27,8 @@ var Button = /*#__PURE__*/react.forwardRef(function (_a, ref) {
     className: className,
     variant: variant,
     icon: icon,
-    fullWidth: fullWidth
+    fullWidth: fullWidth,
+    "data-cy": "button"
   }, props, {
     children: [icon && jsxRuntime.jsx(styles.StyledIcon, {
       children: icon

package/ClickOutside/index.d.ts

@@ -0,0 +1,6 @@
+import { FC, ReactNode } from "react";
+declare const ClickOutside: FC<{
+    onClick: (e: MouseEvent | TouchEvent) => void;
+    children: ReactNode;
+}>;
+export default ClickOutside;

package/ClickOutside/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/ClickOutside/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/Menu/components/MenuItem/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { MenuItemProps } from "./index.props";
+declare const MenuItem: FC<MenuItemProps>;
+export default MenuItem;

package/Menu/components/MenuItem/index.props.d.ts

@@ -0,0 +1,23 @@
+import { CSSObject } from "@emotion/react";
+import { ReactNode, MouseEvent } from "react";
+import { MenuVariant } from "../../index.props";
+interface IStylesProps {
+    color?: CSSObject["color"];
+    backgroundColor: CSSObject["backgroundColor"];
+}
+export interface MenuItemPalette {
+    normal: IStylesProps;
+    hovered?: IStylesProps;
+    focused?: IStylesProps;
+    selected?: IStylesProps;
+    disabled?: IStylesProps;
+}
+export interface MenuItemProps {
+    children: ReactNode;
+    className?: string;
+    isSelected?: boolean;
+    onClick?: (e: MouseEvent) => void;
+    variant?: keyof MenuVariant;
+    disabled?: boolean;
+}
+export {};

package/Menu/components/MenuItem/styles.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { MenuVariant } from "../../index.props";
+export declare const Item: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    isSelected?: boolean | undefined;
+    variant: keyof MenuVariant;
+    disabled?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;

package/Menu/index.d.ts

@@ -0,0 +1,3 @@
+import { MenuProps } from "./index.props";
+declare const Menu: MenuProps;
+export default Menu;

package/Menu/index.props.d.ts

@@ -0,0 +1,33 @@
+import { CSSObject } from "@emotion/react";
+import { ReactElement, MouseEvent, FC } from "react";
+import MenuItem from "./components/MenuItem";
+import { MenuItemProps, MenuItemPalette } from "./components/MenuItem/index.props";
+export interface MenuPalette {
+    backgroundColor: CSSObject["backgroundColor"];
+    item: MenuItemPalette;
+}
+type VariantStyles = {
+    color?: CSSObject["color"];
+    backgroundColor?: CSSObject["backgroundColor"];
+};
+type VariantStates = {
+    normal?: VariantStyles;
+    hovered?: VariantStyles;
+    focused?: VariantStyles;
+    selected?: VariantStyles;
+    disabled?: VariantStyles;
+};
+export type MenuVariant = {
+    "primary": VariantStates;
+};
+interface Props {
+    selected?: string[];
+    variant?: keyof MenuVariant;
+    className?: string;
+    onClick?: (key: string, e: MouseEvent) => void;
+    children?: ReactElement<MenuItemProps> | ReactElement<MenuItemProps>[];
+}
+export interface MenuProps extends FC<Props> {
+    Item: typeof MenuItem;
+}
+export {};

package/Menu/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/Menu/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/Menu/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const MenuList: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;

package/Portal/index.d.ts

@@ -0,0 +1,6 @@
+import { FC, ReactNode } from "react";
+declare const Portal: FC<{
+    node?: HTMLElement | null;
+    children: ReactNode;
+}>;
+export default Portal;

package/Portal/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/Portal/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/Theme/index.d.ts

@@ -4,6 +4,7 @@ export declare const THEMES: {
     DEFAULT: {
         breakpoints: import("./breakpoints").BreakpointsTheme;
         button: import("../Button/index.props").ButtonVariant & import("../Button/index.props").ButtonBase;
+        menu: import("../Menu/index.props").MenuVariant;
         input: {
             placeholder: {
                 color: string;
@@ -119,6 +120,7 @@ export declare const THEMES: {
     BA: {
         breakpoints: import("./breakpoints").BreakpointsTheme;
         button: import("../Button/index.props").ButtonVariant & import("../Button/index.props").ButtonBase;
+        menu: import("../Menu/index.props").MenuVariant;
         input: {
             placeholder: {
                 color: string;

package/Theme/index.props.d.ts

@@ -5,8 +5,10 @@ import type { BreakpointsTheme } from "./breakpoints";
 import type { ButtonBase, ButtonVariant } from "../Button/index.props";
 import type { TypographyVariant } from "../Typography/index.props";
 import type { SwitchStates } from "../Switch/index.props";
+import { MenuVariant } from "../Menu/index.props";
 export type ThemeProps = {
     button: ButtonVariant & ButtonBase;
+    menu: MenuVariant;
     checkbox: CheckboxVariant;
     breakpoints: BreakpointsTheme;
     typography: TypographyVariant;

package/Theme/themes/buenos_aires.d.ts

@@ -1,5 +1,6 @@
 import type { CheckboxVariant } from "../../Checkbox/index.props";
 import type { ButtonBase, ButtonVariant } from "../../Button/index.props";
+import { MenuVariant } from "../../Menu/index.props";
 export declare const ButtonThemeBA: ButtonVariant & ButtonBase;
 export declare const InputThemeBA: {
     placeholder: {
@@ -50,7 +51,7 @@ export declare const TypographyThemeBA: {
         color: string;
     };
 };
-export declare const SwitchThemeDefault: {
+export declare const SwitchThemeBA: {
     circle: {
         backgroundColor: string;
     };
@@ -65,9 +66,11 @@ export declare const SwitchThemeDefault: {
         };
     };
 };
+export declare const MenuThemeBA: MenuVariant;
 export declare const THEME_BA: {
     breakpoints: import("../breakpoints").BreakpointsTheme;
     button: ButtonVariant & ButtonBase;
+    menu: MenuVariant;
     input: {
         placeholder: {
             color: string;

package/Theme/themes/buenos_aires.js

@@ -180,7 +180,7 @@ var TypographyThemeBA = {
     color: color.Color.BG_3
   }
 };
-var SwitchThemeDefault = {
+var SwitchThemeBA = {
   circle: {
     backgroundColor: color.Color.WHITE
   },
@@ -195,19 +195,41 @@ var SwitchThemeDefault = {
     }
   }
 };
+var MenuThemeBA = {
+  primary: {
+    normal: {
+      backgroundColor: color.Color.WHITE
+    },
+    hovered: {
+      backgroundColor: color.Color.PRIMARY_BA_2
+    },
+    focused: {
+      backgroundColor: color.Color.PRIMARY_BA_2
+    },
+    selected: {
+      backgroundColor: color.Color.PRIMARY_BA_2
+    },
+    disabled: {
+      color: color.Color.BG_2,
+      backgroundColor: color.Color.WHITE
+    }
+  }
+};
 var THEME_BA = {
   breakpoints: breakpoints.default,
   button: ButtonThemeBA,
+  menu: MenuThemeBA,
   input: InputThemeBA,
   checkbox: CheckboxThemeBA,
   typography: TypographyThemeBA,
-  "switch": SwitchThemeDefault,
+  "switch": SwitchThemeBA,
   palette: color.Color
 };
 
 exports.ButtonThemeBA = ButtonThemeBA;
 exports.CheckboxThemeBA = CheckboxThemeBA;
 exports.InputThemeBA = InputThemeBA;
-exports.SwitchThemeDefault = SwitchThemeDefault;
+exports.MenuThemeBA = MenuThemeBA;
+exports.SwitchThemeBA = SwitchThemeBA;
 exports.THEME_BA = THEME_BA;
 exports.TypographyThemeBA = TypographyThemeBA;

package/Theme/themes/default.d.ts

@@ -1,5 +1,6 @@
 import type { CheckboxVariant } from "../../Checkbox/index.props";
 import type { ButtonBase, ButtonVariant } from "../../Button/index.props";
+import { MenuVariant } from "../../Menu/index.props";
 export declare const ButtonThemeDefault: ButtonVariant & ButtonBase;
 export declare const InputThemeDefault: {
     placeholder: {
@@ -65,9 +66,11 @@ export declare const SwitchThemeDefault: {
         };
     };
 };
+export declare const MenuThemeDefault: MenuVariant;
 export declare const THEME_DEFAULT: {
     breakpoints: import("../breakpoints").BreakpointsTheme;
     button: ButtonVariant & ButtonBase;
+    menu: MenuVariant;
     input: {
         placeholder: {
             color: string;

package/Theme/themes/default.js

@@ -193,9 +193,30 @@ var SwitchThemeDefault = {
     }
   }
 };
+var MenuThemeDefault = {
+  primary: {
+    normal: {
+      backgroundColor: color.Color.WHITE
+    },
+    hovered: {
+      backgroundColor: color.Color.PRIMARY_2
+    },
+    focused: {
+      backgroundColor: color.Color.PRIMARY_2
+    },
+    selected: {
+      backgroundColor: color.Color.PRIMARY_2
+    },
+    disabled: {
+      color: color.Color.BG_2,
+      backgroundColor: color.Color.WHITE
+    }
+  }
+};
 var THEME_DEFAULT = {
   breakpoints: breakpoints.default,
   button: ButtonThemeDefault,
+  menu: MenuThemeDefault,
   input: InputThemeDefault,
   checkbox: CheckboxThemeDefault,
   typography: TypographyThemeDefault,
@@ -206,6 +227,7 @@ var THEME_DEFAULT = {
 exports.ButtonThemeDefault = ButtonThemeDefault;
 exports.CheckboxThemeDefault = CheckboxThemeDefault;
 exports.InputThemeDefault = InputThemeDefault;
+exports.MenuThemeDefault = MenuThemeDefault;
 exports.SwitchThemeDefault = SwitchThemeDefault;
 exports.THEME_DEFAULT = THEME_DEFAULT;
 exports.TypographyThemeDefault = TypographyThemeDefault;

package/esm/Button/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { type ButtonProps } from "./index.props";
-declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

package/esm/Button/index.js

@@ -23,7 +23,8 @@ var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
     className: className,
     variant: variant,
     icon: icon,
-    fullWidth: fullWidth
+    fullWidth: fullWidth,
+    "data-cy": "button"
   }, props, {
     children: [icon && jsx(StyledIcon, {
       children: icon

package/esm/ClickOutside/index.d.ts

@@ -0,0 +1,6 @@
+import { FC, ReactNode } from "react";
+declare const ClickOutside: FC<{
+    onClick: (e: MouseEvent | TouchEvent) => void;
+    children: ReactNode;
+}>;
+export default ClickOutside;

package/esm/Menu/components/MenuItem/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { MenuItemProps } from "./index.props";
+declare const MenuItem: FC<MenuItemProps>;
+export default MenuItem;

package/esm/Menu/components/MenuItem/index.props.d.ts

@@ -0,0 +1,23 @@
+import { CSSObject } from "@emotion/react";
+import { ReactNode, MouseEvent } from "react";
+import { MenuVariant } from "../../index.props";
+interface IStylesProps {
+    color?: CSSObject["color"];
+    backgroundColor: CSSObject["backgroundColor"];
+}
+export interface MenuItemPalette {
+    normal: IStylesProps;
+    hovered?: IStylesProps;
+    focused?: IStylesProps;
+    selected?: IStylesProps;
+    disabled?: IStylesProps;
+}
+export interface MenuItemProps {
+    children: ReactNode;
+    className?: string;
+    isSelected?: boolean;
+    onClick?: (e: MouseEvent) => void;
+    variant?: keyof MenuVariant;
+    disabled?: boolean;
+}
+export {};

package/esm/Menu/components/MenuItem/styles.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { MenuVariant } from "../../index.props";
+export declare const Item: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    isSelected?: boolean | undefined;
+    variant: keyof MenuVariant;
+    disabled?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;

package/esm/Menu/index.d.ts

@@ -0,0 +1,3 @@
+import { MenuProps } from "./index.props";
+declare const Menu: MenuProps;
+export default Menu;

package/esm/Menu/index.props.d.ts

@@ -0,0 +1,33 @@
+import { CSSObject } from "@emotion/react";
+import { ReactElement, MouseEvent, FC } from "react";
+import MenuItem from "./components/MenuItem";
+import { MenuItemProps, MenuItemPalette } from "./components/MenuItem/index.props";
+export interface MenuPalette {
+    backgroundColor: CSSObject["backgroundColor"];
+    item: MenuItemPalette;
+}
+type VariantStyles = {
+    color?: CSSObject["color"];
+    backgroundColor?: CSSObject["backgroundColor"];
+};
+type VariantStates = {
+    normal?: VariantStyles;
+    hovered?: VariantStyles;
+    focused?: VariantStyles;
+    selected?: VariantStyles;
+    disabled?: VariantStyles;
+};
+export type MenuVariant = {
+    "primary": VariantStates;
+};
+interface Props {
+    selected?: string[];
+    variant?: keyof MenuVariant;
+    className?: string;
+    onClick?: (key: string, e: MouseEvent) => void;
+    children?: ReactElement<MenuItemProps> | ReactElement<MenuItemProps>[];
+}
+export interface MenuProps extends FC<Props> {
+    Item: typeof MenuItem;
+}
+export {};

package/esm/Menu/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const MenuList: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;

package/esm/Portal/index.d.ts

@@ -0,0 +1,6 @@
+import { FC, ReactNode } from "react";
+declare const Portal: FC<{
+    node?: HTMLElement | null;
+    children: ReactNode;
+}>;
+export default Portal;

package/esm/Theme/index.d.ts

@@ -4,6 +4,7 @@ export declare const THEMES: {
     DEFAULT: {
         breakpoints: import("./breakpoints").BreakpointsTheme;
         button: import("../Button/index.props").ButtonVariant & import("../Button/index.props").ButtonBase;
+        menu: import("../Menu/index.props").MenuVariant;
         input: {
             placeholder: {
                 color: string;
@@ -119,6 +120,7 @@ export declare const THEMES: {
     BA: {
         breakpoints: import("./breakpoints").BreakpointsTheme;
         button: import("../Button/index.props").ButtonVariant & import("../Button/index.props").ButtonBase;
+        menu: import("../Menu/index.props").MenuVariant;
         input: {
             placeholder: {
                 color: string;

package/esm/Theme/index.props.d.ts

@@ -5,8 +5,10 @@ import type { BreakpointsTheme } from "./breakpoints";
 import type { ButtonBase, ButtonVariant } from "../Button/index.props";
 import type { TypographyVariant } from "../Typography/index.props";
 import type { SwitchStates } from "../Switch/index.props";
+import { MenuVariant } from "../Menu/index.props";
 export type ThemeProps = {
     button: ButtonVariant & ButtonBase;
+    menu: MenuVariant;
     checkbox: CheckboxVariant;
     breakpoints: BreakpointsTheme;
     typography: TypographyVariant;

package/esm/Theme/themes/buenos_aires.d.ts

@@ -1,5 +1,6 @@
 import type { CheckboxVariant } from "../../Checkbox/index.props";
 import type { ButtonBase, ButtonVariant } from "../../Button/index.props";
+import { MenuVariant } from "../../Menu/index.props";
 export declare const ButtonThemeBA: ButtonVariant & ButtonBase;
 export declare const InputThemeBA: {
     placeholder: {
@@ -50,7 +51,7 @@ export declare const TypographyThemeBA: {
         color: string;
     };
 };
-export declare const SwitchThemeDefault: {
+export declare const SwitchThemeBA: {
     circle: {
         backgroundColor: string;
     };
@@ -65,9 +66,11 @@ export declare const SwitchThemeDefault: {
         };
     };
 };
+export declare const MenuThemeBA: MenuVariant;
 export declare const THEME_BA: {
     breakpoints: import("../breakpoints").BreakpointsTheme;
     button: ButtonVariant & ButtonBase;
+    menu: MenuVariant;
     input: {
         placeholder: {
             color: string;

package/esm/Theme/themes/buenos_aires.js

@@ -178,7 +178,7 @@ var TypographyThemeBA = {
     color: Color.BG_3
   }
 };
-var SwitchThemeDefault = {
+var SwitchThemeBA = {
   circle: {
     backgroundColor: Color.WHITE
   },
@@ -193,14 +193,35 @@ var SwitchThemeDefault = {
     }
   }
 };
+var MenuThemeBA = {
+  primary: {
+    normal: {
+      backgroundColor: Color.WHITE
+    },
+    hovered: {
+      backgroundColor: Color.PRIMARY_BA_2
+    },
+    focused: {
+      backgroundColor: Color.PRIMARY_BA_2
+    },
+    selected: {
+      backgroundColor: Color.PRIMARY_BA_2
+    },
+    disabled: {
+      color: Color.BG_2,
+      backgroundColor: Color.WHITE
+    }
+  }
+};
 var THEME_BA = {
   breakpoints: Breakpoints,
   button: ButtonThemeBA,
+  menu: MenuThemeBA,
   input: InputThemeBA,
   checkbox: CheckboxThemeBA,
   typography: TypographyThemeBA,
-  "switch": SwitchThemeDefault,
+  "switch": SwitchThemeBA,
   palette: Color
 };
 
-export { ButtonThemeBA, CheckboxThemeBA, InputThemeBA, SwitchThemeDefault, THEME_BA, TypographyThemeBA };
+export { ButtonThemeBA, CheckboxThemeBA, InputThemeBA, MenuThemeBA, SwitchThemeBA, THEME_BA, TypographyThemeBA };

package/esm/Theme/themes/default.d.ts

@@ -1,5 +1,6 @@
 import type { CheckboxVariant } from "../../Checkbox/index.props";
 import type { ButtonBase, ButtonVariant } from "../../Button/index.props";
+import { MenuVariant } from "../../Menu/index.props";
 export declare const ButtonThemeDefault: ButtonVariant & ButtonBase;
 export declare const InputThemeDefault: {
     placeholder: {
@@ -65,9 +66,11 @@ export declare const SwitchThemeDefault: {
         };
     };
 };
+export declare const MenuThemeDefault: MenuVariant;
 export declare const THEME_DEFAULT: {
     breakpoints: import("../breakpoints").BreakpointsTheme;
     button: ButtonVariant & ButtonBase;
+    menu: MenuVariant;
     input: {
         placeholder: {
             color: string;

package/esm/Theme/themes/default.js

@@ -191,9 +191,30 @@ var SwitchThemeDefault = {
     }
   }
 };
+var MenuThemeDefault = {
+  primary: {
+    normal: {
+      backgroundColor: Color.WHITE
+    },
+    hovered: {
+      backgroundColor: Color.PRIMARY_2
+    },
+    focused: {
+      backgroundColor: Color.PRIMARY_2
+    },
+    selected: {
+      backgroundColor: Color.PRIMARY_2
+    },
+    disabled: {
+      color: Color.BG_2,
+      backgroundColor: Color.WHITE
+    }
+  }
+};
 var THEME_DEFAULT = {
   breakpoints: Breakpoints,
   button: ButtonThemeDefault,
+  menu: MenuThemeDefault,
   input: InputThemeDefault,
   checkbox: CheckboxThemeDefault,
   typography: TypographyThemeDefault,
@@ -201,4 +222,4 @@ var THEME_DEFAULT = {
   palette: Color
 };
 
-export { ButtonThemeDefault, CheckboxThemeDefault, InputThemeDefault, SwitchThemeDefault, THEME_DEFAULT, TypographyThemeDefault };
+export { ButtonThemeDefault, CheckboxThemeDefault, InputThemeDefault, MenuThemeDefault, SwitchThemeDefault, THEME_DEFAULT, TypographyThemeDefault };

package/esm/hooks/useOnClickOutside/index.d.ts

@@ -0,0 +1,3 @@
+import { MutableRefObject, RefObject } from "react";
+declare function useOnClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T> | MutableRefObject<T | undefined>, handler: (e: MouseEvent | TouchEvent) => void): void;
+export default useOnClickOutside;

package/hooks/useOnClickOutside/index.d.ts

@@ -0,0 +1,3 @@
+import { MutableRefObject, RefObject } from "react";
+declare function useOnClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T> | MutableRefObject<T | undefined>, handler: (e: MouseEvent | TouchEvent) => void): void;
+export default useOnClickOutside;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.7.23",
+  "version": "0.7.24",
   "description": "React UI components library",
   "main": "index.js",
   "scripts": {},
@@ -30,9 +30,8 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "7.24.3",
-    "@babel/preset-env": "7.24.5",
-    "@babel/preset-react": "7.24.1",
-    "@babel/preset-typescript": "7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
+    "@cypress/code-coverage": "^3.12.39",
     "@emotion/babel-plugin": "11.11.0",
     "@eslint/js": "9.2.0",
     "@rollup/plugin-babel": "6.0.4",
@@ -52,7 +51,12 @@
     "@storybook/test": "8.0.10",
     "@svgr/rollup": "8.1.0",
     "@swc/plugin-emotion": "^3.0.4",
+    "@types/cypress": "^1.1.3",
+    "@types/node": "^20.12.12",
     "@types/react": "18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "babel-loader": "^9.1.3",
+    "cypress": "^13.10.0",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "^2.29.1",
@@ -63,6 +67,7 @@
     "prettier": "3.2.5",
     "rollup": "4.17.2",
     "storybook": "8.0.10",
+    "ts-loader": "^9.5.1",
     "ts-node": "10.9.2",
     "typescript": "5.4.5",
     "typescript-eslint": "7.8.0"