@servicetitan/anvil2 2.9.2 → 3.0.1

package/dist/Toolbar-Dzj2KMEy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar-Dzj2KMEy.js","sources":["../src/beta/components/Toolbar/ToolbarButton.tsx","../src/beta/components/Toolbar/ToolbarButtonLink.tsx","../src/beta/components/Toolbar/ToolbarSelect.tsx","../src/beta/components/Toolbar/internal/ToolbarOverflowMenu.tsx","../src/beta/components/Toolbar/ToolbarControlGroup.tsx","../src/beta/components/Toolbar/ToolbarSearchField.tsx","../src/beta/components/Toolbar/Toolbar.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport Button, { ButtonProps } from \"../../../components/Button\";\nimport { ToolbarItemAppearance, WithAriaLabelEnforcement } from \"./types\";\nimport { DataTrackingId } from \"../../../types\";\nimport { useOverFlowItemContext } from \"./internal/ToolbarItemOverflowContext\";\nimport Tooltip from \"../../../components/Tooltip\";\nimport { ToolbarItemWrapper } from \"./internal/ToolbarItemWrapper\";\nimport { useTrackingId } from \"../../../hooks\";\nimport { useToolbarSize } from \"./internal/ToolbarContext\";\n\nimport cx from \"classnames\";\nimport styles from \"./Toolbar.module.scss\";\n\n/**\n * Base props for the ToolbarButton component\n * @extends Omit<ButtonProps, \"appearance\" | \"aria-label\" | \"children\">\n */\ntype ToolbarButtonBaseProps = Omit<\n  ButtonProps,\n  \"appearance\" | \"aria-label\" | \"children\"\n> & {\n  /**\n   * Visual appearance of the button\n   * @default ghost\n   */\n  appearance?: ToolbarItemAppearance;\n};\n\n/**\n * Props for the ToolbarButton component\n * @extends WithAriaLabelEnforcement<ToolbarButtonBaseProps>\n */\nexport type ToolbarButtonProps =\n  WithAriaLabelEnforcement<ToolbarButtonBaseProps> & DataTrackingId;\n\n/**\n * ToolbarButton component for standard clickable actions within a toolbar.\n *\n * Features:\n * - Designed specifically for toolbar integration\n * - Consistent styling with other toolbar items\n * - Automatic tooltip for icon-only buttons\n * - Overflow menu support\n * - Accessibility enforcement for aria-labels\n * - Ghost and primary appearance options\n *\n * @example\n * <ToolbarButton icon={BoldIcon} aria-label=\"Bold text\" />\n *\n * @example\n * <ToolbarButton appearance=\"primary\">\n *   Save\n * </ToolbarButton>\n */\nexport const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(\n  (props, _ref) => {\n    const { appearance = \"ghost\", className, children, ...rest } = props;\n\n    // Checks if this component is rendered inside the overflow menu and fallbacks when the context is unavailable\n    const { isInOverflowMenu = false } = useOverFlowItemContext?.() || {};\n    const size = useToolbarSize();\n\n    const trackingId = useTrackingId({\n      name: \"ToolbarButton\",\n      data: {\n        disabled: props.disabled,\n        \"aria-label\": props[\"aria-label\"],\n        children: props.children,\n      },\n      hasOverride: !!props[\"data-tracking-id\"],\n    });\n\n    const buttonClassNames = cx(className, styles[\"toolbar-button-item\"]);\n\n    const item = children ? (\n      <Button\n        data-tracking-id={trackingId}\n        appearance={appearance}\n        size={size}\n        data-anv=\"toolbar-button\"\n        className={buttonClassNames}\n        {...rest}\n      >\n        {children}\n      </Button>\n    ) : (\n      <Tooltip>\n        <Tooltip.Trigger>\n          <Button\n            data-tracking-id={trackingId}\n            appearance={appearance}\n            size={size}\n            data-anv=\"toolbar-button\"\n            className={buttonClassNames}\n            {...rest}\n          />\n        </Tooltip.Trigger>\n        <Tooltip.Content>{rest[\"aria-label\"]}</Tooltip.Content>\n      </Tooltip>\n    );\n\n    if (isInOverflowMenu) {\n      return item;\n    }\n\n    return (\n      <ToolbarItemWrapper item={{ itemProps: props, itemType: \"button\" }}>\n        {item}\n      </ToolbarItemWrapper>\n    );\n  },\n);\n\nToolbarButton.displayName = \"ToolbarButton\";\n","import { forwardRef } from \"react\";\nimport ButtonLink, { ButtonLinkProps } from \"../../../components/ButtonLink\";\nimport { ToolbarItemAppearance, WithAriaLabelEnforcement } from \"./types\";\nimport { DataTrackingId } from \"../../../types\";\nimport { useOverFlowItemContext } from \"./internal/ToolbarItemOverflowContext\";\nimport Tooltip from \"../../../components/Tooltip\";\nimport { ToolbarItemWrapper } from \"./internal/ToolbarItemWrapper\";\nimport { useTrackingId } from \"../../../hooks\";\nimport { useToolbarSize } from \"./internal/ToolbarContext\";\n\nimport cx from \"classnames\";\nimport styles from \"./Toolbar.module.scss\";\n\n/**\n * Base props for the ToolbarButtonLink component\n * @extends Omit<ButtonLinkProps, \"appearance\" | \"aria-label\" | \"children\">\n */\ntype ToolbarButtonLinkBaseProps = Omit<\n  ButtonLinkProps,\n  \"appearance\" | \"aria-label\" | \"children\"\n> & {\n  /**\n   * Visual appearance of the button link\n   * @default ghost\n   */\n  appearance?: ToolbarItemAppearance;\n};\n\n/**\n * Props for the ToolbarButtonLink component\n * @extends WithAriaLabelEnforcement<ToolbarButtonLinkBaseProps>\n */\nexport type ToolbarButtonLinkProps =\n  WithAriaLabelEnforcement<ToolbarButtonLinkBaseProps> & DataTrackingId;\n\n/**\n * ToolbarButtonLink component for link actions within a toolbar.\n *\n * Features:\n * - Link functionality with href support\n * - Designed specifically for toolbar integration\n * - Consistent styling with other toolbar items\n * - Automatic tooltip for icon-only links\n * - Overflow menu support\n * - Accessibility enforcement for aria-labels\n * - Ghost and primary appearance options\n * - Proper anchor element semantics\n *\n * @example\n * <ToolbarButtonLink href=\"/help\">\n *   Help\n * </ToolbarButtonLink>\n *\n * @example\n * <ToolbarButtonLink icon={ExternalLinkIcon} href=\"/docs\" aria-label=\"Documentation\" />\n */\nexport const ToolbarButtonLink = forwardRef<\n  HTMLAnchorElement,\n  ToolbarButtonLinkProps\n>((props, _ref) => {\n  const { appearance = \"ghost\", className, children, ...rest } = props;\n\n  // Checks if this component is rendered inside the overflow menu and fallbacks when the context is unavailable\n  const { isInOverflowMenu = false } = useOverFlowItemContext?.() || {};\n  const size = useToolbarSize();\n\n  const trackingId = useTrackingId({\n    name: \"ToolbarButtonLink\",\n    data: {\n      href: props.href,\n      disabled: props.disabled,\n      \"aria-label\": props[\"aria-label\"],\n      children: props.children,\n      target: props.target,\n    },\n    hasOverride: !!props[\"data-tracking-id\"],\n  });\n\n  const buttonLinkClassNames = cx(className, styles[\"toolbar-button-item\"]);\n\n  const item = children ? (\n    <ButtonLink\n      data-tracking-id={trackingId}\n      appearance={appearance}\n      size={size}\n      data-anv=\"toolbar-button-link\"\n      className={buttonLinkClassNames}\n      {...rest}\n    >\n      {children}\n    </ButtonLink>\n  ) : (\n    <Tooltip>\n      <Tooltip.Trigger>\n        <ButtonLink\n          data-tracking-id={trackingId}\n          appearance={appearance}\n          size={size}\n          data-anv=\"toolbar-button-link\"\n          className={buttonLinkClassNames}\n          {...rest}\n        />\n      </Tooltip.Trigger>\n      <Tooltip.Content>{rest[\"aria-label\"]}</Tooltip.Content>\n    </Tooltip>\n  );\n\n  if (isInOverflowMenu) {\n    return item;\n  }\n\n  return (\n    <ToolbarItemWrapper item={{ itemProps: props, itemType: \"buttonLink\" }}>\n      {item}\n    </ToolbarItemWrapper>\n  );\n});\n\nToolbarButtonLink.displayName = \"ToolbarButtonLink\";\n","import { forwardRef, useEffect, useId, useState } from \"react\";\nimport ArrowDropDown from \"@servicetitan/hammer-icon/mdi/round/arrow_drop_down.svg\";\nimport Listbox, { ListboxItemType } from \"../../../components/Listbox\";\nimport Popover from \"../../../internal/components/Popover\";\nimport { ToolbarItemAppearance } from \"./types\";\nimport { DataTrackingId } from \"../../../types\";\nimport { useOverFlowItemContext } from \"./internal/ToolbarItemOverflowContext\";\nimport { ToolbarItemWrapper } from \"./internal/ToolbarItemWrapper\";\nimport { useTrackingId } from \"../../../hooks\";\nimport { useToolbarSize } from \"./internal/ToolbarContext\";\n\nimport cx from \"classnames\";\nimport styles from \"./Toolbar.module.scss\";\n\n/**\n * Type for items in the ToolbarSelect dropdown\n * @extends ItemType<T & { id: string }>\n */\ntype ToolbarSelectItem<T = Record<string, unknown>> = ListboxItemType<\n  T & {\n    id: string;\n  }\n>;\n\n/**\n * Props for the ToolbarSelect component\n * @extends Omit<React.ComponentPropsWithoutRef<typeof Popover.Button>, \"appearance\" | \"onChange\">\n */\nexport type ToolbarSelectProps<T = Record<string, unknown>> = Omit<\n  React.ComponentPropsWithoutRef<typeof Popover.Button>,\n  \"appearance\" | \"onChange\"\n> & {\n  /**\n   * Visual appearance of the select button\n   * @default ghost\n   */\n  appearance?: ToolbarItemAppearance;\n  /**\n   * Callback function when selection changes\n   */\n  onChange?: (optionId: string) => void;\n  /**\n   * Currently selected item ID (controlled mode)\n   */\n  selected?: string;\n  /**\n   * Array of selectable items\n   */\n  items: ToolbarSelectItem<T>[];\n  /**\n   * Accessible label for the select dropdown dialog (e.g. \"Status options\").\n   */\n  accessibleLabel: string;\n} & DataTrackingId;\n\n/**\n * ToolbarSelect component provides a dropdown selector within a toolbar.\n *\n * Features:\n * - Dropdown menu with selectable options\n * - Controlled and uncontrolled usage patterns\n * - Automatic overflow menu integration\n * - Accessibility support with proper ARIA labels\n * - Ghost and primary appearance options\n * - Dropdown arrow icon indicator\n * - Listbox integration for keyboard navigation\n *\n * @example\n * <ToolbarSelect\n *   items={fontOptions}\n *   selected=\"arial\"\n *   accessibleLabel=\"Font family\"\n *   onChange={(id) => setFont(id)}\n * />\n *\n * @example\n * <ToolbarSelect\n *   appearance=\"primary\"\n *   items={colorOptions}\n *   accessibleLabel=\"Text color\"\n * />\n */\nexport const ToolbarSelect = forwardRef<HTMLButtonElement, ToolbarSelectProps>(\n  (props, _ref) => {\n    const {\n      appearance = \"ghost\",\n      onChange,\n      selected: selectedItemId,\n      accessibleLabel,\n      className,\n      items,\n      ...rest\n    } = props;\n    const selectId = useId();\n\n    // Popover open/close state - like TimeField does\n    const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n\n    // Internal state for uncontrolled mode\n    const defaultId = items.length > 0 ? items[0].id : \"\";\n    const [internalSelectedId, setInternalSelectedId] = useState(defaultId);\n\n    // Use controlled value if provided, otherwise use internal state\n    const selectedId = selectedItemId ?? internalSelectedId;\n\n    // Find the selected item by ID (or default to first item using defaultId)\n    const selectedItem =\n      items.find((item) => item.id === selectedId) ||\n      items.find((item) => item.id === defaultId);\n\n    // Update internal selection when items change and current selection is no longer valid\n    useEffect(() => {\n      if (\n        !selectedItemId &&\n        items.length > 0 &&\n        !items.some((item) => item.id === internalSelectedId)\n      ) {\n        setInternalSelectedId(items[0].id);\n      }\n    }, [items, selectedItemId, internalSelectedId]);\n\n    // Handle selection change\n    const handleSelectionChange = (\n      selected: ToolbarSelectItem<Record<string, unknown>> | undefined,\n    ) => {\n      if (selected?.id) {\n        if (selectedItemId === undefined) {\n          setInternalSelectedId(selected.id);\n        }\n\n        onChange?.(selected.id);\n\n        // Close the popover after selection\n        setIsPopoverOpen(false);\n      }\n    };\n\n    // Checks if this component is rendered inside the overflow menu and fallbacks when the context is unavailable\n    const { isInOverflowMenu = false } = useOverFlowItemContext?.() || {};\n    const toolbarSize = useToolbarSize();\n\n    const trackingId = useTrackingId({\n      name: \"ToolbarSelect\",\n      data: {\n        selected: props.selected,\n        disabled: props.disabled,\n        \"aria-label\": props[\"aria-label\"],\n        items: props.items,\n      },\n      hasOverride: !!props[\"data-tracking-id\"],\n    });\n\n    const buttonClassNames = cx(className, styles[\"toolbar-button-item\"]);\n\n    const item = (\n      <Popover\n        noPadding\n        open={isPopoverOpen}\n        onClickOutside={() => {\n          setIsPopoverOpen(false);\n        }}\n        onClose={() => {\n          setIsPopoverOpen(false);\n        }}\n      >\n        <Popover.Button\n          data-tracking-id={trackingId}\n          appearance={appearance}\n          size={toolbarSize}\n          icon={{ after: ArrowDropDown }}\n          className={buttonClassNames}\n          id={selectId}\n          data-anv=\"toolbar-select\"\n          onClick={() => {\n            setIsPopoverOpen(!isPopoverOpen);\n          }}\n          {...rest}\n        >\n          {selectedItem?.label}\n        </Popover.Button>\n        <Popover.Content\n          className={styles[\"toolbar-select-content\"]}\n          aria-label={accessibleLabel}\n        >\n          <Listbox\n            selected={selectedItem}\n            onSelectionChange={handleSelectionChange}\n            items={items}\n            aria-labelledby={selectId}\n            disableAutoSelectOnFocus={true}\n          >\n            {({ items }) =>\n              items.map((item) => (\n                <Listbox.Option key={item.label} item={item}>\n                  {item.label}\n                </Listbox.Option>\n              ))\n            }\n          </Listbox>\n        </Popover.Content>\n      </Popover>\n    );\n\n    if (isInOverflowMenu) {\n      return item;\n    }\n\n    return (\n      <ToolbarItemWrapper item={{ itemProps: props, itemType: \"select\" }}>\n        {item}\n      </ToolbarItemWrapper>\n    );\n  },\n);\n\nToolbarSelect.displayName = \"ToolbarSelect\";\n","import { ReactElement, useContext, useId, useMemo } from \"react\";\nimport MoreHoriz from \"@servicetitan/hammer-icon/mdi/round/more_horiz.svg\";\nimport MoreVert from \"@servicetitan/hammer-icon/mdi/round//more_vert.svg\";\nimport { ToolbarItemProps } from \"../types\";\nimport { ToolbarButton, ToolbarButtonProps } from \"../ToolbarButton\";\nimport {\n  ToolbarButtonToggle,\n  ToolbarButtonToggleProps,\n} from \"../ToolbarButtonToggle\";\nimport {\n  ToolbarButtonLink,\n  ToolbarButtonLinkProps,\n} from \"../ToolbarButtonLink\";\nimport { ToolbarSelect, ToolbarSelectProps } from \"../ToolbarSelect\";\nimport { ToolbarContext, useToolbarSize } from \"./ToolbarContext\";\nimport Popover from \"../../../../internal/components/Popover\";\nimport Icon from \"../../../../components/Icon\";\nimport { OverflowItemContext } from \"./ToolbarItemOverflowContext\";\nimport { handleMenuKeyboardNavigation } from \"./utils/accessibility\";\n\nimport cx from \"classnames\";\nimport styles from \"../Toolbar.module.scss\";\n\n/**\n * Component to render appropriate toolbar items in the overflow menu\n * @param itemType - Type of toolbar item to render\n * @param itemProps - Props for the toolbar item\n * @returns ReactElement - The rendered toolbar item\n */\nconst OverflowItem = ({ itemType, itemProps }: ToolbarItemProps) => {\n  // Based on the item type, use the corresponding toolbar component\n  switch (itemType) {\n    case \"button\":\n      return <ToolbarButton {...(itemProps as ToolbarButtonProps)} />;\n\n    case \"buttonToggle\":\n      return (\n        <ToolbarButtonToggle {...(itemProps as ToolbarButtonToggleProps)} />\n      );\n\n    case \"buttonLink\":\n      return <ToolbarButtonLink {...(itemProps as ToolbarButtonLinkProps)} />;\n\n    case \"select\":\n      return <ToolbarSelect {...(itemProps as ToolbarSelectProps)} />;\n\n    default:\n      return null;\n  }\n};\n\n/**\n * Props for the ToolbarOverflowMenu component\n */\nexport type ToolbarOverflowMenuProps = {\n  /**\n   * Additional items to display in the overflow menu\n   */\n  additionalItems?: ReactElement[];\n  /**\n   * Direction of the parent toolbar\n   * @default horizontal\n   */\n  direction?: \"vertical\" | \"horizontal\";\n};\n\n/**\n * ToolbarOverflowMenu component displays toolbar items that don't fit in the main toolbar.\n *\n * Features:\n * - Automatic rendering when items overflow in collapse mode\n * - Maintains consistent item ordering with the main toolbar\n * - Preserves item state between toolbar and overflow menu\n * - Provides accessible navigation with keyboard and screen readers\n * - Adapts to both horizontal and vertical toolbar layouts\n * - Context-aware rendering for child components\n * - Proper ARIA menu semantics\n * - Keyboard navigation support\n */\nexport const ToolbarOverflowMenu = ({\n  additionalItems,\n  direction,\n}: ToolbarOverflowMenuProps) => {\n  // Gives us the array of items that need to appear\n  const { overflowItems, orderedIds } = useContext(ToolbarContext);\n  const menuTriggerId = useId();\n  const size = useToolbarSize();\n\n  // Sort overflow items to match their original order in the toolbar\n  const orderedItems = useMemo(() => {\n    const allElements = orderedIds?.map((id) => {\n      return overflowItems.find((item) => item.id === id);\n    });\n\n    return allElements?.filter((item) => item !== undefined) || [];\n  }, [orderedIds, overflowItems]);\n\n  const popoverButtonClassNames = cx(\n    styles[\"toolbar-button-item\"],\n    styles[\"toolbar-overflow-trigger\"],\n  );\n\n  const overflowIcon = direction === \"horizontal\" ? MoreHoriz : MoreVert;\n\n  return (\n    <Popover noPadding>\n      <Popover.Button\n        size={size}\n        appearance=\"ghost\"\n        id={menuTriggerId}\n        className={popoverButtonClassNames}\n        data-anv=\"toolbar-overflow-trigger\"\n        aria-label=\"Additional toolbar options\"\n      >\n        <Icon svg={overflowIcon} size={size === \"xsmall\" ? \"small\" : size} />\n      </Popover.Button>\n      <Popover.Content>\n        <OverflowItemContext.Provider value={{ isInOverflowMenu: true }}>\n          <ul\n            role=\"menu\"\n            className={styles[\"toolbar-overflow-content\"]}\n            data-anv=\"toolbar-overflow-menu\"\n            aria-labelledby={menuTriggerId}\n            onKeyDown={handleMenuKeyboardNavigation}\n          >\n            {orderedItems.map((item) => {\n              const { itemType, itemProps, id } = item;\n              return (\n                <li\n                  key={`${itemType}-${id}`}\n                  role=\"menuitem\"\n                  data-anv=\"toolbar-overflow-item\"\n                >\n                  <OverflowItem\n                    itemType={itemType}\n                    itemProps={itemProps}\n                    id={id}\n                  />\n                </li>\n              );\n            })}\n\n            {additionalItems?.map((item, index) => (\n              <li\n                key={`additional-item-${index}`}\n                role=\"menuitem\"\n                data-anv=\"toolbar-overflow-item\"\n              >\n                {item}\n              </li>\n            ))}\n          </ul>\n        </OverflowItemContext.Provider>\n      </Popover.Content>\n    </Popover>\n  );\n};\n","import { ComponentPropsWithoutRef, forwardRef, useContext } from \"react\";\nimport { LayoutUtilProps } from \"../../../types\";\nimport { Flex } from \"../../../components/Flex\";\nimport { ToolbarContext } from \"./internal/ToolbarContext\";\n\nimport styles from \"./ToolbarControlGroup.module.scss\";\n\n/**\n * Props for the ToolbarControlGroup component\n *\n * @extends ComponentPropsWithoutRef<'div'>\n * @extends LayoutUtilProps\n */\nexport type ToolbarControlGroupProps = ComponentPropsWithoutRef<\"div\"> &\n  LayoutUtilProps & {\n    /**\n     * Accessible label for the control group\n     */\n    \"aria-label\"?: string;\n  };\n\n/**\n * ToolbarControlGroup component provides a flex container for grouping related toolbar controls.\n * Can be used for filters, buttons, or other toolbar items.\n *\n * Features:\n * - Groups related toolbar controls in a flex container\n * - Supports accessibility with aria-label\n * - Handles overflow and wrapping based on toolbar context\n * - Integrates with layout utilities for spacing and alignment\n *\n * @example\n * <ToolbarControlGroup aria-label=\"Formatting controls\">\n *   <Toolbar.Button icon={BoldIcon} aria-label=\"Bold\" />\n *   <Toolbar.Button icon={ItalicIcon} aria-label=\"Italic\" />\n * </ToolbarControlGroup>\n */\nconst ToolbarControlGroupElement = forwardRef<\n  HTMLDivElement,\n  ToolbarControlGroupProps\n>((props, ref) => {\n  const { children, \"aria-label\": ariaLabel, ...rest } = props;\n  const { overflow } = useContext(ToolbarContext);\n\n  return (\n    <Flex\n      ref={ref}\n      alignItems=\"center\"\n      gap={1}\n      wrap={overflow === \"collapse\" ? \"nowrap\" : \"wrap\"}\n      data-anv=\"toolbar-control-group\"\n      role=\"group\"\n      aria-label={ariaLabel ? ariaLabel : \"Toolbar controls\"}\n      className={styles[\"toolbar-control-group\"]}\n      {...rest}\n    >\n      {children}\n    </Flex>\n  );\n});\n\nToolbarControlGroupElement.displayName = \"ToolbarControlGroup\";\n\nexport const ToolbarControlGroup = ToolbarControlGroupElement;\n","import { forwardRef, Ref } from \"react\";\nimport {\n  SearchFieldProps,\n  SearchField,\n} from \"../../../components/SearchField/internal/SearchField\";\n\nimport { useToolbarSize } from \"./internal/ToolbarContext\";\n\nimport cx from \"classnames\";\nimport styles from \"./ToolbarSearchField.module.scss\";\n\n/**\n * Props for the ToolbarSearchField component\n *\n * @extends Omit<SearchFieldProps, \"size\">\n */\nexport type ToolbarSearchFieldProps = Omit<SearchFieldProps, \"size\">;\n\n/**\n * ToolbarSearchField component renders a search field for use in toolbars.\n *\n * Features:\n * - Renders a search field styled for toolbar usage\n * - Supports all SearchField props except size\n * - Integrates with toolbar layouts and accessibility\n *\n * @example\n * <ToolbarSearchField placeholder=\"Search...\" />\n */\nexport const ToolbarSearchField = forwardRef(\n  (props: ToolbarSearchFieldProps, ref: Ref<HTMLInputElement>) => {\n    const { className, ...rest } = props;\n    const size = useToolbarSize();\n\n    const searchFieldStyles = cx(styles[\"toolbar-search-field\"], className);\n\n    return (\n      <div className={styles[\"toolbar-search-field-container\"]}>\n        <SearchField\n          ref={ref}\n          className={searchFieldStyles}\n          size={size}\n          data-anv=\"toolbar-search-field\"\n          {...rest}\n        />\n      </div>\n    );\n  },\n);\n\nToolbarSearchField.displayName = \"ToolbarSearchField\";\n","import { ToolbarButton } from \"./ToolbarButton\";\nimport { ToolbarButtonToggle } from \"./ToolbarButtonToggle\";\nimport { ToolbarButtonLink } from \"./ToolbarButtonLink\";\nimport { ToolbarSelect } from \"./ToolbarSelect\";\nimport { ToolbarItemProps, ToolbarOverflowTypes, ToolbarSize } from \"./types\";\nimport {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { LayoutUtilProps } from \"../../../types\";\nimport { useLayoutPropsUtil } from \"../../../internal/hooks\";\nimport {\n  handleToolbarKeyDown,\n  updateToolbarItemsTabIndex,\n} from \"./internal/utils/accessibility\";\nimport { ToolbarContext } from \"./internal/ToolbarContext\";\nimport Flex from \"../../../components/Flex\";\nimport { useMergeRefs } from \"../../../hooks\";\nimport { ToolbarOverflowMenu } from \"./internal/ToolbarOverflowMenu\";\nimport { ToolbarControlGroup } from \"./ToolbarControlGroup\";\nimport { ToolbarSearchField } from \"./ToolbarSearchField\";\n\nimport cx from \"classnames\";\nimport styles from \"./Toolbar.module.scss\";\n\n/**\n * Props for the Toolbar component\n * @extends ComponentPropsWithoutRef<\"div\">\n * @extends LayoutUtilProps\n */\nexport type ToolbarProps = ComponentPropsWithoutRef<\"div\"> &\n  LayoutUtilProps & {\n    /**\n     * Description of the content this toolbar is associated with, used for accessibility\n     */\n    associatedContent: string;\n    /**\n     * Orientation of the toolbar\n     * @default horizontal\n     */\n    direction?: \"vertical\" | \"horizontal\";\n    /**\n     * How to handle overflow when items don't fit\n     * @default wrap\n     */\n    overflow?: ToolbarOverflowTypes;\n    /**\n     * Additional items to display in the overflow menu\n     */\n    additionalItems?: ReactElement[];\n    /**\n     * Size of toolbar items\n     * @default xsmall\n     */\n    size?: ToolbarSize;\n  };\n\n/**\n * Toolbar component for grouping related interactive elements with anvil2 tracking.\n *\n * Features:\n * - Horizontal or vertical orientation\n * - Overflow handling with wrap or collapse behavior\n * - Keyboard navigation following ARIA best practices\n * - Screen reader announcements and accessibility\n * - Automatic overflow menu for collapsed items\n * - Support for buttons, toggles, selects, and links\n * - Layout utilities for positioning and spacing\n * - Context-based state management for child components\n * - Automatic tracking ID generation for analytics\n * - Integration with anvil2 tracking system\n *\n * @example\n * <Toolbar associatedContent=\"document editor\" overflow=\"collapse\">\n *   <Toolbar.Button icon={BoldIcon} aria-label=\"Bold\" />\n *   <Toolbar.ButtonToggle icon={ItalicIcon} aria-label=\"Italic\" />\n *   <Toolbar.Select\n *     items={fontOptions}\n *     selected=\"arial\"\n *     accessibleLabel=\"Font family\"\n *   />\n * </Toolbar>\n */\nexport const Toolbar = Object.assign(\n  forwardRef<HTMLDivElement, ToolbarProps>(function ToolbarInner(props, ref) {\n    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n    const {\n      associatedContent,\n      className,\n      children,\n      style,\n      direction = \"horizontal\",\n      overflow = \"wrap\",\n      onKeyDown,\n      additionalItems,\n      size = \"xsmall\",\n      ...rest\n    } = componentProps;\n\n    // State for tracking items that should appear in the overflow menu\n    const [overflowItems, setOverflowItems] = useState<ToolbarItemProps[]>([]);\n    const toolbarItemsRef = useRef<HTMLDivElement>(null);\n    const toolbarRef = useRef<HTMLDivElement>(null);\n\n    // Track original order of items to maintain consistent ordering in the overflow menu\n    const [orderedIds, setOrderedIds] = useState<string[]>([]);\n\n    // Update ordered IDs when children change to maintain correct overflow order\n    useEffect(() => {\n      const newOrderedIds = Array.from(\n        toolbarItemsRef.current?.querySelectorAll(\"[data-id]\") || [],\n      ).map((el) => {\n        return el.getAttribute(\"data-id\") as string;\n      });\n\n      setOrderedIds(newOrderedIds);\n    }, [children]);\n\n    // Add item to overflow menu\n    const addItem = useCallback((item: ToolbarItemProps) => {\n      setOverflowItems((prev) => [...prev, item]);\n    }, []);\n\n    // Remove item from overflow menu\n    const removeItem = useCallback((item: ToolbarItemProps) => {\n      setOverflowItems((prev) =>\n        prev.filter((component) => component.id !== item.id),\n      );\n    }, []);\n\n    // Initialize tabindex values\n    useEffect(() => {\n      if (toolbarRef.current) {\n        // Initialize toolbar with the first item active\n        updateToolbarItemsTabIndex(toolbarRef.current);\n      }\n    }, [children]);\n\n    // Handle keyboard navigation events within the toolbar\n    const handleKeyDown = useCallback(\n      (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (toolbarRef.current) {\n          handleToolbarKeyDown(event, toolbarRef.current);\n        }\n\n        onKeyDown?.(event);\n      },\n      [onKeyDown],\n    );\n\n    // Determine if overflow menu should be shown\n    const showOverflowMenu =\n      (overflow === \"collapse\" && overflowItems.length > 0) ||\n      !!additionalItems;\n\n    // Context value provided to all toolbar children\n    const value = useMemo(\n      () => ({\n        overflowItems,\n        addItem,\n        removeItem,\n        toolbarRef,\n        orderedIds,\n        overflow,\n        size,\n      }),\n      [\n        overflowItems,\n        addItem,\n        removeItem,\n        toolbarRef,\n        orderedIds,\n        overflow,\n        size,\n      ],\n    );\n\n    const styleCombined = {\n      ...style,\n      ...layoutStyles,\n    };\n\n    const toolbarClassNames = cx(styles[\"toolbar\"], className);\n\n    const toolbarContentClassNames = cx(styles[\"toolbar-content\"], {\n      [styles[`overflow-${overflow}`]]: overflow,\n    });\n\n    return (\n      <ToolbarContext.Provider value={value}>\n        <Flex\n          direction={direction === \"horizontal\" ? \"row\" : \"column\"}\n          wrap={overflow === \"wrap\" ? \"wrap\" : \"nowrap\"}\n          alignItems=\"center\"\n          className={toolbarClassNames}\n          style={styleCombined}\n          ref={useMergeRefs([toolbarRef, ref])}\n          role=\"toolbar\"\n          data-anv=\"toolbar\"\n          aria-orientation={direction}\n          aria-label={`Toolbar for ${associatedContent}. Use arrow keys to navigate through toolbar controls.`}\n          onKeyDown={handleKeyDown}\n          {...rest}\n        >\n          <Flex\n            ref={useMergeRefs([toolbarItemsRef, ref])}\n            className={toolbarContentClassNames}\n            direction={direction === \"horizontal\" ? \"row\" : \"column\"}\n            wrap={overflow === \"wrap\" ? \"wrap\" : \"nowrap\"}\n            alignItems=\"center\"\n            grow={1}\n            data-anv=\"toolbar-content\"\n            data-overflow={overflow}\n          >\n            {children}\n          </Flex>\n\n          {showOverflowMenu && (\n            <ToolbarOverflowMenu\n              direction={direction}\n              additionalItems={additionalItems}\n            />\n          )}\n        </Flex>\n      </ToolbarContext.Provider>\n    );\n  }),\n  {\n    /**\n     * ToolbarButton component for standard clickable actions within a toolbar with anvil2 tracking.\n     *\n     * Features:\n     * - Designed specifically for toolbar integration\n     * - Consistent styling with other toolbar items\n     * - Automatic tooltip for icon-only buttons\n     * - Overflow menu support\n     * - Accessibility enforcement for aria-labels\n     * - Ghost and primary appearance options\n     * - Automatic tracking ID generation for analytics\n     *\n     * @example\n     * <Toolbar.Button icon={BoldIcon} aria-label=\"Bold text\" />\n     *\n     * @example\n     * <Toolbar.Button appearance=\"primary\">\n     *   Save\n     * </Toolbar.Button>\n     */\n    Button: ToolbarButton,\n    /**\n     * ToolbarButtonToggle component for toggleable actions within a toolbar with anvil2 tracking.\n     *\n     * Features:\n     * - Toggle state management\n     * - Designed specifically for toolbar integration\n     * - Consistent styling with other toolbar items\n     * - Overflow menu support\n     * - Accessibility enforcement for aria-labels\n     * - Ghost and primary appearance options\n     * - Automatic tracking ID generation for analytics\n     *\n     * @example\n     * <Toolbar.ButtonToggle icon={BoldIcon} aria-label=\"Bold\" checked={isBold} />\n     */\n    ButtonToggle: ToolbarButtonToggle,\n    /**\n     * ToolbarButtonLink component for link actions within a toolbar with anvil2 tracking.\n     *\n     * Features:\n     * - Link functionality with href support\n     * - Designed specifically for toolbar integration\n     * - Consistent styling with other toolbar items\n     * - Overflow menu support\n     * - Accessibility enforcement for aria-labels\n     * - Ghost and primary appearance options\n     * - Automatic tracking ID generation for analytics\n     *\n     * @example\n     * <Toolbar.ButtonLink href=\"/help\">\n     *   Help\n     * </Toolbar.ButtonLink>\n     */\n    ButtonLink: ToolbarButtonLink,\n    /**\n     * ToolbarSelect component provides a dropdown selector within a toolbar with anvil2 tracking.\n     *\n     * Features:\n     * - Dropdown menu with selectable options\n     * - Controlled and uncontrolled usage patterns\n     * - Automatic overflow menu integration\n     * - Accessibility support with proper ARIA labels\n     * - Ghost and primary appearance options\n     * - Dropdown arrow icon indicator\n     * - Listbox integration for keyboard navigation\n     * - Automatic tracking ID generation for analytics\n     *\n     * @example\n     * <Toolbar.Select\n     *   items={fontOptions}\n     *   selected=\"arial\"\n     *   accessibleLabel=\"Font family\"\n     *   onChange={(id) => setFont(id)}\n     * />\n     */\n    Select: ToolbarSelect,\n    /**\n     * ToolbarControlGroup component provides a flex container for grouping related toolbar controls.\n     * Can be used for filters, buttons, or other toolbar items.\n     *\n     * Features:\n     * - Groups related toolbar controls in a flex container\n     * - Supports accessibility with aria-label\n     * - Handles overflow and wrapping based on toolbar context\n     * - Integrates with layout utilities for spacing and alignment\n     *\n     * @example\n     * <Toolbar.ControlGroup aria-label=\"Formatting controls\">\n     *   <Toolbar.Button icon={BoldIcon} aria-label=\"Bold\" />\n     *   <Toolbar.Button icon={ItalicIcon} aria-label=\"Italic\" />\n     * </Toolbar.ControlGroup>\n     */\n    ControlGroup: ToolbarControlGroup,\n    /**\n     * ToolbarSearchField component renders a search field for use in toolbars.\n     *\n     * Features:\n     * - Renders a search field styled for toolbar usage\n     * - Supports all SearchField props except size\n     * - Integrates with toolbar layouts and accessibility\n     *\n     * @example\n     * <Toolbar.Search placeholder=\"Search...\" />\n     */\n    Search: ToolbarSearchField,\n  },\n);\nToolbar.displayName = \"Toolbar\";\nexport const ToolbarElement = Toolbar;\n"],"names":["styles","item","ArrowDropDown","items","MoreHoriz","MoreVert"],"mappings":";;;;;;;;;;;;;;;;;;;AAsDO,MAAM,aAAA,GAAgB,UAAA;AAAA,EAC3B,CAAC,OAAO,IAAA,KAAS;AACf,IAAA,MAAM,EAAE,UAAA,GAAa,OAAA,EAAS,WAAW,QAAA,EAAU,GAAG,MAAK,GAAI,KAAA;AAG/D,IAAA,MAAM,EAAE,gBAAA,GAAmB,KAAA,EAAM,GAAI,sBAAA,QAA8B,EAAC;AACpE,IAAA,MAAM,OAAO,cAAA,EAAe;AAE5B,IAAA,MAAM,aAAa,aAAA,CAAc;AAAA,MAC/B,IAAA,EAAM,eAAA;AAAA,MACN,IAAA,EAAM;AAAA,QACJ,UAAU,KAAA,CAAM,QAAA;AAAA,QAChB,YAAA,EAAc,MAAM,YAAY,CAAA;AAAA,QAChC,UAAU,KAAA,CAAM;AAAA,OAClB;AAAA,MACA,WAAA,EAAa,CAAC,CAAC,KAAA,CAAM,kBAAkB;AAAA,KACxC,CAAA;AAED,IAAA,MAAM,gBAAA,GAAmB,EAAA,CAAG,SAAA,EAAWA,QAAA,CAAO,qBAAqB,CAAC,CAAA;AAEpE,IAAA,MAAM,OAAO,QAAA,mBACX,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,kBAAA,EAAkB,UAAA;AAAA,QAClB,UAAA;AAAA,QACA,IAAA;AAAA,QACA,UAAA,EAAS,gBAAA;AAAA,QACT,SAAA,EAAW,gBAAA;AAAA,QACV,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH,wBAEC,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,OAAA,CAAQ,SAAR,EACC,QAAA,kBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,kBAAA,EAAkB,UAAA;AAAA,UAClB,UAAA;AAAA,UACA,IAAA;AAAA,UACA,UAAA,EAAS,gBAAA;AAAA,UACT,SAAA,EAAW,gBAAA;AAAA,UACV,GAAG;AAAA;AAAA,OACN,EACF,CAAA;AAAA,0BACC,OAAA,CAAQ,OAAA,EAAR,EAAiB,QAAA,EAAA,IAAA,CAAK,YAAY,CAAA,EAAE;AAAA,KAAA,EACvC,CAAA;AAGF,IAAA,IAAI,gBAAA,EAAkB;AACpB,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,uBACE,GAAA,CAAC,sBAAmB,IAAA,EAAM,EAAE,WAAW,KAAA,EAAO,QAAA,EAAU,QAAA,EAAS,EAC9D,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,EAEJ;AACF;AAEA,aAAA,CAAc,WAAA,GAAc,eAAA;;ACzDrB,MAAM,iBAAA,GAAoB,UAAA,CAG/B,CAAC,KAAA,EAAO,IAAA,KAAS;AACjB,EAAA,MAAM,EAAE,UAAA,GAAa,OAAA,EAAS,WAAW,QAAA,EAAU,GAAG,MAAK,GAAI,KAAA;AAG/D,EAAA,MAAM,EAAE,gBAAA,GAAmB,KAAA,EAAM,GAAI,sBAAA,QAA8B,EAAC;AACpE,EAAA,MAAM,OAAO,cAAA,EAAe;AAE5B,EAAA,MAAM,aAAa,aAAA,CAAc;AAAA,IAC/B,IAAA,EAAM,mBAAA;AAAA,IACN,IAAA,EAAM;AAAA,MACJ,MAAM,KAAA,CAAM,IAAA;AAAA,MACZ,UAAU,KAAA,CAAM,QAAA;AAAA,MAChB,YAAA,EAAc,MAAM,YAAY,CAAA;AAAA,MAChC,UAAU,KAAA,CAAM,QAAA;AAAA,MAChB,QAAQ,KAAA,CAAM;AAAA,KAChB;AAAA,IACA,WAAA,EAAa,CAAC,CAAC,KAAA,CAAM,kBAAkB;AAAA,GACxC,CAAA;AAED,EAAA,MAAM,oBAAA,GAAuB,EAAA,CAAG,SAAA,EAAWA,QAAA,CAAO,qBAAqB,CAAC,CAAA;AAExE,EAAA,MAAM,OAAO,QAAA,mBACX,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,kBAAA,EAAkB,UAAA;AAAA,MAClB,UAAA;AAAA,MACA,IAAA;AAAA,MACA,UAAA,EAAS,qBAAA;AAAA,MACT,SAAA,EAAW,oBAAA;AAAA,MACV,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH,wBAEC,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,OAAA,CAAQ,SAAR,EACC,QAAA,kBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,kBAAA,EAAkB,UAAA;AAAA,QAClB,UAAA;AAAA,QACA,IAAA;AAAA,QACA,UAAA,EAAS,qBAAA;AAAA,QACT,SAAA,EAAW,oBAAA;AAAA,QACV,GAAG;AAAA;AAAA,KACN,EACF,CAAA;AAAA,wBACC,OAAA,CAAQ,OAAA,EAAR,EAAiB,QAAA,EAAA,IAAA,CAAK,YAAY,CAAA,EAAE;AAAA,GAAA,EACvC,CAAA;AAGF,EAAA,IAAI,gBAAA,EAAkB;AACpB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,uBACE,GAAA,CAAC,sBAAmB,IAAA,EAAM,EAAE,WAAW,KAAA,EAAO,QAAA,EAAU,YAAA,EAAa,EAClE,QAAA,EAAA,IAAA,EACH,CAAA;AAEJ,CAAC;AAED,iBAAA,CAAkB,WAAA,GAAc,mBAAA;;ACpCzB,MAAM,aAAA,GAAgB,UAAA;AAAA,EAC3B,CAAC,OAAO,IAAA,KAAS;AACf,IAAA,MAAM;AAAA,MACJ,UAAA,GAAa,OAAA;AAAA,MACb,QAAA;AAAA,MACA,QAAA,EAAU,cAAA;AAAA,MACV,eAAA;AAAA,MACA,SAAA;AAAA,MACA,KAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AACJ,IAAA,MAAM,WAAW,KAAA,EAAM;AAGvB,IAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,KAAK,CAAA;AAGxD,IAAA,MAAM,YAAY,KAAA,CAAM,MAAA,GAAS,IAAI,KAAA,CAAM,CAAC,EAAE,EAAA,GAAK,EAAA;AACnD,IAAA,MAAM,CAAC,kBAAA,EAAoB,qBAAqB,CAAA,GAAI,SAAS,SAAS,CAAA;AAGtE,IAAA,MAAM,aAAa,cAAA,IAAkB,kBAAA;AAGrC,IAAA,MAAM,YAAA,GACJ,KAAA,CAAM,IAAA,CAAK,CAACC,UAASA,KAAAA,CAAK,EAAA,KAAO,UAAU,CAAA,IAC3C,MAAM,IAAA,CAAK,CAACA,KAAAA,KAASA,KAAAA,CAAK,OAAO,SAAS,CAAA;AAG5C,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IACE,CAAC,cAAA,IACD,KAAA,CAAM,MAAA,GAAS,CAAA,IACf,CAAC,KAAA,CAAM,IAAA,CAAK,CAACA,KAAAA,KAASA,KAAAA,CAAK,EAAA,KAAO,kBAAkB,CAAA,EACpD;AACA,QAAA,qBAAA,CAAsB,KAAA,CAAM,CAAC,CAAA,CAAE,EAAE,CAAA;AAAA,MACnC;AAAA,IACF,CAAA,EAAG,CAAC,KAAA,EAAO,cAAA,EAAgB,kBAAkB,CAAC,CAAA;AAG9C,IAAA,MAAM,qBAAA,GAAwB,CAC5B,QAAA,KACG;AACH,MAAA,IAAI,UAAU,EAAA,EAAI;AAChB,QAAA,IAAI,mBAAmB,MAAA,EAAW;AAChC,UAAA,qBAAA,CAAsB,SAAS,EAAE,CAAA;AAAA,QACnC;AAEA,QAAA,QAAA,GAAW,SAAS,EAAE,CAAA;AAGtB,QAAA,gBAAA,CAAiB,KAAK,CAAA;AAAA,MACxB;AAAA,IACF,CAAA;AAGA,IAAA,MAAM,EAAE,gBAAA,GAAmB,KAAA,EAAM,GAAI,sBAAA,QAA8B,EAAC;AACpE,IAAA,MAAM,cAAc,cAAA,EAAe;AAEnC,IAAA,MAAM,aAAa,aAAA,CAAc;AAAA,MAC/B,IAAA,EAAM,eAAA;AAAA,MACN,IAAA,EAAM;AAAA,QACJ,UAAU,KAAA,CAAM,QAAA;AAAA,QAChB,UAAU,KAAA,CAAM,QAAA;AAAA,QAChB,YAAA,EAAc,MAAM,YAAY,CAAA;AAAA,QAChC,OAAO,KAAA,CAAM;AAAA,OACf;AAAA,MACA,WAAA,EAAa,CAAC,CAAC,KAAA,CAAM,kBAAkB;AAAA,KACxC,CAAA;AAED,IAAA,MAAM,gBAAA,GAAmB,EAAA,CAAG,SAAA,EAAWD,QAAA,CAAO,qBAAqB,CAAC,CAAA;AAEpE,IAAA,MAAM,IAAA,mBACJ,IAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAS,IAAA;AAAA,QACT,IAAA,EAAM,aAAA;AAAA,QACN,gBAAgB,MAAM;AACpB,UAAA,gBAAA,CAAiB,KAAK,CAAA;AAAA,QACxB,CAAA;AAAA,QACA,SAAS,MAAM;AACb,UAAA,gBAAA,CAAiB,KAAK,CAAA;AAAA,QACxB,CAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,OAAA,CAAQ,MAAA;AAAA,YAAR;AAAA,cACC,kBAAA,EAAkB,UAAA;AAAA,cAClB,UAAA;AAAA,cACA,IAAA,EAAM,WAAA;AAAA,cACN,IAAA,EAAM,EAAE,KAAA,EAAOE,gBAAA,EAAc;AAAA,cAC7B,SAAA,EAAW,gBAAA;AAAA,cACX,EAAA,EAAI,QAAA;AAAA,cACJ,UAAA,EAAS,gBAAA;AAAA,cACT,SAAS,MAAM;AACb,gBAAA,gBAAA,CAAiB,CAAC,aAAa,CAAA;AAAA,cACjC,CAAA;AAAA,cACC,GAAG,IAAA;AAAA,cAEH,QAAA,EAAA,YAAA,EAAc;AAAA;AAAA,WACjB;AAAA,0BACA,GAAA;AAAA,YAAC,OAAA,CAAQ,OAAA;AAAA,YAAR;AAAA,cACC,SAAA,EAAWF,SAAO,wBAAwB,CAAA;AAAA,cAC1C,YAAA,EAAY,eAAA;AAAA,cAEZ,QAAA,kBAAA,GAAA;AAAA,gBAAC,OAAA;AAAA,gBAAA;AAAA,kBACC,QAAA,EAAU,YAAA;AAAA,kBACV,iBAAA,EAAmB,qBAAA;AAAA,kBACnB,KAAA;AAAA,kBACA,iBAAA,EAAiB,QAAA;AAAA,kBACjB,wBAAA,EAA0B,IAAA;AAAA,kBAEzB,QAAA,EAAA,CAAC,EAAE,KAAA,EAAAG,MAAAA,OACFA,MAAAA,CAAM,GAAA,CAAI,CAACF,KAAAA,qBACT,GAAA,CAAC,QAAQ,MAAA,EAAR,EAAgC,MAAMA,KAAAA,EACpC,QAAA,EAAAA,MAAK,KAAA,EAAA,EADaA,KAAAA,CAAK,KAE1B,CACD;AAAA;AAAA;AAEL;AAAA;AACF;AAAA;AAAA,KACF;AAGF,IAAA,IAAI,gBAAA,EAAkB;AACpB,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,uBACE,GAAA,CAAC,sBAAmB,IAAA,EAAM,EAAE,WAAW,KAAA,EAAO,QAAA,EAAU,QAAA,EAAS,EAC9D,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,EAEJ;AACF;AAEA,aAAA,CAAc,WAAA,GAAc,eAAA;;AC1L5B,MAAM,YAAA,GAAe,CAAC,EAAE,QAAA,EAAU,WAAU,KAAwB;AAElE,EAAA,QAAQ,QAAA;AAAU,IAChB,KAAK,QAAA;AACH,MAAA,uBAAO,GAAA,CAAC,aAAA,EAAA,EAAe,GAAI,SAAA,EAAkC,CAAA;AAAA,IAE/D,KAAK,cAAA;AACH,MAAA,uBACE,GAAA,CAAC,mBAAA,EAAA,EAAqB,GAAI,SAAA,EAAwC,CAAA;AAAA,IAGtE,KAAK,YAAA;AACH,MAAA,uBAAO,GAAA,CAAC,iBAAA,EAAA,EAAmB,GAAI,SAAA,EAAsC,CAAA;AAAA,IAEvE,KAAK,QAAA;AACH,MAAA,uBAAO,GAAA,CAAC,aAAA,EAAA,EAAe,GAAI,SAAA,EAAkC,CAAA;AAAA,IAE/D;AACE,MAAA,OAAO,IAAA;AAAA;AAEb,CAAA;AA8BO,MAAM,sBAAsB,CAAC;AAAA,EAClC,eAAA;AAAA,EACA;AACF,CAAA,KAAgC;AAE9B,EAAA,MAAM,EAAE,aAAA,EAAe,UAAA,EAAW,GAAI,WAAW,cAAc,CAAA;AAC/D,EAAA,MAAM,gBAAgB,KAAA,EAAM;AAC5B,EAAA,MAAM,OAAO,cAAA,EAAe;AAG5B,EAAA,MAAM,YAAA,GAAe,QAAQ,MAAM;AACjC,IAAA,MAAM,WAAA,GAAc,UAAA,EAAY,GAAA,CAAI,CAAC,EAAA,KAAO;AAC1C,MAAA,OAAO,cAAc,IAAA,CAAK,CAAC,IAAA,KAAS,IAAA,CAAK,OAAO,EAAE,CAAA;AAAA,IACpD,CAAC,CAAA;AAED,IAAA,OAAO,aAAa,MAAA,CAAO,CAAC,SAAS,IAAA,KAAS,MAAS,KAAK,EAAC;AAAA,EAC/D,CAAA,EAAG,CAAC,UAAA,EAAY,aAAa,CAAC,CAAA;AAE9B,EAAA,MAAM,uBAAA,GAA0B,EAAA;AAAA,IAC9BD,SAAO,qBAAqB,CAAA;AAAA,IAC5BA,SAAO,0BAA0B;AAAA,GACnC;AAEA,EAAA,MAAM,YAAA,GAAe,SAAA,KAAc,YAAA,GAAeI,YAAA,GAAYC,WAAA;AAE9D,EAAA,uBACE,IAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAS,IAAA,EAChB,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,OAAA,CAAQ,MAAA;AAAA,MAAR;AAAA,QACC,IAAA;AAAA,QACA,UAAA,EAAW,OAAA;AAAA,QACX,EAAA,EAAI,aAAA;AAAA,QACJ,SAAA,EAAW,uBAAA;AAAA,QACX,UAAA,EAAS,0BAAA;AAAA,QACT,YAAA,EAAW,4BAAA;AAAA,QAEX,QAAA,kBAAA,GAAA,CAAC,QAAK,GAAA,EAAK,YAAA,EAAc,MAAM,IAAA,KAAS,QAAA,GAAW,UAAU,IAAA,EAAM;AAAA;AAAA,KACrE;AAAA,oBACA,GAAA,CAAC,OAAA,CAAQ,OAAA,EAAR,EACC,QAAA,kBAAA,GAAA,CAAC,mBAAA,CAAoB,QAAA,EAApB,EAA6B,KAAA,EAAO,EAAE,gBAAA,EAAkB,IAAA,EAAK,EAC5D,QAAA,kBAAA,IAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,MAAA;AAAA,QACL,SAAA,EAAWL,SAAO,0BAA0B,CAAA;AAAA,QAC5C,UAAA,EAAS,uBAAA;AAAA,QACT,iBAAA,EAAiB,aAAA;AAAA,QACjB,SAAA,EAAW,4BAAA;AAAA,QAEV,QAAA,EAAA;AAAA,UAAA,YAAA,CAAa,GAAA,CAAI,CAAC,IAAA,KAAS;AAC1B,YAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,EAAA,EAAG,GAAI,IAAA;AACpC,YAAA,uBACE,GAAA;AAAA,cAAC,IAAA;AAAA,cAAA;AAAA,gBAEC,IAAA,EAAK,UAAA;AAAA,gBACL,UAAA,EAAS,uBAAA;AAAA,gBAET,QAAA,kBAAA,GAAA;AAAA,kBAAC,YAAA;AAAA,kBAAA;AAAA,oBACC,QAAA;AAAA,oBACA,SAAA;AAAA,oBACA;AAAA;AAAA;AACF,eAAA;AAAA,cARK,CAAA,EAAG,QAAQ,CAAA,CAAA,EAAI,EAAE,CAAA;AAAA,aASxB;AAAA,UAEJ,CAAC,CAAA;AAAA,UAEA,eAAA,EAAiB,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,qBAC3B,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cAEC,IAAA,EAAK,UAAA;AAAA,cACL,UAAA,EAAS,uBAAA;AAAA,cAER,QAAA,EAAA;AAAA,aAAA;AAAA,YAJI,mBAAmB,KAAK,CAAA;AAAA,WAMhC;AAAA;AAAA;AAAA,OAEL,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ,CAAA;;;;;;ACvHA,MAAM,0BAAA,GAA6B,UAAA,CAGjC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAChB,EAAA,MAAM,EAAE,QAAA,EAAU,YAAA,EAAc,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AACvD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,UAAA,CAAW,cAAc,CAAA;AAE9C,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,UAAA,EAAW,QAAA;AAAA,MACX,GAAA,EAAK,CAAA;AAAA,MACL,IAAA,EAAM,QAAA,KAAa,UAAA,GAAa,QAAA,GAAW,MAAA;AAAA,MAC3C,UAAA,EAAS,uBAAA;AAAA,MACT,IAAA,EAAK,OAAA;AAAA,MACL,YAAA,EAAY,YAAY,SAAA,GAAY,kBAAA;AAAA,MACpC,SAAA,EAAWA,SAAO,uBAAuB,CAAA;AAAA,MACxC,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC,CAAA;AAED,0BAAA,CAA2B,WAAA,GAAc,qBAAA;AAElC,MAAM,mBAAA,GAAsB;;;;;;;AClC5B,MAAM,kBAAA,GAAqB,UAAA;AAAA,EAChC,CAAC,OAAgC,GAAA,KAA+B;AAC9D,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,KAAA;AAC/B,IAAA,MAAM,OAAO,cAAA,EAAe;AAE5B,IAAA,MAAM,iBAAA,GAAoB,EAAA,CAAG,MAAA,CAAO,sBAAsB,GAAG,SAAS,CAAA;AAEtE,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,gCAAgC,CAAA,EACrD,QAAA,kBAAA,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,iBAAA;AAAA,QACX,IAAA;AAAA,QACA,UAAA,EAAS,sBAAA;AAAA,QACR,GAAG;AAAA;AAAA,KACN,EACF,CAAA;AAAA,EAEJ;AACF;AAEA,kBAAA,CAAmB,WAAA,GAAc,oBAAA;;ACuC1B,MAAM,UAAU,MAAA,CAAO,MAAA;AAAA,EAC5B,UAAA,CAAyC,SAAS,YAAA,CAAa,KAAA,EAAO,GAAA,EAAK;AACzE,IAAA,MAAM,EAAE,YAAA,EAAc,cAAA,EAAe,GAAI,mBAAmB,KAAK,CAAA;AACjE,IAAA,MAAM;AAAA,MACJ,iBAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAA,GAAY,YAAA;AAAA,MACZ,QAAA,GAAW,MAAA;AAAA,MACX,SAAA;AAAA,MACA,eAAA;AAAA,MACA,IAAA,GAAO,QAAA;AAAA,MACP,GAAG;AAAA,KACL,GAAI,cAAA;AAGJ,IAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,QAAA,CAA6B,EAAE,CAAA;AACzE,IAAA,MAAM,eAAA,GAAkB,OAAuB,IAAI,CAAA;AACnD,IAAA,MAAM,UAAA,GAAa,OAAuB,IAAI,CAAA;AAG9C,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,QAAA,CAAmB,EAAE,CAAA;AAGzD,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,MAAM,gBAAgB,KAAA,CAAM,IAAA;AAAA,QAC1B,eAAA,CAAgB,OAAA,EAAS,gBAAA,CAAiB,WAAW,KAAK;AAAC,OAC7D,CAAE,GAAA,CAAI,CAAC,EAAA,KAAO;AACZ,QAAA,OAAO,EAAA,CAAG,aAAa,SAAS,CAAA;AAAA,MAClC,CAAC,CAAA;AAED,MAAA,aAAA,CAAc,aAAa,CAAA;AAAA,IAC7B,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAGb,IAAA,MAAM,OAAA,GAAU,WAAA,CAAY,CAAC,IAAA,KAA2B;AACtD,MAAA,gBAAA,CAAiB,CAAC,IAAA,KAAS,CAAC,GAAG,IAAA,EAAM,IAAI,CAAC,CAAA;AAAA,IAC5C,CAAA,EAAG,EAAE,CAAA;AAGL,IAAA,MAAM,UAAA,GAAa,WAAA,CAAY,CAAC,IAAA,KAA2B;AACzD,MAAA,gBAAA;AAAA,QAAiB,CAAC,SAChB,IAAA,CAAK,MAAA,CAAO,CAAC,SAAA,KAAc,SAAA,CAAU,EAAA,KAAO,IAAA,CAAK,EAAE;AAAA,OACrD;AAAA,IACF,CAAA,EAAG,EAAE,CAAA;AAGL,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,WAAW,OAAA,EAAS;AAEtB,QAAA,0BAAA,CAA2B,WAAW,OAAO,CAAA;AAAA,MAC/C;AAAA,IACF,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAGb,IAAA,MAAM,aAAA,GAAgB,WAAA;AAAA,MACpB,CAAC,KAAA,KAA+C;AAC9C,QAAA,IAAI,WAAW,OAAA,EAAS;AACtB,UAAA,oBAAA,CAAqB,KAAA,EAAO,WAAW,OAAO,CAAA;AAAA,QAChD;AAEA,QAAA,SAAA,GAAY,KAAK,CAAA;AAAA,MACnB,CAAA;AAAA,MACA,CAAC,SAAS;AAAA,KACZ;AAGA,IAAA,MAAM,mBACH,QAAA,KAAa,UAAA,IAAc,cAAc,MAAA,GAAS,CAAA,IACnD,CAAC,CAAC,eAAA;AAGJ,IAAA,MAAM,KAAA,GAAQ,OAAA;AAAA,MACZ,OAAO;AAAA,QACL,aAAA;AAAA,QACA,OAAA;AAAA,QACA,UAAA;AAAA,QACA,UAAA;AAAA,QACA,UAAA;AAAA,QACA,QAAA;AAAA,QACA;AAAA,OACF,CAAA;AAAA,MACA;AAAA,QACE,aAAA;AAAA,QACA,OAAA;AAAA,QACA,UAAA;AAAA,QACA,UAAA;AAAA,QACA,UAAA;AAAA,QACA,QAAA;AAAA,QACA;AAAA;AACF,KACF;AAEA,IAAA,MAAM,aAAA,GAAgB;AAAA,MACpB,GAAG,KAAA;AAAA,MACH,GAAG;AAAA,KACL;AAEA,IAAA,MAAM,iBAAA,GAAoB,EAAA,CAAGA,QAAA,CAAO,SAAS,GAAG,SAAS,CAAA;AAEzD,IAAA,MAAM,wBAAA,GAA2B,EAAA,CAAGA,QAAA,CAAO,iBAAiB,CAAA,EAAG;AAAA,MAC7D,CAACA,QAAA,CAAO,CAAA,SAAA,EAAY,QAAQ,CAAA,CAAE,CAAC,GAAG;AAAA,KACnC,CAAA;AAED,IAAA,uBACE,GAAA,CAAC,cAAA,CAAe,QAAA,EAAf,EAAwB,KAAA,EACvB,QAAA,kBAAA,IAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,SAAA,KAAc,YAAA,GAAe,KAAA,GAAQ,QAAA;AAAA,QAChD,IAAA,EAAM,QAAA,KAAa,MAAA,GAAS,MAAA,GAAS,QAAA;AAAA,QACrC,UAAA,EAAW,QAAA;AAAA,QACX,SAAA,EAAW,iBAAA;AAAA,QACX,KAAA,EAAO,aAAA;AAAA,QACP,GAAA,EAAK,YAAA,CAAa,CAAC,UAAA,EAAY,GAAG,CAAC,CAAA;AAAA,QACnC,IAAA,EAAK,SAAA;AAAA,QACL,UAAA,EAAS,SAAA;AAAA,QACT,kBAAA,EAAkB,SAAA;AAAA,QAClB,YAAA,EAAY,eAAe,iBAAiB,CAAA,sDAAA,CAAA;AAAA,QAC5C,SAAA,EAAW,aAAA;AAAA,QACV,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,GAAA,EAAK,YAAA,CAAa,CAAC,eAAA,EAAiB,GAAG,CAAC,CAAA;AAAA,cACxC,SAAA,EAAW,wBAAA;AAAA,cACX,SAAA,EAAW,SAAA,KAAc,YAAA,GAAe,KAAA,GAAQ,QAAA;AAAA,cAChD,IAAA,EAAM,QAAA,KAAa,MAAA,GAAS,MAAA,GAAS,QAAA;AAAA,cACrC,UAAA,EAAW,QAAA;AAAA,cACX,IAAA,EAAM,CAAA;AAAA,cACN,UAAA,EAAS,iBAAA;AAAA,cACT,eAAA,EAAe,QAAA;AAAA,cAEd;AAAA;AAAA,WACH;AAAA,UAEC,gBAAA,oBACC,GAAA;AAAA,YAAC,mBAAA;AAAA,YAAA;AAAA,cACC,SAAA;AAAA,cACA;AAAA;AAAA;AACF;AAAA;AAAA,KAEJ,EACF,CAAA;AAAA,EAEJ,CAAC,CAAA;AAAA,EACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAqBE,MAAA,EAAQ,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgBR,YAAA,EAAc,mBAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAkBd,UAAA,EAAY,iBAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAsBZ,MAAA,EAAQ,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAiBR,YAAA,EAAc,mBAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYd,MAAA,EAAQ;AAAA;AAEZ;AACA,OAAA,CAAQ,WAAA,GAAc,SAAA;AACf,MAAM,cAAA,GAAiB;;;;"}

