@m4l/components 9.3.5 → 9.3.7

package/components/ObjectLogs/hooks/useFilterAndSort.js

@@ -0,0 +1,52 @@
+import { useCallback } from "react";
+import { useEnvironment } from "@m4l/core";
+import { f as filterFieldsGenerator } from "../helpers/Fields/filterFields.js";
+import { g as getRawFiltersForNetwork } from "../../DynamicFilter/helpers/getRawFiltersForNetwork.js";
+import { u as useDynamicFilterAndSort } from "../../../hooks/useDynamicFilterAndSort/useDynamicFilterAndSort.js";
+function useFilterAndSort(props) {
+  const { setBackendQueryParams, Refresh, otherApp = false, resourceTypeId, resourceSerialId } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const onChangeFilterSort = useCallback((params) => {
+    const fixedFields = [
+      {
+        n: "resourceTypeId",
+        o: "c",
+        o1: resourceTypeId,
+        ft: "string"
+      },
+      {
+        n: "resourceSerialId",
+        o: "c",
+        o1: resourceSerialId,
+        ft: "string"
+      }
+    ];
+    const allFields = [...fixedFields, ...params.eventFilters?.rawFilters || []];
+    if (otherApp) {
+      setBackendQueryParams({
+        f: getRawFiltersForNetwork(allFields, "snakeCase")
+      });
+    } else {
+      setBackendQueryParams((prevParams) => ({
+        ...prevParams,
+        f: getRawFiltersForNetwork(prevParams.eventFilters?.rawFilters || [], "snakeCase")
+      }));
+    }
+    Refresh();
+  }, [Refresh, setBackendQueryParams, otherApp, resourceTypeId, resourceSerialId]);
+  const { leftActions, visibleCustomHeader, customHeaderComponent } = useDynamicFilterAndSort({
+    onChangeFilterSort,
+    fields: filterFieldsGenerator(`${host_static_assets}/${environment_assets}`, otherApp),
+    withAllField: true,
+    visibleRefresh: true,
+    filterSortAutomatic: false
+  });
+  return {
+    leftActions,
+    visibleCustomHeader,
+    customHeaderComponent
+  };
+}
+export {
+  useFilterAndSort as u
+};

package/components/ObjectLogs/slots/ObjectLogsSlots.js

@@ -13,7 +13,7 @@ const ContainerWrapperStyled = styled("div", {
   name: OBJECT_LOGS_KEY_COMPONENT,
   slot: ObjectLogsSlots.root
 })(objectLogsStyles?.root);
