@grafana/plugin-ui 0.10.10 → 0.11.0

package/dist/cjs/index.cjs

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var ui = require('@grafana/ui');
 var data = require('@grafana/data');
@@ -55,7 +56,11 @@ const QueryEditorRow = (props) => {
   var _a, _b;
   const className = (_a = props.className) != null ? _a : "width-8";
   const noFillEnd = (_b = props.noFillEnd) != null ? _b : false;
-  return /* @__PURE__ */ React__namespace.default.createElement("div", { className: "gf-form" }, props.label && /* @__PURE__ */ React__namespace.default.createElement("label", { className: `gf-form-label query-keyword ${className}` }, props.label), props.children, /* @__PURE__ */ React__namespace.default.createElement("div", { className: "gf-form--grow" }, noFillEnd || /* @__PURE__ */ React__namespace.default.createElement("div", { className: "gf-form-label gf-form-label--grow" })));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gf-form", children: [
+    props.label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: `gf-form-label query-keyword ${className}`, children: props.label }),
+    props.children,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gf-form--grow", children: noFillEnd || /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gf-form-label gf-form-label--grow" }) })
+  ] });
 };
 
 const DEFAULT_DELAY = 275;
@@ -74,20 +79,20 @@ const useDebounce = (value, delay = DEFAULT_DELAY) => {
 
 const DebounceInput = (props) => {
   const { delay, onDebounce, value, ...rest } = props;
-  const [input, setInput] = React__namespace.default.useState(value);
+  const [input, setInput] = React.useState(value);
   const debouncedInput = useDebounce(input, delay);
-  React__namespace.default.useEffect(() => onDebounce(debouncedInput), [debouncedInput]);
-  React__namespace.default.useEffect(() => setInput(value), [value]);
-  return /* @__PURE__ */ React__namespace.default.createElement(ui.Input, { onChange: (ev) => setInput(ev.currentTarget.value), value: input, ...rest });
+  React.useEffect(() => onDebounce(debouncedInput), [debouncedInput]);
+  React.useEffect(() => setInput(value), [value]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { onChange: (ev) => setInput(ev.currentTarget.value), value: input, ...rest });
 };
 
 function Segment(props) {
   const { delay, onDebounce, value, options, ...rest } = props;
-  const [input, setInput] = React__namespace.default.useState(value);
+  const [input, setInput] = React.useState(value);
   const debouncedSegment = useDebounce(input, delay);
   React.useEffect(() => onDebounce(debouncedSegment), [debouncedSegment]);
   React.useEffect(() => setInput(value), [value]);
-  return /* @__PURE__ */ React__namespace.default.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     ui.Segment,
     {
       options,
@@ -253,20 +258,20 @@ const DatePicker = React.memo((props) => {
   if (!isOpen) {
     return null;
   }
-  return /* @__PURE__ */ React__namespace.default.createElement(ui.ClickOutsideWrapper, { useCapture: true, includeButtonPress: false, onClick: onClose }, /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.modal, "data-testid": "date-picker" }, /* @__PURE__ */ React__namespace.default.createElement(Body, { ...props })));
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.ClickOutsideWrapper, { useCapture: true, includeButtonPress: false, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.modal, "data-testid": "date-picker", children: /* @__PURE__ */ jsxRuntime.jsx(Body, { ...props }) }) });
 });
 DatePicker.displayName = "DatePicker";
 const Body = React.memo(({ value, onChange }) => {
   const theme = ui.useTheme2();
   const styles = getBodyStyles(theme);
-  return /* @__PURE__ */ React__namespace.default.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Calendar__default.default,
     {
       className: styles.body,
       tileClassName: styles.title,
       value: value || /* @__PURE__ */ new Date(),
-      nextLabel: /* @__PURE__ */ React__namespace.default.createElement(ui.Icon, { name: "angle-right" }),
-      prevLabel: /* @__PURE__ */ React__namespace.default.createElement(ui.Icon, { name: "angle-left" }),
+      nextLabel: /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { name: "angle-right" }),
+      prevLabel: /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { name: "angle-left" }),
       onChange: (ev) => {
         if (!Array.isArray(ev)) {
           onChange(ev);
@@ -293,26 +298,29 @@ function getStyles$q() {
 const formatDate = (date) => date.toISOString().split("T")[0];
 const DatePickerWithInput = (props) => {
   const { value, onChange, className, ...rest } = props;
-  const [open, setOpen] = React__namespace.default.useState(false);
+  const [open, setOpen] = React.useState(false);
   const styles = getStyles$q();
-  return /* @__PURE__ */ React__namespace.default.createElement(React__namespace.default.Fragment, null, /* @__PURE__ */ React__namespace.default.createElement(
-    ui.Input,
-    {
-      type: "date",
-      placeholder: "Date",
-      value: formatDate(value || /* @__PURE__ */ new Date()),
-      onClick: () => setOpen(true),
-      onChange: () => {
-      },
-      className: css.cx(styles.input, className),
-      ...rest
-    }
-  ), /* @__PURE__ */ React__namespace.default.createElement(DatePicker, { isOpen: open, value, onChange: (ev) => onChange(ev), onClose: () => setOpen(false) }));
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Input,
+      {
+        type: "date",
+        placeholder: "Date",
+        value: formatDate(value || /* @__PURE__ */ new Date()),
+        onClick: () => setOpen(true),
+        onChange: () => {
+        },
+        className: css.cx(styles.input, className),
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(DatePicker, { isOpen: open, value, onChange: (ev) => onChange(ev), onClose: () => setOpen(false) })
+  ] });
 };
 
 const PluginSignatureBadge = ({ status, ...otherProps }) => {
   const display = getSignatureDisplayModel(status);
-  return /* @__PURE__ */ React__namespace.default.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     ui.Badge,
     {
       text: display.text,
@@ -422,7 +430,7 @@ class DataSourcePicker extends React.PureComponent {
     const { error } = this.state;
     const options = this.getDataSourceOptions();
     const value = this.getCurrentValue();
-    return /* @__PURE__ */ React__namespace.default.createElement("div", { "aria-label": e2eSelectors.selectors.components.DataSourcePicker.container }, /* @__PURE__ */ React__namespace.default.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-label": e2eSelectors.selectors.components.DataSourcePicker.container, children: /* @__PURE__ */ jsxRuntime.jsx(
       ui.Select,
       {
         className: "ds-picker select-container",
@@ -441,12 +449,16 @@ class DataSourcePicker extends React.PureComponent {
         invalid: !!error,
         getOptionLabel: (o) => {
           if (o.meta && isUnsignedPluginSignature(o.meta.signature) && o !== value) {
-            return /* @__PURE__ */ React__namespace.default.createElement(ui.HorizontalGroup, { align: "center", justify: "space-between" }, /* @__PURE__ */ React__namespace.default.createElement("span", null, o.label), " ", /* @__PURE__ */ React__namespace.default.createElement(PluginSignatureBadge, { status: o.meta.signature }));
+            return /* @__PURE__ */ jsxRuntime.jsxs(ui.HorizontalGroup, { align: "center", justify: "space-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: o.label }),
+              " ",
+              /* @__PURE__ */ jsxRuntime.jsx(PluginSignatureBadge, { status: o.meta.signature })
+            ] });
           }
           return o.label || "";
         }
       }
-    ));
+    ) });
   }
 }
 __publicField$4(DataSourcePicker, "defaultProps", {
@@ -481,100 +493,114 @@ const DataLink = (props) => {
       [field]: event.currentTarget.value
     });
   };
-  return /* @__PURE__ */ React__namespace.default.createElement("div", { className }, /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.firstRow + " gf-form" }, /* @__PURE__ */ React__namespace.default.createElement(
-    FormField,
-    {
-      className: styles.nameField,
-      labelWidth: 6,
-      inputWidth: null,
-      label: "Field",
-      type: "text",
-      value: value.field,
-      tooltip: "Can be exact field name or a regex pattern that will match on the field name.",
-      onChange: handleChange("field")
-    }
-  ), /* @__PURE__ */ React__namespace.default.createElement(
-    ui.Button,
-    {
-      variant: "destructive",
-      title: "Remove field",
-      icon: "times",
-      onClick: (event) => {
-        event.preventDefault();
-        onDelete();
-      }
-    }
-  )), /* @__PURE__ */ React__namespace.default.createElement("div", { className: "gf-form" }, /* @__PURE__ */ React__namespace.default.createElement(
-    FormField,
-    {
-      className: styles.nameField,
-      inputWidth: null,
-      label: "Label",
-      type: "text",
-      value: value.label,
-      onChange: handleChange("label"),
-      tooltip: "Use to provide a meaningful label to the data matched in the regex"
-    }
-  ), /* @__PURE__ */ React__namespace.default.createElement(
-    FormField,
-    {
-      className: styles.regexField,
-      inputWidth: null,
-      label: "Regex",
-      type: "text",
-      value: value.matcherRegex,
-      onChange: handleChange("matcherRegex"),
-      tooltip: "Use to parse and capture some part of the log message. You can use the captured groups in the template."
-    }
-  )), /* @__PURE__ */ React__namespace.default.createElement("div", { className: "gf-form" }, /* @__PURE__ */ React__namespace.default.createElement(
-    FormField,
-    {
-      label: showInternalLink ? "Query" : "URL",
-      labelWidth: 6,
-      inputEl: /* @__PURE__ */ React__namespace.default.createElement(
-        ui.DataLinkInput,
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.firstRow + " gf-form", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormField,
         {
-          placeholder: showInternalLink ? "${__value.raw}" : "http://example.com/${__value.raw}",
-          value: value.url || "",
-          onChange: (newValue) => onChange({
-            ...value,
-            url: newValue
-          }),
-          suggestions
+          className: styles.nameField,
+          labelWidth: 6,
+          inputWidth: null,
+          label: "Field",
+          type: "text",
+          value: value.field,
+          tooltip: "Can be exact field name or a regex pattern that will match on the field name.",
+          onChange: handleChange("field")
         }
       ),
-      className: css.css`
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Button,
+        {
+          variant: "destructive",
+          title: "Remove field",
+          icon: "times",
+          onClick: (event) => {
+            event.preventDefault();
+            onDelete();
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gf-form", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormField,
+        {
+          className: styles.nameField,
+          inputWidth: null,
+          label: "Label",
+          type: "text",
+          value: value.label,
+          onChange: handleChange("label"),
+          tooltip: "Use to provide a meaningful label to the data matched in the regex"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormField,
+        {
+          className: styles.regexField,
+          inputWidth: null,
+          label: "Regex",
+          type: "text",
+          value: value.matcherRegex,
+          onChange: handleChange("matcherRegex"),
+          tooltip: "Use to parse and capture some part of the log message. You can use the captured groups in the template."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gf-form", children: /* @__PURE__ */ jsxRuntime.jsx(
+      FormField,
+      {
+        label: showInternalLink ? "Query" : "URL",
+        labelWidth: 6,
+        inputEl: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.DataLinkInput,
+          {
+            placeholder: showInternalLink ? "${__value.raw}" : "http://example.com/${__value.raw}",
+            value: value.url || "",
+            onChange: (newValue) => onChange({
+              ...value,
+              url: newValue
+            }),
+            suggestions
+          }
+        ),
+        className: css.css`
             width: 100%;
           `
-    }
-  )), /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.row }, /* @__PURE__ */ React__namespace.default.createElement(
-    Switch,
-    {
-      labelClass: "width-6",
-      label: "Internal link",
-      checked: showInternalLink,
-      onChange: () => {
-        if (showInternalLink) {
-          onChange({
-            ...value,
-            datasourceUid: undefined
-          });
-        }
-        setShowInternalLink(!showInternalLink);
       }
-    }
-  ), showInternalLink && /* @__PURE__ */ React__namespace.default.createElement(
-    DataSourcePicker,
-    {
-      onChange: (ds) => {
-        onChange({
-          ...value,
-          datasourceUid: ds.uid
-        });
-      },
-      current: value.datasourceUid
-    }
-  )));
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.row, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Switch,
+        {
+          labelClass: "width-6",
+          label: "Internal link",
+          checked: showInternalLink,
+          onChange: () => {
+            if (showInternalLink) {
+              onChange({
+                ...value,
+                datasourceUid: undefined
+              });
+            }
+            setShowInternalLink(!showInternalLink);
+          }
+        }
+      ),
+      showInternalLink && /* @__PURE__ */ jsxRuntime.jsx(
+        DataSourcePicker,
+        {
+          onChange: (ds) => {
+            onChange({
+              ...value,
+              datasourceUid: ds.uid
+            });
+          },
+          current: value.datasourceUid
+        }
+      )
+    ] })
+  ] });
 };
 function useInternalLink(datasourceUid) {
   const [showInternalLink, setShowInternalLink] = React.useState(!!datasourceUid);
@@ -603,49 +629,56 @@ const DataLinks = (props) => {
   const { value, onChange } = props;
   const theme = ui.useTheme2();
   const styles = getStyles$o(theme);
-  return /* @__PURE__ */ React__namespace.default.createElement(React__namespace.default.Fragment, null, /* @__PURE__ */ React__namespace.default.createElement("h3", { className: "page-heading" }, "Data links"), /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.infoText }, "Add links to existing fields. Links will be shown in log row details next to the field value."), /* @__PURE__ */ React__namespace.default.createElement("div", { className: "gf-form-group" }, value && value.map((field, index) => {
-    return /* @__PURE__ */ React__namespace.default.createElement(
-      DataLink,
-      {
-        className: styles.dataLink,
-        key: index,
-        value: field,
-        onChange: (newField) => {
-          const newDataLinks = [...value];
-          newDataLinks.splice(index, 1, newField);
-          onChange(newDataLinks);
-        },
-        onDelete: () => {
-          const newDataLinks = [...value];
-          newDataLinks.splice(index, 1);
-          onChange(newDataLinks);
-        },
-        suggestions: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "page-heading", children: "Data links" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.infoText, children: "Add links to existing fields. Links will be shown in log row details next to the field value." }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gf-form-group", children: [
+      value && value.map((field, index) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          DataLink,
           {
-            value: data.DataLinkBuiltInVars.valueRaw,
-            label: "Raw value",
-            documentation: "Raw value of the field",
-            origin: data.VariableOrigin.Value
-          }
-        ]
-      }
-    );
-  }), /* @__PURE__ */ React__namespace.default.createElement("div", null, /* @__PURE__ */ React__namespace.default.createElement(
-    ui.Button,
-    {
-      variant: "secondary",
-      className: css.css`
+            className: styles.dataLink,
+            value: field,
+            onChange: (newField) => {
+              const newDataLinks = [...value];
+              newDataLinks.splice(index, 1, newField);
+              onChange(newDataLinks);
+            },
+            onDelete: () => {
+              const newDataLinks = [...value];
+              newDataLinks.splice(index, 1);
+              onChange(newDataLinks);
+            },
+            suggestions: [
+              {
+                value: data.DataLinkBuiltInVars.valueRaw,
+                label: "Raw value",
+                documentation: "Raw value of the field",
+                origin: data.VariableOrigin.Value
+              }
+            ]
+          },
+          index
+        );
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Button,
+        {
+          variant: "secondary",
+          className: css.css`
               margin-right: 10px;
             `,
-      icon: "plus",
-      onClick: (event) => {
-        event.preventDefault();
-        const newDataLinks = [...value || [], { field: "", label: "", matcherRegex: "", url: "" }];
-        onChange(newDataLinks);
-      }
-    },
-    "Add"
-  ))));
+          icon: "plus",
+          onClick: (event) => {
+            event.preventDefault();
+            const newDataLinks = [...value || [], { field: "", label: "", matcherRegex: "", url: "" }];
+            onChange(newDataLinks);
+          },
+          children: "Add"
+        }
+      ) })
+    ] })
+  ] });
 };
 
 var QueryEditorPropertyType = /* @__PURE__ */ ((QueryEditorPropertyType2) => {
@@ -2930,39 +2963,42 @@ const SQLEditor = ({
     stableOnChange && stableOnChange(text, false);
     onBlur && onBlur(text);
   };
-  return /* @__PURE__ */ React__namespace.default.createElement("div", { style: { width } }, /* @__PURE__ */ React__namespace.default.createElement(
-    ui.CodeEditor,
-    {
-      height: height || "240px",
-      width: width ? `${width - 2}px` : undefined,
-      language: id,
-      value: query,
-      onBlur: onSqlBlur,
-      showMiniMap: false,
-      showLineNumbers: true,
-      onEditorDidMount: (editor, m) => {
-        monacoRef.current = editor;
-        editor.onDidChangeModelContent((e) => {
-          const text = editor.getValue();
-          if (stableOnChange) {
-            stableOnChange(text, false);
-          }
-        });
-        editor.addCommand(m.KeyMod.CtrlCmd | m.KeyCode.Enter, () => {
-          const text = editor.getValue();
-          if (stableOnChange) {
-            stableOnChange(text, true);
-          }
-        });
-        editor.onKeyUp((e) => {
-          if (e.keyCode === 84) {
-            editor.trigger(TRIGGER_SUGGEST.id, TRIGGER_SUGGEST.id, {});
-          }
-        });
-        registerLanguageAndSuggestions(m, language, id);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.CodeEditor,
+      {
+        height: height || "240px",
+        width: width ? `${width - 2}px` : undefined,
+        language: id,
+        value: query,
+        onBlur: onSqlBlur,
+        showMiniMap: false,
+        showLineNumbers: true,
+        onEditorDidMount: (editor, m) => {
+          monacoRef.current = editor;
+          editor.onDidChangeModelContent((e) => {
+            const text = editor.getValue();
+            if (stableOnChange) {
+              stableOnChange(text, false);
+            }
+          });
+          editor.addCommand(m.KeyMod.CtrlCmd | m.KeyCode.Enter, () => {
+            const text = editor.getValue();
+            if (stableOnChange) {
+              stableOnChange(text, true);
+            }
+          });
+          editor.onKeyUp((e) => {
+            if (e.keyCode === 84) {
+              editor.trigger(TRIGGER_SUGGEST.id, TRIGGER_SUGGEST.id, {});
+            }
+          });
+          registerLanguageAndSuggestions(m, language, id);
+        }
       }
-    }
-  ), children && children({ formatQuery }));
+    ),
+    children && children({ formatQuery })
+  ] });
 };
 const resolveLanguage = (monaco, languageDefinitionProp) => {
   if ((languageDefinitionProp == null ? undefined : languageDefinitionProp.id) !== STANDARD_SQL_LANGUAGE && !languageDefinitionProp.loader) {
@@ -5480,10 +5516,10 @@ const toOption = (_a = data.toOption) != null ? _a : backWardToOption;
 
 const EditorStack = ({ children, wrap: wrapItems = true, ...props }) => {
   var _a, _b;
-  return /* @__PURE__ */ React__namespace.default.createElement(ui.Stack, { wrap: wrapItems ? "wrap" : undefined, direction: (_a = props.direction) != null ? _a : "row", gap: (_b = props.gap) != null ? _b : 2, ...props }, children);
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { wrap: wrapItems ? "wrap" : undefined, direction: (_a = props.direction) != null ? _a : "row", gap: (_b = props.gap) != null ? _b : 2, ...props, children });
 };
 
-const EditorList = React__namespace.default.forwardRef(function EditorList2({ items, renderItem, onChange }, ref) {
+const EditorList = React.forwardRef(function EditorList2({ items, renderItem, onChange }, ref) {
   const onAddItem = () => {
     const newItems = [...items, {}];
     onChange(newItems);
@@ -5498,16 +5534,19 @@ const EditorList = React__namespace.default.forwardRef(function EditorList2({ it
     newItems.splice(itemIndex, 1);
     onChange(newItems);
   };
-  return /* @__PURE__ */ React__namespace.default.createElement(EditorStack, null, items.map((item, index) => /* @__PURE__ */ React__namespace.default.createElement("div", { key: index }, renderItem(
-    item,
-    (newItem) => onChangeItem(index, newItem),
-    () => onDeleteItem(index)
-  ))), /* @__PURE__ */ React__namespace.default.createElement(ui.Button, { ref, onClick: onAddItem, variant: "secondary", size: "md", icon: "plus", "aria-label": "Add", type: "button" }));
+  return /* @__PURE__ */ jsxRuntime.jsxs(EditorStack, { children: [
+    items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderItem(
+      item,
+      (newItem) => onChangeItem(index, newItem),
+      () => onDeleteItem(index)
+    ) }, index)),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { ref, onClick: onAddItem, variant: "secondary", size: "md", icon: "plus", "aria-label": "Add", type: "button" })
+  ] });
 });
 
 const AccessoryButton = ({ className, ...props }) => {
   const styles = ui.useStyles2(getButtonStyles);
-  return /* @__PURE__ */ React__namespace.default.createElement(ui.Button, { ...props, className: css.cx(className, styles.button) });
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { ...props, className: css.cx(className, styles.button) });
 };
 const getButtonStyles = (theme) => ({
   button: css.css({
@@ -5524,7 +5563,7 @@ const InputGroup = ({ children }) => {
     }
     return child;
   });
-  return /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.root }, modifiedChildren);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.root, children: modifiedChildren });
 };
 const borderPriority = [
   "",
@@ -5585,7 +5624,7 @@ function GroupByRow({ sql, columns, onSqlChange }) {
     },
     [onSqlChange, sql]
   );
