@seeqdev/qomponents 0.0.57 → 0.0.59

package/dist/index.js

@@ -3010,6 +3010,20 @@ function useFloating(options) {
   }), [data, update, refs, elements, floatingStyles]);
 }
 
+const $7e8f5cd07187803e$export$21b07c8f274aebd5 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const { children: children , width: width = 10 , height: height = 5 , ...arrowProps } = props;
+    return /*#__PURE__*/ React.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.svg, _extends({}, arrowProps, {
+        ref: forwardedRef,
+        width: width,
+        height: height,
+        viewBox: "0 0 30 10",
+        preserveAspectRatio: "none"
+    }), props.asChild ? children : /*#__PURE__*/ React.createElement("polygon", {
+        points: "0,0 30,0 15,10"
+    }));
+});
+/* -----------------------------------------------------------------------------------------------*/ const $7e8f5cd07187803e$export$be92b6f5f03c0fe9 = $7e8f5cd07187803e$export$21b07c8f274aebd5;
+
 function $db6c3485150b8e66$export$1ab7ae714698c4b8(element) {
     const [size, setSize] = React.useState(undefined);
     $9f79659886946c16$export$e5c5a5f917a5871c(()=>{
@@ -3229,6 +3243,52 @@ const $cf1ac5d9fe0e8206$export$bc4ae5855d3c4fc = /*#__PURE__*/ React.forwardRef(
         }
     }))));
 });
+/* -------------------------------------------------------------------------------------------------
+ * PopperArrow
+ * -----------------------------------------------------------------------------------------------*/ const $cf1ac5d9fe0e8206$var$ARROW_NAME = 'PopperArrow';
+const $cf1ac5d9fe0e8206$var$OPPOSITE_SIDE = {
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right'
+};
+const $cf1ac5d9fe0e8206$export$79d62cd4e10a3fd0 = /*#__PURE__*/ React.forwardRef(function $cf1ac5d9fe0e8206$export$79d62cd4e10a3fd0(props, forwardedRef) {
+    const { __scopePopper: __scopePopper , ...arrowProps } = props;
+    const contentContext = $cf1ac5d9fe0e8206$var$useContentContext($cf1ac5d9fe0e8206$var$ARROW_NAME, __scopePopper);
+    const baseSide = $cf1ac5d9fe0e8206$var$OPPOSITE_SIDE[contentContext.placedSide];
+    return(/*#__PURE__*/ // we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)
+    // doesn't report size as we'd expect on SVG elements.
+    // it reports their bounding box which is effectively the largest path inside the SVG.
+    React.createElement("span", {
+        ref: contentContext.onArrowChange,
+        style: {
+            position: 'absolute',
+            left: contentContext.arrowX,
+            top: contentContext.arrowY,
+            [baseSide]: 0,
+            transformOrigin: {
+                top: '',
+                right: '0 0',
+                bottom: 'center 0',
+                left: '100% 0'
+            }[contentContext.placedSide],
+            transform: {
+                top: 'translateY(100%)',
+                right: 'translateY(50%) rotate(90deg) translateX(-50%)',
+                bottom: `rotate(180deg)`,
+                left: 'translateY(50%) rotate(-90deg) translateX(50%)'
+            }[contentContext.placedSide],
+            visibility: contentContext.shouldHideArrow ? 'hidden' : undefined
+        }
+    }, /*#__PURE__*/ React.createElement($7e8f5cd07187803e$export$be92b6f5f03c0fe9, _extends({}, arrowProps, {
+        ref: forwardedRef,
+        style: {
+            ...arrowProps.style,
+            // ensures the element can be measured correctly (mostly for if SVG)
+            display: 'block'
+        }
+    }))));
+});
 /* -----------------------------------------------------------------------------------------------*/ function $cf1ac5d9fe0e8206$var$isNotNull(value) {
     return value !== null;
 }
@@ -3284,6 +3344,7 @@ function $cf1ac5d9fe0e8206$var$getSideAndAlignFromPlacement(placement) {
 const $cf1ac5d9fe0e8206$export$be92b6f5f03c0fe9 = $cf1ac5d9fe0e8206$export$badac9ada3a0bdf9;
 const $cf1ac5d9fe0e8206$export$b688253958b8dfe7 = $cf1ac5d9fe0e8206$export$ecd4e1ccab6ed6d;
 const $cf1ac5d9fe0e8206$export$7c6e2c02157bb7d2 = $cf1ac5d9fe0e8206$export$bc4ae5855d3c4fc;
+const $cf1ac5d9fe0e8206$export$21b07c8f274aebd5 = $cf1ac5d9fe0e8206$export$79d62cd4e10a3fd0;
 
 const $f1701beae083dbae$export$602eac185826482c = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
     var _globalThis$document;
@@ -4293,7 +4354,7 @@ var SideCar = exportSidecar(effectCar, RemoveScrollSideCar);
 
 var ReactRemoveScroll = React__namespace.forwardRef(function (props, ref) { return (React__namespace.createElement(RemoveScroll, __assign({}, props, { ref: ref, sideCar: SideCar }))); });
 ReactRemoveScroll.classNames = RemoveScroll.classNames;
-var $67UHm$RemoveScroll = ReactRemoveScroll;
+var $epM9y$RemoveScroll = ReactRemoveScroll;
 
 /* -------------------------------------------------------------------------------------------------
  * Popover
@@ -4384,7 +4445,7 @@ const $cb5cc270b50c6fcd$export$d7e1f420b25549ff = /*#__PURE__*/ React.forwardRef
         const content = contentRef.current;
         if (content) return hideOthers(content);
     }, []);
-    return /*#__PURE__*/ React.createElement($67UHm$RemoveScroll, {
+    return /*#__PURE__*/ React.createElement($epM9y$RemoveScroll, {
         as: $5e63c961fc1ce211$export$8c6ed5c666ac1360,
         allowPinchZoom: true
     }, /*#__PURE__*/ React.createElement($cb5cc270b50c6fcd$var$PopoverContentImpl, _extends({}, props, {
@@ -4486,14 +4547,22 @@ const $cb5cc270b50c6fcd$var$PopoverContentNonModal = /*#__PURE__*/ React.forward
         }
     }))));
 });
+const $cb5cc270b50c6fcd$export$3152841115e061b2 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const { __scopePopover: __scopePopover , ...arrowProps } = props;
+    const popperScope = $cb5cc270b50c6fcd$var$usePopperScope(__scopePopover);
+    return /*#__PURE__*/ React.createElement($cf1ac5d9fe0e8206$export$21b07c8f274aebd5, _extends({}, popperScope, arrowProps, {
+        ref: forwardedRef
+    }));
+});
 /* -----------------------------------------------------------------------------------------------*/ function $cb5cc270b50c6fcd$var$getState(open) {
     return open ? 'open' : 'closed';
 }
 const $cb5cc270b50c6fcd$export$be92b6f5f03c0fe9 = $cb5cc270b50c6fcd$export$5b6b19405a83ff9d;
 const $cb5cc270b50c6fcd$export$41fb9f06171c75f4 = $cb5cc270b50c6fcd$export$7dacb05d26466c3;
 const $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2 = $cb5cc270b50c6fcd$export$d7e1f420b25549ff;
+const $cb5cc270b50c6fcd$export$21b07c8f274aebd5 = $cb5cc270b50c6fcd$export$3152841115e061b2;
 
