@vygruppen/spor-react 12.24.14 → 12.24.16

package/dist/index.cjs

@@ -66,9 +66,9 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
 var warnAboutMismatchingIcon = ({
   icon
 }) => {
-  var _a5, _b4;
+  var _a6, _b5;
   if (process.env.NODE_ENV !== "production") {
-    const displayName = (_b4 = (_a5 = icon == null ? void 0 : icon.type) == null ? void 0 : _a5.render) == null ? void 0 : _b4.displayName;
+    const displayName = (_b5 = (_a6 = icon == null ? void 0 : icon.type) == null ? void 0 : _a6.render) == null ? void 0 : _b5.displayName;
     if (!displayName) {
       return;
     }
@@ -1524,21 +1524,26 @@ function CalendarProvider(props) {
     ref
   );
   const getRangeStartValue = () => {
-    var _a5, _b4;
-    if ((_a5 = rangeState.highlightedRange) == null ? void 0 : _a5.start) {
+    var _a6, _b5;
+    if ((_a6 = rangeState.highlightedRange) == null ? void 0 : _a6.start) {
       return date.toCalendarDate(rangeState.highlightedRange.start);
     }
-    if ((_b4 = rangeState == null ? void 0 : rangeState.value) == null ? void 0 : _b4.start) {
+    if ((_b5 = rangeState == null ? void 0 : rangeState.value) == null ? void 0 : _b5.start) {
       return date.toCalendarDate(rangeState.value.start);
     }
     return null;
   };
   const getRangeEndValue = () => {
-    var _a5, _b4;
-    if ((_a5 = rangeState.highlightedRange) == null ? void 0 : _a5.end) {
+    var _a6, _b5;
+    if ((_a6 = rangeState.highlightedRange) == null ? void 0 : _a6.end) {
+      if (rangeState.anchorDate && rangeState.highlightedRange.start && rangeState.highlightedRange.end.compare(
+        rangeState.highlightedRange.start
+      ) === 0) {
+        return null;
+      }
       return date.toCalendarDate(rangeState.highlightedRange.end);
     }
-    if ((_b4 = rangeState == null ? void 0 : rangeState.value) == null ? void 0 : _b4.end) {
+    if ((_b5 = rangeState == null ? void 0 : rangeState.value) == null ? void 0 : _b5.end) {
       return date.toCalendarDate(rangeState.value.end);
     }
     return null;
@@ -1639,16 +1644,36 @@ var StaticCard = React20.forwardRef(
   }
 );
 StaticCard.displayName = "StaticCard";
+var _a2, _b;
+var IS_TOUCH_PRIMARY = globalThis.window !== void 0 && ((_b = (_a2 = globalThis.window).matchMedia) == null ? void 0 : _b.call(_a2, "(pointer: coarse)").matches);
+function isPhantomPointer(event) {
+  return IS_TOUCH_PRIMARY && event.pointerType === "mouse";
+}
 function CalendarCell({ date: date$1, currentMonth }) {
-  var _a5, _b4;
+  var _a6, _b5;
   const { mode, state } = useCalendar();
   const ref = React20.useRef(null);
   const { cellProps, buttonProps, isSelected, isDisabled, formattedDate } = reactAria.useCalendarCell({ date: date$1 }, state, ref);
   const isOutsideMonth = !date.isSameMonth(currentMonth, date$1);
-  const isSelectionStart = mode === "range" && ((_a5 = state.highlightedRange) == null ? void 0 : _a5.start) ? date.isSameDay(date$1, state.highlightedRange.start) : false;
-  const isSelectionEnd = mode === "range" && ((_b4 = state.highlightedRange) == null ? void 0 : _b4.end) ? date.isSameDay(date$1, state.highlightedRange.end) : false;
-  const isSingleModeSelected = mode === "single" && isSelected;
+  const isSelectionStart = mode === "range" && ((_a6 = state.highlightedRange) == null ? void 0 : _a6.start) ? date.isSameDay(date$1, state.highlightedRange.start) : false;
+  const isSelectionEnd = mode === "range" && ((_b5 = state.highlightedRange) == null ? void 0 : _b5.end) ? date.isSameDay(date$1, state.highlightedRange.end) : false;
+  const isEdge = mode === "single" && isSelected || isSelectionStart || isSelectionEnd;
+  const isMiddle = isSelected && !isEdge && mode === "range";
   const { focusProps, isFocusVisible } = reactAria.useFocusRing();
+  const merged = reactAria.mergeProps(buttonProps, focusProps);
+  const interactionProps = mode === "range" && IS_TOUCH_PRIMARY ? {
+    ...merged,
+    onPointerEnter: (event) => {
+      var _a7;
+      if (!isPhantomPointer(event))
+        (_a7 = merged.onPointerEnter) == null ? void 0 : _a7.call(merged, event);
+    },
+    onPointerMove: (event) => {
+      var _a7;
+      if (!isPhantomPointer(event))
+        (_a7 = merged.onPointerMove) == null ? void 0 : _a7.call(merged, event);
+    }
+  } : merged;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "td",
     {
@@ -1660,7 +1685,7 @@ function CalendarCell({ date: date$1, currentMonth }) {
       children: /* @__PURE__ */ jsxRuntime.jsx(
         react.Box,
         {
-          ...reactAria.mergeProps(buttonProps, focusProps),
+          ...interactionProps,
           ref,
           hidden: isOutsideMonth,
           width: ["54px", null, "70px"],
@@ -1676,32 +1701,10 @@ function CalendarCell({ date: date$1, currentMonth }) {
               alignItems: "center",
               justifyContent: "center",
               borderRadius: "sm",
-              css: {
-                cursor: "pointer",
-                color: isDisabled ? "text.disabled" : void 0,
-                // Single mode: Selected styling
-                ...isSingleModeSelected && {
-                  backgroundColor: "brand.surface",
-                  color: "text.inverted"
-                },
-                // Range mode: Selection start/end styling
-                ...(isSelectionStart || isSelectionEnd) && {
-                  backgroundColor: "brand.surface",
-                  color: "text.inverted"
-                },
-                // Range mode: Middle range styling
-                ...isSelected && !(isSelectionStart || isSelectionEnd) && mode === "range" && {
-                  backgroundColor: "surface.secondary",
-                  color: "text"
-                },
-                // Non-selected hover state
-                ...!isSelected && !isDisabled && {
-                  "&:hover": {
-                    backgroundColor: "surface.secondary",
-                    color: "text"
-                  }
-                }
-              },
+              css: cellStyles,
+              "data-disabled": isDisabled || void 0,
+              "data-edge": isEdge || void 0,
+              "data-middle": isMiddle || void 0,
               children: /* @__PURE__ */ jsxRuntime.jsx(Text3, { variant: "sm", children: formattedDate })
             }
           )
@@ -1710,6 +1713,30 @@ function CalendarCell({ date: date$1, currentMonth }) {
     }
   );
 }
+var cellStyles = {
+  cursor: "pointer",
+  // Disabled
+  "&[data-disabled]": {
+    color: "text.disabled"
+  },
+  // Selection edge (single-mode selected OR range start/end)
+  "&[data-edge]": {
+    backgroundColor: "brand.surface",
+    color: "text.inverted"
+  },
+  // Range middle
+  "&[data-middle]": {
+    backgroundColor: "surface.secondary",
+    color: "text"
+  },
+  // Hover for non-selected, non-disabled cells on devices that support hover
+  "@media (hover: hover)": {
+    "&:not([data-edge]):not([data-middle]):not([data-disabled]):hover": {
+      backgroundColor: "surface.secondary",
+      color: "text"
+    }
+  }
+};
 var weekDays = {
   nb: ["Ma", "Ti", "On", "To", "Fr", "L\xF8", "S\xF8"],
   nn: ["Ma", "Ti", "On", "To", "Fr", "L\xF8", "S\xF8"],
@@ -1912,10 +1939,20 @@ function ScrollCalendar(boxProps) {
       if (monthIndex > 0 && monthIndex < monthCount) {
         const element = monthReferences.current[monthIndex];
         if (element) {
-          element.scrollIntoView({
-            behavior: "instant",
-            block: "start"
-          });
+          const selectedCell = element.querySelector(
+            '[aria-selected="true"]'
+          );
+          if (selectedCell) {
+            selectedCell.scrollIntoView({
+              behavior: "instant",
+              block: "center"
+            });
+          } else {
+            element.scrollIntoView({
+              behavior: "instant",
+              block: "start"
+            });
+          }
         }
       }
       hasScrolledRef.current = true;
@@ -2149,8 +2186,8 @@ function CalendarCell2({
     stateProps["data-unavailable"] = true;
   }
   React20.useEffect(() => {
-    var _a5;
-    (_a5 = ref.current) == null ? void 0 : _a5.addEventListener(
+    var _a6;
+    (_a6 = ref.current) == null ? void 0 : _a6.addEventListener(
       "touchend",
       (event) => {
         event.preventDefault();
@@ -2486,7 +2523,7 @@ function createCalendar3(identifier) {
 }
 var DateField = React20.forwardRef(
   (props, externalRef) => {
-    var _a5;
+    var _a6;
     const locale = useCurrentLocale();
     const recipe = react.useSlotRecipe({
       key: "datePicker"
@@ -2524,7 +2561,7 @@ var DateField = React20.forwardRef(
         "input",
         {
           type: "hidden",
-          value: ((_a5 = state.value) == null ? void 0 : _a5.toString()) ?? "",
+          value: ((_a6 = state.value) == null ? void 0 : _a6.toString()) ?? "",
           name: props.name,
           id: props.id
         }
@@ -2641,11 +2678,11 @@ var DatePicker = React20.forwardRef(
     const locale = useCurrentLocale();
     const shouldShowCalendar = state.isOpen && !props.isDisabled && !props.noCalendar;
     const onFieldClick = () => {
-      var _a5;
+      var _a6;
       if (!props.noCalendar) {
         state.setOpen(true);
       }
-      (_a5 = props.onClick) == null ? void 0 : _a5.call(props);
+      (_a6 = props.onClick) == null ? void 0 : _a6.call(props);
     };
     const popoverContent = /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Content, { css: styles.calendarPopover, children: /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Body, { minWidth: "20rem", children: /* @__PURE__ */ jsxRuntime.jsx(
       Calendar2,
@@ -3419,91 +3456,95 @@ var Input = React20.forwardRef(
   }
 );
 Input.displayName = "Input";
-var Autocomplete = ({
-  variant = "core",
-  children,
-  label,
-  leftIcon,
-  onInputValueChange,
-  invalid,
-  helperText,
-  errorText,
-  required,
-  filteredExternally,
-  loading,
-  disabled,
-  emptyLabel,
-  onFocus,
-  openOnClick = true,
-  openOnFocus = true,
-  ...rest
-}) => {
-  const { contains } = react.useFilter({ sensitivity: "base" });
-  const { t } = useTranslation();
-  const extractedItems = React20__namespace.default.useMemo(
-    () => extractItemsFromChildren(children),
-    [children]
-  );
-  const { collection, filter, reset } = react.useListCollection({
-    initialItems: extractedItems,
-    filter: filteredExternally ? void 0 : contains
-  });
-  React20__namespace.default.useEffect(() => {
-    if (filteredExternally)
-      reset();
-  }, [extractedItems, reset, filteredExternally]);
-  const filteredChildren = React20__namespace.default.useMemo(
-    () => filterChildren(children, collection.items),
-    [children, collection.items]
-  );
-  const combobox = react.useCombobox({
-    collection,
-    openOnClick: filteredChildren.length > 0 ? openOnClick : false,
-    onInputValueChange: (event) => {
-      if (!filteredExternally) {
-        filter(event.inputValue);
-      }
-      onInputValueChange == null ? void 0 : onInputValueChange(event);
-    },
-    positioning: {
-      placement: "bottom",
-      offset: {
-        mainAxis: 3,
-        crossAxis: -1
-      },
-      flip: false
-    },
+var Autocomplete = React20.forwardRef(
+  function Autocomplete2({
+    variant = "core",
+    children,
+    css,
+    label,
+    leftIcon,
+    onInputValueChange,
+    invalid,
+    helperText,
+    errorText,
+    required,
+    filteredExternally,
+    loading,
     disabled,
+    emptyLabel,
+    onFocus,
+    openOnClick = true,
+    openOnFocus = true,
     ...rest
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.Combobox.RootProvider, { value: combobox, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(react.Combobox.Control, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Input, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-        Input,
-        {
-          label: /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Label, { children: label }),
-          variant,
-          labelAsChild: true,
-          startElement: leftIcon,
-          invalid,
-          helperText,
-          errorText,
-          required,
-          onFocus: (event) => {
-            onFocus == null ? void 0 : onFocus(event);
-            if (openOnFocus && filteredChildren.length > 0)
-              combobox.setOpen(true);
+  }, ref) {
+    const { contains } = react.useFilter({ sensitivity: "base" });
+    const { t } = useTranslation();
+    const extractedItems = React20__namespace.default.useMemo(
+      () => extractItemsFromChildren(children),
+      [children]
+    );
+    const { collection, filter, reset } = react.useListCollection({
+      initialItems: extractedItems,
+      filter: filteredExternally ? void 0 : contains
+    });
+    React20__namespace.default.useEffect(() => {
+      if (filteredExternally)
+        reset();
+    }, [extractedItems, reset, filteredExternally]);
+    const filteredChildren = React20__namespace.default.useMemo(
+      () => filterChildren(children, collection.items),
+      [children, collection.items]
+    );
+    const combobox = react.useCombobox({
+      collection,
+      openOnClick: filteredChildren.length > 0 ? openOnClick : false,
+      onInputValueChange: (event) => {
+        if (!filteredExternally) {
+          filter(event.inputValue);
+        }
+        onInputValueChange == null ? void 0 : onInputValueChange(event);
+      },
+      positioning: {
+        placement: "bottom",
+        offset: {
+          mainAxis: 3,
+          crossAxis: -1
+        },
+        flip: false
+      },
+      disabled,
+      ...rest
+    });
+    return /* @__PURE__ */ jsxRuntime.jsxs(react.Combobox.RootProvider, { value: combobox, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(react.Combobox.Control, { css, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Input, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+          Input,
+          {
+            ref,
+            label: /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Label, { children: label }),
+            variant,
+            labelAsChild: true,
+            startElement: leftIcon,
+            invalid,
+            helperText,
+            errorText,
+            required,
+            onFocus: (event) => {
+              onFocus == null ? void 0 : onFocus(event);
+              if (openOnFocus && filteredChildren.length > 0)
+                combobox.setOpen(true);
+            }
           }
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.IndicatorGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.ClearTrigger, { asChild: true, "aria-label": t(texts14.clearValue), children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { size: "xs", tabIndex: 0 }) }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.Combobox.Content, { children: [
-      !loading && /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Empty, { children: emptyLabel ?? t(texts14.noItemsFound) }),
-      loading ? /* @__PURE__ */ jsxRuntime.jsx(ColorSpinner, { width: "1.5rem", p: "2" }) : filteredChildren
-    ] }) })
-  ] });
-};
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.IndicatorGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.ClearTrigger, { asChild: true, "aria-label": t(texts14.clearValue), children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { size: "xs", tabIndex: 0 }) }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.Combobox.Content, { children: [
+        !loading && /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Empty, { children: emptyLabel ?? t(texts14.noItemsFound) }),
+        loading ? /* @__PURE__ */ jsxRuntime.jsx(ColorSpinner, { width: "1.5rem", p: "2" }) : filteredChildren
+      ] }) })
+    ] });
+  }
+);
 var AutocompleteItemGroup = react.Combobox.ItemGroup;
 var AutocompleteItemGroupLabel = react.Combobox.ItemGroupLabel;
 var AutocompleteItem = React20.forwardRef(
@@ -3521,7 +3562,7 @@ var AutocompleteItem = React20.forwardRef(
 var filterChildren = (children, collectionItems) => {
   const collectionValues = new Set(collectionItems.map((item) => item.value));
   return React20__namespace.default.Children.toArray(children).map((child) => {
-    var _a5;
+    var _a6;
     if (!React20__namespace.default.isValidElement(child))
       return null;
     if (child.type === AutocompleteItemGroup) {
@@ -3540,7 +3581,7 @@ var filterChildren = (children, collectionItems) => {
         children: filteredGroupChildren
       });
     }
-    const itemProps = (_a5 = child.props) == null ? void 0 : _a5.item;
+    const itemProps = (_a6 = child.props) == null ? void 0 : _a6.item;
     if (itemProps) {
       return collectionValues.has(itemProps.value) ? child : null;
     }
@@ -3681,7 +3722,7 @@ var Popover = React20.forwardRef(
     hasBackdrop = true,
     containerPadding = 12
   }, ref) => {
-    var _a5;
+    var _a6;
     const internalRef = React20.useRef(null);
     const popoverRef = ref ?? internalRef;
     const { popoverProps, underlayProps } = reactAria.usePopover(
@@ -3702,7 +3743,7 @@ var Popover = React20.forwardRef(
       {
         ...popoverProps,
         ref: popoverRef,
-        minWidth: ((_a5 = triggerRef.current) == null ? void 0 : _a5.clientWidth) ?? "auto",
+        minWidth: ((_a6 = triggerRef.current) == null ? void 0 : _a6.clientWidth) ?? "auto",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(reactAria.DismissButton, { onDismiss: state.close }),
           children,
@@ -3997,8 +4038,8 @@ function Option({ item, state }) {
     dataFields["data-focus-visible"] = true;
   }
   React20.useEffect(() => {
-    var _a5;
-    (_a5 = ref == null ? void 0 : ref.current) == null ? void 0 : _a5.addEventListener(
+    var _a6;
+    (_a6 = ref == null ? void 0 : ref.current) == null ? void 0 : _a6.addEventListener(
       "touchend",
       (event) => {
         event.preventDefault();
@@ -4027,7 +4068,7 @@ var useOptionContext = () => {
   return React20.useContext(OptionContext);
 };
 function ListBoxSection({ section, state }) {
-  var _a5, _b4;
+  var _a6, _b5;
   const { itemProps, headingProps, groupProps } = reactAria.useListBoxSection({
     heading: section.rendered,
     "aria-label": section["aria-label"]
@@ -4049,11 +4090,132 @@ function ListBoxSection({ section, state }) {
         children: section.rendered
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(List, { ...groupProps, padding: 0, listStyleType: "none", children: Array.from(((_b4 = (_a5 = state.collection).getChildren) == null ? void 0 : _b4.call(_a5, section.key)) ?? []).map(
+    /* @__PURE__ */ jsxRuntime.jsx(List, { ...groupProps, padding: 0, listStyleType: "none", children: Array.from(((_b5 = (_a6 = state.collection).getChildren) == null ? void 0 : _b5.call(_a6, section.key)) ?? []).map(
       (item) => /* @__PURE__ */ jsxRuntime.jsx(Option, { item, state }, item.key)
     ) })
   ] }) });
 }
+var CustomMenuContext = React20.createContext({
+  variant: "core"
+});
+var useMenuContext = () => React20.useContext(CustomMenuContext);
+var Menu = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    CustomMenuContext.Provider,
+    {
+      value: {
+        variant: props.variant
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(react.Menu.Root, { ...props, children })
+    }
+  );
+};
+var MenuContent = React20.forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Menu.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Menu.Content, { ref, ...props, children }) }) });
+  }
+);
+MenuContent.displayName = "MenuContent";
+var MenuTrigger = React20.forwardRef(
+  ({ icon, size, children, ...props }, ref) => {
+    const { variant } = useMenuContext();
+    const { open } = react.useMenuContext();
+    const ChevronIcon = size === "sm" ? spor_icon_react_star.DropdownDownFill18Icon : spor_icon_react_star.DropdownDownFill24Icon;
+    const getButtonVariant = () => {
+      if (variant === "floating")
+        return "floating";
+      if (variant === "accent")
+        return "secondary";
+      return "tertiary";
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Menu.Trigger, { asChild: true, ref, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        leftIcon: icon,
+        variant: getButtonVariant(),
+        size,
+        ...props,
+        rightIcon: /* @__PURE__ */ jsxRuntime.jsx(
+          ChevronIcon,
+          {
+            transform: open ? "rotate(180deg)" : void 0,
+            transition: "transform 0.3s"
+          }
+        ),
+        children
+      }
+    ) });
+  }
+);
+MenuTrigger.displayName = "MenuTrigger";
+var MenuItem = React20.forwardRef(
+  ({ itemCommand, children, value, leftIcon, rightIcon, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(react.Menu.Item, { value, ...props, ref, children: [
+      leftIcon,
+      children,
+      itemCommand && /* @__PURE__ */ jsxRuntime.jsx(react.Menu.ItemCommand, { children: itemCommand }),
+      rightIcon
+    ] });
+  }
+);
+MenuItem.displayName = "MenuItem";
+var MenuTriggerItem = React20.forwardRef(
+  ({ children, leftIcon, rightIcon, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(react.Menu.TriggerItem, { ...props, ref, children: [
+      leftIcon,
+      children,
+      rightIcon
+    ] });
+  }
+);
+MenuTriggerItem.displayName = "MenuTriggerItem";
+var MenuRadioItemGroup = React20.forwardRef(({ children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Menu.RadioItemGroup, { ...props, children });
+});
+MenuRadioItemGroup.displayName = "MenuRadioItemGroup";
+var MenuRadioItem = React20.forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(react.Menu.RadioItem, { ...props, ref, children: [
+      children,
+      /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { w: "1.25rem", justify: "center", align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(react.Menu.ItemIndicator, {}) })
+    ] });
+  }
+);
+MenuRadioItem.displayName = "MenuRadioItem";
+var MenuItemGroup = React20.forwardRef(
+  ({ children, label, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(react.Menu.ItemGroup, { ...props, ref, children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx(react.Menu.ItemGroupLabel, { children: label }),
+      children
+    ] });
+  }
+);
+MenuItemGroup.displayName = "MenuItemGroup";
+var MenuCheckboxItem = React20.forwardRef(({ children, closeOnSelect = false, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.Menu.CheckboxItem,
+    {
+      ...props,
+      ref,
+      closeOnSelect,
+      checked: props.checked,
+      onCheckedChange: props.onCheckedChange,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Checkbox,
+        {
+          checked: props.checked,
+          onCheckedChange: () => props.onCheckedChange,
+          children
+        }
+      )
+    }
+  );
+});
+MenuCheckboxItem.displayName = "MenuCheckboxItem";
+var MenuSeparator = React20.forwardRef(({ ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Menu.Separator, { ...props });
+});
+MenuSeparator.displayName = "MenuSeparator";
 var NativeSelect = React20__namespace.forwardRef(function NativeSelect2(props, ref) {
   const {
     children,
@@ -4135,8 +4297,8 @@ var NumericStepper = React20__namespace.default.forwardRef((props, ref) => {
   });
   const clampedStepSize = Math.max(Math.min(stepSize, 10), 1);
   const focusOnAddButton = () => {
-    var _a5;
-    (_a5 = addButtonRef.current) == null ? void 0 : _a5.focus();
+    var _a6;
+    (_a6 = addButtonRef.current) == null ? void 0 : _a6.focus();
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Field3,
@@ -4408,8 +4570,8 @@ var CountryCodeSelect = React20.forwardRef((props, ref) => {
       return allCallingCodes;
     const filteredItems = allCallingCodes.items.filter(
       (callingCode) => {
-        var _a5;
-        return (_a5 = props.allowedCountryCodes) == null ? void 0 : _a5.includes(callingCode.label);
+        var _a6;
+        return (_a6 = props.allowedCountryCodes) == null ? void 0 : _a6.includes(callingCode.label);
       }
     );
     return react.createListCollection({ items: filteredItems });
@@ -4910,8 +5072,8 @@ var LinjeTagIcon = ({
   size,
   css
 }) => {
-  var _a5;
-  const IconComponent2 = ((_a5 = icons[variant]) == null ? void 0 : _a5[size]) ?? react.Box;
+  var _a6;
+  const IconComponent2 = ((_a6 = icons[variant]) == null ? void 0 : _a6[size]) ?? react.Box;
   return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { css, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent2, {}) });
 };
 var LineIcon = React20.forwardRef(
@@ -6432,15 +6594,15 @@ var getNextSortState = (current, columnIndex) => {
   return { direction: "asc", columnIndex: null };
 };
 var getColumnIndex = (element) => {
-  var _a5;
-  return Array.prototype.indexOf.call((_a5 = element.parentElement) == null ? void 0 : _a5.children, element);
+  var _a6;
+  return Array.prototype.indexOf.call((_a6 = element.parentElement) == null ? void 0 : _a6.children, element);
 };
 var getCellSortText = (row, columnIndex) => {
-  var _a5;
+  var _a6;
   const cell = row.cells[columnIndex];
   if (!cell)
     return "";
-  return cell.dataset.sort || ((_a5 = cell.textContent) == null ? void 0 : _a5.trim()) || "";
+  return cell.dataset.sort || ((_a6 = cell.textContent) == null ? void 0 : _a6.trim()) || "";
 };
 var applyDomSort = (tbody, sortState, originalRows) => {
   if (sortState.columnIndex == null) {
@@ -7204,7 +7366,7 @@ var staticCardRecipe = react.defineRecipe({
     colorPalette: "white"
   }
 });
-var _a2, _b;
+var _a3, _b2;
 var textareaRecipe = react.defineRecipe({
   className: "spor-textarea",
   base: {
@@ -7221,10 +7383,10 @@ var textareaRecipe = react.defineRecipe({
   variants: {
     variant: {
       core: {
-        ...(_a2 = inputRecipe.variants) == null ? void 0 : _a2.variant.core
+        ...(_a3 = inputRecipe.variants) == null ? void 0 : _a3.variant.core
       },
       floating: {
-        ...(_b = inputRecipe.variants) == null ? void 0 : _b.variant.floating
+        ...(_b2 = inputRecipe.variants) == null ? void 0 : _b2.variant.floating
       }
     }
   }
@@ -7561,6 +7723,19 @@ var comboboxAnatomy = react$1.comboboxAnatomy.extendWith(
   "indicatorGroup",
   "empty"
 );
+var menuAnatomy = anatomy.createAnatomy("menu").parts(
+  "trigger",
+  "content",
+  "item",
+  "itemGroup",
+  "triggerItem",
+  "itemCommand",
+  "itemGroupLabel",
+  "separator",
+  "radioItem",
+  "triggerItem",
+  "checkboxItem"
+);
 
 // src/theme/slot-recipes/accordion.ts
 var accordionSlotRecipe = react.defineSlotRecipe({
@@ -9436,7 +9611,7 @@ var travelTagSlotRecipe = react.defineSlotRecipe({
 });
 
 // src/theme/slot-recipes/info-tag.ts
-var _a3, _b2, _c, _d;
+var _a4, _b3, _c, _d;
 var infoTagSlotRecipe = react.defineSlotRecipe({
   slots: infoTagAnatomy.keys(),
   className: "spor-info-tag",
@@ -9473,9 +9648,9 @@ var infoTagSlotRecipe = react.defineSlotRecipe({
       "local-bus": {}
     },
     size: {
-      ...(_a3 = travelTagSlotRecipe.variants) == null ? void 0 : _a3.size,
+      ...(_a4 = travelTagSlotRecipe.variants) == null ? void 0 : _a4.size,
       sm: {
-        ...(_b2 = travelTagSlotRecipe.variants) == null ? void 0 : _b2.size.sm,
+        ...(_b3 = travelTagSlotRecipe.variants) == null ? void 0 : _b3.size.sm,
         iconContainer: {
           borderRadius: "0.375rem"
         }
@@ -9849,7 +10024,108 @@ var mediaControllerSlotRecipe = react.defineSlotRecipe({
     }
   ]
 });
-var _a4, _b3;
+var menuSlotRecipe = react.defineSlotRecipe({
+  className: "menu",
+  slots: menuAnatomy.keys(),
+  base: {
+    content: {
+      bg: "bg",
+      borderRadius: "sm",
+      boxShadow: "sm",
+      width: "fit-content",
+      padding: "1",
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.5",
+      zIndex: "dropdown",
+      _open: {
+        animationStyle: "slide-fade-in",
+        animationDuration: "fast",
+        zIndex: "popover",
+        outline: "none"
+      }
+    },
+    itemGroup: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.5"
+    },
+    item: {
+      borderRadius: "9px",
+      padding: "2",
+      display: "flex",
+      justifyContent: "space-between",
+      gap: 1.5,
+      _hover: {
+        backgroundColor: "accent.surface.hover"
+      },
+      "&:active": {
+        backgroundColor: "accent.surface.active"
+      },
+      _checked: {
+        backgroundColor: "accent.surface"
+      },
+      _highlighted: {
+        backgroundColor: "ghost.surface.hover"
+      }
+    },
+    itemGroupLabel: {
+      paddingY: "1",
+      fontWeight: "bold",
+      fontSize: "xs"
+    },
+    itemCommand: {
+      fontSize: "2xs"
+    },
+    separator: {
+      color: "outline"
+    },
+    radioItem: {
+      display: "flex",
+      justifyContent: "space-between",
+      gap: 2
+    },
+    triggerItem: {
+      display: "flex",
+      justifyContent: "space-between",
+      gap: 1.5,
+      alignItems: "center"
+    },
+    checkboxItem: {
+      display: "flex",
+      gap: 2,
+      alignItems: "center",
+      width: "full"
+    }
+  },
+  variants: {
+    variant: {
+      core: {
+        content: {
+          border: "1px solid",
+          borderColor: "core.outline"
+        }
+      },
+      accent: {
+        content: {
+          border: "1px solid",
+          borderColor: "core.outline"
+        }
+      },
+      floating: {
+        content: {
+          border: "sm",
+          borderColor: "floating.outline",
+          boxShadow: "lg"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "core"
+  }
+});
+var _a5, _b4;
 var nativeSelectSlotRecipe = react.defineSlotRecipe({
   slots: NativeSelectAnatomy.keys(),
   className: "spor-nativeSelect",
@@ -9893,12 +10169,12 @@ var nativeSelectSlotRecipe = react.defineSlotRecipe({
     variant: {
       core: {
         field: {
-          ...(_a4 = inputRecipe.variants) == null ? void 0 : _a4.variant.core
+          ...(_a5 = inputRecipe.variants) == null ? void 0 : _a5.variant.core
         }
       },
       floating: {
         field: {
-          ...(_b3 = inputRecipe.variants) == null ? void 0 : _b3.variant.floating
+          ...(_b4 = inputRecipe.variants) == null ? void 0 : _b4.variant.floating
         }
       }
     }
@@ -11212,7 +11488,8 @@ var slotRecipes = {
   toast: toastSlotRecipe,
   checkboxCard: choiceChipSlotRecipe,
   collapsible: collapsibleSlotRecipe,
-  tooltip: popoverSlotRecipe
+  tooltip: popoverSlotRecipe,
+  menu: menuSlotRecipe
 };
 var animations = react.defineTokens.animations({
   spin: {
@@ -12400,6 +12677,16 @@ exports.List = List;
 exports.ListBox = ListBox;
 exports.ListIndicator = ListIndicator;
 exports.ListItem = ListItem2;
+exports.Menu = Menu;
+exports.MenuCheckboxItem = MenuCheckboxItem;
+exports.MenuContent = MenuContent;
+exports.MenuItem = MenuItem;
+exports.MenuItemGroup = MenuItemGroup;
+exports.MenuRadioItem = MenuRadioItem;
+exports.MenuRadioItemGroup = MenuRadioItemGroup;
+exports.MenuSeparator = MenuSeparator;
+exports.MenuTrigger = MenuTrigger;
+exports.MenuTriggerItem = MenuTriggerItem;
 exports.NativeSelect = NativeSelect;
 exports.Nudge = Nudge;
 exports.NudgeActions = NudgeActions;
@@ -12480,6 +12767,7 @@ exports.themes = themes;
 exports.useCalendar = useCalendar;
 exports.useColorMode = useColorMode;
 exports.useColorModeValue = useColorModeValue;
+exports.useMenuContext = useMenuContext;
 exports.useTableSort = useTableSort;
 exports.useTranslation = useTranslation;
 //# sourceMappingURL=out.js.map