-  return /* @__PURE__ */ React__namespace.default.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     EditorList,
     {
       items: sql.groupBy,
@@ -5599,27 +5638,30 @@ function GroupByRow({ sql, columns, onSqlChange }) {
 function makeRenderColumn({ options }) {
   const renderColumn = function(item, onChangeItem, onDeleteItem) {
     var _a;
-    return /* @__PURE__ */ React__namespace.default.createElement(InputGroup, null, /* @__PURE__ */ React__namespace.default.createElement(
-      ui.Select,
-      {
-        value: ((_a = item.property) == null ? undefined : _a.name) ? data.toOption(item.property.name) : null,
-        "aria-label": "Group by",
-        options,
-        menuShouldPortal: true,
-        onChange: ({ value }) => value && onChangeItem(setGroupByField(value))
-      }
-    ), /* @__PURE__ */ React__namespace.default.createElement(AccessoryButton, { "aria-label": "Remove group by column", icon: "times", variant: "secondary", onClick: onDeleteItem }));
+    return /* @__PURE__ */ jsxRuntime.jsxs(InputGroup, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Select,
+        {
+          value: ((_a = item.property) == null ? undefined : _a.name) ? data.toOption(item.property.name) : null,
+          "aria-label": "Group by",
+          options,
+          menuShouldPortal: true,
+          onChange: ({ value }) => value && onChangeItem(setGroupByField(value))
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(AccessoryButton, { "aria-label": "Remove group by column", icon: "times", variant: "secondary", onClick: onDeleteItem })
+    ] });
   };
   return renderColumn;
 }
 
 const EditorFieldGroup = ({ children }) => {
-  return /* @__PURE__ */ React__namespace.default.createElement(EditorStack, { gap: 1 }, children);
+  return /* @__PURE__ */ jsxRuntime.jsx(EditorStack, { gap: 1, children });
 };
 
 const EditorHeader = ({ children }) => {
   const styles = ui.useStyles2(getStyles$m);
-  return /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.root }, children);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.root, children });
 };
 const getStyles$m = (theme) => ({
   root: css.css({
@@ -5636,8 +5678,15 @@ const EditorField$1 = (props) => {
   const { label, optional, tooltip, tooltipInteractive, children, width, ...fieldProps } = props;
   const styles = ui.useStyles2(getStyles$l, width);
   const childInputId = (fieldProps == null ? undefined : fieldProps.htmlFor) || ((_a = ui.ReactUtils) == null ? undefined : _a.getChildId(children));
-  const labelEl = /* @__PURE__ */ React__namespace.default.createElement(React__namespace.default.Fragment, null, /* @__PURE__ */ React__namespace.default.createElement("label", { className: styles.label, htmlFor: childInputId }, label, optional && /* @__PURE__ */ React__namespace.default.createElement("span", { className: styles.optional }, " - optional"), tooltip && /* @__PURE__ */ React__namespace.default.createElement(ui.Tooltip, { placement: "top", content: tooltip, theme: "info", interactive: tooltipInteractive }, /* @__PURE__ */ React__namespace.default.createElement(ui.Icon, { tabIndex: 0, name: "info-circle", size: "sm", className: styles.icon }))), /* @__PURE__ */ React__namespace.default.createElement(ui.Space, { v: 0.5 }));
-  return /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.root }, /* @__PURE__ */ React__namespace.default.createElement(ui.Field, { className: styles.field, label: labelEl, ...fieldProps }, children));
+  const labelEl = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: styles.label, htmlFor: childInputId, children: [
+      label,
+      optional && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.optional, children: " - optional" }),
+      tooltip && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { placement: "top", content: tooltip, theme: "info", interactive: tooltipInteractive, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { tabIndex: 0, name: "info-circle", size: "sm", className: styles.icon }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Space, { v: 0.5 })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.root, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Field, { className: styles.field, label: labelEl, ...fieldProps, children }) });
 };
 const getStyles$l = (theme, width) => {
   return {
@@ -5668,7 +5717,7 @@ const getStyles$l = (theme, width) => {
 
 const EditorRow$1 = ({ children }) => {
   const styles = ui.useStyles2(getStyles$k);
-  return /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.root }, /* @__PURE__ */ React__namespace.default.createElement(EditorStack, { gap: 2 }, children));
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.root, children: /* @__PURE__ */ jsxRuntime.jsx(EditorStack, { gap: 2, children }) });
 };
 const getStyles$k = (theme) => {
   return {
@@ -5681,12 +5730,12 @@ const getStyles$k = (theme) => {
 };
 
 const EditorRows$1 = ({ children }) => {
-  return /* @__PURE__ */ React__namespace.default.createElement(EditorStack, { gap: 0.5, direction: "column" }, children);
+  return /* @__PURE__ */ jsxRuntime.jsx(EditorStack, { gap: 0.5, direction: "column", children });
 };
 
 const EditorSwitch = (props) => {
   const styles = getStyles$j();
-  return /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.switch }, /* @__PURE__ */ React__namespace.default.createElement(ui.Switch, { ...props }));
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.switch, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Switch, { ...props }) });
 };
 const getStyles$j = () => {
   return {
@@ -5699,7 +5748,7 @@ const getStyles$j = () => {
 };
 
 const FlexItem = ({ grow, shrink }) => {
-  return /* @__PURE__ */ React__namespace.default.createElement("div", { style: { display: "block", flexGrow: grow, flexShrink: shrink } });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "block", flexGrow: grow, flexShrink: shrink } });
 };
 
 function getDefaultExportFromCjs (x) {
@@ -5714,17 +5763,24 @@ function InlineSelect({ label: labelProp, ...props }) {
     ValueContainer,
     SingleValue: ValueContainer
   };
-  return /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.root }, labelProp && /* @__PURE__ */ React__namespace.default.createElement("label", { className: styles.label, htmlFor: id }, labelProp, ":", "\xA0"), /* @__PURE__ */ React__namespace.default.createElement(ui.Select, { openMenuOnFocus: true, inputId: id, ...props, components }));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.root, children: [
+    labelProp && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: styles.label, htmlFor: id, children: [
+      labelProp,
+      ":",
+      "\xA0"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Select, { openMenuOnFocus: true, inputId: id, ...props, components })
+  ] });
 }
 const SelectContainer = (props) => {
   const { children } = props;
   const styles = ui.useStyles2(getSelectStyles);
-  return /* @__PURE__ */ React__namespace.default.createElement(ui.SelectContainer, { ...props, className: css.cx(props.className, styles.container) }, children);
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectContainer, { ...props, className: css.cx(props.className, styles.container), children });
 };
 const ValueContainer = (props) => {
   const { className, children } = props;
   const styles = ui.useStyles2(getSelectStyles);
-  return /* @__PURE__ */ React__namespace.default.createElement("div", { className: css.cx(className, styles.valueContainer) }, children);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: css.cx(className, styles.valueContainer), children });
 };
 const getSelectStyles = (theme) => ({
   root: css.css({
@@ -5752,7 +5808,7 @@ const getSelectStyles = (theme) => ({
 const Space = (props) => {
   const theme = ui.useTheme2();
   const styles = getStyles$i(theme, props);
-  return /* @__PURE__ */ React__namespace.default.createElement("span", { className: css.cx(styles.wrapper) });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: css.cx(styles.wrapper) });
 };
 Space.defaultProps = {
   v: 0,
@@ -5785,16 +5841,25 @@ function ConfirmModal({ isOpen, onCancel, onDiscard, onCopy }) {
       (_a = buttonRef.current) == null ? undefined : _a.focus();
     }
   }, [isOpen]);
-  return /* @__PURE__ */ React__namespace.default.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     ui.Modal,
     {
-      title: /* @__PURE__ */ React__namespace.default.createElement("div", { className: "modal-header-title" }, /* @__PURE__ */ React__namespace.default.createElement(ui.Icon, { name: "exclamation-triangle", size: "lg" }), /* @__PURE__ */ React__namespace.default.createElement("span", { className: "p-l-1" }, "Warning")),
+      title: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "modal-header-title", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { name: "exclamation-triangle", size: "lg" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "p-l-1", children: "Warning" })
+      ] }),
       onDismiss: onCancel,
-      isOpen
-    },
-    /* @__PURE__ */ React__namespace.default.createElement("p", null, "Builder mode does not display changes made in code. The query builder will display the last changes you made in builder mode."),
-    /* @__PURE__ */ React__namespace.default.createElement("p", null, "Do you want to copy your code to the clipboard?"),
-    /* @__PURE__ */ React__namespace.default.createElement(ui.Modal.ButtonRow, null, /* @__PURE__ */ React__namespace.default.createElement(ui.Button, { type: "button", variant: "secondary", onClick: onCancel, fill: "outline" }, "Cancel"), /* @__PURE__ */ React__namespace.default.createElement(ui.Button, { variant: "destructive", type: "button", onClick: onDiscard, ref: buttonRef }, "Discard code and switch"), /* @__PURE__ */ React__namespace.default.createElement(ui.Button, { variant: "primary", onClick: onCopy }, "Copy code and switch"))
+      isOpen,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Builder mode does not display changes made in code. The query builder will display the last changes you made in builder mode." }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Do you want to copy your code to the clipboard?" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Modal.ButtonRow, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { type: "button", variant: "secondary", onClick: onCancel, fill: "outline", children: "Cancel" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "destructive", type: "button", onClick: onDiscard, ref: buttonRef, children: "Discard code and switch" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "primary", onClick: onCopy, children: "Copy code and switch" })
+        ] })
+      ]
+    }
   );
 }
 
@@ -5832,7 +5897,7 @@ const DatasetSelector = ({
       }
     }
   }, [state.value, value, applyDefault, onChange]);