-const ActionsWrapperStyled = styled("div", {
+styled("div", {
   name: OBJECT_LOGS_KEY_COMPONENT,
   slot: ObjectLogsSlots.actionsWrapperStyled
 })(objectLogsStyles?.actionsWrapperStyled);
@@ -54,7 +54,6 @@ styled(ReactJson, {
   slot: ObjectLogsSlots.reactJsonSlot
 })(objectLogsStyles?.reactJsonSlot);
 export {
-  ActionsWrapperStyled as A,
   ContainerWrapperStyled as C,
   DetailDialogComponent as D,
   GridWrapperStyled as G,

package/components/ObjectLogs/subcomponents/DetailDialog/index.js

@@ -1,13 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { useNetwork } from "@m4l/core";
-import { useHostTheme } from "@m4l/graphics";
-import ReactJson from "@microlink/react-json-view";
 import { a as OBJECT_LOGS_M4L_END_POINT, b as OBJECT_LOGS_OTHERS_END_POINT } from "../../constants.js";
+import { R as ReactJsonViewer } from "../../../extended/React-Json-Viewer/ReactJsonViewer.js";
 function DetailDialog(props) {
-  const { logId, theme, type } = props;
+  const { logId, type } = props;
   const { networkOperation } = useNetwork();
-  const { hostThemeOptions } = useHostTheme();
   const [detail, setDetail] = useState({});
   useEffect(() => {
     let mounted = true;
@@ -27,12 +25,9 @@ function DetailDialog(props) {
       mounted = false;
     };
   }, []);
-  const modeTheme = hostThemeOptions.palette?.mode;
-  const appliedTheme = theme || (modeTheme === "dark" ? "summerfruit" : "rjv-default");
   return /* @__PURE__ */ jsx(
-    ReactJson,
+    ReactJsonViewer,
     {
-      theme: appliedTheme,
       name: null,
       sortKeys: true,
       displayDataTypes: false,

package/components/ObjectLogs/subcomponents/ObjectLogsByM4L/ObjectLogsByM4L.js

@@ -1,20 +1,16 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { D as DataGrid } from "../../../DataGrid/DataGrid.js";
-import { useEnvironment } from "@m4l/core";
-import { D as DynamicFilter } from "../../../DynamicFilter/DynamicFilter.js";
 import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.js";
-import { C as ContainerWrapperStyled, A as ActionsWrapperStyled, G as GridWrapperStyled } from "../../slots/ObjectLogsSlots.js";
-import { D as DICTIONARY } from "../../dictionary.js";
+import { C as ContainerWrapperStyled, G as GridWrapperStyled } from "../../slots/ObjectLogsSlots.js";
 import { usePaginate } from "@m4l/graphics";
 import { u as useObjectLogsColumns } from "../../hooks/useObjectLogsColumns.js";
 import { a as OBJECT_LOGS_M4L_END_POINT, O as OBJECT_LOGS_KEY_COMPONENT } from "../../constants.js";
 import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
-import { endOfDay, startOfMonth } from "date-fns";
+import { u as useFilterAndSort } from "../../hooks/useFilterAndSort.js";
 import { O as ObjectLogsSlots } from "../../slots/ObjectLogsEnum.js";
 function ObjectLogsByM4L(props) {
   const { resourceId, objectId, dataTestId = "" } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
   const [backendQueryParams, setBackendQueryParams] = useState(() => {
     return { resource_id: resourceId, object_id: objectId };
   });
@@ -31,92 +27,47 @@ function ObjectLogsByM4L(props) {
     clearRows();
     setBackendQueryParams({ resource_id: resourceId, object_id: objectId });
   }, [resourceId, objectId]);
-  const onChangeFilter = (_initFilters, rawFilters) => {
-    setBackendQueryParams((oldParms) => ({ ...oldParms, f: rawFilters }));
-    Refresh();
-  };
-  return /* @__PURE__ */ jsxs(
+  const { leftActions, visibleCustomHeader, customHeaderComponent } = useFilterAndSort({ setBackendQueryParams, Refresh, otherApp: false });
+  return /* @__PURE__ */ jsx(
     ContainerWrapperStyled,
     {
       ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: `m4ldatagrid-${dataTestId}` } : {},
       ...getPropDataTestId(OBJECT_LOGS_KEY_COMPONENT, ObjectLogsSlots.root, dataTestId),
-      children: [
-        /* @__PURE__ */ jsx(ActionsWrapperStyled, { children: /* @__PURE__ */ jsx(
-          DynamicFilter,
-          {
-            withAllField: true,
-            onChangeFilters: onChangeFilter,
-            automatic: false,
-            fields: [
-              {
-                name: "user_logs.created_at",
-                dictionaryId: DICTIONARY.LABEL_CREATED_AT,
-                type: "datetime",
-                multiple: false,
-                presence: "fixed",
-                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/email.svg`,
-                defaultOperand1: startOfMonth(/* @__PURE__ */ new Date()),
-                defaultOperand2: endOfDay(/* @__PURE__ */ new Date())
-              },
-              {
-                name: "users.email",
-                dictionaryId: DICTIONARY.LABEL_USER,
-                type: "string",
-                multiple: true,
-                presence: "optional",
-                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/email.svg`
-              },
-              {
-                name: "user_logs.log_preview",
-                dictionaryId: DICTIONARY.LABEL_LOG_PREVIEW,
-                type: "string",
-                multiple: true,
-                presence: "optional",
-                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/log_preview.svg`
-              },
-              {
-                name: "user_logs.log_detail",
-                dictionaryId: DICTIONARY.LABEL_LOG_DETAIL,
-                type: "string",
-                multiple: true,
-                presence: "optional",
-                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/log_detail.svg`
-              }
-            ],
-            initialAppliedFilters: []
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          GridWrapperStyled,
-          {
-            children: /* @__PURE__ */ jsx(
-              DataGrid,
-              {
-                id: "users_logs_list",
-                dataTestId,
-                columns,
-                rows,
-                rowKeyGetter: (row) => row.id,
-                withActions: true,
-                actionsProps: {
-                  withPager: true,
-                  withLocalFilters: true,
-                  pagerOptions: {
-                    records: rows.length,
-                    totalRecords: pagerState.totalRecords,
-                    rowsPerPageOptions: [1, 2, 3, 4, 5, 10, 25],
-                    page: pagerState.page,
-                    rowsPerPage: pagerState.rowsPerPage,
-                    onPageChange,
-                    onRowsPerPageChange
-                  }
+      role: "grid",
+      "aria-label": "object-logs",
+      children: /* @__PURE__ */ jsx(
+        GridWrapperStyled,
+        {
+          children: /* @__PURE__ */ jsx(
+            DataGrid,
+            {
+              id: "users_logs_list",
+              dataTestId,
+              columns,
+              rows,
+              rowKeyGetter: (row) => row.id,
+              visibleCustomHeader,
+              customHeader: customHeaderComponent,
+              withActions: true,
+              actionsProps: {
+                leftActions,
+                withPager: true,
+                withLocalFilters: true,
+                pagerOptions: {
+                  records: rows.length,
+                  totalRecords: pagerState.totalRecords,
+                  rowsPerPageOptions: [1, 2, 3, 4, 5, 10, 25],
+                  page: pagerState.page,
+                  rowsPerPage: pagerState.rowsPerPage,
+                  onPageChange,
+                  onRowsPerPageChange
                 }
-              },
-              "users_list_logs"
-            )
-          }
-        )
-      ]
+              }
+            },
+            "users_list_logs"
+          )
+        }
+      )
     }
   );
 }

package/components/ObjectLogs/subcomponents/ObjectLogsByOthers/ObjectLogsByOthers.js

@@ -1,22 +1,16 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import { endOfDay, startOfDay } from "date-fns";
 import { D as DataGrid } from "../../../DataGrid/DataGrid.js";
-import { useEnvironment } from "@m4l/core";
-import { D as DynamicFilter } from "../../../DynamicFilter/DynamicFilter.js";
 import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.js";
-import { C as ContainerWrapperStyled, A as ActionsWrapperStyled, G as GridWrapperStyled } from "../../slots/ObjectLogsSlots.js";
-import { D as DICTIONARY } from "../../dictionary.js";
+import { C as ContainerWrapperStyled, G as GridWrapperStyled } from "../../slots/ObjectLogsSlots.js";
 import { useRows } from "@m4l/graphics";
 import { u as useObjectLogsColumns } from "../../hooks/useObjectLogsColumns.js";
 import { b as OBJECT_LOGS_OTHERS_END_POINT, O as OBJECT_LOGS_KEY_COMPONENT } from "../../constants.js";
 import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
-import { g as getRawFiltersForNetwork } from "../../../DynamicFilter/helpers/getRawFiltersForNetwork.js";
-import { g as getRawSortsForNetwork } from "../../../DynamicSort/helpers/getRawSortsForNetwork.js";
+import { u as useFilterAndSort } from "../../hooks/useFilterAndSort.js";
 import { O as ObjectLogsSlots } from "../../slots/ObjectLogsEnum.js";
 function ObjectLogsByOthers(props) {
   const { dataTestId = "", resourceSerialId, resourceTypeId } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
   const [backendQueryParams, setBackendQueryParams] = useState({});
   const columns = useObjectLogsColumns("other");
   const { rows, clearRows, refresh } = useRows({
@@ -30,106 +24,38 @@ function ObjectLogsByOthers(props) {
   useEffect(() => {
     clearRows();
   }, [resourceSerialId, resourceTypeId]);
-  const onChangeFilter = (_initFilters, rawFilters) => {
-    const fixedFields = [
-      {
-        n: "resourceTypeId",
-        o: "c",
-        o1: resourceTypeId,
-        ft: "string"
-      },
-      {
-        n: "resourceSerialId",
-        o: "c",
-        o1: resourceSerialId,
-        ft: "string"
-      }
-    ];
-    const sortFields = [
-      // {
-      //   n: 'created_at',
-      //   o: 'desc',
-      //   ft: 'string',
-      // } ,
-    ];
-    const allFields = [...fixedFields, ...rawFilters];
-    const parms = {
-      f: getRawFiltersForNetwork(allFields, "snakeCase"),
-      s: getRawSortsForNetwork(sortFields, "snakeCase")
-    };
-    setBackendQueryParams(parms);
-    refresh();
-  };
-  return /* @__PURE__ */ jsxs(
+  const { leftActions, visibleCustomHeader, customHeaderComponent } = useFilterAndSort({ setBackendQueryParams, Refresh: refresh, otherApp: true, resourceTypeId, resourceSerialId });
+  return /* @__PURE__ */ jsx(
     ContainerWrapperStyled,
     {
       ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: `m4ldatagrid-${dataTestId}` } : {},
       ...getPropDataTestId(OBJECT_LOGS_KEY_COMPONENT, ObjectLogsSlots.root, dataTestId),
-      children: [
-        /* @__PURE__ */ jsx(ActionsWrapperStyled, { children: /* @__PURE__ */ jsx(
-          DynamicFilter,
-          {
-            withAllField: true,
-            onChangeFilters: onChangeFilter,
-            automatic: false,
-            fields: [
-              {
-                name: "createdAt",
-                dictionaryId: DICTIONARY.LABEL_CREATED_AT,
-                type: "datetime",
-                multiple: false,
-                presence: "initialized",
-                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/email.svg`,
-                defaultOperand1: startOfDay(/* @__PURE__ */ new Date()),
-                defaultOperand2: endOfDay(/* @__PURE__ */ new Date())
-              },
-              {
-                name: "userId",
-                dictionaryId: DICTIONARY.LABEL_USER,
-                type: "string",
-                multiple: true,
-                presence: "optional",
-                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/email.svg`
-              },
-              {
-                name: "logPreview",
-                dictionaryId: DICTIONARY.LABEL_LOG_PREVIEW,
-                type: "string",
-                multiple: true,
-                presence: "optional",
-                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/log_preview.svg`
-              },
-              {
-                name: "logDetail",
-                dictionaryId: DICTIONARY.LABEL_LOG_DETAIL,
-                type: "string",
-                multiple: true,
-                presence: "optional",
-                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/log_detail.svg`
+      role: "grid",
+      "aria-label": "object-logs",
+      children: /* @__PURE__ */ jsx(
+        GridWrapperStyled,
+        {
+          children: /* @__PURE__ */ jsx(
+            DataGrid,
+            {
+              id: "users_logs_list",
+              dataTestId,
+              columns,
+              rows,
+              rowKeyGetter: (row) => row.id,
+              withActions: true,
+              visibleCustomHeader,
+              customHeader: customHeaderComponent,
+              actionsProps: {
+                leftActions,
+                withPager: false,
+                withLocalFilters: false
               }
-            ],
-            initialAppliedFilters: []
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          GridWrapperStyled,
-          {
-            children: /* @__PURE__ */ jsx(
-              DataGrid,
-              {
-                id: "users_logs_list",
-                dataTestId,
-                columns,
-                rows,
-                rowKeyGetter: (row) => row.id,
-                withActions: true,
-                actionsProps: {}
-              },
-              "users_list_logs"
-            )
-          }
-        )
-      ]
+            },
+            "users_list_logs"
+          )
+        }
+      )
     }
   );
 }

package/components/ObjectLogs/types.d.ts

@@ -1,5 +1,4 @@
 import { Maybe } from '@m4l/core';
-import { ThemeKeys, ThemeObject } from '@microlink/react-json-view';
 import { Theme } from '@mui/material';
 import { ObjectLogsSlots } from './slots/ObjectLogsEnum';
 import { OBJECT_LOGS_KEY_COMPONENT } from './constants';
@@ -35,7 +34,6 @@ export interface ObjectLogsQueryParams {
 export interface DetailDialogProps {
     type: 'm4l' | 'other';
     logId: number | string;
-    theme?: ThemeKeys | ThemeObject;
 }
 export type ObjectLogsSlotsType = keyof typeof ObjectLogsSlots;
 export type ObjectLogsOwnerState = {};

package/components/PropertyValue/PropertyValue.styles.js

@@ -44,7 +44,7 @@ const propertyValueStyles = {
       containerType: "inline-size",
       display: "flex",
       flexDirection: ownerState?.isForm ? "column" : "row",
-      justifyContent: ownerState?.isForm ? "space-between" : "left",
+      justifyContent: "flex-start",
       alignItems: "center",
       gap: theme.vars.size.baseSpacings["sp1"],
       width: ownerState?.semanticWidth ? "auto" : "200px",

package/components/SideBar/subcomponents/ContentComponent/style.js

@@ -142,6 +142,9 @@ const contentComponentStyles = {
     [`&.${CLASS_NAME_IS_ROOT}.${CLASS_NAME_MENU_ACTIVE}.${CLASS_NAME_ITEM_IN_TREE_ACTIVE} > .M4LSideBar-wrapperMenuItem`]: {
       backgroundColor: theme.vars.palette.primary.opacity
     },
+    [`&.${CLASS_NAME_IS_ROOT}.${CLASS_NAME_MENU_ACTIVE} > .M4LSideBar-wrapperMenuItem`]: {
+      backgroundColor: theme.vars.palette.primary.opacity
+    },
     [`&.${CLASS_NAME_IS_ROOT} > .M4LSideBar-wrapperMenuItem`]: {
       paddingRight: "7px",
       paddingTop: theme.vars.size.baseSpacings.sp1,

package/components/SideBar/subcomponents/TreeGroupItems/styles.js

@@ -116,7 +116,7 @@ const contentGroupStyles = {
         ...getSizeStyles(
           theme,
           ownerState?.size || "medium",
-          "case",
+          "base",
           (sizeValue) => ({
             width: `${sizeValue}!important`,
             height: `${sizeValue}!important`,

package/components/SideBar/subcomponents/TreeGroupItems/subcomponents/NodeMenuItem/index.js

@@ -46,7 +46,7 @@ function NodeMenuItem(props) {
             ),
             label: item.title,
             selected: item.active,
-            startIcon: /* @__PURE__ */ jsx(AdornmentIcon, { icon: `${urlIconPrefix}${item.iconUrl}`, variant: isRoot && item.itemInTreeActive ? "root" : item.active ? "itemActive" : "normal" }),
+            startIcon: /* @__PURE__ */ jsx(AdornmentIcon, { icon: `${urlIconPrefix}${item.iconUrl}`, variant: isRoot && item.itemInTreeActive || isRoot && item.active ? "root" : item.active ? "itemActive" : "normal" }),
             endIcon: hasChildren ? /* @__PURE__ */ jsx(ArrowIcon, { openState: isOpen, active: item.active }) : null,
             onClick: () => handlerClick(),
             size: currentSize

package/components/extended/React-Json-Viewer/ReactJsonViewer.d.ts

@@ -0,0 +1,7 @@
+import { ReactJsonViewerProps } from './types';
+/**
+ * Componente para visualizar datos en formato JSON.
+ * @param props - Props del componente.
+ * @returns Componente ReactJsonViewer.
+ */
+export declare const ReactJsonViewer: (props: ReactJsonViewerProps) => import("react/jsx-runtime").JSX.Element;

package/components/extended/React-Json-Viewer/ReactJsonViewer.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import ReactJson from "@microlink/react-json-view";
+import { R as ReactJsonViewerRootStyled } from "./slots/ReactJsonViewerSlots.js";
+import { R as REACT_JSON_VIEWER_CLASSES } from "./constants.js";
+import { useTheme } from "@mui/material";
+import { g as getReactJsonViewerTheme } from "./helpers/getReactJsonViewerTheme/getReactJsonViewerTheme.js";
+const ReactJsonViewer = (props) => {
+  const { className, dataTestId, ...others } = props;
+  const muiTheme = useTheme();
+  const theme = getReactJsonViewerTheme(muiTheme);
+  return /* @__PURE__ */ jsx(
+    ReactJsonViewerRootStyled,
+    {
+      className: clsx(REACT_JSON_VIEWER_CLASSES.root, className),
+      dataTestId,
+      role: "application",
+      "aria-label": "JSON data viewer",
+      children: /* @__PURE__ */ jsx(
+        ReactJson,
+        {
+          theme,
+          ...others
+        }
+      )
+    }
+  );
+};
+export {
+  ReactJsonViewer as R
+};

package/components/extended/React-Json-Viewer/ReactJsonViewer.styles.d.ts

@@ -0,0 +1,2 @@
+import { ReactJsonViewerStyles } from './types';
+export declare const reactJsonViewerStyles: ReactJsonViewerStyles;

package/components/extended/React-Json-Viewer/ReactJsonViewer.styles.js

@@ -0,0 +1,12 @@
+const reactJsonViewerStyles = {
+  /**
+   * Estilos del componente ReactJson.
+   */
+  root: () => ({
+    width: "100%",
+    height: "100%"
+  })
+};
+export {
+  reactJsonViewerStyles as r
+};

package/components/extended/React-Json-Viewer/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const REACT_JSON_VIEWER_KEY_COMPONENT = "M4LReactJsonViewer";
+export declare const REACT_JSON_VIEWER_CLASSES: Record<string, string>;

package/components/extended/React-Json-Viewer/constants.js

@@ -0,0 +1,8 @@
+import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
+import { R as ReactJsonViewerSlots } from "./slots/ReactJsonViewerEnum.js";
+const REACT_JSON_VIEWER_KEY_COMPONENT = "M4LReactJsonViewer";
+const REACT_JSON_VIEWER_CLASSES = getComponentClasses(REACT_JSON_VIEWER_KEY_COMPONENT, ReactJsonViewerSlots);
+export {
+  REACT_JSON_VIEWER_CLASSES as R,
+  REACT_JSON_VIEWER_KEY_COMPONENT as a
+};

package/components/extended/React-Json-Viewer/helpers/getReactJsonViewerTheme/getReactJsonViewerTheme.d.ts

@@ -0,0 +1,8 @@
+import { ThemeObject } from '@microlink/react-json-view';
+import { Theme } from '@mui/material';
+/**
+ * Función para obtener los colores del tema de MUI.
+ * @param muiTheme - Tema de MUI.
+ * @returns Colores del tema.
+ */
+export declare const getReactJsonViewerTheme: (muiTheme: Theme) => ThemeObject;

package/components/extended/React-Json-Viewer/helpers/getReactJsonViewerTheme/getReactJsonViewerTheme.js

@@ -0,0 +1,23 @@
+const getReactJsonViewerTheme = (muiTheme) => {
+  return {
+    base00: muiTheme?.vars?.palette?.background?.default,
+    base01: muiTheme?.vars?.palette?.background?.base,
+    base02: muiTheme?.vars?.palette?.background?.neutral,
+    base03: muiTheme?.vars?.palette?.text?.disabled,
+    base04: muiTheme?.vars?.palette?.text?.secondary,
+    base05: muiTheme?.vars?.palette?.text?.primary,
+    base06: muiTheme?.vars?.palette?.text?.primary,
+    base07: muiTheme?.vars?.palette?.text?.primary,
+    base08: muiTheme?.vars?.palette?.chips?.error?.outlined?.colorTone,
+    base09: muiTheme?.vars?.palette?.chips?.orange?.outlined?.color,
+    base0A: muiTheme?.vars?.palette?.chips?.warning?.outlined?.colorTone,
+    base0B: muiTheme?.vars?.palette?.chips?.forest?.outlined?.color,
+    base0C: muiTheme?.vars?.palette?.chips?.aqua?.outlined?.colorTone,
+    base0D: muiTheme?.vars?.palette?.chips?.info?.outlined?.colorTone,
+    base0E: muiTheme?.vars?.palette?.chips?.pink?.outlined?.colorTone,
+    base0F: muiTheme?.vars?.palette?.chips?.persianGreen?.outlined?.colorTone
+  };
+};
+export {
+  getReactJsonViewerTheme as g
+};

package/components/extended/React-Json-Viewer/helpers/getReactJsonViewerTheme/index.d.ts

@@ -0,0 +1 @@
+export { getReactJsonViewerTheme } from './getReactJsonViewerTheme';

package/components/extended/React-Json-Viewer/index.d.ts

@@ -0,0 +1 @@
+export { ReactJsonViewer } from './ReactJsonViewer';

package/components/extended/React-Json-Viewer/index.js

@@ -0,0 +1 @@
+

package/components/extended/React-Json-Viewer/slots/ReactJsonViewerEnum.d.ts

@@ -0,0 +1,3 @@
+export declare enum ReactJsonViewerSlots {
+    root = "root"
+}

package/components/extended/React-Json-Viewer/slots/ReactJsonViewerEnum.js

@@ -0,0 +1,7 @@
+var ReactJsonViewerSlots = /* @__PURE__ */ ((ReactJsonViewerSlots2) => {
+  ReactJsonViewerSlots2["root"] = "root";
+  return ReactJsonViewerSlots2;
+})(ReactJsonViewerSlots || {});
+export {
+  ReactJsonViewerSlots as R
+};

package/components/extended/React-Json-Viewer/slots/ReactJsonViewerSlots.d.ts

@@ -0,0 +1 @@
+export declare const ReactJsonViewerRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/extended/React-Json-Viewer/slots/ReactJsonViewerSlots.js

@@ -0,0 +1,11 @@
+import { styled } from "@mui/material/styles";
+import { a as REACT_JSON_VIEWER_KEY_COMPONENT } from "../constants.js";
+import { R as ReactJsonViewerSlots } from "./ReactJsonViewerEnum.js";
+import { r as reactJsonViewerStyles } from "../ReactJsonViewer.styles.js";
+const ReactJsonViewerRootStyled = styled("div", {
+  name: REACT_JSON_VIEWER_KEY_COMPONENT,
+  slot: ReactJsonViewerSlots.root
+})(reactJsonViewerStyles?.root);
+export {
+  ReactJsonViewerRootStyled as R
+};

package/components/extended/React-Json-Viewer/test/ReactJsonViewer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/extended/React-Json-Viewer/types.d.ts

@@ -0,0 +1,12 @@
+import { ReactJsonViewProps } from '@microlink/react-json-view';
+import { ReactJsonViewerSlots } from './slots/ReactJsonViewerEnum';
+import { M4LOverridesStyleRules } from '../../../@types/augmentations';
+import { REACT_JSON_VIEWER_KEY_COMPONENT } from './constants';
+import { Theme } from '@mui/material';
+export interface ReactJsonViewerProps extends Omit<ReactJsonViewProps, 'theme'> {
+    className?: string;
+    dataTestId?: string;
+}
+export type ReactJsonViewerOwnerState = {};
+export type ReactJsonViewerSlotsType = keyof typeof ReactJsonViewerSlots;
+export type ReactJsonViewerStyles = M4LOverridesStyleRules<ReactJsonViewerSlotsType, typeof REACT_JSON_VIEWER_KEY_COMPONENT, Theme>;

package/components/extended/index.d.ts

@@ -2,3 +2,4 @@ export * from './React-Resizable';
 export * from './React-resizable-panels';
 export * from './React-Spinners';
 export * from './React-Window';
+export * from './React-Json-Viewer';