@servicetitan/anvil2 1.45.2 → 1.46.0

package/dist/index.js

@@ -1,54 +1,57 @@
-import './index.css';export { DndSort, DndSortCard, DndSortZone } from './DndSort.js';
+import './index2.css';export { DndSort, DndSortCard, DndSortZone } from './DndSort.js';
 export { A as Alert } from './Alert-BNGvfMAV.js';
 export { A as Announcement } from './Announcement-CoheCP1i.js';
 export { A as Avatar } from './Avatar-CyGjhToG.js';
 export { A as AvatarGroup } from './Avatar-D07f9NH_.js';
 export { B as Badge } from './Badge-DCA9mfc2.js';
 export { B as Breadcrumbs, a as BreadcrumbsElement, b as BreadcrumbsLink } from './Breadcrumbs-C4_PEolS.js';
-export { B as Button } from './Button-BxFXQ0-n.js';
+import { B as Button } from './Button-BxFXQ0-n.js';
 export { B as ButtonCompound } from './ButtonCompound-BF2Q6gGX.js';
-export { B as ButtonLink } from './ButtonLink-CXv65WVV.js';
-export { B as ButtonToggle } from './ButtonToggle-pSwg7NvT.js';
-export { C as Calendar, f as CalendarMonth, e as CalendarMonthButton, d as CalendarNext, a as CalendarNow, c as CalendarPrev, b as CalendarYearButton } from './Calendar-BK861SAW.js';
+import { B as ButtonLink } from './ButtonLink-CXv65WVV.js';
+import { B as ButtonToggle } from './ButtonToggle-pSwg7NvT.js';
+export { C as Calendar, f as CalendarMonth, e as CalendarMonthButton, d as CalendarNext, a as CalendarNow, c as CalendarPrev, b as CalendarYearButton } from './Calendar-BQ5F2ENO.js';
 export { C as Card } from './Card-vTYeSkxt.js';
-export { C as Checkbox } from './Checkbox-ZphVb1l0.js';
-export { C as CheckboxGroup } from './Checkbox-CYNjFdtO.js';
+export { C as Checkbox } from './Checkbox-DDrmVC-u.js';
+export { C as CheckboxGroup } from './Checkbox-Dl4KTwEJ.js';
 export { C as Chip } from './Chip-Bz-vlQ4D.js';
-export { C as Combobox, c as ComboboxContent, a as ComboboxElement, i as ComboboxEmpty, e as ComboboxItem, f as ComboboxItemAddNew, d as ComboboxList, g as ComboboxSearchField, b as ComboboxSelect, h as ComboboxSelectTrigger, u as useInfiniteCombobox } from './useInfiniteCombobox-BaYWUxjg.js';
-export { D as DateField } from './DateField-DnasO2rB.js';
-export { D as DateFieldRange } from './DateFieldRange-Ba-8T-Nz.js';
-export { D as DateFieldSingle } from './DateFieldSingle-BBu5Hi9c.js';
+export { C as Combobox, c as ComboboxContent, a as ComboboxElement, i as ComboboxEmpty, e as ComboboxItem, f as ComboboxItemAddNew, d as ComboboxList, g as ComboboxSearchField, b as ComboboxSelect, h as ComboboxSelectTrigger } from './Combobox-B9nesJuc.js';
+export { u as useInfiniteCombobox } from './useInfiniteCombobox-WcRgC9p6.js';
+export { D as DateField } from './DateField-DXxPsRtf.js';
+export { D as DateFieldRange } from './DateFieldRange-Xauviu1w.js';
+export { D as DateFieldSingle } from './DateFieldSingle-yLnwpVzd.js';
 export { D as DateFieldYearless } from './DateFieldYearless-Ba7HiTiI.js';
 export { D as DaysOfTheWeek } from './DaysOfTheWeek-BYSYZySH.js';
 export { D as Details, b as DetailsContent, a as DetailsSummary } from './Details-CF8DImjw.js';
 export { D as Dialog, a as DialogCancelButton, b as DialogContent, c as DialogFooter, d as DialogHeader } from './Dialog-CgkrvrQu.js';
 export { D as Divider } from './Divider-DJe8kLf2.js';
-export { D as Dnd } from './index-CqdP5W00.js';
+export { D as Dnd } from './index-V5Ez2gq_.js';
 export { D as Drawer, a as DrawerCancelButton, d as DrawerContent, b as DrawerFooter, c as DrawerHeader } from './Drawer-CM4ZbAro.js';
 export { E as EditCard } from './EditCard-WKzZ2XCz.js';
 export { F as FieldLabel } from './FieldLabel-BsbTTyom.js';
 export { F as FieldMessage } from './FieldMessage-B7uQ8vmr.js';