-  return /* @__PURE__ */ React__namespace.default.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     ui.Select,
     {
       inputId,
@@ -5848,20 +5913,128 @@ const DatasetSelector = ({
   );
 };
 
-const TableSelector = ({ db, dataset, value, className, onChange, inputId }) => {
+const CatalogSelector = ({ db, inputId, value, onChange }) => {
+  const [catalogs, setCatalogs] = React.useState([]);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const loadCatalogs = React.useCallback(async () => {
+    if (!db.catalogs) {
+      return;
+    }
+    setIsLoading(true);
+    try {
+      const catalogList = await db.catalogs();
+      const catalogOptions = catalogList.map((catalog) => ({
+        label: catalog,
+        value: catalog
+      }));
+      setCatalogs(catalogOptions);
+    } catch (error) {
+      console.error("Error loading catalogs:", error);
+      setCatalogs([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [db]);
+  React.useEffect(() => {
+    loadCatalogs();
+  }, [db, loadCatalogs]);
+  const handleChange = (selectable) => {
+    onChange((selectable == null ? undefined : selectable.value) || null);
+  };
+  const selectedValue = catalogs.find((catalog) => catalog.value === value) || null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Select,
+    {
+      inputId,
+      options: catalogs,
+      value: selectedValue,
+      onChange: handleChange,
+      isLoading,
+      placeholder: "Select catalog",
+      isClearable: true,
+      allowCustomValue: true,
+      disabled: isLoading,
+      menuShouldPortal: true
+    }
+  );
+};
+
+const SchemaSelector = ({ db, inputId, catalog, value, onChange }) => {
+  const [schemas, setSchemas] = React.useState([]);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const loadSchemas = React.useCallback(async () => {
+    if (!db.schemas || !catalog) {
+      setSchemas([]);
+      return;
+    }
+    setIsLoading(true);
+    try {
+      const schemaList = await db.schemas(catalog);
+      const schemaOptions = schemaList.map((schema) => ({
+        label: schema,
+        value: schema
+      }));
+      setSchemas(schemaOptions);
+    } catch (error) {
+      console.error("Error loading schemas:", error);
+      setSchemas([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [db, catalog]);
+  React.useEffect(() => {
+    loadSchemas();
+  }, [db, catalog, loadSchemas]);
+  const handleChange = (selectable) => {
+    onChange((selectable == null ? undefined : selectable.value) || null);
+  };
+  const selectedValue = schemas.find((schema) => schema.value === value) || null;
+  const isDisabled = isLoading || !catalog;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Select,
+    {
+      inputId,
+      options: schemas,
+      value: selectedValue,
+      onChange: handleChange,
+      isLoading,
+      placeholder: "Select schema",
+      isClearable: true,
+      allowCustomValue: true,
+      disabled: isDisabled,
+      menuShouldPortal: true
+    }
+  );
+};
+
+const TableSelector = ({
+  db,
+  dataset,
+  catalog,
+  schema,
+  value,
+  className,
+  onChange,
+  inputId,
+  enableCatalogs
+}) => {
   const state = reactUse.useAsync(async () => {
-    if (!dataset) {
+    if (!dataset && !catalog) {
       return [];
     }
-    const tables = await db.tables(dataset);
+    if (enableCatalogs && (!catalog || !schema)) {
+      return [];
+    }
+    const tables = await db.tables(dataset, catalog, schema);
     return tables.map(data.toOption);
-  }, [dataset]);
-  return /* @__PURE__ */ React__namespace.default.createElement(
+  }, [dataset, catalog, schema, enableCatalogs]);
+  const isDisabled = state.loading || enableCatalogs && (!catalog || !schema);
+  return /* @__PURE__ */ jsxRuntime.jsx(
     ui.Select,
     {
       inputId,
       className,
-      disabled: state.loading,
+      disabled: isDisabled,
       "aria-label": "Table selector",
       value,
       options: state.value,
@@ -5886,7 +6059,7 @@ const RunQueryButton = ({
   if (queryRunning) {
     icon = "fa fa-spinner";
   }
-  const RunButton = /* @__PURE__ */ React__namespace.default.createElement(
+  const RunButton = /* @__PURE__ */ jsxRuntime.jsx(
     ui.Button,
     {
       "aria-label": ariaLabel,
@@ -5895,18 +6068,22 @@ const RunQueryButton = ({
       icon,
       disabled: disabled || queryRunning,
       onClick,
-      "data-testid": dataTestId
-    },
-    "Run query"
+      "data-testid": dataTestId,
+      children: "Run query"
+    }
   );
-  return queryInvalid ? /* @__PURE__ */ React__namespace.default.createElement(
+  return queryInvalid ? /* @__PURE__ */ jsxRuntime.jsx(
     ui.Tooltip,
     {
       theme: "error",
       placement: "top",
-      content: invalidQueryTooltip != null ? invalidQueryTooltip : /* @__PURE__ */ React__namespace.default.createElement(React__namespace.default.Fragment, null, "Your query is invalid. Check below for details. ", /* @__PURE__ */ React__namespace.default.createElement("br", null), "However, you can still run this query.")
-    },
-    RunButton
+      content: invalidQueryTooltip != null ? invalidQueryTooltip : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        "Your query is invalid. Check below for details. ",
+        /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+        "However, you can still run this query."
+      ] }),
+      children: RunButton
+    }
   ) : RunButton;
 };
 
@@ -5918,6 +6095,7 @@ function QueryHeader({
   db,
   defaultDataset,
   enableDatasets,
+  enableCatalogs,
   query,
   queryRowFilter,
   onChange,
@@ -5931,6 +6109,7 @@ function QueryHeader({
   const [showConfirm, setShowConfirm] = React.useState(false);
   const toRawSql = getRawSqlFn(db);
   const htmlId = React.useId();
+  const catalogsEnabled = enableCatalogs != null ? enableCatalogs : db.disableCatalogs === false;
   const onEditorModeChange = React.useCallback(
     (newEditorMode) => {
       if (editorMode === EditorMode.Code) {
@@ -5958,6 +6137,33 @@ function QueryHeader({
     };
     onChange(next);
   };
+  const onCatalogChange = (catalog) => {
+    if (catalog === query.catalog) {
+      return;
+    }
+    const next = {
+      ...query,
+      catalog: catalog || undefined,
+      schema: undefined,
+      table: undefined,
+      sql: undefined,
+      rawSql: ""
+    };
+    onChange(next);
+  };
+  const onSchemaChange = (schema) => {
+    if (schema === query.schema) {
+      return;
+    }
+    const next = {
+      ...query,
+      schema: schema || undefined,
+      table: undefined,
+      sql: undefined,
+      rawSql: ""
+    };
+    onChange(next);
+  };
   const onTableChange = (e) => {
     if (e.value === query.table) {
       return;
@@ -5970,100 +6176,145 @@ function QueryHeader({
     };
     onChange(next);
   };
-  return /* @__PURE__ */ React__namespace.default.createElement(React__namespace.default.Fragment, null, /* @__PURE__ */ React__namespace.default.createElement(EditorHeader, null, /* @__PURE__ */ React__namespace.default.createElement(
-    InlineSelect,
-    {
-      label: "Format",
-      value: query.format,
-      placeholder: "Select format",
-      menuShouldPortal: true,
-      onChange: onFormatChange,
-      options: QUERY_FORMAT_OPTIONS
-    }
-  ), editorMode === EditorMode.Builder && /* @__PURE__ */ React__namespace.default.createElement(React__namespace.default.Fragment, null, /* @__PURE__ */ React__namespace.default.createElement(
-    ui.InlineSwitch,
-    {
-      id: `sql-filter-${htmlId}`,
-      label: "Filter",
-      transparent: true,
-      showLabel: true,
-      value: queryRowFilter.filter,
-      onChange: (ev) => ev.target instanceof HTMLInputElement && onQueryRowChange({ ...queryRowFilter, filter: ev.target.checked })
-    }
-  ), /* @__PURE__ */ React__namespace.default.createElement(
-    ui.InlineSwitch,
-    {
-      id: `sql-group-${htmlId}`,
-      label: "Group",
-      transparent: true,
-      showLabel: true,
-      value: queryRowFilter.group,
-      onChange: (ev) => ev.target instanceof HTMLInputElement && onQueryRowChange({ ...queryRowFilter, group: ev.target.checked })
-    }
-  ), /* @__PURE__ */ React__namespace.default.createElement(
-    ui.InlineSwitch,
-    {
-      id: `sql-order-${htmlId}`,
-      label: "Order",
-      transparent: true,
-      showLabel: true,
-      value: queryRowFilter.order,
-      onChange: (ev) => ev.target instanceof HTMLInputElement && onQueryRowChange({ ...queryRowFilter, order: ev.target.checked })
-    }
-  ), /* @__PURE__ */ React__namespace.default.createElement(
-    ui.InlineSwitch,
-    {
-      id: `sql-preview-${htmlId}`,
-      label: "Preview",
-      transparent: true,
-      showLabel: true,
-      value: queryRowFilter.preview,
-      onChange: (ev) => ev.target instanceof HTMLInputElement && onQueryRowChange({ ...queryRowFilter, preview: ev.target.checked })
-    }
-  )), /* @__PURE__ */ React__namespace.default.createElement(FlexItem, { grow: 1 }), /* @__PURE__ */ React__namespace.default.createElement(RunQueryButton, { queryInvalid: !isQueryRunnable, onClick: () => onRunQuery() }), /* @__PURE__ */ React__namespace.default.createElement(ui.RadioButtonGroup, { options: editorModes$1, size: "sm", value: editorMode, onChange: onEditorModeChange }), /* @__PURE__ */ React__namespace.default.createElement(
-    ConfirmModal,
-    {
-      isOpen: showConfirm,
-      onCopy: () => {
-        setShowConfirm(false);
-        copyToClipboard(query.rawSql);
-        onChange({
-          ...query,
-          rawSql: toRawSql(query),
-          editorMode: EditorMode.Builder
-        });
-      },
-      onDiscard: () => {
-        setShowConfirm(false);
-        onChange({
-          ...query,
-          rawSql: toRawSql(query),
-          editorMode: EditorMode.Builder
-        });
-      },
-      onCancel: () => setShowConfirm(false)
-    }
-  )), editorMode === EditorMode.Builder && /* @__PURE__ */ React__namespace.default.createElement(React__namespace.default.Fragment, null, /* @__PURE__ */ React__namespace.default.createElement(Space, { v: 0.5 }), /* @__PURE__ */ React__namespace.default.createElement(EditorRow$1, null, enableDatasets === true && /* @__PURE__ */ React__namespace.default.createElement(EditorField$1, { label: labels.get("dataset") || "Dataset", width: 25 }, /* @__PURE__ */ React__namespace.default.createElement(
-    DatasetSelector,
-    {
-      db,
-      inputId: `sql-dataset-${htmlId}`,
-      dataset: defaultDataset,
-      value: query.dataset === undefined ? null : query.dataset,
-      onChange: onDatasetChange
-    }
-  )), /* @__PURE__ */ React__namespace.default.createElement(EditorField$1, { label: "Table", width: 25 }, /* @__PURE__ */ React__namespace.default.createElement(
-    TableSelector,
-    {
-      db,
-      inputId: `sql-table-${htmlId}`,
-      dataset: query.dataset || defaultDataset,
-      query,
-      value: query.table === undefined ? null : query.table,
-      onChange: onTableChange,
-      applyDefault: true
-    }
-  )))));
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(EditorHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InlineSelect,
+        {
+          label: "Format",
+          value: query.format,
+          placeholder: "Select format",
+          menuShouldPortal: true,
+          onChange: onFormatChange,
+          options: QUERY_FORMAT_OPTIONS
+        }
+      ),
+      editorMode === EditorMode.Builder && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.InlineSwitch,
+          {
+            id: `sql-filter-${htmlId}`,
+            label: "Filter",
+            transparent: true,
+            showLabel: true,
+            value: queryRowFilter.filter,
+            onChange: (ev) => ev.target instanceof HTMLInputElement && onQueryRowChange({ ...queryRowFilter, filter: ev.target.checked })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.InlineSwitch,
+          {
+            id: `sql-group-${htmlId}`,
+            label: "Group",
+            transparent: true,
+            showLabel: true,
+            value: queryRowFilter.group,
+            onChange: (ev) => ev.target instanceof HTMLInputElement && onQueryRowChange({ ...queryRowFilter, group: ev.target.checked })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.InlineSwitch,
+          {
+            id: `sql-order-${htmlId}`,
+            label: "Order",
+            transparent: true,
+            showLabel: true,
+            value: queryRowFilter.order,
+            onChange: (ev) => ev.target instanceof HTMLInputElement && onQueryRowChange({ ...queryRowFilter, order: ev.target.checked })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.InlineSwitch,
+          {
+            id: `sql-preview-${htmlId}`,
+            label: "Preview",
+            transparent: true,
+            showLabel: true,
+            value: queryRowFilter.preview,
+            onChange: (ev) => ev.target instanceof HTMLInputElement && onQueryRowChange({ ...queryRowFilter, preview: ev.target.checked })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(FlexItem, { grow: 1 }),
+      /* @__PURE__ */ jsxRuntime.jsx(RunQueryButton, { queryInvalid: !isQueryRunnable, onClick: () => onRunQuery() }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.RadioButtonGroup, { options: editorModes$1, size: "sm", value: editorMode, onChange: onEditorModeChange }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ConfirmModal,
+        {
+          isOpen: showConfirm,
+          onCopy: () => {
+            setShowConfirm(false);
+            copyToClipboard(query.rawSql);
+            onChange({
+              ...query,
+              rawSql: toRawSql(query),
+              editorMode: EditorMode.Builder
+            });
+          },
+          onDiscard: () => {
+            setShowConfirm(false);
+            onChange({
+              ...query,
+              rawSql: toRawSql(query),
+              editorMode: EditorMode.Builder
+            });
+          },
+          onCancel: () => setShowConfirm(false)
+        }
+      )
+    ] }),
+    editorMode === EditorMode.Builder && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Space, { v: 0.5 }),
+      /* @__PURE__ */ jsxRuntime.jsxs(EditorRow$1, { children: [
+        enableDatasets === true && !catalogsEnabled && /* @__PURE__ */ jsxRuntime.jsx(EditorField$1, { label: labels.get("dataset") || "Dataset", width: 25, children: /* @__PURE__ */ jsxRuntime.jsx(
+          DatasetSelector,
+          {
+            db,
+            inputId: `sql-dataset-${htmlId}`,
+            dataset: defaultDataset,
+            value: query.dataset === undefined ? null : query.dataset,
+            onChange: onDatasetChange
+          }
+        ) }),
+        catalogsEnabled && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(EditorField$1, { label: labels.get("catalog") || "Catalog", width: 25, children: /* @__PURE__ */ jsxRuntime.jsx(
+            CatalogSelector,
+            {
+              db,
+              inputId: `sql-catalog-${htmlId}`,
+              value: query.catalog === undefined ? null : query.catalog,
+              onChange: onCatalogChange
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(EditorField$1, { label: labels.get("schema") || "Schema", width: 25, children: /* @__PURE__ */ jsxRuntime.jsx(
+            SchemaSelector,
+            {
+              db,
+              inputId: `sql-schema-${htmlId}`,
+              catalog: query.catalog,
+              value: query.schema === undefined ? null : query.schema,
+              onChange: onSchemaChange
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(EditorField$1, { label: "Table", width: 25, children: /* @__PURE__ */ jsxRuntime.jsx(
+          TableSelector,
+          {
+            db,
+            inputId: `sql-table-${htmlId}`,
+            dataset: catalogsEnabled ? undefined : query.dataset || defaultDataset,
+            catalog: catalogsEnabled ? query.catalog : undefined,
+            schema: catalogsEnabled ? query.schema : undefined,
+            query,
+            value: query.table === undefined ? null : query.table,
+            onChange: onTableChange,
+            enableCatalogs: catalogsEnabled,
+            applyDefault: true
+          }
+        ) })
+      ] })
+    ] })
+  ] });
 }
 
 function formatSQL(q) {
@@ -6088,16 +6339,16 @@ function QueryEditorRaw({ children, onChange, query, width, height, completionPr
     },
     [onChange]
   );
-  return /* @__PURE__ */ React__namespace.default.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     SQLEditor,
     {
       width,
       height,
       query: query.rawSql,
       onChange: onRawQueryChange,
-      language: { id: "sql", completionProvider, formatter: formatSQL }
-    },
-    children
+      language: { id: "sql", completionProvider, formatter: formatSQL },
+      children
+    }
   );
 }
 
@@ -6154,7 +6405,23 @@ function QueryValidator({ db, query, onValidate, range }) {
     return null;
   }
   const error = ((_a = state.value) == null ? undefined : _a.error) ? processErrorMessage(state.value.error) : "";
-  return /* @__PURE__ */ React__namespace.default.createElement(React__namespace.default.Fragment, null, state.loading && /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.info }, /* @__PURE__ */ React__namespace.default.createElement(ui.Spinner, { inline: true, size: 12 }), " Validating query..."), !state.loading && state.value && /* @__PURE__ */ React__namespace.default.createElement(React__namespace.default.Fragment, null, /* @__PURE__ */ React__namespace.default.createElement(React__namespace.default.Fragment, null, state.value.isValid && state.value.statistics && /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.valid }, /* @__PURE__ */ React__namespace.default.createElement(ui.Icon, { name: "check" }), " This query will process", " ", /* @__PURE__ */ React__namespace.default.createElement("strong", null, data.formattedValueToString(valueFormatter(state.value.statistics.TotalBytesProcessed))), " ", "when run.")), /* @__PURE__ */ React__namespace.default.createElement(React__namespace.default.Fragment, null, state.value.isError && /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.error }, error))));
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    state.loading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.info, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, { inline: true, size: 12 }),
+      " Validating query..."
+    ] }),
+    !state.loading && state.value && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: state.value.isValid && state.value.statistics && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.valid, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { name: "check" }),
+        " This query will process",
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: data.formattedValueToString(valueFormatter(state.value.statistics.TotalBytesProcessed)) }),
+        " ",
+        "when run."
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: state.value.isError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.error, children: error }) })
+    ] })
+  ] });
 }
 function processErrorMessage(error) {
   const splat = error.split(":");
@@ -6200,24 +6467,31 @@ function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...valida
   if (!showTools && validationResult === undefined) {
     style = { height: 0, padding: 0, visibility: "hidden" };
   }
-  return /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.container, style }, /* @__PURE__ */ React__namespace.default.createElement("div", null, validatorProps.onValidate && /* @__PURE__ */ React__namespace.default.createElement(
-    QueryValidator,
-    {
-      ...validatorProps,
-      onValidate: (result) => {
-        setValidationResult(result);
-        validatorProps.onValidate(result);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container, style, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: validatorProps.onValidate && /* @__PURE__ */ jsxRuntime.jsx(
+      QueryValidator,
+      {
+        ...validatorProps,
+        onValidate: (result) => {
+          setValidationResult(result);
+          validatorProps.onValidate(result);
+        }
       }
-    }
-  )), showTools && /* @__PURE__ */ React__namespace.default.createElement("div", null, /* @__PURE__ */ React__namespace.default.createElement(ui.HorizontalGroup, { spacing: "sm" }, onFormatCode && /* @__PURE__ */ React__namespace.default.createElement(ui.IconButton, { onClick: onFormatCode, name: "brackets-curly", size: "xs", tooltip: "Format query" }), onExpand && /* @__PURE__ */ React__namespace.default.createElement(
-    ui.IconButton,
-    {
-      onClick: () => onExpand(!isExpanded),
-      name: isExpanded ? "angle-up" : "angle-down",
-      size: "xs",
-      tooltip: isExpanded ? "Collapse editor" : "Expand editor"
-    }
-  ), /* @__PURE__ */ React__namespace.default.createElement(ui.Tooltip, { content: "Hit CTRL/CMD+Return to run query" }, /* @__PURE__ */ React__namespace.default.createElement(ui.Icon, { className: styles.hint, name: "keyboard" })))));
+    ) }),
+    showTools && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.HorizontalGroup, { spacing: "sm", children: [
+      onFormatCode && /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { onClick: onFormatCode, name: "brackets-curly", size: "xs", tooltip: "Format query" }),
+      onExpand && /* @__PURE__ */ jsxRuntime.jsx(
+        ui.IconButton,
+        {
+          onClick: () => onExpand(!isExpanded),
+          name: isExpanded ? "angle-up" : "angle-down",
+          size: "xs",
+          tooltip: isExpanded ? "Collapse editor" : "Expand editor"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: "Hit CTRL/CMD+Return to run query", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { className: styles.hint, name: "keyboard" }) })
+    ] }) })
+  ] });
 }
 
 function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidate, range }) {
@@ -6228,39 +6502,39 @@ function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidat
   const [editorRef, editorMeasure] = reactUse.useMeasure();
   const completionProvider = React.useMemo(() => db.getSqlCompletionProvider(), [db]);
   const renderQueryEditor = (width, height) => {
-    return /* @__PURE__ */ React__namespace.default.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       QueryEditorRaw,
       {
         completionProvider,
         query,
         width,
         height: height ? height - toolboxMeasure.height : undefined,
-        onChange
-      },
-      ({ formatQuery }) => {
-        return /* @__PURE__ */ React__namespace.default.createElement("div", { ref: toolboxRef }, /* @__PURE__ */ React__namespace.default.createElement(
-          QueryToolbox,
-          {
-            db,
-            query: queryToValidate,
-            onValidate,
-            onFormatCode: formatQuery,
-            showTools: true,
-            range,
-            onExpand: setIsExpanded,
-            isExpanded
-          }
-        ));
+        onChange,
+        children: ({ formatQuery }) => {
+          return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: toolboxRef, children: /* @__PURE__ */ jsxRuntime.jsx(
+            QueryToolbox,
+            {
+              db,
+              query: queryToValidate,
+              onValidate,
+              onFormatCode: formatQuery,
+              showTools: true,
+              range,
+              onExpand: setIsExpanded,
+              isExpanded
+            }
+          ) });
+        }
       }
     );
   };
   const renderEditor = (standalone = false) => {
-    return standalone ? /* @__PURE__ */ React__namespace.default.createElement(AutoSizer__default.default, null, ({ width, height }) => {
+    return standalone ? /* @__PURE__ */ jsxRuntime.jsx(AutoSizer__default.default, { children: ({ width, height }) => {
       return renderQueryEditor(width, height);
-    }) : /* @__PURE__ */ React__namespace.default.createElement("div", { ref: editorRef }, renderQueryEditor());
+    } }) : /* @__PURE__ */ jsxRuntime.jsx("div", { ref: editorRef, children: renderQueryEditor() });
   };
   const renderPlaceholder = () => {
-    return /* @__PURE__ */ React__namespace.default.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         style: {
@@ -6270,26 +6544,29 @@ function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidat
           display: "flex",
           alignItems: "center",
           justifyContent: "center"
-        }
-      },
-      "Editing in expanded code editor"
+        },
+        children: "Editing in expanded code editor"
+      }
     );
   };
-  return /* @__PURE__ */ React__namespace.default.createElement(React__namespace.default.Fragment, null, isExpanded ? renderPlaceholder() : renderEditor(), isExpanded && /* @__PURE__ */ React__namespace.default.createElement(
-    ui.Modal,
-    {
-      title: `Query ${query.refId}`,
-      closeOnBackdropClick: false,
-      closeOnEscape: false,
-      className: styles.modal,
-      contentClassName: styles.modalContent,
-      isOpen: isExpanded,
-      onDismiss: () => {
-        setIsExpanded(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    isExpanded ? renderPlaceholder() : renderEditor(),
+    isExpanded && /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Modal,
+      {
+        title: `Query ${query.refId}`,
+        closeOnBackdropClick: false,
+        closeOnEscape: false,
+        className: styles.modal,
+        contentClassName: styles.modalContent,
+        isOpen: isExpanded,
+        onDismiss: () => {
+          setIsExpanded(false);
+        },
+        children: renderEditor(true)
       }
-    },
-    renderEditor(true)
-  ));
+    )
+  ] });
 }
 function getStyles$h(theme) {
   return {
@@ -6307,8 +6584,11 @@ function getStyles$h(theme) {
 function Preview({ rawSql }) {
   const [_, copyToClipboard] = reactUse.useCopyToClipboard();
   const styles = ui.useStyles2(getStyles$g);
-  const labelElement = /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.labelWrapper }, /* @__PURE__ */ React__namespace.default.createElement("label", { className: styles.label }, "Preview"), /* @__PURE__ */ React__namespace.default.createElement(ui.IconButton, { tooltip: "Copy to clipboard", onClick: () => copyToClipboard(rawSql), name: "copy" }));
-  return /* @__PURE__ */ React__namespace.default.createElement(ui.Field, { label: labelElement, className: styles.grow }, /* @__PURE__ */ React__namespace.default.createElement(
+  const labelElement = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.labelWrapper, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles.label, children: "Preview" }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { tooltip: "Copy to clipboard", onClick: () => copyToClipboard(rawSql), name: "copy" })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Field, { label: labelElement, className: styles.grow, children: /* @__PURE__ */ jsxRuntime.jsx(
     ui.CodeEditor,
     {
       language: "sql",
@@ -6318,7 +6598,7 @@ function Preview({ rawSql }) {
       readOnly: true,
       showMiniMap: false
     }
-  ));
+  ) });
 }
 function getStyles$g(theme) {
   return {
@@ -6343,7 +6623,7 @@ function useSqlChange({ query, onQueryChange, db }) {
 
 function SQLGroupByRow({ fields, query, onQueryChange, db }) {
   const { onSqlChange } = useSqlChange({ query, onQueryChange, db });
-  return /* @__PURE__ */ React__namespace.default.createElement(GroupByRow, { columns: fields, sql: query.sql, onSqlChange });
+  return /* @__PURE__ */ jsxRuntime.jsx(GroupByRow, { columns: fields, sql: query.sql, onSqlChange });
 }
 
 const sortOrderOptions = [
@@ -6383,25 +6663,33 @@ function OrderByRow({ sql, onSqlChange, columns, showOffset }) {
     },
     [onSqlChange, sql]
   );
-  return /* @__PURE__ */ React__namespace.default.createElement(React__namespace.default.Fragment, null, /* @__PURE__ */ React__namespace.default.createElement(EditorField$1, { label: "Order by", width: 25 }, /* @__PURE__ */ React__namespace.default.createElement(InputGroup, null, /* @__PURE__ */ React__namespace.default.createElement(
-    ui.Select,
-    {
-      "aria-label": "Order by",
-      options: columns,
-      value: ((_a = sql.orderBy) == null ? undefined : _a.property.name) ? data.toOption(sql.orderBy.property.name) : null,
-      isClearable: true,
-      menuShouldPortal: true,
-      onChange: onOrderByChange
-    }
-  ), /* @__PURE__ */ React__namespace.default.createElement(Space, { h: 1.5 }), /* @__PURE__ */ React__namespace.default.createElement(
-    ui.RadioButtonGroup,
-    {
-      options: sortOrderOptions,
-      disabled: !((_b = sql == null ? undefined : sql.orderBy) == null ? undefined : _b.property.name),
-      value: sql.orderByDirection,
-      onChange: onSortOrderChange
-    }
-  ))), /* @__PURE__ */ React__namespace.default.createElement(EditorField$1, { label: "Limit", optional: true, width: 25 }, /* @__PURE__ */ React__namespace.default.createElement(ui.Input, { type: "number", min: 0, id: lodash.uniqueId("limit-"), value: sql.limit || "", onChange: onLimitChange })), showOffset && /* @__PURE__ */ React__namespace.default.createElement(EditorField$1, { label: "Offset", optional: true, width: 25 }, /* @__PURE__ */ React__namespace.default.createElement(ui.Input, { type: "number", id: lodash.uniqueId("offset-"), value: sql.offset || "", onChange: onOffsetChange })));
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField$1, { label: "Order by", width: 25, children: /* @__PURE__ */ jsxRuntime.jsxs(InputGroup, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Select,
+        {
+          "aria-label": "Order by",
+          options: columns,
+          value: ((_a = sql.orderBy) == null ? undefined : _a.property.name) ? data.toOption(sql.orderBy.property.name) : null,
+          isClearable: true,
+          menuShouldPortal: true,
+          onChange: onOrderByChange
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(Space, { h: 1.5 }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.RadioButtonGroup,
+        {
+          options: sortOrderOptions,
+          disabled: !((_b = sql == null ? undefined : sql.orderBy) == null ? undefined : _b.property.name),
+          value: sql.orderByDirection,
+          onChange: onSortOrderChange
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField$1, { label: "Limit", optional: true, width: 25, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { type: "number", min: 0, id: lodash.uniqueId("limit-"), value: sql.limit || "", onChange: onLimitChange }) }),
+    showOffset && /* @__PURE__ */ jsxRuntime.jsx(EditorField$1, { label: "Offset", optional: true, width: 25, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { type: "number", id: lodash.uniqueId("offset-"), value: sql.offset || "", onChange: onOffsetChange }) })
+  ] });
 }
 
 function SQLOrderByRow({ fields, query, onQueryChange, db }) {
@@ -6427,7 +6715,7 @@ function SQLOrderByRow({ fields, query, onQueryChange, db }) {
       ...fields
     ];
   }
-  return /* @__PURE__ */ React__namespace.default.createElement(OrderByRow, { sql: query.sql, onSqlChange, columns: columnsWithIndices });
+  return /* @__PURE__ */ jsxRuntime.jsx(OrderByRow, { sql: query.sql, onSqlChange, columns: columnsWithIndices });
 }
 
 const asteriskValue = { label: "*", value: "*" };
