@carto/meridian-ds 1.4.3-alpha-tag.5 → 1.4.3-alpha-icons-shapes.1

package/dist/components/index.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef, useState, useEffect, useMemo, useRef, Fragment as Fragment$1, useImperativeHandle, useCallback } from "react";
 import { styled, Box, Button as Button$1, CircularProgress, TextField, InputAdornment, IconButton as IconButton$1, Tooltip, Select, MenuItem, FormControl, InputLabel, FormHelperText, ToggleButtonGroup as ToggleButtonGroup$1, Menu as Menu$2, MenuList as MenuList$1, Link, Checkbox, ListItemText, Autocomplete as Autocomplete$1, Divider, ListItemIcon, createFilterOptions, Accordion, AccordionSummary, AccordionDetails, Avatar as Avatar$1, Snackbar as Snackbar$1, Portal, Fade, Slide, alpha, useTheme, Toolbar, AppBar as AppBar$1, Paper, Dialog as Dialog$1, DialogTitle as DialogTitle$1, Chip, DialogContent as DialogContent$1, DialogActions as DialogActions$1 } from "@mui/material";
-import { T as Typography, c as ICON_SIZE_SMALL, u as useImperativeIntl, N as NOTIFICATION_DURATION_IN_MS, A as APPBAR_SIZE } from "../TablePaginationActions-Dit3VW-A.js";
-import { a } from "../TablePaginationActions-Dit3VW-A.js";
+import { T as Typography, c as ICON_SIZE_SMALL, u as useImperativeIntl, N as NOTIFICATION_DURATION_IN_MS, A as APPBAR_SIZE } from "../TablePaginationActions-KpTvhN4Y.js";
+import { a } from "../TablePaginationActions-KpTvhN4Y.js";
 import { useIntl } from "react-intl";
-import { VisibilityOffOutlined, VisibilityOutlined, Cancel, AddCircleOutlineOutlined, ContentCopyOutlined, CloseOutlined, MenuOutlined, HelpOutline, TodayOutlined, Check } from "@mui/icons-material";
-import { A as Alert$1 } from "../Alert--QYebQp3.js";
+import { VisibilityOffOutlined, VisibilityOutlined, Cancel, AddCircleOutlineOutlined, ContentCopyOutlined, CloseOutlined, MenuOutlined, HelpOutline, TodayOutlined, MoreVertOutlined, ErrorOutline, Check } from "@mui/icons-material";
+import { A as Alert$1 } from "../Alert-D8jI1sG4.js";
 import "cartocolor";
 import { M as MenuItem$1 } from "../MenuItem-CXnnE5lK.js";
 import { A as ArrowDown } from "../ArrowDown-CY_wMVJT.js";
@@ -13,6 +13,31 @@ import { DatePicker as DatePicker$1 } from "@mui/x-date-pickers/DatePicker";
 import { PickersDay as PickersDay$1 } from "@mui/x-date-pickers";
 import { TimePicker as TimePicker$1 } from "@mui/x-date-pickers/TimePicker";
 import { DateTimePicker as DateTimePicker$1 } from "@mui/x-date-pickers/DateTimePicker";