package/dist/Toolbar.css

@@ -1,207 +1,32 @@
-@layer starter, reset, base, state, application;
-/* REVERT LAYER BUGFIX START */
-button[data-anv=toolbar-button],
-a[data-anv=toolbar-button-link],
-button[data-anv=toolbar-button-toggle],
-button[data-anv=toolbar-select] {
-  all: revert-layer;
+.anvil2 {._toolbar-control-group_th00x_1 {
+  flex: var(--toolbar-group-flex);
+  flex-wrap: var(--toolbar-group-wrap, wrap);
+  overflow: hidden;
+  padding-block: var(--a2-size-2, 0.5rem);
+  padding-inline: var(--a2-size-1, 0.25rem);
+}._toolbar-control-group_th00x_1[data-anv=toolbar-filter-group] {
+  min-width: 5.625rem;
+}._toolbar-control-group_th00x_1[data-anv=toolbar-control-group] {
+  justify-content: flex-end;
+}[data-anv=toolbar-content]:has(._toolbar-control-group_th00x_1) {
+  flex-wrap: nowrap;
+}[data-anv=toolbar-content]:has(._toolbar-control-group_th00x_1)[data-overflow=collapse] > [data-anv=toolbar-filter-group] {
+  --toolbar-group-flex: 1 0 0;
+  --toolbar-group-wrap: nowrap;
+}[data-anv=toolbar-content]:has(._toolbar-control-group_th00x_1)[data-overflow=collapse] > [data-anv=toolbar-control-group] {
+  --toolbar-group-flex: 0 1 auto;
+  --toolbar-group-wrap: nowrap;
+}[data-anv=toolbar-content]:has(._toolbar-control-group_th00x_1)[data-overflow=wrap] > [data-anv=toolbar-filter-group] {
+  --toolbar-group-flex: 1 0 0;
+}[data-anv=toolbar-content]:has(._toolbar-control-group_th00x_1)[data-overflow=wrap] > [data-anv=toolbar-control-group] {
+  --toolbar-group-flex: 0 1 auto;
 }
-
-/* REVERT LAYER BUGFIX END */
-/* -- Toolbar Base */
-@layer base {
-  ._toolbar_15bpr_12[aria-orientation=horizontal] {
-    width: 100%;
-  }
-  ._toolbar_15bpr_12[aria-orientation=vertical] {
-    height: 100%;
-    max-height: inherit;
-  }
-  ._toolbar-content_15bpr_19 {
-    align-items: flex-start;
-    gap: 0.25rem;
-    width: 100%;
-  }
-  ._overflow-wrap_15bpr_24 {
-    flex-wrap: wrap;
-  }
-  ._overflow-collapse_15bpr_27 {
-    flex-wrap: nowrap;
-  }
-  ._toolbar-overflow-content_15bpr_30 {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    list-style: none;
-    padding: 0.5rem !important;
-    margin: 0 !important;
-  }
-  ._toolbar-overflow-content_15bpr_30 ._toolbar-button-item_15bpr_38 {
-    width: 100%;
-  }
+}.anvil2 {._toolbar-search-field-container_1kk8y_1 {
+  padding-block: var(--a2-size-2, 0.5rem);
+}._toolbar-search-field_1kk8y_1 {
+  max-width: 12.5rem;
+  padding-inline-start: var(--a2-size-1, 0.25rem);
+}._toolbar-search-field_1kk8y_1 input[type=search] {
+  padding-block: 0;
 }
-/* -- Toolbar Overflow and Orientation States */
-@layer state {
-  [aria-orientation=vertical] ._toolbar-item_15bpr_44,
-  [aria-orientation=vertical] ._toolbar-button-item_15bpr_38 {
-    width: 100%;
-  }
-  ._overflow-collapse_15bpr_27 {
-    overflow: hidden;
-  }
-  [aria-orientation=vertical] ._overflow-collapse_15bpr_27 {
-    height: 100%;
-  }
-}
-/* -- Toolbar Items Component Overrides */
-@layer application {
-  ._toolbar-button-item_15bpr_38 {
-    white-space: nowrap;
-    min-width: -moz-min-content;
-    min-width: min-content;
-  }
-  ._toolbar-button-toggle-item_15bpr_61[aria-pressed=false] {
-    border-color: var(--button-primary-foreground-color, #ffffff);
-  }
-  ._toolbar-button-toggle-item_15bpr_61[aria-pressed=true] {
-    border-color: var(--background-color-primary-subdued, #E0F2FF);
-  }
-  ._toolbar-overflow-trigger_15bpr_67[aria-expanded=true] {
-    --button-background-color: var(--button-ghost-background-color-hover, rgba(20, 20, 20, 0.0784313725));
-  }
-}@layer starter, reset, base, state, application;
-
-button[data-anv=toolbar-button],
-a[data-anv=toolbar-button-link],
-button[data-anv=toolbar-button-toggle],
-button[data-anv=filter-group-drawer-trigger],
-button[data-anv=toolbar-boolean-filter],
-button[data-anv=toolbar-select] {
-  all: revert-layer;
-}
-
-[data-anv=filter-group-drawer] > section,
-[data-anv=filter-button-apply],
-[data-anv=filter-button-content] {
-  all: revert-layer;
-}
-
-@layer base {
-  ._filter-button-trigger_10yfo_17 {
-    white-space: nowrap;
-  }
-  ._filter-button-content_10yfo_20 {
-    min-width: 12.5rem;
-    max-width: 22.5rem;
-  }
-  ._filter-select-content_10yfo_24:has(input[type=search]) {
-    max-height: 18.75rem;
-  }
-  ._filter-select-content_10yfo_24:not(:has(input[type=search])) {
-    max-height: 18.5rem;
-  }
-  ._filter-select-content_10yfo_24:not(:has(._filter-button-buttons_10yfo_30)) {
-    padding-block-end: 0.75rem;
-  }
-  ._filter-select-content_10yfo_24 ._filter-button-buttons_10yfo_30 {
-    padding-block-end: 1rem;
-  }
-  ._filter-drawer-trigger_10yfo_36 {
-    position: sticky;
-    right: 0;
-    border: none;
-  }
-  ._filter-button-buttons_10yfo_30 {
-    background: var(--background-color-strong, #f7f7f7);
-    padding-inline: 1rem;
-    padding-block-start: 0.5rem;
-    position: sticky;
-    bottom: 0;
-  }
-  [data-anv=toolbar-filter-group] {
-    container-type: inline-size;
-  }
-  @container (max-width: primitive.$breakpoint-md) {
-    ._filter-item_10yfo_52 {
-      display: none;
-    }
-  }
-  ._filter-select-search_10yfo_56 {
-    background: var(--background-color-strong, #f7f7f7);
-    padding-block-start: 1rem;
-    padding-inline: 1rem;
-    position: sticky;
-    top: 0;
-    z-index: 1;
-  }
-  ._filter-select-search_10yfo_56 input[type=search] {
-    padding-inline-end: 0.5rem;
-  }
-}
-@layer application {
-  ._filter-button-trigger_10yfo_17[aria-expanded=true]:not(._filter-button-trigger--selected_10yfo_69) {
-    --button-background-color: var(--button-ghost-background-color-hover, rgba(20, 20, 20, 0.0784313725));
-  }
-  ._filter-button-trigger--selected_10yfo_69 {
-    --button-background-color: var(--background-color-primary-subdued, #E0F2FF);
-    color: var(--foreground-color-primary, #0265DC);
-  }
-  ._filter-button-trigger_10yfo_17 [data-anv=chip],
-  ._filter-drawer-trigger_10yfo_36 [data-anv=chip] {
-    margin-block: -0.25rem;
-  }
-  ._filter-drawer-trigger--chipped_10yfo_80 {
-    background-color: var(--background-color-primary-subdued, #E0F2FF);
-    color: var(--foreground-color-primary, #0265DC);
-    min-width: -moz-max-content;
-    min-width: max-content;
-  }
-  ._filter-select-search_10yfo_56 > div[role=presentation],
-  ._filter-select-search_10yfo_56 input[type=search] {
-    padding-inline-end: 1rem;
-  }
-}@layer starter, reset, base, state, application;
-@layer base {
-  ._toolbar-control-group_13h8p_2 {
-    overflow: hidden;
-    flex: var(--toolbar-group-flex);
-    flex-wrap: var(--toolbar-group-wrap, wrap);
-    padding-block: 0.5rem;
-    padding-inline: 0.25rem;
-  }
-  ._toolbar-control-group_13h8p_2[data-anv=toolbar-filter-group] {
-    min-width: 5.625rem;
-  }
-  ._toolbar-control-group_13h8p_2[data-anv=toolbar-control-group] {
-    justify-content: flex-end;
-  }
-  [data-anv=toolbar-content]:has(._toolbar-control-group_13h8p_2) {
-    flex-wrap: nowrap;
-  }
-  [data-anv=toolbar-content]:has(._toolbar-control-group_13h8p_2)[data-overflow=collapse] > [data-anv=toolbar-filter-group] {
-    --toolbar-group-flex: 1 0 0;
-    --toolbar-group-wrap: nowrap;
-  }
-  [data-anv=toolbar-content]:has(._toolbar-control-group_13h8p_2)[data-overflow=collapse] > [data-anv=toolbar-control-group] {
-    --toolbar-group-flex: 0 1 auto;
-    --toolbar-group-wrap: nowrap;
-  }
-  [data-anv=toolbar-content]:has(._toolbar-control-group_13h8p_2)[data-overflow=wrap] > [data-anv=toolbar-filter-group] {
-    --toolbar-group-flex: 1 0 0;
-  }
-  [data-anv=toolbar-content]:has(._toolbar-control-group_13h8p_2)[data-overflow=wrap] > [data-anv=toolbar-control-group] {
-    --toolbar-group-flex: 0 1 auto;
-  }
-}@layer starter, reset, base, state, application;
-@layer application {
-  ._toolbar-search-field-container_5vts9_2 {
-    padding-block: 0.5rem;
-  }
-  ._toolbar-search-field_5vts9_2 {
-    max-width: 12.5rem;
-    padding-inline-start: 0.25rem;
-  }
-  ._toolbar-search-field_5vts9_2 input {
-    padding-block: 0;
-  }
 }

package/dist/Toolbar.js

@@ -1,2 +1,3 @@
-export { T as Toolbar, a as ToolbarButton, c as ToolbarButtonLink, b as ToolbarButtonToggle, e as ToolbarControlGroup, g as ToolbarElement, f as ToolbarSearchField, d as ToolbarSelect, T as default } from './Toolbar-Dsaufi65.js';
+export { T as Toolbar, a as ToolbarButton, b as ToolbarButtonLink, d as ToolbarControlGroup, f as ToolbarElement, e as ToolbarSearchField, c as ToolbarSelect, T as default } from './Toolbar-Dzj2KMEy.js';
+export { T as ToolbarButtonToggle } from './ToolbarButtonToggle--2Ka05N8.js';
 //# sourceMappingURL=Toolbar.js.map

package/dist/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"Toolbar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/ToolbarButtonToggle--2Ka05N8.js

@@ -0,0 +1,284 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, useContext, useId, useRef, useCallback, useEffect, forwardRef } from 'react';
+import { B as ButtonToggle } from './ButtonToggle-Ct9_5bhC.js';
+import { T as Tooltip } from './Tooltip-BlStOXN3.js';
+import { g as getKeyboardFocusableElements } from './getKeyboardFocusableElements-QqcABz0D.js';
+import { c as cx } from './index-De1g9FRV.js';
+import { u as useIntersectionObserver } from './useIntersectionObserver-BEmMDO3P.js';
+import { useTrackingId } from './useTrackingId.js';
+
+import './ToolbarButtonToggle.css';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 isHidden = !item.closest('[aria-hidden="true"]');
+      const isInDrawer = !item.closest('[data-anv="filter-group-drawer"]');
+      const isInPopover = !item.closest('[data-anv="popover-content"]');
+      return isHidden && isInDrawer && isInPopover;
+    }
+  );
+  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_t4zws_1";
+const styles = {
+	toolbar: toolbar,
+	"toolbar-item": "_toolbar-item_t4zws_8",
+	"toolbar-button-item": "_toolbar-button-item_t4zws_9",
+	"toolbar-overflow-trigger": "_toolbar-overflow-trigger_t4zws_10",
+	"toolbar-content": "_toolbar-content_t4zws_14",
+	"overflow-wrap": "_overflow-wrap_t4zws_20",
+	"overflow-collapse": "_overflow-collapse_t4zws_24",
+	"toolbar-overflow-content": "_toolbar-overflow-content_t4zws_32",
+	"toolbar-button-toggle-item": "_toolbar-button-toggle-item_t4zws_49"
+};
+
+const ToolbarItemWrapper = ({
+  item,
+  children,
+  observerRoot,
+  onVisibilityChange,
+  rootMargin,
+  className
+}) => {
+  const { addItem, removeItem, toolbarRef, overflow } = useContext(ToolbarContext);
+  const itemId = useId();
+  const elementRef = useRef(null);
+  const isCollapseMode = overflow === "collapse";
+  const prevIntersectingRef = useRef(true);
+  const handleVisibilityChange = useCallback(
+    (isVisible) => {
+      if (!isCollapseMode || prevIntersectingRef.current === isVisible) return;
+      if (onVisibilityChange) {
+        onVisibilityChange(isVisible);
+      } else if (item) {
+        const itemWithId = { ...item, id: itemId };
+        if (isVisible) {
+          removeItem(itemWithId);
+        } else {
+          addItem(itemWithId);
+        }
+      }
+      prevIntersectingRef.current = isVisible;
+    },
+    [isCollapseMode, onVisibilityChange, item, itemId, addItem, removeItem]
+  );
+  const { isIntersecting, ref } = useIntersectionObserver({
+    root: isCollapseMode ? observerRoot ?? toolbarRef.current : null,
+    threshold: 1,
+    initialIsIntersecting: true,
+    // Start as visible
+    onChange: handleVisibilityChange,
+    rootMargin
+  });
+  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]);
+  const toolbarItemClassName = cx(styles["toolbar-item"], className);
+  const isHidden = isCollapseMode && !isIntersecting;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setRefCallback,
+      className: toolbarItemClassName,
+      style: { visibility: isHidden ? "hidden" : "visible" },
+      "aria-hidden": isHidden,
+      ...{ inert: isHidden ? "" : void 0 },
+      "data-id": itemId,
+      "data-anv": "toolbar-item",
+      children
+    }
+  );
+};
+
+const OverflowItemContext = createContext({
+  isInOverflowMenu: false
+});
+const useOverFlowItemContext = () => useContext(OverflowItemContext);
+
+const ToolbarButtonToggle = forwardRef((props, _ref) => {
+  const { className, children, isFilter, ...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 || isFilter) {
+    return item;
+  }
+  return /* @__PURE__ */ jsx(ToolbarItemWrapper, { item: { itemProps: props, itemType: "buttonToggle" }, children: item });
+});
+ToolbarButtonToggle.displayName = "ToolbarButtonToggle";
+
+export { OverflowItemContext as O, ToolbarButtonToggle as T, useToolbarSize as a, ToolbarItemWrapper as b, ToolbarContext as c, updateToolbarItemsTabIndex as d, handleToolbarKeyDown as e, handleMenuKeyboardNavigation as h, styles as s, useOverFlowItemContext as u };
+//# sourceMappingURL=ToolbarButtonToggle--2Ka05N8.js.map