@m4l/components 0.1.35 → 0.1.36

package/dist/components/Icon/index.1dbd3e58.js

@@ -0,0 +1,96 @@
+import { styled } from "@mui/material";
+import { useState, useMemo, useEffect } from "react";
+import { useTheme } from "@mui/material/styles";
+import { g as getPaletteColor } from "../../utils/index.9dce2e2f.js";
+import { jsx } from "react/jsx-runtime";
+const DivIcon = styled("div", {
+  shouldForwardProp: (props) => props !== "src" && props !== "size" && props !== "bgColor" && props !== "rotationAngle" && props !== "angleTransition"
+})(({
+  size,
+  src,
+  bgColor,
+  rotationAngle,
+  angleTransition
+}) => ({
+  maskPosition: "center!important",
+  maskRepeat: "no-repeat!important",
+  WebkitMaskRepeat: "no-repeat!important",
+  width: size,
+  height: size,
+  backgroundColor: bgColor,
+  mask: `url('data:image/svg+xml;base64,${src}')`,
+  WebkitMask: `url('data:image/svg+xml;base64,${src}')`,
+  ...rotationAngle && {
+    transform: `rotate(${rotationAngle}deg)`
+  },
+  ...angleTransition && rotationAngle && {
+    transition: `transform ${angleTransition}s ease-in-out`
+  }
+}));
+const WrapperPlaceHolder = styled("div")(() => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center"
+}));
+function Icon(props) {
+  const {
+    src,
+    size = "small",
+    bgColor = "action.active",
+    rotationAngle,
+    angleTransition
+  } = props;
+  const [resource, setResource] = useState(void 0);
+  const theme = useTheme();
+  const finalSize = useMemo(() => {
+    switch (size) {
+      case "extra-small":
+        return "12px";
+      case "small":
+        return "16px";
+      case "medium":
+        return "18px";
+      case "large":
+        return "22px";
+    }
+    return size;
+  }, [size]);
+  useEffect(() => {
+    let mounted = true;
+    (async function networkOperation() {
+      await fetch(src).then((response) => {
+        return response.text() || "";
+      }).then((xml) => {
+        xml = xml.match(
+          /(<svg\b[^>]*\s*(viewBox="(\b[^"]*)").*?>([\s\S]*?)<\/svg>|<svg>([\s\S]*?)<\/svg>)/g
+        )?.toString() || "";
+        if (mounted) {
+          setResource(window.btoa(xml));
+        }
+      }).catch((_err) => {
+      });
+    })();
+    return function clenUp() {
+      mounted = false;
+    };
+  }, [src]);
+  const placeHolder = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM2MzczODE7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSw4LjdjMS40LTEuNSwzLjQtMi4zLDUuNC0yLjNzMy45LDAuOCw1LjQsMi4zczIuNCwzLjUsMi41LDUuN2MwLDIuMi0wLjksNC4yLTIuNCw1LjdzLTMuNSwyLjMtNS41LDIuMgoJCWMtMi4xLDAuMS00LTAuNy01LjUtMi4yYy0xLjQtMS41LTIuMy0zLjUtMi40LTUuN0M0Mi42LDEyLjIsNDMuNSwxMC4yLDQ1LDguN3oiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC40LDYyLjFjLTAuMywwLjUtMC43LDAuOC0xLjIsMS4xcy0xLDAuNC0xLjYsMC40SDQuM2MtMC42LDAtMS4xLTAuMS0xLjYtMC40cy0wLjktMC42LTEuMi0xLjEKCQljLTAuMi0wLjUtMC40LTEtMC40LTEuNXMwLjEtMS4xLDAuNC0xLjVsMjMtMzYuNGMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNHMwLjksMC42LDEuMiwxLjEKCQlsMTEuNSwxOC4yYzAuMiwwLjMsMC41LDAuNSwwLjgsMC43czAuNiwwLjMsMSwwLjNjMC4zLDAsMC43LTAuMSwxLTAuM3MwLjYtMC40LDAuOC0wLjdsMy4xLTQuOWMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMQoJCXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNGMwLjUsMC4zLDAuOSwwLjYsMS4yLDEuMWwxNC42LDIzLjFjMC4zLDAuNSwwLjMsMSwwLjMsMS41UzY4LjcsNjEuNyw2OC40LDYyLjF6Ii8+CjwvZz4KPC9zdmc+Cg==";
+  return /* @__PURE__ */ jsx(WrapperPlaceHolder, {
+    className: "m4l_icon",
+    children: resource ? /* @__PURE__ */ jsx(DivIcon, {
+      src: resource,
+      size: finalSize,
+      bgColor: getPaletteColor(theme.palette, bgColor),
+      rotationAngle,
+      angleTransition
+    }) : /* @__PURE__ */ jsx("img", {
+      src: placeHolder,
+      alt: "icon_svg",
+      width: finalSize,
+      height: finalSize
+    })
+  });
+}
+export {
+  Icon as I
+};

