@splunk/dashboard-toolbar 29.0.0

package/index.js

@@ -0,0 +1,2245 @@
+/* Copyright © 2020 Splunk Inc.
+SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
+in part without a valid written license from Splunk Inc. is PROHIBITED. */
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  ActionsGroup: () => ActionsGroup_default,
+  Charts: () => Charts_default,
+  CollapsibleToolbar: () => CollapsibleToolbar_default,
+  Config: () => Config_default,
+  ContentExport: () => ContentExport_default,
+  ControlGroup: () => ControlGroup_default,
+  Data: () => Data_default,
+  EditingGroup: () => EditingGroup_default,
+  EditorGroup: () => EditorGroup_default,
+  EditorsControlGroup: () => EditorsControlGroup_default,
+  EmptyVisualization: () => EmptyVisualization_default,
+  ExportDashboardButton: () => ExportDashboardButton_default,
+  Fullscreen: () => Fullscreen_default,
+  GridLineSwitch: () => GridLineSwitch_default,
+  HelpButton: () => HelpButton_default,
+  HistoryGroup: () => HistoryGroup_default,
+  IconButton: () => IconButton_default,
+  IconGallery: () => IconGallery_default,
+  Image: () => Image_default,
+  ImageGallery: () => ImageGallery_default,
+  Inputs: () => Inputs_default,
+  Item: () => Item_default,
+  ItemGroup: () => ItemGroup_default,
+  Markdown: () => Markdown_default2,
+  ModeSwitch: () => ModeSwitch_default,
+  PopoverItemButton: () => PopoverItemButton_default,
+  Redo: () => Redo_default,
+  Shapes: () => Shapes_default,
+  SidebarControlGroup: () => SidebarControlGroup_default,
+  Source: () => Source_default,
+  TokenManager: () => TokenManager,
+  Toolbar: () => Toolbar_default,
+  Undo: () => Undo_default,
+  VisualizationGroup: () => VisualizationGroup_default,
+  Zoom: () => Zoom,
+  default: () => Toolbar_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// esm-externals:react
+var react_exports = {};
+__export(react_exports, {
+  default: () => react_default
+});
+var defaultImport = __toESM(require("react"));
+__reExport(react_exports, require("react"));
+var react_default = "default" in defaultImport ? defaultImport.default : defaultImport;
+
+// esm-externals:@splunk/dashboard-context
+var dashboard_context_exports = {};
+__export(dashboard_context_exports, {
+  default: () => dashboard_context_default
+});
+var defaultImport2 = __toESM(require("@splunk/dashboard-context"));
+__reExport(dashboard_context_exports, require("@splunk/dashboard-context"));
+var dashboard_context_default = "default" in defaultImport2 ? defaultImport2.default : defaultImport2;
+
+// esm-externals:styled-components
+var styled_components_exports = {};
+__export(styled_components_exports, {
+  default: () => styled_components_default
+});
+var defaultImport3 = __toESM(require("styled-components"));
+__reExport(styled_components_exports, require("styled-components"));
+var styled_components_default = "default" in defaultImport3 ? defaultImport3.default : defaultImport3;
+
+// esm-externals:@splunk/react-ui/Button
+var Button_exports = {};
+__export(Button_exports, {
+  default: () => Button_default
+});
+var defaultImport4 = __toESM(require("@splunk/react-ui/Button"));
+__reExport(Button_exports, require("@splunk/react-ui/Button"));
+var Button_default = "default" in defaultImport4 ? defaultImport4.default : defaultImport4;
+
+// esm-externals:@splunk/react-ui/TransitionOpen
+var TransitionOpen_exports = {};
+__export(TransitionOpen_exports, {
+  default: () => TransitionOpen_default
+});
+var defaultImport5 = __toESM(require("@splunk/react-ui/TransitionOpen"));
+__reExport(TransitionOpen_exports, require("@splunk/react-ui/TransitionOpen"));
+var TransitionOpen_default = "default" in defaultImport5 ? defaultImport5.default : defaultImport5;
+
+// esm-externals:@splunk/themes
+var themes_exports = {};
+__export(themes_exports, {
+  default: () => themes_default
+});
+var defaultImport6 = __toESM(require("@splunk/themes"));
+__reExport(themes_exports, require("@splunk/themes"));
+var themes_default = "default" in defaultImport6 ? defaultImport6.default : defaultImport6;
+
+// esm-externals:@splunk/react-icons/ChevronRight
+var ChevronRight_exports = {};
+__export(ChevronRight_exports, {
+  default: () => ChevronRight_default
+});
+var defaultImport7 = __toESM(require("@splunk/react-icons/ChevronRight"));
+__reExport(ChevronRight_exports, require("@splunk/react-icons/ChevronRight"));
+var ChevronRight_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
+
+// esm-externals:@splunk/react-icons/ChevronLeft
+var ChevronLeft_exports = {};
+__export(ChevronLeft_exports, {
+  default: () => ChevronLeft_default
+});
+var defaultImport8 = __toESM(require("@splunk/react-icons/ChevronLeft"));
+__reExport(ChevronLeft_exports, require("@splunk/react-icons/ChevronLeft"));
+var ChevronLeft_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
+
+// esm-externals:@splunk/ui-utils/i18n
+var i18n_exports = {};
+__export(i18n_exports, {
+  default: () => i18n_default
+});
+var defaultImport9 = __toESM(require("@splunk/ui-utils/i18n"));
+__reExport(i18n_exports, require("@splunk/ui-utils/i18n"));
+var i18n_default = "default" in defaultImport9 ? defaultImport9.default : defaultImport9;
+
+// esm-externals:@splunk/dashboard-state
+var dashboard_state_exports = {};
+__export(dashboard_state_exports, {
+  default: () => dashboard_state_default
+});
+var defaultImport10 = __toESM(require("@splunk/dashboard-state"));
+__reExport(dashboard_state_exports, require("@splunk/dashboard-state"));
+var dashboard_state_default = "default" in defaultImport10 ? defaultImport10.default : defaultImport10;
+
+// esm-externals:@splunk/react-ui/ScreenReaderContent
+var ScreenReaderContent_exports = {};
+__export(ScreenReaderContent_exports, {
+  default: () => ScreenReaderContent_default
+});
+var defaultImport11 = __toESM(require("@splunk/react-ui/ScreenReaderContent"));
+__reExport(ScreenReaderContent_exports, require("@splunk/react-ui/ScreenReaderContent"));
+var ScreenReaderContent_default = "default" in defaultImport11 ? defaultImport11.default : defaultImport11;
+
+// esm-externals:@splunk/react-icons/CaretDown
+var CaretDown_exports = {};
+__export(CaretDown_exports, {
+  default: () => CaretDown_default
+});
+var defaultImport12 = __toESM(require("@splunk/react-icons/CaretDown"));
+__reExport(CaretDown_exports, require("@splunk/react-icons/CaretDown"));
+var CaretDown_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
+
+// src/Item.tsx
+var Item_default = styled_components_default.div``;
+
+// src/IconButton.tsx
+var StyledDropdownIcon = styled_components_default(CaretDown_default)`
+    margin-left: -5px;
+`;
+var iconSize = 24;
+var menuIconSize = 20;
+var prepareIcon = (_a) => {
+  var _b = _a, {
+    Icon,
+    screenReaderContent,
+    isMenu = false
+  } = _b, props = __objRest(_b, [
+    "Icon",
+    "screenReaderContent",
+    "isMenu"
+  ]);
+  const size = isMenu ? menuIconSize : iconSize;
+  return /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, /* @__PURE__ */ react_default.createElement(Icon, __spreadValues({ width: size, height: size }, props)), isMenu && /* @__PURE__ */ react_default.createElement(StyledDropdownIcon, { variant: "filled", width: 9, height: size }), screenReaderContent && /* @__PURE__ */ react_default.createElement(ScreenReaderContent_default, null, screenReaderContent));
+};
+var IconButton = (_a) => {
+  var _b = _a, {
+    icon: icon9,
+    buttonRef,
+    disabled = false,
+    onClick,
+    label,
+    testLabel
+  } = _b, rest = __objRest(_b, [
+    "icon",
+    "buttonRef",
+    "disabled",
+    "onClick",
+    "label",
+    "testLabel"
+  ]);
+  return /* @__PURE__ */ react_default.createElement(Item_default, __spreadValues({}, rest), /* @__PURE__ */ react_default.createElement(
+    Button_default,
+    {
+      elementRef: buttonRef,
+      onClick,
+      disabled,
+      appearance: "subtle",
+      icon: icon9,
+      label,
+      "data-test": testLabel,
+      "data-clickable": true
+    }
+  ));
+};
+var IconButton_default = IconButton;
+
+// src/CollapsibleToolbar.tsx
+var TOOLBAR_HEIGHT = 48;
+var ToolbarWrapper = styled_components_default.div`
+    display: flex;
+    align-items: center;
+    position: absolute;
+    right: 0;
+    z-index: 6;
+    height: ${TOOLBAR_HEIGHT}px;
+    background-color: ${themes_exports.variables.backgroundColorNavigation};
+    color: ${themes_exports.variables.contentColorDefault};
+    box-shadow: ${themes_exports.variables.overlayShadow};
+    border-radius: 0 0 0 20px;
+`;
+var StyledTransitionOpen = styled_components_default(TransitionOpen_default)`
+    border-right: ${({ open }) => open ? "solid" : "none"};
+    border-width: 0 1px 0 0;
+    border-color: ${themes_exports.variables.interactiveColorBorder};
+`;
+var ToolbarItemsWrapper = styled_components_default.div`
+    display: flex;
+    padding: 2px 4px 2px 8px;
+    gap: ${themes_exports.variables.spacingSmall};
+    margin-inline-end: ${themes_exports.variables.spacingSmall};
+`;
+var transition = styled_components_exports.css`
+    transition-duration: 0.2s;
+    transition-timing-function: ease-in-out;
+`;
+var ExpandButton = styled_components_default(Button_default)`
+    // To get specific enough to override the default Button styling
+    && {
+        // We shrink the button a bit when the toolbar is expanded since it
+        // switches to a circle button and needs a bit more space to breath
+        height: ${({ expanded }) => expanded ? `${TOOLBAR_HEIGHT - 4}px` : `${TOOLBAR_HEIGHT}px`};
+        width: ${({ expanded }) => expanded ? `${TOOLBAR_HEIGHT - 4}px` : `${TOOLBAR_HEIGHT}px`};
+        margin: ${({ expanded }) => expanded ? "0 4px 0 4px" : "0"};
+        padding: 0;
+        border: none;
+        box-shadow: none;
+        background-color: ${themes_exports.variables.backgroundColorNavigation};
+        border-radius: ${(props) => props.expanded ? "40px" : "0 0 0 20px"};
+        transition-property: border-radius, height, width, margin-right;
+        ${transition}
+    }
+`;
+var expandedIcon = /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, /* @__PURE__ */ react_default.createElement(ChevronRight_default, { width: iconSize, height: iconSize }), /* @__PURE__ */ react_default.createElement(ScreenReaderContent_default, null, (0, i18n_exports._)("Expanded")));
+var collapsedIcon = /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, /* @__PURE__ */ react_default.createElement(ChevronLeft_default, { width: iconSize, height: iconSize }), /* @__PURE__ */ react_default.createElement(ScreenReaderContent_default, null, (0, i18n_exports._)("Collapsed")));
+var DEFAULT_PRESET_MAP = Object.freeze({});
+var CollapsibleToolbar = ({
+  preset = DEFAULT_PRESET_MAP,
+  dashboardApi,
+  initialExpanded = true,
+  mode = "view",
+  toolbarItems = []
+}) => {
+  const apiRegistry = (0, dashboard_context_exports.useApiRegistry)();
+  const [expanded, setExpanded] = (0, react_exports.useState)(initialExpanded);
+  const handleExpandToggle = (0, react_exports.useCallback)(
+    () => setExpanded((prevExpanded) => !prevExpanded),
+    []
+  );
+  const layoutType = (0, dashboard_state_exports.useSelector)(dashboard_state_exports.selectLayoutType);
+  const injectedToolbarItems = (0, react_exports.useMemo)(
+    () => toolbarItems.map(
+      (item) => (0, react_exports.cloneElement)(item, {
+        mode,
+        preset,
+        layoutType,
+        dashboardApi,
+        borders: false
+      })
+    ),
+    [toolbarItems, mode, preset, dashboardApi, layoutType]
+  );
+  const ExpandButtonIcon = (0, react_exports.useMemo)(
+    () => expanded ? expandedIcon : collapsedIcon,
+    [expanded]
+  );
+  (0, react_exports.useEffect)(() => {
+    const toolbarApiRef = {
+      toggle: () => handleExpandToggle(),
+      expand: () => setExpanded(true),
+      collapse: () => setExpanded(false)
+    };
+    apiRegistry.registerToolbarApi(toolbarApiRef);
+    return () => {
+      apiRegistry.removeToolbarApi();
+    };
+  }, [apiRegistry, handleExpandToggle]);
+  return /* @__PURE__ */ react_default.createElement(ToolbarWrapper, { "data-test": "dashboard-toolbar" }, /* @__PURE__ */ react_default.createElement(StyledTransitionOpen, { animation: "slideFromRight", open: expanded }, /* @__PURE__ */ react_default.createElement(ToolbarItemsWrapper, { "data-test": "toolbar-items" }, injectedToolbarItems)), /* @__PURE__ */ react_default.createElement(
+    ExpandButton,
+    {
+      "data-test": "expand-button",
+      expanded,
+      onClick: handleExpandToggle,
+      icon: ExpandButtonIcon,
+      "data-clickable": true
+    }
+  ));
+};
+CollapsibleToolbar.displayName = "CollapsibleToolbar";
+var CollapsibleToolbar_default = CollapsibleToolbar;
+
+// esm-externals:@splunk/dashboard-utils
+var dashboard_utils_exports = {};
+__export(dashboard_utils_exports, {
+  default: () => dashboard_utils_default
+});
+var defaultImport13 = __toESM(require("@splunk/dashboard-utils"));
+__reExport(dashboard_utils_exports, require("@splunk/dashboard-utils"));
+var dashboard_utils_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
+
+// src/components/ItemSeparator.tsx
+var ItemSeparator = styled_components_default.div`
+    border-left-width: 1px;
+    border-left-style: solid;
+    border-left-color: ${themes_exports.variables.interactiveColorBorder};
+    width: 0px;
+    height: ${themes_exports.variables.inputHeight};
+`;
+var ItemSeparator_default = ItemSeparator;
+
+// src/ItemGroup.tsx
+var Group = styled_components_default.div.attrs({
+  "data-test": "toolbar-item-group"
+})`
+    display: flex;
+    flex-direction: row;
+    gap: ${(props) => props.gap};
+`;
+var ItemGroup = (_a) => {
+  var _b = _a, {
+    children,
+    borders = true,
+    gap
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "borders",
+    "gap"
+  ]);
+  const items = react_default.Children.map(
+    children,
+    (child) => child && react_default.cloneElement(child, rest)
+  );
+  const separator = borders ? /* @__PURE__ */ react_default.createElement(ItemSeparator_default, null) : null;
+  return /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, /* @__PURE__ */ react_default.createElement(Group, { gap: (0, dashboard_utils_exports.toPx)(gap, 2) }, items), separator);
+};
+var ItemGroup_default = ItemGroup;
+
+// src/PopoverItemButton.tsx
+var StyledContentWrapper = styled_components_default.span`
+    display: flex;
+    flex-direction: row;
+    justify-content: left;
+    align-items: center;
+    max-width: 100%;
+`;
+var StyledIcon = styled_components_default.span`
+    display: inline-block;
+    padding-right: 8px;
+`;
+var StyledLabel = styled_components_default.span`
+    text-overflow: ellipsis;
+    overflow: hidden;
+    flex: 0 1 auto;
+`;
+var PopoverItemButton = ({ icon: icon9, label }) => /* @__PURE__ */ react_default.createElement(StyledContentWrapper, null, icon9 && /* @__PURE__ */ react_default.createElement(StyledIcon, null, icon9), label && /* @__PURE__ */ react_default.createElement(StyledLabel, { "data-test": "label-title" }, label));
+var PopoverItemButton_default = PopoverItemButton;
+
+// esm-externals:@splunk/themes/mixins
+var mixins_exports = {};
+__export(mixins_exports, {
+  default: () => mixins_default
+});
+var defaultImport14 = __toESM(require("@splunk/themes/mixins"));
+__reExport(mixins_exports, require("@splunk/themes/mixins"));
+var mixins_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
+
+// src/Toolbar.tsx
+var ToolbarWrapper2 = styled_components_default.div`
+    ${(0, mixins_exports.reset)("flex")};
+    justify-content: space-between;
+    color: ${themes_exports.variables.contentColorDefault};
+    padding: 5px 5px 5px 8px;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-bottom-color: ${themes_exports.variables.borderColor};
+    flex-wrap: wrap;
+    flex-shrink: 0;
+    background-color: ${themes_exports.variables.backgroundColorNavigation};
+`;
+var LeftAlignItems = styled_components_default.div`
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    gap: ${themes_exports.variables.spacingSmall};
+`;
+var RightAlignItems = styled_components_default.div`
+    flex-basis: auto;
+    display: flex;
+    flex-direction: row;
+    gap: ${themes_exports.variables.spacingSmall};
+    margin-inline-end: ${themes_exports.variables.spacingSmall};
+`;
+var Toolbar = ({
+  activePanel,
+  dashboardApi,
+  mode,
+  preset,
+  toolbarItems
+}) => {
+  const layoutType = (0, dashboard_state_exports.useSelector)(dashboard_state_exports.selectLayoutType);
+  const toolbarRef = (0, react_exports.useRef)(null);
+  const injectDashboardProps = (0, react_exports.useCallback)(
+    (items) => {
+      const buttonProps = {
+        activePanel,
+        dashboardApi,
+        layoutType,
+        mode,
+        preset
+      };
+      return items.map((item) => react_default.cloneElement(item, buttonProps));
+    },
+    [activePanel, dashboardApi, layoutType, mode, preset]
+  );
+  const leftAlignItems = (0, react_exports.useMemo)(() => {
+    const items = toolbarItems.filter(
+      (item) => {
+        var _a;
+        return ((_a = item.props) == null ? void 0 : _a.align) !== "right";
+      }
+    );
+    return injectDashboardProps(items);
+  }, [toolbarItems, injectDashboardProps]);
+  const rightAlignItems = (0, react_exports.useMemo)(() => {
+    const items = toolbarItems.filter(
+      (item) => {
+        var _a;
+        return ((_a = item.props) == null ? void 0 : _a.align) === "right";
+      }
+    );
+    return injectDashboardProps(items);
+  }, [toolbarItems, injectDashboardProps]);
+  const observerRef = (0, react_exports.useRef)(null);
+  const isFirstRender = (0, react_exports.useRef)(true);
+  (0, react_exports.useEffect)(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return void 0;
+    }
+    observerRef.current = new MutationObserver(() => {
+      var _a, _b;
+      const firstFocusableButton = (_a = toolbarRef.current) == null ? void 0 : _a.querySelector(
+        'button:not([disabled]):not([aria-disabled="true"]):not([tabindex="-1"])'
+      );
+      firstFocusableButton == null ? void 0 : firstFocusableButton.focus();
+      (_b = observerRef.current) == null ? void 0 : _b.disconnect();
+    });
+    if (toolbarRef.current) {
+      observerRef.current.observe(toolbarRef.current, {
+        childList: true,
+        subtree: true
+      });
+    }
+    return () => {
+      var _a;
+      (_a = observerRef.current) == null ? void 0 : _a.disconnect();
+    };
+  }, [mode]);
+  if (!toolbarItems.length) {
+    return null;
+  }
+  return /* @__PURE__ */ react_default.createElement(ToolbarWrapper2, { "data-test": "dashboard-toolbar", ref: toolbarRef }, /* @__PURE__ */ react_default.createElement(LeftAlignItems, { key: "left-align-items", "data-test": "left-align-items" }, leftAlignItems), /* @__PURE__ */ react_default.createElement(
+    RightAlignItems,
+    {
+      key: "right-align-items",
+      "data-test": "right-align-items"
+    },
+    rightAlignItems
+  ));
+};
+Toolbar.displayName = "Toolbar";
+var Toolbar_default = Toolbar;
+
+// esm-externals:@splunk/react-ui/Dropdown
+var Dropdown_exports = {};
+__export(Dropdown_exports, {
+  default: () => Dropdown_default
+});
+var defaultImport15 = __toESM(require("@splunk/react-ui/Dropdown"));
+__reExport(Dropdown_exports, require("@splunk/react-ui/Dropdown"));
+var Dropdown_default = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
+
+// esm-externals:@splunk/react-ui/Menu
+var Menu_exports = {};
+__export(Menu_exports, {
+  default: () => Menu_default
+});
+var defaultImport16 = __toESM(require("@splunk/react-ui/Menu"));
+__reExport(Menu_exports, require("@splunk/react-ui/Menu"));
+var Menu_default = "default" in defaultImport16 ? defaultImport16.default : defaultImport16;
+
+// esm-externals:@splunk/react-icons/ChartColumn
+var ChartColumn_exports = {};
+__export(ChartColumn_exports, {
+  default: () => ChartColumn_default
+});
+var defaultImport17 = __toESM(require("@splunk/react-icons/ChartColumn"));
+__reExport(ChartColumn_exports, require("@splunk/react-icons/ChartColumn"));
+var ChartColumn_default = "default" in defaultImport17 ? defaultImport17.default : defaultImport17;
+
+// esm-externals:@splunk/dashboard-ui
+var dashboard_ui_exports = {};
+__export(dashboard_ui_exports, {
+  default: () => dashboard_ui_default
+});
+var defaultImport18 = __toESM(require("@splunk/dashboard-ui"));
+__reExport(dashboard_ui_exports, require("@splunk/dashboard-ui"));
+var dashboard_ui_default = "default" in defaultImport18 ? defaultImport18.default : defaultImport18;
+
+// src/hooks/useDropdown.ts
+var useDropdown = ({
+  isContentClickClose = true
+}) => {
+  const [isOpen, setIsOpen] = (0, react_exports.useState)(false);
+  const hasChildModal = (0, react_exports.useRef)(false);
+  const handleRequestClose = (0, react_exports.useCallback)(
+    ({ reason }) => {
+      if (reason === "contentClick" && !isContentClickClose) {
+        return;
+      }
+      if (reason === "escapeKey" && hasChildModal.current) {
+        return;
+      }
+      setIsOpen(false);
+    },
+    [isContentClickClose]
+  );
+  const handleRequestOpen = (0, react_exports.useCallback)(() => {
+    setIsOpen(true);
+  }, []);
+  const handleForceClose = (0, react_exports.useCallback)(() => {
+    setIsOpen(false);
+  }, []);
+  const setHasChildModal = (0, react_exports.useCallback)((value) => {
+    hasChildModal.current = value;
+  }, []);
+  return {
+    isOpen,
+    handleRequestOpen,
+    handleRequestClose,
+    handleForceClose,
+    setHasChildModal
+  };
+};
+var useDropdown_default = useDropdown;
+
+// src/components/StyledButton.tsx
+var StyledDropdownButton = styled_components_default(Button_default)`
+    max-width: '50px';
+`;
+
+// src/buttons/Charts.tsx
+var ScrollableMenu = styled_components_default(Menu_default).attrs(
+  ({ maxHeight }) => ({
+    style: {
+      maxHeight: maxHeight != null ? maxHeight : void 0
+    }
+  })
+)`
+    overflow-y: auto;
+`;
+var chartsDropdown = prepareIcon({
+  Icon: ChartColumn_default,
+  isMenu: true,
+  screenReaderContent: (0, i18n_exports._)("Add chart")
+});
+var ButtonToggle = /* @__PURE__ */ react_default.createElement(
+  StyledDropdownButton,
+  {
+    "data-test": "charts-button",
+    "data-clickable": true,
+    appearance: "subtle",
+    icon: chartsDropdown
+  }
+);
+var focusToggleReasons = [];
+var getVisualizationListFromTaxonomy = ({
+  taxonomy,
+  handleCreateVisualization
+}) => taxonomy.reduce(
+  (list, { visualizations, category }) => {
+    const availableVisualizations = visualizations.filter((props) => props.includeInToolbar);
+    if (availableVisualizations.length === 0) {
+      return list;
+    }
+    list.push(/* @__PURE__ */ react_default.createElement(Menu_default.Divider, { key: `menu-divider-${category}` }));
+    return list.concat(
+      availableVisualizations.map((vizProps) => {
+        const { label, type, initialOptions } = vizProps;
+        const Icon = vizProps.icon;
+        if (!type) {
+          return null;
+        }
+        const onClick = handleCreateVisualization({
+          type,
+          options: initialOptions
+        });
+        return /* @__PURE__ */ react_default.createElement(
+          Menu_default.Item,
+          {
+            "data-test": `add-${type}-button`,
+            "data-test-clickable": true,
+            onClick,
+            startAdornment: !!Icon && /* @__PURE__ */ react_default.createElement(Icon, { size: "18px" }),
+            key: `add-${type}-button`
+          },
+          label
+        );
+      })
+    );
+  },
+  []
+);
+var Charts = ({ dashboardApi, preset }) => {
+  const { showNewDataForViz = true } = (0, dashboard_context_exports.useFeatureFlags)();
+  const { family } = (0, themes_exports.useSplunkTheme)();
+  const { handleForceClose, handleRequestClose, handleRequestOpen, isOpen } = useDropdown_default({
+    isContentClickClose: false
+  });
+  const taxonomy = (0, react_exports.useMemo)(
+    () => new dashboard_ui_exports.VisualizationFilter(preset).taxonomy,
+    [preset]
+  );
+  const handleCreateVisualization = (0, react_exports.useCallback)(
+    ({
+      type,
+      options
+    }) => () => {
+      (0, dashboard_state_exports.batch)(() => {
+        dashboardApi == null ? void 0 : dashboardApi.createVisualization({
+          visualizationDefinition: { type, options }
+        });
+        if (showNewDataForViz) {
+          dashboardApi == null ? void 0 : dashboardApi.openPanel({
+            activePanel: "connectData",
+            panelProps: {
+              bindingType: "primary",
+              from: {
+                activePanel: "config"
+              }
+            }
+          });
+        }
+      });
+      handleForceClose();
+    },
+    [dashboardApi, showNewDataForViz, handleForceClose]
+  );
+  const visualizationList = (0, react_exports.useMemo)(
+    () => getVisualizationListFromTaxonomy({
+      taxonomy,
+      handleCreateVisualization
+    }),
+    [taxonomy, handleCreateVisualization]
+  );
+  const renderScrollableMenu = (0, react_exports.useCallback)(
+    ({ maxHeight }) => /* @__PURE__ */ react_default.createElement(
+      themes_exports.SplunkThemeProvider,
+      {
+        density: family === "enterprise" ? "comfortable" : "compact"
+      },
+      /* @__PURE__ */ react_default.createElement(
+        ScrollableMenu,
+        {
+          maxHeight,
+          "data-test": "add-chart-menu"
+        },
+        visualizationList
+      )
+    ),
+    [family, visualizationList]
+  );
+  return /* @__PURE__ */ react_default.createElement(Item_default, null, /* @__PURE__ */ react_default.createElement(
+    Dropdown_default,
+    {
+      focusToggleReasons,
+      onRequestClose: handleRequestClose,
+      onRequestOpen: handleRequestOpen,
+      open: isOpen,
+      toggle: ButtonToggle
+    },
+    renderScrollableMenu
+  ));
+};
+var Charts_default = Charts;
+
+// esm-externals:@splunk/react-icons/Cog
+var Cog_exports = {};
+__export(Cog_exports, {
+  default: () => Cog_default
+});
+var defaultImport19 = __toESM(require("@splunk/react-icons/Cog"));
+__reExport(Cog_exports, require("@splunk/react-icons/Cog"));
+var Cog_default = "default" in defaultImport19 ? defaultImport19.default : defaultImport19;
+
+// src/buttons/Config.tsx
+var configurationIcon = prepareIcon({
+  Icon: Cog_default,
+  screenReaderContent: (0, i18n_exports._)("Configuration")
+});
+var Config = ({ dashboardApi }) => {
+  const configButtonRef = (0, dashboard_context_exports.useToolbarRef)("config");
+  const handleClick = (0, react_exports.useCallback)(() => {
+    const isOpen = (dashboardApi == null ? void 0 : dashboardApi.getOpenedPanel()) === "config";
+    if (isOpen) {
+      dashboardApi == null ? void 0 : dashboardApi.closePanel();
+    } else {
+      dashboardApi == null ? void 0 : dashboardApi.openPanel({
+        activePanel: "config",
+        panelProps: {
+          focusOnOpen: true
+        }
+      });
+    }
+  }, [dashboardApi]);
+  return /* @__PURE__ */ react_default.createElement(
+    IconButton_default,
+    {
+      buttonRef: configButtonRef,
+      testLabel: "config-button",
+      onClick: handleClick,
+      icon: configurationIcon
+    }
+  );
+};
+var Config_default = Config;
+
+// esm-externals:@splunk/react-icons/ArrowBroadUnderbarDown
+var ArrowBroadUnderbarDown_exports = {};
+__export(ArrowBroadUnderbarDown_exports, {
+  default: () => ArrowBroadUnderbarDown_default
+});
+var defaultImport20 = __toESM(require("@splunk/react-icons/ArrowBroadUnderbarDown"));
+__reExport(ArrowBroadUnderbarDown_exports, require("@splunk/react-icons/ArrowBroadUnderbarDown"));
+var ArrowBroadUnderbarDown_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
+
+// src/buttons/ContentExport.tsx
+var icon = prepareIcon({
+  Icon: ArrowBroadUnderbarDown_default,
+  screenReaderContent: (0, i18n_exports._)("Export")
+});
+var ContentExport = ({ disabled, onClick }) => /* @__PURE__ */ react_default.createElement(
+  IconButton_default,
+  {
+    testLabel: "content-export-button",
+    onClick,
+    disabled: !!disabled,
+    icon
+  }
+);
+var ContentExport_default = ContentExport;
+
+// esm-externals:@splunk/react-icons/CylinderMulti
+var CylinderMulti_exports = {};
+__export(CylinderMulti_exports, {
+  default: () => CylinderMulti_default
+});
+var defaultImport21 = __toESM(require("@splunk/react-icons/CylinderMulti"));
+__reExport(CylinderMulti_exports, require("@splunk/react-icons/CylinderMulti"));
+var CylinderMulti_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
+
+// src/buttons/Data.tsx
+var dataInputIcon = prepareIcon({
+  Icon: CylinderMulti_default,
+  screenReaderContent: (0, i18n_exports._)("Data source overview")
+});
+var Data = ({ dashboardApi }) => {
+  const dataButtonRef = (0, dashboard_context_exports.useToolbarRef)("dataOverview");
+  const handleClick = (0, react_exports.useCallback)(() => {
+    const isOpen = (dashboardApi == null ? void 0 : dashboardApi.getOpenedPanel()) === "dataOverview";
+    if (isOpen) {
+      dashboardApi.closePanel();
+    } else {
+      (0, dashboard_state_exports.batch)(() => {
+        dashboardApi == null ? void 0 : dashboardApi.selectVisualization([]);
+        dashboardApi == null ? void 0 : dashboardApi.openPanel({
+          activePanel: "dataOverview",
+          panelProps: {
+            focusOnOpen: true
+          }
+        });
+      });
+    }
+  }, [dashboardApi]);
+  return /* @__PURE__ */ react_default.createElement(
+    IconButton_default,
+    {
+      buttonRef: dataButtonRef,
+      testLabel: "data-button",
+      onClick: handleClick,
+      icon: dataInputIcon
+    }
+  );
+};
+var Data_default = Data;
+
+// esm-externals:@splunk/react-icons/Square
+var Square_exports = {};
+__export(Square_exports, {
+  default: () => Square_default
+});
+var defaultImport22 = __toESM(require("@splunk/react-icons/Square"));
+__reExport(Square_exports, require("@splunk/react-icons/Square"));
+var Square_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
+
+// src/buttons/EmptyVisualization.tsx
+var icon2 = prepareIcon({
+  Icon: Square_default,
+  screenReaderContent: (0, i18n_exports._)("Add rectangle")
+});
+var EmptyVisualization = ({ dashboardApi }) => {
+  const handleClick = (0, react_exports.useCallback)(() => __async(void 0, null, function* () {
+    dashboardApi == null ? void 0 : dashboardApi.createVisualization({
+      visualizationDefinition: {
+        type: "splunk.rectangle",
+        options: {
+          fillColor: "transparent",
+          strokeColor: "transparent"
+        }
+      }
+    });
+    dashboardApi == null ? void 0 : dashboardApi.openPanel({
+      activePanel: "config"
+    });
+  }), [dashboardApi]);
+  return /* @__PURE__ */ react_default.createElement(
+    IconButton_default,
+    {
+      testLabel: "empty-viz-button",
+      onClick: handleClick,
+      icon: icon2
+    }
+  );
+};
+var EmptyVisualization_default = EmptyVisualization;
+
+// src/buttons/ExportDashboardButton.tsx
+var downloadIcon = /* @__PURE__ */ react_default.createElement(ArrowBroadUnderbarDown_default, null);
+var ExportDashboardButton = ({
+  appearance = "secondary",
+  scale = 1
+}) => {
+  const [open, setOpen] = (0, react_exports.useState)(false);
+  const handleOpen = (0, react_exports.useCallback)(() => {
+    setOpen(true);
+  }, []);
+  const handleClose = (0, react_exports.useCallback)(() => {
+    setOpen(false);
+  }, []);
+  return /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, /* @__PURE__ */ react_default.createElement(
+    Button_default,
+    {
+      icon: downloadIcon,
+      key: "export-dashboard-button",
+      "data-clickable": true,
+      "data-test": "export-dashboard-button",
+      label: (0, i18n_exports._)("Download"),
+      appearance: appearance || "secondary",
+      onClick: handleOpen
+    }
+  ), /* @__PURE__ */ react_default.createElement(
+    dashboard_ui_exports.ExportDashboardModal,
+    {
+      open,
+      onModalClose: handleClose,
+      scale,
+      returnFocus: dashboard_utils_exports.noop
+    }
+  ));
+};
+var ExportDashboardButton_default = ExportDashboardButton;
+
+// esm-externals:@splunk/react-icons/ChevronsOut
+var ChevronsOut_exports = {};
+__export(ChevronsOut_exports, {
+  default: () => ChevronsOut_default
+});
+var defaultImport23 = __toESM(require("@splunk/react-icons/ChevronsOut"));
+__reExport(ChevronsOut_exports, require("@splunk/react-icons/ChevronsOut"));
+var ChevronsOut_default = "default" in defaultImport23 ? defaultImport23.default : defaultImport23;
+
+// src/buttons/Fullscreen.tsx
+var icon3 = prepareIcon({
+  Icon: ChevronsOut_default,
+  screenReaderContent: (0, i18n_exports._)("Fullscreen")
+});
+var FullScreen = ({ dashboardApi }) => {
+  const isFullscreen = !!(0, dashboard_state_exports.useSelector)(dashboard_state_exports.selectFullscreenElement);
+  const handleClick = (0, react_exports.useCallback)(() => {
+    dashboardApi == null ? void 0 : dashboardApi.enterFullscreen();
+  }, [dashboardApi]);
+  return /* @__PURE__ */ react_default.createElement(
+    IconButton_default,
+    {
+      testLabel: "fullscreen-button",
+      onClick: handleClick,
+      disabled: isFullscreen,
+      icon: icon3
+    }
+  );
+};
+var Fullscreen_default = FullScreen;
+
+// esm-externals:@splunk/react-ui/Switch
+var Switch_exports = {};
+__export(Switch_exports, {
+  default: () => Switch_default
+});
+var defaultImport24 = __toESM(require("@splunk/react-ui/Switch"));
+__reExport(Switch_exports, require("@splunk/react-ui/Switch"));
+var Switch_default = "default" in defaultImport24 ? defaultImport24.default : defaultImport24;
+
+// src/buttons/GridLineSwitch.tsx
+var SwitchContainer = styled_components_default.div`
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    gap: ${themes_exports.variables.spacingSmall};
+`;
+var GridLineSwitch = ({
+  dashboardApi,
+  mode,
+  showSeparator,
+  layoutType
+}) => {
+  var _a;
+  const showGrid = (_a = (0, dashboard_state_exports.useSelector)(dashboard_state_exports.selectAreGridLinesEnabled)) != null ? _a : false;
+  const handleClick = (0, react_exports.useCallback)(() => {
+    dashboardApi == null ? void 0 : dashboardApi.toggleGridLines(!showGrid);
+  }, [dashboardApi, showGrid]);
+  const separator = (0, react_exports.useMemo)(
+    () => showSeparator ? /* @__PURE__ */ react_default.createElement(ItemSeparator_default, { key: "item-separator" }) : null,
+    [showSeparator]
+  );
+  if (!dashboardApi || mode !== "edit" || layoutType === "grid") {
+    return null;
+  }
+  return /* @__PURE__ */ react_default.createElement(SwitchContainer, { key: "grid-line-switch" }, /* @__PURE__ */ react_default.createElement(
+    Switch_default,
+    {
+      onClick: handleClick,
+      selected: showGrid,
+      selectedLabel: (0, i18n_exports._)("Gridlines displayed"),
+      unselectedLabel: (0, i18n_exports._)("Gridlines not displayed"),
+      appearance: "toggle",
+      "data-test": "gridline-toggle",
+      "data-clickable": true
+    },
+    (0, i18n_exports._)("Gridlines")
+  ), separator);
+};
+var GridLineSwitch_default = GridLineSwitch;
+
+// esm-externals:@splunk/react-icons/ChartSingleValueIcon
+var ChartSingleValueIcon_exports = {};
+__export(ChartSingleValueIcon_exports, {
+  default: () => ChartSingleValueIcon_default
+});
+var defaultImport25 = __toESM(require("@splunk/react-icons/ChartSingleValueIcon"));
+__reExport(ChartSingleValueIcon_exports, require("@splunk/react-icons/ChartSingleValueIcon"));
+var ChartSingleValueIcon_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
+
+// src/buttons/IconGallery.tsx
+var MenusContainer = styled_components_default.div`
+    display: flex;
+    padding: 5px;
+`;
+var iconGalleryDropdown = prepareIcon({
+  Icon: ChartSingleValueIcon_default,
+  screenReaderContent: (0, i18n_exports._)("Add icon"),
+  isMenu: true
+});
+var focusToggleReasons2 = [];
+var IconGallery = ({ dashboardApi }) => {
+  const {
+    handleForceClose,
+    handleRequestClose,
+    handleRequestOpen,
+    setHasChildModal,
+    isOpen
+  } = useDropdown_default({
+    isContentClickClose: false
+  });
+  const ButtonToggle6 = (0, react_exports.useMemo)(
+    () => /* @__PURE__ */ react_default.createElement(
+      StyledDropdownButton,
+      {
+        "data-test": "icon-gallery-button",
+        "data-clickable": true,
+        appearance: "subtle",
+        icon: iconGalleryDropdown
+      }
+    ),
+    []
+  );
+  const handlePanelClick = (0, react_exports.useCallback)(
+    (iconURL) => __async(void 0, null, function* () {
+      dashboardApi == null ? void 0 : dashboardApi.createVisualization({
+        visualizationDefinition: {
+          type: "splunk.singlevalueicon",
+          options: {
+            showValue: false,
+            icon: iconURL
+          }
+        }
+      });
+      dashboardApi == null ? void 0 : dashboardApi.openPanel({
+        activePanel: "config"
+      });
+      handleForceClose();
+    }),
+    [dashboardApi, handleForceClose]
+  );
+  return /* @__PURE__ */ react_default.createElement(Item_default, null, /* @__PURE__ */ react_default.createElement(
+    Dropdown_default,
+    {
+      focusToggleReasons: focusToggleReasons2,
+      onRequestClose: handleRequestClose,
+      onRequestOpen: handleRequestOpen,
+      open: isOpen,
+      toggle: ButtonToggle6
+    },
+    /* @__PURE__ */ react_default.createElement(MenusContainer, { "data-test": "icon-menu", "data-open": isOpen }, /* @__PURE__ */ react_default.createElement(
+      dashboard_ui_exports.IconGallery,
+      {
+        onClick: handlePanelClick,
+        setHasChildModal
+      }
+    ))
+  ));
+};
+var IconGallery_default = IconGallery;
+
+// esm-externals:@splunk/react-icons/QuestionCircle
+var QuestionCircle_exports = {};
+__export(QuestionCircle_exports, {
+  default: () => QuestionCircle_default
+});
+var defaultImport26 = __toESM(require("@splunk/react-icons/QuestionCircle"));
+__reExport(QuestionCircle_exports, require("@splunk/react-icons/QuestionCircle"));
+var QuestionCircle_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
+
+// src/buttons/HelpButton.tsx
+var focusToggleReasons3 = [];
+var HelpIcon = prepareIcon({
+  Icon: QuestionCircle_default,
+  screenReaderContent: (0, i18n_exports._)("Help links"),
+  isMenu: true
+});
+var ButtonToggle2 = /* @__PURE__ */ react_default.createElement(
+  StyledDropdownButton,
+  {
+    appearance: "subtle",
+    "data-clickable": true,
+    "data-test": "help-button",
+    icon: HelpIcon
+  }
+);
+var HelpButton = ({ helpLinks = [] }) => {
+  const { handleRequestClose, handleRequestOpen, isOpen } = useDropdown_default({
+    isContentClickClose: true
+  });
+  const HelpLinks = (0, react_exports.useMemo)(() => {
+    if (helpLinks.length === 0) {
+      return [
+        /* @__PURE__ */ react_default.createElement(
+          Menu_default.Item,
+          {
+            "data-test": "no-links-provided",
+            key: "no-links-provided",
+            disabled: true
+          },
+          (0, i18n_exports._)("No Links")
+        )
+      ];
+    }
+    return helpLinks.map((link) => {
+      const { label = "", description = "", url } = link;
+      const key = label.replace(/\s/g, "");
+      return /* @__PURE__ */ react_default.createElement(
+        Menu_default.Item,
+        {
+          "data-test": "help-link",
+          "data-test-clickable": true,
+          to: url,
+          description,
+          key: `help-link-${key}`,
+          openInNewContext: true
+        },
+        label
+      );
+    });
+  }, [helpLinks]);
+  return /* @__PURE__ */ react_default.createElement(Item_default, null, /* @__PURE__ */ react_default.createElement(
+    Dropdown_default,
+    {
+      focusToggleReasons: focusToggleReasons3,
+      onRequestClose: handleRequestClose,
+      onRequestOpen: handleRequestOpen,
+      open: isOpen,
+      toggle: ButtonToggle2
+    },
+    /* @__PURE__ */ react_default.createElement(Menu_default, null, HelpLinks)
+  ));
+};
+var HelpButton_default = HelpButton;
+
+// esm-externals:@splunk/react-icons/Picture
+var Picture_exports = {};
+__export(Picture_exports, {
+  default: () => Picture_default
+});
+var defaultImport27 = __toESM(require("@splunk/react-icons/Picture"));
+__reExport(Picture_exports, require("@splunk/react-icons/Picture"));
+var Picture_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
+
+// src/buttons/Image.tsx
+var icon4 = prepareIcon({
+  Icon: Picture_default,
+  screenReaderContent: (0, i18n_exports._)("Add image")
+});
+var Image = ({ dashboardApi }) => {
+  const handleClick = (0, react_exports.useCallback)(() => __async(void 0, null, function* () {
+    dashboardApi == null ? void 0 : dashboardApi.createVisualization({
+      visualizationDefinition: {
+        type: "splunk.image",
+        options: {
+          preserveAspectRatio: true
+        }
+      }
+    });
+    dashboardApi == null ? void 0 : dashboardApi.openPanel({
+      activePanel: "config"
+    });
+  }), [dashboardApi]);
+  return /* @__PURE__ */ react_default.createElement(
+    IconButton_default,
+    {
+      testLabel: "image-button",
+      onClick: handleClick,
+      icon: icon4
+    }
+  );
+};
+var Image_default = Image;
+
+// src/buttons/ImageGallery.tsx
+var MenusContainer2 = styled_components_default.div`
+    display: flex;
+    padding: 5px;
+`;
+var imageGalleryDropdown = prepareIcon({
+  Icon: Picture_default,
+  screenReaderContent: (0, i18n_exports._)("Add image"),
+  isMenu: true
+});
+var ButtonToggle3 = /* @__PURE__ */ react_default.createElement(
+  StyledDropdownButton,
+  {
+    "data-test": "image-gallery-button",
+    "data-clickable": true,
+    appearance: "subtle",
+    icon: imageGalleryDropdown
+  }
+);
+var focusToggleReasons4 = [];
+var ImageGallery = ({ dashboardApi }) => {
+  const {
+    handleForceClose,
+    handleRequestClose,
+    handleRequestOpen,
+    setHasChildModal,
+    isOpen
+  } = useDropdown_default({
+    isContentClickClose: false
+  });
+  const handlePanelClick = (0, react_exports.useCallback)(
+    (imageUrl) => __async(void 0, null, function* () {
+      dashboardApi == null ? void 0 : dashboardApi.createVisualization({
+        visualizationDefinition: {
+          type: "splunk.image",
+          options: {
+            preserveAspectRatio: true,
+            src: imageUrl
+          }
+        }
+      });
+      dashboardApi == null ? void 0 : dashboardApi.openPanel({
+        activePanel: "config"
+      });
+      handleForceClose();
+    }),
+    [dashboardApi, handleForceClose]
+  );
+  return /* @__PURE__ */ react_default.createElement(Item_default, null, /* @__PURE__ */ react_default.createElement(
+    Dropdown_default,
+    {
+      focusToggleReasons: focusToggleReasons4,
+      onRequestClose: handleRequestClose,
+      onRequestOpen: handleRequestOpen,
+      open: isOpen,
+      toggle: ButtonToggle3
+    },
+    /* @__PURE__ */ react_default.createElement(MenusContainer2, null, /* @__PURE__ */ react_default.createElement(
+      dashboard_ui_exports.ImageGallery,
+      {
+        onClick: handlePanelClick,
+        setHasChildModal
+      }
+    ))
+  ));
+};
+var ImageGallery_default = ImageGallery;
+
+// esm-externals:lodash
+var lodash_exports = {};
+__export(lodash_exports, {
+  default: () => lodash_default
+});
+var defaultImport28 = __toESM(require("lodash"));
+__reExport(lodash_exports, require("lodash"));
+var lodash_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
+
+// esm-externals:@splunk/react-icons/SlidersTripleHorizontal
+var SlidersTripleHorizontal_exports = {};
+__export(SlidersTripleHorizontal_exports, {
+  default: () => SlidersTripleHorizontal_default
+});
+var defaultImport29 = __toESM(require("@splunk/react-icons/SlidersTripleHorizontal"));
+__reExport(SlidersTripleHorizontal_exports, require("@splunk/react-icons/SlidersTripleHorizontal"));
+var SlidersTripleHorizontal_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
+
+// esm-externals:@splunk/dashboard-definition
+var dashboard_definition_exports = {};
+__export(dashboard_definition_exports, {
+  default: () => dashboard_definition_default
+});
+var defaultImport30 = __toESM(require("@splunk/dashboard-definition"));
+__reExport(dashboard_definition_exports, require("@splunk/dashboard-definition"));
+var dashboard_definition_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
+
+// src/buttons/Inputs.tsx
+var focusToggleReasons5 = [];
+var DEFAULT_PRESET_MAP2 = Object.freeze({});
+var addInputIcon = prepareIcon({
+  Icon: SlidersTripleHorizontal_default,
+  screenReaderContent: (0, i18n_exports._)("Add input"),
+  isMenu: true
+});
+var ButtonToggle4 = /* @__PURE__ */ react_default.createElement(
+  StyledDropdownButton,
+  {
+    appearance: "subtle",
+    "data-clickable": true,
+    "data-test": "inputs-button",
+    icon: addInputIcon
+  }
+);
+var onCreateInputClickFactory = ({
+  type,
+  defaultConfig,
+  tokenPrefix,
+  showToken,
+  dashboardApi
+}) => () => {
+  if (!dashboardApi) {
+    return;
+  }
+  const newConfig = __spreadProps(__spreadValues({}, defaultConfig), {
+    type,
+    options: __spreadValues({}, defaultConfig.options)
+  });
+  if (showToken) {
+    newConfig.options.token = dashboard_definition_exports.DashboardDefinition.fromJSON(
+      dashboardApi == null ? void 0 : dashboardApi.getDefinition()
+    ).nextTokenId(tokenPrefix);
+  }
+  dashboardApi.addInput(newConfig);
+  dashboardApi.openPanel({ activePanel: "config" });
+};
+var Inputs = ({
+  dashboardApi,
+  preset = DEFAULT_PRESET_MAP2
+}) => {
+  const { handleRequestClose, handleRequestOpen, isOpen } = useDropdown_default({
+    isContentClickClose: true
+  });
+  const InputTypeButtons = (0, react_exports.useMemo)(() => {
+    const buttons = [];
+    const inputs = preset == null ? void 0 : preset.inputs;
+    (0, lodash_exports.each)(inputs, (InputImpl, type) => {
+      const {
+        baseShape = {},
+        label = (0, i18n_exports._)(`${type} Input`),
+        description = "",
+        tokenPrefix = "token",
+        includeInToolbar = true,
+        icon: Icon = SlidersTripleHorizontal_default,
+        // showToken flags whether or not the input has a token assigned on creation
+        showToken = true
+      } = InputImpl.config || {};
+      if (!includeInToolbar) {
+        return;
+      }
+      const handleClick = onCreateInputClickFactory({
+        type,
+        defaultConfig: baseShape,
+        tokenPrefix,
+        showToken,
+        dashboardApi
+      });
+      const inputIcon = /* @__PURE__ */ react_default.createElement(Icon, { width: "24px", height: "24px" });
+      buttons.push(
+        /* @__PURE__ */ react_default.createElement(
+          Menu_default.Item,
+          {
+            "data-test": `add-${type}-button`,
+            "data-test-clickable": true,
+            onClick: handleClick,
+            startAdornment: inputIcon,
+            description,
+            key: `add-${type}-button`
+          },
+          label
+        )
+      );
+    });
+    if (buttons.length === 0) {
+      buttons.push(
+        /* @__PURE__ */ react_default.createElement(
+          Menu_default.Item,
+          {
+            "data-test": "no-inputs-in-preset",
+            key: "no-inputs-in-preset",
+            disabled: true
+          },
+          (0, i18n_exports._)("No Inputs")
+        )
+      );
+    }
+    return buttons;
+  }, [preset, dashboardApi]);
+  return /* @__PURE__ */ react_default.createElement(Item_default, null, /* @__PURE__ */ react_default.createElement(
+    Dropdown_default,
+    {
+      focusToggleReasons: focusToggleReasons5,
+      onRequestClose: handleRequestClose,
+      onRequestOpen: handleRequestOpen,
+      open: isOpen,
+      toggle: ButtonToggle4
+    },
+    /* @__PURE__ */ react_default.createElement(Menu_default, null, InputTypeButtons)
+  ));
+};
+var Inputs_default = Inputs;
+
+// esm-externals:@splunk/react-icons/Markdown
+var Markdown_exports = {};
+__export(Markdown_exports, {
+  default: () => Markdown_default
+});
+var defaultImport31 = __toESM(require("@splunk/react-icons/Markdown"));
+__reExport(Markdown_exports, require("@splunk/react-icons/Markdown"));
+var Markdown_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
+
+// src/buttons/Markdown.tsx
+var icon5 = prepareIcon({
+  Icon: Markdown_default,
+  screenReaderContent: (0, i18n_exports._)("Add markdown text")
+});
+var Markdown = ({ dashboardApi }) => {
+  const handleClick = (0, react_exports.useCallback)(() => {
+    dashboardApi == null ? void 0 : dashboardApi.createVisualization({
+      visualizationDefinition: {
+        type: "splunk.markdown",
+        options: {
+          markdown: ""
+        }
+      }
+    });
+    dashboardApi == null ? void 0 : dashboardApi.openPanel({
+      activePanel: "config"
+    });
+  }, [dashboardApi]);
+  return /* @__PURE__ */ react_default.createElement(
+    IconButton_default,
+    {
+      testLabel: "markdown-button",
+      onClick: handleClick,
+      icon: icon5
+    }
+  );
+};
+var Markdown_default2 = Markdown;
+
+// src/buttons/ModeSwitch.tsx
+var ModeSwitch = () => {
+  const mode = (0, dashboard_state_exports.useSelector)(dashboard_state_exports.selectMode);
+  const dashboardApi = (0, dashboard_context_exports.useDashboardApi)();
+  const appearance = mode === "edit" ? "secondary" : "primary";
+  const label = mode === "edit" ? (0, i18n_exports._)("View") : (0, i18n_exports._)("Edit");
+  const handleClick = (0, react_exports.useCallback)(() => {
+    dashboardApi == null ? void 0 : dashboardApi.switchMode(mode === "edit" ? "view" : "edit");
+  }, [mode, dashboardApi]);
+  return /* @__PURE__ */ react_default.createElement(Item_default, null, /* @__PURE__ */ react_default.createElement(
+    Button_default,
+    {
+      key: "mode-button",
+      "data-clickable": true,
+      "data-test": "mode-button",
+      inline: false,
+      label,
+      appearance,
+      onClick: handleClick
+    }
+  ));
+};
+var ModeSwitch_default = ModeSwitch;
+
+// esm-externals:@splunk/react-icons/ArrowBowRight
+var ArrowBowRight_exports = {};
+__export(ArrowBowRight_exports, {
+  default: () => ArrowBowRight_default
+});
+var defaultImport32 = __toESM(require("@splunk/react-icons/ArrowBowRight"));
+__reExport(ArrowBowRight_exports, require("@splunk/react-icons/ArrowBowRight"));
+var ArrowBowRight_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+
+// src/buttons/Redo.tsx
+var icon6 = prepareIcon({
+  Icon: ArrowBowRight_default,
+  screenReaderContent: (0, i18n_exports._)("Redo")
+});
+var Redo = ({ dashboardApi }) => {
+  const [canRedo, setCanRedo] = (0, react_exports.useState)(
+    () => {
+      var _a;
+      return (_a = dashboardApi == null ? void 0 : dashboardApi.canRedo()) != null ? _a : false;
+    }
+  );
+  const onDefinitionChange = (0, react_exports.useCallback)(() => {
+    var _a;
+    setCanRedo((_a = dashboardApi == null ? void 0 : dashboardApi.canRedo()) != null ? _a : false);
+  }, [dashboardApi]);
+  (0, react_exports.useEffect)(() => {
+    if (!(dashboardApi == null ? void 0 : dashboardApi.historyManager)) {
+      return () => void 0;
+    }
+    return dashboardApi.historyManager.subscribe({
+      onAdd: onDefinitionChange,
+      onUndo: onDefinitionChange,
+      onRedo: onDefinitionChange
+    });
+  }, [dashboardApi, onDefinitionChange]);
+  const handleClick = (0, react_exports.useCallback)(() => {
+    if (!dashboardApi) {
+      return;
+    }
+    dashboardApi.redo({ source: "toolbar" });
+  }, [dashboardApi]);
+  return /* @__PURE__ */ react_default.createElement(
+    IconButton_default,
+    {
+      testLabel: "redo-button",
+      onClick: handleClick,
+      disabled: !canRedo,
+      icon: icon6
+    }
+  );
+};
+var Redo_default = Redo;
+
+// esm-externals:@splunk/react-icons/Circle
+var Circle_exports = {};
+__export(Circle_exports, {
+  default: () => Circle_default
+});
+var defaultImport33 = __toESM(require("@splunk/react-icons/Circle"));
+__reExport(Circle_exports, require("@splunk/react-icons/Circle"));
+var Circle_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
+
+// esm-externals:@splunk/react-icons/Line
+var Line_exports = {};
+__export(Line_exports, {
+  default: () => Line_default
+});
+var defaultImport34 = __toESM(require("@splunk/react-icons/Line"));
+__reExport(Line_exports, require("@splunk/react-icons/Line"));
+var Line_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
+
+// esm-externals:@splunk/react-icons/ShapesVariety
+var ShapesVariety_exports = {};
+__export(ShapesVariety_exports, {
+  default: () => ShapesVariety_default
+});
+var defaultImport35 = __toESM(require("@splunk/react-icons/ShapesVariety"));
+__reExport(ShapesVariety_exports, require("@splunk/react-icons/ShapesVariety"));
+var ShapesVariety_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
+
+// src/buttons/Shapes.tsx
+var shapesDropdown = prepareIcon({
+  Icon: ShapesVariety_default,
+  screenReaderContent: (0, i18n_exports._)("Add shape"),
+  isMenu: true
+});
+var ButtonToggle5 = /* @__PURE__ */ react_default.createElement(
+  StyledDropdownButton,
+  {
+    appearance: "subtle",
+    "data-clickable": true,
+    "data-test": "shapes-button",
+    icon: shapesDropdown
+  }
+);
+var focusToggleReasons6 = [];
+var circleIcon = /* @__PURE__ */ react_default.createElement(Circle_default, null);
+var uncheckedBoxIcon = /* @__PURE__ */ react_default.createElement(Square_default, null);
+var lineIcon = /* @__PURE__ */ react_default.createElement(Line_default, null);
+var Shapes = ({ dashboardApi, layoutType }) => {
+  const supportLine = layoutType === "absolute";
+  const { handleRequestClose, handleRequestOpen, isOpen } = useDropdown_default({
+    isContentClickClose: true
+  });
+  const handleCreateVizButtonClick = (0, react_exports.useCallback)(
+    (vizToCreate, layoutItemType) => {
+      return () => {
+        dashboardApi == null ? void 0 : dashboardApi.createVisualization({
+          visualizationDefinition: vizToCreate,
+          layoutItemType
+        });
+        dashboardApi == null ? void 0 : dashboardApi.openPanel({ activePanel: "config" });
+      };
+    },
+    [dashboardApi]
+  );
+  return /* @__PURE__ */ react_default.createElement(Item_default, null, /* @__PURE__ */ react_default.createElement(
+    Dropdown_default,
+    {
+      focusToggleReasons: focusToggleReasons6,
+      onRequestClose: handleRequestClose,
+      onRequestOpen: handleRequestOpen,
+      open: isOpen,
+      toggle: ButtonToggle5
+    },
+    /* @__PURE__ */ react_default.createElement(Menu_default, { "data-test": "shapes-dropdown-children-container" }, /* @__PURE__ */ react_default.createElement(
+      Menu_default.Item,
+      {
+        "data-test": "ellipse-button",
+        onClick: handleCreateVizButtonClick({
+          type: "splunk.ellipse"
+        })
+      },
+      /* @__PURE__ */ react_default.createElement(
+        PopoverItemButton_default,
+        {
+          icon: circleIcon,
+          label: (0, i18n_exports._)("Ellipse")
+        }
+      )
+    ), /* @__PURE__ */ react_default.createElement(
+      Menu_default.Item,
+      {
+        "data-test": "rectangle-button",
+        onClick: handleCreateVizButtonClick({
+          type: "splunk.rectangle"
+        })
+      },
+      /* @__PURE__ */ react_default.createElement(
+        PopoverItemButton_default,
+        {
+          icon: uncheckedBoxIcon,
+          label: (0, i18n_exports._)("Rectangle")
+        }
+      )
+    ), supportLine && /* @__PURE__ */ react_default.createElement(
+      Menu_default.Item,
+      {
+        "data-test": "line-button",
+        onClick: handleCreateVizButtonClick(
+          {
+            type: "abslayout.line"
+          },
+          "line"
+        )
+      },
+      /* @__PURE__ */ react_default.createElement(
+        PopoverItemButton_default,
+        {
+          icon: lineIcon,
+          label: (0, i18n_exports._)("Line")
+        }
+      )
+    ))
+  ));
+};
+var Shapes_default = Shapes;
+
+// esm-externals:@splunk/react-icons/WindowChevronsSlash
+var WindowChevronsSlash_exports = {};
+__export(WindowChevronsSlash_exports, {
+  default: () => WindowChevronsSlash_default
+});
+var defaultImport36 = __toESM(require("@splunk/react-icons/WindowChevronsSlash"));
+__reExport(WindowChevronsSlash_exports, require("@splunk/react-icons/WindowChevronsSlash"));
+var WindowChevronsSlash_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
+
+// src/buttons/Source.tsx
+var icon7 = prepareIcon({
+  Icon: WindowChevronsSlash_default,
+  screenReaderContent: (0, i18n_exports._)("Source code")
+});
+var Source = ({ disabled = false, onClick }) => /* @__PURE__ */ react_default.createElement(
+  IconButton_default,
+  {
+    testLabel: "source-button",
+    onClick,
+    disabled,
+    icon: icon7
+  }
+);
+var Source_default = Source;
+
+// esm-externals:@splunk/react-icons/ListToken
+var ListToken_exports = {};
+__export(ListToken_exports, {
+  default: () => ListToken_default
+});
+var defaultImport37 = __toESM(require("@splunk/react-icons/ListToken"));
+__reExport(ListToken_exports, require("@splunk/react-icons/ListToken"));
+var ListToken_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
+
+// esm-externals:@splunk/react-ui/Tooltip
+var Tooltip_exports = {};
+__export(Tooltip_exports, {
+  default: () => Tooltip_default
+});
+var defaultImport38 = __toESM(require("@splunk/react-ui/Tooltip"));
+__reExport(Tooltip_exports, require("@splunk/react-ui/Tooltip"));
+var Tooltip_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
+
+// src/buttons/tokenManager/TokenManager.tsx
+var tokenManagerIcon = prepareIcon({
+  Icon: ListToken_default,
+  screenReaderContent: (0, i18n_exports._)("Token manager")
+});
+var TokenManager = ({ dashboardApi }) => {
+  const handleClick = (0, react_exports.useCallback)(() => {
+    const isOpen = (dashboardApi == null ? void 0 : dashboardApi.getOpenedPanel()) === "tokens";
+    if (isOpen) {
+      dashboardApi == null ? void 0 : dashboardApi.closePanel();
+    } else {
+      dashboardApi == null ? void 0 : dashboardApi.openPanel({
+        activePanel: "tokens",
+        panelProps: {
+          focusOnOpen: true
+        }
+      });
+    }
+  }, [dashboardApi]);
+  return /* @__PURE__ */ react_default.createElement(
+    Tooltip_default,
+    {
+      contentRelationship: "label",
+      content: (0, i18n_exports._)("Token manager"),
+      "data-test-label": "token-manager-button"
+    },
+    /* @__PURE__ */ react_default.createElement(
+      IconButton_default,
+      {
+        testLabel: "token-manager-button",
+        onClick: handleClick,
+        icon: tokenManagerIcon
+      }
+    )
+  );
+};
+
+// esm-externals:@splunk/react-icons/ArrowBowLeft
+var ArrowBowLeft_exports = {};
+__export(ArrowBowLeft_exports, {
+  default: () => ArrowBowLeft_default
+});
+var defaultImport39 = __toESM(require("@splunk/react-icons/ArrowBowLeft"));
+__reExport(ArrowBowLeft_exports, require("@splunk/react-icons/ArrowBowLeft"));
+var ArrowBowLeft_default = "default" in defaultImport39 ? defaultImport39.default : defaultImport39;
+
+// src/buttons/Undo.tsx
+var icon8 = prepareIcon({
+  Icon: ArrowBowLeft_default,
+  screenReaderContent: (0, i18n_exports._)("Undo")
+});
+var Undo = ({ dashboardApi }) => {
+  const [canUndo, setCanUndo] = (0, react_exports.useState)(
+    () => {
+      var _a;
+      return (_a = dashboardApi == null ? void 0 : dashboardApi.canUndo()) != null ? _a : false;
+    }
+  );
+  const onDefinitionChange = (0, react_exports.useCallback)(() => {
+    var _a;
+    setCanUndo((_a = dashboardApi == null ? void 0 : dashboardApi.canUndo()) != null ? _a : false);
+  }, [dashboardApi]);
+  (0, react_exports.useEffect)(() => {
+    if (!(dashboardApi == null ? void 0 : dashboardApi.historyManager)) {
+      return () => void 0;
+    }
+    return dashboardApi.historyManager.subscribe({
+      onAdd: onDefinitionChange,
+      onUndo: onDefinitionChange,
+      onRedo: onDefinitionChange
+    });
+  }, [dashboardApi, onDefinitionChange]);
+  const handleClick = (0, react_exports.useCallback)(() => {
+    if (!dashboardApi) {
+      return;
+    }
+    dashboardApi.undo({ source: "toolbar" });
+  }, [dashboardApi]);
+  return /* @__PURE__ */ react_default.createElement(
+    IconButton_default,
+    {
+      testLabel: "undo-button",
+      onClick: handleClick,
+      disabled: !canUndo,
+      icon: icon8
+    }
+  );
+};
+var Undo_default = Undo;
+
+// esm-externals:@splunk/dashboard-telemetry
+var dashboard_telemetry_exports = {};
+__export(dashboard_telemetry_exports, {
+  default: () => dashboard_telemetry_default
+});
+var defaultImport40 = __toESM(require("@splunk/dashboard-telemetry"));
+__reExport(dashboard_telemetry_exports, require("@splunk/dashboard-telemetry"));
+var dashboard_telemetry_default = "default" in defaultImport40 ? defaultImport40.default : defaultImport40;
+
+// esm-externals:@splunk/ui-utils/format
+var format_exports = {};
+__export(format_exports, {
+  default: () => format_default
+});
+var defaultImport41 = __toESM(require("@splunk/ui-utils/format"));
+__reExport(format_exports, require("@splunk/ui-utils/format"));
+var format_default = "default" in defaultImport41 ? defaultImport41.default : defaultImport41;
+
+// src/buttons/Zoom/ZoomMenu.tsx
+var zoomLevels = [25, 50, 100, 150, 200];
+var buttonStyle = {
+  borderTopLeftRadius: 0,
+  borderBottomLeftRadius: 0
+};
+var menuStyle = {
+  width: "200px"
+};
+var ZoomMenu = ({
+  dashboardApi,
+  appearance = "default",
+  currentScale,
+  setCurrentScale,
+  scaleType,
+  setScaleType
+}) => {
+  const handleZoomOutClick = (0, react_exports.useCallback)(() => {
+    setScaleType(null);
+    dashboardApi == null ? void 0 : dashboardApi.zoomOut();
+  }, [setScaleType, dashboardApi]);
+  const handleZoomInClick = (0, react_exports.useCallback)(() => {
+    setScaleType(null);
+    dashboardApi == null ? void 0 : dashboardApi.zoomIn();
+  }, [setScaleType, dashboardApi]);
+  const handleScaleChange = (0, react_exports.useCallback)(
+    (scale) => () => {
+      setCurrentScale(scale);
+      setScaleType(null);
+      dashboardApi == null ? void 0 : dashboardApi.setScale({ scale: scale / 100 });
+    },
+    [setScaleType, setCurrentScale, dashboardApi]
+  );
+  const handleFitToWidthClick = (0, react_exports.useCallback)(() => {
+    setScaleType("fit");
+    dashboardApi == null ? void 0 : dashboardApi.fitToWidth();
+  }, [setScaleType, dashboardApi]);
+  const handleAutoClick = (0, react_exports.useCallback)(() => {
+    setScaleType("auto");
+    dashboardApi == null ? void 0 : dashboardApi.fitToWidth({ maxScale: 1 });
+  }, [setScaleType, dashboardApi]);
+  const { handleRequestClose, handleRequestOpen, isOpen } = useDropdown_default({
+    isContentClickClose: true
+  });
+  const buttonToggle2 = /* @__PURE__ */ react_default.createElement(
+    Button_default,
+    {
+      "data-clickable": true,
+      "data-test": "zoom-dropdown-button",
+      style: buttonStyle,
+      appearance,
+      isMenu: true,
+      "aria-label": (0, format_exports.sprintf)((0, i18n_exports._)("Zoom level, %(currentScale)s%%"), {
+        currentScale
+      })
+    }
+  );
+  const isMacOS = (0, react_exports.useMemo)(() => (0, dashboard_utils_exports.isMac)(), []);
+  const dropdownMenuChildren = (0, react_exports.useMemo)(() => {
+    const zoomButtons = zoomLevels.map((percent) => {
+      return /* @__PURE__ */ react_default.createElement(
+        Menu_default.Item,
+        {
+          "data-test": `${percent}-percent`,
+          onClick: handleScaleChange(percent),
+          key: percent,
+          selectable: true,
+          selected: currentScale === percent && !scaleType
+        },
+        `${percent}%`
+      );
+    });
+    return [
+      /* @__PURE__ */ react_default.createElement(
+        Menu_default.Item,
+        {
+          "data-test": "auto",
+          onClick: handleAutoClick,
+          key: "auto",
+          selectable: true,
+          selected: scaleType === "auto"
+        },
+        (0, i18n_exports._)("Auto")
+      ),
+      /* @__PURE__ */ react_default.createElement(
+        Menu_default.Item,
+        {
+          "data-test": "fit-to-width",
+          onClick: handleFitToWidthClick,
+          key: "fit-to-width",
+          description: isMacOS ? (0, i18n_exports._)("Ctrl Cmd 0") : (0, i18n_exports._)("Ctrl Alt 0"),
+          descriptionPosition: "right",
+          selectable: true,
+          selected: scaleType === "fit"
+        },
+        (0, i18n_exports._)("Fit")
+      ),
+      /* @__PURE__ */ react_default.createElement(Menu_default.Divider, { key: "menu-divider-1" }),
+      ...zoomButtons,
+      /* @__PURE__ */ react_default.createElement(Menu_default.Divider, { key: "menu-divider-2" }),
+      /* @__PURE__ */ react_default.createElement(
+        Menu_default.Item,
+        {
+          "data-test": "zoom-in",
+          onClick: handleZoomInClick,
+          key: "zoom-in",
+          description: isMacOS ? (0, i18n_exports._)("Ctrl Cmd =") : (0, i18n_exports._)("Ctrl Alt ="),
+          descriptionPosition: "right",
+          selectable: true
+        },
+        (0, i18n_exports._)("Zoom in")
+      ),
+      /* @__PURE__ */ react_default.createElement(
+        Menu_default.Item,
+        {
+          "data-test": "zoom-out",
+          onClick: handleZoomOutClick,
+          key: "zoom-out",
+          description: isMacOS ? (0, i18n_exports._)("Ctrl Cmd -") : (0, i18n_exports._)("Ctrl Alt -"),
+          descriptionPosition: "right",
+          selectable: true
+        },
+        (0, i18n_exports._)("Zoom out")
+      )
+    ];
+  }, [
+    currentScale,
+    handleAutoClick,
+    scaleType,
+    handleFitToWidthClick,
+    isMacOS,
+    handleZoomInClick,
+    handleZoomOutClick,
+    handleScaleChange
+  ]);
+  return /* @__PURE__ */ react_default.createElement(
+    Dropdown_default,
+    {
+      onRequestClose: handleRequestClose,
+      onRequestOpen: handleRequestOpen,
+      open: isOpen,
+      toggle: buttonToggle2,
+      retainFocus: true
+    },
+    /* @__PURE__ */ react_default.createElement(
+      Menu_default,
+      {
+        style: menuStyle,
+        focusMode: "normal",
+        "aria-label": (0, i18n_exports._)("Zoom level")
+      },
+      dropdownMenuChildren
+    )
+  );
+};
+
+// esm-externals:@splunk/react-ui/Number
+var Number_exports = {};
+__export(Number_exports, {
+  default: () => Number_default
+});
+var defaultImport42 = __toESM(require("@splunk/react-ui/Number"));
+__reExport(Number_exports, require("@splunk/react-ui/Number"));
+var Number_default = "default" in defaultImport42 ? defaultImport42.default : defaultImport42;
+
+// src/buttons/Zoom/ZoomNumber.tsx
+var StyledNumber = styled_components_default(Number_default)`
+    padding-right: ${themes_exports.variables.spacingSmall};
+    & > input {
+        text-align: right;
+    }
+`;
+var StyledEndAdornment = styled_components_default.span`
+    color: ${themes_exports.variables.contentColorActive};
+`;
+var ZoomNumber = ({
+  currentScale,
+  onScaleChange
+}) => {
+  const onValueChange = (0, react_exports.useCallback)(
+    (e, value = 100) => {
+      onScaleChange(value)();
+    },
+    [onScaleChange]
+  );
+  const { handleChange, handleBlur, handleFocus, handleKeyPress } = (0, dashboard_ui_exports.useNumberInput)({
+    value: currentScale,
+    onValueChange
+  });
+  return /* @__PURE__ */ react_default.createElement(
+    StyledNumber,
+    {
+      value: currentScale,
+      onChange: handleChange,
+      onKeyDown: handleKeyPress,
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      step: 5,
+      min: 1,
+      max: 1e4,
+      roundTo: 0,
+      endAdornment: /* @__PURE__ */ react_default.createElement(StyledEndAdornment, null, "%"),
+      hideStepButtons: true,
+      "data-test": "zoom-number",
+      append: true
+    }
+  );
+};
+
+// src/buttons/Zoom/Zoom.tsx
+var Container = styled_components_default.div`
+    margin-inline-end: 0;
+    display: flex;
+    min-width: 96px;
+    gap: ${themes_exports.variables.spacingSmall};
+`;
+var StyledTooltip = styled_components_default(Tooltip_default)`
+    width: 110px;
+    & span {
+        display: flex;
+    }
+`;
+var Zoom = ({
+  showSeparator = true,
+  appearance = "default",
+  mode = "view"
+}) => {
+  const [currentScale, setCurrentScale] = (0, react_exports.useState)(100);
+  const [scaleType, setScaleType] = (0, react_exports.useState)(null);
+  const telemetry = (0, dashboard_telemetry_exports.useTelemetryApi)();
+  const dashboardApi = (0, dashboard_context_exports.useDashboardApi)();
+  const handleZoom = (0, react_exports.useCallback)((level) => {
+    if (level) {
+      setCurrentScale(Math.round(level * 100));
+    }
+  }, []);
+  const emitTelemetry = (0, react_exports.useMemo)(
+    () => (0, lodash_exports.debounce)(telemetry.emit.bind(telemetry), 500),
+    [telemetry]
+  );
+  (0, react_exports.useEffect)(() => {
+    emitTelemetry({
+      pageAction: "dashboard.zoom",
+      source: "toolbar",
+      event: "dashboard.zoom_level_change",
+      metadata: {
+        scale: currentScale,
+        scaleType,
+        mode
+      }
+    });
+  }, [currentScale, scaleType, emitTelemetry, mode]);
+  const activeTabId = (0, dashboard_state_exports.useSelector)(dashboard_state_exports.selectActiveTab);
+  (0, react_exports.useEffect)(() => {
+    var _a;
+    const subscription = (_a = dashboardApi == null ? void 0 : dashboardApi.getZoomLevel()) == null ? void 0 : _a.subscribe({ next: handleZoom });
+    return () => {
+      subscription == null ? void 0 : subscription.unsubscribe();
+    };
+  }, [dashboardApi, activeTabId, handleZoom]);
+  const separator = (0, react_exports.useMemo)(
+    () => showSeparator ? /* @__PURE__ */ react_default.createElement(ItemSeparator_default, { key: "item-separator" }) : null,
+    [showSeparator]
+  );
+  const handleScaleChange = (0, react_exports.useCallback)(
+    (scale) => () => {
+      setCurrentScale(scale);
+      setScaleType(null);
+      dashboardApi == null ? void 0 : dashboardApi.setScale({ scale: scale / 100 });
+    },
+    [dashboardApi]
+  );
+  return /* @__PURE__ */ react_default.createElement(Container, null, /* @__PURE__ */ react_default.createElement(
+    StyledTooltip,
+    {
+      contentRelationship: "label",
+      content: (0, i18n_exports._)("Zoom level")
+    },
+    /* @__PURE__ */ react_default.createElement(
+      ZoomNumber,
+      {
+        currentScale,
+        onScaleChange: handleScaleChange
+      }
+    ),
+    /* @__PURE__ */ react_default.createElement(
+      ZoomMenu,
+      {
+        dashboardApi,
+        appearance,
+        currentScale,
+        setCurrentScale,
+        scaleType,
+        setScaleType
+      }
+    )
+  ), separator);
+};
+
+// src/groups/ActionsGroup.tsx
+var menuStyle2 = {
+  width: "180px"
+};
+var buttonToggle = /* @__PURE__ */ react_default.createElement(
+  Button_default,
+  {
+    "data-clickable": true,
+    label: (0, i18n_exports._)("Actions"),
+    "data-test": "actions-dropdown-button",
+    isMenu: true,
+    appearance: "subtle"
+  }
+);
+var ActionsGroup = ({ children }) => {
+  const { handleRequestClose, handleRequestOpen, isOpen } = useDropdown_default({
+    isContentClickClose: true
+  });
+  return /* @__PURE__ */ react_default.createElement(
+    Dropdown_default,
+    {
+      onRequestClose: handleRequestClose,
+      onRequestOpen: handleRequestOpen,
+      open: isOpen,
+      toggle: buttonToggle
+    },
+    /* @__PURE__ */ react_default.createElement(Menu_default, { style: menuStyle2 }, children)
+  );
+};
+var ActionsGroup_default = ActionsGroup;
+
+// src/groups/ControlGroup.tsx
+var ControlGroup = (props) => /* @__PURE__ */ react_default.createElement(ItemGroup_default, __spreadValues({}, props), /* @__PURE__ */ react_default.createElement(Fullscreen_default, null));
+var ControlGroup_default = ControlGroup;
+
+// src/groups/EditingGroup.tsx
+var EditingGroup = (props) => {
+  const { enableModeSwitch = true, borders = true, layoutType } = props;
+  const { spacingSmall } = (0, themes_exports.useSplunkTheme)();
+  const modeSwitch = (0, react_exports.useMemo)(() => {
+    if (!enableModeSwitch) {
+      return null;
+    }
+    return /* @__PURE__ */ react_default.createElement(ModeSwitch_default, null);
+  }, [enableModeSwitch]);
+  const zoomControl = (0, react_exports.useMemo)(() => {
+    return layoutType === "absolute" ? [/* @__PURE__ */ react_default.createElement(Zoom, { key: "zoom", showSeparator: borders })] : null;
+  }, [layoutType, borders]);
+  return /* @__PURE__ */ react_default.createElement(ItemGroup_default, __spreadProps(__spreadValues({}, props), { borders: false, gap: spacingSmall }), /* @__PURE__ */ react_default.createElement(GridLineSwitch_default, { showSeparator: enableModeSwitch && borders }), zoomControl, modeSwitch);
+};
+var EditingGroup_default = EditingGroup;
+
+// src/groups/EditorGroup.tsx
+var EditorGroup = (props) => {
+  var _a;
+  return /* @__PURE__ */ react_default.createElement(ItemGroup_default, __spreadValues({ borders: false }, props), /* @__PURE__ */ react_default.createElement(Source_default, { onClick: (_a = props.sourceButtonOnClick) != null ? _a : dashboard_utils_exports.noop }));
+};
+var EditorGroup_default = EditorGroup;
+
+// src/groups/EditorsControlGroup.tsx
+var EditorsControlGroup = (props) => {
+  var _a;
+  return /* @__PURE__ */ react_default.createElement(ItemGroup_default, __spreadValues({ borders: false }, props), /* @__PURE__ */ react_default.createElement(Config_default, null), /* @__PURE__ */ react_default.createElement(Data_default, null), /* @__PURE__ */ react_default.createElement(Source_default, { onClick: (_a = props.sourceButtonOnClick) != null ? _a : dashboard_utils_exports.noop }));
+};
+var EditorsControlGroup_default = EditorsControlGroup;
+
+// src/groups/HistoryGroup.tsx
+var HistoryGroup = (props) => /* @__PURE__ */ react_default.createElement(ItemGroup_default, __spreadValues({}, props), /* @__PURE__ */ react_default.createElement(Undo_default, null), /* @__PURE__ */ react_default.createElement(Redo_default, null));
+var HistoryGroup_default = HistoryGroup;
+
+// src/groups/SidebarControlGroup.tsx
+var SidebarControlGroup = (props) => /* @__PURE__ */ react_default.createElement(ItemGroup_default, __spreadValues({}, props), /* @__PURE__ */ react_default.createElement(Config_default, null), /* @__PURE__ */ react_default.createElement(Data_default, null));
+var SidebarControlGroup_default = SidebarControlGroup;
+
+// src/groups/VisualizationGroup.tsx
+var VisualizationGroup = (props) => {
+  const buttons = (0, react_exports.useMemo)(() => {
+    if (props.layoutType === "grid") {
+      return [
+        /* @__PURE__ */ react_default.createElement(Charts_default, { key: "charts" }),
+        /* @__PURE__ */ react_default.createElement(Inputs_default, { key: "inputs" }),
+        /* @__PURE__ */ react_default.createElement(EmptyVisualization_default, { key: "empty-viz" }),
+        /* @__PURE__ */ react_default.createElement(Image_default, { key: "images" }),
+        /* @__PURE__ */ react_default.createElement(Markdown_default2, { key: "markdown" })
+      ];
+    }
+    return [
+      /* @__PURE__ */ react_default.createElement(Charts_default, { key: "charts" }),
+      /* @__PURE__ */ react_default.createElement(Inputs_default, { key: "inputs" }),
+      /* @__PURE__ */ react_default.createElement(IconGallery_default, { key: "icon-gallery" }),
+      /* @__PURE__ */ react_default.createElement(Shapes_default, { key: "shapes" }),
+      /* @__PURE__ */ react_default.createElement(Image_default, { key: "images" }),
+      /* @__PURE__ */ react_default.createElement(Markdown_default2, { key: "markdown" })
+    ];
+  }, [props.layoutType]);
+  return /* @__PURE__ */ react_default.createElement(ItemGroup_default, __spreadValues({}, props), buttons);
+};
+var VisualizationGroup_default = VisualizationGroup;
+//# sourceMappingURL=index.js.map