@vygruppen/spor-react 12.24.14 → 12.24.16

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { useSlotRecipe, Accordion as Accordion$1, Stack, Box, HStack, Progress, defineRecipe, chakra, Text, useRecipe, Circle, Skeleton as Skeleton$1, Button as Button$1, Group, Badge as Badge$1, Code as Code$1, Clipboard as Clipboard$1, IconButton as IconButton$1, useDisclosure, Alert as Alert$1, Span, Flex, Breadcrumb as Breadcrumb$1, RadioCard as RadioCard$1, Separator as Separator$1, ClientOnly, Field, defineStyle, PopoverAnchor, useFieldContext, Popover as Popover$1, Portal, Dialog, createContext as createContext$1, useDialogContext, Drawer as Drawer$1, InputElement, Input as Input$1, Combobox, useComboboxContext, usePopoverContext, Checkbox as Checkbox$1, CheckboxCard, Fieldset as Fieldset$1, NativeSelect as NativeSelect$1, useControllableState, createListCollection, RadioGroup as RadioGroup$1, Select as Select$1, useSelectContext, Switch as Switch$1, Textarea as Textarea$1, Link, List as List$1, Center, PopoverCloseTrigger, Pagination as Pagination$1, usePaginationContext, createToaster, Tabs as Tabs$1, Table as Table$1, defineSemanticTokens, defineSlotRecipe, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, Tooltip as Tooltip$1, VisuallyHidden as VisuallyHidden$1, defineConfig, useFilter, useListCollection, useCombobox, CheckboxGroup as CheckboxGroup$1, ListItem, ChakraProvider, Toaster as Toaster$1, Toast } from '@chakra-ui/react';
+import { useSlotRecipe, Accordion as Accordion$1, Stack, Box, HStack, Progress, defineRecipe, chakra, Text, useRecipe, Circle, Skeleton as Skeleton$1, Button as Button$1, Group, Badge as Badge$1, Code as Code$1, Clipboard as Clipboard$1, IconButton as IconButton$1, useDisclosure, Alert as Alert$1, Span, Flex, Breadcrumb as Breadcrumb$1, RadioCard as RadioCard$1, Separator as Separator$1, ClientOnly, Field, defineStyle, PopoverAnchor, useFieldContext, Popover as Popover$1, Portal, Dialog, createContext as createContext$1, useDialogContext, Drawer as Drawer$1, InputElement, Input as Input$1, useFilter, useListCollection, useCombobox, Combobox, useComboboxContext, usePopoverContext, Checkbox as Checkbox$1, CheckboxCard, Fieldset as Fieldset$1, Menu as Menu$1, useMenuContext as useMenuContext$1, NativeSelect as NativeSelect$1, useControllableState, createListCollection, RadioGroup as RadioGroup$1, Select as Select$1, useSelectContext, Switch as Switch$1, Textarea as Textarea$1, Link, List as List$1, Center, PopoverCloseTrigger, Pagination as Pagination$1, usePaginationContext, createToaster, Tabs as Tabs$1, Table as Table$1, defineSemanticTokens, defineSlotRecipe, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, Tooltip as Tooltip$1, VisuallyHidden as VisuallyHidden$1, defineConfig, CheckboxGroup as CheckboxGroup$1, ListItem, ChakraProvider, Toaster as Toaster$1, Toast } from '@chakra-ui/react';
 export { AspectRatio, Box, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, ClientOnly, Collapsible, Container, Em, Flex, For, FormatByte, FormatNumber, Grid, GridItem, HStack, Icon, Image, Kbd, LocaleProvider, Portal, Show, SimpleGrid, Spacer, Span, Stack, TableCaption, TableCell, TableColumn, TableColumnGroup, TableFooter, TableHeader, TableRoot, TableRow, VStack, VisuallyHidden, Wrap, createIcon, createListCollection, createSystem, defineConfig, defineRecipe, defineSlotRecipe, defineStyle, mergeConfigs, chakra as spor, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useRecipe, useSlotRecipe, useToken } from '@chakra-ui/react';
 import * as spor_icon_react_star from '@vygruppen/spor-icon-react';
 import { DropdownDownFill24Icon, CopyOutline18Icon, CheckmarkFill18Icon, CloseFill18Icon, CloseFill30Icon, CloseFill24Icon, InformationFill24Icon, ServiceFill24Icon, QuestionFill24Icon, ErrorOutline24Icon, ErrorFill24Icon, AltTransportFill24Icon, WarningFill24Icon, SuccessFill24Icon, DropdownDownFill18Icon, DropdownRightFill18Icon, CalendarOutline24Icon, ArrowLeftFill24Icon, ChangeDirectionOutline24Icon, CloseOutline24Icon, SearchOutline24Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowRightFill18Icon, DropdownLeftOutline18Icon, DropdownRightOutline18Icon, ArrowUpFill18Icon, ArrowDownFill18Icon, ChangeDirectionFill18Icon, WalkFill30Icon, WalkFill24Icon, WalkFill18Icon, AltTransportFill30Icon, AltTransportFill18Icon, TramFill30Icon, TramFill24Icon, TramFill18Icon, SubwayFill30Icon, SubwayFill24Icon, SubwayFill18Icon, FerryFill30Icon, FerryFill24Icon, FerryFill18Icon, BusFill30Icon, BusFill24Icon, BusFill18Icon, ExpressBusFill30Icon, ExpressBusFill24Icon, ExpressBusFill18Icon, TrainFill30Icon, TrainFill24Icon, TrainFill18Icon, InformationFill18Icon, WarningFill18Icon, ErrorFill18Icon, LinkOutOutline24Icon, LinkOutOutline18Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, DropdownLeftFill18Icon } from '@vygruppen/spor-icon-react';