-export { F as Flex } from './Flex-BdQMekvA.js';
+import { F as Flex } from './Flex-BdQMekvA.js';
 export { G as Grid } from './Grid-MGUC698u.js';
-export { I as Icon } from './Icon-D8SPKeO4.js';
+import { I as Icon } from './Icon-D8SPKeO4.js';
 export { I as InputMask } from './InputMask-_F139qFu.js';
 export { L as Layout, a as LayoutElement, b as LayoutItem } from './Layout-CUUb2PVr.js';
 export { L as Link, u as useLinkStyles } from './Link-eRsLWPaQ.js';
 export { L as LinkButton } from './LinkButton-2lXfrVoU.js';
-export { L as Listbox, a as ListboxOption, b as ListboxOptionGroup } from './Listbox-CUhMbFm2.js';
-export { L as ListView, a as ListViewOption, b as ListViewOptionCell } from './ListView-DEAMQopB.js';
+import { L as Listbox } from './Listbox-CUhMbFm2.js';
+export { a as ListboxOption, b as ListboxOptionGroup } from './Listbox-CUhMbFm2.js';
+export { L as ListView, a as ListViewOption, b as ListViewOptionCell } from './ListView-pb3rIcze.js';
 export { M as Menu, a as MenuItem } from './Menu-C8we5CHP.js';
 export { N as NumberField } from './NumberField-CkZZrkYC.js';
 export { Overflow, OverflowText } from './Overflow.js';
 export { P as Page } from './Page-cKXkjMmd.js';
 export { P as Pagination } from './Pagination-ta8a2cJN.js';
-export { P as Popover, a as PopoverButton, b as PopoverClose, c as PopoverContent, d as PopoverTrigger } from './Popover-r26xMIfm.js';
+import { P as Popover } from './Popover-r26xMIfm.js';
+export { a as PopoverButton, b as PopoverClose, c as PopoverContent, d as PopoverTrigger } from './Popover-r26xMIfm.js';
 export { P as ProgressBar } from './ProgressBar-DXcXZEJ2.js';
 export { R as Radio } from './Radio-C89VCMXd.js';
 export { R as RadioGroup } from './RadioGroup-C_4buUtG.js';
-export { S as SearchField } from './SearchField-BKXkoWPs.js';
+export { S as SearchField } from './SearchField-Bb0uObwG.js';
 export { S as SegmentedControl, a as SegmentedControlSegment } from './SegmentedControl-CsjjV1Dz.js';
-export { S as SelectCard, a as SelectCardElement, b as SelectCardGroup } from './SelectCard-BWh8Yp7T.js';
+export { S as SelectCard, a as SelectCardElement, b as SelectCardGroup } from './SelectCard-BTYZg9TG.js';
 export { S as SelectTrigger } from './SelectTrigger-f1hvRrSC.js';
 export { S as SideNav, b as SideNavCollapsible, c as SideNavGroup, a as SideNavLink } from './SideNav-CBAzYyML.js';
 export { Skeleton, SkeletonCircle, SkeletonPill, SkeletonRectangle, SkeletonText } from './Skeleton.js';
@@ -63,14 +66,18 @@ export { T as TextField } from './TextField-BiHxlzE3.js';
 export { T as TimeField } from './TimeField-CmbErrsZ.js';
 export { T as Toaster } from './Toaster-B7zUwJOt.js';
 export { t as toast } from './Toaster-9cpG_tWR.js';
-export { T as Toolbar, a as ToolbarButton, c as ToolbarButtonLink, b as ToolbarButtonToggle, e as ToolbarElement, d as ToolbarSelect } from './Toolbar-DK7tXy_W.js';
-export { T as Tooltip, a as TooltipContent, b as TooltipTrigger } from './Tooltip-BI3Xs75X.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useContext, createContext, useId, useRef, useCallback, useEffect, forwardRef, useState, useMemo } from 'react';
+import { c as cx } from './index-tZvMCc77.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DjD5IMh0.js';
+import { u as useMergeRefs } from './useMergeRefs-Bde85AWI.js';
+import { T as Tooltip } from './Tooltip-BI3Xs75X.js';
+export { a as TooltipContent, b as TooltipTrigger } from './Tooltip-BI3Xs75X.js';
 export { u as useAccessibleColor } from './useAccessibleColor-BYKjkGRg.js';
 export { u as useBreakpoint } from './useBreakpoint-Cv5fnZxs.js';
-export { u as useMergeRefs } from './useMergeRefs-Bde85AWI.js';
 export { u as usePrefersColorScheme } from './usePrefersColorScheme-_hT7dK7_.js';
 export { u as useSwipe } from './useSwipe-CULmVQEk.js';