@@ -6485,49 +6773,56 @@ function SelectRow({ sql, columns, onSqlChange, functions }) {
     const newSql = { ...sql, columns: [...sql.columns, createFunctionField()] };
     onSqlChange(newSql);
   }, [onSqlChange, sql]);
-  return /* @__PURE__ */ React__namespace.default.createElement(EditorStack, { gap: 2, alignItems: "end", direction: "column" }, (_a = sql.columns) == null ? undefined : _a.map((item, index) => /* @__PURE__ */ React__namespace.default.createElement("div", { key: index }, /* @__PURE__ */ React__namespace.default.createElement(EditorStack, { gap: 2, alignItems: "end" }, /* @__PURE__ */ React__namespace.default.createElement(EditorField$1, { label: "Column", width: 25 }, /* @__PURE__ */ React__namespace.default.createElement(
-    ui.Select,
-    {
-      value: getColumnValue(item),
-      options: columnsWithAsterisk,
-      inputId: `select-column-${index}-${lodash.uniqueId()}`,
-      menuShouldPortal: true,
-      allowCustomValue: true,
-      onChange: onColumnChange(item, index)
-    }
-  )), /* @__PURE__ */ React__namespace.default.createElement(EditorField$1, { label: "Aggregation", optional: true, width: 25 }, /* @__PURE__ */ React__namespace.default.createElement(
-    ui.Select,
-    {
-      value: item.name ? data.toOption(item.name) : null,
-      inputId: `select-aggregation-${index}-${lodash.uniqueId()}`,
-      isClearable: true,
-      menuShouldPortal: true,
-      allowCustomValue: true,
-      options: functions,
-      onChange: onAggregationChange(item, index)
-    }
-  )), /* @__PURE__ */ React__namespace.default.createElement(
-    ui.Button,
-    {
-      "aria-label": "Remove",
-      type: "button",
-      icon: "trash-alt",
-      variant: "secondary",
-      size: "md",
-      onClick: removeColumn(index)
-    }
-  )))), /* @__PURE__ */ React__namespace.default.createElement(
-    ui.Button,
-    {
-      type: "button",
-      onClick: addColumn,
-      variant: "secondary",
-      size: "md",
-      icon: "plus",
-      "aria-label": "Add",
-      className: styles.addButton
-    }
-  ));
+  return /* @__PURE__ */ jsxRuntime.jsxs(EditorStack, { gap: 2, alignItems: "end", direction: "column", children: [
+    (_a = sql.columns) == null ? undefined : _a.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(EditorStack, { gap: 2, alignItems: "end", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(EditorField$1, { label: "Column", width: 25, children: /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Select,
+        {
+          value: getColumnValue(item),
+          options: columnsWithAsterisk,
+          inputId: `select-column-${index}-${lodash.uniqueId()}`,
+          menuShouldPortal: true,
+          allowCustomValue: true,
+          onChange: onColumnChange(item, index)
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(EditorField$1, { label: "Aggregation", optional: true, width: 25, children: /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Select,
+        {
+          value: item.name ? data.toOption(item.name) : null,
+          inputId: `select-aggregation-${index}-${lodash.uniqueId()}`,
+          isClearable: true,
+          menuShouldPortal: true,
+          allowCustomValue: true,
+          options: functions,
+          onChange: onAggregationChange(item, index)
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Button,
+        {
+          "aria-label": "Remove",
+          type: "button",
+          icon: "trash-alt",
+          variant: "secondary",
+          size: "md",
+          onClick: removeColumn(index)
+        }
+      )
+    ] }) }, index)),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Button,
+      {
+        type: "button",
+        onClick: addColumn,
+        variant: "secondary",
+        size: "md",
+        icon: "plus",
+        "aria-label": "Add",
+        className: styles.addButton
+      }
+    )
+  ] });
 }
 const getStyles$f = () => {
   return { addButton: css.css({ alignSelf: "flex-start" }) };
@@ -6546,7 +6841,7 @@ function SQLSelectRow({ fields, query, onQueryChange, db }) {
     const functions = await db.functions();
     return functions.map((f) => data.toOption(f.name));
   }, [db]);
-  return /* @__PURE__ */ React__namespace.default.createElement(SelectRow, { columns: fields, sql: query.sql, functions: state.value, onSqlChange });
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectRow, { columns: fields, sql: query.sql, functions: state.value, onSqlChange });
 }
 
 const buttonLabels = {
@@ -6590,7 +6885,7 @@ const widgets = {
   text: {
     ...ui$1.BasicConfig.widgets.text,
     factory: function TextInput(props) {
-      return /* @__PURE__ */ React__namespace.default.createElement(
+      return /* @__PURE__ */ jsxRuntime.jsx(
         ui.Input,
         {
           value: (props == null ? undefined : props.value) || "",
@@ -6603,7 +6898,7 @@ const widgets = {
   number: {
     ...ui$1.BasicConfig.widgets.number,
     factory: function NumberInput(props) {
-      return /* @__PURE__ */ React__namespace.default.createElement(
+      return /* @__PURE__ */ jsxRuntime.jsx(
         ui.Input,
         {
           value: props == null ? undefined : props.value,
@@ -6617,7 +6912,7 @@ const widgets = {
   datetime: {
     ...ui$1.BasicConfig.widgets.datetime,
     factory: function DateTimeInput(props) {
-      return /* @__PURE__ */ React__namespace.default.createElement(
+      return /* @__PURE__ */ jsxRuntime.jsx(
         ui.DateTimePicker,
         {
           onChange: (e) => {
@@ -6638,7 +6933,7 @@ const settings = {
   addRuleLabel: buttonLabels.add,
   deleteLabel: buttonLabels.remove,
   renderConjs: function Conjunctions(conjProps) {
-    return /* @__PURE__ */ React__namespace.default.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       ui.Select,
       {
         id: conjProps == null ? undefined : conjProps.id,
@@ -6653,7 +6948,7 @@ const settings = {
   renderField: function Field(fieldProps) {
     var _a;
     const fields = ((_a = fieldProps == null ? undefined : fieldProps.config) == null ? undefined : _a.fields) || {};
-    return /* @__PURE__ */ React__namespace.default.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       ui.Select,
       {
         id: fieldProps == null ? undefined : fieldProps.id,
@@ -6677,7 +6972,7 @@ const settings = {
     );
   },
   renderButton: function RAQBButton(buttonProps) {
-    return /* @__PURE__ */ React__namespace.default.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       ui.Button,
       {
         type: "button",
@@ -6690,7 +6985,7 @@ const settings = {
     );
   },
   renderOperator: function Operator(operatorProps) {
-    return /* @__PURE__ */ React__namespace.default.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       ui.Select,
       {
         options: operatorProps == null ? undefined : operatorProps.items.map((op) => ({ label: op.label, value: op.key })),
@@ -6805,13 +7100,13 @@ function WhereRow({ sql, config, onSqlChange }) {
   if (!tree) {
     return null;
   }
-  return /* @__PURE__ */ React__namespace.default.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     ui$1.Query,
     {
       ...configWithDefaults,
       value: tree,
       onChange: onTreeChange,
-      renderBuilder: (props) => /* @__PURE__ */ React__namespace.default.createElement(ui$1.Builder, { ...props })
+      renderBuilder: (props) => /* @__PURE__ */ jsxRuntime.jsx(ui$1.Builder, { ...props })
     }
   );
 }
@@ -6851,16 +7146,16 @@ function SQLWhereRow({ query, fields, onQueryChange, db }) {
     return mapFieldsToTypes(fields);
   }, [fields]);
   const { onSqlChange } = useSqlChange({ query, onQueryChange, db });
-  return /* @__PURE__ */ React__namespace.default.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     WhereRow,
     {
-      key: JSON.stringify(state.value),
       config: { fields: state.value || {} },
       sql: query.sql,
       onSqlChange: (val) => {
         onSqlChange(val);
       }
-    }
+    },
+    JSON.stringify(state.value)
   );
 }
 function mapFieldsToTypes(columns) {
@@ -6877,7 +7172,7 @@ function mapFieldsToTypes(columns) {
 
 const EditorRow = ({ children }) => {
   const styles = ui.useStyles2(getStyles$e);
-  return /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.root }, /* @__PURE__ */ React__namespace.default.createElement(EditorStack, { gap: 2 }, children));
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.root, children: /* @__PURE__ */ jsxRuntime.jsx(EditorStack, { gap: 2, children }) });
 };
 const getStyles$e = (theme) => {
   return {
@@ -6895,8 +7190,15 @@ const EditorField = (props) => {
   const theme = ui.useTheme2();
   const styles = getStyles$d(theme, width);
   const childInputId = (fieldProps == null ? undefined : fieldProps.htmlFor) || ((_a = ui.ReactUtils) == null ? undefined : _a.getChildId(children));
-  const labelEl = /* @__PURE__ */ React__namespace.default.createElement(React__namespace.default.Fragment, null, /* @__PURE__ */ React__namespace.default.createElement("label", { className: styles.label, htmlFor: childInputId }, label, optional && /* @__PURE__ */ React__namespace.default.createElement("span", { className: styles.optional }, " - optional"), tooltip && /* @__PURE__ */ React__namespace.default.createElement(ui.Tooltip, { placement: "top", content: tooltip, theme: "info" }, /* @__PURE__ */ React__namespace.default.createElement(ui.Icon, { name: "info-circle", size: "sm", className: styles.icon }))), /* @__PURE__ */ React__namespace.default.createElement(Space, { v: 0.5 }));
-  return /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.root }, /* @__PURE__ */ React__namespace.default.createElement(ui.Field, { className: styles.field, label: labelEl, ...fieldProps }, children));
+  const labelEl = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: styles.label, htmlFor: childInputId, children: [
+      label,
+      optional && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.optional, children: " - optional" }),
+      tooltip && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { placement: "top", content: tooltip, theme: "info", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { name: "info-circle", size: "sm", className: styles.icon }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(Space, { v: 0.5 })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.root, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Field, { className: styles.field, label: labelEl, ...fieldProps, children }) });
 };
 const getStyles$d = ui.stylesFactory((theme, width) => {
   return {
@@ -6926,7 +7228,7 @@ const getStyles$d = ui.stylesFactory((theme, width) => {
 });
 
 const EditorRows = ({ children }) => {
-  return /* @__PURE__ */ React__namespace.default.createElement(EditorStack, { gap: 0.5, direction: "column" }, children);
+  return /* @__PURE__ */ jsxRuntime.jsx(EditorStack, { gap: 0.5, direction: "column", children });
 };
 
 const VisualEditor = ({ query, db, queryRowFilter, onChange, onValidate, range }) => {
@@ -6934,7 +7236,16 @@ const VisualEditor = ({ query, db, queryRowFilter, onChange, onValidate, range }
     const fields = await db.fields(query);
     return fields;
   }, [db, query.dataset, query.table]);
-  return /* @__PURE__ */ React__namespace.default.createElement(React__namespace.default.Fragment, null, /* @__PURE__ */ React__namespace.default.createElement(EditorRows, null, /* @__PURE__ */ React__namespace.default.createElement(EditorRow, null, /* @__PURE__ */ React__namespace.default.createElement(SQLSelectRow, { fields: state.value || [], query, onQueryChange: onChange, db })), queryRowFilter.filter && /* @__PURE__ */ React__namespace.default.createElement(EditorRow, null, /* @__PURE__ */ React__namespace.default.createElement(EditorField, { label: "Filter by column value", optional: true }, /* @__PURE__ */ React__namespace.default.createElement(SQLWhereRow, { fields: state.value || [], query, onQueryChange: onChange, db }))), queryRowFilter.group && /* @__PURE__ */ React__namespace.default.createElement(EditorRow, null, /* @__PURE__ */ React__namespace.default.createElement(EditorField, { label: "Group by column" }, /* @__PURE__ */ React__namespace.default.createElement(SQLGroupByRow, { fields: state.value || [], query, onQueryChange: onChange, db }))), queryRowFilter.order && /* @__PURE__ */ React__namespace.default.createElement(EditorRow, null, /* @__PURE__ */ React__namespace.default.createElement(SQLOrderByRow, { fields: state.value || [], query, onQueryChange: onChange, db })), queryRowFilter.preview && query.rawSql && /* @__PURE__ */ React__namespace.default.createElement(EditorRow, null, /* @__PURE__ */ React__namespace.default.createElement(Preview, { rawSql: query.rawSql }))), /* @__PURE__ */ React__namespace.default.createElement(QueryToolbox, { db, query, onValidate, range }));
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(EditorRows, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(EditorRow, { children: /* @__PURE__ */ jsxRuntime.jsx(SQLSelectRow, { fields: state.value || [], query, onQueryChange: onChange, db }) }),
+      queryRowFilter.filter && /* @__PURE__ */ jsxRuntime.jsx(EditorRow, { children: /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Filter by column value", optional: true, children: /* @__PURE__ */ jsxRuntime.jsx(SQLWhereRow, { fields: state.value || [], query, onQueryChange: onChange, db }) }) }),
+      queryRowFilter.group && /* @__PURE__ */ jsxRuntime.jsx(EditorRow, { children: /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Group by column", children: /* @__PURE__ */ jsxRuntime.jsx(SQLGroupByRow, { fields: state.value || [], query, onQueryChange: onChange, db }) }) }),
+      queryRowFilter.order && /* @__PURE__ */ jsxRuntime.jsx(EditorRow, { children: /* @__PURE__ */ jsxRuntime.jsx(SQLOrderByRow, { fields: state.value || [], query, onQueryChange: onChange, db }) }),
+      queryRowFilter.preview && query.rawSql && /* @__PURE__ */ jsxRuntime.jsx(EditorRow, { children: /* @__PURE__ */ jsxRuntime.jsx(Preview, { rawSql: query.rawSql }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(QueryToolbox, { db, query, onValidate, range })
+  ] });
 };
 
 const MACRO_NAMES = [
@@ -7169,42 +7480,48 @@ function SqlQueryEditor({ datasource, query, onChange, onRunQuery, range }) {
   if (loading || error) {
     return null;
   }
-  return /* @__PURE__ */ React__namespace.default.createElement(React__namespace.default.Fragment, null, /* @__PURE__ */ React__namespace.default.createElement(
-    QueryHeader,
-    {
-      db,
-      defaultDataset: defaultDataset || "",
-      enableDatasets: !db.disableDatasets,
-      onChange: onQueryHeaderChange,
-      onRunQuery,
-      onQueryRowChange: setQueryRowFilter,
-      queryRowFilter,
-      query: queryWithDefaults,
-      isQueryRunnable,
-      labels: (_g = datasource.getDB(datasource.id)) == null ? undefined : _g.labels
-    }
-  ), /* @__PURE__ */ React__namespace.default.createElement(Space, { v: 0.5 }), queryWithDefaults.editorMode !== EditorMode.Code && /* @__PURE__ */ React__namespace.default.createElement(
-    VisualEditor,
-    {
-      db,
-      query: queryWithDefaults,
-      onChange: (q) => onQueryChange(q, false),
-      queryRowFilter,
-      onValidate: setIsQueryRunnable,
-      range
-    }
-  ), queryWithDefaults.editorMode === EditorMode.Code && /* @__PURE__ */ React__namespace.default.createElement(
-    RawEditor,
-    {
-      db,
-      query: queryWithDefaults,
-      queryToValidate,
-      onChange: onQueryChange,
-      onRunQuery,
-      onValidate: setIsQueryRunnable,
-      range
-    }
-  ));
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      QueryHeader,
+      {
+        db,
+        defaultDataset: defaultDataset || "",
+        enableDatasets: !db.disableDatasets,
+        enableCatalogs: db.disableCatalogs === false,
+        onChange: onQueryHeaderChange,
+        onRunQuery,
+        onQueryRowChange: setQueryRowFilter,
+        queryRowFilter,
+        query: queryWithDefaults,
+        isQueryRunnable,
+        labels: (_g = datasource.getDB(datasource.id)) == null ? undefined : _g.labels
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(Space, { v: 0.5 }),
+    queryWithDefaults.editorMode !== EditorMode.Code && /* @__PURE__ */ jsxRuntime.jsx(
+      VisualEditor,
+      {
+        db,
+        query: queryWithDefaults,
+        onChange: (q) => onQueryChange(q, false),
+        queryRowFilter,
+        onValidate: setIsQueryRunnable,
+        range
+      }
+    ),
+    queryWithDefaults.editorMode === EditorMode.Code && /* @__PURE__ */ jsxRuntime.jsx(
+      RawEditor,
+      {
+        db,
+        query: queryWithDefaults,
+        queryToValidate,
+        onChange: onQueryChange,
+        onRunQuery,
+        onValidate: setIsQueryRunnable,
+        range
+      }
+    )
+  ] });
 }
 const isQueryValid = (q) => {
   return Boolean(q.rawSql);
@@ -7221,31 +7538,35 @@ const SecureSocksProxyToggle = ({ labelWidth = 10, ...props }) => {
       }
     });
   };
-  return runtime.config.secureSocksDSProxyEnabled && /* @__PURE__ */ React__namespace.default.createElement("div", null, /* @__PURE__ */ React__namespace.default.createElement("div", { className: "gf-form" }, /* @__PURE__ */ React__namespace.default.createElement("div", { className: "gf-form gf-form-inline" }, /* @__PURE__ */ React__namespace.default.createElement(
+  return runtime.config.secureSocksDSProxyEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gf-form", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gf-form gf-form-inline", children: /* @__PURE__ */ jsxRuntime.jsx(
     ui.InlineField,
     {
       htmlFor: "secureSocksProxyEnabled",
       label: "Secure Socks Proxy Enabled",
       labelWidth,
-      tooltip: /* @__PURE__ */ React__namespace.default.createElement(React__namespace.default.Fragment, null, "Proxy the datasource connection through the secure socks proxy to a different network. To learn more about configuring the datasource connection proxy,", " ", /* @__PURE__ */ React__namespace.default.createElement(
-        "a",
+      tooltip: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        "Proxy the datasource connection through the secure socks proxy to a different network. To learn more about configuring the datasource connection proxy,",
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "a",
+          {
+            href: "https://grafana.com/docs/grafana/latest/setup-grafana/configure-grafana/proxy/",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: "click here."
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        ui.InlineSwitch,
         {
-          href: "https://grafana.com/docs/grafana/latest/setup-grafana/configure-grafana/proxy/",
-          target: "_blank",
-          rel: "noopener noreferrer"
-        },
-        "click here."
-      ))
-    },
-    /* @__PURE__ */ React__namespace.default.createElement(
-      ui.InlineSwitch,
-      {
-        id: "secureSocksProxyEnabled",
-        value: dataSourceConfig.jsonData.enableSecureSocksProxy,
-        onChange: handleSwitchChange
-      }
-    )
-  ))));
+          id: "secureSocksProxyEnabled",
+          value: dataSourceConfig.jsonData.enableSecureSocksProxy,
+          onChange: handleSwitchChange
+        }
+      )
+    }
+  ) }) }) });
 };
 
 const DataSourceDescription = ({ dataSourceName, docsLink, hasRequiredFields = true, className }) => {
@@ -7271,7 +7592,17 @@ const DataSourceDescription = ({ dataSourceName, docsLink, hasRequiredFields = t
       })
     })
   };
-  return /* @__PURE__ */ React__namespace.default.createElement("div", { className: css.cx(styles.container, className) }, /* @__PURE__ */ React__namespace.default.createElement("p", { className: styles.text }, "Before you can use the ", dataSourceName, " data source, you must configure it below or in the config file. For detailed instructions,", " ", /* @__PURE__ */ React__namespace.default.createElement("a", { href: docsLink, target: "_blank", rel: "noreferrer" }, "view the documentation"), "."), hasRequiredFields && /* @__PURE__ */ React__namespace.default.createElement("p", { className: styles.text }, /* @__PURE__ */ React__namespace.default.createElement("i", null, "Fields marked with * are required")));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: css.cx(styles.container, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: styles.text, children: [
+      "Before you can use the ",
+      dataSourceName,
+      " data source, you must configure it below or in the config file. For detailed instructions,",
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx("a", { href: docsLink, target: "_blank", rel: "noreferrer", children: "view the documentation" }),
+      "."
+    ] }),
+    hasRequiredFields && /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles.text, children: /* @__PURE__ */ jsxRuntime.jsx("i", { children: "Fields marked with * are required" }) })
+  ] });
 };
 
 const GenericConfigSection = ({
@@ -7311,40 +7642,50 @@ const GenericConfigSection = ({
       marginTop: spacing(2)
     })
   };
-  return /* @__PURE__ */ React__namespace.default.createElement("div", { className }, /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.header }, kind === "section" ? /* @__PURE__ */ React__namespace.default.createElement("h3", { className: styles.title }, title) : /* @__PURE__ */ React__namespace.default.createElement("h6", { className: styles.subtitle }, title), isCollapsible && /* @__PURE__ */ React__namespace.default.createElement(
-    ui.IconButton,
-    {
-      name: iconName,
-      onClick: () => setIsOpen(!isOpen),
-      type: "button",
-      size: "xl",
-      "aria-label": collapsibleButtonAriaLabel
-    }
-  )), description && /* @__PURE__ */ React__namespace.default.createElement("p", { className: styles.descriptionText }, description), isOpen && /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.content }, children));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.header, children: [
+      kind === "section" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: styles.title, children: title }) : /* @__PURE__ */ jsxRuntime.jsx("h6", { className: styles.subtitle, children: title }),
+      isCollapsible && /* @__PURE__ */ jsxRuntime.jsx(
+        ui.IconButton,
+        {
+          name: iconName,
+          onClick: () => setIsOpen(!isOpen),
+          type: "button",
+          size: "xl",
+          "aria-label": collapsibleButtonAriaLabel
+        }
+      )
+    ] }),
+    description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles.descriptionText, children: description }),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.content, children })
+  ] });
 };
 
 const ConfigSection = ({ children, ...props }) => {
-  return /* @__PURE__ */ React__namespace.default.createElement(GenericConfigSection, { ...props, kind: "section" }, children);
+  return /* @__PURE__ */ jsxRuntime.jsx(GenericConfigSection, { ...props, kind: "section", children });
 };
 
 const ConfigSubSection = ({ children, ...props }) => {
-  return /* @__PURE__ */ React__namespace.default.createElement(GenericConfigSection, { ...props, kind: "sub-section" }, children);
+  return /* @__PURE__ */ jsxRuntime.jsx(GenericConfigSection, { ...props, kind: "sub-section", children });
 };
 
 function ConfigDescriptionLink(props) {
   const { description, suffix, feature } = props;
   const text = `Learn more about ${feature}`;
   const styles = ui.useStyles2(getStyles$c);
-  return /* @__PURE__ */ React__namespace.default.createElement("span", { className: styles.container }, description, /* @__PURE__ */ React__namespace.default.createElement(
-    "a",
-    {
-      "aria-label": text,
-      href: `https://grafana.com/docs/grafana/next/datasources/${suffix}`,
-      rel: "noreferrer",
-      target: "_blank"
-    },
-    text
-  ));
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.container, children: [
+    description,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        "aria-label": text,
+        href: `https://grafana.com/docs/grafana/next/datasources/${suffix}`,
+        rel: "noreferrer",
+        target: "_blank",
+        children: text
+      }
+    )
+  ] });
 }
 const getStyles$c = (theme) => {
   return {
@@ -7404,59 +7745,62 @@ const BasicAuth = ({
       marginBottom: 0
     })
   };
-  return /* @__PURE__ */ React__namespace.default.createElement(React__namespace.default.Fragment, null, /* @__PURE__ */ React__namespace.default.createElement(
-    ui.InlineField,
-    {
-      className: commonStyles.inlineFieldNoMarginRight,
-      label: userLabel,
-      labelWidth: 24,
-      tooltip: userTooltip,
-      required: true,
-      htmlFor: "basic-auth-user-input",
-      interactive: true,
-      grow: true,
-      disabled: readOnly
-    },
-    /* @__PURE__ */ React__namespace.default.createElement(
-      ui.Input,
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.InlineField,
       {
-        id: "basic-auth-user-input",
-        placeholder: userPlaceholder,
-        value: user,
-        onChange: (e) => onUserChange(e.currentTarget.value),
-        required: true
+        className: commonStyles.inlineFieldNoMarginRight,
+        label: userLabel,
+        labelWidth: 24,
+        tooltip: userTooltip,
+        required: true,
+        htmlFor: "basic-auth-user-input",
+        interactive: true,
+        grow: true,
+        disabled: readOnly,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Input,
+          {
+            id: "basic-auth-user-input",
+            placeholder: userPlaceholder,
+            value: user,
+            onChange: (e) => onUserChange(e.currentTarget.value),
+            required: true
+          }
+        )
       }
-    )
-  ), /* @__PURE__ */ React__namespace.default.createElement(
-    ui.InlineField,
-    {
-      className: css.cx(
-        commonStyles.inlineFieldNoMarginRight,
-        commonStyles.inlineFieldWithSecret,
-        styles.lastInlineField
-      ),
-      label: passwordLabel,
-      labelWidth: 24,
-      tooltip: passwordTooltip,
-      required: true,
-      htmlFor: "basic-auth-password-input",
-      interactive: true,
-      grow: true,
-      disabled: readOnly
-    },
-    /* @__PURE__ */ React__namespace.default.createElement(
-      ui.SecretInput,
-      {
-        id: "basic-auth-password-input",
-        isConfigured: passwordConfigured,
-        onReset: readOnly ? () => {
-        } : onPasswordReset,
-        placeholder: passwordPlaceholder,
-        onChange: (e) => onPasswordChange(e.currentTarget.value),
-        required: true
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.InlineField,
+      {
+        className: css.cx(
+          commonStyles.inlineFieldNoMarginRight,
+          commonStyles.inlineFieldWithSecret,
+          styles.lastInlineField
+        ),
+        label: passwordLabel,
+        labelWidth: 24,
+        tooltip: passwordTooltip,
+        required: true,
+        htmlFor: "basic-auth-password-input",
+        interactive: true,
+        grow: true,
+        disabled: readOnly,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.SecretInput,
+          {
+            id: "basic-auth-password-input",
+            isConfigured: passwordConfigured,
+            onReset: readOnly ? () => {
+            } : onPasswordReset,
+            placeholder: passwordPlaceholder,
+            onChange: (e) => onPasswordChange(e.currentTarget.value),
+            required: true
+          }
+        )
       }
     )
-  ));
+  ] });
 };
 
 const defaultOptions = {
@@ -7548,7 +7892,7 @@ const AuthMethodSettings = ({
   }
   let AuthFieldsComponent = null;
   if (selected === AuthMethod.BasicAuth && basicAuth) {
-    AuthFieldsComponent = /* @__PURE__ */ React__namespace.default.createElement(BasicAuth, { ...basicAuth, readOnly });
+    AuthFieldsComponent = /* @__PURE__ */ jsxRuntime.jsx(BasicAuth, { ...basicAuth, readOnly });
   } else if (selected.startsWith("custom-")) {
     AuthFieldsComponent = (_b = (_a = customMethods == null ? undefined : customMethods.find((m) => m.id === selected)) == null ? undefined : _a.component) != null ? _b : null;
   }
@@ -7566,19 +7910,22 @@ const AuthMethodSettings = ({
       marginTop: spacing(1.5)
     })
   };
-  return /* @__PURE__ */ React__namespace.default.createElement(ConfigSubSection, { title, description }, /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.authMethods }, hasSelect && /* @__PURE__ */ React__namespace.default.createElement(ui.Field, { label: "Authentication method" }, /* @__PURE__ */ React__namespace.default.createElement(
-    ui.Select,
-    {
-      inputId: "auth-method-select",
-      options: preparedOptions,
-      value: selected,
-      onChange: (option) => {
-        setAuthMethodChanged(true);
-        onAuthMethodSelect(option.value);
-      },
-      disabled: readOnly
-    }
-  )), AuthFieldsComponent && /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.selectedMethodFields }, AuthFieldsComponent)));
+  return /* @__PURE__ */ jsxRuntime.jsx(ConfigSubSection, { title, description, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.authMethods, children: [
+    hasSelect && /* @__PURE__ */ jsxRuntime.jsx(ui.Field, { label: "Authentication method", children: /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Select,
+      {
+        inputId: "auth-method-select",
+        options: preparedOptions,
+        value: selected,
+        onChange: (option) => {
+          setAuthMethodChanged(true);
+          onAuthMethodSelect(option.value);
+        },
+        disabled: readOnly
+      }
+    ) }),
+    AuthFieldsComponent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.selectedMethodFields, children: AuthFieldsComponent })
+  ] }) });
 };
 
 const TLSSettingsSection = ({
@@ -7607,7 +7954,13 @@ const TLSSettingsSection = ({
       margin: spacing(1, 0, 2, 3)
     })
   };
-  return /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.container }, /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.checkboxContainer }, /* @__PURE__ */ React__namespace.default.createElement(ui.Checkbox, { value: enabled, label, onChange: () => onToggle(!enabled), disabled: readOnly }), /* @__PURE__ */ React__namespace.default.createElement(ui.Tooltip, { placement: "top", content: tooltipText, interactive: true }, /* @__PURE__ */ React__namespace.default.createElement(ui.Icon, { name: "info-circle", className: styles.infoIcon, size: "sm" }))), enabled && children && /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.content }, children));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.checkboxContainer, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Checkbox, { value: enabled, label, onChange: () => onToggle(!enabled), disabled: readOnly }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { placement: "top", content: tooltipText, interactive: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { name: "info-circle", className: styles.infoIcon, size: "sm" }) })
+    ] }),
+    enabled && children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.content, children })
+  ] });
 };
 
 const SelfSignedCertificate = ({
@@ -7621,42 +7974,42 @@ const SelfSignedCertificate = ({
 }) => {
   var _a;
   const commonStyles = useCommonStyles();
-  return /* @__PURE__ */ React__namespace.default.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     TLSSettingsSection,
     {
       enabled,
       label: "Add self-signed certificate",
       tooltipText: "Add your own Certificate Authority (CA) certificate on top of one generated by the certificate authorities for additional security measures",
       onToggle: (newEnabled) => onToggle(newEnabled),
-      readOnly
-    },
-    /* @__PURE__ */ React__namespace.default.createElement(
-      ui.InlineField,
-      {
-        label: "CA Certificate",
-        labelWidth: 24,
-        tooltip: (_a = tooltips == null ? undefined : tooltips.certificateLabel) != null ? _a : "Your self-signed certificate",
-        required: true,
-        htmlFor: "self-signed-certificate-input",
-        interactive: true,
-        grow: true,
-        className: css.cx(commonStyles.inlineFieldNoMarginRight, commonStyles.inlineFieldWithSecret),
-        disabled: readOnly
-      },
-      /* @__PURE__ */ React__namespace.default.createElement(
-        ui.SecretTextArea,
+      readOnly,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        ui.InlineField,
         {
-          id: "self-signed-certificate-input",
-          isConfigured: certificateConfigured,
-          onChange: (e) => onCertificateChange(e.currentTarget.value),
-          onReset: readOnly ? () => {
-          } : onCertificateReset,
-          placeholder: "Begins with --- BEGIN CERTIFICATE ---",
-          rows: 6,
-          required: true
+          label: "CA Certificate",
+          labelWidth: 24,
+          tooltip: (_a = tooltips == null ? undefined : tooltips.certificateLabel) != null ? _a : "Your self-signed certificate",
+          required: true,
+          htmlFor: "self-signed-certificate-input",
+          interactive: true,
+          grow: true,
+          className: css.cx(commonStyles.inlineFieldNoMarginRight, commonStyles.inlineFieldWithSecret),
+          disabled: readOnly,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            ui.SecretTextArea,
+            {
+              id: "self-signed-certificate-input",
+              isConfigured: certificateConfigured,
+              onChange: (e) => onCertificateChange(e.currentTarget.value),
+              onReset: readOnly ? () => {
+              } : onCertificateReset,
+              placeholder: "Begins with --- BEGIN CERTIFICATE ---",
+              rows: 6,
+              required: true
+            }
+          )
         }
       )
-    )
+    }
   );
 };
 