+import { O as OpenDiagonallyRight, C as CloseDiagonallyRight } from "../OpenDiagonallyRight-5HZXh46V.js";
+import { Controlled, UnControlled } from "react-codemirror2";
+import { lime, blue, purple, teal, red, indigo } from "@mui/material/colors";
+import "codemirror/lib/codemirror.css";
+import "codemirror/lib/codemirror.js";
+import "codemirror/mode/sql/sql.js";
+import "codemirror/mode/javascript/javascript.js";
+import "codemirror/mode/htmlmixed/htmlmixed.js";
+import "codemirror/mode/markdown/markdown.js";
+import "codemirror/mode/shell/shell.js";
+import "codemirror/mode/python/python.js";
+import "codemirror/addon/display/placeholder";
+import "codemirror/addon/hint/sql-hint.js";
+import "codemirror/addon/hint/show-hint.css";
+import "codemirror/addon/hint/show-hint.js";
+import "codemirror/addon/selection/active-line.js";
+import "codemirror/addon/edit/matchbrackets.js";
+import "codemirror/addon/fold/foldcode.js";
+import "codemirror/addon/fold/foldgutter.js";
+import "codemirror/addon/fold/foldgutter.css";
+import "codemirror/addon/fold/brace-fold.js";
+import "codemirror/addon/fold/xml-fold.js";
+import "codemirror/addon/fold/indent-fold.js";
+import "codemirror/addon/fold/markdown-fold.js";
+import "codemirror/addon/fold/comment-fold.js";
 import ClickAwayListener from "@mui/material/ClickAwayListener";
 const IndicatorIcon = styled(Box)({
   position: "absolute",
@@ -74,7 +99,7 @@ function _Button({
   );
 }
 const Button = forwardRef(_Button);
-const Root$4 = styled(Box)(({ theme }) => ({
+const Root$5 = styled(Box)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   gap: theme.spacing(0.5)
@@ -104,7 +129,7 @@ function LabelWithIndicator({
   icon,
   inheritSize
 }) {
-  return /* @__PURE__ */ jsxs(Root$4, { children: [
+  return /* @__PURE__ */ jsxs(Root$5, { children: [
     label,
     type && /* @__PURE__ */ jsx(
       Indicator,
@@ -1583,7 +1608,7 @@ const SnackbarRoot = styled(Snackbar$1)(({ theme }) => ({
     maxWidth: `${MAX_WIDTH}px`
   }
 }));
-const Content$3 = styled(Box, {
+const Content$4 = styled(Box, {
   shouldForwardProp: (prop) => prop !== "autoWidth"
 })(({ autoWidth, theme }) => ({
   minWidth: "100%",
@@ -1692,7 +1717,7 @@ function Snackbar({
       TransitionComponent: autoWidth ? Fade : Slide,
       "data-auto-width": autoWidth,
       children: /* @__PURE__ */ jsxs(
-        Content$3,
+        Content$4,
         {
           sx: {
             position: "relative"
@@ -1729,195 +1754,6 @@ function Snackbar({
     }
   ) });
 }
-function colorProps(color, variant, theme, disabled) {
-  if (disabled) {
-    if (variant === "outlined") {
-      return {
-        color: theme.palette.text.disabled,
-        backgroundColor: theme.palette.black[4],
-        borderColor: theme.palette.action.focus
-      };
-    }
-    return {
-      color: theme.palette.text.disabled,
-      backgroundColor: theme.palette.action.disabledBackground,
-      borderColor: "transparent"
-    };
-  }
-  switch (color) {
-    case "default":
-      if (variant === "outlined") {
-        return {
-          color: theme.palette.text.secondary,
-          backgroundColor: theme.palette.black["4"],
-          borderColor: theme.palette.divider
-        };
-      }
-      return {
-        color: theme.palette.text.primary,
-        backgroundColor: theme.palette.default.main,
-        borderColor: "transparent"
-      };
-    case "primary":
-      if (variant === "outlined") {
-        return {
-          color: theme.palette.primary.main,
-          backgroundColor: theme.palette.primary.relatedLight,
-          borderColor: theme.palette.primary.main
-        };
-      }
-      return {
-        color: theme.palette.primary.contrastText,
-        backgroundColor: theme.palette.primary.main,
-        borderColor: "transparent"
-      };
-    case "secondary":
-      if (variant === "outlined") {
-        return {
-          color: theme.palette.secondary.main,
-          backgroundColor: theme.palette.secondary.relatedLight,
-          borderColor: theme.palette.secondary.main
-        };
-      }
-      return {
-        color: theme.palette.text.primary,
-        backgroundColor: theme.palette.secondary.main,
-        borderColor: "transparent"
-      };
-    case "success":
-      if (variant === "outlined") {
-        return {
-          color: theme.palette.success.main,
-          backgroundColor: theme.palette.success.relatedLight,
-          borderColor: theme.palette.success.main
-        };
-      }
-      return {
-        color: theme.palette.success.main,
-        backgroundColor: theme.palette.success.relatedLight,
-        borderColor: "transparent"
-      };
-    case "warning":
-      if (variant === "outlined") {
-        return {
-          color: theme.palette.warning.main,
-          backgroundColor: theme.palette.warning.relatedLight,
-          borderColor: theme.palette.warning.main
-        };
-      }
-      return {
-        color: theme.palette.text.primary,
-        backgroundColor: theme.palette.warning.main,
-        borderColor: "transparent"
-      };
-    case "error":
-      if (variant === "outlined") {
-        return {
-          color: theme.palette.error.main,
-          backgroundColor: theme.palette.error.relatedLight,
-          borderColor: theme.palette.error.main
-        };
-      }
-      return {
-        color: theme.palette.primary.contrastText,
-        backgroundColor: theme.palette.error.main,
-        borderColor: "transparent"
-      };
-  }
-}
-const TagRoot = styled("div", {
-  shouldForwardProp: (prop) => !["color", "variant", "disabled"].includes(prop)
-})(({
-  color,
-  variant,
-  disabled,
-  theme
-}) => {
-  return {
-    display: "inline-flex",
-    flexDirection: "row",
-    flexWrap: "nowrap",
-    alignItems: "center",
-    padding: theme.spacing(0, 0.5),
-    borderRadius: theme.spacing(0.25),
-    gap: theme.spacing(0.5),
-    height: theme.spacing(2),
-    borderWidth: "1px",
-    borderStyle: "solid",
-    ...colorProps(color ?? "primary", variant ?? "filled", theme, disabled),
-    '.Mui-selected &, [aria-selected="true"] &': {
-      borderColor: theme.palette.primary.main,
-      backgroundColor: theme.palette.primary.background,
-      ".MuiTypography-root": {
-        color: theme.palette.primary.main
-      }
-    }
-  };
-});
-const TagIcon = styled("div")(({ theme }) => ({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  "& svg": {
-    width: theme.spacing(ICON_SIZE_SMALL),
-    height: theme.spacing(ICON_SIZE_SMALL),
-    "& g": {
-      fill: "currentColor"
-    }
-  }
-}));
-const TagLabel = styled("div", {
-  shouldForwardProp: (prop) => !["type"].includes(prop)
-})(({ type, theme }) => ({
-  display: "flex",
-  alignItems: "center",
-  paddingTop: type === "code" ? theme.spacing(0.25) : void 0
-}));
-function _Tag({
-  label,
-  color = "primary",
-  variant = "filled",
-  icon,
-  type = "default",
-  typographyProps,
-  noWrap = true,
-  disabled,
-  ...otherProps
-}, ref) {
-  const typeCode = type === "code";
-  return /* @__PURE__ */ jsxs(
-    TagRoot,
-    {
-      ref,
-      className: "CartoTag-root",
-      color,
-      variant,
-      disabled,
-      "aria-disabled": disabled,
-      "data-color": color,
-      "data-variant": variant,
-      "data-type": type,
-      "data-name": "tag",
-      ...otherProps,
-      children: [
-        icon && /* @__PURE__ */ jsx(TagIcon, { children: icon }),
-        /* @__PURE__ */ jsx(TagLabel, { type, children: /* @__PURE__ */ jsx(
-          Typography,
-          {
-            component: "span",
-            color: "inherit",
-            variant: typeCode ? "code3" : "caption",
-            weight: typeCode ? "strong" : "medium",
-            noWrap,
-            ...typographyProps,
-            children: label
-          }
-        ) })
-      ]
-    }
-  );
-}
-const Tag = forwardRef(_Tag);
 const Menu = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
@@ -2007,7 +1843,7 @@ function SecondaryText({ text }) {
     }
   );
 }
-const Root$3 = styled(AppBar$1)(({ theme }) => ({
+const Root$4 = styled(AppBar$1)(({ theme }) => ({
   backgroundColor: theme.palette.brand.appBarMain,
   "& .MuiTypography-root": {
     color: theme.palette.brand.appBarContrastText
@@ -2025,7 +1861,7 @@ const BrandElements = styled("div")(({ theme }) => ({
     minWidth: "192px"
   }
 }));
-const Content$2 = styled("div")(({ theme }) => ({
+const Content$3 = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
@@ -2041,14 +1877,14 @@ function AppBar({
   onClickMenu,
   ...otherProps
 }) {
-  return /* @__PURE__ */ jsx(Root$3, { ...otherProps, children: /* @__PURE__ */ jsxs(Toolbar, { children: [
+  return /* @__PURE__ */ jsx(Root$4, { ...otherProps, children: /* @__PURE__ */ jsxs(Toolbar, { children: [
     /* @__PURE__ */ jsxs(BrandElements, { children: [
       showBurgerMenu && /* @__PURE__ */ jsx(BurgerMenu, { onClickMenu }),
       brandLogo && /* @__PURE__ */ jsx(BrandLogo, { logo: brandLogo }),
       brandText && /* @__PURE__ */ jsx(BrandText, { text: brandText }),
       secondaryText && /* @__PURE__ */ jsx(SecondaryText, { text: secondaryText })
     ] }),
-    /* @__PURE__ */ jsx(Content$2, { children })
+    /* @__PURE__ */ jsx(Content$3, { children })
   ] }) });
 }
 const Container = styled(Box, {
@@ -2086,7 +1922,7 @@ function ClearButton({
     }
   ) });
 }
-const Root$2 = styled(Box, {
+const Root$3 = styled(Box, {
   shouldForwardProp: (prop) => !["size", "variant", "readOnly"].includes(prop)
 })(({ size, variant, readOnly, theme }) => ({
   // There is no specific slot to change TextField styles at DatePicker level, so we need to wrap our component to isolate this override. https://mui.com/x/react-date-pickers/date-picker/#customization
@@ -2126,7 +1962,7 @@ function DateFieldContainer({
   readOnly,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Root$2, { ...props, size, variant, readOnly, children });
+  return /* @__PURE__ */ jsx(Root$3, { ...props, size, variant, readOnly, children });
 }
 function DatePicker({
   handleClear,
@@ -2799,7 +2635,7 @@ function DateTimePicker({
   );
 }
 const DEFAULT_ITEMS = [{ outlinedBullet: false, value: "" }];
-const Content$1 = styled("ul")(({ theme }) => ({
+const Content$2 = styled("ul")(({ theme }) => ({
   listStyle: "none",
   paddingLeft: 0,
   margin: theme.spacing(0.5, 0, 0, 0)
@@ -2830,7 +2666,7 @@ function TooltipData({
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     title && /* @__PURE__ */ jsx(Typography, { color: "inherit", variant: "caption", weight: "medium", children: title }),
-    /* @__PURE__ */ jsx(Content$1, { children: items.map((item, index) => /* @__PURE__ */ jsxs(Entry, { children: [
+    /* @__PURE__ */ jsx(Content$2, { children: items.map((item, index) => /* @__PURE__ */ jsxs(Entry, { children: [
       /* @__PURE__ */ jsx(
         Bullet,
         {
@@ -2845,6 +2681,866 @@ function TooltipData({
     ] }, index)) })
   ] });
 }
+const Footer = styled(Box, {
+  shouldForwardProp: (prop) => !["withGutter", "disabled"].includes(prop)
+})(
+  ({ withGutter, disabled, theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: theme.spacing(1),
+    ...withGutter && {
+      height: theme.spacing(4),
+      padding: theme.spacing(0, 0.5),
+      borderTop: `1px solid ${theme.palette.divider}`,
+      borderBottom: "1px solid transparent"
+    },
+    ...disabled && {
+      backgroundColor: theme.palette.default.background
+    }
+  })
+);
+function CodeAreaFooter({
+  onClickFooter,
+  buttonFooterLabelId,
+  disabledButtonFooter,
+  withGutter = true,
+  showSnackbar,
+  onCloseSnackbar,
+  loading,
+  disabled,
+  ...props
+}) {
+  const intl = useIntl();
+  const intlConfig = useImperativeIntl(intl);
+  if (!onClickFooter) return null;
+  return /* @__PURE__ */ jsxs(
+    Footer,
+    {
+      withGutter,
+      disabled,
+      "data-name": "code-area-footer",
+      "data-gutter": withGutter,
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "text",
+            ...props,
+            loading,
+            onClick: onClickFooter,
+            disabled: disabled || disabledButtonFooter,
+            children: intlConfig.formatMessage({
+              id: buttonFooterLabelId || "c4r.button.save"
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Snackbar,
+          {
+            open: showSnackbar,
+            autoWidth: true,
+            closeable: false,
+            autoHideDuration: 4e3,
+            onClose: onCloseSnackbar,
+            children: intlConfig.formatMessage({
+              id: "c4r.notifications.changesSaved"
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+const Header = styled(Box, { shouldForwardProp: (prop) => prop !== "size" })(({ size, theme }) => ({
+  position: "absolute",
+  top: 0,
+  right: theme.spacing(0.5),
+  zIndex: 1,
+  display: "flex",
+  justifyContent: "flex-end",
+  gap: theme.spacing(1),
+  padding: size === "small" ? theme.spacing(0.5) : theme.spacing(1, 2, 2),
+  paddingRight: size === "small" ? 0 : theme.spacing(1.5)
+}));
+function CodeAreaHeader({
+  disabled,
+  copyValue,
+  onClickExpand,
+  size
+}) {
+  const intl = useIntl();
+  const intlConfig = useImperativeIntl(intl);
+  const showExpandButton = !!onClickExpand;
+  const showCopyButton = copyValue !== void 0;
+  const showMenu = showExpandButton && showCopyButton;
+  const { copy } = useCopyValue();
+  const [openSnackbar, setOpenSnackbar] = useState(false);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const openDropdown = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const closeDropdown = () => {
+    setAnchorEl(null);
+  };
+  const handleCopy = (e) => {
+    e.preventDefault();
+    if (copyValue) {
+      copy(copyValue).then(() => {
+        setOpenSnackbar(true);
+      }).catch(console.error);
+    }
+  };
+  if (!showExpandButton && !showCopyButton) {
+    return null;
+  }
+  if (showMenu) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Header, { size, "data-size": size, "data-name": "code-area-header", children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            color: "default",
+            size,
+            icon: /* @__PURE__ */ jsx(MoreVertOutlined, {}),
+            disabled,
+            tooltip: intlConfig.formatMessage({ id: `c4r.button.showOptions` }),
+            tooltipPlacement: "top",
+            "aria-controls": open ? "basic-menu" : void 0,
+            "aria-haspopup": "true",
+            "aria-expanded": open ? "true" : void 0,
+            onClick: openDropdown
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Menu$1,
+          {
+            anchorEl,
+            open,
+            onClose: closeDropdown,
+            id: "menu",
+            MenuListProps: { "aria-labelledby": "menu-button" },
+            "aria-label": "Code area actions",
+            transformOrigin: { vertical: "top", horizontal: "right" },
+            anchorOrigin: { vertical: "bottom", horizontal: "right" },
+            children: [
+              /* @__PURE__ */ jsxs(MenuItem$1, { onClick: handleCopy, disabled, id: "copy", children: [
+                /* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(ContentCopyOutlined, {}) }),
+                /* @__PURE__ */ jsx(ListItemText, { children: intlConfig.formatMessage({ id: `c4r.button.copy` }) })
+              ] }),
+              /* @__PURE__ */ jsxs(MenuItem$1, { onClick: onClickExpand, disabled, id: "expand", children: [
+                /* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(OpenDiagonallyRight, {}) }),
+                /* @__PURE__ */ jsx(ListItemText, { children: intlConfig.formatMessage({ id: `c4r.button.expand` }) })
+              ] })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        Snackbar,
+        {
+          open: openSnackbar,
+          autoWidth: true,
+          closeable: false,
+          autoHideDuration: 4e3,
+          onClose: () => setOpenSnackbar(false),
+          children: intlConfig.formatMessage({
+            id: "c4r.notifications.copiedToClipboard"
+          })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Header, { size, "data-size": size, "data-name": "code-area-header", children: [
+    showCopyButton && /* @__PURE__ */ jsx(
+      CopiableComponent,
+      {
+        disabled,
+        value: copyValue,
+        button: true,
+        buttonProps: { size }
+      }
+    ),
+    showExpandButton && /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        color: "default",
+        size,
+        onClick: onClickExpand,
+        icon: /* @__PURE__ */ jsx(OpenDiagonallyRight, {}),
+        disabled,
+        tooltip: intlConfig.formatMessage({ id: `c4r.button.expand` }),
+        tooltipPlacement: "top"
+      }
+    )
+  ] });
+}
+const CodeAreaTheme = styled(Box, {
+  shouldForwardProp: (prop) => !["size", "height"].includes(prop)
+})(({ size, height, theme }) => ({
+  position: "relative",
+  flex: 1,
+  display: "flex",
+  cursor: "text",
+  ":focus-within &, .error &": {
+    marginBottom: 0
+  },
+  "& .react-codemirror2": {
+    width: "100%",
+    height: "100% !important",
+    position: "relative"
+  },
+  "& .CodeMirror": {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: 1,
+    height: "100% !important",
+    backgroundColor: theme.palette.background.default
+  },
+  "& .CodeMirror-code": {
+    "&> div:first-of-type .CodeMirror-line": {
+      marginTop: theme.spacing(-0.25)
+    }
+  },
+  "& .CodeMirror-scroll": {
+    paddingLeft: theme.spacing(1),
+    paddingRight: theme.spacing(1),
+    backgroundColor: "transparent"
+  },
+  "& .CodeMirror-lines": {
+    padding: theme.spacing(1, 0)
+  },
+  "& .CodeMirror pre.CodeMirror-line, & .CodeMirror pre.CodeMirror-line-like": {
+    boxSizing: "border-box",
+    paddingLeft: 0,
+    paddingTop: theme.spacing(0.25),
+    lineHeight: 1.2
+  },
+  "& .CodeMirror-linenumbers": {
+    width: `${theme.spacing(4.5)} !important`
+  },
+  "& .CodeMirror-linenumber": {
+    width: `${theme.spacing(4.5)} !important`,
+    height: theme.spacing(2),
+    marginBottom: `${theme.spacing(-0.25)} !important`,
+    paddingTop: theme.spacing(0.25),
+    paddingRight: theme.spacing(1.25),
+    boxSizing: "border-box !important",
+    color: theme.palette.text.secondary
+  },
+  // Active line addon
+  "& .CodeMirror-activeline-background, & .CodeMirror-activeline-gutter": {
+    backgroundColor: "transparent"
+  },
+  "& .CodeMirror-gutter-background": {
+    width: `${theme.spacing(6.25)} !important`
+    // Hack needed to simulate active line background
+  },
+  "& .CodeMirror-sizer": {
+    paddingTop: theme.spacing(0.25),
+    marginLeft: `${theme.spacing(5.25)} !important`,
+    borderRightWidth: `${theme.spacing(4)} !important`
+    // Hack needed to simulate active line background
+  },
+  "& .CodeMirror-matchingbracket": {
+    color: `${lime[900]} !important`,
+    backgroundColor: theme.palette.black[4],
+    boxShadow: `0 0 0 1px ${theme.palette.text.hint}`
+  },
+  // Selected line
+  "& .CodeMirror-selected, & .CodeMirror-focused .CodeMirror-selected, & .CodeMirror-line::selection, & .CodeMirror-line > span::selection, & .CodeMirror-line > span > span::selection": {
+    background: `${alpha(blue[800], 0.2)} !important`
+  },
+  "& .CodeMirror-gutters": {
+    borderRight: 0,
+    color: theme.palette.text.secondary,
+    backgroundColor: theme.palette.default.background
+  },
+  "& .CodeMirror-gutter-elt": {
+    "& .CodeMirror-foldgutter-open, .CodeMirror-foldgutter-folded": {
+      marginLeft: theme.spacing(-1),
+      "&:after": {
+        fontSize: theme.typography.caption.fontSize
+      }
+    }
+  },
+  "& .CodeMirror-placeholder": {
+    paddingTop: "0 !important",
+    marginLeft: `${theme.spacing(-0.5)} !important`,
+    marginBottom: `${theme.spacing(-0.25)} !important`,
+    color: `${theme.palette.text.hint} !important`
+  },
+  "& .MuiLinearProgress-root": {
+    height: "2px",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 1
+  },
+  "& .pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like, & .cm-bracket": {
+    color: theme.palette.text.primary
+  },
+  "& .CodeMirror pre.CodeMirror-placeholder": {
+    color: theme.palette.text.hint
+  },
+  "& .CodeMirror-composing": {
+    border: 0
+  },
+  // Theme: light
+  "& .cm-keyword, & .cm-string, & .cm-string-2, & .cm-other": {
+    color: purple[500]
+  },
+  "& .cm-operator, & .cm-tag, & .cm-attribute": {
+    color: teal[700]
+  },
+  "& .cm-number, & .cm-property, & .cm-builtin": {
+    color: red[700]
+  },
+  "& .cm-comment": {
+    color: theme.palette.text.secondary
+  },
+  "& .cm-variable": {
+    color: lime[900]
+  },
+  "& .cm-variable-2": {
+    color: theme.palette.text.primary
+  },
+  "& .cm-punctuation, & .cm-def, ": {
+    color: blue[800]
+  },
+  "& .cm-variable-3, & .cm-type": {
+    color: indigo[800]
+  },
+  "& .CodeMirror-foldmarker": {
+    textShadow: "none",
+    color: theme.palette.primary.main
+  },
+  "& .cm-error": {
+    color: theme.palette.error.main
+  },
+  "& .CodeMirror-selected": {
+    background: blue[800]
+  },
+  "& .cm-header-1": {
+    fontSize: theme.typography.h2.fontSize
+  },
+  "& .cm-header-2": {
+    fontSize: theme.typography.h3.fontSize
+  },
+  "& .cm-header-3": {
+    fontSize: theme.typography.h4.fontSize
+  },
+  "& .cm-header-4": {
+    fontSize: theme.typography.h5.fontSize
+  },
+  "& .cm-header-5": {
+    fontSize: theme.typography.h6.fontSize
+  },
+  ...size === "small" && {
+    "& .CodeMirror": {
+      height: height ? height : "auto",
+      minHeight: theme.spacing(9),
+      ...theme.typography.code3
+    }
+  }
+}));
+function findCodeAreaControlCodeOccurrences(content) {
+  const lines = content.split("\n");
+  const matches = [];
+  const beginStack = [];
+  lines.forEach((line, index) => {
+    const lineNumber = index + 1;
+    if (line.trim() === "-- BEGIN CONTROL CODE") {
+      beginStack.push(lineNumber);
+    } else if (line.trim() === "-- END CONTROL CODE" && beginStack.length > 0) {
+      const startLine = beginStack.pop();
+      matches.push({
+        from: startLine,
+        to: lineNumber
+      });
+    }
+  });
+  while (beginStack.length > 0) {
+    const startLine = beginStack.pop();
+    matches.push({
+      from: startLine,
+      to: lines.length
+      // Set end to last line for unmatched BEGIN
+    });
+  }
+  return matches;
+}
+function foldCode(editor, { from, to }) {
+  editor.foldCode(
+    0,
+    {
+      rangeFinder: () => {
+        if (!to) return;
+        return {
+          from: { line: from - 1, ch: 0 },
+          to: { line: to - 1, ch: 0 }
+        };
+      }
+    },
+    "fold"
+  );
+}
+function CodeAreaInput({
+  options,
+  value,
+  defaultValue,
+  id,
+  onEditorDidMount,
+  onChange,
+  onBlur,
+  onFocus,
+  placeholder,
+  disabled,
+  size = "small",
+  height,
+  autoFoldControlBlocks,
+  "data-testid": dataTestId,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  var _a;
+  const editorRef = useRef();
+  const [editor, setEditor] = useState(null);
+  const initialFoldingDoneRef = useRef(false);
+  const codeMirrorOptions = {
+    mode: "sql",
+    theme: "light",
+    lineNumbers: true,
+    lineWrapping: true,
+    extraKeys: { "Ctrl-Space": "autocomplete" },
+    placeholder,
+    disabled,
+    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
+    styleActiveLine: { nonEmpty: true },
+    styleActiveSelected: true,
+    matchBrackets: true,
+    foldOptions: {
+      minFoldSize: 1,
+      scanUp: false
+    },
+    ...options
+  };
+  useEffect(() => {
+    return () => {
+      setEditor(null);
+    };
+  }, []);
+  useEffect(() => {
+    if (!value || !editor || !autoFoldControlBlocks || initialFoldingDoneRef.current)
+      return;
+    const numberOfBlocks = findCodeAreaControlCodeOccurrences(value);
+    if (!numberOfBlocks.length) return;
+    for (const line of numberOfBlocks) {
+      foldCode(editor, line);
+    }
+    initialFoldingDoneRef.current = true;
+  }, [value, editor, autoFoldControlBlocks]);
+  return /* @__PURE__ */ jsxs(
+    CodeAreaTheme,
+    {
+      size,
+      height,
+      id,
+      "data-size": size,
+      "data-height": height,
+      "data-mode": typeof (options == null ? void 0 : options.mode) === "object" && ((_a = options.mode) == null ? void 0 : _a.name) ? options.mode.name : options == null ? void 0 : options.mode,
+      "data-fold-gutter": options == null ? void 0 : options.foldGutter,
+      "data-testid": dataTestId,
+      "aria-label": ariaLabel ?? "Code editor text area",
+      "data-name": "code-area-input",
+      children: [
+        value !== void 0 && /* @__PURE__ */ jsx(
+          Controlled,
+          {
+            ...props,
+            value,
+            editorDidMount: (editor2) => {
+              editorRef.current = editor2;
+              setEditor(editor2);
+              onEditorDidMount == null ? void 0 : onEditorDidMount(editor2);
+            },
+            options: codeMirrorOptions,
+            onBeforeChange: (editor2, data, value2) => {
+              onChange == null ? void 0 : onChange(value2);
+            },
+            onBlur: (editor2) => {
+              onBlur == null ? void 0 : onBlur(editor2.getValue());
+            },
+            onFocus
+          }
+        ),
+        defaultValue !== void 0 && /* @__PURE__ */ jsx(
+          UnControlled,
+          {
+            ...props,
+            value: defaultValue,
+            options: codeMirrorOptions,
+            onBlur: (editor2) => {
+              onBlur == null ? void 0 : onBlur(editor2.getValue());
+            },
+            onFocus
+          }
+        )
+      ]
+    }
+  );
+}
+const Root$2 = styled(FormControl)(() => ({
+  display: "flex",
+  flexDirection: "column",
+  flex: 1
+}));
+const CodeMirrorWrapper = styled(Box, {
+  shouldForwardProp: (prop) => ![
+    "variant",
+    "error",
+    "disabled",
+    "readOnly",
+    "lineNumbers",
+    "fullScreen"
+  ].includes(prop)
+})(
+  ({ variant, error, disabled, readOnly, lineNumbers, fullScreen, theme }) => ({
+    position: "relative",
+    overflow: "auto",
+    display: "flex",
+    flexDirection: "column",
+    flex: 1,
+    width: "100%",
+    minHeight: 0,
+    background: theme.palette.background.paper,
+    // Active line addon
+    ".CodeMirror-focused .CodeMirror-activeline": {
+      "& .CodeMirror-activeline-background, & .CodeMirror-activeline-gutter": {
+        background: theme.palette.primary.background
+      }
+    },
+    ...fullScreen && {
+      maxWidth: "100%",
+      maxHeight: "100vh",
+      height: "100vh"
+    },
+    ...(variant === "filled" || variant === "outlined") && {
+      borderRadius: theme.spacing(0.5),
+      transition: theme.transitions.create("background-color", {
+        easing: theme.transitions.easing.easeInOut,
+        duration: theme.transitions.duration.shortest
+      }),
+      "&:after": {
+        content: '""',
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        pointerEvents: "none",
+        border: `1px solid ${theme.palette.default.outlinedBorder}`,
+        borderRadius: theme.spacing(0.5),
+        transition: theme.transitions.create("border-color", {
+          easing: theme.transitions.easing.easeInOut,
+          duration: theme.transitions.duration.shortest
+        })
+      },
+      "&:hover:after": {
+        borderColor: theme.palette.common.black
+      },
+      "&:focus-within": {
+        overflow: "hidden",
+        "&:after": {
+          borderWidth: "2px",
+          borderColor: theme.palette.primary.main
+        }
+      },
+      ...error && {
+        "&.MuiBox-root:after": {
+          borderWidth: "2px",
+          borderColor: theme.palette.error.main
+        }
+      }
+    },
+    ...variant === "filled" && {
+      backgroundColor: theme.palette.background.paper,
+      "&.codeArea-filled:after": {
+        borderColor: "transparent"
+      },
+      "&.codeArea-filled:hover:after": {
+        borderColor: theme.palette.common.black
+      },
+      "&.codeArea-filled:focus-within:after": {
+        borderWidth: "2px",
+        borderColor: theme.palette.primary.main
+      },
+      "& .CodeMirror": {
+        backgroundColor: theme.palette.default.background,
+        "&:focus-within": {
+          backgroundColor: theme.palette.background.paper
+        }
+      },
+      ...error && {
+        borderColor: theme.palette.error.main,
+        "& .CodeMirror": {
+          backgroundColor: theme.palette.default.background
+        },
+        "&:hover, &:focus-within, &.codeArea-filled:after, &.codeArea-filled:hover:after, &.codeArea-filled:focus-within:after": {
+          borderColor: theme.palette.error.main
+        },
+        "&:focus-within": {
+          "& .CodeMirror": {
+            backgroundColor: theme.palette.background.paper
+          }
+        }
+      }
+    },
+    ...readOnly && {
+      "& .CodeMirror": {
+        backgroundColor: theme.palette.default.background,
+        ".CodeMirror-cursors": {
+          visibility: "hidden !important"
+        }
+      },
+      ...variant === "filled" && {
+        backgroundColor: theme.palette.background.paper
+      }
+    },
+    ...disabled && {
+      pointerEvents: "none",
+      "& .CodeMirror": {
+        color: theme.palette.text.disabled,
+        backgroundColor: theme.palette.default.background,
+        "& span, .CodeMirror-linenumber, .CodeMirror-guttermarker-subtle": {
+          color: theme.palette.text.disabled
+        }
+      },
+      ...variant === "filled" && {
+        backgroundColor: theme.palette.background.paper
+      }
+    },
+    ...!lineNumbers && {
+      "& .CodeMirror-scroll .CodeMirror-sizer": {
+        marginLeft: `${theme.spacing(1)} !important`
+      },
+      "& .CodeMirror-gutter-background": {
+        width: `${theme.spacing(2)} !important`
+      }
+    }
+  })
+);
+const InputWrapper = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "hasActions"
+})(({ theme, hasActions }) => ({
+  flex: "1 1 auto",
+  overflowY: "auto",
+  display: "flex",
+  flexDirection: "column",
+  ...hasActions && {
+    ".CodeMirror-line": {
+      paddingRight: `${theme.spacing(4)} !important`
+    }
+  }
+}));
+const HelpIcon = styled(HelpOutline)(({ theme }) => ({
+  width: ICON_SIZE_SMALL,
+  height: ICON_SIZE_SMALL,
+  fill: theme.palette.text.secondary
+}));
+function CodeAreaField({
+  value,
+  defaultValue,
+  validate,
+  onChange,
+  onBlur,
+  onFocus,
+  label,
+  labelHelpTooltip,
+  placeholder,
+  type,
+  disabled,
+  copyValue,
+  helperText,
+  error,
+  size = "small",
+  variant = "outlined",
+  onClickExpand,
+  onClickFooter,
+  disabledButtonFooter,
+  buttonFooterLabelId,
+  options,
+  id = "code-area-field",
+  saveLoading,
+  showSaveSnackbar,
+  onCloseSaveSnackbar,
+  fullScreen,
+  isExpanded,
+  ...props
+}) {
+  const [focused, setFocused] = useState(false);
+  const readOnly = (options == null ? void 0 : options.readOnly) ?? false;
+  const lineNumbers = (options == null ? void 0 : options.lineNumbers) ?? true;
+  return /* @__PURE__ */ jsxs(
+    Root$2,
+    {
+      size,
+      error,
+      disabled,
+      "aria-disabled": disabled,
+      "data-size": size,
+      "data-full-screen": fullScreen,
+      "data-variant": variant,
+      "data-name": "code-area-field",
+      children: [
+        label && /* @__PURE__ */ jsx(
+          InputLabel,
+          {
+            htmlFor: id,
+            disabled,
+            error,
+            focused,
+            shrink: true,
+            children: /* @__PURE__ */ jsx(
+              LabelWithIndicator,
+              {
+                label,
+                type,
+                icon: labelHelpTooltip ? /* @__PURE__ */ jsx(Tooltip, { title: labelHelpTooltip, children: /* @__PURE__ */ jsx(
+                  HelpIcon,
+                  {
+                    "aria-label": typeof labelHelpTooltip === "string" ? labelHelpTooltip : void 0
+                  }
+                ) }) : void 0
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          CodeMirrorWrapper,
+          {
+            variant,
+            error: !!error,
+            disabled,
+            readOnly,
+            lineNumbers,
+            className: variant === "filled" ? "codeArea-filled" : "",
+            fullScreen,
+            children: [
+              /* @__PURE__ */ jsx(
+                CodeAreaHeader,
+                {
+                  onClickExpand,
+                  copyValue,
+                  disabled,
+                  size: isExpanded ? "medium" : "small"
+                }
+              ),
+              /* @__PURE__ */ jsx(InputWrapper, { hasActions: !!copyValue || !!onClickExpand, children: /* @__PURE__ */ jsx(
+                CodeAreaInput,
+                {
+                  ...props,
+                  id,
+                  disabled,
+                  value,
+                  defaultValue,
+                  placeholder,
+                  onFocus: () => {
+                    setFocused(true);
+                    onFocus == null ? void 0 : onFocus();
+                  },
+                  onBlur: (value2) => {
+                    if (onBlur) onBlur(value2);
+                    if (onChange) onChange(value2);
+                    if (validate) validate(value2);
+                    setFocused(false);
+                  },
+                  onChange,
+                  size,
+                  options: {
+                    ...readOnly && {
+                      styleActiveLine: false,
+                      matchBrackets: false
+                    },
+                    ...options
+                  }
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                CodeAreaFooter,
+                {
+                  buttonFooterLabelId,
+                  onClickFooter,
+                  disabled,
+                  disabledButtonFooter,
+                  size: "small",
+                  loading: !!saveLoading,
+                  showSnackbar: showSaveSnackbar,
+                  onCloseSnackbar: onCloseSaveSnackbar
+                }
+              )
+            ]
+          }
+        ),
+        helperText && /* @__PURE__ */ jsx(FormHelperText, { children: helperText })
+      ]
+    }
+  );
+}
+const ErrorWrapper = styled(Box)(({ theme }) => ({
+  position: "relative",
+  marginBottom: "1px",
+  padding: theme.spacing(1.5, 2, 1.5, 5.5),
+  "&:before": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    zIndex: 1,
+    width: theme.spacing(5),
+    background: theme.palette.background.default
+  },
+  "&:after": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    right: 0,
+    left: 0,
+    bottom: 0,
+    zIndex: 2,
+    background: `linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 40%)`
+  },
+  ".MuiFormHelperText-root": {
+    marginTop: 0
+  }
+}));
+const ErrorContent = styled(Box)(({ theme }) => ({
+  position: "relative",
+  zIndex: 3,
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1)
+}));
+function CodeAreaDialogError({
+  children,
+  hasDivider
+}) {
+  const theme = useTheme();
+  if (!children) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ErrorWrapper, { children: /* @__PURE__ */ jsxs(ErrorContent, { children: [
+      /* @__PURE__ */ jsx(ErrorOutline, { htmlColor: theme.palette.error.main }),
+      /* @__PURE__ */ jsx(FormHelperText, { error: true, children })
+    ] }) }),
+    hasDivider && /* @__PURE__ */ jsx(Divider, {})
+  ] });
+}
 const sizesHeight = {
   [
     "small"
@@ -3125,7 +3821,7 @@ function DialogHeader({
     children && /* @__PURE__ */ jsx(DividerBottom, {})
   ] });
 }
-const Content = styled(DialogContent$1, {
+const Content$1 = styled(DialogContent$1, {
   shouldForwardProp: (prop) => !["scrollableContent", "withGutter", "withBottomGutter"].includes(prop)
 })(({ theme, scrollableContent, withGutter, withBottomGutter }) => ({
   display: "flex",
@@ -3202,7 +3898,7 @@ function _DialogContent({
     return () => resizeObserver.disconnect();
   }, [contentRef, updateBorders]);
   return /* @__PURE__ */ jsx(
-    Content,
+    Content$1,
     {
       ref: setContentRef,
       onScroll: handleScroll,
@@ -3501,6 +4197,159 @@ function DialogStepper({
     );
   }) }) });
 }
+const Content = styled(DialogContent, {
+  shouldForwardProp: (prop) => !["error", "withBorder"].includes(prop)
+})(
+  ({ error, withBorder, theme }) => ({
+    gap: 0,
+    border: withBorder ? `1px solid ${theme.palette.divider} !important` : void 0,
+    borderBottom: error ? "none !important" : void 0,
+    ".react-codemirror2": {
+      display: "flex",
+      flexDirection: "column",
+      minHeight: "100%"
+    },
+    ".CodeMirror-wrap": {
+      display: "flex",
+      flexDirection: "column",
+      flex: 1
+    },
+    "& + .MuiDivider-root": {
+      display: "none"
+    }
+  })
+);
+function CodeAreaDialogContent({
+  children,
+  error,
+  withBorder = true,
+  withGutter = false
+}) {
+  if (!children) return null;
+  return /* @__PURE__ */ jsx(Content, { withGutter, error, withBorder, children });
+}
+function CodeAreaDialogConfirmation({
+  onClose,
+  onCancel,
+  cancelLabelId,
+  cancelButton,
+  closeButton,
+  contentLabelId,
+  titleLabelId,
+  severity = "warning",
+  content
+}) {
+  const intl = useIntl();
+  const intlConfig = useImperativeIntl(intl);
+  if (!onClose || !onCancel) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    DialogConfirmation,
+    {
+      opened: true,
+      severity,
+      title: intlConfig.formatMessage({
+        id: titleLabelId || "c4r.dialog.confirmation.title"
+      }),
+      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+        onCancel && (cancelButton ? cancelButton : /* @__PURE__ */ jsx(Button, { onClick: onCancel, children: intlConfig.formatMessage({
+          id: cancelLabelId || "c4r.button.cancel"
+        }) })),
+        onClose && (closeButton ? closeButton : /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: onClose, children: intlConfig.formatMessage({
+          id: "c4r.button.leave"
+        }) }))
+      ] }),
+      children: content ? content : intlConfig.formatMessage({
+        id: contentLabelId || "c4r.dialog.confirmation.content"
+      })
+    }
+  );
+}
+function CodeAreaDialog({
+  open,
+  onClose,
+  title,
+  error,
+  helperText,
+  onClickFooter,
+  disabledButtonFooter,
+  buttonFooterLabelId,
+  disabled,
+  showConfirmation,
+  onCancelConfirm,
+  onCloseConfirm,
+  footerProps,
+  saveLoading,
+  showSaveSnackbar,
+  onCloseSaveSnackbar,
+  "data-testid": dataTestId,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const showFooter = error || !!onClickFooter || !!footerProps;
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open,
+      fullScreen: true,
+      onClose,
+      "data-testid": dataTestId,
+      "aria-label": ariaLabel,
+      "data-name": "code-area-dialog",
+      children: [
+        /* @__PURE__ */ jsx(
+          DialogHeader,
+          {
+            title,
+            onClose,
+            closeIcon: !onClickFooter && /* @__PURE__ */ jsx(CloseDiagonallyRight, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(CodeAreaDialogContent, { error, children: /* @__PURE__ */ jsx(
+          CodeAreaField,
+          {
+            ...props,
+            disabled,
+            variant: null,
+            isExpanded: true
+          }
+        ) }),
+        showFooter && /* @__PURE__ */ jsx(
+          DialogFooter,
+          {
+            ...footerProps,
+            topContent: error && /* @__PURE__ */ jsx(CodeAreaDialogError, { hasDivider: !!onClickFooter, children: helperText }),
+            children: !!onClickFooter && /* @__PURE__ */ jsx(
+              CodeAreaFooter,
+              {
+                onClickFooter,
+                buttonFooterLabelId,
+                disabled,
+                disabledButtonFooter,
+                withGutter: false,
+                variant: "contained",
+                size: "medium",
+                loading: !!saveLoading,
+                showSnackbar: showSaveSnackbar,
+                onCloseSnackbar: onCloseSaveSnackbar
+              }
+            )
+          }
+        ),
+        showConfirmation && /* @__PURE__ */ jsx(
+          CodeAreaDialogConfirmation,
+          {
+            onClose: onCloseConfirm ?? onClose,
+            onCancel: onCancelConfirm,
+            cancelLabelId: "c4r.button.keepEditing"
+          }
+        )
+      ]
+    }
+  );
+}
 export {
   AccordionGroup,
   Alert$1 as Alert,
@@ -3508,6 +4357,14 @@ export {
   Autocomplete,
   Avatar,
   Button,
+  CodeAreaDialog,
+  CodeAreaDialogConfirmation,
+  CodeAreaDialogContent,
+  CodeAreaDialogError,
+  CodeAreaField,
+  CodeAreaFooter,
+  CodeAreaHeader,
+  CodeAreaInput,
   CopiableComponent,
   CreatableAutocomplete,
   DatePicker,
@@ -3535,7 +4392,6 @@ export {
   SelectField,
   Snackbar,
   a as TablePaginationActions,
-  Tag,
   TimePicker,
   ToggleButtonGroup,
   TooltipData,