-export { useTrackingId } from './useTrackingId.js';
+import { useTrackingId } from './useTrackingId.js';
 export { A as AnvilProvider, a as AnvilProviderContext } from './AnvilProvider-C_qRQnE6.js';
 export { L as LocalizationProvider } from './LocalizationProvider-DEZyjW5d.js';
 export { L as LocalizationContext, u as useLocalizationContext } from './LocalizationContext-UsmB5mnR.js';
@@ -79,6 +86,11 @@ export { T as ThemeProvider } from './ThemeProvider-Be3Pvtpz.js';
 export { u as useTheme } from './useTheme-B4i6a3bM.js';
 export { T as TrackingProvider } from './TrackingProvider-BtSjkmpM.js';
 export { u as useTrackingContext } from './useTrackingContext-DRwDL8DE.js';
+import { g as getKeyboardFocusableElements } from './getKeyboardFocusableElements-QqcABz0D.js';
+import { u as useIntersectionObserver } from './useIntersectionObserver-BEmMDO3P.js';
+import { S as SvgArrowDropDown } from './arrow_drop_down-ChAdBDux.js';
+import { S as SvgMoreHoriz } from './more_horiz-DJgdQiy0.js';
+import { S as SvgMoreVert } from './more_vert-C_lJSyxt.js';
 
 const IANA_TIMEZONES = [
   "Pacific/Kiritimati",
@@ -509,5 +521,725 @@ const IANA_TIMEZONES = [
   "Pacific/Pago_Pago"
 ];
 
-export { IANA_TIMEZONES };
+const OverflowItemContext = createContext({
+  isInOverflowMenu: false
+});
+const useOverFlowItemContext = () => useContext(OverflowItemContext);
+
+const ToolbarOverflowContext = createContext({
+  overflowItems: [],
+  addItem: () => {
+    return;
+  },
+  removeItem: () => {
+    return;
+  },
+  toolbarRef: { current: null },
+  orderedIds: [],
+  overflow: "wrap"
+});
+
+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 toolbar = "_toolbar_7lbdr_13";
+const styles = {
+	toolbar: toolbar,
+	"toolbar-content": "_toolbar-content_7lbdr_20",
+	"toolbar-overflow-content": "_toolbar-overflow-content_7lbdr_23",
+	"toolbar-button-item": "_toolbar-button-item_7lbdr_31",
+	"toolbar-item": "_toolbar-item_7lbdr_37",
+	"overflow-collapse": "_overflow-collapse_7lbdr_41",
+	"toolbar-button-toggle-item": "_toolbar-button-toggle-item_7lbdr_65",
+	"toolbar-overflow-trigger": "_toolbar-overflow-trigger_7lbdr_71"
+};
+
+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 ? "" : 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 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,
+      {
+        "data-tracking-id": trackingId,
+        appearance,
+        size: "small",
+        "data-anv": "toolbar-button",
+        className: buttonClassNames,
+        ...rest,
+        children
+      }
+    ) : /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(Tooltip.Trigger, { children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          "data-tracking-id": trackingId,
+          appearance,
+          size: "small",
+          "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 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: "small",
+      "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: "small",
+        "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, ...rest } = props;
+  const { isInOverflowMenu = false } = useOverFlowItemContext?.() || {};
+  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: "small",
+      "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: "small",
+        "data-anv": "toolbar-button-link",
+        className: buttonLinkClassNames,
+        ...rest
+      }
+    ) }),
+    /* @__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 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);
+      }
+    };
+    const { isInOverflowMenu = false } = useOverFlowItemContext?.() || {};
+    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, children: [
+      /* @__PURE__ */ jsx(
+        Popover.Button,
+        {
+          "data-tracking-id": trackingId,
+          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.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(ToolbarOverflowContext);
+  const menuTriggerId = useId();
+  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: "small",
+        appearance: "ghost",
+        id: menuTriggerId,
+        className: popoverButtonClassNames,
+        "data-anv": "toolbar-overflow-trigger",
+        "aria-label": "Additional toolbar options",
+        children: /* @__PURE__ */ jsx(Icon, { svg: overflowIcon, 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 ToolbarElement = 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,
+            {
+              direction,
+              additionalItems
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+ToolbarElement.displayName = "Toolbar";
+const Toolbar = Object.assign(ToolbarElement, {
+  /**
+   * 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
+   * - Small size optimized for toolbar layout
+   * - 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
+   * - Small size optimized for toolbar layout
+   * - 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
+   * - Small size optimized for toolbar layout
+   * - 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
+   * - Small size optimized for toolbar layout
+   * - 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
+});
+
+export { Button, ButtonLink, ButtonToggle, Flex, IANA_TIMEZONES, Icon, Listbox, Popover, Toolbar, ToolbarButton, ToolbarButtonLink, ToolbarButtonToggle, ToolbarElement, ToolbarSelect, Tooltip, useMergeRefs, useTrackingId };
 //# sourceMappingURL=index.js.map