@sis-cc/dotstatsuite-visions 12.55.0 → 13.0.0

package/dist/CollapsibleTree/CollapsibleTree.js

@@ -0,0 +1,199 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useEffect, useState, Fragment } from 'react';
+import * as R from 'ramda';
+import { pathOr } from 'ramda';
+import Container from '@mui/material/Container';
+import makeStyles from '@mui/styles/makeStyles';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import { KeyboardArrowUp, KeyboardArrowDown, Info } from '@mui/icons-material';
+import CircularProgress from '@mui/material/CircularProgress';
+import Grid from '@mui/material/Grid';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { useTheme } from '@mui/material/styles';
+import Collapse from '@mui/material/Collapse';
+import { NoData } from '../NoData/NoData.js';
+
+const VARIANT_ICON = "icon";
+const VARIANT_BOLD = "bold";
+const useStyles$1 = makeStyles((theme) => ({
+  buttonExpand: {
+    display: "flex",
+    justifyContent: "space-between"
+  },
+  [`button${VARIANT_ICON}`]: {
+    color: theme.palette.primary.main,
+    backgroundColor: "rgba(24, 32, 38, 0.04)",
+    margin: theme.spacing(1, 0)
+  },
+  [`button${VARIANT_BOLD}`]: {
+    marginBottom: theme.spacing(1),
+    padding: theme.spacing(0.5, 0, 1, 0),
+    "&:hover": {
+      backgroundColor: "unset"
+    },
+    ...pathOr({}, ["mixins", "collapsibleTree", "buttonSublevel"], theme)
+  },
+  [`collapsibleContainer${VARIANT_BOLD}`]: {
+    borderTop: "2px solid black",
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2)
+  }
+}));
+const CollapseComponent = ({ label, isOpen, children, variant = VARIANT_ICON, level }) => {
+  const classes = useStyles$1();
+  const theme = useTheme();
+  const [open, setOpen] = React.useState(isOpen);
+  useEffect(() => setOpen(isOpen), [isOpen]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(classes[`collapsibleContainer${variant}`]),
+      style: {
+        marginRight: theme.spacing(level * 2),
+        marginLeft: theme.spacing(level * 2)
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            className: cx(classes.buttonExpand, classes[`button${variant}`]),
+            onClick: () => setOpen(!open),
+            fullWidth: true,
+            children: [
+              label,
+              open ? /* @__PURE__ */ jsx(KeyboardArrowUp, { color: "primary" }) : /* @__PURE__ */ jsx(KeyboardArrowDown, { color: "primary" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Collapse, { in: open, timeout: "auto", children })
+      ]
+    }
+  );
+};
+CollapseComponent.propTypes = {
+  label: PropTypes.string,
+  isOpen: PropTypes.bool,
+  children: PropTypes.node,
+  variant: PropTypes.oneOf([VARIANT_ICON, VARIANT_BOLD]),
+  level: PropTypes.number
+};
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    display: "flex",
+    justifyContent: "space-between"
+  },
+  title: {
+    fontWeight: "bold",
+    ...R.pathOr({}, ["mixins", "collapsibleTree", "title"], theme)
+  },
+  divider: {
+    marginBottom: theme.spacing(2)
+  },
+  spacingValue: {
+    marginLeft: theme.spacing(2),
+    marginRight: theme.spacing(2),
+    marginBottom: theme.spacing(2)
+  },
+  overflow: {
+    whiteSpace: "pre-wrap",
+    overflowWrap: "break-word"
+  }
+}));
+const CollapsibleTree = ({
+  data = [],
+  defaultDepthLevel = 1,
+  isLoading,
+  children,
+  labels,
+  testId = "collapsible-tree",
+  valueHandler,
+  icon,
+  onClick
+}) => {
+  const classes = useStyles();
+  const [depthLevel, setDepthLevel] = useState(defaultDepthLevel);
+  useEffect(() => setDepthLevel(defaultDepthLevel), [defaultDepthLevel]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Grid, { container: true, item: true, justifyContent: "center", children: /* @__PURE__ */ jsx(CircularProgress, {}) });
+  }
+  const handleCollapse = (isAllOpen2) => {
+    if (isAllOpen2) return setDepthLevel(void 0);
+    return setDepthLevel(defaultDepthLevel);
+  };
+  const getValue = ({ value, children: children2 = [], ...handlerProps }) => {
+    if ((R.isNil(value) || R.isEmpty(value)) && R.isEmpty(children2)) {
+      return R.prop("noValue", labels);
+    }
+    if (R.is(Function, valueHandler)) {
+      return valueHandler({ value, ...handlerProps });
+    }
+    return value;
+  };
+  const isAllOpen = depthLevel >= defaultDepthLevel;
+  const buttonAllOpenLabel = isAllOpen ? R.prop("collapseAll", labels) : R.prop("expandAll", labels);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Container, { disableGutters: true, "data-testid": testId, className: classes.container, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-label": buttonAllOpenLabel,
+          color: "primary",
+          endIcon: isAllOpen ? /* @__PURE__ */ jsx(KeyboardArrowUp, { color: "primary" }) : /* @__PURE__ */ jsx(KeyboardArrowDown, { color: "primary" }),
+          onClick: () => handleCollapse(isAllOpen),
+          tabIndex: 0,
+          children: buttonAllOpenLabel
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { children: [
+        children,
+        /* @__PURE__ */ jsx(IconButton, { color: "primary", onClick, size: "large", children: icon })
+      ] })
+    ] }),
+    R.isEmpty(data) && /* @__PURE__ */ jsx(
+      NoData,
+      {
+        message: R.prop("noData", labels) || "no data",
+        icon: /* @__PURE__ */ jsx(Info, { color: "primary", fontSize: "large" })
+      }
+    ),
+    R.map(({ id, label, children: children2 = [] }) => {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Divider, { className: classes.divider }),
+        /* @__PURE__ */ jsx(Typography, { variant: "h5", className: classes.title, children: label }),
+        R.map(({ id: id2, label: label2, children: children3, value, handlerProps = {} }) => {
+          return /* @__PURE__ */ jsxs(CollapseComponent, { level: 0, label: label2, isOpen: depthLevel >= 0, children: [
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                className: cx(classes.spacingValue, classes.overflow),
+                variant: "body2",
+                children: getValue({ value, children: children3, ...handlerProps })
+              }
+            ),
+            children3 && R.map(({ id: id3, label: label3, value: value2, handlerProps: handlerProps2 = {} }) => {
+              return /* @__PURE__ */ jsx(
+                CollapseComponent,
+                {
+                  level: 1,
+                  variant: VARIANT_BOLD,
+                  label: label3,
+                  isOpen: depthLevel >= 1,
+                  children: /* @__PURE__ */ jsx(Typography, { variant: "body2", className: classes.overflow, children: getValue({ value: value2, ...handlerProps2 }) })
+                },
+                id3
+              );
+            }, children3)
+          ] }, id2);
+        }, children2)
+      ] }, id);
+    }, data)
+  ] });
+};
+
+export { CollapsibleTree };
+//# sourceMappingURL=CollapsibleTree.js.map