@@ -7676,98 +8029,100 @@ const TLSClientAuth = ({
 }) => {
   var _a, _b, _c;
   const commonStyles = useCommonStyles();
-  return /* @__PURE__ */ React__namespace.default.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     TLSSettingsSection,
     {
       enabled,
       label: "TLS Client Authentication",
       tooltipText: "Validate using TLS client authentication, in which the server authenticates the client",
       onToggle: (newEnabled) => onToggle(newEnabled),
-      readOnly
-    },
-    /* @__PURE__ */ React__namespace.default.createElement(
-      ui.InlineField,
-      {
-        label: "ServerName",
-        labelWidth: 24,
-        tooltip: (_a = tooltips == null ? undefined : tooltips.serverNameLabel) != null ? _a : "A Servername is used to verify the hostname on the returned certificate",
-        required: true,
-        htmlFor: "client-auth-servername-input",
-        interactive: true,
-        grow: true,
-        className: commonStyles.inlineFieldNoMarginRight,
-        disabled: readOnly
-      },
-      /* @__PURE__ */ React__namespace.default.createElement(
-        ui.Input,
-        {
-          id: "client-auth-servername-input",
-          placeholder: "domain.example.com",
-          value: serverName,
-          onChange: (e) => onServerNameChange(e.currentTarget.value),
-          required: true
-        }
-      )
-    ),
-    /* @__PURE__ */ React__namespace.default.createElement(
-      ui.InlineField,
-      {
-        label: "Client Certificate",
-        labelWidth: 24,
-        tooltip: (_b = tooltips == null ? undefined : tooltips.certificateLabel) != null ? _b : "The client certificate can be generated from a Certificate Authority or be self-signed",
-        required: true,
-        htmlFor: "client-auth-client-certificate-input",
-        interactive: true,
-        grow: true,
-        className: css.cx(commonStyles.inlineFieldNoMarginRight, commonStyles.inlineFieldWithSecret),
-        disabled: readOnly
-      },
-      /* @__PURE__ */ React__namespace.default.createElement(
-        ui.SecretTextArea,
-        {
-          id: "client-auth-client-certificate-input",
-          isConfigured: clientCertificateConfigured,
-          onChange: (e) => onClientCertificateChange(e.currentTarget.value),
-          onReset: readOnly ? () => {
-          } : onClientCertificateReset,
-          placeholder: "Begins with --- BEGIN CERTIFICATE ---",
-          rows: 6,
-          required: true
-        }
-      )
-    ),
-    /* @__PURE__ */ React__namespace.default.createElement(
-      ui.InlineField,
-      {
-        label: "Client Key",
-        labelWidth: 24,
-        tooltip: (_c = tooltips == null ? undefined : tooltips.keyLabel) != null ? _c : "The client key can be generated from a Certificate Authority or be self-signed",
-        required: true,
-        htmlFor: "client-auth-client-key-input",
-        interactive: true,
-        grow: true,
-        className: css.cx(commonStyles.inlineFieldNoMarginRight, commonStyles.inlineFieldWithSecret),
-        disabled: readOnly
-      },
-      /* @__PURE__ */ React__namespace.default.createElement(
-        ui.SecretTextArea,
-        {
-          id: "client-auth-client-key-input",
-          isConfigured: clientKeyConfigured,
-          onChange: (e) => onClientKeyChange(e.currentTarget.value),
-          onReset: readOnly ? () => {
-          } : onClientKeyReset,
-          placeholder: `Begins with --- RSA PRIVATE KEY CERTIFICATE ---`,
-          rows: 6,
-          required: true
-        }
-      )
-    )
+      readOnly,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.InlineField,
+          {
+            label: "ServerName",
+            labelWidth: 24,
+            tooltip: (_a = tooltips == null ? undefined : tooltips.serverNameLabel) != null ? _a : "A Servername is used to verify the hostname on the returned certificate",
+            required: true,
+            htmlFor: "client-auth-servername-input",
+            interactive: true,
+            grow: true,
+            className: commonStyles.inlineFieldNoMarginRight,
+            disabled: readOnly,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Input,
+              {
+                id: "client-auth-servername-input",
+                placeholder: "domain.example.com",
+                value: serverName,
+                onChange: (e) => onServerNameChange(e.currentTarget.value),
+                required: true
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.InlineField,
+          {
+            label: "Client Certificate",
+            labelWidth: 24,
+            tooltip: (_b = tooltips == null ? undefined : tooltips.certificateLabel) != null ? _b : "The client certificate can be generated from a Certificate Authority or be self-signed",
+            required: true,
+            htmlFor: "client-auth-client-certificate-input",
+            interactive: true,
+            grow: true,
+            className: css.cx(commonStyles.inlineFieldNoMarginRight, commonStyles.inlineFieldWithSecret),
+            disabled: readOnly,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              ui.SecretTextArea,
+              {
+                id: "client-auth-client-certificate-input",
+                isConfigured: clientCertificateConfigured,
+                onChange: (e) => onClientCertificateChange(e.currentTarget.value),
+                onReset: readOnly ? () => {
+                } : onClientCertificateReset,
+                placeholder: "Begins with --- BEGIN CERTIFICATE ---",
+                rows: 6,
+                required: true
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.InlineField,
+          {
+            label: "Client Key",
+            labelWidth: 24,
+            tooltip: (_c = tooltips == null ? undefined : tooltips.keyLabel) != null ? _c : "The client key can be generated from a Certificate Authority or be self-signed",
+            required: true,
+            htmlFor: "client-auth-client-key-input",
+            interactive: true,
+            grow: true,
+            className: css.cx(commonStyles.inlineFieldNoMarginRight, commonStyles.inlineFieldWithSecret),
+            disabled: readOnly,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              ui.SecretTextArea,
+              {
+                id: "client-auth-client-key-input",
+                isConfigured: clientKeyConfigured,
+                onChange: (e) => onClientKeyChange(e.currentTarget.value),
+                onReset: readOnly ? () => {
+                } : onClientKeyReset,
+                placeholder: `Begins with --- RSA PRIVATE KEY CERTIFICATE ---`,
+                rows: 6,
+                required: true
+              }
+            )
+          }
+        )
+      ]
+    }
   );
 };
 
 const SkipTLSVerification = ({ enabled, onToggle, readOnly }) => {
-  return /* @__PURE__ */ React__namespace.default.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     TLSSettingsSection,
     {
       enabled,
@@ -7786,16 +8141,18 @@ const TLSSettings = ({ selfSignedCertificate, TLSClientAuth: TLSClientAuth$1, sk
       marginTop: spacing(3)
     })
   };
-  return /* @__PURE__ */ React__namespace.default.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     ConfigSubSection,
     {
       className: styles.container,
       title: "TLS settings",
-      description: "Additional security measures that can be applied on top of authentication"
-    },
-    /* @__PURE__ */ React__namespace.default.createElement(SelfSignedCertificate, { ...selfSignedCertificate, readOnly }),
-    /* @__PURE__ */ React__namespace.default.createElement(TLSClientAuth, { ...TLSClientAuth$1, readOnly }),
-    /* @__PURE__ */ React__namespace.default.createElement(SkipTLSVerification, { ...skipTLSVerification, readOnly })
+      description: "Additional security measures that can be applied on top of authentication",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SelfSignedCertificate, { ...selfSignedCertificate, readOnly }),
+        /* @__PURE__ */ jsxRuntime.jsx(TLSClientAuth, { ...TLSClientAuth$1, readOnly }),
+        /* @__PURE__ */ jsxRuntime.jsx(SkipTLSVerification, { ...skipTLSVerification, readOnly })
+      ]
+    }
   );
 };
 