-const borderStyles$1 = [
+const borderStyles$3 = [
     'tw-border-solid',
     'tw-border',
     'tw-rounded-sm',
@@ -4527,10 +4596,10 @@ const activeBorderStyles = [
     'active:tw-border-sq-color-dark',
     'dark:hover:tw-border-sq-color-dark-dark',
 ].join(' ');
-const bgStyles = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
-const disabledClasses$1 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
+const bgStyles$2 = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
+const disabledClasses$3 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
 const PopoverContent = React__namespace.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (React__namespace.createElement($cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, { ref: ref, align: align, sideOffset: sideOffset, ...props, asChild: true })));
-const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIcon = false, tooltipText, id, popoverContent, extraClassNames, testId, tooltipTestId, tooltipOptions, isActive = false, isHtmlTooltip = true, disabled = false, onClick, onHide, }) => {
+const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIcon = false, tooltipText, id, popoverContent, extraClassNames, testId, tooltipTestId, tooltipOptions, isActive = false, isHtmlTooltip = false, hasArrow = false, disabled = false, onClick, onHide, }) => {
     let tooltipData = undefined;
     if (tooltipText) {
         tooltipData = {
@@ -4547,20 +4616,22 @@ const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIco
         }
     };
     return (React__namespace.createElement($cb5cc270b50c6fcd$export$be92b6f5f03c0fe9, { defaultOpen: false, onOpenChange: onOpenChange },
-        React__namespace.createElement($cb5cc270b50c6fcd$export$41fb9f06171c75f4, { id: id, className: `tw-border-none ${isActive ? 'active' : ''}`, disabled: disabled, "data-testid": testId, ...tooltipData, onClick: (e) => {
+        React__namespace.createElement($cb5cc270b50c6fcd$export$41fb9f06171c75f4, { id: id, className: `tw-border-none ${isActive ? 'active' : ''}`, disabled: disabled, "data-testid": testId, onClick: (e) => {
                 onClick && onClick(e);
             } },
-            React__namespace.createElement("div", { className: `tw-bg-transparent tw-p-0 tw-flex tw-flex-col tw-items-center ${isSmall ? 'tw-py-[1px] tw-px-[5px]' : 'tw-px-2 tw-py-[3px]'} ${disabled ? disabledClasses$1 : isActive ? activeBorderStyles : triggerBorderStyles} ${extraClassNames || ''}` },
+            React__namespace.createElement("div", { ...tooltipData, className: `tw-bg-transparent tw-p-0 tw-flex tw-flex-col tw-items-center ${isSmall ? 'tw-py-[1px] tw-px-[5px]' : 'tw-px-2 tw-py-[3px]'} ${disabled ? disabledClasses$3 : isActive ? activeBorderStyles : triggerBorderStyles} ${extraClassNames || ''}` },
                 React__namespace.createElement("span", { className: "tw-nowrap" },
                     React__namespace.createElement(Icon, { icon: icon, testId: "firstIcon", type: "text", large: !isSmall && !label && !secondIcon && !forceSmallIcon, extraClassNames: `tw-text-sq-text-color dark:tw-text-sq-dark-text` }),
                     secondIcon && React__namespace.createElement(Icon, { icon: secondIcon, type: "text", testId: "secondIcon" }),
                     popoverContent ? (React__namespace.createElement(Icon, { icon: "fc-arrow-dropdown", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-dark-text tw-ml-[3px] tw-text-[8px]", type: "text" })) : undefined),
                 !isSmall && (React__namespace.createElement("small", { className: "tw-text-sq-text-color dark:tw-text-sq-dark-text tw-text-[10px]" }, label)))),
-        !!popoverContent ? (React__namespace.createElement(PopoverContent, { sideOffset: 4, align: "start" },
-            React__namespace.createElement("div", { className: bgStyles +
-                    ' tw-relative tw-z-[1000] tw-min-w-6 tw-p-[0.5rem] outline-none data-[state=open]:animate-in data-[state=closed]:animate-out' +
+        !!popoverContent ? (React__namespace.createElement(PopoverContent, { sideOffset: 2, align: "start" },
+            React__namespace.createElement("div", { className: bgStyles$2 +
+                    ' tw-relative tw-z-[1000] tw-min-w-6 tw-p-[0.5rem] focus-visible:tw-outline-none tw-outline-none data-[state=open]:animate-in data-[state=closed]:animate-out' +
                     ' data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2' +
-                    borderStyles$1 }, popoverContent))) : undefined));
+                    borderStyles$3 },
+                hasArrow && (React__namespace.createElement($cb5cc270b50c6fcd$export$21b07c8f274aebd5, { className: "tw-fill-white tw-stroke-2 dark:tw-fill-sq-dark-background tw-stroke-slate-300 dark:tw-stroke-sq-color-dark-dark" })),
+                popoverContent))) : undefined));
 };
 
 const errorClasses$2 = 'tw-border-sq-danger-color';
@@ -6469,11 +6540,17 @@ const QTip = () => {
         let dataset = e.target?.dataset;
         let text = dataset?.qtipText;
         // Buttons support React.Nodes as children, the tooltip however is applied to the actual button component.
-        // we only check one level up - alternatively the tooltip can also be provided on the React.Node
+        // we only check two levels up - alternatively the tooltip can also be provided on the React.Node
         if (!text || text === '') {
-            dataset = e.target?.parentElement?.dataset;
+            let currentTooltipTarget = e.target?.parentElement;
+            dataset = currentTooltipTarget?.dataset;
             text = dataset?.qtipText;
-            tooltipTarget.current = e.target?.parentElement;
+            if (!text || text === '') {
+                currentTooltipTarget = e.target?.parentElement?.parentElement;
+                dataset = currentTooltipTarget?.dataset;
+                text = dataset?.qtipText;
+            }
+            tooltipTarget.current = currentTooltipTarget;
         }
         if (text) {
             const delay = parseInt(dataset?.qtipDelay ?? DEFAULT_TOOL_TIP_DELAY + '');
@@ -13538,7 +13615,7 @@ const baseClasses = ['focus:tw-ring-0', 'disabled:tw-cursor-not-allowed'].join('
 const containerStyles = ['tw-bg-white', 'dark:tw-bg-sq-dark-background'].join(' ');
 const errorClasses = 'tw-border-sq-danger-color';
 const borderColorClasses = ['tw-border-sq-disabled-gray', 'dark:tw-border-sq-dark-disabled-gray'].join(' ');
-const borderStyles = [
+const borderStyles$2 = [
     'tw-border-solid',
     'tw-border',
     'hover:tw-border-sq-color-dark',
@@ -13592,7 +13669,7 @@ const optionStyles = [
     'tw-px-2.5',
     'specSelectOption',
 ].join(' ');
-const disabledClasses = ['tw-bg-sq-field-disabled-gray', 'tw-cursor-not-allowed'].join(' ');
+const disabledClasses$2 = ['tw-bg-sq-field-disabled-gray', 'tw-cursor-not-allowed'].join(' ');
 const dropDownIndicatorStyles = `tw-text-sq-disabled-gray ${textActiveStyles} specOpenIt`;
 const placeholderStyles = ['tw-text-gray-400', 'dark:tw-text-sq-dark-text-lighter', 'specOpenSelect'].join(' ');
 const multiValueStyles = [
@@ -13669,8 +13746,8 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
                 else if (inputGroup === 'right') {
                     border = menuIsOpen ? 'tw-rounded-tr-sm' : 'tw-rounded-r-sm';
                 }
-                const appliedClasses = `${borderStyles} ${border}  ${showError ? errorClasses : borderColorClasses} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} `;
-                return `${appliedClasses} ${baseClasses} specSelectControl ${isDisabled ? disabledClasses : ''} ${small ? 'tw-pl-2 tw-pr-1' : 'tw-pl-2.5 tw-pr-1.5'}`;
+                const appliedClasses = `${borderStyles$2} ${border}  ${showError ? errorClasses : borderColorClasses} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} `;
+                return `${appliedClasses} ${baseClasses} specSelectControl ${isDisabled ? disabledClasses$2 : ''} ${small ? 'tw-pl-2 tw-pr-1' : 'tw-pl-2.5 tw-pr-1.5'}`;
             },
             placeholder: () => placeholderStyles,
             container: () => `${textStyles} ${containerStyles} ${extraClassNames}`,
@@ -14929,13 +15006,773 @@ const $1bf158f521e1b1b4$export$41fb9f06171c75f4 = $1bf158f521e1b1b4$export$94e93
 const $1bf158f521e1b1b4$export$7c6e2c02157bb7d2 = $1bf158f521e1b1b4$export$985b9a77379b54a0;
 
 const Accordion = ({ accordionItems, defaultValue, value, onItemSelect, disabled, extraClassNames, testId, }) => {
-    return (React.createElement($1bf158f521e1b1b4$export$be92b6f5f03c0fe9, { className: "tw-rounded-md tw-w-full focus-visible:tw-outline-none", type: "single", defaultValue: defaultValue, value: value, collapsible: true, "data-testid": testId, onValueChange: (_value) => onItemSelect(_value) }, accordionItems.map((item) => (React.createElement($1bf158f521e1b1b4$export$6d08773d2e66f8f2, { className: `tw-bg-transparent tw-p-0 tw-flex tw-flex-col tw-w-full ${extraClassNames || ''}`, key: item.value, disabled: disabled, value: item.value },
+    return (React.createElement($1bf158f521e1b1b4$export$be92b6f5f03c0fe9, { className: `tw-rounded-md tw-w-full focus-visible:tw-outline-none ${extraClassNames || ''}`, type: "single", defaultValue: defaultValue, value: value, collapsible: true, "data-testid": testId, onValueChange: (_value) => onItemSelect(_value) }, accordionItems.map((item) => (React.createElement($1bf158f521e1b1b4$export$6d08773d2e66f8f2, { className: `tw-bg-transparent tw-p-0 tw-flex tw-flex-col tw-w-full`, key: item.value, disabled: disabled, value: item.value },
         React.createElement($1bf158f521e1b1b4$export$41fb9f06171c75f4, { disabled: disabled, className: `tw-w-full tw-cursor-default focus-visible:tw-outline-none` }, item.trigger),
         React.createElement($1bf158f521e1b1b4$export$7c6e2c02157bb7d2, { className: `data-[state=open]:tw-animate-slideDown data-[state=closed]:tw-animate-slideUp tw-overflow-hidden focus-visible:tw-outline-none ${item.contentClassNames || ''}` }, item.content))))));
 };
 
+const bgStyles$1 = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
+const borderStyles$1 = [
+    'tw-border-solid',
+    'tw-border',
+    'tw-rounded-sm',
+    'tw-border-sq-light-gray',
+    'dark:tw-border-gray-700',
+].join(' ');
+const disabledClasses$1 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
+const ButtonWithPopover = ({ children, trigger, tooltipText, id, hasArrow, extraTriggerClassNames, extraPopoverClassNames, testId, tooltipTestId, tooltipDelay, tooltipPlacement, disabled = false, align = 'end', alignOffset = -5, placement = 'bottom', placementOffset = 2, onOpenChange, isOpen, isHtmlTooltip = false, isCloseOnContentClick = false, }) => {
+    let tooltipData = undefined;
+    if (tooltipText) {
+        tooltipData = {
+            'data-qtip-text': tooltipText,
+            'data-qtip-placement': tooltipPlacement,
+            'data-qtip-is-html': isHtmlTooltip,
+            'data-qtip-testid': tooltipTestId,
+            'data-qtip-delay': tooltipDelay ?? DEFAULT_TOOL_TIP_DELAY,
+        };
+    }
+    return (React__namespace.createElement($cb5cc270b50c6fcd$export$be92b6f5f03c0fe9, { open: isOpen, defaultOpen: false, onOpenChange: onOpenChange },
+        React__namespace.createElement($cb5cc270b50c6fcd$export$41fb9f06171c75f4, { id: id, className: `tw-border-none`, disabled: disabled, "data-testid": testId },
+            React__namespace.createElement("div", { ...tooltipData, className: `tw-bg-transparent tw-flex tw-flex-col tw-items-center tw-justify-center ${disabled ? disabledClasses$1 : ''} ${extraTriggerClassNames || ''}` }, trigger)),
+        React__namespace.createElement($cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, { sideOffset: placementOffset, align: align, side: placement, alignOffset: alignOffset, asChild: true, onClick: () => isCloseOnContentClick && onOpenChange && onOpenChange(false), className: "focus-visible:tw-outline-none tw-outline-none" },
+            React__namespace.createElement("div", { className: `${bgStyles$1} ${borderStyles$1} tw-relative tw-z-[1000] tw-min-w-6 tw-p-[0.5rem] focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out
+             data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade
+            ${extraPopoverClassNames || ''}` },
+                hasArrow && (React__namespace.createElement($cb5cc270b50c6fcd$export$21b07c8f274aebd5, { asChild: true },
+                    React__namespace.createElement("div", { className: " tw-fill-transparent tw-bg-white tw-w-[6px] tw-h-[6px] tw-rotate-45  dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-light-gray dark:tw-border-gray-700 tw-mt-[-2px]" }))),
+                children))));
+};
+
+const $6cc32821e9371a1c$var$SELECTION_KEYS = [
+    'Enter',
+    ' '
+];
+const $6cc32821e9371a1c$var$FIRST_KEYS = [
+    'ArrowDown',
+    'PageUp',
+    'Home'
+];
+const $6cc32821e9371a1c$var$LAST_KEYS = [
+    'ArrowUp',
+    'PageDown',
+    'End'
+];
+const $6cc32821e9371a1c$var$FIRST_LAST_KEYS = [
+    ...$6cc32821e9371a1c$var$FIRST_KEYS,
+    ...$6cc32821e9371a1c$var$LAST_KEYS
+];
+/* -------------------------------------------------------------------------------------------------
+ * Menu
+ * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$MENU_NAME = 'Menu';
+const [$6cc32821e9371a1c$var$Collection, $6cc32821e9371a1c$var$useCollection, $6cc32821e9371a1c$var$createCollectionScope] = $e02a7d9cb1dc128c$export$c74125a8e3af6bb2($6cc32821e9371a1c$var$MENU_NAME);
+const [$6cc32821e9371a1c$var$createMenuContext, $6cc32821e9371a1c$export$4027731b685e72eb] = $c512c27ab02ef895$export$50c7b4e9d9f19c1($6cc32821e9371a1c$var$MENU_NAME, [
+    $6cc32821e9371a1c$var$createCollectionScope,
+    $cf1ac5d9fe0e8206$export$722aac194ae923,
+    $d7bdfb9eb0fdf311$export$c7109489551a4f4
+]);
+const $6cc32821e9371a1c$var$usePopperScope = $cf1ac5d9fe0e8206$export$722aac194ae923();
+const $6cc32821e9371a1c$var$useRovingFocusGroupScope = $d7bdfb9eb0fdf311$export$c7109489551a4f4();
+const [$6cc32821e9371a1c$var$MenuProvider, $6cc32821e9371a1c$var$useMenuContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$MENU_NAME);
+const [$6cc32821e9371a1c$var$MenuRootProvider, $6cc32821e9371a1c$var$useMenuRootContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$MENU_NAME);
+const $6cc32821e9371a1c$export$d9b273488cd8ce6f = (props)=>{
+    const { __scopeMenu: __scopeMenu , open: open = false , children: children , dir: dir , onOpenChange: onOpenChange , modal: modal = true  } = props;
+    const popperScope = $6cc32821e9371a1c$var$usePopperScope(__scopeMenu);
+    const [content, setContent] = React.useState(null);
+    const isUsingKeyboardRef = React.useRef(false);
+    const handleOpenChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onOpenChange);
+    const direction = $f631663db3294ace$export$b39126d51d94e6f3(dir);
+    React.useEffect(()=>{
+        // Capture phase ensures we set the boolean before any side effects execute
+        // in response to the key or pointer event as they might depend on this value.
+        const handleKeyDown = ()=>{
+            isUsingKeyboardRef.current = true;
+            document.addEventListener('pointerdown', handlePointer, {
+                capture: true,
+                once: true
+            });
+            document.addEventListener('pointermove', handlePointer, {
+                capture: true,
+                once: true
+            });
+        };
+        const handlePointer = ()=>isUsingKeyboardRef.current = false
+        ;
+        document.addEventListener('keydown', handleKeyDown, {
+            capture: true
+        });
+        return ()=>{
+            document.removeEventListener('keydown', handleKeyDown, {
+                capture: true
+            });
+            document.removeEventListener('pointerdown', handlePointer, {
+                capture: true
+            });
+            document.removeEventListener('pointermove', handlePointer, {
+                capture: true
+            });
+        };
+    }, []);
+    return /*#__PURE__*/ React.createElement($cf1ac5d9fe0e8206$export$be92b6f5f03c0fe9, popperScope, /*#__PURE__*/ React.createElement($6cc32821e9371a1c$var$MenuProvider, {
+        scope: __scopeMenu,
+        open: open,
+        onOpenChange: handleOpenChange,
+        content: content,
+        onContentChange: setContent
+    }, /*#__PURE__*/ React.createElement($6cc32821e9371a1c$var$MenuRootProvider, {
+        scope: __scopeMenu,
+        onClose: React.useCallback(()=>handleOpenChange(false)
+        , [
+            handleOpenChange
+        ]),
+        isUsingKeyboardRef: isUsingKeyboardRef,
+        dir: direction,
+        modal: modal
+    }, children)));
+};
+const $6cc32821e9371a1c$export$9fa5ebd18bee4d43 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const { __scopeMenu: __scopeMenu , ...anchorProps } = props;
+    const popperScope = $6cc32821e9371a1c$var$usePopperScope(__scopeMenu);
+    return /*#__PURE__*/ React.createElement($cf1ac5d9fe0e8206$export$b688253958b8dfe7, _extends({}, popperScope, anchorProps, {
+        ref: forwardedRef
+    }));
+});
+/* -------------------------------------------------------------------------------------------------
+ * MenuPortal
+ * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$PORTAL_NAME = 'MenuPortal';
+const [$6cc32821e9371a1c$var$PortalProvider, $6cc32821e9371a1c$var$usePortalContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$PORTAL_NAME, {
+    forceMount: undefined
+});
+/* -------------------------------------------------------------------------------------------------
+ * MenuContent
+ * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$CONTENT_NAME = 'MenuContent';
+const [$6cc32821e9371a1c$var$MenuContentProvider, $6cc32821e9371a1c$var$useMenuContentContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$CONTENT_NAME);
+const $6cc32821e9371a1c$export$479f0f2f71193efe = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const portalContext = $6cc32821e9371a1c$var$usePortalContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
+    const { forceMount: forceMount = portalContext.forceMount , ...contentProps } = props;
+    const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
+    const rootContext = $6cc32821e9371a1c$var$useMenuRootContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
+    return /*#__PURE__*/ React.createElement($6cc32821e9371a1c$var$Collection.Provider, {
+        scope: props.__scopeMenu
+    }, /*#__PURE__*/ React.createElement($921a889cee6df7e8$export$99c2b779aa4e8b8b, {
+        present: forceMount || context.open
+    }, /*#__PURE__*/ React.createElement($6cc32821e9371a1c$var$Collection.Slot, {
+        scope: props.__scopeMenu
+    }, rootContext.modal ? /*#__PURE__*/ React.createElement($6cc32821e9371a1c$var$MenuRootContentModal, _extends({}, contentProps, {
+        ref: forwardedRef
+    })) : /*#__PURE__*/ React.createElement($6cc32821e9371a1c$var$MenuRootContentNonModal, _extends({}, contentProps, {
+        ref: forwardedRef
+    })))));
+});
+/* ---------------------------------------------------------------------------------------------- */ const $6cc32821e9371a1c$var$MenuRootContentModal = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
+    const ref = React.useRef(null);
+    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref); // Hide everything from ARIA except the `MenuContent`
+    React.useEffect(()=>{
+        const content = ref.current;
+        if (content) return hideOthers(content);
+    }, []);
+    return /*#__PURE__*/ React.createElement($6cc32821e9371a1c$var$MenuContentImpl, _extends({}, props, {
+        ref: composedRefs // we make sure we're not trapping once it's been closed
+        ,
+        trapFocus: context.open // make sure to only disable pointer events when open
+        ,
+        disableOutsidePointerEvents: context.open,
+        disableOutsideScroll: true // When focus is trapped, a `focusout` event may still happen.
+        ,
+        onFocusOutside: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onFocusOutside, (event)=>event.preventDefault()
+        , {
+            checkForDefaultPrevented: false
+        }),
+        onDismiss: ()=>context.onOpenChange(false)
+    }));
+});
+const $6cc32821e9371a1c$var$MenuRootContentNonModal = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
+    return /*#__PURE__*/ React.createElement($6cc32821e9371a1c$var$MenuContentImpl, _extends({}, props, {
+        ref: forwardedRef,
+        trapFocus: false,
+        disableOutsidePointerEvents: false,
+        disableOutsideScroll: false,
+        onDismiss: ()=>context.onOpenChange(false)
+    }));
+});
+/* ---------------------------------------------------------------------------------------------- */ const $6cc32821e9371a1c$var$MenuContentImpl = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const { __scopeMenu: __scopeMenu , loop: loop = false , trapFocus: trapFocus , onOpenAutoFocus: onOpenAutoFocus , onCloseAutoFocus: onCloseAutoFocus , disableOutsidePointerEvents: disableOutsidePointerEvents , onEntryFocus: onEntryFocus , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , onFocusOutside: onFocusOutside , onInteractOutside: onInteractOutside , onDismiss: onDismiss , disableOutsideScroll: disableOutsideScroll , ...contentProps } = props;
+    const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$CONTENT_NAME, __scopeMenu);
+    const rootContext = $6cc32821e9371a1c$var$useMenuRootContext($6cc32821e9371a1c$var$CONTENT_NAME, __scopeMenu);
+    const popperScope = $6cc32821e9371a1c$var$usePopperScope(__scopeMenu);
+    const rovingFocusGroupScope = $6cc32821e9371a1c$var$useRovingFocusGroupScope(__scopeMenu);
+    const getItems = $6cc32821e9371a1c$var$useCollection(__scopeMenu);
+    const [currentItemId, setCurrentItemId] = React.useState(null);
+    const contentRef = React.useRef(null);
+    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, contentRef, context.onContentChange);
+    const timerRef = React.useRef(0);
+    const searchRef = React.useRef('');
+    const pointerGraceTimerRef = React.useRef(0);
+    const pointerGraceIntentRef = React.useRef(null);
+    const pointerDirRef = React.useRef('right');
+    const lastPointerXRef = React.useRef(0);
+    const ScrollLockWrapper = disableOutsideScroll ? $epM9y$RemoveScroll : React.Fragment;
+    const scrollLockWrapperProps = disableOutsideScroll ? {
+        as: $5e63c961fc1ce211$export$8c6ed5c666ac1360,
+        allowPinchZoom: true
+    } : undefined;
+    const handleTypeaheadSearch = (key)=>{
+        var _items$find, _items$find2;
+        const search = searchRef.current + key;
+        const items = getItems().filter((item)=>!item.disabled
+        );
+        const currentItem = document.activeElement;
+        const currentMatch = (_items$find = items.find((item)=>item.ref.current === currentItem
+        )) === null || _items$find === void 0 ? void 0 : _items$find.textValue;
+        const values = items.map((item)=>item.textValue
+        );
+        const nextMatch = $6cc32821e9371a1c$var$getNextMatch(values, search, currentMatch);
+        const newItem = (_items$find2 = items.find((item)=>item.textValue === nextMatch
+        )) === null || _items$find2 === void 0 ? void 0 : _items$find2.ref.current; // Reset `searchRef` 1 second after it was last updated
+        (function updateSearch(value) {
+            searchRef.current = value;
+            window.clearTimeout(timerRef.current);
+            if (value !== '') timerRef.current = window.setTimeout(()=>updateSearch('')
+            , 1000);
+        })(search);
+        if (newItem) /**
+       * Imperative focus during keydown is risky so we prevent React's batching updates
+       * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332
+       */ setTimeout(()=>newItem.focus()
+        );
+    };
+    React.useEffect(()=>{
+        return ()=>window.clearTimeout(timerRef.current)
+        ;
+    }, []); // Make sure the whole tree has focus guards as our `MenuContent` may be
+    // the last element in the DOM (beacuse of the `Portal`)
+    $3db38b7d1fb3fe6a$export$b7ece24a22aeda8c();
+    const isPointerMovingToSubmenu = React.useCallback((event)=>{
+        var _pointerGraceIntentRe, _pointerGraceIntentRe2;
+        const isMovingTowards = pointerDirRef.current === ((_pointerGraceIntentRe = pointerGraceIntentRef.current) === null || _pointerGraceIntentRe === void 0 ? void 0 : _pointerGraceIntentRe.side);
+        return isMovingTowards && $6cc32821e9371a1c$var$isPointerInGraceArea(event, (_pointerGraceIntentRe2 = pointerGraceIntentRef.current) === null || _pointerGraceIntentRe2 === void 0 ? void 0 : _pointerGraceIntentRe2.area);
+    }, []);
+    return /*#__PURE__*/ React.createElement($6cc32821e9371a1c$var$MenuContentProvider, {
+        scope: __scopeMenu,
+        searchRef: searchRef,
+        onItemEnter: React.useCallback((event)=>{
+            if (isPointerMovingToSubmenu(event)) event.preventDefault();
+        }, [
+            isPointerMovingToSubmenu
+        ]),
+        onItemLeave: React.useCallback((event)=>{
+            var _contentRef$current;
+            if (isPointerMovingToSubmenu(event)) return;
+            (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 || _contentRef$current.focus();
+            setCurrentItemId(null);
+        }, [
+            isPointerMovingToSubmenu
+        ]),
+        onTriggerLeave: React.useCallback((event)=>{
+            if (isPointerMovingToSubmenu(event)) event.preventDefault();
+        }, [
+            isPointerMovingToSubmenu
+        ]),
+        pointerGraceTimerRef: pointerGraceTimerRef,
+        onPointerGraceIntentChange: React.useCallback((intent)=>{
+            pointerGraceIntentRef.current = intent;
+        }, [])
+    }, /*#__PURE__*/ React.createElement(ScrollLockWrapper, scrollLockWrapperProps, /*#__PURE__*/ React.createElement($d3863c46a17e8a28$export$20e40289641fbbb6, {
+        asChild: true,
+        trapped: trapFocus,
+        onMountAutoFocus: $e42e1063c40fb3ef$export$b9ecd428b558ff10(onOpenAutoFocus, (event)=>{
+            var _contentRef$current2;
+            // when opening, explicitly focus the content area only and leave
+            // `onEntryFocus` in  control of focusing first item
+            event.preventDefault();
+            (_contentRef$current2 = contentRef.current) === null || _contentRef$current2 === void 0 || _contentRef$current2.focus();
+        }),
+        onUnmountAutoFocus: onCloseAutoFocus
+    }, /*#__PURE__*/ React.createElement($5cb92bef7577960e$export$177fb62ff3ec1f22, {
+        asChild: true,
+        disableOutsidePointerEvents: disableOutsidePointerEvents,
+        onEscapeKeyDown: onEscapeKeyDown,
+        onPointerDownOutside: onPointerDownOutside,
+        onFocusOutside: onFocusOutside,
+        onInteractOutside: onInteractOutside,
+        onDismiss: onDismiss
+    }, /*#__PURE__*/ React.createElement($d7bdfb9eb0fdf311$export$be92b6f5f03c0fe9, _extends({
+        asChild: true
+    }, rovingFocusGroupScope, {
+        dir: rootContext.dir,
+        orientation: "vertical",
+        loop: loop,
+        currentTabStopId: currentItemId,
+        onCurrentTabStopIdChange: setCurrentItemId,
+        onEntryFocus: $e42e1063c40fb3ef$export$b9ecd428b558ff10(onEntryFocus, (event)=>{
+            // only focus first item when using keyboard
+            if (!rootContext.isUsingKeyboardRef.current) event.preventDefault();
+        })
+    }), /*#__PURE__*/ React.createElement($cf1ac5d9fe0e8206$export$7c6e2c02157bb7d2, _extends({
+        role: "menu",
+        "aria-orientation": "vertical",
+        "data-state": $6cc32821e9371a1c$var$getOpenState(context.open),
+        "data-radix-menu-content": "",
+        dir: rootContext.dir
+    }, popperScope, contentProps, {
+        ref: composedRefs,
+        style: {
+            outline: 'none',
+            ...contentProps.style
+        },
+        onKeyDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(contentProps.onKeyDown, (event)=>{
+            // submenu key events bubble through portals. We only care about keys in this menu.
+            const target = event.target;
+            const isKeyDownInside = target.closest('[data-radix-menu-content]') === event.currentTarget;
+            const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
+            const isCharacterKey = event.key.length === 1;
+            if (isKeyDownInside) {
+                // menus should not be navigated using tab key so we prevent it
+                if (event.key === 'Tab') event.preventDefault();
+                if (!isModifierKey && isCharacterKey) handleTypeaheadSearch(event.key);
+            } // focus first/last item based on key pressed
+            const content = contentRef.current;
+            if (event.target !== content) return;
+            if (!$6cc32821e9371a1c$var$FIRST_LAST_KEYS.includes(event.key)) return;
+            event.preventDefault();
+            const items = getItems().filter((item)=>!item.disabled
+            );
+            const candidateNodes = items.map((item)=>item.ref.current
+            );
+            if ($6cc32821e9371a1c$var$LAST_KEYS.includes(event.key)) candidateNodes.reverse();
+            $6cc32821e9371a1c$var$focusFirst(candidateNodes);
+        }),
+        onBlur: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onBlur, (event)=>{
+            // clear search buffer when leaving the menu
+            if (!event.currentTarget.contains(event.target)) {
+                window.clearTimeout(timerRef.current);
+                searchRef.current = '';
+            }
+        }),
+        onPointerMove: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerMove, $6cc32821e9371a1c$var$whenMouse((event)=>{
+            const target = event.target;
+            const pointerXHasChanged = lastPointerXRef.current !== event.clientX; // We don't use `event.movementX` for this check because Safari will
+            // always return `0` on a pointer event.
+            if (event.currentTarget.contains(target) && pointerXHasChanged) {
+                const newDir = event.clientX > lastPointerXRef.current ? 'right' : 'left';
+                pointerDirRef.current = newDir;
+                lastPointerXRef.current = event.clientX;
+            }
+        }))
+    })))))));
+});
+/* -------------------------------------------------------------------------------------------------
+ * MenuItem
+ * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$ITEM_NAME = 'MenuItem';
+const $6cc32821e9371a1c$var$ITEM_SELECT = 'menu.itemSelect';
+const $6cc32821e9371a1c$export$2ce376c2cc3355c8 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const { disabled: disabled = false , onSelect: onSelect , ...itemProps } = props;
+    const ref = React.useRef(null);
+    const rootContext = $6cc32821e9371a1c$var$useMenuRootContext($6cc32821e9371a1c$var$ITEM_NAME, props.__scopeMenu);
+    const contentContext = $6cc32821e9371a1c$var$useMenuContentContext($6cc32821e9371a1c$var$ITEM_NAME, props.__scopeMenu);
+    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref);
+    const isPointerDownRef = React.useRef(false);
+    const handleSelect = ()=>{
+        const menuItem = ref.current;
+        if (!disabled && menuItem) {
+            const itemSelectEvent = new CustomEvent($6cc32821e9371a1c$var$ITEM_SELECT, {
+                bubbles: true,
+                cancelable: true
+            });
+            menuItem.addEventListener($6cc32821e9371a1c$var$ITEM_SELECT, (event)=>onSelect === null || onSelect === void 0 ? void 0 : onSelect(event)
+            , {
+                once: true
+            });
+            $8927f6f2acc4f386$export$6d1a0317bde7de7f(menuItem, itemSelectEvent);
+            if (itemSelectEvent.defaultPrevented) isPointerDownRef.current = false;
+            else rootContext.onClose();
+        }
+    };
+    return /*#__PURE__*/ React.createElement($6cc32821e9371a1c$var$MenuItemImpl, _extends({}, itemProps, {
+        ref: composedRefs,
+        disabled: disabled,
+        onClick: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onClick, handleSelect),
+        onPointerDown: (event)=>{
+            var _props$onPointerDown;
+            (_props$onPointerDown = props.onPointerDown) === null || _props$onPointerDown === void 0 || _props$onPointerDown.call(props, event);
+            isPointerDownRef.current = true;
+        },
+        onPointerUp: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerUp, (event)=>{
+            var _event$currentTarget;
+            // Pointer down can move to a different menu item which should activate it on pointer up.
+            // We dispatch a click for selection to allow composition with click based triggers and to
+            // prevent Firefox from getting stuck in text selection mode when the menu closes.
+            if (!isPointerDownRef.current) (_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 || _event$currentTarget.click();
+        }),
+        onKeyDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onKeyDown, (event)=>{
+            const isTypingAhead = contentContext.searchRef.current !== '';
+            if (disabled || isTypingAhead && event.key === ' ') return;
+            if ($6cc32821e9371a1c$var$SELECTION_KEYS.includes(event.key)) {
+                event.currentTarget.click();
+                /**
+         * We prevent default browser behaviour for selection keys as they should trigger
+         * a selection only:
+         * - prevents space from scrolling the page.
+         * - if keydown causes focus to move, prevents keydown from firing on the new target.
+         */ event.preventDefault();
+            }
+        })
+    }));
+});
+/* ---------------------------------------------------------------------------------------------- */ const $6cc32821e9371a1c$var$MenuItemImpl = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const { __scopeMenu: __scopeMenu , disabled: disabled = false , textValue: textValue , ...itemProps } = props;
+    const contentContext = $6cc32821e9371a1c$var$useMenuContentContext($6cc32821e9371a1c$var$ITEM_NAME, __scopeMenu);
+    const rovingFocusGroupScope = $6cc32821e9371a1c$var$useRovingFocusGroupScope(__scopeMenu);
+    const ref = React.useRef(null);
+    const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref);
+    const [isFocused, setIsFocused] = React.useState(false); // get the item's `.textContent` as default strategy for typeahead `textValue`
+    const [textContent, setTextContent] = React.useState('');
+    React.useEffect(()=>{
+        const menuItem = ref.current;
+        if (menuItem) {
+            var _menuItem$textContent;
+            setTextContent(((_menuItem$textContent = menuItem.textContent) !== null && _menuItem$textContent !== void 0 ? _menuItem$textContent : '').trim());
+        }
+    }, [
+        itemProps.children
+    ]);
+    return /*#__PURE__*/ React.createElement($6cc32821e9371a1c$var$Collection.ItemSlot, {
+        scope: __scopeMenu,
+        disabled: disabled,
+        textValue: textValue !== null && textValue !== void 0 ? textValue : textContent
+    }, /*#__PURE__*/ React.createElement($d7bdfb9eb0fdf311$export$6d08773d2e66f8f2, _extends({
+        asChild: true
+    }, rovingFocusGroupScope, {
+        focusable: !disabled
+    }), /*#__PURE__*/ React.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({
+        role: "menuitem",
+        "data-highlighted": isFocused ? '' : undefined,
+        "aria-disabled": disabled || undefined,
+        "data-disabled": disabled ? '' : undefined
+    }, itemProps, {
+        ref: composedRefs,
+        onPointerMove: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerMove, $6cc32821e9371a1c$var$whenMouse((event)=>{
+            if (disabled) contentContext.onItemLeave(event);
+            else {
+                contentContext.onItemEnter(event);
+                if (!event.defaultPrevented) {
+                    const item = event.currentTarget;
+                    item.focus();
+                }
+            }
+        })),
+        onPointerLeave: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerLeave, $6cc32821e9371a1c$var$whenMouse((event)=>contentContext.onItemLeave(event)
+        )),
+        onFocus: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onFocus, ()=>setIsFocused(true)
+        ),
+        onBlur: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onBlur, ()=>setIsFocused(false)
+        )
+    }))));
+});
+/* -------------------------------------------------------------------------------------------------
+ * MenuRadioGroup
+ * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$RADIO_GROUP_NAME = 'MenuRadioGroup';
+$6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$RADIO_GROUP_NAME, {
+    value: undefined,
+    onValueChange: ()=>{}
+});
+/* -------------------------------------------------------------------------------------------------
+ * MenuItemIndicator
+ * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$ITEM_INDICATOR_NAME = 'MenuItemIndicator';
+$6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$ITEM_INDICATOR_NAME, {
+    checked: false
+});
+const $6cc32821e9371a1c$export$1cec7dcdd713e220 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const { __scopeMenu: __scopeMenu , ...separatorProps } = props;
+    return /*#__PURE__*/ React.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({
+        role: "separator",
+        "aria-orientation": "horizontal"
+    }, separatorProps, {
+        ref: forwardedRef
+    }));
+});
+const $6cc32821e9371a1c$export$bcdda4773debf5fa = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const { __scopeMenu: __scopeMenu , ...arrowProps } = props;
+    const popperScope = $6cc32821e9371a1c$var$usePopperScope(__scopeMenu);
+    return /*#__PURE__*/ React.createElement($cf1ac5d9fe0e8206$export$21b07c8f274aebd5, _extends({}, popperScope, arrowProps, {
+        ref: forwardedRef
+    }));
+});
+/* -------------------------------------------------------------------------------------------------
+ * MenuSub
+ * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$SUB_NAME = 'MenuSub';
+$6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$SUB_NAME);
+/* -----------------------------------------------------------------------------------------------*/ function $6cc32821e9371a1c$var$getOpenState(open) {
+    return open ? 'open' : 'closed';
+}
+function $6cc32821e9371a1c$var$focusFirst(candidates) {
+    const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
+    for (const candidate of candidates){
+        // if focus is already where we want to go, we don't want to keep going through the candidates
+        if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
+        candidate.focus();
+        if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
+    }
+}
+/**
+ * Wraps an array around itself at a given start index
+ * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`
+ */ function $6cc32821e9371a1c$var$wrapArray(array, startIndex) {
+    return array.map((_, index)=>array[(startIndex + index) % array.length]
+    );
+}
+/**
+ * This is the "meat" of the typeahead matching logic. It takes in all the values,
+ * the search and the current match, and returns the next match (or `undefined`).
+ *
+ * We normalize the search because if a user has repeatedly pressed a character,
+ * we want the exact same behavior as if we only had that one character
+ * (ie. cycle through options starting with that character)
+ *
+ * We also reorder the values by wrapping the array around the current match.
+ * This is so we always look forward from the current match, and picking the first
+ * match will always be the correct one.
+ *
+ * Finally, if the normalized search is exactly one character, we exclude the
+ * current match from the values because otherwise it would be the first to match always
+ * and focus would never move. This is as opposed to the regular case, where we
+ * don't want focus to move if the current match still matches.
+ */ function $6cc32821e9371a1c$var$getNextMatch(values, search, currentMatch) {
+    const isRepeated = search.length > 1 && Array.from(search).every((char)=>char === search[0]
+    );
+    const normalizedSearch = isRepeated ? search[0] : search;
+    const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
+    let wrappedValues = $6cc32821e9371a1c$var$wrapArray(values, Math.max(currentMatchIndex, 0));
+    const excludeCurrentMatch = normalizedSearch.length === 1;
+    if (excludeCurrentMatch) wrappedValues = wrappedValues.filter((v)=>v !== currentMatch
+    );
+    const nextMatch = wrappedValues.find((value)=>value.toLowerCase().startsWith(normalizedSearch.toLowerCase())
+    );
+    return nextMatch !== currentMatch ? nextMatch : undefined;
+}
+// Determine if a point is inside of a polygon.
+// Based on https://github.com/substack/point-in-polygon
+function $6cc32821e9371a1c$var$isPointInPolygon(point, polygon) {
+    const { x: x , y: y  } = point;
+    let inside = false;
+    for(let i = 0, j = polygon.length - 1; i < polygon.length; j = i++){
+        const xi = polygon[i].x;
+        const yi = polygon[i].y;
+        const xj = polygon[j].x;
+        const yj = polygon[j].y; // prettier-ignore
+        const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
+        if (intersect) inside = !inside;
+    }
+    return inside;
+}
+function $6cc32821e9371a1c$var$isPointerInGraceArea(event, area) {
+    if (!area) return false;
+    const cursorPos = {
+        x: event.clientX,
+        y: event.clientY
+    };
+    return $6cc32821e9371a1c$var$isPointInPolygon(cursorPos, area);
+}
+function $6cc32821e9371a1c$var$whenMouse(handler) {
+    return (event)=>event.pointerType === 'mouse' ? handler(event) : undefined
+    ;
+}
+const $6cc32821e9371a1c$export$be92b6f5f03c0fe9 = $6cc32821e9371a1c$export$d9b273488cd8ce6f;
+const $6cc32821e9371a1c$export$b688253958b8dfe7 = $6cc32821e9371a1c$export$9fa5ebd18bee4d43;
+const $6cc32821e9371a1c$export$7c6e2c02157bb7d2 = $6cc32821e9371a1c$export$479f0f2f71193efe;
+const $6cc32821e9371a1c$export$6d08773d2e66f8f2 = $6cc32821e9371a1c$export$2ce376c2cc3355c8;
+const $6cc32821e9371a1c$export$1ff3c3f08ae963c0 = $6cc32821e9371a1c$export$1cec7dcdd713e220;
+const $6cc32821e9371a1c$export$21b07c8f274aebd5 = $6cc32821e9371a1c$export$bcdda4773debf5fa;
+
+/* -------------------------------------------------------------------------------------------------
+ * DropdownMenu
+ * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$DROPDOWN_MENU_NAME = 'DropdownMenu';
+const [$d08ef79370b62062$var$createDropdownMenuContext, $d08ef79370b62062$export$c0623cd925aeb687] = $c512c27ab02ef895$export$50c7b4e9d9f19c1($d08ef79370b62062$var$DROPDOWN_MENU_NAME, [
+    $6cc32821e9371a1c$export$4027731b685e72eb
+]);
+const $d08ef79370b62062$var$useMenuScope = $6cc32821e9371a1c$export$4027731b685e72eb();
+const [$d08ef79370b62062$var$DropdownMenuProvider, $d08ef79370b62062$var$useDropdownMenuContext] = $d08ef79370b62062$var$createDropdownMenuContext($d08ef79370b62062$var$DROPDOWN_MENU_NAME);
+const $d08ef79370b62062$export$e44a253a59704894 = (props)=>{
+    const { __scopeDropdownMenu: __scopeDropdownMenu , children: children , dir: dir , open: openProp , defaultOpen: defaultOpen , onOpenChange: onOpenChange , modal: modal = true  } = props;
+    const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
+    const triggerRef = React.useRef(null);
+    const [open = false, setOpen] = $71cd76cc60e0454e$export$6f32135080cb4c3({
+        prop: openProp,
+        defaultProp: defaultOpen,
+        onChange: onOpenChange
+    });
+    return /*#__PURE__*/ React.createElement($d08ef79370b62062$var$DropdownMenuProvider, {
+        scope: __scopeDropdownMenu,
+        triggerId: $1746a345f3d73bb7$export$f680877a34711e37(),
+        triggerRef: triggerRef,
+        contentId: $1746a345f3d73bb7$export$f680877a34711e37(),
+        open: open,
+        onOpenChange: setOpen,
+        onOpenToggle: React.useCallback(()=>setOpen((prevOpen)=>!prevOpen
+            )
+        , [
+            setOpen
+        ]),
+        modal: modal
+    }, /*#__PURE__*/ React.createElement($6cc32821e9371a1c$export$be92b6f5f03c0fe9, _extends({}, menuScope, {
+        open: open,
+        onOpenChange: setOpen,
+        dir: dir,
+        modal: modal
+    }), children));
+};
+/* -------------------------------------------------------------------------------------------------
+ * DropdownMenuTrigger
+ * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$TRIGGER_NAME = 'DropdownMenuTrigger';
+const $d08ef79370b62062$export$d2469213b3befba9 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const { __scopeDropdownMenu: __scopeDropdownMenu , disabled: disabled = false , ...triggerProps } = props;
+    const context = $d08ef79370b62062$var$useDropdownMenuContext($d08ef79370b62062$var$TRIGGER_NAME, __scopeDropdownMenu);
+    const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
+    return /*#__PURE__*/ React.createElement($6cc32821e9371a1c$export$b688253958b8dfe7, _extends({
+        asChild: true
+    }, menuScope), /*#__PURE__*/ React.createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.button, _extends({
+        type: "button",
+        id: context.triggerId,
+        "aria-haspopup": "menu",
+        "aria-expanded": context.open,
+        "aria-controls": context.open ? context.contentId : undefined,
+        "data-state": context.open ? 'open' : 'closed',
+        "data-disabled": disabled ? '' : undefined,
+        disabled: disabled
+    }, triggerProps, {
+        ref: $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, context.triggerRef),
+        onPointerDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerDown, (event)=>{
+            // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
+            // but not when the control key is pressed (avoiding MacOS right click)
+            if (!disabled && event.button === 0 && event.ctrlKey === false) {
+                context.onOpenToggle(); // prevent trigger focusing when opening
+                // this allows the content to be given focus without competition
+                if (!context.open) event.preventDefault();
+            }
+        }),
+        onKeyDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onKeyDown, (event)=>{
+            if (disabled) return;
+            if ([
+                'Enter',
+                ' '
+            ].includes(event.key)) context.onOpenToggle();
+            if (event.key === 'ArrowDown') context.onOpenChange(true); // prevent keydown from scrolling window / first focused item to execute
+            // that keydown (inadvertently closing the menu)
+            if ([
+                'Enter',
+                ' ',
+                'ArrowDown'
+            ].includes(event.key)) event.preventDefault();
+        })
+    })));
+});
+/* -------------------------------------------------------------------------------------------------
+ * DropdownMenuContent
+ * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$CONTENT_NAME = 'DropdownMenuContent';
+const $d08ef79370b62062$export$6e76d93a37c01248 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const { __scopeDropdownMenu: __scopeDropdownMenu , ...contentProps } = props;
+    const context = $d08ef79370b62062$var$useDropdownMenuContext($d08ef79370b62062$var$CONTENT_NAME, __scopeDropdownMenu);
+    const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
+    const hasInteractedOutsideRef = React.useRef(false);
+    return /*#__PURE__*/ React.createElement($6cc32821e9371a1c$export$7c6e2c02157bb7d2, _extends({
+        id: context.contentId,
+        "aria-labelledby": context.triggerId
+    }, menuScope, contentProps, {
+        ref: forwardedRef,
+        onCloseAutoFocus: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onCloseAutoFocus, (event)=>{
+            var _context$triggerRef$c;
+            if (!hasInteractedOutsideRef.current) (_context$triggerRef$c = context.triggerRef.current) === null || _context$triggerRef$c === void 0 || _context$triggerRef$c.focus();
+            hasInteractedOutsideRef.current = false; // Always prevent auto focus because we either focus manually or want user agent focus
+            event.preventDefault();
+        }),
+        onInteractOutside: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onInteractOutside, (event)=>{
+            const originalEvent = event.detail.originalEvent;
+            const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+            const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+            if (!context.modal || isRightClick) hasInteractedOutsideRef.current = true;
+        }),
+        style: {
+            ...props.style,
+            '--radix-dropdown-menu-content-transform-origin': 'var(--radix-popper-transform-origin)',
+            '--radix-dropdown-menu-content-available-width': 'var(--radix-popper-available-width)',
+            '--radix-dropdown-menu-content-available-height': 'var(--radix-popper-available-height)',
+            '--radix-dropdown-menu-trigger-width': 'var(--radix-popper-anchor-width)',
+            '--radix-dropdown-menu-trigger-height': 'var(--radix-popper-anchor-height)'
+        }
+    }));
+});
+const $d08ef79370b62062$export$ed97964d1871885d = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const { __scopeDropdownMenu: __scopeDropdownMenu , ...itemProps } = props;
+    const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
+    return /*#__PURE__*/ React.createElement($6cc32821e9371a1c$export$6d08773d2e66f8f2, _extends({}, menuScope, itemProps, {
+        ref: forwardedRef
+    }));
+});
+const $d08ef79370b62062$export$da160178fd3bc7e9 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const { __scopeDropdownMenu: __scopeDropdownMenu , ...separatorProps } = props;
+    const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
+    return /*#__PURE__*/ React.createElement($6cc32821e9371a1c$export$1ff3c3f08ae963c0, _extends({}, menuScope, separatorProps, {
+        ref: forwardedRef
+    }));
+});
+const $d08ef79370b62062$export$34b8980744021ec5 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const { __scopeDropdownMenu: __scopeDropdownMenu , ...arrowProps } = props;
+    const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
+    return /*#__PURE__*/ React.createElement($6cc32821e9371a1c$export$21b07c8f274aebd5, _extends({}, menuScope, arrowProps, {
+        ref: forwardedRef
+    }));
+});
+/* -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$export$be92b6f5f03c0fe9 = $d08ef79370b62062$export$e44a253a59704894;
+const $d08ef79370b62062$export$41fb9f06171c75f4 = $d08ef79370b62062$export$d2469213b3befba9;
+const $d08ef79370b62062$export$7c6e2c02157bb7d2 = $d08ef79370b62062$export$6e76d93a37c01248;
+const $d08ef79370b62062$export$6d08773d2e66f8f2 = $d08ef79370b62062$export$ed97964d1871885d;
+const $d08ef79370b62062$export$1ff3c3f08ae963c0 = $d08ef79370b62062$export$da160178fd3bc7e9;
+const $d08ef79370b62062$export$21b07c8f274aebd5 = $d08ef79370b62062$export$34b8980744021ec5;
+
+const borderStyles = [
+    'tw-border-solid',
+    'tw-border',
+    'tw-rounded-sm',
+    'tw-border-sq-light-gray',
+    'dark:tw-border-gray-700',
+].join(' ');
+const bgStyles = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
+const disabledClasses = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
+const ButtonWithDropdown = ({ dropdownItems, triggerIcon, tooltipText, id, extraClassNames, testId, tooltipTestId, tooltipDelay, tooltipPlacement, disabled = false, align = 'end', placement = 'bottom', placementOffset = 2, alignOffset = -5, hasArrow = false, onOpenChange, isHtmlTooltip = false, isOpen, }) => {
+    let tooltipData = undefined;
+    if (tooltipText) {
+        tooltipData = {
+            'data-qtip-text': tooltipText,
+            'data-qtip-placement': tooltipPlacement,
+            'data-qtip-is-html': isHtmlTooltip,
+            'data-qtip-testid': tooltipTestId,
+            'data-qtip-delay': tooltipDelay ?? DEFAULT_TOOL_TIP_DELAY,
+        };
+    }
+    return (React__namespace.createElement($d08ef79370b62062$export$be92b6f5f03c0fe9, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange },
+        React__namespace.createElement($d08ef79370b62062$export$41fb9f06171c75f4, { id: id, className: `tw-border-none focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none`, disabled: disabled, "data-testid": testId },
+            React__namespace.createElement("div", { ...tooltipData, className: `tw-bg-transparent tw-flex tw-flex-col tw-items-center focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none ${disabled ? disabledClasses : ''} ${extraClassNames || ''}` }, triggerIcon)),
+        React__namespace.createElement($d08ef79370b62062$export$7c6e2c02157bb7d2, { sideOffset: placementOffset, side: placement, align: align, alignOffset: alignOffset, asChild: true, className: "focus-visible:tw-outline-none tw-outline-none" },
+            React__namespace.createElement("div", { className: bgStyles +
+                    ' tw-relative tw-z-[1000] tw-min-w-6 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out' +
+                    ' forceFont data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade ' +
+                    borderStyles },
+                hasArrow && (React__namespace.createElement($d08ef79370b62062$export$21b07c8f274aebd5, { asChild: true },
+                    React__namespace.createElement("div", { className: " tw-fill-transparent tw-bg-white tw-w-[6px] tw-h-[6px] tw-rotate-45  dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-light-gray dark:tw-border-gray-700 tw-mt-[-2px]" }))),
+                dropdownItems.map((item, index) => (React__namespace.createElement("div", { key: item.label + index },
+                    React__namespace.createElement($d08ef79370b62062$export$6d08773d2e66f8f2, { key: item.label + index, onSelect: (e) => {
+                            item.onClick(e);
+                        }, className: `tw-cursor-pointer tw-flex dark:tw-text-sq-white hover:tw-bg-sq-colored-hover hover:dark:tw-bg-sq-colored-hover-dark tw-leading-none tw-items-center tw-h-[27px] tw-px-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-text-sq-disabled-gray data-[disabled]:tw-pointer-events-none ${item.containerExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled },
+                        item.icon && (React__namespace.createElement(Icon, { icon: item.icon, testId: item.iconTestId, type: "text", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" })),
+                        React__namespace.createElement("div", { "data-testid": item.labelTestId, className: "tw-text-[13px] tw-ml-1" }, item.label)),
+                    item.hasDivider && (React__namespace.createElement($d08ef79370b62062$export$1ff3c3f08ae963c0, { "data-testid": `dropdown-divider-${index}`, className: "tw-h-[1px] tw-bg-sq-light-gray dark:tw-bg-gray-700 tw-my-[8px]" })))))))));
+};
+
 exports.Accordion = Accordion;
 exports.Button = Button;
+exports.ButtonWithDropdown = ButtonWithDropdown;
+exports.ButtonWithPopover = ButtonWithPopover;
 exports.Checkbox = Checkbox;
 exports.Icon = Icon;
 exports.Modal = Modal;