@servicetitan/anvil2 1.26.1 → 1.27.1

package/dist/Toolbar-BAvsl6fK.js

@@ -0,0 +1,710 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTrackingId } from './useTrackingId.js';
+import * as React from 'react';
+import { useState, useRef, useEffect, forwardRef, useId, createContext, useContext, useCallback, useMemo } from 'react';
+import { B as Button } from './Button-BHwg8Uip-DPU6y8-l.js';
+import { a as ButtonToggle, B as ButtonLink } from './ButtonToggle-9HqVrCoP-DsNu__N0.js';
+import { d as Popover } from './Popover-tcXHJePS-CMjz_uId.js';
+import { I as Icon } from './Icon-DbHA5GV1-DwO2aGkj.js';
+import { c as cx } from './index-tZvMCc77.js';
+import { b as Listbox } from './Listbox-CCUnPdBn-DwvTVF0i.js';
+import { S as SvgArrowDropDown } from './arrow_drop_down-ChAdBDux.js';
+import { g as getKeyboardFocusableElements } from './getKeyboardFocusableElements-QqcABz0D.js';
+import { F as Flex } from './Flex-pdHNcZrF-CdQdYhOU.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-C6qizVc6-BkgAan7h.js';
+import { u as useMergeRefs } from './useMergeRefs-Bde85AWI-Bde85AWI.js';
+
+import './Toolbar.css';const SvgMoreHoriz = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" }));
+
+function useIntersectionObserver({
+  threshold = 0,
+  root = null,
+  rootMargin = "0%",
+  freezeOnceVisible = false,
+  initialIsIntersecting = false,
+  onChange
+} = {}) {
+  const [ref, setRef] = useState(null);
+  const [state, setState] = useState(() => ({
+    isIntersecting: initialIsIntersecting,
+    entry: undefined
+  }));
+  const callbackRef = useRef();
+  callbackRef.current = onChange;
+  const frozen = state.entry?.isIntersecting && freezeOnceVisible;
+  useEffect(() => {
+    if (!ref) return;
+    if (!("IntersectionObserver" in window)) return;
+    if (frozen) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const thresholds = Array.isArray(observer.thresholds) ? observer.thresholds : [observer.thresholds];
+        entries.forEach((entry) => {
+          const isIntersecting = entry.isIntersecting && thresholds.some(
+            (threshold2) => entry.intersectionRatio >= threshold2
+          );
+          setState({ isIntersecting, entry });
+          if (callbackRef.current) {
+            callbackRef.current(isIntersecting, entry);
+          }
+        });
+      },
+      { threshold, root, rootMargin }
+    );
+    observer.observe(ref);
+    return () => {
+      observer.disconnect();
+    };
+  }, [
+    ref,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    JSON.stringify(threshold),
+    root,
+    rootMargin,
+    frozen,
+    freezeOnceVisible
+  ]);
+  const prevRef = useRef(null);
+  useEffect(() => {
+    if (!ref && state.entry?.target && !freezeOnceVisible && !frozen && prevRef.current !== state.entry.target) {
+      prevRef.current = state.entry.target;
+      setState({ isIntersecting: initialIsIntersecting, entry: undefined });
+    }
+  }, [ref, state.entry, freezeOnceVisible, frozen, initialIsIntersecting]);
+  const result = [
+    setRef,
+    !!state.isIntersecting,
+    state.entry
+  ];
+  result.ref = result[0];
+  result.isIntersecting = result[1];
+  result.entry = result[2];
+  return result;
+}
+
+const toolbar = "_toolbar_tcyhm_12";
+const styles = {
+	toolbar: toolbar,
+	"toolbar-content": "_toolbar-content_tcyhm_19",
+	"toolbar-overflow-content": "_toolbar-overflow-content_tcyhm_22",
+	"toolbar-button-item": "_toolbar-button-item_tcyhm_30",
+	"toolbar-item": "_toolbar-item_tcyhm_36",
+	"overflow-collapse": "_overflow-collapse_tcyhm_40",
+	"toolbar-button-toggle-item": "_toolbar-button-toggle-item_tcyhm_64",
+	"toolbar-overflow-trigger": "_toolbar-overflow-trigger_tcyhm_65"
+};
+
+function getToolbarElements(toolbarElement) {
+  const toolbarContent = toolbarElement.querySelector(
+    '[data-anv="toolbar-content"]'
+  );
+  const mainItems = getKeyboardFocusableElements(toolbarContent).filter(
+    (item) => {
+      const isVisible = !item.closest('[aria-hidden="true"]');
+      return isVisible;
+    }
+  );
+  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 ToolbarItemWrapper = ({
+  item,
+  children
+}) => {
+  const { addItem, removeItem, toolbarRef, overflow } = useContext(
+    ToolbarOverflowContext
+  );
+  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 ? "" : undefined },
+      "data-id": itemId,
+      "data-anv": "toolbar-item",
+      children
+    }
+  );
+};
+
+const ToolbarButtonToggle$1 = forwardRef((props, ref) => {
+  const { className, children, ...rest } = props;
+  const { isInOverflowMenu = false } = useOverFlowItemContext?.() || {};
+  const buttonToggleClassNames = cx(
+    className,
+    styles["toolbar-button-item"],
+    styles["toolbar-button-toggle-item"]
+  );
+  const item = /* @__PURE__ */ jsx(
+    ButtonToggle,
+    {
+      size: "small",
+      "data-anv": "toolbar-button-toggle",
+      className: buttonToggleClassNames,
+      ...rest,
+      children
+    }
+  );
+  if (isInOverflowMenu) {
+    return item;
+  }
+  return /* @__PURE__ */ jsx(ToolbarItemWrapper, { item: { itemProps: props, itemType: "buttonToggle" }, children: item });
+});
+ToolbarButtonToggle$1.displayName = "ToolbarButtonToggle";
+
+const ToolbarButtonLink$1 = forwardRef(
+  (props, ref) => {
+    const { appearance = "ghost", className, children, ...rest } = props;
+    const { isInOverflowMenu = false } = useOverFlowItemContext?.() || {};
+    const buttonLinkClassNames = cx(className, styles["toolbar-button-item"]);
+    const item = /* @__PURE__ */ jsx(
+      ButtonLink,
+      {
+        appearance,
+        size: "small",
+        "data-anv": "toolbar-button-link",
+        className: buttonLinkClassNames,
+        ...rest,
+        children
+      }
+    );
+    if (isInOverflowMenu) {
+      return item;
+    }
+    return /* @__PURE__ */ jsx(ToolbarItemWrapper, { item: { itemProps: props, itemType: "buttonLink" }, children: item });
+  }
+);
+ToolbarButtonLink$1.displayName = "ToolbarButtonLink";
+
+const ToolbarSelect$1 = forwardRef(
+  (props, ref) => {
+    const {
+      appearance = "ghost",
+      onChange,
+      selected: selectedItemId,
+      accessibleLabel,
+      className,
+      items,
+      ...rest
+    } = props;
+    const selectId = useId();
+    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 === undefined) {
+          setInternalSelectedId(selected.id);
+        }
+        onChange?.(selected.id);
+      }
+    };
+    const { isInOverflowMenu = false } = useOverFlowItemContext?.() || {};
+    const buttonClassNames = cx(className, styles["toolbar-button-item"]);
+    const item = /* @__PURE__ */ jsxs(Popover, { noPadding: true, children: [
+      /* @__PURE__ */ jsx(
+        Popover.Button,
+        {
+          appearance,
+          size: "small",
+          icon: { after: SvgArrowDropDown },
+          className: buttonClassNames,
+          id: selectId,
+          "data-anv": "toolbar-select",
+          ...rest,
+          children: selectedItem?.label
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Popover.Content,
+        {
+          className: styles["toolbar-select-content"],
+          "aria-label": `${accessibleLabel} options`,
+          children: /* @__PURE__ */ jsx(
+            Listbox,
+            {
+              selected: selectedItem,
+              onSelectionChange: handleSelectionChange,
+              items,
+              "aria-labelledby": selectId,
+              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$1.displayName = "ToolbarSelect";
+
+const OverflowItemContext = createContext({
+  isInOverflowMenu: false
+});
+const useOverFlowItemContext = () => useContext(OverflowItemContext);
+const OverflowItem = ({ itemType, itemProps }) => {
+  switch (itemType) {
+    case "button":
+      return /* @__PURE__ */ jsx(ToolbarButton$1, { ...itemProps });
+    case "buttonToggle":
+      return /* @__PURE__ */ jsx(ToolbarButtonToggle$1, { ...itemProps });
+    case "buttonLink":
+      return /* @__PURE__ */ jsx(ToolbarButtonLink$1, { ...itemProps });
+    case "select":
+      return /* @__PURE__ */ jsx(ToolbarSelect$1, { ...itemProps });
+    default:
+      return null;
+  }
+};
+const ToolbarOverflowMenu = ({
+  additionalItems
+}) => {
+  const { overflowItems, orderedIds } = useContext(ToolbarOverflowContext);
+  const menuTriggerId = useId();
+  const orderedItems = useMemo(() => {
+    const allElements = orderedIds?.map((id) => {
+      return overflowItems.find((item) => item.id === id);
+    });
+    return allElements?.filter((item) => item !== undefined) || [];
+  }, [orderedIds, overflowItems]);
+  const popoverButtonClassNames = cx(
+    styles["toolbar-button-item"],
+    styles["toolbar-overflow-trigger"]
+  );
+  return /* @__PURE__ */ jsxs(Popover, { noPadding: true, children: [
+    /* @__PURE__ */ jsx(
+      Popover.Button,
+      {
+        size: "small",
+        appearance: "secondary",
+        id: menuTriggerId,
+        className: popoverButtonClassNames,
+        "data-anv": "toolbar-overflow-trigger",
+        "aria-label": "Additional toolbar options",
+        children: /* @__PURE__ */ jsx(Icon, { svg: SvgMoreHoriz, size: "small" })
+      }
+    ),
+    /* @__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 ToolbarButton$1 = forwardRef(
+  (props, ref) => {
+    const { appearance = "ghost", className, children, ...rest } = props;
+    const { isInOverflowMenu = false } = useOverFlowItemContext?.() || {};
+    const buttonClassNames = cx(className, styles["toolbar-button-item"]);
+    const item = /* @__PURE__ */ jsx(
+      Button,
+      {
+        appearance,
+        size: "small",
+        "data-anv": "toolbar-button",
+        className: buttonClassNames,
+        ...rest,
+        children
+      }
+    );
+    if (isInOverflowMenu) {
+      return item;
+    }
+    return /* @__PURE__ */ jsx(ToolbarItemWrapper, { item: { itemProps: props, itemType: "button" }, children: item });
+  }
+);
+ToolbarButton$1.displayName = "ToolbarButton";
+
+const ToolbarOverflowContext = createContext({
+  overflowItems: [],
+  addItem: () => {
+    return;
+  },
+  removeItem: () => {
+    return;
+  },
+  toolbarRef: { current: null },
+  orderedIds: [],
+  overflow: "wrap"
+});
+const ToolbarElement$1 = forwardRef(
+  (props, ref) => {
+    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+    const {
+      associatedContent,
+      className,
+      children,
+      style,
+      direction = "horizontal",
+      overflow = "wrap",
+      onKeyDown,
+      additionalItems,
+      ...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
+      }),
+      [overflowItems, addItem, removeItem, toolbarRef, orderedIds, overflow]
+    );
+    const styleCombined = {
+      ...style,
+      ...layoutStyles
+    };
+    const toolbarClassNames = cx(styles["toolbar"], className);
+    const toolbarContentClassNames = cx(styles["toolbar-content"], {
+      [styles[`overflow-${overflow}`]]: overflow
+    });
+    return /* @__PURE__ */ jsx(ToolbarOverflowContext.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, { additionalItems })
+        ]
+      }
+    ) });
+  }
+);
+ToolbarElement$1.displayName = "Toolbar";
+const Toolbar$1 = Object.assign(ToolbarElement$1, {
+  Button: ToolbarButton$1,
+  ButtonToggle: ToolbarButtonToggle$1,
+  ButtonLink: ToolbarButtonLink$1,
+  Select: ToolbarSelect$1
+});
+
+function ToolbarElement(props) {
+  const trackingId = useTrackingId({
+    name: "Toolbar",
+    data: {
+      overflow: props.overflow,
+      direction: props.direction,
+      associatedContent: props.associatedContent
+    },
+    hasOverride: !!props["data-tracking-id"]
+  });
+  return /* @__PURE__ */ jsx(Toolbar$1, { "data-tracking-id": trackingId, ...props });
+}
+function ToolbarButton(props) {
+  const trackingId = useTrackingId({
+    name: "ToolbarButton",
+    data: {
+      disabled: props.disabled,
+      "aria-label": props["aria-label"],
+      children: props.children
+    },
+    hasOverride: !!props["data-tracking-id"]
+  });
+  return /* @__PURE__ */ jsx(ToolbarButton$1, { "data-tracking-id": trackingId, ...props });
+}
+function ToolbarButtonToggle(props) {
+  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"]
+  });
+  return /* @__PURE__ */ jsx(ToolbarButtonToggle$1, { "data-tracking-id": trackingId, ...props });
+}
+function ToolbarButtonLink(props) {
+  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"]
+  });
+  return /* @__PURE__ */ jsx(ToolbarButtonLink$1, { "data-tracking-id": trackingId, ...props });
+}
+function ToolbarSelect(props) {
+  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"]
+  });
+  return /* @__PURE__ */ jsx(ToolbarSelect$1, { "data-tracking-id": trackingId, ...props });
+}
+const Toolbar = Object.assign(ToolbarElement, {
+  Button: ToolbarButton,
+  ButtonToggle: ToolbarButtonToggle,
+  ButtonLink: ToolbarButtonLink,
+  Select: ToolbarSelect
+});
+
+export { Toolbar as T, ToolbarElement as a, ToolbarButton as b, ToolbarButtonToggle as c, ToolbarButtonLink as d, ToolbarSelect as e };
+//# sourceMappingURL=Toolbar-BAvsl6fK.js.map