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

package/dist/components/index.cjs

@@ -3,10 +3,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const TablePaginationActions = require("../TablePaginationActions-BG2gWq0M.cjs");
+const TablePaginationActions = require("../TablePaginationActions-CFGXm44W.cjs");
 const reactIntl = require("react-intl");
 const iconsMaterial = require("@mui/icons-material");
-const Alert$1 = require("../Alert-DFaAeTZf.cjs");
+const Alert$1 = require("../Alert-zqtoWsBL.cjs");
 require("cartocolor");
 const MenuItem = require("../MenuItem-Br2jY2lt.cjs");
 const ArrowDown = require("../ArrowDown-8fLj23Ge.cjs");
@@ -14,6 +14,31 @@ const DatePicker$1 = require("@mui/x-date-pickers/DatePicker");
 const xDatePickers = require("@mui/x-date-pickers");
 const TimePicker$1 = require("@mui/x-date-pickers/TimePicker");
 const DateTimePicker$1 = require("@mui/x-date-pickers/DateTimePicker");
+const OpenDiagonallyRight = require("../OpenDiagonallyRight-BrRyCV4Q.cjs");
+const reactCodemirror2 = require("react-codemirror2");
+const colors = require("@mui/material/colors");
+require("codemirror/lib/codemirror.css");
+require("codemirror/lib/codemirror.js");
+require("codemirror/mode/sql/sql.js");
+require("codemirror/mode/javascript/javascript.js");
+require("codemirror/mode/htmlmixed/htmlmixed.js");
+require("codemirror/mode/markdown/markdown.js");
+require("codemirror/mode/shell/shell.js");
+require("codemirror/mode/python/python.js");
+require("codemirror/addon/display/placeholder");
+require("codemirror/addon/hint/sql-hint.js");
+require("codemirror/addon/hint/show-hint.css");
+require("codemirror/addon/hint/show-hint.js");
+require("codemirror/addon/selection/active-line.js");
+require("codemirror/addon/edit/matchbrackets.js");
+require("codemirror/addon/fold/foldcode.js");
+require("codemirror/addon/fold/foldgutter.js");
+require("codemirror/addon/fold/foldgutter.css");
+require("codemirror/addon/fold/brace-fold.js");
+require("codemirror/addon/fold/xml-fold.js");
+require("codemirror/addon/fold/indent-fold.js");
+require("codemirror/addon/fold/markdown-fold.js");
+require("codemirror/addon/fold/comment-fold.js");
 const ClickAwayListener = require("@mui/material/ClickAwayListener");
 const IndicatorIcon = material.styled(material.Box)({
   position: "absolute",
@@ -75,7 +100,7 @@ function _Button({
   );
 }
 const Button = React.forwardRef(_Button);
-const Root$4 = material.styled(material.Box)(({ theme }) => ({
+const Root$5 = material.styled(material.Box)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   gap: theme.spacing(0.5)
@@ -105,7 +130,7 @@ function LabelWithIndicator({
   icon,
   inheritSize
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Root$4, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root$5, { children: [
     label,
     type && /* @__PURE__ */ jsxRuntime.jsx(
       Indicator,
@@ -1584,7 +1609,7 @@ const SnackbarRoot = material.styled(material.Snackbar)(({ theme }) => ({
     maxWidth: `${MAX_WIDTH}px`
   }
 }));
-const Content$3 = material.styled(material.Box, {
+const Content$4 = material.styled(material.Box, {
   shouldForwardProp: (prop) => prop !== "autoWidth"
 })(({ autoWidth, theme }) => ({
   minWidth: "100%",
@@ -1693,7 +1718,7 @@ function Snackbar({
       TransitionComponent: autoWidth ? material.Fade : material.Slide,
       "data-auto-width": autoWidth,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
-        Content$3,
+        Content$4,
         {
           sx: {
             position: "relative"
@@ -1730,195 +1755,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 = material.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 = material.styled("div")(({ theme }) => ({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  "& svg": {
-    width: theme.spacing(TablePaginationActions.ICON_SIZE_SMALL),
-    height: theme.spacing(TablePaginationActions.ICON_SIZE_SMALL),
-    "& g": {
-      fill: "currentColor"
-    }
-  }
-}));
-const TagLabel = material.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TagIcon, { children: icon }),
-        /* @__PURE__ */ jsxRuntime.jsx(TagLabel, { type, children: /* @__PURE__ */ jsxRuntime.jsx(
-          TablePaginationActions.Typography,
-          {
-            component: "span",
-            color: "inherit",
-            variant: typeCode ? "code3" : "caption",
-            weight: typeCode ? "strong" : "medium",
-            noWrap,
-            ...typographyProps,
-            children: label
-          }
-        ) })
-      ]
-    }
-  );
-}
-const Tag = React.forwardRef(_Tag);
 const Menu = material.styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
@@ -2008,7 +1844,7 @@ function SecondaryText({ text }) {
     }
   );
 }
-const Root$3 = material.styled(material.AppBar)(({ theme }) => ({
+const Root$4 = material.styled(material.AppBar)(({ theme }) => ({
   backgroundColor: theme.palette.brand.appBarMain,
   "& .MuiTypography-root": {
     color: theme.palette.brand.appBarContrastText
@@ -2026,7 +1862,7 @@ const BrandElements = material.styled("div")(({ theme }) => ({
     minWidth: "192px"
   }
 }));
-const Content$2 = material.styled("div")(({ theme }) => ({
+const Content$3 = material.styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
@@ -2042,14 +1878,14 @@ function AppBar({
   onClickMenu,
   ...otherProps
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...otherProps, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Toolbar, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Root$4, { ...otherProps, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Toolbar, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(BrandElements, { children: [
       showBurgerMenu && /* @__PURE__ */ jsxRuntime.jsx(BurgerMenu, { onClickMenu }),
       brandLogo && /* @__PURE__ */ jsxRuntime.jsx(BrandLogo, { logo: brandLogo }),
       brandText && /* @__PURE__ */ jsxRuntime.jsx(BrandText, { text: brandText }),
       secondaryText && /* @__PURE__ */ jsxRuntime.jsx(SecondaryText, { text: secondaryText })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Content$2, { children })
+    /* @__PURE__ */ jsxRuntime.jsx(Content$3, { children })
   ] }) });
 }
 const Container = material.styled(material.Box, {
@@ -2087,7 +1923,7 @@ function ClearButton({
     }
   ) });
 }
-const Root$2 = material.styled(material.Box, {
+const Root$3 = material.styled(material.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
@@ -2127,7 +1963,7 @@ function DateFieldContainer({
   readOnly,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Root$2, { ...props, size, variant, readOnly, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...props, size, variant, readOnly, children });
 }
 function DatePicker({
   handleClear,
@@ -2800,7 +2636,7 @@ function DateTimePicker({
   );
 }
 const DEFAULT_ITEMS = [{ outlinedBullet: false, value: "" }];
-const Content$1 = material.styled("ul")(({ theme }) => ({
+const Content$2 = material.styled("ul")(({ theme }) => ({
   listStyle: "none",
   paddingLeft: 0,
   margin: theme.spacing(0.5, 0, 0, 0)
@@ -2831,7 +2667,7 @@ function TooltipData({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     title && /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { color: "inherit", variant: "caption", weight: "medium", children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx(Content$1, { children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(Entry, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Content$2, { children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(Entry, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         Bullet,
         {
@@ -2846,6 +2682,866 @@ function TooltipData({
     ] }, index)) })
   ] });
 }
+const Footer = material.styled(material.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 = reactIntl.useIntl();
+  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  if (!onClickFooter) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Footer,
+    {
+      withGutter,
+      disabled,
+      "data-name": "code-area-footer",
+      "data-gutter": withGutter,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: "text",
+            ...props,
+            loading,
+            onClick: onClickFooter,
+            disabled: disabled || disabledButtonFooter,
+            children: intlConfig.formatMessage({
+              id: buttonFooterLabelId || "c4r.button.save"
+            })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Snackbar,
+          {
+            open: showSnackbar,
+            autoWidth: true,
+            closeable: false,
+            autoHideDuration: 4e3,
+            onClose: onCloseSnackbar,
+            children: intlConfig.formatMessage({
+              id: "c4r.notifications.changesSaved"
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+const Header = material.styled(material.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 = reactIntl.useIntl();
+  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const showExpandButton = !!onClickExpand;
+  const showCopyButton = copyValue !== void 0;
+  const showMenu = showExpandButton && showCopyButton;
+  const { copy } = useCopyValue();
+  const [openSnackbar, setOpenSnackbar] = React.useState(false);
+  const [anchorEl, setAnchorEl] = React.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Header, { size, "data-size": size, "data-name": "code-area-header", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconButton,
+          {
+            color: "default",
+            size,
+            icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(MenuItem.MenuItem, { onClick: handleCopy, disabled, id: "copy", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(material.ListItemIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ContentCopyOutlined, {}) }),
+                /* @__PURE__ */ jsxRuntime.jsx(material.ListItemText, { children: intlConfig.formatMessage({ id: `c4r.button.copy` }) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(MenuItem.MenuItem, { onClick: onClickExpand, disabled, id: "expand", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(material.ListItemIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.OpenDiagonallyRight, {}) }),
+                /* @__PURE__ */ jsxRuntime.jsx(material.ListItemText, { children: intlConfig.formatMessage({ id: `c4r.button.expand` }) })
+              ] })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Snackbar,
+        {
+          open: openSnackbar,
+          autoWidth: true,
+          closeable: false,
+          autoHideDuration: 4e3,
+          onClose: () => setOpenSnackbar(false),
+          children: intlConfig.formatMessage({
+            id: "c4r.notifications.copiedToClipboard"
+          })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Header, { size, "data-size": size, "data-name": "code-area-header", children: [
+    showCopyButton && /* @__PURE__ */ jsxRuntime.jsx(
+      CopiableComponent,
+      {
+        disabled,
+        value: copyValue,
+        button: true,
+        buttonProps: { size }
+      }
+    ),
+    showExpandButton && /* @__PURE__ */ jsxRuntime.jsx(
+      IconButton,
+      {
+        color: "default",
+        size,
+        onClick: onClickExpand,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.OpenDiagonallyRight, {}),
+        disabled,
+        tooltip: intlConfig.formatMessage({ id: `c4r.button.expand` }),
+        tooltipPlacement: "top"
+      }
+    )
+  ] });
+}
+const CodeAreaTheme = material.styled(material.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: `${colors.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: `${material.alpha(colors.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: colors.purple[500]
+  },
+  "& .cm-operator, & .cm-tag, & .cm-attribute": {
+    color: colors.teal[700]
+  },
+  "& .cm-number, & .cm-property, & .cm-builtin": {
+    color: colors.red[700]
+  },
+  "& .cm-comment": {
+    color: theme.palette.text.secondary
+  },
+  "& .cm-variable": {
+    color: colors.lime[900]
+  },
+  "& .cm-variable-2": {
+    color: theme.palette.text.primary
+  },
+  "& .cm-punctuation, & .cm-def, ": {
+    color: colors.blue[800]
+  },
+  "& .cm-variable-3, & .cm-type": {
+    color: colors.indigo[800]
+  },
+  "& .CodeMirror-foldmarker": {
+    textShadow: "none",
+    color: theme.palette.primary.main
+  },
+  "& .cm-error": {
+    color: theme.palette.error.main
+  },
+  "& .CodeMirror-selected": {
+    background: colors.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 = React.useRef();
+  const [editor, setEditor] = React.useState(null);
+  const initialFoldingDoneRef = React.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
+  };
+  React.useEffect(() => {
+    return () => {
+      setEditor(null);
+    };
+  }, []);
+  React.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          reactCodemirror2.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__ */ jsxRuntime.jsx(
+          reactCodemirror2.UnControlled,
+          {
+            ...props,
+            value: defaultValue,
+            options: codeMirrorOptions,
+            onBlur: (editor2) => {
+              onBlur == null ? void 0 : onBlur(editor2.getValue());
+            },
+            onFocus
+          }
+        )
+      ]
+    }
+  );
+}
+const Root$2 = material.styled(material.FormControl)(() => ({
+  display: "flex",
+  flexDirection: "column",
+  flex: 1
+}));
+const CodeMirrorWrapper = material.styled(material.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 = material.styled(material.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 = material.styled(iconsMaterial.HelpOutline)(({ theme }) => ({
+  width: TablePaginationActions.ICON_SIZE_SMALL,
+  height: TablePaginationActions.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] = React.useState(false);
+  const readOnly = (options == null ? void 0 : options.readOnly) ?? false;
+  const lineNumbers = (options == null ? void 0 : options.lineNumbers) ?? true;
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          material.InputLabel,
+          {
+            htmlFor: id,
+            disabled,
+            error,
+            focused,
+            shrink: true,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              LabelWithIndicator,
+              {
+                label,
+                type,
+                icon: labelHelpTooltip ? /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: labelHelpTooltip, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  HelpIcon,
+                  {
+                    "aria-label": typeof labelHelpTooltip === "string" ? labelHelpTooltip : void 0
+                  }
+                ) }) : void 0
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          CodeMirrorWrapper,
+          {
+            variant,
+            error: !!error,
+            disabled,
+            readOnly,
+            lineNumbers,
+            className: variant === "filled" ? "codeArea-filled" : "",
+            fullScreen,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                CodeAreaHeader,
+                {
+                  onClickExpand,
+                  copyValue,
+                  disabled,
+                  size: isExpanded ? "medium" : "small"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(InputWrapper, { hasActions: !!copyValue || !!onClickExpand, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                CodeAreaFooter,
+                {
+                  buttonFooterLabelId,
+                  onClickFooter,
+                  disabled,
+                  disabledButtonFooter,
+                  size: "small",
+                  loading: !!saveLoading,
+                  showSnackbar: showSaveSnackbar,
+                  onCloseSnackbar: onCloseSaveSnackbar
+                }
+              )
+            ]
+          }
+        ),
+        helperText && /* @__PURE__ */ jsxRuntime.jsx(material.FormHelperText, { children: helperText })
+      ]
+    }
+  );
+}
+const ErrorWrapper = material.styled(material.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 = material.styled(material.Box)(({ theme }) => ({
+  position: "relative",
+  zIndex: 3,
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1)
+}));
+function CodeAreaDialogError({
+  children,
+  hasDivider
+}) {
+  const theme = material.useTheme();
+  if (!children) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ErrorWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxs(ErrorContent, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ErrorOutline, { htmlColor: theme.palette.error.main }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.FormHelperText, { error: true, children })
+    ] }) }),
+    hasDivider && /* @__PURE__ */ jsxRuntime.jsx(material.Divider, {})
+  ] });
+}
 const sizesHeight = {
   [
     "small"
@@ -3126,7 +3822,7 @@ function DialogHeader({
     children && /* @__PURE__ */ jsxRuntime.jsx(DividerBottom, {})
   ] });
 }
-const Content = material.styled(material.DialogContent, {
+const Content$1 = material.styled(material.DialogContent, {
   shouldForwardProp: (prop) => !["scrollableContent", "withGutter", "withBottomGutter"].includes(prop)
 })(({ theme, scrollableContent, withGutter, withBottomGutter }) => ({
   display: "flex",
@@ -3203,7 +3899,7 @@ function _DialogContent({
     return () => resizeObserver.disconnect();
   }, [contentRef, updateBorders]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Content,
+    Content$1,
     {
       ref: setContentRef,
       onScroll: handleScroll,
@@ -3502,6 +4198,159 @@ function DialogStepper({
     );
   }) }) });
 }
+const Content = material.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__ */ jsxRuntime.jsx(Content, { withGutter, error, withBorder, children });
+}
+function CodeAreaDialogConfirmation({
+  onClose,
+  onCancel,
+  cancelLabelId,
+  cancelButton,
+  closeButton,
+  contentLabelId,
+  titleLabelId,
+  severity = "warning",
+  content
+}) {
+  const intl = reactIntl.useIntl();
+  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  if (!onClose || !onCancel) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogConfirmation,
+    {
+      opened: true,
+      severity,
+      title: intlConfig.formatMessage({
+        id: titleLabelId || "c4r.dialog.confirmation.title"
+      }),
+      actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        onCancel && (cancelButton ? cancelButton : /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: onCancel, children: intlConfig.formatMessage({
+          id: cancelLabelId || "c4r.button.cancel"
+        }) })),
+        onClose && (closeButton ? closeButton : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+    Dialog,
+    {
+      open,
+      fullScreen: true,
+      onClose,
+      "data-testid": dataTestId,
+      "aria-label": ariaLabel,
+      "data-name": "code-area-dialog",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DialogHeader,
+          {
+            title,
+            onClose,
+            closeIcon: !onClickFooter && /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.CloseDiagonallyRight, {})
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(CodeAreaDialogContent, { error, children: /* @__PURE__ */ jsxRuntime.jsx(
+          CodeAreaField,
+          {
+            ...props,
+            disabled,
+            variant: null,
+            isExpanded: true
+          }
+        ) }),
+        showFooter && /* @__PURE__ */ jsxRuntime.jsx(
+          DialogFooter,
+          {
+            ...footerProps,
+            topContent: error && /* @__PURE__ */ jsxRuntime.jsx(CodeAreaDialogError, { hasDivider: !!onClickFooter, children: helperText }),
+            children: !!onClickFooter && /* @__PURE__ */ jsxRuntime.jsx(
+              CodeAreaFooter,
+              {
+                onClickFooter,
+                buttonFooterLabelId,
+                disabled,
+                disabledButtonFooter,
+                withGutter: false,
+                variant: "contained",
+                size: "medium",
+                loading: !!saveLoading,
+                showSnackbar: showSaveSnackbar,
+                onCloseSnackbar: onCloseSaveSnackbar
+              }
+            )
+          }
+        ),
+        showConfirmation && /* @__PURE__ */ jsxRuntime.jsx(
+          CodeAreaDialogConfirmation,
+          {
+            onClose: onCloseConfirm ?? onClose,
+            onCancel: onCancelConfirm,
+            cancelLabelId: "c4r.button.keepEditing"
+          }
+        )
+      ]
+    }
+  );
+}
 exports.TablePaginationActions = TablePaginationActions.TablePaginationActions;
 exports.Typography = TablePaginationActions.Typography;
 exports.Alert = Alert$1.Alert;
@@ -3511,6 +4360,14 @@ exports.AppBar = AppBar;
 exports.Autocomplete = Autocomplete;
 exports.Avatar = Avatar;
 exports.Button = Button;
+exports.CodeAreaDialog = CodeAreaDialog;
+exports.CodeAreaDialogConfirmation = CodeAreaDialogConfirmation;
+exports.CodeAreaDialogContent = CodeAreaDialogContent;
+exports.CodeAreaDialogError = CodeAreaDialogError;
+exports.CodeAreaField = CodeAreaField;
+exports.CodeAreaFooter = CodeAreaFooter;
+exports.CodeAreaHeader = CodeAreaHeader;
+exports.CodeAreaInput = CodeAreaInput;
 exports.CopiableComponent = CopiableComponent;
 exports.CreatableAutocomplete = CreatableAutocomplete;
 exports.DatePicker = DatePicker;
@@ -3536,7 +4393,6 @@ exports.MultipleSelectField = MultipleSelectField;
 exports.PasswordField = PasswordField;
 exports.SelectField = SelectField;
 exports.Snackbar = Snackbar;
-exports.Tag = Tag;
 exports.TimePicker = TimePicker;
 exports.ToggleButtonGroup = ToggleButtonGroup;
 exports.TooltipData = TooltipData;