@m4l/components 0.1.27 → 0.1.28

package/components/NoItemSelected/{index.9609a7f7.js → index.46d2f632.js}

@@ -1,11 +1,11 @@
-import { useEnvironment as r, useModuleDictionary as l, useModuleSkeleton as p } from "@m4l/core";
-import { styled as c } from "@mui/material/styles";
-import { I as d } from "../Image/index.c9da2d5a.js";
-import { Skeleton as m } from "@mui/material";
-import { useMemo as g } from "react";
-import { jsx as t, jsxs as x } from "react/jsx-runtime";
-const s = c("div")(({
-  theme: e
+import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
+import { styled } from "@mui/material/styles";
+import { I as Image } from "../Image/index.93d5f37f.js";
+import { Skeleton } from "@mui/material";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const WrapperNoItemSelected = styled("div")(({
+  theme
 }) => ({
   width: "100%",
   maxWidth: "400px",
@@ -14,16 +14,19 @@ const s = c("div")(({
   flexDirection: "column",
   alignItems: "center",
   justifyContent: "center",
-  padding: e.spacing(3)
-})), w = c(d)(() => ({
+  padding: theme.spacing(3)
+}));
+const Img = styled(Image)(() => ({
   display: "flex"
-})), h = c("span")(({
-  theme: e
+}));
+const Label = styled("span")(({
+  theme
 }) => ({
-  ...e.typography.body2,
-  padding: `${e.spacing(1.5)} ${e.spacing(1)} ${e.spacing(1)} ${e.spacing(1)}`,
-  color: e.palette.text.primary
-})), u = c("div")(() => ({
+  ...theme.typography.body2,
+  padding: `${theme.spacing(1.5)} ${theme.spacing(1)} ${theme.spacing(1)} ${theme.spacing(1)}`,
+  color: theme.palette.text.primary
+}));
+const WrapperSKTNoItemSelected = styled("div")(() => ({
   display: "flex",
   width: "100%",
   minWidth: "100%",
@@ -31,44 +34,52 @@ const s = c("div")(({
   mask: `url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 70 70' style='enable-background:new 0 0 70 70%3B' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M45 8.7c1.4-1.5 3.4-2.3 5.4-2.3s3.9 0.8 5.4 2.3s2.4 3.5 2.5 5.7c0 2.2-0.9 4.2-2.4 5.7s-3.5 2.3-5.5 2.2c-2.1 0.1-4-0.7-5.5-2.2c-1.4-1.5-2.3-3.5-2.4-5.7C42.6 12.2 43.5 10.2 45 8.7z'/%3E%3Cpath d='M68.4 62.1c-0.3 0.5-0.7 0.8-1.2 1.1s-1 0.4-1.6 0.4H4.3c-0.6 0-1.1-0.1-1.6-0.4s-0.9-0.6-1.2-1.1c-0.2-0.5-0.4-1-0.4-1.5s0.1-1.1 0.4-1.5l23-36.4c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l11.5 18.2c0.2 0.3 0.5 0.5 0.8 0.7c0.3 0.2 0.6 0.3 1 0.3c0.3 0 0.7-0.1 1-0.3c0.3-0.2 0.6-0.4 0.8-0.7l3.1-4.9c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l14.6 23.1c0.3 0.5 0.3 1 0.3 1.5S68.7 61.7 68.4 62.1z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain`,
   WebkitMask: `url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 70 70' style='enable-background:new 0 0 70 70%3B' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M45 8.7c1.4-1.5 3.4-2.3 5.4-2.3s3.9 0.8 5.4 2.3s2.4 3.5 2.5 5.7c0 2.2-0.9 4.2-2.4 5.7s-3.5 2.3-5.5 2.2c-2.1 0.1-4-0.7-5.5-2.2c-1.4-1.5-2.3-3.5-2.4-5.7C42.6 12.2 43.5 10.2 45 8.7z'/%3E%3Cpath d='M68.4 62.1c-0.3 0.5-0.7 0.8-1.2 1.1s-1 0.4-1.6 0.4H4.3c-0.6 0-1.1-0.1-1.6-0.4s-0.9-0.6-1.2-1.1c-0.2-0.5-0.4-1-0.4-1.5s0.1-1.1 0.4-1.5l23-36.4c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l11.5 18.2c0.2 0.3 0.5 0.5 0.8 0.7c0.3 0.2 0.6 0.3 1 0.3c0.3 0 0.7-0.1 1-0.3c0.3-0.2 0.6-0.4 0.8-0.7l3.1-4.9c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l14.6 23.1c0.3 0.5 0.3 1 0.3 1.5S68.7 61.7 68.4 62.1z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain`
 }));
-function E() {
+function NoItemSelected() {
   const {
-    host_static_assets: e,
-    environment_assets: n
-  } = r(), {
-    getLabel: i
-  } = l(), o = p(), a = g(() => `${e}/${n}/frontend/components/no_item_selected/assets/icons/no_selected.svg`, []);
-  return o ? /* @__PURE__ */ t(s, {
-    id: "WrapperNoItemSelected",
-    children: /* @__PURE__ */ t(u, {
-      id: "WrapperSKTNoItemSelected",
-      children: /* @__PURE__ */ t(m, {
-        variant: "rectangular",
-        width: "100%",
-        height: "100%"
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
+  const src = useMemo(() => {
+    return `${host_static_assets}/${environment_assets}/frontend/components/no_item_selected/assets/icons/no_selected.svg`;
+  }, []);
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(WrapperNoItemSelected, {
+      id: "WrapperNoItemSelected",
+      children: /* @__PURE__ */ jsx(WrapperSKTNoItemSelected, {
+        id: "WrapperSKTNoItemSelected",
+        children: /* @__PURE__ */ jsx(Skeleton, {
+          variant: "rectangular",
+          width: "100%",
+          height: "100%"
+        })
       })
-    })
-  }) : /* @__PURE__ */ x(s, {
+    });
+  }
+  return /* @__PURE__ */ jsxs(WrapperNoItemSelected, {
     id: "WrapperNoItemSelected",
-    children: [/* @__PURE__ */ t(w, {
-      src: a,
+    children: [/* @__PURE__ */ jsx(Img, {
+      src,
       width: "100%",
       height: "100%"
-    }), /* @__PURE__ */ t(h, {
-      children: i("no_item_selected.message")
+    }), /* @__PURE__ */ jsx(Label, {
+      children: getLabel("no_item_selected.message")
     })]
   });
 }
-function k() {
+function getNoItemSelectedComponentsDictionary() {
   return ["no_item_selected"];
 }
-const I = {
+const defaultNoItemSelectedDictionary = {
   no_item_selected: {
     message: "Please select a item to show detail"
   }
 };
 export {
-  E as N,
-  I as d,
-  k as g
+  NoItemSelected as N,
+  defaultNoItemSelectedDictionary as d,
+  getNoItemSelectedComponentsDictionary as g
 };

package/components/ObjectLogs/index.f941fb79.js

@@ -0,0 +1,288 @@
+import { useState, useEffect, useCallback, useMemo } from "react";
+import { useNetwork, useModuleDictionary, useEnvironment, usePaginate } from "@m4l/core";
+import { styled } from "@mui/material/styles";
+import { D as DataGrid, g as getDataGridComponentsDictionary } from "../DataGrid/index.76d8fd25.js";
+import { D as DateFormatter } from "../formatters/DateFormatter/index.1b9baacc.js";
+import { Tooltip, IconButton } from "@mui/material";
+import { R as ReactJson } from "../../react-json-view.f56a7f8e.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { u as useModal } from "../../hooks/useModal/index.5fee01a3.js";
+import { I as Icon } from "../Icon/index.619c31c4.js";
+import { D as DynamicFilter, g as getDynamicFilterComponentsDictionary } from "../DynamicFilter/index.342ba5fe.js";
+const Container$1 = styled("div")(() => ({
+  height: "100%",
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "flex-start"
+}));
+const Actions = styled("div")(({
+  theme
+}) => ({
+  position: "relative",
+  height: "auto",
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "flex-start",
+  alignItems: "center",
+  "& .MuiFormControl-root": {
+    flexGrow: 1
+  },
+  [theme.breakpoints.up("sm")]: {
+    "& .MuiFormControl-root:nth-of-type(1)": {
+      marginRight: theme.spacing(3)
+    }
+  }
+}));
+const GridWrapper = styled("div")(() => ({
+  position: "relative",
+  flexGrow: "1",
+  width: "100%"
+}));
+const Container = styled("div")(({ theme }) => ({
+  color: theme.palette.text.primary,
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  width: "100%"
+}));
+styled("span")(({ theme }) => ({
+  color: theme.palette.text.primary,
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  width: "100%"
+}));
+function DetailDialog(props) {
+  const {
+    log_id
+  } = props;
+  const {
+    networkOperation
+  } = useNetwork();
+  const [detail, setDetail] = useState({});
+  useEffect(() => {
+    let mounted = true;
+    networkOperation({
+      method: "GET",
+      endPoint: `logs/${log_id}`
+    }).then((response) => {
+      if (mounted) {
+        const parseData = JSON.parse(String(response.data.log_detail));
+        setDetail(parseData);
+      }
+    });
+    return function cleanUp() {
+      mounted = false;
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(Container, {
+    id: "objectLogsDetail",
+    children: /* @__PURE__ */ jsx(ReactJson, {
+      name: null,
+      sortKeys: true,
+      displayDataTypes: false,
+      quotesOnKeys: false,
+      src: detail
+    })
+  });
+}
+function DetailFormatter(props) {
+  const {
+    log_id
+  } = props;
+  const {
+    openModal,
+    closeModal
+  } = useModal();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const onClickDetail = () => {
+    openModal({
+      onQueryClose: () => closeModal(),
+      title: getLabel("object_logs.modal_detail_title"),
+      iconComponent: /* @__PURE__ */ jsx(Icon, {
+        src: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/search.svg`
+      }),
+      contentComponent: /* @__PURE__ */ jsx(DetailDialog, {
+        log_id
+      })
+    });
+  };
+  return /* @__PURE__ */ jsx(Tooltip, {
+    title: getLabel("object_logs.view_log_detail"),
+    children: /* @__PURE__ */ jsx(IconButton, {
+      onClick: onClickDetail,
+      "aria-label": "filter",
+      children: /* @__PURE__ */ jsx(Icon, {
+        src: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/search.svg`
+      })
+    })
+  });
+}
+function ObjectLogs(props) {
+  const {
+    resource_id,
+    object_id
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const [queryParams, setQueryParams] = useState({
+    resource_id,
+    object_id
+  });
+  const dateFormatterCreatedAt = useCallback((rowProps) => /* @__PURE__ */ jsx(DateFormatter, {
+    presentationType: "datetime",
+    value: rowProps.row.created_at
+  }), []);
+  const DetailRowFormatter = useCallback((rowProps) => /* @__PURE__ */ jsx(DetailFormatter, {
+    log_id: rowProps.row.id
+  }), []);
+  const columns = useMemo(() => [{
+    key: "created_at",
+    name: getLabel("object_logs.created_at"),
+    type: "date",
+    width: 300,
+    formatter: dateFormatterCreatedAt
+  }, {
+    key: "email",
+    name: getLabel("object_logs.email"),
+    type: "string",
+    width: 300
+  }, {
+    key: "resource_name",
+    name: getLabel("object_logs.resource_name"),
+    type: "string"
+  }, {
+    key: "log_preview",
+    name: getLabel("object_logs.log_preview"),
+    type: "string"
+  }, {
+    key: "Detail",
+    name: getLabel("object_logs.log_detail"),
+    type: "custom",
+    formatter: DetailRowFormatter
+  }, {
+    key: "ip",
+    name: getLabel("object_logs.ip"),
+    type: "string"
+  }], [getLabel]);
+  const {
+    pagerState,
+    rows,
+    onPageChange,
+    onRowsPerPageChange,
+    clearRows,
+    Refresh
+  } = usePaginate({
+    endPoint: "logs",
+    fireOnChangeParms: false,
+    queryParams
+  });
+  useEffect(() => {
+    clearRows();
+    setQueryParams((oldParms) => ({
+      ...oldParms,
+      object_id
+    }));
+  }, [object_id]);
+  const onChangeFilter = (_initFilters, rawFilters) => {
+    setQueryParams((oldParms) => ({
+      ...oldParms,
+      f: rawFilters
+    }));
+    Refresh();
+  };
+  return /* @__PURE__ */ jsxs(Container$1, {
+    children: [/* @__PURE__ */ jsx(Actions, {
+      id: "objectLogsActions",
+      children: /* @__PURE__ */ jsx(DynamicFilter, {
+        withAllField: true,
+        onChangeFilter,
+        automatic: false,
+        fields: [{
+          name: "user_logs.created_at",
+          label: getLabel("object_logs.created_at"),
+          type: "datetime",
+          multiple: false,
+          presence: "fixed",
+          urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/email.svg`
+        }, {
+          name: "users.email",
+          label: getLabel("object_logs.email"),
+          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",
+          label: getLabel("object_logs.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",
+          label: getLabel("object_logs.log_detail"),
+          type: "string",
+          multiple: true,
+          presence: "optional",
+          urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/log_detail.svg`
+        }],
+        initialFilters: []
+      })
+    }), /* @__PURE__ */ jsx(GridWrapper, {
+      id: "GridWrapper",
+      children: /* @__PURE__ */ jsx(DataGrid, {
+        id: "users_logs_list",
+        columns,
+        rows,
+        rowKeyGetter: (row) => row.id,
+        isMultipleSelect: false,
+        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
+          }
+        }
+      }, "users_list_logs")
+    })]
+  });
+}
+function getObjectLogsComponentsDictionary() {
+  return ["object_logs"].concat(getDataGridComponentsDictionary()).concat(getDynamicFilterComponentsDictionary());
+}
+const defaultObjectLogDictionary = {
+  object_logs: {
+    created_at: "Start date",
+    user: "User/email",
+    resource_name: "Resource",
+    privilege_name: "Privilege",
+    log_preview: "Log",
+    log_detail: "Detail",
+    ip: "Ip"
+  }
+};
+export {
+  ObjectLogs as O,
+  defaultObjectLogDictionary as d,
+  getObjectLogsComponentsDictionary as g
+};

package/components/Page/index.4237c241.js

@@ -1,25 +1,27 @@
-import { Helmet as c } from "react-helmet-async";
-import { useLocales as a } from "@m4l/graphics";
-import { useModuleSkeleton as d } from "@m4l/core";
-import { jsxs as t, Fragment as g, jsx as l } from "react/jsx-runtime";
-const p = (o) => {
+import { Helmet } from "react-helmet-async";
+import { useLocales } from "@m4l/graphics";
+import { useModuleSkeleton } from "@m4l/core";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+const HelmetPage = (props) => {
   const {
-    children: r,
-    title: n,
-    meta: i,
-    subtitle: e
-  } = o, m = a().currentLocale?.localeString, s = d();
-  return /* @__PURE__ */ t(g, {
-    children: [!s && /* @__PURE__ */ t(c, {
-      children: [/* @__PURE__ */ l("title", {
-        children: `${n}${e ? ` | ${e}` : ""} `
-      }), /* @__PURE__ */ l("html", {
-        lang: m
-      }), i]
-    }), r]
+    children,
+    title,
+    meta,
+    subtitle
+  } = props;
+  const localeString = useLocales().currentLocale?.localeString;
+  const isSkeleton = useModuleSkeleton();
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [!isSkeleton && /* @__PURE__ */ jsxs(Helmet, {
+      children: [/* @__PURE__ */ jsx("title", {
+        children: `${title}${subtitle ? ` | ${subtitle}` : ""} `
+      }), /* @__PURE__ */ jsx("html", {
+        lang: localeString
+      }), meta]
+    }), children]
   });
 };
-p.displayName = "Page";
+HelmetPage.displayName = "Page";
 export {
-  p as H
+  HelmetPage as H
 };

package/components/PaperForm/index.ec9cb8c9.js

@@ -1,105 +1,112 @@
-import { styled as r } from "@mui/material/styles";
-import { useModuleSkeleton as s } from "@m4l/core";
-import { Skeleton as d } from "@mui/material";
-import { I as l } from "../Icon/index.619c31c4.js";
-import { jsxs as a, jsx as o } from "react/jsx-runtime";
-const c = r("div")(({
-  theme: i
+import { styled } from "@mui/material/styles";
+import { useModuleSkeleton } from "@m4l/core";
+import { Skeleton } from "@mui/material";
+import { I as Icon } from "../Icon/index.619c31c4.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+const WrapperPaper = styled("div")(({
+  theme
 }) => ({
   display: "flex",
   flexDirection: "column",
-  padding: i.spacing(1),
-  [i.breakpoints.up("sm")]: {
-    margin: `${i.spacing(1.5)}  ${i.spacing(1.5)}  ${i.spacing(3)}  ${i.spacing(1.5)}`,
-    borderRadius: i.spacing(2),
-    boxShadow: i.customShadows.z8,
-    padding: i.spacing(3),
-    backgroundColor: i.palette.background.paper
+  padding: theme.spacing(1),
+  [theme.breakpoints.up("sm")]: {
+    margin: `${theme.spacing(1.5)}  ${theme.spacing(1.5)}  ${theme.spacing(3)}  ${theme.spacing(1.5)}`,
+    borderRadius: theme.spacing(2),
+    boxShadow: theme.customShadows.z8,
+    padding: theme.spacing(3),
+    backgroundColor: theme.palette.background.paper
   }
-})), p = r("div")(({
-  theme: i
+}));
+const HeaderContainer = styled("div")(({
+  theme
 }) => ({
   display: "flex",
   flexDirection: "row",
   alignItems: "center",
-  borderBottom: `1px solid ${i.palette.divider}`,
-  paddingBottom: i.spacing(3),
-  marginBottom: i.spacing(2),
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  paddingBottom: theme.spacing(3),
+  marginBottom: theme.spacing(2),
   overflow: "hidden"
-})), g = r("div")(({
-  theme: i
+}));
+const IconTitleContainer = styled("div")(({
+  theme
 }) => ({
   display: "flex",
   flexDirection: "row",
   flexGrow: 1,
   alignItems: "center",
   cursor: "move",
-  ...i.typography.subtitle1,
-  color: i.palette.text.primary
-})), u = r("div")(({
-  theme: i
+  ...theme.typography.subtitle1,
+  color: theme.palette.text.primary
+}));
+const IconHeader = styled("div")(({
+  theme
 }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  marginRight: i.spacing(1.5)
-})), f = r("div")(() => ({
+  marginRight: theme.spacing(1.5)
+}));
+const Content = styled("div")(() => ({
   flexGrow: 1,
   position: "relative"
-})), m = r("div")(({
-  theme: i
+}));
+const SkTPaperFormHeader = styled("div")(({
+  theme
 }) => ({
   width: "auto",
   display: "grid",
-  gridTemplateColumns: `${i.spacing(2)} auto`,
-  gridGap: `${i.spacing(1.5)}`,
-  paddingBottom: `${i.spacing(3)}`,
-  borderBottom: `1px solid ${i.palette.divider}`,
-  marginBottom: `${i.spacing(3)}`
-})), x = (i) => {
+  gridTemplateColumns: `${theme.spacing(2)} auto`,
+  gridGap: `${theme.spacing(1.5)}`,
+  paddingBottom: `${theme.spacing(3)}`,
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  marginBottom: `${theme.spacing(3)}`
+}));
+const Header = (props) => {
   const {
-    urlIcon: n,
-    title: t
-  } = i;
-  return s() ? /* @__PURE__ */ a(m, {
-    children: [/* @__PURE__ */ o(d, {
+    urlIcon,
+    title
+  } = props;
+  const isSkeleton = useModuleSkeleton();
+  return isSkeleton ? /* @__PURE__ */ jsxs(SkTPaperFormHeader, {
+    children: [/* @__PURE__ */ jsx(Skeleton, {
       variant: "circular",
       width: 16,
       height: 16
-    }), /* @__PURE__ */ o(d, {
+    }), /* @__PURE__ */ jsx(Skeleton, {
       variant: "text",
       width: 68,
       height: 14
     })]
-  }) : /* @__PURE__ */ o(p, {
+  }) : /* @__PURE__ */ jsx(HeaderContainer, {
     id: "Header",
-    children: /* @__PURE__ */ a(g, {
+    children: /* @__PURE__ */ jsxs(IconTitleContainer, {
       className: "draggable-dialog-title",
-      children: [/* @__PURE__ */ o(u, {
-        children: /* @__PURE__ */ o(l, {
-          src: n
+      children: [/* @__PURE__ */ jsx(IconHeader, {
+        children: /* @__PURE__ */ jsx(Icon, {
+          src: urlIcon
         })
-      }), t]
+      }), title]
     })
   });
 };
-function I(i) {
+function PaperForm(props) {
   const {
-    urlIcon: n,
-    title: t,
-    children: e
-  } = i;
-  return /* @__PURE__ */ a(c, {
+    urlIcon,
+    title,
+    children
+  } = props;
+  return /* @__PURE__ */ jsxs(WrapperPaper, {
     id: "ContainerPropertyValue",
-    children: [/* @__PURE__ */ o(x, {
-      urlIcon: n,
-      title: t
-    }), /* @__PURE__ */ o(f, {
+    children: [/* @__PURE__ */ jsx(Header, {
+      urlIcon,
+      title
+    }), /* @__PURE__ */ jsx(Content, {
       id: "Content",
-      children: e
+      children
     })]
   });
 }
 export {
-  I as P
+  PaperForm as P
 };