@carto/meridian-ds 1.4.3-alpha-codemirror.6 → 1.4.3-alpha-tag.2

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, useCallback, useImperativeHandle } from "react";
+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 "../palette-DI1CmQ2J.js";
-import { a } from "../palette-DI1CmQ2J.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-Dit3VW-A.js";
+import { a } from "../TablePaginationActions-Dit3VW-A.js";
 import { useIntl } from "react-intl";
-import { VisibilityOffOutlined, VisibilityOutlined, Cancel, AddCircleOutlineOutlined, ContentCopyOutlined, CloseOutlined, MenuOutlined, HelpOutline, TodayOutlined, MoreVertOutlined, ErrorOutline, Check } from "@mui/icons-material";
-import { A as Alert$1 } from "../Alert-CpgfD3bq.js";
+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 "cartocolor";
 import { M as MenuItem$1 } from "../MenuItem-CXnnE5lK.js";
 import { A as ArrowDown } from "../ArrowDown-CY_wMVJT.js";
@@ -13,31 +13,6 @@ 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",
@@ -99,7 +74,7 @@ function _Button({
   );
 }
 const Button = forwardRef(_Button);
-const Root$5 = styled(Box)(({ theme }) => ({
+const Root$4 = styled(Box)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   gap: theme.spacing(0.5)
@@ -129,7 +104,7 @@ function LabelWithIndicator({
   icon,
   inheritSize
 }) {
-  return /* @__PURE__ */ jsxs(Root$5, { children: [
+  return /* @__PURE__ */ jsxs(Root$4, { children: [
     label,
     type && /* @__PURE__ */ jsx(
       Indicator,
@@ -1608,7 +1583,7 @@ const SnackbarRoot = styled(Snackbar$1)(({ theme }) => ({
     maxWidth: `${MAX_WIDTH}px`
   }
 }));
-const Content$4 = styled(Box, {
+const Content$3 = styled(Box, {
   shouldForwardProp: (prop) => prop !== "autoWidth"
 })(({ autoWidth, theme }) => ({
   minWidth: "100%",
@@ -1717,7 +1692,7 @@ function Snackbar({
       TransitionComponent: autoWidth ? Fade : Slide,
       "data-auto-width": autoWidth,
       children: /* @__PURE__ */ jsxs(
-        Content$4,
+        Content$3,
         {
           sx: {
             position: "relative"
@@ -1754,6 +1729,188 @@ 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)
+  };
+});
+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("span", {
+  shouldForwardProp: (prop) => !["type", "icon"].includes(prop)
+})(({ type, icon, theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  paddingTop: type === "code" || icon ? 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, { icon: !!icon, 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",
@@ -1843,7 +2000,7 @@ function SecondaryText({ text }) {
     }
   );
 }
-const Root$4 = styled(AppBar$1)(({ theme }) => ({
+const Root$3 = styled(AppBar$1)(({ theme }) => ({
   backgroundColor: theme.palette.brand.appBarMain,
   "& .MuiTypography-root": {
     color: theme.palette.brand.appBarContrastText
@@ -1861,7 +2018,7 @@ const BrandElements = styled("div")(({ theme }) => ({
     minWidth: "192px"
   }
 }));
-const Content$3 = styled("div")(({ theme }) => ({
+const Content$2 = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
@@ -1877,14 +2034,14 @@ function AppBar({
   onClickMenu,
   ...otherProps
 }) {
-  return /* @__PURE__ */ jsx(Root$4, { ...otherProps, children: /* @__PURE__ */ jsxs(Toolbar, { children: [
+  return /* @__PURE__ */ jsx(Root$3, { ...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$3, { children })
+    /* @__PURE__ */ jsx(Content$2, { children })
   ] }) });
 }
 const Container = styled(Box, {
@@ -1922,7 +2079,7 @@ function ClearButton({
     }
   ) });
 }
-const Root$3 = styled(Box, {
+const Root$2 = 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
@@ -1962,7 +2119,7 @@ function DateFieldContainer({
   readOnly,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Root$3, { ...props, size, variant, readOnly, children });
+  return /* @__PURE__ */ jsx(Root$2, { ...props, size, variant, readOnly, children });
 }
 function DatePicker({
   handleClear,
@@ -2635,7 +2792,7 @@ function DateTimePicker({
   );
 }
 const DEFAULT_ITEMS = [{ outlinedBullet: false, value: "" }];
-const Content$2 = styled("ul")(({ theme }) => ({
+const Content$1 = styled("ul")(({ theme }) => ({
   listStyle: "none",
   paddingLeft: 0,
   margin: theme.spacing(0.5, 0, 0, 0)
@@ -2666,7 +2823,7 @@ function TooltipData({
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     title && /* @__PURE__ */ jsx(Typography, { color: "inherit", variant: "caption", weight: "medium", children: title }),
-    /* @__PURE__ */ jsx(Content$2, { children: items.map((item, index) => /* @__PURE__ */ jsxs(Entry, { children: [
+    /* @__PURE__ */ jsx(Content$1, { children: items.map((item, index) => /* @__PURE__ */ jsxs(Entry, { children: [
       /* @__PURE__ */ jsx(
         Bullet,
         {
@@ -2681,865 +2838,6 @@ 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,
-  labelIdButtonFooter,
-  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: labelIdButtonFooter || "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 CodeAreaInput({
-  options,
-  value,
-  defaultValue,
-  id,
-  onEditorDidMount,
-  onChange,
-  onBlur,
-  onFocus,
-  placeholder,
-  disabled,
-  size = "small",
-  height,
-  "data-testid": dataTestId,
-  "aria-label": ariaLabel,
-  ...props
-}) {
-  var _a;
-  const editorRef = useRef();
-  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
-  };
-  const [editor, setEditor] = useState(null);
-  useEffect(() => {
-    return () => {
-      setEditor(null);
-    };
-  }, []);
-  const foldCode = useCallback(
-    ({ from, to }) => {
-      editor.foldCode(
-        0,
-        {
-          rangeFinder: () => {
-            if (!to) return;
-            return {
-              from: { line: from - 1, ch: 0 },
-              to: { line: to - 1, ch: 0 }
-            };
-          }
-        },
-        "fold"
-      );
-    },
-    [editor]
-  );
-  useEffect(() => {
-    if (!value || !editor) return;
-    const numberOfBlocks = findCodeAreaControlCodeOccurrences(value);
-    if (!numberOfBlocks.length) return;
-    for (const line of numberOfBlocks) {
-      foldCode(line);
-    }
-  }, [value, foldCode, editor]);
-  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,
-  labelIdButtonFooter,
-  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,
-                {
-                  labelIdButtonFooter,
-                  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"
@@ -3820,7 +3118,7 @@ function DialogHeader({
     children && /* @__PURE__ */ jsx(DividerBottom, {})
   ] });
 }
-const Content$1 = styled(DialogContent$1, {
+const Content = styled(DialogContent$1, {
   shouldForwardProp: (prop) => !["scrollableContent", "withGutter", "withBottomGutter"].includes(prop)
 })(({ theme, scrollableContent, withGutter, withBottomGutter }) => ({
   display: "flex",
@@ -3897,7 +3195,7 @@ function _DialogContent({
     return () => resizeObserver.disconnect();
   }, [contentRef, updateBorders]);
   return /* @__PURE__ */ jsx(
-    Content$1,
+    Content,
     {
       ref: setContentRef,
       onScroll: handleScroll,
@@ -4196,159 +3494,6 @@ 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,
-  labelIdButtonFooter,
-  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,
-                labelIdButtonFooter,
-                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,
@@ -4356,14 +3501,6 @@ export {
   Autocomplete,
   Avatar,
   Button,
-  CodeAreaDialog,
-  CodeAreaDialogConfirmation,
-  CodeAreaDialogContent,
-  CodeAreaDialogError,
-  CodeAreaField,
-  CodeAreaFooter,
-  CodeAreaHeader,
-  CodeAreaInput,
   CopiableComponent,
   CreatableAutocomplete,
   DatePicker,
@@ -4391,6 +3528,7 @@ export {
   SelectField,
   Snackbar,
   a as TablePaginationActions,
+  Tag,
   TimePicker,
   ToggleButtonGroup,
   TooltipData,