@@ -46,9 +46,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;
     }
@@ -1504,21 +1504,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 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 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 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 toCalendarDate(rangeState.value.end);
     }
     return null;
@@ -1619,16 +1624,36 @@ var StaticCard = 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, currentMonth }) {
-  var _a5, _b4;
+  var _a6, _b5;
   const { mode, state } = useCalendar();
   const ref = useRef(null);
   const { cellProps, buttonProps, isSelected, isDisabled, formattedDate } = useCalendarCell({ date }, state, ref);
   const isOutsideMonth = !isSameMonth(currentMonth, date);
-  const isSelectionStart = mode === "range" && ((_a5 = state.highlightedRange) == null ? void 0 : _a5.start) ? isSameDay(date, state.highlightedRange.start) : false;
-  const isSelectionEnd = mode === "range" && ((_b4 = state.highlightedRange) == null ? void 0 : _b4.end) ? isSameDay(date, state.highlightedRange.end) : false;
-  const isSingleModeSelected = mode === "single" && isSelected;
+  const isSelectionStart = mode === "range" && ((_a6 = state.highlightedRange) == null ? void 0 : _a6.start) ? isSameDay(date, state.highlightedRange.start) : false;
+  const isSelectionEnd = mode === "range" && ((_b5 = state.highlightedRange) == null ? void 0 : _b5.end) ? isSameDay(date, state.highlightedRange.end) : false;
+  const isEdge = mode === "single" && isSelected || isSelectionStart || isSelectionEnd;
+  const isMiddle = isSelected && !isEdge && mode === "range";
   const { focusProps, isFocusVisible } = useFocusRing();
+  const merged = 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__ */ jsx(
     "td",
     {
@@ -1640,7 +1665,7 @@ function CalendarCell({ date, currentMonth }) {
       children: /* @__PURE__ */ jsx(
         Box,
         {
-          ...mergeProps(buttonProps, focusProps),
+          ...interactionProps,
           ref,
           hidden: isOutsideMonth,
           width: ["54px", null, "70px"],
@@ -1656,32 +1681,10 @@ function CalendarCell({ date, 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__ */ jsx(Text3, { variant: "sm", children: formattedDate })
             }
           )
@@ -1690,6 +1693,30 @@ function CalendarCell({ date, 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"],
@@ -1892,10 +1919,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;
@@ -2129,8 +2166,8 @@ function CalendarCell2({
     stateProps["data-unavailable"] = true;
   }
   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();
@@ -2466,7 +2503,7 @@ function createCalendar3(identifier) {
 }
 var DateField = forwardRef(
   (props, externalRef) => {
-    var _a5;
+    var _a6;
     const locale = useCurrentLocale();
     const recipe = useSlotRecipe({
       key: "datePicker"
@@ -2504,7 +2541,7 @@ var DateField = 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
         }
@@ -2621,11 +2658,11 @@ var DatePicker = 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__ */ jsx(Popover$1.Positioner, { children: /* @__PURE__ */ jsx(Popover$1.Content, { css: styles.calendarPopover, children: /* @__PURE__ */ jsx(Popover$1.Body, { minWidth: "20rem", children: /* @__PURE__ */ jsx(
       Calendar2,
@@ -3399,91 +3436,95 @@ var Input = 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 } = useFilter({ sensitivity: "base" });
-  const { t } = useTranslation();
-  const extractedItems = React20__default.useMemo(
-    () => extractItemsFromChildren(children),
-    [children]
-  );
-  const { collection, filter, reset } = useListCollection({
-    initialItems: extractedItems,
-    filter: filteredExternally ? void 0 : contains
-  });
-  React20__default.useEffect(() => {
-    if (filteredExternally)
-      reset();
-  }, [extractedItems, reset, filteredExternally]);
-  const filteredChildren = React20__default.useMemo(
-    () => filterChildren(children, collection.items),
-    [children, collection.items]
-  );
-  const combobox = 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 = 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__ */ jsxs(Combobox.RootProvider, { value: combobox, children: [
-    /* @__PURE__ */ jsxs(Combobox.Control, { children: [
-      /* @__PURE__ */ jsx(Combobox.Input, { asChild: true, children: /* @__PURE__ */ jsx(
-        Input,
-        {
-          label: /* @__PURE__ */ jsx(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 } = useFilter({ sensitivity: "base" });
+    const { t } = useTranslation();
+    const extractedItems = React20__default.useMemo(
+      () => extractItemsFromChildren(children),
+      [children]
+    );
+    const { collection, filter, reset } = useListCollection({
+      initialItems: extractedItems,
+      filter: filteredExternally ? void 0 : contains
+    });
+    React20__default.useEffect(() => {
+      if (filteredExternally)
+        reset();
+    }, [extractedItems, reset, filteredExternally]);
+    const filteredChildren = React20__default.useMemo(
+      () => filterChildren(children, collection.items),
+      [children, collection.items]
+    );
+    const combobox = 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__ */ jsxs(Combobox.RootProvider, { value: combobox, children: [
+      /* @__PURE__ */ jsxs(Combobox.Control, { css, children: [
+        /* @__PURE__ */ jsx(Combobox.Input, { asChild: true, children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            ref,
+            label: /* @__PURE__ */ jsx(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__ */ jsx(Combobox.IndicatorGroup, { children: /* @__PURE__ */ jsx(Combobox.ClearTrigger, { asChild: true, "aria-label": t(texts14.clearValue), children: /* @__PURE__ */ jsx(CloseButton, { size: "xs", tabIndex: 0 }) }) })
-    ] }),
-    /* @__PURE__ */ jsx(Combobox.Positioner, { children: /* @__PURE__ */ jsxs(Combobox.Content, { children: [
-      !loading && /* @__PURE__ */ jsx(Combobox.Empty, { children: emptyLabel ?? t(texts14.noItemsFound) }),
-      loading ? /* @__PURE__ */ jsx(ColorSpinner, { width: "1.5rem", p: "2" }) : filteredChildren
-    ] }) })
-  ] });
-};
+        ) }),
+        /* @__PURE__ */ jsx(Combobox.IndicatorGroup, { children: /* @__PURE__ */ jsx(Combobox.ClearTrigger, { asChild: true, "aria-label": t(texts14.clearValue), children: /* @__PURE__ */ jsx(CloseButton, { size: "xs", tabIndex: 0 }) }) })
+      ] }),
+      /* @__PURE__ */ jsx(Combobox.Positioner, { children: /* @__PURE__ */ jsxs(Combobox.Content, { children: [
+        !loading && /* @__PURE__ */ jsx(Combobox.Empty, { children: emptyLabel ?? t(texts14.noItemsFound) }),
+        loading ? /* @__PURE__ */ jsx(ColorSpinner, { width: "1.5rem", p: "2" }) : filteredChildren
+      ] }) })
+    ] });
+  }
+);
 var AutocompleteItemGroup = Combobox.ItemGroup;
 var AutocompleteItemGroupLabel = Combobox.ItemGroupLabel;
 var AutocompleteItem = forwardRef(
@@ -3501,7 +3542,7 @@ var AutocompleteItem = forwardRef(
 var filterChildren = (children, collectionItems) => {
   const collectionValues = new Set(collectionItems.map((item) => item.value));
   return React20__default.Children.toArray(children).map((child) => {
-    var _a5;
+    var _a6;
     if (!React20__default.isValidElement(child))
       return null;
     if (child.type === AutocompleteItemGroup) {
@@ -3520,7 +3561,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;
     }
@@ -3661,7 +3702,7 @@ var Popover = forwardRef(
     hasBackdrop = true,
     containerPadding = 12
   }, ref) => {
-    var _a5;
+    var _a6;
     const internalRef = useRef(null);
     const popoverRef = ref ?? internalRef;
     const { popoverProps, underlayProps } = usePopover(
@@ -3682,7 +3723,7 @@ var Popover = 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__ */ jsx(DismissButton, { onDismiss: state.close }),
           children,
@@ -3977,8 +4018,8 @@ function Option({ item, state }) {
     dataFields["data-focus-visible"] = true;
   }
   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();
@@ -4007,7 +4048,7 @@ var useOptionContext = () => {
   return useContext(OptionContext);
 };
 function ListBoxSection({ section, state }) {
-  var _a5, _b4;
+  var _a6, _b5;
   const { itemProps, headingProps, groupProps } = useListBoxSection({
     heading: section.rendered,
     "aria-label": section["aria-label"]
@@ -4029,11 +4070,132 @@ function ListBoxSection({ section, state }) {
         children: section.rendered
       }
     ),
-    /* @__PURE__ */ 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__ */ 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__ */ jsx(Option, { item, state }, item.key)
     ) })
   ] }) });
 }
+var CustomMenuContext = createContext({
+  variant: "core"
+});
+var useMenuContext = () => useContext(CustomMenuContext);
+var Menu = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    CustomMenuContext.Provider,
+    {
+      value: {
+        variant: props.variant
+      },
+      children: /* @__PURE__ */ jsx(Menu$1.Root, { ...props, children })
+    }
+  );
+};
+var MenuContent = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, { children: /* @__PURE__ */ jsx(Menu$1.Content, { ref, ...props, children }) }) });
+  }
+);
+MenuContent.displayName = "MenuContent";
+var MenuTrigger = forwardRef(
+  ({ icon, size, children, ...props }, ref) => {
+    const { variant } = useMenuContext();
+    const { open } = useMenuContext$1();
+    const ChevronIcon = size === "sm" ? DropdownDownFill18Icon : DropdownDownFill24Icon;
+    const getButtonVariant = () => {
+      if (variant === "floating")
+        return "floating";
+      if (variant === "accent")
+        return "secondary";
+      return "tertiary";
+    };
+    return /* @__PURE__ */ jsx(Menu$1.Trigger, { asChild: true, ref, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        leftIcon: icon,
+        variant: getButtonVariant(),
+        size,
+        ...props,
+        rightIcon: /* @__PURE__ */ jsx(
+          ChevronIcon,
+          {
+            transform: open ? "rotate(180deg)" : void 0,
+            transition: "transform 0.3s"
+          }
+        ),
+        children
+      }
+    ) });
+  }
+);
+MenuTrigger.displayName = "MenuTrigger";
+var MenuItem = forwardRef(
+  ({ itemCommand, children, value, leftIcon, rightIcon, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(Menu$1.Item, { value, ...props, ref, children: [
+      leftIcon,
+      children,
+      itemCommand && /* @__PURE__ */ jsx(Menu$1.ItemCommand, { children: itemCommand }),
+      rightIcon
+    ] });
+  }
+);
+MenuItem.displayName = "MenuItem";
+var MenuTriggerItem = forwardRef(
+  ({ children, leftIcon, rightIcon, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(Menu$1.TriggerItem, { ...props, ref, children: [
+      leftIcon,
+      children,
+      rightIcon
+    ] });
+  }
+);
+MenuTriggerItem.displayName = "MenuTriggerItem";
+var MenuRadioItemGroup = forwardRef(({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(Menu$1.RadioItemGroup, { ...props, children });
+});
+MenuRadioItemGroup.displayName = "MenuRadioItemGroup";
+var MenuRadioItem = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(Menu$1.RadioItem, { ...props, ref, children: [
+      children,
+      /* @__PURE__ */ jsx(Flex, { w: "1.25rem", justify: "center", align: "center", children: /* @__PURE__ */ jsx(Menu$1.ItemIndicator, {}) })
+    ] });
+  }
+);
+MenuRadioItem.displayName = "MenuRadioItem";
+var MenuItemGroup = forwardRef(
+  ({ children, label, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(Menu$1.ItemGroup, { ...props, ref, children: [
+      label && /* @__PURE__ */ jsx(Menu$1.ItemGroupLabel, { children: label }),
+      children
+    ] });
+  }
+);
+MenuItemGroup.displayName = "MenuItemGroup";
+var MenuCheckboxItem = forwardRef(({ children, closeOnSelect = false, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    Menu$1.CheckboxItem,
+    {
+      ...props,
+      ref,
+      closeOnSelect,
+      checked: props.checked,
+      onCheckedChange: props.onCheckedChange,
+      children: /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: props.checked,
+          onCheckedChange: () => props.onCheckedChange,
+          children
+        }
+      )
+    }
+  );
+});
+MenuCheckboxItem.displayName = "MenuCheckboxItem";
+var MenuSeparator = forwardRef(({ ...props }) => {
+  return /* @__PURE__ */ jsx(Menu$1.Separator, { ...props });
+});
+MenuSeparator.displayName = "MenuSeparator";
 var NativeSelect = React20.forwardRef(function NativeSelect2(props, ref) {
   const {
     children,
@@ -4115,8 +4277,8 @@ var NumericStepper = React20__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__ */ jsxs(
     Field3,
@@ -4388,8 +4550,8 @@ var CountryCodeSelect = 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 createListCollection({ items: filteredItems });
@@ -4890,8 +5052,8 @@ var LinjeTagIcon = ({
   size,
   css
 }) => {
-  var _a5;
-  const IconComponent2 = ((_a5 = icons[variant]) == null ? void 0 : _a5[size]) ?? Box;
+  var _a6;
+  const IconComponent2 = ((_a6 = icons[variant]) == null ? void 0 : _a6[size]) ?? Box;
   return /* @__PURE__ */ jsx(Box, { css, asChild: true, children: /* @__PURE__ */ jsx(IconComponent2, {}) });
 };
 var LineIcon = forwardRef(
@@ -6412,15 +6574,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) {
@@ -7184,7 +7346,7 @@ var staticCardRecipe = defineRecipe({
     colorPalette: "white"
   }
 });
-var _a2, _b;
+var _a3, _b2;
 var textareaRecipe = defineRecipe({
   className: "spor-textarea",
   base: {
@@ -7201,10 +7363,10 @@ var textareaRecipe = 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
       }
     }
   }
@@ -7541,6 +7703,19 @@ var comboboxAnatomy = comboboxAnatomy$1.extendWith(
   "indicatorGroup",
   "empty"
 );
+var menuAnatomy = createAnatomy("menu").parts(
+  "trigger",
+  "content",
+  "item",
+  "itemGroup",
+  "triggerItem",
+  "itemCommand",
+  "itemGroupLabel",
+  "separator",
+  "radioItem",
+  "triggerItem",
+  "checkboxItem"
+);
 
 // src/theme/slot-recipes/accordion.ts
 var accordionSlotRecipe = defineSlotRecipe({
@@ -9416,7 +9591,7 @@ var travelTagSlotRecipe = defineSlotRecipe({
 });
 
 // src/theme/slot-recipes/info-tag.ts
-var _a3, _b2, _c, _d;
+var _a4, _b3, _c, _d;
 var infoTagSlotRecipe = defineSlotRecipe({
   slots: infoTagAnatomy.keys(),
   className: "spor-info-tag",
@@ -9453,9 +9628,9 @@ var infoTagSlotRecipe = 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"
         }
@@ -9829,7 +10004,108 @@ var mediaControllerSlotRecipe = defineSlotRecipe({
     }
   ]
 });
-var _a4, _b3;
+var menuSlotRecipe = 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 = defineSlotRecipe({
   slots: NativeSelectAnatomy.keys(),
   className: "spor-nativeSelect",
@@ -9873,12 +10149,12 @@ var nativeSelectSlotRecipe = 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
         }
       }
     }
@@ -11192,7 +11468,8 @@ var slotRecipes = {
   toast: toastSlotRecipe,
   checkboxCard: choiceChipSlotRecipe,
   collapsible: collapsibleSlotRecipe,
-  tooltip: popoverSlotRecipe
+  tooltip: popoverSlotRecipe,
+  menu: menuSlotRecipe
 };
 var animations = defineTokens.animations({
   spin: {
@@ -12035,6 +12312,6 @@ var TooltipContent = forwardRef(
 );
 TooltipContent.displayName = "TooltipContent";
 
-export { Accordion, AccordionItem, AccordionItemContent, AccordionItemTrigger, Alert, AttachedInputs, Autocomplete, AutocompleteItem, AutocompleteItemGroup, AutocompleteItemGroupLabel, Badge, Brand, Breadcrumb, Button, ButtonGroup, Calendar, CalendarCell, CalendarGrid, CalendarHeader, CalendarProvider, CardSelect, CardSelectContent, CardSelectTrigger, CargonetLogo, Checkbox, CheckboxGroup, ChoiceChip, Clipboard, ClipboardButton, CloseButton, CloseDrawerLine, Code, ColorInlineLoader, ColorModeButton, ColorModeIcon, ColorModeProvider, ColorSpinner, Combobox2 as Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, Drawer, DrawerActionTrigger, DrawerBackTrigger, DrawerBackdrop, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerFooter, DrawerFullScreenHeader, DrawerHeader, DrawerTitle, DrawerTrigger, Expandable, ExpandableAlert, ExpandableItem, Field3 as Field, FieldErrorText, FieldLabel, Fieldset, FieldsetContent, FieldsetErrorText, FieldsetHelperText, FieldsetLegend, FloatingActionButton, Heading, IconButton, InfoTag, Input, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, List, ListBox, ListIndicator, ListItem2 as ListItem, NativeSelect, Nudge, NudgeActions, NudgeCloseTrigger, NudgeContent, NudgeTrigger, NudgeWizardStep, NumericStepper, Pagination, PaginationEllipsis, PaginationItem, PaginationItems, PaginationNextTrigger, PaginationPrevTrigger, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover2 as Popover, PopoverContent, PopoverTrigger, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardLabel, RadioGroup, RangeCalendar, ScrollCalendar, SearchInput, Select, SelectContent, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectRoot, SelectTrigger, SelectValueText, Separator, ServiceAlert, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, StaticCard, Stepper, StepperStep, SvgBox, Switch, Table, TableBody, TableColumnHeader, Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, Text3 as Text, TextLink, Textarea, TimePicker, Tooltip, TooltipContent, TooltipTrigger, TravelTag, VyLogo, VyLogoPride, createTexts, createToast, fontFaces, slugify, system, themes, useCalendar, useColorMode, useColorModeValue, useTableSort, useTranslation };
+export { Accordion, AccordionItem, AccordionItemContent, AccordionItemTrigger, Alert, AttachedInputs, Autocomplete, AutocompleteItem, AutocompleteItemGroup, AutocompleteItemGroupLabel, Badge, Brand, Breadcrumb, Button, ButtonGroup, Calendar, CalendarCell, CalendarGrid, CalendarHeader, CalendarProvider, CardSelect, CardSelectContent, CardSelectTrigger, CargonetLogo, Checkbox, CheckboxGroup, ChoiceChip, Clipboard, ClipboardButton, CloseButton, CloseDrawerLine, Code, ColorInlineLoader, ColorModeButton, ColorModeIcon, ColorModeProvider, ColorSpinner, Combobox2 as Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, Drawer, DrawerActionTrigger, DrawerBackTrigger, DrawerBackdrop, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerFooter, DrawerFullScreenHeader, DrawerHeader, DrawerTitle, DrawerTrigger, Expandable, ExpandableAlert, ExpandableItem, Field3 as Field, FieldErrorText, FieldLabel, Fieldset, FieldsetContent, FieldsetErrorText, FieldsetHelperText, FieldsetLegend, FloatingActionButton, Heading, IconButton, InfoTag, Input, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, List, ListBox, ListIndicator, ListItem2 as ListItem, Menu, MenuCheckboxItem, MenuContent, MenuItem, MenuItemGroup, MenuRadioItem, MenuRadioItemGroup, MenuSeparator, MenuTrigger, MenuTriggerItem, NativeSelect, Nudge, NudgeActions, NudgeCloseTrigger, NudgeContent, NudgeTrigger, NudgeWizardStep, NumericStepper, Pagination, PaginationEllipsis, PaginationItem, PaginationItems, PaginationNextTrigger, PaginationPrevTrigger, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover2 as Popover, PopoverContent, PopoverTrigger, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardLabel, RadioGroup, RangeCalendar, ScrollCalendar, SearchInput, Select, SelectContent, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectRoot, SelectTrigger, SelectValueText, Separator, ServiceAlert, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, StaticCard, Stepper, StepperStep, SvgBox, Switch, Table, TableBody, TableColumnHeader, Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, Text3 as Text, TextLink, Textarea, TimePicker, Tooltip, TooltipContent, TooltipTrigger, TravelTag, VyLogo, VyLogoPride, createTexts, createToast, fontFaces, slugify, system, themes, useCalendar, useColorMode, useColorModeValue, useMenuContext, useTableSort, useTranslation };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map