@acvl/frontend-components 0.0.40 → 0.0.42

package/dist/esm/types/src/components/index.d.ts

@@ -1 +1,2 @@
-export * from './v1';
+export * from "./v1";
+export * from "./v2";

package/dist/esm/types/src/components/v1/layout/pages/DetailPage/FieldArrayField/index.d.ts

@@ -16,7 +16,6 @@ export interface ArrayFieldProps {
     defaultValues: {
         [key: string]: any;
     };
-    form?: any;
     dataGridProps: DataGridProps;
     gridProps?: GridProps;
     pageType?: PageType;

package/dist/esm/types/src/components/v1/layout/shared/Tabs/index.d.ts

@@ -1,4 +1,5 @@
 import React, { ReactNode } from "react";
+import { BoxProps } from "@mui/material";
 import { PageType } from "../../../types";
 export interface MyTab {
     value: string;
@@ -7,10 +8,13 @@ export interface MyTab {
     children: ReactNode;
 }
 export interface MyTabProps {
-    pathname: string;
     tabs: MyTab[];
     initialValue?: string;
     type?: PageType;
+    slotProps?: {
+        mainContainer?: BoxProps;
+        contentContainer?: BoxProps;
+    };
 }
 /**
  * Pestañas customizables

package/dist/esm/types/src/components/v2/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./layout";
+export * from "./lib";

package/dist/esm/types/src/components/v2/layout/index.d.ts

@@ -0,0 +1 @@
+export * from "./pages";

package/dist/esm/types/src/components/v2/layout/pages/DetailPage/Field/DetailField.d.ts

@@ -0,0 +1,4 @@
+import { type FieldProps } from "./index";
+type Props = Partial<FieldProps>;
+declare const DetailField: (props: Props) => import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[];
+export default DetailField;

package/dist/esm/types/src/components/v2/layout/pages/DetailPage/Field/EditField.d.ts

@@ -0,0 +1,4 @@
+import { type FieldProps } from "./index";
+type Props = Partial<FieldProps>;
+declare const EditField: (props: Props) => any;
+export default EditField;

package/dist/esm/types/src/components/v2/layout/pages/DetailPage/Field/index.d.ts

@@ -0,0 +1,25 @@
+import { type GridProps } from "@mui/material";
+import { type PageType } from "../../../../../v1";
+export interface FieldProps {
+    pageType?: PageType;
+    fieldData?: any;
+    name: string;
+    detail_name?: string;
+    label: string;
+    type: any;
+    gridProps?: GridProps;
+    fieldProps?: object;
+    extraProps?: any;
+    detailFieldProps?: {
+        preValue?: string;
+        postValue?: string;
+    };
+    navigation?: {
+        url: string;
+        permission: string;
+    };
+    permission?: string;
+    display?: boolean;
+}
+declare const Field: (props: FieldProps) => import("react/jsx-runtime").JSX.Element | undefined;
+export default Field;

package/dist/esm/types/src/components/v2/layout/pages/DetailPage/Section/index.d.ts

@@ -0,0 +1,13 @@
+import { type MyTab, type PageType } from "../../../../../v1";
+import type { SubsectionProps } from "../Subsection";
+export interface SectionProps extends Omit<MyTab, "children"> {
+    pageType?: PageType;
+    display?: boolean;
+    subsections: SubsectionProps[];
+    historial?: {
+        endpoint?: string;
+    };
+    data?: any;
+}
+declare const Section: (props: SectionProps) => import("react/jsx-runtime").JSX.Element | null;
+export default Section;

package/dist/esm/types/src/components/v2/layout/pages/DetailPage/Subsection/index.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+import { type PageType } from "../../../../../v1";
+import { type FieldProps } from "../Field";
+import { ArrayFieldProps } from "../../../../../v1/layout/pages/DetailPage/FieldArrayField";
+export interface SubsectionProps {
+    display?: boolean;
+    pageType?: PageType;
+    data?: any;
+    bgColor?: string;
+    title?: string;
+    description?: string;
+    first?: boolean;
+    fields?: FieldProps[];
+    arrayFields?: ArrayFieldProps[];
+    content?: (data: any) => ReactNode;
+}
+declare const Subsection: (props: SubsectionProps) => import("react/jsx-runtime").JSX.Element;
+export default Subsection;

package/dist/esm/types/src/components/v2/layout/pages/DetailPage/index.d.ts

@@ -0,0 +1,51 @@
+import { type ReactNode } from "react";
+import { type JSONFormProps, type PageType } from "../../../../v1";
+import { type ButtonProps } from "@mui/material";
+import { type SectionProps } from "./Section";
+export interface DetailPageV2Props {
+    api: {
+        data: {
+            query: any;
+            args?: any;
+            skipToken?: boolean;
+        };
+        mutate: {
+            mutation: any;
+            args?: any;
+        };
+        delete?: {
+            mutation: any;
+        };
+    };
+    form: Pick<JSONFormProps, "props" | "type" | "useLabel"> & {
+        schema: any;
+        defaultValues: {
+            [k: string]: any;
+        };
+    };
+    sections: (form: any) => SectionProps[];
+    pageType: PageType;
+    slots?: {
+        button?: ReactNode;
+        extraButtons?: ((id: number) => ReactNode)[];
+        badge?: string;
+    };
+    slotProps?: {
+        button?: {
+            save?: {
+                type: "onClick";
+                disableNavBack?: boolean;
+                onClick?: () => void;
+            };
+            cancel?: Partial<ButtonProps>;
+        };
+        historial?: {
+            endpoint?: string;
+        };
+        permissionsPath?: string;
+        deleteButton?: {
+            disableNavBack?: boolean;
+        };
+    };
+}
+export default function DetailPage(props: DetailPageV2Props): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/v2/layout/pages/index.d.ts

@@ -0,0 +1 @@
+export { default as DetailPage_v2 } from "./DetailPage";

package/dist/esm/types/src/components/v2/lib/hooks/index.d.ts

@@ -0,0 +1 @@
+export { default as useMutationHandler } from "./useMutationHandler";

package/dist/esm/types/src/components/v2/lib/hooks/useMutationHandler.d.ts

@@ -0,0 +1,23 @@
+import { type UseFormReturn } from "react-hook-form";
+import { type JSONFormProps } from "../../../v1";
+interface MutationHandlerOptions {
+    mutationFn: (data: any) => {
+        unwrap: () => Promise<any>;
+    };
+    form?: UseFormReturn<any>;
+    onSuccess: () => void;
+    onValidationError?: () => void;
+    successTitle?: string;
+    successMessage?: string;
+    onInvalidParams?: (error: any) => boolean;
+}
+declare const useMutationHandler: ({ mutationFn, form, onSuccess, onValidationError, successMessage, onInvalidParams, }: MutationHandlerOptions) => {
+    submit: ({ submitData, formProps, args, }: {
+        submitData: any;
+        formProps: Partial<JSONFormProps>;
+        args?: {
+            [k: string]: any;
+        };
+    }) => void;
+};
+export default useMutationHandler;

package/dist/esm/types/src/components/v2/lib/index.d.ts

@@ -0,0 +1 @@
+export * from "./hooks";

package/dist/esm/types/src/index.d.ts

@@ -1 +1 @@
-export * from './components';
+export * from "./components";

package/dist/index.d.ts

@@ -15,6 +15,7 @@ import * as redux from 'redux';
 import * as _reduxjs_toolkit from '@reduxjs/toolkit';
 import * as _emotion_styled from '@emotion/styled';
 import * as _mui_system from '@mui/system';
+import { UseFormReturn } from 'react-hook-form';
 
 interface NormalOrIconProps {
     buttonProps: ButtonProps;
@@ -544,7 +545,7 @@ interface EditReadOnlyFields {
     validator: FieldValidationProps;
 }
 
-interface FieldProps {
+interface FieldProps$1 {
     data?: any;
     fieldData?: any;
     form?: any;
@@ -600,25 +601,24 @@ interface ArrayFieldProps {
     defaultValues: {
         [key: string]: any;
     };
-    form?: any;
     dataGridProps: DataGridProps$1;
     gridProps?: GridProps;
     pageType?: PageType;
     parser?: JSONParserProps;
-    fields: FieldProps[];
+    fields: FieldProps$1[];
     slotProps?: {
         drawer?: Partial<MainDrawerProps>;
     };
 }
 
-interface SectionProps {
+interface SectionProps$1 {
     display?: boolean | FieldValidationProps | FieldValidationProps[];
     data?: any;
     form?: any;
     bgColor?: string;
     title?: string;
     description?: string;
-    fields?: FieldProps[];
+    fields?: FieldProps$1[];
     arrayFields?: ArrayFieldProps[];
     content?: (data: any) => ReactNode;
     pageType?: PageType;
@@ -675,7 +675,7 @@ interface DetailPageProps {
             mutation: any;
         };
     };
-    sections: SectionProps[];
+    sections: SectionProps$1[];
     pageType: PageType;
     edit: {
         defaultValues: any;
@@ -691,7 +691,7 @@ interface DetailPageProps {
     };
     ref?: RefObject<any>;
 }
-declare function DetailPage(props: DetailPageProps): react_jsx_runtime.JSX.Element;
+declare function DetailPage$1(props: DetailPageProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Muestra animación de cargado hasta arriba de la página
@@ -717,10 +717,13 @@ interface MyTab {
     children: ReactNode;
 }
 interface MyTabProps {
-    pathname: string;
     tabs: MyTab[];
     initialValue?: string;
     type?: PageType;
+    slotProps?: {
+        mainContainer?: BoxProps;
+        contentContainer?: BoxProps;
+    };
 }
 /**
  * Pestañas customizables
@@ -907,5 +910,119 @@ declare module '@mui/material/styles' {
 }
 declare const theme: () => _mui_material.Theme;
 
-export { APIContext, APIProvider, ActiveCell, Base, ButtonWithDrawer, CSVUpload, ContentLayout, ControlledDate, ControlledDropdown, ControlledFileField, FileUploadBox as ControlledFileUploadBox, ControlledNumber, ControlledPhoneNumber, ControlledSelect, ControlledSlider as ControlledSimpleSlider, ControlledSlider$1 as ControlledSlider, ControlledSwitch, ControlledText, ControlledTimePicker, ControlledToggleButtons, CoverPage, CreateButtonBase, CreateButtonWithMenuOptions, CrudDropdown, DeleteButton, DeleteConfirmationDialog, DetailPage, EditButton, ExportCSV, HistorialDrawer, ListPage, Loadable, LoadingComponent, Logo, MainDrawer, MenuItemWithLoading, ModuleCard, MoreOptions, MyGridEditSingleSelect, NavigationContext, NavigationProvider, NormalOrIcon, NotAllowed, NotFound, ObjectProgressStack, SaveCancelButton, StatusBadge, StyledMenu, Tabs, Transitions, UncontrolledText, changeTitle, closeProgressSnack, deleteColumn, editColumn, filterQuery, formParser, _default as headerReducer, manualCacheRefresh, mergeSettings, openProgressSnack, query, renderEditCellWithErrorTooltip, setErrors, _default$1 as snackProgressReducer, tags, theme, updateProgressSnackData, useAPI, useHasPermission, useNavigation, valueLabel };
-export type { APIcontextProps, ComoOpcionesProps, CustomToolbarProps, DeleteGridColumnsProps, EditGridColumnsProps, EditReadOnlyFields, FieldFilter, FieldProps, FieldValidationProps, GridArgs, GridColDefPropsOverrides, JSONFormProps, JSONParserProps, MyDataGridProps, MyGridFilterModel, MyTab, MyTabProps, PageType };
+interface FieldProps {
+    pageType?: PageType;
+    fieldData?: any;
+    name: string;
+    detail_name?: string;
+    label: string;
+    type: any;
+    gridProps?: GridProps;
+    fieldProps?: object;
+    extraProps?: any;
+    detailFieldProps?: {
+        preValue?: string;
+        postValue?: string;
+    };
+    navigation?: {
+        url: string;
+        permission: string;
+    };
+    permission?: string;
+    display?: boolean;
+}
+
+interface SubsectionProps {
+    display?: boolean;
+    pageType?: PageType;
+    data?: any;
+    bgColor?: string;
+    title?: string;
+    description?: string;
+    first?: boolean;
+    fields?: FieldProps[];
+    arrayFields?: ArrayFieldProps[];
+    content?: (data: any) => ReactNode;
+}
+
+interface SectionProps extends Omit<MyTab, "children"> {
+    pageType?: PageType;
+    display?: boolean;
+    subsections: SubsectionProps[];
+    historial?: {
+        endpoint?: string;
+    };
+    data?: any;
+}
+
+interface DetailPageV2Props {
+    api: {
+        data: {
+            query: any;
+            args?: any;
+            skipToken?: boolean;
+        };
+        mutate: {
+            mutation: any;
+            args?: any;
+        };
+        delete?: {
+            mutation: any;
+        };
+    };
+    form: Pick<JSONFormProps, "props" | "type" | "useLabel"> & {
+        schema: any;
+        defaultValues: {
+            [k: string]: any;
+        };
+    };
+    sections: (form: any) => SectionProps[];
+    pageType: PageType;
+    slots?: {
+        button?: ReactNode;
+        extraButtons?: ((id: number) => ReactNode)[];
+        badge?: string;
+    };
+    slotProps?: {
+        button?: {
+            save?: {
+                type: "onClick";
+                disableNavBack?: boolean;
+                onClick?: () => void;
+            };
+            cancel?: Partial<ButtonProps>;
+        };
+        historial?: {
+            endpoint?: string;
+        };
+        permissionsPath?: string;
+        deleteButton?: {
+            disableNavBack?: boolean;
+        };
+    };
+}
+declare function DetailPage(props: DetailPageV2Props): react_jsx_runtime.JSX.Element;
+
+interface MutationHandlerOptions {
+    mutationFn: (data: any) => {
+        unwrap: () => Promise<any>;
+    };
+    form?: UseFormReturn<any>;
+    onSuccess: () => void;
+    onValidationError?: () => void;
+    successTitle?: string;
+    successMessage?: string;
+    onInvalidParams?: (error: any) => boolean;
+}
+declare const useMutationHandler: ({ mutationFn, form, onSuccess, onValidationError, successMessage, onInvalidParams, }: MutationHandlerOptions) => {
+    submit: ({ submitData, formProps, args, }: {
+        submitData: any;
+        formProps: Partial<JSONFormProps>;
+        args?: {
+            [k: string]: any;
+        };
+    }) => void;
+};
+
+export { APIContext, APIProvider, ActiveCell, Base, ButtonWithDrawer, CSVUpload, ContentLayout, ControlledDate, ControlledDropdown, ControlledFileField, FileUploadBox as ControlledFileUploadBox, ControlledNumber, ControlledPhoneNumber, ControlledSelect, ControlledSlider as ControlledSimpleSlider, ControlledSlider$1 as ControlledSlider, ControlledSwitch, ControlledText, ControlledTimePicker, ControlledToggleButtons, CoverPage, CreateButtonBase, CreateButtonWithMenuOptions, CrudDropdown, DeleteButton, DeleteConfirmationDialog, DetailPage$1 as DetailPage, DetailPage as DetailPage_v2, EditButton, ExportCSV, HistorialDrawer, ListPage, Loadable, LoadingComponent, Logo, MainDrawer, MenuItemWithLoading, ModuleCard, MoreOptions, MyGridEditSingleSelect, NavigationContext, NavigationProvider, NormalOrIcon, NotAllowed, NotFound, ObjectProgressStack, SaveCancelButton, StatusBadge, StyledMenu, Tabs, Transitions, UncontrolledText, changeTitle, closeProgressSnack, deleteColumn, editColumn, filterQuery, formParser, _default as headerReducer, manualCacheRefresh, mergeSettings, openProgressSnack, query, renderEditCellWithErrorTooltip, setErrors, _default$1 as snackProgressReducer, tags, theme, updateProgressSnackData, useAPI, useHasPermission, useMutationHandler, useNavigation, valueLabel };
+export type { APIcontextProps, ComoOpcionesProps, CustomToolbarProps, DeleteGridColumnsProps, EditGridColumnsProps, EditReadOnlyFields, FieldFilter, FieldProps$1 as FieldProps, FieldValidationProps, GridArgs, GridColDefPropsOverrides, JSONFormProps, JSONParserProps, MyDataGridProps, MyGridFilterModel, MyTab, MyTabProps, PageType };

package/package.json

@@ -1,106 +1,106 @@
 {
-  "name": "@acvl/frontend-components",
-  "version": "0.0.40",
-  "description": "Component library for ACV frontend projects.",
-  "homepage": "https://github.com/ACV-Logistics/acv-frontend-components#readme",
-  "access": "public",
-  "bugs": {
-    "url": "https://github.com/ACV-Logistics/acv-frontend-components/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/ACV-Logistics/acv-frontend-components.git"
-  },
-  "license": "MIT",
-  "author": "mario.aftimos",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "dev": "rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript --watch",
-    "build": "rimraf dist && rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.29.0",
-    "@babel/preset-env": "^7.29.2",
-    "@babel/preset-react": "^7.28.5",
-    "@babel/preset-typescript": "^7.28.5",
-    "@rollup/plugin-commonjs": "^29.0.2",
-    "@rollup/plugin-image": "^3.0.3",
-    "@rollup/plugin-node-resolve": "^16.0.3",
-    "@rollup/plugin-terser": "^1.0.0",
-    "@rollup/plugin-typescript": "^12.3.0",
-    "@types/lodash": "^4.17.24",
-    "@types/node": "^25.6.0",
-    "@types/react": "^19.2.14",
-    "@types/rollup-plugin-peer-deps-external": "^2.2.6",
-    "postcss": "^8.5.8",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.4",
-    "rimraf": "^6.1.3",
-    "rollup": "^4.60.1",
-    "rollup-plugin-dts": "^6.4.1",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-preserve-directives": "^0.4.0",
-    "rollup-plugin-preserve-use-client": "^3.0.1",
-    "rollup-plugin-typescript2": "^0.37.0",
-    "tslib": "^2.8.1",
-    "typescript": "^5.9.3"
-  },
-  "peerDependencies": {
-    "@dnd-kit/modifiers": "^9.0.0",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
-    "@hookform/resolvers": "^5.2.2",
-    "@mui/icons-material": "^7.3.9",
-    "@mui/lab": "^7.0.1-beta.23",
-    "@mui/material": "^7.3.9",
-    "@mui/styled-engine-sc": "^7.3.9",
-    "@mui/x-data-grid": "^8.28.2",
-    "@mui/x-date-pickers": "^8.0.0",
-    "dayjs": "^1.11.0",
-    "@reduxjs/toolkit": "^2.11.2",
-    "@toolpad/core": "^0.16.0",
-    "async-mutex": "^0.5.0",
-    "immer": "^11.1.4",
-    "lodash": "^4.18.1",
-    "mui-tel-input": "^10.0.0",
-    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react-dropzone": "^15.0.0",
-    "react-hook-form": "^7.72.1",
-    "react-number-format": "^5.4.5",
-    "react-redux": "^9.2.0",
-    "react-router-dom": "^7.14.1",
-    "styled-components": "^6.3.12",
-    "zod": "^4.3.6"
-  },
-  "babel": {
-    "sourceType": "unambiguous",
-    "presets": [
-      [
-        "@babel/preset-env",
-        {
-          "targets": {
-            "chrome": 100,
-            "safari": 15,
-            "firefox": 91
-          }
-        }
-      ],
-      [
-        "@babel/preset-react",
-        {
-          "runtime": "automatic"
-        }
-      ],
-      "@babel/preset-typescript"
-    ]
-  }
+    "name": "@acvl/frontend-components",
+    "version": "0.0.42",
+    "description": "Component library for ACV frontend projects.",
+    "homepage": "https://github.com/ACV-Logistics/acv-frontend-components#readme",
+    "access": "public",
+    "bugs": {
+        "url": "https://github.com/ACV-Logistics/acv-frontend-components/issues"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/ACV-Logistics/acv-frontend-components.git"
+    },
+    "license": "MIT",
+    "author": "mario.aftimos",
+    "main": "dist/cjs/index.js",
+    "module": "dist/esm/index.js",
+    "types": "dist/index.d.ts",
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "dev": "rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript --watch",
+        "build": "rimraf dist && rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.29.0",
+        "@babel/preset-env": "^7.29.2",
+        "@babel/preset-react": "^7.28.5",
+        "@babel/preset-typescript": "^7.28.5",
+        "@rollup/plugin-commonjs": "^29.0.2",
+        "@rollup/plugin-image": "^3.0.3",
+        "@rollup/plugin-node-resolve": "^16.0.3",
+        "@rollup/plugin-terser": "^1.0.0",
+        "@rollup/plugin-typescript": "^12.3.0",
+        "@types/lodash": "^4.17.24",
+        "@types/node": "^25.6.0",
+        "@types/react": "^19.2.14",
+        "@types/rollup-plugin-peer-deps-external": "^2.2.6",
+        "postcss": "^8.5.8",
+        "react": "^19.2.5",
+        "react-dom": "^19.2.4",
+        "rimraf": "^6.1.3",
+        "rollup": "^4.60.1",
+        "rollup-plugin-dts": "^6.4.1",
+        "rollup-plugin-peer-deps-external": "^2.2.4",
+        "rollup-plugin-postcss": "^4.0.2",
+        "rollup-plugin-preserve-directives": "^0.4.0",
+        "rollup-plugin-preserve-use-client": "^3.0.1",
+        "rollup-plugin-typescript2": "^0.37.0",
+        "tslib": "^2.8.1",
+        "typescript": "^5.9.3"
+    },
+    "peerDependencies": {
+        "@dnd-kit/modifiers": "^9.0.0",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.0",
+        "@hookform/resolvers": "^5.2.2",
+        "@mui/icons-material": "^7.3.9",
+        "@mui/lab": "^7.0.1-beta.23",
+        "@mui/material": "^7.3.9",
+        "@mui/styled-engine-sc": "^7.3.9",
+        "@mui/x-data-grid": "^8.28.2",
+        "@mui/x-date-pickers": "^8.0.0",
+        "dayjs": "^1.11.0",
+        "@reduxjs/toolkit": "^2.11.2",
+        "@toolpad/core": "^0.16.0",
+        "async-mutex": "^0.5.0",
+        "immer": "^11.1.4",
+        "lodash": "^4.18.1",
+        "mui-tel-input": "^10.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dropzone": "^15.0.0",
+        "react-hook-form": "^7.72.1",
+        "react-number-format": "^5.4.5",
+        "react-redux": "^9.2.0",
+        "react-router-dom": "^7.14.1",
+        "styled-components": "^6.3.12",
+        "zod": "^4.3.6"
+    },
+    "babel": {
+        "sourceType": "unambiguous",
+        "presets": [
+            [
+                "@babel/preset-env",
+                {
+                    "targets": {
+                        "chrome": 100,
+                        "safari": 15,
+                        "firefox": 91
+                    }
+                }
+            ],
+            [
+                "@babel/preset-react",
+                {
+                    "runtime": "automatic"
+                }
+            ],
+            "@babel/preset-typescript"
+        ]
+    }
 }