@@ -7822,65 +8179,69 @@ const CustomHeader = ({ header, onChange, onBlur, onDelete, readOnly }) => {
       margin: `0 0 3px 10px`
     })
   };
-  return /* @__PURE__ */ React__namespace.default.createElement(React__namespace.default.Fragment, null, /* @__PURE__ */ React__namespace.default.createElement(ui.InlineFieldRow, { className: styles.container }, /* @__PURE__ */ React__namespace.default.createElement(
-    ui.InlineField,
-    {
-      label: "Header",
-      labelWidth: 9,
-      grow: true,
-      className: styles.headerNameField,
-      htmlFor: `custom-header-${header.id}-name-input`,
-      disabled: readOnly
-    },
-    /* @__PURE__ */ React__namespace.default.createElement(
-      ui.Input,
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.InlineFieldRow, { className: styles.container, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.InlineField,
       {
-        id: `custom-header-${header.id}-name-input`,
-        placeholder: "X-Custom-Header",
-        value: header.name,
-        width: 12,
-        onChange: (e) => onChange({ ...header, name: e.currentTarget.value }),
-        onBlur,
-        className: styles.input
+        label: "Header",
+        labelWidth: 9,
+        grow: true,
+        className: styles.headerNameField,
+        htmlFor: `custom-header-${header.id}-name-input`,
+        disabled: readOnly,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Input,
+          {
+            id: `custom-header-${header.id}-name-input`,
+            placeholder: "X-Custom-Header",
+            value: header.name,
+            width: 12,
+            onChange: (e) => onChange({ ...header, name: e.currentTarget.value }),
+            onBlur,
+            className: styles.input
+          }
+        )
       }
-    )
-  ), /* @__PURE__ */ React__namespace.default.createElement(
-    ui.InlineField,
-    {
-      label: "Value",
-      labelWidth: 9,
-      grow: true,
-      className: css.cx(commonStyles.inlineFieldWithSecret, styles.headerValueField),
-      htmlFor: `custom-header-${header.id}-value-input`,
-      disabled: readOnly
-    },
-    /* @__PURE__ */ React__namespace.default.createElement(
-      ui.SecretInput,
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.InlineField,
       {
-        id: `custom-header-${header.id}-value-input`,
-        isConfigured: header.configured,
-        placeholder: "Header value",
-        value: header.value,
-        width: 12,
-        onChange: (e) => onChange({ ...header, value: e.currentTarget.value }),
-        onReset: readOnly ? () => {
-        } : () => onChange({ ...header, configured: false, value: "" }),
-        onBlur,
-        className: styles.input
+        label: "Value",
+        labelWidth: 9,
+        grow: true,
+        className: css.cx(commonStyles.inlineFieldWithSecret, styles.headerValueField),
+        htmlFor: `custom-header-${header.id}-value-input`,
+        disabled: readOnly,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.SecretInput,
+          {
+            id: `custom-header-${header.id}-value-input`,
+            isConfigured: header.configured,
+            placeholder: "Header value",
+            value: header.value,
+            width: 12,
+            onChange: (e) => onChange({ ...header, value: e.currentTarget.value }),
+            onReset: readOnly ? () => {
+            } : () => onChange({ ...header, configured: false, value: "" }),
+            onBlur,
+            className: styles.input
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.IconButton,
+      {
+        name: "trash-alt",
+        tooltip: "Remove header",
+        tooltipPlacement: "top",
+        className: styles.removeHeaderBtn,
+        onClick: onDelete,
+        type: "button",
+        disabled: readOnly
       }
     )
-  ), /* @__PURE__ */ React__namespace.default.createElement(
-    ui.IconButton,
-    {
-      name: "trash-alt",
-      tooltip: "Remove header",
-      tooltipPlacement: "top",
-      className: styles.removeHeaderBtn,
-      onClick: onDelete,
-      type: "button",
-      disabled: readOnly
-    }
-  )));
+  ] }) });
 };
 
 const CustomHeaders = ({ headers: headersFromProps, onChange, readOnly }) => {
@@ -7949,27 +8310,29 @@ const CustomHeaders = ({ headers: headersFromProps, onChange, readOnly }) => {
       marginTop: spacing(1.5)
     })
   };
-  return /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.container }, /* @__PURE__ */ React__namespace.default.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.container, children: /* @__PURE__ */ jsxRuntime.jsxs(
     ConfigSubSection,
     {
       title: "HTTP headers",
       description: "Pass along additional context and metadata about the request/response",
       isCollapsible: true,
-      isInitiallyOpen: headers.length > 0
-    },
-    /* @__PURE__ */ React__namespace.default.createElement("div", null, headers.map((header) => /* @__PURE__ */ React__namespace.default.createElement(
-      CustomHeader,
-      {
-        key: header.id,
-        header,
-        onChange: (header2) => onHeaderChange(header2.id, header2),
-        onDelete: () => onHeaderDelete(header.id),
-        onBlur,
-        readOnly
-      }
-    ))),
-    /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.addHeaderButton }, /* @__PURE__ */ React__namespace.default.createElement(ui.Button, { icon: "plus", variant: "secondary", fill: "outline", onClick: onHeaderAdd, disabled: readOnly }, headers.length === 0 ? "Add header" : "Add another header"))
-  ));
+      isInitiallyOpen: headers.length > 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(
+          CustomHeader,
+          {
+            header,
+            onChange: (header2) => onHeaderChange(header2.id, header2),
+            onDelete: () => onHeaderDelete(header.id),
+            onBlur,
+            readOnly
+          },
+          header.id
+        )) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.addHeaderButton, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { icon: "plus", variant: "secondary", fill: "outline", onClick: onHeaderAdd, disabled: readOnly, children: headers.length === 0 ? "Add header" : "Add another header" }) })
+      ]
+    }
+  ) });
 };
 function uniqueId() {
   return Math.random().toString(16).slice(2);
@@ -7992,19 +8355,23 @@ const Auth = ({
       maxWidth: 578
     })
   };
-  return /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.container }, /* @__PURE__ */ React__namespace.default.createElement(ConfigSection, { title: "Authentication" }, /* @__PURE__ */ React__namespace.default.createElement(
-    AuthMethodSettings,
-    {
-      selectedMethod,
-      mostCommonMethod,
-      customMethods,
-      visibleMethods,
-      defaultOptionsOverrides,
-      onAuthMethodSelect,
-      basicAuth,
-      readOnly
-    }
-  ), TLS && /* @__PURE__ */ React__namespace.default.createElement(TLSSettings, { ...TLS, readOnly }), customHeaders && /* @__PURE__ */ React__namespace.default.createElement(CustomHeaders, { ...customHeaders, readOnly })));
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.container, children: /* @__PURE__ */ jsxRuntime.jsxs(ConfigSection, { title: "Authentication", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AuthMethodSettings,
+      {
+        selectedMethod,
+        mostCommonMethod,
+        customMethods,
+        visibleMethods,
+        defaultOptionsOverrides,
+        onAuthMethodSelect,
+        basicAuth,
+        readOnly
+      }
+    ),
+    TLS && /* @__PURE__ */ jsxRuntime.jsx(TLSSettings, { ...TLS, readOnly }),
+    customHeaders && /* @__PURE__ */ jsxRuntime.jsx(CustomHeaders, { ...customHeaders, readOnly })
+  ] }) });
 };
 
 const headerNamePrefix = "httpHeaderName";
@@ -8213,34 +8580,38 @@ const ConnectionSettings = ({
       maxWidth: 578
     })
   };
-  return /* @__PURE__ */ React__namespace.default.createElement(React__namespace.default.Fragment, null, /* @__PURE__ */ React__namespace.default.createElement(ConfigSection, { title: "Connection", description, className: css.cx(styles.container, className) }, /* @__PURE__ */ React__namespace.default.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(ConfigSection, { title: "Connection", description, className: css.cx(styles.container, className), children: /* @__PURE__ */ jsxRuntime.jsx(
     ui.InlineField,
     {
       htmlFor: "connection-url",
       label: urlLabel || "URL",
       labelWidth: 24,
-      tooltip: urlTooltip || /* @__PURE__ */ React__namespace.default.createElement(React__namespace.default.Fragment, null, "Specify a complete HTTP URL", /* @__PURE__ */ React__namespace.default.createElement("br", null), "(for example https://example.com:8080)"),
+      tooltip: urlTooltip || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        "Specify a complete HTTP URL",
+        /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+        "(for example https://example.com:8080)"
+      ] }),
       grow: true,
       disabled: config.readOnly,
       required: true,
       invalid: !isValidUrl && !config.readOnly,
       error: isValidUrl ? "" : "Please enter a valid URL",
-      interactive: true
-    },
-    /* @__PURE__ */ React__namespace.default.createElement(
-      ui.Input,
-      {
-        id: "connection-url",
-        "aria-label": "Data source connection URL",
-        onChange: (event) => onChange({
-          ...config,
-          url: event.currentTarget.value
-        }),
-        value: config.url || "",
-        placeholder: urlPlaceholder || "URL"
-      }
-    )
-  )));
+      interactive: true,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Input,
+        {
+          id: "connection-url",
+          "aria-label": "Data source connection URL",
+          onChange: (event) => onChange({
+            ...config,
+            url: event.currentTarget.value
+          }),
+          value: config.url || "",
+          placeholder: urlPlaceholder || "URL"
+        }
+      )
+    }
+  ) }) });
 };
 
 const AdvancedHttpSettings = ({
@@ -8271,48 +8642,51 @@ const AdvancedHttpSettings = ({
       maxWidth: 578
     })
   };
-  return /* @__PURE__ */ React__namespace.default.createElement(ConfigSubSection, { title: "Advanced HTTP settings", className: css.cx(styles.container, className) }, /* @__PURE__ */ React__namespace.default.createElement(
-    ui.InlineField,
-    {
-      htmlFor: "advanced-http-cookies",
-      label: "Allowed cookies",
-      labelWidth: 24,
-      tooltip: "Grafana proxy deletes forwarded cookies by default. Specify cookies by name that should be forwarded to the data source.",
-      disabled: config.readOnly,
-      grow: true
-    },
-    /* @__PURE__ */ React__namespace.default.createElement(
-      ui.TagsInput,
+  return /* @__PURE__ */ jsxRuntime.jsxs(ConfigSubSection, { title: "Advanced HTTP settings", className: css.cx(styles.container, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.InlineField,
       {
-        id: "advanced-http-cookies",
-        placeholder: "New cookie (hit enter to add)",
-        tags: config.jsonData.keepCookies,
-        onChange: onCookiesChange
+        htmlFor: "advanced-http-cookies",
+        label: "Allowed cookies",
+        labelWidth: 24,
+        tooltip: "Grafana proxy deletes forwarded cookies by default. Specify cookies by name that should be forwarded to the data source.",
+        disabled: config.readOnly,
+        grow: true,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.TagsInput,
+          {
+            id: "advanced-http-cookies",
+            placeholder: "New cookie (hit enter to add)",
+            tags: config.jsonData.keepCookies,
+            onChange: onCookiesChange
+          }
+        )
       }
-    )
-  ), /* @__PURE__ */ React__namespace.default.createElement(
-    ui.InlineField,
-    {
-      htmlFor: "advanced-http-timeout",
-      label: "Timeout",
-      labelWidth: 24,
-      tooltip: "HTTP request timeout in seconds",
-      disabled: config.readOnly,
-      grow: true
-    },
-    /* @__PURE__ */ React__namespace.default.createElement(
-      ui.Input,
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.InlineField,
       {
-        id: "advanced-http-timeout",
-        type: "number",
-        min: 0,
-        placeholder: "Timeout in seconds",
-        "aria-label": "Timeout in seconds",
-        value: config.jsonData.timeout,
-        onChange: onTimeoutChange
+        htmlFor: "advanced-http-timeout",
+        label: "Timeout",
+        labelWidth: 24,
+        tooltip: "HTTP request timeout in seconds",
+        disabled: config.readOnly,
+        grow: true,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Input,
+          {
+            id: "advanced-http-timeout",
+            type: "number",
+            min: 0,
+            placeholder: "Timeout in seconds",
+            "aria-label": "Timeout in seconds",
+            value: config.jsonData.timeout,
+            onChange: onTimeoutChange
+          }
+        )
       }
     )
-  ));
+  ] });
 };
 
 var __defProp$2 = Object.defineProperty;
