@servicetitan/anvil2 3.0.0 → 3.0.2

package/dist/Toolbar-QYRQv45Y.js

@@ -0,0 +1,780 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, useContext, useId, useRef, useCallback, useEffect, forwardRef, useState, useMemo } from 'react';
+import { B as Button } from './Button-Bnt8XUI7.js';
+import { T as Tooltip } from './Tooltip-lBmgi5ZB.js';
+import { g as getKeyboardFocusableElements } from './getKeyboardFocusableElements-B_U9rt6y.js';
+import { u as useIntersectionObserver } from './useIntersectionObserver-BEmMDO3P.js';
+import { c as cx } from './index-De1g9FRV.js';
+import { useTrackingId } from './useTrackingId.js';
+import { B as ButtonToggle } from './ButtonToggle-Ct9_5bhC.js';
+import { B as ButtonLink } from './ButtonLink-j3h_wRNi.js';
+import { S as SvgArrowDropDown } from './arrow_drop_down-ChAdBDux.js';
+import { L as Listbox } from './Listbox-BBrsMfO3.js';
+import { P as Popover } from './AiMark-DiMotaq3.js';
+import { F as Flex } from './Flex-DOUtHiPi.js';
+import { S as SvgMoreHoriz } from './more_horiz-DJgdQiy0.js';
+import { S as SvgMoreVert } from './more_vert-C_lJSyxt.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';
+import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
+
+import './Toolbar2.css';const OverflowItemContext = createContext({
+  isInOverflowMenu: false
+});
+const useOverFlowItemContext = () => useContext(OverflowItemContext);
+
+const ToolbarContext = createContext({
+  overflowItems: [],
+  addItem: () => {
+    return;
+  },
+  removeItem: () => {
+    return;
+  },
+  toolbarRef: { current: null },
+  orderedIds: [],
+  overflow: "wrap",
+  size: "xsmall"
+});
+const useToolbarSize = () => useContext(ToolbarContext).size;
+
+function getToolbarElements(toolbarElement) {
+  const toolbarContent = toolbarElement.querySelector(
+    '[data-anv="toolbar-content"]'
+  );
+  const mainItems = getKeyboardFocusableElements(toolbarContent).filter(
+    (item) => {
+      const isVisible = !item.closest('[aria-hidden="true"]');
+      const isNotInMenuContent = !item.closest('[data-anv="menu-content"]');
+      const isNotInPopoverContent = !item.closest(
+        '[data-anv="popover-content"]'
+      );
+      return isVisible && isNotInMenuContent && isNotInPopoverContent;
+    }
+  );
+  const overflowTrigger = toolbarElement.querySelector(
+    '[data-anv="toolbar-overflow-trigger"]'
+  );
+  return overflowTrigger ? [...mainItems, overflowTrigger] : mainItems;
+}
+function updateToolbarItemsTabIndex(toolbarElement, activeItem) {
+  if (!toolbarElement) return;
+  const items = getToolbarElements(toolbarElement);
+  if (!items.length) return;
+  let activeIndex = 0;
+  if (typeof activeItem === "number") {
+    activeIndex = Math.max(0, Math.min(activeItem, items.length - 1));
+  } else if (activeItem instanceof Element) {
+    const foundIndex = items.indexOf(activeItem);
+    if (foundIndex !== -1) {
+      activeIndex = foundIndex;
+    }
+  }
+  items.forEach((item, index) => {
+    item.setAttribute("tabindex", index === activeIndex ? "0" : "-1");
+  });
+  return items[activeIndex];
+}
+function handleToolbarKeyDown(event, toolbarElement) {
+  if (!toolbarElement || event.altKey || event.ctrlKey || event.metaKey) return;
+  const items = getToolbarElements(toolbarElement);
+  if (!items.length) return;
+  const activeElement = event.target;
+  if (!toolbarElement.contains(activeElement)) return;
+  const activeItem = items.find(
+    (item) => item === activeElement || Array.from(item.children).some((child) => child === activeElement)
+  );
+  const activeIndex = activeItem ? items.indexOf(activeItem) : -1;
+  if (activeIndex === -1) return;
+  let nextIndex = activeIndex;
+  const isVertical = toolbarElement.getAttribute("aria-orientation") === "vertical";
+  switch (event.key) {
+    case "ArrowLeft":
+    case "ArrowUp":
+      event.preventDefault();
+      if (isVertical && event.key === "ArrowUp" || !isVertical && event.key === "ArrowLeft") {
+        nextIndex = activeIndex <= 0 ? items.length - 1 : activeIndex - 1;
+      }
+      break;
+    case "ArrowRight":
+    case "ArrowDown":
+      event.preventDefault();
+      if (isVertical && event.key === "ArrowDown" || !isVertical && event.key === "ArrowRight") {
+        nextIndex = activeIndex >= items.length - 1 ? 0 : activeIndex + 1;
+      }
+      break;
+    case "Home":
+      event.preventDefault();
+      nextIndex = 0;
+      break;
+    case "End":
+      event.preventDefault();
+      nextIndex = items.length - 1;
+      break;
+    default:
+      return;
+  }
+  updateToolbarItemsTabIndex(toolbarElement, nextIndex);
+  items[nextIndex]?.focus();
+}
+const handleMenuKeyboardNavigation = (event) => {
+  const menuItems = Array.from(
+    event.currentTarget.querySelectorAll('[role="menuitem"]')
+  ).map((menuItem) => {
+    return getKeyboardFocusableElements(menuItem)[0] || menuItem;
+  });
+  if (!menuItems.length) return;
+  const currentIndex = menuItems.indexOf(document.activeElement);
+  if (currentIndex === -1) return;
+  let nextIndex = currentIndex;
+  const isModifierKey = event.altKey || event.ctrlKey || event.metaKey;
+  if (isModifierKey) return;
+  switch (event.key) {
+    case "ArrowDown":
+    case "ArrowUp": {
+      event.preventDefault();
+      const direction = event.key === "ArrowDown" ? 1 : -1;
+      nextIndex = (currentIndex + direction + menuItems.length) % menuItems.length;
+      break;
+    }
+    case "Home":
+      event.preventDefault();
+      nextIndex = 0;
+      break;
+    case "End":
+      event.preventDefault();
+      nextIndex = menuItems.length - 1;
+      break;
+    default:
+      return;
+  }
+  menuItems[nextIndex]?.focus();
+};
+
+const toolbar = "_toolbar_8m7of_1";
+const styles = {
+	toolbar: toolbar,
+	"toolbar-content": "_toolbar-content_8m7of_5",
+	"toolbar-overflow-content": "_toolbar-overflow-content_8m7of_9",
+	"toolbar-button-item": "_toolbar-button-item_8m7of_17",
+	"toolbar-button-toggle-item": "_toolbar-button-toggle-item_8m7of_26",
+	"toolbar-overflow-trigger": "_toolbar-overflow-trigger_8m7of_49",
+	"toolbar-item": "_toolbar-item_8m7of_60",
+	"overflow-collapse": "_overflow-collapse_8m7of_66"
+};
+
+const ToolbarItemWrapper = ({
+  item,
+  children
+}) => {
+  const { addItem, removeItem, toolbarRef, overflow } = useContext(ToolbarContext);
+  const itemId = useId();
+  const elementRef = useRef(null);
+  const prevIntersectingRef = useRef(true);
+  const isCollapseMode = overflow === "collapse";
+  const handleVisibilityChange = useCallback(
+    (isVisible) => {
+      if (!isCollapseMode || prevIntersectingRef.current === isVisible) return;
+      const itemWithId = { ...item, id: itemId };
+      if (isVisible) {
+        removeItem(itemWithId);
+      } else {
+        addItem(itemWithId);
+      }
+      prevIntersectingRef.current = isVisible;
+    },
+    [isCollapseMode, item, itemId, addItem, removeItem]
+  );
+  const { isIntersecting, ref } = useIntersectionObserver({
+    root: isCollapseMode ? toolbarRef.current : null,
+    threshold: 1,
+    initialIsIntersecting: false,
+    onChange: handleVisibilityChange
+  });
+  const setRefCallback = useCallback(
+    (node) => {
+      elementRef.current = node;
+      if (isCollapseMode) {
+        ref(node);
+      }
+    },
+    [ref, isCollapseMode]
+  );
+  const handleFocusOrClick = useCallback(() => {
+    if (!toolbarRef.current || !elementRef.current) return;
+    const currentElement = elementRef.current.querySelector("button, a, input");
+    if (!currentElement) return;
+    updateToolbarItemsTabIndex(toolbarRef.current, currentElement);
+  }, [toolbarRef]);
+  useEffect(() => {
+    const interactiveEl = elementRef.current?.querySelector("button, a, input");
+    if (!interactiveEl) return;
+    interactiveEl.addEventListener("focus", handleFocusOrClick);
+    interactiveEl.addEventListener("click", handleFocusOrClick);
+    return () => {
+      interactiveEl.removeEventListener("focus", handleFocusOrClick);
+      interactiveEl.removeEventListener("click", handleFocusOrClick);
+    };
+  }, [handleFocusOrClick]);
+  useEffect(() => {
+    if (isCollapseMode) {
+      prevIntersectingRef.current = true;
+    }
+  }, [isCollapseMode]);
+  const isHidden = isCollapseMode && !isIntersecting;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setRefCallback,
+      className: styles["toolbar-item"],
+      style: { visibility: isHidden ? "hidden" : "visible" },
+      "aria-hidden": isHidden,
+      ...{ inert: isHidden ? "" : void 0 },
+      "data-id": itemId,
+      "data-anv": "toolbar-item",
+      children
+    }
+  );
+};
+
+const ToolbarButton = forwardRef(
+  (props, ref) => {
+    const { appearance = "ghost", className, children, ...rest } = props;
+    const { isInOverflowMenu = false } = useOverFlowItemContext?.() || {};
+    const size = useToolbarSize();
+    const trackingId = useTrackingId({
+      name: "ToolbarButton",
+      data: {
+        disabled: props.disabled,
+        "aria-label": props["aria-label"],
+        children: props.children
+      },
+      hasOverride: !!props["data-tracking-id"]
+    });
+    const buttonClassNames = cx(className, styles["toolbar-button-item"]);
+    const item = children ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref,
+        "data-tracking-id": trackingId,
+        appearance,
+        size,
+        "data-anv": "toolbar-button",
+        className: buttonClassNames,
+        ...rest,
+        children
+      }
+    ) : /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(Tooltip.Trigger, { children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          ref,
+          "data-tracking-id": trackingId,
+          appearance,
+          size,
+          "data-anv": "toolbar-button",
+          className: buttonClassNames,
+          ...rest
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Tooltip.Content, { children: rest["aria-label"] })
+    ] });
+    if (isInOverflowMenu) {
+      return item;
+    }
+    return /* @__PURE__ */ jsx(ToolbarItemWrapper, { item: { itemProps: props, itemType: "button" }, children: item });
+  }
+);
+ToolbarButton.displayName = "ToolbarButton";
+
+const ToolbarButtonToggle = forwardRef((props, _ref) => {
+  const { className, children, ...rest } = props;
+  const { isInOverflowMenu = false } = useOverFlowItemContext?.() || {};
+  const size = useToolbarSize();
+  const trackingId = useTrackingId({
+    name: "ToolbarButtonToggle",
+    data: {
+      checked: props.checked,
+      disabled: props.disabled,
+      "aria-label": props["aria-label"],
+      children: props.children
+    },
+    hasOverride: !!props["data-tracking-id"]
+  });
+  const buttonToggleClassNames = cx(
+    className,
+    styles["toolbar-button-item"],
+    styles["toolbar-button-toggle-item"]
+  );
+  const item = children ? /* @__PURE__ */ jsx(
+    ButtonToggle,
+    {
+      "data-tracking-id": trackingId,
+      size,
+      "data-anv": "toolbar-button-toggle",
+      className: buttonToggleClassNames,
+      ...rest,
+      children
+    }
+  ) : /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(Tooltip.Trigger, { children: /* @__PURE__ */ jsx(
+      ButtonToggle,
+      {
+        "data-tracking-id": trackingId,
+        size,
+        "data-anv": "toolbar-button-toggle",
+        className: buttonToggleClassNames,
+        ...rest
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Tooltip.Content, { children: rest["aria-label"] })
+  ] });
+  if (isInOverflowMenu) {
+    return item;
+  }
+  return /* @__PURE__ */ jsx(ToolbarItemWrapper, { item: { itemProps: props, itemType: "buttonToggle" }, children: item });
+});
+ToolbarButtonToggle.displayName = "ToolbarButtonToggle";
+
+const ToolbarButtonLink = forwardRef((props, _ref) => {
+  const { appearance = "ghost", className, children, icon, ...rest } = props;
+  const { isInOverflowMenu = false } = useOverFlowItemContext?.() || {};
+  const size = useToolbarSize();
+  const trackingId = useTrackingId({
+    name: "ToolbarButtonLink",
+    data: {
+      href: props.href,
+      disabled: props.disabled,
+      "aria-label": props["aria-label"],
+      children: props.children,
+      target: props.target
+    },
+    hasOverride: !!props["data-tracking-id"]
+  });
+  const buttonLinkClassNames = cx(className, styles["toolbar-button-item"]);
+  const item = children ? /* @__PURE__ */ jsx(
+    ButtonLink,
+    {
+      "data-tracking-id": trackingId,
+      appearance,
+      size,
+      icon,
+      "data-anv": "toolbar-button-link",
+      className: buttonLinkClassNames,
+      ...rest,
+      children
+    }
+  ) : /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(Tooltip.Trigger, { children: /* @__PURE__ */ jsx(
+      ButtonLink,
+      {
+        "data-tracking-id": trackingId,
+        appearance,
+        size,
+        icon,
+        "data-anv": "toolbar-button-link",
+        className: buttonLinkClassNames,
+        ...rest,
+        children
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Tooltip.Content, { children: rest["aria-label"] })
+  ] });
+  if (isInOverflowMenu) {
+    return item;
+  }
+  return /* @__PURE__ */ jsx(ToolbarItemWrapper, { item: { itemProps: props, itemType: "buttonLink" }, children: item });
+});
+ToolbarButtonLink.displayName = "ToolbarButtonLink";
+
+const ToolbarSelect = forwardRef(
+  (props, _ref) => {
+    const {
+      appearance = "ghost",
+      onChange,
+      selected: selectedItemId,
+      accessibleLabel,
+      className,
+      items,
+      ...rest
+    } = props;
+    const selectId = useId();
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    const defaultId = items.length > 0 ? items[0].id : "";
+    const [internalSelectedId, setInternalSelectedId] = useState(defaultId);
+    const selectedId = selectedItemId ?? internalSelectedId;
+    const selectedItem = items.find((item2) => item2.id === selectedId) || items.find((item2) => item2.id === defaultId);
+    useEffect(() => {
+      if (!selectedItemId && items.length > 0 && !items.some((item2) => item2.id === internalSelectedId)) {
+        setInternalSelectedId(items[0].id);
+      }
+    }, [items, selectedItemId, internalSelectedId]);
+    const handleSelectionChange = (selected) => {
+      if (selected?.id) {
+        if (selectedItemId === void 0) {
+          setInternalSelectedId(selected.id);
+        }
+        onChange?.(selected.id);
+        setIsPopoverOpen(false);
+      }
+    };
+    const { isInOverflowMenu = false } = useOverFlowItemContext?.() || {};
+    const toolbarSize = useToolbarSize();
+    const trackingId = useTrackingId({
+      name: "ToolbarSelect",
+      data: {
+        selected: props.selected,
+        disabled: props.disabled,
+        "aria-label": props["aria-label"],
+        items: props.items
+      },
+      hasOverride: !!props["data-tracking-id"]
+    });
+    const buttonClassNames = cx(className, styles["toolbar-button-item"]);
+    const item = /* @__PURE__ */ jsxs(
+      Popover,
+      {
+        noPadding: true,
+        open: isPopoverOpen,
+        onClickOutside: () => {
+          setIsPopoverOpen(false);
+        },
+        onClose: () => {
+          setIsPopoverOpen(false);
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Popover.Button,
+            {
+              "data-tracking-id": trackingId,
+              appearance,
+              size: toolbarSize,
+              icon: { after: SvgArrowDropDown },
+              className: buttonClassNames,
+              id: selectId,
+              "data-anv": "toolbar-select",
+              onClick: () => {
+                setIsPopoverOpen(!isPopoverOpen);
+              },
+              ...rest,
+              children: selectedItem?.label
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Popover.Content,
+            {
+              className: styles["toolbar-select-content"],
+              "aria-label": accessibleLabel,
+              children: /* @__PURE__ */ jsx(
+                Listbox,
+                {
+                  selected: selectedItem,
+                  onSelectionChange: handleSelectionChange,
+                  items,
+                  "aria-labelledby": selectId,
+                  disableAutoSelectOnFocus: true,
+                  children: ({ items: items2 }) => items2.map((item2) => /* @__PURE__ */ jsx(Listbox.Option, { item: item2, children: item2.label }, item2.label))
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+    if (isInOverflowMenu) {
+      return item;
+    }
+    return /* @__PURE__ */ jsx(ToolbarItemWrapper, { item: { itemProps: props, itemType: "select" }, children: item });
+  }
+);
+ToolbarSelect.displayName = "ToolbarSelect";
+
+const OverflowItem = ({ itemType, itemProps }) => {
+  switch (itemType) {
+    case "button":
+      return /* @__PURE__ */ jsx(ToolbarButton, { ...itemProps });
+    case "buttonToggle":
+      return /* @__PURE__ */ jsx(ToolbarButtonToggle, { ...itemProps });
+    case "buttonLink":
+      return /* @__PURE__ */ jsx(ToolbarButtonLink, { ...itemProps });
+    case "select":
+      return /* @__PURE__ */ jsx(ToolbarSelect, { ...itemProps });
+    default:
+      return null;
+  }
+};
+const ToolbarOverflowMenu = ({
+  additionalItems,
+  direction
+}) => {
+  const { overflowItems, orderedIds } = useContext(ToolbarContext);
+  const menuTriggerId = useId();
+  const size = useToolbarSize();
+  const orderedItems = useMemo(() => {
+    const allElements = orderedIds?.map((id) => {
+      return overflowItems.find((item) => item.id === id);
+    });
+    return allElements?.filter((item) => item !== void 0) || [];
+  }, [orderedIds, overflowItems]);
+  const popoverButtonClassNames = cx(
+    styles["toolbar-button-item"],
+    styles["toolbar-overflow-trigger"]
+  );
+  const overflowIcon = direction === "horizontal" ? SvgMoreHoriz : SvgMoreVert;
+  return /* @__PURE__ */ jsxs(Popover, { noPadding: true, children: [
+    /* @__PURE__ */ jsx(
+      Popover.Button,
+      {
+        size,
+        appearance: "ghost",
+        id: menuTriggerId,
+        className: popoverButtonClassNames,
+        "data-anv": "toolbar-overflow-trigger",
+        "aria-label": "Additional toolbar options",
+        icon: overflowIcon
+      }
+    ),
+    /* @__PURE__ */ jsx(Popover.Content, { children: /* @__PURE__ */ jsx(OverflowItemContext.Provider, { value: { isInOverflowMenu: true }, children: /* @__PURE__ */ jsxs(
+      "ul",
+      {
+        role: "menu",
+        className: styles["toolbar-overflow-content"],
+        "data-anv": "toolbar-overflow-menu",
+        "aria-labelledby": menuTriggerId,
+        onKeyDown: handleMenuKeyboardNavigation,
+        children: [
+          orderedItems.map((item) => {
+            const { itemType, itemProps, id } = item;
+            return /* @__PURE__ */ jsx(
+              "li",
+              {
+                role: "menuitem",
+                "data-anv": "toolbar-overflow-item",
+                children: /* @__PURE__ */ jsx(
+                  OverflowItem,
+                  {
+                    itemType,
+                    itemProps,
+                    id
+                  }
+                )
+              },
+              `${itemType}-${id}`
+            );
+          }),
+          additionalItems?.map((item, index) => /* @__PURE__ */ jsx(
+            "li",
+            {
+              role: "menuitem",
+              "data-anv": "toolbar-overflow-item",
+              children: item
+            },
+            `additional-item-${index}`
+          ))
+        ]
+      }
+    ) }) })
+  ] });
+};
+
+const Toolbar = Object.assign(
+  forwardRef(function ToolbarInner(props, ref) {
+    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+    const {
+      associatedContent,
+      className,
+      children,
+      style,
+      direction = "horizontal",
+      overflow = "wrap",
+      onKeyDown,
+      additionalItems,
+      size = "xsmall",
+      ...rest
+    } = componentProps;
+    const [overflowItems, setOverflowItems] = useState([]);
+    const toolbarItemsRef = useRef(null);
+    const toolbarRef = useRef(null);
+    const [orderedIds, setOrderedIds] = useState([]);
+    useEffect(() => {
+      const newOrderedIds = Array.from(
+        toolbarItemsRef.current?.querySelectorAll("[data-id]") || []
+      ).map((el) => {
+        return el.getAttribute("data-id");
+      });
+      setOrderedIds(newOrderedIds);
+    }, [children]);
+    const addItem = useCallback((item) => {
+      setOverflowItems((prev) => [...prev, item]);
+    }, []);
+    const removeItem = useCallback((item) => {
+      setOverflowItems(
+        (prev) => prev.filter((component) => component.id !== item.id)
+      );
+    }, []);
+    useEffect(() => {
+      if (toolbarRef.current) {
+        updateToolbarItemsTabIndex(toolbarRef.current);
+      }
+    }, [children]);
+    const handleKeyDown = useCallback(
+      (event) => {
+        if (toolbarRef.current) {
+          handleToolbarKeyDown(event, toolbarRef.current);
+        }
+        onKeyDown?.(event);
+      },
+      [onKeyDown]
+    );
+    const showOverflowMenu = overflow === "collapse" && overflowItems.length > 0 || !!additionalItems;
+    const value = useMemo(
+      () => ({
+        overflowItems,
+        addItem,
+        removeItem,
+        toolbarRef,
+        orderedIds,
+        overflow,
+        size
+      }),
+      [
+        overflowItems,
+        addItem,
+        removeItem,
+        toolbarRef,
+        orderedIds,
+        overflow,
+        size
+      ]
+    );
+    const styleCombined = {
+      ...style,
+      ...layoutStyles
+    };
+    const toolbarClassNames = cx(styles["toolbar"], className);
+    const toolbarContentClassNames = cx(styles["toolbar-content"], {
+      [styles[`overflow-${overflow}`]]: overflow
+    });
+    return /* @__PURE__ */ jsx(ToolbarContext.Provider, { value, children: /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        direction: direction === "horizontal" ? "row" : "column",
+        wrap: overflow === "wrap" ? "wrap" : "nowrap",
+        alignItems: "center",
+        className: toolbarClassNames,
+        style: styleCombined,
+        ref: useMergeRefs([toolbarRef, ref]),
+        role: "toolbar",
+        "data-anv": "toolbar",
+        "aria-orientation": direction,
+        "aria-label": `Toolbar for ${associatedContent}. Use arrow keys to navigate through toolbar controls.`,
+        onKeyDown: handleKeyDown,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            Flex,
+            {
+              ref: useMergeRefs([toolbarItemsRef, ref]),
+              className: toolbarContentClassNames,
+              direction: direction === "horizontal" ? "row" : "column",
+              wrap: overflow === "wrap" ? "wrap" : "nowrap",
+              alignItems: "center",
+              grow: 1,
+              "data-anv": "toolbar-content",
+              children
+            }
+          ),
+          showOverflowMenu && /* @__PURE__ */ jsx(
+            ToolbarOverflowMenu,
+            {
+              direction,
+              additionalItems
+            }
+          )
+        ]
+      }
+    ) });
+  }),
+  {
+    /**
+     * ToolbarButton component for standard clickable actions within a toolbar with anvil2 tracking.
+     *
+     * Features:
+     * - Designed specifically for toolbar integration
+     * - Consistent styling with other toolbar items
+     * - Automatic tooltip for icon-only buttons
+     * - Overflow menu support
+     * - Accessibility enforcement for aria-labels
+     * - Ghost and primary appearance options
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Toolbar.Button icon={BoldIcon} aria-label="Bold text" />
+     *
+     * @example
+     * <Toolbar.Button appearance="primary">
+     *   Save
+     * </Toolbar.Button>
+     */
+    Button: ToolbarButton,
+    /**
+     * ToolbarButtonToggle component for toggleable actions within a toolbar with anvil2 tracking.
+     *
+     * Features:
+     * - Toggle state management
+     * - Designed specifically for toolbar integration
+     * - Consistent styling with other toolbar items
+     * - Overflow menu support
+     * - Accessibility enforcement for aria-labels
+     * - Ghost and primary appearance options
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Toolbar.ButtonToggle icon={BoldIcon} aria-label="Bold" checked={isBold} />
+     */
+    ButtonToggle: ToolbarButtonToggle,
+    /**
+     * ToolbarButtonLink component for link actions within a toolbar with anvil2 tracking.
+     *
+     * Features:
+     * - Link functionality with href support
+     * - Designed specifically for toolbar integration
+     * - Consistent styling with other toolbar items
+     * - Overflow menu support
+     * - Accessibility enforcement for aria-labels
+     * - Ghost and primary appearance options
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Toolbar.ButtonLink href="/help">
+     *   Help
+     * </Toolbar.ButtonLink>
+     */
+    ButtonLink: ToolbarButtonLink,
+    /**
+     * ToolbarSelect component provides a dropdown selector within a toolbar with anvil2 tracking.
+     *
+     * Features:
+     * - Dropdown menu with selectable options
+     * - Controlled and uncontrolled usage patterns
+     * - Automatic overflow menu integration
+     * - Accessibility support with proper ARIA labels
+     * - Ghost and primary appearance options
+     * - Dropdown arrow icon indicator
+     * - Listbox integration for keyboard navigation
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Toolbar.Select
+     *   items={fontOptions}
+     *   selected="arial"
+     *   accessibleLabel="Font family"
+     *   onChange={(id) => setFont(id)}
+     * />
+     */
+    Select: ToolbarSelect
+  }
+);
+Toolbar.displayName = "Toolbar";
+
+export { Toolbar as T };
+//# sourceMappingURL=Toolbar-QYRQv45Y.js.map