package/dist/CollapsibleTree/CollapsibleTree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleTree.js","sources":["../../src/CollapsibleTree/Collapse.jsx","../../src/CollapsibleTree/CollapsibleTree.jsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport cx from 'classnames';\nimport { pathOr } from 'ramda';\nimport { useTheme } from '@mui/material/styles';\nimport makeStyles from '@mui/styles/makeStyles';\nimport Collapse from '@mui/material/Collapse';\nimport Button from '@mui/material/Button';\nimport { KeyboardArrowDown, KeyboardArrowUp } from '@mui/icons-material';\n\nconst VARIANT_ICON = 'icon';\nexport const VARIANT_BOLD = 'bold';\n\nconst useStyles = makeStyles(theme => ({\n  buttonExpand: {\n    display: 'flex',\n    justifyContent: 'space-between',\n  },\n  [`button${VARIANT_ICON}`]: {\n    color: theme.palette.primary.main,\n    backgroundColor: 'rgba(24, 32, 38, 0.04)',\n    margin: theme.spacing(1, 0),\n  },\n  [`button${VARIANT_BOLD}`]: {\n    marginBottom: theme.spacing(1),\n    padding: theme.spacing(0.5, 0, 1, 0),\n    '&:hover': {\n      backgroundColor: 'unset',\n    },\n    ...pathOr({}, ['mixins', 'collapsibleTree', 'buttonSublevel'], theme),\n  },\n  [`collapsibleContainer${VARIANT_BOLD}`]: {\n    borderTop: '2px solid black',\n    marginTop: theme.spacing(2),\n    marginBottom: theme.spacing(2),\n  },\n}));\n\nconst CollapseComponent = ({ label, isOpen, children, variant = VARIANT_ICON, level }) => {\n  const classes = useStyles();\n  const theme = useTheme();\n  const [open, setOpen] = React.useState(isOpen);\n\n  useEffect(() => setOpen(isOpen), [isOpen]);\n\n  return (\n    <div\n      className={cx(classes[`collapsibleContainer${variant}`])}\n      style={{\n        marginRight: theme.spacing(level * 2),\n        marginLeft: theme.spacing(level * 2),\n      }}\n    >\n      <Button\n        className={cx(classes.buttonExpand, classes[`button${variant}`])}\n        onClick={() => setOpen(!open)}\n        fullWidth\n      >\n        {label}\n        {open ? <KeyboardArrowUp color=\"primary\" /> : <KeyboardArrowDown color=\"primary\" />}\n      </Button>\n      <Collapse in={open} timeout=\"auto\">\n        {children}\n      </Collapse>\n    </div>\n  );\n};\n\nCollapseComponent.propTypes = {\n  label: PropTypes.string,\n  isOpen: PropTypes.bool,\n  children: PropTypes.node,\n  variant: PropTypes.oneOf([VARIANT_ICON, VARIANT_BOLD]),\n  level: PropTypes.number,\n};\n\nexport default CollapseComponent;\n","import React, { useState, Fragment, useEffect } from 'react';\nimport * as R from 'ramda';\nimport Container from '@mui/material/Container';\nimport makeStyles from '@mui/styles/makeStyles';\nimport Typography from '@mui/material/Typography';\nimport Divider from '@mui/material/Divider';\nimport Button from '@mui/material/Button';\nimport IconButton from '@mui/material/IconButton';\nimport { Info, KeyboardArrowDown, KeyboardArrowUp } from '@mui/icons-material';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport Grid from '@mui/material/Grid';\nimport Collapse, { VARIANT_BOLD } from './Collapse';\nimport cx from 'classnames';\nimport { NoData } from '../NoData/NoData';\n\nconst useStyles = makeStyles(theme => ({\n  container: {\n    display: 'flex',\n    justifyContent: 'space-between',\n  },\n  title: {\n    fontWeight: 'bold',\n    ...R.pathOr({}, ['mixins', 'collapsibleTree', 'title'], theme),\n  },\n  divider: {\n    marginBottom: theme.spacing(2),\n  },\n  spacingValue: {\n    marginLeft: theme.spacing(2),\n    marginRight: theme.spacing(2),\n    marginBottom: theme.spacing(2),\n  },\n  overflow: {\n    whiteSpace: 'pre-wrap',\n    overflowWrap: 'break-word',\n  },\n}));\n\nexport const CollapsibleTree = ({\n  data = [],\n  defaultDepthLevel = 1,\n  isLoading,\n  children,\n  labels,\n  testId = 'collapsible-tree',\n  valueHandler,\n  icon,\n  onClick,\n}) => {\n  const classes = useStyles();\n  const [depthLevel, setDepthLevel] = useState(defaultDepthLevel);\n\n  useEffect(() => setDepthLevel(defaultDepthLevel), [defaultDepthLevel]);\n\n  if (isLoading) {\n    return (\n      <Grid container item justifyContent=\"center\">\n        <CircularProgress />\n      </Grid>\n    );\n  }\n\n  const handleCollapse = isAllOpen => {\n    if (isAllOpen) return setDepthLevel(undefined);\n    return setDepthLevel(defaultDepthLevel);\n  };\n\n  const getValue = ({ value, children = [], ...handlerProps }) => {\n    if ((R.isNil(value) || R.isEmpty(value)) && R.isEmpty(children)) {\n      return R.prop('noValue', labels);\n    }\n    if (R.is(Function, valueHandler)) {\n      return valueHandler({ value, ...handlerProps });\n    }\n    return value;\n  };\n\n  const isAllOpen = depthLevel >= defaultDepthLevel;\n  const buttonAllOpenLabel = isAllOpen\n    ? R.prop('collapseAll', labels)\n    : R.prop('expandAll', labels);\n\n  return (\n    <Fragment>\n      <Container disableGutters data-testid={testId} className={classes.container}>\n        <Button\n          aria-label={buttonAllOpenLabel}\n          color=\"primary\"\n          endIcon={\n            isAllOpen ? (\n              <KeyboardArrowUp color=\"primary\" />\n            ) : (\n              <KeyboardArrowDown color=\"primary\" />\n            )\n          }\n          onClick={() => handleCollapse(isAllOpen)}\n          tabIndex={0}\n        >\n          {buttonAllOpenLabel}\n        </Button>\n        <div>\n          {children}\n          <IconButton color=\"primary\" onClick={onClick} size=\"large\">\n            {icon}\n          </IconButton>\n        </div>\n      </Container>\n      {R.isEmpty(data) && (\n        <NoData\n          message={R.prop('noData', labels) || 'no data'}\n          icon={<Info color=\"primary\" fontSize=\"large\" />}\n        />\n      )}\n      {R.map(({ id, label, children = [] }) => {\n        return (\n          <Fragment key={id}>\n            <Divider className={classes.divider} />\n            <Typography variant=\"h5\" className={classes.title}>\n              {label}\n            </Typography>\n            {R.map(({ id, label, children, value, handlerProps = {} }) => {\n              return (\n                <Collapse key={id} level={0} label={label} isOpen={depthLevel >= 0}>\n                  <Typography\n                    className={cx(classes.spacingValue, classes.overflow)}\n                    variant=\"body2\"\n                  >\n                    {getValue({ value, children, ...handlerProps })}\n                  </Typography>\n                  {children &&\n                    R.map(({ id, label, value, handlerProps = {} }) => {\n                      return (\n                        <Collapse\n                          key={id}\n                          level={1}\n                          variant={VARIANT_BOLD}\n                          label={label}\n                          isOpen={depthLevel >= 1}\n                        >\n                          <Typography variant=\"body2\" className={classes.overflow}>\n                            {getValue({ value, ...handlerProps })}\n                          </Typography>\n                        </Collapse>\n                      );\n                    }, children)}\n                </Collapse>\n              );\n            }, children)}\n          </Fragment>\n        );\n      }, data)}\n    </Fragment>\n  );\n};\n"],"names":["useStyles","isAllOpen","children","id","label","Collapse","value","handlerProps"],"mappings":"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"}

package/dist/Contact/Contact.js

@@ -0,0 +1,439 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import * as R from 'ramda';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
+import TextareaAutosize from '@mui/material/TextareaAutosize';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Typography from '@mui/material/Typography';
+import makeStyles from '@mui/styles/makeStyles';
+import { validate } from 'isemail';
+import Card from '@mui/material/Card';
+import { useTheme } from '@mui/material/styles';
+import CardContent from '@mui/material/CardContent';
+import RadioGroup from '@mui/material/RadioGroup';
+import Radio from '@mui/material/Radio';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import { Warning as Warning$1 } from '../Icons/Warning.js';
+import TextField from '@mui/material/TextField';
+import InputAdornment from '@mui/material/InputAdornment';
+import IconButton from '@mui/material/IconButton';
+import { Done } from '@mui/icons-material';
+import { w as withInput } from '../chunks/with-input-DRWNlMdA.js';
+import { Button } from '../Button/Button.js';
+
+const useStyles$2 = makeStyles((theme) => ({
+  container: {
+    backgroundColor: theme.palette.secondary.dark,
+    boxShadow: "none",
+    padding: theme.spacing(2),
+    width: "100%",
+    height: "100%"
+  },
+  title: {
+    padding: 0,
+    ...R.pathOr({}, ["mixins", "share", "title"], theme)
+  },
+  content: {
+    padding: theme.spacing(1, 0),
+    "&:last-child": {
+      padding: theme.spacing(1, 0)
+    }
+  },
+  label: theme.typography.body2,
+  warning: {
+    marginLeft: theme.spacing(0.5),
+    width: "unset",
+    fontSize: "inherit",
+    height: "1.3em",
+    ...R.pathOr({}, ["mixins", "share", "warning"], theme)
+  }
+}));
+const Warning = ({ title }) => {
+  const classes = useStyles$2();
+  const theme = useTheme();
+  const warningColor = R.path(["palette", "highlight", "hl1"], theme) || theme.palette.primary.dark;
+  const warningTextColor = theme.palette.getContrastText(warningColor);
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      className: classes.warning,
+      title,
+      tabIndex: 0,
+      variant: "warning",
+      "aria-hidden": false,
+      placement: "bottom",
+      PopperProps: {
+        modifiers: {
+          flip: {
+            behavior: ["bottom", "top", "left", "right"]
+          }
+        }
+      },
+      children: /* @__PURE__ */ jsx(Warning$1, { pathBackgroundColor: warningColor, pathColor: warningTextColor })
+    }
+  );
+};
+Warning.propTypes = {
+  title: PropTypes.string
+};
+const Mode = ({ changeMode, mode, modes = [], title }) => {
+  const classes = useStyles$2();
+  return /* @__PURE__ */ jsx(Card, { className: classes.container, children: /* @__PURE__ */ jsxs(CardContent, { className: classes.content, children: [
+    /* @__PURE__ */ jsx(Typography, { className: classes.title, "aria-label": title, tabIndex: 0, children: title }),
+    /* @__PURE__ */ jsx(RadioGroup, { onChange: (e) => changeMode(e.target.value), value: mode, children: R.map(({ label, value, warningMessage }) => /* @__PURE__ */ jsx(
+      FormControlLabel,
+      {
+        classes: { label: classes.label },
+        control: /* @__PURE__ */ jsx(Radio, { variant: "outlined", color: "primary" }),
+        label: /* @__PURE__ */ jsxs("span", { children: [
+          label,
+          warningMessage && /* @__PURE__ */ jsx(Warning, { title: warningMessage })
+        ] }),
+        "aria-label": label,
+        value
+      },
+      value
+    ))(modes) })
+  ] }) });
+};
+Mode.propTypes = {
+  changeMode: PropTypes.func,
+  mode: PropTypes.string,
+  modes: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+      value: PropTypes.string,
+      warningMessage: PropTypes.string
+    })
+  ),
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
+};
+
+const useStyles$1 = makeStyles(() => ({
+  visibility: {
+    visibility: "hidden"
+  }
+}));
+const LefttIcon = ({ Icon }) => /* @__PURE__ */ jsx(Icon, {});
+LefttIcon.propTypes = {
+  Icon: PropTypes.object
+};
+const RightIcon = ({ onSubmit, Icon = Done }) => /* @__PURE__ */ jsx(IconButton, { color: "primary", onClick: () => onSubmit(), size: "small", children: /* @__PURE__ */ jsx(Icon, {}) });
+RightIcon.propTypes = {
+  Icon: PropTypes.object,
+  onSubmit: PropTypes.func,
+  classes: PropTypes.object
+};
+const MyInput = ({
+  id,
+  label,
+  name,
+  placeholder,
+  leftIcon,
+  rightIcon,
+  value,
+  type,
+  onChange,
+  onSubmit,
+  fullWidth,
+  withValidationIcon,
+  textFieldProps,
+  inputProps,
+  endAdornment
+}) => {
+  const classes = useStyles$1();
+  const startAdornment = R.isNil(leftIcon) ? null : /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(LefttIcon, { Icon: leftIcon }) });
+  const endMyadornment = R.or(withValidationIcon, !R.isNil(rightIcon)) ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", className: cx({ [classes.visibility]: R.isEmpty(value) }), children: /* @__PURE__ */ jsx(RightIcon, { onSubmit, Icon: rightIcon }) }) : null;
+  const onEnterLabel = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      if (R.is(Function, onSubmit)) {
+        onSubmit();
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      "data-testid": "input-test-id",
+      margin: "dense",
+      fullWidth,
+      id,
+      name,
+      type,
+      label,
+      value,
+      variant: "outlined",
+      placeholder,
+      onChange,
+      onKeyPress: onEnterLabel,
+      InputProps: {
+        startAdornment,
+        endAdornment: R.isNil(endAdornment) ? endMyadornment : endAdornment
+      },
+      inputProps,
+      ...textFieldProps
+    }
+  );
+};
+MyInput.propTypes = {
+  id: PropTypes.string,
+  name: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  leftIcon: PropTypes.object,
+  rightIcon: PropTypes.object,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  type: PropTypes.string,
+  onChange: PropTypes.func,
+  onSubmit: PropTypes.func,
+  fullWidth: PropTypes.bool,
+  withValidationIcon: PropTypes.bool,
+  textFieldProps: PropTypes.object,
+  inputProps: PropTypes.object,
+  endAdornment: PropTypes.node
+};
+const Input = withInput(MyInput);
+
+const useStyles = makeStyles((theme) => ({
+  paper: {
+    backgroundColor: theme.palette.background.paper,
+    padding: theme.spacing(2)
+  },
+  emailReasonMessage: {
+    backgroundColor: R.path(["palette", "tertiary", "dark"])(theme) || theme.palette.grey[100],
+    padding: theme.spacing(2),
+    margin: theme.spacing(2, 0)
+  },
+  agreement: {
+    fontSize: "1.0625rem",
+    lineHeight: "1.6"
+  },
+  policy: {
+    color: theme.palette.primary.main,
+    fontSize: "1.0625rem",
+    lineHeight: "1.6"
+  },
+  textarea: {
+    width: "100%",
+    padding: theme.spacing(1)
+  },
+  textareaError: {
+    borderColor: theme.palette.error.main,
+    borderWidth: theme.spacing(0.25)
+  }
+}));
+const Contact = ({
+  modes,
+  defaultMode = "question",
+  defaultFullName,
+  defaultEmail,
+  labels,
+  send,
+  isSubmitDisable,
+  children
+}) => {
+  const classes = useStyles();
+  const [mode, setMode] = useState(defaultMode);
+  const [title, setTitle] = useState("");
+  const [name, setName] = useState(defaultFullName || "");
+  const [organisation, setOrganisation] = useState("");
+  const [email, setEmail] = useState(defaultEmail || "");
+  const [subject, setSubject] = useState("");
+  const [emailHasError, setEmailError] = useState(false);
+  const [details, setDetails] = useState("");
+  const [checked, setChecked] = useState(false);
+  const [isSendDisable, setSendDisable] = useState(true);
+  const [detailsHasError, setDetailsError] = useState(false);
+  const checkEmail = (email2) => {
+    if (validate(email2) && R.test(/^\S+@\S+\.\S+$/, email2)) {
+      return setEmailError(false);
+    }
+    return setEmailError(true);
+  };
+  const checkDetails = (details2) => {
+    if (R.isEmpty(details2)) {
+      return setDetailsError(true);
+    }
+    return setDetailsError(false);
+  };
+  const onSubmit = () => {
+    if (R.is(Function)(send))
+      return send({
+        mode,
+        title,
+        name,
+        organisation,
+        email,
+        details,
+        checkbox: checked,
+        subject
+      });
+  };
+  useEffect(() => {
+    if (R.isEmpty(email)) return setSendDisable(true);
+    if (R.isEmpty(details)) return setSendDisable(true);
+    if (emailHasError) return setSendDisable(true);
+    if (detailsHasError) return setSendDisable(true);
+    return setSendDisable(isSubmitDisable || false);
+  }, [emailHasError, detailsHasError, email, details, isSubmitDisable]);
+  return /* @__PURE__ */ jsxs(Grid, { container: true, className: classes.paper, "data-testid": "contact-test-id", children: [
+    /* @__PURE__ */ jsxs(Grid, { item: true, container: true, xs: 12, md: 12, justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, sm: 12, md: 5, children: /* @__PURE__ */ jsx(
+        Mode,
+        {
+          changeMode: setMode,
+          modes,
+          mode,
+          title: R.prop("modeTitle")(labels)
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(Grid, { item: true, container: true, xs: 12, sm: 12, md: 6, "flex-direction": "column", children: [
+        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            variant: "outlined",
+            label: labels.personalTitle,
+            name: "title",
+            type: "text",
+            fullWidth: true,
+            value: title,
+            onChange: (e) => setTitle(e.target.value),
+            isControlled: true
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            variant: "outlined",
+            isControlled: true,
+            label: labels.name,
+            name: "name",
+            type: "text",
+            onChange: (e) => setName(e.target.value),
+            value: name,
+            fullWidth: true
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            variant: "outlined",
+            isControlled: true,
+            label: labels.organisation,
+            type: "text",
+            name: "organisation",
+            onChange: (e) => setOrganisation(e.target.value),
+            value: organisation,
+            fullWidth: true
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            inputProps: {
+              "aria-label": R.prop("email")(labels),
+              autoComplete: "email",
+              onBlur: () => checkEmail(email)
+            },
+            label: R.prop("email")(labels),
+            type: "email",
+            value: email,
+            onChange: (e) => setEmail(e.target.value),
+            variant: "outlined",
+            fullWidth: true,
+            isControlled: true,
+            defaultValue: defaultEmail,
+            textFieldProps: { error: emailHasError }
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 12, children: /* @__PURE__ */ jsx(Paper, { className: classes.emailReasonMessage, children: R.prop("message")(R.find(R.propEq("value", mode))(modes)) }) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 12, children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        variant: "outlined",
+        isControlled: true,
+        label: labels.subject,
+        name: "subject",
+        type: "text",
+        onChange: (e) => setSubject(e.target.value),
+        value: subject,
+        fullWidth: true
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 12, children: /* @__PURE__ */ jsx(
+      TextareaAutosize,
+      {
+        name: "details",
+        onChange: (e) => setDetails(e.target.value),
+        className: cx(classes.textarea, { [classes.textareaError]: detailsHasError }),
+        "aria-label": R.prop("details")(labels),
+        minRows: 6,
+        placeholder: R.prop("details")(labels),
+        value: details,
+        onBlur: () => checkDetails(details)
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(Grid, { item: true, container: true, justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+        FormControlLabel,
+        {
+          control: /* @__PURE__ */ jsx(Checkbox, { name: "checkedB", color: "primary" }),
+          label: /* @__PURE__ */ jsx(Typography, { className: classes.agreement, children: R.prop("checkbox")(labels) }),
+          checked,
+          onChange: (e) => setChecked(e.target.checked)
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Typography, { className: classes.policy, style: { paddingTop: 8 }, children: R.prop("organisationPrivacyPolicy")(labels) }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Grid, { item: true, container: true, justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ jsx(Grid, { item: true, children }),
+      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-label": R.prop("submit")(labels),
+          type: "submit",
+          disabled: isSendDisable,
+          variant: "contained",
+          color: "primary",
+          alternative: "siscc",
+          onClick: onSubmit,
+          size: "large",
+          className: classes.submitButton,
+          children: R.prop("submit")(labels)
+        }
+      ) })
+    ] })
+  ] });
+};
+Contact.propTypes = {
+  defaultMode: PropTypes.string,
+  defaultFullName: PropTypes.string,
+  defaultEmail: PropTypes.string,
+  lang: PropTypes.string,
+  theme: PropTypes.string,
+  modes: PropTypes.array,
+  send: PropTypes.func,
+  isSubmitDisable: PropTypes.bool,
+  children: PropTypes.node,
+  labels: PropTypes.shape({
+    name: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    organisation: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    personalTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    submit: PropTypes.string,
+    email: PropTypes.string,
+    details: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    contactForHelp: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    subject: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
+  })
+};
+
+export { Contact };
+//# sourceMappingURL=Contact.js.map