package/dist/components/Loadable/index.8c6006be.js

@@ -0,0 +1,14 @@
+import { Suspense } from "react";
+import { P as PropagateLoader } from "../animate/PropagateLoader/index.eb401503.js";
+import { jsx } from "react/jsx-runtime";
+const Loadable = (Component) => function EmbededLoadable(props) {
+  return /* @__PURE__ */ jsx(Suspense, {
+    fallback: /* @__PURE__ */ jsx(PropagateLoader, {}),
+    children: /* @__PURE__ */ jsx(Component, {
+      ...props
+    })
+  });
+};
+export {
+  Loadable as L
+};

package/dist/components/ModalDialog/index.91777582.js

@@ -0,0 +1,123 @@
+import { Dialog, Paper } from "@mui/material";
+import { c as cjs } from "../../react-draggable.3b5b6680.js";
+import { u as useModal } from "../../hooks/useModal/index.32da4dcb.js";
+import { styled } from "@mui/material/styles";
+import { a as getThemeVariantColor } from "../../utils/index.9dce2e2f.js";
+import { R as ResizeableWindow } from "../Resizeable/index.44a0dd46.js";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.ba86f72f.js";
+const WrapperDialog = styled(Dialog)(() => ({}));
+const Container = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  overflow: "hidden",
+  padding: theme.spacing(3)
+}));
+styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  minHeight: theme.spacing(5),
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  overflow: "hidden"
+}));
+styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "row",
+  flexGrow: 1,
+  alignItems: "center",
+  cursor: "move",
+  ...theme.typography.subtitle1,
+  color: theme.palette.text.primary
+}));
+styled("div")(({ theme, variant }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  marginRight: theme.spacing(1.5),
+  "& > span": {
+    background: getThemeVariantColor(theme, variant)
+  }
+}));
+styled("div")(() => ({
+  flexGrow: 1,
+  position: "relative",
+  overflow: "auto"
+}));
+styled("div")(({ theme, variant }) => ({
+  ...theme.typography.subtitle1,
+  color: getThemeVariantColor(theme, variant),
+  width: "100%",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
+  overflow: "hidden"
+}));
+const DragabblePaperComponent = (props) => {
+  return /* @__PURE__ */ jsx(cjs.exports, {
+    handle: ".m4l_draggable_handle",
+    cancel: '[class*="MuiDialogContent-root"]',
+    children: /* @__PURE__ */ jsx(Paper, {
+      sx: {
+        maxHeight: "unset",
+        maxWidth: "unset"
+      },
+      ...props
+    })
+  });
+};
+function PaperComponent(props) {
+  return /* @__PURE__ */ jsx(Paper, {
+    sx: {
+      maxHeight: "unset",
+      maxWidth: "unset",
+      height: "100%"
+    },
+    ...props
+  });
+}
+const ModalDialog = () => {
+  const {
+    open,
+    initialWidth = 600,
+    initialHeigth = 400,
+    maxWidth,
+    maxHeigth,
+    window,
+    fullScreen
+  } = useModal();
+  const isDesktop = useResponsiveDesktop();
+  const contentComnponent = /* @__PURE__ */ jsx(Container, {
+    id: "Container",
+    children: typeof window === "function" ? window() : window
+  });
+  return /* @__PURE__ */ jsxs(WrapperDialog, {
+    open,
+    "aria-labelledby": "child-modal-title",
+    "aria-describedby": "child-modal-description",
+    PaperComponent: isDesktop ? DragabblePaperComponent : PaperComponent,
+    maxWidth: false,
+    fullWidth: !isDesktop,
+    fullScreen,
+    disableEnforceFocus: true,
+    children: [isDesktop && /* @__PURE__ */ jsx(ResizeableWindow, {
+      width: initialWidth,
+      height: initialHeigth,
+      maxWidth,
+      maxHeigth,
+      children: contentComnponent
+    }), !isDesktop && contentComnponent]
+  });
+};
+function getModalDialogComponentsDictionary() {
+  return ["modal_dialog"].concat(getCommonActionsDictionary());
+}
+const defaultModalDialogDictionary = {
+  modal_dialog: {}
+};
+export {
+  ModalDialog as M,
+  defaultModalDialogDictionary as d,
+  getModalDialogComponentsDictionary as g
+};

package/dist/components/ObjectLogs/index.9d3fc2ae.js