@@ -8338,43 +8712,47 @@ const getCustomHeaderRowStyles = ui.stylesFactory(() => {
 });
 const CustomHeaderRow = ({ header, onBlur, onChange, onRemove, onReset }) => {
   const styles = getCustomHeaderRowStyles();
-  return /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.layout }, /* @__PURE__ */ React__namespace.default.createElement(
-    ui.LegacyForms.FormField,
-    {
-      label: "Header",
-      name: "name",
-      placeholder: "X-Custom-Header",
-      labelWidth: 5,
-      value: header.name || "",
-      onChange: (e) => onChange({ ...header, name: e.target.value }),
-      onBlur
-    }
-  ), /* @__PURE__ */ React__namespace.default.createElement(
-    ui.LegacyForms.SecretFormField,
-    {
-      label: "Value",
-      "aria-label": "Value",
-      name: "value",
-      isConfigured: header.configured,
-      value: header.value,
-      labelWidth: 5,
-      inputWidth: header.configured ? 11 : 12,
-      placeholder: "Header Value",
-      onReset: () => onReset(header.id),
-      onChange: (e) => onChange({ ...header, value: e.target.value }),
-      onBlur
-    }
-  ), /* @__PURE__ */ React__namespace.default.createElement(
-    ui.Button,
-    {
-      type: "button",
-      "aria-label": "Remove header",
-      variant: "secondary",
-      size: "xs",
-      onClick: (_e) => onRemove(header.id)
-    },
-    /* @__PURE__ */ React__namespace.default.createElement(ui.Icon, { name: "trash-alt" })
-  ));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.layout, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.LegacyForms.FormField,
+      {
+        label: "Header",
+        name: "name",
+        placeholder: "X-Custom-Header",
+        labelWidth: 5,
+        value: header.name || "",
+        onChange: (e) => onChange({ ...header, name: e.target.value }),
+        onBlur
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.LegacyForms.SecretFormField,
+      {
+        label: "Value",
+        "aria-label": "Value",
+        name: "value",
+        isConfigured: header.configured,
+        value: header.value,
+        labelWidth: 5,
+        inputWidth: header.configured ? 11 : 12,
+        placeholder: "Header Value",
+        onReset: () => onReset(header.id),
+        onChange: (e) => onChange({ ...header, value: e.target.value }),
+        onBlur
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Button,
+      {
+        type: "button",
+        "aria-label": "Remove header",
+        variant: "secondary",
+        size: "xs",
+        onClick: (_e) => onRemove(header.id),
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { name: "trash-alt" })
+      }
+    )
+  ] });
 };
 CustomHeaderRow.displayName = "CustomHeaderRow";
 class CustomHeadersSettings extends React.PureComponent {
@@ -8462,30 +8840,34 @@ class CustomHeadersSettings extends React.PureComponent {
   }
   render() {
     const { headers } = this.state;
-    return /* @__PURE__ */ React__namespace.default.createElement("div", { className: "gf-form-group" }, /* @__PURE__ */ React__namespace.default.createElement("div", { className: "gf-form" }, /* @__PURE__ */ React__namespace.default.createElement("h6", null, "Custom HTTP Headers")), /* @__PURE__ */ React__namespace.default.createElement("div", null, headers.map((header, i) => /* @__PURE__ */ React__namespace.default.createElement(
-      CustomHeaderRow,
-      {
-        key: header.id,
-        header,
-        onChange: (h) => {
-          this.onHeaderChange(i, h);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gf-form-group", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gf-form", children: /* @__PURE__ */ jsxRuntime.jsx("h6", { children: "Custom HTTP Headers" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { children: headers.map((header, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        CustomHeaderRow,
+        {
+          header,
+          onChange: (h) => {
+            this.onHeaderChange(i, h);
+          },
+          onBlur: this.updateSettings,
+          onRemove: this.onHeaderRemove,
+          onReset: this.onHeaderReset
         },
-        onBlur: this.updateSettings,
-        onRemove: this.onHeaderRemove,
-        onReset: this.onHeaderReset
-      }
-    ))), /* @__PURE__ */ React__namespace.default.createElement("div", { className: "gf-form" }, /* @__PURE__ */ React__namespace.default.createElement(
-      ui.Button,
-      {
-        variant: "secondary",
-        icon: "plus",
-        type: "button",
-        onClick: (e) => {
-          this.onHeaderAdd();
+        header.id
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gf-form", children: /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Button,
+        {
+          variant: "secondary",
+          icon: "plus",
+          type: "button",
+          onClick: (e) => {
+            this.onHeaderAdd();
+          },
+          children: "Add header"
         }
-      },
-      "Add header"
-    )));
+      ) })
+    ] });
   }
 }
 
@@ -8567,105 +8949,110 @@ function LabelFilterItem({
   };
   const isConflicting = isConflictingLabelFilter(item, items);
   const { current: id } = React.useRef(uuid.v4());
-  return /* @__PURE__ */ React__namespace.default.createElement("div", { "data-testid": "visual-query-builder-dimensions-filter-item" }, /* @__PURE__ */ React__namespace.default.createElement(ui.InlineField, { error: CONFLICTING_LABEL_FILTER_ERROR_MESSAGE, invalid: isConflicting ? true : undefined }, /* @__PURE__ */ React__namespace.default.createElement(InputGroup, null, /* @__PURE__ */ React__namespace.default.createElement(
-    ui.Select,
-    {
-      placeholder: "Select label",
-      "data-testid": e2eSelectors.selectors.components.QueryBuilder.labelSelect,
-      inputId: `visual-query-builder-dimensions-filter-item-key-${id}`,
-      width: "auto",
-      value: item.label ? data.toOption(item.label) : null,
-      allowCustomValue: true,
-      onOpenMenu: async () => {
-        setState({ isLoadingLabelNames: true });
-        const labelNames = await onGetLabelNames(item);
-        setLabelNamesMenuOpen(true);
-        setState({ labelNames, isLoadingLabelNames: undefined });
-      },
-      onCloseMenu: () => {
-        setLabelNamesMenuOpen(false);
-      },
-      isOpen: labelNamesMenuOpen,
-      isLoading: state.isLoadingLabelNames,
-      options: state.labelNames,
-      onChange: (change) => {
-        var _a2;
-        if (change.value) {
-          onChange({
-            ...item,
-            op: (_a2 = item.op) != null ? _a2 : defaultOp,
-            label: change.value
-          });
-        }
-      },
-      invalid: isConflicting || invalidLabel
-    }
-  ), /* @__PURE__ */ React__namespace.default.createElement(
-    ui.Select,
-    {
-      "data-testid": e2eSelectors.selectors.components.QueryBuilder.matchOperatorSelect,
-      value: data.toOption((_a = item.op) != null ? _a : defaultOp),
-      options: operators,
-      width: "auto",
-      onChange: (change) => {
-        if (change.value) {
-          onChange({
-            ...item,
-            op: change.value,
-            value: isMultiSelect(change.value) ? item.value : getSelectOptionsFromString(item == null ? undefined : item.value)[0]
-          });
-        }
-      },
-      invalid: isConflicting
-    }
-  ), /* @__PURE__ */ React__namespace.default.createElement(
-    ui.Select,
-    {
-      placeholder: "Select value",
-      "data-testid": e2eSelectors.selectors.components.QueryBuilder.valueSelect,
-      inputId: `visual-query-builder-dimensions-filter-item-value-${id}`,
-      width: "auto",
-      value: isMultiSelect() ? getSelectOptionsFromString(item == null ? undefined : item.value).map(data.toOption) : getSelectOptionsFromString(item == null ? undefined : item.value).map(data.toOption)[0],
-      allowCustomValue: true,
-      onOpenMenu: async () => {
-        setState({ isLoadingLabelValues: true });
-        const labelValues = await onGetLabelValues(item);
-        setState({
-          ...state,
-          labelValues,
-          isLoadingLabelValues: undefined
-        });
-        setLabelValuesMenuOpen(true);
-      },
-      onCloseMenu: () => {
-        setLabelValuesMenuOpen(false);
-      },
-      isOpen: labelValuesMenuOpen,
-      isMulti: isMultiSelect(),
-      isLoading: state.isLoadingLabelValues,
-      options: getOptions(),
-      onChange: (change) => {
-        var _a2, _b;
-        if (change.value) {
-          onChange({
-            ...item,
-            value: change.value,
-            op: (_a2 = item.op) != null ? _a2 : defaultOp
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "visual-query-builder-dimensions-filter-item", children: /* @__PURE__ */ jsxRuntime.jsx(ui.InlineField, { error: CONFLICTING_LABEL_FILTER_ERROR_MESSAGE, invalid: isConflicting ? true : undefined, children: /* @__PURE__ */ jsxRuntime.jsxs(InputGroup, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Select,
+      {
+        placeholder: "Select label",
+        "data-testid": e2eSelectors.selectors.components.QueryBuilder.labelSelect,
+        inputId: `visual-query-builder-dimensions-filter-item-key-${id}`,
+        width: "auto",
+        value: item.label ? data.toOption(item.label) : null,
+        allowCustomValue: true,
+        onOpenMenu: async () => {
+          setState({ isLoadingLabelNames: true });
+          const labelNames = await onGetLabelNames(item);
+          setLabelNamesMenuOpen(true);
+          setState({ labelNames, isLoadingLabelNames: undefined });
+        },
+        onCloseMenu: () => {
+          setLabelNamesMenuOpen(false);
+        },
+        isOpen: labelNamesMenuOpen,
+        isLoading: state.isLoadingLabelNames,
+        options: state.labelNames,
+        onChange: (change) => {
+          var _a2;
+          if (change.value) {
+            onChange({
+              ...item,
+              op: (_a2 = item.op) != null ? _a2 : defaultOp,
+              label: change.value
+            });
+          }
+        },
+        invalid: isConflicting || invalidLabel
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Select,
+      {
+        "data-testid": e2eSelectors.selectors.components.QueryBuilder.matchOperatorSelect,
+        value: data.toOption((_a = item.op) != null ? _a : defaultOp),
+        options: operators,
+        width: "auto",
+        onChange: (change) => {
+          if (change.value) {
+            onChange({
+              ...item,
+              op: change.value,
+              value: isMultiSelect(change.value) ? item.value : getSelectOptionsFromString(item == null ? undefined : item.value)[0]
+            });
+          }
+        },
+        invalid: isConflicting
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Select,
+      {
+        placeholder: "Select value",
+        "data-testid": e2eSelectors.selectors.components.QueryBuilder.valueSelect,
+        inputId: `visual-query-builder-dimensions-filter-item-value-${id}`,
+        width: "auto",
+        value: isMultiSelect() ? getSelectOptionsFromString(item == null ? undefined : item.value).map(data.toOption) : getSelectOptionsFromString(item == null ? undefined : item.value).map(data.toOption)[0],
+        allowCustomValue: true,
+        onOpenMenu: async () => {
+          setState({ isLoadingLabelValues: true });
+          const labelValues = await onGetLabelValues(item);
+          setState({
+            ...state,
+            labelValues,
+            isLoadingLabelValues: undefined
           });
-        } else {
-          const changes = change.map((change2) => {
-            if (change2.value) {
-              return change2.value;
-            } else {
-              return undefined;
-            }
-          }).filter((val) => val !== undefined).join(multiValueSeparator);
-          onChange({ ...item, value: changes, op: (_b = item.op) != null ? _b : defaultOp });
-        }
-      },
-      invalid: isConflicting || invalidValue
-    }
-  ), /* @__PURE__ */ React__namespace.default.createElement(AccessoryButton, { "aria-label": "remove", icon: "times", variant: "secondary", onClick: onDelete }))));
+          setLabelValuesMenuOpen(true);
+        },
+        onCloseMenu: () => {
+          setLabelValuesMenuOpen(false);
+        },
+        isOpen: labelValuesMenuOpen,
+        isMulti: isMultiSelect(),
+        isLoading: state.isLoadingLabelValues,
+        options: getOptions(),
+        onChange: (change) => {
+          var _a2, _b;
+          if (change.value) {
+            onChange({
+              ...item,
+              value: change.value,
+              op: (_a2 = item.op) != null ? _a2 : defaultOp
+            });
+          } else {
+            const changes = change.map((change2) => {
+              if (change2.value) {
+                return change2.value;
+              } else {
+                return undefined;
+              }
+            }).filter((val) => val !== undefined).join(multiValueSeparator);
+            onChange({ ...item, value: changes, op: (_b = item.op) != null ? _b : defaultOp });
+          }
+        },
+        invalid: isConflicting || invalidValue
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(AccessoryButton, { "aria-label": "remove", icon: "times", variant: "secondary", onClick: onDelete })
+  ] }) }) });
 }
 const operators = [
   { label: "=", value: "=", description: "Equals", isMultiValue: false },
@@ -8725,41 +9112,50 @@ function LabelFilters({
     }
   };
   const hasLabelFilter = items.some((item) => item.label && item.value);
-  return /* @__PURE__ */ React__namespace.default.createElement(EditorFieldGroup, null, /* @__PURE__ */ React__namespace.default.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(EditorFieldGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(
     EditorField$1,
     {
       label: "Label filters",
       error: MISSING_LABEL_FILTER_ERROR_MESSAGE,
-      invalid: labelFilterRequired && !hasLabelFilter
-    },
-    /* @__PURE__ */ React__namespace.default.createElement(
-      EditorList,
-      {
-        items,
-        onChange: onLabelsChange,
-        renderItem: (item, onChangeItem, onDelete) => /* @__PURE__ */ React__namespace.default.createElement(
-          LabelFilterItem,
-          {
-            item,
-            items,
-            defaultOp,
-            onChange: onChangeItem,
-            onDelete,
-            onGetLabelNames,
-            onGetLabelValues,
-            invalidLabel: labelFilterRequired && !item.label,
-            invalidValue: labelFilterRequired && !item.value,
-            multiValueSeparator
-          }
-        )
-      }
-    )
-  ));
+      invalid: labelFilterRequired && !hasLabelFilter,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        EditorList,
+        {
+          items,
+          onChange: onLabelsChange,
+          renderItem: (item, onChangeItem, onDelete) => /* @__PURE__ */ jsxRuntime.jsx(
+            LabelFilterItem,
+            {
+              item,
+              items,
+              defaultOp,
+              onChange: onChangeItem,
+              onDelete,
+              onGetLabelNames,
+              onGetLabelValues,
+              invalidLabel: labelFilterRequired && !item.label,
+              invalidValue: labelFilterRequired && !item.value,
+              multiValueSeparator
+            }
+          )
+        }
+      )
+    }
+  ) });
 }
 
 function OperationExplainedBox({ title, stepNumber, markdown, children }) {
   const styles = ui.useStyles2(getStyles$b);
-  return /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.box }, stepNumber !== undefined && /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.stepNumber }, stepNumber), /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.boxInner }, title && /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.header }, /* @__PURE__ */ React__namespace.default.createElement("span", null, title)), /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.body }, markdown && /* @__PURE__ */ React__namespace.default.createElement("div", { dangerouslySetInnerHTML: { __html: data.renderMarkdown(markdown) } }), children)));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.box, children: [
+    stepNumber !== undefined && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.stepNumber, children: stepNumber }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.boxInner, children: [
+      title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.header, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: title }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.body, children: [
+        markdown && /* @__PURE__ */ jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: data.renderMarkdown(markdown) } }),
+        children
+      ] })
+    ] })
+  ] });
 }
 const getStyles$b = (theme) => {
   return {
@@ -8805,7 +9201,7 @@ const getStyles$b = (theme) => {
   };
 };
 
-const OperationInfoButton = React__namespace.default.memo(({ definition, operation, innerQueryPlaceholder }) => {
+const OperationInfoButton = React.memo(({ definition, operation, innerQueryPlaceholder }) => {
   const styles = ui.useStyles2(getStyles$a);
   const [show, setShow] = React.useState(false);
   const { getTooltipProps, setTooltipRef, setTriggerRef, visible } = reactPopperTooltip.usePopperTooltip({
@@ -8816,32 +9212,42 @@ const OperationInfoButton = React__namespace.default.memo(({ definition, operati
     interactive: true,
     trigger: ["click"]
   });
-  return /* @__PURE__ */ React__namespace.default.createElement(React__namespace.default.Fragment, null, /* @__PURE__ */ React__namespace.default.createElement(
-    ui.Button,
-    {
-      title: "Click to show description",
-      ref: setTriggerRef,
-      icon: "info-circle",
-      size: "sm",
-      variant: "secondary",
-      fill: "text"
-    }
-  ), visible && /* @__PURE__ */ React__namespace.default.createElement(ui.Portal, null, /* @__PURE__ */ React__namespace.default.createElement("div", { ref: setTooltipRef, ...getTooltipProps(), className: styles.docBox }, /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.docBoxHeader }, /* @__PURE__ */ React__namespace.default.createElement("span", null, definition.renderer(operation, definition, innerQueryPlaceholder)), /* @__PURE__ */ React__namespace.default.createElement(FlexItem, { grow: 1 }), /* @__PURE__ */ React__namespace.default.createElement(
-    ui.Button,
-    {
-      icon: "times",
-      onClick: () => setShow(false),
-      fill: "text",
-      variant: "secondary",
-      title: "Remove operation"
-    }
-  )), /* @__PURE__ */ React__namespace.default.createElement(
-    "div",
-    {
-      className: styles.docBoxBody,
-      dangerouslySetInnerHTML: { __html: getOperationDocs(definition, operation) }
-    }
-  ))));
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Button,
+      {
+        title: "Click to show description",
+        ref: setTriggerRef,
+        icon: "info-circle",
+        size: "sm",
+        variant: "secondary",
+        fill: "text"
+      }
+    ),
+    visible && /* @__PURE__ */ jsxRuntime.jsx(ui.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: setTooltipRef, ...getTooltipProps(), className: styles.docBox, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.docBoxHeader, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: definition.renderer(operation, definition, innerQueryPlaceholder) }),
+        /* @__PURE__ */ jsxRuntime.jsx(FlexItem, { grow: 1 }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Button,
+          {
+            icon: "times",
+            onClick: () => setShow(false),
+            fill: "text",
+            variant: "secondary",
+            title: "Remove operation"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: styles.docBoxBody,
+          dangerouslySetInnerHTML: { __html: getOperationDocs(definition, operation) }
+        }
+      )
+    ] }) })
+  ] });
 });
 OperationInfoButton.displayName = "OperationDocs";
 const getStyles$a = (theme) => {
@@ -8883,7 +9289,7 @@ function getOperationDocs(def, op) {
   return data.renderMarkdown(def.explainHandler ? def.explainHandler(op, def) : (_a = def.documentation) != null ? _a : "no docs");
 }
 
-const OperationHeader = React__namespace.default.memo(
+const OperationHeader = React.memo(
   ({ operation, definition, index, onChange, onRemove, onToggle, queryModeller, dragHandleProps }) => {
     var _a;
     const styles = ui.useStyles2(getStyles$9);
@@ -8896,70 +9302,82 @@ const OperationHeader = React__namespace.default.memo(
         setState({ isOpen: true, alternatives });
       }
     };
-    return /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.header }, !state.isOpen && /* @__PURE__ */ React__namespace.default.createElement(React__namespace.default.Fragment, null, /* @__PURE__ */ React__namespace.default.createElement("div", { ...dragHandleProps }, (_a = definition.name) != null ? _a : definition.id), /* @__PURE__ */ React__namespace.default.createElement(FlexItem, { grow: 1 }), /* @__PURE__ */ React__namespace.default.createElement("div", { className: `${styles.operationHeaderButtons} operation-header-show-on-hover` }, /* @__PURE__ */ React__namespace.default.createElement(
-      ui.Button,
-      {
-        icon: "angle-down",
-        size: "sm",
-        onClick: onToggleSwitcher,
-        fill: "text",
-        variant: "secondary",
-        title: "Click to view alternative operations"
-      }
-    ), /* @__PURE__ */ React__namespace.default.createElement(
-      OperationInfoButton,
-      {
-        definition,
-        operation,
-        innerQueryPlaceholder: queryModeller.innerQueryPlaceholder
-      }
-    ), definition.toggleable && /* @__PURE__ */ React__namespace.default.createElement(
-      ui.Button,
-      {
-        icon: operation.disabled ? "eye-slash" : "eye",
-        size: "sm",
-        onClick: () => onToggle(index),
-        fill: "text",
-        variant: "secondary",
-        title: operation.disabled ? "Enable operation" : "Disable operation"
-      }
-    ), /* @__PURE__ */ React__namespace.default.createElement(
-      ui.Button,
-      {
-        icon: "times",
-        size: "sm",
-        onClick: () => onRemove(index),
-        fill: "text",
-        variant: "secondary",
-        title: "Remove operation"
-      }
-    ))), state.isOpen && /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.selectWrapper }, /* @__PURE__ */ React__namespace.default.createElement(
-      ui.Select,
-      {
-        autoFocus: true,
-        openMenuOnFocus: true,
-        placeholder: "Replace with",
-        options: state.alternatives,
-        isOpen: true,
-        onCloseMenu: onToggleSwitcher,
-        onChange: (value) => {
-          if (value.value) {
-            const newDef = queryModeller.getOperationDefinition(value.value.id);
-            const newParams = [...newDef.defaultParams];
-            for (let i = 0; i < Math.min(operation.params.length, newParams.length); i++) {
-              if (newDef.params[i].type === definition.params[i].type) {
-                newParams[i] = operation.params[i];
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.header, children: [
+      !state.isOpen && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { ...dragHandleProps, children: (_a = definition.name) != null ? _a : definition.id }),
+        /* @__PURE__ */ jsxRuntime.jsx(FlexItem, { grow: 1 }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles.operationHeaderButtons} operation-header-show-on-hover`, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              icon: "angle-down",
+              size: "sm",
+              onClick: onToggleSwitcher,
+              fill: "text",
+              variant: "secondary",
+              title: "Click to view alternative operations"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            OperationInfoButton,
+            {
+              definition,
+              operation,
+              innerQueryPlaceholder: queryModeller.innerQueryPlaceholder
+            }
+          ),
+          definition.toggleable && /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              icon: operation.disabled ? "eye-slash" : "eye",
+              size: "sm",
+              onClick: () => onToggle(index),
+              fill: "text",
+              variant: "secondary",
+              title: operation.disabled ? "Enable operation" : "Disable operation"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              icon: "times",
+              size: "sm",
+              onClick: () => onRemove(index),
+              fill: "text",
+              variant: "secondary",
+              title: "Remove operation"
+            }
+          )
+        ] })
+      ] }),
+      state.isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.selectWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Select,
+        {
+          autoFocus: true,
+          openMenuOnFocus: true,
+          placeholder: "Replace with",
+          options: state.alternatives,
+          isOpen: true,
+          onCloseMenu: onToggleSwitcher,
+          onChange: (value) => {
+            if (value.value) {
+              const newDef = queryModeller.getOperationDefinition(value.value.id);
+              const newParams = [...newDef.defaultParams];
+              for (let i = 0; i < Math.min(operation.params.length, newParams.length); i++) {
+                if (newDef.params[i].type === definition.params[i].type) {
+                  newParams[i] = operation.params[i];
+                }
               }
+              const changedOp = { ...operation, params: newParams, id: value.value.id };
+              onChange(
+                index,
+                definition.changeTypeHandler ? definition.changeTypeHandler(changedOp, newDef) : changedOp
+              );
             }
-            const changedOp = { ...operation, params: newParams, id: value.value.id };
-            onChange(
-              index,
-              definition.changeTypeHandler ? definition.changeTypeHandler(changedOp, newDef) : changedOp
-            );
           }
         }
-      }
-    )));
+      ) })
+    ] });
   }
 );
 OperationHeader.displayName = "OperationHeader";
@@ -8998,7 +9416,7 @@ function getOperationParamEditor(paramDef) {
 }
 function SimpleInputParamEditor(props) {
   var _a;
-  return /* @__PURE__ */ React__namespace.default.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     ui.AutoSizeInput,
     {
       id: getOperationParamId(props.operationId, props.index),
@@ -9017,7 +9435,7 @@ function SimpleInputParamEditor(props) {
   );
 }
 function BoolInputParamEditor(props) {
-  return /* @__PURE__ */ React__namespace.default.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     ui.Checkbox,
     {
       id: getOperationParamId(props.operationId, props.index),
@@ -9044,41 +9462,44 @@ function SelectInputParamEditor({
   }
   let valueOption = (_b = selectOptions.find((x) => x.value === value)) != null ? _b : data.toOption(value);
   if (!value && paramDef.optional) {
-    return /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.optionalParam }, /* @__PURE__ */ React__namespace.default.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.optionalParam, children: /* @__PURE__ */ jsxRuntime.jsx(
       ui.Button,
       {
         size: "sm",
         variant: "secondary",
         title: `Add ${paramDef.name}`,
         icon: "plus",
-        onClick: () => onChange(index, selectOptions[0].value)
-      },
-      paramDef.name
-    ));
+        onClick: () => onChange(index, selectOptions[0].value),
+        children: paramDef.name
+      }
+    ) });
   }
-  return /* @__PURE__ */ React__namespace.default.createElement(EditorStack, { gap: 0.5, direction: "row", alignItems: "center" }, /* @__PURE__ */ React__namespace.default.createElement(
-    ui.Select,
-    {
-      id: getOperationParamId(operationId, index),
-      value: valueOption,
-      options: selectOptions,
-      placeholder: paramDef.placeholder,
-      allowCustomValue: true,
-      onChange: (value2) => onChange(index, value2.value),
-      width: paramDef.minWidth || "auto"
-    }
-  ), paramDef.optional && /* @__PURE__ */ React__namespace.default.createElement(
-    ui.Button,
-    {
-      "data-testid": `operations.${index}.remove-param`,
-      size: "sm",
-      fill: "text",
-      icon: "times",
-      variant: "secondary",
-      title: `Remove ${paramDef.name}`,
-      onClick: () => onChange(index, "")
-    }
-  ));
+  return /* @__PURE__ */ jsxRuntime.jsxs(EditorStack, { gap: 0.5, direction: "row", alignItems: "center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Select,
+      {
+        id: getOperationParamId(operationId, index),
+        value: valueOption,
+        options: selectOptions,
+        placeholder: paramDef.placeholder,
+        allowCustomValue: true,
+        onChange: (value2) => onChange(index, value2.value),
+        width: paramDef.minWidth || "auto"
+      }
+    ),
+    paramDef.optional && /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Button,
+      {
+        "data-testid": `operations.${index}.remove-param`,
+        size: "sm",
+        fill: "text",
+        icon: "times",
+        variant: "secondary",
+        title: `Remove ${paramDef.name}`,
+        onClick: () => onChange(index, "")
+      }
+    )
+  ] });
 }
 const getStyles$8 = (theme) => {
   return {
@@ -9135,7 +9556,7 @@ function OperationEditorBody({
       restParam = renderAddRestParamButton(lastParamDef, onAddRestParam, index, operation.params.length, styles);
     }
   }
-  return /* @__PURE__ */ React__namespace.default.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: css.cx(styles.card, {
@@ -9145,54 +9566,68 @@ function OperationEditorBody({
       }),
       ref: provided.innerRef,
       ...provided.draggableProps,
-      "data-testid": `operations.${index}.wrapper`
-    },
-    /* @__PURE__ */ React__namespace.default.createElement(
-      OperationHeader,
-      {
-        operation,
-        dragHandleProps: provided.dragHandleProps,
-        definition,
-        index,
-        onChange,
-        onRemove,
-        onToggle,
-        queryModeller
-      }
-    ),
-    /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.body }, operation.params.map((param, paramIndex) => {
-      const paramDef = definition.params[Math.min(definition.params.length - 1, paramIndex)];
-      const Editor = getOperationParamEditor(paramDef);
-      return /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.paramRow, key: `${paramIndex}-1` }, !paramDef.hideName && /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.paramName }, /* @__PURE__ */ React__namespace.default.createElement("label", { htmlFor: getOperationParamId(id, paramIndex) }, paramDef.name), paramDef.description && /* @__PURE__ */ React__namespace.default.createElement(ui.Tooltip, { placement: "top", content: paramDef.description, theme: "info" }, /* @__PURE__ */ React__namespace.default.createElement(ui.Icon, { name: "info-circle", size: "sm", className: styles.infoIcon }))), /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.paramValue }, /* @__PURE__ */ React__namespace.default.createElement(EditorStack, { gap: 0.5, direction: "row", alignItems: "center", wrap: false }, /* @__PURE__ */ React__namespace.default.createElement(
-        Editor,
-        {
-          index: paramIndex,
-          paramDef,
-          value: operation.params[paramIndex],
-          operation,
-          operationId: id,
-          onChange: onParamValueChanged,
-          onRunQuery,
-          query,
-          datasource,
-          timeRange,
-          queryModeller
-        }
-      ), paramDef.restParam && (operation.params.length > definition.params.length || paramDef.optional) && /* @__PURE__ */ React__namespace.default.createElement(
-        ui.Button,
-        {
-          "data-testid": `operations.${index}.remove-rest-param`,
-          size: "sm",
-          fill: "text",
-          icon: "times",
-          variant: "secondary",
-          title: `Remove ${paramDef.name}`,
-          onClick: () => onRemoveRestParam(paramIndex)
-        }
-      ))));
-    })),
-    restParam,
-    index < query.operations.length - 1 && /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.arrow }, /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.arrowLine }), /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.arrowArrow }))
+      "data-testid": `operations.${index}.wrapper`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          OperationHeader,
+          {
+            operation,
+            dragHandleProps: provided.dragHandleProps,
+            definition,
+            index,
+            onChange,
+            onRemove,
+            onToggle,
+            queryModeller
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.body, children: operation.params.map((param, paramIndex) => {
+          const paramDef = definition.params[Math.min(definition.params.length - 1, paramIndex)];
+          const Editor = getOperationParamEditor(paramDef);
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.paramRow, children: [
+            !paramDef.hideName && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.paramName, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: getOperationParamId(id, paramIndex), children: paramDef.name }),
+              paramDef.description && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { placement: "top", content: paramDef.description, theme: "info", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { name: "info-circle", size: "sm", className: styles.infoIcon }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.paramValue, children: /* @__PURE__ */ jsxRuntime.jsxs(EditorStack, { gap: 0.5, direction: "row", alignItems: "center", wrap: false, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Editor,
+                {
+                  index: paramIndex,
+                  paramDef,
+                  value: operation.params[paramIndex],
+                  operation,
+                  operationId: id,
+                  onChange: onParamValueChanged,
+                  onRunQuery,
+                  query,
+                  datasource,
+                  timeRange,
+                  queryModeller
+                }
+              ),
+              paramDef.restParam && (operation.params.length > definition.params.length || paramDef.optional) && /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Button,
+                {
+                  "data-testid": `operations.${index}.remove-rest-param`,
+                  size: "sm",
+                  fill: "text",
+                  icon: "times",
+                  variant: "secondary",
+                  title: `Remove ${paramDef.name}`,
+                  onClick: () => onRemoveRestParam(paramIndex)
+                }
+              )
+            ] }) })
+          ] }, `${paramIndex}-1`);
+        }) }),
+        restParam,
+        index < query.operations.length - 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.arrow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.arrowLine }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.arrowArrow })
+        ] })
+      ]
+    }
   );
 }
 const getStyles$7 = (theme, isConflicting) => {
@@ -9303,7 +9738,7 @@ function callParamChangedThenOnChange(def, operation, operationIndex, paramIndex
   }
 }
 function renderAddRestParamButton(paramDef, onAddRestParam, operationIndex, paramIndex, styles) {
-  return /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.restParam, key: `${paramIndex}-2` }, /* @__PURE__ */ React__namespace.default.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.restParam, children: /* @__PURE__ */ jsxRuntime.jsx(
     ui.Button,
     {
       size: "sm",
@@ -9311,10 +9746,10 @@ function renderAddRestParamButton(paramDef, onAddRestParam, operationIndex, para
       title: `Add ${paramDef.name}`.trimEnd(),
       variant: "secondary",
       onClick: onAddRestParam,
-      "data-testid": `operations.${operationIndex}.add-rest-param`
-    },
-    paramDef.name
-  ));
+      "data-testid": `operations.${operationIndex}.add-rest-param`,
+      children: paramDef.name
+    }
+  ) }, `${paramIndex}-2`);
 }
 
 function OperationEditor({
@@ -9337,7 +9772,11 @@ function OperationEditor({
   const isConflicting = isConflictingOperation ? isConflictingOperation(operation, query.operations) : false;
   const styles = getStyles$6(theme);
   if (!def) {
-    return /* @__PURE__ */ React__namespace.default.createElement("span", null, "Operation ", operation.id, " not found");
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+      "Operation ",
+      operation.id,
+      " not found"
+    ] });
   }
   const isInvalid = (isDragging) => {
     if (isDragging) {
@@ -9345,34 +9784,34 @@ function OperationEditor({
     }
     return isConflicting ? true : undefined;
   };
-  return /* @__PURE__ */ React__namespace.default.createElement(dnd.Draggable, { draggableId: `operation-${index}`, index }, (provided, snapshot) => /* @__PURE__ */ React__namespace.default.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(dnd.Draggable, { draggableId: `operation-${index}`, index, children: (provided, snapshot) => /* @__PURE__ */ jsxRuntime.jsx(
     ui.InlineField,
     {
       error: "You have conflicting label filters",
       invalid: isInvalid(snapshot.isDragging),
-      className: css.cx(styles.error, styles.cardWrapper)
-    },
-    /* @__PURE__ */ React__namespace.default.createElement(
-      OperationEditorBody,
-      {
-        provided,
-        flash,
-        highlight,
-        isConflicting,
-        index,
-        operation,
-        definition: def,
-        onChange,
-        onRemove,
-        onToggle,
-        queryModeller,
-        query,
-        timeRange,
-        onRunQuery,
-        datasource
-      }
-    )
-  ));
+      className: css.cx(styles.error, styles.cardWrapper),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        OperationEditorBody,
+        {
+          provided,
+          flash,
+          highlight,
+          isConflicting,
+          index,
+          operation,
+          definition: def,
+          onChange,
+          onRemove,
+          onToggle,
+          queryModeller,
+          query,
+          timeRange,
+          onRunQuery,
+          datasource
+        }
+      )
+    }
+  ) });
 }
 const getStyles$6 = (theme, isConflicting) => {
   return {
@@ -9443,38 +9882,44 @@ function OperationList({
   const onCascaderBlur = () => {
     setCascaderOpen(false);
   };
-  return /* @__PURE__ */ React__namespace.default.createElement(EditorStack, { gap: 1, direction: "column" }, /* @__PURE__ */ React__namespace.default.createElement(EditorStack, { gap: 1 }, operations.length > 0 && /* @__PURE__ */ React__namespace.default.createElement(dnd.DragDropContext, { onDragEnd }, /* @__PURE__ */ React__namespace.default.createElement(dnd.Droppable, { droppableId: "sortable-field-mappings", direction: "horizontal" }, (provided) => /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.operationList, ref: provided.innerRef, ...provided.droppableProps }, operations.map((op, index) => {
-    return /* @__PURE__ */ React__namespace.default.createElement(
-      OperationEditor,
-      {
-        key: op.id + JSON.stringify(op.params) + index,
-        queryModeller,
-        index,
-        operation: op,
-        query,
-        datasource,
-        onChange: onOperationChange,
-        onRemove,
-        onToggle,
-        onRunQuery,
-        flash: opsToHighlight[index],
-        highlight: highlightedOp === op,
-        timeRange,
-        isConflictingOperation
+  return /* @__PURE__ */ jsxRuntime.jsx(EditorStack, { gap: 1, direction: "column", children: /* @__PURE__ */ jsxRuntime.jsxs(EditorStack, { gap: 1, children: [
+    operations.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(dnd.DragDropContext, { onDragEnd, children: /* @__PURE__ */ jsxRuntime.jsx(dnd.Droppable, { droppableId: "sortable-field-mappings", direction: "horizontal", children: (provided) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.operationList, ref: provided.innerRef, ...provided.droppableProps, children: [
+      operations.map((op, index) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          OperationEditor,
+          {
+            queryModeller,
+            index,
+            operation: op,
+            query,
+            datasource,
+            onChange: onOperationChange,
+            onRemove,
+            onToggle,
+            onRunQuery,
+            flash: opsToHighlight[index],
+            highlight: highlightedOp === op,
+            timeRange,
+            isConflictingOperation
+          },
+          op.id + JSON.stringify(op.params) + index
+        );
+      }),
+      provided.placeholder
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.addButton, children: cascaderOpen ? /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Cascader,
+      {
+        options: addOptions,
+        onSelect: onAddOperation,
+        onBlur: onCascaderBlur,
+        autoFocus: true,
+        alwaysOpen: true,
+        hideActiveLevelLabel: true,
+        placeholder: "Search"
       }
-    );
-  }), provided.placeholder))), /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.addButton }, cascaderOpen ? /* @__PURE__ */ React__namespace.default.createElement(
-    ui.Cascader,
-    {
-      options: addOptions,
-      onSelect: onAddOperation,
-      onBlur: onCascaderBlur,
-      autoFocus: true,
-      alwaysOpen: true,
-      hideActiveLevelLabel: true,
-      placeholder: "Search"
-    }
-  ) : /* @__PURE__ */ React__namespace.default.createElement(ui.Button, { icon: "plus", variant: "secondary", onClick: () => setCascaderOpen(true), title: "Add operation" }, "Operations"))));
+    ) : /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { icon: "plus", variant: "secondary", onClick: () => setCascaderOpen(true), title: "Add operation", children: "Operations" }) })
+  ] }) });
 }
 function useOperationsHighlight(operations) {
   const isMounted = reactUse.useMountedState();
@@ -9531,7 +9976,7 @@ function RawQuery({ query, language, className }) {
   const theme = ui.useTheme2();
   const styles = getStyles$4(theme);
   const highlighted = Prism__default.default.highlight(query, language.grammar, language.name);
-  return /* @__PURE__ */ React__namespace.default.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: css.cx(styles.editorField, "prism-syntax-highlight", className),
@@ -9557,7 +10002,7 @@ function OperationListExplained({
   onMouseEnter,
   onMouseLeave
 }) {
-  return /* @__PURE__ */ React__namespace.default.createElement(React__namespace.default.Fragment, null, query.operations.map((op, index) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: query.operations.map((op, index) => {
     var _a;
     const def = queryModeller.getOperationDefinition(op.id);
     if (!def) {
@@ -9565,28 +10010,28 @@ function OperationListExplained({
     }
     const title = def.renderer(op, def, queryModeller.innerQueryPlaceholder);
     const body = def.explainHandler ? def.explainHandler(op, def) : (_a = def.documentation) != null ? _a : "no docs";
-    return /* @__PURE__ */ React__namespace.default.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        key: index,
         onMouseEnter: () => onMouseEnter == null ? undefined : onMouseEnter(op, index),
-        onMouseLeave: () => onMouseLeave == null ? undefined : onMouseLeave(op, index)
+        onMouseLeave: () => onMouseLeave == null ? undefined : onMouseLeave(op, index),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          OperationExplainedBox,
+          {
+            stepNumber: index + stepNumber,
+            title: /* @__PURE__ */ jsxRuntime.jsx(RawQuery, { query: title, language }),
+            markdown: body
+          }
+        )
       },
-      /* @__PURE__ */ React__namespace.default.createElement(
-        OperationExplainedBox,
-        {
-          stepNumber: index + stepNumber,
-          title: /* @__PURE__ */ React__namespace.default.createElement(RawQuery, { query: title, language }),
-          markdown: body
-        }
-      )
+      index
     );
-  }));
+  }) });
 }
 
 function OperationsEditorRow({ children }) {
   const styles = ui.useStyles2(getStyles$3);
-  return /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.root }, /* @__PURE__ */ React__namespace.default.createElement(EditorStack, { gap: 1 }, children));
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.root, children: /* @__PURE__ */ jsxRuntime.jsx(EditorStack, { gap: 1, children }) });
 }
 const getStyles$3 = (theme) => {
   return {
@@ -9618,9 +10063,9 @@ const QueryBuilderHints = ({
     });
     return hints2 != null ? hints2 : [];
   }, [datasource, visualQuery, data, queryModeller, buildDataQueryFromQueryString]);
-  return /* @__PURE__ */ React__namespace.default.createElement(React__namespace.default.Fragment, null, hints.length > 0 && /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.container }, hints.map((hint) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: hints.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.container, children: hints.map((hint) => {
     var _a, _b, _c, _d;
-    return /* @__PURE__ */ React__namespace.default.createElement(ui.Tooltip, { content: `${hint.label} ${(_a = hint.fix) == null ? undefined : _a.label}`, key: hint.type }, /* @__PURE__ */ React__namespace.default.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: `${hint.label} ${(_a = hint.fix) == null ? undefined : _a.label}`, children: /* @__PURE__ */ jsxRuntime.jsxs(
       ui.Button,
       {
         onClick: () => {
@@ -9642,12 +10087,14 @@ const QueryBuilderHints = ({
         },
         fill: "outline",
         size: "sm",
-        className: styles.hint
-      },
-      "hint: ",
-      ((_b = hint.fix) == null ? undefined : _b.title) || ((_d = (_c = hint.fix) == null ? undefined : _c.action) == null ? undefined : _d.type.toLowerCase().replace("_", " "))
-    ));
-  })));
+        className: styles.hint,
+        children: [
+          "hint: ",
+          ((_b = hint.fix) == null ? undefined : _b.title) || ((_d = (_c = hint.fix) == null ? undefined : _c.action) == null ? undefined : _d.type.toLowerCase().replace("_", " "))
+        ]
+      }
+    ) }, hint.type);
+  }) }) });
 };
 QueryBuilderHints.displayName = "QueryBuilderHints";
 const getStyles$2 = (theme) => {
@@ -9667,14 +10114,17 @@ const editorModes = [
   { label: "Code", value: QueryEditorMode.Code }
 ];
 function QueryEditorModeToggle({ mode, onChange }) {
-  return /* @__PURE__ */ React__namespace.default.createElement("div", { "data-testid": "QueryEditorModeToggle" }, /* @__PURE__ */ React__namespace.default.createElement(ui.RadioButtonGroup, { options: editorModes, size: "sm", value: mode, onChange }));
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "QueryEditorModeToggle", children: /* @__PURE__ */ jsxRuntime.jsx(ui.RadioButtonGroup, { options: editorModes, size: "sm", value: mode, onChange }) });
 }
 
 function QueryHeaderSwitch({ label, ...inputProps }) {
   const dashedLabel = label.replace(" ", "-");
   const switchIdRef = React.useRef(lodash.uniqueId(`switch-${dashedLabel}`));
   const styles = ui.useStyles2(getStyles$1);
-  return /* @__PURE__ */ React__namespace.default.createElement(EditorStack, { gap: 1 }, /* @__PURE__ */ React__namespace.default.createElement("label", { htmlFor: switchIdRef.current, className: styles.switchLabel }, label), /* @__PURE__ */ React__namespace.default.createElement(ui.Switch, { ...inputProps, id: switchIdRef.current }));
+  return /* @__PURE__ */ jsxRuntime.jsxs(EditorStack, { gap: 1, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: switchIdRef.current, className: styles.switchLabel, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Switch, { ...inputProps, id: switchIdRef.current })
+  ] });
 }
 const getStyles$1 = (theme) => {
   return {
@@ -9692,17 +10142,24 @@ const getStyles$1 = (theme) => {
 function QueryOptionGroup({ title, children, collapsedInfo, queryStats }) {
   const [isOpen, toggleOpen] = reactUse.useToggle(false);
   const styles = ui.useStyles2(getStyles);
-  return /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.wrapper }, /* @__PURE__ */ React__namespace.default.createElement(
-    ui.Collapse,
-    {
-      className: styles.collapse,
-      collapsible: true,
-      isOpen,
-      onToggle: toggleOpen,
-      label: /* @__PURE__ */ React__namespace.default.createElement(EditorStack, { gap: 0 }, /* @__PURE__ */ React__namespace.default.createElement("h6", { className: styles.title }, title), !isOpen && /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.description }, collapsedInfo.map((x, i) => /* @__PURE__ */ React__namespace.default.createElement("span", { key: i }, x))))
-    },
-    /* @__PURE__ */ React__namespace.default.createElement("div", { className: styles.body }, children)
-  ), queryStats && runtime.config.featureToggles.lokiQuerySplitting && /* @__PURE__ */ React__namespace.default.createElement(ui.Tooltip, { content: "Note: the query will be split into multiple parts and executed in sequence. Query limits will only apply each individual part." }, /* @__PURE__ */ React__namespace.default.createElement(ui.Icon, { tabIndex: 0, name: "info-circle", className: styles.tooltip, size: "sm" })), queryStats && /* @__PURE__ */ React__namespace.default.createElement("p", { className: styles.stats }, generateQueryStats(queryStats)));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.wrapper, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Collapse,
+      {
+        className: styles.collapse,
+        collapsible: true,
+        isOpen,
+        onToggle: toggleOpen,
+        label: /* @__PURE__ */ jsxRuntime.jsxs(EditorStack, { gap: 0, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h6", { className: styles.title, children: title }),
+          !isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.description, children: collapsedInfo.map((x, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: x }, i)) })
+        ] }),
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.body, children })
+      }
+    ),
+    queryStats && runtime.config.featureToggles.lokiQuerySplitting && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: "Note: the query will be split into multiple parts and executed in sequence. Query limits will only apply each individual part.", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { tabIndex: 0, name: "info-circle", className: styles.tooltip, size: "sm" }) }),
+    queryStats && /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles.stats, children: generateQueryStats(queryStats) })
+  ] });
 }
 const getStyles = (theme) => {
   return {
@@ -40008,6 +40465,7 @@ exports.AdvancedHttpSettings = AdvancedHttpSettings;
 exports.Auth = Auth;
 exports.AuthMethod = AuthMethod;
 exports.BINARY_OPERATIONS_KEY = BINARY_OPERATIONS_KEY;
+exports.CatalogSelector = CatalogSelector;
 exports.CompletionItemInsertTextRule = CompletionItemInsertTextRule;
 exports.CompletionItemKind = CompletionItemKind;
 exports.CompletionItemPriority = CompletionItemPriority;
@@ -40020,6 +40478,7 @@ exports.DataLink = DataLink;
 exports.DataLinks = DataLinks;
 exports.DataSourceDescription = DataSourceDescription;
 exports.DataSourcePicker = DataSourcePicker;
+exports.DatasetSelector = DatasetSelector;
 exports.DatePicker = DatePicker;
 exports.DatePickerWithInput = DatePickerWithInput;
 exports.DebounceInput = DebounceInput;
@@ -40058,6 +40517,7 @@ exports.RunQueryButton = RunQueryButton;
 exports.SQLEditor = SQLEditor;
 exports.SQLEditorMode = SQLEditorMode;
 exports.SQLEditorTestUtils = SQLEditorTestUtils;
+exports.SchemaSelector = SchemaSelector;
 exports.SecureSocksProxyToggle = SecureSocksProxyToggle;
 exports.Segment = Segment;
 exports.Space = Space;
@@ -40066,6 +40526,7 @@ exports.SqlQueryEditor = SqlQueryEditor;
 exports.StatementPosition = StatementPosition;
 exports.SuggestionKind = SuggestionKind;
 exports.TLSSettings = TLSSettings;
+exports.TableSelector = TableSelector;
 exports.TokenType = TokenType;
 exports.convertLegacyAuthProps = convertLegacyAuthProps;
 exports.formatDate = formatDate;