@@ -0,0 +1,303 @@
+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.156cc30c.js";
+import { D as DateFormatter } from "../formatters/DateFormatter/index.80522f69.js";
+import { Tooltip, IconButton } from "@mui/material";
+import { useHostTheme, useResponsiveDesktop } from "@m4l/graphics";
+import { R as ReactJson } from "../../react-json-view.03ae95f5.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { u as useModal } from "../../hooks/useModal/index.32da4dcb.js";
+import { I as Icon } from "../Icon/index.1dbd3e58.js";
+import "../../react-draggable.3b5b6680.js";
+import "../ModalDialog/index.91777582.js";
+import "../Resizeable/index.44a0dd46.js";
+import { WindowBase } from "../../index.js";
+import "../CommonActions/components/Actions/index.ba86f72f.js";
+import "@mui/material/Button";
+import "react-hook-form";
+import "@mui/lab";
+import { D as DynamicFilter, g as getDynamicFilterComponentsDictionary } from "../DynamicFilter/index.32f84995.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 {
+    hostThemeOptions
+  } = useHostTheme();
+  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;
+    };
+  }, []);
+  const modeTheme = hostThemeOptions.palette?.mode;
+  return /* @__PURE__ */ jsx(Container, {
+    id: "objectLogsDetail",
+    children: /* @__PURE__ */ jsx(ReactJson, {
+      theme: modeTheme === "dark" ? "summerfruit" : "rjv-default",
+      name: null,
+      sortKeys: true,
+      displayDataTypes: false,
+      quotesOnKeys: false,
+      src: detail
+    })
+  });
+}
+function DetailFormatter(props) {
+  const {
+    log_id
+  } = props;
+  const {
+    openModal
+  } = useModal();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const isDesktop = useResponsiveDesktop();
+  const onClickDetail = () => {
+    openModal({
+      window: /* @__PURE__ */ jsxs(WindowBase, {
+        title: getLabel("data_grid.settings_title"),
+        children: [/* @__PURE__ */ jsx(DetailDialog, {
+          log_id
+        }), ","]
+      }),
+      fullScreen: !isDesktop ? true : false
+    });
+  };
+  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",
+    width: 120
+  }, {
+    key: "log_preview",
+    name: getLabel("object_logs.log_preview"),
+    type: "string",
+    width: 250
+  }, {
+    key: "Detail",
+    name: getLabel("object_logs.log_detail"),
+    type: "custom",
+    formatter: DetailRowFormatter
+  }, {
+    key: "ip",
+    name: getLabel("object_logs.ip"),
+    type: "string",
+    width: 120
+  }], [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,
+        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/dist/components/PaperForm/index.218a6c4b.js

@@ -0,0 +1,112 @@
+import { styled } from "@mui/material/styles";
+import { useModuleSkeleton } from "@m4l/core";
+import { Skeleton } from "@mui/material";
+import { I as Icon } from "../Icon/index.1dbd3e58.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+const WrapperPaper = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  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
+  }
+}));
+const HeaderContainer = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  paddingBottom: theme.spacing(3),
+  marginBottom: theme.spacing(2),
+  overflow: "hidden"
+}));
+const IconTitleContainer = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  flexDirection: "row",
+  flexGrow: 1,
+  alignItems: "center",
+  cursor: "move",
+  ...theme.typography.subtitle1,
+  color: theme.palette.text.primary
+}));
+const IconHeader = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  marginRight: theme.spacing(1.5)
+}));
+const Content = styled("div")(() => ({
+  flexGrow: 1,
+  position: "relative"
+}));
+const SkTPaperFormHeader = styled("div")(({
+  theme
+}) => ({
+  width: "auto",
+  display: "grid",
+  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,
+    title
+  } = props;
+  const isSkeleton = useModuleSkeleton();
+  return isSkeleton ? /* @__PURE__ */ jsxs(SkTPaperFormHeader, {
+    children: [/* @__PURE__ */ jsx(Skeleton, {
+      variant: "circular",
+      width: 16,
+      height: 16
+    }), /* @__PURE__ */ jsx(Skeleton, {
+      variant: "text",
+      width: 68,
+      height: 14
+    })]
+  }) : /* @__PURE__ */ jsx(HeaderContainer, {
+    id: "Header",
+    children: /* @__PURE__ */ jsxs(IconTitleContainer, {
+      className: "m4l_draggable_handle",
+      children: [/* @__PURE__ */ jsx(IconHeader, {
+        children: /* @__PURE__ */ jsx(Icon, {
+          src: urlIcon
+        })
+      }), title]
+    })
+  });
+};
+function PaperForm(props) {
+  const {
+    urlIcon,
+    title,
+    children
+  } = props;
+  return /* @__PURE__ */ jsxs(WrapperPaper, {
+    id: "ContainerPropertyValue",
+    children: [/* @__PURE__ */ jsx(Header, {
+      urlIcon,
+      title
+    }), /* @__PURE__ */ jsx(Content, {
+      id: "Content",
+      children
+    })]
+  });
+}
+export {
+  PaperForm as P
+};